Redesign city: individual houses, real streets, async Ollama client

- Replace 2 apartment blocks with 10 individual houses (1-3 agents each)
- Pair agents by relationships: siblings, couples, roommates, families
- Redesign web UI canvas: road grid with asphalt/lane markings/sidewalks,
varied house colors, trees, street lamps, park with pond and benches
- Convert OllamaClient from sync httpx.Client to async httpx.AsyncClient
to prevent blocking the event loop during LLM inference
- Enable Ollama native JSON mode (format:"json") in complete_json
- Update tests for new 20-location city layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

config/city.yaml

@@ -1,91 +1,157 @@
 name: Soci City
 
 locations:
-  # --- Residential ---
-  - id: home_north
-    name: Northside Apartments
+  # ===================
+  # RESIDENTIAL — 10 individual houses
+  # ===================
+  - id: house_elena
+    name: "Elena & Lila's Apartment"
     zone: residential
-    description: A modern apartment complex with balconies overlooking the park. Home to several young professionals and families.
-    capacity: 10
-    connected_to: [park, cafe, grocery, street_north]
+    description: A bright second-floor apartment with art on every wall and the smell of oil paint and coffee.
+    capacity: 3
+    connected_to: [street_north, park, cafe]
 
-  - id: home_south
-    name: Southside Houses
+  - id: house_marcus
+    name: "Marcus & Zoe's Place"
     zone: residential
-    description: A quiet street of cozy row houses with small gardens. A mix of longtime residents and newcomers.
-    capacity: 10
-    connected_to: [bar, gym, library, street_south]
+    description: A tidy apartment with workout equipment in the living room and Zoe's college textbooks stacked everywhere.
+    capacity: 3
+    connected_to: [street_north, park, gym]
 
-  # --- Commercial ---
+  - id: house_helen
+    name: "Helen & Alice's Cottage"
+    zone: residential
+    description: A warm cottage with a flower garden, bookshelves, and the aroma of freshly baked cookies.
+    capacity: 3
+    connected_to: [street_north, cafe, library]
+
+  - id: house_diana
+    name: "Diana & Marco's House"
+    zone: residential
+    description: A practical family home above the grocery store. Marco's room is covered in game posters.
+    capacity: 3
+    connected_to: [street_north, grocery, cafe]
+
+  - id: house_kai
+    name: "Kai's Studio"
+    zone: residential
+    description: A small studio apartment crammed with musical instruments, vinyl records, and empty coffee cups.
+    capacity: 2
+    connected_to: [street_north, cafe, park]
+
+  - id: house_priya
+    name: "Priya & Nina's Flat"
+    zone: residential
+    description: A modern flat kept immaculately clean. Family photos on one side, property listings on the other.
+    capacity: 3
+    connected_to: [street_north, office, park]
+
+  - id: house_james
+    name: "James & Theo's House"
+    zone: residential
+    description: A worn but comfortable house with a porch. Tools in the garage, beer in the fridge.
+    capacity: 3
+    connected_to: [street_south, bar, gym]
+
+  - id: house_rosa
+    name: "Rosa & Omar's Home"
+    zone: residential
+    description: A cozy home that always smells of cooking. Spices from two continents line the kitchen shelves.
+    capacity: 3
+    connected_to: [street_south, restaurant, grocery]
+
+  - id: house_yuki
+    name: "Yuki & Devon's Apartment"
+    zone: residential
+    description: A minimalist apartment with a meditation corner on one side and newspaper clippings on the other.
+    capacity: 3
+    connected_to: [street_south, gym, library]
+
+  - id: house_frank
+    name: "Frank, George & Sam's Row House"
+    zone: residential
+    description: A row of three connected units on the quiet end of the south side. Frank's garage is always open.
+    capacity: 4
+    connected_to: [street_south, bar, library]
+
+  # ===================
+  # COMMERCIAL
+  # ===================
   - id: cafe
     name: The Daily Grind
     zone: commercial
     description: A warm, bustling cafe with mismatched furniture and the aroma of fresh coffee. The local gossip hub.
     capacity: 15
-    connected_to: [home_north, park, office, street_north]
+    connected_to: [house_elena, house_helen, house_diana, house_kai, street_north, office]
 
   - id: grocery
     name: Green Basket Market
     zone: commercial
     description: A neighborhood grocery store with fresh produce and a friendly owner who knows everyone by name.
     capacity: 12
-    connected_to: [home_north, street_north, street_south]
+    connected_to: [house_diana, house_rosa, street_north, street_south]
 
   - id: bar
     name: The Rusty Anchor
     zone: commercial
     description: A dimly lit bar with a jukebox, pool table, and regulars who've been coming for years. Lively at night.
     capacity: 15
-    connected_to: [home_south, restaurant, street_south]
+    connected_to: [house_james, house_frank, restaurant, street_south]
 
   - id: restaurant
     name: Mama Rosa's Kitchen
     zone: commercial
     description: A family-run Italian restaurant with checkered tablecloths and the best pasta in town.
     capacity: 12
-    connected_to: [bar, office, street_south, street_north]
+    connected_to: [house_rosa, bar, office, street_south]
 
-  # --- Work ---
+  # ===================
+  # WORK
+  # ===================
   - id: office
     name: The Hive Coworking
     zone: work
     description: An open-plan coworking space with standing desks, meeting rooms, and a perpetually broken printer.
     capacity: 20
-    connected_to: [cafe, restaurant, street_north]
+    connected_to: [house_priya, cafe, restaurant, street_north]
 
-  # --- Public ---
+  # ===================
+  # PUBLIC
+  # ===================
   - id: park
     name: Willow Park
     zone: public
     description: A green park with old willow trees, a pond, benches, and a small playground. Popular for morning jogs and evening walks.
     capacity: 30
-    connected_to: [home_north, cafe, gym, library, street_north]
+    connected_to: [house_elena, house_marcus, house_kai, house_priya, gym, library, street_north]
 
   - id: gym
     name: Iron & Grit Gym
     zone: public
-    description: A no-nonsense gym with free weights, treadmills, and a boxing ring in the back. Smells like determination.
+    description: A no-nonsense gym with free weights, treadmills, and a boxing ring in the back.
     capacity: 12
-    connected_to: [home_south, park, street_south]
+    connected_to: [house_marcus, house_james, house_yuki, park, street_south]
 
   - id: library
     name: Soci Public Library
     zone: public
     description: A quiet library with tall shelves, reading nooks, and a community board. Hosts book clubs and events.
     capacity: 15
-    connected_to: [home_south, park, street_south]
+    connected_to: [house_helen, house_yuki, house_frank, park, street_south]
 
-  # --- Connectors ---
+  # ===================
+  # STREETS — connectors
+  # ===================
   - id: street_north
     name: North Main Street
     zone: public
     description: The main street running through the northern part of town. Shops, cafes, and foot traffic.
     capacity: 40
-    connected_to: [home_north, cafe, grocery, office, park, street_south]
+    connected_to: [house_elena, house_marcus, house_helen, house_diana, house_kai, house_priya, cafe, grocery, office, park, street_south]
 
   - id: street_south
     name: South Main Street
     zone: public
     description: The southern stretch of main street. More residential, with the bar and gym nearby.
     capacity: 40
-    connected_to: [home_south, bar, grocery, gym, library, restaurant, street_north]
+    connected_to: [house_james, house_rosa, house_yuki, house_frank, bar, grocery, gym, library, restaurant, street_north]

config/personas.yaml

@@ -1,5 +1,5 @@
 personas:
-  # --- NORTHSIDE RESIDENTS ---
+  # ===== HOUSE 1: Elena & Lila (artist crush, creative duo) =====
   - id: elena
     name: Elena Vasquez
     age: 34
@@ -13,17 +13,44 @@ personas:
     background: >-
       Elena moved to Soci City two years ago after a burnout at a big tech company.
       She now freelances and values work-life balance. She grew up in a large family
-      and misses the closeness but enjoys her independence.
+      and misses the closeness but enjoys her independence. She shares an apartment
+      with Lila, her artist roommate.
     values: [creativity, independence, authenticity]
     quirks:
       - talks to herself while debugging
       - always orders the same coffee (oat milk latte)
       - sketches in a notebook when thinking
     communication_style: thoughtful and slightly nerdy, uses analogies
-    home_location: home_north
+    home_location: house_elena
     work_location: office
     llm_temperature: 0.7
 
