Add human-readable sector names

client/app/src/components/SectorTitleBanner.tsx

@@ -1,4 +1,4 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import { StarIcon, SwapIcon, UserIcon } from "@phosphor-icons/react"
 import { AnimatePresence, motion } from "motion/react"
@@ -6,6 +6,7 @@
 import { ScrambleText, type ScrambleTextRef } from "@/fx/ScrambleText"
 import useAudioStore from "@/stores/audio"
 import useGameStore from "@/stores/game"
+import { formatSectorLabel } from "@/utils/formatting"
 import { getPortCode } from "@/utils/port"
 import { cn } from "@/utils/tailwind"
 
@@ -51,7 +52,7 @@
   )
 
   const shouldDisplay = sector?.id !== undefined && !hasActiveTask && uiState !== "combat"
-  const sectorText = `SECTOR ${sector?.id ?? "unknown"}`
+  const sectorText = formatSectorLabel(sector).toUpperCase()
 
   // Timer management
   const clearTimers = useCallback(() => {

client/app/src/components/panels/BigMapPanel.tsx

@@ -14,6 +14,7 @@ import SectorMap, { type MapConfig } from "@/components/SectorMap"
 import { NeuroSymbolicsIcon, QuantumFoamIcon, RetroOrganicsIcon } from "@/icons"
 import useGameStore from "@/stores/game"
 import { formatTimeAgoOrDate } from "@/utils/date"
+import { formatSectorLabel } from "@/utils/formatting"
 import { getFetchBounds } from "@/utils/map"
 import { getPortCode } from "@/utils/port"
 import { cn } from "@/utils/tailwind"
@@ -86,7 +87,7 @@ const MapNodeDetails = ({ node }: { node?: MapSectorNode | null }) => {
         className="h-auto w-3 self-stretch text-accent"
       />
       <div className="flex flex-col gap-2 flex-1">
-        <DottedTitle title={`Sector ${node.id.toString()}`} textColor="text-foreground" />
+        <DottedTitle title={formatSectorLabel(node)} textColor="text-foreground" />
         <dl className="flex flex-col gap-2 uppercase text-xxs text-foreground">
           <div className="flex flex-row justify-between gap-2">
             <dt className="font-bold">Region</dt>

client/app/src/components/panels/SectorPanel.tsx

@@ -16,6 +16,7 @@ import { GarrisonPanel } from "@/components/panels/GarrisonPanel"
 import { ShipCatalogue } from "@/components/panels/ShipCatalogue"
 import { SalvageIcon } from "@/icons"
 import useGameStore from "@/stores/game"
+import { formatSectorLabel } from "@/utils/formatting"
 import { getPortCode } from "@/utils/port"
 import { cn } from "@/utils/tailwind"
 
@@ -96,7 +97,7 @@ export const SectorPanel = () => {
           )}
         >
           <CardHeader className="gap-0">
-            <CardTitle>Sector {sector?.id}</CardTitle>
+            <CardTitle>{formatSectorLabel(sector)}</CardTitle>
           </CardHeader>
 
           <CardContent className="flex flex-row gap-ui-sm pr-0">

client/app/src/types/global.d.ts

@@ -124,6 +124,7 @@ declare global {
 
   interface Sector {
     id: number
+    name?: string | null
     adjacent_sectors?: Record<string, AdjacentSectorInfo>
     position: [number, number]
     last_visited?: string
@@ -133,7 +134,6 @@ declare global {
     garrison?: Garrison
     region?: string
     unowned_ships?: ShipUnowned[]
-    last_visited?: string
     salvage?: Salvage[]
     scene_config?: unknown
   }
@@ -218,6 +218,7 @@ declare global {
 
   interface MapSectorNode {
     id: number
+    name?: string | null
     port?: PortBase | null
     lanes: MapLane[]
     source?: "player" | "corp" | "both"

client/app/src/utils/formatting.ts

@@ -14,3 +14,10 @@ export const formatCurrency = (value: number, notation: "compact" | "standard" =
 export const validateName = (name: string) => {
   return /^[a-zA-Z0-9_ ]{3,20}$/.test(name)
 }
+
+export const formatSectorLabel = (
+  sector: { id?: number | null; name?: string | null } | null | undefined
+): string => {
+  if (sector?.id == null) return "Sector unknown"
+  return sector.name ? `${sector.id} - ${sector.name}` : `Sector ${sector.id}`
+}

deployment/supabase/functions/_shared/map.ts

@@ -39,6 +39,7 @@ export interface AdjacentSectorInfo {
 
 export interface SectorSnapshot {
   id: number;
+  name?: string | null;
   region?: string | null;
   adjacent_sectors: Record<string, AdjacentSectorInfo>;
   position: [number, number];
@@ -52,6 +53,7 @@ export interface SectorSnapshot {
 
 export interface LocalMapSector {
   id: number;
+  name?: string | null;
   visited: boolean;
   hops_from_center: number;
   position: [number, number];
@@ -400,10 +402,11 @@ export async function fetchSectorRow(
   position_y: number;
   region?: string | null;
   warps: unknown;
+  name?: string | null;
 } | null> {
   const { data, error } = await supabase
     .from("universe_structure")
-    .select("sector_id, position_x, position_y, region, warps")
+    .select("sector_id, position_x, position_y, region, warps, name")
     .eq("sector_id", sectorId)
     .maybeSingle();
 
@@ -771,6 +774,7 @@ export async function buildSectorSnapshot(
 
   return {
     id: sectorId,
+    name: structureRow.name ?? null,
     region: structureRow.region ?? null,
     adjacent_sectors: adjacentSectors,
     position: [structureRow.position_x ?? 0, structureRow.position_y ?? 0],
@@ -792,7 +796,7 @@ async function fetchUniverseRows(
 ): Promise<
   Map<
     number,
-    { position: [number, number]; region: string | null; warps: WarpEdge[] }
+    { position: [number, number]; region: string | null; warps: WarpEdge[]; name: string | null }
   >
 > {
   if (sectorIds.length === 0) {
@@ -801,20 +805,21 @@ async function fetchUniverseRows(
   const uniqueIds = Array.from(new Set(sectorIds));
   const { data, error } = await supabase
     .from("universe_structure")
-    .select("sector_id, position_x, position_y, region, warps")
+    .select("sector_id, position_x, position_y, region, warps, name")
     .in("sector_id", uniqueIds);
   if (error) {
     throw new Error(`failed to load universe rows: ${error.message}`);
   }
   const map = new Map<
     number,
-    { position: [number, number]; region: string | null; warps: WarpEdge[] }
+    { position: [number, number]; region: string | null; warps: WarpEdge[]; name: string | null }
   >();
   for (const row of data ?? []) {
     map.set(row.sector_id, {
       position: [row.position_x ?? 0, row.position_y ?? 0],
       region: row.region ?? null,
       warps: parseWarpEdges(row.warps),
+      name: (row as { name?: string | null }).name ?? null,
     });
   }
   return map;
@@ -827,7 +832,7 @@ async function fetchUniverseRowsByBounds(
 ): Promise<
   Map<
     number,
-    { position: [number, number]; region: string | null; warps: WarpEdge[] }
+    { position: [number, number]; region: string | null; warps: WarpEdge[]; name: string | null }
   >
 > {
   const padding = Math.ceil(bounds) + 2;
@@ -845,14 +850,15 @@ async function fetchUniverseRowsByBounds(
     position_y: number | null;
     region: string | null;
     warps: unknown;
+    name: string | null;
   }> = [];
   const PAGE_SIZE = 1000;
   let offset = 0;
   // eslint-disable-next-line no-constant-condition
   while (true) {
     const { data, error } = await supabase
       .from("universe_structure")
-      .select("sector_id, position_x, position_y, region, warps")
+      .select("sector_id, position_x, position_y, region, warps, name")
       .gte("position_x", minX)
       .lte("position_x", maxX)
       .gte("position_y", minY)
@@ -865,7 +871,7 @@ async function fetchUniverseRowsByBounds(
     if (!data || data.length === 0) {
       break;
     }
-    allRows.push(...data);
+    allRows.push(...(data as typeof allRows));
     if (data.length < PAGE_SIZE) {
       break;
     }
@@ -878,7 +884,7 @@ async function fetchUniverseRowsByBounds(
 
   const map = new Map<
     number,
-    { position: [number, number]; region: string | null; warps: WarpEdge[] }
+    { position: [number, number]; region: string | null; warps: WarpEdge[]; name: string | null }
   >();
   for (const row of allRows) {
     const position: [number, number] = [
@@ -895,6 +901,7 @@ async function fetchUniverseRowsByBounds(
       position,
       region: row.region ?? null,
       warps: parseWarpEdges(row.warps),
+      name: row.name ?? null,
     });
   }
   return map;
@@ -1271,7 +1278,7 @@ export async function buildLocalMapRegion(
   const adjacencyCache = new Map<number, number[]>();
   const universeRowCache = new Map<
     number,
-    { position: [number, number]; region: string | null; warps: WarpEdge[] }
+    { position: [number, number]; region: string | null; warps: WarpEdge[]; name: string | null }
   >();
 
   // Load all universe adjacencies upfront for pure in-memory BFS
@@ -1523,6 +1530,7 @@ export async function buildLocalMapRegion(
       );
       resultSectors.push({
         id: sectorId,
+        name: universeRow?.name ?? null,
         visited: true,
         hops_from_center: hops,
         position,
@@ -1555,6 +1563,7 @@ export async function buildLocalMapRegion(
       }
       resultSectors.push({
         id: sectorId,
+        name: universeRow?.name ?? null,
         visited: false,
         hops_from_center: hops,
         position,
@@ -1629,6 +1638,7 @@ export async function buildLocalMapRegionByBounds(
       position: centerPosition,
       region: null,
       warps: [],
+      name: null,
     });
   }
 
@@ -1663,14 +1673,15 @@ export async function buildLocalMapRegionByBounds(
   if (missingNeighbors.length > 0) {
     const { data: missingRows, error: missingErr } = await supabase
       .from("universe_structure")
-      .select("sector_id, position_x, position_y, region, warps")
+      .select("sector_id, position_x, position_y, region, warps, name")
       .in("sector_id", missingNeighbors);
     if (!missingErr && missingRows) {
       for (const row of missingRows) {
         universeRowCache.set(row.sector_id, {
           position: [row.position_x ?? 0, row.position_y ?? 0],
           region: row.region ?? null,
           warps: parseWarpEdges(row.warps),
+          name: (row as { name?: string | null }).name ?? null,
         });
       }
     }
@@ -1699,14 +1710,15 @@ export async function buildLocalMapRegionByBounds(
   if (adjacentToHydrate.length > 0) {
     const { data: adjRows, error: adjErr } = await supabase
       .from("universe_structure")
-      .select("sector_id, position_x, position_y, region, warps")
+      .select("sector_id, position_x, position_y, region, warps, name")
       .in("sector_id", adjacentToHydrate);
     if (!adjErr && adjRows) {
       for (const row of adjRows) {
         universeRowCache.set(row.sector_id, {
           position: [row.position_x ?? 0, row.position_y ?? 0],
           region: row.region ?? null,
           warps: parseWarpEdges(row.warps),
+          name: (row as { name?: string | null }).name ?? null,
         });
       }
     }
@@ -1768,6 +1780,7 @@ export async function buildLocalMapRegionByBounds(
       );
       resultSectors.push({
         id: sectorId,
+        name: universeRow?.name ?? null,
         visited: true,
         hops_from_center: hops,
         position,
@@ -1797,6 +1810,7 @@ export async function buildLocalMapRegionByBounds(
       }
       resultSectors.push({
         id: sectorId,
+        name: universeRow?.name ?? null,
         visited: false,
         hops_from_center: hops,
         position,