[Init] Initial commit - NetMesh terminal manager

components/settings/tabs/ai/CursorSdkCard.tsx

@@ -0,0 +1,231 @@
+import React, { useEffect, useState } from "react";
+import { Check, Eye, EyeOff, RefreshCw } from "lucide-react";
+import { useI18n } from "../../../../application/i18n/I18nProvider";
+import { decryptField } from "../../../../infrastructure/persistence/secureFieldAdapter";
+import type { CursorAuthMode } from "../../../../infrastructure/ai/types";
+import { Button } from "../../../ui/button";
+import { cn } from "../../../../lib/utils";
+import { isCursorRuntimeInstalled, type AgentPathInfo } from "./types";
+
+export const CursorSdkCard: React.FC<{
+  pathInfo: AgentPathInfo | null;
+  isResolvingPath: boolean;
+  encryptedApiKey?: string;
+  authMode: CursorAuthMode;
+  onAuthModeChange: (mode: CursorAuthMode) => void;
+  onSaveApiKey: (apiKey: string) => Promise<void>;
+  onRecheckPath: () => void;
+}> = ({
+  pathInfo,
+  isResolvingPath,
+  encryptedApiKey,
+  authMode,
+  onAuthModeChange,
+  onSaveApiKey,
+  onRecheckPath,
+}) => {
+  const { t } = useI18n();
+  const [apiKeyDraft, setApiKeyDraft] = useState("");
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [isDecrypting, setIsDecrypting] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    setSaved(false);
+    if (!encryptedApiKey) {
+      setApiKeyDraft("");
+      return;
+    }
+    setIsDecrypting(true);
+    decryptField(encryptedApiKey)
+      .then((value) => {
+        if (!cancelled) setApiKeyDraft(value ?? "");
+      })
+      .catch(() => {
+        if (!cancelled) setApiKeyDraft("");
+      })
+      .finally(() => {
+        if (!cancelled) setIsDecrypting(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [encryptedApiKey]);
+
+  const installed = isCursorRuntimeInstalled(pathInfo);
+  const hasStoredApiKey = Boolean(encryptedApiKey);
+  const usesEnvApiKey = pathInfo?.authSource === "CURSOR_API_KEY" || (
+    pathInfo?.apiKeyOk && !hasStoredApiKey && pathInfo?.authSource !== "settings"
+  );
+  // CLI login is only proven by the dedicated probe — never generic `authenticated`
+  // (which is also true for env/settings API keys).
+  const hasCliLogin = Boolean(
+    pathInfo?.cliLoginOk || pathInfo?.authSource === "cli-login",
+  );
+  const hasAnyApiKey = hasStoredApiKey || Boolean(pathInfo?.apiKeyOk) || usesEnvApiKey
+    || pathInfo?.authSource === "settings"
+    || pathInfo?.authSource === "CURSOR_API_KEY";
+  const isApiKeyMode = authMode === "api-key";
+  const isCliMode = authMode === "cli-login";
+  const available = isCliMode
+    ? hasCliLogin
+    : (hasAnyApiKey && Boolean(pathInfo?.sdkInstalled ?? true));
+  const canSave = isApiKeyMode && !isSaving && !isDecrypting && (Boolean(apiKeyDraft.trim()) || hasStoredApiKey);
+
+  const installStatus = isResolvingPath
+    ? t("ai.cursor.detecting")
+    : installed
+      ? t("ai.cursor.installed")
+      : t("ai.cursor.notInstalled");
+
+  const authStatus = isCliMode
+    ? hasCliLogin
+      ? (pathInfo?.cliEmail
+        ? t("ai.cursor.cliLoginAs", { email: pathInfo.cliEmail })
+        : t("ai.cursor.cliLoginOk"))
+      : t("ai.cursor.cliLoginMissing")
+    : hasAnyApiKey
+      ? usesEnvApiKey && !hasStoredApiKey
+        ? t("ai.cursor.apiKeyFromEnv")
+        : t("ai.cursor.apiKeyConfigured")
+      : t("ai.cursor.apiKeyMissing");
+
+  const installStatusClassName = isResolvingPath
+    ? "text-muted-foreground"
+    : installed
+      ? "text-emerald-500"
+      : "text-amber-500";
+  const authStatusClassName = isCliMode
+    ? (hasCliLogin ? "text-emerald-500" : "text-amber-500")
+    : (hasAnyApiKey ? "text-emerald-500" : "text-amber-500");
+
+  const handleSave = async () => {
+    if (!isApiKeyMode) return;
+    setIsSaving(true);
+    setSaved(false);
+    try {
+      await onSaveApiKey(apiKeyDraft.trim());
+      setSaved(true);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="rounded-lg border bg-card p-4 space-y-3">
+      <div className="flex gap-1 rounded-md border border-border/60 p-0.5 bg-muted/30">
+        <button
+          type="button"
+          onClick={() => onAuthModeChange("cli-login")}
+          className={cn(
+            "flex-1 h-7 rounded text-xs font-medium transition-colors",
+            isCliMode ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
+          )}
+        >
+          {t("ai.cursor.modeCli")}
+        </button>
+        <button
+          type="button"
+          onClick={() => onAuthModeChange("api-key")}
+          className={cn(
+            "flex-1 h-7 rounded text-xs font-medium transition-colors",
+            isApiKeyMode ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
+          )}
+        >
+          {t("ai.cursor.modeApiKey")}
+        </button>
+      </div>
+
+      <p className="text-[11px] text-muted-foreground leading-4">
+        {isCliMode ? t("ai.cursor.modeCliHint") : t("ai.cursor.modeApiKeyHint")}
+      </p>
+
+      <div className="grid gap-2 text-xs">
+        <div className="flex items-center justify-between gap-3">
+          <span className="text-muted-foreground">{t("ai.cursor.installStatus")}</span>
+          <span className={cn("font-medium", installStatusClassName)}>{installStatus}</span>
+        </div>
+        <div className="flex items-center justify-between gap-3">
+          <span className="text-muted-foreground">
+            {isCliMode ? t("ai.cursor.cliLoginStatus") : t("ai.cursor.apiKeyStatus")}
+          </span>
+          <span className={cn("font-medium truncate max-w-[60%] text-right", authStatusClassName)}>
+            {authStatus}
+          </span>
+        </div>
+      </div>
+
+      {!available && (
+        <p className="text-xs text-amber-500">
+          {isCliMode
+            ? t("ai.cursor.cliLoginHint")
+            : (Boolean(pathInfo?.sdkInstalled) || installed)
+              ? t("ai.cursor.notFoundHint")
+              : t("ai.cursor.notInstalledHint")}
+        </p>
+      )}
+
+      {isApiKeyMode ? (
+        <div className="space-y-1.5">
+          <label className="text-xs font-medium text-muted-foreground">{t("ai.cursor.apiKey")}</label>
+          <div className="flex items-center gap-2">
+            <div className="relative flex-1">
+              <input
+                type={showApiKey ? "text" : "password"}
+                value={isDecrypting ? "" : apiKeyDraft}
+                onChange={(event) => {
+                  setSaved(false);
+                  setApiKeyDraft(event.target.value);
+                }}
+                placeholder={
+                  isDecrypting
+                    ? t("ai.providers.apiKey.decrypting")
+                    : usesEnvApiKey && !hasStoredApiKey
+                      ? t("ai.cursor.apiKeyPlaceholder.env")
+                      : t("ai.cursor.apiKeyPlaceholder")
+                }
+                disabled={isDecrypting}
+                className="w-full h-8 rounded-md border border-input bg-background px-3 pr-9 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
+              />
+              <button
+                type="button"
+                onClick={() => setShowApiKey((value) => !value)}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                aria-label={showApiKey ? t("ai.cursor.hideApiKey") : t("ai.cursor.showApiKey")}
+              >
+                {showApiKey ? <EyeOff size={14} /> : <Eye size={14} />}
+              </button>
+            </div>
+            <Button variant="outline" size="sm" onClick={handleSave} disabled={!canSave}>
+              {saved ? <Check size={14} className="mr-1.5" /> : null}
+              {saved ? t("ai.cursor.saved") : t("ai.cursor.saveApiKey")}
+            </Button>
+            <Button variant="outline" size="sm" onClick={onRecheckPath} disabled={isResolvingPath}>
+              <RefreshCw size={14} className="mr-1.5" />
+              {t("ai.cursor.check")}
+            </Button>
+          </div>
+          {usesEnvApiKey && !hasStoredApiKey ? (
+            <p className="text-[11px] text-muted-foreground leading-4">
+              {t("ai.cursor.apiKeyEnvHint")}
+            </p>
+          ) : null}
+          {usesEnvApiKey && hasStoredApiKey ? (
+            <p className="text-[11px] text-muted-foreground leading-4">
+              {t("ai.cursor.apiKeyOverrideHint")}
+            </p>
+          ) : null}
+        </div>
+      ) : (
+        <div className="flex justify-end">
+          <Button variant="outline" size="sm" onClick={onRecheckPath} disabled={isResolvingPath}>
+            <RefreshCw size={14} className="mr-1.5" />
+            {t("ai.cursor.check")}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};