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

packages/kit/src/types.ts

@@ -29,6 +29,8 @@ export interface BuildAnalysisStatus {
   exists: boolean;
   reportPath: string;
   buildCommand: string | null;
+  canTriggerBuild: boolean;
+  buildTriggerHint?: string;
 }
 
 export interface BuildAnalysisRunResult {

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

@@ -14,6 +14,7 @@ import type { ServerContext } from '../types';
 import { detectPackageManager } from '../npm';
 import {
   getBuildAnalysisRpcGuardError,
+  getBuildAnalysisRpcGuardHint,
   isBuildAnalysisRpcAllowed,
 } from './security';
 
@@ -258,11 +259,16 @@ export function getBuildAnalysisFunctions(
     async getBuildAnalysisStatus(): Promise<BuildAnalysisStatus> {
       const reportPath = resolveBuildAnalysisHtmlPath(ctx.config.root);
       const { command } = await resolveBuildScript(ctx.config.root);
+      const rpcClient = getServerRpcRequestContext()?.client;
+      const canTriggerBuild = isBuildAnalysisRpcAllowed(rpcClient);
 
       return {
         exists: await fileExists(reportPath),
         reportPath,
         buildCommand: command,
+        canTriggerBuild,
+        buildTriggerHint:
+          command && !canTriggerBuild ? getBuildAnalysisRpcGuardHint() : undefined,
       };
     },
     async buildBuildAnalysisReport(): Promise<BuildAnalysisRunResult> {

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

@@ -13,6 +13,12 @@ describe('build analysis RPC security', () => {
     expect(isBuildAnalysisRpcAllowed({ socket: { remoteAddress: '::ffff:127.0.0.1' } }, {})).toBe(
       true,
     );
+    expect(
+      isBuildAnalysisRpcAllowed(
+        { socket: { _socket: { remoteAddress: '127.0.0.1' } } },
+        {},
+      ),
+    ).toBe(true);
   });
 
   test('rejects non-loopback websocket clients by default', () => {
@@ -39,6 +45,9 @@ describe('build analysis RPC security', () => {
     expect(getRpcClientRemoteAddress({ socket: { remoteAddress: '127.0.0.1' } })).toBe(
       '127.0.0.1',
     );
+    expect(
+      getRpcClientRemoteAddress({ socket: { _socket: { remoteAddress: '127.0.0.1' } } }),
+    ).toBe('127.0.0.1');
     expect(getRpcClientRemoteAddress({ _socket: { remoteAddress: '127.0.0.1' } })).toBe(
       '127.0.0.1',
     );

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

@@ -3,6 +3,8 @@ const TRUTHY_ENV_VALUES = new Set(['1', 'true', 'yes', 'on']);
 
 type RpcClientSocket = {
   remoteAddress?: string | null;
+  socket?: unknown;
+  _socket?: unknown;
 };
 
 type RpcClientLike = {
@@ -24,7 +26,41 @@ export function getRpcClientRemoteAddress(client: unknown): string | undefined {
   }
 
   const candidate = client as RpcClientLike;
-  return candidate.socket?.remoteAddress ?? candidate._socket?.remoteAddress ?? undefined;
+  return (
+    getSocketRemoteAddress(candidate.socket) ?? getSocketRemoteAddress(candidate._socket)
+  );
+}
+
+function getSocketRemoteAddress(socket: unknown): string | undefined {
+  if (!socket || typeof socket !== 'object') {
+    return undefined;
+  }
+
+  const queue: RpcClientSocket[] = [socket as RpcClientSocket];
+  const seen = new Set<object>();
+
+  while (queue.length > 0) {
+    const current = queue.shift();
+    if (!current || seen.has(current)) {
+      continue;
+    }
+
+    seen.add(current);
+
+    if (typeof current.remoteAddress === 'string' && current.remoteAddress.length > 0) {
+      return current.remoteAddress;
+    }
+
+    if (current.socket && typeof current.socket === 'object') {
+      queue.push(current.socket as RpcClientSocket);
+    }
+
+    if (current._socket && typeof current._socket === 'object') {
+      queue.push(current._socket as RpcClientSocket);
+    }
+  }
+
+  return undefined;
 }
 
 export function isLoopbackAddress(address: string | undefined): boolean {
@@ -50,3 +86,7 @@ export function isBuildAnalysisRpcAllowed(
 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.`;
 }
+
+export function getBuildAnalysisRpcGuardHint(): string {
+  return `Automatic rebuild is unavailable from this DevTools client. Reconnect from localhost or set ${REMOTE_BUILD_ANALYSIS_ENV}=1 to opt in to remote build-analysis execution.`;
+}

packages/ui/src/features/BuildAnalysis/BuildAnalysis.tsx

@@ -13,8 +13,10 @@ export const BuildAnalysis = component$(() => {
   const isChecking = useSignal(true);
   const isBuilding = useSignal(false);
   const hasReport = useSignal(false);
+  const canTriggerBuild = useSignal(false);
   const reportPath = useSignal('');
   const buildCommand = useSignal<string | null>(null);
+  const buildTriggerHint = useSignal('');
   const errorMessage = useSignal('');
 
   const loadStatus = $(async () => {
@@ -26,8 +28,10 @@ export const BuildAnalysis = component$(() => {
       const status = await rpc.getBuildAnalysisStatus();
 
       hasReport.value = status.exists;
+      canTriggerBuild.value = status.canTriggerBuild;
       reportPath.value = status.reportPath;
       buildCommand.value = status.buildCommand;
+      buildTriggerHint.value = status.buildTriggerHint || '';
     } catch (error) {
       errorMessage.value =
         error instanceof Error ? error.message : 'Failed to load build analysis status.';
@@ -47,6 +51,12 @@ export const BuildAnalysis = component$(() => {
       return;
     }
 
+    if (!canTriggerBuild.value) {
+      errorMessage.value =
+        buildTriggerHint.value || 'Automatic rebuild is unavailable from this DevTools client.';
+      return;
+    }
+
     const confirmed =
       globalThis.confirm?.(
         `Build analysis needs a fresh build to generate the report.\n\nRun: ${buildCommand.value} ?`,
@@ -96,6 +106,11 @@ export const BuildAnalysis = component$(() => {
               {buildCommand.value}
             </code>
           ) : null}
+          {buildTriggerHint.value ? (
+            <div class="rounded-xl border border-amber-500/20 bg-amber-500/10 px-3 py-2 text-sm text-amber-200">
+              {buildTriggerHint.value}
+            </div>
+          ) : null}
           {errorMessage.value ? (
             <div class="rounded-xl border border-red-500/20 bg-red-500/10 px-3 py-2 text-sm text-red-300">
               {errorMessage.value}
@@ -110,7 +125,17 @@ export const BuildAnalysis = component$(() => {
         </div>
       ) : hasReport.value ? (
         <>
-          <div class="flex items-center justify-end">
+          <div class="flex items-center justify-end gap-3">
+            {buildCommand.value && canTriggerBuild.value ? (
+              <button
+                type="button"
+                onClick$={buildReport}
+                disabled={isBuilding.value}
+                class="border-border bg-foreground/5 hover:bg-foreground/10 disabled:cursor-not-allowed disabled:opacity-50 rounded-xl border px-4 py-2 text-sm transition-colors"
+              >
+                {isBuilding.value ? 'Rebuilding...' : 'Rebuild Report'}
+              </button>
+            ) : null}
             <button
               type="button"
               onClick$={refreshFrame}
@@ -134,22 +159,24 @@ export const BuildAnalysis = component$(() => {
           <div class="flex max-w-3xl flex-col gap-4">
             <div class="text-base font-semibold">No build analysis report yet</div>
             <div class="text-muted-foreground text-sm leading-6">
-              The visualizer HTML file does not exist yet. You need to build the
-              current project first, and DevTools will ask for your confirmation
-              before running that build.
+              {canTriggerBuild.value
+                ? 'The visualizer HTML file does not exist yet. You need to build the current project first, and DevTools will ask for your confirmation before running that build.'
+                : 'The visualizer HTML file does not exist yet. Run the build command locally to generate it, or reconnect from localhost if you want DevTools to trigger it for you.'}
             </div>
             <code class="text-muted-foreground rounded-lg bg-foreground/5 px-3 py-2 text-xs">
               {reportPath.value}
             </code>
             <div>
-              <button
-                type="button"
-                onClick$={buildReport}
-                disabled={isBuilding.value || !buildCommand.value}
-                class="border-border bg-foreground/5 hover:bg-foreground/10 disabled:cursor-not-allowed disabled:opacity-50 rounded-xl border px-4 py-2 text-sm transition-colors"
-              >
-                {isBuilding.value ? 'Building...' : 'Build Report'}
-              </button>
+              {buildCommand.value && canTriggerBuild.value ? (
+                <button
+                  type="button"
+                  onClick$={buildReport}
+                  disabled={isBuilding.value}
+                  class="border-border bg-foreground/5 hover:bg-foreground/10 disabled:cursor-not-allowed disabled:opacity-50 rounded-xl border px-4 py-2 text-sm transition-colors"
+                >
+                  {isBuilding.value ? 'Building...' : 'Build Report'}
+                </button>
+              ) : null}
             </div>
           </div>
         </div>