feat(staking): warn on empty reward-pool contracts [OPE-1846]

Surface a non-blocking warning when a staking contract's reward pool is
empty (availableRewards === 0). Previously the app computed
isRewardsAvailable but never used it: users could select/keep a
rewards-exhausted contract with no signal, and the middleware would
silently deploy the service unstaked (stake omitted, deploy proceeds).

- New shared NoStakingRewardsAlert (type="warning"), optional "Switch
  Staking Contract" action.
- Migration/onboarding: per-card warning in SelectActivityRewardsConfiguration
  when the contract has no rewards; card stays selectable (useCanMigrate
  unchanged — non-blocking).
- Main page: warning added to AgentDisabledAlert, rendered alongside the
  self-hiding low-balance alerts so neither is masked.

Gating reads loaded contract details (availableRewards === 0), not raw
isRewardsAvailable, to avoid flashing during load / firing on no_staking.

Tests: NoStakingRewardsAlert render + switch button; StakingRewardsWarning
load/available/empty gating.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: Tanya-atatakai

frontend/components/MainPage/Home/Overview/AgentInfo/AgentDisabledAlert/index.tsx

@@ -2,6 +2,7 @@ import { ReactNode, useMemo } from 'react';
 
 import { AgentLowBalanceAlert } from '@/components/AgentLowBalanceAlert';
 import { STEPS } from '@/components/AgentWallet/types';
