docs: MFS delegation UX mocks for #802 by thebeyondr · Pull Request #837 · livepeer/explorer

thebeyondr · 2026-10-12T21:37:16Z

For #802

Design mocks only (no product UI yet) for MFS / fee-vs-stake delegation UX.

Summary

Adds design/mocks/mfs-delegation-802/ (list, mobile market cards, orchestrator detail, delegation status, day-one launch checklist)
Shares self-hosted Inter under design/mocks/shared/ for HTML previews
Captures MFS UI rules in AGENTS.md

Screenshots

Test plan

Open design/mocks/mfs-delegation-802/index.html and confirm Inter loads
Skim list / mobile / detail / day-one for fee=blue, stake=violet, binding-only tint
Confirm day-one uses brand green + Livepeer mark, with gateway → fees → stake steps
Open design/mocks/governance-voting/index.html and confirm shared Inter still resolves

Stakeholder-ready mockups for #802 and durable UI guidance so future work matches the agreed MFS delegation patterns.

Vendored latin 400–700 woff2 from @fontsource/inter so the mock loads on file:// without Google Fonts or node_modules paths.

Keep bounty HTML previews next to each issue and load Inter once from design/mocks/shared so every mock stays consistent without Google Fonts.

Drop the old repo-root HTML and font copies now that design/mocks owns them.

Twin fee/stake odds tiles, binding-only tint with a top fade, and aligned “caps rewards” copy so the mock matches how people scan prediction markets.

The whole card is an anchor, so without an explicit color the titles fell back to browser blue on the dark panel.

Market-board mobile list, binding-only top fade, gateway→fees→stake checklist, and clearer review copy.

@font-face

A glob in the CSS comment closed early and left invalid tokens before the first @font-face rule.

vercel · 2026-10-12T21:37:22Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
explorer-arbitrum-one	Ready	Preview	Oct 16, 2026 12:59am UTC

thebeyondr · 2026-10-12T21:37:42Z

For #802 — please review the mocks in design/mocks/mfs-delegation-802/index.html and drop feedback here (copy, layout, day-one card, color rules). Mockups only; no product implementation yet.

Copilot

🟡 Changes recommended

Broken navigation, out-of-scope reward-history links, mobile overflow, and accessibility issues remain.

13 open findings

What changed in this PR

Adds static MFS delegation UX mocks for issue #802, shared self-hosted Inter fonts, and repository UI guidance.

Changes:

Adds delegation list, detail, status, and onboarding mockups.
Documents MFS and accessibility conventions.
Shares Inter assets across design previews.

File	Description
`AGENTS.md`	Adds UI and MFS design rules.
`design/mocks/mfs-delegation-802/index.html`	Adds MFS delegation mockups and rationale.
`design/mocks/governance-voting/index.html`	Adds the governance preview using shared Inter.
`design/mocks/shared/inter.css`	Defines shared Inter font faces.
`design/mocks/shared/fonts/LICENSE`	Includes the Inter license.
`design/mocks/shared/fonts/inter-latin-400-normal.woff2`	Adds Inter 400.
`design/mocks/shared/fonts/inter-latin-500-normal.woff2`	Adds Inter 500.
`design/mocks/shared/fonts/inter-latin-600-normal.woff2`	Adds Inter 600.
`design/mocks/shared/fonts/inter-latin-700-normal.woff2`	Adds Inter 700.

🧠 Review effort: Balanced

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Tighten mock accessibility and layout to match AGENTS rules: skip links, reduced motion, hit targets, zoomable viewport guidance, and help triggers.

ECWireless · 2026-10-13T15:10:46Z

@thebeyondr some notes:

Are tooltips supposed to work already? I'm trying to test them now, but they don't pop up
I can see some stakeholders potentially having issue with some columns being swapped out for others. Right now, the explorer has Forecasted Yield, Delegated Stake, and Trailing 90 Day Fees; this design would replace those with State, Fees vs Stake, Reward Cap, and Node Keeps. Only one that might be worth keeping (or incorporating) in my mind is Forecasted Yield. Thoughts @rickstaa ?
For the "Orchestrator detail" section, it looks good to me in isolation (as it what and how the data renders looks right), but I'm having trouble mapping this onto how the current orchestrating page looks
"Your delegation" looks good to me, but also wondering where the card would fit on the page
The "Day one" checklist is cool. Curious @rickstaa 's take on it

Reviewers need hover/focus tooltips on the list help markers, and the delegating card should speak to an already-bonded stake, not leftover room.

Keep MFS decision columns first, demote yield/stake/fees as quieter context, and drop ranks and the sort banner.

Show the reward-cap card as the top span of the Orchestrating 2-column grid with a right-rail amount box, matching widths and notes.

Copilot

🟡 Changes recommended

The mobile drawer remains inaccessible and cannot reveal its form, while an unrelated governance mock broadens the PR scope.

2 open findings

6 resolved since last review

🧠 Review effort: Balanced

thebeyondr · 2026-10-14T00:55:17Z

The PR is described as MFS-only … Move the governance design to a separate PR

Keeping the governance mock in this PR on purpose: it is the shared-font regression host for design/mocks/shared/, not a separate #802 scope claim. Happy to split later if review noise is still too high.

Copilot

🟡 Changes recommended

Mobile delegation currently ends at inactive drawer controls, and several navigation and safe-area issues remain.

1 open finding

Mobile delegation button does not open amount drawer · New

8 resolved since last review

Previously missed (2)

In code that hasn't changed since last review

Fixed padding ignores safe-area insets

design/mocks/governance-voting/index.html:44

viewport-fit=cover opts into display cutouts, but this fixed padding ignores safe-area insets. In landscape or standalone mode, content can sit under a notch, contrary to the new safe-area rule.

Opening sentence lacks punctuation

AGENTS.md:1

This opening sentence is missing punctuation between the two clauses.

🧠 Review effort: Balanced

Drop violet for stake; use brand green for LPT/shares and brand blue for fees. Update AGENTS and rationale copy so green means quantity, not good.

Copilot

🟡 Changes recommended

Misleading reward copy and accessibility issues remain in the design preview.

4 open findings

🧠 Review effort: Balanced

Mobile Delegate opens the amount widget as a bottom sheet. Toolbar help opens below and stays in-frame. Docs step keeps native link semantics. Balanced examples use equal fee/stake shares so copy matches MFS. Cliff notes + PDF for 802/803/804; do not counter the litepaper.

Copilot

🟡 Changes recommended

Reward-cap aggregation guidance and mobile drawer positioning and focus handling need correction.

3 open findings

Apply reward caps per round before aggregation · New
Reset drawer top offset below 1200px · New
Restore focus to opening control on drawer close · New

4 resolved since last review

🧠 Review effort: Balanced

+- derived fee share, stake share, `min()`, gap
+- reward cut, fee cut (already present)
+
+Per-round series of those same fields is 803's schema, not a second one. Design 802's window as a sum over the rounds 803 will store. Validator score fields belong to 804, not this ticket.


