AgentHub/client/src/components/lanes/CloneSourcesForm.tsx

/**
 * @file CloneSourcesForm — a workspace's "Or clone repositories" box, under
 * its Folders card: one URL per line, each cloned BESIDE the workspace folder
 * (`POST /api/lanes/:id/sources/clone`, the server picks the folder) and
 * added as an extra folder, one after another. A host that wants a login
 * (409 `ECREDENTIALS`) opens one login row; Retry re-runs only the failed
 * URLs with it, like Add workspace → Clone. Before anything runs, each URL
 * is checked against the user's own git identity (`GET /api/me/git`): an SSH
 * link while the account has no SSH key is not cloned at all — the user is
 * sent to Settings → Git first — and an HTTPS host with no saved login offers
 * the login row up front (optional: a public repo needs none). The identity is
 * read again when the window regains focus, so a key made in another tab
 * counts at once. The running clone shows its queue place, then git's
 * progress (`CloneProgress`); **Partial clone** sends `partial: true`.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Check, Loader2, X } from "lucide-react";
import { api, type GitIdentity, type LaneSourcesView } from "../../lib/api";
import { CloneProgress, newCloneToken } from "./CloneProgress";

type Row = {
  url: string;
  state: "wait" | "busy" | "done" | "failed";
  note?: string;
  /** The note points at Settings → Git (no key, or a key the host refused). */
  ssh?: boolean;
  /** While busy: the progress token CloneProgress polls. */
  token?: string;
};
type Login = { host: string; username: string; token: string; remember: boolean };

/** How a clone URL reaches its host: `ssh://…` or scp-like `user@host:path`, else HTTPS. */
export function cloneTarget(url: string): { kind: "ssh" | "https"; host: string } | null {
  const scp = /^(?:[^@\s/]+@)?([^:/\s]+):(?!\/\/)/.exec(url);
  if (scp?.[1]) return { kind: "ssh", host: scp[1] };
  try {
    const u = new URL(url);
    if (u.protocol === "ssh:") return { kind: "ssh", host: u.hostname };
    if (u.protocol === "https:" || u.protocol === "http:") return { kind: "https", host: u.host };
  } catch {
    /* not a URL yet — the server's allowlist answers that one */
  }
  return null;
}

/** What the identity lacks for one URL: `ssh` blocks the clone, `https` only asks. */
function missingFor(
  url: string,
  id: GitIdentity | null
): { kind: "ssh" | "https"; host: string } | null {
  const target = cloneTarget(url);
  if (!id || !target) return null;
  if (target.kind === "ssh") {
    const keys = id.sshKeys?.length ?? (id.ssh ? 1 : 0);
    return keys > 0 ? null : target;
  }
  return id.https.some((h) => h.host === target.host) ? null : target;
}

