@dxos/plugin-pipeline 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-pipeline",
-  "version": "0.8.4-main.c85a9c8dae",
+  "version": "0.8.4-main.d9fc60f731",
   "description": "Pipeline plugin for Composer",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,66 +8,111 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#capabilities": {
+      "source": "./src/capabilities/index.ts",
+      "types": "./dist/types/src/capabilities/index.d.ts",
+      "default": "./dist/lib/neutral/capabilities/index.mjs"
+    },
+    "#components": {
+      "source": "./src/components/index.ts",
+      "types": "./dist/types/src/components/index.d.ts",
+      "default": "./dist/lib/neutral/components/index.mjs"
+    },
+    "#containers": {
+      "source": "./src/containers/index.ts",
+      "types": "./dist/types/src/containers/index.d.ts",
+      "default": "./dist/lib/neutral/containers/index.mjs"
+    },
+    "#hooks": {
+      "source": "./src/hooks/index.ts",
+      "types": "./dist/types/src/hooks/index.d.ts",
+      "default": "./dist/lib/neutral/hooks/index.mjs"
+    },
+    "#meta": {
+      "source": "./src/meta.ts",
+      "types": "./dist/types/src/meta.d.ts",
+      "default": "./dist/lib/neutral/meta.mjs"
+    },
+    "#plugin": {
+      "source": {
+        "workerd": "./src/PipelinePlugin.workerd.ts",
+        "node": "./src/PipelinePlugin.node.ts",
+        "default": "./src/PipelinePlugin.tsx"
+      },
+      "types": "./dist/types/src/PipelinePlugin.d.ts",
+      "workerd": "./dist/lib/neutral/PipelinePlugin.workerd.mjs",
+      "node": "./dist/lib/neutral/PipelinePlugin.node.mjs",
+      "default": "./dist/lib/neutral/PipelinePlugin.mjs"
+    },
+    "#translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
+    },
+    "#types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "default": "./dist/lib/neutral/types/index.mjs"
+    }
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs"
+      "default": "./dist/lib/neutral/index.mjs"
     },
