@echothink-ui/agent 0.1.0

package/src/index.test.tsx

@@ -0,0 +1,212 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  AgentMemoryPanel,
+  AgentPlanDiff,
+  AgentPromptBox,
+  ScopeAttachmentPanel,
+  AgentToolCallLog,
+  LeftAgentRail
+} from "./index";
+
+globalThis.ResizeObserver ??= vi.fn(() => ({
+  disconnect: vi.fn(),
+  observe: vi.fn(),
+  unobserve: vi.fn()
+})) as unknown as typeof ResizeObserver;
+
+describe("@echothink-ui/agent AgentPromptBox", () => {
+  it("renders prompt context and submits entered text", () => {
+    const onSubmit = vi.fn();
+
+    render(
+      <AgentPromptBox
+        value="Draft a reply"
+        onChange={vi.fn()}
+        onSubmit={onSubmit}
+        scopeLabel="Marketing drafts"
+        attachments={[{ id: "brief", label: "Q3 brief", kind: "document", status: "synced" }]}
+      />
+    );
+
+    expect(screen.getByText("Scope")).toBeTruthy();
+    expect(screen.getByText("Marketing drafts")).toBeTruthy();
+    expect(screen.getByText("Q3 brief")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Submit prompt" }));
+    expect(onSubmit).toHaveBeenCalledWith("Draft a reply");
+  });
+
+  it("keeps attachment action disabled without a handler", () => {
+    render(<AgentPromptBox value="" onChange={vi.fn()} />);
+
+    expect(
+      screen.getByRole("button", { name: "Attach scope or file" }).hasAttribute("disabled")
+    ).toBe(true);
+  });
+});
+
+describe("@echothink-ui/agent LeftAgentRail", () => {
+  it("renders the left rail component contract", () => {
+    render(
+      <LeftAgentRail
+        messages={[]}
+        prompt=""
+        onPromptChange={vi.fn()}
+        aria-label="Workspace agent rail"
+      />
+    );
+
+    const rail = screen.getByLabelText("Workspace agent rail");
+    expect(rail.getAttribute("data-eth-component")).toBe("LeftAgentRail");
+    expect(rail.getAttribute("data-placement")).toBe("left");
+    expect(rail.className).toContain("eth-left-agent-rail");
+  });
+});
+
+describe("@echothink-ui/agent ScopeAttachmentPanel", () => {
+  it("renders attached context as a readable panel with removable items", () => {
+    const onRemove = vi.fn();
+
+    render(
+      <ScopeAttachmentPanel
+        attachments={[
+          { id: "brief", label: "Brief.md", kind: "document", status: "synced" },
+          { id: "project", label: "Marketing project", kind: "project", status: "active" },
+          { id: "cms", label: "CMS workspace", kind: "app-domain", status: "warning" }
+        ]}
+        onRemove={onRemove}
+      />
+    );
+
+    expect(screen.getByRole("heading", { name: "Attached context" })).toBeTruthy();
+    expect(screen.getByRole("list", { name: "Attached context items" })).toBeTruthy();
+    expect(screen.getByText("Brief.md")).toBeTruthy();
+    expect(screen.getByText("Source document")).toBeTruthy();
+    expect(screen.getByText("Synced")).toBeTruthy();
+    expect(screen.getByText("Warning")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove Brief.md" }));
+
+    expect(onRemove).toHaveBeenCalledWith("brief");
+  });
+});
+
+describe("@echothink-ui/agent AgentMemoryPanel", () => {
+  it("renders grouped memory metadata and action callbacks", () => {
+    const onPin = vi.fn();
+    const onEdit = vi.fn();
+
+    render(
+      <AgentMemoryPanel
+        entries={[
+          {
+            id: "tone",
+            kind: "user",
+            key: "preferred-tone",
+            value: "Concise, direct",
+            pinned: true,
+            lastUpdatedAt: "2026-05-28T12:00:00Z"
+          },
+          {
+            id: "policy",
+            kind: "reference",
+            key: "source-policy",
+            value: "Use governance checklist"
+          }
+        ]}
+        onEdit={onEdit}
+        onPin={onPin}
+      />
+    );
+
+    expect(screen.getByText("User")).toBeTruthy();
+    expect(screen.getByText("Reference")).toBeTruthy();
+    expect(screen.getByText("preferred-tone")).toBeTruthy();
+    expect(screen.getAllByText("Pinned").length).toBeGreaterThan(0);
+
+    fireEvent.click(screen.getByRole("button", { name: "Unpin preferred-tone" }));
+    fireEvent.click(screen.getByRole("button", { name: "Edit source-policy" }));
+
+    expect(onPin).toHaveBeenCalledWith("tone");
+    expect(onEdit).toHaveBeenCalledWith("policy");
+  });
+});
+
+describe("@echothink-ui/agent AgentToolCallLog", () => {
+  it("renders readable tool call state and opens inspection details", () => {
+    const onSelect = vi.fn();
+
+    render(
+      <AgentToolCallLog
+        calls={[
+          {
+            id: "search",
+            toolName: "search.docs",
+            args: { q: "approval policy" },
+            result: { documents: 3 },
+            status: "completed",
+            startedAt: "10:40:01",
+            durationMs: 120
+          },
+          {
+            id: "send",
+            toolName: "send.email",
+            args: { to: "customer@example.com" },
+            result: { id: "msg_1" },
+            status: "approval-required",
+            startedAt: "10:40:05",
+            redacted: true
+          }
+        ]}
+        onSelect={onSelect}
+      />
+    );
+
+    expect(screen.getByText("Completed")).toBeTruthy();
+    expect(screen.getByText("Approval Required")).toBeTruthy();
+    expect(screen.getAllByText("Redacted").length).toBeGreaterThan(0);
+
+    fireEvent.click(screen.getByRole("button", { name: "Inspect search.docs tool call" }));
+
+    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ id: "search" }));
+    expect(screen.getByText("Started")).toBeTruthy();
+    expect(screen.getAllByText("Duration").length).toBeGreaterThan(0);
+    expect(screen.getByText("Arguments")).toBeTruthy();
+    expect(screen.getAllByText("Result").length).toBeGreaterThan(0);
+  });
+});
+
+describe("@echothink-ui/agent AgentPlanDiff", () => {
+  it("renders plan changes in proposed execution order", () => {
+    render(
+      <AgentPlanDiff
+        before={[
+          { id: "1", description: "Draft reply", durationEstimate: "20s" },
+          { id: "2", description: "Send draft", risks: ["external send"] },
+          { id: "4", description: "Notify campaign owner" }
+        ]}
+        after={[
+          { id: "1", description: "Draft reply", durationEstimate: "20s" },
+          { id: "3", description: "Summarize for inspector", durationEstimate: "15s" },
+          { id: "2", description: "Send draft after human approval", risks: ["approval gate"] }
+        ]}
+      />
+    );
+
+    const changes = screen.getAllByRole("listitem");
+    expect(changes.length).toBe(4);
+    expect(changes[0]?.textContent).toContain("Step 1");
+    expect(changes[0]?.textContent).toContain("Unchanged");
+    expect(changes[1]?.textContent).toContain("Step 3");
+    expect(changes[1]?.textContent).toContain("Added");
+    expect(changes[2]?.textContent).toContain("Step 2");
+    expect(changes[2]?.textContent).toContain("Before");
+    expect(changes[2]?.textContent).toContain("After");
+    expect(changes[3]?.textContent).toContain("Step 4");
+    expect(changes[3]?.textContent).toContain("Removed");
+    expect(screen.getByLabelText("Plan diff summary").textContent).toBe(
+      "Added1Modified1Removed1Unchanged1"
+    );
+  });
+});

