Improved run page and replaying

.changeset/fast-melons-listen.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/core": patch
+---
+
+Added version to ctx.run

apps/webapp/app/components/admin/debugTooltip.tsx

@@ -1,12 +1,18 @@
+import * as Property from "~/components/primitives/PropertyTable";
 import { ShieldCheckIcon } from "@heroicons/react/20/solid";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "~/components/primitives/Tooltip";
-import { useIsImpersonating } from "~/hooks/useOrganizations";
-import { useHasAdminAccess } from "~/hooks/useUser";
+import {
+  useIsImpersonating,
+  useOptionalOrganization,
+  useOrganization,
+} from "~/hooks/useOrganizations";
+import { useOptionalProject, useProject } from "~/hooks/useProject";
+import { useHasAdminAccess, useUser } from "~/hooks/useUser";
 
 export function AdminDebugTooltip({ children }: { children: React.ReactNode }) {
   const hasAdminAccess = useHasAdminAccess();
@@ -22,10 +28,46 @@ export function AdminDebugTooltip({ children }: { children: React.ReactNode }) {
         <TooltipTrigger>
           <ShieldCheckIcon className="size-5" />
         </TooltipTrigger>
-        <TooltipContent className="flex max-h-[90vh] items-center gap-1 overflow-y-auto">
-          {children}
+        <TooltipContent className="max-h-[90vh] overflow-y-auto">
+          <Content>{children}</Content>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );
 }
+
+function Content({ children }: { children: React.ReactNode }) {
+  const organization = useOptionalOrganization();
+  const project = useOptionalProject();
+  const user = useUser();
+
+  return (
+    <div className="flex flex-col gap-2 divide-y divide-slate-700">
+      <Property.Table>
+        <Property.Item>
+          <Property.Label>User ID</Property.Label>
+          <Property.Value>{user.id}</Property.Value>
+        </Property.Item>
+        {organization && (
+          <Property.Item>
+            <Property.Label>Org ID</Property.Label>
+            <Property.Value>{organization.id}</Property.Value>
+          </Property.Item>
+        )}
+        {project && (
+          <>
+            <Property.Item>
+              <Property.Label>Project ID</Property.Label>
+              <Property.Value>{project.id}</Property.Value>
+            </Property.Item>
+            <Property.Item>
+              <Property.Label>Project ref</Property.Label>
+              <Property.Value>{project.ref}</Property.Value>
+            </Property.Item>
+          </>
+        )}
+      </Property.Table>
+      <div className="pt-2">{children}</div>
+    </div>
+  );
+}

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

@@ -241,16 +241,12 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                 onMouseEnter={() => setMouseOver(true)}
                 onMouseLeave={() => setMouseOver(false)}
                 className={cn(
-                  "absolute  right-3 z-50 transition-colors duration-100 hover:cursor-pointer",
-                  showChrome ? "top-10" : "top-3",
+                  "absolute right-3 z-50 transition-colors duration-100 hover:cursor-pointer",
+                  showChrome ? "top-10" : "top-2.5",
                   copied ? "text-emerald-500" : "text-charcoal-500 hover:text-charcoal-300"
                 )}
               >
-                {copied ? (
-                  <ClipboardCheck className="h-5 w-5" />
-                ) : (
-                  <Clipboard className="h-5 w-5" />
-                )}
+                {copied ? <ClipboardCheck className="size-4" /> : <Clipboard className="size-4" />}
               </TooltipTrigger>
               <TooltipContent side="left" className="text-xs">
                 {copied ? "Copied" : "Copy"}
@@ -391,8 +387,8 @@ function Chrome({ title }: { title?: string }) {
 
 export function TitleRow({ title }: { title: string }) {
   return (
-    <div className="flex items-center justify-between px-4">
-      <Paragraph variant="base/bright" className="w-full border-b border-grid-dimmed py-2.5">
+    <div className="flex items-center justify-between px-3">
+      <Paragraph variant="small/bright" className="w-full border-b border-grid-dimmed py-2">
         {title}
       </Paragraph>
     </div>

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

@@ -107,39 +107,51 @@ export function JSONEditor(opts: JSONEditorProps) {
     }, 1500);
   }, [view]);
 
