feat: use clientLoader + localStorage for resizable panel persistence

Replace server-side cookie reading (getResizableSnapshot) with client-side
localStorage for persisting resizable panel sizes. Cookies were hitting the
~4KB size limit; localStorage supports 5-10MB.

- Run detail route: uses Remix clientLoader with hydrate=true to read panel
  snapshots from localStorage before first render
- Prompts route: returns undefined for snapshots, letting the
  react-window-splitter library read from localStorage natively via
  autosaveStrategy="localStorage"

Co-Authored-By: Eric Allam <eallam@icloud.com>

Author: devin-ai-integration[bot]

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

@@ -71,7 +71,6 @@ import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { type GenerationRow, PromptPresenter } from "~/presenters/v3/PromptPresenter.server";
 import { SpanView } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route";
 import { clickhouseClient } from "~/services/clickhouseInstance.server";
-import { getResizableSnapshot } from "~/services/resizablePanel.server";
 import { requireUserId } from "~/services/session.server";
 import { PromptService } from "~/v3/services/promptService.server";
 
@@ -271,7 +270,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     console.error("Prompt generations query exception:", e);
   }
 
-  // Load distinct filter values and resizable snapshots in parallel
+  // Load distinct filter values in parallel
   const distinctQuery = (col: string, name: string) =>
     clickhouseClient.reader.query({
       name,
@@ -281,16 +280,10 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     })({ environmentId: environment.id, promptSlug: prompt.slug });
 
   const [
-    resizableOuter,
-    resizableVertical,
-    resizableGenerations,
     [modelsErr, modelsRows],
     [opsErr, opsRows],
     [provsErr, provsRows],
   ] = await Promise.all([
-    getResizableSnapshot(request, "prompt-detail"),
-    getResizableSnapshot(request, "prompt-vertical"),
-    getResizableSnapshot(request, "prompt-generations"),
     distinctQuery("response_model", "promptDistinctModels"),
     distinctQuery("operation_id", "promptDistinctOperations"),
     distinctQuery("gen_ai_system", "promptDistinctProviders"),
@@ -302,9 +295,9 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   return typedjson({
     resizable: {
-      outer: resizableOuter,
-      vertical: resizableVertical,
-      generations: resizableGenerations,
+      outer: undefined as ResizableSnapshot | undefined,
+      vertical: undefined as ResizableSnapshot | undefined,
+      generations: undefined as ResizableSnapshot | undefined,
     },
     prompt: {
       id: prompt.id,

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

@@ -12,7 +12,7 @@ import {
   StopCircleIcon,
 } from "@heroicons/react/20/solid";
 
-import { useLoaderData, useRevalidator } from "@remix-run/react";
+import { type ClientLoaderFunctionArgs, useLoaderData, useRevalidator } from "@remix-run/react";
 import { type LoaderFunctionArgs, type SerializeFrom, json } from "@remix-run/server-runtime";
 import { type Virtualizer } from "@tanstack/react-virtual";
 import {
@@ -95,7 +95,6 @@ import { RunEnvironmentMismatchError, RunPresenter } from "~/presenters/v3/RunPr
 import { clickhouseClient } from "~/services/clickhouseInstance.server";
 import { getImpersonationId } from "~/services/impersonation.server";
 import { logger } from "~/services/logger.server";
-import { getResizableSnapshot } from "~/services/resizablePanel.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
 import { lerp } from "~/utils/lerp";
@@ -279,10 +278,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     throw error;
   }
 
-  //resizable settings
-  const parent = await getResizableSnapshot(request, resizableSettings.parent.autosaveId);
-  const tree = await getResizableSnapshot(request, resizableSettings.tree.autosaveId);
-
   const runsList = await getRunsListFromTableState({
     tableStateParam: url.searchParams.get("tableState"),
     organizationSlug,
@@ -297,13 +292,40 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     trace: result.trace,
     maximumLiveReloadingSetting: result.maximumLiveReloadingSetting,
     resizable: {
-      parent,
-      tree,
+      parent: undefined as ResizableSnapshot | undefined,
+      tree: undefined as ResizableSnapshot | undefined,
     },
     runsList,
   });
 };
 
+function getLocalStorageSnapshot(key: string): ResizableSnapshot | undefined {
+  try {
+    const raw = localStorage.getItem(key);
+    if (raw) {
+      const parsed: unknown = JSON.parse(raw);
+      if (parsed != null && typeof parsed === "object" && "status" in parsed) {
+        return parsed as ResizableSnapshot;
+      }
+    }
+  } catch {
+    // Silently ignore localStorage errors
+  }
+  return undefined;
+}
+
+export async function clientLoader({ serverLoader }: ClientLoaderFunctionArgs) {
+  const serverData = await serverLoader<typeof loader>();
+  return {
+    ...serverData,
+    resizable: {
+      parent: getLocalStorageSnapshot(resizableSettings.parent.autosaveId),
+      tree: getLocalStorageSnapshot(resizableSettings.tree.autosaveId),
+    },
+  };
+}
+clientLoader.hydrate = true as const;
+
 type LoaderData = SerializeFrom<typeof loader>;
 
 export default function Page() {