@echothink-ui/task 0.1.0

package/src/components/HumanInterventionPanel.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import clsx from "clsx";
+import { ActionGroup, Badge, InlineNotification, Surface } from "@echothink-ui/core";
+import type { EthSeverity } from "@echothink-ui/core";
+import type { HumanInterventionPanelProps } from "../types";
+
+function urgencySeverity(urgency: HumanInterventionPanelProps["urgency"]): EthSeverity {
+  if (urgency === "high") return "danger";
+  if (urgency === "medium") return "warning";
+  return "info";
+}
+
+function urgencyLabel(urgency: HumanInterventionPanelProps["urgency"]) {
+  if (urgency === "high") return "High urgency";
+  if (urgency === "medium") return "Medium urgency";
+  return "Low urgency";
+}
+
+export function HumanInterventionPanel({
+  reason,
+  affectedTask,
+  actions,
+  urgency = "medium",
+  className,
+  title = "Human intervention required",
+  status = "approval-required",
+  severity,
+  role = "region",
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: HumanInterventionPanelProps) {
+  const titleId = React.useId();
+  const panelSeverity = severity ?? urgencySeverity(urgency);
+  const labelledBy = ariaLabelledBy ?? (title ? titleId : undefined);
+
+  return (
+    <Surface
+      {...props}
+      role={role}
+      aria-labelledby={labelledBy}
+      className={clsx("eth-task-human-intervention-panel", className)}
+      title={title ? <span id={titleId}>{title}</span> : undefined}
+      status={status}
+      severity={panelSeverity}
+      data-eth-component="HumanInterventionPanel"
+    >
+      <InlineNotification severity={panelSeverity} title="Intervention requested">
+        {reason ?? "Review this task and choose the next action before the agent can continue."}
+      </InlineNotification>
+
+      <dl className="eth-task-human-intervention-panel__details" aria-label="Intervention details">
+        {affectedTask ? (
+          <div>
+            <dt>Affected task</dt>
+            <dd>
+              <span className="eth-task-human-intervention-panel__task-title">
+                {affectedTask.title}
+              </span>
+              <span className="eth-task-human-intervention-panel__task-id">{affectedTask.id}</span>
+            </dd>
+          </div>
+        ) : null}
+        <div>
+          <dt>Urgency</dt>
+          <dd>
+            <Badge severity={panelSeverity}>{urgencyLabel(urgency)}</Badge>
+          </dd>
+        </div>
+      </dl>
+
+      {actions?.length ? (
+        <div
+          className="eth-task-human-intervention-panel__actions"
+          role="group"
+          aria-label="Intervention actions"
+        >
+          <ActionGroup actions={actions} />
+        </div>
+      ) : null}
+    </Surface>
+  );
+}

package/src/components/MobileTaskShell.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import clsx from "clsx";
+
+export interface MobileTaskShellProps {
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  progress?: React.ReactNode;
+  main?: React.ReactNode;
+  footer?: React.ReactNode;
+  identity?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function MobileTaskShell({
+  title,
+  subtitle,
+  progress,
+  main,
+  footer,
+  identity,
+  children,
+  className
+}: MobileTaskShellProps) {
+  const content = main ?? children;
+  const hasHeader = title || subtitle || progress;
+  const hasFooter = footer || identity;
+
+  return (
+    <section
+      className={clsx("eth-mobile-task-shell", className)}
+      data-eth-component="MobileTaskShell"
+    >
+      {hasHeader ? (
+        <header className="eth-mobile-task-shell__header">
+          <div className="eth-mobile-task-shell__title-block">
+            {title ? <h1 className="eth-mobile-task-shell__title">{title}</h1> : null}
+            {subtitle ? <p className="eth-mobile-task-shell__subtitle">{subtitle}</p> : null}
+          </div>
+          {progress ? <div className="eth-mobile-task-shell__progress">{progress}</div> : null}
+        </header>
+      ) : null}
+      <main className="eth-mobile-task-shell__main">{content}</main>
+      {hasFooter ? (
+        <footer className="eth-mobile-task-shell__footer">
+          {footer ? <div className="eth-mobile-task-shell__footer-main">{footer}</div> : null}
+          {identity ? <div className="eth-mobile-task-shell__identity">{identity}</div> : null}
+        </footer>
+      ) : null}
+    </section>
+  );
+}

package/src/components/TaskApprovalPanel.tsx

@@ -0,0 +1,159 @@
+import * as React from "react";
+import { Button, FormField, InlineNotification, Textarea } from "@echothink-ui/core";
+import type { DecisionEvidence, TaskApprovalPanelProps } from "../types";
+import { DecisionRequiredPanel } from "./DecisionRequiredPanel";
+
+function refEvidence(
+  taskRef: React.ReactNode,
+  diffRef: React.ReactNode,
+  policyRef: React.ReactNode,
+  evidence: DecisionEvidence[] = []
+): DecisionEvidence[] {
+  const refs: DecisionEvidence[] = [];
+  if (taskRef) refs.push({ id: "task-ref", label: "Task reference", preview: taskRef });
+  if (diffRef) refs.push({ id: "diff-ref", label: "Diff reference", preview: diffRef });
+  if (policyRef) refs.push({ id: "policy-ref", label: "Policy reference", preview: policyRef });
+  return [...refs, ...evidence];
+}
+
+function stateNotification(state: NonNullable<TaskApprovalPanelProps["state"]>) {
+  if (state === "approved") {
+    return {
+      severity: "success" as const,
+      title: "Output approved",
+      description: "The approval has been recorded with the current audit metadata."
+    };
+  }
+
+  if (state === "rejected") {
+    return {
+      severity: "danger" as const,
+      title: "Output rejected",
+      description: "The rejection reason and evidence references are retained for review."
+    };
+  }
+
+  if (state === "pending") {
+    return {
+      severity: "info" as const,
+      title: "Decision pending",
+      description: "The approval decision is being prepared for audit capture."
+    };
+  }
+
+  return null;
+}
+
+export function TaskApprovalPanel({
+  taskRef,
+  diffRef,
+  policyRef,
+  summary,
+  evidence,
+  onApprove,
+  onReject,
+  onRequestChanges,
+  state = "idle",
+  title = "Task approval required",
+  description,
+  footer,
+  ...props
+}: TaskApprovalPanelProps) {
+  const [reason, setReason] = React.useState("");
+  const reasonId = React.useId();
+  const notification = stateNotification(state);
+  const policy = policyRef ?? "Default task policy";
+  const isPending = state === "pending";
+
+  return (
+    <section className="eth-task-approval-panel" data-eth-component="TaskApprovalPanel">
+      <DecisionRequiredPanel
+        {...props}
+        title={title}
+        summary={
+          <div className="eth-task-approval-panel__body">
+            {summary ? <div className="eth-task-approval-panel__summary">{summary}</div> : null}
+            {notification ? (
+              <InlineNotification
+                className="eth-task-approval-panel__state"
+                severity={notification.severity}
+                title={notification.title}
+              >
+                {notification.description}
+              </InlineNotification>
+            ) : null}
+            <FormField
+              id={reasonId}
+              label="Decision reason"
+              helperText="Stored with approval audit metadata."
+              className="eth-task-approval-panel__reason"
+            >
+              <Textarea
+                value={reason}
+                rows={4}
+                placeholder="Summarize the approval rationale, rejection issue, or requested change."
+                onChange={(event) => setReason(event.currentTarget.value)}
+              />
+            </FormField>
+            <dl className="eth-task-approval-panel__audit">
+              <div>
+                <dt>Task</dt>
+                <dd>{taskRef ?? "-"}</dd>
+              </div>
+              {diffRef ? (
+                <div>
+                  <dt>Diff</dt>
+                  <dd>{diffRef}</dd>
+                </div>
+              ) : null}
+              <div>
+                <dt>Policy</dt>
+                <dd>{policy}</dd>
+              </div>
+            </dl>
+          </div>
+        }
+        description={description ?? "Review the task output and choose an approval outcome."}
+        riskLevel="high"
+        evidence={refEvidence(taskRef, diffRef, policyRef, evidence)}
+        options={[]}
+        footer={
+          <div className="eth-task-approval-panel__footer">
+            <div
+              className="eth-task-approval-panel__actions"
+              role="group"
+              aria-label="Approval actions"
+            >
+              <Button
+                intent="success"
+                disabled={isPending || !onApprove}
+                aria-pressed={state === "approved"}
+                onClick={() => onApprove?.(reason)}
+              >
+                Approve
+              </Button>
+              <Button
+                intent="danger"
+                disabled={isPending || !onReject}
+                aria-pressed={state === "rejected"}
+                onClick={() => onReject?.(reason)}
+              >
+                Reject
+              </Button>
+              <Button
+                intent="secondary"
+                disabled={isPending || !onRequestChanges}
+                onClick={() => onRequestChanges?.(reason)}
+              >
+                Request changes
+              </Button>
+            </div>
+            {footer ? (
+              <div className="eth-task-approval-panel__custom-footer">{footer}</div>
+            ) : null}
+          </div>
+        }
+      />
+    </section>
+  );
+}

package/src/components/TaskCard.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, Surface, Tag } from "@echothink-ui/core";
+import type { TaskCardProps } from "../types";
+import { formatDateTime, severityForPriority } from "./utils";
+
+export function TaskCard({ task, actions, onSelect, className, ...props }: TaskCardProps) {
+  const cardActions = actions?.map((action) => ({
+    ...action,
+    intent: action.intent ?? "tertiary"
+  }));
+
+  const interactiveProps = onSelect
+    ? {
+        role: "button",
+        tabIndex: 0,
+        onClick: () => onSelect(task),
+        onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            onSelect(task);
+          }
+        }
+      }
+    : {};
+
+  return (
+    <Surface
+      {...props}
+      {...interactiveProps}
+      className={clsx("eth-task-card", onSelect && "eth-task-card--selectable", className)}
+      density="compact"
+      title={task.title}
+      subtitle={task.id}
+      description={task.description}
+      status={task.status}
+      actions={cardActions}
+      metadata={[
+        {
+          label: "Assignee",
+          value: task.assignee ? (
+            <span className="eth-task-card__assignee">{task.assignee}</span>
+          ) : (
+            "-"
+          )
+        },
+        {
+          label: "Due",
+          value: formatDateTime(task.dueAt)
+        },
+        {
+          label: "Priority",
+          value: task.priority ? (
+            <Badge severity={severityForPriority(task.priority)}>{task.priority}</Badge>
+          ) : (
+            "-"
+          )
+        }
+      ]}
+      data-eth-component="TaskCard"
+    >
+      {task.tags?.length ? (
+        <div className="eth-task-card__tags" aria-label="Task tags">
+          {task.tags.map((tag) => (
+            <Tag key={tag}>{tag}</Tag>
+          ))}
+        </div>
+      ) : null}
+    </Surface>
+  );
+}

