feat: new design for mcp page by C0mberry · Pull Request #1353 · solana-foundation/explorer

C0mberry · 2026-09-29T17:01:03Z

Description

updating the design of mcp page
adding a hook for navigation via keyboard

Type of change

New feature

Screenshots

Testing

mcp page

Related Issues

HOO-1564

Checklist

My code follows the project's style guidelines
I have added tests that prove my fix/feature works
All checks pass locally (pnpm test, pnpm lint, pnpm typecheck)
I have run build:info script to update build information
CI/CD checks pass on the PR
Screenshots included — required for protocol screens, recommended for other UI changes

vercel · 2026-09-29T17:01:07Z

@C0mberry is attempting to deploy a commit to the Solana Foundation Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2026-09-29T17:01:48Z

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

Project	Deployment	Actions	Updated
explorer	Ready	Preview	Oct 12, 2026 12:26pm UTC

greptile-apps · 2026-09-29T17:10:06Z

Confidence Score: 5/5

[Medium impact] The PR appears safe to merge, with four non-blocking findings from earlier reviews still open.

Findings

CTA dots seed off-screen ▶
Answer pulls readers back ▶
Tool tabs lose panel access ▶
Completed answer restarts ▶

Summary

The PR redesigns the MCP setup page with a full-width layout, client setup cards, tool details, and animated example answers.

The MCP start page guides visitors through setup and instructions in a new full-width layout.
Tool cards show request and response examples for each MCP tool.
Example questions open prepared answers in a chat-style view.
Green particles pull toward the page's setup calls to action.
Tabs work with keyboard input and track the section in view.

_{Reviews (4) · Last reviewed commit: "docs(shared): shorten the useEdgeFades J..." · Reviewed by Greptile}

