@dxos/react-ui-task 0.10.0

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@dxos/react-ui-task",
+  "version": "0.10.0",
+  "description": "Task list components over the durable Task/TaskSet model.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
+  "author": "DXOS.org",
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "import": "./dist/lib/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@dxos/echo": "0.10.0",
+    "@dxos/echo-react": "0.10.0",
+    "@dxos/react-ui": "0.10.0",
+    "@dxos/types": "0.10.0",
+    "@dxos/react-ui-list": "0.10.0",
+    "@dxos/ui-theme": "0.10.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "~19.2.17",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "resize-observer-polyfill": "^1.5.1",
+    "vite": "^8.1.4",
+    "@dxos/storybook-utils": "0.10.0"
+  },
+  "peerDependencies": {
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/react-ui": "^0.10.0",
+    "@dxos/ui-theme": "^0.10.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/TaskList/TaskList.stories.tsx

@@ -0,0 +1,66 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useState } from 'react';
+
+import { Obj } from '@dxos/echo';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Task } from '@dxos/types';
+
+import { TaskList, type TaskPatch } from './TaskList';
+
+const seed = (): Task.Task[] => [
+  Task.make({ title: 'Source green coffee', status: 'done', priority: 'high' }),
+  Task.make({ title: 'Finalize roast curve', status: 'in-progress', priority: 'high' }),
+  Task.make({ title: 'Draft launch email', status: 'in-progress', assignee: { role: 'assistant', name: 'Scout' } }),
+  Task.make({ title: 'Design label', status: 'todo', assignee: { email: 'riley@example.com' } }),
+  Task.make({ title: 'Print run v1', status: 'cancelled' }),
+];
+
+const DefaultStory = ({ readonly }: { readonly?: boolean }) => {
+  const [tasks, setTasks] = useState<Task.Task[]>(seed);
+
+  const handleCreate = useCallback((title: string) => {
+    setTasks((tasks) => [...tasks, Task.make({ title, status: 'todo' })]);
+  }, []);
+
+  const handleUpdate = useCallback((task: Task.Task, patch: TaskPatch) => {
+    Obj.update(task, (task) => {
+      Object.assign(task, patch);
+    });
+    setTasks((tasks) => [...tasks]);
+  }, []);
+
+  const handleDelete = useCallback((task: Task.Task) => {
+    setTasks((tasks) => tasks.filter(({ id }) => id !== task.id));
+  }, []);
+
+  return (
+    <div className='w-[36rem]'>
+      <TaskList
+        tasks={tasks}
+        onTaskCreate={readonly ? undefined : handleCreate}
+        onTaskUpdate={readonly ? undefined : handleUpdate}
+        onTaskDelete={readonly ? undefined : handleDelete}
+      />
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-task/TaskList',
+  render: (args) => <DefaultStory {...args} />,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Readonly: Story = {
+  args: { readonly: true },
+};

package/src/components/TaskList/TaskList.tsx

@@ -0,0 +1,209 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type KeyboardEvent, useCallback, useMemo, useState } from 'react';
+
+import { useObject } from '@dxos/echo-react';
+import { Icon, IconButton, Input, Tag, type ThemedClassName } from '@dxos/react-ui';
+import { Listbox } from '@dxos/react-ui-list';
+import { type Actor, type Task } from '@dxos/types';
+
+export type TaskStatus = NonNullable<Task.Task['status']>;
+
+/** Linear-style status groups, most active first. */
+export const STATUS_ORDER: TaskStatus[] = ['in-progress', 'todo', 'done', 'failed', 'cancelled'];
+
+const DEFAULT_STATUS_LABELS: Record<TaskStatus, string> = {
+  'in-progress': 'In progress',
+  'todo': 'Todo',
+  'done': 'Done',
+  'failed': 'Failed',
+  'cancelled': 'Cancelled',
+};
+
+export type TaskPatch = Partial<Pick<Task.Task, 'title' | 'status' | 'priority' | 'estimate' | 'assignee'>>;
+
+export type TaskListProps = ThemedClassName<{
+  tasks: readonly Task.Task[];
+  /** Group rows into status sections (Linear order); flat list otherwise. */
+  groupByStatus?: boolean;
+  /** i18n hook for group headings; defaults to English labels. */
+  statusLabel?: (status: TaskStatus) => string;
+  /** Renders an add row; called with the trimmed title on Enter. */
+  onTaskCreate?: (title: string) => void;
+  /** Enables the done toggle (status patch) and any future field affordances. */
+  onTaskUpdate?: (task: Task.Task, patch: TaskPatch) => void;
+  /** Renders a per-row delete affordance. */
+  onTaskDelete?: (task: Task.Task) => void;
+  /** Row click. */
+  onTaskSelect?: (task: Task.Task) => void;
+  createPlaceholder?: string;
+}>;
+
+/**
+ * List of durable {@link Task} objects with optional CRUD affordances — every mutation is
+ * delegated to a callback (typically a `TaskOperation` invocation), never performed here.
+ */
+export const TaskList = ({
+  classNames,
+  tasks,
+  groupByStatus = true,
+  statusLabel = (status) => DEFAULT_STATUS_LABELS[status],
+  onTaskCreate,
+  onTaskUpdate,
+  onTaskDelete,
+  onTaskSelect,
+  createPlaceholder = 'Add task',
+}: TaskListProps) => {
+  const groups = useMemo(() => {
+    if (!groupByStatus) {
+      return tasks.length > 0 ? [{ status: undefined, tasks }] : [];
+    }
+    return STATUS_ORDER.map((status) => ({
+      status,
+      tasks: tasks.filter((task) => (task.status ?? 'todo') === status),
+    })).filter((group) => group.tasks.length > 0);
+  }, [tasks, groupByStatus]);
+
+  return (
+    <div className='flex flex-col min-w-0'>
+      <Listbox.Root>
+        <Listbox.Viewport classNames={['dx-container', classNames]}>
+          <Listbox.Content aria-label='Tasks'>
+            {groups.map(({ status, tasks }) => (
+              <React.Fragment key={status ?? 'all'}>
+                {status && <div className='px-2 pt-3 pb-1 text-xs text-subdued uppercase'>{statusLabel(status)}</div>}
+                {tasks.map((task) => (
+                  <TaskRow
+                    key={task.id}
+                    task={task}
+                    onUpdate={onTaskUpdate}
+                    onDelete={onTaskDelete}
+                    onSelect={onTaskSelect}
+                  />
+                ))}
+              </React.Fragment>
+            ))}
+          </Listbox.Content>
+        </Listbox.Viewport>
+      </Listbox.Root>
+      {onTaskCreate && <TaskCreateRow placeholder={createPlaceholder} onCreate={onTaskCreate} />}
+    </div>
+  );
+};
+
+type TaskRowProps = {
+  task: Task.Task;
+  onUpdate?: TaskListProps['onTaskUpdate'];
+  onDelete?: TaskListProps['onTaskDelete'];
+  onSelect?: TaskListProps['onTaskSelect'];
+};
+
+const TaskRow = ({ task, onUpdate, onDelete, onSelect }: TaskRowProps) => {
+  const done = task.status === 'done';
+  const handleToggle = useCallback(() => onUpdate?.(task, { status: done ? 'todo' : 'done' }), [onUpdate, task, done]);
+
+  return (
+    <Listbox.Item id={task.id} classNames='py-0 group'>
+      <div className='flex items-center gap-2 min-w-0'>
+        {onUpdate ? (
+          <IconButton
+            variant='ghost'
+            density='xs'
+            icon={done ? 'ph--check--regular' : 'ph--circle--regular'}
+            iconOnly
+            label={done ? 'Mark todo' : 'Mark done'}
+            classNames={done ? 'text-success-text' : undefined}
+            onClick={handleToggle}
+          />
+        ) : (
+          <Icon
+            icon={done ? 'ph--check--regular' : 'ph--circle--regular'}
+            classNames={done ? 'text-success-text' : undefined}
+            size={4}
+          />
+        )}
+        <span
+          className={onSelect ? 'truncate flex-1 cursor-pointer' : 'truncate flex-1'}
+          onClick={onSelect ? () => onSelect(task) : undefined}
+        >
+          {task.title}
+        </span>
+        {task.priority && task.priority !== 'none' && <Tag hue='neutral'>{task.priority}</Tag>}
+        {task.assignee && <AssigneeChip assignee={task.assignee} />}
+        {onDelete && (
+          <IconButton
+            variant='ghost'
+            density='xs'
+            icon='ph--x--regular'
+            iconOnly
+            label='Delete task'
+            classNames='invisible group-hover:visible'
+            onClick={() => onDelete(task)}
+          />
+        )}
+      </div>
+    </Listbox.Item>
+  );
+};
+
+type TaskCreateRowProps = {
+  placeholder: string;
+  onCreate: (title: string) => void;
+};
+
+const TaskCreateRow = ({ placeholder, onCreate }: TaskCreateRowProps) => {
+  const [title, setTitle] = useState('');
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      const trimmed = title.trim();
+      if (event.key === 'Enter' && trimmed.length > 0) {
+        onCreate(trimmed);
+        setTitle('');
+      }
+    },
+    [title, onCreate],
+  );
+
+  return (
+    <div className='flex items-center gap-2 px-2 py-1'>
+      <Icon icon='ph--plus--regular' size={4} classNames='text-subdued' />
+      <Input.Root>
+        <Input.TextInput
+          variant='subdued'
+          placeholder={placeholder}
+          value={title}
+          onChange={(event) => setTitle(event.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+      </Input.Root>
+    </div>
+  );
+};
+
+/**
+ * Actor-aware assignee chip: a Person ref resolves to the contact's name; otherwise fall back to
+ * name, email, or a shortened DID; agents (`role: 'assistant'`) are marked with a sparkle.
+ */
+export const AssigneeChip = ({ assignee }: { assignee: Actor.Actor }) => {
+  const [contact] = useObject(assignee.contact);
+  const label =
+    contact?.fullName ??
+    assignee.name ??
+    assignee.email ??
+    (assignee.identityDid ? shortDid(assignee.identityDid) : undefined);
+  const agent = assignee.role === 'assistant';
+  if (!label && !agent) {
+    return null;
+  }
+
+  return (
+    <Tag hue={agent ? 'purple' : 'indigo'}>
+      {agent && <Icon icon='ph--sparkle--regular' size={3} classNames='inline-block me-1' />}
+      {label ?? 'agent'}
+    </Tag>
+  );
+};
+
+const shortDid = (did: string): string => `${did.slice(0, 12)}…`;

package/src/components/TaskList/index.ts

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

package/src/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './components/TaskList';

package/src/vitest-setup.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// https://github.com/testing-library/jest-dom#with-vitest
+import '@testing-library/jest-dom/vitest';
+
+// https://github.com/jsdom/jsdom/issues/3368#issuecomment-1396749033
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;