package/src/components/TaskDependencyList.test.tsx

@@ -0,0 +1,54 @@
+import { render, screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TaskDependencyList } from "./TaskDependencyList";
+
+describe("@echothink-ui/task TaskDependencyList", () => {
+  it("renders explicit prerequisites and dependents with counts and status labels", () => {
+    render(
+      <TaskDependencyList
+        blockedBy={[{ id: "task-118", title: "Legal approval", status: "approval-required" }]}
+        blocks={[{ id: "task-173", title: "Publish launch landing page", status: "queued" }]}
+      />
+    );
+
+    const blockedBy = screen.getByRole("region", { name: "Blocked by" });
+    const blocks = screen.getByRole("region", { name: "Blocks" });
+
+    expect(within(blockedBy).getByText("1 task")).toBeTruthy();
+    expect(within(blockedBy).getByText("Prerequisite")).toBeTruthy();
+    expect(within(blockedBy).getByText("Legal approval")).toBeTruthy();
+    expect(within(blockedBy).getByText("Approval Required")).toBeTruthy();
+    expect(within(blocks).getByText("1 task")).toBeTruthy();
+    expect(within(blocks).getByText("Dependent")).toBeTruthy();
+    expect(within(blocks).getByText("Publish launch landing page")).toBeTruthy();
+    expect(within(blocks).getByText("Queued")).toBeTruthy();
+  });
+
+  it("derives dependency groups from relationship metadata", () => {
+    render(
+      <TaskDependencyList
+        dependencies={[
+          {
+            id: "task-201",
+            title: "Security sign-off",
+            status: "pending-approval",
+            relationship: "blocked-by"
+          },
+          {
+            id: "task-202",
+            title: "Notify launch team",
+            status: "not-started",
+            relationship: "blocks"
+          }
+        ]}
+      />
+    );
+
+    expect(
+      within(screen.getByRole("region", { name: "Blocked by" })).getByText("task-201")
+    ).toBeTruthy();
+    expect(
+      within(screen.getByRole("region", { name: "Blocks" })).getByText("task-202")
+    ).toBeTruthy();
+  });
+});

