@echothink-ui/agent 0.1.0

package/src/components/AgentInterruptionPanel.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Button, InlineNotification, Surface, Textarea } from "@echothink-ui/core";
+import type { SurfaceComponentProps } from "@echothink-ui/core";
+import { InterruptIcon } from "@echothink-ui/icons";
+
+export interface AgentInterruptionPanelProps
+  extends Omit<SurfaceComponentProps, "children" | "onChange" | "onSubmit"> {
+  prompt: string;
+  onChange: (prompt: string) => void;
+  onSubmit?: (prompt: string) => void;
+  disabled?: boolean;
+  promptLabel?: React.ReactNode;
+  helperText?: React.ReactNode;
+  placeholder?: string;
+  submitLabel?: React.ReactNode;
+}
+
+const defaultMetadata: NonNullable<SurfaceComponentProps["metadata"]> = [
+  { label: "Mode", value: "Steering interrupt" },
+  { label: "Delivery", value: "Before next agent step" }
+];
+
+export function AgentInterruptionPanel({
+  prompt,
+  onChange,
+  onSubmit,
+  disabled,
+  title = "Interrupt agent",
+  subtitle = "Send operator guidance before the agent continues.",
+  metadata = defaultMetadata,
+  promptLabel = "Steering instruction",
+  helperText = "Delivered before the next agent step.",
+  placeholder = "Tell the agent what to change, stop, or prioritize.",
+  submitLabel = "Send interruption",
+  className,
+  ...props
+}: AgentInterruptionPanelProps) {
+  const hasPrompt = Boolean(prompt.trim());
+  const submit = () => {
+    if (!disabled && hasPrompt) onSubmit?.(prompt);
+  };
+
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-agent-interruption-panel", className)}
+      data-eth-component="AgentInterruptionPanel"
+      metadata={metadata}
+      subtitle={subtitle}
+      title={title}
+    >
+      <div className="eth-agent-interruption-panel__body">
+        <InlineNotification severity="warning" title="Steering interrupt">
+          The agent will receive this instruction before continuing the current run.
+        </InlineNotification>
+        <Textarea
+          className="eth-agent-interruption-panel__prompt"
+          disabled={disabled}
+          helperText={helperText}
+          labelText={promptLabel}
+          placeholder={placeholder}
+          rows={4}
+          value={prompt}
+          onChange={(event) => onChange(event.currentTarget.value)}
+          onKeyDown={(event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+              event.preventDefault();
+              submit();
+            }
+          }}
+        />
+        <div className="eth-agent-interruption-panel__actions">
+          <Button
+            disabled={disabled || !hasPrompt}
+            icon={<InterruptIcon size={16} />}
+            onClick={submit}
+          >
+            {submitLabel}
+          </Button>
+        </div>
+      </div>
+    </Surface>
+  );
+}

package/src/components/AgentMemoryPanel.tsx

