[nicoloboschi]

What

The docs overview hero now shows the control plane's memory constellation running live — hover, pan, zoom — instead of a screenshot of it.

Two commits:

1. Full-width two-column hero (copy left, product right), flow moved under How It Works.
2. The product side becomes the real Constellation component over a synthetic bank.

How

• src/components/constellation/Constellation.tsx is a near-copy of hindsight-control-plane/src/components/constellation.tsx. Differences:
  • next-intl → a local string table (same keys as messages/en.json)
  • dark mode reads Docusaurus's data-theme instead of a dark class
  • the HUD stats line and the "scroll to zoom" hint are skipped below 760px wide — at the hero's width they ran into the legend and under the toolbar
  • allowFullscreen prop (default true), off in the hero: from inside the band's stacking context (isolation: isolate) the fixed overlay renders behind the navbar and sidebar
• MemoryConstellation.tsx calls it the way the Memories view did: one flat field, coloured by mention recency, observations sized by source facts, same link colours.
• constellation/mock-bank.ts builds a deterministic (seeded) bank with the same rules as GET /graph (MemoryEngine.get_graph_data):
  • semantic / temporal / caused_by links between facts (retain writes only caused_by)
  • observations have no links of their own; they inherit their sources' links and entities, and link semantic to observations sharing a source
  • entity links derived from shared entities, capped at 10 neighbours
  • node colour by entity count, labels cut at 30 chars
• @chenglou/pretext added to the docs package (the component's only dependency).
• Softer shadow on the hero frame; static/img/hindsight-ui.webp removed (no longer referenced).
• The canvas is wrapped in role="figure" with an aria-label (the screenshot had alt text); Share export loads the logo from the docs' /img/logo.png.

Verified

• docusaurus build passes; ./scripts/hooks/lint.sh passes.
• Checked in light and dark, hover tooltips and neighbour highlighting.
• scripts/check-mock-bank.mjs (now part of the docs build) guards the mock bank: every link joins two real memories with a known type and a 0..1 weight, none isolated, observations carry a source count, output is deterministic. Fails loudly on a bad observation source index (verified).

Known

• The component fits the field to the frame's shorter side, so at the hero's 420px height it starts zoomed out (~0.23x) and shows no labels until you zoom in. Fixable with a taller frame or a starting-zoom prop.
• Constellation.tsx is a copy (~1.7k lines); control-plane changes need re-syncing by hand.