From 2207d05c1ca229214aa9c2e2c9f4d0827d421574 Mon Sep 17 00:00:00 2001 From: simosmik Date: Fri, 10 Apr 2026 13:06:16 +0000 Subject: [PATCH 01/14] feat: add branding, community links, GitHub star badge, and About settings tab --- docker/README.md | 10 +- docker/shared/start-cloudcli.sh | 4 +- public/api-docs.html | 4 +- public/sw.js | 6 +- server/cli.js | 10 +- server/index.js | 2 +- server/routes/agent.js | 2 +- server/services/notification-orchestrator.js | 2 +- .../auth/view/AuthLoadingScreen.tsx | 2 +- src/components/auth/view/AuthScreenLayout.tsx | 17 ++ src/components/auth/view/LoginForm.tsx | 2 +- src/components/auth/view/SetupForm.tsx | 2 +- src/components/settings/types/types.ts | 2 +- .../settings/view/PremiumFeatureCard.tsx | 46 +++++ src/components/settings/view/Settings.tsx | 3 + .../settings/view/SettingsMainTabs.tsx | 3 +- .../settings/view/SettingsSidebar.tsx | 3 +- .../settings/view/tabs/AboutTab.tsx | 166 ++++++++++++++++++ .../sections/content/McpServersContent.tsx | 12 +- .../api-settings/CredentialsSettingsTab.tsx | 9 - .../sections/VersionInfoSection.tsx | 130 ++++++++++++-- src/components/sidebar/view/Sidebar.tsx | 1 + .../view/subcomponents/GitHubStarBadge.tsx | 48 +++++ .../view/subcomponents/SidebarCollapsed.tsx | 15 +- .../view/subcomponents/SidebarContent.tsx | 3 + .../view/subcomponents/SidebarFooter.tsx | 56 +++++- .../view/subcomponents/SidebarHeader.tsx | 3 + src/hooks/useGitHubStars.ts | 77 ++++++++ src/i18n/locales/de/auth.json | 2 +- src/i18n/locales/de/common.json | 2 +- src/i18n/locales/de/settings.json | 3 +- src/i18n/locales/de/sidebar.json | 9 +- src/i18n/locales/en/auth.json | 2 +- src/i18n/locales/en/common.json | 2 +- src/i18n/locales/en/settings.json | 4 +- src/i18n/locales/en/sidebar.json | 9 +- src/i18n/locales/ja/auth.json | 2 +- src/i18n/locales/ja/common.json | 2 +- src/i18n/locales/ja/settings.json | 4 +- src/i18n/locales/ja/sidebar.json | 9 +- src/i18n/locales/ko/auth.json | 2 +- src/i18n/locales/ko/common.json | 2 +- src/i18n/locales/ko/settings.json | 4 +- src/i18n/locales/ko/sidebar.json | 9 +- src/i18n/locales/ru/auth.json | 2 +- src/i18n/locales/ru/common.json | 2 +- src/i18n/locales/ru/settings.json | 3 +- src/i18n/locales/ru/sidebar.json | 9 +- src/i18n/locales/zh-CN/auth.json | 2 +- src/i18n/locales/zh-CN/common.json | 2 +- src/i18n/locales/zh-CN/settings.json | 4 +- src/i18n/locales/zh-CN/sidebar.json | 9 +- 52 files changed, 654 insertions(+), 86 deletions(-) create mode 100644 src/components/settings/view/PremiumFeatureCard.tsx create mode 100644 src/components/settings/view/tabs/AboutTab.tsx create mode 100644 src/components/sidebar/view/subcomponents/GitHubStarBadge.tsx create mode 100644 src/hooks/useGitHubStars.ts diff --git a/docker/README.md b/docker/README.md index 38cccb18..780fcf93 100644 --- a/docker/README.md +++ b/docker/README.md @@ -1,4 +1,4 @@ -# Claude Code UI — Docker Sandbox Templates +# CloudCLI — Docker Sandbox Templates Run AI coding agents with a full web IDE inside [Docker Sandboxes](https://docs.docker.com/ai/sandboxes/). @@ -62,11 +62,11 @@ docker build -f docker/gemini/Dockerfile -t cloudcli-sandbox:gemini docker/ Each template extends Docker's official sandbox base image and adds: -1. **Node.js 22** — Runtime for Claude Code UI -2. **Claude Code UI** — Installed globally via `npm install -g @cloudcli-ai/cloudcli` +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. Claude Code UI connects to it and provides the web interface on top. +The agent (Claude Code, Codex, or Gemini) comes from the base image. CloudCLI connects to it and provides the web interface on top. ## Configuration @@ -86,4 +86,4 @@ sbx policy allow network "localhost:3001" ## License -These templates are free and open-source under the same license as Claude Code UI (AGPL-3.0-or-later). +These templates are free and open-source under the same license as CloudCLI (AGPL-3.0-or-later). diff --git a/docker/shared/start-cloudcli.sh b/docker/shared/start-cloudcli.sh index 26b6c8c0..145c35c5 100644 --- a/docker/shared/start-cloudcli.sh +++ b/docker/shared/start-cloudcli.sh @@ -1,6 +1,6 @@ #!/bin/bash -# Auto-start Claude Code UI server in background if not already running. +# 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 @@ -13,7 +13,7 @@ if ! pgrep -f "server/index.js" > /dev/null 2>&1; then disown echo "" - echo " Claude Code UI is starting on port 3001..." + echo " CloudCLI is starting on port 3001..." echo "" echo " To access the web UI, forward the port:" echo " sbx ports \$(hostname) --publish 3001:3001" diff --git a/public/api-docs.html b/public/api-docs.html index ec671ecc..1d86cf4c 100644 --- a/public/api-docs.html +++ b/public/api-docs.html @@ -3,7 +3,7 @@ - Claude Code UI - API Documentation + CloudCLI - API Documentation @@ -418,7 +418,7 @@
-

Claude Code UI

+

CloudCLI

