From 18e98a780dc5517e7769afb215db18aa7af2f74b Mon Sep 17 00:00:00 2001 From: Simos Mikelatos Date: Wed, 1 Jul 2026 11:17:27 +0000 Subject: [PATCH 1/3] Point desktop downloads to CloudCLI --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8b4725a8..213bc0b1 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,11 @@ The fastest way to get started — no local setup required. Get a fully managed, ### Desktop App -Download the latest macOS or Windows desktop app from the **[GitHub Releases](https://github.com/siteboon/claudecodeui/releases)** page. +Download the latest desktop app: + +- **[macOS](https://cloudcli.ai/download/macos)** +- **[Windows](https://cloudcli.ai/download/windows)** +- **[Download page](https://cloudcli.ai/download)** · **[GitHub Releases and checksums](https://github.com/siteboon/claudecodeui/releases)** Use the desktop app to open CloudCLI Cloud environments, switch between local and remote workspaces, copy mobile/browser URLs, and keep Local CloudCLI available from your menu bar or tray. To work locally, choose **Local CloudCLI** in the desktop app; it will use your running local server or start one for you. From 44aecbab681f44dcdb18654191e8ec31b6f1fe35 Mon Sep 17 00:00:00 2001 From: Simos Mikelatos Date: Wed, 1 Jul 2026 11:29:14 +0000 Subject: [PATCH 2/3] Clarify desktop companion in README --- README.md | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 213bc0b1..1afc6b06 100644 --- a/README.md +++ b/README.md @@ -74,16 +74,6 @@ The fastest way to get started — no local setup required. Get a fully managed, **[Get started with CloudCLI Cloud](https://cloudcli.ai)** -### Desktop App - -Download the latest desktop app: - -- **[macOS](https://cloudcli.ai/download/macos)** -- **[Windows](https://cloudcli.ai/download/windows)** -- **[Download page](https://cloudcli.ai/download)** · **[GitHub Releases and checksums](https://github.com/siteboon/claudecodeui/releases)** - -Use the desktop app to open CloudCLI Cloud environments, switch between local and remote workspaces, copy mobile/browser URLs, and keep Local CloudCLI available from your menu bar or tray. To work locally, choose **Local CloudCLI** in the desktop app; it will use your running local server or start one for you. - ### Self-Hosted (Open source) #### npm @@ -115,6 +105,16 @@ npx @cloudcli-ai/cloudcli@latest sandbox ~/my-project Supports Claude Code, Codex, and Gemini CLI. See the [sandbox docs](docker/) for setup and advanced options. +### Desktop Companion App + +CloudCLI Desktop is an optional native companion for CloudCLI Cloud and Local CloudCLI. It ships from this repository's GitHub Releases and keeps CloudCLI available from your menu bar or tray. + +- **[macOS](https://cloudcli.ai/download/macos)** +- **[Windows](https://cloudcli.ai/download/windows)** +- **[Download page](https://cloudcli.ai/download)** · **[GitHub Releases and checksums](https://github.com/siteboon/claudecodeui/releases)** + +Use it to open CloudCLI Cloud environments, switch between local and remote workspaces, and copy mobile/browser URLs. To work locally, choose **Local CloudCLI** in the desktop app; it will use your running local server or start one for you. + --- @@ -129,7 +129,8 @@ CloudCLI UI is the open source UI layer that powers CloudCLI Cloud. You can self | **Setup** | `npx @cloudcli-ai/cloudcli` | `npx @cloudcli-ai/cloudcli@latest sandbox ~/project` | No setup required | | **Isolation** | Runs on your host | Hypervisor-level sandbox (microVM) | Full cloud isolation | | **Machine needs to stay on** | Yes | Yes | No | -| **Mobile access** | Any browser on your network | Any browser on your network | Any device, native app coming | +| **Mobile access** | Any browser on your network | Any browser on your network | Any device | +| **Desktop companion** | Optional. Choose Local CloudCLI | Optional. Choose Local CloudCLI | Optional. Opens cloud environments | | **Agents supported** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI | | **File explorer and Git** | Yes | Yes | Yes | | **MCP configuration** | Synced with `~/.claude` | Managed via UI | Managed via UI | From 7eb7348d509c78d35a7d5bb9a0d1ef0f2710b149 Mon Sep 17 00:00:00 2001 From: Haile <118998054+blackmammoth@users.noreply.github.com> Date: Wed, 1 Jul 2026 14:57:03 +0300 Subject: [PATCH 3/3] Feat/design improvements and minor bug fixes (#939) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(shell): hide prompt options on desktop * fix(chat): group continuous same-tool runs more consistently Consecutive tool calls (Edit, Read, Grep, etc.) grouped inconsistently: - The group threshold was 3, so a run of only 2 calls stayed ungrouped while a run of 3 collapsed — making two back-to-back edits look different from three. - A run was broken by any interleaved message, including ones that render nothing (reasoning hidden when showThinking is off). Providers like Codex interleave hidden reasoning between tool calls, so visually continuous edits intermittently failed to group. Lower TOOL_GROUP_THRESHOLD to 2 and skip non-rendered messages when extending a run, so any 2+ consecutive same-tool calls collapse reliably. ChatMessagesPane now passes showThinking into groupConsecutiveTools. * fix(chat): stabilize message scroll controls * fix: update command menu positioning * fix(chat): refine load all overlay behavior * fix(chat): hide load all prompt after final page * fix(chat): remove auto scroll quick setting * fix(chat): unify messages and composer into centered column Constrain both ChatMessagesPane content and ChatComposer to the same max-w-3xl centered column. Previously only the composer had a max-width, causing messages to fill the full width while the input stayed narrow, making them visually misaligned with large empty gutters on either side. * style(ui): rework light/dark theme to make it visually consistent Rework the color system around warm neutrals and route hardcoded surfaces through theme tokens for consistency. - Theme tokens (index.css, ThemeContext): warm cream light mode and neutral charcoal dark mode, replacing the pure-white/blue-tinted palette; update PWA theme-color meta - Code blocks: soft grey background in light mode via oneLight/oneDark, and drop the Tailwind Typography 
 shell that
  framed the highlighter in a dark box
