@dxos/plugin-pipeline 0.8.4-main.3eb6e50203 → 0.8.4-main.3fbcb4aa9b

package/src/{components/PipelineSettings.tsx → containers/PipelineProperties/PipelineProperties.tsx}

@@ -5,43 +5,43 @@
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
-import { DXN, Filter, Obj, Query, type QueryAST, Ref, Tag, Type } from '@dxos/echo';
-import { type Mutable } from '@dxos/echo/internal';
-import { useTypeOptions } from '@dxos/plugin-space';
-import { resolveSchemaWithRegistry } from '@dxos/plugin-space';
-import { getSpace, useQuery } from '@dxos/react-client/echo';
+import { resolveSchemaWithRegistry } from '@dxos/app-toolkit/query';
+import { useTypeOptions } from '@dxos/app-toolkit/ui';
+import { DXN, Filter, JsonSchema, Obj, Query, type QueryAST, Ref, Tag } from '@dxos/echo';
+import { type JsonPath, type Mutable } from '@dxos/echo/internal';
+import { getSpace, useObject, useQuery } from '@dxos/react-client/echo';
 import { IconButton, type ThemedClassName, useAsyncEffect, useTranslation } from '@dxos/react-ui';
 import { Form, ViewEditor } from '@dxos/react-ui-form';
 import { List } from '@dxos/react-ui-list';
-import { type ProjectionModel, View } from '@dxos/schema';
-import { Pipeline, Task } from '@dxos/types';
+import { type ProjectionModel, ViewModel } from '@dxos/schema';
+import { Pipeline } from '@dxos/types';
 import { mx, osTranslations, subtleHover } from '@dxos/ui-theme';
 import { arrayMove } from '@dxos/util';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
 
 const listGrid = 'grid grid-cols-[min-content_1fr_min-content_min-content_min-content]';
 const listItemGrid = 'grid grid-cols-subgrid col-span-5';
 
 const ColumnFormSchema = Pipeline.Column.pipe(Schema.mutable, Schema.pick('name'));
 