API Documentation
diff --git a/public/sw.js b/public/sw.js index 9b4351bc..b909bf55 100755 --- 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) ); }); diff --git a/server/cli.js b/server/cli.js index 8359b6d7..39461673 100755 --- 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 diff --git a/server/index.js b/server/index.js index 235f143b..947df988 100755 --- a/server/index.js +++ b/server/index.js @@ -2548,7 +2548,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)}`); diff --git a/server/routes/agent.js b/server/routes/agent.js index d027b91c..cdcd3a65 100644 --- a/server/routes/agent.js +++ b/server/routes/agent.js @@ -1125,7 +1125,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}`); diff --git a/server/services/notification-orchestrator.js b/server/services/notification-orchestrator.js index bb573e10..d3d47dd6 100644 --- 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, diff --git a/src/components/auth/view/AuthLoadingScreen.tsx b/src/components/auth/view/AuthLoadingScreen.tsx index 36ecbc2f..9b4987d5 100644 --- a/src/components/auth/view/AuthLoadingScreen.tsx +++ b/src/components/auth/view/AuthLoadingScreen.tsx @@ -12,7 +12,7 @@ export default function AuthLoadingScreen() { -

Claude Code UI

+

CloudCLI

{loadingDotAnimationDelays.map((delay) => ( diff --git a/src/components/auth/view/AuthScreenLayout.tsx b/src/components/auth/view/AuthScreenLayout.tsx index 6651dbe0..d53ff95f 100644 --- 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({

{footerText}

+ + {!IS_PLATFORM && ( +
+ + + CloudCLI is open source + +
+ )}
diff --git a/src/components/auth/view/LoginForm.tsx b/src/components/auth/view/LoginForm.tsx index 4e0973e2..cf26ca3d 100644 --- a/src/components/auth/view/LoginForm.tsx +++ b/src/components/auth/view/LoginForm.tsx @@ -58,7 +58,7 @@ export default function LoginForm() {
} diff --git a/src/components/settings/types/types.ts b/src/components/settings/types/types.ts index 096059ce..e3af730b 100644 --- a/src/components/settings/types/types.ts +++ b/src/components/settings/types/types.ts @@ -1,6 +1,6 @@ import type { Dispatch, SetStateAction } from 'react'; -export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | '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'; diff --git a/src/components/settings/view/PremiumFeatureCard.tsx b/src/components/settings/view/PremiumFeatureCard.tsx new file mode 100644 index 00000000..07980d86 --- /dev/null +++ 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 ( +
+
+
+ {icon} +
+
+
+

{title}

+ +
+

+ {description} +

+ + {ctaText} + + +
+
+
+ ); +} diff --git a/src/components/settings/view/Settings.tsx b/src/components/settings/view/Settings.tsx index 444d0e06..70d3ea4d 100644 --- 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' && } {activeTab === 'plugins' && } + + {activeTab === 'about' && } diff --git a/src/components/settings/view/SettingsMainTabs.tsx b/src/components/settings/view/SettingsMainTabs.tsx index d085d545..5c15f6de 100644 --- 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) { diff --git a/src/components/settings/view/SettingsSidebar.tsx b/src/components/settings/view/SettingsSidebar.tsx index e6f56f46..149c1492 100644 --- 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) { diff --git a/src/components/settings/view/tabs/AboutTab.tsx b/src/components/settings/view/tabs/AboutTab.tsx new file mode 100644 index 00000000..027af75e --- /dev/null +++ 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 ( + + ); +} + +function DiscordIcon({ className }: { className?: string }) { + return ( + + ); +} + +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 ( +
+ {/* Logo + name + version */} +
+
+ +
+
+ +

+ Open-source AI coding assistant interface +

+
+
+ + {/* Star on GitHub button */} + + + + Star on GitHub + + + {/* Links */} + + + {/* Hosted CTA (OSS mode only) */} + {!IS_PLATFORM && ( +
+

Try CloudCLI Hosted

+

+ Team collaboration, shared MCP configs, settings sync across environments, and managed infrastructure. +

+ + Learn more + + +
+ )} + + {/* Premium feature placeholders (OSS mode only) */} + {!IS_PLATFORM && ( +
+

CloudCLI Pro Features

+ } + title="Sync Settings" + description="Keep your preferences, MCP configs, and theme in sync across all your environments." + /> + } + title="Team Management" + description="Multiple users, role-based access, and shared projects for your team." + /> +
+ )} + + {/* License */} +
+

+ Licensed under AGPL-3.0 +

+
+
+ ); +} diff --git a/src/components/settings/view/tabs/agents-settings/sections/content/McpServersContent.tsx b/src/components/settings/view/tabs/agents-settings/sections/content/McpServersContent.tsx index 9db223a1..c62f8f8f 100644 --- 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({
{t('mcpServers.empty')}
)} + + {!IS_PLATFORM && ( + } + title="Team MCP Configs" + description="Share MCP server configurations across your team. Everyone stays in sync automatically." + /> + )} ); } diff --git a/src/components/settings/view/tabs/api-settings/CredentialsSettingsTab.tsx b/src/components/settings/view/tabs/api-settings/CredentialsSettingsTab.tsx index 0f475125..89d440c3 100644 --- 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} /> - ); } diff --git a/src/components/settings/view/tabs/api-settings/sections/VersionInfoSection.tsx b/src/components/settings/view/tabs/api-settings/sections/VersionInfoSection.tsx index 01b1fa2e..a7d5f83b 100644 --- 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 ( + + ); +} + +function DiscordIcon({ className }: { className?: string }) { + return ( + + ); +} + 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 (
-
+ {/* About CloudCLI */} +
+ {/* Logo + name + version */} +
+
+ +
+
+ +

+ Open-source AI coding assistant interface +

+
+
+ + {/* Star on GitHub button */} - v{currentVersion} + + + Star on GitHub - {updateAvailable && latestVersion && ( + + {/* Links */} + + + {/* Hosted CTA (OSS mode only) */} + {!IS_PLATFORM && ( +
+

Try CloudCLI Hosted

+

+ Team collaboration, shared MCP configs, settings sync across environments, and managed infrastructure. +

+ + Learn more + + +
)}
diff --git a/src/components/sidebar/view/Sidebar.tsx b/src/components/sidebar/view/Sidebar.tsx index cba08749..fefb6dca 100644 --- 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} diff --git a/src/components/sidebar/view/subcomponents/GitHubStarBadge.tsx b/src/components/sidebar/view/subcomponents/GitHubStarBadge.tsx new file mode 100644 index 00000000..539710c4 --- /dev/null +++ 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 ( + + ); +} + +export default function GitHubStarBadge() { + const { formattedCount, isDismissed, dismiss } = useGitHubStars('siteboon', 'claudecodeui'); + + if (IS_PLATFORM || isDismissed) return null; + + return ( +
+ + + + Star + {formattedCount && ( + {formattedCount} + )} + + +
+ ); +} diff --git a/src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx b/src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx index e09ceb87..90a6338f 100644 --- 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({ + {/* Report Issue */} + + + + {/* Discord */} 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} diff --git a/src/components/sidebar/view/subcomponents/SidebarFooter.tsx b/src/components/sidebar/view/subcomponents/SidebarFooter.tsx index afa0c6a1..b024be30 100644 --- 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 */}
- {/* Desktop Discord */} + {/* Desktop Report Issue */} + + {/* Desktop Discord */} + - {/* Mobile Discord */} + {/* Desktop version brand line (OSS mode only) */} + {!IS_PLATFORM && ( + + )} + + {/* Mobile Report Issue */} + + {/* Mobile Discord */} + + + {/* Search bar */} {projectsCount > 0 && !isLoading && (
diff --git a/src/hooks/useGitHubStars.ts b/src/hooks/useGitHubStars.ts new file mode 100644 index 00000000..2e731817 --- /dev/null +++ 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(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 }; +}; diff --git a/src/i18n/locales/de/auth.json b/src/i18n/locales/de/auth.json index 9b8327cb..0a1d5226 100644 --- 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", diff --git a/src/i18n/locales/de/common.json b/src/i18n/locales/de/common.json index 1b1d4c7d..bc4c7473 100644 --- 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.", diff --git a/src/i18n/locales/de/settings.json b/src/i18n/locales/de/settings.json index 25c289dd..84f5e2db 100644 --- 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": { diff --git a/src/i18n/locales/de/sidebar.json b/src/i18n/locales/de/sidebar.json index 8727f103..8b26756c 100644 --- 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", diff --git a/src/i18n/locales/en/auth.json b/src/i18n/locales/en/auth.json index 2788855f..5ca25fd2 100644 --- 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", diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json index 928bdaf1..0d25fedf 100644 --- 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.", diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json index 8596e045..ce3de906 100644 --- 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", diff --git a/src/i18n/locales/en/sidebar.json b/src/i18n/locales/en/sidebar.json index a56c1b84..eab0a3f3 100644 --- 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", diff --git a/src/i18n/locales/ja/auth.json b/src/i18n/locales/ja/auth.json index ce946497..d1ba9fd8 100644 --- 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": "サインイン", diff --git a/src/i18n/locales/ja/common.json b/src/i18n/locales/ja/common.json index 59c33c98..097eb057 100644 --- 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とコーディングを始めましょう。各プロジェクトにはチャットセッションとファイル履歴が含まれています。", diff --git a/src/i18n/locales/ja/settings.json b/src/i18n/locales/ja/settings.json index 60b454ca..c9cc282d 100644 --- 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": "通知", diff --git a/src/i18n/locales/ja/sidebar.json b/src/i18n/locales/ja/sidebar.json index 17813411..4590c752 100644 --- 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": "アクティブ", diff --git a/src/i18n/locales/ko/auth.json b/src/i18n/locales/ko/auth.json index ebfef608..08f09e74 100644 --- 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": "로그인", diff --git a/src/i18n/locales/ko/common.json b/src/i18n/locales/ko/common.json index 95004280..b3554401 100644 --- 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와 코딩을 시작하세요. 각 프로젝트에는 채팅 세션과 파일 히스토리가 포함됩니다.", diff --git a/src/i18n/locales/ko/settings.json b/src/i18n/locales/ko/settings.json index b8a1f450..1071cc37 100644 --- 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": "알림", diff --git a/src/i18n/locales/ko/sidebar.json b/src/i18n/locales/ko/sidebar.json index 2eaca911..cda7eab2 100644 --- 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": "활성", diff --git a/src/i18n/locales/ru/auth.json b/src/i18n/locales/ru/auth.json index b81fd562..919a4a30 100644 --- 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": "Войти", diff --git a/src/i18n/locales/ru/common.json b/src/i18n/locales/ru/common.json index 665ab6f8..906b78eb 100644 --- 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. Каждый проект содержит ваши сеансы чата и историю файлов.", diff --git a/src/i18n/locales/ru/settings.json b/src/i18n/locales/ru/settings.json index f8991ab0..da287733 100644 --- 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": { diff --git a/src/i18n/locales/ru/sidebar.json b/src/i18n/locales/ru/sidebar.json index d79a9d3d..71250d2f 100644 --- 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": "Активен", diff --git a/src/i18n/locales/zh-CN/auth.json b/src/i18n/locales/zh-CN/auth.json index 3905c2bd..3d790f37 100644 --- 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": "登录", diff --git a/src/i18n/locales/zh-CN/common.json b/src/i18n/locales/zh-CN/common.json index 710daf5e..936fe5b2 100644 --- a/src/i18n/locales/zh-CN/common.json +++ b/src/i18n/locales/zh-CN/common.json @@ -84,7 +84,7 @@ "openInEditor": "在编辑器中打开" }, "mainContent": { - "loading": "正在加载 Claude Code UI", + "loading": "正在加载 CloudCLI", "settingUpWorkspace": "正在设置您的工作空间...", "chooseProject": "选择您的项目", "selectProjectDescription": "从侧边栏选择一个项目以开始使用 Claude 进行编程。每个项目包含您的聊天会话和文件历史。", diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json index d9f2b2cd..789eb612 100644 --- a/src/i18n/locales/zh-CN/settings.json +++ b/src/i18n/locales/zh-CN/settings.json @@ -106,8 +106,8 @@ "apiTokens": "API 和令牌", "tasks": "任务", "notifications": "通知", - "plugins": "插件" - + "plugins": "插件", + "about": "关于" }, "notifications": { "title": "通知", diff --git a/src/i18n/locales/zh-CN/sidebar.json b/src/i18n/locales/zh-CN/sidebar.json index 27cacec5..3a28778c 100644 --- a/src/i18n/locales/zh-CN/sidebar.json +++ b/src/i18n/locales/zh-CN/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": "活动", From 590dd42649424ab990353fcf59ce0965036d3d25 Mon Sep 17 00:00:00 2001 From: Haile <118998054+blackmammoth@users.noreply.github.com> Date: Fri, 10 Apr 2026 16:34:34 +0300 Subject: [PATCH 02/14] refactor: remove unused whispher transcribe logic (#637) --- server/index.js | 149 ------------- .../chat/hooks/useChatComposerState.ts | 25 --- src/components/chat/view/ChatInterface.tsx | 2 - .../chat/view/subcomponents/ChatComposer.tsx | 7 - .../git-panel/view/changes/CommitComposer.tsx | 8 - .../mic-button/constants/constants.ts | 45 ---- src/components/mic-button/data/whisper.ts | 52 ----- .../hooks/useMicButtonController.ts | 204 ------------------ src/components/mic-button/types/types.ts | 2 - src/components/mic-button/view/MicButton.tsx | 32 --- .../mic-button/view/MicButtonView.tsx | 86 -------- .../quick-settings-panel/constants.ts | 38 +--- .../hooks/useWhisperMode.ts | 59 ----- src/components/quick-settings-panel/types.ts | 16 -- .../view/QuickSettingsContent.tsx | 3 - .../view/QuickSettingsWhisperSection.tsx | 44 ---- src/i18n/locales/de/settings.json | 13 +- src/i18n/locales/en/settings.json | 15 +- src/i18n/locales/ja/settings.json | 15 +- src/i18n/locales/ko/settings.json | 15 +- src/i18n/locales/ru/settings.json | 15 +- src/i18n/locales/zh-CN/settings.json | 15 +- src/utils/api.js | 7 - 23 files changed, 12 insertions(+), 855 deletions(-) delete mode 100644 src/components/mic-button/constants/constants.ts delete mode 100644 src/components/mic-button/data/whisper.ts delete mode 100644 src/components/mic-button/hooks/useMicButtonController.ts delete mode 100644 src/components/mic-button/types/types.ts delete mode 100644 src/components/mic-button/view/MicButton.tsx delete mode 100644 src/components/mic-button/view/MicButtonView.tsx delete mode 100644 src/components/quick-settings-panel/hooks/useWhisperMode.ts delete mode 100644 src/components/quick-settings-panel/view/QuickSettingsWhisperSection.tsx diff --git a/server/index.js b/server/index.js index 947df988..d295fae4 100755 --- a/server/index.js +++ b/server/index.js @@ -1984,155 +1984,6 @@ function handleShellConnection(ws) { console.error('[ERROR] Shell WebSocket error:', error); }); } -// Audio transcription endpoint -app.post('/api/transcribe', authenticateToken, async (req, res) => { - try { - const multer = (await import('multer')).default; - const upload = multer({ storage: multer.memoryStorage() }); - - // Handle multipart form data - upload.single('audio')(req, res, async (err) => { - if (err) { - return res.status(400).json({ error: 'Failed to process audio file' }); - } - - if (!req.file) { - return res.status(400).json({ error: 'No audio file provided' }); - } - - const apiKey = process.env.OPENAI_API_KEY; - if (!apiKey) { - return res.status(500).json({ error: 'OpenAI API key not configured. Please set OPENAI_API_KEY in server environment.' }); - } - - try { - // Create form data for OpenAI - const FormData = (await import('form-data')).default; - const formData = new FormData(); - formData.append('file', req.file.buffer, { - filename: req.file.originalname, - contentType: req.file.mimetype - }); - formData.append('model', 'whisper-1'); - formData.append('response_format', 'json'); - formData.append('language', 'en'); - - // Make request to OpenAI - const response = await fetch('https://api.openai.com/v1/audio/transcriptions', { - method: 'POST', - headers: { - 'Authorization': `Bearer ${apiKey}`, - ...formData.getHeaders() - }, - body: formData - }); - - if (!response.ok) { - const errorData = await response.json().catch(() => ({})); - throw new Error(errorData.error?.message || `Whisper API error: ${response.status}`); - } - - const data = await response.json(); - let transcribedText = data.text || ''; - - // Check if enhancement mode is enabled - const mode = req.body.mode || 'default'; - - // If no transcribed text, return empty - if (!transcribedText) { - return res.json({ text: '' }); - } - - // If default mode, return transcribed text without enhancement - if (mode === 'default') { - return res.json({ text: transcribedText }); - } - - // Handle different enhancement modes - try { - const OpenAI = (await import('openai')).default; - const openai = new OpenAI({ apiKey }); - - let prompt, systemMessage, temperature = 0.7, maxTokens = 800; - - switch (mode) { - case 'prompt': - systemMessage = 'You are an expert prompt engineer who creates clear, detailed, and effective prompts.'; - prompt = `You are an expert prompt engineer. Transform the following rough instruction into a clear, detailed, and context-aware AI prompt. - -Your enhanced prompt should: -1. Be specific and unambiguous -2. Include relevant context and constraints -3. Specify the desired output format -4. Use clear, actionable language -5. Include examples where helpful -6. Consider edge cases and potential ambiguities - -Transform this rough instruction into a well-crafted prompt: -"${transcribedText}" - -Enhanced prompt:`; - break; - - case 'vibe': - case 'instructions': - case 'architect': - systemMessage = 'You are a helpful assistant that formats ideas into clear, actionable instructions for AI agents.'; - temperature = 0.5; // Lower temperature for more controlled output - prompt = `Transform the following idea into clear, well-structured instructions that an AI agent can easily understand and execute. - -IMPORTANT RULES: -- Format as clear, step-by-step instructions -- Add reasonable implementation details based on common patterns -- Only include details directly related to what was asked -- Do NOT add features or functionality not mentioned -- Keep the original intent and scope intact -- Use clear, actionable language an agent can follow - -Transform this idea into agent-friendly instructions: -"${transcribedText}" - -Agent instructions:`; - break; - - default: - // No enhancement needed - break; - } - - // Only make GPT call if we have a prompt - if (prompt) { - const completion = await openai.chat.completions.create({ - model: 'gpt-4o-mini', - messages: [ - { role: 'system', content: systemMessage }, - { role: 'user', content: prompt } - ], - temperature: temperature, - max_tokens: maxTokens - }); - - transcribedText = completion.choices[0].message.content || transcribedText; - } - - } catch (gptError) { - console.error('GPT processing error:', gptError); - // Fall back to original transcription if GPT fails - } - - res.json({ text: transcribedText }); - - } catch (error) { - console.error('Transcription error:', error); - res.status(500).json({ error: error.message }); - } - }); - } catch (error) { - console.error('Endpoint error:', error); - res.status(500).json({ error: 'Internal server error' }); - } -}); - // Image upload endpoint app.post('/api/projects/:projectName/upload-images', authenticateToken, async (req, res) => { try { diff --git a/src/components/chat/hooks/useChatComposerState.ts b/src/components/chat/hooks/useChatComposerState.ts index 6e84982d..858faff9 100644 --- a/src/components/chat/hooks/useChatComposerState.ts +++ b/src/components/chat/hooks/useChatComposerState.ts @@ -878,30 +878,6 @@ export function useChatComposerState({ }); }, [canAbortSession, currentSessionId, pendingViewSessionRef, provider, selectedSession?.id, sendMessage]); - const handleTranscript = useCallback((text: string) => { - if (!text.trim()) { - return; - } - - setInput((previousInput) => { - const newInput = previousInput.trim() ? `${previousInput} ${text}` : text; - inputValueRef.current = newInput; - - setTimeout(() => { - if (!textareaRef.current) { - return; - } - - textareaRef.current.style.height = 'auto'; - textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; - const lineHeight = parseInt(window.getComputedStyle(textareaRef.current).lineHeight); - setIsTextareaExpanded(textareaRef.current.scrollHeight > lineHeight * 2); - }, 0); - - return newInput; - }); - }, []); - const handleGrantToolPermission = useCallback( (suggestion: { entry: string; toolName: string }) => { if (!suggestion || provider !== 'claude') { @@ -994,7 +970,6 @@ export function useChatComposerState({ syncInputOverlayScroll, handleClearInput, handleAbortSession, - handleTranscript, handlePermissionDecision, handleGrantToolPermission, handleInputFocusChange, diff --git a/src/components/chat/view/ChatInterface.tsx b/src/components/chat/view/ChatInterface.tsx index cb78222c..19483f64 100644 --- a/src/components/chat/view/ChatInterface.tsx +++ b/src/components/chat/view/ChatInterface.tsx @@ -165,7 +165,6 @@ function ChatInterface({ syncInputOverlayScroll, handleClearInput, handleAbortSession, - handleTranscript, handlePermissionDecision, handleGrantToolPermission, handleInputFocusChange, @@ -407,7 +406,6 @@ function ChatInterface({ })} isTextareaExpanded={isTextareaExpanded} sendByCtrlEnter={sendByCtrlEnter} - onTranscript={handleTranscript} />
diff --git a/src/components/chat/view/subcomponents/ChatComposer.tsx b/src/components/chat/view/subcomponents/ChatComposer.tsx index 2bf8eb50..e6da236d 100644 --- a/src/components/chat/view/subcomponents/ChatComposer.tsx +++ b/src/components/chat/view/subcomponents/ChatComposer.tsx @@ -11,7 +11,6 @@ import type { SetStateAction, TouchEvent, } from 'react'; -import MicButton from '../../../mic-button/view/MicButton'; import type { PendingPermissionRequest, PermissionMode, Provider } from '../../types/types'; import CommandMenu from './CommandMenu'; import ClaudeStatus from './ClaudeStatus'; @@ -91,7 +90,6 @@ interface ChatComposerProps { placeholder: string; isTextareaExpanded: boolean; sendByCtrlEnter?: boolean; - onTranscript: (text: string) => void; } export default function ChatComposer({ @@ -148,7 +146,6 @@ export default function ChatComposer({ placeholder, isTextareaExpanded, sendByCtrlEnter, - onTranscript, }: ChatComposerProps) { const { t } = useTranslation('chat'); const textareaRect = textareaRef.current?.getBoundingClientRect(); @@ -321,10 +318,6 @@ export default function ChatComposer({ -
- -
- -
- setCommitMessage(transcript)} - mode="default" - className="p-1.5" - /> -
diff --git a/src/components/mic-button/constants/constants.ts b/src/components/mic-button/constants/constants.ts deleted file mode 100644 index 3bfbe62d..00000000 --- a/src/components/mic-button/constants/constants.ts +++ /dev/null @@ -1,45 +0,0 @@ -import type { MicButtonState } from '../types/types'; - -export const MIC_BUTTON_STATES = { - IDLE: 'idle', - RECORDING: 'recording', - TRANSCRIBING: 'transcribing', - PROCESSING: 'processing', -} as const; - -export const MIC_TAP_DEBOUNCE_MS = 300; -export const PROCESSING_STATE_DELAY_MS = 2000; - -export const DEFAULT_WHISPER_MODE = 'default'; - -// Modes that use post-transcription enhancement on the backend. -export const ENHANCEMENT_WHISPER_MODES = new Set([ - 'prompt', - 'vibe', - 'instructions', - 'architect', -]); - -export const BUTTON_BACKGROUND_BY_STATE: Record = { - idle: '#374151', - recording: '#ef4444', - transcribing: '#3b82f6', - processing: '#a855f7', -}; - -export const MIC_ERROR_BY_NAME = { - NotAllowedError: 'Microphone access denied. Please allow microphone permissions.', - NotFoundError: 'No microphone found. Please check your audio devices.', - NotSupportedError: 'Microphone not supported by this browser.', - NotReadableError: 'Microphone is being used by another application.', -} as const; - -export const MIC_NOT_AVAILABLE_ERROR = - 'Microphone access not available. Please use HTTPS or a supported browser.'; - -export const MIC_NOT_SUPPORTED_ERROR = - 'Microphone not supported. Please use HTTPS or a modern browser.'; - -export const MIC_SECURE_CONTEXT_ERROR = - 'Microphone requires HTTPS. Please use a secure connection.'; - diff --git a/src/components/mic-button/data/whisper.ts b/src/components/mic-button/data/whisper.ts deleted file mode 100644 index be204d32..00000000 --- a/src/components/mic-button/data/whisper.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { api } from '../../../utils/api'; - -type WhisperStatus = 'transcribing'; - -type WhisperResponse = { - text?: string; - error?: string; -}; - -export async function transcribeWithWhisper( - audioBlob: Blob, - onStatusChange?: (status: WhisperStatus) => void, -): Promise { - const formData = new FormData(); - const fileName = `recording_${Date.now()}.webm`; - const file = new File([audioBlob], fileName, { type: audioBlob.type }); - - formData.append('audio', file); - - const whisperMode = window.localStorage.getItem('whisperMode') || 'default'; - formData.append('mode', whisperMode); - - try { - // Keep existing status callback behavior. - if (onStatusChange) { - onStatusChange('transcribing'); - } - - const response = (await api.transcribe(formData)) as Response; - - if (!response.ok) { - const errorData = (await response.json().catch(() => ({}))) as WhisperResponse; - throw new Error( - errorData.error || - `Transcription error: ${response.status} ${response.statusText}`, - ); - } - - const data = (await response.json()) as WhisperResponse; - return data.text || ''; - } catch (error) { - if ( - error instanceof Error - && error.name === 'TypeError' - && error.message.includes('fetch') - ) { - throw new Error('Cannot connect to server. Please ensure the backend is running.'); - } - throw error; - } -} - diff --git a/src/components/mic-button/hooks/useMicButtonController.ts b/src/components/mic-button/hooks/useMicButtonController.ts deleted file mode 100644 index dfddec78..00000000 --- a/src/components/mic-button/hooks/useMicButtonController.ts +++ /dev/null @@ -1,204 +0,0 @@ -import { useEffect, useRef, useState } from 'react'; -import type { MouseEvent } from 'react'; -import { transcribeWithWhisper } from '../data/whisper'; -import { - DEFAULT_WHISPER_MODE, - ENHANCEMENT_WHISPER_MODES, - MIC_BUTTON_STATES, - MIC_ERROR_BY_NAME, - MIC_NOT_AVAILABLE_ERROR, - MIC_NOT_SUPPORTED_ERROR, - MIC_SECURE_CONTEXT_ERROR, - MIC_TAP_DEBOUNCE_MS, - PROCESSING_STATE_DELAY_MS, -} from '../constants/constants'; -import type { MicButtonState } from '../types/types'; - -type UseMicButtonControllerArgs = { - onTranscript?: (transcript: string) => void; -}; - -type UseMicButtonControllerResult = { - state: MicButtonState; - error: string | null; - isSupported: boolean; - handleButtonClick: (event?: MouseEvent) => void; -}; - -const getRecordingErrorMessage = (error: unknown): string => { - if (error instanceof Error && error.message.includes('HTTPS')) { - return error.message; - } - - if (error instanceof DOMException) { - return MIC_ERROR_BY_NAME[error.name as keyof typeof MIC_ERROR_BY_NAME] || 'Microphone access failed'; - } - - return 'Microphone access failed'; -}; - -const getRecorderMimeType = (): string => ( - MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' : 'audio/mp4' -); - -export function useMicButtonController({ - onTranscript, -}: UseMicButtonControllerArgs): UseMicButtonControllerResult { - const [state, setState] = useState(MIC_BUTTON_STATES.IDLE); - const [error, setError] = useState(null); - const [isSupported, setIsSupported] = useState(true); - - const mediaRecorderRef = useRef(null); - const streamRef = useRef(null); - const chunksRef = useRef([]); - const lastTapRef = useRef(0); - const processingTimerRef = useRef(null); - - const clearProcessingTimer = (): void => { - if (processingTimerRef.current !== null) { - window.clearTimeout(processingTimerRef.current); - processingTimerRef.current = null; - } - }; - - const stopStreamTracks = (): void => { - if (!streamRef.current) { - return; - } - - streamRef.current.getTracks().forEach((track) => track.stop()); - streamRef.current = null; - }; - - const handleStopRecording = async (mimeType: string): Promise => { - const audioBlob = new Blob(chunksRef.current, { type: mimeType }); - - // Release the microphone immediately once recording ends. - stopStreamTracks(); - setState(MIC_BUTTON_STATES.TRANSCRIBING); - - const whisperMode = window.localStorage.getItem('whisperMode') || DEFAULT_WHISPER_MODE; - const shouldShowProcessingState = ENHANCEMENT_WHISPER_MODES.has(whisperMode); - - if (shouldShowProcessingState) { - processingTimerRef.current = window.setTimeout(() => { - setState(MIC_BUTTON_STATES.PROCESSING); - }, PROCESSING_STATE_DELAY_MS); - } - - try { - const transcript = await transcribeWithWhisper(audioBlob); - if (transcript && onTranscript) { - onTranscript(transcript); - } - } catch (transcriptionError) { - const message = transcriptionError instanceof Error ? transcriptionError.message : 'Transcription error'; - setError(message); - } finally { - clearProcessingTimer(); - setState(MIC_BUTTON_STATES.IDLE); - } - }; - - const startRecording = async (): Promise => { - try { - setError(null); - chunksRef.current = []; - - if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { - throw new Error(MIC_NOT_AVAILABLE_ERROR); - } - - const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); - streamRef.current = stream; - - const mimeType = getRecorderMimeType(); - const recorder = new MediaRecorder(stream, { mimeType }); - mediaRecorderRef.current = recorder; - - recorder.ondataavailable = (event: BlobEvent) => { - if (event.data.size > 0) { - chunksRef.current.push(event.data); - } - }; - - recorder.onstop = () => { - void handleStopRecording(mimeType); - }; - - recorder.start(); - setState(MIC_BUTTON_STATES.RECORDING); - } catch (recordingError) { - stopStreamTracks(); - setError(getRecordingErrorMessage(recordingError)); - setState(MIC_BUTTON_STATES.IDLE); - } - }; - - const stopRecording = (): void => { - if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') { - mediaRecorderRef.current.stop(); - return; - } - - stopStreamTracks(); - setState(MIC_BUTTON_STATES.IDLE); - }; - - const handleButtonClick = (event?: MouseEvent): void => { - if (event) { - event.preventDefault(); - event.stopPropagation(); - } - - if (!isSupported) { - return; - } - - // Mobile tap handling can trigger duplicate click events in quick succession. - const now = Date.now(); - if (now - lastTapRef.current < MIC_TAP_DEBOUNCE_MS) { - return; - } - lastTapRef.current = now; - - if (state === MIC_BUTTON_STATES.IDLE) { - void startRecording(); - return; - } - - if (state === MIC_BUTTON_STATES.RECORDING) { - stopRecording(); - } - }; - - useEffect(() => { - // getUserMedia needs both browser support and a secure context. - if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { - setIsSupported(false); - setError(MIC_NOT_SUPPORTED_ERROR); - return; - } - - if (location.protocol !== 'https:' && location.hostname !== 'localhost') { - setIsSupported(false); - setError(MIC_SECURE_CONTEXT_ERROR); - return; - } - - setIsSupported(true); - setError(null); - }, []); - - useEffect(() => () => { - clearProcessingTimer(); - stopStreamTracks(); - }, []); - - return { - state, - error, - isSupported, - handleButtonClick, - }; -} diff --git a/src/components/mic-button/types/types.ts b/src/components/mic-button/types/types.ts deleted file mode 100644 index c0469822..00000000 --- a/src/components/mic-button/types/types.ts +++ /dev/null @@ -1,2 +0,0 @@ -export type MicButtonState = 'idle' | 'recording' | 'transcribing' | 'processing'; - diff --git a/src/components/mic-button/view/MicButton.tsx b/src/components/mic-button/view/MicButton.tsx deleted file mode 100644 index 72926cef..00000000 --- a/src/components/mic-button/view/MicButton.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { useMicButtonController } from '../hooks/useMicButtonController'; -import MicButtonView from './MicButtonView'; - -type MicButtonProps = { - onTranscript?: (transcript: string) => void; - className?: string; - mode?: string; -}; - -export default function MicButton({ - onTranscript, - className = '', - mode: _mode, -}: MicButtonProps) { - const { state, error, isSupported, handleButtonClick } = useMicButtonController({ - onTranscript, - }); - - // Keep `mode` in the public props for backwards compatibility. - void _mode; - - return ( - - ); -} - diff --git a/src/components/mic-button/view/MicButtonView.tsx b/src/components/mic-button/view/MicButtonView.tsx deleted file mode 100644 index 7471ca5c..00000000 --- a/src/components/mic-button/view/MicButtonView.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { Brain, Loader2, Mic } from 'lucide-react'; -import type { MouseEvent, ReactElement } from 'react'; -import { BUTTON_BACKGROUND_BY_STATE, MIC_BUTTON_STATES } from '../constants/constants'; -import type { MicButtonState } from '../types/types'; - -type MicButtonViewProps = { - state: MicButtonState; - error: string | null; - isSupported: boolean; - className: string; - onButtonClick: (event?: MouseEvent) => void; -}; - -const getButtonIcon = (state: MicButtonState, isSupported: boolean): ReactElement => { - if (!isSupported) { - return ; - } - - if (state === MIC_BUTTON_STATES.TRANSCRIBING) { - return ; - } - - if (state === MIC_BUTTON_STATES.PROCESSING) { - return ; - } - - if (state === MIC_BUTTON_STATES.RECORDING) { - return ; - } - - return ; -}; - -export default function MicButtonView({ - state, - error, - isSupported, - className, - onButtonClick, -}: MicButtonViewProps) { - const isDisabled = !isSupported || state === MIC_BUTTON_STATES.TRANSCRIBING || state === MIC_BUTTON_STATES.PROCESSING; - const icon = getButtonIcon(state, isSupported); - - return ( -
- - - {error && ( -
- {error} -
- )} - - {state === MIC_BUTTON_STATES.RECORDING && ( -
- )} - - {state === MIC_BUTTON_STATES.PROCESSING && ( -
- )} -
- ); -} diff --git a/src/components/quick-settings-panel/constants.ts b/src/components/quick-settings-panel/constants.ts index 5f1a8e21..15c15458 100644 --- a/src/components/quick-settings-panel/constants.ts +++ b/src/components/quick-settings-panel/constants.ts @@ -2,21 +2,12 @@ import { ArrowDown, Brain, Eye, - FileText, Languages, Maximize2, - Mic, - Sparkles, } from 'lucide-react'; -import type { - PreferenceToggleItem, - WhisperMode, - WhisperOption, -} from './types'; +import type { PreferenceToggleItem } from './types'; export const HANDLE_POSITION_STORAGE_KEY = 'quickSettingsHandlePosition'; -export const WHISPER_MODE_STORAGE_KEY = 'whisperMode'; -export const WHISPER_MODE_CHANGED_EVENT = 'whisperModeChanged'; export const DEFAULT_HANDLE_POSITION = 50; export const HANDLE_POSITION_MIN = 10; @@ -64,30 +55,3 @@ export const INPUT_SETTING_TOGGLES: PreferenceToggleItem[] = [ icon: Languages, }, ]; - -export const WHISPER_OPTIONS: WhisperOption[] = [ - { - value: 'default', - titleKey: 'quickSettings.whisper.modes.default', - descriptionKey: 'quickSettings.whisper.modes.defaultDescription', - icon: Mic, - }, - { - value: 'prompt', - titleKey: 'quickSettings.whisper.modes.prompt', - descriptionKey: 'quickSettings.whisper.modes.promptDescription', - icon: Sparkles, - }, - { - value: 'vibe', - titleKey: 'quickSettings.whisper.modes.vibe', - descriptionKey: 'quickSettings.whisper.modes.vibeDescription', - icon: FileText, - }, -]; - -export const VIBE_MODE_ALIASES: WhisperMode[] = [ - 'vibe', - 'instructions', - 'architect', -]; diff --git a/src/components/quick-settings-panel/hooks/useWhisperMode.ts b/src/components/quick-settings-panel/hooks/useWhisperMode.ts deleted file mode 100644 index eeda67ce..00000000 --- a/src/components/quick-settings-panel/hooks/useWhisperMode.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { useCallback, useState } from 'react'; -import { - VIBE_MODE_ALIASES, - WHISPER_MODE_CHANGED_EVENT, - WHISPER_MODE_STORAGE_KEY, -} from '../constants'; -import type { WhisperMode, WhisperOptionValue } from '../types'; - -const ALL_VALID_MODES: WhisperMode[] = [ - 'default', - 'prompt', - 'vibe', - 'instructions', - 'architect', -]; - -const isWhisperMode = (value: string): value is WhisperMode => ( - ALL_VALID_MODES.includes(value as WhisperMode) -); - -const readStoredMode = (): WhisperMode => { - if (typeof window === 'undefined') { - return 'default'; - } - - const storedValue = localStorage.getItem(WHISPER_MODE_STORAGE_KEY); - if (!storedValue) { - return 'default'; - } - - return isWhisperMode(storedValue) ? storedValue : 'default'; -}; - -export function useWhisperMode() { - const [whisperMode, setWhisperModeState] = useState(readStoredMode); - - const setWhisperMode = useCallback((value: WhisperOptionValue) => { - setWhisperModeState(value); - localStorage.setItem(WHISPER_MODE_STORAGE_KEY, value); - window.dispatchEvent(new Event(WHISPER_MODE_CHANGED_EVENT)); - }, []); - - const isOptionSelected = useCallback( - (value: WhisperOptionValue) => { - if (value === 'vibe') { - return VIBE_MODE_ALIASES.includes(whisperMode); - } - - return whisperMode === value; - }, - [whisperMode], - ); - - return { - whisperMode, - setWhisperMode, - isOptionSelected, - }; -} diff --git a/src/components/quick-settings-panel/types.ts b/src/components/quick-settings-panel/types.ts index 4a12fc01..16002694 100644 --- a/src/components/quick-settings-panel/types.ts +++ b/src/components/quick-settings-panel/types.ts @@ -16,20 +16,4 @@ export type PreferenceToggleItem = { icon: LucideIcon; }; -export type WhisperMode = - | 'default' - | 'prompt' - | 'vibe' - | 'instructions' - | 'architect'; - -export type WhisperOptionValue = 'default' | 'prompt' | 'vibe'; - -export type WhisperOption = { - value: WhisperOptionValue; - titleKey: string; - descriptionKey: string; - icon: LucideIcon; -}; - export type QuickSettingsHandleStyle = CSSProperties; diff --git a/src/components/quick-settings-panel/view/QuickSettingsContent.tsx b/src/components/quick-settings-panel/view/QuickSettingsContent.tsx index 60d19912..8d805fe9 100644 --- a/src/components/quick-settings-panel/view/QuickSettingsContent.tsx +++ b/src/components/quick-settings-panel/view/QuickSettingsContent.tsx @@ -15,7 +15,6 @@ import type { } from '../types'; import QuickSettingsSection from './QuickSettingsSection'; import QuickSettingsToggleRow from './QuickSettingsToggleRow'; -import QuickSettingsWhisperSection from './QuickSettingsWhisperSection'; type QuickSettingsContentProps = { isDarkMode: boolean; @@ -73,8 +72,6 @@ export default function QuickSettingsContent({ {t('quickSettings.sendByCtrlEnterDescription')}

- -
); } diff --git a/src/components/quick-settings-panel/view/QuickSettingsWhisperSection.tsx b/src/components/quick-settings-panel/view/QuickSettingsWhisperSection.tsx deleted file mode 100644 index 9eb5f744..00000000 --- a/src/components/quick-settings-panel/view/QuickSettingsWhisperSection.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { useTranslation } from 'react-i18next'; -import { TOGGLE_ROW_CLASS, WHISPER_OPTIONS } from '../constants'; -import { useWhisperMode } from '../hooks/useWhisperMode'; -import QuickSettingsSection from './QuickSettingsSection'; - -export default function QuickSettingsWhisperSection() { - const { t } = useTranslation('settings'); - const { setWhisperMode, isOptionSelected } = useWhisperMode(); - - return ( - // This section stays hidden intentionally until dictation modes are reintroduced. - -
- {WHISPER_OPTIONS.map(({ value, icon: Icon, titleKey, descriptionKey }) => ( - - ))} -
- - ); -} diff --git a/src/i18n/locales/de/settings.json b/src/i18n/locales/de/settings.json index 84f5e2db..6358c708 100644 --- a/src/i18n/locales/de/settings.json +++ b/src/i18n/locales/de/settings.json @@ -55,8 +55,7 @@ "appearance": "Darstellung", "toolDisplay": "Werkzeuganzeige", "viewOptions": "Anzeigeoptionen", - "inputSettings": "Eingabeeinstellungen", - "whisperDictation": "Whisper-Diktat" + "inputSettings": "Eingabeeinstellungen" }, "darkMode": "Darkmode", "autoExpandTools": "Werkzeuge automatisch erweitern", @@ -71,16 +70,6 @@ "openPanel": "Einstellungspanel öffnen", "draggingStatus": "Wird gezogen...", "toggleAndMove": "Klicken zum Umschalten, ziehen zum Verschieben" - }, - "whisper": { - "modes": { - "default": "Standardmodus", - "defaultDescription": "Direkte Transkription deiner Sprache", - "prompt": "Prompt-Verbesserung", - "promptDescription": "Rohe Ideen in klare, detaillierte KI-Prompts umwandeln", - "vibe": "Vibe-Modus", - "vibeDescription": "Ideen als klare Agentenanweisungen mit Details formatieren" - } } }, "terminalShortcuts": { diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json index ce3de906..1285ac3f 100644 --- a/src/i18n/locales/en/settings.json +++ b/src/i18n/locales/en/settings.json @@ -55,8 +55,7 @@ "appearance": "Appearance", "toolDisplay": "Tool Display", "viewOptions": "View Options", - "inputSettings": "Input Settings", - "whisperDictation": "Whisper Dictation" + "inputSettings": "Input Settings" }, "darkMode": "Dark Mode", "autoExpandTools": "Auto-expand tools", @@ -71,16 +70,6 @@ "openPanel": "Open settings panel", "draggingStatus": "Dragging...", "toggleAndMove": "Click to toggle, drag to move" - }, - "whisper": { - "modes": { - "default": "Default Mode", - "defaultDescription": "Direct transcription of your speech", - "prompt": "Prompt Enhancement", - "promptDescription": "Transform rough ideas into clear, detailed AI prompts", - "vibe": "Vibe Mode", - "vibeDescription": "Format ideas as clear agent instructions with details" - } } }, "terminalShortcuts": { @@ -498,4 +487,4 @@ "tab": "tab", "runningStatus": "running" } -} \ No newline at end of file +} diff --git a/src/i18n/locales/ja/settings.json b/src/i18n/locales/ja/settings.json index c9cc282d..53cec8d1 100644 --- a/src/i18n/locales/ja/settings.json +++ b/src/i18n/locales/ja/settings.json @@ -55,8 +55,7 @@ "appearance": "外観", "toolDisplay": "ツール表示", "viewOptions": "表示オプション", - "inputSettings": "入力設定", - "whisperDictation": "Whisper音声入力" + "inputSettings": "入力設定" }, "darkMode": "ダークモード", "autoExpandTools": "ツールを自動展開", @@ -71,16 +70,6 @@ "openPanel": "設定パネルを開く", "draggingStatus": "ドラッグ中...", "toggleAndMove": "クリックで切替、ドラッグで移動" - }, - "whisper": { - "modes": { - "default": "標準モード", - "defaultDescription": "音声をそのまま文字起こしします", - "prompt": "プロンプト強化", - "promptDescription": "ラフなアイデアを明確で詳細なAIプロンプトに変換します", - "vibe": "バイブモード", - "vibeDescription": "アイデアを明確なエージェント指示に整形します" - } } }, "terminalShortcuts": { @@ -492,4 +481,4 @@ "tab": "タブ", "runningStatus": "実行中" } -} \ No newline at end of file +} diff --git a/src/i18n/locales/ko/settings.json b/src/i18n/locales/ko/settings.json index 1071cc37..0d3d2d30 100644 --- a/src/i18n/locales/ko/settings.json +++ b/src/i18n/locales/ko/settings.json @@ -55,8 +55,7 @@ "appearance": "외관", "toolDisplay": "도구 표시", "viewOptions": "보기 옵션", - "inputSettings": "입력 설정", - "whisperDictation": "Whisper 음성 인식" + "inputSettings": "입력 설정" }, "darkMode": "다크 모드", "autoExpandTools": "도구 자동 펼치기", @@ -71,16 +70,6 @@ "openPanel": "설정 패널 열기", "draggingStatus": "드래그 중...", "toggleAndMove": "클릭하여 토글, 드래그하여 이동" - }, - "whisper": { - "modes": { - "default": "기본 모드", - "defaultDescription": "음성을 그대로 텍스트로 변환", - "prompt": "프롬프트 향상", - "promptDescription": "거친 아이디어를 명확하고 상세한 AI 프롬프트로 변환", - "vibe": "Vibe 모드", - "vibeDescription": "아이디어를 상세한 에이전트 지침 형식으로 변환" - } } }, "terminalShortcuts": { @@ -492,4 +481,4 @@ "tab": "탭", "runningStatus": "실행 중" } -} \ No newline at end of file +} diff --git a/src/i18n/locales/ru/settings.json b/src/i18n/locales/ru/settings.json index da287733..98944876 100644 --- a/src/i18n/locales/ru/settings.json +++ b/src/i18n/locales/ru/settings.json @@ -55,8 +55,7 @@ "appearance": "Внешний вид", "toolDisplay": "Отображение инструментов", "viewOptions": "Параметры просмотра", - "inputSettings": "Настройки ввода", - "whisperDictation": "Диктовка Whisper" + "inputSettings": "Настройки ввода" }, "darkMode": "Темная тема", "autoExpandTools": "Автоматически разворачивать инструменты", @@ -71,16 +70,6 @@ "openPanel": "Открыть панель настроек", "draggingStatus": "Перетаскивание...", "toggleAndMove": "Нажмите для переключения, перетащите для перемещения" - }, - "whisper": { - "modes": { - "default": "Режим по умолчанию", - "defaultDescription": "Прямая транскрипция вашей речи", - "prompt": "Улучшение запроса", - "promptDescription": "Преобразование грубых идей в четкие, детальные AI-запросы", - "vibe": "Режим Vibe", - "vibeDescription": "Форматирование идей как четких инструкций агента с деталями" - } } }, "terminalShortcuts": { @@ -472,4 +461,4 @@ "tab": "вкладка", "runningStatus": "запущен" } -} \ No newline at end of file +} diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json index 789eb612..cfcc8ee2 100644 --- a/src/i18n/locales/zh-CN/settings.json +++ b/src/i18n/locales/zh-CN/settings.json @@ -55,8 +55,7 @@ "appearance": "外观", "toolDisplay": "工具显示", "viewOptions": "视图选项", - "inputSettings": "输入设置", - "whisperDictation": "Whisper 听写" + "inputSettings": "输入设置" }, "darkMode": "深色模式", "autoExpandTools": "自动展开工具", @@ -71,16 +70,6 @@ "openPanel": "打开设置面板", "draggingStatus": "正在拖拽...", "toggleAndMove": "点击切换，拖拽移动" - }, - "whisper": { - "modes": { - "default": "默认模式", - "defaultDescription": "直接转录您的语音", - "prompt": "提示词增强", - "promptDescription": "将粗略的想法转化为清晰、详细的 AI 提示词", - "vibe": "Vibe 模式", - "vibeDescription": "将想法格式化为带有详细说明的清晰智能体指令" - } } }, "terminalShortcuts": { @@ -492,4 +481,4 @@ "tab": "标签", "runningStatus": "运行中" } -} \ No newline at end of file +} diff --git a/src/utils/api.js b/src/utils/api.js index 7c14a677..438cab82 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -147,13 +147,6 @@ export const api = { headers: {}, // Let browser set Content-Type for FormData }), - transcribe: (formData) => - authenticatedFetch('/api/transcribe', { - method: 'POST', - body: formData, - headers: {}, // Let browser set Content-Type for FormData - }), - // TaskMaster endpoints taskmaster: { // Initialize TaskMaster in a project From 9552577e941272bd994be314f54422e47109596d Mon Sep 17 00:00:00 2001 From: viper151 Date: Fri, 10 Apr 2026 13:36:05 +0000 Subject: [PATCH 03/14] chore(release): v1.28.1 --- CHANGELOG.md | 15 +++++++++++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c884f3e8..f1f49d9f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,21 @@ All notable changes to CloudCLI UI will be documented in this file. +## [1.28.1](https://github.com/siteboon/claudecodeui/compare/v1.28.0...v1.28.1) (2026-04-10) + +### New Features + +* add branding, community links, GitHub star badge, and About settings tab ([2207d05](https://github.com/siteboon/claudecodeui/commit/2207d05c1ca229214aa9c2e2c9f4d0827d421574)) + +### Bug Fixes + +* corrupted binary downloads ([#634](https://github.com/siteboon/claudecodeui/issues/634)) ([e61f8a5](https://github.com/siteboon/claudecodeui/commit/e61f8a543d63fe7c24a04b3d2186085a06dcbcdb)) +* **ui:** remove mobile bottom nav, unify processing indicator, and improve tooltip behavior on mobile ([#632](https://github.com/siteboon/claudecodeui/issues/632)) ([a8dab0e](https://github.com/siteboon/claudecodeui/commit/a8dab0edcf949ae610820bae9500c433781f7c73)) + +### Refactoring + +* remove unused whispher transcribe logic ([#637](https://github.com/siteboon/claudecodeui/issues/637)) ([590dd42](https://github.com/siteboon/claudecodeui/commit/590dd42649424ab990353fcf59ce0965036d3d25)) + ## [1.28.0](https://github.com/siteboon/claudecodeui/compare/v1.27.1...v1.28.0) (2026-04-03) ### New Features diff --git a/package-lock.json b/package-lock.json index c1c675b0..1e80b8bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@cloudcli-ai/cloudcli", - "version": "1.28.0", + "version": "1.28.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@cloudcli-ai/cloudcli", - "version": "1.28.0", + "version": "1.28.1", "hasInstallScript": true, "license": "AGPL-3.0-or-later", "dependencies": { diff --git a/package.json b/package.json index 7a446d88..c3fc7358 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cloudcli-ai/cloudcli", - "version": "1.28.0", + "version": "1.28.1", "description": "A web-based UI for Claude Code CLI", "type": "module", "main": "server/index.js", From e2459cb0f8b35f54827778a7b444e6c3ca326506 Mon Sep 17 00:00:00 2001 From: simosmik Date: Fri, 10 Apr 2026 14:56:33 +0000 Subject: [PATCH 04/14] chore: update release flow node version --- .github/workflows/release.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 92635025..29cddae6 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -20,14 +20,14 @@ jobs: contents: write id-token: write steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v6 with: fetch-depth: 0 token: ${{ secrets.RELEASE_PAT }} - - uses: actions/setup-node@v4 + - uses: actions/setup-node@v6 with: - node-version: 20 + node-version: 22 registry-url: https://registry.npmjs.org - name: git config From c7a5baf1479404bd40e23aa58bd9f677df9a04c6 Mon Sep 17 00:00:00 2001 From: Haile <118998054+blackmammoth@users.noreply.github.com> Date: Mon, 13 Apr 2026 12:44:31 +0300 Subject: [PATCH 05/14] fix(thinking-mode): fix dropdown positioning (#646) --- .../subcomponents/ThinkingModeSelector.tsx | 146 +++++++++++++++--- 1 file changed, 123 insertions(+), 23 deletions(-) diff --git a/src/components/chat/view/subcomponents/ThinkingModeSelector.tsx b/src/components/chat/view/subcomponents/ThinkingModeSelector.tsx index 9a92386d..2b8d8062 100644 --- a/src/components/chat/view/subcomponents/ThinkingModeSelector.tsx +++ b/src/components/chat/view/subcomponents/ThinkingModeSelector.tsx @@ -1,4 +1,5 @@ -import { useState, useRef, useEffect } from 'react'; +import { useState, useRef, useEffect, useCallback, type CSSProperties } from 'react'; +import { createPortal } from 'react-dom'; import { Brain, X } from 'lucide-react'; import { useTranslation } from 'react-i18next'; import { thinkingModes } from '../../constants/thinkingModes'; @@ -12,6 +13,11 @@ type ThinkingModeSelectorProps = { function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className = '' }: ThinkingModeSelectorProps) { const { t } = useTranslation('chat'); + const [isOpen, setIsOpen] = useState(false); + const containerRef = useRef(null); + const triggerRef = useRef(null); + const dropdownRef = useRef(null); + const [dropdownStyle, setDropdownStyle] = useState(null); // Mapping from mode ID to translation key const modeKeyMap: Record = { @@ -29,50 +35,143 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className = }; }); - const [isOpen, setIsOpen] = useState(false); - const dropdownRef = useRef(null); + const closeDropdown = useCallback(() => { + setIsOpen(false); + onClose?.(); + }, [onClose]); + + const updateDropdownPosition = useCallback(() => { + const trigger = triggerRef.current; + const dropdown = dropdownRef.current; + if (!trigger || !dropdown || typeof window === 'undefined') { + return; + } + + const triggerRect = trigger.getBoundingClientRect(); + const viewportPadding = window.innerWidth < 640 ? 12 : 16; + const spacing = 8; + const width = Math.min(window.innerWidth - viewportPadding * 2, window.innerWidth < 640 ? 320 : 256); + let left = triggerRect.left + triggerRect.width / 2 - width / 2; + left = Math.max(viewportPadding, Math.min(left, window.innerWidth - width - viewportPadding)); + + const measuredHeight = dropdown.offsetHeight || 0; + const spaceBelow = window.innerHeight - triggerRect.bottom - spacing - viewportPadding; + const spaceAbove = triggerRect.top - spacing - viewportPadding; + const openBelow = spaceBelow >= Math.min(measuredHeight || 320, 320) || spaceBelow >= spaceAbove; + const availableHeight = Math.min( + window.innerHeight - viewportPadding * 2, + Math.max(180, openBelow ? spaceBelow : spaceAbove), + ); + const panelHeight = Math.min(measuredHeight || availableHeight, availableHeight); + const top = openBelow + ? Math.min(triggerRect.bottom + spacing, window.innerHeight - viewportPadding - panelHeight) + : Math.max(viewportPadding, triggerRect.top - spacing - panelHeight); + + setDropdownStyle({ + position: 'fixed', + top, + left, + width, + maxHeight: availableHeight, + zIndex: 80, + }); + }, []); useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { - setIsOpen(false); - if (onClose) onClose(); + if (!isOpen) { + setDropdownStyle(null); + return; + } + + const rafId = window.requestAnimationFrame(updateDropdownPosition); + const handleViewportChange = () => updateDropdownPosition(); + + window.addEventListener('resize', handleViewportChange); + window.addEventListener('scroll', handleViewportChange, true); + + return () => { + window.cancelAnimationFrame(rafId); + window.removeEventListener('resize', handleViewportChange); + window.removeEventListener('scroll', handleViewportChange, true); + }; + }, [isOpen, updateDropdownPosition]); + + useEffect(() => { + if (!isOpen) { + return; + } + + const handlePointerDown = (event: PointerEvent) => { + const target = event.target; + if (!(target instanceof Node)) { + return; + } + + if (containerRef.current?.contains(target) || dropdownRef.current?.contains(target)) { + return; + } + + closeDropdown(); + }; + + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + closeDropdown(); } }; - document.addEventListener('mousedown', handleClickOutside); - return () => document.removeEventListener('mousedown', handleClickOutside); - }, [onClose]); + document.addEventListener('pointerdown', handlePointerDown, true); + document.addEventListener('keydown', handleKeyDown); + + return () => { + document.removeEventListener('pointerdown', handlePointerDown, true); + document.removeEventListener('keydown', handleKeyDown); + }; + }, [isOpen, closeDropdown]); const currentMode = translatedModes.find(mode => mode.id === selectedMode) || translatedModes[0]; const IconComponent = currentMode.icon || Brain; return ( -
+
- {isOpen && ( -
+ {isOpen && typeof document !== 'undefined' && createPortal( +

{t('thinkingMode.selector.title')}

-
+
{translatedModes.map((mode) => { const ModeIcon = mode.icon; const isSelected = mode.id === selectedMode; @@ -91,10 +190,10 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className = return (
-
+
, + document.body )}
); } -export default ThinkingModeSelector; \ No newline at end of file +export default ThinkingModeSelector; From 13e97e2c71254de7a60afb5495b21064c4bc4241 Mon Sep 17 00:00:00 2001 From: simosmik Date: Tue, 14 Apr 2026 15:18:02 +0000 Subject: [PATCH 06/14] feat: adding docker sandbox environments --- README.de.md | 11 + README.ja.md | 11 + README.ko.md | 14 +- README.md | 48 ++-- README.ru.md | 13 +- README.zh-CN.md | 14 +- docker/README.md | 173 +++++++++----- docker/claude-code/Dockerfile | 4 +- docker/codex/Dockerfile | 4 +- docker/gemini/Dockerfile | 4 +- docker/shared/install-cloudcli.sh | 11 +- docker/shared/start-cloudcli.sh | 9 +- server/cli.js | 365 +++++++++++++++++++++++++++++- 13 files changed, 578 insertions(+), 103 deletions(-) diff --git a/README.de.md b/README.de.md index 4e163781..4e354020 100644 --- a/README.de.md +++ b/README.de.md @@ -76,6 +76,8 @@ Der schnellste Einstieg – keine lokale Einrichtung erforderlich. Erhalte eine ### Self-Hosted (Open Source) +#### npm + CloudCLI UI sofort mit **npx** ausprobieren (erfordert **Node.js** v22+): ```bash @@ -93,6 +95,15 @@ cloudcli Die **[Dokumentation →](https://cloudcli.ai/docs)** enthält weitere Konfigurationsoptionen, PM2, Remote-Server-Einrichtung und mehr. +#### Docker Sandboxes (Experimentell) + +Agents in isolierten Sandboxes mit Hypervisor-Isolation ausführen. Standardmäßig wird Claude Code gestartet. Erfordert die [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/). + +``` +npx @cloudcli-ai/cloudcli sandbox ~/my-project +``` + +Unterstützt Claude Code, Codex und Gemini CLI. Weitere Details in der [Sandbox-Dokumentation](docker/). --- diff --git a/README.ja.md b/README.ja.md index eada6dec..dfca8cda 100644 --- a/README.ja.md +++ b/README.ja.md @@ -72,6 +72,8 @@ ### セルフホスト（オープンソース） +#### npm + **npx** で今すぐ CloudCLI UI を試せます（**Node.js** v22+ が必要）： ```bash @@ -89,6 +91,15 @@ cloudcli より詳細な設定オプション、PM2、リモートサーバー設定などについては **[ドキュメントはこちら →](https://cloudcli.ai/docs)** を参照してください。 +#### Docker Sandboxes（実験的） + +ハイパーバイザーレベルの分離でエージェントをサンドボックスで実行します。デフォルトでは Claude Code が起動します。[`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/) が必要です。 + +``` +npx @cloudcli-ai/cloudcli sandbox ~/my-project +``` + +Claude Code、Codex、Gemini CLI に対応。詳細は[サンドボックスのドキュメント](docker/)をご覧ください。 --- diff --git a/README.ko.md b/README.ko.md index ed8ddd9f..6cee2adf 100644 --- a/README.ko.md +++ b/README.ko.md @@ -72,6 +72,8 @@ ### 셀프 호스트 (오픈 소스) +#### npm + **npx**로 즉시 CloudCLI UI를 실행하세요 (Node.js v22+ 필요): ```bash @@ -87,7 +89,17 @@ cloudcli `http://localhost:3001`을 열면 기존 세션이 자동으로 발견됩니다. -자세한 구성 옵션, PM2, 원격 서버 설정 등은 **[문서 →](https://cloudcli.ai/docs)**를 참고하세요 +자세한 구성 옵션, PM2, 원격 서버 설정 등은 **[문서 →](https://cloudcli.ai/docs)**를 참고하세요. + +#### Docker Sandboxes (실험적) + +하이퍼바이저 수준 격리로 에이전트를 샌드박스에서 실행합니다. 기본 에이전트는 Claude Code입니다. [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/)가 필요합니다. + +``` +npx @cloudcli-ai/cloudcli sandbox ~/my-project +``` + +Claude Code, Codex, Gemini CLI를 지원합니다. 자세한 내용은 [샌드박스 문서](docker/)를 참고하세요. --- diff --git a/README.md b/README.md index 751f1659..986505b3 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,8 @@ The fastest way to get started — no local setup required. Get a fully managed, ### Self-Hosted (Open source) +#### npm + Try CloudCLI UI instantly with **npx** (requires **Node.js** v22+): ``` @@ -91,33 +93,41 @@ cloudcli Open `http://localhost:3001` — all your existing sessions are discovered automatically. -Visit the **[documentation →](https://cloudcli.ai/docs)** for more full configuration options, PM2, remote server setup and more +Visit the **[documentation →](https://cloudcli.ai/docs)** for full configuration options, PM2, remote server setup and more. + +#### Docker Sandboxes (Experimental) + +Run agents in isolated sandboxes with hypervisor-level isolation. Starts Claude Code by default. Requires the [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/). + +``` +npx @cloudcli-ai/cloudcli sandbox ~/my-project +``` + +Supports Claude Code, Codex, and Gemini CLI. See the [sandbox docs](docker/) for setup and advanced options. --- ## Which option is right for you? -CloudCLI UI is the open source UI layer that powers CloudCLI Cloud. You can self-host it on your own machine, or use CloudCLI Cloud which builds on top of it with a full managed cloud environment, team features, and deeper integrations. +CloudCLI UI is the open source UI layer that powers CloudCLI Cloud. You can self-host it on your own machine, run it in a Docker sandbox for isolation, or use CloudCLI Cloud for a fully managed environment. -| | CloudCLI UI (Self-hosted) | CloudCLI Cloud | -|---|---|---| -| **Best for** | Developers who want a full UI for local agent sessions on their own machine | Teams and developers who want agents running in the cloud, accessible from anywhere | -| **How you access it** | Browser via `[yourip]:port` | Browser, any IDE, REST API, n8n | -| **Setup** | `npx @cloudcli-ai/cloudcli` | No setup required | -| **Machine needs to stay on** | Yes | No | -| **Mobile access** | Any browser on your network | Any device, native app coming | -| **Sessions available** | All sessions auto-discovered from `~/.claude` | All sessions within your cloud environment | -| **Agents supported** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI | -| **File explorer and Git** | Yes, built into the UI | Yes, built into the UI | -| **MCP configuration** | Managed via UI, synced with your local `~/.claude` config | Managed via UI | -| **IDE access** | Your local IDE | Any IDE connected to your cloud environment | -| **REST API** | Yes | Yes | -| **n8n node** | No | Yes | -| **Team sharing** | No | Yes | -| **Platform cost** | Free, open source | Starts at $7/month | +| | Self-Hosted (npm) | Self-Hosted (Docker Sandbox) *(Experimental)* | CloudCLI Cloud | +|---|---|---|---| +| **Best for** | Local agent sessions on your own machine | Isolated agents with web/mobile IDE | Teams who want agents in the cloud | +| **How you access it** | Browser via `[yourip]:port` | Browser via `localhost:port` | Browser, any IDE, REST API, n8n | +| **Setup** | `npx @cloudcli-ai/cloudcli` | `npx @cloudcli-ai/cloudcli sandbox ~/project` | No setup required | +| **Isolation** | Runs on your host | Hypervisor-level sandbox (microVM) | Full cloud isolation | +| **Machine needs to stay on** | Yes | Yes | No | +| **Mobile access** | Any browser on your network | Any browser on your network | Any device, native app coming | +| **Agents supported** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI | +| **File explorer and Git** | Yes | Yes | Yes | +| **MCP configuration** | Synced with `~/.claude` | Managed via UI | Managed via UI | +| **REST API** | Yes | Yes | Yes | +| **Team sharing** | No | No | Yes | +| **Platform cost** | Free, open source | Free, open source | Starts at $7/month | -> Both options use your own AI subscriptions (Claude, Cursor, etc.) — CloudCLI provides the environment, not the AI. +> All options use your own AI subscriptions (Claude, Cursor, etc.) — CloudCLI provides the environment, not the AI. --- diff --git a/README.ru.md b/README.ru.md index c7561ba6..55b936a8 100644 --- a/README.ru.md +++ b/README.ru.md @@ -76,6 +76,8 @@ ### Self-Hosted (Open source) +#### npm + Попробовать CloudCLI UI можно сразу через **npx** (требуется **Node.js** v22+): ```bash @@ -91,8 +93,17 @@ cloudcli Откройте `http://localhost:3001` — все ваши существующие сессии будут обнаружены автоматически. -Посетите **[документацию →](https://cloudcli.ai/docs)**, чтобы узнать про дополнительные варианты конфигурации, PM2, настройку удалённого сервера и многое другое +Посетите **[документацию →](https://cloudcli.ai/docs)**, чтобы узнать про дополнительные варианты конфигурации, PM2, настройку удалённого сервера и многое другое. +#### Docker Sandboxes (Экспериментально) + +Запускайте агентов в изолированных песочницах с гипервизорной изоляцией. По умолчанию запускается Claude Code. Требуется [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/). + +``` +npx @cloudcli-ai/cloudcli sandbox ~/my-project +``` + +Поддерживаются Claude Code, Codex и Gemini CLI. Подробнее в [документации sandbox](docker/). --- diff --git a/README.zh-CN.md b/README.zh-CN.md index 690af7d8..3f18d3cd 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -72,6 +72,8 @@ ### 自托管（开源） +#### npm + 启动 CloudCLI UI，只需一行 `npx`（需要 Node.js v22+）： ```bash @@ -87,7 +89,17 @@ cloudcli 打开 `http://localhost:3001`，系统会自动发现所有现有会话。 -更多配置选项、PM2、远程服务器设置等，请参阅 **[文档 →](https://cloudcli.ai/docs)** +更多配置选项、PM2、远程服务器设置等，请参阅 **[文档 →](https://cloudcli.ai/docs)**。 + +#### Docker Sandboxes（实验性） + +在隔离的沙箱中运行代理，具有虚拟机管理程序级别的隔离。默认启动 Claude Code。需要 [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/)。 + +``` +npx @cloudcli-ai/cloudcli sandbox ~/my-project +``` + +支持 Claude Code、Codex 和 Gemini CLI。详情请参阅 [沙箱文档](docker/)。 --- diff --git a/docker/README.md b/docker/README.md index 780fcf93..c093eccb 100644 --- a/docker/README.md +++ b/docker/README.md @@ -1,89 +1,146 @@ -# CloudCLI — Docker Sandbox Templates + + -Run AI coding agents with a full web IDE inside [Docker Sandboxes](https://docs.docker.com/ai/sandboxes/). +# Sandboxed coding agents with a web & mobile IDE (CloudCLI) -Instead of a terminal-only experience, get a browser-based interface with chat, file explorer, git panel, shell, and MCP configuration — all running safely inside an isolated sandbox. +[Docker Sandbox](https://docs.docker.com/ai/sandboxes/) templates that add [CloudCLI](https://cloudcli.ai) on top of Claude Code, Codex, and Gemini CLI. You get a full web and mobile IDE accessible from any browser on any device. -## Available Templates +## Get started -| Template | Base Image | Agent | -|----------|-----------|-------| -| `cloudcli-ai/sandbox:claude-code` | `docker/sandbox-templates:claude-code` | Claude Code | -| `cloudcli-ai/sandbox:codex` | `docker/sandbox-templates:codex` | OpenAI Codex | -| `cloudcli-ai/sandbox:gemini` | `docker/sandbox-templates:gemini` | Gemini CLI | +### 1. Install the sbx CLI -## Quick Start +Docker Sandboxes run agents in isolated microVMs. Install the `sbx` CLI: -### 1. Start a sandbox with the template +- **macOS**: `brew install docker/tap/sbx` +- **Windows**: `winget install -h Docker.sbx` +- **Linux**: `sudo apt-get install docker-sbx` + +Full instructions: [docs.docker.com/ai/sandboxes/get-started](https://docs.docker.com/ai/sandboxes/get-started/) + +### 2. Store your API key + +`sbx` manages credentials securely — your API key never enters the sandbox. Store it once: ```bash -sbx run --template docker.io/cloudcli-ai/sandbox:claude-code claude ~/my-project +sbx login +sbx secret set -g anthropic ``` -### 2. Forward the UI port +### 3. Launch Claude Code ```bash -sbx ports --publish 3001:3001 +npx @cloudcli-ai/cloudcli sandbox ~/my-project ``` -### 3. Open the browser +Open **http://localhost:3001**. Set a password on first visit. Start building. -``` -http://localhost:3001 +### Using a different agent + +Store the matching API key and pass `--agent`: + +```bash +# OpenAI Codex +sbx secret set -g openai +npx @cloudcli-ai/cloudcli sandbox ~/my-project --agent codex + +# Gemini CLI +sbx secret set -g google +npx @cloudcli-ai/cloudcli sandbox ~/my-project --agent gemini ``` -On first visit you'll set a password — this protects the UI if the port is ever exposed beyond localhost. +### Available templates -## What You Get +| Agent | Template | +|-------|----------| +| **Claude Code** (default) | `docker.io/cloudcliai/sandbox:claude-code` | +| OpenAI Codex | `docker.io/cloudcliai/sandbox:codex` | +| Gemini CLI | `docker.io/cloudcliai/sandbox:gemini` | -- **Chat** — Rich conversation UI with markdown rendering, code blocks, and message history -- **Files** — Visual file tree with syntax-highlighted editor -- **Git** — Diff viewer, staging, branch switching, and commit — all visual +These are used with `--template` when running `sbx` directly (see [Advanced usage](#advanced-usage)). + +## Managing sandboxes + +```bash +cloudcli sandbox ls # List all sandboxes +cloudcli sandbox stop my-project # Stop (preserves state) +cloudcli sandbox start my-project # Restart and re-launch web UI +cloudcli sandbox logs my-project # View server logs +cloudcli sandbox rm my-project # Remove everything +``` + +## What you get + +- **Chat** — Markdown rendering, code blocks, message history +- **Files** — File tree with syntax-highlighted editor +- **Git** — Diff viewer, staging, branch switching, commits - **Shell** — Built-in terminal emulator -- **MCP** — Configure Model Context Protocol servers through the UI +- **MCP** — Configure Model Context Protocol servers visually - **Mobile** — Works on tablet and phone browsers -## Building Locally - -All Dockerfiles share scripts from `shared/`. Build with the `docker/` directory as context: - -```bash -# Claude Code variant -docker build -f docker/claude-code/Dockerfile -t cloudcli-sandbox:claude-code docker/ - -# Codex variant -docker build -f docker/codex/Dockerfile -t cloudcli-sandbox:codex docker/ - -# Gemini variant -docker build -f docker/gemini/Dockerfile -t cloudcli-sandbox:gemini docker/ -``` - -## How It Works - -Each template extends Docker's official sandbox base image and adds: - -1. **Node.js 22** — Runtime for CloudCLI -2. **CloudCLI** — Installed globally via `npm install -g @cloudcli-ai/cloudcli` -3. **Auto-start** — The UI server starts in the background when the sandbox shell opens (port 3001) - -The agent (Claude Code, Codex, or Gemini) comes from the base image. CloudCLI connects to it and provides the web interface on top. +Your project directory is mounted bidirectionally — edits propagate in real time, both ways. ## Configuration -| Environment Variable | Default | Description | -|---------------------|---------|-------------| -| `SERVER_PORT` | `3001` | Port for the web UI | -| `HOST` | `0.0.0.0` | Bind address | -| `DATABASE_PATH` | `~/.cloudcli/auth.db` | SQLite database location | - -## Network Policies - -If your sandbox uses restricted network policies, allow the UI port: +Set variables at creation time with `--env`: ```bash -sbx policy allow network "localhost:3001" +npx @cloudcli-ai/cloudcli sandbox ~/my-project --env SERVER_PORT=8080 ``` +Or inside a running sandbox: + +```bash +sbx exec my-project bash -c 'echo "export SERVER_PORT=8080" >> /etc/sandbox-persistent.sh' +sbx exec my-project bash -c 'pkill -f "server/index.js"; . ~/.cloudcli-start.sh' +``` + +| Variable | Default | Description | +|----------|---------|-------------| +| `SERVER_PORT` | `3001` | Web UI port | +| `HOST` | `0.0.0.0` | Bind address (must be `0.0.0.0` for `sbx ports`) | +| `DATABASE_PATH` | `~/.cloudcli/auth.db` | SQLite database location | + +## Advanced usage + +For branch mode, multiple workspaces, memory limits, or the terminal agent experience, use `sbx` with the template: + +```bash +# Terminal agent + web UI +sbx run --template docker.io/cloudcliai/sandbox:claude-code claude ~/my-project --name my-project +sbx ports my-project --publish 3001:3001 + +# Branch mode (Git worktree isolation) +sbx run --template docker.io/cloudcliai/sandbox:claude-code claude ~/my-project --branch my-feature + +# Multiple workspaces +sbx run --template docker.io/cloudcliai/sandbox:claude-code claude ~/project ~/shared-libs:ro + +# Pass a prompt directly +sbx run --template docker.io/cloudcliai/sandbox:claude-code claude ~/my-project -- "Fix the auth bug" +``` + +CloudCLI auto-starts via `.bashrc` when using `sbx run`. + +Full options in the [Docker Sandboxes usage guide](https://docs.docker.com/ai/sandboxes/usage/). + +## Network policies + +Sandboxes restrict outbound access by default. To reach host services from inside the sandbox: + +```bash +sbx policy allow network localhost:11434 +# Inside the sandbox: curl http://host.docker.internal:11434 +``` + +The web UI itself doesn't need a policy — access it via `sbx ports`. + +## Links + +- [CloudCLI Cloud](https://cloudcli.ai) — fully managed, no setup required +- [Documentation](https://cloudcli.ai/docs) — full configuration guide +- [Discord](https://discord.gg/buxwujPNRE) — community support +- [GitHub](https://github.com/siteboon/claudecodeui) — source code and issues + ## License -These templates are free and open-source under the same license as CloudCLI (AGPL-3.0-or-later). +AGPL-3.0-or-later diff --git a/docker/claude-code/Dockerfile b/docker/claude-code/Dockerfile index ed04cf6b..8d108a80 100644 --- a/docker/claude-code/Dockerfile +++ b/docker/claude-code/Dockerfile @@ -5,7 +5,7 @@ COPY shared/install-cloudcli.sh /tmp/install-cloudcli.sh RUN chmod +x /tmp/install-cloudcli.sh && /tmp/install-cloudcli.sh USER agent -RUN npm install -g @cloudcli-ai/cloudcli +RUN npm install -g @cloudcli-ai/cloudcli && cloudcli --version -COPY shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh +COPY --chown=agent:agent shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh RUN echo '. ~/.cloudcli-start.sh' >> /home/agent/.bashrc diff --git a/docker/codex/Dockerfile b/docker/codex/Dockerfile index 9948d0af..c1bc1807 100644 --- a/docker/codex/Dockerfile +++ b/docker/codex/Dockerfile @@ -5,7 +5,7 @@ COPY shared/install-cloudcli.sh /tmp/install-cloudcli.sh RUN chmod +x /tmp/install-cloudcli.sh && /tmp/install-cloudcli.sh USER agent -RUN npm install -g @cloudcli-ai/cloudcli +RUN npm install -g @cloudcli-ai/cloudcli && cloudcli --version -COPY shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh +COPY --chown=agent:agent shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh RUN echo '. ~/.cloudcli-start.sh' >> /home/agent/.bashrc diff --git a/docker/gemini/Dockerfile b/docker/gemini/Dockerfile index ec7209f0..dc06db69 100644 --- a/docker/gemini/Dockerfile +++ b/docker/gemini/Dockerfile @@ -5,7 +5,7 @@ COPY shared/install-cloudcli.sh /tmp/install-cloudcli.sh RUN chmod +x /tmp/install-cloudcli.sh && /tmp/install-cloudcli.sh USER agent -RUN npm install -g @cloudcli-ai/cloudcli +RUN npm install -g @cloudcli-ai/cloudcli && cloudcli --version -COPY shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh +COPY --chown=agent:agent shared/start-cloudcli.sh /home/agent/.cloudcli-start.sh RUN echo '. ~/.cloudcli-start.sh' >> /home/agent/.bashrc diff --git a/docker/shared/install-cloudcli.sh b/docker/shared/install-cloudcli.sh index 0390383e..4b43fe22 100644 --- a/docker/shared/install-cloudcli.sh +++ b/docker/shared/install-cloudcli.sh @@ -1,13 +1,10 @@ #!/bin/bash set -e -# Install Node.js 22 LTS -curl -fsSL https://deb.nodesource.com/setup_22.x | bash - - -# Install Node.js + build tools needed for native modules (node-pty, better-sqlite3, bcrypt) -# Node.js + build tools for native modules + common dev tools -apt-get install -y --no-install-recommends \ - nodejs build-essential python3 python3-setuptools \ +# Install build tools needed for native modules (node-pty, better-sqlite3, bcrypt) +# Node.js is already provided by the sandbox base image +apt-get update && apt-get install -y --no-install-recommends \ + build-essential python3 python3-setuptools \ jq ripgrep sqlite3 zip unzip tree vim-tiny # Clean up apt cache to reduce image size diff --git a/docker/shared/start-cloudcli.sh b/docker/shared/start-cloudcli.sh index 145c35c5..82b2fdc2 100644 --- a/docker/shared/start-cloudcli.sh +++ b/docker/shared/start-cloudcli.sh @@ -4,19 +4,14 @@ # This script is sourced from ~/.bashrc on sandbox shell open. if ! pgrep -f "server/index.js" > /dev/null 2>&1; then - # Start the pre-installed version immediately nohup cloudcli start --port 3001 > /tmp/cloudcli-ui.log 2>&1 & disown - # Check for updates in the background (non-blocking) - nohup npm update -g @cloudcli-ai/cloudcli > /tmp/cloudcli-update.log 2>&1 & - disown - echo "" echo " CloudCLI is starting on port 3001..." echo "" - echo " To access the web UI, forward the port:" - echo " sbx ports \$(hostname) --publish 3001:3001" + echo " Forward the port from another terminal:" + echo " sbx ports --publish 3001:3001" echo "" echo " Then open: http://localhost:3001" echo "" diff --git a/server/cli.js b/server/cli.js index 39461673..dad74268 100755 --- a/server/cli.js +++ b/server/cli.js @@ -7,6 +7,7 @@ * Commands: * (no args) - Start the server (default) * start - Start the server + * sandbox - Manage Docker sandbox environments * status - Show configuration and data locations * help - Show help information * version - Show version information @@ -150,6 +151,7 @@ Usage: Commands: start Start the CloudCLI server (default) + sandbox Manage Docker sandbox environments status Show configuration and data locations update Update to the latest version help Show this help information @@ -164,8 +166,7 @@ Options: Examples: $ cloudcli # Start with defaults $ cloudcli --port 8080 # Start on port 8080 - $ cloudcli -p 3000 # Short form for port - $ cloudcli start --port 4000 # Explicit start command + $ cloudcli sandbox ~/my-project # Run in a Docker sandbox $ cloudcli status # Show configuration Environment Variables: @@ -244,6 +245,357 @@ async function updatePackage() { } } +// ── Sandbox command ───────────────────────────────────────── + +const SANDBOX_TEMPLATES = { + claude: 'docker.io/cloudcliai/sandbox:claude-code', + codex: 'docker.io/cloudcliai/sandbox:codex', + gemini: 'docker.io/cloudcliai/sandbox:gemini', +}; + +const SANDBOX_SECRETS = { + claude: 'anthropic', + codex: 'openai', + gemini: 'google', +}; + +function parseSandboxArgs(args) { + const result = { + subcommand: null, + workspace: null, + agent: 'claude', + name: null, + port: 3001, + template: null, + env: [], + }; + + const subcommands = ['ls', 'stop', 'start', 'rm', 'logs', 'help']; + + for (let i = 0; i < args.length; i++) { + const arg = args[i]; + + if (i === 0 && subcommands.includes(arg)) { + result.subcommand = arg; + } else if (arg === '--agent' || arg === '-a') { + result.agent = args[++i]; + } else if (arg === '--name' || arg === '-n') { + result.name = args[++i]; + } else if (arg === '--port') { + result.port = parseInt(args[++i], 10); + } else if (arg === '--template' || arg === '-t') { + result.template = args[++i]; + } else if (arg === '--env' || arg === '-e') { + result.env.push(args[++i]); + } else if (!arg.startsWith('-')) { + if (!result.subcommand) { + result.workspace = arg; + } else { + result.name = arg; // for stop/start/rm/logs + } + } + } + + // Default subcommand based on what we got + if (!result.subcommand) { + result.subcommand = 'create'; + } + + // Derive name from workspace path if not set + if (!result.name && result.workspace) { + result.name = path.basename(path.resolve(result.workspace.replace(/^~/, os.homedir()))); + } + + // Default template from agent + if (!result.template) { + result.template = SANDBOX_TEMPLATES[result.agent] || SANDBOX_TEMPLATES.claude; + } + + return result; +} + +function showSandboxHelp() { + console.log(` +${c.bright('CloudCLI Sandbox')} — Run CloudCLI inside Docker Sandboxes + +Usage: + cloudcli sandbox Create and start a sandbox + cloudcli sandbox [name] Manage sandboxes + +Subcommands: + ${c.bright('(default)')} Create a sandbox and start the web UI + ${c.bright('ls')} List all sandboxes + ${c.bright('start')} Restart a stopped sandbox and re-launch the web UI + ${c.bright('stop')} Stop a sandbox (preserves state) + ${c.bright('rm')} Remove a sandbox + ${c.bright('logs')} Show CloudCLI server logs + ${c.bright('help')} Show this help + +Options: + -a, --agent Agent to use: claude, codex, gemini (default: claude) + -n, --name Sandbox name (default: derived from workspace folder) + -t, --template Custom template image + -e, --env Set environment variable (repeatable) + --port Host port for the web UI (default: 3001) + +Examples: + $ cloudcli sandbox ~/my-project + $ cloudcli sandbox ~/my-project --agent codex --port 8080 + $ cloudcli sandbox ~/my-project --env SERVER_PORT=8080 --env HOST=0.0.0.0 + $ cloudcli sandbox ls + $ cloudcli sandbox stop my-project + $ cloudcli sandbox start my-project + $ cloudcli sandbox rm my-project + +Prerequisites: + 1. Install sbx CLI: https://docs.docker.com/ai/sandboxes/get-started/ + 2. Authenticate and store your API key: + sbx login + sbx secret set -g anthropic # for Claude + sbx secret set -g openai # for Codex + sbx secret set -g google # for Gemini + +Advanced usage: + For branch mode, multiple workspaces, memory limits, network policies, + or passing prompts to the agent, use sbx directly with the template: + + sbx run --template docker.io/cloudcliai/sandbox:claude-code claude ~/my-project --branch my-feature + sbx run --template docker.io/cloudcliai/sandbox:claude-code claude ~/project ~/libs:ro --memory 8g + + Full Docker Sandboxes docs: https://docs.docker.com/ai/sandboxes/usage/ +`); +} + +async function sandboxCommand(args) { + const { execFileSync } = await import('child_process'); + + // Safe execution — uses execFileSync (no shell) to prevent injection + const sbx = (subcmd, opts = {}) => { + const result = execFileSync('sbx', subcmd, { + encoding: 'utf8', + stdio: opts.inherit ? 'inherit' : 'pipe', + }); + return result || ''; + }; + + const opts = parseSandboxArgs(args); + + if (opts.subcommand === 'help') { + showSandboxHelp(); + return; + } + + // Validate name (alphanumeric, hyphens, underscores only) + if (opts.name && !/^[\w-]+$/.test(opts.name)) { + console.error(`\n${c.error('❌')} Invalid sandbox name: ${opts.name}`); + console.log(` Names may only contain letters, numbers, hyphens, and underscores.\n`); + process.exit(1); + } + + // Check sbx is installed + try { + sbx(['version']); + } catch { + console.error(`\n${c.error('❌')} ${c.bright('sbx')} CLI not found.\n`); + console.log(` Install it from: ${c.info('https://docs.docker.com/ai/sandboxes/get-started/')}`); + console.log(` Then run: ${c.bright('sbx login')}`); + console.log(` And store your API key: ${c.bright('sbx secret set -g anthropic')}\n`); + process.exit(1); + } + + switch (opts.subcommand) { + + case 'ls': + sbx(['ls'], { inherit: true }); + break; + + case 'stop': + if (!opts.name) { + console.error(`\n${c.error('❌')} Sandbox name required: cloudcli sandbox stop \n`); + process.exit(1); + } + sbx(['stop', opts.name], { inherit: true }); + break; + + case 'rm': + if (!opts.name) { + console.error(`\n${c.error('❌')} Sandbox name required: cloudcli sandbox rm \n`); + process.exit(1); + } + sbx(['rm', opts.name], { inherit: true }); + break; + + case 'logs': + if (!opts.name) { + console.error(`\n${c.error('❌')} Sandbox name required: cloudcli sandbox logs \n`); + process.exit(1); + } + try { + sbx(['exec', opts.name, 'bash', '-c', 'cat /tmp/cloudcli-ui.log'], { inherit: true }); + } catch (e) { + console.error(`\n${c.error('❌')} Could not read logs: ${e.message || 'Is the sandbox running?'}\n`); + } + break; + + case 'start': { + if (!opts.name) { + console.error(`\n${c.error('❌')} Sandbox name required: cloudcli sandbox start \n`); + process.exit(1); + } + console.log(`\n${c.info('▶')} Starting sandbox ${c.bright(opts.name)}...`); + try { + sbx(['start', opts.name], { inherit: true }); + } catch { /* might already be running */ } + + console.log(`${c.info('▶')} Launching CloudCLI web server...`); + sbx(['exec', '-d', opts.name, 'bash', '-c', '. ~/.cloudcli-start.sh']); + + console.log(`${c.info('▶')} Forwarding port ${opts.port} → 3001...`); + try { + sbx(['ports', opts.name, '--publish', `${opts.port}:3001`]); + } catch (e) { + const msg = e.stdout || e.stderr || e.message || ''; + if (msg.includes('address already in use')) { + const altPort = opts.port + 1; + console.log(`${c.warn('⚠')} Port ${opts.port} in use, trying ${altPort}...`); + try { + sbx(['ports', opts.name, '--publish', `${altPort}:3001`]); + opts.port = altPort; + } catch { + console.error(`${c.error('❌')} Ports ${opts.port} and ${altPort} both in use. Use --port to specify a free port.`); + process.exit(1); + } + } else { + throw e; + } + } + + console.log(`\n${c.ok('✔')} ${c.bright('CloudCLI is ready!')}`); + console.log(` ${c.info('→')} ${c.bright(`http://localhost:${opts.port}`)}\n`); + break; + } + + case 'create': { + if (!opts.workspace) { + console.error(`\n${c.error('❌')} Workspace path required: cloudcli sandbox \n`); + console.log(` Example: ${c.bright('cloudcli sandbox ~/my-project')}\n`); + process.exit(1); + } + + const workspace = opts.workspace.startsWith('~') + ? opts.workspace.replace(/^~/, os.homedir()) + : path.resolve(opts.workspace); + + if (!fs.existsSync(workspace)) { + console.error(`\n${c.error('❌')} Workspace path not found: ${c.dim(workspace)}\n`); + process.exit(1); + } + + const secret = SANDBOX_SECRETS[opts.agent] || 'anthropic'; + + // Check if the required secret is stored + try { + const secretList = sbx(['secret', 'ls']); + if (!secretList.includes(secret)) { + console.error(`\n${c.error('❌')} No ${c.bright(secret)} API key found.\n`); + console.log(` Run: ${c.bright(`sbx secret set -g ${secret}`)}\n`); + process.exit(1); + } + } catch { /* sbx secret ls not available, skip check */ } + + console.log(`\n${c.bright('CloudCLI Sandbox')}`); + console.log(c.dim('─'.repeat(50))); + console.log(` Agent: ${c.info(opts.agent)} ${c.dim(`(${secret} credentials)`)}`); + console.log(` Workspace: ${c.dim(workspace)}`); + console.log(` Name: ${c.dim(opts.name)}`); + console.log(` Template: ${c.dim(opts.template)}`); + console.log(` Port: ${c.dim(String(opts.port))}`); + if (opts.env.length > 0) { + console.log(` Env: ${c.dim(opts.env.join(', '))}`); + } + console.log(c.dim('─'.repeat(50))); + + // Step 1: Create sandbox + console.log(`\n${c.info('▶')} Creating sandbox ${c.bright(opts.name)}...`); + try { + sbx( + ['create', '--template', opts.template, '--name', opts.name, opts.agent, workspace], + { inherit: true } + ); + } catch (e) { + const msg = e.stdout || e.stderr || e.message || ''; + if (msg.includes('already exists')) { + console.log(`${c.warn('⚠')} Sandbox ${c.bright(opts.name)} already exists. Starting it instead...\n`); + try { sbx(['start', opts.name]); } catch { /* may already be running */ } + } else { + throw e; + } + } + + // Step 2: Inject environment variables + if (opts.env.length > 0) { + console.log(`${c.info('▶')} Setting environment variables...`); + const exports = opts.env + .filter(e => /^\w+=.+$/.test(e)) + .map(e => `export ${e}`) + .join('\n'); + if (exports) { + sbx(['exec', opts.name, 'bash', '-c', `echo '${exports}' >> /etc/sandbox-persistent.sh`]); + } + const invalid = opts.env.filter(e => !/^\w+=.+$/.test(e)); + if (invalid.length > 0) { + console.log(`${c.warn('⚠')} Skipped invalid env vars: ${invalid.join(', ')} (expected KEY=VALUE)`); + } + } + + // Step 3: Start CloudCLI + console.log(`${c.info('▶')} Launching CloudCLI web server...`); + try { + sbx(['exec', '-d', opts.name, 'bash', '-c', '. ~/.cloudcli-start.sh']); + } catch (e) { + console.error(`${c.error('❌')} Failed to start CloudCLI: ${e.message}`); + process.exit(1); + } + + // Step 4: Forward port + console.log(`${c.info('▶')} Forwarding port ${opts.port} → 3001...`); + try { + sbx(['ports', opts.name, '--publish', `${opts.port}:3001`]); + } catch (e) { + const msg = e.stdout || e.stderr || e.message || ''; + if (msg.includes('address already in use')) { + const altPort = opts.port + 1; + console.log(`${c.warn('⚠')} Port ${opts.port} in use, trying ${altPort}...`); + try { + sbx(['ports', opts.name, '--publish', `${altPort}:3001`]); + opts.port = altPort; + } catch { + console.error(`${c.error('❌')} Ports ${opts.port} and ${altPort} both in use. Use --port to specify a free port.`); + process.exit(1); + } + } else { + throw e; + } + } + + // Done + console.log(`\n${c.ok('✔')} ${c.bright('CloudCLI is ready!')}`); + console.log(` ${c.info('→')} Open ${c.bright(`http://localhost:${opts.port}`)}`); + console.log(`\n${c.dim(' Manage with:')}`); + console.log(` ${c.dim('$')} cloudcli sandbox ls`); + console.log(` ${c.dim('$')} cloudcli sandbox stop ${opts.name}`); + console.log(` ${c.dim('$')} cloudcli sandbox start ${opts.name}`); + console.log(` ${c.dim('$')} cloudcli sandbox rm ${opts.name}\n`); + break; + } + + default: + showSandboxHelp(); + } +} + +// ── Server ────────────────────────────────────────────────── + // Start the server async function startServer() { // Check for updates silently on startup @@ -274,6 +626,10 @@ function parseArgs(args) { parsed.command = 'version'; } else if (!arg.startsWith('-')) { parsed.command = arg; + if (arg === 'sandbox') { + parsed.remainingArgs = args.slice(i + 1); + break; + } } } @@ -283,7 +639,7 @@ function parseArgs(args) { // Main CLI handler async function main() { const args = process.argv.slice(2); - const { command, options } = parseArgs(args); + const { command, options, remainingArgs } = parseArgs(args); // Apply CLI options to environment variables if (options.serverPort) { @@ -299,6 +655,9 @@ async function main() { case 'start': await startServer(); break; + case 'sandbox': + await sandboxCommand(remainingArgs || []); + break; case 'status': case 'info': showStatus(); From d0dd007d0fb9a6bcb040a6b9f0e62ee496a8db4c Mon Sep 17 00:00:00 2001 From: Haile <118998054+blackmammoth@users.noreply.github.com> Date: Tue, 14 Apr 2026 18:18:47 +0300 Subject: [PATCH 07/14] Feature/restart server on update (#652) * feat: support restart server on update for platform * feat: add update platform script to package.json * feat: optimize platform update command by omitting dev dependencies * feat: simplify update commands for platform --------- Co-authored-by: Haileyesus Co-authored-by: Simos Mikelatos --- package.json | 3 ++- server/index.js | 17 ++++++++++++----- .../view/VersionUpgradeModal.tsx | 8 ++++++-- 3 files changed, 20 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index c3fc7358..f2af9ce7 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,8 @@ "release": "./release.sh", "prepublishOnly": "npm run build", "postinstall": "node scripts/fix-node-pty.js", - "prepare": "husky" + "prepare": "husky", + "update:platform": "./update-platform.sh" }, "keywords": [ "claude code", diff --git a/server/index.js b/server/index.js index d295fae4..da6ca675 100755 --- a/server/index.js +++ b/server/index.js @@ -435,13 +435,20 @@ app.post('/api/system/update', authenticateToken, async (req, res) => { console.log('Starting system update from directory:', projectRoot); - // Run the update command based on install mode - const updateCommand = installMode === 'git' - ? 'git checkout main && git pull && npm install' - : 'npm install -g @cloudcli-ai/cloudcli@latest'; + // Platform deployments use their own update workflow from the project root. + const updateCommand = IS_PLATFORM + // In platform, husky and dev dependencies are not needed + ? 'npm run update:platform' + : installMode === 'git' + ? 'git checkout main && git pull && npm install' + : 'npm install -g @cloudcli-ai/cloudcli@latest'; + + const updateCwd = IS_PLATFORM || installMode === 'git' + ? projectRoot + : os.homedir(); const child = spawn('sh', ['-c', updateCommand], { - cwd: installMode === 'git' ? projectRoot : os.homedir(), + cwd: updateCwd, env: process.env }); diff --git a/src/components/version-upgrade/view/VersionUpgradeModal.tsx b/src/components/version-upgrade/view/VersionUpgradeModal.tsx index d4570ee5..c9be12d2 100644 --- a/src/components/version-upgrade/view/VersionUpgradeModal.tsx +++ b/src/components/version-upgrade/view/VersionUpgradeModal.tsx @@ -4,6 +4,7 @@ import { authenticatedFetch } from "../../../utils/api"; import { ReleaseInfo } from "../../../types/sharedTypes"; import { copyTextToClipboard } from "../../../utils/clipboard"; import type { InstallMode } from "../../../hooks/useVersionCheck"; +import { IS_PLATFORM } from "../../../constants/config"; interface VersionUpgradeModalProps { isOpen: boolean; @@ -25,7 +26,9 @@ export function VersionUpgradeModal({ const { t } = useTranslation('common'); const upgradeCommand = installMode === 'npm' ? t('versionUpdate.npmUpgradeCommand') - : 'git checkout main && git pull && npm install'; + : IS_PLATFORM + ? 'npm run update:platform' + : 'git checkout main && git pull && npm install'; const [isUpdating, setIsUpdating] = useState(false); const [updateOutput, setUpdateOutput] = useState(''); const [updateError, setUpdateError] = useState(''); @@ -46,7 +49,8 @@ export function VersionUpgradeModal({ if (response.ok) { setUpdateOutput(prev => prev + data.output + '\n'); setUpdateOutput(prev => prev + '\n✅ Update completed successfully!\n'); - setUpdateOutput(prev => prev + 'Please restart the server to apply changes.\n'); + const text = IS_PLATFORM ? 'Please refresh the page after 5 seconds to load the new version. If that doesn\'t work, RESTART the environment.' : 'Please restart the server to apply changes.'; + setUpdateOutput(prev => prev + text + '\n'); } else { setUpdateError(data.error || 'Update failed'); setUpdateOutput(prev => prev + '\n❌ Update failed: ' + (data.error || 'Unknown error') + '\n'); From 6ce3306947d40014e4df2463de04916a4f107404 Mon Sep 17 00:00:00 2001 From: viper151 Date: Tue, 14 Apr 2026 15:20:18 +0000 Subject: [PATCH 08/14] chore(release): v1.29.0 --- CHANGELOG.md | 14 ++++++++++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f1f49d9f..daac93a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,20 @@ All notable changes to CloudCLI UI will be documented in this file. +## [1.29.0](https://github.com/siteboon/claudecodeui/compare/v1.28.1...v1.29.0) (2026-04-14) + +### New Features + +* adding docker sandbox environments ([13e97e2](https://github.com/siteboon/claudecodeui/commit/13e97e2c71254de7a60afb5495b21064c4bc4241)) + +### Bug Fixes + +* **thinking-mode:** fix dropdown positioning ([#646](https://github.com/siteboon/claudecodeui/issues/646)) ([c7a5baf](https://github.com/siteboon/claudecodeui/commit/c7a5baf1479404bd40e23aa58bd9f677df9a04c6)) + +### Maintenance + +* update release flow node version ([e2459cb](https://github.com/siteboon/claudecodeui/commit/e2459cb0f8b35f54827778a7b444e6c3ca326506)) + ## [1.28.1](https://github.com/siteboon/claudecodeui/compare/v1.28.0...v1.28.1) (2026-04-10) ### New Features diff --git a/package-lock.json b/package-lock.json index 1e80b8bd..192b06eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@cloudcli-ai/cloudcli", - "version": "1.28.1", + "version": "1.29.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@cloudcli-ai/cloudcli", - "version": "1.28.1", + "version": "1.29.0", "hasInstallScript": true, "license": "AGPL-3.0-or-later", "dependencies": { diff --git a/package.json b/package.json index f2af9ce7..1b94330e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cloudcli-ai/cloudcli", - "version": "1.28.1", + "version": "1.29.0", "description": "A web-based UI for Claude Code CLI", "type": "module", "main": "server/index.js", From 4a569725dae320a505753359d8edfd8ca79f0fd7 Mon Sep 17 00:00:00 2001 From: simosmik Date: Tue, 14 Apr 2026 17:37:20 +0000 Subject: [PATCH 09/14] fix: add latest tag to docker npx command and change the detach mode to work without spawn --- README.de.md | 2 +- README.ja.md | 2 +- README.ko.md | 2 +- README.md | 4 ++-- README.ru.md | 2 +- README.zh-CN.md | 2 +- docker/README.md | 30 ++++++++++++++++++++++-------- server/cli.js | 22 ++++++++++------------ 8 files changed, 39 insertions(+), 27 deletions(-) diff --git a/README.de.md b/README.de.md index 4e354020..461f59a8 100644 --- a/README.de.md +++ b/README.de.md @@ -100,7 +100,7 @@ Die **[Dokumentation →](https://cloudcli.ai/docs)** enthält weitere Konfigura Agents in isolierten Sandboxes mit Hypervisor-Isolation ausführen. Standardmäßig wird Claude Code gestartet. Erfordert die [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/). ``` -npx @cloudcli-ai/cloudcli sandbox ~/my-project +npx @cloudcli-ai/cloudcli@latest sandbox ~/my-project ``` Unterstützt Claude Code, Codex und Gemini CLI. Weitere Details in der [Sandbox-Dokumentation](docker/). diff --git a/README.ja.md b/README.ja.md index dfca8cda..a3c7d04b 100644 --- a/README.ja.md +++ b/README.ja.md @@ -96,7 +96,7 @@ cloudcli ハイパーバイザーレベルの分離でエージェントをサンドボックスで実行します。デフォルトでは Claude Code が起動します。[`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/) が必要です。 ``` -npx @cloudcli-ai/cloudcli sandbox ~/my-project +npx @cloudcli-ai/cloudcli@latest sandbox ~/my-project ``` Claude Code、Codex、Gemini CLI に対応。詳細は[サンドボックスのドキュメント](docker/)をご覧ください。 diff --git a/README.ko.md b/README.ko.md index 6cee2adf..f0c17471 100644 --- a/README.ko.md +++ b/README.ko.md @@ -96,7 +96,7 @@ cloudcli 하이퍼바이저 수준 격리로 에이전트를 샌드박스에서 실행합니다. 기본 에이전트는 Claude Code입니다. [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/)가 필요합니다. ``` -npx @cloudcli-ai/cloudcli sandbox ~/my-project +npx @cloudcli-ai/cloudcli@latest sandbox ~/my-project ``` Claude Code, Codex, Gemini CLI를 지원합니다. 자세한 내용은 [샌드박스 문서](docker/)를 참고하세요. diff --git a/README.md b/README.md index 986505b3..b6f2cfb7 100644 --- a/README.md +++ b/README.md @@ -100,7 +100,7 @@ Visit the **[documentation →](https://cloudcli.ai/docs)** for full configurati Run agents in isolated sandboxes with hypervisor-level isolation. Starts Claude Code by default. Requires the [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/). ``` -npx @cloudcli-ai/cloudcli sandbox ~/my-project +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. @@ -116,7 +116,7 @@ CloudCLI UI is the open source UI layer that powers CloudCLI Cloud. You can self |---|---|---|---| | **Best for** | Local agent sessions on your own machine | Isolated agents with web/mobile IDE | Teams who want agents in the cloud | | **How you access it** | Browser via `[yourip]:port` | Browser via `localhost:port` | Browser, any IDE, REST API, n8n | -| **Setup** | `npx @cloudcli-ai/cloudcli` | `npx @cloudcli-ai/cloudcli sandbox ~/project` | No setup required | +| **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 | diff --git a/README.ru.md b/README.ru.md index 55b936a8..a5907b38 100644 --- a/README.ru.md +++ b/README.ru.md @@ -100,7 +100,7 @@ cloudcli Запускайте агентов в изолированных песочницах с гипервизорной изоляцией. По умолчанию запускается Claude Code. Требуется [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/). ``` -npx @cloudcli-ai/cloudcli sandbox ~/my-project +npx @cloudcli-ai/cloudcli@latest sandbox ~/my-project ``` Поддерживаются Claude Code, Codex и Gemini CLI. Подробнее в [документации sandbox](docker/). diff --git a/README.zh-CN.md b/README.zh-CN.md index 3f18d3cd..daf9a1a9 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -96,7 +96,7 @@ cloudcli 在隔离的沙箱中运行代理，具有虚拟机管理程序级别的隔离。默认启动 Claude Code。需要 [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/)。 ``` -npx @cloudcli-ai/cloudcli sandbox ~/my-project +npx @cloudcli-ai/cloudcli@latest sandbox ~/my-project ``` 支持 Claude Code、Codex 和 Gemini CLI。详情请参阅 [沙箱文档](docker/)。 diff --git a/docker/README.md b/docker/README.md index c093eccb..134ebad0 100644 --- a/docker/README.md +++ b/docker/README.md @@ -29,7 +29,7 @@ sbx secret set -g anthropic ### 3. Launch Claude Code ```bash -npx @cloudcli-ai/cloudcli sandbox ~/my-project +npx @cloudcli-ai/cloudcli@latest sandbox ~/my-project ``` Open **http://localhost:3001**. Set a password on first visit. Start building. @@ -41,11 +41,11 @@ Store the matching API key and pass `--agent`: ```bash # OpenAI Codex sbx secret set -g openai -npx @cloudcli-ai/cloudcli sandbox ~/my-project --agent codex +npx @cloudcli-ai/cloudcli@latest sandbox ~/my-project --agent codex # Gemini CLI sbx secret set -g google -npx @cloudcli-ai/cloudcli sandbox ~/my-project --agent gemini +npx @cloudcli-ai/cloudcli@latest sandbox ~/my-project --agent gemini ``` ### Available templates @@ -61,11 +61,19 @@ These are used with `--template` when running `sbx` directly (see [Advanced usag ## Managing sandboxes ```bash -cloudcli sandbox ls # List all sandboxes -cloudcli sandbox stop my-project # Stop (preserves state) +sbx ls # List all sandboxes +sbx stop my-project # Stop (preserves state) +sbx start my-project # Restart a stopped sandbox +sbx rm my-project # Remove everything +sbx exec my-project bash # Open a shell inside the sandbox +``` + +If you install CloudCLI globally (`npm install -g @cloudcli-ai/cloudcli`), you can also use: + +```bash +cloudcli sandbox ls cloudcli sandbox start my-project # Restart and re-launch web UI cloudcli sandbox logs my-project # View server logs -cloudcli sandbox rm my-project # Remove everything ``` ## What you get @@ -84,14 +92,20 @@ Your project directory is mounted bidirectionally — edits propagate in real ti Set variables at creation time with `--env`: ```bash -npx @cloudcli-ai/cloudcli sandbox ~/my-project --env SERVER_PORT=8080 +npx @cloudcli-ai/cloudcli@latest sandbox ~/my-project --env SERVER_PORT=8080 ``` Or inside a running sandbox: ```bash sbx exec my-project bash -c 'echo "export SERVER_PORT=8080" >> /etc/sandbox-persistent.sh' -sbx exec my-project bash -c 'pkill -f "server/index.js"; . ~/.cloudcli-start.sh' +``` + +Restart CloudCLI for changes to take effect: + +```bash +sbx exec my-project bash -c 'pkill -f "server/index.js"' +sbx exec -d my-project cloudcli start --port 3001 ``` | Variable | Default | Description | diff --git a/server/cli.js b/server/cli.js index dad74268..1d847159 100755 --- a/server/cli.js +++ b/server/cli.js @@ -448,7 +448,7 @@ async function sandboxCommand(args) { } catch { /* might already be running */ } console.log(`${c.info('▶')} Launching CloudCLI web server...`); - sbx(['exec', '-d', opts.name, 'bash', '-c', '. ~/.cloudcli-start.sh']); + sbx(['exec', '-d', opts.name, 'cloudcli', 'start', '--port', '3001']); console.log(`${c.info('▶')} Forwarding port ${opts.port} → 3001...`); try { @@ -548,14 +548,11 @@ async function sandboxCommand(args) { } } - // Step 3: Start CloudCLI + // Step 3: Start CloudCLI as a long-running detached exec session. + // Using -d with a long-running command (cloudcli start never exits) + // keeps the exec session alive, which keeps the sandbox running. console.log(`${c.info('▶')} Launching CloudCLI web server...`); - try { - sbx(['exec', '-d', opts.name, 'bash', '-c', '. ~/.cloudcli-start.sh']); - } catch (e) { - console.error(`${c.error('❌')} Failed to start CloudCLI: ${e.message}`); - process.exit(1); - } + sbx(['exec', '-d', opts.name, 'cloudcli', 'start', '--port', '3001']); // Step 4: Forward port console.log(`${c.info('▶')} Forwarding port ${opts.port} → 3001...`); @@ -582,10 +579,11 @@ async function sandboxCommand(args) { console.log(`\n${c.ok('✔')} ${c.bright('CloudCLI is ready!')}`); console.log(` ${c.info('→')} Open ${c.bright(`http://localhost:${opts.port}`)}`); console.log(`\n${c.dim(' Manage with:')}`); - console.log(` ${c.dim('$')} cloudcli sandbox ls`); - console.log(` ${c.dim('$')} cloudcli sandbox stop ${opts.name}`); - console.log(` ${c.dim('$')} cloudcli sandbox start ${opts.name}`); - console.log(` ${c.dim('$')} cloudcli sandbox rm ${opts.name}\n`); + console.log(` ${c.dim('$')} sbx ls`); + console.log(` ${c.dim('$')} sbx stop ${opts.name}`); + console.log(` ${c.dim('$')} sbx start ${opts.name}`); + console.log(` ${c.dim('$')} sbx rm ${opts.name}`); + console.log(`\n${c.dim(' Or install globally:')} npm install -g @cloudcli-ai/cloudcli\n`); break; } From b6d19201b6ee86975b4abdb40a3b22b494b0127e Mon Sep 17 00:00:00 2001 From: viper151 Date: Tue, 14 Apr 2026 17:38:53 +0000 Subject: [PATCH 10/14] chore(release): v1.29.1 --- CHANGELOG.md | 6 ++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index daac93a0..87e6848f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to CloudCLI UI will be documented in this file. +## [1.29.1](https://github.com/siteboon/claudecodeui/compare/v1.29.0...v1.29.1) (2026-04-14) + +### Bug Fixes + +* add latest tag to docker npx command and change the detach mode to work without spawn ([4a56972](https://github.com/siteboon/claudecodeui/commit/4a569725dae320a505753359d8edfd8ca79f0fd7)) + ## [1.29.0](https://github.com/siteboon/claudecodeui/compare/v1.28.1...v1.29.0) (2026-04-14) ### New Features diff --git a/package-lock.json b/package-lock.json index 192b06eb..1a78cb27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@cloudcli-ai/cloudcli", - "version": "1.29.0", + "version": "1.29.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@cloudcli-ai/cloudcli", - "version": "1.29.0", + "version": "1.29.1", "hasInstallScript": true, "license": "AGPL-3.0-or-later", "dependencies": { diff --git a/package.json b/package.json index 1b94330e..521a634b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cloudcli-ai/cloudcli", - "version": "1.29.0", + "version": "1.29.1", "description": "A web-based UI for Claude Code CLI", "type": "module", "main": "server/index.js", From 9b11c034d9a19710a23b56c62dcf07c21a17bd97 Mon Sep 17 00:00:00 2001 From: simosmik Date: Tue, 14 Apr 2026 18:14:58 +0000 Subject: [PATCH 11/14] fix(sandbox): use backgrounded sbx run to keep sandbox alive --- server/cli.js | 46 ++++++++++++++++++++++------------------------ 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/server/cli.js b/server/cli.js index 1d847159..3c0d1d4f 100755 --- a/server/cli.js +++ b/server/cli.js @@ -367,7 +367,7 @@ Advanced usage: } async function sandboxCommand(args) { - const { execFileSync } = await import('child_process'); + const { execFileSync, spawn: spawnProcess } = await import('child_process'); // Safe execution — uses execFileSync (no shell) to prevent injection const sbx = (subcmd, opts = {}) => { @@ -443,12 +443,15 @@ async function sandboxCommand(args) { process.exit(1); } console.log(`\n${c.info('▶')} Starting sandbox ${c.bright(opts.name)}...`); - try { - sbx(['start', opts.name], { inherit: true }); - } catch { /* might already be running */ } + const restartRun = spawnProcess('sbx', ['run', opts.name], { + detached: true, + stdio: ['ignore', 'ignore', 'ignore'], + }); + restartRun.unref(); + await new Promise(resolve => setTimeout(resolve, 5000)); console.log(`${c.info('▶')} Launching CloudCLI web server...`); - sbx(['exec', '-d', opts.name, 'cloudcli', 'start', '--port', '3001']); + sbx(['exec', opts.name, 'bash', '-c', 'cloudcli start --port 3001 &']); console.log(`${c.info('▶')} Forwarding port ${opts.port} → 3001...`); try { @@ -515,22 +518,19 @@ async function sandboxCommand(args) { } console.log(c.dim('─'.repeat(50))); - // Step 1: Create sandbox + // Step 1: Launch sandbox with sbx run in background. + // sbx run creates the sandbox (or reconnects) AND holds an active session, + // which prevents the sandbox from auto-stopping. console.log(`\n${c.info('▶')} Creating sandbox ${c.bright(opts.name)}...`); - try { - sbx( - ['create', '--template', opts.template, '--name', opts.name, opts.agent, workspace], - { inherit: true } - ); - } catch (e) { - const msg = e.stdout || e.stderr || e.message || ''; - if (msg.includes('already exists')) { - console.log(`${c.warn('⚠')} Sandbox ${c.bright(opts.name)} already exists. Starting it instead...\n`); - try { sbx(['start', opts.name]); } catch { /* may already be running */ } - } else { - throw e; - } - } + const bgRun = spawnProcess('sbx', [ + 'run', '--template', opts.template, '--name', opts.name, opts.agent, workspace, + ], { + detached: true, + stdio: ['ignore', 'ignore', 'ignore'], + }); + bgRun.unref(); + // Wait for sandbox to be ready + await new Promise(resolve => setTimeout(resolve, 5000)); // Step 2: Inject environment variables if (opts.env.length > 0) { @@ -548,11 +548,9 @@ async function sandboxCommand(args) { } } - // Step 3: Start CloudCLI as a long-running detached exec session. - // Using -d with a long-running command (cloudcli start never exits) - // keeps the exec session alive, which keeps the sandbox running. + // Step 3: Start CloudCLI inside the sandbox console.log(`${c.info('▶')} Launching CloudCLI web server...`); - sbx(['exec', '-d', opts.name, 'cloudcli', 'start', '--port', '3001']); + sbx(['exec', opts.name, 'bash', '-c', 'cloudcli start --port 3001 &']); // Step 4: Forward port console.log(`${c.info('▶')} Forwarding port ${opts.port} → 3001...`); From c3599cd2c48048c969a10bcefcb16c4caf20c57b Mon Sep 17 00:00:00 2001 From: viper151 Date: Tue, 14 Apr 2026 18:16:20 +0000 Subject: [PATCH 12/14] chore(release): v1.29.2 --- CHANGELOG.md | 6 ++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 87e6848f..149443d3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to CloudCLI UI will be documented in this file. +## [1.29.2](https://github.com/siteboon/claudecodeui/compare/v1.29.1...v1.29.2) (2026-04-14) + +### Bug Fixes + +* **sandbox:** use backgrounded sbx run to keep sandbox alive ([9b11c03](https://github.com/siteboon/claudecodeui/commit/9b11c034d9a19710a23b56c62dcf07c21a17bd97)) + ## [1.29.1](https://github.com/siteboon/claudecodeui/compare/v1.29.0...v1.29.1) (2026-04-14) ### Bug Fixes diff --git a/package-lock.json b/package-lock.json index 1a78cb27..21bee5b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@cloudcli-ai/cloudcli", - "version": "1.29.1", + "version": "1.29.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@cloudcli-ai/cloudcli", - "version": "1.29.1", + "version": "1.29.2", "hasInstallScript": true, "license": "AGPL-3.0-or-later", "dependencies": { diff --git a/package.json b/package.json index 521a634b..2a80d5a3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cloudcli-ai/cloudcli", - "version": "1.29.1", + "version": "1.29.2", "description": "A web-based UI for Claude Code CLI", "type": "module", "main": "server/index.js", From 641304242d7705b54aab65faa4a7673438c92c60 Mon Sep 17 00:00:00 2001 From: Haile <118998054+blackmammoth@users.noreply.github.com> Date: Wed, 15 Apr 2026 00:02:20 +0300 Subject: [PATCH 13/14] fix(version-upgrade-modal): implement reload countdown and update UI messages (#655) Co-authored-by: Haileyesus --- .../view/VersionUpgradeModal.tsx | 34 +++++++++++++++++-- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/src/components/version-upgrade/view/VersionUpgradeModal.tsx b/src/components/version-upgrade/view/VersionUpgradeModal.tsx index c9be12d2..cf6b94b7 100644 --- a/src/components/version-upgrade/view/VersionUpgradeModal.tsx +++ b/src/components/version-upgrade/view/VersionUpgradeModal.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { authenticatedFetch } from "../../../utils/api"; import { ReleaseInfo } from "../../../types/sharedTypes"; @@ -15,6 +15,8 @@ interface VersionUpgradeModalProps { installMode: InstallMode; } +const RELOAD_COUNTDOWN_START = 30; + export function VersionUpgradeModal({ isOpen, onClose, @@ -32,10 +34,30 @@ export function VersionUpgradeModal({ const [isUpdating, setIsUpdating] = useState(false); const [updateOutput, setUpdateOutput] = useState(''); const [updateError, setUpdateError] = useState(''); + const [reloadCountdown, setReloadCountdown] = useState(null); + + useEffect(() => { + if (!IS_PLATFORM || reloadCountdown === null || reloadCountdown <= 0) { + return; + } + + const timeoutId = window.setTimeout(() => { + setReloadCountdown((previousCountdown) => { + if (previousCountdown === null) { + return null; + } + + return Math.max(previousCountdown - 1, 0); + }); + }, 1000); + + return () => window.clearTimeout(timeoutId); + }, [reloadCountdown]); const handleUpdateNow = useCallback(async () => { setIsUpdating(true); setUpdateOutput('Starting update...\n'); + setReloadCountdown(IS_PLATFORM ? RELOAD_COUNTDOWN_START : null); setUpdateError(''); try { @@ -49,8 +71,7 @@ export function VersionUpgradeModal({ if (response.ok) { setUpdateOutput(prev => prev + data.output + '\n'); setUpdateOutput(prev => prev + '\n✅ Update completed successfully!\n'); - const text = IS_PLATFORM ? 'Please refresh the page after 5 seconds to load the new version. If that doesn\'t work, RESTART the environment.' : 'Please restart the server to apply changes.'; - setUpdateOutput(prev => prev + text + '\n'); + setUpdateOutput(prev => prev + 'Please restart the server to apply changes.' + '\n'); } else { setUpdateError(data.error || 'Update failed'); setUpdateOutput(prev => prev + '\n❌ Update failed: ' + (data.error || 'Unknown error') + '\n'); @@ -147,6 +168,13 @@ export function VersionUpgradeModal({ 
{updateOutput}
+ {IS_PLATFORM && reloadCountdown !== null && ( +
+ {reloadCountdown === 0 + ? 'Refresh the page now. If that doesn\'t work, RESTART the environment.' + : `Refresh the page in ${reloadCountdown} ${reloadCountdown === 1 ? 'second' : 'seconds'}. If that doesn\'t work, RESTART the environment.`} +
+ )} {updateError && (
{updateError} From 8ff5f35c05509fb3b1d38e939a0088db37eb1ef3 Mon Sep 17 00:00:00 2001 From: Simos Mikelatos Date: Tue, 14 Apr 2026 23:06:43 +0200 Subject: [PATCH 14/14] Update model constants for Opus and Gemini versions --- shared/modelConstants.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/shared/modelConstants.js b/shared/modelConstants.js index 514a1772..389fb633 100644 --- a/shared/modelConstants.js +++ b/shared/modelConstants.js @@ -18,9 +18,10 @@ export const CLAUDE_MODELS = { { value: "haiku", label: "Haiku" }, { value: "opusplan", label: "Opus Plan" }, { value: "sonnet[1m]", label: "Sonnet [1M]" }, + { value: "opus[1m]", label: "Opus [1M]" }, ], - DEFAULT: "sonnet", + DEFAULT: "opus", }; /** @@ -58,6 +59,7 @@ export const CURSOR_MODELS = { export const CODEX_MODELS = { OPTIONS: [ { value: "gpt-5.4", label: "GPT-5.4" }, + { value: "gpt-5.4-mini", label: "GPT-5.4 mini" }, { value: "gpt-5.3-codex", label: "GPT-5.3 Codex" }, { value: "gpt-5.2-codex", label: "GPT-5.2 Codex" }, { value: "gpt-5.2", label: "GPT-5.2" }, @@ -88,5 +90,5 @@ export const GEMINI_MODELS = { }, ], - DEFAULT: "gemini-2.5-flash", + DEFAULT: "gemini-3.1-pro-preview", };