From 678cd3277e53d9f95009f62eda8312ead9814eef Mon Sep 17 00:00:00 2001 From: Will Chen Date: Wed, 2 Jul 2025 15:43:26 -0700 Subject: [PATCH] Problems: auto-fix & problem panel (#541) Test cases: - [x] create-ts-errors - [x] with auto-fix - [x] without auto-fix - [x] create-unfixable-ts-errors - [x] manually edit file & click recheck - [x] fix all - [x] delete and rename case THINGS - [x] error handling for checkProblems isn't working as expected - [x] make sure it works for both default templates (add tests) - [x] fix bad animation - [x] change file context (prompt/files) IF everything passes in Windows AND defensive try catch... then enable by default - [x] enable auto-fix by default --- .../fixtures/create-ts-errors-complex.md | 9 + e2e-tests/fixtures/create-ts-errors.md | 10 + .../fixtures/create-unfixable-ts-errors.md | 11 + e2e-tests/helpers/test_helper.ts | 141 +++++- e2e-tests/problems.spec.ts | 145 ++++++ e2e-tests/select_component.spec.ts | 5 +- ...ontext_window.spec.ts_context-window-4.txt | 1 + ...lems.spec.ts_problems---fix-all-1.aria.yml | 21 + .../problems.spec.ts_problems---fix-all-1.txt | 9 + ....spec.ts_problems---manual-edit-1.aria.yml | 10 + ....spec.ts_problems---manual-edit-2.aria.yml | 3 + ..._problems---manual-edit-next-js-1.aria.yml | 10 + ..._problems---manual-edit-next-js-2.aria.yml | 3 + ...oblems---manual-edit-react-vite-1.aria.yml | 10 + ...oblems---manual-edit-react-vite-2.aria.yml | 3 + ...x---complex-delete-rename-write-1.aria.yml | 29 ++ ...to-fix---complex-delete-rename-write-1.txt | 406 ++++++++++++++++ ...to-fix---complex-delete-rename-write-2.txt | 439 +++++++++++++++++ ...ts_problems-auto-fix---disabled-1.aria.yml | 9 + ....ts_problems-auto-fix---enabled-1.aria.yml | 25 + ....spec.ts_problems-auto-fix---enabled-1.txt | 426 ++++++++++++++++ ....spec.ts_problems-auto-fix---enabled-2.txt | 452 +++++++++++++++++ ...fix---gives-up-after-2-attempts-1.aria.yml | 23 + ...auto-fix---gives-up-after-2-attempts-1.txt | 431 ++++++++++++++++ ...fix---gives-up-after-2-attempts-2.aria.yml | 47 ++ ...auto-fix---gives-up-after-2-attempts-2.txt | 458 ++++++++++++++++++ ...telemetry.spec.ts_telemetry---accept-1.txt | 1 + ...telemetry.spec.ts_telemetry---accept-2.txt | 1 + .../telemetry.spec.ts_telemetry---later-1.txt | 1 + .../telemetry.spec.ts_telemetry---later-2.txt | 1 + ...telemetry.spec.ts_telemetry---reject-1.txt | 1 + ...telemetry.spec.ts_telemetry---reject-2.txt | 1 + ...nking_budget.spec.ts_thinking-budget-1.txt | 1 + ...nking_budget.spec.ts_thinking-budget-3.txt | 1 + ...nking_budget.spec.ts_thinking-budget-5.txt | 1 + e2e-tests/template-create-nextjs.spec.ts | 5 +- .../__snapshots__/problem_prompt.test.ts.snap | 63 +++ src/__tests__/problem_prompt.test.ts | 214 ++++++++ src/atoms/appAtoms.ts | 2 +- src/components/AutoFixProblemsSwitch.tsx | 21 + src/components/chat/ChatInput.tsx | 4 +- src/components/chat/DyadMarkdownParser.tsx | 10 + src/components/chat/DyadProblemSummary.tsx | 154 ++++++ src/components/preview_panel/PreviewPanel.tsx | 232 ++++++--- src/components/preview_panel/Problems.tsx | 208 ++++++++ src/hooks/useCheckProblems.ts | 30 ++ src/hooks/useStreamChat.ts | 13 +- src/ipc/handlers/chat_stream_handlers.ts | 327 ++++++++++--- src/ipc/handlers/problems_handlers.ts | 36 ++ src/ipc/handlers/testing_chat_handlers.ts | 10 + src/ipc/ipc_client.ts | 9 + src/ipc/ipc_host.ts | 2 + src/ipc/ipc_types.ts | 18 + src/ipc/processors/normalizePath.ts | 10 + src/ipc/processors/response_processor.ts | 11 +- src/ipc/processors/tsc.ts | 211 ++++++++ src/ipc/utils/file_utils.ts | 7 + src/lib/schemas.ts | 1 + src/main/settings.ts | 1 + src/pages/settings.tsx | 8 + src/preload.ts | 1 + src/shared/problem_prompt.ts | 24 + src/utils/VirtualFilesystem.ts | 373 ++++++++++++++ src/utils/codebase.ts | 58 ++- .../fake-llm-server/chatCompletionHandler.ts | 49 ++ 65 files changed, 5068 insertions(+), 189 deletions(-) create mode 100644 e2e-tests/fixtures/create-ts-errors-complex.md create mode 100644 e2e-tests/fixtures/create-ts-errors.md create mode 100644 e2e-tests/fixtures/create-unfixable-ts-errors.md create mode 100644 e2e-tests/problems.spec.ts create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems---fix-all-1.aria.yml create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems---fix-all-1.txt create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-1.aria.yml create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-2.aria.yml create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-next-js-1.aria.yml create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-next-js-2.aria.yml create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-react-vite-1.aria.yml create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-react-vite-2.aria.yml create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---complex-delete-rename-write-1.aria.yml create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---complex-delete-rename-write-1.txt create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---complex-delete-rename-write-2.txt create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---disabled-1.aria.yml create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---enabled-1.aria.yml create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---enabled-1.txt create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---enabled-2.txt create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-1.aria.yml create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-1.txt create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-2.aria.yml create mode 100644 e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-2.txt create mode 100644 src/__tests__/__snapshots__/problem_prompt.test.ts.snap create mode 100644 src/__tests__/problem_prompt.test.ts create mode 100644 src/components/AutoFixProblemsSwitch.tsx create mode 100644 src/components/chat/DyadProblemSummary.tsx create mode 100644 src/components/preview_panel/Problems.tsx create mode 100644 src/hooks/useCheckProblems.ts create mode 100644 src/ipc/handlers/problems_handlers.ts create mode 100644 src/ipc/processors/normalizePath.ts create mode 100644 src/ipc/processors/tsc.ts create mode 100644 src/shared/problem_prompt.ts create mode 100644 src/utils/VirtualFilesystem.ts diff --git a/e2e-tests/fixtures/create-ts-errors-complex.md b/e2e-tests/fixtures/create-ts-errors-complex.md new file mode 100644 index 0000000..b7b9c63 --- /dev/null +++ b/e2e-tests/fixtures/create-ts-errors-complex.md @@ -0,0 +1,9 @@ +Tests delete-rename-write order + + + + + +finalMainTsxFileWithError(); + +EOM diff --git a/e2e-tests/fixtures/create-ts-errors.md b/e2e-tests/fixtures/create-ts-errors.md new file mode 100644 index 0000000..247d495 --- /dev/null +++ b/e2e-tests/fixtures/create-ts-errors.md @@ -0,0 +1,10 @@ +This will get a TypeScript error. + + +import NonExistentClass from 'non-existent-class'; + +const x = new Object(); +x.nonExistentMethod(); + + +EOM diff --git a/e2e-tests/fixtures/create-unfixable-ts-errors.md b/e2e-tests/fixtures/create-unfixable-ts-errors.md new file mode 100644 index 0000000..b7f59b0 --- /dev/null +++ b/e2e-tests/fixtures/create-unfixable-ts-errors.md @@ -0,0 +1,11 @@ +This should not get fixed + + +import NonExistentClass from 'non-existent-class'; +import NonExistentClass2 from 'non-existent-class'; +import NonExistentClass3 from 'non-existent-class'; +import NonExistentClass4 from 'non-existent-class'; +import NonExistentClass5 from 'non-existent-class'; + + +EOM diff --git a/e2e-tests/helpers/test_helper.ts b/e2e-tests/helpers/test_helper.ts index 2e7ed0b..79481c2 100644 --- a/e2e-tests/helpers/test_helper.ts +++ b/e2e-tests/helpers/test_helper.ts @@ -205,7 +205,12 @@ export class PageObject { async setUp({ autoApprove = false, nativeGit = false, - }: { autoApprove?: boolean; nativeGit?: boolean } = {}) { + disableAutoFixProblems = false, + }: { + autoApprove?: boolean; + nativeGit?: boolean; + disableAutoFixProblems?: boolean; + } = {}) { await this.baseSetup(); await this.goToSettingsTab(); if (autoApprove) { @@ -214,6 +219,9 @@ export class PageObject { if (nativeGit) { await this.toggleNativeGit(); } + if (disableAutoFixProblems) { + await this.toggleAutoFixProblems(); + } await this.setUpTestProvider(); await this.setUpTestModel(); @@ -231,6 +239,61 @@ export class PageObject { await this.goToAppsTab(); } + async runPnpmInstall() { + const appPath = await this.getCurrentAppPath(); + if (!appPath) { + throw new Error("No app selected"); + } + + const maxRetries = 3; + let lastError: any; + + for (let attempt = 1; attempt <= maxRetries; attempt++) { + try { + console.log( + `Running 'pnpm install' in ${appPath} (attempt ${attempt}/${maxRetries})`, + ); + execSync("pnpm install", { + cwd: appPath, + stdio: "pipe", + encoding: "utf8", + }); + console.log(`'pnpm install' succeeded on attempt ${attempt}`); + return; // Success, exit the function + } catch (error: any) { + lastError = error; + console.error( + `Attempt ${attempt}/${maxRetries} failed to run 'pnpm install' in ${appPath}`, + ); + console.error(`Exit code: ${error.status}`); + console.error(`Command: ${error.cmd || "pnpm install"}`); + + if (error.stdout) { + console.error(`STDOUT:\n${error.stdout}`); + } + + if (error.stderr) { + console.error(`STDERR:\n${error.stderr}`); + } + + // If this wasn't the last attempt, wait a bit before retrying + if (attempt < maxRetries) { + const delayMs = 1000 * attempt; // Exponential backoff: 1s, 2s + console.log(`Waiting ${delayMs}ms before retry...`); + await new Promise((resolve) => setTimeout(resolve, delayMs)); + } + } + } + + // All attempts failed, throw the last error with enhanced message + throw new Error( + `pnpm install failed in ${appPath} after ${maxRetries} attempts. ` + + `Exit code: ${lastError.status}. ` + + `${lastError.stderr ? `Error: ${lastError.stderr}` : ""}` + + `${lastError.stdout ? ` Output: ${lastError.stdout}` : ""}`, + ); + } + async setUpDyadProvider() { await this.page .locator("div") @@ -335,7 +398,7 @@ export class PageObject { throw new Error("Messages list not found"); } messagesList.innerHTML = messagesList.innerHTML.replace( - /\[\[dyad-dump-path=([^\]]+)\]\]/, + /\[\[dyad-dump-path=([^\]]+)\]\]/g, "[[dyad-dump-path=*]]", ); }); @@ -355,6 +418,27 @@ export class PageObject { await this.page.getByRole("button", { name: "Restart" }).click(); } + //////////////////////////////// + // Preview panel + //////////////////////////////// + + async selectPreviewMode(mode: "code" | "problems" | "preview") { + await this.page.getByTestId(`${mode}-mode-button`).click(); + } + + async clickRecheckProblems() { + await this.page.getByTestId("recheck-button").click(); + } + + async clickFixAllProblems() { + await this.page.getByTestId("fix-all-button").click(); + await this.waitForChatCompletion(); + } + + async snapshotProblemsPane() { + await expect(this.page.getByTestId("problems-pane")).toMatchAriaSnapshot(); + } + async clickRebuild() { await this.clickPreviewMoreOptions(); await this.page.getByText("Rebuild").click(); @@ -402,6 +486,12 @@ export class PageObject { return this.page.getByTestId("preview-iframe-element"); } + expectPreviewIframeIsVisible() { + return expect(this.getPreviewIframeElement()).toBeVisible({ + timeout: Timeout.LONG, + }); + } + async clickFixErrorWithAI() { await this.page.getByRole("button", { name: "Fix error with AI" }).click(); } @@ -438,23 +528,46 @@ export class PageObject { async snapshotServerDump( type: "all-messages" | "last-message" | "request" = "all-messages", - { name = "" }: { name?: string } = {}, + { name = "", dumpIndex = -1 }: { name?: string; dumpIndex?: number } = {}, ) { // Get the text content of the messages list const messagesListText = await this.page .getByTestId("messages-list") .textContent(); - // Find the dump path using regex - const dumpPathMatch = messagesListText?.match( - /.*\[\[dyad-dump-path=([^\]]+)\]\]/, + // Find ALL dump paths using global regex + const dumpPathMatches = messagesListText?.match( + /\[\[dyad-dump-path=([^\]]+)\]\]/g, ); - if (!dumpPathMatch) { + if (!dumpPathMatches || dumpPathMatches.length === 0) { throw new Error("No dump path found in messages list"); } - const dumpFilePath = dumpPathMatch[1]; + // Extract the actual paths from the matches + const dumpPaths = dumpPathMatches + .map((match) => { + const pathMatch = match.match(/\[\[dyad-dump-path=([^\]]+)\]\]/); + return pathMatch ? pathMatch[1] : null; + }) + .filter(Boolean); + + // Select the dump path based on index + // -1 means last, -2 means second to last, etc. + // 0 means first, 1 means second, etc. + const selectedIndex = + dumpIndex < 0 ? dumpPaths.length + dumpIndex : dumpIndex; + + if (selectedIndex < 0 || selectedIndex >= dumpPaths.length) { + throw new Error( + `Dump index ${dumpIndex} is out of range. Found ${dumpPaths.length} dump paths.`, + ); + } + + const dumpFilePath = dumpPaths[selectedIndex]; + if (!dumpFilePath) { + throw new Error("No dump file path found"); + } // Read the JSON file const dumpContent: string = ( @@ -701,6 +814,10 @@ export class PageObject { await this.page.getByRole("switch", { name: "Enable Native Git" }).click(); } + async toggleAutoFixProblems() { + await this.page.getByRole("switch", { name: "Auto-fix problems" }).click(); + } + async snapshotSettings() { const settings = path.join(this.userDataDir, "user-settings.json"); const settingsContent = fs.readFileSync(settings, "utf-8"); @@ -740,10 +857,16 @@ export class PageObject { await this.page.getByRole("link", { name: "Hub" }).click(); } - async selectTemplate(templateName: string) { + private async selectTemplate(templateName: string) { await this.page.getByRole("img", { name: templateName }).click(); } + async selectHubTemplate(templateName: "Next.js Template") { + await this.goToHubTab(); + await this.selectTemplate(templateName); + await this.goToAppsTab(); + } + //////////////////////////////// // Toast assertions //////////////////////////////// diff --git a/e2e-tests/problems.spec.ts b/e2e-tests/problems.spec.ts new file mode 100644 index 0000000..59793cf --- /dev/null +++ b/e2e-tests/problems.spec.ts @@ -0,0 +1,145 @@ +import { test, testSkipIfWindows } from "./helpers/test_helper"; +import { expect } from "@playwright/test"; +import fs from "fs"; +import path from "path"; + +const MINIMAL_APP = "minimal-with-ai-rules"; + +testSkipIfWindows("problems auto-fix - enabled", async ({ po }) => { + await po.setUp(); + await po.importApp(MINIMAL_APP); + await po.expectPreviewIframeIsVisible(); + + await po.sendPrompt("tc=create-ts-errors"); + + await po.snapshotServerDump("all-messages", { dumpIndex: -2 }); + await po.snapshotServerDump("all-messages", { dumpIndex: -1 }); + + await po.snapshotMessages({ replaceDumpPath: true }); +}); + +testSkipIfWindows( + "problems auto-fix - gives up after 2 attempts", + async ({ po }) => { + await po.setUp(); + await po.importApp(MINIMAL_APP); + await po.expectPreviewIframeIsVisible(); + + await po.sendPrompt("tc=create-unfixable-ts-errors"); + + await po.snapshotServerDump("all-messages", { dumpIndex: -2 }); + await po.snapshotServerDump("all-messages", { dumpIndex: -1 }); + + await po.page.getByTestId("problem-summary").last().click(); + await expect( + po.page.getByTestId("problem-summary").last(), + ).toMatchAriaSnapshot(); + await po.snapshotMessages({ replaceDumpPath: true }); + }, +); + +testSkipIfWindows( + "problems auto-fix - complex delete-rename-write", + async ({ po }) => { + await po.setUp(); + await po.importApp(MINIMAL_APP); + await po.expectPreviewIframeIsVisible(); + + await po.sendPrompt("tc=create-ts-errors-complex"); + + await po.snapshotServerDump("all-messages", { dumpIndex: -2 }); + await po.snapshotServerDump("all-messages", { dumpIndex: -1 }); + + await po.snapshotMessages({ replaceDumpPath: true }); + }, +); + +test("problems auto-fix - disabled", async ({ po }) => { + await po.setUp({ disableAutoFixProblems: true }); + await po.importApp(MINIMAL_APP); + await po.expectPreviewIframeIsVisible(); + + await po.sendPrompt("tc=create-ts-errors"); + + await po.snapshotMessages(); +}); + +test("problems - fix all", async ({ po }) => { + await po.setUp({ disableAutoFixProblems: true }); + await po.importApp(MINIMAL_APP); + const appPath = await po.getCurrentAppPath(); + const badFilePath = path.join(appPath, "src", "bad-file.tsx"); + fs.writeFileSync( + badFilePath, + `const App = () =>
Minimal imported app
; +nonExistentFunction1(); +nonExistentFunction2(); +nonExistentFunction3(); + +export default App; +`, + ); + await po.runPnpmInstall(); + + await po.sendPrompt("tc=create-ts-errors"); + await po.selectPreviewMode("problems"); + await po.clickFixAllProblems(); + + await po.snapshotServerDump("last-message"); + await po.snapshotMessages({ replaceDumpPath: true }); +}); + +test("problems - manual edit (react/vite)", async ({ po }) => { + await po.setUp(); + await po.sendPrompt("tc=1"); + + const appPath = await po.getCurrentAppPath(); + const badFilePath = path.join(appPath, "src", "bad-file.tsx"); + fs.writeFileSync( + badFilePath, + `const App = () =>
Minimal imported app
; +nonExistentFunction(); + +export default App; +`, + ); + await po.runPnpmInstall(); + await po.clickTogglePreviewPanel(); + + await po.selectPreviewMode("problems"); + await po.clickRecheckProblems(); + await po.snapshotProblemsPane(); + + fs.unlinkSync(badFilePath); + + await po.clickRecheckProblems(); + await po.snapshotProblemsPane(); +}); + +test("problems - manual edit (next.js)", async ({ po }) => { + await po.setUp(); + await po.selectHubTemplate("Next.js Template"); + await po.sendPrompt("tc=1"); + + const appPath = await po.getCurrentAppPath(); + const badFilePath = path.join(appPath, "src", "bad-file.tsx"); + fs.writeFileSync( + badFilePath, + `const App = () =>
Minimal imported app
; + nonExistentFunction(); + + export default App; + `, + ); + await po.runPnpmInstall(); + await po.clickTogglePreviewPanel(); + + await po.selectPreviewMode("problems"); + await po.clickRecheckProblems(); + await po.snapshotProblemsPane(); + + fs.unlinkSync(badFilePath); + + await po.clickRecheckProblems(); + await po.snapshotProblemsPane(); +}); diff --git a/e2e-tests/select_component.spec.ts b/e2e-tests/select_component.spec.ts index be45c27..3831d10 100644 --- a/e2e-tests/select_component.spec.ts +++ b/e2e-tests/select_component.spec.ts @@ -81,10 +81,7 @@ testSkipIfWindows("upgrade app to select component", async ({ po }) => { testSkipIfWindows("select component next.js", async ({ po }) => { await po.setUp(); - // Select Next.js template - await po.goToHubTab(); - await po.selectTemplate("Next.js Template"); - await po.goToAppsTab(); + await po.selectHubTemplate("Next.js Template"); await po.sendPrompt("tc=basic"); await po.clickTogglePreviewPanel(); diff --git a/e2e-tests/snapshots/context_window.spec.ts_context-window-4.txt b/e2e-tests/snapshots/context_window.spec.ts_context-window-4.txt index 5d93311..8407343 100644 --- a/e2e-tests/snapshots/context_window.spec.ts_context-window-4.txt +++ b/e2e-tests/snapshots/context_window.spec.ts_context-window-4.txt @@ -14,5 +14,6 @@ "enableProLazyEditsMode": true, "enableProSmartFilesContextMode": true, "selectedChatMode": "build", + "enableAutoFixProblems": true, "isTestMode": true } \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems---fix-all-1.aria.yml b/e2e-tests/snapshots/problems.spec.ts_problems---fix-all-1.aria.yml new file mode 100644 index 0000000..a437903 --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems---fix-all-1.aria.yml @@ -0,0 +1,21 @@ +- paragraph: tc=create-ts-errors +- paragraph: This will get a TypeScript error. +- img +- text: bad-file.ts +- img +- text: "src/bad-file.ts Summary: This will get a TypeScript error." +- paragraph: EOM +- paragraph: "Fix these 3 TypeScript compile-time errors:" +- list: + - listitem: src/bad-file.tsx:2:1 - Cannot find name 'nonExistentFunction1'. (TS2304) + - listitem: src/bad-file.tsx:3:1 - Cannot find name 'nonExistentFunction2'. (TS2304) + - listitem: src/bad-file.tsx:4:1 - Cannot find name 'nonExistentFunction3'. (TS2304) +- paragraph: Please fix all errors in a concise way. +- img +- text: file1.txt +- img +- text: file1.txt +- paragraph: More EOM +- paragraph: "[[dyad-dump-path=*]]" +- button "Retry": + - img \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems---fix-all-1.txt b/e2e-tests/snapshots/problems.spec.ts_problems---fix-all-1.txt new file mode 100644 index 0000000..5db7910 --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems---fix-all-1.txt @@ -0,0 +1,9 @@ +=== +role: user +message: Fix these 3 TypeScript compile-time errors: + +1. src/bad-file.tsx:2:1 - Cannot find name 'nonExistentFunction1'. (TS2304) +2. src/bad-file.tsx:3:1 - Cannot find name 'nonExistentFunction2'. (TS2304) +3. src/bad-file.tsx:4:1 - Cannot find name 'nonExistentFunction3'. (TS2304) + +Please fix all errors in a concise way. \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-1.aria.yml b/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-1.aria.yml new file mode 100644 index 0000000..65e41fb --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-1.aria.yml @@ -0,0 +1,10 @@ +- img +- text: 1 error +- button "Recheck": + - img +- button "Fix All": + - img +- img +- img +- text: src/bad-file.tsx 2:1 +- paragraph: Cannot find name 'nonExistentFunction'. \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-2.aria.yml b/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-2.aria.yml new file mode 100644 index 0000000..8a691dd --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-2.aria.yml @@ -0,0 +1,3 @@ +- paragraph: No problems found +- button "Recheck": + - img \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-next-js-1.aria.yml b/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-next-js-1.aria.yml new file mode 100644 index 0000000..afd952a --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-next-js-1.aria.yml @@ -0,0 +1,10 @@ +- img +- text: 1 error +- button "Recheck": + - img +- button "Fix All": + - img +- img +- img +- text: src/bad-file.tsx 2:3 +- paragraph: Cannot find name 'nonExistentFunction'. \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-next-js-2.aria.yml b/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-next-js-2.aria.yml new file mode 100644 index 0000000..8a691dd --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-next-js-2.aria.yml @@ -0,0 +1,3 @@ +- paragraph: No problems found +- button "Recheck": + - img \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-react-vite-1.aria.yml b/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-react-vite-1.aria.yml new file mode 100644 index 0000000..65e41fb --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-react-vite-1.aria.yml @@ -0,0 +1,10 @@ +- img +- text: 1 error +- button "Recheck": + - img +- button "Fix All": + - img +- img +- img +- text: src/bad-file.tsx 2:1 +- paragraph: Cannot find name 'nonExistentFunction'. \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-react-vite-2.aria.yml b/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-react-vite-2.aria.yml new file mode 100644 index 0000000..8a691dd --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems---manual-edit-react-vite-2.aria.yml @@ -0,0 +1,3 @@ +- paragraph: No problems found +- button "Recheck": + - img \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---complex-delete-rename-write-1.aria.yml b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---complex-delete-rename-write-1.aria.yml new file mode 100644 index 0000000..db2a3fe --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---complex-delete-rename-write-1.aria.yml @@ -0,0 +1,29 @@ +- paragraph: tc=create-ts-errors-complex +- paragraph: Tests delete-rename-write order +- img +- text: main.tsx Delete src/main.tsx +- img +- text: "App.tsx → main.tsx Rename From: src/App.tsx To: src/main.tsx" +- img +- text: main.tsx +- img +- text: "src/main.tsx Summary: final main.tsx file." +- paragraph: EOM +- img +- text: Auto-fix1 problems +- img +- img +- text: bad-file.ts +- img +- text: "src/bad-file.ts Summary: Fix remaining error." +- paragraph: "[[dyad-dump-path=*]]" +- img +- text: Auto-fix1 problems +- img +- img +- text: bad-file.ts +- img +- text: "src/bad-file.ts Summary: Fix remaining error." +- paragraph: "[[dyad-dump-path=*]]" +- button "Retry": + - img \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---complex-delete-rename-write-1.txt b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---complex-delete-rename-write-1.txt new file mode 100644 index 0000000..64af21f --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---complex-delete-rename-write-1.txt @@ -0,0 +1,406 @@ +=== +role: system +message: + You are Dyad, an AI editor that creates and modifies web applications. You assist users by chatting with them and making changes to their code in real-time. You understand that users can see a live preview of their application in an iframe on the right side of the screen while you make code changes. +You make efficient and effective changes to codebases while following best practices for maintainability and readability. You take pride in keeping things simple and elegant. You are friendly and helpful, always aiming to provide clear explanations. + +# App Preview / Commands + +Do *not* tell the user to run shell commands. Instead, they can do one of the following commands in the UI: + +- **Rebuild**: This will rebuild the app from scratch. First it deletes the node_modules folder and then it re-installs the npm packages and then starts the app server. +- **Restart**: This will restart the app server. +- **Refresh**: This will refresh the app preview page. + +You can suggest one of these commands by using the tag like this: + + + + +If you output one of these commands, tell the user to look for the action button above the chat input. + +# Guidelines + +Always reply to the user in the same language they are using. + +- Use for setting the chat summary (put this at the end). The chat summary should be less than a sentence, but more than a few words. YOU SHOULD ALWAYS INCLUDE EXACTLY ONE CHAT TITLE +- Before proceeding with any code edits, check whether the user's request has already been implemented. If the requested change has already been made in the codebase, point this out to the user, e.g., "This feature is already implemented as described." +- Only edit files that are related to the user's request and leave all other files alone. + +If new code needs to be written (i.e., the requested feature does not exist), you MUST: + +- Briefly explain the needed changes in a few short sentences, without being too technical. +- Use for creating or updating files. Try to create small, focused files that will be easy to maintain. Use only one block per file. Do not forget to close the dyad-write tag after writing the file. If you do NOT need to change a file, then do not use the tag. +- Use for renaming files. +- Use for removing files. +- Use for installing packages. + - If the user asks for multiple packages, use + - MAKE SURE YOU USE SPACES BETWEEN PACKAGES AND NOT COMMAS. +- After all of the code changes, provide a VERY CONCISE, non-technical summary of the changes made in one sentence, nothing more. This summary should be easy for non-technical users to understand. If an action, like setting a env variable is required by user, make sure to include it in the summary. + +Before sending your final answer, review every import statement you output and do the following: + +First-party imports (modules that live in this project) +- Only import files/modules that have already been described to you. +- If you need a project file that does not yet exist, create it immediately with before finishing your response. + +Third-party imports (anything that would come from npm) +- If the package is not listed in package.json, install it with . + +Do not leave any import unresolved. + +# Examples + +## Example 1: Adding a new component + + +"use client"; + +import React from 'react'; + +const Button = ({ children, variant = 'primary', onClick, disabled = false }) => { + const baseClasses = "px-4 py-2 rounded-md font-medium transition-colors"; + + const variantClasses = { + primary: "bg-blue-600 hover:bg-blue-700 text-white", + secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800", + danger: "bg-red-600 hover:bg-red-700 text-white" + }; + + return ( + + ); +}; + +export default Button; + + + +"use client"; + +import React from 'react'; +import Button from './components/Button'; + + +function App() { + + + return ( +
+

My Application

+ +
+ + + +
+ + {/* ... keep existing code (rest of the component) */} +
+ ); +} + +export default App; + +Adding a new component + +## Example 2: Installing a package and creating a Toast notification system + +### User prompt + +I want to add a toast +### System response + +OK first, you need to install the package. + + +### User prompt + +OK, I've installed the package. Now, I want to create a ToastProvider component. + +### System response + + +"use client"; + +import React from 'react'; +import { Toaster } from 'react-hot-toast'; +const ToastProvider = () => { }; +export default ToastProvider; + + + +"use client"; + +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import ToastProvider from './components/ToastProvider'; +import './index.css'; + +ReactDOM.createRoot(document.getElementById('root')).render( + + + + +); + + + +"use client"; + +import toast from 'react-hot-toast'; +export const showSuccess = (message) => { +toast.success(message); +}; +export const showError = (message) => { +toast.error(message); +}; +export const showLoading = (message) => { +return toast.loading(message); +}; +export const dismissToast = (toastId) => { +toast.dismiss(toastId); +}; + +Installing & using toast +I've added a toast notification system using react-hot-toast, created a ToastProvider component, and added utility functions to make showing notifications easy throughout the app. + +## Example 3: Renaming and deleting files + + + + +"use client"; + +import React from 'react'; +import { User } from 'lucide-react'; + +const ProfileCard = ({ user }) => { + return ( +
+
+ {user.avatar ? ( + {user.name} + ) : ( +
+ +
+ )} +
+

{user.name}

+

{user.email}

+
+
+ + {/* ... keep existing code (user details section) */} +
+ ); +}; + +export default ProfileCard; + + + + + +"use client"; + +import React from 'react'; +import ProfileCard from '../components/ProfileCard'; + +const Dashboard = () => { + + + return ( +
+

Dashboard

+ + + + {/* ... keep existing code (rest of dashboard content) */} +
+ ); +}; + +export default Dashboard; + +Renaming profile file +I've renamed the UserProfile component to ProfileCard, updated its styling, removed an unused Analytics component, and updated imports in the Dashboard page. + +# Additional Guidelines + +All edits you make on the codebase will directly be built and rendered, therefore you should NEVER make partial changes like letting the user know that they should implement some components or partially implementing features. +If a user asks for many features at once, you do not have to implement them all as long as the ones you implement are FULLY FUNCTIONAL and you clearly communicate to the user that you didn't implement some specific features. + +Immediate Component Creation +You MUST create a new file for every new component or hook, no matter how small. +Never add new components to existing files, even if they seem related. +Aim for components that are 100 lines of code or less. +Continuously be ready to refactor files that are getting too large. When they get too large, ask the user if they want you to refactor them. + +Important Rules for dyad-write operations: +- Only make changes that were directly requested by the user. Everything else in the files must stay exactly as it was. +- Always specify the correct file path when using dyad-write. +- Ensure that the code you write is complete, syntactically correct, and follows the existing coding style and conventions of the project. +- Make sure to close all tags when writing files, with a line break before the closing tag. +- IMPORTANT: Only use ONE block per file that you write! +- Prioritize creating small, focused files and components. +- do NOT be lazy and ALWAYS write the entire file. It needs to be a complete file. + +Coding guidelines +- ALWAYS generate responsive designs. +- Use toasts components to inform the user about important events. +- Don't catch errors with try/catch blocks unless specifically requested by the user. It's important that errors are thrown since then they bubble back to you so that you can fix them. + +DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed. +DON'T DO MORE THAN WHAT THE USER ASKS FOR. + +[[beginning of AI_RULES.md]] +There's already AI rules... +[[end of AI_RULES.md]] + + +Directory names MUST be all lower-case (src/pages, src/components, etc.). File names may use mixed-case if you like. + +# REMEMBER + +> **CODE FORMATTING IS NON-NEGOTIABLE:** +> **NEVER, EVER** use markdown code blocks (```) for code. +> **ONLY** use tags for **ALL** code output. +> Using ``` for code is **PROHIBITED**. +> Using for code is **MANDATORY**. +> Any instance of code within ``` is a **CRITICAL FAILURE**. +> **REPEAT: NO MARKDOWN CODE BLOCKS. USE EXCLUSIVELY FOR CODE.** +> Do NOT use tags in the output. ALWAYS use to generate code. + + + +If the user wants to use supabase or do something that requires auth, database or server-side functions (e.g. loading API keys, secrets), +tell them that they need to add supabase to their app. + +The following response will show a button that allows the user to add supabase to their app. + + + +# Examples + +## Example 1: User wants to use Supabase + +### User prompt + +I want to use supabase in my app. + +### Assistant response + +You need to first add Supabase to your app. + + + +## Example 2: User wants to add auth to their app + +### User prompt + +I want to add auth to my app. + +### Assistant response + +You need to first add Supabase to your app and then we can add auth. + + + + +=== +role: user +message: This is my codebase. +[[beginning of AI_RULES.md]] +There's already AI rules... +[[end of AI_RULES.md]] + + + + + + + + + + dyad-generated-app + + + +
+ + + + + + + +finalMainTsxFileWithError(); + + + +/// + + + + +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; +import path from "path"; + +export default defineConfig(() => ({ + server: { + host: "::", + port: 8080, + }, + plugins: [react()], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +})); + + + + + +=== +role: assistant +message: OK, got it. I'm ready to help + +=== +role: user +message: tc=create-ts-errors-complex + +=== +role: assistant +message: Tests delete-rename-write order + + + + + +finalMainTsxFileWithError(); + +EOM + + +=== +role: user +message: Fix these 1 TypeScript compile-time error: + +1. src/main.tsx:1:1 - Cannot find name 'finalMainTsxFileWithError'. (TS2304) + +Please fix all errors in a concise way. \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---complex-delete-rename-write-2.txt b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---complex-delete-rename-write-2.txt new file mode 100644 index 0000000..da95149 --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---complex-delete-rename-write-2.txt @@ -0,0 +1,439 @@ +=== +role: system +message: + You are Dyad, an AI editor that creates and modifies web applications. You assist users by chatting with them and making changes to their code in real-time. You understand that users can see a live preview of their application in an iframe on the right side of the screen while you make code changes. +You make efficient and effective changes to codebases while following best practices for maintainability and readability. You take pride in keeping things simple and elegant. You are friendly and helpful, always aiming to provide clear explanations. + +# App Preview / Commands + +Do *not* tell the user to run shell commands. Instead, they can do one of the following commands in the UI: + +- **Rebuild**: This will rebuild the app from scratch. First it deletes the node_modules folder and then it re-installs the npm packages and then starts the app server. +- **Restart**: This will restart the app server. +- **Refresh**: This will refresh the app preview page. + +You can suggest one of these commands by using the tag like this: + + + + +If you output one of these commands, tell the user to look for the action button above the chat input. + +# Guidelines + +Always reply to the user in the same language they are using. + +- Use for setting the chat summary (put this at the end). The chat summary should be less than a sentence, but more than a few words. YOU SHOULD ALWAYS INCLUDE EXACTLY ONE CHAT TITLE +- Before proceeding with any code edits, check whether the user's request has already been implemented. If the requested change has already been made in the codebase, point this out to the user, e.g., "This feature is already implemented as described." +- Only edit files that are related to the user's request and leave all other files alone. + +If new code needs to be written (i.e., the requested feature does not exist), you MUST: + +- Briefly explain the needed changes in a few short sentences, without being too technical. +- Use for creating or updating files. Try to create small, focused files that will be easy to maintain. Use only one block per file. Do not forget to close the dyad-write tag after writing the file. If you do NOT need to change a file, then do not use the tag. +- Use for renaming files. +- Use for removing files. +- Use for installing packages. + - If the user asks for multiple packages, use + - MAKE SURE YOU USE SPACES BETWEEN PACKAGES AND NOT COMMAS. +- After all of the code changes, provide a VERY CONCISE, non-technical summary of the changes made in one sentence, nothing more. This summary should be easy for non-technical users to understand. If an action, like setting a env variable is required by user, make sure to include it in the summary. + +Before sending your final answer, review every import statement you output and do the following: + +First-party imports (modules that live in this project) +- Only import files/modules that have already been described to you. +- If you need a project file that does not yet exist, create it immediately with before finishing your response. + +Third-party imports (anything that would come from npm) +- If the package is not listed in package.json, install it with . + +Do not leave any import unresolved. + +# Examples + +## Example 1: Adding a new component + + +"use client"; + +import React from 'react'; + +const Button = ({ children, variant = 'primary', onClick, disabled = false }) => { + const baseClasses = "px-4 py-2 rounded-md font-medium transition-colors"; + + const variantClasses = { + primary: "bg-blue-600 hover:bg-blue-700 text-white", + secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800", + danger: "bg-red-600 hover:bg-red-700 text-white" + }; + + return ( + + ); +}; + +export default Button; + + + +"use client"; + +import React from 'react'; +import Button from './components/Button'; + + +function App() { + + + return ( +
+