@@ -0,0 +1,167 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, Button, EmptyState, Surface } from "@echothink-ui/core";
+import type { SurfaceComponentProps } from "@echothink-ui/core";
+import type { AgentMemoryEntry } from "../types";
+import { formatDateTime } from "./utils";
+
+export interface AgentMemoryPanelProps extends Omit<SurfaceComponentProps, "children"> {
+  entries: AgentMemoryEntry[];
+  onPin?: (id: string) => void;
+  onEdit?: (id: string) => void;
+  onDelete?: (id: string) => void;
+}
+
+const kinds: AgentMemoryEntry["kind"][] = ["user", "project", "feedback", "reference"];
+
+export function AgentMemoryPanel({
+  entries,
+  onPin,
+  onEdit,
+  onDelete,
+  title = "Agent memory",
+  subtitle = "Stored instructions and retrieved context available to the agent",
+  className,
+  ...props
+}: AgentMemoryPanelProps) {
+  const headingPrefix = React.useId();
+  const groups = React.useMemo(
+    () =>
+      kinds
+        .map((kind) => ({ kind, entries: entries.filter((entry) => entry.kind === kind) }))
+        .filter((group) => group.entries.length),
+    [entries]
+  );
+  const pinnedCount = React.useMemo(
+    () => entries.filter((entry) => entry.pinned).length,
+    [entries]
+  );
+  const latestUpdatedAt = React.useMemo(() => {
+    const sortedEntries = entries
+      .filter((entry): entry is AgentMemoryEntry & { lastUpdatedAt: string } =>
+        Boolean(entry.lastUpdatedAt && !Number.isNaN(new Date(entry.lastUpdatedAt).getTime()))
+      )
+      .sort((a, b) => new Date(b.lastUpdatedAt).getTime() - new Date(a.lastUpdatedAt).getTime());
+
+    return sortedEntries[0]?.lastUpdatedAt;
+  }, [entries]);
+
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-agent-memory-panel", className)}
+      data-eth-component="AgentMemoryPanel"
+      subtitle={subtitle}
+      title={title}
+    >
+      {!groups.length ? (
+        <EmptyState title="No memory entries" />
+      ) : (
+        <div className="eth-agent-memory-panel__body">
+          <dl className="eth-agent-memory-panel__summary" aria-label="Memory summary">
+            <div className="eth-agent-memory-panel__summary-item">
+              <dt>Total entries</dt>
+              <dd>{entries.length}</dd>
+            </div>
+            <div className="eth-agent-memory-panel__summary-item">
+              <dt>Pinned</dt>
+              <dd>{pinnedCount}</dd>
+            </div>
+            <div className="eth-agent-memory-panel__summary-item">
+              <dt>Latest update</dt>
+              <dd>
+                {latestUpdatedAt ? (
+                  <time dateTime={latestUpdatedAt}>{formatDateTime(latestUpdatedAt)}</time>
+                ) : (
+                  "Not recorded"
+                )}
+              </dd>
+            </div>
+          </dl>
+          {groups.map((group) => (
+            <section
+              key={group.kind}
+              className="eth-agent-memory-panel__group"
+              aria-labelledby={`${headingPrefix}-${group.kind}`}
+            >
+              <header className="eth-agent-memory-panel__group-header">
+                <h3 id={`${headingPrefix}-${group.kind}`}>{kindTitle(group.kind)}</h3>
+                <Badge severity="neutral">
+                  {group.entries.length} {group.entries.length === 1 ? "entry" : "entries"}
+                </Badge>
+              </header>
+              <div className="eth-agent-memory-panel__entries">
+                {group.entries.map((entry) => (
+                  <article
+                    key={entry.id}
+                    className={clsx(
+                      "eth-agent-memory-panel__entry",
+                      entry.pinned && "eth-agent-memory-panel__entry--pinned"
+                    )}
+                  >
+                    <header className="eth-agent-memory-panel__entry-header">
+                      <span className="eth-agent-memory-panel__entry-title">
+                        <strong>{entry.key}</strong>
+                        {entry.pinned ? <Badge severity="info">Pinned</Badge> : null}
+                      </span>
+                      {entry.lastUpdatedAt ? (
+                        <time
+                          className="eth-agent-memory-panel__updated-at"
+                          dateTime={entry.lastUpdatedAt}
+                        >
+                          {formatDateTime(entry.lastUpdatedAt)}
+                        </time>
+                      ) : null}
+                    </header>
+                    <div className="eth-agent-memory-panel__value">{entry.value}</div>
+                    {onPin || onEdit || onDelete ? (
+                      <div
+                        className="eth-agent-memory-panel__actions"
+                        aria-label={`${entry.key} memory actions`}
+                      >
+                        {onPin ? (
+                          <Button
+                            aria-label={`${entry.pinned ? "Unpin" : "Pin"} ${entry.key}`}
+                            density="compact"
+                            intent="secondary"
+                            onClick={() => onPin(entry.id)}
+                          >
+                            {entry.pinned ? "Unpin" : "Pin"}
+                          </Button>
+                        ) : null}
+                        {onEdit ? (
+                          <Button
+                            aria-label={`Edit ${entry.key}`}
+                            density="compact"
+                            intent="secondary"
+                            onClick={() => onEdit(entry.id)}
+                          >
+                            Edit
+                          </Button>
+                        ) : null}
+                        {onDelete ? (
+                          <Button
+                            aria-label={`Delete ${entry.key}`}
+                            density="compact"
+                            intent="danger"
+                            onClick={() => onDelete(entry.id)}
+                          >
+                            Delete
+                          </Button>
+                        ) : null}
+                      </div>
+                    ) : null}
+                  </article>
+                ))}
+              </div>
+            </section>
+          ))}
+        </div>
+      )}
+    </Surface>
+  );
+}
+
+function kindTitle(kind: AgentMemoryEntry["kind"]) {
+  return kind.charAt(0).toUpperCase() + kind.slice(1);
+}