- Dropdowns/panels: convert CommandMenu, Quick Settings, and the JSON
  response block from hardcoded gray/slate to popover/muted/border
  tokens
- Git panel: Publish button purple -> primary blue
- Composer: drop top padding so the input sits flush with the thread

* fix: use app theme for code editor

* style(chat): unify composer toolbar heights and declutter slash-command modal

- Composer: give the permission-mode and token-usage buttons a fixed
  h-8 so every bottom-toolbar control shares one height
- CommandResultModal: replace the blue gradient header (gradient fill,
  glow blobs, blue eyebrow + icon chip) with a clean neutral header on
  popover/muted tokens

* fix(chat): header ellipsis, Codex logo on light theme, portal copy menu

- MainContentTitle: truncate the session title with an ellipsis instead
  of horizontal-scrolling it
- MessageComponent: use text-foreground for the provider logo chip so the
  currentColor Codex/OpenAI mark is visible on the light theme
- MessageCopyControl: render the copy-format dropdown in a portal so it
  escapes the chat message's `contain: paint` clip box; anchor it to the
  trigger, flip above near the viewport bottom, close on scroll/resize

* style(mcp): remove purple accents and portal the server form modal

- Replace the purple provider-button colors, heading icon, and form
  submit button with the primary token (no purple in the MCP UI)
- Portal the add/edit MCP server modal to document.body so its fixed
  overlay covers the full viewport, fixing the white band at the top
  caused by the Settings dialog's transformed tab content becoming the
  containing block

* style(ui): use Merriweather serif for chat text and Encode Sans for the rest of the UI

* fix: align activity indicator with composer input width

Wrap ActivityIndicator in the same mx-auto max-w-3xl container as the
text input so the "Analyzing…" label and Stop button stay within the
input's boundaries instead of spanning the full window width.

* style: improve thinking and stop button placements

* style(auth): modernize login, setup, and onboarding screens

* fix(chat): correct invalid dark-mode hover on AskUserQuestion options

* fix: remove unnecessary auto expand tools

* fix: resolve coderabbit comments

* fix(chat): widen chat layout and sidebar titles

* fix(branding): update CloudCLI wordmark styling

---------

