@dxos/plugin-debug 0.8.4-main.3c1ae3b → 0.8.4-main.52d7546f51

package/src/capabilities/app-graph-builder/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));

package/src/capabilities/index.ts

@@ -2,9 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { lazy } from '@dxos/app-framework';
-
-export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
-export const ReactContext = lazy(() => import('./react-context'));
-export const ReactSurface = lazy(() => import('./react-surface'));
-export const DebugSettings = lazy(() => import('./settings'));
+export * from './app-graph-builder';
+export * from './react-context';
+export * from './react-surface';
+export * from './settings';

package/src/capabilities/react-context/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const ReactContext = Capability.lazy('ReactContext', () => import('./react-context'));

package/src/capabilities/react-context/react-context.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { DevtoolsContextProvider } from '@dxos/devtools';
+
+import { meta } from '../../meta';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactContext, {
+      id: meta.id,
+      context: ({ children }) => <DevtoolsContextProvider>{children}</DevtoolsContextProvider>,
+    }),
+  ),
+);

package/src/capabilities/react-surface/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

package/src/capabilities/react-surface/react-surface.tsx

@@ -0,0 +1,411 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React, { useCallback } from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface, useCapability, useOperationInvoker, useSettingsState } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { useLayout } from '@dxos/app-toolkit/ui';
+import {
+  AutomergePanel,
+  ConfigPanel,
+  CredentialsPanel,
+  DeviceListPanel,
+  DiagnosticsPanel,
+  EdgeDashboardPanel,
+  FeedsPanel,
+  IdentityPanel,
+  InvocationTraceContainer,
+  KeyringPanel,
+  LoggingPanel,
+  MembersPanel,
+  MetadataPanel,
+  NetworkPanel,
+  ObjectsPanel,
+  QueuesPanel,
+  SchemaPanel,
+  SignalPanel,
+  SpaceInfoPanel,
+  SpaceListPanel,
+  StoragePanel,
+  SwarmPanel,
+  TestingPanel,
+  TracingPanel,
+  WorkflowPanel,
+} from '@dxos/devtools';
+import { Obj } from '@dxos/echo';
+import { log } from '@dxos/log';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { type Graph } from '@dxos/plugin-graph';
+import { ScriptOperation } from '@dxos/plugin-script/types';
+import { SpaceOperation } from '@dxos/plugin-space/types';
+import { type Space, SpaceState, isSpace, parseId } from '@dxos/react-client/echo';
+import { Layout } from '@dxos/react-ui';
+import { Collection } from '@dxos/schema';
+
+import {
+  DebugGraph,
+  DebugObjectPanel,
+  DebugSettings,
+  DebugStatus,
+  DevtoolsOverviewContainer,
+  SpaceGenerator,
+  Wireframe,
+} from '../../components';
+import { meta } from '../../meta';
+import { DebugCapabilities, type DebugSettingsProps, Devtools } from '../../types';
+
+type SpaceDebug = {
+  type: string;
+  space: Space;
+};
+
+type GraphDebug = {
+  graph: Graph.Graph;
+  root: string;
+};
+
+const isSpaceDebug = (data: any): data is SpaceDebug => data?.type === `${meta.id}/space` && isSpace(data.space);
+const isGraphDebug = (data: any): data is GraphDebug => {
+  const graph = data?.graph;
+  return (
+    graph != null && typeof graph === 'object' && typeof graph.json === 'function' && typeof data?.root === 'string'
+  );
+};
+
+// TODO(wittjosiah): Factor out?
+const useCurrentSpace = () => {
+  const layout = useLayout();
+  const client = useCapability(ClientCapabilities.Client);
+  const { spaceId } = parseId(layout.workspace);
+  const space = spaceId ? client.spaces.get(spaceId) : undefined;
+  return space;
+};
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const capabilities = yield* Capability.Service;
+    const registry = capabilities.get(Capabilities.AtomRegistry);
+    const settingsAtom = capabilities.get(DebugCapabilities.Settings);
+
+    return Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: `${meta.id}/plugin-settings`,
+        role: 'article',
+        filter: (data): data is { subject: AppCapabilities.Settings } =>
+          AppCapabilities.isSettings(data.subject) && data.subject.prefix === meta.id,
+        component: ({ data: { subject } }) => {
+          const { settings, updateSettings } = useSettingsState<DebugSettingsProps>(subject.atom);
+          return <DebugSettings settings={settings} onSettingsChange={updateSettings} />;
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}/space`,
+        role: 'article',
+        filter: (data): data is { subject: SpaceDebug } => isSpaceDebug(data.subject),
+        component: ({ role, data }) => {
+          const { invokePromise } = useOperationInvoker();
+
+          const handleCreateObject = useCallback(
+            (objects: Obj.Unknown[]) => {
+              if (!isSpace(data.subject.space)) {
+                return;
+              }
+
+              const collection =
+                data.subject.space.state.get() === SpaceState.SPACE_READY &&
+                data.subject.space.properties[Collection.Collection.typename]?.target;
+              if (!Obj.instanceOf(Collection.Collection, collection)) {
+                return;
+              }
+
+              objects.forEach((object) => {
+                void invokePromise(SpaceOperation.AddObject, {
+                  target: collection,
+                  object,
+                });
+              });
+            },
+            [data.subject.space, invokePromise],
+          );
+
+          return (
+            <Layout.Main role={role}>
+              <SpaceGenerator space={data.subject.space} onCreateObjects={handleCreateObject} />
+            </Layout.Main>
+          );
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}/app-graph`,
+        role: 'article',
+        filter: (data): data is { subject: GraphDebug } => isGraphDebug(data.subject),
+        component: ({ data }) => <DebugGraph graph={data.subject.graph} root={data.subject.root} />,
+      }),
+      Surface.create({
+        id: `${meta.id}/wireframe`,
+        role: ['article', 'section'],
+        position: 'hoist',
+        filter: (data): data is { subject: Obj.Unknown } => {
+          const settings = registry.get(settingsAtom);
+          return Obj.isObject(data.subject) && !!settings.wireframe;
+        },
+        component: ({ data, role }) => (
+          <Wireframe label={`${role}:${name}`} object={data.subject} classNames='row-span-2 overflow-hidden' />
+        ),
+      }),
+      Surface.create({
+        id: `${meta.id}/object-debug`,
+        role: 'article',
+        filter: (data): data is { companionTo: Obj.Unknown } =>
+          data.subject === 'debug' && Obj.isObject(data.companionTo),
+        component: ({ data }) => <DebugObjectPanel object={data.companionTo} />,
+      }),
+      Surface.create({
+        id: `${meta.id}/devtools-overview`,
+        role: 'deck-companion--devtools',
+        component: () => <DevtoolsOverviewContainer />,
+      }),
+      Surface.create({
+        id: `${meta.id}/status`,
+        role: 'status',
+        component: () => <DebugStatus />,
+      }),
+
+      //
+      // Devtools
+      //
+
+      Surface.create({
+        id: `${meta.id}/client/config`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Client.Config,
+        component: () => <ConfigPanel vaultSelector={false} />,
+      }),
+      Surface.create({
+        id: `${meta.id}/client/storage`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Client.Storage,
+        component: () => <StoragePanel />,
+      }),
+      Surface.create({
+        id: `${meta.id}/client/logs`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Client.Logs,
+        component: () => <LoggingPanel />,
+      }),
+      Surface.create({
+        id: `${meta.id}/client/diagnostics`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Client.Diagnostics,
+        component: () => <DiagnosticsPanel />,
+      }),
+      Surface.create({
+        id: `${meta.id}/client/tracing`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Client.Tracing,
+        component: () => <TracingPanel />,
+      }),
+      Surface.create({
+        id: `${meta.id}/halo/identity`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Halo.Identity,
+        component: () => <IdentityPanel />,
+      }),
+      Surface.create({
+        id: `${meta.id}/halo/devices`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Halo.Devices,
+        component: () => <DeviceListPanel />,
+      }),
+      Surface.create({
+        id: `${meta.id}/halo/keyring`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Halo.Keyring,
+        component: () => <KeyringPanel />,
+      }),
+      Surface.create({
+        id: `${meta.id}/halo/credentials`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Halo.Credentials,
+        component: () => {
+          const space = useCurrentSpace();
+          return <CredentialsPanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}/echo/spaces`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Echo.Spaces,
+        component: () => {
+          const { invokePromise } = useOperationInvoker();
+          const handleSelect = useCallback(
+            () => invokePromise(LayoutOperation.Open, { subject: [Devtools.Echo.Space] }),
+            [invokePromise],
+          );
+          return <SpaceListPanel onSelect={handleSelect} />;
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}/echo/space`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Echo.Space,
+        component: () => {
+          const space = useCurrentSpace();
+          const { invokePromise } = useOperationInvoker();
+          const handleSelect = useCallback(
+            () => invokePromise(LayoutOperation.Open, { subject: [Devtools.Echo.Feeds] }),
+            [invokePromise],
+          );
+          return <SpaceInfoPanel space={space} onSelectFeed={handleSelect} onSelectPipeline={handleSelect} />;
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}/echo/feeds`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Echo.Feeds,
+        component: () => {
+          const space = useCurrentSpace();
+          return <FeedsPanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}/echo/objects`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Echo.Objects,
+        component: () => {
+          const space = useCurrentSpace();
+          return <ObjectsPanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}/echo/schema`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Echo.Schema,
+        component: () => {
+          const space = useCurrentSpace();
+          return <SchemaPanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}/echo/automerge`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Echo.Automerge,
+        component: () => {
+          const space = useCurrentSpace();
+          return <AutomergePanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}/echo/queues`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Echo.Queues,
+        component: () => <QueuesPanel />,
+      }),
+      Surface.create({
+        id: `${meta.id}/echo/members`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Echo.Members,
+        component: () => {
+          const space = useCurrentSpace();
+          return <MembersPanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}/echo/metadata`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Echo.Metadata,
+        component: () => <MetadataPanel />,
+      }),
+      Surface.create({
+        id: `${meta.id}/mesh/signal`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Mesh.Signal,
+        component: () => <SignalPanel />,
+      }),
+      Surface.create({
+        id: `${meta.id}/mesh/swarm`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Mesh.Swarm,
+        component: () => <SwarmPanel />,
+      }),
+      Surface.create({
+        id: `${meta.id}/mesh/network`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Mesh.Network,
+        component: () => {
+          const space = useCurrentSpace();
+          return <NetworkPanel space={space} />;
+        },
+      }),
+      // TODO(wittjosiah): Remove?
+      // createSurface({
+      //   id: `${meta.id}/agent/dashboard`,
+      //   role: 'article',
+      //   filter: (data): data is any => data.subject === Devtools.Agent.Dashboard,
+      //   component: () => <DashboardPanel />,
+      // }),
+      Surface.create({
+        id: `${meta.id}/edge/dashboard`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Edge.Dashboard,
+        component: () => <EdgeDashboardPanel />,
+      }),
+      Surface.create({
+        id: `${meta.id}/edge/workflows`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Edge.Workflows,
+        component: () => {
+          const space = useCurrentSpace();
+          return <WorkflowPanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}/edge/traces`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Edge.Traces,
+        component: () => {
+          const space = useCurrentSpace();
+          const queueDxn = space?.properties.invocationTraceQueue?.dxn;
+          return <InvocationTraceContainer db={space?.db} queueDxn={queueDxn} detailAxis='block' />;
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}/edge/testing`,
+        role: 'article',
+        filter: (data): data is any => data.subject === Devtools.Edge.Testing,
+        component: () => {
+          const { invokePromise } = useOperationInvoker();
+          const onSpaceCreate = useCallback(
+            async (space: Space) => {
+              await space.waitUntilReady();
+              await invokePromise(SpaceOperation.Migrate, { space });
+              await space.db.flush();
+            },
+            [invokePromise],
+          );
+          const onScriptPluginOpen = useCallback(
+            async (space: Space) => {
+              await space.waitUntilReady();
+              const createResult = await invokePromise(ScriptOperation.CreateScript, { db: space.db });
+              if (createResult.data?.object) {
+                await invokePromise(SpaceOperation.AddObject, { target: space.db, object: createResult.data.object });
+              }
+              log.info('script created', { result: createResult });
+              if (createResult.data?.object?.id) {
+                await invokePromise(LayoutOperation.Open, {
+                  subject: [`${space.id}:${createResult.data.object.id}`],
+                });
+              }
+            },
+            [invokePromise],
+          );
+          return <TestingPanel onSpaceCreate={onSpaceCreate} onScriptPluginOpen={onScriptPluginOpen} />;
+        },
+      }),
+    ]);
+  }),
+);