+import { NoStakingRewardsAlert } from '@/components/NoStakingRewardsAlert';
 import {
   AgentSetupCompleteModal,
   ContentTransition,
@@ -42,6 +43,7 @@ export const AgentDisabledAlert = () => {
     isEligibleForStaking,
     hasEnoughServiceSlots,
     isServiceStaked,
+    selectedStakingContractDetails,
   } = useActiveStakingContractDetails();
   const { isInitialFunded } = useIsInitiallyFunded();
   const { isAnotherAgentRunning } = useAgentRunning();
@@ -122,11 +124,24 @@ export const AgentDisabledAlert = () => {
       return { key: 'evicted', content: <EvictedAlert /> };
     }
 
+    // Non-blocking: the reward pool of the selected contract is empty, so the
+    // agent runs but earns nothing until it's refilled (OPE-1846). Rendered
+    // alongside the low-balance alerts (which self-hide) so neither is masked.
+    const hasNoStakingRewards =
+      !isSelectedStakingContractDetailsLoading &&
+      selectedStakingContractDetails?.availableRewards === 0;
+
     // NOTE: Low-balance alerts, each component controls its own visibility.
     return {
       key: 'low-balance',
       content: (
         <>
+          {hasNoStakingRewards && (
+            <NoStakingRewardsAlert
+              className="mt-16"
+              onSwitch={() => goto(PAGES.SelectStaking)}
+            />
+          )}
           <AgentLowBalanceAlert
             onFund={() =>
               goto(PAGES.AgentWallet, {
@@ -153,6 +168,7 @@ export const AgentDisabledAlert = () => {
     isSelectedStakingContractDetailsLoading,
     isServiceStaked,
     selectedAgentConfig,
+    selectedStakingContractDetails,
     selectedStakingProgramMeta,
   ]);
 

frontend/components/NoStakingRewardsAlert.tsx

@@ -0,0 +1,47 @@
+import { Button, Typography } from 'antd';
+
+import { Alert } from '@/components/ui';
+
+const { Text } = Typography;
+
+type NoStakingRewardsAlertProps = {
+  /**
+   * When provided, renders a "Switch Staking Contract" button that invokes it.
+   * Omit on surfaces where the user is already choosing a contract.
+   */
+  onSwitch?: () => void;
+  className?: string;
+};
+
+/**
+ * Non-blocking warning shown when a staking contract's reward pool is empty
+ * (`availableRewards === 0`). The agent can still run and be staked, but it
+ * won't earn staking rewards until the contract is refilled (OPE-1846).
+ */
+export const NoStakingRewardsAlert = ({
+  onSwitch,
+  className,
+}: NoStakingRewardsAlertProps) => (
+  <Alert
+    showIcon
+    type="warning"
+    className={className}
+    message={
+      <>
+        <Text className="text-sm font-weight-500">
+          No staking rewards available
+        </Text>
+        <Text className={`text-sm flex mt-4 ${onSwitch ? 'mb-8' : ''}`}>
+          This staking contract&apos;s reward pool is currently empty. Your
+          agent can still run, but it won&apos;t earn staking rewards until the
+          contract is refilled.
+        </Text>
+        {onSwitch && (
+          <Button size="small" onClick={onSwitch}>
+            Switch Staking Contract
+          </Button>
+        )}
+      </>
+    }
+  />
+);

frontend/components/SelectStakingPage/components/SelectActivityRewardsConfiguration.tsx

@@ -3,10 +3,16 @@ import { Button as AntdButton, Flex, Typography } from 'antd';
 import { ReactNode, useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
+import { NoStakingRewardsAlert } from '@/components/NoStakingRewardsAlert';
 import { StakingContractCard } from '@/components/StakingContractCard';
 import { MainContentContainer } from '@/components/ui';
 import { PAGES, StakingProgramId } from '@/constants';
-import { usePageState, useStakingContracts, useStakingProgram } from '@/hooks';
+import {
+  usePageState,
+  useStakingContractDetails,
+  useStakingContracts,
+  useStakingProgram,
+} from '@/hooks';
 import { Nullable } from '@/types';
 
 import { MigrateButtonText, useCanMigrate } from '../hooks/useCanMigrate';
@@ -84,6 +90,30 @@ const SwitchStakingButton = ({
   );
 };
 
+/**
+ * Non-blocking warning surfaced on a contract card whose reward pool is empty.
+ * The contract stays selectable (`useCanMigrate` is unchanged) — this only
+ * tells the user the agent won't earn rewards there until it's refilled.
+ */
+export const StakingRewardsWarning = ({
+  stakingProgramId,
+}: {
+  stakingProgramId: StakingProgramId;
+}) => {
+  const { stakingContractInfo, isRewardsAvailable } =
+    useStakingContractDetails(stakingProgramId);
+
+  // Only warn once details have loaded — `isRewardsAvailable` is false while
+  // undefined, which would otherwise flash the warning during loading.
+  if (!stakingContractInfo || isRewardsAvailable) return null;
+
+  return (
+    <Flex className="px-24 mt-16">
+      <NoStakingRewardsAlert className="w-full" />
+    </Flex>
+  );
+};
+
 type SelectActivityRewardsConfigurationProps = {
   mode: SelectMode;
   backButton?: ReactNode;
@@ -145,6 +175,7 @@ export const SelectActivityRewardsConfiguration = ({
               stakingProgramId={stakingProgramId}
               renderAction={() => (
                 <>
+                  <StakingRewardsWarning stakingProgramId={stakingProgramId} />
                   {mode === 'onboard' && (
                     <Flex className="px-24 pb-24 mt-40" gap={16}>
                       <SelectStakingButton

frontend/tests/components/NoStakingRewardsAlert.test.tsx

@@ -0,0 +1,32 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { NoStakingRewardsAlert } from '@/components/NoStakingRewardsAlert';
+
+describe('NoStakingRewardsAlert', () => {
+  it('renders the empty-reward-pool warning message', () => {
+    render(<NoStakingRewardsAlert />);
+    expect(
+      screen.getByText('No staking rewards available'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/reward pool is currently empty/),
+    ).toBeInTheDocument();
+  });
+
+  it('does not render a switch button when onSwitch is omitted', () => {
+    render(<NoStakingRewardsAlert />);
+    expect(
+      screen.queryByRole('button', { name: 'Switch Staking Contract' }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders and fires the switch button when onSwitch is provided', () => {
+    const onSwitch = jest.fn();
+    render(<NoStakingRewardsAlert onSwitch={onSwitch} />);
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Switch Staking Contract' }),
+    );
+    expect(onSwitch).toHaveBeenCalledTimes(1);
+  });
+});

frontend/tests/components/SelectStakingPage/StakingRewardsWarning.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+
+import { StakingRewardsWarning } from '../../../components/SelectStakingPage/components/SelectActivityRewardsConfiguration';
+import { StakingProgramId } from '../../../constants';
+import { useStakingContractDetails } from '../../../hooks';
+import { makeStakingContractDetails } from '../../helpers/factories';
+
+jest.mock('../../../hooks', () => ({
+  useStakingContractDetails: jest.fn(),
+}));
+
+// Isolate the gating logic from the alert's markup.
+jest.mock('../../../components/NoStakingRewardsAlert', () => ({
+  NoStakingRewardsAlert: () => <div data-testid="no-rewards-alert" />,
+}));
+
+const mockUseStakingContractDetails =
+  useStakingContractDetails as jest.MockedFunction<
+    typeof useStakingContractDetails
+  >;
+
+const programId = 'pearl_beta_mech_marketplace_1' as StakingProgramId;
+
+const setup = (
+  value: Partial<ReturnType<typeof useStakingContractDetails>>,
+) => {
+  mockUseStakingContractDetails.mockReturnValue({
+    stakingContractInfo: undefined,
+    isRewardsAvailable: false,
+    hasEnoughServiceSlots: false,
+    hasEnoughRewardsAndSlots: false,
+    ...value,
+  });
+  return render(<StakingRewardsWarning stakingProgramId={programId} />);
+};
+
+describe('StakingRewardsWarning', () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it('renders nothing while contract details are still loading', () => {
+    // stakingContractInfo undefined => not loaded; must not flash the warning
+    setup({ stakingContractInfo: undefined, isRewardsAvailable: false });
+    expect(screen.queryByTestId('no-rewards-alert')).not.toBeInTheDocument();
+  });
+
+  it('renders nothing when rewards are available', () => {
+    setup({
+      stakingContractInfo: makeStakingContractDetails({ availableRewards: 10 }),
+      isRewardsAvailable: true,
+    });
+    expect(screen.queryByTestId('no-rewards-alert')).not.toBeInTheDocument();
+  });
+
+  it('renders the warning when the reward pool is empty', () => {
+    setup({
+      stakingContractInfo: makeStakingContractDetails({ availableRewards: 0 }),
+      isRewardsAvailable: false,
+    });
+    expect(screen.getByTestId('no-rewards-alert')).toBeInTheDocument();
+  });
+});