@echothink-ui/agent 0.1.0

package/src/components/AgentPlanPreview.tsx

@@ -0,0 +1,106 @@
+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 { AgentPlan } from "../types";
+
+export interface AgentPlanPreviewProps extends Omit<SurfaceComponentProps, "children"> {
+  plan: AgentPlan;
+}
+
+export function AgentPlanPreview({ plan, title, className, ...props }: AgentPlanPreviewProps) {
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-agent-plan-preview", className)}
+      data-eth-component="AgentPlanPreview"
+      title={title ?? "Proposed plan"}
+      subtitle="Plan before execution"
+    >
+      <div className="eth-agent-plan-preview__body">
+        <div className="eth-agent-plan-preview__summary" aria-label="Plan summary">
+          <div>
+            <p className="eth-agent-plan-preview__summary-label">Execution plan</p>
+            <p className="eth-agent-plan-preview__summary-title">{plan.title}</p>
+          </div>
+          <span className="eth-agent-plan-preview__summary-count">
+            {plan.steps.length} {plan.steps.length === 1 ? "step" : "steps"}
+          </span>
+        </div>
+
+        {plan.steps.length ? (
+          <ol className="eth-agent-plan-preview__steps" aria-label="Proposed execution steps">
+            {plan.steps.map((step, index) => (
+              <li
+                key={step.id}
+                className={clsx(
+                  "eth-agent-plan-preview__step",
+                  step.risks?.length && "eth-agent-plan-preview__step--risk"
+                )}
+              >
+                <article className="eth-agent-plan-preview__step-card">
+                  <span className="eth-agent-plan-preview__step-index" aria-hidden="true">
+                    {String(index + 1).padStart(2, "0")}
+                  </span>
+                  <div className="eth-agent-plan-preview__step-main">
+                    <p className="eth-agent-plan-preview__step-description">{step.description}</p>
+                    {step.durationEstimate || step.risks?.length ? (
+                      <div className="eth-agent-plan-preview__step-meta" aria-label="Step metadata">
+                        {step.durationEstimate ? <Badge>{step.durationEstimate}</Badge> : null}
+                        {step.risks?.map((risk) => (
+                          <Badge key={risk} severity="warning">
+                            {risk}
+                          </Badge>
+                        ))}
+                      </div>
+                    ) : null}
+                  </div>
+                </article>
+              </li>
+            ))}
+          </ol>
+        ) : (
+          <p className="eth-agent-plan-preview__empty">No execution steps have been proposed.</p>
+        )}
+
+        {plan.assumptions?.length || plan.risks?.length ? (
+          <div className="eth-agent-plan-preview__supporting">
+            {plan.assumptions?.length ? (
+              <TextList title="Assumptions" items={plan.assumptions} />
+            ) : null}
+            {plan.risks?.length ? <TextList title="Risks" items={plan.risks} tone="risk" /> : null}
+          </div>
+        ) : null}
+      </div>
+    </Surface>
+  );
+}
+
+function TextList({
+  title,
+  items,
+  tone = "neutral"
+}: {
+  title: string;
+  items: string[];
+  tone?: "neutral" | "risk";
+}) {
+  return (
+    <section
+      className={clsx(
+        "eth-agent-plan-preview__note-section",
+        `eth-agent-plan-preview__note-section--${tone}`
+      )}
+    >
+      <h3 className="eth-agent-plan-preview__note-title">{title}</h3>
+      <ul className="eth-agent-plan-preview__note-list">
+        {items.map((item) => (
+          <li key={item}>
+            <span className="eth-agent-plan-preview__note-marker" aria-hidden="true" />
+            <span>{item}</span>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/src/components/AgentPromptBox.tsx

@@ -0,0 +1,163 @@
+import * as React from "react";
+import clsx from "clsx";
+import { IconButton, Tag, Textarea } from "@echothink-ui/core";
+import { ChevronRightIcon, PlusIcon } from "@echothink-ui/icons";
+import type { AgentScopeAttachment } from "../types";
+
+export interface AgentPromptBoxProps
+  extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "children" | "onChange" | "onSubmit"> {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  scopeLabel?: React.ReactNode;
+  attachments?: AgentScopeAttachment[];
+  onAttach?: () => void;
+  onAttachmentRemove?: (id: string) => void;
+  onSlash?: () => void;
+}
+
+export function AgentPromptBox({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Message the agent...",
+  disabled,
+  scopeLabel,
+  attachments = [],
+  onAttach,
+  onAttachmentRemove,
+  onSlash,
+  className,
+  style,
+  ...props
+}: AgentPromptBoxProps) {
+  const canSubmit = value.trim().length > 0 && !disabled;
+  const hasContext = Boolean(scopeLabel) || attachments.length > 0;
+
+  const submit = React.useCallback(() => {
+    if (!canSubmit) return;
+    onSubmit?.(value);
+  }, [canSubmit, onSubmit, value]);
+
+  return (
+    <form
+      {...props}
+      className={clsx("eth-agent-prompt-box", className)}
+      data-eth-component="AgentPromptBox"
+      style={style}
+      onSubmit={(event) => {
+        event.preventDefault();
+        submit();
+      }}
+    >
+      {hasContext ? (
+        <div className="eth-agent-prompt-box__context">
+          {scopeLabel ? (
+            <span className="eth-agent-prompt-box__scope">
+              <span>Scope</span>
+              <strong>{scopeLabel}</strong>
+            </span>
+          ) : null}
+          {attachments.length ? (
+            <div className="eth-agent-prompt-box__attachments" aria-label="Attached context">
+              {attachments.map((attachment) => (
+                <Tag
+                  key={attachment.id}
+                  removable={Boolean(onAttachmentRemove)}
+                  onRemove={
+                    onAttachmentRemove ? () => onAttachmentRemove(attachment.id) : undefined
+                  }
+                >
+                  <span className="eth-agent-prompt-box__attachment-kind">
+                    {kindLabel(attachment.kind)}
+                  </span>
+                  <span className="eth-agent-prompt-box__attachment-label">
+                    {attachment.label}
+                  </span>
+                  {attachment.status ? (
+                    <span
+                      className="eth-agent-prompt-box__attachment-status"
+                      data-status={attachment.status}
+                      role="img"
+                      aria-label={`Status: ${statusLabel(attachment.status)}`}
+                    />
+                  ) : null}
+                </Tag>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      <Textarea
+        aria-label="Agent prompt"
+        className="eth-agent-prompt-box__input"
+        disabled={disabled}
+        placeholder={placeholder}
+        rows={3}
+        value={value}
+        onChange={(event) => onChange(event.currentTarget.value)}
+        onKeyDown={(event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            submit();
+          }
+        }}
+      />
+
+      <div className="eth-agent-prompt-box__actions">
+        <div className="eth-agent-prompt-box__tools">
+          <IconButton
+            label="Attach scope or file"
+            intent="ghost"
+            density="compact"
+            disabled={disabled || !onAttach}
+            icon={<PlusIcon size={16} />}
+            onClick={onAttach}
+          />
+          <IconButton
+            label="Open slash commands"
+            intent="ghost"
+            density="compact"
+            disabled={disabled}
+            icon={<span className="eth-agent-prompt-box__command-icon" aria-hidden>/</span>}
+            onClick={() => {
+              if (onSlash) {
+                onSlash();
+                return;
+              }
+              if (!value) onChange("/");
+            }}
+          />
+        </div>
+        <span className="eth-agent-prompt-box__spacer" />
+        <IconButton
+          className="eth-agent-prompt-box__submit"
+          label="Submit prompt"
+          intent="primary"
+          density="compact"
+          disabled={!canSubmit}
+          icon={<ChevronRightIcon size={16} />}
+          type="submit"
+        />
+      </div>
+    </form>
+  );
+}
+
+function kindLabel(kind: AgentScopeAttachment["kind"]) {
+  switch (kind) {
+    case "app-domain":
+      return "App";
+    case "document":
+      return "Doc";
+    default:
+      return kind.charAt(0).toUpperCase() + kind.slice(1);
+  }
+}
+
+function statusLabel(status: NonNullable<AgentScopeAttachment["status"]>) {
+  return status.replace(/-/g, " ");
+}

package/src/components/AgentRunControls.tsx

@@ -0,0 +1,221 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, Button, InlineNotification, Textarea } from "@echothink-ui/core";
+import type { EthIntent, EthSeverity } from "@echothink-ui/core";
+import { InterruptIcon, PauseIcon, PlayIcon, RetryIcon, StopIcon } from "@echothink-ui/icons";
+
+export interface AgentRunControlsProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onChange"> {
+  state: "running" | "paused" | "stopped" | "failed" | "completed";
+  onPause?: () => void;
+  onResume?: () => void;
+  onStop?: () => void;
+  onRetry?: () => void;
+  onInterrupt?: (reason: string) => void;
+}
+
+type AgentRunState = AgentRunControlsProps["state"];
+
+interface AgentRunStateMeta {
+  label: string;
+  severity: EthSeverity;
+  description: string;
+}
+
+interface AgentRunControlAction {
+  id: string;
+  label: string;
+  intent: EthIntent;
+  disabled: boolean;
+  icon: React.ReactNode;
+  onSelect?: () => void;
+}
+
+const stateMeta: Record<AgentRunState, AgentRunStateMeta> = {
+  running: {
+    label: "Running",
+    severity: "info",
+    description:
+      "The agent is actively executing; pause for review, interrupt with steering, or stop the run."
+  },
+  paused: {
+    label: "Paused",
+    severity: "warning",
+    description:
+      "Execution is held. Resume when the run can continue or stop it to cancel remaining work."
+  },
+  stopped: {
+    label: "Stopped",
+    severity: "neutral",
+    description: "The run was stopped before completion. Retry to start a fresh attempt."
+  },
+  failed: {
+    label: "Failed",
+    severity: "danger",
+    description: "The last run failed. Retry after reviewing the failure context."
+  },
+  completed: {
+    label: "Completed",
+    severity: "success",
+    description: "The run completed. Retry only when a new pass is required."
+  }
+};
+
+export function AgentRunControls({
+  state,
+  onPause,
+  onResume,
+  onStop,
+  onRetry,
+  onInterrupt,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}: AgentRunControlsProps) {
+  const [interrupting, setInterrupting] = React.useState(false);
+  const [reason, setReason] = React.useState("");
+  const descriptionId = React.useId();
+  const meta = stateMeta[state];
+  const canInterrupt = Boolean((state === "running" || state === "paused") && onInterrupt);
+
+  React.useEffect(() => {
+    if (!canInterrupt && interrupting) {
+      setInterrupting(false);
+      setReason("");
+    }
+  }, [canInterrupt, interrupting]);
+
+  const actions = React.useMemo<AgentRunControlAction[]>(() => {
+    const next: AgentRunControlAction[] = [];
+    if (state === "running") {
+      next.push({
+        id: "pause",
+        label: "Pause",
+        intent: "secondary",
+        disabled: !onPause,
+        icon: <PauseIcon size={16} />,
+        onSelect: onPause
+      });
+    }
+    if (state === "paused") {
+      next.push({
+        id: "resume",
+        label: "Resume",
+        intent: "primary",
+        disabled: !onResume,
+        icon: <PlayIcon size={16} />,
+        onSelect: onResume
+      });
+    }
+    if ((state === "running" || state === "paused") && onInterrupt) {
+      next.push({
+        id: "interrupt",
+        label: "Interrupt",
+        intent: "tertiary",
+        disabled: false,
+        icon: <InterruptIcon size={16} />,
+        onSelect: () => setInterrupting(true)
+      });
+    }
+    if (state === "running" || state === "paused") {
+      next.push({
+        id: "stop",
+        label: "Stop",
+        intent: "danger",
+        disabled: !onStop,
+        icon: <StopIcon size={16} />,
+        onSelect: onStop
+      });
+    }
+    if (state === "failed" || state === "stopped" || state === "completed") {
+      next.push({
+        id: "retry",
+        label: "Retry",
+        intent: state === "completed" ? "secondary" : "primary",
+        disabled: !onRetry,
+        icon: <RetryIcon size={16} />,
+        onSelect: onRetry
+      });
+    }
+    return next;
+  }, [onInterrupt, onPause, onResume, onRetry, onStop, state]);
+
+  const describedBy = ariaDescribedBy ? `${ariaDescribedBy} ${descriptionId}` : descriptionId;
+
+  const sendInterrupt = () => {
+    const trimmedReason = reason.trim();
+    if (!trimmedReason) return;
+    onInterrupt?.(trimmedReason);
+    setReason("");
+    setInterrupting(false);
+  };
+
+  return (
+    <section
+      {...props}
+      aria-label={ariaLabel ?? `${meta.label} agent run controls`}
+      aria-describedby={describedBy}
+      className={clsx("eth-agent-run-controls", className)}
+      data-eth-component="AgentRunControls"
+      data-state={state}
+      style={style}
+    >
+      <div className="eth-agent-run-controls__summary">
+        <div className="eth-agent-run-controls__heading">
+          <span className="eth-agent-run-controls__state-dot" aria-hidden="true" />
+          <span className="eth-agent-run-controls__title">Agent run</span>
+          <Badge severity={meta.severity}>{meta.label}</Badge>
+        </div>
+        <p id={descriptionId} className="eth-agent-run-controls__description">
+          {meta.description}
+        </p>
+      </div>
+      <div
+        className="eth-agent-run-controls__actions"
+        role="group"
+        aria-label={`${meta.label} run controls`}
+      >
+        {actions.map((action) => (
+          <Button
+            key={action.id}
+            density="compact"
+            intent={action.intent}
+            disabled={action.disabled}
+            icon={action.icon}
+            onClick={action.onSelect}
+          >
+            {action.label}
+          </Button>
+        ))}
+      </div>
+      {interrupting ? (
+        <div className="eth-agent-run-controls__interrupt">
+          <InlineNotification severity="warning" title="Interrupt run">
+            Send steering instructions before the agent continues.
+          </InlineNotification>
+          <Textarea
+            aria-label="Interrupt reason"
+            rows={3}
+            value={reason}
+            onChange={(event) => setReason(event.currentTarget.value)}
+          />
+          <div className="eth-agent-run-controls__interrupt-actions">
+            <Button
+              density="compact"
+              intent="primary"
+              disabled={!reason.trim()}
+              onClick={sendInterrupt}
+            >
+              Send interrupt
+            </Button>
+            <Button density="compact" intent="ghost" onClick={() => setInterrupting(false)}>
+              Cancel
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </section>
+  );
+}

package/src/components/AgentSafetyPanel.tsx

@@ -0,0 +1,113 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, EmptyState, Surface } from "@echothink-ui/core";
+import type { SurfaceComponentProps } from "@echothink-ui/core";
+import type { AgentSafetyCheck } from "../types";
+import { safetySeverity } from "./utils";
+
+export interface AgentSafetyPanelProps extends Omit<SurfaceComponentProps, "children"> {
+  checks: AgentSafetyCheck[];
+}
+
+export function AgentSafetyPanel({
+  checks,
+  title = "Safety checks",
+  subtitle,
+  className,
+  ...props
+}: AgentSafetyPanelProps) {
+  const summary = summarizeChecks(checks);
+
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-agent-safety-panel", className)}
+      data-eth-component="AgentSafetyPanel"
+      subtitle={subtitle ?? summaryLabel(summary)}
+      title={title}
+    >
+      {!checks.length ? (
+        <EmptyState title="No safety checks" description="No policy gates are attached to this run." />
+      ) : (
+        <div className="eth-agent-safety-panel__body">
+          <dl className="eth-agent-safety-panel__summary" aria-label="Safety check summary">
+            <div className="eth-agent-safety-panel__summary-item">
+              <dt>Total</dt>
+              <dd>{summary.total}</dd>
+            </div>
+            <div className="eth-agent-safety-panel__summary-item eth-agent-safety-panel__summary-item--pass">
+              <dt>Passed</dt>
+              <dd>{summary.pass}</dd>
+            </div>
+            <div className="eth-agent-safety-panel__summary-item eth-agent-safety-panel__summary-item--warn">
+              <dt>Review</dt>
+              <dd>{summary.warn}</dd>
+            </div>
+            <div className="eth-agent-safety-panel__summary-item eth-agent-safety-panel__summary-item--fail">
+              <dt>Blocked</dt>
+              <dd>{summary.fail}</dd>
+            </div>
+          </dl>
+
+          <div className="eth-agent-safety-panel__list" role="list">
+            {checks.map((check) => (
+              <article
+                key={check.id}
+                className={clsx(
+                  "eth-agent-safety-panel__check",
+                  `eth-agent-safety-panel__check--${check.status}`
+                )}
+                role="listitem"
+              >
+                <span className="eth-agent-safety-panel__indicator" aria-hidden="true" />
+                <div className="eth-agent-safety-panel__check-content">
+                  <div className="eth-agent-safety-panel__check-main">
+                    <h3>{check.label}</h3>
+                    <Badge severity={safetySeverity(check)}>{statusLabel(check.status)}</Badge>
+                  </div>
+                  <p>{check.details ?? statusDescription(check.status)}</p>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      )}
+    </Surface>
+  );
+}
+
+function summarizeChecks(checks: AgentSafetyCheck[]) {
+  return checks.reduce(
+    (summary, check) => {
+      summary.total += 1;
+      summary[check.status] += 1;
+      return summary;
+    },
+    { fail: 0, pass: 0, total: 0, warn: 0 }
+  );
+}
+
+function summaryLabel(summary: ReturnType<typeof summarizeChecks>) {
+  if (summary.total === 0) return "No policy gates are active.";
+  if (summary.fail > 0) return `${summary.fail} blocking ${plural("issue", summary.fail)} found.`;
+  if (summary.warn > 0) {
+    return summary.warn === 1 ? "1 check needs review." : `${summary.warn} checks need review.`;
+  }
+  return "All policy checks passed.";
+}
+
+function statusLabel(status: AgentSafetyCheck["status"]) {
+  if (status === "pass") return "Passed";
+  if (status === "warn") return "Review needed";
+  return "Blocked";
+}
+
+function statusDescription(status: AgentSafetyCheck["status"]) {
+  if (status === "pass") return "No policy issue detected.";
+  if (status === "warn") return "Review recommended before proceeding.";
+  return "Policy gate blocked this action.";
+}
+
+function plural(label: string, count: number) {
+  return count === 1 ? label : `${label}s`;
+}

package/src/components/AgentStateBadge.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import clsx from "clsx";
+import type { AgentRunState } from "../types";
+import { isActiveAgentState, stateLabel } from "./utils";
+
+export interface AgentStateBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  state?: AgentRunState;
+}
+
+export function AgentStateBadge({ state = "idle", className, ...props }: AgentStateBadgeProps) {
+  const active = isActiveAgentState(state);
+  const label = stateLabel(state);
+
+  return (
+    <span
+      {...props}
+      className={clsx(
+        "eth-agent-state-badge",
+        `eth-agent-state-badge--${state}`,
+        active && "eth-agent-state-badge--active",
+        className
+      )}
+      data-eth-component="AgentStateBadge"
+      data-state={state}
+    >
+      <span className="eth-agent-state-badge__dot" aria-hidden="true" />
+      <span className="eth-agent-state-badge__label">{label}</span>
+    </span>
+  );
+}