window.__APP_VERSION__ = '1.34.0'; window.__MOCK_STATE__ = { account: { connected: true, email: 'you@cloudcli.ai' }, activeTarget: { kind: 'launcher', name: 'Launcher', url: null }, cloudLoading: false, desktopSettings: { keepLocalServerRunning: false, exposeLocalServerOnNetwork: false, themeMode: 'system' }, localWebUrl: 'http://localhost:3001', shareableWebUrl: 'http://localhost:3001', localServerRunning: false, localStartupLogs: [], computerUse: { enabled: false, consentMode: 'ask', running: false, connectedCount: 0, targetCount: 0 }, environments: [ { id: 'env-api', name: 'api-gateway', subdomain: 'api-gateway', access_url: 'https://api-gateway.cloudcli.ai', status: 'running', region: 'fra1', agent: 'Claude Code' }, { id: 'env-web', name: 'web-frontend', subdomain: 'web-frontend', access_url: 'https://web-frontend.cloudcli.ai', status: 'stopped', region: 'sfo1', agent: 'Codex' }, { id: 'env-data', name: 'data-pipeline', subdomain: 'data-pipeline', access_url: 'https://data-pipeline.cloudcli.ai', status: 'stopped', region: 'fra1', agent: 'Cursor' }, { id: 'env-ml', name: 'ml-trainer', subdomain: 'ml-trainer', access_url: 'https://ml-trainer.cloudcli.ai', status: 'paused', region: 'iad1', agent: 'Gemini' }, ], }; (function cloudCliLauncher() { var MOCK = window.__MOCK_STATE__ || {}; var VERSION = window.__APP_VERSION__ || ''; var LOGO_URL = new URL('../../public/logo-32.png', window.location.href).toString(); var SEARCH = new URLSearchParams(window.location.search || ''); function clone(value) { return JSON.parse(JSON.stringify(value)); } var mockState = clone(MOCK); var mockBridge = { getState: function () { return Promise.resolve(clone(mockState)); }, openLocal: function () { mockState.localServerRunning = true; mockState.activeTarget = { kind: 'local', name: 'Local CloudCLI', url: mockState.localWebUrl }; return Promise.resolve(clone(mockState)); }, openLocalWebUi: function () { mockState.localServerRunning = true; return Promise.resolve(clone(mockState)); }, copyLocalWebUrl: function () { return Promise.resolve(clone(mockState)); }, connectCloud: function () { mockState.account = { connected: true, email: 'you@cloudcli.ai' }; return Promise.resolve(clone(mockState)); }, refreshEnvironments: function () { return Promise.resolve(clone(mockState)); }, copyDiagnostics: function () { return Promise.resolve(clone(mockState)); }, showComputerAccess: function () { return Promise.resolve(clone(mockState)); }, showEnvironmentPicker: function () { return Promise.resolve(clone(mockState)); }, showLauncher: function () { return Promise.resolve(clone(mockState)); }, showLocalSettings: function () { return Promise.resolve(clone(mockState)); }, showDesktopSettings: function () { return Promise.resolve(clone(mockState)); }, closeSettingsWindow: function () { return Promise.resolve(clone(mockState)); }, showActiveEnvironmentActionsMenu: function () { return Promise.resolve(clone(mockState)); }, openCloudDashboard: function () { return Promise.resolve(clone(mockState)); }, runActiveEnvironmentAction: function () { return Promise.resolve(clone(mockState)); }, switchTab: function (id) { mockState.activeTabId = id; return Promise.resolve(clone(mockState)); }, closeTab: function (id) { mockState.tabs = (mockState.tabs || []).filter(function (tab) { return tab.id === 'home' || tab.id !== id; }); if (mockState.activeTabId === id) mockState.activeTabId = 'home'; return Promise.resolve(clone(mockState)); }, updateSetting: function (key, value) { mockState.desktopSettings = mockState.desktopSettings || {}; mockState.desktopSettings[key] = key === 'themeMode' ? value : !!value; return Promise.resolve(clone(mockState)); }, updateComputerUse: function (settings) { mockState.computerUse = mockState.computerUse || { enabled: false, consentMode: 'ask', running: false, connectedCount: 0, targetCount: 0 }; if (typeof settings.enabled === 'boolean') mockState.computerUse.enabled = settings.enabled; if (settings.consentMode === 'auto' || settings.consentMode === 'ask') mockState.computerUse.consentMode = settings.consentMode; mockState.computerUse.running = mockState.computerUse.enabled; return Promise.resolve(clone(mockState)); }, openEnvironment: function (id) { var env = (mockState.environments || []).filter(function (item) { return item.id === id; })[0]; if (env) { env.status = 'starting'; setTimeout(function () { env.status = 'running'; mockState.activeTarget = { kind: 'remote', id: id, name: env.name, url: env.access_url }; }, 1700); } return Promise.resolve(clone(mockState)); }, }; var bridge = window.cloudcliDesktop || mockBridge; var ICONS = { terminal: '', cloud: '', refresh: '', settings: '', gear: '', play: '', arrow: '', copy: '', cloudPlus: '', monitor: '', phone: '', x: '', }; var FILLED = { play: true }; function icon(name, size) { size = size || 16; return '' + (ICONS[name] || '') + ''; } function esc(value) { return String(value == null ? '' : value) .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"'); } function statusMeta(status) { var map = { running: { label: 'Running', cls: 'ok', dot: '#10b981', verb: 'Opening', open: 'Open' }, starting: { label: 'Starting', cls: 'warn', dot: '#f59e0b', verb: 'Starting', open: 'Open', busy: true }, stopped: { label: 'Stopped', cls: 'idle', dot: '#6b7280', verb: 'Starting', open: 'Start & open' }, paused: { label: 'Paused', cls: 'warn', dot: '#f59e0b', verb: 'Resuming', open: 'Resume' }, }; return map[status] || { label: status || 'Unknown', cls: 'idle', dot: '#6b7280', verb: 'Starting', open: 'Start & open' }; } function connected(state) { return !!(state && state.account && state.account.connected); } function authState(state) { return state && state.account ? (state.account.authState || (state.account.connected ? 'connected' : 'logged_out')) : 'logged_out'; } function accountLabel(state) { if (authState(state) === 'expired') return 'Reconnect'; if (state && state.account && state.account.email) return state.account.email; if (connected(state)) return 'Connected'; return 'Log in'; } function localUrl(state) { return (state && (state.shareableWebUrl || state.localWebUrl)) || ''; } function envCount(state) { var count = state && state.environments ? state.environments.length : 0; return count + ' environment' + (count === 1 ? '' : 's'); } function errMsg(error) { return error && error.message ? error.message : String(error); } function resolveTheme(state) { var settings = state && state.desktopSettings ? state.desktopSettings : {}; var mode = settings.themeMode || 'system'; if (mode === 'light' || mode === 'dark') return mode; return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } function computerUseStatus(state) { var computerUse = state && state.computerUse ? state.computerUse : {}; if (!computerUse.enabled) { return { label: 'Disabled', tone: 'idle', detail: 'CloudCLI cannot use this computer.' }; } if (computerUse.consentMode === 'auto') { return { label: 'Unattended access', tone: 'warn', detail: 'Trusted agents can use this computer without a local approval prompt.' }; } return { label: 'Ask before each session', tone: 'ok', detail: 'Agents need approval before control starts.' }; } var CC = { icon: icon, esc: esc, statusMeta: statusMeta, connected: connected, authState: authState, accountLabel: accountLabel, localUrl: localUrl, envCount: envCount, computerUseStatus: computerUseStatus, version: VERSION, logoUrl: LOGO_URL, platform: 'win', state: clone(MOCK), ui: {}, _busyEnv: null, _status: { msg: '', tone: '' }, _reg: {}, _wired: false, _poll: null, modalMode: SEARCH.get('modal') === '1', }; window.CC = CC; var app; var overlay; CC.setState = function (state) { var currentSheet = CC.ui.openSheet || (CC.modalMode ? (CC.ui.initialSheet || 'desktop-settings') : null); var sheetBody = overlay ? overlay.querySelector('.cc-sheet-body') : null; var scrollTop = sheetBody ? sheetBody.scrollTop : 0; if (state && typeof state === 'object') CC.state = state; CC.applyTheme(CC.state); CC.render(CC.state); if (currentSheet) { CC.openSheet(currentSheet, { scrollTop: scrollTop }); } }; CC.applyTheme = function (state) { var settings = state && state.desktopSettings ? state.desktopSettings : {}; var themeMode = settings.themeMode || 'system'; var resolvedTheme = resolveTheme(state); document.documentElement.setAttribute('data-theme', resolvedTheme); document.documentElement.setAttribute('data-theme-mode', themeMode); }; CC.refresh = function () { return Promise.resolve(bridge.getState()).then(function (state) { CC.setState(state); return state; }); }; CC.run = function (label, fn) { CC._status = { msg: label, tone: 'progress' }; CC.render(CC.state); return Promise.resolve() .then(fn) .then(function (state) { if (state && state.environments) CC.state = state; return CC.refresh(); }) .then(function () { CC._status = { msg: '', tone: '' }; CC.render(CC.state); }) .catch(function (error) { CC._status = { msg: errMsg(error), tone: 'error' }; CC.render(CC.state); }); }; CC.startPolling = function () { if (CC._poll) return; var ticks = 0; CC._poll = setInterval(function () { ticks += 1; Promise.resolve(bridge.getState()).then(function (state) { CC.setState(state); var anyStarting = (state.environments || []).some(function (environment) { return environment.status === 'starting'; }); if (!anyStarting || ticks > 16) { clearInterval(CC._poll); CC._poll = null; if (!anyStarting) { CC._status = { msg: '', tone: '' }; CC.render(CC.state); } } }); }, 1500); }; CC.openEnv = function (id) { var env = (CC.state.environments || []).filter(function (environment) { return environment.id === id; })[0]; var meta = statusMeta(env ? env.status : ''); CC._busyEnv = id; CC._status = { msg: (meta.verb || 'Opening') + ' ' + ((env && (env.name || env.subdomain)) || 'environment') + '...', tone: 'progress' }; if (env) { var tabId = 'remote:' + env.id; var tabs = CC.state.tabs && CC.state.tabs.length ? CC.state.tabs : [{ id: 'home', title: 'Home', kind: 'launcher', closable: false }]; tabs = tabs.map(function (tab) { tab.active = false; return tab; }); var existing = tabs.filter(function (tab) { return tab.id === tabId; })[0]; if (existing) { existing.active = true; existing.title = env.name || env.subdomain; } else { tabs.push({ id: tabId, title: env.name || env.subdomain, kind: 'remote', closable: true, active: true }); } CC.state.tabs = tabs; CC.state.activeTabId = tabId; } if (env && env.status !== 'running') env.status = 'starting'; CC.render(CC.state); return Promise.resolve(bridge.openEnvironment(id)).then(function (state) { if (state && state.environments) CC.setState(state); CC.startPolling(); }).catch(function (error) { CC._busyEnv = null; if (env) env.status = 'stopped'; CC._status = { msg: errMsg(error), tone: 'error' }; CC.render(CC.state); }); }; CC.act = function (name, node) { switch (name) { case 'local': return CC.run('Starting Local CloudCLI...', function () { return bridge.openLocal(); }); case 'connect': return CC.run('Opening cloudcli.ai to connect your account...', function () { return bridge.connectCloud(); }); case 'open-web': return CC.run('Opening local web UI in your browser...', function () { return bridge.openLocalWebUi(); }); case 'copy-web': return CC.run('Copied local URL to clipboard', function () { return bridge.copyLocalWebUrl(); }); case 'diagnostics': return CC.run('Copied diagnostics to clipboard', function () { return bridge.copyDiagnostics(); }); case 'set-setting': return CC.run('Saved', function () { return bridge.updateSetting(node.key, node.value); }); case 'set-theme-mode': return CC.run('Saved', function () { return bridge.updateSetting('themeMode', node.value); }); case 'set-computer-mode': return CC.run('Saved', function () { return bridge.updateComputerUse({ enabled: true, consentMode: node.value, }); }); case 'set-computer-enabled': return CC.run('Saved', function () { var current = (CC.state && CC.state.computerUse) || { consentMode: 'ask' }; return bridge.updateComputerUse({ enabled: !!node.value, consentMode: current.consentMode === 'auto' ? 'auto' : 'ask', }); }); case 'settings-toggle': return CC.run('Opening desktop settings...', function () { return bridge.showDesktopSettings(); }); case 'desktop-settings-toggle': return CC.run('Opening desktop settings...', function () { return bridge.showDesktopSettings(); }); case 'local-settings-toggle': return CC.run('Opening local settings...', function () { return bridge.showLocalSettings(); }); case 'computer-settings-toggle': return CC.run('Opening desktop settings...', function () { return bridge.showDesktopSettings(); }); case 'settings-close': return CC.closeSheet(); case 'dashboard': return CC.run('Opening CloudCLI dashboard...', function () { return bridge.openCloudDashboard(); }); case 'env-action': return CC.run('Opening environment...', function () { return bridge.runActiveEnvironmentAction(node.getAttribute('data-cc-env-action')); }); case 'env-menu': return CC.run('Opening environment actions...', function () { return bridge.showActiveEnvironmentActionsMenu(); }); case 'env-row-menu': return CC.run('Opening environment actions...', function () { return bridge.showEnvironmentActionsMenu(node.getAttribute('data-cc-environment-id')); }); default: return; } }; function renderTabs(state) { var tabs = state.tabs && state.tabs.length ? state.tabs : [{ id: 'home', title: 'Home', closable: false, active: true }]; return tabs.map(function (tab) { var title = tab.title || ''; var visibleChars = Math.min(title.length, 20); var tabWidth = Math.max(112, Math.min(232, (visibleChars * 8) + (tab.closable ? 56 : 38))); return ''; }).join(''); } CC.titlebar = function (state) { var conn = connected(state); var activeRemote = state.activeTarget && state.activeTarget.kind === 'remote'; var envActions = activeRemote ? '' : ''; return '
' + '
CloudCLI
' + '
' + renderTabs(state) + '
' + '' + envActions + '' + '' + '
'; }; CC.statusbar = function (state) { var status = CC._status || {}; var running = !!state.localServerRunning; return '
' + ' local ' + (running ? 'running · ' + esc(localUrl(state)) : 'idle') + '' + '·' + esc(envCount(state)) + '' + '·' + (authState(state) === 'expired' ? 'session expired' : (connected(state) ? esc(accountLabel(state)) : 'not connected')) + '' + '' + (status.msg ? '' + esc(status.msg) + '·' : '') + 'v' + esc(VERSION) + '' + '
'; }; CC.renderSheet = function (title, subtitle, sections, footer) { overlay.innerHTML = '
' + '
' + '
' + esc(title) + '
' + esc(subtitle || '') + '
' + '' + '
' + '
' + sections.join('') + '
' + (footer ? '' : '') + '
'; }; CC.renderSection = function (eyebrow, title, body) { return '
' + '
' + '
' + esc(eyebrow) + '
' + '
' + esc(title) + '
' + '
' + '
' + body + '
' + '
'; }; CC.renderRadioOption = function (name, value, checked, title, description) { return ''; }; CC.openSheet = function (sheet, options) { options = options || {}; if (sheet === 'desktop-settings') { CC.renderDesktopSettings(); } else { CC.renderLocalSettings(); } CC.ui.openSheet = sheet; overlay.classList.add('open'); if (typeof options.scrollTop === 'number') { var body = overlay.querySelector('.cc-sheet-body'); if (body) body.scrollTop = options.scrollTop; } }; CC.closeSheet = function () { if (CC.modalMode && bridge.closeSettingsWindow) { CC.ui.openSheet = null; return bridge.closeSettingsWindow(); } CC.ui.openSheet = null; overlay.classList.remove('open'); }; CC.buildLocalServerSection = function (state, options) { options = options || {}; var settings = state.desktopSettings || {}; var url = localUrl(state) || 'starts on demand'; var body = '
' + '
' + esc(url) + '
' + '
'; if (options.includePreferences) { body += '' + ''; } body += '
'; return CC.renderSection( options.eyebrow || 'LOCAL SERVER', options.title || 'Run Local CloudCLI on this machine', body ); }; CC.buildThemeSection = function (state) { var settings = state.desktopSettings || {}; return CC.renderSection('APPEARANCE', 'Desktop theme', '' + '
' + CC.renderRadioOption('desktop-theme', 'system', settings.themeMode === 'system', 'System', 'Follow the operating system appearance.') + CC.renderRadioOption('desktop-theme', 'light', settings.themeMode === 'light', 'Light', 'Use the light interface appearance.') + CC.renderRadioOption('desktop-theme', 'dark', settings.themeMode === 'dark', 'Dark', 'Use the dark interface appearance.') + '
' ); }; CC.buildComputerUseSection = function (state) { var computerUse = state.computerUse || {}; var body = '
' + ''; if (computerUse.enabled) { body += '
' + CC.renderRadioOption('computer-access-mode', 'ask', computerUse.consentMode !== 'auto', 'Ask before each session', 'Agents can request control, but you approve every session.') + CC.renderRadioOption('computer-access-mode', 'auto', computerUse.consentMode === 'auto', 'Unattended access', 'Trusted agents can use this computer without a local approval prompt.') + '
'; } body += '
'; return CC.renderSection('COMPUTER USE', 'Control how agents can use this computer', body); }; CC.renderLocalSettings = function () { var state = CC.state || {}; var sections = [ CC.buildLocalServerSection(state, { includePreferences: false }), CC.renderSection('PREFERENCES', 'How the local service behaves', '' + '
' + '' + '' + '
' ), ]; CC.renderSheet('Local Settings', 'Manage how Local CloudCLI runs on this computer.', sections); }; CC.renderDesktopSettings = function () { var state = CC.state || {}; var sections = [ CC.buildThemeSection(state), CC.buildComputerUseSection(state), ]; CC.renderSheet('Desktop Settings', 'Manage the desktop app appearance and Computer Use behavior.', sections); }; CC.render = function (state) { state = state || CC.state; var titlebar = (CC._reg.titlebar || CC.titlebar)(state); var statusbar = (CC._reg.statusbar || CC.statusbar)(state); var body = CC._reg.renderBody ? CC._reg.renderBody(state) : ''; if (CC.modalMode) { app.innerHTML = ''; } else { app.innerHTML = titlebar + '
' + body + '
' + statusbar; } if (CC._reg.afterRender) CC._reg.afterRender(state); }; function wireEvents() { if (CC._wired) return; CC._wired = true; document.addEventListener('click', function (event) { if (CC._reg.onClick && CC._reg.onClick(event)) return; var closeTab = event.target.closest('[data-cc-close-tab]'); if (closeTab) { event.stopPropagation(); CC.run('Closing tab...', function () { return bridge.closeTab(closeTab.getAttribute('data-cc-close-tab')); }); return; } var tab = event.target.closest('[data-cc-tab]'); if (tab) { CC.run('Switching tab...', function () { return bridge.switchTab(tab.getAttribute('data-cc-tab')); }); return; } var action = event.target.closest('[data-cc-action]'); if (action) { CC.act(action.getAttribute('data-cc-action'), action); return; } var env = event.target.closest('[data-cc-env]'); if (env) { CC.openEnv(env.getAttribute('data-cc-env')); return; } if (overlay.classList.contains('open') && !event.target.closest('.cc-sheet')) { CC.closeSheet(); } }); document.addEventListener('change', function (event) { var setting = event.target.closest('[data-cc-setting]'); if (setting) { CC.act('set-setting', { key: setting.getAttribute('data-cc-setting'), value: setting.checked, }); return; } var theme = event.target.closest('[name="desktop-theme"]'); if (theme) { CC.act('set-theme-mode', { value: theme.value }); return; } var computerMode = event.target.closest('[name="computer-access-mode"]'); if (computerMode) { CC.act('set-computer-mode', { value: computerMode.value }); return; } var computerEnabled = event.target.closest('[data-cc-computer-enabled]'); if (computerEnabled) { CC.act('set-computer-enabled', { value: computerEnabled.checked }); } }); document.addEventListener('keydown', function (event) { if (event.key === 'Escape' && overlay.classList.contains('open')) { CC.closeSheet(); return; } if ((event.metaKey || event.ctrlKey) && event.key === ',') { event.preventDefault(); CC.act('settings-toggle'); return; } if (overlay.classList.contains('open')) return; if (CC._reg.onKey) CC._reg.onKey(event, CC.state); }); } function boot() { app = document.getElementById('app'); overlay = document.createElement('div'); overlay.id = 'cc-overlay'; overlay.className = 'cc-overlay'; document.body.appendChild(overlay); var isMac = /Mac/i.test(navigator.platform) || /Mac OS X/i.test(navigator.userAgent); var isWin = /Win/i.test(navigator.platform); CC.platform = isMac ? 'mac' : (isWin ? 'win' : 'linux'); document.body.classList.add(CC.platform); CC.ui.initialSheet = SEARCH.get('sheet') || 'desktop-settings'; if (CC.modalMode) { document.documentElement.classList.add('cc-modal-window'); document.body.classList.add('cc-modal-window'); } wireEvents(); if (window.matchMedia) { window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () { CC.applyTheme(CC.state); }); } if (bridge.onStateUpdated) { bridge.onStateUpdated(function (state) { CC.setState(state); }); } if (bridge.onLauncherCommand) { bridge.onLauncherCommand(function (command) { if (command && command.type === 'open-sheet') { CC.ui.initialSheet = command.sheet || CC.ui.initialSheet || 'desktop-settings'; CC.openSheet(command.sheet); } }); } CC.refresh().catch(function (error) { CC._status = { msg: errMsg(error), tone: 'error' }; CC.render(CC.state); }); } CC.register = function (registry) { CC._reg = registry || {}; }; CC.start = function () { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot); } else { boot(); } }; })(); (function sidebarApp() { var CC = window.CC; function navItem(id, iconName, label, meta, selected) { return ''; } function localPane(state) { return '

Local CloudCLI

Run the open-source app on this machine. No account required.

' + '
Local server
' + CC.esc(CC.localUrl(state) || 'Starts on demand') + '
' + '
' + '
Computer Use
' + CC.esc(computerUseStatus(state).detail) + '
' + CC.esc(computerUseStatus(state).label) + '
' + '
'; } function envRow(environment) { var meta = CC.statusMeta(environment.status); var tags = (environment.agent ? '' + CC.esc(environment.agent) + '' : '') + (environment.region ? '' + CC.esc(environment.region) + '' : ''); return '
' + '
' + CC.esc(environment.name || environment.subdomain) + '
' + CC.esc(environment.access_url || '') + '
' + '
' + tags + '
' + '' + meta.label + '' + '' + '
'; } function cloudPane(state) { var header = '

Environments

' + CC.esc(CC.envCount(state)) + '

'; if (CC.authState(state) === 'expired') { return header + '
Your CloudCLI session expired.
'; } if (!CC.connected(state)) { return header + '
Connect your CloudCLI account to list hosted environments.
'; } if (state.cloudLoading && !(state.environments || []).length) { return header + '
Loading your CloudCLI environments...
'; } var list = (state.environments || []).map(envRow).join(''); if (!list) list = '
No hosted environments yet.
'; return header + list; } function renderBody(state) { var section = CC.ui.section || ((CC.connected(state) || CC.authState(state) === 'expired') ? 'cloud' : 'local'); CC.ui.section = section; var nav = '
Workspace
' + navItem('local', 'terminal', 'Local', state.localServerRunning ? 'on' : 'idle', section) + navItem('cloud', 'cloud', 'Cloud', (state.environments || []).length, section) + '
'; return nav + '
' + (section === 'local' ? localPane(state) : cloudPane(state)) + '
'; } function onClick(event) { var nav = event.target.closest('[data-cc-nav]'); if (!nav) return false; CC.ui.section = nav.getAttribute('data-cc-nav'); CC.render(CC.state); return true; } CC.register({ bodyClass: 'v-sidebar', renderBody: renderBody, onClick: onClick, }); CC.start(); })();