From cbd95bb0c5a4031f8b2107654f15e828b3b9a00c Mon Sep 17 00:00:00 2001
From: Tania Markina <tania.markina@hoodies.team>
Date: Fri, 2 Oct 2026 13:48:40 +0200
Subject: [PATCH 1/9] single-row navbar with in-bar search and cluster dropdown

---
 app/components/Navbar.tsx                     | 152 +++++-----
 app/components/navbar/NavGroup.tsx            | 123 ++++++++
 app/components/navbar/NavSearch.tsx           | 200 +++++++++++++
 app/components/navbar/shared.tsx              |  74 +++++
 app/components/shared/focus-rule.ts           |  27 ++
 app/components/shared/ui/dialog.tsx           |   6 +-
 app/entities/cluster/index.ts                 |   1 +
 app/features/cluster-switcher/client.ts       |   6 +
 app/features/cluster-switcher/index.ts        |   2 +-
 .../lib/__tests__/cluster-storage.spec.ts     | 158 ++++++++--
 .../cluster-switcher/lib/cluster-storage.ts   |  68 ++---
 .../lib/endpoint-provenance.ts                |  20 ++
 .../__tests__/use-custom-url-draft.spec.tsx   |  73 ++++-
 .../model/use-custom-url-draft.ts             |  65 ++---
 .../model/use-saved-clusters.ts               |  24 ++
 .../cluster-switcher/ui/ClusterDropdown.tsx   | 102 +++++++
 .../cluster-switcher/ui/ClusterMenu.tsx       | 270 ++++++++++++++++++
 .../ui/ClusterStatusButton.tsx                |  87 ------
 .../ui/CustomUrlConsentDialog.tsx             | 184 +++++++-----
 .../cluster-switcher/ui/EndpointForm.tsx      |  87 ++++++
 .../cluster-switcher/ui/SavedClusterList.tsx  |  43 +--
 .../cluster-switcher/ui/SavedEndpointRow.tsx  | 193 +++++++++++++
 ...ClusterStatusButton.responsive.stories.tsx |  33 ---
 .../ClusterStatusButton.stories.tsx           |  99 -------
 .../ui/__tests__/ClusterModal.spec.tsx        |   6 +-
 .../ui/__tests__/ClusterStatusButton.spec.tsx | 106 -------
 .../__tests__/CustomUrlConsentDialog.spec.tsx |   6 +-
 .../PendingCustomUrlConsent.spec.tsx          |   4 +-
 .../ui/cluster-row-classes.ts                 |  15 +
 .../cluster-switcher/ui/provenance-mark.tsx   |  36 +++
 app/features/search/ui/BaseSearch.tsx         |  48 ++--
 app/features/search/ui/SearchFilters.tsx      |  14 +-
 app/features/search/ui/SearchGroupHeading.tsx |   6 +-
 app/features/search/ui/SearchResultItem.tsx   |  10 +-
 app/layout.tsx                                |  11 +-
 app/shared/lib/scrollToTop.ts                 |   4 +
 tailwind.config.ts                            |   5 +-
 37 files changed, 1700 insertions(+), 668 deletions(-)
 create mode 100644 app/components/navbar/NavGroup.tsx
 create mode 100644 app/components/navbar/NavSearch.tsx
 create mode 100644 app/components/navbar/shared.tsx
 create mode 100644 app/components/shared/focus-rule.ts
 create mode 100644 app/features/cluster-switcher/client.ts
 create mode 100644 app/features/cluster-switcher/lib/endpoint-provenance.ts
 create mode 100644 app/features/cluster-switcher/model/use-saved-clusters.ts
 create mode 100644 app/features/cluster-switcher/ui/ClusterDropdown.tsx
 create mode 100644 app/features/cluster-switcher/ui/ClusterMenu.tsx
 delete mode 100644 app/features/cluster-switcher/ui/ClusterStatusButton.tsx
 create mode 100644 app/features/cluster-switcher/ui/EndpointForm.tsx
 create mode 100644 app/features/cluster-switcher/ui/SavedEndpointRow.tsx
 delete mode 100644 app/features/cluster-switcher/ui/__stories__/ClusterStatusButton.responsive.stories.tsx
 delete mode 100644 app/features/cluster-switcher/ui/__stories__/ClusterStatusButton.stories.tsx
 delete mode 100644 app/features/cluster-switcher/ui/__tests__/ClusterStatusButton.spec.tsx
 create mode 100644 app/features/cluster-switcher/ui/cluster-row-classes.ts
 create mode 100644 app/features/cluster-switcher/ui/provenance-mark.tsx
 create mode 100644 app/shared/lib/scrollToTop.ts

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index c3867c922..dab2faa74 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -1,107 +1,87 @@
 'use client';
 
 import { cn } from '@components/shared/utils';
-import { ClusterStatusButton } from '@features/cluster-switcher';
-import Logo from '@img/logos-solana/dark-explorer-logo.svg';
-import { useDisclosure } from '@mantine/hooks';
-import { useClusterPath } from '@utils/url';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useSelectedLayoutSegment, useSelectedLayoutSegments } from 'next/navigation';
-import React, { ReactNode } from 'react';
-import { Menu } from 'react-feather';
+import { ClusterDropdown } from '@features/cluster-switcher';
+import React, { type ReactNode, useRef, useState } from 'react';
 
