@dxos/plugin-client 0.8.4-main.1da679c → 0.8.4-main.21d9917

package/src/cli/commands/profile/delete.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Command from '@effect/cli/Command';
+import * as Options from '@effect/cli/Options';
+import * as FileSystem from '@effect/platform/FileSystem';
+import * as Console from 'effect/Console';
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+
+import { CommandConfig, print } from '@dxos/cli-util';
+import { DX_CONFIG, getProfilePath } from '@dxos/client-protocol';
+
+import { printProfileDeleted } from './util';
+
+export const del = Command.make(
+  'delete',
+  {
+    name: Options.text('name').pipe(Options.withDescription('Profile name'), Options.optional),
+  },
+  Effect.fnUntraced(function* ({ name }) {
+    const { json } = yield* CommandConfig;
+    const fs = yield* FileSystem.FileSystem;
+    const profileName = name.pipe(Option.getOrElse(() => 'default'));
+    yield* fs.remove(`${getProfilePath(DX_CONFIG, profileName)}.yml`);
+    if (json) {
+      yield* Console.log(JSON.stringify({ name: profileName, deleted: true }, null, 2));
+    } else {
+      yield* Console.log(print(printProfileDeleted(profileName)));
+    }
+  }),
+);

package/src/cli/commands/profile/import.ts

@@ -0,0 +1,101 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Command from '@effect/cli/Command';
+import * as Options from '@effect/cli/Options';
+import * as Prompt from '@effect/cli/Prompt';
+import * as FileSystem from '@effect/platform/FileSystem';
+import * as Path from '@effect/platform/Path';
+import * as Console from 'effect/Console';
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+
+import { CommandConfig } from '@dxos/cli-util';
+import { ConfigService } from '@dxos/config';
+import { log } from '@dxos/log';
+import type { Runtime } from '@dxos/protocols/proto/dxos/config';
+
+export const handler = Effect.fn(function* ({
+  file,
+  dataDir,
+  force,
+}: {
+  file: string;
+  dataDir: Option.Option<string>;
+  force: boolean;
+}) {
+  const dataDirValue = Option.getOrUndefined(dataDir);
+  const { json, profile } = yield* CommandConfig;
+  const fs = yield* FileSystem.FileSystem;
+  const path = yield* Path.Path;
+  const config = yield* ConfigService;
+
+  const { createLevel, createStorageObjects, importProfileData, decodeProfileArchive } = yield* Effect.promise(
+    () => import('@dxos/client-services'),
+  );
+
+  let storageConfig: Runtime.Client.Storage;
+  if (!dataDirValue) {
+    if (!force) {
+      yield* Console.log(`Will overwrite profile: ${profile}`);
+      const confirmed = yield* Prompt.confirm({
+        message: `Delete all data? (Profile: ${profile})`,
+        initial: false,
+      }).pipe(Prompt.run);
+      if (!confirmed) {
+        return;
+      }
+    }
+    storageConfig = config.values.runtime!.client!.storage!;
+  } else {
+    const fullPath = path.resolve(dataDirValue);
+    yield* Console.log(`Importing into: ${fullPath}`);
+    storageConfig = {
+      persistent: true,
+      dataRoot: fullPath,
+    };
+  }
+
+  if (yield* fs.exists(storageConfig.dataRoot!)) {
+    log.error('data directory already exists', { path: storageConfig.dataRoot! });
+    if (json) {
+      yield* Console.log(JSON.stringify({ error: 'Data directory already exists' }, null, 2));
+    } else {
+      yield* Console.log('Data directory already exists.');
+    }
+    return;
+  }
+
+  const data = yield* fs.readFile(file);
+
+  const archive = decodeProfileArchive(data);
+  yield* Console.log(`Importing archive with ${archive.storage.length} entries`);
+
+  const { storage } = createStorageObjects(storageConfig);
+  const level = yield* Effect.tryPromise({
+    try: () => createLevel(storageConfig),
+    catch: (error) => new Error(`Failed to create level: ${error}`),
+  });
+
+  yield* Console.log('Beginning profile import...');
+  yield* Effect.tryPromise({
+    try: () => importProfileData({ storage, level }, archive),
+    catch: (error) => new Error(`Failed to import profile data: ${error}`),
+  });
+  yield* Console.log('Profile import complete');
+
+  if (json) {
+    yield* Console.log(JSON.stringify({ success: true, profile, entries: archive.storage.length }, null, 2));
+  }
+});
+
+export const importCommand = Command.make(
+  'import',
+  {
+    file: Options.text('file').pipe(Options.withDescription('Archive filename.'), Options.withAlias('f')),
+    dataDir: Options.text('data-dir').pipe(Options.withDescription('Storage directory.'), Options.optional),
+    force: Options.boolean('force', { ifPresent: true }).pipe(Options.withDescription('Skip confirmation prompt.')),
+  },
+  handler,
+).pipe(Command.withDescription('Import profile.'));

