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.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

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

type Row = { url: string; state: "wait" | "busy" | "done" | "failed"; note?: string };
type Login = { host: string; username: string; token: string; remember: boolean };

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 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);
    const next: Row[] = list.map((url) => ({ url, state: "wait" }));
    const show = () => setRows([...next]);
    show();
    let asked: Login | null = null;
    for (const row of next) {
      row.state = "busy";
      show();
      try {
        const view = await api.lanes.cloneFolder(laneId, {
          url: row.url,
          ...(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 });
        } else {
          row.note = e.message || String(err);
        }
      }
      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);

  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>
      {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.note && <span className="ml-[18px] block text-status-danger">{r.note}</span>}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}