hyperhive/frontend/packages/swarm-ui/src/agent/claude-login/ClaudeLoginDialog.tsx

// <ClaudeLoginDialog> — logs one agent in to claude through the swarm's
// login minter. Opening it starts the login (`POST …/claude-login`), which
// answers with the URL claude printed; the operator opens it and pastes the
// code back (`POST …/claude-login/code`). Closing it while the code is
// still awaited stops the login (`DELETE …/claude-login`).
//
// Mounted only while open, so each open is a fresh login.
import { useEffect, useState } from "preact/hooks";
import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
import { Button } from "../../ui/button/Button.js";
import { Dialog } from "../../ui/dialog/Dialog.js";
import { Panel } from "../../ui/panel/Panel.js";
import { TextField } from "../../ui/text-field/TextField.js";
import {
  afterCode,
  afterStart,
  claudeLoginPath,
  leavesLoginRunning,
  pastedCode,
  type LoginStep,
} from "./ClaudeLoginSteps.js";
import "./ClaudeLoginDialog.css";

async function problemOf(r: Response): Promise<ProblemDetails | null> {
  return r.ok ? null : await readApiError(r);
}

export function ClaudeLoginDialog({
  agent,
  onClose,
}: {
  agent: string;
  onClose: () => void;
}) {
  const [step, setStep] = useState<LoginStep>({ step: "starting" });
  const [code, setCode] = useState("");

  useEffect(() => {
    let live = true;
    void (async () => {
      try {
        const r = await fetch(claudeLoginPath(agent), { method: "POST" });
        const problem = await problemOf(r);
        const next = afterStart(
          problem ? { problem } : ((await r.json()) as { url: string }),
        );
        if (live) setStep(next);
      } catch (err) {
        if (live) setStep(afterStart({ problem: { detail: String(err) } }));
      }
    })();
    return () => {
      live = false;
    };
  }, [agent]);

  function close() {
    if (leavesLoginRunning(step)) {
      void fetch(claudeLoginPath(agent), { method: "DELETE" });
    }
    onClose();
  }

  async function submit(e: Event) {
    e.preventDefault();
    const pasted = pastedCode(code);
    if (step.step !== "code" || pasted === null) return;
    const { url } = step;
    setStep({ step: "submitting", url });
    try {
      const r = await fetch(claudeLoginPath(agent, true), {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ code: pasted }),
      });
      setStep(afterCode(await problemOf(r)));
    } catch (err) {
      setStep(afterCode({ detail: String(err) }));
    }
    setCode("");
  }

  return (
    <Dialog open onClose={close} label={`log ${agent} in to claude`} plain>
      <Panel title={`log in to claude — ${agent}`} icon="🔑" onClose={close}>
        {step.step === "starting" && <p>starting the login…</p>}
        {(step.step === "code" || step.step === "submitting") && (
          <>
            <p>
              Open{" "}
              <a href={step.url} target="_blank" rel="noopener noreferrer">
                the claude login page
              </a>
              , sign in with this agent's account, and paste the code it shows.
            </p>
            <form class="claude-login-form" onSubmit={submit}>
              <TextField
                id="claude-login-code"
                label="code"
                value={code}
                required
                onInput={setCode}
              />
              <Button
                variant="primary"
                type="submit"
                disabled={step.step === "submitting"}
              >
                {step.step === "submitting" ? "logging in…" : "log in"}
              </Button>
            </form>
          </>
        )}
        {step.step === "stored" && (
          <p class="claude-login-ok">
            Stored. <strong>{agent}</strong> picks the login up within a minute
            and resumes.
          </p>
        )}
        {step.step === "failed" && (
          <ApiErrorPanel
            context="the claude login failed; close and start again"
            problem={step.problem}
          />
        )}
      </Panel>
    </Dialog>
  );
}