-    "./types": {
-      "source": "./src/types/index.ts",
-      "types": "./dist/types/src/types/index.d.ts",
-      "browser": "./dist/lib/browser/types/index.mjs"
+    "./assets/PLUGIN.mdl": "./PLUGIN.mdl",
+    "./plugin": {
+      "source": "./src/plugin.ts",
+      "types": "./dist/types/src/plugin.d.ts",
+      "default": "./dist/lib/neutral/plugin.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "types": [
-        "dist/types/src/types/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
-    "src"
+    "src",
+    "PLUGIN.mdl"
   ],
   "dependencies": {
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
-    "effect": "3.19.16",
-    "@dxos/assistant-toolkit": "0.8.4-main.c85a9c8dae",
-    "@dxos/app-framework": "0.8.4-main.c85a9c8dae",
-    "@dxos/devtools": "0.8.4-main.c85a9c8dae",
-    "@dxos/echo": "0.8.4-main.c85a9c8dae",
-    "@dxos/echo-atom": "0.8.4-main.c85a9c8dae",
-    "@dxos/echo-query": "0.8.4-main.c85a9c8dae",
-    "@dxos/async": "0.8.4-main.c85a9c8dae",
-    "@dxos/functions": "0.8.4-main.c85a9c8dae",
-    "@dxos/log": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-client": "0.8.4-main.c85a9c8dae",
-    "@dxos/operation": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-deck": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-graph": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-inbox": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-markdown": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-space": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-client": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-attention": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-components": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-form": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-menu": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-mosaic": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-list": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-stack": "0.8.4-main.c85a9c8dae",
-    "@dxos/app-toolkit": "0.8.4-main.c85a9c8dae",
-    "@dxos/schema": "0.8.4-main.c85a9c8dae",
-    "@dxos/types": "0.8.4-main.c85a9c8dae",
-    "@dxos/util": "0.8.4-main.c85a9c8dae"
+    "@radix-ui/react-slot": "1.1.2",
+    "effect": "3.21.2",
+    "@dxos/app-framework": "0.8.4-main.d9fc60f731",
+    "@dxos/compute": "0.8.4-main.d9fc60f731",
+    "@dxos/echo": "0.8.4-main.d9fc60f731",
+    "@dxos/echo-atom": "0.8.4-main.d9fc60f731",
+    "@dxos/app-toolkit": "0.8.4-main.d9fc60f731",
+    "@dxos/echo-query": "0.8.4-main.d9fc60f731",
+    "@dxos/keys": "0.8.4-main.d9fc60f731",
+    "@dxos/log": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-client": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-graph": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-inbox": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-markdown": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-space": "0.8.4-main.d9fc60f731",
+    "@dxos/devtools": "0.8.4-main.d9fc60f731",
+    "@dxos/react-client": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-attention": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-list": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-form": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-menu": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-mosaic": "0.8.4-main.d9fc60f731",
+    "@dxos/schema": "0.8.4-main.d9fc60f731",
+    "@dxos/util": "0.8.4-main.d9fc60f731",
+    "@dxos/types": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-stack": "0.8.4-main.d9fc60f731"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -75,25 +120,25 @@
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/plugin-preview": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-inbox": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-testing": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-theme": "0.8.4-main.c85a9c8dae",
-    "@dxos/random": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
-    "@dxos/echo-db": "0.8.4-main.c85a9c8dae",
-    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-attention": "0.8.4-main.c85a9c8dae"
+    "vite": "^8.0.14",
+    "@dxos/echo-db": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-attention": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-inbox": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-preview": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-testing": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-theme": "0.8.4-main.d9fc60f731",
+    "@dxos/random": "0.8.4-main.d9fc60f731",
+    "@dxos/storybook-utils": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-theme": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui": "0.8.4-main.d9fc60f731"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "effect": "3.19.16",
+    "effect": "3.21.2",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
+    "@dxos/react-ui": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-theme": "0.8.4-main.d9fc60f731"
   },
   "publishConfig": {
     "access": "public"

package/src/PipelinePlugin.node.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { Pipeline } from '@dxos/types';
+
+import { AppGraphBuilder, CreateObject } from '#capabilities';
+import { meta } from '#meta';
+
+export const PipelinePlugin = Plugin.define(meta).pipe(
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addCreateObjectModule({ activate: CreateObject }),
+  AppPlugin.addSchemaModule({ schema: [Pipeline.Pipeline] }),
+  Plugin.make,
+);
+
+export default PipelinePlugin;

package/src/PipelinePlugin.test.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { createComposerTestApp } from '@dxos/plugin-testing/harness';
+
+import { PipelinePlugin } from '#plugin';
+
+import { meta } from './meta';
+
+const moduleId = (name: string) => `${meta.id}.module.${name}`;
+
+describe('PipelinePlugin', () => {
+  test('modules activate on the expected events', async ({ expect }) => {
+    await using harness = await createComposerTestApp({
+      plugins: [ClientPlugin({}), PipelinePlugin()],
+    });
+
+    // After autoStart: AppGraphBuilder, CreateObject, schema all auto-cascade.
+    expect(harness.manager.getActive()).toEqual(
+      expect.arrayContaining([moduleId('AppGraphBuilder'), moduleId('CreateObject'), moduleId('schema')]),
+    );
+  });
+});

package/src/PipelinePlugin.tsx

@@ -2,45 +2,27 @@
 // Copyright 2023 DXOS.org
 //
 
-import * as Effect from 'effect/Effect';
-
-import { Capability, Plugin } from '@dxos/app-framework';
+import { Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
-import { Operation } from '@dxos/operation';
-import { SpaceCapabilities, SpaceEvents } from '@dxos/plugin-space';
-import { type CreateObject } from '@dxos/plugin-space/types';
 import { Pipeline } from '@dxos/types';
 
-import { AppGraphBuilder, OperationResolver, ReactSurface } from './capabilities';
-import { meta } from './meta';
-import { translations } from './translations';
-import { PipelineOperation } from './types';
+import { AppGraphBuilder, CreateObject, ReactSurface } from '#capabilities';
+import { meta } from '#meta';
+import { translations } from '#translations';
+
+// eslint-disable-next-line import/no-relative-packages
+import pluginSpec from '../PLUGIN.mdl?raw';
 
 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,
-      },
-    },
-  }),
-  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addCreateObjectModule({ activate: CreateObject }),
   AppPlugin.addSchemaModule({ schema: [Pipeline.Pipeline] }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
   AppPlugin.addTranslationsModule({ translations }),
-  Plugin.addModule({
-    id: 'on-space-created',
-    activatesOn: SpaceEvents.SpaceCreated,
-    activate: () =>
-      Effect.succeed(
-        Capability.contributes(SpaceCapabilities.OnCreateSpace, (params) =>
-          Operation.invoke(PipelineOperation.OnCreateSpace, params),
-        ),
-      ),
+  AppPlugin.addPluginAssetModule({
+    asset: { pluginId: meta.id, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
   }),
   Plugin.make,
 );
+
+export default PipelinePlugin;

package/src/PipelinePlugin.workerd.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { Pipeline } from '@dxos/types';
+
+import { meta } from '#meta';
+
+export const PipelinePlugin = Plugin.define(meta).pipe(
+  AppPlugin.addSchemaModule({ schema: [Pipeline.Pipeline] }),
+  Plugin.make,
+);
+
+export default PipelinePlugin;

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

@@ -0,0 +1,40 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, AppNode } from '@dxos/app-toolkit';
+import { GraphBuilder } from '@dxos/plugin-graph';
+import { Pipeline } from '@dxos/types';
+
+import { meta } from '#meta';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const extensions = yield* Effect.all([
+      GraphBuilder.createTypeExtension({
+        id: 'triggers',
+        type: Pipeline.Pipeline,
+        connector: () =>
+          Effect.succeed([
+            AppNode.makeCompanion({
+              id: 'invocations',
+              label: ['pipeline-invocations.label', { ns: meta.id }],
+              icon: 'ph--clock-countdown--regular',
+              data: 'invocations',
+            }),
+            AppNode.makeCompanion({
+              id: 'automation',
+              label: ['pipeline-automation.label', { ns: meta.id }],
+              icon: 'ph--lightning--regular',
+              data: 'automation',
+            }),
+          ]),
+      }),
+    ]);
+
+    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
+  }),
+);