package/src/index.tsx

@@ -0,0 +1,88 @@
+import "./styles.css";
+
+export { ChatAgentRail, LeftAgentRail } from "./components/ChatAgentRail";
+export type { ChatAgentRailProps, LeftAgentRailProps } from "./components/ChatAgentRail";
+export { AgentMessageList } from "./components/AgentMessageList";
+export type { AgentMessageListProps } from "./components/AgentMessageList";
+export { AgentPromptBox } from "./components/AgentPromptBox";
+export type { AgentPromptBoxProps } from "./components/AgentPromptBox";
+export { ScopeAttachmentPanel } from "./components/ScopeAttachmentPanel";
+export type { ScopeAttachmentPanelProps } from "./components/ScopeAttachmentPanel";
+export { AgentStateBadge } from "./components/AgentStateBadge";
+export type { AgentStateBadgeProps } from "./components/AgentStateBadge";
+export { AgentThinkingPanel } from "./components/AgentThinkingPanel";
+export type { AgentThinkingPanelProps } from "./components/AgentThinkingPanel";
+export { AgentThinkingChain } from "./components/AgentThinkingChain";
+export type { AgentThinkingChainProps } from "./components/AgentThinkingChain";
+export { AgentTraceViewer } from "./components/AgentTraceViewer";
+export type { AgentTraceViewerProps } from "./components/AgentTraceViewer";
+export { AgentToolCallLog } from "./components/AgentToolCallLog";
+export type { AgentToolCallLogProps } from "./components/AgentToolCallLog";
+export { AgentApprovalGate } from "./components/AgentApprovalGate";
+export type { AgentApprovalGateProps } from "./components/AgentApprovalGate";
+export { AgentPlanPreview } from "./components/AgentPlanPreview";
+export type { AgentPlanPreviewProps } from "./components/AgentPlanPreview";
+export { AgentPlanDiff } from "./components/AgentPlanDiff";
+export type { AgentPlanDiffProps } from "./components/AgentPlanDiff";
+export { AgentMemoryPanel } from "./components/AgentMemoryPanel";
+export type { AgentMemoryPanelProps } from "./components/AgentMemoryPanel";
+export { AgentContextViewer } from "./components/AgentContextViewer";
+export type { AgentContextViewerProps } from "./components/AgentContextViewer";
+export { AgentRunControls } from "./components/AgentRunControls";
+export type { AgentRunControlsProps } from "./components/AgentRunControls";
+export { AgentSafetyPanel } from "./components/AgentSafetyPanel";
+export type { AgentSafetyPanelProps } from "./components/AgentSafetyPanel";
+export { AgentInterruptionPanel } from "./components/AgentInterruptionPanel";
+export type { AgentInterruptionPanelProps } from "./components/AgentInterruptionPanel";
+export { AgentHandoffPanel } from "./components/AgentHandoffPanel";
+export type { AgentHandoffPanelProps } from "./components/AgentHandoffPanel";
+export { AgentGeneratedArtifactPanel } from "./components/AgentGeneratedArtifactPanel";
+export type { AgentGeneratedArtifactPanelProps } from "./components/AgentGeneratedArtifactPanel";
+export { AppDomainAgentPanel } from "./components/AppDomainAgentPanel";
+export type { AppDomainAgentPanelProps } from "./components/AppDomainAgentPanel";
+
+export type {
+  AgentApprovalAction,
+  AgentCitation,
+  AgentComponentSurfaceProps,
+  AgentContextSource,
+  AgentDiffItem,
+  AgentGeneratedArtifact,
+  AgentHandoffTarget,
+  AgentMemoryEntry,
+  AgentMessage,
+  AgentPlan,
+  AgentPlanStep,
+  AgentRunState,
+  AgentSafetyCheck,
+  AgentScopeAttachment,
+  AgentStep,
+  AgentToolCall,
+  AgentTraceSpan,
+  ChatAgentRailAttachment
+} from "./types";
+
+export const AgentComponentNames = [
+  "LeftAgentRail",
+  "ChatAgentRail",
+  "AgentMessageList",
+  "AgentPromptBox",
+  "ScopeAttachmentPanel",
+  "AgentStateBadge",
+  "AgentThinkingPanel",
+  "AgentThinkingChain",
+  "AgentTraceViewer",
+  "AgentToolCallLog",
+  "AgentApprovalGate",
+  "AgentPlanPreview",
+  "AgentPlanDiff",
+  "AgentMemoryPanel",
+  "AgentContextViewer",
+  "AgentRunControls",
+  "AgentSafetyPanel",
+  "AgentInterruptionPanel",
+  "AgentHandoffPanel",
+  "AgentGeneratedArtifactPanel",
+  "AppDomainAgentPanel"
+] as const;
+export type AgentComponentName = (typeof AgentComponentNames)[number];