package/src/cli/commands/profile/index.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Command from '@effect/cli/Command';
+
+import { create } from './create';
+import { del } from './delete';
+import { importCommand } from './import';
+import { inspect } from './inspect';
+import { list } from './list';
+import { reset } from './reset';
+
+export const profile = Command.make('profile').pipe(
+  Command.withDescription('Profile commands.'),
+  Command.withSubcommands([create, del, importCommand, inspect, list, reset]),
+);

package/src/cli/commands/profile/inspect.ts

@@ -0,0 +1,64 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Command from '@effect/cli/Command';
+import * as Options from '@effect/cli/Options';
+import * as FileSystem from '@effect/platform/FileSystem';
+import * as Console from 'effect/Console';
+import * as Effect from 'effect/Effect';
+
+import { CommandConfig, FormBuilder, print } from '@dxos/cli-util';
+import { ProfileArchiveEntryType } from '@dxos/protocols';
+import { arrayToBuffer } from '@dxos/util';
+
+export const handler = Effect.fn(function* ({ file, storage }: { file: string; storage: boolean }) {
+  const { json } = yield* CommandConfig;
+  const fs = yield* FileSystem.FileSystem;
+
+  const { decodeProfileArchive } = yield* Effect.promise(() => import('@dxos/client-services'));
+
+  const data = yield* fs.readFile(file);
+
+  const archive = decodeProfileArchive(data);
+
+  if (json) {
+    yield* Console.log(
+      JSON.stringify(
+        {
+          meta: archive.meta,
+          ...(storage ? { storage: archive.storage } : {}),
+        },
+        null,
+        2,
+      ),
+    );
+  } else {
+    const builder = FormBuilder.make({ title: 'Profile Archive' }).pipe(
+      FormBuilder.when(
+        archive.meta,
+        FormBuilder.each(Object.entries(archive.meta ?? {}), ([key, value]) => FormBuilder.set(key, String(value))),
+      ),
+      FormBuilder.build,
+    );
+    yield* Console.log(print(builder));
+
+    if (storage) {
+      yield* Console.log('\nStorage entries:\n');
+      for (const entry of archive.storage) {
+        const key =
+          typeof entry.key === 'string' ? entry.key : JSON.stringify(arrayToBuffer(entry.key).toString()).slice(1, -1);
+        yield* Console.log(`  ${ProfileArchiveEntryType[entry.type]} ${key}`);
+      }
+    }
+  }
+});
+
+export const inspect = Command.make(
+  'inspect',
+  {
+    file: Options.text('file').pipe(Options.withDescription('Archive filename.'), Options.withAlias('f')),
+    storage: Options.boolean('storage', { ifPresent: true }).pipe(Options.withDescription('List storage entries.')),
+  },
+  handler,
+).pipe(Command.withDescription('Inspect profile archive.'));

package/src/cli/commands/profile/list.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Command from '@effect/cli/Command';
+import * as FileSystem from '@effect/platform/FileSystem';
+import * as Path from '@effect/platform/Path';
+import * as Console from 'effect/Console';
+import * as Effect from 'effect/Effect';
+import * as Yaml from 'yaml';
+
+import { CommandConfig, printList } from '@dxos/cli-util';
+import { Config } from '@dxos/client';
+import { DX_CONFIG, DX_DATA, getProfilePath } from '@dxos/client-protocol';
+
+import { printProfile } from './util';
+
+export const list = Command.make(
+  'list',
+  {},
+  Effect.fnUntraced(function* () {
+    const { profile: currentProfile } = yield* CommandConfig;
+    const fs = yield* FileSystem.FileSystem;
+    const path = yield* Path.Path;
+    const profileDir = path.join(DX_CONFIG, 'profile');
+    const files = yield* fs.readDirectory(profileDir);
+    const profiles = yield* Effect.forEach(
+      files,
+      Effect.fnUntraced(function* (filename) {
+        const ext = path.extname(filename);
+        const name = filename.slice(0, -ext.length);
+        const fullPath = path.join(DX_CONFIG, 'profile', filename);
+        const configContent = yield* fs.readFileString(fullPath);
+        const configValues = Yaml.parse(configContent);
+        const config = new Config(configValues);
+        return {
+          name,
+          isCurrent: name === currentProfile,
+          fullPath,
+          storagePath: getProfilePath(configValues?.runtime?.client?.storage.dataRoot ?? DX_DATA, name),
+          edge: config.values.runtime?.services?.edge?.url,
+        };
+      }),
+    );
+
+    const { json } = yield* CommandConfig;
+    if (json) {
+      yield* Console.log(JSON.stringify(profiles, null, 2));
+    } else {
+      const formatted = profiles.map(printProfile);
+      yield* Console.log(printList(formatted));
+    }
+  }),
+);

