@echothink-ui/agent 0.1.0

package/src/components/AppDomainAgentPanel.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import type { AgentMessage, AgentRunState, ChatAgentRailAttachment } from "../types";
+import { ChatAgentRail } from "./ChatAgentRail";
+
+export interface AppDomainAgentPanelProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onSubmit"> {
+  appDomainRef: string;
+  agentRef?: string;
+  projectRef?: string;
+  messages?: AgentMessage[];
+  state?: AgentRunState;
+  prompt?: string;
+  onPromptChange?: (value: string) => void;
+  onSubmit?: (prompt: string, attachments?: ChatAgentRailAttachment[]) => void;
+  attachments?: ChatAgentRailAttachment[];
+  onAttachmentRemove?: (id: string) => void;
+  runControls?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export function AppDomainAgentPanel({
+  appDomainRef,
+  agentRef,
+  projectRef,
+  messages = [],
+  state,
+  prompt = "",
+  onPromptChange,
+  onSubmit,
+  attachments,
+  onAttachmentRemove,
+  runControls,
+  children,
+  ...props
+}: AppDomainAgentPanelProps) {
+  return (
+    <ChatAgentRail
+      {...props}
+      agentRef={agentRef}
+      projectRef={projectRef}
+      messages={messages}
+      state={state}
+      prompt={prompt}
+      onPromptChange={onPromptChange ?? (() => undefined)}
+      onSubmit={onSubmit}
+      attachments={attachments}
+      onAttachmentRemove={onAttachmentRemove}
+      runControls={runControls}
+      scopeLabel={appDomainRef}
+      header={
+        <div className="eth-agent-app-domain-panel__header">
+          <p className="eth-agent-app-domain-panel__eyebrow">App domain</p>
+          <h2 className="eth-agent-app-domain-panel__title">{appDomainRef}</h2>
+          {agentRef || projectRef ? (
+            <div className="eth-agent-app-domain-panel__meta" aria-label="Agent panel scope">
+              {agentRef ? <span>Agent {agentRef}</span> : null}
+              {projectRef ? <span>Project {projectRef}</span> : null}
+            </div>
+          ) : null}
+          {children ? <div className="eth-agent-app-domain-panel__slot">{children}</div> : null}
+        </div>
+      }
+      data-eth-component="AppDomainAgentPanel"
+    />
+  );
+}

package/src/components/ChatAgentRail.tsx

