Feat/light mode

PHASE5_INTEGRATION_TEST.md

@@ -0,0 +1,122 @@
+# Phase 5 Integration Test Plan
+
+## Overview
+Phase 5 integrates Twelvelabs AI video analysis with V4's existing media store in parallel operations that don't break existing functionality.
+
+## Key Integration Points
+
+### 1. MediaFile Interface Extensions
+- ✅ Added optional Twelvelabs fields to `MediaFile` interface
+- ✅ Fields: `twelveLabsVideoId`, `twelveLabsTaskId`, `indexingStatus`, `indexingProgress`, `indexingError`
+- ✅ Backward compatible - existing media files work unchanged
+
+### 2. Enhanced addMediaFile Workflow
+```
+Existing Flow (Preserved):
+1. Create MediaFile object with UUID
+2. Add to local state immediately (UI responsiveness)
+3. Save to persistent storage (IndexedDB + OPFS)
+4. If storage fails, remove from local state
+
+New Parallel Operations (Videos Only):
+5. Initialize Twelvelabs status fields (pending, 0%)
+6. Start background Twelvelabs indexing (non-blocking)
+7. Update local state with progress callbacks
+8. Persist status to Supabase (parallel background operation)
+9. Handle errors gracefully without affecting main flow
+```
+
+### 3. Enhanced loadProjectMedia Workflow
+```
+Existing Flow (Preserved):
+1. Load media metadata from IndexedDB
+2. Load media files from OPFS
+3. Regenerate video thumbnails
+4. Update local state
+
+New Parallel Operations:
+5. Query Twelvelabs metadata from Supabase
+6. Merge status data with media items
+7. Update state with restored status
+8. Handle errors gracefully (don't fail main load)
+```
+
+### 4. Enhanced removeMediaFile Workflow
+```
+Existing Flow (Preserved):
+1. Clear video cache
+2. Cleanup object URLs
+3. Remove from local state
+4. Remove from timeline if referenced
+5. Delete from persistent storage
+
+New Cleanup Operation:
+6. Delete Twelvelabs metadata from Supabase (videos only)
+7. Handle errors gracefully (don't fail main deletion)
+```
+
+## Safety Measures
+
+### 1. Non-Breaking Design
+- All Twelvelabs fields are optional in MediaFile interface
+- Existing media files without Twelvelabs data work unchanged
+- V3 features are additive, not replacements
+
+### 2. Error Isolation
+- Twelvelabs errors don't break main media workflow
+- Storage failures are logged but don't throw
+- Background operations use try/catch with graceful fallbacks
+
+### 3. Performance Optimization
+- Twelvelabs processing runs in background (non-blocking)
+- Only videos trigger AI analysis (images/audio skip)
+- Supabase operations are parallel to main storage
+
+### 4. State Management
+- Added `updateMediaIndexingStatus` method for clean state updates
+- Progress updates use callback system for real-time UI updates
+- Status restoration on load maintains consistency
+
+## Testing Checklist
+
+### Basic Functionality (Should Not Break)
+- [ ] Add image file to media library
+- [ ] Add audio file to media library
+- [ ] Add video file to media library
+- [ ] Remove media files from library
+- [ ] Load project with existing media
+- [ ] Timeline operations with media files
+
+### V3 Enhanced Functionality (New Features)
+- [ ] Video upload triggers Twelvelabs indexing
+- [ ] Indexing status shows in UI (pending → processing → completed)
+- [ ] Status persists across page reloads
+- [ ] Failed indexing shows error message
+- [ ] Non-video files skip Twelvelabs processing
+
+### Error Scenarios (Graceful Degradation)
+- [ ] Twelvelabs API unavailable (video still uploads normally)
+- [ ] Supabase unavailable (video still uploads normally)
+- [ ] Network interruption during indexing (status recovers on reload)
+- [ ] Invalid video format (indexing fails gracefully)
+
+## Environment Requirements
+
+### Required for Full Testing
+- ✅ Supabase configured with media_twelvelabs table
+- ✅ Twelvelabs API key configured
+- ✅ Environment variables in .env.local
+
+### Fallback Behavior (Missing Config)
+- Videos upload normally to V4 storage
+- Twelvelabs fields remain undefined
+- No errors thrown or functionality broken
+
+## Integration Success Criteria
+
+1. ✅ Existing media workflow unchanged and unbroken
+2. ✅ Videos get enhanced with AI analysis capabilities
+3. ✅ Status tracking works across page reloads
+4. ✅ Error handling doesn't break main functionality
+5. ✅ Performance impact is minimal (background processing)
+6. ✅ Backward compatibility maintained

SUPABASE_SETUP.md