greptile-apps · 2026-09-29T17:10:09Z

                setStatus({
                    ms: Math.round(performance.now() - started),
-                    state: probeState(response.status),
+                    state: response.status === 503 ? 'disabled' : 'ready',


Restricted endpoints appear ready

If a deployment requires an MCP access key, GET /mcp returns 401; a blocked IP gets 403. This probe labels both responses ready, while the page says no key is needed and offers only keyless configurations. Those configurations cannot connect. Preserve the restricted and blocked states and their setup guidance.

Knowledge Base Used: MCP service and telemetry

greptile-apps · 2026-09-29T17:10:10Z

                setStatus({
                    ms: Math.round(performance.now() - started),
-                    state: probeState(response.status),
+                    state: response.status === 503 ? 'disabled' : 'ready',


Server failures appear ready

If MCP handler construction or processing fails, GET /mcp can return 500. The new probe maps that response to ready, so visitors see a green “Ready” indicator for a service that cannot handle requests. Server errors need to be shown as unavailable.

Knowledge Base Used: MCP service and telemetry

greptile-apps · 2026-09-29T17:10:10Z

+                    onClick={() => setExpanded(value => !value)}
+                    className={cn(
+                        'flex w-full cursor-pointer items-center justify-center border-0 border-t border-solid border-dark-border',
+                        'bg-transparent py-3 font-mono text-xs uppercase tracking-widest text-heavy-metal-300 hover:text-dark-foreground sm:hidden',


Tablet instructions cannot expand

At widths from roughly 577 to 767px, isMobile limits the agent-instructions snippet to 168px, but sm:hidden hides its “Show more” button. Readers at those widths cannot view the rest of the instructions. The content clamp and its control need matching breakpoints.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

greptile-apps · 2026-09-29T17:10:10Z

+            <CodeCard
+                code={active.snippet(origin)}
+                header={<CardTabs items={SETUP_CLIENTS} onChange={setClient} value={client} />}
+            />
+            <p className="m-0 flex w-full items-start gap-2.5 text-sm leading-5 text-heavy-metal-300">
+                <Check size={14} aria-hidden className="mt-1 shrink-0 text-dark-accent" />
+                {active.verify}


Setup destinations are missing

The setup card displays the snippet and verification text but no longer displays active.where. That field contains the config-file paths for Cursor and Windsurf and the UI steps for VS Code. Visitors receive a configuration or URL without being told where to put it, leaving those setup instructions incomplete.

Knowledge Base Used: MCP service and telemetry

greptile-apps · 2026-09-29T17:10:10Z

+                    ['metadataPointer', 'points at the mint itself', 'authority: null — nobody'],
+                    ['tokenMetadata', 'name, symbol, uri; no extra fields', 'updateAuthority: null — nobody'],
+                ],
+            },
+            {
+                kind: 'text',
+                text: 'Mint and freeze authorities are null too, and the extensions that carry real issuer power — permanentDelegate, transferHook, transferFeeConfig, confidential transfers — are simply absent.',


Metadata caveat was removed

The Token-2022 answer says nobody can change the metadata and lists absent issuer powers, but no longer explains that control of the referenced off-chain metadata domain can still change the displayed name, image, and description. Restoring that distinction would keep readers from mistaking renounced on-chain authority for immutable presentation metadata.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

greptile-apps · 2026-09-29T17:10:10Z

+    const handleReset = () => {
+        pendingBottom.current = boxRef.current?.getBoundingClientRect().bottom;
+        setPicked(undefined);
+    };


Reset loses keyboard focus

Activating “Ask other question” removes the focused button and replaces its answer view with the picker, but focus is not moved to a new control. Keyboard users lose their place and must navigate back to the question buttons. Restore focus to the picker or its first choice after reset.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

greptile-apps · 2026-09-29T17:10:10Z

+    const { onKeyDown, tabRefs } = useTablistKeyboard<HTMLAnchorElement>(
+        SECTIONS.length,
+        SECTIONS.findIndex(section => section.id === active),
+        index => scrollToSection(SECTIONS[index].id),


Rapid arrows repeat sections

Arrow navigation calculates the next section from the scroll-spy selection, which updates only as smooth scrolling progresses. Two quick ArrowRight presses can therefore target the same section twice instead of advancing twice. Use the focused tab as the starting point, or update selection when navigation begins.

greptile-apps · 2026-09-29T17:10:10Z

+        const seed = () => {
+            const cap = restingCap(resolveCtaField(phone ? 'base' : desktopScope).density);
+            while (dots.length < cap) spawn(true);
+        };
+        seed();


CTA dots seed off-screen

Both full-width CTAs seed hundreds to thousands of dots as soon as the page mounts, including the off-screen closing CTA. When visible, each also draws and processes its dots every animation frame. This adds initial work and risks scroll jank on constrained devices; defer seeding until visible and reduce the per-frame workload.

…r/1353/feat/hoo-1564-update-design-for-mcp-page # Conflicts: # app/shared/ui/navigation-tabs/ui/BaseNavigationTabs.tsx

greptile-apps · 2026-10-12T12:14:30Z

+        window.addEventListener('wheel', takeOver, { passive: true });
+        window.addEventListener('touchmove', takeOver, { passive: true });
+        window.addEventListener('keydown', onKey);


Answer pulls readers back

While an example answer is appearing, clicking a section tab or dragging the scrollbar does not stop useStickToBottom. It only stops for wheel, touch, and certain key events. Its next frame scrolls back toward the answer, fighting the reader's navigation.

Stop following when the reader uses those other controls, while distinguishing the hook's own scrolling.

greptile-apps · 2026-10-12T12:14:30Z

+                <div className="flex w-full items-stretch gap-2.5 border-0 border-b border-solid border-dark-border px-5">
+                    <CardTabs items={TOOL_VIEWS} onChange={setView} value={view} />
+                </div>
+                <div className="w-full">{view === 'request' ? request : response}</div>


Tool tabs lose panel access

The replacement for the Radix tabs gives the buttons role="tab", but the content in Tools is a plain, unfocusable div. No IDs link the tabs to their content. Screen readers lose the named tab panel, and pressing Tab skips the static request or response content.

Give each panel role="tabpanel", a focus target, and matching aria-controls and aria-labelledby links.

greptile-apps · 2026-10-12T12:14:30Z

+        const toThinking = setTimeout(() => setPhase('thinking'), SENDING_MS);
+        const toTyping = setTimeout(() => setPhase('typing'), SENDING_MS + THINKING_MS);
+        return () => {
+            clearTimeout(toThinking);
+            clearTimeout(toTyping);
+        };
+    }, [reduced]);


Completed answer restarts

Turning reduced motion off while an answer is open schedules thinking and typing again, even if the answer is complete. The typing loop then starts from zero, hiding and replaying the answer.

Keep completed answers in done; changing the motion preference should not restart them.

C0mberry added 4 commits September 28, 2026 17:06

adopt new design for the MCP start page

70a0528

scope sticky-header-height to real sticky headers

2e6261e

polish start-page tabs, headings and table keys

2968f20

comments removal

90c3d29

vercel Bot deployed to Preview September 29, 2026 17:03 View deployment

greptile-apps Bot reviewed Sep 29, 2026

View reviewed changes

resolve review findings on the start-page redesign

bd8aec9

C0mberry mentioned this pull request Sep 30, 2026

feat(mcp): add v3/v3.2 docs variants and version switcher hoodieshq/explorer#139

Closed

2 of 10 tasks

vercel Bot deployed to Preview September 30, 2026 11:28 View deployment

askov reviewed Oct 6, 2026

View reviewed changes

Merge branch 'master' of github.com:solana-foundation/explorer into p…

8cf8bd0

…r/1353/feat/hoo-1564-update-design-for-mcp-page # Conflicts: # app/shared/ui/navigation-tabs/ui/BaseNavigationTabs.tsx

vercel Bot deployed to Preview October 12, 2026 12:09 View deployment

greptile-apps Bot reviewed Oct 12, 2026

View reviewed changes

rogaldh added 7 commits October 12, 2026 13:18

fix(tabs): leave modified arrow keys to the browser

d77875d

refactor(tabs): name the scroll-spy activation line

de74974

refactor(tabs): rename useScrollSpy to use-scroll-spy

679c4ec

docs(mcp-docs): shorten the useStickToBottom JSDoc

9b58393

refactor(mcp-docs): rename useStickToBottom to use-stick-to-bottom

8bff052

refactor(mcp-docs): rename ctaFieldTuning to cta-field-tuning

bd7e501

docs(shared): shorten the useEdgeFades JSDoc

19b23bc

vercel Bot deployed to Preview October 12, 2026 12:26 View deployment

askov approved these changes Oct 12, 2026

View reviewed changes

Woody4618 added this pull request to the merge queue Oct 14, 2026

Merged via the queue into solana-foundation:master with commit 9b96adf Oct 14, 2026
12 checks passed

Conversation

C0mberry commented Sep 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Screenshots

Testing

Related Issues

Checklist

Uh oh!

vercel Bot commented Sep 29, 2026

Uh oh!

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

Uh oh!

Uh oh!

greptile-apps Bot commented Sep 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Confidence Score: 5/5

Findings

Summary

Uh oh!

greptile-apps Bot Sep 29, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Sep 29, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Sep 29, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Sep 29, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Sep 29, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Sep 29, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Sep 29, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Sep 29, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

greptile-apps Bot Oct 12, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Oct 12, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Oct 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

C0mberry commented Sep 29, 2026 •

edited

Loading

vercel Bot commented Sep 29, 2026 •

edited

Loading

greptile-apps Bot commented Sep 29, 2026 •

edited

Loading