> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Embody Changelog

> Release history for Embody – real-time AI avatars powered by Livepeer.

export const CustomCardTitle = ({icon, title, variant = "card", iconSize, style = {}, className = "", ...rest}) => {
  const variants = {
    card: {
      display: 'flex',
      alignItems: 'center',
      gap: "var(--lp-spacing-2)",
      marginBottom: "var(--lp-spacing-3)",
      color: 'var(--lp-color-text-primary)',
      fontSize: '1rem',
      fontWeight: 600
    },
    accordion: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: "var(--lp-spacing-2)"
    },
    tab: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '0.4rem',
      fontSize: '0.875rem'
    }
  };
  const sizes = {
    card: 20,
    accordion: 18,
    tab: 14
  };
  const size = iconSize || sizes[variant] || 20;
  const baseStyle = variants[variant] || variants.card;
  return variant === 'card' ? <div className={className} style={{
    ...baseStyle,
    ...style
  }} {...rest}>
      {typeof icon === 'string' ? <Icon icon={icon} size={size} color="var(--lp-color-accent)" /> : icon}
      {title}
    </div> : <span className={className} style={{
    ...baseStyle,
    ...style
  }} {...rest}>
      {typeof icon === 'string' ? <Icon icon={icon} size={size} color="var(--lp-color-accent)" /> : icon}
      {title}
    </span>;
};

