Update theme

backend/main.py

@@ -853,6 +853,116 @@ async def update_resource(project_id: str, resource_uid: str, update: ResourceUp
     
     return {"success": True, "message": "Resource updated"}
 
+@app.post("/api/projects/{project_id}/resources/{resource_uid}/template-diff")
+async def get_template_diff(project_id: str, resource_uid: str, update: ResourceUpdate):
+    """Generate diff showing how the template would change."""
+    if project_id not in projects_db:
+        raise HTTPException(404, "Project not found")
+    
+    resources = projects_db[project_id].get("resources", {})
+    if resource_uid not in resources:
+        raise HTTPException(404, "Resource not found")
+    
+    resource = resources[resource_uid]
+    chart_path = get_chart_path(project_id)
+    templates_dir = chart_path / "templates"
+    
+    if not templates_dir.exists():
+        raise HTTPException(404, "Templates directory not found")
+    
+    # Find template file matching the resource kind
+    template_file = None
+    kind_lower = resource["kind"].lower()
+    
+    # Try common naming patterns
+    for pattern in [f"{kind_lower}.yaml", f"{kind_lower}.yml"]:
+        potential_file = templates_dir / pattern
+        if potential_file.exists():
+            template_file = potential_file
+            break
+    
+    # Search all templates for matching kind
+    if not template_file:
+        for tpl in templates_dir.glob("*.yaml"):
+            if tpl.stem.startswith('_'):
+                continue
+            try:
+                with open(tpl, "r", encoding="utf-8") as f:
+                    content = f.read()
+                    if f"kind: {resource['kind']}" in content:
+                        template_file = tpl
+                        break
+            except Exception:
+                continue
+    
+    if not template_file:
+        raise HTTPException(404, f"Could not find template for {resource['kind']}")
+    
+    # Read original template
+    with open(template_file, "r", encoding="utf-8") as f:
+        original_template = f.read()
+    
+    return {
+        "template_file": str(template_file.relative_to(chart_path)),
+        "original_template": original_template,
+        "modified_template": update.yaml_content,
+        "additions": 0,
+        "deletions": 0,
+    }
+
+@app.post("/api/projects/{project_id}/resources/{resource_uid}/update-template")
+async def update_template(project_id: str, resource_uid: str, update: ResourceUpdate):
+    """Update the template file with changes from edited resource."""
+    if project_id not in projects_db:
+        raise HTTPException(404, "Project not found")
+    
+    resources = projects_db[project_id].get("resources", {})
+    if resource_uid not in resources:
+        raise HTTPException(404, "Resource not found")
+    
+    resource = resources[resource_uid]
+    chart_path = get_chart_path(project_id)
+    templates_dir = chart_path / "templates"
+    
+    if not templates_dir.exists():
+        raise HTTPException(404, "Templates directory not found")
+    
+    # Find template file
+    template_file = None
+    kind_lower = resource["kind"].lower()
+    
+    for pattern in [f"{kind_lower}.yaml", f"{kind_lower}.yml"]:
+        potential_file = templates_dir / pattern
+        if potential_file.exists():
+            template_file = potential_file
+            break
+    
+    if not template_file:
+        for tpl in templates_dir.glob("*.yaml"):
+            if tpl.stem.startswith('_'):
+                continue
+            try:
+                with open(tpl, "r", encoding="utf-8") as f:
+                    content = f.read()
+                    if f"kind: {resource['kind']}" in content:
+                        template_file = tpl
+                        break
+            except Exception:
+                continue
+    
+    if not template_file:
+        raise HTTPException(404, f"Could not find template for {resource['kind']}")
+    
+    # Write updated YAML to template file
+    with open(template_file, "w", encoding="utf-8") as f:
+        f.write(update.yaml_content)
+    
+    return {
+        "success": True,
+        "message": f"Template {template_file.name} updated",
+        "template_file": str(template_file.relative_to(chart_path))
+    }
+
 @app.post("/api/projects/{project_id}/export", response_model=ExportResult)
 async def export_chart(project_id: str):
     """

frontend/src/App.css

@@ -204,15 +204,17 @@
 
 /* Dark Theme Styles */
 [data-theme="dark"] {
-  --bg-primary: #1a202c;
-  --bg-secondary: #2d3748;
-  --bg-tertiary: #4a5568;
-  --text-primary: #f7fafc;
-  --text-secondary: #e2e8f0;
-  --text-muted: #a0aec0;
-  --border-color: #4a5568;
-  --card-bg: #2d3748;
-  --hover-bg: #374151;
+  --bg-primary: #0f172a;
+  --bg-secondary: #1e293b;
+  --bg-tertiary: #334155;
+  --text-primary: #f1f5f9;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+  --border-color: #334155;
+  --card-bg: #1e293b;
+  --hover-bg: #293548;
+  --accent-purple: #7c3aed;
+  --accent-blue: #3b82f6;
 }
 
 [data-theme="dark"] body {
@@ -225,39 +227,66 @@
 }
 
 [data-theme="dark"] .app-header {
-  background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);
+  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
 [data-theme="dark"] .card,
-[data-theme="dark"] .resource-card {
+[data-theme="dark"] .resource-card,
+[data-theme="dark"] .project-card {
   background: var(--card-bg);
   color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+
+[data-theme="dark"] .resource-card:hover,
+[data-theme="dark"] .project-card:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  border-color: #475569;
 }
 
 [data-theme="dark"] .modal {
   background: var(--bg-secondary);
   color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+
+[data-theme="dark"] .modal-overlay {
+  background: rgba(0, 0, 0, 0.75);
 }
 
 [data-theme="dark"] .modal-header {
   border-bottom-color: var(--border-color);
+  background: var(--bg-primary);
+}
+
+[data-theme="dark"] .modal-body {
+  background: var(--bg-secondary);
 }
 
 [data-theme="dark"] .modal-footer {
   border-top-color: var(--border-color);
+  background: var(--bg-primary);
 }
 
 [data-theme="dark"] .input,
-[data-theme="dark"] .textarea {
+[data-theme="dark"] .textarea,
+[data-theme="dark"] select {
   background: var(--bg-tertiary);
   color: var(--text-primary);
   border-color: var(--border-color);
 }
 
+[data-theme="dark"] .input::placeholder,
+[data-theme="dark"] .textarea::placeholder {
+  color: #64748b;
+}
+
 [data-theme="dark"] .input:focus,
 [data-theme="dark"] .textarea:focus {
-  border-color: #667eea;
+  border-color: var(--accent-purple);
   background: var(--bg-secondary);
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
 }
 
 [data-theme="dark"] .label {
@@ -295,15 +324,57 @@
 
 [data-theme="dark"] .tab.active {
   background: var(--card-bg);
-  color: #667eea;
+  color: #a78bfa;
+  border-bottom-color: #7c3aed;
+}
+
+[data-theme="dark"] .tab-content {
+  background: var(--bg-secondary);
 }
 
 [data-theme="dark"] .filters-section,
 [data-theme="dark"] .resources-stats {
   background: var(--card-bg);
+  border: 1px solid var(--border-color);
+}
+
+[data-theme="dark"] .dropzone {
+  background: var(--bg-tertiary);
+  border-color: var(--border-color);
+}
+
+[data-theme="dark"] .dropzone:hover,
+[data-theme="dark"] .dropzone.active {
+  border-color: var(--accent-purple);
+  background: var(--hover-bg);
+}
+
+[data-theme="dark"] .file-info,
+[data-theme="dark"] .git-info {
+  background: var(--bg-tertiary);
+  border-color: var(--border-color);
+}
+
+[data-theme="dark"] .project-header h3 {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .tagline {
+  color: #cbd5e1;
+  opacity: 1;
+}
+
+[data-theme="dark"] .empty-state {
+  color: var(--text-secondary);
+  background: var(--card-bg);
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+}
+
+[data-theme="dark"] .empty-state h3 {
+  color: var(--text-primary);
 }
 
-[data-theme="dark"] .empty-state,
 [data-theme="dark"] .loading-state {
   color: var(--text-secondary);
 }
@@ -320,11 +391,59 @@
 [data-theme="dark"] .btn-outline {
   border-color: var(--border-color);
   color: var(--text-secondary);
+  background: transparent;
 }
 
 [data-theme="dark"] .btn-outline:hover:not(:disabled) {
   background: var(--hover-bg);
-  border-color: #667eea;
+  border-color: var(--accent-purple);
+  color: var(--accent-purple);
+}
+
+[data-theme="dark"] .stat {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+}
+
+[data-theme="dark"] .stat-value {
+  color: var(--accent-purple);
+}
+
+[data-theme="dark"] .error-box,
+[data-theme="dark"] .error {
+  background: #3f1f1f;
+  border-color: #7f1d1d;
+  color: #fca5a5;
+}
+
+[data-theme="dark"] .chart-errors-box {
+  background: #3f1f1f;
+  border-color: #991b1b;
+}
+
+[data-theme="dark"] .changes-info,
+[data-theme="dark"] .templates-info {
+  background: var(--bg-tertiary);
+  border-color: var(--border-color);
+}
+
+[data-theme="dark"] .summary-row {
+  border-bottom-color: var(--border-color);
+}
+
+[data-theme="dark"] .summary-value {
+  color: #e0e7ff;
+}
+
+[data-theme="dark"] .summary-label {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] code {
+  background: var(--bg-tertiary);
+  color: #a78bfa;
+  padding: 0.2rem 0.4rem;
+  border-radius: 3px;
 }
 
 

frontend/src/api.js

@@ -46,6 +46,16 @@ export const projectsAPI = {
       yaml_content: yamlContent
     }),
   
+  getTemplateDiff: (projectId, resourceUid, yamlContent) =>
+    api.post(`/api/projects/${projectId}/resources/${resourceUid}/template-diff`, {
+      yaml_content: yamlContent
+    }),
+  
+  updateTemplate: (projectId, resourceUid, yamlContent) =>
+    api.post(`/api/projects/${projectId}/resources/${resourceUid}/update-template`, {
+      yaml_content: yamlContent
+    }),
+  
   export: (id) => api.post(`/api/projects/${id}/export`),
   
   download: (id) => api.get(`/api/projects/${id}/download`, {

frontend/src/components/AllChangesDiff.jsx

@@ -1,11 +1,13 @@
 import { useState, useEffect } from 'react';
 import { DiffEditor } from '@monaco-editor/react';
+import { useTheme } from '../context/ThemeContext';
 import './AllChangesDiff.css';
 
 function AllChangesDiff({ resources, onClose }) {
   const [originalYaml, setOriginalYaml] = useState('');
   const [modifiedYaml, setModifiedYaml] = useState('');
   const [modifiedResources, setModifiedResources] = useState([]);
+  const { theme } = useTheme();
 
   useEffect(() => {
     // Filter modified resources and combine their YAML
@@ -82,7 +84,7 @@ function AllChangesDiff({ resources, onClose }) {
               language="yaml"
               original={originalYaml}
               modified={modifiedYaml}
-              theme="vs-light"
+              theme={theme === 'dark' ? 'vs-dark' : 'vs-light'}
               options={{
                 readOnly: true,
                 automaticLayout: true,

frontend/src/components/RenderSection.css

@@ -75,7 +75,7 @@
 
 .templates-info strong {
   display: block;
-  color: #0c4a6e;
+  color: #1e86c2;
   margin-bottom: 0.75rem;
 }
 

frontend/src/components/ResourceCard.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import YamlEditor from './YamlEditor';
 import './ResourceCard.css';
 
-function ResourceCard({ resource, projectId, onUpdate, onClick }) {
+function ResourceCard({ resource, projectId, onUpdate, onClick, onUpdateTemplate }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [activeTab, setActiveTab] = useState('summary');
 
@@ -94,6 +94,7 @@ function ResourceCard({ resource, projectId, onUpdate, onClick }) {
                   onChange={(newYaml) => onUpdate(resource.uid, newYaml)}
                   projectId={projectId}
                   resourceUid={resource.uid}
+                  onUpdateTemplate={() => onUpdateTemplate(resource)}
                 />
               </div>
             )}

frontend/src/components/TemplateUpdateModal.css

@@ -0,0 +1,178 @@
+.template-update-modal {
+  max-width: 1400px;
+  max-height: 95vh;
+}
+
+.template-update-modal .modal-body {
+  max-height: calc(95vh - 140px);
+}
+
+.template-info-box {
+  background: #eff6ff;
+  border: 2px solid #3b82f6;
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.template-info-box h4 {
+  color: #1e40af;
+  margin-bottom: 0.75rem;
+  font-size: 1.1rem;
+}
+
+.template-info-box p {
+  color: #1e3a8a;
+  margin: 0;
+  line-height: 1.6;
+}
+
+.template-info-box strong {
+  color: #1e40af;
+  font-family: 'Monaco', 'Menlo', monospace;
+}
+
+.loading-section {
+  text-align: center;
+  padding: 3rem 2rem;
+}
+
+.loading-section p {
+  margin-top: 1rem;
+  color: #64748b;
+}
+
+.template-details {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 1rem 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.detail-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.5rem 0;
+}
+
+.detail-label {
+  font-weight: 600;
+  color: #475569;
+  min-width: 120px;
+}
+
+.detail-item code {
+  background: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 0.9rem;
+  color: #1e293b;
+}
+
+.change-badge {
+  background: #fef3c7;
+  color: #92400e;
+  padding: 0.25rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.diff-section {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.diff-header {
+  background: #f8fafc;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.diff-header strong {
+  color: #1e293b;
+  font-size: 0.95rem;
+}
+
+.warning-box {
+  background: #fffbeb;
+  border: 1px solid #fbbf24;
+  border-radius: 8px;
+  padding: 1rem 1.5rem;
+}
+
+.warning-box strong {
+  display: block;
+  color: #92400e;
+  margin-bottom: 0.75rem;
+  font-size: 1rem;
+}
+
+.warning-box ul {
+  margin: 0;
+  padding-left: 1.5rem;
+  color: #78350f;
+}
+
+.warning-box li {
+  margin: 0.5rem 0;
+  line-height: 1.5;
+}
+
+/* Dark theme support */
+[data-theme="dark"] .template-info-box {
+  background: #1e3a5f;
+  border-color: #3b82f6;
+}
+
+[data-theme="dark"] .template-info-box h4,
+[data-theme="dark"] .template-info-box p,
+[data-theme="dark"] .template-info-box strong {
+  color: #93c5fd;
+}
+
+[data-theme="dark"] .template-details {
+  background: #1e293b;
+  border-color: #334155;
+}
+
+[data-theme="dark"] .detail-item code {
+  background: #0f172a;
+  border-color: #334155;
+  color: #cbd5e1;
+}
+
+[data-theme="dark"] .diff-section {
+  background: #1e293b;
+  border-color: #334155;
+}
+
+[data-theme="dark"] .diff-header {
+  background: #0f172a;
+  border-bottom-color: #334155;
+}
+
+[data-theme="dark"] .diff-header strong {
+  color: #f1f5f9;
+}
+
+[data-theme="dark"] .warning-box {
+  background: #422006;
+  border-color: #d97706;
+}
+
+[data-theme="dark"] .warning-box strong {
+  color: #fbbf24;
+}
+
+[data-theme="dark"] .warning-box ul,
+[data-theme="dark"] .warning-box li {
+  color: #fcd34d;
+}

frontend/src/components/TemplateUpdateModal.jsx

@@ -0,0 +1,152 @@
+import { useState, useEffect } from 'react';
+import { DiffEditor } from '@monaco-editor/react';
+import { projectsAPI } from '../api';
+import { useTheme } from '../context/ThemeContext';
+import './TemplateUpdateModal.css';
+
+function TemplateUpdateModal({ projectId, resource, onClose, onComplete }) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [templateDiff, setTemplateDiff] = useState(null);
+  const [loadingDiff, setLoadingDiff] = useState(true);
+  const { theme } = useTheme();
+
+  const loadTemplateDiff = async () => {
+    setLoadingDiff(true);
+    try {
+      const response = await projectsAPI.getTemplateDiff(
+        projectId,
+        resource.uid,
+        resource.rawYaml
+      );
+      setTemplateDiff(response.data);
+    } catch (err) {
+      setError(err.response?.data?.detail || 'Failed to generate template diff');
+    } finally {
+      setLoadingDiff(false);
+    }
+  };
+
+  // Load template diff when component mounts
+  useEffect(() => {
+    loadTemplateDiff();
+  }, []);
+
+  const handleUpdateTemplate = async () => {
+    setLoading(true);
+    setError('');
+
+    try {
+      await projectsAPI.updateTemplate(
+        projectId,
+        resource.uid,
+        resource.rawYaml
+      );
+      onComplete();
+    } catch (err) {
+      setError(err.response?.data?.detail || 'Failed to update template');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal template-update-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>Update Template File</h3>
+          <button className="close-btn" onClick={onClose}>×</button>
+        </div>
+
+        <div className="modal-body">
+          <div className="template-info-box">
+            <h4>📝 Template Changes Detected</h4>
+            <p>
+              You modified the rendered resource <strong>{resource.kind}/{resource.name}</strong>.
+              This will update the corresponding template file.
+            </p>
+          </div>
+
+          {loadingDiff ? (
+            <div className="loading-section">
+              <div className="loading"></div>
+              <p>Generating template diff...</p>
+            </div>
+          ) : error ? (
+            <div className="error-box">
+              <strong>Error:</strong>
+              <p>{error}</p>
+            </div>
+          ) : templateDiff ? (
+            <>
+              <div className="template-details">
+                <div className="detail-item">
+                  <span className="detail-label">Template File:</span>
+                  <code>{templateDiff.template_file}</code>
+                </div>
+                <div className="detail-item">
+                  <span className="detail-label">Changes:</span>
+                  <span className="change-badge">
+                    {templateDiff.additions} additions, {templateDiff.deletions} deletions
+                  </span>
+                </div>
+              </div>
+
+              <div className="diff-section">
+                <div className="diff-header">
+                  <strong>Template File Diff (Original ← → Modified):</strong>
+                </div>
+                <DiffEditor
+                  height="500px"
+                  language="yaml"
+                  original={templateDiff.original_template}
+                  modified={templateDiff.modified_template}
+                  theme={theme === 'dark' ? 'vs-dark' : 'vs-light'}
+                  options={{
+                    readOnly: true,
+                    automaticLayout: true,
+                    renderSideBySide: true,
+                    scrollBeyondLastLine: false,
+                    minimap: { enabled: true },
+                  }}
+                />
+              </div>
+
+              <div className="warning-box">
+                <strong>⚠️ Important:</strong>
+                <ul>
+                  <li>This will modify the template file in your chart</li>
+                  <li>Changes may affect other resources if the template uses conditions</li>
+                  <li>Make sure to review the diff carefully before confirming</li>
+                  <li>You can re-render after updating to see the effect</li>
+                </ul>
+              </div>
+            </>
+          ) : null}
+        </div>
+
+        <div className="modal-footer">
+          <button className="btn btn-outline" onClick={onClose} disabled={loading}>
+            Cancel
+          </button>
+          <button 
+            className="btn btn-primary" 
+            onClick={handleUpdateTemplate}
+            disabled={loading || loadingDiff || !!error}
+          >
+            {loading ? (
+              <>
+                <div className="loading"></div>
+                Updating...
+              </>
+            ) : (
+              '✓ Update Template'
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TemplateUpdateModal;

frontend/src/components/YamlEditor.jsx

@@ -2,9 +2,10 @@ import { useState, useRef, useEffect } from 'react';
 import Editor, { DiffEditor } from '@monaco-editor/react';
 import yaml from 'js-yaml';
 import { projectsAPI } from '../api';
+import { useTheme } from '../context/ThemeContext';
 import './YamlEditor.css';
 
-function YamlEditor({ value, resourceKind, onChange, projectId, resourceUid }) {
+function YamlEditor({ value, resourceKind, onChange, projectId, resourceUid, onUpdateTemplate }) {
   const [editorValue, setEditorValue] = useState(value);
   const [originalValue] = useState(value); // Store original for diff
   const [validationError, setValidationError] = useState(null);
@@ -12,6 +13,7 @@ function YamlEditor({ value, resourceKind, onChange, projectId, resourceUid }) {
   const [saveSuccess, setSaveSuccess] = useState(false);
   const [showDiff, setShowDiff] = useState(false);
   const editorRef = useRef(null);
+  const { theme } = useTheme();
 
   useEffect(() => {
     setEditorValue(value);
@@ -196,6 +198,7 @@ function YamlEditor({ value, resourceKind, onChange, projectId, resourceUid }) {
         </div>
         <div className="toolbar-right">
           {hasChanges && (
+            <>
               <button 
                 className={`btn-small ${showDiff ? 'btn-primary' : 'btn-outline'}`}
                 onClick={() => setShowDiff(!showDiff)}
@@ -203,6 +206,17 @@ function YamlEditor({ value, resourceKind, onChange, projectId, resourceUid }) {
               >
                 {showDiff ? '📝 Editor' : '🔍 Show Diff'}
               </button>
+              {onUpdateTemplate && (
+                <button 
+                  className="btn-small btn-secondary"
+                  onClick={() => onUpdateTemplate()}
+                  title="Update the source template file with these changes"
+                  disabled={isSaving || showDiff}
+                >
+                  📄 Update Template
+                </button>
+              )}
+            </>
           )}
           <button 
             className="btn-small btn-outline"
@@ -228,7 +242,7 @@ function YamlEditor({ value, resourceKind, onChange, projectId, resourceUid }) {
             language="yaml"
             original={originalValue}
             modified={editorValue}
-            theme="vs-light"
+            theme={theme === 'dark' ? 'vs-dark' : 'vs-light'}
             options={{
               readOnly: false,
               automaticLayout: true,
@@ -247,7 +261,7 @@ function YamlEditor({ value, resourceKind, onChange, projectId, resourceUid }) {
             value={editorValue}
             onChange={handleEditorChange}
             onMount={handleEditorDidMount}
-            theme="vs-light"
+            theme={theme === 'dark' ? 'vs-dark' : 'vs-light'}
             options={{
               readOnly: false,
               automaticLayout: true,

frontend/src/pages/RenderView.jsx

@@ -6,6 +6,7 @@ import UploadSection from '../components/UploadSection';
 import RenderSection from '../components/RenderSection';
 import ExportModal from '../components/ExportModal';
 import AllChangesDiff from '../components/AllChangesDiff';
+import TemplateUpdateModal from '../components/TemplateUpdateModal';
 import './RenderView.css';
 
 function RenderView() {
@@ -29,6 +30,8 @@ function RenderView() {
   const [showRender, setShowRender] = useState(false);
   const [showExport, setShowExport] = useState(false);
   const [showAllChanges, setShowAllChanges] = useState(false);
+  const [showTemplateUpdate, setShowTemplateUpdate] = useState(false);
+  const [selectedResourceForTemplate, setSelectedResourceForTemplate] = useState(null);
 
   useEffect(() => {
     loadProject();
@@ -105,6 +108,17 @@ function RenderView() {
     ));
   };
 
+  const handleUpdateTemplate = (resource) => {
+    setSelectedResourceForTemplate(resource);
+    setShowTemplateUpdate(true);
+  };
+
+  const handleTemplateUpdateComplete = () => {
+    setShowTemplateUpdate(false);
+    setSelectedResourceForTemplate(null);
+    // Optionally reload or show success message
+  };
+
   // Get unique kinds for filter dropdown
   const uniqueKinds = [...new Set(resources.map(r => r.kind))].sort();
   
@@ -256,6 +270,7 @@ function RenderView() {
                   projectId={projectId}
                   onUpdate={handleResourceUpdate}
                   onClick={() => setSelectedResource(resource)}
+                  onUpdateTemplate={handleUpdateTemplate}
                 />
               ))}
             </div>
@@ -312,6 +327,18 @@ function RenderView() {
           onClose={() => setShowAllChanges(false)}
         />
       )}
+
+      {showTemplateUpdate && selectedResourceForTemplate && (
+        <TemplateUpdateModal
+          projectId={projectId}
+          resource={selectedResourceForTemplate}
+          onClose={() => {
+            setShowTemplateUpdate(false);
+            setSelectedResourceForTemplate(null);
+          }}
+          onComplete={handleTemplateUpdateComplete}
+        />
+      )}
     </div>
   );
 }