@echothink-ui/task 0.1.0

package/src/components/TaskWaveTable.tsx

@@ -0,0 +1,151 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, EmptyState, StatusDot, Surface } from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { Task, TaskWaveTableProps } from "../types";
+import { formatDuration, labelForStatus } from "./utils";
+
+function taskRowsFromItems(items: TaskWaveTableProps["items"]): Task[] {
+  return (
+    items?.map((item, index) => ({
+      id: item.id,
+      title: String(item.label),
+      status: item.status ?? "not-started",
+      order: index + 1
+    })) ?? []
+  );
+}
+
+function dependencyCount(task: Task) {
+  if (typeof task.dependencyCount === "number") return task.dependencyCount;
+  if (task.dependencyIds?.length) return task.dependencyIds.length;
+  return task.dependencies?.length ?? 0;
+}
+
+function EmptyCell() {
+  return <span className="eth-task-wave-table__empty">-</span>;
+}
+
+export function TaskWaveTable({
+  wave,
+  tasks,
+  items,
+  onTaskSelect,
+  rowActions,
+  className,
+  title,
+  description,
+  ..._surfaceProps
+}: TaskWaveTableProps) {
+  const rows = tasks ?? taskRowsFromItems(items);
+  const columns = React.useMemo<DataColumn<Task>[]>(
+    () => [
+      {
+        key: "order",
+        header: "Order",
+        width: "4.5rem",
+        render: (task, index) => (
+          <span className="eth-task-wave-table__order">{task.order ?? index + 1}</span>
+        )
+      },
+      {
+        key: "title",
+        header: "Task",
+        width: "22rem",
+        render: (task) =>
+          onTaskSelect ? (
+            <button
+              className="eth-task-wave-table__task-button"
+              type="button"
+              onClick={() => onTaskSelect(task)}
+            >
+              <span className="eth-task-wave-table__task-title">{task.title}</span>
+            </button>
+          ) : (
+            <span className="eth-task-wave-table__task-title">{task.title}</span>
+          )
+      },
+      {
+        key: "status",
+        header: "Status",
+        width: "12rem",
+        render: (task) => (
+          <StatusDot
+            className="eth-task-wave-table__status"
+            status={task.status}
+            label={labelForStatus(task.status)}
+          />
+        )
+      },
+      {
+        key: "assignee",
+        header: "Assignee",
+        width: "8rem",
+        render: (task) =>
+          task.assignee ? (
+            <span className="eth-task-wave-table__assignee">{task.assignee}</span>
+          ) : (
+            <EmptyCell />
+          )
+      },
+      {
+        key: "dependencies",
+        header: "Dependencies",
+        width: "7rem",
+        align: "center",
+        render: (task) => {
+          const count = dependencyCount(task);
+          return (
+            <Badge
+              className="eth-task-wave-table__dependency-count"
+              severity={count > 0 ? "info" : "neutral"}
+            >
+              {count}
+            </Badge>
+          );
+        }
+      },
+      {
+        key: "durationMs",
+        header: "Duration",
+        width: "7rem",
+        render: (task) => (
+          <span
+            className={clsx(
+              "eth-task-wave-table__duration",
+              task.durationMs == null && "eth-task-wave-table__empty"
+            )}
+          >
+            {formatDuration(task.durationMs)}
+          </span>
+        )
+      }
+    ],
+    [onTaskSelect]
+  );
+
+  return (
+    <Surface
+      className={clsx("eth-task-wave-table", className)}
+      title={wave?.label ?? title ?? "Task wave"}
+      subtitle={wave?.id}
+      description={description}
+      data-eth-component="TaskWaveTable"
+    >
+      <DataTable<Task>
+        aria-label={
+          typeof (wave?.label ?? title) === "string"
+            ? `${wave?.label ?? title} tasks`
+            : "Wave tasks"
+        }
+        className="eth-task-wave-table__table"
+        rows={rows}
+        columns={columns}
+        rowKey="id"
+        density="compact"
+        rowActions={rowActions}
+        emptyState={<EmptyState title="No wave tasks" />}
+      />
+    </Surface>
+  );
+}

