@echothink-ui/developer 0.1.0

package/src/components/TraceTimeline.tsx

@@ -0,0 +1,207 @@
+import * as React from "react";
+import { Badge, StatusDot, statusLabel } from "@echothink-ui/core";
+import type { TraceSpan, TraceTimelineProps } from "./types";
+
+interface TimelineItem {
+  span: TraceSpan;
+  start: number;
+  end: number;
+  depth: number;
+}
+
+export function TraceTimeline({
+  spans,
+  className,
+  role = "region",
+  "aria-label": ariaLabel = "Trace timeline",
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: TraceTimelineProps) {
+  const timeline = React.useMemo(() => buildTimeline(spans), [spans]);
+  const issueCount = spans.filter((span) => isIssueStatus(getSpanStatus(span))).length;
+  const activeCount = spans.filter((span) => isActiveStatus(getSpanStatus(span))).length;
+  const services = new Set(spans.flatMap((span) => (span.service ? [span.service] : [])));
+  const serviceCount = services.size;
+  const describedServiceCount = spans.length ? serviceCount || 1 : 0;
+  const traceDescription = spans.length
+    ? `${spans.length} spans across ${describedServiceCount} service${
+        describedServiceCount === 1 ? "" : "s"
+      }.`
+    : "No spans have been recorded for this trace window.";
+  const healthLabel = issueCount
+    ? `${issueCount} ${issueCount === 1 ? "issue" : "issues"}`
+    : activeCount
+      ? `${activeCount} active`
+      : "All complete";
+  const healthSeverity = issueCount ? "danger" : activeCount ? "info" : "success";
+  const rootClassName = ["eth-dev-trace-timeline", className].filter(Boolean).join(" ");
+
+  return (
+    <section
+      {...props}
+      aria-label={ariaLabelledBy ? undefined : ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      className={rootClassName}
+      data-eth-component="TraceTimeline"
+      role={role}
+    >
+      <header className="eth-dev-trace-timeline__header">
+        <div className="eth-dev-trace-timeline__heading">
+          <p className="eth-dev-trace-timeline__eyebrow">Distributed trace</p>
+          <h3>Trace timeline</h3>
+          <p>{traceDescription}</p>
+        </div>
+        <Badge severity={healthSeverity}>{healthLabel}</Badge>
+      </header>
+
+      <dl className="eth-dev-trace-timeline__summary" aria-label="Trace summary">
+        <div>
+          <dt>Spans</dt>
+          <dd>{spans.length}</dd>
+        </div>
+        <div>
+          <dt>Window</dt>
+          <dd>{formatDuration(timeline.total)}</dd>
+        </div>
+        <div>
+          <dt>Issues</dt>
+          <dd>
+            {issueCount ? `${issueCount} ${issueCount === 1 ? "issue" : "issues"}` : "0"}
+          </dd>
+        </div>
+        <div>
+          <dt>Services</dt>
+          <dd>{serviceCount}</dd>
+        </div>
+      </dl>
+
+      {spans.length ? (
+        <div className="eth-dev-trace-timeline__viewport">
+          <div className="eth-dev-trace-timeline__axis" aria-hidden="true">
+            <span>Span</span>
+            <div className="eth-dev-trace-timeline__axis-scale">
+              <span>0 ms</span>
+              <span>{formatDuration(timeline.total / 2)}</span>
+              <span>{formatDuration(timeline.total)}</span>
+            </div>
+          </div>
+
+          <div className="eth-dev-trace-timeline__rows" role="list" aria-label="Trace spans">
+            {timeline.items.map(({ span, start, end, depth }) => {
+              const status = getSpanStatus(span);
+              const startOffset = start - timeline.min;
+              const duration = end - start;
+              const left = (startOffset / timeline.total) * 100;
+              const width = Math.max(1, (duration / timeline.total) * 100);
+              const spanLabel = formatSpanLabel(span, status, startOffset, duration);
+
+              return (
+                <article
+                  key={span.id}
+                  className={`eth-dev-trace-timeline__row eth-dev-trace-timeline__row--${status}`}
+                  role="listitem"
+                  style={
+                    {
+                      "--eth-dev-trace-indent": `${depth}rem`,
+                      "--eth-dev-trace-left": `${left}%`,
+                      "--eth-dev-trace-width": `${width}%`
+                    } as React.CSSProperties
+                  }
+                >
+                  <div className="eth-dev-trace-timeline__label">
+                    <div className="eth-dev-trace-timeline__span-title">
+                      <StatusDot status={status} label={statusLabel(status)} />
+                      <strong>{span.name}</strong>
+                    </div>
+                    <div className="eth-dev-trace-timeline__span-meta">
+                      {span.service ? <span>{span.service}</span> : null}
+                      {span.parentId ? <span>Parent {span.parentId}</span> : null}
+                      <span>{formatDuration(duration)}</span>
+                    </div>
+                  </div>
+                  <div className="eth-dev-trace-timeline__track" role="img" aria-label={spanLabel}>
+                    <span
+                      aria-hidden="true"
+                      className={`eth-dev-trace-timeline__bar eth-dev-trace-timeline__bar--${status}`}
+                      title={spanLabel}
+                    />
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+        </div>
+      ) : (
+        <div className="eth-dev-trace-timeline__empty" role="status">
+          <h4>No spans recorded</h4>
+          <p>Trace spans will appear here when instrumentation emits timing data.</p>
+        </div>
+      )}
+    </section>
+  );
+}
+
+function buildTimeline(spans: TraceSpan[]) {
+  if (!spans.length) return { items: [] as TimelineItem[], min: 0, total: 0 };
+
+  const spansById = new Map(spans.map((span) => [span.id, span]));
+  const depthById = new Map<string, number>();
+  const depthFor = (span: TraceSpan, seen = new Set<string>()): number => {
+    if (depthById.has(span.id)) return depthById.get(span.id) ?? 0;
+    if (!span.parentId || seen.has(span.id)) {
+      depthById.set(span.id, 0);
+      return 0;
+    }
+
+    const parent = spansById.get(span.parentId);
+    const depth = parent ? depthFor(parent, new Set(seen).add(span.id)) + 1 : 0;
+    depthById.set(span.id, depth);
+    return depth;
+  };
+
+  const items = spans
+    .map((span, index) => {
+      const start = Number.isFinite(span.startMs) ? span.startMs : index * 10;
+      const duration = Number.isFinite(span.durationMs) ? Math.max(span.durationMs, 1) : 1;
+      return { span, start, end: start + duration, depth: depthFor(span) };
+    })
+    .sort((a, b) => a.start - b.start || a.span.name.localeCompare(b.span.name));
+
+  const min = Math.min(...items.map((item) => item.start));
+  const max = Math.max(...items.map((item) => item.end));
+  return { items, min, total: Math.max(max - min, 1) };
+}
+
+function getSpanStatus(span: TraceSpan): NonNullable<TraceSpan["status"]> {
+  return span.status ?? "running";
+}
+
+function isActiveStatus(status: NonNullable<TraceSpan["status"]>) {
+  return status === "running" || status === "in-progress";
+}
+
+function isIssueStatus(status: NonNullable<TraceSpan["status"]>) {
+  return (
+    status === "failed" || status === "blocked" || status === "warning" || status === "stale"
+  );
+}
+
+function formatSpanLabel(
+  span: TraceSpan,
+  status: NonNullable<TraceSpan["status"]>,
+  startOffset: number,
+  duration: number
+) {
+  return `${span.name}${span.service ? ` in ${span.service}` : ""}, ${statusLabel(
+    status
+  )}, starts at ${formatDuration(startOffset)}, duration ${formatDuration(duration)}`;
+}
+
+function formatDuration(ms: number) {
+  if (!Number.isFinite(ms) || ms <= 0) return "0 ms";
+  if (ms < 1000) return `${Math.round(ms)} ms`;
+
+  const seconds = ms / 1000;
+  const precision = seconds < 10 ? 2 : 1;
+  return `${seconds.toFixed(precision).replace(/\.?0+$/, "")} s`;
+}

package/src/components/WebhookEventViewer.test.tsx

@@ -0,0 +1,57 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WebhookEventViewer } from "./WebhookEventViewer";
+
+const events = [
+  {
+    id: "evt_1001",
+    url: "https://hooks.example.com/tasks",
+    status: "delivered",
+    retries: 0,
+    deliveredAt: "10:42",
+    payload: { event: "task.created" }
+  },
+  {
+    id: "evt_1002",
+    url: "https://hooks.example.com/approvals",
+    status: "failed",
+    retries: 3,
+    payload: { event: "approval.granted" }
+  }
+];
+
+describe("WebhookEventViewer", () => {
+  it("renders webhook delivery status, summary metrics, and retry action", () => {
+    const onRetry = vi.fn();
+
+    render(<WebhookEventViewer events={events} onRetry={onRetry} />);
+
+    const viewer = screen.getByRole("region", { name: "Webhook deliveries" });
+
+    expect(within(viewer).getByText("Webhook deliveries")).toBeTruthy();
+    expect(within(viewer).getByText("2 events")).toBeTruthy();
+    expect(within(viewer).getByText("1 failed")).toBeTruthy();
+    expect(within(viewer).getByText("3 retries")).toBeTruthy();
+    expect(within(viewer).getByText("task.created")).toBeTruthy();
+    expect(within(viewer).getByText("approval.granted")).toBeTruthy();
+    expect(within(viewer).getByText("Not delivered")).toBeTruthy();
+
+    const deliveredBadge = within(viewer)
+      .getAllByText("Delivered")
+      .find((node) => node.closest(".eth-badge"))
+      ?.closest(".eth-badge");
+    const failedBadge = within(viewer)
+      .getAllByText("Failed")
+      .find((node) => node.closest(".eth-badge"))
+      ?.closest(".eth-badge");
+
+    expect(deliveredBadge?.className).toContain("eth-badge--success");
+    expect(failedBadge?.className).toContain("eth-badge--danger");
+
+    const retryButton = within(viewer).getByRole("button", { name: "Retry" });
+
+    fireEvent.click(retryButton);
+
+    expect(onRetry).toHaveBeenCalledWith("evt_1002");
+  });
+});

package/src/components/WebhookEventViewer.tsx

@@ -0,0 +1,184 @@
+import * as React from "react";
+import { Badge, EmptyState, type EthSeverity } from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { WebhookEvent, WebhookEventViewerProps } from "./types";
+
+export function WebhookEventViewer({
+  events,
+  onRetry,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}: WebhookEventViewerProps) {
+  const failedCount = events.filter(
+    (event) => webhookStatusTone(event.status) === "danger"
+  ).length;
+  const retryCount = events.reduce((total, event) => total + event.retries, 0);
+  const columns: DataColumn<WebhookEvent>[] = [
+    {
+      key: "id",
+      header: "Event",
+      width: "16rem",
+      render: (row) => (
+        <span className="eth-dev-webhook-event-viewer__event">
+          <code title={row.id}>{row.id}</code>
+          <span>{payloadEventLabel(row.payload)}</span>
+        </span>
+      )
+    },
+    {
+      key: "url",
+      header: "Endpoint",
+      render: (row) => (
+        <code className="eth-dev-webhook-event-viewer__url" title={row.url}>
+          {row.url}
+        </code>
+      )
+    },
+    {
+      key: "status",
+      header: "Status",
+      width: "9rem",
+      render: (row) => (
+        <Badge severity={webhookStatusTone(row.status)}>
+          {formatWebhookStatus(row.status)}
+        </Badge>
+      )
+    },
+    {
+      key: "retries",
+      header: "Retries",
+      align: "end",
+      width: "6.5rem",
+      render: (row) => (
+        <span className="eth-dev-webhook-event-viewer__count">{row.retries}</span>
+      )
+    },
+    {
+      key: "deliveredAt",
+      header: "Delivered",
+      width: "10rem",
+      render: (row) =>
+        row.deliveredAt ? (
+          <time className="eth-dev-webhook-event-viewer__time">{row.deliveredAt}</time>
+        ) : (
+          <span className="eth-dev-webhook-event-viewer__missing">Not delivered</span>
+        )
+    }
+  ];
+
+  return (
+    <section
+      {...props}
+      aria-label={ariaLabel ?? "Webhook deliveries"}
+      className={`eth-dev-webhook-event-viewer ${className ?? ""}`.trim()}
+      data-eth-component="WebhookEventViewer"
+    >
+      <header className="eth-dev-webhook-event-viewer__header">
+        <div className="eth-dev-webhook-event-viewer__heading">
+          <p>Webhook events</p>
+          <h3>Webhook deliveries</h3>
+        </div>
+        <dl
+          className="eth-dev-webhook-event-viewer__summary"
+          aria-label="Webhook delivery summary"
+        >
+          <div>
+            <dt>Events</dt>
+            <dd>{pluralize(events.length, "event")}</dd>
+          </div>
+          <div>
+            <dt>Failed</dt>
+            <dd>{pluralize(failedCount, "failed", "failed")}</dd>
+          </div>
+          <div>
+            <dt>Retries</dt>
+            <dd>{pluralize(retryCount, "retry", "retries")}</dd>
+          </div>
+        </dl>
+      </header>
+      <DataTable
+        rows={events}
+        columns={columns}
+        rowKey="id"
+        density="compact"
+        className="eth-dev-webhook-event-viewer__table"
+        aria-label="Webhook delivery events"
+        rowActions={
+          onRetry
+            ? (row) =>
+                isRetryableWebhookStatus(row.status)
+                  ? [
+                      {
+                        id: `retry-${row.id}`,
+                        label: "Retry",
+                        onSelect: () => onRetry(row.id)
+                      }
+                    ]
+                  : []
+            : undefined
+        }
+        emptyState={
+          <EmptyState
+            title="No webhook events"
+            description="Delivery attempts and retry outcomes will appear here when webhooks fire."
+          />
+        }
+      />
+    </section>
+  );
+}
+
+function webhookStatusTone(status: string): EthSeverity {
+  const token = normalizeWebhookStatus(status);
+
+  if (["delivered", "success", "succeeded", "completed", "ok"].includes(token)) {
+    return "success";
+  }
+  if (isRetryableWebhookStatus(token)) return "danger";
+  if (["retrying", "queued", "pending", "running", "in-progress"].includes(token)) {
+    return "info";
+  }
+  if (["warning", "throttled", "rate-limited"].includes(token)) {
+    return "warning";
+  }
+  return "neutral";
+}
+
+function isRetryableWebhookStatus(status: string) {
+  return ["failed", "error", "timeout", "timed-out", "undelivered"].includes(
+    normalizeWebhookStatus(status)
+  );
+}
+
+function normalizeWebhookStatus(status: string) {
+  return status.trim().toLowerCase().replace(/_/g, "-");
+}
+
+function formatWebhookStatus(status: string) {
+  const normalized = normalizeWebhookStatus(status);
+
+  if (!normalized) return "Unknown";
+  if (normalized === "ok") return "OK";
+
+  return normalized
+    .split("-")
+    .filter(Boolean)
+    .map((part) => part[0].toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function payloadEventLabel(payload: unknown) {
+  if (payload && typeof payload === "object") {
+    const record = payload as Record<string, unknown>;
+    const eventName = record.event ?? record.type ?? record.name;
+
+    if (typeof eventName === "string" && eventName.trim()) return eventName;
+  }
+
+  return "Webhook event";
+}
+
+function pluralize(count: number, singular: string, plural = `${singular}s`) {
+  return `${count} ${count === 1 ? singular : plural}`;
+}

package/src/components/YAMLViewer.tsx

@@ -0,0 +1,207 @@
+import * as React from "react";
+import { Checkmark, Copy } from "@carbon/icons-react";
+import { IconButton } from "@echothink-ui/core";
+import type { YAMLViewerProps } from "./types";
+import { CodeEditor } from "./CodeEditor";
+import { splitLines } from "./devUtils";
+
+function countYamlEntries(lines: string[]) {
+  return lines.filter(
+    (line) => /^\s*(?:-\s+)?[\w.-]+\s*:/.test(line) || /^\s*-\s+\S/.test(line)
+  ).length;
+}
+
+function getScalarClass(value: string) {
+  if (/^["'].*["']$/.test(value)) return "string";
+  if (/^(?:true|false)$/i.test(value)) return "boolean";
+  if (/^(?:null|~)$/i.test(value)) return "null";
+  if (/^-?\d+(?:\.\d+)?$/.test(value)) return "number";
+  return "plain";
+}
+
+function renderScalar(value: string) {
+  if (!value) return null;
+
+  const commentIndex = value.search(/(^|\s)#/);
+  const scalar = commentIndex >= 0 ? value.slice(0, commentIndex) : value;
+  const comment = commentIndex >= 0 ? value.slice(commentIndex) : "";
+  const scalarClass = getScalarClass(scalar.trim());
+
+  return (
+    <>
+      {scalar ? (
+        <span
+          className={`eth-dev-yaml-viewer__token eth-dev-yaml-viewer__token--${scalarClass}`}
+        >
+          {scalar}
+        </span>
+      ) : null}
+      {comment ? (
+        <span className="eth-dev-yaml-viewer__token eth-dev-yaml-viewer__token--comment">
+          {comment}
+        </span>
+      ) : null}
+    </>
+  );
+}
+
+function renderYamlLine(line: string) {
+  if (!line.trim()) return line;
+
+  if (/^\s*#/.test(line)) {
+    return (
+      <span className="eth-dev-yaml-viewer__token eth-dev-yaml-viewer__token--comment">
+        {line}
+      </span>
+    );
+  }
+
+  const keyMatch = line.match(/^(\s*)(-\s+)?([\w.-]+)(\s*:)(.*)$/);
+  if (keyMatch) {
+    const [, indent, listMarker = "", key, separator, rest] = keyMatch;
+    return (
+      <>
+        {indent}
+        {listMarker ? (
+          <span className="eth-dev-yaml-viewer__token eth-dev-yaml-viewer__token--marker">
+            {listMarker}
+          </span>
+        ) : null}
+        <span className="eth-dev-yaml-viewer__token eth-dev-yaml-viewer__token--key">
+          {key}
+        </span>
+        <span className="eth-dev-yaml-viewer__token eth-dev-yaml-viewer__token--punctuation">
+          {separator}
+        </span>
+        {renderScalar(rest)}
+      </>
+    );
+  }
+
+  const listMatch = line.match(/^(\s*)(-\s+)(.*)$/);
+  if (listMatch) {
+    const [, indent, marker, rest] = listMatch;
+    return (
+      <>
+        {indent}
+        <span className="eth-dev-yaml-viewer__token eth-dev-yaml-viewer__token--marker">
+          {marker}
+        </span>
+        {renderScalar(rest)}
+      </>
+    );
+  }
+
+  return renderScalar(line) ?? line;
+}
+
+export function YAMLViewer({
+  value,
+  editable = false,
+  onChange,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}: YAMLViewerProps) {
+  const [copied, setCopied] = React.useState(false);
+  const resetTimer = React.useRef<number | undefined>(undefined);
+  const lines = splitLines(value);
+  const lineCount = lines.length;
+  const entryCount = countYamlEntries(lines);
+  const modeLabel = editable ? "Editable" : "Read-only";
+  const viewerLabel = ariaLabel ?? (editable ? "YAML editor" : "YAML document");
+
+  React.useEffect(() => {
+    return () => {
+      if (resetTimer.current !== undefined && typeof window !== "undefined") {
+        window.clearTimeout(resetTimer.current);
+      }
+    };
+  }, []);
+
+  const copy = React.useCallback(() => {
+    if (typeof navigator === "undefined" || !navigator.clipboard) return;
+
+    void navigator.clipboard
+      .writeText(value)
+      .then(() => {
+        if (typeof window !== "undefined") {
+          setCopied(true);
+          if (resetTimer.current !== undefined) {
+            window.clearTimeout(resetTimer.current);
+          }
+          resetTimer.current = window.setTimeout(() => setCopied(false), 1200);
+        }
+      })
+      .catch(() => {
+        setCopied(false);
+      });
+  }, [value]);
+
+  return (
+    <section
+      {...props}
+      aria-label={viewerLabel}
+      className={`eth-dev-yaml-viewer ${className ?? ""}`.trim()}
+      data-eth-component="YAMLViewer"
+      data-editable={editable ? "true" : undefined}
+    >
+      <header className="eth-dev-yaml-viewer__header">
+        <div className="eth-dev-yaml-viewer__heading">
+          <span className="eth-dev-yaml-viewer__eyebrow">YAML</span>
+          <span className="eth-dev-yaml-viewer__title">
+            {editable ? "YAML editor" : "YAML document"}
+          </span>
+        </div>
+        <div
+          className="eth-dev-yaml-viewer__meta"
+          role="group"
+          aria-label="YAML document metadata"
+        >
+          <span className="eth-dev-yaml-viewer__badge">{modeLabel}</span>
+          <span className="eth-dev-yaml-viewer__badge">
+            {lineCount} {lineCount === 1 ? "line" : "lines"}
+          </span>
+          <span className="eth-dev-yaml-viewer__badge">
+            {entryCount} {entryCount === 1 ? "entry" : "entries"}
+          </span>
+          <IconButton
+            className="eth-dev-yaml-viewer__copy-button"
+            label={copied ? "Copied YAML" : "Copy YAML"}
+            intent="ghost"
+            density="compact"
+            icon={copied ? <Checkmark size={16} /> : <Copy size={16} />}
+            onClick={copy}
+          />
+          <span className="eth-dev-yaml-viewer__copy-status" aria-live="polite">
+            {copied ? "YAML copied" : ""}
+          </span>
+        </div>
+      </header>
+      {editable ? (
+        <CodeEditor
+          value={value}
+          onChange={onChange}
+          language="yaml"
+          className="eth-dev-yaml-viewer__editor"
+          aria-label={viewerLabel}
+        />
+      ) : (
+        <pre className="eth-dev-yaml-viewer__pre" aria-label={viewerLabel} tabIndex={0}>
+          <code className="eth-dev-yaml-viewer__code">
+            {lines.map((line, index) => (
+              <span key={index} className="eth-dev-yaml-viewer__line">
+                <span className="eth-dev-yaml-viewer__gutter" aria-hidden="true">
+                  {index + 1}
+                </span>
+                <span className="eth-dev-yaml-viewer__line-code">
+                  {renderYamlLine(line)}
+                </span>
+              </span>
+            ))}
+          </code>
+        </pre>
+      )}
+    </section>
+  );
+}