[mattpodwysocki]

Description

Moves render_map_tool's numbered side list to a results carousel along the bottom of the map, the pattern ChatGPT uses for its built-in place results. Closes #283.

• Place pins: white pins with a Maki icon for the place's category (Search Box's maki name, else matched from the category, else a plain marker), turning black when selected, like ChatGPT's place results and OpenAI's layout guidance. About 20 common icons are inlined (~12 KB, CC0). Numbered badges stay where the number means something: a caller's numbered label (visit order), optimized stops, start/end.
• Cards: name, capitalized category, price level ($ to $$$$ from Places attributes.price_level) and distance, plus the photo once it loads. A second line shows the hours. No star rating, since Places doesn't have one. The phone number waits for a place detail card.
• Selected pin: the selected place's pin turns black (a numbered badge turns white), comes to the front and shows the place name under it. The matching card gets a border. The first card starts selected.
• Sync both ways: swiping selects the card nearest the middle, clicking a card selects it, and clicking a pin scrolls to its card. The map only pans when the selected pin is off screen or hidden behind the cards.
• No popups for carousel pins. Pins without a card (route ends, the search center) keep theirs.
• Layout: the carousel sits above the Mapbox logo and attribution, the legend moves up above it, and fit-to-bounds padding accounts for both.
• Today's hours: parsed from OSM opening_hours for simple rules (Mo-Fr 07:00-19:00; Sa,Su 08:00-17:00, Su off, 24/7, wrap-around day ranges). Anything else shows no hours rather than wrong ones. When Places gives the place's time zone (telemetry.tags.timezone) the card says "Open until 8:30 PM" in green or "Closed · opens 7:30 AM" in red; otherwise it shows today's hours ("Open 7:30–15:00"). Times use the viewer's locale.
• OpenAI's UI guidelines (fourth commit): every card has a picture (the place's icon as a placeholder when there's no photo), labeled for screen readers; numbered badges pick dark or white text by contrast; and the tool description asks the model not to list the places again after rendering. Still open from those guidelines: one action per card (render_map_tool: click a place to ask the model about it #284), and an Expand-to-fullscreen button (render_map_tool: fullscreen button #286).
• Light and dark: cards, summary chip, legend and messages follow the host's theme (hostContext.theme at ui/initialize and on host-context-changed), falling back to prefers-color-scheme, and use the host's style variables (--color-background-primary, --color-text-primary, …) when sent. The map and pins look the same in both.
• Tool and schema descriptions say "carousel" instead of "panel".

Notes

• Photos still won't show in ChatGPT, since they load through resources/read (open question on render_map_tool: bottom carousel for place results on narrow/inline maps #283).
• feat(render_map_tool): live traffic and Satellite/Traffic buttons on the map #278 (traffic toggles) changes the same file and the legend position, so whichever merges second needs a small fix-up.

Design feedback (PDES-471)

Nikita's review on PDES-471 and the Figma mockup, addressed in the latest commit:

• Category names are capitalized.
• "% popularity" is gone. Places has no star rating, so the card shows the price level instead.
• Hours read "Open until …" / "Closed · opens …" (Dash style) when we know the place's time zone.
• The phone number is off the card until there's a place detail card (not designed yet).
• Every carousel pin shows its name with a white halo and no box, not just the selected one. These are HTML markers, so labels don't collide-hide like map labels. Dense results can overlap.

Testing

• npm test: 1117 pass. New tests cover card/pin selection, pin click scrolling to its card, swipe selection, pan-only-when-hidden, fit padding with the carousel, legend position, and 11 hours-parsing cases.
• npm run lint, tsc, npm run build clean.
• Rendered in headless Chrome at 800x560 and 400x600, in light and dark, from a live category_search_tool result (coffee near SF City Hall): cards, photos, hours and phone all fill in, and card click, pin click and selection sync work. That pass found a pin just above the cards whose name label was hidden behind them, fixed in the second commit (pan when the label is hidden, and only as far as needed). It also showed the summary chip covering the zoom-in button (already the case on main); the third commit moves the zoom buttons below it, copying feat(render_map_tool): live traffic and Satellite/Traffic buttons on the map #278's placeTopLeftControls as-is so the two PRs merge cleanly.
• Not yet checked inside Claude Desktop or ChatGPT.

Checklist

• I've added/updated tests as needed
• I've updated documentation if necessary (CHANGELOG, tool descriptions)
• Checked in Claude Desktop and ChatGPT

🤖 Generated with Claude Code

[zmofei]

Tests, lint, tsc and build pass locally, and the carousel works well on narrow maps. Approving; a few non-blocking comments below.

[zmofei]

On maps wider than about 675px, the first and last cards can't reach the center of the list. So after a scroll, onCardScroll selects card 2 (or the second-to-last) instead, even right after the user clicked card 1 or its pin. Reproduced in Chrome at 800px. Could you let the end cards reach the center (for example side padding of max(32px, 50% - 150px)), or pick the first/last card when the list is scrolled to an end, and add a test with a wide list?

[zmofei]

The description says the cards show the phone, but c85f169 removed the phone from the cards and the pin popups. So the model will skip the phone, and the user sees it nowhere. Please list only what the cards show, and ask the model to add things like the phone or address. The "popularity score" and "under its pin when selected" texts in the schema and RenderMapTool.ts are also out of date.

[zmofei]

#283 suggests the carousel for narrow maps and keeping the side list on wide or fullscreen maps, but this PR removes the side list for all sizes and still closes #283. Is that on purpose? If yes, please say why in the PR and on #283. If not, please add the wide-map case or open a follow-up issue.

[mattpodwysocki]

Merged main in (8114b2e) after #278 landed. That was a real conflict in mapAppHtml.ts:

• feat(render_map_tool): live traffic and Satellite/Traffic buttons on the map #278's legend and traffic scale now share a #legends stack, which moves up above the cards when the carousel shows and drops back to 40px (above the Mapbox logo) when it doesn't. Before, the legend sat at 12px and covered the logo when there were no cards.
• bottomPadding() accounts for the traffic scale too.
• Kept feat(render_map_tool): live traffic and Satellite/Traffic buttons on the map #278's Satellite/Traffic button styles and dropped its #side-panel CSS, since this PR removes the panel.
• Tests: the host-context helper now posts through postToApp so fix: ignore postMessage events not sent by the host window in the map app #308's source check accepts it, the duplicate summary chip test is gone, and the legend test checks the stack's offset.
• CHANGELOG: this entry had drifted into the released 0.17.0-dev.1 section. It's now under Unreleased.

I checked it in Chrome with cards, the legend and traffic on together. Full suite: 1205 pass. Your earlier comments go in the follow-up PR, as discussed.