Fix editable file focus and live syntax highlighting

[jakeleventhal]

Summary

• upgrade @pierre/diffs from 1.3.0-beta.5 to 1.3.0-beta.9 and carry forward the required editor fixes, including the upstream Pierre editor update from [diffs/edit] Add persisted editor state caching pierrecomputer/pierre#976
• keep editable-file editor state and cache identity stable while file contents change
• preserve comment annotation identity so comment UI updates do not force redundant editor renders
• keep Pierre's internal file contents synchronized after local edits and avoid controlled-selection feedback
• apply resolved token colors during in-place retokenization so syntax highlighting updates immediately

Root cause

The editable file cache key included the current contents, so every keystroke changed the file identity seen by Pierre and fed the controlled render path back into the active editor. That caused focus loss, hover/text flicker, and comment regressions.

After upgrading Pierre, live retokenization also emitted theme CSS variables that this compiled editor combination did not mount a consumer rule for. Initial file renders were colored, but edited tokens appeared unhighlighted until the file was reopened. The patch now applies the already-resolved active-theme token color directly during the same in-place token update.

User impact

Typing in the editable file pane now retains keyboard focus without the line-hover or text flicker. Review comments continue to work, and syntax highlighting reacts to edits without switching files.

Validation

• pnpm exec vp check (0 errors; 9 pre-existing warnings)
• pnpm exec vp run typecheck
• pnpm exec vp test apps/web/src/components/files/FilePreviewPanel.test.ts apps/web/src/components/files/fileContentRevision.test.ts (10 tests)
• pnpm install --frozen-lockfile
• manual browser verification of focus retention, comment behavior, stable line DOM, and live token-classification changes

Note

Fix editable file focus and live syntax highlighting in the file preview panel

• Upgrades @pierre/diffs from 1.3.0-beta.5 to 1.3.0-beta.9 and replaces the corresponding patch file to pick up upstream editor fixes.
• Adds projectFileEditorCacheKey in fileContentRevision.ts to decouple editor identity from file contents, so the editor instance is stable across content changes for the same file path.
• Adds reconcileFileCommentAnnotations in fileCommentAnnotations.ts that preserves the existing annotations array reference when annotations are logically unchanged, avoiding unnecessary re-renders.
• Configures the Editor in FilePreviewPanel.tsx with persistState: true and persistStateStorage: 'inMemory' and uses a ref to hold the latest annotations to prevent stale closures.

^{Macroscope summarized b2a771d.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: a71059e2-653e-4042-96ab-6da89b29a16b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}