More

frontend/src/components/map/Filters.tsx

@@ -119,7 +119,37 @@ export default memo(function Filters({
   onAiFilterSubmit,
 }: FiltersProps) {
   const availableFeatures = features.filter((f) => !enabledFeatures.has(f.name));
-  const enabledFeatureList = features.filter((f) => enabledFeatures.has(f.name));
+  const enabledFeatureList = features.filter(
+    (f) => enabledFeatures.has(f.name) && f.name !== 'Listing status'
+  );
+
+  const listingToggles = useMemo(() => {
+    const val = filters['Listing status'] as string[] | undefined;
+    if (!val) return { historical: true, buy: true, rent: true };
+    return {
+      historical: val.includes('Historical sale'),
+      buy: val.includes('For sale'),
+      rent: val.includes('For rent'),
+    };
+  }, [filters]);
+
+  const handleListingToggle = useCallback(
+    (key: 'historical' | 'buy' | 'rent') => {
+      const next = { ...listingToggles, [key]: !listingToggles[key] };
+      const allOn = next.historical && next.buy && next.rent;
+      const allOff = !next.historical && !next.buy && !next.rent;
+      if (allOn || allOff) {
+        onRemoveFilter('Listing status');
+        return;
+      }
+      const values: string[] = [];
+      if (next.historical) values.push('Historical sale');
+      if (next.buy) values.push('For sale');
+      if (next.rent) values.push('For rent');
+      onFilterChange('Listing status', values);
+    },
+    [listingToggles, onFilterChange, onRemoveFilter]
+  );
 
   const containerRef = useRef<HTMLDivElement>(null);
   const [showPhilosophy, setShowPhilosophy] = useState(false);
@@ -155,7 +185,8 @@ export default memo(function Filters({
     return scales;
   }, [features]);
 
-  const badgeCount = enabledFeatureList.length + activeModes.length;
+  const hasListingFilter = !listingToggles.historical || !listingToggles.buy || !listingToggles.rent;
+  const badgeCount = enabledFeatureList.length + activeModes.length + (hasListingFilter ? 1 : 0);
 
   return (
     <div ref={containerRef} className="flex flex-col bg-white dark:bg-navy-950 overflow-y-auto md:overflow-hidden h-full">
@@ -171,6 +202,17 @@ export default memo(function Filters({
           </button>
         </div>
       </div>
+      <div className="shrink-0 flex items-center gap-2 px-3 py-2 border-b border-warm-200 dark:border-navy-700">
+        <span className="text-xs font-medium text-warm-500 dark:text-warm-400">Show</span>
+        <PillGroup>
+          <PillToggle label="Historical" active={listingToggles.historical}
+            onClick={() => handleListingToggle('historical')} size="xs" />
+          <PillToggle label="Buy" active={listingToggles.buy}
+            onClick={() => handleListingToggle('buy')} size="xs" />
+          <PillToggle label="Rent" active={listingToggles.rent}
+            onClick={() => handleListingToggle('rent')} size="xs" />
+        </PillGroup>
+      </div>
       <div className="shrink-0 md:shrink md:min-h-0 flex flex-col md:basis-[40%]">
         <div className="shrink-0 flex items-center justify-between px-3 py-2 border-b border-warm-200 dark:border-navy-700">
           <div className="flex items-center gap-2">

frontend/src/components/map/LocationSearch.tsx

@@ -118,7 +118,7 @@ export default function LocationSearch({
   }
 
   return (
-    <div ref={containerRef} className="absolute top-3 left-3 z-10 flex flex-col">
+    <div ref={containerRef} data-tutorial="search" className="absolute top-3 left-3 z-10 flex flex-col">
       <div className="flex items-center shadow-lg rounded overflow-hidden bg-white dark:bg-warm-800">
         <SearchIcon className="w-4 h-4 text-warm-400 dark:text-warm-500 ml-3 shrink-0" />
         <PlaceSearchInput

frontend/src/components/map/Map.tsx

@@ -37,7 +37,7 @@ interface MapProps {
   features: FeatureMeta[];
   selectedHexagonId: string | null;
   hoveredHexagonId: string | null;
-  onHexagonClick: (id: string, isPostcode?: boolean) => void;
+  onHexagonClick: (id: string, isPostcode?: boolean, geometry?: PostcodeGeometry) => void;
   onHexagonHover: (h3: string | null, x?: number, y?: number) => void;
   initialViewState?: ViewState;
   theme?: 'light' | 'dark';

frontend/src/components/map/MapPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import type { FeatureMeta, FeatureFilters, POICategoryGroup, ViewState } from '../../types';
+import type { FeatureMeta, FeatureFilters, POICategoryGroup, ViewState, PostcodeGeometry } from '../../types';
 import type { SearchedLocation } from './LocationSearch';
 import type { Page } from '../ui/Header';
 import Map from './Map';
@@ -18,6 +18,9 @@ import { usePaneResize } from '../../hooks/usePaneResize';
 import { useAiFilters } from '../../hooks/useAiFilters';
 import { useAreaSummary } from '../../hooks/useAreaSummary';
 import { useUrlSync } from '../../hooks/useUrlSync';
+import { useTutorial } from '../../hooks/useTutorial';
+import { getTutorialStyles } from '../../lib/tutorial-styles';
+import Joyride from 'react-joyride';
 import {
   useTravelTime,
   TRANSPORT_MODES,
@@ -191,8 +194,8 @@ export default function MapPage({
   // On mobile, open drawer and switch tab when hexagon is clicked
   const { handleHexagonClick } = selection;
   const handleMobileHexagonClick = useCallback(
-    (id: string, isPostcode?: boolean) => {
-      handleHexagonClick(id, isPostcode);
+    (id: string, isPostcode?: boolean, geometry?: PostcodeGeometry) => {
+      handleHexagonClick(id, isPostcode, geometry);
       if (id) {
         setMobileDrawerOpen(true);
       }
@@ -225,6 +228,9 @@ export default function MapPage({
     mapData.resolution,
   ]);
 
+  // Tutorial
+  const tutorial = useTutorial(initialLoading, isMobile);
+
   // AI area summary
   const aiSummary = useAreaSummary({
     stats: selection.areaStats,
@@ -551,8 +557,20 @@ export default function MapPage({
         </div>
       )}
 
+      <Joyride
+        steps={tutorial.steps}
+        run={tutorial.run}
+        continuous
+        showProgress
+        showSkipButton
+        callback={tutorial.handleCallback}
+        styles={getTutorialStyles(theme)}
+        disableScrolling
+      />
+
       {/* Left Pane */}
       <div
+        data-tutorial="filters"
         className="flex bg-white dark:bg-navy-950 shadow-lg overflow-hidden"
         style={{ width: leftPaneWidth }}
       >
@@ -566,7 +584,7 @@ export default function MapPage({
       </div>
 
       {/* Map */}
-      <div className="flex-1 relative">
+      <div data-tutorial="map" className="flex-1 relative">
         <Map
           data={mapData.data}
           postcodeData={mapData.postcodeData}
@@ -599,6 +617,7 @@ export default function MapPage({
         )}
         {/* Floating POI button */}
         <button
+          data-tutorial="poi-button"
           onClick={() => setPoiPaneOpen((p) => !p)}
           className={`absolute bottom-4 right-4 z-10 p-2 rounded-lg shadow-lg bg-white dark:bg-warm-800 ${poiPaneOpen ? 'text-teal-600 dark:text-teal-400' : 'text-warm-500 dark:text-warm-400 hover:text-teal-600 dark:hover:text-teal-400'}`}
         >
@@ -614,6 +633,7 @@ export default function MapPage({
 
       {/* Right Pane */}
       <div
+        data-tutorial="right-pane"
         className="flex bg-white dark:bg-navy-950 shadow-lg z-10"
         style={{ width: rightPaneWidth }}
       >