dev bar

Author: charlesvien

apps/code/src/main/index.ts

@@ -12,8 +12,7 @@ import { MAIN_TOKENS } from "./di/tokens";
 import { registerMcpSandboxProtocol } from "./protocols/mcp-sandbox";
 import type { AppLifecycleService } from "./services/app-lifecycle/service";
 import type { AuthService } from "./services/auth/service";
-import type { DevLogsService } from "./services/dev-logs/service";
-import type { DevNetworkService } from "./services/dev-network/service";
+import { initDevToolbar } from "./services/dev-toolbar";
 import type { ExternalAppsService } from "./services/external-apps/service";
 import type { GitHubIntegrationService } from "./services/github-integration/service";
 import type { InboxLinkService } from "./services/inbox-link/service";
@@ -146,8 +145,7 @@ app.on("child-process-gone", (_event, details) => {
 });
 
 async function initializeServices(): Promise<void> {
-  container.get<DevNetworkService>(MAIN_TOKENS.DevNetworkService).install();
-  container.get<DevLogsService>(MAIN_TOKENS.DevLogsService).install();
+  initDevToolbar(container);
 
   container.get<DatabaseService>(MAIN_TOKENS.DatabaseService);
   container.get<OAuthService>(MAIN_TOKENS.OAuthService);

apps/code/src/main/services/dev-logs/service.ts

@@ -1,12 +1,10 @@
 import type ElectronLog from "electron-log";
 import log from "electron-log/main";
-import { injectable } from "inversify";
+import { inject, injectable } from "inversify";
+import { MAIN_TOKENS } from "../../di/tokens";
 import { TypedEventEmitter } from "../../utils/typed-event-emitter";
-import {
-  DevLogsEvent,
-  type DevLogsEvents,
-  type LogEntry,
-} from "./schemas";
+import type { DevFlagsService } from "../dev-flags/service";
+import { DevLogsEvent, type DevLogsEvents, type LogEntry } from "./schemas";
 
 const RING_BUFFER_SIZE = 1000;
 
@@ -16,20 +14,27 @@ export class DevLogsService extends TypedEventEmitter<DevLogsEvents> {
   private nextId = 1;
   private installed = false;
 
+  constructor(
+    @inject(MAIN_TOKENS.DevFlagsService)
+    private readonly flags: DevFlagsService,
+  ) {
+    super();
+  }
+
   install(): void {
     if (this.installed) return;
     this.installed = true;
 
     const transport = ((message: ElectronLog.LogMessage) => {
+      if (!this.flags.getFlags().devMode) return;
       const entry: LogEntry = {
         id: this.nextId++,
         level: message.level ?? "info",
         scope: message.scope,
         message: formatMessage(message.data),
         capturedAt: (message.date ?? new Date()).getTime(),
-        source: message.variables?.processType === "renderer"
-          ? "renderer"
-          : "main",
+        source:
+          message.variables?.processType === "renderer" ? "renderer" : "main",
       };
       this.entries.push(entry);
       if (this.entries.length > RING_BUFFER_SIZE) {

apps/code/src/main/services/dev-network/service.ts

@@ -1,6 +1,8 @@
-import { injectable } from "inversify";
+import { inject, injectable } from "inversify";
+import { MAIN_TOKENS } from "../../di/tokens";
 import { logger } from "../../utils/logger";
 import { TypedEventEmitter } from "../../utils/typed-event-emitter";
+import type { DevFlagsService } from "../dev-flags/service";
 import {
   DevNetworkEvent,
   type DevNetworkEvents,
@@ -19,13 +21,24 @@ export class DevNetworkService extends TypedEventEmitter<DevNetworkEvents> {
   private sim: NetworkSim = { offline: false, slowDelayMs: 0 };
   private installed = false;
 
+  constructor(
+    @inject(MAIN_TOKENS.DevFlagsService)
+    private readonly flags: DevFlagsService,
+  ) {
+    super();
+  }
+
   install(): void {
     if (this.installed) return;
     this.installed = true;
     this.wrapFetch();
     log.info("Network instrumentation installed");
   }
 
+  private capturing(): boolean {
+    return this.installed && this.flags.getFlags().devMode;
+  }
+
   getSnapshot(): NetworkRequest[] {
     return [...this.requests];
   }
@@ -60,6 +73,9 @@ export class DevNetworkService extends TypedEventEmitter<DevNetworkEvents> {
       input: RequestInfo | URL,
       init?: RequestInit,
     ): Promise<Response> => {
+      if (!this.capturing()) {
+        return original(input, init);
+      }
       const startedAt = Date.now();
       const start = performance.now();
       const method = (init?.method ?? "GET").toUpperCase();

apps/code/src/main/services/dev-toolbar.ts

@@ -0,0 +1,25 @@
+import type { Container } from "inversify";
+import { MAIN_TOKENS } from "../di/tokens";
+import { DevFlagsEvent } from "./dev-flags/schemas";
+import type { DevFlagsService } from "./dev-flags/service";
+import type { DevLogsService } from "./dev-logs/service";
+import type { DevNetworkService } from "./dev-network/service";
+
+export function initDevToolbar(container: Container): void {
+  const flags = container.get<DevFlagsService>(MAIN_TOKENS.DevFlagsService);
+  const network = container.get<DevNetworkService>(
+    MAIN_TOKENS.DevNetworkService,
+  );
+  const logs = container.get<DevLogsService>(MAIN_TOKENS.DevLogsService);
+
+  const installCapture = () => {
+    network.install();
+    logs.install();
+  };
+
+  if (flags.getFlags().devMode) installCapture();
+
+  flags.on(DevFlagsEvent.Changed, (next) => {
+    if (next.devMode) installCapture();
+  });
+}

apps/code/src/main/services/index.ts

@@ -3,6 +3,7 @@
  * This file is auto-generated by vite-plugin-auto-services.ts
  */
 
+import "./dev-toolbar.js";
 import "./integration-flow-schemas.js";
 import "./posthog-analytics.js";
 import "./settingsStore.js";

apps/code/src/renderer/App.tsx

@@ -14,7 +14,7 @@ import { useAuthSession } from "@features/auth/hooks/useAuthSession";
 import { useIsOrgAdmin } from "@features/auth/hooks/useOrgRole";
 import { registerBillingSubscriptions } from "@features/billing/subscriptions";
 import { DevToolbar } from "@features/dev-toolbar/components/DevToolbar";
-import { installMainThreadHealth } from "@features/dev-toolbar/mainThreadHealth";
+import { useDevToolbarIntegration } from "@features/dev-toolbar/integration";
 import { AddDirectoryDialog } from "@features/folder-picker/components/AddDirectoryDialog";
 import { OnboardingFlow } from "@features/onboarding/components/OnboardingFlow";
 import { useOnboardingStore } from "@features/onboarding/stores/onboardingStore";
@@ -82,21 +82,7 @@ function App() {
     return initializeUpdateStore();
   }, []);
 
-  // Install main-thread health observers (longtasks + FPS) for the dev toolbar.
-  useEffect(() => installMainThreadHealth(), []);
-
-  // Surface dev-toolbar triggered toasts (e.g. quick actions test toasts).
-  useSubscription(
-    trpcReact.dev.onDevToast.subscriptionOptions(undefined, {
-      onData: (data) => {
-        if (data.variant === "error") {
-          toast.error(data.message);
-        } else {
-          toast.info(data.message);
-        }
-      },
-    }),
-  );
+  useDevToolbarIntegration();
 
   // Dev-only inbox demo command for local QA from the renderer console.
   useEffect(() => {

apps/code/src/renderer/features/dev-toolbar/components/DevToolbar.tsx

@@ -51,10 +51,10 @@ import {
   X,
   ZapOff,
 } from "lucide-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import type { MetricsSample } from "../../../../main/services/dev-metrics/schemas";
 import { REGION_LABELS } from "../../../../shared/types/regions";
-import { subscribeDevFlagsFromMain, useDevFlagsStore } from "../devFlagsStore";
+import { useDevFlagsStore } from "../devFlagsStore";
 import { useIpcMetricsStore } from "../ipcMetricsStore";
 import { useMainThreadHealthStore } from "../mainThreadHealth";
 import { AgentsPanel } from "./AgentsPanel";
@@ -86,8 +86,6 @@ export function DevToolbar() {
   const [openPanel, setOpenPanel] = useState<DetailPanel>(null);
   const [panelHeight, setPanelHeight] = useState(480);
 
-  useEffect(() => subscribeDevFlagsFromMain(), []);
-
   if (!devMode) return null;
 
   const togglePanel = (panel: Exclude<DetailPanel, null>) => {

apps/code/src/renderer/features/dev-toolbar/integration.tsx

@@ -0,0 +1,34 @@
+import { useTRPC } from "@renderer/trpc/client";
+import { useSubscription } from "@trpc/tanstack-react-query";
+import { toast } from "@utils/toast";
+import { useEffect } from "react";
+import { subscribeDevFlagsFromMain, useDevFlagsStore } from "./devFlagsStore";
+import { installMainThreadHealth } from "./mainThreadHealth";
+
+export function useDevToolbarIntegration(): void {
+  const trpcReact = useTRPC();
+  const devMode = useDevFlagsStore((s) => s.devMode);
+
+  useEffect(() => {
+    if (!devMode) return;
+    const stopHealth = installMainThreadHealth();
+    const stopFlags = subscribeDevFlagsFromMain();
+    return () => {
+      stopHealth();
+      stopFlags();
+    };
+  }, [devMode]);
+
+  useSubscription(
+    trpcReact.dev.onDevToast.subscriptionOptions(undefined, {
+      enabled: devMode,
+      onData: (data) => {
+        if (data.variant === "error") {
+          toast.error(data.message);
+        } else {
+          toast.info(data.message);
+        }
+      },
+    }),
+  );
+}

apps/code/src/renderer/features/dev-toolbar/ipcInstrumentationLink.ts

@@ -1,6 +1,7 @@
 import type { TRPCLink } from "@trpc/client";
 import { observable, tap } from "@trpc/server/observable";
 import type { AnyRouter } from "@trpc/server/unstable-core-do-not-import";
+import { useDevFlagsStore } from "./devFlagsStore";
 import { type IpcOpType, useIpcMetricsStore } from "./ipcMetricsStore";
 
 function byteLength(value: unknown): number {
@@ -16,8 +17,11 @@ export function ipcInstrumentationLink<
   TRouter extends AnyRouter = AnyRouter,
 >(): TRPCLink<TRouter> {
   return () =>
-    ({ op, next }) =>
-      observable((observer) => {
+    ({ op, next }) => {
+      if (!useDevFlagsStore.getState().devMode) {
+        return next(op);
+      }
+      return observable((observer) => {
         const start = performance.now();
         const startedAt = Date.now();
         const inputBytes = byteLength(op.input);
@@ -81,4 +85,5 @@ export function ipcInstrumentationLink<
           subscription.unsubscribe();
         };
       });
+    };
 }