Support rename/delete edge function & standardize output

src/components/chat/ChatInput.tsx

@@ -330,12 +330,20 @@ function ChatInputActions({
 }: ChatInputActionsProps) {
   const [autoApprove, setAutoApprove] = useState(false);
   const [isDetailsVisible, setIsDetailsVisible] = useState(false);
+
   if (proposal.type === "tip-proposal") {
     return <div>Tip proposal</div>;
   }
   if (proposal.type === "action-proposal") {
     return <ActionProposalActions proposal={proposal}></ActionProposalActions>;
   }
+
+  // Split files into server functions and other files - only for CodeProposal
+  const serverFunctions =
+    proposal.filesChanged?.filter((f: FileChange) => f.isServerFunction) ?? [];
+  const otherFilesChanged =
+    proposal.filesChanged?.filter((f: FileChange) => !f.isServerFunction) ?? [];
+
   return (
     <div className="border-b border-border">
       <div className="p-2">
@@ -462,11 +470,30 @@ function ChatInputActions({
             </div>
           )}
 
-          {proposal.filesChanged?.length > 0 && (
+          {serverFunctions.length > 0 && (
+            <div className="mb-3">
+              <h4 className="font-semibold mb-1">Server Functions Changed</h4>
+              <ul className="space-y-1">
+                {serverFunctions.map((file: FileChange, index: number) => (
+                  <li key={index} className="flex items-center space-x-2">
+                    {getIconForFileChange(file)}
+                    <span title={file.path} className="truncate cursor-default">
+                      {file.name}
+                    </span>
+                    <span className="text-muted-foreground text-xs truncate">
+                      - {file.summary}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {otherFilesChanged.length > 0 && (
             <div>
               <h4 className="font-semibold mb-1">Files Changed</h4>
               <ul className="space-y-1">
-                {proposal.filesChanged.map((file, index) => (
+                {otherFilesChanged.map((file: FileChange, index: number) => (
                   <li key={index} className="flex items-center space-x-2">
                     {getIconForFileChange(file)}
                     <span title={file.path} className="truncate cursor-default">

src/components/chat/DyadMarkdownParser.tsx

@@ -11,6 +11,7 @@ import { CodeHighlight } from "./CodeHighlight";
 import { useAtomValue } from "jotai";
 import { isStreamingAtom } from "@/atoms/chatAtoms";
 import { CustomTagState } from "./stateTypes";
+import { DyadOutput } from "./DyadOutput";
 
 interface DyadMarkdownParserProps {
   content: string;
@@ -77,6 +78,7 @@ function preprocessUnclosedTags(content: string): {
     "dyad-add-dependency",
     "dyad-execute-sql",
     "dyad-add-integration",
+    "dyad-output",
   ];
 
   let processedContent = content;
@@ -137,6 +139,7 @@ function parseCustomTags(content: string): ContentPiece[] {
     "dyad-add-dependency",
     "dyad-execute-sql",
     "dyad-add-integration",
+    "dyad-output",
   ];
 
   const tagPattern = new RegExp(
@@ -303,6 +306,16 @@ function renderCustomTag(
         </DyadAddIntegration>
       );
 
+    case "dyad-output":
+      return (
+        <DyadOutput
+          type={attributes.type as "warning" | "error"}
+          message={attributes.message}
+        >
+          {content}
+        </DyadOutput>
+      );
+
     default:
       return null;
   }

src/components/chat/DyadOutput.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import {
+  ChevronsDownUp,
+  ChevronsUpDown,
+  AlertTriangle,
+  XCircle,
+} from "lucide-react";
+
+interface DyadOutputProps {
+  type: "error" | "warning";
+  message?: string;
+  children?: React.ReactNode;
+}
+
+export const DyadOutput: React.FC<DyadOutputProps> = ({
+  type,
+  message,
+  children,
+}) => {
+  const [isContentVisible, setIsContentVisible] = useState(false);
+
+  // If the type is not warning, it is an error (in case LLM gives a weird "type")
+  const isError = type !== "warning";
+  const borderColor = isError ? "border-red-500" : "border-amber-500";
+  const iconColor = isError ? "text-red-500" : "text-amber-500";
+  const icon = isError ? (
+    <XCircle size={16} className={iconColor} />
+  ) : (
+    <AlertTriangle size={16} className={iconColor} />
+  );
+  const label = isError ? "Error" : "Warning";
+
+  return (
+    <div
+      className={`relative bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${borderColor}`}
+      onClick={() => setIsContentVisible(!isContentVisible)}
+    >
+      {/* Top-left label badge */}
+      <div
+        className={`absolute top-2 left-2 flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold ${iconColor} bg-white dark:bg-gray-900`}
+        style={{ zIndex: 1 }}
+      >
+        {icon}
+        <span>{label}</span>
+      </div>
+      {/* Main content, padded to avoid label */}
+      <div className="flex items-center justify-between pl-20">
+        <div className="flex items-center gap-2">
+          {message && (
+            <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
+              {message.slice(0, isContentVisible ? undefined : 80) +
+                (!isContentVisible ? "..." : "")}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center">
+          {isContentVisible ? (
+            <ChevronsDownUp
+              size={20}
+              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+            />
+          ) : (
+            <ChevronsUpDown
+              size={20}
+              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+            />
+          )}
+        </div>
+      </div>
+      {isContentVisible && children && (
+        <div className="text-sm mt-2 text-gray-800 dark:text-gray-200 pl-20">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};

src/ipc/handlers/supabase_handlers.ts

@@ -1,6 +1,4 @@
 import { ipcMain } from "electron";
-import { SupabaseManagementAPI } from "supabase-management-js";
-import { readSettings, writeSettings } from "../../main/settings";
 import log from "electron-log";
 import { db } from "../../db";
 import { eq } from "drizzle-orm";

src/ipc/processors/executeAddDependency.ts

@@ -17,7 +17,7 @@ export async function executeAddDependency({
   appPath: string;
 }) {
   const packageStr = packages.join(" ");
-  try {
+
   const { stdout, stderr } = await execPromise(
     `(pnpm add ${packageStr}) || (npm install ${packageStr})`,
     {
@@ -44,28 +44,4 @@ export async function executeAddDependency({
     .update(messages)
     .set({ content: updatedContent })
     .where(eq(messages.id, message.id));
-
-    // Return undefined implicitly
-  } catch (error: any) {
-    // Update the message with the error
-    const updatedContent = message.content.replace(
-      new RegExp(
-        `<dyad-add-dependency packages="${packages.join(
-          " "
-        )}">[^<]*</dyad-add-dependency>`,
-        "g"
-      ),
-      `<dyad-add-dependency packages="${packages.join(" ")}"><dyad-error>${
-        error.message
-      }</dyad-error></dyad-add-dependency>`
-    );
-
-    // Save the updated message back to the database
-    await db
-      .update(messages)
-      .set({ content: updatedContent })
-      .where(eq(messages.id, message.id));
-
-    throw error;
-  }
 }

src/ipc/processors/response_processor.ts

@@ -10,11 +10,13 @@ import { getGitAuthor } from "../utils/git_author";
 import log from "electron-log";
 import { executeAddDependency } from "./executeAddDependency";
 import {
+  deleteSupabaseFunction,
   deploySupabaseFunctions,
   executeSupabaseSql,
 } from "../../supabase_admin/supabase_management_client";
 import { isServerFunction } from "../../supabase_admin/supabase_utils";
 
+const readFile = fs.promises.readFile;
 const logger = log.scope("response_processor");
 
 export function getDyadWriteTags(fullResponse: string): {
@@ -131,6 +133,23 @@ export function getDyadExecuteSqlTags(fullResponse: string): string[] {
   return queries;
 }
 
+interface Output {
+  message: string;
+  error: unknown;
+}
+
+function getFunctionNameFromPath(input: string): string {
+  return path.basename(path.extname(input) ? path.dirname(input) : input);
+}
+
+async function readFileFromFunctionPath(input: string): Promise<string> {
+  // Sometimes, the path given is a directory, sometimes it's the file itself.
+  if (path.extname(input) === "") {
+    return readFile(path.join(input, "index.ts"), "utf8");
+  }
+  return readFile(input, "utf8");
+}
+
 export async function processFullResponseActions(
   fullResponse: string,
   chatId: number,
@@ -158,6 +177,9 @@ export async function processFullResponseActions(
   const deletedFiles: string[] = [];
   let hasChanges = false;
 
+  const warnings: Output[] = [];
+  const errors: Output[] = [];
+
   try {
     // Extract all tags
     const dyadWriteTags = getDyadWriteTags(fullResponse);
@@ -184,21 +206,37 @@ export async function processFullResponseActions(
     // Handle SQL execution tags
     if (dyadExecuteSqlQueries.length > 0) {
       for (const query of dyadExecuteSqlQueries) {
+        try {
           const result = await executeSupabaseSql({
             supabaseProjectId: chatWithApp.app.supabaseProjectId!,
             query,
           });
+        } catch (error) {
+          errors.push({
+            message: `Failed to execute SQL query: ${query}`,
+            error: error,
+          });
+        }
       }
       logger.log(`Executed ${dyadExecuteSqlQueries.length} SQL queries`);
     }
 
     // TODO: Handle add dependency tags
     if (dyadAddDependencyPackages.length > 0) {
+      try {
         await executeAddDependency({
           packages: dyadAddDependencyPackages,
           message: message,
           appPath,
         });
+      } catch (error) {
+        errors.push({
+          message: `Failed to add dependencies: ${dyadAddDependencyPackages.join(
+            ", "
+          )}`,
+          error: error,
+        });
+      }
       writtenFiles.push("package.json");
       const pnpmFilename = "pnpm-lock.yaml";
       if (fs.existsSync(path.join(appPath, pnpmFilename))) {
@@ -225,11 +263,18 @@ export async function processFullResponseActions(
       logger.log(`Successfully wrote file: ${fullFilePath}`);
       writtenFiles.push(filePath);
       if (isServerFunction(filePath)) {
+        try {
           await deploySupabaseFunctions({
             supabaseProjectId: chatWithApp.app.supabaseProjectId!,
             functionName: path.basename(path.dirname(filePath)),
             content: content,
           });
+        } catch (error) {
+          errors.push({
+            message: `Failed to deploy Supabase function: ${filePath}`,
+            error: error,
+          });
+        }
       }
     }
 
@@ -267,6 +312,33 @@ export async function processFullResponseActions(
       } else {
         logger.warn(`Source file for rename does not exist: ${fromPath}`);
       }
+      if (isServerFunction(tag.from)) {
+        try {
+          await deleteSupabaseFunction({
+            supabaseProjectId: chatWithApp.app.supabaseProjectId!,
+            functionName: getFunctionNameFromPath(tag.from),
+          });
+        } catch (error) {
+          warnings.push({
+            message: `Failed to delete Supabase function: ${tag.from} as part of renaming ${tag.from} to ${tag.to}`,
+            error: error,
+          });
+        }
+      }
+      if (isServerFunction(tag.to)) {
+        try {
+          await deploySupabaseFunctions({
+            supabaseProjectId: chatWithApp.app.supabaseProjectId!,
+            functionName: getFunctionNameFromPath(tag.to),
+            content: await readFileFromFunctionPath(toPath),
+          });
+        } catch (error) {
+          errors.push({
+            message: `Failed to deploy Supabase function: ${tag.to} as part of renaming ${tag.from} to ${tag.to}`,
+            error: error,
+          });
+        }
+      }
     }
 
     // Process all file deletions
@@ -275,7 +347,11 @@ export async function processFullResponseActions(
 
       // Delete the file if it exists
       if (fs.existsSync(fullFilePath)) {
+        if (fs.lstatSync(fullFilePath).isDirectory()) {
+          fs.rmdirSync(fullFilePath, { recursive: true });
+        } else {
           fs.unlinkSync(fullFilePath);
+        }
         logger.log(`Successfully deleted file: ${fullFilePath}`);
         deletedFiles.push(filePath);
 
@@ -293,6 +369,19 @@ export async function processFullResponseActions(
       } else {
         logger.warn(`File to delete does not exist: ${fullFilePath}`);
       }
+      if (isServerFunction(filePath)) {
+        try {
+          await deleteSupabaseFunction({
+            supabaseProjectId: chatWithApp.app.supabaseProjectId!,
+            functionName: getFunctionNameFromPath(filePath),
+          });
+        } catch (error) {
+          errors.push({
+            message: `Failed to delete Supabase function: ${filePath}`,
+            error: error,
+          });
+        }
+      }
     }
 
     // If we have any file changes, commit them all at once
@@ -346,10 +435,32 @@ export async function processFullResponseActions(
         approvalState: "approved",
       })
       .where(eq(messages.id, messageId));
-
     return { updatedFiles: hasChanges };
   } catch (error: unknown) {
     logger.error("Error processing files:", error);
     return { error: (error as any).toString() };
+  } finally {
+    const appendedContent = `
+    ${warnings
+      .map(
+        (warning) =>
+          `<dyad-output type="warning" message="${warning.message}">${warning.error}</dyad-output>`
+      )
+      .join("\n")}
+    ${errors
+      .map(
+        (error) =>
+          `<dyad-output type="error" message="${error.message}">${error.error}</dyad-output>`
+      )
+      .join("\n")}
+    `;
+    if (appendedContent.length > 0) {
+      await db
+        .update(messages)
+        .set({
+          content: fullResponse + "\n\n" + appendedContent,
+        })
+        .where(eq(messages.id, messageId));
+    }
   }
 }

src/supabase_admin/supabase_management_client.ts

@@ -4,6 +4,9 @@ import {
   SupabaseManagementAPI,
   SupabaseManagementAPIError,
 } from "@dyad-sh/supabase-management-js";
+import log from "electron-log";
+
+const logger = log.scope("supabase_management_client");
 
 /**
  * Checks if the Supabase access token is expired or about to expire
@@ -137,6 +140,23 @@ export async function executeSupabaseSql({
   return JSON.stringify(result);
 }
 
+export async function deleteSupabaseFunction({
+  supabaseProjectId,
+  functionName,
+}: {
+  supabaseProjectId: string;
+  functionName: string;
+}): Promise<void> {
+  logger.info(
+    `Deleting Supabase function: ${functionName} from project: ${supabaseProjectId}`
+  );
+  const supabase = await getSupabaseClient();
+  await supabase.deleteFunction(supabaseProjectId, functionName);
+  logger.info(
+    `Deleted Supabase function: ${functionName} from project: ${supabaseProjectId}`
+  );
+}
+
 export async function deploySupabaseFunctions({
   supabaseProjectId,
   functionName,
@@ -146,6 +166,9 @@ export async function deploySupabaseFunctions({
   functionName: string;
   content: string;
 }): Promise<void> {
+  logger.info(
+    `Deploying Supabase function: ${functionName} to project: ${supabaseProjectId}`
+  );
   const supabase = await getSupabaseClient();
   const formData = new FormData();
   formData.append(
@@ -172,6 +195,9 @@ export async function deploySupabaseFunctions({
     throw await createResponseError(response, "create function");
   }
 
+  logger.info(
+    `Deployed Supabase function: ${functionName} to project: ${supabaseProjectId}`
+  );
   return response.json();
 }