Accessibility, UX polish, and build tooling improvements (13 items)

[Copilot]

Addresses 13 medium-priority issues spanning accessibility gaps, UX inconsistencies, and build tooling gaps across the extension.

Accessibility

• Touch support in selection overlay — adds touchstart/touchmove/touchend handlers (with { passive: false }) mirroring the mouse flow; cleanup removes them properly
• Keyboard-navigable asset grid — AssetThumbnail gets role="button", tabIndex={0}, Enter/Space onKeyDown handler, and a descriptive aria-label with human-readable status ("ready to upload" not "draft")

UX Polish

• Forgot Password flow — "Forgot Password?" button (login mode only) calls numbersApi.auth.resetPassword({ email }); shows inline success/error feedback
• Real XHR upload progress — replaces the fake setInterval progress simulation with XMLHttpRequest.upload.onprogress for actual byte-level progress; added getBaseUrl() to ApiClient to avoid accessing private state
• Restricted tab guard — pre-checks tab.url against chrome://, chrome-extension://, Web Store, about:, edge:// before captureVisibleTab, surfacing a user-friendly error instead of a cryptic Chrome API throw
• Watermark output format — WatermarkPayload gains outputFormat/outputQuality; toDataURL() now uses the user's chosen format (png/jpeg/webp) instead of always emitting PNG
• Offscreen operation timeout — both ADD_WATERMARK call sites wrapped in Promise.race with a 30 s deadline

Code Quality

• Canvas state isolation — drawTimestamp and drawLogo wrapped in ctx.save()/ctx.restore() to prevent globalAlpha leakage between operations
• Share page → React — replaces innerHTML string injection with a proper useState/useEffect React component, consistent with popup/options
• Inline style extraction — AssetThumbnail (website row, status group, hunt buttons) and SharePromptModal inline styles moved to named CSS classes in popup.css
• createSignedMetadata → createMetadataPayload — name now reflects reality (JSON serialization, no signing)

Build Tooling

• Source maps — vite.config.ts gets sourcemap: 'hidden'; scripts/package.js excludes *.map from the extension zip via --exclude "*.map"
• Version sync guard — new scripts/validate-version.js asserts package.json and manifest.template.json carry the same version; wired as prebuild so it gates every npm run build

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Feature][Medium] Accessibility, UX polish, and build tooling improvements</issue_title>
<issue_description>## Summary

13 medium-priority improvements spanning accessibility, UX consistency, and build tooling.

Findings

Accessibility

1. No touch event support in selection overlay — src/content/selection-overlay.ts lines 88-91. Only binds mouse events; touch-screen Chromebook/tablet users cannot use selection capture. Add touchstart/touchmove/touchend handlers.

2. No keyboard navigation for popup asset grid — src/popup/popup.tsx lines 538-768. Asset grid items are <div> with onClick but no tabIndex, role, or keyboard handlers. Add role="button", tabIndex={0}, onKeyDown (Enter/Space), and aria-label for WCAG 2.1 compliance.

UX Polish

3. No password reset flow in AuthForm — src/popup/AuthForm.tsx. AuthService.resetPassword() exists (line 154) but no "Forgot Password?" link in the UI. Add link that calls the existing API method.

4. Simulated upload progress is misleading — src/services/UploadService.ts lines 284-297. Progress increments at fixed 500ms intervals regardless of actual upload speed. Use XMLHttpRequest.upload.onprogress for real progress reporting.

5. No graceful handling of restricted tab URLs — src/background/service-worker.ts lines 428-431. captureVisibleTab throws on chrome://, Web Store, etc. with cryptic errors. Pre-check tab.url against restricted patterns and show user-friendly message.

6. Watermark always outputs PNG — src/offscreen/offscreen.ts line 166. canvas.toDataURL('image/png') ignores user's format setting. Pass format/quality to offscreen message and use in toDataURL().

7. No timeout for offscreen document operations — src/background/service-worker.ts lines 241-262. Offscreen message calls have no timeout. Wrap in Promise.race with 30s timeout.

Code Quality

8. Canvas state reuse without save/restore — src/offscreen/offscreen.ts lines 126-167. No ctx.save()/ctx.restore() around drawing operations. Failed logo draw leaves canvas with globalAlpha=0.7.

9. Share page uses raw DOM despite .tsx — src/share/share.tsx. Uses innerHTML instead of React, inconsistent with popup/options pages. Convert to React component.

10. Excessive inline styles in popup — src/popup/popup.tsx (CaptureSection, AssetThumbnail, SharePromptModal). ~80+ lines of inline styles. Extract to CSS classes in popup.css.

11. createSignedMetadata doesn't sign — src/services/UploadService.ts lines 449-471. Method name implies cryptographic signing but only serializes JSON. Rename to createMetadataPayload.

Build Tooling

12. No source map controls — vite.config.ts. No build.sourcemap config. Add sourcemap: 'hidden' and exclude .map from package zip.

13. Version in two places with no sync validation — manifest.template.json line 4, package.json line 3. Add pre-build validation step or make package.json the single source of truth.

Labels

enhancement, priority:medium</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [Feature][Medium] Accessibility, UX polish, and build tooling improvements #31

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.