json-render/examples/harness-chat/app/page.tsx

"use client";

import { useCallback, useRef, useState } from "react";
import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport, type UIMessage } from "ai";
import {
  SPEC_DATA_PART,
  SPEC_DATA_PART_TYPE,
  type SpecDataPart,
} from "@json-render/core";
import { useJsonRenderMessage } from "@json-render/react";
import {
  ArrowUp,
  Bug,
  ChevronRight,
  FilePen,
  FilePlus,
  FileText,
  FolderGit2,
  FolderSearch,
  FolderTree,
  Gauge,
  Globe,
  Hammer,
  ListChecks,
  Loader2,
  Search,
  SquareChevronRight,
  Wrench,
  type LucideIcon,
} from "lucide-react";
import { Streamdown } from "streamdown";
import { code } from "@streamdown/code";

import { ReportRenderer } from "@/lib/render/renderer";
import {
  AGENT_IDS,
  AGENTS,
  type AgentId,
  DEFAULT_AGENT_ID,
} from "@/lib/agents";

type AppDataParts = { [SPEC_DATA_PART]: SpecDataPart };
type AppMessage = UIMessage<unknown, AppDataParts>;

const transport = new DefaultChatTransport({ api: "/api/agent" });

const SUGGESTIONS: Array<{
  label: string;
  description: string;
  icon: LucideIcon;
  prompt: string;
}> = [
  {
    label: "Build & test a library",
    description: "Scaffold a TS package with vitest and run the suite.",
    icon: Hammer,
    prompt:
      "Scaffold a tiny TypeScript semver-parsing library with vitest tests, run the tests, and report the results.",
  },
  {
    label: "Fix failing code",
    description: "Plant a subtle bug, then debug it end to end.",
    icon: Bug,
    prompt:
      "Create a small JS module with a subtle off-by-one bug and a failing test, then diagnose and fix it like a real debugging session.",
  },
  {
    label: "Benchmark something",
    description: "Measure two approaches and chart the numbers.",
    icon: Gauge,
    prompt:
      "Write and run a quick benchmark comparing JSON.parse vs a streaming JSON parser on a 5MB file, and report the numbers as a bar chart.",
  },
  {
    label: "Explore a repo",
    description: "Clone a project and map out what each part does.",
    icon: FolderGit2,
    prompt:
      "Clone github.com/vercel-labs/json-render, explore the package structure, and report what each package does.",
  },
];

/** Per-tool icon + readable [running, done] labels (labels used for a11y). */
const TOOL_META: Record<
  string,
  { icon: LucideIcon; labels: [string, string] }
> = {
  bash: {
    icon: SquareChevronRight,
    labels: ["Running command", "Ran command"],
  },
  read: { icon: FileText, labels: ["Reading file", "Read file"] },
  write: { icon: FilePlus, labels: ["Writing file", "Wrote file"] },
  edit: { icon: FilePen, labels: ["Editing file", "Edited file"] },
  grep: { icon: Search, labels: ["Searching code", "Searched code"] },
  glob: { icon: FolderSearch, labels: ["Listing files", "Listed files"] },
  ls: { icon: FolderTree, labels: ["Listing directory", "Listed directory"] },
  webSearch: { icon: Globe, labels: ["Searching the web", "Searched the web"] },
  WebFetch: { icon: Globe, labels: ["Fetching page", "Fetched page"] },
  TodoWrite: { icon: ListChecks, labels: ["Updating plan", "Updated plan"] },
};

/** Pull a one-line human hint out of a tool input (command, path, query). */
function toolInputHint(input: unknown): string | null {
  if (input == null || typeof input !== "object") return null;
  const record = input as Record<string, unknown>;
  const hint =
    record.command ?? record.file_path ?? record.pattern ?? record.query;
  return typeof hint === "string" ? hint : null;
}