@@ -0,0 +1,192 @@
+import * as React from "react";
+import clsx from "clsx";
+import type { AgentMessage, AgentRunState, ChatAgentRailAttachment } from "../types";
+import { AgentMessageList } from "./AgentMessageList";
+import { AgentPromptBox } from "./AgentPromptBox";
+import { AgentStateBadge } from "./AgentStateBadge";
+import { ScopeAttachmentPanel } from "./ScopeAttachmentPanel";
+import { isActiveAgentState, mergeStyle } from "./utils";
+
+export interface ChatAgentRailProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "children" | "onSubmit"
+> {
+  agentRef?: string;
+  projectRef?: string;
+  messages: AgentMessage[];
+  state?: AgentRunState;
+  prompt: string;
+  onPromptChange: (value: string) => void;
+  onSubmit?: (prompt: string, attachments?: ChatAgentRailAttachment[]) => void;
+  attachments?: ChatAgentRailAttachment[];
+  onAttachmentRemove?: (id: string) => void;
+  onAttach?: () => void;
+  onSlash?: () => void;
+  autoScroll?: boolean;
+  runControls?: React.ReactNode;
+  header?: React.ReactNode;
+  scopeLabel?: React.ReactNode;
+  width?: number | string;
+}
+
+export interface LeftAgentRailProps extends ChatAgentRailProps {}
+
+interface AgentRailBaseProps extends ChatAgentRailProps {
+  componentName: "ChatAgentRail" | "LeftAgentRail";
+  railClassName: string;
+  placement: "left" | "right";
+}
+
+export function ChatAgentRail(props: ChatAgentRailProps) {
+  return (
+    <AgentRailBase
+      {...props}
+      componentName="ChatAgentRail"
+      railClassName="eth-agent-chat-rail"
+      placement="right"
+    />
+  );
+}
+
+export function LeftAgentRail(props: LeftAgentRailProps) {
+  return (
+    <AgentRailBase
+      {...props}
+      componentName="LeftAgentRail"
+      railClassName="eth-left-agent-rail eth-agent-left-rail"
+      placement="left"
+    />
+  );
+}
+
+function AgentRailBase({
+  agentRef,
+  projectRef,
+  messages,
+  state = "idle",
+  prompt,
+  onPromptChange,
+  onSubmit,
+  attachments = [],
+  onAttachmentRemove,
+  onAttach,
+  onSlash,
+  autoScroll = true,
+  runControls,
+  header,
+  scopeLabel,
+  width = 360,
+  className,
+  style,
+  componentName,
+  railClassName,
+  placement,
+  "aria-label": ariaLabel,
+  ...props
+}: AgentRailBaseProps) {
+  const streaming = messages.some((message) => message.streaming) || isActiveAgentState(state);
+  const border = "1px solid var(--eth-color-border-subtle)";
+
+  return (
+    <aside
+      {...props}
+      aria-label={ariaLabel ?? "Agent collaboration rail"}
+      className={clsx("eth-chat-rail", railClassName, className)}
+      data-eth-component={componentName}
+      data-placement={placement}
+      style={mergeStyle(
+        {
+          background: "var(--eth-color-layer-01)",
+          borderInlineEnd: placement === "left" ? border : 0,
+          borderInlineStart: placement === "right" ? border : 0,
+          display: "grid",
+          flex: `0 0 ${typeof width === "number" ? `${width}px` : width}`,
+          gridTemplateRows: "auto minmax(0, 1fr) auto",
+          height: "100%",
+          maxWidth: "100%",
+          minHeight: 0,
+          width
+        },
+        style
+      )}
+    >
+      <header
+        className="eth-chat-rail__header"
+        style={{
+          borderBottom: "1px solid var(--eth-color-border-subtle)",
+          display: "grid",
+          gap: "0.75rem",
+          padding: "1rem"
+        }}
+      >
+        <div
+          className="eth-chat-rail__header-main"
+          style={{
+            alignItems: "flex-start",
+            display: "flex",
+            gap: "0.75rem",
+            justifyContent: "space-between"
+          }}
+        >
+          <div style={{ minWidth: 0 }}>
+            {header ?? (
+              <>
+                <h2 className="eth-chat-rail__title" style={{ fontSize: "1rem", margin: 0 }}>
+                  Agent
+                </h2>
+                {agentRef || projectRef ? (
+                  <p
+                    className="eth-chat-rail__meta"
+                    style={{
+                      color: "var(--eth-color-text-secondary)",
+                      fontSize: "0.8rem",
+                      margin: "0.25rem 0 0"
+                    }}
+                  >
+                    {[agentRef, projectRef].filter(Boolean).join(" · ")}
+                  </p>
+                ) : null}
+              </>
+            )}
+          </div>
+          <AgentStateBadge state={state} />
+        </div>
+        {runControls ? <div className="eth-chat-rail__run-controls">{runControls}</div> : null}
+      </header>
+
+      <AgentMessageList
+        className="eth-chat-rail__messages"
+        autoScroll={autoScroll}
+        messages={messages}
+        streaming={streaming}
+        style={{ minHeight: 0, padding: "1rem" }}
+      />
+
+      <footer
+        className="eth-chat-rail__footer"
+        style={{
+          borderTop: "1px solid var(--eth-color-border-subtle)",
+          display: "grid",
+          gap: "0.75rem",
+          padding: "1rem"
+        }}
+      >
+        <ScopeAttachmentPanel
+          attachments={attachments.map((attachment) => ({
+            ...attachment,
+            kind: attachment.kind === "file" ? "document" : attachment.kind
+          }))}
+          onRemove={onAttachmentRemove}
+        />
+        <AgentPromptBox
+          value={prompt}
+          onChange={onPromptChange}
+          scopeLabel={scopeLabel}
+          onAttach={onAttach}
+          onSlash={onSlash}
+          onSubmit={(value) => onSubmit?.(value, attachments)}
+        />
+      </footer>
+    </aside>
+  );
+}