+        }
+        .page-frame.is-drawer-open .pf-rail {
+          display: block;
+          position: fixed;


+          var drawer = frame.querySelector(".pf-drawer");
+          var toggle = drawer && drawer.querySelector("[data-drawer-focus]");
+          frame.classList.toggle("is-drawer-open", open);
+          if (drawer) drawer.classList.toggle("is-open", open);
+          if (toggle) {
+            toggle.setAttribute("aria-expanded", open ? "true" : "false");
+            toggle.setAttribute(
+              "aria-label",
+              open ? "Close amount drawer" : "Open amount drawer"
+            );
+          }
+          if (open) {
+            var input = amountInput(frame);
+            if (input) input.focus({ preventScroll: true });
+          }


Match 803 chip borders and ≥24px help targets; convert filter/action segs to radiogroups with keyboard; document icons + APG notes.

Copilot

🔵 Needs a closer look

The preview still has unresolved drawer positioning and keyboard-focus behavior.

3 open findings

Previously missed (1)

In code that hasn't changed since last review

Fix PDF link path to the repository root

design/mocks/mfs-delegation-802/802-mfs-delegation-ux.md:6

The PDF link resolves to design/Livepeer_2.0_Litepaper_September_2026_Draft.pdf, but the file is at the repository root. Add one more parent-directory segment so reviewers can open the protocol reference from this rationale.

🧠 Review effort: Balanced

Copilot

🔵 Needs a closer look

The mobile amount drawer still has positioning and keyboard-focus defects.

3 open findings

🧠 Review effort: Balanced

thebeyondr added 9 commits October 8, 2026 21:55

docs: add MFS UX preview and Explorer agent design rules

22f6aff

Stakeholder-ready mockups for #802 and durable UI guidance so future work matches the agreed MFS delegation patterns.

Merge branch 'main' into 802-design-mfs-delegation-ux

c2cdd01

docs: self-host Inter in MFS UX preview

0bd3fca

Vendored latin 400–700 woff2 from @fontsource/inter so the mock loads on file:// without Google Fonts or node_modules paths.

docs: organize design mocks under design/mocks with shared Inter

ca18cec

Keep bounty HTML previews next to each issue and load Inter once from design/mocks/shared so every mock stays consistent without Google Fonts.

docs: remove root MFS preview paths after the mocks move

9ab26cf

Drop the old repo-root HTML and font copies now that design/mocks owns them.

docs: refine MFS mobile list into a market-board card

2de5fbc

Twin fee/stake odds tiles, binding-only tint with a top fade, and aligned “caps rewards” copy so the mock matches how people scan prediction markets.

docs: keep delegation mock card links on theme colors

a469238

The whole card is an anchor, so without an explicit color the titles fell back to browser blue on the dark panel.

docs: tighten MFS delegation mock and day-one launch card

0e16bfb

Market-board mobile list, binding-only top fade, gateway→fees→stake checklist, and clearer review copy.

fix: repair shared Inter stylesheet comment for design mocks

eb2cd51

A glob in the CSS comment closed early and left invalid tokens before the first @font-face rule.

thebeyondr mentioned this pull request Oct 12, 2026

docs: MFS delegation UX mocks for #802 (superseded) thebeyondr/livepeer-explorer#1

Closed

thebeyondr self-assigned this Oct 12, 2026

thebeyondr linked an issue Oct 12, 2026 that may be closed by this pull request

Design new UX for MFS changes #802

Open

thebeyondr marked this pull request as ready for review October 12, 2026 21:43

thebeyondr requested a review from ECWireless as a code owner October 12, 2026 21:43

Copilot AI balanced review requested due to automatic review settings October 12, 2026 21:43

Copilot started reviewing on behalf of thebeyondr October 12, 2026 21:44

View session

vercel Bot deployed to Preview October 12, 2026 21:44

View deployment

Copilot AI reviewed Oct 12, 2026

View reviewed changes

thebeyondr force-pushed the 802-design-mfs-delegation-ux branch from 5d5210e to eb2cd51 Compare October 12, 2026 21:48

vercel Bot deployed to Preview October 12, 2026 21:49

View deployment

fix(a11y): address Copilot review on MFS and voting mocks (#837)

fba3edc

Tighten mock accessibility and layout to match AGENTS rules: skip links, reduced motion, hit targets, zoomable viewport guidance, and help triggers.

vercel Bot deployed to Preview October 12, 2026 21:58

View deployment

docs: shorten day-one gateway step to one-line copy

858ecd1

vercel Bot deployed to Preview October 12, 2026 23:52

View deployment

thebeyondr added 3 commits October 13, 2026 15:17

docs: show mock help popovers and bonded “you’re earning” copy

5c86f65

Reviewers need hover/focus tooltips on the list help markers, and the delegating card should speak to an already-bonded stake, not leftover room.

docs: restore familiar orchestrator columns without group labels

1002a6b

Keep MFS decision columns first, demote yield/stake/fees as quieter context, and drop ranks and the sort banner.

docs: frame orchestrating detail beside the delegate rail

23c113c

Show the reward-cap card as the top span of the Orchestrating 2-column grid with a right-rail amount box, matching widths and notes.

Copilot started reviewing on behalf of thebeyondr October 14, 2026 00:51

View session

vercel Bot deployed to Preview October 14, 2026 00:52

View deployment

Copilot AI reviewed Oct 14, 2026

View reviewed changes

Comment thread design/mocks/mfs-delegation-802/index.html Outdated

Comment thread design/mocks/governance-voting/index.html

fix(a11y): keep visible drawer bar in the accessibility tree (#837)

805d27e

Copilot AI balanced review requested due to automatic review settings October 14, 2026 00:58

Copilot started reviewing on behalf of thebeyondr October 14, 2026 00:58

View session

vercel Bot deployed to Preview October 14, 2026 00:58

View deployment

Copilot AI reviewed Oct 14, 2026

View reviewed changes

Comment thread design/mocks/mfs-delegation-802/index.html Outdated

design(802): map fees/stake to Livepeer brand blue and green

b1ecfa8

Drop violet for stake; use brand green for LPT/shares and brand blue for fees. Update AGENTS and rationale copy so green means quantity, not good.

Copilot AI balanced review requested due to automatic review settings October 15, 2026 20:39

Copilot started reviewing on behalf of thebeyondr October 15, 2026 20:39

View session

vercel Bot deployed to Preview October 15, 2026 20:40

View deployment

Copilot AI reviewed Oct 15, 2026

View reviewed changes

Comment thread design/mocks/mfs-delegation-802/index.html

Comment thread design/mocks/mfs-delegation-802/index.html

Comment thread design/mocks/mfs-delegation-802/index.html Outdated

Copilot AI balanced review requested due to automatic review settings October 15, 2026 20:57

Copilot started reviewing on behalf of thebeyondr October 15, 2026 20:58

View session

vercel Bot deployed to Preview October 15, 2026 20:58

View deployment

Copilot AI reviewed Oct 15, 2026

View reviewed changes

thebeyondr added 2 commits October 15, 2026 16:46

feat(802): a11y radiogroups and shared MFS status icon canon.

05c677f

Match 803 chip borders and ≥24px help targets; convert filter/action segs to radiogroups with keyboard; document icons + APG notes.

Update docs.

0a8d5a3

Copilot AI balanced review requested due to automatic review settings October 16, 2026 00:20

Copilot started reviewing on behalf of thebeyondr October 16, 2026 00:21

View session

vercel Bot deployed to Preview October 16, 2026 00:21

View deployment

Copilot AI reviewed Oct 16, 2026

View reviewed changes

chore(802): remove litepaper PDF and cliff-note links

204189d

Copilot AI balanced review requested due to automatic review settings October 16, 2026 00:58

Copilot started reviewing on behalf of thebeyondr October 16, 2026 00:59

View session

vercel Bot deployed to Preview October 16, 2026 00:59

View deployment

Copilot AI reviewed Oct 16, 2026

View reviewed changes

Conversation

thebeyondr commented Oct 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

For #802

Summary

Screenshots

Test plan

Uh oh!

vercel Bot commented Oct 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thebeyondr commented Oct 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ECWireless commented Oct 13, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

thebeyondr commented Oct 14, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

thebeyondr commented Oct 12, 2026 •

edited

Loading

vercel Bot commented Oct 12, 2026 •

edited

Loading