Turn request

"use client"

import * as React from "react"
import type { AgentIdentity } from "@/lib/candor/chat"
import { AgentScreen } from "@/components/candor/agent-screen"
import { TurnRequest } from "@/components/candor/turn-request"

const agent: AgentIdentity = { id: "a-web", name: "Browser agent", role: "dev" }

// A drawn stand-in for the screenshot your server sends: a sign-in page asking for a one-time code.
const frame =
  "data:image/svg+xml," +
  encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400"><rect width="640" height="400" fill="#f6f6f4"/><text x="200" y="130" font-family="sans-serif" font-size="22" fill="#333">Enter your one-time code</text><rect x="200" y="160" width="240" height="40" rx="4" fill="#fff" stroke="#ccc"/><rect x="200" y="220" width="120" height="36" rx="4" fill="#3b6fd8"/><text x="236" y="244" font-family="sans-serif" font-size="15" fill="#fff">Verify</text></svg>`
  )

export default function Example() {
  // "asking", then "person" while they have the screen, then "back" once they hand it back; or "link" when they asked
  // for a sign-in link instead, or "declined".
  const [phase, setPhase] = React.useState<"asking" | "declined" | "link" | "person" | "back">("asking")
  // While the person has the screen (`taken`), or a link is on its way, the request stays where it is with its buttons
  // locked and saying why, so focus stays on the button pressed instead of falling to the page. With `taken`, TurnRequest
  // locks Take the screen itself; the other two are this app's to lock.
  const busy = phase === "person" ? "You have the screen now." : phase === "link" ? "A sign-in link is on its way to your phone." : null
  // After Not now, a line in the request's place says what happens next and takes focus, so focus never falls to the
  // page when the button pressed goes.
  const declined = React.useRef<HTMLParagraphElement>(null)
  React.useEffect(() => {
    if (phase === "declined") declined.current?.focus()
  }, [phase])

  return (
    <div className="flex max-w-3xl flex-col gap-4">
      {phase === "declined" ? (
        <p ref={declined} tabIndex={-1} className="rounded-xl border bg-card p-4 text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/80">
          Not now. Browser agent will ask again when it next reaches the code page.
        </p>
      ) : (
        <TurnRequest
          agent={agent}
          why="The supplier's site asks for a one-time code sent to your phone."
          todo="Enter the code and press Verify, then hand the screen back."
          // Your app's commitment: it must stop the agent's input while you have the screen. Candor sends none.
          wontDo={["Type or click anything", "Keep a copy of what you type"]}
          seesScreen={false}
          onTake={() => setPhase("person")}
          takeLocked={phase === "link" ? busy : null}
          // Your app says when the screen is the person's: here, as soon as it has given them control.
          taken={phase === "person"}
          onHandBack={() => setPhase("back")}
          onNotNow={() => setPhase("declined")}
          notNowLocked={busy}
          // The quieter way keeps the code on the person's own device: the agent never handles it.
          alternative={{ label: "Send me a sign-in link instead", why: "You open the link and sign in on your own device; the agent waits.", onChoose: () => setPhase("link") }}
          alternativeLocked={busy}
          report={phase === "back" ? "The code was accepted and the supplier's order page is open." : undefined}
        />
      )}
      <AgentScreen
        agent={agent}
        connection="live"
        source={{ kind: "image", src: frame }}
        action={phase === "person" ? undefined : "Waiting at the one-time code page"}
        control={phase === "person" ? "person" : "agent"}
        controlStyle="strip"
        waiting={phase === "asking" ? "enter the one-time code" : undefined}
        onHandBack={() => setPhase("back")}
      />
    </div>
  )
}