package/src/capabilities/create-object.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { Operation } from '@dxos/compute';
+import { Type } from '@dxos/echo';
+import { SpaceOperation } from '@dxos/plugin-space';
+import { SpaceCapabilities } from '@dxos/plugin-space';
+import { Pipeline } from '@dxos/types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(SpaceCapabilities.CreateObjectEntry, {
+      id: Type.getTypename(Pipeline.Pipeline),
+      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,
+          });
+        }),
+    });
+  }),
+);

package/src/capabilities/index.ts

@@ -2,6 +2,8 @@
 // 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 CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

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

@@ -7,33 +7,35 @@ import React from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { InvocationTraceContainer } from '@dxos/devtools';
 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 { PipelineArticle, PipelineProperties } from '#containers';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
-        id: meta.id,
-        role: 'article',
-        filter: (data): data is { subject: Pipeline.Pipeline } => Obj.instanceOf(Pipeline.Pipeline, data.subject),
-        component: ({ data, role }) => <PipelineContainer role={role} subject={data.subject} />,
+        id: 'root',
+        filter: AppSurface.object(AppSurface.Article, Pipeline.Pipeline),
+        component: ({ data, role }) => (
+          <PipelineArticle role={role} subject={data.subject} attendableId={data.attendableId} />
+        ),
       }),
       Surface.create({
-        id: `${meta.id}/companion/invocations`,
-        role: 'article',
-        filter: (data): data is { companionTo: Pipeline.Pipeline } =>
-          Obj.instanceOf(Pipeline.Pipeline, data.companionTo) && data.subject === 'invocations',
+        id: 'companion.invocations',
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'invocations'),
+          AppSurface.companion(AppSurface.Article, Pipeline.Pipeline),
+        ),
         component: ({ data, role }) => {
           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>
@@ -42,10 +44,9 @@ export default Capability.makeModule(() =>
         },
       }),
       Surface.create({
-        id: `${meta.id}/object-settings`,
-        role: 'object-settings',
-        filter: (data): data is { subject: Pipeline.Pipeline } => Obj.instanceOf(Pipeline.Pipeline, data.subject),
-        component: ({ data }) => <PipelineObjectSettings pipeline={data.subject} />,
+        id: 'objectProperties',
+        filter: AppSurface.object(AppSurface.ObjectProperties, Pipeline.Pipeline),
+        component: ({ data }) => <PipelineProperties pipeline={data.subject} />,
       }),
     ]),
   ),

package/src/components/PipelineComponent/PipelineColumn.tsx

