@echothink-ui/task 0.1.0

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@echothink-ui/task",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18.3.0",
+    "react-dom": ">=18.3.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "@echothink-ui/core": "0.2.0",
+    "@echothink-ui/icons": "0.2.0",
+    "@echothink-ui/data": "0.2.0",
+    "@echothink-ui/motion": "0.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --sourcemap --clean --external react --external react-dom && tsc -p tsconfig.json --declaration --emitDeclarationOnly --noEmit false --outDir dist",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run --config ../../vitest.config.ts --passWithNoTests",
+    "lint": "eslint src"
+  }
+}

package/src/components/BackendThinkingChain.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, EmptyState, StatusDot, Tag } from "@echothink-ui/core";
+import type { BackendThinkingStep, BackendThinkingChainProps } from "../types";
+import { formatDuration, labelForStatus } from "./utils";
+
+const STREAMING_STATUSES = new Set<BackendThinkingStep["status"]>(["running", "in-progress"]);
+
+function flattenSteps(steps: BackendThinkingStep[]): BackendThinkingStep[] {
+  return steps.flatMap((step) => [step, ...flattenSteps(step.children ?? [])]);
+}
+
+function currentStreamingStepId(steps: BackendThinkingStep[]) {
+  const flattened = flattenSteps(steps);
+
+  for (let index = flattened.length - 1; index >= 0; index -= 1) {
+    if (STREAMING_STATUSES.has(flattened[index].status)) {
+      return flattened[index].id;
+    }
+  }
+
+  return flattened.at(-1)?.id;
+}
+
+function ThinkingStepItem({
+  step,
+  streamingStepId
+}: {
+  step: BackendThinkingStep;
+  streamingStepId?: string;
+}) {
+  const isStreaming = streamingStepId === step.id;
+  const hasChildren = Boolean(step.children?.length);
+  const [expanded, setExpanded] = React.useState(true);
+
+  return (
+    <li
+      className={clsx(
+        "eth-task-thinking-chain__item",
+        `eth-task-thinking-chain__item--${step.status}`,
+        step.redacted && "eth-task-thinking-chain__item--redacted"
+      )}
+    >
+      <span className="eth-task-thinking-chain__marker" aria-hidden="true" />
+      <details
+        className="eth-task-thinking-chain__step"
+        open={expanded}
+        onToggle={(event) => {
+          setExpanded(event.currentTarget.open);
+        }}
+      >
+        <summary className="eth-task-thinking-chain__step-header">
+          <span className="eth-task-thinking-chain__disclosure-icon" aria-hidden="true" />
+          <span className="eth-task-thinking-chain__step-header-inner">
+            <span className="eth-task-thinking-chain__step-heading">
+              <strong className="eth-task-thinking-chain__step-title">
+                {step.redacted ? "Restricted step" : step.title}
+              </strong>
+              {hasChildren ? (
+                <span className="eth-task-thinking-chain__branch-count">
+                  {step.children?.length} {step.children?.length === 1 ? "substep" : "substeps"}
+                </span>
+              ) : null}
+              {isStreaming ? (
+                <span className="eth-task-thinking-chain__streaming" aria-label="Streaming update">
+                  <span className="eth-task-thinking-chain__pulse" aria-hidden="true" />
+                  Streaming
+                </span>
+              ) : null}
+            </span>
+            <span className="eth-task-thinking-chain__step-meta">
+              {step.redacted ? <Badge severity="warning">Redacted</Badge> : null}
+              <StatusDot status={step.status} label={labelForStatus(step.status)} />
+              {step.toolName ? <Tag>{step.toolName}</Tag> : null}
+              {step.durationMs != null ? (
+                <span className="eth-task-thinking-chain__duration">
+                  {formatDuration(step.durationMs)}
+                </span>
+              ) : null}
+            </span>
+          </span>
+        </summary>
+        {step.redacted ? (
+          <p className="eth-task-thinking-chain__redacted">Details are hidden by policy.</p>
+        ) : step.summary ? (
+          <p className="eth-task-thinking-chain__summary">{step.summary}</p>
+        ) : null}
+        {hasChildren ? (
+          <ol className="eth-task-thinking-chain__children">
+            {step.children?.map((child) => (
+              <ThinkingStepItem key={child.id} step={child} streamingStepId={streamingStepId} />
+            ))}
+          </ol>
+        ) : null}
+      </details>
+    </li>
+  );
+}
+
+export function BackendThinkingChain({
+  steps = [],
+  streaming,
+  className,
+  ...props
+}: BackendThinkingChainProps) {
+  const streamingStepId = React.useMemo(
+    () => (streaming ? currentStreamingStepId(steps) : undefined),
+    [steps, streaming]
+  );
+
+  return (
+    <section
+      {...props}
+      className={clsx("eth-task-thinking-chain", className)}
+      aria-live={streaming ? "polite" : undefined}
+      data-eth-component="BackendThinkingChain"
+    >
+      {steps.length ? (
+        <ol className="eth-task-thinking-chain__list">
+          {steps.map((step) => (
+            <ThinkingStepItem key={step.id} step={step} streamingStepId={streamingStepId} />
+          ))}
+        </ol>
+      ) : (
+        <EmptyState title="No backend steps" />
+      )}
+    </section>
+  );
+}