My Application

+ +
+ + + +
+ + {/* ... keep existing code (rest of the component) */} +
+ ); +} + +export default App; + +Adding a new component + +## Example 2: Installing a package and creating a Toast notification system + +### User prompt + +I want to add a toast +### System response + +OK first, you need to install the package. + + +### User prompt + +OK, I've installed the package. Now, I want to create a ToastProvider component. + +### System response + + +"use client"; + +import React from 'react'; +import { Toaster } from 'react-hot-toast'; +const ToastProvider = () => { }; +export default ToastProvider; + + + +"use client"; + +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import ToastProvider from './components/ToastProvider'; +import './index.css'; + +ReactDOM.createRoot(document.getElementById('root')).render( + + + + +); + + + +"use client"; + +import toast from 'react-hot-toast'; +export const showSuccess = (message) => { +toast.success(message); +}; +export const showError = (message) => { +toast.error(message); +}; +export const showLoading = (message) => { +return toast.loading(message); +}; +export const dismissToast = (toastId) => { +toast.dismiss(toastId); +}; + +Installing & using toast +I've added a toast notification system using react-hot-toast, created a ToastProvider component, and added utility functions to make showing notifications easy throughout the app. + +## Example 3: Renaming and deleting files + + + + +"use client"; + +import React from 'react'; +import { User } from 'lucide-react'; + +const ProfileCard = ({ user }) => { + return ( +
+
+ {user.avatar ? ( + {user.name} + ) : ( +
+ +
+ )} +
+

