refactor: rename SolaceScanScout to Solace and update related configurations

- Updated branding from "SolaceScanScout" to "Solace" across various files including deployment scripts, API responses, and documentation.
- Changed default base URL for Playwright tests and updated security headers to reflect the new branding.
- Enhanced README and API documentation to include new authentication endpoints and product access details.

This refactor aligns the project branding and improves clarity in the API documentation.

frontend/src/components/common/EntityBadge.tsx

@@ -0,0 +1,52 @@
+import clsx from 'clsx'
+
+function toneClasses(tone: 'neutral' | 'success' | 'warning' | 'info') {
+  switch (tone) {
+    case 'success':
+      return 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200'
+    case 'warning':
+      return 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200'
+    case 'info':
+      return 'border-sky-200 bg-sky-50 text-sky-800 dark:border-sky-900 dark:bg-sky-950/40 dark:text-sky-200'
+    default:
+      return 'border-gray-200 bg-gray-50 text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300'
+  }
+}
+
+export function getEntityBadgeTone(tag: string): 'neutral' | 'success' | 'warning' | 'info' {
+  const normalized = tag.toLowerCase()
+  if (normalized === 'compliant' || normalized === 'listed' || normalized === 'verified') {
+    return 'success'
+  }
+  if (normalized === 'wrapped') {
+    return 'warning'
+  }
+  if (normalized === 'bridge' || normalized === 'canonical' || normalized === 'official') {
+    return 'info'
+  }
+  return 'neutral'
+}
+
+export default function EntityBadge({
+  label,
+  tone,
+  className,
+}: {
+  label: string
+  tone?: 'neutral' | 'success' | 'warning' | 'info'
+  className?: string
+}) {
+  const resolvedTone = tone || getEntityBadgeTone(label)
+
+  return (
+    <span
+      className={clsx(
+        'rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-wide',
+        toneClasses(resolvedTone),
+        className,
+      )}
+    >
+      {label}
+    </span>
+  )
+}

frontend/src/components/common/ExplorerAgentTool.tsx

@@ -0,0 +1,178 @@
+'use client'
+
+import { FormEvent, useMemo, useState } from 'react'
+import { usePathname } from 'next/navigation'
+import { getExplorerApiBase } from '@/services/api/blockscout'
+
+interface AgentMessage {
+  role: 'assistant' | 'user'
+  content: string
+}
+
+const QUICK_PROMPTS = [
+  'Explain this page',
+  'Summarize the chain status',
+  'Help me inspect a contract',
+  'Find likely navigation issues',
+] as const
+
+export default function ExplorerAgentTool() {
+  const pathname = usePathname() ?? '/'
+  const [open, setOpen] = useState(false)
+  const [input, setInput] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [messages, setMessages] = useState<AgentMessage[]>([
+    {
+      role: 'assistant',
+      content:
+        'Explorer AI Agent Tool is ready. I can explain this page, summarize what you are looking at, and help investigate transactions, contracts, routes, and system surfaces.',
+    },
+  ])
+
+  const pageContext = useMemo(
+    () => ({
+      path: pathname,
+      view: 'explorer',
+    }),
+    [pathname],
+  )
+
+  const sendMessage = async (content: string) => {
+    const trimmed = content.trim()
+    if (!trimmed || submitting) return
+
+    const nextMessages: AgentMessage[] = [...messages, { role: 'user', content: trimmed }]
+    setMessages(nextMessages)
+    setInput('')
+    setSubmitting(true)
+
+    try {
+      const response = await fetch(`${getExplorerApiBase()}/api/v1/ai/chat`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          messages: nextMessages,
+          pageContext,
+        }),
+      })
+
+      const payload = await response.json().catch(() => null)
+      if (!response.ok) {
+        throw new Error(payload?.error?.message || `HTTP ${response.status}`)
+      }
+
+      const reply =
+        payload?.message?.content ||
+        payload?.reply ||
+        'The agent did not return a readable reply.'
+
+      setMessages((current) => [...current, { role: 'assistant', content: String(reply) }])
+    } catch (error) {
+      setMessages((current) => [
+        ...current,
+        {
+          role: 'assistant',
+          content:
+            error instanceof Error
+              ? `Agent tool is temporarily unavailable: ${error.message}`
+              : 'Agent tool is temporarily unavailable.',
+        },
+      ])
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault()
+    await sendMessage(input)
+  }
+
+  return (
+    <div className="fixed bottom-5 right-5 z-40 flex max-w-[calc(100vw-1.5rem)] flex-col items-end gap-3">
+      {open ? (
+        <section className="w-[min(24rem,calc(100vw-1.5rem))] overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-gray-900">
+          <div className="flex items-start justify-between gap-3 border-b border-gray-200 px-4 py-3 dark:border-gray-700">
+            <div>
+              <h2 className="text-sm font-semibold text-gray-900 dark:text-white">Explorer AI Agent Tool</h2>
+              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                Page-aware guidance for the explorer. Helpful, read-only, and designed for quick investigation.
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={() => setOpen(false)}
+              className="rounded-lg px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+            >
+              Close
+            </button>
+          </div>
+          <div className="flex flex-wrap gap-2 border-b border-gray-200 px-4 py-3 dark:border-gray-700">
+            {QUICK_PROMPTS.map((prompt) => (
+              <button
+                key={prompt}
+                type="button"
+                onClick={() => void sendMessage(prompt)}
+                className="rounded-full border border-primary-200 bg-primary-50 px-3 py-1 text-xs font-medium text-primary-700 hover:bg-primary-100 dark:border-primary-500/30 dark:bg-primary-500/10 dark:text-primary-300 dark:hover:bg-primary-500/20"
+              >
+                {prompt}
+              </button>
+            ))}
+          </div>
+          <div className="max-h-[22rem] space-y-3 overflow-y-auto px-4 py-3">
+            {messages.map((message, index) => (
+              <div
+                key={`${message.role}-${index}`}
+                className={`rounded-2xl px-3 py-2 text-sm ${
+                  message.role === 'assistant'
+                    ? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100'
+                    : 'ml-6 bg-primary-600 text-white'
+                }`}
+              >
+                {message.content}
+              </div>
+            ))}
+          </div>
+          <form onSubmit={handleSubmit} className="border-t border-gray-200 px-4 py-3 dark:border-gray-700">
+            <label className="block">
+              <span className="sr-only">Ask the explorer agent</span>
+              <textarea
+                value={input}
+                onChange={(event) => setInput(event.target.value)}
+                rows={3}
+                placeholder="Ask about this page, a transaction, a token, or an access-control flow."
+                className="w-full rounded-xl border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200 dark:border-gray-700 dark:bg-gray-950 dark:text-white"
+              />
+            </label>
+            <div className="mt-3 flex items-center justify-between gap-3">
+              <p className="text-xs text-gray-500 dark:text-gray-400">Current view: {pathname}</p>
+              <button
+                type="submit"
+                disabled={submitting || !input.trim()}
+                className="rounded-xl bg-primary-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-60"
+              >
+                {submitting ? 'Thinking…' : 'Send'}
+              </button>
+            </div>
+          </form>
+        </section>
+      ) : null}
+
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="inline-flex items-center gap-2 rounded-full bg-primary-600 px-4 py-3 text-sm font-semibold text-white shadow-lg transition hover:bg-primary-700"
+        aria-expanded={open}
+      >
+        <span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-white/15">
+          <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden>
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4v-4Z" />
+          </svg>
+        </span>
+        Agent Tool
+      </button>
+    </div>
+  )
+}

