@echothink-ui/task 0.1.0

package/src/components/TaskTable.tsx

@@ -0,0 +1,294 @@
+import * as React from "react";
+import clsx from "clsx";
+import {
+  ActionGroup,
+  Badge,
+  EmptyState,
+  Select,
+  StatusDot,
+  type EthOperationalStatus,
+  type SelectOption
+} from "@echothink-ui/core";
+import { BulkActionTable, DataTable, type DataColumn } from "@echothink-ui/data";
+import type { Task, TaskPriority, TaskTableProps } from "../types";
+import { TaskStatusBadge } from "./TaskStatusBadge";
+import { formatDateTime, labelForStatus, severityForPriority } from "./utils";
+
+type TaskStatusFilter = EthOperationalStatus | "all";
+
+const statusFilterOrder: EthOperationalStatus[] = [
+  "not-started",
+  "queued",
+  "in-progress",
+  "running",
+  "approval-required",
+  "pending-approval",
+  "blocked",
+  "failed",
+  "completed",
+  "succeeded",
+  "synced"
+];
+
+const priorityLabels: Record<TaskPriority, string> = {
+  critical: "Critical",
+  high: "High",
+  low: "Low",
+  medium: "Medium"
+};
+
+function taskRowsFromItems(items: TaskTableProps["items"]): Task[] {
+  return (
+    items?.map((item) => ({
+      id: item.id,
+      title: String(item.label),
+      status: item.status ?? "not-started"
+    })) ?? []
+  );
+}
+
+function taskTableLabel(title?: React.ReactNode) {
+  return typeof title === "string" && title.trim() ? `${title} table` : "Task table";
+}
+
+function priorityCell(priority?: TaskPriority) {
+  if (!priority) return <span className="eth-task-table__empty-value">-</span>;
+
+  return (
+    <Badge
+      severity={severityForPriority(priority)}
+      className={`eth-task-table__priority eth-task-table__priority--${priority}`}
+    >
+      {priorityLabels[priority]}
+    </Badge>
+  );
+}
+
+function emptyCell(value?: React.ReactNode) {
+  if (value === undefined || value === null || value === "") {
+    return <span className="eth-task-table__empty-value">-</span>;
+  }
+
+  return value;
+}
+
+function taskStatusOptions(rows: Task[], activeStatus: TaskStatusFilter): SelectOption[] {
+  const counts = new Map<EthOperationalStatus, number>();
+  for (const task of rows) {
+    counts.set(task.status, (counts.get(task.status) ?? 0) + 1);
+  }
+
+  const activeOperationalStatus = activeStatus === "all" ? null : activeStatus;
+  const activeStatusWithoutRows = Boolean(
+    activeOperationalStatus && !counts.has(activeOperationalStatus)
+  );
+  const extraStatuses =
+    activeOperationalStatus &&
+    activeStatusWithoutRows &&
+    !statusFilterOrder.includes(activeOperationalStatus)
+      ? [activeOperationalStatus]
+      : [];
+  const sortedStatuses = [
+    ...statusFilterOrder.filter(
+      (status) =>
+        counts.has(status) || (activeStatusWithoutRows && status === activeOperationalStatus)
+    ),
+    ...Array.from(counts.keys()).filter((status) => !statusFilterOrder.includes(status)),
+    ...extraStatuses
+  ];
+
+  return [
+    { value: "all", label: `All statuses (${rows.length})` },
+    ...sortedStatuses.map((status) => ({
+      value: status,
+      label: `${labelForStatus(status)} (${counts.get(status) ?? 0})`
+    }))
+  ];
+}
+
+const defaultColumns: DataColumn<Task>[] = [
+  { key: "id", header: "ID", width: "5rem", sortable: true },
+  {
+    key: "title",
+    header: "Task",
+    width: "18rem",
+    sortable: true,
+    render: (task) => (
+      <span className="eth-task-table__task">
+        <strong className="eth-task-table__task-title">{task.title}</strong>
+        {task.description ? (
+          <span className="eth-task-table__task-description">{task.description}</span>
+        ) : null}
+      </span>
+    )
+  },
+  {
+    key: "status",
+    header: "Status",
+    width: "12rem",
+    sortable: true,
+    render: (task) => <TaskStatusBadge status={task.status} />
+  },
+  {
+    key: "priority",
+    header: "Priority",
+    width: "8rem",
+    sortable: true,
+    render: (task) => priorityCell(task.priority)
+  },
+  {
+    key: "assignee",
+    header: "Assignee",
+    width: "9rem",
+    render: (task) => emptyCell(task.assignee)
+  },
+  {
+    key: "dueAt",
+    header: "Due",
+    width: "13rem",
+    sortable: true,
+    render: (task) => (
+      <span className={task.dueAt ? "eth-task-table__date" : "eth-task-table__empty-value"}>
+        {formatDateTime(task.dueAt)}
+      </span>
+    )
+  }
+];
+
+export function TaskTable({
+  tasks,
+  items,
+  density = "default",
+  selectable,
+  selectedRows,
+  onSelectionChange,
+  rowActions,
+  bulkActions,
+  columns,
+  showFilters,
+  statusFilter,
+  onStatusFilterChange,
+  className,
+  title,
+  description,
+  actions,
+  subtitle: _subtitle,
+  eyebrow: _eyebrow,
+  status: _status,
+  severity: _severity,
+  loading: _loading,
+  empty: _empty,
+  error: _error,
+  metadata: _metadata,
+  footer: _footer,
+  "aria-label": ariaLabel,
+  ...sectionProps
+}: TaskTableProps) {
+  const rows = tasks ?? taskRowsFromItems(items);
+  const [internalStatusFilter, setInternalStatusFilter] =
+    React.useState<TaskStatusFilter>("all");
+  const effectiveStatusFilter = statusFilter ?? internalStatusFilter;
+  const filterVisible =
+    Boolean(showFilters) || statusFilter !== undefined || Boolean(onStatusFilterChange);
+  const filteredRows =
+    filterVisible && effectiveStatusFilter !== "all"
+      ? rows.filter((task) => task.status === effectiveStatusFilter)
+      : rows;
+  const statusOptions = React.useMemo(
+    () => taskStatusOptions(rows, effectiveStatusFilter),
+    [effectiveStatusFilter, rows]
+  );
+  const resolvedColumns = columns ?? defaultColumns;
+  const label = ariaLabel ?? taskTableLabel(title);
+  const emptyTitle = rows.length && filterVisible ? "No matching tasks" : (title ?? "No tasks");
+  const emptyDescription =
+    rows.length && filterVisible
+      ? "No tasks match the selected status filter."
+      : (description ?? "There are no tasks to display.");
+  const selectEnabled = selectable ?? Boolean(bulkActions?.length);
+  const handleStatusFilterChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const nextStatus = event.currentTarget.value as TaskStatusFilter;
+    if (statusFilter === undefined) setInternalStatusFilter(nextStatus);
+    onStatusFilterChange?.(nextStatus);
+  };
+
+  const table = (
+    bulkActions?.length ? (
+      <BulkActionTable<Task>
+        className={clsx("eth-task-table", className)}
+        rows={filteredRows}
+        columns={resolvedColumns}
+        rowKey="id"
+        density={density}
+        selectable={selectEnabled}
+        selectedRows={selectedRows}
+        onSelectionChange={onSelectionChange}
+        rowActions={rowActions}
+        bulkActions={bulkActions}
+        emptyState={<EmptyState title={emptyTitle} description={emptyDescription} />}
+        aria-label={label}
+        data-eth-component="TaskTable"
+      />
+    ) : (
+      <DataTable<Task>
+        className={clsx("eth-task-table", className)}
+        rows={filteredRows}
+        columns={resolvedColumns}
+        rowKey="id"
+        density={density}
+        selectable={selectable}
+        selectedRows={selectedRows}
+        onSelectionChange={onSelectionChange}
+        rowActions={rowActions}
+        emptyState={<EmptyState title={emptyTitle} description={emptyDescription} />}
+        aria-label={label}
+        data-eth-component="TaskTable"
+      />
+    )
+  );
+  const hasHeader = Boolean(title || description || actions?.length);
+
+  if (!hasHeader && !filterVisible) return table;
+
+  return (
+    <section
+      {...sectionProps}
+      className="eth-task-table-shell"
+      aria-label={typeof title === "string" ? title : "Tasks"}
+    >
+      {hasHeader ? (
+        <header className="eth-task-table-shell__header">
+          <div className="eth-task-table-shell__heading">
+            {title ? <h2>{title}</h2> : null}
+            {description ? <p>{description}</p> : null}
+          </div>
+          <ActionGroup actions={actions} />
+        </header>
+      ) : null}
+      {filterVisible ? (
+        <div className="eth-task-table-shell__toolbar" aria-label="Task table filters">
+          <div className="eth-task-table-shell__filters">
+            <Select
+              className="eth-task-table-shell__filter"
+              density="compact"
+              labelText="Status"
+              options={statusOptions}
+              value={effectiveStatusFilter}
+              onChange={handleStatusFilterChange}
+            />
+          </div>
+          <span className="eth-task-table-shell__summary">
+            {filteredRows.length === rows.length
+              ? `${rows.length} ${rows.length === 1 ? "task" : "tasks"} shown`
+              : `${filteredRows.length} of ${rows.length} tasks shown`}
+          </span>
+        </div>
+      ) : null}
+      {table}
+    </section>
+  );
+}
+
+export function StatusCell({ task }: { task: Task }) {
+  return <StatusDot status={task.status} label={labelForStatus(task.status)} />;
+}

