@echothink-ui/identity 0.1.0

package/src/components/PolicyRuleViewer.tsx

@@ -0,0 +1,78 @@
+import { Badge, Surface, type SurfaceComponentProps } from "@echothink-ui/core";
+import type { PolicyRule } from "./types";
+
+export interface PolicyRuleViewerProps extends Omit<SurfaceComponentProps, "children"> {
+  rule: PolicyRule;
+}
+
+function effectLabel(effect: PolicyRule["effect"]) {
+  return effect === "allow" ? "Allow" : "Deny";
+}
+
+function renderRuleValues(values: string[], label: string) {
+  if (!values.length) {
+    return <span className="eth-identity-policy-rule-viewer__empty">Not specified</span>;
+  }
+
+  return (
+    <ul className="eth-identity-policy-rule-viewer__values" aria-label={`${label} list`}>
+      {values.map((value) => (
+        <li key={value}>
+          <code>{value}</code>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export function PolicyRuleViewer({ rule, title, className, ...props }: PolicyRuleViewerProps) {
+  const effect = effectLabel(rule.effect);
+
+  return (
+    <Surface
+      {...props}
+      title={title ?? `Policy rule ${rule.id}`}
+      className={["eth-identity-policy-rule-viewer", className].filter(Boolean).join(" ")}
+      data-eth-component="PolicyRuleViewer"
+    >
+      <dl className="eth-identity-policy-rule-viewer__facet-list">
+        <div
+          className="eth-identity-policy-rule-viewer__facet eth-identity-policy-rule-viewer__facet--effect"
+        >
+          <dt>Effect</dt>
+          <dd>
+            <Badge
+              aria-label={`Rule effect: ${effect}`}
+              className="eth-identity-policy-rule-viewer__effect"
+              severity={rule.effect === "allow" ? "success" : "danger"}
+            >
+              {effect}
+            </Badge>
+          </dd>
+        </div>
+        <div>
+          <dt>Subjects</dt>
+          <dd>{renderRuleValues(rule.subjects, "Subjects")}</dd>
+        </div>
+        <div>
+          <dt>Actions</dt>
+          <dd>{renderRuleValues(rule.actions, "Actions")}</dd>
+        </div>
+        <div>
+          <dt>Resources</dt>
+          <dd>{renderRuleValues(rule.resources, "Resources")}</dd>
+        </div>
+        {rule.conditions ? (
+          <div>
+            <dt>Conditions</dt>
+            <dd>
+              <code className="eth-identity-policy-rule-viewer__condition">
+                {rule.conditions}
+              </code>
+            </dd>
+          </div>
+        ) : null}
+      </dl>
+    </Surface>
+  );
+}

package/src/components/RoleBadge.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { RoleBadge } from "./RoleBadge";
+
+describe("RoleBadge", () => {
+  it("renders role indicators with semantic attributes and caller props", () => {
+    render(
+      <RoleBadge
+        role="workspace_admin"
+        tier="admin"
+        id="workspace-admin-role"
+        aria-label="Privileged workspace administrator role"
+        className="custom-role"
+      />
+    );
+
+    const badge = screen
+      .getByLabelText("Privileged workspace administrator role")
+      .closest(".eth-identity-role-badge");
+
+    expect(badge?.getAttribute("id")).toBe("workspace-admin-role");
+    expect(badge?.getAttribute("data-eth-component")).toBe("RoleBadge");
+    expect(badge?.getAttribute("data-tier")).toBe("admin");
+    expect(badge?.className).toContain("custom-role");
+    expect(screen.getByText("workspace_admin").closest(".eth-badge")?.className).toContain(
+      "eth-badge--danger"
+    );
+  });
+
+  it("provides a default accessible label for the role", () => {
+    render(<RoleBadge role="read_only_viewer" tier="viewer" />);
+
+    expect(screen.getByLabelText("Role: read_only_viewer")).toBeTruthy();
+  });
+});

package/src/components/RoleBadge.tsx

@@ -0,0 +1,38 @@
+import type { HTMLAttributes } from "react";
+import { Badge, type EthSeverity } from "@echothink-ui/core";
+
+export interface RoleBadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children" | "role"> {
+  role: string;
+  tier?: "admin" | "editor" | "viewer" | "custom";
+}
+
+export function RoleBadge({
+  role,
+  tier = "custom",
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  title,
+  ...props
+}: RoleBadgeProps) {
+  return (
+    <span
+      {...props}
+      aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : `Role: ${role}`)}
+      aria-labelledby={ariaLabelledBy}
+      className={["eth-identity-role-badge", className].filter(Boolean).join(" ")}
+      data-eth-component="RoleBadge"
+      data-tier={tier}
+      title={title ?? role}
+    >
+      <Badge severity={severityForTier(tier)}>{role}</Badge>
+    </span>
+  );
+}
+
+function severityForTier(tier: NonNullable<RoleBadgeProps["tier"]>): EthSeverity {
+  if (tier === "admin") return "danger";
+  if (tier === "editor") return "warning";
+  if (tier === "viewer") return "info";
+  return "neutral";
+}

package/src/components/SessionStatus.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SessionStatus } from "./SessionStatus";
+
+describe("SessionStatus", () => {
+  it("renders a security summary with a semantic expiration time", () => {
+    render(
+      <SessionStatus
+        session={{
+          expiresAt: "2999-05-27T18:00:00Z",
+          mfaEnabled: true,
+          lastIp: "10.0.4.12"
+        }}
+      />
+    );
+
+    expect(screen.getByRole("heading", { name: "Session security" })).toBeTruthy();
+    expect(screen.getByText("Session active")).toBeTruthy();
+
+    const expiration = screen.getByLabelText("Session expiration");
+    expect(expiration.tagName).toBe("TIME");
+    expect(expiration.getAttribute("dateTime")).toBe("2999-05-27T18:00:00Z");
+    expect(screen.getByText("10.0.4.12").closest("code")).toBeTruthy();
+  });
+
+  it("surfaces disabled MFA and missing last IP as reviewable security state", () => {
+    render(
+      <SessionStatus
+        session={{
+          expiresAt: "2999-05-27T18:00:00Z",
+          mfaEnabled: false
+        }}
+      />
+    );
+
+    expect(screen.getByText("Review required")).toBeTruthy();
+    expect(screen.getByText("No second factor is enforced for this session.")).toBeTruthy();
+    expect(screen.getByText("Not recorded")).toBeTruthy();
+  });
+});

package/src/components/SessionStatus.tsx

@@ -0,0 +1,194 @@
+import {
+  Badge,
+  Surface,
+  type EthOperationalStatus,
+  type EthSeverity,
+  type SurfaceComponentProps
+} from "@echothink-ui/core";
+
+const EXPIRING_SOON_MS = 24 * 60 * 60 * 1000;
+
+export interface SessionStatusProps extends Omit<SurfaceComponentProps, "children"> {
+  session: {
+    expiresAt: string;
+    mfaEnabled: boolean;
+    lastIp?: string;
+  };
+}
+
+export function SessionStatus({
+  session,
+  title,
+  description,
+  className,
+  severity,
+  status,
+  ...props
+}: SessionStatusProps) {
+  const expires = new Date(session.expiresAt);
+  const hasValidExpiration = Number.isFinite(expires.valueOf());
+  const expiresAt = hasValidExpiration ? expires.getTime() : null;
+  const now = Date.now();
+  const expired = expiresAt !== null && expiresAt < now;
+  const expiringSoon = expiresAt !== null && !expired && expiresAt - now <= EXPIRING_SOON_MS;
+  const needsReview = !session.mfaEnabled || expiringSoon || !hasValidExpiration;
+  const tone: EthSeverity = expired ? "danger" : needsReview ? "warning" : "success";
+  const resolvedStatus: EthOperationalStatus =
+    status ?? (expired ? "stale" : needsReview ? "warning" : "active");
+  const sessionState = expired ? "Expired" : expiringSoon ? "Expiring soon" : "Active";
+  const summaryTitle = summaryTitleForSession({ expired, needsReview });
+  const summaryDetail = summaryForSession({
+    expired,
+    expiringSoon,
+    hasValidExpiration,
+    mfaEnabled: session.mfaEnabled
+  });
+  const summaryClassName = [
+    "eth-identity-session-status__summary",
+    `eth-identity-session-status__summary--${tone}`
+  ].join(" ");
+
+  return (
+    <Surface
+      {...props}
+      title={title === undefined ? "Session security" : title}
+      description={
+        description === undefined
+          ? "Authentication freshness and recent access signal."
+          : description
+      }
+      severity={severity}
+      status={resolvedStatus}
+      className={["eth-identity-session-status", className].filter(Boolean).join(" ")}
+      data-eth-component="SessionStatus"
+    >
+      <div className={summaryClassName}>
+        <span className="eth-identity-session-status__summary-mark" aria-hidden="true" />
+        <div className="eth-identity-session-status__summary-copy">
+          <strong>{summaryTitle}</strong>
+          <span>{summaryDetail}</span>
+        </div>
+      </div>
+      <dl aria-label="Session details">
+        <div>
+          <dt>Session</dt>
+          <dd className="eth-identity-session-status__value">
+            <span className="eth-identity-session-status__value-main">
+              <Badge severity={tone}>{sessionState}</Badge>
+            </span>
+            <span className="eth-identity-session-status__detail">
+              {expired ? "Credentials are no longer valid." : "Authenticated session lifecycle."}
+            </span>
+          </dd>
+        </div>
+        <div>
+          <dt>Expires</dt>
+          <dd className="eth-identity-session-status__value">
+            <span className="eth-identity-session-status__value-main">
+              {hasValidExpiration ? (
+                <time
+                  aria-label="Session expiration"
+                  dateTime={session.expiresAt}
+                  title={session.expiresAt}
+                >
+                  {formatSessionDate(expires)}
+                </time>
+              ) : (
+                <span>Unknown</span>
+              )}
+            </span>
+            <span className="eth-identity-session-status__detail">
+              {expirationDetail({ expired, expiringSoon, hasValidExpiration })}
+            </span>
+          </dd>
+        </div>
+        <div>
+          <dt>MFA</dt>
+          <dd className="eth-identity-session-status__value">
+            <span className="eth-identity-session-status__value-main">
+              <Badge severity={session.mfaEnabled ? "success" : "warning"}>
+                {session.mfaEnabled ? "Enabled" : "Disabled"}
+              </Badge>
+            </span>
+            <span className="eth-identity-session-status__detail">
+              {session.mfaEnabled
+                ? "Second factor challenge is enforced."
+                : "No second factor is enforced for this session."}
+            </span>
+          </dd>
+        </div>
+        <div>
+          <dt>Last IP</dt>
+          <dd className="eth-identity-session-status__value">
+            <span className="eth-identity-session-status__value-main">
+              {session.lastIp ? (
+                <code className="eth-identity-session-status__code">{session.lastIp}</code>
+              ) : (
+                <span className="eth-identity-session-status__muted">Not recorded</span>
+              )}
+            </span>
+            <span className="eth-identity-session-status__detail">
+              Latest network signal captured for the session.
+            </span>
+          </dd>
+        </div>
+      </dl>
+    </Surface>
+  );
+}
+
+function formatSessionDate(value: Date) {
+  return new Intl.DateTimeFormat(undefined, {
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    month: "short",
+    timeZoneName: "short",
+    year: "numeric"
+  }).format(value);
+}
+
+function summaryTitleForSession({
+  expired,
+  needsReview
+}: {
+  expired: boolean;
+  needsReview: boolean;
+}) {
+  if (expired) return "Session expired";
+  if (needsReview) return "Review required";
+  return "Session active";
+}
+
+function summaryForSession({
+  expired,
+  expiringSoon,
+  hasValidExpiration,
+  mfaEnabled
+}: {
+  expired: boolean;
+  expiringSoon: boolean;
+  hasValidExpiration: boolean;
+  mfaEnabled: boolean;
+}) {
+  if (!hasValidExpiration) return "Expiration could not be verified from the provided timestamp.";
+  if (expired) return "Access should be refreshed or revoked before more work continues.";
+  if (!mfaEnabled) return "MFA is disabled, so this session needs security review.";
+  if (expiringSoon) return "The session is valid but expires within the next 24 hours.";
+  return "MFA is enabled and the session remains within its validity window.";
+}
+
+function expirationDetail({
+  expired,
+  expiringSoon,
+  hasValidExpiration
+}: {
+  expired: boolean;
+  expiringSoon: boolean;
+  hasValidExpiration: boolean;
+}) {
+  if (!hasValidExpiration) return "Timestamp could not be parsed.";
+  if (expired) return "Past the identity provider expiry.";
+  if (expiringSoon) return "Expires within 24 hours.";
+  return "Valid until scheduled expiry.";
+}

package/src/components/TeamList.test.tsx

@@ -0,0 +1,48 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { TeamList } from "./TeamList";
+
+const teams = [
+  {
+    id: "marketing",
+    label: "Marketing",
+    memberCount: 12,
+    lead: { id: "jd", label: "Jane Doe" }
+  },
+  {
+    id: "legal",
+    label: "Legal",
+    memberCount: 4,
+    lead: { id: "pr", label: "Pat R." }
+  }
+];
+
+describe("TeamList", () => {
+  it("renders teams as an accessible list with contextual open actions", () => {
+    const onSelect = vi.fn();
+
+    render(<TeamList title="Workspace teams" teams={teams} onSelect={onSelect} />);
+
+    const list = screen.getByRole("list", { name: "Workspace teams" });
+    expect(list.querySelectorAll('[role="listitem"]')).toHaveLength(2);
+    expect(screen.getByText("12 members").closest(".eth-badge")).toBeTruthy();
+    expect(screen.getByText("Jane Doe")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Open Marketing team" }));
+
+    expect(onSelect).toHaveBeenCalledWith("marketing");
+  });
+
+  it("omits row actions when the list is read-only", () => {
+    render(<TeamList teams={teams} />);
+
+    expect(screen.queryByRole("button", { name: /open/i })).toBeNull();
+  });
+
+  it("renders an empty state for teams without results", () => {
+    render(<TeamList title="Workspace teams" teams={[]} />);
+
+    expect(screen.getByText("No teams available")).toBeTruthy();
+    expect(screen.getByText("Add teams to see membership summaries.")).toBeTruthy();
+  });
+});

package/src/components/TeamList.tsx

@@ -0,0 +1,98 @@
+import { Badge, Button, Surface, type SurfaceComponentProps } from "@echothink-ui/core";
+import type { IdentityRef } from "./types";
+
+export interface TeamListTeam {
+  id: string;
+  label: string;
+  memberCount: number;
+  lead?: IdentityRef;
+}
+
+export interface TeamListProps extends Omit<SurfaceComponentProps, "children" | "onSelect"> {
+  teams: TeamListTeam[];
+  onSelect?: (id: string) => void;
+}
+
+export function TeamList({ teams, onSelect, title, className, ...props }: TeamListProps) {
+  const listLabel = typeof title === "string" && title.trim() ? title : "Teams";
+  const totalMembers = teams.reduce((total, team) => total + team.memberCount, 0);
+
+  return (
+    <Surface
+      {...props}
+      title={title}
+      className={["eth-identity-team-list", className].filter(Boolean).join(" ")}
+      data-eth-component="TeamList"
+    >
+      {teams.length ? (
+        <>
+          <dl className="eth-identity-team-list__summary" aria-label="Team summary">
+            <div>
+              <dt>Teams</dt>
+              <dd>{teams.length}</dd>
+            </div>
+            <div>
+              <dt>Members</dt>
+              <dd>{totalMembers}</dd>
+            </div>
+          </dl>
+          <div className="eth-identity-team-list__items" role="list" aria-label={listLabel}>
+            {teams.map((team) => (
+              <article key={team.id} className="eth-identity-team-list__item" role="listitem">
+                <span className="eth-identity-team-list__avatar" aria-hidden="true">
+                  {initials(team.label)}
+                </span>
+                <div className="eth-identity-team-list__main">
+                  <div className="eth-identity-team-list__heading">
+                    <h3>{team.label}</h3>
+                    <Badge severity="neutral">{formatMemberCount(team.memberCount)}</Badge>
+                  </div>
+                  <dl
+                    className="eth-identity-team-list__meta"
+                    aria-label={`${team.label} membership summary`}
+                  >
+                    <div>
+                      <dt>Lead</dt>
+                      <dd>{team.lead?.label ?? "Unassigned"}</dd>
+                    </div>
+                  </dl>
+                </div>
+                {onSelect ? (
+                  <Button
+                    type="button"
+                    intent="secondary"
+                    density="compact"
+                    aria-label={`Open ${team.label} team`}
+                    onClick={() => onSelect(team.id)}
+                  >
+                    Open
+                  </Button>
+                ) : null}
+              </article>
+            ))}
+          </div>
+        </>
+      ) : (
+        <div className="eth-identity-team-list__empty" role="status">
+          <h3>No teams available</h3>
+          <p>Add teams to see membership summaries.</p>
+        </div>
+      )}
+    </Surface>
+  );
+}
+
+function formatMemberCount(count: number) {
+  return `${count} ${count === 1 ? "member" : "members"}`;
+}
+
+function initials(label: string) {
+  const value = label
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join("");
+
+  return value || "TM";
+}

package/src/components/UserPicker.test.tsx

@@ -0,0 +1,52 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { UserPicker } from "./UserPicker";
+
+const users = [
+  { id: "jd", label: "Jane Doe", email: "jane@echothink.example", kind: "user" as const },
+  { id: "mk", label: "Mark K.", email: "mark@echothink.example", kind: "user" as const }
+];
+
+describe("@echothink-ui/identity UserPicker", () => {
+  it("renders selected users with accessible search suggestions", () => {
+    render(<UserPicker value={["jd"]} suggestions={users} defaultOpen multiple />);
+
+    expect(screen.getByLabelText("Selected users")).toBeTruthy();
+    expect(screen.getByPlaceholderText("Search users")).toBeTruthy();
+    expect(screen.getByRole("listbox", { name: "User 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("filters suggestions and adds selected users", () => {
+    const onChange = vi.fn();
+    const onSearch = vi.fn();
+
+    render(
+      <UserPicker
+        value={["jd"]}
+        onChange={onChange}
+        onSearch={onSearch}
+        suggestions={users}
+        defaultOpen
+        multiple
+      />
+    );
+
+    fireEvent.change(screen.getByPlaceholderText("Search users"), {
+      target: { value: "mark" }
+    });
+    fireEvent.click(screen.getByRole("option", { name: /Mark K\. mark@echothink\.example/ }));
+
+    expect(onSearch).toHaveBeenCalledWith("mark");
+    expect(onChange).toHaveBeenCalledWith(["jd", "mk"]);
+  });
+});