@echothink-ui/activity 0.1.0

package/src/components/IncidentPanel.tsx

@@ -0,0 +1,82 @@
+import { Badge, Surface, type SurfaceComponentProps } from "@echothink-ui/core";
+import { severityToCore } from "./helpers";
+import type { ActivityIncident, ActivitySeverity } from "./types";
+
+export interface IncidentPanelProps extends Omit<SurfaceComponentProps, "children"> {
+  incidents: ActivityIncident[];
+}
+
+export function IncidentPanel({ incidents, title, className, ...props }: IncidentPanelProps) {
+  const hasIncidents = incidents.length > 0;
+
+  return (
+    <Surface
+      {...props}
+      title={title ?? "Incidents"}
+      className={["eth-activity-incident-panel", className].filter(Boolean).join(" ")}
+      data-eth-component="IncidentPanel"
+    >
+      {hasIncidents ? (
+        <div className="eth-activity-incident-panel__list" role="list">
+          {incidents.map((incident) => (
+            <article
+              key={incident.id}
+              className="eth-activity-incident-panel__incident"
+              data-severity={incident.severity ? severityToCore(incident.severity) : undefined}
+              role="listitem"
+              aria-label={incident.title}
+            >
+              <header className="eth-activity-incident-panel__incident-header">
+                <div className="eth-activity-incident-panel__summary">
+                  <h3>{incident.title}</h3>
+                  {incident.description ? <p>{incident.description}</p> : null}
+                </div>
+                {incident.severity ? (
+                  <Badge
+                    className="eth-activity-incident-panel__severity"
+                    severity={severityToCore(incident.severity)}
+                  >
+                    {formatIncidentLabel(incident.severity)}
+                  </Badge>
+                ) : null}
+              </header>
+              <dl className="eth-activity-incident-panel__metadata">
+                {incident.status ? (
+                  <div>
+                    <dt>Status</dt>
+                    <dd>
+                      <span
+                        className="eth-activity-incident-panel__status"
+                        data-status={incident.status}
+                      >
+                        <span aria-hidden="true" />
+                        {formatIncidentLabel(incident.status)}
+                      </span>
+                    </dd>
+                  </div>
+                ) : null}
+                {incident.startedAt ? (
+                  <div>
+                    <dt>Started</dt>
+                    <dd>
+                      <time>{incident.startedAt}</time>
+                    </dd>
+                  </div>
+                ) : null}
+              </dl>
+            </article>
+          ))}
+        </div>
+      ) : (
+        <p className="eth-activity-incident-panel__empty">No active incidents.</p>
+      )}
+    </Surface>
+  );
+}
+
+function formatIncidentLabel(value: NonNullable<ActivityIncident["status"]> | ActivitySeverity) {
+  return value
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}

package/src/components/MentionList.tsx

