fix(webapp): resizable inspector panel glitching/locking on Firefox

react-window-splitter drives its collapse animation through
@react-spring/rafz, which has timing/interaction issues in Firefox
that produced visual glitches (alternating frames, panels stuck at
min, panelHasSpace invariant violations). Skip the animation on
Firefox; it works correctly in Chromium and Safari.

Extends the @window-splitter/state patch with three small fixes
that surfaced while debugging:
- Skip auto-collapse-on-drag for parent-controlled panels (avoids a
  state-machine deadlock when the parent has an empty handler).
- Keep collapsible panels in pixel form on commit (avoids CSS
  minmax() flooring percent-typed tracks back up to min).
- Fall back to the panel's default before its min when expanding a
  panel that has never previously been open, so the first span click
  opens the inspector at 500px instead of at min.

On the run-view inspector: bumps min from 50px to 250px so dragging
can't shrink the panel into a near-useless width, and bumps the
panel group's autosaveId v2->v3 so existing users' persisted
snapshots (which have the old 50px min baked in) are invalidated.

Also reverts the speculative snapshot validator added earlier on
this branch -- it didn't address the actual root cause and cost
app-wide panel-size persistence.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: samejr

.server-changes/fix-resizable-panel-stuck.md

@@ -3,4 +3,4 @@ area: webapp
 type: fix
 ---
 
-Fix the run-view inspector panel locking at minimum width on reload when the persisted layout snapshot is in a state the underlying library can't safely restore.
+Fix the run-view inspector panel glitching out and locking up in Firefox. Disabled the underlying resizable library's collapse animation on Firefox (where its `requestAnimationFrame`-driven actor caused visual glitches and intermittent state-machine errors) while keeping it intact for Chromium and Safari, and bumped the inspector minimum from 50px to 250px so dragging can't shrink the panel into a near-useless width.

apps/webapp/app/components/primitives/Resizable.tsx

@@ -4,85 +4,15 @@ import React, { useRef } from "react";
 import { PanelGroup, Panel, PanelResizer } from "react-window-splitter";
 import { cn } from "~/utils/cn";
 
