[UltimaPhoenix]

What & why

Every share link lands someone on the docs site's /lesson page, and often that someone has never heard of devcoach. That makes shared lessons devcoach's referral channel. The page spoke only to existing users. Its first words next to the lesson were "No dashboard answered on 127.0.0.1:7860. Start it with devcoach ui…", and the only way in for a newcomer was one small "Install it" link at the bottom of the panel.

Now the page:

• names who shared the lesson, and
• when no dashboard answers, opens the side column with a short New to devcoach? pitch and an install button.

People who already run devcoach see the page exactly as before.

Part of a series of small website PRs from a product/marketing review. Each PR stands on its own. The buttons here are still indigo because the branch is cut from develop; #125 turns them teal.

Before / after

No dashboard detected (a newcomer, or a user whose dashboard isn't running), dark

No dashboard detected, light

Dashboard running. Unchanged apart from the sender's name and the neutral paste hint.

Mobile (390 px, whole page): the lesson first, then the pitch, then Import

_{Captures: production builds served under /dev-coach/, a share code built from the screenshot fixture's Docker lesson (shared by "Alex"), and Playwright with the dashboard probe stubbed as up or down. Images live on the claude/wizardly-hamilton-k6nc1c-pr-media branch, not in this diff.}

Changes

website/src/pages/lesson.tsx + lesson.module.css:

• Header: the eyebrow names the sender, e.g. "Alex shared a devcoach lesson with you". An anonymous share keeps "Someone shared…".
• New panel, New to devcoach?:
  • When it shows: whenever the probe did not find a running dashboard: down, blocked-permission, needs-permission, and Safari's unsupported. It is hidden while checking and when the dashboard is up.
  • What it says: one sentence on what devcoach does, Install devcoach (→ /install), See how it works (→ the docs home), and "Then come back: this link keeps the lesson, ready to import."
  • Placement: it comes first in the side column. On mobile the column follows the lesson, so the order there is lesson → pitch → Import.
• Paste hint: the import panel's old "No devcoach yet? Install it in a minute — or paste the code…" line becomes "Or paste the code into your agent: …", since the install path now has its own panel.
• Sticky column: on desktop it caps its height (100vh minus the navbar) with its own overflow, so its end stays reachable on short windows now that it can hold two panels.
• CHANGELOG.md: one entry under [Unreleased]. Needs a trivial merge if a sibling PR lands first.

The probe, the import link, the decoder and every privacy property of the page are untouched.

Checklist

• npm run lint passes (Biome). The website is outside Biome's scope.
• npm run typecheck. No src/ changes. npm run typecheck --prefix website already fails on develop (TypeScript 7 rejects the inherited baseUrl); the production build compiles the page.
• npm run build --prefix website and npm test --prefix website (8/8) pass
• Checked dashboard up / down, light / dark, 1440 and 390 px
• I kept the PR focused (one logical change)
• I updated docs / CHANGELOG.md where relevant
• Contributor License Agreement: left for the maintainer, since this PR was authored by Claude Code on the maintainer's behalf.

---

Supersedes #130: same change rebased onto today's develop (CHANGELOG conflict resolved) and re-committed under the repository owner so the CLA check passes (the original commit was authored by the cloud session as Claude <noreply@anthropic.com>).