Improve Academy homepage entry paths and topic previews

[annabellscha]

Summary

• add an above-the-fold intent split so visitors can start with the loop or jump straight to a topic
• turn Academy topic cards into outcome-focused previews with a linked lesson insight panel
• update the evaluation preview copy to reflect the page's manual-review-first message

Testing

• pnpm exec tsc --noEmit --pretty false

Greptile Summary

This PR reworks the Academy homepage by adding an above-the-fold intent split (two Card components routing to the full loop or a specific topic) and upgrading LoopDiagram with a variant="preview" mode that shows outcome-focused copy in each station card and a linked insight panel that updates on hover/focus.

• New variant="preview" prop on LoopDiagram adds outcome and insight fields to each station, renders them inside the cards, and shows a linked preview panel below the diagram driven by the currently active (hovered/focused) station.
• content/academy/index.mdx removes the old prose intro, inserts the two-card intent split, and switches to <LoopDiagram variant="preview" />.
• The evaluation card copy is updated to reflect a manual-review-first framing, matching the underlying page's message.

Confidence Score: 4/5

Safe to merge — changes are confined to a documentation UI component and an MDX page with no backend or data-flow impact.

The logic is straightforward and the new preview mode works correctly for the current data. Two small items worth tidying: useLayoutEffect now captures a render-derived innerHeight in a permanently-empty deps array (was harmless when it was a module constant), and .replace(" ", " ") only replaces the first newline in a title string.

components/academy/LoopDiagram.tsx — the stale closure and replace calls are both there.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[LoopDiagram rendered] --> B{variant prop}
    B -->|compact| C[Auto-cycle active station\nevery 1800ms]
    B -->|preview| D[No auto-cycle\nactive starts at 0]
    C --> E[Station cards with\ntitle + meta tags]
    D --> F[Station cards with\ntitle + outcome text]
    F --> G[Hover / Focus card\nsetActive i]
    G --> H[Preview panel below diagram\nshows insight for STATIONS active]
    H --> I[Link to STATIONS active .href]
    E --> J[Pulse dot highlights\nactive station]

Loading

Prompt To Fix All With AI

Fix the following 2 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 2
components/academy/LoopDiagram.tsx:118-138
**Stale `innerHeight` closure in ResizeObserver**

The `useLayoutEffect` at line 118 captures `innerHeight` from the render scope but runs with an empty dependency array. The `fit` callback inside will always use the value of `innerHeight` from the initial mount. Before this PR, `innerHeight` was a module-level constant (`INNER_H`), so this was harmless. Now it is a render-derived variable that changes with `variant`. If `variant` ever changes after mount, the `ResizeObserver`'s `fit` function will resize the wrapper to the wrong height. Adding `innerHeight` to the deps array (and re-running `fit` when it changes) would close this gap.

### Issue 2 of 2
components/academy/LoopDiagram.tsx:441-464
`String.replace` with a string argument only replaces the **first** occurrence of the target substring. `"Build
datasets"` has a single `
` today, but using `replaceAll` makes the intent explicit and guards against future titles with more than one embedded newline.

```suggestion
          >
            {STATIONS[active].title.replaceAll("\n", " ")}
          </div>
          <div
            style={{
              marginTop: 10,
              fontSize: 14,
              lineHeight: 1.65,
              color: "var(--text-secondary)",
            }}
          >
            {STATIONS[active].insight}
          </div>
          <div
            style={{
              marginTop: 12,
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              color: "var(--text-primary)",
              letterSpacing: "0.04em",
            }}
          >
            Open {STATIONS[active].title.replaceAll("\n", " ")} →
          </div>
```

_{Reviews (1): Last reviewed commit: "academy: clarify homepage entry paths" | Re-trigger Greptile}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
langfuse-docs	Ready	Preview, Comment	May 15, 2026 9:34am

[github-actions]

@claude review