Task 15b — Copy-prompt buttons and reading progress

Agent: component-builder · Model: MiniMax-M3 Depends on: 05 · Parallel with: 15a, 15c · Blocks: 15d Worktree: .agents/scripts/worktree.sh start 15b copy-prompt

Scope

Two small pieces of app.js, as islands. No page migration.

1. `copyPrompt`

Reads #${button.dataset.copyTarget}'s textContent and copies it.

Keeps navigator.clipboard.writeText and the document.execCommand textarea fallback. The fallback exists because the site is served over plain HTTP in workshop settings, where navigator.clipboard is undefined. Deleting it silently breaks the lab for attendees. Keep both paths.
Writes a bilingual result string into #copy-status.
On success, swaps the button's <span> to COPIED / COPIADO and back after 1800 ms.

Targets asserted by verify.mjs: data-copy-target="prompt-install-skills|prompt-basic|prompt-skills".

The prompt bodies are copy-pasted by attendees straight into an agent. Exact whitespace and line breaks matter — verify what lands on the clipboard is byte-identical to today's, not merely visually similar.

2. Reading progress

The scroll listener that sets .reading-progress span's width. It is { passive: true } today; keep it passive.

Language

Both pieces read currentLanguage. Task 15c owns how language is held. Do not invent a second mechanism — take the language as a prop or read the document's lang, and say in your report which you chose so 15c and 15d can align.

Do not

Create src/pages/full-guide.astro. That is 15d.
Touch verify.mjs, tokens.css, src/content/config.ts.
Reformat app.js.
Substitute a near-miss token; mark gaps with /* token-gap: <reason>; owner design-system-keeper */.

Done when

Both clipboard paths present and the fallback actually exercised
#copy-status bilingual, and announced (it is a live region)
Clipboard payload byte-identical to today's for all three targets
pnpm run gate green — the full gate
42 assertions intact

2.1 KiB Raw Permalink Blame History