feat(ui): redesign /agents as a numbered onboarding sequence - #8457
feat(ui): redesign /agents as a numbered onboarding sequence#8457JSONbored wants to merge 3 commits into
Conversation
Restructures the seven equal-weight sections into a graded 4-step sequence (hand off context, connect your client, query the registry live, deeper integrations), each with one primary action instead of three competing "Or..." blocks. The copyable agent.md prompt is now shown as a live preview instead of a buried link, and Ask/Search are unified into one tabbed live-query card. Adds a server-side proxy for agent.md since that asset has no CORS header, and a `step` prop on SectionHeading for the numbered rail. Closes #8455
|
Warning ⏸️ LoopOver review result - manual review recommendedReview updated: 2026-07-28 00:52:05 UTC
Review summary Nits — 7 non-blocking
Decision drivers
Context & advisory signals — never blocks the verdict
Linked issue satisfactionPartially addressed Review context
Contributor next steps
Signal definitions
🧪 Chat with LoopOverAsk LoopOver a question about this PR directly in a comment — grounded only in the same cached, public-safe facts shown above, never a new claim.
Full command reference: https://loopover.ai/docs/loopover-commands 🧪 Experimental — new and may change. Decision record
Visual preview
Click any thumbnail to open the full-size screenshot. Before = production · After = this PR's preview deploy. Scroll preview
A short scroll-through clip (desktop) — click either thumbnail to open the full animation. Evidence for scroll-linked behavior a single screenshot can't show. 🟩 Safe / merged · 🟦 Advisory · 🟨 Held for review · 🟥 Blocked / closed 💰 Earn for open-source contributions like this. Gittensor lets GitHub contributors earn for the work they already do — register to start earning →. Checked by LoopOver, a quiet PR intelligence layer for OSS maintainers.
|
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
metagraphed-ui | ddcd56b | Commit Preview URL Branch Preview URL |
Jul 28 2026, 12:08 AM |
|
Superagent didn't find any vulnerabilities or security issues in this PR. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8457 +/- ##
=======================================
Coverage 97.81% 97.81%
=======================================
Files 419 419
Lines 29074 29074
Branches 10931 10931
=======================================
Hits 28440 28440
Misses 143 143
Partials 491 491 🚀 New features to boost your workflow:
|
Every existing masthead title is 1-2 words, so the h1's `truncate` never visibly triggered until /agents' longer "Use AI to explore Bittensor" hit it, clipping to "Use AI to explore B..." on mobile. Removes the truncate and switches the live-dot row to items-start so the dot stays pinned to the title's first line when it wraps. Closes #8458
Every masthead renders <ActionBar><ShareButton bare /></ActionBar>, and bare alone keeps the "Share view" label -- only iconOnly/connected hid it. On a narrow viewport that bordered text pill was the widest, loudest element in the masthead, most visible next to a longer title (found via /agents, #8455/#8457). Share is a self-explanatory icon; the label earns its place back at sm and up. One component change fixes every masthead at once -- no per-page changes needed. Desktop/tablet unchanged. Closes #8467
1 participant
Summary
Redesigns
/agentsfrom seven equal-weight sections into a numbered 4-stepsequence, inspired by a comparable AI-agents page from another Bittensor
subnet (Allways/SN7) that reads top-to-bottom with graded weight and one
primary action per step.
What changed
agent.mdprompt is now shown as alive, scrollable preview next to the copy action (via a new server
function, since
agent.mdhas no CORS header for a client-side fetch),not just a link buried 13th of 13 in a flat table.
into one card instead of three co-equal "Or install the SDK" / "Or add
the skill" / "Or drop into a chat" sections.
card (was two separate, visually equal boxes) with the matching curl
shown alongside the result.
with a reasoned 2-col card grid (one-line "why" per resource).
Also adds a
stepprop toSectionHeading(packages/ui-kit) for thenumbered rail, and rebuilds
packages/ui-kit/distaccordingly.No new route; reuses the existing Bone & Ink tokens and components
throughout — no new visual language introduced.
Follow-up fixes (from review)
truncateon the h1 with no wrap fallback —every other masthead title is 1-2 words so this never visibly triggered
until /agents' longer "Use AI to explore Bittensor" clipped to "Use AI to
explore B..." on mobile. Now wraps instead of truncating; the live dot
stays pinned to the title's first line. See
apps/ui/src/components/metagraphed/primitives/page-masthead.tsx.masthead (
<ActionBar><ShareButton bare /></ActionBar>, ~20 pages) — ona narrow viewport that bordered text pill was the widest element in the
masthead, worst next to a longer title. Now hides the label below
smand shows it at
smand up, everywhere at once (one component change,no per-page edits). See
packages/ui-kit/src/components/metagraphed/share-button.tsx.Validation
npm run lint --workspace=apps/ui— clean (0 errors; pre-existing warn-tier warnings elsewhere, none in touched files)npm run format:check --workspace=apps/ui— cleannpm run typecheck --workspace=apps/ui— cleannpm test --workspace=apps/ui— 1630 passed, 1 skipped (207 files)npm run test:e2e --workspace=apps/ui— 40 passed (responsive-overflow + others)npm run build --workspace=apps/ui— succeedspackages/ui-kitrebuilt anddistcommitted, its own lint/typecheck/test all clean/subnets(a second masthead consumer) at mobile width — icon-only, no layout breakScreenshots
before
after
before
after
before
after
before
after
before
after
before
after
Closes #8455
Closes #8458
Closes #8467