import { useEffect, useState } from "react";import { Effect, Exit } from "effect"; import {  AlertDialog,  AlertDialogAction,  AlertDialogCancel,  AlertDialogContent,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogTrigger,} from "@executor-js/react/components/alert-dialog";import { Alert, AlertDescription, AlertTitle } from "@executor-js/react/components/alert";import { Button } from "@executor-js/react/components/button"; import type { GitHubCustomToolsSourceSummary } from "../api";import {  consoleIntegrationHref,  getCustomToolSourceEffect,  removeCustomToolSourceEffect,  syncCustomToolSourceEffect,} from "./custom-tools-client";import { sourcePanelModel, syncNoticeFromResult, type SyncNoticeModel } from "./source-panel-model"; type LoadState =  | { readonly status: "loading" }  | { readonly status: "error"; readonly message: string }  | { readonly status: "missing" }  | { readonly status: "ready"; readonly source: GitHubCustomToolsSourceSummary }; export default function CustomToolsAccountsPanel(props: {  readonly sourceId: string;  readonly integrationName: string;}) {  const [loadState, setLoadState] = useState<LoadState>({ status: "loading" });  const [syncing, setSyncing] = useState(false);  const [removing, setRemoving] = useState(false);  const [notice, setNotice] = useState<SyncNoticeModel | null>(null);  const [removeError, setRemoveError] = useState<string | null>(null);   const loadSource = async () => {    setLoadState({ status: "loading" });    const exit = await Effect.runPromiseExit(getCustomToolSourceEffect(props.sourceId));    if (Exit.isFailure(exit)) {      setLoadState({ status: "error", message: "Failed to load custom tools source." });      return;    }    const source = exit.value.source;    setLoadState(source ? { status: "ready", source } : { status: "missing" });  };   useEffect(() => {    let active = true;    void (async () => {      const exit = await Effect.runPromiseExit(getCustomToolSourceEffect(props.sourceId));      if (!active) return;      if (Exit.isFailure(exit)) {        setLoadState({ status: "error", message: "Failed to load custom tools source." });        return;      }      const source = exit.value.source;      setLoadState(source ? { status: "ready", source } : { status: "missing" });    })();    return () => {      active = false;    };  }, [props.sourceId]);   const syncSource = async (source: GitHubCustomToolsSourceSummary) => {    setSyncing(true);    setNotice(null);    const beforeTools = source.tools;    const exit = await Effect.runPromiseExit(syncCustomToolSourceEffect({ slug: source.slug }));    if (Exit.isFailure(exit)) {      setNotice({        status: "failed",        message: "Sync failed.",        added: [],        removed: [],        errors: ["Failed to sync custom tools."],        skipped: [],      });      setSyncing(false);      return;    }    const result = exit.value;    setNotice(syncNoticeFromResult(result, beforeTools));    if (result.status !== "failed") await loadSource();    setSyncing(false);  };   const removeSource = async (source: GitHubCustomToolsSourceSummary) => {    setRemoving(true);    setRemoveError(null);    const exit = await Effect.runPromiseExit(removeCustomToolSourceEffect(source.slug));    if (Exit.isFailure(exit)) {      setRemoveError("Failed to remove custom tools source.");      setRemoving(false);      return;    }    window.location.assign(consoleIntegrationHref("/integrations"));  };   return (    <div className="mx-auto max-w-3xl space-y-6 px-6 py-8">      {loadState.status === "loading" && (        <div className="rounded-lg border border-border p-4 text-sm text-muted-foreground">          Loading source...        </div>      )}       {loadState.status === "error" && (        <ErrorWithRetry message={loadState.message} onRetry={() => void loadSource()} />      )}       {loadState.status === "missing" && (        <Alert variant="destructive">          <AlertTitle>Source not found</AlertTitle>          <AlertDescription>            The custom tools source for {props.integrationName} is no longer available.          </AlertDescription>        </Alert>      )}       {loadState.status === "ready" && (        <SourceDetail          source={loadState.source}          notice={notice}          removeError={removeError}          syncing={syncing}          removing={removing}          onSync={() => void syncSource(loadState.source)}          onRemove={() => void removeSource(loadState.source)}        />      )}    </div>  );} function ErrorWithRetry(props: { readonly message: string; readonly onRetry: () => void }) {  return (    <Alert variant="destructive">      <AlertTitle>Failed to load source</AlertTitle>      <AlertDescription>        <div className="space-y-3">          <p>{props.message}</p>          <Button type="button" size="sm" variant="outline" onClick={props.onRetry}>            Retry          </Button>        </div>      </AlertDescription>    </Alert>  );} function SourceDetail(props: {  readonly source: GitHubCustomToolsSourceSummary;  readonly notice: SyncNoticeModel | null;  readonly removeError: string | null;  readonly syncing: boolean;  readonly removing: boolean;  readonly onSync: () => void;  readonly onRemove: () => void;}) {  const { source, notice } = props;  const model = sourcePanelModel(source);  const noticeHasDetails =    notice !== null &&    (notice.added.length > 0 ||      notice.removed.length > 0 ||      notice.errors.length > 0 ||      notice.skipped.length > 0 ||      notice.upstreamSha !== undefined);  return (    <div className="min-w-0 rounded-lg border border-border bg-card">      <div className="flex items-start justify-between gap-4 border-b border-border p-4">        <div className="min-w-0">          <h3 className="truncate text-sm font-medium text-foreground">{model.title}</h3>          <p className="mt-1 truncate text-xs text-muted-foreground">            <a              className="underline underline-offset-2"              href={model.repository.href}              target="_blank"              rel="noreferrer"            >              {model.repository.label}            </a>          </p>        </div>        <div className="flex shrink-0 gap-2">          <Button type="button" size="sm" onClick={props.onSync} loading={props.syncing}>            Sync          </Button>          <AlertDialog>            <AlertDialogTrigger asChild>              <Button                type="button"                size="sm"                variant="outline"                className="border-destructive/30 text-destructive hover:bg-destructive/10"                disabled={props.removing}              >                Remove              </Button>            </AlertDialogTrigger>            <AlertDialogContent size="sm">              <AlertDialogHeader>                <AlertDialogTitle>Remove {source.name}?</AlertDialogTitle>                <AlertDialogDescription>                  This removes {source.tools.length} {source.tools.length === 1 ? "tool" : "tools"}{" "}                  from the catalog. The GitHub repository is untouched; re-add it to sync again.                </AlertDialogDescription>              </AlertDialogHeader>              <AlertDialogFooter>                <AlertDialogCancel>Cancel</AlertDialogCancel>                <AlertDialogAction variant="destructive" onClick={props.onRemove}>                  {props.removing ? "Removing..." : "Remove source"}                </AlertDialogAction>              </AlertDialogFooter>            </AlertDialogContent>          </AlertDialog>        </div>      </div>       <div className="space-y-5 p-4">        <div className="flex flex-col gap-1 text-sm">          <p className="text-muted-foreground">{model.lastSynced}</p>          <p>            <a              className="font-medium underline underline-offset-2"              href={model.publishedTools.href}            >              {model.publishedTools.label}            </a>{" "}            <span className="text-muted-foreground">published</span>          </p>        </div>         {notice && (          <Alert variant={notice.status === "failed" ? "destructive" : "default"}>            <AlertTitle>{notice.message}</AlertTitle>            {noticeHasDetails && (              <AlertDescription>                <div className="space-y-1">                  {notice.added.length > 0 && <p>Added: {notice.added.join(", ")}</p>}                  {notice.removed.length > 0 && <p>Removed: {notice.removed.join(", ")}</p>}                  {notice.errors.map((error) => (                    <p key={error}>{error}</p>                  ))}                  {notice.skipped.length > 0 && (                    <div className="space-y-1">                      <p>Skipped:</p>                      <ul className="space-y-1">                        {notice.skipped.map((entry) => (                          <li key={`${entry.path}:${entry.reason}`} className="flex gap-2">                            <span className="min-w-0 flex-1 truncate font-mono text-xs">                              {entry.path}                            </span>                            <span className="shrink-0 text-xs text-muted-foreground">                              {entry.reason}                            </span>                          </li>                        ))}                      </ul>                    </div>                  )}                  {notice.upstreamSha && (                    <p className="font-mono text-xs text-muted-foreground">                      Commit {notice.upstreamSha}                    </p>                  )}                </div>              </AlertDescription>            )}          </Alert>        )}         {props.removeError && <FormErrorMessage message={props.removeError} />}      </div>    </div>  );} function FormErrorMessage(props: { readonly message: string }) {  return (    <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">      <p className="text-[12px] text-destructive">{props.message}</p>    </div>  );}