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

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, Error>({
+    queryKey: ["problems", appId],
+    queryFn: async (): Promise<ProblemReport> => {
+      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,
+  };
+}

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 {