bolt breaks by forgetting to return part of the code and leaves it as a comment

[ilyatbn]

Describe the bug

Sometimes when bolt updates the file, it suddenly removes tons of code and I have to do a rollback or tell it it messed. up..

This is the actual file it updated and literally added comments {/* ... rest of the component ... /} and {/ ... existing JSX ... */} etc instead of inserting the code..

// Update the recipe card display to show cost per unit
const filteredRecipes = recipes.filter(recipe => {
  const matchesSearch = recipe.name.toLowerCase().includes(search.toLowerCase());
  const matchesTag = selectedTag ? recipe.tags.some(tag => tag.id === selectedTag.id) : true;
  return matchesSearch && matchesTag;
});

return (
  <div>
    {/* ... existing JSX ... */}
    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {filteredRecipes.map((recipe) => {
        const materials = StorageService.getMaterials();
        const totalCost = StorageService.calculateRecipeCost(recipe);
        const costPerUnit = recipe.outputQuantity > 0 ? totalCost / recipe.outputQuantity : 0;

        return (
          <div
            key={recipe.id}
            onClick={() => {
              setSelectedRecipe(recipe);
              setShowModal(true);
            }}
            className="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg cursor-pointer hover:shadow-md transition-shadow"
          >
            <div className="px-4 py-5 sm:p-6">
              <h3 className="text-lg font-medium text-gray-900 dark:text-white">
                {recipe.name}
              </h3>
              
              <div className="mt-2 space-y-2">
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Output: {recipe.outputQuantity} {recipe.outputType}
                </p>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Production Cost: {currencySymbol}{totalCost.toFixed(2)}
                </p>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Cost per {recipe.outputType}: {currencySymbol}{costPerUnit.toFixed(2)}
                </p>
                
                {/* ... rest of the recipe card JSX ... */}
              </div>
            </div>
          </div>
        );
      })}
    </div>
    {/* ... rest of the component ... */}
  </div>
);

Link to the Bolt URL that caused the error

https://bolt.new/~/sb1-ixec6z

Steps to reproduce

no idea.

Expected behavior

should not break the code, I guess.

Screen Recording / Screenshot

No response

Platform

Browser name = Chrome
Full version = 131.0.0.0
Major version = 131
navigator.appName = Netscape
navigator.userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
performance.memory = {
  "totalJSHeapSize": 46421548,
  "usedJSHeapSize": 43706196,
  "jsHeapSizeLimit": 4294705152
}
Username = ilyatbn
Chat ID = 7333cf1c7a96

Additional context

No response