package/src/cli/commands/profile/reset.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Command from '@effect/cli/Command';
+import * as Options from '@effect/cli/Options';
+import * as Prompt from '@effect/cli/Prompt';
+import * as FileSystem from '@effect/platform/FileSystem';
+import * as Console from 'effect/Console';
+import * as Effect from 'effect/Effect';
+
+import { CommandConfig, print } from '@dxos/cli-util';
+import { DX_DATA, getProfilePath } from '@dxos/client-protocol';
+import { ConfigService } from '@dxos/config';
+
+import { printProfileReset } from './util';
+
+export const reset = Command.make(
+  'reset',
+  {
+    force: Options.boolean('force', { ifPresent: true }).pipe(Options.withDescription('Skip confirmation prompt')),
+  },
+  Effect.fnUntraced(function* ({ force }) {
+    const fs = yield* FileSystem.FileSystem;
+    const config = yield* ConfigService;
+    const { json, profile } = yield* CommandConfig;
+    const path = config.values.runtime?.client?.storage?.dataRoot ?? getProfilePath(DX_DATA, profile);
+    if (!force) {
+      const confirmed = yield* Prompt.confirm({
+        message: `Are you sure you want to reset the profile (${profile})?`,
+        initial: false,
+      });
+      if (!confirmed) {
+        return;
+      }
+    }
+
+    yield* fs.remove(path, { recursive: true });
+    if (json) {
+      yield* Console.log(JSON.stringify({ profile, reset: true }, null, 2));
+    } else {
+      yield* Console.log(print(printProfileReset(profile)));
+    }
+  }),
+);

package/src/cli/commands/profile/util.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { FormBuilder } from '@dxos/cli-util';
+
+export type ProfileInfo = {
+  name: string;
+  isCurrent: boolean;
+  fullPath: string;
+  storagePath: string;
+  edge?: string;
+};
+
+/**
+ * Pretty prints profile creation result with ANSI colors.
+ */
+export const printProfileCreated = (name: string, path: string) =>
+  FormBuilder.make({ title: 'Profile created' }).pipe(
+    FormBuilder.set('name', name),
+    FormBuilder.set('path', path),
+    FormBuilder.build,
+  );
+
+/**
+ * Pretty prints profile deletion result with ANSI colors.
+ */
+export const printProfileDeleted = (name: string) =>
+  FormBuilder.make({ title: 'Profile deleted' }).pipe(FormBuilder.set('name', name), FormBuilder.build);
+
+/**
+ * Pretty prints profile reset result with ANSI colors.
+ */
+export const printProfileReset = (profile: string) =>
+  FormBuilder.make({ title: 'Profile reset' }).pipe(FormBuilder.set('profile', profile), FormBuilder.build);
+
+/**
+ * Pretty prints a profile with ANSI colors.
+ */
+export const printProfile = (profile: ProfileInfo) => {
+  const title = profile.isCurrent ? `${profile.name} (current)` : profile.name;
+  return FormBuilder.make({ title }).pipe(
+    FormBuilder.set('fullPath', profile.fullPath),
+    FormBuilder.set('storagePath', profile.storagePath),
+    FormBuilder.set('edge', profile.edge ?? '<none>'),
+    FormBuilder.build,
+  );
+};

package/src/cli/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './plugin';

