Merge branch 'main' into feature/restart-server-on-update

feat: adding docker sandbox environments
feat: simplify update commands for platform
2026-04-14 17:41:32 +00:00 · 2026-04-14 17:18:33 +02:00 · 2026-04-14 15:18:02 +00:00 · 2026-04-14 16:34:05 +03:00 · 2026-04-14 15:59:06 +03:00 · 2026-04-14 15:32:04 +03:00
57 changed files with 1315 additions and 1015 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -20,14 +20,14 @@ jobs:
      contents: write
      id-token: write
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
        with:
          fetch-depth: 0
          token: ${{ secrets.RELEASE_PAT }}

-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
        with:
-          node-version: 20
+          node-version: 22
          registry-url: https://registry.npmjs.org

      - name: git config
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,21 @@
 All notable changes to CloudCLI UI will be documented in this file.


+## [1.28.1](https://github.com/siteboon/claudecodeui/compare/v1.28.0...v1.28.1) (2026-04-10)
+
+### New Features
+
+* add branding, community links, GitHub star badge, and About settings tab ([2207d05](https://github.com/siteboon/claudecodeui/commit/2207d05c1ca229214aa9c2e2c9f4d0827d421574))
+
+### Bug Fixes
+
+* corrupted binary downloads ([#634](https://github.com/siteboon/claudecodeui/issues/634)) ([e61f8a5](https://github.com/siteboon/claudecodeui/commit/e61f8a543d63fe7c24a04b3d2186085a06dcbcdb))
+* **ui:** remove mobile bottom nav, unify processing indicator, and improve tooltip behavior on mobile ([#632](https://github.com/siteboon/claudecodeui/issues/632)) ([a8dab0e](https://github.com/siteboon/claudecodeui/commit/a8dab0edcf949ae610820bae9500c433781f7c73))
+
+### Refactoring
+
+* remove unused whispher transcribe logic ([#637](https://github.com/siteboon/claudecodeui/issues/637)) ([590dd42](https://github.com/siteboon/claudecodeui/commit/590dd42649424ab990353fcf59ce0965036d3d25))
+
 ## [1.28.0](https://github.com/siteboon/claudecodeui/compare/v1.27.1...v1.28.0) (2026-04-03)

 ### New Features
--- a/README.de.md
+++ b/README.de.md
@@ -76,6 +76,8 @@ Der schnellste Einstieg – keine lokale Einrichtung erforderlich. Erhalte eine

 ### Self-Hosted (Open Source)

+#### npm
+
 CloudCLI UI sofort mit **npx** ausprobieren (erfordert **Node.js** v22+):

 ```bash
@@ -93,6 +95,15 @@ cloudcli

 Die **[Dokumentation →](https://cloudcli.ai/docs)** enthält weitere Konfigurationsoptionen, PM2, Remote-Server-Einrichtung und mehr.

+#### Docker Sandboxes (Experimentell)
+
+Agents in isolierten Sandboxes mit Hypervisor-Isolation ausführen. Standardmäßig wird Claude Code gestartet. Erfordert die [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/).
+
+```
+npx @cloudcli-ai/cloudcli sandbox ~/my-project
+```
+
+Unterstützt Claude Code, Codex und Gemini CLI. Weitere Details in der [Sandbox-Dokumentation](docker/).

 ---

--- a/README.ja.md
+++ b/README.ja.md
@@ -72,6 +72,8 @@

 ### セルフホスト（オープンソース）

+#### npm
+
 **npx** で今すぐ CloudCLI UI を試せます（**Node.js** v22+ が必要）：

 ```bash
@@ -89,6 +91,15 @@ cloudcli

 より詳細な設定オプション、PM2、リモートサーバー設定などについては **[ドキュメントはこちら →](https://cloudcli.ai/docs)** を参照してください。

+#### Docker Sandboxes（実験的）
+
+ハイパーバイザーレベルの分離でエージェントをサンドボックスで実行します。デフォルトでは Claude Code が起動します。[`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/) が必要です。
+
+```
+npx @cloudcli-ai/cloudcli sandbox ~/my-project
+```
+
+Claude Code、Codex、Gemini CLI に対応。詳細は[サンドボックスのドキュメント](docker/)をご覧ください。

 ---

--- a/README.ko.md
+++ b/README.ko.md
@@ -72,6 +72,8 @@

 ### 셀프 호스트 (오픈 소스)

+#### npm
+
 **npx**로 즉시 CloudCLI UI를 실행하세요 (Node.js v22+ 필요):

 ```bash
@@ -87,7 +89,17 @@ cloudcli

 `http://localhost:3001`을 열면 기존 세션이 자동으로 발견됩니다.

-자세한 구성 옵션, PM2, 원격 서버 설정 등은 **[문서 →](https://cloudcli.ai/docs)**를 참고하세요
+자세한 구성 옵션, PM2, 원격 서버 설정 등은 **[문서 →](https://cloudcli.ai/docs)**를 참고하세요.
+
+#### Docker Sandboxes (실험적)
+
+하이퍼바이저 수준 격리로 에이전트를 샌드박스에서 실행합니다. 기본 에이전트는 Claude Code입니다. [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/)가 필요합니다.
+
+```
+npx @cloudcli-ai/cloudcli sandbox ~/my-project
+```
+
+Claude Code, Codex, Gemini CLI를 지원합니다. 자세한 내용은 [샌드박스 문서](docker/)를 참고하세요.

 ---

--- a/README.md
+++ b/README.md
@@ -76,6 +76,8 @@ The fastest way to get started — no local setup required. Get a fully managed,

 ### Self-Hosted (Open source)

+#### npm
+
 Try CloudCLI UI instantly with **npx** (requires **Node.js** v22+):

 ```
@@ -91,33 +93,41 @@ cloudcli

 Open `http://localhost:3001` — all your existing sessions are discovered automatically.

-Visit the **[documentation →](https://cloudcli.ai/docs)** for more full configuration options, PM2, remote server setup and more
+Visit the **[documentation →](https://cloudcli.ai/docs)** for full configuration options, PM2, remote server setup and more.
+
+#### Docker Sandboxes (Experimental)
+
+Run agents in isolated sandboxes with hypervisor-level isolation. Starts Claude Code by default. Requires the [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/).
+
+```
+npx @cloudcli-ai/cloudcli sandbox ~/my-project
+```
+
+Supports Claude Code, Codex, and Gemini CLI. See the [sandbox docs](docker/) for setup and advanced options.


 ---

 ## Which option is right for you?

-CloudCLI UI is the open source UI layer that powers CloudCLI Cloud. You can self-host it on your own machine, or use CloudCLI Cloud which builds on top of it with a full managed cloud environment, team features, and deeper integrations.
+CloudCLI UI is the open source UI layer that powers CloudCLI Cloud. You can self-host it on your own machine, run it in a Docker sandbox for isolation, or use CloudCLI Cloud for a fully managed environment.

-| | CloudCLI UI (Self-hosted) | CloudCLI Cloud |
-|---|---|---|
-| **Best for** | Developers who want a full UI for local agent sessions on their own machine | Teams and developers who want agents running in the cloud, accessible from anywhere |
-| **How you access it** | Browser via `[yourip]:port` | Browser, any IDE, REST API, n8n |
-| **Setup** | `npx @cloudcli-ai/cloudcli` | No setup required |
-| **Machine needs to stay on** | Yes | No |
-| **Mobile access** | Any browser on your network | Any device, native app coming |
-| **Sessions available** | All sessions auto-discovered from `~/.claude` | All sessions within your cloud environment |
-| **Agents supported** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI |
-| **File explorer and Git** | Yes, built into the UI | Yes, built into the UI |
-| **MCP configuration** | Managed via UI, synced with your local `~/.claude` config | Managed via UI |
-| **IDE access** | Your local IDE | Any IDE connected to your cloud environment |
-| **REST API** | Yes | Yes |
-| **n8n node** | No | Yes |
-| **Team sharing** | No | Yes |
-| **Platform cost** | Free, open source | Starts at $7/month |
+| | Self-Hosted (npm) | Self-Hosted (Docker Sandbox) *(Experimental)* | CloudCLI Cloud |
+|---|---|---|---|
+| **Best for** | Local agent sessions on your own machine | Isolated agents with web/mobile IDE | Teams who want agents in the cloud |
+| **How you access it** | Browser via `[yourip]:port` | Browser via `localhost:port` | Browser, any IDE, REST API, n8n |
+| **Setup** | `npx @cloudcli-ai/cloudcli` | `npx @cloudcli-ai/cloudcli sandbox ~/project` | No setup required |
+| **Isolation** | Runs on your host | Hypervisor-level sandbox (microVM) | Full cloud isolation |
+| **Machine needs to stay on** | Yes | Yes | No |
+| **Mobile access** | Any browser on your network | Any browser on your network | Any device, native app coming |
+| **Agents supported** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI |
+| **File explorer and Git** | Yes | Yes | Yes |
+| **MCP configuration** | Synced with `~/.claude` | Managed via UI | Managed via UI |
+| **REST API** | Yes | Yes | Yes |
+| **Team sharing** | No | No | Yes |
+| **Platform cost** | Free, open source | Free, open source | Starts at $7/month |

-> Both options use your own AI subscriptions (Claude, Cursor, etc.) — CloudCLI provides the environment, not the AI.
+> All options use your own AI subscriptions (Claude, Cursor, etc.) — CloudCLI provides the environment, not the AI.

 ---

--- a/README.ru.md
+++ b/README.ru.md
@@ -76,6 +76,8 @@

 ### Self-Hosted (Open source)

+#### npm
+
 Попробовать CloudCLI UI можно сразу через **npx** (требуется **Node.js** v22+):

 ```bash
@@ -91,8 +93,17 @@ cloudcli

 Откройте `http://localhost:3001` — все ваши существующие сессии будут обнаружены автоматически.

-Посетите **[документацию →](https://cloudcli.ai/docs)**, чтобы узнать про дополнительные варианты конфигурации, PM2, настройку удалённого сервера и многое другое
+Посетите **[документацию →](https://cloudcli.ai/docs)**, чтобы узнать про дополнительные варианты конфигурации, PM2, настройку удалённого сервера и многое другое.

+#### Docker Sandboxes (Экспериментально)
+
+Запускайте агентов в изолированных песочницах с гипервизорной изоляцией. По умолчанию запускается Claude Code. Требуется [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/).
+
+```
+npx @cloudcli-ai/cloudcli sandbox ~/my-project
+```
+
+Поддерживаются Claude Code, Codex и Gemini CLI. Подробнее в [документации sandbox](docker/).

 ---

--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -72,6 +72,8 @@

 ### 自托管（开源）

+#### npm
+
 启动 CloudCLI UI，只需一行 `npx`（需要 Node.js v22+）：

 ```bash
@@ -87,7 +89,17 @@ cloudcli

 打开 `http://localhost:3001`，系统会自动发现所有现有会话。

-更多配置选项、PM2、远程服务器设置等，请参阅 **[文档 →](https://cloudcli.ai/docs)**
+更多配置选项、PM2、远程服务器设置等，请参阅 **[文档 →](https://cloudcli.ai/docs)**。
+
+#### Docker Sandboxes（实验性）
+
+在隔离的沙箱中运行代理，具有虚拟机管理程序级别的隔离。默认启动 Claude Code。需要 [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/)。
+
+```
+npx @cloudcli-ai/cloudcli sandbox ~/my-project
+```
+
+支持 Claude Code、Codex 和 Gemini CLI。详情请参阅 [沙箱文档](docker/)。

 ---

--- a/docker/README.md
+++ b/docker/README.md
@@ -1,89 +1,146 @@
-# CloudCLI — Docker Sandbox Templates
+<!-- Docker Hub short description (100 chars max): -->
+<!-- Sandbox templates for running AI coding agents with a web & mobile IDE (Claude Code, Codex, Gemini) -->

-Run AI coding agents with a full web IDE inside [Docker Sandboxes](https://docs.docker.com/ai/sandboxes/).
+# Sandboxed coding agents with a web & mobile IDE (CloudCLI)

-Instead of a terminal-only experience, get a browser-based interface with chat, file explorer, git panel, shell, and MCP configuration — all running safely inside an isolated sandbox.
+[Docker Sandbox](https://docs.docker.com/ai/sandboxes/) templates that add [CloudCLI](https://cloudcli.ai) on top of Claude Code, Codex, and Gemini CLI. You get a full web and mobile IDE accessible from any browser on any device.

-## Available Templates
+## Get started

-| Template | Base Image | Agent |
-|----------|-----------|-------|
-| `cloudcli-ai/sandbox:claude-code` | `docker/sandbox-templates:claude-code` | Claude Code |
-| `cloudcli-ai/sandbox:codex` | `docker/sandbox-templates:codex` | OpenAI Codex |
-| `cloudcli-ai/sandbox:gemini` | `docker/sandbox-templates:gemini` | Gemini CLI |
+### 1. Install the sbx CLI

-## Quick Start
+Docker Sandboxes run agents in isolated microVMs. Install the `sbx` CLI:

-### 1. Start a sandbox with the template
+- **macOS**: `brew install docker/tap/sbx`
+- **Windows**: `winget install -h Docker.sbx`
+- **Linux**: `sudo apt-get install docker-sbx`
+
+Full instructions: [docs.docker.com/ai/sandboxes/get-started](https://docs.docker.com/ai/sandboxes/get-started/)
+
+### 2. Store your API key
+
+`sbx` manages credentials securely — your API key never enters the sandbox. Store it once:

 ```bash
-sbx run --template docker.io/cloudcli-ai/sandbox:claude-code claude ~/my-project
+sbx login
+sbx secret set -g anthropic
 ```

-### 2. Forward the UI port
+### 3. Launch Claude Code

 ```bash
-sbx ports <sandbox-name> --publish 3001:3001
+npx @cloudcli-ai/cloudcli sandbox ~/my-project
 ```

-### 3. Open the browser
+Open **http://localhost:3001**. Set a password on first visit. Start building.

-```
-http://localhost:3001
+### Using a different agent
+
+Store the matching API key and pass `--agent`:
+
+```bash
+# OpenAI Codex
+sbx secret set -g openai
+npx @cloudcli-ai/cloudcli sandbox ~/my-project --agent codex
+
+# Gemini CLI
+sbx secret set -g google
+npx @cloudcli-ai/cloudcli sandbox ~/my-project --agent gemini
 ```

-On first visit you'll set a password — this protects the UI if the port is ever exposed beyond localhost.
+### Available templates

-## What You Get
+| Agent | Template |
+|-------|----------|
+| **Claude Code** (default) | `docker.io/cloudcliai/sandbox:claude-code` |
+| OpenAI Codex | `docker.io/cloudcliai/sandbox:codex` |
+| Gemini CLI | `docker.io/cloudcliai/sandbox:gemini` |

- **Chat** — Rich conversation UI with markdown rendering, code blocks, and message history
- **Files** — Visual file tree with syntax-highlighted editor
- **Git** — Diff viewer, staging, branch switching, and commit — all visual
+These are used with `--template` when running `sbx` directly (see [Advanced usage](#advanced-usage)).
+
+## Managing sandboxes
+
+```bash
+cloudcli sandbox ls                  # List all sandboxes
+cloudcli sandbox stop my-project     # Stop (preserves state)
+cloudcli sandbox start my-project    # Restart and re-launch web UI
+cloudcli sandbox logs my-project     # View server logs
+cloudcli sandbox rm my-project       # Remove everything
+```
+
+## What you get
+
+- **Chat** — Markdown rendering, code blocks, message history
+- **Files** — File tree with syntax-highlighted editor
+- **Git** — Diff viewer, staging, branch switching, commits
 - **Shell** — Built-in terminal emulator
- **MCP** — Configure Model Context Protocol servers through the UI
+- **MCP** — Configure Model Context Protocol servers visually
 - **Mobile** — Works on tablet and phone browsers

-## Building Locally
-
-All Dockerfiles share scripts from `shared/`. Build with the `docker/` directory as context:
-
-```bash
-# Claude Code variant
-docker build -f docker/claude-code/Dockerfile -t cloudcli-sandbox:claude-code docker/
-
-# Codex variant
-docker build -f docker/codex/Dockerfile -t cloudcli-sandbox:codex docker/
-
-# Gemini variant
-docker build -f docker/gemini/Dockerfile -t cloudcli-sandbox:gemini docker/
-```
-
-## How It Works
-
-Each template extends Docker's official sandbox base image and adds:
-
-1. **Node.js 22** — Runtime for CloudCLI
-2. **CloudCLI** — Installed globally via `npm install -g @cloudcli-ai/cloudcli`
-3. **Auto-start** — The UI server starts in the background when the sandbox shell opens (port 3001)
-
-The agent (Claude Code, Codex, or Gemini) comes from the base image. CloudCLI connects to it and provides the web interface on top.
+Your project directory is mounted bidirectionally — edits propagate in real time, both ways.

 ## Configuration

-| Environment Variable | Default | Description |
-|---------------------|---------|-------------|
-| `SERVER_PORT` | `3001` | Port for the web UI |
-| `HOST` | `0.0.0.0` | Bind address |
-| `DATABASE_PATH` | `~/.cloudcli/auth.db` | SQLite database location |
-
-## Network Policies
-
-If your sandbox uses restricted network policies, allow the UI port:
+Set variables at creation time with `--env`:

 ```bash
-sbx policy allow network "localhost:3001"
+npx @cloudcli-ai/cloudcli sandbox ~/my-project --env SERVER_PORT=8080
 ```

+Or inside a running sandbox:
+
+```bash
+sbx exec my-project bash -c 'echo "export SERVER_PORT=8080" >> /etc/sandbox-persistent.sh'
+sbx exec my-project bash -c 'pkill -f "server/index.js"; . ~/.cloudcli-start.sh'
+```
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `SERVER_PORT` | `3001` | Web UI port |
+| `HOST` | `0.0.0.0` | Bind address (must be `0.0.0.0` for `sbx ports`) |
+| `DATABASE_PATH` | `~/.cloudcli/auth.db` | SQLite database location |
+
+## Advanced usage
+
+For branch mode, multiple workspaces, memory limits, or the terminal agent experience, use `sbx` with the template:
+
+```bash
+# Terminal agent + web UI
+sbx run --template docker.io/cloudcliai/sandbox:claude-code claude ~/my-project --name my-project
+sbx ports my-project --publish 3001:3001
+
+# Branch mode (Git worktree isolation)
+sbx run --template docker.io/cloudcliai/sandbox:claude-code claude ~/my-project --branch my-feature
+
+# Multiple workspaces
+sbx run --template docker.io/cloudcliai/sandbox:claude-code claude ~/project ~/shared-libs:ro
+
+# Pass a prompt directly
+sbx run --template docker.io/cloudcliai/sandbox:claude-code claude ~/my-project -- "Fix the auth bug"
+```
+
+CloudCLI auto-starts via `.bashrc` when using `sbx run`.
+
+Full options in the [Docker Sandboxes usage guide](https://docs.docker.com/ai/sandboxes/usage/).
+
+## Network policies
+
+Sandboxes restrict outbound access by default. To reach host services from inside the sandbox:
+
+```bash
+sbx policy allow network localhost:11434
+# Inside the sandbox: curl http://host.docker.internal:11434
+```
+
+The web UI itself doesn't need a policy — access it via `sbx ports`.
+
+## Links
+
+- [CloudCLI Cloud](https://cloudcli.ai) — fully managed, no setup required
+- [Documentation](https://cloudcli.ai/docs) — full configuration guide
+- [Discord](https://discord.gg/buxwujPNRE) — community support
+- [GitHub](https://github.com/siteboon/claudecodeui) — source code and issues
+
 ## License

-These templates are free and open-source under the same license as CloudCLI (AGPL-3.0-or-later).
+AGPL-3.0-or-later
--- a/docker/claude-code/Dockerfile
+++ b/docker/claude-code/Dockerfile
@@ -5,7 +5,7 @@ COPY shared/install-cloudcli.sh /tmp/install-cloudcli.sh
 RUN chmod +x /tmp/install-cloudcli.sh && /tmp/install-cloudcli.sh

 USER agent
-RUN npm install -g @cloudcli-ai/cloudcli
+RUN npm install -g @cloudcli-ai/cloudcli && cloudcli --version

-COPY shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh
+COPY --chown=agent:agent shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh
 RUN echo '. ~/.cloudcli-start.sh' >> /home/agent/.bashrc
--- a/docker/codex/Dockerfile
+++ b/docker/codex/Dockerfile
@@ -5,7 +5,7 @@ COPY shared/install-cloudcli.sh /tmp/install-cloudcli.sh
 RUN chmod +x /tmp/install-cloudcli.sh && /tmp/install-cloudcli.sh

 USER agent
-RUN npm install -g @cloudcli-ai/cloudcli
+RUN npm install -g @cloudcli-ai/cloudcli && cloudcli --version

-COPY shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh
+COPY --chown=agent:agent shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh
 RUN echo '. ~/.cloudcli-start.sh' >> /home/agent/.bashrc
--- a/docker/gemini/Dockerfile
+++ b/docker/gemini/Dockerfile
@@ -5,7 +5,7 @@ COPY shared/install-cloudcli.sh /tmp/install-cloudcli.sh
 RUN chmod +x /tmp/install-cloudcli.sh && /tmp/install-cloudcli.sh

 USER agent
-RUN npm install -g @cloudcli-ai/cloudcli
+RUN npm install -g @cloudcli-ai/cloudcli && cloudcli --version

-COPY shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh
+COPY --chown=agent:agent shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh
 RUN echo '. ~/.cloudcli-start.sh' >> /home/agent/.bashrc
--- a/docker/shared/install-cloudcli.sh
+++ b/docker/shared/install-cloudcli.sh
@@ -1,13 +1,10 @@
 #!/bin/bash
 set -e

-# Install Node.js 22 LTS
-curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
-
-# Install Node.js + build tools needed for native modules (node-pty, better-sqlite3, bcrypt)
-# Node.js + build tools for native modules + common dev tools
-apt-get install -y --no-install-recommends \
-  nodejs build-essential python3 python3-setuptools \
+# Install build tools needed for native modules (node-pty, better-sqlite3, bcrypt)
+# Node.js is already provided by the sandbox base image
+apt-get update && apt-get install -y --no-install-recommends \
+  build-essential python3 python3-setuptools \
  jq ripgrep sqlite3 zip unzip tree vim-tiny

 # Clean up apt cache to reduce image size
--- a/docker/shared/start-cloudcli.sh
+++ b/docker/shared/start-cloudcli.sh
@@ -4,19 +4,14 @@
 # This script is sourced from ~/.bashrc on sandbox shell open.

 if ! pgrep -f "server/index.js" > /dev/null 2>&1; then
-  # Start the pre-installed version immediately
  nohup cloudcli start --port 3001 > /tmp/cloudcli-ui.log 2>&1 &
  disown

-  # Check for updates in the background (non-blocking)
-  nohup npm update -g @cloudcli-ai/cloudcli > /tmp/cloudcli-update.log 2>&1 &
-  disown
-
  echo ""
  echo "  CloudCLI is starting on port 3001..."
  echo ""
-  echo "  To access the web UI, forward the port:"
-  echo "    sbx ports \$(hostname) --publish 3001:3001"
+  echo "  Forward the port from another terminal:"
+  echo "    sbx ports <sandbox-name> --publish 3001:3001"
  echo ""
  echo "  Then open: http://localhost:3001"
  echo ""
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@cloudcli-ai/cloudcli",
-  "version": "1.28.0",
+  "version": "1.28.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@cloudcli-ai/cloudcli",
-      "version": "1.28.0",
+      "version": "1.28.1",
      "hasInstallScript": true,
      "license": "AGPL-3.0-or-later",
      "dependencies": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@cloudcli-ai/cloudcli",
-  "version": "1.28.0",
+  "version": "1.28.1",
  "description": "A web-based UI for Claude Code CLI",
  "type": "module",
  "main": "server/index.js",
@@ -35,7 +35,8 @@
    "release": "./release.sh",
    "prepublishOnly": "npm run build",
    "postinstall": "node scripts/fix-node-pty.js",
-    "prepare": "husky"
+    "prepare": "husky",
+    "update:platform": "./update-platform.sh"
  },
  "keywords": [
    "claude code",
--- a/public/api-docs.html
+++ b/public/api-docs.html
@@ -585,7 +585,7 @@
                            <p>Server-sent events (SSE) format with real-time updates. Content-Type: <code>text/event-stream</code></p>

                            <h4>Response (Non-Streaming)</h4>
-                            <p>JSON object containing session details and assistant messages only (filtered). Content-Type: <code>application/json</code></p>
+                            <p>JSON object containing session details, assistant messages only (filtered), and token usage summary. Content-Type: <code>application/json</code></p>

                            <h4>Error Response</h4>
                            <p>Returns error details with appropriate HTTP status code.</p>
@@ -674,10 +674,21 @@ data: {"type":"done"}</code></pre>
            "type": "text",
            "text": "I've completed the task..."
          }
-        ]
+        ],
+        "usage": {
+          "input_tokens": 150,
+          "output_tokens": 50
+        }
      }
    }
  ],
+  "tokens": {
+    "inputTokens": 150,
+    "outputTokens": 50,
+    "cacheReadTokens": 0,
+    "cacheCreationTokens": 0,
+    "totalTokens": 200
+  },
  "projectPath": "/path/to/project",
  "branch": {
    "name": "fix-authentication-bug-abc123",
--- a/server/claude-sdk.js
+++ b/server/claude-sdk.js
@@ -274,6 +274,46 @@ function transformMessage(sdkMessage) {
  return sdkMessage;
 }

+/**
+ * Extracts token usage from SDK result messages
+ * @param {Object} resultMessage - SDK result message
+ * @returns {Object|null} Token budget object or null
+ */
+function extractTokenBudget(resultMessage) {
+  if (resultMessage.type !== 'result' || !resultMessage.modelUsage) {
+    return null;
+  }
+
+  // Get the first model's usage data
+  const modelKey = Object.keys(resultMessage.modelUsage)[0];
+  const modelData = resultMessage.modelUsage[modelKey];
+
+  if (!modelData) {
+    return null;
+  }
+
+  // Use cumulative tokens if available (tracks total for the session)
+  // Otherwise fall back to per-request tokens
+  const inputTokens = modelData.cumulativeInputTokens || modelData.inputTokens || 0;
+  const outputTokens = modelData.cumulativeOutputTokens || modelData.outputTokens || 0;
+  const cacheReadTokens = modelData.cumulativeCacheReadInputTokens || modelData.cacheReadInputTokens || 0;
+  const cacheCreationTokens = modelData.cumulativeCacheCreationInputTokens || modelData.cacheCreationInputTokens || 0;
+
+  // Total used = input + output + cache tokens
+  const totalUsed = inputTokens + outputTokens + cacheReadTokens + cacheCreationTokens;
+
+  // Use configured context window budget from environment (default 160000)
+  // This is the user's budget limit, not the model's context window
+  const contextWindow = parseInt(process.env.CONTEXT_WINDOW) || 160000;
+
+  // Token calc logged via token-budget WS event
+
+  return {
+    used: totalUsed,
+    total: contextWindow
+  };
+}
+
 /**
 * Handles image processing for SDK queries
 * Saves base64 images to temporary files and returns modified prompt with file paths
@@ -617,6 +657,18 @@ async function queryClaudeSDK(command, options = {}, ws) {
        }
        ws.send(msg);
      }
+
+      // Extract and send token budget updates from result messages
+      if (message.type === 'result') {
+        const models = Object.keys(message.modelUsage || {});
+        if (models.length > 0) {
+          // Model info available in result message
+        }
+        const tokenBudgetData = extractTokenBudget(message);
+        if (tokenBudgetData) {
+          ws.send(createNormalizedMessage({ kind: 'status', text: 'token_budget', tokenBudget: tokenBudgetData, sessionId: capturedSessionId || sessionId || null, provider: 'claude' }));
+        }
+      }
    }

    // Clean up session on completion
--- a/server/cli.js
+++ b/server/cli.js
@@ -7,6 +7,7 @@
 * Commands:
 *   (no args)     - Start the server (default)
 *   start         - Start the server
+ *   sandbox       - Manage Docker sandbox environments
 *   status        - Show configuration and data locations
 *   help          - Show help information
 *   version       - Show version information
@@ -150,6 +151,7 @@ Usage:

 Commands:
  start          Start the CloudCLI server (default)
+  sandbox        Manage Docker sandbox environments
  status         Show configuration and data locations
  update         Update to the latest version
  help           Show this help information
@@ -164,8 +166,7 @@ Options:
 Examples:
  $ cloudcli                        # Start with defaults
  $ cloudcli --port 8080            # Start on port 8080
-  $ cloudcli -p 3000                # Short form for port
-  $ cloudcli start --port 4000      # Explicit start command
+  $ cloudcli sandbox ~/my-project   # Run in a Docker sandbox
  $ cloudcli status                 # Show configuration

 Environment Variables:
@@ -244,6 +245,357 @@ async function updatePackage() {
    }
 }

+// ── Sandbox command ─────────────────────────────────────────
+
+const SANDBOX_TEMPLATES = {
+    claude: 'docker.io/cloudcliai/sandbox:claude-code',
+    codex: 'docker.io/cloudcliai/sandbox:codex',
+    gemini: 'docker.io/cloudcliai/sandbox:gemini',
+};
+
+const SANDBOX_SECRETS = {
+    claude: 'anthropic',
+    codex: 'openai',
+    gemini: 'google',
+};
+
+function parseSandboxArgs(args) {
+    const result = {
+        subcommand: null,
+        workspace: null,
+        agent: 'claude',
+        name: null,
+        port: 3001,
+        template: null,
+        env: [],
+    };
+
+    const subcommands = ['ls', 'stop', 'start', 'rm', 'logs', 'help'];
+
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+
+        if (i === 0 && subcommands.includes(arg)) {
+            result.subcommand = arg;
+        } else if (arg === '--agent' || arg === '-a') {
+            result.agent = args[++i];
+        } else if (arg === '--name' || arg === '-n') {
+            result.name = args[++i];
+        } else if (arg === '--port') {
+            result.port = parseInt(args[++i], 10);
+        } else if (arg === '--template' || arg === '-t') {
+            result.template = args[++i];
+        } else if (arg === '--env' || arg === '-e') {
+            result.env.push(args[++i]);
+        } else if (!arg.startsWith('-')) {
+            if (!result.subcommand) {
+                result.workspace = arg;
+            } else {
+                result.name = arg; // for stop/start/rm/logs <name>
+            }
+        }
+    }
+
+    // Default subcommand based on what we got
+    if (!result.subcommand) {
+        result.subcommand = 'create';
+    }
+
+    // Derive name from workspace path if not set
+    if (!result.name && result.workspace) {
+        result.name = path.basename(path.resolve(result.workspace.replace(/^~/, os.homedir())));
+    }
+
+    // Default template from agent
+    if (!result.template) {
+        result.template = SANDBOX_TEMPLATES[result.agent] || SANDBOX_TEMPLATES.claude;
+    }
+
+    return result;
+}
+
+function showSandboxHelp() {
+    console.log(`
+${c.bright('CloudCLI Sandbox')} — Run CloudCLI inside Docker Sandboxes
+
+Usage:
+  cloudcli sandbox <workspace>            Create and start a sandbox
+  cloudcli sandbox <subcommand> [name]    Manage sandboxes
+
+Subcommands:
+  ${c.bright('(default)')}    Create a sandbox and start the web UI
+  ${c.bright('ls')}           List all sandboxes
+  ${c.bright('start')}        Restart a stopped sandbox and re-launch the web UI
+  ${c.bright('stop')}         Stop a sandbox (preserves state)
+  ${c.bright('rm')}           Remove a sandbox
+  ${c.bright('logs')}         Show CloudCLI server logs
+  ${c.bright('help')}         Show this help
+
+Options:
+  -a, --agent <agent>       Agent to use: claude, codex, gemini (default: claude)
+  -n, --name <name>         Sandbox name (default: derived from workspace folder)
+  -t, --template <image>    Custom template image
+  -e, --env <KEY=VALUE>     Set environment variable (repeatable)
+      --port <port>         Host port for the web UI (default: 3001)
+
+Examples:
+  $ cloudcli sandbox ~/my-project
+  $ cloudcli sandbox ~/my-project --agent codex --port 8080
+  $ cloudcli sandbox ~/my-project --env SERVER_PORT=8080 --env HOST=0.0.0.0
+  $ cloudcli sandbox ls
+  $ cloudcli sandbox stop my-project
+  $ cloudcli sandbox start my-project
+  $ cloudcli sandbox rm my-project
+
+Prerequisites:
+  1. Install sbx CLI: https://docs.docker.com/ai/sandboxes/get-started/
+  2. Authenticate and store your API key:
+       sbx login
+       sbx secret set -g anthropic   # for Claude
+       sbx secret set -g openai      # for Codex
+       sbx secret set -g google      # for Gemini
+
+Advanced usage:
+  For branch mode, multiple workspaces, memory limits, network policies,
+  or passing prompts to the agent, use sbx directly with the template:
+
+    sbx run --template docker.io/cloudcliai/sandbox:claude-code claude ~/my-project --branch my-feature
+    sbx run --template docker.io/cloudcliai/sandbox:claude-code claude ~/project ~/libs:ro --memory 8g
+
+  Full Docker Sandboxes docs: https://docs.docker.com/ai/sandboxes/usage/
+`);
+}
+
+async function sandboxCommand(args) {
+    const { execFileSync } = await import('child_process');
+
+    // Safe execution — uses execFileSync (no shell) to prevent injection
+    const sbx = (subcmd, opts = {}) => {
+        const result = execFileSync('sbx', subcmd, {
+            encoding: 'utf8',
+            stdio: opts.inherit ? 'inherit' : 'pipe',
+        });
+        return result || '';
+    };
+
+    const opts = parseSandboxArgs(args);
+
+    if (opts.subcommand === 'help') {
+        showSandboxHelp();
+        return;
+    }
+
+    // Validate name (alphanumeric, hyphens, underscores only)
+    if (opts.name && !/^[\w-]+$/.test(opts.name)) {
+        console.error(`\n${c.error('❌')} Invalid sandbox name: ${opts.name}`);
+        console.log(`   Names may only contain letters, numbers, hyphens, and underscores.\n`);
+        process.exit(1);
+    }
+
+    // Check sbx is installed
+    try {
+        sbx(['version']);
+    } catch {
+        console.error(`\n${c.error('❌')} ${c.bright('sbx')} CLI not found.\n`);
+        console.log(`   Install it from: ${c.info('https://docs.docker.com/ai/sandboxes/get-started/')}`);
+        console.log(`   Then run: ${c.bright('sbx login')}`);
+        console.log(`   And store your API key: ${c.bright('sbx secret set -g anthropic')}\n`);
+        process.exit(1);
+    }
+
+    switch (opts.subcommand) {
+
+        case 'ls':
+            sbx(['ls'], { inherit: true });
+            break;
+
+        case 'stop':
+            if (!opts.name) {
+                console.error(`\n${c.error('❌')} Sandbox name required: cloudcli sandbox stop <name>\n`);
+                process.exit(1);
+            }
+            sbx(['stop', opts.name], { inherit: true });
+            break;
+
+        case 'rm':
+            if (!opts.name) {
+                console.error(`\n${c.error('❌')} Sandbox name required: cloudcli sandbox rm <name>\n`);
+                process.exit(1);
+            }
+            sbx(['rm', opts.name], { inherit: true });
+            break;
+
+        case 'logs':
+            if (!opts.name) {
+                console.error(`\n${c.error('❌')} Sandbox name required: cloudcli sandbox logs <name>\n`);
+                process.exit(1);
+            }
+            try {
+                sbx(['exec', opts.name, 'bash', '-c', 'cat /tmp/cloudcli-ui.log'], { inherit: true });
+            } catch (e) {
+                console.error(`\n${c.error('❌')} Could not read logs: ${e.message || 'Is the sandbox running?'}\n`);
+            }
+            break;
+
+        case 'start': {
+            if (!opts.name) {
+                console.error(`\n${c.error('❌')} Sandbox name required: cloudcli sandbox start <name>\n`);
+                process.exit(1);
+            }
+            console.log(`\n${c.info('▶')} Starting sandbox ${c.bright(opts.name)}...`);
+            try {
+                sbx(['start', opts.name], { inherit: true });
+            } catch { /* might already be running */ }
+
+            console.log(`${c.info('▶')} Launching CloudCLI web server...`);
+            sbx(['exec', '-d', opts.name, 'bash', '-c', '. ~/.cloudcli-start.sh']);
+
+            console.log(`${c.info('▶')} Forwarding port ${opts.port} → 3001...`);
+            try {
+                sbx(['ports', opts.name, '--publish', `${opts.port}:3001`]);
+            } catch (e) {
+                const msg = e.stdout || e.stderr || e.message || '';
+                if (msg.includes('address already in use')) {
+                    const altPort = opts.port + 1;
+                    console.log(`${c.warn('⚠')}  Port ${opts.port} in use, trying ${altPort}...`);
+                    try {
+                        sbx(['ports', opts.name, '--publish', `${altPort}:3001`]);
+                        opts.port = altPort;
+                    } catch {
+                        console.error(`${c.error('❌')} Ports ${opts.port} and ${altPort} both in use. Use --port to specify a free port.`);
+                        process.exit(1);
+                    }
+                } else {
+                    throw e;
+                }
+            }
+
+            console.log(`\n${c.ok('✔')} ${c.bright('CloudCLI is ready!')}`);
+            console.log(`  ${c.info('→')} ${c.bright(`http://localhost:${opts.port}`)}\n`);
+            break;
+        }
+
+        case 'create': {
+            if (!opts.workspace) {
+                console.error(`\n${c.error('❌')} Workspace path required: cloudcli sandbox <path>\n`);
+                console.log(`   Example: ${c.bright('cloudcli sandbox ~/my-project')}\n`);
+                process.exit(1);
+            }
+
+            const workspace = opts.workspace.startsWith('~')
+                ? opts.workspace.replace(/^~/, os.homedir())
+                : path.resolve(opts.workspace);
+
+            if (!fs.existsSync(workspace)) {
+                console.error(`\n${c.error('❌')} Workspace path not found: ${c.dim(workspace)}\n`);
+                process.exit(1);
+            }
+
+            const secret = SANDBOX_SECRETS[opts.agent] || 'anthropic';
+
+            // Check if the required secret is stored
+            try {
+                const secretList = sbx(['secret', 'ls']);
+                if (!secretList.includes(secret)) {
+                    console.error(`\n${c.error('❌')} No ${c.bright(secret)} API key found.\n`);
+                    console.log(`   Run: ${c.bright(`sbx secret set -g ${secret}`)}\n`);
+                    process.exit(1);
+                }
+            } catch { /* sbx secret ls not available, skip check */ }
+
+            console.log(`\n${c.bright('CloudCLI Sandbox')}`);
+            console.log(c.dim('─'.repeat(50)));
+            console.log(`  Agent:     ${c.info(opts.agent)} ${c.dim(`(${secret} credentials)`)}`);
+            console.log(`  Workspace: ${c.dim(workspace)}`);
+            console.log(`  Name:      ${c.dim(opts.name)}`);
+            console.log(`  Template:  ${c.dim(opts.template)}`);
+            console.log(`  Port:      ${c.dim(String(opts.port))}`);
+            if (opts.env.length > 0) {
+                console.log(`  Env:       ${c.dim(opts.env.join(', '))}`);
+            }
+            console.log(c.dim('─'.repeat(50)));
+
+            // Step 1: Create sandbox
+            console.log(`\n${c.info('▶')} Creating sandbox ${c.bright(opts.name)}...`);
+            try {
+                sbx(
+                    ['create', '--template', opts.template, '--name', opts.name, opts.agent, workspace],
+                    { inherit: true }
+                );
+            } catch (e) {
+                const msg = e.stdout || e.stderr || e.message || '';
+                if (msg.includes('already exists')) {
+                    console.log(`${c.warn('⚠')}  Sandbox ${c.bright(opts.name)} already exists. Starting it instead...\n`);
+                    try { sbx(['start', opts.name]); } catch { /* may already be running */ }
+                } else {
+                    throw e;
+                }
+            }
+
+            // Step 2: Inject environment variables
+            if (opts.env.length > 0) {
+                console.log(`${c.info('▶')} Setting environment variables...`);
+                const exports = opts.env
+                    .filter(e => /^\w+=.+$/.test(e))
+                    .map(e => `export ${e}`)
+                    .join('\n');
+                if (exports) {
+                    sbx(['exec', opts.name, 'bash', '-c', `echo '${exports}' >> /etc/sandbox-persistent.sh`]);
+                }
+                const invalid = opts.env.filter(e => !/^\w+=.+$/.test(e));
+                if (invalid.length > 0) {
+                    console.log(`${c.warn('⚠')}  Skipped invalid env vars: ${invalid.join(', ')} (expected KEY=VALUE)`);
+                }
+            }
+
+            // Step 3: Start CloudCLI
+            console.log(`${c.info('▶')} Launching CloudCLI web server...`);
+            try {
+                sbx(['exec', '-d', opts.name, 'bash', '-c', '. ~/.cloudcli-start.sh']);
+            } catch (e) {
+                console.error(`${c.error('❌')} Failed to start CloudCLI: ${e.message}`);
+                process.exit(1);
+            }
+
+            // Step 4: Forward port
+            console.log(`${c.info('▶')} Forwarding port ${opts.port} → 3001...`);
+            try {
+                sbx(['ports', opts.name, '--publish', `${opts.port}:3001`]);
+            } catch (e) {
+                const msg = e.stdout || e.stderr || e.message || '';
+                if (msg.includes('address already in use')) {
+                    const altPort = opts.port + 1;
+                    console.log(`${c.warn('⚠')}  Port ${opts.port} in use, trying ${altPort}...`);
+                    try {
+                        sbx(['ports', opts.name, '--publish', `${altPort}:3001`]);
+                        opts.port = altPort;
+                    } catch {
+                        console.error(`${c.error('❌')} Ports ${opts.port} and ${altPort} both in use. Use --port to specify a free port.`);
+                        process.exit(1);
+                    }
+                } else {
+                    throw e;
+                }
+            }
+
+            // Done
+            console.log(`\n${c.ok('✔')} ${c.bright('CloudCLI is ready!')}`);
+            console.log(`  ${c.info('→')} Open ${c.bright(`http://localhost:${opts.port}`)}`);
+            console.log(`\n${c.dim('  Manage with:')}`);
+            console.log(`  ${c.dim('$')} cloudcli sandbox ls`);
+            console.log(`  ${c.dim('$')} cloudcli sandbox stop ${opts.name}`);
+            console.log(`  ${c.dim('$')} cloudcli sandbox start ${opts.name}`);
+            console.log(`  ${c.dim('$')} cloudcli sandbox rm ${opts.name}\n`);
+            break;
+        }
+
+        default:
+            showSandboxHelp();
+    }
+}
+
+// ── Server ──────────────────────────────────────────────────
+
 // Start the server
 async function startServer() {
    // Check for updates silently on startup
@@ -274,6 +626,10 @@ function parseArgs(args) {
            parsed.command = 'version';
        } else if (!arg.startsWith('-')) {
            parsed.command = arg;
+            if (arg === 'sandbox') {
+                parsed.remainingArgs = args.slice(i + 1);
+                break;
+            }
        }
    }

@@ -283,7 +639,7 @@ function parseArgs(args) {
 // Main CLI handler
 async function main() {
    const args = process.argv.slice(2);
-    const { command, options } = parseArgs(args);
+    const { command, options, remainingArgs } = parseArgs(args);

    // Apply CLI options to environment variables
    if (options.serverPort) {
@@ -299,6 +655,9 @@ async function main() {
        case 'start':
            await startServer();
            break;
+        case 'sandbox':
+            await sandboxCommand(remainingArgs || []);
+            break;
        case 'status':
        case 'info':
            showStatus();
--- a/server/index.js
+++ b/server/index.js
@@ -435,13 +435,20 @@ app.post('/api/system/update', authenticateToken, async (req, res) => {

        console.log('Starting system update from directory:', projectRoot);

-        // Run the update command based on install mode
-        const updateCommand = installMode === 'git'
-            ? 'git checkout main && git pull && npm install'
-            : 'npm install -g @cloudcli-ai/cloudcli@latest';
+        // Platform deployments use their own update workflow from the project root.
+        const updateCommand = IS_PLATFORM
+        // In platform, husky and dev dependencies are not needed
+            ? 'npm run update:platform'
+            : installMode === 'git'
+                ? 'git checkout main && git pull && npm install'
+                : 'npm install -g @cloudcli-ai/cloudcli@latest';
+
+        const updateCwd = IS_PLATFORM || installMode === 'git'
+            ? projectRoot
+            : os.homedir();

        const child = spawn('sh', ['-c', updateCommand], {
-            cwd: installMode === 'git' ? projectRoot : os.homedir(),
+            cwd: updateCwd,
            env: process.env
        });

@@ -1984,155 +1991,6 @@ function handleShellConnection(ws) {
        console.error('[ERROR] Shell WebSocket error:', error);
    });
 }
-// Audio transcription endpoint
-app.post('/api/transcribe', authenticateToken, async (req, res) => {
-    try {
-        const multer = (await import('multer')).default;
-        const upload = multer({ storage: multer.memoryStorage() });
-
-        // Handle multipart form data
-        upload.single('audio')(req, res, async (err) => {
-            if (err) {
-                return res.status(400).json({ error: 'Failed to process audio file' });
-            }
-
-            if (!req.file) {
-                return res.status(400).json({ error: 'No audio file provided' });
-            }
-
-            const apiKey = process.env.OPENAI_API_KEY;
-            if (!apiKey) {
-                return res.status(500).json({ error: 'OpenAI API key not configured. Please set OPENAI_API_KEY in server environment.' });
-            }
-
-            try {
-                // Create form data for OpenAI
-                const FormData = (await import('form-data')).default;
-                const formData = new FormData();
-                formData.append('file', req.file.buffer, {
-                    filename: req.file.originalname,
-                    contentType: req.file.mimetype
-                });
-                formData.append('model', 'whisper-1');
-                formData.append('response_format', 'json');
-                formData.append('language', 'en');
-
-                // Make request to OpenAI
-                const response = await fetch('https://api.openai.com/v1/audio/transcriptions', {
-                    method: 'POST',
-                    headers: {
-                        'Authorization': `Bearer ${apiKey}`,
-                        ...formData.getHeaders()
-                    },
-                    body: formData
-                });
-
-                if (!response.ok) {
-                    const errorData = await response.json().catch(() => ({}));
-                    throw new Error(errorData.error?.message || `Whisper API error: ${response.status}`);
-                }
-
-                const data = await response.json();
-                let transcribedText = data.text || '';
-
-                // Check if enhancement mode is enabled
-                const mode = req.body.mode || 'default';
-
-                // If no transcribed text, return empty
-                if (!transcribedText) {
-                    return res.json({ text: '' });
-                }
-
-                // If default mode, return transcribed text without enhancement
-                if (mode === 'default') {
-                    return res.json({ text: transcribedText });
-                }
-
-                // Handle different enhancement modes
-                try {
-                    const OpenAI = (await import('openai')).default;
-                    const openai = new OpenAI({ apiKey });
-
-                    let prompt, systemMessage, temperature = 0.7, maxTokens = 800;
-
-                    switch (mode) {
-                        case 'prompt':
-                            systemMessage = 'You are an expert prompt engineer who creates clear, detailed, and effective prompts.';
-                            prompt = `You are an expert prompt engineer. Transform the following rough instruction into a clear, detailed, and context-aware AI prompt.
-
-Your enhanced prompt should:
-1. Be specific and unambiguous
-2. Include relevant context and constraints
-3. Specify the desired output format
-4. Use clear, actionable language
-5. Include examples where helpful
-6. Consider edge cases and potential ambiguities
-
-Transform this rough instruction into a well-crafted prompt:
-"${transcribedText}"
-
-Enhanced prompt:`;
-                            break;
-
-                        case 'vibe':
-                        case 'instructions':
-                        case 'architect':
-                            systemMessage = 'You are a helpful assistant that formats ideas into clear, actionable instructions for AI agents.';
-                            temperature = 0.5; // Lower temperature for more controlled output
-                            prompt = `Transform the following idea into clear, well-structured instructions that an AI agent can easily understand and execute.
-
-IMPORTANT RULES:
- Format as clear, step-by-step instructions
- Add reasonable implementation details based on common patterns
- Only include details directly related to what was asked
- Do NOT add features or functionality not mentioned
- Keep the original intent and scope intact
- Use clear, actionable language an agent can follow
-
-Transform this idea into agent-friendly instructions:
-"${transcribedText}"
-
-Agent instructions:`;
-                            break;
-
-                        default:
-                            // No enhancement needed
-                            break;
-                    }
-
-                    // Only make GPT call if we have a prompt
-                    if (prompt) {
-                        const completion = await openai.chat.completions.create({
-                            model: 'gpt-4o-mini',
-                            messages: [
-                                { role: 'system', content: systemMessage },
-                                { role: 'user', content: prompt }
-                            ],
-                            temperature: temperature,
-                            max_tokens: maxTokens
-                        });
-
-                        transcribedText = completion.choices[0].message.content || transcribedText;
-                    }
-
-                } catch (gptError) {
-                    console.error('GPT processing error:', gptError);
-                    // Fall back to original transcription if GPT fails
-                }
-
-                res.json({ text: transcribedText });
-
-            } catch (error) {
-                console.error('Transcription error:', error);
-                res.status(500).json({ error: error.message });
-            }
-        });
-    } catch (error) {
-        console.error('Endpoint error:', error);
-        res.status(500).json({ error: 'Internal server error' });
-    }
-});
-
 // Image upload endpoint
 app.post('/api/projects/:projectName/upload-images', authenticateToken, async (req, res) => {
    try {
@@ -2218,6 +2076,194 @@ app.post('/api/projects/:projectName/upload-images', authenticateToken, async (r
    }
 });

+// Get token usage for a specific session
+app.get('/api/projects/:projectName/sessions/:sessionId/token-usage', authenticateToken, async (req, res) => {
+    try {
+        const { projectName, sessionId } = req.params;
+        const { provider = 'claude' } = req.query;
+        const homeDir = os.homedir();
+
+        // Allow only safe characters in sessionId
+        const safeSessionId = String(sessionId).replace(/[^a-zA-Z0-9._-]/g, '');
+        if (!safeSessionId || safeSessionId !== String(sessionId)) {
+            return res.status(400).json({ error: 'Invalid sessionId' });
+        }
+
+        // Handle Cursor sessions - they use SQLite and don't have token usage info
+        if (provider === 'cursor') {
+            return res.json({
+                used: 0,
+                total: 0,
+                breakdown: { input: 0, cacheCreation: 0, cacheRead: 0 },
+                unsupported: true,
+                message: 'Token usage tracking not available for Cursor sessions'
+            });
+        }
+
+        // Handle Gemini sessions - they are raw logs in our current setup
+        if (provider === 'gemini') {
+            return res.json({
+                used: 0,
+                total: 0,
+                breakdown: { input: 0, cacheCreation: 0, cacheRead: 0 },
+                unsupported: true,
+                message: 'Token usage tracking not available for Gemini sessions'
+            });
+        }
+
+        // Handle Codex sessions
+        if (provider === 'codex') {
+            const codexSessionsDir = path.join(homeDir, '.codex', 'sessions');
+
+            // Find the session file by searching for the session ID
+            const findSessionFile = async (dir) => {
+                try {
+                    const entries = await fsPromises.readdir(dir, { withFileTypes: true });
+                    for (const entry of entries) {
+                        const fullPath = path.join(dir, entry.name);
+                        if (entry.isDirectory()) {
+                            const found = await findSessionFile(fullPath);
+                            if (found) return found;
+                        } else if (entry.name.includes(safeSessionId) && entry.name.endsWith('.jsonl')) {
+                            return fullPath;
+                        }
+                    }
+                } catch (error) {
+                    // Skip directories we can't read
+                }
+                return null;
+            };
+
+            const sessionFilePath = await findSessionFile(codexSessionsDir);
+
+            if (!sessionFilePath) {
+                return res.status(404).json({ error: 'Codex session file not found', sessionId: safeSessionId });
+            }
+
+            // Read and parse the Codex JSONL file
+            let fileContent;
+            try {
+                fileContent = await fsPromises.readFile(sessionFilePath, 'utf8');
+            } catch (error) {
+                if (error.code === 'ENOENT') {
+                    return res.status(404).json({ error: 'Session file not found', path: sessionFilePath });
+                }
+                throw error;
+            }
+            const lines = fileContent.trim().split('\n');
+            let totalTokens = 0;
+            let contextWindow = 200000; // Default for Codex/OpenAI
+
+            // Find the latest token_count event with info (scan from end)
+            for (let i = lines.length - 1; i >= 0; i--) {
+                try {
+                    const entry = JSON.parse(lines[i]);
+
+                    // Codex stores token info in event_msg with type: "token_count"
+                    if (entry.type === 'event_msg' && entry.payload?.type === 'token_count' && entry.payload?.info) {
+                        const tokenInfo = entry.payload.info;
+                        if (tokenInfo.total_token_usage) {
+                            totalTokens = tokenInfo.total_token_usage.total_tokens || 0;
+                        }
+                        if (tokenInfo.model_context_window) {
+                            contextWindow = tokenInfo.model_context_window;
+                        }
+                        break; // Stop after finding the latest token count
+                    }
+                } catch (parseError) {
+                    // Skip lines that can't be parsed
+                    continue;
+                }
+            }
+
+            return res.json({
+                used: totalTokens,
+                total: contextWindow
+            });
+        }
+
+        // Handle Claude sessions (default)
+        // Extract actual project path
+        let projectPath;
+        try {
+            projectPath = await extractProjectDirectory(projectName);
+        } catch (error) {
+            console.error('Error extracting project directory:', error);
+            return res.status(500).json({ error: 'Failed to determine project path' });
+        }
+
+        // Construct the JSONL file path
+        // Claude stores session files in ~/.claude/projects/[encoded-project-path]/[session-id].jsonl
+        // The encoding replaces any non-alphanumeric character (except -) with -
+        const encodedPath = projectPath.replace(/[^a-zA-Z0-9-]/g, '-');
+        const projectDir = path.join(homeDir, '.claude', 'projects', encodedPath);
+
+        const jsonlPath = path.join(projectDir, `${safeSessionId}.jsonl`);
+
+        // Constrain to projectDir
+        const rel = path.relative(path.resolve(projectDir), path.resolve(jsonlPath));
+        if (rel.startsWith('..') || path.isAbsolute(rel)) {
+            return res.status(400).json({ error: 'Invalid path' });
+        }
+
+        // Read and parse the JSONL file
+        let fileContent;
+        try {
+            fileContent = await fsPromises.readFile(jsonlPath, 'utf8');
+        } catch (error) {
+            if (error.code === 'ENOENT') {
+                return res.status(404).json({ error: 'Session file not found', path: jsonlPath });
+            }
+            throw error; // Re-throw other errors to be caught by outer try-catch
+        }
+        const lines = fileContent.trim().split('\n');
+
+        const parsedContextWindow = parseInt(process.env.CONTEXT_WINDOW, 10);
+        const contextWindow = Number.isFinite(parsedContextWindow) ? parsedContextWindow : 160000;
+        let inputTokens = 0;
+        let cacheCreationTokens = 0;
+        let cacheReadTokens = 0;
+
+        // Find the latest assistant message with usage data (scan from end)
+        for (let i = lines.length - 1; i >= 0; i--) {
+            try {
+                const entry = JSON.parse(lines[i]);
+
+                // Only count assistant messages which have usage data
+                if (entry.type === 'assistant' && entry.message?.usage) {
+                    const usage = entry.message.usage;
+
+                    // Use token counts from latest assistant message only
+                    inputTokens = usage.input_tokens || 0;
+                    cacheCreationTokens = usage.cache_creation_input_tokens || 0;
+                    cacheReadTokens = usage.cache_read_input_tokens || 0;
+
+                    break; // Stop after finding the latest assistant message
+                }
+            } catch (parseError) {
+                // Skip lines that can't be parsed
+                continue;
+            }
+        }
+
+        // Calculate total context usage (excluding output_tokens, as per ccusage)
+        const totalUsed = inputTokens + cacheCreationTokens + cacheReadTokens;
+
+        res.json({
+            used: totalUsed,
+            total: contextWindow,
+            breakdown: {
+                input: inputTokens,
+                cacheCreation: cacheCreationTokens,
+                cacheRead: cacheReadTokens
+            }
+        });
+    } catch (error) {
+        console.error('Error reading session token usage:', error);
+        res.status(500).json({ error: 'Failed to read session token usage' });
+    }
+});
+
 // Serve React app for all other routes (excluding static files)
 app.get('*', (req, res) => {
    // Skip requests for static assets (files with extensions)
--- a/server/openai-codex.js
+++ b/server/openai-codex.js
@@ -129,7 +129,8 @@ function transformCodexEvent(event) {

    case 'turn.completed':
      return {
-        type: 'turn_complete'
+        type: 'turn_complete',
+        usage: event.usage
      };

    case 'turn.failed':
@@ -278,6 +279,12 @@ export async function queryCodex(command, options = {}, ws) {
          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);
+        sendMessage(ws, createNormalizedMessage({ kind: 'status', text: 'token_budget', tokenBudget: { used: totalTokens, total: 200000 }, sessionId: currentSessionId, provider: 'codex' }));
+      }
    }

    // Send completion event
--- a/server/projects.js
+++ b/server/projects.js
@@ -1618,6 +1618,7 @@ async function getCodexSessionMessages(sessionId, limit = null, offset = 0) {
    }

    const messages = [];
+    let tokenUsage = null;
    const fileStream = fsSync.createReadStream(sessionFilePath);
    const rl = readline.createInterface({
      input: fileStream,
@@ -1646,6 +1647,17 @@ async function getCodexSessionMessages(sessionId, limit = null, offset = 0) {
        try {
          const entry = JSON.parse(line);

+          // Extract token usage from token_count events (keep latest)
+          if (entry.type === 'event_msg' && entry.payload?.type === 'token_count' && entry.payload?.info) {
+            const info = entry.payload.info;
+            if (info.total_token_usage) {
+              tokenUsage = {
+                used: info.total_token_usage.total_tokens || 0,
+                total: info.model_context_window || 200000
+              };
+            }
+          }
+          
          // Use event_msg.user_message for user-visible inputs.
          if (entry.type === 'event_msg' && isVisibleCodexUserMessage(entry.payload)) {
            messages.push({
@@ -1808,10 +1820,11 @@ async function getCodexSessionMessages(sessionId, limit = null, offset = 0) {
        hasMore,
        offset,
        limit,
+        tokenUsage
      };
    }

-    return { messages };
+    return { messages, tokenUsage };

  } catch (error) {
    console.error(`Error reading Codex session messages for ${sessionId}:`, error);
--- a/server/providers/codex/adapter.js
+++ b/server/providers/codex/adapter.js
@@ -214,6 +214,7 @@ export const codexAdapter = {
    const rawMessages = Array.isArray(result) ? result : (result.messages || []);
    const total = Array.isArray(result) ? rawMessages.length : (result.total || 0);
    const hasMore = Array.isArray(result) ? false : Boolean(result.hasMore);
+    const tokenUsage = result.tokenUsage || null;

    const normalized = [];
    for (const raw of rawMessages) {
@@ -241,6 +242,7 @@ export const codexAdapter = {
      hasMore,
      offset,
      limit,
+      tokenUsage,
    };
  },
 };
--- a/server/providers/gemini/adapter.js
+++ b/server/providers/gemini/adapter.js
@@ -53,7 +53,14 @@ export function normalizeMessage(raw, sessionId) {
  }

  if (raw.type === 'result') {
-    return [createNormalizedMessage({ sessionId, timestamp: ts, provider: PROVIDER, kind: 'stream_end' })];
+    const msgs = [createNormalizedMessage({ sessionId, timestamp: ts, provider: PROVIDER, kind: 'stream_end' })];
+    if (raw.stats?.total_tokens) {
+      msgs.push(createNormalizedMessage({
+        sessionId, timestamp: ts, provider: PROVIDER,
+        kind: 'status', text: 'Complete', tokens: raw.stats.total_tokens, canInterrupt: false,
+      }));
+    }
+    return msgs;
  }

  if (raw.type === 'error') {
--- a/server/providers/types.js
+++ b/server/providers/types.js
@@ -41,7 +41,7 @@
 * - stream_end:           (no extra fields)
 * - error:                content
 * - complete:             (no extra fields)
- * - status:               text, canInterrupt?
+ * - status:               text, tokens?, canInterrupt?
 * - permission_request:   requestId, toolName, input, context?
 * - permission_cancelled: requestId
 * - session_created:      newSessionId
@@ -66,6 +66,7 @@
 * @property {boolean} hasMore - Whether more messages exist before the current page
 * @property {number} offset - Current offset
 * @property {number|null} limit - Page size used
+ * @property {object} [tokenUsage] - Token usage data (provider-specific)
 */

 // ─── Provider Adapter Interface ──────────────────────────────────────────────
--- a/server/routes/agent.js
+++ b/server/routes/agent.js
@@ -546,12 +546,7 @@ class ResponseCollector {
          const parsed = JSON.parse(msg);
          // Only include claude-response messages with assistant type
          if (parsed.type === 'claude-response' && parsed.data && parsed.data.type === 'assistant') {
-            const assistantMessage = { ...parsed.data };
-            if (assistantMessage.message?.usage) {
-              assistantMessage.message = { ...assistantMessage.message };
-              delete assistantMessage.message.usage;
-            }
-            assistantMessages.push(assistantMessage);
+            assistantMessages.push(parsed.data);
          }
        } catch (e) {
          // Not JSON, skip
@@ -561,6 +556,49 @@ class ResponseCollector {

    return assistantMessages;
  }
+
+  /**
+   * Calculate total tokens from all messages
+   */
+  getTotalTokens() {
+    let totalInput = 0;
+    let totalOutput = 0;
+    let totalCacheRead = 0;
+    let totalCacheCreation = 0;
+
+    for (const msg of this.messages) {
+      let data = msg;
+
+      // Parse if string
+      if (typeof msg === 'string') {
+        try {
+          data = JSON.parse(msg);
+        } catch (e) {
+          continue;
+        }
+      }
+
+      // Extract usage from claude-response messages
+      if (data && data.type === 'claude-response' && data.data) {
+        const msgData = data.data;
+        if (msgData.message && msgData.message.usage) {
+          const usage = msgData.message.usage;
+          totalInput += usage.input_tokens || 0;
+          totalOutput += usage.output_tokens || 0;
+          totalCacheRead += usage.cache_read_input_tokens || 0;
+          totalCacheCreation += usage.cache_creation_input_tokens || 0;
+        }
+      }
+    }
+
+    return {
+      inputTokens: totalInput,
+      outputTokens: totalOutput,
+      cacheReadTokens: totalCacheRead,
+      cacheCreationTokens: totalCacheCreation,
+      totalTokens: totalInput + totalOutput + totalCacheRead + totalCacheCreation
+    };
+  }
 }

 // ===============================
@@ -751,6 +789,13 @@ class ResponseCollector {
 *     success: true,
 *     sessionId: "session-123",
 *     messages: [...],        // Assistant messages only (filtered)
+ *     tokens: {
+ *       inputTokens: 150,
+ *       outputTokens: 50,
+ *       cacheReadTokens: 0,
+ *       cacheCreationTokens: 0,
+ *       totalTokens: 200
+ *     },
 *     projectPath: "/path/to/project",
 *     branch: {               // Only if createBranch=true
 *       name: "feature/xyz",
@@ -1128,13 +1173,15 @@ router.post('/', validateExternalApiKey, async (req, res) => {
      // Streaming mode: end the SSE stream
      writer.end();
    } else {
-      // Non-streaming mode: send filtered messages as JSON
+      // Non-streaming mode: send filtered messages and token summary as JSON
      const assistantMessages = writer.getAssistantMessages();
+      const tokenSummary = writer.getTotalTokens();

      const response = {
        success: true,
        sessionId: writer.getSessionId(),
        messages: assistantMessages,
+        tokens: tokenSummary,
        projectPath: finalProjectPath
      };

--- a/server/routes/commands.js
+++ b/server/routes/commands.js
@@ -97,6 +97,12 @@ const builtInCommands = [
    namespace: 'builtin',
    metadata: { type: 'builtin' }
  },
+  {
+    name: '/cost',
+    description: 'Display token usage and cost information',
+    namespace: 'builtin',
+    metadata: { type: 'builtin' }
+  },
  {
    name: '/memory',
    description: 'Open CLAUDE.md memory file for editing',
@@ -203,6 +209,86 @@ Custom commands can be created in:
    };
  },

+  '/cost': async (args, context) => {
+    const tokenUsage = context?.tokenUsage || {};
+    const provider = context?.provider || 'claude';
+    const model =
+      context?.model ||
+      (provider === 'cursor'
+        ? CURSOR_MODELS.DEFAULT
+        : provider === 'codex'
+          ? CODEX_MODELS.DEFAULT
+          : CLAUDE_MODELS.DEFAULT);
+
+    const used = Number(tokenUsage.used ?? tokenUsage.totalUsed ?? tokenUsage.total_tokens ?? 0) || 0;
+    const total =
+      Number(
+        tokenUsage.total ??
+          tokenUsage.contextWindow ??
+          parseInt(process.env.CONTEXT_WINDOW || '160000', 10),
+      ) || 160000;
+    const percentage = total > 0 ? Number(((used / total) * 100).toFixed(1)) : 0;
+
+    const inputTokensRaw =
+      Number(
+        tokenUsage.inputTokens ??
+          tokenUsage.input ??
+          tokenUsage.cumulativeInputTokens ??
+          tokenUsage.promptTokens ??
+          0,
+      ) || 0;
+    const outputTokens =
+      Number(
+        tokenUsage.outputTokens ??
+          tokenUsage.output ??
+          tokenUsage.cumulativeOutputTokens ??
+          tokenUsage.completionTokens ??
+          0,
+      ) || 0;
+    const cacheTokens =
+      Number(
+        tokenUsage.cacheReadTokens ??
+          tokenUsage.cacheCreationTokens ??
+          tokenUsage.cacheTokens ??
+          tokenUsage.cachedTokens ??
+          0,
+      ) || 0;
+
+    // If we only have total used tokens, treat them as input for display/estimation.
+    const inputTokens =
+      inputTokensRaw > 0 || outputTokens > 0 || cacheTokens > 0 ? inputTokensRaw + cacheTokens : used;
+
+    // Rough default rates by provider (USD / 1M tokens).
+    const pricingByProvider = {
+      claude: { input: 3, output: 15 },
+      cursor: { input: 3, output: 15 },
+      codex: { input: 1.5, output: 6 },
+    };
+    const rates = pricingByProvider[provider] || pricingByProvider.claude;
+
+    const inputCost = (inputTokens / 1_000_000) * rates.input;
+    const outputCost = (outputTokens / 1_000_000) * rates.output;
+    const totalCost = inputCost + outputCost;
+
+    return {
+      type: 'builtin',
+      action: 'cost',
+      data: {
+        tokenUsage: {
+          used,
+          total,
+          percentage,
+        },
+        cost: {
+          input: inputCost.toFixed(4),
+          output: outputCost.toFixed(4),
+          total: totalCost.toFixed(4),
+        },
+        model,
+      },
+    };
+  },
+
  '/status': async (args, context) => {
    // Read version from package.json
    const packageJsonPath = path.join(path.dirname(__dirname), '..', 'package.json');
--- a/src/components/chat/hooks/useChatComposerState.ts
+++ b/src/components/chat/hooks/useChatComposerState.ts
@@ -42,6 +42,7 @@ interface UseChatComposerStateArgs {
  geminiModel: string;
  isLoading: boolean;
  canAbortSession: boolean;
+  tokenBudget: Record<string, unknown> | null;
  sendMessage: (message: unknown) => void;
  sendByCtrlEnter?: boolean;
  onSessionActive?: (sessionId?: string | null) => void;
@@ -56,7 +57,7 @@ interface UseChatComposerStateArgs {
  rewindMessages: (count: number) => void;
  setIsLoading: (loading: boolean) => void;
  setCanAbortSession: (canAbort: boolean) => void;
-  setClaudeStatus: (status: { text: string; can_interrupt: boolean } | null) => void;
+  setClaudeStatus: (status: { text: string; tokens: number; can_interrupt: boolean } | null) => void;
  setIsUserScrolledUp: (isScrolledUp: boolean) => void;
  setPendingPermissionRequests: Dispatch<SetStateAction<PendingPermissionRequest[]>>;
 }
@@ -113,6 +114,7 @@ export function useChatComposerState({
  geminiModel,
  isLoading,
  canAbortSession,
+  tokenBudget,
  sendMessage,
  sendByCtrlEnter,
  onSessionActive,
@@ -174,6 +176,12 @@ export function useChatComposerState({
          });
          break;

+        case 'cost': {
+          const costMessage = `**Token Usage**: ${data.tokenUsage.used.toLocaleString()} / ${data.tokenUsage.total.toLocaleString()} (${data.tokenUsage.percentage}%)\n\n**Estimated Cost**:\n- Input: $${data.cost.input}\n- Output: $${data.cost.output}\n- **Total**: $${data.cost.total}\n\n**Model**: ${data.model}`;
+          addMessage({ type: 'assistant', content: costMessage, timestamp: Date.now() });
+          break;
+        }
+
        case 'status': {
          const statusMessage = `**System Status**\n\n- Version: ${data.version}\n- Uptime: ${data.uptime}\n- Model: ${data.model}\n- Provider: ${data.provider}\n- Node.js: ${data.nodeVersion}\n- Platform: ${data.platform}`;
          addMessage({ type: 'assistant', content: statusMessage, timestamp: Date.now() });
@@ -274,6 +282,7 @@ export function useChatComposerState({
          sessionId: currentSessionId,
          provider,
          model: provider === 'cursor' ? cursorModel : provider === 'codex' ? codexModel : provider === 'gemini' ? geminiModel : claudeModel,
+          tokenUsage: tokenBudget,
        };

        const response = await authenticatedFetch('/api/commands/execute', {
@@ -330,6 +339,7 @@ export function useChatComposerState({
      provider,
      selectedProject,
      addMessage,
+      tokenBudget,
    ],
  );

@@ -533,6 +543,7 @@ export function useChatComposerState({
      setCanAbortSession(true);
      setClaudeStatus({
        text: 'Processing',
+        tokens: 0,
        can_interrupt: true,
      });

@@ -867,30 +878,6 @@ export function useChatComposerState({
    });
  }, [canAbortSession, currentSessionId, pendingViewSessionRef, provider, selectedSession?.id, sendMessage]);

-  const handleTranscript = useCallback((text: string) => {
-    if (!text.trim()) {
-      return;
-    }
-
-    setInput((previousInput) => {
-      const newInput = previousInput.trim() ? `${previousInput} ${text}` : text;
-      inputValueRef.current = newInput;
-
-      setTimeout(() => {
-        if (!textareaRef.current) {
-          return;
-        }
-
-        textareaRef.current.style.height = 'auto';
-        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
-        const lineHeight = parseInt(window.getComputedStyle(textareaRef.current).lineHeight);
-        setIsTextareaExpanded(textareaRef.current.scrollHeight > lineHeight * 2);
-      }, 0);
-
-      return newInput;
-    });
-  }, []);
-
  const handleGrantToolPermission = useCallback(
    (suggestion: { entry: string; toolName: string }) => {
      if (!suggestion || provider !== 'claude') {
@@ -983,7 +970,6 @@ export function useChatComposerState({
    syncInputOverlayScroll,
    handleClearInput,
    handleAbortSession,
-    handleTranscript,
    handlePermissionDecision,
    handleGrantToolPermission,
    handleInputFocusChange,
--- a/src/components/chat/hooks/useChatRealtimeHandlers.ts
+++ b/src/components/chat/hooks/useChatRealtimeHandlers.ts
@@ -38,7 +38,9 @@ type LatestChatMessage = {
  provider?: string;
  content?: string;
  text?: string;
+  tokens?: number;
  canInterrupt?: boolean;
+  tokenBudget?: unknown;
  newSessionId?: string;
  aborted?: boolean;
  [key: string]: any;
@@ -53,7 +55,8 @@ interface UseChatRealtimeHandlersArgs {
  setCurrentSessionId: (sessionId: string | null) => void;
  setIsLoading: (loading: boolean) => void;
  setCanAbortSession: (canAbort: boolean) => void;
-  setClaudeStatus: (status: { text: string; can_interrupt: boolean } | null) => void;
+  setClaudeStatus: (status: { text: string; tokens: number; can_interrupt: boolean } | null) => void;
+  setTokenBudget: (budget: Record<string, unknown> | null) => void;
  setPendingPermissionRequests: Dispatch<SetStateAction<PendingPermissionRequest[]>>;
  pendingViewSessionRef: MutableRefObject<PendingViewSession | null>;
  streamBufferRef: MutableRefObject<string>;
@@ -82,6 +85,7 @@ export function useChatRealtimeHandlers({
  setIsLoading,
  setCanAbortSession,
  setClaudeStatus,
+  setTokenBudget,
  setPendingPermissionRequests,
  pendingViewSessionRef,
  streamBufferRef,
@@ -136,6 +140,7 @@ export function useChatRealtimeHandlers({
          if (status) {
            const statusInfo = {
              text: status.text || 'Working...',
+              tokens: status.tokens || 0,
              can_interrupt: status.can_interrupt !== undefined ? status.can_interrupt : true,
            };
            setClaudeStatus(statusInfo);
@@ -306,7 +311,7 @@ export function useChatRealtimeHandlers({
        });
        setIsLoading(true);
        setCanAbortSession(true);
-        setClaudeStatus({ text: 'Waiting for permission', can_interrupt: true });
+        setClaudeStatus({ text: 'Waiting for permission', tokens: 0, can_interrupt: true });
        break;
      }

@@ -318,9 +323,12 @@ export function useChatRealtimeHandlers({
      }

      case 'status': {
-        if (msg.text) {
+        if (msg.text === 'token_budget' && msg.tokenBudget) {
+          setTokenBudget(msg.tokenBudget as Record<string, unknown>);
+        } else if (msg.text) {
          setClaudeStatus({
            text: msg.text,
+            tokens: msg.tokens || 0,
            can_interrupt: msg.canInterrupt !== undefined ? msg.canInterrupt : true,
          });
          setIsLoading(true);
@@ -344,6 +352,7 @@ export function useChatRealtimeHandlers({
    setIsLoading,
    setCanAbortSession,
    setClaudeStatus,
+    setTokenBudget,
    setPendingPermissionRequests,
    pendingViewSessionRef,
    streamBufferRef,
--- a/src/components/chat/hooks/useChatSessionState.ts
+++ b/src/components/chat/hooks/useChatSessionState.ts
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { MutableRefObject } from 'react';
+import { authenticatedFetch } from '../../../utils/api';
 import type { ChatMessage, Provider } from '../types/types';
 import type { Project, ProjectSession, SessionProvider } from '../../../types/app';
 import { createCachedDiffCalculator, type DiffCalculator } from '../utils/messageTransforms';
@@ -107,8 +108,9 @@ export function useChatSessionState({
  const [totalMessages, setTotalMessages] = useState(0);
  const [canAbortSession, setCanAbortSession] = useState(false);
  const [isUserScrolledUp, setIsUserScrolledUp] = useState(false);
+  const [tokenBudget, setTokenBudget] = useState<Record<string, unknown> | null>(null);
  const [visibleMessageCount, setVisibleMessageCount] = useState(INITIAL_VISIBLE_MESSAGES);
-  const [claudeStatus, setClaudeStatus] = useState<{ text: string; can_interrupt: boolean } | null>(null);
+  const [claudeStatus, setClaudeStatus] = useState<{ text: string; tokens: number; can_interrupt: boolean } | null>(null);
  const [allMessagesLoaded, setAllMessagesLoaded] = useState(false);
  const [isLoadingAllMessages, setIsLoadingAllMessages] = useState(false);
  const [loadAllJustFinished, setLoadAllJustFinished] = useState(false);
@@ -317,6 +319,7 @@ export function useChatSessionState({
      messagesOffsetRef.current = 0;
      setHasMoreMessages(false);
      setTotalMessages(0);
+      setTokenBudget(null);
      lastLoadedSessionKeyRef.current = null;
      return;
    }
@@ -352,6 +355,7 @@ export function useChatSessionState({
    if (loadAllFinishedTimerRef.current) clearTimeout(loadAllFinishedTimerRef.current);

    if (sessionChanged) {
+      setTokenBudget(null);
      setIsLoading(false);
    }

@@ -379,6 +383,7 @@ export function useChatSessionState({
      if (slot) {
        setHasMoreMessages(slot.hasMore);
        setTotalMessages(slot.total);
+        if (slot.tokenUsage) setTokenBudget(slot.tokenUsage as Record<string, unknown>);
      }
      setIsLoadingSessionMessages(false);
    }).catch(() => {
@@ -534,6 +539,31 @@ export function useChatSessionState({
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [chatMessages.length, isLoadingSessionMessages, searchTarget]);

+  // Token usage fetch for Claude
+  useEffect(() => {
+    if (!selectedProject || !selectedSession?.id || selectedSession.id.startsWith('new-session-')) {
+      setTokenBudget(null);
+      return;
+    }
+    const sessionProvider = selectedSession.__provider || 'claude';
+    if (sessionProvider !== 'claude') return;
+
+    const fetchInitialTokenUsage = async () => {
+      try {
+        const url = `/api/projects/${selectedProject.name}/sessions/${selectedSession.id}/token-usage`;
+        const response = await authenticatedFetch(url);
+        if (response.ok) {
+          setTokenBudget(await response.json());
+        } else {
+          setTokenBudget(null);
+        }
+      } catch (error) {
+        console.error('Failed to fetch initial token usage:', error);
+      }
+    };
+    fetchInitialTokenUsage();
+  }, [selectedProject, selectedSession?.id, selectedSession?.__provider]);
+
  const visibleMessages = useMemo(() => {
    if (chatMessages.length <= visibleMessageCount) return chatMessages;
    return chatMessages.slice(-visibleMessageCount);
@@ -683,6 +713,8 @@ export function useChatSessionState({
    setCanAbortSession,
    isUserScrolledUp,
    setIsUserScrolledUp,
+    tokenBudget,
+    setTokenBudget,
    visibleMessageCount,
    visibleMessages,
    loadEarlierMessages,
--- a/src/components/chat/view/ChatInterface.tsx
+++ b/src/components/chat/view/ChatInterface.tsx
@@ -96,6 +96,8 @@ function ChatInterface({
    setCanAbortSession,
    isUserScrolledUp,
    setIsUserScrolledUp,
+    tokenBudget,
+    setTokenBudget,
    visibleMessageCount,
    visibleMessages,
    loadEarlierMessages,
@@ -163,7 +165,6 @@ function ChatInterface({
    syncInputOverlayScroll,
    handleClearInput,
    handleAbortSession,
-    handleTranscript,
    handlePermissionDecision,
    handleGrantToolPermission,
    handleInputFocusChange,
@@ -181,6 +182,7 @@ function ChatInterface({
    geminiModel,
    isLoading,
    canAbortSession,
+    tokenBudget,
    sendMessage,
    sendByCtrlEnter,
    onSessionActive,
@@ -224,6 +226,7 @@ function ChatInterface({
    setIsLoading,
    setCanAbortSession,
    setClaudeStatus,
+    setTokenBudget,
    setPendingPermissionRequests,
    pendingViewSessionRef,
    streamBufferRef,
@@ -348,6 +351,7 @@ function ChatInterface({
          onModeSwitch={cyclePermissionMode}
          thinkingMode={thinkingMode}
          setThinkingMode={setThinkingMode}
+          tokenBudget={tokenBudget}
          slashCommandsCount={slashCommandsCount}
          onToggleCommandMenu={handleToggleCommandMenu}
          hasInput={Boolean(input.trim())}
@@ -402,7 +406,6 @@ function ChatInterface({
          })}
          isTextareaExpanded={isTextareaExpanded}
          sendByCtrlEnter={sendByCtrlEnter}
-          onTranscript={handleTranscript}
        />
      </div>

--- a/src/components/chat/view/subcomponents/ChatComposer.tsx
+++ b/src/components/chat/view/subcomponents/ChatComposer.tsx
@@ -11,7 +11,6 @@ import type {
  SetStateAction,
  TouchEvent,
 } from 'react';
-import MicButton from '../../../mic-button/view/MicButton';
 import type { PendingPermissionRequest, PermissionMode, Provider } from '../../types/types';
 import CommandMenu from './CommandMenu';
 import ClaudeStatus from './ClaudeStatus';
@@ -41,7 +40,7 @@ interface ChatComposerProps {
    decision: { allow?: boolean; message?: string; rememberEntry?: string | null; updatedInput?: unknown },
  ) => void;
  handleGrantToolPermission: (suggestion: { entry: string; toolName: string }) => { success: boolean };
-  claudeStatus: { text: string; can_interrupt: boolean } | null;
+  claudeStatus: { text: string; tokens: number; can_interrupt: boolean } | null;
  isLoading: boolean;
  onAbortSession: () => void;
  provider: Provider | string;
@@ -49,6 +48,7 @@ interface ChatComposerProps {
  onModeSwitch: () => void;
  thinkingMode: string;
  setThinkingMode: Dispatch<SetStateAction<string>>;
+  tokenBudget: { used?: number; total?: number } | null;
  slashCommandsCount: number;
  onToggleCommandMenu: () => void;
  hasInput: boolean;
@@ -90,7 +90,6 @@ interface ChatComposerProps {
  placeholder: string;
  isTextareaExpanded: boolean;
  sendByCtrlEnter?: boolean;
-  onTranscript: (text: string) => void;
 }

 export default function ChatComposer({
@@ -105,6 +104,7 @@ export default function ChatComposer({
  onModeSwitch,
  thinkingMode,
  setThinkingMode,
+  tokenBudget,
  slashCommandsCount,
  onToggleCommandMenu,
  hasInput,
@@ -146,7 +146,6 @@ export default function ChatComposer({
  placeholder,
  isTextareaExpanded,
  sendByCtrlEnter,
-  onTranscript,
 }: ChatComposerProps) {
  const { t } = useTranslation('chat');
  const textareaRect = textareaRef.current?.getBoundingClientRect();
@@ -192,6 +191,7 @@ export default function ChatComposer({
          provider={provider}
          thinkingMode={thinkingMode}
          setThinkingMode={setThinkingMode}
+          tokenBudget={tokenBudget}
          slashCommandsCount={slashCommandsCount}
          onToggleCommandMenu={onToggleCommandMenu}
          hasInput={hasInput}
@@ -318,10 +318,6 @@ export default function ChatComposer({
              </svg>
            </button>

-            <div className="absolute right-16 top-1/2 -translate-y-1/2 transform sm:right-16" style={{ display: 'none' }}>
-              <MicButton onTranscript={onTranscript} className="h-10 w-10 sm:h-10 sm:w-10" />
-            </div>
-
            <button
              type="submit"
              disabled={!input.trim() || isLoading}
--- a/src/components/chat/view/subcomponents/ChatInputControls.tsx
+++ b/src/components/chat/view/subcomponents/ChatInputControls.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import type { PermissionMode, Provider } from '../../types/types';
 import ThinkingModeSelector from './ThinkingModeSelector';
+import TokenUsagePie from './TokenUsagePie';

 interface ChatInputControlsProps {
  permissionMode: PermissionMode | string;
@@ -9,6 +10,7 @@ interface ChatInputControlsProps {
  provider: Provider | string;
  thinkingMode: string;
  setThinkingMode: React.Dispatch<React.SetStateAction<string>>;
+  tokenBudget: { used?: number; total?: number } | null;
  slashCommandsCount: number;
  onToggleCommandMenu: () => void;
  hasInput: boolean;
@@ -24,6 +26,7 @@ export default function ChatInputControls({
  provider,
  thinkingMode,
  setThinkingMode,
+  tokenBudget,
  slashCommandsCount,
  onToggleCommandMenu,
  hasInput,
@@ -75,6 +78,8 @@ export default function ChatInputControls({
        <ThinkingModeSelector selectedMode={thinkingMode} onModeChange={setThinkingMode} onClose={() => {}} className="" />
      )}

+      <TokenUsagePie used={tokenBudget?.used || 0} total={tokenBudget?.total || parseInt(import.meta.env.VITE_CONTEXT_WINDOW) || 160000} />
+
      <button
        type="button"
        onClick={onToggleCommandMenu}
--- a/src/components/chat/view/subcomponents/ClaudeStatus.tsx
+++ b/src/components/chat/view/subcomponents/ClaudeStatus.tsx
@@ -6,6 +6,7 @@ import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo'
 type ClaudeStatusProps = {
  status: {
    text?: string;
+    tokens?: number;
    can_interrupt?: boolean;
  } | null;
  onAbort?: () => void;
@@ -125,4 +126,4 @@ export default function ClaudeStatus({
      </div>
    </div>
  );
-}
+}
--- a/src/components/chat/view/subcomponents/ThinkingModeSelector.tsx
+++ b/src/components/chat/view/subcomponents/ThinkingModeSelector.tsx
@@ -1,4 +1,5 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback, type CSSProperties } from 'react';
+import { createPortal } from 'react-dom';
 import { Brain, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { thinkingModes } from '../../constants/thinkingModes';
@@ -12,6 +13,11 @@ type ThinkingModeSelectorProps = {

 function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className = '' }: ThinkingModeSelectorProps) {
  const { t } = useTranslation('chat');
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [dropdownStyle, setDropdownStyle] = useState<CSSProperties | null>(null);

  // Mapping from mode ID to translation key
  const modeKeyMap: Record<string, string> = {
@@ -29,50 +35,143 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className =
    };
  });

-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
+  const closeDropdown = useCallback(() => {
+    setIsOpen(false);
+    onClose?.();
+  }, [onClose]);
+
+  const updateDropdownPosition = useCallback(() => {
+    const trigger = triggerRef.current;
+    const dropdown = dropdownRef.current;
+    if (!trigger || !dropdown || typeof window === 'undefined') {
+      return;
+    }
+
+    const triggerRect = trigger.getBoundingClientRect();
+    const viewportPadding = window.innerWidth < 640 ? 12 : 16;
+    const spacing = 8;
+    const width = Math.min(window.innerWidth - viewportPadding * 2, window.innerWidth < 640 ? 320 : 256);
+    let left = triggerRect.left + triggerRect.width / 2 - width / 2;
+    left = Math.max(viewportPadding, Math.min(left, window.innerWidth - width - viewportPadding));
+
+    const measuredHeight = dropdown.offsetHeight || 0;
+    const spaceBelow = window.innerHeight - triggerRect.bottom - spacing - viewportPadding;
+    const spaceAbove = triggerRect.top - spacing - viewportPadding;
+    const openBelow = spaceBelow >= Math.min(measuredHeight || 320, 320) || spaceBelow >= spaceAbove;
+    const availableHeight = Math.min(
+      window.innerHeight - viewportPadding * 2,
+      Math.max(180, openBelow ? spaceBelow : spaceAbove),
+    );
+    const panelHeight = Math.min(measuredHeight || availableHeight, availableHeight);
+    const top = openBelow
+      ? Math.min(triggerRect.bottom + spacing, window.innerHeight - viewportPadding - panelHeight)
+      : Math.max(viewportPadding, triggerRect.top - spacing - panelHeight);
+
+    setDropdownStyle({
+      position: 'fixed',
+      top,
+      left,
+      width,
+      maxHeight: availableHeight,
+      zIndex: 80,
+    });
+  }, []);

  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-        if (onClose) onClose();
+    if (!isOpen) {
+      setDropdownStyle(null);
+      return;
+    }
+
+    const rafId = window.requestAnimationFrame(updateDropdownPosition);
+    const handleViewportChange = () => updateDropdownPosition();
+
+    window.addEventListener('resize', handleViewportChange);
+    window.addEventListener('scroll', handleViewportChange, true);
+
+    return () => {
+      window.cancelAnimationFrame(rafId);
+      window.removeEventListener('resize', handleViewportChange);
+      window.removeEventListener('scroll', handleViewportChange, true);
+    };
+  }, [isOpen, updateDropdownPosition]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+
+      if (containerRef.current?.contains(target) || dropdownRef.current?.contains(target)) {
+        return;
+      }
+
+      closeDropdown();
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closeDropdown();
      }
    };

-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [onClose]);
+    document.addEventListener('pointerdown', handlePointerDown, true);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown, true);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, closeDropdown]);

  const currentMode = translatedModes.find(mode => mode.id === selectedMode) || translatedModes[0];
  const IconComponent = currentMode.icon || Brain;

  return (
-    <div className={`relative ${className}`} ref={dropdownRef}>
+    <div className={`relative ${className}`} ref={containerRef}>
      <button
+        ref={triggerRef}
        type="button"
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={() => {
+          if (isOpen) {
+            closeDropdown();
+            return;
+          }
+
+          setIsOpen(true);
+        }}
        className={`flex h-10 w-10 items-center justify-center rounded-full transition-all duration-200 sm:h-10 sm:w-10 ${selectedMode === 'none'
            ? 'bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600'
            : 'bg-blue-100 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800'
          }`}
        title={t('thinkingMode.buttonTitle', { mode: currentMode.name })}
+        aria-haspopup="dialog"
+        aria-expanded={isOpen}
      >
        <IconComponent className={`h-5 w-5 ${currentMode.color}`} />
      </button>

-      {isOpen && (
-        <div className="absolute bottom-full right-0 mb-2 w-64 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-800">
+      {isOpen && typeof document !== 'undefined' && createPortal(
+        <div
+          ref={dropdownRef}
+          style={dropdownStyle || { position: 'fixed', top: 0, left: 0, visibility: 'hidden' }}
+          className="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-800"
+          role="dialog"
+          aria-modal="false"
+        >
          <div className="border-b border-gray-200 p-3 dark:border-gray-700">
            <div className="flex items-center justify-between">
              <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
                {t('thinkingMode.selector.title')}
              </h3>
              <button
-                onClick={() => {
-                  setIsOpen(false);
-                  if (onClose) onClose();
-                }}
+                type="button"
+                onClick={closeDropdown}
                className="rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700"
              >
                <X className="h-4 w-4 text-gray-500" />
@@ -83,7 +182,7 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className =
            </p>
          </div>

-          <div className="py-1">
+          <div className="min-h-0 overflow-y-auto py-1">
            {translatedModes.map((mode) => {
              const ModeIcon = mode.icon;
              const isSelected = mode.id === selectedMode;
@@ -91,10 +190,10 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className =
              return (
                <button
                  key={mode.id}
+                  type="button"
                  onClick={() => {
                    onModeChange(mode.id);
-                    setIsOpen(false);
-                    if (onClose) onClose();
+                    closeDropdown();
                  }}
                  className={`w-full px-4 py-3 text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 ${isSelected ? 'bg-gray-50 dark:bg-gray-700' : ''
                    }`}
@@ -135,10 +234,11 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className =
              <strong>Tip:</strong> {t('thinkingMode.selector.tip')}
            </p>
          </div>
-        </div>
+        </div>,
+        document.body
      )}
    </div>
  );
 }

-export default ThinkingModeSelector;
+export default ThinkingModeSelector;
--- a/src/components/chat/view/subcomponents/TokenUsagePie.tsx
+++ b/src/components/chat/view/subcomponents/TokenUsagePie.tsx
@@ -0,0 +1,54 @@
+type TokenUsagePieProps = {
+  used: number;
+  total: number;
+};
+
+export default function TokenUsagePie({ used, total }: TokenUsagePieProps) {
+  // Token usage visualization component
+  // Only bail out on missing values or non‐positive totals; allow used===0 to render 0%
+  if (used == null || total == null || total <= 0) return null;
+
+  const percentage = Math.min(100, (used / total) * 100);
+  const radius = 10;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (percentage / 100) * circumference;
+
+  // Color based on usage level
+  const getColor = () => {
+    if (percentage < 50) return '#3b82f6'; // blue
+    if (percentage < 75) return '#f59e0b'; // orange
+    return '#ef4444'; // red
+  };
+
+  return (
+    <div className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
+      <svg width="24" height="24" viewBox="0 0 24 24" className="-rotate-90 transform">
+        {/* Background circle */}
+        <circle
+          cx="12"
+          cy="12"
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          className="text-gray-300 dark:text-gray-600"
+        />
+        {/* Progress circle */}
+        <circle
+          cx="12"
+          cy="12"
+          r={radius}
+          fill="none"
+          stroke={getColor()}
+          strokeWidth="2"
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          strokeLinecap="round"
+        />
+      </svg>
+      <span title={`${used.toLocaleString()} / ${total.toLocaleString()} tokens`}>
+        {percentage.toFixed(1)}%
+      </span>
+    </div>
+  );
+}
--- a/src/components/git-panel/view/changes/CommitComposer.tsx
+++ b/src/components/git-panel/view/changes/CommitComposer.tsx
@@ -1,6 +1,5 @@
 import { Check, ChevronDown, GitCommit, RefreshCw, Sparkles } from 'lucide-react';
 import { useState } from 'react';
-import MicButton from '../../../mic-button/view/MicButton';
 import type { ConfirmationRequest } from '../../types/types';

 // Persists commit messages across unmount/remount, keyed by project path
@@ -147,13 +146,6 @@ export default function CommitComposer({
                  <Sparkles className="h-4 w-4" />
                )}
              </button>
-              <div style={{ display: 'none' }}>
-                <MicButton
-                  onTranscript={(transcript) => setCommitMessage(transcript)}
-                  mode="default"
-                  className="p-1.5"
-                />
-              </div>
            </div>
          </div>

--- a/src/components/mic-button/constants/constants.ts
+++ b/src/components/mic-button/constants/constants.ts
@@ -1,45 +0,0 @@
-import type { MicButtonState } from '../types/types';
-
-export const MIC_BUTTON_STATES = {
-  IDLE: 'idle',
-  RECORDING: 'recording',
-  TRANSCRIBING: 'transcribing',
-  PROCESSING: 'processing',
-} as const;
-
-export const MIC_TAP_DEBOUNCE_MS = 300;
-export const PROCESSING_STATE_DELAY_MS = 2000;
-
-export const DEFAULT_WHISPER_MODE = 'default';
-
-// Modes that use post-transcription enhancement on the backend.
-export const ENHANCEMENT_WHISPER_MODES = new Set([
-  'prompt',
-  'vibe',
-  'instructions',
-  'architect',
-]);
-
-export const BUTTON_BACKGROUND_BY_STATE: Record<MicButtonState, string> = {
-  idle: '#374151',
-  recording: '#ef4444',
-  transcribing: '#3b82f6',
-  processing: '#a855f7',
-};
-
-export const MIC_ERROR_BY_NAME = {
-  NotAllowedError: 'Microphone access denied. Please allow microphone permissions.',
-  NotFoundError: 'No microphone found. Please check your audio devices.',
-  NotSupportedError: 'Microphone not supported by this browser.',
-  NotReadableError: 'Microphone is being used by another application.',
-} as const;
-
-export const MIC_NOT_AVAILABLE_ERROR =
-  'Microphone access not available. Please use HTTPS or a supported browser.';
-
-export const MIC_NOT_SUPPORTED_ERROR =
-  'Microphone not supported. Please use HTTPS or a modern browser.';
-
-export const MIC_SECURE_CONTEXT_ERROR =
-  'Microphone requires HTTPS. Please use a secure connection.';
-
--- a/src/components/mic-button/data/whisper.ts
+++ b/src/components/mic-button/data/whisper.ts
@@ -1,52 +0,0 @@
-import { api } from '../../../utils/api';
-
-type WhisperStatus = 'transcribing';
-
-type WhisperResponse = {
-  text?: string;
-  error?: string;
-};
-
-export async function transcribeWithWhisper(
-  audioBlob: Blob,
-  onStatusChange?: (status: WhisperStatus) => void,
-): Promise<string> {
-  const formData = new FormData();
-  const fileName = `recording_${Date.now()}.webm`;
-  const file = new File([audioBlob], fileName, { type: audioBlob.type });
-
-  formData.append('audio', file);
-
-  const whisperMode = window.localStorage.getItem('whisperMode') || 'default';
-  formData.append('mode', whisperMode);
-
-  try {
-    // Keep existing status callback behavior.
-    if (onStatusChange) {
-      onStatusChange('transcribing');
-    }
-
-    const response = (await api.transcribe(formData)) as Response;
-
-    if (!response.ok) {
-      const errorData = (await response.json().catch(() => ({}))) as WhisperResponse;
-      throw new Error(
-        errorData.error ||
-          `Transcription error: ${response.status} ${response.statusText}`,
-      );
-    }
-
-    const data = (await response.json()) as WhisperResponse;
-    return data.text || '';
-  } catch (error) {
-    if (
-      error instanceof Error
-      && error.name === 'TypeError'
-      && error.message.includes('fetch')
-    ) {
-      throw new Error('Cannot connect to server. Please ensure the backend is running.');
-    }
-    throw error;
-  }
-}
-
--- a/src/components/mic-button/hooks/useMicButtonController.ts
+++ b/src/components/mic-button/hooks/useMicButtonController.ts
@@ -1,204 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import type { MouseEvent } from 'react';
-import { transcribeWithWhisper } from '../data/whisper';
-import {
-  DEFAULT_WHISPER_MODE,
-  ENHANCEMENT_WHISPER_MODES,
-  MIC_BUTTON_STATES,
-  MIC_ERROR_BY_NAME,
-  MIC_NOT_AVAILABLE_ERROR,
-  MIC_NOT_SUPPORTED_ERROR,
-  MIC_SECURE_CONTEXT_ERROR,
-  MIC_TAP_DEBOUNCE_MS,
-  PROCESSING_STATE_DELAY_MS,
-} from '../constants/constants';
-import type { MicButtonState } from '../types/types';
-
-type UseMicButtonControllerArgs = {
-  onTranscript?: (transcript: string) => void;
-};
-
-type UseMicButtonControllerResult = {
-  state: MicButtonState;
-  error: string | null;
-  isSupported: boolean;
-  handleButtonClick: (event?: MouseEvent<HTMLButtonElement>) => void;
-};
-
-const getRecordingErrorMessage = (error: unknown): string => {
-  if (error instanceof Error && error.message.includes('HTTPS')) {
-    return error.message;
-  }
-
-  if (error instanceof DOMException) {
-    return MIC_ERROR_BY_NAME[error.name as keyof typeof MIC_ERROR_BY_NAME] || 'Microphone access failed';
-  }
-
-  return 'Microphone access failed';
-};
-
-const getRecorderMimeType = (): string => (
-  MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' : 'audio/mp4'
-);
-
-export function useMicButtonController({
-  onTranscript,
-}: UseMicButtonControllerArgs): UseMicButtonControllerResult {
-  const [state, setState] = useState<MicButtonState>(MIC_BUTTON_STATES.IDLE);
-  const [error, setError] = useState<string | null>(null);
-  const [isSupported, setIsSupported] = useState(true);
-
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-  const streamRef = useRef<MediaStream | null>(null);
-  const chunksRef = useRef<BlobPart[]>([]);
-  const lastTapRef = useRef(0);
-  const processingTimerRef = useRef<number | null>(null);
-
-  const clearProcessingTimer = (): void => {
-    if (processingTimerRef.current !== null) {
-      window.clearTimeout(processingTimerRef.current);
-      processingTimerRef.current = null;
-    }
-  };
-
-  const stopStreamTracks = (): void => {
-    if (!streamRef.current) {
-      return;
-    }
-
-    streamRef.current.getTracks().forEach((track) => track.stop());
-    streamRef.current = null;
-  };
-
-  const handleStopRecording = async (mimeType: string): Promise<void> => {
-    const audioBlob = new Blob(chunksRef.current, { type: mimeType });
-
-    // Release the microphone immediately once recording ends.
-    stopStreamTracks();
-    setState(MIC_BUTTON_STATES.TRANSCRIBING);
-
-    const whisperMode = window.localStorage.getItem('whisperMode') || DEFAULT_WHISPER_MODE;
-    const shouldShowProcessingState = ENHANCEMENT_WHISPER_MODES.has(whisperMode);
-
-    if (shouldShowProcessingState) {
-      processingTimerRef.current = window.setTimeout(() => {
-        setState(MIC_BUTTON_STATES.PROCESSING);
-      }, PROCESSING_STATE_DELAY_MS);
-    }
-
-    try {
-      const transcript = await transcribeWithWhisper(audioBlob);
-      if (transcript && onTranscript) {
-        onTranscript(transcript);
-      }
-    } catch (transcriptionError) {
-      const message = transcriptionError instanceof Error ? transcriptionError.message : 'Transcription error';
-      setError(message);
-    } finally {
-      clearProcessingTimer();
-      setState(MIC_BUTTON_STATES.IDLE);
-    }
-  };
-
-  const startRecording = async (): Promise<void> => {
-    try {
-      setError(null);
-      chunksRef.current = [];
-
-      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-        throw new Error(MIC_NOT_AVAILABLE_ERROR);
-      }
-
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      streamRef.current = stream;
-
-      const mimeType = getRecorderMimeType();
-      const recorder = new MediaRecorder(stream, { mimeType });
-      mediaRecorderRef.current = recorder;
-
-      recorder.ondataavailable = (event: BlobEvent) => {
-        if (event.data.size > 0) {
-          chunksRef.current.push(event.data);
-        }
-      };
-
-      recorder.onstop = () => {
-        void handleStopRecording(mimeType);
-      };
-
-      recorder.start();
-      setState(MIC_BUTTON_STATES.RECORDING);
-    } catch (recordingError) {
-      stopStreamTracks();
-      setError(getRecordingErrorMessage(recordingError));
-      setState(MIC_BUTTON_STATES.IDLE);
-    }
-  };
-
-  const stopRecording = (): void => {
-    if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
-      mediaRecorderRef.current.stop();
-      return;
-    }
-
-    stopStreamTracks();
-    setState(MIC_BUTTON_STATES.IDLE);
-  };
-
-  const handleButtonClick = (event?: MouseEvent<HTMLButtonElement>): void => {
-    if (event) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-
-    if (!isSupported) {
-      return;
-    }
-
-    // Mobile tap handling can trigger duplicate click events in quick succession.
-    const now = Date.now();
-    if (now - lastTapRef.current < MIC_TAP_DEBOUNCE_MS) {
-      return;
-    }
-    lastTapRef.current = now;
-
-    if (state === MIC_BUTTON_STATES.IDLE) {
-      void startRecording();
-      return;
-    }
-
-    if (state === MIC_BUTTON_STATES.RECORDING) {
-      stopRecording();
-    }
-  };
-
-  useEffect(() => {
-    // getUserMedia needs both browser support and a secure context.
-    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-      setIsSupported(false);
-      setError(MIC_NOT_SUPPORTED_ERROR);
-      return;
-    }
-
-    if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
-      setIsSupported(false);
-      setError(MIC_SECURE_CONTEXT_ERROR);
-      return;
-    }
-
-    setIsSupported(true);
-    setError(null);
-  }, []);
-
-  useEffect(() => () => {
-    clearProcessingTimer();
-    stopStreamTracks();
-  }, []);
-
-  return {
-    state,
-    error,
-    isSupported,
-    handleButtonClick,
-  };
-}
--- a/src/components/mic-button/types/types.ts
+++ b/src/components/mic-button/types/types.ts
@@ -1,2 +0,0 @@
-export type MicButtonState = 'idle' | 'recording' | 'transcribing' | 'processing';
-
--- a/src/components/mic-button/view/MicButton.tsx
+++ b/src/components/mic-button/view/MicButton.tsx
@@ -1,32 +0,0 @@
-import { useMicButtonController } from '../hooks/useMicButtonController';
-import MicButtonView from './MicButtonView';
-
-type MicButtonProps = {
-  onTranscript?: (transcript: string) => void;
-  className?: string;
-  mode?: string;
-};
-
-export default function MicButton({
-  onTranscript,
-  className = '',
-  mode: _mode,
-}: MicButtonProps) {
-  const { state, error, isSupported, handleButtonClick } = useMicButtonController({
-    onTranscript,
-  });
-
-  // Keep `mode` in the public props for backwards compatibility.
-  void _mode;
-
-  return (
-    <MicButtonView
-      state={state}
-      error={error}
-      isSupported={isSupported}
-      className={className}
-      onButtonClick={handleButtonClick}
-    />
-  );
-}
-
--- a/src/components/mic-button/view/MicButtonView.tsx
+++ b/src/components/mic-button/view/MicButtonView.tsx
@@ -1,86 +0,0 @@
-import { Brain, Loader2, Mic } from 'lucide-react';
-import type { MouseEvent, ReactElement } from 'react';
-import { BUTTON_BACKGROUND_BY_STATE, MIC_BUTTON_STATES } from '../constants/constants';
-import type { MicButtonState } from '../types/types';
-
-type MicButtonViewProps = {
-  state: MicButtonState;
-  error: string | null;
-  isSupported: boolean;
-  className: string;
-  onButtonClick: (event?: MouseEvent<HTMLButtonElement>) => void;
-};
-
-const getButtonIcon = (state: MicButtonState, isSupported: boolean): ReactElement => {
-  if (!isSupported) {
-    return <Mic className="h-5 w-5" />;
-  }
-
-  if (state === MIC_BUTTON_STATES.TRANSCRIBING) {
-    return <Loader2 className="h-5 w-5 animate-spin" />;
-  }
-
-  if (state === MIC_BUTTON_STATES.PROCESSING) {
-    return <Brain className="h-5 w-5 animate-pulse" />;
-  }
-
-  if (state === MIC_BUTTON_STATES.RECORDING) {
-    return <Mic className="h-5 w-5 text-white" />;
-  }
-
-  return <Mic className="h-5 w-5" />;
-};
-
-export default function MicButtonView({
-  state,
-  error,
-  isSupported,
-  className,
-  onButtonClick,
-}: MicButtonViewProps) {
-  const isDisabled = !isSupported || state === MIC_BUTTON_STATES.TRANSCRIBING || state === MIC_BUTTON_STATES.PROCESSING;
-  const icon = getButtonIcon(state, isSupported);
-
-  return (
-    <div className="relative">
-      <button
-        type="button"
-        style={{ backgroundColor: BUTTON_BACKGROUND_BY_STATE[state] }}
-        className={`
-          touch-action-manipulation flex h-12
-          w-12 items-center justify-center
-          rounded-full text-white transition-all
-          duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500
-          focus:ring-offset-2
-          dark:ring-offset-gray-800
-          ${isDisabled ? 'cursor-not-allowed opacity-75' : 'cursor-pointer'}
-          ${state === MIC_BUTTON_STATES.RECORDING ? 'animate-pulse' : ''}
-          hover:opacity-90
-          ${className}
-        `}
-        onClick={onButtonClick}
-        disabled={isDisabled}
-      >
-        {icon}
-      </button>
-
-      {error && (
-        <div
-          className="animate-fade-in absolute left-1/2 top-full z-10 mt-2
-                        -translate-x-1/2 transform whitespace-nowrap rounded bg-red-500 px-2 py-1 text-xs
-                        text-white"
-        >
-          {error}
-        </div>
-      )}
-
-      {state === MIC_BUTTON_STATES.RECORDING && (
-        <div className="pointer-events-none absolute -inset-1 animate-ping rounded-full border-2 border-red-500" />
-      )}
-
-      {state === MIC_BUTTON_STATES.PROCESSING && (
-        <div className="pointer-events-none absolute -inset-1 animate-ping rounded-full border-2 border-purple-500" />
-      )}
-    </div>
-  );
-}
--- a/src/components/quick-settings-panel/constants.ts
+++ b/src/components/quick-settings-panel/constants.ts
@@ -2,21 +2,12 @@ import {
  ArrowDown,
  Brain,
  Eye,
-  FileText,
  Languages,
  Maximize2,
-  Mic,
-  Sparkles,
 } from 'lucide-react';
-import type {
-  PreferenceToggleItem,
-  WhisperMode,
-  WhisperOption,
-} from './types';
+import type { PreferenceToggleItem } from './types';

 export const HANDLE_POSITION_STORAGE_KEY = 'quickSettingsHandlePosition';
-export const WHISPER_MODE_STORAGE_KEY = 'whisperMode';
-export const WHISPER_MODE_CHANGED_EVENT = 'whisperModeChanged';

 export const DEFAULT_HANDLE_POSITION = 50;
 export const HANDLE_POSITION_MIN = 10;
@@ -64,30 +55,3 @@ export const INPUT_SETTING_TOGGLES: PreferenceToggleItem[] = [
    icon: Languages,
  },
 ];
-
-export const WHISPER_OPTIONS: WhisperOption[] = [
-  {
-    value: 'default',
-    titleKey: 'quickSettings.whisper.modes.default',
-    descriptionKey: 'quickSettings.whisper.modes.defaultDescription',
-    icon: Mic,
-  },
-  {
-    value: 'prompt',
-    titleKey: 'quickSettings.whisper.modes.prompt',
-    descriptionKey: 'quickSettings.whisper.modes.promptDescription',
-    icon: Sparkles,
-  },
-  {
-    value: 'vibe',
-    titleKey: 'quickSettings.whisper.modes.vibe',
-    descriptionKey: 'quickSettings.whisper.modes.vibeDescription',
-    icon: FileText,
-  },
-];
-
-export const VIBE_MODE_ALIASES: WhisperMode[] = [
-  'vibe',
-  'instructions',
-  'architect',
-];
--- a/src/components/quick-settings-panel/hooks/useWhisperMode.ts
+++ b/src/components/quick-settings-panel/hooks/useWhisperMode.ts
@@ -1,59 +0,0 @@
-import { useCallback, useState } from 'react';
-import {
-  VIBE_MODE_ALIASES,
-  WHISPER_MODE_CHANGED_EVENT,
-  WHISPER_MODE_STORAGE_KEY,
-} from '../constants';
-import type { WhisperMode, WhisperOptionValue } from '../types';
-
-const ALL_VALID_MODES: WhisperMode[] = [
-  'default',
-  'prompt',
-  'vibe',
-  'instructions',
-  'architect',
-];
-
-const isWhisperMode = (value: string): value is WhisperMode => (
-  ALL_VALID_MODES.includes(value as WhisperMode)
-);
-
-const readStoredMode = (): WhisperMode => {
-  if (typeof window === 'undefined') {
-    return 'default';
-  }
-
-  const storedValue = localStorage.getItem(WHISPER_MODE_STORAGE_KEY);
-  if (!storedValue) {
-    return 'default';
-  }
-
-  return isWhisperMode(storedValue) ? storedValue : 'default';
-};
-
-export function useWhisperMode() {
-  const [whisperMode, setWhisperModeState] = useState<WhisperMode>(readStoredMode);
-
-  const setWhisperMode = useCallback((value: WhisperOptionValue) => {
-    setWhisperModeState(value);
-    localStorage.setItem(WHISPER_MODE_STORAGE_KEY, value);
-    window.dispatchEvent(new Event(WHISPER_MODE_CHANGED_EVENT));
-  }, []);
-
-  const isOptionSelected = useCallback(
-    (value: WhisperOptionValue) => {
-      if (value === 'vibe') {
-        return VIBE_MODE_ALIASES.includes(whisperMode);
-      }
-
-      return whisperMode === value;
-    },
-    [whisperMode],
-  );
-
-  return {
-    whisperMode,
-    setWhisperMode,
-    isOptionSelected,
-  };
-}
--- a/src/components/quick-settings-panel/types.ts
+++ b/src/components/quick-settings-panel/types.ts
@@ -16,20 +16,4 @@ export type PreferenceToggleItem = {
  icon: LucideIcon;
 };

-export type WhisperMode =
-  | 'default'
-  | 'prompt'
-  | 'vibe'
-  | 'instructions'
-  | 'architect';
-
-export type WhisperOptionValue = 'default' | 'prompt' | 'vibe';
-
-export type WhisperOption = {
-  value: WhisperOptionValue;
-  titleKey: string;
-  descriptionKey: string;
-  icon: LucideIcon;
-};
-
 export type QuickSettingsHandleStyle = CSSProperties;
--- a/src/components/quick-settings-panel/view/QuickSettingsContent.tsx
+++ b/src/components/quick-settings-panel/view/QuickSettingsContent.tsx
@@ -15,7 +15,6 @@ import type {
 } from '../types';
 import QuickSettingsSection from './QuickSettingsSection';
 import QuickSettingsToggleRow from './QuickSettingsToggleRow';
-import QuickSettingsWhisperSection from './QuickSettingsWhisperSection';

 type QuickSettingsContentProps = {
  isDarkMode: boolean;
@@ -73,8 +72,6 @@ export default function QuickSettingsContent({
          {t('quickSettings.sendByCtrlEnterDescription')}
        </p>
      </QuickSettingsSection>
-
-      <QuickSettingsWhisperSection />
    </div>
  );
 }
--- a/src/components/quick-settings-panel/view/QuickSettingsWhisperSection.tsx
+++ b/src/components/quick-settings-panel/view/QuickSettingsWhisperSection.tsx
@@ -1,44 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { TOGGLE_ROW_CLASS, WHISPER_OPTIONS } from '../constants';
-import { useWhisperMode } from '../hooks/useWhisperMode';
-import QuickSettingsSection from './QuickSettingsSection';
-
-export default function QuickSettingsWhisperSection() {
-  const { t } = useTranslation('settings');
-  const { setWhisperMode, isOptionSelected } = useWhisperMode();
-
-  return (
-    // This section stays hidden intentionally until dictation modes are reintroduced.
-    <QuickSettingsSection
-      title={t('quickSettings.sections.whisperDictation')}
-      className="hidden"
-    >
-      <div className="space-y-2">
-        {WHISPER_OPTIONS.map(({ value, icon: Icon, titleKey, descriptionKey }) => (
-          <label
-            key={value}
-            className={`${TOGGLE_ROW_CLASS} flex items-start`}
-          >
-            <input
-              type="radio"
-              name="whisperMode"
-              value={value}
-              checked={isOptionSelected(value)}
-              onChange={() => setWhisperMode(value)}
-              className="mt-0.5 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-blue-500 dark:checked:bg-blue-600 dark:focus:ring-blue-400"
-            />
-            <div className="ml-3 flex-1">
-              <span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
-                <Icon className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                {t(titleKey)}
-              </span>
-              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                {t(descriptionKey)}
-              </p>
-            </div>
-          </label>
-        ))}
-      </div>
-    </QuickSettingsSection>
-  );
-}
--- a/src/components/version-upgrade/view/VersionUpgradeModal.tsx
+++ b/src/components/version-upgrade/view/VersionUpgradeModal.tsx
@@ -4,6 +4,7 @@ import { authenticatedFetch } from "../../../utils/api";
 import { ReleaseInfo } from "../../../types/sharedTypes";
 import { copyTextToClipboard } from "../../../utils/clipboard";
 import type { InstallMode } from "../../../hooks/useVersionCheck";
+import { IS_PLATFORM } from "../../../constants/config";

 interface VersionUpgradeModalProps {
    isOpen: boolean;
@@ -25,7 +26,9 @@ export function VersionUpgradeModal({
    const { t } = useTranslation('common');
    const upgradeCommand = installMode === 'npm'
        ? t('versionUpdate.npmUpgradeCommand')
-        : 'git checkout main && git pull && npm install';
+        : IS_PLATFORM
+            ? 'npm run update:platform'
+            : 'git checkout main && git pull && npm install';
    const [isUpdating, setIsUpdating] = useState(false);
    const [updateOutput, setUpdateOutput] = useState('');
    const [updateError, setUpdateError] = useState('');
@@ -46,7 +49,8 @@ export function VersionUpgradeModal({
            if (response.ok) {
                setUpdateOutput(prev => prev + data.output + '\n');
                setUpdateOutput(prev => prev + '\n✅ Update completed successfully!\n');
-                setUpdateOutput(prev => prev + 'Please restart the server to apply changes.\n');
+                const text = IS_PLATFORM ? 'Please refresh the page after 5 seconds to load the new version. If that doesn\'t work, RESTART the environment.' : 'Please restart the server to apply changes.';
+                setUpdateOutput(prev => prev + text + '\n');
            } else {
                setUpdateError(data.error || 'Update failed');
                setUpdateOutput(prev => prev + '\n❌ Update failed: ' + (data.error || 'Unknown error') + '\n');
--- a/src/i18n/locales/de/settings.json
+++ b/src/i18n/locales/de/settings.json
@@ -55,8 +55,7 @@
      "appearance": "Darstellung",
      "toolDisplay": "Werkzeuganzeige",
      "viewOptions": "Anzeigeoptionen",
-      "inputSettings": "Eingabeeinstellungen",
-      "whisperDictation": "Whisper-Diktat"
+      "inputSettings": "Eingabeeinstellungen"
    },
    "darkMode": "Darkmode",
    "autoExpandTools": "Werkzeuge automatisch erweitern",
@@ -71,16 +70,6 @@
      "openPanel": "Einstellungspanel öffnen",
      "draggingStatus": "Wird gezogen...",
      "toggleAndMove": "Klicken zum Umschalten, ziehen zum Verschieben"
-    },
-    "whisper": {
-      "modes": {
-        "default": "Standardmodus",
-        "defaultDescription": "Direkte Transkription deiner Sprache",
-        "prompt": "Prompt-Verbesserung",
-        "promptDescription": "Rohe Ideen in klare, detaillierte KI-Prompts umwandeln",
-        "vibe": "Vibe-Modus",
-        "vibeDescription": "Ideen als klare Agentenanweisungen mit Details formatieren"
-      }
    }
  },
  "terminalShortcuts": {
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -55,8 +55,7 @@
      "appearance": "Appearance",
      "toolDisplay": "Tool Display",
      "viewOptions": "View Options",
-      "inputSettings": "Input Settings",
-      "whisperDictation": "Whisper Dictation"
+      "inputSettings": "Input Settings"
    },
    "darkMode": "Dark Mode",
    "autoExpandTools": "Auto-expand tools",
@@ -71,16 +70,6 @@
      "openPanel": "Open settings panel",
      "draggingStatus": "Dragging...",
      "toggleAndMove": "Click to toggle, drag to move"
-    },
-    "whisper": {
-      "modes": {
-        "default": "Default Mode",
-        "defaultDescription": "Direct transcription of your speech",
-        "prompt": "Prompt Enhancement",
-        "promptDescription": "Transform rough ideas into clear, detailed AI prompts",
-        "vibe": "Vibe Mode",
-        "vibeDescription": "Format ideas as clear agent instructions with details"
-      }
    }
  },
  "terminalShortcuts": {
@@ -498,4 +487,4 @@
    "tab": "tab",
    "runningStatus": "running"
  }
-}
+}
--- a/src/i18n/locales/ja/settings.json
+++ b/src/i18n/locales/ja/settings.json
@@ -55,8 +55,7 @@
      "appearance": "外観",
      "toolDisplay": "ツール表示",
      "viewOptions": "表示オプション",
-      "inputSettings": "入力設定",
-      "whisperDictation": "Whisper音声入力"
+      "inputSettings": "入力設定"
    },
    "darkMode": "ダークモード",
    "autoExpandTools": "ツールを自動展開",
@@ -71,16 +70,6 @@
      "openPanel": "設定パネルを開く",
      "draggingStatus": "ドラッグ中...",
      "toggleAndMove": "クリックで切替、ドラッグで移動"
-    },
-    "whisper": {
-      "modes": {
-        "default": "標準モード",
-        "defaultDescription": "音声をそのまま文字起こしします",
-        "prompt": "プロンプト強化",
-        "promptDescription": "ラフなアイデアを明確で詳細なAIプロンプトに変換します",
-        "vibe": "バイブモード",
-        "vibeDescription": "アイデアを明確なエージェント指示に整形します"
-      }
    }
  },
  "terminalShortcuts": {
@@ -492,4 +481,4 @@
    "tab": "タブ",
    "runningStatus": "実行中"
  }
-}
+}
--- a/src/i18n/locales/ko/settings.json
+++ b/src/i18n/locales/ko/settings.json
@@ -55,8 +55,7 @@
      "appearance": "외관",
      "toolDisplay": "도구 표시",
      "viewOptions": "보기 옵션",
-      "inputSettings": "입력 설정",
-      "whisperDictation": "Whisper 음성 인식"
+      "inputSettings": "입력 설정"
    },
    "darkMode": "다크 모드",
    "autoExpandTools": "도구 자동 펼치기",
@@ -71,16 +70,6 @@
      "openPanel": "설정 패널 열기",
      "draggingStatus": "드래그 중...",
      "toggleAndMove": "클릭하여 토글, 드래그하여 이동"
-    },
-    "whisper": {
-      "modes": {
-        "default": "기본 모드",
-        "defaultDescription": "음성을 그대로 텍스트로 변환",
-        "prompt": "프롬프트 향상",
-        "promptDescription": "거친 아이디어를 명확하고 상세한 AI 프롬프트로 변환",
-        "vibe": "Vibe 모드",
-        "vibeDescription": "아이디어를 상세한 에이전트 지침 형식으로 변환"
-      }
    }
  },
  "terminalShortcuts": {
@@ -492,4 +481,4 @@
    "tab": "탭",
    "runningStatus": "실행 중"
  }
-}
+}
--- a/src/i18n/locales/ru/settings.json
+++ b/src/i18n/locales/ru/settings.json
@@ -55,8 +55,7 @@
      "appearance": "Внешний вид",
      "toolDisplay": "Отображение инструментов",
      "viewOptions": "Параметры просмотра",
-      "inputSettings": "Настройки ввода",
-      "whisperDictation": "Диктовка Whisper"
+      "inputSettings": "Настройки ввода"
    },
    "darkMode": "Темная тема",
    "autoExpandTools": "Автоматически разворачивать инструменты",
@@ -71,16 +70,6 @@
      "openPanel": "Открыть панель настроек",
      "draggingStatus": "Перетаскивание...",
      "toggleAndMove": "Нажмите для переключения, перетащите для перемещения"
-    },
-    "whisper": {
-      "modes": {
-        "default": "Режим по умолчанию",
-        "defaultDescription": "Прямая транскрипция вашей речи",
-        "prompt": "Улучшение запроса",
-        "promptDescription": "Преобразование грубых идей в четкие, детальные AI-запросы",
-        "vibe": "Режим Vibe",
-        "vibeDescription": "Форматирование идей как четких инструкций агента с деталями"
-      }
    }
  },
  "terminalShortcuts": {
@@ -472,4 +461,4 @@
    "tab": "вкладка",
    "runningStatus": "запущен"
  }
-}
+}
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -55,8 +55,7 @@
      "appearance": "外观",
      "toolDisplay": "工具显示",
      "viewOptions": "视图选项",
-      "inputSettings": "输入设置",
-      "whisperDictation": "Whisper 听写"
+      "inputSettings": "输入设置"
    },
    "darkMode": "深色模式",
    "autoExpandTools": "自动展开工具",
@@ -71,16 +70,6 @@
      "openPanel": "打开设置面板",
      "draggingStatus": "正在拖拽...",
      "toggleAndMove": "点击切换，拖拽移动"
-    },
-    "whisper": {
-      "modes": {
-        "default": "默认模式",
-        "defaultDescription": "直接转录您的语音",
-        "prompt": "提示词增强",
-        "promptDescription": "将粗略的想法转化为清晰、详细的 AI 提示词",
-        "vibe": "Vibe 模式",
-        "vibeDescription": "将想法格式化为带有详细说明的清晰智能体指令"
-      }
    }
  },
  "terminalShortcuts": {
@@ -492,4 +481,4 @@
    "tab": "标签",
    "runningStatus": "运行中"
  }
-}
+}
--- a/src/stores/useSessionStore.ts
+++ b/src/stores/useSessionStore.ts
@@ -46,7 +46,9 @@ export interface NormalizedMessage {
  toolResult?: { content: string; isError: boolean; toolUseResult?: unknown } | null;
  isError?: boolean;
  text?: string;
+  tokens?: number;
  canInterrupt?: boolean;
+  tokenBudget?: unknown;
  requestId?: string;
  input?: unknown;
  context?: unknown;
@@ -79,6 +81,7 @@ export interface SessionSlot {
  total: number;
  hasMore: boolean;
  offset: number;
+  tokenUsage: unknown;
 }

 const EMPTY: NormalizedMessage[] = [];
@@ -95,6 +98,7 @@ function createEmptySlot(): SessionSlot {
    total: 0,
    hasMore: false,
    offset: 0,
+    tokenUsage: null,
  };
 }

@@ -204,6 +208,9 @@ export function useSessionStore() {
      slot.fetchedAt = Date.now();
      slot.status = 'idle';
      recomputeMergedIfNeeded(slot);
+      if (data.tokenUsage) {
+        slot.tokenUsage = data.tokenUsage;
+      }

      notify(sessionId);
      return slot;
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -147,13 +147,6 @@ export const api = {
      headers: {}, // Let browser set Content-Type for FormData
    }),

-  transcribe: (formData) =>
-    authenticatedFetch('/api/transcribe', {
-      method: 'POST',
-      body: formData,
-      headers: {}, // Let browser set Content-Type for FormData
-    }),
-
  // TaskMaster endpoints
  taskmaster: {
    // Initialize TaskMaster in a project
Author	SHA1	Message	Date
Simos Mikelatos	9d7d12742f	Merge branch 'main' into feature/restart-server-on-update	2026-04-14 17:18:33 +02:00
simosmik	13e97e2c71	feat: adding docker sandbox environments	2026-04-14 15:18:02 +00:00
Haileyesus	1a0f10217d	feat: simplify update commands for platform	2026-04-14 16:34:05 +03:00
Haileyesus	f8d1a0dd2c	feat: optimize platform update command by omitting dev dependencies	2026-04-14 15:59:06 +03:00
Haileyesus	78c1d35a5d	feat: add update platform script to package.json	2026-04-14 15:32:04 +03:00
Haileyesus	906997391d	feat: support restart server on update for platform	2026-04-14 15:30:23 +03:00
Haile	c7a5baf147	fix(thinking-mode): fix dropdown positioning (#646 )	2026-04-13 11:44:31 +02:00
simosmik	e2459cb0f8	chore: update release flow node version	2026-04-10 14:56:33 +00:00
viper151	9552577e94	chore(release): v1.28.1	2026-04-10 13:36:05 +00:00
Haile	590dd42649	refactor: remove unused whispher transcribe logic (#637 )	2026-04-10 15:34:34 +02:00
				`@@ -1,2 +0,0 @@`
				`export type MicButtonState = 'idle' \| 'recording' \| 'transcribing' \| 'processing';`