export function CloneSourcesForm({
  laneId,
  parent,
  onAdded,
}: {
  laneId: number;
  /** Where the clones land: the workspace folder's parent, shown only. */
  parent: string;
  onAdded: (view: LaneSourcesView) => void;
}) {
  const { t } = useTranslation("lanes");
  const [text, setText] = useState("");
  const [rows, setRows] = useState<Row[]>([]);
  const [busy, setBusy] = useState(false);
  const [login, setLogin] = useState<Login | null>(null);
  const [partial, setPartial] = useState(false);
  const [identity, setIdentity] = useState<GitIdentity | null>(null);

  // An unknown identity (an older server, a failed read) checks nothing: the
  // server's own ECREDENTIALS / ESSHAUTH answers still cover it.
  const loadIdentity = useCallback(
    () =>
      Promise.resolve()
        .then(() => api.gitIdentity.get())
        .then(setIdentity)
        .catch(() => {}),
    []
  );
  useEffect(() => {
    void loadIdentity();
    const onFocus = () => void loadIdentity();
    window.addEventListener("focus", onFocus);
    return () => window.removeEventListener("focus", onFocus);
  }, [loadIdentity]);

  const urls = (s: string) => [
    ...new Set(
      s
        .split("\n")
        .map((l) => l.trim())
        .filter(Boolean)
    ),
  ];

  const cloneAll = async (list: string[]) => {
    if (busy || !list.length) return;
    setBusy(true);
    // An SSH link with no key on the account would only fail at the host:
    // it is not tried, and its row says what to set up first.
    const next: Row[] = list.map((url) => {
      const miss = missingFor(url, identity);
      return miss?.kind === "ssh"
        ? { url, state: "failed", note: t("clone.sshNoKey", { host: miss.host }), ssh: true }
        : { url, state: "wait" };
    });
    const show = () => setRows([...next]);
    show();
    let asked: Login | null = null;
    for (const row of next) {
      if (row.state === "failed") continue;
      row.state = "busy";
      row.token = newCloneToken();
      show();
      try {
        const view = await api.lanes.cloneFolder(laneId, {
          url: row.url,
          progressToken: row.token,
          ...(partial ? { partial: true } : {}),
          ...(login?.username.trim() && login.token
            ? {
                credentials: {
                  username: login.username.trim(),
                  password: login.token,
                  remember: login.remember,
                },
              }
            : {}),
        });
        row.state = "done";
        onAdded(view);
      } catch (err) {
        const e = err as { code?: string; auth?: { host?: string }; message?: string };
        const host = e.auth?.host || row.url;
        row.state = "failed";
        if (e.code === "ECREDENTIALS") {
          row.note = t(login?.token ? "clone.loginRejected" : "clone.loginNeeded", { host });
          asked ??= {
            host,
            username: login?.username ?? "",
            token: "",
            remember: login?.remember ?? true,
          };
        } else if (e.code === "ESSHAUTH") {
          row.note = t("clone.sshRefused", { host });
          row.ssh = true;
        } else {
          row.note = e.message || String(err);
        }
      }
      row.token = undefined;
      show();
    }
    if (asked) setLogin(asked);
    // What is left to do stays in the box; what was added leaves it.
    setText(
      next
        .filter((r) => r.state !== "done")
        .map((r) => r.url)
        .join("\n")
    );
    setBusy(false);
  };

  const failed = rows.filter((r) => r.state === "failed").map((r) => r.url);

  // Checked as the user types, so a missing key is said before Clone is pressed.
  const missing = urls(text)
    .map((u) => missingFor(u, identity))
    .filter((m): m is NonNullable<typeof m> => m !== null);
  const sshHosts = [...new Set(missing.filter((m) => m.kind === "ssh").map((m) => m.host))];
  const httpsHosts = [...new Set(missing.filter((m) => m.kind === "https").map((m) => m.host))];
  const settingsLink = (
    <a href="/settings/git#git-identity" target="_blank" rel="noreferrer" className="underline">
      {t("clone.sshSettings")}
    </a>
  );

  return (
    <div className="space-y-2 border-t border-border-light pt-2" data-testid="workspace-clone">
      <p className="text-[10px] uppercase tracking-wide text-fg-muted">{t("home.cloneFolders")}</p>
      <textarea
        data-testid="workspace-clone-input"
        aria-label={t("home.cloneFolders")}
        placeholder={t("home.clonePlaceholder")}
        rows={3}
        value={text}
        onChange={(e) => setText(e.target.value)}
        className="w-full rounded border border-border bg-surface-1 px-2 py-1 font-mono text-[11px] text-fg-primary"
      />
      <p className="text-[11px] text-fg-muted">{t("home.cloneHint", { path: parent })}</p>
      <label
        className="flex items-center gap-1.5 text-[11px] text-fg-secondary"
        title={t("clone.partialHint")}
      >
        <input
          type="checkbox"
          data-testid="workspace-clone-partial"
          checked={partial}
          onChange={(e) => setPartial(e.target.checked)}
        />
        {t("clone.partial")}
      </label>
      {sshHosts.length > 0 && (
        <p
          role="alert"
          data-testid="workspace-clone-need-ssh"
          className="text-[11px] text-status-danger"
        >
          {t("home.cloneNeedSsh", { hosts: sshHosts.join(", ") })} {settingsLink}
        </p>
      )}
      {httpsHosts.length > 0 && !login && (
        <p data-testid="workspace-clone-need-login" className="text-[11px] text-status-warning">
          {t("home.cloneNeedLogin", { hosts: httpsHosts.join(", ") })}{" "}
          <button
            type="button"
            className="underline"
            onClick={() =>
              setLogin({ host: httpsHosts[0] ?? "", username: "", token: "", remember: true })
            }
          >
            {t("home.cloneEnterLogin")}
          </button>
        </p>
      )}
      {login && (
        <div className="space-y-1.5 rounded border border-border-light p-2">
          <div className="flex gap-2">
            <input
              aria-label={t("clone.username")}
              placeholder={t("clone.username")}
              value={login.username}
              onChange={(e) => setLogin({ ...login, username: e.target.value })}
              className="min-w-0 flex-1 rounded border border-border bg-surface-1 px-2 py-1 text-[11px] text-fg-primary"
            />
            <input
              type="password"
              aria-label={t("clone.token")}
              placeholder={t("clone.token")}
              value={login.token}
              onChange={(e) => setLogin({ ...login, token: e.target.value })}
              className="min-w-0 flex-1 rounded border border-border bg-surface-1 px-2 py-1 text-[11px] text-fg-primary"
            />
          </div>
          <label className="flex items-center gap-1.5 text-[11px] text-fg-secondary">
            <input
              type="checkbox"
              checked={login.remember}
              onChange={(e) => setLogin({ ...login, remember: e.target.checked })}
            />
            {t("clone.remember")}
          </label>
        </div>
      )}
      <div className="flex justify-end gap-2">
        {failed.length > 0 && !busy && (
          <button type="button" onClick={() => void cloneAll(failed)} className="btn-ghost text-xs">
            {t("home.cloneRetry")}
          </button>
        )}
        <button
          type="button"
          data-testid="workspace-clone-run"
          disabled={busy || !urls(text).length}
          onClick={() => void cloneAll(urls(text))}
          className="btn-ghost text-xs"
        >
          {busy ? t("clone.cloning") : t("home.cloneRun")}
        </button>
      </div>
      {rows.length > 0 && (
        <ul className="space-y-1" data-testid="workspace-clone-rows">
          {rows.map((r) => (
            <li key={r.url} className="text-[11px]">
              <span className="flex items-center gap-1.5">
                {r.state === "busy" ? (
                  <Loader2 className="h-3 w-3 shrink-0 animate-spin text-fg-muted" />
                ) : r.state === "done" ? (
                  <Check
                    className="h-3 w-3 shrink-0 text-status-success"
                    aria-label={t("home.cloneDone")}
                  />
                ) : r.state === "failed" ? (
                  <X className="h-3 w-3 shrink-0 text-status-danger" />
                ) : (
                  <span className="h-3 w-3 shrink-0" />
                )}
                <span className="min-w-0 truncate font-mono text-fg-secondary" title={r.url}>
                  {r.url}
                </span>
              </span>
              {r.state === "busy" && r.token && (
                <div className="ml-[18px] mt-0.5">
                  <CloneProgress token={r.token} />
                </div>
              )}
              {r.note && (
                <span className="ml-[18px] block text-status-danger">
                  {r.note}
                  {r.ssh && <> {settingsLink}</>}
                </span>
              )}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}