' +
- '
Local Settings ' + icon('x', 16) + '
' +
- '
Local server
' +
- '
' + esc(url) + '
' +
- '
' + icon('arrow', 14) + 'Open in browser ' + icon('copy', 14) + 'Copy URL
' +
- '
Keep server running ' +
- '
Allow LAN access ' +
+ '' +
+ '
' + sections.join('') + '
' +
+ (footer ? '' : '') +
'
';
};
+ CC.renderSection = function (eyebrow, title, body) {
+ return '
' +
+ '' +
+ '
' + esc(eyebrow) + '
' +
+ '
' + esc(title) + '
' +
+ '
' + body + '
' +
+ ' ';
+ };
+
+ CC.renderRadioOption = function (name, value, checked, title, description) {
+ return '
' +
+ '' + esc(title) + ' ';
+ };
+
+ CC.openSheet = function (sheet) {
+ if (sheet === 'app-settings') {
+ CC.renderAppSettings();
+ } else if (sheet === 'computer-access') {
+ CC.renderComputerAccess();
+ } else {
+ CC.renderLocalSettings();
+ }
+ CC.ui.openSheet = sheet;
+ overlay.classList.add('open');
+ };
+
+ CC.closeSheet = function () {
+ 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) + '
' +
+ '
' + icon('arrow', 14) + 'Open in browser ' + icon('copy', 14) + 'Copy URL
';
+ if (options.includePreferences) {
+ body +=
+ '
Keep server running ' +
+ '
Allow LAN access ';
+ }
+ 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.buildComputerAccessSections = function (state, options) {
+ options = options || {};
+ var computerUse = state.computerUse || {};
+ var status = computerUseStatus(state);
+ var sections = [];
+
+ if (options.includeStatus !== false) {
+ sections.push(CC.renderSection(options.statusEyebrow || 'STATUS', status.label, '' +
+ '
' +
+ '
' + esc(status.label) + '
' +
+ '
' + esc(status.detail) + '
' +
+ '
'
+ ));
+ }
+
+ sections.push(CC.renderSection(options.accessEyebrow || 'ACCESS', 'Allow desktop access', '' +
+ '
' +
+ 'Allow desktop access
'
+ ));
+
+ sections.push(CC.renderSection(options.modeEyebrow || 'ACCESS MODE', 'Choose how agent approval works', '' +
+ '
' +
+ 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.') +
+ '
'
+ ));
+
+ var setupBody = '
' +
+ '
Linked environments ' + esc(String(computerUse.connectedCount || 0)) + '
' +
+ '
Target environments ' + esc(String(computerUse.targetCount || 0)) + '
';
+ if (options.includeTheme) {
+ setupBody += '
Theme ' + esc(themeLabel((state.desktopSettings && state.desktopSettings.themeMode) || 'system')) + '
';
+ }
+ if (CC.platform === 'mac') {
+ setupBody += '
Open macOS permissions
';
+ }
+ setupBody += '
';
+ sections.push(CC.renderSection(options.setupEyebrow || 'SETUP', 'System permissions and environment links', setupBody));
+ return sections;
+ };
+
+ CC.renderLocalSettings = function () {
+ var state = CC.state || {};
+ var sections = [
+ CC.buildLocalServerSection(state, { includePreferences: false }),
+ CC.renderSection('PREFERENCES', 'How the local service behaves', '' +
+ '
' +
+ 'Keep server running Allow LAN access
'
+ ),
+ CC.buildThemeSection(state),
+ ];
+ CC.renderSheet('Local Settings', 'Manage how Local CloudCLI runs and appears on this computer.', sections);
+ };
+
+ CC.renderAppSettings = function () {
+ var state = CC.state || {};
+ var sections = [
+ CC.buildLocalServerSection(state, {
+ eyebrow: 'GENERAL',
+ title: 'Local CloudCLI',
+ includePreferences: true,
+ }),
+ CC.buildThemeSection(state),
+ ];
+ sections.push.apply(sections, CC.buildComputerAccessSections(state, {
+ statusEyebrow: 'COMPUTER ACCESS',
+ modeEyebrow: 'APPROVAL MODE',
+ includeTheme: false,
+ }));
+ CC.renderSheet('Settings', 'Manage local behavior, appearance, and desktop access for this computer.', sections);
+ };
+
+ CC.renderComputerAccess = function () {
+ var state = CC.state || {};
+ var sections = CC.buildComputerAccessSections(state, { includeTheme: true });
+ CC.renderSheet('Computer Access', 'Let cloud agents use this computer with explicit approval or unattended access.', sections);
+ };
+
CC.render = function (state) {
state = state || CC.state;
var titlebar = (CC._reg.titlebar || CC.titlebar)(state);
@@ -387,7 +596,7 @@ window.__MOCK_STATE__ = {
return;
}
if (overlay.classList.contains('open') && !event.target.closest('.cc-sheet')) {
- overlay.classList.remove('open');
+ CC.closeSheet();
}
});
@@ -398,12 +607,27 @@ window.__MOCK_STATE__ = {
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')) {
- overlay.classList.remove('open');
+ CC.closeSheet();
return;
}
if ((event.metaKey || event.ctrlKey) && event.key === ',') {
@@ -429,9 +653,21 @@ window.__MOCK_STATE__ = {
document.body.classList.add(CC.platform);
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.openSheet(command.sheet);
+ }
+ });
+ }
CC.refresh().catch(function (error) {
CC._status = { msg: errMsg(error), tone: 'error' };
CC.render(CC.state);
@@ -462,7 +698,9 @@ window.__MOCK_STATE__ = {
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') + '
' + CC.icon('gear', 16) + '
' +
- '
' + CC.icon('play', 15) + 'Open Local CloudCLI ' + CC.icon('arrow', 14) + 'Open in browser ' + CC.icon('copy', 14) + 'Copy URL
';
+ '
' + CC.icon('play', 15) + 'Open Local CloudCLI ' + CC.icon('arrow', 14) + 'Open in browser ' + CC.icon('copy', 14) + 'Copy URL