package/src/capabilities/settings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const DebugSettings = Capability.lazy('DebugSettings', () => import('./settings'));

package/src/capabilities/settings/settings.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { createKvsStore } from '@dxos/effect';
+
+import { meta } from '../../meta';
+import { DebugCapabilities, DebugSettingsSchema } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const settingsAtom = createKvsStore({
+      key: meta.id,
+      schema: DebugSettingsSchema,
+      defaultValue: () => ({}),
+    });
+
+    return [
+      Capability.contributes(DebugCapabilities.Settings, settingsAtom),
+      Capability.contributes(AppCapabilities.Settings, {
+        prefix: meta.id,
+        schema: DebugSettingsSchema,
+        atom: settingsAtom,
+      }),
+    ];
+  }),
+);

package/src/components/DebugGraph.tsx

@@ -5,10 +5,11 @@
 import React, { type FC } from 'react';
 
 import { Tree } from '@dxos/devtools';
-import { type Graph } from '@dxos/plugin-graph';
+import { Graph } from '@dxos/plugin-graph';
 
-export const DebugGraph: FC<{ graph: Graph; root: string }> = ({ graph, root }) => {
-  return <Tree data={graph.toJSON(root)} />;
+export type DebugGraphProps = { graph: Graph.Graph; root: string };
+export const DebugGraph: FC<DebugGraphProps> = ({ graph, root }) => {
+  return <Tree data={Graph.toJSON(graph, root)} />;
 };
 
 export default DebugGraph;

package/src/components/DebugObjectPanel.tsx

@@ -5,12 +5,11 @@
 import React from 'react';
 
 import { type Obj } from '@dxos/echo';
-import { Clipboard, Input, Toolbar } from '@dxos/react-ui';
-import { StackItem } from '@dxos/react-ui-stack';
+import { Clipboard, Input, Layout, Toolbar } from '@dxos/react-ui';
 import { Json } from '@dxos/react-ui-syntax-highlighter';
 
 export type DebugObjectPanelProps = {
-  object: Obj.Any;
+  object: Obj.Unknown;
 };
 
 // TODO(burdon): Get schema and traverse references.
@@ -19,7 +18,7 @@ export const DebugObjectPanel = ({ object }: DebugObjectPanelProps) => {
 
   return (
     <Clipboard.Provider>
-      <StackItem.Content toolbar>
+      <Layout.Main toolbar>
         <Toolbar.Root>
           <Input.Root>
             <Input.TextInput disabled value={dxn} />
@@ -27,7 +26,7 @@ export const DebugObjectPanel = ({ object }: DebugObjectPanelProps) => {
           </Input.Root>
         </Toolbar.Root>
         <Json data={object} />
-      </StackItem.Content>
+      </Layout.Main>
     </Clipboard.Provider>
   );
 };

package/src/components/DebugSettings.tsx

@@ -4,13 +4,13 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { Capabilities } from '@dxos/app-framework';
-import { useCapabilities } from '@dxos/app-framework/react';
+import { useCapabilities } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
 import { type ConfigProto, SaveConfig, Storage, defs } from '@dxos/config';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { Icon, IconButton, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { Settings } from '@dxos/react-ui-form';
 import { setDeep } from '@dxos/util';
 
 import { meta } from '../meta';
@@ -26,14 +26,19 @@ const StorageAdapters = {
   idb: defs.Runtime.Client.Storage.StorageDriver.IDB,
 } as const;
 
-export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) => {
+export type DebugSettingsComponentProps = {
+  settings: DebugSettingsProps;
+  onSettingsChange: (fn: (current: DebugSettingsProps) => DebugSettingsProps) => void;
+};
+
+export const DebugSettings = ({ settings, onSettingsChange }: DebugSettingsComponentProps) => {
   const { t } = useTranslation(meta.id);
   const [toast, setToast] = useState<Toast>();
   const client = useClient();
   const download = useFileDownload();
   // TODO(mykola): Get updates from other places that change Config.
   const [storageConfig, setStorageConfig] = useState<ConfigProto>({});
-  const [upload] = useCapabilities(Capabilities.FileUploader);
+  const [upload] = useCapabilities(AppCapabilities.FileUploader);
 
   useEffect(() => {
     void Storage().then((config) => setStorageConfig(config));
@@ -54,7 +59,7 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
     download(file, fileName);
 
     if (upload) {
-      const info = await upload(client.spaces.default, new File([file], fileName));
+      const info = await upload(client.spaces.default.db, new File([file], fileName));
       if (!info) {
         log.error('diagnostics failed to upload to IPFS');
         return;
@@ -92,31 +97,31 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
   };
 
   return (
-    <ControlPage>
-      <ControlSection title={t('settings title', { ns: meta.id })}>
-        <ControlGroup>
-          <ControlItemInput title={t('settings wireframe')}>
+    <Settings.Root>
+      <Settings.Section title={t('settings title', { ns: meta.id })}>
+        <Settings.Group>
+          <Settings.ItemInput title={t('settings wireframe')}>
             <Input.Switch
               checked={settings.wireframe}
-              onCheckedChange={(checked) => (settings.wireframe = !!checked)}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, wireframe: !!checked }))}
             />
-          </ControlItemInput>
-          <ControlItemInput title={t('settings download diagnostics')}>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings download diagnostics')}>
             <IconButton
               icon='ph--download-simple--regular'
               iconOnly
               label={t('settings download diagnostics')}
               onClick={handleDownload}
             />
-          </ControlItemInput>
-          <ControlItemInput title={t('settings repair')}>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings repair')}>
             <IconButton
               icon='ph--first-aid-kit--regular'
               iconOnly
               label={t('settings repair')}
               onClick={handleRepair}
             />
-          </ControlItemInput>
+          </Settings.ItemInput>
 
           {/* TODO(burdon): Move to layout? */}
           {toast && (
@@ -131,7 +136,7 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
             </Toast.Root>
           )}
 
-          <ControlItemInput title={t('settings choose storage adaptor')}>
+          <Settings.ItemInput title={t('settings choose storage adaptor')}>
             <Select.Root
               value={
                 Object.entries(StorageAdapters).find(
@@ -163,10 +168,10 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
                 </Select.Content>
               </Select.Portal>
             </Select.Root>
-          </ControlItemInput>
-        </ControlGroup>
-      </ControlSection>
-    </ControlPage>
+          </Settings.ItemInput>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
   );
 };