Block TemplateInline file generation until "delete existing files" alert resolves

TemplateInline components with generateFile={true} auto-execute on page mount,
which was regenerating files (like .github/workflows/ci.yml) immediately after
the user deleted them. The user would delete files, refresh, and see them
reappear because:

1. Generated files check runs first → finds 0 files → no alert
2. TemplateInline auto-renders → recreates the files

Fix: add a `renderingEnabled` flag to GeneratedFilesContext that starts false
and is only set to true once the generated files check completes and either:
- No existing files were found, or
- The user resolved the alert (clicked "Keep Files" or "Delete Files")

TemplateInline now checks this flag before auto-rendering when generateFile
is true, preventing the race condition where files are regenerated before the
user decides what to do with existing ones.

https://claude.ai/code/session_01Js4Mce3EEoW3Z83kpNuSEC

Author: claude

web/src/App.tsx

@@ -12,6 +12,7 @@ import { GeneratedFilesAlert, shouldShowGeneratedFilesAlert } from './components
 import { getDirectoryPath, hasGeneratedFiles } from './lib/utils'
 import { useGetRunbook } from './hooks/useApiGetRunbook'
 import { useFileTree } from './hooks/useFileTree'
+import { useGeneratedFiles } from './hooks/useGeneratedFiles'
 import { useGitWorkTree } from './contexts/useGitWorkTree'
 import { useWatchMode } from './hooks/useWatchMode'
 import { useApiGeneratedFilesCheck } from './hooks/useApiGeneratedFilesCheck'
@@ -57,6 +58,7 @@ function App() {
 
   // Get file tree state to detect when files are generated
   const { fileTree, setFileTree } = useFileTree()
+  const { setRenderingEnabled } = useGeneratedFiles()
   const hasFiles = hasGeneratedFiles(fileTree)
 
   // Get git worktree state to detect when a repo is cloned
@@ -124,6 +126,33 @@ function App() {
     generatedFilesCheck.data?.hasFiles,
     alertDismissedThisSession,
   ]);
+
+  // Enable file-generating template rendering once the generated files check resolves
+  // and either no files exist or the alert won't be shown (dismissed / "don't ask again").
+  // This prevents TemplateInline components from regenerating files before the user
+  // decides to keep or delete existing ones.
+  useEffect(() => {
+    if (generatedFilesCheck.isLoading) return;
+    // No existing files → safe to render immediately
+    if (!generatedFilesCheck.data?.hasFiles) {
+      setRenderingEnabled(true);
+      return;
+    }
+    // Files exist but user previously chose "don't ask again"
+    if (!shouldShowGeneratedFilesAlert()) {
+      setRenderingEnabled(true);
+      return;
+    }
+    // Files exist and alert has been dismissed this session (keep or delete)
+    if (alertDismissedThisSession) {
+      setRenderingEnabled(true);
+    }
+  }, [
+    generatedFilesCheck.isLoading,
+    generatedFilesCheck.data?.hasFiles,
+    alertDismissedThisSession,
+    setRenderingEnabled,
+  ]);
 
   // Extract commonly used values
   // Prefer remoteSource (original GitHub/GitLab URL) over local temp path for display

web/src/components/mdx/TemplateInline/TemplateInline.tsx

@@ -11,6 +11,7 @@ import { extractTemplateFiles } from './lib/extractTemplateFiles'
 import { extractOutputDependencies, extractOutputDependenciesFromString } from './lib/extractOutputDependencies'
 import type { FileTreeNode, File } from '@/components/artifacts/code/FileTree'
 import { useFileTree } from '@/hooks/useFileTree'
+import { useGeneratedFiles } from '@/hooks/useGeneratedFiles'
 import { useGitWorkTree } from '@/contexts/useGitWorkTree'
 import { CodeFile } from '@/components/artifacts/code/CodeFile'
 import { AlertTriangle } from 'lucide-react'