-const ResizablePanelGroup = ({
-  className,
-  autosaveId,
-  snapshot: snapshotProp,
-  ...props
-}: React.ComponentProps<typeof PanelGroup>) => {
-  return (
-    <PanelGroup
-      className={cn(
-        "flex w-full overflow-hidden data-[panel-group-direction=vertical]:flex-col",
-        className
-      )}
-      autosaveId={autosaveId}
-      snapshot={getSafeSnapshot(autosaveId, snapshotProp)}
-      {...props}
-    />
-  );
-};
-
-// react-window-splitter reads the persisted snapshot from localStorage during
-// render and feeds it straight into prepareSnapshot + the state machine. If the
-// value is corrupt (extension interference, JSON parse failure) or in a shape
-// the library can't safely consume on restore — notably items committed with
-// percent-typed currentValues, which trip a `panelHasSpace only works with
-// number values` invariant on the next expand — the panel locks at min size
-// with no working drag.
-//
-// We read the snapshot ourselves with try/catch + structural validation. On
-// failure we pass `true` (the library's sentinel for "snapshot already
-// resolved") so it skips its own localStorage read and falls back to defaults.
-// Pure read — safe to call on every render. PanelGroup captures via useState
-// on first render, so later calls are wasted work but never wrong.
-function getSafeSnapshot(
-  autosaveId: string | undefined,
-  ssrSnapshot: React.ComponentProps<typeof PanelGroup>["snapshot"]
-) {
-  if (typeof window === "undefined") return ssrSnapshot;
-  if (ssrSnapshot && isValidSnapshot(ssrSnapshot)) return ssrSnapshot;
-  if (!autosaveId) return undefined;
-
-  try {
-    const raw = window.localStorage.getItem(autosaveId);
-    if (!raw) return SNAPSHOT_RESOLVED;
-    const parsed: unknown = JSON.parse(raw);
-    if (!isValidSnapshot(parsed)) return SNAPSHOT_RESOLVED;
-    return parsed as React.ComponentProps<typeof PanelGroup>["snapshot"];
-  } catch {
-    return SNAPSHOT_RESOLVED;
-  }
-}
-
-const SNAPSHOT_RESOLVED = true as unknown as React.ComponentProps<typeof PanelGroup>["snapshot"];
-
-function isValidSnapshot(value: unknown): boolean {
-  if (!value || typeof value !== "object") return false;
-  const obj = value as Record<string, unknown>;
-  if (!("status" in obj) || !("context" in obj)) return false;
-  const ctx = obj.context as Record<string, unknown> | null;
-  if (!ctx || typeof ctx !== "object" || !Array.isArray(ctx.items)) return false;
-
-  for (const item of ctx.items) {
-    if (!item || typeof item !== "object") return false;
-    const it = item as Record<string, unknown>;
-    if (it.type !== "panel") continue;
-    const cv = it.currentValue as Record<string, unknown> | null;
-    if (!cv || typeof cv !== "object" || cv.type !== "pixel") return false;
-    // value must parse as a finite number so prepareSnapshot's
-    // `new Big(value)` rehydration can't throw — guards against strings
-    // like "50%" or "" that satisfy typeof but break Big.
-    if (!isFiniteNumeric(cv.value)) return false;
-  }
-  return true;
-}
-
-function isFiniteNumeric(v: unknown): boolean {
-  if (typeof v === "number") return Number.isFinite(v);
-  if (typeof v === "string" && v.trim() !== "") return Number.isFinite(Number(v));
-  return false;
-}
+const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof PanelGroup>) => (
+  <PanelGroup
+    className={cn(
+      "flex w-full overflow-hidden data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+);
 
 const ResizablePanel = Panel;
 
@@ -139,10 +69,14 @@ const ResizableHandle = ({
   </PanelResizer>
 );
 
-const RESIZABLE_PANEL_ANIMATION = {
-  easing: "ease-in-out" as const,
-  duration: 300,
-};
+// react-window-splitter drives the collapse animation through @react-spring/rafz,
+// which has timing/interaction issues with Firefox that produce visual glitches
+// (alternating frames, panels stuck at min, panelHasSpace invariant violations).
+// Disable the animation on Firefox; it works correctly in Chromium and Safari.
+const RESIZABLE_PANEL_ANIMATION =
+  typeof navigator !== "undefined" && /firefox/i.test(navigator.userAgent)
+    ? undefined
+    : ({ easing: "ease-in-out", duration: 300 } as const);
 
 const COLLAPSIBLE_HANDLE_CLASSNAME = "transition-opacity duration-200";
 

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx

@@ -115,7 +115,7 @@ import { SpanView } from "../resources.orgs.$organizationSlug.projects.$projectP
 
 const resizableSettings = {
   parent: {
-    autosaveId: "panel-run-parent-v2",
+    autosaveId: "panel-run-parent-v3",
     handleId: "parent-handle",
     main: {
       id: "run",
@@ -124,7 +124,7 @@ const resizableSettings = {
     inspector: {
       id: "inspector",
       default: "500px" as const,
-      min: "50px" as const,
+      min: "250px" as const,
     },
   },
   tree: {

patches/@window-splitter__state@0.4.1.patch

@@ -1,5 +1,5 @@
 diff --git a/dist/commonjs/index.js b/dist/commonjs/index.js
-index acb542b1b71a7e808173d938d16f45a484334f94..dc9289461b761f8f0d5c72919f48f94e394addfd 100644
+index acb542b1b71a7e808173d938d16f45a484334f94..fd21cccca33c34fdd3563c279aefbd4bb54eef50 100644
 --- a/dist/commonjs/index.js
 +++ b/dist/commonjs/index.js
 @@ -107,6 +107,9 @@ function prepareSnapshot(snapshot) {
@@ -12,8 +12,47 @@ index acb542b1b71a7e808173d938d16f45a484334f94..dc9289461b761f8f0d5c72919f48f94e
          }
          else {
              item.size.value = new big_js_1.default(item.size.value);
+@@ -648,8 +651,12 @@ function updateLayout(context, dragEvent) {
+     }
+     const panelBeforeIsAboutToCollapse = panelBefore.currentValue.value.eq(getUnitPixelValue(context, panelBefore.min));
+     // If the panel was expanded and now is at it's min size, collapse it
++    // Skip auto-collapse-on-drag for controlled panels: the parent owns the
++    // `collapsed` prop and an empty/no-op handler would otherwise leave the
++    // state machine wedged with accumulating dragOvershoot.
+     if (!dragEvent.disregardCollapseBuffer &&
+         panelBefore.collapsible &&
++        !panelBefore.collapseIsControlled &&
+         panelBeforeIsAboutToCollapse) {
+         if (panelBefore.onCollapseChange?.current &&
+             panelBefore.collapseIsControlled &&
+@@ -693,7 +700,10 @@ function commitLayout(context) {
+     });
+     const staticWidth = getStaticWidth({ ...context, items: newItems });
+     newItems.forEach((item, index) => {
+-        if (item.type !== "panel" || item.collapsed || item.isStaticAtRest) {
++        // Skip collapsible panels: they need to stay in pixel form so a fully
++        // collapsed (0px) state doesn't get floored back up to `min` by the
++        // CSS minmax() that buildTemplate emits for percent-typed panels.
++        if (item.type !== "panel" || item.collapsed || item.isStaticAtRest || item.collapsible) {
+             return;
+         }
+         newItems[index] = {
+@@ -821,7 +831,12 @@ function clearLastKnownSize(items) {
+ function getDeltaForEvent(context, event) {
+     const panel = getPanelWithId(context, event.panelId);
+     if (event.type === "expandPanel") {
+-        return new big_js_1.default(panel.sizeBeforeCollapse ?? getUnitPixelValue(context, panel.min)).minus(panel.currentValue.value);
++        // Fall back to `default` before `min` so the first-ever expand of a
++        // panel that started life collapsed lands at its configured default
++        // size rather than getting stuck at `min`.
++        const defaultPx = panel.default ? getUnitPixelValue(context, panel.default) : undefined;
++        const target = panel.sizeBeforeCollapse ?? defaultPx ?? getUnitPixelValue(context, panel.min);
++        return new big_js_1.default(target).minus(panel.currentValue.value);
+     }
+     const collapsedSize = getUnitPixelValue(context, panel.collapsedSize);
+     return panel.currentValue.value.minus(collapsedSize);
 diff --git a/dist/esm/index.js b/dist/esm/index.js
-index 8891ac0141135a3a885bd704d9d443458c7a01bf..34cd7251f2298e7f9bfedfe4cadb797aa790b59a 100644
+index 8891ac0141135a3a885bd704d9d443458c7a01bf..80032b5a852c0117959808cff58b4cbf2b2eee11 100644
 --- a/dist/esm/index.js
 +++ b/dist/esm/index.js
 @@ -81,6 +81,9 @@ export function prepareSnapshot(snapshot) {
@@ -26,3 +65,42 @@ index 8891ac0141135a3a885bd704d9d443458c7a01bf..34cd7251f2298e7f9bfedfe4cadb797a
          }
          else {
              item.size.value = new Big(item.size.value);
+@@ -622,8 +625,12 @@ function updateLayout(context, dragEvent) {
+     }
+     const panelBeforeIsAboutToCollapse = panelBefore.currentValue.value.eq(getUnitPixelValue(context, panelBefore.min));
+     // If the panel was expanded and now is at it's min size, collapse it
++    // Skip auto-collapse-on-drag for controlled panels: the parent owns the
++    // `collapsed` prop and an empty/no-op handler would otherwise leave the
++    // state machine wedged with accumulating dragOvershoot.
+     if (!dragEvent.disregardCollapseBuffer &&
+         panelBefore.collapsible &&
++        !panelBefore.collapseIsControlled &&
+         panelBeforeIsAboutToCollapse) {
+         if (panelBefore.onCollapseChange?.current &&
+             panelBefore.collapseIsControlled &&
+@@ -667,7 +674,10 @@ function commitLayout(context) {
+     });
+     const staticWidth = getStaticWidth({ ...context, items: newItems });
+     newItems.forEach((item, index) => {
+-        if (item.type !== "panel" || item.collapsed || item.isStaticAtRest) {
++        // Skip collapsible panels: they need to stay in pixel form so a fully
++        // collapsed (0px) state doesn't get floored back up to `min` by the
++        // CSS minmax() that buildTemplate emits for percent-typed panels.
++        if (item.type !== "panel" || item.collapsed || item.isStaticAtRest || item.collapsible) {
+             return;
+         }
+         newItems[index] = {
+@@ -795,7 +805,12 @@ function clearLastKnownSize(items) {
+ function getDeltaForEvent(context, event) {
+     const panel = getPanelWithId(context, event.panelId);
+     if (event.type === "expandPanel") {
+-        return new Big(panel.sizeBeforeCollapse ?? getUnitPixelValue(context, panel.min)).minus(panel.currentValue.value);
++        // Fall back to `default` before `min` so the first-ever expand of a
++        // panel that started life collapsed lands at its configured default
++        // size rather than getting stuck at `min`.
++        const defaultPx = panel.default ? getUnitPixelValue(context, panel.default) : undefined;
++        const target = panel.sizeBeforeCollapse ?? defaultPx ?? getUnitPixelValue(context, panel.min);
++        return new Big(target).minus(panel.currentValue.value);
+     }
+     const collapsedSize = getUnitPixelValue(context, panel.collapsedSize);
+     return panel.currentValue.value.minus(collapsedSize);