@echothink-ui/task 0.1.0

package/src/components/TaskDetailPanel.tsx

@@ -0,0 +1,139 @@
+import * as React from "react";
+import clsx from "clsx";
+import { ActionGroup, Badge, EmptyState, Surface } from "@echothink-ui/core";
+import type { TaskDetailPanelProps } from "../types";
+import { TaskDependencyList } from "./TaskDependencyList";
+import { TaskTimeline } from "./TaskTimeline";
+import { TaskStatusBadge } from "./TaskStatusBadge";
+import { formatDateTime, severityForPriority } from "./utils";
+
+function formatCount(count: number, singular: string, plural = `${singular}s`) {
+  return `${count} ${count === 1 ? singular : plural}`;
+}
+
+function DetailSection({
+  title,
+  meta,
+  open,
+  children,
+  className
+}: {
+  title: string;
+  meta?: React.ReactNode;
+  open?: boolean;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <details open={open} className={clsx("eth-task-detail-panel__section", className)}>
+      <summary className="eth-task-detail-panel__summary">
+        <span className="eth-task-detail-panel__summary-label">{title}</span>
+        {meta ? <span className="eth-task-detail-panel__summary-meta">{meta}</span> : null}
+      </summary>
+      <div className="eth-task-detail-panel__section-body">{children}</div>
+    </details>
+  );
+}
+
+export function TaskDetailPanel({
+  task,
+  dependencies,
+  events,
+  actions,
+  className,
+  title,
+  description,
+  items,
+  ...props
+}: TaskDetailPanelProps) {
+  if (!task) {
+    return (
+      <Surface
+        {...props}
+        className={clsx("eth-task-detail-panel", className)}
+        title={title ?? "Task detail"}
+        description={description}
+        items={items}
+        actions={actions}
+        data-eth-component="TaskDetailPanel"
+      >
+        {!items?.length ? <EmptyState title="No task selected" /> : null}
+      </Surface>
+    );
+  }
+
+  const resolvedDependencies = dependencies ?? task.dependencies ?? [];
+  const resolvedEvents = events ?? task.history ?? [];
+
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-task-detail-panel", className)}
+      title={title ?? task.title}
+      subtitle={task.id}
+      status={task.status}
+      data-eth-component="TaskDetailPanel"
+    >
+      <div className="eth-task-detail-panel__stack">
+        <DetailSection title="Metadata" open>
+          <dl className="eth-meta-grid eth-task-detail-panel__metadata">
+            <div>
+              <dt>Status</dt>
+              <dd>
+                <TaskStatusBadge status={task.status} />
+              </dd>
+            </div>
+            <div>
+              <dt>Assignee</dt>
+              <dd>{task.assignee ?? "-"}</dd>
+            </div>
+            <div>
+              <dt>Due</dt>
+              <dd>{formatDateTime(task.dueAt)}</dd>
+            </div>
+            <div>
+              <dt>Priority</dt>
+              <dd>
+                {task.priority ? (
+                  <Badge severity={severityForPriority(task.priority)}>{task.priority}</Badge>
+                ) : (
+                  "-"
+                )}
+              </dd>
+            </div>
+          </dl>
+        </DetailSection>
+
+        <DetailSection title="Description" open>
+          <div className="eth-task-detail-panel__description">
+            {task.description ?? description ?? "No description provided."}
+          </div>
+        </DetailSection>
+
+        <DetailSection
+          title="Dependencies"
+          meta={formatCount(resolvedDependencies.length, "dependency", "dependencies")}
+          open={resolvedDependencies.length > 0}
+        >
+          <TaskDependencyList dependencies={resolvedDependencies} />
+        </DetailSection>
+
+        <DetailSection
+          title="History"
+          meta={formatCount(resolvedEvents.length, "event")}
+          open={resolvedEvents.length > 0}
+        >
+          <TaskTimeline events={resolvedEvents} />
+        </DetailSection>
+
+        {actions?.length ? (
+          <DetailSection title="Actions" meta={formatCount(actions.length, "action")} open>
+            <div className="eth-task-detail-panel__actions">
+              <ActionGroup actions={actions} />
+            </div>
+          </DetailSection>
+        ) : null}
+      </div>
+    </Surface>
+  );
+}

