@replicated/portal-components 0.0.2 → 0.0.4

package/dist/esm/login.js

@@ -0,0 +1,261 @@
+"use client";
+import { forwardRef, useState, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+
+var variantStyles = {
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary",
+  secondary: "bg-secondary/20 text-secondary-foreground hover:bg-secondary/30 focus-visible:ring-secondary",
+  ghost: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/60",
+  destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger"
+};
+var sizeStyles = {
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-4 text-sm",
+  lg: "h-12 px-6 text-base"
+};
+var inlineFlexBase = "inline-flex items-center justify-center gap-2 rounded-md font-medium tracking-tight transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-60";
+var Spinner = () => /* @__PURE__ */ jsx("span", { className: "inline-flex h-3.5 w-3.5 animate-spin items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "h-3 w-3 rounded-full border-2 border-transparent border-t-current" }) });
+var composeClassName = (...values) => values.filter(Boolean).join(" ");
+var Button = forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    type = "button",
+    isLoading = false,
+    leadingIcon,
+    trailingIcon,
+    disabled,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const computedLeading = isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : leadingIcon;
+    const computedDisabled = disabled ?? isLoading;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type,
+        className: composeClassName(
+          inlineFlexBase,
+          variantStyles[variant],
+          sizeStyles[size],
+          className
+        ),
+        "aria-busy": isLoading || void 0,
+        disabled: computedDisabled,
+        ...props,
+        children: [
+          computedLeading ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex", children: computedLeading }) : null,
+          /* @__PURE__ */ jsx("span", { className: "flex-1 whitespace-nowrap", children }),
+          trailingIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex", children: trailingIcon }) : null
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Login = forwardRef(
+  ({
+    logo,
+    title = "Enterprise Factory Installation Portal",
+    description = "Sign in to manage your enterprise installation",
+    label = "Work email address",
+    placeholder = "you@company.com",
+    ctaLabel = "Continue with email \u2192",
+    initialEmail = "",
+    isSubmitting = false,
+    onContinue,
+    onVerifyCode,
+    redirectPath = "/",
+    className,
+    ...props
+  }, ref) => {
+    const [mode, setMode] = useState("email");
+    const [email, setEmail] = useState(initialEmail);
+    const [submittedEmail, setSubmittedEmail] = useState(initialEmail);
+    const [verificationCode, setVerificationCode] = useState("");
+    const [verifying, setVerifying] = useState(false);
+    const [pending, setPending] = useState(false);
+    const [verificationError, setVerificationError] = useState(
+      null
+    );
+    const handleSubmit = async (event) => {
+      event.preventDefault();
+      if (!onContinue || mode !== "email") {
+        return;
+      }
+      try {
+        setPending(true);
+        const result = await onContinue(email);
+        if (result && typeof result === "object" && "showVerification" in result && result.showVerification === false) {
+          return;
+        }
+        setSubmittedEmail(email);
+        setVerificationCode("");
+        setVerificationError(null);
+        setMode("verify");
+      } finally {
+        setPending(false);
+      }
+    };
+    const disabled = mode === "email" && (isSubmitting || pending);
+    const verificationMessage = useMemo(() => {
+      if (!submittedEmail) {
+        return null;
+      }
+      return `If there is an account for ${submittedEmail}, an email will be sent with a login code.`;
+    }, [submittedEmail]);
+    const handleVerify = async () => {
+      if (!onVerifyCode || !verificationCode) {
+        return;
+      }
+      try {
+        setVerificationError(null);
+        setVerifying(true);
+        const result = await onVerifyCode(verificationCode, redirectPath);
+        if (result && typeof result === "object" && "success" in result && result.success === false) {
+          const message = result.message ?? "Unable to verify code. Try again.";
+          setVerificationError(message);
+          return;
+        }
+        setVerificationCode("");
+      } catch (error) {
+        if (typeof error === "object" && error !== null && "message" in error && typeof error.message === "string") {
+          setVerificationError(error.message);
+        } else {
+          setVerificationError("Unable to verify code. Try again.");
+        }
+      } finally {
+        setVerifying(false);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "form",
+      {
+        ref,
+        className: [
+          "w-full max-w-xl rounded-3xl border-2 border-gray-900 bg-white p-12 shadow-xl",
+          "text-gray-900 transition-shadow",
+          className
+        ].filter(Boolean).join(" "),
+        onSubmit: handleSubmit,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-6 text-center", children: [
+            logo ?? /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-500 text-lg font-semibold leading-tight text-white", children: "EP" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight text-gray-900", children: title }),
+              /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-gray-600", children: description })
+            ] })
+          ] }),
+          mode === "email" ? /* @__PURE__ */ jsxs("div", { className: "mt-10 space-y-4", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "login-email",
+                className: "block text-sm font-medium text-gray-700",
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4", children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "h-5 w-5 text-gray-400",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: "login-email",
+                  type: "email",
+                  inputMode: "email",
+                  autoComplete: "email",
+                  placeholder,
+                  value: email,
+                  onChange: (event) => setEmail(event.target.value),
+                  className: "portal-input w-full py-4 pr-4 text-base",
+                  style: { paddingLeft: "3rem" },
+                  disabled,
+                  required: true
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                size: "lg",
+                className: "w-full justify-center rounded-xl bg-indigo-600 text-white hover:bg-indigo-700",
+                disabled,
+                isLoading: disabled,
+                children: ctaLabel
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "mt-10 space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-gray-900", children: "Verification Code" }),
+              verificationMessage ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-600", children: verificationMessage }) : null,
+              verificationError ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm font-medium text-red-600", children: verificationError }) : null
+            ] }),
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "login-code",
+                className: "block text-sm font-medium text-gray-700",
+                children: "One-time code"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "login-code",
+                inputMode: "numeric",
+                maxLength: 12,
+                placeholder: "Enter 12 digit code",
+                className: "portal-input w-full px-5 py-4 text-base",
+                value: verificationCode,
+                onChange: (event) => setVerificationCode(event.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "lg",
+                className: "w-full justify-center rounded-xl bg-indigo-600 text-white hover:bg-indigo-700",
+                disabled: verificationCode.length !== 12 || verifying,
+                isLoading: verifying,
+                onClick: handleVerify,
+                children: "Verify code"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Login.displayName = "Login";
+
+export { Login };
+//# sourceMappingURL=login.js.map
+//# sourceMappingURL=login.js.map

package/dist/esm/login.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/button.tsx","../../src/components/login.tsx"],"names":["forwardRef","jsxs","jsx"],"mappings":"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","file":"login.js","sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode\n} from \"react\";\n\nconst buttonVariants = [\"primary\", \"secondary\", \"ghost\", \"destructive\"] as const;\nconst buttonSizes = [\"sm\", \"md\", \"lg\"] as const;\n\nconst variantStyles: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary\",\n  secondary:\n    \"bg-secondary/20 text-secondary-foreground hover:bg-secondary/30 focus-visible:ring-secondary\",\n  ghost:\n    \"bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/60\",\n  destructive:\n    \"bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger\"\n};\n\nconst sizeStyles: Record<ButtonSize, string> = {\n  sm: \"h-8 px-3 text-sm\",\n  md: \"h-10 px-4 text-sm\",\n  lg: \"h-12 px-6 text-base\"\n};\n\nconst inlineFlexBase =\n  \"inline-flex items-center justify-center gap-2 rounded-md font-medium tracking-tight transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-60\";\n\nconst Spinner = () => (\n  <span className=\"inline-flex h-3.5 w-3.5 animate-spin items-center justify-center\">\n    <span className=\"h-3 w-3 rounded-full border-2 border-transparent border-t-current\" />\n  </span>\n);\n\nexport type ButtonVariant = (typeof buttonVariants)[number];\nexport type ButtonSize = (typeof buttonSizes)[number];\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  isLoading?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n}\n\nconst composeClassName = (\n  ...values: Array<string | undefined | false>\n): string => values.filter(Boolean).join(\" \");\n\n/**\n * Button is the primary interactive primitive for triggering portal actions.\n * It is theme aware via CSS variables generated from portal tokens.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = \"primary\",\n      size = \"md\",\n      type = \"button\",\n      isLoading = false,\n      leadingIcon,\n      trailingIcon,\n      disabled,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const computedLeading = isLoading ? <Spinner /> : leadingIcon;\n    const computedDisabled = disabled ?? isLoading;\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        className={composeClassName(\n          inlineFlexBase,\n          variantStyles[variant],\n          sizeStyles[size],\n          className\n        )}\n        aria-busy={isLoading || undefined}\n        disabled={computedDisabled}\n        {...props}\n      >\n        {computedLeading ? (\n          <span aria-hidden=\"true\" className=\"inline-flex\">\n            {computedLeading}\n          </span>\n        ) : null}\n        <span className=\"flex-1 whitespace-nowrap\">{children}</span>\n        {trailingIcon ? (\n          <span aria-hidden=\"true\" className=\"inline-flex\">\n            {trailingIcon}\n          </span>\n        ) : null}\n      </button>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n","'use client';\n\nimport {\n  forwardRef,\n  useMemo,\n  useState,\n  type ComponentPropsWithoutRef,\n  type FormEvent,\n  type ReactNode\n} from \"react\";\n\nimport { Button } from \"./button\";\n\nexport interface LoginProps\n  extends Omit<ComponentPropsWithoutRef<\"form\">, \"onSubmit\" | \"children\"> {\n  logo?: ReactNode;\n  title?: string;\n  description?: string;\n  label?: string;\n  placeholder?: string;\n  ctaLabel?: string;\n  initialEmail?: string;\n  isSubmitting?: boolean;\n  /** \n   * Called when user submits email. Return { showVerification: false } to prevent\n   * showing the verification code form (e.g., for SAML redirect).\n   */\n  onContinue?: (email: string) => Promise<void | { showVerification: boolean }> | void | { showVerification: boolean };\n  onVerifyCode?: (\n    code: string,\n    redirectPath: string\n  ) => Promise<\n    | void\n    | { success: true }\n    | { success: false; message?: string }\n  >;\n  redirectPath?: string;\n}\n\n/**\n * Login renders a compact form card tailored for portal authentication flows.\n * The component keeps styling self-contained so it can be dropped into the\n * local Next.js template without additional wrappers.\n */\nexport const Login = forwardRef<HTMLFormElement, LoginProps>(\n  (\n    {\n      logo,\n      title = \"Enterprise Factory Installation Portal\",\n      description = \"Sign in to manage your enterprise installation\",\n      label = \"Work email address\",\n      placeholder = \"you@company.com\",\n      ctaLabel = \"Continue with email →\",\n      initialEmail = \"\",\n      isSubmitting = false,\n      onContinue,\n      onVerifyCode,\n      redirectPath = \"/\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [mode, setMode] = useState<\"email\" | \"verify\">(\"email\");\n    const [email, setEmail] = useState(initialEmail);\n    const [submittedEmail, setSubmittedEmail] = useState(initialEmail);\n    const [verificationCode, setVerificationCode] = useState(\"\");\n    const [verifying, setVerifying] = useState(false);\n    const [pending, setPending] = useState(false);\n    const [verificationError, setVerificationError] = useState<string | null>(\n      null\n    );\n\n    const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      if (!onContinue || mode !== \"email\") {\n        return;\n      }\n\n      try {\n        setPending(true);\n        const result = await onContinue(email);\n        \n        // Check if we should show verification form\n        // If result is { showVerification: false }, don't show it (e.g., SAML redirect)\n        if (result && typeof result === \"object\" && \"showVerification\" in result && result.showVerification === false) {\n          // Don't transition to verify mode - caller is handling redirect\n          return;\n        }\n        \n        // Show verification code form\n        setSubmittedEmail(email);\n        setVerificationCode(\"\");\n        setVerificationError(null);\n        setMode(\"verify\");\n      } finally {\n        setPending(false);\n      }\n    };\n\n    const disabled = mode === \"email\" && (isSubmitting || pending);\n    const verificationMessage = useMemo(() => {\n      if (!submittedEmail) {\n        return null;\n      }\n      return `If there is an account for ${submittedEmail}, an email will be sent with a login code.`;\n    }, [submittedEmail]);\n\n    const handleVerify = async () => {\n      if (!onVerifyCode || !verificationCode) {\n        return;\n      }\n      try {\n        setVerificationError(null);\n        setVerifying(true);\n        const result = await onVerifyCode(verificationCode, redirectPath);\n        if (\n          result &&\n          typeof result === \"object\" &&\n          \"success\" in result &&\n          (result as { success?: unknown }).success === false\n        ) {\n          const message =\n            (result as { message?: string }).message ??\n            \"Unable to verify code. Try again.\";\n          setVerificationError(message);\n          return;\n        }\n        setVerificationCode(\"\");\n      } catch (error) {\n        if (\n          typeof error === \"object\" &&\n          error !== null &&\n          \"message\" in error &&\n          typeof (error as { message?: unknown }).message === \"string\"\n        ) {\n          setVerificationError((error as { message: string }).message);\n        } else {\n          setVerificationError(\"Unable to verify code. Try again.\");\n        }\n      } finally {\n        setVerifying(false);\n      }\n    };\n\n    return (\n      <form\n        ref={ref}\n        className={[\n          \"w-full max-w-xl rounded-3xl border-2 border-gray-900 bg-white p-12 shadow-xl\",\n          \"text-gray-900 transition-shadow\",\n          className\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        onSubmit={handleSubmit}\n        {...props}\n      >\n        <div className=\"flex flex-col items-center gap-6 text-center\">\n          {logo ?? (\n            <div className=\"flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-500 text-lg font-semibold leading-tight text-white\">\n              EP\n            </div>\n          )}\n          <div>\n            <h1 className=\"text-3xl font-bold tracking-tight text-gray-900\">\n              {title}\n            </h1>\n            <p className=\"mt-3 text-base text-gray-600\">{description}</p>\n          </div>\n        </div>\n        {mode === \"email\" ? (\n          <div className=\"mt-10 space-y-4\">\n            <label\n              htmlFor=\"login-email\"\n              className=\"block text-sm font-medium text-gray-700\"\n            >\n              {label}\n            </label>\n            <div className=\"relative\">\n              <div className=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4\">\n                <svg\n                  className=\"h-5 w-5 text-gray-400\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n                  />\n                </svg>\n              </div>\n              <input\n                id=\"login-email\"\n                type=\"email\"\n                inputMode=\"email\"\n                autoComplete=\"email\"\n                placeholder={placeholder}\n                value={email}\n                onChange={(event) => setEmail(event.target.value)}\n                className=\"portal-input w-full py-4 pr-4 text-base\"\n                style={{ paddingLeft: '3rem' }}\n                disabled={disabled}\n                required\n              />\n            </div>\n            <Button\n              type=\"submit\"\n              size=\"lg\"\n              className=\"w-full justify-center rounded-xl bg-indigo-600 text-white hover:bg-indigo-700\"\n              disabled={disabled}\n              isLoading={disabled}\n            >\n              {ctaLabel}\n            </Button>\n          </div>\n        ) : (\n          <div className=\"mt-10 space-y-4\">\n            <div>\n              <p className=\"text-sm font-semibold text-gray-900\">\n                Verification Code\n              </p>\n              {verificationMessage ? (\n                <p className=\"mt-2 text-sm text-gray-600\">{verificationMessage}</p>\n              ) : null}\n              {verificationError ? (\n                <p className=\"mt-2 text-sm font-medium text-red-600\">\n                  {verificationError}\n                </p>\n              ) : null}\n            </div>\n            <label\n              htmlFor=\"login-code\"\n              className=\"block text-sm font-medium text-gray-700\"\n            >\n              One-time code\n            </label>\n            <input\n              id=\"login-code\"\n              inputMode=\"numeric\"\n              maxLength={12}\n              placeholder=\"Enter 12 digit code\"\n              className=\"portal-input w-full px-5 py-4 text-base\"\n              value={verificationCode}\n              onChange={(event) => setVerificationCode(event.target.value)}\n            />\n            <Button\n              type=\"button\"\n              size=\"lg\"\n              className=\"w-full justify-center rounded-xl bg-indigo-600 text-white hover:bg-indigo-700\"\n              disabled={verificationCode.length !== 12 || verifying}\n              isLoading={verifying}\n              onClick={handleVerify}\n            >\n              Verify code\n            </Button>\n          </div>\n        )}\n      </form>\n    );\n  }\n);\n\nLogin.displayName = \"Login\";\n"]}

