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 -->

e2e-tests/fixtures/security-review/findings.md

@@ -0,0 +1,132 @@
+OK, let's review the security.
+
+Here are variations with different severity levels.
+
+Purposefully putting medium on top to make sure the severity levels are sorted correctly.
+
+## Medium Severity
+
+<dyad-security-finding title="Unvalidated File Upload Extensions" level="medium">
+**What**: The file upload endpoint accepts any file type without validating extensions or content, only checking file size
+
+**Risk**: An attacker could upload malicious files (e.g., .exe, .php) that might be executed if the server is misconfigured, or upload extremely large files to consume storage space
+
+**Potential Solutions**: 
+1. Implement a whitelist of allowed file extensions (e.g., `.jpg`, `.png`, `.pdf`)
+2. Validate file content type using magic numbers, not just the extension
+3. Store uploaded files outside the web root with random filenames
+4. Implement virus scanning for uploaded files using ClamAV or similar
+
+**Relevant Files**: `src/api/upload.ts`
+
+</dyad-security-finding>
+
+<dyad-security-finding title="Missing CSRF Protection on State-Changing Operations" level="medium">
+**What**: POST, PUT, and DELETE endpoints don't implement CSRF tokens, making them vulnerable to cross-site request forgery attacks
+
+**Risk**: An attacker could trick authenticated users into unknowingly performing actions like changing their email, making purchases, or deleting data by visiting a malicious website
+
+**Potential Solutions**: 
+1. Implement CSRF tokens using a library like `csurf` for Express
+2. Set `SameSite=Strict` or `SameSite=Lax` on session cookies
+3. Verify the `Origin` or `Referer` header for sensitive operations
+4. For API-only applications, consider using custom headers that browsers can't set cross-origin
+
+**Relevant Files**: `src/middleware/auth.ts`, `src/api/*.ts`
+
+</dyad-security-finding>
+
+## Critical Severity
+
+<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>
+
+<dyad-security-finding title="Hardcoded AWS Credentials in Source Code" level="critical">
+**What**: AWS access keys are stored directly in the codebase and committed to version control, exposing full cloud infrastructure access
+
+**Risk**: Anyone with repository access (including former employees or compromised accounts) could spin up expensive resources, access S3 buckets with customer data, or destroy production infrastructure
+
+**Potential Solutions**: 
+1. Immediately rotate the exposed credentials in AWS IAM
+2. Use environment variables and add `.env` to `.gitignore`
+3. Implement AWS Secrets Manager or similar vault solution
+4. Scan git history and purge the credentials using tools like `git-filter-repo`
+
+**Relevant Files**: `src/config/aws.ts`, `src/services/s3-uploader.ts`
+
+</dyad-security-finding>
+
+## High Severity
+
+<dyad-security-finding title="Missing Authentication on Admin Endpoints" level="high">
+**What**: Administrative API endpoints can be accessed without authentication, relying only on URL obscurity
+
+**Risk**: An attacker who discovers these endpoints could modify user permissions, access sensitive reports, or change system configurations without credentials
+
+**Potential Solutions**: 
+1. Add authentication middleware to all `/admin/*` routes
+2. Implement role-based access control (RBAC) to verify admin permissions
+3. Add audit logging for all administrative actions
+4. Consider implementing rate limiting on admin endpoints
+
+**Relevant Files**: `src/api/admin/users.ts`, `src/api/admin/settings.ts`
+
+</dyad-security-finding>
+
+<dyad-security-finding title="JWT Secret Using Default Value" level="high">
+**What**: The application uses a hardcoded default JWT secret ("your-secret-key") for signing authentication tokens
+
+**Risk**: Attackers can forge valid JWT tokens to impersonate any user, including administrators, granting them unauthorized access to user accounts and sensitive data
+
+**Potential Solutions**: 
+1. Generate a strong random secret: `openssl rand -base64 32`
+2. Store the secret in environment variables
+3. Rotate the JWT secret, which will invalidate all existing sessions
+4. Consider using RS256 (asymmetric) instead of HS256 for better security
+
+**Relevant Files**: `src/auth/jwt.ts`
+
+</dyad-security-finding>
+
+## Low Severity
+
+<dyad-security-finding title="Verbose Error Messages Expose Stack Traces" level="low">
+**What**: Production error responses include full stack traces and internal file paths that are sent to end users
+
+**Risk**: Attackers can use this information to map your application structure, identify frameworks and versions, and find potential attack vectors more easily
+
+**Potential Solutions**: 
+1. Configure different error handlers for production vs development
+2. Log detailed errors server-side but send generic messages to clients
+3. Use an error handling middleware: `if (process.env.NODE_ENV === 'production') { /* hide details */ }`
+4. Implement centralized error logging with tools like Sentry
+
+**Relevant Files**: `src/middleware/error-handler.ts`
+
+</dyad-security-finding>
+
+<dyad-security-finding title="Missing Security Headers" level="low">
+**What**: The application doesn't set recommended security headers like `X-Frame-Options`, `X-Content-Type-Options`, and `Strict-Transport-Security`
+
+**Risk**: Users may be vulnerable to clickjacking attacks, MIME-type sniffing, or man-in-the-middle attacks, though exploitation requires specific conditions
+
+**Potential Solutions**: 
+1. Use Helmet.js middleware: `app.use(helmet())`
+2. Configure headers manually in your web server (nginx/Apache) or application
+3. Set `Content-Security-Policy` to prevent XSS attacks
+4. Enable HSTS to enforce HTTPS connections
+
+**Relevant Files**: `src/app.ts`, `nginx.conf`
+
+</dyad-security-finding>

