@echothink-ui/inbox 0.1.0

package/src/components/ThreadSummaryPanel.tsx

@@ -0,0 +1,107 @@
+import * as React from "react";
+import { Badge, Panel, Tag } from "@echothink-ui/core";
+import type { ThreadCitation } from "../types";
+
+export interface ThreadSummaryPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  summary?: {
+    text: React.ReactNode;
+    citations: ThreadCitation[];
+  };
+}
+
+export function ThreadSummaryPanel({
+  summary,
+  className,
+  ...props
+}: ThreadSummaryPanelProps) {
+  const citations = summary?.citations ?? [];
+  const citationCount = citations.length;
+
+  return (
+    <Panel
+      {...props}
+      className={`eth-inbox-thread-summary ${className ?? ""}`}
+      title="Thread summary"
+      subtitle="Agent-generated recap with source references."
+      data-eth-component="ThreadSummaryPanel"
+    >
+      {summary ? (
+        <div className="eth-inbox-thread-summary__content">
+          <div
+            className="eth-inbox-thread-summary__metadata"
+            role="group"
+            aria-label="Summary metadata"
+          >
+            <Badge severity="info">Agent generated</Badge>
+            <span>{formatCitationCount(citationCount)}</span>
+          </div>
+
+          <section className="eth-inbox-thread-summary__summary" aria-label="Generated summary">
+            <span className="eth-inbox-thread-summary__section-label">Summary</span>
+            <div className="eth-inbox-thread-summary__summary-body">{summary.text}</div>
+          </section>
+
+          {citations.length ? (
+            <section className="eth-inbox-thread-summary__sources" aria-label="Source citations">
+              <span className="eth-inbox-thread-summary__section-label">Source citations</span>
+              <ul className="eth-inbox-thread-summary__source-list">
+                {citations.map((citation) => (
+                  <li key={citation.id} className="eth-inbox-thread-summary__source-item">
+                    <CitationTag citation={citation} />
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ) : (
+            <div className="eth-inbox-thread-summary__no-sources" role="status">
+              No citations attached.
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="eth-inbox-thread-summary__empty" role="status">
+          <strong>No generated summary</strong>
+          <p>
+            Summaries and source citations appear here after the agent reviews the conversation.
+          </p>
+        </div>
+      )}
+    </Panel>
+  );
+}
+
+function CitationTag({ citation }: { citation: ThreadCitation }) {
+  const referenceLabel = citation.messageRef
+    ? `${citation.label}, message ${citation.messageRef}`
+    : citation.label;
+  const tag = (
+    <Tag
+      className="eth-inbox-thread-summary__source-token"
+      aria-label={referenceLabel}
+      title={referenceLabel}
+      data-message-ref={citation.messageRef}
+    >
+      {citation.label}
+    </Tag>
+  );
+
+  if (!citation.href) {
+    return (
+      <span className="eth-inbox-thread-summary__source-reference">{tag}</span>
+    );
+  }
+
+  return (
+    <a
+      className="eth-inbox-thread-summary__source-link"
+      href={citation.href}
+      aria-label={referenceLabel}
+    >
+      {tag}
+    </a>
+  );
+}
+
+function formatCitationCount(count: number) {
+  return `${count} ${count === 1 ? "citation" : "citations"}`;
+}

package/src/index.test.tsx

@@ -0,0 +1,276 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  MessageList,
+  MessageThread,
+  PriorityInboxView,
+  RecipientPicker,
+  ThreadSummaryPanel
+} from "./index";
+
+const thread = {
+  id: "q3-launch",
+  subject: "Q3 launch - final brief",
+  messages: [
+    {
+      id: "m0",
+      from: "Launch Ops",
+      to: ["Jane Doe", "you@echothink.example"],
+      date: "2026-05-26T16:00:00Z",
+      body: "Initial launch packet is ready for copy review."
+    },
+    {
+      id: "m1",
+      from: "Jane Doe",
+      to: ["you@echothink.example"],
+      date: "2026-05-27T10:42:00Z",
+      subject: "Q3 launch - final brief",
+      body: "Please review the attached campaign brief and approve the messaging direction.",
+      attachments: [{ id: "a1", name: "brief.pdf", size: 240_000, mimeType: "application/pdf" }]
+    },
+    {
+      id: "m2",
+      from: "you@echothink.example",
+      to: ["Jane Doe"],
+      date: "2026-05-27T11:05:00Z",
+      body: "Looks good - one small note on the headline. Will reply with redlines."
+    },
+    {
+      id: "m3",
+      from: "Jane Doe",
+      to: ["you@echothink.example"],
+      date: "2026-05-27T11:28:00Z",
+      body: "Thanks. Legal can start as soon as the final headline is approved."
+    }
+  ]
+};
+
+const threads = [
+  {
+    id: "t1",
+    subject: "Q3 launch - final brief",
+    preview: "Please review the attached campaign brief and approve the messaging direction.",
+    from: "Jane Doe",
+    receivedAt: "2026-05-27T10:42:00Z",
+    unread: true,
+    priority: "high" as const,
+    labels: ["q3-launch"],
+    status: "pending-approval" as const
+  },
+  {
+    id: "t2",
+    subject: "Customer feedback digest",
+    preview: "Weekly digest of customer feedback themes.",
+    from: "Support",
+    receivedAt: "2026-05-26T17:20:00Z"
+  }
+];
+
+describe("@echothink-ui/inbox MessageThread", () => {
+  it("renders summary, metadata, actions, and collapsed history without duplicating the thread subject", () => {
+    render(
+      <MessageThread
+        thread={thread}
+        summaryRef={<p>Jane needs approval on the launch brief before legal review.</p>}
+        status="pending-approval"
+        statusLabel="Awaiting approval"
+        actions={[{ id: "reply", label: "Reply", intent: "primary" }]}
+      />
+    );
+
+    expect(screen.getByRole("heading", { name: "Q3 launch - final brief" })).toBeTruthy();
+    expect(screen.getByText("Thread summary")).toBeTruthy();
+    expect(
+      screen.getByText("Jane needs approval on the launch brief before legal review.")
+    ).toBeTruthy();
+    expect(screen.getByText("4 messages")).toBeTruthy();
+    expect(screen.getByText("3 participants")).toBeTruthy();
+    expect(screen.getByText("1 attachment")).toBeTruthy();
+    expect(screen.getByText("Awaiting approval")).toBeTruthy();
+    expect(screen.getByText("1 older message")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Reply" })).toBeTruthy();
+    expect(screen.getAllByText("Q3 launch - final brief")).toHaveLength(1);
+  });
+
+  it("wires attachment preview actions from the thread into rendered messages", () => {
+    const onPreviewAttachment = vi.fn();
+
+    render(<MessageThread thread={thread} onPreviewAttachment={onPreviewAttachment} />);
+
+    fireEvent.click(screen.getByLabelText("Preview brief.pdf"));
+
+    expect(onPreviewAttachment).toHaveBeenCalledWith(thread.messages[1].attachments![0]);
+  });
+});
+
+describe("@echothink-ui/inbox MessageList", () => {
+  it("renders accessible thread options with selected, unread, and status states", () => {
+    render(<MessageList threads={threads} selectedThreadId="t1" />);
+
+    const selected = screen.getByRole("option", {
+      name: /Unread, From Jane Doe, Q3 launch - final brief/
+    });
+
+    expect(selected.getAttribute("aria-selected")).toBe("true");
+    expect(selected.getAttribute("aria-posinset")).toBe("1");
+    expect(selected.getAttribute("aria-setsize")).toBe("2");
+    expect(selected.className).toContain("eth-inbox-message-list__row--unread");
+    const receivedAt = selected.querySelector("time");
+
+    expect(screen.getByText("Pending Approval")).toBeTruthy();
+    expect(receivedAt?.textContent).toBeTruthy();
+    expect(receivedAt?.getAttribute("dateTime")).toBe("2026-05-27T10:42:00Z");
+  });
+
+  it("notifies consumers when a thread is selected", () => {
+    const onSelect = vi.fn();
+
+    render(<MessageList threads={threads} onSelect={onSelect} />);
+
+    fireEvent.click(screen.getByRole("option", { name: /Customer feedback digest/ }));
+
+    expect(onSelect).toHaveBeenCalledWith("t2");
+  });
+
+  it("shows a readable empty state when there are no threads", () => {
+    render(<MessageList threads={[]} />);
+
+    expect(screen.getByRole("status", { name: "No message threads" })).toBeTruthy();
+  });
+});
+
+describe("@echothink-ui/inbox ThreadSummaryPanel", () => {
+  it("renders generated summary metadata and source citations", () => {
+    render(
+      <ThreadSummaryPanel
+        summary={{
+          text: "Jane requested approval on the Q3 launch brief before legal review.",
+          citations: [
+            { id: "m1", label: "Original request", href: "#m1", messageRef: "m1" },
+            { id: "m2", label: "Your reply", messageRef: "m2" }
+          ]
+        }}
+      />
+    );
+
+    expect(screen.getByRole("heading", { name: "Thread summary" })).toBeTruthy();
+    expect(screen.getByText("Agent generated")).toBeTruthy();
+    expect(screen.getByText("2 citations")).toBeTruthy();
+    expect(screen.getByRole("region", { name: "Source citations" })).toBeTruthy();
+    expect(screen.getByRole("link", { name: "Original request, message m1" })).toBeTruthy();
+    expect(screen.getByLabelText("Your reply, message m2")).toBeTruthy();
+  });
+
+  it("shows an empty state when no summary has been generated", () => {
+    render(<ThreadSummaryPanel />);
+
+    expect(screen.getByRole("status")).toBeTruthy();
+    expect(screen.getByText("No generated summary")).toBeTruthy();
+  });
+});
+
+describe("@echothink-ui/inbox PriorityInboxView", () => {
+  it("renders labeled priority groups with counts, descriptions, and selected threads", () => {
+    render(
+      <PriorityInboxView
+        groups={[
+          {
+            id: "now",
+            title: "Needs response now",
+            description: "SLA breached or awaiting approval",
+            threads: threads.slice(0, 1)
+          },
+          {
+            id: "today",
+            title: "Respond today",
+            description: "Due before end of business",
+            threads: threads.slice(1)
+          }
+        ]}
+        selectedThreadId="t1"
+      />
+    );
+
+    expect(screen.getByRole("region", { name: "Needs response now" })).toBeTruthy();
+    expect(screen.getByText("SLA breached or awaiting approval")).toBeTruthy();
+    expect(screen.getByText("1 thread")).toBeTruthy();
+
+    const selected = screen.getByRole("option", {
+      name: /Unread, From Jane Doe, Q3 launch - final brief/
+    });
+
+    expect(selected.getAttribute("aria-selected")).toBe("true");
+  });
+
+  it("shows an empty state when there are no priority groups", () => {
+    render(<PriorityInboxView groups={[]} />);
+
+    expect(screen.getByRole("status", { name: "No priority threads" })).toBeTruthy();
+  });
+});
+
+describe("@echothink-ui/inbox RecipientPicker", () => {
+  const suggestions = [
+    { id: "jane", label: "Jane Doe", email: "jane@echothink.example" },
+    { id: "mark", label: "Mark K.", email: "mark@echothink.example" }
+  ];
+
+  it("renders selected recipients, manual entry, and accessible suggestions", () => {
+    render(
+      <RecipientPicker
+        value={["jane@echothink.example"]}
+        suggestions={suggestions}
+        defaultSuggestionsOpen
+      />
+    );
+
+    expect(screen.getByLabelText("Selected recipients")).toBeTruthy();
+    expect(screen.getByPlaceholderText("Search recipients")).toBeTruthy();
+    expect(screen.getByPlaceholderText("name@company.com")).toBeTruthy();
+    expect(screen.getByRole("listbox", { name: "Recipient suggestions" })).toBeTruthy();
+
+    const selected = screen.getByRole("option", {
+      name: /Jane Doe jane@echothink\.example/
+    });
+    const available = screen.getByRole("option", {
+      name: /Mark K\. mark@echothink\.example/
+    });
+
+    expect(selected.getAttribute("aria-selected")).toBe("true");
+    expect(available.getAttribute("aria-selected")).toBe("false");
+  });
+
+  it("adds manual and suggested recipients without duplicating selected values", () => {
+    const onChange = vi.fn();
+
+    render(
+      <RecipientPicker
+        value={["jane@echothink.example"]}
+        onChange={onChange}
+        suggestions={suggestions}
+        defaultSuggestionsOpen
+      />
+    );
+
+    fireEvent.change(screen.getByPlaceholderText("name@company.com"), {
+      target: { value: "ops@echothink.example" }
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Add recipient" }));
+    fireEvent.click(
+      screen.getByRole("option", { name: /Mark K\. mark@echothink\.example/ })
+    );
+    fireEvent.click(
+      screen.getByRole("option", { name: /Jane Doe jane@echothink\.example/ })
+    );
+
+    expect(onChange).toHaveBeenNthCalledWith(1, [
+      "jane@echothink.example",
+      "ops@echothink.example"
+    ]);
+    expect(onChange).toHaveBeenNthCalledWith(2, [
+      "jane@echothink.example",
+      "mark@echothink.example"
+    ]);
+    expect(onChange).toHaveBeenCalledTimes(2);
+  });
+});

package/src/index.tsx

@@ -0,0 +1,60 @@
+import "./styles.css";
+
+export * from "./types";
+export { InboxShell, type InboxShellProps } from "./components/InboxShell";
+export { MailboxFolderList, type MailboxFolderListProps } from "./components/MailboxFolderList";
+export { MessageList, type MessageListProps } from "./components/MessageList";
+export {
+  MessageThread,
+  type MessageThreadAction,
+  type MessageThreadProps
+} from "./components/MessageThread";
+export { MessageComposer, type MessageComposerProps } from "./components/MessageComposer";
+export { MessagePreview, type MessagePreviewProps } from "./components/MessagePreview";
+export { AttachmentList, type AttachmentListProps } from "./components/AttachmentList";
+export { AttachmentPreview, type AttachmentPreviewProps } from "./components/AttachmentPreview";
+export { RecipientPicker, type RecipientPickerProps } from "./components/RecipientPicker";
+export { LabelManager, type LabelManagerProps } from "./components/LabelManager";
+export { MessageSearch, type MessageSearchProps } from "./components/MessageSearch";
+export {
+  MessageFilterBar,
+  type MessageFilter,
+  type MessageFilterBarProps
+} from "./components/MessageFilterBar";
+export {
+  PriorityInboxView,
+  type PriorityInboxGroup,
+  type PriorityInboxViewProps
+} from "./components/PriorityInboxView";
+export {
+  EmailAutomationRulePanel,
+  type EmailAutomationRulePanelProps
+} from "./components/EmailAutomationRulePanel";
+export {
+  AgentDraftReviewPanel,
+  type AgentDraftReviewPanelProps,
+  type DraftEvidence
+} from "./components/AgentDraftReviewPanel";
+export { ApprovalToSendPanel, type ApprovalToSendPanelProps } from "./components/ApprovalToSendPanel";
+export { ThreadSummaryPanel, type ThreadSummaryPanelProps } from "./components/ThreadSummaryPanel";
+
+export const InboxComponentNames = [
+  "InboxShell",
+  "MailboxFolderList",
+  "MessageList",
+  "MessageThread",
+  "MessageComposer",
+  "MessagePreview",
+  "AttachmentList",
+  "AttachmentPreview",
+  "RecipientPicker",
+  "LabelManager",
+  "MessageSearch",
+  "MessageFilterBar",
+  "PriorityInboxView",
+  "EmailAutomationRulePanel",
+  "AgentDraftReviewPanel",
+  "ApprovalToSendPanel",
+  "ThreadSummaryPanel"
+] as const;
+export type InboxComponentName = (typeof InboxComponentNames)[number];