@tribe-nest/forge 3.31.0 → 3.35.0

package/src/ui/media/CallStage.tsx

@@ -23,8 +23,10 @@ import {
   useRemoteTrack,
   useRoomState,
   useVisibleProducers,
+  type LocalSource,
 } from "@tribe-nest/media-client/react";
 
+import { useForgeT, type ForgeT } from "../../i18n";
 import { useThemeTokens, type ResolvedThemeTokens } from "../theme/ForgeThemeProvider";
 import { CallHelpHint } from "./CallHelpHint";
 import {
@@ -57,6 +59,17 @@ import {
  * screen that looks like somebody else's product on every site that installs
  * it.
  *
+ * ## Where the words come from
+ *
+ * `useForgeT()`, like every other Forge component, with keys under
+ * `forge.call_stage.*`. `callStatus` returns KEYS for the same reason it is
+ * pure: it has no locale. The one thing rendered verbatim is the server's own
+ * sentence (a refusal, a close reason), because a friendlier translation of a
+ * refusal is a lie about why you were refused. Admin renders this same
+ * component inside `<ForgeI18nProvider>` with the dashboard's locale; outside
+ * any provider the hook answers in English, so a site that has not mounted one
+ * still gets a working call.
+ *
  * ## What it does NOT decide
  *
  * Whether a control may be used. `useGrants()` says what the node minted this
@@ -85,6 +98,7 @@ export type CallStageProps = {
 
 export function CallStage({ onLeave, title, aspectRatio = 16 / 9 }: CallStageProps) {
   const tokens = useThemeTokens();
+  const t = useForgeT();
   const { connectionState, error, recovering, retry } = useMediaRoom();
   const state = useRoomState();
   const peers = useParticipants();
@@ -130,23 +144,46 @@ export function CallStage({ onLeave, title, aspectRatio = 16 / 9 }: CallStagePro
         backgroundColor: tokens.background,
         color: tokens.text,
         fontFamily: tokens.fontFamily,
+        /**
+         * Fill the surface rather than growing to fit the tiles.
+         *
+         * This laid out as a content-sized panel, which was right when a call
+         * was a modal and wrong the moment it became a full-screen page. With
+         * ONE participant `auto-fit` collapses the grid to a single full-width
+         * column, and a 16/9 tile at full width is taller than the viewport, so
+         * the controls were pushed off the bottom of the screen. Two people
+         * halved the width and hid the bug, which is why it only appeared to
+         * somebody sitting in a call alone.
+         *
+         * `100%` degrades to `auto` inside a parent with no height, so the
+         * embedded use (`BookingCallScreen`) is unaffected.
+         */
+        height: "100%",
+        minHeight: 0,
+        boxSizing: "border-box",
+        overflow: "hidden",
       }}
     >
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.75rem", flexWrap: "wrap" }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "0.75rem",
+          flexWrap: "wrap",
+        }}
+      >
         {title ? <div style={{ fontWeight: 600, fontFamily: tokens.headingFontFamily }}>{title}</div> : <span />}
         <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
-          {recording && <RecordingIndicator tokens={tokens} />}
-          <ConnectionStatus status={status} tokens={tokens} onRetry={retry} />
+          {recording && <RecordingIndicator tokens={tokens} t={t} />}
+          <ConnectionStatus status={status} tokens={tokens} t={t} onRetry={retry} />
         </div>
       </div>
 
       <div style={{ display: "flex", alignItems: "center", gap: "0.375rem", fontSize: "0.75rem", color: tokens.muted }}>
-        <span>
-          In this call: {callHeadCount(tiles)}
-        </span>
-        <CallHelpHint label="Why can I hear someone but not see them?">
-          A tile with a name and no picture means that person has their camera off, or the call is busy enough that only
-          the people currently speaking are sent in full. Both are normal, and their audio is unaffected.
+        <span>{t("forge.call_stage.head_count", { count: callHeadCount(tiles) })}</span>
+        <CallHelpHint label={t("forge.call_stage.help_hear_not_see_label")}>
+          {t("forge.call_stage.help_hear_not_see")}
         </CallHelpHint>
       </div>
 
@@ -155,11 +192,34 @@ export function CallStage({ onLeave, title, aspectRatio = 16 / 9 }: CallStagePro
           display: "grid",
           gridTemplateColumns: "repeat(auto-fit, minmax(12rem, 1fr))",
           gap: "0.75rem",
+          // The only part that may grow, and the only part that may scroll.
+          // `minHeight: 0` is what actually lets it shrink: a flex item defaults
+          // to `min-height: auto`, so without it the grid refuses to go below
+          // its content and pushes the controls out of the box instead.
+          flex: 1,
+          minHeight: 0,
+          overflowY: "auto",
+          /**
+           * Centred in the free space, not stacked at the top.
+           *
+           * `safe` is the load-bearing word: plain `center` centres the
+           * OVERFLOW too, so once there are more tiles than fit, the first row
+           * is pushed above the scroll origin and cannot be reached. `safe
+           * center` centres while there is room and falls back to start the
+           * moment there is not. An engine that does not understand it drops
+           * the declaration and starts at the top, which is the same fallback.
+           */
+          alignContent: "safe center",
+          // Horizontally centred too. A tile clamped by `maxHeight` shrinks its
+          // width to keep 16/9, so it no longer fills its track and would
+          // otherwise sit against the left edge. With two or more tiles each
+          // fills its track and this changes nothing.
+          justifyItems: "center",
         }}
       >