package/src/components/TaskTimeline.tsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, EmptyState, type EthSeverity } from "@echothink-ui/core";
+import type { TaskTimelineEvent, TaskTimelineProps } from "../types";
+import { formatDateTime } from "./utils";
+
+const eventKindMeta: Record<TaskTimelineEvent["kind"], { label: string; tone: EthSeverity }> = {
+  status_change: { label: "Status", tone: "info" },
+  comment: { label: "Comment", tone: "neutral" },
+  assignment: { label: "Assignment", tone: "info" },
+  attachment: { label: "Attachment", tone: "success" },
+  system: { label: "System", tone: "neutral" }
+};
+
+function timestampMeta(value: string | Date) {
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.valueOf())) {
+    const fallback = String(value);
+    return { dateTime: fallback, label: fallback };
+  }
+
+  return {
+    dateTime: date.toISOString(),
+    label: formatDateTime(date)
+  };
+}
+
+export function TaskTimeline({
+  events = [],
+  className,
+  role,
+  "aria-label": ariaLabel,
+  ...props
+}: TaskTimelineProps) {
+  if (!events.length) {
+    return (
+      <div
+        {...props}
+        className={clsx("eth-task-timeline", className)}
+        data-eth-component="TaskTimeline"
+        role={role ?? "region"}
+        aria-label={ariaLabel ?? "Task timeline"}
+      >
+        <EmptyState
+          title="No task history"
+          description="Task activity and state changes appear here."
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      {...props}
+      className={clsx("eth-task-timeline", className)}
+      data-eth-component="TaskTimeline"
+      role={role ?? "region"}
+      aria-label={ariaLabel ?? "Task timeline"}
+    >
+      <ol className="eth-task-timeline__list">
+        {events.map((event) => {
+          const kind = eventKindMeta[event.kind];
+          const time = timestampMeta(event.timestamp);
+
+          return (
+            <li
+              key={event.id}
+              className={clsx(
+                "eth-task-timeline__event",
+                `eth-task-timeline__event--${event.kind}`
+              )}
+              data-kind={event.kind}
+            >
+              <time className="eth-task-timeline__time" dateTime={time.dateTime}>
+                {time.label}
+              </time>
+              <div className="eth-task-timeline__rail" aria-hidden>
+                <span className="eth-task-timeline__marker" />
+              </div>
+              <article className="eth-task-timeline__body">
+                <header className="eth-task-timeline__event-header">
+                  <Badge severity={kind.tone}>{kind.label}</Badge>
+                  {event.actor ? (
+                    <span className="eth-task-timeline__actor">By {event.actor}</span>
+                  ) : null}
+                </header>
+                <strong className="eth-task-timeline__summary">{event.summary}</strong>
+                {event.details ? (
+                  <p className="eth-task-timeline__details">{event.details}</p>
+                ) : null}
+              </article>
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}

package/src/components/TaskWaveDAG.tsx

@@ -0,0 +1,202 @@
+import * as React from "react";
+import clsx from "clsx";
+import { EmptyState, Surface } from "@echothink-ui/core";
+import type {
+  DAGEdgeModel,
+  DAGNodeModel,
+  PositionedDAGNode,
+  TaskWaveDAGProps
+} from "../types";
+import { DAGEdge } from "./DAGEdge";
+import { DAGLegend } from "./DAGLegend";
+import { DAGNode, DAG_NODE_HEIGHT, DAG_NODE_WIDTH } from "./DAGNode";
+
+const rankSpacing = DAG_NODE_WIDTH + 76;
+const rowSpacing = DAG_NODE_HEIGHT + 48;
+const originX = DAG_NODE_WIDTH / 2 + 28;
+const originY = DAG_NODE_HEIGHT / 2 + 48;
+const framePaddingX = 32;
+const framePaddingY = 28;
+
+interface DAGFrame {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  viewBox: string;
+}
+
+function layoutNodes(
+  nodes: DAGNodeModel[],
+  edges: DAGEdgeModel[],
+  layout: "lr" | "tb"
+): PositionedDAGNode[] {
+  const ids = new Set(nodes.map((node) => node.id));
+  const ranks = new Map(nodes.map((node) => [node.id, 0]));
+  const validEdges = edges.filter((edge) => ids.has(edge.from) && ids.has(edge.to));
+
+  for (let pass = 0; pass < nodes.length; pass += 1) {
+    for (const edge of validEdges) {
+      const fromRank = ranks.get(edge.from) ?? 0;
+      const toRank = ranks.get(edge.to) ?? 0;
+      if (toRank < fromRank + 1) ranks.set(edge.to, fromRank + 1);
+    }
+  }
+
+  const groups = new Map<number, DAGNodeModel[]>();
+  for (const node of nodes) {
+    const rank = ranks.get(node.id) ?? 0;
+    groups.set(rank, [...(groups.get(rank) ?? []), node]);
+  }
+
+  return nodes.map((node) => {
+    if (typeof node.x === "number" && typeof node.y === "number") {
+      return { ...node, x: node.x, y: node.y };
+    }
+    const rank = ranks.get(node.id) ?? 0;
+    const group = groups.get(rank) ?? [];
+    const index = group.findIndex((candidate) => candidate.id === node.id);
+    const spread = Math.max(0, index) * rowSpacing + originY;
+    const ranked = rank * rankSpacing + originX;
+    return layout === "lr"
+      ? { ...node, x: ranked, y: spread }
+      : { ...node, x: spread, y: ranked };
+  });
+}
+
+function frameFor(nodes: PositionedDAGNode[]): DAGFrame {
+  if (!nodes.length) {
+    return { x: 0, y: 0, width: 640, height: 180, viewBox: "0 0 640 180" };
+  }
+
+  const minX =
+    Math.min(...nodes.map((node) => node.x - DAG_NODE_WIDTH / 2)) - framePaddingX;
+  const minY =
+    Math.min(...nodes.map((node) => node.y - DAG_NODE_HEIGHT / 2)) - framePaddingY;
+  const maxX =
+    Math.max(...nodes.map((node) => node.x + DAG_NODE_WIDTH / 2)) + framePaddingX;
+  const maxY =
+    Math.max(...nodes.map((node) => node.y + DAG_NODE_HEIGHT / 2)) + framePaddingY;
+  const width = Math.max(360, maxX - minX);
+  const height = Math.max(120, maxY - minY);
+
+  return { x: minX, y: minY, width, height, viewBox: `${minX} ${minY} ${width} ${height}` };
+}
+
+function edgeEndpoints(
+  from: PositionedDAGNode,
+  to: PositionedDAGNode,
+  layout: "lr" | "tb"
+) {
+  if (layout === "lr") {
+    return {
+      from: { x: from.x + DAG_NODE_WIDTH / 2, y: from.y },
+      to: { x: to.x - DAG_NODE_WIDTH / 2, y: to.y }
+    };
+  }
+  return {
+    from: { x: from.x, y: from.y + DAG_NODE_HEIGHT / 2 },
+    to: { x: to.x, y: to.y - DAG_NODE_HEIGHT / 2 }
+  };
+}
+
+export function TaskWaveDAG({
+  nodes = [],
+  edges = [],
+  layout = "lr",
+  onNodeSelect,
+  selectedNodeId,
+  className,
+  title,
+  description,
+  ...props
+}: TaskWaveDAGProps) {
+  const positionedNodes = React.useMemo(
+    () => layoutNodes(nodes, edges, layout),
+    [nodes, edges, layout]
+  );
+  const nodeMap = React.useMemo(
+    () => new Map(positionedNodes.map((node) => [node.id, node])),
+    [positionedNodes]
+  );
+  const visibleStatuses = React.useMemo(
+    () => Array.from(new Set(positionedNodes.map((node) => node.status))),
+    [positionedNodes]
+  );
+  const graphFrame = React.useMemo(() => frameFor(positionedNodes), [positionedNodes]);
+  const graphTitleId = React.useId();
+  const graphDescriptionId = React.useId();
+  const graphTitle =
+    typeof title === "string" && title.trim() ? title : "Task wave dependency graph";
+  const graphDescription = `${positionedNodes.length} nodes and ${edges.length} dependencies. Statuses: ${
+    visibleStatuses.map((status) => status.replace(/-/g, " ")).join(", ") || "none"
+  }.`;
+
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-task-wave-dag", className)}
+      title={title ?? "Wave DAG"}
+      description={description}
+      data-eth-component="TaskWaveDAG"
+    >
+      {positionedNodes.length ? (
+        <>
+          <div className="eth-task-wave-dag__viewport">
+            <svg
+              className="eth-dag"
+              role="img"
+              aria-labelledby={graphTitleId}
+              aria-describedby={graphDescriptionId}
+              viewBox={graphFrame.viewBox}
+            >
+              <title id={graphTitleId}>{graphTitle}</title>
+              <desc id={graphDescriptionId}>{graphDescription}</desc>
+              <rect
+                className="eth-dag__canvas"
+                x={graphFrame.x}
+                y={graphFrame.y}
+                width={graphFrame.width}
+                height={graphFrame.height}
+                aria-hidden="true"
+              />
+              {edges.map((edge, index) => {
+                const from = nodeMap.get(edge.from);
+                const to = nodeMap.get(edge.to);
+                if (!from || !to) return null;
+                const endpoints = edgeEndpoints(from, to, layout);
+                return (
+                  <DAGEdge
+                    key={`${edge.from}-${edge.to}-${index}`}
+                    from={endpoints.from}
+                    to={endpoints.to}
+                    status={edge.status ?? to.status}
+                    label={edge.label}
+                  />
+                );
+              })}
+              {positionedNodes.map((node) => (
+                <DAGNode
+                  key={node.id}
+                  node={node}
+                  selected={node.id === selectedNodeId}
+                  onSelect={onNodeSelect}
+                />
+              ))}
+            </svg>
+          </div>
+          <DAGLegend statuses={visibleStatuses.length ? visibleStatuses : undefined} />
+          <ol className="eth-task-wave-dag__fallback">
+            {positionedNodes.map((node) => (
+              <li key={node.id}>
+                {node.label}, {node.status.replace(/-/g, " ")}
+              </li>
+            ))}
+          </ol>
+        </>
+      ) : (
+        <EmptyState title="No DAG nodes" description="Add nodes and edges to render a wave graph." />
+      )}
+    </Surface>
+  );
+}

package/src/components/TaskWaveHeader.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, Surface } from "@echothink-ui/core";
+import type { EthOperationalStatus } from "@echothink-ui/core";
+import type { TaskWaveHeaderProps } from "../types";
+import { TaskProgressIndicator } from "./TaskProgressIndicator";
+import {
+  formatDateTime,
+  labelForStatus,
+  severityForStatus,
+  waveProgress
+} from "./utils";
+
+const statusOrder: EthOperationalStatus[] = [
+  "queued",
+  "running",
+  "in-progress",
+  "pending-approval",
+  "approval-required",
+  "blocked",
+  "failed",
+  "completed",
+  "succeeded"
+];
+
+export function TaskWaveHeader({
+  wave,
+  actions,
+  className,
+  title,
+  description,
+  ...props
+}: TaskWaveHeaderProps) {
+  const progress = waveProgress(wave);
+
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-task-wave-header", className)}
+      title={wave?.label ?? title ?? "Task wave"}
+      subtitle={wave?.id}
+      description={description}
+      actions={actions}
+      data-eth-component="TaskWaveHeader"
+    >
+      {wave ? (
+        <>
+          <div className="eth-task-wave-header__summary">
+            <strong>{wave.totalTasks} tasks</strong>
+            {wave.startedAt ? <span>Started {formatDateTime(wave.startedAt)}</span> : null}
+            {wave.eta ? <span>ETA {formatDateTime(wave.eta)}</span> : null}
+          </div>
+          <TaskProgressIndicator value={progress} label="Wave progress" />
+          <div className="eth-task-wave-header__counts" aria-label="Task status counts">
+            {statusOrder
+              .filter((status) => wave.statuses[status])
+              .map((status) => {
+                const label = labelForStatus(status);
+                const count = wave.statuses[status] ?? 0;
+
+                return (
+                  <Badge
+                    key={status}
+                    severity={severityForStatus(status)}
+                    className={clsx(
+                      "eth-task-wave-header__count",
+                      `eth-task-wave-header__count--${status}`
+                    )}
+                    aria-label={`${label}: ${count}`}
+                  >
+                    {label}: <span className="eth-task-wave-header__count-value">{count}</span>
+                  </Badge>
+                );
+              })}
+          </div>
+        </>
+      ) : (
+        <TaskProgressIndicator value={0} label="Wave progress" />
+      )}
+    </Surface>
+  );
+}