+
+ );
+}
+
+export default App;
+My Application
+ +
+
+
+
+
+
+ {/* ... keep existing code (rest of the component) */}
+
+
+ );
+};
+
+export default ProfileCard;
+
+ {user.avatar ? (
+ 
+ ) : (
+
+
+ {/* ... keep existing code (user details section) */}
+
+
+ )}
+
+
+ {user.name}
+{user.email}
+
+
+ );
+};
+
+export default Dashboard;
+Dashboard
+ +
+
+ );
+}
+
+export default App;
+My Application
+ +
+
+
+
+
+
+ {/* ... keep existing code (rest of the component) */}
+
+
+ );
+};
+
+export default ProfileCard;
+
+ {user.avatar ? (
+
+ ) : (
+
+
+ {/* ... keep existing code (user details section) */}
+
+
+ )}
+
+
+ {user.name}
+{user.email}
+
+
+ );
+};
+
+export default Dashboard;
+Dashboard
+ +
+
+ );
+}
+
+export default App;
+My Application
+ +
+
+
+
+
+
+ {/* ... keep existing code (rest of the component) */}
+
+
+ );
+};
+
+export default ProfileCard;
+
+ {user.avatar ? (
+
+ ) : (
+
+
+ {/* ... keep existing code (user details section) */}
+
+
+ )}
+
+
+ {user.name}
+{user.email}
+
+
+ );
+};
+
+export default Dashboard;
+Dashboard
+ +Minimal imported app
;
+
+export default App;
+
+
+
+ );
+}
+
+export default App;
+My Application
+ +
+
+
+
+
+
+ {/* ... keep existing code (rest of the component) */}
+
+
+ );
+};
+
+export default ProfileCard;
+
+ {user.avatar ? (
+
+ ) : (
+
+
+ {/* ... keep existing code (user details section) */}
+
+
+ )}
+
+
+ {user.name}
+{user.email}
+
+
+ );
+};
+
+export default Dashboard;
+Dashboard
+ +Minimal imported app
;
+
+export default App;
+
+
+
+ );
+}
+
+export default App;
+My Application
+ +
+
+
+
+
+
+ {/* ... keep existing code (rest of the component) */}
+
+
+ );
+};
+
+export default ProfileCard;
+
+ {user.avatar ? (
+
+ ) : (
+
+
+ {/* ... keep existing code (user details section) */}
+
+
+ )}
+
+
+ {user.name}
+{user.email}
+
+
+ );
+};
+
+export default Dashboard;
+Dashboard
+ +Minimal imported app
;
+
+export default App;
+
+
+
+ );
+}
+
+export default App;
+My Application
+ +
+
+
+
+
+
+ {/* ... keep existing code (rest of the component) */}
+
+
+ );
+};
+
+export default ProfileCard;
+
+ {user.avatar ? (
+
+ ) : (
+
+
+ {/* ... keep existing code (user details section) */}
+
+
+ )}
+
+
+ {user.name}
+{user.email}
+
+
+ );
+};
+
+export default Dashboard;
+Dashboard
+ +Minimal imported app
;
+
+export default App;
+
+
+ {
+ 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 (
+
+
+ );
+};
+
+export const DyadProblemSummary: React.FC
+
+ {index + 1}
+
+
+
+
+
+
+ + {problem.message} +
+ setIsContentVisible(!isContentVisible)}
+ data-testid="problem-summary"
+ >
+
+ );
+};
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) => (
-
+
+
+ {/* Content area - show individual problems */}
+ {isContentVisible && totalProblems > 0 && (
+
+
+
+ {isContentVisible ? (
+
+
+
+ )}
+
+ {/* Fallback content area for raw children */}
+ {isContentVisible && totalProblems === 0 && children && (
+
+ {problems.map((problem, index) => (
+
+
+
+ )}
+
+ {children}
+
+
- ({
+ 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.
{
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() {
+
-
-
+}: 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 (
+
-);
+ );
+};
// Console header component
const ConsoleHeader = ({
@@ -262,8 +340,10 @@ export function PreviewPanel() {
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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
-
-
-
{previewMode === "preview" ? (
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 (
+
+
+ );
+};
+
+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 (
+
+
+
+
+
+
+ + {problem.message} +
+
+
+ );
+ }
+
+ return (
+
+
+
+ No problems found
+
+
+ );
+};
+
+export function Problems() {
+ return (
+
+ {totalErrors > 0 && (
+
+
+
+ )}
+
+
+
+ <_Problems />
+
+ );
+}
+
+export function _Problems() {
+ const selectedAppId = useAtomValue(selectedAppIdAtom);
+ const { problemReport } = useCheckProblems(selectedAppId);
+
+ if (!selectedAppId) {
+ return (
+
+
+ );
+ }
+
+ if (!problemReport) {
+ return (
+
+
+ No App Selected
++ Select an app to view TypeScript problems and diagnostic information. +
+
+
+ );
+ }
+
+ return (
+
+
+ No Problems Data
++ No TypeScript diagnostics available for this app yet. Problems will + appear here after running type checking. +
+
+
+ );
+}
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
+ {problemReport.problems.map((problem, index) => (
+
+
+
+
+ This will automatically fix TypeScript errors.
+
+