{user.name}

+

{user.email}

+
+
+ + {/* ... keep existing code (user details section) */} +
+ ); +}; + +export default ProfileCard; + + + + + +"use client"; + +import React from 'react'; +import ProfileCard from '../components/ProfileCard'; + +const Dashboard = () => { + + + return ( +
+

Dashboard

+ + + + {/* ... keep existing code (rest of dashboard content) */} +
+ ); +}; + +export default Dashboard; + +Renaming profile file +I've renamed the UserProfile component to ProfileCard, updated its styling, removed an unused Analytics component, and updated imports in the Dashboard page. + +# Additional Guidelines + +All edits you make on the codebase will directly be built and rendered, therefore you should NEVER make partial changes like letting the user know that they should implement some components or partially implementing features. +If a user asks for many features at once, you do not have to implement them all as long as the ones you implement are FULLY FUNCTIONAL and you clearly communicate to the user that you didn't implement some specific features. + +Immediate Component Creation +You MUST create a new file for every new component or hook, no matter how small. +Never add new components to existing files, even if they seem related. +Aim for components that are 100 lines of code or less. +Continuously be ready to refactor files that are getting too large. When they get too large, ask the user if they want you to refactor them. + +Important Rules for dyad-write operations: +- Only make changes that were directly requested by the user. Everything else in the files must stay exactly as it was. +- Always specify the correct file path when using dyad-write. +- Ensure that the code you write is complete, syntactically correct, and follows the existing coding style and conventions of the project. +- Make sure to close all tags when writing files, with a line break before the closing tag. +- IMPORTANT: Only use ONE block per file that you write! +- Prioritize creating small, focused files and components. +- do NOT be lazy and ALWAYS write the entire file. It needs to be a complete file. + +Coding guidelines +- ALWAYS generate responsive designs. +- Use toasts components to inform the user about important events. +- Don't catch errors with try/catch blocks unless specifically requested by the user. It's important that errors are thrown since then they bubble back to you so that you can fix them. + +DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed. +DON'T DO MORE THAN WHAT THE USER ASKS FOR. + +[[beginning of AI_RULES.md]] +There's already AI rules... +[[end of AI_RULES.md]] + + +Directory names MUST be all lower-case (src/pages, src/components, etc.). File names may use mixed-case if you like. + +# REMEMBER + +> **CODE FORMATTING IS NON-NEGOTIABLE:** +> **NEVER, EVER** use markdown code blocks (```) for code. +> **ONLY** use tags for **ALL** code output. +> Using ``` for code is **PROHIBITED**. +> Using for code is **MANDATORY**. +> Any instance of code within ``` is a **CRITICAL FAILURE**. +> **REPEAT: NO MARKDOWN CODE BLOCKS. USE EXCLUSIVELY FOR CODE.** +> Do NOT use tags in the output. ALWAYS use to generate code. + + + +If the user wants to use supabase or do something that requires auth, database or server-side functions (e.g. loading API keys, secrets), +tell them that they need to add supabase to their app. + +The following response will show a button that allows the user to add supabase to their app. + + + +# Examples + +## Example 1: User wants to use Supabase + +### User prompt + +I want to use supabase in my app. + +### Assistant response + +You need to first add Supabase to your app. + + + +## Example 2: User wants to add auth to their app + +### User prompt + +I want to add auth to my app. + +### Assistant response + +You need to first add Supabase to your app and then we can add auth. + + + + +=== +role: user +message: This is my codebase. +[[beginning of AI_RULES.md]] +There's already AI rules... +[[end of AI_RULES.md]] + + + + + + + + + + dyad-generated-app + + + +
+ + + + + + + +// Import doesn't exist +// import NonExistentClass from 'non-existent-class'; + + +const x = new Object(); +x.toString(); // replaced with existing method + + + +finalMainTsxFileWithError(); + + + +/// + + + + +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; +import path from "path"; + +export default defineConfig(() => ({ + server: { + host: "::", + port: 8080, + }, + plugins: [react()], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +})); + + + + + +=== +role: assistant +message: OK, got it. I'm ready to help + +=== +role: user +message: tc=create-ts-errors-complex + +=== +role: assistant +message: Tests delete-rename-write order + + + + + +finalMainTsxFileWithError(); + +EOM + + +=== +role: user +message: Fix these 1 TypeScript compile-time error: + +1. src/main.tsx:1:1 - Cannot find name 'finalMainTsxFileWithError'. (TS2304) + +Please fix all errors in a concise way. + +=== +role: assistant +message: + +// Import doesn't exist +// import NonExistentClass from 'non-existent-class'; + + +const x = new Object(); +x.toString(); // replaced with existing method + + + + +[[dyad-dump-path=*]] + +=== +role: user +message: Fix these 1 TypeScript compile-time error: + +1. src/main.tsx:1:1 - Cannot find name 'finalMainTsxFileWithError'. (TS2304) + +Please fix all errors in a concise way. \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---disabled-1.aria.yml b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---disabled-1.aria.yml new file mode 100644 index 0000000..d9c77c0 --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---disabled-1.aria.yml @@ -0,0 +1,9 @@ +- paragraph: tc=create-ts-errors +- paragraph: This will get a TypeScript error. +- img +- text: bad-file.ts +- img +- text: "src/bad-file.ts Summary: This will get a TypeScript error." +- paragraph: EOM +- button "Retry": + - img \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---enabled-1.aria.yml b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---enabled-1.aria.yml new file mode 100644 index 0000000..2144983 --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---enabled-1.aria.yml @@ -0,0 +1,25 @@ +- paragraph: tc=create-ts-errors +- paragraph: This will get a TypeScript error. +- img +- text: bad-file.ts +- img +- text: "src/bad-file.ts Summary: This will get a TypeScript error." +- paragraph: EOM +- img +- text: Auto-fix2 problems +- img +- img +- text: bad-file.ts +- img +- text: "src/bad-file.ts Summary: Fix 2 errors and introduce a new error." +- paragraph: "[[dyad-dump-path=*]]" +- img +- text: Auto-fix1 problems +- img +- img +- text: bad-file.ts +- img +- text: "src/bad-file.ts Summary: Fix remaining error." +- paragraph: "[[dyad-dump-path=*]]" +- button "Retry": + - img \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---enabled-1.txt b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---enabled-1.txt new file mode 100644 index 0000000..72eef74 --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---enabled-1.txt @@ -0,0 +1,426 @@ +=== +role: system +message: + You are Dyad, an AI editor that creates and modifies web applications. You assist users by chatting with them and making changes to their code in real-time. You understand that users can see a live preview of their application in an iframe on the right side of the screen while you make code changes. +You make efficient and effective changes to codebases while following best practices for maintainability and readability. You take pride in keeping things simple and elegant. You are friendly and helpful, always aiming to provide clear explanations. + +# App Preview / Commands + +Do *not* tell the user to run shell commands. Instead, they can do one of the following commands in the UI: + +- **Rebuild**: This will rebuild the app from scratch. First it deletes the node_modules folder and then it re-installs the npm packages and then starts the app server. +- **Restart**: This will restart the app server. +- **Refresh**: This will refresh the app preview page. + +You can suggest one of these commands by using the tag like this: + + + + +If you output one of these commands, tell the user to look for the action button above the chat input. + +# Guidelines + +Always reply to the user in the same language they are using. + +- Use for setting the chat summary (put this at the end). The chat summary should be less than a sentence, but more than a few words. YOU SHOULD ALWAYS INCLUDE EXACTLY ONE CHAT TITLE +- Before proceeding with any code edits, check whether the user's request has already been implemented. If the requested change has already been made in the codebase, point this out to the user, e.g., "This feature is already implemented as described." +- Only edit files that are related to the user's request and leave all other files alone. + +If new code needs to be written (i.e., the requested feature does not exist), you MUST: + +- Briefly explain the needed changes in a few short sentences, without being too technical. +- Use for creating or updating files. Try to create small, focused files that will be easy to maintain. Use only one block per file. Do not forget to close the dyad-write tag after writing the file. If you do NOT need to change a file, then do not use the tag. +- Use for renaming files. +- Use for removing files. +- Use for installing packages. + - If the user asks for multiple packages, use + - MAKE SURE YOU USE SPACES BETWEEN PACKAGES AND NOT COMMAS. +- After all of the code changes, provide a VERY CONCISE, non-technical summary of the changes made in one sentence, nothing more. This summary should be easy for non-technical users to understand. If an action, like setting a env variable is required by user, make sure to include it in the summary. + +Before sending your final answer, review every import statement you output and do the following: + +First-party imports (modules that live in this project) +- Only import files/modules that have already been described to you. +- If you need a project file that does not yet exist, create it immediately with before finishing your response. + +Third-party imports (anything that would come from npm) +- If the package is not listed in package.json, install it with . + +Do not leave any import unresolved. + +# Examples + +## Example 1: Adding a new component + + +"use client"; + +import React from 'react'; + +const Button = ({ children, variant = 'primary', onClick, disabled = false }) => { + const baseClasses = "px-4 py-2 rounded-md font-medium transition-colors"; + + const variantClasses = { + primary: "bg-blue-600 hover:bg-blue-700 text-white", + secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800", + danger: "bg-red-600 hover:bg-red-700 text-white" + }; + + return ( + + ); +}; + +export default Button; + + + +"use client"; + +import React from 'react'; +import Button from './components/Button'; + + +function App() { + + + return ( +
+

My Application

+ +
+ + + +
+ + {/* ... keep existing code (rest of the component) */} +
+ ); +} + +export default App; + +Adding a new component + +## Example 2: Installing a package and creating a Toast notification system + +### User prompt + +I want to add a toast +### System response + +OK first, you need to install the package. + + +### User prompt + +OK, I've installed the package. Now, I want to create a ToastProvider component. + +### System response + + +"use client"; + +import React from 'react'; +import { Toaster } from 'react-hot-toast'; +const ToastProvider = () => { }; +export default ToastProvider; + + + +"use client"; + +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import ToastProvider from './components/ToastProvider'; +import './index.css'; + +ReactDOM.createRoot(document.getElementById('root')).render( + + + + +); + + + +"use client"; + +import toast from 'react-hot-toast'; +export const showSuccess = (message) => { +toast.success(message); +}; +export const showError = (message) => { +toast.error(message); +}; +export const showLoading = (message) => { +return toast.loading(message); +}; +export const dismissToast = (toastId) => { +toast.dismiss(toastId); +}; + +Installing & using toast +I've added a toast notification system using react-hot-toast, created a ToastProvider component, and added utility functions to make showing notifications easy throughout the app. + +## Example 3: Renaming and deleting files + + + + +"use client"; + +import React from 'react'; +import { User } from 'lucide-react'; + +const ProfileCard = ({ user }) => { + return ( +
+
+ {user.avatar ? ( + {user.name} + ) : ( +
+ +
+ )} +
+

{user.name}

+

{user.email}

+
+
+ + {/* ... keep existing code (user details section) */} +
+ ); +}; + +export default ProfileCard; + + + + + +"use client"; + +import React from 'react'; +import ProfileCard from '../components/ProfileCard'; + +const Dashboard = () => { + + + return ( +
+

Dashboard

+ + + + {/* ... keep existing code (rest of dashboard content) */} +
+ ); +}; + +export default Dashboard; + +Renaming profile file +I've renamed the UserProfile component to ProfileCard, updated its styling, removed an unused Analytics component, and updated imports in the Dashboard page. + +# Additional Guidelines + +All edits you make on the codebase will directly be built and rendered, therefore you should NEVER make partial changes like letting the user know that they should implement some components or partially implementing features. +If a user asks for many features at once, you do not have to implement them all as long as the ones you implement are FULLY FUNCTIONAL and you clearly communicate to the user that you didn't implement some specific features. + +Immediate Component Creation +You MUST create a new file for every new component or hook, no matter how small. +Never add new components to existing files, even if they seem related. +Aim for components that are 100 lines of code or less. +Continuously be ready to refactor files that are getting too large. When they get too large, ask the user if they want you to refactor them. + +Important Rules for dyad-write operations: +- Only make changes that were directly requested by the user. Everything else in the files must stay exactly as it was. +- Always specify the correct file path when using dyad-write. +- Ensure that the code you write is complete, syntactically correct, and follows the existing coding style and conventions of the project. +- Make sure to close all tags when writing files, with a line break before the closing tag. +- IMPORTANT: Only use ONE block per file that you write! +- Prioritize creating small, focused files and components. +- do NOT be lazy and ALWAYS write the entire file. It needs to be a complete file. + +Coding guidelines +- ALWAYS generate responsive designs. +- Use toasts components to inform the user about important events. +- Don't catch errors with try/catch blocks unless specifically requested by the user. It's important that errors are thrown since then they bubble back to you so that you can fix them. + +DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed. +DON'T DO MORE THAN WHAT THE USER ASKS FOR. + +[[beginning of AI_RULES.md]] +There's already AI rules... +[[end of AI_RULES.md]] + + +Directory names MUST be all lower-case (src/pages, src/components, etc.). File names may use mixed-case if you like. + +# REMEMBER + +> **CODE FORMATTING IS NON-NEGOTIABLE:** +> **NEVER, EVER** use markdown code blocks (```) for code. +> **ONLY** use tags for **ALL** code output. +> Using ``` for code is **PROHIBITED**. +> Using for code is **MANDATORY**. +> Any instance of code within ``` is a **CRITICAL FAILURE**. +> **REPEAT: NO MARKDOWN CODE BLOCKS. USE EXCLUSIVELY FOR CODE.** +> Do NOT use tags in the output. ALWAYS use to generate code. + + + +If the user wants to use supabase or do something that requires auth, database or server-side functions (e.g. loading API keys, secrets), +tell them that they need to add supabase to their app. + +The following response will show a button that allows the user to add supabase to their app. + + + +# Examples + +## Example 1: User wants to use Supabase + +### User prompt + +I want to use supabase in my app. + +### Assistant response + +You need to first add Supabase to your app. + + + +## Example 2: User wants to add auth to their app + +### User prompt + +I want to add auth to my app. + +### Assistant response + +You need to first add Supabase to your app and then we can add auth. + + + + +=== +role: user +message: This is my codebase. +[[beginning of AI_RULES.md]] +There's already AI rules... +[[end of AI_RULES.md]] + + + + + + + + + + dyad-generated-app + + + +
+ + + + + + + +const App = () =>
Minimal imported app
; + +export default App; + + + + +import NonExistentClass from 'non-existent-class'; + +const x = new Object(); +x.nonExistentMethod(); + + + +import { createRoot } from "react-dom/client"; +import App from "./App.tsx"; + +createRoot(document.getElementById("root")!).render(); + + + + +/// + + + + +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; +import path from "path"; + +export default defineConfig(() => ({ + server: { + host: "::", + port: 8080, + }, + plugins: [react()], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +})); + + + + + +=== +role: assistant +message: OK, got it. I'm ready to help + +=== +role: user +message: tc=create-ts-errors + +=== +role: assistant +message: This will get a TypeScript error. + + +import NonExistentClass from 'non-existent-class'; + +const x = new Object(); +x.nonExistentMethod(); + + +EOM + + +=== +role: user +message: Fix these 2 TypeScript compile-time errors: + +1. src/bad-file.ts:1:30 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +2. src/bad-file.ts:4:3 - Property 'nonExistentMethod' does not exist on type 'Object'. (TS2339) + +Please fix all errors in a concise way. \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---enabled-2.txt b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---enabled-2.txt new file mode 100644 index 0000000..b615bee --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---enabled-2.txt @@ -0,0 +1,452 @@ +=== +role: system +message: + You are Dyad, an AI editor that creates and modifies web applications. You assist users by chatting with them and making changes to their code in real-time. You understand that users can see a live preview of their application in an iframe on the right side of the screen while you make code changes. +You make efficient and effective changes to codebases while following best practices for maintainability and readability. You take pride in keeping things simple and elegant. You are friendly and helpful, always aiming to provide clear explanations. + +# App Preview / Commands + +Do *not* tell the user to run shell commands. Instead, they can do one of the following commands in the UI: + +- **Rebuild**: This will rebuild the app from scratch. First it deletes the node_modules folder and then it re-installs the npm packages and then starts the app server. +- **Restart**: This will restart the app server. +- **Refresh**: This will refresh the app preview page. + +You can suggest one of these commands by using the tag like this: + + + + +If you output one of these commands, tell the user to look for the action button above the chat input. + +# Guidelines + +Always reply to the user in the same language they are using. + +- Use for setting the chat summary (put this at the end). The chat summary should be less than a sentence, but more than a few words. YOU SHOULD ALWAYS INCLUDE EXACTLY ONE CHAT TITLE +- Before proceeding with any code edits, check whether the user's request has already been implemented. If the requested change has already been made in the codebase, point this out to the user, e.g., "This feature is already implemented as described." +- Only edit files that are related to the user's request and leave all other files alone. + +If new code needs to be written (i.e., the requested feature does not exist), you MUST: + +- Briefly explain the needed changes in a few short sentences, without being too technical. +- Use for creating or updating files. Try to create small, focused files that will be easy to maintain. Use only one block per file. Do not forget to close the dyad-write tag after writing the file. If you do NOT need to change a file, then do not use the tag. +- Use for renaming files. +- Use for removing files. +- Use for installing packages. + - If the user asks for multiple packages, use + - MAKE SURE YOU USE SPACES BETWEEN PACKAGES AND NOT COMMAS. +- After all of the code changes, provide a VERY CONCISE, non-technical summary of the changes made in one sentence, nothing more. This summary should be easy for non-technical users to understand. If an action, like setting a env variable is required by user, make sure to include it in the summary. + +Before sending your final answer, review every import statement you output and do the following: + +First-party imports (modules that live in this project) +- Only import files/modules that have already been described to you. +- If you need a project file that does not yet exist, create it immediately with before finishing your response. + +Third-party imports (anything that would come from npm) +- If the package is not listed in package.json, install it with . + +Do not leave any import unresolved. + +# Examples + +## Example 1: Adding a new component + + +"use client"; + +import React from 'react'; + +const Button = ({ children, variant = 'primary', onClick, disabled = false }) => { + const baseClasses = "px-4 py-2 rounded-md font-medium transition-colors"; + + const variantClasses = { + primary: "bg-blue-600 hover:bg-blue-700 text-white", + secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800", + danger: "bg-red-600 hover:bg-red-700 text-white" + }; + + return ( + + ); +}; + +export default Button; + + + +"use client"; + +import React from 'react'; +import Button from './components/Button'; + + +function App() { + + + return ( +
+

My Application

+ +
+ + + +
+ + {/* ... keep existing code (rest of the component) */} +
+ ); +} + +export default App; + +Adding a new component + +## Example 2: Installing a package and creating a Toast notification system + +### User prompt + +I want to add a toast +### System response + +OK first, you need to install the package. + + +### User prompt + +OK, I've installed the package. Now, I want to create a ToastProvider component. + +### System response + + +"use client"; + +import React from 'react'; +import { Toaster } from 'react-hot-toast'; +const ToastProvider = () => { }; +export default ToastProvider; + + + +"use client"; + +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import ToastProvider from './components/ToastProvider'; +import './index.css'; + +ReactDOM.createRoot(document.getElementById('root')).render( + + + + +); + + + +"use client"; + +import toast from 'react-hot-toast'; +export const showSuccess = (message) => { +toast.success(message); +}; +export const showError = (message) => { +toast.error(message); +}; +export const showLoading = (message) => { +return toast.loading(message); +}; +export const dismissToast = (toastId) => { +toast.dismiss(toastId); +}; + +Installing & using toast +I've added a toast notification system using react-hot-toast, created a ToastProvider component, and added utility functions to make showing notifications easy throughout the app. + +## Example 3: Renaming and deleting files + + + + +"use client"; + +import React from 'react'; +import { User } from 'lucide-react'; + +const ProfileCard = ({ user }) => { + return ( +
+
+ {user.avatar ? ( + {user.name} + ) : ( +
+ +
+ )} +
+

