From 5c17de0c3cb8dc3fc9e04b0955991e0088f3c290 Mon Sep 17 00:00:00 2001
From: Alex Blank <alexblank@fastmail.com>
Date: Fri, 22 May 2026 20:04:42 +0000
Subject: [PATCH] fix: handle FastAPI validation error objects in tool workshop

- Add extractErrorMessage helper to safely stringify validation error arrays
- Apply to tool type, config, and folder save handlers
- Fixes React error #31 when rendering error objects directly in JSX

Closes: redesign-tool-workshop
---
 apps/web/src/pages/tool-workshop.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/pages/tool-workshop.tsx b/apps/web/src/pages/tool-workshop.tsx
index 740c754..7d8eab5 100644
--- a/apps/web/src/pages/tool-workshop.tsx
+++ b/apps/web/src/pages/tool-workshop.tsx
@@ -186,6 +186,16 @@ export const ToolWorkshopPage = () => {
     setShowFolderForm(false);
   };
 
+  const extractErrorMessage = (err: unknown): string => {
+    const axiosError = err as { response?: { data?: { detail?: string | Array<{msg?: string}> } } };
+    const detail = axiosError?.response?.data?.detail;
+    if (typeof detail === 'string') return detail;
+    if (Array.isArray(detail)) {
+      return detail.map(d => typeof d === 'string' ? d : d.msg || JSON.stringify(d)).join(', ');
+    }
+    return "Failed to save";
+  };
+
   const handleToolTypeSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setToolTypeError(null);
@@ -259,8 +269,7 @@ export const ToolWorkshopPage = () => {
       }
       await loadData();
     } catch (err) {
-      const axiosError = err as { response?: { data?: { detail?: string } } };
-      setToolTypeError(axiosError?.response?.data?.detail || "Failed to save tool type");
+      setToolTypeError(extractErrorMessage(err));
     }
   };
 
@@ -372,8 +381,7 @@ export const ToolWorkshopPage = () => {
       resetConfigForm();
       await loadData();
     } catch (err) {
-      const axiosError = err as { response?: { data?: { detail?: string } } };
-      setConfigError(axiosError?.response?.data?.detail || "Failed to save config");
+      setConfigError(extractErrorMessage(err));
     }
   };
 
@@ -456,8 +464,7 @@ export const ToolWorkshopPage = () => {
       resetFolderForm();
       await loadData();
     } catch (err) {
-      const axiosError = err as { response?: { data?: { detail?: string } } };
-      setFolderError(axiosError?.response?.data?.detail || "Failed to save folder");
+      setFolderError(extractErrorMessage(err));
     }
   };