@dxos/plugin-automation 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

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

@@ -2,30 +2,85 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { Rx } from '@effect-rx/rx-react';
+import { Option, pipe } from 'effect';
+
+import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
 import { isInstanceOf } from '@dxos/echo-schema';
 import { ScriptType } from '@dxos/functions';
 import { PLANK_COMPANION_TYPE, ATTENDABLE_PATH_SEPARATOR } from '@dxos/plugin-deck/types';
-import { createExtension, type Node } from '@dxos/plugin-graph';
-import { SCRIPT_PLUGIN } from '@dxos/plugin-script/types';
+import { createExtension } from '@dxos/plugin-graph';
+import { SPACE_PLUGIN } from '@dxos/plugin-space';
 
 import { meta } from '../meta';
 
-export default (context: PluginsContext) =>
+export default (context: PluginContext) =>
   contributes(Capabilities.AppGraphBuilder, [
     createExtension({
-      id: `${SCRIPT_PLUGIN}/script-companion`,
-      filter: (node): node is Node<ScriptType> => isInstanceOf(ScriptType, node.data),
-      connector: ({ node }) => [
-        {
-          id: [node.id, 'automation'].join(ATTENDABLE_PATH_SEPARATOR),
-          type: PLANK_COMPANION_TYPE,
-          data: 'automation',
-          properties: {
-            label: ['script automation label', { ns: meta.id }],
-            icon: 'ph--lightning--regular',
-          },
-        },
-      ],
+      id: `${meta.id}/space-settings-automation`,
+      connector: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => (node.type === `${SPACE_PLUGIN}/settings` ? Option.some(node) : Option.none())),
+            Option.map((node) => [
+              {
+                id: `automation-${node.id}`,
+                type: `${meta.id}/space-settings-automation`,
+                data: `${meta.id}/space-settings-automation`,
+                properties: {
+                  label: ['automation panel label', { ns: meta.id }],
+                  icon: 'ph--lightning--regular',
+                },
+              },
+            ]),
+            Option.getOrElse(() => []),
+          ),
+        ),
+    }),
+    createExtension({
+      id: `${meta.id}/space-settings-functions`,
+      connector: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => (node.type === `${SPACE_PLUGIN}/settings` ? Option.some(node) : Option.none())),
+            Option.map((node) => [
+              {
+                id: `functions-${node.id}`,
+                type: `${meta.id}/space-settings-functions`,
+                data: `${meta.id}/space-settings-functions`,
+                properties: {
+                  label: ['functions panel label', { ns: meta.id }],
+                  icon: 'ph--function--regular',
+                },
+              },
+            ]),
+            Option.getOrElse(() => []),
+          ),
+        ),
+    }),
+    createExtension({
+      id: `${meta.id}/script-companion`,
+      connector: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => (isInstanceOf(ScriptType, node.data) ? Option.some(node) : Option.none())),
+            Option.map((node) => [
+              {
+                id: [node.id, 'automation'].join(ATTENDABLE_PATH_SEPARATOR),
+                type: PLANK_COMPANION_TYPE,
+                data: 'automation',
+                properties: {
+                  label: ['script automation label', { ns: meta.id }],
+                  icon: 'ph--lightning--regular',
+                  disposition: 'hidden',
+                },
+              },
+            ]),
+            Option.getOrElse(() => []),
+          ),
+        ),
     }),
   ]);

package/src/capabilities/index.ts

@@ -5,4 +5,5 @@
 import { lazy } from '@dxos/app-framework';
 
 export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
+export const IntentResolver = lazy(() => import('./intent-resolver'));
 export const ReactSurface = lazy(() => import('./react-surface'));

package/src/capabilities/intent-resolver.ts

