feat: enhance Qwik development tools with build analysis and SSR performance tracking

- Introduced new `Preloads` and `Build Analysis` panels in DevTools for improved insights.
- Added runtime instrumentation for SSR/CSR performance and preload tracking.
- Expanded plugin capabilities to generate build-analysis reports and enforce security around RPC calls.
- Updated SSR performance middleware to normalize accept headers for better request handling.

Author: JerryWu1234

.changeset/huge-clubs-rest.md

@@ -2,8 +2,8 @@
 '@qwik.dev/devtools': patch
 ---
 
-chore: update .gitignore, pnpm-lock.yaml, and add Qwik development documentation
+feat: add preload/build analysis tooling and richer devtools instrumentation
 
-- Updated .gitignore to include new patterns for cursor skills and Qwik devtools.
-- Modified pnpm-lock.yaml to add new dependencies including rollup-plugin-visualizer and define-lazy-prop.
-- Introduced AGENTS.md and SKILL.md for Qwik core development guidelines, detailing architecture, best practices, and mandatory workflows.
+- Added new `Preloads` and `Build Analysis` panels, plus an improved `Inspect` view that resolves correctly from the app base URL on deep routes.
+- Added runtime instrumentation for SSR/CSR performance and preload tracking, including SSR preload snapshots, QRL-to-resource correlation, and richer diagnostics surfaced in DevTools.
+- Expanded the plugin and RPC layer to generate and serve build-analysis reports, expose the new preload/performance data to the UI, and add server-side guards around build-analysis execution.

packages/kit/src/server.ts

@@ -3,14 +3,39 @@ import { DEVTOOLS_VITE_MESSAGING_EVENT } from './constants';
 import { setViteServerRpc, getViteServerContext } from './context';
 import { createSerializedRpc } from './rpc-core';
 