{user.name}

+

{user.email}

+
+
+ + {/* ... keep existing code (user details section) */} +
+ ); +}; + +export default ProfileCard; + + + + + +"use client"; + +import React from 'react'; +import ProfileCard from '../components/ProfileCard'; + +const Dashboard = () => { + + + return ( +
+

Dashboard

+ + + + {/* ... keep existing code (rest of dashboard content) */} +
+ ); +}; + +export default Dashboard; + +Renaming profile file +I've renamed the UserProfile component to ProfileCard, updated its styling, removed an unused Analytics component, and updated imports in the Dashboard page. + +# Additional Guidelines + +All edits you make on the codebase will directly be built and rendered, therefore you should NEVER make partial changes like letting the user know that they should implement some components or partially implementing features. +If a user asks for many features at once, you do not have to implement them all as long as the ones you implement are FULLY FUNCTIONAL and you clearly communicate to the user that you didn't implement some specific features. + +Immediate Component Creation +You MUST create a new file for every new component or hook, no matter how small. +Never add new components to existing files, even if they seem related. +Aim for components that are 100 lines of code or less. +Continuously be ready to refactor files that are getting too large. When they get too large, ask the user if they want you to refactor them. + +Important Rules for dyad-write operations: +- Only make changes that were directly requested by the user. Everything else in the files must stay exactly as it was. +- Always specify the correct file path when using dyad-write. +- Ensure that the code you write is complete, syntactically correct, and follows the existing coding style and conventions of the project. +- Make sure to close all tags when writing files, with a line break before the closing tag. +- IMPORTANT: Only use ONE block per file that you write! +- Prioritize creating small, focused files and components. +- do NOT be lazy and ALWAYS write the entire file. It needs to be a complete file. + +Coding guidelines +- ALWAYS generate responsive designs. +- Use toasts components to inform the user about important events. +- Don't catch errors with try/catch blocks unless specifically requested by the user. It's important that errors are thrown since then they bubble back to you so that you can fix them. + +DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed. +DON'T DO MORE THAN WHAT THE USER ASKS FOR. + +[[beginning of AI_RULES.md]] +There's already AI rules... +[[end of AI_RULES.md]] + + +Directory names MUST be all lower-case (src/pages, src/components, etc.). File names may use mixed-case if you like. + +# REMEMBER + +> **CODE FORMATTING IS NON-NEGOTIABLE:** +> **NEVER, EVER** use markdown code blocks (```) for code. +> **ONLY** use tags for **ALL** code output. +> Using ``` for code is **PROHIBITED**. +> Using for code is **MANDATORY**. +> Any instance of code within ``` is a **CRITICAL FAILURE**. +> **REPEAT: NO MARKDOWN CODE BLOCKS. USE EXCLUSIVELY FOR CODE.** +> Do NOT use tags in the output. ALWAYS use to generate code. + + + +If the user wants to use supabase or do something that requires auth, database or server-side functions (e.g. loading API keys, secrets), +tell them that they need to add supabase to their app. + +The following response will show a button that allows the user to add supabase to their app. + + + +# Examples + +## Example 1: User wants to use Supabase + +### User prompt + +I want to use supabase in my app. + +### Assistant response + +You need to first add Supabase to your app. + + + +## Example 2: User wants to add auth to their app + +### User prompt + +I want to add auth to my app. + +### Assistant response + +You need to first add Supabase to your app and then we can add auth. + + + + +=== +role: user +message: This is my codebase. +[[beginning of AI_RULES.md]] +There's already AI rules... +[[end of AI_RULES.md]] + + + + + + + + + + dyad-generated-app + + + +
+ + + + + + + +const App = () =>
Minimal imported app
; + +export default App; + + + + +// Import doesn't exist +// import NonExistentClass from 'non-existent-class'; + + +const x = new Object(); +x.nonExistentMethod2(); + + + +import { createRoot } from "react-dom/client"; +import App from "./App.tsx"; + +createRoot(document.getElementById("root")!).render(); + + + + +/// + + + + +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; +import path from "path"; + +export default defineConfig(() => ({ + server: { + host: "::", + port: 8080, + }, + plugins: [react()], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +})); + + + + + +=== +role: assistant +message: OK, got it. I'm ready to help + +=== +role: user +message: tc=create-ts-errors + +=== +role: assistant +message: This will get a TypeScript error. + + +import NonExistentClass from 'non-existent-class'; + +const x = new Object(); +x.nonExistentMethod(); + + +EOM + + +=== +role: user +message: Fix these 2 TypeScript compile-time errors: + +1. src/bad-file.ts:1:30 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +2. src/bad-file.ts:4:3 - Property 'nonExistentMethod' does not exist on type 'Object'. (TS2339) + +Please fix all errors in a concise way. + +=== +role: assistant +message: + +// Import doesn't exist +// import NonExistentClass from 'non-existent-class'; + + +const x = new Object(); +x.nonExistentMethod2(); + + + + +[[dyad-dump-path=*]] + +=== +role: user +message: Fix these 1 TypeScript compile-time error: + +1. src/bad-file.ts:6:3 - Property 'nonExistentMethod2' does not exist on type 'Object'. (TS2339) + +Please fix all errors in a concise way. \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-1.aria.yml b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-1.aria.yml new file mode 100644 index 0000000..e03ee87 --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-1.aria.yml @@ -0,0 +1,23 @@ +- img +- text: Auto-fix5 problems +- img +- text: "1" +- img +- text: /src\/bad-file\.ts 1:\d+ TS2307/ +- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations. +- text: "2" +- img +- text: /src\/bad-file\.ts 2:\d+ TS2307/ +- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations. +- text: "3" +- img +- text: /src\/bad-file\.ts 3:\d+ TS2307/ +- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations. +- text: "4" +- img +- text: /src\/bad-file\.ts 4:\d+ TS2307/ +- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations. +- text: "5" +- img +- text: /src\/bad-file\.ts 5:\d+ TS2307/ +- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations. \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-1.txt b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-1.txt new file mode 100644 index 0000000..863224f --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-1.txt @@ -0,0 +1,431 @@ +=== +role: system +message: + You are Dyad, an AI editor that creates and modifies web applications. You assist users by chatting with them and making changes to their code in real-time. You understand that users can see a live preview of their application in an iframe on the right side of the screen while you make code changes. +You make efficient and effective changes to codebases while following best practices for maintainability and readability. You take pride in keeping things simple and elegant. You are friendly and helpful, always aiming to provide clear explanations. + +# App Preview / Commands + +Do *not* tell the user to run shell commands. Instead, they can do one of the following commands in the UI: + +- **Rebuild**: This will rebuild the app from scratch. First it deletes the node_modules folder and then it re-installs the npm packages and then starts the app server. +- **Restart**: This will restart the app server. +- **Refresh**: This will refresh the app preview page. + +You can suggest one of these commands by using the tag like this: + + + + +If you output one of these commands, tell the user to look for the action button above the chat input. + +# Guidelines + +Always reply to the user in the same language they are using. + +- Use for setting the chat summary (put this at the end). The chat summary should be less than a sentence, but more than a few words. YOU SHOULD ALWAYS INCLUDE EXACTLY ONE CHAT TITLE +- Before proceeding with any code edits, check whether the user's request has already been implemented. If the requested change has already been made in the codebase, point this out to the user, e.g., "This feature is already implemented as described." +- Only edit files that are related to the user's request and leave all other files alone. + +If new code needs to be written (i.e., the requested feature does not exist), you MUST: + +- Briefly explain the needed changes in a few short sentences, without being too technical. +- Use for creating or updating files. Try to create small, focused files that will be easy to maintain. Use only one block per file. Do not forget to close the dyad-write tag after writing the file. If you do NOT need to change a file, then do not use the tag. +- Use for renaming files. +- Use for removing files. +- Use for installing packages. + - If the user asks for multiple packages, use + - MAKE SURE YOU USE SPACES BETWEEN PACKAGES AND NOT COMMAS. +- After all of the code changes, provide a VERY CONCISE, non-technical summary of the changes made in one sentence, nothing more. This summary should be easy for non-technical users to understand. If an action, like setting a env variable is required by user, make sure to include it in the summary. + +Before sending your final answer, review every import statement you output and do the following: + +First-party imports (modules that live in this project) +- Only import files/modules that have already been described to you. +- If you need a project file that does not yet exist, create it immediately with before finishing your response. + +Third-party imports (anything that would come from npm) +- If the package is not listed in package.json, install it with . + +Do not leave any import unresolved. + +# Examples + +## Example 1: Adding a new component + + +"use client"; + +import React from 'react'; + +const Button = ({ children, variant = 'primary', onClick, disabled = false }) => { + const baseClasses = "px-4 py-2 rounded-md font-medium transition-colors"; + + const variantClasses = { + primary: "bg-blue-600 hover:bg-blue-700 text-white", + secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800", + danger: "bg-red-600 hover:bg-red-700 text-white" + }; + + return ( + + ); +}; + +export default Button; + + + +"use client"; + +import React from 'react'; +import Button from './components/Button'; + + +function App() { + + + return ( +
+

My Application

+ +
+ + + +
+ + {/* ... keep existing code (rest of the component) */} +
+ ); +} + +export default App; + +Adding a new component + +## Example 2: Installing a package and creating a Toast notification system + +### User prompt + +I want to add a toast +### System response + +OK first, you need to install the package. + + +### User prompt + +OK, I've installed the package. Now, I want to create a ToastProvider component. + +### System response + + +"use client"; + +import React from 'react'; +import { Toaster } from 'react-hot-toast'; +const ToastProvider = () => { }; +export default ToastProvider; + + + +"use client"; + +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import ToastProvider from './components/ToastProvider'; +import './index.css'; + +ReactDOM.createRoot(document.getElementById('root')).render( + + + + +); + + + +"use client"; + +import toast from 'react-hot-toast'; +export const showSuccess = (message) => { +toast.success(message); +}; +export const showError = (message) => { +toast.error(message); +}; +export const showLoading = (message) => { +return toast.loading(message); +}; +export const dismissToast = (toastId) => { +toast.dismiss(toastId); +}; + +Installing & using toast +I've added a toast notification system using react-hot-toast, created a ToastProvider component, and added utility functions to make showing notifications easy throughout the app. + +## Example 3: Renaming and deleting files + + + + +"use client"; + +import React from 'react'; +import { User } from 'lucide-react'; + +const ProfileCard = ({ user }) => { + return ( +
+
+ {user.avatar ? ( + {user.name} + ) : ( +
+ +
+ )} +
+

{user.name}

+

{user.email}

+
+
+ + {/* ... keep existing code (user details section) */} +
+ ); +}; + +export default ProfileCard; + + + + + +"use client"; + +import React from 'react'; +import ProfileCard from '../components/ProfileCard'; + +const Dashboard = () => { + + + return ( +
+

Dashboard

+ + + + {/* ... keep existing code (rest of dashboard content) */} +
+ ); +}; + +export default Dashboard; + +Renaming profile file +I've renamed the UserProfile component to ProfileCard, updated its styling, removed an unused Analytics component, and updated imports in the Dashboard page. + +# Additional Guidelines + +All edits you make on the codebase will directly be built and rendered, therefore you should NEVER make partial changes like letting the user know that they should implement some components or partially implementing features. +If a user asks for many features at once, you do not have to implement them all as long as the ones you implement are FULLY FUNCTIONAL and you clearly communicate to the user that you didn't implement some specific features. + +Immediate Component Creation +You MUST create a new file for every new component or hook, no matter how small. +Never add new components to existing files, even if they seem related. +Aim for components that are 100 lines of code or less. +Continuously be ready to refactor files that are getting too large. When they get too large, ask the user if they want you to refactor them. + +Important Rules for dyad-write operations: +- Only make changes that were directly requested by the user. Everything else in the files must stay exactly as it was. +- Always specify the correct file path when using dyad-write. +- Ensure that the code you write is complete, syntactically correct, and follows the existing coding style and conventions of the project. +- Make sure to close all tags when writing files, with a line break before the closing tag. +- IMPORTANT: Only use ONE block per file that you write! +- Prioritize creating small, focused files and components. +- do NOT be lazy and ALWAYS write the entire file. It needs to be a complete file. + +Coding guidelines +- ALWAYS generate responsive designs. +- Use toasts components to inform the user about important events. +- Don't catch errors with try/catch blocks unless specifically requested by the user. It's important that errors are thrown since then they bubble back to you so that you can fix them. + +DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed. +DON'T DO MORE THAN WHAT THE USER ASKS FOR. + +[[beginning of AI_RULES.md]] +There's already AI rules... +[[end of AI_RULES.md]] + + +Directory names MUST be all lower-case (src/pages, src/components, etc.). File names may use mixed-case if you like. + +# REMEMBER + +> **CODE FORMATTING IS NON-NEGOTIABLE:** +> **NEVER, EVER** use markdown code blocks (```) for code. +> **ONLY** use tags for **ALL** code output. +> Using ``` for code is **PROHIBITED**. +> Using for code is **MANDATORY**. +> Any instance of code within ``` is a **CRITICAL FAILURE**. +> **REPEAT: NO MARKDOWN CODE BLOCKS. USE EXCLUSIVELY FOR CODE.** +> Do NOT use tags in the output. ALWAYS use to generate code. + + + +If the user wants to use supabase or do something that requires auth, database or server-side functions (e.g. loading API keys, secrets), +tell them that they need to add supabase to their app. + +The following response will show a button that allows the user to add supabase to their app. + + + +# Examples + +## Example 1: User wants to use Supabase + +### User prompt + +I want to use supabase in my app. + +### Assistant response + +You need to first add Supabase to your app. + + + +## Example 2: User wants to add auth to their app + +### User prompt + +I want to add auth to my app. + +### Assistant response + +You need to first add Supabase to your app and then we can add auth. + + + + +=== +role: user +message: This is my codebase. +[[beginning of AI_RULES.md]] +There's already AI rules... +[[end of AI_RULES.md]] + + + + + + + + + + dyad-generated-app + + + +
+ + + + + + + +const App = () =>
Minimal imported app
; + +export default App; + + + + +import NonExistentClass from 'non-existent-class'; +import NonExistentClass2 from 'non-existent-class'; +import NonExistentClass3 from 'non-existent-class'; +import NonExistentClass4 from 'non-existent-class'; +import NonExistentClass5 from 'non-existent-class'; + + + +import { createRoot } from "react-dom/client"; +import App from "./App.tsx"; + +createRoot(document.getElementById("root")!).render(); + + + + +/// + + + + +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; +import path from "path"; + +export default defineConfig(() => ({ + server: { + host: "::", + port: 8080, + }, + plugins: [react()], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +})); + + + + + +=== +role: assistant +message: OK, got it. I'm ready to help + +=== +role: user +message: tc=create-unfixable-ts-errors + +=== +role: assistant +message: This should not get fixed + + +import NonExistentClass from 'non-existent-class'; +import NonExistentClass2 from 'non-existent-class'; +import NonExistentClass3 from 'non-existent-class'; +import NonExistentClass4 from 'non-existent-class'; +import NonExistentClass5 from 'non-existent-class'; + + +EOM + + +=== +role: user +message: Fix these 5 TypeScript compile-time errors: + +1. src/bad-file.ts:1:30 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +2. src/bad-file.ts:2:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +3. src/bad-file.ts:3:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +4. src/bad-file.ts:4:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +5. src/bad-file.ts:5:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) + +Please fix all errors in a concise way. \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-2.aria.yml b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-2.aria.yml new file mode 100644 index 0000000..f108dc5 --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-2.aria.yml @@ -0,0 +1,47 @@ +- paragraph: tc=create-unfixable-ts-errors +- paragraph: This should not get fixed +- img +- text: bad-file.ts +- img +- text: "src/bad-file.ts Summary: This will produce 5 TypeScript errors." +- paragraph: EOM +- img +- text: Auto-fix5 problems +- img +- img +- text: file1.txt +- img +- text: file1.txt +- paragraph: More EOM +- paragraph: "[[dyad-dump-path=*]]" +- img +- text: Auto-fix5 problems +- img +- text: "1" +- img +- text: /src\/bad-file\.ts 1:\d+ TS2307/ +- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations. +- text: "2" +- img +- text: /src\/bad-file\.ts 2:\d+ TS2307/ +- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations. +- text: "3" +- img +- text: /src\/bad-file\.ts 3:\d+ TS2307/ +- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations. +- text: "4" +- img +- text: /src\/bad-file\.ts 4:\d+ TS2307/ +- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations. +- text: "5" +- img +- text: /src\/bad-file\.ts 5:\d+ TS2307/ +- paragraph: Cannot find module 'non-existent-class' or its corresponding type declarations. +- img +- text: file1.txt +- img +- text: file1.txt +- paragraph: More EOM +- paragraph: "[[dyad-dump-path=*]]" +- button "Retry": + - img \ No newline at end of file diff --git a/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-2.txt b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-2.txt new file mode 100644 index 0000000..52984fb --- /dev/null +++ b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-2.txt @@ -0,0 +1,458 @@ +=== +role: system +message: + You are Dyad, an AI editor that creates and modifies web applications. You assist users by chatting with them and making changes to their code in real-time. You understand that users can see a live preview of their application in an iframe on the right side of the screen while you make code changes. +You make efficient and effective changes to codebases while following best practices for maintainability and readability. You take pride in keeping things simple and elegant. You are friendly and helpful, always aiming to provide clear explanations. + +# App Preview / Commands + +Do *not* tell the user to run shell commands. Instead, they can do one of the following commands in the UI: + +- **Rebuild**: This will rebuild the app from scratch. First it deletes the node_modules folder and then it re-installs the npm packages and then starts the app server. +- **Restart**: This will restart the app server. +- **Refresh**: This will refresh the app preview page. + +You can suggest one of these commands by using the tag like this: + + + + +If you output one of these commands, tell the user to look for the action button above the chat input. + +# Guidelines + +Always reply to the user in the same language they are using. + +- Use for setting the chat summary (put this at the end). The chat summary should be less than a sentence, but more than a few words. YOU SHOULD ALWAYS INCLUDE EXACTLY ONE CHAT TITLE +- Before proceeding with any code edits, check whether the user's request has already been implemented. If the requested change has already been made in the codebase, point this out to the user, e.g., "This feature is already implemented as described." +- Only edit files that are related to the user's request and leave all other files alone. + +If new code needs to be written (i.e., the requested feature does not exist), you MUST: + +- Briefly explain the needed changes in a few short sentences, without being too technical. +- Use for creating or updating files. Try to create small, focused files that will be easy to maintain. Use only one block per file. Do not forget to close the dyad-write tag after writing the file. If you do NOT need to change a file, then do not use the tag. +- Use for renaming files. +- Use for removing files. +- Use for installing packages. + - If the user asks for multiple packages, use + - MAKE SURE YOU USE SPACES BETWEEN PACKAGES AND NOT COMMAS. +- After all of the code changes, provide a VERY CONCISE, non-technical summary of the changes made in one sentence, nothing more. This summary should be easy for non-technical users to understand. If an action, like setting a env variable is required by user, make sure to include it in the summary. + +Before sending your final answer, review every import statement you output and do the following: + +First-party imports (modules that live in this project) +- Only import files/modules that have already been described to you. +- If you need a project file that does not yet exist, create it immediately with before finishing your response. + +Third-party imports (anything that would come from npm) +- If the package is not listed in package.json, install it with . + +Do not leave any import unresolved. + +# Examples + +## Example 1: Adding a new component + + +"use client"; + +import React from 'react'; + +const Button = ({ children, variant = 'primary', onClick, disabled = false }) => { + const baseClasses = "px-4 py-2 rounded-md font-medium transition-colors"; + + const variantClasses = { + primary: "bg-blue-600 hover:bg-blue-700 text-white", + secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800", + danger: "bg-red-600 hover:bg-red-700 text-white" + }; + + return ( + + ); +}; + +export default Button; + + + +"use client"; + +import React from 'react'; +import Button from './components/Button'; + + +function App() { + + + return ( +
+