@@ -0,0 +1,73 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import {
+  contributes,
+  Capabilities,
+  createResolver,
+  type PluginContext,
+  createIntent,
+  LayoutAction,
+} from '@dxos/app-framework';
+import { Ref } from '@dxos/echo';
+import { FunctionTrigger, FunctionType, ScriptType, TriggerKind } from '@dxos/functions';
+import { type DXN } from '@dxos/keys';
+import { live } from '@dxos/live-object';
+import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/plugin-deck/types';
+import { SpaceAction } from '@dxos/plugin-space/types';
+import { Filter } from '@dxos/react-client/echo';
+
+import { AutomationAction } from '../types';
+
+export default (context: PluginContext) =>
+  contributes(Capabilities.IntentResolver, [
+    createResolver({
+      intent: AutomationAction.CreateTriggerFromTemplate,
+      resolve: async ({ space, template, enabled = false, scriptName, input }) => {
+        const trigger = live(FunctionTrigger, { enabled, input });
+
+        // TODO(wittjosiah): Factor out function lookup by script name?
+        if (scriptName) {
+          const {
+            objects: [script],
+          } = await space.db.query(Filter.type(ScriptType, { name: scriptName })).run();
+          if (script) {
+            const {
+              objects: [fn],
+            } = await space.db.query(Filter.type(FunctionType, { source: Ref.make(script) })).run();
+            if (fn) {
+              trigger.function = Ref.make(fn);
+            }
+          }
+        }
+
+        switch (template.type) {
+          case 'timer': {
+            trigger.spec = { kind: TriggerKind.Timer, cron: template.cron };
+            break;
+          }
+          case 'queue': {
+            trigger.spec = { kind: TriggerKind.Queue, queue: (template.queueDXN as DXN).toString() };
+            break;
+          }
+          default: {
+            break;
+          }
+        }
+
+        return {
+          intents: [
+            createIntent(SpaceAction.AddObject, { object: trigger, target: space }),
+            createIntent(LayoutAction.Open, {
+              part: 'main',
+              subject: [`automation-settings${ATTENDABLE_PATH_SEPARATOR}${space.id}`],
+              options: {
+                workspace: space.id,
+              },
+            }),
+          ],
+        };
+      },
+    }),
+  ]);

package/src/capabilities/react-surface.tsx

@@ -4,22 +4,46 @@
 
 import React from 'react';
 
-import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { Capabilities, contributes, createSurface, useLayout } from '@dxos/app-framework';
 import { isInstanceOf } from '@dxos/echo-schema';
-import { ScriptType } from '@dxos/functions/types';
-import { getSpace, isSpace, type Space } from '@dxos/react-client/echo';
+import { ScriptType } from '@dxos/functions';
+import { getSpace, parseId, useSpace } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { AutomationPanel } from '../components';
+import { AutomationContainer, AutomationPanel, FunctionsContainer } from '../components';
 import { meta } from '../meta';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: `${meta.id}/automation`,
-      role: 'space-settings--automation',
-      filter: (data): data is { subject: Space } => isSpace(data.subject),
-      component: ({ data }) => <AutomationPanel space={data.subject} />,
+      id: `${meta.id}/space-settings-automation`,
+      role: 'article',
+      filter: (data): data is { subject: string } => data.subject === `${meta.id}/space-settings-automation`,
+      component: () => {
+        const layout = useLayout();
+        const { spaceId } = parseId(layout.workspace);
+        const space = useSpace(spaceId);
+        if (!space || !spaceId) {
+          return null;
+        }
+
+        return <AutomationContainer space={space} />;
+      },
+    }),
+    createSurface({
+      id: `${meta.id}/space-settings-functions`,
+      role: 'article',
+      filter: (data): data is { subject: string } => data.subject === `${meta.id}/space-settings-functions`,
+      component: () => {
+        const layout = useLayout();
+        const { spaceId } = parseId(layout.workspace);
+        const space = useSpace(spaceId);
+        if (!space || !spaceId) {
+          return null;
+        }
+
+        return <FunctionsContainer space={space} />;
+      },
     }),
     createSurface({
       id: `${meta.id}/companion/automation`,

package/src/components/AutomationContainer.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type Space } from '@dxos/react-client/echo';
+import { useTranslation } from '@dxos/react-ui';
+import { ControlSection, ControlPage } from '@dxos/react-ui-form';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { AutomationPanel } from './AutomationPanel';
+import { AUTOMATION_PLUGIN } from '../meta';
+
+export const AutomationContainer = ({ space }: { space: Space }) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  return (
+    <StackItem.Content classNames='block overflow-y-auto'>
+      <ControlPage>
+        <ControlSection
+          title={t('automation verbose label', { ns: AUTOMATION_PLUGIN })}
+          description={t('automation description', { ns: AUTOMATION_PLUGIN })}
+        >
+          <AutomationPanel space={space} />
+        </ControlSection>
+      </ControlPage>
+    </StackItem.Content>
+  );
+};
+
+export default AutomationContainer;