package/src/cli/plugin.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability, Common, Plugin } from '@dxos/app-framework';
+
+// NOTE: Must not import from index to avoid pulling in react dependencies.
+import { Client } from '../capabilities/client';
+import { OperationResolver } from '../capabilities/operation-resolver';
+import { SchemaDefs } from '../capabilities/schema-defs';
+import { meta } from '../meta';
+import { ClientEvents } from '../types';
+import { type ClientPluginOptions } from '../types';
+
+import { config, device, edge, halo, profile } from './commands';
+
+export const ClientPlugin = Plugin.define<ClientPluginOptions>(meta).pipe(
+  Plugin.addModule((options) => ({
+    id: Capability.getModuleTag(Client),
+    activatesOn: Common.ActivationEvent.Startup,
+    activatesAfter: [ClientEvents.ClientReady],
+    activate: () => Client(options),
+  })),
+  Plugin.addModule({
+    activatesOn: ClientEvents.ClientReady,
+    activatesBefore: [Common.ActivationEvent.SetupSchema],
+    activate: SchemaDefs,
+  }),
+  // TODO(wittjosiah): Could some of these commands make use of operations?
+  Common.Plugin.addCommandModule({ commands: [config, device, edge, halo, profile] }),
+  Common.Plugin.addOperationResolverModule({ activate: () => OperationResolver() }),
+  Plugin.make,
+);

package/src/cli/testing/test-console.ts

@@ -0,0 +1,88 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { inspect } from 'node:util';
+
+import * as Console from 'effect/Console';
+import * as Context from 'effect/Context';
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+
+function logToString(...args: any[]): string {
+  return args
+    .map((arg) => {
+      if (typeof arg === 'string') {
+        return arg;
+      }
+
+      return inspect(arg, { colors: false, depth: null });
+    })
+    .join(' ');
+}
+
+class TestConsoleService {
+  private _logs: Array<{ level: string; args: unknown; message: string }> = [];
+
+  readonly console: Console.Console;
+
+  constructor(console: Console.Console) {
+    const pusher =
+      (level: string) =>
+      (...args: readonly any[]) => {
+        this._logs.push({ level, args, message: logToString(...args) });
+      };
+
+    this.console = {
+      ...console,
+      log: (...args: readonly any[]) => Effect.sync(() => pusher('log')(...args)),
+    };
+  }
+
+  get logs() {
+    return [...this._logs];
+  }
+
+  clear() {
+    this._logs.length = 0;
+  }
+}
+
+// TODO(burdon): We could have a single namespace "Testing" with all test utilities.
+export namespace TestConsole {
+  export class TestConsole extends Context.Tag('TestConsole')<TestConsole, TestConsoleService>() {}
+
+  /**
+   * Extract JSON string from log arguments.
+   * Handles both array and string argument formats.
+   */
+  export const extractJsonString = (log: { args: unknown }): string => {
+    if (Array.isArray(log.args) && log.args.length > 0) {
+      return String(log.args[0]);
+    }
+    return log.args as string;
+  };
+
+  /**
+   * Parse JSON from log arguments.
+   * Handles both array and string argument formats.
+   */
+  export const parseJson = <T = unknown>(log: { args: unknown }): T => {
+    const jsonString = extractJsonString(log);
+    return JSON.parse(jsonString) as T;
+  };
+
+  const testConsole = Layer.effect(
+    TestConsole,
+    Effect.gen(function* () {
+      return new TestConsoleService(yield* Effect.console);
+    }),
+  );
+
+  const setConsole = Effect.gen(function* () {
+    const { console } = yield* TestConsole;
+    return Console.setConsole(console);
+  }).pipe(Layer.unwrapEffect);
+
+  export const layer = Layer.provideMerge(setConsole, testConsole);
+}

package/src/components/DevicesContainer.stories.tsx

@@ -2,14 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 
-import { IntentPlugin } from '@dxos/app-framework';
+import { OperationPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { withTheme } from '@dxos/react-ui/testing';
 import { translations as shellTranslations } from '@dxos/shell/react';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { ClientPlugin } from '../ClientPlugin';
 import { translations } from '../translations';
@@ -20,18 +19,18 @@ const meta = {
   title: 'plugins/plugin-client/DevicesContainer',
   component: DevicesContainer,
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [
         ClientPlugin({
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-          },
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+            }),
         }),
-        IntentPlugin(),
+        OperationPlugin(),
       ],
     }),