package/src/components/BlockingReasonPanel.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import clsx from "clsx";
+import { ActionGroup, Badge, EmptyState, Surface } from "@echothink-ui/core";
+import type { BlockingReasonPanelProps } from "../types";
+
+export function BlockingReasonPanel({
+  blockers = [],
+  className,
+  title = "Blocking reasons",
+  description,
+  severity,
+  status,
+  ...props
+}: BlockingReasonPanelProps) {
+  const hasBlockers = blockers.length > 0;
+
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-task-blocking-reason-panel", className)}
+      title={title}
+      description={description}
+      status={status ?? (hasBlockers ? "blocked" : undefined)}
+      severity={severity ?? (hasBlockers ? "danger" : undefined)}
+      data-eth-component="BlockingReasonPanel"
+    >
+      {hasBlockers ? (
+        <ul className="eth-task-blocking-reason-panel__list" aria-label="Active blocking reasons">
+          {blockers.map((blocker) => {
+            const resolveActions = blocker.resolveAction
+              ? [
+                  {
+                    ...blocker.resolveAction,
+                    intent: blocker.resolveAction.intent ?? "tertiary"
+                  }
+                ]
+              : undefined;
+
+            return (
+              <li key={blocker.id} className="eth-task-blocking-reason-panel__item">
+                <div className="eth-task-blocking-reason-panel__content">
+                  <strong className="eth-task-blocking-reason-panel__reason">
+                    {blocker.reason}
+                  </strong>
+                  <div className="eth-task-blocking-reason-panel__meta">
+                    <Badge severity="danger">Blocked</Badge>
+                    {blocker.ownerActor ? <span>Owner: {blocker.ownerActor}</span> : null}
+                  </div>
+                </div>
+                {resolveActions ? (
+                  <div className="eth-task-blocking-reason-panel__actions">
+                    <ActionGroup actions={resolveActions} />
+                  </div>
+                ) : null}
+              </li>
+            );
+          })}
+        </ul>
+      ) : (
+        <EmptyState
+          title="No blocking reasons"
+          description="This task can continue without unblock actions."
+        />
+      )}
+    </Surface>
+  );
+}