package/src/components/TaskDependencyList.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, EmptyState } from "@echothink-ui/core";
+import type { TaskDependency, TaskDependencyListProps } from "../types";
+import { TaskStatusBadge } from "./TaskStatusBadge";
+
+type DependencyRelationship = "blocks" | "blocked-by";
+
+const groupDescriptions: Record<DependencyRelationship, string> = {
+  "blocked-by": "Prerequisite work that must clear before this task can move forward.",
+  blocks: "Downstream work waiting on this task."
+};
+
+function taskCountLabel(count: number) {
+  return `${count} task${count === 1 ? "" : "s"}`;
+}
+
+function relationshipLabel(relationship: DependencyRelationship) {
+  return relationship === "blocks" ? "Dependent" : "Prerequisite";
+}
+
+function DependencyGroup({
+  title,
+  relationship,
+  dependencies
+}: {
+  title: string;
+  relationship: DependencyRelationship;
+  dependencies: TaskDependency[];
+}) {
+  const headingId = React.useId();
+
+  if (!dependencies.length) return null;
+
+  return (
+    <section className="eth-task-dependencies__group" aria-labelledby={headingId}>
+      <div className="eth-task-dependencies__group-header">
+        <div className="eth-task-dependencies__group-heading">
+          <h4 id={headingId}>{title}</h4>
+          <p>{groupDescriptions[relationship]}</p>
+        </div>
+        <Badge>{taskCountLabel(dependencies.length)}</Badge>
+      </div>
+      <ul className="eth-task-dependencies__list">
+        {dependencies.map((dependency) => (
+          <li
+            key={dependency.id}
+            className={clsx(
+              "eth-task-dependencies__item",
+              `eth-task-dependencies__item--${dependency.status}`
+            )}
+            data-status={dependency.status}
+          >
+            <div className="eth-task-dependencies__item-main">
+              <span className="eth-task-dependencies__relationship">
+                {relationshipLabel(relationship)}
+              </span>
+              <span className="eth-task-dependencies__title">{dependency.title}</span>
+              <span className="eth-task-dependencies__id">{dependency.id}</span>
+            </div>
+            <TaskStatusBadge status={dependency.status} />
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export function TaskDependencyList({
+  dependencies = [],
+  blocks = [],
+  blockedBy = [],
+  emptyTitle = "No dependencies",
+  className,
+  ...props
+}: TaskDependencyListProps) {
+  const derivedBlocks = dependencies.filter((dependency) => dependency.relationship === "blocks");
+  const derivedBlockedBy = dependencies.filter(
+    (dependency) => dependency.relationship !== "blocks"
+  );
+  const blockList = blocks.length ? blocks : derivedBlocks;
+  const blockedByList = blockedBy.length ? blockedBy : derivedBlockedBy;
+  const hasDependencies = blockList.length || blockedByList.length;
+
+  return (
+    <div
+      {...props}
+      className={clsx("eth-task-dependencies", className)}
+      data-eth-component="TaskDependencyList"
+    >
+      {hasDependencies ? (
+        <>
+          <DependencyGroup
+            title="Blocked by"
+            relationship="blocked-by"
+            dependencies={blockedByList}
+          />
+          <DependencyGroup title="Blocks" relationship="blocks" dependencies={blockList} />
+        </>
+      ) : (
+        <EmptyState title={emptyTitle} />
+      )}
+    </div>
+  );
+}

package/src/components/TaskDetailPanel.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TaskDetailPanel } from "./TaskDetailPanel";
+
+const task = {
+  id: "t1",
+  title: "Create landing page hero",
+  assignee: "JD",
+  dueAt: "2026-05-30T13:00:00Z",
+  status: "in-progress" as const,
+  priority: "high" as const,
+  description: "Design hero with social-proof modules and animated stat strip."
+};
+
+describe("TaskDetailPanel", () => {
+  it("expands populated dependencies and history without duplicating actions", () => {
+    render(
+      <TaskDetailPanel
+        task={task}
+        dependencies={[
+          {
+            id: "d1",
+            title: "Approve brief",
+            status: "approval-required",
+            relationship: "blocked-by"
+          }
+        ]}
+        events={[
+          {
+            id: "h1",
+            timestamp: "2026-05-25T10:00:00Z",
+            actor: "JD",
+            kind: "status_change",
+            summary: "Moved to in progress"
+          }
+        ]}
+        actions={[{ id: "complete", label: "Complete", intent: "primary" }]}
+      />
+    );
+
+    expect(screen.getByText("Dependencies").closest("details")?.hasAttribute("open")).toBe(
+      true
+    );
+    expect(screen.getByText("History").closest("details")?.hasAttribute("open")).toBe(
+      true
+    );
+    expect(screen.getAllByRole("button", { name: "Complete" })).toHaveLength(1);
+  });
+});