e2e-tests/helpers/test_helper.ts

@@ -476,7 +476,9 @@ export class PageObject {
   // Preview panel
   ////////////////////////////////
 
-  async selectPreviewMode(mode: "code" | "problems" | "preview" | "configure") {
+  async selectPreviewMode(
+    mode: "code" | "problems" | "preview" | "configure" | "security",
+  ) {
     await this.page.getByTestId(`${mode}-mode-button`).click();
   }
 
@@ -596,6 +598,12 @@ export class PageObject {
     });
   }
 
+  async snapshotSecurityFindingsTable() {
+    await expect(
+      this.page.getByTestId("security-findings-table"),
+    ).toMatchAriaSnapshot();
+  }
+
   async snapshotServerDump(
     type: "all-messages" | "last-message" | "request" = "all-messages",
     { name = "", dumpIndex = -1 }: { name?: string; dumpIndex?: number } = {},

e2e-tests/security_review.spec.ts

@@ -0,0 +1,45 @@
+import { test, testSkipIfWindows } from "./helpers/test_helper";
+
+// Skipping because snapshotting the security findings table is not
+// consistent across platforms because different amounts of text
+// get ellipsis'd out.
+testSkipIfWindows("security review", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
+  await po.sendPrompt("tc=1");
+
+  await po.selectPreviewMode("security");
+
+  await po.page
+    .getByRole("button", { name: "Run Security Review" })
+    .first()
+    .click();
+  await po.waitForChatCompletion();
+  await po.snapshotServerDump("all-messages");
+  await po.snapshotSecurityFindingsTable();
+
+  await po.page.getByRole("button", { name: "Fix Issue" }).first().click();
+  await po.waitForChatCompletion();
+  await po.snapshotMessages();
+});
+
+test("security review - edit and use knowledge", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
+  await po.sendPrompt("tc=1");
+
+  await po.selectPreviewMode("security");
+  await po.page.getByRole("button", { name: "Edit Security Rules" }).click();
+  await po.page
+    .getByRole("textbox", { name: "# SECURITY_RULES.md\\n\\" })
+    .click();
+  await po.page
+    .getByRole("textbox", { name: "# SECURITY_RULES.md\\n\\" })
+    .fill("testing\nrules123");
+  await po.page.getByRole("button", { name: "Save" }).click();
+
+  await po.page
+    .getByRole("button", { name: "Run Security Review" })
+    .first()
+    .click();
+  await po.waitForChatCompletion();
+  await po.snapshotServerDump("all-messages");
+});

e2e-tests/snapshots/security_review.spec.ts_security-review-1.aria.yml

