Persistent Left Sidebar and Multi-Page Dashboard Layout

On 2026-06-05, we rebuilt heatmapx.com/dashboard with a full Supabase/Vercel-style persistent sidebar layout (a structural follow-up to the full dashboard redesign shipped the same day).

New Layout

┌──────────────────────────────────────────────────────┐
│ [icon] HeatMapX                  [☀💻🌙]  [JA/EN]    │ ← sticky header
├──────────────┬───────────────────────────────────────┤
│ MENU          │                                       │
│ ▸ ⌂ Home      │   Home                                │
│   ▤ Heatmaps  │                                       │
│               │   Sites / Today's Events / Plan       │
│   ⌘ CLI&Skills│                                       │
│   $ Plan&Billing│  AI Analysis Usage [████░]          │
│   ⚙ Settings  │   PV Usage         [██░░░]            │
│               │                                       │
│ COMING SOON   │   Quick Actions                       │
│   🧪 A/B Tests │   [▤ View Heatmaps] [＋Add]          │
│   ✨ Dynamic UI│                                       │
├──────────────┤                                       │
│   Log out     │                                       │
└──────────────┴───────────────────────────────────────┘

Five Dedicated Pages

Route	Page	Content
/dashboard	⌂ Home	Stats cards (sites / today's events / current plan), usage bars (AI analyses / PV), quick actions
/dashboard/sites	▤ Heatmaps	Tabular list of registered sites. Add new sites from here
/dashboard/cli	⌘ CLI & Skills	Side-by-side installation guides for the terminal CLI and Claude Code Skill
/dashboard/billing	$ Plan & Billing	Current usage summary + full plan comparison table (Free / Pro / Team / Enterprise)
/dashboard/settings	⚙ Settings	Language selector (English / 日本語) — more settings coming soon

What Changed

▤ Supabase-style persistent left sidebar

All five primary navigation items are always visible in the left sidebar, fixed on scroll so you can jump between pages from anywhere.

• Active page highlight: the current page is visually emphasized in the menu
• Icons: each menu item has a visual identifier
• Log out: pinned to the bottom of the sidebar, reducing the risk of accidental clicks

⌂ Home as an at-a-glance overview

/dashboard — the first screen after login — is now designed to give you a complete picture of your account status in a single view.

• Stats cards showing site count, today's event total, and your current plan
• Progress bars for AI analysis usage and monthly PV (amber above 80%, red above 100%)
• Quick actions: "View Heatmaps", "Add Site", "Upgrade", and "CLI Setup"

⌘ CLI & Skills side by side

Both ways to use HeatMapX — the terminal CLI and the Claude Code Skill — are documented on a single page in a two-column layout.

• CLI: step-by-step from npm install -g heatmapx through to heatmapx analyze
• Claude Code Skill: install with /plugin install heatmapx-skill@xtv-llc/heatmapx-cli and call HeatMapX directly from conversation
• Sample commands shown in both English and Japanese

$ Full plan comparison built in

The Plan & Billing page now includes the complete Free / Pro / Team / Enterprise comparison table so you can review options and upgrade without leaving the dashboard.

• Monthly / annual toggle (annual default; annual billing offers a significant discount vs. monthly). For current pricing, see the pricing page
• Your current plan is marked with a green "Current" badge
• Pro is highlighted in orange as the recommended option
• Enterprise links to heatmapx@xtv.co.jp for direct contact

⚙ Language selection in Settings

Language switching was previously only available as a two-state toggle in the header. It is now also exposed as an explicit radio selector in Settings. Changes apply instantly and are persisted in the browser.

Coming Soon

A "Coming Soon" section at the bottom of the sidebar surfaces features landing in upcoming releases:

Feature	Description
🧪 A/B Tests	One-click A/B testing for copy and layout changes based on heatmap insights
✨ Dynamic UI	Personalization engine that adapts the UI based on user attributes and behavior patterns

Other Improvements

• Sticky header: logo, theme switcher, and language toggle remain visible while scrolling
• Sticky sidebar: navigation stays accessible at all times while scrolling page content
• Log out relocated: moved from the top-right header to the bottom of the sidebar (important but low-frequency action pushed down)
• Backward compatible: existing /dashboard bookmarks land on the new Home screen — no redirects needed

Scope of Impact

This release is UI/UX only — tracking logic, data structures, and APIs are unchanged. Existing embedded tracker tags continue to work as-is. No redirects are required for existing /dashboard bookmarks.