function ToolCallDisplay({
  toolName,
  state,
  input,
  output,
}: {
  toolName: string;
  state: string;
  input: unknown;
  output: unknown;
}) {
  const [expanded, setExpanded] = useState(false);
  const isLoading =
    state !== "output-available" &&
    state !== "output-error" &&
    state !== "output-denied";
  const meta = TOOL_META[toolName];
  const Icon = meta?.icon ?? Wrench;
  const label = meta ? meta.labels[isLoading ? 0 : 1] : toolName;
  const hint = toolInputHint(input);

  return (
    <div className="group rounded-lg border bg-card px-3 py-2 text-sm shadow-subtle">
      <button
        type="button"
        title={label}
        aria-label={label}
        className="flex w-full max-w-full items-center gap-2 text-left"
        onClick={() => setExpanded((e) => !e)}
      >
        <Icon
          className={`size-3.5 shrink-0 text-muted-foreground ${
            isLoading && !hint ? "animate-pulse" : ""
          }`}
          strokeWidth={1.75}
        />
        {hint && (
          <code
            className={`truncate font-mono text-xs text-muted-foreground/70 ${
              isLoading ? "animate-shimmer" : ""
            }`}
          >
            {hint}
          </code>
        )}
        {!isLoading && output != null && (
          <ChevronRight
            className={`ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground/40 transition-transform group-hover:text-muted-foreground ${expanded ? "rotate-90" : ""}`}
          />
        )}
      </button>
      {expanded && !isLoading && output != null && (
        <pre className="mt-2 max-h-64 overflow-auto border-t pt-2 text-xs text-muted-foreground whitespace-pre-wrap break-all">
          {typeof output === "string"
            ? output
            : JSON.stringify(output, null, 2)}
        </pre>
      )}
    </div>
  );
}

/**
 * Monochrome agent marks. Claude (svgl) and OpenAI (svgl) are single-path
 * brand glyphs forced to `currentColor`; Pi uses its namesake π since it has
 * no published logo. All inherit the surrounding text color.
 */
type MarkProps = { className?: string };

function ClaudeMark({ className }: MarkProps) {
  return (
    <svg viewBox="0 0 256 257" className={className} aria-hidden="true">
      <path
        fill="currentColor"
        d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z"
      />
    </svg>
  );
}

function OpenAIMark({ className }: MarkProps) {
  return (
    <svg viewBox="0 0 256 260" className={className} aria-hidden="true">
      <path
        fill="currentColor"
        d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z"
      />
    </svg>
  );
}

function PiMark({ className }: MarkProps) {
  // pi.dev/logo-auto.svg — blocky "Pi" mark. The viewBox is padded a little
  // past the mark's bounds so it reads slightly smaller than the other marks.
  return (
    <svg
      viewBox="120 120 560 560"
      className={className}
      fill="currentColor"
      aria-hidden="true"
    >
      <path
        fillRule="evenodd"
        d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"
      />
      <path d="M517.36 400H634.72V634.72H517.36Z" />
    </svg>
  );
}

const AGENT_MARKS: Record<AgentId, (props: MarkProps) => React.ReactNode> = {
  "claude-code": ClaudeMark,
  codex: OpenAIMark,
  pi: PiMark,
};

/** Segmented control for picking the coding agent before a chat starts. */
function AgentSelector({
  value,
  onChange,
}: {
  value: AgentId;
  onChange: (id: AgentId) => void;
}) {
  return (
    <div className="inline-flex items-center gap-0.5 rounded-lg border bg-card p-0.5">
      {AGENT_IDS.map((id) => {
        const Mark = AGENT_MARKS[id];
        return (
          <button
            key={id}
            type="button"
            onClick={() => onChange(id)}
            aria-pressed={value === id}
            className={`inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
              value === id
                ? "bg-foreground text-background"
                : "text-muted-foreground hover:text-foreground"
            }`}
          >
            <Mark className="h-3.5 w-3.5" />
            {AGENTS[id].label}
          </button>
        );
      })}
    </div>
  );
}

/** Shimmering status line shown while we wait for the agent to produce output. */
function PendingLine({ label }: { label: string }) {
  return (
    <div className="text-sm text-muted-foreground animate-shimmer">{label}</div>
  );
}