frontend/src/components/common/ExplorerChrome.tsx

@@ -1,12 +1,22 @@
 import type { ReactNode } from 'react'
 import Navbar from './Navbar'
 import Footer from './Footer'
+import ExplorerAgentTool from './ExplorerAgentTool'
 
 export default function ExplorerChrome({ children }: { children: ReactNode }) {
   return (
     <div className="flex min-h-screen flex-col bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[100] focus:rounded-md focus:bg-primary-600 focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-white"
+      >
+        Skip to content
+      </a>
       <Navbar />
-      <div className="flex-1">{children}</div>
+      <div id="main-content" className="flex-1">
+        {children}
+      </div>
+      <ExplorerAgentTool />
       <Footer />
     </div>
   )

frontend/src/components/common/Footer.tsx

@@ -12,15 +12,18 @@ export default function Footer() {
         <div className="grid gap-4 sm:gap-6 md:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)_minmax(0,1fr)]">
           <div className="space-y-3 rounded-xl border border-gray-200 bg-gray-50/80 p-4 dark:border-gray-800 dark:bg-gray-900/40 md:border-0 md:bg-transparent md:p-0">
             <div className="text-base font-semibold text-gray-900 dark:text-white sm:text-lg">
-              SolaceScanScout
+              SolaceScan
             </div>
             <p className="max-w-xl text-sm leading-6 text-gray-600 dark:text-gray-400">
-              Built from Blockscout foundations and Solace Bank Group PLC frontend
-              work. Explorer data is powered by Blockscout, Chain 138 RPC, and the
-              companion MetaMask Snap.
+              Built on Blockscout for the DBIS / Defi Oracle Chain 138 explorer surface.
+              Explorer data is powered by Blockscout, Chain 138 RPC, and the companion MetaMask Snap.
+            </p>
+            <p className="max-w-xl text-xs leading-5 text-gray-500 dark:text-gray-500">
+              Public explorer access may appear under <code>blockscout.defi-oracle.io</code> or <code>explorer.d-bis.org</code>.
+              Both domains belong to the same DBIS / Defi Oracle explorer surface.
             </p>
             <p className="text-xs text-gray-500 dark:text-gray-500">
-              © {year} Solace Bank Group PLC. All rights reserved.
+              © {year} DBIS / Defi Oracle. All rights reserved.
             </p>
           </div>
 
@@ -29,11 +32,12 @@ export default function Footer() {
               Resources
             </div>
             <ul className="space-y-2 text-sm">
-              <li><a className={footerLinkClass} href="/docs.html">Documentation</a></li>
+              <li><Link className={footerLinkClass} href="/search">Search</Link></li>
+              <li><Link className={footerLinkClass} href="/docs">Documentation</Link></li>
               <li><Link className={footerLinkClass} href="/bridge">Bridge Monitoring</Link></li>
               <li><Link className={footerLinkClass} href="/liquidity">Liquidity Access</Link></li>
               <li><Link className={footerLinkClass} href="/routes">Routes</Link></li>
-              <li><Link className={footerLinkClass} href="/more">More Tools</Link></li>
+              <li><Link className={footerLinkClass} href="/operations">Operations Hub</Link></li>
               <li><Link className={footerLinkClass} href="/addresses">Addresses</Link></li>
               <li><Link className={footerLinkClass} href="/watchlist">Watchlist</Link></li>
               <li><a className={footerLinkClass} href="/privacy.html">Privacy Policy</a></li>
@@ -55,8 +59,8 @@ export default function Footer() {
               </p>
               <p>
                 Snap site:{' '}
-                <a className={footerLinkClass} href="https://explorer.d-bis.org/snap/" target="_blank" rel="noopener noreferrer">
-                  explorer.d-bis.org/snap/
+                <a className={footerLinkClass} href="/snap/" target="_blank" rel="noopener noreferrer">
+                  /snap/ on the current explorer domain
                 </a>
               </p>
               <p>

frontend/src/components/common/GruStandardsCard.tsx

@@ -0,0 +1,214 @@
+import { Card } from '@/libs/frontend-ui-primitives'
+import { DetailRow } from '@/components/common/DetailRow'
+import EntityBadge from '@/components/common/EntityBadge'
+import type { GruStandardsProfile } from '@/services/api/gru'
+import Link from 'next/link'
+
+const STANDARD_EXPLANATIONS: Record<string, string> = {
+  'ERC-20': 'Base fungible-token surface for wallets, DEXs, explorers, and accounting systems.',
+  AccessControl: 'Role-governed administration for mint, burn, pause, and supervised operations.',
+  Pausable: 'Emergency intervention surface for freezing activity during incidents or policy actions.',
+  'EIP-712': 'Typed signing domain for structured off-chain approvals and payment flows.',
+  'ERC-2612': 'Permit support for signature-based approvals without a separate on-chain approve transaction.',
+  'ERC-3009': 'Authorization-based transfer model for signed payment flows without prior allowances.',
+  'ERC-5267': 'Discoverable EIP-712 domain introspection so wallets and relayers can inspect the signing domain cleanly.',
+  IeMoneyToken: 'Repo-native eMoney token methodology for issuance and redemption semantics.',
+  DeterministicStorageNamespace: 'Stable namespace for upgrade-aware policy, registry, and audit resolution.',
+  JurisdictionAndSupervisionMetadata: 'Governance, supervisory, disclosure, and reporting metadata required by the GRU operating model.',
+}
+
+function formatDuration(seconds: number | null): string | null {
+  if (seconds == null || !Number.isFinite(seconds) || seconds <= 0) return null
+  const units = [
+    { label: 'day', value: 86400 },
+    { label: 'hour', value: 3600 },
+    { label: 'minute', value: 60 },
+  ]
+  const parts: string[] = []
+  let remaining = Math.floor(seconds)
+  for (const unit of units) {
+    if (remaining >= unit.value) {
+      const count = Math.floor(remaining / unit.value)
+      remaining -= count * unit.value
+      parts.push(`${count} ${unit.label}${count === 1 ? '' : 's'}`)
+    }
+    if (parts.length === 2) break
+  }
+  if (parts.length === 0) {
+    return `${remaining} second${remaining === 1 ? '' : 's'}`
+  }
+  return parts.join(' ')
+}
+
+export default function GruStandardsCard({
+  profile,
+  title = 'GRU v2 Standards',
+}: {
+  profile: GruStandardsProfile
+  title?: string
+}) {
+  const detectedCount = profile.standards.filter((standard) => standard.detected).length
+  const requiredCount = profile.standards.filter((standard) => standard.required).length
+  const missingRequired = profile.standards.filter((standard) => standard.required && !standard.detected)
+  const noticePeriod = formatDuration(profile.minimumUpgradeNoticePeriodSeconds)
+  const recommendations = [
+    missingRequired.length > 0
+      ? `Review the live contract ABI and deployment against the GRU v2 base-token matrix before treating this asset as fully canonical.`
+      : `The live contract exposes the full required GRU v2 base-token surface currently checked by the explorer.`,
+    profile.wrappedTransport
+      ? 'This looks like a wrapped transport asset, so confirm the corresponding bridge lane and reserve-verifier posture in addition to the token ABI.'
+      : 'This looks like a canonical GRU asset, so the next meaningful checks are reserve, governance, and transport activation beyond the token interface itself.',
+    profile.x402Ready
+      ? 'This contract appears ready for x402-style payment flows because the explorer can see the required signature and domain surfaces.'
+      : 'This contract does not currently look x402-ready from the live explorer surface; verify EIP-712, ERC-5267, and permit or authorization flow exposure before using it as a payment rail.',
+    profile.forwardCanonical === true
+      ? 'This version is marked forward-canonical, so it should be treated as the preferred successor surface even if older liquidity or transport versions still coexist.'
+      : profile.forwardCanonical === false
+        ? 'This version is not forward-canonical, which usually means it is legacy, staged, or transport-only relative to the intended primary canonical surface.'
+        : 'Forward-canonical posture is not directly detectable on this contract, so rely on the transport overlay and deployment records before making promotion assumptions.',
+    profile.legacyAliasSupport
+      ? 'Legacy alias support is exposed, which is useful during version cutovers and explorer/search reconciliation.'
+      : 'Legacy alias support is not visible from the current explorer contract surface, so name/version migration may need registry or deployment-record cross-checks.',
+    'Use the repo standards references to reconcile any missing surface with the intended GRU profile and rollout phase.',
+  ]
+
+  return (
+    <Card title={title}>
+      <dl className="space-y-4">
+        <DetailRow label="Profile">
+          <div className="space-y-2">
+            <div className="flex flex-wrap gap-2">
+              <EntityBadge label={profile.profileId} tone="info" className="normal-case tracking-normal" />
+              <EntityBadge
+                label={profile.wrappedTransport ? 'wrapped transport' : 'canonical GRU'}
+                tone={profile.wrappedTransport ? 'warning' : 'success'}
+              />
+            </div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">
+              {detectedCount} of {requiredCount} required base-token standards are currently detectable from the live contract surface.
+            </div>
+          </div>
+        </DetailRow>
+
+        <DetailRow label="Standards" valueClassName="flex flex-wrap gap-2">
+          {profile.standards.map((standard) => (
+            <EntityBadge
+              key={standard.id}
+              label={standard.detected ? `${standard.id} detected` : `${standard.id} missing`}
+              tone={standard.detected ? 'success' : 'warning'}
+              className="normal-case tracking-normal"
+            />
+          ))}
+        </DetailRow>
+
+        <DetailRow label="Transport Posture">
+          <div className="space-y-3">
+            <div className="flex flex-wrap gap-2">
+              <EntityBadge
+                label={profile.x402Ready ? 'x402 ready' : 'x402 not ready'}
+                tone={profile.x402Ready ? 'success' : 'warning'}
+              />
+              <EntityBadge
+                label={
+                  profile.forwardCanonical === true
+                    ? 'forward canonical'
+                    : profile.forwardCanonical === false
+                      ? 'not forward canonical'
+                      : 'forward canonical unknown'
+                }
+                tone={
+                  profile.forwardCanonical === true
+                    ? 'success'
+                    : profile.forwardCanonical === false
+                      ? 'warning'
+                      : 'info'
+                }
+              />
+              <EntityBadge
+                label={profile.legacyAliasSupport ? 'legacy aliases exposed' : 'no alias surface'}
+                tone={profile.legacyAliasSupport ? 'info' : 'warning'}
+              />
+            </div>
+            <div className="grid gap-3 md:grid-cols-2">
+              <div className="rounded-xl border border-gray-200 bg-gray-50 p-3 text-sm dark:border-gray-700 dark:bg-gray-900/40">
+                <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Settlement posture</div>
+                <div className="mt-2 text-gray-900 dark:text-white">
+                  {profile.wrappedTransport
+                    ? 'This contract presents itself like a wrapped public-transport asset instead of the canonical Chain 138 money surface.'
+                    : 'This contract presents itself like the canonical Chain 138 GRU money surface instead of a wrapped transport mirror.'}
+                </div>
+              </div>
+              <div className="rounded-xl border border-gray-200 bg-gray-50 p-3 text-sm dark:border-gray-700 dark:bg-gray-900/40">
+                <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Upgrade notice</div>
+                <div className="mt-2 text-gray-900 dark:text-white">
+                  {noticePeriod
+                    ? `${noticePeriod} (${profile.minimumUpgradeNoticePeriodSeconds} seconds)`
+                    : 'No readable minimum upgrade notice period was detected from the current explorer surface.'}
+                </div>
+              </div>
+              <div className="rounded-xl border border-gray-200 bg-gray-50 p-3 text-sm dark:border-gray-700 dark:bg-gray-900/40">
+                <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Version posture</div>
+                <div className="mt-2 text-gray-900 dark:text-white">
+                  {profile.activeVersion || profile.forwardVersion
+                    ? `Active liquidity/transport version: ${profile.activeVersion || 'unknown'}; preferred forward version: ${profile.forwardVersion || 'unknown'}.`
+                    : 'No explicit active-versus-forward version posture is available from the local GRU catalog yet.'}
+                </div>
+              </div>
+            </div>
+          </div>
+        </DetailRow>
+
+        <DetailRow label="Interpretation">
+          <div className="space-y-3">
+            {profile.standards.map((standard) => (
+              <div key={`${standard.id}-explanation`} className="rounded-xl border border-gray-200 bg-gray-50 p-3 text-sm dark:border-gray-700 dark:bg-gray-900/40">
+                <div className="flex flex-wrap items-center gap-2">
+                  <div className="font-medium text-gray-900 dark:text-white">{standard.id}</div>
+                  <EntityBadge label={standard.detected ? 'detected' : 'missing'} tone={standard.detected ? 'success' : 'warning'} />
+                </div>
+                <div className="mt-2 text-gray-600 dark:text-gray-400">
+                  {STANDARD_EXPLANATIONS[standard.id] || 'GRU-specific standard surfaced by the repo standards profile.'}
+                </div>
+              </div>
+            ))}
+          </div>
+        </DetailRow>
+
+        {profile.metadata.length > 0 ? (
+          <DetailRow label="Metadata">
+            <div className="space-y-3">
+              {profile.metadata.map((field) => (
+                <div key={field.label} className="rounded-xl border border-gray-200 bg-gray-50 p-3 text-sm dark:border-gray-700 dark:bg-gray-900/40">
+                  <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{field.label}</div>
+                  <div className="mt-2 break-all text-gray-900 dark:text-white">{field.value}</div>
+                </div>
+              ))}
+            </div>
+          </DetailRow>
+        ) : null}
+
+        <DetailRow label="References">
+          <div className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
+            <div><Link href="/docs/gru" className="text-primary-600 hover:underline">Explorer GRU guide</Link></div>
+            <div>Canonical profile: <code className="rounded bg-gray-100 px-1.5 py-0.5 text-xs dark:bg-gray-800">{profile.profileId}</code></div>
+            <div>Repo standards matrix: <code className="rounded bg-gray-100 px-1.5 py-0.5 text-xs dark:bg-gray-800">docs/04-configuration/GRU_C_STAR_V2_STANDARDS_MATRIX_AND_IMPLEMENTATION_PLAN.md</code></div>
+            <div>Machine-readable profile: <code className="rounded bg-gray-100 px-1.5 py-0.5 text-xs dark:bg-gray-800">config/gru-standards-profile.json</code></div>
+            <div>Transport overlay: <code className="rounded bg-gray-100 px-1.5 py-0.5 text-xs dark:bg-gray-800">config/gru-transport-active.json</code></div>
+            <div>x402 support note: <code className="rounded bg-gray-100 px-1.5 py-0.5 text-xs dark:bg-gray-800">docs/04-configuration/CHAIN138_X402_TOKEN_SUPPORT.md</code></div>
+            <div>Chain 138 readiness guide: <code className="rounded bg-gray-100 px-1.5 py-0.5 text-xs dark:bg-gray-800">docs/04-configuration/GRU_V2_CHAIN138_READINESS.md</code></div>
+          </div>
+        </DetailRow>
+
+        <DetailRow label="Recommendations">
+          <div className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
+            {recommendations.map((item) => (
+              <div key={item} className="rounded-xl border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-900/40">
+                {item}
+              </div>
+            ))}
+          </div>
+        </DetailRow>
+      </dl>
+    </Card>
+  )
+}

frontend/src/components/common/Navbar.tsx

@@ -1,44 +1,96 @@
 'use client'
 
 import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import { useState } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+import { useEffect, useId, useRef, useState } from 'react'
+import { accessApi, type WalletAccessSession } from '@/services/api/access'
 
-const navLink = 'text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors'
-const navLinkActive = 'text-primary-600 dark:text-primary-400 font-medium'
+const navItemBase =
+  'rounded-xl px-3 py-2 text-[15px] font-medium transition-all duration-150'
+const navLink =
+  `${navItemBase} text-gray-700 dark:text-gray-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-gray-700/70 dark:hover:text-primary-300`
+const navLinkActive =
+  `${navItemBase} bg-primary-50 text-primary-700 shadow-sm ring-1 ring-primary-100 dark:bg-primary-500/10 dark:text-primary-300 dark:ring-primary-500/20`
 
 function NavDropdown({
   label,
   icon,
+  active,
   children,
 }: {
   label: string
   icon: React.ReactNode
+  active?: boolean
   children: React.ReactNode
 }) {
   const [open, setOpen] = useState(false)
+  const wrapperRef = useRef<HTMLDivElement | null>(null)
+  const menuId = useId()
+
+  useEffect(() => {
+    if (!open) return
+
+    const handlePointerDown = (event: MouseEvent | TouchEvent) => {
+      const target = event.target as Node | null
+      if (!target || !wrapperRef.current?.contains(target)) {
+        setOpen(false)
+      }
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    document.addEventListener('touchstart', handlePointerDown)
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown)
+      document.removeEventListener('touchstart', handlePointerDown)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [open])
+
   return (
     <div
+      ref={wrapperRef}
       className="relative"
       onMouseEnter={() => setOpen(true)}
       onMouseLeave={() => setOpen(false)}
+      onBlurCapture={(event) => {
+        const nextTarget = event.relatedTarget as Node | null
+        if (nextTarget && wrapperRef.current?.contains(nextTarget)) {
+          return
+        }
+        setOpen(false)
+      }}
     >
       <button
         type="button"
-        className={`flex items-center gap-1.5 px-3 py-2 rounded-md ${navLink}`}
-        onClick={() => setOpen((v) => !v)}
+        className={`flex items-center gap-1.5 ${active && !open ? navLinkActive : navLink}`}
+        onClick={() => setOpen((value) => !value)}
+        onKeyDown={(event) => {
+          if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault()
+            setOpen(true)
+          }
+        }}
         aria-expanded={open}
         aria-haspopup="true"
+        aria-controls={menuId}
       >
         {icon}
         <span>{label}</span>
-        <svg className={`w-3.5 h-3.5 transition-transform ${open ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden>
+        <svg className={`h-3.5 w-3.5 transition-transform ${open ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden>
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
         </svg>
       </button>
       {open && (
         <ul
-          className="absolute left-0 top-full mt-1 min-w-[200px] rounded-lg bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-50"
+          id={menuId}
+          className="absolute left-0 top-full z-50 mt-1 min-w-[220px] rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800"
           role="menu"
         >
           {children}
@@ -59,7 +111,8 @@ function DropdownItem({
   children: React.ReactNode
   external?: boolean
 }) {
-  const className = `flex items-center gap-2 px-4 py-2.5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-primary-600 dark:hover:text-primary-400 ${navLink}`
+  const className =
+    'flex items-center gap-2 px-4 py-2.5 text-gray-700 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-primary-400'
   if (external) {
     return (
       <li role="none">
@@ -81,30 +134,91 @@ function DropdownItem({
 }
 
 export default function Navbar() {
+  const router = useRouter()
   const pathname = usePathname() ?? ''
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const [exploreOpen, setExploreOpen] = useState(false)
-  const [toolsOpen, setToolsOpen] = useState(false)
+  const [dataOpen, setDataOpen] = useState(false)
+  const [operationsOpen, setOperationsOpen] = useState(false)
+  const [walletSession, setWalletSession] = useState<WalletAccessSession | null>(null)
+  const [connectingWallet, setConnectingWallet] = useState(false)
+
+  const isExploreActive =
+    pathname === '/' ||
+    pathname.startsWith('/blocks') ||
+    pathname.startsWith('/transactions') ||
+    pathname.startsWith('/addresses')
+  const isDataActive =
+    pathname.startsWith('/tokens') ||
+    pathname.startsWith('/pools') ||
+    pathname.startsWith('/analytics') ||
+    pathname.startsWith('/watchlist')
+  const isOperationsActive =
+    pathname.startsWith('/bridge') ||
+    pathname.startsWith('/routes') ||
+    pathname.startsWith('/liquidity') ||
+    pathname.startsWith('/operations') ||
+    pathname.startsWith('/operator') ||
+    pathname.startsWith('/system') ||
+    pathname.startsWith('/weth')
+  const isDocsActive = pathname.startsWith('/docs')
+  const isAccessActive = pathname.startsWith('/access')
+
+  useEffect(() => {
+    const syncWalletSession = () => {
+      setWalletSession(accessApi.getStoredWalletSession())
+    }
+
+    syncWalletSession()
+    window.addEventListener('storage', syncWalletSession)
+    window.addEventListener('explorer-access-session-changed', syncWalletSession)
+    return () => {
+      window.removeEventListener('storage', syncWalletSession)
+      window.removeEventListener('explorer-access-session-changed', syncWalletSession)
+    }
+  }, [])
+
+  const handleAccessClick = async () => {
+    if (walletSession) {
+      router.push('/access')
+      setMobileMenuOpen(false)
+      return
+    }
+
+    try {
+      setConnectingWallet(true)
+      await accessApi.connectWalletSession()
+      router.push('/access')
+      setMobileMenuOpen(false)
+    } catch (error) {
+      console.error('Wallet connect failed', error)
+      router.push('/access')
+      setMobileMenuOpen(false)
+    } finally {
+      setConnectingWallet(false)
+    }
+  }
 
   const toggleMobileMenu = () => {
     setMobileMenuOpen((open) => {
       const nextOpen = !open
       if (!nextOpen) {
         setExploreOpen(false)
-        setToolsOpen(false)
+        setDataOpen(false)
+        setOperationsOpen(false)
       }
       return nextOpen
     })
   }
 
   return (
-    <nav className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
+    <nav className="border-b border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
       <div className="container mx-auto px-4">
         <div className="flex h-14 items-center justify-between sm:h-16">
-          <div className="flex min-w-0 items-center gap-3 md:gap-8">
+          <div className="flex min-w-0 items-center gap-3 md:gap-6">
             <Link
               href="/"
-              className="group inline-flex max-w-[calc(100vw-5rem)] flex-col rounded-xl px-2 py-1.5 text-base font-bold text-primary-600 transition-colors hover:bg-primary-50 dark:text-primary-400 dark:hover:bg-gray-700/70 sm:max-w-none sm:px-3 sm:py-2 sm:text-xl"
+              className="group inline-flex max-w-[calc(100vw-5rem)] flex-col rounded-xl px-2 py-1.5 text-base font-bold text-primary-600 transition-colors hover:bg-primary-50 dark:text-primary-400 dark:hover:bg-gray-700/70 sm:max-w-none sm:px-2.5 sm:py-1.5 sm:text-[1.05rem]"
               onClick={() => setMobileMenuOpen(false)}
               aria-label="Go to explorer home"
             >
@@ -116,58 +230,87 @@ export default function Navbar() {
                 </span>
                 <span className="min-w-0 truncate">
                   <span className="sm:hidden">SolaceScan</span>
-                  <span className="hidden sm:inline">SolaceScanScout</span>
+                  <span className="hidden sm:inline">SolaceScan</span>
                 </span>
               </span>
-              <span className="mt-0.5 hidden text-xs font-normal text-gray-500 transition-colors group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 sm:block">
-                The Defi Oracle Meta Explorer
+              <span className="mt-0.5 hidden text-[0.78rem] font-normal text-gray-500 transition-colors group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 sm:block">
+                Chain 138 Explorer by DBIS
               </span>
             </Link>
-            <div className="hidden md:flex items-center gap-1">
+            <div className="hidden items-center gap-1.5 md:flex">
               <NavDropdown
                 label="Explore"
-                icon={<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0h.5a2.5 2.5 0 002.5-2.5V3.935M12 12a2 2 0 104 0 2 2 0 00-4 0z" /></svg>}
+                active={isExploreActive}
+                icon={<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0h.5a2.5 2.5 0 002.5-2.5V3.935M12 12a2 2 0 104 0 2 2 0 00-4 0z" /></svg>}
               >
                 <DropdownItem href="/" icon={<span className="text-gray-400">⌂</span>}>Home</DropdownItem>
                 <DropdownItem href="/blocks" icon={<span className="text-gray-400">▣</span>}>Blocks</DropdownItem>
                 <DropdownItem href="/transactions" icon={<span className="text-gray-400">⇄</span>}>Transactions</DropdownItem>
                 <DropdownItem href="/addresses" icon={<span className="text-gray-400">⌗</span>}>Addresses</DropdownItem>
               </NavDropdown>
+              <Link
+                href="/search"
+                className={`hidden md:inline-flex items-center ${pathname.startsWith('/search') ? navLinkActive : navLink}`}
+              >
+                Search
+              </Link>
+              <NavDropdown
+                label="Data"
+                active={isDataActive}
+                icon={<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7h16M4 12h16M4 17h10" /></svg>}
+              >
+                <DropdownItem href="/tokens">Tokens</DropdownItem>
+                <DropdownItem href="/analytics">Analytics</DropdownItem>
+                <DropdownItem href="/pools">Pools</DropdownItem>
+                <DropdownItem href="/watchlist">Watchlist</DropdownItem>
+              </NavDropdown>
+              <Link
+                href="/docs"
+                className={`hidden md:inline-flex items-center ${isDocsActive ? navLinkActive : navLink}`}
+              >
+                Docs
+              </Link>
+              <NavDropdown
+                label="Operations"
+                active={isOperationsActive}
+                icon={<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>}
+              >
+                <DropdownItem href="/operations">Operations Hub</DropdownItem>
+                <DropdownItem href="/bridge">Bridge</DropdownItem>
+                <DropdownItem href="/routes">Routes</DropdownItem>
+                <DropdownItem href="/liquidity">Liquidity</DropdownItem>
+                <DropdownItem href="/system">System</DropdownItem>
+                <DropdownItem href="/operator">Operator</DropdownItem>
+                <DropdownItem href="/weth">WETH</DropdownItem>
+                <DropdownItem href="/chain138-command-center.html" external>Command Center</DropdownItem>
+              </NavDropdown>
               <Link
                 href="/wallet"
-                className={`hidden md:inline-flex items-center px-3 py-2 rounded-md ${pathname.startsWith('/wallet') ? navLinkActive : navLink}`}
+                className={`hidden md:inline-flex items-center ${pathname.startsWith('/wallet') ? navLinkActive : navLink}`}
               >
                 Wallet
               </Link>
-              <NavDropdown
-                label="Tools"
-                icon={<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>}
+              <button
+                type="button"
+                onClick={() => void handleAccessClick()}
+                className={`hidden md:inline-flex items-center ${isAccessActive ? navLinkActive : navLink}`}
               >
-                <DropdownItem href="/search">Search</DropdownItem>
-                <DropdownItem href="/tokens">Tokens</DropdownItem>
-                <DropdownItem href="/pools">Pools</DropdownItem>
-                <DropdownItem href="/watchlist">Watchlist</DropdownItem>
-                <DropdownItem href="/wallet">Wallet</DropdownItem>
-                <DropdownItem href="/liquidity">Liquidity</DropdownItem>
-                <DropdownItem href="/bridge">Bridge</DropdownItem>
-                <DropdownItem href="/routes">Routes</DropdownItem>
-                <DropdownItem href="/more">More</DropdownItem>
-                <DropdownItem href="/chain138-command-center.html" external>Command Center</DropdownItem>
-              </NavDropdown>
+                {connectingWallet ? 'Connecting…' : walletSession ? 'Access' : 'Connect Wallet'}
+              </button>
             </div>
           </div>
           <div className="flex items-center md:hidden">
             <button
               type="button"
-              className="p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+              className="rounded-md p-2 text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
               onClick={toggleMobileMenu}
               aria-expanded={mobileMenuOpen}
               aria-label="Toggle menu"
             >
               {mobileMenuOpen ? (
-                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
               ) : (
-                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /></svg>
+                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /></svg>
               )}
             </button>
           </div>
@@ -175,40 +318,62 @@ export default function Navbar() {
         {mobileMenuOpen && (
           <div className="border-t border-gray-200 py-2 pb-3 dark:border-gray-700 md:hidden">
             <div className="flex flex-col gap-1">
-              <Link href="/" className={`px-3 py-2.5 rounded-md ${pathname === '/' ? navLinkActive : navLink}`} onClick={() => setMobileMenuOpen(false)}>Home</Link>
+              <Link href="/" className={pathname === '/' ? navLinkActive : navLink} onClick={() => setMobileMenuOpen(false)}>Home</Link>
+              <Link href="/search" className={pathname.startsWith('/search') ? navLinkActive : navLink} onClick={() => setMobileMenuOpen(false)}>Search</Link>
               <div className="relative">
-                <button type="button" className={`flex items-center justify-between w-full px-3 py-2.5 rounded-md ${navLink}`} onClick={() => setExploreOpen((o) => !o)} aria-expanded={exploreOpen}>
+                <button type="button" className={`flex w-full items-center justify-between ${navLink}`} onClick={() => setExploreOpen((value) => !value)} aria-expanded={exploreOpen}>
                   <span>Explore</span>
-                  <svg className={`w-4 h-4 transition-transform ${exploreOpen ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+                  <svg className={`h-4 w-4 transition-transform ${exploreOpen ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
                 </button>
                 {exploreOpen && (
-                  <ul className="pl-4 mt-1 space-y-0.5">
-                    <li><Link href="/blocks" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Blocks</Link></li>
-                    <li><Link href="/transactions" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Transactions</Link></li>
-                    <li><Link href="/addresses" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Addresses</Link></li>
+                  <ul className="mt-1 space-y-0.5 pl-4">
+                    <li><Link href="/blocks" className={`block rounded-md px-3 py-2 ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Blocks</Link></li>
+                    <li><Link href="/transactions" className={`block rounded-md px-3 py-2 ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Transactions</Link></li>
+                    <li><Link href="/addresses" className={`block rounded-md px-3 py-2 ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Addresses</Link></li>
                   </ul>
                 )}
               </div>
               <div className="relative">
-                <button type="button" className={`flex items-center justify-between w-full px-3 py-2.5 rounded-md ${navLink}`} onClick={() => setToolsOpen((o) => !o)} aria-expanded={toolsOpen}>
-                  <span>Tools</span>
-                  <svg className={`w-4 h-4 transition-transform ${toolsOpen ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+                <button type="button" className={`flex w-full items-center justify-between ${navLink}`} onClick={() => setDataOpen((value) => !value)} aria-expanded={dataOpen}>
+                  <span>Data</span>
+                  <svg className={`h-4 w-4 transition-transform ${dataOpen ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
                 </button>
-                {toolsOpen && (
-                  <ul className="pl-4 mt-1 space-y-0.5">
-                    <li><Link href="/search" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Search</Link></li>
-                    <li><Link href="/tokens" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Tokens</Link></li>
-                    <li><Link href="/pools" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Pools</Link></li>
-                    <li><Link href="/watchlist" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Watchlist</Link></li>
-                    <li><Link href="/wallet" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Wallet</Link></li>
-                    <li><Link href="/liquidity" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Liquidity</Link></li>
-                    <li><Link href="/bridge" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Bridge</Link></li>
-                    <li><Link href="/routes" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Routes</Link></li>
-                    <li><Link href="/more" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>More</Link></li>
-                    <li><a href="/chain138-command-center.html" className={`block px-3 py-2 rounded-md ${navLink}`} target="_blank" rel="noopener noreferrer" onClick={() => setMobileMenuOpen(false)}>Command Center</a></li>
+                {dataOpen && (
+                  <ul className="mt-1 space-y-0.5 pl-4">
+                    <li><Link href="/tokens" className={`block rounded-md px-3 py-2 ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Tokens</Link></li>
+                    <li><Link href="/analytics" className={`block rounded-md px-3 py-2 ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Analytics</Link></li>
+                    <li><Link href="/pools" className={`block rounded-md px-3 py-2 ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Pools</Link></li>
+                    <li><Link href="/watchlist" className={`block rounded-md px-3 py-2 ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Watchlist</Link></li>
                   </ul>
                 )}
               </div>
+              <Link href="/docs" className={isDocsActive ? navLinkActive : navLink} onClick={() => setMobileMenuOpen(false)}>Docs</Link>
+              <div className="relative">
+                <button type="button" className={`flex w-full items-center justify-between ${navLink}`} onClick={() => setOperationsOpen((value) => !value)} aria-expanded={operationsOpen}>
+                  <span>Operations</span>
+                  <svg className={`h-4 w-4 transition-transform ${operationsOpen ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+                </button>
+                {operationsOpen && (
+                  <ul className="mt-1 space-y-0.5 pl-4">
+                    <li><Link href="/operations" className={`block rounded-md px-3 py-2 ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Operations Hub</Link></li>
+                    <li><Link href="/bridge" className={`block rounded-md px-3 py-2 ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Bridge</Link></li>
+                    <li><Link href="/routes" className={`block rounded-md px-3 py-2 ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Routes</Link></li>
+                    <li><Link href="/liquidity" className={`block rounded-md px-3 py-2 ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Liquidity</Link></li>
+                    <li><Link href="/system" className={`block rounded-md px-3 py-2 ${navLink}`} onClick={() => setMobileMenuOpen(false)}>System</Link></li>
+                    <li><Link href="/operator" className={`block rounded-md px-3 py-2 ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Operator</Link></li>
+                    <li><Link href="/weth" className={`block rounded-md px-3 py-2 ${navLink}`} onClick={() => setMobileMenuOpen(false)}>WETH</Link></li>
+                    <li><a href="/chain138-command-center.html" className={`block rounded-md px-3 py-2 ${navLink}`} target="_blank" rel="noopener noreferrer" onClick={() => setMobileMenuOpen(false)}>Command Center</a></li>
+                  </ul>
+                )}
+              </div>
+              <Link href="/wallet" className={pathname.startsWith('/wallet') ? navLinkActive : navLink} onClick={() => setMobileMenuOpen(false)}>Wallet</Link>
+              <button
+                type="button"
+                className={`w-full text-left ${isAccessActive ? navLinkActive : navLink}`}
+                onClick={() => void handleAccessClick()}
+              >
+                {connectingWallet ? 'Connecting wallet…' : walletSession ? 'Access' : 'Connect wallet'}
+              </button>
             </div>
           </div>
         )}

frontend/src/components/common/PageIntro.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link'
+
+export interface PageIntroAction {
+  href: string
+  label: string
+}
+
+export default function PageIntro({
+  eyebrow,
+  title,
+  description,
+  actions = [],
+}: {
+  eyebrow?: string
+  title: string
+  description: string
+  actions?: PageIntroAction[]
+}) {
+  return (
+    <div className="mb-6 rounded-3xl border border-gray-200 bg-white/90 p-5 shadow-sm dark:border-gray-700 dark:bg-gray-800/80 sm:mb-8 sm:p-6">
+      {eyebrow ? (
+        <div className="mb-3 inline-flex rounded-full border border-sky-200 bg-sky-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-sky-700 dark:border-sky-900/60 dark:bg-sky-950/30 dark:text-sky-300">
+          {eyebrow}
+        </div>
+      ) : null}
+      <h1 className="text-3xl font-bold text-gray-900 dark:text-white sm:text-4xl">{title}</h1>
+      <p className="mt-3 max-w-4xl text-sm leading-7 text-gray-600 dark:text-gray-400 sm:text-base">
+        {description}
+      </p>
+      {actions.length > 0 ? (
+        <div className="mt-5 flex flex-wrap gap-3">
+          {actions.map((action) => (
+            <Link
+              key={`${action.href}-${action.label}`}
+              href={action.href}
+              className="rounded-full border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition hover:border-primary-400 hover:text-primary-700 dark:border-gray-600 dark:text-gray-200 dark:hover:text-primary-300"
+            >
+              {action.label}
+            </Link>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}