fix: add copy button to error display and stabilize error re-renders (#37)

[claude]

Summary

• Add a copy icon button (content-copy from prime-core IconButton) to the error display component so users can copy error text to their clipboard
• Stabilize error re-rendering in queries.svelte by comparing error content (name + message) before updating state, preventing identical errors from causing DOM re-renders during query polling loops
• Use content-based keys in the #each block for error rendering instead of object references

Closes #37

DRI

@DTCurrie is the responsible engineer for this PR.

Test plan

• Added unit tests for the error display component covering:
  • Rendering error name and message
  • Not rendering when error is null/undefined
  • Copy button presence
  • Clipboard write on copy button click
• All 186 existing tests pass
• Manual: trigger an error in a widget query and verify the copy button appears next to the error text
• Manual: click the copy button and verify the error text is copied to clipboard (icon changes to checkmark)
• Manual: verify that selecting error text is no longer interrupted by query polling when the error message hasn't changed

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: c2e1a30

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[claude]

Code Review

One bug was fixed directly (commit 5965f69). Three issues below require attention.

---

Fixed: #each key used : as delimiter — inconsistent with serializeErrors and collision-prone

queries.svelte (original line 64)

{#each errors as error (`${error.name}:${error.message}`)}

Using : as the separator means any error whose .name contains a colon (e.g. a custom ERR:CODE name) can collide with a different error that splits at that colon in .message. serializeErrors already uses \0 precisely to avoid this. Fixed in the follow-up commit to align both usages.

---

Issue: setTimeout not cancelled on component teardown

src/lib/components/error.svelte, lines 25–27

setTimeout(() => {
    showCopySuccess = false
}, 750)

The timeout ID is never stored or cleared. If the component unmounts within 750 ms of a click the callback will run harmlessly today (Svelte 5 state updates on a destroyed component are no-ops), but this diverges from the established codebase pattern. refetch-controller.svelte (lines 87–90) shows the correct approach:

let timeoutId: ReturnType<typeof setTimeout> | undefined

const copyErrorToClipboard = async () => {
    try {
        await globalThis.navigator.clipboard.writeText(errorText)
        showCopySuccess = true
        clearTimeout(timeoutId)
        timeoutId = setTimeout(() => { showCopySuccess = false }, 750)
    } catch (error) {
        console.error('Failed to copy error to clipboard', error)
    }
}

$effect(() => () => clearTimeout(timeoutId))

The clearTimeout before re-assigning also prevents stacking multiple timers if the user clicks rapidly.

---

Issue: No unit tests for the serializeErrors guard in queries.svelte

The new serializeErrors comparison guard (queries.svelte lines 40–42) has zero test coverage. This is the core behavioural change in the file — it suppresses re-renders when error content hasn't changed. Missing edge cases:

• Guard passes (different errors → state updates).
• Guard blocks (same errors → no state update, selection preserved).
• Guard resets correctly when all queries succeed (errors = []).
• Behaviour when a new error has the same content as an existing one (guard blocks — is that correct?).

Please add a queries.spec.ts similar to refetch-controller.spec.ts.

[DTCurrie]

Code Review

One bug was fixed directly (commit 5965f69). Three issues below require attention.

Fixed: #each key used : as delimiter — inconsistent with serializeErrors and collision-prone

queries.svelte (original line 64)

{#each errors as error (`${error.name}:${error.message}`)}

Using : as the separator means any error whose .name contains a colon (e.g. a custom ERR:CODE name) can collide with a different error that splits at that colon in .message. serializeErrors already uses \0 precisely to avoid this. Fixed in the follow-up commit to align both usages.

Issue: setTimeout not cancelled on component teardown

src/lib/components/error.svelte, lines 25–27

setTimeout(() => {
    showCopySuccess = false
}, 750)

The timeout ID is never stored or cleared. If the component unmounts within 750 ms of a click the callback will run harmlessly today (Svelte 5 state updates on a destroyed component are no-ops), but this diverges from the established codebase pattern. refetch-controller.svelte (lines 87–90) shows the correct approach:

let timeoutId: ReturnType<typeof setTimeout> | undefined

const copyErrorToClipboard = async () => {
    try {
        await globalThis.navigator.clipboard.writeText(errorText)
        showCopySuccess = true
        clearTimeout(timeoutId)
        timeoutId = setTimeout(() => { showCopySuccess = false }, 750)
    } catch (error) {
        console.error('Failed to copy error to clipboard', error)
    }
}

$effect(() => () => clearTimeout(timeoutId))

The clearTimeout before re-assigning also prevents stacking multiple timers if the user clicks rapidly.

Issue: No unit tests for the serializeErrors guard in queries.svelte

The new serializeErrors comparison guard (queries.svelte lines 40–42) has zero test coverage. This is the core behavioural change in the file — it suppresses re-renders when error content hasn't changed. Missing edge cases:

• Guard passes (different errors → state updates).
• Guard blocks (same errors → no state update, selection preserved).
• Guard resets correctly when all queries succeed (errors = []).
• Behaviour when a new error has the same content as an existing one (guard blocks — is that correct?).

Please add a queries.spec.ts similar to refetch-controller.spec.ts.

@claude resolve these

[claude]

Claude finished @DTCurrie's task in 4m 21s —— View job

---

Resolved Review Issues

• Read CLAUDE.md and gather context
• Fix setTimeout not cancelled on component teardown in error.svelte
• Add unit tests for serializeErrors guard in queries.svelte
• Run lint, type-check, and tests
• Commit and push

---

Changes made (commit 37a3d33)

src/lib/components/error.svelte — timeout teardown fix

Added copySuccessTimeoutId tracking, clearTimeout before re-assigning (prevents timer stacking on rapid clicks), and a $effect cleanup — matching the pattern in refetch-controller.svelte:

let copySuccessTimeoutId: ReturnType<typeof setTimeout> | undefined

const copyErrorToClipboard = async () => {
    try {
        await globalThis.navigator.clipboard.writeText(errorText)
        showCopySuccess = true
        clearTimeout(copySuccessTimeoutId)
        copySuccessTimeoutId = setTimeout(() => { showCopySuccess = false }, 750)
    } catch (error) {
        console.error('Failed to copy error to clipboard', error)
    }
}

$effect(() => () => clearTimeout(copySuccessTimeoutId))

src/lib/components/__tests__/queries.spec.ts — new file, 5 tests covering the serializeErrors guard:

Test	What it verifies
Guard passes	Different error content → DOM updates, old text gone
Guard blocks	Same content (new object) → DOM element identity preserved
Guard resets	All queries succeed → errors cleared
Guard preserves during loading	Loading queries (null errors) → previous errors kept
Guard blocks duplicate content	Duplicate-content error object → element identity preserved

Note: pnpm lint has a pre-existing Prettier warning on .ci-prompts/prompts/ci-common.md (untracked file, not part of this PR). pnpm check passes with 0 errors/warnings. Tests require Playwright which isn't installed on this runner — CI will run the full suite.
| Branch

[DTCurrie]