Udytor Editor Digest

🚀 Architecture Overview React + Vite + CodeMirror 6 editor powered by Zustand and OpenRouter. Implements Fill-In-The-Middle (FIM) completions via raw HTTP streams, LCS progressive text diffs for inline editing, and phantom decorations for ghost-text.

💡 Core Patterns

• Progressive Diff Fallback: segmentedApply.ts uses a custom Longest Common Subsequence (LCS) algorithm to build AI review blocks. It aggressively slices text hierarchically: paragraph (\n{2,}) → line (\n) → token (\s+) to guarantee human-readable granular diffs.
• Non-Destructive Ghost Text: Injects phantom UI overlays via CodeMirror WidgetType, StateEffect, and StateField. Text is absolutely positioned (opacity: 0.5) and completely decoupled from document state until the user accepts.
• FIM Budget Slicing: Extracts exactly 8,000 characters of prefix and 2,000 characters of suffix around the cursor for optimal Fill-In-The-Middle context balancing.
• Fallback Model Routing: Utilizes OpenRouter’s route: 'fallback' feature with chained models (codestral, deepseek-coder, gpt-4o-mini). Ensures high uptime and latency optimization for autocomplete.
• Multi-Layered Composers: compose.ts merges systemic instructions, track contexts (autocomplete vs inline), active presets, and manual user overrides into a strictly validated text prompt.

🚨 Anti-Patterns & Gotchas

• Naive Cache Collisions: completionCache.ts generates cache keys using raw string slices (prefix.slice(-200) and suffix.slice(0, 100)). This guarantees silent cache collisions if the immediate surrounding code is identical but top-of-file imports change.
• Synchronous Storage Bloat: useEditorStore indiscriminately persists the entire content and files array directly into localStorage. This will quickly trigger QuotaExceededError browser crashes on moderate-to-large multi-file workspaces.
• DOM Detachment Risks: Ghost text utilizes raw absolute and whiteSpace: pre CSS injections. Changes to CodeMirror font metrics, zooming, or hard line-wrapping will cause the phantom text to visually misalign with the caret.
• Word Match Brittleness: The acceptGhostTextWord logic uses a naive regex (/^(\S+\s*)/). This fails on complex structural syntax (like nested brackets or object accessors) forcing users to accept the entire chunk.

🔧 Best Practices

• Predictive Request Aborting: The useCompletion hook strictly wires AbortController signals to the user’s keystroke debouncer (150ms). Cursor movement instantly kills pending LLM streams to drastically cut API token waste.
• Raw SSE Cost Tracking: Manual chunk-by-chunk stream parsing (TextDecoder) accurately intercepts the final OpenRouter usage payload. Computes live session billing/cost tracking entirely client-side.
• Decoupled Diff Decisions: The segmentedApply diffing engine isolates UI rendering from the segment lifecycle (pending, accept, reject). Allows users to resolve chunked AI suggestions non-linearly.