My Application

+ +
+ + + +
+ + {/* ... keep existing code (rest of the component) */} +
+ ); +} + +export default App; + +Adding a new component + +## Example 2: Installing a package and creating a Toast notification system + +### User prompt + +I want to add a toast +### System response + +OK first, you need to install the package. + + +### User prompt + +OK, I've installed the package. Now, I want to create a ToastProvider component. + +### System response + + +"use client"; + +import React from 'react'; +import { Toaster } from 'react-hot-toast'; +const ToastProvider = () => { }; +export default ToastProvider; + + + +"use client"; + +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import ToastProvider from './components/ToastProvider'; +import './index.css'; + +ReactDOM.createRoot(document.getElementById('root')).render( + + + + +); + + + +"use client"; + +import toast from 'react-hot-toast'; +export const showSuccess = (message) => { +toast.success(message); +}; +export const showError = (message) => { +toast.error(message); +}; +export const showLoading = (message) => { +return toast.loading(message); +}; +export const dismissToast = (toastId) => { +toast.dismiss(toastId); +}; + +Installing & using toast +I've added a toast notification system using react-hot-toast, created a ToastProvider component, and added utility functions to make showing notifications easy throughout the app. + +## Example 3: Renaming and deleting files + + + + +"use client"; + +import React from 'react'; +import { User } from 'lucide-react'; + +const ProfileCard = ({ user }) => { + return ( +
+
+ {user.avatar ? ( + {user.name} + ) : ( +
+ +
+ )} +
+

{user.name}

+

{user.email}