package/src/components/TaskHandoffPanel.tsx

@@ -0,0 +1,125 @@
+import * as React from "react";
+import clsx from "clsx";
+import {
+  Badge,
+  Button,
+  EmptyState,
+  FormField,
+  Surface,
+  Textarea
+} from "@echothink-ui/core";
+import type { TaskHandoffPanelProps } from "../types";
+
+type TaskHandoffAssigneeKind =
+  NonNullable<TaskHandoffPanelProps["assigneeOptions"]>[number]["kind"];
+
+export function TaskHandoffPanel({
+  assigneeOptions = [],
+  currentAssigneeId,
+  onHandoff,
+  reasonRequired,
+  className,
+  title = "Task handoff",
+  description,
+  ...props
+}: TaskHandoffPanelProps) {
+  const [selectedId, setSelectedId] = React.useState(
+    currentAssigneeId ?? assigneeOptions[0]?.id ?? ""
+  );
+  const [reason, setReason] = React.useState("");
+  const targetId = React.useId();
+  const reasonId = React.useId();
+  const trimmedReason = reason.trim();
+  const cannotSubmit = !selectedId || (reasonRequired && !trimmedReason);
+
+  const submitHandoff = (event?: React.FormEvent) => {
+    event?.preventDefault();
+    if (cannotSubmit) return;
+    onHandoff?.(selectedId, trimmedReason);
+  };
+
+  const handleReasonKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+      event.preventDefault();
+      submitHandoff();
+    }
+  };
+
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-task-handoff-panel", className)}
+      title={title}
+      description={description}
+      data-eth-component="TaskHandoffPanel"
+    >
+      {assigneeOptions.length ? (
+        <form className="eth-task-handoff-panel__body" onSubmit={submitHandoff}>
+          <div className="eth-task-handoff-panel__target-field">
+            <p id={targetId} className="eth-task-handoff-panel__target-heading">
+              Handoff target
+            </p>
+            <div
+              className="eth-task-handoff-panel__list"
+              role="group"
+              aria-labelledby={targetId}
+            >
+              {assigneeOptions.map((option) => (
+                <button
+                  key={option.id}
+                  type="button"
+                  aria-label={`Hand off to ${option.label} (${formatAssigneeKind(
+                    option.kind
+                  )})`}
+                  aria-pressed={selectedId === option.id}
+                  className={clsx(
+                    "eth-task-handoff-panel__option",
+                    selectedId === option.id && "eth-task-handoff-panel__option--selected"
+                  )}
+                  onClick={() => setSelectedId(option.id)}
+                >
+                  <span className="eth-task-handoff-panel__option-copy">
+                    <span className="eth-task-handoff-panel__option-label">{option.label}</span>
+                  </span>
+                  <span className="eth-task-handoff-panel__option-meta">
+                    {selectedId === option.id ? <Badge severity="info">Selected</Badge> : null}
+                    <Badge severity="neutral">{formatAssigneeKind(option.kind)}</Badge>
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+          <FormField
+            id={reasonId}
+            label="Handoff reason"
+            required={reasonRequired}
+            className="eth-task-handoff-panel__reason-field"
+            helperText={reasonRequired ? "A reason is required for this handoff." : undefined}
+          >
+            <Textarea
+              className="eth-task-handoff-panel__reason"
+              name="handoff-reason"
+              autoComplete="off"
+              placeholder="Summarize context, blockers, and the next action..."
+              value={reason}
+              rows={3}
+              onKeyDown={handleReasonKeyDown}
+              onChange={(event) => setReason(event.currentTarget.value)}
+            />
+          </FormField>
+          <div className="eth-task-handoff-panel__actions">
+            <Button type="submit" disabled={cannotSubmit}>
+              Handoff
+            </Button>
+          </div>
+        </form>
+      ) : (
+        <EmptyState title="No assignees available" />
+      )}
+    </Surface>
+  );
+}
+
+function formatAssigneeKind(kind: TaskHandoffAssigneeKind) {
+  return kind.charAt(0).toUpperCase() + kind.slice(1);
+}

package/src/components/TaskProgressIndicator.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import clsx from "clsx";
+import type { TaskProgressIndicatorProps } from "../types";
+import { clampProgress, labelForStatus } from "./utils";
+
+const currentStepStatuses = new Set(["active", "in-progress", "running"]);
+
+export function TaskProgressIndicator({
+  value,
+  total = 100,
+  steps,
+  label = "Task progress",
+  className,
+  ...props
+}: TaskProgressIndicatorProps) {
+  if (steps?.length) {
+    return (
+      <div
+        {...props}
+        className={clsx("eth-task-progress eth-task-progress--steps", className)}
+        data-eth-component="TaskProgressIndicator"
+      >
+        <ol className="eth-task-progress__steps" aria-label={label}>
+          {steps.map((step, index) => {
+            const statusLabel = labelForStatus(step.status);
+            const isCurrentStep = currentStepStatuses.has(step.status);
+
+            return (
+              <li
+                key={step.id}
+                className={clsx(
+                  "eth-task-progress__step",
+                  `eth-task-progress__step--${step.status}`
+                )}
+                aria-current={isCurrentStep ? "step" : undefined}
+                data-status={step.status}
+              >
+                <span className="eth-task-progress__step-track" aria-hidden="true">
+                  <span className="eth-task-progress__circle" />
+                  {index < steps.length - 1 ? (
+                    <span className="eth-task-progress__connector" />
+                  ) : null}
+                </span>
+                <span className="eth-task-progress__step-copy">
+                  <span className="eth-task-progress__step-label">{step.label}</span>
+                  <span className="eth-task-progress__step-status">{statusLabel}</span>
+                </span>
+              </li>
+            );
+          })}
+        </ol>
+      </div>
+    );
+  }
+
+  const progressValue = clampProgress(value, total);
+  return (
+    <div
+      {...props}
+      className={clsx("eth-task-progress eth-task-progress--bar", className)}
+      data-eth-component="TaskProgressIndicator"
+    >
+      <div className="eth-task-progress__label">
+        <span>{label}</span>
+        <strong>{progressValue}%</strong>
+      </div>
+      <progress value={progressValue} max={100} aria-label={label} />
+    </div>
+  );
+}

package/src/components/TaskRetryPanel.test.tsx

@@ -0,0 +1,29 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { TaskRetryPanel } from "./TaskRetryPanel";
+
+describe("TaskRetryPanel", () => {
+  it("surfaces exhausted retry policy and submits the captured reason", () => {
+    const onRetry = vi.fn();
+
+    render(
+      <TaskRetryPanel
+        title="Retry failed task"
+        taskRef="Create landing page hero"
+        failureSummary="Upstream 503"
+        retryPolicy={{ maxRetries: 3, backoff: "exponential", intervalMs: 5000 }}
+        attemptCount={3}
+        onRetry={onRetry}
+      />
+    );
+
+    expect(screen.getByText("Automatic retries exhausted")).toBeTruthy();
+
+    fireEvent.change(screen.getByLabelText("Retry reason"), {
+      target: { value: "Renderer recovered after queue drain." }
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Retry task" }));
+
+    expect(onRetry).toHaveBeenCalledWith("Renderer recovered after queue drain.");
+  });
+});

package/src/components/TaskRetryPanel.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Button, FormField, InlineNotification, Surface, Textarea } from "@echothink-ui/core";
+import { RetryIcon } from "@echothink-ui/icons";
+import type { TaskRetryPanelProps } from "../types";
+import { formatDuration } from "./utils";
+
+const backoffLabels = {
+  exponential: "Exponential",
+  linear: "Linear"
+} as const;
+
+export function TaskRetryPanel({
+  taskRef,
+  failureSummary,
+  retryPolicy,
+  attemptCount = 0,
+  onRetry,
+  className,
+  title = "Retry failed task",
+  description,
+  ...props
+}: TaskRetryPanelProps) {
+  const [reason, setReason] = React.useState("");
+  const reasonId = React.useId();
+  const retriesExhausted = retryPolicy ? attemptCount >= retryPolicy.maxRetries : false;
+  const attemptLabel = retryPolicy ? `${attemptCount} / ${retryPolicy.maxRetries}` : attemptCount;
+  const backoffLabel = retryPolicy ? backoffLabels[retryPolicy.backoff] : "-";
+
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-task-retry-panel", className)}
+      title={title}
+      description={description}
+      severity="danger"
+      data-eth-component="TaskRetryPanel"
+    >
+      <InlineNotification severity="danger" title="Task failed">
+        {failureSummary ?? "The task did not complete successfully."}
+      </InlineNotification>
+      <dl className="eth-task-retry-panel__policy" aria-label="Retry policy">
+        <div>
+          <dt>Task</dt>
+          <dd>{taskRef ?? "-"}</dd>
+        </div>
+        <div
+          className={clsx(
+            "eth-task-retry-panel__attempts",
+            retriesExhausted && "eth-task-retry-panel__attempts--exhausted"
+          )}
+        >
+          <dt>Attempts</dt>
+          <dd>
+            <span>{attemptLabel}</span>
+            {retriesExhausted ? (
+              <span className="eth-task-retry-panel__policy-note">
+                Automatic retries exhausted
+              </span>
+            ) : null}
+          </dd>
+        </div>
+        {retryPolicy ? (
+          <>
+            <div>
+              <dt>Backoff</dt>
+              <dd>{backoffLabel}</dd>
+            </div>
+            <div>
+              <dt>Interval</dt>
+              <dd>{formatDuration(retryPolicy.intervalMs)}</dd>
+            </div>
+          </>
+        ) : null}
+      </dl>
+      <div className="eth-task-retry-panel__controls">
+        <FormField
+          id={reasonId}
+          label="Retry reason"
+          helperText="Stored with retry audit metadata."
+          className="eth-task-retry-panel__reason-field"
+        >
+          <Textarea
+            value={reason}
+            rows={3}
+            placeholder="Summarize what changed before retrying."
+            onChange={(event) => setReason(event.currentTarget.value)}
+          />
+        </FormField>
+        <div className="eth-task-retry-panel__actions">
+          <Button
+            icon={<RetryIcon size={16} />}
+            intent="primary"
+            onClick={() => onRetry?.(reason)}
+          >
+            Retry task
+          </Button>
+          <p>Creates a new attempt and records this reason in the task audit trail.</p>
+        </div>
+      </div>
+    </Surface>
+  );
+}

package/src/components/TaskRunLog.tsx

@@ -0,0 +1,156 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, Checkbox, EmptyState, IconButton, Surface } from "@echothink-ui/core";
+import { PauseIcon, PlayIcon } from "@echothink-ui/icons";
+import type { TaskRunLogEntry, TaskRunLogProps } from "../types";
+import { formatDateTime } from "./utils";
+
+const logLevels: TaskRunLogEntry["level"][] = ["error", "warn", "info", "debug"];
+
+export function TaskRunLog({
+  entries = [],
+  streaming,
+  onPauseToggle,
+  onFilter,
+  levelFilter,
+  windowSize = 200,
+  className,
+  title = "Task run log",
+  description,
+  ...props
+}: TaskRunLogProps) {
+  const [internalFilter, setInternalFilter] = React.useState<TaskRunLogEntry["level"][]>(logLevels);
+  const activeFilter = (levelFilter as TaskRunLogEntry["level"][] | undefined) ?? internalFilter;
+  const counts = React.useMemo(
+    () =>
+      logLevels.reduce(
+        (summary, level) => ({
+          ...summary,
+          [level]: entries.filter((entry) => entry.level === level).length
+        }),
+        {} as Record<TaskRunLogEntry["level"], number>
+      ),
+    [entries]
+  );
+  const visibleEntries = React.useMemo(
+    () =>
+      entries
+        .filter((entry) => activeFilter.includes(entry.level))
+        .slice(-windowSize),
+    [activeFilter, entries, windowSize]
+  );
+
+  const toggleLevel = (level: TaskRunLogEntry["level"]) => {
+    onFilter?.(level);
+    if (!levelFilter) {
+      setInternalFilter((current) =>
+        current.includes(level)
+          ? current.filter((candidate) => candidate !== level)
+          : [...current, level]
+      );
+    }
+  };
+  const streamLabel = streaming ? "Streaming" : "Paused";
+
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-task-run-log", className)}
+      title={title}
+      description={description}
+      data-eth-component="TaskRunLog"
+    >
+      <div className="eth-task-run-log__toolbar" role="toolbar" aria-label="Task log controls">
+        <div className="eth-task-run-log__stream-state" aria-live="polite">
+          {onPauseToggle ? (
+            <IconButton
+              label={streaming ? "Pause log stream" : "Resume log stream"}
+              icon={streaming ? <PauseIcon size={16} /> : <PlayIcon size={16} />}
+              intent="ghost"
+              density="compact"
+              onClick={onPauseToggle}
+            />
+          ) : null}
+          <Badge severity={streaming ? "success" : "neutral"}>{streamLabel}</Badge>
+          <span className="eth-task-run-log__buffer-count">
+            {visibleEntries.length} of {entries.length} entries
+          </span>
+        </div>
+        <fieldset className="eth-task-run-log__filters">
+          <legend>Levels</legend>
+          <div className="eth-task-run-log__filter-options">
+            {logLevels.map((level) => (
+              <Checkbox
+                key={level}
+                label={level}
+                checked={activeFilter.includes(level)}
+                onChange={() => toggleLevel(level)}
+              />
+            ))}
+          </div>
+        </fieldset>
+      </div>
+      <dl className="eth-task-run-log__summary" aria-label="Task log summary">
+        <div>
+          <dt>Buffered</dt>
+          <dd>{entries.length}</dd>
+        </div>
+        <div>
+          <dt>Visible</dt>
+          <dd>{visibleEntries.length}</dd>
+        </div>
+        <div>
+          <dt>Warnings</dt>
+          <dd>{counts.warn}</dd>
+        </div>
+        <div>
+          <dt>Errors</dt>
+          <dd>{counts.error}</dd>
+        </div>
+      </dl>
+      {visibleEntries.length ? (
+        <div
+          className="eth-task-run-log__viewport"
+          role="log"
+          aria-label="Task execution log entries"
+          aria-live={streaming ? "polite" : "off"}
+          aria-relevant="additions text"
+        >
+          <div className="eth-task-run-log__columns" aria-hidden="true">
+            <span>Time</span>
+            <span>Level</span>
+            <span>Message</span>
+          </div>
+          {visibleEntries.map((entry) => (
+            <div
+              key={entry.id}
+              className={clsx("eth-task-run-log__entry", `eth-task-run-log__entry--${entry.level}`)}
+            >
+              <time className="eth-task-run-log__time" dateTime={String(entry.timestamp)}>
+                {formatDateTime(entry.timestamp)}
+              </time>
+              <span
+                className={clsx(
+                  "eth-task-run-log__level",
+                  `eth-task-run-log__level--${entry.level}`
+                )}
+              >
+                {entry.level.toUpperCase()}
+              </span>
+              <span
+                className={clsx(
+                  "eth-task-run-log__message",
+                  entry.redacted && "eth-task-run-log__message--redacted"
+                )}
+              >
+                {entry.redacted ? "[redacted]" : entry.message}
+              </span>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <EmptyState title="No log entries" />
+      )}
+    </Surface>
+  );
+}

package/src/components/TaskStatusBadge.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge } from "@echothink-ui/core";
+import type { TaskStatusBadgeProps } from "../types";
+import { labelForStatus, severityForStatus } from "./utils";
+
+export function TaskStatusBadge({
+  status,
+  label,
+  className,
+  title,
+  ...props
+}: TaskStatusBadgeProps) {
+  const statusLabel = label ?? labelForStatus(status);
+
+  return (
+    <Badge
+      {...props}
+      className={clsx("eth-task-status-badge", `eth-task-status-badge--${status}`, className)}
+      data-eth-component="TaskStatusBadge"
+      data-status={status}
+      severity={severityForStatus(status)}
+      title={title ?? statusLabel}
+    >
+      <span className="eth-task-status-badge__indicator" aria-hidden="true" />
+      <span className="eth-task-status-badge__label">{statusLabel}</span>
+    </Badge>
+  );
+}