From 510d288d788df11fd9dc2aa57c019984aa14720e Mon Sep 17 00:00:00 2001 From: Will Chen Date: Wed, 30 Jul 2025 16:03:17 -0700 Subject: [PATCH] Show code snippet in fix problems (#745) --- ...lems.spec.ts_problems---fix-all-1.aria.yml | 41 ++++++++++++ .../problems.spec.ts_problems---fix-all-1.txt | 17 +++++ ...to-fix---complex-delete-rename-write-1.txt | 4 ++ ...to-fix---complex-delete-rename-write-2.txt | 8 +++ ....spec.ts_problems-auto-fix---enabled-1.txt | 9 +++ ....spec.ts_problems-auto-fix---enabled-2.txt | 14 ++++ ...auto-fix---gives-up-after-2-attempts-1.txt | 28 ++++++++ ...auto-fix---gives-up-after-2-attempts-2.txt | 56 ++++++++++++++++ shared/tsc_types.ts | 1 + .../__snapshots__/problem_prompt.test.ts.snap | 64 +++++++++++++++++++ src/__tests__/problem_prompt.test.ts | 18 ++++++ src/components/chat/DyadProblemSummary.tsx | 8 ++- src/components/preview_panel/Problems.tsx | 1 + src/shared/problem_prompt.ts | 4 ++ workers/tsc/tsc_worker.ts | 13 ++++ 15 files changed, 283 insertions(+), 3 deletions(-) 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 index a437903..56baf57 100644 --- 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 @@ -5,11 +5,34 @@ - img - text: "src/bad-file.ts Summary: This will get a TypeScript error." - 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 +- img +- text: file1.txt +- img +- text: file1.txt +- paragraph: More EOM +- paragraph: "[[dyad-dump-path=*]]" - paragraph: "Fix these 3 TypeScript compile-time errors:" - list: - listitem: src/bad-file.tsx:2:1 - Cannot find name 'nonExistentFunction1'. (TS2304) +- code: const App = () =>
Minimal imported app
; nonExistentFunction1(); // <-- TypeScript compiler error here nonExistentFunction2(); +- list: - listitem: src/bad-file.tsx:3:1 - Cannot find name 'nonExistentFunction2'. (TS2304) +- code: nonExistentFunction1(); nonExistentFunction2(); // <-- TypeScript compiler error here nonExistentFunction3(); +- list: - listitem: src/bad-file.tsx:4:1 - Cannot find name 'nonExistentFunction3'. (TS2304) +- code: nonExistentFunction2(); nonExistentFunction3(); // <-- TypeScript compiler error here - paragraph: Please fix all errors in a concise way. - img - text: file1.txt @@ -17,5 +40,23 @@ - text: file1.txt - paragraph: More EOM - paragraph: "[[dyad-dump-path=*]]" +- img +- text: Auto-fix3 problems +- img +- img +- text: file1.txt +- img +- text: file1.txt +- paragraph: More EOM +- paragraph: "[[dyad-dump-path=*]]" +- img +- text: Auto-fix3 problems +- img +- 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 index 5db7910..1e8872b 100644 --- a/e2e-tests/snapshots/problems.spec.ts_problems---fix-all-1.txt +++ b/e2e-tests/snapshots/problems.spec.ts_problems---fix-all-1.txt @@ -3,7 +3,24 @@ role: user message: Fix these 3 TypeScript compile-time errors: 1. src/bad-file.tsx:2:1 - Cannot find name 'nonExistentFunction1'. (TS2304) +``` +const App = () =>
Minimal imported app
; +nonExistentFunction1(); // <-- TypeScript compiler error here +nonExistentFunction2(); +``` + 2. src/bad-file.tsx:3:1 - Cannot find name 'nonExistentFunction2'. (TS2304) +``` +nonExistentFunction1(); +nonExistentFunction2(); // <-- TypeScript compiler error here +nonExistentFunction3(); +``` + 3. src/bad-file.tsx:4:1 - Cannot find name 'nonExistentFunction3'. (TS2304) +``` +nonExistentFunction2(); +nonExistentFunction3(); // <-- TypeScript compiler error here +``` + 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-1.txt b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---complex-delete-rename-write-1.txt index bf32035..c77ce20 100644 --- 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 @@ -417,5 +417,9 @@ role: user message: Fix these 1 TypeScript compile-time error: 1. src/main.tsx:1:1 - Cannot find name 'finalMainTsxFileWithError'. (TS2304) +``` +finalMainTsxFileWithError(); // <-- TypeScript compiler error here +``` + 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 index 8e9bb3a..7c82611 100644 --- 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 @@ -426,6 +426,10 @@ role: user message: Fix these 1 TypeScript compile-time error: 1. src/main.tsx:1:1 - Cannot find name 'finalMainTsxFileWithError'. (TS2304) +``` +finalMainTsxFileWithError(); // <-- TypeScript compiler error here +``` + Please fix all errors in a concise way. @@ -449,5 +453,9 @@ role: user message: Fix these 1 TypeScript compile-time error: 1. src/main.tsx:1:1 - Cannot find name 'finalMainTsxFileWithError'. (TS2304) +``` +finalMainTsxFileWithError(); // <-- TypeScript compiler error here +``` + 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-1.txt b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---enabled-1.txt index e88b551..bee4d5d 100644 --- 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 @@ -436,6 +436,15 @@ 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) +``` +import NonExistentClass from 'non-existent-class'; // <-- TypeScript compiler error here +``` + 2. src/bad-file.ts:4:3 - Property 'nonExistentMethod' does not exist on type 'Object'. (TS2339) +``` +const x = new Object(); +x.nonExistentMethod(); // <-- TypeScript compiler error here +``` + 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 index 0c6fccd..899dd09 100644 --- 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 @@ -438,7 +438,16 @@ 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) +``` +import NonExistentClass from 'non-existent-class'; // <-- TypeScript compiler error here +``` + 2. src/bad-file.ts:4:3 - Property 'nonExistentMethod' does not exist on type 'Object'. (TS2339) +``` +const x = new Object(); +x.nonExistentMethod(); // <-- TypeScript compiler error here +``` + Please fix all errors in a concise way. @@ -462,5 +471,10 @@ 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) +``` +const x = new Object(); +x.nonExistentMethod2(); // <-- TypeScript compiler error here +``` + 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.txt b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-1.txt index a49529d..6ef28c4 100644 --- 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 @@ -438,9 +438,37 @@ 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) +``` +import NonExistentClass from 'non-existent-class'; // <-- TypeScript compiler error here +import NonExistentClass2 from 'non-existent-class'; +``` + 2. src/bad-file.ts:2:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +``` +import NonExistentClass from 'non-existent-class'; +import NonExistentClass2 from 'non-existent-class'; // <-- TypeScript compiler error here +import NonExistentClass3 from 'non-existent-class'; +``` + 3. src/bad-file.ts:3:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +``` +import NonExistentClass2 from 'non-existent-class'; +import NonExistentClass3 from 'non-existent-class'; // <-- TypeScript compiler error here +import NonExistentClass4 from 'non-existent-class'; +``` + 4. src/bad-file.ts:4:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +``` +import NonExistentClass3 from 'non-existent-class'; +import NonExistentClass4 from 'non-existent-class'; // <-- TypeScript compiler error here +import NonExistentClass5 from 'non-existent-class'; +``` + 5. src/bad-file.ts:5:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +``` +import NonExistentClass4 from 'non-existent-class'; +import NonExistentClass5 from 'non-existent-class'; // <-- TypeScript compiler error here +``` + 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.txt b/e2e-tests/snapshots/problems.spec.ts_problems-auto-fix---gives-up-after-2-attempts-2.txt index 045edfc..663a757 100644 --- 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 @@ -442,10 +442,38 @@ 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) +``` +import NonExistentClass from 'non-existent-class'; // <-- TypeScript compiler error here +import NonExistentClass2 from 'non-existent-class'; +``` + 2. src/bad-file.ts:2:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +``` +import NonExistentClass from 'non-existent-class'; +import NonExistentClass2 from 'non-existent-class'; // <-- TypeScript compiler error here +import NonExistentClass3 from 'non-existent-class'; +``` + 3. src/bad-file.ts:3:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +``` +import NonExistentClass2 from 'non-existent-class'; +import NonExistentClass3 from 'non-existent-class'; // <-- TypeScript compiler error here +import NonExistentClass4 from 'non-existent-class'; +``` + 4. src/bad-file.ts:4:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +``` +import NonExistentClass3 from 'non-existent-class'; +import NonExistentClass4 from 'non-existent-class'; // <-- TypeScript compiler error here +import NonExistentClass5 from 'non-existent-class'; +``` + 5. src/bad-file.ts:5:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +``` +import NonExistentClass4 from 'non-existent-class'; +import NonExistentClass5 from 'non-existent-class'; // <-- TypeScript compiler error here +``` + Please fix all errors in a concise way. @@ -464,9 +492,37 @@ 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) +``` +import NonExistentClass from 'non-existent-class'; // <-- TypeScript compiler error here +import NonExistentClass2 from 'non-existent-class'; +``` + 2. src/bad-file.ts:2:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +``` +import NonExistentClass from 'non-existent-class'; +import NonExistentClass2 from 'non-existent-class'; // <-- TypeScript compiler error here +import NonExistentClass3 from 'non-existent-class'; +``` + 3. src/bad-file.ts:3:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +``` +import NonExistentClass2 from 'non-existent-class'; +import NonExistentClass3 from 'non-existent-class'; // <-- TypeScript compiler error here +import NonExistentClass4 from 'non-existent-class'; +``` + 4. src/bad-file.ts:4:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +``` +import NonExistentClass3 from 'non-existent-class'; +import NonExistentClass4 from 'non-existent-class'; // <-- TypeScript compiler error here +import NonExistentClass5 from 'non-existent-class'; +``` + 5. src/bad-file.ts:5:31 - Cannot find module 'non-existent-class' or its corresponding type declarations. (TS2307) +``` +import NonExistentClass4 from 'non-existent-class'; +import NonExistentClass5 from 'non-existent-class'; // <-- TypeScript compiler error here +``` + Please fix all errors in a concise way. \ No newline at end of file diff --git a/shared/tsc_types.ts b/shared/tsc_types.ts index b825ce5..a7e20b1 100644 --- a/shared/tsc_types.ts +++ b/shared/tsc_types.ts @@ -17,6 +17,7 @@ export interface Problem { column: number; message: string; code: number; + snippet: string; } export interface ProblemReport { diff --git a/src/__tests__/__snapshots__/problem_prompt.test.ts.snap b/src/__tests__/__snapshots__/problem_prompt.test.ts.snap index ed556f8..3a70ced 100644 --- a/src/__tests__/__snapshots__/problem_prompt.test.ts.snap +++ b/src/__tests__/__snapshots__/problem_prompt.test.ts.snap @@ -4,7 +4,15 @@ exports[`problem_prompt > createConciseProblemFixPrompt > should format a concis "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) +\`\`\` +SNIPPET +\`\`\` + 2. src/components/Modal.tsx:35:20 - Property 'isOpen' does not exist on type 'IntrinsicAttributes & ModalProps'. (TS2339) +\`\`\` +SNIPPET +\`\`\` + Please fix all errors in a concise way." `; @@ -13,6 +21,10 @@ exports[`problem_prompt > createConciseProblemFixPrompt > should format a concis "Fix these 1 TypeScript compile-time error: 1. src/App.tsx:10:5 - Cannot find name 'consol'. Did you mean 'console'? (TS2552) +\`\`\` +SNIPPET +\`\`\` + Please fix all errors in a concise way." `; @@ -23,6 +35,10 @@ exports[`problem_prompt > createProblemFixPrompt > should format a single error "Fix these 1 TypeScript compile-time error: 1. src/components/Button.tsx:15:23 - Property 'onClick' does not exist on type 'ButtonProps'. (TS2339) +\`\`\` +SNIPPET +\`\`\` + Please fix all errors in a concise way." `; @@ -31,9 +47,25 @@ exports[`problem_prompt > createProblemFixPrompt > should format multiple errors "Fix these 4 TypeScript compile-time errors: 1. src/components/Button.tsx:15:23 - Property 'onClick' does not exist on type 'ButtonProps'. (TS2339) +\`\`\` +SNIPPET +\`\`\` + 2. src/components/Button.tsx:8:12 - Type 'string | undefined' is not assignable to type 'string'. (TS2322) +\`\`\` +SNIPPET +\`\`\` + 3. src/hooks/useApi.ts:42:5 - Argument of type 'unknown' is not assignable to parameter of type 'string'. (TS2345) +\`\`\` +SNIPPET +\`\`\` + 4. src/utils/helpers.ts:45:8 - Function lacks ending return statement and return type does not include 'undefined'. (TS2366) +\`\`\` +SNIPPET +\`\`\` + Please fix all errors in a concise way." `; @@ -42,9 +74,25 @@ exports[`problem_prompt > createProblemFixPrompt > should handle realistic React "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) +\`\`\` +SNIPPET +\`\`\` + 2. src/components/UserProfile.tsx:25:15 - Object is possibly 'null'. (TS2531) +\`\`\` +SNIPPET +\`\`\` + 3. src/hooks/useLocalStorage.ts:18:12 - Type 'string | null' is not assignable to type 'T'. (TS2322) +\`\`\` +SNIPPET +\`\`\` + 4. src/types/api.ts:45:3 - Duplicate identifier 'UserRole'. (TS2300) +\`\`\` +SNIPPET +\`\`\` + Please fix all errors in a concise way." `; @@ -55,9 +103,25 @@ exports[`problem_prompt > realistic TypeScript error scenarios > should handle c "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) +\`\`\` +SNIPPET +\`\`\` + 2. src/components/SearchInput.tsx:15:45 - Type '(value: string) => void' is not assignable to type 'ChangeEventHandler'. (TS2322) +\`\`\` +SNIPPET +\`\`\` + 3. src/api/userService.ts:8:1 - Function lacks ending return statement and return type does not include 'undefined'. (TS2366) +\`\`\` +SNIPPET +\`\`\` + 4. src/utils/dataProcessor.ts:34:25 - Object is possibly 'undefined'. (TS2532) +\`\`\` +SNIPPET +\`\`\` + Please fix all errors in a concise way." `; diff --git a/src/__tests__/problem_prompt.test.ts b/src/__tests__/problem_prompt.test.ts index 60aa0cc..70e744c 100644 --- a/src/__tests__/problem_prompt.test.ts +++ b/src/__tests__/problem_prompt.test.ts @@ -2,6 +2,8 @@ import { describe, it, expect } from "vitest"; import { createProblemFixPrompt } from "../shared/problem_prompt"; import type { ProblemReport } from "../ipc/ipc_types"; +const snippet = `SNIPPET`; + describe("problem_prompt", () => { describe("createProblemFixPrompt", () => { it("should return a message when no problems exist", () => { @@ -22,6 +24,7 @@ describe("problem_prompt", () => { column: 23, message: "Property 'onClick' does not exist on type 'ButtonProps'.", code: 2339, + snippet, }, ], }; @@ -39,6 +42,7 @@ describe("problem_prompt", () => { column: 23, message: "Property 'onClick' does not exist on type 'ButtonProps'.", code: 2339, + snippet, }, { file: "src/components/Button.tsx", @@ -47,6 +51,7 @@ describe("problem_prompt", () => { message: "Type 'string | undefined' is not assignable to type 'string'.", code: 2322, + snippet, }, { file: "src/hooks/useApi.ts", @@ -55,6 +60,7 @@ describe("problem_prompt", () => { message: "Argument of type 'unknown' is not assignable to parameter of type 'string'.", code: 2345, + snippet, }, { file: "src/utils/helpers.ts", @@ -63,6 +69,7 @@ describe("problem_prompt", () => { message: "Function lacks ending return statement and return type does not include 'undefined'.", code: 2366, + snippet, }, ], }; @@ -81,6 +88,7 @@ describe("problem_prompt", () => { message: "Type '{ children: string; }' is missing the following properties from type 'UserProfileProps': user, onEdit", code: 2739, + snippet, }, { file: "src/components/UserProfile.tsx", @@ -88,6 +96,7 @@ describe("problem_prompt", () => { column: 15, message: "Object is possibly 'null'.", code: 2531, + snippet, }, { file: "src/hooks/useLocalStorage.ts", @@ -95,6 +104,7 @@ describe("problem_prompt", () => { column: 12, message: "Type 'string | null' is not assignable to type 'T'.", code: 2322, + snippet, }, { file: "src/types/api.ts", @@ -102,6 +112,7 @@ describe("problem_prompt", () => { column: 3, message: "Duplicate identifier 'UserRole'.", code: 2300, + snippet, }, ], }; @@ -130,6 +141,7 @@ describe("problem_prompt", () => { column: 5, message: "Cannot find name 'consol'. Did you mean 'console'?", code: 2552, + snippet, }, ], }; @@ -148,6 +160,7 @@ describe("problem_prompt", () => { message: "Cannot find module 'react-dom/client' or its corresponding type declarations.", code: 2307, + snippet, }, { file: "src/components/Modal.tsx", @@ -156,6 +169,7 @@ describe("problem_prompt", () => { message: "Property 'isOpen' does not exist on type 'IntrinsicAttributes & ModalProps'.", code: 2339, + snippet, }, ], }; @@ -177,6 +191,7 @@ describe("problem_prompt", () => { message: "Property 'price' is missing in type '{ name: string; description: string; }' but required in type 'Product'.", code: 2741, + snippet, }, // Incorrect event handler type { @@ -186,6 +201,7 @@ describe("problem_prompt", () => { message: "Type '(value: string) => void' is not assignable to type 'ChangeEventHandler'.", code: 2322, + snippet, }, // Async/await without Promise return type { @@ -195,6 +211,7 @@ describe("problem_prompt", () => { message: "Function lacks ending return statement and return type does not include 'undefined'.", code: 2366, + snippet, }, // Strict null check { @@ -203,6 +220,7 @@ describe("problem_prompt", () => { column: 25, message: "Object is possibly 'undefined'.", code: 2532, + snippet, }, ], }; diff --git a/src/components/chat/DyadProblemSummary.tsx b/src/components/chat/DyadProblemSummary.tsx index 9c60b15..03ce9aa 100644 --- a/src/components/chat/DyadProblemSummary.tsx +++ b/src/components/chat/DyadProblemSummary.tsx @@ -7,13 +7,15 @@ import { } from "lucide-react"; import type { Problem } from "@/ipc/ipc_types"; +type ProblemWithoutSnippet = Omit; + interface DyadProblemSummaryProps { summary?: string; children?: React.ReactNode; } interface ProblemItemProps { - problem: Problem; + problem: ProblemWithoutSnippet; index: number; } @@ -54,13 +56,13 @@ export const DyadProblemSummary: React.FC = ({ const [isContentVisible, setIsContentVisible] = useState(false); // Parse problems from children content if available - const problems: Problem[] = React.useMemo(() => { + const problems: ProblemWithoutSnippet[] = React.useMemo(() => { if (!children || typeof children !== "string") return []; // Parse structured format with tags const problemTagRegex = /([^<]+)<\/problem>/g; - const problems: Problem[] = []; + const problems: ProblemWithoutSnippet[] = []; let match; while ((match = problemTagRegex.exec(children)) !== null) { diff --git a/src/components/preview_panel/Problems.tsx b/src/components/preview_panel/Problems.tsx index d3e6b38..2f88f38 100644 --- a/src/components/preview_panel/Problems.tsx +++ b/src/components/preview_panel/Problems.tsx @@ -109,6 +109,7 @@ const ProblemsSummary = ({ problemReport, appId }: ProblemsSummaryProps) => { const { problems } = problemReport; const totalErrors = problems.length; const [selectedChatId] = useAtom(selectedChatIdAtom); + const handleFixAll = () => { if (!selectedChatId) { return; diff --git a/src/shared/problem_prompt.ts b/src/shared/problem_prompt.ts index 3db9bf3..29d2e7c 100644 --- a/src/shared/problem_prompt.ts +++ b/src/shared/problem_prompt.ts @@ -16,6 +16,10 @@ export function createProblemFixPrompt(problemReport: ProblemReport): string { problems.forEach((problem, index) => { prompt += `${index + 1}. ${problem.file}:${problem.line}:${problem.column} - ${problem.message} (TS${problem.code})\n`; + if (problem.snippet) { + prompt += `\`\`\`\n${problem.snippet}\n\`\`\`\n`; + } + prompt += "\n"; }); prompt += "\nPlease fix all errors in a concise way."; diff --git a/workers/tsc/tsc_worker.ts b/workers/tsc/tsc_worker.ts index 89fba1d..d1f2443 100644 --- a/workers/tsc/tsc_worker.ts +++ b/workers/tsc/tsc_worker.ts @@ -188,12 +188,25 @@ async function runSingleProject( continue; } + // Extract the problematic line with context + const sourceLines = diagnostic.file.getFullText().split(/\r?\n/); + const lineBefore = line > 0 ? sourceLines[line - 1] : ""; + const problematicLine = sourceLines[line] || ""; + const lineAfter = + line < sourceLines.length - 1 ? sourceLines[line + 1] : ""; + + let snippet = ""; + if (lineBefore) snippet += lineBefore + "\n"; + snippet += problematicLine + " // <-- TypeScript compiler error here\n"; + if (lineAfter) snippet += lineAfter; + 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, + snippet: snippet.trim(), }); }