@dxos/shell 0.6.1-main.e05b43b → 0.6.1-main.ff751ec

package/src/components/DeviceList/DeviceListItem.tsx

@@ -12,6 +12,7 @@ import {
   ShareFat,
   Power,
   Robot,
+  Database,
 } from '@phosphor-icons/react';
 import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
 
@@ -27,11 +28,12 @@ import {
   useTranslation,
   DropdownMenu,
   Button,
+  Tooltip,
 } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 import { keyToFallback } from '@dxos/util';
 
-import { type DeviceListItemProps } from './DeviceListProps';
+import { type AgentFormProps, type DeviceListItemProps } from './DeviceListProps';
 
 const iconProps: IconProps = {
   weight: 'duotone',
@@ -43,10 +45,20 @@ const iconProps: IconProps = {
 
 export const DeviceListItem = forwardRef<
   HTMLLIElement,
-  ThemedClassName<ComponentPropsWithoutRef<'li'>> & DeviceListItemProps
+  ThemedClassName<ComponentPropsWithoutRef<'li'>> & DeviceListItemProps & Pick<AgentFormProps, 'onAgentDestroy'>
 >(
   (
-    { device, onClickAdd, onClickEdit, onClickReset, onClickJoinExisting, classNames, connectionState, ...props },
+    {
+      device,
+      onClickAdd,
+      onClickEdit,
+      onClickReset,
+      onClickJoinExisting,
+      classNames,
+      connectionState,
+      onAgentDestroy,
+      ...props
+    },
     forwardedRef,
   ) => {
     const { t } = useTranslation('os');
@@ -78,7 +90,9 @@ export const DeviceListItem = forwardRef<
         >
           <Avatar.Frame classNames='place-self-center'>
             {device.profile?.type ? (
-              device.profile.type === DeviceType.BROWSER ? (
+              device.profile.type === DeviceType.AGENT_MANAGED ? (
+                <Database {...iconProps} />
+              ) : device.profile.type === DeviceType.BROWSER ? (
                 <Compass {...iconProps} />
               ) : device.profile.type === DeviceType.NATIVE ? (
                 <Desktop {...iconProps} />
@@ -95,35 +109,59 @@ export const DeviceListItem = forwardRef<
           </Avatar.Frame>
           <Avatar.Label classNames='flex-1 text-sm truncate'>{displayName}</Avatar.Label>
           {isCurrent && <Tag color='primary'>{t('current device tag label')}</Tag>}
-          {device.kind === DeviceKind.CURRENT && (
-            <DropdownMenu.Root>
-              <DropdownMenu.Trigger asChild>
+          {device.profile?.type === DeviceType.AGENT_MANAGED ? (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
                 <Button
                   variant='ghost'
                   classNames='pli-0 is-[--rail-action] bs-[--rail-action]'
-                  data-testid={`device-list-item${isCurrent ? '-current' : ''}.options`}
+                  data-testid='agent.destroy'
+                  onClick={onAgentDestroy}
                 >
-                  <span className='sr-only'>{t('more options label')}</span>
-                  <DotsThree className={getSize(5)} />
+                  <span className='sr-only'>{t('destroy agent label')}</span>
+                  <Power className={getSize(5)} />
                 </Button>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content>
-                <DropdownMenu.Viewport>
-                  {/* <DropdownMenu.Item disabled onClick={onClickEdit}> */}
-                  {/*  <PencilSimpleLine className={getSize(5)} /> */}
-                  {/*  {t('edit device label')} */}
-                  {/* </DropdownMenu.Item> */}
-                  <DropdownMenu.Item data-testid='device-list-item-current.join-existing' onClick={onClickJoinExisting}>
-                    <ShareFat className={getSize(5)} />
-                    {t('choose join new identity label')}
-                  </DropdownMenu.Item>
-                  <DropdownMenu.Item data-testid='device-list-item-current.reset' onClick={onClickReset}>
-                    <Power className={getSize(5)} />
-                    {t('reset device label')}
-                  </DropdownMenu.Item>
-                </DropdownMenu.Viewport>
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content side='bottom' classNames='z-50'>
+                  {t('destroy agent label')}
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          ) : (
+            device.kind === DeviceKind.CURRENT && (
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    classNames='pli-0 is-[--rail-action] bs-[--rail-action]'
+                    data-testid={`device-list-item${isCurrent ? '-current' : ''}.options`}
+                  >
+                    <span className='sr-only'>{t('more options label')}</span>
+                    <DotsThree className={getSize(5)} />
+                  </Button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content>
+                  <DropdownMenu.Viewport>
+                    {/* <DropdownMenu.Item disabled onClick={onClickEdit}> */}
+                    {/*  <PencilSimpleLine className={getSize(5)} /> */}
+                    {/*  {t('edit device label')} */}
+                    {/* </DropdownMenu.Item> */}
+                    <DropdownMenu.Item
+                      data-testid='device-list-item-current.join-existing'
+                      onClick={onClickJoinExisting}
+                    >
+                      <ShareFat className={getSize(5)} />
+                      {t('choose join new identity label')}
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item data-testid='device-list-item-current.reset' onClick={onClickReset}>
+                      <Power className={getSize(5)} />
+                      {t('reset device label')}
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Viewport>
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
+            )
           )}
         </Avatar.Root>
       </ListItem.Root>

package/src/components/DeviceList/DeviceListProps.ts

@@ -16,13 +16,12 @@ export type DeviceListProps = {
 };
 
 export type AgentFormProps = {
-  onAgentCreate?: () => Promise<void>;
-  onAgentDestroy?: () => Promise<void>;
-  agentStatus?: string;
-  agentActive?: boolean;
-  agentProviderDisabled?: boolean;
-  validationMessage?: string;
-  agentHostingEnabled?: boolean;
+  onAgentCreate: () => Promise<void>;
+  onAgentDestroy: () => Promise<void>;
+  onAgentRefresh: () => Promise<void>;
+  agentStatus: 'getting' | 'creating' | 'destroying' | 'created' | 'creatable' | 'error';
+  validationMessage: string;
+  agentHostingEnabled: boolean;
 };
 
 export type DeviceListItemProps = {

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -108,7 +108,7 @@ const IdentityHeading = ({
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
                   <Toolbar.Button
-                    classNames='bs-[--rail-action] justify-self-start'
+                    classNames='bs-[--rail-action]'
                     data-testid='update-profile-form-copy-key'
                     onClick={() => setTextValue(identityHex)}
                   >
@@ -125,10 +125,7 @@ const IdentityHeading = ({
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <Toolbar.Button
-                      classNames={[
-                        'bs-[--rail-action] is-[--rail-action] justify-self-end',
-                        !isConnected && 'text-error-500',
-                      ]}
+                      classNames={['bs-[--rail-action]', !isConnected && 'text-error-500']}
                       onClick={() =>
                         onChangeConnectionState?.(isConnected ? ConnectionState.OFFLINE : ConnectionState.ONLINE)
                       }

package/src/panels/IdentityPanel/IdentityPanelProps.ts

@@ -54,6 +54,5 @@ export type IdentityPanelStepProps = Pick<
   'send' | 'onDone' | 'doneActionParent' | 'connectionState'
 > & {
   active?: boolean;
-  agentHostingEnabled?: boolean;
   devices: Device[];
 };

package/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx

@@ -5,8 +5,8 @@
 import React, { useCallback } from 'react';
 
 import { log } from '@dxos/log';
-import { useAgentHostingClient, useClient } from '@dxos/react-client';
-import { useHaloInvitations } from '@dxos/react-client/halo';
+import { useClient } from '@dxos/react-client';
+import { useHaloInvitations, DeviceType } from '@dxos/react-client/halo';
 import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 
 import { AgentConfig, type AgentFormProps, DeviceList } from '../../../components';
@@ -18,7 +18,6 @@ export const IdentityActionChooser = (props: IdentityPanelStepProps) => {
   const { send } = props;
   const client = useClient();
   const invitations = useHaloInvitations();
-  const agentHostingProviderClient = useAgentHostingClient();
   const onInvitationEvent = useCallback((invitation: Invitation) => {
     const invitationCode = InvitationEncoder.encode(invitation);
     if (invitation.state === Invitation.State.CONNECTING) {
@@ -35,13 +34,7 @@ export const IdentityActionChooser = (props: IdentityPanelStepProps) => {
     }
     send?.({ type: 'selectInvitation', invitation });
   };
-  return (
-    <IdentityActionChooserImpl
-      {...props}
-      onCreateInvitationClick={createInvitation}
-      agentHostingEnabled={!!agentHostingProviderClient}
-    />
-  );
+  return <IdentityActionChooserImpl {...props} onCreateInvitationClick={createInvitation} />;
 };
 
 export type IdentityActionChooserImplProps = IdentityActionChooserProps &
@@ -54,12 +47,10 @@ export const IdentityActionChooserImpl = ({
   onCreateInvitationClick,
   devices,
   connectionState,
-  onAgentDestroy,
-  onAgentCreate,
-  agentStatus,
-  agentActive,
   agentHostingEnabled,
+  ...agentProps
 }: IdentityActionChooserImplProps) => {
+  const managedDeviceAvailable = devices.find((device) => device.profile?.type === DeviceType.AGENT_MANAGED);
   return (
     <div role='none' className='bs-40 grow overflow-y-auto overflow-x-hidden'>
       <DeviceList
@@ -68,8 +59,9 @@ export const IdentityActionChooserImpl = ({
         onClickAdd={onCreateInvitationClick}
         onClickJoinExisting={() => send?.({ type: 'chooseJoinNewIdentity' })}
         onClickReset={() => send?.({ type: 'chooseResetStorage' })}
+        onAgentDestroy={agentProps.onAgentDestroy!}
       />
-      {agentHostingEnabled && <AgentConfig {...{ agentActive, agentStatus, onAgentDestroy, onAgentCreate }} />}
+      {!managedDeviceAvailable && agentHostingEnabled && <AgentConfig {...(agentProps as AgentFormProps)} />}
     </div>
   );
 };

package/src/panels/IdentityPanel/useAgentHandlers.ts

@@ -11,54 +11,91 @@ import { useAgentHostingClient, useClient } 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 useAgentHandlers = ({
   invitations,
   identity,
 }: {
   invitations: CancellableInvitation[];
   identity: Identity | null;
-}) => {
+}): AgentFormProps => {
   const [validationMessage, setValidationMessage] = useState('');
-  const [agentStatus, setAgentStatus] = useState('');
-  const [agentActive, setAgentActive] = useState(false);
+  const [agentStatus, setAgentStatus] = useState<AgentFormProps['agentStatus']>('getting');
   const agentHostingProviderClient = useAgentHostingClient();
   const client = useClient();
 
-  useEffect(() => {
-    const fetchAgentStatus = async () => {
-      // TODO(nf): if agent exists, subscribe to updates instead of oneshot status
-      if (agentHostingProviderClient) {
-        const agentStatus = await agentHostingProviderClient?.getAgent(identity?.identityKey.truncate() ?? 'foo');
-        if (agentStatus) {
-          setAgentActive(true);
-          setAgentStatus(agentStatus);
+  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 {
-          setAgentActive(false);
-          setValidationMessage('No agent deployed via provider.');
+          setAgentStatus('creatable');
+          setValidationMessage('Error creating agent.');
         }
-      } else {
-        setValidationMessage('No agent provider configured.');
+      } catch (err: any) {
+        setValidationMessage(`Error creating agent: ${err.message}`);
+        return updateAgentStatus();
       }
-    };
-    void fetchAgentStatus();
+    } 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 }));
-      invariant(identity, 'Identity not found');
-      if (agentHostingProviderClient) {
-        try {
-          const res = await agentHostingProviderClient?.createAgent(invitationCode, identity.identityKey.truncate());
-          // TODO(nf): human-consumable response from API
-          setAgentStatus(res);
-          setAgentActive(true);
-          setValidationMessage('');
-        } catch (err: any) {
-          setValidationMessage(`error creating agent: ${err.message}`);
-        }
-      }
+      return createAgent(invitationCode);
     }
   }, []);
 
@@ -75,18 +112,17 @@ export const useAgentHandlers = ({
     invitation.subscribe(handleAgentCreate);
   };
 
-  const onAgentDestroy = async () => {
-    const identity = client.halo.identity.get();
-    invariant(identity, 'Identity not found');
-    try {
-      await agentHostingProviderClient?.destroyAgent(identity.identityKey.truncate());
-      setValidationMessage('No agent deployed via provider.');
-      setAgentStatus('');
-      setAgentActive(false);
-    } catch (err: any) {
-      setValidationMessage(`error destroying agent: ${err.message}`);
-    }
+  const onAgentRefresh = async () => {
+    setValidationMessage('');
+    await updateAgentStatus();
   };
 
-  return { onAgentCreate, onAgentDestroy, validationMessage, agentStatus, agentActive };
+  return {
+    onAgentCreate,
+    onAgentDestroy: destroyAgent,
+    onAgentRefresh,
+    validationMessage,
+    agentStatus,
+    agentHostingEnabled: !!agentHostingProviderClient,
+  };
 };

package/src/translations/locales/en-US.ts

@@ -146,4 +146,10 @@ export const os = {
   'destroy agent label': 'Shut down agent',
   'agent device label': 'Your agent',
   'shell fallback title': 'Shell failed to connect',
+  'creating agent label': 'Starting agent…',
+  'destroying agent label': 'Stopping agent…',
+  'getting agent label': 'Checking agent status…',
+  'agent requested label': 'Agent requested',
+  'agent requested description':
+    'The agent service is creating an agent for you. Once the agent connects, it will display in the devices list.',
 };