fix: provide stable Monaco model path in file editor

[wwwillchen-bot]

Summary

• Compute a stable Monaco path value from appId and filePath in FileEditor
• Pass that path into the editor so file models are keyed consistently across renders/apps

Test plan

• npm run fmt
• npm run lint:fix
• npm run ts
• npm test

🤖 Generated with Claude Code

---

[wwwillchen]

@BugBot run

[gemini-code-assist]

Summary of Changes

Hello @wwwillchen-bot, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request resolves an issue with inconsistent Monaco editor model identification by introducing a stable and unique path for each file editor instance. By deriving this path from the application ID and file path, the changes ensure that the Monaco editor correctly reuses or creates models, thereby enhancing the editor's stability and behavior during re-renders or when switching between different applications.

Highlights

• Stable Monaco Model Paths: Introduced a memoized computation for a stable Monaco "path" value within the "FileEditor" component, derived from "appId" and "filePath".
• Consistent Editor Model Keying: Ensured that the computed stable "path" is passed to the Monaco editor, leading to consistent keying of file models across various renders and applications.

Changelog

• src/components/preview_panel/FileEditor.tsx
  • Calculated a stable "modelPath" using "appId" and "filePath" via "React.useMemo".
  • Updated the "Editor" component to use the new "modelPath" prop.

Activity

• The pull request was generated using Claude Code.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[wwwillchen]

@BugBot run

[gemini-code-assist]

Code Review

The pull request effectively addresses the issue of unstable Monaco model paths in the file editor by computing a stable and unique path using appId and filePath. The use of React.useMemo ensures efficient re-computation only when necessary, and encodeURI correctly handles special characters in the file path. The changes are well-implemented and directly resolve the problem described in the PR, leading to more consistent model keying across renders. No critical, high, or medium severity issues were found in the changes.

[greptile-apps]

Greptile Summary

Adds stable Monaco model path computation by combining appId and filePath to ensure file models are keyed consistently across renders and different apps.

Changes:

• Added modelPath useMemo hook that computes a stable URI-formatted path from appId and filePath
• Normalizes file paths by removing leading slashes before encoding
• Passes the computed modelPath to the Monaco Editor's path prop

Issues Found:

• Uses encodeURI instead of encodeURIComponent, which won't properly encode special URI characters like #, ?, or @ that may appear in file paths

Confidence Score: 4/5

• This PR is safe to merge with one minor encoding fix needed
• The implementation correctly solves the model path stability issue, but uses encodeURI instead of encodeURIComponent which could cause issues with file paths containing special URI characters
• The encoding method in FileEditor.tsx:144 should be changed from encodeURI to encodeURIComponent

Important Files Changed

Filename	Overview
src/components/preview_panel/FileEditor.tsx	Added stable Monaco model path computation using appId and filePath, with minor encoding issue

_{Last reviewed commit: 94c4b93}

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 3 additional findings.

[cubic-dev-ai]

No issues found across 1 file

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

[github-actions]

🔍 Dyadbot Code Review Summary

Verdict: ✅ YES - Ready to merge

Reviewed by 3 independent agents: Correctness Expert, Code Health Expert, UX Wizard.

Issues Summary

No HIGH or MEDIUM issues found. Clean, focused PR that adds stable Monaco model paths.

🟢 Low Priority Notes (1 item)

• encodeURI leaves #/? unencoded in model path — src/components/preview_panel/FileEditor.tsx:144 — encodeURI doesn't encode URI-special characters like # and ?. If a file path contained these characters, Monaco could misparse the model URI. In practice this is unlikely for code files in Dyad. A more robust alternative would be normalizedPath.split('/').map(encodeURIComponent).join('/').

🚫 Dropped False Positives (3 items)

• defaultLanguage is dead code when path is set — Dropped: defaultLanguage is still used as the language hint when Monaco creates a new model for the first time. It serves as a valid fallback for extensions Monaco doesn't natively recognize.
• appId=null creates shared "unknown" namespace — Dropped: Requires multiple FileEditor instances with null appId AND the same filePath rendered simultaneously — extremely unlikely in practice.
• Path change clears editor state / unsaved changes — Dropped: This is the intended correct behavior. The PR fixes model instability by giving each file a unique, stable model. The editor already auto-saves on blur.

---

Generated by Dyadbot multi-agent code review

[github-actions]

🎭 Playwright Test Results

❌ Some tests failed

OS	Passed	Failed	Flaky	Skipped
🍎 macOS	282	1	3	75
🪟 Windows	280	1	1	75

Summary: 562 passed, 2 failed, 4 flaky, 150 skipped

Failed Tests

🍎 macOS

• setup_flow.spec.ts > Setup Flow > node.js install flow
  • TimeoutError: locator.click: Timeout 30000ms exceeded.

🪟 Windows

• template-create-nextjs.spec.ts > create next.js app
  • TimeoutError: locator.click: Timeout 30000ms exceeded.

📋 Re-run Failing Tests (macOS)

Copy and paste to re-run all failing spec files locally:

npm run e2e \
  e2e-tests/setup_flow.spec.ts

⚠️ Flaky Tests

🍎 macOS

• engine.spec.ts > regular auto should send message to engine (passed after 1 retry)
• setup_flow.spec.ts > Setup Flow > setup banner shows correct state when node.js is installed (passed after 1 retry)
• template-create-nextjs.spec.ts > create next.js app (passed after 1 retry)

🪟 Windows

• setup_flow.spec.ts > Setup Flow > setup banner shows correct state when node.js is installed (passed after 1 retry)

---

📊 View full report