Copiable errors and one-tap "File bug" link everywhere

Finn the Weaver — Frontend Engineer

In one breath

Every error message in the app now has a one-tap copy button and a “File bug” link that opens the Astrid chat with that exact error pre-loaded as context.

By the end of this chapter you’ll understand:

• What CopyableError and FileBugButton components do and where they appear
• How openWithError() in useReportIssueStore injects the error into Astrid’s bootstrap prompt
• Why errors no longer auto-dismiss and what the autoClose: false enforcement means for UX

Copiable errors and one-tap “File bug” link everywhere

Status: Delivered
CAS: CAS-2534
Delivered: 2026-05-13
PRs: #686

What’s new

Every error message in the app is now selectable and has a one-tap Copy button. Alongside it, a File bug link opens the Astrid bug-report chat with the exact error already pre-loaded into Astrid’s context — no retyping required. Error notifications no longer auto-dismiss, so the affordances are still there when you’re ready to act.

How to use it

When any error appears — in a toast notification, in the chat panel, in the bug-report submission banner, or in the fallback error screen — you will see:

1. A copy icon next to the error text. One tap copies the full error string to the clipboard.
2. A “File bug” link below or alongside the error. Tapping it opens the Astrid bug-report sheet with a pre-filled context: Astrid greets you by acknowledging the specific error, so you can continue the conversation from there without pasting anything.

Error toasts stay on screen until you dismiss them manually (no 5-second auto-close).

What changed under the hood

• CopyableError.tsx — new component: selectable text + Mantine CopyButton icon; works on iOS WKWebView, macOS, and Windows
• FileBugButton.tsx — new component: opens ReportSheet with openWithError(error, ctx?) and an optional context struct
• useReportIssueStore — added ErrorContext type, prefilledError state, openWithError() action, and isError flag on ChatMessage; buildBootstrapPrompt injects the error so Astrid’s first turn acknowledges it
• errorNotification.ts — new Mantine notification helper that centralises error styling and enforces autoClose: false; five call sites migrated

Why we built it

The regent was iterating on Astrid bug-reports from an iPhone and kept having to screenshot errors and paste them back into a separate chat to diagnose problems. The copy affordance removes that friction in one tap; the “File bug” link collapses the whole screenshot-copy-paste loop into a single touch that lands directly in Astrid with full context.

Known limitations / follow-on work

• On-device verification that Astrid acknowledges the specific error string in turn 1 is deferred to TestFlight testing (CAS-2369 grounding applies).

See it as

A fire alarm panel with a “call the fire brigade” button directly on the face — not in a separate room, not behind a cover you need to flip. The error is the alarm; the copy icon and “File bug” link are the action buttons right there, so you act in the moment rather than trying to reconstruct what you saw after the toast has vanished.

Recap

• CopyableError is a reusable component with selectable text and a Mantine CopyButton icon; FileBugButton opens the report sheet via openWithError() with the error pre-loaded.
• buildBootstrapPrompt in useReportIssueStore injects the pre-filled error so Astrid’s first turn acknowledges the specific problem, removing the need to paste or retype.
• errorNotification.ts centralises error notification styling and enforces autoClose: false across five migrated call sites.

What changed {#what-changed}

This feature shipped in CAS-2534. See: CHANGELOG → 2026-05-18