fix(streams): fixed broken wrapping in streams inspector (#2672)

Author: ericallam

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

@@ -199,8 +199,11 @@ export function RealtimeStreamViewer({
 
   // Auto-scroll to bottom when new chunks arrive, if we're at the bottom
   useEffect(() => {
-    if (isAtBottom && bottomRef.current) {
-      bottomRef.current.scrollIntoView({ behavior: "instant", block: "end" });
+    if (isAtBottom && scrollRef.current) {
+      // Preserve horizontal scroll position while scrolling to bottom vertically
+      const currentScrollLeft = scrollRef.current.scrollLeft;
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+      scrollRef.current.scrollLeft = currentScrollLeft;
     }
   }, [chunks, isAtBottom]);
 
@@ -340,7 +343,7 @@ export function RealtimeStreamViewer({
       {/* Content */}
       <div
         ref={scrollRef}
-        className="flex-1 overflow-y-auto bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        className="flex-1 overflow-x-auto overflow-y-auto bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
       >
         {error && (
           <div className="border-b border-error/20 bg-error/10 p-3">
@@ -372,8 +375,8 @@ export function RealtimeStreamViewer({
             <div
               style={{
                 height: `${rowVirtualizer.getTotalSize()}px`,
-                width: "100%",
                 position: "relative",
+                minWidth: "100%",
               }}
             >
               {rowVirtualizer.getVirtualItems().map((virtualItem) => (
@@ -452,12 +455,11 @@ function StreamChunkLine({
 
   return (
     <div
-      className="group flex w-full gap-3 py-1 hover:bg-charcoal-800"
+      className="group flex gap-3 py-1 hover:bg-charcoal-800"
       style={{
         position: "absolute",
         top: 0,
         left: 0,
-        width: "100%",
         height: `${size}px`,
         transform: `translateY(${start}px)`,
       }}
@@ -471,10 +473,10 @@ function StreamChunkLine({
       </div>
 
       {/* Timestamp */}
-      <div className="flex-none select-none text-charcoal-500">{timestamp}</div>
+      <div className="flex-none select-none pl-1 text-charcoal-500">{timestamp}</div>
 
       {/* Content */}
-      <div className="min-w-0 flex-1 break-all text-text-bright">{formattedData}</div>
+      <div className="whitespace-nowrap text-text-bright">{formattedData}</div>
     </div>
   );
 }

references/realtime-streams/src/app/actions.ts

@@ -31,12 +31,14 @@ export async function triggerStreamTask(
     }
   );
 
-  console.log("Triggered run:", handle.id);
-
   // Redirect to custom path or default run page
   const path = redirectPath
-    ? `${redirectPath}/${handle.id}?accessToken=${handle.publicAccessToken}`
-    : `/runs/${handle.id}?accessToken=${handle.publicAccessToken}`;
+    ? `${redirectPath}/${handle.id}?accessToken=${handle.publicAccessToken}&isMarkdown=${
+        scenario === "markdown" ? "true" : "false"
+      }`
+    : `/runs/${handle.id}?accessToken=${handle.publicAccessToken}&isMarkdown=${
+        scenario === "markdown" ? "true" : "false"
+      }`;
 
   redirect(path);
 }

references/realtime-streams/src/app/runs/[runId]/page.tsx

@@ -6,10 +6,11 @@ export default function RunPage({
   searchParams,
 }: {
   params: { runId: string };
-  searchParams: { accessToken?: string };
+  searchParams: { accessToken?: string; isMarkdown?: string };
 }) {
   const { runId } = params;
   const accessToken = searchParams.accessToken;
+  const isMarkdown = searchParams.isMarkdown === "true";
 
   if (!accessToken) {
     return (
@@ -49,7 +50,7 @@ export default function RunPage({
         </div>
 
         <div className="w-full border border-gray-200 rounded-lg p-6 bg-white">
-          <Streams accessToken={accessToken} runId={runId} />
+          <Streams accessToken={accessToken} runId={runId} isMarkdown={isMarkdown} />
         </div>
       </main>
     </div>

references/realtime-streams/src/components/streams.tsx

@@ -4,12 +4,20 @@ import { useRealtimeStream } from "@trigger.dev/react-hooks";
 import { Streamdown } from "streamdown";
 import { demoStream } from "@/app/streams";
 
-export function Streams({ accessToken, runId }: { accessToken: string; runId: string }) {
+export function Streams({
+  accessToken,
+  runId,
+  isMarkdown,
+}: {
+  accessToken: string;
+  runId: string;
+  isMarkdown: boolean;
+}) {
   const { parts, error } = useRealtimeStream(demoStream, runId, {
     accessToken,
     baseURL: process.env.NEXT_PUBLIC_TRIGGER_API_URL,
     onData: (data) => {
-      console.log(data);
+      // console.log(data);
     },
     timeoutInSeconds: 600,
   });
@@ -26,7 +34,7 @@ export function Streams({ accessToken, runId }: { accessToken: string; runId: st
         <span className="font-semibold">Run:</span> {runId}
       </div>
       <div className="prose prose-sm max-w-none text-gray-900">
-        <Streamdown isAnimating={true}>{stream}</Streamdown>
+        {isMarkdown ? <Streamdown isAnimating={true}>{stream}</Streamdown> : stream}
       </div>
     </div>
   );