magic

name	magic
description	Redesign the desktop dashboard Live News block with a distinctive “magic” editorial HUD: amber/teal atmosphere, serif hero, split regional desk vs global wire for continent tabs. Invoke when the user says /magic, “magic news panel”, or wants the continent news layout refit.

/magic — Dashboard news panel

When to use

• User types /magic or asks to redesign the news panel on the home dashboard (HomePageClient desktop grid).
• Follow frontend-design in the same turn: commit to a bold direction, avoid generic purple-on-white / Inter-only slop, use layered depth, motion, and intentional typography.

Product rules

1. global continent tab — Single merged live stream (mergeGlobalDashboardNews). No split between “regional desk” and “wire”.
2. Every other continent tab — Two streams:
   • Regional desk: Guardian-backed columns from GET /monitor/continent-news, selected by continentGuardianFeedKeys in frontend/src/lib/dashboard-continent-news.ts (keys must match backend feed names, e.g. Asia-Pacific, United States).
   • Global wire: buildWireNewsItems — live breaking headlines deduped against regional items so the same story does not appear twice.
3. Implementation surface — Prefer edits in:
   • frontend/src/components/dashboard/DashboardMagicNewsPanel.tsx
   • frontend/src/lib/dashboard-continent-news.ts
   • frontend/src/app/HomePageClient.tsx (data wiring only; keep diffs small).

Checklist

• Map UI continents to the correct Guardian feed keys (hyphenation and full names matter).
• Regional hero = first regional item; remaining regional items in a grid; wire list on the side (wide screens) or stacked (narrow).
• Loading: respect newsPending for the whole panel; optional continent feed loading state when regional is still empty.
• Accessibility: links target="_blank" + rel="noopener noreferrer"; focus rings on interactive cards.
• Run npx tsc --noEmit and npm run test in frontend/ after substantive changes.

Aesthetic direction (default for this project)

Magic editorial HUD — dark slate base, warm amber accent, teal secondary, subtle grain and radial glows, Instrument Serif for the hero line, DM Sans for metadata. Staggered framer-motion reveals on lists. Adjust within this family if the product theme shifts, but keep the split data model for non-global tabs.