@@ -62,6 +63,8 @@ function TemplateInline({
   // Get file tree for merging (Generated tab) and worktree context for invalidation (All files tab)
   const { setFileTree } = useFileTree();
   const { invalidateTree } = useGitWorkTree();
+  // Check if file-generating rendering is allowed (blocked while "delete existing files" alert is pending)
+  const { renderingEnabled } = useGeneratedFiles();
 
   // Get inputs for API requests and derive values map for lookups
   const inputs = useInputs(inputsId);
@@ -203,11 +206,17 @@ function TemplateInline({
   const hasTriggeredInitialRender = useRef(false);
 
   useEffect(() => {
+    // When generateFile is true, wait until the "Existing Generated Files" alert
+    // is resolved so we don't regenerate files the user just deleted.
+    if (generateFile && !renderingEnabled) {
+      return;
+    }
+
     // Check if we have all input dependencies
     if (!hasAllInputDependencies(inputValues)) {
       return;
     }
-    
+
     // Check if we have all output dependencies
     if (!hasAllOutputDependencies) {
       return;
@@ -224,22 +233,22 @@ function TemplateInline({
     const valuesKey = JSON.stringify(inputs);
     const outputsKey = JSON.stringify(allOutputs);
     const combinedKey = `${valuesKey}|${outputsKey}`;
-    
+
     if (combinedKey === lastRenderedVariablesRef.current) {
       return;
     }
-    
+
     // Clear existing timer
     if (autoUpdateTimerRef.current) {
       clearTimeout(autoUpdateTimerRef.current);
     }
-    
+
     // Determine if this is initial render or auto-update
     const isInitialRender = !hasTriggeredInitialRender.current;
-    
+
     // Debounce for auto-updates, immediate for initial render
     const delay = isInitialRender ? 0 : 300;
-    
+
     autoUpdateTimerRef.current = setTimeout(() => {
       hasTriggeredInitialRender.current = true;
 
@@ -265,7 +274,7 @@ function TemplateInline({
           console.error(`[TemplateInline][${outputPath}] Render failed:`, err);
         });
     }, delay);
-  }, [inputValues, inputs, allOutputs, hasAllInputDependencies, hasAllOutputDependencies, outputPath, renderTemplate, setFileTree, generateFile, target, invalidateTree]);
+  }, [inputValues, inputs, allOutputs, hasAllInputDependencies, hasAllOutputDependencies, outputPath, renderTemplate, setFileTree, generateFile, target, invalidateTree, renderingEnabled]);
 
   // Cleanup timer on unmount
   useEffect(() => {

web/src/contexts/GeneratedFilesContext.tsx

@@ -10,7 +10,10 @@ interface GeneratedFilesProviderProps {
 export const GeneratedFilesProvider: React.FC<GeneratedFilesProviderProps> = ({ children }) => {
   const [fileTree, setFileTree] = useState<FileTreeNode[] | null>(null)
   const [localPath, setLocalPath] = useState<string | null>(null)
-  
+  // Start disabled until the generated files check resolves (prevents TemplateInline
+  // from regenerating files before the user decides to keep/delete existing ones)
+  const [renderingEnabled, setRenderingEnabled] = useState(false)
+
   // Stable reference to prevent unnecessary re-renders in consuming components
   // Support both direct values and functional updates
   const stableSetFileTree = useCallback((newFileTree: FileTreeNode[] | null | ((prevFileTree: FileTreeNode[] | null) => FileTreeNode[] | null)) => {
@@ -21,8 +24,12 @@ export const GeneratedFilesProvider: React.FC<GeneratedFilesProviderProps> = ({
     setLocalPath(path)
   }, [])
 
+  const stableSetRenderingEnabled = useCallback((enabled: boolean) => {
+    setRenderingEnabled(enabled)
+  }, [])
+
   return (
-    <GeneratedFilesContext.Provider value={{ fileTree, setFileTree: stableSetFileTree, localPath, setLocalPath: stableSetLocalPath }}>
+    <GeneratedFilesContext.Provider value={{ fileTree, setFileTree: stableSetFileTree, localPath, setLocalPath: stableSetLocalPath, renderingEnabled, setRenderingEnabled: stableSetRenderingEnabled }}>
       {children}
     </GeneratedFilesContext.Provider>
   )

web/src/contexts/GeneratedFilesContext.types.ts

@@ -6,6 +6,11 @@ export interface GeneratedFilesContextType {
   setFileTree: (fileTree: FileTreeNode[] | null | ((prevFileTree: FileTreeNode[] | null) => FileTreeNode[] | null)) => void
   localPath: string | null
   setLocalPath: (path: string | null) => void
+  /** Whether file-generating templates are allowed to auto-render. False while the
+   *  "Existing Generated Files Detected" alert is pending so that TemplateInline
+   *  components don't regenerate files before the user decides to keep or delete. */
+  renderingEnabled: boolean
+  setRenderingEnabled: (enabled: boolean) => void
 }
 
 export const GeneratedFilesContext = createContext<GeneratedFilesContextType | undefined>(undefined)