package/dist/esm/online-instance-list.js

@@ -0,0 +1,287 @@
+"use client";
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+
+
+// src/actions/instances.ts
+var ACTIVE_INSTANCE_THRESHOLD_MS = 24 * 60 * 60 * 1e3;
+function isInstanceActive(instance) {
+  if (!instance.lastCheckin) {
+    return false;
+  }
+  const lastCheckinTime = new Date(instance.lastCheckin).getTime();
+  const threshold = Date.now() - ACTIVE_INSTANCE_THRESHOLD_MS;
+  return lastCheckinTime > threshold;
+}
+function filterActiveInactiveInstances(instances) {
+  const activeInstances = instances.filter(isInstanceActive);
+  const inactiveInstances = instances.filter((instance) => !isInstanceActive(instance));
+  return { activeInstances, inactiveInstances };
+}
+function getInstallType(instance, installOptions) {
+  const instanceHasNoInstallTypes = !instance.kotsInstallId && !instance.kurlInstallId && !instance.embeddedClusterId;
+  const isManuallyCreatedAirgapInstance = instance.isAirgap && instanceHasNoInstallTypes;
+  if (instance.embeddedClusterId) {
+    return "embedded cluster";
+  }
+  if (instanceHasNoInstallTypes && instance.k8sDistribution) {
+    return "helm";
+  }
+  if (isManuallyCreatedAirgapInstance && !instance.k8sDistribution) {
+    if (installOptions) {
+      const matchingInstallOption = installOptions.find(
+        (option) => option.instance_id === instance.id
+      );
+      if (matchingInstallOption) {
+        if (matchingInstallOption.install_type === "helm") {
+          return "helm";
+        }
+        if (matchingInstallOption.install_type === "linux") {
+          return "embedded cluster";
+        }
+      }
+    }
+    return "embedded cluster";
+  }
+  return null;
+}
+function calculateUpdatesForInstance(instance, channelReleases) {
+  if (!channelReleases || !Array.isArray(channelReleases)) {
+    return 0;
+  }
+  const instanceChannelSequence = instance.channelSequence ?? 0;
+  const matchingReleases = channelReleases.filter(
+    (release) => release.channelId === instance.channelId
+  );
+  return matchingReleases.filter(
+    (release) => release.channelSequence > instanceChannelSequence
+  ).length;
+}
+function getInstanceName(instance) {
+  const nameTag = instance.tags?.find((tag) => tag.key === "name");
+  return nameTag?.value || instance.id.slice(0, 7);
+}
+function formatDateTime(dateString) {
+  if (!dateString) return "N/A";
+  const date = new Date(dateString);
+  return date.toLocaleDateString("en-US", {
+    month: "numeric",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  });
+}
+function UpdateBadge({ count }) {
+  if (count <= 0) return null;
+  return /* @__PURE__ */ jsx("span", { className: "ml-1.5 inline-flex h-5 w-5 items-center justify-center rounded-full bg-rose-500 text-xs font-medium text-white", children: count });
+}
+function StatusBadge({ status }) {
+  const colorMap = {
+    ready: "bg-green-50 text-green-600",
+    updating: "bg-green-50 text-green-600",
+    unknown: "bg-blue-50 text-blue-500",
+    missing: "bg-pink-50 text-pink-600",
+    unavailable: "bg-pink-50 text-pink-600",
+    degraded: "bg-yellow-50 text-yellow-600"
+  };
+  const colorClass = colorMap[status] || "bg-gray-50 text-gray-600";
+  return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${colorClass}`, children: [
+    status,
+    /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+  ] });
+}
+function InstanceCard({
+  instance,
+  isActive,
+  channelReleases = [],
+  installOptions = [],
+  onUpdateClick,
+  primaryColor = "#6366f1"
+}) {
+  const [showInstanceId, setShowInstanceId] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const instanceName = getInstanceName(instance);
+  const installType = getInstallType(instance, installOptions);
+  const availableUpdates = calculateUpdatesForInstance(instance, channelReleases);
+  const displayText = showInstanceId ? instance.id.slice(0, 7) : instanceName || instance.id.slice(0, 7);
+  const getTooltipText = () => {
+    if (instanceName) {
+      return showInstanceId ? "Click to show instance name" : "Click to show instance ID";
+    }
+    return "Instance ID";
+  };
+  const getOverallStatus = () => {
+    if (!instance.resourceStates || instance.resourceStates.length === 0) {
+      return "unknown";
+    }
+    const stateCounts = instance.resourceStates.reduce((acc, resource) => {
+      acc[resource.state] = (acc[resource.state] || 0) + 1;
+      return acc;
+    }, {});
+    let maxCount = 0;
+    let maxStatus = "unknown";
+    for (const [status, count] of Object.entries(stateCounts)) {
+      if (count > maxCount) {
+        maxCount = count;
+        maxStatus = status;
+      }
+    }
+    return maxStatus;
+  };
+  const overallStatus = getOverallStatus();
+  const handleUpdateClick = () => {
+    if (onUpdateClick) {
+      onUpdateClick(instance.id);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-gray-200 bg-white p-4", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr_auto] gap-3", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `mt-1.5 h-2 w-2 rounded-full ${isActive ? "bg-green-400" : "bg-gray-300"}`
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex h-min flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-sm font-medium text-gray-900 cursor-pointer hover:underline",
+              onClick: () => setShowInstanceId(!showInstanceId),
+              onMouseEnter: () => setShowTooltip(true),
+              onMouseLeave: () => setShowTooltip(false),
+              title: showInstanceId ? instance.id : instanceName || instance.id,
+              children: displayText
+            }
+          ),
+          showTooltip && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-800 rounded whitespace-nowrap z-10", children: [
+            getTooltipText(),
+            /* @__PURE__ */ jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-800" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-gray-600", children: [
+          "Version: ",
+          instance.versionLabel || "Unknown",
+          /* @__PURE__ */ jsx(UpdateBadge, { count: availableUpdates })
+        ] }),
+        instance.isAirgap && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-700", children: "air gap" }),
+        installType && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600", children: installType }),
+        instance.resourceStates && instance.resourceStates.length > 0 && /* @__PURE__ */ jsx(StatusBadge, { status: overallStatus })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: "First check-in:" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600", children: formatDateTime(instance.firstCheckin) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: "Last check-in:" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600", children: formatDateTime(instance.lastCheckin) })
+        ] })
+      ] }),
+      instance.tags && instance.tags.filter((tag) => tag.key !== "name").length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: instance.tags.filter((tag) => tag.key !== "name").map((tag) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "rounded-md bg-gray-100 px-2 py-1 text-sm text-gray-600",
+          children: tag.value
+        },
+        tag.key
+      )) })
+    ] }),
+    availableUpdates > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleUpdateClick,
+        className: "rounded px-4 py-1.5 text-sm font-medium text-white transition-opacity hover:opacity-90",
+        style: { backgroundColor: primaryColor },
+        children: "Update available"
+      }
+    ) })
+  ] }) });
+}
+InstanceCard.displayName = "InstanceCard";
+var OnlineInstanceList = ({
+  instances = [],
+  channelReleases = [],
+  installOptions = [],
+  onUpdateClick,
+  primaryColor = "#6366f1",
+  activeCount,
+  inactiveCount
+}) => {
+  const [showInactive, setShowInactive] = useState(false);
+  const { activeInstances, inactiveInstances } = filterActiveInactiveInstances(instances);
+  const activeTotal = activeCount ?? activeInstances.length;
+  const inactiveTotal = inactiveCount ?? inactiveInstances.length;
+  const hasInactiveInstances = inactiveTotal > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("h2", { className: "mb-0 flex items-center gap-4 text-xl font-semibold text-gray-900", children: [
+        "Online instances",
+        /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-emerald-500", children: [
+          activeTotal,
+          " active"
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-rose-400", children: [
+          inactiveTotal,
+          " inactive"
+        ] })
+      ] }),
+      hasInactiveInstances && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setShowInactive(!showInactive),
+          className: "mb-0 cursor-pointer text-sm font-medium text-blue-500 hover:underline",
+          children: showInactive ? "Hide inactive instances" : "Show inactive instances"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium text-gray-800", children: [
+          "Active",
+          /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs font-medium text-gray-400", children: "last 24 hours" })
+        ] }),
+        activeInstances.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-gray-200 bg-white p-4 text-sm text-gray-500", children: "No active instances found" }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: activeInstances.map((instance) => /* @__PURE__ */ jsx(
+          InstanceCard,
+          {
+            instance,
+            isActive: true,
+            channelReleases,
+            installOptions,
+            onUpdateClick,
+            primaryColor
+          },
+          instance.id
+        )) })
+      ] }),
+      showInactive && inactiveInstances.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-800", children: "Inactive" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: inactiveInstances.map((instance) => /* @__PURE__ */ jsx(
+          InstanceCard,
+          {
+            instance,
+            isActive: false,
+            channelReleases,
+            installOptions,
+            onUpdateClick,
+            primaryColor
+          },
+          instance.id
+        )) })
+      ] })
+    ] })
+  ] });
+};
+OnlineInstanceList.displayName = "OnlineInstanceList";
+
+export { OnlineInstanceList };
+//# sourceMappingURL=online-instance-list.js.map
+//# sourceMappingURL=online-instance-list.js.map