function MessageBubble({
  message,
  isLast,
  isStreaming,
  pendingLabel,
}: {
  message: AppMessage;
  isLast: boolean;
  isStreaming: boolean;
  pendingLabel: string;
}) {
  const { spec, text, hasSpec } = useJsonRenderMessage(message.parts);

  if (message.role === "user") {
    return (
      <div className="flex justify-end">
        <div className="max-w-[85%] rounded-2xl rounded-tr-sm bg-foreground px-3.5 py-2 text-sm leading-relaxed whitespace-pre-wrap text-background">
          {text}
        </div>
      </div>
    );
  }

  // Ordered segments: adjacent text merged, adjacent tool calls grouped,
  // the spec rendered inline where the agent emitted it.
  const segments: Array<
    | { kind: "text"; text: string }
    | {
        kind: "tools";
        tools: Array<{
          toolCallId: string;
          toolName: string;
          state: string;
          input: unknown;
          output: unknown;
        }>;
      }
    | { kind: "spec" }
  > = [];
  let specInserted = false;

  for (const part of message.parts) {
    if (part.type === "text") {
      if (!part.text.trim()) continue;
      const last = segments[segments.length - 1];
      if (last?.kind === "text") last.text += part.text;
      else segments.push({ kind: "text", text: part.text });
    } else if (part.type.startsWith("tool-")) {
      const tp = part as {
        type: string;
        toolCallId: string;
        state: string;
        input?: unknown;
        output?: unknown;
      };
      const tool = {
        toolCallId: tp.toolCallId,
        toolName: tp.type.replace(/^tool-/, ""),
        state: tp.state,
        input: tp.input,
        output: tp.output,
      };
      const last = segments[segments.length - 1];
      if (last?.kind === "tools") last.tools.push(tool);
      else segments.push({ kind: "tools", tools: [tool] });
    } else if (part.type === SPEC_DATA_PART_TYPE && !specInserted) {
      segments.push({ kind: "spec" });
      specInserted = true;
    }
  }

  const showLoader = isLast && isStreaming && segments.length === 0 && !hasSpec;

  return (
    <div className="flex w-full flex-col gap-3">
      {segments.map((seg, i) => {
        if (seg.kind === "text") {
          return (
            <div key={`text-${i}`} className="markdown text-sm leading-relaxed">
              <Streamdown
                plugins={{ code }}
                animated={isLast && isStreaming && i === segments.length - 1}
              >
                {seg.text}
              </Streamdown>
            </div>
          );
        }
        if (seg.kind === "spec") {
          if (!hasSpec) return null;
          return (
            <div key="spec" className="w-full">
              <ReportRenderer spec={spec} loading={isLast && isStreaming} />
            </div>
          );
        }
        return (
          <div key={`tools-${i}`} className="flex flex-col gap-1.5">
            {seg.tools.map((t) => (
              <ToolCallDisplay
                key={t.toolCallId}
                toolName={t.toolName}
                state={t.state}
                input={t.input}
                output={t.output}
              />
            ))}
          </div>
        );
      })}

      {showLoader && <PendingLine label={pendingLabel} />}

      {hasSpec && !specInserted && (
        <div className="w-full">
          <ReportRenderer spec={spec} loading={isLast && isStreaming} />
        </div>
      )}
    </div>
  );
}

