Security Panel MVP (#1660)

TODOs:

- [x] Add documentation
- [x] e2e tests: run security review, update knowledge, and fix issue
- [x] more stringent risk rating


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Introduces a new Security mode with a Security Review panel that runs
reviews, edits rules, parses findings via IPC, and supports fixing
issues, with tests and prompt/runtime support.
> 
> - **UI/Preview Panel**:
> - Add `security` preview mode to `previewModeAtom` and ActionHeader
(Shield button).
> - New `SecurityPanel` showing findings table (sorted by severity), run
review, fix issue flow, and edit `SECURITY_RULES.md` dialog.
>   - Wire into `PreviewPanel` content switch.
> - **Hooks**:
>   - `useSecurityReview(appId)`: fetch latest review via IPC.
> - `useStreamChat`: add `onSettled` callback to invoke refreshes after
streams.
> - **IPC/Main**:
> - `security_handlers`: `get-latest-security-review` parses
`<dyad-security-finding>` from latest assistant message.
>   - Register handler in `ipc_host`; expose channel in `preload`.
>   - `ipc_client`: add `getLatestSecurityReview(appId)`.
> - `chat_stream_handlers`: detect `/security-review`, use dedicated
system prompt, optionally append `SECURITY_RULES.md`, suppress
Supabase-not-available note in this mode.
> - **Prompts**:
> - Add `SECURITY_REVIEW_SYSTEM_PROMPT` with structured finding output.
> - **Supabase**:
> - Enhance schema query to include `rls_enabled`, split policy
`using_clause`/`with_check_clause`.
> - **E2E Tests**:
> - New `security_review.spec.ts` plus snapshots and fixture findings;
update test helper for `security` mode and findings table snapshot.
> - Fake LLM server streams security findings for `/security-review` and
increases batch size.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
5022d01e22a2dd929a968eeba0da592e0aeece01. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

src/atoms/appAtoms.ts

@@ -8,7 +8,7 @@ export const appsListAtom = atom<App[]>([]);
 export const appBasePathAtom = atom<string>("");
 export const versionsListAtom = atom<Version[]>([]);
 export const previewModeAtom = atom<
-  "preview" | "code" | "problems" | "configure" | "publish"
+  "preview" | "code" | "problems" | "configure" | "publish" | "security"
 >("preview");
 export const selectedVersionIdAtom = atom<string | null>(null);
 export const appOutputAtom = atom<AppOutput[]>([]);

src/components/preview_panel/ActionHeader.tsx

@@ -11,6 +11,7 @@ import {
   AlertTriangle,
   Wrench,
   Globe,
+  Shield,
 } from "lucide-react";
 import { ChatActivityButton } from "@/components/chat/ChatActivity";
 import { motion } from "framer-motion";
@@ -39,7 +40,8 @@ export type PreviewMode =
   | "code"
   | "problems"
   | "configure"
-  | "publish";
+  | "publish"
+  | "security";
 
 // Preview Header component with preview mode toggle
 export const ActionHeader = () => {
@@ -51,6 +53,7 @@ export const ActionHeader = () => {
   const problemsRef = useRef<HTMLButtonElement>(null);
   const configureRef = useRef<HTMLButtonElement>(null);
   const publishRef = useRef<HTMLButtonElement>(null);
+  const securityRef = useRef<HTMLButtonElement>(null);
   const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const { problemReport } = useCheckProblems(selectedAppId);
@@ -136,6 +139,9 @@ export const ActionHeader = () => {
         case "publish":
           targetRef = publishRef;
           break;
+        case "security":
+          targetRef = securityRef;
+          break;
         default:
           return;
       }
@@ -250,6 +256,13 @@ export const ActionHeader = () => {
             "Configure",
             "configure-mode-button",
           )}
+          {renderButton(
+            "security",
+            securityRef,
+            <Shield size={iconSize} />,
+            "Security",
+            "security-mode-button",
+          )}
           {renderButton(
             "publish",
             publishRef,

src/components/preview_panel/PreviewPanel.tsx

@@ -16,6 +16,7 @@ import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";
 import { Console } from "./Console";
 import { useRunApp } from "@/hooks/useRunApp";
 import { PublishPanel } from "./PublishPanel";
+import { SecurityPanel } from "./SecurityPanel";
 
 interface ConsoleHeaderProps {
   isOpen: boolean;
@@ -119,6 +120,8 @@ export function PreviewPanel() {
                 <ConfigurePanel />
               ) : previewMode === "publish" ? (
                 <PublishPanel />
+              ) : previewMode === "security" ? (
+                <SecurityPanel />
               ) : (
                 <Problems />
               )}

src/components/preview_panel/SecurityPanel.tsx

@@ -0,0 +1,811 @@
+import { useAtomValue, useSetAtom } from "jotai";
+import { selectedAppIdAtom } from "@/atoms/appAtoms";
+import { selectedChatIdAtom } from "@/atoms/chatAtoms";
+import { useSecurityReview } from "@/hooks/useSecurityReview";
+import { IpcClient } from "@/ipc/ipc_client";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogClose,
+} from "@/components/ui/dialog";
+import {
+  Shield,
+  AlertTriangle,
+  AlertCircle,
+  Info,
+  ChevronDown,
+  Pencil,
+} from "lucide-react";
+import { useNavigate } from "@tanstack/react-router";
+import { useStreamChat } from "@/hooks/useStreamChat";
+import { showError } from "@/lib/toast";
+import { Badge } from "@/components/ui/badge";
+import type { SecurityFinding, SecurityReviewResult } from "@/ipc/ipc_types";
+import { useState, useEffect } from "react";
+import { VanillaMarkdownParser } from "@/components/chat/DyadMarkdownParser";
+import { showSuccess, showWarning } from "@/lib/toast";
+import { useLoadAppFile } from "@/hooks/useLoadAppFile";
+import { useQueryClient } from "@tanstack/react-query";
+
+const getSeverityColor = (level: SecurityFinding["level"]) => {
+  switch (level) {
+    case "critical":
+      return "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 border-red-200 dark:border-red-800";
+    case "high":
+      return "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300 border-orange-200 dark:border-orange-800";
+    case "medium":
+      return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800";
+    case "low":
+      return "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300 border-gray-200 dark:border-gray-800";
+  }
+};
+
+const getSeverityIcon = (level: SecurityFinding["level"]) => {
+  switch (level) {
+    case "critical":
+      return <AlertTriangle className="h-4 w-4" />;
+    case "high":
+      return <AlertCircle className="h-4 w-4" />;
+    case "medium":
+      return <AlertCircle className="h-4 w-4" />;
+    case "low":
+      return <Info className="h-4 w-4" />;
+  }
+};
+
+const DESCRIPTION_PREVIEW_LENGTH = 150;
+
+const createFindingKey = (finding: {
+  title: string;
+  level: string;
+  description: string;
+}): string => {
+  return JSON.stringify({
+    title: finding.title,
+    level: finding.level,
+    description: finding.description,
+  });
+};
+
+const formatTimeAgo = (input: string | number | Date): string => {
+  const timestampMs = new Date(input).getTime();
+  const nowMs = Date.now();
+  const diffMs = Math.max(0, nowMs - timestampMs);
+
+  const minutes = Math.floor(diffMs / 60000);
+  if (minutes < 1) return "just now";
+  if (minutes < 60) {
+    return `${minutes} minute${minutes === 1 ? "" : "s"} ago`;
+  }
+
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return `${hours} hour${hours === 1 ? "" : "s"} ago`;
+  }
+
+  const days = Math.floor(hours / 24);
+  return `${days} day${days === 1 ? "" : "s"} ago`;
+};
+
+const getSeverityOrder = (level: SecurityFinding["level"]): number => {
+  switch (level) {
+    case "critical":
+      return 0;
+    case "high":
+      return 1;
+    case "medium":
+      return 2;
+    case "low":
+      return 3;
+    default:
+      return 4;
+  }
+};
+
+function SeverityBadge({ level }: { level: SecurityFinding["level"] }) {
+  return (
+    <Badge
+      variant="outline"
+      className={`${getSeverityColor(level)} uppercase text-xs font-semibold flex items-center gap-1 w-fit`}
+    >
+      <span className="flex-shrink-0">{getSeverityIcon(level)}</span>
+      <span>{level}</span>
+    </Badge>
+  );
+}
+
+function RunReviewButton({
+  isRunning,
+  onRun,
+}: {
+  isRunning: boolean;
+  onRun: () => void;
+}) {
+  return (
+    <Button onClick={onRun} className="gap-2" disabled={isRunning}>
+      {isRunning ? (
+        <>
+          <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="m4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+          Running Security Review...
+        </>
+      ) : (
+        <>
+          <Shield className="w-4 h-4" />
+          Run Security Review
+        </>
+      )}
+    </Button>
+  );
+}
+
+function ReviewSummary({ data }: { data: SecurityReviewResult }) {
+  const counts = data.findings.reduce(
+    (acc, finding) => {
+      acc[finding.level] = (acc[finding.level] || 0) + 1;
+      return acc;
+    },
+    {} as Record<string, number>,
+  );
+
+  const severityLevels: Array<SecurityFinding["level"]> = [
+    "critical",
+    "high",
+    "medium",
+    "low",
+  ];
+
+  return (
+    <div className="space-y-1 mt-1">
+      <div className="text-sm text-gray-600 dark:text-gray-400">
+        Last reviewed {formatTimeAgo(data.timestamp)}
+      </div>
+      <div className="flex items-center gap-3 text-sm">
+        {severityLevels
+          .filter((level) => counts[level] > 0)
+          .map((level) => (
+            <span key={level} className="flex items-center gap-1.5">
+              <span className="flex-shrink-0">{getSeverityIcon(level)}</span>
+              <span className="font-medium text-gray-900 dark:text-gray-100">
+                {counts[level]}
+              </span>
+              <span className="text-gray-600 dark:text-gray-400 capitalize">
+                {level}
+              </span>
+            </span>
+          ))}
+      </div>
+    </div>
+  );
+}
+
+function SecurityHeader({
+  isRunning,
+  onRun,
+  data,
+  onOpenEditRules,
+}: {
+  isRunning: boolean;
+  onRun: () => void;
+  data?: SecurityReviewResult | undefined;
+  onOpenEditRules: () => void;
+}) {
+  return (
+    <div className="sticky top-0 z-10 bg-background pt-3 pb-3 space-y-2">
+      <div className="flex items-center justify-between gap-2">
+        <div>
+          <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-1 flex items-center gap-2">
+            <Shield className="w-5 h-5" />
+            Security Review
+            <Badge variant="secondary" className="uppercase tracking-wide">
+              experimental
+            </Badge>
+          </h1>
+          <div className="text-sm">
+            <p>
+              <a
+                className="text-blue-600 dark:text-blue-400 hover:underline cursor-pointer"
+                onClick={() =>
+                  IpcClient.getInstance().openExternalUrl(
+                    "https://www.dyad.sh/docs/guides/security-review",
+                  )
+                }
+              >
+                Open Security Review docs
+              </a>
+            </p>
+          </div>
+          {data && data.findings.length > 0 && <ReviewSummary data={data} />}
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Button variant="outline" onClick={onOpenEditRules}>
+            <Pencil className="w-4 h-4" />
+            Edit Security Rules
+          </Button>
+          <RunReviewButton isRunning={isRunning} onRun={onRun} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LoadingView() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full p-8 text-center">
+      <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
+        <svg
+          className="w-6 h-6 text-blue-600 dark:text-blue-400 animate-spin"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="m4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+      </div>
+      <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mt-4">
+        Loading...
+      </h2>
+    </div>
+  );
+}
+
+function NoAppSelectedView() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full p-8 text-center">
+      <div className="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4">
+        <Shield className="w-8 h-8 text-gray-400" />
+      </div>
+      <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
+        No App Selected
+      </h2>
+      <p className="text-gray-600 dark:text-gray-400 max-w-md">
+        Select an app to run a security review
+      </p>
+    </div>
+  );
+}
+
+function RunningReviewCard() {
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <div className="text-center py-8">
+          <div className="w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mx-auto mb-4">
+            <svg
+              className="w-8 h-8 text-blue-600 dark:text-blue-400 animate-spin"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="m4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+            Security review is running
+          </h3>
+          <p className="text-gray-600 dark:text-gray-400">
+            Results will be available soon.
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function NoReviewCard({
+  isRunning,
+  onRun,
+}: {
+  isRunning: boolean;
+  onRun: () => void;
+}) {
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <div className="text-center py-8">
+          <div className="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-4">
+            <Shield className="w-8 h-8 text-gray-400" />
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+            No Security Review Found
+          </h3>
+          <p className="text-gray-600 dark:text-gray-400 mb-4">
+            Run a security review to identify potential vulnerabilities in your
+            application.
+          </p>
+          <RunReviewButton isRunning={isRunning} onRun={onRun} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function NoIssuesCard({ data }: { data?: SecurityReviewResult }) {
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <div className="text-center py-8">
+          <div className="w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mx-auto mb-4">
+            <Shield className="w-8 h-8 text-green-600 dark:text-green-400" />
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+            No Security Issues Found
+          </h3>
+          <p className="text-gray-600 dark:text-gray-400">
+            Your application passed the security review with no issues detected.
+          </p>
+          {data && (
+            <p className="text-sm text-gray-500 dark:text-gray-500 mt-2">
+              Last reviewed {formatTimeAgo(data.timestamp)}
+            </p>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function FindingsTable({
+  findings,
+  onOpenDetails,
+  onFix,
+  fixingFindingKey,
+}: {
+  findings: SecurityFinding[];
+  onOpenDetails: (finding: SecurityFinding) => void;
+  onFix: (finding: SecurityFinding) => void;
+  fixingFindingKey?: string | null;
+}) {
+  return (
+    <div
+      className="border rounded-lg overflow-hidden"
+      data-testid="security-findings-table"
+    >
+      <table className="w-full">
+        <thead className="bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
+          <tr>
+            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider w-24">
+              Level
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+              Issue
+            </th>
+            <th className="px-4 py-3 text-right text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider w-32">
+              Action
+            </th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+          {[...findings]
+            .sort(
+              (a, b) => getSeverityOrder(a.level) - getSeverityOrder(b.level),
+            )
+            .map((finding, index) => {
+              const isLongDescription =
+                finding.description.length > DESCRIPTION_PREVIEW_LENGTH;
+              const displayDescription = isLongDescription
+                ? finding.description.substring(0, DESCRIPTION_PREVIEW_LENGTH) +
+                  "..."
+                : finding.description;
+              const findingKey = createFindingKey(finding);
+              const isFixing = fixingFindingKey === findingKey;
+
+              return (
+                <tr
+                  key={index}
+                  className="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors"
+                >
+                  <td className="px-4 py-4 align-top">
+                    <SeverityBadge level={finding.level} />
+                  </td>
+                  <td className="px-4 py-4">
+                    <div
+                      className="space-y-2 cursor-pointer"
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => onOpenDetails(finding)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          onOpenDetails(finding);
+                        }
+                      }}
+                    >
+                      <div className="font-medium text-gray-900 dark:text-gray-100">
+                        {finding.title}
+                      </div>
+                      <div className="text-sm text-gray-700 dark:text-gray-300 prose prose-sm dark:prose-invert max-w-none">
+                        <VanillaMarkdownParser content={displayDescription} />
+                      </div>
+                      {isLongDescription && (
+                        <Button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onOpenDetails(finding);
+                          }}
+                          size="sm"
+                          variant="ghost"
+                          className="h-7 px-2 py-0 gap-1"
+                        >
+                          <ChevronDown className="w-3 h-3" />
+                          Show more
+                        </Button>
+                      )}
+                    </div>
+                  </td>
+                  <td className="px-4 py-4 align-top text-right">
+                    <Button
+                      onClick={() => onFix(finding)}
+                      size="sm"
+                      variant="default"
+                      className="gap-2"
+                      disabled={isFixing}
+                    >
+                      {isFixing ? (
+                        <>
+                          <svg
+                            className="w-4 h-4 animate-spin"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                          >
+                            <circle
+                              className="opacity-25"
+                              cx="12"
+                              cy="12"
+                              r="10"
+                              stroke="currentColor"
+                              strokeWidth="4"
+                            />
+                            <path
+                              className="opacity-75"
+                              fill="currentColor"
+                              d="m4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                            />
+                          </svg>
+                          Fixing Issue...
+                        </>
+                      ) : (
+                        <>Fix Issue</>
+                      )}
+                    </Button>
+                  </td>
+                </tr>
+              );
+            })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function FindingDetailsDialog({
+  open,
+  finding,
+  onClose,
+  onFix,
+  fixingFindingKey,
+}: {
+  open: boolean;
+  finding: SecurityFinding | null;
+  onClose: (open: boolean) => void;
+  onFix: (finding: SecurityFinding) => void;
+  fixingFindingKey?: string | null;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[80vw] md:max-w-4xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center justify-between gap-3 pr-4">
+            <span className="truncate">{finding?.title}</span>
+            {finding && <SeverityBadge level={finding.level} />}
+          </DialogTitle>
+        </DialogHeader>
+        <div className="text-sm text-gray-700 dark:text-gray-300 prose prose-sm dark:prose-invert max-w-none break-words max-h-[60vh] overflow-auto">
+          {finding && <VanillaMarkdownParser content={finding.description} />}
+        </div>
+        <DialogFooter>
+          <Button
+            onClick={() => {
+              if (finding) {
+                onFix(finding);
+                onClose(false);
+              }
+            }}
+            disabled={
+              finding ? fixingFindingKey === createFindingKey(finding) : false
+            }
+          >
+            {finding && fixingFindingKey === createFindingKey(finding) ? (
+              <>
+                <svg
+                  className="w-4 h-4 animate-spin mr-2"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="m4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  />
+                </svg>
+                Fixing Issue...
+              </>
+            ) : (
+              <>Fix Issue</>
+            )}
+          </Button>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const SecurityPanel = () => {
+  const selectedAppId = useAtomValue(selectedAppIdAtom);
+  const setSelectedChatId = useSetAtom(selectedChatIdAtom);
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { streamMessage } = useStreamChat({ hasChatId: false });
+  const { data, isLoading, error, refetch } = useSecurityReview(selectedAppId);
+  const [isRunningReview, setIsRunningReview] = useState(false);
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const [detailsFinding, setDetailsFinding] = useState<SecurityFinding | null>(
+    null,
+  );
+  const [isEditRulesOpen, setIsEditRulesOpen] = useState(false);
+  const [rulesContent, setRulesContent] = useState("");
+  const [fixingFindingKey, setFixingFindingKey] = useState<string | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const {
+    content: fetchedRules,
+    loading: isFetchingRules,
+    refreshFile: refetchRules,
+  } = useLoadAppFile(
+    isEditRulesOpen && selectedAppId ? selectedAppId : null,
+    isEditRulesOpen ? "SECURITY_RULES.md" : null,
+  );
+
+  useEffect(() => {
+    if (fetchedRules !== null) {
+      setRulesContent(fetchedRules);
+    }
+  }, [fetchedRules]);
+
+  const handleSaveRules = async () => {
+    if (!selectedAppId) {
+      showError("No app selected");
+      return;
+    }
+
+    try {
+      setIsSaving(true);
+      const ipcClient = IpcClient.getInstance();
+      const { warning } = await ipcClient.editAppFile(
+        selectedAppId,
+        "SECURITY_RULES.md",
+        rulesContent,
+      );
+      await queryClient.invalidateQueries({
+        queryKey: ["versions", selectedAppId],
+      });
+      if (warning) {
+        showWarning(warning);
+      } else {
+        showSuccess("Security rules saved");
+      }
+      setIsEditRulesOpen(false);
+      refetchRules();
+    } catch (err: any) {
+      showError(`Failed to save security rules: ${err.message || err}`);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const openFindingDetails = (finding: SecurityFinding) => {
+    setDetailsFinding(finding);
+    setDetailsOpen(true);
+  };
+
+  const handleRunSecurityReview = async () => {
+    if (!selectedAppId) {
+      showError("No app selected");
+      return;
+    }
+
+    try {
+      setIsRunningReview(true);
+
+      // Create a new chat
+      const chatId = await IpcClient.getInstance().createChat(selectedAppId);
+
+      // Navigate to the new chat
+      setSelectedChatId(chatId);
+      await navigate({ to: "/chat", search: { id: chatId } });
+
+      // Stream the security review prompt
+      await streamMessage({
+        prompt: "/security-review",
+        chatId,
+        onSettled: () => {
+          refetch();
+          setIsRunningReview(false);
+        },
+      });
+    } catch (err) {
+      showError(`Failed to run security review: ${err}`);
+      setIsRunningReview(false);
+    }
+  };
+
+  const handleFixIssue = async (finding: SecurityFinding) => {
+    if (!selectedAppId) {
+      showError("No app selected");
+      return;
+    }
+
+    try {
+      const key = createFindingKey(finding);
+      setFixingFindingKey(key);
+
+      const chatId = await IpcClient.getInstance().createChat(selectedAppId);
+
+      // Navigate to the new chat
+      setSelectedChatId(chatId);
+      await navigate({ to: "/chat", search: { id: chatId } });
+
+      const prompt = `Please fix the following security issue in a simple and effective way:
+
+**${finding.title}** (${finding.level} severity)
+
+${finding.description}`;
+
+      await streamMessage({
+        prompt,
+        chatId,
+        onSettled: () => {
+          setFixingFindingKey(null);
+        },
+      });
+    } catch (err) {
+      showError(`Failed to create fix chat: ${err}`);
+      setFixingFindingKey(null);
+    }
+  };
+
+  if (isLoading) {
+    return <LoadingView />;
+  }
+
+  if (!selectedAppId) {
+    return <NoAppSelectedView />;
+  }
+
+  return (
+    <div className="flex flex-col h-full overflow-y-auto">
+      <div className="p-4 pt-0 space-y-4">
+        <SecurityHeader
+          isRunning={isRunningReview}
+          onRun={handleRunSecurityReview}
+          data={data}
+          onOpenEditRules={() => {
+            setIsEditRulesOpen(true);
+            if (selectedAppId) {
+              refetchRules();
+            }
+          }}
+        />
+
+        {isRunningReview ? (
+          <RunningReviewCard />
+        ) : error ? (
+          <NoReviewCard
+            isRunning={isRunningReview}
+            onRun={handleRunSecurityReview}
+          />
+        ) : data && data.findings.length > 0 ? (
+          <FindingsTable
+            findings={data.findings}
+            onOpenDetails={openFindingDetails}
+            onFix={handleFixIssue}
+            fixingFindingKey={fixingFindingKey}
+          />
+        ) : (
+          <NoIssuesCard data={data} />
+        )}
+        <FindingDetailsDialog
+          open={detailsOpen}
+          finding={detailsFinding}
+          onClose={setDetailsOpen}
+          onFix={handleFixIssue}
+          fixingFindingKey={fixingFindingKey}
+        />
+        <Dialog open={isEditRulesOpen} onOpenChange={setIsEditRulesOpen}>
+          <DialogContent className="sm:max-w-2xl md:max-w-3xl lg:max-w-4xl">
+            <DialogHeader>
+              <DialogTitle>Edit Security Rules</DialogTitle>
+            </DialogHeader>
+            <div className="text-sm text-gray-600 dark:text-gray-400">
+              This allows you to add additional context about your project
+              specifically for security reviews. This content is saved to the{" "}
+              <code className="text-xs">SECURITY_RULES.md</code> file. This can
+              help catch additional issues or avoid flagging issues that are not
+              relevant for your app.
+            </div>
+            <div className="mt-3">
+              <textarea
+                className="w-full h-72 rounded-md border border-gray-300 dark:border-gray-700 bg-transparent p-3 font-mono text-sm outline-none focus:ring-2 focus:ring-blue-500"
+                value={rulesContent}
+                onChange={(e) => setRulesContent(e.target.value)}
+                placeholder="# SECURITY_RULES.md\n\nDescribe relevant security context, accepted risks, non-issues, and environment details."
+              />
+            </div>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DialogClose>
+              <Button
+                onClick={handleSaveRules}
+                disabled={isSaving || isFetchingRules}
+              >
+                {isSaving ? "Saving..." : "Save"}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+};

src/hooks/useSecurityReview.ts

@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+import { IpcClient } from "@/ipc/ipc_client";
+
+export function useSecurityReview(appId: number | null) {
+  return useQuery({
+    queryKey: ["security-review", appId],
+    queryFn: async () => {
+      if (!appId) {
+        throw new Error("App ID is required");
+      }
+      const ipcClient = IpcClient.getInstance();
+      return ipcClient.getLatestSecurityReview(appId);
+    },
+    enabled: appId !== null,
+    retry: false,
+    meta: {
+      showErrorToast: false, // Don't show error toast if no security review found
+    },
+  });
+}

src/hooks/useStreamChat.ts

@@ -70,12 +70,14 @@ export function useStreamChat({
       redo,
       attachments,
       selectedComponent,
+      onSettled,
     }: {
       prompt: string;
       chatId: number;
       redo?: boolean;
       attachments?: FileAttachment[];
       selectedComponent?: ComponentSelection | null;
+      onSettled?: () => void;
     }) => {
       if (
         (!prompt.trim() && (!attachments || attachments.length === 0)) ||
@@ -153,6 +155,7 @@ export function useStreamChat({
             refreshApp();
             refreshVersions();
             countTokens(chatId, "");
+            onSettled?.();
           },
           onError: (errorMessage: string) => {
             console.error(`[CHAT] Stream error for ${chatId}:`, errorMessage);
@@ -172,6 +175,7 @@ export function useStreamChat({
             refreshApp();
             refreshVersions();
             countTokens(chatId, "");
+            onSettled?.();
           },
         });
       } catch (error) {
@@ -190,6 +194,7 @@ export function useStreamChat({
             );
           return next;
         });
+        onSettled?.();
       }
     },
     [

src/ipc/handlers/chat_stream_handlers.ts

@@ -43,6 +43,7 @@ import {
   getSupabaseClientCode,
 } from "../../supabase_admin/supabase_context";
 import { SUMMARIZE_CHAT_SYSTEM_PROMPT } from "../../prompts/summarize_chat_system_prompt";
+import { SECURITY_REVIEW_SYSTEM_PROMPT } from "../../prompts/security_review_prompt";
 import fs from "node:fs";
 import * as path from "path";
 import * as os from "os";
@@ -578,6 +579,29 @@ ${componentSnippet}
 
           systemPrompt += `\n\n# Referenced Apps\nThe user has mentioned the following apps in their prompt: ${mentionedAppsList}. Their codebases have been included in the context for your reference. When referring to these apps, you can understand their structure and code to provide better assistance, however you should NOT edit the files in these referenced apps. The referenced apps are NOT part of the current app and are READ-ONLY.`;
         }
+
+        const isSecurityReviewIntent =
+          req.prompt.startsWith("/security-review");
+        if (isSecurityReviewIntent) {
+          systemPrompt = SECURITY_REVIEW_SYSTEM_PROMPT;
+          try {
+            const appPath = getDyadAppPath(updatedChat.app.path);
+            const rulesPath = path.join(appPath, "SECURITY_RULES.md");
+            let securityRules = "";
+
+            await fs.promises.access(rulesPath);
+            securityRules = await fs.promises.readFile(rulesPath, "utf8");
+
+            if (securityRules && securityRules.trim().length > 0) {
+              systemPrompt +=
+                "\n\n# Project-specific security rules:\n" + securityRules;
+            }
+          } catch (error) {
+            // Best-effort: if reading rules fails, continue without them
+            logger.info("Failed to read security rules", error);
+          }
+        }
+
         if (
           updatedChat.app?.supabaseProjectId &&
           settings.supabase?.accessToken?.value
@@ -591,7 +615,9 @@ ${componentSnippet}
             }));
         } else if (
           // Neon projects don't need Supabase.
-          !updatedChat.app?.neonProjectId
+          !updatedChat.app?.neonProjectId &&
+          // If in security review mode, we don't need to mention supabase is available.
+          !isSecurityReviewIntent
         ) {
           systemPrompt += "\n\n" + SUPABASE_NOT_AVAILABLE_SYSTEM_PROMPT;
         }

src/ipc/handlers/security_handlers.ts

@@ -0,0 +1,71 @@
+import { ipcMain } from "electron";
+import { db } from "../../db";
+import { chats, messages } from "../../db/schema";
+import { eq, and, like, desc } from "drizzle-orm";
+import type { SecurityReviewResult, SecurityFinding } from "../ipc_types";
+
+export function registerSecurityHandlers() {
+  ipcMain.handle("get-latest-security-review", async (event, appId: number) => {
+    if (!appId) {
+      throw new Error("App ID is required");
+    }
+
+    // Query for the most recent message with security findings
+    // Use database filtering instead of loading all data into memory
+    const result = await db
+      .select({
+        content: messages.content,
+        createdAt: messages.createdAt,
+        chatId: messages.chatId,
+      })
+      .from(messages)
+      .innerJoin(chats, eq(messages.chatId, chats.id))
+      .where(
+        and(
+          eq(chats.appId, appId),
+          eq(messages.role, "assistant"),
+          like(messages.content, "%<dyad-security-finding%"),
+        ),
+      )
+      .orderBy(desc(messages.createdAt))
+      .limit(1);
+
+    if (result.length === 0) {
+      throw new Error("No security review found for this app");
+    }
+
+    const message = result[0];
+    const findings = parseSecurityFindings(message.content);
+
+    if (findings.length === 0) {
+      throw new Error("No security review found for this app");
+    }
+
+    return {
+      findings,
+      timestamp: message.createdAt.toISOString(),
+      chatId: message.chatId,
+    } satisfies SecurityReviewResult;
+  });
+}
+
+function parseSecurityFindings(content: string): SecurityFinding[] {
+  const findings: SecurityFinding[] = [];
+
+  // Regex to match dyad-security-finding tags
+  // Using lazy quantifier with proper boundaries to prevent catastrophic backtracking
+  const regex =
+    /<dyad-security-finding\s+title="([^"]+)"\s+level="(critical|high|medium|low)">([\s\S]*?)<\/dyad-security-finding>/g;
+
+  let match;
+  while ((match = regex.exec(content)) !== null) {
+    const [, title, level, description] = match;
+    findings.push({
+      title: title.trim(),
+      level: level as "critical" | "high" | "medium" | "low",
+      description: description.trim(),
+    });
+  }
+
+  return findings;
+}

src/ipc/ipc_client.ts

@@ -48,6 +48,7 @@ import type {
   VercelDeployment,
   GetVercelDeploymentsParams,
   DisconnectVercelProjectParams,
+  SecurityReviewResult,
   IsVercelProjectAvailableParams,
   SaveVercelAccessTokenParams,
   VercelProject,
@@ -1197,6 +1198,12 @@ export class IpcClient {
     return this.ipcRenderer.invoke("check-ai-rules", params);
   }
 
+  public async getLatestSecurityReview(
+    appId: number,
+  ): Promise<SecurityReviewResult> {
+    return this.ipcRenderer.invoke("get-latest-security-review", appId);
+  }
+
   public async importApp(params: ImportAppParams): Promise<ImportAppResult> {
     return this.ipcRenderer.invoke("import-app", params);
   }

src/ipc/ipc_host.ts

@@ -31,6 +31,7 @@ import { registerPortalHandlers } from "./handlers/portal_handlers";
 import { registerPromptHandlers } from "./handlers/prompt_handlers";
 import { registerHelpBotHandlers } from "./handlers/help_bot_handlers";
 import { registerMcpHandlers } from "./handlers/mcp_handlers";
+import { registerSecurityHandlers } from "./handlers/security_handlers";
 
 export function registerIpcHandlers() {
   // Register all IPC handlers by category
@@ -67,4 +68,5 @@ export function registerIpcHandlers() {
   registerPromptHandlers();
   registerHelpBotHandlers();
   registerMcpHandlers();
+  registerSecurityHandlers();
 }

src/ipc/ipc_types.ts

@@ -9,6 +9,18 @@ export interface AppOutput {
   appId: number;
 }
 
+export interface SecurityFinding {
+  title: string;
+  level: "critical" | "high" | "medium" | "low";
+  description: string;
+}
+
+export interface SecurityReviewResult {
+  findings: SecurityFinding[];
+  timestamp: string;
+  chatId: number;
+}
+
 export interface RespondToAppInputParams {
   appId: number;
   response: string;

src/preload.ts

@@ -132,6 +132,7 @@ const validInvokeChannels = [
   // adding app to favorite
   "add-to-favorite",
   "github:clone-repo-from-url",
+  "get-latest-security-review",
   // Test-only channels
   // These should ALWAYS be guarded with IS_TEST_BUILD in the main process.
   // We can't detect with IS_TEST_BUILD in the preload script because

src/prompts/security_review_prompt.ts

@@ -0,0 +1,60 @@
+export const SECURITY_REVIEW_SYSTEM_PROMPT = `
+# Role
+Security expert identifying vulnerabilities that could lead to data breaches, leaks, or unauthorized access.
+
+# Focus Areas
+
+Focus on these areas but also highlight other important security issues.
+
+## Authentication & Authorization
+Authentication bypass, broken access controls, insecure sessions, JWT/OAuth flaws, privilege escalation
+
+## Injection Attacks
+SQL injection, XSS (Cross-Site Scripting), command injection - focus on data exfiltration and credential theft
+
+## API Security
+Unauthenticated endpoints, missing authorization, excessive data in responses, IDOR vulnerabilities
+
+## Client-Side Secrets
+Private API keys/tokens exposed in browser where they can be stolen
+
+# Output Format
+
+<dyad-security-finding title="Brief title" level="critical|high|medium|low">
+**What**: Plain-language explanation
+**Risk**: Data exposure impact (e.g., "All customer emails could be stolen")
+**Potential Solutions**: Options ranked by how effectively they address the issue
+**Relevant Files**: Relevant file paths
+</dyad-security-finding>
+
+# Example:
+
+<dyad-security-finding title="SQL Injection in User Lookup" level="critical">
+**What**: User input flows directly into database queries without validation, allowing attackers to execute arbitrary SQL commands
+
+**Risk**: An attacker could steal all customer data, delete your entire database, or take over admin accounts by manipulating the URL
+
+**Potential Solutions**:
+1. Use parameterized queries: \`db.query('SELECT * FROM users WHERE id = ?', [userId])\`
+2. Add input validation to ensure \`userId\` is a number
+3. Implement an ORM like Prisma or TypeORM that prevents SQL injection by default
+
+**Relevant Files**: \`src/api/users.ts\`
+
+</dyad-security-finding>
+
+# Severity Levels
+**critical**: Actively exploitable or trivially exploitable, leading to full system or data compromise with no mitigation in place.
+**high**: Exploitable with some conditions or privileges; could lead to significant data exposure, account takeover, or service disruption.
+**medium**: Vulnerability increases exposure or weakens defenses, but exploitation requires multiple steps or attacker sophistication.
+**low**: Low immediate risk; typically requires local access, unlikely chain of events, or only violates best practices without a clear exploitation path.
+
+# Instructions
+1. Find real, exploitable vulnerabilities that lead to data breaches
+2. Prioritize client-side exposed secrets and data leaks
+3. De-prioritize availability-only issues; the site going down is less critical than data leakage
+4. Use plain language with specific file paths
+5. Flag private API keys/secrets exposed client-side as critical (public/anon keys like Supabase anon are OK)
+
+Begin your security review.
+`;

src/supabase_admin/supabase_schema_query.ts

@@ -3,12 +3,14 @@
 // https://github.com/jjleng/code-panda/blob/61f1fa514c647de1a8d2ad7f85102d49c6db2086/LICENSE
 
 export const SUPABASE_SCHEMA_QUERY = `
-          WITH table_info AS (
+        WITH table_info AS (
             SELECT
                 tables.table_name,
-                pd.description as table_description
+                pd.description as table_description,
+                cls.relrowsecurity as rls_enabled
             FROM information_schema.tables tables
             LEFT JOIN pg_stat_user_tables psut ON tables.table_name = psut.relname
+            LEFT JOIN pg_class cls ON psut.relid = cls.oid
             LEFT JOIN pg_description pd ON psut.relid = pd.objoid AND pd.objsubid = 0
             WHERE tables.table_schema = 'public'
         ),
@@ -33,6 +35,7 @@ export const SUPABASE_SCHEMA_QUERY = `
                 jsonb_build_object(
                     'name', ti.table_name::text,
                     'description', ti.table_description::text,
+                    'rls_enabled', ti.rls_enabled,
                     'columns', COALESCE(ci.columns, '[]'::jsonb)
                 )::text as data
             FROM table_info ti
@@ -52,7 +55,8 @@ export const SUPABASE_SCHEMA_QUERY = `
                         ELSE pol.polcmd::text
                     END,
                     'permissive', pol.polpermissive,
-                    'definition', pg_get_expr(pol.polqual, pol.polrelid)::text
+                    'using_clause', pg_get_expr(pol.polqual, pol.polrelid)::text,
+                    'with_check_clause', pg_get_expr(pol.polwithcheck, pol.polrelid)::text
                 )::text as data
             FROM pg_policy pol
             JOIN pg_class cls ON pol.polrelid = cls.oid
@@ -103,5 +107,4 @@ export const SUPABASE_SCHEMA_QUERY = `
             UNION ALL SELECT * FROM triggers_result
         ) combined_results
         ORDER BY result_type;
-
 `;