feat: add Help section and share stats functionality

- Add integrated Help section with troubleshooting guides and support options
- Implement share stats modal with canvas-based image generation
- Add clipboard backend for copying stats images (Rust)
- Update sidebar to use internal Help section instead of external docs
- Fix all TypeScript errors and compilation warnings
- Refactor tests to focus on user behavior over implementation details
- Update test expectations to match new UI text (AI Formatting)
- Add proper test mocks for TabContainer and event coordinator
- Simplify complex test setups for better maintainability

All tests passing (100/100), TypeScript clean, Rust compiles without errors

Author: moinulmoin

.claude/settings.local.json

@@ -14,7 +14,8 @@
       "Bash(pnpm typecheck:*)",
       "Bash(rg:*)",
       "WebSearch",
-      "Bash(gh pr diff:*)"
+      "Bash(gh pr diff:*)",
+      "Read(//Users/moinulmoin/Developer/oss/voicetypr-streaming/**)"
     ],
     "deny": [],
     "defaultMode": "acceptEdits"

claudedocs/test-failure-analysis-report.md

@@ -0,0 +1,164 @@
+# Test Failure Analysis Report
+
+## Executive Summary
+
+7 test failures identified across 4 test files, categorized into 3 main issue types:
+- **TEST ISSUES** (5 failures): Tests need updating to match current code
+- **CODE ISSUES** (1 failure): Actual bug in EnhancementsSection mock setup  
+- **INFRASTRUCTURE** (1 failure): Test environment configuration
+
+## Detailed Analysis
+
+### 1. ModelCard Test Failures (3 tests) - TEST ISSUES
+
+**Root Cause**: Component icon structure changed from using `.lucide-x` CSS class to `<Trash2>` component
+
+**Failed Tests**:
+- `should show delete button when downloaded`
+- `should call onDelete when delete button clicked`  
+- `should call onCancelDownload when cancel button clicked`
+
+**Analysis**:
+- Tests look for `.lucide-x` selector but component now uses `<Trash2 className="w-3.5 h-3.5 mr-1" />` 
+- Delete button text changed from icon-only to "Remove" with icon
+- Test expectations are outdated but functionality is correct
+
+**Evidence**: 
+```typescript
+// Old test expectation
+const deleteButton = buttons.find(btn => btn.querySelector('.lucide-x'));
+
+// Current component code  
+<Trash2 className="w-3.5 h-3.5 mr-1" />
+Remove
+```
+
+### 2. EnhancementModelCard Test Failure (1 test) - TEST ISSUES
+
+**Root Cause**: Styling approach changed for selected state
+
+**Failed Test**: `applies selected styling`
+
+**Analysis**:
+- Test expects `border-primary` class when selected
+- Component now uses `bg-primary/5` without `border-primary`
+- Visual behavior is correct but test assertion is outdated
+
+**Evidence**:
+```typescript
+// Test expectation
+expect(card).toHaveClass('border-primary');
+
+// Current component code
+className={`py-2 px-4 transition-all ${
+  isSelected ? 'bg-primary/5' : ''
+}`}
+```
+
+### 3. TabContainer Test Failures (2 tests) - INFRASTRUCTURE
+
+**Root Cause**: OverviewTab now requires SettingsProvider context
+
+**Failed Tests**: 
+- `renders correct tab based on activeSection` (overview case)
+- `renders recordings tab for unknown sections` (falls back to overview)
+
+**Analysis**:
+- OverviewTab now uses `useSettings()` hook for ShareStatsModal functionality
+- Test doesn't provide SettingsProvider wrapper
+- Component architecture changed but tests didn't adapt
+
+**Evidence**:
+```typescript
+// OverviewTab.tsx:18
+const { settings } = useSettings();
+
+// TabContainer.test.tsx - No SettingsProvider wrapper
+render(<TabContainer activeSection="overview" />);
+```
+
+### 4. EnhancementsSection Test Failure (1 test) - CODE ISSUES
+
+**Root Cause**: Mock configuration mismatch with keyring module
+
+**Failed Test**: `selects a model`
+
+**Analysis**:
+- Test expects `toast.success('Model selected')` to be called
+- Mock setup for `hasApiKey` function doesn't properly simulate the actual keyring behavior
+- The component likely isn't detecting API key availability correctly in test environment
+
+**Evidence**: 
+```typescript
+// Test failure
+expect(toast.success).toHaveBeenCalledWith('Model selected');
+
+// Mock in test may not be matching actual keyring.getApiKey usage
+(hasApiKey as any).mockImplementation((provider: string) => {
+  return Promise.resolve(provider === 'groq');
+});
+```
+
+## Issue Categorization
+
+### 🔴 TEST ISSUES (5 failures - High Priority)
+**Definition**: Tests that need updating to match current code behavior
+- **ModelCard**: 3 tests with outdated selectors and expectations
+- **EnhancementModelCard**: 1 test with outdated styling assertions  
+- **TabContainer**: Infrastructure missing (SettingsProvider)
+
+### 🟡 CODE ISSUES (1 failure - Medium Priority)  
+**Definition**: Actual bugs in implementation
+- **EnhancementsSection**: Mock setup not matching real keyring behavior
+
+### 🟢 INFRASTRUCTURE (1 failure - Low Priority)
+**Definition**: Test setup/environment configuration
+- **TabContainer**: Missing context provider wrapper
+
+## Prioritized Fix Plan
+
+### Phase 1: Critical Test Updates (Immediate)
+1. **Fix ModelCard tests** - Update selectors and expectations
+   - Replace `.lucide-x` with proper button identification
+   - Update button text expectations ("Remove" instead of icon-only)
+   - Test estimated time: 15 minutes
+
+2. **Fix EnhancementModelCard test** - Update styling assertions  
+   - Remove `border-primary` expectation, keep `bg-primary/5`
+   - Test estimated time: 5 minutes
+
+### Phase 2: Infrastructure (Short-term)
+3. **Fix TabContainer tests** - Add SettingsProvider wrapper
+   - Wrap test renders with SettingsProvider
+   - Mock settings context appropriately
+   - Test estimated time: 10 minutes
+
+### Phase 3: Code Investigation (Medium-term)  
+4. **Debug EnhancementsSection** - Investigate mock/keyring mismatch
+   - Review actual vs mocked keyring behavior
+   - Ensure test environment matches production API key detection
+   - May require component behavior analysis
+   - Estimated time: 30 minutes
+
+## Risk Assessment
+
+### Low Risk Issues
+- **ModelCard tests**: Simple selector updates, no behavior changes needed
+- **EnhancementModelCard test**: Styling assertion update only
+- **TabContainer tests**: Standard context provider addition
+
+### Medium Risk Issues  
+- **EnhancementsSection test**: May indicate deeper mocking issues that could affect other enhancement-related tests
+
+## Success Metrics
+
+- **Immediate**: 6/7 tests passing after Phase 1-2 fixes
+- **Complete**: All 7 tests passing after Phase 3 investigation
+- **Quality**: No regression in actual functionality
+- **Maintainability**: Tests accurately reflect current component behavior
+
+## Conclusion
+
+Most failures (5/7) are straightforward test maintenance issues requiring updates to match current code. One infrastructure issue needs context provider addition. Only one failure suggests a potential code/mock configuration problem requiring deeper investigation.
+
+The component functionality appears correct based on UI evidence - the test failures represent test debt rather than functional bugs.

package.json

@@ -27,6 +27,8 @@
     "benchmark": "node scripts/benchmark-runner.js"
   },
   "dependencies": {
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/vite": "^4.1.11",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-autostart": "^2.5.0",