feat: Add dev toolbar for live diagnostics and actions (#2276)

Co-authored-by: Jonathan Mieloo <32547391+jonathanlab@users.noreply.github.com>
Co-authored-by: JonathanLab <jonathanmieloo@gmail.com>

Author: charlesvien

apps/code/electron.vite.config.ts

@@ -3,7 +3,6 @@ import { builtinModules, createRequire } from "node:module";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import tailwindcss from "@tailwindcss/vite";
-import { devtools } from "@tanstack/devtools-vite";
 import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "electron-vite";
@@ -199,7 +198,6 @@ export default defineConfig(({ mode }) => {
     renderer: {
       root: __dirname,
       plugins: [
-        isDev && devtools(),
         TanStackRouterVite({
           target: "react",
           autoCodeSplitting: true,

apps/code/package.json

@@ -47,7 +47,6 @@
     "@storybook/addon-a11y": "10.4.1",
     "@storybook/addon-docs": "10.4.1",
     "@storybook/react-vite": "10.4.1",
-    "@tanstack/devtools-vite": "^0.7.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -138,6 +137,7 @@
     "react": "19.2.6",
     "react-dom": "19.2.6",
     "react-hotkeys-hook": "^4.4.4",
+    "react-scan": "^0.5.6",
     "reflect-metadata": "^0.2.2",
     "semver": "^7.8.1",
     "shadcn": "^4.1.2",

apps/code/src/main/di/bindings.ts

@@ -107,11 +107,13 @@ import type {
 } from "@posthog/platform/analytics";
 import type { APP_LIFECYCLE_SERVICE } from "@posthog/platform/app-lifecycle";
 import type { APP_META_SERVICE } from "@posthog/platform/app-meta";
+import type { APP_METRICS_SERVICE } from "@posthog/platform/app-metrics";
 import type { BUNDLED_RESOURCES_SERVICE } from "@posthog/platform/bundled-resources";
 import type { CLIPBOARD_SERVICE } from "@posthog/platform/clipboard";
 import type { CONTEXT_MENU_SERVICE } from "@posthog/platform/context-menu";
 import type { CRYPTO_SERVICE } from "@posthog/platform/crypto";
 import type { DEEP_LINK_SERVICE } from "@posthog/platform/deep-link";
+import type { DEV_HOST_ACTIONS_SERVICE } from "@posthog/platform/dev-host-actions";
 import type { DIALOG_SERVICE } from "@posthog/platform/dialog";
 import type { FILE_ICON_SERVICE } from "@posthog/platform/file-icon";
 import type { IMAGE_PROCESSOR_SERVICE } from "@posthog/platform/image-processor";
@@ -126,11 +128,13 @@ import type { WORKSPACE_SETTINGS_SERVICE } from "@posthog/platform/workspace-set
 import type { WorkspaceClient } from "@posthog/workspace-client/client";
 import type { DatabaseService } from "@posthog/workspace-server/db/service";
 import type { GIT_SERVICE as WS_GIT_SERVICE } from "@posthog/workspace-server/di/tokens";
+import type { AgentService } from "@posthog/workspace-server/services/agent/agent";
 import type {
   AGENT_AUTH,
   AGENT_LOGGER,
   AGENT_MCP_APPS,
   AGENT_REPO_FILES,
+  AGENT_SERVICE,
   AGENT_SLEEP_COORDINATOR,
 } from "@posthog/workspace-server/services/agent/identifiers";
 import type {
@@ -207,10 +211,12 @@ import type { WorkspaceService } from "@posthog/workspace-server/services/worksp
 import type { FileWatcherBridge } from "../index";
 import type { ElectronAppLifecycle } from "../platform-adapters/electron-app-lifecycle";
 import type { ElectronAppMeta } from "../platform-adapters/electron-app-meta";
+import type { ElectronAppMetrics } from "../platform-adapters/electron-app-metrics";
 import type { ElectronBundledResources } from "../platform-adapters/electron-bundled-resources";
 import type { ElectronClipboard } from "../platform-adapters/electron-clipboard";
 import type { ElectronContextMenu } from "../platform-adapters/electron-context-menu";
 import type { ElectronCrypto } from "../platform-adapters/electron-crypto";
+import type { ElectronDevHostActions } from "../platform-adapters/electron-dev-host-actions";
 import type { ElectronDialog } from "../platform-adapters/electron-dialog";
 import type { ElectronFileIcon } from "../platform-adapters/electron-file-icon";
 import type { ElectronImageProcessor } from "../platform-adapters/electron-image-processor";
@@ -231,6 +237,11 @@ import type {
   TokenCipherPortAdapter,
 } from "../services/auth/port-adapters";
 import type { DeepLinkService } from "../services/deep-link/service";
+import type { DevActionsService } from "../services/dev-actions/service";
+import type { DevFlagsService } from "../services/dev-flags/service";
+import type { DevLogsService } from "../services/dev-logs/service";
+import type { DevMetricsService } from "../services/dev-metrics/service";
+import type { DevNetworkService } from "../services/dev-network/service";
 import type { DiscordPresenceService } from "../services/discord-presence/service";
 import type { EncryptionService } from "../services/encryption/service";
 import type { SecureStoreService } from "../services/secure-store/service";
@@ -250,6 +261,11 @@ import type {
   DATABASE_SERVICE as MAIN_DATABASE_SERVICE,
   DEEP_LINK_SERVICE as MAIN_DEEP_LINK_SERVICE,
   DEFAULT_ADDITIONAL_DIRECTORY_REPOSITORY as MAIN_DEFAULT_ADDITIONAL_DIRECTORY_REPOSITORY,
+  DEV_ACTIONS_SERVICE as MAIN_DEV_ACTIONS_SERVICE,
+  DEV_FLAGS_SERVICE as MAIN_DEV_FLAGS_SERVICE,
+  DEV_LOGS_SERVICE as MAIN_DEV_LOGS_SERVICE,
+  DEV_METRICS_SERVICE as MAIN_DEV_METRICS_SERVICE,
+  DEV_NETWORK_SERVICE as MAIN_DEV_NETWORK_SERVICE,
   DISCORD_PRESENCE_SERVICE as MAIN_DISCORD_PRESENCE_SERVICE,
   ENCRYPTION_SERVICE as MAIN_ENCRYPTION_SERVICE,
   EXTERNAL_APPS_SERVICE as MAIN_EXTERNAL_APPS_SERVICE,
@@ -301,6 +317,8 @@ export interface MainBindings {
   [BUNDLED_RESOURCES_SERVICE]: ElectronBundledResources;
   [IMAGE_PROCESSOR_SERVICE]: ElectronImageProcessor;
   [WORKSPACE_SETTINGS_SERVICE]: ElectronWorkspaceSettings;
+  [APP_METRICS_SERVICE]: ElectronAppMetrics;
+  [DEV_HOST_ACTIONS_SERVICE]: ElectronDevHostActions;
 
   // Database (main aliases + ws-server source tokens via toService)
   [MAIN_DATABASE_SERVICE]: DatabaseService;
@@ -441,6 +459,13 @@ export interface MainBindings {
   [MAIN_ENCRYPTION_SERVICE]: EncryptionService;
   [MAIN_DISCORD_PRESENCE_SERVICE]: DiscordPresenceService;
 
+  // Dev toolbar diagnostics
+  [MAIN_DEV_FLAGS_SERVICE]: DevFlagsService;
+  [MAIN_DEV_METRICS_SERVICE]: DevMetricsService;
+  [MAIN_DEV_NETWORK_SERVICE]: DevNetworkService;
+  [MAIN_DEV_LOGS_SERVICE]: DevLogsService;
+  [MAIN_DEV_ACTIONS_SERVICE]: DevActionsService;
+
   // ws-server git service (bound to(GitService))
   [WS_GIT_SERVICE]: GitService;
 
@@ -458,6 +483,7 @@ export interface MainBindings {
   [FS_SERVICE]: FsCapability;
 
   // Typed container.get-only tokens (bound via loaded modules)
+  [AGENT_SERVICE]: AgentService;
   [OAUTH_SERVICE]: OAuthService;
   [GITHUB_INTEGRATION_SERVICE]: GitHubIntegrationService;
   [SLACK_INTEGRATION_SERVICE]: SlackIntegrationService;

apps/code/src/main/di/container.ts

@@ -99,11 +99,13 @@ import {
 import { ANALYTICS_SERVICE } from "@posthog/platform/analytics";
 import { APP_LIFECYCLE_SERVICE } from "@posthog/platform/app-lifecycle";
 import { APP_META_SERVICE } from "@posthog/platform/app-meta";
+import { APP_METRICS_SERVICE } from "@posthog/platform/app-metrics";
 import { BUNDLED_RESOURCES_SERVICE } from "@posthog/platform/bundled-resources";
 import { CLIPBOARD_SERVICE } from "@posthog/platform/clipboard";
 import { CONTEXT_MENU_SERVICE } from "@posthog/platform/context-menu";
 import { CRYPTO_SERVICE } from "@posthog/platform/crypto";
 import { DEEP_LINK_SERVICE } from "@posthog/platform/deep-link";
+import { DEV_HOST_ACTIONS_SERVICE } from "@posthog/platform/dev-host-actions";
 import { DIALOG_SERVICE } from "@posthog/platform/dialog";
 import { FILE_ICON_SERVICE } from "@posthog/platform/file-icon";
 import { IMAGE_PROCESSOR_SERVICE } from "@posthog/platform/image-processor";
@@ -217,10 +219,12 @@ import ExternalAppsStoreImpl from "electron-store";
 import type { FileWatcherBridge } from "../index";
 import { ElectronAppLifecycle } from "../platform-adapters/electron-app-lifecycle";
 import { ElectronAppMeta } from "../platform-adapters/electron-app-meta";
+import { ElectronAppMetrics } from "../platform-adapters/electron-app-metrics";
 import { ElectronBundledResources } from "../platform-adapters/electron-bundled-resources";
 import { ElectronClipboard } from "../platform-adapters/electron-clipboard";
 import { ElectronContextMenu } from "../platform-adapters/electron-context-menu";
 import { ElectronCrypto } from "../platform-adapters/electron-crypto";
+import { ElectronDevHostActions } from "../platform-adapters/electron-dev-host-actions";
 import { ElectronDialog } from "../platform-adapters/electron-dialog";
 import { ElectronFileIcon } from "../platform-adapters/electron-file-icon";
 import { ElectronImageProcessor } from "../platform-adapters/electron-image-processor";
@@ -243,6 +247,11 @@ import {
   TokenCipherPortAdapter,
 } from "../services/auth/port-adapters";
 import { DeepLinkService } from "../services/deep-link/service";
+import { DevActionsService } from "../services/dev-actions/service";
+import { DevFlagsService } from "../services/dev-flags/service";
+import { DevLogsService } from "../services/dev-logs/service";
+import { DevMetricsService } from "../services/dev-metrics/service";
+import { DevNetworkService } from "../services/dev-network/service";
 import { DiscordPresenceService } from "../services/discord-presence/service";
 import { EncryptionService } from "../services/encryption/service";
 import { SecureStoreService } from "../services/secure-store/service";
@@ -265,6 +274,11 @@ import {
   DATABASE_SERVICE as MAIN_DATABASE_SERVICE,
   DEEP_LINK_SERVICE as MAIN_DEEP_LINK_SERVICE,
   DEFAULT_ADDITIONAL_DIRECTORY_REPOSITORY as MAIN_DEFAULT_ADDITIONAL_DIRECTORY_REPOSITORY,
+  DEV_ACTIONS_SERVICE as MAIN_DEV_ACTIONS_SERVICE,
+  DEV_FLAGS_SERVICE as MAIN_DEV_FLAGS_SERVICE,
+  DEV_LOGS_SERVICE as MAIN_DEV_LOGS_SERVICE,
+  DEV_METRICS_SERVICE as MAIN_DEV_METRICS_SERVICE,
+  DEV_NETWORK_SERVICE as MAIN_DEV_NETWORK_SERVICE,
   DISCORD_PRESENCE_SERVICE as MAIN_DISCORD_PRESENCE_SERVICE,
   ENCRYPTION_SERVICE as MAIN_ENCRYPTION_SERVICE,
   EXTERNAL_APPS_SERVICE as MAIN_EXTERNAL_APPS_SERVICE,
@@ -318,6 +332,8 @@ container.bind(CONTEXT_MENU_SERVICE).to(ElectronContextMenu);
 container.bind(BUNDLED_RESOURCES_SERVICE).to(ElectronBundledResources);
 container.bind(IMAGE_PROCESSOR_SERVICE).to(ElectronImageProcessor);
 container.bind(WORKSPACE_SETTINGS_SERVICE).to(ElectronWorkspaceSettings);
+container.bind(APP_METRICS_SERVICE).to(ElectronAppMetrics);
+container.bind(DEV_HOST_ACTIONS_SERVICE).to(ElectronDevHostActions);
 
 container.load(databaseModule);
 container.load(repositoriesModule);
@@ -728,3 +744,9 @@ container.load(canvasCoreModule);
 // Browser tabs for the Channels canvas surface. Authoritative sqlite-backed
 // service in the main process; resolved by the host-router browserTabs router.
 container.load(browserTabsModule);
+
+container.bind(MAIN_DEV_FLAGS_SERVICE).to(DevFlagsService);
+container.bind(MAIN_DEV_METRICS_SERVICE).to(DevMetricsService);
+container.bind(MAIN_DEV_NETWORK_SERVICE).to(DevNetworkService);
+container.bind(MAIN_DEV_LOGS_SERVICE).to(DevLogsService);
+container.bind(MAIN_DEV_ACTIONS_SERVICE).to(DevActionsService);

apps/code/src/main/di/tokens.ts

@@ -127,3 +127,18 @@ export const WORKSPACE_SERVER_SERVICE = Symbol.for(
 export const DISCORD_PRESENCE_SERVICE = Symbol.for(
   "posthog.host.main.discord-presence.service",
 );
+export const DEV_FLAGS_SERVICE = Symbol.for(
+  "posthog.host.main.dev-flags.service",
+);
+export const DEV_METRICS_SERVICE = Symbol.for(
+  "posthog.host.main.dev-metrics.service",
+);
+export const DEV_NETWORK_SERVICE = Symbol.for(
+  "posthog.host.main.dev-network.service",
+);
+export const DEV_LOGS_SERVICE = Symbol.for(
+  "posthog.host.main.dev-logs.service",
+);
+export const DEV_ACTIONS_SERVICE = Symbol.for(
+  "posthog.host.main.dev-actions.service",
+);

apps/code/src/main/index.ts

@@ -72,6 +72,7 @@ import {
 import { posthogNodeAnalytics } from "./platform-adapters/posthog-analytics";
 import { registerMcpSandboxProtocol } from "./protocols/mcp-sandbox";
 import type { AppLifecycleService } from "./services/app-lifecycle/service";
+import { initDevToolbar } from "./services/dev-toolbar";
 import type { DiscordPresenceService } from "./services/discord-presence/service";
 import {
   focusSessionStore,
@@ -239,6 +240,8 @@ app.on("child-process-gone", (_event, details) => {
 });
 
 async function initializeServices(): Promise<void> {
+  initDevToolbar();
+
   container.get<DatabaseService>(DATABASE_SERVICE);
   container.get<OAuthService>(OAUTH_SERVICE);
   const authService = container.get<AuthService>(AUTH_SERVICE);

apps/code/src/main/platform-adapters/electron-app-metrics.ts

@@ -0,0 +1,21 @@
+import type {
+  AppProcessMetric,
+  IAppMetrics,
+} from "@posthog/platform/app-metrics";
+import { app } from "electron";
+import { injectable } from "inversify";
+
+@injectable()
+export class ElectronAppMetrics implements IAppMetrics {
+  public getAppMetrics(): AppProcessMetric[] {
+    return app.getAppMetrics().map((m) => ({
+      pid: m.pid,
+      type: m.type,
+      name: m.name,
+      cpu: m.cpu ? { percentCPUUsage: m.cpu.percentCPUUsage } : undefined,
+      memory: m.memory
+        ? { workingSetSize: m.memory.workingSetSize }
+        : undefined,
+    }));
+  }
+}

apps/code/src/main/platform-adapters/electron-dev-host-actions.ts

@@ -0,0 +1,25 @@
+import type { IDevHostActions } from "@posthog/platform/dev-host-actions";
+import { app, BrowserWindow, shell } from "electron";
+import { injectable } from "inversify";
+
+@injectable()
+export class ElectronDevHostActions implements IDevHostActions {
+  public async openPath(path: string): Promise<void> {
+    await shell.openPath(path);
+  }
+
+  public reloadAllWindows(): void {
+    for (const window of BrowserWindow.getAllWindows()) {
+      window.webContents.reload();
+    }
+  }
+
+  public relaunch(): void {
+    app.relaunch();
+    app.exit(0);
+  }
+
+  public crash(): void {
+    process.crash();
+  }
+}

apps/code/src/main/preload.ts

@@ -3,6 +3,22 @@ import { contextBridge, webUtils } from "electron";
 import "electron-log/preload";
 import { parseSessionIdArg } from "./posthog-session-arg";
 
+const DEV_FLAGS_CLI_PREFIX = "--posthog-code-flags=";
+
+function readDevFlags(): { devMode: boolean } {
+  const arg = process.argv.find((a) => a.startsWith(DEV_FLAGS_CLI_PREFIX));
+  if (!arg) return { devMode: false };
+  try {
+    const payload = decodeURIComponent(arg.slice(DEV_FLAGS_CLI_PREFIX.length));
+    const parsed = JSON.parse(payload);
+    return { devMode: parsed?.devMode === true };
+  } catch {
+    return { devMode: false };
+  }
+}
+
+const devFlags = readDevFlags();
+
 contextBridge.exposeInMainWorld("electronUtils", {
   getPathForFile: (file: File) => webUtils.getPathForFile(file),
 });
@@ -11,6 +27,8 @@ contextBridge.exposeInMainWorld("__posthogBootstrap", {
   sessionId: parseSessionIdArg(process.argv),
 });
 
+contextBridge.exposeInMainWorld("__posthogCodeDevFlags", devFlags);
+
 if (process.argv.includes("--posthog-code-dev")) {
   contextBridge.exposeInMainWorld("__posthogCodeTest", {
     crash: () => {

apps/code/src/main/services/dev-actions/schemas.ts

@@ -0,0 +1,22 @@
+import { z } from "zod";
+
+export const devToastInput = z.object({
+  variant: z.enum(["info", "error"]),
+  message: z.string(),
+});
+
+export const devToastSchema = z.object({
+  id: z.number(),
+  variant: z.enum(["info", "error"]),
+  message: z.string(),
+});
+
+export type DevToast = z.infer<typeof devToastSchema>;
+
+export const DevActionsEvent = {
+  Toast: "toast",
+} as const;
+
+export interface DevActionsEvents {
+  [DevActionsEvent.Toast]: DevToast;
+}