Add test suite, fix UX anti-patterns, and improve type safety

[Copilot]

Zero test coverage on a security-sensitive extension, alert()/confirm() blocking the popup UI, a fake progress bar incrementing 10% every 500ms regardless of reality, a hard 6-item gallery cap with no escape, and pervasive any types despite strict: true.

Test suite (Vitest)

• vitest + happy-dom added; chrome.storage / chrome.runtime mocked in src/tests/setup.ts
• 44 tests across ApiClient.test.ts (20) and StorageService.test.ts (24)
• "test" / "test:watch" / "test:coverage" scripts added to package.json
• Tests caught a real bug: buildUrl was emitting a trailing ? when all params were null/undefined — fixed in ApiClient.ts

UX: replace native dialogs

alert() / confirm() replaced with inline React components that don't block the popup:

• ErrorToast — dismissible red banner for operation failures
• ConfirmDialog — modal overlay reusing existing notification styles for logout confirmation

Honest upload indicator

The fake 10 %/500 ms interval simulation is gone. The upload status bar now uses a CSS indeterminate animation (@keyframes indeterminate-progress) that honestly reflects "in progress, duration unknown."

Asset gallery pagination

Hard slice(0, 6) cap replaced with a stateful visibleCount (initial page = 6) and a "Show more (N remaining)" button that loads the next page on click. Count resets when the asset list changes.

Inline styles → CSS classes

SharePromptModal, CaptureSection (mode toggle + spinner), PopupHeader, and AssetThumbnail hunt-share buttons all migrated from inline style={{}} objects to named CSS classes. onMouseOver/onMouseOut JS hover simulation removed in favour of CSS :hover.

Type safety

Location	Before	After
popup.tsx message handler	message: any	ExtensionMessage / UploadProgressPayload interfaces
UploadService upload result	result: any	UploadApiResult interface
UploadService error handlers	error: any	error: unknown
UploadService signed metadata	metadata: any	Record<string, unknown>
ApiClient method signatures	body?: any, params?: Record<string, any>	unknown / Record<string, unknown>

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Feature][Medium] Add test suite, improve UX patterns, and enhance asset management</issue_title>
<issue_description>## Summary

Several improvement opportunities that would enhance code quality, user experience, and maintainability.

Finding 1: No Test Suite

The project has zero test files — no unit tests, integration tests, or e2e tests. The package.json has no test script defined. For a security-sensitive application handling blockchain proofs, this is a significant gap.

Fix: Add Vitest (already compatible with the Vite build setup):

• Unit tests for services (AuthService, UploadService, ApiClient)
• Unit tests for IndexedDB operations (mock with fake-indexeddb)
• Component tests for popup and options UI
• Add "test": "vitest run" to package.json scripts

Finding 2: Replace alert()/confirm() with Inline UI

Files: src/popup/popup.tsx, lines 134, 138, 155, 159, 231

Native alert() and confirm() dialogs block the UI and look unprofessional in an extension popup.

Fix: Create toast/notification components for errors and confirmation modals for destructive actions (logout).

Finding 3: Fake Upload Progress Bar

File: src/services/UploadService.ts, lines 284-297

Progress increments by 10% every 500ms regardless of actual upload progress, misleading users about upload status.

Fix: Use XMLHttpRequest with upload.onprogress events for real progress tracking, or display an indeterminate spinner instead of a fake percentage.

Finding 4: Asset Gallery Limited to 6 Items with No Management

File: src/popup/popup.tsx, lines 538-546

Assets are capped at 6 visible items with no pagination, delete, or bulk operations.

Fix: Add pagination/infinite scroll, individual delete buttons, and a "View All" option.

Finding 5: Extensive Inline Styles

File: src/popup/popup.tsx (multiple locations, esp. SharePromptModal lines 855-1025)

Inline style={{}} objects are overused, preventing CSS pseudo-classes (:hover, :focus) and creating maintenance issues. Mouse event handlers simulate hover effects that CSS handles natively.

Fix: Move inline styles to CSS classes. Use CSS :hover instead of onMouseOver/onMouseOut handlers.

Finding 6: Extensive use of any Types

Files: Multiple files across the codebase

any is used liberally despite strict: true in tsconfig, undermining TypeScript's type safety.

Fix: Replace any with proper types. Define interfaces for message payloads, API responses, and event handlers.

Suggested Approach

1. Set up Vitest with chrome API mocks
2. Start with service layer tests (highest value per effort)
3. Replace native dialogs with custom components
4. Add real progress tracking or honest indeterminate indicator
5. Improve asset gallery with pagination
6. Migrate inline styles to CSS modules or classes

Generated by Health Monitor with Omni</issue_description>

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

• Fixes [Feature][Medium] Add test suite, improve UX patterns, and enhance asset management #13

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.