-    withTheme,
-    withLayout(),
   ],
   parameters: {
     layout: 'fullscreen',

package/src/components/DevicesContainer.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { QR } from 'react-qr-rounded';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/react';
 import { log } from '@dxos/log';
 import { useClient, useMulticastObservable } from '@dxos/react-client';
 import { type Device, useDevices } from '@dxos/react-client/halo';
@@ -20,43 +20,45 @@ import {
   ControlPage,
   ControlSection,
 } from '@dxos/react-ui-form';
+import { translationKey } from '@dxos/shell/react';
 import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
+import { osTranslations } from '@dxos/ui-theme';
 import { hexToEmoji } from '@dxos/util';
 
-import { CLIENT_PLUGIN } from '../meta';
-import { ClientAction } from '../types';
+import { meta } from '../meta';
+import { ClientOperation } from '../types';
 
 export type DevicesContainerProps = {
   createInvitationUrl?: (invitationCode: string) => string;
 };
 
 export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps) => {
-  const { t } = useTranslation('os');
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { t } = useTranslation(translationKey);
+  const { invokePromise } = useOperationInvoker();
   const devices = useDevices();
   const { swarm: connectionState } = useNetworkStatus();
 
-  const handleResetStorage = useCallback(() => dispatch(createIntent(ClientAction.ResetStorage)), [dispatch]);
+  const handleResetStorage = useCallback(() => invokePromise(ClientOperation.ResetStorage, {}), [invokePromise]);
 
   const handleRecover = useCallback(
-    () => dispatch(createIntent(ClientAction.ResetStorage, { mode: 'recover' })),
-    [dispatch],
+    () => invokePromise(ClientOperation.ResetStorage, { mode: 'recover' }),
+    [invokePromise],
   );
 
   const handleJoinNewIdentity = useCallback(
-    () => dispatch(createIntent(ClientAction.ResetStorage, { mode: 'join new identity' })),
-    [dispatch],
+    () => invokePromise(ClientOperation.ResetStorage, { mode: 'join new identity' }),
+    [invokePromise],
   );
 
   return (
     <Clipboard.Provider>
       <ControlPage>
         <ControlSection
-          title={t('devices verbose label', { ns: CLIENT_PLUGIN })}
-          description={t('devices description', { ns: CLIENT_PLUGIN })}
+          title={t('devices verbose label', { ns: meta.id })}
+          description={t('devices description', { ns: meta.id })}
         >
           <ControlFrame>
-            <ControlFrameItem title={t('devices label', { ns: CLIENT_PLUGIN })}>
+            <ControlFrameItem title={t('devices label', { ns: meta.id })}>
               <List>
                 {devices.map((device: Device) => {
                   return (
@@ -73,21 +75,18 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
           </ControlFrame>
         </ControlSection>
         <ControlSection
-          title={t('danger zone title', { ns: CLIENT_PLUGIN })}
-          description={t('danger zone description', { ns: CLIENT_PLUGIN })}
+          title={t('danger zone title', { ns: meta.id })}
+          description={t('danger zone description', { ns: meta.id })}
         >
           <ControlGroup>
-            <ControlItem
-              title={t('reset device label')}
-              description={t('reset device description', { ns: CLIENT_PLUGIN })}
-            >
+            <ControlItem title={t('reset device label')} description={t('reset device description', { ns: meta.id })}>
               <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
                 {t('reset device label')}
               </Button>
             </ControlItem>
             <ControlItem
               title={t('recover identity label')}
-              description={t('recover identity description', { ns: CLIENT_PLUGIN })}
+              description={t('recover identity description', { ns: meta.id })}
             >
               <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
                 {t('recover identity label')}
@@ -95,7 +94,7 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
             </ControlItem>
             <ControlItem
               title={t('join new identity label')}
-              description={t('join new identity description', { ns: CLIENT_PLUGIN })}
+              description={t('join new identity description', { ns: meta.id })}
             >
               <Button variant='destructive' onClick={handleJoinNewIdentity} data-testid='devicesContainer.joinExisting'>
                 {t('join new identity label')}
@@ -178,7 +177,7 @@ const InvitationSection = ({
   onInvitationDone = () => {},
   onInvitationCreate = () => {},
 }: InvitationComponentProps) => {
-  const { t } = useTranslation(CLIENT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const activeView =
     state < 0
       ? 'init'
@@ -220,12 +219,12 @@ const InvitationSection = ({
 };
 
 const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel: () => void }) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const qrLabel = useId('devices-container__qr-code');
   const emoji = hexToEmoji(id);
   return (
     <>
-      <p className='text-description'>{t('qr code description', { ns: CLIENT_PLUGIN })}</p>
+      <p className='text-description'>{t('qr code description', { ns: meta.id })}</p>
       <div role='group' className='grid grid-cols-[1fr_min-content] mlb-2 gap-2'>
         <div role='none' className='is-full aspect-square relative text-description'>
           <QR
@@ -260,7 +259,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
 };
 
 const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string; onCancel: () => void }) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const emoji = hexToEmoji(id);
 
   return (