package/src/components/ScopeAttachmentPanel.tsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, Button, StatusDot, Surface, statusLabel } from "@echothink-ui/core";
+import type { SurfaceComponentProps } from "@echothink-ui/core";
+import type { AgentScopeAttachment } from "../types";
+
+export interface ScopeAttachmentPanelProps
+  extends Omit<SurfaceComponentProps, "children" | "items" | "metadata"> {
+  attachments: AgentScopeAttachment[];
+  onRemove?: (id: string) => void;
+}
+
+const attentionStatuses = new Set<AgentScopeAttachment["status"]>([
+  "approval-required",
+  "blocked",
+  "failed",
+  "pending-approval",
+  "stale",
+  "warning"
+]);
+
+export function ScopeAttachmentPanel({
+  attachments,
+  onRemove,
+  title = "Attached context",
+  subtitle,
+  severity,
+  className,
+  ...props
+}: ScopeAttachmentPanelProps) {
+  if (!attachments.length) return null;
+
+  const hasAttention = attachments.some((attachment) =>
+    attachment.status ? attentionStatuses.has(attachment.status) : false
+  );
+  const listLabel = typeof title === "string" ? `${title} items` : "Attached context items";
+  const renderedSubtitle =
+    subtitle ??
+    `${attachments.length} ${
+      attachments.length === 1 ? "scope is" : "scopes are"
+    } available to the agent run`;
+
+  return (
+    <Surface
+      {...props}
+      className={clsx("eth-agent-scope-attachments", className)}
+      data-eth-component="ScopeAttachmentPanel"
+      severity={severity ?? (hasAttention ? "warning" : undefined)}
+      subtitle={renderedSubtitle}
+      title={title}
+    >
+      <ul className="eth-agent-scope-attachments__list" aria-label={listLabel}>
+        {attachments.map((attachment) => (
+          <li
+            key={attachment.id}
+            className="eth-agent-scope-attachments__item"
+            data-kind={attachment.kind}
+            data-status={attachment.status}
+          >
+            <span className="eth-agent-scope-attachments__icon" aria-hidden="true">
+              {kindInitial(attachment.kind)}
+            </span>
+            <span className="eth-agent-scope-attachments__main">
+              <span className="eth-agent-scope-attachments__topline">
+                <strong className="eth-agent-scope-attachments__label">
+                  {attachment.label}
+                </strong>
+                <Badge severity="neutral">{kindLabel(attachment.kind)}</Badge>
+              </span>
+              <span className="eth-agent-scope-attachments__meta">
+                {kindDescription(attachment.kind)}
+              </span>
+            </span>
+            <span className="eth-agent-scope-attachments__aside">
+              {attachment.status ? (
+                <StatusDot status={attachment.status} label={statusLabel(attachment.status)} />
+              ) : (
+                <span className="eth-agent-scope-attachments__untracked">No status</span>
+              )}
+              {onRemove ? (
+                <Button
+                  aria-label={`Remove ${attachment.label}`}
+                  density="compact"
+                  intent="ghost"
+                  onClick={() => onRemove(attachment.id)}
+                >
+                  Remove
+                </Button>
+              ) : null}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </Surface>
+  );
+}
+
+function kindLabel(kind: AgentScopeAttachment["kind"]) {
+  switch (kind) {
+    case "app-domain":
+      return "App domain";
+    case "document":
+      return "Document";
+    default:
+      return kind.charAt(0).toUpperCase() + kind.slice(1);
+  }
+}
+
+function kindDescription(kind: AgentScopeAttachment["kind"]) {
+  switch (kind) {
+    case "app-domain":
+      return "Runnable application boundary";
+    case "document":
+      return "Source document";
+    case "project":
+      return "Project scope";
+    case "resource":
+      return "External resource";
+    case "task":
+      return "Task context";
+    case "scope":
+      return "General scope";
+    default:
+      return "Attached context";
+  }
+}
+
+function kindInitial(kind: AgentScopeAttachment["kind"]) {
+  return kindLabel(kind).charAt(0);
+}

package/src/components/utils.ts

@@ -0,0 +1,186 @@
+import type * as React from "react";
+import type { EthOperationalStatus, EthSeverity } from "@echothink-ui/core";
+import type {
+  AgentDiffItem,
+  AgentPlanStep,
+  AgentRunState,
+  AgentSafetyCheck
+} from "../types";
+
+export const EMPTY_MARK = "—";
+
+export function formatDateTime(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short"
+  }).format(date);
+}
+
+export function formatTime(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(undefined, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  }).format(date);
+}
+
+export function formatDuration(durationMs?: number) {
+  if (durationMs == null) return EMPTY_MARK;
+  if (durationMs < 1000) return `${Math.round(durationMs)} ms`;
+  return `${(durationMs / 1000).toFixed(durationMs < 10000 ? 1 : 0)} s`;
+}
+
+export function jsonPreview(value: unknown, redacted = false, maxLength = 120) {
+  if (redacted) return "[redacted]";
+  if (value == null) return EMPTY_MARK;
+  const text = typeof value === "string" ? value : JSON.stringify(value);
+  if (!text) return EMPTY_MARK;
+  return text.length > maxLength ? `${text.slice(0, maxLength - 1)}…` : text;
+}
+
+export function prettyJson(value: unknown, redacted = false) {
+  if (redacted) return "[redacted]";
+  if (value == null) return EMPTY_MARK;
+  if (typeof value === "string") return value;
+  return JSON.stringify(value, null, 2);
+}
+
+export function stateLabel(state: AgentRunState) {
+  switch (state) {
+    case "idle":
+      return "Idle";
+    case "listening":
+      return "Listening";
+    case "thinking":
+      return "Thinking";
+    case "tool-calling":
+      return "Calling tools";
+    case "waiting-for-user":
+      return "Waiting for user";
+    case "interrupted":
+      return "Interrupted";
+    case "failed":
+      return "Failed";
+    case "completed":
+      return "Completed";
+  }
+}
+
+export function stateSeverity(state: AgentRunState): EthSeverity {
+  switch (state) {
+    case "failed":
+      return "danger";
+    case "completed":
+      return "success";
+    case "waiting-for-user":
+    case "interrupted":
+      return "warning";
+    case "listening":
+    case "thinking":
+    case "tool-calling":
+      return "info";
+    case "idle":
+      return "neutral";
+  }
+}
+
+export function stateStatus(state: AgentRunState): EthOperationalStatus {
+  switch (state) {
+    case "completed":
+      return "completed";
+    case "failed":
+      return "failed";
+    case "waiting-for-user":
+      return "pending-approval";
+    case "interrupted":
+      return "warning";
+    case "listening":
+    case "thinking":
+    case "tool-calling":
+      return "running";
+    case "idle":
+      return "inactive";
+  }
+}
+
+export function isActiveAgentState(state: AgentRunState) {
+  return state === "listening" || state === "thinking" || state === "tool-calling";
+}
+
+export function statusSeverity(status: EthOperationalStatus): EthSeverity {
+  if (status === "failed" || status === "blocked" || status === "approval-required") {
+    return "danger";
+  }
+  if (status === "warning" || status === "pending-approval") return "warning";
+  if (status === "completed" || status === "succeeded" || status === "synced") return "success";
+  if (status === "running" || status === "in-progress" || status === "active") return "info";
+  return "neutral";
+}
+
+export function riskSeverity(riskLevel: "low" | "medium" | "high" | "critical" = "low") {
+  if (riskLevel === "critical" || riskLevel === "high") return "danger" satisfies EthSeverity;
+  if (riskLevel === "medium") return "warning" satisfies EthSeverity;
+  return "info" satisfies EthSeverity;
+}
+
+export function safetyStatus(check: AgentSafetyCheck): EthOperationalStatus {
+  if (check.status === "pass") return "completed";
+  if (check.status === "warn") return "warning";
+  return "failed";
+}
+
+export function safetySeverity(check: AgentSafetyCheck): EthSeverity {
+  if (check.status === "pass") return "success";
+  if (check.status === "warn") return "warning";
+  return "danger";
+}
+
+export function mergeStyle(
+  base: React.CSSProperties,
+  incoming?: React.CSSProperties
+): React.CSSProperties {
+  return incoming ? { ...base, ...incoming } : base;
+}
+
+export function diffPlanSteps(before: AgentPlanStep[], after: AgentPlanStep[]): AgentDiffItem[] {
+  const beforeById = new Map(before.map((step) => [step.id, step]));
+  const afterById = new Map(after.map((step) => [step.id, step]));
+  const ids = Array.from(
+    new Set([...after.map((step) => step.id), ...before.map((step) => step.id)])
+  );
+
+  return ids.map((id) => {
+    const beforeStep = beforeById.get(id);
+    const afterStep = afterById.get(id);
+    if (!beforeStep && afterStep) {
+      return { id, after: afterStep, status: "added", severity: "success" };
+    }
+    if (beforeStep && !afterStep) {
+      return { id, before: beforeStep, status: "removed", severity: "danger" };
+    }
+    const changed = JSON.stringify(beforeStep) !== JSON.stringify(afterStep);
+    return {
+      id,
+      before: beforeStep,
+      after: afterStep,
+      status: changed ? "modified" : "unchanged",
+      severity: changed ? "warning" : "neutral"
+    };
+  });
+}
+
+export const visuallyHiddenStyle: React.CSSProperties = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  height: 1,
+  margin: -1,
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: 1
+};