@baack-software/baack-ts-tasks 0.0.0-stage → 0.0.1

package/src/draft.ts

@@ -0,0 +1,162 @@
+import type { Task } from '@baack-software/baack-ts-client';
+import { ref, refs, sameRef, sameRefs, urnOf } from './refs.ts';
+import { parseTimestamp } from './time.ts';
+import { TASK_LIST_FIELDS, type RefLike, type TaskDraft, type TaskInput, type TaskUpdate } from './types.ts';
+
+export const TITLE_MAX_LENGTH = 1024;
+export const DESCRIPTION_MAX_LENGTH = 65536;
+
+/** What `draft` needs: an owner and a title. Everything else has a default. */
+export type DraftInput = Omit<Partial<TaskDraft>, 'owner' | 'title'> & {
+  owner: RefLike;
+  title: string;
+};
+
+/**
+ * A new task ready to create: status `PENDING`, priority `NONE`, an empty description and empty lists unless given.
+ * References are reduced to bare `{ urn }`.
+ */
+export function draft(input: DraftInput): TaskDraft {
+  const { owner, ...rest } = input;
+  const result: TaskDraft = {
+    status: 'PENDING',
+    priority: 'NONE',
+    description: '',
+    ...rest,
+    owner: ref(owner),
+    blockedBy: refs(rest.blockedBy),
+    blocking: refs(rest.blocking),
+    associatedTasks: refs(rest.associatedTasks),
+    associatedEntities: refs(rest.associatedEntities),
+    associatedIdentities: refs(rest.associatedIdentities),
+    associatedCompanies: refs(rest.associatedCompanies),
+  };
+  return result;
+}
+
+export interface ValidationIssue {
+  field: keyof TaskInput;
+  message: string;
+}
+
+/**
+ * Checks a create or update body against the API's documented rules, so a form can show problems before sending.
+ * Pass the task's URN when updating, to catch a task blocking itself.
+ */
+export function validateTask(input: TaskInput, options: { creating?: boolean; urn?: string } = {}): ValidationIssue[] {
+  const issues: ValidationIssue[] = [];
+  const { creating = false, urn } = options;
+
+  if (creating && !input.owner) issues.push({ field: 'owner', message: 'A task needs an owning company.' });
+  if (input.title !== undefined || creating) {
+    const title = input.title?.trim() ?? '';
+    if (title === '') issues.push({ field: 'title', message: 'A task needs a title.' });
+    else if (title.length > TITLE_MAX_LENGTH)
+      issues.push({ field: 'title', message: `The title is longer than ${TITLE_MAX_LENGTH} characters.` });
+  }
+  if (input.description !== undefined && input.description.length > DESCRIPTION_MAX_LENGTH) {
+    issues.push({
+      field: 'description',
+      message: `The description is longer than ${DESCRIPTION_MAX_LENGTH} characters.`,
+    });
+  }
+  if (input.dueTimestamp != null && !parseTimestamp(input.dueTimestamp)) {
+    issues.push({ field: 'dueTimestamp', message: 'The due date is not a valid timestamp.' });
+  }
+  if (urn !== undefined) {
+    if (input.blockedBy?.some((item) => item.urn === urn))
+      issues.push({ field: 'blockedBy', message: 'A task cannot block itself.' });
+    if (input.blocking?.some((item) => item.urn === urn))
+      issues.push({ field: 'blocking', message: 'A task cannot block itself.' });
+  }
+  const blockedBy = new Set((input.blockedBy ?? []).map(urnOf));
+  if (input.blocking?.some((item) => blockedBy.has(item.urn))) {
+    issues.push({ field: 'blocking', message: 'A task cannot both block and be blocked by the same task.' });
+  }
+  return issues;
+}
+
+/**
+ * The update body that turns `before` into `after`: only the fields that differ. Lists count as changed when they hold
+ * different references, regardless of order, and are sent whole. Returns `{}` when nothing changed.
+ */
+export function taskChanges(before: Task, after: Task | TaskInput): TaskInput {
+  const changes: TaskInput = {};
+
+  for (const field of ['status', 'priority', 'title', 'description'] as const) {
+    const value = after[field];
+    if (value !== undefined && value !== before[field]) (changes as Record<string, unknown>)[field] = value;
+  }
+  if (after.dueTimestamp !== undefined && !sameTime(before.dueTimestamp, after.dueTimestamp)) {
+    changes.dueTimestamp = after.dueTimestamp || null;
+  }
+  for (const field of ['assignee', 'project', 'workflowStage'] as const) {
+    const value = after[field];
+    if (value !== undefined && !sameRef(before[field], value)) changes[field] = value === null ? null : ref(value);
+  }
+  for (const field of TASK_LIST_FIELDS) {
+    const value = after[field];
+    if (value !== undefined && !sameRefs(before[field], value)) changes[field] = refs(value);
+  }
+  return changes;
+}
+
+/**
+ * The task as it will look once `changes` are applied, for showing a change before the server confirms it. References
+ * keep only what the change carries (usually just the URN), so names need looking up separately.
+ */
+export function applyChanges(task: Task, changes: TaskInput): Task {
+  const result: Task = { ...task };
+  for (const field of ['status', 'priority', 'title', 'description'] as const) {
+    if (changes[field] !== undefined) (result as unknown as Record<string, unknown>)[field] = changes[field];
+  }
+  if (changes.dueTimestamp !== undefined) result.dueTimestamp = changes.dueTimestamp ?? '';
+  for (const field of ['assignee', 'project', 'workflowStage', ...TASK_LIST_FIELDS] as const) {
+    const value = changes[field];
+    if (value !== undefined) (result as unknown as Record<string, unknown>)[field] = value;
+  }
+  return result;
+}
+
+/**
+ * The update body that stores `task` with `changes` applied. The API stores the task as an update sends it: required
+ * fields must be present and optional fields left out are cleared, so the body carries the whole task. A `null` change
+ * clears a field. References are reduced to bare `{ urn }`.
+ */
+export function updateBody(task: Task, changes: TaskInput): TaskUpdate {
+  const owner = changes.owner ?? task.owner;
+  if (!owner) throw new TypeError(`Task ${task.urn} has no owner, which every update must send.`);
+  const body: TaskUpdate = {
+    urn: task.urn,
+    owner: ref(owner),
+    status: changes.status ?? task.status,
+    priority: changes.priority ?? task.priority,
+    title: changes.title ?? task.title,
+    description: changes.description ?? task.description ?? '',
+    blockedBy: refs(changes.blockedBy ?? task.blockedBy),
+    blocking: refs(changes.blocking ?? task.blocking),
+    associatedTasks: refs(changes.associatedTasks ?? task.associatedTasks),
+    associatedEntities: refs(changes.associatedEntities ?? task.associatedEntities),
+    associatedIdentities: refs(changes.associatedIdentities ?? task.associatedIdentities),
+    associatedCompanies: refs(changes.associatedCompanies ?? task.associatedCompanies),
+  };
+  for (const field of ['assignee', 'project', 'workflowStage'] as const) {
+    const value = changes[field] === undefined ? task[field] : changes[field];
+    if (value) body[field] = ref(value);
+    else if (changes[field] === null) body[field] = null;
+  }
+  const due = changes.dueTimestamp === undefined ? task.dueTimestamp : changes.dueTimestamp;
+  if (due) body.dueTimestamp = due;
+  else if (changes.dueTimestamp !== undefined) body.dueTimestamp = null;
+  if (changes.identityForLogs) body.identityForLogs = ref(changes.identityForLogs);
+  return body;
+}
+
+/** Whether a body has nothing to send. */
+export function isEmptyChange(input: TaskInput): boolean {
+  return Object.keys(input).every((key) => key === 'identityForLogs');
+}
+
+function sameTime(a: string | null | undefined, b: string | null | undefined): boolean {
+  return parseTimestamp(a)?.getTime() === parseTimestamp(b)?.getTime();
+}

