feat: Implement Dev panel & IDE functionalities #1740

iNerdStack · 2025-04-06T17:32:51Z

Description

This pull request introduces the new Onlook IDE and dev panel and adds functionality for scanning and retrieving project files, as well as the ability to view and edit files.

Related Issues

related to #1594

Type of Change

Testing

Screenshots (if applicable)

Additional Notes

Important

Introduces Onlook IDE with file scanning, retrieval, and editing capabilities, and updates UI and dependencies for integration.

Behavior:
- Adds Onlook IDE to ide.ts and integrates it into the system.
- Implements file scanning and retrieval in files-scan.ts.
- Adds file viewing and editing capabilities in index.ts.
Events:
- Adds VIEW_CODE_IN_ONLOOK and SHOW_EDITOR_TAB to MainChannels in ipc.ts.
- Handles file-related IPC events in events/files.ts and events/code.ts.
UI:
- Implements DevTab and file tree components in DevTab/index.tsx, FileTreeNode.tsx, and FileTreeRow.tsx.
Dependencies:
- Adds CodeMirror and related packages to package.json for code editing support.

^{This description was created by}^{for 19999e6. It will automatically update as commits are pushed.}

ellipsis-dev

👍 Looks good to me! Reviewed everything up to 19999e6 in 1 minute and 57 seconds

More details

Looked at 2279 lines of code in 20 files
Skipped 0 files when reviewing.
Skipped posting 8 drafted comments based on config settings.

1. packages/models/src/constants/ipc.ts:52

Draft comment:
Ensure the new channel VIEW_CODE_IN_ONLOOK follows naming conventions and is consistently used in the IPC integration.
Reason this comment was not posted:
Confidence changes required: 33% <= threshold 50%
None

2. packages/models/src/ide/index.ts:6

Draft comment:
The ONLOOK IDE addition looks good. Confirm that the default IDE remains appropriate and that its integration is error-free across the app.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50%
None

3. packages/models/src/constants/ipc.ts:52

Draft comment:
New channel VIEW_CODE_IN_ONLOOK added here looks good. Ensure related docs and usage in the dev panel are updated accordingly.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50%
None

4. packages/models/src/ide/index.ts:6

Draft comment:
ONLOOK added in IdeType is consistent with the new IDE functionality. Consider if the DEFAULT_IDE should be updated based on user preference.
Reason this comment was not posted:
Confidence changes required: 33% <= threshold 50%
None

5. apps/studio/package.json:30

Draft comment:
The script key 'pree2e' appears to be a potential typographical mistake. If this is meant to run before e2e tests, consider renaming it to something more conventional (like 'pre:e2e') to avoid confusion.
Reason this comment was not posted:
Comment was not on a location in the diff, so it can't be submitted as a review comment.

6. packages/models/src/constants/ipc.ts:34

Draft comment:
Typo: The constant 'QUIT_AND_INSTALL' has a string value 'quit-and-update-app'. Consider renaming the value to 'quit-and-install' (or adjusting the constant name) for consistency.
Reason this comment was not posted:
Comment was not on a location in the diff, so it can't be submitted as a review comment.

7. packages/models/src/constants/ipc.ts:65

Draft comment:
Typo: The constant 'GET_TEMPLATE_NODE_CLASS' has a string value 'get-template-node-classes'. The mismatch in singular vs plural could be confusing. Please verify and adjust for consistency.
Reason this comment was not posted:
Comment was not on a location in the diff, so it can't be submitted as a review comment.

8. packages/models/src/constants/ipc.ts:55

Draft comment:
Typo: The constant 'CLEAN_CODE_KEYS' is assigned the string 'clean-move-keys'. This appears to be a typographical error. Please check if it should be 'clean-code-keys' instead.
Reason this comment was not posted:
Comment was on unchanged code.

Workflow ID: wflow_1uuyuTfRmxiNtLox

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

spartan-uyen · 2025-04-08T09:41:24Z

Title: Undo in one file loads code from another file

Summary: When editing and saving a file in Onlook IDE, performing undo twice causes the file content to be replaced by another file’s content.

Steps to Reproduce:

Open layout.tsx file.
Then open page.tsx.
Make a small change in page.tsx (e.g., rename Web App title) and save.
Press Command + Z twice to undo.
Observe the content of page.tsx.

Actual Result:
page.tsx unexpectedly loads the content of layout.tsx.
https://github.com/user-attachments/assets/1db0ff06-7441-4015-99df-df989106d3b8

Expected Result:
Undo should only affect changes made in page.tsx, without replacing it with content from other files.

spartan-uyen · 2025-04-08T09:46:20Z

Title: "View in code" in brand panel does not work in new IDE

Summary: In the new IDE, using "View in code" from the brand panel on a selected color does not trigger any action.

Steps to Reproduce:

Open the brand panel.
Select any color.
Click on View in code.
Observe the IDE to see

Actual Result:
No action occurs—neither the project is opened nor the code editor navigates to the related color definition.
https://github.com/user-attachments/assets/73c81f70-1212-4095-b610-41a92f4e6154

Expected Result:
The project should open automatically, and the code editor should scroll to the corresponding color in the appropriate file.

spartan-uyen · 2025-04-08T10:07:43Z

Title: Undo from top bar does not revert code changes in IDE

Summary: When editing code (e.g., changing the text of a text element) and clicking the Undo button on the top bar, the changes are not reverted in the IDE.

Steps to Reproduce:

Open a code file in the IDE (e.g., page.tsx).
Modify some text or content inside the file.
Click the Undo button on the top bar.
Observe the code in the IDE.

Actual Result:
The code remains unchanged and keeps the modified text, as if Undo was never triggered.
https://github.com/user-attachments/assets/96f5c9b6-3186-4f41-9415-77a280a829f0

Expected Result:
The code should revert to its previous state, undoing the last edit.

spartan-uyen · 2025-04-08T10:13:02Z

Title: Editing text on canvas does not update code in IDE

Summary: When a user edits text directly on the canvas, the corresponding code in the IDE does not reflect the change.

Steps to Reproduce:

Open a project and add a text element to the canvas.
Edit the text directly on the canvas.
Open the corresponding code file in the IDE (e.g., page.tsx).
Check if the updated text is reflected in the code.

Actual Result:
The code in the IDE does not change; it still shows the original text. I need to refresh or open it again to see the new change
Uploading Screen Recording 2025-04-08 at 17.12.28.mov…

Expected Result:
The code should automatically update to reflect the new text entered on the canvas.

spartan-uyen · 2025-04-08T10:18:35Z

Title: Double-clicking text opens duplicate code tab

Summary: When double-clicking a text element on the canvas, instead of navigating to the existing code tab, a duplicate tab is opened.

Steps to Reproduce:

Open a text element in the IDE and keep the corresponding code file open (e.g., page.tsx).
Double-click the text element on the canvas.
Observe the tabs in the IDE.

Actual Result:
A new tab with the same file (e.g., page.tsx) is opened, resulting in duplicate tabs.
https://github.com/user-attachments/assets/b1a51e0d-d6e3-40c5-ad7a-ef2d77c1e4c9

Expected Result:
The existing code tab should be focused and navigated to the corresponding code line, not duplicated.

spartan-uyen · 2025-04-08T10:21:58Z

Title: Selected IDE tab not retained after switching panels

Summary: When switching away from the IDE to another panel (e.g., Chat or Style) and returning, the previously selected file tab is not preserved.

Steps to Reproduce:

Open a file in the IDE (e.g., page.tsx) without making any edits.
Switch to another panel, such as Chat or Style.
Return to the IDE panel.

Actual Result:
The IDE opens with no file tab selected. Previously opened tabs are not retained.
https://github.com/user-attachments/assets/356d4c83-9d7d-4ed3-a755-a271c2e6983e

Expected Result:
The previously selected file tab should remain open and focused when returning to the IDE.

spartan-uyen · 2025-04-08T10:28:54Z

Title: Image file opens as raw code in new IDE

Summary: When opening an image file in the new IDE, the content is shown as raw encoded text instead of rendering the actual image.

Steps to Reproduce:

Open the new IDE.
Navigate to an image file (e.g., .png or .jpg).
Click to open the image file.