-import { ExternalLink } from '@/app/components/shared/ui/external-link';
-import { NavbarItem, NavbarLink, NavbarList } from '@/app/shared/ui/Navbar';
+import { NavLinks, NavMenu } from './navbar/NavGroup';
+import { NavSearch } from './navbar/NavSearch';
+import { BAR_CLASSES, BrandLockup, GUTTER_CLASSES, useNavRoutes } from './navbar/shared';
 
 export interface INavbarProps {
     children?: ReactNode;
 }
 
 export function Navbar({ children }: INavbarProps) {
-    const [navOpened, navHandlers] = useDisclosure(false);
-    const homePath = useClusterPath({ pathname: '/' });
-    const featureGatesPath = useClusterPath({ pathname: '/feature-gates' });
-    const inspectorPath = useClusterPath({ pathname: '/tx/inspector' });
-    const selectedLayoutSegment = useSelectedLayoutSegment();
-    const selectedLayoutSegments = useSelectedLayoutSegments();
+    const [searchOpened, setSearchOpened] = useState(false);
+    const [clusterOpened, setClusterOpened] = useState(false);
+    const [menuOpened, setMenuOpened] = useState(false);
+    const routes = useNavRoutes();
+    const slotRef = useRef<HTMLSpanElement>(null);
+
+    const onSearchOpenChange = (open: boolean) => {
+        if (open) {
+            setMenuOpened(false);
+            setClusterOpened(false);
+        }
+        setSearchOpened(open);
+    };
+    const onClusterOpenChange = (open: boolean) => {
+        if (open) {
+            setMenuOpened(false);
+            setSearchOpened(false);
+        }
+        setClusterOpened(open);
+    };
+    const onMenuOpenChange = (open: boolean) => {
+        if (open) {
+            setClusterOpened(false);
+            setSearchOpened(false);
+        }
+        setMenuOpened(open);
+    };
 
     return (
-        <nav className="flex flex-wrap items-center bg-dk-gray-800-dark py-3 text-dk-white">
+        <nav className={cn('py-3', BAR_CLASSES)}>
             <div
-                // Per-breakpoint max-widths mirror Bootstrap `.container` (sm 540 / md 720 / lg 960 / xl 1140 / xxl 1320) so logo + links land in the same gutter as before the shell migration.
-                className="mx-auto flex w-full flex-wrap items-center justify-between px-6 sm:max-w-[540px] md:max-w-[720px] lg:max-w-[960px] xl:max-w-[1140px] xxl:max-w-[1320px]"
+                className={cn(
+                    'relative flex items-center gap-1.5 xs:gap-2',
+                    'lg:grid lg:grid-cols-[minmax(112px,1fr)_minmax(0,720px)_1fr] lg:gap-4',
+                    GUTTER_CLASSES,
+                )}
             >
-                <Link href={homePath}>
-                    <Image alt="Solana Explorer" height={22} src={Logo} width={214} priority />
-                </Link>
-
-                <button
-                    type="button"
-                    aria-label="Toggle navigation"
-                    onClick={navHandlers.toggle}
-                    className="rounded-dk border border-solid border-transparent bg-transparent px-0 py-1 text-dk-gray-700 lg:hidden"
-                >
-                    <Menu size={24} aria-hidden />
-                </button>
+                <BrandLockup />
 
-                <div className="flex hidden h-full grow items-center pl-6 pr-2 xl:block" style={{ minWidth: 0 }}>
-                    {children}
-                </div>
+                <div className="contents lg:flex lg:min-w-0 lg:items-center lg:gap-2">
+                    <NavSearch
+                        open={searchOpened}
+                        onOpenChange={onSearchOpenChange}
+                        dockClassName="sm:ml-auto sm:max-w-[720px] lg:ml-0 lg:max-w-none"
+                        restClassName="left-[calc(100%-184px)] right-[146px] xs:left-[calc(100%-239px)] xs:right-[201px]"
+                        slotRef={slotRef}
+                    >
+                        {children}
+                    </NavSearch>
 
-                <div
-                    className={cn(
-                        // The lg: row layout is unconditional: `navOpened` only drives the below-lg drawer, and it
-                        // survives a resize past the breakpoint where the toggle that set it is no longer rendered.
-                        'ml-auto shrink-0 lg:flex lg:w-auto lg:flex-row lg:items-center',
-                        navOpened ? 'flex w-full flex-col' : 'hidden',
-                    )}
-                >
-                    <NavbarList className="mr-auto flex-col lg:flex-row">
-                        <NavbarItem>
-                            <NavbarLink asChild active={selectedLayoutSegment === 'feature-gates'}>
-                                <Link href={featureGatesPath}>Feature Gates</Link>
-                            </NavbarLink>
-                        </NavbarItem>
-                        <NavbarItem>
-                            <NavbarLink asChild active={selectedLayoutSegment === 'mcp'}>
-                                <Link href="/mcp/start">MCP</Link>
-                            </NavbarLink>
-                        </NavbarItem>
-                        <NavbarItem>
-                            <NavbarLink
-                                asChild
-                                active={
-                                    selectedLayoutSegments[0] === 'tx' && selectedLayoutSegments[1] === '(inspector)'
-                                }
-                            >
-                                <Link href={inspectorPath}>Inspector</Link>
-                            </NavbarLink>
-                        </NavbarItem>
-                        {/* Centred only in the lg row; the drawer stacks vertically, where centring breaks the left edge the text links share. */}
-                        <NavbarItem className="flex items-center lg:justify-center">
-                            <ExternalLink
-                                aria-label="GitHub Repository"
-                                href="https://github.com/solana-foundation/explorer"
-                                // mx-2 matches the text links' px-2 so the drawer shares one left edge; lg restores the row spacing.
-                                className="mx-2 lg:mx-3"
-                            >
-                                <svg width="30" height="30" viewBox="0 0 98 98" xmlns="http://www.w3.org/2000/svg">
-                                    <path
-                                        fillRule="evenodd"
-                                        clipRule="evenodd"
-                                        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-                                        fill="#fff"
-                                    />
-                                </svg>
-                            </ExternalLink>
-                        </NavbarItem>
-                    </NavbarList>
+                    <div className="ml-auto flex shrink-0 items-center gap-1.5 xs:gap-2 sm:ml-0">
+                        <span ref={slotRef} aria-hidden className="block h-[38px] w-[38px] sm:hidden" />
+                        <ClusterDropdown
+                            align="end"
+                            open={clusterOpened}
+                            onOpenChange={onClusterOpenChange}
+                            className="w-[80px] xs:w-[131px] sm:w-[142px] md:w-[170px]"
+                        />
+                    </div>
                 </div>
 
-                <div className="ml-[3px] hidden max-w-[210px] shrink-0 lg:block">
-                    <ClusterStatusButton />
-                </div>
+                <NavLinks routes={routes} className="hidden lg:flex lg:justify-self-end" />
+                <NavMenu
+                    routes={routes}
+                    filled
+                    open={menuOpened}
+                    onOpenChange={onMenuOpenChange}
+                    className="lg:hidden"
+                />
             </div>
         </nav>
     );
diff --git a/app/components/navbar/NavGroup.tsx b/app/components/navbar/NavGroup.tsx
new file mode 100644
index 000000000..29149e6f2
--- /dev/null
+++ b/app/components/navbar/NavGroup.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@components/shared/ui/dropdown-menu';
+import { cn } from '@components/shared/utils';
+import Link from 'next/link';
+import React from 'react';
+import { Menu } from 'react-feather';
+
+import { ExternalLink } from '@/app/components/shared/ui/external-link';
+
+import {
+    EXPLORER_REPO_URL,
+    FILLED_CONTROL_CLASSES,
+    FOCUS_RULE_CLASSES,
+    focusRuleStyle,
+    GitHubMark,
+    isKeyboardFocus,
+    type NavRoute,
+    OUTLINED_CONTROL_CLASSES,
+} from './shared';
+
+/** The destinations as plain text links, with the repo glyph after them. Shown in the wide bar. */
+export function NavLinks({ className, routes }: { className?: string; routes: NavRoute[] }) {
+    return (
+        <ul className={cn('m-0 flex list-none items-center gap-1 p-0', className)}>
+            {routes.map(route => (
+                <li key={route.id}>
+                    <Link
+                        href={route.href}
+                        aria-current={route.active ? 'page' : undefined}
+                        className={cn(
+                            'block whitespace-nowrap px-2 py-2.5 text-sm no-underline transition-colors',
+                            route.active ? 'text-white' : 'text-outer-space-300 hover:text-white',
+                        )}
+                    >
+                        {route.label}
+                    </Link>
+                </li>
+            ))}
+            <li>
+                <ExternalLink
+                    aria-label="Explorer repo"
+                    href={EXPLORER_REPO_URL}
+                    className="flex items-center px-2 text-outer-space-300 transition-colors hover:text-white"
+                >
+                    <GitHubMark className="h-[18px] w-[18px]" />
+                </ExternalLink>
+            </li>
+        </ul>
+    );
+}
+
+export function NavMenu({
+    className,
+    filled,
+    onOpenChange,
+    open,
+    routes,
+}: {
+    className?: string;
+    filled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    routes: NavRoute[];
+}) {
+    const [focused, setFocused] = React.useState(false);
+
+    return (
+        <DropdownMenu modal={false} open={open} onOpenChange={onOpenChange}>
+            <DropdownMenuTrigger asChild>
+                <button
+                    type="button"
+                    aria-label="Open navigation"
+                    style={filled ? focusRuleStyle(focused || Boolean(open)) : undefined}
+                    onFocus={event => setFocused(isKeyboardFocus(event.currentTarget))}
+                    onBlur={() => setFocused(false)}
+                    className={cn(
+                        filled ? FILLED_CONTROL_CLASSES : OUTLINED_CONTROL_CLASSES,
+                        filled ? FOCUS_RULE_CLASSES : 'data-[state=open]:border-outer-space-500',
+                        className,
+                    )}
+                >
+                    <Menu size={18} aria-hidden />
+                </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" sideOffset={4} className="w-56 p-1.5">
+                {routes.map(route => (
+                    <DropdownMenuItem key={route.id} asChild>
+                        <Link
+                            href={route.href}
+                            aria-current={route.active ? 'page' : undefined}
+                            className={cn(
+                                'cursor-pointer px-3 py-2 no-underline',
+                                route.active ? 'text-white' : 'text-outer-space-300',
+                            )}
+                        >
+                            {route.label}
+                            {route.active && (
+                                <span aria-hidden className="ml-auto h-1.5 w-1.5 rounded-full bg-[#1dd79b]" />
+                            )}
+                        </Link>
+                    </DropdownMenuItem>
+                ))}
+                <DropdownMenuSeparator />
+                <DropdownMenuItem asChild>
+                    <ExternalLink
+                        href={EXPLORER_REPO_URL}
+                        className="flex cursor-pointer items-center gap-2 px-3 py-2 text-outer-space-300 no-underline"
+                    >
+                        <GitHubMark className="h-4 w-4" />
+                        Explorer repo
+                    </ExternalLink>
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}
diff --git a/app/components/navbar/NavSearch.tsx b/app/components/navbar/NavSearch.tsx
new file mode 100644
index 000000000..250c54b86
--- /dev/null
+++ b/app/components/navbar/NavSearch.tsx
@@ -0,0 +1,200 @@
+'use client';
+
+import { cn } from '@components/shared/utils';
+import { useHotkeys } from '@mantine/hooks';
+import React, { type ReactNode, type RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
+import { Search, X } from 'react-feather';
+
+const GROUND = 'oklch(30.098% 0.01205 160.58)';
+
+const BELOW_DOCK =
+    '[@media(max-width:575px)]:[&_kbd]:hidden [@media(max-width:575px)]:[&_[data-search-frame]]:!pr-[38px] [@media(max-width:575px)]:[&_[data-search-frame]>button]:!hidden';
+
+const STRIP_SEARCH_FRAME =
+    '[&_[data-search-frame]]:!border-0 [&_[data-search-frame]]:!bg-transparent [&_[data-search-frame]]:!shadow-none [&_[data-search-frame]]:focus-within:!shadow-none [&_[data-search-frame]>svg]:!text-white';
+
+const ALIGN_SEARCH_PANEL =
+    '[&_[data-search-panel]]:!-ml-px [&_[data-search-panel]]:!w-[calc(var(--radix-popover-trigger-width)+2px)]';
+
+const FILL_SEARCH_HEIGHT = '[&>div]:h-full [&_[cmdk-root]]:h-full [&_[data-search-frame]]:!h-full';
+
+export interface NavSearchProps {
+    children: ReactNode;
+    dockClassName?: string;
+    onOpenChange: (open: boolean) => void;
+    open: boolean;
+    restClassName?: string;
+    slotRef?: RefObject<HTMLElement | null>;
+}
+
+export function NavSearch({ children, dockClassName, onOpenChange, open, restClassName, slotRef }: NavSearchProps) {
+    const fieldRef = useRef<HTMLDivElement>(null);
+    const toggleRef = useRef<HTMLButtonElement>(null);
+    const wasOpen = useRef(false);
+    const [slotInsets, setSlotInsets] = useState<{ left: number; right: number } | undefined>(undefined);
+    const [focused, setFocused] = useState(false);
+    const [ringVisible, setRingVisible] = useState(false);
+    const [hasText, setHasText] = useState(false);
+
+    useEffect(() => {
+        if (focused) {
+            setRingVisible(true);
+            return;
+        }
+        const timer = setTimeout(() => setRingVisible(false), 400);
+        return () => clearTimeout(timer);
+    }, [focused]);
+
+    useEffect(() => {
+        const slot = slotRef?.current;
+        const row = slot?.offsetParent;
+        if (!slot || !(row instanceof HTMLElement)) return;
+        const measure = () =>
+            setSlotInsets({ left: slot.offsetLeft, right: row.clientWidth - slot.offsetLeft - slot.offsetWidth });
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(row);
+        observer.observe(slot);
+        return () => observer.disconnect();
+    }, [slotRef]);
+
+    const litRule: React.CSSProperties | undefined =
+        open || ringVisible
+            ? {
+                  backgroundClip: 'padding-box, border-box',
+                  backgroundImage: [
+                      `linear-gradient(${GROUND}, ${GROUND})`,
+                      'radial-gradient(118% 130% at 0% 100%, rgba(29,215,155,0.53) 0%, rgba(29,215,155,0.46) 35%, rgba(29,215,155,0.4) 65%, rgba(29,215,155,0.34) 90%, rgba(29,215,155,0.31) 100%)',
+                  ].join(', '),
+                  backgroundOrigin: 'border-box',
+                  backgroundPosition: '0 0, left bottom',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: '100% 100%, 100% 100%',
+                  borderColor: focused ? 'transparent' : undefined,
+                  transitionDuration: focused ? '300ms, 300ms, 100ms' : '300ms, 300ms, 400ms',
+                  transitionProperty: 'left, right, border-color',
+              }
+            : undefined;
+
+    const frameClasses = cn(
+        'rounded-md border border-solid border-outer-space-700',
+        open ? 'bg-heavy-metal-800' : 'bg-heavy-metal-800 hover:border-outer-space-600',
+    );
+
+    useEffect(() => {
+        const field = fieldRef.current;
+        if (!field) return;
+        const sync = () => setHasText(Boolean(field.querySelector('input')?.value));
+        sync();
+        field.addEventListener('input', sync);
+        return () => field.removeEventListener('input', sync);
+    }, [open]);
+
+    const clearOrClose = useCallback(() => {
+        const input = fieldRef.current?.querySelector('input');
+        if (!input?.value) {
+            onOpenChange(false);
+            return;
+        }
+        Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, '');
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        input.focus();
+    }, [onOpenChange]);
+
+    const openNow = useCallback(() => {
+        flushSync(() => onOpenChange(true));
+        fieldRef.current?.querySelector('input')?.focus();
+    }, [onOpenChange]);
+
+    useEffect(() => {
+        if (!open && wasOpen.current) toggleRef.current?.focus();
+        wasOpen.current = open;
+    }, [open]);
+
+    useHotkeys(
+        [
+            ['/', openNow],
+            ['mod+k', openNow],
+        ],
+        ['INPUT', 'TEXTAREA'],
+    );
+
+    return (
+        <div
+            ref={fieldRef}
+            onKeyDown={event => {
+                if (event.key === 'Escape') onOpenChange(false);
+            }}
+            onFocus={event => {
+                if (!toggleRef.current?.contains(event.target)) setFocused(true);
+            }}
+            onBlur={event => {
+                const next = event.relatedTarget;
+                const stillLit = event.currentTarget.contains(next) && !toggleRef.current?.contains(next);
+                if (!stillLit) setFocused(false);
+                if (event.currentTarget.contains(next)) return;
+                if (open && !fieldRef.current?.querySelector('input')?.value) onOpenChange(false);
+            }}
+            style={{
+                ...litRule,
+                ...(!open && slotInsets ? { left: slotInsets.left, right: slotInsets.right } : undefined),
+            }}
+            className={cn(
+                'absolute bottom-0 top-0 z-10 flex items-center overflow-hidden',
+                'transition-[left,right,background-color,border-color] duration-300 ease-out motion-reduce:transition-none',
+                slotRef && !slotInsets && !restClassName && 'invisible',
+                frameClasses,
+                'sm:relative sm:inset-auto sm:h-[38px] sm:min-w-0 sm:flex-1 sm:bg-heavy-metal-800',
+                dockClassName,
+                open ? 'left-4 right-4 lg:left-6 lg:right-6' : restClassName,
+            )}
+        >
+            <div
+                className={cn(
+                    'relative min-w-0 flex-1 self-stretch',
+                    FILL_SEARCH_HEIGHT,
+                    STRIP_SEARCH_FRAME,
+                    ALIGN_SEARCH_PANEL,
+                    BELOW_DOCK,
+                    open ? 'block' : 'hidden',
+                    'sm:block',
+                )}
+            >
+                {children}
+            </div>
+
+            <button
+                ref={toggleRef}
+                type="button"
+                aria-label={open ? (hasText ? 'Clear search' : 'Close search') : 'Open search'}
+                aria-expanded={open}
+                onMouseDown={event => open && event.preventDefault()}
+                onClick={() => (open ? clearOrClose() : openNow())}
+                className={cn(
+                    'absolute inset-y-0 right-0 z-10 flex w-9 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-white transition-colors hover:text-heavy-metal-100',
+                    'sm:hidden',
+                )}
+            >
+                <span className="relative block h-[18px] w-[18px]">
+                    <Search
+                        size={18}
+                        aria-hidden
+                        className={cn(
+                            'absolute inset-0 transition-[opacity,transform] duration-200 motion-reduce:transition-none',
+                            open ? 'rotate-90 opacity-0' : 'rotate-0 opacity-100',
+                        )}
+                    />
+                    <X
+                        size={18}
+                        aria-hidden
+                        className={cn(
+                            'absolute inset-0 transition-[opacity,transform] duration-200 motion-reduce:transition-none',
+                            open ? 'rotate-0 opacity-100' : '-rotate-90 opacity-0',
+                        )}
+                    />
+                </span>
+            </button>
+        </div>
+    );
+}
diff --git a/app/components/navbar/shared.tsx b/app/components/navbar/shared.tsx
new file mode 100644
index 000000000..8206fa76c
--- /dev/null
+++ b/app/components/navbar/shared.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { FOCUS_RULE_CLASSES, focusRuleStyle, isKeyboardFocus } from '@components/shared/focus-rule';
+import { cn } from '@components/shared/utils';
+import Logo from '@img/logos-solana/dark-explorer-logo.svg';
+import { useClusterPath } from '@utils/url';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useSelectedLayoutSegment, useSelectedLayoutSegments } from 'next/navigation';
+import React from 'react';
+
+export { FOCUS_RULE_CLASSES, focusRuleStyle, isKeyboardFocus };
+
+export const EXPLORER_REPO_URL = 'https://github.com/solana-foundation/explorer';
+
+export const BAR_CLASSES = 'border-0 border-b border-solid border-outer-space-800 bg-heavy-metal-850 text-white';
+export const GUTTER_CLASSES = 'px-4 lg:px-6';
+
+const OUTLINED_CONTROL_BASE =
+    'flex h-[38px] w-[38px] shrink-0 cursor-pointer items-center justify-center rounded-md border border-solid border-outer-space-700 p-0 text-white transition-colors hover:border-outer-space-600';
+
+export const OUTLINED_CONTROL_CLASSES = cn(OUTLINED_CONTROL_BASE, 'bg-transparent');
+export const FILLED_CONTROL_CLASSES = cn(OUTLINED_CONTROL_BASE, 'bg-heavy-metal-800');
+
+export function BrandLockup({ className }: { className?: string }) {
+    const homePath = useClusterPath({ pathname: '/' });
+    return (
+        <Link href={homePath} className={cn('flex min-w-0 shrink-0 flex-col items-start leading-none', className)}>
+            <span className="block overflow-hidden" style={{ width: 112 }}>
+                <Image alt="Solana" height={22} src={Logo} width={214} priority className="max-w-none" />
+            </span>
+            <span className="ml-[8px] mt-0.5 text-[9px] font-medium uppercase tracking-[0.12em] text-[#b4b4b4]">
+                Explorer (beta)
+            </span>
+        </Link>
+    );
+}
+
+export interface NavRoute {
+    active: boolean;
+    href: string;
+    id: 'feature-gates' | 'inspector' | 'mcp';
+    label: string;
+}
+
+export function useNavRoutes(): NavRoute[] {
+    const featureGatesPath = useClusterPath({ pathname: '/feature-gates' });
+    const inspectorPath = useClusterPath({ pathname: '/tx/inspector' });
+    const segment = useSelectedLayoutSegment();
+    const segments = useSelectedLayoutSegments();
+    return [
+        { active: segment === 'feature-gates', href: featureGatesPath, id: 'feature-gates', label: 'Feature Gates' },
+        { active: segment === 'mcp', href: '/mcp/start', id: 'mcp', label: 'MCP' },
+        {
+            active: segments[0] === 'tx' && segments[1] === '(inspector)',
+            href: inspectorPath,
+            id: 'inspector',
+            label: 'Inspector',
+        },
+    ];
+}
+
+export function GitHubMark({ className }: { className?: string }) {
+    return (
+        <svg viewBox="0 0 98 98" className={cn('shrink-0', className)} xmlns="http://www.w3.org/2000/svg" aria-hidden>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}
diff --git a/app/components/shared/focus-rule.ts b/app/components/shared/focus-rule.ts
new file mode 100644
index 000000000..554ded0c1
--- /dev/null
+++ b/app/components/shared/focus-rule.ts
@@ -0,0 +1,27 @@
+import type { CSSProperties } from 'react';
+
+// bg-heavy-metal-800, spelled out so the focus rule can paint a control's fill back over its padding box.
+const CONTROL_GROUND = 'oklch(30.098% 0.01205 160.58)';
+
+export function focusRuleStyle(lit: boolean): CSSProperties {
+    return {
+        backgroundClip: 'padding-box, border-box',
+        backgroundImage: [
+            `linear-gradient(${CONTROL_GROUND}, ${CONTROL_GROUND})`,
+            'radial-gradient(118% 130% at 0% 100%, rgba(29,215,155,0.53) 0%, rgba(29,215,155,0.46) 35%, rgba(29,215,155,0.4) 65%, rgba(29,215,155,0.34) 90%, rgba(29,215,155,0.31) 100%)',
+        ].join(', '),
+        backgroundOrigin: 'border-box',
+        backgroundPosition: '0 0, left bottom',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 100%, 100% 100%',
+        borderColor: lit ? 'transparent' : undefined,
+        transitionDuration: lit ? '100ms' : '400ms',
+        transitionProperty: 'border-color',
+    };
+}
+
+export const FOCUS_RULE_CLASSES = 'focus-visible:outline-none';
+
+export function isKeyboardFocus(target: EventTarget & Element): boolean {
+    return target.matches(':focus-visible');
+}
diff --git a/app/components/shared/ui/dialog.tsx b/app/components/shared/ui/dialog.tsx
index cd461904b..e6c5376ce 100644
--- a/app/components/shared/ui/dialog.tsx
+++ b/app/components/shared/ui/dialog.tsx
@@ -62,8 +62,8 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
                 <DialogPrimitive.Close
                     className={cn(
                         'border-0 bg-transparent p-0 text-neutral-500',
-                        'flex items-center justify-center',
-                        'absolute right-4 top-2 rounded-sm opacity-70',
+                        'flex h-6 w-6 items-center justify-center',
+                        'absolute right-3.5 top-3.5 rounded-sm opacity-70',
                         'transition-opacity',
                         'hover:opacity-100',
                         'focus:outline-none',
@@ -71,7 +71,7 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
                         'disabled:pointer-events-none',
                     )}
                 >
-                    <X size={16} />
+                    <X size={18} />
                     <span className="sr-only">Close</span>
                 </DialogPrimitive.Close>
             </DialogPrimitive.Content>
diff --git a/app/entities/cluster/index.ts b/app/entities/cluster/index.ts
index a3160523a..46e1b9123 100644
--- a/app/entities/cluster/index.ts
+++ b/app/entities/cluster/index.ts
@@ -5,6 +5,7 @@ export type { ClusterInfo } from './lib/types';
 export { type CustomUrlDecision, decideCustomUrl, isCustomUrlCarryable } from './lib/resolve-cluster';
 export { DEFAULT_RPC_ENDPOINT, parseRpcEndpoint, rpcEndpoint, type RpcEndpoint } from './lib/rpc-endpoint';
 export { isLocalRpcUrl, shouldUseDirectRpc } from './lib/should-use-direct-rpc';
+export { getWhitelistedRpcHostnames } from './lib/whitelisted-rpcs';
 export { approvedOriginsAtom, approveRpcOriginAtom } from './model/approved-origins';
 export { ClusterProvider, type ClusterState, StateContext } from './model/cluster-provider';
 export { customUrlEnabledAtom } from './model/custom-url-enabled';
diff --git a/app/features/cluster-switcher/client.ts b/app/features/cluster-switcher/client.ts
new file mode 100644
index 000000000..0e3a5c5e9
--- /dev/null
+++ b/app/features/cluster-switcher/client.ts
@@ -0,0 +1,6 @@
+import 'client-only';
+
+export { useClusterHref } from './model/use-cluster-href';
+export { type CustomUrlDraft, useCustomUrlDraft } from './model/use-custom-url-draft';
+export { type SavedCluster, useSavedClusters } from './model/use-saved-clusters';
+export { MAX_CLUSTER_NAME_LENGTH, normalizeClusterName, suggestClusterName } from './lib/cluster-name';
diff --git a/app/features/cluster-switcher/index.ts b/app/features/cluster-switcher/index.ts
index 80c5e5022..f7c9c9731 100644
--- a/app/features/cluster-switcher/index.ts
+++ b/app/features/cluster-switcher/index.ts
@@ -1,3 +1,3 @@
+export { ClusterDropdown } from './ui/ClusterDropdown';
 export { ClusterModal } from './ui/ClusterModal';
-export { ClusterStatusButton } from './ui/ClusterStatusButton';
 export { PendingCustomUrlConsent } from './ui/PendingCustomUrlConsent';
diff --git a/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts b/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts
index da04f4333..67f53af72 100644
--- a/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts
+++ b/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts
@@ -2,7 +2,13 @@ import { createStore } from 'jotai';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 import { MAX_CLUSTER_NAME_LENGTH } from '../cluster-name';
-import { addSavedClusterAtom, parseSavedClusters, removeSavedClusterAtom, savedClustersAtom } from '../cluster-storage';
+import {
+    addSavedClusterAtom,
+    parseSavedClusters,
+    removeSavedClusterAtom,
+    savedClustersAtom,
+    updateSavedClusterAtom,
+} from '../cluster-storage';
 
 const STORAGE_KEY = 'explorer:savedClusters';
 
@@ -45,48 +51,143 @@ describe('cluster-storage atoms', () => {
             expect(store.get(savedClustersAtom)[1].name).toBe('Staging');
         });
 
-        it('should replace an existing cluster with the same name', () => {
+        it('should keep two endpoints that share a name', () => {
             const store = createStore();
             store.set(addSavedClusterAtom, { name: 'Local', url: 'http://localhost:8899' });
             store.set(addSavedClusterAtom, { name: 'Local', url: 'http://localhost:9999' });
-            expect(store.get(savedClustersAtom)).toEqual([{ name: 'Local', url: 'http://localhost:9999' }]);
+            expect(store.get(savedClustersAtom)).toEqual([
+                { name: 'Local', url: 'http://localhost:8899' },
+                { name: 'Local', url: 'http://localhost:9999' },
+            ]);
         });
 
-        it('should allow the same URL under different names', () => {
+        it('should replace an entry saved again under the same URL', () => {
             const store = createStore();
             store.set(addSavedClusterAtom, { name: 'Local', url: 'http://localhost:8899' });
             store.set(addSavedClusterAtom, { name: 'Also Local', url: 'http://localhost:8899' });
-            expect(store.get(savedClustersAtom)).toEqual([
-                { name: 'Local', url: 'http://localhost:8899' },
-                { name: 'Also Local', url: 'http://localhost:8899' },
-            ]);
+            expect(store.get(savedClustersAtom)).toEqual([{ name: 'Also Local', url: 'http://localhost:8899' }]);
+        });
+
+        // The one-click save from the navbar's field: kept now, named later.
+        it('should save an endpoint with no name', () => {
+            const store = createStore();
+            store.set(addSavedClusterAtom, { name: '', url: 'http://localhost:8899' });
+            expect(store.get(savedClustersAtom)).toEqual([{ name: '', url: 'http://localhost:8899' }]);
         });
     });
 
     describe('removeSavedClusterAtom', () => {
-        it('should remove a cluster by name', () => {
+        it('should remove a cluster by URL', () => {
             const store = createStore();
             store.set(addSavedClusterAtom, { name: 'Local', url: 'http://localhost:8899' });
             store.set(addSavedClusterAtom, { name: 'Staging', url: 'http://staging.example.com' });
-            store.set(removeSavedClusterAtom, 'Local');
+            store.set(removeSavedClusterAtom, 'http://localhost:8899');
             expect(store.get(savedClustersAtom)).toEqual([{ name: 'Staging', url: 'http://staging.example.com' }]);
         });
 
-        it('should produce an empty list when removing the last cluster', () => {
+        it('should remove an unnamed entry, which no name could address', () => {
             const store = createStore();
-            store.set(addSavedClusterAtom, { name: 'Local', url: 'http://localhost:8899' });
-            store.set(removeSavedClusterAtom, 'Local');
+            store.set(addSavedClusterAtom, { name: '', url: 'http://localhost:8899' });
+            store.set(removeSavedClusterAtom, 'http://localhost:8899');
             expect(store.get(savedClustersAtom)).toEqual([]);
         });
 
-        it('should do nothing when name does not exist', () => {
+        it('should do nothing when the URL is not in the list', () => {
             const store = createStore();
             store.set(addSavedClusterAtom, { name: 'Local', url: 'http://localhost:8899' });
-            store.set(removeSavedClusterAtom, 'Nonexistent');
+            store.set(removeSavedClusterAtom, 'http://localhost:9999');
             expect(store.get(savedClustersAtom)).toHaveLength(1);
         });
     });
 
+    describe('updateSavedClusterAtom', () => {
+        function storeWithTwo() {
+            const store = createStore();
+            store.set(addSavedClusterAtom, { name: '', url: 'http://localhost:8899' });
+            store.set(addSavedClusterAtom, { name: 'Staging', url: 'http://staging.example.com' });
+            return store;
+        }
+
+        it('should name an entry that was saved without one', () => {
+            const store = storeWithTwo();
+            store.set(updateSavedClusterAtom, { name: 'My validator', url: 'http://localhost:8899' });
+            expect(store.get(savedClustersAtom)).toContainEqual({
+                name: 'My validator',
+                url: 'http://localhost:8899',
+            });
+        });
+
+        it('should keep the entry where it was in the list', () => {
+            const store = storeWithTwo();
+            store.set(updateSavedClusterAtom, { name: 'My validator', url: 'http://localhost:8899' });
+            expect(store.get(savedClustersAtom).map(c => c.name)).toEqual(['My validator', 'Staging']);
+        });
+
+        it('should normalize the new name the way a save does', () => {
+            const store = storeWithTwo();
+            store.set(updateSavedClusterAtom, { name: `  ${'x'.repeat(200)}  `, url: 'http://localhost:8899' });
+            expect(store.get(savedClustersAtom)[0].name).toBe('x'.repeat(MAX_CLUSTER_NAME_LENGTH));
+        });
+
+        // Blank is a name the UI produces on purpose: naming is optional, and clearing it puts the entry
+        // back to being known by its host.
+        it('should accept a name cleared back to nothing', () => {
+            const store = storeWithTwo();
+            store.set(updateSavedClusterAtom, { name: '   ', url: 'http://staging.example.com' });
+            expect(store.get(savedClustersAtom)).toContainEqual({ name: '', url: 'http://staging.example.com' });
+        });
+
+        it('should allow a name another entry already holds, since the URL is the identity', () => {
+            const store = storeWithTwo();
+            store.set(updateSavedClusterAtom, { name: 'Staging', url: 'http://localhost:8899' });
+            expect(store.get(savedClustersAtom).map(c => c.name)).toEqual(['Staging', 'Staging']);
+        });
+
+        // The other half of an entry: a typo in the address used to mean deleting it and saving again.
+        it('should change the address, keeping the entry in place', () => {
+            const store = storeWithTwo();
+            store.set(updateSavedClusterAtom, {
+                name: 'Local',
+                nextUrl: 'http://localhost:9999',
+                url: 'http://localhost:8899',
+            });
+            expect(store.get(savedClustersAtom)).toEqual([
+                { name: 'Local', url: 'http://localhost:9999' },
+                { name: 'Staging', url: 'http://staging.example.com' },
+            ]);
+        });
+
+        it('should refuse an address that is not an RPC endpoint', () => {
+            const store = storeWithTwo();
+            expect(() =>
+                store.set(updateSavedClusterAtom, {
+                    name: 'Local',
+                    nextUrl: 'localhost:9999',
+                    url: 'http://localhost:8899',
+                }),
+            ).toThrow('That is not a full RPC URL.');
+            expect(store.get(savedClustersAtom)[0].url).toBe('http://localhost:8899');
+        });
+
+        it('should refuse an address another entry already holds', () => {
+            const store = storeWithTwo();
+            expect(() =>
+                store.set(updateSavedClusterAtom, {
+                    name: 'Local',
+                    nextUrl: 'http://staging.example.com',
+                    url: 'http://localhost:8899',
+                }),
+            ).toThrow('Another saved endpoint has that address.');
+            expect(store.get(savedClustersAtom)).toHaveLength(2);
+        });
+
+        it('should do nothing when the URL is not in the list', () => {
+            const store = storeWithTwo();
+            store.set(updateSavedClusterAtom, { name: 'Whatever', url: 'http://localhost:9999' });
+            expect(store.get(savedClustersAtom).map(c => c.name)).toEqual(['', 'Staging']);
+        });
+    });
+
     describe('parseSavedClusters', () => {
         it('should keep entries whose URL is an RPC endpoint', () => {
             expect(
@@ -122,13 +223,20 @@ describe('cluster-storage atoms', () => {
             ['a missing url', { name: 'Local' }],
             ['a missing name', { url: 'http://localhost:8899' }],
             ['a non-string name', { name: 42, url: 'http://localhost:8899' }],
-            ['a blank name', { name: '   ', url: 'http://localhost:8899' }],
             ['a null entry', null],
             ['a string entry', 'http://localhost:8899'],
         ])('should drop an entry with %s', (_label, entry) => {
             expect(parseSavedClusters([entry])).toEqual([]);
         });
 
+        // An entry saved from the field and never named. Kept, with the blank normalized like any other
+        // name, because the list shows such an entry by its host.
+        it('should keep an entry whose name is blank', () => {
+            expect(parseSavedClusters([{ name: '   ', url: 'http://localhost:8899' }])).toEqual([
+                { name: '', url: 'http://localhost:8899' },
+            ]);
+        });
+
         it('should trim names, matching what the save form stores', () => {
             expect(parseSavedClusters([{ name: '  Local  ', url: 'http://localhost:8899' }])).toEqual([
                 { name: 'Local', url: 'http://localhost:8899' },
@@ -140,13 +248,25 @@ describe('cluster-storage atoms', () => {
             expect(cluster.name).toBe('x'.repeat(MAX_CLUSTER_NAME_LENGTH));
         });
 
-        it('should keep the last entry when two share a name', () => {
+        it('should keep both entries when two share a name', () => {
             expect(
                 parseSavedClusters([
                     { name: 'Local', url: 'http://localhost:8899' },
                     { name: 'Local', url: 'http://localhost:9999' },
                 ]),
-            ).toEqual([{ name: 'Local', url: 'http://localhost:9999' }]);
+            ).toEqual([
+                { name: 'Local', url: 'http://localhost:8899' },
+                { name: 'Local', url: 'http://localhost:9999' },
+            ]);
+        });
+
+        it('should keep the last entry when two share a URL', () => {
+            expect(
+                parseSavedClusters([
+                    { name: 'Old label', url: 'http://localhost:8899' },
+                    { name: 'New label', url: 'http://localhost:8899' },
+                ]),
+            ).toEqual([{ name: 'New label', url: 'http://localhost:8899' }]);
         });
 
         it.each([
@@ -188,7 +308,7 @@ describe('cluster-storage atoms', () => {
             );
             const store = createStore();
             store.sub(savedClustersAtom, () => undefined);
-            store.set(removeSavedClusterAtom, 'Nonexistent');
+            store.set(removeSavedClusterAtom, 'http://localhost:9999');
             expect(JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '')).toEqual([
                 { name: 'Local', url: 'http://localhost:8899' },
             ]);
diff --git a/app/features/cluster-switcher/lib/cluster-storage.ts b/app/features/cluster-switcher/lib/cluster-storage.ts
index bf7e734d3..318618f79 100644
--- a/app/features/cluster-switcher/lib/cluster-storage.ts
+++ b/app/features/cluster-switcher/lib/cluster-storage.ts
@@ -11,54 +11,31 @@ export interface SavedCluster {
 
 const STORAGE_KEY = 'explorer:savedClusters';
 
-/**
- * What comes back from localStorage is `unknown`: the key is editable by hand and outlives any format
- * this app ships. Two failures this prevents — a root that is not an array throws on `.map` and takes the
- * modal down, and an entry whose URL is not an RPC endpoint renders a button that goes nowhere, since the
- * reader refuses the value on arrival and strips it back out of the query string.
- *
- * Nothing is written back: the next add or remove persists this list, so a bad entry clears itself
- * without opening the switcher having a side effect on the user's storage.
- */
 export function parseSavedClusters(value: unknown): SavedCluster[] {
     if (!Array.isArray(value)) return [];
-    // By name, because the name is both the React key and the handle `removeSavedClusterAtom` deletes by:
-    // a duplicate leaves one of the pair impossible to remove on its own. Last one wins, matching what
-    // `addSavedClusterAtom` does with a repeated name.
-    const byName = new Map<string, SavedCluster>();
+    const byUrl = new Map<string, SavedCluster>();
     for (const entry of value) {
         const cluster = parseSavedCluster(entry);
-        if (cluster) byName.set(cluster.name, cluster);
+        if (cluster) byUrl.set(cluster.url, cluster);
     }
-    return [...byName.values()];
+    return [...byUrl.values()];
 }
 
 function parseSavedCluster(value: unknown): SavedCluster | undefined {
     if (typeof value !== 'object' || value === null) return undefined;
     const { name, url } = value as Partial<Record<keyof SavedCluster, unknown>>;
     if (typeof name !== 'string' || typeof url !== 'string') return undefined;
-    // Normalized to match what the save form stores, so storage cannot hold a name the form could never
-    // produce: blank and rendering as an unlabelled button, or long enough to truncate to nothing on the
-    // pill. Capped rather than dropped, since the URL is the part that carries the value.
     const clusterName = normalizeClusterName(name);
-    // The same check the save form and the reader apply. Storage is the one input that reaches the
-    // switcher without passing either.
-    if (clusterName === '' || !parseRpcEndpoint(url)) return undefined;
+    if (!parseRpcEndpoint(url)) return undefined;
     return { name: clusterName, url };
 }
 
-// jotai's JSON storage parses but never checks, and its cross-tab `subscribe` path parses the raw storage
-// event instead of going back through `getItem`. Both are wrapped, so no route into the atom skips the
-// check. Not `unstable_withStorageValidator`: it is all-or-nothing — one bad entry discards the whole
-// list — and it leaves `subscribe` unwrapped.
 const jsonStorage = createJSONStorage<SavedCluster[]>();
 const { subscribe } = jsonStorage;
 const validatedStorage: typeof jsonStorage = {
     getItem: (key, initialValue) => parseSavedClusters(jsonStorage.getItem(key, initialValue)),
     removeItem: key => jsonStorage.removeItem(key),
     setItem: (key, newValue) => jsonStorage.setItem(key, newValue),
-    // jotai checks the property before subscribing, so outside the browser it has to stay absent rather
-    // than become a wrapper around nothing.
     subscribe:
         subscribe &&
         ((key, callback, initialValue) => subscribe(key, v => callback(parseSavedClusters(v)), initialValue)),
@@ -66,16 +43,39 @@ const validatedStorage: typeof jsonStorage = {
 
 export const savedClustersAtom = atomWithStorage<SavedCluster[]>(STORAGE_KEY, [], validatedStorage);
 
-// Write-only atoms: jotai treats any non-function first argument as the initial read value, so
-// `undefined` means these hold no readable state and exist only for their write function.
 export const addSavedClusterAtom = atom(undefined, (get, set, cluster: SavedCluster) => {
-    set(savedClustersAtom, [...excludeByName(get(savedClustersAtom), cluster.name), cluster]);
+    set(savedClustersAtom, [...excludeByUrl(get(savedClustersAtom), cluster.url), cluster]);
 });
 
-export const removeSavedClusterAtom = atom(undefined, (get, set, name: string) => {
-    set(savedClustersAtom, excludeByName(get(savedClustersAtom), name));
+export const removeSavedClusterAtom = atom(undefined, (get, set, url: string) => {
+    set(savedClustersAtom, excludeByUrl(get(savedClustersAtom), url));
 });
 
-function excludeByName(clusters: SavedCluster[], name: string): SavedCluster[] {
-    return clusters.filter(c => c.name !== name);
+export const updateSavedClusterAtom = atom(
+    undefined,
+    (get, set, edit: { name: string; nextUrl?: string; url: string }) => {
+        const clusters = get(savedClustersAtom);
+        if (!clusters.some(c => c.url === edit.url)) return;
+        const name = normalizeClusterName(edit.name);
+        const nextUrl = edit.nextUrl ?? edit.url;
+        if (nextUrl !== edit.url) {
+            if (!parseRpcEndpoint(nextUrl)) throw new Error('That is not a full RPC URL.');
+            if (clusters.some(c => c.url === nextUrl)) throw new Error('Another saved endpoint has that address.');
+        }
+        set(
+            savedClustersAtom,
+            clusters.map(c => (c.url === edit.url ? { name, url: nextUrl } : c)),
+        );
+    },
+);
+
+export const restoreSavedClusterAtom = atom(undefined, (get, set, entry: { at: number } & SavedCluster) => {
+    const clusters = get(savedClustersAtom);
+    if (clusters.some(c => c.url === entry.url)) return;
+    const at = Math.min(Math.max(entry.at, 0), clusters.length);
+    set(savedClustersAtom, [...clusters.slice(0, at), { name: entry.name, url: entry.url }, ...clusters.slice(at)]);
+});
+
+function excludeByUrl(clusters: SavedCluster[], url: string): SavedCluster[] {
+    return clusters.filter(c => c.url !== url);
 }
diff --git a/app/features/cluster-switcher/lib/endpoint-provenance.ts b/app/features/cluster-switcher/lib/endpoint-provenance.ts
new file mode 100644
index 000000000..bd16bd6a2
--- /dev/null
+++ b/app/features/cluster-switcher/lib/endpoint-provenance.ts
@@ -0,0 +1,20 @@
+import { clusterSelection, getWhitelistedRpcHostnames, parseRpcEndpoint } from '@entities/cluster';
+import { Cluster, CLUSTERS, clusterUrl } from '@utils/cluster';
+
+export type EndpointProvenance = 'known' | 'local' | 'unknown';
+
+export function endpointProvenance(url: string | undefined): EndpointProvenance {
+    if (url === undefined) return 'known';
+    const endpoint = parseRpcEndpoint(url);
+    if (endpoint === undefined) return 'unknown';
+    if (endpoint.isLocal) return 'local';
+    if (getWhitelistedRpcHostnames().includes(endpoint.hostname)) return 'known';
+    const shipsWithIt = CLUSTERS.filter(net => net !== Cluster.Custom).some(
+        net => parseRpcEndpoint(clusterUrl(clusterSelection(net)))?.origin === endpoint.origin,
+    );
+    return shipsWithIt ? 'known' : 'unknown';
+}
+
+export function isKnownEndpoint(url: string): boolean {
+    return endpointProvenance(url) === 'known';
+}
diff --git a/app/features/cluster-switcher/model/__tests__/use-custom-url-draft.spec.tsx b/app/features/cluster-switcher/model/__tests__/use-custom-url-draft.spec.tsx
index f1dfd0c53..6716ce0bb 100644
--- a/app/features/cluster-switcher/model/__tests__/use-custom-url-draft.spec.tsx
+++ b/app/features/cluster-switcher/model/__tests__/use-custom-url-draft.spec.tsx
@@ -39,11 +39,11 @@ vi.mock('@entities/cluster', async importOriginal => {
 
 import { approvedOriginsAtom } from '@entities/cluster';
 
-import { useCustomUrlDraft } from '../use-custom-url-draft';
+import { type CustomUrlDraftOptions, useCustomUrlDraft } from '../use-custom-url-draft';
 
-function setupDraft() {
+function setupDraft(options?: CustomUrlDraftOptions) {
     const store = createStore();
-    const view = renderHook(() => useCustomUrlDraft(), {
+    const view = renderHook(() => useCustomUrlDraft(options), {
         wrapper: ({ children }: { children: ReactNode }) => <Provider store={store}>{children}</Provider>,
     });
 
@@ -53,10 +53,17 @@ function setupDraft() {
             clusterMock.customUrl = url;
             view.rerender();
         },
+
+        /** Choosing an endpoint outright — Enter, Go, an entry picked from the list. */
+        select(next: string) {
+            act(() => view.result.current.select(next));
+        },
+
         /** Let the commit debounce fire. */
         settle() {
             act(() => vi.advanceTimersByTime(500));
         },
+
         store,
         /** One edit of the field. */
         type(next: string) {
@@ -102,8 +109,11 @@ describe('useCustomUrlDraft', () => {
         draft.settle();
 
         // Unrelated params belong to the page underneath and survive the switch.
+        // `scroll: false` throughout: this fires mid-typing, and the App Router would otherwise throw
+        // the page back to the top on every pause.
         expect(nav.replace).toHaveBeenCalledWith(
             `/?cluster=custom&customUrl=${encodeURIComponent('http://my-node:8899')}&sort=fee`,
+            { scroll: false },
         );
     });
 
@@ -136,7 +146,36 @@ describe('useCustomUrlDraft', () => {
         draft.type('');
         draft.settle();
 
-        expect(nav.replace).toHaveBeenCalledWith('/?cluster=custom&sort=fee');
+        expect(nav.replace).toHaveBeenCalledWith('/?cluster=custom&sort=fee', { scroll: false });
+    });
+
+    // Typing must not move the page; choosing an endpoint outright is the reader starting on the content
+    // again, and starting means the top of it — the same thing the menu's cluster rows do.
+    it('should go back to the top when an endpoint is chosen outright', () => {
+        const scrolled = vi.spyOn(window, 'scrollTo').mockImplementation(() => undefined);
+        const draft = setupDraft();
+
+        draft.select('http://picked-node:8899');
+
+        expect(scrolled).toHaveBeenCalledWith({ top: 0 });
+        // The router is told not to: it scrolls the changed segment into view rather than the document,
+        // which comes to rest with the navbar just off the screen.
+        expect(nav.replace).toHaveBeenCalledWith(
+            `/?cluster=custom&customUrl=${encodeURIComponent('http://picked-node:8899')}&sort=fee`,
+            { scroll: false },
+        );
+        scrolled.mockRestore();
+    });
+
+    it('should leave the page where it stands while the endpoint is being typed', () => {
+        const scrolled = vi.spyOn(window, 'scrollTo').mockImplementation(() => undefined);
+        const draft = setupDraft();
+
+        draft.type('http://typed-node:8899');
+        draft.settle();
+
+        expect(scrolled).not.toHaveBeenCalled();
+        scrolled.mockRestore();
     });
 
     // A saved cluster, an in-app link or a declined prompt changes the endpoint without anyone touching
@@ -163,6 +202,32 @@ describe('useCustomUrlDraft', () => {
 
     // The echo guard covers one arrival and no more. Saving a cluster starts by typing its URL, so a
     // guard left standing would match that entry's click and leave the field showing the endpoint before.
+    // The navbar's menu has Go, so there typing is deciding and nothing applies itself: the page behind
+    // the menu must not change until the reader says so.
+    describe('with commitOnType off', () => {
+        it('should show the keystrokes and commit none of them', () => {
+            const draft = setupDraft({ commitOnType: false });
+            draft.type('http://my-node:8899');
+            draft.settle();
+
+            expect(draft.value()).toBe('http://my-node:8899');
+            expect(nav.replace).not.toHaveBeenCalled();
+            expect(draft.store.get(approvedOriginsAtom)).toEqual([]);
+        });
+
+        // Go and a picked entry go through `select`, which is a decision rather than a pause.
+        it('should still commit a selected endpoint at once', () => {
+            const draft = setupDraft({ commitOnType: false });
+            draft.select('http://my-node:8899');
+
+            expect(nav.replace).toHaveBeenCalledWith(
+                `/?cluster=custom&customUrl=${encodeURIComponent('http://my-node:8899')}&sort=fee`,
+                { scroll: false },
+            );
+            expect(draft.store.get(approvedOriginsAtom)).toEqual(['http://my-node:8899']);
+        });
+    });
+
     it('should follow a re-selected endpoint it committed earlier', () => {
         const draft = setupDraft();
 
diff --git a/app/features/cluster-switcher/model/use-custom-url-draft.ts b/app/features/cluster-switcher/model/use-custom-url-draft.ts
index da171d326..702edfdb3 100644
--- a/app/features/cluster-switcher/model/use-custom-url-draft.ts
+++ b/app/features/cluster-switcher/model/use-custom-url-draft.ts
@@ -2,46 +2,27 @@
 
 import { approveRpcOriginAtom, parseRpcEndpoint, useCluster } from '@entities/cluster';
 import { useDebouncedCallback } from '@mantine/hooks';
+import { scrollToTop } from '@shared/lib/scrollToTop';
 import { Cluster } from '@utils/cluster';
 import { useSetAtom } from 'jotai';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 import { useClusterHref } from './use-cluster-href';
 
-// How long typing pauses before the endpoint reaches the URL. Long enough that a typed-out URL commits
-// once rather than once per word.
 const COMMIT_DELAY_MS = 500;
 
 export type CustomUrlDraft = {
-    /** Call on every keystroke. */
     onChange: (next: string) => void;
-    /** What the field shows. */
+    select: (next: string) => void;
     value: string;
 };
 
-/**
- * The state behind the custom endpoint field, which edits a value it does not own: the endpoint lives in
- * the `customUrl` query param, which is what makes a custom cluster shareable. So the field and the URL
- * bar track each other in both directions:
- *
- * - Field → URL. Typing navigates, debounced. Typing an endpoint is a first-party action, so it is also
- *   the consent — the origin is approved before the navigation lands, or the reader would meet the user's
- *   own endpoint as an unvetted inbound one and prompt for what they just typed.
- * - URL → field. A saved cluster, an in-app link or a declined prompt changes the endpoint without anyone
- *   touching the field, which has to follow or it shows an endpoint the app is not on.
- *
- * `sentUrl` cuts the resulting loop: it holds what this field last committed, so the arrival that matches
- * it is the field's own echo and is not written back, and keystrokes typed during that navigation survive.
- * It is dropped on the next sync, because left standing it would keep matching — saving a cluster starts
- * by typing its URL, so selecting that entry later would leave the field showing the endpoint before it.
- *
- * All three are compared as strings, since `RpcEndpoint.href` is the URL as given: a re-parsed endpoint
- * with a new object identity cannot trip the guard.
- */
-export function useCustomUrlDraft(): CustomUrlDraft {
-    // Always set on the Custom cluster, where the reader falls back to the default endpoint. Empty on
-    // every other cluster, which is what the field shows while it is hidden.
+export type CustomUrlDraftOptions = {
+    commitOnType?: boolean;
+};
+
+export function useCustomUrlDraft({ commitOnType = true }: CustomUrlDraftOptions = {}): CustomUrlDraft {
     const { endpoint } = useCluster();
     const resolvedUrl = endpoint?.href ?? '';
 
@@ -49,9 +30,6 @@ export function useCustomUrlDraft(): CustomUrlDraft {
     const approveOrigin = useSetAtom(approveRpcOriginAtom);
     const router = useRouter();
 
-    // `syncedUrl` is the resolved endpoint this hook already took in, so a change to it triggers a
-    // re-sync. Adjusting state during render is React's documented way to follow a changing source; state
-    // rather than a ref, because the re-sync reads these on the extra render it queues itself.
     const [syncedUrl, setSyncedUrl] = useState(resolvedUrl);
     const [draftUrl, setDraftUrl] = useState(resolvedUrl);
     const [sentUrl, setSentUrl] = useState<string | undefined>(undefined);
@@ -61,28 +39,37 @@ export function useCustomUrlDraft(): CustomUrlDraft {
         if (resolvedUrl !== sentUrl) setDraftUrl(resolvedUrl);
     }
 
-    // `replace` rather than `push`: editing one field should not leave a history entry per typing pause,
-    // each holding a half-typed URL.
-    const commit = useDebouncedCallback((url: string) => {
-        // An empty field clears the endpoint instead of leaving the previous one in the URL.
+    const intended = useRef(resolvedUrl);
+
+    const commitNow = (url: string, scroll: boolean) => {
+        if (scroll) scrollToTop();
         if (url.trim() === '') {
             setSentUrl(undefined);
-            router.replace(buildHref({ cluster: Cluster.Custom, customUrl: '' }));
+            router.replace(buildHref({ cluster: Cluster.Custom, customUrl: '' }), { scroll: false });
             return;
         }
-        // Half-typed values are not endpoints yet: navigating on them churns the URL, and the reader
-        // strips each one on arrival.
         const typedEndpoint = parseRpcEndpoint(url);
         if (typedEndpoint === undefined) return;
         approveOrigin(typedEndpoint);
         setSentUrl(url);
-        router.replace(buildHref({ cluster: Cluster.Custom, customUrl: url }));
+        router.replace(buildHref({ cluster: Cluster.Custom, customUrl: url }), { scroll: false });
+    };
+
+    const commit = useDebouncedCallback((url: string) => {
+        if (url !== intended.current) return;
+        commitNow(url, false);
     }, COMMIT_DELAY_MS);
 
     return {
         onChange: (next: string) => {
+            intended.current = next;
+            setDraftUrl(next);
+            if (commitOnType) commit(next);
+        },
+        select: (next: string) => {
+            intended.current = next;
             setDraftUrl(next);
-            commit(next);
+            commitNow(next, true);
         },
         value: draftUrl,
     };
diff --git a/app/features/cluster-switcher/model/use-saved-clusters.ts b/app/features/cluster-switcher/model/use-saved-clusters.ts
new file mode 100644
index 000000000..19773ab23
--- /dev/null
+++ b/app/features/cluster-switcher/model/use-saved-clusters.ts
@@ -0,0 +1,24 @@
+import 'client-only';
+
+import { useAtomValue, useSetAtom } from 'jotai';
+
+import {
+    addSavedClusterAtom,
+    removeSavedClusterAtom,
+    restoreSavedClusterAtom,
+    type SavedCluster,
+    savedClustersAtom,
+    updateSavedClusterAtom,
+} from '../lib/cluster-storage';
+
+export type { SavedCluster };
+
+export function useSavedClusters() {
+    return {
+        addSavedCluster: useSetAtom(addSavedClusterAtom),
+        removeSavedCluster: useSetAtom(removeSavedClusterAtom),
+        restoreSavedCluster: useSetAtom(restoreSavedClusterAtom),
+        savedClusters: useAtomValue(savedClustersAtom),
+        updateSavedCluster: useSetAtom(updateSavedClusterAtom),
+    };
+}
diff --git a/app/features/cluster-switcher/ui/ClusterDropdown.tsx b/app/features/cluster-switcher/ui/ClusterDropdown.tsx
new file mode 100644
index 000000000..291915656
--- /dev/null
+++ b/app/features/cluster-switcher/ui/ClusterDropdown.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import { FOCUS_RULE_CLASSES, focusRuleStyle, isKeyboardFocus } from '@components/shared/focus-rule';
+import { Popover, PopoverContent, PopoverTrigger } from '@components/shared/ui/popover';
+import { cn } from '@components/shared/utils';
+import { type RpcEndpoint, useCluster } from '@entities/cluster';
+import { Cluster, clusterSlug, ClusterStatus } from '@utils/cluster';
+import { useSearchParams } from 'next/navigation';
+import React from 'react';
+import { AlertTriangle, CheckCircle, ChevronDown } from 'react-feather';
+
+import { endpointProvenance } from '../lib/endpoint-provenance';
+import { ClusterMenu } from './ClusterMenu';
+import { KNOWN_COLOUR, UNKNOWN_COLOUR } from './provenance-mark';
+
+const STATUS_STYLE: Record<ClusterStatus, { colour: string; label: string }> = {
+    [ClusterStatus.Connected]: { colour: KNOWN_COLOUR, label: 'Connected' },
+    [ClusterStatus.Connecting]: { colour: UNKNOWN_COLOUR, label: 'Connecting' },
+    [ClusterStatus.Failure]: { colour: '#e0526e', label: 'Not connected' },
+};
+
+const CONNECTED_GREY = 'oklch(70.297% 0.0218 185.24)';
+
+function endpointName(endpoint: RpcEndpoint): string {
+    return endpoint.isLocal ? endpoint.href : `${endpoint.protocol}//${endpoint.host}`;
+}
+
+export interface ClusterDropdownProps {
+    align?: 'end' | 'start';
+    className?: string;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+}
+
+export function ClusterDropdown({ align = 'end', className, onOpenChange, open }: ClusterDropdownProps) {
+    const { status, name, cluster, endpoint } = useCluster();
+    const searchParams = useSearchParams();
+    const [focused, setFocused] = React.useState(false);
+
+    const label = endpoint ? endpointName(endpoint) : name;
+    const { label: statusLabel } = STATUS_STYLE[status];
+
+    const headedForCustom = cluster === Cluster.Custom || searchParams?.get('cluster') === clusterSlug(Cluster.Custom);
+    const provenance = headedForCustom && endpoint === undefined ? undefined : endpointProvenance(endpoint?.href);
+    const showLead = provenance === 'known' || provenance === 'unknown';
+    const leadColour = provenance === 'unknown' ? UNKNOWN_COLOUR : KNOWN_COLOUR;
+    const LeadGlyph = provenance === 'unknown' ? AlertTriangle : CheckCircle;
+    const factsColour = status === ClusterStatus.Connected ? CONNECTED_GREY : STATUS_STYLE[status].colour;
+
+    return (
+        <Popover open={open} onOpenChange={onOpenChange}>
+            <PopoverTrigger asChild>
+                <button
+                    type="button"
+                    aria-label={`Cluster: ${label}. ${statusLabel}. Change cluster`}
+                    title={`${label} · ${statusLabel}`}
+                    style={focusRuleStyle(focused || Boolean(open))}
+                    onFocus={event => setFocused(isKeyboardFocus(event.currentTarget))}
+                    onBlur={() => setFocused(false)}
+                    className={cn(
+                        'group flex h-[38px] min-w-0 cursor-pointer items-center gap-1 overflow-hidden rounded-md border border-solid border-outer-space-700 bg-heavy-metal-800 px-1.5 text-left leading-none transition-colors hover:border-outer-space-600 data-[state=open]:border-outer-space-500 sm:px-2',
+                        FOCUS_RULE_CLASSES,
+                        className,
+                    )}
+                >
+                    <span className="flex min-w-0 flex-1 translate-y-px flex-col items-stretch justify-center gap-0.5">
+                        <span className="flex min-w-0 items-center gap-0.5 text-sm leading-[14px] text-white">
+                            {showLead && (
+                                <span className="flex shrink-0 items-center" style={{ color: leadColour }}>
+                                    <LeadGlyph size={12} />
+                                </span>
+                            )}
+                            <span className="min-w-0 truncate" style={showLead ? { color: leadColour } : undefined}>
+                                {label}
+                            </span>
+                        </span>
+                        <span
+                            className="min-w-0 -translate-y-px truncate text-[10px] uppercase leading-[12px] tracking-[0.08em]"
+                            style={{ color: factsColour }}
+                        >
+                            {statusLabel}
+                        </span>
+                    </span>
+                    <ChevronDown
+                        size={14}
+                        aria-hidden
+                        className="shrink-0 translate-y-px text-neutral-400 transition-transform duration-200 group-data-[state=open]:rotate-180"
+                    />
+                </button>
+            </PopoverTrigger>
+
+            <PopoverContent
+                align={align}
+                sideOffset={4}
+                collisionPadding={16}
+                className="flex max-h-[var(--radix-popover-content-available-height)] w-[360px] max-w-[calc(100vw-2rem)] flex-col overflow-hidden p-1.5 shadow-[0_16px_48px_-16px_rgba(0,0,0,0.9)]"
+            >
+                <ClusterMenu onDismiss={() => onOpenChange?.(false)} />
+            </PopoverContent>
+        </Popover>
+    );
+}
diff --git a/app/features/cluster-switcher/ui/ClusterMenu.tsx b/app/features/cluster-switcher/ui/ClusterMenu.tsx
new file mode 100644
index 000000000..e09930a54
--- /dev/null
+++ b/app/features/cluster-switcher/ui/ClusterMenu.tsx
@@ -0,0 +1,270 @@
+'use client';
+
+import { Button } from '@components/shared/ui/button';
+import { Input } from '@components/shared/ui/input';
+import { Switch } from '@components/shared/ui/switch';
+import { cn } from '@components/shared/utils';
+import { customUrlEnabledAtom, DEFAULT_RPC_ENDPOINT, parseRpcEndpoint, useCluster } from '@entities/cluster';
+import {
+    type SavedCluster,
+    suggestClusterName,
+    useClusterHref,
+    useCustomUrlDraft,
+    useSavedClusters,
+} from '@features/cluster-switcher/client';
+import { scrollToTop } from '@shared/lib/scrollToTop';
+import { Cluster, clusterName, CLUSTERS, clusterSlug, ClusterStatus } from '@utils/cluster';
+import { useAtom } from 'jotai';
+import Link from 'next/link';
+import React, { useEffect, useRef, useState } from 'react';
+import { Plus } from 'react-feather';
+
+import {
+    ACTIVE_ROW,
+    INACTIVE_ROW,
+    MENU_FIELD_BORDER,
+    MENU_PRIMARY_BUTTON,
+    MENU_SECONDARY_BUTTON,
+    rowClasses,
+} from './cluster-row-classes';
+import { CustomUrlConsentDialog } from './CustomUrlConsentDialog';
+import { EndpointForm } from './EndpointForm';
+import { KnownMark } from './provenance-mark';
+import { SavedEndpointRow } from './SavedEndpointRow';
+
+const STATUS_LABEL: Record<ClusterStatus, { colour: string; label: string }> = {
+    [ClusterStatus.Connected]: { colour: '#1dd79b', label: 'connected' },
+    [ClusterStatus.Connecting]: { colour: '#fa62fc', label: 'connecting' },
+    [ClusterStatus.Failure]: { colour: '#b45be1', label: 'not connected' },
+};
+
+const SECTION_CAPTION = 'px-3 text-xs font-normal uppercase text-outer-space-300';
+
+const SAVED_LIST_FADE_MASK = 'linear-gradient(to bottom, #000 calc(100% - 28px), transparent)';
+
+export function ClusterMenu({ onDismiss }: { onDismiss: () => void }) {
+    const { cluster, endpoint, status } = useCluster();
+    const { addSavedCluster, savedClusters } = useSavedClusters();
+    const buildHref = useClusterHref();
+    const draft = useCustomUrlDraft({ commitOnType: false });
+    const [saving, setSaving] = useState(false);
+
+    const pinned: SavedCluster = { name: 'Default', url: DEFAULT_RPC_ENDPOINT.href };
+    const showPinned = !savedClusters.some(saved => saved.url === pinned.url);
+    const listed = showPinned ? [pinned, ...savedClusters] : savedClusters;
+
+    const onCustom = cluster === Cluster.Custom;
+    const customIsLive = onCustom && !listed.some(saved => saved.url === endpoint?.href);
+    const draftEndpoint = parseRpcEndpoint(draft.value);
+
+    const savedRef = useRef<HTMLUListElement>(null);
+    const [showSavedFade, setShowSavedFade] = useState(false);
+    useEffect(() => {
+        const el = savedRef.current;
+        if (!el) return;
+        const update = () =>
+            setShowSavedFade(
+                el.scrollHeight > el.clientHeight + 1 && el.scrollTop + el.clientHeight < el.scrollHeight - 1,
+            );
+        update();
+        el.addEventListener('scroll', update, { passive: true });
+        const observer = new ResizeObserver(update);
+        observer.observe(el);
+        return () => {
+            el.removeEventListener('scroll', update);
+            observer.disconnect();
+        };
+    }, [listed.length]);
+
+    const facts = (
+        <span
+            className="flex shrink-0 items-center gap-1 text-[10px] font-medium uppercase tracking-[0.12em]"
+            style={{ color: STATUS_LABEL[status].colour }}
+        >
+            {STATUS_LABEL[status].label}
+        </span>
+    );
+
+    return (
+        <div className="flex min-h-0 flex-col">
+            <div className={cn(SECTION_CAPTION, 'shrink-0 pb-2 pt-2')}>Cluster</div>
+
+            <ul className="m-0 flex shrink-0 list-none flex-col gap-0.5 p-0">
+                {CLUSTERS.filter(net => net !== Cluster.Custom).map(net => {
+                    const active = net === cluster;
+                    return (
+                        <li key={clusterSlug(net)}>
+                            <Link
+                                href={buildHref({ cluster: net })}
+                                scroll={false}
+                                onClick={() => {
+                                    scrollToTop();
+                                    onDismiss();
+                                }}
+                                aria-current={active ? 'true' : undefined}
+                                className={rowClasses({ active })}
+                            >
+                                <span className="flex items-center gap-1.5">
+                                    {clusterName(net)}
+                                    <KnownMark withLabel={active} />
+                                </span>
+                            </Link>
+                        </li>
+                    );
+                })}
+            </ul>
+
+            {listed.length > 0 && (
+                <>
+                    <div className={cn(SECTION_CAPTION, 'shrink-0 pb-2 pt-6')}>Your endpoints</div>
+                    <ul
+                        ref={savedRef}
+                        style={
+                            showSavedFade
+                                ? { WebkitMaskImage: SAVED_LIST_FADE_MASK, maskImage: SAVED_LIST_FADE_MASK }
+                                : undefined
+                        }
+                        className={cn(
+                            'm-0 flex max-h-[250px] min-h-0 list-none flex-col gap-0.5 overflow-y-auto overscroll-contain p-0',
+                            '[&::-webkit-scrollbar]:w-2',
+                            '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-outer-space-600 [&::-webkit-scrollbar-thumb]:hover:bg-outer-space-500',
+                            '[&::-webkit-scrollbar-track]:bg-transparent',
+                        )}
+                        data-testid="saved-clusters-section"
+                    >
+                        {listed.map(saved => (
+                            <SavedEndpointRow
+                                key={saved.url}
+                                entry={saved}
+                                pinned={saved.url === pinned.url && showPinned}
+                                active={!customIsLive && endpoint?.href === saved.url}
+                                facts={facts}
+                                onPick={() => {
+                                    draft.select(saved.url);
+                                    onDismiss();
+                                }}
+                            />
+                        ))}
+                    </ul>
+                </>
+            )}
+
+            <div className={cn(SECTION_CAPTION, 'shrink-0 pb-2 pt-6')}>Custom RPC URL</div>
+
+            <div
+                className={cn(
+                    'flex w-full shrink-0 flex-col gap-1.5 rounded-md border border-solid px-3 pb-3 pt-2',
+                    customIsLive ? ACTIVE_ROW : INACTIVE_ROW,
+                )}
+                data-testid="custom-field-plate"
+            >
+                {saving && draftEndpoint ? (
+                    <EndpointForm
+                        url={draft.value}
+                        initialName={suggestClusterName(
+                            draft.value,
+                            savedClusters.map(c => c.name),
+                        )}
+                        onSave={name => {
+                            addSavedCluster({ name, url: draft.value });
+                            setSaving(false);
+                        }}
+                        onCancel={() => setSaving(false)}
+                    />
+                ) : (
+                    <>
+                        <div className="relative">
+                            <Input
+                                type="url"
+                                variant="dark"
+                                className={cn(
+                                    'pr-10 font-mono focus-visible:!ring-1 focus-visible:!ring-accent focus-visible:!ring-offset-0',
+                                    MENU_FIELD_BORDER,
+                                )}
+                                placeholder="https://"
+                                value={draft.value}
+                                onChange={e => draft.onChange(e.target.value)}
+                                onKeyDown={event => {
+                                    if (event.key !== 'Enter' || !parseRpcEndpoint(draft.value)) return;
+                                    event.preventDefault();
+                                    event.currentTarget.blur();
+                                    draft.select(draft.value);
+                                    onDismiss();
+                                }}
+                                aria-label="Custom RPC URL"
+                                data-testid="cluster-url-input"
+                            />
+                            <Button
+                                variant="accent"
+                                size="sm"
+                                className={cn('absolute inset-y-1 right-1 !h-auto', MENU_PRIMARY_BUTTON)}
+                                disabled={!draftEndpoint}
+                                title={draftEndpoint ? 'Use this endpoint' : 'Enter a full RPC URL to use it'}
+                                onClick={() => {
+                                    draft.select(draft.value);
+                                    onDismiss();
+                                }}
+                                data-testid="go-custom-cluster-btn"
+                            >
+                                Go
+                            </Button>
+                        </div>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            className={cn('self-start', MENU_SECONDARY_BUTTON)}
+                            disabled={!draftEndpoint}
+                            onClick={() => setSaving(true)}
+                            data-testid="open-save-cluster-btn"
+                        >
+                            <Plus size={14} aria-hidden />
+                            Save…
+                        </Button>
+                    </>
+                )}
+            </div>
+
+            <div className="-mx-1.5 my-2 h-px shrink-0 bg-outer-space-800" role="presentation" />
+            <TrustRow />
+        </div>
+    );
+}
+
+function TrustRow() {
+    const [enabled, setEnabled] = useAtom(customUrlEnabledAtom);
+    const [confirming, setConfirming] = useState(false);
+
+    const onCheckedChange = (next: boolean) => {
+        if (!next) {
+            setEnabled(false);
+            return;
+        }
+        setConfirming(true);
+    };
+
+    return (
+        <div className="flex shrink-0 items-start justify-between gap-3 px-3 pb-1.5 pt-1">
+            <label htmlFor="nav-cluster-trust-toggle" className="flex min-w-0 cursor-pointer flex-col leading-tight">
+                <span className="text-sm text-white">Trust any RPC server</span>
+                <span className="mt-1 text-xs text-outer-space-300">
+                    <span className={cn(enabled && 'text-dk-danger')}>Unsafe.</span> Lets links connect to their own
+                    server without asking. Only for your own endpoints.
+                </span>
+            </label>
+            <Switch
+                id="nav-cluster-trust-toggle"
+                className="-mr-0.5 mt-0.5 data-[state=checked]:!bg-accent data-[state=unchecked]:!bg-neutral-600"
+                checked={enabled}
+                onCheckedChange={onCheckedChange}
+            />
+            <CustomUrlConsentDialog
+                request={confirming ? { kind: 'developer-bypass' } : undefined}
+                onConfirm={() => {
+                    setEnabled(true);
+                    setConfirming(false);
+                }}
+                onCancel={() => setConfirming(false)}
+            />
+        </div>
+    );
+}
diff --git a/app/features/cluster-switcher/ui/ClusterStatusButton.tsx b/app/features/cluster-switcher/ui/ClusterStatusButton.tsx
deleted file mode 100644
index 06715211b..000000000
--- a/app/features/cluster-switcher/ui/ClusterStatusButton.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-'use client';
-
-import { Button } from '@components/shared/ui/button';
-import { cn } from '@components/shared/utils';
-import { clusterModalOpenAtom, type RpcEndpoint, useCluster } from '@entities/cluster';
-import { ClusterStatus } from '@utils/cluster';
-import { useSetAtom } from 'jotai';
-import React, { useCallback } from 'react';
-import { AlertCircle, CheckCircle } from 'react-feather';
-
-// The navbar's entry point to the switcher.
-//
-// Connection status and data provenance are separate facts, and both matter, so the icon carries status
-// (spinner / tick / alert) and the colour carries provenance. A remote custom endpoint is amber, so the
-// warning stays on screen for as long as it is in use rather than flashing once in a dialog; a local
-// validator is not what we warn about. Failure stays red either way, being the more urgent fact.
-export const ClusterStatusButton = () => {
-    const { status, name, endpoint } = useCluster();
-    const setShow = useSetAtom(clusterModalOpenAtom);
-
-    const onClickHandler = useCallback(() => setShow(true), [setShow]);
-    // An endpoint is present exactly on the Custom cluster, so its presence *is* "this is custom": the
-    // component never names `Cluster.Custom` and cannot ask the two questions separately.
-    const statusName = endpoint ? endpointClusterName(endpoint) : `${name}`;
-    const isRemoteCustom = endpoint !== undefined && !endpoint.isLocal;
-
-    const spinnerClasses = 'align-text-top spinner-grow spinner-grow-sm mr-1.5';
-    const buttonClasses = '!block truncate';
-    // Colour cannot be the only signal.
-    const provenanceLabel = isRemoteCustom ? <span className="sr-only">Custom RPC endpoint. </span> : undefined;
-
-    switch (status) {
-        case ClusterStatus.Connected:
-            return (
-                <Button
-                    ui="dashkit"
-                    variant="primary"
-                    className={cn(buttonClasses, isRemoteCustom && REMOTE_CUSTOM_CLASSES)}
-                    asChild
-                >
-                    <span onClick={onClickHandler}>
-                        {provenanceLabel}
-                        <CheckCircle className="mr-1.5" size={15} />
-                        {statusName}
-                    </span>
-                </Button>
-            );
-
-        case ClusterStatus.Connecting:
-            return (
-                <Button
-                    ui="dashkit"
-                    variant="warning"
-                    className={cn(buttonClasses, isRemoteCustom && REMOTE_CUSTOM_CLASSES)}
-                    asChild
-                >
-                    <span onClick={onClickHandler}>
-                        {provenanceLabel}
-                        <span className={spinnerClasses} role="status" aria-hidden="true"></span>
-                        {statusName}
-                    </span>
-                </Button>
-            );
-
-        case ClusterStatus.Failure:
-            return (
-                <Button ui="dashkit" variant="danger" className={buttonClasses} asChild>
-                    <span onClick={onClickHandler}>
-                        {provenanceLabel}
-                        <AlertCircle className="mr-1.5" size={15} />
-                        {statusName}
-                    </span>
-                </Button>
-            );
-    }
-};
-
-// The amber provenance treatment, applied over the ordinary status variant.
-const REMOTE_CUSTOM_CLASSES =
-    'bg-[#e08214] border-[#e08214] text-[#3a2205] hover:bg-[#c8730f] hover:border-[#bd6d0e] hover:text-white';
-
-// Custom endpoints are long and often carry a key, so the button shows scheme + host only. A local
-// endpoint is shown verbatim, because the port is the only thing separating one validator from another.
-function endpointClusterName(endpoint: RpcEndpoint) {
-    if (endpoint.isLocal) return endpoint.href;
-    return `${endpoint.protocol}//${endpoint.host}`;
-}
diff --git a/app/features/cluster-switcher/ui/CustomUrlConsentDialog.tsx b/app/features/cluster-switcher/ui/CustomUrlConsentDialog.tsx
index b26f2ce1d..de84c989e 100644
--- a/app/features/cluster-switcher/ui/CustomUrlConsentDialog.tsx
+++ b/app/features/cluster-switcher/ui/CustomUrlConsentDialog.tsx
@@ -9,18 +9,28 @@ import {
     DialogHeader,
     DialogTitle,
 } from '@components/shared/ui/dialog';
+import { cn } from '@components/shared/utils';
 import type { RpcEndpoint } from '@entities/cluster';
-import { Alert } from '@shared/ui/Alert';
 import { useRef } from 'react';
+import { AlertTriangle, ChevronRight } from 'react-feather';
 
-// Two things share this dialog: a link supplying an endpoint nobody has agreed to, and the developer
-// toggle that stops asking altogether.
 export type ConsentRequest = { kind: 'endpoint'; endpoint: RpcEndpoint } | { kind: 'developer-bypass' };
 
-// One step above the cluster sidebar's `z-[1060]`, the highest of the legacy dashkit layers. The
-// developer-bypass confirmation renders from inside that sidebar, and the endpoint prompt has to stay on
-// top if the user opens the switcher while it is waiting for an answer.
-const CONSENT_Z_INDEX = 1070;
+const CONSENT_Z_INDEX = 1210;
+
+const PLATE_CLASSES = 'rounded-md border border-solid border-white/10 bg-outer-space-800 p-3 text-left';
+const LABEL_CLASSES = 'text-xs uppercase text-outer-space-300';
+const ACTION_CLASSES = 'focus-visible:!ring-1 focus-visible:!ring-accent focus-visible:!ring-offset-0';
+const DANGER_CLASSES = '!bg-dk-danger hover:!bg-dk-danger/90';
+const DETAILS_CLASSES = 'text-left [&[open]]:pb-2 [&[open]_svg]:rotate-90';
+const SUMMARY_CLASSES = cn(
+    'flex cursor-pointer list-none items-center gap-1.5 text-[13px] text-outer-space-300',
+    'transition-colors hover:text-white [&::-webkit-details-marker]:hidden',
+);
+const FOLD_TEXT_CLASSES = 'text-[13px] leading-relaxed text-outer-space-300';
+const FOOTER_CLASSES = '!flex-row !justify-start gap-2 pt-1 sm:!space-x-0';
+const SCROLL_CLASSES = 'mb-5 flex max-h-[60dvh] flex-col gap-2 overflow-y-auto text-left';
+const CONTENT_CLASSES = '!gap-3 !border-outer-space-800 !bg-outer-space-900 !p-5 !pt-6';
 
 type Props = {
     request: ConsentRequest | undefined;
@@ -29,22 +39,16 @@ type Props = {
 };
 
 export function CustomUrlConsentDialog({ request, onConfirm, onCancel }: Props) {
-    // What the dialog shows, which outlives what it is asking: the same `undefined` that closes it would
-    // otherwise blank the body, and the content stays on screen for the whole exit animation.
     const shown = useRetainedRequest(request);
 
-    // Anything that closes the dialog — Escape, the X, Cancel — is a decline: the safe outcome has to be
-    // the default one. A click outside closes nothing, though: this asks a security question, and a stray
-    // click on the backdrop is not an answer to it.
     return (
         <Dialog open={request !== undefined} onOpenChange={open => !open && onCancel()}>
             <DialogContent
                 data-testid="custom-url-consent"
                 zIndex={CONSENT_Z_INDEX}
+                className={CONTENT_CLASSES}
                 onInteractOutside={event => event.preventDefault()}
             >
-                {/* Per kind, never a two-way ternary: the request the dialog closed on is `undefined`, and an
-                    `else` branch would answer one question with the other one's copy. */}
                 {shown?.kind === 'endpoint' ? (
                     <EndpointConsent endpoint={shown.endpoint} onConfirm={onConfirm} onCancel={onCancel} />
                 ) : shown?.kind === 'developer-bypass' ? (
@@ -55,6 +59,80 @@ export function CustomUrlConsentDialog({ request, onConfirm, onCancel }: Props)
     );
 }
 
+function WarningHeader({ question }: { question: string }) {
+    return (
+        <DialogHeader className="!space-y-0 !text-left">
+            <DialogTitle className="!text-xl !font-medium !leading-snug !text-dk-danger">
+                <AlertTriangle size={24} aria-hidden className="mr-2 inline-block align-[-0.2em]" />
+                {question}
+            </DialogTitle>
+        </DialogHeader>
+    );
+}
+
+function Stakes({ children }: { children: React.ReactNode }) {
+    return <DialogDescription className="m-0 !text-[13px] leading-relaxed !text-white">{children}</DialogDescription>;
+}
+
+function ServerPowersFold({ summary }: { summary: string }) {
+    return (
+        <details className={DETAILS_CLASSES}>
+            <summary className={SUMMARY_CLASSES}>
+                <ChevronRight size={14} aria-hidden className="shrink-0 transition-transform" />
+                {summary}
+            </summary>
+            <ul className={cn('m-0 mt-2 flex list-disc flex-col gap-1.5 pl-8', FOLD_TEXT_CLASSES)}>
+                <li>
+                    See your address, the time, and every account, signature, token and block you look at — one visit to
+                    your own wallet ties the two together.
+                </li>
+                <li>
+                    Answer with whatever it likes: balances, account owners, token details, the status of a transaction.
+                    The page shows what it returns, so a payment can be made to look settled.
+                </li>
+                <li>Leave things out — a transaction, an instruction, an account — which reads as absence.</li>
+                <li>
+                    Shape what you are about to sign: the account data and the simulation an interactive IDL shows you
+                    come from it, and it receives the signed transaction before the network does.
+                </li>
+            </ul>
+            <p className={cn('m-0 mt-2 pl-8', FOLD_TEXT_CLASSES)}>
+                It never sees your keys, and nothing is signed without your wallet asking you first.
+            </p>
+        </details>
+    );
+}
+
+function Actions({
+    cancelLabel,
+    confirmLabel,
+    onCancel,
+    onConfirm,
+}: { cancelLabel: string; confirmLabel: string } & Pick<Props, 'onCancel' | 'onConfirm'>) {
+    return (
+        <DialogFooter className={cn(FOOTER_CLASSES, '!items-center')}>
+            <Button
+                size="lg"
+                variant="destructive"
+                className={cn(ACTION_CLASSES, DANGER_CLASSES)}
+                onClick={onConfirm}
+                data-testid="consent-confirm"
+            >
+                {confirmLabel}
+            </Button>
+            <Button
+                size="lg"
+                variant="outline"
+                className={ACTION_CLASSES}
+                onClick={onCancel}
+                data-testid="consent-cancel"
+            >
+                {cancelLabel}
+            </Button>
+        </DialogFooter>
+    );
+}
+
 function EndpointConsent({
     endpoint,
     onConfirm,
@@ -62,39 +140,25 @@ function EndpointConsent({
 }: { endpoint: RpcEndpoint } & Pick<Props, 'onCancel' | 'onConfirm'>) {
     return (
         <>
-            <DialogHeader>
-                <DialogTitle>Connect to this RPC server?</DialogTitle>
-                <DialogDescription>
-                    A link asked the Explorer to load Solana data from a server instead of a public cluster.
-                </DialogDescription>
-            </DialogHeader>
-
-            {/* The host is the decision, so it gets its own line in full: a lookalike domain reads as the
-                real thing inside a sentence. */}
-            <div className="border border-dk-gray-700 bg-dk-black p-3">
-                <div className="break-all font-mono text-base" data-testid="consent-host">
-                    {endpoint.host}
-                </div>
-                {endpoint.hasPathOrQuery && (
-                    <div className="mt-1.5 break-all text-xs text-dk-gray-700" data-testid="consent-full-url">
+            <WarningHeader question="Connect to an unknown RPC server?" />
+
+            <div className={SCROLL_CLASSES}>
+                <Stakes>
+                    A link asked the Explorer to read its data from this server instead of a public cluster. Connect
+                    only if you trust whoever sent the link.
+                </Stakes>
+
+                <div className={PLATE_CLASSES}>
+                    <div className={LABEL_CLASSES}>Server</div>
+                    <div className="mt-1 break-all font-mono text-sm text-white" data-testid="consent-host">
                         {endpoint.href}
                     </div>
-                )}
-            </div>
+                </div>
 
-            <p className="text-dk-gray-700">
-                Everything you look up is sent to this server, and the Explorer shows whatever it returns — balances,
-                token details and transaction results included. Only continue if you trust whoever gave you the link.
-            </p>
+                <ServerPowersFold summary="What this server can do" />
+            </div>
 
-            <DialogFooter>
-                <Button ui="dashkit" variant="white" onClick={onCancel} data-testid="consent-cancel">
-                    Cancel
-                </Button>
-                <Button ui="dashkit" variant="primary" onClick={onConfirm} data-testid="consent-confirm">
-                    Connect
-                </Button>
-            </DialogFooter>
+            <Actions confirmLabel="Connect" cancelLabel="Reject" onConfirm={onConfirm} onCancel={onCancel} />
         </>
     );
 }
@@ -102,35 +166,21 @@ function EndpointConsent({
 function BypassConsent({ onConfirm, onCancel }: Pick<Props, 'onCancel' | 'onConfirm'>) {
     return (
         <>
-            <DialogHeader>
-                <DialogTitle>Stop asking about custom RPC servers?</DialogTitle>
-                <DialogDescription>This is a developer setting. It changes how links are treated.</DialogDescription>
-            </DialogHeader>
-
-            <Alert variant="danger" className="mb-0">
-                While this is on, any link you open can point the Explorer at any RPC server without asking you first.
-            </Alert>
-
-            <p className="text-dk-gray-700">
-                It stays on in this browser until you turn it off. Leave it off unless you are testing against your own
-                endpoints.
-            </p>
+            <WarningHeader question="Trust any RPC server?" />
+
+            <div className={SCROLL_CLASSES}>
+                <Stakes>
+                    Any link could then point the Explorer at its own RPC server, with no question asked. Only for
+                    testing your own endpoints.
+                </Stakes>
+                <ServerPowersFold summary="What a server chosen this way can do" />
+            </div>
 
-            <DialogFooter>
-                <Button ui="dashkit" variant="white" onClick={onCancel} data-testid="consent-cancel">
-                    Cancel
-                </Button>
-                <Button ui="dashkit" variant="danger" onClick={onConfirm} data-testid="consent-confirm">
-                    Turn on anyway
-                </Button>
-            </DialogFooter>
+            <Actions confirmLabel="Trust" cancelLabel="Keep asking" onConfirm={onConfirm} onCancel={onCancel} />
         </>
     );
 }
 
-// Radix keeps the content mounted until the exit animation ends (`duration-200` on `DialogContent`), so the
-// request has to outlive the prop that cleared it. Retaining it also keeps the endpoint's host on screen
-// while the box fades, rather than collapsing it onto nothing.
 function useRetainedRequest(request: ConsentRequest | undefined) {
     const retained = useRef(request);
     if (request !== undefined) retained.current = request;
diff --git a/app/features/cluster-switcher/ui/EndpointForm.tsx b/app/features/cluster-switcher/ui/EndpointForm.tsx
new file mode 100644
index 000000000..07f034f10
--- /dev/null
+++ b/app/features/cluster-switcher/ui/EndpointForm.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import { Button } from '@components/shared/ui/button';
+import { Input } from '@components/shared/ui/input';
+import { parseRpcEndpoint } from '@entities/cluster';
+import { MAX_CLUSTER_NAME_LENGTH } from '@features/cluster-switcher/client';
+import React, { useState } from 'react';
+
+import { MENU_FIELD_BORDER, MENU_PRIMARY_BUTTON, MENU_SECONDARY_BUTTON } from './cluster-row-classes';
+
+export function EndpointForm({
+    error,
+    initialName = '',
+    onCancel,
+    onSave,
+    url,
+}: {
+    error?: string;
+    initialName?: string;
+    onCancel: () => void;
+    onSave: (name: string) => void;
+    url: string;
+}) {
+    const [name, setName] = useState(initialName);
+    const host = parseRpcEndpoint(url)?.host ?? url;
+
+    const onKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            onSave(name.trim());
+        }
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            onCancel();
+        }
+    };
+
+    return (
+        <div className="flex w-full flex-col gap-1.5 text-sm text-white" data-testid="save-cluster-form">
+            <span className="text-[10px] font-medium uppercase tracking-[0.12em] text-outer-space-300">
+                Name this endpoint
+            </span>
+            <Input
+                type="text"
+                variant="dark"
+                className={MENU_FIELD_BORDER}
+                aria-label={`Name for ${host}`}
+                placeholder="Endpoint name"
+                value={name}
+                maxLength={MAX_CLUSTER_NAME_LENGTH}
+                onChange={e => setName(e.target.value)}
+                onKeyDown={onKeyDown}
+                data-testid="cluster-name-input"
+                autoFocus
+            />
+            <span className="block truncate font-mono text-[11px] text-outer-space-300" title={url}>
+                {url}
+            </span>
+            {error && (
+                <span className="text-xs leading-snug text-[#b45be1]" data-testid="save-cluster-error">
+                    {error}
+                </span>
+            )}
+            <span className="flex items-center gap-2">
+                <Button
+                    variant="accent"
+                    size="sm"
+                    className={MENU_PRIMARY_BUTTON}
+                    onClick={() => onSave(name.trim())}
+                    title="Save this endpoint"
+                    data-testid="confirm-save-cluster-btn"
+                >
+                    Save
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className={MENU_SECONDARY_BUTTON}
+                    onClick={onCancel}
+                    data-testid="cancel-save-cluster-btn"
+                >
+                    Cancel
+                </Button>
+            </span>
+        </div>
+    );
+}
diff --git a/app/features/cluster-switcher/ui/SavedClusterList.tsx b/app/features/cluster-switcher/ui/SavedClusterList.tsx
index 1c75e4224..4f6745a6a 100644
--- a/app/features/cluster-switcher/ui/SavedClusterList.tsx
+++ b/app/features/cluster-switcher/ui/SavedClusterList.tsx
@@ -15,23 +15,18 @@ import { clusterButtonVariants } from './cluster-button-variants';
 
 type SavedClusterListProps = { savedClusters: SavedCluster[]; status: ClusterStatus };
 
-// The endpoints the user has kept under a name. Deleting one is the only control here that has to think
-// about the page it leaves behind.
 export function SavedClusterList({ savedClusters, status }: SavedClusterListProps) {
     const { endpoint, cluster } = useCluster();
     const removeSavedCluster = useSetAtom(removeSavedClusterAtom);
     const buildHref = useClusterHref();
     const router = useRouter();
 
-    const handleDelete = (name: string) => {
+    const handleDelete = (url: string) => {
         const activeUrl = endpoint?.href;
-        const wasActive = cluster === Cluster.Custom && savedClusters.find(c => c.name === name)?.url === activeUrl;
-        removeSavedCluster(name);
-        // Deleting the entry the page is pointed at leaves an endpoint with no home, so fall back to the
-        // default cluster — unless another entry still names the same URL.
-        const stillSaved = savedClusters.some(c => c.name !== name && c.url === activeUrl);
-        if (wasActive && !stillSaved) {
-            router.push(buildHref({ cluster: DEFAULT_CLUSTER, customUrl: '' }));
+        const wasActive = cluster === Cluster.Custom && url === activeUrl;
+        removeSavedCluster(url);
+        if (wasActive) {
+            router.push(buildHref({ cluster: DEFAULT_CLUSTER, customUrl: '' }), { scroll: false });
         }
     };
 
@@ -58,34 +53,21 @@ type SavedClusterItemProps = {
     saved: SavedCluster;
     status: ClusterStatus;
     isActive: boolean;
-    onDelete: (name: string) => void;
+    onDelete: (url: string) => void;
 };
 
 function SavedClusterItem({ saved, status, isActive, onDelete }: SavedClusterItemProps) {
     const buildHref = useClusterHref();
     const approveOrigin = useSetAtom(approveRpcOriginAtom);
 
-    // `parseSavedClusters` already refuses non-endpoints at the storage boundary, so this is `undefined`
-    // only if that check is ever loosened — not a state the UI can reach today.
     const savedEndpoint = parseRpcEndpoint(saved.url);
 
-    // Picking a saved cluster is a first-party action, so approve before the navigation lands. Otherwise
-    // the reader treats the user's own saved endpoint as an unvetted inbound one and prompts for it.
     const onSelect = () => {
         if (savedEndpoint !== undefined) approveOrigin(savedEndpoint);
     };
 
     return (
         <div className="relative mb-3 w-full" data-testid={`saved-cluster-${saved.name}`}>
-            {/* `pl-10 pr-10` rather than `px-10`: cn is clsx-only, and Tailwind emits pl/pr after px, so
-                this is what actually beats the size compound's `px-3`. Symmetric so short names stay
-                centered; 40px clears the 36px delete button.
-
-                The host gets a line of its own because clicking a saved cluster *is* the commit — a name
-                alone cannot tell a stale entry from a good one, or two entries apart. Host rather than
-                `href`: provider endpoints carry the API key in the path or query, and this panel gets
-                opened during screen shares. The whole URL stays in `title`. Dropped when the name is
-                already the host, rather than printing one string twice. */}
             <Link
                 className={cn(clusterButtonVariants({ active: isActive, status }), 'pl-10 pr-10 text-center')}
                 href={buildHref({ cluster: Cluster.Custom, customUrl: saved.url })}
@@ -93,10 +75,6 @@ function SavedClusterItem({ saved, status, isActive, onDelete }: SavedClusterIte
                 title={`${saved.name} — ${saved.url}`}
                 data-testid={`saved-cluster-link-${saved.name}`}
             >
-                {/* Two `block` spans rather than `flex flex-col`: the dashkit base sets `inline-block`,
-                    and cn is clsx-only, so a display override would ride on Tailwind's emission order.
-                    `text-dk-gray-700` sits on the child so it beats the active compound's status color,
-                    keeping the host as fine print whether or not this entry is selected. */}
                 <span className="block truncate">{saved.name}</span>
                 {savedEndpoint && savedEndpoint.host !== saved.name && (
                     <span
@@ -107,13 +85,6 @@ function SavedClusterItem({ saved, status, isActive, onDelete }: SavedClusterIte
                     </span>
                 )}
             </Link>
-            {/* `variant` is not optional here, whatever the prop type says: the dashkit default emits no
-                bg/border/text, and styles.css reverts bare buttons to UA chrome — a light grey box on the
-                dark pill. `outline-danger` is the app's destructive treatment, kept for its danger color
-                with the outline dropped. `border-transparent` rather than `border-0` keeps the 1px box, so
-                nothing shifts. Important, like `!text-[11px]` in button.tsx: cn is clsx-only, so this has
-                to beat both the variant's `border-[#b45be1]` and its `hover:border-*` regardless of
-                emission order. The hover fill stays as the only remaining hover cue. */}
             <Button
                 ui="dashkit"
                 variant="outline-danger"
@@ -121,7 +92,7 @@ function SavedClusterItem({ saved, status, isActive, onDelete }: SavedClusterIte
                 className="absolute right-1 top-1/2 -translate-y-1/2 !border-transparent"
                 onClick={e => {
                     e.stopPropagation();
-                    onDelete(saved.name);
+                    onDelete(saved.url);
                 }}
                 data-testid={`delete-cluster-${saved.name}`}
                 aria-label={`Delete ${saved.name}`}
diff --git a/app/features/cluster-switcher/ui/SavedEndpointRow.tsx b/app/features/cluster-switcher/ui/SavedEndpointRow.tsx
new file mode 100644
index 000000000..ca6f01c82
--- /dev/null
+++ b/app/features/cluster-switcher/ui/SavedEndpointRow.tsx
@@ -0,0 +1,193 @@
+'use client';
+
+import { Button } from '@components/shared/ui/button';
+import { IconButton } from '@components/shared/ui/icon-button';
+import { cn } from '@components/shared/utils';
+import { parseRpcEndpoint } from '@entities/cluster';
+import { type SavedCluster, useSavedClusters } from '@features/cluster-switcher/client';
+import React, { useEffect, useState } from 'react';
+import { Edit2, Trash2 } from 'react-feather';
+
+import { endpointProvenance } from '../lib/endpoint-provenance';
+import { MENU_SECONDARY_BUTTON, rowClasses } from './cluster-row-classes';
+import { EndpointForm } from './EndpointForm';
+import { KnownMark, UnknownMark } from './provenance-mark';
+
+const HOVER_FROM_GROUP =
+    '[@media(hover:hover)]:group-hover/row:border-white/10 [@media(hover:hover)]:group-hover/row:bg-outer-space-800';
+
+const UNDO_WINDOW_MS = 10_000;
+
+export function SavedEndpointRow({
+    active,
+    facts,
+    entry,
+    onDelete,
+    onPick,
+    pinned,
+}: {
+    active: boolean;
+    facts?: React.ReactNode;
+    entry: SavedCluster;
+    onDelete?: () => void;
+    onPick: () => void;
+    pinned?: boolean;
+}) {
+    const { removeSavedCluster, restoreSavedCluster, savedClusters, updateSavedCluster } = useSavedClusters();
+    const [editing, setEditing] = useState(false);
+    const [removed, setRemoved] = useState<number | undefined>(undefined);
+
+    useEffect(() => {
+        if (removed === undefined) return;
+        const timer = setTimeout(() => setRemoved(undefined), UNDO_WINDOW_MS);
+        return () => clearTimeout(timer);
+    }, [removed]);
+
+    const savedEndpoint = parseRpcEndpoint(entry.url);
+    const heading = entry.name || savedEndpoint?.host || entry.url;
+    const provenance = endpointProvenance(entry.url);
+    const title = entry.name === '' ? entry.url : `${entry.name} — ${entry.url}`;
+
+    if (editing)
+        return (
+            <li data-testid={`saved-cluster-${entry.url}`}>
+                <EndpointForm
+                    url={entry.url}
+                    initialName={entry.name}
+                    onSave={name => {
+                        updateSavedCluster({ name, url: entry.url });
+                        setEditing(false);
+                    }}
+                    onCancel={() => setEditing(false)}
+                />
+            </li>
+        );
+
+    const rowClass = cn(rowClasses({ active, stacked: true }), 'pr-14', HOVER_FROM_GROUP);
+
+    const mark =
+        provenance === 'known' ? (
+            <KnownMark withLabel={active} />
+        ) : provenance === 'unknown' ? (
+            <UnknownMark withLabel={active} />
+        ) : undefined;
+
+    const contents = (
+        <span className="flex min-w-0 flex-1 flex-col leading-tight">
+            <span className="flex min-w-0 items-center gap-1.5">
+                <span
+                    className={cn(
+                        'truncate text-sm font-medium text-white',
+                        entry.name === '' && 'font-mono',
+                        removed !== undefined && 'line-through opacity-60',
+                    )}
+                >
+                    {heading}
+                </span>
+                {mark !== undefined && <span className="flex shrink-0 items-center">{mark}</span>}
+            </span>
+            {savedEndpoint && entry.name !== '' && savedEndpoint.host !== entry.name && (
+                <span className="block truncate font-mono text-xs text-outer-space-300">{savedEndpoint.host}</span>
+            )}
+            {active && facts !== undefined && (
+                <span className="mt-1 flex min-w-0 flex-wrap items-center gap-1">{facts}</span>
+            )}
+        </span>
+    );
+
+    if (removed !== undefined)
+        return (
+            <li className="group/row relative" data-testid={`saved-cluster-${entry.url}`}>
+                <div className={cn(rowClass, 'cursor-default')} aria-disabled>
+                    {contents}
+                </div>
+                <span className="absolute right-1.5 top-1.5 flex items-center gap-0.5">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        className={MENU_SECONDARY_BUTTON}
+                        onClick={() => {
+                            restoreSavedCluster({ ...entry, at: removed });
+                            setRemoved(undefined);
+                        }}
+                        data-testid={`restore-cluster-${entry.url}`}
+                    >
+                        Restore
+                    </Button>
+                </span>
+            </li>
+        );
+
+    return (
+        <li className="group/row relative" data-testid={`saved-cluster-${entry.url}`}>
+            <button
+                type="button"
+                onClick={onPick}
+                title={title}
+                aria-current={active ? 'true' : undefined}
+                className={cn(rowClass, 'text-left')}
+                data-testid={`pick-cluster-${entry.url}`}
+            >
+                {contents}
+            </button>
+            {!pinned && (
+                <span className="pointer-events-none absolute right-1.5 top-1.5 flex items-center gap-0.5">
+                    <RowControl
+                        label={entry.name === '' ? `Name ${heading}` : `Rename ${entry.name}`}
+                        title={entry.name === '' ? 'Name this endpoint' : 'Rename this endpoint'}
+                        onClick={() => setEditing(true)}
+                        testId={`rename-cluster-${entry.url}`}
+                    >
+                        <Edit2 size={14} aria-hidden />
+                    </RowControl>
+                    <RowControl
+                        label={`Delete ${heading}`}
+                        title="Delete this endpoint"
+                        danger
+                        onClick={() => {
+                            const at = savedClusters.findIndex(c => c.url === entry.url);
+                            removeSavedCluster(entry.url);
+                            onDelete?.();
+                            setRemoved(at < 0 ? 0 : at);
+                        }}
+                        testId={`delete-cluster-${entry.url}`}
+                    >
+                        <Trash2 size={14} aria-hidden />
+                    </RowControl>
+                </span>
+            )}
+        </li>
+    );
+}
+
+function RowControl({
+    children,
+    danger,
+    label,
+    onClick,
+    testId,
+    title,
+}: {
+    children: React.ReactNode;
+    danger?: boolean;
+    label: string;
+    onClick: () => void;
+    testId: string;
+    title: string;
+}) {
+    return (
+        <IconButton
+            variant="ghost"
+            aria-label={label}
+            title={title}
+            onClick={onClick}
+            className={cn(
+                'pointer-events-auto cursor-pointer !text-neutral-300 opacity-0 transition-[opacity,color] [&_svg]:!size-3.5',
+                'focus-visible:opacity-100 [@media(hover:hover)]:group-hover/row:opacity-100 [@media(hover:none)]:opacity-100',
+                danger ? '[@media(hover:hover)]:hover:!text-[#b45be1]' : '[@media(hover:hover)]:hover:!text-white',
+            )}
+            data-testid={testId}
+            icon={children}
+        />
+    );
+}
diff --git a/app/features/cluster-switcher/ui/__stories__/ClusterStatusButton.responsive.stories.tsx b/app/features/cluster-switcher/ui/__stories__/ClusterStatusButton.responsive.stories.tsx
deleted file mode 100644
index 3f8e465f4..000000000
--- a/app/features/cluster-switcher/ui/__stories__/ClusterStatusButton.responsive.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { withClusterState } from '@storybook-config/decorators';
-import { INITIAL_VIEWPORTS, withViewportFromGlobal } from '@storybook-config/responsive-decorators';
-import type { Meta, StoryObj } from '@storybook-config/types';
-import { Cluster, ClusterStatus } from '@utils/cluster';
-
-import { ClusterStatusButton } from '../ClusterStatusButton';
-
-const CUSTOM_RPC_URL = 'https://random-helius-fast-mainnet.helius-rpc.com';
-
-const meta = {
-    component: ClusterStatusButton,
-    decorators: [
-        withClusterState({ cluster: Cluster.Custom, customUrl: CUSTOM_RPC_URL, status: ClusterStatus.Connected }),
-        withViewportFromGlobal,
-    ],
-    parameters: {
-        docs: { story: { height: INITIAL_VIEWPORTS.iphonex.styles.height } },
-        viewport: { options: INITIAL_VIEWPORTS },
-    },
-    tags: ['autodocs', 'test'],
-    title: 'Features/ClusterSwitcher/ClusterStatusButton@Media',
-} satisfies Meta<typeof ClusterStatusButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Mobile: Story = {
-    globals: { viewport: { value: 'iphonex' } },
-};
-
-export const TabletPortrait: Story = {
-    globals: { viewport: { value: 'ipad' } },
-};
diff --git a/app/features/cluster-switcher/ui/__stories__/ClusterStatusButton.stories.tsx b/app/features/cluster-switcher/ui/__stories__/ClusterStatusButton.stories.tsx
deleted file mode 100644
index 95a4925d1..000000000
--- a/app/features/cluster-switcher/ui/__stories__/ClusterStatusButton.stories.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { withClusterState } from '@storybook-config/decorators';
-import type { Decorator, Meta, StoryObj } from '@storybook-config/types';
-import { Cluster, ClusterStatus, DEVNET_URL, MAINNET_BETA_URL, TESTNET_URL } from '@utils/cluster';
-import { expect, within } from 'storybook/test';
-
-import { ClusterStatusButton } from '../ClusterStatusButton';
-
-// A long custom RPC endpoint (the case that used to make the navbar button overflow and wrap).
-const CUSTOM_RPC_URL = 'https://random-helius-fast-mainnet.helius-rpc.com';
-const LOCALHOST_URL = 'http://localhost:3000';
-
-// Fixes wrapper width for truncation tests.
-const WRAPPER_WIDTH_PX = 210;
-
-// Wrap with fixed width so truncation is observable outside of a full Navbar.
-const withWrapperWidth: Decorator = Story => (
-    <div style={{ maxWidth: `${WRAPPER_WIDTH_PX}px` }}>
-        <Story />
-    </div>
-);
-
-const meta = {
-    component: ClusterStatusButton,
-    tags: ['autodocs', 'test'],
-    title: 'Features/ClusterSwitcher/ClusterStatusButton',
-} satisfies Meta<typeof ClusterStatusButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const MainnetBeta: Story = {
-    decorators: [
-        withClusterState({
-            cluster: Cluster.MainnetBeta,
-            customUrl: MAINNET_BETA_URL,
-            status: ClusterStatus.Connected,
-        }),
-    ],
-    play: async ({ canvasElement }) => {
-        expect(within(canvasElement).getByText('Mainnet Beta')).toBeInTheDocument();
-    },
-};
-
-export const Devnet: Story = {
-    decorators: [withClusterState({ cluster: Cluster.Devnet, customUrl: DEVNET_URL, status: ClusterStatus.Connected })],
-    play: async ({ canvasElement }) => {
-        expect(within(canvasElement).getByText('Devnet')).toBeInTheDocument();
-    },
-};
-
-export const Testnet: Story = {
-    decorators: [
-        withClusterState({ cluster: Cluster.Testnet, customUrl: TESTNET_URL, status: ClusterStatus.Connected }),
-    ],
-    play: async ({ canvasElement }) => {
-        expect(within(canvasElement).getByText('Testnet')).toBeInTheDocument();
-    },
-};
-
-export const CustomUrlTruncated: Story = {
-    decorators: [
-        withClusterState({ cluster: Cluster.Custom, customUrl: CUSTOM_RPC_URL, status: ClusterStatus.Connected }),
-        withWrapperWidth,
-    ],
-    play: async ({ canvasElement }) => {
-        const button = within(canvasElement).getByText(CUSTOM_RPC_URL);
-        const style = getComputedStyle(button);
-
-        // `truncate` class is overflow-hidden + text-ellipsis + whitespace-nowrap
-        expect(style.overflowX).toBe('hidden');
-        expect(style.textOverflow).toBe('ellipsis');
-        expect(style.whiteSpace).toBe('nowrap');
-
-        // The URL really is clipped: content is wider than the box, and the box stays within the navbar slot.
-        expect(button.scrollWidth).toBeGreaterThan(button.clientWidth);
-        expect(button.getBoundingClientRect().width).toBeLessThanOrEqual(WRAPPER_WIDTH_PX);
-    },
-};
-
-export const CustomLocalhost: Story = {
-    decorators: [
-        withClusterState({ cluster: Cluster.Custom, customUrl: LOCALHOST_URL, status: ClusterStatus.Connected }),
-    ],
-    play: async ({ canvasElement }) => {
-        expect(within(canvasElement).getByText(LOCALHOST_URL)).toBeInTheDocument();
-    },
-};
-
-export const Connecting: Story = {
-    decorators: [
-        withClusterState({ cluster: Cluster.Custom, customUrl: CUSTOM_RPC_URL, status: ClusterStatus.Connecting }),
-    ],
-};
-
-export const Failure: Story = {
-    decorators: [
-        withClusterState({ cluster: Cluster.Custom, customUrl: CUSTOM_RPC_URL, status: ClusterStatus.Failure }),
-    ],
-};
diff --git a/app/features/cluster-switcher/ui/__tests__/ClusterModal.spec.tsx b/app/features/cluster-switcher/ui/__tests__/ClusterModal.spec.tsx
index 299100301..a1bd407f3 100644
--- a/app/features/cluster-switcher/ui/__tests__/ClusterModal.spec.tsx
+++ b/app/features/cluster-switcher/ui/__tests__/ClusterModal.spec.tsx
@@ -320,6 +320,7 @@ describe('ClusterModal cluster hrefs', () => {
             expect(nav.push).not.toHaveBeenCalled();
             expect(nav.replace).toHaveBeenCalledWith(
                 `/?cluster=custom&customUrl=${encodeURIComponent('http://typed-node:8899')}&sort=fee`,
+                { scroll: false },
             );
         } finally {
             vi.useRealTimers();
@@ -329,7 +330,7 @@ describe('ClusterModal cluster hrefs', () => {
     it('should drop the endpoint when deleting the saved cluster the page is pointed at', () => {
         renderWithStore([{ name: 'My Local', url: CUSTOM_URL }]);
         fireEvent.click(screen.getByTestId('delete-cluster-My Local'));
-        expect(nav.push).toHaveBeenCalledWith('/?sort=fee');
+        expect(nav.push).toHaveBeenCalledWith('/?sort=fee', { scroll: false });
     });
 });
 
@@ -359,6 +360,7 @@ describe('ClusterModal endpoint consent', () => {
             expect(store.get(approvedOriginsAtom)).toEqual(['https://my-node.example']);
             expect(nav.replace).toHaveBeenCalledWith(
                 `/?cluster=custom&customUrl=${encodeURIComponent('https://my-node.example/rpc?api-key=secret')}&sort=fee`,
+                { scroll: false },
             );
         } finally {
             vi.useRealTimers();
@@ -385,7 +387,7 @@ describe('ClusterModal endpoint consent', () => {
             renderWithStore();
             typeUrl('');
 
-            expect(nav.replace).toHaveBeenCalledWith('/?cluster=custom&sort=fee');
+            expect(nav.replace).toHaveBeenCalledWith('/?cluster=custom&sort=fee', { scroll: false });
         } finally {
             vi.useRealTimers();
         }
diff --git a/app/features/cluster-switcher/ui/__tests__/ClusterStatusButton.spec.tsx b/app/features/cluster-switcher/ui/__tests__/ClusterStatusButton.spec.tsx
deleted file mode 100644
index f3b76fec7..000000000
--- a/app/features/cluster-switcher/ui/__tests__/ClusterStatusButton.spec.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { Cluster, ClusterStatus } from '@utils/cluster';
-import { describe, expect, it, vi } from 'vitest';
-
-const clusterMock = vi.hoisted(() => ({
-    cluster: 4 as Cluster, // Cluster.Custom — a literal, because `vi.hoisted` runs before imports.
-    customUrl: 'http://localhost:8899',
-    name: 'Custom',
-    status: 0 as ClusterStatus, // ClusterStatus.Connected
-}));
-
-// Spread the real barrel so `clusterSelection` stays live; only the connection hook is stubbed. Building
-// a real selection from the loose fields keeps a test from handing over a pairing the app cannot produce.
-vi.mock('@entities/cluster', async importOriginal => {
-    const actual = await importOriginal<typeof import('@entities/cluster')>();
-    return {
-        ...actual,
-        useCluster: () => ({
-            ...actual.clusterSelection(clusterMock.cluster, clusterMock.customUrl),
-            name: clusterMock.name,
-            status: clusterMock.status,
-        }),
-    };
-});
-
-// Must import after mocks
-
-import { ClusterStatusButton } from '../ClusterStatusButton';
-
-function renderButton(overrides: Partial<typeof clusterMock> = {}) {
-    Object.assign(clusterMock, {
-        cluster: Cluster.Custom,
-        customUrl: 'http://localhost:8899',
-        name: 'Custom',
-        status: ClusterStatus.Connected,
-        ...overrides,
-    });
-    const { container, unmount } = render(<ClusterStatusButton />);
-    // `Button` renders with `asChild`, so the styled element is the child span, not a <button>.
-    return { control: container.firstElementChild as HTMLElement, unmount };
-}
-
-describe('ClusterStatusButton', () => {
-    describe('label', () => {
-        it('should show scheme and host only, so an embedded key never reaches the navbar', () => {
-            const { control } = renderButton({ customUrl: 'https://mainnet.helius-rpc.com/?api-key=SECRET' });
-
-            expect(screen.getByText('https://mainnet.helius-rpc.com')).toBeInTheDocument();
-            expect(control.textContent).not.toContain('SECRET');
-        });
-
-        it('should keep the port for a local endpoint, since that is what separates two validators', () => {
-            renderButton({ customUrl: 'http://localhost:8900' });
-
-            expect(screen.getByText('http://localhost:8900')).toBeInTheDocument();
-        });
-
-        // No test for an unparseable endpoint: it is an `RpcEndpoint`, so a bare `localhost:8899` is
-        // refused at the boundary. See `resolve-cluster.spec.ts`, "should refuse a malformed candidate URL".
-
-        it('should show the cluster name off the custom cluster', () => {
-            renderButton({ cluster: Cluster.Devnet, name: 'Devnet' });
-
-            expect(screen.getByText('Devnet')).toBeInTheDocument();
-        });
-    });
-
-    describe('provenance', () => {
-        // Colour carries provenance, the icon carries status. A remote endpoint stays marked for as long
-        // as it is in use, which a one-time dialog cannot do.
-        const amber = 'bg-[#e08214]';
-
-        it('should mark a remote custom endpoint, connected or connecting', () => {
-            for (const status of [ClusterStatus.Connected, ClusterStatus.Connecting]) {
-                const { control, unmount } = renderButton({ customUrl: 'https://my-node.example/rpc', status });
-
-                expect(control.className).toContain(amber);
-                // Colour cannot be the only signal.
-                expect(screen.getByText('Custom RPC endpoint.')).toBeInTheDocument();
-                unmount();
-            }
-        });
-
-        it('should not mark a local endpoint', () => {
-            const { control } = renderButton({ customUrl: 'http://localhost:8899' });
-
-            expect(control.className).not.toContain(amber);
-            expect(screen.queryByText('Custom RPC endpoint.')).not.toBeInTheDocument();
-        });
-
-        it('should not mark a known cluster', () => {
-            const { control } = renderButton({ cluster: Cluster.Devnet, name: 'Devnet' });
-
-            expect(control.className).not.toContain(amber);
-        });
-
-        it('should leave a failed connection red, since that is the more urgent fact', () => {
-            const { control } = renderButton({
-                customUrl: 'https://my-node.example/rpc',
-                status: ClusterStatus.Failure,
-            });
-
-            expect(control.className).not.toContain(amber);
-        });
-    });
-});
diff --git a/app/features/cluster-switcher/ui/__tests__/CustomUrlConsentDialog.spec.tsx b/app/features/cluster-switcher/ui/__tests__/CustomUrlConsentDialog.spec.tsx
index 7dbac27d8..5dea854b4 100644
--- a/app/features/cluster-switcher/ui/__tests__/CustomUrlConsentDialog.spec.tsx
+++ b/app/features/cluster-switcher/ui/__tests__/CustomUrlConsentDialog.spec.tsx
@@ -7,15 +7,15 @@ import { type ConsentRequest, CustomUrlConsentDialog } from '../CustomUrlConsent
 const ENDPOINT_REQUEST: ConsentRequest = { endpoint: rpcEndpoint('https://my-node.example/rpc'), kind: 'endpoint' };
 const BYPASS_REQUEST: ConsentRequest = { kind: 'developer-bypass' };
 
-const ENDPOINT_QUESTION = 'Connect to this RPC server?';
-const BYPASS_QUESTION = 'Stop asking about custom RPC servers?';
+const ENDPOINT_QUESTION = 'Connect to an unknown RPC server?';
+const BYPASS_QUESTION = 'Trust any RPC server?';
 
 describe('CustomUrlConsentDialog', () => {
     afterEach(() => vi.restoreAllMocks());
 
     it('should keep the endpoint question on screen while it animates closed', () => {
         // Answering used to swap the copy on the way out: the last thing a visitor saw after refusing one
-        // server was a red button offering to stop asking about all of them.
+        // server was a red button offering to trust every link's choice of server.
         stubExitAnimation();
         const { close } = renderDialog(ENDPOINT_REQUEST);
 
diff --git a/app/features/cluster-switcher/ui/__tests__/PendingCustomUrlConsent.spec.tsx b/app/features/cluster-switcher/ui/__tests__/PendingCustomUrlConsent.spec.tsx
index 6dcea920f..a087397d6 100644
--- a/app/features/cluster-switcher/ui/__tests__/PendingCustomUrlConsent.spec.tsx
+++ b/app/features/cluster-switcher/ui/__tests__/PendingCustomUrlConsent.spec.tsx
@@ -56,8 +56,8 @@ describe('PendingCustomUrlConsent', () => {
         clusterState.pendingCustomUrl = rpcEndpoint(REMOTE_URL);
         renderConsent();
 
-        expect(screen.getByTestId('consent-host')).toHaveTextContent('my-node.example');
-        expect(screen.getByTestId('consent-full-url')).toHaveTextContent(REMOTE_URL);
+        // The whole address, once: the host is in it, and so is whatever follows the host.
+        expect(screen.getByTestId('consent-host')).toHaveTextContent(REMOTE_URL);
     });
 
     it('should sit above the cluster sidebar rather than under its overlay', () => {
diff --git a/app/features/cluster-switcher/ui/cluster-row-classes.ts b/app/features/cluster-switcher/ui/cluster-row-classes.ts
new file mode 100644
index 000000000..cfdae1fb5
--- /dev/null
+++ b/app/features/cluster-switcher/ui/cluster-row-classes.ts
@@ -0,0 +1,15 @@
+import { cn } from '@components/shared/utils';
+
+const ROW_BASE =
+    'flex w-full cursor-pointer justify-between gap-3 rounded-md border border-solid px-3 py-2 text-sm font-medium text-white no-underline transition-colors [@media(hover:hover)]:hover:border-white/10 [@media(hover:hover)]:hover:bg-outer-space-800 [@media(hover:hover)]:hover:text-white';
+
+export const ACTIVE_ROW = 'border-white/10 bg-outer-space-800';
+export const INACTIVE_ROW = 'border-transparent bg-transparent';
+
+export function rowClasses({ active, stacked }: { active?: boolean; stacked?: boolean } = {}) {
+    return cn(ROW_BASE, stacked ? 'items-start' : 'items-center', active ? ACTIVE_ROW : INACTIVE_ROW);
+}
+
+export const MENU_FIELD_BORDER = '!border-neutral-600';
+export const MENU_SECONDARY_BUTTON = 'cursor-pointer !bg-heavy-metal-900 hover:!bg-heavy-metal-850';
+export const MENU_PRIMARY_BUTTON = 'cursor-pointer !border border-solid border-transparent bg-clip-padding';
diff --git a/app/features/cluster-switcher/ui/provenance-mark.tsx b/app/features/cluster-switcher/ui/provenance-mark.tsx
new file mode 100644
index 000000000..c4bda5b10
--- /dev/null
+++ b/app/features/cluster-switcher/ui/provenance-mark.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { AlertTriangle, CheckCircle } from 'react-feather';
+
+export const KNOWN_COLOUR = '#1dd79b';
+export const UNKNOWN_COLOUR = '#e08214';
+
+const MARK_LABEL_CLASSES = 'text-[10px] font-medium uppercase tracking-[0.12em]';
+
+export function KnownMark({ size = 12, title, withLabel }: { size?: number; title?: string; withLabel?: boolean }) {
+    return (
+        <span
+            aria-hidden
+            className="flex shrink-0 items-center gap-1"
+            style={{ color: KNOWN_COLOUR }}
+            title={title ?? 'A known endpoint — one this deployment ships with or vouches for'}
+        >
+            <CheckCircle size={size} />
+            {withLabel && <span className={MARK_LABEL_CLASSES}>known</span>}
+        </span>
+    );
+}
+
+export function UnknownMark({ size = 12, title, withLabel }: { size?: number; title?: string; withLabel?: boolean }) {
+    return (
+        <span
+            aria-hidden
+            className="flex shrink-0 items-center gap-1"
+            style={{ color: UNKNOWN_COLOUR }}
+            title={title ?? 'Nobody has vouched for this endpoint'}
+        >
+            <AlertTriangle size={size} />
+            {withLabel && <span className={MARK_LABEL_CLASSES}>unknown</span>}
+        </span>
+    );
+}
diff --git a/app/features/search/ui/BaseSearch.tsx b/app/features/search/ui/BaseSearch.tsx
index 10cb12e2c..1769cf0bc 100644
--- a/app/features/search/ui/BaseSearch.tsx
+++ b/app/features/search/ui/BaseSearch.tsx
@@ -97,14 +97,15 @@ export function BaseSearch({
                 <Command shouldFilter={false} label="Search">
                     <PopoverPrimitive.Anchor asChild>
                         <div
+                            data-search-frame
                             className={cn(
-                                'flex items-center gap-3',
-                                'rounded-md border border-heavy-metal-950 bg-heavy-metal-800 [border-style:solid]',
-                                'h-[38px] px-4 shadow-md',
+                                'flex items-center gap-2.5',
+                                'rounded-md border border-outer-space-700 bg-heavy-metal-800 [border-style:solid]',
+                                'h-[38px] pl-2.5 pr-1.5 shadow-md',
                                 'transition-shadow focus-within:shadow-[0_0_0.4rem_#00d18c]',
                             )}
                         >
-                            <Search className="shrink-0 text-heavy-metal-100" size={15} />
+                            <Search className="shrink-0 translate-x-px text-heavy-metal-100" size={15} />
                             <Command.Input
                                 ref={inputRef}
                                 autoFocus
@@ -112,7 +113,9 @@ export function BaseSearch({
                                     'w-full min-w-0 flex-1',
                                     'border-none bg-transparent outline-none',
                                     'text-sm text-white placeholder:text-heavy-metal-100',
-                                    'overflow-hidden text-ellipsis',
+                                    'overflow-hidden',
+                                    '[-webkit-mask-image:linear-gradient(to_right,#000_calc(100%-24px),transparent)]',
+                                    '[mask-image:linear-gradient(to_right,#000_calc(100%-24px),transparent)]',
                                 )}
                                 placeholder="Search for tokens, validators, programs, and accounts"
                                 value={value}
@@ -128,8 +131,8 @@ export function BaseSearch({
                                     aria-label="Clear search"
                                     className={cn(
                                         'flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center',
-                                        'appearance-none rounded border border-solid border-heavy-metal-950 bg-heavy-metal-700 p-0',
-                                        'text-heavy-metal-100 transition-colors hover:text-heavy-metal-400',
+                                        'appearance-none border-0 bg-transparent p-0',
+                                        'text-heavy-metal-100 transition-colors hover:text-white',
                                     )}
                                     type="button"
                                     onMouseDown={e => {
@@ -142,8 +145,8 @@ export function BaseSearch({
                             ) : (
                                 <kbd
                                     className={cn(
-                                        'flex h-6 w-6 shrink-0 items-center justify-center',
-                                        'rounded border border-solid border-heavy-metal-950 bg-heavy-metal-700',
+                                        'hidden h-6 w-6 shrink-0 items-center justify-center [@media(pointer:fine)]:flex',
+                                        'rounded border border-solid border-outer-space-600 bg-transparent',
                                         'text-sm text-heavy-metal-100',
                                     )}
                                 >
@@ -159,17 +162,18 @@ export function BaseSearch({
                         asChild
                         align="start"
                         sideOffset={4}
+                        data-search-panel
                         className={cn(
                             'z-50 rounded-md shadow-2xl [border-style:solid]',
                             'w-[var(--radix-popover-trigger-width)]',
-                            'border border-heavy-metal-950 bg-heavy-metal-800',
+                            'border border-outer-space-800 bg-outer-space-900',
                         )}
                         onInteractOutside={e => {
                             if (e.target instanceof Element && e.target === inputRef.current) e.preventDefault();
                         }}
                         onOpenAutoFocus={e => e.preventDefault()}
                     >
-                        <div>
+                        <div onMouseDown={event => event.preventDefault()}>
                             {/* Allow a single pill: hide-all rule can leave visibleTabs at length 1. */}
                             {hasResults && visibleTabs.length >= 1 && (
                                 <SearchFilters
@@ -182,20 +186,14 @@ export function BaseSearch({
 
                             <CommandList
                                 className={cn(
-                                    'max-h-[420px] overflow-y-auto overflow-x-hidden pb-2',
+                                    'max-h-[420px] overflow-y-auto overflow-x-hidden p-1.5 pt-0',
                                     '[&::-webkit-scrollbar]:w-2',
-                                    '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-heavy-metal-600 [&::-webkit-scrollbar-thumb]:hover:bg-heavy-metal-500',
-                                    '[&::-webkit-scrollbar-track]:rounded-md [&::-webkit-scrollbar-track]:bg-heavy-metal-800',
+                                    '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-outer-space-600 [&::-webkit-scrollbar-thumb]:hover:bg-outer-space-500',
+                                    '[&::-webkit-scrollbar-track]:rounded-md [&::-webkit-scrollbar-track]:bg-outer-space-900',
                                 )}
-                                onMouseDown={e => {
-                                    if (e.target === e.currentTarget) {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                    }
-                                }}
                             >
                                 {isLoading && (
-                                    <Command.Loading className="px-4 py-3 pb-1 text-sm text-heavy-metal-400">
+                                    <Command.Loading className="px-4 py-3 pb-1 text-sm text-outer-space-300">
                                         Searching...
                                     </Command.Loading>
                                 )}
@@ -209,9 +207,11 @@ export function BaseSearch({
                                                       <CommandItem
                                                           key={`${group.label}-${option.pathname}`}
                                                           className={cn(
-                                                              'cursor-pointer px-3 py-2',
+                                                              'cursor-pointer rounded-md px-3 py-2',
+                                                              'border border-solid border-transparent',
                                                               'transition-colors',
-                                                              'hover:bg-heavy-metal-700 aria-[selected=true]:bg-heavy-metal-600',
+                                                              'hover:bg-outer-space-800 aria-[selected=true]:bg-outer-space-800',
+                                                              'aria-[selected=true]:border-white/10',
                                                           )}
                                                           keywords={option.value}
                                                           value={option.pathname}
@@ -227,7 +227,7 @@ export function BaseSearch({
                                     : null}
 
                                 {!isLoading && (
-                                    <CommandEmpty className="w-full px-4 py-3 pb-1 text-sm text-heavy-metal-400">
+                                    <CommandEmpty className="w-full px-4 py-3 pb-1 text-sm text-outer-space-300">
                                         No results found
                                     </CommandEmpty>
                                 )}
diff --git a/app/features/search/ui/SearchFilters.tsx b/app/features/search/ui/SearchFilters.tsx
index 81725b812..6eb703079 100644
--- a/app/features/search/ui/SearchFilters.tsx
+++ b/app/features/search/ui/SearchFilters.tsx
@@ -11,7 +11,13 @@ type SearchFilterProps = {
 
 export function SearchFilters({ tabs, activeFilter, counts, onFilterChange }: SearchFilterProps) {
     return (
-        <div className={cn('flex gap-1.5 overflow-x-auto px-3 pb-2 pt-2.5', '[&::-webkit-scrollbar]:hidden')}>
+        <div
+            className={cn(
+                'flex gap-1.5 overflow-x-auto px-3 py-2.5',
+                'border-0 border-b border-solid border-outer-space-800',
+                '[&::-webkit-scrollbar]:hidden',
+            )}
+        >
             {tabs.map(tab => (
                 <button
                     key={tab.id}
@@ -19,15 +25,15 @@ export function SearchFilters({ tabs, activeFilter, counts, onFilterChange }: Se
                         'flex shrink-0 cursor-pointer items-center gap-1 px-2.5 py-0.5',
                         'rounded-md border border-solid text-xs font-medium transition-colors',
                         activeFilter === tab.id
-                            ? 'border-accent-600 bg-accent-600 text-heavy-metal-950'
-                            : 'border-heavy-metal-600 bg-transparent text-heavy-metal-200 hover:border-heavy-metal-400 hover:text-white',
+                            ? 'border-accent-600 bg-accent-600 text-outer-space-950'
+                            : 'border-outer-space-600 bg-transparent text-outer-space-200 hover:border-outer-space-400 hover:text-white',
                     )}
                     type="button"
                     onClick={() => onFilterChange(tab.id)}
                     onMouseDown={e => e.preventDefault()}
                 >
                     {tab.label}
-                    <span className={activeFilter === tab.id ? 'text-heavy-metal-900' : 'text-heavy-metal-400'}>
+                    <span className={activeFilter === tab.id ? 'text-outer-space-900' : 'text-outer-space-400'}>
                         ({counts[tab.id]})
                     </span>
                 </button>
diff --git a/app/features/search/ui/SearchGroupHeading.tsx b/app/features/search/ui/SearchGroupHeading.tsx
index bb6d3dde0..6684bb79b 100644
--- a/app/features/search/ui/SearchGroupHeading.tsx
+++ b/app/features/search/ui/SearchGroupHeading.tsx
@@ -1,9 +1,7 @@
 export function SearchGroupHeading({ label }: { label: string }) {
     return (
-        <div className="px-3 pb-1 pt-3">
-            <span className="shrink-0 select-none text-xs font-semibold uppercase tracking-widest text-heavy-metal-400">
-                {label}
-            </span>
+        <div className="px-3 pb-2 pt-6">
+            <span className="shrink-0 select-none text-xs font-normal uppercase text-outer-space-300">{label}</span>
         </div>
     );
 }
diff --git a/app/features/search/ui/SearchResultItem.tsx b/app/features/search/ui/SearchResultItem.tsx
index 5d427d9ac..f90e7b01b 100644
--- a/app/features/search/ui/SearchResultItem.tsx
+++ b/app/features/search/ui/SearchResultItem.tsx
@@ -16,7 +16,7 @@ function EntityIcon({ icon, label }: { icon?: string; label: string }) {
             // eslint-disable-next-line @next/next/no-img-element
             <img
                 alt={`entity-icon-${label}`}
-                className="h-9 w-9 shrink-0 rounded-lg object-cover"
+                className="h-9 w-9 shrink-0 rounded-lg border border-solid border-white/10 object-cover"
                 src={icon}
                 onError={() => setError(true)}
             />
@@ -27,7 +27,7 @@ function EntityIcon({ icon, label }: { icon?: string; label: string }) {
         <div
             className={cn(
                 'flex h-9 w-9 shrink-0 select-none items-center justify-center rounded-lg',
-                'bg-heavy-metal-600 text-sm font-bold text-heavy-metal-200',
+                'border border-solid border-white/10 bg-outer-space-600 text-sm font-bold text-outer-space-200',
             )}
         >
             {label.charAt(0).toUpperCase()}
@@ -37,7 +37,7 @@ function EntityIcon({ icon, label }: { icon?: string; label: string }) {
 
 export function SearchResultItem({ option }: { option: SearchItem }) {
     return (
-        <div className="flex items-center gap-3">
+        <div className="flex items-start gap-3">
             <EntityIcon icon={option.icon} label={option.label} />
             <div className="min-w-0 flex-1">
                 <div className="flex items-center justify-between gap-2">
@@ -45,10 +45,10 @@ export function SearchResultItem({ option }: { option: SearchItem }) {
                     {option.verified && <VerifiedBadge />}
                 </div>
                 {option.sublabel && (
-                    <span className="block truncate font-mono text-xs text-heavy-metal-300">{option.sublabel}</span>
+                    <span className="block truncate font-mono text-xs text-outer-space-300">{option.sublabel}</span>
                 )}
                 {option.verified && option.pathname.includes('/verified-build') && (
-                    <span className="block text-xs text-heavy-metal-400">
+                    <span className="block text-xs text-outer-space-400">
                         Source verified — Make sure you trust the source code
                     </span>
                 )}
diff --git a/app/layout.tsx b/app/layout.tsx
index 6a45bac53..bd69c4ceb 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,7 +4,7 @@ import { Footer } from '@components/Footer';
 import { MessageBanner } from '@components/MessageBanner';
 import { Navbar } from '@components/Navbar';
 import { Toaster } from '@components/shared/ui/sonner/toaster';
-import { ClusterModal, ClusterStatusButton, PendingCustomUrlConsent } from '@features/cluster-switcher';
+import { ClusterModal, PendingCustomUrlConsent } from '@features/cluster-switcher';
 import { ClusterProvider } from '@providers/cluster';
 import { ScrollAnchorProvider } from '@providers/scroll-anchor';
 import { EXPLORER_BASE_URL, isEnvEnabled } from '@utils/env';
@@ -18,7 +18,6 @@ import { TokenInfoBatchProvider } from '@/app/entities/token-info';
 import { CookieConsent } from '@/app/features/cookie';
 import { FeedbackWidget } from '@/app/features/feedback';
 import { VisibilityProvider } from '@/app/shared/lib/visibility';
-import { PageContainer } from '@/app/shared/ui/page-container/PageContainer';
 import { rubikFont } from '@/app/styles';
 import { botIdProtectedRoutes } from '@/config/botid-middleware.mjs';
 
@@ -56,18 +55,12 @@ export default function RootLayout({ analytics, children }: { analytics: React.R
                                 <TokenInfoBatchProvider>
                                     <ClusterModal />
                                     <PendingCustomUrlConsent />
-                                    <div className="flex min-h-screen flex-col overflow-x-clip">
+                                    <div className="flex min-h-screen flex-col">
                                         <div className="min-w-[292px] flex-1 pb-6">
                                             <Navbar>
                                                 <SearchBar />
                                             </Navbar>
                                             <MessageBanner />
-                                            <PageContainer className="my-3 xl:hidden">
-                                                <SearchBar />
-                                            </PageContainer>
-                                            <PageContainer className="my-3 lg:hidden">
-                                                <ClusterStatusButton />
-                                            </PageContainer>
                                             {children}
                                         </div>
                                         <Footer />
diff --git a/app/shared/lib/scrollToTop.ts b/app/shared/lib/scrollToTop.ts
new file mode 100644
index 000000000..dc017d1fd
--- /dev/null
+++ b/app/shared/lib/scrollToTop.ts
@@ -0,0 +1,4 @@
+export function scrollToTop() {
+    if (typeof window === 'undefined') return;
+    window.scrollTo({ top: 0 });
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 145a82521..9ecb71a0f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -134,6 +134,7 @@ const config: Config = {
                     600: 'oklch(46.048% 0.0207 163.91)',
                     700: 'oklch(38.258% 0.0166 166.31)',
                     800: 'oklch(30.098% 0.01205 160.58)',
+                    850: 'oklch(25.7% 0.0096 162)', // navbar background — midpoint between 800 and 900
                     900: 'oklch(21.275% 0.00721 164.22)',
                     950: 'oklch(14.676% 0.004 164.84)',
                 },
@@ -231,7 +232,9 @@ const config: Config = {
             'max-sm': { max: getScreenDim('sm', 0) },
             'max-md': { max: getScreenDim('md', 0) },
             xxs: getScreenDim('xxs'),
-            xs: getScreenDim('xs'),
+            // Flat (no +1): the navbar's rest insets below sm are arithmetic for a 375px row, and a pixel
+            // up would drop an iPhone at 375 to the 320 numbers. Also keeps CSS in step with useBreakpoint.
+            xs: getScreenDim('xs', 0),
             sm: getScreenDim('sm'),
             md: getScreenDim('md'),
             lg: getScreenDim('lg'),

From 1f08e00e927155213077da2ae95e1c1c4510b7b4 Mon Sep 17 00:00:00 2001
From: Tania Markina <tania.markina@hoodies.team>
Date: Mon, 5 Oct 2026 12:16:35 +0200
Subject: [PATCH 2/9] address review findings in navbar redesign

---
 app/components/navbar/NavSearch.tsx           | 10 ++-
 app/components/shared/focus-rule.ts           | 10 +--
 .../lib/__tests__/endpoint-name.spec.ts       | 28 +++++++++
 .../lib/__tests__/endpoint-provenance.spec.ts | 51 +++++++++++++++
 .../cluster-switcher/lib/cluster-storage.ts   |  7 ---
 .../cluster-switcher/lib/endpoint-name.ts     |  5 ++
 .../lib/endpoint-provenance.ts                |  4 +-
 .../__tests__/use-custom-url-draft.spec.tsx   |  3 +
 .../model/use-saved-clusters.ts               |  2 -
 .../cluster-switcher/ui/ClusterDropdown.tsx   | 31 ++++------
 .../cluster-switcher/ui/ClusterMenu.tsx       | 10 ++-
 .../cluster-switcher/ui/SavedClusterList.tsx  | 23 +++----
 .../cluster-switcher/ui/SavedEndpointRow.tsx  | 48 +++++++-------
 .../ui/__tests__/ClusterModal.spec.tsx        | 28 +++++----
 .../ui/__tests__/SavedEndpointRow.spec.tsx    | 62 +++++++++++++++++++
 .../cluster-switcher/ui/provenance-mark.tsx   | 57 ++++++++++++-----
 16 files changed, 275 insertions(+), 104 deletions(-)
 create mode 100644 app/features/cluster-switcher/lib/__tests__/endpoint-name.spec.ts
 create mode 100644 app/features/cluster-switcher/lib/__tests__/endpoint-provenance.spec.ts
 create mode 100644 app/features/cluster-switcher/lib/endpoint-name.ts
 create mode 100644 app/features/cluster-switcher/ui/__tests__/SavedEndpointRow.spec.tsx

diff --git a/app/components/navbar/NavSearch.tsx b/app/components/navbar/NavSearch.tsx
index 250c54b86..487f70664 100644
--- a/app/components/navbar/NavSearch.tsx
+++ b/app/components/navbar/NavSearch.tsx
@@ -1,13 +1,12 @@
 'use client';
 
+import { CONTROL_GROUND, FOCUS_RULE_GRADIENT } from '@components/shared/focus-rule';
 import { cn } from '@components/shared/utils';
 import { useHotkeys } from '@mantine/hooks';
 import React, { type ReactNode, type RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { Search, X } from 'react-feather';
 
-const GROUND = 'oklch(30.098% 0.01205 160.58)';
-
 const BELOW_DOCK =
     '[@media(max-width:575px)]:[&_kbd]:hidden [@media(max-width:575px)]:[&_[data-search-frame]]:!pr-[38px] [@media(max-width:575px)]:[&_[data-search-frame]>button]:!hidden';
 
@@ -63,10 +62,9 @@ export function NavSearch({ children, dockClassName, onOpenChange, open, restCla
         open || ringVisible
             ? {
                   backgroundClip: 'padding-box, border-box',
-                  backgroundImage: [
-                      `linear-gradient(${GROUND}, ${GROUND})`,
-                      'radial-gradient(118% 130% at 0% 100%, rgba(29,215,155,0.53) 0%, rgba(29,215,155,0.46) 35%, rgba(29,215,155,0.4) 65%, rgba(29,215,155,0.34) 90%, rgba(29,215,155,0.31) 100%)',
-                  ].join(', '),
+                  backgroundImage: [`linear-gradient(${CONTROL_GROUND}, ${CONTROL_GROUND})`, FOCUS_RULE_GRADIENT].join(
+                      ', ',
+                  ),
                   backgroundOrigin: 'border-box',
                   backgroundPosition: '0 0, left bottom',
                   backgroundRepeat: 'no-repeat',
diff --git a/app/components/shared/focus-rule.ts b/app/components/shared/focus-rule.ts
index 554ded0c1..8f095e935 100644
--- a/app/components/shared/focus-rule.ts
+++ b/app/components/shared/focus-rule.ts
@@ -1,15 +1,15 @@
 import type { CSSProperties } from 'react';
 
 // bg-heavy-metal-800, spelled out so the focus rule can paint a control's fill back over its padding box.
-const CONTROL_GROUND = 'oklch(30.098% 0.01205 160.58)';
+export const CONTROL_GROUND = 'oklch(30.098% 0.01205 160.58)';
+
+export const FOCUS_RULE_GRADIENT =
+    'radial-gradient(118% 130% at 0% 100%, rgba(29,215,155,0.53) 0%, rgba(29,215,155,0.46) 35%, rgba(29,215,155,0.4) 65%, rgba(29,215,155,0.34) 90%, rgba(29,215,155,0.31) 100%)';
 
 export function focusRuleStyle(lit: boolean): CSSProperties {
     return {
         backgroundClip: 'padding-box, border-box',
-        backgroundImage: [
-            `linear-gradient(${CONTROL_GROUND}, ${CONTROL_GROUND})`,
-            'radial-gradient(118% 130% at 0% 100%, rgba(29,215,155,0.53) 0%, rgba(29,215,155,0.46) 35%, rgba(29,215,155,0.4) 65%, rgba(29,215,155,0.34) 90%, rgba(29,215,155,0.31) 100%)',
-        ].join(', '),
+        backgroundImage: [`linear-gradient(${CONTROL_GROUND}, ${CONTROL_GROUND})`, FOCUS_RULE_GRADIENT].join(', '),
         backgroundOrigin: 'border-box',
         backgroundPosition: '0 0, left bottom',
         backgroundRepeat: 'no-repeat',
diff --git a/app/features/cluster-switcher/lib/__tests__/endpoint-name.spec.ts b/app/features/cluster-switcher/lib/__tests__/endpoint-name.spec.ts
new file mode 100644
index 000000000..ba5277133
--- /dev/null
+++ b/app/features/cluster-switcher/lib/__tests__/endpoint-name.spec.ts
@@ -0,0 +1,28 @@
+import { parseRpcEndpoint } from '@entities/cluster';
+import { describe, expect, it } from 'vitest';
+
+import { endpointName } from '../endpoint-name';
+
+function endpoint(url: string) {
+    const parsed = parseRpcEndpoint(url);
+    if (!parsed) throw new Error(`test fixture is not an RPC endpoint: ${url}`);
+    return parsed;
+}
+
+describe('endpointName', () => {
+    // The navbar label is always visible, often on a shared screen, so a key in the path or query must
+    // never reach it.
+    it('should trim a remote URL to scheme and host, dropping an embedded key', () => {
+        expect(endpointName(endpoint('https://rpc.example.com/path?api-key=secret'))).toBe('https://rpc.example.com');
+    });
+
+    it('should keep the port of a remote host', () => {
+        expect(endpointName(endpoint('https://rpc.example.com:8899'))).toBe('https://rpc.example.com:8899');
+    });
+
+    // A local endpoint reaches nothing its sender can read back, and its full href helps the operator tell
+    // two local nodes apart.
+    it('should show the full href for a local endpoint', () => {
+        expect(endpointName(endpoint('http://localhost:8899/path'))).toBe('http://localhost:8899/path');
+    });
+});
diff --git a/app/features/cluster-switcher/lib/__tests__/endpoint-provenance.spec.ts b/app/features/cluster-switcher/lib/__tests__/endpoint-provenance.spec.ts
new file mode 100644
index 000000000..75b4bb204
--- /dev/null
+++ b/app/features/cluster-switcher/lib/__tests__/endpoint-provenance.spec.ts
@@ -0,0 +1,51 @@
+import { clusterSelection } from '@entities/cluster';
+import { Cluster, clusterUrl } from '@utils/cluster';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { endpointProvenance, isKnownEndpoint } from '../endpoint-provenance';
+
+describe('endpointProvenance', () => {
+    afterEach(() => {
+        vi.unstubAllEnvs();
+    });
+
+    // Absence is not trust: nothing to classify must never render as "known".
+    it('should return undefined when there is no url', () => {
+        expect(endpointProvenance(undefined)).toBeUndefined();
+    });
+
+    it.each([['not-a-url'], ['localhost:8899'], ['javascript:alert(1)'], ['']])(
+        'should treat the unparseable value %j as unknown',
+        value => {
+            expect(endpointProvenance(value)).toBe('unknown');
+        },
+    );
+
+    it.each([['http://localhost:8899'], ['http://127.0.0.1:8899']])('should treat %j as local', url => {
+        expect(endpointProvenance(url)).toBe('local');
+    });
+
+    it('should treat a whitelisted host as known', () => {
+        vi.stubEnv('NEXT_PUBLIC_WHITELISTED_RPCS', 'my-rpc.example.com');
+        expect(endpointProvenance('https://my-rpc.example.com')).toBe('known');
+    });
+
+    it('should treat an endpoint the deployment ships with as known', () => {
+        const shipped = clusterUrl(clusterSelection(Cluster.MainnetBeta));
+        expect(endpointProvenance(shipped)).toBe('known');
+    });
+
+    it('should treat an arbitrary remote endpoint as unknown', () => {
+        expect(endpointProvenance('https://nobody-vouches.example.org')).toBe('unknown');
+    });
+});
+
+describe('isKnownEndpoint', () => {
+    it('should be true for an endpoint the deployment ships with', () => {
+        expect(isKnownEndpoint(clusterUrl(clusterSelection(Cluster.MainnetBeta)))).toBe(true);
+    });
+
+    it('should be false for an arbitrary remote endpoint', () => {
+        expect(isKnownEndpoint('https://nobody-vouches.example.org')).toBe(false);
+    });
+});
diff --git a/app/features/cluster-switcher/lib/cluster-storage.ts b/app/features/cluster-switcher/lib/cluster-storage.ts
index 318618f79..2ade34add 100644
--- a/app/features/cluster-switcher/lib/cluster-storage.ts
+++ b/app/features/cluster-switcher/lib/cluster-storage.ts
@@ -69,13 +69,6 @@ export const updateSavedClusterAtom = atom(
     },
 );
 
-export const restoreSavedClusterAtom = atom(undefined, (get, set, entry: { at: number } & SavedCluster) => {
-    const clusters = get(savedClustersAtom);
-    if (clusters.some(c => c.url === entry.url)) return;
-    const at = Math.min(Math.max(entry.at, 0), clusters.length);
-    set(savedClustersAtom, [...clusters.slice(0, at), { name: entry.name, url: entry.url }, ...clusters.slice(at)]);
-});
-
 function excludeByUrl(clusters: SavedCluster[], url: string): SavedCluster[] {
     return clusters.filter(c => c.url !== url);
 }
diff --git a/app/features/cluster-switcher/lib/endpoint-name.ts b/app/features/cluster-switcher/lib/endpoint-name.ts
new file mode 100644
index 000000000..cf9680a77
--- /dev/null
+++ b/app/features/cluster-switcher/lib/endpoint-name.ts
@@ -0,0 +1,5 @@
+import type { RpcEndpoint } from '@entities/cluster';
+
+export function endpointName(endpoint: RpcEndpoint): string {
+    return endpoint.isLocal ? endpoint.href : `${endpoint.protocol}//${endpoint.host}`;
+}
diff --git a/app/features/cluster-switcher/lib/endpoint-provenance.ts b/app/features/cluster-switcher/lib/endpoint-provenance.ts
index bd16bd6a2..0be996a5e 100644
--- a/app/features/cluster-switcher/lib/endpoint-provenance.ts
+++ b/app/features/cluster-switcher/lib/endpoint-provenance.ts
@@ -3,8 +3,8 @@ import { Cluster, CLUSTERS, clusterUrl } from '@utils/cluster';
 
 export type EndpointProvenance = 'known' | 'local' | 'unknown';
 
-export function endpointProvenance(url: string | undefined): EndpointProvenance {
-    if (url === undefined) return 'known';
+export function endpointProvenance(url: string | undefined): EndpointProvenance | undefined {
+    if (url === undefined) return undefined;
     const endpoint = parseRpcEndpoint(url);
     if (endpoint === undefined) return 'unknown';
     if (endpoint.isLocal) return 'local';
diff --git a/app/features/cluster-switcher/model/__tests__/use-custom-url-draft.spec.tsx b/app/features/cluster-switcher/model/__tests__/use-custom-url-draft.spec.tsx
index 6716ce0bb..fd84793da 100644
--- a/app/features/cluster-switcher/model/__tests__/use-custom-url-draft.spec.tsx
+++ b/app/features/cluster-switcher/model/__tests__/use-custom-url-draft.spec.tsx
@@ -77,6 +77,9 @@ describe('useCustomUrlDraft', () => {
     beforeEach(() => {
         vi.useFakeTimers();
         vi.clearAllMocks();
+        // jsdom has no scroll; stub it so `select` (which scrolls to top) is safe for every test, not just
+        // the two that assert on it.
+        vi.spyOn(window, 'scrollTo').mockImplementation(() => undefined);
         clusterMock.customUrl = CUSTOM_URL;
         nav.searchParams = new URLSearchParams(`cluster=custom&customUrl=${CUSTOM_URL}&sort=fee`);
     });
diff --git a/app/features/cluster-switcher/model/use-saved-clusters.ts b/app/features/cluster-switcher/model/use-saved-clusters.ts
index 19773ab23..b9ffac0e1 100644
--- a/app/features/cluster-switcher/model/use-saved-clusters.ts
+++ b/app/features/cluster-switcher/model/use-saved-clusters.ts
@@ -5,7 +5,6 @@ import { useAtomValue, useSetAtom } from 'jotai';
 import {
     addSavedClusterAtom,
     removeSavedClusterAtom,
-    restoreSavedClusterAtom,
     type SavedCluster,
     savedClustersAtom,
     updateSavedClusterAtom,
@@ -17,7 +16,6 @@ export function useSavedClusters() {
     return {
         addSavedCluster: useSetAtom(addSavedClusterAtom),
         removeSavedCluster: useSetAtom(removeSavedClusterAtom),
-        restoreSavedCluster: useSetAtom(restoreSavedClusterAtom),
         savedClusters: useAtomValue(savedClustersAtom),
         updateSavedCluster: useSetAtom(updateSavedClusterAtom),
     };
diff --git a/app/features/cluster-switcher/ui/ClusterDropdown.tsx b/app/features/cluster-switcher/ui/ClusterDropdown.tsx
index 291915656..f6044e454 100644
--- a/app/features/cluster-switcher/ui/ClusterDropdown.tsx
+++ b/app/features/cluster-switcher/ui/ClusterDropdown.tsx
@@ -3,15 +3,15 @@
 import { FOCUS_RULE_CLASSES, focusRuleStyle, isKeyboardFocus } from '@components/shared/focus-rule';
 import { Popover, PopoverContent, PopoverTrigger } from '@components/shared/ui/popover';
 import { cn } from '@components/shared/utils';
-import { type RpcEndpoint, useCluster } from '@entities/cluster';
-import { Cluster, clusterSlug, ClusterStatus } from '@utils/cluster';
-import { useSearchParams } from 'next/navigation';
+import { useCluster } from '@entities/cluster';
+import { ClusterStatus } from '@utils/cluster';
 import React from 'react';
-import { AlertTriangle, CheckCircle, ChevronDown } from 'react-feather';
+import { ChevronDown } from 'react-feather';
 
+import { endpointName } from '../lib/endpoint-name';
 import { endpointProvenance } from '../lib/endpoint-provenance';
 import { ClusterMenu } from './ClusterMenu';
-import { KNOWN_COLOUR, UNKNOWN_COLOUR } from './provenance-mark';
+import { KNOWN_COLOUR, PROVENANCE_MARK, UNKNOWN_COLOUR } from './provenance-mark';
 
 const STATUS_STYLE: Record<ClusterStatus, { colour: string; label: string }> = {
     [ClusterStatus.Connected]: { colour: KNOWN_COLOUR, label: 'Connected' },
@@ -21,10 +21,6 @@ const STATUS_STYLE: Record<ClusterStatus, { colour: string; label: string }> = {
 
 const CONNECTED_GREY = 'oklch(70.297% 0.0218 185.24)';
 
-function endpointName(endpoint: RpcEndpoint): string {
-    return endpoint.isLocal ? endpoint.href : `${endpoint.protocol}//${endpoint.host}`;
-}
-
 export interface ClusterDropdownProps {
     align?: 'end' | 'start';
     className?: string;
@@ -33,18 +29,15 @@ export interface ClusterDropdownProps {
 }
 
 export function ClusterDropdown({ align = 'end', className, onOpenChange, open }: ClusterDropdownProps) {
-    const { status, name, cluster, endpoint } = useCluster();
-    const searchParams = useSearchParams();
+    const { status, name, endpoint } = useCluster();
     const [focused, setFocused] = React.useState(false);
 
     const label = endpoint ? endpointName(endpoint) : name;
     const { label: statusLabel } = STATUS_STYLE[status];
 
-    const headedForCustom = cluster === Cluster.Custom || searchParams?.get('cluster') === clusterSlug(Cluster.Custom);
-    const provenance = headedForCustom && endpoint === undefined ? undefined : endpointProvenance(endpoint?.href);
-    const showLead = provenance === 'known' || provenance === 'unknown';
-    const leadColour = provenance === 'unknown' ? UNKNOWN_COLOUR : KNOWN_COLOUR;
-    const LeadGlyph = provenance === 'unknown' ? AlertTriangle : CheckCircle;
+    const provenance = endpointProvenance(endpoint?.href);
+    const lead = provenance ? PROVENANCE_MARK[provenance] : undefined;
+    const LeadGlyph = lead?.glyph;
     const factsColour = status === ClusterStatus.Connected ? CONNECTED_GREY : STATUS_STYLE[status].colour;
 
     return (
@@ -65,12 +58,12 @@ export function ClusterDropdown({ align = 'end', className, onOpenChange, open }
                 >
                     <span className="flex min-w-0 flex-1 translate-y-px flex-col items-stretch justify-center gap-0.5">
                         <span className="flex min-w-0 items-center gap-0.5 text-sm leading-[14px] text-white">
-                            {showLead && (
-                                <span className="flex shrink-0 items-center" style={{ color: leadColour }}>
+                            {lead && LeadGlyph && (
+                                <span className="flex shrink-0 items-center" style={{ color: lead.colour }}>
                                     <LeadGlyph size={12} />
                                 </span>
                             )}
-                            <span className="min-w-0 truncate" style={showLead ? { color: leadColour } : undefined}>
+                            <span className="min-w-0 truncate" style={lead ? { color: lead.colour } : undefined}>
                                 {label}
                             </span>
                         </span>
diff --git a/app/features/cluster-switcher/ui/ClusterMenu.tsx b/app/features/cluster-switcher/ui/ClusterMenu.tsx
index e09930a54..d3f65c5a5 100644
--- a/app/features/cluster-switcher/ui/ClusterMenu.tsx
+++ b/app/features/cluster-switcher/ui/ClusterMenu.tsx
@@ -56,6 +56,7 @@ export function ClusterMenu({ onDismiss }: { onDismiss: () => void }) {
     const onCustom = cluster === Cluster.Custom;
     const customIsLive = onCustom && !listed.some(saved => saved.url === endpoint?.href);
     const draftEndpoint = parseRpcEndpoint(draft.value);
+    const alreadySaved = savedClusters.find(saved => saved.url === draft.value);
 
     const savedRef = useRef<HTMLUListElement>(null);
     const [showSavedFade, setShowSavedFade] = useState(false);
@@ -213,12 +214,17 @@ export function ClusterMenu({ onDismiss }: { onDismiss: () => void }) {
                             variant="outline"
                             size="sm"
                             className={cn('self-start', MENU_SECONDARY_BUTTON)}
-                            disabled={!draftEndpoint}
+                            disabled={!draftEndpoint || alreadySaved !== undefined}
+                            title={
+                                alreadySaved
+                                    ? `Already saved as ${alreadySaved.name || draftEndpoint?.host}`
+                                    : undefined
+                            }
                             onClick={() => setSaving(true)}
                             data-testid="open-save-cluster-btn"
                         >
                             <Plus size={14} aria-hidden />
-                            Save…
+                            {alreadySaved ? 'Saved' : 'Save…'}
                         </Button>
                     </>
                 )}
diff --git a/app/features/cluster-switcher/ui/SavedClusterList.tsx b/app/features/cluster-switcher/ui/SavedClusterList.tsx
index 4f6745a6a..da5b379ea 100644
--- a/app/features/cluster-switcher/ui/SavedClusterList.tsx
+++ b/app/features/cluster-switcher/ui/SavedClusterList.tsx
@@ -3,13 +3,13 @@
 import { Button } from '@components/shared/ui/button';
 import { cn } from '@components/shared/utils';
 import { approveRpcOriginAtom, parseRpcEndpoint, useCluster } from '@entities/cluster';
+import { type SavedCluster, useSavedClusters } from '@features/cluster-switcher/client';
 import { Cluster, ClusterStatus, DEFAULT_CLUSTER } from '@utils/cluster';
 import { useSetAtom } from 'jotai';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { Trash2 } from 'react-feather';
 
-import { removeSavedClusterAtom, type SavedCluster } from '../lib/cluster-storage';
 import { useClusterHref } from '../model/use-cluster-href';
 import { clusterButtonVariants } from './cluster-button-variants';
 
@@ -17,7 +17,7 @@ type SavedClusterListProps = { savedClusters: SavedCluster[]; status: ClusterSta
 
 export function SavedClusterList({ savedClusters, status }: SavedClusterListProps) {
     const { endpoint, cluster } = useCluster();
-    const removeSavedCluster = useSetAtom(removeSavedClusterAtom);
+    const { removeSavedCluster } = useSavedClusters();
     const buildHref = useClusterHref();
     const router = useRouter();
 
@@ -38,7 +38,7 @@ export function SavedClusterList({ savedClusters, status }: SavedClusterListProp
             <h3 className="mb-3 text-center">Saved Clusters</h3>
             {savedClusters.map(saved => (
                 <SavedClusterItem
-                    key={saved.name}
+                    key={saved.url}
                     saved={saved}
                     status={status}
                     isActive={cluster === Cluster.Custom && endpoint?.href === saved.url}
@@ -61,25 +61,26 @@ function SavedClusterItem({ saved, status, isActive, onDelete }: SavedClusterIte
     const approveOrigin = useSetAtom(approveRpcOriginAtom);
 
     const savedEndpoint = parseRpcEndpoint(saved.url);
+    const heading = saved.name || savedEndpoint?.host || saved.url;
 
     const onSelect = () => {
         if (savedEndpoint !== undefined) approveOrigin(savedEndpoint);
     };
 
     return (
-        <div className="relative mb-3 w-full" data-testid={`saved-cluster-${saved.name}`}>
+        <div className="relative mb-3 w-full" data-testid={`saved-cluster-${saved.url}`}>
             <Link
                 className={cn(clusterButtonVariants({ active: isActive, status }), 'pl-10 pr-10 text-center')}
                 href={buildHref({ cluster: Cluster.Custom, customUrl: saved.url })}
                 onClick={onSelect}
-                title={`${saved.name} — ${saved.url}`}
-                data-testid={`saved-cluster-link-${saved.name}`}
+                title={saved.name ? `${saved.name} — ${saved.url}` : saved.url}
+                data-testid={`saved-cluster-link-${saved.url}`}
             >
-                <span className="block truncate">{saved.name}</span>
-                {savedEndpoint && savedEndpoint.host !== saved.name && (
+                <span className="block truncate">{heading}</span>
+                {savedEndpoint && savedEndpoint.host !== heading && (
                     <span
                         className="block truncate text-xs text-dk-gray-700"
-                        data-testid={`saved-cluster-host-${saved.name}`}
+                        data-testid={`saved-cluster-host-${saved.url}`}
                     >
                         {savedEndpoint.host}
                     </span>
@@ -94,8 +95,8 @@ function SavedClusterItem({ saved, status, isActive, onDelete }: SavedClusterIte
                     e.stopPropagation();
                     onDelete(saved.url);
                 }}
-                data-testid={`delete-cluster-${saved.name}`}
-                aria-label={`Delete ${saved.name}`}
+                data-testid={`delete-cluster-${saved.url}`}
+                aria-label={`Delete ${heading}`}
             >
                 <Trash2 size={14} />
             </Button>
diff --git a/app/features/cluster-switcher/ui/SavedEndpointRow.tsx b/app/features/cluster-switcher/ui/SavedEndpointRow.tsx
index ca6f01c82..3e87fc156 100644
--- a/app/features/cluster-switcher/ui/SavedEndpointRow.tsx
+++ b/app/features/cluster-switcher/ui/SavedEndpointRow.tsx
@@ -5,13 +5,13 @@ import { IconButton } from '@components/shared/ui/icon-button';
 import { cn } from '@components/shared/utils';
 import { parseRpcEndpoint } from '@entities/cluster';
 import { type SavedCluster, useSavedClusters } from '@features/cluster-switcher/client';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Edit2, Trash2 } from 'react-feather';
 
 import { endpointProvenance } from '../lib/endpoint-provenance';
 import { MENU_SECONDARY_BUTTON, rowClasses } from './cluster-row-classes';
 import { EndpointForm } from './EndpointForm';
-import { KnownMark, UnknownMark } from './provenance-mark';
+import { ProvenanceMark } from './provenance-mark';
 
 const HOVER_FROM_GROUP =
     '[@media(hover:hover)]:group-hover/row:border-white/10 [@media(hover:hover)]:group-hover/row:bg-outer-space-800';
@@ -33,15 +33,27 @@ export function SavedEndpointRow({
     onPick: () => void;
     pinned?: boolean;
 }) {
-    const { removeSavedCluster, restoreSavedCluster, savedClusters, updateSavedCluster } = useSavedClusters();
+    const { removeSavedCluster, updateSavedCluster } = useSavedClusters();
     const [editing, setEditing] = useState(false);
-    const [removed, setRemoved] = useState<number | undefined>(undefined);
+    const [pendingRemoval, setPendingRemoval] = useState(false);
+    const pendingRef = useRef(false);
 
     useEffect(() => {
-        if (removed === undefined) return;
-        const timer = setTimeout(() => setRemoved(undefined), UNDO_WINDOW_MS);
+        if (!pendingRemoval) return;
+        const timer = setTimeout(() => {
+            pendingRef.current = false;
+            removeSavedCluster(entry.url);
+            setPendingRemoval(false);
+        }, UNDO_WINDOW_MS);
         return () => clearTimeout(timer);
-    }, [removed]);
+    }, [pendingRemoval, entry.url, removeSavedCluster]);
+
+    useEffect(
+        () => () => {
+            if (pendingRef.current) removeSavedCluster(entry.url);
+        },
+        [entry.url, removeSavedCluster],
+    );
 
     const savedEndpoint = parseRpcEndpoint(entry.url);
     const heading = entry.name || savedEndpoint?.host || entry.url;
@@ -65,12 +77,7 @@ export function SavedEndpointRow({
 
     const rowClass = cn(rowClasses({ active, stacked: true }), 'pr-14', HOVER_FROM_GROUP);
 
-    const mark =
-        provenance === 'known' ? (
-            <KnownMark withLabel={active} />
-        ) : provenance === 'unknown' ? (
-            <UnknownMark withLabel={active} />
-        ) : undefined;
+    const mark = <ProvenanceMark provenance={provenance} withLabel={active} />;
 
     const contents = (
         <span className="flex min-w-0 flex-1 flex-col leading-tight">
@@ -79,12 +86,12 @@ export function SavedEndpointRow({
                     className={cn(
                         'truncate text-sm font-medium text-white',
                         entry.name === '' && 'font-mono',
-                        removed !== undefined && 'line-through opacity-60',
+                        pendingRemoval && 'line-through opacity-60',
                     )}
                 >
                     {heading}
                 </span>
-                {mark !== undefined && <span className="flex shrink-0 items-center">{mark}</span>}
+                {mark}
             </span>
             {savedEndpoint && entry.name !== '' && savedEndpoint.host !== entry.name && (
                 <span className="block truncate font-mono text-xs text-outer-space-300">{savedEndpoint.host}</span>
@@ -95,7 +102,7 @@ export function SavedEndpointRow({
         </span>
     );
 
-    if (removed !== undefined)
+    if (pendingRemoval)
         return (
             <li className="group/row relative" data-testid={`saved-cluster-${entry.url}`}>
                 <div className={cn(rowClass, 'cursor-default')} aria-disabled>
@@ -107,8 +114,8 @@ export function SavedEndpointRow({
                         size="sm"
                         className={MENU_SECONDARY_BUTTON}
                         onClick={() => {
-                            restoreSavedCluster({ ...entry, at: removed });
-                            setRemoved(undefined);
+                            pendingRef.current = false;
+                            setPendingRemoval(false);
                         }}
                         data-testid={`restore-cluster-${entry.url}`}
                     >
@@ -145,10 +152,9 @@ export function SavedEndpointRow({
                         title="Delete this endpoint"
                         danger
                         onClick={() => {
-                            const at = savedClusters.findIndex(c => c.url === entry.url);
-                            removeSavedCluster(entry.url);
+                            pendingRef.current = true;
+                            setPendingRemoval(true);
                             onDelete?.();
-                            setRemoved(at < 0 ? 0 : at);
                         }}
                         testId={`delete-cluster-${entry.url}`}
                     >
diff --git a/app/features/cluster-switcher/ui/__tests__/ClusterModal.spec.tsx b/app/features/cluster-switcher/ui/__tests__/ClusterModal.spec.tsx
index a1bd407f3..6b4617a79 100644
--- a/app/features/cluster-switcher/ui/__tests__/ClusterModal.spec.tsx
+++ b/app/features/cluster-switcher/ui/__tests__/ClusterModal.spec.tsx
@@ -198,23 +198,27 @@ describe('ClusterModal', () => {
             { name: 'My Local', url: 'http://localhost:8899' },
             { name: 'Staging', url: 'https://staging.example.com/rpc?api-key=secret' },
         ]);
-        expect(screen.getByTestId('saved-cluster-host-My Local')).toHaveTextContent('localhost:8899');
-        expect(screen.getByTestId('saved-cluster-host-Staging')).toHaveTextContent('staging.example.com');
+        expect(screen.getByTestId('saved-cluster-host-http://localhost:8899')).toHaveTextContent('localhost:8899');
+        expect(
+            screen.getByTestId('saved-cluster-host-https://staging.example.com/rpc?api-key=secret'),
+        ).toHaveTextContent('staging.example.com');
     });
 
     // The default name is the host, so the common entry is one line, not the same string twice.
     it('should drop the host line when the name is already the host', () => {
         renderWithStore([{ name: 'localhost:8899', url: 'http://localhost:8899' }]);
-        expect(screen.queryByTestId('saved-cluster-host-localhost:8899')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('saved-cluster-host-http://localhost:8899')).not.toBeInTheDocument();
         expect(screen.getByText('localhost:8899')).toBeInTheDocument();
     });
 
     // Providers put the API key in the path or the query, and this panel gets opened on a shared screen.
     it('should keep the path and query out of the visible host line', () => {
         renderWithStore([{ name: 'Staging', url: 'https://staging.example.com/rpc?api-key=secret' }]);
-        expect(screen.getByTestId('saved-cluster-host-Staging')).not.toHaveTextContent('api-key=secret');
+        expect(
+            screen.getByTestId('saved-cluster-host-https://staging.example.com/rpc?api-key=secret'),
+        ).not.toHaveTextContent('api-key=secret');
         // Still reachable on a deliberate hover.
-        expect(screen.getByTestId('saved-cluster-link-Staging')).toHaveAttribute(
+        expect(screen.getByTestId('saved-cluster-link-https://staging.example.com/rpc?api-key=secret')).toHaveAttribute(
             'title',
             'Staging — https://staging.example.com/rpc?api-key=secret',
         );
@@ -226,8 +230,8 @@ describe('ClusterModal', () => {
         const longName = 'dsfdfsdfsdfsdfdfsfsdfsdfsdfsdfsdfsdfsdfsdf';
         renderWithStore([{ name: longName, url: 'http://localhost:8899' }]);
         expect(screen.getByText(longName)).toHaveClass('truncate');
-        expect(screen.getByTestId(`saved-cluster-host-${longName}`)).toHaveClass('truncate');
-        expect(screen.getByTestId(`saved-cluster-link-${longName}`)).toHaveAttribute(
+        expect(screen.getByTestId('saved-cluster-host-http://localhost:8899')).toHaveClass('truncate');
+        expect(screen.getByTestId('saved-cluster-link-http://localhost:8899')).toHaveAttribute(
             'title',
             `${longName} — http://localhost:8899`,
         );
@@ -243,7 +247,7 @@ describe('ClusterModal', () => {
             { name: 'My Local', url: 'http://localhost:8899' },
             { name: 'Staging', url: 'http://staging.example.com' },
         ]);
-        fireEvent.click(screen.getByTestId('delete-cluster-My Local'));
+        fireEvent.click(screen.getByTestId('delete-cluster-http://localhost:8899'));
         expect(store.get(savedClustersAtom)).toEqual([{ name: 'Staging', url: 'http://staging.example.com' }]);
     });
 
@@ -262,7 +266,7 @@ describe('ClusterModal', () => {
     it('should show save button again after deleting the cluster with matching URL', () => {
         renderWithStore([{ name: 'My Node', url: CUSTOM_URL }]);
         expect(screen.queryByTestId('save-custom-cluster-btn')).not.toBeInTheDocument();
-        fireEvent.click(screen.getByTestId('delete-cluster-My Node'));
+        fireEvent.click(screen.getByTestId(`delete-cluster-${CUSTOM_URL}`));
         expect(screen.getByTestId('save-custom-cluster-btn')).toBeInTheDocument();
     });
 });
@@ -291,7 +295,7 @@ describe('ClusterModal cluster hrefs', () => {
 
     it('should point a saved cluster at its own endpoint', () => {
         renderWithStore([{ name: 'Staging', url: 'http://staging.example.com' }]);
-        expect(screen.getByTestId('saved-cluster-link-Staging')).toHaveAttribute(
+        expect(screen.getByTestId('saved-cluster-link-http://staging.example.com')).toHaveAttribute(
             'href',
             `/?cluster=custom&customUrl=${encodeURIComponent('http://staging.example.com')}&sort=fee`,
         );
@@ -329,7 +333,7 @@ describe('ClusterModal cluster hrefs', () => {
 
     it('should drop the endpoint when deleting the saved cluster the page is pointed at', () => {
         renderWithStore([{ name: 'My Local', url: CUSTOM_URL }]);
-        fireEvent.click(screen.getByTestId('delete-cluster-My Local'));
+        fireEvent.click(screen.getByTestId(`delete-cluster-${CUSTOM_URL}`));
         expect(nav.push).toHaveBeenCalledWith('/?sort=fee', { scroll: false });
     });
 });
@@ -398,7 +402,7 @@ describe('ClusterModal endpoint consent', () => {
 
         // A real anchor, so stop jsdom navigating. React's handler is delegated at the root and still
         // runs: `preventDefault` does not stop propagation.
-        const link = screen.getByTestId('saved-cluster-link-Staging');
+        const link = screen.getByTestId('saved-cluster-link-https://staging.example.com/rpc');
         link.addEventListener('click', event => event.preventDefault());
         fireEvent.click(link);
 
diff --git a/app/features/cluster-switcher/ui/__tests__/SavedEndpointRow.spec.tsx b/app/features/cluster-switcher/ui/__tests__/SavedEndpointRow.spec.tsx
new file mode 100644
index 000000000..a6578c65b
--- /dev/null
+++ b/app/features/cluster-switcher/ui/__tests__/SavedEndpointRow.spec.tsx
@@ -0,0 +1,62 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { createStore, Provider } from 'jotai';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { savedClustersAtom } from '../../lib/cluster-storage';
+import { SavedEndpointRow } from '../SavedEndpointRow';
+
+const ENTRY = { name: 'Staging', url: 'http://staging.example.com' };
+
+function renderRow() {
+    const store = createStore();
+    store.set(savedClustersAtom, [ENTRY]);
+    const utils = render(
+        <Provider store={store}>
+            <ul>
+                <SavedEndpointRow active={false} entry={ENTRY} onPick={vi.fn()} />
+            </ul>
+        </Provider>,
+    );
+    return { store, ...utils };
+}
+
+describe('SavedEndpointRow delete and undo', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+
+    it('should keep the entry in storage while the undo window is open', () => {
+        const { store } = renderRow();
+        fireEvent.click(screen.getByTestId(`delete-cluster-${ENTRY.url}`));
+        expect(screen.getByTestId(`restore-cluster-${ENTRY.url}`)).toBeInTheDocument();
+        expect(store.get(savedClustersAtom)).toEqual([ENTRY]);
+    });
+
+    it('should cancel the removal when Restore is clicked', () => {
+        const { store } = renderRow();
+        fireEvent.click(screen.getByTestId(`delete-cluster-${ENTRY.url}`));
+        fireEvent.click(screen.getByTestId(`restore-cluster-${ENTRY.url}`));
+        act(() => vi.advanceTimersByTime(10_000));
+        expect(store.get(savedClustersAtom)).toEqual([ENTRY]);
+        expect(screen.getByTestId(`pick-cluster-${ENTRY.url}`)).toBeInTheDocument();
+    });
+
+    it('should commit the removal once the undo window elapses', () => {
+        const { store } = renderRow();
+        fireEvent.click(screen.getByTestId(`delete-cluster-${ENTRY.url}`));
+        act(() => vi.advanceTimersByTime(10_000));
+        expect(store.get(savedClustersAtom)).toEqual([]);
+    });
+
+    // Closing the menu drops the row; a pending delete must still land rather than silently resurrect.
+    it('should commit a pending removal when the row unmounts', () => {
+        const { store, unmount } = renderRow();
+        fireEvent.click(screen.getByTestId(`delete-cluster-${ENTRY.url}`));
+        unmount();
+        expect(store.get(savedClustersAtom)).toEqual([]);
+    });
+});
diff --git a/app/features/cluster-switcher/ui/provenance-mark.tsx b/app/features/cluster-switcher/ui/provenance-mark.tsx
index c4bda5b10..dd1063d89 100644
--- a/app/features/cluster-switcher/ui/provenance-mark.tsx
+++ b/app/features/cluster-switcher/ui/provenance-mark.tsx
@@ -2,35 +2,58 @@
 
 import { AlertTriangle, CheckCircle } from 'react-feather';
 
+import type { EndpointProvenance } from '../lib/endpoint-provenance';
+
 export const KNOWN_COLOUR = '#1dd79b';
 export const UNKNOWN_COLOUR = '#e08214';
 
 const MARK_LABEL_CLASSES = 'text-[10px] font-medium uppercase tracking-[0.12em]';
 
-export function KnownMark({ size = 12, title, withLabel }: { size?: number; title?: string; withLabel?: boolean }) {
+type MarkStyle = { colour: string; glyph: typeof CheckCircle; label: string; title: string };
+
+export const PROVENANCE_MARK: Record<EndpointProvenance, MarkStyle | undefined> = {
+    known: {
+        colour: KNOWN_COLOUR,
+        glyph: CheckCircle,
+        label: 'known',
+        title: 'A known endpoint — one this deployment ships with or vouches for',
+    },
+    local: undefined,
+    unknown: {
+        colour: UNKNOWN_COLOUR,
+        glyph: AlertTriangle,
+        label: 'unknown',
+        title: 'Nobody has vouched for this endpoint',
+    },
+};
+
+export function ProvenanceMark({
+    provenance,
+    size = 12,
+    title,
+    withLabel,
+}: {
+    provenance: EndpointProvenance | undefined;
+    size?: number;
+    title?: string;
+    withLabel?: boolean;
+}) {
+    const mark = provenance ? PROVENANCE_MARK[provenance] : undefined;
+    if (mark === undefined) return undefined;
+    const Glyph = mark.glyph;
     return (
         <span
             aria-hidden
             className="flex shrink-0 items-center gap-1"
-            style={{ color: KNOWN_COLOUR }}
-            title={title ?? 'A known endpoint — one this deployment ships with or vouches for'}
+            style={{ color: mark.colour }}
+            title={title ?? mark.title}
         >
-            <CheckCircle size={size} />
-            {withLabel && <span className={MARK_LABEL_CLASSES}>known</span>}
+            <Glyph size={size} />
+            {withLabel && <span className={MARK_LABEL_CLASSES}>{mark.label}</span>}
         </span>
     );
 }
 
-export function UnknownMark({ size = 12, title, withLabel }: { size?: number; title?: string; withLabel?: boolean }) {
-    return (
-        <span
-            aria-hidden
-            className="flex shrink-0 items-center gap-1"
-            style={{ color: UNKNOWN_COLOUR }}
-            title={title ?? 'Nobody has vouched for this endpoint'}
-        >
-            <AlertTriangle size={size} />
-            {withLabel && <span className={MARK_LABEL_CLASSES}>unknown</span>}
-        </span>
-    );
+export function KnownMark({ size, title, withLabel }: { size?: number; title?: string; withLabel?: boolean }) {
+    return <ProvenanceMark provenance="known" size={size} title={title} withLabel={withLabel} />;
 }

From cec82652c45432cd775490ed066e3f5b1b0a40ed Mon Sep 17 00:00:00 2001
From: Tania Markina <tania.markina@hoodies.team>
Date: Mon, 5 Oct 2026 16:30:27 +0200
Subject: [PATCH 3/9] fixed sb

---
 .../__stories__/SavedClusterList.stories.tsx  | 13 +--
 .../ui/__tests__/ClusterDropdown.spec.tsx     | 68 ++++++++++++++++
 .../ui/__tests__/ClusterMenu.spec.tsx         | 80 +++++++++++++++++++
 .../ui/__tests__/SavedEndpointRow.spec.tsx    | 29 ++++++-
 4 files changed, 182 insertions(+), 8 deletions(-)
 create mode 100644 app/features/cluster-switcher/ui/__tests__/ClusterDropdown.spec.tsx
 create mode 100644 app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx

diff --git a/app/features/cluster-switcher/ui/__stories__/SavedClusterList.stories.tsx b/app/features/cluster-switcher/ui/__stories__/SavedClusterList.stories.tsx
index a1bdd91c8..83de0da3c 100644
--- a/app/features/cluster-switcher/ui/__stories__/SavedClusterList.stories.tsx
+++ b/app/features/cluster-switcher/ui/__stories__/SavedClusterList.stories.tsx
@@ -42,9 +42,12 @@ export const Several: Story = {
         const canvas = within(canvasElement);
         // The name alone cannot tell two entries, or a stale entry from a good one, apart. The key stays
         // out of it; the whole URL is on the title.
-        expect(canvas.getByTestId('saved-cluster-host-Staging')).toHaveTextContent('staging.example.com');
-        expect(canvas.getByTestId('saved-cluster-host-Staging')).not.toHaveTextContent('api-key');
-        expect(canvas.getByTestId('saved-cluster-link-Staging')).toHaveAttribute('title', `Staging — ${STAGING_URL}`);
+        expect(canvas.getByTestId(`saved-cluster-host-${STAGING_URL}`)).toHaveTextContent('staging.example.com');
+        expect(canvas.getByTestId(`saved-cluster-host-${STAGING_URL}`)).not.toHaveTextContent('api-key');
+        expect(canvas.getByTestId(`saved-cluster-link-${STAGING_URL}`)).toHaveAttribute(
+            'title',
+            `Staging — ${STAGING_URL}`,
+        );
     },
 };
 
@@ -57,8 +60,8 @@ export const Selected: Story = {
     ],
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        const selected = canvas.getByTestId('saved-cluster-link-Staging');
-        const other = canvas.getByTestId('saved-cluster-link-My Local');
+        const selected = canvas.getByTestId(`saved-cluster-link-${STAGING_URL}`);
+        const other = canvas.getByTestId(`saved-cluster-link-${SAVED[0].url}`);
 
         // Against a sibling rather than a literal color, so this asserts "it stands out" and not which
         // green the status happens to use.
diff --git a/app/features/cluster-switcher/ui/__tests__/ClusterDropdown.spec.tsx b/app/features/cluster-switcher/ui/__tests__/ClusterDropdown.spec.tsx
new file mode 100644
index 000000000..c0ebb008b
--- /dev/null
+++ b/app/features/cluster-switcher/ui/__tests__/ClusterDropdown.spec.tsx
@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react';
+import { ClusterStatus } from '@utils/cluster';
+import { createStore, Provider } from 'jotai';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+// A remote endpoint whose secret lives in the query string: the navbar label must never expose it.
+const REMOTE_WITH_KEY = 'https://staging.example.com/rpc?api-key=secret';
+const LOCAL_URL = 'http://localhost:8899';
+
+const clusterMock = vi.hoisted(() => ({ url: 'https://staging.example.com/rpc?api-key=secret' as string | undefined }));
+
+vi.mock('@entities/cluster', async importOriginal => {
+    const actual = await importOriginal<typeof import('@entities/cluster')>();
+    return {
+        ...actual,
+        useCluster: () => ({
+            endpoint: clusterMock.url === undefined ? undefined : actual.parseRpcEndpoint(clusterMock.url),
+            name: 'Custom',
+            status: ClusterStatus.Connected,
+        }),
+    };
+});
+
+// Must import after mocks
+
+import { ClusterDropdown } from '../ClusterDropdown';
+import { UNKNOWN_COLOUR } from '../provenance-mark';
+
+const triggerName = (name: string) => name.startsWith('Cluster:');
+
+function renderDropdown() {
+    const store = createStore();
+    return render(
+        <Provider store={store}>
+            <ClusterDropdown />
+        </Provider>,
+    );
+}
+
+describe('ClusterDropdown', () => {
+    beforeEach(() => {
+        clusterMock.url = REMOTE_WITH_KEY;
+    });
+
+    // The security contract the deleted ClusterStatusButton spec guarded: an embedded key never reaches
+    // the always-visible navbar trigger.
+    it('should label a remote endpoint with scheme and host only, never the query key', () => {
+        renderDropdown();
+        const trigger = screen.getByRole('button', { name: triggerName });
+        expect(trigger).toHaveAttribute('aria-label', expect.stringContaining('https://staging.example.com'));
+        expect(trigger).not.toHaveAttribute('aria-label', expect.stringContaining('secret'));
+        expect(trigger).not.toHaveAttribute('aria-label', expect.stringContaining('api-key'));
+        expect(screen.getByText('https://staging.example.com')).toBeInTheDocument();
+    });
+
+    it('should mark a remote, unvouched endpoint as unknown', () => {
+        renderDropdown();
+        expect(screen.getByText('https://staging.example.com')).toHaveStyle({ color: UNKNOWN_COLOUR });
+    });
+
+    it('should show a local endpoint in full and leave it unmarked', () => {
+        clusterMock.url = LOCAL_URL;
+        renderDropdown();
+        const label = screen.getByText('http://localhost:8899');
+        expect(label).toBeInTheDocument();
+        expect(label).not.toHaveStyle({ color: UNKNOWN_COLOUR });
+    });
+});
diff --git a/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx b/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx
new file mode 100644
index 000000000..e9da1b719
--- /dev/null
+++ b/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx
@@ -0,0 +1,80 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Cluster, ClusterStatus } from '@utils/cluster';
+import { createStore, Provider } from 'jotai';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { type SavedCluster, savedClustersAtom } from '../../lib/cluster-storage';
+
+const NEW_URL = 'http://my-validator:8899';
+
+const nav = vi.hoisted(() => ({ replace: vi.fn(), searchParams: new URLSearchParams() }));
+
+vi.mock('next/navigation', () => ({
+    usePathname: () => '/',
+    useRouter: () => ({ push: vi.fn(), replace: nav.replace }),
+    useSearchParams: () => nav.searchParams,
+}));
+
+// Start on a built-in cluster so the custom draft begins empty and the gating tests type from scratch.
+vi.mock('@entities/cluster', async importOriginal => {
+    const actual = await importOriginal<typeof import('@entities/cluster')>();
+    return {
+        ...actual,
+        useCluster: () => ({ cluster: Cluster.MainnetBeta, endpoint: undefined, status: ClusterStatus.Connected }),
+    };
+});
+
+// Must import after mocks
+import { ClusterMenu } from '../ClusterMenu';
+
+function renderMenu(initialClusters: SavedCluster[] = []) {
+    const store = createStore();
+    if (initialClusters.length > 0) store.set(savedClustersAtom, initialClusters);
+    return {
+        store,
+        ...render(
+            <Provider store={store}>
+                <ClusterMenu onDismiss={vi.fn()} />
+            </Provider>,
+        ),
+    };
+}
+
+describe('ClusterMenu custom endpoint', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        localStorage.clear();
+    });
+
+    it('should enable Go and Save only once the typed URL parses as an endpoint', () => {
+        renderMenu();
+        expect(screen.getByTestId('go-custom-cluster-btn')).toBeDisabled();
+        expect(screen.getByTestId('open-save-cluster-btn')).toBeDisabled();
+
+        fireEvent.change(screen.getByTestId('cluster-url-input'), { target: { value: 'not a url' } });
+        expect(screen.getByTestId('go-custom-cluster-btn')).toBeDisabled();
+
+        fireEvent.change(screen.getByTestId('cluster-url-input'), { target: { value: NEW_URL } });
+        expect(screen.getByTestId('go-custom-cluster-btn')).toBeEnabled();
+        expect(screen.getByTestId('open-save-cluster-btn')).toBeEnabled();
+    });
+
+    it('should block saving a URL that is already saved', () => {
+        renderMenu([{ name: 'Mine', url: NEW_URL }]);
+        fireEvent.change(screen.getByTestId('cluster-url-input'), { target: { value: NEW_URL } });
+        const save = screen.getByTestId('open-save-cluster-btn');
+        expect(save).toBeDisabled();
+        expect(save).toHaveTextContent('Saved');
+    });
+
+    it('should persist a new endpoint through the save-from-field flow', () => {
+        const { store } = renderMenu();
+        fireEvent.change(screen.getByTestId('cluster-url-input'), { target: { value: NEW_URL } });
+        fireEvent.click(screen.getByTestId('open-save-cluster-btn'));
+
+        fireEvent.change(screen.getByTestId('cluster-name-input'), { target: { value: 'My validator' } });
+        fireEvent.click(screen.getByTestId('confirm-save-cluster-btn'));
+
+        expect(store.get(savedClustersAtom)).toEqual([{ name: 'My validator', url: NEW_URL }]);
+    });
+});
diff --git a/app/features/cluster-switcher/ui/__tests__/SavedEndpointRow.spec.tsx b/app/features/cluster-switcher/ui/__tests__/SavedEndpointRow.spec.tsx
index a6578c65b..291d4706e 100644
--- a/app/features/cluster-switcher/ui/__tests__/SavedEndpointRow.spec.tsx
+++ b/app/features/cluster-switcher/ui/__tests__/SavedEndpointRow.spec.tsx
@@ -7,13 +7,13 @@ import { SavedEndpointRow } from '../SavedEndpointRow';
 
 const ENTRY = { name: 'Staging', url: 'http://staging.example.com' };
 
-function renderRow() {
+function renderRow(entry = ENTRY) {
     const store = createStore();
-    store.set(savedClustersAtom, [ENTRY]);
+    store.set(savedClustersAtom, [entry]);
     const utils = render(
         <Provider store={store}>
             <ul>
-                <SavedEndpointRow active={false} entry={ENTRY} onPick={vi.fn()} />
+                <SavedEndpointRow active={false} entry={entry} onPick={vi.fn()} />
             </ul>
         </Provider>,
     );
@@ -60,3 +60,26 @@ describe('SavedEndpointRow delete and undo', () => {
         expect(store.get(savedClustersAtom)).toEqual([]);
     });
 });
+
+describe('SavedEndpointRow rename', () => {
+    it('should update the entry name and close the form on save', () => {
+        const { store } = renderRow();
+        fireEvent.click(screen.getByTestId(`rename-cluster-${ENTRY.url}`));
+        fireEvent.change(screen.getByTestId('cluster-name-input'), { target: { value: 'Renamed' } });
+        fireEvent.click(screen.getByTestId('confirm-save-cluster-btn'));
+
+        expect(store.get(savedClustersAtom)).toEqual([{ name: 'Renamed', url: ENTRY.url }]);
+        expect(screen.queryByTestId('save-cluster-form')).not.toBeInTheDocument();
+        expect(screen.getByTestId(`pick-cluster-${ENTRY.url}`)).toBeInTheDocument();
+    });
+
+    it('should let an unnamed entry be named', () => {
+        const unnamed = { name: '', url: 'http://localhost:8899' };
+        const { store } = renderRow(unnamed);
+        fireEvent.click(screen.getByTestId(`rename-cluster-${unnamed.url}`));
+        fireEvent.change(screen.getByTestId('cluster-name-input'), { target: { value: 'My validator' } });
+        fireEvent.click(screen.getByTestId('confirm-save-cluster-btn'));
+
+        expect(store.get(savedClustersAtom)).toEqual([{ name: 'My validator', url: unnamed.url }]);
+    });
+});

From 05869c82fbe29ac87db20715210f4c1c4f948202 Mon Sep 17 00:00:00 2001
From: Tania Markina <tania.markina@hoodies.team>
Date: Mon, 5 Oct 2026 16:37:02 +0200
Subject: [PATCH 4/9] chore: build info

---
 bench/BUILD.md | 78 +++++++++++++++++++++++++-------------------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/bench/BUILD.md b/bench/BUILD.md
index 2ce5412cf..9f9502040 100644
--- a/bench/BUILD.md
+++ b/bench/BUILD.md
@@ -2,34 +2,34 @@
 
 | Type | Route | Size | First Load JS |
 |------|-------|------|---------------|
-| Static | `/` | 140 kB | 550 kB |
-| Static | `/_not-found` | 0 B | 420 kB |
-| Dynamic | `/address/[address]` | 530 kB | 950 kB |
-| Dynamic | `/address/[address]/account-data` | 540 kB | 960 kB |
-| Dynamic | `/address/[address]/anchor-account` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/attestation` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/attributes` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/blockhashes` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/compression` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/concurrent-merkle-tree` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/domains` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/entries` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/feature-gate` | 500 kB | 910 kB |
-| Dynamic | `/address/[address]/idl` | 610 kB | 1.00 MB |
-| Dynamic | `/address/[address]/instructions` | 510 kB | 920 kB |
-| Dynamic | `/address/[address]/metadata` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/nftoken-collection-nfts` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/program-multisig` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/rewards` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/security` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/slot-hashes` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/stake-history` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/subscriptions` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/token-extensions` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/tokens` | 510 kB | 930 kB |
-| Dynamic | `/address/[address]/transfers` | 510 kB | 930 kB |
-| Dynamic | `/address/[address]/verified-build` | 500 kB | 920 kB |
-| Dynamic | `/address/[address]/vote-history` | 500 kB | 920 kB |
+| Static | `/` | 140 kB | 570 kB |
+| Static | `/_not-found` | 0 B | 450 kB |
+| Dynamic | `/address/[address]` | 510 kB | 950 kB |
+| Dynamic | `/address/[address]/account-data` | 520 kB | 960 kB |
+| Dynamic | `/address/[address]/anchor-account` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/attestation` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/attributes` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/blockhashes` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/compression` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/concurrent-merkle-tree` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/domains` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/entries` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/feature-gate` | 480 kB | 910 kB |
+| Dynamic | `/address/[address]/idl` | 590 kB | 1.00 MB |
+| Dynamic | `/address/[address]/instructions` | 490 kB | 920 kB |
+| Dynamic | `/address/[address]/metadata` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/nftoken-collection-nfts` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/program-multisig` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/rewards` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/security` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/slot-hashes` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/stake-history` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/subscriptions` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/token-extensions` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/tokens` | 490 kB | 930 kB |
+| Dynamic | `/address/[address]/transfers` | 490 kB | 930 kB |
+| Dynamic | `/address/[address]/verified-build` | 480 kB | 920 kB |
+| Dynamic | `/address/[address]/vote-history` | 480 kB | 920 kB |
 | Dynamic | `/api/ans-domains/[address]` | — | — |
 | Dynamic | `/api/domain-info/[domain]` | — | — |
 | Dynamic | `/api/geo-location` | — | — |
@@ -50,20 +50,20 @@
 | Dynamic | `/api/verification/coingecko/[address]` | — | — |
 | Dynamic | `/api/verification/jupiter/[mintAddress]` | — | — |
 | Dynamic | `/api/verification/rugcheck/[mintAddress]` | — | — |
-| Dynamic | `/block/[slot]` | 170 kB | 580 kB |
-| Dynamic | `/block/[slot]/accounts` | 150 kB | 570 kB |
-| Dynamic | `/block/[slot]/programs` | 150 kB | 570 kB |
-| Dynamic | `/block/[slot]/rewards` | 160 kB | 570 kB |
-| Dynamic | `/epoch/[epoch]` | 20 kB | 430 kB |
-| Static | `/feature-gates` | 50 kB | 460 kB |
+| Dynamic | `/block/[slot]` | 170 kB | 600 kB |
+| Dynamic | `/block/[slot]/accounts` | 150 kB | 590 kB |
+| Dynamic | `/block/[slot]/programs` | 150 kB | 590 kB |
+| Dynamic | `/block/[slot]/rewards` | 160 kB | 590 kB |
+| Dynamic | `/epoch/[epoch]` | 20 kB | 460 kB |
+| Static | `/feature-gates` | 50 kB | 490 kB |
 | Dynamic | `/mcp` | — | — |
-| Static | `/mcp/start` | 30 kB | 440 kB |
+| Static | `/mcp/start` | 30 kB | 470 kB |
 | Dynamic | `/og/feature-gate/[address]` | — | — |
 | Dynamic | `/og/receipt/[signature]` | — | — |
 | Dynamic | `/og/tx/[signature]` | — | — |
 | Static | `/opengraph-image.png` | — | — |
 | Dynamic | `/robots.txt` | — | — |
-| Static | `/tos` | 10 kB | 430 kB |
-| Dynamic | `/tx/[signature]` | 550 kB | 960 kB |
-| Dynamic | `/tx/[signature]/inspect` | 470 kB | 890 kB |
-| Static | `/tx/inspector` | 470 kB | 890 kB |
\ No newline at end of file
+| Static | `/tos` | 10 kB | 460 kB |
+| Dynamic | `/tx/[signature]` | 530 kB | 980 kB |
+| Dynamic | `/tx/[signature]/inspect` | 450 kB | 890 kB |
+| Static | `/tx/inspector` | 450 kB | 890 kB |
\ No newline at end of file

From a31cef2769533f062b9a5988b49fd9e21b090793 Mon Sep 17 00:00:00 2001
From: Tania Markina <tania.markina@hoodies.team>
Date: Mon, 5 Oct 2026 17:32:04 +0200
Subject: [PATCH 5/9] fall back to default when the active saved endpoint is
 deleted

---
 .../cluster-switcher/ui/ClusterMenu.tsx       | 27 +++++++++++++---
 .../cluster-switcher/ui/SavedEndpointRow.tsx  | 32 +++++++++++++------
 .../ui/__stories__/ClusterModal.stories.tsx   |  2 +-
 3 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/app/features/cluster-switcher/ui/ClusterMenu.tsx b/app/features/cluster-switcher/ui/ClusterMenu.tsx
index d3f65c5a5..c71964bbf 100644
--- a/app/features/cluster-switcher/ui/ClusterMenu.tsx
+++ b/app/features/cluster-switcher/ui/ClusterMenu.tsx
@@ -13,9 +13,10 @@ import {
     useSavedClusters,
 } from '@features/cluster-switcher/client';
 import { scrollToTop } from '@shared/lib/scrollToTop';
-import { Cluster, clusterName, CLUSTERS, clusterSlug, ClusterStatus } from '@utils/cluster';
+import { Cluster, clusterName, CLUSTERS, clusterSlug, ClusterStatus, DEFAULT_CLUSTER } from '@utils/cluster';
 import { useAtom } from 'jotai';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import React, { useEffect, useRef, useState } from 'react';
 import { Plus } from 'react-feather';
 
@@ -44,10 +45,18 @@ const SAVED_LIST_FADE_MASK = 'linear-gradient(to bottom, #000 calc(100% - 28px),
 
 export function ClusterMenu({ onDismiss }: { onDismiss: () => void }) {
     const { cluster, endpoint, status } = useCluster();
-    const { addSavedCluster, savedClusters } = useSavedClusters();
+    const { addSavedCluster, removeSavedCluster, savedClusters } = useSavedClusters();
     const buildHref = useClusterHref();
+    const router = useRouter();
     const draft = useCustomUrlDraft({ commitOnType: false });
     const [saving, setSaving] = useState(false);
+    const [saveError, setSaveError] = useState<string>();
+
+    const handleRemove = (url: string) => {
+        const wasActive = cluster === Cluster.Custom && endpoint?.href === url;
+        removeSavedCluster(url);
+        if (wasActive) router.push(buildHref({ cluster: DEFAULT_CLUSTER, customUrl: '' }), { scroll: false });
+    };
 
     const pinned: SavedCluster = { name: 'Default', url: DEFAULT_RPC_ENDPOINT.href };
     const showPinned = !savedClusters.some(saved => saved.url === pinned.url);
@@ -140,6 +149,7 @@ export function ClusterMenu({ onDismiss }: { onDismiss: () => void }) {
                                 pinned={saved.url === pinned.url && showPinned}
                                 active={!customIsLive && endpoint?.href === saved.url}
                                 facts={facts}
+                                onRemove={() => handleRemove(saved.url)}
                                 onPick={() => {
                                     draft.select(saved.url);
                                     onDismiss();
@@ -166,11 +176,20 @@ export function ClusterMenu({ onDismiss }: { onDismiss: () => void }) {
                             draft.value,
                             savedClusters.map(c => c.name),
                         )}
+                        error={saveError}
                         onSave={name => {
-                            addSavedCluster({ name, url: draft.value });
+                            try {
+                                addSavedCluster({ name, url: draft.value });
+                                setSaveError(undefined);
+                                setSaving(false);
+                            } catch {
+                                setSaveError('Could not save this endpoint. Your browser storage may be full.');
+                            }
+                        }}
+                        onCancel={() => {
+                            setSaveError(undefined);
                             setSaving(false);
                         }}
-                        onCancel={() => setSaving(false)}
                     />
                 ) : (
                     <>
diff --git a/app/features/cluster-switcher/ui/SavedEndpointRow.tsx b/app/features/cluster-switcher/ui/SavedEndpointRow.tsx
index 3e87fc156..2883a1878 100644
--- a/app/features/cluster-switcher/ui/SavedEndpointRow.tsx
+++ b/app/features/cluster-switcher/ui/SavedEndpointRow.tsx
@@ -22,37 +22,43 @@ export function SavedEndpointRow({
     active,
     facts,
     entry,
-    onDelete,
+    onRemove,
     onPick,
     pinned,
 }: {
     active: boolean;
     facts?: React.ReactNode;
     entry: SavedCluster;
-    onDelete?: () => void;
+    onRemove?: () => void;
     onPick: () => void;
     pinned?: boolean;
 }) {
     const { removeSavedCluster, updateSavedCluster } = useSavedClusters();
     const [editing, setEditing] = useState(false);
+    const [renameError, setRenameError] = useState<string>();
     const [pendingRemoval, setPendingRemoval] = useState(false);
     const pendingRef = useRef(false);
 
+    // Called when the delete actually lands (window elapses or the row unmounts), so the latest handler
+    // runs rather than the one captured when delete was clicked. Defaults to a plain storage removal.
+    const commitRef = useRef<() => void>(() => undefined);
+    commitRef.current = onRemove ?? (() => removeSavedCluster(entry.url));
+
     useEffect(() => {
         if (!pendingRemoval) return;
         const timer = setTimeout(() => {
             pendingRef.current = false;
-            removeSavedCluster(entry.url);
+            commitRef.current();
             setPendingRemoval(false);
         }, UNDO_WINDOW_MS);
         return () => clearTimeout(timer);
-    }, [pendingRemoval, entry.url, removeSavedCluster]);
+    }, [pendingRemoval]);
 
     useEffect(
         () => () => {
-            if (pendingRef.current) removeSavedCluster(entry.url);
+            if (pendingRef.current) commitRef.current();
         },
-        [entry.url, removeSavedCluster],
+        [],
     );
 
     const savedEndpoint = parseRpcEndpoint(entry.url);
@@ -66,11 +72,20 @@ export function SavedEndpointRow({
                 <EndpointForm
                     url={entry.url}
                     initialName={entry.name}
+                    error={renameError}
                     onSave={name => {
-                        updateSavedCluster({ name, url: entry.url });
+                        try {
+                            updateSavedCluster({ name, url: entry.url });
+                            setRenameError(undefined);
+                            setEditing(false);
+                        } catch {
+                            setRenameError('Could not save this endpoint. Your browser storage may be full.');
+                        }
+                    }}
+                    onCancel={() => {
+                        setRenameError(undefined);
                         setEditing(false);
                     }}
-                    onCancel={() => setEditing(false)}
                 />
             </li>
         );
@@ -154,7 +169,6 @@ export function SavedEndpointRow({
                         onClick={() => {
                             pendingRef.current = true;
                             setPendingRemoval(true);
-                            onDelete?.();
                         }}
                         testId={`delete-cluster-${entry.url}`}
                     >
diff --git a/app/features/cluster-switcher/ui/__stories__/ClusterModal.stories.tsx b/app/features/cluster-switcher/ui/__stories__/ClusterModal.stories.tsx
index dc62b31c2..ad4d74a25 100644
--- a/app/features/cluster-switcher/ui/__stories__/ClusterModal.stories.tsx
+++ b/app/features/cluster-switcher/ui/__stories__/ClusterModal.stories.tsx
@@ -72,7 +72,7 @@ export const WithSavedClusters: Story = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
         expect(canvas.getByTestId('saved-clusters-section')).toBeVisible();
-        expect(canvas.getByTestId('saved-cluster-host-Staging')).toHaveTextContent('staging.example.com');
+        expect(canvas.getByTestId(`saved-cluster-host-${SAVED[1].url}`)).toHaveTextContent('staging.example.com');
     },
     render: () => <ClusterModalWithReopen />,
 };

From 4de5b8c29137949b78e087b3550728b922e154d4 Mon Sep 17 00:00:00 2001
From: Sergo <rogaldh@radsh.red>
Date: Mon, 12 Oct 2026 13:42:22 +0100
Subject: [PATCH 6/9] fix(cluster-switcher): keep picked endpoint over pending
 delete; scroll menu on short screens

---
 .../cluster-switcher/ui/ClusterDropdown.tsx   |  2 +-
 .../cluster-switcher/ui/ClusterMenu.tsx       | 20 +++++--
 .../ui/__tests__/ClusterMenu.spec.tsx         | 58 ++++++++++++++++---
 3 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/app/features/cluster-switcher/ui/ClusterDropdown.tsx b/app/features/cluster-switcher/ui/ClusterDropdown.tsx
index f6044e454..4a6189847 100644
--- a/app/features/cluster-switcher/ui/ClusterDropdown.tsx
+++ b/app/features/cluster-switcher/ui/ClusterDropdown.tsx
@@ -86,7 +86,7 @@ export function ClusterDropdown({ align = 'end', className, onOpenChange, open }
                 align={align}
                 sideOffset={4}
                 collisionPadding={16}
-                className="flex max-h-[var(--radix-popover-content-available-height)] w-[360px] max-w-[calc(100vw-2rem)] flex-col overflow-hidden p-1.5 shadow-[0_16px_48px_-16px_rgba(0,0,0,0.9)]"
+                className="flex max-h-[var(--radix-popover-content-available-height)] w-[360px] max-w-[calc(100vw-2rem)] flex-col overflow-y-auto overscroll-contain p-1.5 shadow-[0_16px_48px_-16px_rgba(0,0,0,0.9)]"
             >
                 <ClusterMenu onDismiss={() => onOpenChange?.(false)} />
             </PopoverContent>
diff --git a/app/features/cluster-switcher/ui/ClusterMenu.tsx b/app/features/cluster-switcher/ui/ClusterMenu.tsx
index c71964bbf..d84686be0 100644
--- a/app/features/cluster-switcher/ui/ClusterMenu.tsx
+++ b/app/features/cluster-switcher/ui/ClusterMenu.tsx
@@ -51,11 +51,19 @@ export function ClusterMenu({ onDismiss }: { onDismiss: () => void }) {
     const draft = useCustomUrlDraft({ commitOnType: false });
     const [saving, setSaving] = useState(false);
     const [saveError, setSaveError] = useState<string>();
+    const pickedRef = useRef(false);
+
+    // A pending delete commits when a pick closes the menu; the pick must win over the fallback navigation.
+    const pick = () => {
+        pickedRef.current = true;
+        onDismiss();
+    };
 
     const handleRemove = (url: string) => {
         const wasActive = cluster === Cluster.Custom && endpoint?.href === url;
         removeSavedCluster(url);
-        if (wasActive) router.push(buildHref({ cluster: DEFAULT_CLUSTER, customUrl: '' }), { scroll: false });
+        if (wasActive && !pickedRef.current)
+            router.push(buildHref({ cluster: DEFAULT_CLUSTER, customUrl: '' }), { scroll: false });
     };
 
     const pinned: SavedCluster = { name: 'Default', url: DEFAULT_RPC_ENDPOINT.href };
@@ -96,7 +104,7 @@ export function ClusterMenu({ onDismiss }: { onDismiss: () => void }) {
     );
 
     return (
-        <div className="flex min-h-0 flex-col">
+        <div className="flex shrink-0 flex-col">
             <div className={cn(SECTION_CAPTION, 'shrink-0 pb-2 pt-2')}>Cluster</div>
 
             <ul className="m-0 flex shrink-0 list-none flex-col gap-0.5 p-0">
@@ -109,7 +117,7 @@ export function ClusterMenu({ onDismiss }: { onDismiss: () => void }) {
                                 scroll={false}
                                 onClick={() => {
                                     scrollToTop();
-                                    onDismiss();
+                                    pick();
                                 }}
                                 aria-current={active ? 'true' : undefined}
                                 className={rowClasses({ active })}
@@ -152,7 +160,7 @@ export function ClusterMenu({ onDismiss }: { onDismiss: () => void }) {
                                 onRemove={() => handleRemove(saved.url)}
                                 onPick={() => {
                                     draft.select(saved.url);
-                                    onDismiss();
+                                    pick();
                                 }}
                             />
                         ))}
@@ -209,7 +217,7 @@ export function ClusterMenu({ onDismiss }: { onDismiss: () => void }) {
                                     event.preventDefault();
                                     event.currentTarget.blur();
                                     draft.select(draft.value);
-                                    onDismiss();
+                                    pick();
                                 }}
                                 aria-label="Custom RPC URL"
                                 data-testid="cluster-url-input"
@@ -222,7 +230,7 @@ export function ClusterMenu({ onDismiss }: { onDismiss: () => void }) {
                                 title={draftEndpoint ? 'Use this endpoint' : 'Enter a full RPC URL to use it'}
                                 onClick={() => {
                                     draft.select(draft.value);
-                                    onDismiss();
+                                    pick();
                                 }}
                                 data-testid="go-custom-cluster-btn"
                             >
diff --git a/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx b/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx
index e9da1b719..128576445 100644
--- a/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx
+++ b/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx
@@ -7,45 +7,85 @@ import { type SavedCluster, savedClustersAtom } from '../../lib/cluster-storage'
 
 const NEW_URL = 'http://my-validator:8899';
 
-const nav = vi.hoisted(() => ({ replace: vi.fn(), searchParams: new URLSearchParams() }));
+const nav = vi.hoisted(() => ({ push: vi.fn(), replace: vi.fn(), searchParams: new URLSearchParams() }));
+
+// Start on a built-in cluster so the custom draft begins empty and the gating tests type from scratch.
+const active = vi.hoisted(() => ({ cluster: 0, endpoint: undefined as URL | undefined }));
 
 vi.mock('next/navigation', () => ({
     usePathname: () => '/',
-    useRouter: () => ({ push: vi.fn(), replace: nav.replace }),
+    useRouter: () => ({ push: nav.push, replace: nav.replace }),
     useSearchParams: () => nav.searchParams,
 }));
 
-// Start on a built-in cluster so the custom draft begins empty and the gating tests type from scratch.
+vi.mock('@shared/lib/scrollToTop', () => ({ scrollToTop: vi.fn() }));
+
 vi.mock('@entities/cluster', async importOriginal => {
     const actual = await importOriginal<typeof import('@entities/cluster')>();
     return {
         ...actual,
-        useCluster: () => ({ cluster: Cluster.MainnetBeta, endpoint: undefined, status: ClusterStatus.Connected }),
+        useCluster: () => ({ cluster: active.cluster, endpoint: active.endpoint, status: ClusterStatus.Connected }),
     };
 });
 
 // Must import after mocks
 import { ClusterMenu } from '../ClusterMenu';
 
-function renderMenu(initialClusters: SavedCluster[] = []) {
+function renderMenu(initialClusters: SavedCluster[] = [], onDismiss: () => void = vi.fn()) {
     const store = createStore();
     if (initialClusters.length > 0) store.set(savedClustersAtom, initialClusters);
     return {
         store,
         ...render(
             <Provider store={store}>
-                <ClusterMenu onDismiss={vi.fn()} />
+                <ClusterMenu onDismiss={() => onDismiss()} />
             </Provider>,
         ),
     };
 }
 
-describe('ClusterMenu custom endpoint', () => {
+beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+    active.cluster = Cluster.MainnetBeta;
+    active.endpoint = undefined;
+});
+
+describe('ClusterMenu deleting the active saved endpoint', () => {
+    const ACTIVE_URL = 'http://active-validator:8899/';
+    const OTHER_URL = 'http://other-validator:8899/';
+    const saved = [
+        { name: 'Active', url: ACTIVE_URL },
+        { name: 'Other', url: OTHER_URL },
+    ];
+
     beforeEach(() => {
-        vi.clearAllMocks();
-        localStorage.clear();
+        active.cluster = Cluster.Custom;
+        active.endpoint = new URL(ACTIVE_URL);
     });
 
+    it('should fall back to the default cluster when the menu closes with the delete pending', () => {
+        const { store, unmount } = renderMenu(saved);
+        fireEvent.click(screen.getByTestId(`delete-cluster-${ACTIVE_URL}`));
+        unmount();
+
+        expect(store.get(savedClustersAtom)).toEqual([{ name: 'Other', url: OTHER_URL }]);
+        expect(nav.push).toHaveBeenCalledTimes(1);
+    });
+
+    it('should keep the picked endpoint when a pick closes the menu with the delete pending', () => {
+        let close: () => void = vi.fn();
+        const { store, unmount } = renderMenu(saved, () => close());
+        close = unmount;
+        fireEvent.click(screen.getByTestId(`delete-cluster-${ACTIVE_URL}`));
+        fireEvent.click(screen.getByTestId(`pick-cluster-${OTHER_URL}`));
+
+        expect(store.get(savedClustersAtom)).toEqual([{ name: 'Other', url: OTHER_URL }]);
+        expect(nav.push).not.toHaveBeenCalled();
+    });
+});
+
+describe('ClusterMenu custom endpoint', () => {
     it('should enable Go and Save only once the typed URL parses as an endpoint', () => {
         renderMenu();
         expect(screen.getByTestId('go-custom-cluster-btn')).toBeDisabled();

From 175a2af29e0db24738210cf58848c57e458edf1f Mon Sep 17 00:00:00 2001
From: Sergo <rogaldh@radsh.red>
Date: Mon, 12 Oct 2026 13:50:33 +0100
Subject: [PATCH 7/9] test: clear web storage in the shared spec setup

---
 .../cluster/model/__tests__/cluster-provider.spec.tsx  |  3 ---
 .../cluster/model/__tests__/use-cluster-url.spec.tsx   |  8 +-------
 .../lib/__tests__/cluster-storage.spec.ts              | 10 +---------
 .../cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx |  1 -
 .../ui/__tests__/ClusterModal.spec.tsx                 |  4 ----
 .../__tests__/ClusterModalDeveloperSettings.spec.tsx   |  4 +---
 app/features/nicknames/lib/__tests__/nicknames.test.ts |  7 +------
 .../nicknames/ui/__tests__/NicknameEditor.spec.tsx     |  6 +-----
 test-setup.specs.ts                                    |  8 +++++++-
 9 files changed, 12 insertions(+), 39 deletions(-)

diff --git a/app/entities/cluster/model/__tests__/cluster-provider.spec.tsx b/app/entities/cluster/model/__tests__/cluster-provider.spec.tsx
index 835610901..953ac5dfb 100644
--- a/app/entities/cluster/model/__tests__/cluster-provider.spec.tsx
+++ b/app/entities/cluster/model/__tests__/cluster-provider.spec.tsx
@@ -60,9 +60,6 @@ const connectableText = () => screen.getByTestId('connectable').textContent;
 
 beforeEach(() => {
     vi.clearAllMocks();
-    localStorage.clear();
-    // Approvals live in sessionStorage, so one test's approved origin would otherwise carry into the next.
-    sessionStorage.clear();
 });
 
 // Three consumers now gate their requests on this one context field, and its type is optional, so
diff --git a/app/entities/cluster/model/__tests__/use-cluster-url.spec.tsx b/app/entities/cluster/model/__tests__/use-cluster-url.spec.tsx
index 15e8bea63..1776f2cac 100644
--- a/app/entities/cluster/model/__tests__/use-cluster-url.spec.tsx
+++ b/app/entities/cluster/model/__tests__/use-cluster-url.spec.tsx
@@ -3,7 +3,7 @@ import { createStore, Provider } from 'jotai';
 import { createElement, type ReactNode } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { renderToString } from 'react-dom/server';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { Cluster } from '../../lib/cluster';
 import { approvedOriginsAtom } from '../approved-origins';
@@ -37,12 +37,6 @@ function renderUseClusterUrl({
     return { onReplaceSearchParams, result, store };
 }
 
-// Both stores, not just localStorage: approvals live in sessionStorage, so one test's approved origin
-// would otherwise carry into the next and silently honor an endpoint that should still be pending.
-beforeEach(() => {
-    localStorage.clear();
-    sessionStorage.clear();
-});
 afterEach(() => vi.unstubAllEnvs());
 
 describe('useClusterUrl', () => {
diff --git a/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts b/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts
index 67f53af72..d10a82e13 100644
--- a/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts
+++ b/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts
@@ -1,5 +1,5 @@
 import { createStore } from 'jotai';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { MAX_CLUSTER_NAME_LENGTH } from '../cluster-name';
 import {
@@ -21,14 +21,6 @@ function loadFromStorage(raw: string): unknown {
 }
 
 describe('cluster-storage atoms', () => {
-    beforeEach(() => {
-        localStorage.clear();
-    });
-
-    afterEach(() => {
-        localStorage.clear();
-    });
-
     describe('savedClustersAtom', () => {
         it('should default to empty array', () => {
             const store = createStore();
diff --git a/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx b/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx
index 128576445..e181a5b97 100644
--- a/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx
+++ b/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx
@@ -46,7 +46,6 @@ function renderMenu(initialClusters: SavedCluster[] = [], onDismiss: () => void
 
 beforeEach(() => {
     vi.clearAllMocks();
-    localStorage.clear();
     active.cluster = Cluster.MainnetBeta;
     active.endpoint = undefined;
 });
diff --git a/app/features/cluster-switcher/ui/__tests__/ClusterModal.spec.tsx b/app/features/cluster-switcher/ui/__tests__/ClusterModal.spec.tsx
index 6b4617a79..fcd9815b7 100644
--- a/app/features/cluster-switcher/ui/__tests__/ClusterModal.spec.tsx
+++ b/app/features/cluster-switcher/ui/__tests__/ClusterModal.spec.tsx
@@ -70,7 +70,6 @@ function renderWithStore(initialClusters: SavedCluster[] = []) {
 describe('ClusterModal', () => {
     beforeEach(() => {
         vi.clearAllMocks();
-        localStorage.clear();
         clusterMock.customUrl = CUSTOM_URL;
         nav.searchParams = new URLSearchParams(`cluster=custom&customUrl=${CUSTOM_URL}`);
     });
@@ -276,7 +275,6 @@ describe('ClusterModal', () => {
 describe('ClusterModal cluster hrefs', () => {
     beforeEach(() => {
         vi.clearAllMocks();
-        localStorage.clear();
         nav.searchParams = new URLSearchParams(`cluster=custom&customUrl=${CUSTOM_URL}&sort=fee`);
     });
 
@@ -344,7 +342,6 @@ describe('ClusterModal cluster hrefs', () => {
 describe('ClusterModal endpoint consent', () => {
     beforeEach(() => {
         vi.clearAllMocks();
-        localStorage.clear();
         clusterMock.customUrl = CUSTOM_URL;
         nav.searchParams = new URLSearchParams(`cluster=custom&customUrl=${CUSTOM_URL}&sort=fee`);
     });
@@ -435,7 +432,6 @@ describe('ClusterModal endpoint consent', () => {
 describe('ClusterModal custom URL field', () => {
     beforeEach(() => {
         vi.clearAllMocks();
-        localStorage.clear();
         clusterMock.customUrl = CUSTOM_URL;
         nav.searchParams = new URLSearchParams(`cluster=custom&customUrl=${CUSTOM_URL}`);
     });
diff --git a/app/features/cluster-switcher/ui/__tests__/ClusterModalDeveloperSettings.spec.tsx b/app/features/cluster-switcher/ui/__tests__/ClusterModalDeveloperSettings.spec.tsx
index c69df3ad1..6398aee61 100644
--- a/app/features/cluster-switcher/ui/__tests__/ClusterModalDeveloperSettings.spec.tsx
+++ b/app/features/cluster-switcher/ui/__tests__/ClusterModalDeveloperSettings.spec.tsx
@@ -1,7 +1,7 @@
 import { customUrlEnabledAtom } from '@entities/cluster';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { createStore, Provider } from 'jotai';
-import { beforeEach, describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { ClusterModalDeveloperSettings } from '../ClusterModalDeveloperSettings';
 
@@ -19,8 +19,6 @@ function renderSettings(enabled = false) {
 }
 
 describe('ClusterModalDeveloperSettings', () => {
-    beforeEach(() => localStorage.clear());
-
     it('should not enable the bypass until it is confirmed', () => {
         // A standing permission for every link the browser opens, so the toggle alone must not be enough.
         const { store } = renderSettings();
diff --git a/app/features/nicknames/lib/__tests__/nicknames.test.ts b/app/features/nicknames/lib/__tests__/nicknames.test.ts
index a058311f8..cd7d5ad52 100644
--- a/app/features/nicknames/lib/__tests__/nicknames.test.ts
+++ b/app/features/nicknames/lib/__tests__/nicknames.test.ts
@@ -1,16 +1,11 @@
 /**
  * Tests for nickname localStorage utility functions
  */
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import { getNickname, removeNickname, setNickname } from '../nicknames';
 
 describe('nicknames', () => {
-    // Clear localStorage before each test for isolation
-    beforeEach(() => {
-        localStorage.clear();
-    });
-
     describe('getNickname', () => {
         it('should return null when no nickname exists', () => {
             const result = getNickname('TestAddress123');
diff --git a/app/features/nicknames/ui/__tests__/NicknameEditor.spec.tsx b/app/features/nicknames/ui/__tests__/NicknameEditor.spec.tsx
index 6c414721a..581107094 100644
--- a/app/features/nicknames/ui/__tests__/NicknameEditor.spec.tsx
+++ b/app/features/nicknames/ui/__tests__/NicknameEditor.spec.tsx
@@ -1,7 +1,7 @@
 import { gen } from '@__fixtures__/gen';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { describe, expect, test, vi } from 'vitest';
 
 import { getNickname, setNickname } from '../../lib/nicknames';
 import { NicknameEditor } from '../NicknameEditor';
@@ -9,10 +9,6 @@ import { NicknameEditor } from '../NicknameEditor';
 const ADDRESS = gen.address(1);
 
 describe('NicknameEditor', () => {
-    beforeEach(() => {
-        localStorage.clear();
-    });
-
     test('should prefill the saved nickname', async () => {
         setNickname(ADDRESS, 'Treasury');
 
diff --git a/test-setup.specs.ts b/test-setup.specs.ts
index 24c674950..fd09905ca 100644
--- a/test-setup.specs.ts
+++ b/test-setup.specs.ts
@@ -1,10 +1,16 @@
 import type * as SolanaKit from '@solana/kit';
-import { vi } from 'vitest';
+import { beforeEach, vi } from 'vitest';
 
 import type * as TokenInfoBatchProvider from '@/app/entities/token-info/model/token-info-batch-provider';
 
 import { mockSolanaRpc } from './app/__tests__/mock-rpc';
 
+// jsdom storage outlives a test and storage-backed state reads it on first use; node-environment specs have none.
+beforeEach(() => {
+    globalThis.localStorage?.clear();
+    globalThis.sessionStorage?.clear();
+});
+
 // Global no-op mock for Logger to suppress console output in all tests.
 vi.mock('@/app/shared/lib/logger', () => ({
     Logger: { debug: vi.fn(), error: vi.fn(), info: vi.fn(), panic: vi.fn(), warn: vi.fn() },

From a2fa627492f96380ab156338a427f4d7264cbe42 Mon Sep 17 00:00:00 2001
From: Sergo <rogaldh@radsh.red>
Date: Mon, 12 Oct 2026 14:10:38 +0100
Subject: [PATCH 8/9] fix(cluster-switcher): show consent host, hide keys, roll
 back failed saves

---
 .../lib/__tests__/cluster-storage.spec.ts     | 54 +++++++++++++--
 .../cluster-switcher/lib/cluster-storage.ts   | 38 +++++++++--
 .../__tests__/use-custom-url-draft.spec.tsx   | 15 ++++-
 .../model/use-custom-url-draft.ts             |  4 ++
 .../cluster-switcher/ui/ClusterDropdown.tsx   |  6 +-
 .../cluster-switcher/ui/ClusterMenu.tsx       |  5 +-
 .../ui/CustomUrlConsentDialog.tsx             | 14 +++-
 .../cluster-switcher/ui/EndpointForm.tsx      |  9 ++-
 .../cluster-switcher/ui/SavedEndpointRow.tsx  |  5 +-
 .../ui/__tests__/ClusterDropdown.spec.tsx     | 21 ++++++
 .../ui/__tests__/ClusterMenu.spec.tsx         | 66 ++++++++++++++++++-
 .../PendingCustomUrlConsent.spec.tsx          | 22 +++++--
 .../ui/__tests__/SavedEndpointRow.spec.tsx    |  8 +++
 13 files changed, 235 insertions(+), 32 deletions(-)

diff --git a/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts b/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts
index d10a82e13..36c71b05f 100644
--- a/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts
+++ b/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts
@@ -1,9 +1,12 @@
 import { createStore } from 'jotai';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
+
+import { Logger } from '@/app/shared/lib/logger';
 
 import { MAX_CLUSTER_NAME_LENGTH } from '../cluster-name';
 import {
     addSavedClusterAtom,
+    describeSaveError,
     parseSavedClusters,
     removeSavedClusterAtom,
     savedClustersAtom,
@@ -68,6 +71,41 @@ describe('cluster-storage atoms', () => {
         });
     });
 
+    describe('a write that storage rejects', () => {
+        it('should leave the list as it was before the write', () => {
+            const store = createStore();
+            store.set(addSavedClusterAtom, { name: 'Local', url: 'http://localhost:8899' });
+            const setItem = vi.spyOn(Storage.prototype, 'setItem').mockImplementationOnce(() => {
+                throw new DOMException('full', 'QuotaExceededError');
+            });
+
+            expect(() =>
+                store.set(addSavedClusterAtom, { name: 'Staging', url: 'http://staging.example.com' }),
+            ).toThrow();
+            expect(store.get(savedClustersAtom)).toEqual([{ name: 'Local', url: 'http://localhost:8899' }]);
+            setItem.mockRestore();
+        });
+    });
+
+    describe('describeSaveError', () => {
+        it.each([
+            [
+                'a full storage quota',
+                new DOMException('full', 'QuotaExceededError'),
+                'Not enough storage space to save this endpoint. Try removing unused ones.',
+            ],
+            ['any other error', new Error('boom'), 'Could not save this endpoint.'],
+        ])('should describe %s', (_label, error, message) => {
+            expect(describeSaveError(error)).toBe(message);
+        });
+
+        it('should log the error', () => {
+            const error = new Error('boom');
+            describeSaveError(error);
+            expect(Logger.error).toHaveBeenCalledWith(error);
+        });
+    });
+
     describe('removeSavedClusterAtom', () => {
         it('should remove a cluster by URL', () => {
             const store = createStore();
@@ -109,6 +147,14 @@ describe('cluster-storage atoms', () => {
             });
         });
 
+        it('should throw when the entry was removed before the rename landed', () => {
+            const store = storeWithTwo();
+            store.set(removeSavedClusterAtom, 'http://localhost:8899');
+            expect(() =>
+                store.set(updateSavedClusterAtom, { name: 'My validator', url: 'http://localhost:8899' }),
+            ).toThrow();
+        });
+
         it('should keep the entry where it was in the list', () => {
             const store = storeWithTwo();
             store.set(updateSavedClusterAtom, { name: 'My validator', url: 'http://localhost:8899' });
@@ -172,12 +218,6 @@ describe('cluster-storage atoms', () => {
             ).toThrow('Another saved endpoint has that address.');
             expect(store.get(savedClustersAtom)).toHaveLength(2);
         });
-
-        it('should do nothing when the URL is not in the list', () => {
-            const store = storeWithTwo();
-            store.set(updateSavedClusterAtom, { name: 'Whatever', url: 'http://localhost:9999' });
-            expect(store.get(savedClustersAtom).map(c => c.name)).toEqual(['', 'Staging']);
-        });
     });
 
     describe('parseSavedClusters', () => {
diff --git a/app/features/cluster-switcher/lib/cluster-storage.ts b/app/features/cluster-switcher/lib/cluster-storage.ts
index 2ade34add..b8ab6581c 100644
--- a/app/features/cluster-switcher/lib/cluster-storage.ts
+++ b/app/features/cluster-switcher/lib/cluster-storage.ts
@@ -1,7 +1,9 @@
 import { parseRpcEndpoint } from '@entities/cluster';
-import { atom } from 'jotai';
+import { atom, type Getter, type Setter } from 'jotai';
 import { atomWithStorage, createJSONStorage } from 'jotai/utils';
 
+import { Logger } from '@/app/shared/lib/logger';
+
 import { normalizeClusterName } from './cluster-name';
 
 export interface SavedCluster {
@@ -30,12 +32,15 @@ function parseSavedCluster(value: unknown): SavedCluster | undefined {
     return { name: clusterName, url };
 }
 
+// Both reads are wrapped because jotai's cross-tab `subscribe` skips `getItem`; `unstable_withStorageValidator`
+// would discard the whole list over one bad entry and leaves `subscribe` unchecked.
 const jsonStorage = createJSONStorage<SavedCluster[]>();
 const { subscribe } = jsonStorage;
 const validatedStorage: typeof jsonStorage = {
     getItem: (key, initialValue) => parseSavedClusters(jsonStorage.getItem(key, initialValue)),
     removeItem: key => jsonStorage.removeItem(key),
     setItem: (key, newValue) => jsonStorage.setItem(key, newValue),
+    // Absent outside the browser: jotai checks the property before subscribing.
     subscribe:
         subscribe &&
         ((key, callback, initialValue) => subscribe(key, v => callback(parseSavedClusters(v)), initialValue)),
@@ -44,31 +49,52 @@ const validatedStorage: typeof jsonStorage = {
 export const savedClustersAtom = atomWithStorage<SavedCluster[]>(STORAGE_KEY, [], validatedStorage);
 
 export const addSavedClusterAtom = atom(undefined, (get, set, cluster: SavedCluster) => {
-    set(savedClustersAtom, [...excludeByUrl(get(savedClustersAtom), cluster.url), cluster]);
+    persist(get, set, [...excludeByUrl(get(savedClustersAtom), cluster.url), cluster]);
 });
 
 export const removeSavedClusterAtom = atom(undefined, (get, set, url: string) => {
-    set(savedClustersAtom, excludeByUrl(get(savedClustersAtom), url));
+    persist(get, set, excludeByUrl(get(savedClustersAtom), url));
 });
 
+/** Maps a failed save to the message the form shows, and logs it. */
+export function describeSaveError(error: unknown): string {
+    Logger.error(error);
+    return error instanceof DOMException && error.name === 'QuotaExceededError'
+        ? 'Not enough storage space to save this endpoint. Try removing unused ones.'
+        : 'Could not save this endpoint.';
+}
+
 export const updateSavedClusterAtom = atom(
     undefined,
     (get, set, edit: { name: string; nextUrl?: string; url: string }) => {
         const clusters = get(savedClustersAtom);
-        if (!clusters.some(c => c.url === edit.url)) return;
+        // Another tab can delete the entry while this tab's rename form is open.
+        if (!clusters.some(c => c.url === edit.url)) throw new Error('That endpoint is no longer saved.');
         const name = normalizeClusterName(edit.name);
         const nextUrl = edit.nextUrl ?? edit.url;
         if (nextUrl !== edit.url) {
             if (!parseRpcEndpoint(nextUrl)) throw new Error('That is not a full RPC URL.');
             if (clusters.some(c => c.url === nextUrl)) throw new Error('Another saved endpoint has that address.');
         }
-        set(
-            savedClustersAtom,
+        persist(
+            get,
+            set,
             clusters.map(c => (c.url === edit.url ? { name, url: nextUrl } : c)),
         );
     },
 );
 
+// atomWithStorage updates memory before storage.setItem throws, so a failed write would otherwise stay on screen.
+function persist(get: Getter, set: Setter, next: SavedCluster[]) {
+    const previous = get(savedClustersAtom);
+    try {
+        set(savedClustersAtom, next);
+    } catch (error) {
+        set(savedClustersAtom, previous);
+        throw error;
+    }
+}
+
 function excludeByUrl(clusters: SavedCluster[], url: string): SavedCluster[] {
     return clusters.filter(c => c.url !== url);
 }
diff --git a/app/features/cluster-switcher/model/__tests__/use-custom-url-draft.spec.tsx b/app/features/cluster-switcher/model/__tests__/use-custom-url-draft.spec.tsx
index fd84793da..660c218ac 100644
--- a/app/features/cluster-switcher/model/__tests__/use-custom-url-draft.spec.tsx
+++ b/app/features/cluster-switcher/model/__tests__/use-custom-url-draft.spec.tsx
@@ -203,8 +203,17 @@ describe('useCustomUrlDraft', () => {
         expect(draft.value()).toBe('https://a.io/rpc');
     });
 
-    // The echo guard covers one arrival and no more. Saving a cluster starts by typing its URL, so a
-    // guard left standing would match that entry's click and leave the field showing the endpoint before.
+    it('should not let a pending typed commit override an endpoint picked before it fires', () => {
+        const draft = setupDraft();
+
+        draft.type('http://typed-node:8899');
+        draft.select('http://picked-node:8899');
+        nav.replace.mockClear();
+        draft.settle();
+
+        expect(nav.replace).not.toHaveBeenCalled();
+    });
+
     // The navbar's menu has Go, so there typing is deciding and nothing applies itself: the page behind
     // the menu must not change until the reader says so.
     describe('with commitOnType off', () => {
@@ -231,6 +240,8 @@ describe('useCustomUrlDraft', () => {
         });
     });
 
+    // The echo guard covers one arrival and no more. Saving a cluster starts by typing its URL, so a
+    // guard left standing would match that entry's click and leave the field showing the endpoint before.
     it('should follow a re-selected endpoint it committed earlier', () => {
         const draft = setupDraft();
 
diff --git a/app/features/cluster-switcher/model/use-custom-url-draft.ts b/app/features/cluster-switcher/model/use-custom-url-draft.ts
index 702edfdb3..438721d3d 100644
--- a/app/features/cluster-switcher/model/use-custom-url-draft.ts
+++ b/app/features/cluster-switcher/model/use-custom-url-draft.ts
@@ -32,6 +32,7 @@ export function useCustomUrlDraft({ commitOnType = true }: CustomUrlDraftOptions
 
     const [syncedUrl, setSyncedUrl] = useState(resolvedUrl);
     const [draftUrl, setDraftUrl] = useState(resolvedUrl);
+    // What this field last committed: its echo back from the URL must not overwrite keystrokes typed meanwhile.
     const [sentUrl, setSentUrl] = useState<string | undefined>(undefined);
     if (resolvedUrl !== syncedUrl) {
         setSyncedUrl(resolvedUrl);
@@ -39,8 +40,10 @@ export function useCustomUrlDraft({ commitOnType = true }: CustomUrlDraftOptions
         if (resolvedUrl !== sentUrl) setDraftUrl(resolvedUrl);
     }
 
+    // The latest value typed or picked, so a debounced commit that fires after a pick cannot navigate away from it.
     const intended = useRef(resolvedUrl);
 
+    // `replace`, not `push`: one history entry per typing pause would each hold a half-typed URL.
     const commitNow = (url: string, scroll: boolean) => {
         if (scroll) scrollToTop();
         if (url.trim() === '') {
@@ -50,6 +53,7 @@ export function useCustomUrlDraft({ commitOnType = true }: CustomUrlDraftOptions
         }
         const typedEndpoint = parseRpcEndpoint(url);
         if (typedEndpoint === undefined) return;
+        // Typing an endpoint is the consent: unapproved, the reader would prompt the user for their own URL.
         approveOrigin(typedEndpoint);
         setSentUrl(url);
         router.replace(buildHref({ cluster: Cluster.Custom, customUrl: url }), { scroll: false });
diff --git a/app/features/cluster-switcher/ui/ClusterDropdown.tsx b/app/features/cluster-switcher/ui/ClusterDropdown.tsx
index 4a6189847..9fd23ea82 100644
--- a/app/features/cluster-switcher/ui/ClusterDropdown.tsx
+++ b/app/features/cluster-switcher/ui/ClusterDropdown.tsx
@@ -39,14 +39,16 @@ export function ClusterDropdown({ align = 'end', className, onOpenChange, open }
     const lead = provenance ? PROVENANCE_MARK[provenance] : undefined;
     const LeadGlyph = lead?.glyph;
     const factsColour = status === ClusterStatus.Connected ? CONNECTED_GREY : STATUS_STYLE[status].colour;
+    // The mark is colour and an aria-hidden glyph, so the name has to say it too.
+    const described = lead ? `${label} (${lead.label} endpoint)` : label;
 
     return (
         <Popover open={open} onOpenChange={onOpenChange}>
             <PopoverTrigger asChild>
                 <button
                     type="button"
-                    aria-label={`Cluster: ${label}. ${statusLabel}. Change cluster`}
-                    title={`${label} · ${statusLabel}`}
+                    aria-label={`Cluster: ${described}. ${statusLabel}. Change cluster`}
+                    title={`${described} · ${statusLabel}`}
                     style={focusRuleStyle(focused || Boolean(open))}
                     onFocus={event => setFocused(isKeyboardFocus(event.currentTarget))}
                     onBlur={() => setFocused(false)}
diff --git a/app/features/cluster-switcher/ui/ClusterMenu.tsx b/app/features/cluster-switcher/ui/ClusterMenu.tsx
index d84686be0..64f91beac 100644
--- a/app/features/cluster-switcher/ui/ClusterMenu.tsx
+++ b/app/features/cluster-switcher/ui/ClusterMenu.tsx
@@ -20,6 +20,7 @@ import { useRouter } from 'next/navigation';
 import React, { useEffect, useRef, useState } from 'react';
 import { Plus } from 'react-feather';
 
+import { describeSaveError } from '../lib/cluster-storage';
 import {
     ACTIVE_ROW,
     INACTIVE_ROW,
@@ -190,8 +191,8 @@ export function ClusterMenu({ onDismiss }: { onDismiss: () => void }) {
                                 addSavedCluster({ name, url: draft.value });
                                 setSaveError(undefined);
                                 setSaving(false);
-                            } catch {
-                                setSaveError('Could not save this endpoint. Your browser storage may be full.');
+                            } catch (error) {
+                                setSaveError(describeSaveError(error));
                             }
                         }}
                         onCancel={() => {
diff --git a/app/features/cluster-switcher/ui/CustomUrlConsentDialog.tsx b/app/features/cluster-switcher/ui/CustomUrlConsentDialog.tsx
index de84c989e..4be241055 100644
--- a/app/features/cluster-switcher/ui/CustomUrlConsentDialog.tsx
+++ b/app/features/cluster-switcher/ui/CustomUrlConsentDialog.tsx
@@ -16,6 +16,7 @@ import { AlertTriangle, ChevronRight } from 'react-feather';
 
 export type ConsentRequest = { kind: 'endpoint'; endpoint: RpcEndpoint } | { kind: 'developer-bypass' };
 
+// Above the cluster popover (`z-[1202]`), which the trust toggle opens this dialog from.
 const CONSENT_Z_INDEX = 1210;
 
 const PLATE_CLASSES = 'rounded-md border border-solid border-white/10 bg-outer-space-800 p-3 text-left';
@@ -41,6 +42,7 @@ type Props = {
 export function CustomUrlConsentDialog({ request, onConfirm, onCancel }: Props) {
     const shown = useRetainedRequest(request);
 
+    // Escape, the X and Reject all decline; a stray backdrop click is not an answer to a security question.
     return (
         <Dialog open={request !== undefined} onOpenChange={open => !open && onCancel()}>
             <DialogContent
@@ -150,9 +152,18 @@ function EndpointConsent({
 
                 <div className={PLATE_CLASSES}>
                     <div className={LABEL_CLASSES}>Server</div>
+                    {/* The host alone is the decision: in a full URL, `https://real.example@evil.example` reads as the real one. */}
                     <div className="mt-1 break-all font-mono text-sm text-white" data-testid="consent-host">
-                        {endpoint.href}
+                        {endpoint.host}
                     </div>
+                    {endpoint.hasPathOrQuery && (
+                        <div
+                            className="mt-1.5 break-all font-mono text-xs text-outer-space-300"
+                            data-testid="consent-full-url"
+                        >
+                            {endpoint.href}
+                        </div>
+                    )}
                 </div>
 
                 <ServerPowersFold summary="What this server can do" />
@@ -181,6 +192,7 @@ function BypassConsent({ onConfirm, onCancel }: Pick<Props, 'onCancel' | 'onConf
     );
 }
 
+// Radix keeps the content mounted through the exit animation, so the request must outlive the prop that cleared it.
 function useRetainedRequest(request: ConsentRequest | undefined) {
     const retained = useRef(request);
     if (request !== undefined) retained.current = request;
diff --git a/app/features/cluster-switcher/ui/EndpointForm.tsx b/app/features/cluster-switcher/ui/EndpointForm.tsx
index 07f034f10..fb7edbd82 100644
--- a/app/features/cluster-switcher/ui/EndpointForm.tsx
+++ b/app/features/cluster-switcher/ui/EndpointForm.tsx
@@ -53,8 +53,13 @@ export function EndpointForm({
                 data-testid="cluster-name-input"
                 autoFocus
             />
-            <span className="block truncate font-mono text-[11px] text-outer-space-300" title={url}>
-                {url}
+            {/* Host only: provider URLs carry the API key in the path or query, and this menu gets screen-shared. */}
+            <span
+                className="block truncate font-mono text-[11px] text-outer-space-300"
+                title={url}
+                data-testid="save-cluster-host"
+            >
+                {host}
             </span>
             {error && (
                 <span className="text-xs leading-snug text-[#b45be1]" data-testid="save-cluster-error">
diff --git a/app/features/cluster-switcher/ui/SavedEndpointRow.tsx b/app/features/cluster-switcher/ui/SavedEndpointRow.tsx
index 2883a1878..3af2d3554 100644
--- a/app/features/cluster-switcher/ui/SavedEndpointRow.tsx
+++ b/app/features/cluster-switcher/ui/SavedEndpointRow.tsx
@@ -8,6 +8,7 @@ import { type SavedCluster, useSavedClusters } from '@features/cluster-switcher/
 import React, { useEffect, useRef, useState } from 'react';
 import { Edit2, Trash2 } from 'react-feather';
 
+import { describeSaveError } from '../lib/cluster-storage';
 import { endpointProvenance } from '../lib/endpoint-provenance';
 import { MENU_SECONDARY_BUTTON, rowClasses } from './cluster-row-classes';
 import { EndpointForm } from './EndpointForm';
@@ -78,8 +79,8 @@ export function SavedEndpointRow({
                             updateSavedCluster({ name, url: entry.url });
                             setRenameError(undefined);
                             setEditing(false);
-                        } catch {
-                            setRenameError('Could not save this endpoint. Your browser storage may be full.');
+                        } catch (error) {
+                            setRenameError(describeSaveError(error));
                         }
                     }}
                     onCancel={() => {
diff --git a/app/features/cluster-switcher/ui/__tests__/ClusterDropdown.spec.tsx b/app/features/cluster-switcher/ui/__tests__/ClusterDropdown.spec.tsx
index c0ebb008b..a5fe03c58 100644
--- a/app/features/cluster-switcher/ui/__tests__/ClusterDropdown.spec.tsx
+++ b/app/features/cluster-switcher/ui/__tests__/ClusterDropdown.spec.tsx
@@ -64,5 +64,26 @@ describe('ClusterDropdown', () => {
         const label = screen.getByText('http://localhost:8899');
         expect(label).toBeInTheDocument();
         expect(label).not.toHaveStyle({ color: UNKNOWN_COLOUR });
+        expect(screen.getByRole('button', { name: triggerName })).not.toHaveAttribute(
+            'aria-label',
+            expect.stringContaining('endpoint)'),
+        );
+    });
+
+    it('should name the provenance for readers who cannot see its colour', () => {
+        renderDropdown();
+        expect(screen.getByRole('button', { name: triggerName })).toHaveAttribute(
+            'aria-label',
+            expect.stringContaining('(unknown endpoint)'),
+        );
+    });
+
+    it('should label a built-in cluster by its name', () => {
+        clusterMock.url = undefined;
+        renderDropdown();
+        expect(screen.getByRole('button', { name: triggerName })).toHaveAttribute(
+            'aria-label',
+            expect.stringContaining('Cluster: Custom.'),
+        );
     });
 });
diff --git a/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx b/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx
index e181a5b97..4b95abdd6 100644
--- a/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx
+++ b/app/features/cluster-switcher/ui/__tests__/ClusterMenu.spec.tsx
@@ -29,6 +29,8 @@ vi.mock('@entities/cluster', async importOriginal => {
 });
 
 // Must import after mocks
+import { customUrlEnabledAtom } from '@entities/cluster';
+
 import { ClusterMenu } from '../ClusterMenu';
 
 function renderMenu(initialClusters: SavedCluster[] = [], onDismiss: () => void = vi.fn()) {
@@ -69,7 +71,16 @@ describe('ClusterMenu deleting the active saved endpoint', () => {
         unmount();
 
         expect(store.get(savedClustersAtom)).toEqual([{ name: 'Other', url: OTHER_URL }]);
-        expect(nav.push).toHaveBeenCalledTimes(1);
+        expect(nav.push).toHaveBeenCalledExactlyOnceWith('/', { scroll: false });
+    });
+
+    it('should stay on the active endpoint when an inactive one is deleted', () => {
+        const { store, unmount } = renderMenu(saved);
+        fireEvent.click(screen.getByTestId(`delete-cluster-${OTHER_URL}`));
+        unmount();
+
+        expect(store.get(savedClustersAtom)).toEqual([{ name: 'Active', url: ACTIVE_URL }]);
+        expect(nav.push).not.toHaveBeenCalled();
     });
 
     it('should keep the picked endpoint when a pick closes the menu with the delete pending', () => {
@@ -98,6 +109,32 @@ describe('ClusterMenu custom endpoint', () => {
         expect(screen.getByTestId('open-save-cluster-btn')).toBeEnabled();
     });
 
+    it.each([
+        ['Go', () => fireEvent.click(screen.getByTestId('go-custom-cluster-btn'))],
+        ['Enter', () => fireEvent.keyDown(screen.getByTestId('cluster-url-input'), { key: 'Enter' })],
+    ])('should switch to the typed endpoint and close on %s', (_label, submit) => {
+        const onDismiss = vi.fn();
+        renderMenu([], onDismiss);
+        fireEvent.change(screen.getByTestId('cluster-url-input'), { target: { value: NEW_URL } });
+        submit();
+
+        expect(nav.replace).toHaveBeenCalledExactlyOnceWith(
+            `/?cluster=custom&customUrl=${encodeURIComponent(NEW_URL)}`,
+            { scroll: false },
+        );
+        expect(onDismiss).toHaveBeenCalledOnce();
+    });
+
+    it('should ignore Enter on a URL that does not parse', () => {
+        const onDismiss = vi.fn();
+        renderMenu([], onDismiss);
+        fireEvent.change(screen.getByTestId('cluster-url-input'), { target: { value: 'not a url' } });
+        fireEvent.keyDown(screen.getByTestId('cluster-url-input'), { key: 'Enter' });
+
+        expect(nav.replace).not.toHaveBeenCalled();
+        expect(onDismiss).not.toHaveBeenCalled();
+    });
+
     it('should block saving a URL that is already saved', () => {
         renderMenu([{ name: 'Mine', url: NEW_URL }]);
         fireEvent.change(screen.getByTestId('cluster-url-input'), { target: { value: NEW_URL } });
@@ -106,6 +143,17 @@ describe('ClusterMenu custom endpoint', () => {
         expect(save).toHaveTextContent('Saved');
     });
 
+    it('should keep an API key in the URL off the save form', () => {
+        renderMenu();
+        fireEvent.change(screen.getByTestId('cluster-url-input'), {
+            target: { value: 'https://rpc.example/?api-key=secret' },
+        });
+        fireEvent.click(screen.getByTestId('open-save-cluster-btn'));
+
+        expect(screen.getByTestId('save-cluster-host').textContent).toBe('rpc.example');
+        expect(screen.getByTestId('save-cluster-form')).not.toHaveTextContent('secret');
+    });
+
     it('should persist a new endpoint through the save-from-field flow', () => {
         const { store } = renderMenu();
         fireEvent.change(screen.getByTestId('cluster-url-input'), { target: { value: NEW_URL } });
@@ -117,3 +165,19 @@ describe('ClusterMenu custom endpoint', () => {
         expect(store.get(savedClustersAtom)).toEqual([{ name: 'My validator', url: NEW_URL }]);
     });
 });
+
+describe('ClusterMenu trust toggle', () => {
+    it.each([
+        ['declined', 'consent-cancel', false],
+        ['confirmed', 'consent-confirm', true],
+    ])('should trust any RPC server only once the prompt is confirmed (%s)', (_label, answer, trusted) => {
+        const { store } = renderMenu();
+        fireEvent.click(screen.getByRole('switch'));
+
+        expect(screen.getByTestId('custom-url-consent')).toBeInTheDocument();
+        expect(store.get(customUrlEnabledAtom)).toBe(false);
+
+        fireEvent.click(screen.getByTestId(answer));
+        expect(store.get(customUrlEnabledAtom)).toBe(trusted);
+    });
+});
diff --git a/app/features/cluster-switcher/ui/__tests__/PendingCustomUrlConsent.spec.tsx b/app/features/cluster-switcher/ui/__tests__/PendingCustomUrlConsent.spec.tsx
index a087397d6..2cf391907 100644
--- a/app/features/cluster-switcher/ui/__tests__/PendingCustomUrlConsent.spec.tsx
+++ b/app/features/cluster-switcher/ui/__tests__/PendingCustomUrlConsent.spec.tsx
@@ -56,24 +56,32 @@ describe('PendingCustomUrlConsent', () => {
         clusterState.pendingCustomUrl = rpcEndpoint(REMOTE_URL);
         renderConsent();
 
-        // The whole address, once: the host is in it, and so is whatever follows the host.
-        expect(screen.getByTestId('consent-host')).toHaveTextContent(REMOTE_URL);
+        expect(screen.getByTestId('consent-host').textContent).toBe('my-node.example');
+        expect(screen.getByTestId('consent-full-url')).toHaveTextContent(REMOTE_URL);
     });
 
-    it('should sit above the cluster sidebar rather than under its overlay', () => {
-        // The sidebar is `z-[1060]` over a `z-[1050]` overlay and the dialog's base is `z-50`, so both its
-        // layers have to clear those or the prompt hides behind the switcher.
+    it('should name the real host when the URL puts a lookalike before it', () => {
+        clusterState.pendingCustomUrl = rpcEndpoint('https://api.mainnet-beta.solana.com@evil.example');
+        renderConsent();
+
+        expect(screen.getByTestId('consent-host').textContent).toBe('evil.example');
+    });
+
+    it('should sit above the cluster popover rather than under it', () => {
+        // The navbar's cluster popover is `z-[1202]` (shared/ui/popover.tsx), the highest layer the
+        // switcher opens, and the dialog's base is `z-50`, so both its layers have to clear it.
+        const POPOVER_Z_INDEX = 1202;
         clusterState.pendingCustomUrl = rpcEndpoint(REMOTE_URL);
         renderConsent();
 
         const content = screen.getByTestId('custom-url-consent');
-        expect(Number(content.style.zIndex)).toBeGreaterThan(1060);
+        expect(Number(content.style.zIndex)).toBeGreaterThan(POPOVER_Z_INDEX);
         // Radix portals both layers into <body>, overlay immediately before the content. The overlay is
         // decorative — no role, no accessible name — so no Testing Library query reaches it.
         // eslint-disable-next-line testing-library/no-node-access -- see above
         const overlay = content.previousElementSibling as HTMLElement;
         expect(overlay.className).toContain('inset-0');
-        expect(Number(overlay.style.zIndex)).toBeGreaterThan(1060);
+        expect(Number(overlay.style.zIndex)).toBeGreaterThan(POPOVER_Z_INDEX);
     });
 
     it('should approve the origin, not the full URL, on confirm', () => {
diff --git a/app/features/cluster-switcher/ui/__tests__/SavedEndpointRow.spec.tsx b/app/features/cluster-switcher/ui/__tests__/SavedEndpointRow.spec.tsx
index 291d4706e..644b690bf 100644
--- a/app/features/cluster-switcher/ui/__tests__/SavedEndpointRow.spec.tsx
+++ b/app/features/cluster-switcher/ui/__tests__/SavedEndpointRow.spec.tsx
@@ -45,6 +45,14 @@ describe('SavedEndpointRow delete and undo', () => {
         expect(screen.getByTestId(`pick-cluster-${ENTRY.url}`)).toBeInTheDocument();
     });
 
+    it('should keep a restored entry when the menu closes afterwards', () => {
+        const { store, unmount } = renderRow();
+        fireEvent.click(screen.getByTestId(`delete-cluster-${ENTRY.url}`));
+        fireEvent.click(screen.getByTestId(`restore-cluster-${ENTRY.url}`));
+        unmount();
+        expect(store.get(savedClustersAtom)).toEqual([ENTRY]);
+    });
+
     it('should commit the removal once the undo window elapses', () => {
         const { store } = renderRow();
         fireEvent.click(screen.getByTestId(`delete-cluster-${ENTRY.url}`));

From 14bc9adc32c08e9596f4f6bfa91fc94a2e2d5e27 Mon Sep 17 00:00:00 2001
From: Sergo <rogaldh@radsh.red>
Date: Mon, 12 Oct 2026 14:31:33 +0100
Subject: [PATCH 9/9] fix(navbar): drop search input fade; document latest-name
 precedence for saved aliases

---
 .../lib/__tests__/cluster-storage.spec.ts                | 9 +++++++++
 app/features/cluster-switcher/lib/cluster-storage.ts     | 1 +
 app/features/search/ui/BaseSearch.tsx                    | 2 --
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts b/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts
index 36c71b05f..e75faac7d 100644
--- a/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts
+++ b/app/features/cluster-switcher/lib/__tests__/cluster-storage.spec.ts
@@ -221,6 +221,15 @@ describe('cluster-storage atoms', () => {
     });
 
     describe('parseSavedClusters', () => {
+        it('should keep the latest name when older data holds one URL under two names', () => {
+            expect(
+                parseSavedClusters([
+                    { name: 'Old alias', url: 'http://localhost:8899' },
+                    { name: 'Current', url: 'http://localhost:8899' },
+                ]),
+            ).toEqual([{ name: 'Current', url: 'http://localhost:8899' }]);
+        });
+
         it('should keep entries whose URL is an RPC endpoint', () => {
             expect(
                 parseSavedClusters([
diff --git a/app/features/cluster-switcher/lib/cluster-storage.ts b/app/features/cluster-switcher/lib/cluster-storage.ts
index b8ab6581c..87da8911e 100644
--- a/app/features/cluster-switcher/lib/cluster-storage.ts
+++ b/app/features/cluster-switcher/lib/cluster-storage.ts
@@ -15,6 +15,7 @@ const STORAGE_KEY = 'explorer:savedClusters';
 
 export function parseSavedClusters(value: unknown): SavedCluster[] {
     if (!Array.isArray(value)) return [];
+    // The URL is the identity, so older data holding one URL under two names keeps the latest name only.
     const byUrl = new Map<string, SavedCluster>();
     for (const entry of value) {
         const cluster = parseSavedCluster(entry);
diff --git a/app/features/search/ui/BaseSearch.tsx b/app/features/search/ui/BaseSearch.tsx
index 1769cf0bc..227c8a668 100644
--- a/app/features/search/ui/BaseSearch.tsx
+++ b/app/features/search/ui/BaseSearch.tsx
@@ -114,8 +114,6 @@ export function BaseSearch({
                                     'border-none bg-transparent outline-none',
                                     'text-sm text-white placeholder:text-heavy-metal-100',
                                     'overflow-hidden',
-                                    '[-webkit-mask-image:linear-gradient(to_right,#000_calc(100%-24px),transparent)]',
-                                    '[mask-image:linear-gradient(to_right,#000_calc(100%-24px),transparent)]',
                                 )}
                                 placeholder="Search for tokens, validators, programs, and accounts"
                                 value={value}