import { useEffect, useMemo, useState, type CSSProperties, type Dispatch, type SetStateAction } from "react"; import { Ban, Clock3, Heart, Plus, Search, Sparkles } from "lucide-react"; import HexLattice, { type HexNode } from "./HexLattice"; import ResonanceIndicators, { type ResonanceSignal } from "./ResonanceIndicators"; type CurrentWarmth = "hot" | "warm" | "cool"; type ResonancePattern = "hearts" | "stars" | "moons" | "hourglasses" | "balloons"; type InvestigationMode = "quick" | "breakdown" | "profile"; type CurrentPerson = { id: string; name: string; warmth: CurrentWarmth; floatLevel: "Rising" | "Airy" | "Drifting" | "Cloud Walking"; resonanceScore: number; primarySignal: ResonancePattern; featuredItems: string[]; cartSummary: { food: string[]; activities: string[]; habitat: string[]; }; daysInCurrent: number; heartsAvailable: number; patterns: Array<{ key: ResonancePattern; label: string; detail: string; active: boolean; }>; }; export interface CurrentSurfaceSpecProps { title?: string; subtitle?: string; people?: CurrentPerson[]; } const DEFAULT_PEOPLE: CurrentPerson[] = [ { id: "mira", name: "Mira", warmth: "hot", floatLevel: "Cloud Walking", resonanceScore: 88, primarySignal: "hearts", featuredItems: ["Ramen Bar X", "Bike rides after sunset", "Ceramic mugs"], cartSummary: { food: ["Ramen Bar X", "Sour cherries", "Sunday pastries"], activities: ["Bike rides after sunset", "Late-night walks", "Film scores on vinyl"], habitat: ["Plants near every window", "Soft lighting", "A well-used kitchen"], }, daysInCurrent: 11, heartsAvailable: 4, patterns: [ { key: "hearts", label: "Direct overlap", detail: "You both have Ramen Bar X and the same evening ritual.", active: true }, { key: "hourglasses", label: "Values alignment", detail: "Your patterns over the last 90 days moved together.", active: true }, { key: "balloons", label: "Presence + growth", detail: "Both of you have shown up consistently without drop-off.", active: true }, { key: "stars", label: "Category congruence", detail: "Your food and activity categories are both adventurous.", active: true }, ], }, { id: "sol", name: "Sol", warmth: "warm", floatLevel: "Airy", resonanceScore: 69, primarySignal: "stars", featuredItems: ["Jazz vinyl listening", "Indie film nights", "Espresso at 4pm"], cartSummary: { food: ["Espresso at 4pm", "Farmers market tomatoes", "Lemon tart"], activities: ["Jazz vinyl listening", "Indie film nights", "Sketchbook walks"], habitat: ["Record shelves", "Open windows", "One perfect lamp"], }, daysInCurrent: 8, heartsAvailable: 2, patterns: [ { key: "stars", label: "Category congruence", detail: "Creative-night rituals and local food routines line up.", active: true }, { key: "moons", label: "Complementary rhythm", detail: "Your carts fill each other’s dinner-party gap.", active: true }, { key: "balloons", label: "Presence + growth", detail: "A steady daily pulse keeps the resonance warm.", active: true }, { key: "hearts", label: "Direct overlap", detail: "A few exact items match, but not enough for the strongest tier.", active: false }, ], }, { id: "nadia", name: "Nadia", warmth: "cool", floatLevel: "Drifting", resonanceScore: 36, primarySignal: "moons", featuredItems: ["My own cooking", "Secondhand sofa", "Sunday hikes"], cartSummary: { food: ["My own cooking", "Soup in winter", "Good tomatoes"], activities: ["Sunday hikes", "Slow mornings", "Library trips"], habitat: ["Secondhand sofa", "Plants in the kitchen", "Warm blankets"], }, daysInCurrent: 4, heartsAvailable: 1, patterns: [ { key: "moons", label: "Complementary rhythm", detail: "Your cart fills the post-hike meal gap beautifully.", active: true }, { key: "stars", label: "Category congruence", detail: "You both have a grounded homebody orientation.", active: true }, { key: "hourglasses", label: "Values alignment", detail: "There are hints of the same values, but the signal is still thin.", active: false }, ], }, { id: "iris", name: "Iris", warmth: "warm", floatLevel: "Rising", resonanceScore: 74, primarySignal: "hourglasses", featuredItems: ["Farmers market on Saturdays", "Language learning apps", "Composting"], cartSummary: { food: ["Farmers market on Saturdays", "Meal prep Sundays", "Natural wine"], activities: ["Language learning apps", "Volunteering", "Long bike rides"], habitat: ["Composting", "Books everywhere", "Secondhand furniture"], }, daysInCurrent: 17, heartsAvailable: 3, patterns: [ { key: "hourglasses", label: "Values alignment", detail: "The last 90 days show the same worldview and cadence.", active: true }, { key: "stars", label: "Category congruence", detail: "Your habits and activity categories point in the same direction.", active: true }, { key: "balloons", label: "Presence + growth", detail: "You both keep returning without needing a reminder.", active: true }, ], }, { id: "jun", name: "Jun", warmth: "hot", floatLevel: "Cloud Walking", resonanceScore: 92, primarySignal: "balloons", featuredItems: ["Hiking with my dog", "Gallery openings", "Meal-prepped weekdays"], cartSummary: { food: ["Meal-prepped weekdays", "Picnic lunches", "Coffee before dawn"], activities: ["Hiking with my dog", "Gallery openings", "Climbing gym sessions"], habitat: ["A dog bed by the window", "Gear hooks by the door", "Weekend laundry stacks"], }, daysInCurrent: 12, heartsAvailable: 5, patterns: [ { key: "balloons", label: "Presence + growth", detail: "This is a sustained daily pulse. The current has teeth.", active: true }, { key: "hearts", label: "Direct overlap", detail: "There are multiple exact item matches.", active: true }, { key: "moons", label: "Complementary rhythm", detail: "Your carts complete each other’s adventure arc.", active: true }, { key: "hourglasses", label: "Values alignment", detail: "The pattern has held long enough to become worldview.", active: true }, ], }, { id: "wren", name: "Wren", warmth: "cool", floatLevel: "Drifting", resonanceScore: 28, primarySignal: "stars", featuredItems: ["Bookshelf I actually use", "Train rides", "Climbing chalk"], cartSummary: { food: ["Late breakfast", "Seltzer after work", "Trail mix"], activities: ["Train rides", "Climbing chalk", "Weekend errands"], habitat: ["Bookshelf I actually use", "Small apartment plants", "Lamp in every room"], }, daysInCurrent: 2, heartsAvailable: 0, patterns: [ { key: "stars", label: "Category congruence", detail: "A few category-level signals are aligning, but it is still early.", active: true }, { key: "balloons", label: "Presence + growth", detail: "The signal is still forming and needs more showing up.", active: false }, { key: "hearts", label: "Direct overlap", detail: "No exact overlaps yet.", active: false }, ], }, { id: "luca", name: "Luca", warmth: "warm", floatLevel: "Airy", resonanceScore: 61, primarySignal: "moons", featuredItems: ["Late breakfast", "Weekend markets", "A record player"], cartSummary: { food: ["Late breakfast", "Green grapes", "Ginger tea"], activities: ["Weekend markets", "Morning bike rides", "Reading in cafes"], habitat: ["A record player", "Soft rugs", "Windows that open wide"], }, daysInCurrent: 9, heartsAvailable: 2, patterns: [ { key: "moons", label: "Complementary rhythm", detail: "Your timing complements their slower, more spacious rhythm.", active: true }, { key: "stars", label: "Category congruence", detail: "The two carts are moving in the same general direction.", active: true }, { key: "hourglasses", label: "Values alignment", detail: "The pattern is repeating enough to matter.", active: false }, ], }, { id: "aya", name: "Aya", warmth: "hot", floatLevel: "Drifting", resonanceScore: 81, primarySignal: "hourglasses", featuredItems: ["Shared dinners", "Museum afternoons", "Plants near every window"], cartSummary: { food: ["Shared dinners", "Seasonal soups", "Coffee after walks"], activities: ["Museum afternoons", "Quiet concerts", "Long calls with friends"], habitat: ["Plants near every window", "Secondhand art", "Open shelves"], }, daysInCurrent: 21, heartsAvailable: 3, patterns: [ { key: "hourglasses", label: "Values alignment", detail: "The pattern has held long enough to feel like worldview.", active: true }, { key: "hearts", label: "Direct overlap", detail: "Some exact items are shared and still keep appearing.", active: true }, { key: "balloons", label: "Presence + growth", detail: "The field brightens every time they show up.", active: true }, { key: "stars", label: "Category congruence", detail: "The broader categories are resonant as well.", active: true }, ], }, ]; function initials(name: string) { return name .split(/\s+/) .filter(Boolean) .map((part) => part[0]?.toUpperCase()) .slice(0, 2) .join(""); } function warmthMeta(warmth: CurrentWarmth) { if (warmth === "hot") return { label: "Hot", icon: "🔥", color: "#fb7185" }; if (warmth === "warm") return { label: "Warm", icon: "🌡️", color: "#f59e0b" }; return { label: "Cool", icon: "🌿", color: "#94a3b8" }; } function scoreLabel(score: number) { if (score >= 81) return "Resonant"; if (score >= 61) return "Blazing"; if (score >= 41) return "Hot"; if (score >= 21) return "Warm"; return "Cool"; } function formatUntilNextHour(now: number) { const minutes = 60 - new Date(now).getMinutes(); return `${minutes === 60 ? 0 : minutes}m`; } function formatDuration(hours: number) { if (hours < 1) return `${Math.max(1, Math.round(hours * 60))}m`; if (hours < 24) return `${hours.toFixed(1)}h`; return `${Math.round(hours / 24)}d`; } function formatClock(now: number) { return new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", hour12: false, }).format(now); } function hashString(value: string) { let hash = 0; for (let index = 0; index < value.length; index += 1) { hash = (hash * 31 + value.charCodeAt(index)) >>> 0; } return hash; } function patternSignals(person?: CurrentPerson): ResonanceSignal[] { if (!person) return []; return person.patterns.map((pattern, index) => ({ key: pattern.key, score: pattern.active ? Math.max(34, person.resonanceScore - index * 8) : 18, note: pattern.detail, })); } function categoryTone(category: keyof CurrentPerson["cartSummary"]) { if (category === "food") return "#d4a574"; if (category === "activities") return "#8ab6d6"; return "#9ac18a"; } function modeLabel(mode: InvestigationMode) { if (mode === "quick") return "Tap 1 · Quick view"; if (mode === "breakdown") return "Tap 2 · Resonance breakdown"; return "Tap 3 · Full profile"; } function QueueColumn({ title, hint, items, activeId, onSelect, subdued = false, }: { title: string; hint: string; items: Array<{ id: string; name: string; warmth: CurrentWarmth; note: string }>; activeId?: string; onSelect: (id: string) => void; subdued?: boolean; }) { const warmthColor = (warmth: CurrentWarmth) => (warmth === "hot" ? "#fb7185" : warmth === "warm" ? "#f59e0b" : "#94a3b8"); return (
{title}
{items.length} shown
{hint}
{items.length > 0 ? ( items.map((item) => { const color = warmthColor(item.warmth); const active = activeId === item.id; return ( ); }) ) : (
No one is circulating here yet.
)}
); } function InfoRow({ label, value, tone }: { label: string; value: string; tone: string }) { return (
{label}
{value}
); } function DetailCard({ title, text }: { title: string; text: string }) { return (
{title}
{text}
); } function ModeButton({ active, label, locked = false, onClick }: { active: boolean; label: string; locked?: boolean; onClick: () => void }) { return ( ); } function ActionButton({ label, helper, color, active = false, disabled = false, onClick, }: { label: string; helper: string; color: string; active?: boolean; disabled?: boolean; onClick: () => void; }) { return ( ); } export default function CurrentSurfaceSpec({ title = "The Current", subtitle = "The living surface of Cascade — hourly atmosphere, ambient warmth, and the people currently in your social field.", people = DEFAULT_PEOPLE, }: CurrentSurfaceSpecProps) { const [now, setNow] = useState(() => Date.now()); const [selectedId, setSelectedId] = useState(people[0]?.id ?? ""); const [mode, setMode] = useState("quick"); const [watchlistIds, setWatchlistIds] = useState([]); const [packageIds, setPackageIds] = useState([]); const [longingIds, setLongingIds] = useState([]); const [echoIds, setEchoIds] = useState([]); const [dismissedIds, setDismissedIds] = useState([]); useEffect(() => { const interval = setInterval(() => setNow(Date.now()), 60_000); return () => clearInterval(interval); }, []); const hourSeed = Math.floor(now / 3_600_000); const selectedPerson = useMemo(() => people.find((person) => person.id === selectedId) ?? people[0], [people, selectedId]); const rotationRows = useMemo( () => people.map((person, index) => { const seed = hashString(person.id) + hourSeed * 17 + index * 13; const ageMinutes = seed % (8 * 60); const hoursInCurrent = ageMinutes / 60; const hoursRemaining = Math.max(0, 6 - hoursInCurrent); const autoExpired = ageMinutes >= 6 * 60; const dismissed = dismissedIds.includes(person.id); return { ...person, hoursInCurrent, hoursRemaining, autoExpired, dismissed, status: dismissed ? "dismissed" : autoExpired ? "circulating" : "active", slotRank: (person.warmth === "hot" ? 3 : person.warmth === "warm" ? 2 : 1) * 1000 - hoursInCurrent * 100 - person.resonanceScore, }; }), [dismissedIds, hourSeed, people], ); const activePeople = useMemo( () => rotationRows.filter((person) => !person.autoExpired && !person.dismissed).sort((a, b) => b.slotRank - a.slotRank), [rotationRows], ); const circulatingPeople = useMemo( () => rotationRows.filter((person) => person.autoExpired || person.dismissed).sort((a, b) => b.slotRank - a.slotRank), [rotationRows], ); const fieldScore = useMemo(() => { if (activePeople.length === 0) return 0; return Math.round(activePeople.reduce((sum, person) => sum + person.resonanceScore, 0) / activePeople.length); }, [activePeople]); const expiringSoon = useMemo( () => activePeople.filter((person) => person.hoursRemaining > 0 && person.hoursRemaining <= 1).length, [activePeople], ); const fieldLabel = scoreLabel(fieldScore); const nextRefresh = formatUntilNextHour(now); const localClock = formatClock(now); const selectedWarmth = warmthMeta(selectedPerson?.warmth ?? "cool"); const selectedSignals = useMemo(() => (selectedPerson ? patternSignals(selectedPerson) : []), [selectedPerson]); const selectedWatch = Boolean(selectedPerson && watchlistIds.includes(selectedPerson.id)); const selectedPackage = Boolean(selectedPerson && packageIds.includes(selectedPerson.id)); const selectedLonging = Boolean(selectedPerson && longingIds.includes(selectedPerson.id)); const selectedEcho = Boolean(selectedPerson && echoIds.includes(selectedPerson.id)); const selectedDismissed = Boolean(selectedPerson && dismissedIds.includes(selectedPerson.id)); const fieldStatus = `${activePeople.length}/36 active · ${circulatingPeople.length} circulating · ${expiringSoon} expiring soon`; const selectedRow = rotationRows.find((person) => person.id === selectedPerson?.id); const currentNodes = useMemo(() => { const nodes: HexNode[] = [{ id: "center-you", ring: 0, position: 0, label: "CURRENT", type: "you" }]; const positions = [0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 2, 5, 8, 11, 14, 17, 20, 23, 26, 29, 32, 35, 1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34]; activePeople.slice(0, 36).forEach((person, index) => { nodes.push({ id: person.id, ring: 6, position: positions[index] ?? index, label: initials(person.name), type: person.warmth === "hot" ? "resonance-hot" : person.warmth === "warm" ? "resonance-warm" : "resonance-cool", resonanceSignal: person.primarySignal, }); }); return nodes; }, [activePeople]); const toggleId = (setter: Dispatch>, id?: string) => { if (!id) return; setter((current) => (current.includes(id) ? current.filter((value) => value !== id) : [...current, id])); }; const toggleDismiss = () => { if (!selectedPerson) return; const nextDismissed = dismissedIds.includes(selectedPerson.id) ? dismissedIds.filter((id) => id !== selectedPerson.id) : [...dismissedIds, selectedPerson.id]; setDismissedIds(nextDismissed); if (nextDismissed.includes(selectedPerson.id)) { const fallback = people.find((person) => person.id !== selectedPerson.id && !nextDismissed.includes(person.id)); if (fallback) setSelectedId(fallback.id); } }; const theme = { panel: "rgba(21, 22, 28, 0.92)", border: "rgba(255,255,255,0.08)", accent: "#d4a574", muted: "#b6ac9d", background: "linear-gradient(180deg, #09090d 0%, #111117 100%)", }; const rootStyle: CSSProperties = { minHeight: "100%", padding: 24, background: theme.background, color: "#efe7db", fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", }; const cardStyle: CSSProperties = { background: theme.panel, border: `1px solid ${theme.border}`, borderRadius: 22, boxShadow: "0 20px 50px rgba(0,0,0,0.24)", }; const modeDetail = mode === "quick" ? "Quick view shows warmth, float level, and featured items." : mode === "breakdown" ? "Breakdown unlocks the active resonance patterns and recent signal." : "Full profile expands the cart categories and the person's life texture."; return (
Cascade / R6

{title}

{subtitle}

Hourly refresh
{localClock} · {nextRefresh} until turn
Average warmth
= 81 ? "#ffdca2" : "#f5c16c" }}>{fieldLabel}
The field refreshes hourly. Hexes without interaction fall back to circulation after roughly six hours.
The living surface

Who is in your world right now?

setSelectedId(node.id)} />
Rotation queue

Active now and moving back to circulation

Tap a hex to inspect it, or dismiss it from the field.
({ id: person.id, name: person.name, warmth: person.warmth, note: `${formatDuration(person.hoursInCurrent)} in field · ${person.status}`, }))} activeId={selectedPerson?.id} onSelect={(id) => setSelectedId(id)} /> ({ id: person.id, name: person.name, warmth: person.warmth, note: person.dismissed ? "dismissed locally" : `${formatDuration(person.hoursInCurrent)} since entry · hourly exit`, }))} activeId={selectedPerson?.id} onSelect={(id) => setSelectedId(id)} subdued />
); } function LegendChip({ color, icon, label }: { color: string; icon: string; label: string }) { return (
{icon} {label}
); } function StatTile({ label, value, detail }: { label: string; value: string; detail: string }) { return (
{label}
{value}
{detail}
); }