@@ -0,0 +1,130 @@
+- table:
+  - rowgroup:
+    - row "Level Issue Action":
+      - cell "Level"
+      - cell "Issue"
+      - cell "Action"
+  - rowgroup:
+    - 'row "critical SQL Injection in User Lookup What: User input flows directly into database queries without validation, allowing attackers to execute arbitrary SQL commands Risk: An attac... Show more Fix Issue"':
+      - cell "critical":
+        - img
+      - 'cell "SQL Injection in User Lookup What: User input flows directly into database queries without validation, allowing attackers to execute arbitrary SQL commands Risk: An attac... Show more"':
+        - 'button "SQL Injection in User Lookup What: User input flows directly into database queries without validation, allowing attackers to execute arbitrary SQL commands Risk: An attac... Show more"':
+          - paragraph:
+            - strong: What
+            - text: ": User input flows directly into database queries without validation, allowing attackers to execute arbitrary SQL commands"
+          - paragraph:
+            - strong: Risk
+            - text: ": An attac..."
+          - button "Show more":
+            - img
+      - cell "Fix Issue":
+        - button "Fix Issue"
+    - 'row "critical Hardcoded AWS Credentials in Source Code What: AWS access keys are stored directly in the codebase and committed to version control, exposing full cloud infrastructure access Risk: A... Show more Fix Issue"':
+      - cell "critical":
+        - img
+      - 'cell "Hardcoded AWS Credentials in Source Code What: AWS access keys are stored directly in the codebase and committed to version control, exposing full cloud infrastructure access Risk: A... Show more"':
+        - 'button "Hardcoded AWS Credentials in Source Code What: AWS access keys are stored directly in the codebase and committed to version control, exposing full cloud infrastructure access Risk: A... Show more"':
+          - paragraph:
+            - strong: What
+            - text: ": AWS access keys are stored directly in the codebase and committed to version control, exposing full cloud infrastructure access"
+          - paragraph:
+            - strong: Risk
+            - text: ": A..."
+          - button "Show more":
+            - img
+      - cell "Fix Issue":
+        - button "Fix Issue"
+    - 'row "high Missing Authentication on Admin Endpoints What: Administrative API endpoints can be accessed without authentication, relying only on URL obscurity Risk: An attacker who discovers thes... Show more Fix Issue"':
+      - cell "high":
+        - img
+      - 'cell "Missing Authentication on Admin Endpoints What: Administrative API endpoints can be accessed without authentication, relying only on URL obscurity Risk: An attacker who discovers thes... Show more"':
+        - 'button "Missing Authentication on Admin Endpoints What: Administrative API endpoints can be accessed without authentication, relying only on URL obscurity Risk: An attacker who discovers thes... Show more"':
+          - paragraph:
+            - strong: What
+            - text: ": Administrative API endpoints can be accessed without authentication, relying only on URL obscurity"
+          - paragraph:
+            - strong: Risk
+            - text: ": An attacker who discovers thes..."
+          - button "Show more":
+            - img
+      - cell "Fix Issue":
+        - button "Fix Issue"
+    - 'row "high JWT Secret Using Default Value What: The application uses a hardcoded default JWT secret (\"your-secret-key\") for signing authentication tokens Risk: Attackers can forge val... Show more Fix Issue"':
+      - cell "high":
+        - img
+      - 'cell "JWT Secret Using Default Value What: The application uses a hardcoded default JWT secret (\"your-secret-key\") for signing authentication tokens Risk: Attackers can forge val... Show more"':
+        - 'button "JWT Secret Using Default Value What: The application uses a hardcoded default JWT secret (\"your-secret-key\") for signing authentication tokens Risk: Attackers can forge val... Show more"':
+          - paragraph:
+            - strong: What
+            - text: ": The application uses a hardcoded default JWT secret (\"your-secret-key\") for signing authentication tokens"
+          - paragraph:
+            - strong: Risk
+            - text: ": Attackers can forge val..."
+          - button "Show more":
+            - img
+      - cell "Fix Issue":
+        - button "Fix Issue"
+    - 'row "medium Unvalidated File Upload Extensions What: The file upload endpoint accepts any file type without validating extensions or content, only checking file size Risk: An attacker coul... Show more Fix Issue"':
+      - cell "medium":
+        - img
+      - 'cell "Unvalidated File Upload Extensions What: The file upload endpoint accepts any file type without validating extensions or content, only checking file size Risk: An attacker coul... Show more"':
+        - 'button "Unvalidated File Upload Extensions What: The file upload endpoint accepts any file type without validating extensions or content, only checking file size Risk: An attacker coul... Show more"':
+          - paragraph:
+            - strong: What
+            - text: ": The file upload endpoint accepts any file type without validating extensions or content, only checking file size"
+          - paragraph:
+            - strong: Risk
+            - text: ": An attacker coul..."
+          - button "Show more":
+            - img
+      - cell "Fix Issue":
+        - button "Fix Issue"
+    - 'row "medium Missing CSRF Protection on State-Changing Operations What: POST, PUT, and DELETE endpoints don''t implement CSRF tokens, making them vulnerable to cross-site request forgery attacks Risk: An atta... Show more Fix Issue"':
+      - cell "medium":
+        - img
+      - 'cell "Missing CSRF Protection on State-Changing Operations What: POST, PUT, and DELETE endpoints don''t implement CSRF tokens, making them vulnerable to cross-site request forgery attacks Risk: An atta... Show more"':
+        - 'button "Missing CSRF Protection on State-Changing Operations What: POST, PUT, and DELETE endpoints don''t implement CSRF tokens, making them vulnerable to cross-site request forgery attacks Risk: An atta... Show more"':
+          - paragraph:
+            - strong: What
+            - text: ": POST, PUT, and DELETE endpoints don't implement CSRF tokens, making them vulnerable to cross-site request forgery attacks"
+          - paragraph:
+            - strong: Risk
+            - text: ": An atta..."
+          - button "Show more":
+            - img
+      - cell "Fix Issue":
+        - button "Fix Issue"
+    - 'row "low Verbose Error Messages Expose Stack Traces What: Production error responses include full stack traces and internal file paths that are sent to end users Risk: Attackers can use this in... Show more Fix Issue"':
+      - cell "low":
+        - img
+      - 'cell "Verbose Error Messages Expose Stack Traces What: Production error responses include full stack traces and internal file paths that are sent to end users Risk: Attackers can use this in... Show more"':
+        - 'button "Verbose Error Messages Expose Stack Traces What: Production error responses include full stack traces and internal file paths that are sent to end users Risk: Attackers can use this in... Show more"':
+          - paragraph:
+            - strong: What
+            - text: ": Production error responses include full stack traces and internal file paths that are sent to end users"
+          - paragraph:
+            - strong: Risk
+            - text: ": Attackers can use this in..."
+          - button "Show more":
+            - img
+      - cell "Fix Issue":
+        - button "Fix Issue"
+    - 'row "low Missing Security Headers What: The application doesn''t set recommended security headers like `X-Frame-Options`, `X-Content-Type-Options`, and `Strict-Transport-Security` ... Show more Fix Issue"':
+      - cell "low":
+        - img
+      - 'cell "Missing Security Headers What: The application doesn''t set recommended security headers like `X-Frame-Options`, `X-Content-Type-Options`, and `Strict-Transport-Security` ... Show more"':
+        - 'button "Missing Security Headers What: The application doesn''t set recommended security headers like `X-Frame-Options`, `X-Content-Type-Options`, and `Strict-Transport-Security` ... Show more"':
+          - paragraph:
+            - strong: What
+            - text: ": The application doesn't set recommended security headers like"
+            - code: "`X-Frame-Options`"
+            - text: ","
+            - code: "`X-Content-Type-Options`"
+            - text: ", and"
+            - code: "`Strict-Transport-Security`"
+          - paragraph: ...
+          - button "Show more":
+            - img
+      - cell "Fix Issue":
+        - button "Fix Issue"