package/src/components/DAGEdge.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import clsx from "clsx";
+import type { DAGEdgeProps } from "../types";
+import { labelForStatus, statusColor } from "./utils";
+
+function markerIdFromUseId(id: string) {
+  return `eth-dag-arrow-${id.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+}
+
+export function DAGEdge({
+  from,
+  to,
+  status,
+  label,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}: DAGEdgeProps) {
+  const reactId = React.useId();
+  const markerId = markerIdFromUseId(reactId);
+  const horizontal = Math.abs(to.x - from.x) >= Math.abs(to.y - from.y);
+  const controlA = horizontal
+    ? { x: (from.x + to.x) / 2, y: from.y }
+    : { x: from.x, y: (from.y + to.y) / 2 };
+  const controlB = horizontal
+    ? { x: (from.x + to.x) / 2, y: to.y }
+    : { x: to.x, y: (from.y + to.y) / 2 };
+  const d = `M ${from.x} ${from.y} C ${controlA.x} ${controlA.y}, ${controlB.x} ${controlB.y}, ${to.x} ${to.y}`;
+  const color = statusColor(status);
+  const midpoint = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
+  const labelText = label?.trim();
+  const labelWidth = labelText ? Math.max(56, labelText.length * 7 + 20) : 0;
+  const labelPosition = horizontal
+    ? { x: midpoint.x, y: midpoint.y - 16 }
+    : { x: midpoint.x + 44, y: midpoint.y };
+  const statusText = status ? labelForStatus(status) : "Neutral";
+  const accessibleLabel =
+    typeof ariaLabel === "string" && ariaLabel.trim()
+      ? ariaLabel
+      : labelText
+        ? `${labelText} dependency edge, ${statusText}`
+        : `Dependency edge, ${statusText}`;
+
+  return (
+    <g
+      className={clsx("eth-dag-edge", status && `eth-dag-edge--${status}`, className)}
+      role="group"
+      aria-label={accessibleLabel}
+    >
+      <defs>
+        <marker
+          id={markerId}
+          markerWidth="10"
+          markerHeight="10"
+          refX="9"
+          refY="3"
+          orient="auto"
+          markerUnits="strokeWidth"
+        >
+          <path d="M0,0 L0,6 L9,3 z" fill={color} />
+        </marker>
+      </defs>
+      <path
+        {...props}
+        d={d}
+        fill="none"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        markerEnd={`url(#${markerId})`}
+        vectorEffect="non-scaling-stroke"
+        aria-hidden="true"
+        data-eth-component="DAGEdge"
+      />
+      {labelText ? (
+        <g className="eth-dag-edge__label" aria-hidden="true">
+          <rect
+            x={labelPosition.x - labelWidth / 2}
+            y={labelPosition.y - 11}
+            width={labelWidth}
+            height={22}
+            rx={0}
+          />
+          <text
+            x={labelPosition.x}
+            y={labelPosition.y}
+            textAnchor="middle"
+            dominantBaseline="middle"
+          >
+            {labelText}
+          </text>
+        </g>
+      ) : null}
+    </g>
+  );
+}