@@ -0,0 +1,85 @@
+import { Button, Surface, type SurfaceComponentProps } from "@echothink-ui/core";
+import type { Mention } from "./types";
+
+export interface MentionListProps extends Omit<SurfaceComponentProps, "children"> {
+  mentions: Mention[];
+  onOpen?: (messageRef: string) => void;
+}
+
+export function MentionList({
+  mentions,
+  onOpen,
+  title,
+  subtitle,
+  className,
+  ...props
+}: MentionListProps) {
+  const hasMentions = mentions.length > 0;
+  const countLabel = hasMentions
+    ? `${mentions.length} pending ${mentions.length === 1 ? "reference" : "references"}`
+    : "No pending references";
+
+  return (
+    <Surface
+      {...props}
+      title={title ?? "Mentions"}
+      subtitle={subtitle ?? countLabel}
+      className={["eth-activity-mention-list", className].filter(Boolean).join(" ")}
+      data-eth-component="MentionList"
+    >
+      {hasMentions ? (
+        <ul className="eth-activity-mention-list__items" aria-label="Mention assignments">
+          {mentions.map((mention) => (
+            <li key={mention.id} className="eth-activity-mention-list__item">
+              <span className="eth-activity-mention-list__avatar" aria-hidden="true">
+                {initialsForName(mention.from)}
+              </span>
+              <div className="eth-activity-mention-list__content">
+                <div className="eth-activity-mention-list__header">
+                  <strong className="eth-activity-mention-list__sender">{mention.from}</strong>
+                  <span className="eth-activity-mention-list__reference">{mention.messageRef}</span>
+                </div>
+                <p className="eth-activity-mention-list__excerpt">{mention.excerpt}</p>
+                <time
+                  className="eth-activity-mention-list__time"
+                  dateTime={dateTimeValue(mention.createdAt)}
+                >
+                  {mention.createdAt}
+                </time>
+              </div>
+              <Button
+                type="button"
+                intent="tertiary"
+                density="compact"
+                disabled={!onOpen}
+                aria-label={`Open mention ${mention.messageRef}`}
+                onClick={() => onOpen?.(mention.messageRef)}
+              >
+                Open
+              </Button>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="eth-activity-mention-list__empty" role="status">
+          No mentions assigned to you.
+        </p>
+      )}
+    </Surface>
+  );
+}
+
+function initialsForName(value: string) {
+  const parts = value.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+}
+
+function dateTimeValue(value: string) {
+  const trimmed = value.trim();
+  if (/^\d{2}:\d{2}(:\d{2})?$/.test(trimmed)) return trimmed;
+
+  const date = new Date(trimmed);
+  return Number.isFinite(date.valueOf()) ? date.toISOString() : undefined;
+}

package/src/components/NotificationCenter.tsx

@@ -0,0 +1,117 @@
+import { Button, Surface, type SurfaceComponentProps } from "@echothink-ui/core";
+import { NotificationItem as NotificationRow } from "./NotificationItem";
+import type { NotificationItemData } from "./types";
+
+export interface NotificationCenterProps extends Omit<SurfaceComponentProps, "children"> {
+  notifications: NotificationItemData[];
+  unreadCount?: number;
+  onMarkRead?: (id: string) => void;
+  onMarkAllRead?: () => void;
+  onDismiss?: (id: string) => void;
+}
+
+export function NotificationCenter({
+  notifications,
+  unreadCount,
+  onMarkRead,
+  onMarkAllRead,
+  onDismiss,
+  title,
+  className,
+  role,
+  "aria-label": ariaLabel,
+  ...props
+}: NotificationCenterProps) {
+  const groups = groupByDate(notifications);
+  const unreadTotal = unreadCount ?? notifications.filter((item) => !item.read).length;
+  const displayTitle = title ?? "Notifications";
+  const regionLabel =
+    ariaLabel ?? (typeof displayTitle === "string" ? displayTitle : "Notification center");
+
+  return (
+    <Surface
+      {...props}
+      title={displayTitle}
+      subtitle={`${unreadTotal} unread`}
+      className={["eth-activity-notification-center", className].filter(Boolean).join(" ")}
+      data-eth-component="NotificationCenter"
+      role={role ?? "region"}
+      aria-label={regionLabel}
+    >
+      {onMarkAllRead ? (
+        <div className="eth-activity-notification-center__toolbar">
+          <Button
+            type="button"
+            intent="secondary"
+            density="compact"
+            disabled={unreadTotal === 0}
+            onClick={onMarkAllRead}
+          >
+            Mark all read
+          </Button>
+        </div>
+      ) : null}
+      {notifications.length ? (
+        <div className="eth-activity-notification-center__groups">
+          {groups.map((group) => (
+            <section key={group.date} className="eth-activity-notification-center__group">
+              <h3>{formatGroupLabel(group.date)}</h3>
+              <ol className="eth-activity-notification-center__items">
+                {group.items.map((notification) => (
+                  <li key={notification.id} className="eth-activity-notification-center__row">
+                    <NotificationRow
+                      notification={notification}
+                      onRead={
+                        onMarkRead && !notification.read
+                          ? () => onMarkRead(notification.id)
+                          : undefined
+                      }
+                    />
+                    {onDismiss ? (
+                      <Button
+                        type="button"
+                        intent="ghost"
+                        density="compact"
+                        onClick={() => onDismiss(notification.id)}
+                      >
+                        Dismiss
+                      </Button>
+                    ) : null}
+                  </li>
+                ))}
+              </ol>
+            </section>
+          ))}
+        </div>
+      ) : (
+        <p className="eth-activity-notification-center__empty">No notifications.</p>
+      )}
+    </Surface>
+  );
+}
+
+function groupByDate(notifications: NotificationItemData[]) {
+  const groups = new Map<string, NotificationItemData[]>();
+  for (const notification of notifications) {
+    const key = groupKey(notification.createdAt);
+    groups.set(key, [...(groups.get(key) ?? []), notification]);
+  }
+  return Array.from(groups, ([date, items]) => ({ date, items }));
+}
+
+function groupKey(value: string) {
+  const date = new Date(value);
+  return Number.isFinite(date.valueOf()) ? date.toISOString().slice(0, 10) : "Recent";
+}
+
+function formatGroupLabel(value: string) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return value;
+
+  return new Intl.DateTimeFormat(undefined, {
+    day: "numeric",
+    month: "short",
+    timeZone: "UTC",
+    weekday: "short",
+    year: "numeric"
+  }).format(new Date(`${value}T00:00:00Z`));
+}

package/src/components/NotificationItem.tsx

@@ -0,0 +1,99 @@
+import { ActionGroup, Badge, Button, type SurfaceComponentProps } from "@echothink-ui/core";
+import { severityToCore } from "./helpers";
+import type { NotificationItemData } from "./types";
+
+export interface NotificationItemProps extends Omit<SurfaceComponentProps, "children"> {
+  notification: NotificationItemData;
+  onRead?: () => void;
+  onClick?: () => void;
+}
+
+export function NotificationItem({
+  notification,
+  onRead,
+  onClick,
+  className,
+  title: _title,
+  subtitle: _subtitle,
+  description: _description,
+  eyebrow: _eyebrow,
+  density: _density,
+  status: _status,
+  severity: _severity,
+  loading: _loading,
+  empty: _empty,
+  error: _error,
+  items: _items,
+  actions: _actions,
+  metadata: _metadata,
+  footer: _footer,
+  ...props
+}: NotificationItemProps) {
+  const severity = severityToCore(notification.severity);
+  const mainContent = (
+    <>
+      <Badge className="eth-activity-notification-item__severity" severity={severity}>
+        {notification.severity}
+      </Badge>
+      <span className="eth-activity-notification-item__content">
+        <strong className="eth-activity-notification-item__title">{notification.title}</strong>
+        {notification.body ? (
+          <span className="eth-activity-notification-item__body">{notification.body}</span>
+        ) : null}
+      </span>
+      <time
+        className="eth-activity-notification-item__time"
+        dateTime={dateTimeValue(notification.createdAt)}
+      >
+        {formatTimestamp(notification.createdAt)}
+      </time>
+    </>
+  );
+  const hasActions = Boolean((!notification.read && onRead) || notification.actions?.length);
+
+  return (
+    <article
+      {...props}
+      className={[
+        "eth-activity-notification-item",
+        notification.read ? "eth-activity-notification-item--read" : undefined,
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-eth-component="NotificationItem"
+      data-severity={severity}
+    >
+      {onClick ? (
+        <button type="button" className="eth-activity-notification-item__main" onClick={onClick}>
+          {mainContent}
+        </button>
+      ) : (
+        <div className="eth-activity-notification-item__main">{mainContent}</div>
+      )}
+      {hasActions ? (
+        <div className="eth-activity-notification-item__actions">
+          {!notification.read && onRead ? (
+            <Button type="button" intent="ghost" density="compact" onClick={onRead}>
+              Mark read
+            </Button>
+          ) : null}
+          <ActionGroup actions={notification.actions} />
+        </div>
+      ) : null}
+    </article>
+  );
+}
+
+function dateTimeValue(value: string) {
+  const date = new Date(value);
+  return Number.isFinite(date.valueOf()) ? date.toISOString() : undefined;
+}
+
+function formatTimestamp(value: string) {
+  const date = new Date(value);
+  if (!Number.isFinite(date.valueOf())) return value;
+
+  const iso = date.toISOString();
+  return `${iso.slice(11, 16)} UTC`;
+}

package/src/components/SubscriptionPreferences.test.tsx

@@ -0,0 +1,64 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SubscriptionPreferences } from "./SubscriptionPreferences";
+import type { SubscriptionCategory } from "./types";
+
+const categories = [
+  {
+    id: "approvals",
+    label: "Approvals",
+    description: "Reviewer requests and policy exceptions.",
+    channels: [
+      { id: "in-app", label: "In-app", enabled: true, description: "Activity center" },
+      { id: "email", label: "Email", enabled: true, description: "Reviewer digest" }
+    ]
+  },
+  {
+    id: "incidents",
+    label: "Incidents",
+    description: "Service interruptions and escalations.",
+    channels: [
+      {
+        id: "push",
+        label: "Push",
+        enabled: false,
+        description: "Managed by policy",
+        disabled: true
+      }
+    ]
+  }
+] satisfies SubscriptionCategory[];
+
+describe("SubscriptionPreferences", () => {
+  it("renders notification categories as accessible compact channel groups", () => {
+    const { container } = render(
+      <SubscriptionPreferences title="Notifications" categories={categories} />
+    );
+
+    expect(screen.getByRole("region", { name: "Notifications" })).toBeTruthy();
+    expect(screen.getByRole("group", { name: "Approvals" })).toBeTruthy();
+    expect(screen.getByText("Reviewer requests and policy exceptions.")).toBeTruthy();
+    expect(screen.getByLabelText("Approvals Email")).toBeTruthy();
+    expect(
+      container.querySelectorAll(".eth-activity-subscription-preferences__channel")
+    ).toHaveLength(3);
+    expect(
+      container.querySelector(".eth-activity-subscription-preferences__channel--disabled")
+    ).toBeTruthy();
+  });
+
+  it("calls onToggle with the category and channel identifiers", () => {
+    const onToggle = vi.fn();
+    render(<SubscriptionPreferences categories={categories} onToggle={onToggle} />);
+
+    fireEvent.click(screen.getByLabelText("Approvals Email"));
+
+    expect(onToggle).toHaveBeenCalledWith("approvals", "email", false);
+  });
+
+  it("shows an empty state when no subscription categories are configured", () => {
+    render(<SubscriptionPreferences categories={[]} />);
+
+    expect(screen.getByRole("status").textContent).toBe("No notification categories configured.");
+  });
+});

package/src/components/SubscriptionPreferences.tsx

@@ -0,0 +1,140 @@
+import * as React from "react";
+import { Surface, Toggle, type SurfaceComponentProps } from "@echothink-ui/core";
+import type { SubscriptionCategory, SubscriptionChannel } from "./types";
+
+export interface SubscriptionPreferencesProps
+  extends Omit<SurfaceComponentProps, "children" | "onToggle"> {
+  categories: SubscriptionCategory[];
+  onToggle?: (categoryId: string, channelId: string, enabled: boolean) => void;
+}
+
+export function SubscriptionPreferences({
+  categories,
+  onToggle,
+  title,
+  className,
+  role,
+  "aria-label": ariaLabel,
+  ...props
+}: SubscriptionPreferencesProps) {
+  const displayTitle = title ?? "Notification preferences";
+  const panelLabel = ariaLabel ?? (typeof displayTitle === "string" ? displayTitle : undefined);
+
+  return (
+    <Surface
+      {...props}
+      title={displayTitle}
+      role={role ?? (panelLabel ? "region" : undefined)}
+      aria-label={panelLabel}
+      className={["eth-activity-subscription-preferences", className].filter(Boolean).join(" ")}
+      data-eth-component="SubscriptionPreferences"
+    >
+      {categories.length ? (
+        <div className="eth-activity-subscription-preferences__categories">
+          {categories.map((category) => (
+            <SubscriptionCategoryGroup key={category.id} category={category} onToggle={onToggle} />
+          ))}
+        </div>
+      ) : (
+        <p className="eth-activity-subscription-preferences__empty" role="status">
+          No notification categories configured.
+        </p>
+      )}
+    </Surface>
+  );
+}
+
+function SubscriptionCategoryGroup({
+  category,
+  onToggle
+}: {
+  category: SubscriptionCategory;
+  onToggle?: SubscriptionPreferencesProps["onToggle"];
+}) {
+  const headingId = React.useId();
+  const descriptionId = category.description ? `${headingId}-description` : undefined;
+
+  return (
+    <section
+      className="eth-activity-subscription-preferences__category"
+      role="group"
+      aria-labelledby={headingId}
+      aria-describedby={descriptionId}
+    >
+      <header className="eth-activity-subscription-preferences__category-header">
+        <h3 id={headingId}>{category.label}</h3>
+        {category.description ? (
+          <p
+            id={descriptionId}
+            className="eth-activity-subscription-preferences__category-description"
+          >
+            {category.description}
+          </p>
+        ) : null}
+      </header>
+      {category.channels.length ? (
+        <div className="eth-activity-subscription-preferences__channels">
+          {category.channels.map((channel) => (
+            <SubscriptionChannelRow
+              key={channel.id}
+              category={category}
+              channel={channel}
+              onToggle={onToggle}
+            />
+          ))}
+        </div>
+      ) : (
+        <p className="eth-activity-subscription-preferences__channel-empty">
+          No channels configured.
+        </p>
+      )}
+    </section>
+  );
+}
+
+function SubscriptionChannelRow({
+  category,
+  channel,
+  onToggle
+}: {
+  category: SubscriptionCategory;
+  channel: SubscriptionChannel;
+  onToggle?: SubscriptionPreferencesProps["onToggle"];
+}) {
+  const accessibleLabel = `${category.label} ${channel.label}`;
+
+  return (
+    <div
+      className={[
+        "eth-activity-subscription-preferences__channel",
+        channel.disabled ? "eth-activity-subscription-preferences__channel--disabled" : undefined
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <div className="eth-activity-subscription-preferences__channel-copy">
+        <span className="eth-activity-subscription-preferences__channel-label">
+          {channel.label}
+        </span>
+        {channel.description ? (
+          <span className="eth-activity-subscription-preferences__channel-description">
+            {channel.description}
+          </span>
+        ) : null}
+      </div>
+      <Toggle
+        id={`eth-subscription-${safeId(category.id)}-${safeId(channel.id)}`}
+        label={accessibleLabel}
+        hideLabel
+        density="compact"
+        checked={channel.enabled}
+        disabled={channel.disabled}
+        onChange={(event) => onToggle?.(category.id, channel.id, event.currentTarget.checked)}
+      />
+    </div>
+  );
+}
+
+function safeId(value: string) {
+  return value.replace(/[^a-zA-Z0-9_-]+/g, "-") || "channel";
+}

package/src/components/SystemStatusBanner.tsx

@@ -0,0 +1,46 @@
+import type { EthAction, SurfaceComponentProps } from "@echothink-ui/core";
+import { AlertBanner } from "./AlertBanner";
+import type { ActivitySeverity } from "./types";
+
+export interface SystemStatusBannerProps
+  extends Omit<SurfaceComponentProps, "children" | "actions" | "status"> {
+  status: "operational" | "degraded" | "down" | "maintenance";
+  title?: string;
+  description?: string;
+  actions?: EthAction[];
+  onDismiss?: () => void;
+}
+
+export function SystemStatusBanner({
+  status,
+  title,
+  description,
+  actions,
+  onDismiss,
+  className
+}: SystemStatusBannerProps) {
+  return (
+    <AlertBanner
+      severity={severityForStatus(status)}
+      title={title ?? defaultTitleForStatus(status)}
+      description={description}
+      actions={actions}
+      onDismiss={onDismiss}
+      className={["eth-activity-system-status-banner", className].filter(Boolean).join(" ")}
+      data-eth-component="SystemStatusBanner"
+    />
+  );
+}
+
+function defaultTitleForStatus(status: SystemStatusBannerProps["status"]) {
+  if (status === "operational") return "System operational";
+  if (status === "degraded") return "System degraded";
+  if (status === "maintenance") return "Scheduled maintenance";
+  return "System unavailable";
+}
+
+function severityForStatus(status: SystemStatusBannerProps["status"]): ActivitySeverity {
+  if (status === "operational") return "success";
+  if (status === "degraded" || status === "maintenance") return "warning";
+  return "error";
+}

package/src/components/WatcherList.test.tsx

@@ -0,0 +1,50 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WatcherList } from "./WatcherList";
+import type { IdentityRef } from "./types";
+
+const watchers = [
+  {
+    id: "jd",
+    label: "Jane Doe",
+    email: "jane.doe@example.com",
+    role: "Project owner",
+    kind: "user"
+  },
+  { id: "marketing", label: "Marketing", role: "Launch channel", kind: "group" }
+] satisfies IdentityRef[];
+
+describe("WatcherList", () => {
+  it("renders watchers as an accessible activity surface with identity metadata", () => {
+    render(<WatcherList watchers={watchers} />);
+
+    expect(screen.getByRole("region", { name: "Watchers" })).toBeTruthy();
+    expect(screen.getByText("2 watchers notified on updates")).toBeTruthy();
+    expect(screen.getByRole("list", { name: "Watchers" })).toBeTruthy();
+    expect(screen.getByText("Jane Doe")).toBeTruthy();
+    expect(screen.getByText("Project owner / jane.doe@example.com")).toBeTruthy();
+    expect(screen.getByText("Group")).toBeTruthy();
+  });
+
+  it("exposes add and remove actions only when handlers are provided", () => {
+    const onAdd = vi.fn();
+    const onRemove = vi.fn();
+    render(<WatcherList watchers={watchers} onAdd={onAdd} onRemove={onRemove} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Add watcher" }));
+    fireEvent.click(
+      screen.getByRole("button", { name: "Remove Jane Doe from watchers" })
+    );
+
+    expect(onAdd).toHaveBeenCalledTimes(1);
+    expect(onRemove).toHaveBeenCalledWith("jd");
+  });
+
+  it("shows a compact empty state when no watchers are configured", () => {
+    render(<WatcherList watchers={[]} />);
+
+    expect(screen.getByText("No watchers configured")).toBeTruthy();
+    expect(screen.getByRole("status").textContent).toBe("No watchers have been added.");
+    expect(screen.queryByRole("button", { name: "Add watcher" })).toBeNull();
+  });
+});