package/src/errors.ts

@@ -0,0 +1,40 @@
+import type { Task } from '@baack-software/baack-ts-client';
+import type { TaskConflict } from './conflicts.ts';
+import type { ValidationIssue } from './draft.ts';
+
+/** Thrown before sending a create or update the API would reject. */
+export class TaskValidationError extends Error {
+  override readonly name = 'TaskValidationError';
+
+  constructor(readonly issues: ValidationIssue[]) {
+    super(issues.map((issue) => issue.message).join(' '));
+  }
+}
+
+/** Thrown when a search hasn't reached its full result in the time allowed. */
+export class TaskSearchTimeoutError extends Error {
+  override readonly name = 'TaskSearchTimeoutError';
+
+  constructor(
+    readonly searchUrn: string | undefined,
+    readonly timeoutMs: number,
+  ) {
+    super(`Search ${searchUrn ?? ''} did not finish within ${timeoutMs} ms`);
+  }
+}
+
+/**
+ * Thrown before writing when someone else changed a field this update also changes, since the base the change was
+ * made against. Nothing was saved. Resolve with `resolveConflicts` and update again with `current` as the base.
+ */
+export class TaskConflictError extends Error {
+  override readonly name = 'TaskConflictError';
+
+  constructor(
+    readonly conflicts: TaskConflict[],
+    /** The task as it is now. */
+    readonly current: Task,
+  ) {
+    super(`Someone else changed ${conflicts.map((conflict) => conflict.field).join(', ')} on task ${current.urn}`);
+  }
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from './types.ts';
+export * from './refs.ts';
+export * from './time.ts';
+export * from './tasks.ts';
+export * from './draft.ts';
+export * from './conflicts.ts';
+export * from './blockers.ts';
+export * from './activity.ts';
+export * from './errors.ts';
+export * from './task-client.ts';

package/src/react/TaskActivity.tsx

@@ -0,0 +1,187 @@
+import { useId, useState } from 'react';
+import type { TaskLog } from '@baack-software/baack-ts-client';
+import { MessageSquare, Reply } from 'lucide-react';
+import { activityLabel, isComment } from '../activity.ts';
+import { activityCopy, useCopy } from './copy.tsx';
+import { nameOf, PersonAvatar, Timestamp, type TaskDirectory } from './parts.tsx';
+import { Button } from './ui/button.tsx';
+import { Label } from './ui/label.tsx';
+import { Textarea } from './ui/textarea.tsx';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.tsx';
+
+type Show = 'all' | 'changes' | 'comments';
+
+export interface TaskActivityProps {
+  /** Newest first. */
+  logs: readonly TaskLog[];
+  directory: TaskDirectory;
+  loading?: boolean;
+  /** Set when older entries can be loaded. */
+  onLoadMore?: (() => void) | undefined;
+  /** Adds a comment, optionally as a reply. Omit for a read-only log. */
+  onComment?: ((text: string, replyTo?: TaskLog) => Promise<unknown>) | undefined;
+}
+
+/** A task's activity log, newest first, with a comment box and replies. */
+export function TaskActivity({ logs, directory, loading, onLoadMore, onComment }: TaskActivityProps) {
+  const copy = useCopy();
+  const [show, setShow] = useState<Show>('all');
+  const [replyTo, setReplyTo] = useState<TaskLog | undefined>();
+  const byUrn = new Map(logs.map((log) => [log.urn, log]));
+  const shown = logs.filter((log) => show === 'all' || isComment(log) === (show === 'comments'));
+  const author = (log: TaskLog) => (log.identity ? nameOf(directory, log.identity) : undefined);
+
+  const describe = (log: TaskLog): string => {
+    const name = activityCopy(log.activity);
+    const label = name ? copy(name) : activityLabel(log.activity);
+    return log.subject && log.activity !== 'COMMENT_ADDED' ? `${label}: ${nameOf(directory, log.subject)}` : label;
+  };
+
+  return (
+    <section aria-label={copy('activity_heading')}>
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <h3 className="text-xs font-semibold tracking-wide uppercase">{copy('activity_heading')}</h3>
+        <ToggleGroup
+          type="single"
+          variant="outline"
+          size="sm"
+          spacing={0}
+          value={show}
+          onValueChange={(value) => value && setShow(value as Show)}
+          aria-label={copy('activity_filter')}
+        >
+          <ToggleGroupItem value="all">{copy('activity_filter_all')}</ToggleGroupItem>
+          <ToggleGroupItem value="changes">{copy('activity_filter_changes')}</ToggleGroupItem>
+          <ToggleGroupItem value="comments">{copy('activity_filter_comments')}</ToggleGroupItem>
+        </ToggleGroup>
+      </div>
+
+      {onComment && (
+        <CommentForm
+          key={replyTo?.urn ?? 'new'}
+          replyTo={replyTo}
+          replyName={replyTo ? (author(replyTo) ?? '') : undefined}
+          onCancelReply={() => setReplyTo(undefined)}
+          onSubmit={async (text) => {
+            await onComment(text, replyTo);
+            setReplyTo(undefined);
+          }}
+        />
+      )}
+
+      {shown.length === 0 && !loading && <p className="text-muted-foreground mt-3 text-sm">{copy('activity_empty')}</p>}
+      <ul className="mt-3 space-y-3" aria-busy={loading || undefined}>
+        {shown.map((log) => {
+          const name = author(log);
+          const parent = log.replyTo ? byUrn.get(log.replyTo.urn) : undefined;
+          return (
+            <li key={log.urn} className="flex gap-2.5" data-activity={log.activity}>
+              <PersonAvatar person={log.identity && name ? { urn: log.identity.urn, name } : null} />
+              <div className="min-w-0 flex-1">
+                <p className="text-[13px] leading-snug">
+                  <span className="font-medium">{describe(log)}</span>
+                  {name && <span className="text-muted-foreground"> {copy('activity_by', { name })}</span>}
+                  {log.createdTimestamp && (
+                    <span className="text-muted-foreground">
+                      {' · '}
+                      <Timestamp value={log.createdTimestamp} />
+                    </span>
+                  )}
+                </p>
+                {parent && (
+                  <p className="text-muted-foreground mt-0.5 flex items-center gap-1 text-[11px]">
+                    <Reply aria-hidden="true" className="size-3" />
+                    {copy('comment_reply_label', { name: author(parent) ?? '' })}
+                  </p>
+                )}
+                {log.comment && (
+                  <p className="bg-muted mt-1 rounded-md px-2.5 py-1.5 text-[13px] whitespace-pre-wrap">{log.comment}</p>
+                )}
+                {onComment && isComment(log) && (
+                  <Button variant="link" size="xs" className="h-auto px-0" onClick={() => setReplyTo(log)}>
+                    {copy('comment_reply')}
+                  </Button>
+                )}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+      {loading && <p className="text-muted-foreground mt-3 text-sm">{copy('activity_loading')}</p>}
+      {onLoadMore && !loading && (
+        <Button variant="outline" size="sm" className="mt-3" onClick={onLoadMore}>
+          {copy('activity_more')}
+        </Button>
+      )}
+    </section>
+  );
+}
+
+function CommentForm({
+  replyTo,
+  replyName,
+  onCancelReply,
+  onSubmit,
+}: {
+  replyTo: TaskLog | undefined;
+  replyName: string | undefined;
+  onCancelReply: () => void;
+  onSubmit: (text: string) => Promise<void>;
+}) {
+  const copy = useCopy();
+  const id = useId();
+  const [text, setText] = useState('');
+  const [sending, setSending] = useState(false);
+  const [failed, setFailed] = useState(false);
+
+  return (
+    <form
+      className="mt-3 grid gap-2"
+      onSubmit={async (event) => {
+        event.preventDefault();
+        if (!text.trim()) return;
+        setSending(true);
+        setFailed(false);
+        try {
+          await onSubmit(text.trim());
+          setText('');
+        } catch {
+          setFailed(true);
+        } finally {
+          setSending(false);
+        }
+      }}
+    >
+      <Label htmlFor={id} className={replyTo ? 'text-xs' : 'sr-only'}>
+        {replyTo ? copy('comment_reply_label', { name: replyName ?? '' }) : copy('comment_label')}
+      </Label>
+      <Textarea
+        id={id}
+        rows={2}
+        autoFocus={replyTo !== undefined}
+        placeholder={copy('comment_placeholder')}
+        value={text}
+        onChange={(event) => setText(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) event.currentTarget.form?.requestSubmit();
+        }}
+      />
+      <div className="flex items-center gap-2">
+        <Button type="submit" size="sm" variant="outline" disabled={!text.trim() || sending}>
+          <MessageSquare aria-hidden="true" />
+          {replyTo ? copy('comment_reply') : copy('comment_submit')}
+        </Button>
+        {replyTo && (
+          <Button type="button" size="sm" variant="ghost" onClick={onCancelReply}>
+            {copy('comment_cancel')}
+          </Button>
+        )}
+        {failed && (
+          <p role="alert" className="text-destructive text-xs">
+            {copy('editor_save_failed')}
+          </p>
+        )}
+      </div>
+    </form>
+  );
+}

package/src/react/TaskBoard.tsx

@@ -0,0 +1,264 @@
+import { useId } from 'react';
+import type { Task, TaskPriority, TaskStatus, Workflow } from '@baack-software/baack-ts-client';
+import { cn } from 'cn';
+import { lookupFrom, openBlockers } from '../blockers.ts';
+import {
+  groupByStage,
+  groupByWorkflow,
+  groupTasks,
+  isOverdue,
+  NONE_KEY,
+  type TaskComparator,
+  type TaskGrouping,
+} from '../tasks.ts';
+import { parseTimestamp } from '../time.ts';
+import { priorityCopy, statusCopy, useCopy } from './copy.tsx';
+import { BlockedBadge, DueDate, nameOf, PersonAvatar, PriorityBadge, StatusBadge, type TaskDirectory } from './parts.tsx';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table.tsx';
+
+export interface TaskListProps {
+  tasks: readonly Task[];
+  directory: TaskDirectory;
+  /** The task open in the editor, highlighted. */
+  selected?: string | undefined;
+  onOpen: (task: Task) => void;
+  /** Gives each task's button an id, so focus can return to it when the editor closes. */
+  itemId?: (urn: string) => string;
+  now?: Date;
+}
+
+function useBlocked(directory: TaskDirectory) {
+  const lookup = lookupFrom(directory.tasks);
+  return (task: Task) => openBlockers(task, lookup);
+}
+
+/** A task as a board card: priority, blocked, title, due date and assignee. Opens the task when chosen. */
+export function TaskCard({
+  task,
+  directory,
+  selected,
+  blockedBy,
+  onOpen,
+  id,
+  now,
+}: {
+  task: Task;
+  directory: TaskDirectory;
+  selected?: boolean;
+  blockedBy: readonly string[];
+  onOpen: (task: Task) => void;
+  id?: string;
+  now?: Date;
+}) {
+  const copy = useCopy();
+  const ids = useId();
+  const assignee = task.assignee ? { urn: task.assignee.urn, name: nameOf(directory, task.assignee) } : null;
+  const blockedTitle = blockedBy.map((urn) => copy('blocked_by', { name: nameOf(directory, { urn }) })).join(', ');
+  // The title names the card; the rest describes it, so screen readers hear the title first and the details after.
+  const details = [
+    copy(priorityCopy(task.priority)),
+    dueLabel(task, copy, now),
+    assignee ? `${copy('field_assignee')}: ${assignee.name}` : copy('option_unassigned'),
+    blockedTitle,
+  ]
+    .filter(Boolean)
+    .join(', ');
+  return (
+    <button
+      type="button"
+      id={id}
+      onClick={() => onOpen(task)}
+      aria-current={selected ? 'true' : undefined}
+      aria-labelledby={`${ids}-title`}
+      aria-describedby={`${ids}-details`}
+      className={cn(
+        'border-border bg-card hover:border-primary focus-visible:outline-primary w-full rounded-lg border p-2.5',
+        'text-left transition-colors focus-visible:outline-2',
+        selected && 'border-primary ring-primary/30 ring-2',
+      )}
+    >
+      <span aria-hidden="true" className="flex flex-wrap items-center gap-1.5">
+        <PriorityBadge priority={task.priority} />
+        {blockedBy.length > 0 && <BlockedBadge title={blockedTitle} />}
+      </span>
+      <span id={`${ids}-title`} className="mt-1.5 block text-[13px] leading-snug font-medium">
+        {task.title}
+      </span>
+      <span aria-hidden="true" className="mt-2 flex items-center justify-between gap-1">
+        <DueDate task={task} {...(now ? { now } : {})} />
+        <PersonAvatar person={assignee} />
+      </span>
+      <span id={`${ids}-details`} className="sr-only">
+        {details}
+      </span>
+    </button>
+  );
+}
+
+/** The due date as words, for a screen reader: "Due 12 Oct, overdue", or "No due date". */
+function dueLabel(task: Task, copy: ReturnType<typeof useCopy>, now?: Date): string {
+  const due = parseTimestamp(task.dueTimestamp);
+  if (!due) return copy('due_none');
+  const text = `${copy('field_due')} ${due.toLocaleDateString(undefined, { day: 'numeric', month: 'short' })}`;
+  return isOverdue(task, now) ? `${text}, ${copy('due_overdue')}` : text;
+}
+
+export interface TaskBoardProps extends TaskListProps {
+  /** What the columns are. Default status. */
+  groupBy?: TaskGrouping;
+  /** Sorts each column. */
+  sort?: TaskComparator;
+  /** Columns hidden while empty. Default the undefined status. */
+  hideEmpty?: readonly string[];
+  /** With `groupBy: 'workflowStage'`, the workflow whose stages are the columns, in order. */
+  workflow?: Workflow | undefined;
+}
+
+/** Tasks in columns by status, priority, assignee, project, workflow or workflow stage, each with its count. */
+export function TaskBoard({
+  tasks,
+  directory,
+  selected,
+  onOpen,
+  itemId,
+  now,
+  groupBy = 'status',
+  sort,
+  hideEmpty = ['UNDEFINED'],
+  workflow,
+}: TaskBoardProps) {
+  const copy = useCopy();
+  const ids = useId();
+  const blocked = useBlocked(directory);
+  const grouped =
+    groupBy === 'workflowStage' && workflow
+      ? groupByStage(tasks, workflow)
+      : groupBy === 'workflow'
+        ? groupByWorkflow(tasks, directory.workflows ?? [])
+        : groupTasks(tasks, groupBy);
+  const groups = [...grouped].filter(([key, group]) => group.length > 0 || !hideEmpty.includes(key));
+
+  const columnName = (key: string): string => {
+    switch (groupBy) {
+      case 'status':
+        return copy(statusCopy(key as TaskStatus));
+      case 'priority':
+        return copy(priorityCopy(key as TaskPriority));
+      case 'assignee':
+        return key === NONE_KEY ? copy('option_unassigned') : nameOf(directory, { urn: key });
+      case 'project':
+        return key === NONE_KEY ? copy('option_no_project') : nameOf(directory, { urn: key });
+      case 'workflow':
+        return key === NONE_KEY
+          ? copy('option_no_workflow')
+          : (directory.workflows?.find((w) => w.urn === key)?.name ?? nameOf(directory, { urn: key }));
+      case 'workflowStage':
+        return key === NONE_KEY ? copy('option_no_stage') : nameOf(directory, { urn: key });
+    }
+  };
+
+  return (
+    <div className="relative grid auto-cols-[minmax(15rem,1fr)] grid-flow-col gap-3 overflow-x-auto pb-2">
+      {groups.map(([key, group], index) => {
+        const sorted = sort ? [...group].sort(sort) : group;
+        const name = columnName(key);
+        const count = group.length === 1 ? copy('tasks_count_one') : copy('tasks_count', { count: group.length });
+        return (
+          <section key={key} aria-labelledby={`${ids}-column-${index}`} className="bg-muted/50 rounded-xl p-2">
+            <h3
+              id={`${ids}-column-${index}`}
+              aria-label={`${name}, ${count}`}
+              className="text-muted-foreground mb-2 flex items-center justify-between px-1 text-xs font-semibold tracking-wide uppercase"
+            >
+              {name}
+              <span className="bg-background text-foreground rounded-full px-1.5 text-[11px] tabular-nums">
+                {group.length}
+              </span>
+            </h3>
+            <ul className="space-y-2">
+              {sorted.map((task) => (
+                <li key={task.urn}>
+                  <TaskCard
+                    task={task}
+                    directory={directory}
+                    selected={task.urn === selected}
+                    blockedBy={blocked(task)}
+                    onOpen={onOpen}
+                    {...(itemId ? { id: itemId(task.urn) } : {})}
+                    {...(now ? { now } : {})}
+                  />
+                </li>
+              ))}
+            </ul>
+          </section>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Tasks as table rows: title, status, priority, assignee, project and due date. The title opens the task. */
+export function TaskTable({ tasks, directory, selected, onOpen, itemId, now }: TaskListProps) {
+  const copy = useCopy();
+  const blocked = useBlocked(directory);
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>{copy('field_title')}</TableHead>
+          <TableHead>{copy('field_status')}</TableHead>
+          <TableHead>{copy('field_priority')}</TableHead>
+          <TableHead>{copy('field_assignee')}</TableHead>
+          <TableHead>{copy('field_project')}</TableHead>
+          <TableHead>{copy('field_due')}</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {tasks.map((task) => {
+          const assignee = task.assignee ? { urn: task.assignee.urn, name: nameOf(directory, task.assignee) } : null;
+          const blockers = blocked(task);
+          return (
+            <TableRow key={task.urn} data-state={task.urn === selected ? 'selected' : undefined}>
+              <TableCell className="max-w-80 whitespace-normal">
+                <button
+                  type="button"
+                  {...(itemId ? { id: itemId(task.urn) } : {})}
+                  onClick={() => onOpen(task)}
+                  aria-current={task.urn === selected ? 'true' : undefined}
+                  className="hover:text-primary text-left font-medium hover:underline"
+                >
+                  {task.title}
+                </button>
+                {blockers.length > 0 && (
+                  <span className="ml-2">
+                    <BlockedBadge />
+                  </span>
+                )}
+              </TableCell>
+              <TableCell>
+                <StatusBadge status={task.status} />
+              </TableCell>
+              <TableCell>
+                <PriorityBadge priority={task.priority} />
+              </TableCell>
+              <TableCell>
+                <span className="flex items-center gap-2">
+                  <PersonAvatar person={assignee} />
+                  <span className={cn(!assignee && 'text-muted-foreground')}>
+                    {assignee?.name ?? copy('option_unassigned')}
+                  </span>
+                </span>
+              </TableCell>
+              <TableCell className={cn(!task.project && 'text-muted-foreground')}>
+                {task.project ? nameOf(directory, task.project) : copy('option_no_project')}
+              </TableCell>
+              <TableCell>
+                <DueDate task={task} {...(now ? { now } : {})} />
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}