Skip to content
Casaconomy Book

CAS-2271 — AI Bug Report: Screenshot Capture

CAS-2271 — AI Bug Report: Screenshot Capture

Shipped: 2026-05-11 (PR #600 — CAS-2311 Phase 2) Epic owner: Assayer (design gate), Weaver (implementation)

What was built

The AI bug-report sheet now captures a screenshot of the underlying app state before the modal opens, attaches it to the bug report submission, and shows the user a preview card in the chat panel.

User-visible behaviour

  1. When the bug-report sheet opens, it captures a screenshot of the app in the background (before the modal is visible, so the modal is never in the image).
  2. A ScreenshotCard appears in the chat panel below the diagnostic shelf, showing a thumbnail of the captured screen.
  3. The user can retake the screenshot (hides sheet → 150 ms → recaptures → reopens) or remove it entirely.
  4. An include toggle lets the user opt the screenshot out before submitting.
  5. Astrid’s hint copy adapts based on whether a screenshot is attached (bug vs non-bug framing).
  6. The card is hidden on the gateBypass (onboarding) path.
  7. If capture fails, an inline note appears in place of the toggle — no hard error.

Technical shape

Key changes (PR #600):

  • openSheet() made async — screenshot captured before isOpen: true to avoid modal self-photography.
  • captureScreenshotWithPreview() replaces the old captureScreenshot(): uses captureImage() + canvas pipeline, produces raw RGBA bytes + a base64 PNG data URL for the thumbnail.
  • submit() uses stored bytes from capture time — no re-capture at submission.
  • bootstrap() uses stored-bytes flag to avoid duplicate captures on re-entry.
  • ScreenshotCard placed in ChatPanel (post DiagnosticShelf, pre manual-submit) — works for both AI-available and AI-unavailable paths as it sits outside the disabled fieldset.
  • retakeScreenshot() / removeScreenshot() wired to store state.

Files touched:

  • src/components/ReportSheet.tsx
  • src/store/useReportIssueStore.ts
  • test/components/ReportSheet.test.tsx
  • test/store/useReportIssueStore.test.ts

Related PRs:

  • PR #598 (CAS-2284): restricted Claude tool list in bug-report flow + Astrid prompt tightening
  • PR #596 (CAS-2281): unified ReportSheet when AI unavailable (removed FallbackPanel that was a duplicate screenshot-card location)

Constraints and design decisions

  • Screenshot is captured before the modal opens — a pre-capture timing requirement that drives the async openSheet() shape.
  • Bytes are stored once at capture time and reused at submission; no re-capture to avoid latency at submit.
  • The card is kept outside the disabled fieldset so it remains operable on the AI-unavailable path.
  • Retake UX: the sheet hides briefly (150 ms buffer) to give the OS time to composite the underlying view before recapture.