Add the ability to replay requests from the details view

studio/src/components/CountBadge.tsx

@@ -1,6 +1,15 @@
 export const CountBadge = ({ count }: { count: number }) => {
   return (
-    <span className="text-gray-400 font-normal bg-muted-foreground/20 rounded px-1.5 inline-block ml-2">
+    <span
+      className="text-gray-400
+    font-normal
+    bg-muted-foreground/20
+    rounded
+    px-1.5
+    inline-block
+    min-w-5
+    "
+    >
       {count}
     </span>
   );

studio/src/pages/RequestDetailsPage/RequestDetailsPageV2/Otel.tsx

@@ -50,6 +50,7 @@ export function Otel({
 
   return (
     <RequestDetailsPageContentV2
+      traceId={traceId}
       spans={spans}
       orphanLogs={orphanLogs}
       pagination={pagination}

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

@@ -13,9 +13,17 @@ import {
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
 import type { MizuOrphanLog } from "@/queries";
-import type { OtelSpan } from "@/queries/traces-otel";
-import { cn } from "@/utils";
+import { type OtelSpan, useOtelTraces } from "@/queries/traces-otel";
+import { cn, isMac } from "@/utils";
+import { useRef } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { Link } from "react-router-dom";
 import { EmptyState } from "../EmptyState";
+import {
+  useMostRecentRequest,
+  useReplayRequest,
+  useShouldReplay,
+} from "../hooks";
 import { TraceDetailsTimeline, TraceDetailsV2 } from "../v2";
 import { HttpSummary, SummaryV2 } from "../v2/SummaryV2";
 import type { getVendorInfo } from "../v2/vendorify-traces";
@@ -31,10 +39,12 @@ export type Waterfall = Array<SpanWithVendorInfo | MizuOrphanLog>;
 const EMPTY_LIST: Array<MizuOrphanLog> = [];
 
 export function RequestDetailsPageContentV2({
+  traceId,
   pagination,
   spans,
   orphanLogs = EMPTY_LIST,
 }: {
+  traceId: string;
   spans: Array<OtelSpan>;
   orphanLogs?: Array<MizuOrphanLog>;
   pagination?: {
@@ -44,8 +54,29 @@ export function RequestDetailsPageContentV2({
     handleNextTrace: () => void;
   };
 }) {
+  const currentTrace = {
+    traceId,
+    spans,
+  };
+  const { data: traces } = useOtelTraces();
+
+  const { isMostRecentTrace, traceId: mostRecentTraceId } =
+    useMostRecentRequest(currentTrace, traces);
+
   const { rootSpan, waterfall } = useRequestWaterfall(spans, orphanLogs);
 
+  const shouldReplay = useShouldReplay(currentTrace);
+
+  const { replay, isReplaying } = useReplayRequest({ span: rootSpan?.span });
+
+  const replayRef = useRef<HTMLButtonElement>(null);
+
+  useHotkeys(["mod+enter"], () => {
+    if (replayRef.current && shouldReplay) {
+      replayRef.current.click();
+    }
+  });
+
   if (!rootSpan) {
     return <EmptyState />;
   }
@@ -76,48 +107,97 @@ export function RequestDetailsPageContentV2({
             <HttpSummary trace={rootSpan.span} />
           </div>
         </div>
-        {pagination && (
-          <div className="flex gap-2">
+        <div className="flex gap-2 items-center">
+          {!isMostRecentTrace && (
+            <Link
+              className="text-blue-600 pr-4"
+              to={`/requests/otel/${mostRecentTraceId}`}
+            >
+              View most recent response ↗
+            </Link>
+          )}
+          {shouldReplay && (
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
-                  variant="secondary"
-                  size="icon"
-                  disabled={pagination.currentIndex === 0}
-                  onClick={pagination.handlePrevTrace}
+                  variant="default"
+                  disabled={isReplaying}
+                  onClick={replay}
+                  ref={replayRef}
                 >
-                  <ChevronUpIcon className="w-4 h-4" />
+                  Replay
                 </Button>
               </TooltipTrigger>
               <TooltipContent
                 side="left"
-                className="bg-slate-950 text-white"
+                sideOffset={15}
+                className={cn(
+                  "bg-slate-900 ",
+                  "text-muted-foreground",
+                  "px-2",
+                  "py-1.5",
+                  "gap-1.5",
+                  "text-sm",
+                  "flex",
+                  "items-center",
+                )}
                 align="center"
               >
-                Prev <KeyboardShortcutKey>K</KeyboardShortcutKey>
+                <p>Replay request</p>
+                <div className="flex gap-1">
+                  <KeyboardShortcutKey>
+                    {isMac ? "⌘" : "Ctrl"}
+                  </KeyboardShortcutKey>{" "}
+                  <KeyboardShortcutKey>Enter</KeyboardShortcutKey>
+                </div>
               </TooltipContent>
             </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="secondary"
-                  size="icon"
-                  disabled={pagination.currentIndex === pagination.maxIndex}
-                  onClick={pagination.handleNextTrace}
+          )}
+          {pagination && (
+            <div className="flex gap-2">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    disabled={pagination.currentIndex === 0}
+                    onClick={pagination.handlePrevTrace}
+                  >
+                    <ChevronUpIcon className="w-4 h-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="left"
+                  className="bg-slate-900 text-white px-2 py-1.5 gap-1.5"
+                  align="center"
                 >
-                  <ChevronDownIcon className="w-4 h-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent
-                side="bottom"
-                className="bg-slate-950 text-white"
-                align="center"
-              >
-                Next <KeyboardShortcutKey>J</KeyboardShortcutKey>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        )}
+                  <p>Prev</p>
+                  <KeyboardShortcutKey>K</KeyboardShortcutKey>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    disabled={pagination.currentIndex === pagination.maxIndex}
+                    onClick={pagination.handleNextTrace}
+                  >
+                    <ChevronDownIcon className="w-4 h-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="bottom"
+                  className="bg-slate-900 text-white px-2 py-1.5 gap-1.5"
+                  align="center"
+                >
+                  <p>Next</p>
+                  <KeyboardShortcutKey>J</KeyboardShortcutKey>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          )}
+        </div>
       </div>
       <div className={cn("grid grid-rows-[auto_1fr] gap-4")}>
         <SummaryV2 requestSpan={rootSpan.span} />

studio/src/pages/RequestDetailsPage/hooks/index.ts

@@ -1,2 +1,5 @@
 export { useEscapeToList } from "./useNavigateToList";
 export { usePagination } from "./usePagination";
+export { useReplayRequest } from "./useReplayRequest";
+export { useMostRecentRequest } from "./useMostRecentRequest";
+export { useShouldReplay } from "./useShouldReplay";

studio/src/pages/RequestDetailsPage/hooks/useMostRecentRequest.ts

@@ -0,0 +1,57 @@
+import type { OtelTrace } from "@/queries";
+import { getRequestPath, isFpxRequestSpan } from "../v2/otel-helpers";
+
+export function useMostRecentRequest(
+  currentTrace: OtelTrace,
+  traces?: OtelTrace[] | null,
+) {
+  if (!traces) {
+    console.debug("Traces are null");
+    return {
+      isMostRecentTrace: true,
+      traceId: currentTrace.traceId,
+    };
+  }
+
+  const currentTraceIndex = traces.findIndex(
+    (trace) => trace.traceId === currentTrace.traceId,
+  );
+
+  if (currentTraceIndex === -1) {
+    console.debug("Current trace not found in traces array");
+    return {
+      isMostRecentTrace: true,
+      traceId: currentTrace.traceId,
+    };
+  }
+
+  const currentRequestSpan = currentTrace.spans.find(isFpxRequestSpan);
+
+  if (!currentRequestSpan) {
+    console.debug("No request span found in current trace");
+    return {
+      isMostRecentTrace: true,
+      traceId: currentTrace.traceId,
+    };
+  }
+
+  const currentPath = getRequestPath(currentRequestSpan);
+
+  const mostRecentTrace = traces
+    .slice(0, currentTraceIndex + 1)
+    .find((trace) => {
+      const requestSpan = trace.spans.find(isFpxRequestSpan);
+
+      if (requestSpan) {
+        const tracePath = getRequestPath(requestSpan);
+        return tracePath === currentPath;
+      }
+
+      return false;
+    });
+
+  return {
+    isMostRecentTrace: mostRecentTrace?.traceId === currentTrace.traceId,
+    traceId: mostRecentTrace?.traceId || currentTrace.traceId,
+  };
+}

studio/src/pages/RequestDetailsPage/hooks/usePagination.ts

@@ -1,4 +1,4 @@
-import { useHandler } from "@fiberplane/hooks";
+import { useCallback } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useNavigate } from "react-router-dom";
 
@@ -16,7 +16,7 @@ export function usePagination({
   const navigate = useNavigate();
   const currentIndex = findIndex(traceId) || 0;
 
-  const handleNextTrace = useHandler(() => {
+  const handleNextTrace = useCallback(() => {
     if (currentIndex === undefined) {
       return;
     }
@@ -27,20 +27,19 @@ export function usePagination({
 
     const route = getTraceRoute(currentIndex + 1);
     navigate(route);
-  });
+  }, [currentIndex, navigate, getTraceRoute, maxIndex]);
 
-  const handlePrevTrace = useHandler(() => {
+  const handlePrevTrace = useCallback(() => {
     if (currentIndex === undefined) {
       return;
     }
-
     if (currentIndex === 0) {
       return;
     }
 
     const route = getTraceRoute(currentIndex - 1);
     navigate(route);
-  });
+  }, [currentIndex, navigate, getTraceRoute]);
 
   useHotkeys(["J"], () => {
     handleNextTrace();