@dxos/react-client 0.6.10 → 0.6.11-staging.32b42e4

package/src/echo/useSpaces.test.tsx

@@ -4,37 +4,23 @@
 
 import { act, renderHook } from '@testing-library/react';
 import { expect } from 'chai';
-import React from 'react';
 
-import { Client, fromHost } from '@dxos/client';
 import { describe, test } from '@dxos/test';
 
 import { useSpace, useSpaces } from './useSpaces';
-import { ClientContext } from '../client';
+import { createClient, createContextProvider } from '../testing/util';
 
 describe('useSpaces', () => {
   test('lists existing spaces', async () => {
-    const client = new Client({ services: fromHost() });
-    await client.initialize();
-    await client.halo.createIdentity();
-    await client.spaces.isReady.wait();
-    // TODO(wittjosiah): Factor out.
-    const wrapper = ({ children }: any) => (
-      <ClientContext.Provider value={{ client }}>{children}</ClientContext.Provider>
-    );
+    const { client } = await createClient({ createIdentity: true });
+    const wrapper = await createContextProvider(client);
     const { result } = renderHook(() => useSpaces(), { wrapper });
     expect(result.current.length).to.eq(1);
   });
 
   test('updates when new spaces are created', async () => {
-    const client = new Client({ services: fromHost() });
-    await client.initialize();
-    await client.halo.createIdentity();
-    await client.spaces.isReady.wait();
-    // TODO(wittjosiah): Factor out.
-    const wrapper = ({ children }: any) => (
-      <ClientContext.Provider value={{ client }}>{children}</ClientContext.Provider>
-    );
+    const { client } = await createClient({ createIdentity: true });
+    const wrapper = await createContextProvider(client);
     const { result, rerender } = renderHook(() => useSpaces(), { wrapper });
     expect(result.current.length).to.eq(1);
     await act(async () => {
@@ -47,12 +33,8 @@ describe('useSpaces', () => {
 
 describe('useSpace', () => {
   test('gets default space', async () => {
-    const client = new Client({ services: fromHost() });
-    await client.initialize();
-    // TODO(wittjosiah): Factor out.
-    const wrapper = ({ children }: any) => (
-      <ClientContext.Provider value={{ client }}>{children}</ClientContext.Provider>
-    );
+    const { client } = await createClient();
+    const wrapper = await createContextProvider(client);
     const { result, rerender } = renderHook(() => useSpace(), { wrapper });
     expect(result.current).to.be.undefined;
     await act(async () => {
@@ -64,15 +46,9 @@ describe('useSpace', () => {
   });
 
   test('gets space by key', async () => {
-    const client = new Client({ services: fromHost() });
-    await client.initialize();
-    await client.halo.createIdentity();
-    const space = await client.spaces.create();
-    // TODO(wittjosiah): Factor out.
-    const wrapper = ({ children }: any) => (
-      <ClientContext.Provider value={{ client }}>{children}</ClientContext.Provider>
-    );
-    const { result } = renderHook(() => useSpace(space.key), { wrapper });
+    const { client, space } = await createClient({ createIdentity: true, createSpace: true });
+    const wrapper = await createContextProvider(client);
+    const { result } = renderHook(() => useSpace(space!.key), { wrapper });
     expect(result.current).to.not.be.undefined;
   });
 });

package/src/echo/useSpaces.ts

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 
 import { type PublicKeyLike } from '@dxos/client';
 import { type Space, SpaceState } from '@dxos/client/echo';
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 

package/src/halo/useContacts.ts

@@ -3,7 +3,7 @@
 //
 
 import type { Contact } from '@dxos/client/halo';
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 

package/src/halo/useDevices.test.tsx

@@ -4,23 +4,16 @@
 
 import { renderHook } from '@testing-library/react';
 import { expect } from 'chai';
-import React from 'react';
 
-import { Client, fromHost } from '@dxos/client';
 import { describe, test } from '@dxos/test';
 
 import { useDevices } from './useDevices';
-import { ClientContext } from '../client';
+import { createClient, createContextProvider } from '../testing/util';
 
 describe('useDevices', () => {
   test('lists existing devices', async () => {
-    const client = new Client({ services: fromHost() });
-    await client.initialize();
-    await client.halo.createIdentity();
-    // TODO(wittjosiah): Factor out.
-    const wrapper = ({ children }: any) => (
-      <ClientContext.Provider value={{ client }}>{children}</ClientContext.Provider>
-    );
+    const { client } = await createClient({ createIdentity: true });
+    const wrapper = await createContextProvider(client);
     const { result } = renderHook(() => useDevices(), { wrapper });
     expect(result.current?.length).to.eq(1);
   });

package/src/halo/useDevices.ts

@@ -3,7 +3,7 @@
 //
 
 import type { Device } from '@dxos/client/halo';
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 

package/src/halo/useHaloInvitations.ts

@@ -4,7 +4,7 @@
 
 import { useMemo } from 'react';
 
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 import { useInvitationStatus, type CancellableInvitationObservable } from '../invitations';

package/src/halo/useIdentity.ts

@@ -3,7 +3,7 @@
 //
 
 import { type Identity } from '@dxos/client/halo';
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 

package/src/index.ts

@@ -3,6 +3,6 @@
 //
 
 export * from '@dxos/client';
-export { useMulticastObservable } from '@dxos/react-async';
+export { useMulticastObservable } from '@dxos/react-hooks';
 
 export * from './client';

package/src/mesh/useNetworkStatus.ts

@@ -3,7 +3,7 @@
 //
 
 import { type NetworkStatus } from '@dxos/client/mesh';
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 

package/src/testing/ClientRepeater.stories.tsx

@@ -0,0 +1,58 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React from 'react';
+
+import { Input } from '@dxos/react-ui';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { ClientRepeater, type ClientRepeatedComponentProps } from './ClientRepeater';
+import { useClient } from '../client';
+import { useSpace } from '../echo';
+
+export default {
+  title: 'react-client/ClientRepeater',
+  decorators: [withTheme],
+};
+
+const JsonPanel = ({ value }: { value: any }) => (
+  <SyntaxHighlighter language='json'>{JSON.stringify(value, undefined, 2)}</SyntaxHighlighter>
+);
+
+const ClientStory = () => {
+  const client = useClient();
+  return <JsonPanel value={client.toJSON()} />;
+};
+
+const ClientSpace = ({ spaceKey }: ClientRepeatedComponentProps) => {
+  const client = useClient();
+  const space = useSpace(spaceKey);
+  if (!space?.isOpen) {
+    return null;
+  }
+
+  return (
+    <div className='flex flex-col'>
+      <Input.Root>
+        <Input.TextInput
+          placeholder='Name'
+          value={space.properties.name}
+          onChange={(event) => (space.properties.name = event.target.value)}
+        />
+      </Input.Root>
+      <JsonPanel value={client.toJSON()} />
+    </div>
+  );
+};
+
+export const Default = {
+  render: () => <ClientRepeater component={ClientStory} count={2} />,
+};
+
+export const Space = {
+  render: () => <ClientRepeater component={ClientSpace} count={2} createSpace />,
+};

package/src/testing/ClientRepeater.tsx

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-import React, { useState, type FC, useEffect } from 'react';
+import React, { useState, type FC, useEffect, useRef } from 'react';
 
 import { Client, type PublicKey } from '@dxos/client';
 import { type Space } from '@dxos/client/echo';
@@ -12,15 +12,13 @@ import { registerSignalFactory } from '@dxos/echo-signals/react';
 import { faker } from '@dxos/random';
 import { type MaybePromise } from '@dxos/util';
 
-import { ClientContext } from '../client';
+import { ClientProvider } from '../client';
 
-const testBuilder = new TestBuilder();
+export type ClientRepeatedComponentProps = { id: number; count: number; spaceKey?: PublicKey };
 
-export type RepeatedComponentProps = { id: number; count: number };
-
-export type ClientRepeaterProps<P extends RepeatedComponentProps> = {
-  component: FC<any>;
+export type ClientRepeaterProps<P extends ClientRepeatedComponentProps> = {
   className?: string;
+  component: FC<ClientRepeatedComponentProps>;
   controls?: FC<{ clients: Client[] }>;
   clients?: Client[];
   count?: number;
@@ -36,12 +34,12 @@ export type ClientRepeaterProps<P extends RepeatedComponentProps> = {
  * Utility component for Storybook stories which sets up clients for n peers.
  * The `Component` property is rendered n times, once for each peer.
  */
+// TODO(burdon): To discuss: evolve ClientRepeater with optional decorator that uses it.
 // NOTE: This is specifically not a storybook decorator because it broke stories as a decorator.
 //   This seems primarily due to the fact that it required top-level await for the clients to initialize.
 //   Storybook seemed to handle it alright, but Chromatic had a lot of trouble with it.
 //   There was also a question of whether or not calling the story function multiple times was a good idea.
-// TODO(wittjosiah): Rename.
-export const ClientRepeater = <P extends RepeatedComponentProps>(props: ClientRepeaterProps<P>) => {
+export const ClientRepeater = <P extends ClientRepeatedComponentProps>(props: ClientRepeaterProps<P>) => {
   const {
     component: Component,
     controls: Controls,
@@ -58,9 +56,12 @@ export const ClientRepeater = <P extends RepeatedComponentProps>(props: ClientRe
   const [clients, setClients] = useState(props.clients ?? []);
   const [spaceKey, setSpaceKey] = useState<PublicKey>();
 
+  const testBuilder = useRef(new TestBuilder());
   useEffect(() => {
     const timeout = setTimeout(async () => {
-      const clients = [...Array(count)].map((_) => new Client({ services: testBuilder.createLocalClientServices() }));
+      const clients = [...Array(count)].map(
+        (_) => new Client({ services: testBuilder.current.createLocalClientServices() }),
+      );
       await Promise.all(clients.map((client) => client.initialize()));
       types && clients.map((client) => client.addTypes(types));
 
@@ -91,9 +92,9 @@ export const ClientRepeater = <P extends RepeatedComponentProps>(props: ClientRe
     <>
       {Controls && <Controls clients={clients} />}
       {clients.map((client, index) => (
-        <ClientContext.Provider key={index} value={{ client }}>
-          <Component id={index} count={clients.length} {...{ ...props.args, spaceKey }} />
-        </ClientContext.Provider>
+        <ClientProvider key={index} client={client}>
+          <Component id={index} count={clients.length} spaceKey={spaceKey} {...{ ...props.args }} />
+        </ClientProvider>
       ))}
     </>
   );

package/src/testing/index.ts

@@ -5,3 +5,4 @@
 export * from '@dxos/client/testing';
 
 export * from './ClientRepeater';
+export * from './withClientProvider';

package/src/testing/util.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { Client, fromHost } from '@dxos/client';
+import { type Space } from '@dxos/client/echo';
+
+import { ClientContext } from '../client';
+
+export const createClient = async ({
+  createIdentity,
+  createSpace,
+}: { createIdentity?: boolean; createSpace?: boolean } = {}) => {
+  const client = new Client({ services: fromHost() });
+  await client.initialize();
+  if (createIdentity) {
+    await client.halo.createIdentity();
+  }
+
+  let space: Space | undefined;
+  if (createSpace) {
+    space = await client.spaces.create();
+    await client.spaces.isReady.wait();
+  }
+
+  return { client, space };
+};
+
+// TODO(burdon): Change to ClientProvider.
+export const createContextProvider = async (client: Client) => {
+  return ({ children }: any) => <ClientContext.Provider value={{ client }}>{children}</ClientContext.Provider>;
+};

package/src/testing/withClientProvider.stories.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React from 'react';
+
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { withClientProvider, withMultiClientProvider } from './withClientProvider';
+import { useClient } from '../client';
+import { type Space, useSpaces } from '../echo';
+
+const SpaceInfo = ({ space }: { space: Space }) => {
+  const name = space.isOpen ? space.properties.name : '';
+  return <SyntaxHighlighter language='json'>{JSON.stringify({ id: space.id, name }, null, 2)}</SyntaxHighlighter>;
+};
+
+const Test = () => {
+  const client = useClient();
+  const spaces = useSpaces();
+  if (!client) {
+    return null;
+  }
+
+  return (
+    <div className='flex flex-col min-w-[28rem] divide-y divide-separator border border-separator rounded'>
+      <SyntaxHighlighter language='json'>{JSON.stringify(client.toJSON(), null, 2)}</SyntaxHighlighter>
+      {spaces.map((space) => (
+        <SpaceInfo key={space.id} space={space} />
+      ))}
+    </div>
+  );
+};
+
+export default {
+  title: 'react-client/withClientProvider',
+  component: Test,
+  decorators: [withTheme, withClientProvider({ createIdentity: true })],
+};
+
+export const Default = {};
+
+export const Multiple = {
+  decorators: [
+    withMultiClientProvider({
+      numClients: 3,
+      createIdentity: true,
+      createSpace: true,
+    }),
+    withLayout({ classNames: ['flex gap-2'] }),
+    withTheme,
+  ],
+};

package/src/testing/withClientProvider.tsx

@@ -0,0 +1,142 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { useRef } from 'react';
+import { type FallbackProps, ErrorBoundary } from 'react-error-boundary';
+
+import { Trigger } from '@dxos/async';
+import { type Client } from '@dxos/client';
+import { type Space } from '@dxos/client/echo';
+import { performInvitation, TestBuilder } from '@dxos/client/testing';
+import { type MaybePromise } from '@dxos/util';
+
+import { ClientProvider, type ClientProviderProps } from '../client';
+
+type InitializeProps = {
+  createIdentity?: boolean;
+  createSpace?: boolean;
+  onSpaceCreated?: (client: Client, space: Space) => MaybePromise<void>;
+};
+
+/**
+ * Initialize client, identity and first space.
+ */
+const initializeClient = async (
+  client: Client,
+  {
+    createIdentity,
+    createSpace,
+    onSpaceCreated,
+    onInitialized,
+  }: InitializeProps & Pick<WithClientProviderProps, 'onInitialized'>,
+): Promise<Space | undefined> => {
+  if (createIdentity) {
+    await client.halo.createIdentity();
+  }
+
+  let space: Space | undefined;
+  if (createSpace) {
+    space = await client.spaces.create({ name: 'Test Space' });
+    await onSpaceCreated?.(client, space);
+  }
+
+  await onInitialized?.(client);
+  return space;
+};
+
+export type WithClientProviderProps = InitializeProps & ClientProviderProps;
+
+/**
+ * Decorator that provides the client context.
+ */
+export const withClientProvider = ({
+  createIdentity,
+  createSpace,
+  onSpaceCreated,
+  onInitialized,
+  ...props
+}: WithClientProviderProps = {}): Decorator => {
+  const handleInitialized = async (client: Client) => {
+    await initializeClient(client, { createIdentity, createSpace, onSpaceCreated, onInitialized });
+  };
+
+  return (Story) => (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <ClientProvider onInitialized={handleInitialized} {...props}>
+        <Story />
+      </ClientProvider>
+    </ErrorBoundary>
+  );
+};
+
+// TODO(burdon): Implement context per client for context.
+// TODO(burdon): Callback once all invitations have completed.
+// TODO(burdon): Delay/jitter for creation of other clients.
+export type WithMultiClientProviderProps = InitializeProps & ClientProviderProps & { numClients?: number };
+
+/**
+ * Decorator that creates a scaffold for multiple clients.
+ * Orchestrates invitations between a randomly selected host and the remaining clients.
+ * NOTE: Should come before withLayout.
+ */
+export const withMultiClientProvider = ({
+  numClients = 2,
+  createIdentity,
+  createSpace,
+  onSpaceCreated,
+  onInitialized,
+  ...props
+}: WithMultiClientProviderProps): Decorator => {
+  return (Story) => {
+    const builder = useRef(new TestBuilder());
+    const hostRef = useRef<Client>();
+    const spaceReady = useRef(new Trigger<Space | undefined>());
+
+    // Handle invitations.
+    const handleClientInitialized = async (client: Client) => {
+      if (createSpace) {
+        if (!hostRef.current) {
+          hostRef.current = client;
+          const space = await initializeClient(client, { createIdentity, createSpace, onSpaceCreated, onInitialized });
+          spaceReady.current.wake(space);
+        } else {
+          await initializeClient(client, { createIdentity, onInitialized });
+          const space = await spaceReady.current.wait();
+          if (space) {
+            await Promise.all(performInvitation({ host: space, guest: client.spaces }));
+          }
+        }
+      }
+    };
+
+    return (
+      <>
+        {Array.from({ length: numClients }).map((_, index) => (
+          <ErrorBoundary key={index} FallbackComponent={ErrorFallback}>
+            <ClientProvider
+              services={builder.current.createLocalClientServices()}
+              onInitialized={handleClientInitialized}
+              {...props}
+            >
+              <Story />
+            </ClientProvider>
+          </ErrorBoundary>
+        ))}
+      </>
+    );
+  };
+};
+
+const ErrorFallback = ({ error }: FallbackProps) => {
+  const { name, message, stack } =
+    error instanceof Error ? error : { name: 'Error', message: String(error), stack: undefined };
+  return (
+    <div role='alert' className='flex flex-col gap-4'>
+      <h1 className='text-xl text-red-500'>{name}</h1>
+      <div className='text-lg'>{message}</div>
+      {stack && <pre className='text-sm text-subdued'>{stack}</pre>}
+    </div>
+  );
+};

package/tsconfig.json

@@ -35,9 +35,6 @@
     {
       "path": "../../common/random"
     },
-    {
-      "path": "../../common/react-async"
-    },
     {
       "path": "../../common/util"
     },
@@ -47,9 +44,18 @@
     {
       "path": "../../core/echo/echo-signals"
     },
+    {
+      "path": "../../core/protocols"
+    },
+    {
+      "path": "../../ui/primitives/react-hooks"
+    },
     {
       "path": "../../ui/react-ui"
     },
+    {
+      "path": "../../ui/react-ui-syntax-highlighter"
+    },
     {
       "path": "../../ui/react-ui-theme"
     },

package/dist/lib/browser/chunk-NLQLAARM.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/client/AgentHostingProvider.tsx", "../../../src/client/ClientContext.tsx", "../../../src/banner.ts", "../../../src/client/useClientServices.ts", "../../../src/client/useConfig.ts", "../../../src/client/useShell.ts", "../../../src/client/useStatus.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { createContext, type PropsWithChildren, useContext, useState } from 'react';\n\nimport { type AgentHostingProviderClient, AgentManagerClient, FakeAgentHostingProvider } from '@dxos/client';\nimport { type Halo } from '@dxos/client/halo';\nimport { type Config } from '@dxos/config';\nimport { log } from '@dxos/log';\n\nimport { useClient } from '../client';\n\n/*\n * Interface for invoking the agent hosting provider client.\n * @experimental\n */\n\nexport type AgentHostingProviderProps = { config: Config; halo: Halo };\n\nexport const AgentHostingContext = createContext<AgentHostingProviderClient | null>(null);\n\nexport const AgentHostingProvider = (props: PropsWithChildren<{}>) => {\n  const client = useClient();\n  const [agentHostingProviderClient] = useState(makeClient(client));\n  return (\n    <AgentHostingContext.Provider value={agentHostingProviderClient}> {props.children}</AgentHostingContext.Provider>\n  );\n};\n\nexport const useAgentHostingClient = () => {\n  return useContext(AgentHostingContext);\n};\n\nconst makeClient = ({ config, halo }: AgentHostingProviderProps) => {\n  const agentHostingConfig = config.get('runtime.services.agentHosting');\n  if (!agentHostingConfig) {\n    log('no agent hosting configured');\n    return null;\n  }\n\n  // TODO(nf): Dynamically discover based on runtime config.\n  let agentHostingProviderClient: AgentHostingProviderClient | null = null;\n  switch (agentHostingConfig.type) {\n    case 'LOCAL_TESTING': {\n      log('using FakeAgentHostingProvider');\n      return new FakeAgentHostingProvider();\n    }\n\n    case 'AGENTHOSTING_API': {\n      agentHostingProviderClient = new AgentManagerClient(config, halo);\n      if (agentHostingProviderClient.init()) {\n        return agentHostingProviderClient;\n      } else {\n        // Not authorized or error initializing\n        return null;\n      }\n    }\n\n    default: {\n      log.error('Unknown agent hosting provider type: ' + agentHostingConfig.type);\n      return null;\n    }\n  }\n};\n", "//\n// Copyright 2020 DXOS.org\n//\n\nimport React, {\n  type ReactNode,\n  useState,\n  type Context,\n  createContext,\n  useContext,\n  useEffect,\n  type FunctionComponent,\n  useMemo,\n} from 'react';\n\nimport {\n  Client,\n  SystemStatus,\n  type ClientOptions,\n  type ClientServices,\n  type ClientServicesProvider,\n} from '@dxos/client';\nimport { type Config } from '@dxos/config';\nimport { raise } from '@dxos/debug';\nimport { registerSignalFactory } from '@dxos/echo-signals/react';\nimport { log } from '@dxos/log';\nimport { getAsyncValue, type MaybePromise, type Provider } from '@dxos/util'; // TODO(burdon): Deprecate \"util\"?\n\nimport { printBanner } from '../banner';\n\n// TODO(burdon): Reconcile with ClientOptions.\nexport type ClientContextProps = {\n  client: Client;\n\n  // Optionally expose services (e.g., for devtools).\n  // TODO(burdon): Can't this just be accessed via `client.services`?\n  services?: ClientServices;\n\n  status?: SystemStatus | null;\n};\n\nexport const ClientContext: Context<ClientContextProps | undefined> = createContext<ClientContextProps | undefined>(\n  undefined,\n);\n\n/**\n * Hook returning instance of DXOS client.\n * Requires ClientContext to be set via ClientProvider.\n */\nexport const useClient = () => {\n  const { client } = useContext(ClientContext) ?? raise(new Error('Missing ClientContext.'));\n  return client;\n};\n\n/**\n * Properties for the ClientProvider.\n */\nexport type ClientProviderProps = Omit<ClientOptions, 'config' | 'services'> & {\n  children?: ReactNode;\n\n  /**\n   * Config object or async provider.\n   */\n  config?: Config | Provider<Promise<Config>>;\n\n  /**\n   * Callback to enable the caller to create a custom ClientServicesProvider.\n   *\n   * Most apps won't need this.\n   */\n  services?: (config?: Config) => MaybePromise<ClientServicesProvider>;\n\n  /**\n   * Client object or async provider to enable to caller to do custom initialization.\n   *\n   * Most apps won't need this.\n   */\n  // TODO(wittjosiah): Remove async and just use to keeping reference to client?\n  //   (Prefering `onInitialized` for custom initialization.)\n  client?: Client | Provider<Promise<Client>>;\n\n  /**\n   * ReactNode to display until the client is available.\n   */\n  // TODO(wittjosiah): Rename to `placeholder`.\n  fallback?: FunctionComponent<Partial<ClientContextProps>>;\n\n  /**\n   * Set to false to stop default signal factory from being registered.\n   */\n  registerSignalFactory?: boolean;\n\n  /**\n   * Post initialization hook to enable to caller to do custom initialization.\n   *\n   * @param Client\n   */\n  onInitialized?: (client: Client) => MaybePromise<void>;\n};\n\n/**\n * Root component that provides the DXOS client instance to child components.\n * To be used with the `useClient` hook.\n */\nexport const ClientProvider = ({\n  children,\n  config: configProvider,\n  services: createServices,\n  client: clientProvider,\n  fallback: Fallback = () => null,\n  registerSignalFactory: register = true,\n  onInitialized,\n  ...options\n}: ClientProviderProps) => {\n  useMemo(() => {\n    // TODO(wittjosiah): Ideally this should be imported asynchronosly because it is optional.\n    //   Unfortunately, async import seemed to break signals React instrumentation.\n    register && registerSignalFactory();\n  }, []);\n\n  const [client, setClient] = useState(clientProvider instanceof Client ? clientProvider : undefined);\n  const [status, setStatus] = useState<SystemStatus | null>(null);\n  const [error, setError] = useState();\n  if (error) {\n    throw error;\n  }\n\n  useEffect(() => {\n    if (!client) {\n      return;\n    }\n\n    const subscription = client.status.subscribe((status) => setStatus(status));\n    return () => subscription.unsubscribe();\n  }, [client, setStatus]);\n\n  useEffect(() => {\n    const done = async (client: Client) => {\n      await client.initialize().catch(setError);\n      log('client ready');\n      await onInitialized?.(client);\n      log('initialization complete');\n      setClient(client);\n      setStatus(client.status.get() ?? SystemStatus.ACTIVE);\n      printBanner(client);\n    };\n\n    const timeout = setTimeout(async () => {\n      if (clientProvider) {\n        // Asynchronously request client.\n        const client = await getAsyncValue(clientProvider);\n        await done(client);\n      } else {\n        // Asynchronously construct client (config may be undefined).\n        const config = await getAsyncValue(configProvider);\n        log('resolved config', { config });\n        const services = await createServices?.(config);\n        log('created services', { services });\n        const client = new Client({ config, services, ...options });\n        log('created client');\n        await done(client);\n      }\n    });\n\n    return () => {\n      log('clean up');\n      clearTimeout(timeout);\n      void client?.destroy().catch((err) => log.catch(err));\n    };\n  }, [clientProvider, configProvider, createServices]);\n\n  if (!client || status !== SystemStatus.ACTIVE) {\n    return <Fallback client={client} status={status} />;\n  }\n\n  // prettier-ignore\n  return (\n    <ClientContext.Provider value={{ client, status }}>\n      {children}\n    </ClientContext.Provider>\n  );\n};\n", "//\n// Copyright 2021 DXOS.org\n//\n\nimport { type Client } from '@dxos/client';\n\n// http://patorjk.com/software/taag/#p=testall&f=Patorjk-HeX&t=DXOS\nconst BANNER = (client: Client) => {\n  const commitHash = client.config.get('runtime.app.build.commitHash');\n  const hash = commitHash ? ` App Commit ${commitHash} \\n` : '';\n\n  return (\n    '\\n' +\n    '_/\\\\/\\\\/\\\\/\\\\/\\\\____/\\\\/\\\\____/\\\\/\\\\____/\\\\/\\\\/\\\\/\\\\______/\\\\/\\\\/\\\\/\\\\/\\\\_\\n' +\n    '_/\\\\/\\\\____/\\\\/\\\\____/\\\\/\\\\/\\\\/\\\\____/\\\\/\\\\____/\\\\/\\\\__/\\\\/\\\\_________\\n' +\n    '_/\\\\/\\\\____/\\\\/\\\\______/\\\\/\\\\______/\\\\/\\\\____/\\\\/\\\\____/\\\\/\\\\/\\\\/\\\\___\\n' +\n    '_/\\\\/\\\\____/\\\\/\\\\____/\\\\/\\\\/\\\\/\\\\____/\\\\/\\\\____/\\\\/\\\\__________/\\\\/\\\\_\\n' +\n    '_/\\\\/\\\\/\\\\/\\\\/\\\\____/\\\\/\\\\____/\\\\/\\\\____/\\\\/\\\\/\\\\/\\\\____/\\\\/\\\\/\\\\/\\\\/\\\\___\\n' +\n    `\\n DXOS Client ${client.version} \\n${hash}`\n  );\n};\n\nlet bannerPrinted = false;\n\nexport const printBanner = (client: Client) => {\n  if (bannerPrinted) {\n    return;\n  }\n\n  bannerPrinted = true;\n  // eslint-disable-next-line no-console\n  console.log(`%c${BANNER(client)}`, 'font-family: monospace;');\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport { useContext } from 'react';\n\nimport type { ClientServices } from '@dxos/client';\nimport { raise } from '@dxos/debug';\n\nimport { ClientContext } from './ClientContext';\n\nexport const useClientServices = (): ClientServices | undefined => {\n  const { services } = useContext(ClientContext) ?? raise(new Error('Missing ClientContext.'));\n  return services;\n};\n", "//\n// Copyright 2020 DXOS.org\n//\n\nimport { useContext } from 'react';\n\nimport { raise } from '@dxos/debug';\n\nimport { ClientContext } from './ClientContext';\n\n/**\n * Hook returning config object used to initialize the DXOS client instance.\n * Requires ClientContext to be set via ClientProvider.\n */\nexport const useConfig = () => {\n  const { client } = useContext(ClientContext) ?? raise(new Error('Missing ClientContext.'));\n  return client.config;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\nimport { type Shell, type ShellDisplay } from '@dxos/client';\n\nimport { useClient } from './ClientContext';\n\n/**\n * Helper hook to access the shell.\n */\nexport const useShell = (): Shell => {\n  const client = useClient();\n  return client.shell;\n};\n\n/**\n * Hook to access the shell’s display state.\n */\nexport const useShellDisplay = (): ShellDisplay => {\n  const client = useClient();\n  const [display, setDisplay] = useState(client.shell.display);\n  useEffect(() => client.shell.onDisplayChange(setDisplay), [client]);\n  return display;\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport { useContext } from 'react';\n\nimport { type SystemStatus } from '@dxos/client';\nimport { raise } from '@dxos/debug';\n\nimport { ClientContext } from './ClientContext';\n\nexport const useStatus = (): SystemStatus | null | undefined => {\n  const { status } = useContext(ClientContext) ?? raise(new Error('Missing ClientContext.'));\n  return status;\n};\n"],
-  "mappings": "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",
-  "names": ["React", "createContext", "useContext", "useState", "AgentManagerClient", "FakeAgentHostingProvider", "log", "React", "useState", "createContext", "useContext", "useEffect", "useMemo", "Client", "SystemStatus", "raise", "registerSignalFactory", "log", "getAsyncValue", "BANNER", "client", "commitHash", "config", "get", "hash", "version", "bannerPrinted", "printBanner", "console", "log", "ClientContext", "createContext", "undefined", "useClient", "client", "useContext", "raise", "Error", "ClientProvider", "children", "config", "configProvider", "services", "createServices", "clientProvider", "fallback", "Fallback", "registerSignalFactory", "register", "onInitialized", "options", "useMemo", "setClient", "useState", "Client", "status", "setStatus", "error", "setError", "useEffect", "subscription", "subscribe", "unsubscribe", "done", "initialize", "catch", "log", "get", "SystemStatus", "ACTIVE", "printBanner", "timeout", "setTimeout", "getAsyncValue", "clearTimeout", "destroy", "err", "Provider", "value", "useContext", "raise", "useClientServices", "services", "useContext", "ClientContext", "raise", "Error", "useContext", "raise", "useConfig", "client", "useContext", "ClientContext", "raise", "Error", "config", "useEffect", "useState", "useShell", "client", "useClient", "shell", "useShellDisplay", "display", "setDisplay", "useState", "useEffect", "onDisplayChange", "useContext", "raise", "useStatus", "status", "useContext", "ClientContext", "raise", "Error", "AgentHostingContext", "createContext", "AgentHostingProvider", "props", "client", "useClient", "agentHostingProviderClient", "useState", "makeClient", "React", "Provider", "value", "children", "useAgentHostingClient", "useContext", "config", "halo", "agentHostingConfig", "get", "log", "type", "FakeAgentHostingProvider", "AgentManagerClient", "init", "error"]
-}