Add click-to-copy to the URL/link tile (transcript pill + Media→Links)

[joestump-agent]

Part of #14

What

The link "tile" — the accent pill under a message (which shows only the domain) and the Media → Links row — could only be clicked through to open; there was no way to grab the underlying URL. This adds a small icon-only copy button beside each tile that copies the full URL, reusing the existing copy affordance.

How

• copy.js now supports a data-copy-value="<text>" attribute: a button copies that literal string instead of a target element's textContent. This is the clean fit here because the pill's visible text is the domain, not the URL, and links repeat many times per page — pointing each button at a hidden per-item element would mean minting a unique id for every link. data-copy-value wins when both attributes are present; the data-copy-target path (Settings) is unchanged.
• The copy button is rendered as a sibling of the link anchor (inside a .link-tile / .media-link-row wrapper), never a child, so activating it never triggers the tile's click-through-to-open.
• Reuses the existing .copy-btn copy→check icon swap, :focus-visible outline, and the #copy-announce aria-live="polite" announcement — no inline JS, script-src 'self' unchanged. Buttons carry aria-label="Copy link" and are keyboard-operable (native <button>, delegated listener).
• Moved the #copy-announce live region out of the Settings page body and into the persistent page shell (page_end), so the transcript and Media pages announce into it and it survives htmx boosted swaps without being re-rendered. Settings now reuses this shared region (its standalone one is gone; the 3 Settings copy buttons are otherwise untouched).

Styling / Tailwind note

New rules .link-tile, .media-link-row, .copy-btn-inline were added to internal/web/tailwind/input.css. The Tailwind CLI is proxy-blocked (make css → 403), so the built internal/web/static/app.css was hand-mirrored (appended; later rules win) as noted in the file.

Verification

• go build ./... — passes.
• go test ./... — passes.
• Added TestGalleryLinkCopyButton and TestTranscriptLinkCopyButton (in internal/web/gallery_test.go), each asserting the copy control is present with the full URL as its copy source (data-copy-value="<full URL>"), labeled for the keyboard, inline, and that the tile's link-out / click-through-to-open is preserved. The transcript test also asserts the shared #copy-announce region renders in the shell.

Acceptance criteria

• Copy icon on the link tile (transcript pill + Media Links row), keyboard-operable with an aria-label ("Copy link").
• Clicking copies the full URL (not just the domain), with the copy→check confirmation and the #copy-announce aria-live announcement.
• No inline JS / no CSP change (reuses copy.js; script-src 'self').
• Works in light/dark (colors ride the slate theme variables) and doesn't break click-through-to-open.

[joestump-agent]

Review verdict: Approve (posting as a comment — GitHub blocks self-approval on one's own PR)

Solid, well-scoped implementation of issue #14. I checked out claude/issue-14-copy-url-tile in a clean worktree: go build ./... passes and go test ./... passes (full suite green, incl. the new internal/web tests).

Acceptance criteria — all met

• Copies the full URL, not the domain. copy.js gains a data-copy-value path that copies the literal attribute string; both the transcript pill (partials.html:319) and the Media→Links row (gallery.html:171) pass data-copy-value="{{.URL}}". data-copy-value correctly wins over data-copy-target via hasAttribute (copy.js:71), and the Settings data-copy-target path is untouched. The new tests assert the full URL is the copy source in both places.
• Sibling, not child. The copy button is a sibling of the anchor inside a .link-tile span / .media-link-row div wrapper, so activating copy never triggers the tile's click-through-to-open. Both tests assert the link-out (class="link-pill" href=... / class="media-link-url" href=...) is preserved.
• Reuses the existing affordance. Same .copy-btn icon-swap, :focus-visible outline, and data-copy-announce → #copy-announce announce. Native <button> + document-level delegated listener means keyboard (Enter/Space) works and it survives boosted swaps.
• CSP-safe. No inline JS; script-src 'self' unchanged.
• Templating is escape-safe. data-copy-value="{{.URL}}" is attribute-context-escaped by html/template, and getAttribute reads back the raw URL — correct on both ends.

Shared #copy-announce move — verified clean

Relocating the live region from the Settings body into page_end (see inline note) is correct: it now sits outside #main-content, every page composes page_end, and there is exactly one region per render with no duplicate id. settings_test.go:376 still asserts the region on the Settings page and passes, so Settings' existing copy announcements are intact. The region is present on transcript pages (asserted by TestTranscriptLinkCopyButton) and, via the same shell, on Media.

CSS

The four hand-mirrored app.css rules match input.css exactly and are well-formed; appending them last correctly lets .copy-btn-inline { position: static } override the base .copy-btn. The .link-tile span becomes the flex item inside .msg-links (flex-wrap) and there's no .msg-links > a selector to break. See the inline comment for the one follow-up.

Minor / non-blocking

• make css regen (follow-up). The hand-mirror is unavoidable given the proxy 403 and is documented in-file; just worth a real make css regen + diff when online so the built artifact can't drift from input.css.
• Optional: TestGalleryLinkCopyButton doesn't assert #copy-announce on the Media page (the transcript test covers it, and it's the same shared shell), so this is truly optional — a one-line assertion there would fully close the loop.

