@dxos/plugin-pipeline 0.8.4-main.6fa680abb7 → 0.8.4-main.bcb3aa67d6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-pipeline",
-  "version": "0.8.4-main.6fa680abb7",
+  "version": "0.8.4-main.bcb3aa67d6",
   "description": "Pipeline plugin for Composer",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,6 +12,14 @@
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#capabilities": "./src/capabilities/index.ts",
+    "#components": "./src/components/index.ts",
+    "#containers": "./src/containers/index.ts",
+    "#hooks": "./src/hooks/index.ts",
+    "#meta": "./src/meta.ts",
+    "#types": "./src/types/index.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -39,35 +47,36 @@
   "dependencies": {
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
-    "effect": "3.19.16",
-    "@dxos/app-framework": "0.8.4-main.6fa680abb7",
-    "@dxos/app-toolkit": "0.8.4-main.6fa680abb7",
-    "@dxos/assistant-toolkit": "0.8.4-main.6fa680abb7",
-    "@dxos/devtools": "0.8.4-main.6fa680abb7",
-    "@dxos/async": "0.8.4-main.6fa680abb7",
-    "@dxos/echo": "0.8.4-main.6fa680abb7",
-    "@dxos/functions": "0.8.4-main.6fa680abb7",
-    "@dxos/echo-atom": "0.8.4-main.6fa680abb7",
-    "@dxos/log": "0.8.4-main.6fa680abb7",
-    "@dxos/echo-query": "0.8.4-main.6fa680abb7",
-    "@dxos/plugin-client": "0.8.4-main.6fa680abb7",
-    "@dxos/plugin-deck": "0.8.4-main.6fa680abb7",
-    "@dxos/plugin-graph": "0.8.4-main.6fa680abb7",
-    "@dxos/operation": "0.8.4-main.6fa680abb7",
-    "@dxos/plugin-inbox": "0.8.4-main.6fa680abb7",
-    "@dxos/plugin-markdown": "0.8.4-main.6fa680abb7",
-    "@dxos/plugin-space": "0.8.4-main.6fa680abb7",
-    "@dxos/react-ui-attention": "0.8.4-main.6fa680abb7",
-    "@dxos/react-client": "0.8.4-main.6fa680abb7",
-    "@dxos/react-ui-components": "0.8.4-main.6fa680abb7",
-    "@dxos/react-ui-list": "0.8.4-main.6fa680abb7",
-    "@dxos/react-ui-form": "0.8.4-main.6fa680abb7",
-    "@dxos/react-ui-stack": "0.8.4-main.6fa680abb7",
-    "@dxos/react-ui-menu": "0.8.4-main.6fa680abb7",
-    "@dxos/react-ui-mosaic": "0.8.4-main.6fa680abb7",
-    "@dxos/types": "0.8.4-main.6fa680abb7",
-    "@dxos/schema": "0.8.4-main.6fa680abb7",
-    "@dxos/util": "0.8.4-main.6fa680abb7"
+    "@radix-ui/react-slot": "1.1.2",
+    "effect": "3.20.0",
+    "@dxos/app-framework": "0.8.4-main.bcb3aa67d6",
+    "@dxos/app-toolkit": "0.8.4-main.bcb3aa67d6",
+    "@dxos/assistant-toolkit": "0.8.4-main.bcb3aa67d6",
+    "@dxos/devtools": "0.8.4-main.bcb3aa67d6",
+    "@dxos/echo": "0.8.4-main.bcb3aa67d6",
+    "@dxos/async": "0.8.4-main.bcb3aa67d6",
+    "@dxos/echo-atom": "0.8.4-main.bcb3aa67d6",
+    "@dxos/echo-query": "0.8.4-main.bcb3aa67d6",
+    "@dxos/log": "0.8.4-main.bcb3aa67d6",
+    "@dxos/functions": "0.8.4-main.bcb3aa67d6",
+    "@dxos/operation": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-client": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-graph": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-inbox": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-space": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-deck": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-client": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-markdown": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-attention": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-form": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-components": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-list": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-menu": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-mosaic": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-stack": "0.8.4-main.bcb3aa67d6",
+    "@dxos/schema": "0.8.4-main.bcb3aa67d6",
+    "@dxos/util": "0.8.4-main.bcb3aa67d6",
+    "@dxos/types": "0.8.4-main.bcb3aa67d6"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -76,24 +85,24 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "^7.1.11",
-    "@dxos/echo-db": "0.8.4-main.6fa680abb7",
-    "@dxos/plugin-inbox": "0.8.4-main.6fa680abb7",
-    "@dxos/plugin-testing": "0.8.4-main.6fa680abb7",
-    "@dxos/plugin-preview": "0.8.4-main.6fa680abb7",
-    "@dxos/random": "0.8.4-main.6fa680abb7",
-    "@dxos/plugin-theme": "0.8.4-main.6fa680abb7",
-    "@dxos/react-ui": "0.8.4-main.6fa680abb7",
-    "@dxos/plugin-attention": "0.8.4-main.6fa680abb7",
-    "@dxos/storybook-utils": "0.8.4-main.6fa680abb7",
-    "@dxos/ui-theme": "0.8.4-main.6fa680abb7"
+    "@dxos/echo-db": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-attention": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-inbox": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-preview": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-testing": "0.8.4-main.bcb3aa67d6",
+    "@dxos/random": "0.8.4-main.bcb3aa67d6",
+    "@dxos/storybook-utils": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-theme": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.6fa680abb7",
-    "@dxos/ui-theme": "0.8.4-main.6fa680abb7"
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6"
   },
   "publishConfig": {
     "access": "public"

package/src/PipelinePlugin.tsx

@@ -3,29 +3,43 @@
 //
 
 import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
 
 import { Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
+import { Annotation } from '@dxos/echo';
+import { Operation } from '@dxos/operation';
 import { type CreateObject } from '@dxos/plugin-space/types';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
 import { Pipeline } from '@dxos/types';
 
-import { AppGraphBuilder, OperationResolver, ReactSurface } from './capabilities';
-import { meta } from './meta';
+import { meta } from '#meta';
 import { translations } from './translations';
 
+import { AppGraphBuilder, ReactSurface } from '#capabilities';
+
 export const PipelinePlugin = Plugin.define(meta).pipe(
   AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
   AppPlugin.addMetadataModule({
     metadata: {
       id: Pipeline.Pipeline.typename,
       metadata: {
-        icon: 'ph--path--regular',
-        iconHue: 'purple',
-        createObject: ((props) => Effect.sync(() => Pipeline.make(props))) satisfies CreateObject,
+        icon: Annotation.IconAnnotation.get(Pipeline.Pipeline).pipe(Option.getOrThrow).icon,
+        iconHue: Annotation.IconAnnotation.get(Pipeline.Pipeline).pipe(Option.getOrThrow).hue ?? 'white',
+        createObject: ((props, options) =>
+          Effect.gen(function* () {
+            const object = Pipeline.make(props);
+            return yield* Operation.invoke(SpaceOperation.AddObject, {
+              object,
+              target: options.target,
+              hidden: true,
+              targetNodeId: options.targetNodeId,
+            });
+          })) satisfies CreateObject,
       },
     },
   }),
-  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+
   AppPlugin.addSchemaModule({ schema: [Pipeline.Pipeline] }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
   AppPlugin.addTranslationsModule({ translations }),

package/src/capabilities/{app-graph-builder/app-graph-builder.ts → app-graph-builder.ts}

@@ -5,12 +5,11 @@
 import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
-import { AppCapabilities } from '@dxos/app-toolkit';
-import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
+import { AppCapabilities, AppNode } from '@dxos/app-toolkit';
 import { GraphBuilder } from '@dxos/plugin-graph';
 import { Pipeline } from '@dxos/types';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
@@ -20,26 +19,18 @@ export default Capability.makeModule(
         type: Pipeline.Pipeline,
         connector: () =>
           Effect.succeed([
-            {
+            AppNode.makeCompanion({
               id: 'invocations',
-              type: PLANK_COMPANION_TYPE,
+              label: ['pipeline-invocations.label', { ns: meta.id }],
+              icon: 'ph--clock-countdown--regular',
               data: 'invocations',
-              properties: {
-                label: ['pipeline invocations label', { ns: meta.id }],
-                icon: 'ph--clock-countdown--regular',
-                disposition: 'hidden',
-              },
-            },
-            {
+            }),
+            AppNode.makeCompanion({
               id: 'automation',
-              type: PLANK_COMPANION_TYPE,
+              label: ['pipeline-automation.label', { ns: meta.id }],
+              icon: 'ph--lightning--regular',
               data: 'automation',
-              properties: {
-                label: ['pipeline automation label', { ns: meta.id }],
-                icon: 'ph--lightning--regular',
-                disposition: 'hidden',
-              },
-            },
+            }),
           ]),
       }),
     ]);

package/src/capabilities/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './app-graph-builder';
-export * from './operation-resolver';
-export * from './react-surface';
+import { Capability } from '@dxos/app-framework';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

package/src/capabilities/{react-surface/react-surface.tsx → react-surface.tsx}

@@ -12,8 +12,8 @@ import { Obj } from '@dxos/echo';
 import { Panel } from '@dxos/react-ui';
 import { Pipeline } from '@dxos/types';
 
-import { PipelineContainer, PipelineObjectSettings } from '../../containers';
-import { meta } from '../../meta';
+import { PipelineContainer, PipelineObjectSettings } from '#containers';
+import { meta } from '#meta';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
@@ -36,7 +36,7 @@ export default Capability.makeModule(() =>
           const db = Obj.getDatabase(data.companionTo);
           // TODO(wittjosiah): Filter the invocations to those relevant to the project.
           return (
-            <Panel.Root role={role} className='dx-article'>
+            <Panel.Root role={role} className='dx-document'>
               <Panel.Content asChild>
                 <InvocationTraceContainer db={db} detailAxis='block' />
               </Panel.Content>

package/src/components/PipelineComponent/PipelineColumn.tsx

@@ -3,22 +3,24 @@
 //
 
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 import type * as Schema from 'effect/Schema';
 import React, { forwardRef, useMemo, useRef, useState } from 'react';
 
-import { useObjectNavigate } from '@dxos/app-toolkit/ui';
-import { JsonSchema, Obj, Query, Type } from '@dxos/echo';
-import { resolveSchemaWithRegistry } from '@dxos/plugin-space';
+import { resolveSchemaWithRegistry } from '@dxos/app-toolkit/query';
+import { Annotation, JsonSchema, Obj, Query, Type } from '@dxos/echo';
 import { Filter, getSpace, useObject } from '@dxos/react-client/echo';
-import { useAsyncEffect, useTranslation } from '@dxos/react-ui';
+import { Panel, Toolbar, useAsyncEffect, useTranslation } from '@dxos/react-ui';
 import { Card } from '@dxos/react-ui';
 import { Board, Focus, Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';
 import { ProjectionModel, createEchoChangeCallback } from '@dxos/schema';
 import { type Pipeline } from '@dxos/types';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 import { type ItemProps, usePipeline } from './PipelineComponent';
+import { Menu } from '@dxos/react-ui-menu';
 
 //
 // PipelineColumn
@@ -68,27 +70,37 @@ export const PipelineColumn = ({ data: column, location, classNames, debug }: Pi
     return new ProjectionModel({ view, baseSchema: jsonSchema, change });
   }, [schema, view]);
 
-  const Tile = useMemo(() => {
+  const PipelineTile = useMemo(() => {
     return forwardRef<HTMLDivElement, Pick<MosaicTileProps<Obj.Unknown>, 'classNames' | 'location' | 'data' | 'debug'>>(
-      (props, ref) => <ItemTile {...props} ref={ref} itemProps={{ item: props.data, projectionModel }} />,
+      (props, ref) => <ItemTile {...props} itemProps={{ item: props.data, projectionModel }} ref={ref} />,
     );
-  }, [Item, projectionModel]);
+  }, [projectionModel]);
 
   if (!view) {
     return null;
   }
 
   return (
-    <Board.Column.Root
-      data={column}
-      location={location}
-      classNames={['group/column grid h-full overflow-hidden grid-rows-[var(--dx-rail-action)_1fr]', classNames]}
-      debug={debug}
-      dragHandleRef={dragHandleRef}
-    >
-      <Board.Column.Header label={column.name ?? t('untitled view title')} dragHandleRef={dragHandleRef} />
-      <Board.Column.Body data={column} Tile={Tile} />
-    </Board.Column.Root>
+    <Panel.Root asChild>
+      <Board.Column.Root
+        debug={debug}
+        data={column}
+        location={location}
+        classNames={classNames}
+        dragHandleRef={dragHandleRef}
+      >
+        <Panel.Toolbar asChild>
+          <Board.Column.Header
+            classNames='_opacity-10'
+            label={column.name || t('untitled-view.title')}
+            dragHandleRef={dragHandleRef}
+          />
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <Board.Column.Body data={column} Tile={PipelineTile} />
+        </Panel.Content>
+      </Board.Column.Root>
+    </Panel.Root>
   );
 };
 
@@ -109,23 +121,42 @@ const ItemTile = forwardRef<HTMLDivElement, ItemTileProps>(
     const rootRef = useRef<HTMLDivElement>(null);
     const composedRef = useComposedRefs<HTMLDivElement>(rootRef, forwardedRef);
     const { Item } = usePipeline(ITEM_TILE_NAME);
-    const handleNavigate = useObjectNavigate(data);
+    const icon = Function.pipe(
+      Obj.getSchema(data),
+      Option.fromNullable,
+      Option.flatMap(Annotation.IconAnnotation.get),
+      Option.map(({ icon }) => icon),
+      Option.getOrElse(() => 'ph--placeholder--regular'),
+    );
 
     return (
-      <Mosaic.Tile asChild id={data.id} data={data} location={location} debug={debug}>
-        <Focus.Group asChild>
-          <Card.Root classNames={classNames} ref={composedRef}>
-            <Card.Toolbar>
-              <Card.DragHandle />
-              <Card.Title onClick={handleNavigate}>{Obj.getLabel(data)}</Card.Title>
-              <Card.Menu />
-            </Card.Toolbar>
-            <Card.Content>
-              <Item {...itemProps} />
-            </Card.Content>
-          </Card.Root>
-        </Focus.Group>
-      </Mosaic.Tile>
+      <Menu.Root>
+        <Mosaic.Tile asChild id={data.id} data={data} location={location} debug={debug}>
+          <Focus.Item asChild>
+            <Card.Root classNames={classNames} ref={composedRef}>
+              <Card.Toolbar>
+                <Card.Icon icon={icon} />
+                <Card.Title>{Obj.getLabel(data)}</Card.Title>
+                {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
+                <Card.IconBlock padding>
+                  <Menu.Trigger asChild>
+                    <Toolbar.IconButton
+                      iconOnly
+                      variant='ghost'
+                      icon='ph--dots-three-vertical--regular'
+                      label='Actions'
+                    />
+                  </Menu.Trigger>
+                  <Menu.Content />
+                </Card.IconBlock>
+              </Card.Toolbar>
+              <Card.Content>
+                <Item {...itemProps} />
+              </Card.Content>
+            </Card.Root>
+          </Focus.Item>
+        </Mosaic.Tile>
+      </Menu.Root>
     );
   },
 );

package/src/components/PipelineComponent/PipelineComponent.stories.tsx

@@ -4,7 +4,7 @@
 
 import { RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 
 import { Filter, Ref } from '@dxos/client/echo';
 import { JsonSchema, Obj, Query } from '@dxos/echo';
@@ -20,17 +20,19 @@ import { createObjectFactory } from '@dxos/schema/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 import { Person, Pipeline } from '@dxos/types';
 
-import { usePipelineBoardModel } from '../../hooks';
+import { usePipelineBoardModel } from '#hooks';
 import { translations } from '../../translations';
 
 import { type ItemProps, PipelineComponent } from './PipelineComponent';
 
 const StorybookProjectItem = ({ item, projectionModel }: ItemProps) => {
+  const personSchema = useMemo(() => omitId(Person.Person), []);
+
   if (Obj.instanceOf(Person.Person, item)) {
     const contact = item as Obj.OfShape<Person.Person>;
 
     return (
-      <Form.Root schema={omitId(Person.Person)} projection={projectionModel} values={contact} autoSave>
+      <Form.Root schema={personSchema} projection={projectionModel} values={contact} autoSave>
         <Form.Viewport>
           <Form.Content>
             <Form.FieldSet />
@@ -62,10 +64,10 @@ const DefaultStory = () => {
       fields: ['fullName'],
     });
 
-    Obj.change(pipeline, (p) => {
-      p.columns.push({
+    Obj.change(pipeline, (obj) => {
+      obj.columns.push({
         name: 'New Contacts',
-        view: Ref.make(view) as (typeof p.columns)[number]['view'],
+        view: Ref.make(view) as (typeof obj.columns)[number]['view'],
         order: [],
       });
     });
@@ -106,10 +108,10 @@ const MutationsStory = () => {
       fields: ['fullName'],
     });
 
-    Obj.change(pipeline, (p) => {
-      p.columns.push({
+    Obj.change(pipeline, (obj) => {
+      obj.columns.push({
         name: 'New Contacts',
-        view: Ref.make(view) as (typeof p.columns)[number]['view'],
+        view: Ref.make(view) as (typeof obj.columns)[number]['view'],
         order: [],
       });
     });
@@ -129,8 +131,8 @@ const MutationsStory = () => {
       if (p < 0.4) {
         // Append to the name
         const contactToAdjust = faker.helpers.arrayElement(contacts);
-        Obj.change(contactToAdjust, (c) => {
-          c.fullName = (c.fullName ?? '') + ' X';
+        Obj.change(contactToAdjust, (obj) => {
+          obj.fullName = (obj.fullName ?? '') + ' X';
         });
         return;
       } else if (p < 0.7 && contacts.length > 1) {

package/src/components/PipelineComponent/PipelineComponent.tsx

@@ -4,6 +4,7 @@
 
 import { useAtomValue } from '@effect-atom/atom-react';
 import { createContext } from '@radix-ui/react-context';
+import { Slot } from '@radix-ui/react-slot';
 import React, { type FC, type PropsWithChildren } from 'react';
 
 import { Obj } from '@dxos/echo';
@@ -11,8 +12,9 @@ import { Toolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
 import { Board, type BoardModel, useBoard, useEventHandlerAdapter } from '@dxos/react-ui-mosaic';
 import { type ProjectionModel } from '@dxos/schema';
 import { type Pipeline } from '@dxos/types';
+import { composable, composableProps, slottable } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 import { PipelineColumn } from './PipelineColumn';
 
@@ -59,10 +61,17 @@ type PipelineContentProps = PropsWithChildren<{
   model: BoardModel<Pipeline.Column, Obj.Unknown>;
 }>;
 
-const PipelineContent = ({ model, children, ...props }: PipelineContentProps) => (
-  <Board.Root {...props} model={model}>
-    {children}
-  </Board.Root>
+const PipelineContent = slottable<HTMLDivElement, PipelineContentProps>(
+  ({ asChild, model, children, ...props }, forwardedRef) => {
+    const Comp = asChild ? Slot : 'div';
+    return (
+      <Board.Root model={model}>
+        <Comp {...composableProps(props)} ref={forwardedRef}>
+          {children}
+        </Comp>
+      </Board.Root>
+    );
+  },
 );
 
 PipelineContent.displayName = PIPELINE_CONTENT_NAME;
@@ -77,7 +86,7 @@ type PipelineColumnsProps = {
   pipeline: Pipeline.Pipeline;
 };
 
-const PipelineColumns = ({ pipeline }: PipelineColumnsProps) => {
+const PipelineColumns = composable<HTMLDivElement, PipelineColumnsProps>(({ pipeline, ...props }) => {
   const { model } = useBoard(PIPELINE_COLUMNS_NAME);
   const columns = useAtomValue(model.columns);
   const eventHandler = useEventHandlerAdapter<Pipeline.Column, Obj.Unknown>({
@@ -88,11 +97,11 @@ const PipelineColumns = ({ pipeline }: PipelineColumnsProps) => {
     get: (data) => data as unknown as Obj.Unknown,
     make: (object) => object as unknown as Pipeline.Column,
     canDrop: ({ source }) => model.isColumn(source.data),
-    onChange: (mutate) => Obj.change(pipeline, (p) => mutate(p.columns)),
+    onChange: (mutate) => Obj.change(pipeline, (obj) => mutate(obj.columns)),
   });
 
-  return <Board.Content id='pipeline' eventHandler={eventHandler} Tile={PipelineColumn} />;
-};
+  return <Board.Content {...props} id='pipeline' eventHandler={eventHandler} Tile={PipelineColumn} />;
+});
 
 PipelineColumns.displayName = PIPELINE_COLUMNS_NAME;
 
@@ -102,16 +111,16 @@ PipelineColumns.displayName = PIPELINE_COLUMNS_NAME;
 
 const PIPELINE_TOOLBAR_NAME = 'Pipeline.Toolbar';
 
-export const PipelineToolbar = (props: ToolbarRootProps) => {
+export const PipelineToolbar = composable<HTMLDivElement, ToolbarRootProps>(({ children, ...props }, forwardedRef) => {
   const { t } = useTranslation(meta.id);
   const { onAddColumn } = usePipeline(PIPELINE_TOOLBAR_NAME);
 
   return (
-    <Toolbar.Root {...props}>
-      <Toolbar.IconButton icon='ph--plus--regular' iconOnly label={t('add column label')} onClick={onAddColumn} />
+    <Toolbar.Root {...composableProps(props)} ref={forwardedRef}>
+      <Toolbar.IconButton icon='ph--plus--regular' iconOnly label={t('add-column.label')} onClick={onAddColumn} />
     </Toolbar.Root>
   );
-};
+});
 
 PipelineToolbar.displayName = PIPELINE_TOOLBAR_NAME;
 

package/src/containers/PipelineContainer/PipelineContainer.stories.tsx

@@ -13,12 +13,13 @@ import { Database, Feed, JsonSchema, Obj, Query, Tag } from '@dxos/echo';
 import { Collection, View } from '@dxos/echo';
 import { createFeedServiceLayer } from '@dxos/echo-db';
 import { ClientPlugin } from '@dxos/plugin-client';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { InboxPlugin } from '@dxos/plugin-inbox';
 import { PreviewPlugin } from '@dxos/plugin-preview';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
 import { useDatabase, useQuery } from '@dxos/react-client/echo';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { withLayout } from '@dxos/react-ui/testing';
 import { translations as stackTranslations } from '@dxos/react-ui-stack';
 import { ViewModel } from '@dxos/schema';
 import { createObjectFactory } from '@dxos/schema/testing';
@@ -52,7 +53,6 @@ const meta = {
   title: 'plugins/plugin-pipeline/containers/PipelineContainer',
   render: DefaultStory,
   decorators: [
-    withTheme(),
     withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [
@@ -71,10 +71,7 @@ const meta = {
             Message.Message,
           ],
           onClientInitialized: Effect.fnUntraced(function* ({ client }) {
-            yield* Effect.promise(() => client.halo.createIdentity());
-            yield* Effect.promise(() => client.spaces.waitUntilReady());
-            const space = client.spaces.default;
-            yield* Effect.promise(() => space.waitUntilReady());
+            const { personalSpace } = yield* initializeIdentity(client);
 
             yield* Effect.gen(function* () {
               const tag = yield* Database.add(Tag.make({ label: 'important', hue: 'green' }));
@@ -196,7 +193,7 @@ const meta = {
               }
 
               // Generate sample Contacts.
-              const factory = createObjectFactory(space.db, faker as any);
+              const factory = createObjectFactory(personalSpace.db, faker as any);
               yield* Effect.promise(() => factory([{ type: Person.Person, count: 12 }]));
 
               // Generate sample Projects.
@@ -208,7 +205,11 @@ const meta = {
                   }),
                 );
               }
-            }).pipe(Effect.provide(Layer.merge(Database.layer(space.db), createFeedServiceLayer(space.queues))));
+            }).pipe(
+              Effect.provide(
+                Layer.merge(Database.layer(personalSpace.db), createFeedServiceLayer(personalSpace.queues)),
+              ),
+            );
           }),
         }),
         InboxPlugin(),