Agent run timeline with the OpenAI Agents SDK

import { Agent, run, tool } from "@openai/agents";
import { z } from "zod";

export type StepEvent = { id: string; title: string; status: "active" | "done" | "waiting" | "error"; detail?: string; at: number };

const titles: Record<string, [string, string]> = {
  list_failed_payments: ["Reading failed payments", "Read the failed payments"],
  draft_reminder: ["Drafting a reminder", "Drafted a reminder"],
};

const listFailedPayments = tool({
  name: "list_failed_payments",
  description: "List failed Stripe payments from the last 7 days",
  parameters: z.object({}),
  execute: async () => JSON.stringify({ count: 9 }),
});

const agent = new Agent({ name: "Dunning agent", instructions: "Chase failed payments.", tools: [listFailedPayments] });

export async function POST(req: Request) {
  const { message }: { message: string } = await req.json();
  const result = await run(agent, message, { stream: true });
  const encoder = new TextEncoder();

  const body = new ReadableStream({
    async start(controller) {
      const send = (step: Omit<StepEvent, "at">) => controller.enqueue(encoder.encode(`${JSON.stringify({ ...step, at: Date.now() })}\n`));
      for await (const event of result) {
        if (event.type === "agent_updated_stream_event") {
          send({ id: `agent-${event.agent.name}`, title: `Handed off to ${event.agent.name}`, status: "done" });
          continue;
        }
        if (event.type !== "run_item_stream_event") continue;
        const raw = event.item.rawItem;
        const [doing, did] = "name" in raw && typeof raw.name === "string" ? (titles[raw.name] ?? [`Running ${raw.name}`, `Ran ${raw.name}`]) : ["Working", "Done"];
        if (event.name === "tool_called" && raw.type === "function_call") send({ id: raw.callId, title: doing, status: "active" });
        if (event.name === "tool_output" && raw.type === "function_call_result") send({ id: raw.callId, title: did, status: "done" });
        if (event.name === "tool_approval_requested") send({ id: `approval-${"callId" in raw ? raw.callId : "run"}`, title: "Waiting for your approval", status: "waiting" });
        if (event.name === "message_output_created") send({ id: "answer", title: "Wrote the answer", status: "done" });
      }
      await result.completed;
      controller.close();
    },
  });

  return new Response(body, { headers: { "Content-Type": "application/x-ndjson" } });
}

"use client";

import { useState } from "react";
import { RunTimeline, type RunTimelineStep } from "@/components/pixilui/run-timeline";
import type { StepEvent } from "../app/api/run/route";

export function DunningTimeline() {
  const [steps, setSteps] = useState<RunTimelineStep[]>([]);

  const apply = (event: StepEvent) =>
    setSteps((prev) => {
      const at = prev.findIndex((step) => step.id === event.id);
      const next: RunTimelineStep = {
        id: event.id,
        title: event.title,
        detail: event.detail,
        status: event.status,
        startedAt: at < 0 ? event.at : prev[at]!.startedAt,
        endedAt: event.status === "done" ? event.at : undefined,
      };
      return at < 0 ? [...prev, next] : prev.map((step, i) => (i === at ? next : step));
    });

  async function start() {
    setSteps([]);
    const response = await fetch("/api/run", { method: "POST", body: JSON.stringify({ message: "Chase this week's failed payments" }) });
    const reader = response.body!.pipeThrough(new TextDecoderStream()).getReader();
    let buffer = "";
    try {
      for (;;) {
        const { value, done } = await reader.read();
        if (done) break;
        const lines = (buffer + value).split("\n");
        buffer = lines.pop() ?? "";
        lines.filter(Boolean).forEach((line) => apply(JSON.parse(line) as StepEvent));
      }
    } catch {
      setSteps((prev) => prev.map((step) => (step.status === "active" ? { ...step, status: "error", detail: "The run stopped here. Start it again to retry." } : step)));
    }
  }

  return (
    <section aria-label="Dunning run">
      <button type="button" onClick={start}>
        Chase failed payments
      </button>
      {steps.length ? <RunTimeline steps={steps} /> : null}
    </section>
  );
}