+  - id: lila
+    name: Lila Santos
+    age: 33
+    gender: female
+    occupation: artist and part-time art teacher
+    openness: 10
+    conscientiousness: 3
+    extraversion: 6
+    agreeableness: 7
+    neuroticism: 7
+    background: >-
+      Lila is a passionate but struggling artist. She teaches art classes at the
+      library and sells paintings at the park on weekends. She's emotionally
+      volatile — ecstatic when inspired, devastated when blocked. She shares an
+      apartment with Elena and has a secret crush on her.
+    values: [beauty, emotion, authenticity]
+    quirks:
+      - paint under her fingernails always
+      - stares at things intensely (she's composing)
+      - cries at sunsets
+    communication_style: poetic and emotional, speaks in images, alternates between passionate and melancholic
+    home_location: house_elena
+    work_location: library
+    llm_temperature: 0.9
+
+  # ===== HOUSE 2: Marcus & Zoe (siblings) =====
   - id: marcus
     name: Marcus Chen
     age: 28
@@ -38,16 +65,42 @@ personas:
       Marcus is a former college athlete who turned his passion into a career.
       He's the guy who knows everyone and remembers their names. He volunteers
       at the community center on weekends and dreams of opening his own gym.
+      His sister Zoe is staying with him this semester.
     values: [health, community, discipline]
     quirks:
       - gives unsolicited fitness advice
       - always has a protein shake
       - high-fives people he knows
     communication_style: enthusiastic and motivational, uses sports metaphors
-    home_location: home_north
+    home_location: house_marcus
     work_location: gym
     llm_temperature: 0.8
 
+  - id: zoe
+    name: Zoe Chen-Williams
+    age: 19
+    gender: female
+    occupation: college student (home for the semester)
+    openness: 8
+    conscientiousness: 4
+    extraversion: 8
+    agreeableness: 6
+    neuroticism: 7
+    background: >-
+      Zoe is Marcus's younger sister, home from college for the semester after a
+      rough breakup. She's figuring out what she wants from life. She's passionate
+      about social justice but can be self-righteous. She idolizes her brother.
+    values: [equality, adventure, self-discovery]
+    quirks:
+      - always on her phone
+      - starts sentences with "literally"
+      - changes opinions quickly
+    communication_style: energetic and opinionated, uses Gen-Z slang, dramatic about small things
+    home_location: house_marcus
+    work_location: library
+    llm_temperature: 0.9
+
+  # ===== HOUSE 3: Helen & Alice (best friends, daily tea) =====
   - id: helen
     name: Helen Park
     age: 67
@@ -62,16 +115,93 @@ personas:
       Helen taught high school English for 35 years and retired last spring.
       She's adjusting to the slower pace. Her husband passed three years ago,
       and she fills her days with reading, gardening, and volunteering at the library.
+      She shares her cottage with her closest friend Alice.
     values: [education, kindness, tradition]
     quirks:
       - corrects grammar gently
       - always carries a book
       - bakes cookies for neighbors
     communication_style: warm and maternal, quotes literature
-    home_location: home_north
+    home_location: house_helen
     work_location: library
     llm_temperature: 0.6
 
+  - id: alice
+    name: Alice Fontaine
+    age: 58
+    gender: female
+    occupation: retired accountant, amateur baker
+    openness: 5
+    conscientiousness: 8
+    extraversion: 6
+    agreeableness: 8
+    neuroticism: 3
+    background: >-
+      Alice retired early and now spends her time perfecting baking recipes.
+      She dreams of opening a small bakery. She lives with Helen and
+      they have tea together every afternoon. She's steady, reliable, and
+      the person everyone calls in a crisis.
+    values: [friendship, reliability, craft]
+    quirks:
+      - always brings baked goods everywhere
+      - keeps a mental spreadsheet of everyone's dietary needs
+      - hums while baking
+    communication_style: steady and cheerful, uses baking analogies, good at calming people down
+    home_location: house_helen
+    work_location: ""
+    llm_temperature: 0.6
+
+  # ===== HOUSE 4: Diana & Marco (mother and son) =====
+  - id: diana
+    name: Diana Novak
+    age: 41
+    gender: female
+    occupation: small business owner (grocery store)
+    openness: 4
+    conscientiousness: 9
+    extraversion: 5
+    agreeableness: 6
+    neuroticism: 7
+    background: >-
+      Diana took over Green Basket Market from her father five years ago.
+      She works long hours and worries about competition from big chains.
+      She's a single mother with a teenage son Marco and is fiercely protective of her store.
+    values: [family, hard work, loyalty]
+    quirks:
+      - rearranges shelves when stressed
+      - knows the price of everything
+      - suspicious of strangers at first
+    communication_style: practical and direct, occasionally sharp under stress
+    home_location: house_diana
+    work_location: grocery
+    llm_temperature: 0.5
+
+  - id: marco
+    name: Marco Delgado
+    age: 16
+    gender: male
+    occupation: high school student (Diana's son)
+    openness: 7
+    conscientiousness: 4
+    extraversion: 6
+    agreeableness: 5
+    neuroticism: 6
+    background: >-
+      Marco is Diana's teenage son who helps at the grocery store after school.
+      He's embarrassed by his mom but loves her fiercely. He wants to be a
+      game designer and spends his free time at the library or park. He
+      looks up to Kai and thinks Marcus is cool.
+    values: [freedom, creativity, loyalty]
+    quirks:
+      - always has earbuds in
+      - doodles game characters
+      - eye-rolls at authority
+    communication_style: teenager — monosyllabic with adults, animated with peers, uses gaming lingo
+    home_location: house_diana
+    work_location: grocery
+    llm_temperature: 0.8
+
+  # ===== HOUSE 5: Kai (solo musician studio) =====
   - id: kai
     name: Kai Okonkwo
     age: 22
@@ -86,41 +216,69 @@ personas:
       Kai dropped out of college to pursue music. They work at The Daily Grind
       to pay rent and play gigs at the bar on weekends. Their parents disapprove,
       which is a constant source of stress. They're talented but undisciplined.
+      They live alone in a tiny studio apartment.
     values: [self-expression, freedom, authenticity]
     quirks:
       - hums while making coffee
       - wears headphones around their neck at all times
       - changes hair color monthly
     communication_style: casual and witty, uses slang, sometimes sarcastic
-    home_location: home_north
+    home_location: house_kai
     work_location: cafe
     llm_temperature: 0.9
 
-  - id: diana
-    name: Diana Novak
-    age: 41
+  # ===== HOUSE 6: Priya & Nina (modern professionals) =====
+  - id: priya
+    name: Priya Sharma
+    age: 38
     gender: female
-    occupation: small business owner (grocery store)
-    openness: 4
+    occupation: doctor (works at a clinic outside the city, spends free time locally)
+    openness: 7
     conscientiousness: 9
     extraversion: 5
-    agreeableness: 6
-    neuroticism: 7
+    agreeableness: 8
+    neuroticism: 6
     background: >-
-      Diana took over Green Basket Market from her father five years ago.
-      She works long hours and worries about competition from big chains.
-      She's a single mother with a teenage son and is fiercely protective of her store.
-    values: [family, hard work, loyalty]
+      Priya is an overworked doctor who moved here for the quiet neighborhood.
+      She feels guilty about not spending enough time with her two young kids.
+      She's kind but stretched thin and sometimes snappy when exhausted.
+      She shares a flat with Nina.
+    values: [compassion, duty, family]
     quirks:
-      - rearranges shelves when stressed
-      - knows the price of everything
-      - suspicious of strangers at first
-    communication_style: practical and direct, occasionally sharp under stress
-    home_location: home_north
-    work_location: grocery
-    llm_temperature: 0.5
+      - diagnoses people's ailments unsolicited
+      - always looks slightly tired
+      - carries hand sanitizer everywhere
+    communication_style: precise and caring, clinical when stressed, warm when relaxed
+    home_location: house_priya
+    work_location: office
+    llm_temperature: 0.6
 
-  # --- SOUTHSIDE RESIDENTS ---
+  - id: nina
+    name: Nina Volkov
+    age: 29
+    gender: female
+    occupation: real estate agent
+    openness: 5
+    conscientiousness: 8
+    extraversion: 9
+    agreeableness: 4
+    neuroticism: 5
+    background: >-
+      Nina is ambitious and sharp. She moved to Soci City to scout development
+      opportunities. Some residents distrust her motives — is she here to
+      gentrify? She's not evil, just driven. She genuinely likes the community
+      but struggles to show it past her professional veneer.
+    values: [ambition, success, efficiency]
+    quirks:
+      - always in business casual
+      - takes phone calls during conversations
+      - knows property values of every building
+    communication_style: polished and assertive, networking mode, occasionally lets guard down
+    home_location: house_priya
+    work_location: office
+    llm_temperature: 0.6
+
+  # ===== HOUSE 7: James & Theo (bar buddies, rough divorces) =====
   - id: james
     name: James "Jimmy" O'Brien
     age: 55
@@ -135,88 +293,17 @@ personas:
       Jimmy has run The Rusty Anchor for 20 years. He's seen everything and heard
       every story. He's a born storyteller who treats regulars like family. He went
       through a rough divorce ten years ago but has found peace in his work.
+      He shares a house with Theo.
     values: [community, honesty, loyalty]
     quirks:
       - polishes glasses when listening
       - gives nicknames to everyone
       - tells the same three jokes
     communication_style: folksy and warm, good listener, drops wisdom casually
-    home_location: home_south
+    home_location: house_james
     work_location: bar
     llm_temperature: 0.7
 
-  - id: rosa
-    name: Rosa Martelli
-    age: 62
-    gender: female
-    occupation: restaurant owner and chef
-    openness: 6
-    conscientiousness: 9
-    extraversion: 7
-    agreeableness: 8
-    neuroticism: 5
-    background: >-
-      Rosa opened Mama Rosa's Kitchen 25 years ago with recipes from her nonna.
-      She's the heart of the community and feeds people even when they can't pay.
-      Her children have moved away, which makes her sad, but the restaurant is her life.
-    values: [generosity, tradition, family]
-    quirks:
-      - feeds everyone who looks hungry
-      - speaks Italian when emotional
-      - pinches cheeks
-    communication_style: expressive and loving, uses food metaphors, dramatic
-    home_location: home_south
-    work_location: restaurant
-    llm_temperature: 0.7
-
-  - id: devon
-    name: Devon Reeves
-    age: 30
-    gender: male
-    occupation: freelance journalist
-    openness: 9
-    conscientiousness: 5
-    extraversion: 6
-    agreeableness: 4
-    neuroticism: 6
-    background: >-
-      Devon is an investigative journalist who moved to Soci City following a lead
-      that went nowhere. He stayed because he likes the community. He's always
-      looking for the next story and can be pushy. He has trust issues from his work.
-    values: [truth, justice, curiosity]
-    quirks:
-      - takes notes on everything
-      - asks too many questions
-      - always sits facing the door
-    communication_style: probing and articulate, sometimes intense, asks follow-up questions
-    home_location: home_south
-    work_location: cafe
-    llm_temperature: 0.8
-
-  - id: yuki
-    name: Yuki Tanaka
-    age: 26
-    gender: female
-    occupation: yoga instructor and massage therapist
-    openness: 8
-    conscientiousness: 6
-    extraversion: 5
-    agreeableness: 9
-    neuroticism: 3
-    background: >-
-      Yuki moved from Tokyo two years ago seeking a quieter life. She teaches yoga
-      at the gym and does private massage sessions. She's deeply empathetic and
-      people naturally confide in her. She struggles with feeling like an outsider.
-    values: [harmony, mindfulness, connection]
-    quirks:
-      - meditates in public spaces
-      - speaks softly
-      - offers breathing exercises to stressed people
-    communication_style: gentle and calming, uses nature imagery, occasionally profound
-    home_location: home_south
-    work_location: gym
-    llm_temperature: 0.6
-
   - id: theo
     name: Theo Blackwood
     age: 45
@@ -230,41 +317,43 @@ personas:
     background: >-
       Theo is a quiet, reliable man who builds things with his hands. He's lived in
       Soci City his whole life. After his wife left, he threw himself into work and
-      his routine. He's lonely but won't admit it. He's a regular at Jimmy's bar.
+      his routine. He's lonely but won't admit it. He shares a house with Jimmy
+      and is a regular at his bar.
     values: [reliability, self-reliance, simplicity]
     quirks:
       - fixes things without being asked
       - uncomfortable with emotional conversations
       - always has calloused hands
     communication_style: few words, gruff but not unkind, says more with actions than words
-    home_location: home_south
+    home_location: house_james
     work_location: office
     llm_temperature: 0.4
 
-  # --- ADDITIONAL DIVERSE RESIDENTS ---
-  - id: priya
-    name: Priya Sharma
-    age: 38
+  # ===== HOUSE 8: Rosa & Omar (food family) =====
+  - id: rosa
+    name: Rosa Martelli
+    age: 62
     gender: female
-    occupation: doctor (works at a clinic outside the city, spends free time locally)
-    openness: 7
+    occupation: restaurant owner and chef
+    openness: 6
     conscientiousness: 9
-    extraversion: 5
+    extraversion: 7
     agreeableness: 8
-    neuroticism: 6
+    neuroticism: 5
     background: >-
-      Priya is an overworked doctor who moved here for the quiet neighborhood.
-      She feels guilty about not spending enough time with her two young kids.
-      She's kind but stretched thin and sometimes snappy when exhausted.
-    values: [compassion, duty, family]
+      Rosa opened Mama Rosa's Kitchen 25 years ago with recipes from her nonna.
+      She's the heart of the community and feeds people even when they can't pay.
+      Her children have moved away, which makes her sad, but the restaurant is her life.
+      She lives with Omar, who helps in her kitchen.
+    values: [generosity, tradition, family]
     quirks:
-      - diagnoses people's ailments unsolicited
-      - always looks slightly tired
-      - carries hand sanitizer everywhere
-    communication_style: precise and caring, clinical when stressed, warm when relaxed
-    home_location: home_north
-    work_location: office
-    llm_temperature: 0.6
+      - feeds everyone who looks hungry
+      - speaks Italian when emotional
+      - pinches cheeks
+    communication_style: expressive and loving, uses food metaphors, dramatic
+    home_location: house_rosa
+    work_location: restaurant
+    llm_temperature: 0.7
 
   - id: omar
     name: Omar Hassan
@@ -280,40 +369,68 @@ personas:
       Omar immigrated fifteen years ago and built a life from nothing. He drives
       a taxi during the day and sometimes helps Rosa in the kitchen. He's philosophical
       and loves debating politics at the bar. He sends money to family back home.
+      He lives with Rosa and they share cooking duties.
     values: [hard work, family, justice]
     quirks:
       - knows every shortcut in the city
       - quotes proverbs from his homeland
       - cooks for friends without warning
     communication_style: warm and philosophical, uses proverbs, debates passionately but respectfully
-    home_location: home_south
+    home_location: house_rosa
     work_location: restaurant
     llm_temperature: 0.7
 
-  - id: zoe
-    name: Zoe Chen-Williams
-    age: 19
+  # ===== HOUSE 9: Yuki & Devon (young south-siders) =====
+  - id: yuki
+    name: Yuki Tanaka
+    age: 26
     gender: female
-    occupation: college student (home for the semester)
+    occupation: yoga instructor and massage therapist
     openness: 8
-    conscientiousness: 4
-    extraversion: 8
-    agreeableness: 6
-    neuroticism: 7
+    conscientiousness: 6
+    extraversion: 5
+    agreeableness: 9
+    neuroticism: 3
     background: >-
-      Zoe is Marcus's younger sister, home from college for the semester after a
-      rough breakup. She's figuring out what she wants from life. She's passionate
-      about social justice but can be self-righteous. She idolizes her brother.
-    values: [equality, adventure, self-discovery]
+      Yuki moved from Tokyo two years ago seeking a quieter life. She teaches yoga
+      at the gym and does private massage sessions. She's deeply empathetic and
+      people naturally confide in her. She shares an apartment with Devon.
+    values: [harmony, mindfulness, connection]
     quirks:
-      - always on her phone
-      - starts sentences with "literally"
-      - changes opinions quickly
-    communication_style: energetic and opinionated, uses Gen-Z slang, dramatic about small things
-    home_location: home_north
-    work_location: library
-    llm_temperature: 0.9
+      - meditates in public spaces
+      - speaks softly
+      - offers breathing exercises to stressed people
+    communication_style: gentle and calming, uses nature imagery, occasionally profound
+    home_location: house_yuki
+    work_location: gym
+    llm_temperature: 0.6
 
+  - id: devon
+    name: Devon Reeves
+    age: 30
+    gender: male
+    occupation: freelance journalist
+    openness: 9
+    conscientiousness: 5
+    extraversion: 6
+    agreeableness: 4
+    neuroticism: 6
+    background: >-
+      Devon is an investigative journalist who moved to Soci City following a lead
+      that went nowhere. He stayed because he likes the community. He's always
+      looking for the next story and can be pushy. He has trust issues from his work.
+      He shares an apartment with Yuki.
+    values: [truth, justice, curiosity]
+    quirks:
+      - takes notes on everything
+      - asks too many questions
+      - always sits facing the door
+    communication_style: probing and articulate, sometimes intense, asks follow-up questions
+    home_location: house_yuki
+    work_location: cafe
+    llm_temperature: 0.8
+
+  # ===== HOUSE 10: Frank, George & Sam (south side old guard) =====
   - id: frank
     name: Frank Kowalski
     age: 72
@@ -334,109 +451,10 @@ personas:
       - fixes neighbors' cars for free
       - sits on the same bar stool every night
     communication_style: blunt and opinionated, sarcastic, secretly has a heart of gold
-    home_location: home_south
+    home_location: house_frank
     work_location: ""
     llm_temperature: 0.5
 
-  - id: lila
-    name: Lila Santos
-    age: 33
-    gender: female
-    occupation: artist and part-time art teacher
-    openness: 10
-    conscientiousness: 3
-    extraversion: 6
-    agreeableness: 7
-    neuroticism: 7
-    background: >-
-      Lila is a passionate but struggling artist. She teaches art classes at the
-      library and sells paintings at the park on weekends. She's emotionally
-      volatile — ecstatic when inspired, devastated when blocked. She has a crush
-      on Elena but hasn't said anything.
-    values: [beauty, emotion, authenticity]
-    quirks:
-      - paint under her fingernails always
-      - stares at things intensely (she's composing)
-      - cries at sunsets
-    communication_style: poetic and emotional, speaks in images, alternates between passionate and melancholic
-    home_location: home_south
-    work_location: library
-    llm_temperature: 0.9
-
-  - id: sam
-    name: Sam Nakamura
-    age: 40
-    gender: nonbinary
-    occupation: librarian
-    openness: 7
-    conscientiousness: 8
-    extraversion: 3
-    agreeableness: 7
-    neuroticism: 4
-    background: >-
-      Sam runs the Soci Public Library with quiet devotion. They're non-binary
-      and moved here five years ago seeking a more accepting community. They host
-      book clubs, poetry nights, and secretly write science fiction novels.
-    values: [knowledge, inclusion, quiet service]
-    quirks:
-      - recommends books to everyone
-      - speaks in whispers even outside the library
-      - organizes everything alphabetically
-    communication_style: soft-spoken and precise, literary references, dry humor
-    home_location: home_south
-    work_location: library
-    llm_temperature: 0.6
-
-  - id: marco
-    name: Marco Delgado
-    age: 16
-    gender: male
-    occupation: high school student (Diana's son)
-    openness: 7
-    conscientiousness: 4
-    extraversion: 6
-    agreeableness: 5
-    neuroticism: 6
-    background: >-
-      Marco is Diana's teenage son who helps at the grocery store after school.
-      He's embarrassed by his mom but loves her fiercely. He wants to be a
-      game designer and spends his free time at the library or park. He
-      looks up to Kai and thinks Marcus is cool.
-    values: [freedom, creativity, loyalty]
-    quirks:
-      - always has earbuds in
-      - doodles game characters
-      - eye-rolls at authority
-    communication_style: teenager — monosyllabic with adults, animated with peers, uses gaming lingo
-    home_location: home_north
-    work_location: grocery
-    llm_temperature: 0.8
-
-  - id: nina
-    name: Nina Volkov
-    age: 29
-    gender: female
-    occupation: real estate agent
-    openness: 5
-    conscientiousness: 8
-    extraversion: 9
-    agreeableness: 4
-    neuroticism: 5
-    background: >-
-      Nina is ambitious and sharp. She moved to Soci City to scout development
-      opportunities. Some residents distrust her motives — is she here to
-      gentrify? She's not evil, just driven. She genuinely likes the community
-      but struggles to show it past her professional veneer.
-    values: [ambition, success, efficiency]
-    quirks:
-      - always in business casual
-      - takes phone calls during conversations
-      - knows property values of every building
-    communication_style: polished and assertive, networking mode, occasionally lets guard down
-    home_location: home_north
-    work_location: office
-    llm_temperature: 0.6
-
   - id: george
     name: George Adeyemi
     age: 47
@@ -457,31 +475,30 @@ personas:
       - naps in the park during daytime
       - makes detailed observations about patterns
     communication_style: observational and measured, reports facts, rarely gives opinions unless asked
-    home_location: home_south
+    home_location: house_frank
     work_location: ""
     llm_temperature: 0.5
 
-  - id: alice
-    name: Alice Fontaine
-    age: 58
-    gender: female
-    occupation: retired accountant, amateur baker
-    openness: 5
+  - id: sam
+    name: Sam Nakamura
+    age: 40
+    gender: nonbinary
+    occupation: librarian
+    openness: 7
     conscientiousness: 8
-    extraversion: 6
-    agreeableness: 8
-    neuroticism: 3
+    extraversion: 3
+    agreeableness: 7
+    neuroticism: 4
     background: >-
-      Alice retired early and now spends her time perfecting baking recipes.
-      She dreams of opening a small bakery. She's Helen's closest friend and
-      they have tea together every afternoon. She's steady, reliable, and
-      the person everyone calls in a crisis.
-    values: [friendship, reliability, craft]
+      Sam runs the Soci Public Library with quiet devotion. They're non-binary
+      and moved here five years ago seeking a more accepting community. They host
+      book clubs, poetry nights, and secretly write science fiction novels.
+    values: [knowledge, inclusion, quiet service]
     quirks:
-      - always brings baked goods everywhere
-      - keeps a mental spreadsheet of everyone's dietary needs
-      - hums while baking
-    communication_style: steady and cheerful, uses baking analogies, good at calming people down
-    home_location: home_north
-    work_location: ""
+      - recommends books to everyone
+      - speaks in whispers even outside the library
+      - organizes everything alphabetically
+    communication_style: soft-spoken and precise, literary references, dry humor
+    home_location: house_frank
+    work_location: library
     llm_temperature: 0.6

src/soci/api/routes.py

@@ -219,7 +219,7 @@ async def player_join(request: PlayerJoinRequest):
         age=25,
         occupation="newcomer",
         background=request.background,
-        home_location="home_north",
+        home_location="house_elena",
         work_location="",
     )
     agent = Agent(persona)

src/soci/engine/llm.py

@@ -2,6 +2,7 @@
 
 from __future__ import annotations
 
+import asyncio
 import json
 import logging
 import os
@@ -207,7 +208,7 @@ class OllamaClient:
         self.max_retries = max_retries
         self.usage = LLMUsage()
         self.provider = PROVIDER_OLLAMA
-        self._http = httpx.Client(timeout=180.0)
+        self._http = httpx.AsyncClient(timeout=180.0)
 
     async def complete(
         self,
@@ -217,9 +218,8 @@ class OllamaClient:
         temperature: float = 0.7,
         max_tokens: int = 1024,
     ) -> str:
-        """Send a message to the local Ollama model."""
+        """Send a message to the local Ollama model (async)."""
         model = model or self.default_model
-        # Map Claude model names to Ollama models
         model = self._map_model(model)
 
         payload = {
@@ -237,14 +237,13 @@ class OllamaClient:
 
         for attempt in range(self.max_retries):
             try:
-                response = self._http.post(
+                response = await self._http.post(
                     f"{self.base_url}/api/chat",
                     json=payload,
                 )
                 response.raise_for_status()
                 data = response.json()
 
-                # Track usage
                 input_tokens = data.get("prompt_eval_count", 0)
                 output_tokens = data.get("eval_count", 0)
                 self.usage.record(model, input_tokens, output_tokens)
@@ -259,7 +258,7 @@ class OllamaClient:
                 logger.error(msg)
                 if attempt == self.max_retries - 1:
                     raise ConnectionError(msg)
-                time.sleep(1)
+                await asyncio.sleep(1)
             except httpx.HTTPStatusError as e:
                 if e.response.status_code == 404:
                     msg = (
@@ -271,12 +270,12 @@ class OllamaClient:
                 logger.error(f"Ollama API error: {e}")
                 if attempt == self.max_retries - 1:
                     raise
-                time.sleep(1)
+                await asyncio.sleep(1)
             except Exception as e:
                 logger.error(f"Ollama error: {e}")
                 if attempt == self.max_retries - 1:
                     raise
-                time.sleep(1)
+                await asyncio.sleep(1)
         return ""
 
     async def complete_json(
@@ -287,7 +286,7 @@ class OllamaClient:
         temperature: float = 0.7,
         max_tokens: int = 1024,
     ) -> dict:
-        """Send a JSON-mode request to Ollama (uses native format: json)."""
+        """Send a JSON-mode request to Ollama (async, uses native format: json)."""
         model = model or self.default_model
         model = self._map_model(model)
 
@@ -303,7 +302,7 @@ class OllamaClient:
                 {"role": "user", "content": user_message + json_instruction},
             ],
             "stream": False,
-            "format": "json",  # Ollama native JSON mode — guarantees valid JSON output
+            "format": "json",
             "options": {
                 "temperature": temperature,
                 "num_predict": max_tokens,
@@ -312,7 +311,7 @@ class OllamaClient:
 
         for attempt in range(self.max_retries):
             try:
-                response = self._http.post(
+                response = await self._http.post(
                     f"{self.base_url}/api/chat",
                     json=payload,
                 )
@@ -330,12 +329,12 @@ class OllamaClient:
                 logger.error(f"Cannot connect to Ollama at {self.base_url}")
                 if attempt == self.max_retries - 1:
                     return {}
-                time.sleep(1)
+                await asyncio.sleep(1)
             except Exception as e:
                 logger.error(f"Ollama JSON error: {e}")
                 if attempt == self.max_retries - 1:
                     return {}
-                time.sleep(1)
+                await asyncio.sleep(1)
         return {}
 
     def _map_model(self, model: str) -> str:

test_simulation.py

@@ -73,7 +73,7 @@ class MockLLM:
             actions = ["work", "eat", "relax", "wander", "move", "exercise"]
             action = random.choice(actions)
             targets = {
-                "move": random.choice(["cafe", "park", "home_north", "office", "grocery"]),
+                "move": random.choice(["cafe", "park", "house_elena", "office", "grocery"]),
                 "work": "",
                 "eat": "",
                 "relax": "",
@@ -151,21 +151,21 @@ async def run_tests():
     # --- Test 2: City ---
     print("\n[2/12] City system...")
     city = City.from_yaml("config/city.yaml")
-    assert len(city.locations) == 12
+    assert len(city.locations) == 20
     # Test connectivity
     cafe = city.get_location("cafe")
     assert cafe is not None
-    assert "park" in cafe.connected_to
+    assert "street_north" in cafe.connected_to
     connected = city.get_connected("cafe")
     assert len(connected) > 0
     # Test agent placement and movement
     city.place_agent("test_agent", "cafe")
     assert "test_agent" in city.get_agents_at("cafe")
-    city.move_agent("test_agent", "cafe", "park")
+    city.move_agent("test_agent", "cafe", "office")
     assert "test_agent" not in city.get_agents_at("cafe")
-    assert "test_agent" in city.get_agents_at("park")
-    assert city.find_agent("test_agent") == "park"
-    city.locations["park"].remove_occupant("test_agent")
+    assert "test_agent" in city.get_agents_at("office")
+    assert city.find_agent("test_agent") == "office"
+    city.locations["office"].remove_occupant("test_agent")
     print("  PASS: City loads, connections work, movement works")
 
     # --- Test 3: Personas ---
@@ -246,7 +246,7 @@ async def run_tests():
     persona = personas[0]  # Elena
     agent = Agent(persona)
     assert agent.name == "Elena Vasquez"
-    assert agent.location == "home_north"
+    assert agent.location == "house_elena"
     assert agent.state == AgentState.IDLE
     # Test action
     action = AgentAction(type="work", detail="coding", duration_ticks=3, needs_satisfied={"purpose": 0.3})
@@ -290,7 +290,7 @@ async def run_tests():
     clock2 = SimClock()
     agent3 = Agent(personas[0])
     city3 = City.from_yaml("config/city.yaml")
-    city3.place_agent(agent3.id, "home_north")
+    city3.place_agent(agent3.id, "house_elena")
     move_action = AgentAction(type="move", target="cafe", detail="walking to cafe")
     desc = execute_move(agent3, move_action, city3, clock2)
     assert "cafe" in desc.lower() or "Daily Grind" in desc

web/index.html

@@ -49,7 +49,6 @@
   .tab-content { display: none; flex: 1; overflow-y: auto; }
   .tab-content.active { display: flex; flex-direction: column; }
 
-  /* AGENT DETAIL TAB */
   #agent-detail { padding: 12px; flex: 1; overflow-y: auto; }
   #agent-detail h2 { font-size: 16px; color: #4ecca3; margin-bottom: 8px; }
   #agent-detail .subtitle { font-size: 12px; color: #a0a0c0; margin-bottom: 6px; }
@@ -73,32 +72,23 @@
   .agent-list-item .agent-name { font-weight: 600; }
   .agent-list-item .agent-action { color: #666; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-  /* CONVERSATIONS TAB */
   #conversations-panel { padding: 0; flex: 1; overflow-y: auto; }
   .conv-card {
     margin: 8px; padding: 10px; background: #1a1a2e; border-radius: 6px;
     border: 1px solid #0f3460;
   }
   .conv-card.active-conv { border-color: #4ecca3; }
-  .conv-header {
-    display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
-  }
+  .conv-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
   .conv-topic { font-size: 12px; color: #4ecca3; font-weight: 600; }
-  .conv-badge {
-    font-size: 9px; padding: 2px 6px; border-radius: 3px; font-weight: bold;
-    text-transform: uppercase;
-  }
+  .conv-badge { font-size: 9px; padding: 2px 6px; border-radius: 3px; font-weight: bold; text-transform: uppercase; }
   .conv-badge.live { background: #4ecca3; color: #1a1a2e; }
   .conv-badge.ended { background: #333; color: #888; }
   .conv-participants { font-size: 10px; color: #888; margin-bottom: 6px; }
-  .conv-turn {
-    padding: 4px 0; font-size: 11px; line-height: 1.4;
-  }
+  .conv-turn { padding: 4px 0; font-size: 11px; line-height: 1.4; }
   .conv-speaker { font-weight: 600; }
   .conv-message { color: #d0d0e0; }
   .conv-empty { padding: 20px; text-align: center; color: #555; font-size: 12px; }
 
-  /* EVENT LOG TAB */
   #event-log-panel { padding: 8px 12px; flex: 1; overflow-y: auto; font-size: 11px; line-height: 1.5; }
   .event-line { padding: 2px 0; color: #b0b0c0; border-bottom: 1px solid #0f346020; }
   .event-line.plan { color: #4ecca3; } .event-line.conv { color: #f0c040; }
@@ -107,13 +97,11 @@
   .event-line.move { color: #4e9eca; }
   .event-line.reflect { color: #9b59b6; }
 
-  /* TOOLTIP */
   #tooltip {
     position: absolute; background: #16213eee; border: 1px solid #4ecca3;
     border-radius: 6px; padding: 8px 12px; font-size: 12px;
     pointer-events: none; display: none; z-index: 100; max-width: 280px;
   }
-  /* NOTIFICATION TOASTS */
   #toast-container {
     position: absolute; bottom: 12px; left: 12px; z-index: 200;
     display: flex; flex-direction: column-reverse; gap: 6px;
@@ -131,25 +119,18 @@
   .toast.gossip { border-left-color: #9b59b6; }
   @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
   @keyframes toastOut { from { opacity: 1; } to { opacity: 0; } }
-  /* Section headers */
   .section-header {
     font-size: 12px; color: #4ecca3; margin: 10px 0 4px 0; font-weight: 600;
     display: flex; align-items: center; gap: 6px;
   }
-  .section-header::after {
-    content: ''; flex: 1; height: 1px; background: #0f3460;
-  }
-  /* Relationship bars */
-  .rel-item {
-    font-size: 11px; padding: 4px 0; border-bottom: 1px solid #0f346020; cursor: pointer;
-  }
+  .section-header::after { content: ''; flex: 1; height: 1px; background: #0f3460; }
+  .rel-item { font-size: 11px; padding: 4px 0; border-bottom: 1px solid #0f346020; cursor: pointer; }
   .rel-item:hover { background: rgba(78,204,163,0.05); }
   .rel-name { font-weight: 600; color: #d0d0e0; }
   .rel-bars { display: flex; gap: 4px; margin-top: 2px; }
   .rel-mini-bar { flex: 1; height: 4px; background: #0f3460; border-radius: 2px; overflow: hidden; }
   .rel-mini-fill { height: 100%; border-radius: 2px; }
 
-  /* CONTROLS */
   .controls { display: flex; align-items: center; gap: 4px; }
   .ctrl-btn {
     background: #0f3460; border: 1px solid #1a3a6e; color: #a0a0c0;
@@ -215,35 +196,55 @@
 // ============================================================
 const API_BASE = window.location.origin + '/api';
 const POLL_INTERVAL = 2000;
-const HORIZON = 0.18;
+const HORIZON = 0.14;
+
+// --- CITY LAYOUT ---
+// Road network: main horizontal roads and connecting vertical roads
+const ROADS = [
+  // Horizontal roads
+  { x1: 0.04, y1: 0.30, x2: 0.96, y2: 0.30, width: 14, name: 'North Road' },
+  { x1: 0.04, y1: 0.65, x2: 0.96, y2: 0.65, width: 14, name: 'South Road' },
+  // Main vertical street
+  { x1: 0.50, y1: 0.17, x2: 0.50, y2: 0.92, width: 16, name: 'Main Street' },
+  // West lane
+  { x1: 0.18, y1: 0.24, x2: 0.18, y2: 0.85, width: 8 },
+  // East lane
+  { x1: 0.82, y1: 0.24, x2: 0.82, y2: 0.85, width: 8 },
+  // Small connector roads
+  { x1: 0.18, y1: 0.48, x2: 0.50, y2: 0.48, width: 6 },
+  { x1: 0.50, y1: 0.48, x2: 0.82, y2: 0.48, width: 6 },
+  { x1: 0.18, y1: 0.80, x2: 0.50, y2: 0.80, width: 6 },
+  { x1: 0.50, y1: 0.80, x2: 0.82, y2: 0.80, width: 6 },
+];
 
+// Building positions — placed along streets
 const LOCATION_POSITIONS = {
-  home_north:   { x: 0.07, y: 0.28 },
-  park:         { x: 0.40, y: 0.22 },
-  cafe:         { x: 0.24, y: 0.40 },
-  street_north: { x: 0.54, y: 0.32 },
-  office:       { x: 0.80, y: 0.26 },
-  grocery:      { x: 0.14, y: 0.56 },
-  restaurant:   { x: 0.84, y: 0.50 },
-  gym:          { x: 0.36, y: 0.66 },
-  library:      { x: 0.60, y: 0.60 },
-  street_south: { x: 0.44, y: 0.82 },
-  bar:          { x: 0.74, y: 0.72 },
-  home_south:   { x: 0.12, y: 0.84 },
-};
-
-const BUILDING_TYPE = {
-  home_north: 'house', home_south: 'house',
-  cafe: 'shop', grocery: 'shop', restaurant: 'shop', bar: 'shop',
-  office: 'office', gym: 'office', library: 'public',
-  park: 'park', street_north: 'street', street_south: 'street',
-};
-
-const ZONE_COLORS = {
-  residential: { main: '#5a8a6a', roof: '#3d6b4a', accent: '#7ab88a' },
-  commercial:  { main: '#c49663', roof: '#9e7040', accent: '#e0b880' },
-  work:        { main: '#5a7a9d', roof: '#3d5a7a', accent: '#80a0c0' },
-  public:      { main: '#6a9a5e', roof: '#4a7a3e', accent: '#90c080' },
+  // North-side houses (above North Road)
+  house_elena:  { x: 0.10, y: 0.21, type: 'house', label: 'Elena & Lila' },
+  house_marcus: { x: 0.30, y: 0.21, type: 'house', label: 'Marcus & Zoe' },
+  house_helen:  { x: 0.70, y: 0.21, type: 'house', label: 'Helen & Alice' },
+  house_diana:  { x: 0.90, y: 0.21, type: 'house', label: 'Diana & Marco' },
+  // Middle houses
+  house_kai:    { x: 0.10, y: 0.40, type: 'house', label: "Kai's Studio" },
+  house_priya:  { x: 0.90, y: 0.40, type: 'house', label: 'Priya & Nina' },
+  // South-side houses (below South Road)
+  house_james:  { x: 0.10, y: 0.72, type: 'house', label: 'James & Theo' },
+  house_rosa:   { x: 0.30, y: 0.72, type: 'house', label: 'Rosa & Omar' },
+  house_yuki:   { x: 0.70, y: 0.72, type: 'house', label: 'Yuki & Devon' },
+  house_frank:  { x: 0.90, y: 0.72, type: 'house', label: 'Frank+George+Sam' },
+  // Commercial — along main street
+  cafe:         { x: 0.38, y: 0.35, type: 'shop', label: 'The Daily Grind' },
+  grocery:      { x: 0.62, y: 0.35, type: 'shop', label: 'Green Basket' },
+  office:       { x: 0.50, y: 0.54, type: 'office', label: 'The Hive' },
+  restaurant:   { x: 0.38, y: 0.58, type: 'shop', label: "Mama Rosa's" },
+  bar:          { x: 0.62, y: 0.58, type: 'shop', label: 'Rusty Anchor' },
+  // Public
+  park:         { x: 0.50, y: 0.22, type: 'park', label: 'Willow Park' },
+  gym:          { x: 0.30, y: 0.54, type: 'public', label: 'Iron & Grit' },
+  library:      { x: 0.70, y: 0.54, type: 'public', label: 'Public Library' },
+  // Streets
+  street_north: { x: 0.50, y: 0.30, type: 'street', label: 'N. Main St' },
+  street_south: { x: 0.50, y: 0.65, type: 'street', label: 'S. Main St' },
 };
 
 const AGENT_COLORS = [
@@ -294,15 +295,40 @@ let raindrops = [];
 let clouds = [];
 let stars = [];
 let activeTab = 'agents';
-let agentIdxMap = {};  // id -> stable index for consistent coloring
+let agentIdxMap = {};
+
+// Tree / decorations cache
+let trees = [];
+let streetLamps = [];
 
 function initParticles() {
   for (let i = 0; i < 120; i++)
     raindrops.push({x:Math.random(), y:Math.random(), speed:0.012+Math.random()*0.015, len:8+Math.random()*10});
   for (let i = 0; i < 5; i++)
-    clouds.push({x:Math.random(), y:0.02+Math.random()*0.10, w:60+Math.random()*50, speed:0.00005+Math.random()*0.0001});
+    clouds.push({x:Math.random(), y:0.02+Math.random()*0.08, w:60+Math.random()*50, speed:0.00005+Math.random()*0.0001});
   for (let i = 0; i < 70; i++)
     stars.push({x:Math.random(), y:Math.random()*HORIZON, size:0.5+Math.random()*1.5, tw:Math.random()*6.28});
+  // Scatter trees in green spaces between buildings
+  const treeZones = [
+    {cx:0.50, cy:0.22, rx:0.12, ry:0.04, count:8},  // park
+    {cx:0.10, cy:0.55, rx:0.04, ry:0.06, count:3},   // west green
+    {cx:0.90, cy:0.55, rx:0.04, ry:0.06, count:3},   // east green
+    {cx:0.50, cy:0.88, rx:0.15, ry:0.03, count:5},   // south park
+  ];
+  for (const z of treeZones) {
+    for (let i = 0; i < z.count; i++) {
+      trees.push({
+        x: z.cx + (Math.random()-0.5)*2*z.rx,
+        y: z.cy + (Math.random()-0.5)*2*z.ry,
+        size: 6 + Math.random()*5,
+        type: Math.random() > 0.3 ? 'round' : 'pine',
+      });
+    }
+  }
+  // Street lamps along roads
+  for (let i = 0; i < 8; i++) streetLamps.push({ x: 0.50, y: 0.20 + i*0.09 });
+  for (let i = 0; i < 4; i++) streetLamps.push({ x: 0.10 + i*0.26, y: 0.30 });
+  for (let i = 0; i < 4; i++) streetLamps.push({ x: 0.10 + i*0.26, y: 0.65 });
 }
 
 // ============================================================
@@ -316,7 +342,7 @@ function switchTab(tab) {
 }
 
 // ============================================================
-// CANVAS
+// CANVAS SETUP
 // ============================================================
 function initCanvas() {
   canvas = document.getElementById('cityCanvas');
@@ -347,7 +373,7 @@ function animate() {
 }
 
 // ============================================================
-// DRAWING — MAIN
+// MAIN DRAW
 // ============================================================
 function draw() {
   if (!ctx) return;
@@ -357,12 +383,20 @@ function draw() {
   drawGround(W, H);
   drawWeather(W, H);
   drawRoads(W, H);
+  drawSidewalks(W, H);
+  drawTrees(W, H);
 
-  for (const [id, loc] of Object.entries(locations)) drawBuilding(id, loc, W, H);
+  // Draw buildings (non-street, non-park locations)
+  for (const [id, pos] of Object.entries(LOCATION_POSITIONS)) {
+    if (pos.type !== 'street') drawBuilding(id, pos, W, H);
+  }
+
+  drawStreetLamps(W, H);
 
+  // Compute agent positions
   const byLoc = {};
   for (const [id, a] of Object.entries(agents)) {
-    const loc = a.location || 'home_north';
+    const loc = a.location || 'house_elena';
     if (!byLoc[loc]) byLoc[loc] = [];
     byLoc[loc].push({id, ...a});
   }
@@ -384,9 +418,7 @@ function draw() {
 }
 
 function getAgentIdx(id) {
-  if (!(id in agentIdxMap)) {
-    agentIdxMap[id] = Object.keys(agentIdxMap).length;
-  }
+  if (!(id in agentIdxMap)) agentIdxMap[id] = Object.keys(agentIdxMap).length;
   return agentIdxMap[id];
 }
 
@@ -419,8 +451,7 @@ function drawSun(x, y, r) {
   const glow = ctx.createRadialGradient(x, y, r*0.5, x, y, r*4);
   glow.addColorStop(0, 'rgba(255,220,100,0.35)');
   glow.addColorStop(1, 'rgba(255,220,100,0)');
-  ctx.fillStyle = glow;
-  ctx.fillRect(x-r*4, y-r*4, r*8, r*8);
+  ctx.fillStyle = glow; ctx.fillRect(x-r*4, y-r*4, r*8, r*8);
   ctx.save(); ctx.translate(x, y); ctx.rotate(animFrame*0.005);
   for (let i = 0; i < 8; i++) { ctx.rotate(Math.PI/4); ctx.fillStyle='rgba(255,220,100,0.25)'; ctx.fillRect(-1.5,r+3,3,8); }
   ctx.restore();
@@ -454,8 +485,9 @@ function drawGround(W, H) {
     ctx.fillRect(0, hLine, W, H - hLine);
   }
 
-  ctx.fillStyle = `rgba(${60+bc.r*0.3},${90+bc.g*0.3},${40+bc.b*0.2}, 0.15)`;
-  for (let i = 0; i < 80; i++) {
+  // Grass texture
+  ctx.fillStyle = `rgba(${60+bc.r*0.3},${90+bc.g*0.3},${40+bc.b*0.2}, 0.12)`;
+  for (let i = 0; i < 100; i++) {
     const gx = (i*37+13)%W;
     const gy = hLine + 10 + ((i*53+7)%(H-hLine-15));
     ctx.fillRect(gx, gy, 2, 3);
@@ -510,135 +542,304 @@ function drawCloud(x,y,w,op) {
 }
 
 // ============================================================
-// ROADS
+// ROADS — drawn as realistic asphalt with lane markings
 // ============================================================
 function drawRoads(W, H) {
-  const isNight = currentTimeOfDay==='night';
-  ctx.strokeStyle = isNight?'rgba(50,45,40,0.6)':'rgba(110,100,85,0.45)';
-  ctx.lineWidth=6;
-  const drawn = new Set();
-  for (const [id,loc] of Object.entries(locations)) {
-    const p = LOCATION_POSITIONS[id]; if(!p) continue;
-    for (const cid of (loc.connected_to||[])) {
-      const k=[id,cid].sort().join('-'); if(drawn.has(k)) continue; drawn.add(k);
-      const cp=LOCATION_POSITIONS[cid]; if(!cp) continue;
-      ctx.beginPath(); ctx.moveTo(p.x*W,p.y*H); ctx.lineTo(cp.x*W,cp.y*H); ctx.stroke();
+  const isDark = currentTimeOfDay==='night'||currentTimeOfDay==='evening';
+  const asphalt = isDark ? '#2a2820' : '#6b6560';
+  const asphaltEdge = isDark ? '#1a1815' : '#555048';
+
+  for (const road of ROADS) {
+    const x1=road.x1*W, y1=road.y1*H, x2=road.x2*W, y2=road.y2*H;
+    const w = road.width || 10;
+    const dx = x2-x1, dy = y2-y1;
+    const len = Math.hypot(dx, dy);
+    const nx = -dy/len * w/2, ny = dx/len * w/2;
+
+    // Road surface
+    ctx.fillStyle = asphalt;
+    ctx.beginPath();
+    ctx.moveTo(x1+nx, y1+ny);
+    ctx.lineTo(x2+nx, y2+ny);
+    ctx.lineTo(x2-nx, y2-ny);
+    ctx.lineTo(x1-nx, y1-ny);
+    ctx.closePath();
+    ctx.fill();
+
+    // Edge lines
+    ctx.strokeStyle = asphaltEdge;
+    ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(x1+nx,y1+ny); ctx.lineTo(x2+nx,y2+ny); ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(x1-nx,y1-ny); ctx.lineTo(x2-nx,y2-ny); ctx.stroke();
+
+    // Center dashed line (for wider roads)
+    if (w >= 12) {
+      ctx.strokeStyle = isDark ? 'rgba(200,180,80,0.25)' : 'rgba(255,220,100,0.6)';
+      ctx.lineWidth = 1.5;
+      ctx.setLineDash([8, 10]);
+      ctx.beginPath();
+      ctx.moveTo((x1+x2)/2 - (x2-x1)*0.48 + (x2-x1)*0.02, (y1+y2)/2 - (y2-y1)*0.48 + (y2-y1)*0.02);
+      ctx.moveTo(x1, y1); ctx.lineTo(x2, y2);
+      ctx.stroke();
+      ctx.setLineDash([]);
+    }
+  }
+}
+
+// Sidewalks next to roads
+function drawSidewalks(W, H) {
+  const isDark = currentTimeOfDay==='night';
+  ctx.fillStyle = isDark ? 'rgba(90,85,75,0.3)' : 'rgba(180,175,160,0.35)';
+
+  for (const road of ROADS) {
+    const x1=road.x1*W, y1=road.y1*H, x2=road.x2*W, y2=road.y2*H;
+    const w = (road.width || 10) + 6;
+    const dx = x2-x1, dy = y2-y1;
+    const len = Math.hypot(dx, dy);
+    const nx = -dy/len * w/2, ny = dx/len * w/2;
+    const sw = 3; // sidewalk width
+
+    // Draw thin sidewalk strips
+    ctx.fillRect(
+      Math.min(x1+nx, x2+nx) - sw/2,
+      Math.min(y1+ny, y2+ny) - sw/2,
+      Math.abs(x2+nx - x1-nx) + sw,
+      Math.abs(y2+ny - y1-ny) + sw
+    );
+  }
+}
+
+// ============================================================
+// TREES
+// ============================================================
+function drawTrees(W, H) {
+  const isDark = currentTimeOfDay==='night'||currentTimeOfDay==='evening';
+  for (const t of trees) {
+    const tx = t.x * W, ty = t.y * H;
+    // Trunk
+    ctx.fillStyle = isDark ? '#3a2a15' : '#6b4226';
+    ctx.fillRect(tx-2, ty-2, 4, 10);
+    // Canopy
+    if (t.type === 'pine') {
+      ctx.fillStyle = isDark ? '#1a3a18' : '#2a7a28';
+      ctx.beginPath(); ctx.moveTo(tx, ty - t.size - 6); ctx.lineTo(tx - t.size*0.6, ty); ctx.lineTo(tx + t.size*0.6, ty); ctx.closePath(); ctx.fill();
+      ctx.fillStyle = isDark ? '#1e4a1c' : '#3a8a30';
+      ctx.beginPath(); ctx.moveTo(tx, ty - t.size - 2); ctx.lineTo(tx - t.size*0.4, ty - 3); ctx.lineTo(tx + t.size*0.4, ty - 3); ctx.closePath(); ctx.fill();
+    } else {
+      ctx.fillStyle = isDark ? '#1a4018' : '#3a8a30';
+      ctx.beginPath(); ctx.arc(tx, ty - t.size*0.5, t.size*0.7, 0, 6.28); ctx.fill();
+      ctx.fillStyle = isDark ? '#2a5028' : '#55aa45';
+      ctx.beginPath(); ctx.arc(tx - 2, ty - t.size*0.6, t.size*0.35, 0, 6.28); ctx.fill();
     }
   }
-  ctx.strokeStyle=isNight?'rgba(80,70,55,0.25)':'rgba(200,190,150,0.30)';
-  ctx.lineWidth=1; ctx.setLineDash([5,7]);
-  drawn.clear();
-  for (const [id,loc] of Object.entries(locations)) {
-    const p=LOCATION_POSITIONS[id]; if(!p) continue;
-    for (const cid of (loc.connected_to||[])) {
-      const k=[id,cid].sort().join('-'); if(drawn.has(k)) continue; drawn.add(k);
-      const cp=LOCATION_POSITIONS[cid]; if(!cp) continue;
-      ctx.beginPath(); ctx.moveTo(p.x*W,p.y*H); ctx.lineTo(cp.x*W,cp.y*H); ctx.stroke();
+}
+
+// ============================================================
+// STREET LAMPS
+// ============================================================
+function drawStreetLamps(W, H) {
+  const isDark = currentTimeOfDay==='night'||currentTimeOfDay==='evening';
+  for (const l of streetLamps) {
+    const lx = l.x*W + 12, ly = l.y*H;
+    ctx.fillStyle = '#555'; ctx.fillRect(lx-1, ly-14, 2, 14);
+    ctx.fillStyle = '#666'; ctx.fillRect(lx-3, ly-16, 6, 3);
+    if (isDark) {
+      const glow = ctx.createRadialGradient(lx, ly-14, 2, lx, ly-14, 30);
+      glow.addColorStop(0, 'rgba(255,220,130,0.25)');
+      glow.addColorStop(1, 'rgba(255,220,130,0)');
+      ctx.fillStyle = glow;
+      ctx.fillRect(lx-30, ly-44, 60, 60);
+      ctx.fillStyle = 'rgba(255,220,130,0.8)';
+      ctx.beginPath(); ctx.arc(lx, ly-14, 2, 0, 6.28); ctx.fill();
     }
   }
-  ctx.setLineDash([]);
 }
 
 // ============================================================
 // BUILDINGS
 // ============================================================
-function drawBuilding(id, loc, W, H) {
-  const pos=LOCATION_POSITIONS[id]; if(!pos) return;
-  const x=pos.x*W, y=pos.y*H;
-  const zone=loc.zone||'public';
-  const type=BUILDING_TYPE[id]||'office';
-  const colors=ZONE_COLORS[zone]||ZONE_COLORS.public;
+function drawBuilding(id, pos, W, H) {
+  const x = pos.x*W, y = pos.y*H;
   const isDark = currentTimeOfDay==='night'||currentTimeOfDay==='evening';
-
-  if (type==='park') drawPark(x,y,colors,isDark);
-  else if (type==='street') drawStreetSign(x,y,loc.name||id,isDark);
-  else if (type==='house') drawHouse(x,y,colors,isDark);
-  else if (type==='shop') drawShop(x,y,colors,isDark);
-  else drawOffice(x,y,colors,isDark);
-
-  if (type!=='park'&&type!=='street') {
-    const name=loc.name||id;
-    const short=name.length>18?name.slice(0,16)+'..':name;
-    ctx.font='bold 10px Segoe UI'; ctx.textAlign='center'; ctx.textBaseline='top';
-    const ly = type==='house'?y+20:y+28;
-    ctx.fillStyle='rgba(0,0,0,0.5)'; ctx.fillText(short,x+1,ly+1);
-    ctx.fillStyle=isDark?'#a0a8c0':'#fff'; ctx.fillText(short,x,ly);
+  const loc = locations[id] || {};
+  const occ = (loc.occupants || []).length;
+
+  if (pos.type === 'house') drawHouse(x, y, isDark, id);
+  else if (pos.type === 'shop') drawShop(x, y, isDark);
+  else if (pos.type === 'office') drawOffice(x, y, isDark);
+  else if (pos.type === 'park') drawPark(x, y, isDark);
+  else if (pos.type === 'public') drawPublicBuilding(x, y, isDark);
+
+  // Label
+  if (pos.type !== 'park') {
+    const label = pos.label || id;
+    const short = label.length > 16 ? label.slice(0, 14) + '..' : label;
+    ctx.font = 'bold 9px Segoe UI'; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    const ly = pos.type === 'house' ? y + 18 : y + 25;
+    ctx.fillStyle = 'rgba(0,0,0,0.5)'; ctx.fillText(short, x+1, ly+1);
+    ctx.fillStyle = isDark ? '#a0a8c0' : '#fff'; ctx.fillText(short, x, ly);
   }
 
-  const occ=(loc.occupants||[]).length;
-  if (occ>0) {
-    const bx=x+32, by=y-20;
-    ctx.fillStyle='#e94560'; ctx.beginPath(); ctx.arc(bx,by,9,0,6.28); ctx.fill();
-    ctx.fillStyle='#fff'; ctx.font='bold 9px Segoe UI'; ctx.textAlign='center'; ctx.textBaseline='middle';
-    ctx.fillText(occ.toString(),bx,by);
+  // Occupant count badge
+  if (occ > 0) {
+    const bx = x + (pos.type === 'house' ? 22 : 28), by = y - (pos.type === 'house' ? 14 : 18);
+    ctx.fillStyle = '#e94560'; ctx.beginPath(); ctx.arc(bx, by, 8, 0, 6.28); ctx.fill();
+    ctx.fillStyle = '#fff'; ctx.font = 'bold 8px Segoe UI'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(occ.toString(), bx, by);
   }
 }
 
-function drawHouse(x,y,c,dk) {
-  const w=48,h=30;
-  ctx.fillStyle=dk?dim(c.main,0.45):c.main;
-  ctx.fillRect(x-w/2,y-h/2,w,h);
-  ctx.fillStyle=dk?dim(c.roof,0.45):c.roof;
-  ctx.beginPath(); ctx.moveTo(x-w/2-5,y-h/2); ctx.lineTo(x,y-h/2-18); ctx.lineTo(x+w/2+5,y-h/2); ctx.closePath(); ctx.fill();
-  ctx.fillStyle=dk?'#3a2a1a':'#6b4226'; ctx.fillRect(x-4,y+h/2-13,8,13);
-  const wc=dk?'rgba(255,210,100,0.75)':'rgba(180,220,255,0.5)';
-  ctx.fillStyle=wc; ctx.fillRect(x-w/2+5,y-h/2+5,9,7); ctx.fillRect(x+w/2-14,y-h/2+5,9,7);
-  ctx.fillStyle=dk?dim(c.roof,0.35):dim(c.roof,0.8); ctx.fillRect(x+10,y-h/2-16,6,10);
+function drawHouse(x, y, dk, id) {
+  const w = 36, h = 24;
+  // Vary house colors by position for variety
+  const hues = [
+    {wall:'#c8a882', roof:'#8b4513', door:'#6b3410'},
+    {wall:'#a0b8a0', roof:'#4a6a4a', door:'#3a4a3a'},
+    {wall:'#b8a0a0', roof:'#7a3a3a', door:'#5a2a2a'},
+    {wall:'#a0a8c0', roof:'#4a5a7a', door:'#3a4a6a'},
+    {wall:'#c8b878', roof:'#8a7a40', door:'#6a5a30'},
+  ];
+  const idx = Object.keys(LOCATION_POSITIONS).indexOf(id) % hues.length;
+  const c = hues[idx];
+
+  // Wall
+  ctx.fillStyle = dk ? dim(c.wall, 0.4) : c.wall;
+  ctx.fillRect(x-w/2, y-h/2, w, h);
+  // Roof
+  ctx.fillStyle = dk ? dim(c.roof, 0.4) : c.roof;
+  ctx.beginPath();
+  ctx.moveTo(x-w/2-4, y-h/2);
+  ctx.lineTo(x, y-h/2-14);
+  ctx.lineTo(x+w/2+4, y-h/2);
+  ctx.closePath();
+  ctx.fill();
+  // Door
+  ctx.fillStyle = dk ? dim(c.door, 0.4) : c.door;
+  ctx.fillRect(x-3, y+h/2-10, 6, 10);
+  // Doorknob
+  ctx.fillStyle = dk ? '#aa9060' : '#d4b070';
+  ctx.beginPath(); ctx.arc(x+2, y+h/2-4, 1, 0, 6.28); ctx.fill();
+  // Windows (lit at night)
+  const wc = dk ? 'rgba(255,210,100,0.75)' : 'rgba(180,220,255,0.55)';
+  ctx.fillStyle = wc;
+  ctx.fillRect(x-w/2+4, y-h/2+4, 8, 6);
+  ctx.fillRect(x+w/2-12, y-h/2+4, 8, 6);
+  // Window frames
+  ctx.strokeStyle = dk ? 'rgba(100,80,50,0.4)' : 'rgba(80,70,60,0.3)';
+  ctx.lineWidth = 0.5;
+  ctx.strokeRect(x-w/2+4, y-h/2+4, 8, 6);
+  ctx.strokeRect(x+w/2-12, y-h/2+4, 8, 6);
+  // Chimney
+  ctx.fillStyle = dk ? dim(c.roof, 0.35) : dim(c.roof, 0.8);
+  ctx.fillRect(x+8, y-h/2-12, 5, 8);
+  // Small garden/fence
+  ctx.strokeStyle = dk ? 'rgba(80,60,40,0.3)' : 'rgba(120,90,60,0.4)';
+  ctx.lineWidth = 1;
+  ctx.strokeRect(x-w/2-2, y+h/2, w+4, 4);
 }
 
-function drawShop(x,y,c,dk) {
-  const w=54,h=34;
-  ctx.fillStyle=dk?dim(c.main,0.45):c.main; ctx.fillRect(x-w/2,y-h/2,w,h);
-  ctx.fillStyle=dk?dim(c.roof,0.45):c.roof; ctx.fillRect(x-w/2-2,y-h/2-3,w+4,5);
-  ctx.fillStyle=dk?dim(c.accent,0.45):c.accent;
-  ctx.beginPath(); ctx.moveTo(x-w/2,y-h/2+2); ctx.lineTo(x-w/2-5,y-h/2+13); ctx.lineTo(x+w/2+5,y-h/2+13); ctx.lineTo(x+w/2,y-h/2+2); ctx.closePath(); ctx.fill();
-  ctx.fillStyle=dk?'#2a2a3a':'#4a4a5a'; ctx.fillRect(x-5,y+h/2-14,10,14);
-  const wc=dk?'rgba(255,210,100,0.65)':'rgba(200,230,255,0.5)';
-  ctx.fillStyle=wc; ctx.fillRect(x-w/2+4,y-h/2+15,w/2-10,10); ctx.fillRect(x+5,y-h/2+15,w/2-10,10);
+function drawShop(x, y, dk) {
+  const w = 48, h = 32;
+  ctx.fillStyle = dk ? '#3a3530' : '#d4c4a8';
+  ctx.fillRect(x-w/2, y-h/2, w, h);
+  // Awning
+  const awningColors = ['#c44', '#4a8', '#48a', '#a84'];
+  const ci = Math.floor(x*7 + y*3) % awningColors.length;
+  ctx.fillStyle = dk ? dim(awningColors[ci], 0.35) : awningColors[ci];
+  ctx.beginPath();
+  ctx.moveTo(x-w/2-3, y-h/2);
+  ctx.lineTo(x-w/2-6, y-h/2+12);
+  ctx.lineTo(x+w/2+6, y-h/2+12);
+  ctx.lineTo(x+w/2+3, y-h/2);
+  ctx.closePath();
+  ctx.fill();
+  // Awning stripes
+  ctx.strokeStyle = dk ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.25)';
+  ctx.lineWidth = 1;
+  for (let i = 0; i < 5; i++) {
+    const sx = x-w/2 + i*(w/4);
+    ctx.beginPath(); ctx.moveTo(sx, y-h/2); ctx.lineTo(sx-1.5, y-h/2+12); ctx.stroke();
+  }
+  // Door
+  ctx.fillStyle = dk ? '#2a2520' : '#5a4a3a';
+  ctx.fillRect(x-4, y+h/2-12, 8, 12);
+  // Windows
+  const wc = dk ? 'rgba(255,210,100,0.65)' : 'rgba(200,230,255,0.55)';
+  ctx.fillStyle = wc;
+  ctx.fillRect(x-w/2+4, y-h/2+14, w/2-10, 10);
+  ctx.fillRect(x+5, y-h/2+14, w/2-10, 10);
 }
 
-function drawOffice(x,y,c,dk) {
-  const w=50,h=42;
-  ctx.fillStyle=dk?dim(c.main,0.45):c.main; ctx.fillRect(x-w/2,y-h/2,w,h);
-  ctx.fillStyle=dk?dim(c.roof,0.45):c.roof; ctx.fillRect(x-w/2-2,y-h/2-3,w+4,5);
-  ctx.fillStyle=dk?'#2a2a3a':'#4a4a5a'; ctx.fillRect(x-4,y+h/2-13,8,13);
-  const wc=dk?'rgba(255,210,100,0.65)':'rgba(180,220,255,0.5)';
-  ctx.fillStyle=wc;
-  for (let r=0;r<3;r++) for (let col=0;col<3;col++) ctx.fillRect(x-w/2+6+col*15,y-h/2+5+r*11,9,6);
+function drawOffice(x, y, dk) {
+  const w = 50, h = 40;
+  ctx.fillStyle = dk ? '#2a2a35' : '#8090a8';
+  ctx.fillRect(x-w/2, y-h/2, w, h);
+  // Flat roof edge
+  ctx.fillStyle = dk ? '#1a1a25' : '#607080';
+  ctx.fillRect(x-w/2-2, y-h/2-3, w+4, 5);
+  // Door
+  ctx.fillStyle = dk ? '#1a1a25' : '#4a5a6a';
+  ctx.fillRect(x-4, y+h/2-12, 8, 12);
+  // Windows grid
+  const wc = dk ? 'rgba(255,210,100,0.6)' : 'rgba(180,220,255,0.5)';
+  ctx.fillStyle = wc;
+  for (let r = 0; r < 3; r++) {
+    for (let c = 0; c < 3; c++) {
+      ctx.fillRect(x-w/2+6+c*15, y-h/2+5+r*10, 9, 6);
+    }
+  }
 }
 
-function drawPark(x,y,c,dk) {
-  ctx.fillStyle=dk?'#1a3018':'#4a9040';
-  ctx.beginPath(); ctx.ellipse(x,y,42,22,0,0,6.28); ctx.fill();
-  ctx.strokeStyle=dk?'#2a4a25':'#6ab850'; ctx.lineWidth=2; ctx.stroke();
-  for (let i=-1;i<=1;i++) {
-    const tx=x+i*20;
-    ctx.fillStyle=dk?'#3a2a15':'#6b4226'; ctx.fillRect(tx-2,y-2,4,12);
-    ctx.fillStyle=dk?'#1a4a18':'#3a8a30'; ctx.beginPath(); ctx.arc(tx,y-8,9+Math.abs(i)*2,0,6.28); ctx.fill();
-    ctx.fillStyle=dk?'#2a5a28':'#60b050'; ctx.beginPath(); ctx.arc(tx-2,y-10,4,0,6.28); ctx.fill();
-  }
-  ctx.fillStyle=dk?'#3a2a15':'#7a5a30'; ctx.fillRect(x-10,y+9,20,3); ctx.fillRect(x-8,y+12,2,3); ctx.fillRect(x+6,y+12,2,3);
-  ctx.font='bold 10px Segoe UI'; ctx.textAlign='center'; ctx.textBaseline='top';
-  ctx.fillStyle='rgba(0,0,0,0.5)'; ctx.fillText('City Park',x+1,y+19);
-  ctx.fillStyle=dk?'#90a880':'#fff'; ctx.fillText('City Park',x,y+18);
+function drawPublicBuilding(x, y, dk) {
+  const w = 46, h = 34;
+  ctx.fillStyle = dk ? '#2a3525' : '#7a9a6a';
+  ctx.fillRect(x-w/2, y-h/2, w, h);
+  ctx.fillStyle = dk ? '#1a2a18' : '#5a7a4a';
+  ctx.fillRect(x-w/2-2, y-h/2-3, w+4, 5);
+  ctx.fillStyle = dk ? '#1a2018' : '#4a6a3a';
+  ctx.fillRect(x-4, y+h/2-12, 8, 12);
+  const wc = dk ? 'rgba(255,210,100,0.55)' : 'rgba(200,240,200,0.5)';
+  ctx.fillStyle = wc;
+  for (let c = 0; c < 4; c++) ctx.fillRect(x-w/2+4+c*11, y-h/2+6, 8, 8);
+  for (let c = 0; c < 4; c++) ctx.fillRect(x-w/2+4+c*11, y-h/2+18, 8, 8);
 }
 
-function drawStreetSign(x,y,name,dk) {
-  ctx.fillStyle=dk?'#4a4a4a':'#888'; ctx.fillRect(x-1.5,y-6,3,16);
-  const sw=48;
-  ctx.fillStyle=dk?'#1a3a1a':'#2a6a2a'; ctx.fillRect(x-sw/2,y-6-12,sw,12);
-  ctx.fillStyle='#fff'; ctx.font='bold 8px Segoe UI'; ctx.textAlign='center'; ctx.textBaseline='middle';
-  const s=(name||'').length>12?name.slice(0,10)+'..':name;
-  ctx.fillText(s,x,y-6-6);
+function drawPark(x, y, dk) {
+  // Large green area
+  ctx.fillStyle = dk ? '#1a3018' : '#4a9040';
+  ctx.beginPath(); ctx.ellipse(x, y, 55, 25, 0, 0, 6.28); ctx.fill();
+  ctx.strokeStyle = dk ? '#2a4a25' : '#6ab850';
+  ctx.lineWidth = 2; ctx.stroke();
+  // Pond
+  ctx.fillStyle = dk ? '#1a2a3a' : '#5a9ac0';
+  ctx.beginPath(); ctx.ellipse(x+15, y+5, 12, 6, 0.2, 0, 6.28); ctx.fill();
+  ctx.strokeStyle = dk ? '#2a3a4a' : '#80b0d0'; ctx.lineWidth = 1; ctx.stroke();
+  // Benches
+  ctx.fillStyle = dk ? '#3a2a15' : '#7a5a30';
+  ctx.fillRect(x-20, y+8, 14, 3);
+  ctx.fillRect(x-18, y+11, 2, 3);
+  ctx.fillRect(x-8, y+11, 2, 3);
+  // Trees in park (extra)
+  for (let i = -1; i <= 1; i++) {
+    const tx = x + i*22;
+    ctx.fillStyle = dk ? '#3a2a15' : '#6b4226'; ctx.fillRect(tx-2, y-4, 4, 10);
+    ctx.fillStyle = dk ? '#1a4a18' : '#3a8a30'; ctx.beginPath(); ctx.arc(tx, y-10, 8+Math.abs(i)*2, 0, 6.28); ctx.fill();
+    ctx.fillStyle = dk ? '#2a5a28' : '#55aa45'; ctx.beginPath(); ctx.arc(tx-2, y-12, 4, 0, 6.28); ctx.fill();
+  }
+  // Label
+  ctx.font = 'bold 10px Segoe UI'; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+  ctx.fillStyle = 'rgba(0,0,0,0.5)'; ctx.fillText('Willow Park', x+1, y+19);
+  ctx.fillStyle = dk ? '#90a880' : '#fff'; ctx.fillText('Willow Park', x, y+18);
 }
 
 function dim(hex, f) {
+  if (hex.startsWith('rgb')) return hex; // already rgb
   const r=parseInt(hex.slice(1,3),16), g=parseInt(hex.slice(3,5),16), b=parseInt(hex.slice(5,7),16);
   return `rgb(${~~(r*f)},${~~(g*f)},${~~(b*f)})`;
 }
 
 // ============================================================
-// COUPLE LINES (hearts between partners)
+// COUPLE LINES
 // ============================================================
 function drawCoupleLines(W, H) {
   const drawn = new Set();
@@ -670,7 +871,7 @@ function drawHeart(x, y, s, color) {
 }
 
 // ============================================================
-// CONVERSATION BUBBLES on canvas
+// CONVERSATION BUBBLES
 // ============================================================
 function drawConversationBubbles(W, H) {
   if (!conversationData.active) return;
@@ -687,18 +888,11 @@ function drawConversationBubbles(W, H) {
     const bw = tw + 14, bh = 18;
     const bx = pos.x - bw/2, by = pos.y - 48;
 
-    // Bubble background
     ctx.fillStyle = 'rgba(240,192,64,0.9)';
+    ctx.beginPath(); ctx.roundRect(bx, by, bw, bh, 4); ctx.fill();
     ctx.beginPath();
-    ctx.roundRect(bx, by, bw, bh, 4);
-    ctx.fill();
-    // Pointer
-    ctx.beginPath();
-    ctx.moveTo(pos.x - 4, by + bh);
-    ctx.lineTo(pos.x, by + bh + 6);
-    ctx.lineTo(pos.x + 4, by + bh);
+    ctx.moveTo(pos.x - 4, by + bh); ctx.lineTo(pos.x, by + bh + 6); ctx.lineTo(pos.x + 4, by + bh);
     ctx.fill();
-    // Text
     ctx.fillStyle = '#1a1a2e';
     ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
     ctx.fillText(msg, pos.x, by + bh/2);
@@ -706,10 +900,10 @@ function drawConversationBubbles(W, H) {
 }
 
 // ============================================================
-// AGENT TARGET COMPUTATION
+// AGENT POSITIONS
 // ============================================================
 function computeAgentTarget(id, agent, globalIdx, byLoc, W, H) {
-  const loc = agent.location || 'home_north';
+  const loc = agent.location || 'house_elena';
   const pos = LOCATION_POSITIONS[loc];
   if (!pos) return;
 
@@ -717,13 +911,25 @@ function computeAgentTarget(id, agent, globalIdx, byLoc, W, H) {
   const localIdx = atLoc.findIndex(a => a.id === id);
   const count = atLoc.length;
 
-  const radius = 32 + Math.floor(count/6)*14;
-  const step = Math.PI / Math.max(count+1, 2);
-  const angle = step * (localIdx+1);
-  const ox = Math.cos(angle)*radius - radius/2;
-  const oy = Math.sin(angle)*radius*0.5 + 30;
-
-  agentTargets[id] = { x: pos.x*W + ox, y: pos.y*H + oy };
+  // For streets, spread agents along the road
+  if (pos.type === 'street') {
+    const spread = Math.min(count, 10);
+    const step = 0.04;
+    const startX = pos.x - (spread-1)*step/2;
+    agentTargets[id] = {
+      x: (startX + localIdx * step) * W,
+      y: pos.y * H + 16 + (localIdx % 2) * 12
+    };
+  } else {
+    // Cluster around building
+    const radius = pos.type === 'house' ? 18 + Math.floor(count/3)*8 : 28 + Math.floor(count/5)*10;
+    const step = Math.PI / Math.max(count+1, 2);
+    const angle = step * (localIdx+1);
+    const ox = Math.cos(angle)*radius - radius/3;
+    const oy = Math.sin(angle)*radius*0.5 + (pos.type === 'house' ? 22 : 30);
+
+    agentTargets[id] = { x: pos.x*W + ox, y: pos.y*H + oy };
+  }
   if (!agentPositions[id]) agentPositions[id] = {...agentTargets[id]};
 }
 
@@ -868,18 +1074,17 @@ function onCanvasMouseMove(e) {
   const W=canvas.width, H=canvas.height;
   const tt=document.getElementById('tooltip');
 
-  // Check agents first
   let foundAgent=null;
   for (const [id,pos] of Object.entries(agentPositions)) {
     if(Math.hypot(mx-pos.x,my-pos.y)<22){foundAgent=id;break;}
   }
 
-  // Check locations if no agent
   let foundLoc=null;
   if (!foundAgent) {
     for (const [id, pos] of Object.entries(LOCATION_POSITIONS)) {
       const lx=pos.x*W, ly=pos.y*H;
-      if(Math.hypot(mx-lx,my-ly)<35){foundLoc=id;break;}
+      const hitR = pos.type === 'house' ? 25 : 35;
+      if(Math.hypot(mx-lx,my-ly)<hitR){foundLoc=id;break;}
     }
   }
 
@@ -897,7 +1102,6 @@ function onCanvasMouseMove(e) {
     }
   }
 
-  // Location tooltip
   if (!foundAgent && foundLoc && locations[foundLoc]) {
     const loc = locations[foundLoc];
     const occ = (loc.occupants||[]);
@@ -926,7 +1130,6 @@ function onCanvasMouseMove(e) {
 // ============================================================
 function showDefaultDetail() {
   const el = document.getElementById('agent-detail');
-  // Sort agents: those in conversation first, then by name
   const sorted = Object.entries(agents).sort((a,b) => {
     const aConv = a[1].state === 'in_conversation' ? 0 : 1;
     const bConv = b[1].state === 'in_conversation' ? 0 : 1;
@@ -1135,9 +1338,7 @@ function processStateData(data) {
   agents = data.agents || {};
 
   const tick = clock.total_ticks || 0;
-  if (tick !== lastTick) {
-    fetchSecondaryData();
-  }
+  if (tick !== lastTick) fetchSecondaryData();
   lastTick = tick;
 
   if (activeTab === 'agents') {
@@ -1147,13 +1348,11 @@ function processStateData(data) {
 }
 
 async function fetchSecondaryData() {
-  // Locations
   try {
     const locRes = await fetch(`${API_BASE}/city/locations`);
     if (locRes.ok) locations = await locRes.json();
   } catch(e) {}
 
-  // Events
   try {
     const er = await fetch(`${API_BASE}/events`);
     if (er.ok) {
@@ -1164,7 +1363,6 @@ async function fetchSecondaryData() {
     }
   } catch(e) {}
 
-  // Conversations
   if (activeTab === 'conversations') {
     fetchConversations();
   } else {
@@ -1204,16 +1402,12 @@ function connectWebSocket() {
   ws.onclose = () => {
     connected = false;
     document.getElementById('status').innerHTML = '<span class="dot red"></span> Disconnected';
-    // Retry after 3 seconds
     wsRetryTimer = setTimeout(connectWebSocket, 3000);
   };
 
-  ws.onerror = () => {
-    ws.close();
-  };
+  ws.onerror = () => { ws.close(); };
 }
 
-// Polling fallback (also used for initial load)
 async function fetchState() {
   try {
     const res = await fetch(`${API_BASE}/city`);
@@ -1297,9 +1491,7 @@ function showToast(message, type='info') {
   toast.className = 'toast ' + type;
   toast.textContent = message;
   container.appendChild(toast);
-  // Remove after animation
   setTimeout(() => toast.remove(), 5000);
-  // Max 5 toasts at once
   while (container.children.length > 5) container.firstChild.remove();
 }
 
@@ -1309,15 +1501,10 @@ function checkForNotableEvents() {
   lastEventCount = eventLog.length;
 
   for (const msg of newEvents) {
-    if (msg.includes('[ROMANCE]')) {
-      showToast(msg.replace(/\s*\[ROMANCE\]\s*/, ''), 'romance');
-    } else if (msg.includes('[EVENT]') && !msg.includes('Weather')) {
-      showToast(msg.replace(/\s*\[EVENT\]\s*/, ''), 'event');
-    } else if (msg.includes('[GOSSIP]')) {
-      showToast(msg.replace(/\s*\[GOSSIP\]\s*/, ''), 'gossip');
-    } else if (msg.includes('[CONV]') && msg.includes('starts talking')) {
-      showToast(msg.replace(/\s*\[CONV\]\s*/, ''), 'conv');
-    }
+    if (msg.includes('[ROMANCE]')) showToast(msg.replace(/\s*\[ROMANCE\]\s*/, ''), 'romance');
+    else if (msg.includes('[EVENT]') && !msg.includes('Weather')) showToast(msg.replace(/\s*\[EVENT\]\s*/, ''), 'event');
+    else if (msg.includes('[GOSSIP]')) showToast(msg.replace(/\s*\[GOSSIP\]\s*/, ''), 'gossip');
+    else if (msg.includes('[CONV]') && msg.includes('starts talking')) showToast(msg.replace(/\s*\[CONV\]\s*/, ''), 'conv');
   }
 }
 
@@ -1326,10 +1513,9 @@ function checkForNotableEvents() {
 // ============================================================
 initCanvas();
 showDefaultDetail();
-fetchState();          // Initial load via REST
+fetchState();
 fetchControls();
-connectWebSocket();    // Try WebSocket for real-time
-// Polling as fallback — only active when WS is disconnected
+connectWebSocket();
 setInterval(() => { if (!ws || ws.readyState !== WebSocket.OPEN) fetchState(); }, POLL_INTERVAL);
 </script>
 </body>