export const Subtitle = ({style = {}, text, children, variant = 'default', fontSize = '', fontWeight = '', fontStyle = '', marginTop = '', marginBottom = '', color = '', className = '', ...rest}) => {
  const renderInlineCode = (value, keyPrefix) => {
    return value.split(/(`[^`]+`)/g).map((segment, index) => {
      if (segment.startsWith('`') && segment.endsWith('`')) {
        return <code key={`${keyPrefix}-code-${index}`}>{segment.slice(1, -1)}</code>;
      }
      return segment;
    });
  };
  const renderInlineMarkup = (value, keyPrefix = 'subtitle') => {
    if (typeof value !== 'string') {
      return value;
    }
    return value.split(/(\*\*[\s\S]+?\*\*)/g).map((segment, index) => {
      if (segment.startsWith('**') && segment.endsWith('**')) {
        const inner = segment.slice(2, -2);
        return <strong key={`${keyPrefix}-strong-${index}`}>
            {renderInlineCode(inner, `${keyPrefix}-strong-${index}`)}
          </strong>;
      }
      return renderInlineCode(segment, `${keyPrefix}-${index}`);
    });
  };
  const renderContent = (value, keyPrefix) => {
    if (Array.isArray(value)) {
      return value.map((item, index) => renderContent(item, `${keyPrefix}-${index}`));
    }
    return renderInlineMarkup(value, keyPrefix);
  };
  const variants = {
    default: {
      fontSize: '1rem',
      fontStyle: 'italic',
      color: 'var(--lp-color-accent)',
      marginBottom: 0
    },
    changelog: {
      fontSize: '0.8rem',
      fontStyle: 'normal',
      fontWeight: 700,
      color: 'var(--lp-color-text-primary)',
      marginBottom: 0
    }
  };
  const base = variants[variant] || variants.default;
  return <span className={className} style={{
    ...base,
    ...fontSize ? {
      fontSize
    } : {},
    ...fontWeight ? {
      fontWeight
    } : {},
    ...fontStyle ? {
      fontStyle
    } : {},
    ...marginTop ? {
      marginTop
    } : {},
    ...marginBottom ? {
      marginBottom
    } : {},
    ...color ? {
      color
    } : {},
    ...style
  }} {...rest}>
      {renderContent(text, 'text')}
      {renderContent(children, 'children')}
    </span>;
};

export const BorderedBox = ({children, variant = "default", padding = "var(--lp-spacing-4)", borderRadius = "var(--lp-spacing-px-8)", margin = "", accentBar = "", style = {}, className = "", ...rest}) => {
  const variants = {
    default: {
      border: "1px solid var(--lp-color-border-default)",
      backgroundColor: "var(--lp-color-bg-card)"
    },
    accent: {
      border: "1px solid var(--lp-color-accent)",
      backgroundColor: "var(--lp-color-bg-card)"
    },
    muted: {
      border: "1px solid var(--lp-color-border-default)",
      backgroundColor: "transparent"
    }
  };
  const accentBarColors = {
    accent: "var(--lp-color-accent)",
    positive: "var(--green-9)"
  };
  return <div data-docs-bordered-box="" data-accent-bar={accentBarColors[accentBar] ? "" : undefined} className={className} style={{
    ...variants[variant],
    padding: padding,
    borderRadius: borderRadius,
    ...margin ? {
      margin
    } : {},
    ...accentBarColors[accentBar] ? {
      position: "relative",
      '--accent-bar-color': accentBarColors[accentBar]
    } : {},
    ...style
  }} {...rest}>
      {children}
    </div>;
};

export const LazyLoad = ({children, height = "200px", offset = "200px", fadeDuration = 400, className = "", style = {}, ...rest}) => {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  const [ready, setReady] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setVisible(true);
        observer.disconnect();
      }
    }, {
      rootMargin: offset
    });
    observer.observe(el);
    return () => observer.disconnect();
  }, []);
  useEffect(() => {
    if (!visible) return;
    const frameId = requestAnimationFrame(() => {
      setReady(true);
    });
    return () => cancelAnimationFrame(frameId);
  }, [visible]);
  const placeholder = <div ref={ref} className={className} style={{
    minHeight: height,
    ...style
  }} {...rest} />;
  if (!visible) return placeholder;
  return <div ref={ref} className={className} style={{
    opacity: ready ? 1 : 0,
    transition: `opacity ${fadeDuration}ms ease-in`,
    ...style
  }} {...rest}>
      {children}
    </div>;
};

export const ScrollBox = ({children, maxHeight = 300, showHint = true, ariaLabel = "Scrollable content", style = {}, className = "", ...rest}) => {
  const contentRef = useRef(null);
  const [isOverflowing, setIsOverflowing] = useState(false);
  useEffect(() => {
    const checkOverflow = () => {
      if (contentRef.current) {
        const maxHeightPx = typeof maxHeight === "number" ? maxHeight : parseInt(maxHeight, 10) || 300;
        setIsOverflowing(contentRef.current.scrollHeight > maxHeightPx);
      }
    };
    checkOverflow();
    window.addEventListener("resize", checkOverflow);
    return () => window.removeEventListener("resize", checkOverflow);
  }, [maxHeight, children]);
  return <div className={className} style={{
    position: "relative",
    ...style
  }} {...rest}>
      <div ref={contentRef} role="region" tabIndex={0} aria-label={ariaLabel} style={{
    maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
    overflowY: "auto",
    paddingRight: 4
  }} onScroll={e => {
    const el = e.target;
    const atBottom = el.scrollHeight - el.scrollTop <= el.clientHeight + 10;
    const hint = el.parentNode.querySelector("[data-scroll-hint]");
    if (hint) hint.style.opacity = atBottom ? "0" : "1";
  }}>
        {children}
      </div>
      {showHint && isOverflowing && <div data-scroll-hint style={{
    fontSize: 11,
    color: "var(--lp-color-text-muted)",
    textAlign: "center",
    marginTop: 8,
    transition: "opacity 0.2s"
  }}>
          Scroll for more ↓
        </div>}
    </div>;
};

export const DoubleIconLink = ({label = '', labelColor, href = '#', text = '', iconLeft = 'github', iconLeftColor, iconRight = 'arrow-up-right', iconRightColor = 'var(--lp-color-accent)', className = '', style = {}, ...rest}) => {
  return <span className={className} style={{
    whiteSpace: 'nowrap',
    display: 'inline-flex',
    alignItems: 'center',
    gap: "var(--lp-spacing-1)",
    marginLeft: '0.3rem',
    ...style
  }} {...rest}>
      {text && <span style={{
    marginRight: 8
  }}>{text}</span>}
      <Icon icon={iconLeft} color={iconLeftColor} />
      <a href={href} style={{
    color: {
      labelColor
    }
  }}>
        {label}
      </a>
      <div style={{
    marginRight: '0.3rem'
  }}>
        <Icon icon={iconRight} size={12} color={iconRightColor} />
      </div>
    </span>;
};

export const LinkArrow = ({href, label, description, newline = true, borderColor, className = '', style = {}, ...rest}) => {
  const linkArrowStyle = {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: "var(--lp-spacing-1)",
    width: 'fit-content',
    ...borderColor && ({
      borderColor
    })
  };
  return <span className={className} style={style} {...rest}>
      {newline && <br />}
      <span style={linkArrowStyle}>
        <a href={href} target="_blank" rel="noopener noreferrer">
          {label}
        </a>
        <Icon icon="arrow-up-right" size={14} color="var(--lp-color-accent)" />
      </span>
      {description && description}
      {description && <div style={{
    height: "var(--lp-spacing-3)"
  }} />}
    </span>;
};

export const InlineDivider = ({margin = "0.75rem 0", padding = "0", color = "var(--lp-color-border-default)", opacity = 0.4, height = "1px", className = "", style = {}, ...rest}) => <hr role="separator" className={className} style={{
  border: "none",
  margin,
  padding,
  height,
  backgroundColor: color,
  opacity,
  ...style
}} {...rest} />;

export const CustomDivider = ({color = "var(--lp-color-border-default)", middleText = "", spacing = "default", style = {}, className = "", ...rest}) => {
  const spacingPresets = {
    default: {
      margin: "24px 0"
    },
    overlap: {
      margin: "-1rem 0 -1rem 0"
    },
    tight: {
      margin: "0 0 -1rem 0"
    },
    section: {
      margin: "0 0 -2rem 0"
    },
    sectionOverlap: {
      margin: "-1rem 0 -2rem 0"
    },
    deepOverlap: {
      margin: "-1rem 0 -1.5rem 0"
    }
  };
  const spacingStyle = spacingPresets[spacing] || spacingPresets.default;
  return <div role="separator" aria-orientation="horizontal" className={className} style={{
    display: "flex",
    alignItems: "center",
    ...spacingStyle,
    fontSize: style?.fontSize || "16px",
    height: "fit-content",
    ...style
  }} {...rest}>
      <span style={{
    marginRight: "var(--lp-spacing-px-8)",
    opacity: 0.2
  }}>
        <Icon icon="/snippets/assets/logos/Livepeer-Logo-Symbol-Theme.svg" />
      </span>
      <div style={{
    flex: 1,
    height: "1px",
    background: "var(--lp-color-border-default)",
    opacity: 0.4
  }}></div>
      {middleText && <>
          <Icon icon="circle" size={2} />
          <span style={{
    margin: "0 8px",
    fontWeight: "bold",
    color: color,
    opacity: 0.7
  }}>
            {middleText}
          </span>
          <Icon icon="circle" size={2} />
        </>}
      <div style={{
    flex: 1,
    height: "1px",
    background: "var(--lp-color-border-default)",
    opacity: 0.4
  }}></div>
      <span style={{
    marginLeft: "var(--lp-spacing-px-8)",
    opacity: 0.2
  }}>
        <span style={{
    display: "inline-block",
    transform: "scaleX(-1)"
  }}>
          <Icon icon="/snippets/assets/logos/Livepeer-Logo-Symbol-Theme.svg" />
        </span>
      </span>
    </div>;
};

<Tip>
  This page is an automated workflow.
  <Subtitle variant="changelog" style={{fontSize: "0.95rem", marginTop: "0.25rem"}}>Subscribe to this changelog's <LinkArrow label="RSS Feed" href="/v2/solutions/embody/changelog/rss.xml" newline={false} /></Subtitle>
</Tip>

<CustomDivider style={{margin: "-0.5rem 0 -1.5rem 0"}} />

Track releases for <LinkArrow label="Embody" href="https://github.com/its-DeFine/Unreal_Vtuber/releases" newline={false} /> on GitHub.

<Update label="v2026.3.1-alpha.1" tags={["Features"]} rss={{ title: "Embody v2026.3.1-alpha.1", description: "Alpha release in date-based format. Includes merged updates through PR #236 (security hardening: remove hardcoded pay..." }} description={<Subtitle variant="changelog">March 2026</Subtitle>}>
  ## v2026.3.1-alpha.1

  <ScrollBox maxHeight="250px" showHint={true}>
    Alpha release in date-based format. Includes merged updates through PR #236 (security hardening: remove hardcoded payments defaults, add allowlist diagnostics) plus prior mainline changes.
  </ScrollBox>

  <DoubleIconLink label="View release on GitHub" href="https://github.com/its-DeFine/Unreal_Vtuber/releases/tag/v2026.3.1-alpha.1" iconLeft="github" />
</Update>

<Update label="v1.3.6" tags={["Features", "Fixes"]} rss={{ title: "Embody v1.3.6", description: "- PixelStreaming2 stability: force H.264 + LowLatency + periodic keyframes across UE5 builds (including `config=Game`..." }} description={<Subtitle variant="changelog">February 2026</Subtitle>}>
  ## v1.3.6

  <ScrollBox maxHeight="250px" showHint={true}>
    * PixelStreaming2 stability: force H.264 + LowLatency + periodic keyframes across UE5 builds (including `config=Game` PluginSettings).
    * Layout B hardening: optional bearer-token auth for script runner, managed by edge-rotator control-plane config (in addition to IP allowlists).
    * Orchestrator health: add cached GPU stats endpoint.

    ### Included PRs

    * \#193 fix(compose): enable cluster control by default
    * \#202 Fix: mount Engine.ini for PixelStreaming2 codec (H.264)
    * \#204 fix(orchestrator-health): unblock PR CI (allowlist testclient + cluster default)
    * \#205 orchestrator-health: add /meta/gpu/stats (cached)
    * \#206 PixelStreaming2: set keyframe interval + LowLatency defaults
    * \#208 feat(orchestrator): runner bearer-token auth + rotator-managed tokens
    * \#209 fix(pixel-streaming): PS2 PluginSettings (H264 + keyframes) via Game.ini
  </ScrollBox>

  <DoubleIconLink label="View release on GitHub" href="https://github.com/its-DeFine/Unreal_Vtuber/releases/tag/v1.3.6" iconLeft="github" />
</Update>

<Update label="v1.3.5" tags={["Release"]} rss={{ title: "Embody v1.3.5", description: "- EXPERIMENTAL_REMOTE_CLUSTER_CONTROL now defaults to true" }} description={<Subtitle variant="changelog">January 2026</Subtitle>}>
  ## v1.3.5

  <ScrollBox maxHeight="250px" showHint={true}>
    * EXPERIMENTAL\_REMOTE\_CLUSTER\_CONTROL now defaults to true
    * Removes onboarding friction for multi-avatar cluster mode
    * Cluster endpoints still protected by IP allowlist
  </ScrollBox>

  <DoubleIconLink label="View release on GitHub" href="https://github.com/its-DeFine/Unreal_Vtuber/releases/tag/v1.3.5" iconLeft="github" />
</Update>

<Update label="v1.3.4" tags={["Fixes"]} rss={{ title: "Embody v1.3.4", description: "- CLI: `start_vtuber_unreal.sh test` now checks that Payments is allowlisted (fix: `./scripts/embody_cli.sh allowlist..." }} description={<Subtitle variant="changelog">January 2026</Subtitle>}>
  ## v1.3.4

  <ScrollBox maxHeight="250px" showHint={true}>
    * CLI: `start_vtuber_unreal.sh test` now checks that Payments is allowlisted (fix: `./scripts/embody_cli.sh allowlists fix`)
  </ScrollBox>

  <DoubleIconLink label="View release on GitHub" href="https://github.com/its-DeFine/Unreal_Vtuber/releases/tag/v1.3.4" iconLeft="github" />
</Update>

<Update label="v1.3.3" tags={["Features"]} rss={{ title: "Embody v1.3.3", description: "- Add allowlisted `GET /meta/gpu` endpoint in orchestrator-health" }} description={<Subtitle variant="changelog">January 2026</Subtitle>}>
  ## v1.3.3

  <ScrollBox maxHeight="250px" showHint={true}>
    * Add allowlisted `GET /meta/gpu` endpoint in orchestrator-health
    * Returns NVIDIA GPU inventory via `nvidia-smi` (works even when game is stopped)
  </ScrollBox>

  <DoubleIconLink label="View release on GitHub" href="https://github.com/its-DeFine/Unreal_Vtuber/releases/tag/v1.3.3" iconLeft="github" />
</Update>

<Update label="v1.3.2" tags={["Release"]} rss={{ title: "Embody v1.3.2", description: "* Docs: explain what v1.3.1 enables by @its-DeFine in https://github.com/its-DeFine/Unreal_Vtuber/pull/180" }} description={<Subtitle variant="changelog">January 2026</Subtitle>}>
  ## v1.3.2

  <ScrollBox maxHeight="250px" showHint={true}>
    ## What's Changed

    * Docs: explain what v1.3.1 enables
    * Enable remote cluster control by default
  </ScrollBox>

  <DoubleIconLink label="View release on GitHub" href="https://github.com/its-DeFine/Unreal_Vtuber/releases/tag/v1.3.2" iconLeft="github" />
</Update>

<Update label="v1.3.1" tags={["Features", "Fixes"]} rss={{ title: "Embody v1.3.1", description: "Changelog:" }} description={<Subtitle variant="changelog">January 2026</Subtitle>}>
  ## v1.3.1

  <ScrollBox maxHeight="250px" showHint={true}>
    * Remote ops parity: richer `/meta`, config push, and `upgrade/rollout` support.
    * Encrypted game image: staged rollout (prefetch) + pending rollout state; persist last verify in `/meta`.
    * CLI: repo auto-update on launch (ff-only, best-effort; opt-out via `EMBODY_CLI_NO_AUTO_UPDATE=1`); remove `cluster deploy --no-update`.
    * Remote ops: pin orchestrator to `{ref, service_image_tag}` and apply safely during sleep (`--no-start`).
    * consume.sh: more robust base64 decode detection.

    ### Upgrade / install

    ```bash theme={"theme":{"light":"github-light","dark":"dark-plus"}}
    git clone https://github.com/its-DeFine/Unreal_Vtuber.git
    cd Unreal_Vtuber

    git fetch --tags
    git checkout v1.3.1

    # If you ever see GHCR "denied" pulling the game image:
    sudo ./scripts/embody_cli.sh rollout
    ```

    ### Start cluster (auto)

    ```bash theme={"theme":{"light":"github-light","dark":"dark-plus"}}
    sudo ./scripts/embody_cli.sh cluster deploy --auto --yes --pull missing
    ```

    ### Capacity mental model (developer notes)

    * The unit of allocatable capacity is a **signaling server registration**. Each cluster slot contributes one.
    * Cluster mode is deterministic:
      * Signaling port: `8080 + slot`
      * Runner port: `9877 + slot`
      * Recorder-control port: `8889 + slot`
    * Per-slot sleep/wake is supported via `/power/projects/{project}` (and CLI wrappers).

    ### Defaults & knobs

    * CLI repo auto-update is on by default; disable with `EMBODY_CLI_NO_AUTO_UPDATE=1` (auto-update is skipped automatically when the repo is dirty or on detached HEAD).
    * CLI auto-upgrade-when-sleeping is on by default; disable with `EMBODY_CLI_AUTO_UPGRADE_WHEN_SLEEPING=0`.
    * Service containers (runner/health/rotator/etc) can be pinned to a release tag via `EMBODY_SERVICE_IMAGE_TAG=v1.3.1` in `.env` (remote ops can also set `service_image_tag` via `/ops/upgrade`).
    * Remote ops endpoints are enabled by default (`EXPERIMENTAL_REMOTE_OPS=1`); opt out with `EXPERIMENTAL_REMOTE_OPS=0` and recreate `orchestrator-health`.
    * Remote cluster control (`/cluster/*`) is opt-in: set `EXPERIMENTAL_REMOTE_CLUSTER_CONTROL=1` and recreate `orchestrator-health`.

    ### Included PRs

    * \#161 Issue #160: remote ops parity (meta/version + remote config + upgrade/rollout) [https://github.com/its-DeFine/Unreal\_Vtuber/pull/161](https://github.com/its-DeFine/Unreal_Vtuber/pull/161)
    * \#162 consume.sh: fix base64 decode detection [https://github.com/its-DeFine/Unreal\_Vtuber/pull/162](https://github.com/its-DeFine/Unreal_Vtuber/pull/162)
    * \#164 Issue #163: auto-update repo on CLI launch [https://github.com/its-DeFine/Unreal\_Vtuber/pull/164](https://github.com/its-DeFine/Unreal_Vtuber/pull/164)
    * \#168 Issue #167: staged encrypted rollouts + persist verify/meta [https://github.com/its-DeFine/Unreal\_Vtuber/pull/168](https://github.com/its-DeFine/Unreal_Vtuber/pull/168)
    * \#170 Issue #169: enable remote ops by default [https://github.com/its-DeFine/Unreal\_Vtuber/pull/170](https://github.com/its-DeFine/Unreal_Vtuber/pull/170)
    * \#172 Issue #171: fix docs for orchestrator-health recreate [https://github.com/its-DeFine/Unreal\_Vtuber/pull/172](https://github.com/its-DeFine/Unreal_Vtuber/pull/172)
    * \#176 Remote ops: pin git ref + service image tag [https://github.com/its-DeFine/Unreal\_Vtuber/pull/176](https://github.com/its-DeFine/Unreal_Vtuber/pull/176)
  </ScrollBox>

  <DoubleIconLink label="View release on GitHub" href="https://github.com/its-DeFine/Unreal_Vtuber/releases/tag/v1.3.1" iconLeft="github" />
</Update>