+export interface ServerRpcRequestContext {
+  client?: unknown;
+}
+
+let currentServerRpcRequestContext: ServerRpcRequestContext | undefined;
+
+export function getServerRpcRequestContext() {
+  return currentServerRpcRequestContext;
+}
+
+function runWithServerRpcRequestContext(
+  context: ServerRpcRequestContext,
+  fn: () => void,
+) {
+  const previous = currentServerRpcRequestContext;
+  currentServerRpcRequestContext = context;
+  try {
+    fn();
+  } finally {
+    currentServerRpcRequestContext = previous;
+  }
+}
+
 export function createServerRpc(functions: ServerFunctions) {
   const server = getViteServerContext();
 
   const rpc = createSerializedRpc<ClientFunctions, ServerFunctions>(functions, {
     post: (data) => server.ws.send(DEVTOOLS_VITE_MESSAGING_EVENT, data),
     on: (handler) =>
-      server.ws.on(DEVTOOLS_VITE_MESSAGING_EVENT, (data: any) => {
-        handler(data);
+      server.ws.on(DEVTOOLS_VITE_MESSAGING_EVENT, (data: any, client: unknown) => {
+        runWithServerRpcRequestContext({ client }, () => {
+          handler(data);
+        });
       }),
   });
 

packages/plugin/src/build-analysis/index.ts

@@ -2,6 +2,7 @@ import fs from 'node:fs';
 import fsp from 'node:fs/promises';
 import path from 'node:path';
 import { spawn } from 'node:child_process';
+import { getServerRpcRequestContext } from '@devtools/kit';
 import type {
   BuildAnalysisRunResult,
   BuildAnalysisStatus,
@@ -11,6 +12,10 @@ import { visualizer } from 'rollup-plugin-visualizer';
 import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite';
 import type { ServerContext } from '../types';
 import { detectPackageManager } from '../npm';
+import {
+  getBuildAnalysisRpcGuardError,
+  isBuildAnalysisRpcAllowed,
+} from './security';
 
 const BUILD_ANALYSIS_VIEW_PATH = '/__qwik_devtools/build-analysis/report';
 const BUILD_ANALYSIS_DIR = path.join('.qwik-devtools', 'build-analysis');
@@ -261,6 +266,14 @@ export function getBuildAnalysisFunctions(
       };
     },
     async buildBuildAnalysisReport(): Promise<BuildAnalysisRunResult> {
+      const rpcClient = getServerRpcRequestContext()?.client;
+      if (!isBuildAnalysisRpcAllowed(rpcClient)) {
+        return {
+          success: false,
+          error: getBuildAnalysisRpcGuardError(),
+        };
+      }
+
       return runBuildScript(ctx.config.root);
     },
   };

packages/plugin/src/build-analysis/security.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, test } from 'vitest';
+import {
+  getRpcClientRemoteAddress,
+  isBuildAnalysisRpcAllowed,
+  isLoopbackAddress,
+  isRemoteBuildAnalysisEnabled,
+} from './security';
+
+describe('build analysis RPC security', () => {
+  test('allows loopback websocket clients by default', () => {
+    expect(isBuildAnalysisRpcAllowed({ socket: { remoteAddress: '127.0.0.1' } }, {})).toBe(true);
+    expect(isBuildAnalysisRpcAllowed({ socket: { remoteAddress: '::1' } }, {})).toBe(true);
+    expect(isBuildAnalysisRpcAllowed({ socket: { remoteAddress: '::ffff:127.0.0.1' } }, {})).toBe(
+      true,
+    );
+  });
+
+  test('rejects non-loopback websocket clients by default', () => {
+    expect(isBuildAnalysisRpcAllowed({ socket: { remoteAddress: '192.168.1.10' } }, {})).toBe(
+      false,
+    );
+    expect(isBuildAnalysisRpcAllowed({ socket: { remoteAddress: '10.0.0.22' } }, {})).toBe(false);
+    expect(isBuildAnalysisRpcAllowed({}, {})).toBe(false);
+  });
+
+  test('supports explicit env opt-in for remote execution', () => {
+    expect(
+      isBuildAnalysisRpcAllowed(
+        { socket: { remoteAddress: '192.168.1.10' } },
+        { QWIK_DEVTOOLS_ALLOW_REMOTE_BUILD_ANALYSIS: 'true' },
+      ),
+    ).toBe(true);
+    expect(
+      isRemoteBuildAnalysisEnabled({ QWIK_DEVTOOLS_ALLOW_REMOTE_BUILD_ANALYSIS: '1' }),
+    ).toBe(true);
+  });
+
+  test('extracts remote address from vite websocket client shapes', () => {
+    expect(getRpcClientRemoteAddress({ socket: { remoteAddress: '127.0.0.1' } })).toBe(
+      '127.0.0.1',
+    );
+    expect(getRpcClientRemoteAddress({ _socket: { remoteAddress: '127.0.0.1' } })).toBe(
+      '127.0.0.1',
+    );
+    expect(getRpcClientRemoteAddress(null)).toBeUndefined();
+  });
+
+  test('recognizes supported loopback formats', () => {
+    expect(isLoopbackAddress('127.0.0.1')).toBe(true);
+    expect(isLoopbackAddress('::1')).toBe(true);
+    expect(isLoopbackAddress('::ffff:127.0.0.1')).toBe(true);
+    expect(isLoopbackAddress('192.168.1.10')).toBe(false);
+  });
+});

packages/plugin/src/build-analysis/security.ts

@@ -0,0 +1,52 @@
+const REMOTE_BUILD_ANALYSIS_ENV = 'QWIK_DEVTOOLS_ALLOW_REMOTE_BUILD_ANALYSIS';
+const TRUTHY_ENV_VALUES = new Set(['1', 'true', 'yes', 'on']);
+
+type RpcClientSocket = {
+  remoteAddress?: string | null;
+};
+
+type RpcClientLike = {
+  socket?: RpcClientSocket | null;
+  _socket?: RpcClientSocket | null;
+};
+
+export function isRemoteBuildAnalysisEnabled(
+  env: NodeJS.ProcessEnv = process.env,
+): boolean {
+  const rawValue = env[REMOTE_BUILD_ANALYSIS_ENV];
+  if (!rawValue) return false;
+  return TRUTHY_ENV_VALUES.has(rawValue.trim().toLowerCase());
+}
+
+export function getRpcClientRemoteAddress(client: unknown): string | undefined {
+  if (!client || typeof client !== 'object') {
+    return undefined;
+  }
+
+  const candidate = client as RpcClientLike;
+  return candidate.socket?.remoteAddress ?? candidate._socket?.remoteAddress ?? undefined;
+}
+
+export function isLoopbackAddress(address: string | undefined): boolean {
+  if (!address) return false;
+  if (address === '127.0.0.1' || address === '::1') return true;
+  if (address.startsWith('::ffff:')) {
+    return isLoopbackAddress(address.slice('::ffff:'.length));
+  }
+  return false;
+}
+
+export function isBuildAnalysisRpcAllowed(
+  client: unknown,
+  env: NodeJS.ProcessEnv = process.env,
+): boolean {
+  if (isRemoteBuildAnalysisEnabled(env)) {
+    return true;
+  }
+
+  return isLoopbackAddress(getRpcClientRemoteAddress(client));
+}
+
+export function getBuildAnalysisRpcGuardError(): string {
+  return `Refusing to run the project build from a non-local DevTools RPC client. Reconnect from localhost or set ${REMOTE_BUILD_ANALYSIS_ENV}=1 to opt in to remote build-analysis execution.`;
+}

packages/plugin/src/plugin/statistics/sourceTransforms.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, test } from 'vitest';
+import { wrapQwikLazyComponentExports } from './sourceTransforms';
+
+describe('sourceTransforms', () => {
+  test('escapes Windows module ids in wrapped lazy component exports', () => {
+    const id = 'C:\\Users\\alice\\src\\app\\entry_component_abc123.tsx';
+    const source = `
+export const Foo_component_abc123 = () => null;
+`;
+
+    const result = wrapQwikLazyComponentExports({
+      code: source,
+      id,
+      exports: ['Foo_component_abc123'],
+    });
+
+    expect(result.changed).toBe(true);
+    expect(result.code).toContain(JSON.stringify(id));
+    expect(result.code).toContain(
+      '__qwik_wrap__(__original_Foo_component_abc123__, "Foo_component_abc123"',
+    );
+    expect(result.code).not.toContain(`'${id}'`);
+  });
+});

