@dxos/plugin-pipeline 0.8.4-staging.60fe92afc8 → 0.9.1-main.c7dcc2e112

package/dx.config.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Config2 } from '@dxos/app-framework/config';
+import { trim } from '@dxos/util';
+
+export default Config2.make({
+  plugin: {
+    key: 'org.dxos.plugin.pipeline',
+    name: 'Pipelines',
+    author: 'DXOS',
+    description: trim`
+      A multi-column Kanban-style pipeline plugin for DXOS Composer.
+      Each Pipeline holds an ordered set of Columns; each Column is backed by a ViewModel whose query
+      can select any ECHO object type — messages, contacts, documents, or custom types — from the active space.
+
+      Columns are fully configurable through the Settings companion panel, where users can add, rename,
+      reorder, and delete columns and edit the underlying query and projection for each column.
+      Objects can be dragged between columns and the full pipeline state, including column order and
+      per-column item order, persists collaboratively via ECHO.
+
+      A built-in Research template scaffolds a four-column pipeline wired to the Mailbox, Contacts,
+      Organizations, and Notes objects in the space, providing an out-of-the-box CRM-style workflow.
+      Pipeline articles also expose Invocations and Automation companion tabs for AI-driven automation.
+    `,
+    source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-pipeline',
+    icon: { key: 'ph--path--regular', hue: 'purple' },
+    spec: 'PLUGIN.mdl',
+    tags: ['labs'],
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-pipeline",
-  "version": "0.8.4-staging.60fe92afc8",
+  "version": "0.9.1-main.c7dcc2e112",
   "description": "Pipeline plugin for Composer",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -81,6 +81,7 @@
   "types": "dist/types/src/index.d.ts",
   "files": [
     "dist",
+    "dx.config.ts",
     "src",
     "PLUGIN.mdl"
   ],
@@ -89,30 +90,31 @@
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-slot": "1.1.2",
     "effect": "3.21.3",
-    "@dxos/app-toolkit": "0.8.4-staging.60fe92afc8",
-    "@dxos/compute": "0.8.4-staging.60fe92afc8",
-    "@dxos/app-framework": "0.8.4-staging.60fe92afc8",
-    "@dxos/echo": "0.8.4-staging.60fe92afc8",
-    "@dxos/echo-query": "0.8.4-staging.60fe92afc8",
-    "@dxos/devtools": "0.8.4-staging.60fe92afc8",
-    "@dxos/keys": "0.8.4-staging.60fe92afc8",
-    "@dxos/log": "0.8.4-staging.60fe92afc8",
-    "@dxos/plugin-graph": "0.8.4-staging.60fe92afc8",
-    "@dxos/effect": "0.8.4-staging.60fe92afc8",
-    "@dxos/plugin-client": "0.8.4-staging.60fe92afc8",
-    "@dxos/plugin-inbox": "0.8.4-staging.60fe92afc8",
-    "@dxos/plugin-space": "0.8.4-staging.60fe92afc8",
-    "@dxos/plugin-markdown": "0.8.4-staging.60fe92afc8",
-    "@dxos/react-client": "0.8.4-staging.60fe92afc8",
-    "@dxos/react-ui-attention": "0.8.4-staging.60fe92afc8",
-    "@dxos/react-ui-form": "0.8.4-staging.60fe92afc8",
-    "@dxos/react-ui-menu": "0.8.4-staging.60fe92afc8",
-    "@dxos/react-ui-mosaic": "0.8.4-staging.60fe92afc8",
-    "@dxos/schema": "0.8.4-staging.60fe92afc8",
-    "@dxos/react-ui-stack": "0.8.4-staging.60fe92afc8",
-    "@dxos/react-ui-list": "0.8.4-staging.60fe92afc8",
-    "@dxos/types": "0.8.4-staging.60fe92afc8",
-    "@dxos/util": "0.8.4-staging.60fe92afc8"
+    "@dxos/app-toolkit": "0.9.1-main.c7dcc2e112",
+    "@dxos/app-framework": "0.9.1-main.c7dcc2e112",
+    "@dxos/compute": "0.9.1-main.c7dcc2e112",
+    "@dxos/client": "0.9.1-main.c7dcc2e112",
+    "@dxos/devtools": "0.9.1-main.c7dcc2e112",
+    "@dxos/effect": "0.9.1-main.c7dcc2e112",
+    "@dxos/echo-query": "0.9.1-main.c7dcc2e112",
+    "@dxos/keys": "0.9.1-main.c7dcc2e112",
+    "@dxos/echo": "0.9.1-main.c7dcc2e112",
+    "@dxos/plugin-client": "0.9.1-main.c7dcc2e112",
+    "@dxos/plugin-graph": "0.9.1-main.c7dcc2e112",
+    "@dxos/plugin-inbox": "0.9.1-main.c7dcc2e112",
+    "@dxos/log": "0.9.1-main.c7dcc2e112",
+    "@dxos/plugin-markdown": "0.9.1-main.c7dcc2e112",
+    "@dxos/plugin-space": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-client": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui-attention": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui-menu": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui-list": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui-form": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui-mosaic": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui-stack": "0.9.1-main.c7dcc2e112",
+    "@dxos/types": "0.9.1-main.c7dcc2e112",
+    "@dxos/util": "0.9.1-main.c7dcc2e112",
+    "@dxos/schema": "0.9.1-main.c7dcc2e112"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -121,24 +123,24 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "^8.0.16",
-    "@dxos/echo-client": "0.8.4-staging.60fe92afc8",
-    "@dxos/plugin-attention": "0.8.4-staging.60fe92afc8",
-    "@dxos/plugin-inbox": "0.8.4-staging.60fe92afc8",
-    "@dxos/plugin-preview": "0.8.4-staging.60fe92afc8",
-    "@dxos/plugin-testing": "0.8.4-staging.60fe92afc8",
-    "@dxos/react-ui": "0.8.4-staging.60fe92afc8",
-    "@dxos/storybook-utils": "0.8.4-staging.60fe92afc8",
-    "@dxos/random": "0.8.4-staging.60fe92afc8",
-    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8",
-    "@dxos/plugin-theme": "0.8.4-staging.60fe92afc8"
+    "@dxos/echo-client": "0.9.1-main.c7dcc2e112",
+    "@dxos/plugin-inbox": "0.9.1-main.c7dcc2e112",
+    "@dxos/plugin-preview": "0.9.1-main.c7dcc2e112",
+    "@dxos/plugin-attention": "0.9.1-main.c7dcc2e112",
+    "@dxos/plugin-testing": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
+    "@dxos/random": "0.9.1-main.c7dcc2e112",
+    "@dxos/storybook-utils": "0.9.1-main.c7dcc2e112",
+    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
+    "@dxos/plugin-theme": "0.9.1-main.c7dcc2e112"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "effect": "3.21.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-staging.60fe92afc8",
-    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8"
+    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui": "0.9.1-main.c7dcc2e112"
   },
   "publishConfig": {
     "access": "public"

package/src/PipelinePlugin.test.ts

@@ -11,7 +11,7 @@ import { PipelinePlugin } from '#plugin';
 
 import { meta } from './meta';
 
-const moduleId = (name: string) => `${meta.id}.module.${name}`;
+const moduleId = (name: string) => `${meta.profile.key}.module.${name}`;
 
 describe('PipelinePlugin', () => {
   test('modules activate on the expected events', async ({ expect }) => {

package/src/PipelinePlugin.tsx

@@ -6,7 +6,7 @@ import { Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
 import { Pipeline } from '@dxos/types';
 
-import { AppGraphBuilder, CreateObject, ReactSurface } from '#capabilities';
+import { AppGraphBuilder, CreateObject, NavigationResolver, ReactSurface } from '#capabilities';
 import { meta } from '#meta';
 import { translations } from '#translations';
 
@@ -16,11 +16,12 @@ import pluginSpec from '../PLUGIN.mdl?raw';
 export const PipelinePlugin = Plugin.define(meta).pipe(
   AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
   AppPlugin.addCreateObjectModule({ activate: CreateObject }),
+  AppPlugin.addNavigationResolverModule({ activate: NavigationResolver }),
   AppPlugin.addSchemaModule({ schema: [Pipeline.Pipeline] }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
   AppPlugin.addTranslationsModule({ translations }),
   AppPlugin.addPluginAssetModule({
-    asset: { pluginId: meta.id, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
+    asset: { pluginId: meta.profile.key, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
   }),
   Plugin.make,
 );

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

@@ -3,17 +3,51 @@
 //
 
 import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
 
 import { Capability } from '@dxos/app-framework';
-import { AppCapabilities, AppNode } from '@dxos/app-toolkit';
-import { GraphBuilder } from '@dxos/plugin-graph';
+import { AppCapabilities, AppNode, TypeSection } from '@dxos/app-toolkit';
+import { isSpace } from '@dxos/client/echo';
+import { Operation } from '@dxos/compute';
+import { Type } from '@dxos/echo';
+import { GraphBuilder, Node } from '@dxos/plugin-graph';
+import { SpaceOperation } from '@dxos/plugin-space';
 import { Pipeline } from '@dxos/types';
 
 import { meta } from '#meta';
 
+import { getPipelinesPath } from '../paths';
+
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     const extensions = yield* Effect.all([
+      TypeSection.createTypeSectionExtension(Pipeline.Pipeline),
+
+      GraphBuilder.createExtension({
+        id: 'pipelinesSectionActions',
+        match: (node) => {
+          const space = isSpace(node.properties.space) ? node.properties.space : undefined;
+          return node.type === Type.getTypename(Pipeline.Pipeline) && space ? Option.some(space) : Option.none();
+        },
+        actions: (space) =>
+          Effect.succeed([
+            Node.makeAction({
+              id: 'create-pipeline',
+              data: () =>
+                Operation.invoke(SpaceOperation.OpenCreateObject, {
+                  target: space.db,
+                  typename: Type.getTypename(Pipeline.Pipeline),
+                  targetNodeId: getPipelinesPath(space.db.spaceId),
+                }),
+              properties: {
+                label: ['add-object.label', { ns: Type.getTypename(Pipeline.Pipeline) }],
+                icon: 'ph--plus--regular',
+                disposition: 'list-item-primary',
+              },
+            }),
+          ]),
+      }),
+
       GraphBuilder.createTypeExtension({
         id: 'triggers',
         type: Pipeline.Pipeline,
@@ -21,13 +55,13 @@ export default Capability.makeModule(
           Effect.succeed([
             AppNode.makeCompanion({
               id: 'invocations',
-              label: ['pipeline-invocations.label', { ns: meta.id }],
+              label: ['pipeline-invocations.label', { ns: meta.profile.key }],
               icon: 'ph--clock-countdown--regular',
               data: 'invocations',
             }),
             AppNode.makeCompanion({
               id: 'automation',
-              label: ['pipeline-automation.label', { ns: meta.id }],
+              label: ['pipeline-automation.label', { ns: meta.profile.key }],
               icon: 'ph--lightning--regular',
               data: 'automation',
             }),

package/src/capabilities/create-object.ts

@@ -11,6 +11,8 @@ import { SpaceOperation } from '@dxos/plugin-space';
 import { SpaceCapabilities } from '@dxos/plugin-space';
 import { Pipeline } from '@dxos/types';
 
+import { getPipelinesPath } from '../paths';
+
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     return Capability.contributes(SpaceCapabilities.CreateObjectEntry, {
@@ -22,7 +24,7 @@ export default Capability.makeModule(
             object,
             target: options.target,
             hidden: true,
-            targetNodeId: options.targetNodeId,
+            targetNodeId: options.targetNodeId ?? getPipelinesPath(options.db.spaceId),
           });
         }),
     });

package/src/capabilities/index.ts

@@ -6,4 +6,5 @@ import { Capability } from '@dxos/app-framework';
 
 export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
 export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
+export const NavigationResolver = Capability.lazy('NavigationResolver', () => import('./navigation-resolver'));
 export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

package/src/capabilities/navigation-resolver.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, TypeSection } from '@dxos/app-toolkit';
+import { Pipeline } from '@dxos/types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(
+      AppCapabilities.NavigationPathResolver,
+      TypeSection.createTypeSectionPathResolver(Pipeline.Pipeline),
+    );
+  }),
+);

package/src/capabilities/react-surface.tsx

@@ -46,7 +46,7 @@ export default Capability.makeModule(() =>
       Surface.create({
         id: 'objectProperties',
         filter: AppSurface.object(AppSurface.ObjectProperties, Pipeline.Pipeline),
-        component: ({ data }) => <PipelineProperties pipeline={data.subject} />,
+        component: ({ data }) => <PipelineProperties subject={data.subject} />,
       }),
     ]),
   ),

package/src/components/PipelineComponent/PipelineColumn.tsx

@@ -8,8 +8,8 @@ import React, { forwardRef, useMemo, useRef, useState } from 'react';
 import { resolveSchemaWithRegistry } from '@dxos/app-toolkit/query';
 import { Filter, Obj, Query, Type } from '@dxos/echo';
 import { useObject } from '@dxos/react-client/echo';
-import { Panel, Toolbar, useAsyncEffect, useTranslation } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui';
+import { Panel, useAsyncEffect, useTranslation } from '@dxos/react-ui';
+import { Card, Icon, IconButton } from '@dxos/react-ui';
 import { Menu } from '@dxos/react-ui-menu';
 import { Board, Focus, Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';
 import { ProjectionModel, createEchoChangeCallback } from '@dxos/schema';
@@ -29,7 +29,7 @@ export type PipelineColumnProps = Pick<MosaicTileProps<Pipeline.Column>, 'classN
 
 // TODO(wittjosiah): Support item DnD reordering (ordering needs to be stored on the view presentation collection).
 export const PipelineColumn = ({ data: column, location, classNames, debug }: PipelineColumnProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);
   // Subscribe to the view target for reactivity.
   const [viewSnapshot] = useObject(column.view);
@@ -88,7 +88,7 @@ export const PipelineColumn = ({ data: column, location, classNames, debug }: Pi
         <Panel.Toolbar asChild>
           <Board.Column.Header
             classNames='_opacity-10'
-            label={column.name || t('untitled-view.title')}
+            label={column.name || t('untitled-column.title')}
             dragHandleRef={setDragHandle}
           />
         </Panel.Toolbar>
@@ -125,20 +125,17 @@ const ItemTile = forwardRef<HTMLDivElement, ItemTileProps>(
           <Focus.Item asChild>
             <Card.Root classNames={classNames} ref={composedRef}>
               <Card.Header>
-                <Card.Icon icon={icon} />
+                <Card.Block>
+                  <Icon icon={icon} />
+                </Card.Block>
                 <Card.Title>{Obj.getLabel(data, { fallback: 'typename' })}</Card.Title>
                 {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
-                <Card.IconBlock>
+                <Card.Block end>
                   <Menu.Trigger asChild>
-                    <Toolbar.IconButton
-                      iconOnly
-                      variant='ghost'
-                      icon='ph--dots-three-vertical--regular'
-                      label='Actions'
-                    />
+                    <IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Actions' />
                   </Menu.Trigger>
                   <Menu.Content />
-                </Card.IconBlock>
+                </Card.Block>
               </Card.Header>
               <Card.Body>
                 <Item {...itemProps} />

package/src/components/PipelineComponent/PipelineComponent.tsx

@@ -112,7 +112,7 @@ PipelineColumns.displayName = PIPELINE_COLUMNS_NAME;
 const PIPELINE_TOOLBAR_NAME = 'Pipeline.Toolbar';
 
 export const PipelineToolbar = composable<HTMLDivElement, ToolbarRootProps>(({ children, ...props }, forwardedRef) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { onAddColumn } = usePipeline(PIPELINE_TOOLBAR_NAME);
 
   return (

package/src/containers/PipelineArticle/PipelineArticle.stories.tsx

@@ -42,7 +42,9 @@ const DefaultStory = () => {
   return (
     <div className='grow grid grid-cols-[1fr_350px] overflow-hidden h-full w-full'>
       <PipelineArticle role='article' subject={pipeline} attendableId='test' />
-      <PipelineProperties pipeline={pipeline} classNames='border-s border-separator' />
+      <div className='overflow-y-auto border-is border-separator'>
+        <PipelineProperties subject={pipeline} />
+      </div>
     </div>
   );
 };
@@ -201,9 +203,7 @@ const meta = {
                 );
               }
             }).pipe(
-              Effect.provide(
-                Layer.merge(Database.layer(personalSpace.db), createFeedServiceLayer(personalSpace.queues)),
-              ),
+              Effect.provide(Layer.merge(Database.layer(personalSpace.db), createFeedServiceLayer(personalSpace.db))),
             );
           }),
         }),

package/src/containers/PipelineArticle/PipelineArticle.tsx

@@ -73,7 +73,7 @@ const PipelineItem = ({ item, projectionModel }: ItemProps) => {
 
   return (
     <Surface.Surface
-      type={AppSurface.Card}
+      type={AppSurface.CardContent}
       data={{
         subject: item,
         projection: projectionModel,

package/src/containers/PipelineProperties/PipelineProperties.stories.tsx

@@ -0,0 +1,150 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Collection, Database, Feed, Filter, JsonSchema, Obj, Query, Ref, Scope, Tag, View } from '@dxos/echo';
+import { createFeedServiceLayer } from '@dxos/echo-client';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
+import { corePlugins } from '@dxos/plugin-testing';
+import { random } from '@dxos/random';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { ObjectProperties } from '@dxos/react-ui-form';
+import { translations as formTranslations } from '@dxos/react-ui-form/translations';
+import { translations as stackTranslations } from '@dxos/react-ui-stack/translations';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+import { ViewModel } from '@dxos/schema';
+import { createObjectFactory } from '@dxos/schema/testing';
+import { Message, Organization, Person, Pipeline, Task } from '@dxos/types';
+
+import { translations } from '#translations';
+
+import { PipelineProperties } from './PipelineProperties';
+
+random.seed(0);
+
+const DefaultStory = () => {
+  const [space] = useSpaces();
+  const pipelines = useQuery(space?.db, Filter.type(Pipeline.Pipeline));
+  const pipeline = pipelines.find((pipeline) => (pipeline.columns?.length ?? 0) > 0);
+  if (!pipeline) {
+    return <Loading data={{ pipelines: pipelines.length }} />;
+  }
+
+  return (
+    <ObjectProperties object={pipeline}>
+      <PipelineProperties subject={pipeline} />
+    </ObjectProperties>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-pipeline/containers/PipelineProperties',
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [
+            Tag.Tag,
+            Feed.Feed,
+            Pipeline.Pipeline,
+            View.View,
+            Collection.Collection,
+            Organization.Organization,
+            Task.Task,
+            Person.Person,
+            Message.Message,
+          ],
+          onClientInitialized: Effect.fnUntraced(function* ({ client }) {
+            const { personalSpace } = yield* initializeIdentity(client);
+
+            yield* Effect.gen(function* () {
+              const tag = yield* Database.add(Tag.make({ label: 'important', hue: 'green' }));
+              const tagUri = Obj.getURI(tag);
+
+              // Create a view for Contacts.
+              const personView = ViewModel.make({
+                query: Query.select(Filter.type(Person.Person)),
+                jsonSchema: JsonSchema.toJsonSchema(Person.Person),
+              });
+
+              // Create a view for Organizations.
+              const organizationView = ViewModel.make({
+                query: Query.select(Filter.type(Organization.Organization)).select(Filter.tag(tagUri)),
+                jsonSchema: JsonSchema.toJsonSchema(Organization.Organization),
+              });
+
+              // Create a view for Tasks.
+              const taskView = ViewModel.make({
+                query: Query.select(Filter.type(Task.Task)).select(Filter.tag(tagUri)),
+                jsonSchema: JsonSchema.toJsonSchema(Task.Task),
+              });
+
+              // Create a feed for Messages.
+              const messageFeed = yield* Database.add(Feed.make({ name: 'Messages' }));
+              const messageView = ViewModel.make({
+                query: Query.select(Filter.type(Message.Message)).from(Scope.feed(Obj.getURI(messageFeed))),
+                jsonSchema: JsonSchema.toJsonSchema(Message.Message),
+              });
+
+              // Create pipeline with columns.
+              const pipeline = Pipeline.make({
+                columns: [
+                  {
+                    name: 'Contacts',
+                    view: Ref.make(personView),
+                    order: [],
+                  },
+                  {
+                    name: 'Organizations',
+                    view: Ref.make(organizationView),
+                    order: [],
+                  },
+                  {
+                    name: 'Tasks',
+                    view: Ref.make(taskView),
+                    order: [],
+                  },
+                  {
+                    name: 'Messages',
+                    view: Ref.make(messageView),
+                    order: [],
+                  },
+                ],
+              });
+              yield* Database.add(pipeline);
+
+              // Generate sample Contacts.
+              const factory = createObjectFactory(personalSpace.db, random as any);
+              yield* Effect.promise(() => factory([{ type: Person.Person, count: 12 }]));
+            }).pipe(
+              Effect.provide(Layer.merge(Database.layer(personalSpace.db), createFeedServiceLayer(personalSpace.db))),
+            );
+          }),
+        }),
+        PreviewPlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations: [...translations, ...formTranslations, ...stackTranslations],
+  },
+} satisfies Meta<typeof PipelineProperties>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};