-        <LocalPreview tokens={tokens} aspectRatio={aspectRatio} />
+        <LocalPreview tokens={tokens} aspectRatio={aspectRatio} t={t} />
         {tiles.map((tile) => (
-          <ParticipantTile key={tile.key} tile={tile} tokens={tokens} aspectRatio={aspectRatio} />
+          <ParticipantTile key={tile.key} tile={tile} tokens={tokens} aspectRatio={aspectRatio} t={t} />
         ))}
       </div>
 
@@ -167,7 +227,7 @@ export function CallStage({ onLeave, title, aspectRatio = 16 / 9 }: CallStagePro
         <RemoteAudio key={producerId} producerId={producerId} />
       ))}
 
-      <CallControls tokens={tokens} onLeave={onLeave} />
+      <CallControls tokens={tokens} t={t} connected={connectionState === "connected"} onLeave={onLeave} />
     </div>
   );
 }
@@ -182,14 +242,18 @@ export function CallStage({ onLeave, title, aspectRatio = 16 / 9 }: CallStagePro
 function ConnectionStatus({
   status,
   tokens,
+  t,
   onRetry,
 }: {
   status: CallStatus;
   tokens: ResolvedThemeTokens;
+  t: ForgeT;
   onRetry: () => void;
 }) {
   const busy = status.tone === "connecting" || status.tone === "reconnecting";
   const alarming = status.tone === "failed";
+  // Our own copy is translated; the server's sentence is shown as it came.
+  const detail = status.detailKey ? t(status.detailKey) : status.detailText;
 
   return (
     <div
@@ -211,8 +275,8 @@ function ConnectionStatus({
           style={{ width: 8, height: 8, borderRadius: 9999, backgroundColor: tokens.primary, display: "inline-block" }}
         />
       )}
-      <span style={{ fontWeight: alarming ? 600 : 400 }}>{status.headline}</span>
-      {status.detail && <span style={{ color: tokens.muted }}>{status.detail}</span>}
+      <span style={{ fontWeight: alarming ? 600 : 400 }}>{t(status.headlineKey)}</span>
+      {detail && <span style={{ color: tokens.muted }}>{detail}</span>}
       {status.canRetry && (
         <button
           type="button"
@@ -232,7 +296,7 @@ function ConnectionStatus({
           }}
         >
           <RefreshCw width={12} height={12} aria-hidden="true" />
-          Try again
+          {t("forge.call_stage.retry")}
         </button>
       )}
     </div>
@@ -240,7 +304,7 @@ function ConnectionStatus({
 }
 
 /** Somebody is recording. A consent signal, so it is content and always shown. */
-function RecordingIndicator({ tokens }: { tokens: ResolvedThemeTokens }) {
+function RecordingIndicator({ tokens, t }: { tokens: ResolvedThemeTokens; t: ForgeT }) {
   return (
     <span
       style={{
@@ -259,7 +323,7 @@ function RecordingIndicator({ tokens }: { tokens: ResolvedThemeTokens }) {
         aria-hidden="true"
         style={{ width: 8, height: 8, borderRadius: 9999, backgroundColor: tokens.secondary, display: "inline-block" }}
       />
-      This call is being recorded
+      {t("forge.call_stage.recording")}
     </span>
   );
 }
@@ -268,6 +332,10 @@ const tileFrame = (tokens: ResolvedThemeTokens, aspectRatio: number, speaking: b
   position: "relative",
   overflow: "hidden",
   aspectRatio: String(aspectRatio),
+  // A lone tile spans the whole grid, and 16/9 of a wide surface is taller than
+  // the surface. Clamping crops rather than distorts, because the video inside
+  // is `object-fit: cover`.
+  maxHeight: "100%",
   borderRadius: tokens.cornerRadius,
   backgroundColor: tokens.surface,
   // The active speaker is shown by the FRAME rather than by re-ordering the
@@ -306,10 +374,12 @@ function ParticipantTile({
   tile,
   tokens,
   aspectRatio,
+  t,
 }: {
   tile: CallTile;
   tokens: ResolvedThemeTokens;
   aspectRatio: number;
+  t: ForgeT;
 }) {
   // `useRemoteTrack` takes a producer id unconditionally so the hook order is
   // the same for a tile with video and a tile without. An id that matches
@@ -327,21 +397,23 @@ function ParticipantTile({
       data-speaking={tile.isSpeaking ? "true" : "false"}
     >
       {showVideo ? (
-        <video
-          ref={attach}
-          autoPlay
-          playsInline
-          muted
-          style={{ width: "100%", height: "100%", objectFit: "cover" }}
-        />
+        <video ref={attach} autoPlay playsInline muted style={{ width: "100%", height: "100%", objectFit: "cover" }} />
       ) : (
-        <span style={{ fontSize: "0.9375rem", fontWeight: 600, color: tokens.text, padding: "0 0.75rem", textAlign: "center" }}>
+        <span
+          style={{
+            fontSize: "0.9375rem",
+            fontWeight: 600,
+            color: tokens.text,
+            padding: "0 0.75rem",
+            textAlign: "center",
+          }}
+        >
           {tile.name}
         </span>
       )}
       <span style={tileName(tokens)}>
         {tile.name}
-        {!tile.hasAudio && <span style={{ color: tokens.muted }}> (listening)</span>}
+        {!tile.hasAudio && <span style={{ color: tokens.muted }}> {t("forge.call_stage.listening")}</span>}
       </span>
     </div>
   );
@@ -361,13 +433,15 @@ function RemoteAudio({ producerId }: { producerId: string }) {
 }
 
 /** This viewer, as they are being sent. Muted, or it is a feedback loop. */
-function LocalPreview({ tokens, aspectRatio }: { tokens: ResolvedThemeTokens; aspectRatio: number }) {
+function LocalPreview({ tokens, aspectRatio, t }: { tokens: ResolvedThemeTokens; aspectRatio: number; t: ForgeT }) {
   const state = useRoomState();
   const publications = useLocalPublications();
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
   const camera = useMemo(() => publications.find((p) => p.source === "camera"), [publications]);
-  const track = camera?.track;
+  // A paused camera is still captured and still a publication, but nothing is
+  // being sent, so the preview shows the name the others are seeing.
+  const track = camera && !camera.paused ? camera.track : undefined;
 
   useEffect(() => {
     const element = videoRef.current;
@@ -381,7 +455,7 @@ function LocalPreview({ tokens, aspectRatio }: { tokens: ResolvedThemeTokens; as
     };
   }, [track]);
 
-  const name = state.identity ? "You" : "You (not connected yet)";
+  const name = state.identity ? t("forge.call_stage.you") : t("forge.call_stage.you_not_connected");
 
   return (
     <div style={tileFrame(tokens, aspectRatio, false)} data-testid="tile-local">
@@ -401,6 +475,13 @@ function LocalPreview({ tokens, aspectRatio }: { tokens: ResolvedThemeTokens; as
   );
 }
 
+/** One sentence per source a drop took away, keyed by the SDK's word for it. */
+const LOST_SOURCE_KEYS: Record<LocalSource, string> = {
+  microphone: "forge.call_stage.lost_microphone",
+  camera: "forge.call_stage.lost_camera",
+  screen: "forge.call_stage.lost_screen",
+};
+
 const controlButton = (tokens: ResolvedThemeTokens, active: boolean, busy = false): CSSProperties => ({
   display: "inline-flex",
   alignItems: "center",
@@ -423,31 +504,66 @@ const controlButton = (tokens: ResolvedThemeTokens, active: boolean, busy = fals
  * a listen-only seat is not offered a microphone it would be refused. That is a
  * rendering decision; the node refuses the publish itself either way.
  *
+ * ## Mute is a pause, not a republish
+ *
+ * The first press on Unmute or Start camera captures and publishes. Every press
+ * after that PAUSES or RESUMES the publication the room already holds, through
+ * `setPaused`. A toggle built as unpublish-then-publish starts every unmute
+ * with `getUserMedia`, and Safari puts a permission prompt in front of every
+ * call to it, so a person on an iPad was asked whether the site may use the
+ * microphone each time they spoke. Pausing keeps the capture open (the
+ * browser's device indicator stays on, which the camera hint says) and the way
+ * back asks nobody anything. Screen share is the exception: stopping it ends
+ * the capture, because sharing again has to go through the picker anyway.
+ *
  * ## Why every toggle is disabled while it is working
  *
  * Each of these is a read-then-write: it reads whether the source is live and
- * publishes or unpublishes accordingly. The flag it reads does not move until
- * the publish has resolved, and a publish starts with a permission prompt that
- * can sit on screen for seconds - so a button that looks untouched is a button
- * a person presses again, and two presses used to mean two producers from one
- * identity and everyone else hearing them doubled. `useLocalMedia` holds the
- * real lock (a synchronous ref, since both clicks land before React re-renders
- * anything); this is the part that says so on screen, because a control that
- * silently ignores you is only marginally better than one that misbehaves.
+ * publishes, pauses or resumes accordingly. The flag it reads does not move
+ * until the publish has resolved, and a publish starts with a permission
+ * prompt that can sit on screen for seconds - so a button that looks untouched
+ * is a button a person presses again, and two presses used to mean two
+ * producers from one identity and everyone else hearing them doubled.
+ * `useLocalMedia` holds the real lock (a synchronous ref, since both clicks
+ * land before React re-renders anything); this is the part that says so on
+ * screen, because a control that silently ignores you is only marginally
+ * better than one that misbehaves.
  */
-function CallControls({ tokens, onLeave }: { tokens: ResolvedThemeTokens; onLeave?: () => void }) {
+function CallControls({
+  tokens,
+  t,
+  connected,
+  onLeave,
+}: {
+  tokens: ResolvedThemeTokens;
+  t: ForgeT;
+  connected: boolean;
+  onLeave?: () => void;
+}) {
   const grants = useGrants();
   const { room } = useMediaRoom();
   const media = useLocalMedia();
 
+  // What the person is actually SENDING, which is what the button says.
+  const microphoneLive = media.isMicrophoneEnabled && !media.paused.microphone;
+  const cameraLive = media.isCameraEnabled && !media.paused.camera;
+
   // Plain handlers, deliberately not `useCallback`. `useLocalMedia()` returns a
   // fresh object every render, so memoising on it would rebuild the callback
   // every render anyway while looking as though it did not.
   const toggleMicrophone = () => {
-    void (media.isMicrophoneEnabled ? media.unpublish("microphone") : media.publishMicrophone());
+    if (!media.isMicrophoneEnabled) {
+      void media.publishMicrophone();
+      return;
+    }
+    void media.setPaused("microphone", microphoneLive);
   };
   const toggleCamera = () => {
-    void (media.isCameraEnabled ? media.unpublish("camera") : media.publishCamera());
+    if (!media.isCameraEnabled) {
+      void media.publishCamera();
+      return;
+    }
+    void media.setPaused("camera", cameraLive);
   };
   const toggleScreen = () => {
     void (media.screenSharing ? media.unpublish("screen") : media.publishScreen());
@@ -462,39 +578,57 @@ function CallControls({ tokens, onLeave }: { tokens: ResolvedThemeTokens; onLeav
   }, [room, onLeave]);
 
   return (
-    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "0.5rem" }}>
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: "0.5rem",
+        // Pinned to the bottom of the surface. The tile grid already claims the
+        // free space with `flex: 1`, so this holds even if that ever changes:
+        // the controls are the one thing that must never move off screen,
+        // because Leave is here.
+        marginTop: "auto",
+        flexShrink: 0,
+      }}
+    >
       {canPublishSource(grants, "microphone") && (
         <button
           type="button"
           onClick={toggleMicrophone}
           disabled={media.pending.microphone}
           aria-busy={media.pending.microphone}
-          style={controlButton(tokens, media.isMicrophoneEnabled, media.pending.microphone)}
+          style={controlButton(tokens, microphoneLive, media.pending.microphone)}
         >
-          {media.isMicrophoneEnabled ? (
+          {microphoneLive ? (
             <Mic width={16} height={16} aria-hidden="true" />
           ) : (
             <MicOff width={16} height={16} aria-hidden="true" />
           )}
-          {media.isMicrophoneEnabled ? "Mute" : "Unmute"}
+          {microphoneLive ? t("forge.call_stage.mute") : t("forge.call_stage.unmute")}
         </button>
       )}
 
       {canPublishSource(grants, "camera") && (
-        <button
-          type="button"
-          onClick={toggleCamera}
-          disabled={media.pending.camera}
-          aria-busy={media.pending.camera}
-          style={controlButton(tokens, media.isCameraEnabled, media.pending.camera)}
-        >
-          {media.isCameraEnabled ? (
-            <Video width={16} height={16} aria-hidden="true" />
-          ) : (
-            <VideoOff width={16} height={16} aria-hidden="true" />
-          )}
-          {media.isCameraEnabled ? "Stop camera" : "Start camera"}
-        </button>
+        <span style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem" }}>
+          <button
+            type="button"
+            onClick={toggleCamera}
+            disabled={media.pending.camera}
+            aria-busy={media.pending.camera}
+            style={controlButton(tokens, cameraLive, media.pending.camera)}
+          >
+            {cameraLive ? (
+              <Video width={16} height={16} aria-hidden="true" />
+            ) : (
+              <VideoOff width={16} height={16} aria-hidden="true" />
+            )}
+            {cameraLive ? t("forge.call_stage.camera_stop") : t("forge.call_stage.camera_start")}
+          </button>
+          <CallHelpHint label={t("forge.call_stage.help_camera_stop_label")}>
+            {t("forge.call_stage.help_camera_stop")}
+          </CallHelpHint>
+        </span>
       )}
 
       {canPublishSource(grants, "screen") && (
@@ -511,11 +645,10 @@ function CallControls({ tokens, onLeave }: { tokens: ResolvedThemeTokens; onLeav
             ) : (
               <MonitorUp width={16} height={16} aria-hidden="true" />
             )}
-            {media.screenSharing ? "Stop sharing" : "Share screen"}
+            {media.screenSharing ? t("forge.call_stage.screen_stop") : t("forge.call_stage.screen_start")}
           </button>
-          <CallHelpHint label="What does sharing my screen send?">
-            Whatever you pick in the browser prompt, live, to everyone in the call. Your camera keeps running alongside
-            it rather than being replaced, so people can still see you while you present.
+          <CallHelpHint label={t("forge.call_stage.help_screen_label")}>
+            {t("forge.call_stage.help_screen")}
           </CallHelpHint>
         </span>
       )}
@@ -526,7 +659,7 @@ function CallControls({ tokens, onLeave }: { tokens: ResolvedThemeTokens; onLeav
         style={{ ...controlButton(tokens, false), marginLeft: "auto", borderColor: tokens.secondary }}
       >
         <PhoneOff width={16} height={16} aria-hidden="true" />
-        Leave
+        {t("forge.call_stage.leave")}
       </button>
 
       {/* A denied permission prompt is something the person has to be told
@@ -537,6 +670,22 @@ function CallControls({ tokens, onLeave }: { tokens: ResolvedThemeTokens; onLeav
           {media.error.message}
         </span>
       )}
+
+      {/* State the person has to act on, so it is content and stays visible: a
+          drop stopped their capture (the light went out, on purpose), the room
+          is back, and nothing will turn the microphone on again but them. Shown
+          once the room is back rather than during the drop, when the status
+          line above is already saying "reconnecting". An alert rather than a
+          status: somebody who misses it is talking to nobody. */}
+      {connected && media.lostSources.length > 0 && (
+        <span role="alert" style={{ width: "100%", fontSize: "0.8125rem", color: tokens.text }}>
+          {media.lostSources.map((source) => (
+            <span key={source} style={{ display: "block" }}>
+              {t(LOST_SOURCE_KEYS[source])}
+            </span>
+          ))}
+        </span>
+      )}
     </div>
   );
 }

package/src/ui/media/CallWindowNotice.tsx

@@ -0,0 +1,94 @@
+import type { ReactNode } from "react";
+
+import { useForgeT } from "../../i18n";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+
+/**
+ * What a call page shows when there is no call to join yet, or any more.
+ *
+ * ## Why this is not the connection status
+ *
+ * A page that mounts `<CallStage>` regardless of the window tries to connect,
+ * fails, and reports the only thing it knows: "not yet connected". That is true
+ * and useless. Somebody who followed a link from their confirmation email is
+ * asking one of two questions, and the server already answered both in the same
+ * read that produced this page: WHEN can I come in, and HAVE I missed it.
+ *
+ * ## Why the times are rendered, not the raw window
+ *
+ * `opensAt` is the server's own boundary, the same one it enforces when it
+ * refuses a ticket, so what this prints is what the server will honour rather
+ * than a client-side guess. It is formatted in the reader's locale and, where
+ * the session carries one, the session's timezone: a coaching client in Lagos
+ * looking at a Berlin coach's session should be told the time they will
+ * actually be sitting at their desk.
+ *
+ * Deliberately NOT a countdown. A ticking clock invites somebody to sit and
+ * watch it, and the page is already re-fetched when they return.
+ */
+export type CallWindowNoticeProps = {
+  /** The earliest the server will mint a ticket. */
+  opensAt: string | Date;
+  /** After this it refuses new tickets; anyone already inside stays inside. */
+  closesAt: string | Date;
+  /** The call's own title, so the reader knows which session this is. */
+  title?: string;
+  /** IANA zone the session was sold in, when there is one. */
+  timeZone?: string | null;
+  /** Injected by specs; defaults to the clock. */
+  now?: Date;
+  /** A way back, rendered under the message when given. */
+  action?: ReactNode;
+};
+
+export function CallWindowNotice({ opensAt, closesAt, title, timeZone, now, action }: CallWindowNoticeProps) {
+  const t = useForgeT();
+  const tokens = useThemeTokens();
+
+  const opens = new Date(opensAt);
+  const closes = new Date(closesAt);
+  const at = now ?? new Date();
+
+  const when = opens.toLocaleString(undefined, {
+    weekday: "short",
+    day: "numeric",
+    month: "short",
+    hour: "numeric",
+    minute: "2-digit",
+    timeZone: timeZone ?? undefined,
+  });
+
+  // Three states, and the middle one is the reason this component exists: a
+  // call that is open but unreachable is the connection status's business, not
+  // this component's, so it renders nothing and lets `<CallStage>` speak.
+  const tooEarly = at < opens;
+  const tooLate = at > closes;
+  if (!tooEarly && !tooLate) return null;
+
+  return (
+    <div
+      style={{
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.5rem",
+        padding: "2rem 1.5rem",
+        textAlign: "center",
+        color: tokens.text,
+        backgroundColor: tokens.background,
+        borderRadius: tokens.cornerRadius,
+      }}
+    >
+      {title && <div style={{ fontWeight: 600, fontSize: "1.125rem" }}>{title}</div>}
+      <div style={{ fontSize: "1rem" }}>
+        {tooEarly ? t("forge.call_window.not_started") : t("forge.call_window.ended")}
+      </div>
+      <div style={{ fontSize: "0.875rem", opacity: 0.7, maxWidth: "32rem" }}>
+        {tooEarly ? t("forge.call_window.opens_at", { datetime: when }) : t("forge.call_window.ended_detail")}
+      </div>
+      {action && <div style={{ marginTop: "0.75rem" }}>{action}</div>}
+    </div>
+  );
+}