{statusLabel}
@@ -109,6 +165,61 @@ function ProposalRow({
{cohort.label}
) : null}
+ {(() => {
+ // On-chain verified pill: a quiet "your vote is observed
+ // on-chain and was last checked ago" indicator. We
+ // deliberately only show it when (a) the user has at
+ // least one confirmed receipt for this proposal (i.e. the
+ // cohort chip already reads "Voted"), and (b) the last
+ // verification happened recently enough that it's still
+ // a meaningful confidence signal. Otherwise the row
+ // would shout "verified!" for rows the reconciler hasn't
+ // actually touched in an hour.
+ if (!summaryRow) return null;
+ const confirmed = Number(summaryRow.confirmed);
+ if (!(Number.isFinite(confirmed) && confirmed > 0)) return null;
+ const latestVerifiedAt = Number(summaryRow.latestVerifiedAt);
+ if (!Number.isFinite(latestVerifiedAt) || latestVerifiedAt <= 0) {
+ return null;
+ }
+ const now = Number.isFinite(nowMs) ? nowMs : Date.now();
+ const age = now - latestVerifiedAt;
+ if (!(age >= 0 && age < VERIFIED_FRESHNESS_MS)) return null;
+ const ago = verifiedAgo(latestVerifiedAt, now);
+ const verifiedWhen = new Date(latestVerifiedAt).toUTCString();
+ const tooltip =
+ `${confirmed} of your ${
+ confirmed === 1 ? 'vote' : 'votes'
+ } were last observed on-chain ${ago} (${verifiedWhen}).`;
+ return (
+
+
+
+ Verified {ago}
+
+
+ );
+ })()}
+ {Array.isArray(metaChips) && metaChips.length > 0
+ ? metaChips.map((chip) => (
+
+ {chip.label}
+
+ ))
+ : null}
@@ -198,10 +309,37 @@ function ProposalRow({
);
}
+// How long the ops-hero "Jump to next" highlight stays visible on
+// the target row before fading out. Long enough for the user's
+// eye to land on it post-scroll; short enough that it doesn't
+// stick around competing for attention if they then start
+// interacting with the row.
+const JUMP_HIGHLIGHT_MS = 2400;
+
export default function Governance() {
const [filter, setFilter] = useState('all');
const [query, setQuery] = useState('');
const [voteProposal, setVoteProposal] = useState(null);
+ const [highlightKey, setHighlightKey] = useState(null);
+ // Bumping this token re-runs the "Your activity" fetch. We bump
+ // it when the vote modal closes so a freshly-submitted vote shows
+ // up in the activity list without forcing a full page reload.
+ const [activityRefreshToken, setActivityRefreshToken] = useState(0);
+ // Slow-ticking clock that drives time-sensitive derivations like
+ // the closing-window chip. Re-computing once per minute keeps the
+ // label accurate across long-lived sessions (e.g. "closing-soon"
+ // → "closing-urgent" transition at the 48h boundary, or the chip
+ // disappearing once the deadline passes) without hammering React
+ // — the chip rounds to minute / hour / day tiers, so sub-minute
+ // drift is invisible anyway.
+ const [nowMs, setNowMs] = useState(() => Date.now());
+ useEffect(() => {
+ const id = window.setInterval(() => {
+ setNowMs(Date.now());
+ }, 60 * 1000);
+ return () => window.clearInterval(id);
+ }, []);
+ const highlightTimerRef = useRef(null);
const {
error,
loading,
@@ -216,12 +354,60 @@ export default function Governance() {
const { summaryMap, ownedCount, refresh: refreshReceipts } =
useGovernanceReceipts({ enabled: isAuthenticated });
+ // Hash → proposal lookup for the activity card so receipts can
+ // render titles and the jump-link can route the user to an
+ // existing row. Built once per feed load; the activity card
+ // handles missing entries gracefully (receipt lands without a
+ // jump button).
+ const proposalsByHash = useMemo(() => {
+ const m = new Map();
+ for (const p of proposals) {
+ if (p && typeof p.Key === 'string') {
+ m.set(p.Key.toLowerCase(), p);
+ }
+ }
+ return m;
+ }, [proposals]);
+
const networkStats = stats && stats.stats ? stats.stats.mn_stats : null;
const superblockStats = stats && stats.stats ? stats.stats.superblock_stats : null;
const enabledCount = parseNumber(networkStats && networkStats.enabled);
const requestedBudget = proposals.reduce(function sumBudget(total, proposal) {
return total + Number(proposal.payment_amount || 0);
}, 0);
+
+ // Feed-wide over-budget computation: precomputed once per render
+ // so each ProposalRow can look its chip up by hash in O(1)
+ // without reiterating the whole feed. Rebuilds on any change to
+ // proposals / enabledCount / budget; all three are referentially
+ // stable between fetches so the memo hit rate is high.
+ const overBudgetMap = useMemo(
+ () =>
+ computeOverBudgetMap({
+ proposals,
+ enabledCount,
+ budget: superblockStats ? superblockStats.budget : 0,
+ }),
+ [proposals, enabledCount, superblockStats]
+ );
+
+ // Per-row closing chip depends on the superblock deadline AND
+ // the current time, so it's memoized on both and re-derived once
+ // per minute via the `nowMs` ticker above. That ticker is what
+ // keeps long-lived sessions honest: the chip transitions from
+ // closing-soon → closing-urgent at the 48h boundary and
+ // disappears entirely once the deadline passes, even if the
+ // stats object isn't refreshed. Any hard-timed behaviour (e.g.
+ // disabling the vote button at the deadline) still lives on the
+ // server; this label is purely advisory.
+ const closing = useMemo(
+ () =>
+ closingChip({
+ votingDeadline: superblockStats ? superblockStats.voting_deadline : 0,
+ nowMs,
+ }),
+ [superblockStats, nowMs]
+ );
const visibleProposals = proposals.filter(function filterProposal(proposal) {
const supportPercent = enabledCount
? (Number(proposal.AbsoluteYesCount || 0) / enabledCount) * 100
@@ -251,6 +437,90 @@ export default function Governance() {
setVoteProposal(proposal);
}, []);
+ // Smoothly scroll to a proposal by hash and briefly highlight
+ // it so the user's eye lands on the right row.
+ //
+ // Filter-aware: the activity card can surface jumps to proposals
+ // that are currently hidden by the search/filter switcher (e.g.
+ // the user filtered to "Passing" and then clicks a jump for a
+ // receipt on a watch-list proposal). Clicking a jump CTA that
+ // scrolls to nothing is a silent dead-end, which is the worst
+ // possible UX here — so before we look up the DOM id we clear
+ // any filter state that would be suppressing the target row,
+ // *only when* we can confirm the target exists in the full
+ // proposals list (we don't want to clobber the user's filter
+ // for a hash we wouldn't be able to show anyway).
+ //
+ // Scrolling happens inside a requestAnimationFrame so React has
+ // a chance to re-render the filtered list after the setState
+ // calls; otherwise the target row might not yet be in the DOM.
+ const jumpToProposal = useCallback((key) => {
+ if (typeof key !== 'string' || !key) return;
+ const normalizedKey = key.toLowerCase();
+ const domId = proposalRowDomId(key);
+ if (!domId) return;
+
+ const existsInFeed = proposals.some(
+ (p) => p && typeof p.Key === 'string' && p.Key.toLowerCase() === normalizedKey
+ );
+ if (existsInFeed) {
+ // Only touch filter state if the target would otherwise be
+ // hidden. Keeps the user's current filter intact when they
+ // click a jump CTA on an already-visible row.
+ const visibleInFeed = visibleProposals.some(
+ (p) =>
+ p && typeof p.Key === 'string' && p.Key.toLowerCase() === normalizedKey
+ );
+ if (!visibleInFeed) {
+ setFilter('all');
+ setQuery('');
+ }
+ }
+
+ const doScroll = () => {
+ if (typeof document === 'undefined') return;
+ const el = document.getElementById(domId);
+ if (!el || typeof el.scrollIntoView !== 'function') return;
+ try {
+ el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ } catch (_e) {
+ // Older test environments / JSDOM may not accept the
+ // options object. Fall back to the plain scrollIntoView
+ // rather than throwing in a user-facing path.
+ try {
+ el.scrollIntoView();
+ } catch (_e2) {
+ // Nothing else we can do; the highlight alone will
+ // still hint to the user that we jumped.
+ }
+ }
+ };
+
+ if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+ window.requestAnimationFrame(doScroll);
+ } else {
+ doScroll();
+ }
+
+ setHighlightKey(key);
+ if (highlightTimerRef.current) {
+ window.clearTimeout(highlightTimerRef.current);
+ }
+ highlightTimerRef.current = window.setTimeout(() => {
+ setHighlightKey(null);
+ highlightTimerRef.current = null;
+ }, JUMP_HIGHLIGHT_MS);
+ }, [proposals, visibleProposals]);
+
+ useEffect(() => {
+ return () => {
+ if (highlightTimerRef.current) {
+ window.clearTimeout(highlightTimerRef.current);
+ highlightTimerRef.current = null;
+ }
+ };
+ }, []);
+
const closeVoteModal = useCallback(() => {
setVoteProposal(null);
// Re-fetch the summary so the cohort chip reflects whatever
@@ -263,6 +533,9 @@ export default function Governance() {
// Swallow — non-critical UI freshness, no banner.
});
}
+ // Same rationale for the activity card — a vote just closed so
+ // the "last 10" almost certainly changed.
+ setActivityRefreshToken((v) => v + 1);
}, [isAuthenticated, refreshReceipts]);
return (
@@ -347,6 +620,22 @@ export default function Governance() {
) : null}
+ {isAuthenticated && stats ? (
+
+
+ ) : null}
@@ -436,6 +725,20 @@ export default function Governance() {
const cohort = isAuthenticated
? cohortChip(summaryRow, ownedCount)
: null;
+ // Metadata chips are built per-row but derived
+ // from feed-wide state (closing deadline, budget
+ // ranking). Order matters: urgency first, budget
+ // pressure second, margin last — that's the
+ // order in which a scanning user needs to decide
+ // "do I care enough to click in?"
+ const rowMetaChips = [];
+ if (closing) rowMetaChips.push(closing);
+ const overBudget = hashKey
+ ? overBudgetMap.get(hashKey)
+ : null;
+ if (overBudget) rowMetaChips.push(overBudget);
+ const margin = marginChip({ proposal, enabledCount });
+ if (margin) rowMetaChips.push(margin);
return (
+
+
+));
+jest.mock('../components/GovernanceActivity', () => (props) => (
+
+
+
+));
+
// eslint-disable-next-line import/first
import Governance from './Governance';
// eslint-disable-next-line import/first
@@ -404,3 +440,500 @@ describe('Governance page — cohort chips', () => {
expect(refresh).not.toHaveBeenCalled();
});
});
+
+describe('Governance page — verified-on-chain pill', () => {
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ function summaryRow(partial) {
+ return {
+ proposalHash: 'a'.repeat(64),
+ total: 0,
+ relayed: 0,
+ confirmed: 0,
+ stale: 0,
+ failed: 0,
+ confirmedYes: 0,
+ confirmedNo: 0,
+ confirmedAbstain: 0,
+ latestSubmittedAt: 1700000000,
+ latestVerifiedAt: 1700000001,
+ ...partial,
+ };
+ }
+
+ test('renders the "Verified" pill when the user has a fresh confirmed receipt', () => {
+ // latestVerifiedAt within the freshness window (<5 min) — the
+ // reconciler has recently observed this user's on-chain votes
+ // for this proposal, so we surface a quiet confidence signal.
+ useAuth.mockReturnValue({ isAuthenticated: true, user: { id: 1 } });
+ useGovernanceData.mockReturnValue(
+ baseData({ proposals: [makeProposal({ Key: 'a'.repeat(64) })] })
+ );
+ const now = Date.now();
+ useGovernanceReceipts.mockReturnValue(
+ makeReceipts({
+ summary: [
+ summaryRow({
+ total: 2,
+ confirmed: 2,
+ confirmedYes: 2,
+ latestVerifiedAt: now - 30_000,
+ }),
+ ],
+ ownedCount: 2,
+ })
+ );
+
+ renderPage();
+
+ const pill = screen.getByTestId('proposal-row-verified');
+ expect(pill).toBeInTheDocument();
+ expect(pill.textContent).toMatch(/verified/i);
+ expect(pill.getAttribute('title')).toMatch(
+ /were last observed on-chain/i
+ );
+ });
+
+ test('does not render when the confirmation is older than the freshness window', () => {
+ useAuth.mockReturnValue({ isAuthenticated: true, user: { id: 1 } });
+ useGovernanceData.mockReturnValue(
+ baseData({ proposals: [makeProposal({ Key: 'a'.repeat(64) })] })
+ );
+ const now = Date.now();
+ useGovernanceReceipts.mockReturnValue(
+ makeReceipts({
+ summary: [
+ summaryRow({
+ total: 1,
+ confirmed: 1,
+ confirmedYes: 1,
+ // 1 hour old — well past the 5-minute window.
+ latestVerifiedAt: now - 60 * 60 * 1000,
+ }),
+ ],
+ ownedCount: 1,
+ })
+ );
+
+ renderPage();
+
+ expect(
+ screen.queryByTestId('proposal-row-verified')
+ ).not.toBeInTheDocument();
+ });
+
+ test('does not render when the user has no confirmed receipts for the proposal', () => {
+ // Failed-only / relayed-only receipts should NOT get the
+ // verified pill — that chip claims on-chain confirmation.
+ useAuth.mockReturnValue({ isAuthenticated: true, user: { id: 1 } });
+ useGovernanceData.mockReturnValue(
+ baseData({ proposals: [makeProposal({ Key: 'a'.repeat(64) })] })
+ );
+ const now = Date.now();
+ useGovernanceReceipts.mockReturnValue(
+ makeReceipts({
+ summary: [
+ summaryRow({
+ total: 2,
+ failed: 2,
+ latestVerifiedAt: now - 30_000,
+ }),
+ ],
+ ownedCount: 2,
+ })
+ );
+
+ renderPage();
+
+ expect(
+ screen.queryByTestId('proposal-row-verified')
+ ).not.toBeInTheDocument();
+ });
+
+ test('anonymous visitors never see the Verified pill', () => {
+ useAuth.mockReturnValue({ isAuthenticated: false, user: null });
+ useGovernanceData.mockReturnValue(baseData());
+ const now = Date.now();
+ useGovernanceReceipts.mockReturnValue(
+ makeReceipts({
+ summary: [
+ summaryRow({
+ total: 1,
+ confirmed: 1,
+ confirmedYes: 1,
+ latestVerifiedAt: now - 30_000,
+ }),
+ ],
+ ownedCount: 1,
+ })
+ );
+
+ renderPage();
+
+ expect(
+ screen.queryByTestId('proposal-row-verified')
+ ).not.toBeInTheDocument();
+ });
+});
+
+describe('Governance page — proposal metadata chips', () => {
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ test('closing-soon chip renders when the voting deadline is within a week', () => {
+ useAuth.mockReturnValue({ isAuthenticated: false, user: null });
+ const threeDaysAhead = Math.floor(Date.now() / 1000) + 3 * 24 * 60 * 60;
+ useGovernanceData.mockReturnValue(
+ baseData({
+ stats: {
+ stats: {
+ mn_stats: { enabled: 1000 },
+ superblock_stats: {
+ budget: 1_000_000,
+ voting_deadline: threeDaysAhead,
+ superblock_date: threeDaysAhead + 60 * 60,
+ },
+ },
+ },
+ })
+ );
+
+ renderPage();
+
+ const chips = screen.getAllByTestId('proposal-row-meta-chip');
+ const closing = chips.find(
+ (c) => c.getAttribute('data-meta-kind') === 'closing-soon'
+ );
+ expect(closing).toBeDefined();
+ expect(closing.textContent).toMatch(/Closes in/i);
+ });
+
+ test('closing chip escalates to urgent tone when the deadline is within 48h', () => {
+ useAuth.mockReturnValue({ isAuthenticated: false, user: null });
+ const oneHourAhead = Math.floor(Date.now() / 1000) + 60 * 60;
+ useGovernanceData.mockReturnValue(
+ baseData({
+ stats: {
+ stats: {
+ mn_stats: { enabled: 1000 },
+ superblock_stats: {
+ budget: 1_000_000,
+ voting_deadline: oneHourAhead,
+ superblock_date: oneHourAhead + 60 * 60,
+ },
+ },
+ },
+ })
+ );
+
+ renderPage();
+
+ const chips = screen.getAllByTestId('proposal-row-meta-chip');
+ const closing = chips.find(
+ (c) => c.getAttribute('data-meta-kind') === 'closing-urgent'
+ );
+ expect(closing).toBeDefined();
+ });
+
+ test('margin-thin chip renders when passing support is just over 10%', () => {
+ useAuth.mockReturnValue({ isAuthenticated: false, user: null });
+ useGovernanceData.mockReturnValue(
+ baseData({
+ // 10.5% support → 0.5% over the line → within the margin.
+ // No closing chip: the default baseData deadline is way in
+ // the past relative to now, so closingChip returns null.
+ proposals: [makeProposal({ AbsoluteYesCount: 105 })],
+ stats: {
+ stats: {
+ mn_stats: { enabled: 1000 },
+ superblock_stats: {
+ budget: 1_000_000,
+ voting_deadline: 1, // far past → no closing chip
+ superblock_date: 1,
+ },
+ },
+ },
+ })
+ );
+
+ renderPage();
+
+ const chips = screen.getAllByTestId('proposal-row-meta-chip');
+ expect(chips).toHaveLength(1);
+ expect(chips[0].getAttribute('data-meta-kind')).toBe('margin-thin');
+ expect(chips[0].textContent).toMatch(/slim margin/i);
+ });
+
+ test('margin-near chip renders when support is just under 10%', () => {
+ useAuth.mockReturnValue({ isAuthenticated: false, user: null });
+ useGovernanceData.mockReturnValue(
+ baseData({
+ proposals: [makeProposal({ AbsoluteYesCount: 92 })],
+ stats: {
+ stats: {
+ mn_stats: { enabled: 1000 },
+ superblock_stats: {
+ budget: 1_000_000,
+ voting_deadline: 1,
+ superblock_date: 1,
+ },
+ },
+ },
+ })
+ );
+
+ renderPage();
+
+ const chips = screen.getAllByTestId('proposal-row-meta-chip');
+ expect(chips).toHaveLength(1);
+ expect(chips[0].getAttribute('data-meta-kind')).toBe('margin-near');
+ });
+
+ test('over-budget chip only decorates the proposals below the ranking cutline', () => {
+ useAuth.mockReturnValue({ isAuthenticated: false, user: null });
+ // Two passing proposals (12% and 15% support) each requesting
+ // 80 SYS against a 100 SYS ceiling. Rank 1 (15%) stays inside
+ // the budget; rank 2 (12%) sits past the cutline → over-budget.
+ const A = 'a'.repeat(64);
+ const B = 'b'.repeat(64);
+ useGovernanceData.mockReturnValue(
+ baseData({
+ proposals: [
+ makeProposal({
+ Key: A,
+ title: 'Top',
+ AbsoluteYesCount: 150,
+ payment_amount: '80',
+ }),
+ makeProposal({
+ Key: B,
+ title: 'Tail',
+ AbsoluteYesCount: 120,
+ payment_amount: '80',
+ }),
+ ],
+ stats: {
+ stats: {
+ mn_stats: { enabled: 1000 },
+ superblock_stats: {
+ budget: 100,
+ voting_deadline: 1,
+ superblock_date: 1,
+ },
+ },
+ },
+ })
+ );
+
+ renderPage();
+
+ // Find every row and check its meta-chip set. The top-ranked
+ // row should NOT have an over-budget chip; the tail one should.
+ const allChips = screen.queryAllByTestId('proposal-row-meta-chip');
+ const overBudgetKinds = allChips
+ .filter((c) => c.getAttribute('data-meta-kind') === 'over-budget');
+ expect(overBudgetKinds).toHaveLength(1);
+ });
+});
+
+describe('Governance page — time-sensitive chips refresh on long-lived sessions', () => {
+ beforeEach(() => {
+ jest.useFakeTimers();
+ });
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+
+ test('closing chip escalates from "soon" to "urgent" as the deadline approaches without a stats refresh', () => {
+ useAuth.mockReturnValue({ isAuthenticated: false, user: null });
+ // Deadline 72h out. Under soon threshold (7d) but above urgent
+ // threshold (48h) → starts as closing-soon.
+ const deadlineSec = Math.floor(Date.now() / 1000) + 72 * 60 * 60;
+ useGovernanceData.mockReturnValue(
+ baseData({
+ stats: {
+ stats: {
+ mn_stats: { enabled: 1000 },
+ superblock_stats: {
+ budget: 1_000_000,
+ voting_deadline: deadlineSec,
+ superblock_date: deadlineSec + 60 * 60,
+ },
+ },
+ },
+ })
+ );
+
+ renderPage();
+ {
+ const chips = screen.getAllByTestId('proposal-row-meta-chip');
+ const closing = chips.find((c) =>
+ c.getAttribute('data-meta-kind').startsWith('closing-')
+ );
+ expect(closing.getAttribute('data-meta-kind')).toBe('closing-soon');
+ }
+
+ // Advance wall-clock past the 48h urgency line WITHOUT mutating
+ // the stats object. The tick should still demote the chip.
+ act(() => {
+ jest.setSystemTime(Date.now() + 25 * 60 * 60 * 1000); // +25h → 47h remaining
+ jest.advanceTimersByTime(60 * 1000 + 10); // one ticker interval
+ });
+
+ {
+ const chips = screen.getAllByTestId('proposal-row-meta-chip');
+ const closing = chips.find((c) =>
+ c.getAttribute('data-meta-kind').startsWith('closing-')
+ );
+ expect(closing.getAttribute('data-meta-kind')).toBe('closing-urgent');
+ }
+ });
+
+ test('closing chip disappears after the deadline passes even without a stats refresh', () => {
+ useAuth.mockReturnValue({ isAuthenticated: false, user: null });
+ const deadlineSec = Math.floor(Date.now() / 1000) + 5 * 60; // 5m away
+ useGovernanceData.mockReturnValue(
+ baseData({
+ stats: {
+ stats: {
+ mn_stats: { enabled: 1000 },
+ superblock_stats: {
+ budget: 1_000_000,
+ voting_deadline: deadlineSec,
+ superblock_date: deadlineSec + 60 * 60,
+ },
+ },
+ },
+ })
+ );
+
+ renderPage();
+ // Deadline not yet passed → chip present (urgent tier).
+ expect(
+ screen
+ .getAllByTestId('proposal-row-meta-chip')
+ .some((c) => c.getAttribute('data-meta-kind') === 'closing-urgent')
+ ).toBe(true);
+
+ // Jump 10 minutes ahead and tick the clock — now the deadline
+ // is in the past and the chip should be gone.
+ act(() => {
+ jest.setSystemTime(Date.now() + 10 * 60 * 1000);
+ jest.advanceTimersByTime(60 * 1000 + 10);
+ });
+
+ expect(
+ screen
+ .queryAllByTestId('proposal-row-meta-chip')
+ .some((c) => String(c.getAttribute('data-meta-kind')).startsWith('closing-'))
+ ).toBe(false);
+ });
+});
+
+describe('Governance page — jumpToProposal filter-aware behaviour', () => {
+ afterEach(() => {
+ jest.clearAllMocks();
+ if (typeof global !== 'undefined') {
+ delete global.__ACTIVITY_STUB_JUMP_KEY__;
+ }
+ });
+
+ test('jumping to a proposal that is hidden by the "Watch" filter clears the filter so the row becomes mountable', () => {
+ // Two proposals:
+ // - "passing" (12% support) → visible under the Passing filter
+ // - "watch" (5% support) → hidden under the Passing filter
+ // The activity card surfaces a jump to the watch-list proposal
+ // while the user has "Passing" selected. Without the fix the
+ // click is a silent no-op because the row isn't in the DOM.
+ // With the fix, filter clears back to "All" so the row mounts
+ // and the highlight attribute eventually fires.
+ const PASSING = 'a'.repeat(64);
+ const WATCH = 'b'.repeat(64);
+ useAuth.mockReturnValue({ isAuthenticated: true, user: { id: 1 } });
+ useGovernanceData.mockReturnValue(
+ baseData({
+ proposals: [
+ makeProposal({
+ Key: PASSING,
+ title: 'Passing one',
+ AbsoluteYesCount: 120,
+ }),
+ makeProposal({
+ Key: WATCH,
+ title: 'Watch one',
+ AbsoluteYesCount: 50,
+ }),
+ ],
+ stats: {
+ stats: {
+ mn_stats: { enabled: 1000 },
+ superblock_stats: {
+ budget: 1_000_000,
+ voting_deadline: 1,
+ superblock_date: 1,
+ },
+ },
+ },
+ })
+ );
+ useGovernanceReceipts.mockReturnValue(
+ makeReceipts({ summary: [], ownedCount: 1 })
+ );
+
+ renderPage();
+
+ // Switch to the Passing filter — Watch proposal is now hidden.
+ fireEvent.click(screen.getByRole('button', { name: /^passing$/i }));
+ expect(document.getElementById(`proposal-row-${WATCH}`)).toBeNull();
+ expect(document.getElementById(`proposal-row-${PASSING}`)).not.toBeNull();
+
+ // Simulate the activity card asking us to jump to the hidden
+ // Watch proposal. The stub reads the target key from a global
+ // so we can pick the hash per test.
+ global.__ACTIVITY_STUB_JUMP_KEY__ = WATCH;
+ fireEvent.click(screen.getByTestId('activity-stub-jump'));
+
+ // Filter clears → the hidden row becomes mountable again.
+ // We assert on the DOM id directly rather than waiting for
+ // the requestAnimationFrame-scheduled scroll, because JSDOM
+ // commits the setState synchronously but rAF-scheduled reads
+ // would require a fake-timer dance here.
+ expect(document.getElementById(`proposal-row-${WATCH}`)).not.toBeNull();
+ });
+
+ test('jumping to a proposal that is already visible leaves the filter untouched', () => {
+ // Two proposals both passing; we stay on the "Passing" filter
+ // and jump to one of them. The filter shouldn't reset to "All"
+ // behind the user's back — the target row is already mounted.
+ const A = 'a'.repeat(64);
+ const B = 'b'.repeat(64);
+ useAuth.mockReturnValue({ isAuthenticated: true, user: { id: 1 } });
+ useGovernanceData.mockReturnValue(
+ baseData({
+ proposals: [
+ makeProposal({ Key: A, title: 'A', AbsoluteYesCount: 150 }),
+ makeProposal({ Key: B, title: 'B', AbsoluteYesCount: 130 }),
+ ],
+ })
+ );
+ useGovernanceReceipts.mockReturnValue(
+ makeReceipts({ summary: [], ownedCount: 1 })
+ );
+
+ renderPage();
+
+ const passingBtn = screen.getByRole('button', { name: /^passing$/i });
+ fireEvent.click(passingBtn);
+ expect(passingBtn.className).toMatch(/is-active/);
+
+ global.__ACTIVITY_STUB_JUMP_KEY__ = A;
+ fireEvent.click(screen.getByTestId('activity-stub-jump'));
+
+ // Passing button is still the active filter — no silent reset.
+ expect(passingBtn.className).toMatch(/is-active/);
+ expect(document.getElementById(`proposal-row-${A}`)).not.toBeNull();
+ });
+});