@echothink-ui/agent 0.1.0

package/src/components/AgentThinkingChain.tsx

@@ -0,0 +1,151 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, EmptyState, StatusDot, Surface, statusLabel } from "@echothink-ui/core";
+import type { SurfaceComponentProps } from "@echothink-ui/core";
+import type { AgentStep } from "../types";
+import { formatDuration } from "./utils";
+
+export interface AgentThinkingChainProps extends Omit<SurfaceComponentProps, "children"> {
+  steps: AgentStep[];
+  streaming?: boolean;
+  redactionPolicy?: string;
+}
+
+export function AgentThinkingChain({
+  steps,
+  streaming,
+  redactionPolicy,
+  title = "Thinking chain",
+  className,
+  ...props
+}: AgentThinkingChainProps) {
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-agent-thinking-chain", className)}
+      data-eth-component="AgentThinkingChain"
+      title={title}
+      subtitle={redactionPolicy ? `Redaction policy: ${redactionPolicy}` : undefined}
+    >
+      {steps.length ? (
+        <ol className="eth-agent-thinking-chain__steps" aria-live={streaming ? "polite" : "off"}>
+          {steps.map((step) => (
+            <ThinkingStep key={step.id} step={step} depth={0} />
+          ))}
+        </ol>
+      ) : (
+        <EmptyState
+          title="No thinking steps"
+          description="Steps will appear as the agent records observations, actions, or blockers."
+        />
+      )}
+    </Surface>
+  );
+}
+
+function ThinkingStep({ step, depth }: { step: AgentStep; depth: number }) {
+  const hasChildren = Boolean(step.children?.length);
+  const stepClassName = clsx(
+    "eth-agent-thinking-chain__step",
+    `eth-agent-thinking-chain__step--${step.status}`,
+    hasChildren && "eth-agent-thinking-chain__step--branch"
+  );
+
+  return (
+    <li
+      className={clsx(
+        "eth-agent-thinking-chain__item",
+        `eth-agent-thinking-chain__item--${step.status}`
+      )}
+      style={
+        {
+          "--eth-agent-thinking-chain-depth-offset": `${depth * 1.5}rem`
+        } as React.CSSProperties
+      }
+    >
+      <span className="eth-agent-thinking-chain__marker" aria-hidden="true" />
+      <div className="eth-agent-thinking-chain__item-body">
+        <article className={stepClassName}>
+          <StepHeader step={step} hasChildren={hasChildren} />
+          <StepDetails step={step} />
+        </article>
+        {hasChildren ? (
+          <ol className="eth-agent-thinking-chain__children">
+            {step.children?.map((child) => (
+              <ThinkingStep key={child.id} step={child} depth={depth + 1} />
+            ))}
+          </ol>
+        ) : null}
+      </div>
+    </li>
+  );
+}
+
+function StepHeader({ step, hasChildren }: { step: AgentStep; hasChildren?: boolean }) {
+  return (
+    <header className="eth-agent-thinking-chain__step-header">
+      <span className="eth-agent-thinking-chain__step-heading">
+        <strong className="eth-agent-thinking-chain__step-title">{step.title}</strong>
+        {hasChildren ? (
+          <span className="eth-agent-thinking-chain__branch-count">
+            {step.children?.length} {step.children?.length === 1 ? "substep" : "substeps"}
+          </span>
+        ) : null}
+      </span>
+      <span className="eth-agent-thinking-chain__step-meta">
+        {step.redacted ? <Badge severity="warning">Redacted</Badge> : null}
+        <StatusDot status={step.status} label={statusLabel(step.status)} />
+        {step.durationMs != null ? (
+          <span className="eth-agent-thinking-chain__duration">
+            {formatDuration(step.durationMs)}
+          </span>
+        ) : null}
+      </span>
+    </header>
+  );
+}
+
+function StepDetails({ step }: { step: AgentStep }) {
+  const hasDetails = Boolean(step.observation || step.action || step.blocker);
+
+  if (step.redacted) {
+    return <p className="eth-agent-thinking-chain__redacted">Details are hidden by policy.</p>;
+  }
+
+  if (!hasDetails) {
+    return <p className="eth-agent-thinking-chain__empty-detail">No public details recorded.</p>;
+  }
+
+  return (
+    <dl className="eth-agent-thinking-chain__fields">
+      {step.observation ? <StepField label="Observation" value={step.observation} /> : null}
+      {step.action ? <StepField label="Action" value={step.action} monospaced /> : null}
+      {step.blocker ? (
+        <StepField
+          label="Blocker"
+          value={step.blocker}
+          className="eth-agent-thinking-chain__field--blocker"
+        />
+      ) : null}
+    </dl>
+  );
+}
+
+function StepField({
+  label,
+  value,
+  monospaced,
+  className
+}: {
+  label: string;
+  value: string;
+  monospaced?: boolean;
+  className?: string;
+}) {
+  return (
+    <div className={clsx("eth-agent-thinking-chain__field", className)}>
+      <dt>{label}</dt>
+      <dd className={clsx(monospaced && "eth-agent-thinking-chain__field-value--mono")}>{value}</dd>
+    </div>
+  );
+}

