Polish simulator client panels and toolbar

Author: DjDeveloperr

client/package-lock.json

@@ -12,6 +12,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

client/package.json

@@ -357,10 +357,10 @@ export function AppShell({
   );
   const [selectedUDID, setSelectedUDID] = useState(initialSelectedUDID ?? "");
   const [search, setSearch] = useState("");
-  const [openURLValue, setOpenURLValue] = useState(
+  const openURLValueRef = useRef(
     initialUiState.openURLValue ?? "https://example.com",
   );
-  const [bundleIDValue, setBundleIDValue] = useState(
+  const bundleIDValueRef = useRef(
     initialUiState.bundleIDValue ?? "com.apple.Preferences",
   );
   const [menuOpen, setMenuOpen] = useState(false);
@@ -795,11 +795,11 @@ export function AppShell({
   useEffect(() => {
     writePersistedUiState((current) => ({
       ...current,
-      bundleIDValue,
-      openURLValue,
+      bundleIDValue: bundleIDValueRef.current,
+      openURLValue: openURLValueRef.current,
       selectedUDID,
     }));
-  }, [bundleIDValue, openURLValue, selectedUDID]);
+  }, [selectedUDID]);
 
   useEffect(() => {
     if (search && simulators.length > 0 && filteredSimulators.length === 0) {
@@ -851,9 +851,29 @@ export function AppShell({
   }, [fixedSimulatorUDID, selectedSimulator, selectedUDID]);
 
   useEffect(() => {
-    const nextViewportState = selectedSimulator
-      ? viewportStateForUDID(readPersistedUiState(), selectedSimulator.udid)
-      : DEFAULT_VIEWPORT_STATE;
+    if (!selectedSimulator) {
+      setStreamStamp(Date.now());
+      setChromeProfile(null);
+      setChromeProfileReady(false);
+      setLocalError("");
+      setAccessibilityRoots([]);
+      setAccessibilitySelectedId("");
+      setAccessibilityHoveredId(null);
+      setAccessibilityPickerActive(false);
+      setAccessibilityError("");
+      setAccessibilitySource("");
+      setAccessibilityAvailableSources([]);
+      accessibilityRequestIdRef.current += 1;
+      accessibilityLoadingRef.current = false;
+      setAccessibilityLoading(false);
+      return;
+    }
+
+    const persistedState = readPersistedUiState();
+    const nextViewportState = viewportStateForUDID(
+      persistedState,
+      selectedSimulator.udid,
+    );
     setStreamStamp(Date.now());
     setChromeProfile(null);
     setChromeProfileReady(false);
@@ -864,11 +884,8 @@ export function AppShell({
     setLocalError("");
     setAccessibilityRoots([]);
     setAccessibilitySelectedId(
-      selectedSimulator
-        ? (readPersistedUiState().accessibilitySelectedByUDID?.[
-            selectedSimulator.udid
-          ] ?? "")
-        : "",
+      persistedState.accessibilitySelectedByUDID?.[selectedSimulator.udid] ??
+        "",
     );
     setAccessibilityHoveredId(null);
     setAccessibilityPickerActive(false);
@@ -927,7 +944,9 @@ export function AppShell({
       setAccessibilityAvailableSources(availableSources);
       setAccessibilitySource(snapshot.source);
       setAccessibilityError(
-        roots.length === 0 ? (snapshot.fallbackReason ?? "") : "",
+        roots.length === 0
+          ? userFacingAccessibilityError(snapshot.fallbackReason ?? "")
+          : "",
       );
       const nextPreferredSource = nextAccessibilitySourcePreference(
         accessibilityPreferredSource,
@@ -946,7 +965,7 @@ export function AppShell({
       }
       setAccessibilityError(
         snapshotError instanceof Error
-          ? snapshotError.message
+          ? userFacingAccessibilityError(snapshotError.message)
           : "Failed to load accessibility hierarchy.",
       );
       setAccessibilityRoots([]);
@@ -1648,7 +1667,7 @@ export function AppShell({
     }
     const nextValue = window.prompt(
       `Open URL on ${selectedSimulator.name}`,
-      openURLValue,
+      openURLValueRef.current,
     );
     if (nextValue == null) {
       return;
@@ -1657,7 +1676,11 @@ export function AppShell({
     if (!trimmed) {
       return;
     }
-    setOpenURLValue(trimmed);
+    openURLValueRef.current = trimmed;
+    writePersistedUiState((current) => ({
+      ...current,
+      openURLValue: trimmed,
+    }));
     setMenuOpen(false);
     void runAction(() =>
       openSimulatorUrl(selectedSimulator.udid, { url: trimmed }),
@@ -1670,7 +1693,7 @@ export function AppShell({
     }
     const nextValue = window.prompt(
       `Launch bundle on ${selectedSimulator.name}`,
-      bundleIDValue,
+      bundleIDValueRef.current,
     );
     if (nextValue == null) {
       return;
@@ -1679,7 +1702,11 @@ export function AppShell({
     if (!trimmed) {
       return;
     }
-    setBundleIDValue(trimmed);
+    bundleIDValueRef.current = trimmed;
+    writePersistedUiState((current) => ({
+      ...current,
+      bundleIDValue: trimmed,
+    }));
     setMenuOpen(false);
     void runAction(() =>
       launchSimulatorBundle(selectedSimulator.udid, { bundleId: trimmed }),
@@ -2014,12 +2041,11 @@ export function AppShell({
         touchOverlayVisible={touchOverlayVisible}
         viewMode={viewMode}
         devtoolsPanel={
-          devToolsVisible ? (
-            <DevToolsPanel
-              onClose={() => setDevToolsVisible(false)}
-              selectedSimulator={selectedSimulator}
-            />
-          ) : null
+          <DevToolsPanel
+            onClose={() => setDevToolsVisible(false)}
+            selectedSimulator={selectedSimulator}
+            visible={devToolsVisible}
+          />
         }
         zoomDockRef={handleZoomDockRef}
         zoomAnimating={zoomAnimating}
@@ -2073,6 +2099,26 @@ function friendlyStreamError(
   return friendlyClientError(normalized);
 }
 
+function userFacingAccessibilityError(message: string): string {
+  const normalized = message.trim();
+  if (!normalized) {
+    return "";
+  }
+
+  const lower = normalized.toLowerCase();
+  if (
+    lower.includes("no app inspector found") ||
+    lower.includes("no connected websocket inspector found") ||
+    lower.includes("no published app inspector found") ||
+    lower.includes("no in-app inspector found") ||
+    lower.includes("first probe error:")
+  ) {
+    return "";
+  }
+
+  return normalized;
+}
+
 function mergeStreamQualityResponse(
   current: StreamConfig,
   response: StreamQualityResponse,

client/src/app/AppShell.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import type { FormEvent } from "react";
+import type { CSSProperties, FormEvent } from "react";
 
 import { sendInspectorRequest } from "../../api/simulators";
 import type {
@@ -21,6 +21,7 @@ import {
   validFrame,
   visibleAccessibilityTreeItems,
 } from "./accessibilityTree";
+import { usePanelPresence } from "../../shared/hooks/usePanelPresence";
 
 interface AccessibilityInspectorProps {
   availableSources: AccessibilitySource[];
@@ -70,6 +71,7 @@ export function AccessibilityInspector({
   const resizeStateRef = useRef<ResizeState | null>(null);
   const panelWidthRef = useRef(panelWidth);
   const detailsHeightRef = useRef(detailsHeight);
+  const { isPresent, panelState } = usePanelPresence(visible);
 
   useEffect(() => {
     panelWidthRef.current = panelWidth;
@@ -197,7 +199,7 @@ export function AccessibilityInspector({
     });
   }, [selectedId]);
 
-  if (!visible) {
+  if (!isPresent) {
     return null;
   }
 
@@ -209,7 +211,11 @@ export function AccessibilityInspector({
   const sourceOptions = hierarchySourceOptions(availableSources, source);
 
   return (
-    <aside className="hierarchy-panel" style={{ width: `${panelWidth}px` }}>
+    <aside
+      className="hierarchy-panel"
+      data-state={panelState}
+      style={{ "--hierarchy-panel-width": `${panelWidth}px` } as CSSProperties}
+    >
       <div className="hierarchy-tools">
         <button
           aria-label="Pick element from simulator"