+  const showButtons = showClearButton || showCopyButton;
+
   return (
-    <div className={cn(opts.className, "grid grid-rows-[2.5rem_1fr]")}>
-      <div className="mx-3 flex items-center justify-end gap-2 border-b border-grid-dimmed">
-        {showClearButton && (
-          <Button
-            type="button"
-            variant="minimal/small"
-            TrailingIcon={TrashIcon}
-            onClick={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              clear();
-            }}
-          >
-            Clear
-          </Button>
-        )}
-        {showCopyButton && (
-          <Button
-            type="button"
-            variant="minimal/small"
-            TrailingIcon={copied ? CheckIcon : ClipboardIcon}
-            trailingIconClassName={copied ? "text-green-500 group-hover:text-green-500" : undefined}
-            onClick={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              copy();
-            }}
-          >
-            Copy
-          </Button>
-        )}
-      </div>
+    <div
+      className={cn(
+        opts.className,
+        "grid",
+        showButtons ? "grid-rows-[2.5rem_1fr]" : "grid-rows-[1fr]"
+      )}
+    >
+      {showButtons && (
+        <div className="mx-3 flex items-center justify-end gap-2 border-b border-grid-dimmed">
+          {showClearButton && (
+            <Button
+              type="button"
+              variant="minimal/small"
+              TrailingIcon={TrashIcon}
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                clear();
+              }}
+            >
+              Clear
+            </Button>
+          )}
+          {showCopyButton && (
+            <Button
+              type="button"
+              variant="minimal/small"
+              TrailingIcon={copied ? CheckIcon : ClipboardIcon}
+              trailingIconClassName={
+                copied ? "text-green-500 group-hover:text-green-500" : undefined
+              }
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                copy();
+              }}
+            >
+              Copy
+            </Button>
+          )}
+        </div>
+      )}
       <div
         className="w-full overflow-auto"
         ref={editor}

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

@@ -10,6 +10,7 @@ import { LoadingBarDivider } from "./LoadingBarDivider";
 import { NamedIcon } from "./NamedIcon";
 import { Paragraph } from "./Paragraph";
 import { Tabs, TabsProps } from "./Tabs";
+import { ReactNode } from "react";
 
 type WithChildren = {
   children: React.ReactNode;
@@ -34,7 +35,7 @@ export function NavBar({ children }: WithChildren) {
 }
 
 type PageTitleProps = {
-  title: string;
+  title: ReactNode;
   backButton?: {
     to: string;
     text: string;

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

@@ -1,40 +1,31 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 import { Paragraph } from "./Paragraph";
 import { cn } from "~/utils/cn";
 
-export function PropertyTable({
-  children,
-  className,
-}: {
+type ChildrenClassName = {
   children: ReactNode;
   className?: string;
-}) {
-  return (
-    <div className={cn("grid grid-cols-[auto,1fr] items-center gap-x-4 gap-y-2", className)}>
-      {children}
-    </div>
-  );
+};
+
+function PropertyTable({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn("flex flex-col gap-y-3", className)}>{children}</div>;
 }
 
-export type PropertyProps = {
-  label: ReactNode;
-  labelClassName?: string;
-  children: ReactNode;
-};
+function PropertyItem({ children, className }: ChildrenClassName) {
+  return <div className={cn("flex flex-col gap-0 text-sm", className)}>{children}</div>;
+}
 
-export function Property({ label, labelClassName, children }: PropertyProps) {
-  return (
-    <>
-      <div className={labelClassName}>
-        {typeof label === "string" ? <Paragraph variant="small">{label}</Paragraph> : label}
-      </div>
-      <div>
-        {typeof children === "string" ? (
-          <Paragraph variant="small/bright">{children}</Paragraph>
-        ) : (
-          children
-        )}
-      </div>
-    </>
-  );
+function PropertyLabel({ children, className }: ChildrenClassName) {
+  return <div className={cn("font-medium text-text-bright", className)}>{children}</div>;
 }
+
+function PropertyValue({ children, className }: ChildrenClassName) {
+  return <div className={cn("text-text-dimmed", className)}>{children}</div>;
+}
+
+export {
+  PropertyTable as Table,
+  PropertyItem as Item,
+  PropertyLabel as Label,
+  PropertyValue as Value,
+};