package/src/components/AgentMessageList.tsx

@@ -0,0 +1,209 @@
+import * as React from "react";
+import clsx from "clsx";
+import { StatusDot, Tag, statusLabel } from "@echothink-ui/core";
+import type { AgentMessage } from "../types";
+import { formatDateTime, mergeStyle } from "./utils";
+
+export interface AgentMessageListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  messages: AgentMessage[];
+  streaming?: boolean;
+  autoScroll?: boolean;
+}
+
+const roleLabels: Record<AgentMessage["role"], string> = {
+  user: "You",
+  agent: "Agent",
+  system: "System",
+  tool: "Tool"
+};
+
+export function AgentMessageList({
+  messages,
+  streaming,
+  autoScroll = true,
+  className,
+  style,
+  ...props
+}: AgentMessageListProps) {
+  const listRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!autoScroll) return;
+    const node = listRef.current;
+    if (!node) return;
+    node.scrollTo({ top: node.scrollHeight, behavior: "smooth" });
+  }, [autoScroll, messages.length, streaming]);
+
+  return (
+    <div
+      {...props}
+      ref={listRef}
+      role="log"
+      aria-live={streaming ? "polite" : "off"}
+      aria-relevant="additions text"
+      className={clsx("eth-message-list", "eth-agent-message-list", className)}
+      data-eth-component="AgentMessageList"
+      style={mergeStyle(
+        {
+          background: "var(--eth-color-layer-01)",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          maxHeight: "100%",
+          overflowY: "auto",
+          padding: "1rem"
+        },
+        style
+      )}
+    >
+      {messages.map((message, index) => {
+        const isStreaming = Boolean(message.streaming || (streaming && index === messages.length - 1));
+        const isUser = message.role === "user";
+        const isSystem = message.role === "system";
+        const isTool = message.role === "tool";
+        const accentBorder = isTool
+          ? "3px solid var(--eth-color-border-strong)"
+          : "3px solid var(--eth-color-interactive-primary)";
+
+        return (
+          <article
+            key={message.id}
+            className={clsx(
+              "eth-message-list__item",
+              "eth-agent-message",
+              `eth-agent-message--${message.role}`,
+              isStreaming && "eth-agent-message--streaming"
+            )}
+            aria-busy={isStreaming || undefined}
+            style={{
+              alignSelf: isSystem ? "stretch" : isUser ? "flex-end" : "flex-start",
+              contentVisibility: "auto",
+              containIntrinsicSize: "1px 96px",
+              display: "grid",
+              gap: "0.375rem",
+              maxWidth: isSystem ? "100%" : "min(100%, 42rem)",
+              minWidth: 0,
+              textAlign: isSystem ? "center" : "start",
+              width: isSystem ? "100%" : "fit-content"
+            }}
+          >
+            <header
+              className="eth-agent-message__header"
+              style={{
+                alignItems: "center",
+                color: "var(--eth-color-text-secondary)",
+                display: "flex",
+                flexWrap: "wrap",
+                fontSize: "0.75rem",
+                gap: "0.5rem",
+                justifyContent: isUser ? "flex-end" : isSystem ? "center" : "flex-start",
+                lineHeight: 1.333
+              }}
+            >
+              <span
+                className="eth-agent-message__avatar"
+                aria-hidden
+                style={{
+                  alignItems: "center",
+                  background: isSystem
+                    ? "transparent"
+                    : isUser
+                      ? "var(--eth-color-interactive-primary)"
+                      : "var(--eth-color-layer-02)",
+                  border: isSystem
+                    ? "1px dashed var(--eth-color-border-subtle)"
+                    : "1px solid var(--eth-color-border-subtle)",
+                  borderRadius: "var(--eth-radius-none)",
+                  color: isUser ? "#fff" : "var(--eth-color-text-primary)",
+                  display: "inline-flex",
+                  fontSize: "0.72rem",
+                  fontWeight: 700,
+                  height: 24,
+                  justifyContent: "center",
+                  width: 24
+                }}
+              >
+                {roleLabels[message.role].slice(0, 1)}
+              </span>
+              <strong>{roleLabels[message.role]}</strong>
+              <time dateTime={message.createdAt}>{formatDateTime(message.createdAt)}</time>
+              {message.status ? (
+                <StatusDot status={message.status} label={statusLabel(message.status)} />
+              ) : null}
+            </header>
+
+            <div
+              className="eth-agent-message__bubble"
+              style={{
+                background: isSystem
+                  ? "var(--eth-color-layer-02)"
+                  : isUser
+                    ? "var(--eth-color-navy)"
+                    : "var(--eth-color-layer-02)",
+                border: isSystem
+                  ? "1px dashed var(--eth-color-border-subtle)"
+                  : "1px solid var(--eth-color-border-subtle)",
+                borderInlineEnd: isStreaming ? accentBorder : undefined,
+                borderInlineStart: isUser || isSystem ? undefined : accentBorder,
+                borderRadius: "var(--eth-radius-panel)",
+                color: isUser ? "#fff" : "var(--eth-color-text-primary)",
+                fontFamily: isTool ? "ui-monospace, SFMono-Regular, Menlo, monospace" : undefined,
+                fontSize: isTool ? "0.875rem" : undefined,
+                lineHeight: 1.5,
+                overflowWrap: "anywhere",
+                padding: isSystem ? "0.5rem 0.75rem" : "0.875rem 1rem",
+                whiteSpace: isTool ? "pre-wrap" : "normal",
+                wordBreak: "normal"
+              }}
+            >
+              {message.content}
+              {isStreaming ? (
+                <span
+                  className="eth-agent-message__cursor"
+                  aria-hidden
+                  style={{
+                    animation: "eth-pulse 0.8s infinite",
+                    color: "var(--eth-color-interactive-primary)",
+                    display: "inline-block",
+                    fontWeight: 600,
+                    marginInlineStart: 3,
+                    transform: "translateY(1px)"
+                  }}
+                >
+                  ▌
+                </span>
+              ) : null}
+            </div>
+
+            {message.citations?.length ? (
+              <div
+                className="eth-agent-message__citations"
+                aria-label="Citations"
+                style={{
+                  display: "flex",
+                  flexWrap: "wrap",
+                  gap: "0.375rem",
+                  justifyContent: isUser ? "flex-end" : isSystem ? "center" : "flex-start"
+                }}
+              >
+                {message.citations.map((citation) =>
+                  citation.href ? (
+                    <a
+                      key={citation.id}
+                      className="eth-agent-message__citation-link eth-tag"
+                      href={citation.href}
+                    >
+                      {citation.label}
+                    </a>
+                  ) : (
+                    <Tag key={citation.id}>{citation.label}</Tag>
+                  )
+                )}
+              </div>
+            ) : null}
+          </article>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/AgentPlanDiff.tsx

@@ -0,0 +1,149 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, Surface } from "@echothink-ui/core";
+import type { SurfaceComponentProps } from "@echothink-ui/core";
+import type { AgentPlanStep } from "../types";
+import { diffPlanSteps } from "./utils";
+
+export interface AgentPlanDiffProps extends Omit<SurfaceComponentProps, "children"> {
+  before: AgentPlanStep[];
+  after: AgentPlanStep[];
+}
+
+export function AgentPlanDiff({
+  before,
+  after,
+  title = "Plan diff",
+  subtitle = "Compare proposed plan changes before execution",
+  className,
+  ...props
+}: AgentPlanDiffProps) {
+  const diff = React.useMemo(() => diffPlanSteps(before, after), [before, after]);
+  const summary = React.useMemo(
+    () => ({
+      added: diff.filter((item) => item.status === "added").length,
+      modified: diff.filter((item) => item.status === "modified").length,
+      removed: diff.filter((item) => item.status === "removed").length,
+      unchanged: diff.filter((item) => item.status === "unchanged").length
+    }),
+    [diff]
+  );
+
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-agent-plan-diff", className)}
+      data-eth-component="AgentPlanDiff"
+      subtitle={subtitle}
+      title={title}
+    >
+      <div className="eth-agent-plan-diff__body">
+        <dl className="eth-agent-plan-diff__summary" aria-label="Plan diff summary">
+          <SummaryItem label="Added" value={summary.added} tone="added" />
+          <SummaryItem label="Modified" value={summary.modified} tone="modified" />
+          <SummaryItem label="Removed" value={summary.removed} tone="removed" />
+          <SummaryItem label="Unchanged" value={summary.unchanged} tone="unchanged" />
+        </dl>
+
+        {diff.length ? (
+          <ol className="eth-agent-plan-diff__list" aria-label="Plan step changes">
+            {diff.map((item) => {
+              const stepId = item.after?.id ?? item.before?.id ?? item.id;
+              return (
+                <li key={item.id} className="eth-agent-plan-diff__entry">
+                  <article
+                    className={clsx(
+                      "eth-agent-plan-diff__item",
+                      `eth-agent-plan-diff__item--${item.status}`
+                    )}
+                  >
+                    <header className="eth-agent-plan-diff__item-header">
+                      <div className="eth-agent-plan-diff__item-heading">
+                        <span className="eth-agent-plan-diff__step-id">Step {stepId}</span>
+                        <Badge severity={item.severity}>{statusLabelFor(item.status)}</Badge>
+                      </div>
+                    </header>
+                    {item.status === "modified" ? (
+                      <div className="eth-agent-plan-diff__comparison">
+                        <StepSnapshot label="Before" step={item.before} />
+                        <StepSnapshot label="After" step={item.after} />
+                      </div>
+                    ) : (
+                      <StepSnapshot
+                        label={snapshotLabelFor(item.status)}
+                        step={item.after ?? item.before}
+                      />
+                    )}
+                  </article>
+                </li>
+              );
+            })}
+          </ol>
+        ) : (
+          <p className="eth-agent-plan-diff__empty">No plan steps to compare.</p>
+        )}
+      </div>
+    </Surface>
+  );
+}
+
+function StepSnapshot({ label, step }: { label: string; step?: AgentPlanStep }) {
+  if (!step) return null;
+  return (
+    <section className="eth-agent-plan-diff__snapshot">
+      <h3 className="eth-agent-plan-diff__snapshot-label">{label}</h3>
+      <p className="eth-agent-plan-diff__snapshot-description">{step.description}</p>
+      {step.durationEstimate || step.risks?.length ? (
+        <div className="eth-agent-plan-diff__snapshot-meta" aria-label={`${label} metadata`}>
+          {step.durationEstimate ? <Badge>{step.durationEstimate}</Badge> : null}
+          {step.risks?.map((risk) => (
+            <Badge key={risk} severity="warning">
+              {risk}
+            </Badge>
+          ))}
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+function SummaryItem({
+  label,
+  value,
+  tone
+}: {
+  label: string;
+  value: number;
+  tone: "added" | "removed" | "modified" | "unchanged";
+}) {
+  return (
+    <div
+      className={clsx(
+        "eth-agent-plan-diff__summary-item",
+        `eth-agent-plan-diff__summary-item--${tone}`
+      )}
+    >
+      <dt>{label}</dt>
+      <dd>{value}</dd>
+    </div>
+  );
+}
+
+function statusLabelFor(status: "added" | "removed" | "modified" | "unchanged") {
+  switch (status) {
+    case "added":
+      return "Added";
+    case "removed":
+      return "Removed";
+    case "modified":
+      return "Modified";
+    case "unchanged":
+      return "Unchanged";
+  }
+}
+
+function snapshotLabelFor(status: "added" | "removed" | "modified" | "unchanged") {
+  if (status === "added") return "Added step";
+  if (status === "removed") return "Removed step";
+  return "Step";
+}