@dxos/shell 0.6.13-staging.1e988a3 → 0.6.14-main.2b6a0f3

package/src/components/InvitationList/InvitationList.stories.tsx

@@ -13,10 +13,9 @@ import { InvitationList } from './InvitationList';
 import { inviteWithState } from '../../testing';
 
 export default {
-  title: 'react-shell/InvitationList',
+  title: 'sdk/react-shell/InvitationList',
   component: InvitationList,
   decorators: [withTheme, withLayout({ tooltips: true })],
-  actions: { argTypesRegex: '^on.*' },
   parameters: { chromatic: { disableSnapshot: false } },
 };
 

package/src/components/Panel/Panel.stories.tsx

@@ -15,9 +15,8 @@ import { Label } from './Label';
 import { StorybookDialog } from '../StorybookDialog';
 
 export default {
-  title: 'react-shell/StorybookDialog',
+  title: 'sdk/react-shell/StorybookDialog',
   component: StorybookDialog,
-  actions: { argTypesRegex: '^on.*' },
   decorators: [withTheme],
 };
 

package/src/components/Viewport/Viewport.stories.tsx

@@ -55,7 +55,7 @@ const StorybookViewport = (props: StorybookViewportProps) => {
 };
 
 export default {
-  title: 'react-shell/StorybookViewport',
+  title: 'sdk/react-shell/StorybookViewport',
   component: StorybookViewport,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/src/composites/Shell/Shell.tsx

@@ -88,9 +88,9 @@ export const Shell = ({ runtime }: { runtime: ShellRuntime }) => {
           }
           initialInvitationCode={invitationCode}
           onCancelResetStorage={() => runtime.setLayout({ layout: ShellLayout.IDENTITY })}
-          onDone={() => {
+          onDone={async () => {
             blurActiveElement();
-            void runtime.setAppContext({ display: ShellDisplay.NONE });
+            await runtime.setAppContext({ display: ShellDisplay.NONE });
             runtime.setLayout({ layout: ShellLayout.DEFAULT });
           }}
         />
@@ -110,7 +110,8 @@ export const Shell = ({ runtime }: { runtime: ShellRuntime }) => {
           onJoinNewIdentity={async () => {
             runtime.setLayout({ layout: ShellLayout.STATUS });
             await client.reset();
-            return runtime.setLayout({ layout: ShellLayout.INITIALIZE_IDENTITY_FROM_INVITATION });
+            // TODO(wittjosiah): Enter join flow without reloading.
+            return runtime.setAppContext({ display: ShellDisplay.NONE, reset: true, target: 'deviceInvitation' });
           }}
           onDone={async () => {
             blurActiveElement();

package/src/composites/Shell/run-shell.tsx

@@ -27,7 +27,7 @@ export const runShell = async (config: Config = new Config()) => {
     createRoot(document.getElementById('root')!).render(
       <StrictMode>
         <ThemeProvider tx={defaultTx} resourceExtensions={[osTranslations]}>
-          <ClientProvider config={config} services={services}>
+          <ClientProvider config={config} services={services} noBanner>
             <ClipboardProvider>
               <Tooltip.Provider>
                 <AgentHostingProvider>

package/src/panels/IdentityPanel/IdentityPanel.stories.tsx

@@ -37,9 +37,14 @@ const noOpProps: IdentityPanelImplProps = {
 };
 
 export default {
-  title: 'react-shell/IdentityPanel',
+  title: 'sdk/react-shell/IdentityPanel',
   decorators: [withTheme],
-  parameters: { translations: [osTranslations], chromatic: { disableSnapshot: false } },
+  parameters: {
+    translations: [osTranslations],
+    chromatic: {
+      disableSnapshot: false,
+    },
+  },
 };
 
 export const IdentityActionChooser = () => {

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -12,7 +12,7 @@ import { type Identity, useIdentity, useDevices, useHaloInvitations } from '@dxo
 import { useInvitationStatus } from '@dxos/react-client/invitations';
 import { type CancellableInvitationObservable } from '@dxos/react-client/invitations';
 import { useNetworkStatus, ConnectionState } from '@dxos/react-client/mesh';
-import { Avatar, DensityProvider, Input, Toolbar, Tooltip, useId, useTranslation } from '@dxos/react-ui';
+import { Avatar, Input, Toolbar, Tooltip, useId, useTranslation } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 import { hexToEmoji, hexToHue, keyToFallback } from '@dxos/util';
 
@@ -178,7 +178,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
   const onCancelReset = () => rest.send?.('unchooseAction');
 
   return (
-    <DensityProvider density='fine'>
+    <>
       <IdentityHeading
         {...{ identity, titleId, title, onDone, onUpdateProfile, connectionState, onChangeConnectionState }}
       />
@@ -218,7 +218,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
           </Viewport.View>
         </Viewport.Views>
       </Viewport.Root>
-    </DensityProvider>
+    </>
   );
 };
 

package/src/panels/IdentityPanel/IdentityPanelProps.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import type { cloneElement } from 'react';
+import type { FC, cloneElement } from 'react';
 import type { Event, SingleOrArray } from 'xstate';
 
 import type { Device, Identity } from '@dxos/react-client/halo';
@@ -10,7 +10,7 @@ import type { InvitationStatus } from '@dxos/react-client/invitations';
 import type { ConnectionState } from '@dxos/react-client/mesh';
 
 import type { IdentityEvent } from './identityMachine';
-import { type AgentFormProps } from '../../components';
+import type { AgentFormProps } from '../../components';
 import type { InvitationManagerProps } from '../../steps';
 
 export type IdentityPanelInitialDisposition = 'default' | 'manage-device-invitation';
@@ -35,8 +35,8 @@ export type IdentityPanelImplProps = {
   onDone?: () => void;
   doneActionParent?: Parameters<typeof cloneElement>[0];
   invitationUrl?: string;
-  IdentityActionChooser?: React.FC<IdentityPanelStepProps>;
-  InvitationManager?: React.FC<InvitationManagerProps>;
+  IdentityActionChooser?: FC<IdentityPanelStepProps>;
+  InvitationManager?: FC<InvitationManagerProps>;
 } & Partial<InvitationStatus> &
   Partial<AgentFormProps>;
 

package/src/panels/IdentityPanel/useAgentHandlers.ts

@@ -2,127 +2,22 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useCallback, useEffect, useState } from 'react';
-
 import { type CancellableInvitation } from '@dxos/client-protocol';
-import { invariant } from '@dxos/invariant';
-import { log } from '@dxos/log';
-import { useClient, useAgentHostingClient } from '@dxos/react-client';
+import { useClient } from '@dxos/react-client';
 import { type Identity } from '@dxos/react-client/halo';
-import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 
+import { useEdgeAgentHandlers } from './useEdgeAgentsHandlers';
+import { useKubeAgentHandlers } from './useKubeAgentHandlers';
 import { type AgentFormProps } from '../../components';
 
-export const useAgentHandlers = ({
-  invitations,
-  identity,
-}: {
+export const useAgentHandlers = (params: {
   invitations: CancellableInvitation[];
   identity: Identity | null;
 }): AgentFormProps => {
-  const [validationMessage, setValidationMessage] = useState('');
-  const [agentStatus, setAgentStatus] = useState<AgentFormProps['agentStatus']>('getting');
-  const agentHostingProviderClient = useAgentHostingClient();
   const client = useClient();
-
-  const updateAgentStatus = async () => {
-    // TODO(nf): if agent exists, subscribe to updates instead of oneshot status
-    if (agentHostingProviderClient) {
-      setAgentStatus('getting');
-      try {
-        const agentId = await agentHostingProviderClient?.getAgent(identity?.identityKey.truncate() ?? 'never');
-        if (agentId) {
-          setAgentStatus('created');
-        } else {
-          setAgentStatus('creatable');
-        }
-      } catch (err: any) {
-        setAgentStatus('error');
-        setValidationMessage(`Couldn’t check agent status: ${err.message}`);
-      }
-    } else {
-      setAgentStatus('error');
-      setValidationMessage('No agent provider configured.');
-    }
-  };
-
-  const createAgent = async (invitationCode: string) => {
-    invariant(identity, 'Identity not found');
-    if (agentHostingProviderClient) {
-      setAgentStatus('creating');
-      setValidationMessage('');
-      try {
-        const agentId = await agentHostingProviderClient?.createAgent(invitationCode, identity.identityKey.truncate());
-        if (agentId) {
-          setAgentStatus('created');
-        } else {
-          setAgentStatus('creatable');
-          setValidationMessage('Error creating agent.');
-        }
-      } catch (err: any) {
-        setValidationMessage(`Error creating agent: ${err.message}`);
-        return updateAgentStatus();
-      }
-    } else {
-      setAgentStatus('error');
-      setValidationMessage('No agent provider configured.');
-    }
-  };
-
-  const destroyAgent = async () => {
-    invariant(identity, 'Identity not found');
-    if (agentHostingProviderClient) {
-      setAgentStatus('destroying');
-      setValidationMessage('');
-      try {
-        await agentHostingProviderClient?.destroyAgent(identity.identityKey.truncate());
-        setAgentStatus('creatable');
-      } catch (err: any) {
-        setValidationMessage(`Error destroying agent: ${err.message}`);
-        return updateAgentStatus();
-      }
-    } else {
-      setAgentStatus('error');
-      setValidationMessage('No agent provider configured.');
-    }
-  };
-
-  useEffect(() => {
-    void updateAgentStatus();
-  }, []);
-
-  const handleAgentCreate = useCallback(async (invitation: Invitation) => {
-    const invitationCode = InvitationEncoder.encode(invitation);
-    if (invitation.state === Invitation.State.CONNECTING) {
-      log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
-      return createAgent(invitationCode);
-    }
-  }, []);
-
-  const onAgentCreate = async () => {
-    invitations.forEach((invitation) => invitation.cancel());
-
-    // TODO(nf): do this work in the hosting provider client?
-    const invitation = client.halo.share({
-      type: Invitation.Type.INTERACTIVE,
-      authMethod: Invitation.AuthMethod.NONE,
-      multiUse: true,
-    });
-
-    invitation.subscribe(handleAgentCreate);
-  };
-
-  const onAgentRefresh = async () => {
-    setValidationMessage('');
-    await updateAgentStatus();
-  };
-
-  return {
-    onAgentCreate,
-    onAgentDestroy: destroyAgent,
-    onAgentRefresh,
-    validationMessage,
-    agentStatus,
-    agentHostingEnabled: !!agentHostingProviderClient,
-  };
+  if (client.config.values?.runtime?.client?.edgeFeatures?.agents) {
+    return useEdgeAgentHandlers(params);
+  } else {
+    return useKubeAgentHandlers(params);
+  }
 };

package/src/panels/IdentityPanel/useEdgeAgentsHandlers.ts

@@ -0,0 +1,96 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type CancellableInvitation } from '@dxos/client-protocol';
+import { invariant } from '@dxos/invariant';
+import { QueryAgentStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
+import { useClient } from '@dxos/react-client';
+import { type Identity } from '@dxos/react-client/halo';
+
+import { type AgentFormProps } from '../../components';
+
+export const useEdgeAgentHandlers = ({
+  identity,
+}: {
+  invitations: CancellableInvitation[];
+  identity: Identity | null;
+}): AgentFormProps => {
+  const [validationMessage, setValidationMessage] = useState('');
+  const [lastReceivedStatus, setLastReceivedStatus] = useState<QueryAgentStatusResponse.AgentStatus>(
+    QueryAgentStatusResponse.AgentStatus.UNKNOWN,
+  );
+  const [agentStatus, setAgentStatus] = useState<AgentFormProps['agentStatus']>('getting');
+  const client = useClient();
+  const agentHostingEnabled = Boolean(client.config.values.runtime?.client?.edgeFeatures?.agents);
+
+  const handleStatus = (status: QueryAgentStatusResponse.AgentStatus) => {
+    switch (status) {
+      case QueryAgentStatusResponse.AgentStatus.ACTIVE:
+      case QueryAgentStatusResponse.AgentStatus.INACTIVE:
+        setAgentStatus('created');
+        break;
+      case QueryAgentStatusResponse.AgentStatus.NOT_FOUND:
+        setAgentStatus('creatable');
+        break;
+      case QueryAgentStatusResponse.AgentStatus.UNKNOWN:
+        setAgentStatus('getting');
+        break;
+    }
+  };
+
+  useEffect(() => {
+    const stream = client.services.services.EdgeAgentService?.queryAgentStatus();
+    stream?.subscribe(({ status }) => {
+      setLastReceivedStatus(status);
+      handleStatus(status);
+    });
+    return () => {
+      void stream?.close().catch(() => {});
+    };
+  }, []);
+
+  const onAgentCreate = async () => {
+    invariant(identity, 'Identity not found');
+    const service = client.services.services.EdgeAgentService;
+    if (!service) {
+      setAgentStatus('error');
+      setValidationMessage('Agent service not initialized.');
+      return;
+    }
+    if (!agentHostingEnabled) {
+      setAgentStatus('error');
+      setValidationMessage('Edge agents are disabled in config.');
+      return;
+    }
+    setAgentStatus('creating');
+    setValidationMessage('');
+    try {
+      await service.createAgent();
+      setAgentStatus('created');
+    } catch (err: any) {
+      setAgentStatus('error');
+      setValidationMessage(`Error creating an agent: ${err.message}`);
+    }
+  };
+
+  const onAgentDestroy = async () => {
+    setValidationMessage('Agents are non-destructible.');
+  };
+
+  const onAgentRefresh = async () => {
+    setValidationMessage('');
+    handleStatus(lastReceivedStatus);
+  };
+
+  return {
+    onAgentCreate,
+    onAgentDestroy,
+    onAgentRefresh,
+    validationMessage,
+    agentStatus,
+    agentHostingEnabled,
+  };
+};

package/src/panels/IdentityPanel/useKubeAgentHandlers.ts

@@ -0,0 +1,128 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useCallback, useEffect, useState } from 'react';
+
+import { type CancellableInvitation } from '@dxos/client-protocol';
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+import { useClient, useAgentHostingClient } from '@dxos/react-client';
+import { type Identity } from '@dxos/react-client/halo';
+import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
+
+import { type AgentFormProps } from '../../components';
+
+export const useKubeAgentHandlers = ({
+  invitations,
+  identity,
+}: {
+  invitations: CancellableInvitation[];
+  identity: Identity | null;
+}): AgentFormProps => {
+  const [validationMessage, setValidationMessage] = useState('');
+  const [agentStatus, setAgentStatus] = useState<AgentFormProps['agentStatus']>('getting');
+  const agentHostingProviderClient = useAgentHostingClient();
+  const client = useClient();
+
+  const updateAgentStatus = async () => {
+    // TODO(nf): if agent exists, subscribe to updates instead of oneshot status
+    if (agentHostingProviderClient) {
+      setAgentStatus('getting');
+      try {
+        const agentId = await agentHostingProviderClient?.getAgent(identity?.identityKey.truncate() ?? 'never');
+        if (agentId) {
+          setAgentStatus('created');
+        } else {
+          setAgentStatus('creatable');
+        }
+      } catch (err: any) {
+        setAgentStatus('error');
+        setValidationMessage(`Couldn’t check agent status: ${err.message}`);
+      }
+    } else {
+      setAgentStatus('error');
+      setValidationMessage('No agent provider configured.');
+    }
+  };
+
+  const createAgent = async (invitationCode: string) => {
+    invariant(identity, 'Identity not found');
+    if (agentHostingProviderClient) {
+      setAgentStatus('creating');
+      setValidationMessage('');
+      try {
+        const agentId = await agentHostingProviderClient?.createAgent(invitationCode, identity.identityKey.truncate());
+        if (agentId) {
+          setAgentStatus('created');
+        } else {
+          setAgentStatus('creatable');
+          setValidationMessage('Error creating agent.');
+        }
+      } catch (err: any) {
+        setValidationMessage(`Error creating agent: ${err.message}`);
+        return updateAgentStatus();
+      }
+    } else {
+      setAgentStatus('error');
+      setValidationMessage('No agent provider configured.');
+    }
+  };
+
+  const destroyAgent = async () => {
+    invariant(identity, 'Identity not found');
+    if (agentHostingProviderClient) {
+      setAgentStatus('destroying');
+      setValidationMessage('');
+      try {
+        await agentHostingProviderClient?.destroyAgent(identity.identityKey.truncate());
+        setAgentStatus('creatable');
+      } catch (err: any) {
+        setValidationMessage(`Error destroying agent: ${err.message}`);
+        return updateAgentStatus();
+      }
+    } else {
+      setAgentStatus('error');
+      setValidationMessage('No agent provider configured.');
+    }
+  };
+
+  useEffect(() => {
+    void updateAgentStatus();
+  }, []);
+
+  const handleAgentCreate = useCallback(async (invitation: Invitation) => {
+    const invitationCode = InvitationEncoder.encode(invitation);
+    if (invitation.state === Invitation.State.CONNECTING) {
+      log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+      return createAgent(invitationCode);
+    }
+  }, []);
+
+  const onAgentCreate = async () => {
+    invitations.forEach((invitation) => invitation.cancel());
+
+    // TODO(nf): do this work in the hosting provider client?
+    const invitation = client.halo.share({
+      type: Invitation.Type.INTERACTIVE,
+      authMethod: Invitation.AuthMethod.NONE,
+      multiUse: true,
+    });
+
+    invitation.subscribe(handleAgentCreate);
+  };
+
+  const onAgentRefresh = async () => {
+    setValidationMessage('');
+    await updateAgentStatus();
+  };
+
+  return {
+    onAgentCreate,
+    onAgentDestroy: destroyAgent,
+    onAgentRefresh,
+    validationMessage,
+    agentStatus,
+    agentHostingEnabled: !!agentHostingProviderClient,
+  };
+};

package/src/panels/JoinPanel/JoinPanel.stories.tsx

@@ -13,6 +13,7 @@ import { type JoinPanelImplProps } from './JoinPanelProps';
 import { IdentityInputImpl } from './steps';
 import { StorybookDialog } from '../../components/StorybookDialog';
 import { ConfirmResetImpl } from '../../steps';
+import { osTranslations as translations } from '../../translations';
 
 const noOpProps: JoinPanelImplProps = {
   titleId: 'storybookJoinPanel__title',
@@ -29,10 +30,10 @@ const JoinDialog = (args: Partial<JoinPanelImplProps>) => (
 );
 
 export default {
-  title: 'react-shell/JoinPanel',
+  title: 'sdk/react-shell/JoinPanel',
   component: JoinDialog,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
+  parameters: { translations, chromatic: { disableSnapshot: false } },
 };
 
 export const AdditionMethodChooser = () => <JoinDialog mode='halo-only' activeView='addition method chooser' />;

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -7,7 +7,7 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { log } from '@dxos/log';
 import { useClient, useMulticastObservable } from '@dxos/react-client';
 import { useIdentity } from '@dxos/react-client/halo';
-import { DensityProvider, useId, useThemeContext } from '@dxos/react-ui';
+import { useId, useThemeContext } from '@dxos/react-ui';
 
 import { JoinHeading } from './JoinHeading';
 import { type JoinPanelImplProps, type JoinPanelProps } from './JoinPanelProps';
@@ -16,7 +16,6 @@ import {
   AdditionMethodChooser,
   IdentityAdded,
   IdentityInput,
-  InvitationAccepted,
   InvitationAuthenticator,
   InvitationInput,
   InvitationRescuer,
@@ -35,11 +34,12 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
     unredeemedCodes,
     invitationIds,
     invitationStates,
+    invitationAuthMethods,
     succeededKeys,
     failReasons,
     onExit,
     onHaloDone,
-    onSpaceDone,
+    // onSpaceDone,
     exitActionParent,
     doneActionParent,
     onHaloInvitationCancel,
@@ -52,7 +52,7 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
     ConfirmReset: ConfirmResetComponent = ConfirmReset,
   } = props;
   return (
-    <DensityProvider density='fine'>
+    <>
       {mode !== 'halo-only' && <JoinHeading {...{ titleId, mode, onExit, exitActionParent }} />}
       <Viewport.Root focusManaged activeView={activeView}>
         <Viewport.Views>
@@ -105,13 +105,14 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
               send={send}
               Kind='Halo'
               invitationId={invitationIds?.Halo}
+              authMethod={invitationAuthMethods?.Halo}
               active={activeView === 'halo invitation authenticator'}
               onInvitationCancel={onHaloInvitationCancel}
               onInvitationAuthenticate={onHaloInvitationAuthenticate}
               {...(failed.has('Halo') && { failed: true })}
             />
           </Viewport.View>
-          <Viewport.View classNames={stepStyles} id='halo invitation accepted'>
+          {/* <Viewport.View classNames={stepStyles} id='halo invitation accepted'>
             <InvitationAccepted
               {...{
                 send,
@@ -121,7 +122,7 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
                 onDone: onHaloDone,
               }}
             />
-          </Viewport.View>
+          </Viewport.View> */}
           <Viewport.View classNames={stepStyles} id='identity added'>
             <IdentityAdded
               {...{ send, mode, active: activeView === 'identity added', doneActionParent, onDone: onHaloDone }}
@@ -153,13 +154,14 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
               send={send}
               Kind='Space'
               invitationId={invitationIds?.Space}
+              authMethod={invitationAuthMethods?.Space}
               active={activeView === 'space invitation authenticator'}
               onInvitationCancel={onSpaceInvitationCancel}
               onInvitationAuthenticate={onSpaceInvitationAuthenticate}
               {...(failed.has('Space') && { failed: true })}
             />
           </Viewport.View>
-          <Viewport.View classNames={stepStyles} id='space invitation accepted'>
+          {/* <Viewport.View classNames={stepStyles} id='space invitation accepted'>
             <InvitationAccepted
               {...{
                 send,
@@ -169,10 +171,10 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
                 onDone: onSpaceDone,
               }}
             />
-          </Viewport.View>
+          </Viewport.View> */}
         </Viewport.Views>
       </Viewport.Root>
-    </DensityProvider>
+    </>
   );
 };
 
@@ -315,6 +317,17 @@ export const JoinPanel = ({
     }
   }, [joinState]);
 
+  useEffect(() => {
+    switch (activeView) {
+      case 'halo invitation accepted':
+        onHaloDone();
+        break;
+      case 'space invitation accepted':
+        onSpaceDone();
+        break;
+    }
+  }, [activeView]);
+
   const failed = useMemo(() => {
     const result: JoinPanelImplProps['failed'] = new Set();
     switch (true) {
@@ -363,6 +376,14 @@ export const JoinPanel = ({
     [joinState],
   );
 
+  const invitationAuthMethods = useMemo(
+    () => ({
+      Halo: joinState.context.halo.invitationObservable?.get().authMethod,
+      Space: joinState.context.space.invitationObservable?.get().authMethod,
+    }),
+    [joinState],
+  );
+
   const invitationIds = useMemo(
     () => ({
       Halo: joinState.context.halo.invitationObservable?.get().invitationId,
@@ -418,6 +439,7 @@ export const JoinPanel = ({
         unredeemedCodes,
         invitationIds,
         invitationStates,
+        invitationAuthMethods,
         succeededKeys,
         identity,
         onExit,