@echothink-ui/inbox 0.1.0

package/src/components/LabelManager.tsx

@@ -0,0 +1,147 @@
+import * as React from "react";
+import { Button, FormField, Panel, TextInput } from "@echothink-ui/core";
+import { EditIcon, PlusIcon } from "@echothink-ui/icons";
+import type { MailLabel } from "../types";
+
+export interface LabelManagerProps extends React.HTMLAttributes<HTMLDivElement> {
+  labels?: MailLabel[];
+  onCreate?: (label: string) => void;
+  onRename?: (id: string, label: string) => void;
+  onDelete?: (id: string) => void;
+}
+
+export function LabelManager({
+  labels = [],
+  onCreate,
+  onRename,
+  onDelete,
+  className,
+  ...props
+}: LabelManagerProps) {
+  const [newLabel, setNewLabel] = React.useState("");
+  const [edits, setEdits] = React.useState<Record<string, string>>({});
+  const trackedLabels = labels.filter((label) => typeof label.count === "number");
+  const trackedMessageCount = trackedLabels.reduce((total, label) => total + (label.count ?? 0), 0);
+  const labelSummary = `${labels.length.toLocaleString()} ${labels.length === 1 ? "label" : "labels"}`;
+  const subtitle = labels.length
+    ? trackedLabels.length
+      ? `${labelSummary} · ${trackedMessageCount.toLocaleString()} tracked messages`
+      : `${labelSummary} configured for mailbox categories and automation tags.`
+    : "Create categories and automation tags for mailbox workflows.";
+
+  const submitNewLabel = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const nextLabel = newLabel.trim();
+    if (!nextLabel || !onCreate) return;
+
+    onCreate(nextLabel);
+    setNewLabel("");
+  };
+
+  return (
+    <Panel
+      {...props}
+      className={`eth-inbox-label-manager ${className ?? ""}`}
+      title="Labels"
+      subtitle={subtitle}
+      data-eth-component="LabelManager"
+    >
+      {labels.length ? (
+        <div className="eth-inbox-label-manager__list" role="table" aria-label="Managed labels">
+          <div className="eth-inbox-label-manager__table-head" role="row">
+            <span role="columnheader">Label</span>
+            <span role="columnheader">Messages</span>
+            <span role="columnheader">Actions</span>
+          </div>
+          {labels.map((label) => {
+            const draft = edits[label.id] ?? label.label;
+            const trimmedDraft = draft.trim();
+            const countLabel =
+              typeof label.count === "number"
+                ? `${label.count.toLocaleString()} ${label.count === 1 ? "message" : "messages"}`
+                : "Message count not tracked";
+
+            return (
+              <div key={label.id} className="eth-inbox-label-manager__row" role="row">
+                <div className="eth-inbox-label-manager__name-cell" role="cell">
+                  <TextInput
+                    aria-label={`Label name for ${label.label}`}
+                    density="compact"
+                    placeholder="Label name"
+                    value={draft}
+                    onChange={(event) =>
+                      setEdits((current) => ({
+                        ...current,
+                        [label.id]: event.currentTarget.value
+                      }))
+                    }
+                  />
+                </div>
+                <div
+                  className="eth-inbox-label-manager__count-cell"
+                  role="cell"
+                  aria-label={countLabel}
+                >
+                  {typeof label.count === "number" ? (
+                    <>
+                      <strong>{label.count.toLocaleString()}</strong>
+                      <span>{label.count === 1 ? "message" : "messages"}</span>
+                    </>
+                  ) : (
+                    <span className="eth-inbox-label-manager__count-muted">Not tracked</span>
+                  )}
+                </div>
+                <div className="eth-inbox-label-manager__actions" role="cell">
+                  <Button
+                    density="compact"
+                    disabled={!onRename || !trimmedDraft}
+                    icon={<EditIcon size={16} />}
+                    intent="secondary"
+                    onClick={() => {
+                      if (trimmedDraft) onRename?.(label.id, trimmedDraft);
+                    }}
+                  >
+                    Rename
+                  </Button>
+                  <Button
+                    density="compact"
+                    disabled={!onDelete}
+                    intent="danger"
+                    onClick={() => onDelete?.(label.id)}
+                  >
+                    Delete
+                  </Button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <p className="eth-inbox-label-manager__empty">
+          No labels configured. Create a label to route mailbox views and automation rules.
+        </p>
+      )}
+      <form className="eth-inbox-label-manager__create" onSubmit={submitNewLabel}>
+        <FormField
+          label="New label"
+          helperText="Use concise names for categories, filters, and automation rules."
+        >
+          <TextInput
+            density="compact"
+            placeholder="e.g. renewal-risk"
+            value={newLabel}
+            onChange={(event) => setNewLabel(event.currentTarget.value)}
+          />
+        </FormField>
+        <Button
+          disabled={!onCreate || !newLabel.trim()}
+          icon={<PlusIcon size={16} />}
+          type="submit"
+        >
+          Create
+        </Button>
+      </form>
+    </Panel>
+  );
+}

package/src/components/MailboxFolderList.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { Badge } from "@echothink-ui/core";
+import type { MailboxFolder } from "../types";
+
+export interface MailboxFolderListProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "onSelect"
+> {
+  folders?: MailboxFolder[];
+  activeFolderId?: string;
+  onSelect?: (id: string) => void;
+}
+
+export function MailboxFolderList({
+  folders = [],
+  activeFolderId,
+  onSelect,
+  className,
+  "aria-label": ariaLabel = "Mailbox folders",
+  ...props
+}: MailboxFolderListProps) {
+  return (
+    <nav
+      {...props}
+      className={["eth-inbox-folders", className].filter(Boolean).join(" ")}
+      data-eth-component="MailboxFolderList"
+      aria-label={ariaLabel}
+    >
+      <ul className="eth-inbox-folders__list">
+        {folders.map((folder) => {
+          const isActive = activeFolderId === folder.id;
+
+          return (
+            <li key={folder.id}>
+              <button
+                type="button"
+                className={[
+                  "eth-inbox-folders__item",
+                  isActive ? "eth-inbox-folders__item--active" : "",
+                  folder.smart ? "eth-inbox-folders__item--smart" : ""
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
+                aria-current={isActive ? "page" : undefined}
+                onClick={() => onSelect?.(folder.id)}
+                title={folder.label}
+              >
+                {folder.icon ? (
+                  <span className="eth-inbox-folders__icon" aria-hidden="true">
+                    {folder.icon}
+                  </span>
+                ) : null}
+                <span className="eth-inbox-folders__label">{folder.label}</span>
+                {typeof folder.count === "number" ? (
+                  <Badge className="eth-inbox-folders__count" aria-label={`${folder.count} items`}>
+                    {folder.count}
+                  </Badge>
+                ) : null}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

package/src/components/MessageComposer.tsx

@@ -0,0 +1,160 @@
+import * as React from "react";
+import { Button, FormField, Textarea, TextInput } from "@echothink-ui/core";
+import { DocumentIcon, MessageIcon } from "@echothink-ui/icons";
+import type { MessageDraft } from "../types";
+import { inputToList, listToInput } from "../utils";
+import { AttachmentList } from "./AttachmentList";
+
+export interface MessageComposerProps extends Omit<
+  React.FormHTMLAttributes<HTMLFormElement>,
+  "onChange" | "onSubmit"
+> {
+  draft?: MessageDraft;
+  onChange?: (draft: MessageDraft) => void;
+  onSend?: (draft: MessageDraft) => void;
+  onDiscard?: () => void;
+  onAttach?: () => void;
+  recipients?: React.ReactNode;
+  attachments?: React.ReactNode;
+  statusText?: React.ReactNode;
+}
+
+export function MessageComposer({
+  draft = {},
+  onChange,
+  onSend,
+  onDiscard,
+  onAttach,
+  recipients,
+  attachments,
+  statusText,
+  className,
+  ...props
+}: MessageComposerProps) {
+  const [localDraft, setLocalDraft] = React.useState<MessageDraft>(draft);
+
+  React.useEffect(() => setLocalDraft(draft), [draft]);
+
+  const update = (next: MessageDraft) => {
+    setLocalDraft(next);
+    onChange?.(next);
+  };
+
+  const draftAttachments = localDraft.attachments ?? [];
+  const hasAttachmentsRegion = Boolean(attachments || draftAttachments.length || onAttach);
+
+  return (
+    <form
+      {...props}
+      className={["eth-inbox-composer", className].filter(Boolean).join(" ")}
+      data-eth-component="MessageComposer"
+      onSubmit={(event) => {
+        event.preventDefault();
+        onSend?.(localDraft);
+      }}
+    >
+      <div className="eth-inbox-composer__fields">
+        {recipients ?? (
+          <div className="eth-inbox-composer__address-fields" role="group" aria-label="Recipients">
+            <FormField
+              className="eth-inbox-composer__field eth-inbox-composer__field--address"
+              label="To"
+            >
+              <TextInput
+                density="compact"
+                placeholder="name@company.com"
+                value={listToInput(localDraft.to)}
+                onChange={(event) =>
+                  update({ ...localDraft, to: inputToList(event.currentTarget.value) })
+                }
+              />
+            </FormField>
+            <FormField
+              className="eth-inbox-composer__field eth-inbox-composer__field--address"
+              label="CC"
+            >
+              <TextInput
+                density="compact"
+                placeholder="Optional"
+                value={listToInput(localDraft.cc)}
+                onChange={(event) =>
+                  update({ ...localDraft, cc: inputToList(event.currentTarget.value) })
+                }
+              />
+            </FormField>
+            <FormField
+              className="eth-inbox-composer__field eth-inbox-composer__field--address"
+              label="BCC"
+            >
+              <TextInput
+                density="compact"
+                placeholder="Optional"
+                value={listToInput(localDraft.bcc)}
+                onChange={(event) =>
+                  update({ ...localDraft, bcc: inputToList(event.currentTarget.value) })
+                }
+              />
+            </FormField>
+          </div>
+        )}
+        <FormField
+          className="eth-inbox-composer__field eth-inbox-composer__field--subject"
+          label="Subject"
+        >
+          <TextInput
+            density="compact"
+            value={localDraft.subject ?? ""}
+            onChange={(event) => update({ ...localDraft, subject: event.currentTarget.value })}
+          />
+        </FormField>
+        <FormField
+          className="eth-inbox-composer__field eth-inbox-composer__field--body"
+          label="Body"
+        >
+          <Textarea
+            value={localDraft.body ?? ""}
+            rows={10}
+            onChange={(event) => update({ ...localDraft, body: event.currentTarget.value })}
+          />
+        </FormField>
+      </div>
+
+      {hasAttachmentsRegion ? (
+        <section className="eth-inbox-composer__attachments" aria-label="Draft attachments">
+          <div className="eth-inbox-composer__attachments-header">
+            <span>Attachments</span>
+            {onAttach ? (
+              <Button
+                type="button"
+                intent="tertiary"
+                density="compact"
+                icon={<DocumentIcon size={16} />}
+                onClick={onAttach}
+              >
+                Attach file
+              </Button>
+            ) : null}
+          </div>
+          {attachments ??
+            (draftAttachments.length ? (
+              <AttachmentList attachments={draftAttachments} />
+            ) : (
+              <p className="eth-inbox-composer__empty-attachments">No attachments added</p>
+            ))}
+        </section>
+      ) : null}
+
+      <div className="eth-inbox-composer__footer">
+        {statusText ? <p className="eth-inbox-composer__status">{statusText}</p> : null}
+        <div className="eth-inbox-composer__actions">
+          <Button type="submit" icon={<MessageIcon size={16} />}>
+            Send
+          </Button>
+          <Button type="button" intent="tertiary" onClick={onDiscard}>
+            Discard
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}

package/src/components/MessageFilterBar.test.tsx

@@ -0,0 +1,34 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { MessageFilterBar, type MessageFilter } from "./MessageFilterBar";
+
+const filters = [
+  { id: "priority", label: "High priority", kind: "priority", active: true },
+  { id: "sender", label: "Jane Doe", kind: "sender" },
+  { id: "archived", label: "Archived", kind: "status", disabled: true }
+] satisfies MessageFilter[];
+
+describe("@echothink-ui/inbox MessageFilterBar", () => {
+  it("renders typed filter buttons with pressed state semantics", () => {
+    render(<MessageFilterBar filters={filters} />);
+
+    const priority = screen.getByRole("button", { name: "Priority: High priority" });
+    expect(priority.getAttribute("aria-pressed")).toBe("true");
+    expect(screen.getByText("Priority")).toBeTruthy();
+    expect(screen.getByText("High priority")).toBeTruthy();
+
+    const sender = screen.getByRole("button", { name: "Sender: Jane Doe" });
+    expect(sender.getAttribute("aria-pressed")).toBe("false");
+  });
+
+  it("toggles enabled filters and leaves disabled filters inert", () => {
+    const onToggle = vi.fn();
+    render(<MessageFilterBar filters={filters} onToggle={onToggle} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Sender: Jane Doe" }));
+    expect(onToggle).toHaveBeenCalledWith("sender", true);
+
+    fireEvent.click(screen.getByRole("button", { name: "Status: Archived" }));
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/MessageFilterBar.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+
+export interface MessageFilter {
+  id: string;
+  label: string;
+  active?: boolean;
+  disabled?: boolean;
+  kind?: "priority" | "sender" | "date" | "label" | "unread" | "status";
+}
+
+export interface MessageFilterBarProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onToggle"> {
+  filters?: MessageFilter[];
+  onToggle?: (id: string, active: boolean) => void;
+}
+
+const filterKindLabels: Record<NonNullable<MessageFilter["kind"]>, string> = {
+  priority: "Priority",
+  sender: "Sender",
+  date: "Date",
+  label: "Label",
+  unread: "Read",
+  status: "Status"
+};
+
+export function MessageFilterBar({
+  filters = [],
+  onToggle,
+  className,
+  "aria-label": ariaLabel = "Message filters",
+  ...props
+}: MessageFilterBarProps) {
+  return (
+    <div
+      {...props}
+      className={`eth-inbox-filter-bar ${className ?? ""}`}
+      data-eth-component="MessageFilterBar"
+      role="toolbar"
+      aria-label={ariaLabel}
+    >
+      {filters.map((filter) => {
+        const kindLabel = filter.kind ? filterKindLabels[filter.kind] : undefined;
+        const accessibleLabel = kindLabel ? `${kindLabel}: ${filter.label}` : filter.label;
+
+        return (
+          <button
+            key={filter.id}
+            type="button"
+            className={`eth-inbox-filter-bar__chip ${
+              filter.active ? "eth-inbox-filter-bar__chip--active" : ""
+            } ${filter.disabled ? "eth-inbox-filter-bar__chip--disabled" : ""}`}
+            aria-label={accessibleLabel}
+            aria-pressed={Boolean(filter.active)}
+            data-filter-kind={filter.kind}
+            disabled={filter.disabled}
+            onClick={() => onToggle?.(filter.id, !Boolean(filter.active))}
+          >
+            {kindLabel ? (
+              <span className="eth-inbox-filter-bar__kind" aria-hidden="true">
+                {kindLabel}
+              </span>
+            ) : null}
+            <span className="eth-inbox-filter-bar__label">{filter.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/MessageList.tsx

@@ -0,0 +1,101 @@
+import * as React from "react";
+import { Badge, StatusDot, Tag, statusLabel } from "@echothink-ui/core";
+import type { InboxThread } from "../types";
+import { formatDateTime, prioritySeverity } from "../utils";
+
+export interface MessageListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  threads?: InboxThread[];
+  selectedThreadId?: string;
+  onSelect?: (threadId: string) => void;
+}
+
+export function MessageList({
+  threads = [],
+  selectedThreadId,
+  onSelect,
+  className,
+  ...props
+}: MessageListProps) {
+  const hasThreads = threads.length > 0;
+
+  return (
+    <div
+      {...props}
+      className={`eth-inbox-message-list ${className ?? ""}`}
+      role="listbox"
+      aria-label="Message threads"
+      data-eth-component="MessageList"
+    >
+      {hasThreads ? (
+        threads.map((thread, index) => {
+          const receivedAtLabel = formatDateTime(thread.receivedAt);
+          const selected = selectedThreadId === thread.id;
+          const hasMeta = Boolean(thread.priority || thread.labels?.length || thread.status);
+
+          return (
+            <button
+              key={thread.id}
+              type="button"
+              role="option"
+              aria-label={[
+                thread.unread ? "Unread" : "Read",
+                `From ${thread.from}`,
+                thread.subject,
+                `Received ${receivedAtLabel}`,
+                thread.priority ? `${thread.priority} priority` : null,
+                thread.status ? statusLabel(thread.status) : null
+              ]
+                .filter(Boolean)
+                .join(", ")}
+              aria-posinset={index + 1}
+              aria-selected={selected}
+              aria-setsize={threads.length}
+              className={`eth-inbox-message-list__row ${
+                thread.unread ? "eth-inbox-message-list__row--unread" : ""
+              }`}
+              onClick={() => onSelect?.(thread.id)}
+            >
+              <span className="eth-inbox-message-list__selection" aria-hidden="true" />
+              <span className="eth-inbox-message-list__content">
+                <span className="eth-inbox-message-list__header">
+                  <span className="eth-inbox-message-list__from-group">
+                    <span className="eth-inbox-message-list__unread" aria-hidden="true" />
+                    <span className="eth-inbox-message-list__from">{thread.from}</span>
+                  </span>
+                  <time className="eth-inbox-message-list__date" dateTime={thread.receivedAt}>
+                    {receivedAtLabel}
+                  </time>
+                </span>
+                <strong className="eth-inbox-message-list__subject">{thread.subject}</strong>
+                <span className="eth-inbox-message-list__preview">{thread.preview}</span>
+                {hasMeta ? (
+                  <span className="eth-inbox-message-list__meta">
+                    {thread.priority ? (
+                      <Badge severity={prioritySeverity(thread.priority)}>
+                        {thread.priority}
+                      </Badge>
+                    ) : null}
+                    {thread.labels?.map((label) => (
+                      <Tag key={label}>{label}</Tag>
+                    ))}
+                    {thread.status ? (
+                      <StatusDot status={thread.status} label={statusLabel(thread.status)} />
+                    ) : null}
+                  </span>
+                ) : null}
+              </span>
+            </button>
+          );
+        })
+      ) : (
+        <div
+          className="eth-inbox-message-list__empty"
+          role="status"
+          aria-label="No message threads"
+        >
+          No message threads
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/MessagePreview.test.tsx

@@ -0,0 +1,48 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { MessagePreview } from "./MessagePreview";
+import type { ThreadMessage } from "../types";
+
+const message: ThreadMessage = {
+  id: "m1",
+  from: "Jane Doe",
+  to: ["you@echothink.example"],
+  cc: ["launch-ops@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" }]
+};
+
+describe("@echothink-ui/inbox MessagePreview", () => {
+  it("renders the selected message as an article with structured routing metadata", () => {
+    render(<MessagePreview message={message} />);
+
+    expect(screen.getByRole("article", { name: "Q3 launch - final brief" })).toBeTruthy();
+    expect(screen.getByText("From")).toBeTruthy();
+    expect(screen.getByText("Jane Doe")).toBeTruthy();
+    expect(screen.getByText("To")).toBeTruthy();
+    expect(screen.getByText("you@echothink.example")).toBeTruthy();
+    expect(screen.getByText("Cc")).toBeTruthy();
+    expect(screen.getByText("launch-ops@echothink.example")).toBeTruthy();
+  });
+
+  it("wires attachment preview and download actions from the message pane", () => {
+    const onPreviewAttachment = vi.fn();
+    const onDownloadAttachment = vi.fn();
+
+    render(
+      <MessagePreview
+        message={message}
+        onPreviewAttachment={onPreviewAttachment}
+        onDownloadAttachment={onDownloadAttachment}
+      />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Preview brief.pdf" }));
+    fireEvent.click(screen.getByRole("button", { name: "Download brief.pdf" }));
+
+    expect(onPreviewAttachment).toHaveBeenCalledWith(message.attachments![0]);
+    expect(onDownloadAttachment).toHaveBeenCalledWith(message.attachments![0]);
+  });
+});