packages/plugin/src/plugin/statistics/sourceTransforms.ts

@@ -116,7 +116,9 @@ function appendWrappedExport(
   exportName: string,
   id: string,
 ): string {
+  const serializedExportName = JSON.stringify(exportName);
+  const serializedId = JSON.stringify(id);
   return `${code}
-export const ${exportName} = __qwik_wrap__(__original_${exportName}__, '${exportName}', '${id}');
+export const ${exportName} = __qwik_wrap__(__original_${exportName}__, ${serializedExportName}, ${serializedId});
 `;
 }

packages/plugin/src/plugin/statistics/ssrPerfMiddleware.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from 'vitest';
 import {
+  attachSsrPerfInjectorMiddleware,
   collectSsrPreloadEntries,
   extractSsrPreloadEntriesFromHtml,
   injectSsrDevtoolsIntoHtml,
@@ -74,4 +75,77 @@ describe('ssr preload middleware helpers', () => {
     expect(nextHtml).toContain('window.__QWIK_SSR_PRELOADS__');
     expect(nextHtml).toContain('/build/q-a.js');
   });
+
+  test('normalizes array accept headers before checking for html requests', () => {
+    let middleware:
+      | ((
+          req: { headers: Record<string, string | string[] | undefined>; url?: string },
+          res: {
+            write: (...args: any[]) => any;
+            end: (...args: any[]) => any;
+            setHeader: (name: string, value: any) => void;
+          },
+          next: (err?: unknown) => void,
+        ) => void)
+      | undefined;
+
+    attachSsrPerfInjectorMiddleware({
+      middlewares: {
+        use(fn: typeof middleware) {
+          middleware = fn;
+        },
+      },
+    });
+
+    expect(middleware).toBeTypeOf('function');
+
+    const html = '<html><head></head><body></body></html>';
+    let written = '';
+    let ended = false;
+    const headers = new Map<string, number>();
+    const res = {
+      write(chunk: unknown) {
+        written += String(chunk);
+        return true;
+      },
+      end(chunk?: unknown) {
+        if (chunk) {
+          written += String(chunk);
+        }
+        ended = true;
+        return this;
+      },
+      setHeader(name: string, value: number) {
+        headers.set(name, value);
+      },
+    };
+    const processWithPerf = process as typeof process & {
+      __QWIK_SSR_PERF__?: unknown[];
+    };
+    processWithPerf.__QWIK_SSR_PERF__ = [{ component: 'App', phase: 'ssr', duration: 1 }];
+
+    try {
+      middleware!(
+        {
+          headers: {
+            accept: ['application/xhtml+xml', 'text/html'],
+          },
+          url: '/demo',
+        },
+        res,
+        () => {},
+      );
+
+      expect(ended).toBe(false);
+      res.end(html);
+    } finally {
+      delete processWithPerf.__QWIK_SSR_PERF__;
+    }
+
+    expect(headers.get('Content-Length')).toBeGreaterThan(0);
+    expect(written).toContain('qwik:ssr-perf');
+    expect(ended).toBe(true);
+    expect(written).toContain('<html><head>');
+    expect(written).toContain('<script>');
+  });
 });

packages/plugin/src/plugin/statistics/ssrPerfMiddleware.ts

@@ -12,14 +12,18 @@ type MinimalMiddlewareRes = {
   setHeader: (name: string, value: any) => void;
 };
 
+function normalizeAcceptHeader(raw: string | string[] | undefined): string {
+  return Array.isArray(raw) ? raw.join(',') : raw || '';
+}
+
 export function attachSsrPerfInjectorMiddleware(server: any) {
   server.middlewares.use(
     (
       req: MinimalMiddlewareReq,
       res: MinimalMiddlewareRes,
       next: MiddlewareNext,
     ) => {
-      const accept = req.headers.accept || '';
+      const accept = normalizeAcceptHeader(req.headers.accept);
       if (!accept.includes('text/html')) return next();
 
       const store = getStoreForSSR() as Record<string, unknown>;