@dxos/plugin-automation 0.8.4-main.d05673bc65 → 0.8.4-main.dfabb4ec29

package/src/components/FunctionsRegistry/FunctionsRegistry.tsx

@@ -6,7 +6,8 @@ import * as Schema from 'effect/Schema';
 import { useState } from 'react';
 import React, { useCallback } from 'react';
 
-import { Function } from '@dxos/functions';
+import * as OperationModule from '@dxos/compute';
+import { Context } from '@dxos/context';
 import { getDeployedFunctions } from '@dxos/functions-runtime/edge';
 import { useClient } from '@dxos/react-client';
 import { Filter, Query, type Space, useQuery } from '@dxos/react-client/echo';
@@ -15,7 +16,7 @@ import { Settings } from '@dxos/react-ui-form';
 import { List } from '@dxos/react-ui-list';
 import { ghostHover, mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 const grid = 'grid grid-cols-[1fr_1fr_auto] min-h-[2.5rem]';
 
@@ -26,12 +27,12 @@ type FunctionsRegistryProps = {
 export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
   const client = useClient();
   const [loading, setLoading] = useState(true);
-  const [functions, setFunctions] = useState<Function.Function[]>([]);
+  const [functions, setFunctions] = useState<OperationModule.Operation.PersistentOperation[]>([]);
   const { t } = useTranslation(meta.id);
 
-  const dbFunctions = useQuery(space.db, Filter.type(Function.Function));
+  const dbFunctions = useQuery(space.db, Filter.type(OperationModule.Operation.PersistentOperation));
 
-  const state = (func: Function.Function) => {
+  const state = (func: OperationModule.Operation.PersistentOperation) => {
     const dbFunction = dbFunctions.find((f) => f.key === func.key);
     if (!dbFunction) {
       return 'import';
@@ -44,32 +45,38 @@ export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
 
   useAsyncEffect(async () => {
     setLoading(true);
-    const functions = await getDeployedFunctions(client, true);
+    const functions = await getDeployedFunctions(Context.default(), client, true);
     setFunctions(functions);
     setLoading(false);
   }, []);
 
   const hanleImportOrUpdate = useCallback(
-    async (func: Function.Function) => {
-      const functions = await space.db.query(Query.type(Function.Function, { key: func.key })).run();
+    async (func: OperationModule.Operation.PersistentOperation) => {
+      const functions = await space.db
+        .query(Query.type(OperationModule.Operation.PersistentOperation, { key: func.key }))
+        .run();
       const [existingFunc] = functions;
       if (!existingFunc) {
         space.db.add(func);
         return;
       }
-      Function.setFrom(existingFunc, func);
+      OperationModule.Operation.setFrom(existingFunc, func);
     },
     [space],
   );
 
   return (
-    <Settings.Container>
+    <Settings.Panel>
       {functions.length > 0 && (
-        <List.Root<Function.Function> items={functions} isItem={Schema.is(Function.Function)} getId={(func) => func.id}>
+        <List.Root<OperationModule.Operation.PersistentOperation>
+          items={functions}
+          isItem={Schema.is(OperationModule.Operation.PersistentOperation)}
+          getId={(func) => func.id}
+        >
           {({ items }) => (
             <div role='list' className='flex flex-col w-full'>
               {items?.map((func) => (
-                <List.Item<Function.Function>
+                <List.Item<OperationModule.Operation.PersistentOperation>
                   key={func.id}
                   item={func}
                   classNames={mx(grid, ghostHover, 'items-center', 'px-2', 'min-h-[3rem]')}
@@ -89,7 +96,7 @@ export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
                     iconOnly
                     icon={state(func) === 'update' ? 'ph--arrows-clockwise--regular' : 'ph--download--regular'}
                     label={
-                      state(func) === 'update' ? t('update function button label') : t('import function button label')
+                      state(func) === 'update' ? t('update-function-button.label') : t('import-function-button.label')
                     }
                     disabled={state(func) === 'none'}
                     onClick={() => hanleImportOrUpdate(func)}
@@ -101,10 +108,7 @@ export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
         </List.Root>
       )}
 
-      {functions.length === 0 && !loading && (
-        <div className='text-center py-4 text-gray-500'>{t('no functions found')}</div>
-      )}
-      {loading && <div className='text-center py-4 text-gray-500'>{t('loading functions')}</div>}
-    </Settings.Container>
+      {loading && <div className='text-center py-4 text-gray-500'>{t('loading-functions.message')}</div>}
+    </Settings.Panel>
   );
 };

package/src/components/TriggerEditor/FunctionInputEditor.tsx

@@ -5,17 +5,17 @@
 import type * as SchemaAST from 'effect/SchemaAST';
 import React, { useCallback, useMemo } from 'react';
 
+import { type Operation } from '@dxos/compute';
 import { type Database, JsonSchema, Obj, Ref } from '@dxos/echo';
 import { type JsonPath } from '@dxos/echo/internal';
-import { type Function } from '@dxos/functions';
 import { useOnTransition, useTranslation } from '@dxos/react-ui';
 import { Form, type FormFieldStateProps, type FormRootProps, useFormValues } from '@dxos/react-ui-form';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 export type FunctionInputEditorProps = {
   type: SchemaAST.AST;
-  functions: Function.Function[];
+  functions: Operation.PersistentOperation[];
   db?: Database.Database;
 } & FormFieldStateProps;
 
@@ -68,7 +68,7 @@ export const FunctionInputEditor = ({ type, functions, db, getValue, onValueChan
 
   return (
     <>
-      <Form.Label label={t('function parameters label')} asChild />
+      <Form.Label label={t('function-parameters.label')} asChild />
       <Form.Root
         key={selectedFunction.id}
         schema={effectSchema}

package/src/components/TriggerEditor/SpecSelector.tsx

@@ -4,12 +4,12 @@
 
 import React, { useCallback, useMemo } from 'react';
 
+import { Trigger } from '@dxos/compute';
 import { Filter, Query } from '@dxos/echo';
-import { Trigger } from '@dxos/functions';
 import { useTranslation } from '@dxos/react-ui';
 import { type FormFieldComponentProps, SelectField, useFormFieldState } from '@dxos/react-ui-form';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 export type SpecSelectorProps = FormFieldComponentProps;
 
@@ -22,20 +22,15 @@ export const SpecSelector = (props: SpecSelectorProps) => {
       const getDefaultTriggerSpec = (kind: string) => {
         switch (kind) {
           case 'timer':
-            return { kind: 'timer', cron: '' };
+            return Trigger.specTimer('');
           case 'subscription':
-            return {
-              kind: 'subscription',
-              query: {
-                ast: Query.select(Filter.nothing()).ast,
-              },
-            };
+            return Trigger.specSubscription(Query.select(Filter.nothing()));
           case 'queue':
-            return { kind: 'queue', queue: 'dxn:queue:default' };
+            return Trigger.specQueue('dxn:queue:default');
           case 'email':
-            return { kind: 'email' };
+            return Trigger.specEmail();
           case 'webhook':
-            return { kind: 'webhook' };
+            return Trigger.specWebhook();
           default:
             return undefined;
         }
@@ -52,11 +47,20 @@ export const SpecSelector = (props: SpecSelectorProps) => {
     [props.type, specProps],
   );
 
+  const kindLabels: Record<string, string> = {
+    timer: t('trigger-type.timer.label'),
+    webhook: t('trigger-type.webhook.label'),
+    websocket: t('trigger-type.websocket.label'),
+    subscription: t('trigger-type.subscription.label'),
+    email: t('trigger-type.email.label'),
+    queue: t('trigger-type.queue.label'),
+  };
+
   const options = useMemo(
     () =>
       Trigger.Kinds.map((kind) => ({
         value: kind,
-        label: t(`trigger type ${kind}`),
+        label: kindLabels[kind],
       })),
     [t],
   );

package/src/components/TriggerEditor/TriggerEditor.stories.tsx

@@ -6,19 +6,19 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 
+import { Operation, Trigger } from '@dxos/compute';
 import { Filter, Obj, Ref, Tag, Type } from '@dxos/echo';
-import { Function, Trigger } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { useQuery } from '@dxos/react-client/echo';
 import { TestSchema, useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
+import { translations as formTranslations } from '@dxos/react-ui-form/translations';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { translations as formTranslations } from '@dxos/react-ui-form';
 import { Employer, Organization, Person, Pipeline } from '@dxos/types';
 
-import { functions } from '../../testing';
-import { translations } from '../../translations';
+import { functions } from '#testing';
+import { translations } from '#translations';
 
 import { TriggerEditor, type TriggerEditorProps } from './TriggerEditor';
 
@@ -40,13 +40,13 @@ const DefaultStory = (props: Partial<TriggerEditorProps>) => {
       return;
     }
 
-    const functions = await space.db.query(Filter.type(Function.Function)).run();
-    const fn = functions.find((fn) => fn.name === 'example.com/function/forex');
+    const functions = await space.db.query(Filter.type(Operation.PersistentOperation)).run();
+    const fn = functions.find((fn) => fn.name === 'com.example.function.forex');
     invariant(fn);
     const trigger = space.db.add(
       Trigger.make({
         function: Ref.make(fn),
-        spec: { kind: 'webhook' },
+        spec: Trigger.specWebhook(),
         input: {
           from: 'USD',
           to: 'JPY',
@@ -82,7 +82,7 @@ const meta = {
     withClientProvider({
       createIdentity: true,
       createSpace: true,
-      types: [Tag.Tag, Function.Function, Trigger.Trigger, TestSchema.ContactType],
+      types: [Tag.Tag, Operation.PersistentOperation, Trigger.Trigger, TestSchema.ContactType],
       onCreateSpace: ({ space }) => {
         // Tags.
         ['Important', 'Investor', 'New'].forEach((label) => {
@@ -91,14 +91,14 @@ const meta = {
 
         // Functions.
         functions.forEach((fn) => {
-          space.db.add(Function.make(fn));
+          space.db.add(Obj.make(Operation.PersistentOperation, { ...fn, version: fn.version ?? '0.1.0' }));
         });
 
         // Objects.
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
             Obj.make(TestSchema.ContactType, {
-              name: faker.person.fullName(),
+              name: random.person.fullName(),
               identifiers: [],
             }),
           );
@@ -159,8 +159,8 @@ export const Spec: Story = {
     await expect(combobox).not.toBeDisabled();
     await expect(canvas.queryByLabelText('Method')).not.toBeInTheDocument();
 
-    // Queue — should show DXN field (the queue address). DXN is a combobox, not an input, so use getByText.
-    await selectKind(combobox, 'q');
+    // Feed — should show DXN field (the queue address). DXN is a combobox, not an input, so use getByText.
+    await selectKind(combobox, 'f');
     await expect(canvas.findByText('DXN')).resolves.toBeInTheDocument();
   },
 };

package/src/components/TriggerEditor/TriggerEditor.tsx

@@ -4,9 +4,9 @@
 
 import React, { useCallback, useMemo } from 'react';
 
+import { Operation, Script, Trigger } from '@dxos/compute';
 import { ComputeGraph } from '@dxos/conductor';
 import { DXN, type Database, Entity, Feed, Obj, type Query } from '@dxos/echo';
-import { Function, Script, Trigger } from '@dxos/functions';
 import { Filter, Ref, useQuery } from '@dxos/react-client/echo';
 import { Input } from '@dxos/react-ui';
 import { QueryForm, type QueryFormProps } from '@dxos/react-ui-components';
@@ -36,17 +36,12 @@ export type TriggerEditorProps = {
   Pick<FormRootProps<TriggerFormSchema>, 'onSave' | 'onCancel'>;
 
 export const TriggerEditor = ({ db, types, tags, readonlySpec, trigger, ...formProps }: TriggerEditorProps) => {
-  const fieldMap = useCustomInputs({
-    db,
-    types,
-    tags,
-    readonlySpec,
-  });
+  const fieldMap = useCustomInputs({ db, types, tags, readonlySpec });
 
   const handleValuesChanged = useCallback(
     (newValues: Partial<TriggerFormSchema>) => {
-      Obj.change(trigger, (t) => {
-        Object.assign(t, newValues);
+      Obj.update(trigger, (trigger) => {
+        Object.assign(trigger, newValues);
       });
     },
     [trigger],
@@ -83,7 +78,7 @@ type UseCustomInputsProps = {
 } & Pick<QueryFormProps, 'types' | 'tags'>;
 
 const useCustomInputs = ({ db, readonlySpec, types, tags }: UseCustomInputsProps): FormFieldMap => {
-  const functions = useQuery(db, Filter.type(Function.Function));
+  const functions = useQuery(db, Filter.type(Operation.PersistentOperation));
   const workflows = useQuery(db, Filter.type(ComputeGraph));
   const scripts = useQuery(db, Filter.type(Script.Script));
   const feeds = useQuery(db, Filter.type(Feed.Feed));
@@ -154,8 +149,9 @@ const getWorkflowOptions = (graphs: ComputeGraph[]) => {
   return graphs.map((graph) => ({ label: `compute-${graph.id}`, value: `dxn:echo:@:${graph.id}` }));
 };
 
-const getFunctionOptions = (scripts: Script.Script[], functions: Function.Function[]) => {
-  const getLabel = (fn: Function.Function) => scripts.find((s) => fn.source?.target?.id === s.id)?.name ?? fn.name;
+const getFunctionOptions = (scripts: Script.Script[], functions: Operation.PersistentOperation[]) => {
+  const getLabel = (fn: Operation.PersistentOperation) =>
+    scripts.find((s) => fn.source?.target?.id === s.id)?.name ?? fn.name;
   return functions.map((fn) => ({ label: getLabel(fn), value: `dxn:echo:@:${fn.id}` }));
 };
 

package/src/containers/AutomationSettings/AutomationSettings.tsx

@@ -4,24 +4,28 @@
 
 import React from 'react';
 
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { useTranslation } from '@dxos/react-ui';
 import { Settings } from '@dxos/react-ui-form';
 
+import { meta } from '#meta';
+
 import { AutomationPanel, type AutomationPanelProps } from '../../components/AutomationPanel';
-import { meta } from '../../meta';
 import { TriggersSettings } from '../TriggerSettings';
 
-export const AutomationSettings = (props: AutomationPanelProps) => {
+export type AutomationSettingsProps = AppSurface.SpaceArticleProps<Omit<AutomationPanelProps, 'space'>>;
+
+export const AutomationSettings = (props: AutomationSettingsProps) => {
   const { t } = useTranslation(meta.id);
   return (
-    <Settings.Root>
+    <Settings.Viewport>
       <Settings.Section
-        title={t('automation verbose label', { ns: meta.id })}
-        description={t('automation description', { ns: meta.id })}
+        title={t('automation-verbose.label', { ns: meta.id })}
+        description={t('automation.description', { ns: meta.id })}
       >
         <AutomationPanel {...props} />
-        <TriggersSettings db={props.space.db} />
+        <TriggersSettings space={props.space} />
       </Settings.Section>
-    </Settings.Root>
+    </Settings.Viewport>
   );
 };

package/src/containers/AutomationSettings/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { AutomationSettings } from './AutomationSettings';
-
-export default AutomationSettings;
+export { AutomationSettings as default } from './AutomationSettings';

package/src/containers/FunctionsContainer/FunctionsContainer.tsx

@@ -4,30 +4,30 @@
 
 import React from 'react';
 
-import { type Space } from '@dxos/react-client/echo';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { useTranslation } from '@dxos/react-ui';
 import { Settings } from '@dxos/react-ui-form';
 
-import { FunctionsPanel } from '../../components/FunctionsPanel';
-import { FunctionsRegistry } from '../../components/FunctionsRegistry';
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
-export const FunctionsContainer = ({ space }: { space: Space }) => {
+import { FunctionsPanel, FunctionsRegistry } from '../../components';
+
+export const FunctionsContainer = ({ space }: AppSurface.SpaceArticleProps) => {
   const { t } = useTranslation(meta.id);
   return (
-    <Settings.Root>
+    <Settings.Viewport>
       <Settings.Section
-        title={t('functions verbose label', { ns: meta.id })}
-        description={t('functions description', { ns: meta.id })}
+        title={t('functions-verbose.label', { ns: meta.id })}
+        description={t('functions.description', { ns: meta.id })}
       >
         <FunctionsPanel space={space} />
       </Settings.Section>
       <Settings.Section
-        title={t('functions registry verbose label', { ns: meta.id })}
-        description={t('functions registry description', { ns: meta.id })}
+        title={t('functions-registry-verbose.label', { ns: meta.id })}
+        description={t('functions-registry.description', { ns: meta.id })}
       >
         <FunctionsRegistry space={space} />
       </Settings.Section>
-    </Settings.Root>
+    </Settings.Viewport>
   );
 };

package/src/containers/FunctionsContainer/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { FunctionsContainer } from './FunctionsContainer';
-
-export default FunctionsContainer;
+export { FunctionsContainer as default } from './FunctionsContainer';

package/src/containers/TriggerSettings/TriggerSettings.tsx

@@ -4,23 +4,45 @@
 
 import React from 'react';
 
-import { type Database } from '@dxos/echo';
-import { Input, useTranslation } from '@dxos/react-ui';
+import { type ComputeEnvironment } from '@dxos/client-protocol';
+import { useObject } from '@dxos/echo-react';
+import { type Space } from '@dxos/react-client/echo';
+import { DropdownMenu, IconButton, useTranslation } from '@dxos/react-ui';
 import { Settings } from '@dxos/react-ui-form';
 
-import { useTriggerRuntimeControls } from '../../hooks';
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
-export const TriggersSettings = ({ db }: { db: Database.Database }) => {
-  const { state, start, stop } = useTriggerRuntimeControls(db);
-  const isRunning = state?.enabled ?? false;
+export const TriggersSettings = ({ space }: { space: Space }) => {
   const { t } = useTranslation(meta.id);
+  const [properties, changeProperties] = useObject(space.properties);
+  const selected = properties.computeEnvironment ?? 'local';
+
+  const handleUpdate = (option: ComputeEnvironment) => {
+    changeProperties((draft) => {
+      draft.computeEnvironment = option;
+    });
+  };
 
   return (
     <div className='grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
-      <Settings.ItemInput title={t('runtime label')} description={t('runtime description')}>
-        <Input.Switch classNames='justify-self-end' checked={isRunning} onCheckedChange={isRunning ? stop : start} />
-      </Settings.ItemInput>
+      <Settings.Item title={t('runtime.label')} description={t('runtime.description')}>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            <IconButton iconEnd icon='ph--caret-down--regular' size={4} label={t(`runtime.${selected}.label`)} />
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content side='bottom'>
+              <DropdownMenu.Viewport>
+                <DropdownMenu.Item onClick={() => handleUpdate('disabled')}>
+                  {t(`runtime.disabled.label`)}
+                </DropdownMenu.Item>
+                <DropdownMenu.Item onClick={() => handleUpdate('local')}>{t(`runtime.local.label`)}</DropdownMenu.Item>
+                <DropdownMenu.Item onClick={() => handleUpdate('edge')}>{t(`runtime.edge.label`)}</DropdownMenu.Item>
+              </DropdownMenu.Viewport>
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+      </Settings.Item>
     </div>
   );
 };

package/src/hooks/index.ts

@@ -2,5 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
+// TODO(wittjosiah): Factor out.
 export * from './useComputeRuntimeCallback';
 export * from './useTriggerRuntimeControls';
+export * from './useComputeRuntime';
+export * from './useComputeRuntimeService';

package/src/hooks/useComputeRuntime.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect } from 'react';
+
+import { useCapabilities } from '@dxos/app-framework/ui';
+import { SpaceId } from '@dxos/keys';
+import { log } from '@dxos/log';
+
+import { AutomationCapabilities } from '../types';
+
+/**
+ * Resolves the compute runtime for a space.
+ * Returns undefined if the AutomationPlugin is not loaded or spaceId is not provided.
+ */
+export const useComputeRuntime = (id: SpaceId | undefined): AutomationCapabilities.ComputeRuntime | undefined => {
+  const [computeRuntime] = useCapabilities(AutomationCapabilities.ComputeRuntime);
+  // One log per change of (capability availability, spaceId) so we can see when
+  // the React subscription actually observes the contributed runtime.
+  useEffect(() => {
+    log('useComputeRuntime', { hasCapability: !!computeRuntime, spaceId: id });
+  }, [!!computeRuntime, id]);
+
+  if (!computeRuntime || id === undefined) {
+    return undefined;
+  }
+
+  return computeRuntime.getRuntime(id);
+};

package/src/hooks/useComputeRuntimeCallback.ts

@@ -2,17 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import * as Cause from 'effect/Cause';
 import * as Effect from 'effect/Effect';
-import * as Exit from 'effect/Exit';
 import { type DependencyList, useCallback } from 'react';
 
-import { useCapability } from '@dxos/app-framework/ui';
 import { type Key } from '@dxos/echo';
-import { type FunctionDefinition, FunctionInvocationService, TracingService } from '@dxos/functions';
-import { log } from '@dxos/log';
 
-import { AutomationCapabilities } from '../types';
+import { AutomationCapabilities } from '#types';
+
+import { useComputeRuntime } from './useComputeRuntime';
 
 /**
  * Create an effectful function that has access to compute services
@@ -23,8 +20,7 @@ export const useComputeRuntimeCallback = <T>(
   fn: () => Effect.Effect<T, any, AutomationCapabilities.ComputeServices>,
   deps?: DependencyList,
 ): (() => Promise<T>) => {
-  const computeRuntime = useCapability(AutomationCapabilities.ComputeRuntime);
-  const runtime = id !== undefined ? computeRuntime.getRuntime(id) : undefined;
+  const runtime = useComputeRuntime(id);
 
   return useCallback(() => {
     if (!runtime) {
@@ -34,34 +30,3 @@ export const useComputeRuntimeCallback = <T>(
     return runtime.runPromise(fn());
   }, [runtime, ...(deps ?? [])]);
 };
-
-// TODO(wittjosiah): Function invoking should automatically be traced (DX-647).
-export const invokeFunctionWithTracing = <I, O>(functionDef: FunctionDefinition<I, O>, inputData: I) =>
-  Effect.gen(function* () {
-    const tracer = yield* TracingService;
-    const trace = yield* tracer.traceInvocationStart({
-      target: undefined,
-      payload: {
-        data: {},
-      },
-    });
-
-    // Invoke the function.
-    const result = yield* FunctionInvocationService.invokeFunction(functionDef, inputData).pipe(
-      Effect.provide(trace.invocationTraceQueue ? TracingService.layerInvocation(trace) : TracingService.layerNoop),
-      Effect.exit,
-    );
-
-    if (Exit.isFailure(result)) {
-      const error = Cause.prettyErrors(result.cause)[0];
-      log.error(error.message, error.cause ?? error.stack);
-    }
-
-    yield* tracer.traceInvocationEnd({
-      trace,
-      // TODO(dmaretskyi): Might miss errors.
-      exception: Exit.isFailure(result) ? Cause.prettyErrors(result.cause)[0] : undefined,
-    });
-
-    return result;
-  });

package/src/hooks/useComputeRuntimeService.ts

@@ -0,0 +1,64 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Context from 'effect/Context';
+import * as Effect from 'effect/Effect';
+import * as Exit from 'effect/Exit';
+import { useEffect, useState } from 'react';
+
+import { SpaceId } from '@dxos/keys';
+import { log } from '@dxos/log';
+
+import { useComputeRuntime } from './useComputeRuntime';
+
+type ResolvedService<T extends Context.Tag<any, any>> = Context.Tag.Service<T> | undefined;
+
+/**
+ * Resolves a service from the compute runtime for a given space.
+ *
+ * NOTE: Previously implemented via `use(useMemo(() => runtime.runPromiseExit(...)))`.
+ * React's `use()` is weird and unreliable in production builds — the Suspense
+ * boundary can stay pending indefinitely without the promise ever resolving
+ * from React's perspective (the runtime is built lazily on first invocation
+ * and one of its `acquire` steps can block). This `useState` + `useEffect`
+ * flavour avoids suspension entirely: the hook returns `undefined` while the
+ * service is being acquired or if acquisition fails / times out.
+ */
+export const useComputeRuntimeService = <T extends Context.Tag<any, any>>(
+  tag: T,
+  spaceId?: SpaceId,
+): ResolvedService<T> => {
+  const runtime = useComputeRuntime(spaceId);
+  const [service, setService] = useState<ResolvedService<T>>(undefined);
+
+  useEffect(() => {
+    setService(undefined);
+    if (!runtime) {
+      return;
+    }
+    let cancelled = false;
+    void (async () => {
+      try {
+        const exit = await runtime.runPromiseExit(tag.pipe(Effect.timeout('30 seconds')));
+        if (cancelled) {
+          return;
+        }
+        if (Exit.isSuccess(exit)) {
+          setService(exit.value);
+        } else {
+          log.warn('useComputeRuntimeService: failed to acquire service', { cause: exit.cause });
+        }
+      } catch (error) {
+        if (!cancelled) {
+          log.catch(error);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [runtime, tag]);
+
+  return service;
+};