1 files changed, 20 insertions, 11 deletions
diff --git a/makima/frontend/src/components/templates/TemplateEditor.tsx b/makima/frontend/src/components/templates/TemplateEditor.tsx
index 03382f3..c8e1f98 100644
--- a/makima/frontend/src/components/templates/TemplateEditor.tsx
+++ b/makima/frontend/src/components/templates/TemplateEditor.tsx
@@ -5,9 +5,10 @@ interface Props {
   template: ContractTemplate;
   onSave: (template: ContractTemplate) => void;
   onCancel: () => void;
+  readOnly?: boolean;
 }
 
-export function TemplateEditor({ template, onSave, onCancel }: Props) {
+export function TemplateEditor({ template, onSave, onCancel, readOnly = false }: Props) {
   const [editedTemplate, setEditedTemplate] = useState<ContractTemplate>({
     ...template,
     phases: template.phases.map((p) => ({
@@ -106,11 +107,16 @@ export function TemplateEditor({ template, onSave, onCancel }: Props) {
       {/* Header */}
       <div className="mb-6 pb-4 border-b border-[rgba(117,170,252,0.15)]">
         <h2 className="text-sm font-mono uppercase tracking-wide text-[#9bc3ff] mb-1">
-          Edit Template: {template.name}
+          {readOnly ? "View" : "Edit"} Template: {template.name}
         </h2>
         <p className="text-xs font-mono text-[#75aafc] opacity-70">
           {template.description}
         </p>
+        {readOnly && (
+          <p className="text-xs font-mono text-amber-400 mt-2">
+            Built-in templates are read-only
+          </p>
+        )}
       </div>
 
       {/* Phases */}
@@ -127,10 +133,11 @@ export function TemplateEditor({ template, onSave, onCancel }: Props) {
               </span>
               <input
                 type="text"
-                className="flex-1 px-3 py-1.5 bg-transparent border border-[rgba(117,170,252,0.25)] text-white font-mono text-sm placeholder-[#556677] focus:outline-none focus:border-[#3f6fb3]"
+                className="flex-1 px-3 py-1.5 bg-transparent border border-[rgba(117,170,252,0.25)] text-white font-mono text-sm placeholder-[#556677] focus:outline-none focus:border-[#3f6fb3] disabled:opacity-60"
                 value={phase.name}
                 onChange={(e) => handlePhaseNameChange(phase.id, e.target.value)}
                 placeholder="Phase name"
+                disabled={readOnly}
               />
               {!template.isBuiltIn && (
                 <button
@@ -233,15 +240,17 @@ export function TemplateEditor({ template, onSave, onCancel }: Props) {
           onClick={onCancel}
           className="px-4 py-2 border border-[rgba(117,170,252,0.25)] text-[#9bc3ff] font-mono text-xs uppercase tracking-wide hover:border-[#3f6fb3] transition-colors"
         >
-          Cancel
-        </button>
-        <button
-          type="button"
-          onClick={() => onSave(editedTemplate)}
-          className="px-4 py-2 border border-[#3f6fb3] bg-[rgba(117,170,252,0.15)] text-[#9bc3ff] font-mono text-xs uppercase tracking-wide hover:bg-[rgba(117,170,252,0.25)] transition-colors"
-        >
-          Save Changes
+          {readOnly ? "Close" : "Cancel"}
         </button>
+        {!readOnly && (
+          <button
+            type="button"
+            onClick={() => onSave(editedTemplate)}
+            className="px-4 py-2 border border-[#3f6fb3] bg-[rgba(117,170,252,0.15)] text-[#9bc3ff] font-mono text-xs uppercase tracking-wide hover:bg-[rgba(117,170,252,0.25)] transition-colors"
+          >
+            Save Changes
+          </button>
+        )}
       </div>
     </div>
   );