Streaming output and webhook-based completion when run in workflow

examples/workflow-code-runner/.gitignore

@@ -1,2 +1,4 @@
 /.next
 /next-env.d.ts
+.vercel
+.env*.local

examples/workflow-code-runner/NOTES.md

@@ -0,0 +1,4 @@
+# Problems with current implementation
+
+* webhook resumption doesn't work when running this locally because sandbox can't resume a localhost webhook
+* deployment protection needs to be disabled for webhook resumption to happen in a preview branch

examples/workflow-code-runner/app/api/run/route.ts

@@ -3,22 +3,58 @@ import { runCode } from "@/workflows/code-runner";
 import { NextResponse } from "next/server";
 
 export async function POST(request: Request) {
-  const { prompt } = await request.json();
+  const { prompt, runtime } = await request.json();
 
-  const run = await start(runCode, [prompt]);
+  const run = await start(runCode, [prompt, runtime]);
 
   return NextResponse.json({ runId: run.runId });
 }
 
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url);
   const runId = searchParams.get("runId");
+  const stream = searchParams.get("stream");
 
   if (!runId) {
     return NextResponse.json({ error: "Missing runId" }, { status: 400 });
   }
 
   const run = getRun(runId);
+
+  // Stream stdout, stderr, or status as SSE
+  if (stream === "stdout" || stream === "stderr" || stream === "status") {
+    const readable = run.getReadable<string>({ namespace: stream });
+    const encoder = new TextEncoder();
+
+    const sseStream = new ReadableStream({
+      async start(controller) {
+        try {
+          const reader = readable.getReader();
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            controller.enqueue(
+              encoder.encode(`data: ${JSON.stringify(value)}\n\n`),
+            );
+          }
+          controller.enqueue(encoder.encode("event: done\ndata: {}\n\n"));
+          controller.close();
+        } catch {
+          controller.close();
+        }
+      },
+    });
+
+    return new Response(sseStream, {
+      headers: {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+      },
+    });
+  }
+
+  // Poll for status
   const status = await run.status;
 
   if (status === "completed") {

examples/workflow-code-runner/app/components/code-block.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { codeToHtml } from "shiki";
+
+export function CodeBlock({
+  code,
+  lang = "javascript",
+}: {
+  code: string;
+  lang?: string;
+}) {
+  const [html, setHtml] = useState<string>("");
+
+  useEffect(() => {
+    let cancelled = false;
+    codeToHtml(code, {
+      lang,
+      theme: "github-dark-default",
+    }).then((result) => {
+      if (!cancelled) setHtml(result);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, lang]);
+
+  if (!html) {
+    return (
+      <pre className="line-numbers bg-black p-4 font-mono text-sm leading-relaxed text-[#e6edf3]">
+        {code.split("\n").map((line, i) => (
+          <div key={i} className="table-row">
+            <span className="table-cell w-8 select-none pr-4 text-right tabular-nums text-[#484f58]">
+              {i + 1}
+            </span>
+            <span className="table-cell">{line}</span>
+          </div>
+        ))}
+      </pre>
+    );
+  }
+
+  return (
+    <div
+      className="code-block [&_pre]:!bg-black [&_pre]:p-4 [&_pre]:leading-relaxed [&_pre]:text-sm [&_code]:text-sm [&_code]:leading-relaxed"
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}

examples/workflow-code-runner/app/components/terminal.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import Ansi from "ansi-to-react";
+import { useEffect, useRef } from "react";
+
+export function Terminal({
+  title,
+  children,
+  variant = "default",
+}: {
+  title: string;
+  children: string;
+  variant?: "default" | "error";
+}) {
+  const scrollRef = useRef<HTMLPreElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [children]);
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center gap-2 border-b border-[rgba(255,255,255,0.1)] bg-black px-4 py-2">
+        <div className="flex gap-1.5">
+          <div className="h-2.5 w-2.5 rounded-full bg-[#484f58]" />
+          <div className="h-2.5 w-2.5 rounded-full bg-[#484f58]" />
+          <div className="h-2.5 w-2.5 rounded-full bg-[#484f58]" />
+        </div>
+        <span className="ml-2 text-xs text-[#484f58]">{title}</span>
+      </div>
+      <pre
+        ref={scrollRef}
+        className={`flex-1 overflow-auto bg-black p-4 font-mono text-sm leading-relaxed ${
+          variant === "error" ? "text-[#f85149]" : "text-[#e6edf3]"
+        }`}
+      >
+        <Ansi>{children}</Ansi>
+      </pre>
+    </div>
+  );
+}

examples/workflow-code-runner/app/globals.css

@@ -1,13 +1,17 @@
 @import "tailwindcss";
 
 :root {
-  --background: #0a0a0a;
+  --background: #000000;
   --foreground: #ededed;
+  --border: rgba(255, 255, 255, 0.1);
+  --muted: #484f58;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-border: var(--border);
+  --color-muted: var(--muted);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
@@ -16,3 +20,19 @@ body {
   background: var(--background);
   color: var(--foreground);
 }
+
+/* Shiki line numbers */
+.code-block code {
+  counter-reset: step;
+}
+
+.code-block code .line::before {
+  content: counter(step);
+  counter-increment: step;
+  display: inline-block;
+  width: 2rem;
+  margin-right: 1.5rem;
+  text-align: right;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}