@@ -0,0 +1,82 @@
+# Supabase Setup for V3 Integration
+
+This guide helps you set up the Supabase database for V3's Twelvelabs integration features.
+
+## Quick Setup
+
+### 1. Database Schema
+Copy and paste the contents of `create_media_twelvelabs_table.sql` into your Supabase SQL Editor:
+
+1. Go to your Supabase dashboard: https://supabase.com/dashboard
+2. Navigate to your project: `ziciiawlkxgmwrfajimhy`
+3. Go to **SQL Editor** in the left sidebar
+4. Click **New Query**
+5. Copy the entire contents of `create_media_twelvelabs_table.sql`
+6. Paste and run the query
+
+This will create:
+- `media_twelvelabs` table for storing indexing status
+- Proper indexes for performance
+- RLS (Row Level Security) policies
+- Automatic `updated_at` timestamp triggers
+
+### 2. Verify Setup
+After running the SQL, test the connection:
+
+```bash
+# From the project root
+curl http://localhost:3000/api/health-v3
+```
+
+Expected response:
+```json
+{
+  "status": "healthy",
+  "v3Integration": {
+    "supabaseConfigured": true,
+    "supabaseConnectivity": true,
+    "supabaseMessage": "Connected successfully"
+  }
+}
+```
+
+## Environment Variables (Already Configured)
+
+The following environment variables have been set in `.env.local`:
+
+```bash
+SUPABASE_URL="https://ziciiawlkxgmwrfajimhy.supabase.co"
+SUPABASE_SERVICE_KEY="[your-service-role-key]"
+```
+
+## Table Schema
+
+The `media_twelvelabs` table stores:
+
+- `media_id` - UUID of media file in local system
+- `project_id` - UUID of the project
+- `twelve_labs_video_id` - Video ID from Twelvelabs
+- `twelve_labs_task_id` - Task ID for indexing progress
+- `indexing_status` - Status: pending, processing, completed, failed
+- `indexing_progress` - Percentage completion (0-100)
+- `error_message` - Error details if failed
+- `metadata` - Additional Twelvelabs response data
+
+## Security
+
+- **RLS Enabled**: Row Level Security protects data access
+- **Service Role**: Server-side operations use service role key
+- **Policies**: Users can only access their own project data
+
+## Troubleshooting
+
+### Connection Issues
+- Check that your Supabase project is active
+- Verify environment variables are correctly set
+- Check the health endpoint: `/api/health-v3`
+
+### Table Missing Error
+If you see "table not created yet", run the SQL schema from `create_media_twelvelabs_table.sql`
+
+### Permission Errors
+Ensure RLS policies are correctly set up by re-running the SQL schema

V4_MEDIA_WORKFLOW_DOCUMENTATION.md

@@ -0,0 +1,116 @@
+# V4 Current Media Workflow Documentation
+
+*Created: Phase 0 of V3→V4 integration*
+*Purpose: Document existing V4 media workflow before adding V3 features*
+
+## Architecture Overview
+
+V4 uses a **dual-layer storage system** for optimal performance:
+- **IndexedDB**: Structured data (metadata, projects, sounds)
+- **OPFS (Origin Private File System)**: Large media files
+
+## Current Media Store Structure (`media-store.ts`)
+
+### State
+```typescript
+interface MediaStore {
+  mediaFiles: MediaFile[];
+  isLoading: boolean;
+}
+```
+
+### Key Operations
+
+#### 1. Add Media File
+**Flow**: `addMediaFile(projectId, file)`
+1. Generate UUID for new media item
+2. Add to local state immediately (UI responsiveness)
+3. Save to persistent storage via `storageService.saveMediaFile()`
+4. If storage fails, remove from local state
+
+#### 2. Remove Media File
+**Flow**: `removeMediaFile(projectId, id)`
+1. Clear video cache for the item
+2. Cleanup object URLs (prevent memory leaks)
+3. Remove from local state
+4. Cascade removal from timeline (remove all elements using this media)
+5. Remove from persistent storage
+
+#### 3. Load Project Media
+**Flow**: `loadProjectMedia(projectId)`
+1. Load metadata from IndexedDB
+2. Load files from OPFS
+3. Regenerate video thumbnails
+4. Update local state
+
+## Storage Service Architecture (`storage-service.ts`)
+
+### Project-Specific Storage
+- **Media Metadata**: `video-editor-media-{projectId}` (IndexedDB)
+- **Media Files**: `media-files-{projectId}` (OPFS)
+- **Timeline**: `video-editor-timelines-{projectId}` (IndexedDB)
+
+### Media File Storage Process
+1. **File Storage**: Save actual file to OPFS with media ID
+2. **Metadata Storage**: Save file metadata to IndexedDB:
+   ```typescript
+   interface MediaFileData {
+     id: string;
+     name: string;
+     type: MediaType;
+     size: number;
+     lastModified: number;
+     width?: number;
+     height?: number;
+     duration?: number;
+     ephemeral?: boolean;
+   }
+   ```
+
+### Media File Loading Process
+1. Load file and metadata in parallel
+2. Create object URL for file access
+3. Handle special cases (SVG detection for images)
+4. Return combined MediaFile object
+
+## Helper Functions
+
+### Media Processing
+- `getFileType()`: Determine media type from MIME
+- `getImageDimensions()`: Extract image dimensions
+- `generateVideoThumbnail()`: Create video thumbnails at 1s or 10% duration
+- `getMediaDuration()`: Extract audio/video duration
+- `getMediaAspectRatio()`: Calculate aspect ratio with 16:9 fallback
+
+### Memory Management
+- URL cleanup on file removal
+- Video cache clearing
+- Object URL revocation
+
+## Integration Points for V3
+
+### Current Limitations (to be addressed by V3 integration):
+1. **No AI Analysis**: Files stored but no intelligence extraction
+2. **No Persistent Metadata**: No external service status tracking
+3. **No Programmatic Access**: Only UI-driven operations
+4. **No Chat Interface**: No conversational editing commands
+
+### Extension Points:
+1. **MediaFile Interface**: Can be extended with Twelvelabs fields
+2. **Storage Service**: Can add Supabase persistence layer
+3. **Media Store**: Can add background processing and status tracking
+4. **Helper Functions**: Can add AI analysis triggers
+
+## Current File Structure
+```
+apps/web/src/
+├── stores/media-store.ts          # Main media state management
+├── lib/storage/
+│   ├── storage-service.ts         # Multi-layer storage orchestration
+│   ├── indexeddb-adapter.ts       # IndexedDB interface
+│   ├── opfs-adapter.ts           # OPFS interface
+│   └── types.ts                  # Storage type definitions
+└── types/media.ts                # Media file type definitions
+```
+
+This documentation will help ensure V3 integration preserves V4's efficient storage architecture while adding AI-powered features.

