feat: add OpenTelemetry settings UI and sidecar environment wiring

Add a global Telemetry section in the settings panel with:
- Toggle to enable/disable OTLP export
- Text input for the OTLP endpoint URL (default: http://localhost:4317)
- Guidance note about using \un run aspire\ for local testing

Wire the setting through the full stack:
- OpenTelemetrySettings type in shared domain with normalization
- IPC channel, preload binding, and handler for persistence
- SidecarClient forwards settings to createSidecarEnvironment
- Sidecar environment injects OTEL_EXPORTER_OTLP_ENDPOINT when enabled
- Settings loaded from workspace.json on startup and on change

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-04-16 11:10:23 +02:00
co-authored by Copilot
parent f7d376fc41
commit 67fb950e61
12 changed files with 210 additions and 6 deletions
+9
View File
@@ -140,6 +140,7 @@ import {
type AppearanceTheme,
type LspProfileDefinition,
type McpServerDefinition,
type OpenTelemetrySettings,
type QuickPromptSettings,
type SessionToolingSelection,
type WorkspaceToolingSettings,
@@ -469,6 +470,7 @@ export class AryxAppService extends EventEmitter<AppServiceEvents> {
async loadWorkspace(): Promise<WorkspaceState> {
if (!this.workspace) {
this.workspace = await this.workspaceRepository.load();
this.sidecar.setOpenTelemetrySettings(this.workspace.settings.openTelemetry);
const selectedProjectId = this.workspace.selectedProjectId;
const selectedProject = selectedProjectId
? this.workspace.projects.find((project) => project.id === selectedProjectId)
@@ -830,6 +832,13 @@ export class AryxAppService extends EventEmitter<AppServiceEvents> {
return this.persistAndBroadcast(workspace);
}
async setOpenTelemetry(settings: OpenTelemetrySettings): Promise<WorkspaceState> {
const workspace = await this.loadWorkspace();
workspace.settings.openTelemetry = settings;
this.sidecar.setOpenTelemetrySettings(settings);
return this.persistAndBroadcast(workspace);
}
getQuickPromptSettings(): QuickPromptSettings {
return this.workspace?.settings.quickPrompt ?? createDefaultQuickPromptSettings();
}
+5 -1
View File
@@ -56,7 +56,7 @@ import type {
QuickPromptSendInput,
} from '@shared/contracts/ipc';
import type { QuerySessionsInput } from '@shared/domain/sessionLibrary';
import type { AppearanceTheme, QuickPromptSettings } from '@shared/domain/tooling';
import type { AppearanceTheme, OpenTelemetrySettings, QuickPromptSettings } from '@shared/domain/tooling';
import { AryxAppService } from '@main/AryxAppService';
import { AutoUpdateService } from '@main/services/autoUpdater';
@@ -155,6 +155,10 @@ export function registerIpcHandlers(
ipcChannels.setGitAutoRefreshEnabled,
(_event, enabled: boolean) => service.setGitAutoRefreshEnabled(enabled),
);
ipcMain.handle(
ipcChannels.setOpenTelemetry,
(_event, settings: OpenTelemetrySettings) => service.setOpenTelemetry(settings),
);
ipcMain.handle(ipcChannels.checkForUpdates, () => autoUpdateService.checkForUpdates());
ipcMain.handle(ipcChannels.installUpdate, () => {
autoUpdateService.installUpdate();
+10 -1
View File
@@ -1,6 +1,11 @@
import type { OpenTelemetrySettings } from '@shared/domain/tooling';
const blockedEnvironmentPrefixes = ['BUN_', 'COPILOT_', 'ELECTRON_', 'NODE_', 'NPM_'];
export function createSidecarEnvironment(baseEnvironment: NodeJS.ProcessEnv): NodeJS.ProcessEnv {
export function createSidecarEnvironment(
baseEnvironment: NodeJS.ProcessEnv,
openTelemetry?: OpenTelemetrySettings,
): NodeJS.ProcessEnv {
const sanitizedEnvironment: NodeJS.ProcessEnv = {};
for (const [name, value] of Object.entries(baseEnvironment)) {
@@ -13,5 +18,9 @@ export function createSidecarEnvironment(baseEnvironment: NodeJS.ProcessEnv): No
sanitizedEnvironment[name] = value;
}
if (openTelemetry?.enabled && openTelemetry.endpoint) {
sanitizedEnvironment.OTEL_EXPORTER_OTLP_ENDPOINT = openTelemetry.endpoint;
}
return sanitizedEnvironment;
}
+7 -1
View File
@@ -21,6 +21,7 @@ import type {
} from '@shared/contracts/sidecar';
import type { ApprovalDecision } from '@shared/domain/approval';
import type { ChatMessageRecord } from '@shared/domain/session';
import type { OpenTelemetrySettings } from '@shared/domain/tooling';
import { createSidecarEnvironment } from '@main/sidecar/sidecarEnvironment';
import {
markRunTurnPendingErrored,
@@ -109,6 +110,11 @@ export class SidecarClient {
private processState?: ManagedSidecarProcess;
private nextProcessId = 0;
private readonly pending = new Map<string, PendingCommand>();
private openTelemetrySettings?: OpenTelemetrySettings;
setOpenTelemetrySettings(settings?: OpenTelemetrySettings): void {
this.openTelemetrySettings = settings;
}
async describeCapabilities(): Promise<SidecarCapabilities> {
const command = await this.dispatch<SidecarCapabilities>({
@@ -240,7 +246,7 @@ export class SidecarClient {
});
const childProcess = spawn(sidecar.command, sidecar.args, {
cwd: sidecar.cwd,
env: createSidecarEnvironment(process.env),
env: createSidecarEnvironment(process.env, this.openTelemetrySettings),
stdio: 'pipe',
windowsHide: true,
});
+1
View File
@@ -36,6 +36,7 @@ const api: ElectronApi = {
setNotificationsEnabled: (enabled) => ipcRenderer.invoke(ipcChannels.setNotificationsEnabled, enabled),
setMinimizeToTray: (enabled) => ipcRenderer.invoke(ipcChannels.setMinimizeToTray, enabled),
setGitAutoRefreshEnabled: (enabled) => ipcRenderer.invoke(ipcChannels.setGitAutoRefreshEnabled, enabled),
setOpenTelemetry: (settings) => ipcRenderer.invoke(ipcChannels.setOpenTelemetry, settings),
getQuickPromptSettings: () => ipcRenderer.invoke(ipcChannels.quickPromptGetSettings),
setQuickPromptSettings: (settings) => ipcRenderer.invoke(ipcChannels.quickPromptSetSettings, settings),
checkForUpdates: () => ipcRenderer.invoke(ipcChannels.checkForUpdates),
+2
View File
@@ -873,6 +873,8 @@ export default function App() {
setQuickPromptSettings(updated);
void api.setQuickPromptSettings(patch);
}}
openTelemetry={workspace.settings.openTelemetry}
onSetOpenTelemetry={(settings) => void api.setOpenTelemetry(settings)}
/>
</Suspense>
) : null;
+77 -3
View File
@@ -1,9 +1,9 @@
import { useEffect, useState, type ReactNode } from 'react';
import { ChevronLeft, ChevronRight, CircleCheck, Code, Cpu, FolderOpen, GitBranch, Palette, Plus, RefreshCw, Server, Sparkles, TriangleAlert, UserCircle, Wrench } from 'lucide-react';
import { ChevronLeft, ChevronRight, CircleCheck, Code, Cpu, FolderOpen, GitBranch, Palette, Plus, RefreshCw, Server, Sparkles, TriangleAlert, UserCircle, Wrench, Activity } from 'lucide-react';
import { CopilotStatusCard } from '@renderer/components/CopilotStatusCard';
import { WorkflowEditor } from '@renderer/components/WorkflowEditor';
import { HotkeyRecorder, ToggleSwitch } from '@renderer/components/ui';
import { HotkeyRecorder, TextInput, ToggleSwitch } from '@renderer/components/ui';
import { LspProfileEditor } from '@renderer/components/settings/LspProfileEditor';
import { McpServerEditor } from '@renderer/components/settings/McpServerEditor';
import { WorkspaceAgentEditor } from '@renderer/components/settings/WorkspaceAgentEditor';
@@ -18,9 +18,11 @@ import type { WorkflowTemplateCategory, WorkflowTemplateDefinition } from '@shar
import {
normalizeLspProfileDefinition,
normalizeMcpServerDefinition,
DEFAULT_OTEL_ENDPOINT,
type AppearanceTheme,
type LspProfileDefinition,
type McpServerDefinition,
type OpenTelemetrySettings,
type QuickPromptSettings,
type WorkspaceToolingSettings,
} from '@shared/domain/tooling';
@@ -65,9 +67,11 @@ interface SettingsPanelProps {
onCreateWorkflowFromTemplate?: (templateId: string, name?: string) => Promise<void>;
quickPromptSettings?: QuickPromptSettings;
onSetQuickPromptSettings?: (patch: Partial<QuickPromptSettings>) => void;
openTelemetry?: OpenTelemetrySettings;
onSetOpenTelemetry?: (settings: OpenTelemetrySettings) => void;
}
export type SettingsSection = 'appearance' | 'connection' | 'workflows' | 'agents' | 'mcp-servers' | 'lsp-profiles' | 'quick-prompt' | 'troubleshooting';
export type SettingsSection = 'appearance' | 'connection' | 'workflows' | 'agents' | 'mcp-servers' | 'lsp-profiles' | 'quick-prompt' | 'telemetry' | 'troubleshooting';
interface NavItem {
id: SettingsSection;
@@ -86,6 +90,7 @@ const navGroups: NavGroup[] = [
items: [
{ id: 'appearance', label: 'Appearance', icon: <Palette className="size-3.5" /> },
{ id: 'quick-prompt', label: 'Quick Prompt', icon: <Sparkles className="size-3.5" /> },
{ id: 'telemetry', label: 'Telemetry', icon: <Activity className="size-3.5" /> },
],
},
{
@@ -155,6 +160,8 @@ export function SettingsPanel({
onCreateWorkflowFromTemplate,
quickPromptSettings,
onSetQuickPromptSettings,
openTelemetry,
onSetOpenTelemetry,
}: SettingsPanelProps) {
const [activeSection, setActiveSection] = useState<SettingsSection>(initialSection ?? 'appearance');
const [editingWorkflow, setEditingWorkflow] = useState<WorkflowDefinition | null>(null);
@@ -394,6 +401,12 @@ export function SettingsPanel({
onUpdate={onSetQuickPromptSettings}
/>
)}
{activeSection === 'telemetry' && (
<TelemetrySection
openTelemetry={openTelemetry}
onSetOpenTelemetry={onSetOpenTelemetry}
/>
)}
{activeSection === 'troubleshooting' && (
<TroubleshootingSection
onOpenAppDataFolder={onOpenAppDataFolder}
@@ -548,6 +561,67 @@ function AppearanceSection({
);
}
function TelemetrySection({
openTelemetry,
onSetOpenTelemetry,
}: {
openTelemetry?: OpenTelemetrySettings;
onSetOpenTelemetry?: (settings: OpenTelemetrySettings) => void;
}) {
const enabled = openTelemetry?.enabled ?? false;
const endpoint = openTelemetry?.endpoint ?? DEFAULT_OTEL_ENDPOINT;
const handleToggle = () => {
onSetOpenTelemetry?.({ enabled: !enabled, endpoint });
};
const handleEndpointChange = (value: string) => {
onSetOpenTelemetry?.({ enabled, endpoint: value });
};
return (
<div>
<div className="mb-1">
<h3 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">OpenTelemetry</h3>
<p className="mt-0.5 text-[12px] text-[var(--color-text-muted)]">
Export traces from the sidecar to an OTLP-compatible collector
</p>
</div>
<button
className="mt-4 flex w-full items-center justify-between rounded-lg border border-[var(--color-border)] px-4 py-3 text-left transition hover:bg-[var(--color-surface-3)]/40"
onClick={handleToggle}
type="button"
>
<div>
<span className="text-[13px] font-medium text-[var(--color-text-primary)]">
Enable OTLP export
</span>
<p className="text-[12px] text-[var(--color-text-muted)]">
Send traces to the configured OTLP endpoint when a new sidecar session starts
</p>
</div>
<ToggleSwitch enabled={enabled} />
</button>
<div className="mt-5">
<label className="mb-1.5 block text-[12px] font-medium text-[var(--color-text-secondary)]">
OTLP endpoint
</label>
<TextInput
value={endpoint}
onChange={handleEndpointChange}
placeholder={DEFAULT_OTEL_ENDPOINT}
/>
<p className="mt-1.5 text-[11px] text-[var(--color-text-muted)]">
Use <span className="font-mono">bun run aspire</span> to launch the Aspire Dashboard locally at this default endpoint.
Changes take effect on the next sidecar session.
</p>
</div>
</div>
);
}
function ConnectionSection({
connection,
modelCount,
+1
View File
@@ -25,6 +25,7 @@ export const ipcChannels = {
setNotificationsEnabled: 'settings:set-notifications-enabled',
setMinimizeToTray: 'settings:set-minimize-to-tray',
setGitAutoRefreshEnabled: 'settings:set-git-auto-refresh-enabled',
setOpenTelemetry: 'settings:set-opentelemetry',
checkForUpdates: 'app:check-for-updates',
installUpdate: 'app:install-update',
saveMcpServer: 'tooling:mcp:save',
+2
View File
@@ -20,6 +20,7 @@ import type {
SessionToolingSelection,
AppearanceTheme,
QuickPromptSettings,
OpenTelemetrySettings,
} from '@shared/domain/tooling';
import type { WorkspaceState } from '@shared/domain/workspace';
import type { ChatMessageAttachment } from '@shared/domain/attachment';
@@ -364,6 +365,7 @@ export interface ElectronApi {
setNotificationsEnabled(enabled: boolean): Promise<WorkspaceState>;
setMinimizeToTray(enabled: boolean): Promise<WorkspaceState>;
setGitAutoRefreshEnabled(enabled: boolean): Promise<WorkspaceState>;
setOpenTelemetry(settings: OpenTelemetrySettings): Promise<WorkspaceState>;
checkForUpdates(): Promise<UpdateStatus>;
installUpdate(): Promise<void>;
describeTerminal(): Promise<TerminalSnapshot | undefined>;
+18
View File
@@ -68,6 +68,13 @@ export interface QuickPromptSettings {
defaultReasoningEffort?: 'low' | 'medium' | 'high' | 'xhigh';
}
export interface OpenTelemetrySettings {
enabled: boolean;
endpoint: string;
}
export const DEFAULT_OTEL_ENDPOINT = 'http://localhost:4317';
export function createDefaultQuickPromptSettings(): QuickPromptSettings {
return {
enabled: true,
@@ -85,6 +92,7 @@ export interface WorkspaceSettings {
minimizeToTray?: boolean;
gitAutoRefreshEnabled?: boolean;
quickPrompt?: QuickPromptSettings;
openTelemetry?: OpenTelemetrySettings;
}
export interface SessionToolingSelection {
@@ -231,6 +239,16 @@ export function normalizeWorkspaceSettings(settings?: Partial<WorkspaceSettings>
...(settings?.minimizeToTray !== undefined ? { minimizeToTray: settings.minimizeToTray } : {}),
...(settings?.gitAutoRefreshEnabled !== undefined ? { gitAutoRefreshEnabled: settings.gitAutoRefreshEnabled } : {}),
...(settings?.quickPrompt !== undefined ? { quickPrompt: settings.quickPrompt } : {}),
...(settings?.openTelemetry !== undefined ? { openTelemetry: normalizeOpenTelemetrySettings(settings.openTelemetry) } : {}),
};
}
export function normalizeOpenTelemetrySettings(settings?: Partial<OpenTelemetrySettings>): OpenTelemetrySettings {
return {
enabled: settings?.enabled === true,
endpoint: typeof settings?.endpoint === 'string' && settings.endpoint.trim() !== ''
? settings.endpoint.trim()
: DEFAULT_OTEL_ENDPOINT,
};
}
+42
View File
@@ -37,4 +37,46 @@ describe('createSidecarEnvironment', () => {
HTTPS_PROXY: 'http://proxy.local:8080',
});
});
test('injects OTEL_EXPORTER_OTLP_ENDPOINT when OpenTelemetry is enabled', () => {
expect(
createSidecarEnvironment(
{ PATH: 'C:\\tools' },
{ enabled: true, endpoint: 'http://localhost:4317' },
),
).toEqual({
PATH: 'C:\\tools',
OTEL_EXPORTER_OTLP_ENDPOINT: 'http://localhost:4317',
});
});
test('does not inject OTEL_EXPORTER_OTLP_ENDPOINT when OpenTelemetry is disabled', () => {
expect(
createSidecarEnvironment(
{ PATH: 'C:\\tools' },
{ enabled: false, endpoint: 'http://localhost:4317' },
),
).toEqual({
PATH: 'C:\\tools',
});
});
test('does not inject OTEL_EXPORTER_OTLP_ENDPOINT when settings are undefined', () => {
expect(
createSidecarEnvironment({ PATH: 'C:\\tools' }),
).toEqual({
PATH: 'C:\\tools',
});
});
test('does not inject OTEL_EXPORTER_OTLP_ENDPOINT when endpoint is empty', () => {
expect(
createSidecarEnvironment(
{ PATH: 'C:\\tools' },
{ enabled: true, endpoint: '' },
),
).toEqual({
PATH: 'C:\\tools',
});
});
});
+36
View File
@@ -6,12 +6,14 @@ import {
groupApprovalToolsByProvider,
listApprovalToolDefinitions,
listApprovalToolNames,
normalizeOpenTelemetrySettings,
normalizeWorkspaceSettings,
resolveProjectToolingSettings,
resolveToolLabel,
resolveWorkspaceToolingSettings,
validateLspProfileDefinition,
validateMcpServerDefinition,
DEFAULT_OTEL_ENDPOINT,
type LspProfileDefinition,
type McpServerDefinition,
type WorkspaceToolingSettings,
@@ -118,6 +120,40 @@ describe('tooling settings helpers', () => {
expect(normalizeWorkspaceSettings({ terminalHeight: Number.NaN }).terminalHeight).toBeUndefined();
});
test('normalizes OpenTelemetry settings with defaults', () => {
const otel = normalizeOpenTelemetrySettings();
expect(otel.enabled).toBe(false);
expect(otel.endpoint).toBe(DEFAULT_OTEL_ENDPOINT);
});
test('preserves valid OpenTelemetry settings', () => {
const otel = normalizeOpenTelemetrySettings({ enabled: true, endpoint: 'http://custom:4317' });
expect(otel.enabled).toBe(true);
expect(otel.endpoint).toBe('http://custom:4317');
});
test('trims whitespace from OpenTelemetry endpoint', () => {
const otel = normalizeOpenTelemetrySettings({ enabled: true, endpoint: ' http://localhost:4317 ' });
expect(otel.endpoint).toBe('http://localhost:4317');
});
test('falls back to default endpoint when blank', () => {
const otel = normalizeOpenTelemetrySettings({ enabled: true, endpoint: ' ' });
expect(otel.endpoint).toBe(DEFAULT_OTEL_ENDPOINT);
});
test('normalizeWorkspaceSettings preserves OpenTelemetry when present', () => {
const settings = normalizeWorkspaceSettings({
openTelemetry: { enabled: true, endpoint: 'http://jaeger:4317' },
});
expect(settings.openTelemetry).toEqual({ enabled: true, endpoint: 'http://jaeger:4317' });
});
test('normalizeWorkspaceSettings omits OpenTelemetry when absent', () => {
const settings = normalizeWorkspaceSettings({});
expect(settings.openTelemetry).toBeUndefined();
});
test('validates required MCP transport settings', () => {
const localServer: McpServerDefinition = {
id: 'mcp-local',