import { useAtomSet, useAtomValue } from "@effect/atom-react";import { Option, Schema } from "effect";import * as Exit from "effect/Exit";import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";import { Check, ExternalLink, Loader2, ShieldCheck, X } from "lucide-react";import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react"; import { pausedExecutionAtom, resumeExecution } from "../api/atoms";import { trackEvent } from "../api/analytics";import { Button } from "../components/button";import { CopyButton } from "../components/copy-button";import { type ElicitationAction, useElicitationApproval } from "../components/elicitation-approval";import { Skeleton } from "../components/skeleton"; type PausedExecutionInfo = { readonly text: string; readonly structured: unknown };type ResumeExecutionResult =  | {      readonly status: "completed";      readonly text: string;      readonly structured: unknown;      readonly isError: boolean;    }  | {      readonly status: "paused";      readonly text: string;      readonly structured: unknown;    }; type ResumeStatus =  | { readonly state: "idle" }  | { readonly state: "submitting"; readonly action: ElicitationAction }  | { readonly state: "done"; readonly action: ElicitationAction; readonly text: string }  | { readonly state: "failed"; readonly message: string }; const actionLabel: Record<ElicitationAction, string> = {  accept: "Approve",  decline: "Decline",  cancel: "Cancel",}; const returnPrompt: Record<ElicitationAction, string> = {  accept: "I've approved it",  decline: "I've denied it",  cancel: "I've canceled it",}; type PausedInteractionView = {  readonly kind: string | null;  readonly message: string;  readonly title: string;  readonly args: unknown;  readonly url: string | null;  readonly requestedSchema: unknown;  readonly toolId: string | null;}; const encodeJsonPreview = Schema.encodeUnknownOption(Schema.UnknownFromJsonString);const decodeJsonPreview = Schema.decodeUnknownOption(Schema.UnknownFromJsonString);const PausedInteractionInfo = Schema.Struct({  kind: Schema.optional(Schema.String),  message: Schema.optional(Schema.String),  args: Schema.optional(Schema.Unknown),  url: Schema.optional(Schema.String),  requestedSchema: Schema.optional(Schema.Unknown),  toolId: Schema.optional(Schema.String),});const PausedStructured = Schema.Struct({  executionId: Schema.optional(Schema.String),  interaction: Schema.optional(PausedInteractionInfo),});const decodePausedStructured = Schema.decodeUnknownOption(PausedStructured); const failureMessage = (exit: Exit.Exit<unknown, unknown>): string => {  if (Exit.isSuccess(exit)) return "Resume failed.";  return "The paused execution could not be resumed. It may have already completed or expired.";}; const requestedSchemaFromPausedInfo = (paused: PausedExecutionInfo | null): unknown =>  paused ? interactionFromPausedInfo(paused)?.requestedSchema : undefined; const safeJson = (value: unknown): string | null => Option.getOrNull(encodeJsonPreview(value)); const parseArgumentsFromMessage = (message: string): unknown => {  const marker = "\n\nArguments:\n";  const index = message.indexOf(marker);  if (index === -1) return undefined;  const raw = message.slice(index + marker.length).trim();  return Option.getOrUndefined(decodeJsonPreview(raw));}; const messageTitle = (message: string): string => {  const marker = "\n\nArguments:\n";  const first = (message.includes(marker) ? message.slice(0, message.indexOf(marker)) : message)    .trim()    .split("\n")    .find((line) => line.trim().length > 0);  return first?.trim() || "Paused tool call";}; const interactionFromPausedInfo = (paused: PausedExecutionInfo): PausedInteractionView | null => {  const structured = Option.getOrNull(decodePausedStructured(paused.structured));  const interaction = structured?.interaction;  if (!interaction) return null;  const message = interaction.message ?? paused.text;  const args = interaction.args ?? parseArgumentsFromMessage(message);  return {    kind: interaction.kind ?? null,    message,    title: messageTitle(message),    args,    url: interaction.url ?? null,    requestedSchema: interaction.requestedSchema,    toolId: interaction.toolId ?? null,  };}; const executionIdFromStructured = (structured: unknown): string | null =>  Option.getOrNull(decodePausedStructured(structured))?.executionId ?? null; export function ResumeApprovalPage(props: { executionId: string }) {  const paused = useAtomValue(pausedExecutionAtom(props.executionId));  const doResume = useAtomSet(resumeExecution, { mode: "promiseExit" });   const resume = useCallback(    (executionId: string, action: ElicitationAction, content?: Record<string, unknown>) =>      doResume({        params: { executionId },        payload: action === "accept" ? { action, content: content ?? {} } : { action },      }),    [doResume],  );   return <ResumeApprovalPageView executionId={props.executionId} paused={paused} resume={resume} />;} export function ResumeApprovalPageView(props: {  executionId: string;  paused: AsyncResult.AsyncResult<PausedExecutionInfo, unknown>;  resume: (    executionId: string,    action: ElicitationAction,    content?: Record<string, unknown>,  ) => Promise<Exit.Exit<ResumeExecutionResult, unknown>>;  unavailableMessage?: string;}) {  const { executionId, paused, resume, unavailableMessage } = props;  const [status, setStatus] = useState<ResumeStatus>({ state: "idle" });  const [currentExecutionId, setCurrentExecutionId] = useState(executionId);  const [nextPaused, setNextPaused] = useState<PausedExecutionInfo | null>(null);  const displayedPaused = nextPaused ?? (AsyncResult.isSuccess(paused) ? paused.value : null);  const approval = useElicitationApproval(requestedSchemaFromPausedInfo(displayedPaused));  const interaction = displayedPaused ? interactionFromPausedInfo(displayedPaused) : null;   useEffect(() => {    setCurrentExecutionId(executionId);    setNextPaused(null);    setStatus({ state: "idle" });  }, [executionId]);   const shortExecutionId = useMemo(    () =>      currentExecutionId.length > 24        ? `${currentExecutionId.slice(0, 12)}...${currentExecutionId.slice(-6)}`        : currentExecutionId,    [currentExecutionId],  );   const submit = useCallback(    async (action: ElicitationAction) => {      const content = action === "accept" ? approval.content() : undefined;      if (content === null) return;       setStatus({ state: "submitting", action });      const exit = await resume(currentExecutionId, action, content);       if (Exit.isFailure(exit)) {        trackEvent("resume_approval_submitted", {          action,          ...(interaction?.kind != null ? { interaction_kind: interaction.kind } : {}),          chained_to_next: false,          success: false,        });        setStatus({ state: "failed", message: failureMessage(exit) });        return;      }       if (exit.value.status === "paused") {        const nextExecutionId = executionIdFromStructured(exit.value.structured);        if (!nextExecutionId) {          trackEvent("resume_approval_submitted", {            action,            ...(interaction?.kind != null ? { interaction_kind: interaction.kind } : {}),            chained_to_next: false,            success: false,          });          setStatus({            state: "failed",            message: "The next paused execution did not include an id.",          });          return;        }         trackEvent("resume_approval_submitted", {          action,          ...(interaction?.kind != null ? { interaction_kind: interaction.kind } : {}),          chained_to_next: true,          success: true,        });        setCurrentExecutionId(nextExecutionId);        setNextPaused({ text: exit.value.text, structured: exit.value.structured });        setStatus({ state: "idle" });        return;      }       trackEvent("resume_approval_submitted", {        action,        ...(interaction?.kind != null ? { interaction_kind: interaction.kind } : {}),        chained_to_next: false,        success: true,      });      setStatus({        state: "done",        action,        text: exit.value.text || "The paused execution has been resumed.",      });    },    [approval, currentExecutionId, interaction, resume],  );   const busy = status.state === "submitting";  const done = status.state === "done";  const canSubmit = Boolean(displayedPaused) && !busy && !done;  const unavailable = !nextPaused && AsyncResult.isFailure(paused);   return (    <main className="flex min-h-full items-center justify-center bg-background px-4 py-8">      <section className="flex max-h-[calc(100vh-4rem)] w-full max-w-2xl flex-col overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-xl">        <div className="flex shrink-0 items-start gap-4 border-b border-border px-5 py-4">          <div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">            <ShieldCheck className="size-5" aria-hidden="true" />          </div>          <div className="min-w-0 flex-1">            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">              {unavailable ? "Resume execution" : "User approval required"}            </p>            <h1 className="mt-1 text-xl font-semibold text-foreground">Resume execution</h1>            {!unavailable && (              <p className="mt-2 text-sm leading-6 text-muted-foreground">                A paused tool call is waiting for your decision before it can continue.              </p>            )}          </div>        </div>         <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">          {nextPaused ? (            <PendingRequestDetails interaction={interaction} approvalFields={approval.fields} />          ) : (            AsyncResult.match(paused, {              onInitial: () => (                <div className="space-y-2">                  <Skeleton className="h-4 w-4/5" />                  <Skeleton className="h-4 w-3/5" />                  <Skeleton className="h-16 w-full" />                </div>              ),              onFailure: () => (                <div className="text-sm leading-6 text-muted-foreground">                  {unavailableMessage ??                    "This paused execution is no longer available. It may have already been resumed, or the local daemon may have restarted."}                </div>              ),              onSuccess: () => (                <PendingRequestDetails interaction={interaction} approvalFields={approval.fields} />              ),            })          )}        </div>         {status.state === "failed" && (          <div className="mx-5 mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">            {status.message}          </div>        )}         {done && (          <div className="mx-5 mb-4 rounded-md border border-border bg-muted px-3 py-2">            <p className="text-sm font-medium text-foreground">{actionLabel[status.action]} sent</p>            <p className="mt-1 text-sm text-muted-foreground">              Return to your agent and let it continue.            </p>          </div>        )}         <div className="flex shrink-0 flex-col gap-3 border-t border-border px-5 py-4 sm:flex-row sm:items-center sm:justify-between">          <div className="min-w-0 rounded-md bg-muted/50 px-2.5 py-1.5">            <span className="text-xs font-medium text-muted-foreground">Execution </span>            <code className="break-all font-mono text-xs text-foreground">{shortExecutionId}</code>          </div>          {unavailable ? (            <Button type="button" asChild>              <a href="/">Go home</a>            </Button>          ) : done ? (            <CopyButton              value={returnPrompt[status.action]}              label="Copy prompt"              className="h-9 px-4"              onCopy={() => trackEvent("resume_return_prompt_copied", { action: status.action })}            />          ) : (            <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">              <Button                type="button"                variant="outline"                disabled={!canSubmit}                onClick={() => void submit("cancel")}              >                {busy && status.action === "cancel" ? (                  <Loader2 className="size-4 animate-spin" aria-hidden="true" />                ) : (                  <X className="size-4" aria-hidden="true" />                )}                Cancel              </Button>              <Button                type="button"                variant="outline"                disabled={!canSubmit}                onClick={() => void submit("decline")}              >                {busy && status.action === "decline" ? (                  <Loader2 className="size-4 animate-spin" aria-hidden="true" />                ) : (                  <X className="size-4" aria-hidden="true" />                )}                Decline              </Button>              <Button type="button" disabled={!canSubmit} onClick={() => void submit("accept")}>                {busy && status.action === "accept" ? (                  <Loader2 className="size-4 animate-spin" aria-hidden="true" />                ) : (                  <Check className="size-4" aria-hidden="true" />                )}                Approve              </Button>            </div>          )}        </div>      </section>    </main>  );} function PendingRequestDetails({  interaction,  approvalFields,}: {  interaction: PausedInteractionView | null;  approvalFields: ReactNode;}) {  if (!interaction) {    return <div className="text-sm text-muted-foreground">No pending request details found.</div>;  }   const argsJson = interaction.args === undefined ? null : safeJson(interaction.args);   return (    <div className="space-y-4">      <div className="space-y-1">        <div className="text-xs font-medium uppercase tracking-wider text-muted-foreground">          Pending request        </div>        <div className="break-words text-base font-semibold text-foreground">          {interaction.title}        </div>        {interaction.toolId && (          <div className="font-mono text-xs text-muted-foreground">{interaction.toolId}</div>        )}      </div>       {interaction.url && (        <Button type="button" variant="outline" size="sm" asChild>          <a href={interaction.url} target="_blank" rel="noreferrer">            <ExternalLink className="size-4" aria-hidden="true" />            Open link          </a>        </Button>      )}       {argsJson && (        <div className="rounded-md border border-border bg-background">          <div className="border-b border-border px-3 py-2 text-xs font-medium text-muted-foreground">            Arguments          </div>          <pre className="max-h-72 overflow-auto whitespace-pre-wrap p-3 font-mono text-xs leading-5 text-foreground">            {argsJson}          </pre>        </div>      )}       {approvalFields && (        <div className="rounded-md border border-border bg-muted/30 p-3">{approvalFields}</div>      )}    </div>  );}