Implement graceful recipe error handling with filename display (#4363)

Signed-off-by: Jon Andersen <jon.andersen.se@gmail.com>

ui/desktop/src/components/RecipesView.tsx

@@ -372,8 +372,10 @@ Parameters you can use:
     }
   };
 
-  // Render a recipe item
+  // Render a recipe item with error handling
-  const RecipeItem = ({ savedRecipe }: { savedRecipe: SavedRecipe }) => (
+  const RecipeItem = ({ savedRecipe }: { savedRecipe: SavedRecipe }) => {
+    try {
+      return (
         <Card className="py-2 px-4 mb-2 bg-background-default border-none hover:bg-background-muted cursor-pointer transition-all duration-150">
           <div className="flex justify-between items-start gap-4">
             <div className="min-w-0 flex-1">
@@ -433,6 +435,27 @@ Parameters you can use:
           </div>
         </Card>
       );
+    } catch (error) {
+      // Error row showing failed to read file with filename and error details
+      return (
+        <Card className="py-2 px-4 mb-2 bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-800">
+          <div className="flex justify-between items-start gap-4">
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2 mb-1">
+                <AlertCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
+                <h3 className="text-base text-red-700 dark:text-red-300">
+                  Failed to read file: {savedRecipe.filename}
+                </h3>
+              </div>
+              <p className="text-red-600 dark:text-red-400 text-sm">
+                {error instanceof Error ? error.message : 'Unknown error'}
+              </p>
+            </div>
+          </div>
+        </Card>
+      );
+    }
+  };
 
   // Render skeleton loader for recipe items
   const RecipeSkeleton = () => (

ui/desktop/src/recipe/recipeStorage.ts

@@ -12,6 +12,7 @@ export interface SavedRecipe {
   isGlobal: boolean;
   lastModified: Date;
   isArchived?: boolean;
+  filename: string; // The actual filename used
 }
 
 /**
@@ -66,6 +67,7 @@ async function loadRecipeFromFile(
     return {
       ...recipeData,
       isGlobal: isGlobal,
+      filename: recipeName,
     };
   } catch (error) {
     console.warn(`Failed to load recipe from ${filePath}:`, error);
@@ -112,6 +114,7 @@ export async function saveRecipe(recipe: Recipe, options: SaveRecipeOptions): Pr
     // Create saved recipe object
     const savedRecipe: SavedRecipe = {
       name: sanitizedName,
+      filename: sanitizedName,
       recipe: recipe,
       isGlobal: global,
       lastModified: new Date(),