package/src/components/AgentThinkingPanel.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Surface } from "@echothink-ui/core";
+import type { SurfaceComponentProps } from "@echothink-ui/core";
+import { formatDateTime } from "./utils";
+
+export interface AgentThinkingPanelProps extends Omit<SurfaceComponentProps, "children"> {
+  currentStep?: string;
+  summary?: string;
+  progress?: number;
+  lastUpdatedAt?: string;
+}
+
+export function AgentThinkingPanel({
+  currentStep,
+  summary,
+  progress,
+  lastUpdatedAt,
+  title = "Agent thinking",
+  subtitle,
+  metadata = [],
+  className,
+  ...props
+}: AgentThinkingPanelProps) {
+  const normalizedProgress =
+    typeof progress === "number" && Number.isFinite(progress)
+      ? Math.max(0, Math.min(100, Math.round(progress)))
+      : undefined;
+  const panelMetadata = lastUpdatedAt
+    ? [{ label: "Last updated", value: formatDateTime(lastUpdatedAt) }, ...metadata]
+    : metadata;
+
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-agent-thinking-panel", className)}
+      data-eth-component="AgentThinkingPanel"
+      title={title}
+      subtitle={currentStep ?? subtitle}
+      metadata={panelMetadata.length ? panelMetadata : undefined}
+    >
+      {summary ? <p className="eth-agent-thinking-panel__summary">{summary}</p> : null}
+      {normalizedProgress != null ? (
+        <div className="eth-agent-thinking-panel__progress">
+          <div className="eth-agent-thinking-panel__progress-label">
+            <span>Progress</span>
+            <strong>{normalizedProgress}%</strong>
+          </div>
+          <progress max={100} value={normalizedProgress} aria-label="Agent progress">
+            {normalizedProgress}%
+          </progress>
+        </div>
+      ) : null}
+    </Surface>
+  );
+}

package/src/components/AgentToolCallLog.tsx