Nice attention to detail in the comments and tests.

---

Generated by Claude Code

[joestump-agent]

Verified: these four appended rules (.link-tile, .media-link-row, .media-link-row .media-link-url, .copy-btn-inline) match the input.css source declarations exactly, and appending them last is correct — .copy-btn-inline { position: static } needs to win over the base .copy-btn's absolute positioning, and cascade order gives it that. Well-formed and consistent with source.

Caveat/follow-up (non-blocking, and already flagged in-file): because make css is proxy-blocked (403), the built CSS couldn't be regenerated, so this is a hand-mirror. Worth a quick make css regen + diff once network access is available, so the generated artifact and input.css can't silently drift.

---

Generated by Claude Code

[joestump-agent]

Good call relocating the live region here. Confirmed it sits outside #main-content (which lives in page_start), so hx-boost swaps that target #main-content leave it intact, and every page composes page_end — so transcript, Media, and Settings all get exactly one #copy-announce. The old Settings-body region is removed, so there's no duplicate id. settings_test.go:376 still asserts the region is present on the Settings render and passes, confirming the move didn't break Settings' existing copy announcements.

---

Generated by Claude Code

[joestump]

The feature is well done: data-copy-value is the right extension to copy.js (literal value beats hidden-element-plus-id for a pill that shows the domain but copies the URL), the copy button is a sibling of the anchor so copying never navigates, the shared #copy-announce live region moves into the persistent shell where every surface can use it, and the tests cover both surfaces plus the escaping path. One blocker:

Blocking: internal/web/static/app.css was hand-edited instead of rebuilt. The appended block's own comment admits the Tailwind CLI was proxy-blocked. ADR-0007's contract is that the committed app.css is make css output, and the css.yml drift guard reruns the build and fails on any diff — I ran make css on this branch locally and it produces a diff (the hand-appended tail gets replaced by proper minified output). Your input.css source rules are correct, so the fix is just: run make css with a working network, commit the regenerated file.

Heads-up on a cross-PR hazard: #20 hand-appends its own block to the same final line of this file, so these two PRs currently conflict in generated output. Whoever lands second should resolve by regenerating (make css), never by hand-merging the minified line — a hand-resolution that drops this PR's rules would ship the copy buttons with .copy-btn's position:absolute (pinned to the wrong corner of every pill) while all tests stay green.

Non-blocking:

1. This adds the 6th and 7th verbatim copies of the copy-button markup (settings.html already has five). A shared {{define "copy_button"}} taking value/announce-text would keep the icon-swap + aria pattern in one place.
2. Each Links row inlines the ~900B icon-copy/icon-check SVG pair; at the default 200-row page (1000 max) that's ~200KB of duplicated markup per page and per infinite-scroll fragment. An <svg><symbol> block emitted once + <use href="#icon-copy"> per row (or a CSS mask) trims it to ~40B/row.

🤖 Posted on behalf of @joestump by Claude.