-// TODO(burdon): Standardize Object/Plugin settings.
-export type PipelineObjectSettingsProps = ThemedClassName<{
+export type PipelinePropertiesProps = ThemedClassName<{
   pipeline: Pipeline.Pipeline;
 }>;
 
 /**
  * Supports editing the pipeline view.
  */
-export const PipelineObjectSettings = ({ classNames, pipeline }: PipelineObjectSettingsProps) => {
+export const PipelineProperties = ({ classNames, pipeline }: PipelinePropertiesProps) => {
   const { t } = useTranslation(meta.id);
   const space = getSpace(pipeline);
   const [expandedId, setExpandedId] = useState<string>();
+  const [columns, updateColumns] = useObject(pipeline, 'columns');
   const column = useMemo(
-    () => pipeline.columns.find((column) => column.view.dxn.toString() === expandedId),
-    [pipeline.columns, expandedId],
+    () => columns.find((column) => column.view.dxn.toString() === expandedId),
+    [columns, expandedId],
   );
-  const view = column?.view.target;
+  const [view, updateView] = useObject(column?.view);
   const [schema, setSchema] = useState<Schema.Schema.AnyNoContext>(() => Schema.Struct({}));
   const projectionRef = useRef<ProjectionModel>(null);
   const tags = useQuery(space?.db, Filter.type(Tag.Tag));
@@ -50,7 +50,6 @@ export const PipelineObjectSettings = ({ classNames, pipeline }: PipelineObjectS
     annotation: {
       location: ['database', 'runtime'],
       kind: ['user'],
-      registered: ['registered', 'unregistered'],
     },
   });
 
@@ -67,10 +66,10 @@ export const PipelineObjectSettings = ({ classNames, pipeline }: PipelineObjectS
 
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) =>
-      Obj.change(pipeline, (p) => {
-        arrayMove(p.columns, fromIndex, toIndex);
+      updateColumns((columns) => {
+        arrayMove(columns, fromIndex, toIndex);
       }),
-    [pipeline],
+    [updateColumns],
   );
 
   const handleQueryChanged = useCallback(
@@ -80,26 +79,42 @@ export const PipelineObjectSettings = ({ classNames, pipeline }: PipelineObjectS
       }
 
       const queue = target && DXN.tryParse(target) ? target : undefined;
-      const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
-      Obj.change(view, (v) => {
-        v.query.ast = query.ast as Mutable<typeof query.ast>;
+      const query = queue ? Query.fromAst(newQuery).from({ queues: [queue] }) : Query.fromAst(newQuery);
+      updateView((view) => {
+        view.query.ast = query.ast as Mutable<typeof query.ast>;
       });
       const newSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, query.ast);
       if (!newSchema) {
         return;
       }
 
-      const newView = View.make({
+      const newView = ViewModel.make({
         query,
-        jsonSchema: Type.toJsonSchema(newSchema),
+        jsonSchema: JsonSchema.toJsonSchema(newSchema),
       });
-      Obj.change(view, (v) => {
-        v.projection = Obj.getSnapshot(newView).projection as Mutable<typeof v.projection>;
+      updateView((view) => {
+        view.projection = Obj.getSnapshot(newView).projection as Mutable<typeof view.projection>;
       });
 
       setSchema(() => newSchema);
     },
-    [view, schema],
+    [view, updateView, schema],
+  );
+
+  const handleColumnValuesChanged = useCallback(
+    (column: Pipeline.Column) =>
+      (newValues: { name?: string }, { changed }: { changed: Record<JsonPath, boolean> }) => {
+        if (changed['name' as JsonPath]) {
+          const columnIndex = columns.findIndex((c) => c === column);
+          if (columnIndex === -1) {
+            return;
+          }
+          updateColumns((cols) => {
+            cols[columnIndex].name = newValues.name ?? '';
+          });
+        }
+      },
+    [columns, updateColumns],
   );
 
   const handleToggleField = useCallback((column: Pipeline.Column) => {
@@ -114,50 +129,42 @@ export const PipelineObjectSettings = ({ classNames, pipeline }: PipelineObjectS
         setExpandedId(undefined);
       }
 
-      const index = pipeline.columns.findIndex((l) => l === column);
+      const index = columns.findIndex((l) => l === column);
       const viewToRemove = await column.view.load();
-      Obj.change(pipeline, (p) => {
-        p.columns.splice(index, 1);
+      updateColumns((columns) => {
+        columns.splice(index, 1);
       });
       space?.db.remove(viewToRemove);
     },
-    [expandedId, pipeline.columns, space],
+    [expandedId, columns, updateColumns, space],
   );
 
   const handleAdd = useCallback(() => {
-    const newView = View.make({
-      query: Query.select(Filter.type(Task.Task)),
-      jsonSchema: Type.toJsonSchema(Task.Task),
+    if (!space) {
+      return;
+    }
+    const newView = ViewModel.make({
+      query: Query.select(Filter.nothing()),
+      jsonSchema: JsonSchema.toJsonSchema(Schema.Struct({})),
     });
-    Obj.change(pipeline, (p) => {
-      p.columns.push({
-        name: 'Tasks',
+    space.db.add(newView);
+    updateColumns((columns) => {
+      columns.push({
+        name: '',
         // Type assertion needed due to QueryAST type variance.
-        view: Ref.make(newView) as (typeof p.columns)[number]['view'],
+        view: Ref.make(newView) as (typeof columns)[number]['view'],
         order: [],
       });
     });
     setExpandedId(newView.id);
-  }, [pipeline]);
-
-  const handleColumnSave = useCallback(
-    (values: Schema.Schema.Type<typeof ColumnFormSchema>) => {
-      if (column) {
-        const columnIndex = pipeline.columns.findIndex((c) => c === column);
-        Obj.change(pipeline, (p) => {
-          p.columns[columnIndex].name = values.name;
-        });
-      }
-    },
-    [column, pipeline],
-  );
+  }, [space, updateColumns]);
 
   return (
-    <div role='none' className={mx('plb-cardSpacingBlock overflow-y-auto', classNames)}>
-      <h2 className='text-sm text-description plb-1'>{t('views label')}</h2>
+    <div className={mx('py-form-padding overflow-y-auto', classNames)}>
+      <h2 className='text-sm text-description py-1'>{t('views.label')}</h2>
 
       <List.Root<Pipeline.Column>
-        items={pipeline.columns}
+        items={columns}
         isItem={Schema.is(Pipeline.Column)}
         getId={(column) => column.view.dxn.toString()}
         onMove={handleMove}
@@ -172,11 +179,13 @@ export const PipelineObjectSettings = ({ classNames, pipeline }: PipelineObjectS
                   classNames={listItemGrid}
                   aria-expanded={expandedId === column.view.dxn.toString()}
                 >
-                  <div role='none' className={mx(subtleHover, listItemGrid, 'rounded-sm cursor-pointer min-bs-10')}>
+                  <div className={mx(subtleHover, listItemGrid, 'rounded-xs cursor-pointer min-h-10')}>
                     <List.ItemDragHandle />
-                    <List.ItemTitle onClick={() => handleToggleField(column)}>{column.name}</List.ItemTitle>
+                    <List.ItemTitle onClick={() => handleToggleField(column)}>
+                      {column.name || t('untitled-view.title')}
+                    </List.ItemTitle>
                     <List.ItemDeleteButton
-                      label={t('delete view label')}
+                      label={t('delete-view.label')}
                       autoHide={false}
                       onClick={() => handleDelete(column)}
                       data-testid='view.delete'
@@ -184,7 +193,7 @@ export const PipelineObjectSettings = ({ classNames, pipeline }: PipelineObjectS
                     <IconButton
                       iconOnly
                       variant='ghost'
-                      label={t('toggle expand label', { ns: osTranslations })}
+                      label={t('toggle-expand.label', { ns: osTranslations })}
                       icon={
                         expandedId === column.view.dxn.toString()
                           ? 'ph--caret-down--regular'
@@ -193,9 +202,13 @@ export const PipelineObjectSettings = ({ classNames, pipeline }: PipelineObjectS
                       onClick={() => handleToggleField(column)}
                     />
                   </div>
-                  {expandedId === column.view.dxn.toString() && view && (
-                    <div role='none' className='col-span-5 mlb-2 border border-separator rounded-md'>
-                      <Form.Root schema={ColumnFormSchema} values={column} autoSave onSave={handleColumnSave}>
+                  {expandedId === column.view.dxn.toString() && column?.view.target && (
+                    <div className='col-span-5 my-2 border border-separator rounded-md'>
+                      <Form.Root
+                        schema={ColumnFormSchema}
+                        values={column}
+                        onValuesChanged={handleColumnValuesChanged(column)}
+                      >
                         <Form.Content>
                           <Form.FieldSet />
                         </Form.Content>
@@ -205,8 +218,9 @@ export const PipelineObjectSettings = ({ classNames, pipeline }: PipelineObjectS
                         mode='tag'
                         readonly
                         schema={schema}
-                        view={view}
+                        view={column.view.target}
                         registry={space?.db.schemaRegistry}
+                        db={space?.db}
                         tags={tags}
                         types={types}
                         onQueryChanged={handleQueryChanged}
@@ -220,11 +234,9 @@ export const PipelineObjectSettings = ({ classNames, pipeline }: PipelineObjectS
         )}
       </List.Root>
 
-      <div role='none' className='mlb-cardSpacingBlock'>
-        <IconButton icon='ph--plus--regular' label={t('add view label')} onClick={handleAdd} classNames='is-full' />
+      <div className='my-form-padding'>
+        <IconButton icon='ph--plus--regular' label={t('add-view.label')} onClick={handleAdd} classNames='w-full' />
       </div>
     </div>
   );
 };
-
-export default PipelineObjectSettings;

package/src/containers/PipelineProperties/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { PipelineProperties as default } from './PipelineProperties';

package/src/containers/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const PipelineContainer: ComponentType<any> = lazy(() => import('./PipelineContainer'));
+export const PipelineProperties: ComponentType<any> = lazy(() => import('./PipelineProperties'));

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './usePipelineBoardModel';

package/src/hooks/usePipelineBoardModel.ts

@@ -0,0 +1,79 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom, type Registry } from '@effect-atom/atom-react';
+import * as Schema from 'effect/Schema';
+import { useMemo } from 'react';
+
+import { getQueryTarget } from '@dxos/app-toolkit/query';
+import { Obj, Query } from '@dxos/echo';
+import { AtomObj, AtomQuery } from '@dxos/echo-atom';
+import { getSpace, isSpace } from '@dxos/react-client/echo';
+import { type BoardModel } from '@dxos/react-ui-mosaic';
+import { Pipeline } from '@dxos/types';
+
+export const usePipelineBoardModel = (
+  pipeline: Pipeline.Pipeline | undefined,
+  registry: Registry.Registry,
+): BoardModel<Pipeline.Column, Obj.Unknown> =>
+  useMemo<BoardModel<Pipeline.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<Pipeline.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 Pipeline.Column).view.dxn.toString(),
+      getItemId: (data) => (data as Obj.Unknown).id,
+      isColumn: (obj: unknown): obj is Pipeline.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]);
+
+const emptyColumnsAtom = Atom.make(() => [] as Pipeline.Column[]);
+
+const emptyItemsAtom = Atom.make(() => [] as Obj.Unknown[]);
+
+const emptyPipelineModel: BoardModel<Pipeline.Column, Obj.Unknown> = {
+  getColumnId: (data) => (data as Pipeline.Column).view.dxn.toString(),
+  getItemId: (data) => (data as Obj.Unknown).id,
+  isColumn: (obj: unknown): obj is Pipeline.Column => Schema.is(Pipeline.Column)(obj),
+  isItem: (obj): obj is Obj.Unknown => Obj.isObject(obj),
+  columns: emptyColumnsAtom,
+  items: () => emptyItemsAtom,
+  getColumns: () => [],
+  getItems: () => [],
+};

package/src/index.ts

@@ -3,4 +3,3 @@
 //
 
 export * from './meta';
-export * from './PipelinePlugin';

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/pipeline',
+  id: 'org.dxos.plugin.pipeline',
   name: 'Pipelines',
   description: trim`
     Pipelines for organizing tasks, milestones, and deliverables.

package/src/plugin.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const PipelinePlugin = Plugin.lazy(meta, () => import('#plugin'));

package/src/templates/research.ts

@@ -2,10 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Database, Filter, Query, Ref, Type } from '@dxos/echo';
-import { Mailbox } from '@dxos/plugin-inbox/types';
-import { Markdown } from '@dxos/plugin-markdown/types';
-import { View } from '@dxos/schema';
+import { type Database, Filter, JsonSchema, Query, Ref } from '@dxos/echo';
+import { Mailbox } from '@dxos/plugin-inbox';
+import { Markdown } from '@dxos/plugin-markdown';
+import { ViewModel } from '@dxos/schema';
 import { Message, Organization, Person, Pipeline } from '@dxos/types';
 
 export const createResearchProject = async (
@@ -13,34 +13,33 @@ export const createResearchProject = async (
   name?: string,
 ): Promise<Pipeline.Pipeline | null> => {
   const mailboxes = await db.query(Filter.type(Mailbox.Mailbox)).run();
-  if (!mailboxes.length) {
+  const mailbox = mailboxes[0];
+  const feed = await mailbox?.feed?.tryLoad();
+  if (!mailbox || !feed) {
     return null;
   }
 
-  const mailbox = mailboxes[0];
-  const mailboxView = View.make({
-    query: Query.select(Filter.type(Message.Message)).options({
-      queues: [mailbox.queue.dxn.toString()],
-    }),
-    jsonSchema: Type.toJsonSchema(Message.Message),
+  const mailboxView = ViewModel.make({
+    query: Query.select(Filter.type(Message.Message)).from(feed),
+    jsonSchema: JsonSchema.toJsonSchema(Message.Message),
   });
 
   const contactsQuery = Query.select(Filter.type(Person.Person));
-  const contactsView = View.make({
+  const contactsView = ViewModel.make({
     query: contactsQuery,
-    jsonSchema: Type.toJsonSchema(Person.Person),
+    jsonSchema: JsonSchema.toJsonSchema(Person.Person),
   });
 
   const organizationsQuery = Query.select(Filter.type(Organization.Organization));
-  const organizationsView = View.make({
+  const organizationsView = ViewModel.make({
     query: organizationsQuery,
-    jsonSchema: Type.toJsonSchema(Organization.Organization),
+    jsonSchema: JsonSchema.toJsonSchema(Organization.Organization),
   });
 
   const notesQuery = Query.select(Filter.type(Markdown.Document));
-  const notesView = View.make({
+  const notesView = ViewModel.make({
     query: notesQuery,
-    jsonSchema: Type.toJsonSchema(Markdown.Document),
+    jsonSchema: JsonSchema.toJsonSchema(Markdown.Document),
   });
 
   return Pipeline.make({

package/src/translations.ts

@@ -4,34 +4,35 @@ import { Pipeline } from '@dxos/types';
 // Copyright 2023 DXOS.org
 //
 
-import { meta } from './meta';
+import { meta } from '#meta';
 
 export const translations = [
   {
     'en-US': {
       [Pipeline.Pipeline.typename]: {
-        'typename label': 'Pipeline',
-        'typename label_zero': 'Pipelines',
-        'typename label_one': 'Pipeline',
-        'typename label_other': 'Pipelines',
-        'object name placeholder': 'New pipeline',
-        'rename object label': 'Rename pipeline',
-        'delete object label': 'Delete pipeline',
-        'object deleted label': 'Pipeline deleted',
+        'typename.label': 'Pipeline',
+        'typename.label_zero': 'Pipelines',
+        'typename.label_one': 'Pipeline',
+        'typename.label_other': 'Pipelines',
+        'object-name.placeholder': 'New pipeline',
+        'add-object.label': 'Add pipeline',
+        'rename-object.label': 'Rename pipeline',
+        'delete-object.label': 'Delete pipeline',
+        'object-deleted.label': 'Pipeline deleted',
       },
       [meta.id]: {
-        'plugin name': 'Pipelines',
-        'add column label': 'Add column',
-        'add card label': 'Add object',
-        'untitled view title': 'New view',
-        'enumerating tab label': 'List',
-        'editing tab label': 'Edit',
-        'views label': 'Views',
-        'pipeline invocations label': 'Invocations',
-        'pipeline automation label': 'Automations',
-        'toggle expand label': 'Toggle expand',
-        'delete view label': 'Delete view',
-        'add view label': 'Add view',
+        'plugin.name': 'Pipelines',
+        'add-column.label': 'Add column',
+        'add-card.label': 'Add object',
+        'untitled-view.title': 'New view',
+        'enumerating-tab.label': 'List',
+        'editing-tab.label': 'Edit',
+        'views.label': 'Views',
+        'pipeline-invocations.label': 'Invocations',
+        'pipeline-automation.label': 'Automations',
+        'toggle-expand.label': 'Toggle expand',
+        'delete-view.label': 'Delete view',
+        'add-view.label': 'Add view',
       },
     },
   },

package/src/types/index.ts

@@ -1,6 +1,3 @@
 //
 // Copyright 2025 DXOS.org
 //
-
-export * as PipelineAction from './PipelineAction';
-export { PipelineOperation } from './PipelineAction';