Co-authored-by: Simos Mikelatos 
---
 index.html                                    |  10 +-
 src/components/auth/view/AuthErrorAlert.tsx   |  10 +-
 src/components/auth/view/AuthInputField.tsx   |  57 +++++--
 .../auth/view/AuthLoadingScreen.tsx           |  33 ++--
 src/components/auth/view/AuthScreenLayout.tsx |  34 +++--
 src/components/auth/view/LoginForm.tsx        |  14 +-
 src/components/auth/view/SetupForm.tsx        |  27 +++-
 .../chat/hooks/useChatSessionState.ts         |  96 ++++++++----
 src/components/chat/tools/ToolRenderer.tsx    |  10 +-
 .../AskUserQuestionPanel.tsx                  |   4 +-
 src/components/chat/types/types.ts            |   2 -
 src/components/chat/utils/toolGrouping.ts     |  37 +++--
 src/components/chat/view/ChatInterface.tsx    |  29 ++--
 .../view/subcomponents/ActivityIndicator.tsx  |  56 +++++--
 .../chat/view/subcomponents/ChatComposer.tsx  |  40 ++---
 .../view/subcomponents/ChatMessagesPane.tsx   | 108 ++++++-------
 .../chat/view/subcomponents/CommandMenu.tsx   |  37 +++--
 .../view/subcomponents/CommandResultModal.tsx |  67 ++++-----
 .../subcomponents/LoadAllMessagesOverlay.tsx  |  68 +++++++++
 .../chat/view/subcomponents/Markdown.tsx      |  17 ++-
 .../view/subcomponents/MessageComponent.tsx   |  52 ++-----
 .../view/subcomponents/MessageCopyControl.tsx |  61 ++++++--
 .../ProviderSelectionEmptyState.tsx           |   4 +-
 .../view/subcomponents/TokenUsageSummary.tsx  |   2 +-
 .../view/subcomponents/ToolGroupContainer.tsx |   3 -
 .../code-editor/constants/settings.ts         |   2 -
 .../hooks/useCodeEditorSettings.ts            |  19 +--
 .../code-editor/view/CodeEditor.tsx           |   5 +-
 .../markdown/MarkdownCodeBlock.tsx            |  12 +-
 .../markdown/MarkdownPreview.tsx              |   3 +
 .../git-panel/view/GitPanelHeader.tsx         |   2 +-
 .../main-content/view/MainContent.tsx         |   4 +-
 .../view/subcomponents/MainContentTitle.tsx   |   2 +-
 src/components/mcp/constants.ts               |  10 +-
 src/components/mcp/view/McpServers.tsx        |   2 +-
 .../mcp/view/modals/McpServerFormModal.tsx    |  10 +-
 src/components/onboarding/view/Onboarding.tsx |  33 ++--
 .../subcomponents/AgentConnectionCard.tsx     |  18 +--
 .../subcomponents/AgentConnectionsStep.tsx    |  14 +-
 .../subcomponents/GitConfigurationStep.tsx    |  16 +-
 .../subcomponents/OnboardingStepProgress.tsx  |  16 +-
 .../quick-settings-panel/constants.ts         |  18 +--
 src/components/quick-settings-panel/types.ts  |   2 -
 .../view/QuickSettingsContent.tsx             |  15 +-
 .../view/QuickSettingsPanelHeader.tsx         |   6 +-
 .../view/QuickSettingsPanelView.tsx           |   6 +-
 .../view/QuickSettingsSection.tsx             |   2 +-
 .../view/QuickSettingsToggleRow.tsx           |   4 +-
 .../settings/constants/constants.ts           |   1 -
 .../settings/hooks/useSettingsController.ts   |   2 -
 src/components/settings/types/types.ts        |   1 -
 src/components/settings/view/Settings.tsx     |   1 -
 .../settings/view/tabs/AboutTab.tsx           |  12 +-
 .../view/tabs/AppearanceSettingsTab.tsx       |  13 --
 .../sections/VersionInfoSection.tsx           |   9 +-
 src/components/shell/view/Shell.tsx           |   2 +-
 .../view/subcomponents/SidebarHeader.tsx      |   8 +-
 .../view/subcomponents/SidebarSessionItem.tsx |   4 +-
 src/constants/branding.ts                     |   2 +
 src/contexts/ThemeContext.jsx                 |   4 +-
 src/hooks/useUiPreferences.ts                 |   4 -
 src/i18n/locales/de/settings.json             |   3 -
 src/i18n/locales/en/settings.json             |   3 -
 src/i18n/locales/fr/settings.json             |   3 -
 src/i18n/locales/it/settings.json             |   3 -
 src/i18n/locales/ja/settings.json             |   3 -
 src/i18n/locales/ko/settings.json             |   3 -
 src/i18n/locales/ru/settings.json             |   3 -
 src/i18n/locales/tr/settings.json             |   3 -
 src/i18n/locales/zh-CN/settings.json          |   3 -
 src/i18n/locales/zh-TW/settings.json          |   3 -
 src/index.css                                 | 142 ++++++++++++------
 tailwind.config.js                            |   4 +
 73 files changed, 788 insertions(+), 550 deletions(-)
 create mode 100644 src/components/chat/view/subcomponents/LoadAllMessagesOverlay.tsx
 create mode 100644 src/constants/branding.ts

diff --git a/index.html b/index.html
index 37d2217d..1fdfcc7c 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,15 @@
     
     
     CloudCLI UI
-    
+
+    
+    
+    
+    
+
     
     
     
diff --git a/src/components/auth/view/AuthErrorAlert.tsx b/src/components/auth/view/AuthErrorAlert.tsx
index 96a6be41..b9b65625 100644
--- a/src/components/auth/view/AuthErrorAlert.tsx
+++ b/src/components/auth/view/AuthErrorAlert.tsx
@@ -1,3 +1,5 @@
+import { AlertCircle } from 'lucide-react';
+
 type AuthErrorAlertProps = {
   errorMessage: string;
 };
@@ -8,8 +10,12 @@ export default function AuthErrorAlert({ errorMessage }: AuthErrorAlertProps) {
   }
 
   return (
-    

-      
{errorMessage}

+    

+      
+      
{errorMessage}

     

   );
 }
diff --git a/src/components/auth/view/AuthInputField.tsx b/src/components/auth/view/AuthInputField.tsx
index b382a059..86b68854 100644
--- a/src/components/auth/view/AuthInputField.tsx
+++ b/src/components/auth/view/AuthInputField.tsx
@@ -1,3 +1,7 @@
+import { useState } from 'react';
+import type { ComponentType } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+
 type AuthInputFieldProps = {
   id: string;
   label: string;
@@ -8,13 +12,14 @@ type AuthInputFieldProps = {
   type?: 'text' | 'password' | 'email';
   name?: string;
   autoComplete?: string;
+  icon?: ComponentType<{ className?: string }>;
 };
 
 /**
  * A labelled input field for authentication forms.
  * Renders a `