Actual Result:
The IDE displays raw encoded content (e.g., {��IEND�B`�) instead of rendering the image.
https://github.com/user-attachments/assets/a8270bd1-623f-4e44-969a-058717721cff

Expected Result:
The IDE should display the actual image preview, similar to how it works in VS Code.

spartan-uyen · 2025-04-08T10:30:56Z

Title: Long tab names break into multiple lines instead of truncating

Summary: When opening a file with a long name, the tab label wraps to a second line instead of maintaining a single-line display with truncation.

Steps to Reproduce:

Open a file with a long filename in the IDE (e.g., very-long-file-name-example.tsx).
Observe the tab label in the tab bar.

Actual Result:
The file name wraps to the next line.

Expected Result:
Long file names should remain on a single line and be truncated with ellipsis (...) if needed, preserving the layout.

Kitenite

This is super cool. Awesome work @iNerdStack! There's just 2 small things:

There's this slight overscroll I'm not sure how to get rid of
When there's change from outside the page. For example a file is open but it was changed in an IDE, it doesn't update

https://cdn.discordapp.com/attachments/1300816891127795733/1360914741547106344/Clipboard-20250413-094815-911.mp4?ex=67fcda1e&is=67fb889e&hm=264070cb7123260f781ef11e5ecfc138ab5580b690d0bbb13c3db3363e1666a0&

https://cdn.discordapp.com/attachments/1300816891127795733/1360914740909576314/Clipboard-20250413-094057-789.gif?ex=67fcda1e&is=67fb889e&hm=a3828f60cd51b177c0e4b20ec988c4914a8b77d19b1456aee42ecb5ed03a690e&

* implemented code mirror code * implement file scans & other ide functionalities * fix bun lockfile * clean up * more clean up * Move tab change logic * Clean up * fix undo in one file loads code from another file * fix "View in code" in brand panel does not work in new IDE * persist devtab state and improve "view in onlook" functionalities * fix Long tab names break into multiple lines instead of truncating * Ignore next-prod dir

iNerdStack added 2 commits April 5, 2025 22:02

implemented code mirror code

23bfbaf

implement file scans & other ide functionalities

19999e6

ellipsis-dev bot reviewed Apr 6, 2025

View reviewed changes

iNerdStack added 4 commits April 6, 2025 19:52

Merge remote-tracking branch 'origin/main' into ide

52576b0

fix bun lockfile

c0f5aeb

clean up

f5fb334

more clean up

d1e5761

Kitenite and others added 10 commits April 11, 2025 21:25

Merge from main

40b4f3e

Move tab change logic

1944b2a

Clean up

47e0db3

fix undo in one file loads code from another file

b7e88ba

fix "View in code" in brand panel does not work in new IDE

238a6b2

persist devtab state and improve "view in onlook" functionalities

0662a4a

fix Long tab names break into multiple lines instead of truncating

eafdafe

Merge branch 'main' into ide

8704d95

Ignore next-prod dir

ada41ee

Clean up

cdac6a3

Kitenite approved these changes Apr 13, 2025

View reviewed changes

Kitenite merged commit 0897527 into onlook-dev:main Apr 13, 2025

iNerdStack deleted the ide branch April 15, 2025 20:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Implement Dev panel & IDE functionalities #1740

feat: Implement Dev panel & IDE functionalities #1740

Uh oh!

iNerdStack commented Apr 6, 2025 •

edited by ellipsis-dev bot

Loading

Uh oh!

ellipsis-dev bot left a comment

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

Kitenite left a comment •

edited

Loading

Uh oh!

Uh oh!

feat: Implement Dev panel & IDE functionalities #1740

feat: Implement Dev panel & IDE functionalities #1740

Uh oh!

Conversation

iNerdStack commented Apr 6, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issues

Type of Change

Testing

Screenshots (if applicable)

Additional Notes

Uh oh!

ellipsis-dev bot left a comment

Choose a reason for hiding this comment

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

spartan-uyen commented Apr 8, 2025

Uh oh!

Kitenite left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

iNerdStack commented Apr 6, 2025 •

edited by ellipsis-dev bot

Loading

Kitenite left a comment •

edited

Loading