Merge branch 'main' into refactor/remove-token-usage-logic

refactor: removed the token calculator logic
The information given was not accurate for the model providers
2026-04-11 16:11:31 +00:00 · 2026-04-10 15:30:43 +02:00 · 2026-04-10 16:21:01 +03:00 · 2026-04-10 13:06:16 +00:00 · 2026-04-10 12:36:06 +02:00 · 2026-04-10 12:35:23 +02:00
106 changed files with 2051 additions and 1547 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -0,0 +1,50 @@
+name: Release
+
+on:
+  workflow_dispatch:
+    inputs:
+      increment:
+        description: 'Version bump: patch, minor, major, or explicit (e.g. 1.27.0)'
+        required: true
+        default: 'patch'
+        type: string
+      release_name:
+        description: 'Custom release name (optional, defaults to "CloudCLI UI vX.Y.Z")'
+        required: false
+        type: string
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          token: ${{ secrets.RELEASE_PAT }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org
+
+      - name: git config
+        run: |
+          git config user.name "${GITHUB_ACTOR}"
+          git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
+
+      - run: npm ci
+
+      - name: Release
+        run: |
+          ARGS="--ci --increment=${{ inputs.increment }}"
+          if [ -n "${{ inputs.release_name }}" ]; then
+            ARGS="$ARGS --github.releaseName=\"${{ inputs.release_name }}\""
+          fi
+          npx release-it $ARGS
+        env:
+          GITHUB_TOKEN: ${{ secrets.RELEASE_PAT }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
--- a/.release-it.json
+++ b/.release-it.json
@@ -6,7 +6,8 @@
    "requireCleanWorkingDir": true
  },
  "npm": {
-    "publish": true
+    "publish": true,
+    "publishArgs": ["--access public"]
  },
  "github": {
    "release": true,
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,30 @@
 All notable changes to CloudCLI UI will be documented in this file.


+## [1.28.0](https://github.com/siteboon/claudecodeui/compare/v1.27.1...v1.28.0) (2026-04-03)
+
+### New Features
+
+* adding session resume in the api ([8f1042c](https://github.com/siteboon/claudecodeui/commit/8f1042cf256be282f009adcceeb55ab2dddf3fba))
+* moving new session button higher ([1628868](https://github.com/siteboon/claudecodeui/commit/16288684702dec894cf054291ca3d545ddb8214b))
+
+### Maintenance
+
+* changing package name to @cloudcli-ai/cloudcli ([ef51de2](https://github.com/siteboon/claudecodeui/commit/ef51de259ea2b963bc15f058b084e11220bc216a))
+
+## [1.27.1](https://github.com/siteboon/claudecodeui/compare/v1.26.3...v1.27.1) (2026-03-29)
+
+### Bug Fixes
+
+* prevent split on undefined（[#491](https://github.com/siteboon/claudecodeui/issues/491)） ([#563](https://github.com/siteboon/claudecodeui/issues/563)) ([b54cdf8](https://github.com/siteboon/claudecodeui/commit/b54cdf8168fc224e9907796e4229ae8ed34e6885))
+
+### Maintenance
+
+* add release-it github action ([42a1313](https://github.com/siteboon/claudecodeui/commit/42a131389a6954df0d2c3bedd2cb6d3406c5ebc1))
+* add terminal plugin in the plugins list ([004135e](https://github.com/siteboon/claudecodeui/commit/004135ef0187023e1da29c4a7137a28a42ebf9af))
+* release tokens ([f1063fd](https://github.com/siteboon/claudecodeui/commit/f1063fd33964ccb517f5ebcdd14526ed162e1138))
+* relicense to AGPL-3.0-or-later ([27cd124](https://github.com/siteboon/claudecodeui/commit/27cd12432b7d3237981f86acd9cc99532d843d4a))
+
 ## [1.26.3](https://github.com/siteboon/claudecodeui/compare/v1.26.2...v1.26.3) (2026-03-22)

 ## [1.26.2](https://github.com/siteboon/claudecodeui/compare/v1.26.0...v1.26.2) (2026-03-21)
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -153,4 +153,4 @@ This automatically:

 ## License

-By contributing, you agree that your contributions will be licensed under the [GPL-3.0 License](LICENSE).
+By contributing, you agree that your contributions will be licensed under the [AGPL-3.0-or-later License](LICENSE), including the additional terms specified in Section 7 of the LICENSE file.
--- a/789
+++ b/789
--- a/13
+++ b/13
@@ -0,0 +1,13 @@
+CloudCLI UI
+Copyright 2025-2026 Siteboon AI B.V. and contributors
+
+This software is licensed under the GNU Affero General Public License v3.0
+or later (AGPL-3.0-or-later). See the LICENSE file for the full license text,
+including additional terms under Section 7.
+
+Originally developed by Siteboon AI B.V. (https://github.com/siteboon/claudecodeui).
+
+Contributions by Siteboon AI B.V. prior to commit 004135ef were originally
+published under GPL-3.0 and are hereby relicensed to AGPL-3.0-or-later.
+Contributions by other authors prior to that commit remain under GPL-3.0
+and are incorporated into this work as permitted by GPL-3.0 Section 13.
--- a/README.de.md
+++ b/README.de.md
@@ -79,13 +79,13 @@ Der schnellste Einstieg – keine lokale Einrichtung erforderlich. Erhalte eine
 CloudCLI UI sofort mit **npx** ausprobieren (erfordert **Node.js** v22+):

 ```bash
-npx @siteboon/claude-code-ui
+npx @cloudcli-ai/cloudcli
 ```

 Oder **global** installieren für regelmäßige Nutzung:

 ```bash
-npm install -g @siteboon/claude-code-ui
+npm install -g @cloudcli-ai/cloudcli
 cloudcli
 ```

@@ -104,7 +104,7 @@ CloudCLI UI ist die Open-Source-UI-Schicht, die CloudCLI Cloud antreibt. Du kann
 |---|---|---|
 | **Am besten für** | Entwickler:innen, die eine vollständige UI für lokale Agent-Sitzungen auf ihrem eigenen Rechner möchten | Teams und Entwickler:innen, die Agents in der Cloud betreiben möchten, überall erreichbar |
 | **Zugriff** | Browser via `[deineIP]:port` | Browser, jede IDE, REST API, n8n |
-| **Einrichtung** | `npx @siteboon/claude-code-ui` | Keine Einrichtung erforderlich |
+| **Einrichtung** | `npx @cloudcli-ai/cloudcli` | Keine Einrichtung erforderlich |
 | **Rechner muss laufen** | Ja | Nein |
 | **Mobiler Zugriff** | Jeder Browser im Netzwerk | Jedes Gerät, native App in Entwicklung |
 | **Verfügbare Sitzungen** | Alle Sitzungen automatisch aus `~/.claude` erkannt | Alle Sitzungen in deiner Cloud-Umgebung |
--- a/README.ja.md
+++ b/README.ja.md
@@ -75,13 +75,13 @@
 **npx** で今すぐ CloudCLI UI を試せます（**Node.js** v22+ が必要）：

 ```bash
-npx @siteboon/claude-code-ui
+npx @cloudcli-ai/cloudcli
 ```

 または、普段使いするなら **グローバル** にインストール：

 ```bash
-npm install -g @siteboon/claude-code-ui
+npm install -g @cloudcli-ai/cloudcli
 cloudcli
 ```

@@ -100,7 +100,7 @@ CloudCLI UI は、CloudCLI Cloud を支えるオープンソースの UI レイ
 |---|---|---|
 | **対象ユーザー** | 自分のマシン上でローカルの agent セッションに対してフル UI を使いたい開発者 | クラウド上で動く agents をどこからでも利用したいチーム／開発者 |
 | **アクセス方法** | ブラウザ（`[yourip]:port`） | ブラウザ、任意の IDE、REST API、n8n |
-| **セットアップ** | `npx @siteboon/claude-code-ui` | セットアップ不要 |
+| **セットアップ** | `npx @cloudcli-ai/cloudcli` | セットアップ不要 |
 | **マシンの稼働継続** | はい | いいえ |
 | **モバイルアクセス** | 同一ネットワーク内の任意のブラウザ | 任意のデバイス（ネイティブアプリも準備中） |
 | **利用可能なセッション** | `~/.claude` から全セッションを自動検出 | クラウド環境内の全セッション |
--- a/README.ko.md
+++ b/README.ko.md
@@ -75,13 +75,13 @@
 **npx**로 즉시 CloudCLI UI를 실행하세요 (Node.js v22+ 필요):

 ```bash
-npx @siteboon/claude-code-ui
+npx @cloudcli-ai/cloudcli
 ```

 **정기적으로 사용한다면 전역 설치:**

 ```bash
-npm install -g @siteboon/claude-code-ui
+npm install -g @cloudcli-ai/cloudcli
 cloudcli
 ```

@@ -99,7 +99,7 @@ CloudCLI UI는 CloudCLI Cloud를 구동하는 오픈 소스 UI 계층입니다.
 |---|---|---|
 | **적합한 대상** | 로컬 에이전트 세션을 위한 전체 UI가 필요한 개발자 | 어디서든 접근 가능한 클라우드에서 에이전트를 운영하고자 하는 팀 및 개발자 |
 | **접근 방법** | `[yourip]:port`를 통해 브라우저 접속 | 브라우저, IDE, REST API, n8n |
-| **설정** | `npx @siteboon/claude-code-ui` | 설정 불필요 |
+| **설정** | `npx @cloudcli-ai/cloudcli` | 설정 불필요 |
 | **기기 유지 필요 여부** | 예 (머신 켜둬야 함) | 아니오 |
 | **모바일 접근** | 네트워크 내 브라우저 | 모든 기기 (네이티브 앱 예정) |
 | **세션 접근** | `~/.claude`에서 자동 발견 | 클라우드 환경 내 세션 |
--- a/README.md
+++ b/README.md
@@ -79,13 +79,13 @@ The fastest way to get started — no local setup required. Get a fully managed,
 Try CloudCLI UI instantly with **npx** (requires **Node.js** v22+):

 ```
-npx @siteboon/claude-code-ui
+npx @cloudcli-ai/cloudcli
 ```

 Or install **globally** for regular use:

 ```
-npm install -g @siteboon/claude-code-ui
+npm install -g @cloudcli-ai/cloudcli
 cloudcli
 ```

@@ -104,7 +104,7 @@ CloudCLI UI is the open source UI layer that powers CloudCLI Cloud. You can self
 |---|---|---|
 | **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 @siteboon/claude-code-ui` | No setup required |
+| **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 |
@@ -213,9 +213,11 @@ Yes, for self-hosted. CloudCLI UI reads from and writes to the same `~/.claude`

 ## License

-GNU General Public License v3.0 - see [LICENSE](LICENSE) file for details.
+GNU Affero General Public License v3.0 or later (AGPL-3.0-or-later) — see [LICENSE](LICENSE) for the full text, including additional terms under Section 7.

-This project is open source and free to use, modify, and distribute under the GPL v3 license.
+This project is open source and free to use, modify, and distribute under the AGPL-3.0-or-later license. If you modify this software and run it as a network service, you must make your modified source code available to users of that service.
+
+CloudCLI UI  - (https://cloudcli.ai).

 ## Acknowledgments

--- a/README.ru.md
+++ b/README.ru.md
@@ -79,13 +79,13 @@
 Попробовать CloudCLI UI можно сразу через **npx** (требуется **Node.js** v22+):

 ```bash
-npx @siteboon/claude-code-ui
+npx @cloudcli-ai/cloudcli
 ```

 Или установить **глобально** для регулярного использования:

 ```bash
-npm install -g @siteboon/claude-code-ui
+npm install -g @cloudcli-ai/cloudcli
 cloudcli
 ```

@@ -104,7 +104,7 @@ CloudCLI UI — это open source UI-слой, на котором постро
 |---|---|---|
 | **Лучше всего подходит для** | Разработчиков, которым нужен полноценный UI для локальных агентских сессий на своей машине | Команд и разработчиков, которым нужны агенты в облаке с доступом откуда угодно |
 | **Как вы получаете доступ** | Браузер через `[yourip]:port` | Браузер, любая IDE, REST API, n8n |
-| **Настройка** | `npx @siteboon/claude-code-ui` | Настройка не требуется |
+| **Настройка** | `npx @cloudcli-ai/cloudcli` | Настройка не требуется |
 | **Машина должна оставаться включённой** | Да | Нет |
 | **Доступ с мобильных устройств** | Любой браузер в вашей сети | Любое устройство, нативное приложение в разработке |
 | **Доступные сессии** | Все сессии автоматически обнаруживаются из `~/.claude` | Все сессии внутри вашей облачной среды |
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -75,13 +75,13 @@
 启动 CloudCLI UI，只需一行 `npx`（需要 Node.js v22+）：

 ```bash
-npx @siteboon/claude-code-ui
+npx @cloudcli-ai/cloudcli
 ```

 或进行全局安装，便于日常使用：

 ```bash
-npm install -g @siteboon/claude-code-ui
+npm install -g @cloudcli-ai/cloudcli
 cloudcli
 ```

@@ -99,7 +99,7 @@ CloudCLI UI 是 CloudCLI Cloud 的开源 UI 层。你可以在本地机器上自
 |---|---|---|
 | **适合对象** | 需要为本地代理会话提供完整 UI 的开发者 | 需要部署在云端，随时从任何地方访问代理的团队与开发者 |
 | **访问方式** | 通过 `[yourip]:port` 在浏览器中访问 | 浏览器、任意 IDE、REST API、n8n |
-| **设置** | `npx @siteboon/claude-code-ui` | 无需设置 |
+| **设置** | `npx @cloudcli-ai/cloudcli` | 无需设置 |
 | **机器需保持开机吗** | 是 | 否 |
 | **移动端访问** | 网络内任意浏览器 | 任意设备（原生应用即将推出） |
 | **可用会话** | 自动发现 `~/.claude` 中的所有会话 | 云端环境内的会话 |
--- a/docker/README.md
+++ b/docker/README.md
@@ -0,0 +1,89 @@
+# CloudCLI — Docker Sandbox Templates
+
+Run AI coding agents with a full web IDE inside [Docker Sandboxes](https://docs.docker.com/ai/sandboxes/).
+
+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.
+
+## Available Templates
+
+| 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 |
+
+## Quick Start
+
+### 1. Start a sandbox with the template
+
+```bash
+sbx run --template docker.io/cloudcli-ai/sandbox:claude-code claude ~/my-project
+```
+
+### 2. Forward the UI port
+
+```bash
+sbx ports <sandbox-name> --publish 3001:3001
+```
+
+### 3. Open the browser
+
+```
+http://localhost:3001
+```
+
+On first visit you'll set a password — this protects the UI if the port is ever exposed beyond localhost.
+
+## What You Get
+
+- **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
+- **Shell** — Built-in terminal emulator
+- **MCP** — Configure Model Context Protocol servers through the UI
+- **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.
+
+## 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:
+
+```bash
+sbx policy allow network "localhost:3001"
+```
+
+## License
+
+These templates are free and open-source under the same license as CloudCLI (AGPL-3.0-or-later).
--- a/docker/claude-code/Dockerfile
+++ b/docker/claude-code/Dockerfile
@@ -0,0 +1,11 @@
+FROM docker/sandbox-templates:claude-code
+
+USER root
+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
+
+COPY 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
@@ -0,0 +1,11 @@
+FROM docker/sandbox-templates:codex
+
+USER root
+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
+
+COPY 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
@@ -0,0 +1,11 @@
+FROM docker/sandbox-templates:gemini
+
+USER root
+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
+
+COPY 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
@@ -0,0 +1,14 @@
+#!/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 \
+  jq ripgrep sqlite3 zip unzip tree vim-tiny
+
+# Clean up apt cache to reduce image size
+rm -rf /var/lib/apt/lists/*
--- a/docker/shared/start-cloudcli.sh
+++ b/docker/shared/start-cloudcli.sh
@@ -0,0 +1,23 @@
+#!/bin/bash
+
+# Auto-start CloudCLI server in background if not already running.
+# 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 ""
+  echo "  Then open: http://localhost:3001"
+  echo ""
+fi
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,14 @@
 {
-  "name": "@siteboon/claude-code-ui",
-  "version": "1.26.3",
+  "name": "@cloudcli-ai/cloudcli",
+  "version": "1.28.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "@siteboon/claude-code-ui",
-      "version": "1.26.3",
+      "name": "@cloudcli-ai/cloudcli",
+      "version": "1.28.0",
      "hasInstallScript": true,
-      "license": "GPL-3.0",
+      "license": "AGPL-3.0-or-later",
      "dependencies": {
        "@anthropic-ai/claude-agent-sdk": "^0.2.59",
        "@codemirror/lang-css": "^6.3.1",
@@ -69,7 +69,6 @@
        "ws": "^8.14.2"
      },
      "bin": {
-        "claude-code-ui": "server/cli.js",
        "cloudcli": "server/cli.js"
      },
      "devDependencies": {
--- a/package.json
+++ b/package.json
@@ -1,11 +1,10 @@
 {
-  "name": "@siteboon/claude-code-ui",
-  "version": "1.26.3",
+  "name": "@cloudcli-ai/cloudcli",
+  "version": "1.28.0",
  "description": "A web-based UI for Claude Code CLI",
  "type": "module",
  "main": "server/index.js",
  "bin": {
-    "claude-code-ui": "server/cli.js",
    "cloudcli": "server/cli.js"
  },
  "files": [
@@ -40,13 +39,24 @@
  },
  "keywords": [
    "claude code",
-    "ai",
+    "claude-code",
+    "claude-code-ui",
+    "cloudcli",
+    "codex",
+    "gemini",
+    "gemini-cli",
+    "cursor",
+    "cursor-cli",
    "anthropic",
+    "openai",
+    "google",
+    "coding-agent",
+    "web-ui",
    "ui",
-    "mobile"
+    "mobile IDE"
  ],
  "author": "CloudCLI UI Contributors",
-  "license": "GPL-3.0",
+  "license": "AGPL-3.0-or-later",
  "dependencies": {
    "@anthropic-ai/claude-agent-sdk": "^0.2.59",
    "@codemirror/lang-css": "^6.3.1",
--- a/public/api-docs.html
+++ b/public/api-docs.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Claude Code UI - API Documentation</title>
+    <title>CloudCLI - API Documentation</title>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    
@@ -418,7 +418,7 @@
                    </svg>
                </div>
                <div class="brand-text">
-                    <h1>Claude Code UI</h1>
+                    <h1>CloudCLI</h1>
                    <div class="subtitle">API Documentation</div>
                </div>
            </div>
@@ -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, assistant messages only (filtered), and token usage summary. Content-Type: <code>application/json</code></p>
+                            <p>JSON object containing session details and assistant messages only (filtered). Content-Type: <code>application/json</code></p>

                            <h4>Error Response</h4>
                            <p>Returns error details with appropriate HTTP status code.</p>
@@ -674,21 +674,10 @@ 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/public/sw.js
+++ b/public/sw.js
@@ -1,4 +1,4 @@
-// Service Worker for Claude Code UI PWA
+// Service Worker for CloudCLI PWA
 // Cache only manifest (needed for PWA install). HTML and JS are never pre-cached
 // so a rebuild + refresh always picks up the latest assets.
 const CACHE_NAME = 'claude-ui-v2';
@@ -79,7 +79,7 @@ self.addEventListener('push', event => {
  try {
    payload = event.data.json();
  } catch {
-    payload = { title: 'Claude Code UI', body: event.data.text() };
+    payload = { title: 'CloudCLI', body: event.data.text() };
  }

  const options = {
@@ -92,7 +92,7 @@ self.addEventListener('push', event => {
  };

  event.waitUntil(
-    self.registration.showNotification(payload.title || 'Claude Code UI', options)
+    self.registration.showNotification(payload.title || 'CloudCLI', options)
  );
 });

--- a/redirect-package/README.md
+++ b/redirect-package/README.md
@@ -0,0 +1,248 @@
+<div align="center">
+
+> ## This package has moved to [`@cloudcli-ai/cloudcli`](https://www.npmjs.com/package/@cloudcli-ai/cloudcli)
+>
+> ```bash
+> npm install -g @cloudcli-ai/cloudcli
+> ```
+>
+> This package (`@siteboon/claude-code-ui`) is now a thin wrapper that installs the new package automatically.
+> For new installations, use `@cloudcli-ai/cloudcli` directly.
+
+</div>
+
+---
+
+<div align="center">
+  <img src="https://raw.githubusercontent.com/siteboon/claudecodeui/main/public/logo.svg" alt="CloudCLI UI" width="64" height="64">
+  <h1>Cloud CLI (aka Claude Code UI)</h1>
+  <p>A desktop and mobile UI for <a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>, <a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>, <a href="https://developers.openai.com/codex">Codex</a>, and <a href="https://geminicli.com/">Gemini-CLI</a>.<br>Use it locally or remotely to view your active projects and sessions from everywhere.</p>
+</div>
+
+<p align="center">
+  <a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">Documentation</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Bug Reports</a> · <a href="https://github.com/siteboon/claudecodeui/blob/main/CONTRIBUTING.md">Contributing</a>
+</p>
+
+<p align="center">
+  <a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
+  <a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Join our Discord"></a>
+  <br><br>
+  <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
+
+---
+
+## Screenshots
+
+<div align="center">
+
+<table>
+<tr>
+<td align="center">
+<h3>Desktop View</h3>
+<img src="https://raw.githubusercontent.com/siteboon/claudecodeui/main/public/screenshots/desktop-main.png" alt="Desktop Interface" width="400">
+<br>
+<em>Main interface showing project overview and chat</em>
+</td>
+<td align="center">
+<h3>Mobile Experience</h3>
+<img src="https://raw.githubusercontent.com/siteboon/claudecodeui/main/public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250">
+<br>
+<em>Responsive mobile design with touch navigation</em>
+</td>
+</tr>
+<tr>
+<td align="center" colspan="2">
+<h3>CLI Selection</h3>
+<img src="https://raw.githubusercontent.com/siteboon/claudecodeui/main/public/screenshots/cli-selection.png" alt="CLI Selection" width="400">
+<br>
+<em>Select between Claude Code, Gemini, Cursor CLI and Codex</em>
+</td>
+</tr>
+</table>
+
+
+
+</div>
+
+## Features
+
+- **Responsive Design** - Works seamlessly across desktop, tablet, and mobile so you can also use Agents from mobile
+- **Interactive Chat Interface** - Built-in chat interface for seamless communication with the Agents
+- **Integrated Shell Terminal** - Direct access to the Agents CLI through built-in shell functionality
+- **File Explorer** - Interactive file tree with syntax highlighting and live editing
+- **Git Explorer** - View, stage and commit your changes. You can also switch branches
+- **Session Management** - Resume conversations, manage multiple sessions, and track history
+- **Plugin System** - Extend CloudCLI with custom plugins — add new tabs, backend services, and integrations. [Build your own →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)
+- **TaskMaster AI Integration** *(Optional)* - Advanced project management with AI-powered task planning, PRD parsing, and workflow automation
+- **Model Compatibility** - Works with Claude, GPT, and Gemini model families (see [`shared/modelConstants.js`](https://github.com/siteboon/claudecodeui/blob/main/shared/modelConstants.js) for the full list of supported models)
+
+
+## Quick Start
+
+### CloudCLI Cloud (Recommended)
+
+The fastest way to get started — no local setup required. Get a fully managed, containerized development environment accessible from the web, mobile app, API, or your favorite IDE.
+
+**[Get started with CloudCLI Cloud](https://cloudcli.ai)**
+
+
+### Self-Hosted (Open source)
+
+Try CloudCLI UI instantly with **npx** (requires **Node.js** v22+):
+
+```
+npx @cloudcli-ai/cloudcli
+```
+
+Or install **globally** for regular use:
+
+```
+npm install -g @cloudcli-ai/cloudcli
+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
+
+
+---
+
+## 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 (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 |
+
+> Both options use your own AI subscriptions (Claude, Cursor, etc.) — CloudCLI provides the environment, not the AI.
+
+---
+
+## Security & Tools Configuration
+
+**Important Notice**: All Claude Code tools are **disabled by default**. This prevents potentially harmful operations from running automatically.
+
+### Enabling Tools
+
+To use Claude Code's full functionality, you'll need to manually enable tools:
+
+1. **Open Tools Settings** - Click the gear icon in the sidebar
+2. **Enable Selectively** - Turn on only the tools you need
+3. **Apply Settings** - Your preferences are saved locally
+
+**Recommended approach**: Start with basic tools enabled and add more as needed. You can always adjust these settings later.
+
+---
+
+## Plugins
+
+CloudCLI has a plugin system that lets you add custom tabs with their own frontend UI and optional Node.js backend. Install plugins from git repos directly in **Settings > Plugins**, or build your own.
+
+### Available Plugins
+
+| Plugin | Description |
+|---|---|
+| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | Shows file counts, lines of code, file-type breakdown, largest files, and recently modified files for your current project |
+| **[Web Terminal](https://github.com/cloudcli-ai/cloudcli-plugin-terminal)** | Full xterm.js terminal with multi-tab support|
+
+### Build Your Own
+
+**[Plugin Starter Template →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** — fork this repo to create your own plugin. It includes a working example with frontend rendering, live context updates, and RPC communication to a backend server.
+
+**[Plugin Documentation →](https://cloudcli.ai/docs/plugin-overview)** — full guide to the plugin API, manifest format, security model, and more.
+
+---
+## FAQ
+
+<details>
+<summary>How is this different from Claude Code Remote Control?</summary>
+
+Claude Code Remote Control lets you send messages to a session already running in your local terminal. Your machine has to stay on, your terminal has to stay open, and sessions time out after roughly 10 minutes without a network connection.
+
+CloudCLI UI and CloudCLI Cloud extend Claude Code rather than sit alongside it — your MCP servers, permissions, settings, and sessions are the exact same ones Claude Code uses natively. Nothing is duplicated or managed separately.
+
+Here's what that means in practice:
+
+- **All your sessions, not just one** — CloudCLI UI auto-discovers every session from your `~/.claude` folder. Remote Control only exposes the single active session to make it available in the Claude mobile app.
+- **Your settings are your settings** — MCP servers, tool permissions, and project config you change in CloudCLI UI are written directly to your Claude Code config and take effect immediately, and vice versa.
+- **Works with more agents** — Claude Code, Cursor CLI, Codex, and Gemini CLI, not just Claude Code.
+- **Full UI, not just a chat window** — file explorer, Git integration, MCP management, and a shell terminal are all built in.
+- **CloudCLI Cloud runs in the cloud** — close your laptop, the agent keeps running. No terminal to babysit, no machine to keep awake.
+
+</details>
+
+<details>
+<summary>Do I need to pay for an AI subscription separately?</summary>
+
+Yes. CloudCLI provides the environment, not the AI. You bring your own Claude, Cursor, Codex, or Gemini subscription. CloudCLI Cloud starts at $7/month for the hosted environment on top of that.
+
+</details>
+
+<details>
+<summary>Can I use CloudCLI UI on my phone?</summary>
+
+Yes. For self-hosted, run the server on your machine and open `[yourip]:port` in any browser on your network. For CloudCLI Cloud, open it from any device — no VPN, no port forwarding, no setup. A native app is also in the works.
+
+</details>
+
+<details>
+<summary>Will changes I make in the UI affect my local Claude Code setup?</summary>
+
+Yes, for self-hosted. CloudCLI UI reads from and writes to the same `~/.claude` config that Claude Code uses natively. MCP servers you add via the UI show up in Claude Code immediately and vice versa.
+
+</details>
+
+---
+
+## Community & Support
+
+- **[Documentation](https://cloudcli.ai/docs)** — installation, configuration, features, and troubleshooting
+- **[Discord](https://discord.gg/buxwujPNRE)** — get help and connect with other users
+- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — bug reports and feature requests
+- **[Contributing Guide](https://github.com/siteboon/claudecodeui/blob/main/CONTRIBUTING.md)** — how to contribute to the project
+
+## License
+
+GNU Affero General Public License v3.0 or later (AGPL-3.0-or-later) — see [LICENSE](https://github.com/siteboon/claudecodeui/blob/main/LICENSE) for the full text, including additional terms under Section 7.
+
+This project is open source and free to use, modify, and distribute under the AGPL-3.0-or-later license. If you modify this software and run it as a network service, you must make your modified source code available to users of that service.
+
+CloudCLI UI  - (https://cloudcli.ai).
+
+## Acknowledgments
+
+### Built With
+- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic's official CLI
+- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor's official CLI
+- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
+- **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
+- **[React](https://react.dev/)** - User interface library
+- **[Vite](https://vitejs.dev/)** - Fast build tool and dev server
+- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
+- **[CodeMirror](https://codemirror.net/)** - Advanced code editor
+- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(Optional)* - AI-powered project management and task planning
+
+
+### Sponsors
+- [Siteboon - AI powered website builder](https://siteboon.ai)
+---
+
+<div align="center">
+  <strong>Made with care for the Claude Code, Cursor and Codex community.</strong>
+</div>
--- a/redirect-package/bin.js
+++ b/redirect-package/bin.js
@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import('@cloudcli-ai/cloudcli/server/cli.js');
--- a/redirect-package/index.js
+++ b/redirect-package/index.js
@@ -0,0 +1,2 @@
+export * from '@cloudcli-ai/cloudcli';
+export { default } from '@cloudcli-ai/cloudcli';
--- a/redirect-package/package.json
+++ b/redirect-package/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@siteboon/claude-code-ui",
+  "version": "2.0.0",
+  "description": "This package has moved to @cloudcli-ai/cloudcli",
+  "type": "module",
+  "main": "index.js",
+  "bin": {
+    "claude-code-ui": "./bin.js",
+    "cloudcli": "./bin.js"
+  },
+  "homepage": "https://cloudcli.ai",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/siteboon/claudecodeui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/siteboon/claudecodeui/issues"
+  },
+  "keywords": [
+    "claude code",
+    "claude-code",
+    "claude-code-ui",
+    "cloudcli",
+    "codex",
+    "gemini",
+    "gemini-cli",
+    "cursor",
+    "cursor-cli",
+    "anthropic",
+    "openai",
+    "google",
+    "coding-agent",
+    "web-ui",
+    "ui",
+    "mobile IDE"
+  ],
+  "author": "CloudCLI UI Contributors",
+  "dependencies": {
+    "@cloudcli-ai/cloudcli": "*"
+  },
+  "deprecated": "This package has been renamed to @cloudcli-ai/cloudcli. Please install @cloudcli-ai/cloudcli instead.",
+  "license": "AGPL-3.0-or-later"
+}
--- a/server/claude-sdk.js
+++ b/server/claude-sdk.js
@@ -274,46 +274,6 @@ 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
@@ -657,18 +617,6 @@ 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
@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 /**
- * Claude Code UI CLI
+ * CloudCLI CLI
 *
- * Provides command-line utilities for managing Claude Code UI
+ * Provides command-line utilities for managing CloudCLI
 *
 * Commands:
 *   (no args)     - Start the server (default)
@@ -84,7 +84,7 @@ function getInstallDir() {

 // Show status command
 function showStatus() {
-    console.log(`\n${c.bright('Claude Code UI - Status')}\n`);
+    console.log(`\n${c.bright('CloudCLI UI - Status')}\n`);
    console.log(c.dim('═'.repeat(60)));

    // Version info
@@ -141,7 +141,7 @@ function showStatus() {
 function showHelp() {
    console.log(`
 ╔═══════════════════════════════════════════════════════════════╗
-║              Claude Code UI - Command Line Tool               ║
+║              CloudCLI - Command Line Tool               ║
 ╚═══════════════════════════════════════════════════════════════╝

 Usage:
@@ -149,7 +149,7 @@ Usage:
  cloudcli [command] [options]

 Commands:
-  start          Start the Claude Code UI server (default)
+  start          Start the CloudCLI server (default)
  status         Show configuration and data locations
  update         Update to the latest version
  help           Show this help information
@@ -203,7 +203,7 @@ function isNewerVersion(v1, v2) {
 async function checkForUpdates(silent = false) {
    try {
        const { execSync } = await import('child_process');
-        const latestVersion = execSync('npm show @siteboon/claude-code-ui version', { encoding: 'utf8' }).trim();
+        const latestVersion = execSync('npm show @cloudcli-ai/cloudcli version', { encoding: 'utf8' }).trim();
        const currentVersion = packageJson.version;

        if (isNewerVersion(latestVersion, currentVersion)) {
@@ -236,11 +236,11 @@ async function updatePackage() {
        }

        console.log(`${c.info('[INFO]')} Updating from ${currentVersion} to ${latestVersion}...`);
-        execSync('npm update -g @siteboon/claude-code-ui', { stdio: 'inherit' });
+        execSync('npm update -g @cloudcli-ai/cloudcli', { stdio: 'inherit' });
        console.log(`${c.ok('[OK]')} Update complete! Restart cloudcli to use the new version.`);
    } catch (e) {
        console.error(`${c.error('[ERROR]')} Update failed: ${e.message}`);
-        console.log(`${c.tip('[TIP]')} Try running manually: npm update -g @siteboon/claude-code-ui`);
+        console.log(`${c.tip('[TIP]')} Try running manually: npm update -g @cloudcli-ai/cloudcli`);
    }
 }

--- a/server/index.js
+++ b/server/index.js
@@ -438,7 +438,7 @@ app.post('/api/system/update', authenticateToken, async (req, res) => {
        // Run the update command based on install mode
        const updateCommand = installMode === 'git'
            ? 'git checkout main && git pull && npm install'
-            : 'npm install -g @siteboon/claude-code-ui@latest';
+            : 'npm install -g @cloudcli-ai/cloudcli@latest';

        const child = spawn('sh', ['-c', updateCommand], {
            cwd: installMode === 'git' ? projectRoot : os.homedir(),
@@ -812,7 +812,7 @@ app.get('/api/projects/:projectName/file', authenticateToken, async (req, res) =
    }
 });

-// Serve binary file content endpoint (for images, etc.)
+// Serve raw file bytes for previews and downloads.
 app.get('/api/projects/:projectName/files/content', authenticateToken, async (req, res) => {
    try {
        const { projectName } = req.params;
@@ -829,7 +829,11 @@ app.get('/api/projects/:projectName/files/content', authenticateToken, async (re
            return res.status(404).json({ error: 'Project not found' });
        }

-        const resolved = path.resolve(filePath);
+        // Match the text reader endpoint so callers can pass either project-relative
+        // or absolute paths without changing how the bytes are served.
+        const resolved = path.isAbsolute(filePath)
+            ? path.resolve(filePath)
+            : path.resolve(projectRoot, filePath);
        const normalizedRoot = path.resolve(projectRoot) + path.sep;
        if (!resolved.startsWith(normalizedRoot)) {
            return res.status(403).json({ error: 'Path must be under project root' });
@@ -2214,194 +2218,6 @@ 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)
@@ -2544,7 +2360,7 @@ async function startServer() {

            console.log('');
            console.log(c.dim('═'.repeat(63)));
-            console.log(`  ${c.bright('Claude Code UI Server - Ready')}`);
+            console.log(`  ${c.bright('CloudCLI Server - Ready')}`);
            console.log(c.dim('═'.repeat(63)));
            console.log('');
            console.log(`${c.info('[INFO]')} Server URL:  ${c.bright('http://' + DISPLAY_HOST + ':' + SERVER_PORT)}`);
--- a/server/openai-codex.js
+++ b/server/openai-codex.js
@@ -129,8 +129,7 @@ function transformCodexEvent(event) {

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

    case 'turn.failed':
@@ -279,12 +278,6 @@ 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,7 +1618,6 @@ async function getCodexSessionMessages(sessionId, limit = null, offset = 0) {
    }

    const messages = [];
-    let tokenUsage = null;
    const fileStream = fsSync.createReadStream(sessionFilePath);
    const rl = readline.createInterface({
      input: fileStream,
@@ -1647,17 +1646,6 @@ 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({
@@ -1820,11 +1808,10 @@ async function getCodexSessionMessages(sessionId, limit = null, offset = 0) {
        hasMore,
        offset,
        limit,
-        tokenUsage
      };
    }

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

  } 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,7 +214,6 @@ 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) {
@@ -242,7 +241,6 @@ export const codexAdapter = {
      hasMore,
      offset,
      limit,
-      tokenUsage,
    };
  },
 };
--- a/server/providers/gemini/adapter.js
+++ b/server/providers/gemini/adapter.js
@@ -53,14 +53,7 @@ export function normalizeMessage(raw, sessionId) {
  }

  if (raw.type === 'result') {
-    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;
+    return [createNormalizedMessage({ sessionId, timestamp: ts, provider: PROVIDER, kind: 'stream_end' })];
  }

  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, tokens?, canInterrupt?
+ * - status:               text, canInterrupt?
 * - permission_request:   requestId, toolName, input, context?
 * - permission_cancelled: requestId
 * - session_created:      newSessionId
@@ -66,7 +66,6 @@
 * @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
@@ -475,6 +475,7 @@ class SSEStreamWriter {

  setSessionId(sessionId) {
    this.sessionId = sessionId;
+    this.send({ type: 'session-id', sessionId });
  }

  getSessionId() {
@@ -545,7 +546,12 @@ 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') {
-            assistantMessages.push(parsed.data);
+            const assistantMessage = { ...parsed.data };
+            if (assistantMessage.message?.usage) {
+              assistantMessage.message = { ...assistantMessage.message };
+              delete assistantMessage.message.usage;
+            }
+            assistantMessages.push(assistantMessage);
          }
        } catch (e) {
          // Not JSON, skip
@@ -555,49 +561,6 @@ 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
-    };
-  }
 }

 // ===============================
@@ -788,13 +751,6 @@ 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",
@@ -839,7 +795,7 @@ class ResponseCollector {
 *   }
 */
 router.post('/', validateExternalApiKey, async (req, res) => {
-  const { githubUrl, projectPath, message, provider = 'claude', model, githubToken, branchName } = req.body;
+  const { githubUrl, projectPath, message, provider = 'claude', model, githubToken, branchName, sessionId } = req.body;

  // Parse stream and cleanup as booleans (handle string "true"/"false" from curl)
  const stream = req.body.stream === undefined ? true : (req.body.stream === true || req.body.stream === 'true');
@@ -949,7 +905,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
      await queryClaudeSDK(message.trim(), {
        projectPath: finalProjectPath,
        cwd: finalProjectPath,
-        sessionId: null, // New session
+        sessionId: sessionId || null,
        model: model,
        permissionMode: 'bypassPermissions' // Bypass all permissions for API calls
      }, writer);
@@ -960,7 +916,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
      await spawnCursor(message.trim(), {
        projectPath: finalProjectPath,
        cwd: finalProjectPath,
-        sessionId: null, // New session
+        sessionId: sessionId || null,
        model: model || undefined,
        skipPermissions: true // Bypass permissions for Cursor
      }, writer);
@@ -970,7 +926,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
      await queryCodex(message.trim(), {
        projectPath: finalProjectPath,
        cwd: finalProjectPath,
-        sessionId: null,
+        sessionId: sessionId || null,
        model: model || CODEX_MODELS.DEFAULT,
        permissionMode: 'bypassPermissions'
      }, writer);
@@ -980,7 +936,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
      await spawnGemini(message.trim(), {
        projectPath: finalProjectPath,
        cwd: finalProjectPath,
-        sessionId: null,
+        sessionId: sessionId || null,
        model: model,
        skipPermissions: true // CLI mode bypasses permissions
      }, writer);
@@ -1124,7 +1080,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
          } else {
            prBody += `Agent task: ${message}`;
          }
-          prBody += '\n\n---\n*This pull request was automatically created by Claude Code UI Agent.*';
+          prBody += '\n\n---\n*This pull request was automatically created by CloudCLI.ai Agent.*';

          console.log(`📝 PR Title: ${prTitle}`);

@@ -1172,15 +1128,13 @@ router.post('/', validateExternalApiKey, async (req, res) => {
      // Streaming mode: end the SSE stream
      writer.end();
    } else {
-      // Non-streaming mode: send filtered messages and token summary as JSON
+      // Non-streaming mode: send filtered messages 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,12 +97,6 @@ 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',
@@ -209,86 +203,6 @@ 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/server/services/notification-orchestrator.js
+++ b/server/services/notification-orchestrator.js
@@ -125,7 +125,7 @@ function buildPushBody(event) {
  const message = CODE_MAP[event.code] || 'You have a new notification';

  return {
-    title: sessionName || 'Claude Code UI',
+    title: sessionName || 'CloudCLI',
    body: `${providerLabel}: ${message}`,
    data: {
      sessionId: event.sessionId || null,
--- a/src/components/app/AppContent.tsx
+++ b/src/components/app/AppContent.tsx
@@ -7,7 +7,6 @@ import { useWebSocket } from '../../contexts/WebSocketContext';
 import { useDeviceSettings } from '../../hooks/useDeviceSettings';
 import { useSessionProtection } from '../../hooks/useSessionProtection';
 import { useProjectsState } from '../../hooks/useProjectsState';
-import MobileNav from './MobileNav';

 export default function AppContent() {
  const navigate = useNavigate();
@@ -33,7 +32,6 @@ export default function AppContent() {
    activeTab,
    sidebarOpen,
    isLoadingProjects,
-    isInputFocused,
    externalMessageUpdate,
    setActiveTab,
    setSidebarOpen,
@@ -159,7 +157,7 @@ export default function AppContent() {
        </div>
      )}

-      <div className={`flex min-w-0 flex-1 flex-col ${isMobile ? 'pb-mobile-nav' : ''}`}>
+      <div className="flex min-w-0 flex-1 flex-col">
        <MainContent
          selectedProject={selectedProject}
          selectedSession={selectedSession}
@@ -184,14 +182,6 @@ export default function AppContent() {
        />
      </div>

-      {isMobile && (
-        <MobileNav
-          activeTab={activeTab}
-          setActiveTab={setActiveTab}
-          isInputFocused={isInputFocused}
-        />
-      )}
-
    </div>
  );
 }
--- a/src/components/app/MobileNav.tsx
+++ b/src/components/app/MobileNav.tsx
@@ -1,179 +0,0 @@
-import { useState, useRef, useEffect, type Dispatch, type SetStateAction } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  MessageSquare,
-  Folder,
-  Terminal,
-  GitBranch,
-  ClipboardCheck,
-  Ellipsis,
-  Puzzle,
-  Box,
-  Database,
-  Globe,
-  Wrench,
-  Zap,
-  BarChart3,
-  type LucideIcon,
-} from 'lucide-react';
-import { useTasksSettings } from '../../contexts/TasksSettingsContext';
-import { usePlugins } from '../../contexts/PluginsContext';
-import { AppTab } from '../../types/app';
-
-const PLUGIN_ICON_MAP: Record<string, LucideIcon> = {
-  Puzzle, Box, Database, Globe, Terminal, Wrench, Zap, BarChart3, Folder, MessageSquare, GitBranch,
-};
-
-type CoreTabId = Exclude<AppTab, `plugin:${string}` | 'preview'>;
-type CoreNavItem = {
-  id: CoreTabId;
-  icon: LucideIcon;
-  label: string;
-};
-
-type MobileNavProps = {
-  activeTab: AppTab;
-  setActiveTab: Dispatch<SetStateAction<AppTab>>;
-  isInputFocused: boolean;
-};
-
-export default function MobileNav({ activeTab, setActiveTab, isInputFocused }: MobileNavProps) {
-  const { t } = useTranslation(['common', 'settings']);
-  const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings();
-  const shouldShowTasksTab = Boolean(tasksEnabled && isTaskMasterInstalled);
-  const { plugins } = usePlugins();
-  const [moreOpen, setMoreOpen] = useState(false);
-  const moreRef = useRef<HTMLDivElement | null>(null);
-
-  const enabledPlugins = plugins.filter((p) => p.enabled);
-  const hasPlugins = enabledPlugins.length > 0;
-  const isPluginActive = activeTab.startsWith('plugin:');
-
-  // Close the menu on outside tap
-  useEffect(() => {
-    if (!moreOpen) return;
-    const handleTap = (e: PointerEvent) => {
-      const target = e.target;
-      if (moreRef.current && target instanceof Node && !moreRef.current.contains(target)) {
-        setMoreOpen(false);
-      }
-    };
-    document.addEventListener('pointerdown', handleTap);
-    return () => document.removeEventListener('pointerdown', handleTap);
-  }, [moreOpen]);
-
-  // Close menu when a plugin tab is selected
-  const selectPlugin = (name: string) => {
-    const pluginTab = `plugin:${name}` as AppTab;
-    setActiveTab(pluginTab);
-    setMoreOpen(false);
-  };
-
-  const baseCoreItems: CoreNavItem[] = [
-    { id: 'chat', icon: MessageSquare, label: 'Chat' },
-    { id: 'shell', icon: Terminal, label: 'Shell' },
-    { id: 'files', icon: Folder, label: 'Files' },
-    { id: 'git', icon: GitBranch, label: 'Git' },
-  ];
-  const coreItems: CoreNavItem[] = shouldShowTasksTab
-    ? [...baseCoreItems, { id: 'tasks', icon: ClipboardCheck, label: 'Tasks' }]
-    : baseCoreItems;
-
-  return (
-    <div
-      className={`fixed bottom-0 left-0 right-0 z-50 transform px-3 pb-[max(8px,env(safe-area-inset-bottom))] transition-transform duration-300 ease-in-out ${isInputFocused ? 'translate-y-full' : 'translate-y-0'
-        }`}
-    >
-      <div className="nav-glass mobile-nav-float rounded-2xl border border-border/30">
-        <div className="flex items-center justify-around gap-0.5 px-1 py-1.5">
-          {coreItems.map((item) => {
-            const Icon = item.icon;
-            const isActive = activeTab === item.id;
-
-            return (
-              <button
-                key={item.id}
-                onClick={() => setActiveTab(item.id)}
-                onTouchStart={(e) => {
-                  e.preventDefault();
-                  setActiveTab(item.id);
-                }}
-                className={`relative flex flex-1 touch-manipulation flex-col items-center justify-center gap-0.5 rounded-xl px-3 py-2 transition-all duration-200 active:scale-95 ${isActive
-                  ? 'text-primary'
-                  : 'text-muted-foreground hover:text-foreground'
-                  }`}
-                aria-label={item.label}
-                aria-current={isActive ? 'page' : undefined}
-              >
-                {isActive && (
-                  <div className="bg-primary/8 dark:bg-primary/12 absolute inset-0 rounded-xl" />
-                )}
-                <Icon
-                  className={`relative z-10 transition-all duration-200 ${isActive ? 'h-5 w-5' : 'h-[18px] w-[18px]'}`}
-                  strokeWidth={isActive ? 2.4 : 1.8}
-                />
-                <span className={`relative z-10 text-[10px] font-medium transition-all duration-200 ${isActive ? 'opacity-100' : 'opacity-60'}`}>
-                  {item.label}
-                </span>
-              </button>
-            );
-          })}
-
-          {/* "More" button — only shown when there are enabled plugins */}
-          {hasPlugins && (
-            <div ref={moreRef} className="relative flex-1">
-              <button
-                onClick={() => setMoreOpen((v) => !v)}
-                onTouchStart={(e) => {
-                  e.preventDefault();
-                  setMoreOpen((v) => !v);
-                }}
-                className={`relative flex w-full touch-manipulation flex-col items-center justify-center gap-0.5 rounded-xl px-3 py-2 transition-all duration-200 active:scale-95 ${isPluginActive || moreOpen
-                    ? 'text-primary'
-                    : 'text-muted-foreground hover:text-foreground'
-                  }`}
-                aria-label="More plugins"
-                aria-expanded={moreOpen}
-              >
-                {(isPluginActive && !moreOpen) && (
-                  <div className="bg-primary/8 dark:bg-primary/12 absolute inset-0 rounded-xl" />
-                )}
-                <Ellipsis
-                  className={`relative z-10 transition-all duration-200 ${isPluginActive ? 'h-5 w-5' : 'h-[18px] w-[18px]'}`}
-                  strokeWidth={isPluginActive ? 2.4 : 1.8}
-                />
-                <span className={`relative z-10 text-[10px] font-medium transition-all duration-200 ${isPluginActive || moreOpen ? 'opacity-100' : 'opacity-60'}`}>
-                  {t('settings:pluginSettings.morePlugins')}
-                </span>
-              </button>
-
-              {/* Popover menu */}
-              {moreOpen && (
-                <div className="animate-in fade-in slide-in-from-bottom-2 absolute bottom-full right-0 z-[60] mb-2 min-w-[180px] rounded-xl border border-border/40 bg-popover py-1.5 shadow-lg duration-150">
-                  {enabledPlugins.map((p) => {
-                    const Icon = PLUGIN_ICON_MAP[p.icon] || Puzzle;
-                    const isActive = activeTab === `plugin:${p.name}`;
-
-                    return (
-                      <button
-                        key={p.name}
-                        onClick={() => selectPlugin(p.name)}
-                        className={`flex w-full items-center gap-2.5 px-3.5 py-2.5 text-sm transition-colors ${isActive
-                            ? 'bg-primary/8 text-primary'
-                            : 'text-foreground hover:bg-muted/60'
-                          }`}
-                      >
-                        <Icon className="h-4 w-4 flex-shrink-0" strokeWidth={isActive ? 2.2 : 1.8} />
-                        <span className="truncate">{p.displayName}</span>
-                      </button>
-                    );
-                  })}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/src/components/auth/view/AuthLoadingScreen.tsx
+++ b/src/components/auth/view/AuthLoadingScreen.tsx
@@ -12,7 +12,7 @@ export default function AuthLoadingScreen() {
          </div>
        </div>

-        <h1 className="mb-2 text-2xl font-bold text-foreground">Claude Code UI</h1>
+        <h1 className="mb-2 text-2xl font-bold text-foreground">CloudCLI</h1>

        <div className="flex items-center justify-center space-x-2">
          {loadingDotAnimationDelays.map((delay) => (
--- a/src/components/auth/view/AuthScreenLayout.tsx
+++ b/src/components/auth/view/AuthScreenLayout.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { MessageSquare } from 'lucide-react';
+import { IS_PLATFORM } from '../../../constants/config';

 type AuthScreenLayoutProps = {
  title: string;
@@ -37,6 +38,22 @@ export default function AuthScreenLayout({
          <div className="text-center">
            <p className="text-sm text-muted-foreground">{footerText}</p>
          </div>
+
+          {!IS_PLATFORM && (
+            <div className="flex items-center justify-center gap-1.5 pt-2">
+              <svg className="h-3.5 w-3.5 text-muted-foreground/50" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
+              </svg>
+              <a
+                href="https://github.com/siteboon/claudecodeui"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-xs text-muted-foreground/50 transition-colors hover:text-muted-foreground"
+              >
+                CloudCLI is open source
+              </a>
+            </div>
+          )}
        </div>
      </div>
    </div>
--- a/src/components/auth/view/LoginForm.tsx
+++ b/src/components/auth/view/LoginForm.tsx
@@ -58,7 +58,7 @@ export default function LoginForm() {
    <AuthScreenLayout
      title={t('login.title')}
      description={t('login.description')}
-      footerText="Enter your credentials to access Claude Code UI"
+      footerText="Enter your credentials to access CloudCLI"
    >
      <form onSubmit={handleSubmit} className="space-y-4">
        <AuthInputField
--- a/src/components/auth/view/SetupForm.tsx
+++ b/src/components/auth/view/SetupForm.tsx
@@ -82,7 +82,7 @@ export default function SetupForm() {

  return (
    <AuthScreenLayout
-      title="Welcome to Claude Code UI"
+      title="Welcome to CloudCLI"
      description="Set up your account to get started"
      footerText="This is a single-user system. Only one account can be created."
      logo={<img src="/logo.svg" alt="CloudCLI" className="h-16 w-16" />}
--- a/src/components/chat/hooks/useChatComposerState.ts
+++ b/src/components/chat/hooks/useChatComposerState.ts
@@ -42,7 +42,6 @@ interface UseChatComposerStateArgs {
  geminiModel: string;
  isLoading: boolean;
  canAbortSession: boolean;
-  tokenBudget: Record<string, unknown> | null;
  sendMessage: (message: unknown) => void;
  sendByCtrlEnter?: boolean;
  onSessionActive?: (sessionId?: string | null) => void;
@@ -57,7 +56,7 @@ interface UseChatComposerStateArgs {
  rewindMessages: (count: number) => void;
  setIsLoading: (loading: boolean) => void;
  setCanAbortSession: (canAbort: boolean) => void;
-  setClaudeStatus: (status: { text: string; tokens: number; can_interrupt: boolean } | null) => void;
+  setClaudeStatus: (status: { text: string; can_interrupt: boolean } | null) => void;
  setIsUserScrolledUp: (isScrolledUp: boolean) => void;
  setPendingPermissionRequests: Dispatch<SetStateAction<PendingPermissionRequest[]>>;
 }
@@ -114,7 +113,6 @@ export function useChatComposerState({
  geminiModel,
  isLoading,
  canAbortSession,
-  tokenBudget,
  sendMessage,
  sendByCtrlEnter,
  onSessionActive,
@@ -176,12 +174,6 @@ 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() });
@@ -282,7 +274,6 @@ 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', {
@@ -339,7 +330,6 @@ export function useChatComposerState({
      provider,
      selectedProject,
      addMessage,
-      tokenBudget,
    ],
  );

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

--- a/src/components/chat/hooks/useChatRealtimeHandlers.ts
+++ b/src/components/chat/hooks/useChatRealtimeHandlers.ts
@@ -38,9 +38,7 @@ type LatestChatMessage = {
  provider?: string;
  content?: string;
  text?: string;
-  tokens?: number;
  canInterrupt?: boolean;
-  tokenBudget?: unknown;
  newSessionId?: string;
  aborted?: boolean;
  [key: string]: any;
@@ -55,8 +53,7 @@ interface UseChatRealtimeHandlersArgs {
  setCurrentSessionId: (sessionId: string | null) => void;
  setIsLoading: (loading: boolean) => void;
  setCanAbortSession: (canAbort: boolean) => void;
-  setClaudeStatus: (status: { text: string; tokens: number; can_interrupt: boolean } | null) => void;
-  setTokenBudget: (budget: Record<string, unknown> | null) => void;
+  setClaudeStatus: (status: { text: string; can_interrupt: boolean } | null) => void;
  setPendingPermissionRequests: Dispatch<SetStateAction<PendingPermissionRequest[]>>;
  pendingViewSessionRef: MutableRefObject<PendingViewSession | null>;
  streamBufferRef: MutableRefObject<string>;
@@ -85,7 +82,6 @@ export function useChatRealtimeHandlers({
  setIsLoading,
  setCanAbortSession,
  setClaudeStatus,
-  setTokenBudget,
  setPendingPermissionRequests,
  pendingViewSessionRef,
  streamBufferRef,
@@ -140,7 +136,6 @@ 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);
@@ -311,7 +306,7 @@ export function useChatRealtimeHandlers({
        });
        setIsLoading(true);
        setCanAbortSession(true);
-        setClaudeStatus({ text: 'Waiting for permission', tokens: 0, can_interrupt: true });
+        setClaudeStatus({ text: 'Waiting for permission', can_interrupt: true });
        break;
      }

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

      case 'status': {
-        if (msg.text === 'token_budget' && msg.tokenBudget) {
-          setTokenBudget(msg.tokenBudget as Record<string, unknown>);
-        } else if (msg.text) {
+        if (msg.text) {
          setClaudeStatus({
            text: msg.text,
-            tokens: msg.tokens || 0,
            can_interrupt: msg.canInterrupt !== undefined ? msg.canInterrupt : true,
          });
          setIsLoading(true);
@@ -352,7 +344,6 @@ 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,6 +1,5 @@
 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';
@@ -108,9 +107,8 @@ 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; tokens: number; can_interrupt: boolean } | null>(null);
+  const [claudeStatus, setClaudeStatus] = useState<{ text: string; can_interrupt: boolean } | null>(null);
  const [allMessagesLoaded, setAllMessagesLoaded] = useState(false);
  const [isLoadingAllMessages, setIsLoadingAllMessages] = useState(false);
  const [loadAllJustFinished, setLoadAllJustFinished] = useState(false);
@@ -319,7 +317,6 @@ export function useChatSessionState({
      messagesOffsetRef.current = 0;
      setHasMoreMessages(false);
      setTotalMessages(0);
-      setTokenBudget(null);
      lastLoadedSessionKeyRef.current = null;
      return;
    }
@@ -355,7 +352,6 @@ export function useChatSessionState({
    if (loadAllFinishedTimerRef.current) clearTimeout(loadAllFinishedTimerRef.current);

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

@@ -383,7 +379,6 @@ export function useChatSessionState({
      if (slot) {
        setHasMoreMessages(slot.hasMore);
        setTotalMessages(slot.total);
-        if (slot.tokenUsage) setTokenBudget(slot.tokenUsage as Record<string, unknown>);
      }
      setIsLoadingSessionMessages(false);
    }).catch(() => {
@@ -539,31 +534,6 @@ 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);
@@ -713,8 +683,6 @@ export function useChatSessionState({
    setCanAbortSession,
    isUserScrolledUp,
    setIsUserScrolledUp,
-    tokenBudget,
-    setTokenBudget,
    visibleMessageCount,
    visibleMessages,
    loadEarlierMessages,
--- a/src/components/chat/tools/components/ToolDiffViewer.tsx
+++ b/src/components/chat/tools/components/ToolDiffViewer.tsx
@@ -33,7 +33,12 @@ export const ToolDiffViewer: React.FC<ToolDiffViewerProps> = ({
    : 'bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400';

  const diffLines = useMemo(
-    () => createDiff(oldContent, newContent),
+    () => {
+      if (oldContent === undefined || newContent === undefined) {
+        return [];
+      }
+      return createDiff(oldContent, newContent)
+    },
    [createDiff, oldContent, newContent]
  );

--- a/src/components/chat/view/ChatInterface.tsx
+++ b/src/components/chat/view/ChatInterface.tsx
@@ -96,8 +96,6 @@ function ChatInterface({
    setCanAbortSession,
    isUserScrolledUp,
    setIsUserScrolledUp,
-    tokenBudget,
-    setTokenBudget,
    visibleMessageCount,
    visibleMessages,
    loadEarlierMessages,
@@ -183,7 +181,6 @@ function ChatInterface({
    geminiModel,
    isLoading,
    canAbortSession,
-    tokenBudget,
    sendMessage,
    sendByCtrlEnter,
    onSessionActive,
@@ -227,7 +224,6 @@ function ChatInterface({
    setIsLoading,
    setCanAbortSession,
    setClaudeStatus,
-    setTokenBudget,
    setPendingPermissionRequests,
    pendingViewSessionRef,
    streamBufferRef,
@@ -338,7 +334,6 @@ function ChatInterface({
          showRawParameters={showRawParameters}
          showThinking={showThinking}
          selectedProject={selectedProject}
-          isLoading={isLoading}
        />

        <ChatComposer
@@ -353,7 +348,6 @@ function ChatInterface({
          onModeSwitch={cyclePermissionMode}
          thinkingMode={thinkingMode}
          setThinkingMode={setThinkingMode}
-          tokenBudget={tokenBudget}
          slashCommandsCount={slashCommandsCount}
          onToggleCommandMenu={handleToggleCommandMenu}
          hasInput={Boolean(input.trim())}
--- a/src/components/chat/view/subcomponents/AssistantThinkingIndicator.tsx
+++ b/src/components/chat/view/subcomponents/AssistantThinkingIndicator.tsx
@@ -1,36 +0,0 @@
-import { SessionProvider } from '../../../../types/app';
-import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
-
-type AssistantThinkingIndicatorProps = {
-  selectedProvider: SessionProvider;
-}
-
-
-export default function AssistantThinkingIndicator({ selectedProvider }: AssistantThinkingIndicatorProps) {
-  return (
-    <div className="chat-message assistant">
-      <div className="w-full">
-        <div className="mb-2 flex items-center space-x-3">
-          <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-transparent p-1 text-sm text-white">
-            <SessionProviderLogo provider={selectedProvider} className="h-full w-full" />
-          </div>
-          <div className="text-sm font-medium text-gray-900 dark:text-white">
-            {selectedProvider === 'cursor' ? 'Cursor' : selectedProvider === 'codex' ? 'Codex' : selectedProvider === 'gemini' ? 'Gemini' : 'Claude'}
-          </div>
-        </div>
-        <div className="w-full pl-3 text-sm text-gray-500 dark:text-gray-400 sm:pl-0">
-          <div className="flex items-center space-x-1">
-            <div className="animate-pulse">.</div>
-            <div className="animate-pulse" style={{ animationDelay: '0.2s' }}>
-              .
-            </div>
-            <div className="animate-pulse" style={{ animationDelay: '0.4s' }}>
-              .
-            </div>
-            <span className="ml-2">Thinking...</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/src/components/chat/view/subcomponents/ChatComposer.tsx
+++ b/src/components/chat/view/subcomponents/ChatComposer.tsx
@@ -41,7 +41,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; tokens: number; can_interrupt: boolean } | null;
+  claudeStatus: { text: string; can_interrupt: boolean } | null;
  isLoading: boolean;
  onAbortSession: () => void;
  provider: Provider | string;
@@ -49,7 +49,6 @@ interface ChatComposerProps {
  onModeSwitch: () => void;
  thinkingMode: string;
  setThinkingMode: Dispatch<SetStateAction<string>>;
-  tokenBudget: { used?: number; total?: number } | null;
  slashCommandsCount: number;
  onToggleCommandMenu: () => void;
  hasInput: boolean;
@@ -106,7 +105,6 @@ export default function ChatComposer({
  onModeSwitch,
  thinkingMode,
  setThinkingMode,
-  tokenBudget,
  slashCommandsCount,
  onToggleCommandMenu,
  hasInput,
@@ -194,7 +192,6 @@ export default function ChatComposer({
          provider={provider}
          thinkingMode={thinkingMode}
          setThinkingMode={setThinkingMode}
-          tokenBudget={tokenBudget}
          slashCommandsCount={slashCommandsCount}
          onToggleCommandMenu={onToggleCommandMenu}
          hasInput={hasInput}
--- a/src/components/chat/view/subcomponents/ChatInputControls.tsx
+++ b/src/components/chat/view/subcomponents/ChatInputControls.tsx
@@ -2,7 +2,6 @@ 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;
@@ -10,7 +9,6 @@ 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;
@@ -26,7 +24,6 @@ export default function ChatInputControls({
  provider,
  thinkingMode,
  setThinkingMode,
-  tokenBudget,
  slashCommandsCount,
  onToggleCommandMenu,
  hasInput,
@@ -78,8 +75,6 @@ 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/ChatMessagesPane.tsx
+++ b/src/components/chat/view/subcomponents/ChatMessagesPane.tsx
@@ -6,7 +6,6 @@ import type { Project, ProjectSession, SessionProvider } from '../../../../types
 import { getIntrinsicMessageKey } from '../../utils/messageKeys';
 import MessageComponent from './MessageComponent';
 import ProviderSelectionEmptyState from './ProviderSelectionEmptyState';
-import AssistantThinkingIndicator from './AssistantThinkingIndicator';

 interface ChatMessagesPaneProps {
  scrollContainerRef: RefObject<HTMLDivElement>;
@@ -51,7 +50,6 @@ interface ChatMessagesPaneProps {
  showRawParameters?: boolean;
  showThinking?: boolean;
  selectedProject: Project;
-  isLoading: boolean;
 }

 export default function ChatMessagesPane({
@@ -97,7 +95,6 @@ export default function ChatMessagesPane({
  showRawParameters,
  showThinking,
  selectedProject,
-  isLoading,
 }: ChatMessagesPaneProps) {
  const { t } = useTranslation('chat');
  const messageKeyMapRef = useRef<WeakMap<ChatMessage, string>>(new WeakMap());
@@ -261,8 +258,6 @@ export default function ChatMessagesPane({
          })}
        </>
      )}
-
-      {isLoading && <AssistantThinkingIndicator selectedProvider={provider} />}
    </div>
  );
 }
--- a/src/components/chat/view/subcomponents/ClaudeStatus.tsx
+++ b/src/components/chat/view/subcomponents/ClaudeStatus.tsx
@@ -6,7 +6,6 @@ import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo'
 type ClaudeStatusProps = {
  status: {
    text?: string;
-    tokens?: number;
    can_interrupt?: boolean;
  } | null;
  onAbort?: () => void;
@@ -23,7 +22,6 @@ const ACTION_KEYS = [
  'claudeStatus.actions.reasoning',
 ];
 const DEFAULT_ACTION_WORDS = ['Thinking', 'Processing', 'Analyzing', 'Working', 'Computing', 'Reasoning'];
-const ANIMATION_STEPS = 40;

 const PROVIDER_LABEL_KEYS: Record<string, string> = {
  claude: 'messageTypes.claude',
@@ -32,19 +30,10 @@ const PROVIDER_LABEL_KEYS: Record<string, string> = {
  gemini: 'messageTypes.gemini',
 };

-function formatElapsedTime(totalSeconds: number, t: (key: string, options?: Record<string, unknown>) => string) {
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
-
-  if (minutes < 1) {
-    return t('claudeStatus.elapsed.seconds', { count: seconds, defaultValue: '{{count}}s' });
-  }
-
-  return t('claudeStatus.elapsed.minutesSeconds', {
-    minutes,
-    seconds,
-    defaultValue: '{{minutes}}m {{seconds}}s',
-  });
+function formatElapsedTime(totalSeconds: number) {
+  const mins = Math.floor(totalSeconds / 60);
+  const secs = totalSeconds % 60;
+  return mins < 1 ? `${secs}s` : `${mins}m ${secs}s`;
 }

 export default function ClaudeStatus({
@@ -55,141 +44,83 @@ export default function ClaudeStatus({
 }: ClaudeStatusProps) {
  const { t } = useTranslation('chat');
  const [elapsedTime, setElapsedTime] = useState(0);
-  const [animationPhase, setAnimationPhase] = useState(0);
+  const [dots, setDots] = useState('');

  useEffect(() => {
    if (!isLoading) {
      setElapsedTime(0);
      return;
    }
-
    const startTime = Date.now();
-
-    const timer = window.setInterval(() => {
-      const elapsed = Math.floor((Date.now() - startTime) / 1000);
-      setElapsedTime(elapsed);
+    const timer = setInterval(() => {
+      setElapsedTime(Math.floor((Date.now() - startTime) / 1000));
    }, 1000);
-
-    return () => window.clearInterval(timer);
-  }, [isLoading]);
-
-  useEffect(() => {
-    if (!isLoading) {
-      return;
-    }
-
-    const timer = window.setInterval(() => {
-      setAnimationPhase((previous) => (previous + 1) % ANIMATION_STEPS);
+    const dotTimer = setInterval(() => {
+      setDots((prev) => (prev.length >= 3 ? '' : prev + '.'));
    }, 500);

-    return () => window.clearInterval(timer);
+    return () => {
+      clearInterval(timer);
+      clearInterval(dotTimer);
+    };
  }, [isLoading]);

-  // Note: showThinking only controls the reasoning accordion in messages, not this processing indicator
-  if (!isLoading && !status) {
-    return null;
-  }
+  if (!isLoading && !status) return null;

-  const actionWords = ACTION_KEYS.map((key, index) => t(key, { defaultValue: DEFAULT_ACTION_WORDS[index] }));
-  const actionIndex = Math.floor(elapsedTime / 3) % actionWords.length;
-  const statusText = status?.text || actionWords[actionIndex];
-  const cleanStatusText = statusText.replace(/[.]+$/, '');
-  const canInterrupt = isLoading && status?.can_interrupt !== false;
-  const providerLabelKey = PROVIDER_LABEL_KEYS[provider];
-  const providerLabel = providerLabelKey
-    ? t(providerLabelKey)
-    : t('claudeStatus.providers.assistant', { defaultValue: 'Assistant' });
-  const animatedDots = '.'.repeat((animationPhase % 3) + 1);
-  const elapsedLabel =
-    elapsedTime > 0
-      ? t('claudeStatus.elapsed.label', {
-          time: formatElapsedTime(elapsedTime, t),
-          defaultValue: '{{time}} elapsed',
-        })
-      : t('claudeStatus.elapsed.startingNow', { defaultValue: 'Starting now' });
+  const actionWords = ACTION_KEYS.map((key, i) => t(key, { defaultValue: DEFAULT_ACTION_WORDS[i] }));
+  const statusText = (status?.text || actionWords[Math.floor(elapsedTime / 3) % actionWords.length]).replace(/[.]+$/, '');
+
+  const providerLabel = t(PROVIDER_LABEL_KEYS[provider] || 'claudeStatus.providers.assistant', { defaultValue: 'Assistant' });

  return (
-    <div className="animate-in slide-in-from-bottom mb-3 w-full duration-300 sm:mb-6">
-      <div className="relative mx-auto max-w-4xl overflow-hidden rounded-2xl border border-border/70 bg-card/90 shadow-md backdrop-blur-md">
-        <div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-primary/10 via-transparent to-sky-500/10 dark:from-primary/20 dark:to-sky-400/20" />
+    <div className="animate-in fade-in slide-in-from-bottom-2 mb-3 w-full duration-500">
+      <div className="mx-auto flex max-w-4xl items-center justify-between gap-3 overflow-hidden rounded-full border border-border/50 bg-slate-100 px-3 py-1.5 shadow-sm backdrop-blur-md dark:bg-slate-900">

-        <div className="relative px-3 py-3 sm:px-4 sm:py-3.5">
-          <div className="flex flex-col gap-2.5 sm:flex-row sm:items-center sm:justify-between">
-            <div className="flex min-w-0 items-start gap-3" role="status" aria-live="polite">
-              <div className="relative mt-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl border border-primary/25 bg-primary/10">
-                <SessionProviderLogo provider={provider} className="h-5 w-5" />
-                <span className="absolute -right-0.5 -top-0.5 flex h-2.5 w-2.5">
-                  {isLoading && (
-                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400/70" />
-                  )}
-                  <span
-                    className={cn(
-                      'relative inline-flex h-2.5 w-2.5 rounded-full',
-                      isLoading ? 'bg-emerald-400' : 'bg-amber-400',
-                    )}
-                  />
-                </span>
-              </div>
-
-              <div className="min-w-0">
-                <div className="mb-0.5 flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.15em] text-muted-foreground">
-                  <span>{providerLabel}</span>
-                  <span
-                    className={cn(
-                      'rounded-full px-2 py-0.5 text-[9px] tracking-[0.14em]',
-                      isLoading
-                        ? 'bg-emerald-500/15 text-emerald-500 dark:text-emerald-400'
-                        : 'bg-amber-500/15 text-amber-600 dark:text-amber-400',
-                    )}
-                  >
-                    {isLoading
-                      ? t('claudeStatus.state.live', { defaultValue: 'Live' })
-                      : t('claudeStatus.state.paused', { defaultValue: 'Paused' })}
-                  </span>
-                </div>
-
-                <p className="truncate text-sm font-semibold text-foreground sm:text-[15px]">
-                  {cleanStatusText}
-                  {isLoading && (
-                    <span aria-hidden="true" className="text-primary">
-                      {animatedDots}
-                    </span>
-                  )}
-                </p>
-
-                <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px] text-muted-foreground sm:text-xs">
-                  <span
-                    aria-hidden="true"
-                    className="-ml-2 inline-flex items-center rounded-full border border-border/70 bg-background/60 px-2 py-0.5"
-                  >
-                    {elapsedLabel}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            {canInterrupt && onAbort && (
-              <div className="w-full sm:w-auto sm:text-right">
-                <button
-                  type="button"
-                  onClick={onAbort}
-                  className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-destructive px-3.5 py-2 text-sm font-semibold text-destructive-foreground shadow-sm ring-1 ring-destructive/40 transition-opacity hover:opacity-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/70 active:opacity-90 sm:w-auto"
-                >
-                  <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                  <span>{t('claudeStatus.controls.stopGeneration', { defaultValue: 'Stop Generation' })}</span>
-                  <span className="rounded-md bg-black/20 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-destructive-foreground/95">
-                    Esc
-                  </span>
-                </button>
-
-                <p className="mt-1 hidden text-[11px] text-muted-foreground sm:block">
-                  {t('claudeStatus.controls.pressEscToStop', { defaultValue: 'Press Esc anytime to stop' })}
-                </p>
-              </div>
+        {/* Left Side: Identity & Status */}
+        <div className="flex min-w-0 items-center gap-2.5">
+          <div className="relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/20 ring-1 ring-primary/10">
+            <SessionProviderLogo provider={provider} className="h-3.5 w-3.5" />
+            {isLoading && (
+              <span className="absolute inset-0 animate-pulse rounded-full ring-2 ring-emerald-500/20" />
            )}
          </div>
+
+          <div className="flex min-w-0 flex-col sm:flex-row sm:items-center sm:gap-2">
+            <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70">
+              {providerLabel}
+            </span>
+            <div className="flex items-center gap-1.5">
+              <span className={cn("h-1.5 w-1.5 rounded-full", isLoading ? "bg-emerald-500 animate-pulse" : "bg-amber-500")} />
+              <p className="truncate text-xs font-medium text-foreground">
+                {statusText}<span className="inline-block w-4 text-primary">{isLoading ? dots : ''}</span>
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Right Side: Metrics & Actions */}
+        <div className="flex items-center gap-2">
+          {isLoading && status?.can_interrupt !== false && onAbort && (
+            <>
+              <div className="hidden items-center rounded-md bg-muted/50 px-2 py-0.5 text-[10px] font-medium tabular-nums text-muted-foreground sm:flex">
+                {formatElapsedTime(elapsedTime)}
+              </div>
+
+              <button
+                type="button"
+                onClick={onAbort}
+                className="group flex items-center gap-1.5 rounded-full bg-destructive/10 px-2.5 py-1 text-[10px] font-bold text-destructive transition-all hover:bg-destructive hover:text-destructive-foreground"
+              >
+                <svg className="h-3 w-3 fill-current" viewBox="0 0 24 24">
+                  <path d="M6 6h12v12H6z" />
+                </svg>
+                <span className="hidden sm:inline">STOP</span>
+                <kbd className="hidden rounded bg-black/10 px-1 text-[9px] group-hover:bg-white/20 sm:block">
+                  ESC
+                </kbd>
+              </button>
+            </>
+          )}
        </div>
      </div>
    </div>
--- a/src/components/chat/view/subcomponents/TokenUsagePie.tsx
+++ b/src/components/chat/view/subcomponents/TokenUsagePie.tsx
@@ -1,54 +0,0 @@
-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/file-tree/hooks/useFileTreeOperations.ts
+++ b/src/components/file-tree/hooks/useFileTreeOperations.ts
@@ -248,6 +248,20 @@ export function useFileTreeOperations({
    showToast(t('fileTree.toast.pathCopied', 'Path copied to clipboard'), 'success');
  }, [showToast, t]);

+  const triggerBrowserDownload = useCallback((blob: Blob, fileName: string) => {
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+
+    anchor.href = url;
+    anchor.download = fileName;
+
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+
+    URL.revokeObjectURL(url);
+  }, []);
+
  // Download file or folder
  const handleDownload = useCallback(async (item: FileTreeNode) => {
    if (!selectedProject) return;
@@ -272,28 +286,16 @@ export function useFileTreeOperations({
  const downloadSingleFile = useCallback(async (item: FileTreeNode) => {
    if (!selectedProject) return;

-    const response = await api.readFile(selectedProject.name, item.path);
+    // Use the binary streaming endpoint so downloads preserve raw bytes.
+    const response = await api.readFileBlob(selectedProject.name, item.path);

    if (!response.ok) {
      throw new Error('Failed to download file');
    }

-    const data = await response.json();
-    const content = data.content;
-
-    const blob = new Blob([content], { type: 'text/plain' });
-    const url = URL.createObjectURL(blob);
-    const anchor = document.createElement('a');
-
-    anchor.href = url;
-    anchor.download = item.name;
-
-    document.body.appendChild(anchor);
-    anchor.click();
-    document.body.removeChild(anchor);
-
-    URL.revokeObjectURL(url);
-  }, [selectedProject]);
+    const blob = await response.blob();
+    triggerBrowserDownload(blob, item.name);
+  }, [selectedProject, triggerBrowserDownload]);

  // Download folder as ZIP
  const downloadFolderAsZip = useCallback(async (folder: FileTreeNode) => {
@@ -306,12 +308,14 @@ export function useFileTreeOperations({
      const fullPath = currentPath ? `${currentPath}/${node.name}` : node.name;

      if (node.type === 'file') {
-        // Fetch file content
-        const response = await api.readFile(selectedProject.name, node.path);
-        if (response.ok) {
-          const data = await response.json();
-          zip.file(fullPath, data.content);
+        const response = await api.readFileBlob(selectedProject.name, node.path);
+        if (!response.ok) {
+          throw new Error(`Failed to download "${node.name}" for ZIP export`);
        }
+
+        // Store raw bytes in the archive so binary files stay intact.
+        const fileBytes = await response.arrayBuffer();
+        zip.file(fullPath, fileBytes);
      } else if (node.type === 'directory' && node.children) {
        // Recursively process children
        for (const child of node.children) {
@@ -329,20 +333,10 @@ export function useFileTreeOperations({

    // Generate ZIP file
    const zipBlob = await zip.generateAsync({ type: 'blob' });
-    const url = URL.createObjectURL(zipBlob);
-    const anchor = document.createElement('a');
-
-    anchor.href = url;
-    anchor.download = `${folder.name}.zip`;
-
-    document.body.appendChild(anchor);
-    anchor.click();
-    document.body.removeChild(anchor);
-
-    URL.revokeObjectURL(url);
+    triggerBrowserDownload(zipBlob, `${folder.name}.zip`);

    showToast(t('fileTree.toast.folderDownloaded', 'Folder downloaded as ZIP'), 'success');
-  }, [selectedProject, showToast, t]);
+  }, [selectedProject, showToast, t, triggerBrowserDownload]);

  return {
    // Rename operations
--- a/src/components/git-panel/view/branches/BranchesView.tsx
+++ b/src/components/git-panel/view/branches/BranchesView.tsx
@@ -167,7 +167,7 @@ export default function BranchesView({
  }

  return (
-    <div className={`flex flex-1 flex-col overflow-hidden ${isMobile ? 'pb-mobile-nav' : ''}`}>
+    <div className="flex flex-1 flex-col overflow-hidden">
      {/* Create branch button */}
      <div className="flex items-center justify-between border-b border-border/40 px-4 py-2.5">
        <span className="text-sm text-muted-foreground">
--- a/src/components/git-panel/view/changes/ChangesView.tsx
+++ b/src/components/git-panel/view/changes/ChangesView.tsx
@@ -151,7 +151,7 @@ export default function ChangesView({

      {!gitStatus?.error && <FileStatusLegend isMobile={isMobile} />}

-      <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
+      <div className="flex-1 overflow-y-auto">
        {isLoading ? (
          <div className="flex h-32 items-center justify-center">
            <RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
--- a/src/components/git-panel/view/history/HistoryView.tsx
+++ b/src/components/git-panel/view/history/HistoryView.tsx
@@ -47,7 +47,7 @@ export default function HistoryView({
  );

  return (
-    <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
+    <div className="flex-1 overflow-y-auto">
      {isLoading ? (
        <div className="flex h-32 items-center justify-center">
          <RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
--- a/src/components/plugins/view/PluginSettingsTab.tsx
+++ b/src/components/plugins/view/PluginSettingsTab.tsx
@@ -6,6 +6,7 @@ import type { Plugin } from '../../../contexts/PluginsContext';
 import PluginIcon from './PluginIcon';

 const STARTER_PLUGIN_URL = 'https://github.com/cloudcli-ai/cloudcli-plugin-starter';
+const TERMINAL_PLUGIN_URL = 'https://github.com/cloudcli-ai/cloudcli-plugin-terminal';

 /* ─── Toggle Switch ─────────────────────────────────────────────────────── */
 function ToggleSwitch({ checked, onChange, ariaLabel }: { checked: boolean; onChange: (v: boolean) => void; ariaLabel: string }) {
@@ -264,6 +265,67 @@ function StarterPluginCard({ onInstall, installing }: { onInstall: () => void; i
  );
 }

+/* ─── Terminal Plugin Card ──────────────────────────────────────────────── */
+function TerminalPluginCard({ onInstall, installing }: { onInstall: () => void; installing: boolean }) {
+  const { t } = useTranslation('settings');
+
+  return (
+    <div className="relative flex overflow-hidden rounded-lg border border-dashed border-border bg-card transition-all duration-200 hover:border-blue-400 dark:hover:border-blue-500">
+      <div className="w-[3px] flex-shrink-0 bg-blue-500/30" />
+      <div className="min-w-0 flex-1 p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-2.5">
+            <div className="h-5 w-5 flex-shrink-0 text-blue-500">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
+                <rect x="3" y="3" width="18" height="18" rx="2"/>
+                <path d="M7 8l4 4-4 4"/>
+                <line x1="13" y1="16" x2="17" y2="16"/>
+              </svg>
+            </div>
+            <div className="min-w-0">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="text-sm font-semibold leading-none text-foreground">
+                  {t('pluginSettings.terminalPlugin.name')}
+                </span>
+                <span className="rounded bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-600 dark:bg-blue-950/50 dark:text-blue-400">
+                  {t('pluginSettings.terminalPlugin.badge')}
+                </span>
+                <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
+                  {t('pluginSettings.tab')}
+                </span>
+              </div>
+              <p className="mt-1 text-sm leading-snug text-muted-foreground">
+                {t('pluginSettings.terminalPlugin.description')}
+              </p>
+              <a
+                href={TERMINAL_PLUGIN_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground/60 transition-colors hover:text-foreground"
+              >
+                <GitBranch className="h-3 w-3" />
+                cloudcli-ai/cloudcli-plugin-terminal
+              </a>
+            </div>
+          </div>
+          <button
+            onClick={onInstall}
+            disabled={installing}
+            className="flex flex-shrink-0 items-center gap-1.5 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+          >
+            {installing ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            ) : (
+              <Download className="h-3.5 w-3.5" />
+            )}
+            {installing ? t('pluginSettings.installing') : t('pluginSettings.terminalPlugin.install')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 /* ─── Main Component ────────────────────────────────────────────────────── */
 export default function PluginSettingsTab() {
  const { t } = useTranslation('settings');
@@ -273,6 +335,7 @@ export default function PluginSettingsTab() {
  const [gitUrl, setGitUrl] = useState('');
  const [installing, setInstalling] = useState(false);
  const [installingStarter, setInstallingStarter] = useState(false);
+  const [installingTerminal, setInstallingTerminal] = useState(false);
  const [installError, setInstallError] = useState<string | null>(null);
  const [confirmUninstall, setConfirmUninstall] = useState<string | null>(null);
  const [updatingPlugins, setUpdatingPlugins] = useState<Set<string>>(new Set());
@@ -311,6 +374,16 @@ export default function PluginSettingsTab() {
    setInstallingStarter(false);
  };

+  const handleInstallTerminal = async () => {
+    setInstallingTerminal(true);
+    setInstallError(null);
+    const result = await installPlugin(TERMINAL_PLUGIN_URL);
+    if (!result.success) {
+      setInstallError(result.error || t('pluginSettings.installFailed'));
+    }
+    setInstallingTerminal(false);
+  };
+
  const handleUninstall = async (name: string) => {
    if (confirmUninstall !== name) {
      setConfirmUninstall(name);
@@ -326,6 +399,7 @@ export default function PluginSettingsTab() {
  };

  const hasStarterInstalled = plugins.some((p) => p.name === 'project-stats');
+  const hasTerminalInstalled = plugins.some((p) => p.name === 'web-terminal');

  return (
    <div className="space-y-6">
@@ -382,9 +456,16 @@ export default function PluginSettingsTab() {
        </span>
      </p>

-      {/* Starter plugin suggestion — above the list */}
-      {!loading && !hasStarterInstalled && (
-        <StarterPluginCard onInstall={handleInstallStarter} installing={installingStarter} />
+      {/* Official plugin suggestions — above the list */}
+      {!loading && (!hasStarterInstalled || !hasTerminalInstalled) && (
+        <div className="space-y-2">
+          {!hasStarterInstalled && (
+            <StarterPluginCard onInstall={handleInstallStarter} installing={installingStarter} />
+          )}
+          {!hasTerminalInstalled && (
+            <TerminalPluginCard onInstall={handleInstallTerminal} installing={installingTerminal} />
+          )}
+        </div>
      )}

      {/* Plugin List */}
@@ -423,33 +504,30 @@ export default function PluginSettingsTab() {
        </div>
      )}

-      {/* Build your own */}
-      <div className="flex items-center justify-between gap-4 border-t border-border/50 pt-2">
-        <div className="flex min-w-0 items-center gap-2">
-          <BookOpen className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground/40" />
-          <span className="text-xs text-muted-foreground/60">
-            {t('pluginSettings.buildYourOwn')}
-          </span>
-        </div>
-        <div className="flex flex-shrink-0 items-center gap-3">
-          <a
-            href={STARTER_PLUGIN_URL}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 text-xs text-muted-foreground/60 transition-colors hover:text-foreground"
-          >
-            {t('pluginSettings.starter')} <ExternalLink className="h-2.5 w-2.5" />
-          </a>
-          <span className="text-muted-foreground/20">·</span>
-          <a
-            href="https://cloudcli.ai/docs/plugin-overview"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 text-xs text-muted-foreground/60 transition-colors hover:text-foreground"
-          >
-            {t('pluginSettings.docs')} <ExternalLink className="h-2.5 w-2.5" />
-          </a>
-        </div>
+      {/* Starter plugin */}
+      <div className="flex items-center justify-center gap-3 border-t border-border/50 pt-2">
+        <BookOpen className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground/40" />
+        <span className="text-xs text-muted-foreground/60">
+          {t('pluginSettings.starterPluginLabel')}
+        </span>
+        <span className="text-muted-foreground/20">·</span>
+        <a
+          href={STARTER_PLUGIN_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1 text-xs text-muted-foreground/60 transition-colors hover:text-foreground"
+        >
+          {t('pluginSettings.starter')} <ExternalLink className="h-2.5 w-2.5" />
+        </a>
+        <span className="text-muted-foreground/20">·</span>
+        <a
+          href="https://cloudcli.ai/docs/plugin-overview"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1 text-xs text-muted-foreground/60 transition-colors hover:text-foreground"
+        >
+          {t('pluginSettings.docs')} <ExternalLink className="h-2.5 w-2.5" />
+        </a>
      </div>
    </div>
  );
--- a/src/components/quick-settings-panel/view/QuickSettingsContent.tsx
+++ b/src/components/quick-settings-panel/view/QuickSettingsContent.tsx
@@ -19,14 +19,12 @@ import QuickSettingsWhisperSection from './QuickSettingsWhisperSection';

 type QuickSettingsContentProps = {
  isDarkMode: boolean;
-  isMobile: boolean;
  preferences: QuickSettingsPreferences;
  onPreferenceChange: (key: PreferenceToggleKey, value: boolean) => void;
 };

 export default function QuickSettingsContent({
  isDarkMode,
-  isMobile,
  preferences,
  onPreferenceChange,
 }: QuickSettingsContentProps) {
@@ -45,7 +43,7 @@ export default function QuickSettingsContent({
  );

  return (
-    <div className={`flex-1 space-y-6 overflow-y-auto overflow-x-hidden bg-background p-4 ${isMobile ? 'pb-mobile-nav' : ''}`}>
+    <div className="flex-1 space-y-6 overflow-y-auto overflow-x-hidden bg-background p-4">
      <QuickSettingsSection title={t('quickSettings.sections.appearance')}>
        <div className={SETTING_ROW_CLASS}>
          <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
--- a/src/components/quick-settings-panel/view/QuickSettingsPanelView.tsx
+++ b/src/components/quick-settings-panel/view/QuickSettingsPanelView.tsx
@@ -73,7 +73,6 @@ export default function QuickSettingsPanelView() {
          <QuickSettingsPanelHeader />
          <QuickSettingsContent
            isDarkMode={isDarkMode}
-            isMobile={isMobile}
            preferences={quickSettingsPreferences}
            onPreferenceChange={handlePreferenceChange}
          />
--- a/src/components/settings/types/types.ts
+++ b/src/components/settings/types/types.ts
@@ -1,6 +1,6 @@
 import type { Dispatch, SetStateAction } from 'react';

-export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | 'notifications' | 'plugins';
+export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | 'notifications' | 'plugins' | 'about';
 export type AgentProvider = 'claude' | 'cursor' | 'codex' | 'gemini';
 export type AgentCategory = 'account' | 'permissions' | 'mcp';
 export type ProjectSortOrder = 'name' | 'date';
--- a/src/components/settings/view/PremiumFeatureCard.tsx
+++ b/src/components/settings/view/PremiumFeatureCard.tsx
@@ -0,0 +1,46 @@
+import { ExternalLink, Lock } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+const CLOUDCLI_URL = 'https://cloudcli.ai';
+
+type PremiumFeatureCardProps = {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  ctaText?: string;
+};
+
+export default function PremiumFeatureCard({
+  icon,
+  title,
+  description,
+  ctaText = 'Available with CloudCLI Pro',
+}: PremiumFeatureCardProps) {
+  return (
+    <div className="rounded-xl border border-dashed border-border/60 bg-muted/20 p-5">
+      <div className="flex items-start gap-3">
+        <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-muted/60 text-muted-foreground">
+          {icon}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <h4 className="text-sm font-medium text-foreground">{title}</h4>
+            <Lock className="h-3 w-3 text-muted-foreground/60" />
+          </div>
+          <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+            {description}
+          </p>
+          <a
+            href={CLOUDCLI_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-3 inline-flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:underline"
+          >
+            {ctaText}
+            <ExternalLink className="h-3 w-3" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/settings/view/Settings.tsx
+++ b/src/components/settings/view/Settings.tsx
@@ -12,6 +12,7 @@ import GitSettingsTab from '../view/tabs/git-settings/GitSettingsTab';
 import NotificationsSettingsTab from '../view/tabs/NotificationsSettingsTab';
 import TasksSettingsTab from '../view/tabs/tasks-settings/TasksSettingsTab';
 import PluginSettingsTab from '../../plugins/view/PluginSettingsTab';
+import AboutTab from '../view/tabs/AboutTab';
 import { useSettingsController } from '../hooks/useSettingsController';
 import { useWebPush } from '../../../hooks/useWebPush';
 import type { SettingsProps } from '../types/types';
@@ -206,6 +207,8 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
              {activeTab === 'api' && <CredentialsSettingsTab />}

              {activeTab === 'plugins' && <PluginSettingsTab />}
+
+              {activeTab === 'about' && <AboutTab />}
            </div>
          </main>
        </div>
--- a/src/components/settings/view/SettingsMainTabs.tsx
+++ b/src/components/settings/view/SettingsMainTabs.tsx
@@ -1,4 +1,4 @@
-import { GitBranch, Key, Puzzle } from 'lucide-react';
+import { GitBranch, Info, Key, Puzzle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import type { SettingsMainTab } from '../types/types';

@@ -22,6 +22,7 @@ const TAB_CONFIG: MainTabConfig[] = [
  { id: 'tasks', labelKey: 'mainTabs.tasks' },
  { id: 'notifications', labelKey: 'mainTabs.notifications' },
  { id: 'plugins', labelKey: 'mainTabs.plugins', icon: Puzzle },
+  { id: 'about', labelKey: 'mainTabs.about', icon: Info },
 ];

 export default function SettingsMainTabs({ activeTab, onChange }: SettingsMainTabsProps) {
--- a/src/components/settings/view/SettingsSidebar.tsx
+++ b/src/components/settings/view/SettingsSidebar.tsx
@@ -1,4 +1,4 @@
-import { Bell, Bot, GitBranch, Key, ListChecks, Palette, Puzzle } from 'lucide-react';
+import { Bell, Bot, GitBranch, Info, Key, ListChecks, Palette, Puzzle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { cn } from '../../../lib/utils';
 import { PillBar, Pill } from '../../../shared/view/ui';
@@ -23,6 +23,7 @@ const NAV_ITEMS: NavItem[] = [
  { id: 'tasks', labelKey: 'mainTabs.tasks', icon: ListChecks },
  { id: 'plugins', labelKey: 'mainTabs.plugins', icon: Puzzle },
  { id: 'notifications', labelKey: 'mainTabs.notifications', icon: Bell },
+  { id: 'about', labelKey: 'mainTabs.about', icon: Info },
 ];

 export default function SettingsSidebar({ activeTab, onChange }: SettingsSidebarProps) {
--- a/src/components/settings/view/tabs/AboutTab.tsx
+++ b/src/components/settings/view/tabs/AboutTab.tsx
@@ -0,0 +1,166 @@
+import { ExternalLink, MessageSquare, Star } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { IS_PLATFORM } from '../../../../constants/config';
+import { useVersionCheck } from '../../../../hooks/useVersionCheck';
+import PremiumFeatureCard from '../PremiumFeatureCard';
+import { Cloud, Users } from 'lucide-react';
+
+const GITHUB_REPO_URL = 'https://github.com/siteboon/claudecodeui';
+const DISCORD_URL = 'https://discord.gg/buxwujPNRE';
+const DOCS_URL = 'https://cloudcli.ai/docs/plugin-overview';
+const CLOUDCLI_URL = 'https://cloudcli.ai';
+
+function GitHubIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
+    </svg>
+  );
+}
+
+function DiscordIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+    </svg>
+  );
+}
+
+export default function AboutTab() {
+  const { t } = useTranslation('settings');
+  const { updateAvailable, latestVersion, currentVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui');
+  const releasesUrl = releaseInfo?.htmlUrl || `${GITHUB_REPO_URL}/releases`;
+
+  return (
+    <div className="space-y-6">
+      {/* Logo + name + version */}
+      <div className="flex items-center gap-3">
+        <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-primary/90 shadow-sm">
+          <MessageSquare className="h-5 w-5 text-primary-foreground" />
+        </div>
+        <div>
+          <div className="flex items-center gap-2">
+            <span className="text-base font-semibold text-foreground">CloudCLI</span>
+            <a
+              href={releasesUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground"
+            >
+              v{currentVersion}
+            </a>
+            {updateAvailable && latestVersion && (
+              <a
+                href={releasesUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1 rounded-full bg-green-500/10 px-2 py-0.5 text-[10px] font-medium text-green-600 transition-colors hover:bg-green-500/20 dark:text-green-400"
+              >
+                {t('apiKeys.version.updateAvailable', { version: latestVersion })}
+                <ExternalLink className="h-2.5 w-2.5" />
+              </a>
+            )}
+          </div>
+          <p className="mt-0.5 text-sm text-muted-foreground">
+            Open-source AI coding assistant interface
+          </p>
+        </div>
+      </div>
+
+      {/* Star on GitHub button */}
+      <a
+        href={GITHUB_REPO_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-flex items-center gap-2 rounded-lg border border-border/60 bg-background px-3.5 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
+      >
+        <GitHubIcon className="h-4 w-4" />
+        <Star className="h-3.5 w-3.5" />
+        <span>Star on GitHub</span>
+      </a>
+
+      {/* Links */}
+      <div className="flex flex-wrap gap-4 text-sm">
+        <a
+          href={GITHUB_REPO_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <GitHubIcon className="h-4 w-4" />
+          GitHub
+        </a>
+        <a
+          href={DISCORD_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <DiscordIcon className="h-4 w-4" />
+          Discord
+        </a>
+        <a
+          href={DOCS_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <ExternalLink className="h-3.5 w-3.5" />
+          Docs
+        </a>
+        <a
+          href={CLOUDCLI_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <ExternalLink className="h-3.5 w-3.5" />
+          cloudcli.ai
+        </a>
+      </div>
+
+      {/* Hosted CTA (OSS mode only) */}
+      {!IS_PLATFORM && (
+        <div className="rounded-xl border border-primary/10 bg-primary/5 p-4">
+          <h4 className="text-sm font-medium text-foreground">Try CloudCLI Hosted</h4>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Team collaboration, shared MCP configs, settings sync across environments, and managed infrastructure.
+          </p>
+          <a
+            href={CLOUDCLI_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:underline"
+          >
+            Learn more
+            <ExternalLink className="h-3 w-3" />
+          </a>
+        </div>
+      )}
+
+      {/* Premium feature placeholders (OSS mode only) */}
+      {!IS_PLATFORM && (
+        <div className="space-y-4 border-t border-border/50 pt-6">
+          <h3 className="text-sm font-medium text-foreground">CloudCLI Pro Features</h3>
+          <PremiumFeatureCard
+            icon={<Cloud className="h-5 w-5" />}
+            title="Sync Settings"
+            description="Keep your preferences, MCP configs, and theme in sync across all your environments."
+          />
+          <PremiumFeatureCard
+            icon={<Users className="h-5 w-5" />}
+            title="Team Management"
+            description="Multiple users, role-based access, and shared projects for your team."
+          />
+        </div>
+      )}
+
+      {/* License */}
+      <div className="border-t border-border/50 pt-4">
+        <p className="text-xs text-muted-foreground/60">
+          Licensed under AGPL-3.0
+        </p>
+      </div>
+    </div>
+  );
+}
--- a/src/components/settings/view/tabs/agents-settings/sections/content/McpServersContent.tsx
+++ b/src/components/settings/view/tabs/agents-settings/sections/content/McpServersContent.tsx
@@ -1,6 +1,8 @@
-import { Edit3, Globe, Plus, Server, Terminal, Trash2, Zap } from 'lucide-react';
+import { Edit3, Globe, Plus, Server, Terminal, Trash2, Users, Zap } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Badge, Button } from '../../../../../../../shared/view/ui';
+import { IS_PLATFORM } from '../../../../../../../constants/config';
+import PremiumFeatureCard from '../../../../PremiumFeatureCard';
 import type { McpServer, McpToolsResult, McpTestResult } from '../../../../../types/types';

 const getTransportIcon = (type: string | undefined) => {
@@ -179,6 +181,14 @@ function ClaudeMcpServers({
          <div className="py-8 text-center text-muted-foreground">{t('mcpServers.empty')}</div>
        )}
      </div>
+
+      {!IS_PLATFORM && (
+        <PremiumFeatureCard
+          icon={<Users className="h-5 w-5" />}
+          title="Team MCP Configs"
+          description="Share MCP server configurations across your team. Everyone stays in sync automatically."
+        />
+      )}
    </div>
  );
 }
--- a/src/components/settings/view/tabs/api-settings/CredentialsSettingsTab.tsx
+++ b/src/components/settings/view/tabs/api-settings/CredentialsSettingsTab.tsx
@@ -1,14 +1,11 @@
 import { useTranslation } from 'react-i18next';
-import { useVersionCheck } from '../../../../../hooks/useVersionCheck';
 import { useCredentialsSettings } from '../../../hooks/useCredentialsSettings';
 import ApiKeysSection from './sections/ApiKeysSection';
 import GithubCredentialsSection from './sections/GithubCredentialsSection';
 import NewApiKeyAlert from './sections/NewApiKeyAlert';
-import VersionInfoSection from './sections/VersionInfoSection';

 export default function CredentialsSettingsTab() {
  const { t } = useTranslation('settings');
-  const { updateAvailable, latestVersion, currentVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui');
  const {
    apiKeys,
    githubCredentials,
@@ -89,12 +86,6 @@ export default function CredentialsSettingsTab() {
        onDeleteGithubCredential={deleteGithubCredential}
      />

-      <VersionInfoSection
-        currentVersion={currentVersion}
-        updateAvailable={updateAvailable}
-        latestVersion={latestVersion}
-        releaseInfo={releaseInfo}
-      />
    </div>
  );
 }
--- a/src/components/settings/view/tabs/api-settings/sections/VersionInfoSection.tsx
+++ b/src/components/settings/view/tabs/api-settings/sections/VersionInfoSection.tsx
@@ -1,7 +1,29 @@
-import { ExternalLink } from 'lucide-react';
+import { ExternalLink, Star, MessageSquare } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { IS_PLATFORM } from '../../../../../../constants/config';
 import type { ReleaseInfo } from '../../../../../../types/sharedTypes';

+const GITHUB_REPO_URL = 'https://github.com/siteboon/claudecodeui';
+const DISCORD_URL = 'https://discord.gg/buxwujPNRE';
+const DOCS_URL = 'https://cloudcli.ai/docs/plugin-overview';
+const CLOUDCLI_URL = 'https://cloudcli.ai';
+
+function GitHubIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
+    </svg>
+  );
+}
+
+function DiscordIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+    </svg>
+  );
+}
+
 type VersionInfoSectionProps = {
  currentVersion: string;
  updateAvailable: boolean;
@@ -16,29 +38,115 @@ export default function VersionInfoSection({
  releaseInfo,
 }: VersionInfoSectionProps) {
  const { t } = useTranslation('settings');
-  const releasesUrl = releaseInfo?.htmlUrl || 'https://github.com/siteboon/claudecodeui/releases';
+  const releasesUrl = releaseInfo?.htmlUrl || `${GITHUB_REPO_URL}/releases`;

  return (
    <div className="border-t border-border/50 pt-6">
-      <div className="flex items-center justify-between text-xs italic text-muted-foreground/60">
+      {/* About CloudCLI */}
+      <div className="space-y-4">
+        {/* Logo + name + version */}
+        <div className="flex items-center gap-3">
+          <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-primary/90 shadow-sm">
+            <MessageSquare className="h-4.5 w-4.5 text-primary-foreground" />
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-semibold text-foreground">CloudCLI</span>
+              <a
+                href={releasesUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:text-foreground"
+              >
+                v{currentVersion}
+              </a>
+              {updateAvailable && latestVersion && (
+                <a
+                  href={releasesUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-1 rounded-full bg-green-500/10 px-2 py-0.5 text-[10px] font-medium text-green-600 transition-colors hover:bg-green-500/20 dark:text-green-400"
+                >
+                  {t('apiKeys.version.updateAvailable', { version: latestVersion })}
+                  <ExternalLink className="h-2.5 w-2.5" />
+                </a>
+              )}
+            </div>
+            <p className="mt-0.5 text-xs text-muted-foreground">
+              Open-source AI coding assistant interface
+            </p>
+          </div>
+        </div>
+
+        {/* Star on GitHub button */}
        <a
-          href={releasesUrl}
+          href={GITHUB_REPO_URL}
          target="_blank"
          rel="noopener noreferrer"
-          className="transition-colors hover:text-muted-foreground"
+          className="inline-flex items-center gap-2 rounded-lg border border-border/60 bg-background px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
        >
-          v{currentVersion}
+          <GitHubIcon className="h-4 w-4" />
+          <Star className="h-3.5 w-3.5" />
+          <span>Star on GitHub</span>
        </a>
-        {updateAvailable && latestVersion && (
+
+        {/* Links */}
+        <div className="flex flex-wrap gap-3 text-xs">
          <a
-            href={releasesUrl}
+            href={GITHUB_REPO_URL}
            target="_blank"
            rel="noopener noreferrer"
-            className="flex items-center gap-1.5 rounded-full bg-green-500/10 px-2 py-0.5 font-medium not-italic text-green-600 transition-colors hover:bg-green-500/20 dark:text-green-400"
+            className="flex items-center gap-1 text-muted-foreground transition-colors hover:text-foreground"
          >
-            <span className="text-[10px]">{t('apiKeys.version.updateAvailable', { version: latestVersion })}</span>
-            <ExternalLink className="h-2.5 w-2.5" />
+            <GitHubIcon className="h-3.5 w-3.5" />
+            GitHub
          </a>
+          <a
+            href={DISCORD_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1 text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <DiscordIcon className="h-3.5 w-3.5" />
+            Discord
+          </a>
+          <a
+            href={DOCS_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1 text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <ExternalLink className="h-3 w-3" />
+            Docs
+          </a>
+          <a
+            href={CLOUDCLI_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1 text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <ExternalLink className="h-3 w-3" />
+            cloudcli.ai
+          </a>
+        </div>
+
+        {/* Hosted CTA (OSS mode only) */}
+        {!IS_PLATFORM && (
+          <div className="rounded-xl border border-primary/10 bg-primary/5 p-4">
+            <h4 className="text-sm font-medium text-foreground">Try CloudCLI Hosted</h4>
+            <p className="mt-1 text-xs text-muted-foreground">
+              Team collaboration, shared MCP configs, settings sync across environments, and managed infrastructure.
+            </p>
+            <a
+              href={CLOUDCLI_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:underline"
+            >
+              Learn more
+              <ExternalLink className="h-3 w-3" />
+            </a>
+          </div>
        )}
      </div>
    </div>
--- a/src/components/shell/view/subcomponents/TerminalShortcutsPanel.tsx
+++ b/src/components/shell/view/subcomponents/TerminalShortcutsPanel.tsx
@@ -55,7 +55,7 @@ export default function TerminalShortcutsPanel({
  wsRef,
  terminalRef,
  isConnected,
-  bottomOffset = 'bottom-14',
+  bottomOffset = 'bottom-0',
 }: TerminalShortcutsPanelProps) {
  const { t } = useTranslation('settings');
  const [ctrlActive, setCtrlActive] = useState(false);
--- a/src/components/sidebar/view/Sidebar.tsx
+++ b/src/components/sidebar/view/Sidebar.tsx
@@ -266,6 +266,7 @@ function Sidebar({
            updateAvailable={updateAvailable}
            releaseInfo={releaseInfo}
            latestVersion={latestVersion}
+            currentVersion={currentVersion}
            onShowVersionModal={() => setShowVersionModal(true)}
            onShowSettings={onShowSettings}
            projectListProps={projectListProps}
--- a/src/components/sidebar/view/subcomponents/GitHubStarBadge.tsx
+++ b/src/components/sidebar/view/subcomponents/GitHubStarBadge.tsx
@@ -0,0 +1,48 @@
+import { Star, X } from 'lucide-react';
+import { useGitHubStars } from '../../../../hooks/useGitHubStars';
+import { IS_PLATFORM } from '../../../../constants/config';
+
+const GITHUB_REPO_URL = 'https://github.com/siteboon/claudecodeui';
+
+function GitHubIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
+    </svg>
+  );
+}
+
+export default function GitHubStarBadge() {
+  const { formattedCount, isDismissed, dismiss } = useGitHubStars('siteboon', 'claudecodeui');
+
+  if (IS_PLATFORM || isDismissed) return null;
+
+  return (
+    <div className="group/star relative hidden md:block">
+      <a
+        href={GITHUB_REPO_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-flex items-center gap-1.5 rounded-lg border border-border/50 bg-muted/30 px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
+      >
+        <GitHubIcon className="h-3.5 w-3.5" />
+        <Star className="h-3 w-3" />
+        <span className="font-medium">Star</span>
+        {formattedCount && (
+          <span className="border-l border-border/50 pl-1.5 tabular-nums">{formattedCount}</span>
+        )}
+      </a>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          dismiss();
+        }}
+        className="absolute -right-1.5 -top-1.5 hidden h-4 w-4 items-center justify-center rounded-full border border-border/50 bg-muted text-muted-foreground transition-colors hover:text-foreground group-hover/star:flex"
+        aria-label="Dismiss"
+      >
+        <X className="h-2.5 w-2.5" />
+      </button>
+    </div>
+  );
+}
--- a/src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx
@@ -1,7 +1,8 @@
-import { Settings, Sparkles, PanelLeftOpen } from 'lucide-react';
+import { Settings, Sparkles, PanelLeftOpen, Bug } from 'lucide-react';
 import type { TFunction } from 'i18next';

 const DISCORD_INVITE_URL = 'https://discord.gg/buxwujPNRE';
+const GITHUB_ISSUES_URL = 'https://github.com/siteboon/claudecodeui/issues/new';

 function DiscordIcon({ className }: { className?: string }) {
  return (
@@ -50,6 +51,18 @@ export default function SidebarCollapsed({
        <Settings className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
      </button>

+      {/* Report Issue */}
+      <a
+        href={GITHUB_ISSUES_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="group flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-accent/80"
+        aria-label={t('actions.reportIssue')}
+        title={t('actions.reportIssue')}
+      >
+        <Bug className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
+      </a>
+
      {/* Discord */}
      <a
        href={DISCORD_INVITE_URL}
--- a/src/components/sidebar/view/subcomponents/SidebarContent.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarContent.tsx
@@ -56,6 +56,7 @@ type SidebarContentProps = {
  updateAvailable: boolean;
  releaseInfo: ReleaseInfo | null;
  latestVersion: string | null;
+  currentVersion: string;
  onShowVersionModal: () => void;
  onShowSettings: () => void;
  projectListProps: SidebarProjectListProps;
@@ -83,6 +84,7 @@ export default function SidebarContent({
  updateAvailable,
  releaseInfo,
  latestVersion,
+  currentVersion,
  onShowVersionModal,
  onShowSettings,
  projectListProps,
@@ -217,6 +219,7 @@ export default function SidebarContent({
        updateAvailable={updateAvailable}
        releaseInfo={releaseInfo}
        latestVersion={latestVersion}
+        currentVersion={currentVersion}
        onShowVersionModal={onShowVersionModal}
        onShowSettings={onShowSettings}
        t={t}
--- a/src/components/sidebar/view/subcomponents/SidebarFooter.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarFooter.tsx
@@ -1,7 +1,11 @@
-import { Settings, ArrowUpCircle } from 'lucide-react';
+import { Settings, ArrowUpCircle, Bug } from 'lucide-react';
 import type { TFunction } from 'i18next';
+import { IS_PLATFORM } from '../../../../constants/config';
 import type { ReleaseInfo } from '../../../../types/sharedTypes';

+const GITHUB_ISSUES_URL = 'https://github.com/siteboon/claudecodeui/issues/new';
+const GITHUB_REPO_URL = 'https://github.com/siteboon/claudecodeui';
+
 const DISCORD_INVITE_URL = 'https://discord.gg/buxwujPNRE';

 function DiscordIcon({ className }: { className?: string }) {
@@ -16,6 +20,7 @@ type SidebarFooterProps = {
  updateAvailable: boolean;
  releaseInfo: ReleaseInfo | null;
  latestVersion: string | null;
+  currentVersion: string;
  onShowVersionModal: () => void;
  onShowSettings: () => void;
  t: TFunction;
@@ -25,6 +30,7 @@ export default function SidebarFooter({
  updateAvailable,
  releaseInfo,
  latestVersion,
+  currentVersion,
  onShowVersionModal,
  onShowSettings,
  t,
@@ -79,11 +85,24 @@ export default function SidebarFooter({
        </>
      )}

-      {/* Discord + Settings */}
+      {/* Community + Settings */}
      <div className="nav-divider" />

-      {/* Desktop Discord */}
+      {/* Desktop Report Issue */}
      <div className="hidden px-2 pt-1.5 md:block">
+        <a
+          href={GITHUB_ISSUES_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground"
+        >
+          <Bug className="h-3.5 w-3.5" />
+          <span className="text-sm">{t('actions.reportIssue')}</span>
+        </a>
+      </div>
+
+      {/* Desktop Discord */}
+      <div className="hidden px-2 md:block">
        <a
          href={DISCORD_INVITE_URL}
          target="_blank"
@@ -106,8 +125,37 @@ export default function SidebarFooter({
        </button>
      </div>

-      {/* Mobile Discord */}
+      {/* Desktop version brand line (OSS mode only) */}
+      {!IS_PLATFORM && (
+        <div className="hidden px-3 py-2 text-center md:block">
+          <a
+            href={GITHUB_REPO_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[10px] text-muted-foreground/40 transition-colors hover:text-muted-foreground"
+          >
+            CloudCLI v{currentVersion} – {t('branding.openSource')}
+          </a>
+        </div>
+      )}
+
+      {/* Mobile Report Issue */}
      <div className="px-3 pt-3 md:hidden">
+        <a
+          href={GITHUB_ISSUES_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]"
+        >
+          <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-background/80">
+            <Bug className="w-4.5 h-4.5 text-muted-foreground" />
+          </div>
+          <span className="text-base font-medium text-foreground">{t('actions.reportIssue')}</span>
+        </a>
+      </div>
+
+      {/* Mobile Discord */}
+      <div className="px-3 pt-2 md:hidden">
        <a
          href={DISCORD_INVITE_URL}
          target="_blank"
@@ -122,7 +170,7 @@ export default function SidebarFooter({
      </div>

      {/* Mobile settings */}
-      <div className="px-3 pb-20 pt-2 md:hidden">
+      <div className="px-3 pb-3 pt-2 md:hidden">
        <button
          className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]"
          onClick={onShowSettings}
--- a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
@@ -3,6 +3,7 @@ import type { TFunction } from 'i18next';
 import { Button, Input } from '../../../../shared/view/ui';
 import { IS_PLATFORM } from '../../../../constants/config';
 import { cn } from '../../../../lib/utils';
+import GitHubStarBadge from './GitHubStarBadge';

 type SearchMode = 'projects' | 'conversations';

@@ -106,6 +107,8 @@ export default function SidebarHeader({
          </div>
        </div>

+        <GitHubStarBadge />
+
        {/* Search bar */}
        {projectsCount > 0 && !isLoading && (
          <div className="mt-2.5 space-y-2">
--- a/src/components/sidebar/view/subcomponents/SidebarProjectSessions.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarProjectSessions.tsx
@@ -80,6 +80,29 @@ export default function SidebarProjectSessions({

  return (
    <div className="ml-3 space-y-1 border-l border-border pl-3">
+      <div className="px-3 pb-1 pt-1 md:hidden">
+        <button
+          className="flex h-8 w-full items-center justify-center gap-2 rounded-md bg-primary text-xs font-medium text-primary-foreground transition-all duration-150 hover:bg-primary/90 active:scale-[0.98]"
+          onClick={() => {
+            onProjectSelect(project);
+            onNewSession(project);
+          }}
+        >
+          <Plus className="h-3 w-3" />
+          {t('sessions.newSession')}
+        </button>
+      </div>
+
+      <Button
+        variant="default"
+        size="sm"
+        className="hidden h-8 w-full justify-start gap-2 bg-primary text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 md:flex"
+        onClick={() => onNewSession(project)}
+      >
+        <Plus className="h-3 w-3" />
+        {t('sessions.newSession')}
+      </Button>
+
      {!initialSessionsLoaded ? (
        <SessionListSkeleton />
      ) : !hasSessions && !isLoadingSessions ? (
@@ -129,29 +152,6 @@ export default function SidebarProjectSessions({
          )}
        </Button>
      )}
-
-      <div className="px-3 pb-2 md:hidden">
-        <button
-          className="flex h-8 w-full items-center justify-center gap-2 rounded-md bg-primary text-xs font-medium text-primary-foreground transition-all duration-150 hover:bg-primary/90 active:scale-[0.98]"
-          onClick={() => {
-            onProjectSelect(project);
-            onNewSession(project);
-          }}
-        >
-          <Plus className="h-3 w-3" />
-          {t('sessions.newSession')}
-        </button>
-      </div>
-
-      <Button
-        variant="default"
-        size="sm"
-        className="mt-1 hidden h-8 w-full justify-start gap-2 bg-primary text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 md:flex"
-        onClick={() => onNewSession(project)}
-      >
-        <Plus className="h-3 w-3" />
-        {t('sessions.newSession')}
-      </Button>
    </div>
  );
 }
--- a/src/hooks/useGitHubStars.ts
+++ b/src/hooks/useGitHubStars.ts
@@ -0,0 +1,77 @@
+import { useState, useEffect, useCallback } from 'react';
+
+const CACHE_KEY = 'CLOUDCLI_GITHUB_STARS';
+const DISMISS_KEY = 'CLOUDCLI_HIDE_GITHUB_STAR';
+const CACHE_TTL = 60 * 60 * 1000; // 1 hour
+
+type CachedStars = {
+  count: number;
+  timestamp: number;
+};
+
+export const useGitHubStars = (owner: string, repo: string) => {
+  const [starCount, setStarCount] = useState<number | null>(null);
+  const [isDismissed, setIsDismissed] = useState(() => {
+    try {
+      return localStorage.getItem(DISMISS_KEY) === 'true';
+    } catch {
+      return false;
+    }
+  });
+
+  useEffect(() => {
+    if (isDismissed) return;
+
+    // Check cache first
+    try {
+      const cached = localStorage.getItem(CACHE_KEY);
+      if (cached) {
+        const parsed: CachedStars = JSON.parse(cached);
+        if (Date.now() - parsed.timestamp < CACHE_TTL) {
+          setStarCount(parsed.count);
+          return;
+        }
+      }
+    } catch {
+      // ignore
+    }
+
+    const fetchStars = async () => {
+      try {
+        const response = await fetch(`https://api.github.com/repos/${owner}/${repo}`);
+        if (!response.ok) return;
+        const data = await response.json();
+        const count = data.stargazers_count;
+        if (typeof count === 'number') {
+          setStarCount(count);
+          try {
+            localStorage.setItem(CACHE_KEY, JSON.stringify({ count, timestamp: Date.now() }));
+          } catch {
+            // ignore
+          }
+        }
+      } catch {
+        // silent fail
+      }
+    };
+
+    void fetchStars();
+  }, [owner, repo, isDismissed]);
+
+  const dismiss = useCallback(() => {
+    setIsDismissed(true);
+    try {
+      localStorage.setItem(DISMISS_KEY, 'true');
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const formattedCount = starCount !== null
+    ? starCount >= 1000
+      ? `${(starCount / 1000).toFixed(1)}k`
+      : `${starCount}`
+    : null;
+
+  return { starCount, formattedCount, isDismissed, dismiss };
+};
--- a/src/i18n/locales/de/auth.json
+++ b/src/i18n/locales/de/auth.json
@@ -1,7 +1,7 @@
 {
  "login": {
    "title": "Willkommen zurück",
-    "description": "Meld dich bei deinem Claude Code UI-Konto an",
+    "description": "Meld dich bei deinem CloudCLI-Konto an",
    "username": "Benutzername",
    "password": "Passwort",
    "submit": "Anmelden",
--- a/src/i18n/locales/de/common.json
+++ b/src/i18n/locales/de/common.json
@@ -84,7 +84,7 @@
    "openInEditor": "Im Editor öffnen"
  },
  "mainContent": {
-    "loading": "Claude Code UI wird geladen",
+    "loading": "CloudCLI wird geladen",
    "settingUpWorkspace": "Arbeitsbereich wird eingerichtet...",
    "chooseProject": "Projekt auswählen",
    "selectProjectDescription": "Wähl ein Projekt aus der Seitenleiste, um mit Claude zu programmieren. Jedes Projekt enthält deine Chat-Sitzungen und den Dateiverlauf.",
@@ -215,7 +215,7 @@
    "viewFullRelease": "Vollständige Version anzeigen",
    "updateProgress": "Update-Fortschritt:",
    "manualUpgrade": "Manuelles Upgrade:",
-    "npmUpgradeCommand": "npm install -g @siteboon/claude-code-ui@latest",
+    "npmUpgradeCommand": "npm install -g @cloudcli-ai/cloudcli@latest",
    "manualUpgradeHint": "Oder klick auf \"Jetzt aktualisieren\", um das Update automatisch durchzuführen.",
    "updateCompleted": "Update erfolgreich abgeschlossen!",
    "restartServer": "Bitte starte den Server neu, um die Änderungen anzuwenden.",
--- a/src/i18n/locales/de/settings.json
+++ b/src/i18n/locales/de/settings.json
@@ -105,7 +105,8 @@
    "git": "Git",
    "apiTokens": "API & Token",
    "tasks": "Aufgaben",
-    "plugins": "Plugins"
+    "plugins": "Plugins",
+    "about": "Info"
  },
  "appearanceSettings": {
    "darkMode": {
--- a/src/i18n/locales/de/sidebar.json
+++ b/src/i18n/locales/de/sidebar.json
@@ -20,7 +20,7 @@
    "runClaudeCli": "Führ Claude CLI in einem Projektverzeichnis aus, um zu beginnen"
  },
  "app": {
-    "title": "Claude Code UI",
+    "title": "CloudCLI",
    "subtitle": "KI-Programmierassistent-Oberfläche"
  },
  "sessions": {
@@ -65,7 +65,12 @@
    "save": "Speichern",
    "delete": "Löschen",
    "rename": "Umbenennen",
-    "joinCommunity": "Community beitreten"
+    "joinCommunity": "Community beitreten",
+    "reportIssue": "Problem melden",
+    "starOnGithub": "Stern auf GitHub"
+  },
+  "branding": {
+    "openSource": "Open Source"
  },
  "status": {
    "active": "Aktiv",
--- a/src/i18n/locales/en/auth.json
+++ b/src/i18n/locales/en/auth.json
@@ -1,7 +1,7 @@
 {
  "login": {
    "title": "Welcome Back",
-    "description": "Sign in to your Claude Code UI account",
+    "description": "Sign in to your CloudCLI self-hosted account",
    "username": "Username",
    "password": "Password",
    "submit": "Sign In",
--- a/src/i18n/locales/en/common.json
+++ b/src/i18n/locales/en/common.json
@@ -84,7 +84,7 @@
    "openInEditor": "Open in Editor"
  },
  "mainContent": {
-    "loading": "Loading Claude Code UI",
+    "loading": "Loading CloudCLI",
    "settingUpWorkspace": "Setting up your workspace...",
    "chooseProject": "Choose Your Project",
    "selectProjectDescription": "Select a project from the sidebar to start coding with Claude. Each project contains your chat sessions and file history.",
@@ -245,7 +245,7 @@
    "viewFullRelease": "View full release",
    "updateProgress": "Update Progress:",
    "manualUpgrade": "Manual upgrade:",
-    "npmUpgradeCommand": "npm install -g @siteboon/claude-code-ui@latest",
+    "npmUpgradeCommand": "npm install -g @cloudcli-ai/cloudcli@latest",
    "manualUpgradeHint": "Or click \"Update Now\" to run the update automatically.",
    "updateCompleted": "Update completed successfully!",
    "restartServer": "Please restart the server to apply changes.",
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -106,8 +106,8 @@
    "apiTokens": "API & Tokens",
    "tasks": "Tasks",
    "notifications": "Notifications",
-    "plugins": "Plugins"
-
+    "plugins": "Plugins",
+    "about": "About"
  },
  "notifications": {
    "title": "Notifications",
@@ -476,7 +476,7 @@
    "installFailed": "Installation failed",
    "uninstallFailed": "Uninstall failed",
    "toggleFailed": "Toggle failed",
-    "buildYourOwn": "Build your own plugin",
+    "starterPluginLabel": "Starter Plugin",
    "starter": "Starter",
    "docs": "Docs",
    "starterPlugin": {
@@ -485,6 +485,12 @@
      "description": "File counts, lines of code, file-type breakdown, and recent activity for your project.",
      "install": "Install"
    },
+    "terminalPlugin": {
+      "name": "Terminal",
+      "badge": "official",
+      "description": "Integrated terminal with full shell access directly within the interface.",
+      "install": "Install"
+    },
    "morePlugins": "More",
    "enable": "Enable",
    "disable": "Disable",
--- a/src/i18n/locales/en/sidebar.json
+++ b/src/i18n/locales/en/sidebar.json
@@ -20,7 +20,7 @@
    "runClaudeCli": "Run Claude CLI in a project directory to get started"
  },
  "app": {
-    "title": "Claude Code UI",
+    "title": "CloudCLI",
    "subtitle": "AI coding assistant interface"
  },
  "sessions": {
@@ -65,7 +65,12 @@
    "save": "Save",
    "delete": "Delete",
    "rename": "Rename",
-    "joinCommunity": "Join Community"
+    "joinCommunity": "Join Community",
+    "reportIssue": "Report Issue",
+    "starOnGithub": "Star on GitHub"
+  },
+  "branding": {
+    "openSource": "Open Source"
  },
  "status": {
    "active": "Active",
--- a/src/i18n/locales/ja/auth.json
+++ b/src/i18n/locales/ja/auth.json
@@ -1,7 +1,7 @@
 {
  "login": {
    "title": "おかえりなさい",
-    "description": "Claude Code UIアカウントにサインイン",
+    "description": "CloudCLIアカウントにサインイン",
    "username": "ユーザー名",
    "password": "パスワード",
    "submit": "サインイン",
--- a/src/i18n/locales/ja/common.json
+++ b/src/i18n/locales/ja/common.json
@@ -84,7 +84,7 @@
    "openInEditor": "エディタで開く"
  },
  "mainContent": {
-    "loading": "Claude Code UI を読み込んでいます",
+    "loading": "CloudCLI を読み込んでいます",
    "settingUpWorkspace": "ワークスペースを準備しています...",
    "chooseProject": "プロジェクトを選択",
    "selectProjectDescription": "サイドバーからプロジェクトを選択して、Claudeとコーディングを始めましょう。各プロジェクトにはチャットセッションとファイル履歴が含まれています。",
@@ -245,7 +245,7 @@
    "viewFullRelease": "リリース全文を見る",
    "updateProgress": "アップデートの進捗:",
    "manualUpgrade": "手動アップグレード:",
-    "npmUpgradeCommand": "npm install -g @siteboon/claude-code-ui@latest",
+    "npmUpgradeCommand": "npm install -g @cloudcli-ai/cloudcli@latest",
    "manualUpgradeHint": "または「今すぐ更新」をクリックして自動的にアップデートを実行できます。",
    "updateCompleted": "アップデートが完了しました！",
    "restartServer": "変更を適用するにはサーバーを再起動してください。",
--- a/src/i18n/locales/ja/settings.json
+++ b/src/i18n/locales/ja/settings.json
@@ -106,8 +106,8 @@
    "apiTokens": "API & トークン",
    "tasks": "タスク",
    "notifications": "通知",
-    "plugins": "プラグイン"
-
+    "plugins": "プラグイン",
+    "about": "概要"
  },
  "notifications": {
    "title": "通知",
--- a/src/i18n/locales/ja/sidebar.json
+++ b/src/i18n/locales/ja/sidebar.json
@@ -20,7 +20,7 @@
    "runClaudeCli": "プロジェクトディレクトリでClaude CLIを実行して始めましょう"
  },
  "app": {
-    "title": "Claude Code UI",
+    "title": "CloudCLI",
    "subtitle": "AIコーディングアシスタント"
  },
  "sessions": {
@@ -64,7 +64,12 @@
    "save": "保存",
    "delete": "削除",
    "rename": "名前の変更",
-    "joinCommunity": "コミュニティに参加"
+    "joinCommunity": "コミュニティに参加",
+    "reportIssue": "問題を報告",
+    "starOnGithub": "GitHubでスター"
+  },
+  "branding": {
+    "openSource": "オープンソース"
  },
  "status": {
    "active": "アクティブ",
--- a/src/i18n/locales/ko/auth.json
+++ b/src/i18n/locales/ko/auth.json
@@ -1,7 +1,7 @@
 {
  "login": {
    "title": "다시 오신 것을 환영합니다",
-    "description": "Claude Code UI 계정에 로그인하세요",
+    "description": "CloudCLI 계정에 로그인하세요",
    "username": "사용자명",
    "password": "비밀번호",
    "submit": "로그인",
--- a/src/i18n/locales/ko/common.json
+++ b/src/i18n/locales/ko/common.json
@@ -84,7 +84,7 @@
    "openInEditor": "에디터에서 열기"
  },
  "mainContent": {
-    "loading": "Claude Code UI 로딩 중",
+    "loading": "CloudCLI 로딩 중",
    "settingUpWorkspace": "워크스페이스 설정 중...",
    "chooseProject": "프로젝트 선택",
    "selectProjectDescription": "사이드바에서 프로젝트를 선택하여 Claude와 코딩을 시작하세요. 각 프로젝트에는 채팅 세션과 파일 히스토리가 포함됩니다.",
@@ -245,7 +245,7 @@
    "viewFullRelease": "전체 릴리스 보기",
    "updateProgress": "업데이트 진행 상황:",
    "manualUpgrade": "수동 업그레이드:",
-    "npmUpgradeCommand": "npm install -g @siteboon/claude-code-ui@latest",
+    "npmUpgradeCommand": "npm install -g @cloudcli-ai/cloudcli@latest",
    "manualUpgradeHint": "또는 \"지금 업데이트\"를 클릭하여 자동으로 업데이트합니다.",
    "updateCompleted": "업데이트가 완료되었습니다!",
    "restartServer": "변경사항을 적용하려면 서버를 재시작하세요.",
--- a/src/i18n/locales/ko/settings.json
+++ b/src/i18n/locales/ko/settings.json
@@ -106,8 +106,8 @@
    "apiTokens": "API & 토큰",
    "tasks": "작업",
    "notifications": "알림",
-    "plugins": "플러그인"
-
+    "plugins": "플러그인",
+    "about": "정보"
  },
  "notifications": {
    "title": "알림",
--- a/src/i18n/locales/ko/sidebar.json
+++ b/src/i18n/locales/ko/sidebar.json
@@ -20,7 +20,7 @@
    "runClaudeCli": "프로젝트 디렉토리에서 Claude CLI를 실행하여 시작하세요"
  },
  "app": {
-    "title": "Claude Code UI",
+    "title": "CloudCLI",
    "subtitle": "AI 코딩 어시스턴트 UI"
  },
  "sessions": {
@@ -64,7 +64,12 @@
    "save": "저장",
    "delete": "삭제",
    "rename": "이름 변경",
-    "joinCommunity": "커뮤니티 참여"
+    "joinCommunity": "커뮤니티 참여",
+    "reportIssue": "문제 신고",
+    "starOnGithub": "GitHub에서 스타"
+  },
+  "branding": {
+    "openSource": "오픈 소스"
  },
  "status": {
    "active": "활성",
--- a/src/i18n/locales/ru/auth.json
+++ b/src/i18n/locales/ru/auth.json
@@ -1,7 +1,7 @@
 {
  "login": {
    "title": "Добро пожаловать",
-    "description": "Войдите в свой аккаунт Claude Code UI",
+    "description": "Войдите в свой аккаунт CloudCLI",
    "username": "Имя пользователя",
    "password": "Пароль",
    "submit": "Войти",
--- a/src/i18n/locales/ru/common.json
+++ b/src/i18n/locales/ru/common.json
@@ -84,7 +84,7 @@
    "openInEditor": "Открыть в редакторе"
  },
  "mainContent": {
-    "loading": "Загрузка Claude Code UI",
+    "loading": "Загрузка CloudCLI",
    "settingUpWorkspace": "Настройка рабочего пространства...",
    "chooseProject": "Выберите проект",
    "selectProjectDescription": "Выберите проект на боковой панели, чтобы начать работу с Claude. Каждый проект содержит ваши сеансы чата и историю файлов.",
@@ -215,7 +215,7 @@
    "viewFullRelease": "Посмотреть полный релиз",
    "updateProgress": "Прогресс обновления:",
    "manualUpgrade": "Ручное обновление:",
-    "npmUpgradeCommand": "npm install -g @siteboon/claude-code-ui@latest",
+    "npmUpgradeCommand": "npm install -g @cloudcli-ai/cloudcli@latest",
    "manualUpgradeHint": "Или нажмите \"Обновить сейчас\" для автоматического обновления.",
    "updateCompleted": "Обновление успешно завершено!",
    "restartServer": "Пожалуйста, перезапустите сервер для применения изменений.",
--- a/src/i18n/locales/ru/settings.json
+++ b/src/i18n/locales/ru/settings.json
@@ -105,7 +105,8 @@
    "git": "Git",
    "apiTokens": "API и токены",
    "tasks": "Задачи",
-    "plugins": "Плагины"
+    "plugins": "Плагины",
+    "about": "О программе"
  },
  "appearanceSettings": {
    "darkMode": {
--- a/src/i18n/locales/ru/sidebar.json
+++ b/src/i18n/locales/ru/sidebar.json
@@ -20,7 +20,7 @@
    "runClaudeCli": "Запустите Claude CLI в каталоге проекта для начала работы"
  },
  "app": {
-    "title": "Claude Code UI",
+    "title": "CloudCLI",
    "subtitle": "Интерфейс AI помощника для программирования"
  },
  "sessions": {
@@ -65,7 +65,12 @@
    "save": "Сохранить",
    "delete": "Удалить",
    "rename": "Переименовать",
-    "joinCommunity": "Присоединиться к сообществу"
+    "joinCommunity": "Присоединиться к сообществу",
+    "reportIssue": "Сообщить о проблеме",
+    "starOnGithub": "Звезда на GitHub"
+  },
+  "branding": {
+    "openSource": "Открытый исходный код"
  },
  "status": {
    "active": "Активен",
--- a/src/i18n/locales/zh-CN/auth.json
+++ b/src/i18n/locales/zh-CN/auth.json
@@ -1,7 +1,7 @@
 {
  "login": {
    "title": "欢迎回来",
-    "description": "登录您的 Claude Code UI 账户",
+    "description": "登录您的 CloudCLI 账户",
    "username": "用户名",
    "password": "密码",
    "submit": "登录",
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Simos Mikelatos	fce8ad0893	Merge branch 'main' into refactor/remove-token-usage-logic	2026-04-10 15:30:43 +02:00
Haileyesus	cc7f652044	refactor: removed the token calculator logic The information given was not accurate for the model providers	2026-04-10 16:21:01 +03:00
simosmik	2207d05c1c	feat: add branding, community links, GitHub star badge, and About settings tab	2026-04-10 13:06:16 +00:00
Haile	a8dab0edcf	fix(ui): remove mobile bottom nav, unify processing indicator, and improve tooltip behavior on mobile (#632 ) * fix: update tooltip component * fix: remove the mobile navigation component In addition, - the sidebar is also updated to take full space - the terminal shortcuts in shell are updated to not interfere with the shell content. * fix: remove mobile nav component * fix: remove "Thinking..." indicator In addition, the claude status component has been restyled to be more compact and less obtrusive. - The type and prop arguments for ChatMessagesPane have been updated to remove the isLoading prop, which was only used to control the display of the AssistantThinkingIndicator. * fix: show elapsed time only when loading --------- Co-authored-by: Haileyesus <something@gmail.com> Co-authored-by: Simos Mikelatos <simosmik@gmail.com>	2026-04-10 12:36:06 +02:00
Haile	e61f8a543d	fix: corrupted binary downloads (#634 ) - The existing setup was using the text reader endpoint for downloading files `fsPromises.readFile(..., 'utf8')` at line 801. This was incorrect - In the old Files tab flow, the client then took that decoded string and rebuilt it as a text blob. That UTF-8 decode/re-encode step changes raw bytes, so the downloaded file no longer matches the original. Folder ZIP export had the same problem for any binary file inside the archive. Co-authored-by: Haileyesus <something@gmail.com>	2026-04-10 12:35:23 +02:00
simosmik	388134c7a5	chore(release): v1.28.0	2026-04-03 15:41:05 +00:00
simosmik	ef51de259e	chore: changing package name to @cloudcli-ai/cloudcli	2026-04-03 15:37:49 +00:00
simosmik	1628868470	feat: moving new session button higher	2026-03-31 20:53:20 +00:00
simosmik	8f1042cf25	feat: adding session resume in the api	2026-03-29 20:58:56 +00:00
viper151	051a6b1e74	chore(release): v1.27.1	2026-03-29 01:15:38 +00:00
simosmik	f1063fd339	chore: release tokens	2026-03-29 01:13:13 +00:00
simosmik	27cd12432b	chore: relicense to AGPL-3.0-or-later Siteboon AI B.V. contributions relicensed from GPL-3.0 to AGPL-3.0-or-later. Existing community contributions remain under GPL-3.0, combined per GPL-3.0 Section 13. Adds Section 7 additional terms (attribution, origin protection, publicity restriction, trademark).	2026-03-29 00:57:09 +00:00
simosmik	004135ef01	chore: add terminal plugin in the plugins list Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-27 10:38:00 +00:00
xiguatoutou	b54cdf8168	fix: prevent split on undefined（#491） (#563 )	2026-03-23 20:14:15 +03:00
simosmik	42a131389a	chore: add release-it github action	2026-03-22 01:41:21 +00:00