+
+
+ + {/* ... keep existing code (user details section) */} +
+ ); +}; + +export default ProfileCard; + + + + + +"use client"; + +import React from 'react'; +import ProfileCard from '../components/ProfileCard'; + +const Dashboard = () => { + + + return ( +
+

Dashboard

+ + + + {/* ... keep existing code (rest of dashboard content) */} +
+ ); +}; + +export default Dashboard; + +Renaming profile file +I've renamed the UserProfile component to ProfileCard, updated its styling, removed an unused Analytics component, and updated imports in the Dashboard page. + +# Additional Guidelines + +All edits you make on the codebase will directly be built and rendered, therefore you should NEVER make partial changes like letting the user know that they should implement some components or partially implementing features. +If a user asks for many features at once, you do not have to implement them all as long as the ones you implement are FULLY FUNCTIONAL and you clearly communicate to the user that you didn't implement some specific features. + +Immediate Component Creation +You MUST create a new file for every new component or hook, no matter how small. +Never add new components to existing files, even if they seem related. +Aim for components that are 100 lines of code or less. +Continuously be ready to refactor files that are getting too large. When they get too large, ask the user if they want you to refactor them. + +Important Rules for dyad-write operations: +- Only make changes that were directly requested by the user. Everything else in the files must stay exactly as it was. +- Always specify the correct file path when using dyad-write. +- Ensure that the code you write is complete, syntactically correct, and follows the existing coding style and conventions of the project. +- Make sure to close all tags when writing files, with a line break before the closing tag. +- IMPORTANT: Only use ONE block per file that you write! +- Prioritize creating small, focused files and components. +- do NOT be lazy and ALWAYS write the entire file. It needs to be a complete file. + +Coding guidelines +- ALWAYS generate responsive designs. +- Use toasts components to inform the user about important events. +- Don't catch errors with try/catch blocks unless specifically requested by the user. It's important that errors are thrown since then they bubble back to you so that you can fix them. + +DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed. +DON'T DO MORE THAN WHAT THE USER ASKS FOR. + +[[beginning of AI_RULES.md]] +There's already AI rules... +[[end of AI_RULES.md]] + + +Directory names MUST be all lower-case (src/pages, src/components, etc.). File names may use mixed-case if you like. + +# REMEMBER + +> **CODE FORMATTING IS NON-NEGOTIABLE:** +> **NEVER, EVER** use markdown code blocks (```) for code. +> **ONLY** use tags for **ALL** code output. +> Using ``` for code is **PROHIBITED**. +> Using for code is **MANDATORY**. +> Any instance of code within ``` is a **CRITICAL FAILURE**. +> **REPEAT: NO MARKDOWN CODE BLOCKS. USE EXCLUSIVELY FOR CODE.** +> Do NOT use tags in the output. ALWAYS use to generate code. + + + +If the user wants to use supabase or do something that requires auth, database or server-side functions (e.g. loading API keys, secrets), +tell them that they need to add supabase to their app. + +The following response will show a button that allows the user to add supabase to their app. + + + +# Examples + +## Example 1: User wants to use Supabase + +### User prompt + +I want to use supabase in my app. + +### Assistant response + +You need to first add Supabase to your app. + + + +## Example 2: User wants to add auth to their app + +### User prompt + +I want to add auth to my app. + +### Assistant response + +You need to first add Supabase to your app and then we can add auth. + + + + +=== +role: user +message: This is my codebase. +[[beginning of AI_RULES.md]] +There's already AI rules... +[[end of AI_RULES.md]] + + + + +A file (2) + + + + + + + + + dyad-generated-app + + + +
+ + + + + + + +const App = () =>
Minimal imported app
; + +export default App; + + + + +import NonExistentClass from 'non-existent-class'; +import NonExistentClass2 from 'non-existent-class'; +import NonExistentClass3 from 'non-existent-class'; +import NonExistentClass4 from 'non-existent-class'; +import NonExistentClass5 from 'non-existent-class'; + + + +import { createRoot } from "react-dom/client"; +import App from "./App.tsx"; + +createRoot(document.getElementById("root")!).render(); + + + + +/// + + + + +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; +import path from "path"; + +export default defineConfig(() => ({ + server: { + host: "::", + port: 8080, + }, + plugins: [react()], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +})); + + + + + +=== +role: assistant +message: OK, got it. I'm ready to help + +=== +role: user +message: tc=create-unfixable-ts-errors + +=== +role: assistant +message: This should not get fixed + + +import NonExistentClass from 'non-existent-class'; +import NonExistentClass2 from 'non-existent-class'; +import NonExistentClass3 from 'non-existent-class'; +import NonExistentClass4 from 'non-existent-class'; +import NonExistentClass5 from 'non-existent-class'; + + +EOM + + +=== +role: user +message: Fix these 5 TypeScript compile-time errors: + +1. src/bad-file.ts:1:30 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +2. src/bad-file.ts:2:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +3. src/bad-file.ts:3:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +4. src/bad-file.ts:4:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +5. src/bad-file.ts:5:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) + +Please fix all errors in a concise way. + +=== +role: assistant +message: + + A file (2) + + More + EOM + +[[dyad-dump-path=*]] + +=== +role: user +message: Fix these 5 TypeScript compile-time errors: + +1. src/bad-file.ts:1:30 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +2. src/bad-file.ts:2:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +3. src/bad-file.ts:3:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +4. src/bad-file.ts:4:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +5. src/bad-file.ts:5:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) + +Please fix all errors in a concise way. \ No newline at end of file diff --git a/e2e-tests/snapshots/telemetry.spec.ts_telemetry---accept-1.txt b/e2e-tests/snapshots/telemetry.spec.ts_telemetry---accept-1.txt index 68824e0..41ef2f3 100644 --- a/e2e-tests/snapshots/telemetry.spec.ts_telemetry---accept-1.txt +++ b/e2e-tests/snapshots/telemetry.spec.ts_telemetry---accept-1.txt @@ -11,5 +11,6 @@ "enableProLazyEditsMode": true, "enableProSmartFilesContextMode": true, "selectedChatMode": "build", + "enableAutoFixProblems": true, "isTestMode": true } \ No newline at end of file diff --git a/e2e-tests/snapshots/telemetry.spec.ts_telemetry---accept-2.txt b/e2e-tests/snapshots/telemetry.spec.ts_telemetry---accept-2.txt index 18307e3..290cd8e 100644 --- a/e2e-tests/snapshots/telemetry.spec.ts_telemetry---accept-2.txt +++ b/e2e-tests/snapshots/telemetry.spec.ts_telemetry---accept-2.txt @@ -12,5 +12,6 @@ "enableProLazyEditsMode": true, "enableProSmartFilesContextMode": true, "selectedChatMode": "build", + "enableAutoFixProblems": true, "isTestMode": true } \ No newline at end of file diff --git a/e2e-tests/snapshots/telemetry.spec.ts_telemetry---later-1.txt b/e2e-tests/snapshots/telemetry.spec.ts_telemetry---later-1.txt index 68824e0..41ef2f3 100644 --- a/e2e-tests/snapshots/telemetry.spec.ts_telemetry---later-1.txt +++ b/e2e-tests/snapshots/telemetry.spec.ts_telemetry---later-1.txt @@ -11,5 +11,6 @@ "enableProLazyEditsMode": true, "enableProSmartFilesContextMode": true, "selectedChatMode": "build", + "enableAutoFixProblems": true, "isTestMode": true } \ No newline at end of file diff --git a/e2e-tests/snapshots/telemetry.spec.ts_telemetry---later-2.txt b/e2e-tests/snapshots/telemetry.spec.ts_telemetry---later-2.txt index 9d6f84c..6ac34ca 100644 --- a/e2e-tests/snapshots/telemetry.spec.ts_telemetry---later-2.txt +++ b/e2e-tests/snapshots/telemetry.spec.ts_telemetry---later-2.txt @@ -12,5 +12,6 @@ "enableProLazyEditsMode": true, "enableProSmartFilesContextMode": true, "selectedChatMode": "build", + "enableAutoFixProblems": true, "isTestMode": true } \ No newline at end of file diff --git a/e2e-tests/snapshots/telemetry.spec.ts_telemetry---reject-1.txt b/e2e-tests/snapshots/telemetry.spec.ts_telemetry---reject-1.txt index 68824e0..41ef2f3 100644 --- a/e2e-tests/snapshots/telemetry.spec.ts_telemetry---reject-1.txt +++ b/e2e-tests/snapshots/telemetry.spec.ts_telemetry---reject-1.txt @@ -11,5 +11,6 @@ "enableProLazyEditsMode": true, "enableProSmartFilesContextMode": true, "selectedChatMode": "build", + "enableAutoFixProblems": true, "isTestMode": true } \ No newline at end of file diff --git a/e2e-tests/snapshots/telemetry.spec.ts_telemetry---reject-2.txt b/e2e-tests/snapshots/telemetry.spec.ts_telemetry---reject-2.txt index 99152ab..b03ebb6 100644 --- a/e2e-tests/snapshots/telemetry.spec.ts_telemetry---reject-2.txt +++ b/e2e-tests/snapshots/telemetry.spec.ts_telemetry---reject-2.txt @@ -12,5 +12,6 @@ "enableProLazyEditsMode": true, "enableProSmartFilesContextMode": true, "selectedChatMode": "build", + "enableAutoFixProblems": true, "isTestMode": true } \ No newline at end of file diff --git a/e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-1.txt b/e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-1.txt index 1b01e1d..caccb58 100644 --- a/e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-1.txt +++ b/e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-1.txt @@ -21,5 +21,6 @@ "enableProLazyEditsMode": true, "enableProSmartFilesContextMode": true, "selectedChatMode": "build", + "enableAutoFixProblems": true, "isTestMode": true } \ No newline at end of file diff --git a/e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-3.txt b/e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-3.txt index 16ea61d..fcad7f1 100644 --- a/e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-3.txt +++ b/e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-3.txt @@ -21,5 +21,6 @@ "enableProLazyEditsMode": true, "enableProSmartFilesContextMode": true, "selectedChatMode": "build", + "enableAutoFixProblems": true, "isTestMode": true } \ No newline at end of file diff --git a/e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-5.txt b/e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-5.txt index 331cdb3..ca2175f 100644 --- a/e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-5.txt +++ b/e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-5.txt @@ -21,5 +21,6 @@ "enableProLazyEditsMode": true, "enableProSmartFilesContextMode": true, "selectedChatMode": "build", + "enableAutoFixProblems": true, "isTestMode": true } \ No newline at end of file diff --git a/e2e-tests/template-create-nextjs.spec.ts b/e2e-tests/template-create-nextjs.spec.ts index c291fd6..06fcfe5 100644 --- a/e2e-tests/template-create-nextjs.spec.ts +++ b/e2e-tests/template-create-nextjs.spec.ts @@ -3,10 +3,7 @@ import { expect } from "@playwright/test"; test("create next.js app", async ({ po }) => { await po.setUp(); - // Select Next.js template - await po.goToHubTab(); - await po.selectTemplate("Next.js Template"); - await po.goToAppsTab(); + await po.selectHubTemplate("Next.js Template"); // Create an app await po.sendPrompt("tc=edit-made-with-dyad"); diff --git a/src/__tests__/__snapshots__/problem_prompt.test.ts.snap b/src/__tests__/__snapshots__/problem_prompt.test.ts.snap new file mode 100644 index 0000000..ed556f8 --- /dev/null +++ b/src/__tests__/__snapshots__/problem_prompt.test.ts.snap @@ -0,0 +1,63 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`problem_prompt > createConciseProblemFixPrompt > should format a concise prompt for multiple errors 1`] = ` +"Fix these 2 TypeScript compile-time errors: + +1. src/main.ts:5:12 - Cannot find module 'react-dom/client' or its corresponding type declarations. (TS2307) +2. src/components/Modal.tsx:35:20 - Property 'isOpen' does not exist on type 'IntrinsicAttributes & ModalProps'. (TS2339) + +Please fix all errors in a concise way." +`; + +exports[`problem_prompt > createConciseProblemFixPrompt > should format a concise prompt for single error 1`] = ` +"Fix these 1 TypeScript compile-time error: + +1. src/App.tsx:10:5 - Cannot find name 'consol'. Did you mean 'console'? (TS2552) + +Please fix all errors in a concise way." +`; + +exports[`problem_prompt > createConciseProblemFixPrompt > should return a short message when no problems exist 1`] = `"No TypeScript problems detected."`; + +exports[`problem_prompt > createProblemFixPrompt > should format a single error correctly 1`] = ` +"Fix these 1 TypeScript compile-time error: + +1. src/components/Button.tsx:15:23 - Property 'onClick' does not exist on type 'ButtonProps'. (TS2339) + +Please fix all errors in a concise way." +`; + +exports[`problem_prompt > createProblemFixPrompt > should format multiple errors across multiple files 1`] = ` +"Fix these 4 TypeScript compile-time errors: + +1. src/components/Button.tsx:15:23 - Property 'onClick' does not exist on type 'ButtonProps'. (TS2339) +2. src/components/Button.tsx:8:12 - Type 'string | undefined' is not assignable to type 'string'. (TS2322) +3. src/hooks/useApi.ts:42:5 - Argument of type 'unknown' is not assignable to parameter of type 'string'. (TS2345) +4. src/utils/helpers.ts:45:8 - Function lacks ending return statement and return type does not include 'undefined'. (TS2366) + +Please fix all errors in a concise way." +`; + +exports[`problem_prompt > createProblemFixPrompt > should handle realistic React TypeScript errors 1`] = ` +"Fix these 4 TypeScript compile-time errors: + +1. src/components/UserProfile.tsx:12:35 - Type '{ children: string; }' is missing the following properties from type 'UserProfileProps': user, onEdit (TS2739) +2. src/components/UserProfile.tsx:25:15 - Object is possibly 'null'. (TS2531) +3. src/hooks/useLocalStorage.ts:18:12 - Type 'string | null' is not assignable to type 'T'. (TS2322) +4. src/types/api.ts:45:3 - Duplicate identifier 'UserRole'. (TS2300) + +Please fix all errors in a concise way." +`; + +exports[`problem_prompt > createProblemFixPrompt > should return a message when no problems exist 1`] = `"No TypeScript problems detected."`; + +exports[`problem_prompt > realistic TypeScript error scenarios > should handle common React + TypeScript errors 1`] = ` +"Fix these 4 TypeScript compile-time errors: + +1. src/components/ProductCard.tsx:22:18 - Property 'price' is missing in type '{ name: string; description: string; }' but required in type 'Product'. (TS2741) +2. src/components/SearchInput.tsx:15:45 - Type '(value: string) => void' is not assignable to type 'ChangeEventHandler'. (TS2322) +3. src/api/userService.ts:8:1 - Function lacks ending return statement and return type does not include 'undefined'. (TS2366) +4. src/utils/dataProcessor.ts:34:25 - Object is possibly 'undefined'. (TS2532) + +Please fix all errors in a concise way." +`; diff --git a/src/__tests__/problem_prompt.test.ts b/src/__tests__/problem_prompt.test.ts new file mode 100644 index 0000000..60aa0cc --- /dev/null +++ b/src/__tests__/problem_prompt.test.ts @@ -0,0 +1,214 @@ +import { describe, it, expect } from "vitest"; +import { createProblemFixPrompt } from "../shared/problem_prompt"; +import type { ProblemReport } from "../ipc/ipc_types"; + +describe("problem_prompt", () => { + describe("createProblemFixPrompt", () => { + it("should return a message when no problems exist", () => { + const problemReport: ProblemReport = { + problems: [], + }; + + const result = createProblemFixPrompt(problemReport); + expect(result).toMatchSnapshot(); + }); + + it("should format a single error correctly", () => { + const problemReport: ProblemReport = { + problems: [ + { + file: "src/components/Button.tsx", + line: 15, + column: 23, + message: "Property 'onClick' does not exist on type 'ButtonProps'.", + code: 2339, + }, + ], + }; + + const result = createProblemFixPrompt(problemReport); + expect(result).toMatchSnapshot(); + }); + + it("should format multiple errors across multiple files", () => { + const problemReport: ProblemReport = { + problems: [ + { + file: "src/components/Button.tsx", + line: 15, + column: 23, + message: "Property 'onClick' does not exist on type 'ButtonProps'.", + code: 2339, + }, + { + file: "src/components/Button.tsx", + line: 8, + column: 12, + message: + "Type 'string | undefined' is not assignable to type 'string'.", + code: 2322, + }, + { + file: "src/hooks/useApi.ts", + line: 42, + column: 5, + message: + "Argument of type 'unknown' is not assignable to parameter of type 'string'.", + code: 2345, + }, + { + file: "src/utils/helpers.ts", + line: 45, + column: 8, + message: + "Function lacks ending return statement and return type does not include 'undefined'.", + code: 2366, + }, + ], + }; + + const result = createProblemFixPrompt(problemReport); + expect(result).toMatchSnapshot(); + }); + + it("should handle realistic React TypeScript errors", () => { + const problemReport: ProblemReport = { + problems: [ + { + file: "src/components/UserProfile.tsx", + line: 12, + column: 35, + message: + "Type '{ children: string; }' is missing the following properties from type 'UserProfileProps': user, onEdit", + code: 2739, + }, + { + file: "src/components/UserProfile.tsx", + line: 25, + column: 15, + message: "Object is possibly 'null'.", + code: 2531, + }, + { + file: "src/hooks/useLocalStorage.ts", + line: 18, + column: 12, + message: "Type 'string | null' is not assignable to type 'T'.", + code: 2322, + }, + { + file: "src/types/api.ts", + line: 45, + column: 3, + message: "Duplicate identifier 'UserRole'.", + code: 2300, + }, + ], + }; + + const result = createProblemFixPrompt(problemReport); + expect(result).toMatchSnapshot(); + }); + }); + + describe("createConciseProblemFixPrompt", () => { + it("should return a short message when no problems exist", () => { + const problemReport: ProblemReport = { + problems: [], + }; + + const result = createProblemFixPrompt(problemReport); + expect(result).toMatchSnapshot(); + }); + + it("should format a concise prompt for single error", () => { + const problemReport: ProblemReport = { + problems: [ + { + file: "src/App.tsx", + line: 10, + column: 5, + message: "Cannot find name 'consol'. Did you mean 'console'?", + code: 2552, + }, + ], + }; + + const result = createProblemFixPrompt(problemReport); + expect(result).toMatchSnapshot(); + }); + + it("should format a concise prompt for multiple errors", () => { + const problemReport: ProblemReport = { + problems: [ + { + file: "src/main.ts", + line: 5, + column: 12, + message: + "Cannot find module 'react-dom/client' or its corresponding type declarations.", + code: 2307, + }, + { + file: "src/components/Modal.tsx", + line: 35, + column: 20, + message: + "Property 'isOpen' does not exist on type 'IntrinsicAttributes & ModalProps'.", + code: 2339, + }, + ], + }; + + const result = createProblemFixPrompt(problemReport); + expect(result).toMatchSnapshot(); + }); + }); + + describe("realistic TypeScript error scenarios", () => { + it("should handle common React + TypeScript errors", () => { + const problemReport: ProblemReport = { + problems: [ + // Missing interface property + { + file: "src/components/ProductCard.tsx", + line: 22, + column: 18, + message: + "Property 'price' is missing in type '{ name: string; description: string; }' but required in type 'Product'.", + code: 2741, + }, + // Incorrect event handler type + { + file: "src/components/SearchInput.tsx", + line: 15, + column: 45, + message: + "Type '(value: string) => void' is not assignable to type 'ChangeEventHandler'.", + code: 2322, + }, + // Async/await without Promise return type + { + file: "src/api/userService.ts", + line: 8, + column: 1, + message: + "Function lacks ending return statement and return type does not include 'undefined'.", + code: 2366, + }, + // Strict null check + { + file: "src/utils/dataProcessor.ts", + line: 34, + column: 25, + message: "Object is possibly 'undefined'.", + code: 2532, + }, + ], + }; + + const result = createProblemFixPrompt(problemReport); + expect(result).toMatchSnapshot(); + }); + }); +}); diff --git a/src/atoms/appAtoms.ts b/src/atoms/appAtoms.ts index efa9309..384e217 100644 --- a/src/atoms/appAtoms.ts +++ b/src/atoms/appAtoms.ts @@ -7,7 +7,7 @@ export const selectedAppIdAtom = atom(null); export const appsListAtom = atom([]); export const appBasePathAtom = atom(""); export const versionsListAtom = atom([]); -export const previewModeAtom = atom<"preview" | "code">("preview"); +export const previewModeAtom = atom<"preview" | "code" | "problems">("preview"); export const selectedVersionIdAtom = atom(null); export const appOutputAtom = atom([]); export const appUrlAtom = atom< diff --git a/src/components/AutoFixProblemsSwitch.tsx b/src/components/AutoFixProblemsSwitch.tsx new file mode 100644 index 0000000..3b68949 --- /dev/null +++ b/src/components/AutoFixProblemsSwitch.tsx @@ -0,0 +1,21 @@ +import { useSettings } from "@/hooks/useSettings"; +import { Label } from "@/components/ui/label"; +import { Switch } from "@/components/ui/switch"; + +export function AutoFixProblemsSwitch() { + const { settings, updateSettings } = useSettings(); + return ( +
+ { + updateSettings({ + enableAutoFixProblems: !settings?.enableAutoFixProblems, + }); + }} + /> + +
+ ); +} diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx index 9f7761f..344696d 100644 --- a/src/components/chat/ChatInput.tsx +++ b/src/components/chat/ChatInput.tsx @@ -63,6 +63,7 @@ import { ChatInputControls } from "../ChatInputControls"; import { ChatErrorBox } from "./ChatErrorBox"; import { selectedComponentPreviewAtom } from "@/atoms/previewAtoms"; import { SelectedComponentDisplay } from "./SelectedComponentDisplay"; +import { useCheckProblems } from "@/hooks/useCheckProblems"; const showTokenBarAtom = atom(false); @@ -84,7 +85,7 @@ export function ChatInput({ chatId }: { chatId?: number }) { const [selectedComponent, setSelectedComponent] = useAtom( selectedComponentPreviewAtom, ); - + const { checkProblems } = useCheckProblems(appId); // Use the attachments hook const { attachments, @@ -207,6 +208,7 @@ export function ChatInput({ chatId }: { chatId?: number }) { setIsApproving(false); setIsPreviewOpen(true); refreshVersions(); + checkProblems(); // Keep same as handleReject refreshProposal(); diff --git a/src/components/chat/DyadMarkdownParser.tsx b/src/components/chat/DyadMarkdownParser.tsx index a1d34da..e2643a5 100644 --- a/src/components/chat/DyadMarkdownParser.tsx +++ b/src/components/chat/DyadMarkdownParser.tsx @@ -15,6 +15,7 @@ import { useAtomValue } from "jotai"; import { isStreamingAtom } from "@/atoms/chatAtoms"; import { CustomTagState } from "./stateTypes"; import { DyadOutput } from "./DyadOutput"; +import { DyadProblemSummary } from "./DyadProblemSummary"; import { IpcClient } from "@/ipc/ipc_client"; interface DyadMarkdownParserProps { @@ -117,6 +118,7 @@ function preprocessUnclosedTags(content: string): { "dyad-execute-sql", "dyad-add-integration", "dyad-output", + "dyad-problem-report", "dyad-chat-summary", "dyad-edit", "dyad-codebase-context", @@ -182,6 +184,7 @@ function parseCustomTags(content: string): ContentPiece[] { "dyad-execute-sql", "dyad-add-integration", "dyad-output", + "dyad-problem-report", "dyad-chat-summary", "dyad-edit", "dyad-codebase-context", @@ -404,6 +407,13 @@ function renderCustomTag( ); + case "dyad-problem-report": + return ( + + {content} + + ); + case "dyad-chat-summary": // Don't render anything for dyad-chat-summary return null; diff --git a/src/components/chat/DyadProblemSummary.tsx b/src/components/chat/DyadProblemSummary.tsx new file mode 100644 index 0000000..9c60b15 --- /dev/null +++ b/src/components/chat/DyadProblemSummary.tsx @@ -0,0 +1,154 @@ +import React, { useState } from "react"; +import { + ChevronsDownUp, + ChevronsUpDown, + AlertTriangle, + FileText, +} from "lucide-react"; +import type { Problem } from "@/ipc/ipc_types"; + +interface DyadProblemSummaryProps { + summary?: string; + children?: React.ReactNode; +} + +interface ProblemItemProps { + problem: Problem; + index: number; +} + +const ProblemItem: React.FC = ({ problem, index }) => { + return ( +
+
+ + {index + 1} + +
+
+
+ + + {problem.file} + + + + {problem.line}:{problem.column} + + + TS{problem.code} + +
+

+ {problem.message} +

+
+
+ ); +}; + +export const DyadProblemSummary: React.FC = ({ + summary, + children, +}) => { + const [isContentVisible, setIsContentVisible] = useState(false); + + // Parse problems from children content if available + const problems: Problem[] = React.useMemo(() => { + if (!children || typeof children !== "string") return []; + + // Parse structured format with tags + const problemTagRegex = + /([^<]+)<\/problem>/g; + const problems: Problem[] = []; + let match; + + while ((match = problemTagRegex.exec(children)) !== null) { + try { + problems.push({ + file: match[1], + line: parseInt(match[2], 10), + column: parseInt(match[3], 10), + message: match[5].trim(), + code: parseInt(match[4], 10), + }); + } catch { + return [ + { + file: "unknown", + line: 0, + column: 0, + message: children, + code: 0, + }, + ]; + } + } + + return problems; + }, [children]); + + const totalProblems = problems.length; + const displaySummary = + summary || `${totalProblems} problems found (TypeScript errors)`; + + return ( +
setIsContentVisible(!isContentVisible)} + data-testid="problem-summary" + > +
+
+ + + + Auto-fix + + {displaySummary} + +
+
+ {isContentVisible ? ( + + ) : ( + + )} +
+
+ + {/* Content area - show individual problems */} + {isContentVisible && totalProblems > 0 && ( +
+
+ {problems.map((problem, index) => ( + + ))} +
+
+ )} + + {/* Fallback content area for raw children */} + {isContentVisible && totalProblems === 0 && children && ( +
+ 
+            {children}
+
+
+ )} +
+ ); +}; diff --git a/src/components/preview_panel/PreviewPanel.tsx b/src/components/preview_panel/PreviewPanel.tsx index 7429bba..893ea0b 100644 --- a/src/components/preview_panel/PreviewPanel.tsx +++ b/src/components/preview_panel/PreviewPanel.tsx @@ -9,6 +9,7 @@ import { IpcClient } from "@/ipc/ipc_client"; import { CodeView } from "./CodeView"; import { PreviewIframe } from "./PreviewIframe"; +import { Problems } from "./Problems"; import { Eye, Code, @@ -19,6 +20,7 @@ import { Cog, Power, Trash2, + AlertTriangle, } from "lucide-react"; import { motion } from "framer-motion"; import { useEffect, useRef, useState, useCallback } from "react"; @@ -33,8 +35,9 @@ import { } from "@/components/ui/dropdown-menu"; import { showError, showSuccess } from "@/lib/toast"; import { useMutation } from "@tanstack/react-query"; +import { useCheckProblems } from "@/hooks/useCheckProblems"; -type PreviewMode = "preview" | "code"; +type PreviewMode = "preview" | "code" | "problems"; interface PreviewHeaderProps { previewMode: PreviewMode; @@ -57,81 +60,156 @@ const PreviewHeader = ({ onRestart, onCleanRestart, onClearSessionData, -}: PreviewHeaderProps) => ( -
-
- - +}: PreviewHeaderProps) => { + const selectedAppId = useAtomValue(selectedAppIdAtom); + const previewRef = useRef(null); + const codeRef = useRef(null); + const problemsRef = useRef(null); + const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 }); + const { problemReport } = useCheckProblems(selectedAppId); + // Get the problem count for the selected app + const problemCount = problemReport ? problemReport.problems.length : 0; + + // Format the problem count for display + const formatProblemCount = (count: number): string => { + if (count === 0) return ""; + if (count > 100) return "100+"; + return count.toString(); + }; + + const displayCount = formatProblemCount(problemCount); + + // Update indicator position when mode changes + useEffect(() => { + const updateIndicator = () => { + let targetRef: React.RefObject; + + switch (previewMode) { + case "preview": + targetRef = previewRef; + break; + case "code": + targetRef = codeRef; + break; + case "problems": + targetRef = problemsRef; + break; + default: + return; + } + + if (targetRef.current) { + const button = targetRef.current; + const container = button.parentElement; + if (container) { + const containerRect = container.getBoundingClientRect(); + const buttonRect = button.getBoundingClientRect(); + const left = buttonRect.left - containerRect.left; + const width = buttonRect.width; + + setIndicatorStyle({ left, width }); + } + } + }; + + // Small delay to ensure DOM is updated + const timeoutId = setTimeout(updateIndicator, 10); + return () => clearTimeout(timeoutId); + }, [previewMode, displayCount]); + + return ( +
+
+ + + + +
+
+ + + + + + + + +
+ Rebuild + + Re-installs node_modules and restarts + +
+ + + +
+ Clear Preview Data + + Clears cookies and local storage for the app preview + +
+ + + +
-
- - - - - - - - -
- Rebuild - - Re-installs node_modules and restarts - -
- - - -
- Clear Preview Data - - Clears cookies and local storage for the app preview - -
- - - -
-
-); + ); +}; // Console header component const ConsoleHeader = ({ @@ -262,8 +340,10 @@ export function PreviewPanel() {
{previewMode === "preview" ? ( - ) : ( + ) : previewMode === "code" ? ( + ) : ( + )}
diff --git a/src/components/preview_panel/Problems.tsx b/src/components/preview_panel/Problems.tsx new file mode 100644 index 0000000..4cca7d5 --- /dev/null +++ b/src/components/preview_panel/Problems.tsx @@ -0,0 +1,208 @@ +import { useAtom, useAtomValue } from "jotai"; +import { selectedChatIdAtom } from "@/atoms/chatAtoms"; +import { selectedAppIdAtom } from "@/atoms/appAtoms"; +import { + AlertTriangle, + XCircle, + FileText, + Wrench, + RefreshCw, +} from "lucide-react"; +import { Problem, ProblemReport } from "@/ipc/ipc_types"; +import { Button } from "@/components/ui/button"; + +import { useStreamChat } from "@/hooks/useStreamChat"; +import { useCheckProblems } from "@/hooks/useCheckProblems"; +import { createProblemFixPrompt } from "@/shared/problem_prompt"; +import { showError } from "@/lib/toast"; + +interface ProblemItemProps { + problem: Problem; +} + +const ProblemItem = ({ problem }: ProblemItemProps) => { + return ( +
+
+ +
+
+
+ + {problem.file} + + + {problem.line}:{problem.column} + +
+

+ {problem.message} +

+
+
+ ); +}; + +interface RecheckButtonProps { + appId: number; + size?: "sm" | "default" | "lg"; + variant?: + | "default" + | "destructive" + | "outline" + | "secondary" + | "ghost" + | "link"; + className?: string; +} + +const RecheckButton = ({ + appId, + size = "sm", + variant = "outline", + className = "h-7 px-3 text-xs", +}: RecheckButtonProps) => { + const { checkProblems, isChecking } = useCheckProblems(appId); + + const handleRecheck = async () => { + const res = await checkProblems(); + if (res.error) { + showError(res.error); + } + }; + + return ( + + ); +}; + +interface ProblemsSummaryProps { + problemReport: ProblemReport; + appId: number; +} + +const ProblemsSummary = ({ problemReport, appId }: ProblemsSummaryProps) => { + const { streamMessage } = useStreamChat(); + const { problems } = problemReport; + const totalErrors = problems.length; + const [selectedChatId] = useAtom(selectedChatIdAtom); + const handleFixAll = () => { + if (!selectedChatId) { + return; + } + streamMessage({ + prompt: createProblemFixPrompt(problemReport), + chatId: selectedChatId, + }); + }; + + if (problems.length === 0) { + return ( +
+
+
+
+

No problems found

+ +
+ ); + } + + return ( +
+
+ {totalErrors > 0 && ( +
+ + + {totalErrors} {totalErrors === 1 ? "error" : "errors"} + +
+ )} +
+
+ + +
+
+ ); +}; + +export function Problems() { + return ( +
+ <_Problems /> +
+ ); +} + +export function _Problems() { + const selectedAppId = useAtomValue(selectedAppIdAtom); + const { problemReport } = useCheckProblems(selectedAppId); + + if (!selectedAppId) { + return ( +
+
+ +
+

No App Selected

+

+ Select an app to view TypeScript problems and diagnostic information. +

+
+ ); + } + + if (!problemReport) { + return ( +
+
+ +
+

No Problems Data

+

+ No TypeScript diagnostics available for this app yet. Problems will + appear here after running type checking. +

+ +
+ ); + } + + return ( +
+ +
+ {problemReport.problems.map((problem, index) => ( + + ))} +
+
+ ); +} diff --git a/src/hooks/useCheckProblems.ts b/src/hooks/useCheckProblems.ts new file mode 100644 index 0000000..785431a --- /dev/null +++ b/src/hooks/useCheckProblems.ts @@ -0,0 +1,30 @@ +import { useQuery } from "@tanstack/react-query"; +import { IpcClient } from "@/ipc/ipc_client"; +import type { ProblemReport } from "@/ipc/ipc_types"; + +export function useCheckProblems(appId: number | null) { + const { + data: problemReport, + isLoading: isChecking, + error, + refetch: checkProblems, + } = useQuery({ + queryKey: ["problems", appId], + queryFn: async (): Promise => { + if (!appId) { + throw new Error("App ID is required"); + } + const ipcClient = IpcClient.getInstance(); + return ipcClient.checkProblems({ appId }); + }, + enabled: !!appId, + // DO NOT SHOW ERROR TOAST. + }); + + return { + problemReport, + isChecking, + error, + checkProblems, + }; +} diff --git a/src/hooks/useStreamChat.ts b/src/hooks/useStreamChat.ts index c4eccd0..0bb1b4c 100644 --- a/src/hooks/useStreamChat.ts +++ b/src/hooks/useStreamChat.ts @@ -21,6 +21,7 @@ import { useRunApp } from "./useRunApp"; import { useCountTokens } from "./useCountTokens"; import { useUserBudgetInfo } from "./useUserBudgetInfo"; import { usePostHog } from "posthog-js/react"; +import { useCheckProblems } from "./useCheckProblems"; export function getRandomNumberId() { return Math.floor(Math.random() * 1_000_000_000_000_000); @@ -41,6 +42,7 @@ export function useStreamChat({ const { refreshAppIframe } = useRunApp(); const { countTokens } = useCountTokens(); const { refetchUserBudget } = useUserBudgetInfo(); + const { checkProblems } = useCheckProblems(selectedAppId); const posthog = usePostHog(); let chatId: number | undefined; @@ -73,6 +75,7 @@ export function useStreamChat({ setError(null); setIsStreaming(true); + let hasIncrementedStreamCount = false; try { IpcClient.getInstance().streamMessage(prompt, { @@ -92,6 +95,7 @@ export function useStreamChat({ if (response.updatedFiles) { setIsPreviewOpen(true); refreshAppIframe(); + checkProblems(); } if (response.extraFiles) { showExtraFilesToast({ @@ -129,7 +133,14 @@ export function useStreamChat({ setError(error instanceof Error ? error.message : String(error)); } }, - [setMessages, setIsStreaming, setIsPreviewOpen, refetchUserBudget], + [ + setMessages, + setIsStreaming, + setIsPreviewOpen, + checkProblems, + selectedAppId, + refetchUserBudget, + ], ); return { diff --git a/src/ipc/handlers/chat_stream_handlers.ts b/src/ipc/handlers/chat_stream_handlers.ts index 0883c5b..20cd20a 100644 --- a/src/ipc/handlers/chat_stream_handlers.ts +++ b/src/ipc/handlers/chat_stream_handlers.ts @@ -1,5 +1,12 @@ import { ipcMain } from "electron"; -import { CoreMessage, TextPart, ImagePart, streamText } from "ai"; +import { + CoreMessage, + TextPart, + ImagePart, + streamText, + ToolSet, + TextStreamPart, +} from "ai"; import { db } from "../../db"; import { chats, messages } from "../../db/schema"; import { and, eq, isNull } from "drizzle-orm"; @@ -14,11 +21,11 @@ import { import { getDyadAppPath } from "../../paths/paths"; import { readSettings } from "../../main/settings"; import type { ChatResponseEnd, ChatStreamParams } from "../ipc_types"; -import { extractCodebase } from "../../utils/codebase"; +import { extractCodebase, readFileWithCache } from "../../utils/codebase"; import { processFullResponseActions } from "../processors/response_processor"; import { streamTestResponse } from "./testing_chat_handlers"; import { getTestResponse } from "./testing_chat_handlers"; -import { getModelClient } from "../utils/get_model_client"; +import { getModelClient, ModelClient } from "../utils/get_model_client"; import log from "electron-log"; import { getSupabaseContext, @@ -39,6 +46,12 @@ import { getExtraProviderOptions } from "../utils/thinking_utils"; import { safeSend } from "../utils/safe_sender"; import { cleanFullResponse } from "../utils/cleanFullResponse"; +import { generateProblemReport } from "../processors/tsc"; +import { createProblemFixPrompt } from "@/shared/problem_prompt"; +import { AsyncVirtualFileSystem } from "@/utils/VirtualFilesystem"; +import { fileExists } from "../utils/file_utils"; + +type AsyncIterableStream = AsyncIterable & ReadableStream; const logger = log.scope("chat_stream_handlers"); @@ -68,11 +81,76 @@ async function isTextFile(filePath: string): Promise { return TEXT_FILE_EXTENSIONS.includes(ext); } +function escapeXml(unsafe: string): string { + return unsafe + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """); +} + // Ensure the temp directory exists if (!fs.existsSync(TEMP_DIR)) { fs.mkdirSync(TEMP_DIR, { recursive: true }); } +// Helper function to process stream chunks +async function processStreamChunks({ + fullStream, + fullResponse, + abortController, + chatId, + processResponseChunkUpdate, +}: { + fullStream: AsyncIterableStream>; + fullResponse: string; + abortController: AbortController; + chatId: number; + processResponseChunkUpdate: (params: { + fullResponse: string; + }) => Promise; +}): Promise<{ fullResponse: string; incrementalResponse: string }> { + let incrementalResponse = ""; + let inThinkingBlock = false; + + for await (const part of fullStream) { + let chunk = ""; + if (part.type === "text-delta") { + if (inThinkingBlock) { + chunk = ""; + inThinkingBlock = false; + } + chunk += part.textDelta; + } else if (part.type === "reasoning") { + if (!inThinkingBlock) { + chunk = ""; + inThinkingBlock = true; + } + + chunk += escapeDyadTags(part.textDelta); + } + + if (!chunk) { + continue; + } + + fullResponse += chunk; + incrementalResponse += chunk; + fullResponse = cleanFullResponse(fullResponse); + fullResponse = await processResponseChunkUpdate({ + fullResponse, + }); + + // If the stream was aborted, exit early + if (abortController.signal.aborted) { + logger.log(`Stream for chat ${chatId} was aborted`); + break; + } + } + + return { fullResponse, incrementalResponse }; +} + export function registerChatStreamHandlers() { ipcMain.handle("chat:stream", async (event, req: ChatStreamParams) => { try { @@ -263,32 +341,24 @@ ${componentSnippet} // Normal AI processing for non-test prompts const settings = readSettings(); - // Extract codebase information if app is associated with the chat - let codebaseInfo = ""; - let files: { path: string; content: string }[] = []; - if (updatedChat.app) { - const appPath = getDyadAppPath(updatedChat.app.path); - try { - const out = await extractCodebase({ - appPath, - chatContext: req.selectedComponent - ? { - contextPaths: [ - { - globPath: req.selectedComponent.relativePath, - }, - ], - smartContextAutoIncludes: [], - } - : validateChatContext(updatedChat.app.chatContext), - }); - codebaseInfo = out.formattedOutput; - files = out.files; - logger.log(`Extracted codebase information from ${appPath}`); - } catch (error) { - logger.error("Error extracting codebase:", error); - } - } + const appPath = getDyadAppPath(updatedChat.app.path); + const chatContext = req.selectedComponent + ? { + contextPaths: [ + { + globPath: req.selectedComponent.relativePath, + }, + ], + smartContextAutoIncludes: [], + } + : validateChatContext(updatedChat.app.chatContext); + + const { formattedOutput: codebaseInfo, files } = await extractCodebase({ + appPath, + chatContext, + }); + + logger.log(`Extracted codebase information from ${appPath}`); logger.log( "codebaseInfo: length", codebaseInfo.length, @@ -396,7 +466,7 @@ This conversation includes one or more image attachments. When the user uploads : ([ { role: "user", - content: "This is my codebase. " + codebaseInfo, + content: createCodebasePrompt(codebaseInfo), }, { role: "assistant", @@ -413,8 +483,8 @@ This conversation includes one or more image attachments. When the user uploads // and eats up extra tokens. content: settings.selectedChatMode === "ask" - ? removeDyadTags(removeThinkingTags(msg.content)) - : removeThinkingTags(msg.content), + ? removeDyadTags(removeNonEssentialTags(msg.content)) + : removeNonEssentialTags(msg.content), })), ]; @@ -453,8 +523,10 @@ This conversation includes one or more image attachments. When the user uploads const simpleStreamText = async ({ chatMessages, + modelClient, }: { chatMessages: CoreMessage[]; + modelClient: ModelClient; }) => { return streamText({ maxTokens: await getMaxTokens(settings.selectedModel), @@ -531,51 +603,21 @@ This conversation includes one or more image attachments. When the user uploads }; // When calling streamText, the messages need to be properly formatted for mixed content - const { fullStream } = await simpleStreamText({ chatMessages }); + const { fullStream } = await simpleStreamText({ + chatMessages, + modelClient, + }); // Process the stream as before - let inThinkingBlock = false; try { - for await (const part of fullStream) { - let chunk = ""; - if (part.type === "text-delta") { - if (inThinkingBlock) { - chunk = ""; - inThinkingBlock = false; - } - chunk += part.textDelta; - } else if (part.type === "reasoning") { - if (!inThinkingBlock) { - chunk = ""; - inThinkingBlock = true; - } - // Escape dyad tags in reasoning content - // We are replacing the opening tag with a look-alike character - // to avoid issues where thinking content includes dyad tags - // and are mishandled by: - // 1. FE markdown parser - // 2. Main process response processor - chunk += part.textDelta - .replace(/ 0 && + autoFixAttempts < 2 && + !abortController.signal.aborted + ) { + fullResponse += ` +${problemReport.problems + .map( + (problem) => + `${escapeXml(problem.message)}`, + ) + .join("\n")} +`; + + logger.info( + `Attempting to auto-fix problems, attempt #${autoFixAttempts + 1}`, + ); + autoFixAttempts++; + const problemFixPrompt = createProblemFixPrompt(problemReport); + + const virtualFileSystem = new AsyncVirtualFileSystem( + getDyadAppPath(updatedChat.app.path), + { + fileExists: (fileName: string) => fileExists(fileName), + readFile: (fileName: string) => readFileWithCache(fileName), + }, + ); + virtualFileSystem.applyResponseChanges(fullResponse); + + const { formattedOutput: codebaseInfo, files } = + await extractCodebase({ + appPath, + chatContext, + virtualFileSystem, + }); + const { modelClient } = await getModelClient( + settings.selectedModel, + settings, + files, + ); + + const { fullStream } = await simpleStreamText({ + modelClient, + chatMessages: [ + ...chatMessages.map((msg, index) => { + if ( + index === 0 && + msg.role === "user" && + typeof msg.content === "string" && + msg.content.startsWith(CODEBASE_PROMPT_PREFIX) + ) { + return { + role: "user", + content: createCodebasePrompt(codebaseInfo), + } as const; + } + return msg; + }), + { + role: "assistant", + content: originalFullResponse, + }, + ...previousAttempts, + { role: "user", content: problemFixPrompt }, + ], + }); + previousAttempts.push({ + role: "user", + content: problemFixPrompt, + }); + const result = await processStreamChunks({ + fullStream, + fullResponse, + abortController, + chatId: req.chatId, + processResponseChunkUpdate, + }); + fullResponse = result.fullResponse; + previousAttempts.push({ + role: "assistant", + content: result.incrementalResponse, + }); + + problemReport = await generateProblemReport({ + fullResponse, + appPath: getDyadAppPath(updatedChat.app.path), + }); + } + } catch (error) { + logger.error( + "Error generating problem report or auto-fixing:", + settings.enableAutoFixProblems, + error, + ); + } + } } catch (streamError) { // Check if this was an abort error if (abortController.signal.aborted) { @@ -901,11 +1055,21 @@ async function prepareMessageWithAttachments( }; } +function removeNonEssentialTags(text: string): string { + return removeProblemReportTags(removeThinkingTags(text)); +} + function removeThinkingTags(text: string): string { const thinkRegex = /([\s\S]*?)<\/think>/g; return text.replace(thinkRegex, "").trim(); } +export function removeProblemReportTags(text: string): string { + const problemReportRegex = + /]*>[\s\S]*?<\/dyad-problem-report>/g; + return text.replace(problemReportRegex, "").trim(); +} + export function removeDyadTags(text: string): string { const dyadRegex = /]*>[\s\S]*?<\/dyad-[^>]*>/g; return text.replace(dyadRegex, "").trim(); @@ -932,3 +1096,18 @@ export function hasUnclosedDyadWrite(text: string): boolean { return !hasClosingTag; } + +function escapeDyadTags(text: string): string { + // Escape dyad tags in reasoning content + // We are replacing the opening tag with a look-alike character + // to avoid issues where thinking content includes dyad tags + // and are mishandled by: + // 1. FE markdown parser + // 2. Main process response processor + return text.replace(/ { + try { + // Get the app to find its path + const app = await db.query.apps.findFirst({ + where: eq(apps.id, params.appId), + }); + + if (!app) { + throw new Error(`App not found: ${params.appId}`); + } + + const appPath = getDyadAppPath(app.path); + + // Call autofix with empty full response to just run TypeScript checking + const problemReport = await generateProblemReport({ + fullResponse: "", + appPath, + }); + + return problemReport; + } catch (error) { + logger.error("Error checking problems:", error); + throw error; + } + }); +} diff --git a/src/ipc/handlers/testing_chat_handlers.ts b/src/ipc/handlers/testing_chat_handlers.ts index 75ab241..549a642 100644 --- a/src/ipc/handlers/testing_chat_handlers.ts +++ b/src/ipc/handlers/testing_chat_handlers.ts @@ -4,6 +4,16 @@ import { cleanFullResponse } from "../utils/cleanFullResponse"; // e.g. [dyad-qa=add-dep] // Canned responses for test prompts const TEST_RESPONSES: Record = { + "ts-error": `This will get a TypeScript error. + + + import NonExistentClass from 'non-existent-class'; + + const x = new Object(); + x.nonExistentMethod(); + + + EOM`, "add-dep": `I'll add that dependency for you. diff --git a/src/ipc/ipc_client.ts b/src/ipc/ipc_client.ts index 6186aa1..aa43a99 100644 --- a/src/ipc/ipc_client.ts +++ b/src/ipc/ipc_client.ts @@ -9,6 +9,7 @@ import type { AppOutput, Chat, ChatResponseEnd, + ChatProblemsEvent, CreateAppParams, CreateAppResult, ListAppsResponse, @@ -35,6 +36,7 @@ import type { App, ComponentSelection, AppUpgrade, + ProblemReport, } from "./ipc_types"; import type { AppChatContext, ProposalResult } from "@/lib/schemas"; import { showError } from "@/lib/toast"; @@ -233,6 +235,7 @@ export class IpcClient { onUpdate: (messages: Message[]) => void; onEnd: (response: ChatResponseEnd) => void; onError: (error: string) => void; + onProblems?: (problems: ChatProblemsEvent) => void; }, ): void { const { @@ -934,4 +937,10 @@ export class IpcClient { public async openAndroid(params: { appId: number }): Promise { return this.ipcRenderer.invoke("open-android", params); } + + public async checkProblems(params: { + appId: number; + }): Promise { + return this.ipcRenderer.invoke("check-problems", params); + } } diff --git a/src/ipc/ipc_host.ts b/src/ipc/ipc_host.ts index 63eb0b9..c5e8ac4 100644 --- a/src/ipc/ipc_host.ts +++ b/src/ipc/ipc_host.ts @@ -22,6 +22,7 @@ import { registerProHandlers } from "./handlers/pro_handlers"; import { registerContextPathsHandlers } from "./handlers/context_paths_handlers"; import { registerAppUpgradeHandlers } from "./handlers/app_upgrade_handlers"; import { registerCapacitorHandlers } from "./handlers/capacitor_handlers"; +import { registerProblemsHandlers } from "./handlers/problems_handlers"; export function registerIpcHandlers() { // Register all IPC handlers by category @@ -33,6 +34,7 @@ export function registerIpcHandlers() { registerDependencyHandlers(); registerGithubHandlers(); registerNodeHandlers(); + registerProblemsHandlers(); registerProposalHandlers(); registerDebugHandlers(); registerSupabaseHandlers(); diff --git a/src/ipc/ipc_types.ts b/src/ipc/ipc_types.ts index 383eb31..d4c18ce 100644 --- a/src/ipc/ipc_types.ts +++ b/src/ipc/ipc_types.ts @@ -31,6 +31,12 @@ export interface ChatResponseEnd { extraFilesError?: string; } +export interface ChatProblemsEvent { + chatId: number; + appId: number; + problems: ProblemReport; +} + export interface CreateAppParams { name: string; } @@ -240,3 +246,15 @@ export interface AppUpgrade { manualUpgradeUrl: string; isNeeded: boolean; } + +export interface Problem { + file: string; + line: number; + column: number; + message: string; + code: number; +} + +export interface ProblemReport { + problems: Problem[]; +} diff --git a/src/ipc/processors/normalizePath.ts b/src/ipc/processors/normalizePath.ts new file mode 100644 index 0000000..ffff94d --- /dev/null +++ b/src/ipc/processors/normalizePath.ts @@ -0,0 +1,10 @@ +/** + * Normalize the path to use forward slashes instead of backslashes. + * This is important to prevent weird Git issues, particularly on Windows. + * @param path Source path. + * @returns Normalized path. + */ + +export function normalizePath(path: string): string { + return path.replace(/\\/g, "/"); +} diff --git a/src/ipc/processors/response_processor.ts b/src/ipc/processors/response_processor.ts index c739905..5485485 100644 --- a/src/ipc/processors/response_processor.ts +++ b/src/ipc/processors/response_processor.ts @@ -19,20 +19,11 @@ import { SqlQuery, UserSettings } from "../../lib/schemas"; import { gitCommit } from "../utils/git_utils"; import { readSettings } from "@/main/settings"; import { writeMigrationFile } from "../utils/file_utils"; +import { normalizePath } from "./normalizePath"; const readFile = fs.promises.readFile; const logger = log.scope("response_processor"); -/** - * Normalize the path to use forward slashes instead of backslashes. - * This is important to prevent weird Git issues, particularly on Windows. - * @param path Source path. - * @returns Normalized path. - */ -function normalizePath(path: string): string { - return path.replace(/\\/g, "/"); -} - export function getDyadWriteTags(fullResponse: string): { path: string; content: string; diff --git a/src/ipc/processors/tsc.ts b/src/ipc/processors/tsc.ts new file mode 100644 index 0000000..ab567d5 --- /dev/null +++ b/src/ipc/processors/tsc.ts @@ -0,0 +1,211 @@ +import * as fs from "node:fs"; +import * as path from "node:path"; + +import { ProblemReport } from "../ipc_types"; +import { Problem } from "../ipc_types"; + +import { normalizePath } from "./normalizePath"; +import { SyncVirtualFileSystem } from "../../utils/VirtualFilesystem"; +import log from "electron-log"; + +const logger = log.scope("tsc"); + +function loadLocalTypeScript(appPath: string): typeof import("typescript") { + try { + // Try to load TypeScript from the project's node_modules + const requirePath = require.resolve("typescript", { paths: [appPath] }); + logger.info(`Loading TypeScript from ${requirePath} for app ${appPath}`); + const ts = require(requirePath); + return ts; + } catch (error) { + throw new Error( + `Failed to load TypeScript from ${appPath} because of ${error}`, + ); + } +} + +export async function generateProblemReport({ + fullResponse, + appPath, +}: { + fullResponse: string; + appPath: string; +}): Promise { + // Load the local TypeScript version from the app's node_modules + const ts = loadLocalTypeScript(appPath); + + // Create virtual file system with TypeScript system delegate and apply changes from response + const vfs = new SyncVirtualFileSystem(appPath, { + fileExists: (fileName: string) => ts.sys.fileExists(fileName), + readFile: (fileName: string) => ts.sys.readFile(fileName), + }); + vfs.applyResponseChanges(fullResponse); + + // Find TypeScript config - throw error if not found + const tsconfigPath = findTypeScriptConfig(appPath); + + // Create TypeScript program with virtual file system + const result = await runTypeScriptCheck(ts, appPath, tsconfigPath, vfs); + return result; +} + +function findTypeScriptConfig(appPath: string): string { + const possibleConfigs = [ + // For vite applications, we want to check tsconfig.app.json, since it's the + // most important one (client-side app). + // The tsconfig.json in vite apps is a project reference and doesn't + // actually check anything unless you do "--build" which requires a complex + // programmatic approach + "tsconfig.app.json", + // For Next.js applications, it typically has a single tsconfig.json file + "tsconfig.json", + ]; + + for (const config of possibleConfigs) { + const configPath = path.join(appPath, config); + if (fs.existsSync(configPath)) { + return configPath; + } + } + + throw new Error( + `No TypeScript configuration file found in ${appPath}. Expected one of: ${possibleConfigs.join(", ")}`, + ); +} + +async function runTypeScriptCheck( + ts: typeof import("typescript"), + appPath: string, + tsconfigPath: string, + vfs: SyncVirtualFileSystem, +): Promise { + return runSingleProject(ts, appPath, tsconfigPath, vfs); +} + +async function runSingleProject( + ts: typeof import("typescript"), + appPath: string, + tsconfigPath: string, + vfs: SyncVirtualFileSystem, +): Promise { + // Use the idiomatic way to parse TypeScript config + const parsedCommandLine = ts.getParsedCommandLineOfConfigFile( + tsconfigPath, + undefined, // No additional options + { + // Custom system object that can handle our virtual files + ...ts.sys, + fileExists: (fileName: string) => vfs.fileExists(fileName), + readFile: (fileName: string) => vfs.readFile(fileName), + onUnRecoverableConfigFileDiagnostic: ( + diagnostic: import("typescript").Diagnostic, + ) => { + throw new Error( + `TypeScript config error: ${ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n")}`, + ); + }, + }, + ); + + if (!parsedCommandLine) { + throw new Error(`Failed to parse TypeScript config: ${tsconfigPath}`); + } + + let rootNames = parsedCommandLine.fileNames; + + // Add any virtual files that aren't already included + const virtualTsFiles = vfs + .getVirtualFiles() + .map((file) => path.resolve(appPath, file.path)) + .filter(isTypeScriptFile); + + // Remove deleted files from rootNames + const deletedFiles = vfs + .getDeletedFiles() + .map((file) => path.resolve(appPath, file)); + rootNames = rootNames.filter((fileName) => { + const resolvedPath = path.resolve(fileName); + return !deletedFiles.includes(resolvedPath); + }); + + for (const virtualFile of virtualTsFiles) { + if (!rootNames.includes(virtualFile)) { + rootNames.push(virtualFile); + } + } + + // Create custom compiler host + const host = createVirtualCompilerHost( + ts, + appPath, + vfs, + parsedCommandLine.options, + ); + + // Create TypeScript program - this is the idiomatic way + const program = ts.createProgram(rootNames, parsedCommandLine.options, host); + + // Get diagnostics + const diagnostics = [ + ...program.getSyntacticDiagnostics(), + ...program.getSemanticDiagnostics(), + ...program.getGlobalDiagnostics(), + ]; + + // Convert diagnostics to our format + const problems: Problem[] = []; + + for (const diagnostic of diagnostics) { + if (!diagnostic.file) continue; + + const { line, character } = diagnostic.file.getLineAndCharacterOfPosition( + diagnostic.start!, + ); + const message = ts.flattenDiagnosticMessageText( + diagnostic.messageText, + "\n", + ); + + if (diagnostic.category !== ts.DiagnosticCategory.Error) { + continue; + } + + problems.push({ + file: normalizePath(path.relative(appPath, diagnostic.file.fileName)), + line: line + 1, // Convert to 1-based + column: character + 1, // Convert to 1-based + message, + code: diagnostic.code, + }); + } + + return { + problems, + }; +} + +function createVirtualCompilerHost( + ts: typeof import("typescript"), + appPath: string, + vfs: SyncVirtualFileSystem, + compilerOptions: import("typescript").CompilerOptions, +): import("typescript").CompilerHost { + const host = ts.createCompilerHost(compilerOptions); + + // Override file reading to use virtual files + host.readFile = (fileName: string) => { + return vfs.readFile(fileName); + }; + + // Override file existence check + host.fileExists = (fileName: string) => { + return vfs.fileExists(fileName); + }; + + return host; +} + +function isTypeScriptFile(fileName: string): boolean { + const ext = path.extname(fileName).toLowerCase(); + return [".ts", ".tsx", ".js", ".jsx"].includes(ext); +} diff --git a/src/ipc/utils/file_utils.ts b/src/ipc/utils/file_utils.ts index c2c8fd2..e94c692 100644 --- a/src/ipc/utils/file_utils.ts +++ b/src/ipc/utils/file_utils.ts @@ -92,3 +92,10 @@ export async function writeMigrationFile( await fsExtra.writeFile(migrationFilePath, queryContent); } + +export async function fileExists(filePath: string) { + return fsPromises + .access(filePath) + .then(() => true) + .catch(() => false); +} diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts index 33b46ea..fc20de7 100644 --- a/src/lib/schemas.ts +++ b/src/lib/schemas.ts @@ -149,6 +149,7 @@ export const UserSettingsSchema = z.object({ enableSupabaseWriteSqlMigration: z.boolean().optional(), selectedChatMode: ChatModeSchema.optional(), + enableAutoFixProblems: z.boolean().optional(), enableNativeGit: z.boolean().optional(), //////////////////////////////// diff --git a/src/main/settings.ts b/src/main/settings.ts index 15cc55c..5fb2e7b 100644 --- a/src/main/settings.ts +++ b/src/main/settings.ts @@ -20,6 +20,7 @@ const DEFAULT_SETTINGS: UserSettings = { enableProLazyEditsMode: true, enableProSmartFilesContextMode: true, selectedChatMode: "build", + enableAutoFixProblems: true, }; const SETTINGS_FILE = "user-settings.json"; diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx index 22cefab..3f285c4 100644 --- a/src/pages/settings.tsx +++ b/src/pages/settings.tsx @@ -17,6 +17,7 @@ import { GitHubIntegration } from "@/components/GitHubIntegration"; import { SupabaseIntegration } from "@/components/SupabaseIntegration"; import { Switch } from "@/components/ui/switch"; import { Label } from "@/components/ui/label"; +import { AutoFixProblemsSwitch } from "@/components/AutoFixProblemsSwitch"; export default function SettingsPage() { const { theme, setTheme } = useTheme(); @@ -110,6 +111,13 @@ export default function SettingsPage() {
+
+ +
+ This will automatically fix TypeScript errors. +
+
+
{ + prompt += `${index + 1}. ${problem.file}:${problem.line}:${problem.column} - ${problem.message} (TS${problem.code})\n`; + }); + + prompt += "\nPlease fix all errors in a concise way."; + + return prompt; +} diff --git a/src/utils/VirtualFilesystem.ts b/src/utils/VirtualFilesystem.ts new file mode 100644 index 0000000..4fbc0eb --- /dev/null +++ b/src/utils/VirtualFilesystem.ts @@ -0,0 +1,373 @@ +import * as fs from "node:fs"; +import * as path from "node:path"; +import { + getDyadWriteTags, + getDyadRenameTags, + getDyadDeleteTags, +} from "../ipc/processors/response_processor"; + +import log from "electron-log"; + +const logger = log.scope("VirtualFileSystem"); + +export interface VirtualFile { + path: string; + content: string; +} + +export interface VirtualRename { + from: string; + to: string; +} + +export interface SyncFileSystemDelegate { + fileExists?: (fileName: string) => boolean; + readFile?: (fileName: string) => string | undefined; +} + +export interface AsyncFileSystemDelegate { + fileExists?: (fileName: string) => Promise; + readFile?: (fileName: string) => Promise; +} + +/** + * Base class containing shared virtual filesystem functionality + */ +export abstract class BaseVirtualFileSystem { + protected virtualFiles = new Map(); + protected deletedFiles = new Set(); + protected baseDir: string; + + constructor(baseDir: string) { + this.baseDir = baseDir; + } + + /** + * Apply changes from a response containing dyad tags + */ + public applyResponseChanges(fullResponse: string): void { + const writeTags = getDyadWriteTags(fullResponse); + const renameTags = getDyadRenameTags(fullResponse); + const deletePaths = getDyadDeleteTags(fullResponse); + + // Process deletions + for (const deletePath of deletePaths) { + this.deleteFile(deletePath); + } + + // Process renames (delete old, create new) + for (const rename of renameTags) { + this.renameFile(rename.from, rename.to); + } + + // Process writes + for (const writeTag of writeTags) { + this.writeFile(writeTag.path, writeTag.content); + } + } + + /** + * Write a file to the virtual filesystem + */ + public writeFile(relativePath: string, content: string): void { + const absolutePath = path.resolve(this.baseDir, relativePath); + this.virtualFiles.set(absolutePath, content); + // Remove from deleted files if it was previously deleted + this.deletedFiles.delete(absolutePath); + } + + /** + * Delete a file from the virtual filesystem + */ + public deleteFile(relativePath: string): void { + const absolutePath = path.resolve(this.baseDir, relativePath); + this.deletedFiles.add(absolutePath); + // Remove from virtual files if it exists there + this.virtualFiles.delete(absolutePath); + } + + /** + * Rename a file in the virtual filesystem + */ + public renameFile(fromPath: string, toPath: string): void { + const fromAbsolute = path.resolve(this.baseDir, fromPath); + const toAbsolute = path.resolve(this.baseDir, toPath); + + // Mark old file as deleted + this.deletedFiles.add(fromAbsolute); + + // If the source file exists in virtual files, move its content + if (this.virtualFiles.has(fromAbsolute)) { + const content = this.virtualFiles.get(fromAbsolute)!; + this.virtualFiles.delete(fromAbsolute); + this.virtualFiles.set(toAbsolute, content); + } else { + // Try to read from actual filesystem + try { + const content = fs.readFileSync(fromAbsolute, "utf8"); + this.virtualFiles.set(toAbsolute, content); + } catch (error) { + // If we can't read the source file, we'll let the consumer handle it + logger.warn( + `Could not read source file for rename: ${fromPath}`, + error, + ); + } + } + + // Remove destination from deleted files if it was previously deleted + this.deletedFiles.delete(toAbsolute); + } + + /** + * Get all virtual files (files that have been written or modified) + */ + public getVirtualFiles(): VirtualFile[] { + return Array.from(this.virtualFiles.entries()).map( + ([absolutePath, content]) => ({ + path: path.relative(this.baseDir, absolutePath), + content, + }), + ); + } + + /** + * Get all deleted file paths (relative to base directory) + */ + public getDeletedFiles(): string[] { + return Array.from(this.deletedFiles).map((absolutePath) => + path.relative(this.baseDir, absolutePath), + ); + } + + /** + * Get all files that should be considered (existing + virtual - deleted) + */ + public getAllFiles(): string[] { + const allFiles = new Set(); + + // Add virtual files + for (const [absolutePath] of this.virtualFiles.entries()) { + allFiles.add(path.relative(this.baseDir, absolutePath)); + } + + // Add existing files (this is a simplified version - in practice you might want to scan the directory) + // This method is mainly for getting the current state, consumers can combine with directory scanning + + return Array.from(allFiles); + } + + /** + * Check if a file has been modified in the virtual filesystem + */ + public isFileModified(filePath: string): boolean { + const absolutePath = path.isAbsolute(filePath) + ? filePath + : path.resolve(this.baseDir, filePath); + + return ( + this.virtualFiles.has(absolutePath) || this.deletedFiles.has(absolutePath) + ); + } + + /** + * Clear all virtual changes + */ + public clear(): void { + this.virtualFiles.clear(); + this.deletedFiles.clear(); + } + + /** + * Get the base directory + */ + public getBaseDir(): string { + return this.baseDir; + } + + /** + * Check if a file is deleted in the virtual filesystem + */ + protected isDeleted(filePath: string): boolean { + const absolutePath = path.isAbsolute(filePath) + ? filePath + : path.resolve(this.baseDir, filePath); + return this.deletedFiles.has(absolutePath); + } + + /** + * Check if a file exists in virtual files + */ + protected hasVirtualFile(filePath: string): boolean { + const absolutePath = path.isAbsolute(filePath) + ? filePath + : path.resolve(this.baseDir, filePath); + return this.virtualFiles.has(absolutePath); + } + + /** + * Get virtual file content + */ + protected getVirtualFileContent(filePath: string): string | undefined { + const absolutePath = path.isAbsolute(filePath) + ? filePath + : path.resolve(this.baseDir, filePath); + return this.virtualFiles.get(absolutePath); + } +} + +/** + * Synchronous virtual filesystem + */ +export class SyncVirtualFileSystem extends BaseVirtualFileSystem { + private delegate: SyncFileSystemDelegate; + + constructor(baseDir: string, delegate?: SyncFileSystemDelegate) { + super(baseDir); + this.delegate = delegate || {}; + } + + /** + * Check if a file exists in the virtual filesystem + */ + public fileExists(filePath: string): boolean { + // Check if file is deleted + if (this.isDeleted(filePath)) { + return false; + } + + // Check if file exists in virtual files + if (this.hasVirtualFile(filePath)) { + return true; + } + + // Delegate to custom fileExists if provided + if (this.delegate.fileExists) { + return this.delegate.fileExists(filePath); + } + + // Fall back to actual filesystem + const absolutePath = path.isAbsolute(filePath) + ? filePath + : path.resolve(this.baseDir, filePath); + return fs.existsSync(absolutePath); + } + + /** + * Read a file from the virtual filesystem + */ + public readFile(filePath: string): string | undefined { + // Check if file is deleted + if (this.isDeleted(filePath)) { + return undefined; + } + + // Check virtual files first + const virtualContent = this.getVirtualFileContent(filePath); + if (virtualContent !== undefined) { + return virtualContent; + } + + // Delegate to custom readFile if provided + if (this.delegate.readFile) { + return this.delegate.readFile(filePath); + } + + // Fall back to actual filesystem + try { + const absolutePath = path.isAbsolute(filePath) + ? filePath + : path.resolve(this.baseDir, filePath); + return fs.readFileSync(absolutePath, "utf8"); + } catch { + return undefined; + } + } + + /** + * Create a custom file system interface for other tools + */ + public createFileSystemInterface() { + return { + fileExists: (fileName: string) => this.fileExists(fileName), + readFile: (fileName: string) => this.readFile(fileName), + writeFile: (fileName: string, content: string) => + this.writeFile(fileName, content), + deleteFile: (fileName: string) => this.deleteFile(fileName), + }; + } +} + +/** + * Asynchronous virtual filesystem + */ +export class AsyncVirtualFileSystem extends BaseVirtualFileSystem { + private delegate: AsyncFileSystemDelegate; + + constructor(baseDir: string, delegate?: AsyncFileSystemDelegate) { + super(baseDir); + this.delegate = delegate || {}; + } + + /** + * Check if a file exists in the virtual filesystem + */ + public async fileExists(filePath: string): Promise { + // Check if file is deleted + if (this.isDeleted(filePath)) { + return false; + } + + // Check if file exists in virtual files + if (this.hasVirtualFile(filePath)) { + return true; + } + + // Delegate to custom fileExists if provided + if (this.delegate.fileExists) { + return this.delegate.fileExists(filePath); + } + + // Fall back to actual filesystem + try { + const absolutePath = path.isAbsolute(filePath) + ? filePath + : path.resolve(this.baseDir, filePath); + await fs.promises.access(absolutePath); + return true; + } catch { + return false; + } + } + + /** + * Read a file from the virtual filesystem + */ + public async readFile(filePath: string): Promise { + // Check if file is deleted + if (this.isDeleted(filePath)) { + return undefined; + } + + // Check virtual files first + const virtualContent = this.getVirtualFileContent(filePath); + if (virtualContent !== undefined) { + return virtualContent; + } + + // Delegate to custom readFile if provided + if (this.delegate.readFile) { + return this.delegate.readFile(filePath); + } + + // Fall back to actual filesystem + try { + const absolutePath = path.isAbsolute(filePath) + ? filePath + : path.resolve(this.baseDir, filePath); + return await fs.promises.readFile(absolutePath, "utf8"); + } catch { + return undefined; + } + } +} diff --git a/src/utils/codebase.ts b/src/utils/codebase.ts index 94c6297..572088f 100644 --- a/src/utils/codebase.ts +++ b/src/utils/codebase.ts @@ -7,6 +7,7 @@ import { IS_TEST_BUILD } from "../ipc/utils/test_utils"; import { glob } from "glob"; import { AppChatContext } from "../lib/schemas"; import { readSettings } from "@/main/settings"; +import { AsyncVirtualFileSystem } from "./VirtualFilesystem"; const logger = log.scope("utils/codebase"); @@ -156,8 +157,19 @@ async function isGitIgnored( /** * Read file contents with caching based on last modified time */ -async function readFileWithCache(filePath: string): Promise { +export async function readFileWithCache( + filePath: string, + virtualFileSystem?: AsyncVirtualFileSystem, +): Promise { try { + // Check virtual filesystem first if provided + if (virtualFileSystem) { + const virtualContent = await virtualFileSystem.readFile(filePath); + if (virtualContent != null) { + return cleanContent({ content: virtualContent, filePath }); + } + } + // Get file stats to check the modification time const stats = await fsAsync.stat(filePath); const currentMtime = stats.mtimeMs; @@ -193,7 +205,7 @@ async function readFileWithCache(filePath: string): Promise { return content; } catch (error) { logger.error(`Error reading file: ${filePath}`, error); - return null; + return undefined; } } @@ -304,7 +316,11 @@ const OMITTED_FILE_CONTENT = "// Contents omitted for brevity"; /** * Format a file for inclusion in the codebase extract */ -async function formatFile(filePath: string, baseDir: string): Promise { +async function formatFile( + filePath: string, + baseDir: string, + virtualFileSystem?: AsyncVirtualFileSystem, +): Promise { try { const relativePath = path .relative(baseDir, filePath) @@ -320,9 +336,9 @@ ${OMITTED_FILE_CONTENT} `; } - const content = await readFileWithCache(filePath); + const content = await readFileWithCache(filePath, virtualFileSystem); - if (content === null) { + if (content == null) { return ` // Error reading file @@ -354,14 +370,17 @@ export type CodebaseFile = { /** * Extract and format codebase files as a string to be included in prompts * @param appPath - Path to the codebase to extract + * @param virtualFileSystem - Optional virtual filesystem to apply modifications * @returns Object containing formatted output and individual files */ export async function extractCodebase({ appPath, chatContext, + virtualFileSystem, }: { appPath: string; chatContext: AppChatContext; + virtualFileSystem?: AsyncVirtualFileSystem; }): Promise<{ formattedOutput: string; files: CodebaseFile[]; @@ -383,6 +402,26 @@ export async function extractCodebase({ // Collect all relevant files let files = await collectFiles(appPath, appPath); + // Apply virtual filesystem modifications if provided + if (virtualFileSystem) { + // Filter out deleted files + const deletedFiles = new Set( + virtualFileSystem + .getDeletedFiles() + .map((relativePath) => path.resolve(appPath, relativePath)), + ); + files = files.filter((file) => !deletedFiles.has(file)); + + // Add virtual files + const virtualFiles = virtualFileSystem.getVirtualFiles(); + for (const virtualFile of virtualFiles) { + const absolutePath = path.resolve(appPath, virtualFile.path); + if (!files.includes(absolutePath)) { + files.push(absolutePath); + } + } + } + // Collect files from contextPaths and smartContextAutoIncludes const { contextPaths, smartContextAutoIncludes } = chatContext; const includedFiles = new Set(); @@ -443,7 +482,7 @@ export async function extractCodebase({ // Format files and collect individual file contents const filesArray: CodebaseFile[] = []; const formatPromises = sortedFiles.map(async (file) => { - const formattedContent = await formatFile(file, appPath); + const formattedContent = await formatFile(file, appPath, virtualFileSystem); // Get raw content for the files array const relativePath = path @@ -456,8 +495,8 @@ export async function extractCodebase({ const fileContent = isOmittedFile(relativePath) ? OMITTED_FILE_CONTENT - : await readFileWithCache(file); - if (fileContent !== null) { + : await readFileWithCache(file, virtualFileSystem); + if (fileContent != null) { filesArray.push({ path: relativePath, content: fileContent, @@ -498,7 +537,8 @@ async function sortFilesByModificationTime(files: string[]): Promise { return { file, mtime: stats.mtimeMs }; } catch (error) { // If there's an error getting stats, use current time as fallback - logger.error(`Error getting file stats for ${file}:`, error); + // This can happen with virtual files, so it's not a big deal. + logger.warn(`Error getting file stats for ${file}:`, error); return { file, mtime: Date.now() }; } }), diff --git a/testing/fake-llm-server/chatCompletionHandler.ts b/testing/fake-llm-server/chatCompletionHandler.ts index 4c5d792..6cae268 100644 --- a/testing/fake-llm-server/chatCompletionHandler.ts +++ b/testing/fake-llm-server/chatCompletionHandler.ts @@ -25,6 +25,55 @@ export const createChatCompletionHandler = let messageContent = CANNED_MESSAGE; + // TS auto-fix prefixes + if ( + lastMessage && + typeof lastMessage.content === "string" && + lastMessage.content.startsWith( + "Fix these 2 TypeScript compile-time error", + ) + ) { + // Fix errors in create-ts-errors.md and introduce a new error + messageContent = ` + +// Import doesn't exist +// import NonExistentClass from 'non-existent-class'; + + +const x = new Object(); +x.nonExistentMethod2(); + + + `; + } + if ( + lastMessage && + typeof lastMessage.content === "string" && + lastMessage.content.startsWith( + "Fix these 1 TypeScript compile-time error", + ) + ) { + // Fix errors in create-ts-errors.md and introduce a new error + messageContent = ` + +// Import doesn't exist +// import NonExistentClass from 'non-existent-class'; + + +const x = new Object(); +x.toString(); // replaced with existing method + + + `; + } + + if ( + lastMessage && + typeof lastMessage.content === "string" && + lastMessage.content.includes("TypeScript compile-time error") + ) { + messageContent += "\n\n" + generateDump(req); + } if ( lastMessage && typeof lastMessage.content === "string" &&