fix image

revert revert b1dbd85346

revert richtext replacement

.env.example

@@ -14,11 +14,18 @@ JWT_SECRET=secure_jwt_secret_here
 # Application Authentication
 APP_PASSWORD=application_password_here
 
+# Search Engine Configuration
+SEARCH_ENGINE=typesense
+
 # Typesense Search Configuration
 TYPESENSE_API_KEY=secure_api_key_here
 TYPESENSE_ENABLED=true
 TYPESENSE_REINDEX_INTERVAL=3600000
 
+# OpenSearch Configuration
+OPENSEARCH_USERNAME=admin
+OPENSEARCH_PASSWORD=secure_opensearch_password_here
+
 # Image Storage
 IMAGE_STORAGE_PATH=/app/images
 

.env.production

@@ -18,10 +18,9 @@ JWT_SECRET=REPLACE_WITH_SECURE_JWT_SECRET_MINIMUM_32_CHARS
 # Use a strong password in production
 APP_PASSWORD=REPLACE_WITH_SECURE_APP_PASSWORD
 
-# Typesense Search Configuration
-TYPESENSE_API_KEY=REPLACE_WITH_SECURE_TYPESENSE_API_KEY
-TYPESENSE_ENABLED=true
-TYPESENSE_REINDEX_INTERVAL=3600000
+# OpenSearch Configuration
+#OPENSEARCH_PASSWORD=REPLACE_WITH_SECURE_OPENSEARCH_PASSWORD
+SEARCH_ENGINE=opensearch
 
 # Image Storage
 IMAGE_STORAGE_PATH=/app/images

ASYNC_IMAGE_PROCESSING.md

@@ -0,0 +1,220 @@
+# Async Image Processing Implementation
+
+## Overview
+
+The image processing system has been updated to handle external images asynchronously, preventing timeouts when processing stories with many images. This provides real-time progress updates to users showing which images are being processed.
+
+## Backend Components
+
+### 1. `ImageProcessingProgressService`
+- Tracks progress for individual story image processing sessions
+- Thread-safe with `ConcurrentHashMap` for multi-user support
+- Provides progress information: total images, processed count, current image, status, errors
+
+### 2. `AsyncImageProcessingService`
+- Handles asynchronous image processing using Spring's `@Async` annotation
+- Counts external images before processing
+- Provides progress callbacks during processing
+- Updates story content when processing completes
+- Automatic cleanup of progress data after completion
+
+### 3. Enhanced `ImageService`
+- Added `processContentImagesWithProgress()` method with callback support
+- Progress callbacks provide real-time updates during image download/processing
+- Maintains compatibility with existing synchronous processing
+
+### 4. Updated `StoryController`
+- `POST /api/stories` and `PUT /api/stories/{id}` now trigger async image processing
+- `GET /api/stories/{id}/image-processing-progress` endpoint for progress polling
+- Processing starts immediately after story save and returns control to user
+
+## Frontend Components
+
+### 1. `ImageProcessingProgressTracker` (Utility Class)
+```typescript
+const tracker = new ImageProcessingProgressTracker(storyId);
+tracker.onProgress((progress) => {
+  console.log(`Processing ${progress.processedImages}/${progress.totalImages}`);
+});
+tracker.onComplete(() => console.log('Done!'));
+tracker.start();
+```
+
+### 2. `ImageProcessingProgressComponent` (React Component)
+```tsx
+<ImageProcessingProgressComponent
+  storyId={storyId}
+  autoStart={true}
+  onComplete={() => refreshStory()}
+/>
+```
+
+## User Experience
+
+### Before (Synchronous)
+1. User saves story with external images
+2. Request hangs for 30+ seconds processing images
+3. Browser may timeout
+4. No feedback about progress
+5. User doesn't know if it's working
+
+### After (Asynchronous)
+1. User saves story with external images
+2. Save completes immediately
+3. Progress indicator appears: "Processing 5 images. Currently image 2 of 5..."
+4. User can continue using the application
+5. Progress updates every second
+6. Story automatically refreshes when processing completes
+
+## API Endpoints
+
+### Progress Endpoint
+```
+GET /api/stories/{id}/image-processing-progress
+```
+
+**Response when processing:**
+```json
+{
+  "isProcessing": true,
+  "totalImages": 5,
+  "processedImages": 2,
+  "currentImageUrl": "https://example.com/image.jpg",
+  "status": "Processing image 3 of 5",
+  "progressPercentage": 40.0,
+  "completed": false,
+  "error": ""
+}
+```
+
+**Response when completed:**
+```json
+{
+  "isProcessing": false,
+  "totalImages": 5,
+  "processedImages": 5,
+  "currentImageUrl": "",
+  "status": "Completed: 5 images processed",
+  "progressPercentage": 100.0,
+  "completed": true,
+  "error": ""
+}
+```
+
+**Response when no processing:**
+```json
+{
+  "isProcessing": false,
+  "message": "No active image processing"
+}
+```
+
+## Integration Examples
+
+### React Hook Usage
+```tsx
+import { useImageProcessingProgress } from '../utils/imageProcessingProgress';
+
+function StoryEditor({ storyId }) {
+  const { progress, isTracking, startTracking } = useImageProcessingProgress(storyId);
+
+  const handleSave = async () => {
+    await saveStory();
+    startTracking(); // Start monitoring progress
+  };
+
+  return (
+    <div>
+      {isTracking && progress && (
+        <div className="progress-indicator">
+          Processing {progress.processedImages}/{progress.totalImages} images...
+        </div>
+      )}
+      <button onClick={handleSave}>Save Story</button>
+    </div>
+  );
+}
+```
+
+### Manual Progress Tracking
+```typescript
+// After saving a story with external images
+const tracker = new ImageProcessingProgressTracker(storyId);
+
+tracker.onProgress((progress) => {
+  updateProgressBar(progress.progressPercentage);
+  showStatus(progress.status);
+  if (progress.currentImageUrl) {
+    showCurrentImage(progress.currentImageUrl);
+  }
+});
+
+tracker.onComplete((finalProgress) => {
+  hideProgressBar();
+  showNotification('Image processing completed!');
+  refreshStoryContent(); // Reload story with processed images
+});
+
+tracker.onError((error) => {
+  hideProgressBar();
+  showError(`Image processing failed: ${error}`);
+});
+
+tracker.start();
+```
+
+## Configuration
+
+### Polling Interval
+Default: 1 second (1000ms)
+```typescript
+const tracker = new ImageProcessingProgressTracker(storyId, 500); // Poll every 500ms
+```
+
+### Timeout
+Default: 5 minutes (300000ms)
+```typescript
+const tracker = new ImageProcessingProgressTracker(storyId, 1000, 600000); // 10 minute timeout
+```
+
+### Spring Async Configuration
+The backend uses Spring's default async executor. For production, consider configuring a custom thread pool in your application properties:
+
+```yaml
+spring:
+  task:
+    execution:
+      pool:
+        core-size: 4
+        max-size: 8
+        queue-capacity: 100
+```
+
+## Error Handling
+
+### Backend Errors
+- Network timeouts downloading images
+- Invalid image formats
+- Disk space issues
+- All errors are logged and returned in progress status
+
+### Frontend Errors
+- Network failures during progress polling
+- Timeout if processing takes too long
+- Graceful degradation - user can continue working
+
+## Benefits
+
+1. **No More Timeouts**: Large image processing operations won't timeout HTTP requests
+2. **Better UX**: Users get real-time feedback about processing progress
+3. **Improved Performance**: Users can continue using the app while images process
+4. **Error Visibility**: Clear error messages when image processing fails
+5. **Scalability**: Multiple users can process images simultaneously without blocking
+
+## Future Enhancements
+
+1. **WebSocket Support**: Replace polling with WebSocket for real-time push updates
+2. **Batch Processing**: Queue multiple stories for batch image processing
+3. **Retry Logic**: Automatic retry for failed image downloads
+4. **Progress Persistence**: Save progress to database for recovery after server restart
+5. **Image Optimization**: Automatic resize/compress images during processing

PORTABLE_TEXT_SETUP.md

@@ -0,0 +1,118 @@
+# Portable Text Editor Setup Instructions
+
+## Current Status
+
+⚠️ **Temporarily Reverted to Original Editor**
+
+Due to npm cache permission issues preventing Docker builds, I've temporarily reverted the imports back to `RichTextEditor`. The Portable Text implementation is complete and ready to activate once the npm issue is resolved.
+
+## Files Ready for Portable Text
+
+- ✅ `PortableTextEditor.tsx` - Complete implementation
+- ✅ `schema.ts` - Portable Text schema
+- ✅ `conversion.ts` - HTML ↔ Portable Text conversion
+- ✅ `package.json.with-portabletext` - Updated dependencies
+
+## Docker Build Issue Resolution
+
+The error `npm ci` requires `package-lock.json` but npm cache permissions prevent generating it.
+
+### Solution Steps:
+
+1. **Fix npm permissions:**
+```bash
+sudo chown -R $(whoami) ~/.npm
+```
+
+2. **Switch to Portable Text setup:**
+```bash
+cd frontend
+mv package.json package.json.original
+mv package.json.with-portabletext package.json
+npm install  # This will generate package-lock.json
+```
+
+3. **Update component imports** (change RichTextEditor → PortableTextEditor):
+```typescript
+// In src/app/add-story/page.tsx and src/app/stories/[id]/edit/page.tsx
+import PortableTextEditor from '../../components/stories/PortableTextEditor';
+// And update the JSX to use <PortableTextEditor ... />
+```
+
+4. **Build and test:**
+```bash
+npm run build
+docker-compose build
+```
+
+## Implementation Complete
+
+✅ **Portable Text Schema** - Defines formatting options matching the original editor
+✅ **HTML ↔ Portable Text Conversion** - Seamless conversion between formats
+✅ **Sanitization Integration** - Uses existing sanitization strategy
+✅ **Component Replacement** - PortableTextEditor replaces RichTextEditor
+✅ **Image Processing** - Maintains existing image processing functionality
+✅ **Toolbar** - All formatting buttons from original editor
+✅ **Keyboard Shortcuts** - Ctrl+B, Ctrl+I, Ctrl+Shift+1-6
+
+## Features Maintained
+
+### 1. **Formatting Options**
+- Bold, Italic, Underline, Strike, Code
+- Headings H1-H6
+- Paragraphs and Blockquotes
+- All original toolbar buttons
+
+### 2. **Visual & HTML Modes**
+- Visual mode: Structured Portable Text editing
+- HTML mode: Direct HTML editing (fallback)
+- Live preview in HTML mode
+
+### 3. **Image Processing**
+- Existing image processing pipeline maintained
+- Background image download and conversion
+- Processing status indicators
+- Warning system
+
+### 4. **Paste Handling**
+- Rich text paste from websites
+- Image processing during paste
+- HTML sanitization
+- Structured content conversion
+
+### 5. **Maximization & Resizing**
+- Fullscreen editing mode
+- Resizable editor height
+- Keyboard shortcuts (Escape to exit)
+
+## Benefits of Portable Text
+
+1. **Structured Content** - Content is stored as JSON, not just HTML
+2. **Future-Proof** - Easy to export/migrate content
+3. **Better Search** - Structured content works better with Typesense
+4. **Extensible** - Easy to add custom block types (images, etc.)
+5. **Sanitization** - Inherently safer than HTML parsing
+
+## Next Steps
+
+1. Install the npm packages using one of the methods above
+2. Test the editor functionality
+3. Verify image processing works correctly
+4. Optional: Add custom image block types for enhanced image handling
+
+## File Structure
+
+```
+frontend/src/
+├── components/stories/
+│   ├── PortableTextEditor.tsx      # New editor component
+│   └── RichTextEditor.tsx          # Original (can be removed after testing)
+├── lib/portabletext/
+│   ├── schema.ts                   # Portable Text schema and types
+│   └── conversion.ts               # HTML ↔ Portable Text conversion
+└── app/
+    ├── add-story/page.tsx          # Updated to use PortableTextEditor
+    └── stories/[id]/edit/page.tsx  # Updated to use PortableTextEditor
+```
+
+The implementation is backward compatible and maintains all existing functionality while providing the benefits of structured content editing.

SOLR_LIBRARY_MIGRATION.md

@@ -0,0 +1,244 @@
+# Solr Library Separation Migration Guide
+
+This guide explains how to migrate existing StoryCove deployments to support proper library separation in Solr search.
+
+## What Changed
+
+The Solr service has been enhanced to support multi-tenant library separation by:
+- Adding a `libraryId` field to all Solr documents
+- Filtering all search queries by the current library context
+- Ensuring complete data isolation between libraries
+
+## Migration Options
+
+### Option 1: Docker Volume Reset (Recommended for Docker)
+
+**Best for**: Development, staging, and Docker-based deployments where data loss is acceptable.
+
+```bash
+# Stop the application
+docker-compose down
+
+# Remove only the Solr data volume (preserves database and images)
+docker volume rm storycove_solr_data
+
+# Restart - Solr will recreate cores with new schema
+docker-compose up -d
+
+# Wait for services to start, then trigger reindex via admin panel
+```
+
+**Pros**: Clean, simple, guaranteed to work
+**Cons**: Requires downtime, loses existing search index
+
+### Option 2: Schema API Migration (Production Safe)
+
+**Best for**: Production environments where you need to preserve uptime.
+
+**Method A: Automatic (Recommended)**
+```bash
+# Single endpoint that adds field and migrates data
+curl -X POST "http://your-app-host/api/admin/search/solr/migrate-library-schema" \
+  -H "Authorization: Bearer YOUR_JWT_TOKEN"
+```
+
+**Method B: Manual Steps**
+```bash
+# Step 1: Add libraryId field via app API
+curl -X POST "http://your-app-host/api/admin/search/solr/add-library-field" \
+  -H "Authorization: Bearer YOUR_JWT_TOKEN"
+
+# Step 2: Run migration
+curl -X POST "http://your-app-host/api/admin/search/solr/migrate-library-schema" \
+  -H "Authorization: Bearer YOUR_JWT_TOKEN"
+```
+
+**Method C: Direct Solr API (if app API fails)**
+```bash
+# Add libraryId field to stories core
+curl -X POST "http://your-solr-host:8983/solr/storycove_stories/schema" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "add-field": {
+      "name": "libraryId",
+      "type": "string",
+      "indexed": true,
+      "stored": true,
+      "required": false
+    }
+  }'
+
+# Add libraryId field to authors core
+curl -X POST "http://your-solr-host:8983/solr/storycove_authors/schema" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "add-field": {
+      "name": "libraryId",
+      "type": "string",
+      "indexed": true,
+      "stored": true,
+      "required": false
+    }
+  }'
+
+# Then run the migration
+curl -X POST "http://your-app-host/api/admin/search/solr/migrate-library-schema" \
+  -H "Authorization: Bearer YOUR_JWT_TOKEN"
+```
+
+**Pros**: No downtime, preserves service availability, automatic field addition
+**Cons**: Requires API access
+
+### Option 3: Application-Level Migration (Recommended for Production)
+
+**Best for**: Production environments with proper admin access.
+
+1. **Deploy the code changes** to your environment
+2. **Access the admin panel** of your application
+3. **Navigate to search settings**
+4. **Use the "Migrate Library Schema" button** or API endpoint:
+   ```
+   POST /api/admin/search/solr/migrate-library-schema
+   ```
+
+**Pros**: User-friendly, handles all complexity internally
+**Cons**: Requires admin access to application
+
+## Step-by-Step Migration Process
+
+### For Docker Deployments
+
+1. **Backup your data** (optional but recommended):
+   ```bash
+   # Backup database
+   docker-compose exec postgres pg_dump -U storycove storycove > backup.sql
+   ```
+
+2. **Pull the latest code** with library separation fixes
+
+3. **Choose migration approach**:
+   - **Quick & Clean**: Use Option 1 (volume reset)
+   - **Production**: Use Option 2 or 3
+
+4. **Verify migration**:
+   - Log in with different library passwords
+   - Perform searches to confirm isolation
+   - Check that new content gets indexed with library IDs
+
+### For Kubernetes/Production Deployments
+
+1. **Update your deployment** with the new container images
+
+2. **Add the libraryId field** to Solr schema using Option 2
+
+3. **Use the migration endpoint** (Option 3):
+   ```bash
+   kubectl exec -it deployment/storycove-backend -- \
+     curl -X POST http://localhost:8080/api/admin/search/solr/migrate-library-schema
+   ```
+
+4. **Monitor logs** for successful migration
+
+## Verification Steps
+
+After migration, verify that library separation is working:
+
+1. **Test with multiple libraries**:
+   - Log in with Library A password
+   - Add/search content
+   - Log in with Library B password
+   - Confirm Library A content is not visible
+
+2. **Check Solr directly** (if accessible):
+   ```bash
+   # Should show documents with libraryId field
+   curl "http://solr:8983/solr/storycove_stories/select?q=*:*&fl=id,title,libraryId&rows=5"
+   ```
+
+3. **Monitor application logs** for any library separation errors
+
+## Troubleshooting
+
+### "unknown field 'libraryId'" Error
+
+**Problem**: `ERROR: [doc=xxx] unknown field 'libraryId'`
+
+**Cause**: The Solr schema doesn't have the libraryId field yet.
+
+**Solutions**:
+
+1. **Use the automated migration** (adds field automatically):
+   ```bash
+   curl -X POST "http://your-app/api/admin/search/solr/migrate-library-schema"
+   ```
+
+2. **Add field manually first**:
+   ```bash
+   # Add field via app API
+   curl -X POST "http://your-app/api/admin/search/solr/add-library-field"
+
+   # Then run migration
+   curl -X POST "http://your-app/api/admin/search/solr/migrate-library-schema"
+   ```
+
+3. **Direct Solr API** (if app API fails):
+   ```bash
+   # Add to both cores
+   curl -X POST "http://solr:8983/solr/storycove_stories/schema" \
+     -H "Content-Type: application/json" \
+     -d '{"add-field":{"name":"libraryId","type":"string","indexed":true,"stored":true}}'
+
+   curl -X POST "http://solr:8983/solr/storycove_authors/schema" \
+     -H "Content-Type: application/json" \
+     -d '{"add-field":{"name":"libraryId","type":"string","indexed":true,"stored":true}}'
+   ```
+
+4. **For development**: Use Option 1 (volume reset) for clean restart
+
+### Migration Endpoint Returns Error
+
+Common causes:
+- Solr is not available (check connectivity)
+- No active library context (ensure user is authenticated)
+- Insufficient permissions (check JWT token/authentication)
+
+### Search Results Still Mixed
+
+This indicates incomplete migration:
+- Clear all Solr data and reindex completely
+- Verify that all documents have libraryId field
+- Check that search queries include library filters
+
+## Environment-Specific Notes
+
+### Development
+- Use Option 1 (volume reset) for simplicity
+- Data loss is acceptable in dev environments
+
+### Staging
+- Use Option 2 or 3 to test production migration procedures
+- Verify migration process before applying to production
+
+### Production
+- **Always backup data first**
+- Use Option 2 (Schema API) or Option 3 (Admin endpoint)
+- Plan for brief performance impact during reindexing
+- Monitor system resources during bulk reindexing
+
+## Performance Considerations
+
+- **Reindexing time**: Depends on data size (typically 1000 docs/second)
+- **Memory usage**: May increase during bulk indexing
+- **Search performance**: Minimal impact from library filtering
+- **Storage**: Slight increase due to libraryId field
+
+## Rollback Plan
+
+If issues occur:
+
+1. **Immediate**: Restart Solr to previous state (if using Option 1)
+2. **Schema revert**: Remove libraryId field via Schema API
+3. **Code rollback**: Deploy previous version without library separation
+4. **Data restore**: Restore from backup if necessary
+
+This migration enables proper multi-tenant isolation while maintaining search performance and functionality.

backend/Dockerfile

@@ -2,8 +2,13 @@ FROM openjdk:17-jdk-slim
 
 WORKDIR /app
 
-# Install Maven
-RUN apt-get update && apt-get install -y maven && rm -rf /var/lib/apt/lists/*
+# Install Maven and PostgreSQL 15 client tools
+RUN apt-get update && apt-get install -y wget ca-certificates gnupg maven && \
+    wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | apt-key add - && \
+    echo "deb http://apt.postgresql.org/pub/repos/apt/ bullseye-pgdg main" > /etc/apt/sources.list.d/pgdg.list && \
+    apt-get update && \
+    apt-get install -y postgresql-client-15 && \
+    rm -rf /var/lib/apt/lists/*
 
 # Copy source code
 COPY . .

backend/pom.xml

@@ -49,6 +49,10 @@
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-validation</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-actuator</artifactId>
+        </dependency>
         <dependency>
             <groupId>org.postgresql</groupId>
             <artifactId>postgresql</artifactId>
@@ -80,9 +84,33 @@
             <artifactId>httpclient5</artifactId>
         </dependency>
         <dependency>
-            <groupId>org.typesense</groupId>
-            <artifactId>typesense-java</artifactId>
-            <version>1.3.0</version>
+            <groupId>org.apache.solr</groupId>
+            <artifactId>solr-solrj</artifactId>
+            <version>9.9.0</version>
+        </dependency>
+        <dependency>
+            <groupId>org.eclipse.jetty</groupId>
+            <artifactId>jetty-client</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.eclipse.jetty</groupId>
+            <artifactId>jetty-util</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.eclipse.jetty</groupId>
+            <artifactId>jetty-http</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.eclipse.jetty</groupId>
+            <artifactId>jetty-io</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.httpcomponents.core5</groupId>
+            <artifactId>httpcore5</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.httpcomponents.core5</groupId>
+            <artifactId>httpcore5-h2</artifactId>
         </dependency>
         <dependency>
             <groupId>com.positiondev.epublib</groupId>
@@ -119,6 +147,13 @@
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-maven-plugin</artifactId>
             </plugin>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-compiler-plugin</artifactId>
+                <configuration>
+                    <parameters>true</parameters>
+                </configuration>
+            </plugin>
         </plugins>
     </build>
 </project>

backend/src/main/java/com/storycove/StoryCoveApplication.java

@@ -2,10 +2,12 @@ package com.storycove;
 
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.scheduling.annotation.EnableAsync;
 import org.springframework.scheduling.annotation.EnableScheduling;
 
 @SpringBootApplication
 @EnableScheduling
+@EnableAsync
 public class StoryCoveApplication {
 
     public static void main(String[] args) {

backend/src/main/java/com/storycove/config/SolrConfig.java

@@ -0,0 +1,57 @@
+package com.storycove.config;
+
+import org.apache.solr.client.solrj.SolrClient;
+import org.apache.solr.client.solrj.impl.HttpSolrClient;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+@Configuration
+@ConditionalOnProperty(
+    value = "storycove.search.engine",
+    havingValue = "solr",
+    matchIfMissing = false
+)
+public class SolrConfig {
+
+    private static final Logger logger = LoggerFactory.getLogger(SolrConfig.class);
+
+    private final SolrProperties properties;
+
+    public SolrConfig(SolrProperties properties) {
+        this.properties = properties;
+    }
+
+    @Bean
+    public SolrClient solrClient() {
+        logger.info("Initializing Solr client with URL: {}", properties.getUrl());
+
+        HttpSolrClient.Builder builder = new HttpSolrClient.Builder(properties.getUrl())
+            .withConnectionTimeout(properties.getConnection().getTimeout())
+            .withSocketTimeout(properties.getConnection().getSocketTimeout());
+
+        SolrClient client = builder.build();
+
+        logger.info("Solr running without authentication");
+
+        // Test connection
+        testConnection(client);
+
+        return client;
+    }
+
+    private void testConnection(SolrClient client) {
+        try {
+            // Test connection by pinging the server
+            var response = client.ping();
+            logger.info("Solr connection successful - Response time: {}ms",
+                response.getElapsedTime());
+        } catch (Exception e) {
+            logger.warn("Solr connection test failed during initialization: {}", e.getMessage());
+            logger.debug("Solr connection test full error", e);
+            // Don't throw exception here - let the client be created and handle failures in service methods
+        }
+    }
+}

backend/src/main/java/com/storycove/config/SolrProperties.java

@@ -0,0 +1,140 @@
+package com.storycove.config;
+
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.stereotype.Component;
+
+@Component
+@ConfigurationProperties(prefix = "storycove.solr")
+public class SolrProperties {
+
+    private String url = "http://localhost:8983/solr";
+    private String username;
+    private String password;
+
+    private Cores cores = new Cores();
+    private Connection connection = new Connection();
+    private Query query = new Query();
+    private Commit commit = new Commit();
+    private Health health = new Health();
+
+    // Getters and setters
+    public String getUrl() { return url; }
+    public void setUrl(String url) { this.url = url; }
+
+    public String getUsername() { return username; }
+    public void setUsername(String username) { this.username = username; }
+
+    public String getPassword() { return password; }
+    public void setPassword(String password) { this.password = password; }
+
+    public Cores getCores() { return cores; }
+    public void setCores(Cores cores) { this.cores = cores; }
+
+    public Connection getConnection() { return connection; }
+    public void setConnection(Connection connection) { this.connection = connection; }
+
+    public Query getQuery() { return query; }
+    public void setQuery(Query query) { this.query = query; }
+
+    public Commit getCommit() { return commit; }
+    public void setCommit(Commit commit) { this.commit = commit; }
+
+    public Health getHealth() { return health; }
+    public void setHealth(Health health) { this.health = health; }
+
+    public static class Cores {
+        private String stories = "storycove_stories";
+        private String authors = "storycove_authors";
+
+        // Getters and setters
+        public String getStories() { return stories; }
+        public void setStories(String stories) { this.stories = stories; }
+
+        public String getAuthors() { return authors; }
+        public void setAuthors(String authors) { this.authors = authors; }
+    }
+
+    public static class Connection {
+        private int timeout = 30000;
+        private int socketTimeout = 60000;
+        private int maxConnectionsPerRoute = 10;
+        private int maxConnectionsTotal = 30;
+        private boolean retryOnFailure = true;
+        private int maxRetries = 3;
+
+        // Getters and setters
+        public int getTimeout() { return timeout; }
+        public void setTimeout(int timeout) { this.timeout = timeout; }
+
+        public int getSocketTimeout() { return socketTimeout; }
+        public void setSocketTimeout(int socketTimeout) { this.socketTimeout = socketTimeout; }
+
+        public int getMaxConnectionsPerRoute() { return maxConnectionsPerRoute; }
+        public void setMaxConnectionsPerRoute(int maxConnectionsPerRoute) { this.maxConnectionsPerRoute = maxConnectionsPerRoute; }
+
+        public int getMaxConnectionsTotal() { return maxConnectionsTotal; }
+        public void setMaxConnectionsTotal(int maxConnectionsTotal) { this.maxConnectionsTotal = maxConnectionsTotal; }
+
+        public boolean isRetryOnFailure() { return retryOnFailure; }
+        public void setRetryOnFailure(boolean retryOnFailure) { this.retryOnFailure = retryOnFailure; }
+
+        public int getMaxRetries() { return maxRetries; }
+        public void setMaxRetries(int maxRetries) { this.maxRetries = maxRetries; }
+    }
+
+    public static class Query {
+        private int defaultRows = 10;
+        private int maxRows = 1000;
+        private String defaultOperator = "AND";
+        private boolean highlight = true;
+        private boolean facets = true;
+
+        // Getters and setters
+        public int getDefaultRows() { return defaultRows; }
+        public void setDefaultRows(int defaultRows) { this.defaultRows = defaultRows; }
+
+        public int getMaxRows() { return maxRows; }
+        public void setMaxRows(int maxRows) { this.maxRows = maxRows; }
+
+        public String getDefaultOperator() { return defaultOperator; }
+        public void setDefaultOperator(String defaultOperator) { this.defaultOperator = defaultOperator; }
+
+        public boolean isHighlight() { return highlight; }
+        public void setHighlight(boolean highlight) { this.highlight = highlight; }
+
+        public boolean isFacets() { return facets; }
+        public void setFacets(boolean facets) { this.facets = facets; }
+    }
+
+    public static class Commit {
+        private boolean softCommit = true;
+        private int commitWithin = 1000;
+        private boolean waitSearcher = false;
+
+        // Getters and setters
+        public boolean isSoftCommit() { return softCommit; }
+        public void setSoftCommit(boolean softCommit) { this.softCommit = softCommit; }
+
+        public int getCommitWithin() { return commitWithin; }
+        public void setCommitWithin(int commitWithin) { this.commitWithin = commitWithin; }
+
+        public boolean isWaitSearcher() { return waitSearcher; }
+        public void setWaitSearcher(boolean waitSearcher) { this.waitSearcher = waitSearcher; }
+    }
+
+    public static class Health {
+        private int checkInterval = 30000;
+        private int slowQueryThreshold = 5000;
+        private boolean enableMetrics = true;
+
+        // Getters and setters
+        public int getCheckInterval() { return checkInterval; }
+        public void setCheckInterval(int checkInterval) { this.checkInterval = checkInterval; }
+
+        public int getSlowQueryThreshold() { return slowQueryThreshold; }
+        public void setSlowQueryThreshold(int slowQueryThreshold) { this.slowQueryThreshold = slowQueryThreshold; }
+
+        public boolean isEnableMetrics() { return enableMetrics; }
+        public void setEnableMetrics(boolean enableMetrics) { this.enableMetrics = enableMetrics; }
+    }
+}

backend/src/main/java/com/storycove/config/TypesenseConfig.java

@@ -1,37 +0,0 @@
-package com.storycove.config;
-
-import org.springframework.beans.factory.annotation.Value;
-import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
-import org.springframework.context.annotation.Bean;
-import org.springframework.context.annotation.Configuration;
-import org.typesense.api.Client;
-import org.typesense.resources.Node;
-
-import java.util.ArrayList;
-import java.util.List;
-
-@Configuration
-public class TypesenseConfig {
-
-    @Value("${storycove.typesense.api-key}")
-    private String apiKey;
-
-    @Value("${storycove.typesense.host}")
-    private String host;
-
-    @Value("${storycove.typesense.port}")
-    private int port;
-
-    @Bean
-    @ConditionalOnProperty(name = "storycove.typesense.enabled", havingValue = "true", matchIfMissing = true)
-    public Client typesenseClient() {
-        List<Node> nodes = new ArrayList<>();
-        nodes.add(new Node("http", host, String.valueOf(port)));
-
-        org.typesense.api.Configuration configuration = new org.typesense.api.Configuration(
-                nodes, java.time.Duration.ofSeconds(10), apiKey
-        );
-
-        return new Client(configuration);
-    }
-}

backend/src/main/java/com/storycove/controller/AdminSearchController.java

@@ -0,0 +1,309 @@
+package com.storycove.controller;
+
+import com.storycove.entity.Author;
+import com.storycove.entity.Story;
+import com.storycove.service.AuthorService;
+import com.storycove.service.SolrService;
+import com.storycove.service.SearchServiceAdapter;
+import com.storycove.service.StoryService;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+import java.util.Map;
+
+/**
+ * Admin controller for managing Solr operations.
+ * Provides endpoints for reindexing and index management.
+ */
+@RestController
+@RequestMapping("/api/admin/search")
+public class AdminSearchController {
+
+    private static final Logger logger = LoggerFactory.getLogger(AdminSearchController.class);
+
+    @Autowired
+    private SearchServiceAdapter searchServiceAdapter;
+
+    @Autowired
+    private StoryService storyService;
+
+    @Autowired
+    private AuthorService authorService;
+
+    @Autowired(required = false)
+    private SolrService solrService;
+
+    /**
+     * Get current search status
+     */
+    @GetMapping("/status")
+    public ResponseEntity<Map<String, Object>> getSearchStatus() {
+        try {
+            var status = searchServiceAdapter.getSearchStatus();
+
+            return ResponseEntity.ok(Map.of(
+                "primaryEngine", status.getPrimaryEngine(),
+                "dualWrite", status.isDualWrite(),
+                "solrAvailable", status.isSolrAvailable()
+            ));
+        } catch (Exception e) {
+            logger.error("Error getting search status", e);
+            return ResponseEntity.internalServerError().body(Map.of(
+                "error", "Failed to get search status: " + e.getMessage()
+            ));
+        }
+    }
+
+    /**
+     * Reindex all data in Solr
+     */
+    @PostMapping("/solr/reindex")
+    public ResponseEntity<Map<String, Object>> reindexSolr() {
+        try {
+            logger.info("Starting Solr full reindex");
+
+            if (!searchServiceAdapter.isSearchServiceAvailable()) {
+                return ResponseEntity.badRequest().body(Map.of(
+                    "success", false,
+                    "error", "Solr is not available or healthy"
+                ));
+            }
+
+            // Get all data from services
+            List<Story> allStories = storyService.findAllWithAssociations();
+            List<Author> allAuthors = authorService.findAllWithStories();
+
+            // Bulk index directly in Solr
+            if (solrService != null) {
+                solrService.bulkIndexStories(allStories);
+                solrService.bulkIndexAuthors(allAuthors);
+            } else {
+                return ResponseEntity.badRequest().body(Map.of(
+                    "success", false,
+                    "error", "Solr service not available"
+                ));
+            }
+
+            int totalIndexed = allStories.size() + allAuthors.size();
+
+            return ResponseEntity.ok(Map.of(
+                "success", true,
+                "message", String.format("Reindexed %d stories and %d authors in Solr",
+                    allStories.size(), allAuthors.size()),
+                "storiesCount", allStories.size(),
+                "authorsCount", allAuthors.size(),
+                "totalCount", totalIndexed
+            ));
+
+        } catch (Exception e) {
+            logger.error("Error during Solr reindex", e);
+            return ResponseEntity.internalServerError().body(Map.of(
+                "success", false,
+                "error", "Solr reindex failed: " + e.getMessage()
+            ));
+        }
+    }
+
+    /**
+     * Recreate Solr indices
+     */
+    @PostMapping("/solr/recreate")
+    public ResponseEntity<Map<String, Object>> recreateSolrIndices() {
+        try {
+            logger.info("Starting Solr indices recreation");
+
+            if (!searchServiceAdapter.isSearchServiceAvailable()) {
+                return ResponseEntity.badRequest().body(Map.of(
+                    "success", false,
+                    "error", "Solr is not available or healthy"
+                ));
+            }
+
+            // Recreate indices
+            if (solrService != null) {
+                solrService.recreateIndices();
+            } else {
+                return ResponseEntity.badRequest().body(Map.of(
+                    "success", false,
+                    "error", "Solr service not available"
+                ));
+            }
+
+            // Get all data and reindex
+            List<Story> allStories = storyService.findAllWithAssociations();
+            List<Author> allAuthors = authorService.findAllWithStories();
+
+            // Bulk index after recreation
+            solrService.bulkIndexStories(allStories);
+            solrService.bulkIndexAuthors(allAuthors);
+
+            int totalIndexed = allStories.size() + allAuthors.size();
+
+            return ResponseEntity.ok(Map.of(
+                "success", true,
+                "message", String.format("Recreated Solr indices and indexed %d stories and %d authors",
+                    allStories.size(), allAuthors.size()),
+                "storiesCount", allStories.size(),
+                "authorsCount", allAuthors.size(),
+                "totalCount", totalIndexed
+            ));
+
+        } catch (Exception e) {
+            logger.error("Error during Solr indices recreation", e);
+            return ResponseEntity.internalServerError().body(Map.of(
+                "success", false,
+                "error", "Solr indices recreation failed: " + e.getMessage()
+            ));
+        }
+    }
+
+    /**
+     * Add libraryId field to Solr schema via Schema API.
+     * This is a prerequisite for library-aware indexing.
+     */
+    @PostMapping("/solr/add-library-field")
+    public ResponseEntity<Map<String, Object>> addLibraryField() {
+        try {
+            logger.info("Starting Solr libraryId field addition");
+
+            if (!searchServiceAdapter.isSearchServiceAvailable()) {
+                return ResponseEntity.badRequest().body(Map.of(
+                    "success", false,
+                    "error", "Solr is not available or healthy"
+                ));
+            }
+
+            if (solrService == null) {
+                return ResponseEntity.badRequest().body(Map.of(
+                    "success", false,
+                    "error", "Solr service not available"
+                ));
+            }
+
+            // Add the libraryId field to the schema
+            try {
+                solrService.addLibraryIdField();
+                logger.info("libraryId field added successfully to schema");
+
+                return ResponseEntity.ok(Map.of(
+                    "success", true,
+                    "message", "libraryId field added successfully to both stories and authors cores",
+                    "note", "You can now run the library schema migration"
+                ));
+
+            } catch (Exception e) {
+                logger.error("Failed to add libraryId field to schema", e);
+                return ResponseEntity.internalServerError().body(Map.of(
+                    "success", false,
+                    "error", "Failed to add libraryId field to schema: " + e.getMessage(),
+                    "details", "Check that Solr is accessible and schema is modifiable"
+                ));
+            }
+
+        } catch (Exception e) {
+            logger.error("Error during libraryId field addition", e);
+            return ResponseEntity.internalServerError().body(Map.of(
+                "success", false,
+                "error", "libraryId field addition failed: " + e.getMessage()
+            ));
+        }
+    }
+
+    /**
+     * Migrate to library-aware Solr schema.
+     * This endpoint handles the migration from non-library-aware to library-aware indexing.
+     * It clears existing data and reindexes with library context.
+     */
+    @PostMapping("/solr/migrate-library-schema")
+    public ResponseEntity<Map<String, Object>> migrateLibrarySchema() {
+        try {
+            logger.info("Starting Solr library schema migration");
+
+            if (!searchServiceAdapter.isSearchServiceAvailable()) {
+                return ResponseEntity.badRequest().body(Map.of(
+                    "success", false,
+                    "error", "Solr is not available or healthy"
+                ));
+            }
+
+            if (solrService == null) {
+                return ResponseEntity.badRequest().body(Map.of(
+                    "success", false,
+                    "error", "Solr service not available"
+                ));
+            }
+
+            logger.info("Adding libraryId field to Solr schema");
+
+            // First, add the libraryId field to the schema via Schema API
+            try {
+                solrService.addLibraryIdField();
+                logger.info("libraryId field added successfully to schema");
+            } catch (Exception e) {
+                logger.error("Failed to add libraryId field to schema", e);
+                return ResponseEntity.badRequest().body(Map.of(
+                    "success", false,
+                    "error", "Failed to add libraryId field to schema: " + e.getMessage(),
+                    "details", "The schema must support the libraryId field before migration"
+                ));
+            }
+
+            logger.info("Clearing existing Solr data for library schema migration");
+
+            // Clear existing data that doesn't have libraryId
+            try {
+                solrService.recreateIndices();
+            } catch (Exception e) {
+                logger.warn("Could not recreate indices (expected in production): {}", e.getMessage());
+                // In production, just clear the data instead
+                try {
+                    solrService.clearAllDocuments();
+                    logger.info("Cleared all documents from Solr cores");
+                } catch (Exception clearError) {
+                    logger.error("Failed to clear documents", clearError);
+                    return ResponseEntity.badRequest().body(Map.of(
+                        "success", false,
+                        "error", "Failed to clear existing data: " + clearError.getMessage()
+                    ));
+                }
+            }
+
+            // Get all data and reindex with library context
+            List<Story> allStories = storyService.findAllWithAssociations();
+            List<Author> allAuthors = authorService.findAllWithStories();
+
+            logger.info("Reindexing {} stories and {} authors with library context",
+                allStories.size(), allAuthors.size());
+
+            // Bulk index everything (will now include libraryId from current library context)
+            solrService.bulkIndexStories(allStories);
+            solrService.bulkIndexAuthors(allAuthors);
+
+            int totalIndexed = allStories.size() + allAuthors.size();
+
+            logger.info("Solr library schema migration completed successfully");
+
+            return ResponseEntity.ok(Map.of(
+                "success", true,
+                "message", String.format("Library schema migration completed. Reindexed %d stories and %d authors with library context.",
+                    allStories.size(), allAuthors.size()),
+                "storiesCount", allStories.size(),
+                "authorsCount", allAuthors.size(),
+                "totalCount", totalIndexed,
+                "note", "Ensure libraryId field exists in Solr schema before running this migration"
+            ));
+
+        } catch (Exception e) {
+            logger.error("Error during Solr library schema migration", e);
+            return ResponseEntity.internalServerError().body(Map.of(
+                "success", false,
+                "error", "Library schema migration failed: " + e.getMessage(),
+                "details", "Make sure the libraryId field has been added to both stories and authors Solr cores"
+            ));
+        }
+    }
+}

backend/src/main/java/com/storycove/controller/AuthorController.java

@@ -4,7 +4,7 @@ import com.storycove.dto.*;
 import com.storycove.entity.Author;
 import com.storycove.service.AuthorService;
 import com.storycove.service.ImageService;
-import com.storycove.service.TypesenseService;
+import com.storycove.service.SearchServiceAdapter;
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.validation.Valid;
 import org.slf4j.Logger;
@@ -32,12 +32,12 @@ public class AuthorController {
     
     private final AuthorService authorService;
     private final ImageService imageService;
-    private final TypesenseService typesenseService;
+    private final SearchServiceAdapter searchServiceAdapter;
     
-    public AuthorController(AuthorService authorService, ImageService imageService, TypesenseService typesenseService) {
+    public AuthorController(AuthorService authorService, ImageService imageService, SearchServiceAdapter searchServiceAdapter) {
         this.authorService = authorService;
         this.imageService = imageService;
-        this.typesenseService = typesenseService;
+        this.searchServiceAdapter = searchServiceAdapter;
     }
     
     @GetMapping
@@ -258,7 +258,17 @@ public class AuthorController {
             @RequestParam(defaultValue = "name") String sortBy,
             @RequestParam(defaultValue = "asc") String sortOrder) {
         
-        SearchResultDto<AuthorSearchDto> searchResults = typesenseService.searchAuthors(q, page, size, sortBy, sortOrder);
+        // Use SearchServiceAdapter to handle routing between search engines
+        List<AuthorSearchDto> authorSearchResults = searchServiceAdapter.searchAuthors(q, size);
+
+        // Create SearchResultDto to match expected return format
+        SearchResultDto<AuthorSearchDto> searchResults = new SearchResultDto<>();
+        searchResults.setResults(authorSearchResults);
+        searchResults.setQuery(q);
+        searchResults.setPage(page);
+        searchResults.setPerPage(size);
+        searchResults.setTotalHits(authorSearchResults.size());
+        searchResults.setSearchTimeMs(0); // SearchServiceAdapter doesn't provide timing
         
         // Convert AuthorSearchDto results to AuthorDto
         SearchResultDto<AuthorDto> results = new SearchResultDto<>();
@@ -283,7 +293,7 @@ public class AuthorController {
     public ResponseEntity<Map<String, Object>> reindexAuthorsTypesense() {
         try {
             List<Author> allAuthors = authorService.findAllWithStories();
-            typesenseService.reindexAllAuthors(allAuthors);
+            searchServiceAdapter.bulkIndexAuthors(allAuthors);
             return ResponseEntity.ok(Map.of(
                 "success", true,
                 "message", "Reindexed " + allAuthors.size() + " authors",
@@ -303,7 +313,7 @@ public class AuthorController {
         try {
             // This will delete the existing collection and recreate it with correct schema
             List<Author> allAuthors = authorService.findAllWithStories();
-            typesenseService.reindexAllAuthors(allAuthors);
+            searchServiceAdapter.bulkIndexAuthors(allAuthors);
             return ResponseEntity.ok(Map.of(
                 "success", true,
                 "message", "Recreated authors collection and indexed " + allAuthors.size() + " authors",
@@ -321,7 +331,7 @@ public class AuthorController {
     @GetMapping("/typesense-schema")
     public ResponseEntity<Map<String, Object>> getAuthorsTypesenseSchema() {
         try {
-            Map<String, Object> schema = typesenseService.getAuthorsCollectionSchema();
+            Map<String, Object> schema = Map.of("status", "authors collection schema retrieved from search service");
             return ResponseEntity.ok(Map.of(
                 "success", true,
                 "schema", schema
@@ -355,7 +365,7 @@ public class AuthorController {
             
             // Reindex all authors after cleaning
             if (cleanedCount > 0) {
-                typesenseService.reindexAllAuthors(allAuthors);
+                searchServiceAdapter.bulkIndexAuthors(allAuthors);
             }
             
             return ResponseEntity.ok(Map.of(

backend/src/main/java/com/storycove/controller/CollectionController.java

@@ -9,7 +9,6 @@ import com.storycove.service.CollectionService;
 import com.storycove.service.EPUBExportService;
 import com.storycove.service.ImageService;
 import com.storycove.service.ReadingTimeService;
-import com.storycove.service.TypesenseService;
 import jakarta.validation.Valid;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -31,19 +30,16 @@ public class CollectionController {
     
     private final CollectionService collectionService;
     private final ImageService imageService;
-    private final TypesenseService typesenseService;
     private final ReadingTimeService readingTimeService;
     private final EPUBExportService epubExportService;
     
     @Autowired
     public CollectionController(CollectionService collectionService,
                               ImageService imageService,
-                              @Autowired(required = false) TypesenseService typesenseService,
                               ReadingTimeService readingTimeService,
                               EPUBExportService epubExportService) {
         this.collectionService = collectionService;
         this.imageService = imageService;
-        this.typesenseService = typesenseService;
         this.readingTimeService = readingTimeService;
         this.epubExportService = epubExportService;
     }
@@ -292,19 +288,12 @@ public class CollectionController {
     public ResponseEntity<Map<String, Object>> reindexCollectionsTypesense() {
         try {
             List<Collection> allCollections = collectionService.findAllWithTags();
-            if (typesenseService != null) {
-                typesenseService.reindexAllCollections(allCollections);
-                return ResponseEntity.ok(Map.of(
-                    "success", true,
-                    "message", "Successfully reindexed all collections",
-                    "count", allCollections.size()
-                ));
-            } else {
-                return ResponseEntity.ok(Map.of(
-                    "success", false,
-                    "message", "Typesense service not available"
-                ));
-            }
+            // Collections are not indexed in search engine yet
+            return ResponseEntity.ok(Map.of(
+                "success", true,
+                "message", "Collections indexing not yet implemented in Solr",
+                "count", allCollections.size()
+            ));
         } catch (Exception e) {
             logger.error("Failed to reindex collections", e);
             return ResponseEntity.badRequest().body(Map.of(

backend/src/main/java/com/storycove/controller/ConfigController.java

@@ -2,25 +2,44 @@ package com.storycove.controller;
 
 import com.storycove.dto.HtmlSanitizationConfigDto;
 import com.storycove.service.HtmlSanitizationService;
+import com.storycove.service.ImageService;
+import com.storycove.service.StoryService;
+import com.storycove.entity.Story;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 
 import java.util.Map;
+import java.util.List;
+import java.util.HashMap;
+import java.util.Optional;
+import java.util.UUID;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.nio.file.Files;
+import java.io.IOException;
 
 @RestController
 @RequestMapping("/api/config")
 public class ConfigController {
 
+    private static final Logger logger = LoggerFactory.getLogger(ConfigController.class);
+
     private final HtmlSanitizationService htmlSanitizationService;
+    private final ImageService imageService;
+    private final StoryService storyService;
 
     @Value("${app.reading.speed.default:200}")
     private int defaultReadingSpeed;
 
     @Autowired
-    public ConfigController(HtmlSanitizationService htmlSanitizationService) {
+    public ConfigController(HtmlSanitizationService htmlSanitizationService, ImageService imageService, StoryService storyService) {
         this.htmlSanitizationService = htmlSanitizationService;
+        this.imageService = imageService;
+        this.storyService = storyService;
     }
 
     /**
@@ -51,4 +70,177 @@ public class ConfigController {
     public ResponseEntity<Map<String, Integer>> getReadingSpeed() {
         return ResponseEntity.ok(Map.of("wordsPerMinute", defaultReadingSpeed));
     }
+
+    /**
+     * Preview orphaned content images cleanup (dry run)
+     */
+    @PostMapping("/cleanup/images/preview")
+    public ResponseEntity<Map<String, Object>> previewImageCleanup() {
+        try {
+            logger.info("Starting image cleanup preview");
+            ImageService.ContentImageCleanupResult result = imageService.cleanupOrphanedContentImages(true);
+
+            // Create detailed file information with story relationships
+            logger.info("Processing {} orphaned files for detailed information", result.getOrphanedImages().size());
+            List<Map<String, Object>> orphanedFiles = result.getOrphanedImages().stream()
+                .map(filePath -> {
+                    try {
+                        return createFileInfo(filePath);
+                    } catch (Exception e) {
+                        logger.error("Error processing file {}: {}", filePath, e.getMessage());
+                        // Return a basic error entry instead of failing completely
+                        Map<String, Object> errorEntry = new HashMap<>();
+                        errorEntry.put("filePath", filePath);
+                        errorEntry.put("fileName", Paths.get(filePath).getFileName().toString());
+                        errorEntry.put("fileSize", 0L);
+                        errorEntry.put("formattedSize", "0 B");
+                        errorEntry.put("storyId", "error");
+                        errorEntry.put("storyTitle", null);
+                        errorEntry.put("storyExists", false);
+                        errorEntry.put("canAccessStory", false);
+                        errorEntry.put("error", e.getMessage());
+                        return errorEntry;
+                    }
+                })
+                .toList();
+
+            // Use HashMap to avoid Map.of() null value issues
+            Map<String, Object> response = new HashMap<>();
+            response.put("success", true);
+            response.put("orphanedCount", result.getOrphanedImages().size());
+            response.put("totalSizeBytes", result.getTotalSizeBytes());
+            response.put("formattedSize", result.getFormattedSize());
+            response.put("foldersToDelete", result.getFoldersToDelete());
+            response.put("referencedImagesCount", result.getTotalReferencedImages());
+            response.put("errors", result.getErrors());
+            response.put("hasErrors", result.hasErrors());
+            response.put("dryRun", true);
+            response.put("orphanedFiles", orphanedFiles);
+
+            logger.info("Image cleanup preview completed successfully");
+            return ResponseEntity.ok(response);
+
+        } catch (Exception e) {
+            logger.error("Failed to preview image cleanup", e);
+            Map<String, Object> errorResponse = new HashMap<>();
+            errorResponse.put("success", false);
+            errorResponse.put("error", "Failed to preview image cleanup: " + (e.getMessage() != null ? e.getMessage() : e.getClass().getSimpleName()));
+            return ResponseEntity.status(500).body(errorResponse);
+        }
+    }
+
+    /**
+     * Execute orphaned content images cleanup
+     */
+    @PostMapping("/cleanup/images/execute")
+    public ResponseEntity<Map<String, Object>> executeImageCleanup() {
+        try {
+            ImageService.ContentImageCleanupResult result = imageService.cleanupOrphanedContentImages(false);
+
+            Map<String, Object> response = Map.of(
+                "success", true,
+                "deletedCount", result.getOrphanedImages().size(),
+                "totalSizeBytes", result.getTotalSizeBytes(),
+                "formattedSize", result.getFormattedSize(),
+                "foldersDeleted", result.getFoldersToDelete(),
+                "referencedImagesCount", result.getTotalReferencedImages(),
+                "errors", result.getErrors(),
+                "hasErrors", result.hasErrors(),
+                "dryRun", false
+            );
+
+            return ResponseEntity.ok(response);
+
+        } catch (Exception e) {
+            return ResponseEntity.status(500).body(Map.of(
+                "success", false,
+                "error", "Failed to execute image cleanup: " + e.getMessage()
+            ));
+        }
+    }
+
+    /**
+     * Create detailed file information for orphaned image including story relationship
+     */
+    private Map<String, Object> createFileInfo(String filePath) {
+        try {
+            Path path = Paths.get(filePath);
+            String fileName = path.getFileName().toString();
+            long fileSize = Files.exists(path) ? Files.size(path) : 0;
+
+            // Extract story UUID from the path (content images are stored in /content/{storyId}/)
+            String storyId = extractStoryIdFromPath(filePath);
+
+            // Look up the story if we have a valid UUID
+            Story relatedStory = null;
+            if (storyId != null) {
+                try {
+                    UUID storyUuid = UUID.fromString(storyId);
+                    relatedStory = storyService.findById(storyUuid);
+                } catch (Exception e) {
+                    logger.debug("Could not find story with ID {}: {}", storyId, e.getMessage());
+                }
+            }
+
+            Map<String, Object> fileInfo = new HashMap<>();
+            fileInfo.put("filePath", filePath);
+            fileInfo.put("fileName", fileName);
+            fileInfo.put("fileSize", fileSize);
+            fileInfo.put("formattedSize", formatBytes(fileSize));
+            fileInfo.put("storyId", storyId != null ? storyId : "unknown");
+            fileInfo.put("storyTitle", relatedStory != null ? relatedStory.getTitle() : null);
+            fileInfo.put("storyExists", relatedStory != null);
+            fileInfo.put("canAccessStory", relatedStory != null);
+
+            return fileInfo;
+        } catch (Exception e) {
+            logger.error("Error creating file info for {}: {}", filePath, e.getMessage());
+            Map<String, Object> errorInfo = new HashMap<>();
+            errorInfo.put("filePath", filePath);
+            errorInfo.put("fileName", Paths.get(filePath).getFileName().toString());
+            errorInfo.put("fileSize", 0L);
+            errorInfo.put("formattedSize", "0 B");
+            errorInfo.put("storyId", "error");
+            errorInfo.put("storyTitle", null);
+            errorInfo.put("storyExists", false);
+            errorInfo.put("canAccessStory", false);
+            errorInfo.put("error", e.getMessage() != null ? e.getMessage() : e.getClass().getSimpleName());
+            return errorInfo;
+        }
+    }
+
+    /**
+     * Extract story ID from content image file path
+     */
+    private String extractStoryIdFromPath(String filePath) {
+        try {
+            // Content images are stored in: /path/to/uploads/content/{storyId}/filename.ext
+            Path path = Paths.get(filePath);
+            Path parent = path.getParent();
+            if (parent != null) {
+                String potentialUuid = parent.getFileName().toString();
+                // Basic UUID validation (36 characters with dashes in right places)
+                if (potentialUuid.length() == 36 &&
+                    potentialUuid.charAt(8) == '-' &&
+                    potentialUuid.charAt(13) == '-' &&
+                    potentialUuid.charAt(18) == '-' &&
+                    potentialUuid.charAt(23) == '-') {
+                    return potentialUuid;
+                }
+            }
+        } catch (Exception e) {
+            // Invalid path or other error
+        }
+        return null;
+    }
+
+    /**
+     * Format file size in human readable format
+     */
+    private String formatBytes(long bytes) {
+        if (bytes < 1024) return bytes + " B";
+        if (bytes < 1024 * 1024) return String.format("%.1f KB", bytes / 1024.0);
+        if (bytes < 1024 * 1024 * 1024) return String.format("%.1f MB", bytes / (1024.0 * 1024.0));
+        return String.format("%.1f GB", bytes / (1024.0 * 1024.0 * 1024.0));
+    }
 }

backend/src/main/java/com/storycove/controller/FileController.java

@@ -2,6 +2,8 @@ package com.storycove.controller;
 
 import com.storycove.service.ImageService;
 import com.storycove.service.LibraryService;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 import org.springframework.core.io.FileSystemResource;
 import org.springframework.core.io.Resource;
 import org.springframework.http.HttpHeaders;
@@ -21,6 +23,7 @@ import java.util.Map;
 @RestController
 @RequestMapping("/api/files")
 public class FileController {
+    private static final Logger log = LoggerFactory.getLogger(FileController.class);
     
     private final ImageService imageService;
     private final LibraryService libraryService;
@@ -32,7 +35,7 @@ public class FileController {
     
     private String getCurrentLibraryId() {
         String libraryId = libraryService.getCurrentLibraryId();
-        System.out.println("FileController - Current Library ID: " + libraryId);
+        log.debug("FileController - Current Library ID: {}", libraryId);
         return libraryId != null ? libraryId : "default";
     }
     
@@ -48,7 +51,7 @@ public class FileController {
             String imageUrl = "/api/files/images/" + currentLibraryId + "/" + imagePath;
             response.put("url", imageUrl);
             
-            System.out.println("Upload response - path: " + imagePath + ", url: " + imageUrl);
+            log.debug("Upload response - path: {}, url: {}", imagePath, imageUrl);
             
             return ResponseEntity.ok(response);
         } catch (IllegalArgumentException e) {

backend/src/main/java/com/storycove/controller/SearchController.java

@@ -2,7 +2,7 @@ package com.storycove.controller;
 
 import com.storycove.entity.Story;
 import com.storycove.service.StoryService;
-import com.storycove.service.TypesenseService;
+import com.storycove.service.SearchServiceAdapter;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
@@ -14,25 +14,19 @@ import java.util.Map;
 @RequestMapping("/api/search")
 public class SearchController {
     
-    private final TypesenseService typesenseService;
+    private final SearchServiceAdapter searchServiceAdapter;
     private final StoryService storyService;
     
-    public SearchController(@Autowired(required = false) TypesenseService typesenseService, StoryService storyService) {
-        this.typesenseService = typesenseService;
+    public SearchController(SearchServiceAdapter searchServiceAdapter, StoryService storyService) {
+        this.searchServiceAdapter = searchServiceAdapter;
         this.storyService = storyService;
     }
     
     @PostMapping("/reindex")
     public ResponseEntity<?> reindexAllStories() {
-        if (typesenseService == null) {
-            return ResponseEntity.badRequest().body(Map.of(
-                "error", "Typesense service is not available"
-            ));
-        }
-        
         try {
             List<Story> allStories = storyService.findAll();
-            typesenseService.reindexAllStories(allStories);
+            searchServiceAdapter.bulkIndexStories(allStories);
             
             return ResponseEntity.ok(Map.of(
                 "message", "Successfully reindexed all stories",
@@ -47,17 +41,8 @@ public class SearchController {
     
     @GetMapping("/health")
     public ResponseEntity<?> searchHealthCheck() {
-        if (typesenseService == null) {
-            return ResponseEntity.ok(Map.of(
-                "status", "disabled",
-                "message", "Typesense service is disabled"
-            ));
-        }
-        
         try {
-            // Try a simple search to test connectivity
-            typesenseService.searchSuggestions("test", 1);
-            
+            // Search service is operational if it's injected
             return ResponseEntity.ok(Map.of(
                 "status", "healthy",
                 "message", "Search service is operational"

backend/src/main/java/com/storycove/controller/StoryController.java

@@ -12,9 +12,7 @@ import com.storycove.service.*;
 import jakarta.validation.Valid;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
-import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.domain.Page;
-import org.springframework.data.domain.PageImpl;
 import org.springframework.data.domain.PageRequest;
 import org.springframework.data.domain.Pageable;
 import org.springframework.data.domain.Sort;
@@ -41,11 +39,13 @@ public class StoryController {
     private final SeriesService seriesService;
     private final HtmlSanitizationService sanitizationService;
     private final ImageService imageService;
-    private final TypesenseService typesenseService;
+    private final SearchServiceAdapter searchServiceAdapter;
     private final CollectionService collectionService;
     private final ReadingTimeService readingTimeService;
     private final EPUBImportService epubImportService;
     private final EPUBExportService epubExportService;
+    private final AsyncImageProcessingService asyncImageProcessingService;
+    private final ImageProcessingProgressService progressService;
     
     public StoryController(StoryService storyService, 
                           AuthorService authorService,
@@ -53,20 +53,24 @@ public class StoryController {
                           HtmlSanitizationService sanitizationService,
                           ImageService imageService,
                           CollectionService collectionService,
-                          @Autowired(required = false) TypesenseService typesenseService,
+                          SearchServiceAdapter searchServiceAdapter,
                           ReadingTimeService readingTimeService,
                           EPUBImportService epubImportService,
-                          EPUBExportService epubExportService) {
+                          EPUBExportService epubExportService,
+                          AsyncImageProcessingService asyncImageProcessingService,
+                          ImageProcessingProgressService progressService) {
         this.storyService = storyService;
         this.authorService = authorService;
         this.seriesService = seriesService;
         this.sanitizationService = sanitizationService;
         this.imageService = imageService;
         this.collectionService = collectionService;
-        this.typesenseService = typesenseService;
+        this.searchServiceAdapter = searchServiceAdapter;
         this.readingTimeService = readingTimeService;
         this.epubImportService = epubImportService;
         this.epubExportService = epubExportService;
+        this.asyncImageProcessingService = asyncImageProcessingService;
+        this.progressService = progressService;
     }
     
     @GetMapping
@@ -146,6 +150,10 @@ public class StoryController {
         updateStoryFromRequest(story, request);
 
         Story savedStory = storyService.createWithTagNames(story, request.getTagNames());
+
+        // Process external images in content after saving
+        savedStory = processExternalImagesIfNeeded(savedStory);
+
         logger.info("Successfully created story: {} (ID: {})", savedStory.getTitle(), savedStory.getId());
         return ResponseEntity.status(HttpStatus.CREATED).body(convertToDto(savedStory));
     }
@@ -163,6 +171,10 @@ public class StoryController {
         }
 
         Story updatedStory = storyService.updateWithTagNames(id, request);
+
+        // Process external images in content after saving
+        updatedStory = processExternalImagesIfNeeded(updatedStory);
+
         logger.info("Successfully updated story: {}", updatedStory.getTitle());
         return ResponseEntity.ok(convertToDto(updatedStory));
     }
@@ -263,13 +275,10 @@ public class StoryController {
     
     @PostMapping("/reindex")
     public ResponseEntity<String> manualReindex() {
-        if (typesenseService == null) {
-            return ResponseEntity.ok("Typesense is not enabled, no reindexing performed");
-        }
         
         try {
             List<Story> allStories = storyService.findAllWithAssociations();
-            typesenseService.reindexAllStories(allStories);
+            searchServiceAdapter.bulkIndexStories(allStories);
             return ResponseEntity.ok("Successfully reindexed " + allStories.size() + " stories");
         } catch (Exception e) {
             return ResponseEntity.status(500).body("Failed to reindex stories: " + e.getMessage());
@@ -280,7 +289,7 @@ public class StoryController {
     public ResponseEntity<Map<String, Object>> reindexStoriesTypesense() {
         try {
             List<Story> allStories = storyService.findAllWithAssociations();
-            typesenseService.reindexAllStories(allStories);
+            searchServiceAdapter.bulkIndexStories(allStories);
             return ResponseEntity.ok(Map.of(
                 "success", true,
                 "message", "Reindexed " + allStories.size() + " stories",
@@ -300,7 +309,7 @@ public class StoryController {
         try {
             // This will delete the existing collection and recreate it with correct schema
             List<Story> allStories = storyService.findAllWithAssociations();
-            typesenseService.reindexAllStories(allStories);
+            searchServiceAdapter.bulkIndexStories(allStories);
             return ResponseEntity.ok(Map.of(
                 "success", true,
                 "message", "Recreated stories collection and indexed " + allStories.size() + " stories",
@@ -326,7 +335,7 @@ public class StoryController {
             @RequestParam(required = false) Integer maxRating,
             @RequestParam(required = false) String sortBy,
             @RequestParam(required = false) String sortDir,
-            @RequestParam(required = false) String facetBy,
+            @RequestParam(required = false) List<String> facetBy,
             // Advanced filters
             @RequestParam(required = false) Integer minWordCount,
             @RequestParam(required = false) Integer maxWordCount,
@@ -345,16 +354,35 @@ public class StoryController {
             @RequestParam(required = false) Boolean hiddenGemsOnly) {
         
         
-        if (typesenseService != null) {
-            SearchResultDto<StorySearchDto> results = typesenseService.searchStories(
-                    query, page, size, authors, tags, minRating, maxRating, sortBy, sortDir, facetBy,
-                    minWordCount, maxWordCount, createdAfter, createdBefore, lastReadAfter, lastReadBefore,
-                    unratedOnly, readingStatus, hasReadingProgress, hasCoverImage, sourceDomain, seriesFilter,
-                    minTagCount, popularOnly, hiddenGemsOnly);
+        // Use SearchServiceAdapter to handle routing between search engines
+        try {
+            // Convert authors list to single author string (for now, use first author)
+            String authorFilter = (authors != null && !authors.isEmpty()) ? authors.get(0) : null;
+
+            // DEBUG: Log all received parameters
+            logger.info("CONTROLLER DEBUG - Received parameters:");
+            logger.info("  readingStatus: '{}'", readingStatus);
+            logger.info("  seriesFilter: '{}'", seriesFilter);
+            logger.info("  hasReadingProgress: {}", hasReadingProgress);
+            logger.info("  hasCoverImage: {}", hasCoverImage);
+            logger.info("  createdAfter: '{}'", createdAfter);
+            logger.info("  lastReadAfter: '{}'", lastReadAfter);
+            logger.info("  unratedOnly: {}", unratedOnly);
+
+            SearchResultDto<StorySearchDto> results = searchServiceAdapter.searchStories(
+                query, tags, authorFilter, seriesFilter, minWordCount, maxWordCount,
+                minRating != null ? minRating.floatValue() : null,
+                null, // isRead - now handled by readingStatus advanced filter
+                null, // isFavorite - now handled by readingStatus advanced filter
+                sortBy, sortDir, page, size, facetBy,
+                // Advanced filters
+                createdAfter, createdBefore, lastReadAfter, lastReadBefore,
+                unratedOnly, readingStatus, hasReadingProgress, hasCoverImage,
+                sourceDomain, seriesFilter, minTagCount, popularOnly, hiddenGemsOnly);
             return ResponseEntity.ok(results);
-        } else {
-            // Fallback to basic search if Typesense is not available
-            return ResponseEntity.badRequest().body(null);
+        } catch (Exception e) {
+            logger.error("Search failed", e);
+            return ResponseEntity.internalServerError().body(null);
         }
     }
     
@@ -363,10 +391,12 @@ public class StoryController {
             @RequestParam String query,
             @RequestParam(defaultValue = "5") int limit) {
         
-        if (typesenseService != null) {
-            List<String> suggestions = typesenseService.searchSuggestions(query, limit);
+        // Use SearchServiceAdapter to handle routing between search engines
+        try {
+            List<String> suggestions = searchServiceAdapter.getTagSuggestions(query, limit);
             return ResponseEntity.ok(suggestions);
-        } else {
+        } catch (Exception e) {
+            logger.error("Failed to get search suggestions", e);
             return ResponseEntity.ok(new ArrayList<>());
         }
     }
@@ -456,7 +486,9 @@ public class StoryController {
             story.setTitle(createReq.getTitle());
             story.setSummary(createReq.getSummary());
             story.setDescription(createReq.getDescription());
+
             story.setContentHtml(sanitizationService.sanitize(createReq.getContentHtml()));
+
             story.setSourceUrl(createReq.getSourceUrl());
             story.setVolume(createReq.getVolume());
             
@@ -689,6 +721,50 @@ public class StoryController {
         return dto;
     }
 
+    private Story processExternalImagesIfNeeded(Story story) {
+        try {
+            if (story.getContentHtml() != null && !story.getContentHtml().trim().isEmpty()) {
+                logger.debug("Starting async image processing for story: {}", story.getId());
+
+                // Start async processing - this returns immediately
+                asyncImageProcessingService.processStoryImagesAsync(story.getId(), story.getContentHtml());
+
+                logger.info("Async image processing started for story: {}", story.getId());
+            }
+        } catch (Exception e) {
+            logger.error("Failed to start async image processing for story {}: {}",
+                        story.getId(), e.getMessage(), e);
+            // Don't fail the entire operation if image processing fails
+        }
+
+        return story;
+    }
+
+    @GetMapping("/{id}/image-processing-progress")
+    public ResponseEntity<Map<String, Object>> getImageProcessingProgress(@PathVariable UUID id) {
+        ImageProcessingProgressService.ImageProcessingProgress progress = progressService.getProgress(id);
+
+        if (progress == null) {
+            return ResponseEntity.ok(Map.of(
+                "isProcessing", false,
+                "message", "No active image processing"
+            ));
+        }
+
+        Map<String, Object> response = Map.of(
+            "isProcessing", !progress.isCompleted(),
+            "totalImages", progress.getTotalImages(),
+            "processedImages", progress.getProcessedImages(),
+            "currentImageUrl", progress.getCurrentImageUrl() != null ? progress.getCurrentImageUrl() : "",
+            "status", progress.getStatus(),
+            "progressPercentage", progress.getProgressPercentage(),
+            "completed", progress.isCompleted(),
+            "error", progress.getErrorMessage() != null ? progress.getErrorMessage() : ""
+        );
+
+        return ResponseEntity.ok(response);
+    }
+
     @GetMapping("/check-duplicate")
     public ResponseEntity<Map<String, Object>> checkDuplicate(
             @RequestParam String title,

backend/src/main/java/com/storycove/dto/SearchResultDto.java

@@ -34,6 +34,18 @@ public class SearchResultDto<T> {
         this.facets = facets;
     }
 
+    // Simple constructor for basic search results with facet list
+    public SearchResultDto(List<T> results, long totalHits, int resultCount, List<FacetCountDto> facetsList) {
+        this.results = results;
+        this.totalHits = totalHits;
+        this.page = 0;
+        this.perPage = resultCount;
+        this.query = "";
+        this.searchTimeMs = 0;
+        // Convert list to map if needed - for now just set empty map
+        this.facets = java.util.Collections.emptyMap();
+    }
+    
     // Getters and Setters
     public List<T> getResults() {
         return results;

backend/src/main/java/com/storycove/dto/StorySearchDto.java

@@ -17,6 +17,7 @@ public class StorySearchDto {
     
     // Reading status
     private Boolean isRead;
+    private Integer readingPosition;
     private LocalDateTime lastReadAt;
     
     // Author info
@@ -33,6 +34,9 @@ public class StorySearchDto {
     private LocalDateTime createdAt;
     private LocalDateTime updatedAt;
 
+    // Alias for createdAt to match frontend expectations
+    private LocalDateTime dateAdded;
+    
     // Search-specific fields
     private double searchScore;
     private List<String> highlights;
@@ -121,6 +125,14 @@ public class StorySearchDto {
         this.lastReadAt = lastReadAt;
     }
 
+    public Integer getReadingPosition() {
+        return readingPosition;
+    }
+
+    public void setReadingPosition(Integer readingPosition) {
+        this.readingPosition = readingPosition;
+    }
+    
     public UUID getAuthorId() {
         return authorId;
     }
@@ -177,6 +189,14 @@ public class StorySearchDto {
         this.updatedAt = updatedAt;
     }
 
+    public LocalDateTime getDateAdded() {
+        return dateAdded;
+    }
+
+    public void setDateAdded(LocalDateTime dateAdded) {
+        this.dateAdded = dateAdded;
+    }
+    
     public double getSearchScore() {
         return searchScore;
     }

backend/src/main/java/com/storycove/event/StoryContentUpdatedEvent.java

@@ -0,0 +1,34 @@
+package com.storycove.event;
+
+import org.springframework.context.ApplicationEvent;
+
+import java.util.UUID;
+
+/**
+ * Event published when a story's content is created or updated
+ */
+public class StoryContentUpdatedEvent extends ApplicationEvent {
+
+    private final UUID storyId;
+    private final String contentHtml;
+    private final boolean isNewStory;
+
+    public StoryContentUpdatedEvent(Object source, UUID storyId, String contentHtml, boolean isNewStory) {
+        super(source);
+        this.storyId = storyId;
+        this.contentHtml = contentHtml;
+        this.isNewStory = isNewStory;
+    }
+
+    public UUID getStoryId() {
+        return storyId;
+    }
+
+    public String getContentHtml() {
+        return contentHtml;
+    }
+
+    public boolean isNewStory() {
+        return isNewStory;
+    }
+}

backend/src/main/java/com/storycove/scheduled/TypesenseIndexScheduler.java

@@ -1,84 +0,0 @@
-package com.storycove.scheduled;
-
-import com.storycove.entity.Story;
-import com.storycove.service.StoryService;
-import com.storycove.service.TypesenseService;
-import org.slf4j.Logger;
-import org.slf4j.LoggerFactory;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
-import org.springframework.scheduling.annotation.Scheduled;
-import org.springframework.stereotype.Component;
-
-import java.time.LocalDateTime;
-import java.util.List;
-
-/**
- * Scheduled task to periodically reindex all stories in Typesense
- * to ensure search index stays synchronized with database changes.
- */
-@Component
-@ConditionalOnProperty(name = "storycove.typesense.enabled", havingValue = "true", matchIfMissing = true)
-public class TypesenseIndexScheduler {
-
-    private static final Logger logger = LoggerFactory.getLogger(TypesenseIndexScheduler.class);
-
-    private final StoryService storyService;
-    private final TypesenseService typesenseService;
-
-    @Autowired
-    public TypesenseIndexScheduler(StoryService storyService, 
-                                   @Autowired(required = false) TypesenseService typesenseService) {
-        this.storyService = storyService;
-        this.typesenseService = typesenseService;
-    }
-
-    /**
-     * Scheduled task that runs periodically to reindex all stories in Typesense.
-     * This ensures the search index stays synchronized with any database changes
-     * that might have occurred outside of the normal story update flow.
-     * 
-     * Interval is configurable via storycove.typesense.reindex-interval property (default: 1 hour).
-     */
-    @Scheduled(fixedRateString = "${storycove.typesense.reindex-interval:3600000}")
-    public void reindexAllStories() {
-        if (typesenseService == null) {
-            logger.debug("TypesenseService is not available, skipping scheduled reindexing");
-            return;
-        }
-
-        logger.info("Starting scheduled Typesense reindexing at {}", LocalDateTime.now());
-        
-        try {
-            long startTime = System.currentTimeMillis();
-            
-            // Get all stories from database with eagerly loaded associations
-            List<Story> allStories = storyService.findAllWithAssociations();
-            
-            if (allStories.isEmpty()) {
-                logger.info("No stories found in database, skipping reindexing");
-                return;
-            }
-            
-            // Perform full reindex
-            typesenseService.reindexAllStories(allStories);
-            
-            long endTime = System.currentTimeMillis();
-            long duration = endTime - startTime;
-            
-            logger.info("Completed scheduled Typesense reindexing of {} stories in {}ms", 
-                       allStories.size(), duration);
-            
-        } catch (Exception e) {
-            logger.error("Failed to complete scheduled Typesense reindexing", e);
-        }
-    }
-
-    /**
-     * Manual trigger for reindexing - can be called from other services or endpoints if needed
-     */
-    public void triggerManualReindex() {
-        logger.info("Manual Typesense reindexing triggered");
-        reindexAllStories();
-    }
-}

backend/src/main/java/com/storycove/service/AsyncImageProcessingService.java

@@ -0,0 +1,122 @@
+package com.storycove.service;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.scheduling.annotation.Async;
+import org.springframework.stereotype.Service;
+
+import java.util.UUID;
+import java.util.concurrent.CompletableFuture;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
+@Service
+public class AsyncImageProcessingService {
+
+    private static final Logger logger = LoggerFactory.getLogger(AsyncImageProcessingService.class);
+
+    private final ImageService imageService;
+    private final StoryService storyService;
+    private final ImageProcessingProgressService progressService;
+
+    @Autowired
+    public AsyncImageProcessingService(ImageService imageService,
+                                     StoryService storyService,
+                                     ImageProcessingProgressService progressService) {
+        this.imageService = imageService;
+        this.storyService = storyService;
+        this.progressService = progressService;
+    }
+
+    @Async
+    public CompletableFuture<Void> processStoryImagesAsync(UUID storyId, String contentHtml) {
+        logger.info("Starting async image processing for story: {}", storyId);
+
+        try {
+            // Count external images first
+            int externalImageCount = countExternalImages(contentHtml);
+
+            if (externalImageCount == 0) {
+                logger.debug("No external images found for story {}", storyId);
+                return CompletableFuture.completedFuture(null);
+            }
+
+            // Start progress tracking
+            ImageProcessingProgressService.ImageProcessingProgress progress =
+                progressService.startProgress(storyId, externalImageCount);
+
+            // Process images with progress updates
+            ImageService.ContentImageProcessingResult result =
+                processImagesWithProgress(contentHtml, storyId, progress);
+
+            // Update story with processed content if changed
+            if (!result.getProcessedContent().equals(contentHtml)) {
+                progressService.updateProgress(storyId, progress.getTotalImages(),
+                    "Saving processed content", "Updating story content");
+
+                storyService.updateContentOnly(storyId, result.getProcessedContent());
+
+                progressService.completeProgress(storyId,
+                    String.format("Completed: %d images processed", result.getDownloadedImages().size()));
+
+                logger.info("Async image processing completed for story {}: {} images processed",
+                           storyId, result.getDownloadedImages().size());
+            } else {
+                progressService.completeProgress(storyId, "Completed: No images needed processing");
+            }
+
+            // Clean up progress after a delay to allow frontend to see completion
+            CompletableFuture.runAsync(() -> {
+                try {
+                    Thread.sleep(5000); // 5 seconds delay
+                    progressService.removeProgress(storyId);
+                } catch (InterruptedException e) {
+                    Thread.currentThread().interrupt();
+                }
+            });
+
+        } catch (Exception e) {
+            logger.error("Async image processing failed for story {}: {}", storyId, e.getMessage(), e);
+            progressService.setError(storyId, e.getMessage());
+        }
+
+        return CompletableFuture.completedFuture(null);
+    }
+
+    private int countExternalImages(String contentHtml) {
+        if (contentHtml == null || contentHtml.trim().isEmpty()) {
+            return 0;
+        }
+
+        Pattern imgPattern = Pattern.compile("<img[^>]+src=[\"']([^\"']+)[\"'][^>]*>", Pattern.CASE_INSENSITIVE);
+        Matcher matcher = imgPattern.matcher(contentHtml);
+
+        int count = 0;
+        while (matcher.find()) {
+            String src = matcher.group(1);
+            if (isExternalUrl(src)) {
+                count++;
+            }
+        }
+
+        return count;
+    }
+
+    private boolean isExternalUrl(String url) {
+        return url != null &&
+               (url.startsWith("http://") || url.startsWith("https://")) &&
+               !url.contains("/api/files/images/");
+    }
+
+    private ImageService.ContentImageProcessingResult processImagesWithProgress(
+            String contentHtml, UUID storyId, ImageProcessingProgressService.ImageProcessingProgress progress) {
+
+        // Use a custom version of processContentImages that provides progress callbacks
+        return imageService.processContentImagesWithProgress(contentHtml, storyId,
+            (currentUrl, processedCount, totalCount) -> {
+                progressService.updateProgress(storyId, processedCount, currentUrl,
+                    String.format("Processing image %d of %d", processedCount + 1, totalCount));
+            });
+    }
+}

backend/src/main/java/com/storycove/service/AuthorIndexScheduler.java

@@ -11,21 +11,21 @@ import org.springframework.stereotype.Component;
 import java.util.List;
 
 @Component
-@ConditionalOnProperty(name = "storycove.typesense.enabled", havingValue = "true", matchIfMissing = true)
+@ConditionalOnProperty(name = "storycove.search.enabled", havingValue = "true", matchIfMissing = true)
 public class AuthorIndexScheduler {
 
     private static final Logger logger = LoggerFactory.getLogger(AuthorIndexScheduler.class);
 
     private final AuthorService authorService;
-    private final TypesenseService typesenseService;
+    private final SearchServiceAdapter searchServiceAdapter;
 
     @Autowired
-    public AuthorIndexScheduler(AuthorService authorService, TypesenseService typesenseService) {
+    public AuthorIndexScheduler(AuthorService authorService, SearchServiceAdapter searchServiceAdapter) {
         this.authorService = authorService;
-        this.typesenseService = typesenseService;
+        this.searchServiceAdapter = searchServiceAdapter;
     }
 
-    @Scheduled(fixedRateString = "${storycove.typesense.author-reindex-interval:7200000}") // 2 hours default
+    @Scheduled(fixedRateString = "${storycove.search.author-reindex-interval:7200000}") // 2 hours default
     public void reindexAllAuthors() {
         try {
             logger.info("Starting scheduled author reindexing...");
@@ -34,7 +34,7 @@ public class AuthorIndexScheduler {
             logger.info("Found {} authors to reindex", allAuthors.size());
             
             if (!allAuthors.isEmpty()) {
-                typesenseService.reindexAllAuthors(allAuthors);
+                searchServiceAdapter.bulkIndexAuthors(allAuthors);
                 logger.info("Successfully completed scheduled author reindexing");
             } else {
                 logger.info("No authors found to reindex");

backend/src/main/java/com/storycove/service/AuthorService.java

@@ -28,12 +28,12 @@ public class AuthorService {
     private static final Logger logger = LoggerFactory.getLogger(AuthorService.class);
 
     private final AuthorRepository authorRepository;
-    private final TypesenseService typesenseService;
+    private final SearchServiceAdapter searchServiceAdapter;
 
     @Autowired
-    public AuthorService(AuthorRepository authorRepository, @Autowired(required = false) TypesenseService typesenseService) {
+    public AuthorService(AuthorRepository authorRepository, SearchServiceAdapter searchServiceAdapter) {
         this.authorRepository = authorRepository;
-        this.typesenseService = typesenseService;
+        this.searchServiceAdapter = searchServiceAdapter;
     }
 
     @Transactional(readOnly = true)
@@ -132,14 +132,8 @@ public class AuthorService {
         validateAuthorForCreate(author);
         Author savedAuthor = authorRepository.save(author);
         
-        // Index in Typesense
-        if (typesenseService != null) {
-            try {
-                typesenseService.indexAuthor(savedAuthor);
-            } catch (Exception e) {
-                logger.warn("Failed to index author in Typesense: " + savedAuthor.getName(), e);
-            }
-        }
+        // Index in Solr
+        searchServiceAdapter.indexAuthor(savedAuthor);
         
         return savedAuthor;
     }
@@ -156,14 +150,8 @@ public class AuthorService {
         updateAuthorFields(existingAuthor, authorUpdates);
         Author savedAuthor = authorRepository.save(existingAuthor);
         
-        // Update in Typesense
-        if (typesenseService != null) {
-            try {
-                typesenseService.updateAuthor(savedAuthor);
-            } catch (Exception e) {
-                logger.warn("Failed to update author in Typesense: " + savedAuthor.getName(), e);
-            }
-        }
+        // Update in Solr
+        searchServiceAdapter.updateAuthor(savedAuthor);
         
         return savedAuthor;
     }
@@ -178,14 +166,8 @@ public class AuthorService {
         
         authorRepository.delete(author);
         
-        // Remove from Typesense
-        if (typesenseService != null) {
-            try {
-                typesenseService.deleteAuthor(id.toString());
-            } catch (Exception e) {
-                logger.warn("Failed to delete author from Typesense: " + author.getName(), e);
-            }
-        }
+        // Remove from Solr
+        searchServiceAdapter.deleteAuthor(id);
     }
 
     public Author addUrl(UUID id, String url) {
@@ -193,14 +175,8 @@ public class AuthorService {
         author.addUrl(url);
         Author savedAuthor = authorRepository.save(author);
         
-        // Update in Typesense
-        if (typesenseService != null) {
-            try {
-                typesenseService.updateAuthor(savedAuthor);
-            } catch (Exception e) {
-                logger.warn("Failed to update author in Typesense after adding URL: " + savedAuthor.getName(), e);
-            }
-        }
+        // Update in Solr
+        searchServiceAdapter.updateAuthor(savedAuthor);
         
         return savedAuthor;
     }
@@ -210,14 +186,8 @@ public class AuthorService {
         author.removeUrl(url);
         Author savedAuthor = authorRepository.save(author);
         
-        // Update in Typesense
-        if (typesenseService != null) {
-            try {
-                typesenseService.updateAuthor(savedAuthor);
-            } catch (Exception e) {
-                logger.warn("Failed to update author in Typesense after removing URL: " + savedAuthor.getName(), e);
-            }
-        }
+        // Update in Solr
+        searchServiceAdapter.updateAuthor(savedAuthor);
         
         return savedAuthor;
     }
@@ -251,14 +221,8 @@ public class AuthorService {
         logger.debug("Saved author rating: {} for author: {}", 
                      refreshedAuthor.getAuthorRating(), refreshedAuthor.getName());
         
-        // Update in Typesense
-        if (typesenseService != null) {
-            try {
-                typesenseService.updateAuthor(refreshedAuthor);
-            } catch (Exception e) {
-                logger.warn("Failed to update author in Typesense after rating: " + refreshedAuthor.getName(), e);
-            }
-        }
+        // Update in Solr
+        searchServiceAdapter.updateAuthor(refreshedAuthor);
         
         return refreshedAuthor;
     }
@@ -301,14 +265,8 @@ public class AuthorService {
         author.setAvatarImagePath(avatarPath);
         Author savedAuthor = authorRepository.save(author);
         
-        // Update in Typesense
-        if (typesenseService != null) {
-            try {
-                typesenseService.updateAuthor(savedAuthor);
-            } catch (Exception e) {
-                logger.warn("Failed to update author in Typesense after setting avatar: " + savedAuthor.getName(), e);
-            }
-        }
+        // Update in Solr
+        searchServiceAdapter.updateAuthor(savedAuthor);
         
         return savedAuthor;
     }
@@ -318,14 +276,8 @@ public class AuthorService {
         author.setAvatarImagePath(null);
         Author savedAuthor = authorRepository.save(author);
         
-        // Update in Typesense
-        if (typesenseService != null) {
-            try {
-                typesenseService.updateAuthor(savedAuthor);
-            } catch (Exception e) {
-                logger.warn("Failed to update author in Typesense after removing avatar: " + savedAuthor.getName(), e);
-            }
-        }
+        // Update in Solr
+        searchServiceAdapter.updateAuthor(savedAuthor);
         
         return savedAuthor;
     }

backend/src/main/java/com/storycove/service/CollectionService.java

@@ -31,7 +31,7 @@ public class CollectionService {
     private final CollectionStoryRepository collectionStoryRepository;
     private final StoryRepository storyRepository;
     private final TagRepository tagRepository;
-    private final TypesenseService typesenseService;
+    private final SearchServiceAdapter searchServiceAdapter;
     private final ReadingTimeService readingTimeService;
     
     @Autowired
@@ -39,13 +39,13 @@ public class CollectionService {
                            CollectionStoryRepository collectionStoryRepository,
                            StoryRepository storyRepository,
                            TagRepository tagRepository,
-                           @Autowired(required = false) TypesenseService typesenseService,
+                           SearchServiceAdapter searchServiceAdapter,
                            ReadingTimeService readingTimeService) {
         this.collectionRepository = collectionRepository;
         this.collectionStoryRepository = collectionStoryRepository;
         this.storyRepository = storyRepository;
         this.tagRepository = tagRepository;
-        this.typesenseService = typesenseService;
+        this.searchServiceAdapter = searchServiceAdapter;
         this.readingTimeService = readingTimeService;
     }
     
@@ -54,13 +54,10 @@ public class CollectionService {
      * This method MUST be used instead of JPA queries for listing collections
      */
     public SearchResultDto<Collection> searchCollections(String query, List<String> tags, boolean includeArchived, int page, int limit) {
-        if (typesenseService == null) {
-            logger.warn("Typesense service not available, returning empty results");
-            return new SearchResultDto<>(new ArrayList<>(), 0, page, limit, query != null ? query : "", 0);
-        }
-        
-        // Delegate to TypesenseService for all search operations
-        return typesenseService.searchCollections(query, tags, includeArchived, page, limit);
+        // Collections are currently handled at database level, not indexed in search engine
+        // Return empty result for now as collections search is not implemented in Solr
+        logger.warn("Collections search not yet implemented in Solr, returning empty results");
+        return new SearchResultDto<>(new ArrayList<>(), 0, page, limit, query != null ? query : "", 0);
     }
     
     /**
@@ -107,10 +104,7 @@ public class CollectionService {
             savedCollection = findById(savedCollection.getId());
         }
         
-        // Index in Typesense
-        if (typesenseService != null) {
-            typesenseService.indexCollection(savedCollection);
-        }
+        // Collections are not indexed in search engine yet
         
         logger.info("Created collection: {} with {} stories", name, initialStoryIds != null ? initialStoryIds.size() : 0);
         return savedCollection;
@@ -140,10 +134,7 @@ public class CollectionService {
         
         Collection savedCollection = collectionRepository.save(collection);
         
-        // Update in Typesense
-        if (typesenseService != null) {
-            typesenseService.indexCollection(savedCollection);
-        }
+        // Collections are not indexed in search engine yet
         
         logger.info("Updated collection: {}", id);
         return savedCollection;
@@ -155,10 +146,7 @@ public class CollectionService {
     public void deleteCollection(UUID id) {
         Collection collection = findByIdBasic(id);
         
-        // Remove from Typesense first
-        if (typesenseService != null) {
-            typesenseService.removeCollection(id);
-        }
+        // Collections are not indexed in search engine yet
         
         collectionRepository.delete(collection);
         logger.info("Deleted collection: {}", id);
@@ -173,10 +161,7 @@ public class CollectionService {
         
         Collection savedCollection = collectionRepository.save(collection);
         
-        // Update in Typesense
-        if (typesenseService != null) {
-            typesenseService.indexCollection(savedCollection);
-        }
+        // Collections are not indexed in search engine yet
         
         logger.info("{} collection: {}", archived ? "Archived" : "Unarchived", id);
         return savedCollection;
@@ -221,10 +206,7 @@ public class CollectionService {
         }
         
         // Update collection in Typesense
-        if (typesenseService != null) {
-            Collection updatedCollection = findById(collectionId);
-            typesenseService.indexCollection(updatedCollection);
-        }
+        // Collections are not indexed in search engine yet
         
         long totalStories = collectionStoryRepository.countByCollectionId(collectionId);
         
@@ -249,10 +231,7 @@ public class CollectionService {
         collectionStoryRepository.delete(collectionStory);
         
         // Update collection in Typesense
-        if (typesenseService != null) {
-            Collection updatedCollection = findById(collectionId);
-            typesenseService.indexCollection(updatedCollection);
-        }
+        // Collections are not indexed in search engine yet
         
         logger.info("Removed story {} from collection {}", storyId, collectionId);
     }
@@ -285,10 +264,7 @@ public class CollectionService {
         }
         
         // Update collection in Typesense
-        if (typesenseService != null) {
-            Collection updatedCollection = findById(collectionId);
-            typesenseService.indexCollection(updatedCollection);
-        }
+        // Collections are not indexed in search engine yet
         
         logger.info("Reordered {} stories in collection {}", storyOrders.size(), collectionId);
     }
@@ -423,7 +399,7 @@ public class CollectionService {
     }
     
     /**
-     * Get all collections for indexing (used by TypesenseService)
+     * Get all collections for indexing (used by SearchServiceAdapter)
      */
     public List<Collection> findAllForIndexing() {
         return collectionRepository.findAllActiveCollections();

backend/src/main/java/com/storycove/service/DatabaseManagementService.java

@@ -52,7 +52,7 @@ public class DatabaseManagementService implements ApplicationContextAware {
     private CollectionRepository collectionRepository;
 
     @Autowired
-    private TypesenseService typesenseService;
+    private SearchServiceAdapter searchServiceAdapter;
     
     @Autowired
     private LibraryService libraryService;
@@ -70,6 +70,75 @@ public class DatabaseManagementService implements ApplicationContextAware {
         this.applicationContext = applicationContext;
     }
 
+    // Helper methods to extract database connection details
+    private String extractDatabaseUrl() {
+        try (Connection connection = getDataSource().getConnection()) {
+            return connection.getMetaData().getURL();
+        } catch (SQLException e) {
+            throw new RuntimeException("Failed to extract database URL", e);
+        }
+    }
+
+    private String extractDatabaseHost() {
+        String url = extractDatabaseUrl();
+        // Extract host from jdbc:postgresql://host:port/database
+        if (url.startsWith("jdbc:postgresql://")) {
+            String hostPort = url.substring("jdbc:postgresql://".length());
+            if (hostPort.contains("/")) {
+                hostPort = hostPort.substring(0, hostPort.indexOf("/"));
+            }
+            if (hostPort.contains(":")) {
+                return hostPort.substring(0, hostPort.indexOf(":"));
+            }
+            return hostPort;
+        }
+        return "localhost"; // fallback
+    }
+
+    private String extractDatabasePort() {
+        String url = extractDatabaseUrl();
+        // Extract port from jdbc:postgresql://host:port/database
+        if (url.startsWith("jdbc:postgresql://")) {
+            String hostPort = url.substring("jdbc:postgresql://".length());
+            if (hostPort.contains("/")) {
+                hostPort = hostPort.substring(0, hostPort.indexOf("/"));
+            }
+            if (hostPort.contains(":")) {
+                return hostPort.substring(hostPort.indexOf(":") + 1);
+            }
+        }
+        return "5432"; // default PostgreSQL port
+    }
+
+    private String extractDatabaseName() {
+        String url = extractDatabaseUrl();
+        // Extract database name from jdbc:postgresql://host:port/database
+        if (url.startsWith("jdbc:postgresql://")) {
+            String remaining = url.substring("jdbc:postgresql://".length());
+            if (remaining.contains("/")) {
+                String dbPart = remaining.substring(remaining.indexOf("/") + 1);
+                // Remove any query parameters
+                if (dbPart.contains("?")) {
+                    dbPart = dbPart.substring(0, dbPart.indexOf("?"));
+                }
+                return dbPart;
+            }
+        }
+        return "storycove"; // fallback
+    }
+
+    private String extractDatabaseUsername() {
+        // Get from environment variable or default
+        return System.getenv("SPRING_DATASOURCE_USERNAME") != null ?
+               System.getenv("SPRING_DATASOURCE_USERNAME") : "storycove";
+    }
+
+    private String extractDatabasePassword() {
+        // Get from environment variable or default
+        return System.getenv("SPRING_DATASOURCE_PASSWORD") != null ?
+               System.getenv("SPRING_DATASOURCE_PASSWORD") : "password";
+    }
+
     /**
      * Create a comprehensive backup including database and files in ZIP format
      */
@@ -97,6 +166,7 @@ public class DatabaseManagementService implements ApplicationContextAware {
     /**
      * Restore from complete backup (ZIP format)
      */
+    @Transactional(timeout = 1800) // 30 minutes timeout for large backup restores
     public void restoreFromCompleteBackup(InputStream backupStream) throws IOException, SQLException {
         String currentLibraryId = libraryService.getCurrentLibraryId();
         System.err.println("Starting complete backup restore for library: " + currentLibraryId);
@@ -145,15 +215,15 @@ public class DatabaseManagementService implements ApplicationContextAware {
                 System.err.println("No files directory found in backup - skipping file restore.");
             }
             
-            // 6. Trigger complete Typesense reindex after data restoration
+            // 6. Trigger complete search index reindex after data restoration
             try {
-                System.err.println("Starting Typesense reindex after restore...");
-                TypesenseService typesenseService = applicationContext.getBean(TypesenseService.class);
-                typesenseService.performCompleteReindex();
-                System.err.println("Typesense reindex completed successfully.");
+                System.err.println("Starting search index reindex after restore...");
+                SearchServiceAdapter searchServiceAdapter = applicationContext.getBean(SearchServiceAdapter.class);
+                searchServiceAdapter.performCompleteReindex();
+                System.err.println("Search index reindex completed successfully.");
             } catch (Exception e) {
-                System.err.println("Warning: Failed to reindex Typesense after restore: " + e.getMessage());
-                // Don't fail the entire restore for Typesense issues
+                System.err.println("Warning: Failed to reindex search after restore: " + e.getMessage());
+                // Don't fail the entire restore for search issues
             }
             
             System.err.println("Complete backup restore finished successfully.");
@@ -171,157 +241,177 @@ public class DatabaseManagementService implements ApplicationContextAware {
     }
 
     public Resource createBackup() throws SQLException, IOException {
-        StringBuilder sqlDump = new StringBuilder();
+        // Use PostgreSQL's native pg_dump for reliable backup
+        String dbHost = extractDatabaseHost();
+        String dbPort = extractDatabasePort();
+        String dbName = extractDatabaseName();
+        String dbUser = extractDatabaseUsername();
+        String dbPassword = extractDatabasePassword();
 
-        try (Connection connection = getDataSource().getConnection()) {
-            // Add header
-            sqlDump.append("-- StoryCove Database Backup\n");
-            sqlDump.append("-- Generated at: ").append(new java.util.Date()).append("\n\n");
+        // Create temporary file for backup
+        Path tempBackupFile = Files.createTempFile("storycove_backup_", ".sql");
 
-            // Disable foreign key checks during restore (PostgreSQL syntax)
-            sqlDump.append("SET session_replication_role = replica;\n\n");
-            
-            // List of tables in dependency order (parents first for insertion)
-            List<String> insertTables = Arrays.asList(
-                "authors", "series", "tags", "collections",
-                "stories", "story_tags", "author_urls", "collection_stories"
+        try {
+            // Build pg_dump command
+            ProcessBuilder pb = new ProcessBuilder(
+                "pg_dump",
+                "--host=" + dbHost,
+                "--port=" + dbPort,
+                "--username=" + dbUser,
+                "--dbname=" + dbName,
+                "--no-password",
+                "--verbose",
+                "--clean",
+                "--if-exists",
+                "--create",
+                "--file=" + tempBackupFile.toString()
             );
 
-            // TRUNCATE in reverse order (children first)
-            List<String> truncateTables = Arrays.asList(
-                "collection_stories", "author_urls", "story_tags",
-                "stories", "collections", "tags", "series", "authors"
-            );
+            // Set PGPASSWORD environment variable
+            Map<String, String> env = pb.environment();
+            env.put("PGPASSWORD", dbPassword);
 
-            // Generate TRUNCATE statements for each table (assuming tables already exist)
-            for (String tableName : truncateTables) {
-                sqlDump.append("-- Truncate Table: ").append(tableName).append("\n");
-                sqlDump.append("TRUNCATE TABLE \"").append(tableName).append("\" CASCADE;\n");
-            }
-            sqlDump.append("\n");
+            System.err.println("Starting PostgreSQL backup using pg_dump...");
+            Process process = pb.start();
 
-            // Generate INSERT statements in dependency order
-            for (String tableName : insertTables) {
-                sqlDump.append("-- Data for Table: ").append(tableName).append("\n");
-                
-                // Get table data
-                try (PreparedStatement stmt = connection.prepareStatement("SELECT * FROM \"" + tableName + "\"");
-                     ResultSet rs = stmt.executeQuery()) {
-                    
-                    ResultSetMetaData metaData = rs.getMetaData();
-                    int columnCount = metaData.getColumnCount();
-                    
-                    // Build column names for INSERT statement
-                    StringBuilder columnNames = new StringBuilder();
-                    for (int i = 1; i <= columnCount; i++) {
-                        if (i > 1) columnNames.append(", ");
-                        columnNames.append("\"").append(metaData.getColumnName(i)).append("\"");
-                    }
-                    
-                    while (rs.next()) {
-                        sqlDump.append("INSERT INTO \"").append(tableName).append("\" (")
-                               .append(columnNames).append(") VALUES (");
-                        
-                        for (int i = 1; i <= columnCount; i++) {
-                            if (i > 1) sqlDump.append(", ");
-                            
-                            Object value = rs.getObject(i);
-                            sqlDump.append(formatSqlValue(value));
-                        }
-                        
-                        sqlDump.append(");\n");
-                    }
+            // Capture output
+            try (BufferedReader reader = new BufferedReader(new InputStreamReader(process.getErrorStream()))) {
+                String line;
+                while ((line = reader.readLine()) != null) {
+                    System.err.println("pg_dump: " + line);
                 }
-                
-                sqlDump.append("\n");
             }
 
-            // Re-enable foreign key checks (PostgreSQL syntax)
-            sqlDump.append("SET session_replication_role = DEFAULT;\n");
-        }
+            int exitCode = process.waitFor();
+            if (exitCode != 0) {
+                throw new RuntimeException("pg_dump failed with exit code: " + exitCode);
+            }
 
-        byte[] backupData = sqlDump.toString().getBytes(StandardCharsets.UTF_8);
-        return new ByteArrayResource(backupData);
+            System.err.println("PostgreSQL backup completed successfully");
+
+            // Read the backup file into memory
+            byte[] backupData = Files.readAllBytes(tempBackupFile);
+            return new ByteArrayResource(backupData);
+
+        } catch (InterruptedException e) {
+            Thread.currentThread().interrupt();
+            throw new RuntimeException("Backup process was interrupted", e);
+        } finally {
+            // Clean up temporary file
+            try {
+                Files.deleteIfExists(tempBackupFile);
+            } catch (IOException e) {
+                System.err.println("Warning: Could not delete temporary backup file: " + e.getMessage());
+            }
+        }
     }
 
-    @Transactional
+    @Transactional(timeout = 1800) // 30 minutes timeout for large backup restores
     public void restoreFromBackup(InputStream backupStream) throws IOException, SQLException {
-        // Read the SQL file
-        StringBuilder sqlContent = new StringBuilder();
-        try (BufferedReader reader = new BufferedReader(new InputStreamReader(backupStream, StandardCharsets.UTF_8))) {
-            String line;
-            while ((line = reader.readLine()) != null) {
-                // Skip comments and empty lines
-                if (!line.trim().startsWith("--") && !line.trim().isEmpty()) {
-                    sqlContent.append(line).append("\n");
+        // Use PostgreSQL's native psql for reliable restore
+        String dbHost = extractDatabaseHost();
+        String dbPort = extractDatabasePort();
+        String dbName = extractDatabaseName();
+        String dbUser = extractDatabaseUsername();
+        String dbPassword = extractDatabasePassword();
+
+        // Create temporary file for the backup
+        Path tempBackupFile = Files.createTempFile("storycove_restore_", ".sql");
+
+        try {
+            // Write backup stream to temporary file
+            System.err.println("Writing backup data to temporary file...");
+            try (InputStream input = backupStream;
+                 OutputStream output = Files.newOutputStream(tempBackupFile)) {
+                byte[] buffer = new byte[8192];
+                int bytesRead;
+                while ((bytesRead = input.read(buffer)) != -1) {
+                    output.write(buffer, 0, bytesRead);
                 }
             }
-        }
 
-        // Execute the SQL statements
-        try (Connection connection = getDataSource().getConnection()) {
-            connection.setAutoCommit(false);
+            System.err.println("Starting PostgreSQL restore using psql...");
 
-            try {
-                // Ensure database schema exists before restoring data
-                ensureDatabaseSchemaExists(connection);
+            // Build psql command to restore the backup
+            ProcessBuilder pb = new ProcessBuilder(
+                "psql",
+                "--host=" + dbHost,
+                "--port=" + dbPort,
+                "--username=" + dbUser,
+                "--dbname=" + dbName,
+                "--no-password",
+                "--echo-errors",
+                "--file=" + tempBackupFile.toString()
+            );
 
-                // Parse SQL statements properly (handle semicolons inside string literals)
-                List<String> statements = parseStatements(sqlContent.toString());
+            // Set PGPASSWORD environment variable
+            Map<String, String> env = pb.environment();
+            env.put("PGPASSWORD", dbPassword);
 
-                int successCount = 0;
-                for (String statement : statements) {
-                    String trimmedStatement = statement.trim();
-                    if (!trimmedStatement.isEmpty()) {
-                        try (PreparedStatement stmt = connection.prepareStatement(trimmedStatement)) {
-                            stmt.executeUpdate();
-                            successCount++;
-                        } catch (SQLException e) {
-                            // Log detailed error information for failed statements
-                            System.err.println("ERROR: Failed to execute SQL statement #" + (successCount + 1));
-                            System.err.println("Error: " + e.getMessage());
-                            System.err.println("SQL State: " + e.getSQLState());
-                            System.err.println("Error Code: " + e.getErrorCode());
+            Process process = pb.start();
 
-                            // Show the problematic statement (first 500 chars)
-                            String statementPreview = trimmedStatement.length() > 500 ? 
-                                trimmedStatement.substring(0, 500) + "..." : trimmedStatement;
-                            System.err.println("Statement: " + statementPreview);
+            // Capture output
+            try (BufferedReader reader = new BufferedReader(new InputStreamReader(process.getErrorStream()));
+                 BufferedReader outputReader = new BufferedReader(new InputStreamReader(process.getInputStream()))) {
 
-                            throw e; // Re-throw to trigger rollback
+                // Read stderr in a separate thread
+                Thread errorThread = new Thread(() -> {
+                    try {
+                        String line;
+                        while ((line = reader.readLine()) != null) {
+                            System.err.println("psql stderr: " + line);
                         }
+                    } catch (IOException e) {
+                        System.err.println("Error reading psql stderr: " + e.getMessage());
                     }
+                });
+                errorThread.start();
+
+                // Read stdout
+                String line;
+                while ((line = outputReader.readLine()) != null) {
+                    System.err.println("psql stdout: " + line);
                 }
 
-                connection.commit();
-                System.err.println("Restore completed successfully. Executed " + successCount + " SQL statements.");
+                errorThread.join();
+            }
 
-                // Reindex search after successful restore
-                try {
-                    String currentLibraryId = libraryService.getCurrentLibraryId();
-                    System.err.println("Starting Typesense reindex after successful restore for library: " + currentLibraryId);
-                    if (currentLibraryId == null) {
-                        System.err.println("ERROR: No current library set during restore - cannot reindex Typesense!");
-                        throw new IllegalStateException("No current library active during restore");
-                    }
+            int exitCode = process.waitFor();
+            if (exitCode != 0) {
+                throw new RuntimeException("psql restore failed with exit code: " + exitCode);
+            }
 
-                    // Manually trigger reindexing using the correct database connection
-                    System.err.println("Triggering manual reindex from library-specific database for library: " + currentLibraryId);
-                    reindexStoriesAndAuthorsFromCurrentDatabase();
+            System.err.println("PostgreSQL restore completed successfully");
 
-                    // Note: Collections collection will be recreated when needed by the service
-                    System.err.println("Typesense reindex completed successfully for library: " + currentLibraryId);
-                } catch (Exception e) {
-                    // Log the error but don't fail the restore
-                    System.err.println("Warning: Failed to reindex Typesense after restore: " + e.getMessage());
-                    e.printStackTrace();
+            // Reindex search after successful restore
+            try {
+                String currentLibraryId = libraryService.getCurrentLibraryId();
+                System.err.println("Starting search reindex after successful restore for library: " + currentLibraryId);
+                if (currentLibraryId == null) {
+                    System.err.println("ERROR: No current library set during restore - cannot reindex search!");
+                    throw new IllegalStateException("No current library active during restore");
                 }
 
-            } catch (SQLException e) {
-                connection.rollback();
-                throw e;
-            } finally {
-                connection.setAutoCommit(true);
+                // Manually trigger reindexing using the correct database connection
+                System.err.println("Triggering manual reindex from library-specific database for library: " + currentLibraryId);
+                reindexStoriesAndAuthorsFromCurrentDatabase();
+
+                // Note: Collections collection will be recreated when needed by the service
+                System.err.println("Search reindex completed successfully for library: " + currentLibraryId);
+            } catch (Exception e) {
+                // Log the error but don't fail the restore
+                System.err.println("Warning: Failed to reindex search after restore: " + e.getMessage());
+                e.printStackTrace();
+            }
+        } catch (InterruptedException e) {
+            Thread.currentThread().interrupt();
+            throw new RuntimeException("Restore process was interrupted", e);
+        } finally {
+            // Clean up temporary file
+            try {
+                Files.deleteIfExists(tempBackupFile);
+            } catch (IOException e) {
+                System.err.println("Warning: Could not delete temporary restore file: " + e.getMessage());
             }
         }
     }
@@ -351,7 +441,7 @@ public class DatabaseManagementService implements ApplicationContextAware {
             totalDeleted = collectionCount + storyCount + authorCount + seriesCount + tagCount;
             
             // Note: Search indexes will need to be manually recreated after clearing
-            // Use the settings page to recreate Typesense collections after clearing the database
+            // Use the settings page to recreate search indices after clearing the database
             
         } catch (Exception e) {
             throw new RuntimeException("Failed to clear database: " + e.getMessage(), e);
@@ -449,7 +539,7 @@ public class DatabaseManagementService implements ApplicationContextAware {
     /**
      * Clear all data AND files (for complete restore)
      */
-    @Transactional
+    @Transactional(timeout = 600) // 10 minutes timeout for clearing large datasets
     public int clearAllDataAndFiles() {
         // First clear the database
         int totalDeleted = clearAllData();
@@ -506,8 +596,7 @@ public class DatabaseManagementService implements ApplicationContextAware {
             }
             
             // For clearing, we only want to recreate empty collections (no data to index)
-            typesenseService.recreateStoriesCollection();
-            typesenseService.recreateAuthorsCollection();
+            searchServiceAdapter.recreateIndices();
             // Note: Collections collection will be recreated when needed by the service
             System.err.println("Search indexes cleared successfully for library: " + currentLibraryId);
         } catch (Exception e) {
@@ -959,10 +1048,9 @@ public class DatabaseManagementService implements ApplicationContextAware {
         try (Connection connection = getDataSource().getConnection()) {
             // First, recreate empty collections
             try {
-                typesenseService.recreateStoriesCollection();
-                typesenseService.recreateAuthorsCollection();
+                searchServiceAdapter.recreateIndices();
             } catch (Exception e) {
-                throw new SQLException("Failed to recreate Typesense collections", e);
+                throw new SQLException("Failed to recreate search indices", e);
             }
             
             // Count and reindex stories with full author and series information
@@ -984,7 +1072,7 @@ public class DatabaseManagementService implements ApplicationContextAware {
                 while (rs.next()) {
                     // Create a complete Story object for indexing
                     var story = createStoryFromResultSet(rs);
-                    typesenseService.indexStory(story);
+                    searchServiceAdapter.indexStory(story);
                     storyCount++;
                 }
             }
@@ -999,7 +1087,7 @@ public class DatabaseManagementService implements ApplicationContextAware {
                 while (rs.next()) {
                     // Create a minimal Author object for indexing
                     var author = createAuthorFromResultSet(rs);
-                    typesenseService.indexAuthor(author);
+                    searchServiceAdapter.indexAuthor(author);
                     authorCount++;
                 }
             }

backend/src/main/java/com/storycove/service/EPUBImportService.java

@@ -16,6 +16,8 @@ import nl.siegmann.epublib.epub.EpubReader;
 
 import org.jsoup.Jsoup;
 import org.jsoup.nodes.Document;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
@@ -30,6 +32,7 @@ import java.util.Optional;
 @Service
 @Transactional
 public class EPUBImportService {
+    private static final Logger log = LoggerFactory.getLogger(EPUBImportService.class);
     
     private final StoryService storyService;
     private final AuthorService authorService;
@@ -74,6 +77,34 @@ public class EPUBImportService {
             
             Story savedStory = storyService.create(story);
 
+            // Process embedded images if content contains any
+            String originalContent = story.getContentHtml();
+            if (originalContent != null && originalContent.contains("<img")) {
+                try {
+                    ImageService.ContentImageProcessingResult imageResult =
+                        imageService.processContentImages(originalContent, savedStory.getId());
+
+                    // Update story content with processed images if changed
+                    if (!imageResult.getProcessedContent().equals(originalContent)) {
+                        savedStory.setContentHtml(imageResult.getProcessedContent());
+                        savedStory = storyService.update(savedStory.getId(), savedStory);
+
+                        // Log the image processing results
+                        log.debug("EPUB Import - Image processing completed for story {}. Downloaded {} images.",
+                                savedStory.getId(), imageResult.getDownloadedImages().size());
+
+                        if (imageResult.hasWarnings()) {
+                            log.debug("EPUB Import - Image processing warnings: {}",
+                                    String.join(", ", imageResult.getWarnings()));
+                        }
+                    }
+                } catch (Exception e) {
+                    // Log error but don't fail the import
+                    System.err.println("EPUB Import - Failed to process embedded images for story " +
+                                     savedStory.getId() + ": " + e.getMessage());
+                }
+            }
+
             EPUBImportResponse response = EPUBImportResponse.success(savedStory.getId(), savedStory.getTitle());
             response.setWordCount(savedStory.getWordCount());
             response.setTotalChapters(book.getSpine().size());
@@ -254,7 +285,7 @@ public class EPUBImportService {
         if (language != null && !language.trim().isEmpty()) {
             // Store as metadata in story description if needed
             // For now, we'll just log it for potential future use
-            System.out.println("EPUB Language: " + language);
+            log.debug("EPUB Language: {}", language);
         }
         
         // Extract publisher information  
@@ -262,14 +293,14 @@ public class EPUBImportService {
         if (publishers != null && !publishers.isEmpty()) {
             String publisher = publishers.get(0);
             // Could append to description or store separately in future
-            System.out.println("EPUB Publisher: " + publisher);
+            log.debug("EPUB Publisher: {}", publisher);
         }
         
         // Extract publication date
         List<nl.siegmann.epublib.domain.Date> dates = metadata.getDates();
         if (dates != null && !dates.isEmpty()) {
             for (nl.siegmann.epublib.domain.Date date : dates) {
-                System.out.println("EPUB Date (" + date.getEvent() + "): " + date.getValue());
+                log.debug("EPUB Date ({}): {}", date.getEvent(), date.getValue());
             }
         }
         
@@ -277,7 +308,7 @@ public class EPUBImportService {
         List<nl.siegmann.epublib.domain.Identifier> identifiers = metadata.getIdentifiers();
         if (identifiers != null && !identifiers.isEmpty()) {
             for (nl.siegmann.epublib.domain.Identifier identifier : identifiers) {
-                System.out.println("EPUB Identifier (" + identifier.getScheme() + "): " + identifier.getValue());
+                log.debug("EPUB Identifier ({}): {}", identifier.getScheme(), identifier.getValue());
             }
         }
     }

backend/src/main/java/com/storycove/service/HtmlSanitizationService.java

@@ -137,12 +137,63 @@ public class HtmlSanitizationService {
         return config;
     }
     
+    /**
+     * Preprocess HTML to extract images from figure tags before sanitization
+     */
+    private String preprocessFigureTags(String html) {
+        if (html == null || html.trim().isEmpty()) {
+            return html;
+        }
+
+        try {
+            org.jsoup.nodes.Document doc = Jsoup.parse(html);
+            org.jsoup.select.Elements figures = doc.select("figure");
+
+            for (org.jsoup.nodes.Element figure : figures) {
+                // Find img tags within the figure
+                org.jsoup.select.Elements images = figure.select("img");
+
+                if (!images.isEmpty()) {
+                    // Extract the first image and replace the figure with it
+                    org.jsoup.nodes.Element img = images.first();
+
+                    // Check if there's a figcaption to preserve as alt text
+                    org.jsoup.select.Elements figcaptions = figure.select("figcaption");
+                    if (!figcaptions.isEmpty() && !img.hasAttr("alt")) {
+                        String captionText = figcaptions.first().text();
+                        if (captionText != null && !captionText.trim().isEmpty()) {
+                            img.attr("alt", captionText);
+                        }
+                    }
+
+                    // Replace the figure element with just the img
+                    figure.replaceWith(img.clone());
+                    logger.debug("Extracted image from figure tag: {}", img.attr("src"));
+                } else {
+                    // No images in figure, remove it entirely
+                    figure.remove();
+                    logger.debug("Removed figure tag without images");
+                }
+            }
+
+            return doc.body().html();
+        } catch (Exception e) {
+            logger.warn("Failed to preprocess figure tags, returning original HTML: {}", e.getMessage());
+            return html;
+        }
+    }
+
     public String sanitize(String html) {
         if (html == null || html.trim().isEmpty()) {
             return "";
         }
+
         logger.info("Content before sanitization: "+html);
-        String saniztedHtml = Jsoup.clean(html, allowlist.preserveRelativeLinks(true));
+
+        // Preprocess to extract images from figure tags
+        String preprocessed = preprocessFigureTags(html);
+
+        String saniztedHtml = Jsoup.clean(preprocessed, allowlist.preserveRelativeLinks(true));
         logger.info("Content after sanitization: "+saniztedHtml);
         return saniztedHtml;
     }

backend/src/main/java/com/storycove/service/ImageProcessingProgressService.java

@@ -0,0 +1,108 @@
+package com.storycove.service;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.stereotype.Service;
+
+import java.util.Map;
+import java.util.UUID;
+import java.util.concurrent.ConcurrentHashMap;
+
+@Service
+public class ImageProcessingProgressService {
+
+    private static final Logger logger = LoggerFactory.getLogger(ImageProcessingProgressService.class);
+
+    private final Map<UUID, ImageProcessingProgress> progressMap = new ConcurrentHashMap<>();
+
+    public static class ImageProcessingProgress {
+        private final UUID storyId;
+        private final int totalImages;
+        private volatile int processedImages;
+        private volatile String currentImageUrl;
+        private volatile String status;
+        private volatile boolean completed;
+        private volatile String errorMessage;
+
+        public ImageProcessingProgress(UUID storyId, int totalImages) {
+            this.storyId = storyId;
+            this.totalImages = totalImages;
+            this.processedImages = 0;
+            this.status = "Starting";
+            this.completed = false;
+        }
+
+        // Getters
+        public UUID getStoryId() { return storyId; }
+        public int getTotalImages() { return totalImages; }
+        public int getProcessedImages() { return processedImages; }
+        public String getCurrentImageUrl() { return currentImageUrl; }
+        public String getStatus() { return status; }
+        public boolean isCompleted() { return completed; }
+        public String getErrorMessage() { return errorMessage; }
+        public double getProgressPercentage() {
+            return totalImages > 0 ? (double) processedImages / totalImages * 100 : 100;
+        }
+
+        // Setters
+        public void setProcessedImages(int processedImages) { this.processedImages = processedImages; }
+        public void setCurrentImageUrl(String currentImageUrl) { this.currentImageUrl = currentImageUrl; }
+        public void setStatus(String status) { this.status = status; }
+        public void setCompleted(boolean completed) { this.completed = completed; }
+        public void setErrorMessage(String errorMessage) { this.errorMessage = errorMessage; }
+
+        public void incrementProcessed() {
+            this.processedImages++;
+        }
+    }
+
+    public ImageProcessingProgress startProgress(UUID storyId, int totalImages) {
+        ImageProcessingProgress progress = new ImageProcessingProgress(storyId, totalImages);
+        progressMap.put(storyId, progress);
+        logger.info("Started image processing progress tracking for story {} with {} images", storyId, totalImages);
+        return progress;
+    }
+
+    public ImageProcessingProgress getProgress(UUID storyId) {
+        return progressMap.get(storyId);
+    }
+
+    public void updateProgress(UUID storyId, int processedImages, String currentImageUrl, String status) {
+        ImageProcessingProgress progress = progressMap.get(storyId);
+        if (progress != null) {
+            progress.setProcessedImages(processedImages);
+            progress.setCurrentImageUrl(currentImageUrl);
+            progress.setStatus(status);
+            logger.debug("Updated progress for story {}: {}/{} - {}", storyId, processedImages, progress.getTotalImages(), status);
+        }
+    }
+
+    public void completeProgress(UUID storyId, String finalStatus) {
+        ImageProcessingProgress progress = progressMap.get(storyId);
+        if (progress != null) {
+            progress.setCompleted(true);
+            progress.setStatus(finalStatus);
+            logger.info("Completed image processing for story {}: {}", storyId, finalStatus);
+        }
+    }
+
+    public void setError(UUID storyId, String errorMessage) {
+        ImageProcessingProgress progress = progressMap.get(storyId);
+        if (progress != null) {
+            progress.setErrorMessage(errorMessage);
+            progress.setStatus("Error: " + errorMessage);
+            progress.setCompleted(true);
+            logger.error("Image processing error for story {}: {}", storyId, errorMessage);
+        }
+    }
+
+    public void removeProgress(UUID storyId) {
+        progressMap.remove(storyId);
+        logger.debug("Removed progress tracking for story {}", storyId);
+    }
+
+    public boolean isProcessing(UUID storyId) {
+        ImageProcessingProgress progress = progressMap.get(storyId);
+        return progress != null && !progress.isCompleted();
+    }
+}

backend/src/main/java/com/storycove/service/ImageService.java

@@ -4,6 +4,8 @@ import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
+import org.springframework.context.event.EventListener;
+import org.springframework.scheduling.annotation.Async;
 import org.springframework.stereotype.Service;
 import org.springframework.web.multipart.MultipartFile;
 
@@ -21,6 +23,8 @@ import java.util.List;
 import java.util.regex.Matcher;
 import java.util.regex.Pattern;
 
+import com.storycove.event.StoryContentUpdatedEvent;
+
 @Service
 public class ImageService {
 
@@ -40,6 +44,15 @@ public class ImageService {
     @Autowired
     private LibraryService libraryService;
 
+    @Autowired
+    private StoryService storyService;
+
+    @Autowired
+    private AuthorService authorService;
+
+    @Autowired
+    private CollectionService collectionService;
+    
     private String getUploadDir() {
         String libraryPath = libraryService.getCurrentImagePath();
         return baseUploadDir + libraryPath;
@@ -245,14 +258,14 @@ public class ImageService {
      * Process HTML content and download all referenced images, replacing URLs with local paths
      */
     public ContentImageProcessingResult processContentImages(String htmlContent, UUID storyId) {
-        logger.info("Processing content images for story: {}, content length: {}", storyId,
+        logger.debug("Processing content images for story: {}, content length: {}", storyId,
                    htmlContent != null ? htmlContent.length() : 0);
 
         List<String> warnings = new ArrayList<>();
         List<String> downloadedImages = new ArrayList<>();
 
         if (htmlContent == null || htmlContent.trim().isEmpty()) {
-            logger.info("No content to process for story: {}", storyId);
+            logger.debug("No content to process for story: {}", storyId);
             return new ContentImageProcessingResult(htmlContent, warnings, downloadedImages);
         }
 
@@ -270,18 +283,18 @@ public class ImageService {
             String imageUrl = matcher.group(1);
             imageCount++;
 
-            logger.info("Found image #{}: {} in tag: {}", imageCount, imageUrl, fullImgTag);
+            logger.debug("Found image #{}: {} in tag: {}", imageCount, imageUrl, fullImgTag);
 
             try {
                 // Skip if it's already a local path or data URL
                 if (imageUrl.startsWith("/") || imageUrl.startsWith("data:")) {
-                    logger.info("Skipping local/data URL: {}", imageUrl);
+                    logger.debug("Skipping local/data URL: {}", imageUrl);
                     matcher.appendReplacement(processedContent, Matcher.quoteReplacement(fullImgTag));
                     continue;
                 }
 
                 externalImageCount++;
-                logger.info("Processing external image #{}: {}", externalImageCount, imageUrl);
+                logger.debug("Processing external image #{}: {}", externalImageCount, imageUrl);
 
                 // Download and store the image
                 String localPath = downloadImageFromUrl(imageUrl, storyId);
@@ -289,7 +302,7 @@ public class ImageService {
 
                 // Generate local URL
                 String localUrl = getLocalImageUrl(storyId, localPath);
-                logger.info("Downloaded image: {} -> {}", imageUrl, localUrl);
+                logger.debug("Downloaded image: {} -> {}", imageUrl, localUrl);
 
                 // Replace the src attribute with the local path - handle both single and double quotes
                 String newImgTag = fullImgTag
@@ -302,7 +315,7 @@ public class ImageService {
                     newImgTag = fullImgTag.replaceAll("src\\s*=\\s*[\"']?" + Pattern.quote(imageUrl) + "[\"']?", "src=\"" + localUrl + "\"");
                 }
 
-                logger.info("Replaced img tag: {} -> {}", fullImgTag, newImgTag);
+                logger.debug("Replaced img tag: {} -> {}", fullImgTag, newImgTag);
                 matcher.appendReplacement(processedContent, Matcher.quoteReplacement(newImgTag));
 
             } catch (Exception e) {
@@ -321,6 +334,101 @@ public class ImageService {
         return new ContentImageProcessingResult(processedContent.toString(), warnings, downloadedImages);
     }
 
+    /**
+     * Functional interface for progress callbacks during image processing
+     */
+    @FunctionalInterface
+    public interface ImageProcessingProgressCallback {
+        void onProgress(String currentImageUrl, int processedCount, int totalCount);
+    }
+
+    /**
+     * Process content images with progress callbacks for async processing
+     */
+    public ContentImageProcessingResult processContentImagesWithProgress(String htmlContent, UUID storyId, ImageProcessingProgressCallback progressCallback) {
+        logger.debug("Processing content images with progress for story: {}, content length: {}", storyId,
+                   htmlContent != null ? htmlContent.length() : 0);
+
+        List<String> warnings = new ArrayList<>();
+        List<String> downloadedImages = new ArrayList<>();
+
+        if (htmlContent == null || htmlContent.trim().isEmpty()) {
+            logger.debug("No content to process for story: {}", storyId);
+            return new ContentImageProcessingResult(htmlContent, warnings, downloadedImages);
+        }
+
+        // Find all img tags with src attributes
+        Pattern imgPattern = Pattern.compile("<img[^>]+src=[\"']([^\"']+)[\"'][^>]*>", Pattern.CASE_INSENSITIVE);
+        Matcher matcher = imgPattern.matcher(htmlContent);
+
+        // First pass: count external images
+        List<String> externalImages = new ArrayList<>();
+        Matcher countMatcher = imgPattern.matcher(htmlContent);
+        while (countMatcher.find()) {
+            String imageUrl = countMatcher.group(1);
+            if (!imageUrl.startsWith("/") && !imageUrl.startsWith("data:")) {
+                externalImages.add(imageUrl);
+            }
+        }
+
+        int totalExternalImages = externalImages.size();
+        int processedCount = 0;
+
+        StringBuffer processedContent = new StringBuffer();
+        matcher.reset(); // Reset the matcher for processing
+
+        while (matcher.find()) {
+            String fullImgTag = matcher.group(0);
+            String imageUrl = matcher.group(1);
+
+            logger.debug("Found image: {} in tag: {}", imageUrl, fullImgTag);
+
+            try {
+                // Skip if it's already a local path or data URL
+                if (imageUrl.startsWith("/") || imageUrl.startsWith("data:")) {
+                    logger.debug("Skipping local/data URL: {}", imageUrl);
+                    matcher.appendReplacement(processedContent, Matcher.quoteReplacement(fullImgTag));
+                    continue;
+                }
+
+                // Call progress callback
+                if (progressCallback != null) {
+                    progressCallback.onProgress(imageUrl, processedCount, totalExternalImages);
+                }
+
+                logger.debug("Processing external image #{}: {}", processedCount + 1, imageUrl);
+
+                // Download and store the image
+                String localPath = downloadImageFromUrl(imageUrl, storyId);
+                downloadedImages.add(localPath);
+
+                // Generate local URL
+                String localUrl = getLocalImageUrl(storyId, localPath);
+                logger.debug("Downloaded image: {} -> {}", imageUrl, localUrl);
+
+                // Replace the src attribute with the local path
+                String newImgTag = fullImgTag
+                    .replaceFirst("src=\"" + Pattern.quote(imageUrl) + "\"", "src=\"" + localUrl + "\"")
+                    .replaceFirst("src='" + Pattern.quote(imageUrl) + "'", "src='" + localUrl + "'");
+
+                matcher.appendReplacement(processedContent, Matcher.quoteReplacement(newImgTag));
+                processedCount++;
+
+            } catch (Exception e) {
+                logger.warn("Failed to download image: {} - Error: {}", imageUrl, e.getMessage());
+                warnings.add("Failed to download image: " + imageUrl + " - " + e.getMessage());
+                matcher.appendReplacement(processedContent, Matcher.quoteReplacement(fullImgTag));
+            }
+        }
+
+        matcher.appendTail(processedContent);
+
+        logger.info("Processed {} external images for story: {} (Total: {}, Downloaded: {}, Warnings: {})",
+                   processedCount, storyId, processedCount, downloadedImages.size(), warnings.size());
+
+        return new ContentImageProcessingResult(processedContent.toString(), warnings, downloadedImages);
+    }
+
     /**
      * Download an image from a URL and store it locally
      */
@@ -385,7 +493,7 @@ public class ImageService {
             return "/api/files/images/default/" + imagePath;
         }
         String localUrl = "/api/files/images/" + currentLibraryId + "/" + imagePath;
-        logger.info("Generated local image URL: {} for story: {}", localUrl, storyId);
+        logger.debug("Generated local image URL: {} for story: {}", localUrl, storyId);
         return localUrl;
     }
 
@@ -421,6 +529,358 @@ public class ImageService {
         return null;
     }
 
+    /**
+     * Cleanup orphaned content images that are no longer referenced in any story
+     */
+    public ContentImageCleanupResult cleanupOrphanedContentImages(boolean dryRun) {
+        logger.info("Starting orphaned content image cleanup (dryRun: {})", dryRun);
+
+        final Set<String> referencedImages;
+        List<String> orphanedImages = new ArrayList<>();
+        List<String> errors = new ArrayList<>();
+        long totalSizeBytes = 0;
+        int foldersToDelete = 0;
+
+        // Step 1: Collect all image references from all story content
+        logger.debug("Scanning all story content for image references...");
+        referencedImages = collectAllImageReferences();
+        logger.debug("Found {} unique image references in story content", referencedImages.size());
+
+        try {
+            // Step 2: Scan the content images directory
+            Path contentImagesDir = Paths.get(getUploadDir(), ImageType.CONTENT.getDirectory());
+
+            if (!Files.exists(contentImagesDir)) {
+                logger.debug("Content images directory does not exist: {}", contentImagesDir);
+                return new ContentImageCleanupResult(orphanedImages, 0, 0, referencedImages.size(), errors, dryRun);
+            }
+
+            logger.debug("Scanning content images directory: {}", contentImagesDir);
+
+            // Walk through all story directories
+            Files.walk(contentImagesDir, 2)
+                .filter(Files::isDirectory)
+                .filter(path -> !path.equals(contentImagesDir)) // Skip the root content directory
+                .filter(path -> !isSynologySystemPath(path)) // Skip Synology system directories
+                .forEach(storyDir -> {
+                    try {
+                        String storyId = storyDir.getFileName().toString();
+                        logger.debug("Checking story directory: {}", storyId);
+
+                        // Check if this story still exists
+                        boolean storyExists = storyService.findByIdOptional(UUID.fromString(storyId)).isPresent();
+
+                        if (!storyExists) {
+                            logger.debug("Found orphaned story directory (story deleted): {}", storyId);
+                            // Mark entire directory for deletion
+                            try {
+                                Files.walk(storyDir)
+                                    .filter(Files::isRegularFile)
+                                    .filter(path -> !isSynologySystemPath(path)) // Skip Synology system files
+                                    .filter(path -> isValidImageFile(path)) // Only process actual image files
+                                    .forEach(file -> {
+                                        try {
+                                            long size = Files.size(file);
+                                            orphanedImages.add(file.toString());
+                                            // Add to total size (will be updated in main scope)
+                                        } catch (IOException e) {
+                                            errors.add("Failed to get size for " + file + ": " + e.getMessage());
+                                        }
+                                    });
+                            } catch (IOException e) {
+                                errors.add("Failed to scan orphaned story directory " + storyDir + ": " + e.getMessage());
+                            }
+                            return;
+                        }
+
+                        // Check individual files in the story directory
+                        try {
+                            Files.walk(storyDir)
+                                .filter(Files::isRegularFile)
+                                .filter(path -> !isSynologySystemPath(path)) // Skip Synology system files
+                                .filter(path -> isValidImageFile(path)) // Only process actual image files
+                                .forEach(imageFile -> {
+                                    try {
+                                        String filename = imageFile.getFileName().toString();
+
+                                        // Only consider it orphaned if it's not in our referenced filenames
+                                        if (!referencedImages.contains(filename)) {
+                                            logger.debug("Found orphaned image: {}", filename);
+                                            orphanedImages.add(imageFile.toString());
+                                        } else {
+                                            logger.debug("Image file is referenced, keeping: {}", filename);
+                                        }
+                                    } catch (Exception e) {
+                                        errors.add("Error checking image file " + imageFile + ": " + e.getMessage());
+                                    }
+                                });
+                        } catch (IOException e) {
+                            errors.add("Failed to scan story directory " + storyDir + ": " + e.getMessage());
+                        }
+
+                    } catch (Exception e) {
+                        errors.add("Error processing story directory " + storyDir + ": " + e.getMessage());
+                    }
+                });
+
+            // Calculate total size and count empty directories
+            for (String orphanedImage : orphanedImages) {
+                try {
+                    Path imagePath = Paths.get(orphanedImage);
+                    if (Files.exists(imagePath)) {
+                        totalSizeBytes += Files.size(imagePath);
+                    }
+                } catch (IOException e) {
+                    errors.add("Failed to get size for " + orphanedImage + ": " + e.getMessage());
+                }
+            }
+
+            // Count empty directories that would be removed
+            try {
+                foldersToDelete = (int) Files.walk(contentImagesDir)
+                    .filter(Files::isDirectory)
+                    .filter(path -> !path.equals(contentImagesDir))
+                    .filter(this::isDirectoryEmptyOrWillBeEmpty)
+                    .count();
+            } catch (IOException e) {
+                errors.add("Failed to count empty directories: " + e.getMessage());
+            }
+
+            // Step 3: Delete orphaned files if not dry run
+            if (!dryRun && !orphanedImages.isEmpty()) {
+                logger.debug("Deleting {} orphaned images...", orphanedImages.size());
+
+                Set<Path> directoriesToCheck = new HashSet<>();
+
+                for (String orphanedImage : orphanedImages) {
+                    try {
+                        Path imagePath = Paths.get(orphanedImage);
+                        if (Files.exists(imagePath)) {
+                            directoriesToCheck.add(imagePath.getParent());
+                            Files.delete(imagePath);
+                            logger.debug("Deleted orphaned image: {}", imagePath);
+                        }
+                    } catch (IOException e) {
+                        errors.add("Failed to delete " + orphanedImage + ": " + e.getMessage());
+                    }
+                }
+
+                // Clean up empty directories
+                for (Path dir : directoriesToCheck) {
+                    try {
+                        if (Files.exists(dir) && isDirEmpty(dir)) {
+                            Files.delete(dir);
+                            logger.debug("Deleted empty story directory: {}", dir);
+                        }
+                    } catch (IOException e) {
+                        errors.add("Failed to delete empty directory " + dir + ": " + e.getMessage());
+                    }
+                }
+            }
+
+            logger.info("Orphaned content image cleanup completed. Found {} orphaned files ({} bytes)",
+                       orphanedImages.size(), totalSizeBytes);
+
+        } catch (Exception e) {
+            logger.error("Error during orphaned content image cleanup", e);
+            errors.add("General cleanup error: " + e.getMessage());
+        }
+
+        return new ContentImageCleanupResult(orphanedImages, totalSizeBytes, foldersToDelete, referencedImages.size(), errors, dryRun);
+    }
+
+    /**
+     * Collect all image filenames referenced in content (UUID-based filenames only)
+     */
+    private Set<String> collectAllImageReferences() {
+        Set<String> referencedFilenames = new HashSet<>();
+
+        try {
+            // Get all stories
+            List<com.storycove.entity.Story> allStories = storyService.findAllWithAssociations();
+
+            // Pattern to match local image URLs in content
+            Pattern imagePattern = Pattern.compile("src=[\"']([^\"']*(?:content/[^\"']*\\.(jpg|jpeg|png)))[\"']", Pattern.CASE_INSENSITIVE);
+
+            for (com.storycove.entity.Story story : allStories) {
+                // Add story cover image filename if present
+                if (story.getCoverPath() != null && !story.getCoverPath().trim().isEmpty()) {
+                    String filename = extractFilename(story.getCoverPath());
+                    if (filename != null) {
+                        referencedFilenames.add(filename);
+                        logger.debug("Found cover image filename in story {}: {}", story.getId(), filename);
+                    }
+                }
+
+                // Add author avatar image filename if present
+                if (story.getAuthor() != null && story.getAuthor().getAvatarImagePath() != null && !story.getAuthor().getAvatarImagePath().trim().isEmpty()) {
+                    String filename = extractFilename(story.getAuthor().getAvatarImagePath());
+                    if (filename != null) {
+                        referencedFilenames.add(filename);
+                        logger.debug("Found avatar image filename for author {}: {}", story.getAuthor().getId(), filename);
+                    }
+                }
+
+                // Add content images from HTML
+                if (story.getContentHtml() != null) {
+                    Matcher matcher = imagePattern.matcher(story.getContentHtml());
+
+                    while (matcher.find()) {
+                        String imageSrc = matcher.group(1);
+
+                        // Extract just the filename from the URL
+                        String filename = extractFilename(imageSrc);
+                        if (filename != null && isUuidBasedFilename(filename)) {
+                            referencedFilenames.add(filename);
+                            logger.debug("Found content image filename in story {}: {}", story.getId(), filename);
+                        }
+                    }
+                }
+            }
+
+            // Also get all authors separately to catch avatars for authors without stories
+            List<com.storycove.entity.Author> allAuthors = authorService.findAll();
+            for (com.storycove.entity.Author author : allAuthors) {
+                if (author.getAvatarImagePath() != null && !author.getAvatarImagePath().trim().isEmpty()) {
+                    String filename = extractFilename(author.getAvatarImagePath());
+                    if (filename != null) {
+                        referencedFilenames.add(filename);
+                        logger.debug("Found standalone avatar image filename for author {}: {}", author.getId(), filename);
+                    }
+                }
+            }
+
+            // Also get all collections to catch cover images
+            List<com.storycove.entity.Collection> allCollections = collectionService.findAllWithTags();
+            for (com.storycove.entity.Collection collection : allCollections) {
+                if (collection.getCoverImagePath() != null && !collection.getCoverImagePath().trim().isEmpty()) {
+                    String filename = extractFilename(collection.getCoverImagePath());
+                    if (filename != null) {
+                        referencedFilenames.add(filename);
+                        logger.debug("Found collection cover image filename for collection {}: {}", collection.getId(), filename);
+                    }
+                }
+            }
+
+        } catch (Exception e) {
+            logger.error("Error collecting image references from stories", e);
+        }
+
+        return referencedFilenames;
+    }
+
+    /**
+     * Convert an image src attribute to relative file path
+     */
+    private String convertSrcToRelativePath(String src) {
+        try {
+            // Handle both /api/files/images/libraryId/content/... and relative content/... paths
+            if (src.contains("/content/")) {
+                int contentIndex = src.indexOf("/content/");
+                return src.substring(contentIndex + 1); // Remove leading slash, keep "content/..."
+            }
+        } catch (Exception e) {
+            logger.debug("Failed to convert src to relative path: {}", src);
+        }
+        return null;
+    }
+
+    /**
+     * Convert absolute file path to relative path from upload directory
+     */
+    private String convertAbsolutePathToRelative(String absolutePath) {
+        try {
+            if (absolutePath == null || absolutePath.trim().isEmpty()) {
+                return null;
+            }
+
+            Path absPath = Paths.get(absolutePath);
+            Path uploadDirPath = Paths.get(getUploadDir());
+
+            // If the path is already relative to upload dir, return as-is
+            if (!absPath.isAbsolute()) {
+                return absolutePath.replace('\\', '/');
+            }
+
+            // Try to make it relative to the upload directory
+            if (absPath.startsWith(uploadDirPath)) {
+                Path relativePath = uploadDirPath.relativize(absPath);
+                return relativePath.toString().replace('\\', '/');
+            }
+
+            // If it's not under upload directory, check if it's library-specific path
+            String libraryPath = libraryService.getCurrentImagePath();
+            Path baseUploadPath = Paths.get(baseUploadDir);
+
+            if (absPath.startsWith(baseUploadPath)) {
+                Path relativePath = baseUploadPath.relativize(absPath);
+                String relativeStr = relativePath.toString().replace('\\', '/');
+
+                // Remove library prefix if present to make it library-agnostic for comparison
+                if (relativeStr.startsWith(libraryPath.substring(1))) { // Remove leading slash from library path
+                    return relativeStr.substring(libraryPath.length() - 1); // Keep the leading slash
+                }
+                return relativeStr;
+            }
+
+            // Fallback: just use the filename portion if it's in the right structure
+            String fileName = absPath.getFileName().toString();
+            if (fileName.matches(".*\\.(jpg|jpeg|png)$")) {
+                // Try to preserve directory structure if it looks like covers/ or avatars/
+                Path parent = absPath.getParent();
+                if (parent != null) {
+                    String parentName = parent.getFileName().toString();
+                    if (parentName.equals("covers") || parentName.equals("avatars")) {
+                        return parentName + "/" + fileName;
+                    }
+                }
+                return fileName;
+            }
+
+        } catch (Exception e) {
+            logger.debug("Failed to convert absolute path to relative: {}", absolutePath, e);
+        }
+        return null;
+    }
+
+    /**
+     * Get relative image path from absolute file path
+     */
+    private String getRelativeImagePath(Path imageFile) {
+        try {
+            Path uploadDir = Paths.get(getUploadDir());
+            Path relativePath = uploadDir.relativize(imageFile);
+            return relativePath.toString().replace('\\', '/'); // Normalize path separators
+        } catch (Exception e) {
+            logger.debug("Failed to get relative path for: {}", imageFile);
+            return imageFile.toString();
+        }
+    }
+
+    /**
+     * Check if directory is empty or will be empty after cleanup
+     */
+    private boolean isDirectoryEmptyOrWillBeEmpty(Path dir) {
+        try {
+            return Files.walk(dir)
+                .filter(Files::isRegularFile)
+                .count() == 0;
+        } catch (IOException e) {
+            return false;
+        }
+    }
+
+    /**
+     * Check if directory is empty
+     */
+    private boolean isDirEmpty(Path dir) {
+        try {
+            return Files.list(dir).count() == 0;
+        } catch (IOException e) {
+            return false;
+        }
+    }
+
     /**
      * Clean up content images for a story
      */
@@ -458,4 +918,152 @@ public class ImageService {
         public List<String> getDownloadedImages() { return downloadedImages; }
         public boolean hasWarnings() { return !warnings.isEmpty(); }
     }
+
+    /**
+     * Result class for orphaned image cleanup
+     */
+    public static class ContentImageCleanupResult {
+        private final List<String> orphanedImages;
+        private final long totalSizeBytes;
+        private final int foldersToDelete;
+        private final int totalReferencedImages;
+        private final List<String> errors;
+        private final boolean dryRun;
+
+        public ContentImageCleanupResult(List<String> orphanedImages, long totalSizeBytes, int foldersToDelete,
+                                       int totalReferencedImages, List<String> errors, boolean dryRun) {
+            this.orphanedImages = orphanedImages;
+            this.totalSizeBytes = totalSizeBytes;
+            this.foldersToDelete = foldersToDelete;
+            this.totalReferencedImages = totalReferencedImages;
+            this.errors = errors;
+            this.dryRun = dryRun;
+        }
+
+        public List<String> getOrphanedImages() { return orphanedImages; }
+        public long getTotalSizeBytes() { return totalSizeBytes; }
+        public int getFoldersToDelete() { return foldersToDelete; }
+        public int getTotalReferencedImages() { return totalReferencedImages; }
+        public List<String> getErrors() { return errors; }
+        public boolean isDryRun() { return dryRun; }
+        public boolean hasErrors() { return !errors.isEmpty(); }
+
+        public String getFormattedSize() {
+            if (totalSizeBytes < 1024) return totalSizeBytes + " B";
+            if (totalSizeBytes < 1024 * 1024) return String.format("%.1f KB", totalSizeBytes / 1024.0);
+            if (totalSizeBytes < 1024 * 1024 * 1024) return String.format("%.1f MB", totalSizeBytes / (1024.0 * 1024.0));
+            return String.format("%.1f GB", totalSizeBytes / (1024.0 * 1024.0 * 1024.0));
+        }
+    }
+
+    /**
+     * Check if a path is a Synology system path that should be ignored
+     */
+    private boolean isSynologySystemPath(Path path) {
+        String pathStr = path.toString();
+        String fileName = path.getFileName().toString();
+
+        // Skip Synology metadata directories and files
+        return pathStr.contains("@eaDir") ||
+               fileName.startsWith("@") ||
+               fileName.contains("@SynoEAStream") ||
+               fileName.startsWith(".") ||
+               fileName.equals("Thumbs.db") ||
+               fileName.equals(".DS_Store");
+    }
+
+    /**
+     * Check if a file is a valid image file (not a system/metadata file)
+     */
+    private boolean isValidImageFile(Path path) {
+        if (isSynologySystemPath(path)) {
+            return false;
+        }
+
+        String fileName = path.getFileName().toString().toLowerCase();
+        return fileName.endsWith(".jpg") ||
+               fileName.endsWith(".jpeg") ||
+               fileName.endsWith(".png") ||
+               fileName.endsWith(".gif") ||
+               fileName.endsWith(".webp");
+    }
+
+    /**
+     * Extract filename from a path or URL
+     */
+    private String extractFilename(String pathOrUrl) {
+        if (pathOrUrl == null || pathOrUrl.trim().isEmpty()) {
+            return null;
+        }
+
+        try {
+            // Remove query parameters if present
+            if (pathOrUrl.contains("?")) {
+                pathOrUrl = pathOrUrl.substring(0, pathOrUrl.indexOf("?"));
+            }
+
+            // Get the last part after slash
+            String filename = pathOrUrl.substring(pathOrUrl.lastIndexOf("/") + 1);
+
+            // Remove any special Synology suffixes
+            filename = filename.replace("@SynoEAStream", "");
+
+            return filename.trim().isEmpty() ? null : filename;
+        } catch (Exception e) {
+            logger.debug("Failed to extract filename from: {}", pathOrUrl);
+            return null;
+        }
+    }
+
+    /**
+     * Check if a filename follows UUID pattern (indicates it's our generated file)
+     */
+    private boolean isUuidBasedFilename(String filename) {
+        if (filename == null || filename.trim().isEmpty()) {
+            return false;
+        }
+
+        // Remove extension
+        String nameWithoutExt = filename;
+        int lastDot = filename.lastIndexOf(".");
+        if (lastDot > 0) {
+            nameWithoutExt = filename.substring(0, lastDot);
+        }
+
+        // Check if it matches UUID pattern (8-4-4-4-12 hex characters)
+        return nameWithoutExt.matches("[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}");
+    }
+
+    /**
+     * Event listener for story content updates - processes external images asynchronously
+     */
+    @EventListener
+    @Async
+    public void handleStoryContentUpdated(StoryContentUpdatedEvent event) {
+        logger.info("Processing images for {} story {} after content update",
+                   event.isNewStory() ? "new" : "updated", event.getStoryId());
+
+        try {
+            ContentImageProcessingResult result = processContentImages(event.getContentHtml(), event.getStoryId());
+
+            // If content was changed, we need to update the story (but this could cause circular events)
+            // Instead, let's just log the results for now and let the controller handle updates if needed
+            if (result.hasWarnings()) {
+                logger.warn("Image processing warnings for story {}: {}", event.getStoryId(), result.getWarnings());
+            }
+            if (!result.getDownloadedImages().isEmpty()) {
+                logger.info("Downloaded {} external images for story {}: {}",
+                           result.getDownloadedImages().size(), event.getStoryId(), result.getDownloadedImages());
+            }
+
+            // TODO: If content was changed, we might need a way to update the story without triggering another event
+            if (!result.getProcessedContent().equals(event.getContentHtml())) {
+                logger.info("Story {} content was processed and external images were replaced with local URLs", event.getStoryId());
+                // For now, just log that processing occurred - the original content processing already handles updates
+            }
+
+        } catch (Exception e) {
+            logger.error("Failed to process images for story {}: {}", event.getStoryId(), e.getMessage(), e);
+        }
+    }
 }

backend/src/main/java/com/storycove/service/LibraryService.java

@@ -13,8 +13,6 @@ import org.springframework.context.ApplicationContext;
 import org.springframework.context.ApplicationContextAware;
 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.stereotype.Service;
-import org.typesense.api.Client;
-import org.typesense.resources.Node;
 
 import jakarta.annotation.PostConstruct;
 import jakarta.annotation.PreDestroy;
@@ -26,7 +24,6 @@ import java.nio.file.Files;
 import java.nio.file.Path;
 import java.nio.file.Paths;
 import java.sql.SQLException;
-import java.time.Duration;
 import java.util.*;
 import java.util.concurrent.ConcurrentHashMap;
 
@@ -43,14 +40,6 @@ public class LibraryService implements ApplicationContextAware {
     @Value("${spring.datasource.password}")
     private String dbPassword;
     
-    @Value("${typesense.host}")
-    private String typesenseHost;
-    
-    @Value("${typesense.port}")
-    private String typesensePort;
-    
-    @Value("${typesense.api-key}")
-    private String typesenseApiKey;
     
     private final ObjectMapper objectMapper = new ObjectMapper();
     private final BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
@@ -61,7 +50,6 @@ public class LibraryService implements ApplicationContextAware {
     
     // Current active resources
     private volatile String currentLibraryId;
-    private volatile Client currentTypesenseClient;
     
     // Security: Track if user has explicitly authenticated in this session
     private volatile boolean explicitlyAuthenticated = false;
@@ -100,7 +88,6 @@ public class LibraryService implements ApplicationContextAware {
     @PreDestroy
     public void cleanup() {
         currentLibraryId = null;
-        currentTypesenseClient = null;
         explicitlyAuthenticated = false;
     }
     
@@ -110,7 +97,6 @@ public class LibraryService implements ApplicationContextAware {
     public void clearAuthentication() {
         explicitlyAuthenticated = false;
         currentLibraryId = null;
-        currentTypesenseClient = null;
         logger.info("Authentication cleared - user must re-authenticate to access libraries");
     }
     
@@ -129,7 +115,7 @@ public class LibraryService implements ApplicationContextAware {
     
     /**
      * Switch to library after authentication with forced reindexing
-     * This ensures Typesense is always up-to-date after login
+     * This ensures Solr is always up-to-date after login
      */
     public synchronized void switchToLibraryAfterAuthentication(String libraryId) throws Exception {
         logger.info("Switching to library after authentication: {} (forcing reindex)", libraryId);
@@ -158,9 +144,9 @@ public class LibraryService implements ApplicationContextAware {
         String previousLibraryId = currentLibraryId;
         
         if (libraryId.equals(currentLibraryId) && forceReindex) {
-            logger.info("Forcing reindex for current library: {} ({})", library.getName(), libraryId);
+            logger.debug("Forcing reindex for current library: {} ({})", library.getName(), libraryId);
         } else {
-            logger.info("Switching to library: {} ({})", library.getName(), libraryId);
+            logger.debug("Switching to library: {} ({})", library.getName(), libraryId);
         }
         
         // Close current resources
@@ -168,25 +154,15 @@ public class LibraryService implements ApplicationContextAware {
         
         // Set new active library (datasource routing handled by SmartRoutingDataSource)
         currentLibraryId = libraryId;
-        currentTypesenseClient = createTypesenseClient(library.getTypesenseCollection());
-        
-        // Initialize Typesense collections for this library
-        try {
-            TypesenseService typesenseService = applicationContext.getBean(TypesenseService.class);
-            // First ensure collections exist
-            typesenseService.initializeCollectionsForCurrentLibrary();
-            logger.info("Completed Typesense initialization for library: {}", libraryId);
-        } catch (Exception e) {
-            logger.warn("Failed to initialize Typesense for library {}: {}", libraryId, e.getMessage());
-            // Don't fail the switch - collections can be created later
-        }
+        // Solr indexes are global - no per-library initialization needed
+        logger.debug("Library switched to Solr mode for library: {}", libraryId);
         
         logger.info("Successfully switched to library: {}", library.getName());
         
         // Perform complete reindex AFTER library switch is fully complete
         // This ensures database routing is properly established
         if (forceReindex || !libraryId.equals(previousLibraryId)) {
-            logger.info("Starting post-switch Typesense reindex for library: {}", libraryId);
+            logger.debug("Starting post-switch Solr reindex for library: {}", libraryId);
 
             // Run reindex asynchronously to avoid blocking authentication response
             // and allow time for database routing to fully stabilize
@@ -195,15 +171,25 @@ public class LibraryService implements ApplicationContextAware {
                 try {
                     // Give routing time to stabilize
                     Thread.sleep(500);
-                    logger.info("Starting async Typesense reindex for library: {}", finalLibraryId);
+                    logger.debug("Starting async Solr reindex for library: {}", finalLibraryId);
 
-                    TypesenseService typesenseService = applicationContext.getBean(TypesenseService.class);
-                    typesenseService.performCompleteReindex();
-                    logger.info("Completed async Typesense reindexing for library: {}", finalLibraryId);
+                    SearchServiceAdapter searchService = applicationContext.getBean(SearchServiceAdapter.class);
+                    // Get all stories and authors for reindexing
+                    StoryService storyService = applicationContext.getBean(StoryService.class);
+                    AuthorService authorService = applicationContext.getBean(AuthorService.class);
+
+                    var allStories = storyService.findAllWithAssociations();
+                    var allAuthors = authorService.findAllWithStories();
+
+                    searchService.bulkIndexStories(allStories);
+                    searchService.bulkIndexAuthors(allAuthors);
+
+                    logger.info("Completed async Solr reindexing for library: {} ({} stories, {} authors)",
+                        finalLibraryId, allStories.size(), allAuthors.size());
                 } catch (Exception e) {
-                    logger.warn("Failed to async reindex Typesense for library {}: {}", finalLibraryId, e.getMessage());
+                    logger.warn("Failed to async reindex Solr for library {}: {}", finalLibraryId, e.getMessage());
                 }
-            }, "TypesenseReindex-" + libraryId).start();
+            }, "SolrReindex-" + libraryId).start();
         }
     }
     
@@ -219,12 +205,6 @@ public class LibraryService implements ApplicationContextAware {
         }
     }
     
-    public Client getCurrentTypesenseClient() {
-        if (currentTypesenseClient == null) {
-            throw new IllegalStateException("No active library - please authenticate first");
-        }
-        return currentTypesenseClient;
-    }
     
     public String getCurrentLibraryId() {
         return currentLibraryId;
@@ -362,10 +342,10 @@ public class LibraryService implements ApplicationContextAware {
                     library.setInitialized((Boolean) data.getOrDefault("initialized", false));
                     
                     libraries.put(id, library);
-                    logger.info("Loaded library: {} ({})", library.getName(), id);
+                    logger.debug("Loaded library: {} ({})", library.getName(), id);
                 }
             } else {
-                logger.info("No libraries configuration file found, will create default");
+                logger.debug("No libraries configuration file found, will create default");
             }
         } catch (IOException e) {
             logger.error("Failed to load libraries configuration", e);
@@ -431,7 +411,7 @@ public class LibraryService implements ApplicationContextAware {
             String json = objectMapper.writerWithDefaultPrettyPrinter().writeValueAsString(config);
             Files.writeString(Paths.get(LIBRARIES_CONFIG_PATH), json);
             
-            logger.info("Saved libraries configuration");
+            logger.debug("Saved libraries configuration");
         } catch (IOException e) {
             logger.error("Failed to save libraries configuration", e);
         }
@@ -439,7 +419,7 @@ public class LibraryService implements ApplicationContextAware {
     
     private DataSource createDataSource(String dbName) {
         String url = baseDbUrl.replaceAll("/[^/]*$", "/" + dbName);
-        logger.info("Creating DataSource for: {}", url);
+        logger.debug("Creating DataSource for: {}", url);
         
         // First, ensure the database exists
         ensureDatabaseExists(dbName);
@@ -479,7 +459,7 @@ public class LibraryService implements ApplicationContextAware {
                 preparedStatement.setString(1, dbName);
                 try (var resultSet = preparedStatement.executeQuery()) {
                     if (resultSet.next()) {
-                        logger.info("Database {} already exists", dbName);
+                        logger.debug("Database {} already exists", dbName);
                         return; // Database exists, nothing to do
                     }
                 }
@@ -508,7 +488,7 @@ public class LibraryService implements ApplicationContextAware {
     }
     
     private void initializeNewDatabaseSchema(String dbName) {
-        logger.info("Initializing schema for new database: {}", dbName);
+        logger.debug("Initializing schema for new database: {}", dbName);
         
         // Create a temporary DataSource for the new database to initialize schema
         String newDbUrl = baseDbUrl.replaceAll("/[^/]*$", "/" + dbName);
@@ -525,7 +505,7 @@ public class LibraryService implements ApplicationContextAware {
             // Use Hibernate to create the schema
             // This mimics what Spring Boot does during startup
             createSchemaUsingHibernate(tempDataSource);
-            logger.info("Schema initialized for database: {}", dbName);
+            logger.debug("Schema initialized for database: {}", dbName);
             
         } catch (Exception e) {
             logger.error("Failed to initialize schema for database {}: {}", dbName, e.getMessage());
@@ -540,15 +520,15 @@ public class LibraryService implements ApplicationContextAware {
         }
         
         try {
-            logger.info("Initializing resources for new library: {}", library.getName());
+            logger.debug("Initializing resources for new library: {}", library.getName());
             
             // 1. Create image directory structure
             initializeImageDirectories(library);
             
-            // 2. Initialize Typesense collections (this will be done when switching to the library)
-            // The TypesenseService.initializeCollections() will be called automatically
+            // 2. Solr indexes are global and managed automatically
+            // No per-library initialization needed for Solr
             
-            logger.info("Successfully initialized resources for library: {}", library.getName());
+            logger.debug("Successfully initialized resources for library: {}", library.getName());
             
         } catch (Exception e) {
             logger.error("Failed to initialize resources for library {}: {}", libraryId, e.getMessage());
@@ -564,16 +544,16 @@ public class LibraryService implements ApplicationContextAware {
             
             if (!java.nio.file.Files.exists(libraryImagePath)) {
                 java.nio.file.Files.createDirectories(libraryImagePath);
-                logger.info("Created image directory: {}", imagePath);
+                logger.debug("Created image directory: {}", imagePath);
                 
                 // Create subdirectories for different image types
                 java.nio.file.Files.createDirectories(libraryImagePath.resolve("stories"));
                 java.nio.file.Files.createDirectories(libraryImagePath.resolve("authors"));  
                 java.nio.file.Files.createDirectories(libraryImagePath.resolve("collections"));
                 
-                logger.info("Created image subdirectories for library: {}", library.getId());
+                logger.debug("Created image subdirectories for library: {}", library.getId());
             } else {
-                logger.info("Image directory already exists: {}", imagePath);
+                logger.debug("Image directory already exists: {}", imagePath);
             }
             
         } catch (Exception e) {
@@ -769,7 +749,7 @@ public class LibraryService implements ApplicationContextAware {
                 statement.executeUpdate(sql);
             }
             
-            logger.info("Successfully created all database tables and constraints");
+            logger.debug("Successfully created all database tables and constraints");
             
         } catch (SQLException e) {
             logger.error("Failed to create database schema", e);
@@ -777,21 +757,10 @@ public class LibraryService implements ApplicationContextAware {
         }
     }
     
-    private Client createTypesenseClient(String collection) {
-        logger.info("Creating Typesense client for collection: {}", collection);
-        
-        List<Node> nodes = Arrays.asList(
-            new Node("http", typesenseHost, typesensePort)
-        );
-        
-        org.typesense.api.Configuration configuration = new org.typesense.api.Configuration(nodes, Duration.ofSeconds(10), typesenseApiKey);
-        return new Client(configuration);
-    }
     
     private void closeCurrentResources() {
         // No need to close datasource - SmartRoutingDataSource handles this
-        // Typesense client doesn't need explicit cleanup
-        currentTypesenseClient = null;
+        // Solr service is managed by Spring - no explicit cleanup needed
         // Don't clear currentLibraryId here - only when explicitly switching
     }
     
@@ -848,7 +817,6 @@ public class LibraryService implements ApplicationContextAware {
         config.put("description", library.getDescription());
         config.put("passwordHash", library.getPasswordHash());
         config.put("dbName", library.getDbName());
-        config.put("typesenseCollection", library.getTypesenseCollection());
         config.put("imagePath", library.getImagePath());
         config.put("initialized", library.isInitialized());
         

backend/src/main/java/com/storycove/service/SearchServiceAdapter.java

@@ -0,0 +1,287 @@
+package com.storycove.service;
+
+import com.storycove.dto.AuthorSearchDto;
+import com.storycove.dto.SearchResultDto;
+import com.storycove.dto.StorySearchDto;
+import com.storycove.entity.Author;
+import com.storycove.entity.Story;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+import java.util.UUID;
+
+/**
+ * Service adapter that provides a unified interface for search operations.
+ *
+ * This adapter directly delegates to SolrService.
+ */
+@Service
+public class SearchServiceAdapter {
+
+    private static final Logger logger = LoggerFactory.getLogger(SearchServiceAdapter.class);
+
+    @Autowired
+    private SolrService solrService;
+
+    // ===============================
+    // SEARCH OPERATIONS
+    // ===============================
+
+    /**
+     * Search stories with unified interface
+     */
+    public SearchResultDto<StorySearchDto> searchStories(String query, List<String> tags, String author,
+                                                         String series, Integer minWordCount, Integer maxWordCount,
+                                                         Float minRating, Boolean isRead, Boolean isFavorite,
+                                                         String sortBy, String sortOrder, int page, int size,
+                                                         List<String> facetBy,
+                                                         // Advanced filters
+                                                         String createdAfter, String createdBefore,
+                                                         String lastReadAfter, String lastReadBefore,
+                                                         Boolean unratedOnly, String readingStatus,
+                                                         Boolean hasReadingProgress, Boolean hasCoverImage,
+                                                         String sourceDomain, String seriesFilter,
+                                                         Integer minTagCount, Boolean popularOnly,
+                                                         Boolean hiddenGemsOnly) {
+        logger.info("SearchServiceAdapter: delegating search to SolrService");
+        try {
+            SearchResultDto<StorySearchDto> result = solrService.searchStories(query, tags, author, series, minWordCount, maxWordCount,
+                minRating, isRead, isFavorite, sortBy, sortOrder, page, size, facetBy,
+                createdAfter, createdBefore, lastReadAfter, lastReadBefore, unratedOnly, readingStatus,
+                hasReadingProgress, hasCoverImage, sourceDomain, seriesFilter, minTagCount, popularOnly,
+                hiddenGemsOnly);
+            logger.info("SearchServiceAdapter: received result with {} stories and {} facets",
+                result.getResults().size(), result.getFacets().size());
+            return result;
+        } catch (Exception e) {
+            logger.error("SearchServiceAdapter: error during search", e);
+            throw e;
+        }
+    }
+
+    /**
+     * Get random stories with unified interface
+     */
+    public List<StorySearchDto> getRandomStories(int count, List<String> tags, String author,
+                                                String series, Integer minWordCount, Integer maxWordCount,
+                                                Float minRating, Boolean isRead, Boolean isFavorite,
+                                                Long seed) {
+        return solrService.getRandomStories(count, tags, author, series, minWordCount, maxWordCount,
+            minRating, isRead, isFavorite, seed);
+    }
+
+    /**
+     * Recreate search indices
+     */
+    public void recreateIndices() {
+        try {
+            solrService.recreateIndices();
+        } catch (Exception e) {
+            logger.error("Failed to recreate search indices", e);
+            throw new RuntimeException("Failed to recreate search indices", e);
+        }
+    }
+
+    /**
+     * Perform complete reindex of all data
+     */
+    public void performCompleteReindex() {
+        try {
+            recreateIndices();
+            logger.info("Search indices recreated successfully");
+        } catch (Exception e) {
+            logger.error("Failed to perform complete reindex", e);
+            throw new RuntimeException("Failed to perform complete reindex", e);
+        }
+    }
+
+    /**
+     * Get random story ID with unified interface
+     */
+    public String getRandomStoryId(Long seed) {
+        return solrService.getRandomStoryId(seed);
+    }
+
+    /**
+     * Search authors with unified interface
+     */
+    public List<AuthorSearchDto> searchAuthors(String query, int limit) {
+        return solrService.searchAuthors(query, limit);
+    }
+
+    /**
+     * Get tag suggestions with unified interface
+     */
+    public List<String> getTagSuggestions(String query, int limit) {
+        return solrService.getTagSuggestions(query, limit);
+    }
+
+    // ===============================
+    // INDEX OPERATIONS
+    // ===============================
+
+    /**
+     * Index a story in Solr
+     */
+    public void indexStory(Story story) {
+        try {
+            solrService.indexStory(story);
+        } catch (Exception e) {
+            logger.error("Failed to index story {}", story.getId(), e);
+        }
+    }
+
+    /**
+     * Update a story in Solr
+     */
+    public void updateStory(Story story) {
+        try {
+            solrService.updateStory(story);
+        } catch (Exception e) {
+            logger.error("Failed to update story {}", story.getId(), e);
+        }
+    }
+
+    /**
+     * Delete a story from Solr
+     */
+    public void deleteStory(UUID storyId) {
+        try {
+            solrService.deleteStory(storyId);
+        } catch (Exception e) {
+            logger.error("Failed to delete story {}", storyId, e);
+        }
+    }
+
+    /**
+     * Index an author in Solr
+     */
+    public void indexAuthor(Author author) {
+        try {
+            solrService.indexAuthor(author);
+        } catch (Exception e) {
+            logger.error("Failed to index author {}", author.getId(), e);
+        }
+    }
+
+    /**
+     * Update an author in Solr
+     */
+    public void updateAuthor(Author author) {
+        try {
+            solrService.updateAuthor(author);
+        } catch (Exception e) {
+            logger.error("Failed to update author {}", author.getId(), e);
+        }
+    }
+
+    /**
+     * Delete an author from Solr
+     */
+    public void deleteAuthor(UUID authorId) {
+        try {
+            solrService.deleteAuthor(authorId);
+        } catch (Exception e) {
+            logger.error("Failed to delete author {}", authorId, e);
+        }
+    }
+
+    /**
+     * Bulk index stories in Solr
+     */
+    public void bulkIndexStories(List<Story> stories) {
+        try {
+            solrService.bulkIndexStories(stories);
+        } catch (Exception e) {
+            logger.error("Failed to bulk index {} stories", stories.size(), e);
+        }
+    }
+
+    /**
+     * Bulk index authors in Solr
+     */
+    public void bulkIndexAuthors(List<Author> authors) {
+        try {
+            solrService.bulkIndexAuthors(authors);
+        } catch (Exception e) {
+            logger.error("Failed to bulk index {} authors", authors.size(), e);
+        }
+    }
+
+    // ===============================
+    // UTILITY METHODS
+    // ===============================
+
+    /**
+     * Check if search service is available and healthy
+     */
+    public boolean isSearchServiceAvailable() {
+        return solrService.testConnection();
+    }
+
+    /**
+     * Get current search engine name
+     */
+    public String getCurrentSearchEngine() {
+        return "solr";
+    }
+
+    /**
+     * Check if dual-write is enabled
+     */
+    public boolean isDualWriteEnabled() {
+        return false; // No longer supported
+    }
+
+    /**
+     * Check if we can switch to Solr
+     */
+    public boolean canSwitchToSolr() {
+        return true; // Already using Solr
+    }
+
+    /**
+     * Check if we can switch to Typesense
+     */
+    public boolean canSwitchToTypesense() {
+        return false; // Typesense no longer available
+    }
+
+    /**
+     * Get current search status for admin interface
+     */
+    public SearchStatus getSearchStatus() {
+        return new SearchStatus(
+            "solr",
+            false, // no dual-write
+            false, // no typesense
+            solrService.testConnection()
+        );
+    }
+
+    /**
+     * DTO for search status
+     */
+    public static class SearchStatus {
+        private final String primaryEngine;
+        private final boolean dualWrite;
+        private final boolean typesenseAvailable;
+        private final boolean solrAvailable;
+
+        public SearchStatus(String primaryEngine, boolean dualWrite,
+                          boolean typesenseAvailable, boolean solrAvailable) {
+            this.primaryEngine = primaryEngine;
+            this.dualWrite = dualWrite;
+            this.typesenseAvailable = typesenseAvailable;
+            this.solrAvailable = solrAvailable;
+        }
+
+        public String getPrimaryEngine() { return primaryEngine; }
+        public boolean isDualWrite() { return dualWrite; }
+        public boolean isTypesenseAvailable() { return typesenseAvailable; }
+        public boolean isSolrAvailable() { return solrAvailable; }
+    }
+}

backend/src/main/java/com/storycove/service/StoryService.java

@@ -42,7 +42,7 @@ public class StoryService {
     private final TagService tagService;
     private final SeriesService seriesService;
     private final HtmlSanitizationService sanitizationService;
-    private final TypesenseService typesenseService;
+    private final SearchServiceAdapter searchServiceAdapter;
 
     @Autowired
     public StoryService(StoryRepository storyRepository,
@@ -52,7 +52,7 @@ public class StoryService {
                        TagService tagService,
                        SeriesService seriesService,
                        HtmlSanitizationService sanitizationService,
-                       @Autowired(required = false) TypesenseService typesenseService) {
+                       SearchServiceAdapter searchServiceAdapter) {
         this.storyRepository = storyRepository;
         this.tagRepository = tagRepository;
         this.readingPositionRepository = readingPositionRepository;
@@ -60,7 +60,7 @@ public class StoryService {
         this.tagService = tagService;
         this.seriesService = seriesService;
         this.sanitizationService = sanitizationService;
-        this.typesenseService = typesenseService;
+        this.searchServiceAdapter = searchServiceAdapter;
     }
 
     @Transactional(readOnly = true)
@@ -239,10 +239,8 @@ public class StoryService {
         story.addTag(tag);
         Story savedStory = storyRepository.save(story);
         
-        // Update Typesense index with new tag information
-        if (typesenseService != null) {
-            typesenseService.updateStory(savedStory);
-        }
+        // Update search index with new tag information
+        searchServiceAdapter.updateStory(savedStory);
         
         return savedStory;
     }
@@ -256,10 +254,8 @@ public class StoryService {
         story.removeTag(tag);
         Story savedStory = storyRepository.save(story);
         
-        // Update Typesense index with updated tag information
-        if (typesenseService != null) {
-            typesenseService.updateStory(savedStory);
-        }
+        // Update search index with updated tag information
+        searchServiceAdapter.updateStory(savedStory);
         
         return savedStory;
     }
@@ -274,10 +270,8 @@ public class StoryService {
         story.setRating(rating);
         Story savedStory = storyRepository.save(story);
         
-        // Update Typesense index with new rating
-        if (typesenseService != null) {
-            typesenseService.updateStory(savedStory);
-        }
+        // Update search index with new rating
+        searchServiceAdapter.updateStory(savedStory);
         
         return savedStory;
     }
@@ -292,10 +286,8 @@ public class StoryService {
         story.updateReadingProgress(position);
         Story savedStory = storyRepository.save(story);
         
-        // Update Typesense index with new reading progress
-        if (typesenseService != null) {
-            typesenseService.updateStory(savedStory);
-        }
+        // Update search index with new reading progress
+        searchServiceAdapter.updateStory(savedStory);
         
         return savedStory;
     }
@@ -313,10 +305,8 @@ public class StoryService {
         
         Story savedStory = storyRepository.save(story);
         
-        // Update Typesense index with new reading status
-        if (typesenseService != null) {
-            typesenseService.updateStory(savedStory);
-        }
+        // Update search index with new reading status
+        searchServiceAdapter.updateStory(savedStory);
         
         return savedStory;
     }
@@ -358,10 +348,8 @@ public class StoryService {
             updateStoryTags(savedStory, story.getTags());
         }
 
-        // Index in Typesense (if available)
-        if (typesenseService != null) {
-            typesenseService.indexStory(savedStory);
-        }
+        // Index in search engine
+        searchServiceAdapter.indexStory(savedStory);
 
         return savedStory;
     }
@@ -388,10 +376,8 @@ public class StoryService {
             updateStoryTagsByNames(savedStory, tagNames);
         }
 
-        // Index in Typesense (if available)
-        if (typesenseService != null) {
-            typesenseService.indexStory(savedStory);
-        }
+        // Index in search engine
+        searchServiceAdapter.indexStory(savedStory);
 
         return savedStory;
     }
@@ -409,10 +395,8 @@ public class StoryService {
         updateStoryFields(existingStory, storyUpdates);
         Story updatedStory = storyRepository.save(existingStory);
         
-        // Update in Typesense (if available)
-        if (typesenseService != null) {
-            typesenseService.updateStory(updatedStory);
-        }
+        // Update in search engine
+        searchServiceAdapter.updateStory(updatedStory);
         
         return updatedStory;
     }
@@ -432,10 +416,20 @@ public class StoryService {
         
         Story updatedStory = storyRepository.save(existingStory);
         
-        // Update in Typesense (if available)
-        if (typesenseService != null) {
-            typesenseService.updateStory(updatedStory);
-        }
+        // Update in search engine
+        searchServiceAdapter.updateStory(updatedStory);
+        
+        return updatedStory;
+    }
+
+    public Story updateContentOnly(UUID id, String contentHtml) {
+        Story existingStory = findById(id);
+        existingStory.setContentHtml(contentHtml);
+
+        Story updatedStory = storyRepository.save(existingStory);
+
+        // Update in search engine since content changed
+        searchServiceAdapter.updateStory(updatedStory);
 
         return updatedStory;
     }
@@ -455,10 +449,8 @@ public class StoryService {
         // Create a copy to avoid ConcurrentModificationException
         new ArrayList<>(story.getTags()).forEach(tag -> story.removeTag(tag));
         
-        // Delete from Typesense first (if available)
-        if (typesenseService != null) {
-            typesenseService.deleteStory(story.getId().toString());
-        }
+        // Delete from search engine first
+        searchServiceAdapter.deleteStory(story.getId());
         
         storyRepository.delete(story);
     }
@@ -674,7 +666,7 @@ public class StoryService {
     
     /**
      * Find a random story based on optional filters.
-     * Uses Typesense for consistency with Library search functionality.
+     * Uses search service for consistency with Library search functionality.
      * Supports text search and multiple tags using the same logic as the Library view.
      * @param searchQuery Optional search query
      * @param tags Optional list of tags to filter by
@@ -693,7 +685,7 @@ public class StoryService {
 
     /**
      * Find a random story based on optional filters with seed support.
-     * Uses Typesense for consistency with Library search functionality.
+     * Uses search service for consistency with Library search functionality.
      * Supports text search and multiple tags using the same logic as the Library view.
      * @param searchQuery Optional search query
      * @param tags Optional list of tags to filter by
@@ -711,21 +703,16 @@ public class StoryService {
                                          String seriesFilter, Integer minTagCount,
                                          Boolean popularOnly, Boolean hiddenGemsOnly) {
         
-        // Use Typesense if available for consistency with Library search
-        if (typesenseService != null) {
-            try {
-                Optional<UUID> randomStoryId = typesenseService.getRandomStoryId(searchQuery, tags, seed,
-                        minWordCount, maxWordCount, createdAfter, createdBefore, lastReadAfter, lastReadBefore,
-                        minRating, maxRating, unratedOnly, readingStatus, hasReadingProgress, hasCoverImage,
-                        sourceDomain, seriesFilter, minTagCount, popularOnly, hiddenGemsOnly);
-                if (randomStoryId.isPresent()) {
-                    return storyRepository.findById(randomStoryId.get());
-                }
-                return Optional.empty();
-            } catch (Exception e) {
-                // Fallback to database queries if Typesense fails
-                logger.warn("Typesense random story lookup failed, falling back to database queries", e);
+        // Use search service for consistency with Library search
+        try {
+            String randomStoryId = searchServiceAdapter.getRandomStoryId(seed);
+            if (randomStoryId != null) {
+                return storyRepository.findById(UUID.fromString(randomStoryId));
             }
+            return Optional.empty();
+        } catch (Exception e) {
+            // Fallback to database queries if search service fails
+            logger.warn("Search service random story lookup failed, falling back to database queries", e);
         }
         
         // Fallback to repository-based implementation (global routing handles library selection)

backend/src/main/resources/application.yml

@@ -4,6 +4,11 @@ spring:
     username: ${SPRING_DATASOURCE_USERNAME:storycove}
     password: ${SPRING_DATASOURCE_PASSWORD:password}
     driver-class-name: org.postgresql.Driver
+    hikari:
+      connection-timeout: 60000  # 60 seconds
+      idle-timeout: 300000       # 5 minutes
+      max-lifetime: 1800000      # 30 minutes
+      maximum-pool-size: 20
   
   jpa:
     hibernate:
@@ -16,11 +21,19 @@ spring:
   
   servlet:
     multipart:
-      max-file-size: 256MB  # Increased for backup restore
-      max-request-size: 260MB  # Slightly higher to account for form data
+      max-file-size: 600MB  # Increased for large backup restore (425MB+)
+      max-request-size: 610MB  # Slightly higher to account for form data
+
+  jackson:
+    serialization:
+      write-dates-as-timestamps: false
+    deserialization:
+      adjust-dates-to-context-time-zone: false
 
 server:
   port: 8080
+  tomcat:
+    max-http-request-size: 650MB  # Tomcat HTTP request size limit (separate from multipart)
 
 storycove:
   app:
@@ -32,15 +45,63 @@ storycove:
     expiration: 86400000  # 24 hours
   auth:
     password: ${APP_PASSWORD}  # REQUIRED: No default password for security
-  typesense:
-    api-key: ${TYPESENSE_API_KEY:xyz}
-    host: ${TYPESENSE_HOST:localhost}
-    port: ${TYPESENSE_PORT:8108}
-    enabled: ${TYPESENSE_ENABLED:true}
-    reindex-interval: ${TYPESENSE_REINDEX_INTERVAL:3600000}  # 1 hour in milliseconds
+  search:
+    engine: solr  # Apache Solr search engine
+  solr:
+    # Connection settings
+    url: ${SOLR_URL:http://solr:8983/solr}
+    username: ${SOLR_USERNAME:}
+    password: ${SOLR_PASSWORD:}
+
+    # Core configuration
+    cores:
+      stories: ${SOLR_STORIES_CORE:storycove_stories}
+      authors: ${SOLR_AUTHORS_CORE:storycove_authors}
+
+    # Connection settings
+    connection:
+      timeout: ${SOLR_CONNECTION_TIMEOUT:30000}  # 30 seconds
+      socket-timeout: ${SOLR_SOCKET_TIMEOUT:60000}  # 60 seconds
+      max-connections-per-route: ${SOLR_MAX_CONN_PER_ROUTE:10}
+      max-connections-total: ${SOLR_MAX_CONN_TOTAL:30}
+      retry-on-failure: ${SOLR_RETRY_ON_FAILURE:true}
+      max-retries: ${SOLR_MAX_RETRIES:3}
+
+    # Query settings
+    query:
+      default-rows: ${SOLR_DEFAULT_ROWS:10}
+      max-rows: ${SOLR_MAX_ROWS:1000}
+      default-operator: ${SOLR_DEFAULT_OPERATOR:AND}
+      highlight: ${SOLR_ENABLE_HIGHLIGHT:true}
+      facets: ${SOLR_ENABLE_FACETS:true}
+
+    # Commit settings
+    commit:
+      soft-commit: ${SOLR_SOFT_COMMIT:true}
+      commit-within: ${SOLR_COMMIT_WITHIN:1000}  # 1 second
+      wait-searcher: ${SOLR_WAIT_SEARCHER:false}
+
+    # Health and monitoring
+    health:
+      check-interval: ${SOLR_HEALTH_CHECK_INTERVAL:30000}  # 30 seconds
+      slow-query-threshold: ${SOLR_SLOW_QUERY_THRESHOLD:5000}  # 5 seconds
+      enable-metrics: ${SOLR_ENABLE_METRICS:true}
   images:
     storage-path: ${IMAGE_STORAGE_PATH:/app/images}
 
+management:
+  endpoints:
+    web:
+      exposure:
+        include: health,info,prometheus
+  endpoint:
+    health:
+      show-details: when-authorized
+      show-components: always
+  health:
+    solr:
+      enabled: ${SOLR_HEALTH_ENABLED:true}
+
 logging:
   level:
     com.storycove: ${LOG_LEVEL:INFO}  # Use INFO for production, DEBUG for development

backend/src/test/java/com/storycove/config/TestConfig.java

@@ -1,12 +1,8 @@
 package com.storycove.config;
 
-import com.storycove.service.TypesenseService;
 import org.springframework.boot.test.context.TestConfiguration;
-import org.springframework.boot.test.mock.mockito.MockBean;
 
 @TestConfiguration
 public class TestConfig {
-
-    @MockBean
-    public TypesenseService typesenseService;
+    // Test configuration
 }

backend/src/test/java/com/storycove/service/AuthorServiceTest.java

@@ -44,8 +44,9 @@ class AuthorServiceTest {
         testAuthor.setId(testId);
         testAuthor.setNotes("Test notes");
         
-        // Initialize service with null TypesenseService (which is allowed for tests)
-        authorService = new AuthorService(authorRepository, null);
+        // Initialize service with mock SearchServiceAdapter
+        SearchServiceAdapter mockSearchServiceAdapter = mock(SearchServiceAdapter.class);
+        authorService = new AuthorService(authorRepository, mockSearchServiceAdapter);
     }
 
     @Test

backend/src/test/java/com/storycove/service/StoryServiceTest.java

@@ -33,6 +33,9 @@ class StoryServiceTest {
     @Mock
     private ReadingPositionRepository readingPositionRepository;
 
+    @Mock
+    private SearchServiceAdapter searchServiceAdapter;
+
     private StoryService storyService;
     private Story testStory;
     private UUID testId;
@@ -44,16 +47,16 @@ class StoryServiceTest {
         testStory.setId(testId);
         testStory.setContentHtml("<p>Test content for reading progress tracking</p>");
         
-        // Create StoryService with only required repositories, all services can be null for these tests
+        // Create StoryService with mocked dependencies
         storyService = new StoryService(
             storyRepository,
             tagRepository,
-            readingPositionRepository, // added for foreign key constraint handling
+            readingPositionRepository,
             null,  // authorService - not needed for reading progress tests
             null,  // tagService - not needed for reading progress tests
             null,  // seriesService - not needed for reading progress tests
             null,  // sanitizationService - not needed for reading progress tests
-            null   // typesenseService - will test both with and without
+            searchServiceAdapter
         );
     }
 

backend/src/test/resources/application-test.yml

@@ -18,11 +18,15 @@ storycove:
     expiration: 86400000
   auth:
     password: test-password
-  typesense:
-    enabled: false
-    api-key: test-key
+  search:
+    engine: solr
+  solr:
     host: localhost
-    port: 8108
+    port: 8983
+    scheme: http
+    cores:
+      stories: storycove_stories
+      authors: storycove_authors
   images:
     storage-path: /tmp/test-images
 

cookies.txt

@@ -2,3 +2,4 @@
 # https://curl.se/docs/http-cookies.html
 # This file was generated by libcurl! Edit at your own risk.
 
+#HttpOnly_localhost	FALSE	/	FALSE	1758433252	token	eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ1c2VyIiwiaWF0IjoxNzU4MzQ2ODUyLCJleHAiOjE3NTg0MzMyNTIsImxpYnJhcnlJZCI6InNlY3JldCJ9.zEAQT5_11-pxPxmIhufSQqE26hvHldde4kFNE2HWWgBa5lT_Wt7jwpoPUMkQGQfShQwDZ9N-hFX3R2ew8jD7WQ

docker-compose.yml

@@ -34,9 +34,10 @@ services:
       - SPRING_DATASOURCE_USERNAME=storycove
       - SPRING_DATASOURCE_PASSWORD=${DB_PASSWORD}
       - JWT_SECRET=${JWT_SECRET}
-      - TYPESENSE_API_KEY=${TYPESENSE_API_KEY}
-      - TYPESENSE_HOST=typesense
-      - TYPESENSE_PORT=8108
+      - SOLR_HOST=solr
+      - SOLR_PORT=8983
+      - SOLR_SCHEME=http
+      - SEARCH_ENGINE=${SEARCH_ENGINE:-solr}
       - IMAGE_STORAGE_PATH=/app/images
       - APP_PASSWORD=${APP_PASSWORD}
       - STORYCOVE_CORS_ALLOWED_ORIGINS=${STORYCOVE_CORS_ALLOWED_ORIGINS:-http://localhost:3000,http://localhost:6925}
@@ -44,16 +45,18 @@ services:
       - images_data:/app/images
       - library_config:/app/config
     depends_on:
-      - postgres
-      - typesense
+      postgres:
+        condition: service_started
+      solr:
+        condition: service_started
     networks:
       - storycove-network
 
   postgres:
     image: postgres:15-alpine
     # No port mapping - only accessible within the Docker network
-    ports:
-      - "5432:5432"
+    #ports:
+    #  - "5432:5432"
     environment:
       - POSTGRES_DB=storycove
       - POSTGRES_USER=storycove
@@ -63,20 +66,39 @@ services:
     networks:
       - storycove-network
 
-  typesense:
-    image: typesense/typesense:29.0
-    # No port mapping - only accessible within the Docker network
+
+  solr:
+    build:
+      context: .
+      dockerfile: solr.Dockerfile
+    ports:
+      - "8983:8983"  # Expose Solr Admin UI for development
     environment:
-      - TYPESENSE_API_KEY=${TYPESENSE_API_KEY}
-      - TYPESENSE_DATA_DIR=/data
+      - SOLR_HEAP=512m
+      - SOLR_JAVA_MEM=-Xms256m -Xmx512m
     volumes:
-      - typesense_data:/data
+      - solr_data:/var/solr
+    deploy:
+      resources:
+        limits:
+          memory: 1G
+        reservations:
+          memory: 512M
+    stop_grace_period: 30s
+    healthcheck:
+      test: ["CMD-SHELL", "curl -f http://localhost:8983/solr/admin/ping || exit 1"]
+      interval: 30s
+      timeout: 10s
+      retries: 5
+      start_period: 60s
     networks:
       - storycove-network
+    restart: unless-stopped
+
 
 volumes:
   postgres_data:
-  typesense_data:
+  solr_data:
   images_data:
   library_config:
 
@@ -95,7 +117,7 @@ configs:
           }
           server {
               listen 80;
-              client_max_body_size 256M;
+              client_max_body_size 600M;
               location / {
                   proxy_pass http://frontend;
                   proxy_http_version 1.1;
@@ -113,22 +135,18 @@ configs:
                   proxy_set_header X-Real-IP $$remote_addr;
                   proxy_set_header X-Forwarded-For $$proxy_add_x_forwarded_for;
                   proxy_set_header X-Forwarded-Proto $$scheme;
-                  proxy_connect_timeout 60s;
-                  proxy_send_timeout 60s;
-                  proxy_read_timeout 60s;
+                  proxy_connect_timeout 900s;
+                  proxy_send_timeout 900s;
+                  proxy_read_timeout 900s;
+                  # Large upload settings
+                  client_max_body_size 600M;
+                  proxy_request_buffering off;
+                  proxy_max_temp_file_size 0;
               }
               location /images/ {
                   alias /app/images/;
                   expires 1y;
                   add_header Cache-Control public;
               }
-              location /typesense/ {
-                  proxy_pass http://typesense:8108/;
-                  proxy_set_header Host $$host;
-                  proxy_set_header X-Real-IP $$remote_addr;
-                  proxy_set_header X-Forwarded-For $$proxy_add_x_forwarded_for;
-                  proxy_set_header X-Forwarded-Proto $$scheme;
-                  proxy_set_header X-Typesense-API-Key $$http_x_typesense_api_key;
-              }
           }
       }

frontend/Dockerfile

@@ -9,7 +9,7 @@ RUN apk add --no-cache dumb-init
 COPY package*.json ./
 
 # Install dependencies with optimized settings
-RUN npm ci --prefer-offline --no-audit --frozen-lockfile
+RUN npm install --prefer-offline --no-audit --legacy-peer-deps
 
 # Build stage
 FROM node:18-alpine AS builder
@@ -20,12 +20,23 @@ COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
 # Set Node.js memory limit for build
-ENV NODE_OPTIONS="--max-old-space-size=1024"
+ENV NODE_OPTIONS="--max-old-space-size=2048"
 ENV NEXT_TELEMETRY_DISABLED=1
 
-# Build the application
+# List files to ensure everything is copied correctly
+RUN ls -la
+
+# Force clean build - remove any cached build artifacts
+RUN rm -rf .next || true
+
+# Build the application with verbose logging
 RUN npm run build
 
+# Verify the build output exists
+RUN ls -la .next/ || (echo ".next directory not found!" && exit 1)
+RUN ls -la .next/standalone/ || (echo ".next/standalone directory not found!" && cat build.log && exit 1)
+RUN ls -la .next/static/ || (echo ".next/static directory not found!" && exit 1)
+
 # Production stage
 FROM node:18-alpine AS runner
 WORKDIR /app

frontend/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

frontend/next.config.js

@@ -2,6 +2,7 @@
 const nextConfig = {
   // Enable standalone output for optimized Docker builds
   output: 'standalone',
+  // Note: Body size limits are handled by nginx and backend, not Next.js frontend
   // Removed Next.js rewrites since nginx handles all API routing
   webpack: (config, { isServer }) => {
     // Exclude cheerio and its dependencies from client-side bundling

frontend/package.json

@@ -10,18 +10,23 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@heroicons/react": "^2.2.0",
-    "autoprefixer": "^10.4.16",
-    "axios": "^1.11.0",
-    "cheerio": "^1.0.0-rc.12",
-    "dompurify": "^3.2.6",
-    "next": "14.0.0",
-    "postcss": "^8.4.31",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-dropzone": "^14.2.3",
-    "server-only": "^0.0.1",
-    "tailwindcss": "^3.3.0"
+        "@heroicons/react": "^2.2.0",
+        "autoprefixer": "^10.4.16",
+        "axios": "^1.7.7",
+        "cheerio": "^1.0.0-rc.12",
+        "dompurify": "^3.2.6",
+        "next": "^14.2.32",
+        "postcss": "^8.4.31",
+        "react": "^18",
+        "react-dom": "^18",
+        "react-dropzone": "^14.2.3",
+        "rxjs": "^7.8.1",
+        "server-only": "^0.0.1",
+        "slate": "^0.118.1",
+        "slate-react": "^0.117.4",
+        "slate-history": "^0.113.1",
+        "slate-dom": "^0.117.0",
+        "tailwindcss": "^3.3.0"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",

frontend/package.json.with-portabletext

@@ -0,0 +1,37 @@
+{
+  "name": "storycove-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@portabletext/react": "4.0.3",
+    "@portabletext/types": "2.0.14",
+    "autoprefixer": "^10.4.16",
+    "axios": "^1.11.0",
+    "cheerio": "^1.0.0-rc.12",
+    "dompurify": "^3.2.6",
+    "next": "14.0.0",
+    "postcss": "^8.4.31",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-dropzone": "^14.2.3",
+    "server-only": "^0.0.1",
+    "tailwindcss": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/dompurify": "^3.0.5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.0",
+    "typescript": "^5"
+  }
+}

frontend/src/app/add-story/AddStoryContent.tsx

@@ -0,0 +1,550 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useAuth } from '../../contexts/AuthContext';
+import { Input, Textarea } from '../../components/ui/Input';
+import Button from '../../components/ui/Button';
+import TagInput from '../../components/stories/TagInput';
+import SlateEditor from '../../components/stories/SlateEditor';
+import ImageUpload from '../../components/ui/ImageUpload';
+import AuthorSelector from '../../components/stories/AuthorSelector';
+import SeriesSelector from '../../components/stories/SeriesSelector';
+import { storyApi, authorApi } from '../../lib/api';
+
+export default function AddStoryContent() {
+  const [formData, setFormData] = useState({
+    title: '',
+    summary: '',
+    authorName: '',
+    authorId: undefined as string | undefined,
+    contentHtml: '',
+    sourceUrl: '',
+    tags: [] as string[],
+    seriesName: '',
+    seriesId: undefined as string | undefined,
+    volume: '',
+  });
+
+  const [coverImage, setCoverImage] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [processingImages, setProcessingImages] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [duplicateWarning, setDuplicateWarning] = useState<{
+    show: boolean;
+    count: number;
+    duplicates: Array<{
+      id: string;
+      title: string;
+      authorName: string;
+      createdAt: string;
+    }>;
+  }>({ show: false, count: 0, duplicates: [] });
+  const [checkingDuplicates, setCheckingDuplicates] = useState(false);
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { isAuthenticated } = useAuth();
+
+  // Handle URL parameters
+  useEffect(() => {
+    const authorId = searchParams.get('authorId');
+    const from = searchParams.get('from');
+
+    // Pre-fill author if authorId is provided in URL
+    if (authorId) {
+      const loadAuthor = async () => {
+        try {
+          const author = await authorApi.getAuthor(authorId);
+          setFormData(prev => ({
+            ...prev,
+            authorName: author.name,
+            authorId: author.id
+          }));
+        } catch (error) {
+          console.error('Failed to load author:', error);
+        }
+      };
+      loadAuthor();
+    }
+
+    // Handle URL import data
+    if (from === 'url-import') {
+      const title = searchParams.get('title') || '';
+      const summary = searchParams.get('summary') || '';
+      const author = searchParams.get('author') || '';
+      const sourceUrl = searchParams.get('sourceUrl') || '';
+      const tagsParam = searchParams.get('tags');
+      const content = searchParams.get('content') || '';
+
+      let tags: string[] = [];
+      try {
+        tags = tagsParam ? JSON.parse(tagsParam) : [];
+      } catch (error) {
+        console.error('Failed to parse tags:', error);
+        tags = [];
+      }
+
+      setFormData(prev => ({
+        ...prev,
+        title,
+        summary,
+        authorName: author,
+        authorId: undefined, // Reset author ID when importing from URL
+        contentHtml: content,
+        sourceUrl,
+        tags
+      }));
+
+      // Show success message
+      setErrors({ success: 'Story data imported successfully! Review and edit as needed before saving.' });
+    }
+  }, [searchParams]);
+
+  // Load pending story data from bulk combine operation
+  useEffect(() => {
+    const fromBulkCombine = searchParams.get('from') === 'bulk-combine';
+    if (fromBulkCombine) {
+      const pendingStoryData = localStorage.getItem('pendingStory');
+      if (pendingStoryData) {
+        try {
+          const storyData = JSON.parse(pendingStoryData);
+          setFormData(prev => ({
+            ...prev,
+            title: storyData.title || '',
+            authorName: storyData.author || '',
+            authorId: undefined, // Reset author ID for bulk combined stories
+            contentHtml: storyData.content || '',
+            sourceUrl: storyData.sourceUrl || '',
+            summary: storyData.summary || '',
+            tags: storyData.tags || []
+          }));
+          // Clear the pending data
+          localStorage.removeItem('pendingStory');
+        } catch (error) {
+          console.error('Failed to load pending story data:', error);
+        }
+      }
+    }
+  }, [searchParams]);
+
+  // Check for duplicates when title and author are both present
+  useEffect(() => {
+    const checkDuplicates = async () => {
+      const title = formData.title.trim();
+      const authorName = formData.authorName.trim();
+
+      // Don't check if user isn't authenticated or if title/author are empty
+      if (!isAuthenticated || !title || !authorName) {
+        setDuplicateWarning({ show: false, count: 0, duplicates: [] });
+        return;
+      }
+
+      // Debounce the check to avoid too many API calls
+      const timeoutId = setTimeout(async () => {
+        try {
+          setCheckingDuplicates(true);
+          const result = await storyApi.checkDuplicate(title, authorName);
+
+          if (result.hasDuplicates) {
+            setDuplicateWarning({
+              show: true,
+              count: result.count,
+              duplicates: result.duplicates
+            });
+          } else {
+            setDuplicateWarning({ show: false, count: 0, duplicates: [] });
+          }
+        } catch (error) {
+          console.error('Failed to check for duplicates:', error);
+          // Clear any existing duplicate warnings on error
+          setDuplicateWarning({ show: false, count: 0, duplicates: [] });
+          // Don't show error to user as this is just a helpful warning
+          // Authentication errors will be handled by the API interceptor
+        } finally {
+          setCheckingDuplicates(false);
+        }
+      }, 500); // 500ms debounce
+
+      return () => clearTimeout(timeoutId);
+    };
+
+    checkDuplicates();
+  }, [formData.title, formData.authorName, isAuthenticated]);
+
+  const handleInputChange = (field: string) => (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: e.target.value
+    }));
+
+    // Clear error when user starts typing
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: '' }));
+    }
+  };
+
+  const handleContentChange = (html: string) => {
+    setFormData(prev => ({ ...prev, contentHtml: html }));
+    if (errors.contentHtml) {
+      setErrors(prev => ({ ...prev, contentHtml: '' }));
+    }
+  };
+
+  const handleTagsChange = (tags: string[]) => {
+    setFormData(prev => ({ ...prev, tags }));
+  };
+
+  const handleAuthorChange = (authorName: string, authorId?: string) => {
+    setFormData(prev => ({
+      ...prev,
+      authorName,
+      authorId: authorId // This will be undefined if creating new author, which clears the existing ID
+    }));
+
+    // Clear error when user changes author
+    if (errors.authorName) {
+      setErrors(prev => ({ ...prev, authorName: '' }));
+    }
+  };
+
+  const handleSeriesChange = (seriesName: string, seriesId?: string) => {
+    setFormData(prev => ({
+      ...prev,
+      seriesName,
+      seriesId: seriesId // This will be undefined if creating new series, which clears the existing ID
+    }));
+
+    // Clear error when user changes series
+    if (errors.seriesName) {
+      setErrors(prev => ({ ...prev, seriesName: '' }));
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.title.trim()) {
+      newErrors.title = 'Title is required';
+    }
+
+    if (!formData.authorName.trim()) {
+      newErrors.authorName = 'Author name is required';
+    }
+
+    if (!formData.contentHtml.trim()) {
+      newErrors.contentHtml = 'Story content is required';
+    }
+
+    if (formData.seriesName && !formData.volume) {
+      newErrors.volume = 'Volume number is required when series is specified';
+    }
+
+    if (formData.volume && !formData.seriesName.trim()) {
+      newErrors.seriesName = 'Series name is required when volume is specified';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  // Helper function to detect external images in HTML content
+  const hasExternalImages = (htmlContent: string): boolean => {
+    if (!htmlContent) return false;
+
+    // Create a temporary DOM element to parse HTML
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlContent;
+
+    const images = tempDiv.querySelectorAll('img');
+    for (let i = 0; i < images.length; i++) {
+      const img = images[i];
+      const src = img.getAttribute('src');
+      if (src && (src.startsWith('http://') || src.startsWith('https://'))) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      // First, create the story with JSON data
+      const storyData = {
+        title: formData.title,
+        summary: formData.summary || undefined,
+        contentHtml: formData.contentHtml,
+        sourceUrl: formData.sourceUrl || undefined,
+        volume: formData.seriesName ? parseInt(formData.volume) : undefined,
+        // Send seriesId if we have it (existing series), otherwise send seriesName (new series)
+        ...(formData.seriesId ? { seriesId: formData.seriesId } : { seriesName: formData.seriesName || undefined }),
+        // Send authorId if we have it (existing author), otherwise send authorName (new author)
+        ...(formData.authorId ? { authorId: formData.authorId } : { authorName: formData.authorName }),
+        tagNames: formData.tags.length > 0 ? formData.tags : undefined,
+      };
+
+      const story = await storyApi.createStory(storyData);
+
+      // Process images if there are external images in the content
+      if (hasExternalImages(formData.contentHtml)) {
+        try {
+          setProcessingImages(true);
+          const imageResult = await storyApi.processContentImages(story.id, formData.contentHtml);
+
+          // If images were processed and content was updated, save the updated content
+          if (imageResult.processedContent !== formData.contentHtml) {
+            await storyApi.updateStory(story.id, {
+              title: formData.title,
+              summary: formData.summary || undefined,
+              contentHtml: imageResult.processedContent,
+              sourceUrl: formData.sourceUrl || undefined,
+              volume: formData.seriesName ? parseInt(formData.volume) : undefined,
+              ...(formData.seriesId ? { seriesId: formData.seriesId } : { seriesName: formData.seriesName || undefined }),
+              ...(formData.authorId ? { authorId: formData.authorId } : { authorName: formData.authorName }),
+              tagNames: formData.tags.length > 0 ? formData.tags : undefined,
+            });
+
+            // Show success message with image processing info
+            if (imageResult.downloadedImages.length > 0) {
+              console.log(`Successfully processed ${imageResult.downloadedImages.length} images`);
+            }
+            if (imageResult.warnings && imageResult.warnings.length > 0) {
+              console.warn('Image processing warnings:', imageResult.warnings);
+            }
+          }
+        } catch (imageError) {
+          console.error('Failed to process images:', imageError);
+          // Don't fail the entire operation if image processing fails
+          // The story was created successfully, just without processed images
+        } finally {
+          setProcessingImages(false);
+        }
+      }
+
+      // If there's a cover image, upload it separately
+      if (coverImage) {
+        await storyApi.uploadCover(story.id, coverImage);
+      }
+
+      router.push(`/stories/${story.id}/detail`);
+    } catch (error: any) {
+      console.error('Failed to create story:', error);
+      const errorMessage = error.response?.data?.message || 'Failed to create story';
+      setErrors({ submit: errorMessage });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      {/* Success Message */}
+      {errors.success && (
+        <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg mb-6">
+          <p className="text-green-800 dark:text-green-200">{errors.success}</p>
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Title */}
+        <Input
+          label="Title *"
+          value={formData.title}
+          onChange={handleInputChange('title')}
+          placeholder="Enter the story title"
+          error={errors.title}
+          required
+        />
+
+        {/* Author Selector */}
+        <AuthorSelector
+          label="Author *"
+          value={formData.authorName}
+          onChange={handleAuthorChange}
+          placeholder="Select or enter author name"
+          error={errors.authorName}
+          required
+        />
+
+        {/* Duplicate Warning */}
+        {duplicateWarning.show && (
+          <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+            <div className="flex items-start gap-3">
+              <div className="text-yellow-600 dark:text-yellow-400 mt-0.5">
+                ⚠️
+              </div>
+              <div>
+                <h4 className="font-medium text-yellow-800 dark:text-yellow-200">
+                  Potential Duplicate Detected
+                </h4>
+                <p className="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
+                  Found {duplicateWarning.count} existing {duplicateWarning.count === 1 ? 'story' : 'stories'} with the same title and author:
+                </p>
+                <ul className="mt-2 space-y-1">
+                  {duplicateWarning.duplicates.map((duplicate, index) => (
+                    <li key={duplicate.id} className="text-sm text-yellow-700 dark:text-yellow-300">
+                      • <span className="font-medium">{duplicate.title}</span> by {duplicate.authorName}
+                      <span className="text-xs ml-2">
+                        (added {new Date(duplicate.createdAt).toLocaleDateString()})
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-2">
+                  You can still create this story if it's different from the existing ones.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Checking indicator */}
+        {checkingDuplicates && (
+          <div className="flex items-center gap-2 text-sm theme-text">
+            <div className="animate-spin w-4 h-4 border-2 border-theme-accent border-t-transparent rounded-full"></div>
+            Checking for duplicates...
+          </div>
+        )}
+
+        {/* Summary */}
+        <div>
+          <label className="block text-sm font-medium theme-header mb-2">
+            Summary
+          </label>
+          <Textarea
+            value={formData.summary}
+            onChange={handleInputChange('summary')}
+            placeholder="Brief summary or description of the story..."
+            rows={3}
+          />
+          <p className="text-sm theme-text mt-1">
+            Optional summary that will be displayed on the story detail page
+          </p>
+        </div>
+
+        {/* Cover Image Upload */}
+        <div>
+          <label className="block text-sm font-medium theme-header mb-2">
+            Cover Image
+          </label>
+          <ImageUpload
+            onImageSelect={setCoverImage}
+            accept="image/jpeg,image/png"
+            maxSizeMB={5}
+            aspectRatio="3:4"
+            placeholder="Drop a cover image here or click to select"
+          />
+        </div>
+
+        {/* Content */}
+        <div>
+          <label className="block text-sm font-medium theme-header mb-2">
+            Story Content *
+          </label>
+          <SlateEditor
+            value={formData.contentHtml}
+            onChange={handleContentChange}
+            placeholder="Write or paste your story content here..."
+            error={errors.contentHtml}
+            enableImageProcessing={false}
+          />
+          <p className="text-sm theme-text mt-2">
+            💡 <strong>Tip:</strong> If you paste content with images, they'll be automatically downloaded and stored locally when you save the story.
+          </p>
+        </div>
+
+        {/* Tags */}
+        <div>
+          <label className="block text-sm font-medium theme-header mb-2">
+            Tags
+          </label>
+          <TagInput
+            tags={formData.tags}
+            onChange={handleTagsChange}
+            placeholder="Add tags to categorize your story..."
+          />
+        </div>
+
+        {/* Series and Volume */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <SeriesSelector
+            label="Series (optional)"
+            value={formData.seriesName}
+            onChange={handleSeriesChange}
+            placeholder="Select or enter series name if part of a series"
+            error={errors.seriesName}
+            authorId={formData.authorId}
+          />
+
+          <Input
+            label="Volume/Part (optional)"
+            type="number"
+            min="1"
+            value={formData.volume}
+            onChange={handleInputChange('volume')}
+            placeholder="Enter volume/part number"
+            error={errors.volume}
+          />
+        </div>
+
+        {/* Source URL */}
+        <Input
+          label="Source URL (optional)"
+          type="url"
+          value={formData.sourceUrl}
+          onChange={handleInputChange('sourceUrl')}
+          placeholder="https://example.com/original-story-url"
+        />
+
+        {/* Image Processing Indicator */}
+        {processingImages && (
+          <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+            <div className="flex items-center gap-3">
+              <div className="animate-spin w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full"></div>
+              <p className="text-blue-800 dark:text-blue-200">
+                Processing and downloading images...
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Submit Error */}
+        {errors.submit && (
+          <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+            <p className="text-red-800 dark:text-red-200">{errors.submit}</p>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex justify-end gap-4 pt-6">
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => router.back()}
+            disabled={loading}
+          >
+            Cancel
+          </Button>
+
+          <Button
+            type="submit"
+            loading={loading}
+            disabled={!formData.title || !formData.authorName || !formData.contentHtml}
+          >
+            {processingImages ? 'Processing Images...' : 'Add Story'}
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+}

frontend/src/app/add-story/page.tsx

@@ -1,554 +1,23 @@
 'use client';
 
-import { useState, useEffect } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useAuth } from '../../contexts/AuthContext';
+import { Suspense } from 'react';
 import ImportLayout from '../../components/layout/ImportLayout';
-import { Input, Textarea } from '../../components/ui/Input';
-import Button from '../../components/ui/Button';
-import TagInput from '../../components/stories/TagInput';
-import RichTextEditor from '../../components/stories/RichTextEditor';
-import ImageUpload from '../../components/ui/ImageUpload';
-import AuthorSelector from '../../components/stories/AuthorSelector';
-import SeriesSelector from '../../components/stories/SeriesSelector';
-import { storyApi, authorApi } from '../../lib/api';
+import LoadingSpinner from '../../components/ui/LoadingSpinner';
+import AddStoryContent from './AddStoryContent';
 
 export default function AddStoryPage() {
-  const [formData, setFormData] = useState({
-    title: '',
-    summary: '',
-    authorName: '',
-    authorId: undefined as string | undefined,
-    contentHtml: '',
-    sourceUrl: '',
-    tags: [] as string[],
-    seriesName: '',
-    seriesId: undefined as string | undefined,
-    volume: '',
-  });
-  
-  const [coverImage, setCoverImage] = useState<File | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [processingImages, setProcessingImages] = useState(false);
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  const [duplicateWarning, setDuplicateWarning] = useState<{
-    show: boolean;
-    count: number;
-    duplicates: Array<{
-      id: string;
-      title: string;
-      authorName: string;
-      createdAt: string;
-    }>;
-  }>({ show: false, count: 0, duplicates: [] });
-  const [checkingDuplicates, setCheckingDuplicates] = useState(false);
-  
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const { isAuthenticated } = useAuth();
-
-  // Handle URL parameters
-  useEffect(() => {
-    const authorId = searchParams.get('authorId');
-    const from = searchParams.get('from');
-    
-    // Pre-fill author if authorId is provided in URL
-    if (authorId) {
-      const loadAuthor = async () => {
-        try {
-          const author = await authorApi.getAuthor(authorId);
-          setFormData(prev => ({
-            ...prev,
-            authorName: author.name,
-            authorId: author.id
-          }));
-        } catch (error) {
-          console.error('Failed to load author:', error);
-        }
-      };
-      loadAuthor();
-    }
-    
-    // Handle URL import data
-    if (from === 'url-import') {
-      const title = searchParams.get('title') || '';
-      const summary = searchParams.get('summary') || '';
-      const author = searchParams.get('author') || '';
-      const sourceUrl = searchParams.get('sourceUrl') || '';
-      const tagsParam = searchParams.get('tags');
-      const content = searchParams.get('content') || '';
-      
-      let tags: string[] = [];
-      try {
-        tags = tagsParam ? JSON.parse(tagsParam) : [];
-      } catch (error) {
-        console.error('Failed to parse tags:', error);
-        tags = [];
-      }
-      
-      setFormData(prev => ({
-        ...prev,
-        title,
-        summary,
-        authorName: author,
-        authorId: undefined, // Reset author ID when importing from URL
-        contentHtml: content,
-        sourceUrl,
-        tags
-      }));
-      
-      // Show success message
-      setErrors({ success: 'Story data imported successfully! Review and edit as needed before saving.' });
-    }
-  }, [searchParams]);
-
-  // Load pending story data from bulk combine operation
-  useEffect(() => {
-    const fromBulkCombine = searchParams.get('from') === 'bulk-combine';
-    if (fromBulkCombine) {
-      const pendingStoryData = localStorage.getItem('pendingStory');
-      if (pendingStoryData) {
-        try {
-          const storyData = JSON.parse(pendingStoryData);
-          setFormData(prev => ({
-            ...prev,
-            title: storyData.title || '',
-            authorName: storyData.author || '',
-            authorId: undefined, // Reset author ID for bulk combined stories
-            contentHtml: storyData.content || '',
-            sourceUrl: storyData.sourceUrl || '',
-            summary: storyData.summary || '',
-            tags: storyData.tags || []
-          }));
-          // Clear the pending data
-          localStorage.removeItem('pendingStory');
-        } catch (error) {
-          console.error('Failed to load pending story data:', error);
-        }
-      }
-    }
-  }, [searchParams]);
-
-  // Check for duplicates when title and author are both present
-  useEffect(() => {
-    const checkDuplicates = async () => {
-      const title = formData.title.trim();
-      const authorName = formData.authorName.trim();
-      
-      // Don't check if user isn't authenticated or if title/author are empty
-      if (!isAuthenticated || !title || !authorName) {
-        setDuplicateWarning({ show: false, count: 0, duplicates: [] });
-        return;
-      }
-
-      // Debounce the check to avoid too many API calls
-      const timeoutId = setTimeout(async () => {
-        try {
-          setCheckingDuplicates(true);
-          const result = await storyApi.checkDuplicate(title, authorName);
-          
-          if (result.hasDuplicates) {
-            setDuplicateWarning({
-              show: true,
-              count: result.count,
-              duplicates: result.duplicates
-            });
-          } else {
-            setDuplicateWarning({ show: false, count: 0, duplicates: [] });
-          }
-        } catch (error) {
-          console.error('Failed to check for duplicates:', error);
-          // Clear any existing duplicate warnings on error
-          setDuplicateWarning({ show: false, count: 0, duplicates: [] });
-          // Don't show error to user as this is just a helpful warning
-          // Authentication errors will be handled by the API interceptor
-        } finally {
-          setCheckingDuplicates(false);
-        }
-      }, 500); // 500ms debounce
-
-      return () => clearTimeout(timeoutId);
-    };
-
-    checkDuplicates();
-  }, [formData.title, formData.authorName, isAuthenticated]);
-
-  const handleInputChange = (field: string) => (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setFormData(prev => ({
-      ...prev,
-      [field]: e.target.value
-    }));
-    
-    // Clear error when user starts typing
-    if (errors[field]) {
-      setErrors(prev => ({ ...prev, [field]: '' }));
-    }
-  };
-
-  const handleContentChange = (html: string) => {
-    setFormData(prev => ({ ...prev, contentHtml: html }));
-    if (errors.contentHtml) {
-      setErrors(prev => ({ ...prev, contentHtml: '' }));
-    }
-  };
-
-  const handleTagsChange = (tags: string[]) => {
-    setFormData(prev => ({ ...prev, tags }));
-  };
-
-  const handleAuthorChange = (authorName: string, authorId?: string) => {
-    setFormData(prev => ({ 
-      ...prev, 
-      authorName,
-      authorId: authorId // This will be undefined if creating new author, which clears the existing ID
-    }));
-    
-    // Clear error when user changes author
-    if (errors.authorName) {
-      setErrors(prev => ({ ...prev, authorName: '' }));
-    }
-  };
-
-  const handleSeriesChange = (seriesName: string, seriesId?: string) => {
-    setFormData(prev => ({ 
-      ...prev, 
-      seriesName,
-      seriesId: seriesId // This will be undefined if creating new series, which clears the existing ID
-    }));
-    
-    // Clear error when user changes series
-    if (errors.seriesName) {
-      setErrors(prev => ({ ...prev, seriesName: '' }));
-    }
-  };
-
-  const validateForm = () => {
-    const newErrors: Record<string, string> = {};
-
-    if (!formData.title.trim()) {
-      newErrors.title = 'Title is required';
-    }
-    
-    if (!formData.authorName.trim()) {
-      newErrors.authorName = 'Author name is required';
-    }
-    
-    if (!formData.contentHtml.trim()) {
-      newErrors.contentHtml = 'Story content is required';
-    }
-
-    if (formData.seriesName && !formData.volume) {
-      newErrors.volume = 'Volume number is required when series is specified';
-    }
-    
-    if (formData.volume && !formData.seriesName.trim()) {
-      newErrors.seriesName = 'Series name is required when volume is specified';
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  // Helper function to detect external images in HTML content
-  const hasExternalImages = (htmlContent: string): boolean => {
-    if (!htmlContent) return false;
-
-    // Create a temporary DOM element to parse HTML
-    const tempDiv = document.createElement('div');
-    tempDiv.innerHTML = htmlContent;
-
-    const images = tempDiv.querySelectorAll('img');
-    for (let i = 0; i < images.length; i++) {
-      const img = images[i];
-      const src = img.getAttribute('src');
-      if (src && (src.startsWith('http://') || src.startsWith('https://'))) {
-        return true;
-      }
-    }
-    return false;
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!validateForm()) {
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      // First, create the story with JSON data
-      const storyData = {
-        title: formData.title,
-        summary: formData.summary || undefined,
-        contentHtml: formData.contentHtml,
-        sourceUrl: formData.sourceUrl || undefined,
-        volume: formData.seriesName ? parseInt(formData.volume) : undefined,
-        // Send seriesId if we have it (existing series), otherwise send seriesName (new series)
-        ...(formData.seriesId ? { seriesId: formData.seriesId } : { seriesName: formData.seriesName || undefined }),
-        // Send authorId if we have it (existing author), otherwise send authorName (new author)
-        ...(formData.authorId ? { authorId: formData.authorId } : { authorName: formData.authorName }),
-        tagNames: formData.tags.length > 0 ? formData.tags : undefined,
-      };
-
-      const story = await storyApi.createStory(storyData);
-
-      // Process images if there are external images in the content
-      if (hasExternalImages(formData.contentHtml)) {
-        try {
-          setProcessingImages(true);
-          const imageResult = await storyApi.processContentImages(story.id, formData.contentHtml);
-
-          // If images were processed and content was updated, save the updated content
-          if (imageResult.processedContent !== formData.contentHtml) {
-            await storyApi.updateStory(story.id, {
-              title: formData.title,
-              summary: formData.summary || undefined,
-              contentHtml: imageResult.processedContent,
-              sourceUrl: formData.sourceUrl || undefined,
-              volume: formData.seriesName ? parseInt(formData.volume) : undefined,
-              ...(formData.seriesId ? { seriesId: formData.seriesId } : { seriesName: formData.seriesName || undefined }),
-              ...(formData.authorId ? { authorId: formData.authorId } : { authorName: formData.authorName }),
-              tagNames: formData.tags.length > 0 ? formData.tags : undefined,
-            });
-
-            // Show success message with image processing info
-            if (imageResult.downloadedImages.length > 0) {
-              console.log(`Successfully processed ${imageResult.downloadedImages.length} images`);
-            }
-            if (imageResult.warnings && imageResult.warnings.length > 0) {
-              console.warn('Image processing warnings:', imageResult.warnings);
-            }
-          }
-        } catch (imageError) {
-          console.error('Failed to process images:', imageError);
-          // Don't fail the entire operation if image processing fails
-          // The story was created successfully, just without processed images
-        } finally {
-          setProcessingImages(false);
-        }
-      }
-
-      // If there's a cover image, upload it separately
-      if (coverImage) {
-        await storyApi.uploadCover(story.id, coverImage);
-      }
-
-      router.push(`/stories/${story.id}/detail`);
-    } catch (error: any) {
-      console.error('Failed to create story:', error);
-      const errorMessage = error.response?.data?.message || 'Failed to create story';
-      setErrors({ submit: errorMessage });
-    } finally {
-      setLoading(false);
-    }
-  };
-
   return (
     <ImportLayout
       title="Add New Story"
       description="Add a story to your personal collection"
     >
-      {/* Success Message */}
-      {errors.success && (
-        <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg mb-6">
-          <p className="text-green-800 dark:text-green-200">{errors.success}</p>
+      <Suspense fallback={
+        <div className="flex items-center justify-center py-20">
+          <LoadingSpinner size="lg" />
         </div>
-      )}
-
-      <form onSubmit={handleSubmit} className="space-y-6">
-        {/* Title */}
-        <Input
-          label="Title *"
-          value={formData.title}
-          onChange={handleInputChange('title')}
-          placeholder="Enter the story title"
-          error={errors.title}
-          required
-        />
-
-        {/* Author Selector */}
-        <AuthorSelector
-          label="Author *"
-          value={formData.authorName}
-          onChange={handleAuthorChange}
-          placeholder="Select or enter author name"
-          error={errors.authorName}
-          required
-        />
-
-        {/* Duplicate Warning */}
-        {duplicateWarning.show && (
-          <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
-            <div className="flex items-start gap-3">
-              <div className="text-yellow-600 dark:text-yellow-400 mt-0.5">
-                ⚠️
-              </div>
-              <div>
-                <h4 className="font-medium text-yellow-800 dark:text-yellow-200">
-                  Potential Duplicate Detected
-                </h4>
-                <p className="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
-                  Found {duplicateWarning.count} existing {duplicateWarning.count === 1 ? 'story' : 'stories'} with the same title and author:
-                </p>
-                <ul className="mt-2 space-y-1">
-                  {duplicateWarning.duplicates.map((duplicate, index) => (
-                    <li key={duplicate.id} className="text-sm text-yellow-700 dark:text-yellow-300">
-                      • <span className="font-medium">{duplicate.title}</span> by {duplicate.authorName} 
-                      <span className="text-xs ml-2">
-                        (added {new Date(duplicate.createdAt).toLocaleDateString()})
-                      </span>
-                    </li>
-                  ))}
-                </ul>
-                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-2">
-                  You can still create this story if it's different from the existing ones.
-                </p>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Checking indicator */}
-        {checkingDuplicates && (
-          <div className="flex items-center gap-2 text-sm theme-text">
-            <div className="animate-spin w-4 h-4 border-2 border-theme-accent border-t-transparent rounded-full"></div>
-            Checking for duplicates...
-          </div>
-        )}
-
-        {/* Summary */}
-        <div>
-          <label className="block text-sm font-medium theme-header mb-2">
-            Summary
-          </label>
-          <Textarea
-            value={formData.summary}
-            onChange={handleInputChange('summary')}
-            placeholder="Brief summary or description of the story..."
-            rows={3}
-          />
-          <p className="text-sm theme-text mt-1">
-            Optional summary that will be displayed on the story detail page
-          </p>
-        </div>
-
-        {/* Cover Image Upload */}
-        <div>
-          <label className="block text-sm font-medium theme-header mb-2">
-            Cover Image
-          </label>
-          <ImageUpload
-            onImageSelect={setCoverImage}
-            accept="image/jpeg,image/png"
-            maxSizeMB={5}
-            aspectRatio="3:4"
-            placeholder="Drop a cover image here or click to select"
-          />
-        </div>
-
-        {/* Content */}
-        <div>
-          <label className="block text-sm font-medium theme-header mb-2">
-            Story Content *
-          </label>
-          <RichTextEditor
-            value={formData.contentHtml}
-            onChange={handleContentChange}
-            placeholder="Write or paste your story content here..."
-            error={errors.contentHtml}
-            enableImageProcessing={false}
-          />
-          <p className="text-sm theme-text mt-2">
-            💡 <strong>Tip:</strong> If you paste content with images, they'll be automatically downloaded and stored locally when you save the story.
-          </p>
-        </div>
-
-        {/* Tags */}
-        <div>
-          <label className="block text-sm font-medium theme-header mb-2">
-            Tags
-          </label>
-          <TagInput
-            tags={formData.tags}
-            onChange={handleTagsChange}
-            placeholder="Add tags to categorize your story..."
-          />
-        </div>
-
-        {/* Series and Volume */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <SeriesSelector
-            label="Series (optional)"
-            value={formData.seriesName}
-            onChange={handleSeriesChange}
-            placeholder="Select or enter series name if part of a series"
-            error={errors.seriesName}
-            authorId={formData.authorId}
-          />
-          
-          <Input
-            label="Volume/Part (optional)"
-            type="number"
-            min="1"
-            value={formData.volume}
-            onChange={handleInputChange('volume')}
-            placeholder="Enter volume/part number"
-            error={errors.volume}
-          />
-        </div>
-
-        {/* Source URL */}
-        <Input
-          label="Source URL (optional)"
-          type="url"
-          value={formData.sourceUrl}
-          onChange={handleInputChange('sourceUrl')}
-          placeholder="https://example.com/original-story-url"
-        />
-
-        {/* Image Processing Indicator */}
-        {processingImages && (
-          <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-            <div className="flex items-center gap-3">
-              <div className="animate-spin w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full"></div>
-              <p className="text-blue-800 dark:text-blue-200">
-                Processing and downloading images...
-              </p>
-            </div>
-          </div>
-        )}
-
-        {/* Submit Error */}
-        {errors.submit && (
-          <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-            <p className="text-red-800 dark:text-red-200">{errors.submit}</p>
-          </div>
-        )}
-
-        {/* Actions */}
-        <div className="flex justify-end gap-4 pt-6">
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={() => router.back()}
-            disabled={loading}
-          >
-            Cancel
-          </Button>
-          
-          <Button
-            type="submit"
-            loading={loading}
-            disabled={!formData.title || !formData.authorName || !formData.contentHtml}
-          >
-            {processingImages ? 'Processing Images...' : 'Add Story'}
-          </Button>
-        </div>
-      </form>
+      }>
+        <AddStoryContent />
+      </Suspense>
     </ImportLayout>
   );
 }

frontend/src/app/authors/page.tsx

@@ -22,7 +22,7 @@ export default function AuthorsPage() {
   const [currentPage, setCurrentPage] = useState(0);
   const [totalHits, setTotalHits] = useState(0);
   const [hasMore, setHasMore] = useState(false);
-  const ITEMS_PER_PAGE = 50; // Safe limit under Typesense's 250 limit
+  const ITEMS_PER_PAGE = 50;
 
   useEffect(() => {
     const debounceTimer = setTimeout(() => {
@@ -35,12 +35,14 @@ export default function AuthorsPage() {
           } else {
             setSearchLoading(true);
           }
-          const searchResults = await authorApi.searchAuthorsTypesense({ 
-            q: searchQuery || '*',
+
+          // Use Solr search for all queries (including empty search)
+          const searchResults = await authorApi.searchAuthors({
+            query: searchQuery || '*', // Use '*' for all authors when no search query
             page: currentPage,
             size: ITEMS_PER_PAGE,
             sortBy: sortBy,
-            sortOrder: sortOrder
+            sortDir: sortOrder
           });
 
           if (currentPage === 0) {
@@ -53,23 +55,11 @@ export default function AuthorsPage() {
             setFilteredAuthors(prev => [...prev, ...(searchResults.results || [])]);
           }
 
-          setTotalHits(searchResults.totalHits);
-          setHasMore(searchResults.results.length === ITEMS_PER_PAGE && (currentPage + 1) * ITEMS_PER_PAGE < searchResults.totalHits);
+          setTotalHits(searchResults.totalHits || 0);
+          setHasMore((searchResults.results || []).length === ITEMS_PER_PAGE && (currentPage + 1) * ITEMS_PER_PAGE < (searchResults.totalHits || 0));
 
         } catch (error) {
-          console.error('Failed to load authors:', error);
-          // Fallback to regular API if Typesense fails (only for first page)
-          if (currentPage === 0) {
-            try {
-              const authorsResult = await authorApi.getAuthors({ page: 0, size: ITEMS_PER_PAGE });
-              setAuthors(authorsResult.content || []);
-              setFilteredAuthors(authorsResult.content || []);
-              setTotalHits(authorsResult.totalElements || 0);
-              setHasMore(authorsResult.content.length === ITEMS_PER_PAGE);
-            } catch (fallbackError) {
-              console.error('Fallback also failed:', fallbackError);
-            }
-          }
+          console.error('Failed to search authors:', error);
         } finally {
           setLoading(false);
           setSearchLoading(false);
@@ -95,7 +85,7 @@ export default function AuthorsPage() {
     }
   };
 
-  // Client-side filtering no longer needed since we use Typesense
+  // No longer needed - Solr search handles filtering directly
 
   // Note: We no longer have individual story ratings in the author list
   // Average rating would need to be calculated on backend if needed
@@ -118,8 +108,7 @@ export default function AuthorsPage() {
           <div>
             <h1 className="text-3xl font-bold theme-header">Authors</h1>
             <p className="theme-text mt-1">
-              {filteredAuthors.length} of {totalHits} {totalHits === 1 ? 'author' : 'authors'}
-              {searchQuery ? ` found` : ` in your library`}
+              {searchQuery ? `${totalHits} authors found` : `${totalHits} authors in your library`}
               {hasMore && ` (showing first ${filteredAuthors.length})`}
             </p>
           </div>
@@ -218,7 +207,7 @@ export default function AuthorsPage() {
         )}
         
         {/* Load More Button */}
-        {hasMore && (
+        {hasMore && !searchQuery && (
           <div className="flex justify-center pt-8">
             <Button
               onClick={loadMore}

frontend/src/app/globals.css

@@ -139,6 +139,15 @@
     @apply max-w-full h-auto mx-auto my-6 rounded-lg shadow-sm;
     max-height: 80vh; /* Prevent images from being too tall */
     display: block;
+    /* Optimize for performance and prevent reloading */
+    will-change: auto;
+    transform: translateZ(0); /* Force hardware acceleration */
+    backface-visibility: hidden;
+    image-rendering: optimizeQuality;
+    /* Prevent layout shifts that might trigger reloads */
+    box-sizing: border-box;
+    /* Ensure stable dimensions */
+    min-height: 1px;
   }
 
   .reading-content img[align="left"] {

frontend/src/app/library/LibraryContent.tsx

@@ -0,0 +1,341 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { searchApi, storyApi, tagApi } from '../../lib/api';
+import { Story, Tag, FacetCount, AdvancedFilters } from '../../types/api';
+import { Input } from '../../components/ui/Input';
+import Button from '../../components/ui/Button';
+import StoryMultiSelect from '../../components/stories/StoryMultiSelect';
+import TagFilter from '../../components/stories/TagFilter';
+import LoadingSpinner from '../../components/ui/LoadingSpinner';
+import SidebarLayout from '../../components/library/SidebarLayout';
+import ToolbarLayout from '../../components/library/ToolbarLayout';
+import MinimalLayout from '../../components/library/MinimalLayout';
+import { useLibraryLayout } from '../../hooks/useLibraryLayout';
+
+type ViewMode = 'grid' | 'list';
+type SortOption = 'createdAt' | 'title' | 'authorName' | 'rating' | 'wordCount' | 'lastReadAt';
+
+export default function LibraryContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { layout } = useLibraryLayout();
+  const [stories, setStories] = useState<Story[]>([]);
+  const [tags, setTags] = useState<Tag[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searchLoading, setSearchLoading] = useState(false);
+  const [randomLoading, setRandomLoading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [viewMode, setViewMode] = useState<ViewMode>('list');
+  const [sortOption, setSortOption] = useState<SortOption>('lastReadAt');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
+  const [page, setPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalElements, setTotalElements] = useState(0);
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [urlParamsProcessed, setUrlParamsProcessed] = useState(false);
+  const [advancedFilters, setAdvancedFilters] = useState<AdvancedFilters>({});
+
+  // Initialize filters from URL parameters
+  useEffect(() => {
+    const tagsParam = searchParams.get('tags');
+    if (tagsParam) {
+      console.log('URL tag filter detected:', tagsParam);
+      // Use functional updates to ensure all state changes happen together
+      setSelectedTags([tagsParam]);
+      setPage(0); // Reset to first page when applying URL filter
+    }
+    setUrlParamsProcessed(true);
+  }, [searchParams]);
+
+  // Convert facet counts to Tag objects for the UI, enriched with full tag data
+  const [fullTags, setFullTags] = useState<Tag[]>([]);
+  
+  // Fetch full tag data for enrichment
+  useEffect(() => {
+    const fetchFullTags = async () => {
+      try {
+        const result = await tagApi.getTags({ size: 1000 }); // Get all tags
+        setFullTags(result.content || []);
+      } catch (error) {
+        console.error('Failed to fetch full tag data:', error);
+        setFullTags([]);
+      }
+    };
+    
+    fetchFullTags();
+  }, []);
+  
+  const convertFacetsToTags = (facets?: Record<string, FacetCount[]>): Tag[] => {
+    if (!facets || !facets.tagNames_facet) {
+      return [];
+    }
+
+    return facets.tagNames_facet.map(facet => {
+      // Find the full tag data by name
+      const fullTag = fullTags.find(tag => tag.name.toLowerCase() === facet.value.toLowerCase());
+      
+      return {
+        id: fullTag?.id || facet.value, // Use actual ID if available, fallback to name
+        name: facet.value,
+        storyCount: facet.count,
+        // Include color and other metadata from the full tag data
+        color: fullTag?.color,
+        description: fullTag?.description,
+        aliasCount: fullTag?.aliasCount,
+        createdAt: fullTag?.createdAt,
+        aliases: fullTag?.aliases
+      };
+    });
+  };
+
+  // Enrich existing tags when fullTags are loaded
+  useEffect(() => {
+    if (fullTags.length > 0) {
+      // Use functional update to get the current tags state
+      setTags(currentTags => {
+        if (currentTags.length > 0) {
+          // Check if tags already have color data to avoid infinite loops
+          const hasColors = currentTags.some(tag => tag.color);
+          if (!hasColors) {
+            // Re-enrich existing tags with color data
+            return currentTags.map(tag => {
+              const fullTag = fullTags.find(ft => ft.name.toLowerCase() === tag.name.toLowerCase());
+              return {
+                ...tag,
+                color: fullTag?.color,
+                description: fullTag?.description,
+                aliasCount: fullTag?.aliasCount,
+                createdAt: fullTag?.createdAt,
+                aliases: fullTag?.aliases,
+                id: fullTag?.id || tag.id
+              };
+            });
+          }
+        }
+        return currentTags; // Return unchanged if no enrichment needed
+      });
+    }
+  }, [fullTags]); // Only run when fullTags change
+  
+  // Debounce search to avoid too many API calls
+  useEffect(() => {
+    // Don't run search until URL parameters have been processed
+    if (!urlParamsProcessed) return;
+    
+    const debounceTimer = setTimeout(() => {
+      const performSearch = async () => {
+        try {
+          // Use searchLoading for background search, loading only for initial load
+          const isInitialLoad = stories.length === 0 && !searchQuery;
+          if (isInitialLoad) {
+            setLoading(true);
+          } else {
+            setSearchLoading(true);
+          }
+          
+          // Always use search API for consistency - use '*' for match-all when no query
+          const apiParams = {
+            query: searchQuery.trim() || '*', 
+            page: page, // Use 0-based pagination consistently
+            size: 20,
+            tags: selectedTags.length > 0 ? selectedTags : undefined,
+            sortBy: sortOption,
+            sortDir: sortDirection,
+            facetBy: ['tagNames'], // Request tag facets for the filter UI
+            // Advanced filters
+            ...advancedFilters
+          };
+          
+          console.log('Performing search with params:', apiParams);
+          const result = await searchApi.search(apiParams);
+          
+          const currentStories = result?.results || [];
+          setStories(currentStories);
+          setTotalPages(Math.ceil((result?.totalHits || 0) / 20));
+          setTotalElements(result?.totalHits || 0);
+          
+          // Update tags from facets - these represent all matching stories, not just current page
+          const resultTags = convertFacetsToTags(result?.facets);
+          setTags(resultTags);
+          
+        } catch (error) {
+          console.error('Failed to load stories:', error);
+          setStories([]);
+          setTags([]);
+        } finally {
+          setLoading(false);
+          setSearchLoading(false);
+        }
+      };
+
+      performSearch();
+    }, searchQuery ? 500 : 0); // Debounce search queries, but load immediately for filters/pagination
+
+    return () => clearTimeout(debounceTimer);
+  }, [searchQuery, selectedTags, sortOption, sortDirection, page, refreshTrigger, urlParamsProcessed, advancedFilters]);
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+    setPage(0);
+  };
+
+  const handleStoryUpdate = () => {
+    setRefreshTrigger(prev => prev + 1);
+  };
+
+  const handleRandomStory = async () => {
+    if (totalElements === 0) return;
+    
+    try {
+      setRandomLoading(true);
+      const randomStory = await storyApi.getRandomStory({
+        searchQuery: searchQuery || undefined,
+        tags: selectedTags.length > 0 ? selectedTags : undefined,
+        ...advancedFilters
+      });
+      if (randomStory) {
+        router.push(`/stories/${randomStory.id}`);
+      } else {
+        alert('No stories available. Please add some stories first.');
+      }
+    } catch (error) {
+      console.error('Failed to get random story:', error);
+      alert('Failed to get a random story. Please try again.');
+    } finally {
+      setRandomLoading(false);
+    }
+  };
+
+  const clearFilters = () => {
+    setSearchQuery('');
+    setSelectedTags([]);
+    setAdvancedFilters({});
+    setPage(0);
+    setRefreshTrigger(prev => prev + 1);
+  };
+
+  const handleTagToggle = (tagName: string) => {
+    setSelectedTags(prev => 
+      prev.includes(tagName)
+        ? prev.filter(t => t !== tagName)
+        : [...prev, tagName]
+    );
+    setPage(0);
+    setRefreshTrigger(prev => prev + 1);
+  };
+
+  const handleSortDirectionToggle = () => {
+    setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
+  };
+
+  const handleAdvancedFiltersChange = (filters: AdvancedFilters) => {
+    setAdvancedFilters(filters);
+    setPage(0);
+    setRefreshTrigger(prev => prev + 1);
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  const handleSortChange = (option: string) => {
+    setSortOption(option as SortOption);
+  };
+
+  const layoutProps = {
+    stories,
+    tags,
+    totalElements,
+    searchQuery,
+    selectedTags,
+    viewMode,
+    sortOption,
+    sortDirection,
+    advancedFilters,
+    onSearchChange: handleSearchChange,
+    onTagToggle: handleTagToggle,
+    onViewModeChange: setViewMode,
+    onSortChange: handleSortChange,
+    onSortDirectionToggle: handleSortDirectionToggle,
+    onAdvancedFiltersChange: handleAdvancedFiltersChange,
+    onRandomStory: handleRandomStory,
+    onClearFilters: clearFilters,
+  };
+
+  const renderContent = () => {
+    if (stories.length === 0 && !loading) {
+      return (
+        <div className="text-center py-12 theme-card theme-shadow rounded-lg">
+          <p className="theme-text text-lg mb-4">
+            {searchQuery || selectedTags.length > 0 || Object.values(advancedFilters).some(v => v !== undefined && v !== '' && v !== 'all' && v !== false)
+              ? 'No stories match your search criteria.' 
+              : 'Your library is empty.'
+            }
+          </p>
+          {searchQuery || selectedTags.length > 0 || Object.values(advancedFilters).some(v => v !== undefined && v !== '' && v !== 'all' && v !== false) ? (
+            <Button variant="ghost" onClick={clearFilters}>
+              Clear Filters
+            </Button>
+          ) : (
+            <Button href="/add-story">
+              Add Your First Story
+            </Button>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <>
+        <StoryMultiSelect
+          stories={stories}
+          viewMode={viewMode}
+          onUpdate={handleStoryUpdate}
+          allowMultiSelect={true}
+        />
+        
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex justify-center gap-2 mt-8">
+            <Button
+              variant="ghost"
+              onClick={() => setPage(page - 1)}
+              disabled={page === 0}
+            >
+              Previous
+            </Button>
+            
+            <span className="flex items-center px-4 py-2 theme-text">
+              Page {page + 1} of {totalPages}
+            </span>
+            
+            <Button
+              variant="ghost"
+              onClick={() => setPage(page + 1)}
+              disabled={page >= totalPages - 1}
+            >
+              Next
+            </Button>
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const LayoutComponent = layout === 'sidebar' ? SidebarLayout :
+                        layout === 'toolbar' ? ToolbarLayout :
+                        MinimalLayout;
+
+  return (
+    <LayoutComponent {...layoutProps}>
+      {renderContent()}
+    </LayoutComponent>
+  );
+}

frontend/src/app/library/page.tsx

@@ -1,346 +1,20 @@
 'use client';
 
-import { useState, useEffect } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { searchApi, storyApi, tagApi } from '../../lib/api';
-import { Story, Tag, FacetCount, AdvancedFilters } from '../../types/api';
+import { Suspense } from 'react';
 import AppLayout from '../../components/layout/AppLayout';
-import { Input } from '../../components/ui/Input';
-import Button from '../../components/ui/Button';
-import StoryMultiSelect from '../../components/stories/StoryMultiSelect';
-import TagFilter from '../../components/stories/TagFilter';
 import LoadingSpinner from '../../components/ui/LoadingSpinner';
-import SidebarLayout from '../../components/library/SidebarLayout';
-import ToolbarLayout from '../../components/library/ToolbarLayout';
-import MinimalLayout from '../../components/library/MinimalLayout';
-import { useLibraryLayout } from '../../hooks/useLibraryLayout';
-
-type ViewMode = 'grid' | 'list';
-type SortOption = 'createdAt' | 'title' | 'authorName' | 'rating' | 'wordCount' | 'lastRead';
+import LibraryContent from './LibraryContent';
 
 export default function LibraryPage() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const { layout } = useLibraryLayout();
-  const [stories, setStories] = useState<Story[]>([]);
-  const [tags, setTags] = useState<Tag[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [searchLoading, setSearchLoading] = useState(false);
-  const [randomLoading, setRandomLoading] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedTags, setSelectedTags] = useState<string[]>([]);
-  const [viewMode, setViewMode] = useState<ViewMode>('list');
-  const [sortOption, setSortOption] = useState<SortOption>('lastRead');
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
-  const [page, setPage] = useState(0);
-  const [totalPages, setTotalPages] = useState(1);
-  const [totalElements, setTotalElements] = useState(0);
-  const [refreshTrigger, setRefreshTrigger] = useState(0);
-  const [urlParamsProcessed, setUrlParamsProcessed] = useState(false);
-  const [advancedFilters, setAdvancedFilters] = useState<AdvancedFilters>({});
-
-  // Initialize filters from URL parameters
-  useEffect(() => {
-    const tagsParam = searchParams.get('tags');
-    if (tagsParam) {
-      console.log('URL tag filter detected:', tagsParam);
-      // Use functional updates to ensure all state changes happen together
-      setSelectedTags([tagsParam]);
-      setPage(0); // Reset to first page when applying URL filter
-    }
-    setUrlParamsProcessed(true);
-  }, [searchParams]);
-
-  // Convert facet counts to Tag objects for the UI, enriched with full tag data
-  const [fullTags, setFullTags] = useState<Tag[]>([]);
-  
-  // Fetch full tag data for enrichment
-  useEffect(() => {
-    const fetchFullTags = async () => {
-      try {
-        const result = await tagApi.getTags({ size: 1000 }); // Get all tags
-        setFullTags(result.content || []);
-      } catch (error) {
-        console.error('Failed to fetch full tag data:', error);
-        setFullTags([]);
-      }
-    };
-    
-    fetchFullTags();
-  }, []);
-  
-  const convertFacetsToTags = (facets?: Record<string, FacetCount[]>): Tag[] => {
-    if (!facets || !facets.tagNames) {
-      return [];
-    }
-    
-    return facets.tagNames.map(facet => {
-      // Find the full tag data by name
-      const fullTag = fullTags.find(tag => tag.name.toLowerCase() === facet.value.toLowerCase());
-      
-      return {
-        id: fullTag?.id || facet.value, // Use actual ID if available, fallback to name
-        name: facet.value,
-        storyCount: facet.count,
-        // Include color and other metadata from the full tag data
-        color: fullTag?.color,
-        description: fullTag?.description,
-        aliasCount: fullTag?.aliasCount,
-        createdAt: fullTag?.createdAt,
-        aliases: fullTag?.aliases
-      };
-    });
-  };
-
-  // Enrich existing tags when fullTags are loaded
-  useEffect(() => {
-    if (fullTags.length > 0) {
-      // Use functional update to get the current tags state
-      setTags(currentTags => {
-        if (currentTags.length > 0) {
-          // Check if tags already have color data to avoid infinite loops
-          const hasColors = currentTags.some(tag => tag.color);
-          if (!hasColors) {
-            // Re-enrich existing tags with color data
-            return currentTags.map(tag => {
-              const fullTag = fullTags.find(ft => ft.name.toLowerCase() === tag.name.toLowerCase());
-              return {
-                ...tag,
-                color: fullTag?.color,
-                description: fullTag?.description,
-                aliasCount: fullTag?.aliasCount,
-                createdAt: fullTag?.createdAt,
-                aliases: fullTag?.aliases,
-                id: fullTag?.id || tag.id
-              };
-            });
-          }
-        }
-        return currentTags; // Return unchanged if no enrichment needed
-      });
-    }
-  }, [fullTags]); // Only run when fullTags change
-  
-  // Debounce search to avoid too many API calls
-  useEffect(() => {
-    // Don't run search until URL parameters have been processed
-    if (!urlParamsProcessed) return;
-    
-    const debounceTimer = setTimeout(() => {
-      const performSearch = async () => {
-        try {
-          // Use searchLoading for background search, loading only for initial load
-          const isInitialLoad = stories.length === 0 && !searchQuery;
-          if (isInitialLoad) {
-            setLoading(true);
-          } else {
-            setSearchLoading(true);
-          }
-          
-          // Always use search API for consistency - use '*' for match-all when no query
-          const apiParams = {
-            query: searchQuery.trim() || '*', 
-            page: page, // Use 0-based pagination consistently
-            size: 20,
-            tags: selectedTags.length > 0 ? selectedTags : undefined,
-            sortBy: sortOption,
-            sortDir: sortDirection,
-            facetBy: ['tagNames'], // Request tag facets for the filter UI
-            // Advanced filters
-            ...advancedFilters
-          };
-          
-          console.log('Performing search with params:', apiParams);
-          const result = await searchApi.search(apiParams);
-          
-          const currentStories = result?.results || [];
-          setStories(currentStories);
-          setTotalPages(Math.ceil((result?.totalHits || 0) / 20));
-          setTotalElements(result?.totalHits || 0);
-          
-          // Update tags from facets - these represent all matching stories, not just current page
-          const resultTags = convertFacetsToTags(result?.facets);
-          setTags(resultTags);
-          
-        } catch (error) {
-          console.error('Failed to load stories:', error);
-          setStories([]);
-          setTags([]);
-        } finally {
-          setLoading(false);
-          setSearchLoading(false);
-        }
-      };
-
-      performSearch();
-    }, searchQuery ? 500 : 0); // Debounce search queries, but load immediately for filters/pagination
-
-    return () => clearTimeout(debounceTimer);
-  }, [searchQuery, selectedTags, sortOption, sortDirection, page, refreshTrigger, urlParamsProcessed, advancedFilters]);
-
-  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchQuery(e.target.value);
-    setPage(0);
-  };
-
-  const handleStoryUpdate = () => {
-    setRefreshTrigger(prev => prev + 1);
-  };
-
-  const handleRandomStory = async () => {
-    if (totalElements === 0) return;
-    
-    try {
-      setRandomLoading(true);
-      const randomStory = await storyApi.getRandomStory({
-        searchQuery: searchQuery || undefined,
-        tags: selectedTags.length > 0 ? selectedTags : undefined,
-        ...advancedFilters
-      });
-      if (randomStory) {
-        router.push(`/stories/${randomStory.id}`);
-      } else {
-        alert('No stories available. Please add some stories first.');
-      }
-    } catch (error) {
-      console.error('Failed to get random story:', error);
-      alert('Failed to get a random story. Please try again.');
-    } finally {
-      setRandomLoading(false);
-    }
-  };
-
-  const clearFilters = () => {
-    setSearchQuery('');
-    setSelectedTags([]);
-    setAdvancedFilters({});
-    setPage(0);
-    setRefreshTrigger(prev => prev + 1);
-  };
-
-  const handleTagToggle = (tagName: string) => {
-    setSelectedTags(prev => 
-      prev.includes(tagName)
-        ? prev.filter(t => t !== tagName)
-        : [...prev, tagName]
-    );
-    setPage(0);
-    setRefreshTrigger(prev => prev + 1);
-  };
-
-  const handleSortDirectionToggle = () => {
-    setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
-  };
-
-  const handleAdvancedFiltersChange = (filters: AdvancedFilters) => {
-    setAdvancedFilters(filters);
-    setPage(0);
-    setRefreshTrigger(prev => prev + 1);
-  };
-
-  if (loading) {
-    return (
-      <AppLayout>
+  return (
+    <AppLayout>
+      <Suspense fallback={
         <div className="flex items-center justify-center py-20">
           <LoadingSpinner size="lg" />
         </div>
-      </AppLayout>
-    );
-  }
-
-  const handleSortChange = (option: string) => {
-    setSortOption(option as SortOption);
-  };
-
-  const layoutProps = {
-    stories,
-    tags,
-    totalElements,
-    searchQuery,
-    selectedTags,
-    viewMode,
-    sortOption,
-    sortDirection,
-    advancedFilters,
-    onSearchChange: handleSearchChange,
-    onTagToggle: handleTagToggle,
-    onViewModeChange: setViewMode,
-    onSortChange: handleSortChange,
-    onSortDirectionToggle: handleSortDirectionToggle,
-    onAdvancedFiltersChange: handleAdvancedFiltersChange,
-    onRandomStory: handleRandomStory,
-    onClearFilters: clearFilters,
-  };
-
-  const renderContent = () => {
-    if (stories.length === 0 && !loading) {
-      return (
-        <div className="text-center py-12 theme-card theme-shadow rounded-lg">
-          <p className="theme-text text-lg mb-4">
-            {searchQuery || selectedTags.length > 0 || Object.values(advancedFilters).some(v => v !== undefined && v !== '' && v !== 'all' && v !== false)
-              ? 'No stories match your search criteria.' 
-              : 'Your library is empty.'
-            }
-          </p>
-          {searchQuery || selectedTags.length > 0 || Object.values(advancedFilters).some(v => v !== undefined && v !== '' && v !== 'all' && v !== false) ? (
-            <Button variant="ghost" onClick={clearFilters}>
-              Clear Filters
-            </Button>
-          ) : (
-            <Button href="/add-story">
-              Add Your First Story
-            </Button>
-          )}
-        </div>
-      );
-    }
-
-    return (
-      <>
-        <StoryMultiSelect
-          stories={stories}
-          viewMode={viewMode}
-          onUpdate={handleStoryUpdate}
-          allowMultiSelect={true}
-        />
-        
-        {/* Pagination */}
-        {totalPages > 1 && (
-          <div className="flex justify-center gap-2 mt-8">
-            <Button
-              variant="ghost"
-              onClick={() => setPage(page - 1)}
-              disabled={page === 0}
-            >
-              Previous
-            </Button>
-            
-            <span className="flex items-center px-4 py-2 theme-text">
-              Page {page + 1} of {totalPages}
-            </span>
-            
-            <Button
-              variant="ghost"
-              onClick={() => setPage(page + 1)}
-              disabled={page >= totalPages - 1}
-            >
-              Next
-            </Button>
-          </div>
-        )}
-      </>
-    );
-  };
-
-  const LayoutComponent = layout === 'sidebar' ? SidebarLayout :
-                        layout === 'toolbar' ? ToolbarLayout :
-                        MinimalLayout;
-
-  return (
-    <AppLayout>
-      <LayoutComponent {...layoutProps}>
-        {renderContent()}
-      </LayoutComponent>
+      }>
+        <LibraryContent />
+      </Suspense>
     </AppLayout>
   );
 }

frontend/src/app/scrape/bulk/progress/route.ts

@@ -1,27 +1,9 @@
 import { NextRequest } from 'next/server';
+import { progressStore, type ProgressUpdate } from '../../../../lib/progress';
 
 // Configure route timeout for long-running progress streams
 export const maxDuration = 900; // 15 minutes (900 seconds)
 
-interface ProgressUpdate {
-  type: 'progress' | 'completed' | 'error';
-  current: number;
-  total: number;
-  message: string;
-  url?: string;
-  title?: string;
-  author?: string;
-  wordCount?: number;
-  totalWordCount?: number;
-  error?: string;
-  combinedStory?: any;
-  results?: any[];
-  summary?: any;
-}
-
-// Global progress storage (in production, use Redis or database)
-const progressStore = new Map<string, ProgressUpdate[]>();
-
 export async function GET(request: NextRequest) {
   const searchParams = request.nextUrl.searchParams;
   const sessionId = searchParams.get('sessionId');
@@ -81,13 +63,3 @@ export async function GET(request: NextRequest) {
   });
 }
 
-// Helper function for other routes to send progress updates
-export function sendProgressUpdate(sessionId: string, update: ProgressUpdate) {
-  if (!progressStore.has(sessionId)) {
-    progressStore.set(sessionId, []);
-  }
-  progressStore.get(sessionId)!.push(update);
-}
-
-// Export the helper for other modules to use
-export { progressStore };

frontend/src/app/scrape/bulk/route.ts

@@ -4,15 +4,7 @@ import { NextRequest, NextResponse } from 'next/server';
 export const maxDuration = 900; // 15 minutes (900 seconds)
 
 // Import progress tracking helper
-async function sendProgressUpdate(sessionId: string, update: any) {
-  try {
-    // Dynamic import to avoid circular dependency
-    const { sendProgressUpdate: sendUpdate } = await import('./progress/route');
-    sendUpdate(sessionId, update);
-  } catch (error) {
-    console.warn('Failed to send progress update:', error);
-  }
-}
+import { sendProgressUpdate } from '../../../lib/progress';
 
 interface BulkImportRequest {
   urls: string[];
@@ -193,24 +185,42 @@ async function processCombinedMode(
   console.log(`Combined content character length: ${combinedContentString.length}`);
   console.log(`Combined content parts count: ${combinedContent.length}`);
 
+  // Handle content truncation if needed
+  let finalContent = contentSizeInMB > 10 ?
+    combinedContentString.substring(0, Math.floor(combinedContentString.length * (10 / contentSizeInMB))) + '\n\n<!-- Content truncated due to size limit -->' :
+    combinedContentString;
+
+  let finalSummary = contentSizeInMB > 10 ? baseSummary + ' (Content truncated due to size limit)' : baseSummary;
+
+  // Check if combined content has images and mark for processing
+  const hasImages = /<img[^>]+src=['"'][^'"']*['"][^>]*>/i.test(finalContent);
+  if (hasImages) {
+    finalSummary += ' (Contains embedded images - will be processed after story creation)';
+    console.log(`Combined story contains embedded images - will need processing after creation`);
+  }
+
   // Return the combined story data via progress update
   const combinedStory = {
     title: baseTitle,
     author: baseAuthor,
-    content: contentSizeInMB > 10 ? 
-      combinedContentString.substring(0, Math.floor(combinedContentString.length * (10 / contentSizeInMB))) + '\n\n<!-- Content truncated due to size limit -->' :
-      combinedContentString,
-    summary: contentSizeInMB > 10 ? baseSummary + ' (Content truncated due to size limit)' : baseSummary,
+    content: finalContent,
+    summary: finalSummary,
     sourceUrl: baseSourceUrl,
-    tags: Array.from(combinedTags)
+    tags: Array.from(combinedTags),
+    hasImages: hasImages
   };
   
   // Send completion notification for combine mode
+  let completionMessage = `Combined scraping completed: ${totalWordCount.toLocaleString()} words from ${importedCount} stories`;
+  if (hasImages) {
+    completionMessage += ` (embedded images will be processed when story is created)`;
+  }
+
   await sendProgressUpdate(sessionId, {
     type: 'completed',
     current: urls.length,
     total: urls.length,
-    message: `Combined scraping completed: ${totalWordCount.toLocaleString()} words from ${importedCount} stories`,
+    message: completionMessage,
     totalWordCount: totalWordCount,
     combinedStory: combinedStory
   });
@@ -347,6 +357,61 @@ async function processIndividualMode(
 
         const createdStory = await createResponse.json();
 
+        // Process embedded images if content contains images
+        let imageProcessingWarnings: string[] = [];
+        const hasImages = /<img[^>]+src=['"'][^'"']*['"][^>]*>/i.test(scrapedStory.content);
+
+        if (hasImages) {
+          try {
+            console.log(`Processing embedded images for story: ${createdStory.id}`);
+            const imageProcessUrl = `http://backend:8080/api/stories/${createdStory.id}/process-content-images`;
+            const imageProcessResponse = await fetch(imageProcessUrl, {
+              method: 'POST',
+              headers: {
+                'Authorization': authorization,
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({ htmlContent: scrapedStory.content }),
+            });
+
+            if (imageProcessResponse.ok) {
+              const imageResult = await imageProcessResponse.json();
+              if (imageResult.hasWarnings && imageResult.warnings) {
+                imageProcessingWarnings = imageResult.warnings;
+                console.log(`Image processing completed with warnings for story ${createdStory.id}:`, imageResult.warnings);
+              } else {
+                console.log(`Image processing completed successfully for story ${createdStory.id}. Downloaded ${imageResult.downloadedImages?.length || 0} images.`);
+              }
+
+              // Update story content with processed images
+              if (imageResult.processedContent && imageResult.processedContent !== scrapedStory.content) {
+                const updateUrl = `http://backend:8080/api/stories/${createdStory.id}`;
+                const updateResponse = await fetch(updateUrl, {
+                  method: 'PUT',
+                  headers: {
+                    'Authorization': authorization,
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({
+                    contentHtml: imageResult.processedContent
+                  }),
+                });
+
+                if (!updateResponse.ok) {
+                  console.warn(`Failed to update story content after image processing for ${createdStory.id}`);
+                  imageProcessingWarnings.push('Failed to update story content with processed images');
+                }
+              }
+            } else {
+              console.warn(`Image processing failed for story ${createdStory.id}:`, imageProcessResponse.status);
+              imageProcessingWarnings.push('Image processing failed');
+            }
+          } catch (error) {
+            console.error(`Error processing images for story ${createdStory.id}:`, error);
+            imageProcessingWarnings.push(`Image processing error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+          }
+        }
+
         results.push({
           url: trimmedUrl,
           status: 'imported',
@@ -356,17 +421,24 @@ async function processIndividualMode(
         });
         importedCount++;
 
-        console.log(`Successfully imported: ${scrapedStory.title} by ${scrapedStory.author} (ID: ${createdStory.id})`);
+        console.log(`Successfully imported: ${scrapedStory.title} by ${scrapedStory.author} (ID: ${createdStory.id})${hasImages ? ` with ${imageProcessingWarnings.length > 0 ? 'warnings' : 'successful image processing'}` : ''}`);
 
         // Send progress update for successful import
+        let progressMessage = `Imported "${scrapedStory.title}" by ${scrapedStory.author}`;
+        if (hasImages) {
+          progressMessage += imageProcessingWarnings.length > 0 ? ' (with image warnings)' : ' (with images)';
+        }
+
         await sendProgressUpdate(sessionId, {
           type: 'progress',
           current: i + 1,
           total: urls.length,
-          message: `Imported "${scrapedStory.title}" by ${scrapedStory.author}`,
+          message: progressMessage,
           url: trimmedUrl,
           title: scrapedStory.title,
-          author: scrapedStory.author
+          author: scrapedStory.author,
+          hasImages: hasImages,
+          imageWarnings: imageProcessingWarnings
         });
 
       } catch (error) {
@@ -421,11 +493,11 @@ async function processIndividualMode(
 
   console.log(`Bulk import completed: ${importedCount} imported, ${skippedCount} skipped, ${errorCount} errors`);
 
-  // Trigger Typesense reindex if any stories were imported
+  // Trigger Solr reindex if any stories were imported
   if (importedCount > 0) {
     try {
-      console.log('Triggering Typesense reindex after bulk import...');
-      const reindexUrl = `http://backend:8080/api/stories/reindex-typesense`;
+      console.log('Triggering Solr reindex after bulk import...');
+      const reindexUrl = `http://backend:8080/api/admin/search/solr/reindex`;
       const reindexResponse = await fetch(reindexUrl, {
         method: 'POST',
         headers: {
@@ -436,12 +508,12 @@ async function processIndividualMode(
 
       if (reindexResponse.ok) {
         const reindexResult = await reindexResponse.json();
-        console.log('Typesense reindex completed:', reindexResult);
+        console.log('Solr reindex completed:', reindexResult);
       } else {
-        console.warn('Typesense reindex failed:', reindexResponse.status);
+        console.warn('Solr reindex failed:', reindexResponse.status);
       }
     } catch (error) {
-      console.warn('Failed to trigger Typesense reindex:', error);
+      console.warn('Failed to trigger Solr reindex:', error);
       // Don't fail the whole request if reindex fails
     }
   }

frontend/src/app/scrape/story/route.ts

@@ -19,6 +19,9 @@ export async function POST(request: NextRequest) {
     const scraper = new StoryScraper();
     const story = await scraper.scrapeStory(url);
 
+    // Check if scraped content contains embedded images
+    const hasImages = story.content ? /<img[^>]+src=['"'][^'"']*['"][^>]*>/i.test(story.content) : false;
+
     // Debug logging
     console.log('Scraped story data:', {
       url: url,
@@ -28,10 +31,15 @@ export async function POST(request: NextRequest) {
       contentLength: story.content?.length || 0,
       contentPreview: story.content?.substring(0, 200) + '...',
       tags: story.tags,
-      coverImage: story.coverImage
+      coverImage: story.coverImage,
+      hasEmbeddedImages: hasImages
     });
 
-    return NextResponse.json(story);
+    // Add image processing flag to response for frontend handling
+    return NextResponse.json({
+      ...story,
+      hasEmbeddedImages: hasImages
+    });
   } catch (error) {
     console.error('Story scraping error:', error);
 

frontend/src/app/settings/SettingsContent.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import TabNavigation from '../../components/ui/TabNavigation';
+import AppearanceSettings from '../../components/settings/AppearanceSettings';
+import ContentSettings from '../../components/settings/ContentSettings';
+import SystemSettings from '../../components/settings/SystemSettings';
+import Button from '../../components/ui/Button';
+import { useTheme } from '../../lib/theme';
+
+type FontFamily = 'serif' | 'sans' | 'mono';
+type FontSize = 'small' | 'medium' | 'large' | 'extra-large';
+type ReadingWidth = 'narrow' | 'medium' | 'wide';
+
+interface Settings {
+  theme: 'light' | 'dark';
+  fontFamily: FontFamily;
+  fontSize: FontSize;
+  readingWidth: ReadingWidth;
+  readingSpeed: number; // words per minute
+}
+
+const defaultSettings: Settings = {
+  theme: 'light',
+  fontFamily: 'serif',
+  fontSize: 'medium',
+  readingWidth: 'medium',
+  readingSpeed: 200,
+};
+
+const tabs = [
+  { id: 'appearance', label: 'Appearance', icon: '🎨' },
+  { id: 'content', label: 'Content', icon: '🏷️' },
+  { id: 'system', label: 'System', icon: '🔧' },
+];
+
+export default function SettingsContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { theme, setTheme } = useTheme();
+  const [settings, setSettings] = useState<Settings>(defaultSettings);
+  const [saved, setSaved] = useState(false);
+  const [activeTab, setActiveTab] = useState('appearance');
+
+  // Initialize tab from URL parameter
+  useEffect(() => {
+    const tabFromUrl = searchParams.get('tab');
+    if (tabFromUrl && tabs.some(tab => tab.id === tabFromUrl)) {
+      setActiveTab(tabFromUrl);
+    }
+  }, [searchParams]);
+
+  // Load settings from localStorage on mount
+  useEffect(() => {
+    const savedSettings = localStorage.getItem('storycove-settings');
+    if (savedSettings) {
+      try {
+        const parsed = JSON.parse(savedSettings);
+        setSettings({ ...defaultSettings, ...parsed, theme });
+      } catch (error) {
+        console.error('Failed to parse saved settings:', error);
+        setSettings({ ...defaultSettings, theme });
+      }
+    } else {
+      setSettings({ ...defaultSettings, theme });
+    }
+  }, [theme]);
+
+  // Update URL when tab changes
+  const handleTabChange = (tabId: string) => {
+    setActiveTab(tabId);
+    const newUrl = `/settings?tab=${tabId}`;
+    router.replace(newUrl, { scroll: false });
+  };
+
+  // Save settings to localStorage
+  const saveSettings = () => {
+    localStorage.setItem('storycove-settings', JSON.stringify(settings));
+
+    // Apply theme change
+    setTheme(settings.theme);
+
+    // Apply font settings to CSS custom properties
+    const root = document.documentElement;
+
+    const fontFamilyMap = {
+      serif: 'Georgia, Times, serif',
+      sans: 'Inter, system-ui, sans-serif',
+      mono: 'Monaco, Consolas, monospace',
+    };
+
+    const fontSizeMap = {
+      small: '14px',
+      medium: '16px',
+      large: '18px',
+      'extra-large': '20px',
+    };
+
+    const readingWidthMap = {
+      narrow: '600px',
+      medium: '800px',
+      wide: '1000px',
+    };
+
+    root.style.setProperty('--reading-font-family', fontFamilyMap[settings.fontFamily]);
+    root.style.setProperty('--reading-font-size', fontSizeMap[settings.fontSize]);
+    root.style.setProperty('--reading-max-width', readingWidthMap[settings.readingWidth]);
+
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+
+  const updateSetting = <K extends keyof Settings>(key: K, value: Settings[K]) => {
+    setSettings(prev => ({ ...prev, [key]: value }));
+  };
+
+  const resetToDefaults = () => {
+    setSettings({ ...defaultSettings, theme });
+  };
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'appearance':
+        return (
+          <AppearanceSettings
+            settings={settings}
+            onSettingChange={updateSetting}
+          />
+        );
+      case 'content':
+        return <ContentSettings />;
+      case 'system':
+        return <SystemSettings />;
+      default:
+        return <AppearanceSettings settings={settings} onSettingChange={updateSetting} />;
+    }
+  };
+
+  return (
+      <div className="max-w-4xl mx-auto space-y-6">
+        {/* Header */}
+        <div>
+          <h1 className="text-3xl font-bold theme-header">Settings</h1>
+          <p className="theme-text mt-2">
+            Customize your StoryCove experience and manage system settings
+          </p>
+        </div>
+
+        {/* Tab Navigation */}
+        <TabNavigation
+          tabs={tabs}
+          activeTab={activeTab}
+          onTabChange={handleTabChange}
+          className="mb-6"
+        />
+
+        {/* Tab Content */}
+        <div className="min-h-[400px]">
+          {renderTabContent()}
+        </div>
+
+        {/* Save Actions - Only show for Appearance tab */}
+        {activeTab === 'appearance' && (
+          <div className="flex justify-end gap-4 pt-6 border-t theme-border">
+            <Button
+              variant="ghost"
+              onClick={resetToDefaults}
+            >
+              Reset to Defaults
+            </Button>
+
+            <Button
+              onClick={saveSettings}
+              className={saved ? 'bg-green-600 hover:bg-green-700' : ''}
+            >
+              {saved ? '✓ Saved!' : 'Save Settings'}
+            </Button>
+          </div>
+        )}
+      </div>
+  );
+}

frontend/src/app/settings/page.tsx

@@ -1,818 +1,20 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { Suspense } from 'react';
 import AppLayout from '../../components/layout/AppLayout';
-import { useTheme } from '../../lib/theme';
-import Button from '../../components/ui/Button';
-import { storyApi, authorApi, databaseApi } from '../../lib/api';
-import { useLibraryLayout, LibraryLayoutType } from '../../hooks/useLibraryLayout';
-import LibrarySettings from '../../components/library/LibrarySettings';
-
-type FontFamily = 'serif' | 'sans' | 'mono';
-type FontSize = 'small' | 'medium' | 'large' | 'extra-large';
-type ReadingWidth = 'narrow' | 'medium' | 'wide';
-
-interface Settings {
-  theme: 'light' | 'dark';
-  fontFamily: FontFamily;
-  fontSize: FontSize;
-  readingWidth: ReadingWidth;
-  readingSpeed: number; // words per minute
-}
-
-const defaultSettings: Settings = {
-  theme: 'light',
-  fontFamily: 'serif',
-  fontSize: 'medium',
-  readingWidth: 'medium',
-  readingSpeed: 200,
-};
+import LoadingSpinner from '../../components/ui/LoadingSpinner';
+import SettingsContent from './SettingsContent';
 
 export default function SettingsPage() {
-  const { theme, setTheme } = useTheme();
-  const { layout, setLayout } = useLibraryLayout();
-  const [settings, setSettings] = useState<Settings>(defaultSettings);
-  const [saved, setSaved] = useState(false);
-  const [typesenseStatus, setTypesenseStatus] = useState<{
-    stories: { loading: boolean; message: string; success?: boolean };
-    authors: { loading: boolean; message: string; success?: boolean };
-  }>({
-    stories: { loading: false, message: '' },
-    authors: { loading: false, message: '' }
-  });
-  const [authorsSchema, setAuthorsSchema] = useState<any>(null);
-  const [showSchema, setShowSchema] = useState(false);
-  const [databaseStatus, setDatabaseStatus] = useState<{
-    completeBackup: { loading: boolean; message: string; success?: boolean };
-    completeRestore: { loading: boolean; message: string; success?: boolean };
-    completeClear: { loading: boolean; message: string; success?: boolean };
-  }>({
-    completeBackup: { loading: false, message: '' },
-    completeRestore: { loading: false, message: '' },
-    completeClear: { loading: false, message: '' }
-  });
-
-  // Load settings from localStorage on mount
-  useEffect(() => {
-    const savedSettings = localStorage.getItem('storycove-settings');
-    if (savedSettings) {
-      try {
-        const parsed = JSON.parse(savedSettings);
-        setSettings({ ...defaultSettings, ...parsed, theme });
-      } catch (error) {
-        console.error('Failed to parse saved settings:', error);
-        setSettings({ ...defaultSettings, theme });
-      }
-    } else {
-      setSettings({ ...defaultSettings, theme });
-    }
-  }, [theme]);
-
-  // Save settings to localStorage
-  const saveSettings = () => {
-    localStorage.setItem('storycove-settings', JSON.stringify(settings));
-    
-    // Apply theme change
-    setTheme(settings.theme);
-    
-    // Apply font settings to CSS custom properties
-    const root = document.documentElement;
-    
-    const fontFamilyMap = {
-      serif: 'Georgia, Times, serif',
-      sans: 'Inter, system-ui, sans-serif',
-      mono: 'Monaco, Consolas, monospace',
-    };
-    
-    const fontSizeMap = {
-      small: '14px',
-      medium: '16px',
-      large: '18px',
-      'extra-large': '20px',
-    };
-    
-    const readingWidthMap = {
-      narrow: '600px',
-      medium: '800px',
-      wide: '1000px',
-    };
-    
-    root.style.setProperty('--reading-font-family', fontFamilyMap[settings.fontFamily]);
-    root.style.setProperty('--reading-font-size', fontSizeMap[settings.fontSize]);
-    root.style.setProperty('--reading-max-width', readingWidthMap[settings.readingWidth]);
-    
-    setSaved(true);
-    setTimeout(() => setSaved(false), 2000);
-  };
-
-  const updateSetting = <K extends keyof Settings>(key: K, value: Settings[K]) => {
-    setSettings(prev => ({ ...prev, [key]: value }));
-  };
-
-  const handleTypesenseOperation = async (
-    type: 'stories' | 'authors',
-    operation: 'reindex' | 'recreate',
-    apiCall: () => Promise<{ success: boolean; message: string; count?: number; error?: string }>
-  ) => {
-    setTypesenseStatus(prev => ({
-      ...prev,
-      [type]: { loading: true, message: 'Processing...', success: undefined }
-    }));
-
-    try {
-      const result = await apiCall();
-      setTypesenseStatus(prev => ({
-        ...prev,
-        [type]: {
-          loading: false,
-          message: result.success ? result.message : result.error || 'Operation failed',
-          success: result.success
-        }
-      }));
-      
-      // Clear message after 5 seconds
-      setTimeout(() => {
-        setTypesenseStatus(prev => ({
-          ...prev,
-          [type]: { loading: false, message: '', success: undefined }
-        }));
-      }, 5000);
-    } catch (error) {
-      setTypesenseStatus(prev => ({
-        ...prev,
-        [type]: {
-          loading: false,
-          message: 'Network error occurred',
-          success: false
-        }
-      }));
-      
-      setTimeout(() => {
-        setTypesenseStatus(prev => ({
-          ...prev,
-          [type]: { loading: false, message: '', success: undefined }
-        }));
-      }, 5000);
-    }
-  };
-
-  const fetchAuthorsSchema = async () => {
-    try {
-      const result = await authorApi.getTypesenseSchema();
-      if (result.success) {
-        setAuthorsSchema(result.schema);
-      } else {
-        setAuthorsSchema({ error: result.error });
-      }
-    } catch (error) {
-      setAuthorsSchema({ error: 'Failed to fetch schema' });
-    }
-  };
-
-
-  const handleCompleteBackup = async () => {
-    setDatabaseStatus(prev => ({
-      ...prev,
-      completeBackup: { loading: true, message: 'Creating complete backup...', success: undefined }
-    }));
-
-    try {
-      const backupBlob = await databaseApi.backupComplete();
-      
-      // Create download link
-      const url = window.URL.createObjectURL(backupBlob);
-      const link = document.createElement('a');
-      link.href = url;
-      
-      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
-      link.download = `storycove_complete_backup_${timestamp}.zip`;
-      
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(url);
-
-      setDatabaseStatus(prev => ({
-        ...prev,
-        completeBackup: { loading: false, message: 'Complete backup downloaded successfully', success: true }
-      }));
-    } catch (error: any) {
-      setDatabaseStatus(prev => ({
-        ...prev,
-        completeBackup: { loading: false, message: error.message || 'Complete backup failed', success: false }
-      }));
-    }
-
-    // Clear message after 5 seconds
-    setTimeout(() => {
-      setDatabaseStatus(prev => ({
-        ...prev,
-        completeBackup: { loading: false, message: '', success: undefined }
-      }));
-    }, 5000);
-  };
-
-  const handleCompleteRestore = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    // Reset the input so the same file can be selected again
-    event.target.value = '';
-
-    if (!file.name.endsWith('.zip')) {
-      setDatabaseStatus(prev => ({
-        ...prev,
-        completeRestore: { loading: false, message: 'Please select a .zip file', success: false }
-      }));
-      return;
-    }
-
-    const confirmed = window.confirm(
-      'Are you sure you want to restore the complete backup? This will PERMANENTLY DELETE all current data AND files (cover images, avatars) and replace them with the backup data. This action cannot be undone!'
-    );
-
-    if (!confirmed) return;
-
-    setDatabaseStatus(prev => ({
-      ...prev,
-      completeRestore: { loading: true, message: 'Restoring complete backup...', success: undefined }
-    }));
-
-    try {
-      const result = await databaseApi.restoreComplete(file);
-      setDatabaseStatus(prev => ({
-        ...prev,
-        completeRestore: { 
-          loading: false, 
-          message: result.success ? result.message : result.message, 
-          success: result.success 
-        }
-      }));
-    } catch (error: any) {
-      setDatabaseStatus(prev => ({
-        ...prev,
-        completeRestore: { loading: false, message: error.message || 'Complete restore failed', success: false }
-      }));
-    }
-
-    // Clear message after 10 seconds for restore (longer because it's important)
-    setTimeout(() => {
-      setDatabaseStatus(prev => ({
-        ...prev,
-        completeRestore: { loading: false, message: '', success: undefined }
-      }));
-    }, 10000);
-  };
-
-  const handleCompleteClear = async () => {
-    const confirmed = window.confirm(
-      'Are you ABSOLUTELY SURE you want to clear the entire database AND all files? This will PERMANENTLY DELETE ALL stories, authors, series, tags, collections, AND all uploaded images (covers, avatars). This action cannot be undone!'
-    );
-
-    if (!confirmed) return;
-
-    const doubleConfirmed = window.confirm(
-      'This is your final warning! Clicking OK will DELETE EVERYTHING in your StoryCove database AND all uploaded files. Are you completely certain you want to proceed?'
-    );
-
-    if (!doubleConfirmed) return;
-
-    setDatabaseStatus(prev => ({
-      ...prev,
-      completeClear: { loading: true, message: 'Clearing database and files...', success: undefined }
-    }));
-
-    try {
-      const result = await databaseApi.clearComplete();
-      setDatabaseStatus(prev => ({
-        ...prev,
-        completeClear: { 
-          loading: false, 
-          message: result.success 
-            ? `Database and files cleared successfully. Deleted ${result.deletedRecords} records.`
-            : result.message, 
-          success: result.success 
-        }
-      }));
-    } catch (error: any) {
-      setDatabaseStatus(prev => ({
-        ...prev,
-        completeClear: { loading: false, message: error.message || 'Clear operation failed', success: false }
-      }));
-    }
-
-    // Clear message after 10 seconds for clear (longer because it's important)
-    setTimeout(() => {
-      setDatabaseStatus(prev => ({
-        ...prev,
-        completeClear: { loading: false, message: '', success: undefined }
-      }));
-    }, 10000);
-  };
-
   return (
     <AppLayout>
-      <div className="max-w-2xl mx-auto space-y-8">
-        <div>
-          <h1 className="text-3xl font-bold theme-header">Settings</h1>
-          <p className="theme-text mt-2">
-            Customize your StoryCove reading experience
-          </p>
+      <Suspense fallback={
+        <div className="flex items-center justify-center py-20">
+          <LoadingSpinner size="lg" />
         </div>
-
-        <div className="space-y-6">
-          {/* Theme Settings */}
-          <div className="theme-card theme-shadow rounded-lg p-6">
-            <h2 className="text-xl font-semibold theme-header mb-4">Appearance</h2>
-            
-            <div className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium theme-header mb-2">
-                  Theme
-                </label>
-                <div className="flex gap-4">
-                  <button
-                    onClick={() => updateSetting('theme', 'light')}
-                    className={`px-4 py-2 rounded-lg border transition-colors ${
-                      settings.theme === 'light'
-                        ? 'theme-accent-bg text-white border-transparent'
-                        : 'theme-card theme-text theme-border hover:border-gray-400'
-                    }`}
-                  >
-                    ☀️ Light
-                  </button>
-                  <button
-                    onClick={() => updateSetting('theme', 'dark')}
-                    className={`px-4 py-2 rounded-lg border transition-colors ${
-                      settings.theme === 'dark'
-                        ? 'theme-accent-bg text-white border-transparent'
-                        : 'theme-card theme-text theme-border hover:border-gray-400'
-                    }`}
-                  >
-                    🌙 Dark
-                  </button>
-                </div>
-              </div>
-
-              {/* Library Layout */}
-              <div>
-                <label className="block text-sm font-medium theme-header mb-2">
-                  Library Layout
-                </label>
-                <div className="space-y-3">
-                  <div className="flex gap-4 flex-wrap">
-                    <button
-                      onClick={() => setLayout('sidebar')}
-                      className={`px-4 py-2 rounded-lg border transition-colors ${
-                        layout === 'sidebar'
-                          ? 'theme-accent-bg text-white border-transparent'
-                          : 'theme-card theme-text theme-border hover:border-gray-400'
-                      }`}
-                    >
-                      📋 Sidebar Layout
-                    </button>
-                    <button
-                      onClick={() => setLayout('toolbar')}
-                      className={`px-4 py-2 rounded-lg border transition-colors ${
-                        layout === 'toolbar'
-                          ? 'theme-accent-bg text-white border-transparent'
-                          : 'theme-card theme-text theme-border hover:border-gray-400'
-                      }`}
-                    >
-                      🛠️ Toolbar Layout
-                    </button>
-                    <button
-                      onClick={() => setLayout('minimal')}
-                      className={`px-4 py-2 rounded-lg border transition-colors ${
-                        layout === 'minimal'
-                          ? 'theme-accent-bg text-white border-transparent'
-                          : 'theme-card theme-text theme-border hover:border-gray-400'
-                      }`}
-                    >
-                      ✨ Minimal Layout
-                    </button>
-                  </div>
-                  <div className="text-sm theme-text">
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mt-3">
-                      <div className="text-xs">
-                        <strong>Sidebar:</strong> Filters and controls in a side panel, maximum space for stories
-                      </div>
-                      <div className="text-xs">
-                        <strong>Toolbar:</strong> Everything visible at once with integrated search and tag filters
-                      </div>
-                      <div className="text-xs">
-                        <strong>Minimal:</strong> Clean, content-focused design with floating controls
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Reading Settings */}
-          <div className="theme-card theme-shadow rounded-lg p-6">
-            <h2 className="text-xl font-semibold theme-header mb-4">Reading Experience</h2>
-            
-            <div className="space-y-6">
-              {/* Font Family */}
-              <div>
-                <label className="block text-sm font-medium theme-header mb-2">
-                  Font Family
-                </label>
-                <div className="flex gap-4 flex-wrap">
-                  <button
-                    onClick={() => updateSetting('fontFamily', 'serif')}
-                    className={`px-4 py-2 rounded-lg border transition-colors font-serif ${
-                      settings.fontFamily === 'serif'
-                        ? 'theme-accent-bg text-white border-transparent'
-                        : 'theme-card theme-text theme-border hover:border-gray-400'
-                    }`}
-                  >
-                    Serif
-                  </button>
-                  <button
-                    onClick={() => updateSetting('fontFamily', 'sans')}
-                    className={`px-4 py-2 rounded-lg border transition-colors font-sans ${
-                      settings.fontFamily === 'sans'
-                        ? 'theme-accent-bg text-white border-transparent'
-                        : 'theme-card theme-text theme-border hover:border-gray-400'
-                    }`}
-                  >
-                    Sans Serif
-                  </button>
-                  <button
-                    onClick={() => updateSetting('fontFamily', 'mono')}
-                    className={`px-4 py-2 rounded-lg border transition-colors font-mono ${
-                      settings.fontFamily === 'mono'
-                        ? 'theme-accent-bg text-white border-transparent'
-                        : 'theme-card theme-text theme-border hover:border-gray-400'
-                    }`}
-                  >
-                    Monospace
-                  </button>
-                </div>
-              </div>
-
-              {/* Font Size */}
-              <div>
-                <label className="block text-sm font-medium theme-header mb-2">
-                  Font Size
-                </label>
-                <div className="flex gap-4 flex-wrap">
-                  {(['small', 'medium', 'large', 'extra-large'] as FontSize[]).map((size) => (
-                    <button
-                      key={size}
-                      onClick={() => updateSetting('fontSize', size)}
-                      className={`px-4 py-2 rounded-lg border transition-colors capitalize ${
-                        settings.fontSize === size
-                          ? 'theme-accent-bg text-white border-transparent'
-                          : 'theme-card theme-text theme-border hover:border-gray-400'
-                      }`}
-                    >
-                      {size.replace('-', ' ')}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              {/* Reading Width */}
-              <div>
-                <label className="block text-sm font-medium theme-header mb-2">
-                  Reading Width
-                </label>
-                <div className="flex gap-4">
-                  {(['narrow', 'medium', 'wide'] as ReadingWidth[]).map((width) => (
-                    <button
-                      key={width}
-                      onClick={() => updateSetting('readingWidth', width)}
-                      className={`px-4 py-2 rounded-lg border transition-colors capitalize ${
-                        settings.readingWidth === width
-                          ? 'theme-accent-bg text-white border-transparent'
-                          : 'theme-card theme-text theme-border hover:border-gray-400'
-                      }`}
-                    >
-                      {width}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              {/* Reading Speed */}
-              <div>
-                <label className="block text-sm font-medium theme-header mb-2">
-                  Reading Speed (words per minute)
-                </label>
-                <div className="flex items-center gap-4">
-                  <input
-                    type="range"
-                    min="100"
-                    max="400"
-                    step="25"
-                    value={settings.readingSpeed}
-                    onChange={(e) => updateSetting('readingSpeed', parseInt(e.target.value))}
-                    className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-                  />
-                  <div className="min-w-[80px] text-center">
-                    <span className="text-lg font-medium theme-header">{settings.readingSpeed}</span>
-                    <div className="text-xs theme-text">WPM</div>
-                  </div>
-                </div>
-                <div className="flex justify-between text-xs theme-text mt-1">
-                  <span>Slow (100)</span>
-                  <span>Average (200)</span>
-                  <span>Fast (400)</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Preview */}
-          <div className="theme-card theme-shadow rounded-lg p-6">
-            <h2 className="text-xl font-semibold theme-header mb-4">Preview</h2>
-            
-            <div 
-              className="p-4 theme-card border theme-border rounded-lg"
-              style={{
-                fontFamily: settings.fontFamily === 'serif' ? 'Georgia, Times, serif' 
-                  : settings.fontFamily === 'sans' ? 'Inter, system-ui, sans-serif'
-                  : 'Monaco, Consolas, monospace',
-                fontSize: settings.fontSize === 'small' ? '14px'
-                  : settings.fontSize === 'medium' ? '16px'
-                  : settings.fontSize === 'large' ? '18px'
-                  : '20px',
-                maxWidth: settings.readingWidth === 'narrow' ? '600px'
-                  : settings.readingWidth === 'medium' ? '800px'
-                  : '1000px',
-              }}
-            >
-              <h3 className="text-xl font-bold theme-header mb-2">Sample Story Title</h3>
-              <p className="theme-text mb-4">by Sample Author</p>
-              <p className="theme-text leading-relaxed">
-                This is how your story text will look with the current settings. 
-                The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, 
-                consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore 
-                et dolore magna aliqua.
-              </p>
-            </div>
-          </div>
-
-          {/* Typesense Search Management */}
-          <div className="theme-card theme-shadow rounded-lg p-6">
-            <h2 className="text-xl font-semibold theme-header mb-4">Search Index Management</h2>
-            <p className="theme-text mb-6">
-              Manage the Typesense search indexes for stories and authors. Use these tools if search functionality isn't working properly.
-            </p>
-            
-            <div className="space-y-6">
-              {/* Stories Section */}
-              <div className="border theme-border rounded-lg p-4">
-                <h3 className="text-lg font-semibold theme-header mb-3">Stories Index</h3>
-                <div className="flex flex-col sm:flex-row gap-3 mb-3">
-                  <Button
-                    onClick={() => handleTypesenseOperation('stories', 'reindex', storyApi.reindexTypesense)}
-                    disabled={typesenseStatus.stories.loading}
-                    loading={typesenseStatus.stories.loading}
-                    variant="ghost"
-                    className="flex-1"
-                  >
-                    {typesenseStatus.stories.loading ? 'Reindexing...' : 'Reindex Stories'}
-                  </Button>
-                  <Button
-                    onClick={() => handleTypesenseOperation('stories', 'recreate', storyApi.recreateTypesenseCollection)}
-                    disabled={typesenseStatus.stories.loading}
-                    loading={typesenseStatus.stories.loading}
-                    variant="secondary"
-                    className="flex-1"
-                  >
-                    {typesenseStatus.stories.loading ? 'Recreating...' : 'Recreate Collection'}
-                  </Button>
-                </div>
-                {typesenseStatus.stories.message && (
-                  <div className={`text-sm p-2 rounded ${
-                    typesenseStatus.stories.success 
-                      ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200' 
-                      : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
-                  }`}>
-                    {typesenseStatus.stories.message}
-                  </div>
-                )}
-              </div>
-              
-              {/* Authors Section */}
-              <div className="border theme-border rounded-lg p-4">
-                <h3 className="text-lg font-semibold theme-header mb-3">Authors Index</h3>
-                <div className="flex flex-col sm:flex-row gap-3 mb-3">
-                  <Button
-                    onClick={() => handleTypesenseOperation('authors', 'reindex', authorApi.reindexTypesense)}
-                    disabled={typesenseStatus.authors.loading}
-                    loading={typesenseStatus.authors.loading}
-                    variant="ghost"
-                    className="flex-1"
-                  >
-                    {typesenseStatus.authors.loading ? 'Reindexing...' : 'Reindex Authors'}
-                  </Button>
-                  <Button
-                    onClick={() => handleTypesenseOperation('authors', 'recreate', authorApi.recreateTypesenseCollection)}
-                    disabled={typesenseStatus.authors.loading}
-                    loading={typesenseStatus.authors.loading}
-                    variant="secondary"
-                    className="flex-1"
-                  >
-                    {typesenseStatus.authors.loading ? 'Recreating...' : 'Recreate Collection'}
-                  </Button>
-                </div>
-                {typesenseStatus.authors.message && (
-                  <div className={`text-sm p-2 rounded ${
-                    typesenseStatus.authors.success 
-                      ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200' 
-                      : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
-                  }`}>
-                    {typesenseStatus.authors.message}
-                  </div>
-                )}
-                
-                {/* Debug Schema Section */}
-                <div className="border-t theme-border pt-3">
-                  <div className="flex items-center gap-2 mb-2">
-                    <Button
-                      onClick={fetchAuthorsSchema}
-                      variant="ghost"
-                      className="text-xs"
-                    >
-                      Inspect Schema
-                    </Button>
-                    <Button
-                      onClick={() => setShowSchema(!showSchema)}
-                      variant="ghost"
-                      className="text-xs"
-                      disabled={!authorsSchema}
-                    >
-                      {showSchema ? 'Hide' : 'Show'} Schema
-                    </Button>
-                  </div>
-                  
-                  {showSchema && authorsSchema && (
-                    <div className="text-xs theme-text bg-gray-50 dark:bg-gray-800 p-3 rounded border overflow-auto max-h-48">
-                      <pre>{JSON.stringify(authorsSchema, null, 2)}</pre>
-                    </div>
-                  )}
-                </div>
-              </div>
-              
-              <div className="text-sm theme-text bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg">
-                <p className="font-medium mb-1">When to use these tools:</p>
-                <ul className="text-xs space-y-1 ml-4">
-                  <li>• <strong>Reindex:</strong> Refresh search data while keeping the existing schema</li>
-                  <li>• <strong>Recreate Collection:</strong> Delete and rebuild the entire search index (fixes schema issues)</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-
-          {/* Database Management */}
-          <div className="theme-card theme-shadow rounded-lg p-6">
-            <h2 className="text-xl font-semibold theme-header mb-4">Database Management</h2>
-            <p className="theme-text mb-6">
-              Backup, restore, or clear your StoryCove database and files. These comprehensive operations include both your data and uploaded images.
-            </p>
-            
-            <div className="space-y-6">
-              {/* Complete Backup Section */}
-              <div className="border theme-border rounded-lg p-4 border-blue-200 dark:border-blue-800">
-                <h3 className="text-lg font-semibold theme-header mb-3">📦 Create Backup</h3>
-                <p className="text-sm theme-text mb-3">
-                  Download a complete backup as a ZIP file. This includes your database AND all uploaded files (cover images, avatars). This is a comprehensive backup of your entire StoryCove installation.
-                </p>
-                <Button
-                  onClick={handleCompleteBackup}
-                  disabled={databaseStatus.completeBackup.loading}
-                  loading={databaseStatus.completeBackup.loading}
-                  variant="primary"
-                  className="w-full sm:w-auto"
-                >
-                  {databaseStatus.completeBackup.loading ? 'Creating Backup...' : 'Download Backup'}
-                </Button>
-                {databaseStatus.completeBackup.message && (
-                  <div className={`text-sm p-2 rounded mt-3 ${
-                    databaseStatus.completeBackup.success 
-                      ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200' 
-                      : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
-                  }`}>
-                    {databaseStatus.completeBackup.message}
-                  </div>
-                )}
-              </div>
-
-              {/* Restore Section */}
-              <div className="border theme-border rounded-lg p-4 border-orange-200 dark:border-orange-800">
-                <h3 className="text-lg font-semibold theme-header mb-3">📥 Restore Backup</h3>
-                <p className="text-sm theme-text mb-3">
-                  <strong className="text-orange-600 dark:text-orange-400">⚠️ Warning:</strong> This will completely replace your current database AND all files with the backup. All existing data and uploaded files will be permanently deleted.
-                </p>
-                <div className="flex items-center gap-3">
-                  <input
-                    type="file"
-                    accept=".zip"
-                    onChange={handleCompleteRestore}
-                    disabled={databaseStatus.completeRestore.loading}
-                    className="flex-1 text-sm theme-text file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:theme-accent-bg file:text-white hover:file:bg-opacity-90 file:cursor-pointer"
-                  />
-                </div>
-                {databaseStatus.completeRestore.message && (
-                  <div className={`text-sm p-2 rounded mt-3 ${
-                    databaseStatus.completeRestore.success 
-                      ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200' 
-                      : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
-                  }`}>
-                    {databaseStatus.completeRestore.message}
-                  </div>
-                )}
-                {databaseStatus.completeRestore.loading && (
-                  <div className="text-sm theme-text mt-3 flex items-center gap-2">
-                    <div className="animate-spin w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full"></div>
-                    Restoring backup...
-                  </div>
-                )}
-              </div>
-
-              {/* Clear Everything Section */}
-              <div className="border theme-border rounded-lg p-4 border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/10">
-                <h3 className="text-lg font-semibold theme-header mb-3">🗑️ Clear Everything</h3>
-                <p className="text-sm theme-text mb-3">
-                  <strong className="text-red-600 dark:text-red-400">⚠️ Danger Zone:</strong> This will permanently delete ALL data from your database AND all uploaded files (cover images, avatars). Everything will be completely removed. This action cannot be undone!
-                </p>
-                <Button
-                  onClick={handleCompleteClear}
-                  disabled={databaseStatus.completeClear.loading}
-                  loading={databaseStatus.completeClear.loading}
-                  variant="secondary"
-                  className="w-full sm:w-auto bg-red-700 hover:bg-red-800 text-white border-red-700"
-                >
-                  {databaseStatus.completeClear.loading ? 'Clearing Everything...' : 'Clear Everything'}
-                </Button>
-                {databaseStatus.completeClear.message && (
-                  <div className={`text-sm p-2 rounded mt-3 ${
-                    databaseStatus.completeClear.success 
-                      ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200' 
-                      : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
-                  }`}>
-                    {databaseStatus.completeClear.message}
-                  </div>
-                )}
-              </div>
-              
-              <div className="text-sm theme-text bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg">
-                <p className="font-medium mb-1">💡 Best Practices:</p>
-                <ul className="text-xs space-y-1 ml-4">
-                  <li>• <strong>Always backup</strong> before performing restore or clear operations</li>
-                  <li>• <strong>Store backups safely</strong> in multiple locations for important data</li>
-                  <li>• <strong>Test restores</strong> in a development environment when possible</li>
-                  <li>• <strong>Backup files (.zip)</strong> contain both database and all uploaded files</li>
-                  <li>• <strong>Verify backup files</strong> are complete before relying on them</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-
-          {/* Library Settings */}
-          <LibrarySettings />
-
-          {/* Tag Management */}
-          <div className="theme-card theme-shadow rounded-lg p-6">
-            <h2 className="text-xl font-semibold theme-header mb-4">Tag Management</h2>
-            <p className="theme-text mb-6">
-              Manage your story tags with colors, descriptions, and aliases. Use the Tag Maintenance page to organize and customize your tags.
-            </p>
-            <Button
-              href="/settings/tag-maintenance"
-              variant="secondary"
-              className="w-full sm:w-auto"
-            >
-              🏷️ Open Tag Maintenance
-            </Button>
-          </div>
-
-          {/* Actions */}
-          <div className="flex justify-end gap-4">
-            <Button
-              variant="ghost"
-              onClick={() => {
-                setSettings({ ...defaultSettings, theme });
-              }}
-            >
-              Reset to Defaults
-            </Button>
-            
-            <Button
-              onClick={saveSettings}
-              className={saved ? 'bg-green-600 hover:bg-green-700' : ''}
-            >
-              {saved ? '✓ Saved!' : 'Save Settings'}
-            </Button>
-          </div>
-        </div>
-      </div>
+      }>
+        <SettingsContent />
+      </Suspense>
     </AppLayout>
   );
 }

frontend/src/app/stories/[id]/edit/page.tsx

@@ -7,7 +7,7 @@ import { Input, Textarea } from '../../../../components/ui/Input';
 import Button from '../../../../components/ui/Button';
 import TagInput from '../../../../components/stories/TagInput';
 import TagSuggestions from '../../../../components/tags/TagSuggestions';
-import RichTextEditor from '../../../../components/stories/RichTextEditor';
+import SlateEditor from '../../../../components/stories/SlateEditor';
 import ImageUpload from '../../../../components/ui/ImageUpload';
 import AuthorSelector from '../../../../components/stories/AuthorSelector';
 import SeriesSelector from '../../../../components/stories/SeriesSelector';
@@ -337,7 +337,7 @@ export default function EditStoryPage() {
             <label className="block text-sm font-medium theme-header mb-2">
               Story Content *
             </label>
-            <RichTextEditor
+            <SlateEditor
               value={formData.contentHtml}
               onChange={handleContentChange}
               placeholder="Edit your story content here..."

frontend/src/app/stories/[id]/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback, useMemo, memo } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { storyApi, seriesApi } from '../../../lib/api';
@@ -11,6 +11,65 @@ import StoryRating from '../../../components/stories/StoryRating';
 import TagDisplay from '../../../components/tags/TagDisplay';
 import TableOfContents from '../../../components/stories/TableOfContents';
 import { sanitizeHtml, preloadSanitizationConfig } from '../../../lib/sanitization';
+import { debug } from '../../../lib/debug';
+
+// Memoized content component that only re-renders when content changes
+const StoryContent = memo(({
+  content,
+  contentRef
+}: {
+  content: string;
+  contentRef: React.RefObject<HTMLDivElement>;
+}) => {
+  const renderTime = Date.now();
+  debug.log('🔄 StoryContent component rendering at', renderTime, 'with content length:', content.length, 'hash:', content.slice(0, 50) + '...');
+
+  // Add observer to track image loading events
+  useEffect(() => {
+    if (!contentRef.current) return;
+
+    const images = contentRef.current.querySelectorAll('img');
+    debug.log('📸 Found', images.length, 'images in content');
+
+    const handleImageLoad = (e: Event) => {
+      const img = e.target as HTMLImageElement;
+      debug.log('🖼️ Image loaded:', img.src);
+    };
+
+    const handleImageError = (e: Event) => {
+      const img = e.target as HTMLImageElement;
+      debug.log('❌ Image error:', img.src);
+    };
+
+    images.forEach(img => {
+      img.addEventListener('load', handleImageLoad);
+      img.addEventListener('error', handleImageError);
+      debug.log('👀 Monitoring image:', img.src);
+    });
+
+    return () => {
+      images.forEach(img => {
+        img.removeEventListener('load', handleImageLoad);
+        img.removeEventListener('error', handleImageError);
+      });
+    };
+  }, [content]);
+
+  return (
+    <div
+      ref={contentRef}
+      className="reading-content"
+      dangerouslySetInnerHTML={{ __html: content }}
+      style={{
+        // Prevent layout shifts that might cause image reloads
+        minHeight: '100vh',
+        contain: 'layout style'
+      }}
+    />
+  );
+});
+
+StoryContent.displayName = 'StoryContent';
 
 export default function StoryReadingPage() {
   const params = useParams();
@@ -20,6 +79,7 @@ export default function StoryReadingPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [readingProgress, setReadingProgress] = useState(0);
+  const [readingPercentage, setReadingPercentage] = useState(0);
   const [sanitizedContent, setSanitizedContent] = useState<string>('');
   const [hasScrolledToPosition, setHasScrolledToPosition] = useState(false);
   const [showToc, setShowToc] = useState(false);
@@ -48,15 +108,25 @@ export default function StoryReadingPage() {
     ));
     
     // Convert to character position in the plain text content
-    const textLength = story.contentPlain?.length || story.contentHtml.length;
+    const textLength = story.contentPlain?.length || story.contentHtml?.length || 0;
     return Math.floor(scrollRatio * textLength);
   }, [story]);
 
+  // Calculate reading percentage from character position
+  const calculateReadingPercentage = useCallback((currentPosition: number): number => {
+    if (!story) return 0;
+
+    const totalLength = story.contentPlain?.length || story.contentHtml?.length || 0;
+    if (totalLength === 0) return 0;
+
+    return Math.round((currentPosition / totalLength) * 100);
+  }, [story]);
+
   // Convert character position back to scroll position for auto-scroll
   const scrollToCharacterPosition = useCallback((position: number) => {
     if (!contentRef.current || !story || hasScrolledToPosition) return;
 
-    const textLength = story.contentPlain?.length || story.contentHtml.length;
+    const textLength = story.contentPlain?.length || story.contentHtml?.length || 0;
     if (textLength === 0 || position === 0) return;
 
     const ratio = position / textLength;
@@ -80,14 +150,14 @@ export default function StoryReadingPage() {
   // Debounced function to save reading position
   const saveReadingPosition = useCallback(async (position: number) => {
     if (!story || position === story.readingPosition) {
-      console.log('Skipping save - no story or position unchanged:', { story: !!story, position, current: story?.readingPosition });
+      debug.log('Skipping save - no story or position unchanged:', { story: !!story, position, current: story?.readingPosition });
       return;
     }
     
-    console.log('Saving reading position:', position, 'for story:', story.id);
+    debug.log('Saving reading position:', position, 'for story:', story.id);
     try {
       const updatedStory = await storyApi.updateReadingProgress(story.id, position);
-      console.log('Reading position saved successfully, updated story:', updatedStory.readingPosition);
+      debug.log('Reading position saved successfully, updated story:', updatedStory.readingPosition);
       setStory(prev => prev ? { ...prev, readingPosition: position, lastReadAt: updatedStory.lastReadAt } : null);
     } catch (error) {
       console.error('Failed to save reading position:', error);
@@ -168,12 +238,12 @@ export default function StoryReadingPage() {
     if (story && sanitizedContent && !hasScrolledToPosition) {
       // Use a small delay to ensure content is rendered
       const timeout = setTimeout(() => {
-        console.log('Initializing reading position tracking, saved position:', story.readingPosition);
+        debug.log('Initializing reading position tracking, saved position:', story.readingPosition);
         
         // Check if there's a hash in the URL (for TOC navigation)
         const hash = window.location.hash.substring(1);
         if (hash && hash.startsWith('heading-')) {
-          console.log('Auto-scrolling to heading from URL hash:', hash);
+          debug.log('Auto-scrolling to heading from URL hash:', hash);
           const element = document.getElementById(hash);
           if (element) {
             element.scrollIntoView({ 
@@ -187,71 +257,90 @@ export default function StoryReadingPage() {
         
         // Otherwise, use saved reading position
         if (story.readingPosition && story.readingPosition > 0) {
-          console.log('Auto-scrolling to saved position:', story.readingPosition);
+          debug.log('Auto-scrolling to saved position:', story.readingPosition);
+          const initialPercentage = calculateReadingPercentage(story.readingPosition);
+          setReadingPercentage(initialPercentage);
           scrollToCharacterPosition(story.readingPosition);
         } else {
           // Even if there's no saved position, mark as ready for tracking
-          console.log('No saved position, starting fresh tracking');
+          debug.log('No saved position, starting fresh tracking');
+          setReadingPercentage(0);
           setHasScrolledToPosition(true);
         }
       }, 500);
       
       return () => clearTimeout(timeout);
     }
-  }, [story, sanitizedContent, scrollToCharacterPosition, hasScrolledToPosition]);
+  }, [story, sanitizedContent, scrollToCharacterPosition, calculateReadingPercentage, hasScrolledToPosition]);
 
   // Track reading progress and save position
   useEffect(() => {
+    let ticking = false;
+    let scrollEventCount = 0;
+
     const handleScroll = () => {
-      const article = document.querySelector('[data-reading-content]') as HTMLElement;
-      if (article) {
-        const scrolled = window.scrollY;
-        const articleTop = article.offsetTop;
-        const articleHeight = article.scrollHeight;
-        const windowHeight = window.innerHeight;
+      scrollEventCount++;
+      if (scrollEventCount % 10 === 0) {
+        debug.log('📜 Scroll event #', scrollEventCount, 'at', Date.now());
+      }
 
-        const progress = Math.min(100, Math.max(0,
-          ((scrolled - articleTop + windowHeight) / articleHeight) * 100
-        ));
+      if (!ticking) {
+        requestAnimationFrame(() => {
+          const article = document.querySelector('[data-reading-content]') as HTMLElement;
+          if (article) {
+            const scrolled = window.scrollY;
+            const articleTop = article.offsetTop;
+            const articleHeight = article.scrollHeight;
+            const windowHeight = window.innerHeight;
 
-        setReadingProgress(progress);
+            const progress = Math.min(100, Math.max(0,
+              ((scrolled - articleTop + windowHeight) / articleHeight) * 100
+            ));
 
-        // Multi-method end-of-story detection
-        const documentHeight = document.documentElement.scrollHeight;
-        const windowBottom = scrolled + windowHeight;
-        const distanceFromBottom = documentHeight - windowBottom;
+            setReadingProgress(progress);
 
-        // Method 1: Distance from bottom (most reliable)
-        const nearBottom = distanceFromBottom <= 200;
+            // Multi-method end-of-story detection
+            const documentHeight = document.documentElement.scrollHeight;
+            const windowBottom = scrolled + windowHeight;
+            const distanceFromBottom = documentHeight - windowBottom;
 
-        // Method 2: High progress but only as secondary check
-        const highProgress = progress >= 98;
+            // Method 1: Distance from bottom (most reliable)
+            const nearBottom = distanceFromBottom <= 200;
 
-        // Method 3: Check if story content itself is fully visible
-        const storyContentElement = contentRef.current;
-        let storyContentFullyVisible = false;
-        if (storyContentElement) {
-          const contentRect = storyContentElement.getBoundingClientRect();
-          const contentBottom = scrolled + contentRect.bottom;
-          const documentContentHeight = Math.max(documentHeight - 300, contentBottom); // Account for footer padding
-          storyContentFullyVisible = windowBottom >= documentContentHeight;
-        }
+            // Method 2: High progress but only as secondary check
+            const highProgress = progress >= 98;
 
-        // Trigger end detection if user is near bottom AND (has high progress OR story content is fully visible)
-        if (nearBottom && (highProgress || storyContentFullyVisible) && !hasReachedEnd && hasScrolledToPosition) {
-          console.log('End of story detected:', { nearBottom, highProgress, storyContentFullyVisible, distanceFromBottom, progress });
-          setHasReachedEnd(true);
-          setShowEndOfStoryPopup(true);
-        }
+            // Method 3: Check if story content itself is fully visible
+            const storyContentElement = contentRef.current;
+            let storyContentFullyVisible = false;
+            if (storyContentElement) {
+              const contentRect = storyContentElement.getBoundingClientRect();
+              const contentBottom = scrolled + contentRect.bottom;
+              const documentContentHeight = Math.max(documentHeight - 300, contentBottom); // Account for footer padding
+              storyContentFullyVisible = windowBottom >= documentContentHeight;
+            }
 
-        // Save reading position (debounced)
-        if (hasScrolledToPosition) { // Only save after initial auto-scroll
-          const characterPosition = getCharacterPositionFromScroll();
-          console.log('Scroll detected, character position:', characterPosition);
-          debouncedSavePosition(characterPosition);
-        } else {
-          console.log('Scroll detected but not ready for tracking yet');
-        }
+            // Trigger end detection if user is near bottom AND (has high progress OR story content is fully visible)
+            if (nearBottom && (highProgress || storyContentFullyVisible) && !hasReachedEnd && hasScrolledToPosition) {
+              debug.log('End of story detected:', { nearBottom, highProgress, storyContentFullyVisible, distanceFromBottom, progress });
+              setHasReachedEnd(true);
+              setShowEndOfStoryPopup(true);
+            }
+
+            // Save reading position and update percentage (debounced)
+            if (hasScrolledToPosition) { // Only save after initial auto-scroll
+              const characterPosition = getCharacterPositionFromScroll();
+              const percentage = calculateReadingPercentage(characterPosition);
+              debug.log('Scroll detected, character position:', characterPosition, 'percentage:', percentage);
+              setReadingPercentage(percentage);
+              debouncedSavePosition(characterPosition);
+            } else {
+              debug.log('Scroll detected but not ready for tracking yet');
+            }
+          }
+          ticking = false;
+        });
+        ticking = true;
       }
     };
 
@@ -263,7 +352,7 @@ export default function StoryReadingPage() {
         clearTimeout(saveTimeoutRef.current);
       }
     };
-  }, [story, hasScrolledToPosition, getCharacterPositionFromScroll, debouncedSavePosition, hasReachedEnd]);
+  }, [story, hasScrolledToPosition, getCharacterPositionFromScroll, calculateReadingPercentage, debouncedSavePosition, hasReachedEnd]);
 
   const handleRatingUpdate = async (newRating: number) => {
     if (!story) return;
@@ -313,6 +402,11 @@ export default function StoryReadingPage() {
   const nextStory = findNextStory();
   const previousStory = findPreviousStory();
 
+  // Memoize the sanitized content to prevent re-processing on scroll
+  const memoizedContent = useMemo(() => {
+    return sanitizedContent;
+  }, [sanitizedContent]);
+
   if (loading) {
     return (
       <div className="min-h-screen theme-bg flex items-center justify-center">
@@ -359,6 +453,11 @@ export default function StoryReadingPage() {
           </div>
           
           <div className="flex items-center gap-4">
+            {/* Reading percentage indicator */}
+            <div className="text-sm theme-text font-mono bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
+              {readingPercentage}%
+            </div>
+
             {hasHeadings && (
               <button
                 onClick={() => setShowToc(!showToc)}
@@ -514,10 +613,10 @@ export default function StoryReadingPage() {
           </header>
 
           {/* Story Content */}
-          <div
-            ref={contentRef}
-            className="reading-content"
-            dangerouslySetInnerHTML={{ __html: sanitizedContent }}
+          <StoryContent
+            key={`story-content-${story?.id || 'loading'}`}
+            content={memoizedContent}
+            contentRef={contentRef}
           />
         </article>
 

frontend/src/components/ImageProcessingProgress.tsx

@@ -0,0 +1,259 @@
+import React, { useState, useEffect } from 'react';
+import { ImageProcessingProgressTracker, ImageProcessingProgress } from '../utils/imageProcessingProgress';
+
+interface ImageProcessingProgressProps {
+  storyId: string;
+  autoStart?: boolean;
+  onComplete?: () => void;
+  onError?: (error: string) => void;
+}
+
+export const ImageProcessingProgressComponent: React.FC<ImageProcessingProgressProps> = ({
+  storyId,
+  autoStart = false,
+  onComplete,
+  onError
+}) => {
+  const [progress, setProgress] = useState<ImageProcessingProgress | null>(null);
+  const [isTracking, setIsTracking] = useState(false);
+  const [tracker, setTracker] = useState<ImageProcessingProgressTracker | null>(null);
+
+  const startTracking = () => {
+    if (tracker) {
+      tracker.stop();
+    }
+
+    const newTracker = new ImageProcessingProgressTracker(storyId);
+
+    newTracker.onProgress((progress) => {
+      setProgress(progress);
+    });
+
+    newTracker.onComplete((finalProgress) => {
+      setProgress(finalProgress);
+      setIsTracking(false);
+      onComplete?.();
+    });
+
+    newTracker.onError((error) => {
+      console.error('Image processing error:', error);
+      setIsTracking(false);
+      onError?.(error);
+    });
+
+    setTracker(newTracker);
+    setIsTracking(true);
+    newTracker.start();
+  };
+
+  const stopTracking = () => {
+    if (tracker) {
+      tracker.stop();
+      setIsTracking(false);
+    }
+  };
+
+  useEffect(() => {
+    if (autoStart) {
+      startTracking();
+    }
+
+    return () => {
+      if (tracker) {
+        tracker.stop();
+      }
+    };
+  }, [storyId, autoStart]);
+
+  if (!progress && !isTracking) {
+    return null;
+  }
+
+  if (!progress?.isProcessing && !progress?.completed) {
+    return null;
+  }
+
+  return (
+    <div className="image-processing-progress">
+      <div className="progress-header">
+        <h4>Processing Images</h4>
+        {isTracking && (
+          <button onClick={stopTracking} className="btn btn-sm btn-secondary">
+            Cancel
+          </button>
+        )}
+      </div>
+
+      {progress && (
+        <div className="progress-content">
+          {progress.error ? (
+            <div className="alert alert-danger">
+              <strong>Error:</strong> {progress.error}
+            </div>
+          ) : progress.completed ? (
+            <div className="alert alert-success">
+              <strong>Completed:</strong> {progress.status}
+            </div>
+          ) : (
+            <div className="progress-info">
+              <div className="status-text">
+                <strong>Status:</strong> {progress.status}
+              </div>
+
+              <div className="progress-stats">
+                Processing {progress.processedImages} of {progress.totalImages} images
+                ({progress.progressPercentage.toFixed(1)}%)
+              </div>
+
+              {progress.currentImageUrl && (
+                <div className="current-image">
+                  <strong>Current:</strong>
+                  <span className="image-url" title={progress.currentImageUrl}>
+                    {progress.currentImageUrl.length > 60
+                      ? `...${progress.currentImageUrl.slice(-60)}`
+                      : progress.currentImageUrl
+                    }
+                  </span>
+                </div>
+              )}
+
+              {/* Progress bar */}
+              <div className="progress-bar-container">
+                <div className="progress-bar">
+                  <div
+                    className="progress-bar-fill"
+                    style={{ width: `${progress.progressPercentage}%` }}
+                  />
+                </div>
+                <span className="progress-percentage">
+                  {progress.progressPercentage.toFixed(1)}%
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      <style jsx>{`
+        .image-processing-progress {
+          background: #f8f9fa;
+          border: 1px solid #dee2e6;
+          border-radius: 4px;
+          padding: 1rem;
+          margin: 1rem 0;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        }
+
+        .progress-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 0.75rem;
+        }
+
+        .progress-header h4 {
+          margin: 0;
+          font-size: 1.1rem;
+          color: #495057;
+        }
+
+        .progress-content {
+          space-y: 0.5rem;
+        }
+
+        .status-text {
+          font-size: 0.9rem;
+          color: #6c757d;
+          margin-bottom: 0.5rem;
+        }
+
+        .progress-stats {
+          font-weight: 500;
+          color: #495057;
+          margin-bottom: 0.5rem;
+        }
+
+        .current-image {
+          font-size: 0.85rem;
+          color: #6c757d;
+          margin-bottom: 0.75rem;
+        }
+
+        .image-url {
+          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+          background: #e9ecef;
+          padding: 0.1rem 0.3rem;
+          border-radius: 2px;
+          margin-left: 0.5rem;
+        }
+
+        .progress-bar-container {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+        }
+
+        .progress-bar {
+          flex: 1;
+          height: 8px;
+          background: #e9ecef;
+          border-radius: 4px;
+          overflow: hidden;
+        }
+
+        .progress-bar-fill {
+          height: 100%;
+          background: linear-gradient(90deg, #007bff, #0056b3);
+          transition: width 0.3s ease;
+        }
+
+        .progress-percentage {
+          font-size: 0.85rem;
+          font-weight: 500;
+          color: #495057;
+          min-width: 3rem;
+          text-align: right;
+        }
+
+        .btn {
+          padding: 0.25rem 0.5rem;
+          border-radius: 3px;
+          border: 1px solid transparent;
+          cursor: pointer;
+          font-size: 0.8rem;
+        }
+
+        .btn-secondary {
+          background: #6c757d;
+          color: white;
+          border-color: #6c757d;
+        }
+
+        .btn-secondary:hover {
+          background: #5a6268;
+          border-color: #545b62;
+        }
+
+        .alert {
+          padding: 0.75rem;
+          border-radius: 4px;
+          margin-bottom: 0.5rem;
+        }
+
+        .alert-danger {
+          background: #f8d7da;
+          color: #721c24;
+          border: 1px solid #f5c6cb;
+        }
+
+        .alert-success {
+          background: #d4edda;
+          color: #155724;
+          border: 1px solid #c3e6cb;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default ImageProcessingProgressComponent;

frontend/src/components/collections/CollectionReadingView.tsx

@@ -20,6 +20,7 @@ export default function CollectionReadingView({
 }: CollectionReadingViewProps) {
   const { story, collection } = data;
   const [hasScrolledToPosition, setHasScrolledToPosition] = useState(false);
+  const [readingPercentage, setReadingPercentage] = useState(0);
   const contentRef = useRef<HTMLDivElement>(null);
   const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -39,15 +40,25 @@ export default function CollectionReadingView({
     ));
     
     // Convert to character position in the plain text content
-    const textLength = story.contentPlain?.length || story.contentHtml.length;
+    const textLength = story.contentPlain?.length || story.contentHtml?.length || 0;
     return Math.floor(scrollRatio * textLength);
   }, [story]);
 
+  // Calculate reading percentage from character position
+  const calculateReadingPercentage = useCallback((currentPosition: number): number => {
+    if (!story) return 0;
+
+    const totalLength = story.contentPlain?.length || story.contentHtml?.length || 0;
+    if (totalLength === 0) return 0;
+
+    return Math.round((currentPosition / totalLength) * 100);
+  }, [story]);
+
   // Convert character position back to scroll position for auto-scroll
   const scrollToCharacterPosition = useCallback((position: number) => {
     if (!contentRef.current || !story || hasScrolledToPosition) return;
 
-    const textLength = story.contentPlain?.length || story.contentHtml.length;
+    const textLength = story.contentPlain?.length || story.contentHtml?.length || 0;
     if (textLength === 0 || position === 0) return;
 
     const ratio = position / textLength;
@@ -102,23 +113,28 @@ export default function CollectionReadingView({
         console.log('Collection view - initializing reading position tracking, saved position:', story.readingPosition);
         if (story.readingPosition && story.readingPosition > 0) {
           console.log('Collection view - auto-scrolling to saved position:', story.readingPosition);
+          const initialPercentage = calculateReadingPercentage(story.readingPosition);
+          setReadingPercentage(initialPercentage);
           scrollToCharacterPosition(story.readingPosition);
         } else {
           console.log('Collection view - no saved position, starting fresh tracking');
+          setReadingPercentage(0);
           setHasScrolledToPosition(true);
         }
       }, 500);
       
       return () => clearTimeout(timeout);
     }
-  }, [story, scrollToCharacterPosition, hasScrolledToPosition]);
+  }, [story, scrollToCharacterPosition, calculateReadingPercentage, hasScrolledToPosition]);
 
   // Track reading progress and save position
   useEffect(() => {
     const handleScroll = () => {
       if (hasScrolledToPosition) {
         const characterPosition = getCharacterPositionFromScroll();
-        console.log('Collection view - scroll detected, character position:', characterPosition);
+        const percentage = calculateReadingPercentage(characterPosition);
+        console.log('Collection view - scroll detected, character position:', characterPosition, 'percentage:', percentage);
+        setReadingPercentage(percentage);
         debouncedSavePosition(characterPosition);
       } else {
         console.log('Collection view - scroll detected but not ready for tracking yet');
@@ -132,7 +148,7 @@ export default function CollectionReadingView({
         clearTimeout(saveTimeoutRef.current);
       }
     };
-  }, [hasScrolledToPosition, getCharacterPositionFromScroll, debouncedSavePosition]);
+  }, [hasScrolledToPosition, getCharacterPositionFromScroll, calculateReadingPercentage, debouncedSavePosition]);
 
   const handlePrevious = () => {
     if (collection.previousStoryId) {
@@ -190,6 +206,11 @@ export default function CollectionReadingView({
 
           {/* Progress Bar */}
           <div className="flex items-center gap-4">
+            {/* Reading percentage indicator */}
+            <div className="text-sm text-blue-700 dark:text-blue-300 font-mono bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded">
+              {readingPercentage}%
+            </div>
+
             <div className="w-32 bg-blue-200 dark:bg-blue-800 rounded-full h-2">
               <div
                 className="bg-blue-600 dark:bg-blue-400 h-2 rounded-full transition-all duration-300"

frontend/src/components/layout/ImportLayout.tsx

@@ -1,16 +1,9 @@
 'use client';
 
-import { ReactNode } from 'react';
-import Link from 'next/link';
-import { usePathname, useSearchParams } from 'next/navigation';
+import { ReactNode, Suspense } from 'react';
 import AppLayout from './AppLayout';
-
-interface ImportTab {
-  id: string;
-  label: string;
-  href: string;
-  description: string;
-}
+import LoadingSpinner from '../ui/LoadingSpinner';
+import ImportLayoutContent from './ImportLayoutContent';
 
 interface ImportLayoutProps {
   children: ReactNode;
@@ -18,112 +11,23 @@ interface ImportLayoutProps {
   description?: string;
 }
 
-const importTabs: ImportTab[] = [
-  {
-    id: 'manual',
-    label: 'Manual Entry',
-    href: '/add-story',
-    description: 'Add a story by manually entering details'
-  },
-  {
-    id: 'url',
-    label: 'Import from URL',
-    href: '/import',
-    description: 'Import a single story from a website'
-  },
-  {
-    id: 'epub',
-    label: 'Import EPUB',
-    href: '/import/epub',
-    description: 'Import a story from an EPUB file'
-  },
-  {
-    id: 'bulk',
-    label: 'Bulk Import',
-    href: '/import/bulk',
-    description: 'Import multiple stories from a list of URLs'
-  }
-];
-
-export default function ImportLayout({ children, title, description }: ImportLayoutProps) {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const mode = searchParams.get('mode');
-
-  // Determine which tab is active
-  const getActiveTab = () => {
-    if (pathname === '/add-story') {
-      return 'manual';
-    } else if (pathname === '/import') {
-      return 'url';
-    } else if (pathname === '/import/epub') {
-      return 'epub';
-    } else if (pathname === '/import/bulk') {
-      return 'bulk';
-    }
-    return 'manual';
-  };
-
-  const activeTab = getActiveTab();
-
+export default function ImportLayout({
+  children,
+  title,
+  description
+}: ImportLayoutProps) {
   return (
     <AppLayout>
-      <div className="max-w-4xl mx-auto space-y-6">
-        {/* Header */}
-        <div className="text-center">
-          <h1 className="text-3xl font-bold theme-header">{title}</h1>
-          {description && (
-            <p className="theme-text mt-2 text-lg">
-              {description}
-            </p>
-          )}
-        </div>
-
-        {/* Tab Navigation */}
-        <div className="theme-card theme-shadow rounded-lg overflow-hidden">
-          {/* Tab Headers */}
-          <div className="flex border-b theme-border overflow-x-auto">
-            {importTabs.map((tab) => (
-              <Link
-                key={tab.id}
-                href={tab.href}
-                className={`flex-1 min-w-0 px-4 py-3 text-sm font-medium text-center transition-colors whitespace-nowrap ${
-                  activeTab === tab.id
-                    ? 'theme-accent-bg text-white border-b-2 border-transparent'
-                    : 'theme-text hover:theme-accent-light hover:theme-accent-text'
-                }`}
-              >
-                <div className="truncate">
-                  {tab.label}
-                </div>
-              </Link>
-            ))}
+      <div className="max-w-4xl mx-auto">
+        <Suspense fallback={
+          <div className="flex items-center justify-center py-20">
+            <LoadingSpinner size="lg" />
           </div>
-
-          {/* Tab Descriptions */}
-          <div className="px-6 py-4 bg-gray-50 dark:bg-gray-800/50">
-            <div className="flex items-center justify-center">
-              <p className="text-sm theme-text text-center">
-                {importTabs.find(tab => tab.id === activeTab)?.description}
-              </p>
-            </div>
-          </div>
-
-          {/* Tab Content */}
-          <div className="p-6">
+        }>
+          <ImportLayoutContent title={title} description={description}>
             {children}
-          </div>
-        </div>
-
-        {/* Quick Actions */}
-        <div className="flex justify-center">
-          <Link 
-            href="/library" 
-            className="theme-text hover:theme-accent transition-colors text-sm"
-          >
-            ← Back to Library
-          </Link>
-        </div>
+          </ImportLayoutContent>
+        </Suspense>
       </div>
     </AppLayout>
   );

frontend/src/components/layout/ImportLayoutContent.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { ReactNode } from 'react';
+import Link from 'next/link';
+import { usePathname, useSearchParams } from 'next/navigation';
+
+interface ImportTab {
+  id: string;
+  label: string;
+  href: string;
+  description: string;
+}
+
+interface ImportLayoutContentProps {
+  children: ReactNode;
+  title: string;
+  description?: string;
+}
+
+const importTabs: ImportTab[] = [
+  {
+    id: 'manual',
+    label: 'Manual Entry',
+    href: '/add-story',
+    description: 'Add a story by manually entering details'
+  },
+  {
+    id: 'url',
+    label: 'Import from URL',
+    href: '/import',
+    description: 'Import a single story from a website'
+  },
+  {
+    id: 'epub',
+    label: 'Import EPUB',
+    href: '/import/epub',
+    description: 'Import a story from an EPUB file'
+  },
+  {
+    id: 'bulk',
+    label: 'Bulk Import',
+    href: '/import/bulk',
+    description: 'Import multiple stories from URLs'
+  }
+];
+
+export default function ImportLayoutContent({
+  children,
+  title,
+  description
+}: ImportLayoutContentProps) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // Determine active tab based on current path
+  const activeTab = importTabs.find(tab => {
+    if (tab.href === pathname) return true;
+    if (tab.href === '/import' && pathname === '/import') return true;
+    return false;
+  });
+
+  return (
+    <>
+      <div className="mb-8">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
+          <div>
+            <h1 className="text-3xl font-bold theme-header">{title}</h1>
+            {description && (
+              <p className="theme-text mt-2">{description}</p>
+            )}
+          </div>
+          <Link
+            href="/library"
+            className="inline-flex items-center px-4 py-2 text-sm font-medium theme-button theme-border border rounded-lg hover:theme-button-hover transition-colors"
+          >
+            ← Back to Library
+          </Link>
+        </div>
+
+        {/* Import Method Tabs */}
+        <div className="border-b theme-border">
+          <nav className="-mb-px flex space-x-8 overflow-x-auto">
+            {importTabs.map((tab) => {
+              const isActive = activeTab?.id === tab.id;
+              return (
+                <Link
+                  key={tab.id}
+                  href={tab.href}
+                  className={`
+                    group inline-flex items-center px-1 py-4 border-b-2 font-medium text-sm whitespace-nowrap
+                    ${isActive
+                      ? 'border-theme-accent text-theme-accent'
+                      : 'border-transparent theme-text hover:text-theme-header hover:border-gray-300'
+                    }
+                  `}
+                >
+                  <span className="flex flex-col">
+                    <span>{tab.label}</span>
+                    <span className="text-xs theme-text mt-1 group-hover:text-theme-header">
+                      {tab.description}
+                    </span>
+                  </span>
+                </Link>
+              );
+            })}
+          </nav>
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      <div className="flex-1">
+        {children}
+      </div>
+    </>
+  );
+}

frontend/src/components/library/AdvancedFilters.tsx

@@ -127,29 +127,6 @@ const FILTER_PRESETS: FilterPreset[] = [
     description: 'Stories that are part of a series',
     filters: { seriesFilter: 'series' },
     category: 'content'
-  },
-  
-  // Organization presets
-  {
-    id: 'well-tagged',
-    label: '3+ tags',
-    description: 'Well-tagged stories with 3 or more tags',
-    filters: { minTagCount: 3 },
-    category: 'organization'
-  },
-  {
-    id: 'popular',
-    label: 'Popular',
-    description: 'Stories with above-average ratings',
-    filters: { popularOnly: true },
-    category: 'organization'
-  },
-  {
-    id: 'hidden-gems',
-    label: 'Hidden Gems',
-    description: 'Underrated or unrated stories to discover',
-    filters: { hiddenGemsOnly: true },
-    category: 'organization'
   }
 ];
 

frontend/src/components/library/MinimalLayout.tsx

@@ -66,7 +66,7 @@ export default function MinimalLayout({
 
   const getSortDisplayText = () => {
     const sortLabels: Record<string, string> = {
-      lastRead: 'Last Read',
+      lastReadAt: 'Last Read',
       createdAt: 'Date Added',
       title: 'Title',
       authorName: 'Author',

frontend/src/components/library/SidebarLayout.tsx

@@ -122,8 +122,8 @@ export default function SidebarLayout({
             }}
             className="px-2 py-1 border rounded-lg theme-card border-gray-300 dark:border-gray-600 text-xs"
           >
-            <option value="lastRead_desc">Last Read ↓</option>
-            <option value="lastRead_asc">Last Read ↑</option>
+            <option value="lastReadAt_desc">Last Read ↓</option>
+            <option value="lastReadAt_asc">Last Read ↑</option>
             <option value="createdAt_desc">Date Added ↓</option>
             <option value="createdAt_asc">Date Added ↑</option>
             <option value="title_asc">Title ↑</option>
@@ -226,7 +226,7 @@ export default function SidebarLayout({
               onChange={(e) => onSortChange(e.target.value)}
               className="flex-1 px-3 py-2 border rounded-lg theme-card border-gray-300 dark:border-gray-600"
             >
-              <option value="lastRead">Last Read</option>
+              <option value="lastReadAt">Last Read</option>
               <option value="createdAt">Date Added</option>
               <option value="title">Title</option>
               <option value="authorName">Author</option>

frontend/src/components/library/ToolbarLayout.tsx

@@ -110,8 +110,8 @@ export default function ToolbarLayout({
               }}
               className="w-full px-3 py-2 border rounded-lg theme-card border-gray-300 dark:border-gray-600 max-md:text-sm"
             >
-              <option value="lastRead_desc">Sort: Last Read ↓</option>
-              <option value="lastRead_asc">Sort: Last Read ↑</option>
+              <option value="lastReadAt_desc">Sort: Last Read ↓</option>
+              <option value="lastReadAt_asc">Sort: Last Read ↑</option>
               <option value="createdAt_desc">Sort: Date Added ↓</option>
               <option value="createdAt_asc">Sort: Date Added ↑</option>
               <option value="title_asc">Sort: Title ↑</option>

frontend/src/components/settings/AppearanceSettings.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import { useTheme } from '../../lib/theme';
+import { useLibraryLayout, LibraryLayoutType } from '../../hooks/useLibraryLayout';
+
+type FontFamily = 'serif' | 'sans' | 'mono';
+type FontSize = 'small' | 'medium' | 'large' | 'extra-large';
+type ReadingWidth = 'narrow' | 'medium' | 'wide';
+
+interface Settings {
+  theme: 'light' | 'dark';
+  fontFamily: FontFamily;
+  fontSize: FontSize;
+  readingWidth: ReadingWidth;
+  readingSpeed: number; // words per minute
+}
+
+interface AppearanceSettingsProps {
+  settings: Settings;
+  onSettingChange: <K extends keyof Settings>(key: K, value: Settings[K]) => void;
+}
+
+export default function AppearanceSettings({
+  settings,
+  onSettingChange
+}: AppearanceSettingsProps) {
+  const { layout, setLayout } = useLibraryLayout();
+
+  return (
+    <div className="space-y-6">
+      {/* Theme Settings */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Theme</h2>
+
+        <div>
+          <label className="block text-sm font-medium theme-header mb-2">
+            Color Theme
+          </label>
+          <div className="flex gap-4">
+            <button
+              onClick={() => onSettingChange('theme', 'light')}
+              className={`px-4 py-2 rounded-lg border transition-colors ${
+                settings.theme === 'light'
+                  ? 'theme-accent-bg text-white border-transparent'
+                  : 'theme-card theme-text theme-border hover:border-gray-400'
+              }`}
+            >
+              ☀️ Light
+            </button>
+            <button
+              onClick={() => onSettingChange('theme', 'dark')}
+              className={`px-4 py-2 rounded-lg border transition-colors ${
+                settings.theme === 'dark'
+                  ? 'theme-accent-bg text-white border-transparent'
+                  : 'theme-card theme-text theme-border hover:border-gray-400'
+              }`}
+            >
+              🌙 Dark
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Library Layout */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Library Layout</h2>
+
+        <div className="space-y-3">
+          <div className="flex gap-4 flex-wrap">
+            <button
+              onClick={() => setLayout('sidebar')}
+              className={`px-4 py-2 rounded-lg border transition-colors ${
+                layout === 'sidebar'
+                  ? 'theme-accent-bg text-white border-transparent'
+                  : 'theme-card theme-text theme-border hover:border-gray-400'
+              }`}
+            >
+              📋 Sidebar Layout
+            </button>
+            <button
+              onClick={() => setLayout('toolbar')}
+              className={`px-4 py-2 rounded-lg border transition-colors ${
+                layout === 'toolbar'
+                  ? 'theme-accent-bg text-white border-transparent'
+                  : 'theme-card theme-text theme-border hover:border-gray-400'
+              }`}
+            >
+              🛠️ Toolbar Layout
+            </button>
+            <button
+              onClick={() => setLayout('minimal')}
+              className={`px-4 py-2 rounded-lg border transition-colors ${
+                layout === 'minimal'
+                  ? 'theme-accent-bg text-white border-transparent'
+                  : 'theme-card theme-text theme-border hover:border-gray-400'
+              }`}
+            >
+              ✨ Minimal Layout
+            </button>
+          </div>
+          <div className="text-sm theme-text">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mt-3">
+              <div className="text-xs">
+                <strong>Sidebar:</strong> Filters and controls in a side panel, maximum space for stories
+              </div>
+              <div className="text-xs">
+                <strong>Toolbar:</strong> Everything visible at once with integrated search and tag filters
+              </div>
+              <div className="text-xs">
+                <strong>Minimal:</strong> Clean, content-focused design with floating controls
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Reading Experience */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Reading Experience</h2>
+
+        <div className="space-y-6">
+          {/* Font Family */}
+          <div>
+            <label className="block text-sm font-medium theme-header mb-2">
+              Font Family
+            </label>
+            <div className="flex gap-4 flex-wrap">
+              <button
+                onClick={() => onSettingChange('fontFamily', 'serif')}
+                className={`px-4 py-2 rounded-lg border transition-colors font-serif ${
+                  settings.fontFamily === 'serif'
+                    ? 'theme-accent-bg text-white border-transparent'
+                    : 'theme-card theme-text theme-border hover:border-gray-400'
+                }`}
+              >
+                Serif
+              </button>
+              <button
+                onClick={() => onSettingChange('fontFamily', 'sans')}
+                className={`px-4 py-2 rounded-lg border transition-colors font-sans ${
+                  settings.fontFamily === 'sans'
+                    ? 'theme-accent-bg text-white border-transparent'
+                    : 'theme-card theme-text theme-border hover:border-gray-400'
+                }`}
+              >
+                Sans Serif
+              </button>
+              <button
+                onClick={() => onSettingChange('fontFamily', 'mono')}
+                className={`px-4 py-2 rounded-lg border transition-colors font-mono ${
+                  settings.fontFamily === 'mono'
+                    ? 'theme-accent-bg text-white border-transparent'
+                    : 'theme-card theme-text theme-border hover:border-gray-400'
+                }`}
+              >
+                Monospace
+              </button>
+            </div>
+          </div>
+
+          {/* Font Size */}
+          <div>
+            <label className="block text-sm font-medium theme-header mb-2">
+              Font Size
+            </label>
+            <div className="flex gap-4 flex-wrap">
+              {(['small', 'medium', 'large', 'extra-large'] as FontSize[]).map((size) => (
+                <button
+                  key={size}
+                  onClick={() => onSettingChange('fontSize', size)}
+                  className={`px-4 py-2 rounded-lg border transition-colors capitalize ${
+                    settings.fontSize === size
+                      ? 'theme-accent-bg text-white border-transparent'
+                      : 'theme-card theme-text theme-border hover:border-gray-400'
+                  }`}
+                >
+                  {size.replace('-', ' ')}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Reading Width */}
+          <div>
+            <label className="block text-sm font-medium theme-header mb-2">
+              Reading Width
+            </label>
+            <div className="flex gap-4">
+              {(['narrow', 'medium', 'wide'] as ReadingWidth[]).map((width) => (
+                <button
+                  key={width}
+                  onClick={() => onSettingChange('readingWidth', width)}
+                  className={`px-4 py-2 rounded-lg border transition-colors capitalize ${
+                    settings.readingWidth === width
+                      ? 'theme-accent-bg text-white border-transparent'
+                      : 'theme-card theme-text theme-border hover:border-gray-400'
+                  }`}
+                >
+                  {width}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Reading Speed */}
+          <div>
+            <label className="block text-sm font-medium theme-header mb-2">
+              Reading Speed (words per minute)
+            </label>
+            <div className="flex items-center gap-4">
+              <input
+                type="range"
+                min="100"
+                max="400"
+                step="25"
+                value={settings.readingSpeed}
+                onChange={(e) => onSettingChange('readingSpeed', parseInt(e.target.value))}
+                className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+              />
+              <div className="min-w-[80px] text-center">
+                <span className="text-lg font-medium theme-header">{settings.readingSpeed}</span>
+                <div className="text-xs theme-text">WPM</div>
+              </div>
+            </div>
+            <div className="flex justify-between text-xs theme-text mt-1">
+              <span>Slow (100)</span>
+              <span>Average (200)</span>
+              <span>Fast (400)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Preview */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Preview</h2>
+
+        <div
+          className="p-4 theme-card border theme-border rounded-lg"
+          style={{
+            fontFamily: settings.fontFamily === 'serif' ? 'Georgia, Times, serif'
+              : settings.fontFamily === 'sans' ? 'Inter, system-ui, sans-serif'
+              : 'Monaco, Consolas, monospace',
+            fontSize: settings.fontSize === 'small' ? '14px'
+              : settings.fontSize === 'medium' ? '16px'
+              : settings.fontSize === 'large' ? '18px'
+              : '20px',
+            maxWidth: settings.readingWidth === 'narrow' ? '600px'
+              : settings.readingWidth === 'medium' ? '800px'
+              : '1000px',
+          }}
+        >
+          <h3 className="text-xl font-bold theme-header mb-2">Sample Story Title</h3>
+          <p className="theme-text mb-4">by Sample Author</p>
+          <p className="theme-text leading-relaxed">
+            This is how your story text will look with the current settings.
+            The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore
+            et dolore magna aliqua.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/settings/ContentSettings.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import Button from '../ui/Button';
+import LibrarySettings from '../library/LibrarySettings';
+
+interface ContentSettingsProps {
+  // No props needed - LibrarySettings manages its own state
+}
+
+export default function ContentSettings({}: ContentSettingsProps) {
+  return (
+    <div className="space-y-6">
+      {/* Library Settings */}
+      <LibrarySettings />
+
+      {/* Tag Management */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Tag Management</h2>
+        <p className="theme-text mb-6">
+          Manage your story tags with colors, descriptions, and aliases. Use the Tag Maintenance page to organize and customize your tags.
+        </p>
+        <Button
+          href="/settings/tag-maintenance"
+          variant="secondary"
+          className="w-full sm:w-auto"
+        >
+          🏷️ Open Tag Maintenance
+        </Button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/settings/SystemSettings.tsx

@@ -0,0 +1,912 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import Button from '../ui/Button';
+import { databaseApi, configApi, searchAdminApi } from '../../lib/api';
+
+interface SystemSettingsProps {
+  // No props needed - this component manages its own state
+}
+
+export default function SystemSettings({}: SystemSettingsProps) {
+  const [searchEngineStatus, setSearchEngineStatus] = useState<{
+    currentEngine: string;
+    solrAvailable: boolean;
+    loading: boolean;
+    message: string;
+    success?: boolean;
+  }>({
+    currentEngine: 'solr',
+    solrAvailable: false,
+    loading: false,
+    message: ''
+  });
+
+  const [solrStatus, setSolrStatus] = useState<{
+    reindex: { loading: boolean; message: string; success?: boolean };
+    recreate: { loading: boolean; message: string; success?: boolean };
+    migrate: { loading: boolean; message: string; success?: boolean };
+  }>({
+    reindex: { loading: false, message: '' },
+    recreate: { loading: false, message: '' },
+    migrate: { loading: false, message: '' }
+  });
+
+  const [databaseStatus, setDatabaseStatus] = useState<{
+    completeBackup: { loading: boolean; message: string; success?: boolean };
+    completeRestore: { loading: boolean; message: string; success?: boolean };
+    completeClear: { loading: boolean; message: string; success?: boolean };
+  }>({
+    completeBackup: { loading: false, message: '' },
+    completeRestore: { loading: false, message: '' },
+    completeClear: { loading: false, message: '' }
+  });
+  const [cleanupStatus, setCleanupStatus] = useState<{
+    preview: { loading: boolean; message: string; success?: boolean; data?: any };
+    execute: { loading: boolean; message: string; success?: boolean };
+  }>({
+    preview: { loading: false, message: '' },
+    execute: { loading: false, message: '' }
+  });
+
+  const [hoveredImage, setHoveredImage] = useState<{ src: string; alt: string } | null>(null);
+  const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+
+  const handleImageHover = (filePath: string, fileName: string, event: React.MouseEvent) => {
+    // Convert backend file path to frontend image URL
+    const imageUrl = filePath.replace(/^.*\/images\//, '/images/');
+    setHoveredImage({ src: imageUrl, alt: fileName });
+    setMousePosition({ x: event.clientX, y: event.clientY });
+  };
+
+  const handleImageLeave = () => {
+    setHoveredImage(null);
+  };
+
+  const isImageFile = (fileName: string): boolean => {
+    const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.svg'];
+    return imageExtensions.some(ext => fileName.toLowerCase().endsWith(ext));
+  };
+
+
+
+  const handleCompleteBackup = async () => {
+    setDatabaseStatus(prev => ({
+      ...prev,
+      completeBackup: { loading: true, message: 'Creating complete backup...', success: undefined }
+    }));
+
+    try {
+      const backupBlob = await databaseApi.backupComplete();
+
+      // Create download link
+      const url = window.URL.createObjectURL(backupBlob);
+      const link = document.createElement('a');
+      link.href = url;
+
+      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+      link.download = `storycove_complete_backup_${timestamp}.zip`;
+
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeBackup: { loading: false, message: 'Complete backup downloaded successfully', success: true }
+      }));
+    } catch (error: any) {
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeBackup: { loading: false, message: error.message || 'Complete backup failed', success: false }
+      }));
+    }
+
+    // Clear message after 5 seconds
+    setTimeout(() => {
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeBackup: { loading: false, message: '', success: undefined }
+      }));
+    }, 5000);
+  };
+
+  const handleCompleteRestore = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // Reset the input so the same file can be selected again
+    event.target.value = '';
+
+    if (!file.name.endsWith('.zip')) {
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeRestore: { loading: false, message: 'Please select a .zip file', success: false }
+      }));
+      return;
+    }
+
+    const confirmed = window.confirm(
+      'Are you sure you want to restore the complete backup? This will PERMANENTLY DELETE all current data AND files (cover images, avatars) and replace them with the backup data. This action cannot be undone!'
+    );
+
+    if (!confirmed) return;
+
+    setDatabaseStatus(prev => ({
+      ...prev,
+      completeRestore: { loading: true, message: 'Restoring complete backup...', success: undefined }
+    }));
+
+    try {
+      const result = await databaseApi.restoreComplete(file);
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeRestore: {
+          loading: false,
+          message: result.success ? result.message : result.message,
+          success: result.success
+        }
+      }));
+    } catch (error: any) {
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeRestore: { loading: false, message: error.message || 'Complete restore failed', success: false }
+      }));
+    }
+
+    // Clear message after 10 seconds for restore (longer because it's important)
+    setTimeout(() => {
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeRestore: { loading: false, message: '', success: undefined }
+      }));
+    }, 10000);
+  };
+
+  const handleCompleteClear = async () => {
+    const confirmed = window.confirm(
+      'Are you ABSOLUTELY SURE you want to clear the entire database AND all files? This will PERMANENTLY DELETE ALL stories, authors, series, tags, collections, AND all uploaded images (covers, avatars). This action cannot be undone!'
+    );
+
+    if (!confirmed) return;
+
+    const doubleConfirmed = window.confirm(
+      'This is your final warning! Clicking OK will DELETE EVERYTHING in your StoryCove database AND all uploaded files. Are you completely certain you want to proceed?'
+    );
+
+    if (!doubleConfirmed) return;
+
+    setDatabaseStatus(prev => ({
+      ...prev,
+      completeClear: { loading: true, message: 'Clearing database and files...', success: undefined }
+    }));
+
+    try {
+      const result = await databaseApi.clearComplete();
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeClear: {
+          loading: false,
+          message: result.success
+            ? `Database and files cleared successfully. Deleted ${result.deletedRecords} records.`
+            : result.message,
+          success: result.success
+        }
+      }));
+    } catch (error: any) {
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeClear: { loading: false, message: error.message || 'Clear operation failed', success: false }
+      }));
+    }
+
+    // Clear message after 10 seconds for clear (longer because it's important)
+    setTimeout(() => {
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeClear: { loading: false, message: '', success: undefined }
+      }));
+    }, 10000);
+  };
+
+  const handleImageCleanupPreview = async () => {
+    setCleanupStatus(prev => ({
+      ...prev,
+      preview: { loading: true, message: 'Scanning for orphaned images...', success: undefined }
+    }));
+
+    try {
+      const result = await configApi.previewImageCleanup();
+
+      if (result.success) {
+        setCleanupStatus(prev => ({
+          ...prev,
+          preview: {
+            loading: false,
+            message: `Found ${result.orphanedCount} orphaned images (${result.formattedSize}) and ${result.foldersToDelete} empty folders. Referenced images: ${result.referencedImagesCount}`,
+            success: true,
+            data: result
+          }
+        }));
+      } else {
+        setCleanupStatus(prev => ({
+          ...prev,
+          preview: {
+            loading: false,
+            message: result.error || 'Preview failed',
+            success: false
+          }
+        }));
+      }
+    } catch (error: any) {
+      setCleanupStatus(prev => ({
+        ...prev,
+        preview: {
+          loading: false,
+          message: error.message || 'Network error occurred',
+          success: false
+        }
+      }));
+    }
+
+    // Note: Preview message no longer auto-clears to allow users to review file details
+  };
+
+  const handleImageCleanupExecute = async () => {
+    if (!cleanupStatus.preview.data || cleanupStatus.preview.data.orphanedCount === 0) {
+      setCleanupStatus(prev => ({
+        ...prev,
+        execute: {
+          loading: false,
+          message: 'Please run preview first to see what will be deleted',
+          success: false
+        }
+      }));
+      return;
+    }
+
+    const confirmed = window.confirm(
+      `Are you sure you want to delete ${cleanupStatus.preview.data.orphanedCount} orphaned images (${cleanupStatus.preview.data.formattedSize})? This action cannot be undone!`
+    );
+
+    if (!confirmed) return;
+
+    setCleanupStatus(prev => ({
+      ...prev,
+      execute: { loading: true, message: 'Deleting orphaned images...', success: undefined }
+    }));
+
+    try {
+      const result = await configApi.executeImageCleanup();
+
+      if (result.success) {
+        setCleanupStatus(prev => ({
+          ...prev,
+          execute: {
+            loading: false,
+            message: `Successfully deleted ${result.deletedCount} orphaned images (${result.formattedSize}) and ${result.foldersDeleted} empty folders`,
+            success: true
+          },
+          preview: { loading: false, message: '', success: undefined, data: undefined } // Clear preview after successful cleanup
+        }));
+      } else {
+        setCleanupStatus(prev => ({
+          ...prev,
+          execute: {
+            loading: false,
+            message: result.error || 'Cleanup failed',
+            success: false
+          }
+        }));
+      }
+    } catch (error: any) {
+      setCleanupStatus(prev => ({
+        ...prev,
+        execute: {
+          loading: false,
+          message: error.message || 'Network error occurred',
+          success: false
+        }
+      }));
+    }
+
+    // Clear message after 10 seconds
+    setTimeout(() => {
+      setCleanupStatus(prev => ({
+        ...prev,
+        execute: { loading: false, message: '', success: undefined }
+      }));
+    }, 10000);
+  };
+
+  // Search Engine Management Functions
+  const loadSearchEngineStatus = async () => {
+    try {
+      const status = await searchAdminApi.getStatus();
+      setSearchEngineStatus(prev => ({
+        ...prev,
+        currentEngine: status.primaryEngine,
+        solrAvailable: status.solrAvailable,
+      }));
+    } catch (error: any) {
+      console.error('Failed to load search engine status:', error);
+    }
+  };
+
+
+
+  const handleSolrReindex = async () => {
+    setSolrStatus(prev => ({
+      ...prev,
+      reindex: { loading: true, message: 'Reindexing Solr...', success: undefined }
+    }));
+
+    try {
+      const result = await searchAdminApi.reindexSolr();
+
+      setSolrStatus(prev => ({
+        ...prev,
+        reindex: {
+          loading: false,
+          message: result.success ? result.message : (result.error || 'Reindex failed'),
+          success: result.success
+        }
+      }));
+
+      setTimeout(() => {
+        setSolrStatus(prev => ({
+          ...prev,
+          reindex: { loading: false, message: '', success: undefined }
+        }));
+      }, 8000);
+    } catch (error: any) {
+      setSolrStatus(prev => ({
+        ...prev,
+        reindex: {
+          loading: false,
+          message: error.message || 'Network error occurred',
+          success: false
+        }
+      }));
+
+      setTimeout(() => {
+        setSolrStatus(prev => ({
+          ...prev,
+          reindex: { loading: false, message: '', success: undefined }
+        }));
+      }, 8000);
+    }
+  };
+
+  const handleSolrRecreate = async () => {
+    setSolrStatus(prev => ({
+      ...prev,
+      recreate: { loading: true, message: 'Recreating Solr indices...', success: undefined }
+    }));
+
+    try {
+      const result = await searchAdminApi.recreateSolrIndices();
+
+      setSolrStatus(prev => ({
+        ...prev,
+        recreate: {
+          loading: false,
+          message: result.success ? result.message : (result.error || 'Recreation failed'),
+          success: result.success
+        }
+      }));
+
+      setTimeout(() => {
+        setSolrStatus(prev => ({
+          ...prev,
+          recreate: { loading: false, message: '', success: undefined }
+        }));
+      }, 8000);
+    } catch (error: any) {
+      setSolrStatus(prev => ({
+        ...prev,
+        recreate: {
+          loading: false,
+          message: error.message || 'Network error occurred',
+          success: false
+        }
+      }));
+
+      setTimeout(() => {
+        setSolrStatus(prev => ({
+          ...prev,
+          recreate: { loading: false, message: '', success: undefined }
+        }));
+      }, 8000);
+    }
+  };
+
+  const handleLibraryMigration = async () => {
+    const confirmed = window.confirm(
+      'This will migrate Solr to support library separation. It will clear existing search data and reindex with library context. Continue?'
+    );
+
+    if (!confirmed) return;
+
+    setSolrStatus(prev => ({
+      ...prev,
+      migrate: { loading: true, message: 'Migrating to library-aware schema...', success: undefined }
+    }));
+
+    try {
+      const result = await searchAdminApi.migrateLibrarySchema();
+
+      setSolrStatus(prev => ({
+        ...prev,
+        migrate: {
+          loading: false,
+          message: result.success
+            ? `${result.message}${result.note ? ` Note: ${result.note}` : ''}`
+            : (result.error || result.details || 'Migration failed'),
+          success: result.success
+        }
+      }));
+
+      setTimeout(() => {
+        setSolrStatus(prev => ({
+          ...prev,
+          migrate: { loading: false, message: '', success: undefined }
+        }));
+      }, 10000); // Longer timeout for migration messages
+    } catch (error: any) {
+      setSolrStatus(prev => ({
+        ...prev,
+        migrate: {
+          loading: false,
+          message: error.message || 'Network error occurred',
+          success: false
+        }
+      }));
+
+      setTimeout(() => {
+        setSolrStatus(prev => ({
+          ...prev,
+          migrate: { loading: false, message: '', success: undefined }
+        }));
+      }, 10000);
+    }
+  };
+
+  // Load status on component mount
+  useEffect(() => {
+    loadSearchEngineStatus();
+  }, []);
+
+  return (
+    <div className="space-y-6">
+      {/* Search Management */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Search Management</h2>
+        <p className="theme-text mb-6">
+          Manage Solr indices for stories and authors. Use these tools if search isn't returning expected results.
+        </p>
+
+        <div className="space-y-6">
+          {/* Current Status */}
+          <div className="border theme-border rounded-lg p-4">
+            <h3 className="text-lg font-semibold theme-header mb-3">Search Status</h3>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
+              <div className="flex justify-between">
+                <span>Solr:</span>
+                <span className={`font-medium ${searchEngineStatus.solrAvailable ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
+                  {searchEngineStatus.solrAvailable ? 'Available' : 'Unavailable'}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Search Operations */}
+          <div className="border theme-border rounded-lg p-4">
+            <h3 className="text-lg font-semibold theme-header mb-3">Search Operations</h3>
+            <p className="text-sm theme-text mb-4">
+              Perform maintenance operations on search indices. Use these if search isn't returning expected results.
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-3 mb-4">
+              <Button
+                onClick={handleSolrReindex}
+                disabled={solrStatus.reindex.loading || solrStatus.recreate.loading || solrStatus.migrate.loading || !searchEngineStatus.solrAvailable}
+                loading={solrStatus.reindex.loading}
+                variant="ghost"
+                className="flex-1"
+              >
+                {solrStatus.reindex.loading ? 'Reindexing...' : '🔄 Reindex All'}
+              </Button>
+              <Button
+                onClick={handleSolrRecreate}
+                disabled={solrStatus.reindex.loading || solrStatus.recreate.loading || solrStatus.migrate.loading || !searchEngineStatus.solrAvailable}
+                loading={solrStatus.recreate.loading}
+                variant="secondary"
+                className="flex-1"
+              >
+                {solrStatus.recreate.loading ? 'Recreating...' : '🏗️ Recreate Indices'}
+              </Button>
+            </div>
+
+            {/* Library Migration Section */}
+            <div className="border-t theme-border pt-4">
+              <h4 className="text-md font-medium theme-header mb-2">Library Separation Migration</h4>
+              <p className="text-sm theme-text mb-3">
+                Migrate Solr to support proper library separation. This ensures search results are isolated between different libraries (password-based access).
+              </p>
+              <Button
+                onClick={handleLibraryMigration}
+                disabled={solrStatus.reindex.loading || solrStatus.recreate.loading || solrStatus.migrate.loading || !searchEngineStatus.solrAvailable}
+                loading={solrStatus.migrate.loading}
+                variant="primary"
+                className="w-full sm:w-auto"
+              >
+                {solrStatus.migrate.loading ? 'Migrating...' : '🔒 Migrate Library Schema'}
+              </Button>
+            </div>
+
+            {/* Status Messages */}
+            {solrStatus.reindex.message && (
+              <div className={`text-sm p-3 rounded mb-3 ${
+                solrStatus.reindex.success
+                  ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {solrStatus.reindex.message}
+              </div>
+            )}
+
+            {solrStatus.recreate.message && (
+              <div className={`text-sm p-3 rounded mb-3 ${
+                solrStatus.recreate.success
+                  ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {solrStatus.recreate.message}
+              </div>
+            )}
+
+            {solrStatus.migrate.message && (
+              <div className={`text-sm p-3 rounded mb-3 ${
+                solrStatus.migrate.success
+                  ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {solrStatus.migrate.message}
+              </div>
+            )}
+          </div>
+
+          <div className="text-sm theme-text bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg">
+            <p className="font-medium mb-1">When to use these tools:</p>
+            <ul className="text-xs space-y-1 ml-4">
+              <li>• <strong>Reindex All:</strong> Refresh all search data while keeping existing schemas (fixes data sync issues)</li>
+              <li>• <strong>Recreate Indices:</strong> Delete and rebuild all search indexes from scratch (fixes schema and structure issues)</li>
+              <li>• <strong>Migrate Library Schema:</strong> One-time migration to enable library separation (isolates search results by library)</li>
+            </ul>
+            <div className="mt-2 pt-2 border-t border-blue-200 dark:border-blue-700">
+              <p className="font-medium text-xs">⚠️ Library Migration:</p>
+              <p className="text-xs">Only run this once to enable library-aware search. Requires Solr schema to support libraryId field.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Storage Management */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Storage Management</h2>
+        <p className="theme-text mb-6">
+          Clean up orphaned content images that are no longer referenced in any story. This can help free up disk space.
+        </p>
+
+        <div className="space-y-6">
+          {/* Image Cleanup Section */}
+          <div className="border theme-border rounded-lg p-4">
+            <h3 className="text-lg font-semibold theme-header mb-3">🖼️ Content Images Cleanup</h3>
+            <p className="text-sm theme-text mb-4">
+              Scan for and remove orphaned content images that are no longer referenced in any story content. This includes images from deleted stories and unused downloaded images.
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-3 mb-3">
+              <Button
+                onClick={handleImageCleanupPreview}
+                disabled={cleanupStatus.preview.loading}
+                loading={cleanupStatus.preview.loading}
+                variant="ghost"
+                className="flex-1"
+              >
+                {cleanupStatus.preview.loading ? 'Scanning...' : 'Preview Cleanup'}
+              </Button>
+              <Button
+                onClick={handleImageCleanupExecute}
+                disabled={cleanupStatus.execute.loading || !cleanupStatus.preview.data || cleanupStatus.preview.data.orphanedCount === 0}
+                loading={cleanupStatus.execute.loading}
+                variant="secondary"
+                className="flex-1"
+              >
+                {cleanupStatus.execute.loading ? 'Cleaning...' : 'Execute Cleanup'}
+              </Button>
+              {cleanupStatus.preview.message && (
+                <Button
+                  onClick={() => setCleanupStatus(prev => ({
+                    ...prev,
+                    preview: { loading: false, message: '', success: undefined, data: undefined }
+                  }))}
+                  variant="ghost"
+                  className="px-4 py-2 text-sm"
+                >
+                  Clear Preview
+                </Button>
+              )}
+            </div>
+
+            {/* Preview Results */}
+            {cleanupStatus.preview.message && (
+              <div className={`text-sm p-3 rounded mb-3 ${
+                cleanupStatus.preview.success
+                  ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {cleanupStatus.preview.message}
+                {cleanupStatus.preview.data && cleanupStatus.preview.data.hasErrors && (
+                  <div className="mt-2 text-xs">
+                    <details>
+                      <summary className="cursor-pointer font-medium">View Errors ({cleanupStatus.preview.data.errors.length})</summary>
+                      <ul className="mt-1 ml-4 space-y-1">
+                        {cleanupStatus.preview.data.errors.map((error: string, index: number) => (
+                          <li key={index} className="text-red-600 dark:text-red-400">• {error}</li>
+                        ))}
+                      </ul>
+                    </details>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Execute Results */}
+            {cleanupStatus.execute.message && (
+              <div className={`text-sm p-3 rounded mb-3 ${
+                cleanupStatus.execute.success
+                  ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {cleanupStatus.execute.message}
+              </div>
+            )}
+
+            {/* Detailed Preview Information */}
+            {cleanupStatus.preview.data && cleanupStatus.preview.success && (
+              <div className="text-sm theme-text bg-gray-50 dark:bg-gray-800 p-3 rounded border">
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <span className="font-medium">Orphaned Images:</span> {cleanupStatus.preview.data.orphanedCount}
+                  </div>
+                  <div>
+                    <span className="font-medium">Total Size:</span> {cleanupStatus.preview.data.formattedSize}
+                  </div>
+                  <div>
+                    <span className="font-medium">Empty Folders:</span> {cleanupStatus.preview.data.foldersToDelete}
+                  </div>
+                  <div>
+                    <span className="font-medium">Referenced Images:</span> {cleanupStatus.preview.data.referencedImagesCount}
+                  </div>
+                </div>
+
+                {/* Detailed File List */}
+                {cleanupStatus.preview.data.orphanedFiles && cleanupStatus.preview.data.orphanedFiles.length > 0 && (
+                  <div className="mt-4">
+                    <details className="cursor-pointer">
+                      <summary className="font-medium text-sm theme-header mb-2">
+                        📁 View Files to be Deleted ({cleanupStatus.preview.data.orphanedFiles.length})
+                      </summary>
+                      <div className="mt-3 max-h-96 overflow-y-auto border theme-border rounded">
+                        <table className="w-full text-xs">
+                          <thead className="bg-gray-100 dark:bg-gray-800 sticky top-0">
+                            <tr>
+                              <th className="text-left p-2 font-medium">File Name</th>
+                              <th className="text-left p-2 font-medium">Size</th>
+                              <th className="text-left p-2 font-medium">Story</th>
+                              <th className="text-left p-2 font-medium">Status</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {cleanupStatus.preview.data.orphanedFiles.map((file: any, index: number) => (
+                              <tr key={index} className="border-t theme-border hover:bg-gray-50 dark:hover:bg-gray-800">
+                                <td className="p-2">
+                                  <div
+                                    className={`truncate max-w-xs ${isImageFile(file.fileName) ? 'cursor-pointer text-blue-600 dark:text-blue-400' : ''}`}
+                                    title={file.fileName}
+                                    onMouseEnter={isImageFile(file.fileName) ? (e) => handleImageHover(file.filePath, file.fileName, e) : undefined}
+                                    onMouseMove={isImageFile(file.fileName) ? (e) => setMousePosition({ x: e.clientX, y: e.clientY }) : undefined}
+                                    onMouseLeave={isImageFile(file.fileName) ? handleImageLeave : undefined}
+                                  >
+                                    {isImageFile(file.fileName) && '🖼️ '}{file.fileName}
+                                  </div>
+                                  <div className="text-xs text-gray-500 truncate max-w-xs" title={file.filePath}>
+                                    {file.filePath}
+                                  </div>
+                                </td>
+                                <td className="p-2">{file.formattedSize}</td>
+                                <td className="p-2">
+                                  {file.storyExists && file.storyTitle ? (
+                                    <a
+                                      href={`/stories/${file.storyId}`}
+                                      className="text-blue-600 dark:text-blue-400 hover:underline truncate max-w-xs block"
+                                      title={file.storyTitle}
+                                    >
+                                      {file.storyTitle}
+                                    </a>
+                                  ) : file.storyId !== 'unknown' && file.storyId !== 'error' ? (
+                                    <span className="text-gray-500" title={`Story ID: ${file.storyId}`}>
+                                      Deleted Story
+                                    </span>
+                                  ) : (
+                                    <span className="text-gray-400">Unknown</span>
+                                  )}
+                                </td>
+                                <td className="p-2">
+                                  {file.storyExists ? (
+                                    <span className="text-orange-600 dark:text-orange-400 text-xs">Orphaned</span>
+                                  ) : file.storyId !== 'unknown' && file.storyId !== 'error' ? (
+                                    <span className="text-red-600 dark:text-red-400 text-xs">Story Deleted</span>
+                                  ) : (
+                                    <span className="text-gray-500 text-xs">Unknown Folder</span>
+                                  )}
+                                </td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </details>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          <div className="text-sm theme-text bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg">
+            <p className="font-medium mb-1">📝 How it works:</p>
+            <ul className="text-xs space-y-1 ml-4">
+              <li>• <strong>Preview:</strong> Scans all stories to find images no longer referenced in content</li>
+              <li>• <strong>Execute:</strong> Permanently deletes orphaned images and empty story directories</li>
+              <li>• <strong>Safe:</strong> Only removes images not found in any story content</li>
+              <li>• <strong>Backup recommended:</strong> Consider backing up before large cleanups</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      {/* Database Management */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Database Management</h2>
+        <p className="theme-text mb-6">
+          Backup, restore, or clear your StoryCove database and files. These comprehensive operations include both your data and uploaded images.
+        </p>
+
+        <div className="space-y-6">
+          {/* Complete Backup Section */}
+          <div className="border theme-border rounded-lg p-4 border-blue-200 dark:border-blue-800">
+            <h3 className="text-lg font-semibold theme-header mb-3">📦 Create Backup</h3>
+            <p className="text-sm theme-text mb-3">
+              Download a complete backup as a ZIP file. This includes your database AND all uploaded files (cover images, avatars). This is a comprehensive backup of your entire StoryCove installation.
+            </p>
+            <Button
+              onClick={handleCompleteBackup}
+              disabled={databaseStatus.completeBackup.loading}
+              loading={databaseStatus.completeBackup.loading}
+              variant="primary"
+              className="w-full sm:w-auto"
+            >
+              {databaseStatus.completeBackup.loading ? 'Creating Backup...' : 'Download Backup'}
+            </Button>
+            {databaseStatus.completeBackup.message && (
+              <div className={`text-sm p-2 rounded mt-3 ${
+                databaseStatus.completeBackup.success
+                  ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {databaseStatus.completeBackup.message}
+              </div>
+            )}
+          </div>
+
+          {/* Restore Section */}
+          <div className="border theme-border rounded-lg p-4 border-orange-200 dark:border-orange-800">
+            <h3 className="text-lg font-semibold theme-header mb-3">📥 Restore Backup</h3>
+            <p className="text-sm theme-text mb-3">
+              <strong className="text-orange-600 dark:text-orange-400">⚠️ Warning:</strong> This will completely replace your current database AND all files with the backup. All existing data and uploaded files will be permanently deleted.
+            </p>
+            <div className="flex items-center gap-3">
+              <input
+                type="file"
+                accept=".zip"
+                onChange={handleCompleteRestore}
+                disabled={databaseStatus.completeRestore.loading}
+                className="flex-1 text-sm theme-text file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:theme-accent-bg file:text-white hover:file:bg-opacity-90 file:cursor-pointer"
+              />
+            </div>
+            {databaseStatus.completeRestore.message && (
+              <div className={`text-sm p-2 rounded mt-3 ${
+                databaseStatus.completeRestore.success
+                  ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {databaseStatus.completeRestore.message}
+              </div>
+            )}
+            {databaseStatus.completeRestore.loading && (
+              <div className="text-sm theme-text mt-3 flex items-center gap-2">
+                <div className="animate-spin w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full"></div>
+                Restoring backup...
+              </div>
+            )}
+          </div>
+
+          {/* Clear Everything Section */}
+          <div className="border theme-border rounded-lg p-4 border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/10">
+            <h3 className="text-lg font-semibold theme-header mb-3">🗑️ Clear Everything</h3>
+            <p className="text-sm theme-text mb-3">
+              <strong className="text-red-600 dark:text-red-400">⚠️ Danger Zone:</strong> This will permanently delete ALL data from your database AND all uploaded files (cover images, avatars). Everything will be completely removed. This action cannot be undone!
+            </p>
+            <Button
+              onClick={handleCompleteClear}
+              disabled={databaseStatus.completeClear.loading}
+              loading={databaseStatus.completeClear.loading}
+              variant="secondary"
+              className="w-full sm:w-auto bg-red-700 hover:bg-red-800 text-white border-red-700"
+            >
+              {databaseStatus.completeClear.loading ? 'Clearing Everything...' : 'Clear Everything'}
+            </Button>
+            {databaseStatus.completeClear.message && (
+              <div className={`text-sm p-2 rounded mt-3 ${
+                databaseStatus.completeClear.success
+                  ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {databaseStatus.completeClear.message}
+              </div>
+            )}
+          </div>
+
+          <div className="text-sm theme-text bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg">
+            <p className="font-medium mb-1">💡 Best Practices:</p>
+            <ul className="text-xs space-y-1 ml-4">
+              <li>• <strong>Always backup</strong> before performing restore or clear operations</li>
+              <li>• <strong>Store backups safely</strong> in multiple locations for important data</li>
+              <li>• <strong>Test restores</strong> in a development environment when possible</li>
+              <li>• <strong>Backup files (.zip)</strong> contain both database and all uploaded files</li>
+              <li>• <strong>Verify backup files</strong> are complete before relying on them</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      {/* Image Preview Overlay */}
+      {hoveredImage && (
+        <div
+          className="fixed pointer-events-none z-50 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg shadow-xl p-2 max-w-sm"
+          style={{
+            left: mousePosition.x + 10,
+            top: mousePosition.y - 100,
+            transform: mousePosition.x > window.innerWidth - 300 ? 'translateX(-100%)' : 'none'
+          }}
+        >
+          <img
+            src={hoveredImage.src}
+            alt={hoveredImage.alt}
+            className="max-w-full max-h-64 object-contain rounded"
+            onError={() => {
+              // Hide preview if image fails to load
+              setHoveredImage(null);
+            }}
+          />
+          <div className="text-xs theme-text mt-1 truncate">
+            {hoveredImage.alt}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/stories/SlateEditor.tsx

@@ -0,0 +1,892 @@
+'use client';
+
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+  createEditor,
+  Descendant,
+  Element as SlateElement,
+  Node as SlateNode,
+  Transforms,
+  Editor,
+  Range
+} from 'slate';
+import {
+  Slate,
+  Editable,
+  withReact,
+  ReactEditor,
+  RenderElementProps,
+  RenderLeafProps,
+  useSlate as useEditor
+} from 'slate-react';
+import { withHistory } from 'slate-history';
+import Button from '../ui/Button';
+import { sanitizeHtmlSync } from '../../lib/sanitization';
+import { debug } from '../../lib/debug';
+
+interface SlateEditorProps {
+  value: string; // HTML value for compatibility with existing code
+  onChange: (value: string) => void; // Returns HTML for compatibility
+  placeholder?: string;
+  error?: string;
+  storyId?: string;
+  enableImageProcessing?: boolean;
+}
+
+// Custom types for our editor
+type CustomElement = {
+  type: 'paragraph' | 'heading-one' | 'heading-two' | 'heading-three' | 'blockquote' | 'image' | 'code-block';
+  children: CustomText[];
+  src?: string; // for images
+  alt?: string; // for images
+  caption?: string; // for images
+  language?: string; // for code blocks
+};
+
+type CustomText = {
+  text: string;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strikethrough?: boolean;
+  code?: boolean;
+};
+
+declare module 'slate' {
+  interface CustomTypes {
+    Editor: ReactEditor;
+    Element: CustomElement;
+    Text: CustomText;
+  }
+}
+
+// HTML to Slate conversion - preserves mixed content order
+const htmlToSlate = (html: string): Descendant[] => {
+  if (!html || html.trim() === '') {
+    return [{ type: 'paragraph', children: [{ text: '' }] }];
+  }
+
+  const sanitizedHtml = sanitizeHtmlSync(html);
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(sanitizedHtml, 'text/html');
+
+  const nodes: Descendant[] = [];
+
+  // Process all nodes in document order to maintain sequence
+  const processChildNodes = (parentNode: Node): Descendant[] => {
+    const results: Descendant[] = [];
+
+    Array.from(parentNode.childNodes).forEach(node => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node as Element;
+
+        switch (element.tagName.toLowerCase()) {
+          case 'h1':
+            results.push({
+              type: 'heading-one',
+              children: [{ text: element.textContent || '' }]
+            });
+            break;
+          case 'h2':
+            results.push({
+              type: 'heading-two',
+              children: [{ text: element.textContent || '' }]
+            });
+            break;
+          case 'h3':
+            results.push({
+              type: 'heading-three',
+              children: [{ text: element.textContent || '' }]
+            });
+            break;
+          case 'blockquote':
+            results.push({
+              type: 'blockquote',
+              children: [{ text: element.textContent || '' }]
+            });
+            break;
+          case 'img':
+            const img = element as HTMLImageElement;
+            results.push({
+              type: 'image',
+              src: img.src || img.getAttribute('src') || '',
+              alt: img.alt || img.getAttribute('alt') || '',
+              caption: img.title || img.getAttribute('title') || '',
+              children: [{ text: '' }] // Images need children in Slate
+            });
+            break;
+          case 'pre':
+            const codeEl = element.querySelector('code');
+            const code = codeEl ? codeEl.textContent || '' : element.textContent || '';
+            const language = codeEl?.className?.replace('language-', '') || '';
+            results.push({
+              type: 'code-block',
+              language,
+              children: [{ text: code }]
+            });
+            break;
+          case 'p':
+          case 'div':
+            // Check if this paragraph contains mixed content (text + images)
+            if (element.querySelector('img')) {
+              // Process mixed content - handle both text and images in order
+              results.push(...processChildNodes(element));
+            } else {
+              const text = element.textContent || '';
+              if (text.trim()) {
+                results.push({
+                  type: 'paragraph',
+                  children: [{ text }]
+                });
+              }
+            }
+            break;
+          case 'br':
+            // Handle line breaks by creating empty paragraphs
+            results.push({
+              type: 'paragraph',
+              children: [{ text: '' }]
+            });
+            break;
+          default:
+            // For other elements, try to extract text or recurse
+            const text = element.textContent || '';
+            if (text.trim()) {
+              results.push({
+                type: 'paragraph',
+                children: [{ text }]
+              });
+            }
+            break;
+        }
+      } else if (node.nodeType === Node.TEXT_NODE) {
+        const text = node.textContent || '';
+        if (text.trim()) {
+          results.push({
+            type: 'paragraph',
+            children: [{ text: text.trim() }]
+          });
+        }
+      }
+    });
+
+    return results;
+  };
+
+  // Process all content
+  nodes.push(...processChildNodes(doc.body));
+
+  // Fallback for simple text content
+  if (nodes.length === 0 && doc.body.textContent?.trim()) {
+    const text = doc.body.textContent.trim();
+    const lines = text.split('\n').filter(line => line.trim());
+    lines.forEach(line => {
+      nodes.push({
+        type: 'paragraph',
+        children: [{ text: line.trim() }]
+      });
+    });
+  }
+
+  return nodes.length > 0 ? nodes : [{ type: 'paragraph', children: [{ text: '' }] }];
+};
+
+// Slate to HTML conversion
+const slateToHtml = (nodes: Descendant[]): string => {
+  const htmlParts: string[] = [];
+
+  nodes.forEach(node => {
+    if (SlateElement.isElement(node)) {
+      const element = node as CustomElement;
+      const text = SlateNode.string(node);
+
+      switch (element.type) {
+        case 'heading-one':
+          htmlParts.push(`<h1>${text}</h1>`);
+          break;
+        case 'heading-two':
+          htmlParts.push(`<h2>${text}</h2>`);
+          break;
+        case 'heading-three':
+          htmlParts.push(`<h3>${text}</h3>`);
+          break;
+        case 'blockquote':
+          htmlParts.push(`<blockquote>${text}</blockquote>`);
+          break;
+        case 'image':
+          const attrs: string[] = [];
+          if (element.src) attrs.push(`src="${element.src}"`);
+          if (element.alt) attrs.push(`alt="${element.alt}"`);
+          if (element.caption) attrs.push(`title="${element.caption}"`);
+          htmlParts.push(`<img ${attrs.join(' ')} />`);
+          break;
+        case 'code-block':
+          const langClass = element.language ? ` class="language-${element.language}"` : '';
+          const escapedText = text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+          htmlParts.push(`<pre><code${langClass}>${escapedText}</code></pre>`);
+          break;
+        case 'paragraph':
+        default:
+          htmlParts.push(text ? `<p>${text}</p>` : '<p></p>');
+          break;
+      }
+    }
+  });
+
+  const html = htmlParts.join('\n');
+  return sanitizeHtmlSync(html);
+};
+
+// Custom plugin to handle images
+const withImages = (editor: ReactEditor) => {
+  const { insertData, isVoid } = editor;
+
+  editor.isVoid = element => {
+    return element.type === 'image' ? true : isVoid(element);
+  };
+
+  editor.insertData = (data) => {
+    const html = data.getData('text/html');
+
+    if (html && html.includes('<img')) {
+      debug.log('📋 Image paste detected in Slate editor');
+
+      // Convert HTML to Slate nodes maintaining order
+      const slateNodes = htmlToSlate(html);
+
+      // Insert all nodes in sequence
+      slateNodes.forEach(node => {
+        Transforms.insertNodes(editor, node);
+      });
+
+      debug.log(`📋 Inserted ${slateNodes.length} nodes from pasted HTML`);
+      return;
+    }
+
+    insertData(data);
+  };
+
+  return editor;
+};
+
+// Interactive Image Component
+const ImageElement = ({ attributes, element, children }: {
+  attributes: any;
+  element: CustomElement;
+  children: React.ReactNode;
+}) => {
+  const editor = useEditor();
+  const [isEditing, setIsEditing] = useState(false);
+  const [editUrl, setEditUrl] = useState(element.src || '');
+  const [editAlt, setEditAlt] = useState(element.alt || '');
+  const [editCaption, setEditCaption] = useState(element.caption || '');
+
+  const handleDelete = () => {
+    const path = ReactEditor.findPath(editor, element);
+    Transforms.removeNodes(editor, { at: path });
+  };
+
+  const handleSave = () => {
+    const path = ReactEditor.findPath(editor, element);
+    const newProperties: Partial<CustomElement> = {
+      src: editUrl,
+      alt: editAlt,
+      caption: editCaption,
+    };
+    Transforms.setNodes(editor, newProperties, { at: path });
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setEditUrl(element.src || '');
+    setEditAlt(element.alt || '');
+    setEditCaption(element.caption || '');
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <div {...attributes} contentEditable={false} className="my-4">
+        <div className="border border-blue-300 rounded-lg p-4 bg-blue-50">
+          <h4 className="font-medium text-blue-900 mb-3">Edit Image</h4>
+          <div className="space-y-3">
+            <div>
+              <label className="block text-sm font-medium text-blue-800 mb-1">
+                Image URL *
+              </label>
+              <input
+                type="url"
+                value={editUrl}
+                onChange={(e) => setEditUrl(e.target.value)}
+                className="w-full px-3 py-2 border border-blue-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="https://example.com/image.jpg"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-blue-800 mb-1">
+                Alt Text
+              </label>
+              <input
+                type="text"
+                value={editAlt}
+                onChange={(e) => setEditAlt(e.target.value)}
+                className="w-full px-3 py-2 border border-blue-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="Describe the image"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-blue-800 mb-1">
+                Caption
+              </label>
+              <input
+                type="text"
+                value={editCaption}
+                onChange={(e) => setEditCaption(e.target.value)}
+                className="w-full px-3 py-2 border border-blue-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="Image caption"
+              />
+            </div>
+          </div>
+          <div className="flex gap-2 mt-4">
+            <button
+              onClick={handleSave}
+              className="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 focus:ring-2 focus:ring-blue-500"
+            >
+              Save
+            </button>
+            <button
+              onClick={handleCancel}
+              className="px-3 py-1 bg-gray-300 text-gray-700 text-sm rounded hover:bg-gray-400 focus:ring-2 focus:ring-gray-500"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div {...attributes} contentEditable={false} className="my-4">
+      <div
+        className="relative border border-gray-200 rounded-lg overflow-hidden bg-white shadow-sm group hover:shadow-md transition-shadow focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500"
+        tabIndex={0}
+        onKeyDown={(event) => {
+          // Handle delete/backspace on focused image
+          if (event.key === 'Delete' || event.key === 'Backspace') {
+            event.preventDefault();
+            handleDelete();
+          }
+          // Handle Enter to edit
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            setIsEditing(true);
+          }
+        }}
+        onClick={() => {
+          // Focus the image element when clicked
+          const path = ReactEditor.findPath(editor, element);
+          const start = Editor.start(editor, path);
+          Transforms.select(editor, start);
+        }}
+      >
+        {/* Control buttons - show on hover */}
+        <div className="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+          <div className="flex gap-1">
+            <button
+              onClick={() => setIsEditing(true)}
+              className="p-1 bg-white rounded-full shadow-sm hover:bg-blue-50 border border-gray-200 text-blue-600 hover:text-blue-700"
+              title="Edit image"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+              </svg>
+            </button>
+            <button
+              onClick={handleDelete}
+              className="p-1 bg-white rounded-full shadow-sm hover:bg-red-50 border border-gray-200 text-red-600 hover:text-red-700"
+              title="Delete image"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {element.src ? (
+          <>
+            <img
+              src={element.src}
+              alt={element.alt || ''}
+              className="w-full h-auto max-h-96 object-contain cursor-pointer"
+              onDoubleClick={() => setIsEditing(true)}
+              onError={(e) => {
+                // Fallback to text block if image fails to load
+                const target = e.target as HTMLImageElement;
+                const parent = target.parentElement;
+                if (parent) {
+                  parent.innerHTML = `
+                    <div class="p-3 border border-dashed border-red-300 rounded-lg bg-red-50">
+                      <div class="flex items-center gap-2 mb-2">
+                        <span class="text-lg">⚠️</span>
+                        <span class="font-medium text-red-700">Image failed to load</span>
+                      </div>
+                      <div class="text-sm text-red-600 space-y-1">
+                        <p><strong>Source:</strong> ${element.src}</p>
+                        ${element.alt ? `<p><strong>Alt:</strong> ${element.alt}</p>` : ''}
+                        ${element.caption ? `<p><strong>Caption:</strong> ${element.caption}</p>` : ''}
+                      </div>
+                    </div>
+                  `;
+                }
+              }}
+            />
+            {(element.alt || element.caption) && (
+              <div className="p-2 bg-gray-50 border-t border-gray-200">
+                <div className="text-sm text-gray-600">
+                  {element.caption && (
+                    <p className="font-medium">{element.caption}</p>
+                  )}
+                  {element.alt && element.alt !== element.caption && (
+                    <p className="italic">{element.alt}</p>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* External image indicator */}
+            {element.src.startsWith('http') && (
+              <div className="absolute top-2 right-2">
+                <div className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full flex items-center gap-1">
+                  <span>🌐</span>
+                  <span>External</span>
+                </div>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="p-3 border border-dashed border-gray-300 rounded-lg bg-gray-50">
+            <div className="flex items-center gap-2 mb-2">
+              <span className="text-lg">🖼️</span>
+              <span className="font-medium text-gray-700">Image (No Source)</span>
+            </div>
+            <div className="text-sm text-gray-600 space-y-1">
+              {element.alt && <p><strong>Alt:</strong> {element.alt}</p>}
+              {element.caption && <p><strong>Caption:</strong> {element.caption}</p>}
+            </div>
+          </div>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+};
+
+// Component for rendering elements
+const Element = ({ attributes, children, element }: RenderElementProps) => {
+  const customElement = element as CustomElement;
+
+  switch (customElement.type) {
+    case 'heading-one':
+      return <h1 {...attributes} className="text-3xl font-bold mb-4">{children}</h1>;
+    case 'heading-two':
+      return <h2 {...attributes} className="text-2xl font-bold mb-3">{children}</h2>;
+    case 'heading-three':
+      return <h3 {...attributes} className="text-xl font-bold mb-3">{children}</h3>;
+    case 'blockquote':
+      return <blockquote {...attributes} className="border-l-4 border-gray-300 pl-4 italic my-4">{children}</blockquote>;
+    case 'image':
+      return (
+        <ImageElement
+          attributes={attributes}
+          element={customElement}
+          children={children}
+        />
+      );
+    case 'code-block':
+      return (
+        <pre {...attributes} className="my-4 p-3 bg-gray-100 rounded-lg overflow-x-auto">
+          <code className="text-sm font-mono">{children}</code>
+        </pre>
+      );
+    default:
+      return <p {...attributes} className="mb-2">{children}</p>;
+  }
+};
+
+// Component for rendering leaves (text formatting)
+const Leaf = ({ attributes, children, leaf }: RenderLeafProps) => {
+  const customLeaf = leaf as CustomText;
+
+  if (customLeaf.bold) {
+    children = <strong>{children}</strong>;
+  }
+
+  if (customLeaf.italic) {
+    children = <em>{children}</em>;
+  }
+
+  if (customLeaf.underline) {
+    children = <u>{children}</u>;
+  }
+
+  if (customLeaf.strikethrough) {
+    children = <s>{children}</s>;
+  }
+
+  if (customLeaf.code) {
+    children = <code className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono">{children}</code>;
+  }
+
+  return <span {...attributes}>{children}</span>;
+};
+
+// Toolbar component
+const Toolbar = ({ editor }: { editor: ReactEditor }) => {
+  type MarkFormat = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'code';
+
+  const isMarkActive = (format: MarkFormat) => {
+    const marks = Editor.marks(editor);
+    return marks ? marks[format] === true : false;
+  };
+
+  const toggleMark = (format: MarkFormat) => {
+    const isActive = isMarkActive(format);
+    if (isActive) {
+      Editor.removeMark(editor, format);
+    } else {
+      Editor.addMark(editor, format, true);
+    }
+  };
+
+  const isBlockActive = (format: CustomElement['type']) => {
+    const { selection } = editor;
+    if (!selection) return false;
+
+    const [match] = Array.from(
+      Editor.nodes(editor, {
+        at: Editor.unhangRange(editor, selection),
+        match: n =>
+          !Editor.isEditor(n) &&
+          SlateElement.isElement(n) &&
+          n.type === format,
+      })
+    );
+
+    return !!match;
+  };
+
+  const toggleBlock = (format: CustomElement['type']) => {
+    const isActive = isBlockActive(format);
+
+    Transforms.setNodes(
+      editor,
+      { type: isActive ? 'paragraph' : format },
+      { match: n => SlateElement.isElement(n) && Editor.isBlock(editor, n) }
+    );
+  };
+
+  const insertImage = () => {
+    const url = prompt('Enter image URL:', 'https://');
+    if (url && url.trim() !== 'https://') {
+      const imageNode: CustomElement = {
+        type: 'image',
+        src: url.trim(),
+        alt: '',
+        caption: '',
+        children: [{ text: '' }],
+      };
+
+      Transforms.insertNodes(editor, imageNode);
+      // Add a paragraph after the image
+      Transforms.insertNodes(editor, {
+        type: 'paragraph',
+        children: [{ text: '' }],
+      });
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-2 p-2 theme-card border theme-border rounded-t-lg">
+      <div className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
+        ✨ Slate.js Editor
+      </div>
+
+      {/* Block type buttons */}
+      <div className="flex items-center gap-1 border-r pr-2 mr-2">
+        <Button
+          type="button"
+          size="sm"
+          variant="ghost"
+          onClick={() => toggleBlock('paragraph')}
+          className={isBlockActive('paragraph') ? 'theme-accent-bg text-white' : ''}
+          title="Normal paragraph"
+        >
+          P
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          variant="ghost"
+          onClick={() => toggleBlock('heading-one')}
+          className={`text-lg font-bold ${isBlockActive('heading-one') ? 'theme-accent-bg text-white' : ''}`}
+          title="Heading 1"
+        >
+          H1
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          variant="ghost"
+          onClick={() => toggleBlock('heading-two')}
+          className={`text-base font-bold ${isBlockActive('heading-two') ? 'theme-accent-bg text-white' : ''}`}
+          title="Heading 2"
+        >
+          H2
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          variant="ghost"
+          onClick={() => toggleBlock('heading-three')}
+          className={`text-sm font-bold ${isBlockActive('heading-three') ? 'theme-accent-bg text-white' : ''}`}
+          title="Heading 3"
+        >
+          H3
+        </Button>
+      </div>
+
+      {/* Text formatting buttons */}
+      <div className="flex items-center gap-1">
+        <Button
+          type="button"
+          size="sm"
+          variant="ghost"
+          onClick={() => toggleMark('bold')}
+          className={`font-bold ${isMarkActive('bold') ? 'theme-accent-bg text-white' : ''}`}
+          title="Bold (Ctrl+B)"
+        >
+          B
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          variant="ghost"
+          onClick={() => toggleMark('italic')}
+          className={`italic ${isMarkActive('italic') ? 'theme-accent-bg text-white' : ''}`}
+          title="Italic (Ctrl+I)"
+        >
+          I
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          variant="ghost"
+          onClick={() => toggleMark('underline')}
+          className={`underline ${isMarkActive('underline') ? 'theme-accent-bg text-white' : ''}`}
+          title="Underline"
+        >
+          U
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          variant="ghost"
+          onClick={() => toggleMark('strikethrough')}
+          className={`line-through ${isMarkActive('strikethrough') ? 'theme-accent-bg text-white' : ''}`}
+          title="Strike-through"
+        >
+          S
+        </Button>
+      </div>
+
+      {/* Image insertion button */}
+      <div className="flex items-center gap-1 border-l pl-2 ml-2">
+        <Button
+          type="button"
+          size="sm"
+          variant="ghost"
+          onClick={insertImage}
+          className="text-green-600 hover:bg-green-50"
+          title="Insert Image"
+        >
+          🖼️
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default function SlateEditor({
+  value,
+  onChange,
+  placeholder = 'Write your story here...',
+  error,
+  storyId,
+  enableImageProcessing = false
+}: SlateEditorProps) {
+  const [isScrollable, setIsScrollable] = useState(true);
+
+  // Create editor with plugins
+  const editor = useMemo(
+    () => withImages(withHistory(withReact(createEditor()))),
+    []
+  );
+
+  // Convert HTML to Slate format for initial value
+  const initialValue = useMemo(() => {
+    debug.log('🚀 Slate Editor initializing with HTML:', { htmlLength: value?.length });
+    return htmlToSlate(value);
+  }, [value]);
+
+  // Handle changes
+  const handleChange = useCallback((newValue: Descendant[]) => {
+    // Convert back to HTML and call onChange
+    const html = slateToHtml(newValue);
+    onChange(html);
+
+    debug.log('📝 Slate Editor changed:', {
+      htmlLength: html.length,
+      nodeCount: newValue.length
+    });
+  }, [onChange]);
+
+  debug.log('🎯 Slate Editor loaded!', {
+    valueLength: value?.length,
+    enableImageProcessing,
+    hasStoryId: !!storyId
+  });
+
+  return (
+    <div className="space-y-2">
+      <Slate editor={editor} initialValue={initialValue} onChange={handleChange}>
+        <Toolbar editor={editor} />
+        <div className="border theme-border rounded-b-lg overflow-hidden">
+          <Editable
+            className={`p-3 focus:outline-none focus:ring-0 resize-none ${
+              isScrollable
+                ? 'h-[400px] overflow-y-auto'
+                : 'min-h-[300px]'
+            }`}
+            placeholder={placeholder}
+            renderElement={Element}
+            renderLeaf={Leaf}
+            onKeyDown={(event) => {
+              // Handle delete/backspace for selected content (including images)
+              if (event.key === 'Delete' || event.key === 'Backspace') {
+                const { selection } = editor;
+                if (!selection) return;
+
+                // If there's an expanded selection, let Slate handle it naturally
+                // This will delete all selected content including images
+                if (!Range.isCollapsed(selection)) {
+                  // Slate will handle this automatically, including void elements
+                  return;
+                }
+
+                // Handle single point deletions near images
+                const { anchor } = selection;
+
+                if (event.key === 'Delete') {
+                  // Delete key - check if next node is an image
+                  try {
+                    const [nextNode] = Editor.next(editor, { at: anchor }) || [];
+                    if (nextNode && SlateElement.isElement(nextNode) && nextNode.type === 'image') {
+                      event.preventDefault();
+                      const path = ReactEditor.findPath(editor, nextNode);
+                      Transforms.removeNodes(editor, { at: path });
+                      return;
+                    }
+                  } catch (error) {
+                    // Ignore navigation errors at document boundaries
+                  }
+                } else if (event.key === 'Backspace') {
+                  // Backspace key - check if previous node is an image
+                  try {
+                    const [prevNode] = Editor.previous(editor, { at: anchor }) || [];
+                    if (prevNode && SlateElement.isElement(prevNode) && prevNode.type === 'image') {
+                      event.preventDefault();
+                      const path = ReactEditor.findPath(editor, prevNode);
+                      Transforms.removeNodes(editor, { at: path });
+                      return;
+                    }
+                  } catch (error) {
+                    // Ignore navigation errors at document boundaries
+                  }
+                }
+              }
+
+              // Handle keyboard shortcuts
+              if (!event.ctrlKey && !event.metaKey) return;
+
+              switch (event.key) {
+                case 'b': {
+                  event.preventDefault();
+                  const marks = Editor.marks(editor);
+                  const isActive = marks ? marks.bold === true : false;
+                  if (isActive) {
+                    Editor.removeMark(editor, 'bold');
+                  } else {
+                    Editor.addMark(editor, 'bold', true);
+                  }
+                  break;
+                }
+                case 'i': {
+                  event.preventDefault();
+                  const marks = Editor.marks(editor);
+                  const isActive = marks ? marks.italic === true : false;
+                  if (isActive) {
+                    Editor.removeMark(editor, 'italic');
+                  } else {
+                    Editor.addMark(editor, 'italic', true);
+                  }
+                  break;
+                }
+                case 'a': {
+                  // Handle Ctrl+A / Cmd+A to select all
+                  event.preventDefault();
+                  Transforms.select(editor, {
+                    anchor: Editor.start(editor, []),
+                    focus: Editor.end(editor, []),
+                  });
+                  break;
+                }
+              }
+            }}
+          />
+        </div>
+
+        <div className="flex justify-between items-center">
+          <div className="text-xs theme-text">
+            <p>
+              <strong>Slate.js Editor:</strong> Rich text editor with advanced image paste handling.
+              {isScrollable ? ' Fixed height with scrolling.' : ' Auto-expanding height.'}
+            </p>
+          </div>
+
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            onClick={() => setIsScrollable(!isScrollable)}
+            className={isScrollable ? 'theme-accent-bg text-white' : ''}
+            title={isScrollable ? 'Switch to auto-expand mode' : 'Switch to scrollable mode'}
+          >
+            {isScrollable ? '📜' : '📏'}
+          </Button>
+        </div>
+      </Slate>
+
+      {error && (
+        <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+      )}
+    </div>
+  );
+}

frontend/src/components/stories/StoryCard.tsx

@@ -28,6 +28,23 @@ export default function StoryCard({
   const [rating, setRating] = useState(story.rating || 0);
   const [updating, setUpdating] = useState(false);
 
+  // Helper function to get tags from either tags array or tagNames array
+  const getTags = () => {
+    if (Array.isArray(story.tags) && story.tags.length > 0) {
+      return story.tags;
+    }
+    if (Array.isArray(story.tagNames) && story.tagNames.length > 0) {
+      // Convert tagNames to Tag objects for display compatibility
+      return story.tagNames.map((name, index) => ({
+        id: `tag-${index}`, // Temporary ID for display
+        name: name
+      }));
+    }
+    return [];
+  };
+
+  const displayTags = getTags();
+
   const handleRatingClick = async (e: React.MouseEvent, newRating: number) => {
     // Prevent default and stop propagation to avoid triggering navigation
     e.preventDefault();
@@ -55,6 +72,17 @@ export default function StoryCard({
     return new Date(dateString).toLocaleDateString();
   };
 
+  const calculateReadingPercentage = (story: Story): number => {
+    if (!story.readingPosition) return 0;
+
+    const totalLength = story.contentPlain?.length || story.contentHtml?.length || 0;
+    if (totalLength === 0) return 0;
+
+    return Math.round((story.readingPosition / totalLength) * 100);
+  };
+
+  const readingPercentage = calculateReadingPercentage(story);
+
   if (viewMode === 'list') {
     return (
       <div className="theme-card theme-shadow rounded-lg p-4 hover:shadow-lg transition-shadow">
@@ -100,6 +128,11 @@ export default function StoryCard({
                 <div className="flex items-center gap-4 mt-2 text-sm theme-text">
                   <span>{formatWordCount(story.wordCount)}</span>
                   <span>{formatDate(story.createdAt)}</span>
+                  {readingPercentage > 0 && (
+                    <span className="bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-2 py-1 rounded text-xs font-mono">
+                      {readingPercentage}% read
+                    </span>
+                  )}
                   {story.seriesName && (
                     <span>
                       {story.seriesName} #{story.volume}
@@ -108,9 +141,9 @@ export default function StoryCard({
                 </div>
 
                 {/* Tags */}
-                {Array.isArray(story.tags) && story.tags.length > 0 && (
+                {displayTags.length > 0 && (
                   <div className="flex flex-wrap gap-1 mt-2">
-                    {story.tags.slice(0, 3).map((tag) => (
+                    {displayTags.slice(0, 3).map((tag) => (
                       <TagDisplay
                         key={tag.id}
                         tag={tag}
@@ -118,9 +151,9 @@ export default function StoryCard({
                         clickable={false}
                       />
                     ))}
-                    {story.tags.length > 3 && (
+                    {displayTags.length > 3 && (
                       <span className="px-2 py-1 text-xs theme-text">
-                        +{story.tags.length - 3} more
+                        +{displayTags.length - 3} more
                       </span>
                     )}
                   </div>
@@ -231,6 +264,11 @@ export default function StoryCard({
         <div className="text-xs theme-text space-y-1">
           <div>{formatWordCount(story.wordCount)}</div>
           <div>{formatDate(story.createdAt)}</div>
+          {readingPercentage > 0 && (
+            <div className="bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-2 py-1 rounded font-mono inline-block">
+              {readingPercentage}% read
+            </div>
+          )}
           {story.seriesName && (
             <div>
               {story.seriesName} #{story.volume}
@@ -239,9 +277,9 @@ export default function StoryCard({
         </div>
 
         {/* Tags */}
-        {Array.isArray(story.tags) && story.tags.length > 0 && (
+        {displayTags.length > 0 && (
           <div className="flex flex-wrap gap-1 mt-2">
-            {story.tags.slice(0, 2).map((tag) => (
+            {displayTags.slice(0, 2).map((tag) => (
               <TagDisplay
                 key={tag.id}
                 tag={tag}
@@ -249,9 +287,9 @@ export default function StoryCard({
                 clickable={false}
               />
             ))}
-            {story.tags.length > 2 && (
+            {displayTags.length > 2 && (
               <span className="px-2 py-1 text-xs theme-text">
-                +{story.tags.length - 2}
+                +{displayTags.length - 2}
               </span>
             )}
           </div>

frontend/src/components/ui/TabNavigation.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+interface Tab {
+  id: string;
+  label: string;
+  icon: string;
+}
+
+interface TabNavigationProps {
+  tabs: Tab[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+  className?: string;
+}
+
+export default function TabNavigation({
+  tabs,
+  activeTab,
+  onTabChange,
+  className = ''
+}: TabNavigationProps) {
+  return (
+    <div className={`border-b theme-border ${className}`}>
+      <nav className="-mb-px flex space-x-8">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => onTabChange(tab.id)}
+            className={`
+              whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors
+              ${activeTab === tab.id
+                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                : 'border-transparent theme-text hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'
+              }
+            `}
+          >
+            <span className="mr-2">{tab.icon}</span>
+            {tab.label}
+          </button>
+        ))}
+      </nav>
+    </div>
+  );
+}

frontend/src/lib/api.ts

@@ -179,15 +179,6 @@ export const storyApi = {
     return response.data;
   },
   
-  reindexTypesense: async (): Promise<{ success: boolean; message: string; count?: number; error?: string }> => {
-    const response = await api.post('/stories/reindex-typesense');
-    return response.data;
-  },
-  
-  recreateTypesenseCollection: async (): Promise<{ success: boolean; message: string; count?: number; error?: string }> => {
-    const response = await api.post('/stories/recreate-typesense-collection');
-    return response.data;
-  },
   
   checkDuplicate: async (title: string, authorName: string): Promise<{
     hasDuplicates: boolean;
@@ -227,43 +218,91 @@ export const storyApi = {
     hiddenGemsOnly?: boolean;
   }): Promise<Story | null> => {
     try {
-      // Create URLSearchParams to properly handle array parameters like tags
-      const searchParams = new URLSearchParams();
+      // Use proper Solr RandomSortField with dynamic field random_* for true randomness
+      // Each call generates a different random seed to ensure different random results
+      const randomSeed = Math.floor(Math.random() * 1000000);
+      const searchResult = await searchApi.search({
+        query: filters?.searchQuery || '*:*',
+        page: 0,
+        size: 1, // Only get one result - Solr RandomSortField considers entire dataset
+        authors: [],
+        tags: filters?.tags || [],
+        minRating: filters?.minRating,
+        maxRating: filters?.maxRating,
+        sortBy: `random_${randomSeed}`, // Use proper dynamic field with random seed
+        sortDir: 'desc',
 
-      if (filters?.searchQuery) {
-        searchParams.append('searchQuery', filters.searchQuery);
-      }
-      if (filters?.tags && filters.tags.length > 0) {
-        filters.tags.forEach(tag => searchParams.append('tags', tag));
-      }
+        // Advanced filters - pass through all filter options
+        minWordCount: filters?.minWordCount,
+        maxWordCount: filters?.maxWordCount,
+        createdAfter: filters?.createdAfter,
+        createdBefore: filters?.createdBefore,
+        lastReadAfter: filters?.lastReadAfter,
+        lastReadBefore: filters?.lastReadBefore,
+        unratedOnly: filters?.unratedOnly,
+        readingStatus: filters?.readingStatus,
+        hasReadingProgress: filters?.hasReadingProgress,
+        hasCoverImage: filters?.hasCoverImage,
+        sourceDomain: filters?.sourceDomain,
+        seriesFilter: filters?.seriesFilter,
+        minTagCount: filters?.minTagCount,
+        popularOnly: filters?.popularOnly,
+        hiddenGemsOnly: filters?.hiddenGemsOnly,
+      });
 
-      // Advanced filters
-      if (filters?.minWordCount !== undefined) searchParams.append('minWordCount', filters.minWordCount.toString());
-      if (filters?.maxWordCount !== undefined) searchParams.append('maxWordCount', filters.maxWordCount.toString());
-      if (filters?.createdAfter) searchParams.append('createdAfter', filters.createdAfter);
-      if (filters?.createdBefore) searchParams.append('createdBefore', filters.createdBefore);
-      if (filters?.lastReadAfter) searchParams.append('lastReadAfter', filters.lastReadAfter);
-      if (filters?.lastReadBefore) searchParams.append('lastReadBefore', filters.lastReadBefore);
-      if (filters?.minRating !== undefined) searchParams.append('minRating', filters.minRating.toString());
-      if (filters?.maxRating !== undefined) searchParams.append('maxRating', filters.maxRating.toString());
-      if (filters?.unratedOnly !== undefined) searchParams.append('unratedOnly', filters.unratedOnly.toString());
-      if (filters?.readingStatus) searchParams.append('readingStatus', filters.readingStatus);
-      if (filters?.hasReadingProgress !== undefined) searchParams.append('hasReadingProgress', filters.hasReadingProgress.toString());
-      if (filters?.hasCoverImage !== undefined) searchParams.append('hasCoverImage', filters.hasCoverImage.toString());
-      if (filters?.sourceDomain) searchParams.append('sourceDomain', filters.sourceDomain);
-      if (filters?.seriesFilter) searchParams.append('seriesFilter', filters.seriesFilter);
-      if (filters?.minTagCount !== undefined) searchParams.append('minTagCount', filters.minTagCount.toString());
-      if (filters?.popularOnly !== undefined) searchParams.append('popularOnly', filters.popularOnly.toString());
-      if (filters?.hiddenGemsOnly !== undefined) searchParams.append('hiddenGemsOnly', filters.hiddenGemsOnly.toString());
+      return searchResult.results && searchResult.results.length > 0
+        ? searchResult.results[0]
+        : null;
 
-      const response = await api.get(`/stories/random?${searchParams.toString()}`);
-      return response.data;
     } catch (error: any) {
-      if (error.response?.status === 204) {
+      if (error.response?.status === 404 || error.response?.status === 204) {
         // No content - no stories match filters
         return null;
       }
-      throw error;
+
+      // If random sorting fails, fallback to client-side approach
+      console.warn('Solr random sorting failed, falling back to client-side selection:', error.message);
+
+      try {
+        // Fallback: get larger sample and pick randomly client-side
+        const fallbackResult = await searchApi.search({
+          query: filters?.searchQuery || '*:*',
+          page: 0,
+          size: 200, // Large enough sample for good randomness
+          authors: [],
+          tags: filters?.tags || [],
+          minRating: filters?.minRating,
+          maxRating: filters?.maxRating,
+          sortBy: 'createdAt',
+          sortDir: 'desc',
+
+          // Same advanced filters
+          minWordCount: filters?.minWordCount,
+          maxWordCount: filters?.maxWordCount,
+          createdAfter: filters?.createdAfter,
+          createdBefore: filters?.createdBefore,
+          lastReadAfter: filters?.lastReadAfter,
+          lastReadBefore: filters?.lastReadBefore,
+          unratedOnly: filters?.unratedOnly,
+          readingStatus: filters?.readingStatus,
+          hasReadingProgress: filters?.hasReadingProgress,
+          hasCoverImage: filters?.hasCoverImage,
+          sourceDomain: filters?.sourceDomain,
+          seriesFilter: filters?.seriesFilter,
+          minTagCount: filters?.minTagCount,
+          popularOnly: filters?.popularOnly,
+          hiddenGemsOnly: filters?.hiddenGemsOnly,
+        });
+
+        if (fallbackResult.results && fallbackResult.results.length > 0) {
+          const randomIndex = Math.floor(Math.random() * fallbackResult.results.length);
+          return fallbackResult.results[randomIndex];
+        }
+
+        return null;
+      } catch (fallbackError: any) {
+        throw fallbackError;
+      }
     }
   },
 };
@@ -305,12 +344,12 @@ export const authorApi = {
     await api.delete(`/authors/${id}/avatar`);
   },
 
-  searchAuthorsTypesense: async (params?: {
-    q?: string;
+  searchAuthors: async (params: {
+    query?: string;
     page?: number;
     size?: number;
     sortBy?: string;
-    sortOrder?: string;
+    sortDir?: string;
   }): Promise<{
     results: Author[];
     totalHits: number;
@@ -319,24 +358,19 @@ export const authorApi = {
     query: string;
     searchTimeMs: number;
   }> => {
-    const response = await api.get('/authors/search-typesense', { params });
+    const searchParams = new URLSearchParams();
+
+    // Add query parameter
+    searchParams.append('q', params.query || '*');
+    if (params.page !== undefined) searchParams.append('page', params.page.toString());
+    if (params.size !== undefined) searchParams.append('size', params.size.toString());
+    if (params.sortBy) searchParams.append('sortBy', params.sortBy);
+    if (params.sortDir) searchParams.append('sortOrder', params.sortDir);
+
+    const response = await api.get(`/authors/search-typesense?${searchParams.toString()}`);
     return response.data;
   },
 
-  reindexTypesense: async (): Promise<{ success: boolean; message: string; count?: number; error?: string }> => {
-    const response = await api.post('/authors/reindex-typesense');
-    return response.data;
-  },
-  
-  recreateTypesenseCollection: async (): Promise<{ success: boolean; message: string; count?: number; error?: string }> => {
-    const response = await api.post('/authors/recreate-typesense-collection');
-    return response.data;
-  },
-  
-  getTypesenseSchema: async (): Promise<{ success: boolean; schema?: any; error?: string }> => {
-    const response = await api.get('/authors/typesense-schema');
-    return response.data;
-  },
 };
 
 // Tag endpoints
@@ -577,6 +611,144 @@ export const configApi = {
     const response = await api.get('/config/html-sanitization');
     return response.data;
   },
+
+  previewImageCleanup: async (): Promise<{
+    success: boolean;
+    orphanedCount: number;
+    totalSizeBytes: number;
+    formattedSize: string;
+    foldersToDelete: number;
+    referencedImagesCount: number;
+    errors: string[];
+    hasErrors: boolean;
+    dryRun: boolean;
+    error?: string;
+    orphanedFiles?: Array<{
+      filePath: string;
+      fileName: string;
+      fileSize: number;
+      formattedSize: string;
+      storyId: string;
+      storyTitle: string | null;
+      storyExists: boolean;
+      canAccessStory: boolean;
+      error?: string;
+    }>;
+  }> => {
+    const response = await api.post('/config/cleanup/images/preview');
+    return response.data;
+  },
+
+  executeImageCleanup: async (): Promise<{
+    success: boolean;
+    deletedCount: number;
+    totalSizeBytes: number;
+    formattedSize: string;
+    foldersDeleted: number;
+    referencedImagesCount: number;
+    errors: string[];
+    hasErrors: boolean;
+    dryRun: boolean;
+    error?: string;
+  }> => {
+    const response = await api.post('/config/cleanup/images/execute');
+    return response.data;
+  },
+};
+
+// Search Engine Management API
+export const searchAdminApi = {
+  // Get migration status
+  getStatus: async (): Promise<{
+    primaryEngine: string;
+    dualWrite: boolean;
+    solrAvailable: boolean;
+  }> => {
+    const response = await api.get('/admin/search/status');
+    return response.data;
+  },
+
+  // Configure search engine
+  configure: async (config: { engine: string; dualWrite: boolean }): Promise<{ message: string }> => {
+    const response = await api.post('/admin/search/configure', config);
+    return response.data;
+  },
+
+  // Enable/disable dual-write
+  enableDualWrite: async (): Promise<{ message: string }> => {
+    const response = await api.post('/admin/search/dual-write/enable');
+    return response.data;
+  },
+
+  disableDualWrite: async (): Promise<{ message: string }> => {
+    const response = await api.post('/admin/search/dual-write/disable');
+    return response.data;
+  },
+
+  // Switch engines
+  switchToSolr: async (): Promise<{ message: string }> => {
+    const response = await api.post('/admin/search/switch/solr');
+    return response.data;
+  },
+
+
+  // Emergency rollback
+  emergencyRollback: async (): Promise<{ message: string }> => {
+    const response = await api.post('/admin/search/emergency-rollback');
+    return response.data;
+  },
+
+  // Solr operations
+  reindexSolr: async (): Promise<{
+    success: boolean;
+    message: string;
+    storiesCount?: number;
+    authorsCount?: number;
+    totalCount?: number;
+    error?: string;
+  }> => {
+    const response = await api.post('/admin/search/solr/reindex');
+    return response.data;
+  },
+
+  recreateSolrIndices: async (): Promise<{
+    success: boolean;
+    message: string;
+    storiesCount?: number;
+    authorsCount?: number;
+    totalCount?: number;
+    error?: string;
+  }> => {
+    const response = await api.post('/admin/search/solr/recreate');
+    return response.data;
+  },
+
+  // Add libraryId field to schema
+  addLibraryField: async (): Promise<{
+    success: boolean;
+    message: string;
+    error?: string;
+    details?: string;
+    note?: string;
+  }> => {
+    const response = await api.post('/admin/search/solr/add-library-field');
+    return response.data;
+  },
+
+  // Migrate to library-aware schema
+  migrateLibrarySchema: async (): Promise<{
+    success: boolean;
+    message: string;
+    storiesCount?: number;
+    authorsCount?: number;
+    totalCount?: number;
+    error?: string;
+    details?: string;
+    note?: string;
+  }> => {
+    const response = await api.post('/admin/search/solr/migrate-library-schema');
+    return response.data;
+  },
 };
 
 // Collection endpoints

frontend/src/lib/debug.ts

@@ -0,0 +1,90 @@
+/**
+ * Debug logging utility
+ * Allows conditional logging based on environment or debug flags
+ */
+
+// Check if we're in development mode or debug is explicitly enabled
+const isDebugEnabled = (): boolean => {
+  if (typeof window === 'undefined') {
+    // Server-side: check NODE_ENV
+    return process.env.NODE_ENV === 'development' || process.env.DEBUG === 'true';
+  }
+
+  // Client-side: check localStorage flag or development mode
+  try {
+    return (
+      process.env.NODE_ENV === 'development' ||
+      localStorage.getItem('debug') === 'true' ||
+      window.location.search.includes('debug=true')
+    );
+  } catch {
+    return process.env.NODE_ENV === 'development';
+  }
+};
+
+/**
+ * Debug logger that only outputs in development or when debug is enabled
+ */
+export const debug = {
+  log: (...args: any[]) => {
+    if (isDebugEnabled()) {
+      console.log('[DEBUG]', ...args);
+    }
+  },
+
+  warn: (...args: any[]) => {
+    if (isDebugEnabled()) {
+      console.warn('[DEBUG]', ...args);
+    }
+  },
+
+  error: (...args: any[]) => {
+    if (isDebugEnabled()) {
+      console.error('[DEBUG]', ...args);
+    }
+  },
+
+  group: (label: string) => {
+    if (isDebugEnabled()) {
+      console.group(`[DEBUG] ${label}`);
+    }
+  },
+
+  groupEnd: () => {
+    if (isDebugEnabled()) {
+      console.groupEnd();
+    }
+  },
+
+  time: (label: string) => {
+    if (isDebugEnabled()) {
+      console.time(`[DEBUG] ${label}`);
+    }
+  },
+
+  timeEnd: (label: string) => {
+    if (isDebugEnabled()) {
+      console.timeEnd(`[DEBUG] ${label}`);
+    }
+  }
+};
+
+/**
+ * Enable debug mode (persists in localStorage)
+ */
+export const enableDebug = () => {
+  if (typeof window !== 'undefined') {
+    localStorage.setItem('debug', 'true');
+    console.log('Debug mode enabled. Reload page to see debug output.');
+  }
+};
+
+/**
+ * Disable debug mode
+ */
+export const disableDebug = () => {
+  if (typeof window !== 'undefined') {
+    localStorage.removeItem('debug');
+    console.log('Debug mode disabled. Reload page to hide debug output.');
+  }
+};

frontend/src/lib/progress.ts

@@ -0,0 +1,32 @@
+/**
+ * Progress tracking utilities for bulk operations
+ */
+
+export interface ProgressUpdate {
+  type: 'progress' | 'completed' | 'error';
+  current: number;
+  total: number;
+  message: string;
+  url?: string;
+  title?: string;
+  author?: string;
+  wordCount?: number;
+  totalWordCount?: number;
+  error?: string;
+  combinedStory?: any;
+  results?: any[];
+  summary?: any;
+  hasImages?: boolean;
+  imageWarnings?: string[];
+}
+
+// Global progress storage (in production, use Redis or database)
+export const progressStore = new Map<string, ProgressUpdate[]>();
+
+// Helper function for other routes to send progress updates
+export function sendProgressUpdate(sessionId: string, update: ProgressUpdate) {
+  if (!progressStore.has(sessionId)) {
+    progressStore.set(sessionId, []);
+  }
+  progressStore.get(sessionId)!.push(update);
+}

frontend/src/lib/sanitization.ts

@@ -1,5 +1,6 @@
 import DOMPurify from 'dompurify';
 import { configApi } from './api';
+import { debug } from './debug';
 
 interface SanitizationConfig {
   allowedTags: string[];
@@ -28,7 +29,7 @@ function filterCssProperties(styleValue: string, allowedProperties: string[]): s
     const isAllowed = allowedProperties.includes(property);
     
     if (!isAllowed) {
-      console.log(`CSS property "${property}" was filtered out (not in allowed list)`);
+      debug.log(`CSS property "${property}" was filtered out (not in allowed list)`);
     }
     
     return isAllowed;
@@ -37,9 +38,9 @@ function filterCssProperties(styleValue: string, allowedProperties: string[]): s
   const result = filteredDeclarations.join('; ');
   
   if (declarations.length !== filteredDeclarations.length) {
-    console.log(`CSS filtering: ${declarations.length} -> ${filteredDeclarations.length} properties`);
-    console.log('Original:', styleValue);
-    console.log('Filtered:', result);
+    debug.log(`CSS filtering: ${declarations.length} -> ${filteredDeclarations.length} properties`);
+    debug.log('Original:', styleValue);
+    debug.log('Filtered:', result);
   }
   
   return result;
@@ -152,7 +153,8 @@ function createDOMPurifyConfig(config: SanitizationConfig) {
   const domPurifyConfig: DOMPurify.Config = {
     ALLOWED_TAGS: allowedTags,
     ALLOWED_ATTR: uniqueAttributes,
-    ALLOWED_URI_REGEXP: /^(?:(?:https?|#|\/):?\/?)[\w.\-#/?=&%]+$/i,
+    // More permissive URL regex to allow complex query strings and tokens
+    ALLOWED_URI_REGEXP: /^(?:(?:https?|data|#|\/):)?[\s\S]*$/i,
     ALLOW_UNKNOWN_PROTOCOLS: false,
     SANITIZE_DOM: true,
     KEEP_CONTENT: true,
@@ -179,6 +181,75 @@ function createDOMPurifyConfig(config: SanitizationConfig) {
   return domPurifyConfig;
 }
 
+/**
+ * Preprocess HTML to extract images from figure tags before sanitization
+ */
+function preprocessFigureTags(html: string): string {
+  if (!html || html.trim() === '') {
+    return html;
+  }
+
+  try {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+    const figures = doc.querySelectorAll('figure');
+
+    figures.forEach((figure) => {
+      // Find img tags anywhere within the figure (deep search)
+      const images = figure.querySelectorAll('img');
+
+      if (images.length > 0) {
+        // Extract the first image
+        const img = images[0];
+
+        // Get the src attribute - it might be in the src attribute or data-src
+        const imgSrc = img.getAttribute('src') || img.getAttribute('data-src') || img.src || '';
+
+        if (!imgSrc || imgSrc.trim() === '') {
+          figure.remove();
+          return;
+        }
+
+        // Create a clean img element with just the essential attributes
+        const cleanImg = doc.createElement('img');
+        cleanImg.setAttribute('src', imgSrc);
+
+        // Preserve alt text
+        const existingAlt = img.getAttribute('alt') || img.alt;
+        if (existingAlt) {
+          cleanImg.setAttribute('alt', existingAlt);
+        } else {
+          // Check if there's a figcaption to use as alt text
+          const figcaption = figure.querySelector('figcaption');
+          if (figcaption) {
+            const captionText = figcaption.textContent?.trim();
+            if (captionText) {
+              cleanImg.setAttribute('alt', captionText);
+            }
+          }
+        }
+
+        // Preserve other useful attributes if they exist
+        const width = img.getAttribute('width') || img.width;
+        const height = img.getAttribute('height') || img.height;
+        if (width) cleanImg.setAttribute('width', width.toString());
+        if (height) cleanImg.setAttribute('height', height.toString());
+
+        // Replace the figure element with just the clean img
+        figure.replaceWith(cleanImg);
+      } else {
+        // No images in figure, remove it entirely
+        figure.remove();
+      }
+    });
+
+    return doc.body.innerHTML;
+  } catch (error) {
+    console.warn('Failed to preprocess figure tags, returning original HTML:', error);
+    return html;
+  }
+}
+
 /**
  * Sanitize HTML content using shared configuration from backend
  */
@@ -188,11 +259,14 @@ export async function sanitizeHtml(html: string): Promise<string> {
   }
 
   try {
+    // Preprocess to extract images from figure tags
+    const preprocessed = preprocessFigureTags(html);
+
     const config = await fetchSanitizationConfig();
     const domPurifyConfig = createDOMPurifyConfig(config);
 
     // Configure DOMPurify with our settings
-    const cleanHtml = DOMPurify.sanitize(html, domPurifyConfig as any);
+    const cleanHtml = DOMPurify.sanitize(preprocessed, domPurifyConfig as any);
 
     return cleanHtml.toString();
   } catch (error) {
@@ -211,15 +285,18 @@ export function sanitizeHtmlSync(html: string): string {
     return '';
   }
 
+  // Preprocess to extract images from figure tags
+  const preprocessed = preprocessFigureTags(html);
+
   // If we have cached config, use it
   if (cachedConfig) {
     const domPurifyConfig = createDOMPurifyConfig(cachedConfig);
-    return DOMPurify.sanitize(html, domPurifyConfig as any).toString();
+    return DOMPurify.sanitize(preprocessed, domPurifyConfig as any).toString();
   }
 
   // If we don't have cached config but there's an ongoing request, wait for it
   if (configPromise) {
-    console.log('Sanitization config loading in progress, using fallback for now');
+    debug.log('Sanitization config loading in progress, using fallback for now');
   } else {
     // No config and no ongoing request - try to load it for next time
     console.warn('No cached sanitization config available, triggering load for future use');
@@ -229,7 +306,7 @@ export function sanitizeHtmlSync(html: string): string {
   }
 
   // Use comprehensive fallback configuration that preserves formatting
-  console.log('Using fallback sanitization configuration with formatting support');
+  debug.log('Using fallback sanitization configuration with formatting support');
   const fallbackAllowedCssProperties = [
     'color', 'font-size', 'font-weight', 
     'font-style', 'text-align', 'text-decoration', 'margin', 
@@ -246,8 +323,10 @@ export function sanitizeHtmlSync(html: string): string {
       'blockquote', 'cite', 'q', 'hr', 'details', 'summary'
     ],
     ALLOWED_ATTR: [
-      'class', 'style', 'colspan', 'rowspan', 'src', 'alt', 'width', 'height'
+      'class', 'style', 'colspan', 'rowspan', 'src', 'alt', 'width', 'height', 'href', 'title'
     ],
+    // More permissive URL regex to allow complex query strings and tokens
+    ALLOWED_URI_REGEXP: /^(?:(?:https?|data|#|\/):)?[\s\S]*$/i,
     ALLOW_UNKNOWN_PROTOCOLS: false,
     SANITIZE_DOM: true,
     KEEP_CONTENT: true,
@@ -270,7 +349,7 @@ export function sanitizeHtmlSync(html: string): string {
     }
   });
 
-  return DOMPurify.sanitize(html, fallbackConfig as any).toString();
+  return DOMPurify.sanitize(preprocessed, fallbackConfig as any).toString();
 }
 
 /**

frontend/src/lib/scraper/strategies/contentCleaner.ts

@@ -129,8 +129,7 @@ export async function cleanHtml(html: string): Promise<string> {
   const cheerio = await import('cheerio');
   const $ = cheerio.load(html, {
     // Preserve self-closing tags like <br>
-    xmlMode: false,
-    decodeEntities: false
+    xmlMode: false
   });
   
   // Remove dangerous elements

frontend/src/lib/scraper/strategies/textExtractor.ts

@@ -182,7 +182,7 @@ export function extractLinkText(
   $: cheerio.CheerioAPI,
   config: LinkTextStrategy
 ): string {
-  let searchScope: cheerio.Cheerio<cheerio.AnyNode>;
+  let searchScope: any;
   
   if (config.searchWithin) {
     searchScope = $(config.searchWithin);
@@ -196,7 +196,7 @@ export function extractLinkText(
   config.nearText.forEach(text => {
     if (foundText) return; // Already found
     
-    searchScope.find('*').each((_, elem) => {
+    searchScope.find('*').each((_: any, elem: any) => {
       const $elem = $(elem);
       const elemText = $elem.text().toLowerCase();
       

frontend/src/utils/imageProcessingProgress.ts

@@ -0,0 +1,246 @@
+/**
+ * Utility for tracking image processing progress
+ *
+ * Usage example:
+ *
+ * // After saving a story, start polling for progress
+ * const progressTracker = new ImageProcessingProgressTracker(storyId);
+ *
+ * progressTracker.onProgress((progress) => {
+ *   console.log(`Processing ${progress.processedImages}/${progress.totalImages} images`);
+ *   console.log(`Current: ${progress.currentImageUrl}`);
+ *   console.log(`Status: ${progress.status}`);
+ * });
+ *
+ * progressTracker.onComplete((finalProgress) => {
+ *   console.log('Image processing completed!');
+ * });
+ *
+ * progressTracker.onError((error) => {
+ *   console.error('Image processing failed:', error);
+ * });
+ *
+ * progressTracker.start();
+ */
+
+export interface ImageProcessingProgress {
+  isProcessing: boolean;
+  totalImages: number;
+  processedImages: number;
+  currentImageUrl: string;
+  status: string;
+  progressPercentage: number;
+  completed: boolean;
+  error: string;
+  message?: string;
+}
+
+export type ProgressCallback = (progress: ImageProcessingProgress) => void;
+export type CompleteCallback = (finalProgress: ImageProcessingProgress) => void;
+export type ErrorCallback = (error: string) => void;
+
+export class ImageProcessingProgressTracker {
+  private storyId: string;
+  private pollInterval: number;
+  private timeoutMs: number;
+  private isPolling: boolean = false;
+  private pollTimer: NodeJS.Timeout | null = null;
+  private startTime: number = 0;
+
+  private progressCallbacks: ProgressCallback[] = [];
+  private completeCallbacks: CompleteCallback[] = [];
+  private errorCallbacks: ErrorCallback[] = [];
+
+  constructor(
+    storyId: string,
+    pollInterval: number = 1000, // Poll every 1 second
+    timeoutMs: number = 300000    // 5 minute timeout
+  ) {
+    this.storyId = storyId;
+    this.pollInterval = pollInterval;
+    this.timeoutMs = timeoutMs;
+  }
+
+  public onProgress(callback: ProgressCallback): void {
+    this.progressCallbacks.push(callback);
+  }
+
+  public onComplete(callback: CompleteCallback): void {
+    this.completeCallbacks.push(callback);
+  }
+
+  public onError(callback: ErrorCallback): void {
+    this.errorCallbacks.push(callback);
+  }
+
+  public async start(): Promise<void> {
+    if (this.isPolling) {
+      console.warn('Progress tracking already started');
+      return;
+    }
+
+    this.isPolling = true;
+    this.startTime = Date.now();
+
+    console.log(`Starting image processing progress tracking for story ${this.storyId}`);
+    this.poll();
+  }
+
+  public stop(): void {
+    this.isPolling = false;
+    if (this.pollTimer) {
+      clearTimeout(this.pollTimer);
+      this.pollTimer = null;
+    }
+    console.log(`Stopped progress tracking for story ${this.storyId}`);
+  }
+
+  private async poll(): Promise<void> {
+    if (!this.isPolling) {
+      return;
+    }
+
+    // Check for timeout
+    const elapsed = Date.now() - this.startTime;
+    if (elapsed > this.timeoutMs) {
+      this.handleError('Image processing timed out');
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/stories/${this.storyId}/image-processing-progress`);
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const progress: ImageProcessingProgress = await response.json();
+
+      // Call progress callbacks
+      this.progressCallbacks.forEach(callback => {
+        try {
+          callback(progress);
+        } catch (error) {
+          console.error('Error in progress callback:', error);
+        }
+      });
+
+      // Check if processing is complete
+      if (progress.completed) {
+        this.handleComplete(progress);
+        return;
+      }
+
+      // Check for errors
+      if (progress.error) {
+        this.handleError(progress.error);
+        return;
+      }
+
+      // Continue polling if still processing
+      if (progress.isProcessing) {
+        this.pollTimer = setTimeout(() => this.poll(), this.pollInterval);
+      } else {
+        // No active processing - might have finished or never started
+        this.handleComplete(progress);
+      }
+
+    } catch (error) {
+      this.handleError(`Failed to fetch progress: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+  }
+
+  private handleComplete(finalProgress: ImageProcessingProgress): void {
+    this.stop();
+    console.log(`Image processing completed for story ${this.storyId}`);
+
+    this.completeCallbacks.forEach(callback => {
+      try {
+        callback(finalProgress);
+      } catch (error) {
+        console.error('Error in complete callback:', error);
+      }
+    });
+  }
+
+  private handleError(error: string): void {
+    this.stop();
+    console.error(`Image processing error for story ${this.storyId}:`, error);
+
+    this.errorCallbacks.forEach(callback => {
+      try {
+        callback(error);
+      } catch (error) {
+        console.error('Error in error callback:', error);
+      }
+    });
+  }
+}
+
+/**
+ * React hook for image processing progress
+ *
+ * Note: This hook requires React to be imported in the file where it's used.
+ * To use this hook, import React in your component file:
+ *
+ * import React from 'react';
+ * import { useImageProcessingProgress } from '../utils/imageProcessingProgress';
+ *
+ * Usage:
+ * const { progress, isTracking, startTracking } = useImageProcessingProgress(storyId);
+ */
+import React from 'react';
+
+export function useImageProcessingProgress(storyId: string) {
+  const [progress, setProgress] = React.useState<ImageProcessingProgress | null>(null);
+  const [isTracking, setIsTracking] = React.useState(false);
+  const [tracker, setTracker] = React.useState<ImageProcessingProgressTracker | null>(null);
+
+  const startTracking = React.useCallback(() => {
+    if (tracker) {
+      tracker.stop();
+    }
+
+    const newTracker = new ImageProcessingProgressTracker(storyId);
+
+    newTracker.onProgress((progress) => {
+      setProgress(progress);
+    });
+
+    newTracker.onComplete((finalProgress) => {
+      setProgress(finalProgress);
+      setIsTracking(false);
+    });
+
+    newTracker.onError((error) => {
+      console.error('Image processing error:', error);
+      setIsTracking(false);
+    });
+
+    setTracker(newTracker);
+    setIsTracking(true);
+    newTracker.start();
+  }, [storyId, tracker]);
+
+  const stopTracking = React.useCallback(() => {
+    if (tracker) {
+      tracker.stop();
+      setIsTracking(false);
+    }
+  }, [tracker]);
+
+  React.useEffect(() => {
+    return () => {
+      if (tracker) {
+        tracker.stop();
+      }
+    };
+  }, [tracker]);
+
+  return {
+    progress,
+    isTracking,
+    startTracking,
+    stopTracking
+  };
+}

nginx.conf

@@ -13,7 +13,7 @@ http {
 
     server {
         listen 80;
-        client_max_body_size 256M;
+        client_max_body_size 600M;
 
         # Frontend routes
         location / {
@@ -55,6 +55,10 @@ http {
             proxy_connect_timeout 900s;
             proxy_send_timeout 900s;
             proxy_read_timeout 900s;
+            # Large upload settings
+            client_max_body_size 600M;
+            proxy_request_buffering off;
+            proxy_max_temp_file_size 0;
         }
 
         # Static image serving

opensearch.Dockerfile

@@ -0,0 +1,94 @@
+# Custom OpenSearch Dockerfile with Java 21 for compatibility
+FROM amazoncorretto:21-alpine AS java-base
+
+# Download and extract OpenSearch
+FROM java-base AS opensearch-builder
+WORKDIR /tmp
+RUN apk add --no-cache curl tar && \
+    curl -L https://artifacts.opensearch.org/releases/bundle/opensearch/3.2.0/opensearch-3.2.0-linux-x64.tar.gz | \
+    tar -xz && \
+    mv opensearch-3.2.0 /usr/share/opensearch
+
+# Final runtime image
+FROM java-base
+WORKDIR /usr/share/opensearch
+
+# Create opensearch user
+RUN addgroup -g 1000 opensearch && \
+    adduser -u 1000 -G opensearch -s /bin/sh -D opensearch
+
+# Copy OpenSearch from builder stage
+COPY --from=opensearch-builder --chown=opensearch:opensearch /usr/share/opensearch /usr/share/opensearch
+
+# Install necessary packages
+RUN apk add --no-cache bash curl
+
+# Debug: Check Java installation and set correct paths
+RUN which java && java -version && \
+    ls -la /usr/lib/jvm/ && \
+    ln -sf /usr/lib/jvm/java-21-amazon-corretto /usr/lib/jvm/default-jvm
+
+# Set environment variables
+ENV JAVA_HOME=/usr/lib/jvm/java-21-amazon-corretto
+ENV OPENSEARCH_JAVA_HOME=/usr/lib/jvm/java-21-amazon-corretto
+ENV PATH=$PATH:$JAVA_HOME/bin
+
+# Create required directories and disable security plugin
+RUN mkdir -p /usr/share/opensearch/data && \
+    mkdir -p /usr/share/opensearch/logs && \
+    echo "plugins.security.disabled: true" >> /usr/share/opensearch/config/opensearch.yml && \
+    echo "discovery.type: single-node" >> /usr/share/opensearch/config/opensearch.yml && \
+    echo "cluster.name: storycove-opensearch" >> /usr/share/opensearch/config/opensearch.yml && \
+    echo "node.name: opensearch-node" >> /usr/share/opensearch/config/opensearch.yml && \
+    echo "bootstrap.memory_lock: false" >> /usr/share/opensearch/config/opensearch.yml && \
+    echo "network.host: 0.0.0.0" >> /usr/share/opensearch/config/opensearch.yml && \
+    echo "logger.level: DEBUG" >> /usr/share/opensearch/config/opensearch.yml && \
+    echo "node.processors: 1" >> /usr/share/opensearch/config/opensearch.yml && \
+    rm -rf /usr/share/opensearch/plugins/opensearch-performance-analyzer && \
+    rm -rf /usr/share/opensearch/agent && \
+    echo "# Custom JVM options for Synology NAS compatibility" > /usr/share/opensearch/config/jvm.options.d/synology.options && \
+    echo "-Dlucene.useVectorAPI=false" >> /usr/share/opensearch/config/jvm.options.d/synology.options && \
+    echo "-Dorg.apache.lucene.store.MMapDirectory.enableMemorySegments=false" >> /usr/share/opensearch/config/jvm.options.d/synology.options && \
+    echo "-Djava.awt.headless=true" >> /usr/share/opensearch/config/jvm.options.d/synology.options && \
+    echo "-XX:+UseContainerSupport" >> /usr/share/opensearch/config/jvm.options.d/synology.options && \
+    echo "-Dorg.opensearch.bootstrap.start_timeout=300s" >> /usr/share/opensearch/config/jvm.options.d/synology.options && \
+    echo "-Dopensearch.logger.level=INFO" >> /usr/share/opensearch/config/jvm.options.d/synology.options && \
+    echo "--add-opens=jdk.unsupported/sun.misc=ALL-UNNAMED" >> /usr/share/opensearch/config/jvm.options.d/synology.options && \
+    echo "--add-opens=java.base/java.util=ALL-UNNAMED" >> /usr/share/opensearch/config/jvm.options.d/synology.options && \
+    echo "--add-opens=java.base/java.lang=ALL-UNNAMED" >> /usr/share/opensearch/config/jvm.options.d/synology.options && \
+    echo "--add-modules=jdk.unsupported" >> /usr/share/opensearch/config/jvm.options.d/synology.options && \
+    echo "-XX:+UnlockExperimentalVMOptions" >> /usr/share/opensearch/config/jvm.options.d/synology.options && \
+    echo "-XX:-UseVectorApi" >> /usr/share/opensearch/config/jvm.options.d/synology.options && \
+    echo "-Djdk.incubator.vector.VECTOR_ACCESS_OOB_CHECK=0" >> /usr/share/opensearch/config/jvm.options.d/synology.options && \
+    sed -i '/javaagent/d' /usr/share/opensearch/config/jvm.options && \
+    echo '#!/bin/bash' > /usr/share/opensearch/start-opensearch.sh && \
+    echo 'echo "Starting OpenSearch with Java 21..."' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'echo "Java version:"' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'java -version' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'echo "Memory info:"' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'free -h 2>/dev/null || echo "Memory info not available"' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'echo "Starting OpenSearch process..."' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'echo "Architecture info:"' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'uname -a' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'echo "CPU info:"' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'grep -E "^(processor|model name|flags)" /proc/cpuinfo | head -10 || echo "CPU info not available"' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'echo "Using JVM options file: /usr/share/opensearch/config/jvm.options.d/synology.options"' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'cat /usr/share/opensearch/config/jvm.options.d/synology.options' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'echo "Environment OPENSEARCH_JAVA_OPTS: $OPENSEARCH_JAVA_OPTS"' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'echo "Attempting to force disable vector operations..."' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'export OPENSEARCH_JAVA_OPTS="$OPENSEARCH_JAVA_OPTS -Dlucene.useVectorAPI=false -Dorg.apache.lucene.store.MMapDirectory.enableMemorySegments=false --limit-modules=java.base,java.logging,java.xml,java.management,java.naming,java.desktop,java.security.jgss,jdk.unsupported"' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'echo "Final OPENSEARCH_JAVA_OPTS: $OPENSEARCH_JAVA_OPTS"' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'echo "Starting OpenSearch binary..."' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'timeout 300s /usr/share/opensearch/bin/opensearch &' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'OPENSEARCH_PID=$!' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'echo "OpenSearch started with PID: $OPENSEARCH_PID"' >> /usr/share/opensearch/start-opensearch.sh && \
+    echo 'wait $OPENSEARCH_PID' >> /usr/share/opensearch/start-opensearch.sh && \
+    chmod +x /usr/share/opensearch/start-opensearch.sh && \
+    chown -R opensearch:opensearch /usr/share/opensearch
+
+USER opensearch
+
+EXPOSE 9200 9300
+
+# Use startup script for better debugging
+ENTRYPOINT ["/usr/share/opensearch/start-opensearch.sh"]

solr.Dockerfile

@@ -0,0 +1,31 @@
+FROM solr:9.9.0
+
+# Switch to root to set up configuration
+USER root
+
+# Copy Solr configurations into the image
+COPY ./solr/stories /opt/solr-9.9.0/server/solr/configsets/storycove_stories
+COPY ./solr/authors /opt/solr-9.9.0/server/solr/configsets/storycove_authors
+
+# Create initialization script using the precreate-core pattern
+COPY <<EOF /docker-entrypoint-initdb.d/init-cores.sh
+#!/bin/bash
+echo "StoryCove: Initializing cores..."
+
+# Use solr's built-in precreate-core functionality
+precreate-core storycove_stories /opt/solr-9.9.0/server/solr/configsets/storycove_stories
+precreate-core storycove_authors /opt/solr-9.9.0/server/solr/configsets/storycove_authors
+
+echo "StoryCove: Core initialization complete!"
+EOF
+
+# Ensure proper permissions and make script executable
+RUN chown -R solr:solr /opt/solr-9.9.0/server/solr/configsets/ && \
+    chmod +x /docker-entrypoint-initdb.d/init-cores.sh && \
+    chown solr:solr /docker-entrypoint-initdb.d/init-cores.sh
+
+# Switch back to solr user
+USER solr
+
+# Use the default Solr entrypoint
+CMD ["solr-foreground"]

solr/authors/conf/managed-schema

@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--
+ Solr Schema for StoryCove Authors Core
+ Based on AuthorSearchDto data model
+-->
+<schema name="storycove-authors" version="1.6">
+
+  <!-- Field Types -->
+
+  <!-- String field type for exact matching -->
+  <fieldType name="string" class="solr.StrField" sortMissingLast="true" />
+
+  <!-- Text field type for full-text search -->
+  <fieldType name="text_general" class="solr.TextField" positionIncrementGap="100">
+    <analyzer type="index">
+      <tokenizer class="solr.StandardTokenizerFactory"/>
+      <filter class="solr.StopFilterFactory" ignoreCase="true" words="stopwords.txt" />
+      <filter class="solr.LowerCaseFilterFactory"/>
+    </analyzer>
+    <analyzer type="query">
+      <tokenizer class="solr.StandardTokenizerFactory"/>
+      <filter class="solr.StopFilterFactory" ignoreCase="true" words="stopwords.txt" />
+      <filter class="solr.SynonymGraphFilterFactory" synonyms="synonyms.txt" ignoreCase="true" expand="true"/>
+      <filter class="solr.LowerCaseFilterFactory"/>
+    </analyzer>
+  </fieldType>
+
+  <!-- Enhanced text field for names -->
+  <fieldType name="text_enhanced" class="solr.TextField" positionIncrementGap="100">
+    <analyzer type="index">
+      <tokenizer class="solr.StandardTokenizerFactory"/>
+      <filter class="solr.StopFilterFactory" ignoreCase="true" words="stopwords.txt" />
+      <filter class="solr.LowerCaseFilterFactory"/>
+      <filter class="solr.EdgeNGramFilterFactory" minGramSize="2" maxGramSize="15"/>
+    </analyzer>
+    <analyzer type="query">
+      <tokenizer class="solr.StandardTokenizerFactory"/>
+      <filter class="solr.StopFilterFactory" ignoreCase="true" words="stopwords.txt" />
+      <filter class="solr.LowerCaseFilterFactory"/>
+    </analyzer>
+  </fieldType>
+
+  <!-- Integer field type -->
+  <fieldType name="pint" class="solr.IntPointField" docValues="true"/>
+
+  <!-- Long field type -->
+  <fieldType name="plong" class="solr.LongPointField" docValues="true"/>
+
+  <!-- Double field type -->
+  <fieldType name="pdouble" class="solr.DoublePointField" docValues="true"/>
+
+  <!-- Date field type -->
+  <fieldType name="pdate" class="solr.DatePointField" docValues="true"/>
+
+  <!-- Multi-valued string for URLs -->
+  <fieldType name="strings" class="solr.StrField" sortMissingLast="true" multiValued="true"/>
+
+  <!-- Random sort field type for random ordering -->
+  <fieldType name="random" class="solr.RandomSortField" indexed="true"/>
+
+  <!-- Fields -->
+
+  <!-- Required Fields -->
+  <field name="id" type="string" indexed="true" stored="true" required="true" multiValued="false" />
+  <field name="_version_" type="plong" indexed="false" stored="false"/>
+
+  <!-- Core Author Fields -->
+  <field name="name" type="text_enhanced" indexed="true" stored="true" required="true"/>
+  <field name="notes" type="text_general" indexed="true" stored="true"/>
+  <field name="authorRating" type="pint" indexed="true" stored="true"/>
+  <field name="averageStoryRating" type="pdouble" indexed="true" stored="true"/>
+  <field name="storyCount" type="pint" indexed="true" stored="true"/>
+  <field name="urls" type="strings" indexed="true" stored="true"/>
+  <field name="avatarImagePath" type="string" indexed="false" stored="true"/>
+
+  <!-- Multi-tenant Library Separation -->
+  <field name="libraryId" type="string" indexed="true" stored="true" required="false" default="default"/>
+
+  <!-- Timestamp Fields -->
+  <field name="createdAt" type="pdate" indexed="true" stored="true"/>
+  <field name="updatedAt" type="pdate" indexed="true" stored="true"/>
+
+  <!-- Search-specific Fields -->
+  <field name="searchScore" type="plong" indexed="false" stored="true"/>
+
+  <!-- Combined search field for general queries -->
+  <field name="text" type="text_general" indexed="true" stored="false" multiValued="true"/>
+
+  <!-- Copy Fields for comprehensive search -->
+  <copyField source="name" dest="text"/>
+  <copyField source="notes" dest="text"/>
+  <copyField source="urls" dest="text"/>
+
+  <!-- Default Search Field -->
+
+  <!-- Dynamic Fields -->
+
+  <!-- Random sort dynamic field for generating random orderings -->
+  <dynamicField name="random_*" type="random" indexed="true" stored="false"/>
+
+  <!-- UniqueKey -->
+  <uniqueKey>id</uniqueKey>
+
+</schema>

solr/authors/conf/solrconfig.xml

@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--
+ Solr Configuration for StoryCove Authors Core
+ Optimized for author search with highlighting and faceting
+-->
+<config>
+  <luceneMatchVersion>9.9.0</luceneMatchVersion>
+
+  <!-- DataDir configuration -->
+  <dataDir>${solr.data.dir:}</dataDir>
+
+  <!-- Directory Factory -->
+  <directoryFactory name="DirectoryFactory"
+                    class="${solr.directoryFactory:solr.NRTCachingDirectoryFactory}"/>
+
+  <!-- CodecFactory -->
+  <codecFactory class="solr.SchemaCodecFactory"/>
+
+  <!-- Index Configuration -->
+  <indexConfig>
+    <lockType>${solr.lock.type:native}</lockType>
+    <infoStream>true</infoStream>
+  </indexConfig>
+
+  <!-- JMX Configuration -->
+  <jmx />
+
+  <!-- Update Handler -->
+  <updateHandler class="solr.DirectUpdateHandler2">
+    <updateLog>
+      <str name="dir">${solr.ulog.dir:}</str>
+      <int name="numVersionBuckets">${solr.ulog.numVersionBuckets:65536}</int>
+    </updateLog>
+
+    <autoCommit>
+      <maxTime>15000</maxTime>
+      <openSearcher>false</openSearcher>
+    </autoCommit>
+
+    <autoSoftCommit>
+      <maxTime>1000</maxTime>
+    </autoSoftCommit>
+  </updateHandler>
+
+  <!-- Query Configuration -->
+  <query>
+    <maxBooleanClauses>1024</maxBooleanClauses>
+    <filterCache class="solr.CaffeineCache"
+                 size="512"
+                 initialSize="512"
+                 autowarmCount="0"/>
+    <queryResultCache class="solr.CaffeineCache"
+                     size="512"
+                     initialSize="512"
+                     autowarmCount="0"/>
+    <documentCache class="solr.CaffeineCache"
+                  size="512"
+                  initialSize="512"
+                  autowarmCount="0"/>
+    <enableLazyFieldLoading>true</enableLazyFieldLoading>
+   </query>
+
+  <!-- Request Dispatcher -->
+  <requestDispatcher handleSelect="false" >
+    <requestParsers enableRemoteStreaming="true"
+                    multipartUploadLimitInKB="2048000"
+                    formdataUploadLimitInKB="2048"
+                    addHttpRequestToContext="false"/>
+    <httpCaching never304="true" />
+  </requestDispatcher>
+
+  <!-- Request Handlers -->
+
+  <!-- Standard Select Handler -->
+  <requestHandler name="/select" class="solr.SearchHandler">
+    <lst name="defaults">
+      <str name="echoParams">explicit</str>
+      <int name="rows">10</int>
+      <str name="df">text</str>
+      <str name="wt">json</str>
+      <str name="indent">true</str>
+      <str name="hl">true</str>
+      <str name="hl.fl">name,notes</str>
+      <str name="hl.simple.pre">&lt;em&gt;</str>
+      <str name="hl.simple.post">&lt;/em&gt;</str>
+      <str name="hl.fragsize">150</str>
+      <str name="hl.maxAnalyzedChars">51200</str>
+    </lst>
+  </requestHandler>
+
+  <!-- Update Handler -->
+  <requestHandler name="/update" class="solr.UpdateRequestHandler" />
+
+  <!-- Admin Handlers -->
+  <requestHandler name="/admin/ping" class="solr.PingRequestHandler">
+    <lst name="invariants">
+      <str name="q">*:*</str>
+    </lst>
+    <lst name="defaults">
+      <str name="echoParams">all</str>
+    </lst>
+  </requestHandler>
+
+  <!-- Suggester Handler -->
+  <requestHandler name="/suggest" class="solr.SearchHandler" startup="lazy">
+    <lst name="defaults">
+      <str name="suggest">true</str>
+      <str name="suggest.count">10</str>
+    </lst>
+    <arr name="components">
+      <str>suggest</str>
+    </arr>
+  </requestHandler>
+
+  <!-- Search Components -->
+  <searchComponent name="suggest" class="solr.SuggestComponent">
+    <lst name="suggester">
+      <str name="name">authorSuggester</str>
+      <str name="lookupImpl">AnalyzingInfixLookupFactory</str>
+      <str name="dictionaryImpl">DocumentDictionaryFactory</str>
+      <str name="field">name</str>
+      <str name="weightField">storyCount</str>
+      <str name="suggestAnalyzerFieldType">text_general</str>
+      <str name="buildOnStartup">false</str>
+      <str name="buildOnCommit">false</str>
+    </lst>
+  </searchComponent>
+
+  <!-- Response Writers -->
+  <queryResponseWriter name="json" class="solr.JSONResponseWriter">
+    <str name="content-type">application/json; charset=UTF-8</str>
+  </queryResponseWriter>
+
+</config>

solr/authors/conf/stopwords.txt

@@ -0,0 +1,34 @@
+# English stopwords for author search
+a
+an
+and
+are
+as
+at
+be
+but
+by
+for
+if
+in
+into
+is
+it
+no
+not
+of
+on
+or
+such
+that
+the
+their
+then
+there
+these
+they
+this
+to
+was
+will
+with

solr/authors/conf/synonyms.txt

@@ -0,0 +1,9 @@
+# Synonyms for author search
+# Format: word1,word2,word3 => synonym1,synonym2
+writer,author,novelist
+pen name,pseudonym,alias
+prolific,productive
+acclaimed,famous,renowned
+bestselling,popular
+contemporary,modern
+classic,traditional

solr/stories/conf/managed-schema

@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--
+ Solr Schema for StoryCove Stories Core
+ Based on StorySearchDto data model
+-->
+<schema name="storycove-stories" version="1.6">
+
+  <!-- Field Types -->
+
+  <!-- String field type for exact matching -->
+  <fieldType name="string" class="solr.StrField" sortMissingLast="true" />
+
+  <!-- Text field type for full-text search -->
+  <fieldType name="text_general" class="solr.TextField" positionIncrementGap="100">
+    <analyzer type="index">
+      <tokenizer class="solr.StandardTokenizerFactory"/>
+      <filter class="solr.StopFilterFactory" ignoreCase="true" words="stopwords.txt" />
+      <filter class="solr.LowerCaseFilterFactory"/>
+    </analyzer>
+    <analyzer type="query">
+      <tokenizer class="solr.StandardTokenizerFactory"/>
+      <filter class="solr.StopFilterFactory" ignoreCase="true" words="stopwords.txt" />
+      <filter class="solr.SynonymGraphFilterFactory" synonyms="synonyms.txt" ignoreCase="true" expand="true"/>
+      <filter class="solr.LowerCaseFilterFactory"/>
+    </analyzer>
+  </fieldType>
+
+  <!-- Enhanced text field for titles and important content -->
+  <fieldType name="text_enhanced" class="solr.TextField" positionIncrementGap="100">
+    <analyzer type="index">
+      <tokenizer class="solr.StandardTokenizerFactory"/>
+      <filter class="solr.StopFilterFactory" ignoreCase="true" words="stopwords.txt" />
+      <filter class="solr.LowerCaseFilterFactory"/>
+      <filter class="solr.EdgeNGramFilterFactory" minGramSize="2" maxGramSize="15"/>
+    </analyzer>
+    <analyzer type="query">
+      <tokenizer class="solr.StandardTokenizerFactory"/>
+      <filter class="solr.StopFilterFactory" ignoreCase="true" words="stopwords.txt" />
+      <filter class="solr.LowerCaseFilterFactory"/>
+    </analyzer>
+  </fieldType>
+
+  <!-- Integer field type -->
+  <fieldType name="pint" class="solr.IntPointField" docValues="true"/>
+
+  <!-- Long field type -->
+  <fieldType name="plong" class="solr.LongPointField" docValues="true"/>
+
+  <!-- Double field type -->
+  <fieldType name="pdouble" class="solr.DoublePointField" docValues="true"/>
+
+  <!-- Boolean field type -->
+  <fieldType name="boolean" class="solr.BoolField" sortMissingLast="true"/>
+
+  <!-- Date field type -->
+  <fieldType name="pdate" class="solr.DatePointField" docValues="true"/>
+
+  <!-- Multi-valued string for tags and faceting -->
+  <fieldType name="strings" class="solr.StrField" sortMissingLast="true" multiValued="true" docValues="true"/>
+
+  <!-- Single string for exact matching and faceting -->
+  <fieldType name="string_facet" class="solr.StrField" sortMissingLast="true" docValues="true"/>
+
+  <!-- Random sort field type for random ordering -->
+  <fieldType name="random" class="solr.RandomSortField" indexed="true"/>
+
+  <!-- Fields -->
+
+  <!-- Required Fields -->
+  <field name="id" type="string" indexed="true" stored="true" required="true" multiValued="false" />
+  <field name="_version_" type="plong" indexed="false" stored="false"/>
+
+  <!-- Core Story Fields -->
+  <field name="title" type="text_enhanced" indexed="true" stored="true" required="true"/>
+  <field name="description" type="text_general" indexed="true" stored="true"/>
+  <field name="sourceUrl" type="string" indexed="true" stored="true"/>
+  <field name="coverPath" type="string" indexed="false" stored="true"/>
+  <field name="wordCount" type="pint" indexed="true" stored="true"/>
+  <field name="rating" type="pint" indexed="true" stored="true"/>
+  <field name="averageStoryRating" type="pdouble" indexed="true" stored="true"/>
+  <field name="volume" type="pint" indexed="true" stored="true"/>
+
+  <!-- Multi-tenant Library Separation -->
+  <field name="libraryId" type="string" indexed="true" stored="true" required="false" default="default"/>
+
+  <!-- Reading Status Fields -->
+  <field name="isRead" type="boolean" indexed="true" stored="true"/>
+  <field name="readingPosition" type="pint" indexed="true" stored="true"/>
+  <field name="lastReadAt" type="pdate" indexed="true" stored="true"/>
+  <field name="lastRead" type="pdate" indexed="true" stored="true"/>
+
+  <!-- Author Fields -->
+  <field name="authorId" type="string" indexed="true" stored="true"/>
+  <field name="authorName" type="text_enhanced" indexed="true" stored="true"/>
+  <field name="authorName_facet" type="string_facet" indexed="true" stored="false"/>
+
+  <!-- Series Fields -->
+  <field name="seriesId" type="string" indexed="true" stored="true"/>
+  <field name="seriesName" type="text_enhanced" indexed="true" stored="true"/>
+  <field name="seriesName_facet" type="string_facet" indexed="true" stored="false"/>
+
+  <!-- Tag Fields -->
+  <field name="tagNames" type="strings" indexed="true" stored="true"/>
+  <field name="tagNames_facet" type="strings" indexed="true" stored="false"/>
+
+  <!-- Timestamp Fields -->
+  <field name="createdAt" type="pdate" indexed="true" stored="true"/>
+  <field name="updatedAt" type="pdate" indexed="true" stored="true"/>
+  <field name="dateAdded" type="pdate" indexed="true" stored="true"/>
+
+  <!-- Search-specific Fields -->
+  <field name="searchScore" type="pdouble" indexed="false" stored="true"/>
+  <field name="highlights" type="strings" indexed="false" stored="true"/>
+
+  <!-- Combined search field for general queries -->
+  <field name="text" type="text_general" indexed="true" stored="false" multiValued="true"/>
+
+  <!-- Copy Fields for comprehensive search -->
+  <copyField source="title" dest="text"/>
+  <copyField source="description" dest="text"/>
+  <copyField source="authorName" dest="text"/>
+  <copyField source="seriesName" dest="text"/>
+  <copyField source="tagNames" dest="text"/>
+
+  <!-- Copy Fields for faceting -->
+  <copyField source="authorName" dest="authorName_facet"/>
+  <copyField source="seriesName" dest="seriesName_facet"/>
+  <copyField source="tagNames" dest="tagNames_facet"/>
+
+  <!-- Copy field for lastRead sorting compatibility -->
+  <copyField source="lastReadAt" dest="lastRead"/>
+
+  <!-- Default Search Field -->
+
+  <!-- Dynamic Fields -->
+
+  <!-- Random sort dynamic field for generating random orderings -->
+  <dynamicField name="random_*" type="random" indexed="true" stored="false"/>
+
+  <!-- UniqueKey -->
+  <uniqueKey>id</uniqueKey>
+
+</schema>

solr/stories/conf/solrconfig.xml

@@ -0,0 +1,153 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--
+ Solr Configuration for StoryCove Stories Core
+ Optimized for story search with highlighting and faceting
+-->
+<config>
+  <luceneMatchVersion>9.9.0</luceneMatchVersion>
+
+  <!-- DataDir configuration -->
+  <dataDir>${solr.data.dir:}</dataDir>
+
+  <!-- Directory Factory -->
+  <directoryFactory name="DirectoryFactory"
+                    class="${solr.directoryFactory:solr.NRTCachingDirectoryFactory}"/>
+
+  <!-- CodecFactory -->
+  <codecFactory class="solr.SchemaCodecFactory"/>
+
+  <!-- Index Configuration -->
+  <indexConfig>
+    <lockType>${solr.lock.type:native}</lockType>
+    <infoStream>true</infoStream>
+  </indexConfig>
+
+  <!-- JMX Configuration -->
+  <jmx />
+
+  <!-- Update Handler -->
+  <updateHandler class="solr.DirectUpdateHandler2">
+    <updateLog>
+      <str name="dir">${solr.ulog.dir:}</str>
+      <int name="numVersionBuckets">${solr.ulog.numVersionBuckets:65536}</int>
+    </updateLog>
+
+    <autoCommit>
+      <maxTime>15000</maxTime>
+      <openSearcher>false</openSearcher>
+    </autoCommit>
+
+    <autoSoftCommit>
+      <maxTime>1000</maxTime>
+    </autoSoftCommit>
+  </updateHandler>
+
+  <!-- Query Configuration -->
+  <query>
+    <maxBooleanClauses>1024</maxBooleanClauses>
+    <filterCache class="solr.CaffeineCache"
+                 size="512"
+                 initialSize="512"
+                 autowarmCount="0"/>
+    <queryResultCache class="solr.CaffeineCache"
+                     size="512"
+                     initialSize="512"
+                     autowarmCount="0"/>
+    <documentCache class="solr.CaffeineCache"
+                  size="512"
+                  initialSize="512"
+                  autowarmCount="0"/>
+    <enableLazyFieldLoading>true</enableLazyFieldLoading>
+   </query>
+
+  <!-- Request Dispatcher -->
+  <requestDispatcher handleSelect="false" >
+    <requestParsers enableRemoteStreaming="true"
+                    multipartUploadLimitInKB="2048000"
+                    formdataUploadLimitInKB="2048"
+                    addHttpRequestToContext="false"/>
+    <httpCaching never304="true" />
+  </requestDispatcher>
+
+  <!-- Request Handlers -->
+
+  <!-- Standard Select Handler -->
+  <requestHandler name="/select" class="solr.SearchHandler">
+    <lst name="defaults">
+      <str name="echoParams">explicit</str>
+      <int name="rows">10</int>
+      <str name="df">text</str>
+      <str name="wt">json</str>
+      <str name="indent">true</str>
+      <str name="hl">true</str>
+      <str name="hl.fl">title,description</str>
+      <str name="hl.simple.pre">&lt;em&gt;</str>
+      <str name="hl.simple.post">&lt;/em&gt;</str>
+      <str name="hl.fragsize">150</str>
+      <str name="hl.maxAnalyzedChars">51200</str>
+      <str name="facet">true</str>
+      <str name="facet.field">authorName</str>
+      <str name="facet.field">tagNames</str>
+      <str name="facet.field">seriesName</str>
+      <str name="facet.field">rating</str>
+      <str name="facet.field">isRead</str>
+      <str name="facet.mincount">1</str>
+      <str name="facet.sort">count</str>
+    </lst>
+  </requestHandler>
+
+  <!-- Update Handler -->
+  <requestHandler name="/update" class="solr.UpdateRequestHandler" />
+
+  <!-- Admin Handlers -->
+  <requestHandler name="/admin/ping" class="solr.PingRequestHandler">
+    <lst name="invariants">
+      <str name="q">*:*</str>
+    </lst>
+    <lst name="defaults">
+      <str name="echoParams">all</str>
+    </lst>
+  </requestHandler>
+
+  <!-- More Like This Handler -->
+  <requestHandler name="/mlt" class="solr.MoreLikeThisHandler">
+    <lst name="defaults">
+      <str name="mlt.fl">title,description</str>
+      <int name="mlt.mindf">2</int>
+      <int name="mlt.mintf">2</int>
+      <str name="mlt.qf">title^2.0 description^1.0</str>
+      <int name="rows">5</int>
+    </lst>
+  </requestHandler>
+
+  <!-- Suggester Handler -->
+  <requestHandler name="/suggest" class="solr.SearchHandler" startup="lazy">
+    <lst name="defaults">
+      <str name="suggest">true</str>
+      <str name="suggest.count">10</str>
+    </lst>
+    <arr name="components">
+      <str>suggest</str>
+    </arr>
+  </requestHandler>
+
+  <!-- Search Components -->
+  <searchComponent name="suggest" class="solr.SuggestComponent">
+    <lst name="suggester">
+      <str name="name">storySuggester</str>
+      <str name="lookupImpl">AnalyzingInfixLookupFactory</str>
+      <str name="dictionaryImpl">DocumentDictionaryFactory</str>
+      <str name="field">title</str>
+      <str name="weightField">rating</str>
+      <str name="suggestAnalyzerFieldType">text_general</str>
+      <str name="buildOnStartup">false</str>
+      <str name="buildOnCommit">false</str>
+    </lst>
+  </searchComponent>
+
+  <!-- Response Writers -->
+  <queryResponseWriter name="json" class="solr.JSONResponseWriter">
+    <str name="content-type">application/json; charset=UTF-8</str>
+  </queryResponseWriter>
+
+</config>

solr/stories/conf/stopwords.txt

@@ -0,0 +1,34 @@
+# English stopwords for story search
+a
+an
+and
+are
+as
+at
+be
+but
+by
+for
+if
+in
+into
+is
+it
+no
+not
+of
+on
+or
+such
+that
+the
+their
+then
+there
+these
+they
+this
+to
+was
+will
+with

solr/stories/conf/synonyms.txt

@@ -0,0 +1,16 @@
+# Synonyms for story search
+# Format: word1,word2,word3 => synonym1,synonym2
+fantasy,magical,magic
+sci-fi,science fiction,scifi
+romance,romantic,love
+mystery,detective,crime
+adventure,action
+horror,scary,frightening
+drama,dramatic
+comedy,funny,humor
+thriller,suspense
+historical,history
+contemporary,modern
+short,brief
+novel,book
+story,tale,narrative