package/src/components/AutomationPanel/AutomationPanel.stories.tsx

@@ -7,8 +7,8 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React from 'react';
 
-import { FunctionType, FunctionTrigger } from '@dxos/functions/types';
-import { create, useSpaces } from '@dxos/react-client/echo';
+import { FunctionType, FunctionTrigger } from '@dxos/functions';
+import { live, useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -21,7 +21,7 @@ const DefaultStory = () => {
   const space = spaces[1];
 
   return (
-    <div role='none' className='flex w-[350px] border border-separator overflow-hidden'>
+    <div className='w-96'>
       <AutomationPanel space={space} />
     </div>
   );
@@ -38,14 +38,15 @@ const meta: Meta = {
       types: [FunctionType, FunctionTrigger],
       onSpaceCreated: ({ space }) => {
         for (const fn of functions) {
-          space.db.add(create(FunctionType, fn));
+          space.db.add(live(FunctionType, fn));
         }
       },
     }),
-    withLayout({ fullscreen: true, tooltips: true, classNames: 'flex justify-center m-2' }),
+    withLayout(),
     withTheme,
   ],
   parameters: {
+    layout: 'centered',
     translations,
   },
 };

package/src/components/AutomationPanel/AutomationPanel.tsx

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema } from 'effect';
 import React, { useState } from 'react';
 
-import { S } from '@dxos/echo-schema';
 import {
   FunctionType,
   FunctionTrigger,
@@ -12,13 +12,12 @@ import {
   TriggerKind,
   type FunctionTriggerType,
   ScriptType,
-} from '@dxos/functions/types';
+} from '@dxos/functions';
 import { type Client, useClient } from '@dxos/react-client';
-import { create, Filter, useQuery, type Space, type ReactiveObject, getSpace } from '@dxos/react-client/echo';
+import { live, Filter, useQuery, type Space, type Live, getSpace } from '@dxos/react-client/echo';
 import { Clipboard, IconButton, Input, Separator, useTranslation } from '@dxos/react-ui';
 import { ControlItem, controlItemClasses } from '@dxos/react-ui-form';
 import { List } from '@dxos/react-ui-list';
-import { StackItem } from '@dxos/react-ui-stack';
 import { ghostHover, mx } from '@dxos/react-ui-theme';
 
 import { AUTOMATION_PLUGIN } from '../../meta';
@@ -28,18 +27,20 @@ const grid = 'grid grid-cols-[40px_1fr_32px] min-bs-[2.5rem]';
 
 export type AutomationPanelProps = {
   space: Space;
-  object?: ReactiveObject<any>;
+  object?: Live<any>;
+  initialTrigger?: FunctionTriggerType;
+  onDone?: () => void;
 };
 
 // TODO(burdon): Factor out common layout with ViewEditor.