apps/transcription/transcription.py

@@ -1,7 +1,7 @@
 import modal
 from pydantic import BaseModel
 
-app = modal.App("opencut-transcription")
+app = modal.App("kallio-transcription")
 
 class TranscribeRequest(BaseModel):
     filename: str
@@ -15,7 +15,7 @@ class TranscribeRequest(BaseModel):
         .pip_install(["openai-whisper", "boto3", "fastapi[standard]", "pydantic", "cryptography"]),
     gpu="A10G",
     timeout=300, # 5m
-    secrets=[modal.Secret.from_name("opencut-r2-secrets")]
+    secrets=[modal.Secret.from_name("kallio-r2-secrets")]
 )
 @modal.fastapi_endpoint(method="POST")
 def transcribe_audio(request: TranscribeRequest):

apps/web/.env.example

@@ -30,4 +30,21 @@ R2_SECRET_ACCESS_KEY=your-secret-access-key
 R2_BUCKET_NAME=opencut-transcription
 
 # Modal transcription endpoint (from modal deploy transcription.py)
-MODAL_TRANSCRIPTION_URL=https://your-username--opencut-transcription-transcribe-audio.modal.run
+MODAL_TRANSCRIPTION_URL=https://your-username--opencut-transcription-transcribe-audio.modal.run
+
+# Supabase (for persistent storage of Twelvelabs status)
+SUPABASE_URL="your-supabase-url"
+SUPABASE_SERVICE_KEY="your-service-key"
+
+# Twelvelabs (for AI video analysis and indexing)
+TWELVELABS_API_KEY="your-api-key"
+
+# OpenAI (Agent planner)
+OPENAI_API_KEY=sk-...
+OPENAI_MODEL=gpt-4o-mini
+OPENAI_RESP_FORMAT=json_schema # or json_object
+AGENT_PLANNER_FALLBACK=true
+
+# Agent thinking/reasoning display
+AGENT_THOUGHT_STRICT=false # true = wait for full thinking before steps execute (Cursor-style)
+AGENT_THINKING_TIMEOUT_MS=3000 # Timeout for strict mode wait

apps/web/package.json

@@ -24,6 +24,7 @@
     "@opencut/auth": "workspace:*",
     "@opencut/db": "workspace:*",
     "@radix-ui/react-separator": "^1.1.7",
+    "@supabase/supabase-js": "^2.57.2",
     "@t3-oss/env-core": "^0.13.8",
     "@t3-oss/env-nextjs": "^0.13.8",
     "@upstash/ratelimit": "^2.0.5",
@@ -74,7 +75,6 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.11",
     "@tailwindcss/typography": "^0.5.16",
-    "@types/bun": "latest",
     "@types/node": "^24.2.1",
     "@types/pg": "^8.15.4",
     "@types/react": "^18.2.48",