diff --git a/src/components/AutoFixProblemsSwitch.tsx b/src/components/AutoFixProblemsSwitch.tsx
index 3b68949..1bfbc22 100644
--- a/src/components/AutoFixProblemsSwitch.tsx
+++ b/src/components/AutoFixProblemsSwitch.tsx
@@ -2,7 +2,13 @@ import { useSettings } from "@/hooks/useSettings";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 
-export function AutoFixProblemsSwitch() {
+import { showInfo } from "@/lib/toast";
+
+export function AutoFixProblemsSwitch({
+  showToast = false,
+}: {
+  showToast?: boolean;
+}) {
   const { settings, updateSettings } = useSettings();
   return (
     <div className="flex items-center space-x-2">
@@ -13,6 +19,9 @@ export function AutoFixProblemsSwitch() {
           updateSettings({
             enableAutoFixProblems: !settings?.enableAutoFixProblems,
           });
+          if (!settings?.enableAutoFixProblems && showToast) {
+            showInfo("You can disable Auto-fix problems in the Settings page.");
+          }
         }}
       />
       <Label htmlFor="auto-fix-problems">Auto-fix problems</Label>
diff --git a/src/components/preview_panel/Problems.tsx b/src/components/preview_panel/Problems.tsx
index 4cca7d5..93dfb4e 100644
--- a/src/components/preview_panel/Problems.tsx
+++ b/src/components/preview_panel/Problems.tsx
@@ -15,6 +15,8 @@ import { useStreamChat } from "@/hooks/useStreamChat";
 import { useCheckProblems } from "@/hooks/useCheckProblems";
 import { createProblemFixPrompt } from "@/shared/problem_prompt";
 import { showError } from "@/lib/toast";
+import { useSettings } from "@/hooks/useSettings";
+import { AutoFixProblemsSwitch } from "../AutoFixProblemsSwitch";
 
 interface ProblemItemProps {
   problem: Problem;
@@ -62,6 +64,7 @@ const RecheckButton = ({
   variant = "outline",
   className = "h-7 px-3 text-xs",
 }: RecheckButtonProps) => {
+  const { settings } = useSettings();
   const { checkProblems, isChecking } = useCheckProblems(appId);
 
   const handleRecheck = async () => {
@@ -71,6 +74,21 @@ const RecheckButton = ({
     }
   };
 
+  if (!settings?.enableAutoFixProblems) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-center p-8">
+        <div className="w-16 h-16 rounded-full bg-[var(--background-darkest)] flex items-center justify-center mb-4">
+          <Wrench size={24} className="text-muted-foreground" />
+        </div>
+        <h3 className="text-lg font-medium mb-2">Enable Auto-Fix Problems</h3>
+        <p className="text-sm text-muted-foreground max-w-md mb-4">
+          You need to enable autofix problems to use the Problem pane.
+        </p>
+        <AutoFixProblemsSwitch showToast={true} />
+      </div>
+    );
+  }
+
   return (
     <Button
       size={size}
@@ -179,14 +197,6 @@ export function _Problems() {
   if (!problemReport) {
     return (
       <div className="flex flex-col items-center justify-center h-full text-center p-8">
-        <div className="w-16 h-16 rounded-full bg-[var(--background-darkest)] flex items-center justify-center mb-4">
-          <FileText size={24} className="text-muted-foreground" />
-        </div>
-        <h3 className="text-lg font-medium mb-2">No Problems Data</h3>
-        <p className="text-sm text-muted-foreground max-w-md mb-4">
-          No TypeScript diagnostics available for this app yet. Problems will
-          appear here after running type checking.
-        </p>
         <RecheckButton appId={selectedAppId} />
       </div>
     );
diff --git a/src/hooks/useCheckProblems.ts b/src/hooks/useCheckProblems.ts
index 785431a..9829ed6 100644
--- a/src/hooks/useCheckProblems.ts
+++ b/src/hooks/useCheckProblems.ts
@@ -1,8 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
 import { IpcClient } from "@/ipc/ipc_client";
 import type { ProblemReport } from "@/ipc/ipc_types";
+import { useSettings } from "./useSettings";
 
 export function useCheckProblems(appId: number | null) {
+  const { settings } = useSettings();
   const {
     data: problemReport,
     isLoading: isChecking,
@@ -17,7 +19,7 @@ export function useCheckProblems(appId: number | null) {
       const ipcClient = IpcClient.getInstance();
       return ipcClient.checkProblems({ appId });
     },
-    enabled: !!appId,
+    enabled: !!appId && settings?.enableAutoFixProblems,
     // DO NOT SHOW ERROR TOAST.
   });
 
diff --git a/src/ipc/handlers/problems_handlers.ts b/src/ipc/handlers/problems_handlers.ts
index f535087..e73efdb 100644
--- a/src/ipc/handlers/problems_handlers.ts
+++ b/src/ipc/handlers/problems_handlers.ts
@@ -1,14 +1,18 @@
 import { db } from "../../db";
-import { ipcMain } from "electron";
+
 import { apps } from "../../db/schema";
 import { eq } from "drizzle-orm";
 import { generateProblemReport } from "../processors/tsc";
 import { getDyadAppPath } from "@/paths/paths";
-import { logger } from "./app_upgrade_handlers";
+import log from "electron-log";
+import { createLoggedHandler } from "./safe_handle";
+
+const logger = log.scope("problems_handlers");
+const handle = createLoggedHandler(logger);
 
 export function registerProblemsHandlers() {
   // Handler to check problems using autofix with empty response
-  ipcMain.handle("check-problems", async (event, params: { appId: number }) => {
+  handle("check-problems", async (event, params: { appId: number }) => {
     try {
       // Get the app to find its path
       const app = await db.query.apps.findFirst({