@calimero-network/mero-react 4.0.0 → 4.1.0

package/dist/index.d.cts

@@ -274,11 +274,17 @@ interface LoginModalProps {
     isOpen: boolean;
     /** Theme overrides — accepts any subset of `MeroTheme` tokens */
     theme?: MeroTheme;
+    /**
+     * Ports probed when discovering remote/local nodes. Defaults to the
+     * well-known Calimero dev ports (2428, 2429, 2528, 2529). Mostly an escape
+     * hatch for non-standard setups and tests.
+     */
+    localNodePorts?: readonly number[];
 }
 /**
  * LoginModal - Connection modal component
  */
-declare function LoginModal({ onConnect, onClose, connectionType, isOpen, theme, }: LoginModalProps): React.ReactPortal | null;
+declare function LoginModal({ onConnect, onClose, connectionType, isOpen, theme, localNodePorts, }: LoginModalProps): React.ReactPortal | null;
 
 interface CalimeroLogoProps extends React__default.SVGAttributes<SVGSVGElement> {
     /** Width / height shorthand (applied to both). Default: 24. */
@@ -316,6 +322,54 @@ interface MigrationAdminPanelProps {
  */
 declare function MigrationAdminPanel({ namespaceId, pollIntervalMs, className }: MigrationAdminPanelProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Local-node discovery.
+ *
+ * Calimero dev/desktop nodes expose a public, unauthenticated health endpoint
+ * at `GET {nodeUrl}/admin-api/health` that returns `{ "data": { "status":
+ * "alive" } }`. The most common local layouts run on a small, well-known set of
+ * ports, so instead of forcing the user to type a URL we probe those ports and
+ * offer whatever is actually running.
+ */
+/**
+ * Default ports probed when discovering local nodes. Covers the two-node dev
+ * stacks used across the Calimero apps (RPC + alt ports for node1 / node2).
+ */
+declare const DEFAULT_LOCAL_NODE_PORTS: readonly [2428, 2429, 2528, 2529];
+interface DiscoverLocalNodesOptions {
+    /** Ports to probe. Defaults to {@link DEFAULT_LOCAL_NODE_PORTS}. */
+    ports?: readonly number[];
+    /** Per-probe timeout in ms. Defaults to 2000. */
+    timeoutMs?: number;
+    /** Abort the whole discovery (e.g. when the modal closes). */
+    signal?: AbortSignal;
+}
+/** Build the canonical base URL for a local node on the given port. */
+declare function localNodeUrl(port: number): string;
+/**
+ * Resolve an API `path` against a node `baseUrl`. Ensures the base ends with a
+ * slash first, so a base that carries a path prefix (e.g. a `NODE_PATH_PREFIX`
+ * deployment like `http://host/node1`) keeps that segment instead of having it
+ * stripped by relative URL resolution.
+ */
+declare function nodeEndpoint(baseUrl: string, path: string): string;
+/**
+ * Probe a single node's health endpoint. Resolves `true` only when the node
+ * answers with a 2xx and (when the body is JSON) reports a non-dead status.
+ * Any network error, timeout, or non-ok response resolves `false` — never
+ * throws (except on an external abort, which is swallowed as `false`).
+ */
+declare function probeNodeHealth(baseUrl: string, options?: {
+    timeoutMs?: number;
+    signal?: AbortSignal;
+}): Promise<boolean>;
+/**
+ * Probe the configured local ports in parallel and return the base URLs that
+ * responded as healthy, in the same order as the `ports` argument (which
+ * defaults to ascending). Returns an empty array when nothing local is running.
+ */
+declare function discoverLocalNodes(options?: DiscoverLocalNodesOptions): Promise<string[]>;
+
 /**
  * Shape accepted by the metadata-setter hooks — re-exported from mero-js so
  * callers have one canonical type. A `set*Metadata` call **replaces the whole
@@ -734,4 +788,4 @@ declare function clearContextIdentity(): void;
  */
 declare function clearAllStorage(): void;
 
-export { type AppContext, AppMode, type ApplicationContextRecord, CalimeroLogo, type CalimeroLogoProps, ConnectButton, type ConnectButtonProps, ConnectionType, type ContextDiscoveryOptions, type ContextDiscoveryState, type CustomConnectionConfig, type ExecutionResult, LoginModal, type LoginModalProps, MERO_CSS_VARS, MeroContext, type MeroContextValue, MeroProvider, type MeroProviderConfig, type MeroProviderProps, type MeroTheme, MigrationAdminPanel, type MigrationAdminPanelProps, MigrationPendingBanner, type MigrationPendingBannerProps, type ResolvedMeroTheme, type SetMetadataInput, clearAllStorage, clearApplicationId, clearContextId, clearContextIdentity, clearNodeUrl, cssVar, defaultMeroTheme, getApplicationId, getContextId, getContextIdentity, getNodeUrl, localStorageTokenStorage, resolveMeroTheme, setApplicationId, setContextId, setContextIdentity, setNodeUrl, themeToCssVars, useAddGroupMembers, useAppVersion, useApplicationContexts, useContextDiscovery, useContextGroup, useContexts, useCreateContext, useCreateGroupInNamespace, useCreateNamespace, useCreateNamespaceInvitation, useDefaultCapabilities, useDeleteContext, useDeleteGroup, useDeleteNamespace, useDetachContextFromGroup, useExecute, useGroupCapabilities, useGroupContexts, useGroupInfo, useGroupInvitations, useGroupMembers, useGroupMetadata, useGroupUpgradeStatus, useJoinContext, useJoinGroup, useJoinNamespace, useJoinSubgroupInheritance, useLatestVersion, useMemberMetadata, useMero, useMigrationStatus, useMyAuthoredMigration, useNamespace, useNamespaceGroups, useNamespaceIdentity, useNamespaces, useNamespacesForApplication, useRegisterGroupSigningKey, useRemoveGroupMembers, useReparentGroup, useResyncContext, useRetryGroupUpgrade, useSetContextMetadata, useSetDefaultCapabilities, useSetGroupMetadata, useSetMemberMetadata, useSetSubgroupVisibility, useSetTeeAdmissionPolicy, useSubgroupVisibility, useSubgroups, useSubscription, useSyncGroup, useUpdateGroupSettings, useUpdateMemberRole, useUpgradeGroup };
+export { type AppContext, AppMode, type ApplicationContextRecord, CalimeroLogo, type CalimeroLogoProps, ConnectButton, type ConnectButtonProps, ConnectionType, type ContextDiscoveryOptions, type ContextDiscoveryState, type CustomConnectionConfig, DEFAULT_LOCAL_NODE_PORTS, type DiscoverLocalNodesOptions, type ExecutionResult, LoginModal, type LoginModalProps, MERO_CSS_VARS, MeroContext, type MeroContextValue, MeroProvider, type MeroProviderConfig, type MeroProviderProps, type MeroTheme, MigrationAdminPanel, type MigrationAdminPanelProps, MigrationPendingBanner, type MigrationPendingBannerProps, type ResolvedMeroTheme, type SetMetadataInput, clearAllStorage, clearApplicationId, clearContextId, clearContextIdentity, clearNodeUrl, cssVar, defaultMeroTheme, discoverLocalNodes, getApplicationId, getContextId, getContextIdentity, getNodeUrl, localNodeUrl, localStorageTokenStorage, nodeEndpoint, probeNodeHealth, resolveMeroTheme, setApplicationId, setContextId, setContextIdentity, setNodeUrl, themeToCssVars, useAddGroupMembers, useAppVersion, useApplicationContexts, useContextDiscovery, useContextGroup, useContexts, useCreateContext, useCreateGroupInNamespace, useCreateNamespace, useCreateNamespaceInvitation, useDefaultCapabilities, useDeleteContext, useDeleteGroup, useDeleteNamespace, useDetachContextFromGroup, useExecute, useGroupCapabilities, useGroupContexts, useGroupInfo, useGroupInvitations, useGroupMembers, useGroupMetadata, useGroupUpgradeStatus, useJoinContext, useJoinGroup, useJoinNamespace, useJoinSubgroupInheritance, useLatestVersion, useMemberMetadata, useMero, useMigrationStatus, useMyAuthoredMigration, useNamespace, useNamespaceGroups, useNamespaceIdentity, useNamespaces, useNamespacesForApplication, useRegisterGroupSigningKey, useRemoveGroupMembers, useReparentGroup, useResyncContext, useRetryGroupUpgrade, useSetContextMetadata, useSetDefaultCapabilities, useSetGroupMetadata, useSetMemberMetadata, useSetSubgroupVisibility, useSetTeeAdmissionPolicy, useSubgroupVisibility, useSubgroups, useSubscription, useSyncGroup, useUpdateGroupSettings, useUpdateMemberRole, useUpgradeGroup };

package/dist/index.d.ts

@@ -274,11 +274,17 @@ interface LoginModalProps {
     isOpen: boolean;
     /** Theme overrides — accepts any subset of `MeroTheme` tokens */
     theme?: MeroTheme;
+    /**
+     * Ports probed when discovering remote/local nodes. Defaults to the
+     * well-known Calimero dev ports (2428, 2429, 2528, 2529). Mostly an escape
+     * hatch for non-standard setups and tests.
+     */
+    localNodePorts?: readonly number[];
 }
 /**
  * LoginModal - Connection modal component
  */
-declare function LoginModal({ onConnect, onClose, connectionType, isOpen, theme, }: LoginModalProps): React.ReactPortal | null;
+declare function LoginModal({ onConnect, onClose, connectionType, isOpen, theme, localNodePorts, }: LoginModalProps): React.ReactPortal | null;
 
 interface CalimeroLogoProps extends React__default.SVGAttributes<SVGSVGElement> {
     /** Width / height shorthand (applied to both). Default: 24. */
@@ -316,6 +322,54 @@ interface MigrationAdminPanelProps {
  */
 declare function MigrationAdminPanel({ namespaceId, pollIntervalMs, className }: MigrationAdminPanelProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Local-node discovery.
+ *
+ * Calimero dev/desktop nodes expose a public, unauthenticated health endpoint
+ * at `GET {nodeUrl}/admin-api/health` that returns `{ "data": { "status":
+ * "alive" } }`. The most common local layouts run on a small, well-known set of
+ * ports, so instead of forcing the user to type a URL we probe those ports and
+ * offer whatever is actually running.
+ */
+/**
+ * Default ports probed when discovering local nodes. Covers the two-node dev
+ * stacks used across the Calimero apps (RPC + alt ports for node1 / node2).
+ */
+declare const DEFAULT_LOCAL_NODE_PORTS: readonly [2428, 2429, 2528, 2529];
+interface DiscoverLocalNodesOptions {
+    /** Ports to probe. Defaults to {@link DEFAULT_LOCAL_NODE_PORTS}. */
+    ports?: readonly number[];
+    /** Per-probe timeout in ms. Defaults to 2000. */
+    timeoutMs?: number;
+    /** Abort the whole discovery (e.g. when the modal closes). */
+    signal?: AbortSignal;
+}
+/** Build the canonical base URL for a local node on the given port. */
+declare function localNodeUrl(port: number): string;
+/**
+ * Resolve an API `path` against a node `baseUrl`. Ensures the base ends with a
+ * slash first, so a base that carries a path prefix (e.g. a `NODE_PATH_PREFIX`
+ * deployment like `http://host/node1`) keeps that segment instead of having it
+ * stripped by relative URL resolution.
+ */
+declare function nodeEndpoint(baseUrl: string, path: string): string;
+/**
+ * Probe a single node's health endpoint. Resolves `true` only when the node
+ * answers with a 2xx and (when the body is JSON) reports a non-dead status.
+ * Any network error, timeout, or non-ok response resolves `false` — never
+ * throws (except on an external abort, which is swallowed as `false`).
+ */
+declare function probeNodeHealth(baseUrl: string, options?: {
+    timeoutMs?: number;
+    signal?: AbortSignal;
+}): Promise<boolean>;
+/**
+ * Probe the configured local ports in parallel and return the base URLs that
+ * responded as healthy, in the same order as the `ports` argument (which
+ * defaults to ascending). Returns an empty array when nothing local is running.
+ */
+declare function discoverLocalNodes(options?: DiscoverLocalNodesOptions): Promise<string[]>;
+
 /**
  * Shape accepted by the metadata-setter hooks — re-exported from mero-js so
  * callers have one canonical type. A `set*Metadata` call **replaces the whole
@@ -734,4 +788,4 @@ declare function clearContextIdentity(): void;
  */
 declare function clearAllStorage(): void;
 
-export { type AppContext, AppMode, type ApplicationContextRecord, CalimeroLogo, type CalimeroLogoProps, ConnectButton, type ConnectButtonProps, ConnectionType, type ContextDiscoveryOptions, type ContextDiscoveryState, type CustomConnectionConfig, type ExecutionResult, LoginModal, type LoginModalProps, MERO_CSS_VARS, MeroContext, type MeroContextValue, MeroProvider, type MeroProviderConfig, type MeroProviderProps, type MeroTheme, MigrationAdminPanel, type MigrationAdminPanelProps, MigrationPendingBanner, type MigrationPendingBannerProps, type ResolvedMeroTheme, type SetMetadataInput, clearAllStorage, clearApplicationId, clearContextId, clearContextIdentity, clearNodeUrl, cssVar, defaultMeroTheme, getApplicationId, getContextId, getContextIdentity, getNodeUrl, localStorageTokenStorage, resolveMeroTheme, setApplicationId, setContextId, setContextIdentity, setNodeUrl, themeToCssVars, useAddGroupMembers, useAppVersion, useApplicationContexts, useContextDiscovery, useContextGroup, useContexts, useCreateContext, useCreateGroupInNamespace, useCreateNamespace, useCreateNamespaceInvitation, useDefaultCapabilities, useDeleteContext, useDeleteGroup, useDeleteNamespace, useDetachContextFromGroup, useExecute, useGroupCapabilities, useGroupContexts, useGroupInfo, useGroupInvitations, useGroupMembers, useGroupMetadata, useGroupUpgradeStatus, useJoinContext, useJoinGroup, useJoinNamespace, useJoinSubgroupInheritance, useLatestVersion, useMemberMetadata, useMero, useMigrationStatus, useMyAuthoredMigration, useNamespace, useNamespaceGroups, useNamespaceIdentity, useNamespaces, useNamespacesForApplication, useRegisterGroupSigningKey, useRemoveGroupMembers, useReparentGroup, useResyncContext, useRetryGroupUpgrade, useSetContextMetadata, useSetDefaultCapabilities, useSetGroupMetadata, useSetMemberMetadata, useSetSubgroupVisibility, useSetTeeAdmissionPolicy, useSubgroupVisibility, useSubgroups, useSubscription, useSyncGroup, useUpdateGroupSettings, useUpdateMemberRole, useUpgradeGroup };
+export { type AppContext, AppMode, type ApplicationContextRecord, CalimeroLogo, type CalimeroLogoProps, ConnectButton, type ConnectButtonProps, ConnectionType, type ContextDiscoveryOptions, type ContextDiscoveryState, type CustomConnectionConfig, DEFAULT_LOCAL_NODE_PORTS, type DiscoverLocalNodesOptions, type ExecutionResult, LoginModal, type LoginModalProps, MERO_CSS_VARS, MeroContext, type MeroContextValue, MeroProvider, type MeroProviderConfig, type MeroProviderProps, type MeroTheme, MigrationAdminPanel, type MigrationAdminPanelProps, MigrationPendingBanner, type MigrationPendingBannerProps, type ResolvedMeroTheme, type SetMetadataInput, clearAllStorage, clearApplicationId, clearContextId, clearContextIdentity, clearNodeUrl, cssVar, defaultMeroTheme, discoverLocalNodes, getApplicationId, getContextId, getContextIdentity, getNodeUrl, localNodeUrl, localStorageTokenStorage, nodeEndpoint, probeNodeHealth, resolveMeroTheme, setApplicationId, setContextId, setContextIdentity, setNodeUrl, themeToCssVars, useAddGroupMembers, useAppVersion, useApplicationContexts, useContextDiscovery, useContextGroup, useContexts, useCreateContext, useCreateGroupInNamespace, useCreateNamespace, useCreateNamespaceInvitation, useDefaultCapabilities, useDeleteContext, useDeleteGroup, useDeleteNamespace, useDetachContextFromGroup, useExecute, useGroupCapabilities, useGroupContexts, useGroupInfo, useGroupInvitations, useGroupMembers, useGroupMetadata, useGroupUpgradeStatus, useJoinContext, useJoinGroup, useJoinNamespace, useJoinSubgroupInheritance, useLatestVersion, useMemberMetadata, useMero, useMigrationStatus, useMyAuthoredMigration, useNamespace, useNamespaceGroups, useNamespaceIdentity, useNamespaces, useNamespacesForApplication, useRegisterGroupSigningKey, useRemoveGroupMembers, useReparentGroup, useResyncContext, useRetryGroupUpgrade, useSetContextMetadata, useSetDefaultCapabilities, useSetGroupMetadata, useSetMemberMetadata, useSetSubgroupVisibility, useSetTeeAdmissionPolicy, useSubgroupVisibility, useSubgroups, useSubscription, useSyncGroup, useUpdateGroupSettings, useUpdateMemberRole, useUpgradeGroup };

package/dist/index.js

@@ -473,6 +473,59 @@ function CalimeroLogo({
   );
 }
 
+// src/utils/nodeDiscovery.ts
+var DEFAULT_LOCAL_NODE_PORTS = [2428, 2429, 2528, 2529];
+var LOCAL_HOST = "localhost";
+var DEFAULT_PROBE_TIMEOUT_MS = 2e3;
+function localNodeUrl(port) {
+  return `http://${LOCAL_HOST}:${port}`;
+}
+function nodeEndpoint(baseUrl, path) {
+  const base = baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
+  return new URL(path, base).toString();
+}
+async function probeNodeHealth(baseUrl, options = {}) {
+  const { timeoutMs = DEFAULT_PROBE_TIMEOUT_MS, signal } = options;
+  if (signal?.aborted) return false;
+  const controller = new AbortController();
+  const onAbort = () => controller.abort();
+  const listenerAdded = !!signal;
+  if (listenerAdded) signal.addEventListener("abort", onAbort, { once: true });
+  const timer = setTimeout(() => controller.abort(), timeoutMs);
+  try {
+    const url = nodeEndpoint(baseUrl, "admin-api/health");
+    const res = await fetch(url, {
+      method: "GET",
+      signal: controller.signal
+    });
+    if (!res.ok) return false;
+    try {
+      const body = await res.json();
+      const status = body?.data?.status !== void 0 ? body?.data?.status : body?.status;
+      if (status === void 0) return true;
+      return typeof status === "string" && status.toLowerCase() === "alive";
+    } catch {
+      return true;
+    }
+  } catch {
+    return false;
+  } finally {
+    clearTimeout(timer);
+    if (listenerAdded) signal.removeEventListener("abort", onAbort);
+  }
+}
+async function discoverLocalNodes(options = {}) {
+  const { ports = DEFAULT_LOCAL_NODE_PORTS, timeoutMs, signal } = options;
+  const results = await Promise.all(
+    ports.map(async (port) => {
+      const url = localNodeUrl(port);
+      const ok = await probeNodeHealth(url, { timeoutMs, signal });
+      return ok ? url : null;
+    })
+  );
+  return results.filter((url) => url !== null);
+}
+
 // src/theme.ts
 var defaultMeroTheme = Object.freeze({
   primary: "#a5ff11",
@@ -521,6 +574,8 @@ function themeToCssVars(theme) {
 function cssVar(theme, key) {
   return `var(${MERO_CSS_VARS[key]}, ${theme[key]})`;
 }
+var DEFAULT_LOCAL_NODE_URL = "http://node1.127.0.0.1.nip.io";
+var CUSTOM_SELECTION = "__custom__";
 function isValidUrl(urlString) {
   if (!urlString || urlString.trim() === "") {
     return false;
@@ -549,6 +604,9 @@ function isValidUrl(urlString) {
     return false;
   }
 }
+function displayNodeUrl(url) {
+  return url.replace(/^https?:\/\//, "").replace(/\/+$/, "");
+}
 function tint(color, percent) {
   return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
 }
@@ -653,10 +711,60 @@ function buildStyles(t) {
       transition: "all 0.15s ease"
     },
     radioLabelActive: {
-      borderColor: accent,
+      border: `1px solid ${accent}`,
+      backgroundColor: accentGlow,
+      color: text
+    },
+    radioList: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5rem",
+      marginBottom: "1rem"
+    },
+    radioItem: {
+      display: "flex",
+      alignItems: "center",
+      gap: "0.625rem",
+      color: text,
+      cursor: "pointer",
+      padding: "0.75rem 1rem",
+      borderRadius: radius,
+      border: `1px solid ${border}`,
+      backgroundColor: bgSecondary,
+      transition: "all 0.15s ease",
+      fontSize: "0.875rem"
+    },
+    radioItemActive: {
+      // Override the full `border` shorthand (not just borderColor) so React
+      // never has to mix shorthand + longhand on the same element.
+      border: `1px solid ${accent}`,
       backgroundColor: accentGlow,
       color: text
     },
+    radioIndicator: {
+      flexShrink: 0,
+      width: "1rem",
+      height: "1rem",
+      borderRadius: "50%",
+      border: `2px solid ${border}`,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    radioIndicatorActive: {
+      border: `2px solid ${accent}`
+    },
+    radioDot: {
+      width: "0.5rem",
+      height: "0.5rem",
+      borderRadius: "50%",
+      backgroundColor: accent
+    },
+    nodeMeta: {
+      marginLeft: "auto",
+      fontSize: "0.75rem",
+      color: textSecondary
+    },
     input: {
       width: "100%",
       padding: "0.75rem 1rem",
@@ -682,6 +790,29 @@ function buildStyles(t) {
     localInfoCode: {
       color: accent
     },
+    noNodeInfo: {
+      color: textSecondary,
+      fontSize: "0.875rem",
+      textAlign: "center",
+      padding: "0.75rem",
+      backgroundColor: bgSecondary,
+      borderRadius: radius,
+      marginBottom: "1rem",
+      border: `1px solid ${border}`
+    },
+    toolbar: {
+      display: "flex",
+      justifyContent: "center",
+      marginBottom: "1rem"
+    },
+    rescan: {
+      background: "none",
+      border: "none",
+      color: accent,
+      cursor: "pointer",
+      fontSize: "0.8125rem",
+      padding: "0.25rem 0.5rem"
+    },
     buttonGroup: {
       display: "flex",
       justifyContent: "center"
@@ -709,6 +840,15 @@ function buildStyles(t) {
       padding: "2rem",
       color: textSecondary
     },
+    discovering: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "0.75rem",
+      padding: "1rem",
+      color: textSecondary,
+      fontSize: "0.875rem"
+    },
     spinner: {
       width: "2rem",
       height: "2rem",
@@ -716,6 +856,14 @@ function buildStyles(t) {
       borderTopColor: accent,
       borderRadius: "50%",
       animation: "meroSpin 1s linear infinite"
+    },
+    spinnerSmall: {
+      width: "1.5rem",
+      height: "1.5rem",
+      border: `3px solid ${border}`,
+      borderTopColor: accent,
+      borderRadius: "50%",
+      animation: "meroSpin 1s linear infinite"
     }
   };
 }
@@ -724,11 +872,14 @@ function LoginModal({
   onClose,
   connectionType,
   isOpen,
-  theme
+  theme,
+  localNodePorts = DEFAULT_LOCAL_NODE_PORTS
 }) {
   const [nodeType, setNodeType] = useState("local");
-  const [nodeUrl, setNodeUrl2] = useState("");
-  const [isValid, setIsValid] = useState(true);
+  const [selected, setSelected] = useState(CUSTOM_SELECTION);
+  const [discovered, setDiscovered] = useState([]);
+  const [discovering, setDiscovering] = useState(false);
+  const [customUrl, setCustomUrl] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const resolved = useMemo(() => resolveMeroTheme(theme), [theme]);
@@ -743,7 +894,7 @@ function LoginModal({
   useEffect(() => {
     const savedUrl = localStorage.getItem("mero:node_url");
     if (savedUrl) {
-      setNodeUrl2(savedUrl);
+      setCustomUrl(savedUrl);
     }
   }, []);
   useEffect(() => {
@@ -753,25 +904,56 @@ function LoginModal({
       setNodeType("remote");
     }
   }, [connectionType]);
+  const [scanNonce, setScanNonce] = useState(0);
+  const portsKey = useMemo(() => localNodePorts.join(","), [localNodePorts]);
+  const remoteActive = isOpen && shouldShowRemote && nodeType === "remote";
   useEffect(() => {
-    if (nodeType === "remote") {
-      setIsValid(isValidUrl(nodeUrl));
-    } else {
-      setIsValid(true);
+    if (!remoteActive) {
+      return;
     }
-  }, [nodeUrl, nodeType]);
+    const controller = new AbortController();
+    let active = true;
+    setDiscovering(true);
+    setDiscovered([]);
+    setError(null);
+    discoverLocalNodes({ ports: localNodePorts, signal: controller.signal }).then((nodes) => {
+      if (!active) return;
+      setDiscovered(nodes);
+      setSelected(nodes.length > 0 ? nodes[0] : CUSTOM_SELECTION);
+    }).catch(() => {
+      if (active) setSelected(CUSTOM_SELECTION);
+    }).finally(() => {
+      if (active) setDiscovering(false);
+    });
+    return () => {
+      active = false;
+      controller.abort();
+    };
+  }, [remoteActive, portsKey, scanNonce]);
+  const isCustom = selected === CUSTOM_SELECTION;
+  const hasDiscovered = discovered.length > 0;
+  const canConnect = !loading && (nodeType === "local" ? true : discovering ? false : isCustom ? isValidUrl(customUrl) : true);
+  const canConnectRef = useRef(canConnect);
+  canConnectRef.current = canConnect;
   const handleConnect = useCallback(async () => {
-    if (!isValid) return;
+    const targetUrl = nodeType === "local" ? DEFAULT_LOCAL_NODE_URL : selected === CUSTOM_SELECTION ? customUrl : selected;
+    const usingDiscovered = nodeType === "remote" && selected !== CUSTOM_SELECTION;
+    if (nodeType === "remote" && !usingDiscovered && !isValidUrl(targetUrl)) {
+      return;
+    }
+    const normalizedUrl = targetUrl.replace(/\/+$/, "");
+    if (usingDiscovered) {
+      onConnect(normalizedUrl);
+      return;
+    }
     setLoading(true);
     setError(null);
-    const baseUrl = nodeType === "local" ? "http://node1.127.0.0.1.nip.io" : nodeUrl;
     try {
       const response = await fetch(
-        new URL("admin-api/is-authed", baseUrl).toString()
+        nodeEndpoint(normalizedUrl, "admin-api/is-authed")
       );
       if (response.ok || response.status === 401) {
         setLoading(false);
-        const normalizedUrl = baseUrl.replace(/\/+$/, "");
         onConnect(normalizedUrl);
       } else {
         throw new Error(`Connection failed: ${response.statusText}`);
@@ -781,10 +963,108 @@ function LoginModal({
       setError("Failed to connect. Please check the URL and try again.");
       setLoading(false);
     }
-  }, [isValid, nodeType, nodeUrl, onConnect]);
+  }, [nodeType, selected, customUrl, onConnect]);
   if (!isOpen) {
     return null;
   }
+  const showManualInput = isCustom;
+  const renderRadio = (value, label, meta) => {
+    const active = selected === value;
+    return (
+      // Selection is driven solely by the radio input's `onChange` — clicking
+      // anywhere on the wrapping label forwards to the input, and keyboard
+      // users can tab to / arrow through the (visually hidden but focusable)
+      // input. A label `onClick` here would double-fire `setSelected`.
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          "data-testid": `node-option-${value === CUSTOM_SELECTION ? "custom" : displayNodeUrl(value)}`,
+          style: {
+            ...styles.radioItem,
+            ...active ? styles.radioItemActive : {}
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                name: "mero-node",
+                value,
+                checked: active,
+                onChange: () => setSelected(value),
+                style: { position: "absolute", opacity: 0 }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  ...styles.radioIndicator,
+                  ...active ? styles.radioIndicatorActive : {}
+                },
+                children: active && /* @__PURE__ */ jsx("span", { style: styles.radioDot })
+              }
+            ),
+            label,
+            meta && /* @__PURE__ */ jsx("span", { style: styles.nodeMeta, children: meta })
+          ]
+        },
+        value
+      )
+    );
+  };
+  const renderRemoteView = () => {
+    if (discovering) {
+      return /* @__PURE__ */ jsxs("div", { style: styles.discovering, "data-testid": "node-discovering", children: [
+        /* @__PURE__ */ jsx("div", { style: styles.spinnerSmall }),
+        /* @__PURE__ */ jsx("p", { children: "Searching for local nodes..." })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { style: styles.info, children: hasDiscovered ? "Select a discovered node, or enter a node URL manually." : "No local node found. Enter a node URL to continue." }),
+      hasDiscovered && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: styles.radioList,
+          role: "radiogroup",
+          "aria-label": "Available nodes",
+          children: [
+            discovered.map(
+              (url) => renderRadio(url, displayNodeUrl(url), "local")
+            ),
+            renderRadio(CUSTOM_SELECTION, "Enter node URL manually")
+          ]
+        }
+      ),
+      showManualInput && /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: customUrl,
+          onChange: (e) => setCustomUrl(e.target.value),
+          placeholder: "https://your-node-url.calimero.network",
+          style: styles.input,
+          "data-testid": "node-url-input",
+          autoFocus: !hasDiscovered,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && canConnectRef.current) {
+              handleConnect();
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: styles.toolbar, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          style: styles.rescan,
+          onClick: () => setScanNonce((n) => n + 1),
+          "data-testid": "rescan-button",
+          children: "\u21BB Rescan local nodes"
+        }
+      ) })
+    ] });
+  };
   const modalContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: `
         @keyframes meroSpin { to { transform: rotate(360deg); } }
@@ -792,7 +1072,7 @@ function LoginModal({
         @keyframes meroSlideIn { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
       ` }),
     /* @__PURE__ */ jsx("div", { style: { ...themeVars, ...styles.overlay }, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: styles.content, onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsx("button", { style: styles.closeButton, onClick: onClose, children: "\xD7" }),
+      /* @__PURE__ */ jsx("button", { style: styles.closeButton, onClick: onClose, "aria-label": "Close", children: "\xD7" }),
       /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
         /* @__PURE__ */ jsx(CalimeroLogo, { size: 44, color: cssVar(resolved, "primary") }),
         /* @__PURE__ */ jsx("h1", { style: styles.title, children: "Connect to Calimero" })
@@ -801,12 +1081,13 @@ function LoginModal({
         /* @__PURE__ */ jsx("p", { children: "Connecting to node..." }),
         /* @__PURE__ */ jsx("div", { style: styles.spinner })
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("p", { style: styles.info, children: shouldShowRadioGroup ? "Select your Calimero node type to continue." : connectionType === "local" /* Local */ ? "Connect to your local Calimero node." : "Enter your remote Calimero node URL." }),
+        shouldShowRadioGroup && /* @__PURE__ */ jsx("p", { style: styles.info, children: "Select your Calimero node type to continue." }),
         error && /* @__PURE__ */ jsx("p", { style: styles.error, children: error }),
         shouldShowRadioGroup && /* @__PURE__ */ jsxs("div", { style: styles.radioGroup, children: [
           /* @__PURE__ */ jsxs(
             "label",
             {
+              "data-testid": "node-type-local",
               style: {
                 ...styles.radioLabel,
                 ...nodeType === "local" ? styles.radioLabelActive : {}
@@ -830,6 +1111,7 @@ function LoginModal({
           /* @__PURE__ */ jsxs(
             "label",
             {
+              "data-testid": "node-type-remote",
               style: {
                 ...styles.radioLabel,
                 ...nodeType === "remote" ? styles.radioLabelActive : {}
@@ -851,34 +1133,22 @@ function LoginModal({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { children: shouldShowRemote && nodeType === "remote" ? /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            value: nodeUrl,
-            onChange: (e) => setNodeUrl2(e.target.value),
-            placeholder: "https://your-node-url.calimero.network",
-            style: styles.input,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" && isValid) {
-                handleConnect();
-              }
-            }
-          }
-        ) : shouldShowLocal ? /* @__PURE__ */ jsxs("p", { style: styles.localInfo, children: [
+        nodeType === "local" && shouldShowLocal && /* @__PURE__ */ jsxs("p", { style: styles.localInfo, children: [
           "Using default local node: ",
           /* @__PURE__ */ jsx("br", {}),
-          /* @__PURE__ */ jsx("code", { style: styles.localInfoCode, children: "http://node1.127.0.0.1.nip.io" })
-        ] }) : null }),
+          /* @__PURE__ */ jsx("code", { style: styles.localInfoCode, children: DEFAULT_LOCAL_NODE_URL })
+        ] }),
+        nodeType === "remote" && shouldShowRemote && renderRemoteView(),
         /* @__PURE__ */ jsx("div", { style: styles.buttonGroup, children: /* @__PURE__ */ jsx(
           "button",
           {
             onClick: handleConnect,
-            disabled: !isValid || loading,
+            disabled: !canConnect,
             style: {
               ...styles.button,
-              ...!isValid || loading ? styles.buttonDisabled : {}
+              ...!canConnect ? styles.buttonDisabled : {}
             },
+            "data-testid": "connect-button",
             children: "Connect"
           }
         ) })
@@ -2650,6 +2920,6 @@ function MigrationAdminPanel({ namespaceId, pollIntervalMs, className }) {
   ] });
 }
 
-export { AppMode, CalimeroLogo, ConnectButton, ConnectionType, LoginModal, MERO_CSS_VARS, MeroContext, MeroProvider, MigrationAdminPanel, MigrationPendingBanner, clearAllStorage, clearApplicationId, clearContextId, clearContextIdentity, clearNodeUrl, cssVar, defaultMeroTheme, getApplicationId, getContextId, getContextIdentity, getNodeUrl, localStorageTokenStorage, resolveMeroTheme, setApplicationId, setContextId, setContextIdentity, setNodeUrl, themeToCssVars, useAddGroupMembers, useAppVersion, useApplicationContexts, useContextDiscovery, useContextGroup, useContexts, useCreateContext, useCreateGroupInNamespace, useCreateNamespace, useCreateNamespaceInvitation, useDefaultCapabilities, useDeleteContext, useDeleteGroup, useDeleteNamespace, useDetachContextFromGroup, useExecute, useGroupCapabilities, useGroupContexts, useGroupInfo, useGroupInvitations, useGroupMembers, useGroupMetadata, useGroupUpgradeStatus, useJoinContext, useJoinGroup, useJoinNamespace, useJoinSubgroupInheritance, useLatestVersion, useMemberMetadata, useMero, useMigrationStatus, useMyAuthoredMigration, useNamespace, useNamespaceGroups, useNamespaceIdentity, useNamespaces, useNamespacesForApplication, useRegisterGroupSigningKey, useRemoveGroupMembers, useReparentGroup, useResyncContext, useRetryGroupUpgrade, useSetContextMetadata, useSetDefaultCapabilities, useSetGroupMetadata, useSetMemberMetadata, useSetSubgroupVisibility, useSetTeeAdmissionPolicy, useSubgroupVisibility, useSubgroups, useSubscription, useSyncGroup, useUpdateGroupSettings, useUpdateMemberRole, useUpgradeGroup };
+export { AppMode, CalimeroLogo, ConnectButton, ConnectionType, DEFAULT_LOCAL_NODE_PORTS, LoginModal, MERO_CSS_VARS, MeroContext, MeroProvider, MigrationAdminPanel, MigrationPendingBanner, clearAllStorage, clearApplicationId, clearContextId, clearContextIdentity, clearNodeUrl, cssVar, defaultMeroTheme, discoverLocalNodes, getApplicationId, getContextId, getContextIdentity, getNodeUrl, localNodeUrl, localStorageTokenStorage, nodeEndpoint, probeNodeHealth, resolveMeroTheme, setApplicationId, setContextId, setContextIdentity, setNodeUrl, themeToCssVars, useAddGroupMembers, useAppVersion, useApplicationContexts, useContextDiscovery, useContextGroup, useContexts, useCreateContext, useCreateGroupInNamespace, useCreateNamespace, useCreateNamespaceInvitation, useDefaultCapabilities, useDeleteContext, useDeleteGroup, useDeleteNamespace, useDetachContextFromGroup, useExecute, useGroupCapabilities, useGroupContexts, useGroupInfo, useGroupInvitations, useGroupMembers, useGroupMetadata, useGroupUpgradeStatus, useJoinContext, useJoinGroup, useJoinNamespace, useJoinSubgroupInheritance, useLatestVersion, useMemberMetadata, useMero, useMigrationStatus, useMyAuthoredMigration, useNamespace, useNamespaceGroups, useNamespaceIdentity, useNamespaces, useNamespacesForApplication, useRegisterGroupSigningKey, useRemoveGroupMembers, useReparentGroup, useResyncContext, useRetryGroupUpgrade, useSetContextMetadata, useSetDefaultCapabilities, useSetGroupMetadata, useSetMemberMetadata, useSetSubgroupVisibility, useSetTeeAdmissionPolicy, useSubgroupVisibility, useSubgroups, useSubscription, useSyncGroup, useUpdateGroupSettings, useUpdateMemberRole, useUpgradeGroup };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map