package/src/components/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/components/utils.ts

@@ -0,0 +1,116 @@
+import type { EthOperationalStatus, EthSeverity } from "@echothink-ui/core";
+import { statusLabel } from "@echothink-ui/core";
+import type { RiskLevel, TaskPriority, TaskWave } from "../types";
+
+export function severityForStatus(status: EthOperationalStatus): EthSeverity {
+  if (status === "running" || status === "queued" || status === "in-progress") return "info";
+  if (status === "blocked" || status === "failed") return "danger";
+  if (status === "pending-approval" || status === "approval-required" || status === "warning") {
+    return "warning";
+  }
+  if (status === "succeeded" || status === "completed" || status === "synced") return "success";
+  return "neutral";
+}
+
+export function severityForPriority(priority?: TaskPriority): EthSeverity {
+  if (priority === "critical") return "danger";
+  if (priority === "high") return "warning";
+  if (priority === "medium") return "info";
+  return "neutral";
+}
+
+export function severityForRisk(riskLevel?: RiskLevel): EthSeverity {
+  if (riskLevel === "critical" || riskLevel === "high") return "danger";
+  if (riskLevel === "medium") return "warning";
+  if (riskLevel === "low") return "info";
+  return "neutral";
+}
+
+export function labelForStatus(status: EthOperationalStatus) {
+  return statusLabel(status);
+}
+
+export function formatDateTime(value?: string | Date) {
+  if (!value) return "-";
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.valueOf())) return String(value);
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short"
+  }).format(date);
+}
+
+export function relativeTime(value?: string | Date, now = new Date()) {
+  if (!value) return "";
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.valueOf())) return "";
+  const deltaSeconds = Math.round((date.getTime() - now.getTime()) / 1000);
+  const units: Array<[Intl.RelativeTimeFormatUnit, number]> = [
+    ["year", 31536000],
+    ["month", 2592000],
+    ["week", 604800],
+    ["day", 86400],
+    ["hour", 3600],
+    ["minute", 60]
+  ];
+  const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+  for (const [unit, seconds] of units) {
+    if (Math.abs(deltaSeconds) >= seconds) {
+      return formatter.format(Math.round(deltaSeconds / seconds), unit);
+    }
+  }
+  return formatter.format(deltaSeconds, "second");
+}
+
+export function formatDuration(durationMs?: number) {
+  if (durationMs == null) return "-";
+  if (durationMs < 1000) return `${durationMs}ms`;
+  const seconds = Math.round(durationMs / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainder = seconds % 60;
+  if (minutes < 60) return remainder ? `${minutes}m ${remainder}s` : `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  const minuteRemainder = minutes % 60;
+  return minuteRemainder ? `${hours}h ${minuteRemainder}m` : `${hours}h`;
+}
+
+export function clampProgress(value?: number, total = 100) {
+  if (value == null || Number.isNaN(value)) return 0;
+  if (total <= 0) return 0;
+  const percent = total === 100 ? value : (value / total) * 100;
+  return Math.max(0, Math.min(100, Math.round(percent)));
+}
+
+export function waveProgress(wave?: TaskWave) {
+  if (!wave?.totalTasks) return 0;
+  const completed = (wave.statuses.completed ?? 0) + (wave.statuses.succeeded ?? 0);
+  return clampProgress(completed, wave.totalTasks);
+}
+
+export function statusColor(status?: EthOperationalStatus) {
+  switch (status) {
+    case "completed":
+    case "succeeded":
+    case "synced":
+    case "active":
+      return "var(--eth-color-success)";
+    case "running":
+    case "in-progress":
+    case "queued":
+      return "var(--eth-color-info)";
+    case "blocked":
+    case "failed":
+    case "approval-required":
+      return "var(--eth-color-danger)";
+    case "pending-approval":
+    case "warning":
+      return "var(--eth-color-warning)";
+    default:
+      return "var(--eth-color-border-strong)";
+  }
+}
+
+export function fallbackId(prefix: string) {
+  return `${prefix}-${Math.random().toString(36).slice(2)}`;
+}

package/src/index.test.tsx

@@ -0,0 +1,316 @@
+import { render, screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  TaskCard,
+  TaskProgressIndicator,
+  TaskStatusBadge,
+  TaskTable,
+  TaskTimeline,
+  TaskWaveDAG,
+  TaskWaveHeader,
+  TaskWaveTable,
+  type Task
+} from "./index";
+
+const tasks: Task[] = [
+  {
+    id: "t1",
+    title: "Create landing page hero",
+    assignee: "JD",
+    dueAt: "2026-05-30",
+    status: "in-progress",
+    priority: "high"
+  },
+  {
+    id: "t2",
+    title: "Approve pricing copy",
+    assignee: "Legal",
+    status: "approval-required"
+  },
+  {
+    id: "t3",
+    title: "Wire analytics",
+    assignee: "AL",
+    status: "queued"
+  },
+  {
+    id: "t4",
+    title: "QA pass",
+    assignee: "MK",
+    status: "blocked"
+  }
+];
+
+describe("@echothink-ui/task TaskCard", () => {
+  it("renders the task summary, metadata, tags, and actions in one compact surface", () => {
+    render(
+      <TaskCard
+        task={{
+          id: "t1",
+          title: "Create landing page hero",
+          assignee: "JD",
+          dueAt: "2026-05-30T20:00:00Z",
+          status: "in-progress",
+          priority: "high",
+          tags: ["q3-launch", "design"],
+          description: "Design hero with social-proof modules and animated stat strip."
+        }}
+        actions={[{ id: "view", label: "View" }]}
+      />
+    );
+
+    const card = screen
+      .getByRole("heading", { name: "Create landing page hero" })
+      .closest('[data-eth-component="TaskCard"]');
+
+    expect(card?.className).toContain("eth-task-card");
+    expect(
+      screen.getByText("Design hero with social-proof modules and animated stat strip.")
+    ).toBeTruthy();
+    expect(card ? within(card).getByText("Assignee") : null).toBeTruthy();
+    expect(card ? within(card).getByText("Priority") : null).toBeTruthy();
+    expect(card ? within(card).getByText("q3-launch") : null).toBeTruthy();
+    expect(screen.getByRole("button", { name: "View" })).toBeTruthy();
+  });
+});
+
+describe("@echothink-ui/task TaskWaveTable", () => {
+  it("renders wave rows with stable table cell affordances", () => {
+    const { container } = render(
+      <TaskWaveTable
+        wave={{
+          id: "wave-q3",
+          label: "Wave Q3",
+          totalTasks: 1,
+          statuses: { "in-progress": 1 }
+        }}
+        tasks={[
+          {
+            id: "task-1",
+            title: "Create landing page hero",
+            status: "in-progress",
+            assignee: "JD",
+            order: 1,
+            dependencyCount: 2,
+            durationMs: 5400000
+          }
+        ]}
+      />
+    );
+
+    const waveTable = container.querySelector('[data-eth-component="TaskWaveTable"]');
+
+    expect(waveTable?.className).toContain("eth-task-wave-table");
+    expect(waveTable?.querySelector(".eth-task-wave-table__order")?.textContent).toBe("1");
+    expect(waveTable?.querySelector(".eth-task-wave-table__task-title")?.textContent).toBe(
+      "Create landing page hero"
+    );
+    expect(waveTable?.querySelector(".eth-task-wave-table__dependency-count")?.textContent).toBe(
+      "2"
+    );
+    expect(waveTable?.querySelector(".eth-task-wave-table__duration")?.textContent).toBe(
+      "1h 30m"
+    );
+  });
+});
+
+describe("@echothink-ui/task TaskTimeline", () => {
+  it("renders task events as a readable semantic activity timeline", () => {
+    const { container } = render(
+      <TaskTimeline
+        events={[
+          {
+            id: "created",
+            timestamp: "2026-05-25T09:00:00Z",
+            actor: "JD",
+            kind: "status_change",
+            summary: "Created task"
+          },
+          {
+            id: "comment",
+            timestamp: "2026-05-26T11:30:00Z",
+            actor: "Agent",
+            kind: "comment",
+            summary: "Drafted initial copy",
+            details: "Added the launch message and review checklist."
+          }
+        ]}
+      />
+    );
+
+    const timeline = screen.getByRole("region", { name: "Task timeline" });
+    expect(within(timeline).getByRole("list")).toBeTruthy();
+    expect(within(timeline).getByText("Created task")).toBeTruthy();
+    expect(within(timeline).getByText("Drafted initial copy")).toBeTruthy();
+    expect(
+      within(timeline).getByText("Added the launch message and review checklist.")
+    ).toBeTruthy();
+    expect(within(timeline).getByText("By Agent")).toBeTruthy();
+
+    const times = Array.from(container.querySelectorAll("time"));
+    expect(times[0]?.getAttribute("datetime")).toBe("2026-05-25T09:00:00.000Z");
+    expect(times[0]?.textContent).not.toContain("2026-05-25T09:00:00.000Z");
+    expect(times[0]?.textContent).not.toContain("ago");
+
+    expect(within(timeline).getByText("Status").closest("li")?.className).toContain(
+      "eth-task-timeline__event--status_change"
+    );
+    expect(within(timeline).getByText("Comment").closest("li")?.className).toContain(
+      "eth-task-timeline__event--comment"
+    );
+    expect(container.querySelector(".eth-task-timeline__marker")?.textContent).toBe("");
+  });
+});
+
+describe("@echothink-ui/task TaskProgressIndicator", () => {
+  it("renders step progress as an ordered workflow with separate labels and statuses", () => {
+    const { container } = render(
+      <TaskProgressIndicator
+        label="Deployment progress"
+        steps={[
+          { id: "plan", label: "Plan", status: "completed" },
+          { id: "build", label: "Build", status: "running" },
+          { id: "ship", label: "Ship", status: "not-started" }
+        ]}
+      />
+    );
+
+    const list = screen.getByRole("list", { name: "Deployment progress" });
+    const steps = screen.getAllByRole("listitem");
+
+    expect(container.querySelector('[data-eth-component="TaskProgressIndicator"]')).toBeTruthy();
+    expect(steps).toHaveLength(3);
+    expect(within(steps[0]).getByText("Plan").className).toContain(
+      "eth-task-progress__step-label"
+    );
+    expect(within(steps[0]).getByText("Completed").className).toContain(
+      "eth-task-progress__step-status"
+    );
+    expect(steps[1].getAttribute("aria-current")).toBe("step");
+    expect(steps[2].getAttribute("aria-current")).toBeNull();
+    expect(list.querySelectorAll(".eth-task-progress__connector")).toHaveLength(2);
+    expect(container.querySelector(".eth-status-dot")).toBeNull();
+  });
+});
+
+describe("@echothink-ui/task TaskStatusBadge", () => {
+  it("marks task status badges with state-specific semantics and an indicator", () => {
+    render(<TaskStatusBadge status="approval-required" aria-label="Task approval required" />);
+
+    const badge = screen.getByText("Approval Required").closest(".eth-task-status-badge");
+
+    expect(badge?.className).toContain("eth-task-status-badge--approval-required");
+    expect(badge?.getAttribute("data-eth-component")).toBe("TaskStatusBadge");
+    expect(badge?.getAttribute("aria-label")).toBe("Task approval required");
+    expect(
+      badge?.querySelector(".eth-task-status-badge__indicator")?.getAttribute("aria-hidden")
+    ).toBe("true");
+  });
+
+  it("allows status copy to be overridden without losing status semantics", () => {
+    render(<TaskStatusBadge status="completed" label="Done" />);
+
+    const badge = screen.getByText("Done").closest(".eth-task-status-badge");
+
+    expect(badge?.className).toContain("eth-task-status-badge--completed");
+    expect(badge?.getAttribute("data-status")).toBe("completed");
+  });
+});
+
+describe("@echothink-ui/task TaskWaveDAG", () => {
+  it("renders a compact accessible dependency graph with a viewport, statuses, and edge labels", () => {
+    render(
+      <TaskWaveDAG
+        title="Launch dependencies"
+        nodes={[
+          { id: "research", label: "Research", status: "completed" },
+          { id: "brief", label: "Brief", status: "in-progress" },
+          { id: "legal", label: "Legal gate", status: "pending-approval" },
+          { id: "publish", label: "Publish", status: "not-started" }
+        ]}
+        edges={[
+          { from: "research", to: "brief", label: "handoff" },
+          { from: "research", to: "legal", label: "approval" },
+          { from: "brief", to: "publish" },
+          { from: "legal", to: "publish" }
+        ]}
+      />
+    );
+
+    const graph = screen.getByRole("img", { name: "Launch dependencies" });
+
+    expect(graph.className.baseVal).toContain("eth-dag");
+    expect(graph.closest(".eth-task-wave-dag__viewport")).toBeTruthy();
+    expect(graph.querySelector(".eth-dag__canvas")).toBeTruthy();
+    expect(screen.getByText("Research")).toBeTruthy();
+    expect(screen.getByText("Legal gate")).toBeTruthy();
+    expect(screen.getByText("approval")).toBeTruthy();
+    expect(screen.getAllByText("Pending Approval").length).toBeGreaterThan(0);
+  });
+});
+
+describe("@echothink-ui/task TaskTable", () => {
+  it("renders a named table with Carbon data-table classes", () => {
+    render(<TaskTable tasks={tasks} title="Tasks" />);
+
+    const table = screen.getByRole("table", { name: "Tasks table" });
+
+    expect(table.getAttribute("data-eth-component")).toBe("TaskTable");
+    expect(table.className).toContain("eth-task-table");
+    expect(table.className).toContain("eth-data-table");
+  });
+
+  it("filters rows by operational status when a status filter is supplied", () => {
+    render(<TaskTable tasks={tasks} title="Tasks" showFilters statusFilter="blocked" />);
+
+    expect(screen.getByText("QA pass")).toBeTruthy();
+    expect(screen.queryByText("Create landing page hero")).toBeNull();
+    expect(screen.getByText("1 of 4 tasks shown")).toBeTruthy();
+  });
+
+  it("renders selectable bulk actions when bulk actions are supplied", () => {
+    render(
+      <TaskTable
+        tasks={tasks}
+        title="Tasks"
+        selectedRows={["t2"]}
+        bulkActions={[{ id: "approve", label: "Approve selected", requiresConfirmation: false }]}
+      />
+    );
+
+    expect(screen.getByText("1 row selected")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Approve selected" })).toBeTruthy();
+  });
+});
+
+describe("@echothink-ui/task TaskWaveHeader", () => {
+  it("renders compact wave progress, status counts, and actions", () => {
+    const { container } = render(
+      <TaskWaveHeader
+        wave={{
+          id: "wave-q3",
+          label: "Wave Q3",
+          totalTasks: 4,
+          statuses: { completed: 1, running: 1, "approval-required": 1, queued: 1 },
+          startedAt: "2026-05-25T08:00:00",
+          eta: "2026-06-01T08:00:00"
+        }}
+        actions={[{ id: "pause", label: "Pause wave" }]}
+      />
+    );
+
+    const header = screen
+      .getByRole("heading", { name: "Wave Q3" })
+      .closest('[data-eth-component="TaskWaveHeader"]');
+
+    expect(header?.className).toContain("eth-task-wave-header");
+    expect(header ? within(header).getByText("Wave progress") : null).toBeTruthy();
+    expect(container.querySelector(".eth-task-wave-header__count--queued")?.textContent).toContain(
+      "Queued: 1"
+    );
+    expect(
+      container.querySelector(".eth-task-wave-header__count--approval-required")?.textContent
+    ).toContain("Approval Required: 1");
+    expect(screen.getByRole("button", { name: "Pause wave" })).toBeTruthy();
+  });
+});

package/src/index.tsx

@@ -0,0 +1,90 @@
+import "./styles.css";
+
+export { BackendThinkingChain } from "./components/BackendThinkingChain";
+export { BlockingReasonPanel } from "./components/BlockingReasonPanel";
+export { DAGEdge } from "./components/DAGEdge";
+export { DAGLegend } from "./components/DAGLegend";
+export { DAGNode } from "./components/DAGNode";
+export { DecisionRequiredPanel } from "./components/DecisionRequiredPanel";
+export { HumanInterventionPanel } from "./components/HumanInterventionPanel";
+export { TaskApprovalPanel } from "./components/TaskApprovalPanel";
+export { TaskCard } from "./components/TaskCard";
+export { TaskDependencyList } from "./components/TaskDependencyList";
+export { TaskDetailPanel } from "./components/TaskDetailPanel";
+export { TaskHandoffPanel } from "./components/TaskHandoffPanel";
+export { TaskProgressIndicator } from "./components/TaskProgressIndicator";
+export { TaskRetryPanel } from "./components/TaskRetryPanel";
+export { TaskRunLog } from "./components/TaskRunLog";
+export { TaskStatusBadge } from "./components/TaskStatusBadge";
+export { TaskTable } from "./components/TaskTable";
+export { TaskTimeline } from "./components/TaskTimeline";
+export { TaskWaveDAG } from "./components/TaskWaveDAG";
+export { TaskWaveHeader } from "./components/TaskWaveHeader";
+export { TaskWaveTable } from "./components/TaskWaveTable";
+export { MobileTaskShell } from "./components/MobileTaskShell";
+export type { MobileTaskShellProps } from "./components/MobileTaskShell";
+export type {
+  BackendThinkingChainProps,
+  BackendThinkingStep,
+  BlockingReasonPanelProps,
+  DAGEdgeLegendItem,
+  DAGEdgeLegendVariant,
+  DAGEdgeModel,
+  DAGEdgeProps,
+  DAGLegendProps,
+  DAGNodeModel,
+  DAGNodeProps,
+  DecisionEvidence,
+  DecisionOption,
+  DecisionRequiredPanelProps,
+  HumanInterventionPanelProps,
+  PositionedDAGNode,
+  RiskLevel,
+  Task,
+  TaskApprovalPanelProps,
+  TaskCardProps,
+  TaskDependency,
+  TaskDependencyListProps,
+  TaskDetailPanelProps,
+  TaskHandoffPanelProps,
+  TaskPriority,
+  TaskProgressIndicatorProps,
+  TaskRetryPanelProps,
+  TaskRunLogEntry,
+  TaskRunLogProps,
+  TaskStatusBadgeProps,
+  TaskStep,
+  TaskTableProps,
+  TaskTimelineEvent,
+  TaskTimelineProps,
+  TaskWave,
+  TaskWaveDAGProps,
+  TaskWaveHeaderProps,
+  TaskWaveTableProps
+} from "./types";
+
+export const TaskComponentNames = [
+  "TaskCard",
+  "TaskTable",
+  "TaskDetailPanel",
+  "TaskStatusBadge",
+  "TaskProgressIndicator",
+  "TaskDependencyList",
+  "TaskTimeline",
+  "TaskWaveTable",
+  "TaskWaveHeader",
+  "TaskWaveDAG",
+  "DAGNode",
+  "DAGEdge",
+  "DAGLegend",
+  "TaskApprovalPanel",
+  "DecisionRequiredPanel",
+  "BackendThinkingChain",
+  "HumanInterventionPanel",
+  "BlockingReasonPanel",
+  "TaskHandoffPanel",
+  "TaskRunLog",
+  "TaskRetryPanel",
+  "MobileTaskShell"
+] as const;
+export type TaskComponentName = (typeof TaskComponentNames)[number];