Fix editable file focus and live syntax highlighting

[jakeleventhal]

Summary

• upgrade @pierre/diffs from 1.3.0-beta.5 to 1.3.0-beta.10, consume persisted editor state caching from [diffs/edit] Add persisted editor state caching pierrecomputer/pierre#976 directly, and reduce the local patch to T3-specific compatibility fixes
• route the diff gutter + action through controlled selection so it reliably opens a review comment
• 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.

The diff panel also enabled Pierre’s gutter utility without wiring its click callback into the controlled selection state. That left the visible + action dependent on pointer-event fallthrough, so physical clicks could do nothing even though line selection and file-panel comments worked. The diff panel now mirrors the file panel’s explicit gutter-selection path.

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. beta.10 includes both persisted-state support and direct active-theme token colors, so the remaining local patch is limited to T3's interaction-option, controlled-selection, immediate-content-sync, and package-export compatibility.

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 run apps/web/src/reviewCommentContext.test.ts apps/web/src/components/files/FilePreviewPanel.test.ts (15 tests)
• pnpm install --frozen-lockfile
• manual browser verification of focus retention, stable line DOM, live token-classification changes, and direct diff-gutter + comment creation

Note

Fix editable file focus and live syntax highlighting in the file editor

• Bumps @pierre/diffs from 1.3.0-beta.5 to 1.3.0-beta.10 to fix editor focus and live syntax highlighting.
• Adds reconcileFileCommentAnnotations in fileCommentAnnotations.ts to return a stable array reference when annotations are unchanged, preventing unnecessary re-renders in the editor.
• Adds projectFileEditorCacheKey in fileContentRevision.ts to produce a content-independent editor cache key, so the editor instance is not recreated when file contents change.
• Configures the editor in FilePreviewPanel.tsx with in-memory persistent state and switches to EditProvider, stabilizing editor identity across content updates.

^{Macroscope summarized 37d4a57.}

---

Note

Medium Risk
Changes core file/diff editing via a vendored @pierre/diffs patch and editor identity/caching; regressions could affect focus, highlighting, or review comments, but scope is localized with tests.

Overview
Upgrades @pierre/diffs to 1.3.0-beta.10 and trims the local patch so the editable file editor can keep gutter/line selection while still syncing document text and respecting controlled selection.

The editable file pane stops remounting the Pierre instance on every keystroke by using a path-based projectFileEditorCacheKey, EditProvider, and in-memory persisted editor state. Comment annotations go through reconcileFileCommentAnnotations so unchanged Pierre updates keep the same array reference and avoid extra React/editor churn.

Diff review comments wire the gutter + through onGutterUtilityClick into controlled line selection, matching the file panel behavior so clicks reliably start a comment draft.

^{Reviewed by Cursor Bugbot for commit 37d4a57. Bugbot is set up for automated code reviews on this repo. Configure here.}

[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 Plus

Run ID: b3f8bb7c-edcd-4db0-9b86-80991edbb09b

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.}

[macroscopeapp]

Approvability

Verdict: Needs human review

Two unresolved review comments identify potential bugs: annotation reconciliation may preserve stale line ranges, and the editor cache key omitting environment could cause cross-environment state issues. These substantive concerns warrant human review.

^{You can customize Macroscope's approvability policy. Learn more.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 48adb40d64

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Keep the file cache key tied to contents

For externally refreshed contents of the same path (for example an agent edits the file on disk and the readFile query updates while this pane stays mounted), this stable cacheKey violates @pierre/diffs' file contract: its renderer caches split lines by file.cacheKey and expects the key to change when contents changes. Local editor keystrokes are covered by the patched editor path, but non-editor updates will reuse the old line cache, so inserted/deleted lines can be omitted or render with stale line counts until the component remounts. Please keep the render cacheKey content-specific and use a separate stable key for persisted editor state.

Useful? React with 👍 / 👎.

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit fd5a135. Configure here.}