fix: stabilize inspector and profiling surfaces

Author: DjDeveloperr

client/src/api/types.ts

@@ -57,6 +57,8 @@ export interface WebKitTarget {
   id: string;
   appId: string;
   appName?: string | null;
+  appActive?: boolean;
+  pageActive?: boolean;
   pageId: number;
   title?: string | null;
   url?: string | null;

client/src/app/AppShell.tsx

@@ -116,6 +116,7 @@ const DEFAULT_ACCESSIBILITY_MAX_DEPTH = 10;
 const LOGICAL_INSPECTOR_MAX_DEPTH = 80;
 const FLUTTER_INSPECTOR_MAX_DEPTH = 48;
 const AUTH_REQUIRED_MESSAGE = "SimDeck API access token is required.";
+const NOT_CONNECTED_MESSAGE = "Not connected";
 const LOCAL_STREAM_DEFAULTS: StreamConfig = {
   encoder: "auto",
   fps: 60,
@@ -692,6 +693,16 @@ export function AppShell({
     streamTransport,
   });
 
+  useEffect(() => {
+    if (
+      streamStatus.state !== "error" ||
+      !isStreamProviderDisconnectError(streamStatus.error)
+    ) {
+      return;
+    }
+    void refreshRef.current();
+  }, [streamStatus.error, streamStatus.state]);
+
   const updateStreamEncoder = useCallback((encoder: StreamEncoder) => {
     streamConfigUserTouchedRef.current = true;
     streamConfigUserChangeAtRef.current = Date.now();
@@ -1434,8 +1445,9 @@ export function AppShell({
     pairingEnabled &&
     listError === AUTH_REQUIRED_MESSAGE &&
     !accessTokenFromLocation();
-  const visibleListError =
-    remoteStream && listError === AUTH_REQUIRED_MESSAGE
+  const visibleListError = providerDisconnected
+    ? NOT_CONNECTED_MESSAGE
+    : remoteStream && listError === AUTH_REQUIRED_MESSAGE
       ? ""
       : selectedSimulator
         ? friendlyClientError(listError)
@@ -1471,14 +1483,16 @@ export function AppShell({
     streamStatusState: streamStatus.state,
   });
   const viewportStatusOverlayLabel =
+    (providerDisconnected ? NOT_CONNECTED_MESSAGE : "") ||
     simulatorStatusOverlayLabel ||
     streamStatusMessage ||
     (browserFramePending ? "Stream connected, browser frame pending" : "") ||
     (selectedSimulator ? visibleListError : "");
   const viewportHasStreamError = Boolean(
+    providerDisconnected ||
     streamStatus.state === "error" ||
-    visibleStreamError ||
-    (selectedSimulator && visibleListError),
+      visibleStreamError ||
+      (selectedSimulator && visibleListError),
   );
   const deviceTransform = `translate(${pan.x}px, ${pan.y + autoViewportOffsetY}px) scale(${effectiveZoom})`;
   const chromeScreenRect = computeChromeScreenRect(
@@ -2436,6 +2450,14 @@ function friendlyStreamError(
   return friendlyClientError(normalized);
 }
 
+function isStreamProviderDisconnectError(message: string | undefined): boolean {
+  const lower = message?.trim().toLowerCase() ?? "";
+  return (
+    lower.includes("websocket stream closed") ||
+    lower.includes("websocket stream failed")
+  );
+}
+
 function streamAgentStatusLabel({
   hasFrame,
   simulator,
@@ -2514,7 +2536,7 @@ function userFacingAccessibilityError(message: string): string {
 
   const lower = normalized.toLowerCase();
   if (isProviderDisconnected(normalized)) {
-    return "Not connected";
+    return NOT_CONNECTED_MESSAGE;
   }
   if (
     lower.includes("no app inspector found") ||

client/src/features/accessibility/AccessibilityInspector.tsx

@@ -306,11 +306,11 @@ export function AccessibilityInspector({
             </div>
           ) : error ? (
             <div className="hierarchy-empty error">{error}</div>
-          ) : visibleItems.length === 0 && isLoading ? (
+          ) : visibleItems.length === 0 && isLoading && !source ? (
             <div className="hierarchy-empty">Reading accessibility tree...</div>
           ) : visibleItems.length === 0 ? (
             <div className="hierarchy-empty">
-              No accessibility snapshot yet.
+              {emptyAccessibilityMessage(source)}
             </div>
           ) : (
             visibleItems.map((item) => {
@@ -840,6 +840,15 @@ function sourceLabel(source: AccessibilitySource): string {
   return source === "in-app-inspector" ? "UIKit" : "Native AX";
 }
 
+function emptyAccessibilityMessage(
+  source: AccessibilityTreeResponse["source"] | "",
+): string {
+  if (source === "native-ax") {
+    return "No native accessibility elements available.";
+  }
+  return "No accessibility snapshot available.";
+}
+
 function objectClassName(value: Record<string, unknown> | null | undefined) {
   const className = value?.className;
   return typeof className === "string" ? className : "";

client/src/features/accessibility/PerformancePanel.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useMemo, useState } from "react";
-import type { CSSProperties, PointerEvent } from "react";
+import { useEffect, useId, useMemo, useState } from "react";
+import type { CSSProperties, ChangeEvent, PointerEvent } from "react";
 
 import {
   fetchSimulatorPerformance,
@@ -97,15 +97,37 @@ export function PerformancePanel({
     visible,
   ]);
 
+  const processes = performance?.processes ?? [];
+  const selectedPidValue = selectedPid ?? performance?.selectedPid ?? null;
+  const selectedPidInList =
+    selectedPidValue == null ||
+    processes.some((process) => process.pid === selectedPidValue);
   const current = performance?.current ?? null;
   const selectedProcess = useMemo(
-    () =>
-      performance?.processes.find(
-        (process) => process.pid === (selectedPid ?? performance.selectedPid),
-      ) ?? null,
-    [performance, selectedPid],
+    () => processes.find((process) => process.pid === selectedPidValue) ?? null,
+    [processes, selectedPidValue],
   );
 
+  function selectProcess(event: ChangeEvent<HTMLSelectElement>) {
+    const nextPid = Number(event.currentTarget.value);
+    if (!Number.isInteger(nextPid)) {
+      return;
+    }
+    setFollowForeground(false);
+    setSelectedPid(nextPid);
+    setSample(null);
+  }
+
+  function followFrontmostProcess() {
+    setFollowForeground(true);
+    setSelectedPid(
+      performance?.foregroundProcess?.processIdentifier ??
+        performance?.selectedPid ??
+        null,
+    );
+    setSample(null);
+  }
+
   async function runSample() {
     const pid = selectedPid ?? performance?.selectedPid ?? null;
     if (!udid || pid == null) {
@@ -133,27 +155,36 @@ export function PerformancePanel({
 
   return (
     <div className="performance-panel">
-      <div className="performance-process-list">
-        {performance?.processes.length ? (
-          performance.processes.map((process) => (
-            <ProcessButton
-              key={process.pid}
-              onSelect={() => {
-                setSelectedPid(process.pid);
-                setFollowForeground(process.isForeground);
-                setSample(null);
-              }}
-              process={process}
-              selected={
-                process.pid === (selectedPid ?? performance.selectedPid)
-              }
-            />
-          ))
-        ) : (
-          <div className="performance-empty compact">
-            {error || "Waiting for an app process."}
-          </div>
-        )}
+      <div className="performance-target-bar">
+        <div className="performance-process-select-wrap">
+          <select
+            aria-label="Performance process"
+            className="performance-process-select"
+            disabled={!processes.length}
+            onChange={selectProcess}
+            value={selectedPidValue == null ? "" : String(selectedPidValue)}
+          >
+            {processes.length ? null : (
+              <option value="">Waiting for an app process</option>
+            )}
+            {selectedPidValue != null && !selectedPidInList ? (
+              <option value={selectedPidValue}>PID {selectedPidValue}</option>
+            ) : null}
+            {processes.map((process) => (
+              <option key={process.pid} value={process.pid}>
+                {processOptionLabel(process)}
+              </option>
+            ))}
+          </select>
+        </div>
+        <button
+          className={`performance-follow-button ${followForeground ? "active" : ""}`}
+          disabled={!performance?.foregroundProcess}
+          onClick={followFrontmostProcess}
+          type="button"
+        >
+          Follow Frontmost
+        </button>
       </div>
 
       {error && performance?.processes.length ? (
@@ -295,34 +326,22 @@ export function PerformancePanel({
             )}
           </section>
         </>
-      ) : null}
+      ) : (
+        <div className="performance-empty compact">
+          {error || "Collecting performance metrics."}
+        </div>
+      )}
     </div>
   );
 }
 
-function ProcessButton({
-  onSelect,
-  process,
-  selected,
-}: {
-  onSelect: () => void;
-  process: PerformanceProcess;
-  selected: boolean;
-}) {
-  return (
-    <button
-      className={`performance-process ${selected ? "selected" : ""}`}
-      onClick={onSelect}
-      title={process.command}
-      type="button"
-    >
-      <span className="performance-process-name">{process.process}</span>
-      <span className="performance-process-meta">
-        {process.pid} / {process.role}
-        {process.isForeground ? " / frontmost" : ""}
-      </span>
-    </button>
-  );
+function processOptionLabel(process: PerformanceProcess): string {
+  const name = process.appName || process.process;
+  const parts = [`${name} (${process.pid})`, process.role];
+  if (process.isForeground) {
+    parts.push("frontmost");
+  }
+  return parts.join(" / ");
 }
 
 function Metric({ label, value }: { label: string; value: string }) {
@@ -345,6 +364,7 @@ function Timeline({
   value: (sample: PerformanceSample) => number;
   valueLabel: (value: number | null | undefined) => string;
 }) {
+  const gradientId = useId().replace(/:/g, "");
   const [hoverIndex, setHoverIndex] = useState<number | null>(null);
   const values = samples.map(value);
   const latest = values.at(-1) ?? 0;
@@ -353,9 +373,13 @@ function Timeline({
     x: values.length <= 1 ? 0 : (index / (values.length - 1)) * 100,
     y: 42 - (Math.max(0, item) / max) * 36,
   }));
-  const points = coordinates
-    .map((point) => `${round(point.x)},${round(point.y)}`)
+  const linePath = coordinates
+    .map(
+      (point, index) =>
+        `${index === 0 ? "M" : "L"} ${round(point.x)} ${round(point.y)}`,
+    )
     .join(" ");
+  const areaPath = linePath ? `${linePath} L 100 42 L 0 42 Z` : "";
   const activeIndex =
     hoverIndex == null || hoverIndex >= samples.length ? null : hoverIndex;
   const activePoint = activeIndex == null ? null : coordinates[activeIndex];
@@ -385,8 +409,32 @@ function Timeline({
         preserveAspectRatio="none"
         viewBox="0 0 100 44"
       >
-        <line x1="0" x2="100" y1="42" y2="42" />
-        {points ? <polyline points={points} /> : null}
+        <defs>
+          <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
+            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.26" />
+            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.02" />
+          </linearGradient>
+        </defs>
+        {[6, 18, 30, 42].map((y) => (
+          <line
+            className="performance-chart-grid"
+            key={y}
+            x1="0"
+            x2="100"
+            y1={y}
+            y2={y}
+          />
+        ))}
+        {areaPath ? (
+          <path
+            className="performance-chart-area"
+            d={areaPath}
+            fill={`url(#${gradientId})`}
+          />
+        ) : null}
+        {linePath ? (
+          <path className="performance-chart-line" d={linePath} />
+        ) : null}
         {activePoint ? (
           <>
             <line
@@ -456,13 +504,13 @@ function formatRate(value: number | null | undefined): string {
 
 function hangLabel(state: string): string {
   if (state === "busy") {
-    return "Busy";
+    return "Potential hang";
   }
   if (state === "quiet") {
-    return "Quiet";
+    return "No frame updates";
   }
   if (state === "responsive") {
-    return "Responsive";
+    return "Rendering OK";
   }
   return "Unknown";
 }