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/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 (
+    <div className="flex items-center space-x-2">
+      <Switch
+        id="auto-fix-problems"
+        checked={settings?.enableAutoFixProblems}
+        onCheckedChange={() => {
+          updateSettings({
+            enableAutoFixProblems: !settings?.enableAutoFixProblems,
+          });
+        }}
+      />
+      <Label htmlFor="auto-fix-problems">Auto-fix problems</Label>
+    </div>
+  );
+}

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();

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(
         </DyadOutput>
       );
 
+    case "dyad-problem-report":
+      return (
+        <DyadProblemSummary summary={attributes.summary}>
+          {content}
+        </DyadProblemSummary>
+      );
+
     case "dyad-chat-summary":
       // Don't render anything for dyad-chat-summary
       return null;

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<ProblemItemProps> = ({ problem, index }) => {
+  return (
+    <div className="flex items-start gap-3 py-2 px-3 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
+      <div className="flex-shrink-0 w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mt-0.5">
+        <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
+          {index + 1}
+        </span>
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-2">
+          <FileText size={14} className="text-gray-500 flex-shrink-0" />
+          <span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+            {problem.file}
+          </span>
+
+          <span className="text-xs text-gray-500 dark:text-gray-400">
+            {problem.line}:{problem.column}
+          </span>
+          <span className="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded text-gray-600 dark:text-gray-300">
+            TS{problem.code}
+          </span>
+        </div>
+        <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
+          {problem.message}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export const DyadProblemSummary: React.FC<DyadProblemSummaryProps> = ({
+  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 <problem> tags
+    const problemTagRegex =
+      /<problem\s+file="([^"]+)"\s+line="(\d+)"\s+column="(\d+)"\s+code="(\d+)">([^<]+)<\/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 (
+    <div
+      className="bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border border-border my-2 cursor-pointer"
+      onClick={() => setIsContentVisible(!isContentVisible)}
+      data-testid="problem-summary"
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <AlertTriangle
+            size={16}
+            className="text-amber-600 dark:text-amber-500"
+          />
+          <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
+            <span className="font-bold mr-2 outline-2 outline-amber-200 dark:outline-amber-700 bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-200 rounded-md px-1">
+              Auto-fix
+            </span>
+            {displaySummary}
+          </span>
+        </div>
+        <div className="flex items-center">
+          {isContentVisible ? (
+            <ChevronsDownUp
+              size={20}
+              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+            />
+          ) : (
+            <ChevronsUpDown
+              size={20}
+              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Content area - show individual problems */}
+      {isContentVisible && totalProblems > 0 && (
+        <div className="mt-4">
+          <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+            {problems.map((problem, index) => (
+              <ProblemItem
+                key={`${problem.file}-${problem.line}-${problem.column}-${index}`}
+                problem={problem}
+                index={index}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Fallback content area for raw children */}
+      {isContentVisible && totalProblems === 0 && children && (
+        <div className="mt-4 text-sm text-gray-800 dark:text-gray-200">
+          <pre className="whitespace-pre-wrap font-mono text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded">
+            {children}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+};

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) => (
-  <div className="flex items-center justify-between px-4 py-2 border-b border-border">
-    <div className="relative flex space-x-2 bg-[var(--background-darkest)] rounded-md p-0.5">
-      <button
-        className="relative flex items-center space-x-1 px-3 py-1 rounded-md text-sm z-10"
-        onClick={() => setPreviewMode("preview")}
-      >
-        {previewMode === "preview" && (
-          <motion.div
-            layoutId="activeIndicator"
-            className="absolute inset-0 bg-(--background-lightest) shadow rounded-md -z-1"
-            transition={{ type: "spring", stiffness: 500, damping: 35 }}
-          />
-        )}
-        <Eye size={16} />
-        <span>Preview</span>
-      </button>
-      <button
-        className="relative flex items-center space-x-1 px-3 py-1 rounded-md text-sm z-10"
-        onClick={() => setPreviewMode("code")}
-      >
-        {previewMode === "code" && (
-          <motion.div
-            layoutId="activeIndicator"
-            className="absolute inset-0 bg-(--background-lightest) shadow rounded-md -z-1"
-            transition={{ type: "spring", stiffness: 500, damping: 35 }}
-          />
-        )}
-        <Code size={16} />
-        <span>Code</span>
-      </button>
+}: PreviewHeaderProps) => {
+  const selectedAppId = useAtomValue(selectedAppIdAtom);
+  const previewRef = useRef<HTMLButtonElement>(null);
+  const codeRef = useRef<HTMLButtonElement>(null);
+  const problemsRef = useRef<HTMLButtonElement>(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<HTMLButtonElement | null>;
+
+      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 (
+    <div className="flex items-center justify-between px-4 py-2 border-b border-border">
+      <div className="relative flex bg-[var(--background-darkest)] rounded-md p-0.5">
+        <motion.div
+          className="absolute top-0.5 bottom-0.5 bg-[var(--background-lightest)] shadow rounded-md"
+          animate={{
+            left: indicatorStyle.left,
+            width: indicatorStyle.width,
+          }}
+          transition={{
+            type: "spring",
+            stiffness: 600,
+            damping: 35,
+            mass: 0.6,
+          }}
+        />
+        <button
+          data-testid="preview-mode-button"
+          ref={previewRef}
+          className="relative flex items-center gap-1 px-2 py-1 rounded-md text-sm font-medium z-10"
+          onClick={() => setPreviewMode("preview")}
+        >
+          <Eye size={14} />
+          <span>Preview</span>
+        </button>
+        <button
+          data-testid="problems-mode-button"
+          ref={problemsRef}
+          className="relative flex items-center gap-1 px-2 py-1 rounded-md text-sm font-medium z-10"
+          onClick={() => setPreviewMode("problems")}
+        >
+          <AlertTriangle size={14} />
+          <span>Problems</span>
+          {displayCount && (
+            <span className="ml-0.5 px-1 py-0.5 text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 rounded-full min-w-[16px] text-center">
+              {displayCount}
+            </span>
+          )}
+        </button>
+        <button
+          data-testid="code-mode-button"
+          ref={codeRef}
+          className="relative flex items-center gap-1 px-2 py-1 rounded-md text-sm font-medium z-10"
+          onClick={() => setPreviewMode("code")}
+        >
+          <Code size={14} />
+          <span>Code</span>
+        </button>
+      </div>
+      <div className="flex items-center">
+        <button
+          onClick={onRestart}
+          className="flex items-center space-x-1 px-3 py-1 rounded-md text-sm hover:bg-[var(--background-darkest)] transition-colors"
+          title="Restart App"
+        >
+          <Power size={16} />
+          <span>Restart</span>
+        </button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              data-testid="preview-more-options-button"
+              className="flex items-center justify-center p-1.5 rounded-md text-sm hover:bg-[var(--background-darkest)] transition-colors"
+              title="More options"
+            >
+              <MoreVertical size={16} />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-60">
+            <DropdownMenuItem onClick={onCleanRestart}>
+              <Cog size={16} />
+              <div className="flex flex-col">
+                <span>Rebuild</span>
+                <span className="text-xs text-muted-foreground">
+                  Re-installs node_modules and restarts
+                </span>
+              </div>
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={onClearSessionData}>
+              <Trash2 size={16} />
+              <div className="flex flex-col">
+                <span>Clear Preview Data</span>
+                <span className="text-xs text-muted-foreground">
+                  Clears cookies and local storage for the app preview
+                </span>
+              </div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
     </div>
-    <div className="flex items-center">
-      <button
-        onClick={onRestart}
-        className="flex items-center space-x-1 px-3 py-1 rounded-md text-sm hover:bg-[var(--background-darkest)] transition-colors"
-        title="Restart App"
-      >
-        <Power size={16} />
-        <span>Restart</span>
-      </button>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <button
-            data-testid="preview-more-options-button"
-            className="flex items-center justify-center p-1.5 rounded-md text-sm hover:bg-[var(--background-darkest)] transition-colors"
-            title="More options"
-          >
-            <MoreVertical size={16} />
-          </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-60">
-          <DropdownMenuItem onClick={onCleanRestart}>
-            <Cog size={16} />
-            <div className="flex flex-col">
-              <span>Rebuild</span>
-              <span className="text-xs text-muted-foreground">
-                Re-installs node_modules and restarts
-              </span>
-            </div>
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={onClearSessionData}>
-            <Trash2 size={16} />
-            <div className="flex flex-col">
-              <span>Clear Preview Data</span>
-              <span className="text-xs text-muted-foreground">
-                Clears cookies and local storage for the app preview
-              </span>
-            </div>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  </div>
-);
+  );
+};
 
 // Console header component
 const ConsoleHeader = ({
@@ -262,8 +340,10 @@ export function PreviewPanel() {
             <div className="h-full overflow-y-auto">
               {previewMode === "preview" ? (
                 <PreviewIframe key={key} loading={loading} />
-              ) : (
+              ) : previewMode === "code" ? (
                 <CodeView loading={loading} app={app} />
+              ) : (
+                <Problems />
               )}
             </div>
           </Panel>

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 (
+    <div className="flex items-start gap-3 p-3 border-b border-border hover:bg-[var(--background-darkest)] transition-colors">
+      <div className="flex-shrink-0 mt-0.5">
+        <XCircle size={16} className="text-red-500" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-1">
+          <FileText size={14} className="text-muted-foreground flex-shrink-0" />
+          <span className="text-sm font-medium truncate">{problem.file}</span>
+
+          <span className="text-xs text-muted-foreground">
+            {problem.line}:{problem.column}
+          </span>
+        </div>
+        <p className="text-sm text-foreground leading-relaxed">
+          {problem.message}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+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 (
+    <Button
+      size={size}
+      variant={variant}
+      onClick={handleRecheck}
+      disabled={isChecking}
+      className={className}
+      data-testid="recheck-button"
+    >
+      <RefreshCw
+        size={14}
+        className={`mr-1 ${isChecking ? "animate-spin" : ""}`}
+      />
+      {isChecking ? "Checking..." : "Recheck"}
+    </Button>
+  );
+};
+
+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 (
+      <div className="flex flex-col items-center justify-center h-32 text-center">
+        <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center mb-3">
+          <div className="w-6 h-6 rounded-full bg-green-500"></div>
+        </div>
+        <p className="text-sm text-muted-foreground mb-3">No problems found</p>
+        <RecheckButton appId={appId} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-between px-4 py-3 bg-[var(--background-darkest)] border-b border-border">
+      <div className="flex items-center gap-4">
+        {totalErrors > 0 && (
+          <div className="flex items-center gap-2">
+            <XCircle size={16} className="text-red-500" />
+            <span className="text-sm font-medium">
+              {totalErrors} {totalErrors === 1 ? "error" : "errors"}
+            </span>
+          </div>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <RecheckButton appId={appId} />
+        <Button
+          size="sm"
+          variant="default"
+          onClick={handleFixAll}
+          className="h-7 px-3 text-xs"
+          data-testid="fix-all-button"
+        >
+          <Wrench size={14} className="mr-1" />
+          Fix All
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export function Problems() {
+  return (
+    <div data-testid="problems-pane">
+      <_Problems />
+    </div>
+  );
+}
+
+export function _Problems() {
+  const selectedAppId = useAtomValue(selectedAppIdAtom);
+  const { problemReport } = useCheckProblems(selectedAppId);
+
+  if (!selectedAppId) {
+    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">
+          <AlertTriangle size={24} className="text-muted-foreground" />
+        </div>
+        <h3 className="text-lg font-medium mb-2">No App Selected</h3>
+        <p className="text-sm text-muted-foreground max-w-md">
+          Select an app to view TypeScript problems and diagnostic information.
+        </p>
+      </div>
+    );
+  }
+
+  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>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <ProblemsSummary problemReport={problemReport} appId={selectedAppId} />
+      <div className="flex-1 overflow-y-auto">
+        {problemReport.problems.map((problem, index) => (
+          <ProblemItem
+            key={`${problem.file}-${problem.line}-${problem.column}-${index}`}
+            problem={problem}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}