-export const AutomationPanel = ({ space, object }: AutomationPanelProps) => {
+export const AutomationPanel = ({ space, object, initialTrigger, onDone }: AutomationPanelProps) => {
   const { t } = useTranslation(AUTOMATION_PLUGIN);
   const client = useClient();
-  const triggers = useQuery(space, Filter.schema(FunctionTrigger));
-  const functions = useQuery(space, Filter.schema(FunctionType));
-  const scripts = useQuery(space, Filter.schema(ScriptType));
+  const triggers = useQuery(space, Filter.type(FunctionTrigger));
+  const functions = useQuery(space, Filter.type(FunctionType));
+  const scripts = useQuery(space, Filter.type(ScriptType));
 
-  const [trigger, setTrigger] = useState<FunctionTriggerType>();
+  const [trigger, setTrigger] = useState<FunctionTriggerType | undefined>(initialTrigger);
   const [selected, setSelected] = useState<FunctionTrigger>();
 
   const handleSelect = (trigger: FunctionTrigger) => {
@@ -49,7 +50,7 @@ export const AutomationPanel = ({ space, object }: AutomationPanelProps) => {
   };
 
   const handleAdd = () => {
-    setTrigger(create(FunctionTriggerSchema, {}));
+    setTrigger(live(FunctionTriggerSchema, {}));
     setSelected(undefined);
   };
 
@@ -63,85 +64,87 @@ export const AutomationPanel = ({ space, object }: AutomationPanelProps) => {
     if (selected) {
       Object.assign(selected, trigger);
     } else {
-      space.db.add(create(FunctionTrigger, trigger));
+      space.db.add(live(FunctionTrigger, trigger));
     }
 
     setTrigger(undefined);
     setSelected(undefined);
+    onDone?.();
   };
 
   const handleCancel: TriggerEditorProps['onCancel'] = () => {
     setTrigger(undefined);
+    onDone?.();
   };
 
+  if (trigger) {
+    return (
+      <ControlItem title={t('trigger editor title')}>
+        <TriggerEditor space={space} trigger={trigger} onSave={handleSave} onCancel={handleCancel} />
+      </ControlItem>
+    );
+  }
+
   return (
-    <Clipboard.Provider>
-      <StackItem.Content classNames='block overflow-y-auto'>
-        <div className='flex flex-col w-full'>
-          {trigger ? (
-            <ControlItem title={t('trigger editor title')}>
-              <TriggerEditor space={space} trigger={trigger} onSave={handleSave} onCancel={handleCancel} />
-            </ControlItem>
-          ) : (
-            <div role='none' className={controlItemClasses}>
-              <List.Root<FunctionTrigger> items={triggers} isItem={S.is(FunctionTrigger)} getId={(field) => field.id}>
-                {({ items: triggers }) => (
-                  <div role='list' className='flex flex-col w-full'>
-                    {triggers?.map((trigger) => {
-                      const copyAction = getCopyAction(client, trigger);
-                      return (
-                        <List.Item<FunctionTrigger>
-                          key={trigger.id}
-                          item={trigger}
-                          classNames={mx(grid, ghostHover, 'items-center', 'px-2')}
+    <div className='flex flex-col w-full'>
+      <div role='none' className={controlItemClasses}>
+        {triggers.length > 0 && (
+          <List.Root<FunctionTrigger> items={triggers} isItem={Schema.is(FunctionTrigger)} getId={(field) => field.id}>
+            {({ items: triggers }) => (
+              <div role='list' className='flex flex-col w-full'>
+                {triggers?.map((trigger) => {
+                  const copyAction = getCopyAction(client, trigger);
+                  return (
+                    <List.Item<FunctionTrigger>
+                      key={trigger.id}
+                      item={trigger}
+                      classNames={mx(grid, ghostHover, 'items-center', 'px-2')}
+                    >
+                      <Input.Root>
+                        <Input.Switch
+                          checked={trigger.enabled}
+                          onCheckedChange={(checked) => (trigger.enabled = checked)}
+                        />
+                      </Input.Root>
+
+                      <div className={'flex'}>
+                        <List.ItemTitle
+                          classNames='px-1 cursor-pointer w-0 shrink truncate'
+                          onClick={() => handleSelect(trigger)}
                         >
-                          <Input.Root>
-                            <Input.Switch
-                              checked={trigger.enabled}
-                              onCheckedChange={(checked) => (trigger.enabled = checked)}
-                            />
-                          </Input.Root>
-
-                          <div className={'flex'}>
-                            <List.ItemTitle
-                              classNames='px-1 cursor-pointer w-0 shrink truncate'
-                              onClick={() => handleSelect(trigger)}
-                            >
-                              {getFunctionName(scripts, functions, trigger) ?? '∅'}
-                            </List.ItemTitle>
-
-                            {/* TODO: a better way to expose copy action */}
-                            {copyAction && (
-                              <Clipboard.IconButton
-                                label={t(copyAction.translationKey)}
-                                value={copyAction.contentProvider()}
-                              />
-                            )}
-                          </div>
-
-                          <List.ItemDeleteButton onClick={() => handleDelete(trigger)} />
-                        </List.Item>
-                      );
-                    })}
-                  </div>
-                )}
-              </List.Root>
-              {triggers.length > 0 && <Separator classNames='mlb-4' />}
-              <IconButton icon='ph--plus--regular' label={t('new trigger label')} onClick={handleAdd} />
-            </div>
-          )}
-        </div>
-      </StackItem.Content>
-    </Clipboard.Provider>
+                          {getFunctionName(scripts, functions, trigger) ?? '∅'}
+                        </List.ItemTitle>
+
+                        {/* TODO: a better way to expose copy action */}
+                        {copyAction && (
+                          <Clipboard.IconButton
+                            label={t(copyAction.translationKey)}
+                            value={copyAction.contentProvider()}
+                          />
+                        )}
+                      </div>
+
+                      <List.ItemDeleteButton onClick={() => handleDelete(trigger)} />
+                    </List.Item>
+                  );
+                })}
+              </div>
+            )}
+          </List.Root>
+        )}
+        {triggers.length > 0 && <Separator classNames='mlb-4' />}
+        <IconButton icon='ph--plus--regular' label={t('new trigger label')} onClick={handleAdd} />
+      </div>
+    </div>
   );
 };
 
 const getCopyAction = (client: Client, trigger: FunctionTrigger | undefined) => {
-  if (trigger?.spec?.type === TriggerKind.Email) {
+  if (trigger?.spec?.kind === TriggerKind.Email) {
     return { translationKey: 'trigger copy email', contentProvider: () => `${getSpace(trigger)!.id}@dxos.network` };
   }
 
-  if (trigger?.spec?.type === TriggerKind.Webhook) {
+  if (trigger?.spec?.kind === TriggerKind.Webhook) {
     return { translationKey: 'trigger copy url', contentProvider: () => getWebhookUrl(client, trigger) };
   }
 
@@ -159,10 +162,11 @@ const getWebhookUrl = (client: Client, trigger: FunctionTrigger) => {
 const getFunctionName = (scripts: ScriptType[], functions: FunctionType[], trigger: FunctionTriggerType) => {
   // TODO(wittjosiah): Truncation should be done in the UI.
   //   Warning that the List component is currently a can of worms.
-  const shortId = trigger.function && `${trigger.function?.slice(0, 16)}…`;
-  const functionObject = functions.find((fn) => `dxn:worker:${fn.name}` === trigger.function);
+  const shortId = trigger.function && `${trigger.function.dxn.toString().slice(0, 16)}…`;
+  const functionObject = functions.find((fn) => fn === trigger.function?.target);
   if (!functionObject) {
     return shortId;
   }
+
   return scripts.find((s) => functionObject.source?.target?.id === s.id)?.name ?? shortId;
 };

package/src/components/AutomationPanel/index.ts

@@ -4,4 +4,6 @@
 
 import { AutomationPanel } from './AutomationPanel';
 
+export * from './AutomationPanel';
+
 export default AutomationPanel;

package/src/components/FunctionsContainer.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type Space } from '@dxos/react-client/echo';
+import { useTranslation } from '@dxos/react-ui';
+import { ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { FunctionsPanel } from './FunctionsPanel';
+import { AUTOMATION_PLUGIN } from '../meta';
+
+export const FunctionsContainer = ({ space }: { space: Space }) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  return (
+    <StackItem.Content classNames='block overflow-y-auto'>
+      <ControlPage>
+        <ControlSection
+          title={t('functions verbose label', { ns: AUTOMATION_PLUGIN })}
+          description={t('functions description', { ns: AUTOMATION_PLUGIN })}
+        >
+          <FunctionsPanel space={space} />
+        </ControlSection>
+      </ControlPage>
+    </StackItem.Content>
+  );
+};
+
+export default FunctionsContainer;

package/src/components/FunctionsPanel/FunctionsPanel.tsx

@@ -0,0 +1,95 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Schema } from 'effect';
+import React, { useCallback, useMemo } from 'react';
+
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { FunctionType, ScriptType } from '@dxos/functions';
+import { Filter, fullyQualifiedId, useQuery, type Space } from '@dxos/react-client/echo';
+import { Button, useTranslation } from '@dxos/react-ui';
+import { controlItemClasses } from '@dxos/react-ui-form';
+import { List } from '@dxos/react-ui-list';
+import { ghostHover, mx } from '@dxos/react-ui-theme';
+
+import { AUTOMATION_PLUGIN } from '../../meta';
+
+const grid = 'grid grid-cols-[1fr_auto] min-bs-[2.5rem]';
+
+export type FunctionsPanelProps = {
+  space: Space;
+};
+
+export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const functions = useQuery(space, Filter.type(FunctionType));
+  const scripts = useQuery(space, Filter.type(ScriptType));
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+
+  const functionToScriptMap = useMemo(
+    () =>
+      functions.reduce(
+        (map, func) => {
+          const scriptId = func.source?.target?.id;
+          if (scriptId) {
+            const script = scripts.find((s) => s.id === scriptId);
+            if (script) {
+              map[func.id] = script;
+            }
+          }
+          return map;
+        },
+        {} as Record<string, ScriptType>,
+      ),
+    [functions, scripts],
+  );
+
+  const getScriptName = useCallback(
+    (func: FunctionType) => {
+      const script = functionToScriptMap[func.id];
+      return script?.name;
+    },
+    [functionToScriptMap],
+  );
+
+  const handleGoToScript = useCallback(
+    (func: FunctionType) => {
+      const script = functionToScriptMap[func.id];
+      if (script) {
+        void dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [fullyQualifiedId(script)] }));
+      }
+    },
+    [functionToScriptMap, dispatch],
+  );
+
+  return (
+    <div role='none' className={mx(controlItemClasses)}>
+      <List.Root<FunctionType> items={functions} isItem={Schema.is(FunctionType)} getId={(func) => func.id}>
+        {({ items }) => (
+          <div role='list' className='flex flex-col w-full'>
+            {items?.map((func) => (
+              <List.Item<FunctionType>
+                key={func.id}
+                item={func}
+                classNames={mx(grid, ghostHover, 'items-center', 'pli-2', 'min-bs-[3rem]')}
+              >
+                <div className='flex flex-col truncate'>
+                  <List.ItemTitle classNames='truncate'>{func.name}</List.ItemTitle>
+                  {getScriptName(func) && (
+                    <div className='text-xs text-description truncate'>{getScriptName(func)}</div>
+                  )}
+                </div>
+                {functionToScriptMap[func.id] && (
+                  <Button onClick={() => handleGoToScript(func)}>{t('go to function source button label')}</Button>
+                )}
+              </List.Item>
+            ))}
+          </div>
+        )}
+      </List.Root>
+
+      {functions.length === 0 && <div className='text-center plb-4 text-gray-500'>{t('no functions found')}</div>}
+    </div>
+  );
+};