package/src/components/DAGLegend.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import clsx from "clsx";
+import type { EthOperationalStatus } from "@echothink-ui/core";
+import type { DAGEdgeLegendItem, DAGLegendProps } from "../types";
+import { labelForStatus, statusColor } from "./utils";
+
+const defaultStatuses: EthOperationalStatus[] = [
+  "not-started",
+  "queued",
+  "running",
+  "blocked",
+  "failed",
+  "pending-approval",
+  "completed"
+];
+
+const defaultEdgeTypes: DAGEdgeLegendItem[] = [
+  { id: "dependency", label: "Dependency", variant: "dependency" },
+  { id: "critical-path", label: "Critical path", status: "running", variant: "critical" },
+  {
+    id: "approval-gate",
+    label: "Approval gate",
+    status: "pending-approval",
+    variant: "conditional"
+  }
+];
+
+function colorVariable(color: string) {
+  return { "--eth-dag-legend-color": color } as React.CSSProperties;
+}
+
+export function DAGLegend({
+  statuses = defaultStatuses,
+  edgeTypes = defaultEdgeTypes,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}: DAGLegendProps) {
+  return (
+    <div
+      {...props}
+      className={clsx("eth-dag-legend", className)}
+      data-eth-component="DAGLegend"
+      role="group"
+      aria-label={ariaLabel ?? "DAG legend"}
+    >
+      {statuses.length ? (
+        <div className="eth-dag-legend__group">
+          <span className="eth-dag-legend__heading">Node status</span>
+          <ul className="eth-dag-legend__list" aria-label="DAG node status legend">
+            {statuses.map((status) => (
+              <li key={status} className="eth-dag-legend__item">
+                <span
+                  className={clsx("eth-dag-legend__swatch", `eth-dag-legend__swatch--${status}`)}
+                  style={colorVariable(statusColor(status))}
+                  aria-hidden="true"
+                />
+                <span className="eth-dag-legend__label">{labelForStatus(status)}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+      {edgeTypes.length ? (
+        <div className="eth-dag-legend__group eth-dag-legend__group--edges">
+          <span className="eth-dag-legend__heading">Edge type</span>
+          <ul className="eth-dag-legend__list" aria-label="DAG edge type legend">
+            {edgeTypes.map((edgeType) => (
+              <li key={edgeType.id} className="eth-dag-legend__item">
+                <span
+                  className={clsx(
+                    "eth-dag-legend__edge",
+                    `eth-dag-legend__edge--${edgeType.variant ?? "dependency"}`
+                  )}
+                  style={colorVariable(statusColor(edgeType.status))}
+                  aria-hidden="true"
+                />
+                <span className="eth-dag-legend__label">{edgeType.label}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/DAGNode.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import clsx from "clsx";
+import type { DAGNodeProps } from "../types";
+import { labelForStatus, statusColor } from "./utils";
+
+const nodeWidth = 156;
+const nodeHeight = 60;
+
+function truncateLabel(label: string) {
+  return label.length > 20 ? `${label.slice(0, 19)}...` : label;
+}
+
+export function DAGNode({ node, selected, onSelect, className, ...props }: DAGNodeProps) {
+  const statusLabel = labelForStatus(node.status);
+  const x = node.x - nodeWidth / 2;
+  const y = node.y - nodeHeight / 2;
+  const handleSelect = () => onSelect?.(node);
+  const interactive = Boolean(onSelect);
+
+  return (
+    <g
+      {...props}
+      className={clsx(
+        "eth-dag-node",
+        `eth-dag-node--${node.status}`,
+        interactive && "eth-dag-node--interactive",
+        selected && "eth-dag-node--selected",
+        className
+      )}
+      role={interactive ? "button" : "group"}
+      tabIndex={interactive ? 0 : undefined}
+      aria-label={`${node.label}, ${statusLabel}`}
+      aria-pressed={interactive ? Boolean(selected) : undefined}
+      onClick={interactive ? handleSelect : undefined}
+      onKeyDown={
+        interactive
+          ? (event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                handleSelect();
+              }
+            }
+          : undefined
+      }
+      data-eth-component="DAGNode"
+    >
+      <title>{`${node.label} - ${statusLabel}`}</title>
+      <rect
+        className="eth-dag-node__selection"
+        x={x - 3}
+        y={y - 3}
+        width={nodeWidth + 6}
+        height={nodeHeight + 6}
+        rx={0}
+      />
+      <rect
+        className="eth-dag-node__body"
+        x={x}
+        y={y}
+        width={nodeWidth}
+        height={nodeHeight}
+        rx={0}
+        fill="var(--eth-color-layer-01)"
+      />
+      <rect
+        className="eth-dag-node__status-strip"
+        x={x}
+        y={y}
+        width={4}
+        height={nodeHeight}
+        fill={statusColor(node.status)}
+      />
+      <circle className="eth-dag-node__port" cx={x} cy={node.y} r={3} />
+      <circle className="eth-dag-node__port" cx={x + nodeWidth} cy={node.y} r={3} />
+      <circle
+        className="eth-dag-node__status-dot"
+        cx={x + 18}
+        cy={y + 18}
+        r={3.5}
+        fill={statusColor(node.status)}
+      />
+      <text
+        x={x + 28}
+        y={y + 22}
+        textAnchor="start"
+        className="eth-dag-node__label"
+      >
+        {truncateLabel(node.label)}
+      </text>
+      <text
+        x={x + 28}
+        y={y + 44}
+        textAnchor="start"
+        className="eth-dag-node__status"
+      >
+        {statusLabel}
+      </text>
+    </g>
+  );
+}
+
+export const DAG_NODE_WIDTH = nodeWidth;
+export const DAG_NODE_HEIGHT = nodeHeight;

package/src/components/DecisionRequiredPanel.tsx

@@ -0,0 +1,166 @@
+import * as React from "react";
+import clsx from "clsx";
+import { InlineNotification, Surface, Tag, type EthAction } from "@echothink-ui/core";
+import type { DecisionOption, DecisionRequiredPanelProps } from "../types";
+import { severityForRisk } from "./utils";
+
+interface ResolvedOption extends DecisionOption {
+  action?: EthAction;
+}
+
+function optionsFromActions(actions?: EthAction[]): ResolvedOption[] {
+  return (
+    actions?.map((action) => ({
+      id: action.id,
+      label: action.label,
+      intent: action.intent,
+      action
+    })) ?? []
+  );
+}
+
+function riskTitle(riskLevel: DecisionRequiredPanelProps["riskLevel"]) {
+  if (!riskLevel) return "Decision required";
+  return `${riskLevel.charAt(0).toUpperCase()}${riskLevel.slice(1)} risk decision`;
+}
+
+function optionIntent(option: ResolvedOption) {
+  return option.intent ?? "secondary";
+}
+
+export function DecisionRequiredPanel({
+  title,
+  summary,
+  riskLevel,
+  evidence = [],
+  options,
+  onDecide,
+  decidedOptionId,
+  className,
+  description,
+  actions,
+  items,
+  severity,
+  status,
+  ...props
+}: DecisionRequiredPanelProps) {
+  const titleId = React.useId();
+  const evidenceId = React.useId();
+  const optionsId = React.useId();
+  const resolvedOptions: ResolvedOption[] =
+    options?.map((option) => ({ ...option })) ??
+    (actions?.length
+      ? optionsFromActions(actions)
+      : items?.length
+        ? items.map((item) => ({
+            id: item.id,
+            label: String(item.label),
+            description: item.description ? String(item.description) : undefined,
+            intent: item.status === "active" ? "primary" : "secondary"
+          }))
+        : []);
+  const riskSeverity = riskLevel ? severityForRisk(riskLevel) : (severity ?? "warning");
+
+  return (
+    <Surface
+      {...props}
+      role="region"
+      aria-labelledby={titleId}
+      className={clsx(
+        "eth-task-decision-panel",
+        riskLevel && `eth-task-decision-panel--${riskLevel}`,
+        className
+      )}
+      title={<span id={titleId}>{title}</span>}
+      severity={riskSeverity === "neutral" ? severity : riskSeverity}
+      status={status ?? "approval-required"}
+      data-eth-component="DecisionRequiredPanel"
+    >
+      <InlineNotification severity={riskSeverity} title={riskTitle(riskLevel)}>
+        {description}
+      </InlineNotification>
+      {summary ? (
+        <section className="eth-task-decision-panel__summary" aria-label="Decision context">
+          <div className="eth-task-decision-panel__section-label">Decision context</div>
+          <div className="eth-task-decision-panel__summary-body">{summary}</div>
+        </section>
+      ) : null}
+
+      {evidence.length ? (
+        <section className="eth-task-decision-panel__evidence" aria-labelledby={evidenceId}>
+          <div className="eth-task-decision-panel__section-header">
+            <h3 id={evidenceId}>Evidence</h3>
+            <span>
+              {evidence.length} source{evidence.length === 1 ? "" : "s"}
+            </span>
+          </div>
+          <ul>
+            {evidence.map((item) => (
+              <li key={item.id}>
+                <div className="eth-task-decision-panel__evidence-label">
+                  {item.href ? (
+                    <a className="eth-task-decision-panel__evidence-link" href={item.href}>
+                      {item.label}
+                    </a>
+                  ) : (
+                    <strong>{item.label}</strong>
+                  )}
+                </div>
+                {item.preview ? (
+                  <div className="eth-task-decision-panel__evidence-preview">{item.preview}</div>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+
+      {resolvedOptions.length ? (
+        <section
+          className="eth-task-decision-panel__options"
+          role="group"
+          aria-labelledby={optionsId}
+        >
+          <div className="eth-task-decision-panel__section-header">
+            <h3 id={optionsId}>Decision options</h3>
+            <span>{resolvedOptions.length} available</span>
+          </div>
+          {resolvedOptions.map((option) => (
+            <button
+              key={option.id}
+              type="button"
+              className={clsx(
+                "eth-task-decision-panel__option",
+                `eth-task-decision-panel__option--${optionIntent(option)}`
+              )}
+              disabled={option.action?.disabled}
+              aria-pressed={decidedOptionId === option.id}
+              onClick={() => {
+                option.action?.onSelect?.();
+                onDecide?.(option.id);
+              }}
+            >
+              <span className="eth-task-decision-panel__option-main">
+                <span className="eth-task-decision-panel__option-label">{option.label}</span>
+                {option.description ? (
+                  <span className="eth-task-decision-panel__option-description">
+                    {option.description}
+                  </span>
+                ) : null}
+              </span>
+              <span className="eth-task-decision-panel__option-state">
+                {decidedOptionId === option.id ? "Selected" : "Choose"}
+              </span>
+            </button>
+          ))}
+        </section>
+      ) : null}
+
+      {decidedOptionId ? (
+        <div className="eth-task-decision-panel__decision">
+          <Tag>Decided: {decidedOptionId}</Tag>
+        </div>
+      ) : null}
+    </Surface>
+  );
+}