e2e-tests/snapshots/security_review.spec.ts_security-review-2.aria.yml

@@ -0,0 +1,45 @@
+- paragraph: "Please fix the following security issue in a simple and effective way:"
+- paragraph:
+  - strong: SQL Injection in User Lookup
+  - text: (critical severity)
+- paragraph:
+  - strong: What
+  - text: ": User input flows directly into database queries without validation, allowing attackers to execute arbitrary SQL commands"
+- paragraph:
+  - strong: Risk
+  - text: ": An attacker could steal all customer data, delete your entire database, or take over admin accounts by manipulating the URL"
+- paragraph:
+  - strong: Potential Solutions
+  - text: ":"
+- list:
+  - listitem:
+    - text: "Use parameterized queries:"
+    - code: "`db.query('SELECT * FROM users WHERE id = ?', [userId])`"
+  - listitem:
+    - text: Add input validation to ensure
+    - code: "`userId`"
+    - text: is a number
+  - listitem: Implement an ORM like Prisma or TypeORM that prevents SQL injection by default
+- paragraph:
+  - strong: Relevant Files
+  - text: ":"
+  - code: "`src/api/users.ts`"
+- img
+- text: file1.txt
+- button "Edit":
+  - img
+- img
+- text: file1.txt
+- paragraph: More EOM
+- button:
+  - img
+- img
+- text: Approved
+- img
+- text: less than a minute ago
+- img
+- text: wrote 1 file(s)
+- button "Undo":
+  - img
+- button "Retry":
+  - img

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

@@ -6,9 +6,11 @@ export const SUPABASE_SCHEMA_QUERY = `
         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;
-
 `;

testing/fake-llm-server/chatCompletionHandler.ts

@@ -143,6 +143,7 @@ export default Index;
         "\n\n" +
         generateDump(req);
     }
+
     console.error("LASTMESSAGE", lastMessage);
     // Check if the last message is "[dump]" to write messages to file and return path
     if (
@@ -157,6 +158,27 @@ export default Index;
       messageContent = generateDump(req);
     }
 
+    if (
+      lastMessage &&
+      typeof lastMessage.content === "string" &&
+      lastMessage.content.startsWith("/security-review")
+    ) {
+      messageContent = fs.readFileSync(
+        path.join(
+          __dirname,
+          "..",
+          "..",
+          "..",
+          "e2e-tests",
+          "fixtures",
+          "security-review",
+          "findings.md",
+        ),
+        "utf-8",
+      );
+      messageContent += "\n\n" + generateDump(req);
+    }
+
     if (lastMessage && lastMessage.content === "[increment]") {
       globalCounter++;
       messageContent = `counter=${globalCounter}`;
@@ -335,7 +357,7 @@ export default Index;
 
     // Stream each character with a delay
     let index = 0;
-    const batchSize = 8;
+    const batchSize = 32;
 
     // Send role first
     res.write(createStreamChunk("", "assistant"));