@astrasyncai/verification-gateway 1.0.0

package/dist/ui/index.mjs

@@ -0,0 +1,782 @@
+// src/ui/commerce-shield.tsx
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultStyles = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(26, 26, 46, 0.95)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 9999,
+    padding: "20px"
+  },
+  container: {
+    backgroundColor: "rgba(255, 255, 255, 0.95)",
+    borderRadius: "16px",
+    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
+    maxWidth: "480px",
+    width: "100%",
+    padding: "40px",
+    textAlign: "center"
+  },
+  icon: {
+    fontSize: "48px",
+    marginBottom: "20px"
+  },
+  title: {
+    fontSize: "24px",
+    fontWeight: 700,
+    color: "#1a1a2e",
+    marginBottom: "16px"
+  },
+  message: {
+    color: "#4a5568",
+    lineHeight: 1.6,
+    marginBottom: "24px"
+  },
+  stepsContainer: {
+    textAlign: "left",
+    backgroundColor: "#f7fafc",
+    borderRadius: "8px",
+    padding: "20px",
+    marginBottom: "24px"
+  },
+  stepsTitle: {
+    fontSize: "14px",
+    fontWeight: 600,
+    color: "#2d3748",
+    marginBottom: "12px"
+  },
+  stepsList: {
+    paddingLeft: "20px",
+    color: "#4a5568",
+    margin: 0
+  },
+  stepItem: {
+    marginBottom: "8px"
+  },
+  buttonsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px"
+  },
+  buttonBase: {
+    display: "inline-block",
+    padding: "14px 24px",
+    borderRadius: "8px",
+    fontWeight: 600,
+    textDecoration: "none",
+    cursor: "pointer",
+    border: "none",
+    fontSize: "16px",
+    transition: "all 0.2s"
+  },
+  buttonPrimary: {
+    background: "linear-gradient(135deg, #6366f1 0%, #4f46e5 100%)",
+    color: "white"
+  },
+  buttonSecondary: {
+    backgroundColor: "#e2e8f0",
+    color: "#4a5568"
+  },
+  footer: {
+    marginTop: "24px",
+    fontSize: "14px",
+    color: "#718096"
+  },
+  footerLink: {
+    color: "#6366f1",
+    textDecoration: "none"
+  }
+};
+function CommerceShield({
+  visible,
+  result,
+  onRegister,
+  onGuestAccess,
+  onDismiss,
+  title = "AstraSync Agent Verification",
+  message,
+  allowGuestAccess = true,
+  className
+}) {
+  if (!visible) {
+    return null;
+  }
+  const displayMessage = message || result?.guidance?.message || "This site verifies AI agents before granting access. We noticed you're visiting without AstraSync credentials.";
+  const registrationUrl = result?.guidance?.registrationUrl || "https://astrasync.ai/register";
+  const docsUrl = result?.guidance?.documentationUrl || "https://astrasync.ai/docs/agent-access";
+  const steps = result?.guidance?.steps || [
+    "Register at astrasync.ai/register",
+    "Create and register your agent",
+    "Add your ASTRA-ID to request headers",
+    "Refresh this page"
+  ];
+  const handleRegisterClick = () => {
+    if (onRegister) {
+      onRegister();
+    } else {
+      window.location.href = registrationUrl;
+    }
+  };
+  const handleGuestClick = () => {
+    if (onGuestAccess) {
+      onGuestAccess();
+    } else if (onDismiss) {
+      onDismiss();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: defaultStyles.overlay,
+      className,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "commerce-shield-title",
+      children: /* @__PURE__ */ jsxs("div", { style: defaultStyles.container, children: [
+        /* @__PURE__ */ jsx("div", { style: defaultStyles.icon, "aria-hidden": "true", children: "\u{1F6E1}\uFE0F" }),
+        /* @__PURE__ */ jsx("h1", { id: "commerce-shield-title", style: defaultStyles.title, children: title }),
+        /* @__PURE__ */ jsx("p", { style: defaultStyles.message, children: displayMessage }),
+        /* @__PURE__ */ jsxs("div", { style: defaultStyles.stepsContainer, children: [
+          /* @__PURE__ */ jsx("h3", { style: defaultStyles.stepsTitle, children: "To get verified access:" }),
+          /* @__PURE__ */ jsx("ol", { style: defaultStyles.stepsList, children: steps.map((step, index) => /* @__PURE__ */ jsx("li", { style: defaultStyles.stepItem, children: step }, index)) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: defaultStyles.buttonsContainer, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleRegisterClick,
+              style: { ...defaultStyles.buttonBase, ...defaultStyles.buttonPrimary },
+              children: "Register Now"
+            }
+          ),
+          allowGuestAccess && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleGuestClick,
+              style: { ...defaultStyles.buttonBase, ...defaultStyles.buttonSecondary },
+              children: "Continue as Guest (Limited)"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("p", { style: defaultStyles.footer, children: [
+          "Learn more:",
+          " ",
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: docsUrl,
+              style: defaultStyles.footerLink,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: "Agent Access Documentation"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function useCommerceShield(verificationResult) {
+  const [visible, setVisible] = React.useState(false);
+  const [dismissed, setDismissed] = React.useState(false);
+  React.useEffect(() => {
+    if (verificationResult && !dismissed) {
+      const shouldShow = !verificationResult.verified || verificationResult.accessLevel === "none" || verificationResult.accessLevel === "guidance";
+      setVisible(shouldShow);
+    }
+  }, [verificationResult, dismissed]);
+  const dismiss = React.useCallback(() => {
+    setDismissed(true);
+    setVisible(false);
+  }, []);
+  const reset = React.useCallback(() => {
+    setDismissed(false);
+  }, []);
+  return {
+    visible,
+    dismiss,
+    reset,
+    result: verificationResult
+  };
+}
+
+// src/ui/credential-prompt.tsx
+import { useState, useCallback } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultStyles2 = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 9999,
+    padding: "20px"
+  },
+  container: {
+    backgroundColor: "white",
+    borderRadius: "12px",
+    boxShadow: "0 20px 40px rgba(0, 0, 0, 0.3)",
+    maxWidth: "400px",
+    width: "100%",
+    padding: "32px"
+  },
+  title: {
+    fontSize: "20px",
+    fontWeight: 600,
+    color: "#1a1a2e",
+    marginBottom: "8px"
+  },
+  description: {
+    fontSize: "14px",
+    color: "#64748b",
+    marginBottom: "24px",
+    lineHeight: 1.5
+  },
+  form: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px"
+  },
+  inputGroup: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px"
+  },
+  label: {
+    fontSize: "14px",
+    fontWeight: 500,
+    color: "#374151"
+  },
+  input: {
+    padding: "12px",
+    borderRadius: "8px",
+    border: "1px solid #d1d5db",
+    fontSize: "14px",
+    outline: "none",
+    transition: "border-color 0.2s"
+  },
+  error: {
+    backgroundColor: "#fef2f2",
+    color: "#dc2626",
+    padding: "12px",
+    borderRadius: "8px",
+    fontSize: "14px",
+    marginBottom: "16px"
+  },
+  buttonContainer: {
+    display: "flex",
+    gap: "12px",
+    marginTop: "8px"
+  },
+  button: {
+    flex: 1,
+    padding: "12px 16px",
+    borderRadius: "8px",
+    fontWeight: 600,
+    fontSize: "14px",
+    cursor: "pointer",
+    transition: "all 0.2s",
+    border: "none"
+  },
+  buttonPrimary: {
+    backgroundColor: "#4f46e5",
+    color: "white"
+  },
+  buttonSecondary: {
+    backgroundColor: "#f1f5f9",
+    color: "#475569"
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  }
+};
+function CredentialPrompt({
+  visible,
+  onSubmit,
+  onDismiss,
+  title = "Enter Agent Credentials",
+  description = "Provide your AstraSync agent credentials to verify your identity.",
+  showApiKey = true,
+  showJwt = false,
+  loading = false,
+  error,
+  className
+}) {
+  const [astraId, setAstraId] = useState("");
+  const [apiKey, setApiKey] = useState("");
+  const [jwt, setJwt] = useState("");
+  const handleSubmit = useCallback((e) => {
+    e.preventDefault();
+    const credentials = {};
+    if (astraId.trim()) {
+      credentials.astraId = astraId.trim();
+    }
+    if (apiKey.trim()) {
+      credentials.apiKey = apiKey.trim();
+    }
+    if (jwt.trim()) {
+      credentials.jwt = jwt.trim();
+    }
+    onSubmit(credentials);
+  }, [astraId, apiKey, jwt, onSubmit]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Escape" && onDismiss) {
+      onDismiss();
+    }
+  }, [onDismiss]);
+  if (!visible) {
+    return null;
+  }
+  const isValid = astraId.trim() || apiKey.trim() || jwt.trim();
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: defaultStyles2.overlay,
+      className,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "credential-prompt-title",
+      onKeyDown: handleKeyDown,
+      children: /* @__PURE__ */ jsxs2("div", { style: defaultStyles2.container, children: [
+        /* @__PURE__ */ jsx2("h2", { id: "credential-prompt-title", style: defaultStyles2.title, children: title }),
+        /* @__PURE__ */ jsx2("p", { style: defaultStyles2.description, children: description }),
+        error && /* @__PURE__ */ jsx2("div", { style: defaultStyles2.error, role: "alert", children: error }),
+        /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, style: defaultStyles2.form, children: [
+          /* @__PURE__ */ jsxs2("div", { style: defaultStyles2.inputGroup, children: [
+            /* @__PURE__ */ jsx2("label", { htmlFor: "astra-id", style: defaultStyles2.label, children: "ASTRA-ID" }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                id: "astra-id",
+                type: "text",
+                value: astraId,
+                onChange: (e) => setAstraId(e.target.value),
+                placeholder: "ASTRA-xxx or ASTRAD-xxx",
+                style: defaultStyles2.input,
+                disabled: loading
+              }
+            )
+          ] }),
+          showApiKey && /* @__PURE__ */ jsxs2("div", { style: defaultStyles2.inputGroup, children: [
+            /* @__PURE__ */ jsx2("label", { htmlFor: "api-key", style: defaultStyles2.label, children: "API Key (optional)" }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                id: "api-key",
+                type: "password",
+                value: apiKey,
+                onChange: (e) => setApiKey(e.target.value),
+                placeholder: "Your API key",
+                style: defaultStyles2.input,
+                disabled: loading
+              }
+            )
+          ] }),
+          showJwt && /* @__PURE__ */ jsxs2("div", { style: defaultStyles2.inputGroup, children: [
+            /* @__PURE__ */ jsx2("label", { htmlFor: "jwt", style: defaultStyles2.label, children: "JWT Token (optional)" }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                id: "jwt",
+                type: "password",
+                value: jwt,
+                onChange: (e) => setJwt(e.target.value),
+                placeholder: "Your JWT token",
+                style: defaultStyles2.input,
+                disabled: loading
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { style: defaultStyles2.buttonContainer, children: [
+            onDismiss && /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: onDismiss,
+                style: { ...defaultStyles2.button, ...defaultStyles2.buttonSecondary },
+                disabled: loading,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "submit",
+                style: {
+                  ...defaultStyles2.button,
+                  ...defaultStyles2.buttonPrimary,
+                  ...!isValid || loading ? defaultStyles2.buttonDisabled : {}
+                },
+                disabled: !isValid || loading,
+                children: loading ? "Verifying..." : "Verify"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function useCredentialPrompt() {
+  const [visible, setVisible] = useState(false);
+  const [credentials, setCredentials] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const show = useCallback(() => {
+    setVisible(true);
+    setError(null);
+  }, []);
+  const hide = useCallback(() => {
+    setVisible(false);
+    setError(null);
+    setLoading(false);
+  }, []);
+  const submit = useCallback((creds) => {
+    setCredentials(creds);
+    setLoading(true);
+    setError(null);
+  }, []);
+  const setSubmitError = useCallback((err) => {
+    setError(err);
+    setLoading(false);
+  }, []);
+  const complete = useCallback(() => {
+    setVisible(false);
+    setLoading(false);
+    setError(null);
+  }, []);
+  return {
+    visible,
+    credentials,
+    loading,
+    error,
+    show,
+    hide,
+    submit,
+    setError: setSubmitError,
+    complete
+  };
+}
+
+// src/ui/guidance.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var styles = {
+  card: {
+    backgroundColor: "#f8fafc",
+    border: "1px solid #e2e8f0",
+    borderRadius: "12px",
+    padding: "24px",
+    maxWidth: "480px"
+  },
+  cardCompact: {
+    backgroundColor: "#fefce8",
+    border: "1px solid #fef08a",
+    borderRadius: "8px",
+    padding: "16px"
+  },
+  cardTitle: {
+    fontSize: "18px",
+    fontWeight: 600,
+    color: "#1e293b",
+    marginBottom: "12px",
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  cardMessage: {
+    fontSize: "14px",
+    color: "#475569",
+    lineHeight: 1.6,
+    marginBottom: "16px"
+  },
+  stepsList: {
+    listStyle: "none",
+    padding: 0,
+    margin: 0
+  },
+  stepItem: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "12px",
+    marginBottom: "12px",
+    fontSize: "14px",
+    color: "#334155"
+  },
+  stepNumber: {
+    backgroundColor: "#e0e7ff",
+    color: "#4338ca",
+    width: "24px",
+    height: "24px",
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "12px",
+    fontWeight: 600,
+    flexShrink: 0
+  },
+  links: {
+    display: "flex",
+    gap: "16px",
+    marginTop: "16px",
+    paddingTop: "16px",
+    borderTop: "1px solid #e2e8f0"
+  },
+  link: {
+    color: "#4f46e5",
+    textDecoration: "none",
+    fontSize: "14px",
+    fontWeight: 500
+  },
+  badge: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    padding: "4px 8px",
+    borderRadius: "9999px",
+    fontWeight: 600,
+    fontSize: "12px"
+  },
+  badgeSm: {
+    padding: "2px 6px",
+    fontSize: "10px"
+  },
+  badgeLg: {
+    padding: "6px 12px",
+    fontSize: "14px"
+  },
+  badgeBronze: {
+    backgroundColor: "#fef3c7",
+    color: "#92400e"
+  },
+  badgeSilver: {
+    backgroundColor: "#e5e7eb",
+    color: "#374151"
+  },
+  badgeGold: {
+    backgroundColor: "#fef9c3",
+    color: "#854d0e"
+  },
+  badgePlatinum: {
+    backgroundColor: "#e0e7ff",
+    color: "#3730a3"
+  },
+  indicator: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    fontSize: "14px"
+  },
+  indicatorDot: {
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%"
+  },
+  indicatorAllowed: {
+    backgroundColor: "#22c55e"
+  },
+  indicatorDenied: {
+    backgroundColor: "#ef4444"
+  },
+  indicatorLimited: {
+    backgroundColor: "#f59e0b"
+  }
+};
+function GuidanceCard({
+  guidance,
+  title = "How to Get Verified",
+  compact = false,
+  className
+}) {
+  const cardStyle = compact ? styles.cardCompact : styles.card;
+  return /* @__PURE__ */ jsxs3("div", { style: cardStyle, className, children: [
+    /* @__PURE__ */ jsxs3("h3", { style: styles.cardTitle, children: [
+      /* @__PURE__ */ jsx3("span", { children: "\u{1F4A1}" }),
+      title
+    ] }),
+    /* @__PURE__ */ jsx3("p", { style: styles.cardMessage, children: guidance.message }),
+    guidance.steps && guidance.steps.length > 0 && /* @__PURE__ */ jsx3("ol", { style: styles.stepsList, children: guidance.steps.map((step, index) => /* @__PURE__ */ jsxs3("li", { style: styles.stepItem, children: [
+      /* @__PURE__ */ jsx3("span", { style: styles.stepNumber, children: index + 1 }),
+      /* @__PURE__ */ jsx3("span", { children: step })
+    ] }, index)) }),
+    /* @__PURE__ */ jsxs3("div", { style: styles.links, children: [
+      /* @__PURE__ */ jsx3(
+        "a",
+        {
+          href: guidance.registrationUrl,
+          style: styles.link,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: "Register \u2192"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "a",
+        {
+          href: guidance.documentationUrl,
+          style: styles.link,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: "Documentation \u2192"
+        }
+      )
+    ] })
+  ] });
+}
+function TrustLevelBadge({
+  level,
+  score,
+  size = "md",
+  className
+}) {
+  const levelColors = {
+    BRONZE: styles.badgeBronze,
+    SILVER: styles.badgeSilver,
+    GOLD: styles.badgeGold,
+    PLATINUM: styles.badgePlatinum
+  };
+  const sizeStyles = {
+    sm: styles.badgeSm,
+    md: {},
+    lg: styles.badgeLg
+  };
+  const levelEmojis = {
+    BRONZE: "\u{1F949}",
+    SILVER: "\u{1F948}",
+    GOLD: "\u{1F947}",
+    PLATINUM: "\u{1F48E}"
+  };
+  return /* @__PURE__ */ jsxs3(
+    "span",
+    {
+      style: {
+        ...styles.badge,
+        ...levelColors[level],
+        ...sizeStyles[size]
+      },
+      className,
+      children: [
+        /* @__PURE__ */ jsx3("span", { children: levelEmojis[level] }),
+        /* @__PURE__ */ jsx3("span", { children: level }),
+        score !== void 0 && /* @__PURE__ */ jsxs3("span", { children: [
+          "(",
+          score,
+          ")"
+        ] })
+      ]
+    }
+  );
+}
+function AccessLevelIndicator({
+  accessLevel,
+  requiredLevel,
+  className
+}) {
+  const getStatus = () => {
+    if (accessLevel === "none" || accessLevel === "guidance") {
+      return "denied";
+    }
+    if (requiredLevel) {
+      const levels = ["none", "guidance", "read-only", "standard", "full", "internal"];
+      const currentIndex = levels.indexOf(accessLevel);
+      const requiredIndex = levels.indexOf(requiredLevel);
+      if (currentIndex < requiredIndex) {
+        return "limited";
+      }
+    }
+    return "allowed";
+  };
+  const status = getStatus();
+  const statusColors = {
+    allowed: styles.indicatorAllowed,
+    denied: styles.indicatorDenied,
+    limited: styles.indicatorLimited
+  };
+  const statusLabels = {
+    allowed: "Access Granted",
+    denied: "Access Denied",
+    limited: "Limited Access"
+  };
+  return /* @__PURE__ */ jsxs3("div", { style: styles.indicator, className, children: [
+    /* @__PURE__ */ jsx3("span", { style: { ...styles.indicatorDot, ...statusColors[status] } }),
+    /* @__PURE__ */ jsx3("span", { children: statusLabels[status] }),
+    /* @__PURE__ */ jsxs3("span", { style: { color: "#94a3b8" }, children: [
+      "(",
+      accessLevel,
+      ")"
+    ] })
+  ] });
+}
+function DenialReasons({ reasons, className }) {
+  if (reasons.length === 0) {
+    return /* @__PURE__ */ jsx3(Fragment, {});
+  }
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        backgroundColor: "#fef2f2",
+        border: "1px solid #fecaca",
+        borderRadius: "8px",
+        padding: "16px"
+      },
+      className,
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "h4",
+          {
+            style: {
+              fontSize: "14px",
+              fontWeight: 600,
+              color: "#dc2626",
+              marginBottom: "8px",
+              display: "flex",
+              alignItems: "center",
+              gap: "6px"
+            },
+            children: [
+              /* @__PURE__ */ jsx3("span", { children: "\u26A0\uFE0F" }),
+              "Access Denied"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "ul",
+          {
+            style: {
+              margin: 0,
+              paddingLeft: "20px",
+              color: "#991b1b",
+              fontSize: "14px"
+            },
+            children: reasons.map((reason, index) => /* @__PURE__ */ jsx3("li", { style: { marginBottom: "4px" }, children: reason }, index))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AccessLevelIndicator,
+  CommerceShield,
+  CredentialPrompt,
+  DenialReasons,
+  GuidanceCard,
+  TrustLevelBadge,
+  useCommerceShield,
+  useCredentialPrompt
+};
+//# sourceMappingURL=index.mjs.map