feat: enhance zoning functionality with surface selection and type badges

Co-authored-by: Copilot <copilot@github.com>

Author: kunifujiwara

app/frontend/src/index.css

@@ -633,6 +633,9 @@ input:focus, select:focus {
 .zone-row.selected { background: rgba(0, 0, 0, 0.06); }
 .zone-row .swatch  { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 14px; border: 1px solid rgba(0,0,0,0.2); cursor: pointer; }
 .zone-row .name    { flex: 1; }
+.zone-row .zone-type-badge { flex: 0 0 auto; min-width: 32px; padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.05); color: #334155; font-size: 0.72rem; font-weight: 700; line-height: 1.45; text-align: center; }
+.zone-row .zone-type-badge.two-d { background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.22); color: #1e3a8a; }
+.zone-row .zone-type-badge.building { background: rgba(5, 150, 105, 0.13); border-color: rgba(5, 150, 105, 0.24); color: #064e3b; }
 .zone-row button   { background: none; border: none; cursor: pointer; padding: 2px 4px; }
 
 .zone-stats-table { margin-top: 12px; font-size: 13px; }

app/frontend/src/tabs/ZoningTab.tsx

@@ -30,9 +30,13 @@ import {
   toggleBulkSelector,
   buildingHasPositiveSelection,
   WallOrientation,
+  resolveZoneGroupForMode,
+  zoneGroupType,
+  zoneTypeShortLabel,
 } from '../types/zones';
 import type { PickResult } from '../three/types';
 import { useSurfaceZoneSelection } from '../hooks/useSurfaceZoneSelection';
+import { getSurfaceZones, shouldEnableZoningSurfaceSelection } from '../three/surfaceSelection';
 
 interface ZoningTabProps {
   hasModel: boolean;
@@ -113,24 +117,6 @@ const ZoningTab: React.FC<ZoningTabProps> = ({ hasModel, figureJson, zones, onZo
 
   const interaction: MapInteraction = shape === 'rect' ? 'draw_rect_3pt' : 'draw_polygon';
 
-  // Render existing zones as paint_zone overlays.
-  const pendingEdits: PendingEdit[] = useMemo(() => {
-    if (!geo) return [];
-    return zones.flatMap((z) => {
-      if (z.type !== 'horizontal') return [];
-      return [{
-        kind: 'paint_zone' as const,
-        cells: polygonToCells(z.ring_lonlat, geo.grid_geom),
-        ring: z.ring_lonlat,
-        selected:
-          z.id === selectedId ||
-          (activeGroupId != null && (z.groupId ?? z.id) === activeGroupId),
-        color: z.color,
-        target: 'evaluation' as const,
-      }];
-    });
-  }, [geo, zones, selectedId, activeGroupId]);
-
   /**
    * Group sibling zones (same `groupId`) together so the zone list shows
    * one row per logical zone. The first member's metadata acts as the
@@ -159,16 +145,37 @@ const ZoningTab: React.FC<ZoningTabProps> = ({ hasModel, figureJson, zones, onZo
     return [...committed, ...drafts];
   }, [committedGroups, draftGroups]);
 
-  // Resolve which group new polygons attach to: explicit `activeGroupId`,
-  // else the most recent group, else "start a new one".
-  const effectiveActiveGroupId =
-    activeGroupId ?? (groups.length > 0 ? groups[groups.length - 1].id : null);
+  const effectiveActiveGroupId = useMemo(
+    () => resolveZoneGroupForMode({ zones, candidates: groups, activeGroupId, zoneType }),
+    [zones, groups, activeGroupId, zoneType],
+  );
+
+  // Render existing zones as paint_zone overlays.
+  const pendingEdits: PendingEdit[] = useMemo(() => {
+    if (!geo) return [];
+    return zones.flatMap((z) => {
+      if (z.type !== 'horizontal') return [];
+      return [{
+        kind: 'paint_zone' as const,
+        cells: polygonToCells(z.ring_lonlat, geo.grid_geom),
+        ring: z.ring_lonlat,
+        selected: zoneType === 'horizontal' && (
+          z.id === selectedId ||
+          (effectiveActiveGroupId != null && (z.groupId ?? z.id) === effectiveActiveGroupId)
+        ),
+        color: z.color,
+        target: 'evaluation' as const,
+      }];
+    });
+  }, [geo, zones, selectedId, effectiveActiveGroupId, zoneType]);
+  const surfaceZoneCount = useMemo(() => getSurfaceZones(zones).length, [zones]);
+  const surfaceSelectionEnabled = shouldEnableZoningSurfaceSelection({ zoneType, surfaceZoneCount });
 
   const { surfaceSelection } = useSurfaceZoneSelection({
     hasModel,
     geometryToken,
     zones,
-    enabled: zoneType === 'building_surface',
+    enabled: surfaceSelectionEnabled,
     displayMode: 'fill',
     activeGroupId: effectiveActiveGroupId,
     requireSurfaceZones: false,
@@ -447,11 +454,13 @@ const ZoningTab: React.FC<ZoningTabProps> = ({ hasModel, figureJson, zones, onZo
           )}
           {groups.map((g) => {
             const isActive = (effectiveActiveGroupId ?? null) === g.id;
+            const groupType = g.draft ? 'horizontal' : zoneGroupType(zones, g.id);
             return (
               <div
                 key={g.id}
                 className={`zone-row${isActive ? ' selected' : ''}`}
                 onClick={() => {
+                  if (groupType) setZoneType(groupType);
                   setActiveGroupId(g.id);
                   setSelectedId(g.members[0]?.id ?? null);
                   setRefiningBuildingId(null);
@@ -495,6 +504,12 @@ const ZoningTab: React.FC<ZoningTabProps> = ({ hasModel, figureJson, zones, onZo
                     )}
                   </span>
                 )}
+                <span
+                  className={`zone-type-badge ${groupType === 'building_surface' ? 'building' : 'two-d'}`}
+                  title={groupType === 'building_surface' ? 'Building surface zone' : '2D area zone'}
+                >
+                  {groupType ? zoneTypeShortLabel(groupType) : 'Mixed'}
+                </span>
                 <button
                   title="Rename"
                   onClick={(e) => {
@@ -654,7 +669,7 @@ const ZoningTab: React.FC<ZoningTabProps> = ({ hasModel, figureJson, zones, onZo
               showZones
               colorOverride={colorOverride}
               onPick={zoneType === 'building_surface' ? handleSurfacePick : undefined}
-              surfaceSelection={zoneType === 'building_surface' ? surfaceSelection : null}
+              surfaceSelection={surfaceSelection}
             />
           ) : (
             <div className="alert alert-info" style={{ marginTop: 0 }}>

app/frontend/src/three/surfaceSelection.test.ts

@@ -9,6 +9,7 @@ import {
   getSurfaceZones,
   isSurfaceFaceSelected,
   shouldFetchSurfaceSelection,
+  shouldEnableZoningSurfaceSelection,
   shouldMountPickableSurface,
   surfaceLoadErrorResult,
   surfaceTriangleCount,
@@ -91,6 +92,12 @@ describe('surface selection payload decisions', () => {
     expect(shouldFetchSurfaceSelection({ hasModel: true, enabled: true, surfaceZoneCount: 0, requireSurfaceZones: true })).toBe(false);
   });
 
+  it('keeps Zoning tab surface highlights enabled outside building-surface edit mode when surface zones exist', () => {
+    expect(shouldEnableZoningSurfaceSelection({ zoneType: 'horizontal', surfaceZoneCount: 1 })).toBe(true);
+    expect(shouldEnableZoningSurfaceSelection({ zoneType: 'building_surface', surfaceZoneCount: 0 })).toBe(true);
+    expect(shouldEnableZoningSurfaceSelection({ zoneType: 'horizontal', surfaceZoneCount: 0 })).toBe(false);
+  });
+
   it('builds no enabled payload when geometry metadata length does not match triangle count', () => {
     const chunk: MeshChunkDto = {
       name: 'surface',

app/frontend/src/three/surfaceSelection.ts

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import type { BuildingSurfacesResponse, MeshChunkDto, SurfaceFaceMetaDto } from '../api';
-import type { BuildingSurfaceZone, SurfaceSelector, WallOrientation, Zone } from '../types/zones';
+import type { BuildingSurfaceZone, SurfaceSelector, WallOrientation, Zone, ZoneType } from '../types/zones';
 import type { SurfaceFaceMeta } from './types';
 
 export type SurfaceSelectionDisplayMode = 'fill' | 'boundary';
@@ -103,6 +103,13 @@ export function shouldFetchSurfaceSelection(options: {
   return options.hasModel && options.enabled && (!options.requireSurfaceZones || options.surfaceZoneCount > 0);
 }
 
+export function shouldEnableZoningSurfaceSelection(options: {
+  zoneType: ZoneType;
+  surfaceZoneCount: number;
+}): boolean {
+  return options.zoneType === 'building_surface' || options.surfaceZoneCount > 0;
+}
+
 export function shouldMountPickableSurface(
   onPick: unknown,
   surfaceSelection: SceneSurfaceSelectionSpec | null | undefined,

app/frontend/src/types/zones.test.ts

@@ -5,8 +5,12 @@ import {
   toggleWholeBuilding,
   toggleBulkSelector,
   buildingHasPositiveSelection,
+  resolveZoneGroupForMode,
+  zoneGroupType,
+  zoneTypeShortLabel,
   type SurfaceSelector,
   type SurfacePickMeta,
+  type Zone,
 } from './zones';
 
 describe('normalizeSurfaceSelectors', () => {
@@ -99,3 +103,64 @@ describe('buildingHasPositiveSelection', () => {
     ).toBe(false);
   });
 });
+
+describe('zone group edit mode compatibility', () => {
+  const zones: Zone[] = [
+    {
+      id: 'h1',
+      name: 'Area',
+      color: '#ff0000',
+      type: 'horizontal',
+      shape: 'rect',
+      ring_lonlat: [[0, 0], [1, 0], [1, 1]],
+      groupId: 'area-group',
+    },
+    {
+      id: 's1',
+      name: 'Surface',
+      color: '#00ff00',
+      type: 'building_surface',
+      selectors: [],
+      groupId: 'surface-group',
+    },
+  ];
+
+  it('reports the committed type for a zone group', () => {
+    expect(zoneGroupType(zones, 'area-group')).toBe('horizontal');
+    expect(zoneGroupType(zones, 'surface-group')).toBe('building_surface');
+  });
+
+  it('does not resolve a building surface group while editing 2D areas', () => {
+    expect(resolveZoneGroupForMode({
+      zones,
+      candidates: [
+        { id: 'area-group', draft: false },
+        { id: 'surface-group', draft: false },
+      ],
+      activeGroupId: 'surface-group',
+      zoneType: 'horizontal',
+    })).toBeNull();
+  });
+
+  it('treats draft groups as 2D area groups only', () => {
+    expect(resolveZoneGroupForMode({
+      zones,
+      candidates: [{ id: 'draft-group', draft: true }],
+      activeGroupId: 'draft-group',
+      zoneType: 'horizontal',
+    })).toBe('draft-group');
+    expect(resolveZoneGroupForMode({
+      zones,
+      candidates: [{ id: 'draft-group', draft: true }],
+      activeGroupId: 'draft-group',
+      zoneType: 'building_surface',
+    })).toBeNull();
+  });
+});
+
+describe('zone type display labels', () => {
+  it('uses compact labels for zone-list badges', () => {
+    expect(zoneTypeShortLabel('horizontal')).toBe('2D');
+    expect(zoneTypeShortLabel('building_surface')).toBe('Building');
+  });
+});

app/frontend/src/types/zones.ts

@@ -110,6 +110,35 @@ export function zoneGroupType(zones: Zone[], groupId: string): ZoneType | null {
   return types.size === 1 ? (members[0].type as ZoneType) : null;
 }
 
+export function zoneTypeShortLabel(zoneType: ZoneType): '2D' | 'Building' {
+  return zoneType === 'horizontal' ? '2D' : 'Building';
+}
+
+export interface ZoneGroupModeCandidate {
+  id: string;
+  draft?: boolean;
+}
+
+export function resolveZoneGroupForMode(options: {
+  zones: Zone[];
+  candidates: ZoneGroupModeCandidate[];
+  activeGroupId: string | null;
+  zoneType: ZoneType;
+}): string | null {
+  const fallbackCandidate = options.candidates.length > 0
+    ? options.candidates[options.candidates.length - 1]
+    : null;
+  const candidateId = options.activeGroupId ?? fallbackCandidate?.id ?? null;
+  if (!candidateId) return null;
+
+  const candidate = options.candidates.find((group) => group.id === candidateId);
+  if (candidate?.draft) {
+    return options.zoneType === 'horizontal' ? candidateId : null;
+  }
+
+  return zoneGroupType(options.zones, candidateId) === options.zoneType ? candidateId : null;
+}
+
 /** Human-readable summary for a building surface zone. */
 export function surfaceZoneSummary(zone: BuildingSurfaceZone): string {
   const buildingIds = [...new Set(zone.selectors.map((s) => s.buildingId))];