Fix webhonc urls and make trace view panels resizable

api/src/lib/settings/index.ts

@@ -69,9 +69,8 @@ function normalize(value: string): boolean | number | string {
   if (lowerValue === "false" || lowerValue === "0" || lowerValue === "0.0")
     return false;
 
-  // Check for hexadecimal values - return them as strings
-  const hexRegex = /^0x[0-9A-Fa-f]+$/;
-  if (hexRegex.test(value)) {
+  // Check for any letter
+  if (/[a-zA-Z]/.test(value)) {
     return value;
   }
 

frontend/package.json

@@ -58,6 +58,7 @@
     "react-hotkeys-hook": "^4.5.0",
     "react-markdown": "^9.0.1",
     "react-resizable": "^3.0.5",
+    "react-resizable-panels": "^2.0.23",
     "react-router-dom": "^6.23.1",
     "react-use-websocket": "^4.8.1",
     "sql-formatter": "^15.3.2",

frontend/src/components/ui/resizable.tsx

@@ -0,0 +1,43 @@
+import { DragHandleDots2Icon } from "@radix-ui/react-icons";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "@/utils";
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className,
+    )}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className,
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

frontend/src/pages/RequestDetailsPage/RequestDetailsPageV2/RequestDetailsPageV2Content.tsx

@@ -7,6 +7,11 @@ import {
 
 import { KeyboardShortcutKey } from "@/components/KeyboardShortcut";
 import { Button } from "@/components/ui/button";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
 import { MizuOrphanLog } from "@/queries";
 import { OtelSpan } from "@/queries/traces-otel";
 import { cn } from "@/utils";
@@ -147,23 +152,28 @@ export function RequestDetailsPageContentV2({
       </div>
       <div className={cn("grid grid-rows-[auto_1fr] gap-4")}>
         <SummaryV2 requestSpan={rootSpan.span} />
-        <div className="grid lg:grid-cols-[auto_1fr] border-t">
-          <div
+        <ResizablePanelGroup
+          direction="horizontal"
+          className={cn("grid grid-rows-[auto_1fr] w-full border-t")}
+        >
+          <ResizablePanel
+            defaultSize={20}
             className={cn(
               "hidden",
               "lg:block lg:sticky lg:top-4 self-start",
               "min-w-[300px]",
-              "xl:min-w-[360px]",
-              "2xl:min-w-[420px]",
+              "xl:min-w-[260px]",
+              "2xl:min-w-[320px]",
             )}
           >
             <TraceDetailsTimeline waterfall={waterfall} />
-          </div>
-          <div
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel
             className={cn(
               "grid items-center gap-4 overflow-x-auto relative",
+              "w-full",
               "max-lg:grid-rows-[auto_1fr]",
-              "lg:border-l",
               "lg:items-start",
               "lg:p-4",
             )}
@@ -172,8 +182,8 @@ export function RequestDetailsPageContentV2({
               <TraceDetailsTimeline waterfall={waterfall} />
             </div>
             <TraceDetailsV2 waterfall={waterfall} />
-          </div>
-        </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
       </div>
     </div>
   );