@@ -0,0 +1,262 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Button, Drawer, EmptyState, StatusDot, Surface, statusLabel } from "@echothink-ui/core";
+import type { EthOperationalStatus, SurfaceComponentProps } from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import { SearchIcon } from "@echothink-ui/icons";
+import type { AgentToolCall } from "../types";
+import { EMPTY_MARK, formatDuration, formatTime, jsonPreview, prettyJson } from "./utils";
+
+export interface AgentToolCallLogProps extends Omit<SurfaceComponentProps, "children" | "onSelect"> {
+  calls: AgentToolCall[];
+  onSelect?: (call: AgentToolCall) => void;
+}
+
+interface ToolCallRow extends Record<string, unknown> {
+  id: string;
+  call: AgentToolCall;
+  time: string;
+  toolName: string;
+  status: EthOperationalStatus;
+  duration: string;
+  argsPreview: string;
+  argsTone: PreviewTone;
+  resultPreview: string;
+  resultTone: PreviewTone;
+}
+
+type PreviewTone = "default" | "empty" | "error" | "redacted";
+
+export function AgentToolCallLog({
+  calls,
+  onSelect,
+  title = "Tool calls",
+  subtitle,
+  className,
+  ...props
+}: AgentToolCallLogProps) {
+  const [selectedCall, setSelectedCall] = React.useState<AgentToolCall | undefined>();
+  const rows = React.useMemo<ToolCallRow[]>(
+    () =>
+      calls.map((call) => {
+        const argsPreview = jsonPreview(call.args, call.redacted);
+        const resultPreview = call.error ?? jsonPreview(call.result, call.redacted);
+
+        return {
+          id: call.id,
+          call,
+          time: formatTime(call.startedAt),
+          toolName: call.toolName,
+          status: call.status,
+          duration: formatDuration(call.durationMs),
+          argsPreview,
+          argsTone: previewTone(argsPreview, call.redacted),
+          resultPreview,
+          resultTone: call.error ? "error" : previewTone(resultPreview, call.redacted)
+        };
+      }),
+    [calls]
+  );
+
+  const openCall = React.useCallback(
+    (call: AgentToolCall) => {
+      setSelectedCall(call);
+      onSelect?.(call);
+    },
+    [onSelect]
+  );
+
+  const columns = React.useMemo<DataColumn<ToolCallRow>[]>(
+    () => [
+      {
+        key: "time",
+        header: "Time",
+        width: "7rem",
+        render: (row) => (
+          <time className="eth-agent-tool-call-log__time" dateTime={row.call.startedAt}>
+            {row.time}
+          </time>
+        )
+      },
+      {
+        key: "toolName",
+        header: "Tool",
+        width: "13rem",
+        render: (row) => <code className="eth-agent-tool-call-log__tool">{row.toolName}</code>
+      },
+      {
+        key: "status",
+        header: "Status",
+        width: "11rem",
+        render: (row) => <StatusDot status={row.status} label={statusLabel(row.status)} />
+      },
+      {
+        key: "duration",
+        header: "Duration",
+        width: "7rem",
+        align: "end",
+        render: (row) => <PreviewText value={row.duration} tone={previewTone(row.duration)} />
+      },
+      {
+        key: "argsPreview",
+        header: "Args",
+        render: (row) => <PreviewText value={row.argsPreview} tone={row.argsTone} />
+      },
+      {
+        key: "resultPreview",
+        header: "Result",
+        render: (row) => <PreviewText value={row.resultPreview} tone={row.resultTone} />
+      },
+      {
+        key: "actions",
+        header: "Actions",
+        width: "7.5rem",
+        align: "end",
+        render: (row) => (
+          <Button
+            aria-label={`Inspect ${row.toolName} tool call`}
+            className="eth-agent-tool-call-log__inspect"
+            density="compact"
+            icon={<SearchIcon size={16} />}
+            intent="ghost"
+            onClick={() => openCall(row.call)}
+          >
+            Inspect
+          </Button>
+        )
+      }
+    ],
+    [openCall]
+  );
+
+  const defaultSubtitle = React.useMemo(() => summarizeCalls(calls), [calls]);
+
+  return (
+    <>
+      <Surface
+        {...props}
+        className={clsx("eth-agent-tool-call-log", className)}
+        data-eth-component="AgentToolCallLog"
+        subtitle={subtitle ?? defaultSubtitle}
+        title={title}
+      >
+        <DataTable
+          rows={rows}
+          columns={columns}
+          rowKey="id"
+          density="compact"
+          className="eth-agent-tool-call-log__table"
+          emptyState={<EmptyState title="No tool calls" />}
+        />
+      </Surface>
+      <Drawer
+        open={Boolean(selectedCall)}
+        title={selectedCall?.toolName ?? "Tool call"}
+        onClose={() => setSelectedCall(undefined)}
+      >
+        {selectedCall ? (
+          <div className="eth-agent-tool-call-log__drawer">
+            <div className="eth-agent-tool-call-log__drawer-status">
+              <StatusDot status={selectedCall.status} label={statusLabel(selectedCall.status)} />
+              {selectedCall.redacted ? (
+                <span className="eth-agent-tool-call-log__redaction-note">
+                  Redaction applied
+                </span>
+              ) : null}
+            </div>
+            <dl className="eth-agent-tool-call-log__meta">
+              <div>
+                <dt>Started</dt>
+                <dd>{formatTime(selectedCall.startedAt)}</dd>
+              </div>
+              <div>
+                <dt>Duration</dt>
+                <dd>{formatDuration(selectedCall.durationMs)}</dd>
+              </div>
+              <div>
+                <dt>Tool</dt>
+                <dd>
+                  <code>{selectedCall.toolName}</code>
+                </dd>
+              </div>
+              <div>
+                <dt>Redaction</dt>
+                <dd>{selectedCall.redacted ? "Applied" : "None"}</dd>
+              </div>
+            </dl>
+            {selectedCall.error ? (
+              <section className="eth-agent-tool-call-log__error">
+                <h3>Error</h3>
+                <pre tabIndex={0}>{selectedCall.error}</pre>
+              </section>
+            ) : null}
+            <JsonBlock
+              title="Arguments"
+              value={prettyJson(selectedCall.args, selectedCall.redacted)}
+            />
+            <JsonBlock
+              title="Result"
+              value={prettyJson(selectedCall.result, selectedCall.redacted)}
+            />
+          </div>
+        ) : null}
+      </Drawer>
+    </>
+  );
+}
+
+function summarizeCalls(calls: AgentToolCall[]) {
+  if (!calls.length) return undefined;
+  const active = calls.filter((call) =>
+    ["queued", "running", "in-progress", "pending-approval", "approval-required"].includes(
+      call.status
+    )
+  ).length;
+  const redacted = calls.filter((call) => call.redacted).length;
+  return [
+    `${calls.length} call${calls.length === 1 ? "" : "s"}`,
+    active ? `${active} active` : null,
+    redacted ? `${redacted} redacted` : null
+  ]
+    .filter(Boolean)
+    .join(" | ");
+}
+
+function previewTone(value: string, redacted = false): PreviewTone {
+  if (redacted && value === "[redacted]") return "redacted";
+  if (value === EMPTY_MARK) return "empty";
+  return "default";
+}
+
+function PreviewText({ value, tone = "default" }: { value: string; tone?: PreviewTone }) {
+  if (tone === "redacted") {
+    return (
+      <span className="eth-agent-tool-call-log__preview eth-agent-tool-call-log__preview--redacted">
+        Redacted
+      </span>
+    );
+  }
+
+  return (
+    <span
+      className={clsx(
+        "eth-agent-tool-call-log__preview",
+        tone !== "default" && `eth-agent-tool-call-log__preview--${tone}`
+      )}
+      title={value === EMPTY_MARK ? undefined : value}
+    >
+      {value}
+    </span>
+  );
+}
+
+function JsonBlock({ title, value }: { title: string; value: string }) {
+  const headingId = React.useId();
+
+  return (
+    <section className="eth-agent-tool-call-log__json" aria-labelledby={headingId}>
+      <h3 id={headingId}>{title}</h3>
+      <pre tabIndex={0}>{value}</pre>
+    </section>
+  );
+}

