Phase 3 — Rework the install box on the integration detail page

[n-lark]

Phase 3 — Rework the install box on the integration detail page

Goal: Replace the npm install command with a GIF of the palette manager install flow. FlowFuse customers don't have npm access from inside the platform — the command is dead text for them, so it's removal, not demotion.

Current install box: integration.njk:153-165.

• Remove the npm install <id> code block. No disclosure, no advanced toggle.
• Reuse the existing palette manager GIF (/img/installing-node-red-node.gif) — same asset already shown on /node-red/getting-started/library/. No duplicate asset.
  • Accessibility: descriptive alt text + prefers-reduced-motion static-screenshot fallback at src/images/integrations/palette-manager-install.png. Tailwind motion-reduce:hidden / motion-safe:hidden variants swap the two.
• Promote the palette manager link as the primary install CTA, paired with the GIF.
• Update copy to lead with "Install in Node-RED via the palette manager."

Acceptance: No /integrations/{node-id}/ page shows a raw npm install command. Install box leads with the GIF, has alt text and a reduced-motion fallback.

Test plan:

• On /integrations/{any-id}/ (try a certified one and a non-certified one), the install box shows the palette manager GIF + the "Install in Node-RED via the palette manager" copy. No npm install text appears anywhere on the page.
• The "palette manager" link in the install box opens https://flowfuse.com/node-red/getting-started/library/#using-the-palette-manager in a new tab.
• In Chrome DevTools → Rendering → "Emulate CSS media feature prefers-reduced-motion: reduce", the static PNG renders instead of the GIF. Disable the emulation and the GIF returns.
• Both images have descriptive alt text (inspectable via DevTools accessibility panel).
• loading="lazy" is on both images — they don't fetch until they scroll into view.
• The install box width matches the rest of the right-sidebar cards (Quick Stats, Repository, etc.) at 1280px and 768px.