Feat: Add inline code editor (#1156) (#1232) (#1220) (#1235)

## 🚀 Feature: Inline Code Editor

This PR adds a comprehensive inline code editing experience to the
DyadWrite component.

### ✨ What's New

- **Inline Monaco Editor**: Edit code directly within the component
using Monaco Editor
- **Cancel/Revert**: Cancel changes and revert to original code state
- **Language Detection**: Automatic syntax highlighting based on file
extensions
- **Theme Support**: Proper dark/light mode theming integration



https://github.com/user-attachments/assets/c44ab622-6b86-403c-904d-3f327f9719e8


    
<!-- This is an auto-generated description by cubic. -->
---

## Summary by cubic
Adds an inline Monaco-based code editor to DyadWrite so users can edit
code blocks in place, then save or cancel changes. Saves stream edits
back to the chat as a dyad-edit block.

- **New Features**
- Inline editor with Edit, Save, and Cancel; preserves original code and
auto-expands when editing.
  - Language detection from file extension and dark/light theme support.
- Save streams edits via useStreamChat as <dyad-edit
path="...">...</dyad-edit> tied to the selected chat.
- Non-edit view still uses CodeHighlight; visibility toggle and
in-progress state respected.

- **Refactors**
- ChatMessage now uses DyadMarkdownParser instead of
VanillaMarkdownParser.

<!-- End of auto-generated description by cubic. -->

e2e-tests/chat_mode.spec.ts

@@ -22,3 +22,37 @@ test("chat mode selector - ask mode", async ({ po }) => {
   await po.snapshotServerDump("all-messages");
   await po.snapshotMessages({ replaceDumpPath: true });
 });
+
+test("dyadwrite edit and save - basic flow", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
+  await po.importApp("minimal");
+  await po.clickNewChat();
+
+  await po.sendPrompt(
+    "Create a simple React component in src/components/Hello.tsx",
+  );
+  await po.waitForChatCompletion();
+
+  await po.clickEditButton();
+  await po.editFileContent("// Test modification\n");
+
+  await po.saveFile();
+
+  await po.snapshotMessages({ replaceDumpPath: true });
+});
+
+test("dyadwrite edit and cancel", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
+  await po.importApp("minimal");
+  await po.clickNewChat();
+
+  await po.sendPrompt("Create a utility function in src/utils/helper.ts");
+  await po.waitForChatCompletion();
+
+  await po.clickEditButton();
+
+  await po.editFileContent("// This should be discarded\n");
+  await po.cancelEdit();
+
+  await po.snapshotMessages({ replaceDumpPath: true });
+});

e2e-tests/helpers/test_helper.ts

@@ -431,6 +431,27 @@ export class PageObject {
   async clickRestart() {
     await this.page.getByRole("button", { name: "Restart" }).click();
   }
+  ////////////////////////////////
+  // Inline code editor
+  ////////////////////////////////
+  async clickEditButton() {
+    await this.page.locator('button:has-text("Edit")').first().click();
+  }
+
+  async editFileContent(content: string) {
+    const editor = this.page.locator(".monaco-editor textarea").first();
+    await editor.focus();
+    await editor.press("Home");
+    await editor.type(content);
+  }
+
+  async saveFile() {
+    await this.page.locator('[data-testid="save-file-button"]').click();
+  }
+
+  async cancelEdit() {
+    await this.page.locator('button:has-text("Cancel")').first().click();
+  }
 
   ////////////////////////////////
   // Preview panel

e2e-tests/snapshots/chat_mode.spec.ts_dyadwrite-edit-and-cancel-1.aria.yml

@@ -0,0 +1,20 @@
+- paragraph: Create a utility function in src/utils/helper.ts
+- img
+- text: file1.txt
+- button "Edit":
+  - img
+- img
+- text: file1.txt typescript
+- button "Copy":
+  - img
+- paragraph: More EOM
+- img
+- text: Approved
+- img
+- text: less than a minute ago
+- img
+- text: wrote 1 file(s)
+- button "Undo":
+  - img
+- button "Retry":
+  - img

e2e-tests/snapshots/chat_mode.spec.ts_dyadwrite-edit-and-save---basic-flow-1.aria.yml

@@ -0,0 +1,24 @@
+- paragraph: Create a simple React component in src/components/Hello.tsx
+- img
+- text: file1.txt
+- button "Cancel":
+  - img
+- img
+- text: file1.txt file1.txt
+- button [disabled]:
+  - img
+- img
+- code:
+  - textbox "Editor content"
+  - list
+- paragraph: More EOM
+- img
+- text: Approved
+- img
+- text: less than a minute ago
+- img
+- text: wrote 1 file(s)
+- button "Undo":
+  - img
+- button "Retry":
+  - img