package/src/components/AgentTraceViewer.tsx

@@ -0,0 +1,218 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, EmptyState, StatusDot, Surface, statusLabel } from "@echothink-ui/core";
+import type { SurfaceComponentProps } from "@echothink-ui/core";
+import type { AgentTraceSpan } from "../types";
+import { formatDuration, formatTime, prettyJson, statusSeverity } from "./utils";
+
+export interface AgentTraceViewerProps extends Omit<SurfaceComponentProps, "children"> {
+  spans: AgentTraceSpan[];
+}
+
+interface TimelineSpan {
+  span: AgentTraceSpan;
+  start: number;
+  end: number;
+  depth: number;
+}
+
+export function AgentTraceViewer({
+  spans,
+  title = "Trace viewer",
+  className,
+  ...props
+}: AgentTraceViewerProps) {
+  const [selectedSpanId, setSelectedSpanId] = React.useState<string | undefined>(spans[0]?.id);
+  const timeline = React.useMemo(() => buildTimeline(spans), [spans]);
+  const selectedSpan = spans.find((span) => span.id === selectedSpanId) ?? spans[0];
+  const selectedTimelineItem = timeline.items.find((item) => item.span.id === selectedSpan?.id);
+  const activeCount = spans.filter((span) =>
+    ["running", "in-progress", "pending-approval", "approval-required"].includes(span.status)
+  ).length;
+  const selectedAttributes = Object.entries(selectedSpan?.attributes ?? {});
+
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-trace", "eth-agent-trace-viewer", className)}
+      data-eth-component="AgentTraceViewer"
+      title={title}
+    >
+      {!spans.length ? (
+        <EmptyState title="No trace spans" />
+      ) : (
+        <>
+          <dl className="eth-trace__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>Active</dt>
+              <dd>{activeCount}</dd>
+            </div>
+          </dl>
+
+          <div className="eth-trace__layout">
+            <section className="eth-trace__timeline-panel" aria-label="Trace timeline">
+              <div className="eth-trace__axis" aria-hidden="true">
+                <span>0 ms</span>
+                <span>{formatDuration(timeline.total / 2)}</span>
+                <span>{formatDuration(timeline.total)}</span>
+              </div>
+
+              <div className="eth-trace__timeline" role="list">
+                {timeline.items.map(({ span, start, end, depth }) => {
+                  const left = ((start - timeline.min) / timeline.total) * 100;
+                  const width = Math.max(((end - start) / timeline.total) * 100, 1);
+                  const selected = selectedSpan?.id === span.id;
+
+                  return (
+                    <div
+                      key={span.id}
+                      className={clsx("eth-trace__row", selected && "eth-trace__row--selected")}
+                      role="listitem"
+                      style={
+                        {
+                          "--eth-trace-indent": `${depth}rem`,
+                          "--eth-trace-left": `${left}%`,
+                          "--eth-trace-width": `${width}%`
+                        } as React.CSSProperties
+                      }
+                    >
+                      <button
+                        type="button"
+                        className={clsx(
+                          "eth-trace__span-label",
+                          selected && "eth-trace__span-label--selected"
+                        )}
+                        aria-pressed={selected}
+                        onClick={() => setSelectedSpanId(span.id)}
+                      >
+                        <span className="eth-trace__span-title">
+                          <StatusDot status={span.status} label={statusLabel(span.status)} />
+                          <span className="eth-trace__span-name">{span.name}</span>
+                        </span>
+                        <span className="eth-trace__span-meta">
+                          {formatTime(span.startedAt)} · {formatDuration(span.durationMs)}
+                        </span>
+                      </button>
+
+                      <div
+                        className="eth-trace__track"
+                        role="group"
+                        aria-label={`${span.name}, ${statusLabel(span.status)}, ${formatDuration(span.durationMs)}`}
+                      >
+                        <button
+                          type="button"
+                          className={clsx(
+                            "eth-trace__bar",
+                            `eth-trace__bar--${span.status}`,
+                            selected && "eth-trace__bar--selected"
+                          )}
+                          aria-label={`Select ${span.name}`}
+                          onClick={() => setSelectedSpanId(span.id)}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </section>
+
+            <aside className="eth-trace__details" aria-label="Selected span details">
+              {selectedSpan ? (
+                <>
+                  <header className="eth-trace__details-header">
+                    <div>
+                      <p className="eth-trace__details-eyebrow">Selected span</p>
+                      <h3>{selectedSpan.name}</h3>
+                    </div>
+                    <Badge severity={statusSeverity(selectedSpan.status)}>
+                      {statusLabel(selectedSpan.status)}
+                    </Badge>
+                  </header>
+
+                  <dl className="eth-trace__detail-grid">
+                    <div>
+                      <dt>Started</dt>
+                      <dd>{formatTime(selectedSpan.startedAt)}</dd>
+                    </div>
+                    <div>
+                      <dt>Duration</dt>
+                      <dd>{formatDuration(selectedSpan.durationMs)}</dd>
+                    </div>
+                    <div>
+                      <dt>Depth</dt>
+                      <dd>{selectedTimelineItem?.depth ?? 0}</dd>
+                    </div>
+                    <div>
+                      <dt>Span ID</dt>
+                      <dd>{selectedSpan.id}</dd>
+                    </div>
+                    {selectedSpan.parentId ? (
+                      <div>
+                        <dt>Parent</dt>
+                        <dd>{selectedSpan.parentId}</dd>
+                      </div>
+                    ) : null}
+                  </dl>
+
+                  <section className="eth-trace__attributes">
+                    <div className="eth-trace__attributes-header">
+                      <h4>Attributes</h4>
+                      <Badge severity="neutral">{selectedAttributes.length}</Badge>
+                    </div>
+                    {selectedAttributes.length ? (
+                      <pre>{prettyJson(selectedSpan.attributes)}</pre>
+                    ) : (
+                      <p>No attributes recorded.</p>
+                    )}
+                  </section>
+                </>
+              ) : (
+                <EmptyState title="Select a span" />
+              )}
+            </aside>
+          </div>
+        </>
+      )}
+    </Surface>
+  );
+}
+
+function buildTimeline(spans: AgentTraceSpan[]) {
+  if (!spans.length) return { items: [] as TimelineSpan[], min: 0, total: 1 };
+
+  const spansById = new Map(spans.map((span) => [span.id, span]));
+  const depthById = new Map<string, number>();
+
+  const depthFor = (span: AgentTraceSpan, 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: TimelineSpan[] = spans
+    .map((span, index) => {
+      const parsed = new Date(span.startedAt).getTime();
+      const start = Number.isNaN(parsed) ? index * 10 : parsed;
+      const end = start + Math.max(span.durationMs, 1);
+      return { span, start, end, depth: depthFor(span) };
+    })
+    .sort((a, b) => a.start - b.start);
+
+  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) };
+}