feat: introduce Writing Enhancement features and components

README.md

@@ -23,6 +23,12 @@ Synapse is a Vite + React + TypeScript application that turns complex content in
 - **Rewriter API**: Text simplification with reading level control, tone adjustment (formal/casual), length modification, and streaming support
 - **Translator API**: Multi-language translation (20+ languages) with automatic language detection and format preservation
 - **Prompt API**: Conversational AI with temperature control, system prompts, and streaming responses
+- **Writing Enhancement**: Comprehensive writing assistance combining multiple APIs:
+  - Grammar and spelling correction (Proofreader API)
+  - Tone adjustment (Writer + Rewriter APIs)
+  - Key point extraction for summaries (Prompt API)
+  - Text expansion and elaboration (Writer API)
+  - Actionable writing improvement suggestions (Prompt API)
 - **Service Layer**: Production-ready wrappers with error handling, retry logic, content validation, and sanitization
 
 ### UI Components
@@ -44,11 +50,12 @@ Synapse is a Vite + React + TypeScript application that turns complex content in
 - **Status Indicators**: Visual feedback for API availability, processing state, and elapsed time tracking
 
 ### Developer Experience
-- **Comprehensive Error Handling**: Type-safe error guards for Rewriter, Translator, and Prompt APIs
-- **React Hooks**: `useRewriter`, `useTranslator`, `usePrompt`, `useTextInput`, `useFileUpload`, and `useContentExtraction` for state management
+- **Comprehensive Error Handling**: Type-safe error guards for Rewriter, Translator, Prompt, Writer, and Proofreader APIs
+- **React Hooks**: `useRewriter`, `useTranslator`, `usePrompt`, `useWritingEnhancement`, `useTextInput`, `useFileUpload`, and `useContentExtraction` for state management
 - **Browser Compatibility**: Automatic detection and user-friendly warnings for unsupported browsers
 - **Capability Detection**: Runtime checks for API availability with graceful degradation
 - **File Processing**: Secure local PDF.js worker, content validation, and robust extraction pipeline
+- **Test Infrastructure**: Dedicated test pages for all Chrome AI APIs with real-time diagnostics and event logging
 
 ## Tooling & Architecture
 
@@ -93,13 +100,15 @@ Access interactive demos at `/demos`:
 - **Rewriter API Demo** (`/demos/rewriter`): Test text simplification with various options
 - **Translator API Demo** (`/demos/translator`): Translate between 20+ languages with streaming
 - **Prompt API Demo** (`/demos/prompt`): Conversational AI with advanced configuration
+- **Writing Enhancement Demo** (`/demos/writing-enhancement`): Test comprehensive writing assistance features
 
 Each demo includes:
 - Real-time API status indicators
 - Streaming response visualization
 - Error handling demonstrations
 - Browser compatibility checks
 - Comprehensive diagnostics
+- Event logging for debugging
 
 ## Scripts
 
@@ -213,12 +222,15 @@ clear()
 
 - **Chrome Canary 137+** (or Dev channel)
 - **Chrome AI flags enabled**: Navigate to `chrome://flags` and enable:
-  - `#optimization-guide-on-device-model`
-  - `#prompt-api-for-gemini-nano`
-  - `#translation-api`
-  - `#rewriter-api`
+  - `#optimization-guide-on-device-model` (required for model download)
+  - `#prompt-api-for-gemini-nano` (for Prompt API and writing suggestions)
+  - `#translation-api` (for Translator API)
+  - `#rewriter-api` (for Rewriter API and tone simplification)
+  - `#writer-api` (for Writer and Proofreader APIs - grammar correction, text expansion)
 - **AI model downloaded**: ~2GB download occurs automatically on first use
 
+For detailed setup instructions with screenshots, see the **[Writing Enhancement Setup Guide](./docs/SETUP.md)**.
+
 ## File Upload Configuration
 
 ### Security Features
@@ -261,10 +273,45 @@ The URL extraction feature uses Mozilla Readability to extract clean article con
 - **Supported Sites**: Works best with article-based content (blogs, news sites, documentation)
 - **Content Sanitization**: All extracted HTML is sanitized with DOMPurify to prevent XSS attacks
 
+### Writing Enhancement Service
+```typescript
+import { WritingEnhancementService } from '@/lib/chrome-ai/services'
+
+const service = new WritingEnhancementService()
+await service.initialize()
+
+// Grammar and spelling correction
+const corrected = await service.correctGrammar('Text with erors and mistakes')
+console.log(corrected.stats) // { totalCorrections: 2, grammarErrors: 1, spellingErrors: 1, ... }
+
+// Adjust tone
+const professional = await service.adjustTone('hey whats up!', 'professional')
+const simple = await service.adjustTone('The algorithm utilizes...', 'simple')
+
+// Extract key points
+const keyPoints = await service.extractKeyPoints('Long article text...')
+console.log(keyPoints) // [{ point: "Main idea", importance: "primary" }, ...]
+
+// Get writing suggestions
+const suggestions = await service.getWritingSuggestions('Text to improve')
+console.log(suggestions) // [{ category: "clarity", issue: "...", suggestion: "...", priority: "high" }, ...]
+
+// Expand brief text
+const expanded = await service.expandText('Brief intro', 'medium')
+
+// Run multiple enhancements at once
+const enhanced = await service.enhanceText('Text to enhance', {
+  correctGrammar: true,
+  extractKeyPoints: true,
+  getSuggestions: true,
+  adjustTone: 'professional'
+})
+```
+
 ## Next Steps
 
 - Expand Workspace page with multi-API processing pipelines
 - Add Summarizer and Language Detector API integrations
-- Implement Writer & Proofreader API demos
 - Add automated tests (Vitest + React Testing Library)
 - Integrate state management (Zustand) for cross-component state
+- Add quality scoring and telemetry for Writing Enhancement