ElectricSQL run page and react-window-splitter

.env.example

@@ -10,6 +10,7 @@ DIRECT_URL=${DATABASE_URL}
 REMIX_APP_PORT=3030
 APP_ENV=development
 APP_ORIGIN=http://localhost:3030
+ELECTRIC_ORIGIN=http://localhost:3060
 NODE_ENV=development
 V3_ENABLED=true
 

apps/webapp/app/components/code/CodeBlock.tsx

@@ -1,7 +1,7 @@
 import { Clipboard, ClipboardCheck } from "lucide-react";
 import type { Language, PrismTheme } from "prism-react-renderer";
 import { Highlight, Prism } from "prism-react-renderer";
-import { forwardRef, useCallback, useState } from "react";
+import { forwardRef, ReactNode, useCallback, useState } from "react";
 import { cn } from "~/utils/cn";
 import { Paragraph } from "../primitives/Paragraph";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
@@ -385,7 +385,7 @@ function Chrome({ title }: { title?: string }) {
   );
 }
 
-export function TitleRow({ title }: { title: string }) {
+export function TitleRow({ title }: { title: ReactNode }) {
   return (
     <div className="flex items-center justify-between px-3">
       <Paragraph variant="small/bright" className="w-full border-b border-grid-dimmed py-2">

apps/webapp/app/components/code/InlineCode.tsx

@@ -1,7 +1,7 @@
 import { cn } from "~/utils/cn";
 
 const inlineCode =
-  "px-1 py-0.5 rounded border border-charcoal-700 bg-charcoal-800 text-charcoal-200 font-mono";
+  "px-1 py-0.5 rounded border border-charcoal-700 bg-charcoal-800 text-charcoal-200 font-mono text-wrap";
 
 const variants = {
   "extra-extra-small": "text-xxs",

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

@@ -1,32 +1,35 @@
 "use client";
 
-import * as ResizablePrimitive from "react-resizable-panels";
+import React from "react";
+import { PanelGroup, Panel, PanelResizer } from "react-window-splitter";
 import { cn } from "~/utils/cn";
 
-const ResizablePanelGroup = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn("flex w-full data-[panel-group-direction=vertical]:flex-col", className)}
+const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof PanelGroup>) => (
+  <PanelGroup
+    className={cn(
+      "flex w-full overflow-hidden data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    autosaveStrategy={props.autosaveId ? "cookie" : undefined}
     {...props}
   />
 );
 
-const ResizablePanel = ResizablePrimitive.Panel;
+const ResizablePanel = Panel;
 
 const ResizableHandle = ({
-  withHandle,
+  withHandle = true,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: React.ComponentProps<typeof PanelResizer> & {
   withHandle?: boolean;
 }) => (
-  <ResizablePrimitive.PanelResizeHandle
+  <PanelResizer
     className={cn(
-      "focus-visible:ring-ring group relative flex w-0.75 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 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 hover:w-0.75 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      "focus-visible:ring-ring group relative flex w-0.75 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 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 hover:w-0.75 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary/50 focus-visible:ring-offset-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
       className
     )}
+    size="3px"
     {...props}
   >
     <div className="absolute left-[0.0625rem] top-0 h-full w-px bg-grid-bright transition group-hover:left-0 group-hover:w-0.75 group-hover:bg-lavender-500" />
@@ -37,7 +40,9 @@ const ResizableHandle = ({
         ))}
       </div>
     )}
-  </ResizablePrimitive.PanelResizeHandle>
+  </PanelResizer>
 );
 
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
+
+export type ResizableSnapshot = React.ComponentProps<typeof PanelGroup>["snapshot"];

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

@@ -241,7 +241,7 @@ export function useTree<TData, TFilterValue>({
         index,
       });
     },
-    overscan: 20,
+    overscan: 50,
   });
 
   const scrollToNodeFn = useCallback(

apps/webapp/app/components/runs/v3/InspectorTimeline.tsx

@@ -0,0 +1,63 @@
+import { ReactNode } from "react";
+import { cn } from "~/utils/cn";
+
+type RunTimelineItemProps = {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  state: "complete" | "error";
+};
+
+export function RunTimelineEvent({ title, subtitle, state }: RunTimelineItemProps) {
+  return (
+    <div className="grid h-5 grid-cols-[1.125rem_1fr] text-sm">
+      <div className="flex items-center justify-center">
+        <div
+          className={cn(
+            "size-[0.3125rem] rounded-full",
+            state === "complete" ? "bg-success" : "bg-error"
+          )}
+        ></div>
+      </div>
+      <div className="flex items-baseline justify-between gap-3">
+        <span className="font-medium text-text-bright">{title}</span>
+        {subtitle ? <span className="text-xs text-text-dimmed">{subtitle}</span> : null}
+      </div>
+    </div>
+  );
+}
+
+type RunTimelineLineProps = {
+  title: ReactNode;
+  state: "complete" | "delayed" | "inprogress";
+};
+
+export function RunTimelineLine({ title, state }: RunTimelineLineProps) {
+  return (
+    <div className="grid h-6 grid-cols-[1.125rem_1fr] text-xs">
+      <div className="flex items-stretch justify-center">
+        <div
+          className={cn(
+            "w-px",
+            state === "complete" ? "bg-success" : state === "delayed" ? "bg-text-dimmed" : ""
+          )}
+          style={
+            state === "inprogress"
+              ? {
+                  width: "1px",
+                  height: "100%",
+                  background:
+                    "repeating-linear-gradient(to bottom, #3B82F6 0%, #3B82F6 50%, transparent 50%, transparent 100%)",
+                  backgroundSize: "1px 6px",
+                  maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+                  WebkitMaskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+                }
+              : undefined
+          }
+        ></div>
+      </div>
+      <div className="flex items-center justify-between gap-3">
+        <span className="text-text-dimmed">{title}</span>
+      </div>
+    </div>
+  );
+}