Subagent

"use client"

import * as React from "react"
import { Subagent, SubagentStatus } from "@/components/ui/subagent"

const BEAT_MS = 900

const reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches

interface Worker {
  id: string
  name: string
  task: string
  /** What it does, one line per beat while it runs. */
  activity: string[]
  summary: string
  /** The beat it starts on and how many beats it runs. */
  start: number
  tools: number
  durationMs: number
}

/** A lead agent splits a migration audit three ways; the workers finish at different times. */
const WORKERS: Worker[] = [
  {
    id: "routes",
    name: "Routes agent",
    task: "Find every page that still reads cookies in a layout.",
    activity: [
      "Searching app/ for cookies()",
      "Reading app/(shop)/layout.tsx",
      "Reading app/account/layout.tsx",
    ],
    summary: "Two layouts read cookies: (shop) and account.",
    start: 0,
    tools: 7,
    durationMs: 14_200,
  },
  {
    id: "api",
    name: "API agent",
    task: "List route handlers that rely on the old caching default.",
    activity: [
      "Searching app/api for GET handlers",
      "Reading app/api/products/route.ts",
      "Reading app/api/cart/route.ts",
      "Checking next.config.ts",
    ],
    summary: "Three GET handlers need an explicit revalidate.",
    start: 1,
    tools: 9,
    durationMs: 19_600,
  },
  {
    id: "tests",
    name: "Tests agent",
    task: "Run the e2e suite against the upgraded build.",
    activity: ["Running pnpm build", "Running pnpm test:e2e", "Reading the checkout report"],
    summary: "41 of 42 passed. Checkout fails on a stale cart.",
    start: 2,
    tools: 4,
    durationMs: 22_800,
  },
]

const LAST = Math.max(...WORKERS.map((w) => w.start + w.activity.length))

const REST_BEATS = 3

const LOOP = LAST + REST_BEATS

function workerAt(w: Worker, beat: number) {
  const local = beat - w.start
  const status: SubagentStatus =
    local < 0 ? "spawning" : local < w.activity.length ? "running" : "done"
  return {
    status,
    activity: status === "running" ? w.activity[local] : undefined,
    toolCount:
      status === "spawning"
        ? 0
        : status === "done"
          ? w.tools
          : Math.max(1, Math.round((w.tools * (local + 1)) / w.activity.length)),
  }
}

const FIT_CSS = "html,body{overflow:hidden}[data-fit-small] [data-fit-hide]{display:none!important}"

/**
 * 21st shows a demo in a small frame: about 674 by 421 on a component page, 358 by 224 on a
 * phone and 245 by 139 on a profile card. A demo taller than its frame gets scrollbars, which
 * render white on dark pages. FitFrame fills the frame exactly instead.
 *
 * - "scale": the content shrinks until it fits, centered. For visuals such as orbs.
 * - "crop": the content stays at full size from the top and fades out at the bottom. For text
 *   that streams in, where a changing scale would make the page breathe.
 *
 * `minWidth` lays out a wide demo (a table, a two column panel) at that width and scales it down
 * to the frame, instead of letting it collapse to a narrow layout. The frame centers it, so it
 * shrinks evenly on both sides.
 *
 * Anything marked `data-fit-hide` (state buttons, the chatcn.dev line) drops out in frames
 * shorter than `hideBelow`, so a profile card shows the visual alone.
 */
