@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/styled/AiAgentWidget.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAiAgent } from "../headless/agent/useAiAgent";
@@ -24,6 +25,7 @@ export interface AiAgentWidgetProps {
  * behavior. For custom UI, use the `useAiAgent()` hook instead.
  */
 export function AiAgentWidget({ position = "bottom-right", accentColor, title, zIndex = 9999 }: AiAgentWidgetProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const { isEnabled, config, messages, sending, error, send } = useAiAgent();
   const [open, setOpen] = useState(false);
@@ -33,7 +35,7 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
   const accent = accentColor || theme.colors.primary;
   const onAccent = readableTextOn(accent);
   const side = position === "bottom-left" ? { left: 20 } : { right: 20 };
-  const heading = title || config?.displayName || "Assistant";
+  const heading = title || config?.displayName || t("forge.ai_agent_widget.default_title");
 
   useEffect(() => {
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
@@ -67,14 +69,16 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
         >
           <div style={{ background: accent, color: onAccent, padding: "12px 16px", fontWeight: 600, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
             <span>{heading}</span>
-            <button onClick={() => setOpen(false)} style={{ background: "transparent", border: "none", color: onAccent, cursor: "pointer", fontSize: 20, lineHeight: 1 }} aria-label="Close">
+            <button onClick={() => setOpen(false)} style={{ background: "transparent", border: "none", color: onAccent, cursor: "pointer", fontSize: 20, lineHeight: 1 }} aria-label={t("forge.ai_agent_widget.aria_close")}>
               ×
             </button>
           </div>
 
           <div ref={scrollRef} style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 10 }}>
             {messages.length === 0 && (
-              <div style={{ opacity: 0.7, fontSize: 14 }}>{config?.greeting || "Hi! Ask me anything."}</div>
+              <div style={{ opacity: 0.7, fontSize: 14 }}>
+                {config?.greeting || t("forge.ai_agent_widget.default_greeting")}
+              </div>
             )}
             {messages.map((m, i) => (
               <div
@@ -105,7 +109,7 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
               value={input}
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && submit()}
-              placeholder="Type a message…"
+              placeholder={t("forge.ai_agent_widget.input_placeholder")}
               disabled={sending}
               style={{
                 flex: 1,
@@ -123,7 +127,7 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
               disabled={sending || !input.trim()}
               style={{ background: accent, color: onAccent, border: "none", borderRadius: theme.cornerRadius, padding: "0 16px", cursor: "pointer", fontWeight: 600 }}
             >
-              Send
+              {t("forge.ai_agent_widget.send")}
             </button>
           </div>
         </div>
@@ -131,7 +135,7 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
 
       <button
         onClick={() => setOpen((o) => !o)}
-        aria-label="Open chat assistant"
+        aria-label={t("forge.ai_agent_widget.aria_open")}
         style={{
           width: 56,
           height: 56,

package/src/ui/styled/AudioPlayer.tsx

@@ -1,5 +1,6 @@
 import { SkipBack, SkipForward, Play, Pause, X } from "lucide-react";
 import { useAudioPlayer } from "../../contexts/AudioPlayerContext";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 
 function fmtTime(s: number): string {
@@ -26,6 +27,7 @@ export interface AudioPlayerProps {
  * playback and dismisses the bar.
  */
 export function AudioPlayer({ hideWhenEmpty = true, fixed = true }: AudioPlayerProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const a = useAudioPlayer();
 
@@ -64,19 +66,25 @@ export function AudioPlayer({ hideWhenEmpty = true, fixed = true }: AudioPlayerP
           style={{ width: 44, height: 44, borderRadius: theme.cornerRadius, objectFit: "cover", flexShrink: 0 }}
         />
       )}
-      <button onClick={a.playPrevious} style={ctrlBtn} aria-label="Previous">
+      <button onClick={a.playPrevious} style={ctrlBtn} aria-label={t("forge.audio_player.previous")}>
         <SkipBack size={18} />
       </button>
-      <button onClick={() => (a.isPlaying ? a.pause() : a.play())} style={ctrlBtn} aria-label={a.isPlaying ? "Pause" : "Play"}>
+      <button
+        onClick={() => (a.isPlaying ? a.pause() : a.play())}
+        style={ctrlBtn}
+        aria-label={a.isPlaying ? t("forge.audio_player.pause") : t("forge.audio_player.play")}
+      >
         {a.isPlaying ? <Pause size={20} /> : <Play size={20} />}
       </button>
-      <button onClick={a.playNext} style={ctrlBtn} aria-label="Next">
+      <button onClick={a.playNext} style={ctrlBtn} aria-label={t("forge.audio_player.next")}>
         <SkipForward size={18} />
       </button>
 
       <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ fontWeight: 600, fontSize: 14, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-          {a.currentTrack?.title ?? "Nothing playing"}
+        <div
+          style={{ fontWeight: 600, fontSize: 14, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+        >
+          {a.currentTrack?.title ?? t("forge.audio_player.nothing_playing")}
           {a.currentTrack?.artist ? ` · ${a.currentTrack.artist}` : ""}
         </div>
         <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, opacity: 0.8 }}>
@@ -93,7 +101,7 @@ export function AudioPlayer({ hideWhenEmpty = true, fixed = true }: AudioPlayerP
         </div>
       </div>
 
-      <button onClick={a.stop} style={{ ...ctrlBtn, opacity: 0.7 }} aria-label="Close player">
+      <button onClick={a.stop} style={{ ...ctrlBtn, opacity: 0.7 }} aria-label={t("forge.audio_player.aria_close")}>
         <X size={18} />
       </button>
     </div>

package/src/ui/styled/BlogCategory.tsx

@@ -1,5 +1,6 @@
 import { useBlogCategory, useBlogCategoryPosts } from "../../data/queries/useBlog";
 import type { BlogPost, BlogCategory as BlogCategoryModel } from "../../types/models";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
 
@@ -19,11 +20,12 @@ function excerpt(html: string, len: number) {
 /** Blog category page — grid of posts in a category. Built on `useBlogCategory` + `useBlogCategoryPosts`. */
 export function BlogCategory({ slug, blogPostHref = (s) => `/i/blog/${s}`, initialCategory }: BlogCategoryProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const { data: category, isLoading: catLoading } = useBlogCategory(slug, { initialData: initialCategory });
   const { data: posts, isLoading: postsLoading } = useBlogCategoryPosts(slug, { page: 1, limit: 12 });
 
   if (catLoading || postsLoading) return <Loading fullPage />;
-  if (!category) return <p>Category not found.</p>;
+  if (!category) return <p>{t("forge.blog_category.not_found")}</p>;
 
   const list = posts?.data ?? [];
 
@@ -72,7 +74,7 @@ export function BlogCategory({ slug, blogPostHref = (s) => `/i/blog/${s}`, initi
           })}
         </div>
       ) : (
-        <p style={{ opacity: 0.7 }}>No posts yet.</p>
+        <p style={{ opacity: 0.7 }}>{t("forge.blog_category.empty_title")}</p>
       )}
     </div>
   );

package/src/ui/styled/BlogComments.tsx

@@ -9,6 +9,7 @@ import {
   type BlogComment,
 } from "../../data/queries/useBlogComments";
 import { BotProtection, EMPTY_BOT_FIELDS, type BotFields } from "./BotProtection";
+import { useForgeT } from "../../i18n";
 
 export interface BlogCommentsProps {
   blogPostId: string;
@@ -31,7 +32,8 @@ function formatDate(iso: string): string {
  * (apps/client, site-starter, AI-code-built sites). Renders nothing when the
  * profile has comments disabled.
  */
-export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", signInHref, className, style }: BlogCommentsProps) {
+export function BlogComments({ blogPostId, pageSize = 10, title, signInHref, className, style }: BlogCommentsProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const { token } = useForge();
   const isSignedIn = !!token;
@@ -53,6 +55,7 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
     [commentsQuery.data],
   );
   const total = commentsQuery.data?.pages?.[0]?.total ?? 0;
+  const heading = title ?? t("forge.blog_comments.title");
 
   const muted = theme.colors.muted ?? `${theme.colors.text}99`;
   const border = theme.colors.border ?? `${theme.colors.primary}33`;
@@ -74,11 +77,11 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
     setError(null);
     const trimmed = content.trim();
     if (!trimmed) {
-      setError("Please write a comment.");
+      setError(t("forge.blog_comments.error_empty"));
       return;
     }
     if (!isSignedIn && (!name.trim() || !email.trim())) {
-      setError("Name and email are required.");
+      setError(t("forge.blog_comments.error_identity_required"));
       return;
     }
     try {
@@ -96,7 +99,7 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
       setBotResetKey((k) => k + 1);
     } catch (e) {
       const message =
-        (e as { response?: { data?: { message?: string } } })?.response?.data?.message ?? "Something went wrong. Please try again.";
+        (e as { response?: { data?: { message?: string } } })?.response?.data?.message ?? t("forge.blog_comments.error_generic");
       setError(message);
     }
   };
@@ -109,8 +112,7 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
       style={{ color: theme.colors.text, fontFamily: theme.fontFamily, textAlign: "left", ...style }}
     >
       <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16 }}>
-        {title}
-        {total > 0 ? ` (${total})` : ""}
+        {total > 0 ? t("forge.blog_comments.title_with_count", { title: heading, count: total }) : heading}
       </h2>
 
       {/* Form */}
@@ -118,33 +120,38 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
         <p style={{ color: muted, marginBottom: 24 }}>
           {signInHref ? (
             <a href={signInHref} style={{ color: theme.colors.primary }}>
-              Sign in
+              {t("forge.blog_comments.sign_in")}
             </a>
           ) : (
-            "Sign in"
+            t("forge.blog_comments.sign_in")
           )}{" "}
-          to leave a comment.
+          {t("forge.blog_comments.sign_in_suffix")}
         </p>
       ) : pendingNotice ? (
         <div
           style={{ padding: 12, borderRadius: theme.cornerRadius, background: `${theme.colors.primary}14`, marginBottom: 24 }}
         >
-          Thanks! Your comment is awaiting moderation.
+          {t("forge.blog_comments.pending_notice")}
           <button
             onClick={() => setPendingNotice(false)}
             style={{ marginLeft: 8, background: "none", border: "none", color: theme.colors.primary, cursor: "pointer" }}
           >
-            Write another
+            {t("forge.blog_comments.write_another")}
           </button>
         </div>
       ) : (
         <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 28 }}>
           {!isSignedIn && (
             <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
-              <input placeholder="Your name" value={name} onChange={(e) => setName(e.target.value)} style={{ ...inputStyle, flex: 1, minWidth: 160 }} />
+              <input
+                placeholder={t("forge.blog_comments.name_placeholder")}
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                style={{ ...inputStyle, flex: 1, minWidth: 160 }}
+              />
               <input
                 type="email"
-                placeholder="Email (not published)"
+                placeholder={t("forge.blog_comments.email_placeholder")}
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 style={{ ...inputStyle, flex: 1, minWidth: 160 }}
@@ -152,7 +159,7 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
             </div>
           )}
           <textarea
-            placeholder="Add a comment…"
+            placeholder={t("forge.blog_comments.comment_placeholder")}
             value={content}
             onChange={(e) => setContent(e.target.value)}
             rows={3}
@@ -175,7 +182,7 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
                 opacity: submit.isPending ? 0.7 : 1,
               }}
             >
-              {submit.isPending ? "Posting…" : "Post comment"}
+              {submit.isPending ? t("forge.blog_comments.submitting") : t("forge.blog_comments.submit")}
             </button>
           </div>
         </div>
@@ -183,15 +190,15 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
 
       {/* List */}
       {commentsQuery.isLoading ? (
-        <p style={{ color: muted }}>Loading comments…</p>
+        <p style={{ color: muted }}>{t("forge.blog_comments.loading")}</p>
       ) : comments.length === 0 ? (
-        <p style={{ color: muted }}>No comments yet. Be the first.</p>
+        <p style={{ color: muted }}>{t("forge.blog_comments.empty_title")}</p>
       ) : (
         <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
           {comments.map((c) => (
             <div key={c.id}>
               <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
-                <strong>{c.authorName || "Anonymous"}</strong>
+                <strong>{c.authorName || t("forge.blog_comments.anonymous")}</strong>
                 <span style={{ color: muted, fontSize: 13 }}>{formatDate(c.createdAt)}</span>
               </div>
               <p style={{ margin: "4px 0", whiteSpace: "pre-wrap" }}>{c.content}</p>
@@ -200,7 +207,7 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
                   {c.replies.map((r) => (
                     <div key={r.id}>
                       <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
-                        <strong style={{ color: theme.colors.primary }}>{r.authorName || "Author"}</strong>
+                        <strong style={{ color: theme.colors.primary }}>{r.authorName || t("forge.blog_comments.author")}</strong>
                         <span style={{ color: muted, fontSize: 13 }}>{formatDate(r.createdAt)}</span>
                       </div>
                       <p style={{ margin: "4px 0", whiteSpace: "pre-wrap" }}>{r.content}</p>
@@ -227,7 +234,7 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
               cursor: "pointer",
             }}
           >
-            {commentsQuery.isFetchingNextPage ? "Loading…" : "Load more comments"}
+            {commentsQuery.isFetchingNextPage ? t("forge.blog_comments.loading_more") : t("forge.blog_comments.load_more")}
           </button>
         </div>
       )}

package/src/ui/styled/BlogList.tsx

@@ -1,5 +1,6 @@
 import { useFeaturedBlogPost, useBlogPosts } from "../../data/queries/useBlog";
 import type { BlogPost } from "../../types/models";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
 
@@ -19,6 +20,7 @@ function excerpt(html: string, len: number) {
 
 /** Blog index — featured post + grid of remaining posts. Built on `useFeaturedBlogPost` + `useBlogPosts`. */
 export function BlogList({ blogPostHref = (slug) => `/i/blog/${slug}` }: BlogListProps = {}) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const { data: featured, isLoading: loadingFeatured } = useFeaturedBlogPost();
   const { data, isLoading: loadingPosts } = useBlogPosts({ page: 1, limit: 12 });
@@ -39,7 +41,7 @@ export function BlogList({ blogPostHref = (slug) => `/i/blog/${slug}` }: BlogLis
 
   return (
     <div style={{ maxWidth: 900, margin: "0 auto", color: theme.colors.text }}>
-      <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 24 }}>Blog</h1>
+      <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 24 }}>{t("forge.blog_list.title")}</h1>
 
       {featured && (
         <a href={blogPostHref(featured.slug)} style={{ ...card, marginBottom: 32 }}>
@@ -61,7 +63,7 @@ export function BlogList({ blogPostHref = (slug) => `/i/blog/${slug}` }: BlogLis
                   color: theme.colors.background,
                 }}
               >
-                Featured
+                {t("forge.blog_list.featured_badge")}
               </span>
               {featured.publishedAt && (
                 <span style={{ fontSize: 13, opacity: 0.6 }}>{formatDate(featured.publishedAt)}</span>
@@ -94,7 +96,7 @@ export function BlogList({ blogPostHref = (slug) => `/i/blog/${slug}` }: BlogLis
           })}
         </div>
       ) : (
-        !featured && <p style={{ opacity: 0.7 }}>No blog posts available yet.</p>
+        !featured && <p style={{ opacity: 0.7 }}>{t("forge.blog_list.empty_body")}</p>
       )}
     </div>
   );

package/src/ui/styled/BlogPost.tsx

@@ -3,6 +3,7 @@ import { useBlogPost } from "../../data/queries/useBlog";
 import { useAudioPlayer } from "../../contexts/AudioPlayerContext";
 import type { BlogPost as BlogPostModel } from "../../types/models";
 import { useForgeTheme, useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useForgeT } from "../../i18n";
 import { Loading } from "./Loading";
 // Baseline `.rich-text` content styles ship with Forge (WYSIWYG with the admin
 // editor) — no host-loaded stylesheet needed.
@@ -46,7 +47,8 @@ function AudioAttachmentBar({
   audio: BlogPostModel["media"][number];
   coverImage?: string;
 }) {
-  const t = useThemeTokens();
+  const tokens = useThemeTokens();
+  const t = useForgeT();
   const player = useAudioPlayer();
 
   const isCurrent = player.currentTrack?.id === post.id;
@@ -71,15 +73,15 @@ function AudioAttachmentBar({
         gap: 16,
         padding: 16,
         marginBottom: 24,
-        border: `1px solid ${t.border}`,
-        borderRadius: t.cornerRadius,
-        background: t.surface,
+        border: `1px solid ${tokens.border}`,
+        borderRadius: tokens.cornerRadius,
+        background: tokens.surface,
       }}
     >
       <button
         type="button"
         onClick={onClick}
-        aria-label={isPlaying ? "Pause" : "Play"}
+        aria-label={isPlaying ? t("forge.blog_post.pause") : t("forge.blog_post.play")}
         style={{
           display: "inline-flex",
           alignItems: "center",
@@ -89,12 +91,12 @@ function AudioAttachmentBar({
           border: "none",
           cursor: "pointer",
           fontWeight: 600,
-          background: t.primary,
-          color: t.textPrimary,
+          background: tokens.primary,
+          color: tokens.textPrimary,
         }}
       >
         {isPlaying ? <Pause size={18} /> : <Play size={18} />}
-        {isPlaying ? "Pause" : "Play"}
+        {isPlaying ? t("forge.blog_post.pause") : t("forge.blog_post.play")}
       </button>
       {duration && <span style={{ fontSize: 14, opacity: 0.6, fontVariantNumeric: "tabular-nums" }}>{duration}</span>}
     </div>
@@ -104,11 +106,12 @@ function AudioAttachmentBar({
 /** Blog post detail, resolved by slug. Built on `useBlogPost`. */
 export function BlogPost({ slug, blogHref = "/i/blog", initialPost }: BlogPostProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   // Detail is resolved by slug (the public API looks posts up by slug).
   const { data: post, isLoading } = useBlogPost(slug, { initialData: initialPost });
 
   if (isLoading) return <Loading fullPage />;
-  if (!post) return <p>Post not found.</p>;
+  if (!post) return <p>{t("forge.blog_post.not_found")}</p>;
 
   // Cover is the first image media — audio posts put the audio file first in
   // `media`, which must not be rendered as an <img>. `type` may be a bare kind
@@ -120,7 +123,7 @@ export function BlogPost({ slug, blogHref = "/i/blog", initialPost }: BlogPostPr
   return (
     <article style={{ maxWidth: 720, margin: "0 auto", color: theme.colors.text }}>
       <a href={blogHref} style={{ color: theme.colors.primary, fontSize: 14 }}>
-        ← Back to Blog
+        {t("forge.blog_post.back_to_blog")}
       </a>
 
       {cover && (
@@ -143,7 +146,7 @@ export function BlogPost({ slug, blogHref = "/i/blog", initialPost }: BlogPostPr
               color: theme.colors.background,
             }}
           >
-            Featured
+            {t("forge.blog_post.featured")}
           </span>
         )}
       </div>

package/src/ui/styled/BroadcastWatch.tsx

@@ -0,0 +1,107 @@
+import type { ReactNode } from "react";
+import { X } from "lucide-react";
+import { useForgeT } from "../../i18n";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { useBroadcastWatch } from "../headless/broadcast/useBroadcastWatch";
+import { Loading } from "./Loading";
+import { BroadcastPassValidation } from "./broadcast/BroadcastPassValidation";
+import { BroadcastTicketPurchase } from "./broadcast/BroadcastTicketPurchase";
+import { BroadcastPlayer, type BroadcastPlayerRenderProps } from "./broadcast/BroadcastPlayer";
+import { EndedBroadcast } from "./broadcast/EndedBroadcast";
+
+export interface BroadcastWatchProps {
+  broadcastId: string;
+  /** Host-owned navigation. Falls back to a full page load. */
+  navigate?: (href: string) => void;
+  /** Where leaving lands. Default `/i/live`. */
+  livePath?: string;
+  /** How to play the HLS stream. See `BroadcastPlayer` for why this is a prop. */
+  renderPlayer?: (props: BroadcastPlayerRenderProps) => ReactNode;
+  /** Format a numeric amount for display (the "from ..." line on the paywall). */
+  formatAmount?: (amount: number) => string;
+  /** Stripe return URL for a PAID ticket purchase made from the paywall. */
+  finalisePath?: (slug: string, orderId: string) => string;
+  /** Host-owned navigation on FREE ticket completion. */
+  onComplete?: (info: { slug: string; orderId: string }) => void;
+}
+
+/**
+ * The watch page for one live broadcast.
+ *
+ * What is on screen is decided entirely by `useBroadcastWatch().screen`, which
+ * is computed by a pure function. The order those states are checked in is the
+ * whole safety property of this page: a broadcast that has ENDED shows the ended
+ * screen, a broadcast that is GATED shows the ticket box, and only a viewer past
+ * both gets a component that knows the playback URL.
+ */
+export function BroadcastWatch({
+  broadcastId,
+  navigate,
+  livePath = "/i/live",
+  renderPlayer,
+  formatAmount,
+  finalisePath,
+  onComplete,
+}: BroadcastWatchProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const watch = useBroadcastWatch(broadcastId);
+  const { broadcast, screen } = watch;
+
+  const leave = () => {
+    watch.leave();
+    if (navigate) navigate(livePath);
+    else if (typeof window !== "undefined") window.location.assign(livePath);
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        flex: 1,
+        color: theme.colors.text,
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      <div style={{ padding: "0 16px 8px" }}>
+        <button
+          type="button"
+          onClick={leave}
+          data-testid="broadcast-leave"
+          aria-label={t("forge.broadcast_watch.leave")}
+          style={{ background: "transparent", border: "none", padding: 0, cursor: "pointer" }}
+        >
+          <X size={28} color={theme.colors.primary} />
+        </button>
+      </div>
+
+      {screen.showLoading && <Loading fullPage />}
+
+      {screen.view === "error" && <div data-testid="broadcast-load-error">{t("forge.broadcast_watch.load_error")}</div>}
+
+      {screen.view === "ended" && broadcast && <EndedBroadcast broadcast={broadcast} />}
+
+      {screen.view === "player" && broadcast && watch.pass && (
+        <BroadcastPlayer broadcast={broadcast} broadcastPass={watch.pass} renderPlayer={renderPlayer} />
+      )}
+
+      {screen.view === "pass" && broadcast && (
+        <BroadcastPassValidation
+          broadcast={broadcast}
+          onValidate={(ticketCode) => watch.validate(ticketCode).catch(() => undefined)}
+          isValidating={watch.isValidating}
+          error={watch.error}
+          buyTickets={
+            <BroadcastTicketPurchase
+              broadcast={broadcast}
+              formatAmount={formatAmount}
+              finalisePath={finalisePath}
+              onComplete={onComplete}
+            />
+          }
+        />
+      )}
+    </div>
+  );
+}