@@ -0,0 +1,154 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+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 { Menu } from '@dxos/react-ui-menu';
+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 { type ItemProps, usePipeline } from './PipelineComponent';
+
+//
+// PipelineColumn
+//
+
+const PIPELINE_COLUMN_NAME = 'PipelineColumn';
+
+export type PipelineColumnProps = Pick<MosaicTileProps<Pipeline.Column>, 'classNames' | 'location' | 'data' | 'debug'>;
+
+// 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 [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);
+  // Subscribe to the view target for reactivity.
+  const [viewSnapshot] = useObject(column.view);
+  const view = column.view.target;
+  const db = view && Obj.getDatabase(view);
+  const { Item } = usePipeline(PIPELINE_COLUMN_NAME);
+  const [type, setType] = useState<Type.AnyEntity>();
+  const query = useMemo(() => {
+    if (!view) {
+      return Query.select(Filter.nothing());
+    } else {
+      // NOTE: Snapshot is required to prevent signal read in prohibited scope.
+      // TODO(wittjosiah): Without stringify, filter.filters remains a proxied array.
+      return Query.fromAst(JSON.parse(JSON.stringify(viewSnapshot?.query.ast)));
+    }
+  }, [JSON.stringify(viewSnapshot?.query.ast)]);
+
+  useAsyncEffect(async () => {
+    if (!query || !db) {
+      return;
+    }
+
+    const type = await resolveSchemaWithRegistry(db, query.ast);
+    setType(() => type);
+  }, [db, query]);
+
+  const projectionModel = useMemo(() => {
+    if (!type || !view) {
+      return undefined;
+    }
+
+    // Use the live jsonSchema reference for reactivity.
+    const change = createEchoChangeCallback(view, Type.getDatabase(type) != null ? type : undefined);
+    return new ProjectionModel({ view, baseSchema: type.jsonSchema, change });
+  }, [type, view]);
+
+  const PipelineTile = useMemo(() => {
+    return forwardRef<HTMLDivElement, Pick<MosaicTileProps<Obj.Unknown>, 'classNames' | 'location' | 'data' | 'debug'>>(
+      (props, ref) => <ItemTile {...props} itemProps={{ item: props.data, projectionModel }} ref={ref} />,
+    );
+  }, [projectionModel]);
+
+  if (!view) {
+    return null;
+  }
+
+  return (
+    <Panel.Root asChild>
+      <Board.Column.Root
+        debug={debug}
+        data={column}
+        location={location}
+        classNames={classNames}
+        dragHandle={dragHandle}
+      >
+        <Panel.Toolbar asChild>
+          <Board.Column.Header
+            classNames='_opacity-10'
+            label={column.name || t('untitled-view.title')}
+            dragHandleRef={setDragHandle}
+          />
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <Board.Column.Body data={column} Tile={PipelineTile} />
+        </Panel.Content>
+      </Board.Column.Root>
+    </Panel.Root>
+  );
+};
+
+PipelineColumn.displayName = PIPELINE_COLUMN_NAME;
+
+//
+// ItemTile
+//
+
+const ITEM_TILE_NAME = 'ItemTile';
+
+type ItemTileProps = Pick<MosaicTileProps<Obj.Unknown>, 'classNames' | 'location' | 'data' | 'debug'> & {
+  itemProps: ItemProps;
+};
+
+const ItemTile = forwardRef<HTMLDivElement, ItemTileProps>(
+  ({ classNames, data, location, debug, itemProps }, forwardedRef) => {
+    const rootRef = useRef<HTMLDivElement>(null);
+    const composedRef = useComposedRefs<HTMLDivElement>(rootRef, forwardedRef);
+    const { Item } = usePipeline(ITEM_TILE_NAME);
+    const icon = Obj.getIcon(data)?.icon ?? 'ph--circle-dashed--regular';
+
+    return (
+      <Menu.Root>
+        <Mosaic.Tile asChild id={data.id} data={data} location={location} debug={debug}>
+          <Focus.Item asChild>
+            <Card.Root classNames={classNames} ref={composedRef}>
+              <Card.Header>
+                <Card.Icon icon={icon} />
+                <Card.Title>{Obj.getLabel(data, { fallback: 'typename' })}</Card.Title>
+                {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
+                <Card.IconBlock>
+                  <Menu.Trigger asChild>
+                    <Toolbar.IconButton
+                      iconOnly
+                      variant='ghost'
+                      icon='ph--dots-three-vertical--regular'
+                      label='Actions'
+                    />
+                  </Menu.Trigger>
+                  <Menu.Content />
+                </Card.IconBlock>
+              </Card.Header>
+              <Card.Body>
+                <Item {...itemProps} />
+              </Card.Body>
+            </Card.Root>
+          </Focus.Item>
+        </Mosaic.Tile>
+      </Menu.Root>
+    );
+  },
+);
+
+ItemTile.displayName = ITEM_TILE_NAME;