@dxos/plugin-pipeline 0.8.3-main.ef1bc66f44 → 0.8.4-main.2244d791bb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-pipeline",
-  "version": "0.8.3-main.ef1bc66f44",
+  "version": "0.8.4-main.2244d791bb",
   "description": "Pipeline plugin for Composer",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -40,32 +40,33 @@
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
     "effect": "3.19.16",
-    "@dxos/app-toolkit": "0.8.3-main.ef1bc66f44",
-    "@dxos/devtools": "0.8.3-main.ef1bc66f44",
-    "@dxos/async": "0.8.3-main.ef1bc66f44",
-    "@dxos/assistant-toolkit": "0.8.3-main.ef1bc66f44",
-    "@dxos/echo": "0.8.3-main.ef1bc66f44",
-    "@dxos/operation": "0.8.3-main.ef1bc66f44",
-    "@dxos/functions": "0.8.3-main.ef1bc66f44",
-    "@dxos/plugin-deck": "0.8.3-main.ef1bc66f44",
-    "@dxos/plugin-client": "0.8.3-main.ef1bc66f44",
-    "@dxos/app-framework": "0.8.3-main.ef1bc66f44",
-    "@dxos/plugin-graph": "0.8.3-main.ef1bc66f44",
-    "@dxos/plugin-inbox": "0.8.3-main.ef1bc66f44",
-    "@dxos/plugin-markdown": "0.8.3-main.ef1bc66f44",
-    "@dxos/log": "0.8.3-main.ef1bc66f44",
-    "@dxos/react-client": "0.8.3-main.ef1bc66f44",
-    "@dxos/react-ui-list": "0.8.3-main.ef1bc66f44",
-    "@dxos/react-ui-components": "0.8.3-main.ef1bc66f44",
-    "@dxos/react-ui-attention": "0.8.3-main.ef1bc66f44",
-    "@dxos/react-ui-stack": "0.8.3-main.ef1bc66f44",
-    "@dxos/react-ui-mosaic": "0.8.3-main.ef1bc66f44",
-    "@dxos/echo-query": "0.8.3-main.ef1bc66f44",
-    "@dxos/schema": "0.8.3-main.ef1bc66f44",
-    "@dxos/react-ui-form": "0.8.3-main.ef1bc66f44",
-    "@dxos/util": "0.8.3-main.ef1bc66f44",
-    "@dxos/plugin-space": "0.8.3-main.ef1bc66f44",
-    "@dxos/types": "0.8.3-main.ef1bc66f44"
+    "@dxos/app-toolkit": "0.8.4-main.2244d791bb",
+    "@dxos/app-framework": "0.8.4-main.2244d791bb",
+    "@dxos/assistant-toolkit": "0.8.4-main.2244d791bb",
+    "@dxos/async": "0.8.4-main.2244d791bb",
+    "@dxos/echo-atom": "0.8.4-main.2244d791bb",
+    "@dxos/echo": "0.8.4-main.2244d791bb",
+    "@dxos/echo-query": "0.8.4-main.2244d791bb",
+    "@dxos/devtools": "0.8.4-main.2244d791bb",
+    "@dxos/log": "0.8.4-main.2244d791bb",
+    "@dxos/operation": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-client": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-deck": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-graph": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-inbox": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-markdown": "0.8.4-main.2244d791bb",
+    "@dxos/functions": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-attention": "0.8.4-main.2244d791bb",
+    "@dxos/react-client": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-components": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-space": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-form": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-list": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-stack": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-mosaic": "0.8.4-main.2244d791bb",
+    "@dxos/schema": "0.8.4-main.2244d791bb",
+    "@dxos/types": "0.8.4-main.2244d791bb",
+    "@dxos/util": "0.8.4-main.2244d791bb"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -74,23 +75,23 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/plugin-inbox": "0.8.3-main.ef1bc66f44",
-    "@dxos/plugin-attention": "0.8.3-main.ef1bc66f44",
-    "@dxos/plugin-preview": "0.8.3-main.ef1bc66f44",
-    "@dxos/plugin-testing": "0.8.3-main.ef1bc66f44",
-    "@dxos/random": "0.8.3-main.ef1bc66f44",
-    "@dxos/react-ui": "0.8.3-main.ef1bc66f44",
-    "@dxos/plugin-theme": "0.8.3-main.ef1bc66f44",
-    "@dxos/ui-theme": "0.8.3-main.ef1bc66f44",
-    "@dxos/storybook-utils": "0.8.3-main.ef1bc66f44"
+    "@dxos/plugin-attention": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-preview": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-inbox": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-testing": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-theme": "0.8.4-main.2244d791bb",
+    "@dxos/storybook-utils": "0.8.4-main.2244d791bb",
+    "@dxos/random": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.3-main.ef1bc66f44",
-    "@dxos/ui-theme": "0.8.3-main.ef1bc66f44"
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "publishConfig": {
     "access": "public"

package/src/components/PipelineColumn.tsx

@@ -2,17 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import type * as Schema from 'effect/Schema';
 import React, { forwardRef, useMemo, useRef, useState } from 'react';
 
 import { Obj, Query, Type } from '@dxos/echo';
-import { getQueryTarget, resolveSchemaWithRegistry } from '@dxos/plugin-space';
-import { Filter, getSpace, isSpace, useObject, useQuery } from '@dxos/react-client/echo';
-import { ScrollArea, useAsyncEffect, useTranslation } from '@dxos/react-ui';
-import { Card, Focus, Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';
+import { resolveSchemaWithRegistry } from '@dxos/plugin-space';
+import { Filter, getSpace, useObject } from '@dxos/react-client/echo';
+import { useAsyncEffect, useTranslation } from '@dxos/react-ui';
+import { Board, Card, Focus, Mosaic, type MosaicTileProps, useBoard } from '@dxos/react-ui-mosaic';
 import { ProjectionModel, createEchoChangeCallback } from '@dxos/schema';
 import { type Pipeline } from '@dxos/types';
+import { mx } from '@dxos/ui-theme';
 
 import { meta } from '../meta';
 
@@ -24,15 +26,13 @@ import { type ItemProps, usePipeline } from './PipelineComponent';
 
 const PIPELINE_COLUMN_NAME = 'PipelineColumn';
 
-export type PipelineColumnProps = {
-  column: Pipeline.Column;
-};
+export type PipelineColumnProps = Pick<MosaicTileProps<Pipeline.Column>, 'classNames' | 'location' | 'data' | 'debug'>;
 
-// TODO(thure): Duplicates a lot of the same boilerplate as Kanban columns; is there an opportunity to DRY these out?
-// TODO(wittjosiah): Support column DnD reordering.
 // TODO(wittjosiah): Support item DnD reordering (ordering needs to be stored on the view presentation collection).
-export const PipelineColumn = ({ column }: PipelineColumnProps) => {
+export const PipelineColumn = ({ data: column, location, classNames, debug }: PipelineColumnProps) => {
   const { t } = useTranslation(meta.id);
+  const { model } = useBoard<Pipeline.Column, Obj.Unknown>(PIPELINE_COLUMN_NAME);
+  const items = useAtomValue(model.items(column));
   // Subscribe to the view target for reactivity.
   const [viewSnapshot] = useObject(column.view);
   const view = column.view.target;
@@ -50,7 +50,7 @@ export const PipelineColumn = ({ column }: PipelineColumnProps) => {
   }, [JSON.stringify(viewSnapshot?.query.ast)]);
 
   useAsyncEffect(async () => {
-    if (!query || !space) {
+    if (!query || !space?.db) {
       return;
     }
 
@@ -58,12 +58,6 @@ export const PipelineColumn = ({ column }: PipelineColumnProps) => {
     setSchema(() => schema);
   }, [space, query]);
 
-  const queryTarget = getQueryTarget(query.ast, space);
-  const items = useQuery(queryTarget, query);
-  const sortedItems = useMemo(() => {
-    // TODO(burdon): Hack to reverse queue.
-    return isSpace(queryTarget) ? items : [...items.reverse()];
-  }, [queryTarget, items]);
   const projectionModel = useMemo(() => {
     if (!schema || !view) {
       return undefined;
@@ -85,23 +79,29 @@ export const PipelineColumn = ({ column }: PipelineColumnProps) => {
     return null;
   }
 
+  const dragHandleRef = useRef<HTMLButtonElement>(null);
+
   return (
-    <Focus.Group asChild>
-      <div className='grid bs-full card-default-width overflow-hidden grid-rows-[min-content_1fr] density-fine border border-separator rounded-md bg-deckSurface'>
-        <Card.Toolbar>
-          <Card.DragHandle />
-          <Card.Title>{column.name ?? t('untitled view title')}</Card.Title>
-          <Card.Menu />
-        </Card.Toolbar>
-        <Mosaic.Container asChild orientation='vertical' withFocus>
-          <ScrollArea.Root orientation='vertical'>
-            <ScrollArea.Viewport classNames='p-2'>
-              <Mosaic.Stack orientation='vertical' items={sortedItems} getId={(item) => item.id} Tile={Tile} />
-            </ScrollArea.Viewport>
-          </ScrollArea.Root>
-        </Mosaic.Container>
+    <Board.Column.Root
+      data={column}
+      location={location}
+      classNames={classNames}
+      debug={debug}
+      dragHandleRef={dragHandleRef}
+    >
+      <div
+        role='none'
+        data-testid='board-column'
+        className={mx('group/column grid bs-full overflow-hidden grid-rows-[var(--rail-action)_1fr]', classNames)}
+      >
+        <Board.Column.Header
+          classNames='border-be border-separator'
+          label={column.name ?? t('untitled view title')}
+          dragHandleRef={dragHandleRef}
+        />
+        <Board.Column.Body data={column} Tile={Tile} />
       </div>
-    </Focus.Group>
+    </Board.Column.Root>
   );
 };
 

package/src/components/PipelineComponent.stories.tsx

@@ -2,8 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
+import { RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect } from 'react';
 
 import { Filter, Ref } from '@dxos/client/echo';
 import { Obj, Query, Type } from '@dxos/echo';
@@ -15,11 +16,12 @@ import { Form, omitId } from '@dxos/react-ui-form';
 import { withMosaic } from '@dxos/react-ui-mosaic/testing';
 import { Collection, View } from '@dxos/schema';
 import { createObjectFactory } from '@dxos/schema/testing';
+import { withRegistry } from '@dxos/storybook-utils';
 import { Person, Pipeline } from '@dxos/types';
 
 import { translations } from '../translations';
 
-import { type ItemProps, PipelineComponent as PipelineComponent } from './PipelineComponent';
+import { type ItemProps, PipelineComponent, usePipelineBoardModel } from './PipelineComponent';
 
 const StorybookProjectItem = ({ item, projectionModel }: ItemProps) => {
   if (Obj.instanceOf(Person.Person, item)) {
@@ -40,9 +42,11 @@ const StorybookProjectItem = ({ item, projectionModel }: ItemProps) => {
 };
 
 const DefaultStory = () => {
+  const registry = useContext(RegistryContext);
   const { space } = useClientStory();
   const pipelines = useQuery(space?.db, Filter.type(Pipeline.Pipeline));
   const pipeline = pipelines[0];
+  const model = usePipelineBoardModel(pipeline, registry);
 
   const handleAddColumn = useCallback(() => {
     if (!space || !pipeline) {
@@ -72,17 +76,19 @@ const DefaultStory = () => {
   }
 
   return (
-    <PipelineComponent.Root Item={StorybookProjectItem} onAddColumn={handleAddColumn}>
+    <PipelineComponent.Root Item={StorybookProjectItem} model={model} onAddColumn={handleAddColumn}>
       <PipelineComponent.Content pipeline={pipeline} />
     </PipelineComponent.Root>
   );
 };
 
 const MutationsStory = () => {
+  const registry = useContext(RegistryContext);
   const { space } = useClientStory();
   const pipelines = useQuery(space?.db, Filter.type(Pipeline.Pipeline));
   const contacts = useQuery(space?.db, Filter.type(Person.Person));
   const pipeline = pipelines[0];
+  const model = usePipelineBoardModel(pipeline, registry);
 
   const handleAddColumn = useCallback(() => {
     if (!space || !pipeline) {
@@ -141,7 +147,7 @@ const MutationsStory = () => {
   }
 
   return (
-    <PipelineComponent.Root Item={StorybookProjectItem} onAddColumn={handleAddColumn}>
+    <PipelineComponent.Root Item={StorybookProjectItem} model={model} onAddColumn={handleAddColumn}>
       <PipelineComponent.Content pipeline={pipeline} />
     </PipelineComponent.Root>
   );
@@ -152,6 +158,7 @@ const meta = {
   decorators: [
     withTheme(),
     withLayout({ layout: 'column' }),
+    withRegistry,
     withMosaic(),
     withClientProvider({
       types: [Pipeline.Pipeline, View.View, Collection.Collection, Person.Person],

package/src/components/PipelineComponent.tsx

@@ -2,15 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Atom, type Registry, useAtomValue } from '@effect-atom/atom-react';
 import { createContext } from '@radix-ui/react-context';
-import React, { type FC } from 'react';
+import * as Schema from 'effect/Schema';
+import React, { type FC, type PropsWithChildren, useMemo } from 'react';
 
-import { type Obj } from '@dxos/echo';
-import { useObject } from '@dxos/react-client/echo';
+import { Obj, Query } from '@dxos/echo';
+import { AtomObj, AtomQuery } from '@dxos/echo-atom';
+import { getQueryTarget } from '@dxos/plugin-space';
+import { getSpace, isSpace } from '@dxos/react-client/echo';
 import { Toolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
-import { Stack } from '@dxos/react-ui-stack';
+import { Board, type BoardModel, useBoard, useEventHandlerAdapter } from '@dxos/react-ui-mosaic';
 import { type ProjectionModel } from '@dxos/schema';
-import { type Pipeline as PipelineType } from '@dxos/types';
+import { Pipeline, type Pipeline as PipelineType } from '@dxos/types';
 
 import { meta } from '../meta';
 
@@ -35,16 +39,90 @@ type PipelineContextValue = {
 // Root
 //
 
-type PipelineRootProps = PipelineContextValue;
+type PipelineRootProps = PropsWithChildren<
+  PipelineContextValue & {
+    model: BoardModel<PipelineType.Column, Obj.Unknown>;
+  }
+>;
 
 const PIPELINE_ROOT = 'Pipeline.Root';
 
-const [PipelineRoot, usePipeline] = createContext<PipelineContextValue>(PIPELINE_ROOT, {
+const [PipelineRootContext, usePipeline] = createContext<PipelineContextValue>(PIPELINE_ROOT, {
   Item: itemNoOp,
 });
 
+const PipelineRoot = ({ model, children, ...contextValue }: PipelineRootProps) => (
+  <PipelineRootContext {...contextValue}>
+    <Board.Root model={model}>{children}</Board.Root>
+  </PipelineRootContext>
+);
+
 PipelineRoot.displayName = PIPELINE_ROOT;
 
+//
+// usePipelineBoardModel
+//
+
+const emptyColumnsAtom = Atom.make(() => [] as PipelineType.Column[]);
+const emptyItemsAtom = Atom.make(() => [] as Obj.Unknown[]);
+const emptyPipelineModel: BoardModel<PipelineType.Column, Obj.Unknown> = {
+  getColumnId: (data) => (data as PipelineType.Column).view.dxn.toString(),
+  getItemId: (data) => (data as Obj.Unknown).id,
+  isColumn: (obj: unknown): obj is PipelineType.Column => Schema.is(Pipeline.Column)(obj),
+  isItem: (obj): obj is Obj.Unknown => Obj.isObject(obj),
+  columns: emptyColumnsAtom,
+  items: () => emptyItemsAtom,
+  getColumns: () => [],
+  getItems: () => [],
+};
+
+const usePipelineBoardModel = (
+  pipeline: PipelineType.Pipeline | undefined,
+  registry: Registry.Registry,
+): BoardModel<PipelineType.Column, Obj.Unknown> =>
+  useMemo<BoardModel<PipelineType.Column, Obj.Unknown>>(() => {
+    if (pipeline == null) {
+      return emptyPipelineModel;
+    }
+    const space = getSpace(pipeline);
+    const columnsAtom = AtomObj.makeProperty(pipeline, 'columns');
+    const columnAtomFamily = Atom.family<string, Atom.Atom<PipelineType.Column | undefined>>((viewKey: string) =>
+      Atom.make((get) => {
+        const columns = get(columnsAtom);
+        return columns.find((c) => c.view.dxn.toString() === viewKey);
+      }),
+    );
+    const itemsAtomFamily = Atom.family<string, Atom.Atom<Obj.Unknown[]>>((viewKey: string) =>
+      Atom.make((get) => {
+        const column = get(columnAtomFamily(viewKey));
+        if (column == null) {
+          return [];
+        }
+        const viewSnapshot = get(AtomObj.make(column.view));
+        if (!viewSnapshot?.query?.ast) {
+          return [];
+        }
+        const query = Query.fromAst(JSON.parse(JSON.stringify(viewSnapshot.query.ast)));
+        const queryTarget = space ? getQueryTarget(query.ast, space) : undefined;
+        if (!queryTarget) {
+          return [];
+        }
+        const raw = get(AtomQuery.make(queryTarget, query));
+        return isSpace(queryTarget) ? raw : [...raw].reverse();
+      }),
+    );
+    return {
+      getColumnId: (data) => (data as PipelineType.Column).view.dxn.toString(),
+      getItemId: (data) => (data as Obj.Unknown).id,
+      isColumn: (obj: unknown): obj is PipelineType.Column => Schema.is(Pipeline.Column)(obj),
+      isItem: (obj: unknown): obj is Obj.Unknown => Obj.isObject(obj),
+      columns: columnsAtom,
+      items: (column) => itemsAtomFamily(column.view.dxn.toString()),
+      getColumns: () => [...registry.get(columnsAtom)],
+      getItems: (column) => registry.get(itemsAtomFamily(column.view.dxn.toString())) ?? [],
+    };
+  }, [pipeline, registry]);
+
 //
 // Content
 //
@@ -56,15 +134,20 @@ type PipelineContentProps = {
 };
 
 const PipelineContent = ({ pipeline }: PipelineContentProps) => {
-  const [columns] = useObject(pipeline, 'columns');
-
-  return (
-    <Stack orientation='horizontal' size='contain' rail={false}>
-      {columns.map((column) => {
-        return <PipelineColumn key={column.view.dxn.toString()} column={column} />;
-      })}
-    </Stack>
-  );
+  const { model } = useBoard(PIPELINE_CONTENT_NAME);
+  const columns = useAtomValue(model.columns);
+  const eventHandler = useEventHandlerAdapter<PipelineType.Column, Obj.Unknown>({
+    id: pipeline.id,
+    // TODO(wittjosiah): Cast because columns array is readonly.
+    items: columns as any,
+    getId: model.getColumnId,
+    get: (data) => data as unknown as Obj.Unknown,
+    make: (object) => object as unknown as PipelineType.Column,
+    canDrop: ({ source }) => model.isColumn(source.data),
+    onChange: (mutate) => Obj.change(pipeline, (p) => mutate(p.columns)),
+  });
+
+  return <Board.Content id='pipeline' eventHandler={eventHandler} Tile={PipelineColumn} />;
 };
 
 PipelineContent.displayName = PIPELINE_CONTENT_NAME;
@@ -98,6 +181,6 @@ export const PipelineComponent = {
   Toolbar: PipelineToolbar,
 };
 
-export { usePipeline };
+export { usePipeline, usePipelineBoardModel };
 
 export type { ItemProps, PipelineContextValue, PipelineRootProps };

package/src/components/PipelineContainer.stories.tsx

@@ -39,7 +39,7 @@ const DefaultStory = () => {
   }
 
   return (
-    <Stack orientation='horizontal' size='split' rail={false} classNames='pli-0'>
+    <Stack orientation='horizontal' size='split' rail={false} classNames='pli-0 bs-full'>
       <PipelineContainer role='article' subject={pipeline} />
       <PipelineObjectSettings pipeline={pipeline} classNames='border-is border-separator' />
     </Stack>
@@ -144,7 +144,7 @@ const meta = {
               space.db.add(pipeline);
 
               // Generate sample Organizations
-              Array.from({ length: 5 }).forEach(() => {
+              Array.from({ length: 20 }).forEach(() => {
                 const org = Obj.make(
                   Organization.Organization,
                   {
@@ -161,7 +161,7 @@ const meta = {
               });
 
               // Generate sample Tasks
-              Array.from({ length: 8 }).forEach(() => {
+              Array.from({ length: 20 }).forEach(() => {
                 const task = Obj.make(
                   Task.Task,
                   {
@@ -181,7 +181,7 @@ const meta = {
               yield* Effect.promise(() => factory([{ type: Person.Person, count: 12 }]));
 
               // Generate sample Projects
-              Array.from({ length: 3 }).forEach(() => {
+              Array.from({ length: 20 }).forEach(() => {
                 const nestedProject = Pipeline.make({
                   name: faker.commerce.productName(),
                   description: faker.lorem.sentence(),
@@ -190,7 +190,7 @@ const meta = {
               });
 
               // Generate sample Messages
-              const messages = Array.from({ length: 6 }).map(() => {
+              const messages = Array.from({ length: 20 }).map(() => {
                 const message = Obj.make(Message.Message, {
                   created: faker.date.recent().toISOString(),
                   sender: { role: 'user' },

package/src/components/PipelineContainer.tsx

@@ -4,6 +4,8 @@
 
 import React, { useCallback } from 'react';
 
+import { Capabilities } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/ui';
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { Surface } from '@dxos/app-framework/ui';
 import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
@@ -13,11 +15,13 @@ import { Layout } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import { type Pipeline as PipelineType } from '@dxos/types';
 
-import { type ItemProps, PipelineComponent } from './PipelineComponent';
+import { type ItemProps, PipelineComponent, usePipelineBoardModel } from './PipelineComponent';
 
 export type PipelineContainerProps = SurfaceComponentProps<PipelineType.Pipeline>;
 
 export const PipelineContainer = ({ role, subject: pipeline }: PipelineContainerProps) => {
+  const registry = useCapability(Capabilities.AtomRegistry);
+  const model = usePipelineBoardModel(pipeline, registry);
   const { invokePromise } = useOperationInvoker();
   const attendableId = Obj.getDXN(pipeline).toString();
   const { hasAttention } = useAttention(attendableId);
@@ -33,7 +37,7 @@ export const PipelineContainer = ({ role, subject: pipeline }: PipelineContainer
 
   return (
     <Layout.Main role={role} toolbar>
-      <PipelineComponent.Root Item={PipelineItem} onAddColumn={handleColumnAdd}>
+      <PipelineComponent.Root Item={PipelineItem} model={model} onAddColumn={handleColumnAdd}>
         <PipelineComponent.Toolbar disabled={!hasAttention} />
         <PipelineComponent.Content pipeline={pipeline} />
       </PipelineComponent.Root>