@dxos/plugin-script 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.13.0

package/src/components/TestPanel/TestPanel.tsx

@@ -5,9 +5,17 @@
 import React, { forwardRef, useRef, useState } from 'react';
 
 import { log } from '@dxos/log';
-import { Avatar, Icon, Input, ScrollArea, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
-import { composable, composableProps } from '@dxos/react-ui';
 import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import * as Avatar from '@dxos/react-ui/Avatar';
+import * as Button from '@dxos/react-ui/Button';
+import * as Field from '@dxos/react-ui/Field';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Icon from '@dxos/react-ui/Icon';
+import * as Input from '@dxos/react-ui/Input';
+import * as Layout from '@dxos/react-ui/Layout';
+import * as ScrollArea from '@dxos/react-ui/ScrollArea';
+import * as Toolbar from '@dxos/react-ui/Toolbar';
+import * as Util from '@dxos/react-ui/Util';
 import { mx } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
@@ -24,14 +32,14 @@ type Message = {
   error?: Error;
 };
 
-export type TestPanelProps = ThemedClassName<{
+export type TestPanelProps = Util.ThemedClassName<{
   onInvoke?: (input: unknown) => Promise<unknown>;
 }>;
 
 // TODO(burdon): Need persistent history (currently lost when switching tabs).
-export const TestPanel = composable<HTMLDivElement, TestPanelProps>(
+export const TestPanel = Util.composable<HTMLDivElement, TestPanelProps>(
   ({ classNames, onInvoke, ...props }, forwardedRef) => {
-    const { t } = useTranslation(meta.profile.key);
+    const { t } = Hooks.useTranslation(meta.profile.key);
 
     const inputRef = useRef<HTMLInputElement>(null);
     const [input, setInput] = useState('');
@@ -108,15 +116,15 @@ export const TestPanel = composable<HTMLDivElement, TestPanelProps>(
 
     return (
       <div
-        {...composableProps(props, { classNames: ['flex flex-col h-full overflow-hidden', classNames] })}
+        {...Util.composableProps(props, { classNames: ['flex flex-col h-full overflow-hidden', classNames] })}
         ref={forwardedRef}
       >
         {/* TODO(burdon): Replace with Thread. */}
         <MessageThread ref={scrollerRef} state={state} history={history} />
         {/* TODO(burdon): Replace with Form based on the function's input schema. */}
         <Toolbar.Root>
-          <Input.Root>
-            <Input.TextInput
+          <Field.Root>
+            <Input.Root
               ref={inputRef}
               autoFocus
               placeholder={t('function-request.placeholder')}
@@ -124,9 +132,9 @@ export const TestPanel = composable<HTMLDivElement, TestPanelProps>(
               onChange={(ev) => setInput(ev.target.value)}
               onKeyDown={(ev) => ev.key === 'Enter' && handleRequest(input)}
             />
-          </Input.Root>
-          <Toolbar.IconButton icon='ph--play--regular' label='Execute' iconOnly onClick={() => handleRequest(input)} />
-          <Toolbar.IconButton icon='ph--trash--regular' label='Clear' iconOnly onClick={handleClear} />
+          </Field.Root>
+          <Button.Root icon='ph--play--regular' label='Execute' iconOnly onClick={() => handleRequest(input)} />
+          <Button.Root icon='ph--trash--regular' label='Clear' iconOnly onClick={handleClear} />
         </Toolbar.Root>
       </div>
     );
@@ -140,26 +148,28 @@ type MessageThreadProps = {
   history: Message[];
 };
 
+const MESSAGE_COLS = ['var(--dx-rail-item)', 'fill', 'var(--dx-rail-item)'] as const;
+
 const MessageThread = forwardRef<HTMLDivElement, MessageThreadProps>(
   ({ state, history }: MessageThreadProps, forwardedRef) => {
     return (
       <ScrollArea.Root orientation='vertical' classNames='h-full' ref={forwardedRef}>
         <ScrollArea.Viewport classNames='gap-6 p-2'>
           {history.map((message, i) => (
-            <div key={i} className='grid grid-cols-[var(--dx-rail-item)_1fr_var(--dx-rail-item)]'>
+            <Layout.Grid key={i} cols={MESSAGE_COLS}>
               <div className='p-1'>{message.type === 'response' && <RobotAvatar />}</div>
               <div className='overflow-auto'>
                 <MessageItem message={message} />
               </div>
-            </div>
+            </Layout.Grid>
           ))}
 
           {state === 'pending' && (
-            <div className='grid grid-cols-[var(--dx-rail-item)_1fr_var(--dx-rail-item)]'>
+            <Layout.Grid cols={MESSAGE_COLS}>
               <div className='p-1'>
-                <Icon icon='ph--spinner--regular' size={6} classNames='animate-spin' />
+                <Icon.Icon icon='ph--spinner--regular' size='xl' spin />
               </div>
-            </div>
+            </Layout.Grid>
           )}
         </ScrollArea.Viewport>
       </ScrollArea.Root>
@@ -167,9 +177,9 @@ const MessageThread = forwardRef<HTMLDivElement, MessageThreadProps>(
   },
 );
 
-const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message }>) => {
+const MessageItem = ({ classNames, message }: Util.ThemedClassName<{ message: Message }>) => {
   const { type, text, data, error } = message;
-  const wrapper = 'p-1 px-2 rounded-md bg-hover-surface overflow-auto';
+  const wrapper = 'p-1 px-2 rounded-md bg-hover-surface';
   return (
     <div className={mx('flex', type === 'request' ? 'ml-[1rem] justify-end' : 'mr-[1rem]', classNames)}>
       {error && <div className={mx(wrapper, 'whitespace-pre text-error-text')}>{String(error)}</div>}
@@ -185,8 +195,4 @@ const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message
   );
 };
 
-const RobotAvatar = () => (
-  <Avatar.Root>
-    <Avatar.Content size={6} variant='circle' icon='ph--drone--regular' />
-  </Avatar.Root>
-);
+const RobotAvatar = () => <Avatar.Root size='sm' variant='circle' icon='ph--drone--regular' />;

package/src/components/TestPanel/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './TestPanel';
+export * from './TestPanel.tsx';

package/src/components/TypescriptEditor/TypescriptEditor.stories.tsx

@@ -7,13 +7,15 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import { Doc } from '@dxos/echo-doc';
 import { createObject } from '@dxos/react-client/echo';
-import { Panel, Toolbar } from '@dxos/react-ui';
 import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import * as Button from '@dxos/react-ui/Button';
+import * as Panel from '@dxos/react-ui/Panel';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import * as Toolbar from '@dxos/react-ui/Toolbar';
 import { createDataExtensions } from '@dxos/ui-editor';
 import { trim } from '@dxos/util';
 
-import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
+import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor.tsx';
 
 const SCRIPT = trim`
   x * 2
@@ -66,17 +68,17 @@ const DefaultStory = (props: TypescriptEditorProps) => {
 
   return (
     <Panel.Root>
-      <Panel.Toolbar asChild>
+      <Panel.Header>
         <Toolbar.Root>
-          <Toolbar.Button onClick={handleRun}>Run</Toolbar.Button>
+          <Button.Root onClick={handleRun}>Run</Button.Root>
         </Toolbar.Root>
-      </Panel.Toolbar>
-      <Panel.Content>
+      </Panel.Header>
+      <Panel.Body>
         <div className='grid grid-rows-[1fr_min-content] h-full overflow-hidden text-sm'>
           <TypescriptEditor {...props} initialValue={object.content} extensions={extensions} />
-          <JsonHighlighter data={result} classNames='shrink-0 p-2 border-y border-subdued-separator' />
+          <JsonHighlighter data={result} classNames='shrink-0 p-2 border-y border-separator-subtle' />
         </div>
-      </Panel.Content>
+      </Panel.Body>
     </Panel.Root>
   );
 };

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -9,15 +9,15 @@ import { lintKeymap } from '@codemirror/lint';
 import { Prec } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
-import { composeRefs } from '@radix-ui/react-compose-refs';
 import { type VirtualTypeScriptEnvironment } from '@typescript/vfs';
 import { continueKeymap } from '@valtown/codemirror-continue';
 import { type HoverInfo, tsAutocomplete, tsFacet, tsHover, tsLinter, tsSync } from '@valtown/codemirror-ts';
 import React from 'react';
 
-import { type ThemedClassName, type ThemeMode, useThemeContext } from '@dxos/react-ui';
-import { composable, composableProps } from '@dxos/react-ui';
+import { composeRefs } from '@dxos/react-hooks';
 import { type UseTextEditorProps, useTextEditor } from '@dxos/react-ui-editor';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Util from '@dxos/react-ui/Util';
 import { Domino } from '@dxos/ui';
 import {
   type BasicExtensionsOptions,
@@ -27,9 +27,10 @@ import {
   defaultStyles,
 } from '@dxos/ui-editor';
 import { type EditorInputMode } from '@dxos/ui-editor/types';
+import { type ThemeMode } from '@dxos/ui-types';
 import { isNonNullable } from '@dxos/util';
 
-export type TypescriptEditorProps = ThemedClassName<
+export type TypescriptEditorProps = Util.ThemedClassName<
   {
     id: string;
     role?: string;
@@ -40,7 +41,7 @@ export type TypescriptEditorProps = ThemedClassName<
   } & Pick<UseTextEditorProps, 'initialValue' | 'extensions' | 'scrollTo' | 'selection'>
 >;
 
-export const TypescriptEditor = composable<HTMLDivElement, TypescriptEditorProps>(
+export const TypescriptEditor = Util.composable<HTMLDivElement, TypescriptEditorProps>(
   (
     {
       classNames,
@@ -57,7 +58,7 @@ export const TypescriptEditor = composable<HTMLDivElement, TypescriptEditorProps
     },
     forwardedRef,
   ) => {
-    const { themeMode } = useThemeContext();
+    const themeMode = Hooks.useThemeMode();
     const { parentRef, focusAttributes } = useTextEditor(
       () => ({
         id,
@@ -104,7 +105,10 @@ export const TypescriptEditor = composable<HTMLDivElement, TypescriptEditorProps
     );
 
     return (
-      <div {...composableProps(props, { classNames, ...focusAttributes })} ref={composeRefs(parentRef, forwardedRef)} />
+      <div
+        {...Util.composableProps(props, { classNames, ...focusAttributes })}
+        ref={composeRefs(parentRef, forwardedRef)}
+      />
     );
   },
 );

package/src/components/TypescriptEditor/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './TypescriptEditor';
+export * from './TypescriptEditor.tsx';

package/src/components/index.ts

@@ -2,8 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './NotebookStack';
-export * from './QueryEditor';
-export * from './ScriptToolbar';
-export * from './TestPanel';
-export * from './TypescriptEditor';
+export * from './NotebookStack/index.ts';
+export * from './ScriptToolbar/index.ts';
+export * from './TestPanel/index.ts';
+export * from './TypescriptEditor/index.ts';

package/src/containers/DeploymentDialog/DeploymentDialog.stories.tsx

@@ -5,17 +5,17 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { ProcessManagerPlugin } from '@dxos/app-framework';
+import * as ProcessManagerPlugin from '@dxos/app-framework/ProcessManagerPlugin';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj } from '@dxos/echo';
 import { AccessToken } from '@dxos/link';
 import { ClientPlugin } from '@dxos/plugin-client/testing';
-import { Dialog } from '@dxos/react-ui';
+import * as Dialog from '@dxos/react-ui/Dialog';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '#translations';
 
-import { DeploymentDialog } from './DeploymentDialog';
+import { DeploymentDialog } from './DeploymentDialog.tsx';
 
 const DeploymentDialogStory = () => {
   const accessToken = useMemo(
@@ -36,9 +36,7 @@ const DeploymentDialogStory = () => {
   );
   return (
     <Dialog.Root defaultOpen={true}>
-      <Dialog.Overlay>
-        <DeploymentDialog accessToken={accessToken} scriptTemplates={scriptTemplates} />
-      </Dialog.Overlay>
+      <DeploymentDialog accessToken={accessToken} scriptTemplates={scriptTemplates} />
     </Dialog.Root>
   );
 };
@@ -51,7 +49,7 @@ const meta = {
   decorators: [
     withTheme(),
     withPluginManager({
-      plugins: [ProcessManagerPlugin(), ClientPlugin.make({})],
+      plugins: [ProcessManagerPlugin.make(), ClientPlugin.make({})],
     }),
   ],
 } satisfies Meta<typeof DeploymentDialogStory>;

package/src/containers/DeploymentDialog/DeploymentDialog.tsx

@@ -4,16 +4,19 @@
 
 import React, { useEffect, useMemo } from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/ui';
+import * as Hooks from '@dxos/app-framework/Hooks';
 import * as LayoutOperation from '@dxos/app-toolkit/LayoutOperation';
 import { Obj } from '@dxos/echo';
 import { type AccessToken } from '@dxos/link';
-import { Button, Dialog, useTranslation } from '@dxos/react-ui';
+import * as Button from '@dxos/react-ui/Button';
+import * as Dialog from '@dxos/react-ui/Dialog';
+import * as UiHooks from '@dxos/react-ui/Hooks';
+import * as SystemButton from '@dxos/react-ui/SystemButton';
 
 import { useCreateAndDeployScriptTemplates } from '#hooks';
 import { meta } from '#meta';
 
-import { type Template } from '../../templates';
+import { type Template } from '../../templates/index.ts';
 
 // TODO(ZaymonFC):
 //  - Show activity and feedback to the user.
@@ -26,13 +29,13 @@ export type DeploymentDialogProps = {
 };
 
 export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDialogProps) => {
-  const { t } = useTranslation(meta.profile.key);
+  const { t } = UiHooks.useTranslation(meta.profile.key);
   const db = useMemo(() => Obj.getDatabase(accessToken), [accessToken]);
 
   // TODO(ZaymonFC): Thinking further. All of this should get moved to intents to run async in the background.
   //   Deployment shouldn't be tied to the lifecycle of the dialogue component.
   const { handleCreateAndDeployScripts, status } = useCreateAndDeployScriptTemplates(db, scriptTemplates);
-  const { invokePromise } = useOperationInvoker();
+  const { invokePromise } = Hooks.useOperationInvoker();
 
   useEffect(() => {
     if (status === 'success') {
@@ -70,9 +73,9 @@ export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDia
     <Dialog.Content>
       <Dialog.Header>
         <Dialog.Title>{t('deployment-dialog.title')}</Dialog.Title>
-        <Dialog.Close asChild>
-          <Dialog.ActionIconButton action='close' />
-        </Dialog.Close>
+        <Dialog.CloseTrigger asChild>
+          <SystemButton.Close />
+        </Dialog.CloseTrigger>
       </Dialog.Header>
       <Dialog.Body>
         <p>
@@ -86,11 +89,11 @@ export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDia
           })}
         </ul>
       </Dialog.Body>
-      <Dialog.ActionBar>
-        <Dialog.Close asChild>
-          <Button disabled={status === 'pending'}>{t('deployment-dialog-skip-button.label')}</Button>
-        </Dialog.Close>
-        <Button variant='primary' onClick={handleCreateAndDeployScripts} disabled={status === 'pending'}>
+      <Dialog.Footer>
+        <Dialog.CloseTrigger asChild>
+          <Button.Root disabled={status === 'pending'}>{t('deployment-dialog-skip-button.label')}</Button.Root>
+        </Dialog.CloseTrigger>
+        <Button.Root variant='primary' onClick={handleCreateAndDeployScripts} disabled={status === 'pending'}>
           {status === 'pending'
             ? t('deployment-dialog-deploy-functions-pending-button.label', {
                 count: scriptTemplates.length,
@@ -98,8 +101,8 @@ export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDia
             : t('deployment-dialog-deploy-functions-button.label', {
                 count: scriptTemplates.length,
               })}
-        </Button>
-      </Dialog.ActionBar>
+        </Button.Root>
+      </Dialog.Footer>
     </Dialog.Content>
   );
 };

package/src/containers/DeploymentDialog/index.ts

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

package/src/containers/NotebookArticle/NotebookArticle.stories.tsx

@@ -8,8 +8,8 @@ import React from 'react';
 
 import { SERVICES_CONFIG } from '@dxos/ai/testing';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { AppSurface } from '@dxos/app-toolkit/ui';
-import { RunInstructions } from '@dxos/assistant-toolkit';
+import * as AppSurface from '@dxos/app-toolkit/AppSurface';
+import * as AgentOperation from '@dxos/assistant-toolkit/AgentOperation';
 import * as Operation from '@dxos/compute/Operation';
 import { Filter } from '@dxos/echo';
 import { useQuery } from '@dxos/echo-react';
@@ -20,7 +20,7 @@ import { ExplorerPlugin } from '@dxos/plugin-explorer/testing';
 import * as Markdown from '@dxos/plugin-markdown/Markdown';
 import { MarkdownPlugin } from '@dxos/plugin-markdown/testing';
 import { RoutinePlugin } from '@dxos/plugin-routine/testing';
-import { corePlugins } from '@dxos/plugin-testing';
+import * as CorePlugins from '@dxos/plugin-testing/CorePlugins';
 import { Config, useClient } from '@dxos/react-client';
 import { withLayout } from '@dxos/react-ui/testing';
 import { DataTypes } from '@dxos/schema';
@@ -29,7 +29,7 @@ import { createNotebook } from '#testing';
 import { translations } from '#translations';
 import { Notebook } from '#types';
 
-import { NotebookArticle } from './NotebookArticle';
+import { NotebookArticle } from './NotebookArticle.tsx';
 
 const meta: Meta<typeof NotebookArticle> = {
   title: 'plugins/plugin-script/containers/NotebookArticle',
@@ -44,7 +44,7 @@ const meta: Meta<typeof NotebookArticle> = {
     withLayout({ layout: 'column', classNames: 'w-document-max-width' }),
     withPluginManager({
       plugins: [
-        ...corePlugins(),
+        ...CorePlugins.make(),
         ClientPlugin.make({
           // TODO(wittjosiah): ComputeRuntime requires edge to be configured or it will throw.
           config: new Config({
@@ -59,7 +59,7 @@ const meta: Meta<typeof NotebookArticle> = {
 
               defaultSpace.db.add(createNotebook());
               defaultSpace.db.add(Markdown.make({ content: '# Hello World' }));
-              defaultSpace.db.add(Operation.serialize(RunInstructions));
+              defaultSpace.db.add(Operation.serialize(AgentOperation.RunInstructions));
             }),
         }),
         AssistantPlugin(),

package/src/containers/NotebookArticle/NotebookArticle.tsx

@@ -9,9 +9,9 @@ import * as Exit from 'effect/Exit';
 import type * as Types from 'effect/Types';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 
-import { useSpaceCallback } from '@dxos/app-framework/ui';
-import { type AppSurface } from '@dxos/app-toolkit/ui';
-import { RunInstructions } from '@dxos/assistant-toolkit';
+import * as Hooks from '@dxos/app-framework/Hooks';
+import type * as AppSurface from '@dxos/app-toolkit/AppSurface';
+import * as AgentOperation from '@dxos/assistant-toolkit/AgentOperation';
 import * as Instructions from '@dxos/compute/Instructions';
 import * as Operation from '@dxos/compute/Operation';
 import * as Skill from '@dxos/compute/Skill';
@@ -20,8 +20,12 @@ import { QueryBuilder } from '@dxos/echo-query';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import * as Graph from '@dxos/plugin-explorer/Graph';
-import { DropdownMenu, IconButton, Panel, Toolbar, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
+import * as Button from '@dxos/react-ui/Button';
+import * as UiHooks from '@dxos/react-ui/Hooks';
+import * as Menu from '@dxos/react-ui/Menu';
+import * as Panel from '@dxos/react-ui/Panel';
+import * as Toolbar from '@dxos/react-ui/Toolbar';
 import { Text, ViewModel } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
@@ -29,7 +33,7 @@ import { NotebookMenu, NotebookStack, type NotebookStackProps, type TypescriptEd
 import { meta } from '#meta';
 import { Notebook } from '#types';
 
-import { ComputeGraph } from '../../notebook';
+import { ComputeGraph } from '../../notebook/index.ts';
 
 const INCLUDE_SKILLS = ['org.dxos.skill.assistant', 'org.dxos.skill.database', 'org.dxos.skill.markdown'];
 
@@ -38,7 +42,7 @@ const INCLUDE_SKILLS = ['org.dxos.skill.assistant', 'org.dxos.skill.database', '
 export type NotebookArticleProps = AppSurface.ObjectArticleProps<Notebook.Notebook, Pick<TypescriptEditorProps, 'env'>>;
 
 export const NotebookArticle = ({ role, subject: notebook, attendableId, env }: NotebookArticleProps) => {
-  const { t } = useTranslation(meta.profile.key);
+  const { t } = UiHooks.useTranslation(meta.profile.key);
   const registry = useContext(RegistryContext);
   const db = notebook ? Obj.getDatabase(notebook) : undefined;
   const { hasAttention } = useAttention(attendableId);
@@ -90,7 +94,7 @@ export const NotebookArticle = ({ role, subject: notebook, attendableId, env }:
   }, [db, notebook, graph]);
 
   const [promptResults, setPromptResults] = useState<Record<string, string>>({});
-  const handleExecPrompts = useSpaceCallback(
+  const handleExecPrompts = Hooks.useSpaceCallback(
     db?.spaceId,
     [] as const,
     Effect.fnUntraced(function* () {
@@ -174,16 +178,16 @@ export const NotebookArticle = ({ role, subject: notebook, attendableId, env }:
   );
 
   return (
-    <Panel.Root role={role} classNames='dx-document'>
-      <Panel.Toolbar asChild>
-        <Toolbar.Root disabled={!hasAttention}>
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger asChild>
-              <IconButton icon='ph--plus--regular' iconOnly label={t('notebook-cell-insert.label')} />
-            </DropdownMenu.Trigger>
+    <Panel.Root role={role} width='document'>
+      <Panel.Header>
+        <Toolbar.Root inactive={!hasAttention}>
+          <Menu.Root>
+            <Menu.Trigger asChild>
+              <Button.Root icon='ph--plus--regular' iconOnly label={t('notebook-cell-insert.label')} />
+            </Menu.Trigger>
             <NotebookMenu onCellInsert={handleCellInsert} />
-          </DropdownMenu.Root>
-          <Toolbar.IconButton
+          </Menu.Root>
+          <Button.Root
             icon='ph--play--fill'
             iconOnly
             label={t('compute.label')}
@@ -191,8 +195,8 @@ export const NotebookArticle = ({ role, subject: notebook, attendableId, env }:
             onClick={handleCompute}
           />
         </Toolbar.Root>
-      </Panel.Toolbar>
-      <Panel.Content asChild>
+      </Panel.Header>
+      <Panel.Body asChild>
         <NotebookStack
           db={db}
           notebook={notebook}
@@ -202,7 +206,7 @@ export const NotebookArticle = ({ role, subject: notebook, attendableId, env }:
           onCellInsert={handleCellInsert}
           onCellDelete={handleCellDelete}
         />
-      </Panel.Content>
+      </Panel.Body>
     </Panel.Root>
   );
 };
@@ -217,9 +221,9 @@ const runPrompt = Effect.fn(function* ({
   input: Record<string, any>;
   onResult: (result: string) => void;
 }) {
-  const inputData: Operation.Definition.Input<typeof RunInstructions> = { instructions, input };
+  const inputData: Operation.Definition.Input<typeof AgentOperation.RunInstructions> = { instructions, input };
   // Invoke the function.
-  const result = yield* Operation.invoke(RunInstructions, inputData).pipe(Effect.orDie, Effect.exit);
+  const result = yield* Operation.invoke(AgentOperation.RunInstructions, inputData).pipe(Effect.orDie, Effect.exit);
 
   Exit.match(result, {
     onFailure: (cause) => {

package/src/containers/NotebookArticle/index.ts

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

package/src/containers/ScriptArticle/ScriptArticle.stories.tsx

@@ -15,7 +15,7 @@ import { Filter } from '@dxos/echo';
 import { useQuery } from '@dxos/echo-react';
 import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
-import { corePlugins } from '@dxos/plugin-testing';
+import * as CorePlugins from '@dxos/plugin-testing/CorePlugins';
 import * as StorybookPlugin from '@dxos/plugin-testing/StorybookPlugin';
 import { Config } from '@dxos/react-client';
 import { useSpaces } from '@dxos/react-client/echo';
@@ -25,7 +25,7 @@ import { Text } from '@dxos/schema';
 import { createScript } from '#testing';
 import { translations } from '#translations';
 
-import { ScriptArticle } from './ScriptArticle';
+import { ScriptArticle } from './ScriptArticle.tsx';
 
 type StoryArgs = {};
 
@@ -75,7 +75,7 @@ const meta = {
     withLayout({ layout: 'column', classNames: 'w-document-max-width' }),
     withPluginManager({
       plugins: [
-        ...corePlugins(),
+        ...CorePlugins.make(),
         ClientPlugin.make({
           config: new Config({
             runtime: {

package/src/containers/ScriptArticle/ScriptArticle.tsx

@@ -4,13 +4,14 @@
 
 import React, { useMemo } from 'react';
 
-import { type AppSurface } from '@dxos/app-toolkit/ui';
+import type * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import type * as Script from '@dxos/compute/Script';
 import { Obj } from '@dxos/echo';
 import { Doc } from '@dxos/echo-doc';
+import { useResolveRef } from '@dxos/echo-react';
 import { useIdentity } from '@dxos/halo-react';
 import { getSpace } from '@dxos/react-client/echo';
-import { Panel } from '@dxos/react-ui';
+import * as Panel from '@dxos/react-ui/Panel';
 import { createDataExtensions, editorClassNames, listener } from '@dxos/ui-editor';
 
 import { ScriptToolbar, TypescriptEditor, type TypescriptEditorProps } from '#components';
@@ -35,22 +36,23 @@ export const ScriptArticle = ({
   const space = getSpace(script);
   const state = useToolbarState();
   useDeployState({ script, state });
+  const source = useResolveRef(script.source);
 
   const extensions = useMemo(() => {
-    if (!script.source.target) {
+    if (!source) {
       return [];
     }
 
     return [
       createDataExtensions({
         id: script.id,
-        text: Doc.createAccessor(script.source.target, ['content']),
+        text: Doc.createAccessor(source, ['content']),
         messenger: space,
         identity,
       }),
       listener({
         onChange: ({ text }) => {
-          if (script.source.target?.content !== text) {
+          if (source?.content !== text) {
             Obj.update(script, (script) => {
               script.changed = true;
             });
@@ -58,7 +60,7 @@ export const ScriptArticle = ({
         },
       }),
     ];
-  }, [identity, space, script, script.source.target]);
+  }, [identity, space, script, source]);
 
   if (!extensions.length) {
     return null;
@@ -66,20 +68,20 @@ export const ScriptArticle = ({
 
   return (
     <Panel.Root role={role}>
-      <Panel.Toolbar asChild>
+      <Panel.Header>
         <ScriptToolbar script={script} attendableId={attendableId} state={state} role={role} />
-      </Panel.Toolbar>
-      <Panel.Content asChild>
+      </Panel.Header>
+      <Panel.Body asChild>
         <TypescriptEditor
           classNames={editorClassNames(role)}
           id={script.id}
           env={env}
-          initialValue={script.source?.target?.content}
+          initialValue={source?.content}
           extensions={extensions}
           inputMode={settings.editorInputMode}
           toolbar
         />
-      </Panel.Content>
+      </Panel.Body>
     </Panel.Root>
   );
 };