@nastechai/agent 0.16.0 → 0.17.0

package/src/components/OAuthLoginModal.tsx

@@ -0,0 +1,374 @@
+import { useEffect, useRef, useState } from "react";
+import { ExternalLink, X, Check } from "lucide-react";
+import { Button } from "@nastechai/ui/ui/components/button";
+import { CopyButton } from "@nastechai/ui/ui/components/command-block";
+import { Spinner } from "@nastechai/ui/ui/components/spinner";
+import { H2 } from "@nastechai/ui/ui/components/typography/h2";
+import { api, type OAuthProvider, type OAuthStartResponse } from "@/lib/api";
+import { Input } from "@nastechai/ui/ui/components/input";
+import { useI18n } from "@/i18n";
+import { cn, themedBody } from "@/lib/utils";
+
+interface Props {
+  provider: OAuthProvider;
+  onClose: () => void;
+  onSuccess: (msg: string) => void;
+  onError: (msg: string) => void;
+}
+
+type Phase =
+  | "idle"
+  | "starting"
+  | "awaiting_user"
+  | "submitting"
+  | "polling"
+  | "approved"
+  | "error";
+
+export function OAuthLoginModal({ provider, onClose, onSuccess }: Props) {
+  const [phase, setPhase] = useState<Phase>("starting");
+  const [start, setStart] = useState<OAuthStartResponse | null>(null);
+  const [pkceCode, setPkceCode] = useState("");
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const [secondsLeft, setSecondsLeft] = useState<number | null>(null);
+  const isMounted = useRef(true);
+  const pollTimer = useRef<number | null>(null);
+  const { t } = useI18n();
+
+  // Initiate flow on mount
+  useEffect(() => {
+    isMounted.current = true;
+    api
+      .startOAuthLogin(provider.id)
+      .then((resp) => {
+        if (!isMounted.current) return;
+        setStart(resp);
+        setSecondsLeft(resp.expires_in);
+        setPhase(resp.flow === "device_code" ? "polling" : "awaiting_user");
+        if (resp.flow === "pkce") {
+          window.open(resp.auth_url, "_blank", "noopener,noreferrer");
+        } else {
+          window.open(resp.verification_url, "_blank", "noopener,noreferrer");
+        }
+      })
+      .catch((e) => {
+        if (!isMounted.current) return;
+        setPhase("error");
+        setErrorMsg(`Failed to start login: ${e}`);
+      });
+    return () => {
+      isMounted.current = false;
+      if (pollTimer.current !== null) window.clearInterval(pollTimer.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Tick the countdown
+  useEffect(() => {
+    if (secondsLeft === null) return;
+    if (phase === "approved" || phase === "error") return;
+    const tick = window.setInterval(() => {
+      if (!isMounted.current) return;
+      setSecondsLeft((s) => {
+        if (s !== null && s <= 1) {
+          setPhase("error");
+          setErrorMsg(t.oauth.sessionExpired);
+          return 0;
+        }
+        return s !== null && s > 0 ? s - 1 : 0;
+      });
+    }, 1000);
+    return () => window.clearInterval(tick);
+  }, [secondsLeft, phase, t]);
+
+  // Device-code: poll backend every 2s
+  useEffect(() => {
+    if (!start || start.flow !== "device_code" || phase !== "polling") return;
+    const sid = start.session_id;
+    pollTimer.current = window.setInterval(async () => {
+      try {
+        const resp = await api.pollOAuthSession(provider.id, sid);
+        if (!isMounted.current) return;
+        if (resp.status === "approved") {
+          setPhase("approved");
+          if (pollTimer.current !== null)
+            window.clearInterval(pollTimer.current);
+          onSuccess(`${provider.name} connected`);
+          window.setTimeout(() => isMounted.current && onClose(), 1500);
+        } else if (resp.status !== "pending") {
+          setPhase("error");
+          setErrorMsg(resp.error_message || `Login ${resp.status}`);
+          if (pollTimer.current !== null)
+            window.clearInterval(pollTimer.current);
+        }
+      } catch (e) {
+        if (!isMounted.current) return;
+        setPhase("error");
+        setErrorMsg(`Polling failed: ${e}`);
+        if (pollTimer.current !== null) window.clearInterval(pollTimer.current);
+      }
+    }, 2000);
+    return () => {
+      if (pollTimer.current !== null) window.clearInterval(pollTimer.current);
+    };
+  }, [start, phase, provider.id, provider.name, onSuccess, onClose]);
+
+  const handleSubmitPkceCode = async () => {
+    if (!start || start.flow !== "pkce") return;
+    if (!pkceCode.trim()) return;
+    setPhase("submitting");
+    setErrorMsg(null);
+    try {
+      const resp = await api.submitOAuthCode(
+        provider.id,
+        start.session_id,
+        pkceCode.trim(),
+      );
+      if (!isMounted.current) return;
+      if (resp.ok && resp.status === "approved") {
+        setPhase("approved");
+        onSuccess(`${provider.name} connected`);
+        window.setTimeout(() => isMounted.current && onClose(), 1500);
+      } else {
+        setPhase("error");
+        setErrorMsg(resp.message || "Token exchange failed");
+      }
+    } catch (e) {
+      if (!isMounted.current) return;
+      setPhase("error");
+      setErrorMsg(`Submit failed: ${e}`);
+    }
+  };
+
+  const handleClose = async () => {
+    if (start && phase !== "approved" && phase !== "error") {
+      try {
+        await api.cancelOAuthSession(start.session_id);
+      } catch {
+        // ignore
+      }
+    }
+    onClose();
+  };
+
+  const handleBackdrop = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) handleClose();
+  };
+
+  const fmtTime = (s: number | null) => {
+    if (s === null) return "";
+    const m = Math.floor(s / 60);
+    const r = s % 60;
+    return `${m}:${String(r).padStart(2, "0")}`;
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-background/85 backdrop-blur-sm p-4"
+      onClick={handleBackdrop}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="oauth-modal-title"
+    >
+      <div className={cn(themedBody, "relative w-full max-w-md border border-border bg-card shadow-2xl")}>
+        <Button
+          ghost
+          size="icon"
+          onClick={handleClose}
+          className="absolute right-2 top-2 text-muted-foreground hover:text-foreground"
+          aria-label={t.common.close}
+        >
+          <X />
+        </Button>
+        <div className="p-6 flex flex-col gap-4">
+          <div>
+            <H2
+              id="oauth-modal-title"
+              variant="sm"
+              mondwest
+              className="tracking-wider uppercase"
+            >
+              {t.oauth.connect} {provider.name}
+            </H2>
+            {secondsLeft !== null &&
+              phase !== "approved" &&
+              phase !== "error" && (
+                <p className="text-xs text-muted-foreground mt-1">
+                  {t.oauth.sessionExpires.replace(
+                    "{time}",
+                    fmtTime(secondsLeft),
+                  )}
+                </p>
+              )}
+          </div>
+
+          {phase === "starting" && (
+            <div className="flex items-center gap-3 py-6 text-sm text-muted-foreground">
+              <Spinner />
+              {t.oauth.initiatingLogin}
+            </div>
+          )}
+
+          {start?.flow === "pkce" && phase === "awaiting_user" && (
+            <>
+              <ol className="text-sm space-y-2 list-decimal list-inside text-muted-foreground">
+                <li>{t.oauth.pkceStep1}</li>
+                <li>{t.oauth.pkceStep2}</li>
+                <li>{t.oauth.pkceStep3}</li>
+              </ol>
+              <div className="flex flex-col gap-2">
+                <Input
+                  value={pkceCode}
+                  onChange={(e) => setPkceCode(e.target.value)}
+                  placeholder={t.oauth.pasteCode}
+                  onKeyDown={(e) => e.key === "Enter" && handleSubmitPkceCode()}
+                  autoFocus
+                />
+                <div className="flex items-center gap-2 justify-between">
+                  <a
+                    href={
+                      (start as Extract<OAuthStartResponse, { flow: "pkce" }>)
+                        .auth_url
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
+                  >
+                    <ExternalLink className="h-3 w-3" />
+                    {t.oauth.reOpenAuth}
+                  </a>
+                  <Button
+                    onClick={handleSubmitPkceCode}
+                    disabled={!pkceCode.trim()}
+                  >
+                    {t.oauth.submitCode}
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+
+          {phase === "submitting" && (
+            <div className="flex items-center gap-3 py-6 text-sm text-muted-foreground">
+              <Spinner />
+              {t.oauth.exchangingCode}
+            </div>
+          )}
+
+          {start?.flow === "device_code" && phase === "polling" && (
+            <>
+              <p className="text-sm text-muted-foreground">
+                {t.oauth.enterCodePrompt}
+              </p>
+              <div className="flex items-center justify-between gap-2 border border-border bg-secondary/30 p-4">
+                <code className="font-mono-ui text-2xl tracking-widest text-foreground">
+                  {
+                    (
+                      start as Extract<
+                        OAuthStartResponse,
+                        { flow: "device_code" }
+                      >
+                    ).user_code
+                  }
+                </code>
+                <CopyButton
+                  text={
+                    (
+                      start as Extract<
+                        OAuthStartResponse,
+                        { flow: "device_code" }
+                      >
+                    ).user_code
+                  }
+                />
+              </div>
+              <a
+                href={
+                  (
+                    start as Extract<
+                      OAuthStartResponse,
+                      { flow: "device_code" }
+                    >
+                  ).verification_url
+                }
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
+              >
+                <ExternalLink className="h-3 w-3" />
+                {t.oauth.reOpenVerification}
+              </a>
+              <div className="flex items-center gap-2 text-xs text-muted-foreground border-t border-border pt-3">
+                <Spinner className="text-xs" />
+                {t.oauth.waitingAuth}
+              </div>
+            </>
+          )}
+
+          {phase === "approved" && (
+            <div className="flex items-center gap-3 py-6 text-sm text-success">
+              <Check className="h-5 w-5" />
+              {t.oauth.connectedClosing}
+            </div>
+          )}
+
+          {phase === "error" && (
+            <>
+              <div className="border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+                {errorMsg || t.oauth.loginFailed}
+              </div>
+              <div className="flex justify-end gap-2">
+                <Button outlined onClick={handleClose}>
+                  {t.common.close}
+                </Button>
+                <Button
+                  onClick={() => {
+                    if (start?.session_id) {
+                      api.cancelOAuthSession(start.session_id).catch(() => {});
+                    }
+                    setErrorMsg(null);
+                    setStart(null);
+                    setPkceCode("");
+                    setPhase("starting");
+                    api
+                      .startOAuthLogin(provider.id)
+                      .then((resp) => {
+                        if (!isMounted.current) return;
+                        setStart(resp);
+                        setSecondsLeft(resp.expires_in);
+                        setPhase(
+                          resp.flow === "device_code"
+                            ? "polling"
+                            : "awaiting_user",
+                        );
+                        if (resp.flow === "pkce") {
+                          window.open(
+                            resp.auth_url,
+                            "_blank",
+                            "noopener,noreferrer",
+                          );
+                        } else {
+                          window.open(
+                            resp.verification_url,
+                            "_blank",
+                            "noopener,noreferrer",
+                          );
+                        }
+                      })
+                      .catch((e) => {
+                        if (!isMounted.current) return;
+                        setPhase("error");
+                        setErrorMsg(`${t.common.retry} failed: ${e}`);
+                      });
+                  }}
+                >
+                  {t.common.retry}
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/OAuthProvidersCard.tsx

@@ -0,0 +1,287 @@
+import { useEffect, useState, useCallback, useRef } from "react";
+import {
+  ShieldCheck,
+  ShieldOff,
+  ExternalLink,
+  RefreshCw,
+  Terminal,
+} from "lucide-react";
+import { api, type OAuthProvider } from "@/lib/api";
+import { Button } from "@nastechai/ui/ui/components/button";
+import { CopyButton } from "@nastechai/ui/ui/components/command-block";
+import { Spinner } from "@nastechai/ui/ui/components/spinner";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@nastechai/ui/ui/components/card";
+import { Badge } from "@nastechai/ui/ui/components/badge";
+import { ConfirmDialog } from "@nastechai/ui/ui/components/confirm-dialog";
+import { OAuthLoginModal } from "@/components/OAuthLoginModal";
+import { useI18n } from "@/i18n";
+
+interface Props {
+  onError?: (msg: string) => void;
+  onSuccess?: (msg: string) => void;
+}
+
+function formatExpiresAt(
+  expiresAt: string | null | undefined,
+  expiresInTemplate: string,
+): string | null {
+  if (!expiresAt) return null;
+  try {
+    const dt = new Date(expiresAt);
+    if (Number.isNaN(dt.getTime())) return null;
+    const now = Date.now();
+    const diff = dt.getTime() - now;
+    if (diff < 0) return "expired";
+    const mins = Math.floor(diff / 60_000);
+    if (mins < 60) return expiresInTemplate.replace("{time}", `${mins}m`);
+    const hours = Math.floor(mins / 60);
+    if (hours < 24) return expiresInTemplate.replace("{time}", `${hours}h`);
+    const days = Math.floor(hours / 24);
+    return expiresInTemplate.replace("{time}", `${days}d`);
+  } catch {
+    return null;
+  }
+}
+
+export function OAuthProvidersCard({ onError, onSuccess }: Props) {
+  const [providers, setProviders] = useState<OAuthProvider[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [loginFor, setLoginFor] = useState<OAuthProvider | null>(null);
+  const [disconnectTarget, setDisconnectTarget] =
+    useState<OAuthProvider | null>(null);
+  const { t } = useI18n();
+
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+
+  const refresh = useCallback(() => {
+    setLoading(true);
+    api
+      .getOAuthProviders()
+      .then((resp) => setProviders(resp.providers))
+      .catch((e) => onErrorRef.current?.(`Failed to load providers: ${e}`))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const handleDisconnect = async (provider: OAuthProvider) => {
+    setBusyId(provider.id);
+    setDisconnectTarget(null);
+    try {
+      await api.disconnectOAuthProvider(provider.id);
+      onSuccess?.(`${provider.name} ${t.oauth.disconnect.toLowerCase()}ed`);
+      refresh();
+    } catch (e) {
+      onError?.(`${t.oauth.disconnect} failed: ${e}`);
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const connectedCount =
+    providers?.filter((p) => p.status.logged_in).length ?? 0;
+  const totalCount = providers?.length ?? 0;
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <ShieldCheck className="h-5 w-5 text-muted-foreground" />
+            <CardTitle className="text-base">
+              {t.oauth.providerLogins}
+            </CardTitle>
+          </div>
+          <Button
+            ghost
+            size="icon"
+            className="text-muted-foreground hover:text-foreground"
+            onClick={refresh}
+            disabled={loading}
+            aria-label={t.common.refresh}
+          >
+            {loading ? <Spinner /> : <RefreshCw />}
+          </Button>
+        </div>
+        <CardDescription>
+          {t.oauth.description
+            .replace("{connected}", String(connectedCount))
+            .replace("{total}", String(totalCount))}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {loading && providers === null && (
+          <div className="flex items-center justify-center py-8">
+            <Spinner className="text-xl text-primary" />
+          </div>
+        )}
+        {providers && providers.length === 0 && (
+          <p className="text-sm text-muted-foreground text-center py-8">
+            {t.oauth.noProviders}
+          </p>
+        )}
+        <div className="flex flex-col divide-y divide-border">
+          {providers?.map((p) => {
+            const expiresLabel = formatExpiresAt(
+              p.status.expires_at,
+              t.oauth.expiresIn,
+            );
+            const isBusy = busyId === p.id;
+            return (
+              <div
+                key={p.id}
+                className="flex items-center justify-between gap-4 py-3"
+              >
+                <div className="flex items-start gap-3 min-w-0 flex-1">
+                  {p.status.logged_in ? (
+                    <ShieldCheck className="h-5 w-5 text-success shrink-0 mt-0.5" />
+                  ) : (
+                    <ShieldOff className="h-5 w-5 text-muted-foreground shrink-0 mt-0.5" />
+                  )}
+                  <div className="flex flex-col min-w-0 gap-0.5">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span className="font-medium text-sm">{p.name}</span>
+                      <Badge
+                        tone="outline"
+                        className="text-xs tracking-wide"
+                      >
+                        {t.oauth.flowLabels[p.flow]}
+                      </Badge>
+                      {p.status.logged_in && (
+                        <Badge tone="success" className="text-xs">
+                          {t.oauth.connected}
+                        </Badge>
+                      )}
+                      {expiresLabel === "expired" && (
+                        <Badge tone="destructive" className="text-xs">
+                          {t.oauth.expired}
+                        </Badge>
+                      )}
+                      {expiresLabel && expiresLabel !== "expired" && (
+                        <Badge tone="outline" className="text-xs">
+                          {expiresLabel}
+                        </Badge>
+                      )}
+                    </div>
+                    {p.status.logged_in && p.status.token_preview && (
+                      <span className="truncate text-xs font-mono-ui text-text-secondary">
+                        <span className="text-text-tertiary">token </span>
+                        {p.status.token_preview}
+                        {p.status.source_label && (
+                          <span className="text-text-tertiary">
+                            {" "}
+                            · {p.status.source_label}
+                          </span>
+                        )}
+                      </span>
+                    )}
+                    {!p.status.logged_in && (
+                      <>
+                        <span className="text-xs text-text-secondary">
+                          {t.oauth.notConnected.split("{command}")[0].trimEnd()}
+                          {t.oauth.notConnected.split("{command}")[1] ?? ""}
+                        </span>
+
+                        <div className="flex min-w-0 flex-wrap items-center gap-2">
+                          <code className="font-courier truncate text-xs opacity-60">
+                            {p.cli_command}
+                          </code>
+
+                          <CopyButton
+                            text={p.cli_command}
+                            label={t.oauth.cli}
+                            copiedLabel={t.oauth.copied}
+                          />
+                        </div>
+                      </>
+                    )}
+                    {p.status.error && (
+                      <span className="text-xs text-destructive">
+                        {p.status.error}
+                      </span>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-1.5 shrink-0">
+                  {p.docs_url && (
+                    <a
+                      href={p.docs_url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex"
+                      title={`Open ${p.name} docs`}
+                    >
+                      <Button ghost size="icon">
+                        <ExternalLink />
+                      </Button>
+                    </a>
+                  )}
+                  {!p.status.logged_in && p.flow !== "external" && (
+                    <Button
+                      size="sm"
+                      className="uppercase"
+                      onClick={() => setLoginFor(p)}
+                    >
+                      {t.oauth.login}
+                    </Button>
+                  )}
+                  {p.status.logged_in && p.flow !== "external" && (
+                    <Button
+                      size="sm"
+                      outlined
+                      className="uppercase"
+                      onClick={() => setDisconnectTarget(p)}
+                      disabled={isBusy}
+                      prefix={isBusy ? <Spinner /> : undefined}
+                    >
+                      {t.oauth.disconnect}
+                    </Button>
+                  )}
+                  {p.status.logged_in && p.flow === "external" && (
+                    <span className="text-xs text-text-tertiary italic px-2">
+                      <Terminal className="h-3 w-3 inline mr-0.5" />
+                      {t.oauth.managedExternally}
+                    </span>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+      {loginFor && (
+        <OAuthLoginModal
+          provider={loginFor}
+          onClose={() => {
+            setLoginFor(null);
+            refresh();
+          }}
+          onSuccess={(msg) => onSuccess?.(msg)}
+          onError={(msg) => onError?.(msg)}
+        />
+      )}
+      <ConfirmDialog
+        open={disconnectTarget !== null}
+        onCancel={() => setDisconnectTarget(null)}
+        onConfirm={() => {
+          if (disconnectTarget) void handleDisconnect(disconnectTarget);
+        }}
+        title={`${t.oauth.disconnect} ${disconnectTarget?.name ?? ""}?`}
+        description={`This will remove the stored OAuth tokens for ${disconnectTarget?.name ?? "this provider"}. You will need to re-authenticate to use it again.`}
+        destructive
+        confirmLabel={t.oauth.disconnect}
+      />
+    </Card>
+  );
+}