function FitFrame({
  children,
  mode = "scale",
  hideBelow = 360,
  minWidth,
}: {
  children: React.ReactNode
  mode?: "scale" | "crop"
  hideBelow?: number
  minWidth?: string
}) {
  const content = React.useRef<HTMLDivElement>(null)
  const [cropped, setCropped] = React.useState(false)

  React.useLayoutEffect(() => {
    const el = content.current
    if (!el) return
    const measure = () => {
      const vw = window.innerWidth
      const vh = window.innerHeight
      el.toggleAttribute("data-fit-small", vh < hideBelow)
      // Layout sizes ignore the transform, so measuring never feeds back.
      const w = Math.max(el.offsetWidth, el.scrollWidth)
      const h = Math.max(el.offsetHeight, el.scrollHeight)
      const scale = mode === "scale" ? Math.min(1, vw / w, vh / h) : 1
      el.style.transform = scale < 1 ? `scale(${scale})` : ""
      setCropped(mode === "crop" && h > vh + 1)
    }
    measure()
    const observer = new ResizeObserver(measure)
    observer.observe(el)
    // Content that changes inside a fixed width box (a headline that cycles words) never resizes
    // the box itself, so changes below it measure again on the next frame.
    let frame = 0
    const mutations = new MutationObserver(() => {
      cancelAnimationFrame(frame)
      frame = requestAnimationFrame(measure)
    })
    mutations.observe(el, { subtree: true, childList: true, characterData: true })
    window.addEventListener("resize", measure)
    return () => {
      observer.disconnect()
      mutations.disconnect()
      cancelAnimationFrame(frame)
      window.removeEventListener("resize", measure)
    }
  }, [mode, hideBelow])

  const fade = "linear-gradient(to bottom, #000 calc(100% - 40px), transparent)"
  return (
    <div
      className="flex w-full justify-center overflow-hidden"
      style={{
        height: "100dvh",
        alignItems: mode === "crop" ? "flex-start" : "center",
        maskImage: cropped ? fade : undefined,
        WebkitMaskImage: cropped ? fade : undefined,
      }}
    >
      <style>{FIT_CSS}</style>
      <div
        ref={content}
        className="w-full shrink-0"
        style={{ transformOrigin: mode === "crop" ? "top center" : "center", minWidth }}
      >
        {children}
      </div>
    </div>
  )
}

/** The line under each 21st demo that points back to the kit. */
function MoreOn({ slug, children }: { slug: string; children: React.ReactNode }) {
  return (
    <p data-fit-hide className="text-[0.75rem]/[1rem] text-(color:--chatcn-fg-faint) text-center text-balance">
      {children}{" "}
      <a
        href={`https://chatcn.dev/docs/components/${slug}`}
        target="_blank"
        rel="noopener"
        className="text-(color:--chatcn-fg-subtle) hover:text-(color:--chatcn-fg) underline underline-offset-2"
      >
        chatcn.dev
      </a>
    </p>
  )
}

/**
 * A lead agent audits a framework upgrade with three subagents in parallel: each one spawns, its
 * live activity line changes as it searches, reads and runs, and it folds to a one line result
 * when done. The lead reports once all three are back. Loops. Open any agent to see its trace.
 */
export default function SubagentPreview() {
  const [beat, setBeat] = React.useState(2)
  // Each loop is a fresh run: the lead's clock starts a few seconds before the first frame.
  const [loopAt, setLoopAt] = React.useState(() => Date.now() - 2 * BEAT_MS - 4_000)
  React.useEffect(() => {
    if (beat === 0) setLoopAt(Date.now() - 4_000)
  }, [beat])

  React.useEffect(() => {
    if (reducedMotion()) {
      setBeat(LAST)
      return
    }
    const id = window.setInterval(() => setBeat((b) => (b + 1) % LOOP), BEAT_MS)
    return () => window.clearInterval(id)
  }, [])

  const states = WORKERS.map((w) => workerAt(w, beat))
  const allDone = states.every((s) => s.status === "done")

  return (
    <FitFrame minWidth="36rem">
      <div className="flex w-full flex-col items-center justify-center gap-4 p-6">
        <div className="h-[20rem] w-full max-w-xl">
          <Subagent
            name="Upgrade audit"
            status={allDone ? "done" : "running"}
            task="Check what breaks when this app moves to the new framework version."
            activity={allDone ? undefined : "Waiting on 3 agents"}
            toolCount={states.reduce((n, s) => n + s.toolCount, 0)}
            startedAt={allDone ? undefined : loopAt}
            durationMs={allDone ? 24_100 : undefined}
            summary={
              allDone
                ? "Two layouts, three API routes and one e2e test need changes before the upgrade."
                : undefined
            }
            open
          >
            {WORKERS.map((w, i) => {
              const s = states[i]!
              return (
                <Subagent
                  key={w.id}
                  name={w.name}
                  status={s.status}
                  task={w.task}
                  activity={s.activity}
                  toolCount={s.toolCount || undefined}
                  startedAt={s.status === "running" ? loopAt + 4_000 + w.start * BEAT_MS : undefined}
                  durationMs={s.status === "done" ? w.durationMs : undefined}
                  summary={s.status === "done" ? w.summary : undefined}
                />
              )
            })}
          </Subagent>
        </div>
        <MoreOn slug="subagent">Agents that spawn agents, with live activity and results. On</MoreOn>
      </div>
    </FitFrame>
  )
}