@tribe-nest/forge 3.59.0 → 3.61.0

package/src/ui/styled/members/_tests/MemberCallsCalendar.spec.tsx

@@ -1,5 +1,6 @@
 // @vitest-environment jsdom
-import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
+import { act, cleanup, fireEvent, render, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { ForgeThemeProvider } from "../../../theme/ForgeThemeProvider";
@@ -30,8 +31,33 @@ vi.mock("../../../headless/memberHome/useMemberCalls", () => ({
   }),
 }));
 
+/** The transcript reads go through the Forge client; stub it at the provider. */
+const clientGet = vi.fn();
+vi.mock("../../../../provider/ForgeProvider", () => ({
+  useForge: () => ({ client: { get: clientGet }, profileId: "profile-1" }),
+}));
+
 import { MemberCallsCalendar } from "../MemberCallsCalendar";
 
+const transcriptDetail = {
+  recordingId: "r1",
+  callId: "call-1",
+  title: "Weekly Q&A",
+  startsAt: "2026-03-10T17:00:00.000Z",
+  timezone: "UTC",
+  durationSeconds: 1800,
+  watchUrl: "https://cdn.test/rec.mp4?sig=fresh",
+  transcript: {
+    status: "ready",
+    language: "en",
+    segments: [
+      { name: "Ada", startMs: 0, endMs: 2_000, text: "Shall we ship Friday?" },
+      { name: "Grace", startMs: 65_000, endMs: 66_000, text: "Agreed." },
+    ],
+    summary: { title: "Launch", summary: "They agreed to ship.", decisions: ["Ship Friday"], actionItems: [] },
+  },
+};
+
 const call = (over: Partial<MyMembershipCall> = {}): MyMembershipCall => ({
   id: "call-1",
   title: "Weekly Q&A",
@@ -52,13 +78,17 @@ const call = (over: Partial<MyMembershipCall> = {}): MyMembershipCall => ({
 
 const mount = (navigate = vi.fn()) =>
   render(
-    <ForgeThemeProvider theme={{ colors: { text: "#111", background: "#fff", primary: "#6d28d9" }, cornerRadius: 8 }}>
-      <MemberCallsCalendar navigate={navigate} now={new Date("2026-03-10T12:00:00Z")} />
-    </ForgeThemeProvider>,
+    <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+      <ForgeThemeProvider theme={{ colors: { text: "#111", background: "#fff", primary: "#6d28d9" }, cornerRadius: 8 }}>
+        <MemberCallsCalendar navigate={navigate} now={new Date("2026-03-10T12:00:00Z")} />
+      </ForgeThemeProvider>
+    </QueryClientProvider>,
   );
 
 afterEach(() => {
   calls.length = 0;
+  clientGet.mockReset();
+  vi.restoreAllMocks();
   cleanup();
 });
 
@@ -95,11 +125,11 @@ describe("MemberCallsCalendar", () => {
     // The details the list used to show now live in the modal.
     expect(dialog.textContent).toContain("Bring your questions.");
     expect(dialog.textContent).toContain("All members");
-    // Recording, transcript and chat are the modal's remit; the two future
-    // ones are present as clearly-labelled placeholders.
-    expect(dialog.textContent).toContain("Transcript");
+    // Chat history is the one capability still to come, shown as a labelled
+    // placeholder. A call with no recording has no transcript to show.
     expect(dialog.textContent).toContain("Chat history");
     expect(dialog.textContent).toContain("Coming soon");
+    expect(dialog.textContent).not.toContain("Transcript");
 
     // The call is open, so Join is offered and routes to the call page.
     fireEvent.click(getByText("Join call"));
@@ -111,7 +141,13 @@ describe("MemberCallsCalendar", () => {
       call({
         isOpen: false,
         closesAt: "2026-03-09T20:00:00.000Z",
-        recording: { id: "r1", status: "ready", durationSeconds: 1800, watchUrl: "https://cdn.test/rec.mp4" },
+        recording: {
+          id: "r1",
+          status: "ready",
+          durationSeconds: 1800,
+          watchUrl: "https://cdn.test/rec.mp4",
+          transcript: null,
+        },
       }),
     );
     const { getByTitle, getByText, getByRole, queryByText } = mount();
@@ -124,6 +160,129 @@ describe("MemberCallsCalendar", () => {
     expect(dialog.textContent).toContain("30 min");
   });
 
+  const readyCall = () =>
+    call({
+      isOpen: false,
+      closesAt: "2026-03-09T20:00:00.000Z",
+      recording: {
+        id: "r1",
+        status: "ready",
+        durationSeconds: 1800,
+        watchUrl: "https://cdn.test/rec.mp4?sig=abc",
+        transcript: {
+          status: "ready",
+          summary: { title: "Launch", summary: "They agreed to ship.", decisions: ["Ship Friday"], actionItems: [] },
+        },
+      },
+    });
+
+  it("shows the SUMMARY in the modal and none of the lines: a long meeting does not belong there", () => {
+    calls.push(readyCall());
+    const { getByTitle, getByRole, getByText } = mount();
+    fireEvent.click(getByTitle("Weekly Q&A"));
+    const dialog = getByRole("dialog");
+
+    expect(dialog.textContent).toContain("They agreed to ship.");
+    expect(dialog.textContent).not.toContain("Shall we ship Friday?");
+    expect(getByText("Read transcript")).toBeTruthy();
+    expect(getByText("Download")).toBeTruthy();
+    expect(clientGet).not.toHaveBeenCalled();
+  });
+
+  it("opens the transcript full-screen beside the video, and a line seeks it", async () => {
+    clientGet.mockResolvedValue({ data: transcriptDetail });
+    vi.spyOn(HTMLMediaElement.prototype, "play").mockResolvedValue(undefined);
+    calls.push(readyCall());
+    const { getByTitle, getByText, findByTestId, getByRole } = mount();
+    fireEvent.click(getByTitle("Weekly Q&A"));
+
+    fireEvent.click(getByText("Read transcript"));
+
+    const video = (await findByTestId("member-transcript-video")) as HTMLVideoElement;
+    expect(clientGet).toHaveBeenCalledWith("/public/scheduled-calls/mine/recordings/r1/transcript", {
+      params: { profileId: "profile-1" },
+    });
+    expect(video.getAttribute("src")).toBe("https://cdn.test/rec.mp4?sig=fresh");
+    // Summary first; the lines one tab away.
+    expect(getByText("They agreed to ship.")).toBeTruthy();
+    fireEvent.click(getByRole("tab", { name: "Transcript" }));
+    fireEvent.click(getByText("Agreed."));
+    expect(video.currentTime).toBe(65);
+  });
+
+  it("narrows a long transcript to a search", async () => {
+    clientGet.mockResolvedValue({ data: transcriptDetail });
+    calls.push(readyCall());
+    const { getByTitle, getByText, findByTestId, getByRole, getByLabelText, queryByText } = mount();
+    fireEvent.click(getByTitle("Weekly Q&A"));
+    fireEvent.click(getByText("Read transcript"));
+    await findByTestId("member-transcript-video");
+    fireEvent.click(getByRole("tab", { name: "Transcript" }));
+
+    fireEvent.change(getByLabelText("Search the transcript"), { target: { value: "friday" } });
+
+    expect(getByRole("status").textContent).toBe("1 match");
+    expect(queryByText("Agreed.")).toBeNull();
+  });
+
+  it("recovers a lapsed video address by fetching a fresh one", async () => {
+    clientGet.mockResolvedValue({ data: transcriptDetail });
+    calls.push(readyCall());
+    const { getByTitle, getByText, findByTestId } = mount();
+    fireEvent.click(getByTitle("Weekly Q&A"));
+    fireEvent.click(getByText("Read transcript"));
+    const video = await findByTestId("member-transcript-video");
+    clientGet.mockResolvedValue({ data: { ...transcriptDetail, watchUrl: "https://cdn.test/rec.mp4?sig=again" } });
+
+    await act(async () => {
+      fireEvent.error(video);
+    });
+
+    await waitFor(() =>
+      expect(
+        (document.querySelector("[data-testid=member-transcript-video]") as HTMLVideoElement).getAttribute("src"),
+      ).toBe("https://cdn.test/rec.mp4?sig=again"),
+    );
+  });
+
+  it("downloads the transcript from the modal without opening it", async () => {
+    clientGet.mockResolvedValue({ data: transcriptDetail });
+    const createObjectURL = vi.fn(() => "blob:transcript");
+    Object.assign(URL, { createObjectURL, revokeObjectURL: vi.fn() });
+    const click = vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => undefined);
+    calls.push(readyCall());
+    const { getByTitle, getByText, queryByTestId } = mount();
+    fireEvent.click(getByTitle("Weekly Q&A"));
+
+    fireEvent.click(getByText("Download"));
+
+    await waitFor(() => expect(click).toHaveBeenCalledTimes(1));
+    expect(clientGet).toHaveBeenCalledWith("/public/scheduled-calls/mine/recordings/r1/transcript", {
+      params: { profileId: "profile-1" },
+    });
+    expect(queryByTestId("member-transcript-video")).toBeNull();
+  });
+
+  it("tells a member a transcript is being prepared, and nothing about why one might not exist", () => {
+    calls.push(
+      call({
+        isOpen: false,
+        closesAt: "2026-03-09T20:00:00.000Z",
+        recording: {
+          id: "r1",
+          status: "ready",
+          durationSeconds: 1800,
+          watchUrl: "https://cdn.test/rec.mp4",
+          transcript: { status: "processing" },
+        },
+      }),
+    );
+    const { getByTitle, getByRole } = mount();
+    fireEvent.click(getByTitle("Weekly Q&A"));
+
+    expect(getByRole("status").textContent).toContain("The transcript is being prepared");
+  });
+
   it("closes on the backdrop", () => {
     calls.push(call());
     const { getByTitle, getByRole, queryByRole } = mount();

package/src/ui/styled/members/callTranscriptText.ts

@@ -0,0 +1,67 @@
+import type { MemberCallTranscriptDetail, MemberCallTranscriptSegment } from "../../../data/queries/useMembershipCalls";
+
+/** `12:05`, or `1:02:05` past the hour. */
+export function formatOffset(ms: number): string {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor((total % 3600) / 60);
+  const seconds = String(total % 60).padStart(2, "0");
+  return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
+}
+
+/**
+ * The index of the line being spoken at `ms`: the last one that has started.
+ * Binary search, because a long meeting has thousands of lines and this runs
+ * on every `timeupdate`.
+ */
+export function activeSegmentIndex(segments: MemberCallTranscriptSegment[], ms: number): number {
+  let low = 0;
+  let high = segments.length - 1;
+  let found = -1;
+  while (low <= high) {
+    const mid = (low + high) >> 1;
+    if (segments[mid]!.startMs <= ms) {
+      found = mid;
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+  return found;
+}
+
+/** The whole transcript as a plain-text file: the call, the summary, every line. */
+export function transcriptDocument(detail: MemberCallTranscriptDetail): string {
+  const when = new Date(detail.startsAt).toLocaleString("en-US", {
+    dateStyle: "long",
+    timeStyle: "short",
+    timeZone: detail.timezone || undefined,
+  });
+  const parts = [detail.title, when, ""];
+  const summary = detail.transcript.summary;
+  if (summary) {
+    parts.push("SUMMARY", summary.summary, "");
+    if (summary.decisions.length) parts.push("DECISIONS", ...summary.decisions.map((d) => `- ${d}`), "");
+    if (summary.actionItems.length) parts.push("ACTION ITEMS", ...summary.actionItems.map((a) => `- ${a}`), "");
+  }
+  parts.push(
+    "TRANSCRIPT",
+    ...detail.transcript.segments.map((s) => `[${formatOffset(s.startMs)}] ${s.name}: ${s.text}`),
+  );
+  return parts.join("\n") + "\n";
+}
+
+/** Hand the browser a .txt of the transcript. */
+export function downloadTranscript(detail: MemberCallTranscriptDetail): void {
+  const slug = detail.title
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 60);
+  const url = URL.createObjectURL(new Blob([transcriptDocument(detail)], { type: "text/plain;charset=utf-8" }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `${slug || "call"}-${detail.startsAt.slice(0, 10)}-transcript.txt`;
+  link.click();
+  URL.revokeObjectURL(url);
+}

package/src/ui/styled/members/index.ts

@@ -6,3 +6,11 @@ export { MemberPostCard, type MemberPostCardProps } from "./MemberPostCard";
 export { PostCollectionsGrid, type PostCollectionsGridProps } from "./PostCollectionsGrid";
 export { PostCollectionDetail, type PostCollectionDetailProps } from "./PostCollectionDetail";
 export { MemberCallsCalendar, type MemberCallsCalendarProps } from "./MemberCallsCalendar";
+export {
+  CallRecordingWatchLink,
+  CallRecordingProcessing,
+  CallTranscriptPanel,
+  callRecordingWatchable,
+  type CallRecording,
+  type CallRecordingWatchLinkProps,
+} from "./CallRecordingActions";

package/src/ui/styled/portal/PortalAccountSection.tsx

@@ -0,0 +1,61 @@
+import { useForgeT } from "../../../i18n";
+import { AccountSection, type AccountSectionProps, type AccountTabKey } from "../AccountDashboard";
+import { PortalHeading } from "./shared";
+
+/** The portal sections that are the account dashboard's panels, by their dashboard key. */
+export type PortalAccountSectionKey =
+  | "bookings"
+  | "memberships"
+  | "courses"
+  | "films"
+  | "orders"
+  | "tickets"
+  | "waitlist"
+  | "saved"
+  | "settings"
+  | "notifications";
+
+const DASHBOARD_KEY: Record<PortalAccountSectionKey, AccountTabKey> = {
+  bookings: "bookings",
+  memberships: "membership",
+  courses: "courses",
+  films: "rentals",
+  orders: "orders",
+  tickets: "tickets",
+  waitlist: "waitlist",
+  saved: "saved",
+  settings: "account",
+  notifications: "notifications",
+};
+
+/**
+ * One of the account dashboard's panels as a portal page, under its own title.
+ *
+ * The panels are the dashboard's own components, so a fix to one is a fix to
+ * both. Only the title is the portal's.
+ */
+export function PortalAccountSection({
+  section,
+  ...rest
+}: Omit<AccountSectionProps, "section"> & { section: PortalAccountSectionKey }) {
+  const tr = useForgeT();
+  // Literal keys, so the translation spec can see every one of them.
+  const title: Record<PortalAccountSectionKey, string> = {
+    bookings: tr("forge.portal_account_section.bookings"),
+    memberships: tr("forge.portal_account_section.memberships"),
+    courses: tr("forge.portal_account_section.courses"),
+    films: tr("forge.portal_account_section.films"),
+    orders: tr("forge.portal_account_section.orders"),
+    tickets: tr("forge.portal_account_section.tickets"),
+    waitlist: tr("forge.portal_account_section.waitlist"),
+    saved: tr("forge.portal_account_section.saved"),
+    settings: tr("forge.portal_account_section.settings"),
+    notifications: tr("forge.portal_account_section.notifications"),
+  };
+  return (
+    <div data-testid={`portal-section-${section}`}>
+      <PortalHeading title={title[section]} />
+      <AccountSection section={DASHBOARD_KEY[section]} {...rest} />
+    </div>
+  );
+}

package/src/ui/styled/portal/PortalActivity.tsx

@@ -0,0 +1,167 @@
+import {
+  CalendarCheck,
+  CheckCircle2,
+  FileCheck2,
+  FileSignature,
+  MessageSquare,
+  Receipt,
+  ShoppingBag,
+  Stamp,
+  type LucideIcon,
+} from "lucide-react";
+import { useForgeLocale, useForgeT, type ForgeT } from "../../../i18n";
+import { internalPath } from "../../../runtime/pages";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { usePortalActivity, type PortalActivityItem, type PortalActivityKind } from "../../headless/portal/usePortal";
+import { Loading } from "../Loading";
+import { PortalEmpty, PortalHeading, PortalLink, PortalList, usePortalButtons } from "./shared";
+
+const ICONS: Record<PortalActivityKind, LucideIcon> = {
+  invoice_issued: Receipt,
+  invoice_paid: CheckCircle2,
+  document_sent: FileSignature,
+  document_signed: FileCheck2,
+  milestone_completed: CheckCircle2,
+  comment_added: MessageSquare,
+  approval_requested: Stamp,
+  approval_decided: Stamp,
+  order_placed: ShoppingBag,
+  booking_confirmed: CalendarCheck,
+  message_received: MessageSquare,
+};
+
+/** One sentence per event, written for the person reading it. */
+export function activitySentence(item: PortalActivityItem, tr: ForgeT): string {
+  const vars = { title: item.title };
+  switch (item.kind) {
+    case "invoice_issued":
+      return tr("forge.portal_activity.invoice_issued", vars);
+    case "invoice_paid":
+      return tr("forge.portal_activity.invoice_paid", vars);
+    case "document_sent":
+      return tr("forge.portal_activity.document_sent", vars);
+    case "document_signed":
+      return tr("forge.portal_activity.document_signed", vars);
+    case "milestone_completed":
+      return tr("forge.portal_activity.milestone_completed", vars);
+    case "comment_added":
+      return tr("forge.portal_activity.comment_added", vars);
+    case "approval_requested":
+      return tr("forge.portal_activity.approval_requested", vars);
+    case "approval_decided":
+      return item.detail === "changes_requested"
+        ? tr("forge.portal_activity.approval_changes", vars)
+        : tr("forge.portal_activity.approval_approved", vars);
+    case "order_placed":
+      return tr("forge.portal_activity.order_placed", vars);
+    case "booking_confirmed":
+      return tr("forge.portal_activity.booking_confirmed", vars);
+    case "message_received":
+      return tr("forge.portal_activity.message_received", vars);
+  }
+}
+
+/** Where an event leads: the thing it happened to. */
+export function activityHref(item: PortalActivityItem): string {
+  switch (item.kind) {
+    case "invoice_issued":
+    case "invoice_paid":
+      return internalPath("invoice/$invoiceId", { invoiceId: item.entityId });
+    case "document_sent":
+    case "document_signed":
+      return internalPath("account/documents");
+    case "order_placed":
+      return internalPath("account/orders");
+    case "booking_confirmed":
+      return internalPath("account/bookings");
+    case "message_received":
+      return internalPath("account/messages");
+    default:
+      return item.projectId
+        ? internalPath("account/projects/$projectId", { projectId: item.projectId })
+        : internalPath("account/projects");
+  }
+}
+
+/** "3 hours ago", "yesterday", in the site's language. */
+export function useRelativeTime() {
+  const locale = useForgeLocale();
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  return (iso: string) => {
+    const seconds = Math.round((Date.parse(iso) - Date.now()) / 1000);
+    const abs = Math.abs(seconds);
+    if (abs < 60) return rtf.format(0, "minute");
+    if (abs < 3600) return rtf.format(Math.round(seconds / 60), "minute");
+    if (abs < 86400) return rtf.format(Math.round(seconds / 3600), "hour");
+    if (abs < 86400 * 30) return rtf.format(Math.round(seconds / 86400), "day");
+    return new Date(iso).toLocaleDateString(locale, { day: "numeric", month: "short", year: "numeric" });
+  };
+}
+
+export function ActivityRows({ items }: { items: PortalActivityItem[] }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const ago = useRelativeTime();
+  return (
+    <PortalList>
+      {items.map((item) => {
+        const Icon = ICONS[item.kind];
+        return (
+          <li key={item.id} data-testid="portal-activity-item" style={{ borderBottom: `1px solid ${t.border}` }}>
+            <PortalLink
+              href={activityHref(item)}
+              className="fg:flex fg:items-start fg:gap-3 fg:py-3"
+              style={{ color: t.text, textDecoration: "none" }}
+            >
+              <Icon size={16} aria-hidden style={{ marginTop: 3, color: t.muted, flexShrink: 0 }} />
+              <span className="fg:min-w-0 fg:flex-1">
+                <span style={{ display: "block", fontSize: 15, lineHeight: 1.45 }}>{activitySentence(item, tr)}</span>
+                {item.projectName ? (
+                  <span style={{ display: "block", fontSize: 13, color: t.muted }}>{item.projectName}</span>
+                ) : null}
+              </span>
+              <time dateTime={item.occurredAt} style={{ fontSize: 13, color: t.muted, whiteSpace: "nowrap" }}>
+                {ago(item.occurredAt)}
+              </time>
+            </PortalLink>
+          </li>
+        );
+      })}
+    </PortalList>
+  );
+}
+
+/** The whole timeline (`/i/account/activity`). */
+export function PortalActivity() {
+  const tr = useForgeT();
+  const buttons = usePortalButtons();
+  const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = usePortalActivity(30);
+  const items = data?.pages.flatMap((p) => p.items) ?? [];
+
+  return (
+    <div data-testid="portal-activity">
+      <PortalHeading title={tr("forge.portal_activity.title")} />
+      {isLoading ? (
+        <Loading />
+      ) : items.length === 0 ? (
+        <PortalEmpty title={tr("forge.portal_activity.empty_title")} body={tr("forge.portal_activity.empty_body")} />
+      ) : (
+        <>
+          <ActivityRows items={items} />
+          {hasNextPage ? (
+            <div style={{ marginTop: 20 }}>
+              <button
+                type="button"
+                style={buttons.quiet}
+                disabled={isFetchingNextPage}
+                onClick={() => void fetchNextPage()}
+              >
+                {isFetchingNextPage ? tr("forge.portal_activity.loading") : tr("forge.portal_activity.load_more")}
+              </button>
+            </div>
+          ) : null}
+        </>
+      )}
+    </div>
+  );
+}