export default function HarnessChatPage() {
  const [input, setInput] = useState("");
  const [agentId, setAgentId] = useState<AgentId>(DEFAULT_AGENT_ID);
  const [chatId, setChatId] = useState(() => crypto.randomUUID());
  const [isResetting, setIsResetting] = useState(false);
  const inputRef = useRef<HTMLTextAreaElement>(null);

  const { messages, sendMessage, setMessages, status, error, id, stop } =
    useChat<AppMessage>({ transport, id: chatId });

  const isStreaming = status === "streaming" || status === "submitted";
  const isBusy = isStreaming || isResetting;

  const handleSubmit = useCallback(
    async (text?: string) => {
      const message = text || input;
      if (!message.trim() || isBusy) return;
      setInput("");
      // The server locks the agent to the chat on the first message; sending
      // it every turn is harmless and keeps follow-ups consistent.
      await sendMessage({ text: message.trim() }, { body: { agent: agentId } });
    },
    [input, isBusy, sendMessage, agentId],
  );

  const handleClear = useCallback(async () => {
    if (isResetting) return;
    setIsResetting(true);
    stop();

    // Drop the server-side harness session (and its sandbox) for this chat.
    try {
      await fetch(`/api/agent?id=${encodeURIComponent(id)}`, {
        method: "DELETE",
      });
    } finally {
      setMessages([]);
      setChatId(crypto.randomUUID());
      setInput("");
      setIsResetting(false);
      inputRef.current?.focus();
    }
  }, [id, isResetting, setMessages, stop]);

  const isEmpty = messages.length === 0;

  return (
    <div className="flex h-screen flex-col overflow-hidden">
      {/* The header only appears once a chat has started; the first screen is
          headerless so the brand title carries it. */}
      {!isEmpty && (
        <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center justify-between border-b bg-background/80 px-5 backdrop-blur-md">
          {/* Left: active agent */}
          {(() => {
            const Mark = AGENT_MARKS[agentId];
            return (
              <span className="flex items-center gap-1.5 text-sm text-muted-foreground">
                <Mark className="h-3.5 w-3.5" />
                {AGENTS[agentId].label}
              </span>
            );
          })()}
          {/* Center: brand, absolutely centered so side widths can't shift it */}
          <h1 className="pointer-events-none absolute left-1/2 -translate-x-1/2 text-sm font-medium tracking-tight whitespace-nowrap text-muted-foreground">
            AI SDK <span className="font-mono">HarnessAgent</span>
            <span className="mx-1.5 font-normal">+</span>
            <span className="font-mono">json-render</span>
          </h1>
          {/* Right: reset */}
          <button
            onClick={handleClear}
            disabled={isResetting}
            className="-mr-1.5 rounded-md px-2.5 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50"
          >
            Start over
          </button>
        </header>
      )}

      <main className="flex flex-1 flex-col overflow-auto">
        {isEmpty ? (
          <div className="flex flex-1 flex-col items-center justify-center px-6">
            <div className="w-full max-w-3xl">
              <div className="space-y-3">
                <h2 className="text-3xl font-semibold tracking-tight">
                  AI SDK <span className="font-mono">HarnessAgent</span>
                  <span className="mx-1.5 font-normal text-muted-foreground">
                    +
                  </span>
                  <span className="font-mono">json-render</span>
                </h2>
                <p className="max-w-md text-[15px] leading-relaxed text-muted-foreground">
                  A coding agent works in a live sandbox, then reports back as
                  rendered UI — steps, diffs, terminal output, tests, and charts
                  — instead of a wall of markdown.
                </p>
              </div>
              <div className="mt-8 grid grid-cols-1 gap-px overflow-hidden rounded-xl border bg-border sm:grid-cols-2">
                {SUGGESTIONS.map((s) => {
                  const Icon = s.icon;
                  return (
                    <button
                      key={s.label}
                      onClick={() => handleSubmit(s.prompt)}
                      disabled={isBusy}
                      className="group flex items-start gap-3 bg-card p-4 text-left transition-colors hover:bg-accent"
                    >
                      <Icon
                        className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground"
                        strokeWidth={1.75}
                      />
                      <span className="min-w-0 space-y-0.5">
                        <span className="block text-sm font-medium tracking-tight">
                          {s.label}
                        </span>
                        <span className="block text-[13px] leading-snug text-muted-foreground">
                          {s.description}
                        </span>
                      </span>
                    </button>
                  );
                })}
              </div>
            </div>
          </div>
        ) : (
          <div className="mx-auto w-full max-w-3xl space-y-6 px-6 py-6">
            {messages.map((message, index) => (
              <MessageBubble
                key={message.id}
                message={message}
                isLast={index === messages.length - 1}
                isStreaming={isStreaming}
                pendingLabel={index <= 1 ? "Starting sandbox…" : "Working…"}
              />
            ))}
            {isStreaming && messages[messages.length - 1]?.role === "user" && (
              <PendingLine
                label={messages.length <= 1 ? "Starting sandbox…" : "Working…"}
              />
            )}
            {error && (
              <div className="rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive">
                {error.message}
              </div>
            )}
          </div>
        )}
      </main>

      <div className="shrink-0 px-6 pb-5">
        {isEmpty && (
          <div className="mx-auto mb-2.5 flex max-w-3xl items-center gap-2">
            <span className="text-xs text-muted-foreground">Agent</span>
            <AgentSelector value={agentId} onChange={setAgentId} />
          </div>
        )}
        <div className="group relative mx-auto max-w-3xl rounded-xl border bg-card shadow-subtle transition-colors focus-within:border-ring">
          <textarea
            ref={inputRef}
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                handleSubmit();
              }
            }}
            placeholder={
              isEmpty
                ? "Scaffold a TypeScript library and run its tests…"
                : "Ask a follow-up…"
            }
            rows={2}
            className="w-full resize-none bg-transparent px-3.5 py-3 pr-12 text-sm leading-relaxed placeholder:text-muted-foreground focus-visible:outline-none"
            autoFocus
          />
          <button
            onClick={() => handleSubmit()}
            disabled={!input.trim() || isBusy}
            className="absolute right-2.5 bottom-2.5 flex h-7 w-7 items-center justify-center rounded-lg bg-foreground text-background transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-25"
          >
            {isBusy ? (
              <Loader2 className="h-3.5 w-3.5 animate-spin" />
            ) : (
              <ArrowUp className="h-3.5 w-3.5" strokeWidth={2.25} />
            )}
          </button>
        </div>
      </div>
    </div>
  );
}