codecraft/web/src/components/settings/ClaudeCode.tsx

import { useEffect, useState } from "react";
import { api, get, post } from "../../api";
import { confirmDialog, toast } from "../../dialogs";
import { useT } from "../../i18n";
import { Icon } from "../Icon";
import { Spinner } from "../Activity";
import { useStore } from "../../store";

interface Status {
  installed: boolean;
  logged_in?: boolean;
  method?: string;
  email?: string;
  org?: string;
  expires?: string;
  login_in_progress?: boolean;
  error?: string;
  version?: string | null;
  latest?: string | null;
  update_available?: boolean;
  output?: string;
}

/**
 * Claude Code: sign in from the browser. The CLI prints a sign-in URL; the Anthropic page shows
 * a code after login that is pasted here and handed back to the CLI on the server.
 */
export function ClaudeCode() {
  const t = useT();
  const [status, setStatus] = useState<Status>();
  const [url, setUrl] = useState<string>();
  const [code, setCode] = useState("");
  const [busy, setBusy] = useState(false);
  const [console_, setConsole] = useState(false);
  const isAdmin = useStore((s) => s.me?.role === "admin");
  const [updating, setUpdating] = useState(false);
  const [checking, setChecking] = useState(false);
  const [updateLog, setUpdateLog] = useState<string>();

  const check = async () => {
    setChecking(true);
    try {
      setStatus(await get<Status>("/claude/status?refresh=true"));
    } catch (e: any) {
      toast(e.message);
    } finally {
      setChecking(false);
    }
  };
  const update = async () => {
    setUpdating(true);
    setUpdateLog(undefined);
    try {
      const r = await post<Status>("/claude/update", {});
      setStatus(r);
      setUpdateLog(r.output);
      toast(t("claude.updated", { version: r.version ?? "" }), "success");
    } catch (e: any) {
      setUpdateLog(e.message);
      toast(t("claude.updateFailed"));
    } finally {
      setUpdating(false);
    }
  };

  const load = () => get<Status>("/claude/status").then(setStatus, (e) => setStatus({ installed: false, error: e.message }));
  useEffect(() => void load(), []);

  const start = async () => {
    setBusy(true);
    try {
      const r = await post<{ url: string }>("/claude/login", { console: console_ });
      setUrl(r.url);
      setCode("");
    } catch (e: any) {
      toast(e.message);
    } finally {
      setBusy(false);
    }
  };
  const submit = async () => {
    setBusy(true);
    try {
      setStatus(await post<Status>("/claude/login/code", { code }));
      setUrl(undefined);
      setCode("");
      toast(t("claude.signedIn"), "success");
    } catch (e: any) {
      toast(e.message);
    } finally {
      setBusy(false);
    }
  };
  const cancel = async () => {
    await api("/claude/login", { method: "DELETE" }).catch(() => undefined);
    setUrl(undefined);
    setCode("");
  };
  const logout = async () => {
    if (!(await confirmDialog({ message: t("claude.logoutConfirm"), danger: true, confirmLabel: t("claude.logout") }))) return;
    try {
      setStatus(await post<Status>("/claude/logout", {}));
    } catch (e: any) {
      toast(e.message);
    }
  };

  return (
    <div className="panel">
      <h3>
        <Icon name="robot" /> {t("claude.title")}
        <span className="spacer" />
        {status?.logged_in && (
          <button className="small ghost danger" onClick={logout}>
            {t("claude.logout")}
          </button>
        )}
      </h3>
      <div className="hint" style={{ marginBottom: 10 }}>{t("claude.intro")}</div>
      {!status && <Spinner />}
      {status && !status.installed && <div className="notice err">{status.error ?? t("claude.notInstalled")}</div>}
      {status?.installed && (
        <div className="row" style={{ gap: 8, flexWrap: "wrap", marginBottom: 10 }}>
          <span className="chip mono">{t("claude.version", { version: status.version ?? "?" })}</span>
          {status.update_available ? (
            <>
              <span className="chip warn">{t("claude.updateAvailable", { version: status.latest ?? "" })}</span>
              {isAdmin ? (
                <button className="small primary" disabled={updating} onClick={update}>
                  {updating ? <Spinner small /> : <Icon name="download" />} {updating ? t("claude.updating") : t("claude.update")}
                </button>
              ) : (
                <span className="hint">{t("claude.updateAdmin")}</span>
              )}
            </>
          ) : (
            status.latest && <span className="chip">{t("claude.upToDate")}</span>
          )}
          <button className="small ghost" disabled={checking || updating} onClick={check} title={t("claude.checkNow")} aria-label={t("claude.checkNow")}>
            {checking ? <Spinner small /> : <Icon name="refresh" />}
          </button>
        </div>
      )}
      {updateLog && (
        <details style={{ marginBottom: 10 }}>
          <summary className="hint" style={{ cursor: "pointer" }}>{t("claude.updateLog")}</summary>
          <pre className="mono" style={{ whiteSpace: "pre-wrap", maxHeight: 200, overflow: "auto" }}>{updateLog}</pre>
        </details>
      )}
      {status?.installed && status.logged_in && (
        <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
          <span className="chip">
            <Icon name="check" className="tiny" /> {t("claude.signedInAs", { who: status.email || status.org || status.method || "" })}
          </span>
          {status.method && <span className="chip">{status.method}</span>}
          {status.expires && <span className="hint">{t("claude.expires", { date: new Date(status.expires).toLocaleDateString() })}</span>}
        </div>
      )}
      {status?.installed && !status.logged_in && !url && (
        <>
          <label className="row" style={{ marginBottom: 8 }}>
            <input type="checkbox" checked={console_} onChange={(e) => setConsole(e.target.checked)} /> {t("claude.console")}
          </label>
          <button className="primary" disabled={busy} onClick={start}>
            {busy ? <Spinner small /> : <Icon name="lock" />} {t("claude.signIn")}
          </button>
        </>
      )}
      {url && (
        <ol className="cli-steps">
          <li>
            <a className="button" href={url} target="_blank" rel="noreferrer">
              <Icon name="external" /> {t("claude.openLogin")}
            </a>
            <div className="hint">{t("claude.step1")}</div>
          </li>
          <li>
            {t("claude.step2")}
            <div className="row" style={{ marginTop: 6 }}>
              <input style={{ flex: 1 }} value={code} placeholder={t("claude.codePlaceholder")} autoComplete="off" autoCapitalize="off" spellCheck={false} onChange={(e) => setCode(e.target.value)} onKeyDown={(e) => e.key === "Enter" && code.trim() && void submit()} />
              <button className="primary" disabled={busy || !code.trim()} onClick={submit}>
                {busy ? <Spinner small /> : <Icon name="check" />} {t("claude.confirm")}
              </button>
              <button onClick={cancel}>{t("common.cancel")}</button>
            </div>
          </li>
        </ol>
      )}
    </div>
  );
}