From 6892aaf7de6b213b12fed047fa00addddcaaf790 Mon Sep 17 00:00:00 2001
From: overcuriousity <overcuriousity@posteo.org>
Date: Fri, 25 Jul 2025 22:52:21 +0200
Subject: [PATCH] simplify tool contribution

---
 src/pages/api/contribute/tool.ts         |   23 +-
 src/pages/contribute/knowledgebase.astro |  249 ++--
 src/pages/contribute/tool.astro          | 1351 +++++++++++-----------
 src/utils/gitContributions.ts            |  554 ++-------
 4 files changed, 875 insertions(+), 1302 deletions(-)

diff --git a/src/pages/api/contribute/tool.ts b/src/pages/api/contribute/tool.ts
index 117bdce..3157ff0 100644
--- a/src/pages/api/contribute/tool.ts
+++ b/src/pages/api/contribute/tool.ts
@@ -115,17 +115,6 @@ async function validateToolData(tool: any, action: string): Promise<{ valid: boo
       }
     }
     
-    // Validate related concepts exist
-    if (tool.related_concepts && tool.related_concepts.length > 0) {
-      const existingConcepts = new Set(
-        existingData.tools.filter((t: any) => t.type === 'concept').map((t: any) => t.name)
-      );
-      const invalidConcepts = tool.related_concepts.filter((c: string) => !existingConcepts.has(c));
-      if (invalidConcepts.length > 0) {
-        errors.push(`Referenced concepts not found: ${invalidConcepts.join(', ')}`);
-      }
-    }
-    
     return { valid: errors.length === 0, errors };
     
   } catch (error) {
@@ -199,23 +188,21 @@ export const POST: APIRoute = async ({ request }) => {
 
     // CRITICAL FIX: Enhanced error handling for Git operations
     try {
+      // Submit contribution via Git (now creates issue instead of PR)
       const gitManager = new GitContributionManager();
       const result = await gitManager.submitContribution(contributionData);
 
       if (result.success) {
-        // Log successful contribution
-        console.log(`[CONTRIBUTION SUCCESS] ${validatedData.action} "${validatedData.tool.name}" by ${userEmail} - PR: ${result.prUrl}`);
+        console.log(`[CONTRIBUTION] Issue created for "${validatedData.tool.name}" by ${userEmail} - Issue: ${result.issueUrl}`);
         
-        // ENSURE proper success response
         return apiResponse.created({
           success: true,
           message: result.message,
-          prUrl: result.prUrl,
-          branchName: result.branchName
+          issueUrl: result.issueUrl,
+          issueNumber: result.issueNumber
         });
       } else {
-        // Log failed contribution
-        console.error(`[CONTRIBUTION FAILED] ${validatedData.action} "${validatedData.tool.name}" by ${userEmail}: ${result.message}`);
+        console.error(`[CONTRIBUTION FAILED] "${validatedData.tool.name}" by ${userEmail}: ${result.message}`);
         
         return apiServerError.internal(`Contribution failed: ${result.message}`);
       }
diff --git a/src/pages/contribute/knowledgebase.astro b/src/pages/contribute/knowledgebase.astro
index 6f54069..4fd35f6 100644
--- a/src/pages/contribute/knowledgebase.astro
+++ b/src/pages/contribute/knowledgebase.astro
@@ -30,8 +30,8 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
         <form id="kb-form" style="padding: 2rem;">
           <!-- Tool Selection -->
           <div class="form-group">
-            <label for="tool-name" class="form-label required">Related Tool</label>
-            <select id="tool-name" name="toolName" required class="form-input">
+            <label for="tool-name" class="form-label">Related Tool</label>
+            <select id="tool-name" name="toolName" class="form-input">
               <option value="">Select a tool</option>
               {sortedTools.map(tool => (
                 <option value={tool.name}>{tool.name} ({tool.type})</option>
@@ -41,12 +41,11 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
 
           <!-- Article Title -->
           <div class="form-group">
-            <label for="title" class="form-label required">Article Title</label>
+            <label for="title" class="form-label">Article Title</label>
             <input 
               type="text" 
               id="title" 
-              name="title" 
-              required 
+              name="title"  
               maxlength="100"
               placeholder="Clear, descriptive title for your article"
               class="form-input"
@@ -55,11 +54,10 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
 
           <!-- Description -->
           <div class="form-group">
-            <label for="description" class="form-label required">Description</label>
+            <label for="description" class="form-label">Description</label>
             <textarea 
               id="description" 
-              name="description" 
-              required 
+              name="description"  
               maxlength="300"
               rows="3"
               placeholder="Brief summary of what this article covers (20-300 characters)"
@@ -117,8 +115,8 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
 
           <!-- Difficulty Level -->
           <div class="form-group">
-            <label for="difficulty" class="form-label required">Difficulty Level</label>
-            <select id="difficulty" name="difficulty" required class="form-input">
+            <label for="difficulty" class="form-label">Difficulty Level</label>
+            <select id="difficulty" name="difficulty" class="form-input">
               <option value="">Select difficulty</option>
               <option value="novice">Novice - No prior experience needed</option>
               <option value="beginner">Beginner - Basic familiarity helpful</option>
@@ -168,7 +166,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
 
           <!-- Submit Button -->
           <div style="display: flex; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border);">
-            <button type="submit" id="submit-btn" class="btn btn-accent" style="flex: 1;" disabled>
+            <button type="submit" id="submit-btn" class="btn btn-accent" style="flex: 1;">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
               </svg>
@@ -204,85 +202,116 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
 </BaseLayout>
 
 <script>
-  // State management
-  let uploadedFiles: Array<{id: string, file: File, name: string, uploaded: boolean, url?: string}> = [];
-
-  // DOM elements
-  const form = document.getElementById('kb-form') as HTMLFormElement;
-  const submitBtn = document.getElementById('submit-btn') as HTMLButtonElement;
-  const fileInput = document.getElementById('file-input') as HTMLInputElement;
-  const uploadArea = document.getElementById('upload-area') as HTMLElement;
-  const fileList = document.getElementById('file-list') as HTMLElement;
-  const filesContainer = document.getElementById('files-container') as HTMLElement;
-
-  // Form validation
-  function validateForm(): boolean {
-    const toolName = (document.getElementById('tool-name') as HTMLSelectElement).value;
-    const title = (document.getElementById('title') as HTMLInputElement).value;
-    const description = (document.getElementById('description') as HTMLTextAreaElement).value;
-    const content = (document.getElementById('content') as HTMLTextAreaElement).value;
-    const externalLink = (document.getElementById('external-link') as HTMLInputElement).value;
-    const difficulty = (document.getElementById('difficulty') as HTMLSelectElement).value;
-
-    const hasContent = content.trim().length > 0 || uploadedFiles.length > 0 || externalLink.trim().length > 0;
-    
-    return Boolean(toolName) && Boolean(title) && Boolean(description) && Boolean(difficulty) && hasContent;
+  // FIXED: Properly typed interfaces for TypeScript compliance
+  interface UploadedFile {
+    id: string;
+    file: File;
+    name: string;
+    uploaded: boolean;
+    url?: string;
   }
 
-  // Update submit button state
-  function updateSubmitButton() {
-    if (submitBtn) {
-      submitBtn.disabled = !validateForm();
+  // Extend Window interface for global functions
+  declare global {
+    interface Window {
+      removeFile: (fileId: string) => void;
     }
   }
 
-  // File upload handling
-  function setupFileUpload() {
-    if (!fileInput || !uploadArea) return;
+  // FIXED: State management with proper typing
+  let uploadedFiles: UploadedFile[] = [];
 
-    uploadArea.addEventListener('click', () => fileInput.click());
-    
-    uploadArea.addEventListener('dragover', (e) => {
-      e.preventDefault();
-      uploadArea.style.borderColor = 'var(--color-accent)';
+  // FIXED: Properly typed element selection with specific HTML element types
+  const elements = {
+    form: document.getElementById('kb-form') as HTMLFormElement | null,
+    submitBtn: document.getElementById('submit-btn') as HTMLButtonElement | null,
+    fileInput: document.getElementById('file-input') as HTMLInputElement | null,
+    uploadArea: document.getElementById('upload-area') as HTMLElement | null,
+    fileList: document.getElementById('file-list') as HTMLElement | null,
+    filesContainer: document.getElementById('files-container') as HTMLElement | null
+  };
+
+  // Check for critical elements
+  const criticalElements: Array<keyof typeof elements> = ['form', 'submitBtn'];
+  const missingElements = criticalElements.filter(key => !elements[key]);
+  
+  if (missingElements.length > 0) {
+    console.error('[KB FORM ERROR] Missing critical elements:', missingElements);
+  } else {
+    console.log('[KB FORM DEBUG] All critical elements found, initializing form');
+  }
+
+  function validateForm(): boolean {
+    return true; // Always return true - no validation
+  }
+
+  // Update submit button state with null checks
+  function updateSubmitButton(): void {
+    if (elements.submitBtn) {
+      const isValid = validateForm();
+      elements.submitBtn.disabled = !isValid;
+      console.log('[KB FORM DEBUG] Button state:', isValid ? 'enabled' : 'disabled');
+    }
+  }
+
+  // File upload handling with proper null checks
+  function setupFileUpload(): void {
+    if (!elements.fileInput || !elements.uploadArea) return;
+
+    elements.uploadArea.addEventListener('click', () => {
+      if (elements.fileInput) {
+        elements.fileInput.click();
+      }
     });
     
-    uploadArea.addEventListener('dragleave', () => {
-      uploadArea.style.borderColor = 'var(--color-border)';
+    elements.uploadArea.addEventListener('dragover', (e: DragEvent) => {
+      e.preventDefault();
+      if (elements.uploadArea) {
+        elements.uploadArea.style.borderColor = 'var(--color-accent)';
+      }
     });
     
-    uploadArea.addEventListener('drop', (e) => {
+    elements.uploadArea.addEventListener('dragleave', () => {
+      if (elements.uploadArea) {
+        elements.uploadArea.style.borderColor = 'var(--color-border)';
+      }
+    });
+    
+    elements.uploadArea.addEventListener('drop', (e: DragEvent) => {
       e.preventDefault();
-      uploadArea.style.borderColor = 'var(--color-border)';
+      if (elements.uploadArea) {
+        elements.uploadArea.style.borderColor = 'var(--color-border)';
+      }
       if (e.dataTransfer?.files) {
         handleFiles(Array.from(e.dataTransfer.files));
       }
     });
 
-    fileInput.addEventListener('change', (e) => {
+    elements.fileInput.addEventListener('change', (e: Event) => {
       const target = e.target as HTMLInputElement;
-      if (target.files) {
+      if (target?.files) {
         handleFiles(Array.from(target.files));
       }
     });
   }
 
-  function handleFiles(files: File[]) {
+  function handleFiles(files: File[]): void {
     files.forEach(file => {
       const fileId = Date.now() + '-' + Math.random().toString(36).substr(2, 9);
-      uploadedFiles.push({
+      const newFile: UploadedFile = {
         id: fileId,
         file,
         name: file.name,
         uploaded: false
-      });
+      };
+      uploadedFiles.push(newFile);
       uploadFile(fileId);
     });
     renderFileList();
     updateSubmitButton();
   }
 
-  async function uploadFile(fileId: string) {
+  async function uploadFile(fileId: string): Promise<void> {
     const fileItem = uploadedFiles.find(f => f.id === fileId);
     if (!fileItem) return;
 
@@ -310,18 +339,18 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
     }
   }
 
-  function removeFile(fileId: string) {
+  function removeFile(fileId: string): void {
     uploadedFiles = uploadedFiles.filter(f => f.id !== fileId);
     renderFileList();
     updateSubmitButton();
   }
 
-  function renderFileList() {
-    if (!filesContainer || !fileList) return;
+  function renderFileList(): void {
+    if (!elements.filesContainer || !elements.fileList) return;
 
     if (uploadedFiles.length > 0) {
-      fileList.style.display = 'block';
-      filesContainer.innerHTML = uploadedFiles.map(file => `
+      elements.fileList.style.display = 'block';
+      elements.filesContainer.innerHTML = uploadedFiles.map(file => `
         <div class="file-item" style="display: flex; align-items: center; gap: 1rem; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 0.25rem; margin-bottom: 0.5rem;">
           <div style="flex: 1;">
             <strong>${file.name}</strong>
@@ -333,29 +362,32 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
               }
             </div>
           </div>
-          <button type="button" onclick="removeFile('${file.id}')" class="btn btn-small" style="background: var(--color-danger); color: white;">Remove</button>
+          <button type="button" onclick="window.removeFile('${file.id}')" class="btn btn-small" style="background: var(--color-danger); color: white;">Remove</button>
         </div>
       `).join('');
     } else {
-      fileList.style.display = 'none';
+      elements.fileList.style.display = 'none';
     }
   }
 
-  // Form submission
-  async function handleSubmit(e: Event) {
+  async function handleSubmit(e: Event): Promise<void> {
     e.preventDefault();
+    console.log('[KB FORM DEBUG] Form submitted');
     
-    if (!submitBtn || !form || submitBtn.disabled) return;
+    if (!elements.submitBtn || !elements.form) {
+      console.log('[KB FORM DEBUG] Submission blocked - form missing');
+      return;
+    }
     
-    submitBtn.classList.add('loading');
-    submitBtn.innerHTML = '⏳ Submitting...';
+    elements.submitBtn.classList.add('loading');
+    elements.submitBtn.innerHTML = '⏳ Submitting...';
 
     try {
-      const formData = new FormData(form);
+      const formData = new FormData(elements.form);
       
-      // Process categories and tags
-      const categoriesValue = formData.get('categories') as string || '';
-      const tagsValue = formData.get('tags') as string || '';
+      // Process categories and tags with proper null handling
+      const categoriesValue = (formData.get('categories') as string) || '';
+      const tagsValue = (formData.get('tags') as string) || '';
       
       const categories = categoriesValue.split(',').map(s => s.trim()).filter(s => s);
       const tags = tagsValue.split(',').map(s => s.trim()).filter(s => s);
@@ -365,12 +397,15 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
       // Add uploaded files
       formData.set('uploadedFiles', JSON.stringify(uploadedFiles.filter(f => f.uploaded)));
 
+      console.log('[KB FORM DEBUG] Submitting to API...');
       const response = await fetch('/api/contribute/knowledgebase', {
         method: 'POST',
         body: formData
       });
 
+      console.log('[KB FORM DEBUG] Response status:', response.status);
       const result = await response.json();
+      console.log('[KB FORM DEBUG] Response data:', result);
 
       if (result.success) {
         // Show success modal
@@ -389,8 +424,10 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
           successModal.style.display = 'flex';
         }
         
-        // Reset form
-        form.reset();
+        // Reset form with proper typing
+        if (elements.form) {
+          elements.form.reset();
+        }
         uploadedFiles = [];
         renderFileList();
         updateSubmitButton();
@@ -399,14 +436,17 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
       }
 
     } catch (error) {
+      console.error('[KB FORM ERROR] Submission error:', error);
       showMessage('error', 'An error occurred during submission');
     } finally {
-      submitBtn.classList.remove('loading');
-      submitBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/></svg> Submit Article';
+      if (elements.submitBtn) {
+        elements.submitBtn.classList.remove('loading');
+        elements.submitBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/></svg> Submit Article';
+      }
     }
   }
 
-  function showMessage(type: 'success' | 'error' | 'warning', message: string) {
+  function showMessage(type: 'success' | 'error' | 'warning', message: string): void {
     const container = document.getElementById('message-container');
     if (!container) return;
 
@@ -423,57 +463,10 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
     setTimeout(() => messageEl.remove(), 5000);
   }
 
-  // Event listeners
-  if (form) {
-    form.addEventListener('submit', handleSubmit);
-    form.addEventListener('input', updateSubmitButton);
-    form.addEventListener('change', updateSubmitButton);
-  }
-
-  // Make removeFile available globally
-  (window as any).removeFile = removeFile;
+  // Make removeFile available globally with proper typing
+  window.removeFile = removeFile;
 
   // Initialize
   setupFileUpload();
-  updateSubmitButton();
-</script>
-
-<style>
-  .upload-area {
-    border: 2px dashed var(--color-border);
-    border-radius: 0.5rem;
-    padding: 2rem;
-    text-align: center;
-    cursor: pointer;
-    transition: var(--transition-fast);
-  }
-
-  .upload-area:hover {
-    border-color: var(--color-accent);
-    background-color: var(--color-background-secondary);
-  }
-
-  .upload-placeholder svg {
-    color: var(--color-text-tertiary);
-    margin-bottom: 0.5rem;
-  }
-
-  .file-item {
-    animation: fadeIn 0.3s ease;
-  }
-
-  @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(-10px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes slideIn {
-    from { transform: translateX(100%); opacity: 0; }
-    to { transform: translateX(0); opacity: 1; }
-  }
-
-  .btn.loading {
-    opacity: 0.7;
-    pointer-events: none;
-  }
-</style>
\ No newline at end of file
+  console.log('[KB FORM DEBUG] Form initialization complete');
+</script>
\ No newline at end of file
diff --git a/src/pages/contribute/tool.astro b/src/pages/contribute/tool.astro
index 541bbac..9dc4008 100644
--- a/src/pages/contribute/tool.astro
+++ b/src/pages/contribute/tool.astro
@@ -1,18 +1,20 @@
 ---
-// src/pages/contribute/tool.astro
+// src/pages/contribute/tool.astro - COMPLETE REWRITE
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { withAuth } from '../../utils/auth.js';
 import { getToolsData } from '../../utils/dataService.js';
 
+export const prerender = false;
+
 // Check authentication
 const authResult = await withAuth(Astro);
 if (authResult instanceof Response) {
-  return authResult; // Redirect to login
+  return authResult;
 }
 
 const { authenticated, userEmail, userId } = authResult;
 
-// Load existing data for validation and editing
+// Load existing data
 const data = await getToolsData();
 const domains = data.domains;
 const phases = data.phases;
@@ -23,237 +25,52 @@ const existingTools = data.tools;
 const editToolName = Astro.url.searchParams.get('edit');
 const editTool = editToolName ? existingTools.find(tool => tool.name === editToolName) : null;
 const isEdit = !!editTool;
-
-const title = isEdit ? `Edit ${editTool?.name}` : 'Beitrag erstellen';
 ---
 
-<BaseLayout title={title} description="Contribute tools, methods, and concepts to the CC24-Guide database">
-  <section style="padding: 2rem 0;">
+<BaseLayout title={isEdit ? `Edit ${editTool?.name}` : 'Contribute Tool'}>
+  <div class="container" style="max-width: 900px; margin: 0 auto; padding: 2rem 1rem;">
+    
     <!-- Header -->
-    <div style="text-align: center; margin-bottom: 2rem; padding: 2rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: white; border-radius: 1rem; border: 1px solid var(--color-border);">
-      <h1 style="margin-bottom: 1rem; font-size: 2rem;">
-        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.75rem; vertical-align: middle;">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-          <polyline points="14 2 14 8 20 8"/>
-          <line x1="16" y1="13" x2="8" y2="13"/>
-          <line x1="16" y1="17" x2="8" y2="17"/>
-          <polyline points="10 9 9 9 8 9"/>
-        </svg>
-        {isEdit ? `Eintrag editieren: ${editTool?.name}` : 'Beitragen - Formular'}
-      </h1>
-      <p style="margin: 0; opacity: 0.9; line-height: 1.5;">
+    <div style="text-align: center; margin-bottom: 2rem; padding: 2rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: white; border-radius: 1rem;">
+      <h1 style="margin-bottom: 1rem; font-size: 2rem;">{isEdit ? `Edit: ${editTool?.name}` : 'Contribute New Tool/Method/Concept'}</h1>
+      <p style="margin: 0.5rem 0; opacity: 0.9;">
         {isEdit 
-          ? 'Überarbeitet die Informationen zu diesem Tool, Methode oder Konzept. Deine Änderungen werden als Pull-Request eingereicht.'
-          : 'Erstellt ein neues Tool, Methode, oder Konzept in der CC24-Guide Datenbank. Dein Beitrag wird als Pull-Request eingereicht.'
+          ? 'Update the information for this tool. Your changes will be submitted as a pull request.'
+          : 'Add a new tool, method, or concept to the database. Your contribution will be submitted as a pull request.'
         }
       </p>
+      {userEmail && <p style="margin: 0.5rem 0; opacity: 0.8;"><strong>Submitting as:</strong> {userEmail}</p>}
     </div>
 
-    <!-- Form Container -->
-    <div style="max-width: 800px; margin: 0 auto;">
-      <div class="card" style="padding: 2rem;">
-        <form id="contribution-form" style="display: flex; flex-direction: column; gap: 1.5rem;">
+    <!-- Validation Error Display -->
+    <div id="validation-errors" class="card" style="display: none; background-color: var(--color-error); color: white; margin-bottom: 2rem;">
+      <h3 style="margin: 0 0 1rem 0;">⚠️ Please fix the following issues:</h3>
+      <ul id="error-list" style="margin: 0; padding-left: 1.5rem;"></ul>
+    </div>
+
+    <!-- Main Form -->
+    <div class="card">
+      <form id="contribution-form" novalidate style="padding: 2rem;">
+        
+        <!-- Basic Information -->
+        <div style="border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 2rem;">
+          <h3 style="margin: 0 0 1.5rem 0; color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem;">Basic Information</h3>
           
-          <!-- Tool Type Selection -->
-          <div>
-            <label for="tool-type" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-              Beitragstyp <span style="color: var(--color-error);">*</span>
-            </label>
-            <select id="tool-type" name="type" required style="max-width: 300px;">
-              <option value="">Auswählen...</option>
-              <option value="software" selected={editTool?.type === 'software'}>Software</option>
-              <option value="method" selected={editTool?.type === 'method'}>Methode</option>
-              <option value="concept" selected={editTool?.type === 'concept'}>Konzept</option>
-            </select>
-            <div class="field-help" style="font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: 0.25rem;">
-              Software: Anwendungen und Tools • Methode: Prozeduren und Workflows • Konzept: Gruundlagenwissen
-            </div>
-          </div>
-
-          <!-- Basic Information -->
-          <div style="display: flex; flex-direction: column; gap: 1.5rem;">
-            <!-- Tool Name -->
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
             <div>
-              <label for="tool-name" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-                Name <span style="color: var(--color-error);">*</span>
-              </label>
-              <input type="text" id="tool-name" name="name" required maxlength="100"
-                     value={editTool?.name || ''} 
-                     placeholder="z.B., Autopsy, Live Response im Active Directory, Regular Expressions" />
-              <div id="name-error" class="field-error" style="display: none;"></div>
+              <label for="type" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Type <span style="color: var(--color-error);">*</span></label>
+              <select id="type" name="type" required>
+                <option value="">Select type...</option>
+                <option value="software" selected={editTool?.type === 'software'}>Software/Tool</option>
+                <option value="method" selected={editTool?.type === 'method'}>Method/Process</option>
+                <option value="concept" selected={editTool?.type === 'concept'}>Concept/Knowledge</option>
+              </select>
             </div>
-
-            <!-- Icon (Emoji) -->
+            
             <div>
-              <label for="tool-icon" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-                Icon (Emoji)
-              </label>
-              <input type="text" id="tool-icon" name="icon" maxlength="10"
-                     value={editTool?.icon || ''}
-                     placeholder="📦 🔧 📋 (optional, single emoji recommended)" />
-              <div class="field-help">
-                Wählt ein Emoji, das euer Tool/Methode/Konzept repräsentiert. Kann auch freigelassen werden.
-              </div>
-            </div>
-          </div>
-
-          <!-- Description -->
-          <div>
-            <label for="tool-description" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-              Beschreibung <span style="color: var(--color-error);">*</span>
-            </label>
-            <textarea id="tool-description" name="description" required 
-                      rows="4" minlength="10" maxlength="1000"
-                      placeholder="Schreibt eine klare, kurze Beschreibung (2-5 Sätze) mit dem, was euer Tool/Methode/Konzept macht.">{editTool?.description || ''}</textarea>
-            <div style="display: flex; justify-content: space-between; margin-top: 0.25rem;">
-              <div class="field-help">Seid spezifisch hinsichtlich use-case, Funktionalität und Schlüsselfeatures.</div>
-              <div id="description-count" style="font-size: 0.75rem; color: var(--color-text-secondary);">0/1000</div>
-            </div>
-            <div id="description-error" class="field-error" style="display: none;"></div>
-          </div>
-
-          <!-- URLs -->
-          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
-            <!-- Main URL -->
-            <div>
-              <label for="tool-url" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-                Hauptlink <span style="color: var(--color-error);">*</span>
-              </label>
-              <input type="url" id="tool-url" name="url" required
-                     value={editTool?.url || ''}
-                     placeholder="https://example.com" />
-              <div class="field-help">Homepage, Dokumentation, oder Primärquelle</div>
-              <div id="url-error" class="field-error" style="display: none;"></div>
-            </div>
-
-          </div>
-
-          <!-- Categories -->
-          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem;">
-            <!-- Domains -->
-            <div>
-              <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-                Forensische Domänen
-              </label>
-              <div id="tool-domains" style="display: grid; gap: 0.25rem; font-size: 0.875rem;">
-                {domains.map(domain => (
-                  <label class="checkbox-wrapper">
-                    <input type="checkbox" name="domains" value={domain.id} 
-                          checked={editTool?.domains?.includes(domain.id)} />
-                    <span>{domain.name}</span>
-                  </label>
-                ))}
-              </div>
-              <div class="field-help">Mehrfachauswahl erlaubt</div>
-            </div>
-
-            <!-- Phases -->
-            <div>
-              <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-                Ermittlungsphasen
-              </label>
-              <div id="tool-phases" style="display: grid; gap: 0.25rem; font-size: 0.875rem;">
-                {phases.map(phase => (
-                  <label class="checkbox-wrapper">
-                    <input type="checkbox" name="phases" value={phase.id} 
-                          checked={editTool?.phases?.includes(phase.id)} />
-                    <span>{phase.name}</span>
-                  </label>
-                ))}
-              </div>
-              <div class="field-help">Mehrfachauswahl erlaubt</div>
-            </div>
-          </div>
-
-          <!-- Software-Specific Fields -->
-          <div id="software-fields" style="display: none;">
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
-              <!-- Platforms -->
-              <div>
-                <label for="tool-platforms" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-                  Plattformen <span id="platforms-required" style="color: var(--color-error);">*</span>
-                </label>
-                <div id="platforms-checkboxes" style="display: grid; gap: 0.25rem; font-size: 0.875rem;">
-                  {['Windows', 'macOS', 'Linux', 'Web', 'Mobile', 'Cross-platform'].map(platform => (
-                    <label class="checkbox-wrapper" style="margin-bottom: 0.25rem;">
-                      <input type="checkbox" name="platforms" value={platform} 
-                             checked={editTool?.platforms?.includes(platform)} />
-                      <span>{platform}</span>
-                    </label>
-                  ))}
-                </div>
-                <div id="platforms-error" class="field-error" style="display: none;"></div>
-              </div>
-
-              <!-- License -->
-              <div>
-                <label for="tool-license" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-                  License <span id="license-required" style="color: var(--color-error);">*</span>
-                </label>
-                <input type="text" id="tool-license" name="license" list="license-options"
-                       value={editTool?.license || ''}
-                       placeholder="e.g., MIT, Apache 2.0, GPL v3, Proprietary" />
-                <datalist id="license-options">
-                  <option value="MIT" />
-                  <option value="Apache 2.0" />
-                  <option value="GPL v3" />
-                  <option value="GPL v2" />
-                  <option value="LGPL-3.0" />
-                  <option value="LGPL-2.1" />
-                  <option value="BSD-3-Clause" />
-                  <option value="BSD-2-Clause" />
-                  <option value="ISC" />
-                  <option value="Mozilla Public License 2.0" />
-                  <option value="Open Source" />
-                  <option value="Proprietary" />
-                  <option value="Freeware" />
-                  <option value="Commercial" />
-                  <option value="Dual License" />
-                </datalist>
-                <div class="field-help">Type any license or select from suggestions</div>
-              </div>
-
-              <!-- Access Type -->
-              <div style="grid-column: 1 / -1;">
-                <label for="access-type" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-                  Access Type
-                </label>
-                <select id="access-type" name="accessType">
-                  <option value="">Select access type...</option>
-                  <option value="download" selected={editTool?.accessType === 'download'}>Download</option>
-                  <option value="web" selected={editTool?.accessType === 'web'}>Web Application</option>
-                  <option value="api" selected={editTool?.accessType === 'api'}>API</option>
-                  <option value="cli" selected={editTool?.accessType === 'cli'}>Command Line</option>
-                  <option value="service" selected={editTool?.accessType === 'service'}>Service</option>
-                </select>
-              </div>
-
-
-              <!-- Domain-Agnostic Categories -->
-              <div style="grid-column: 1 / -1;" id="domain-agnostic-field">
-                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-                  Domain-Agnostic Categories
-                </label>
-                <div id="domain-agnostic-checkboxes" style="display: grid; gap: 0.25rem; font-size: 0.875rem;">
-                  {domainAgnosticSoftware.map(cat => (
-                    <label class="checkbox-wrapper" style="margin-bottom: 0.25rem;">
-                      <input type="checkbox" name="domainAgnostic" value={cat.id} checked={editTool?.['domain-agnostic-software']?.includes(cat.id)} />
-                      <span>{cat.name}</span>
-                    </label>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Skill Level and Additional Options -->
-          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
-            <div>
-              <label for="skill-level" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-                Skill Level <span style="color: var(--color-error);">*</span>
-              </label>
-              <select id="skill-level" name="skillLevel" required>
-                <option value="">Select skill level...</option>
+              <label for="skillLevel" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Skill Level <span style="color: var(--color-error);">*</span></label>
+              <select id="skillLevel" name="skillLevel" required>
+                <option value="">Select level...</option>
                 <option value="novice" selected={editTool?.skillLevel === 'novice'}>Novice</option>
                 <option value="beginner" selected={editTool?.skillLevel === 'beginner'}>Beginner</option>
                 <option value="intermediate" selected={editTool?.skillLevel === 'intermediate'}>Intermediate</option>
@@ -261,536 +78,674 @@ const title = isEdit ? `Edit ${editTool?.name}` : 'Beitrag erstellen';
                 <option value="expert" selected={editTool?.skillLevel === 'expert'}>Expert</option>
               </select>
             </div>
+          </div>
 
+          <div style="margin-bottom: 1.5rem;">
+            <label for="name" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Name <span style="color: var(--color-error);">*</span></label>
+            <input type="text" id="name" name="name" value={editTool?.name || ''} 
+                   placeholder="Tool/Method/Concept name" maxlength="100" required />
+          </div>
+
+          <div style="margin-bottom: 1.5rem;">
+            <label for="icon" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Icon (Emoji)</label>
+            <input type="text" id="icon" name="icon" value={editTool?.icon || ''} 
+                   placeholder="📦 (optional)" maxlength="10" />
+          </div>
+
+          <div style="margin-bottom: 1.5rem;">
+            <label for="description" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Description <span style="color: var(--color-error);">*</span></label>
+            <textarea id="description" name="description" rows="4" maxlength="1000" required
+                      placeholder="Clear, concise description of what this tool/method/concept does and its purpose">{editTool?.description || ''}</textarea>
+            <div style="text-align: right; font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 0.25rem;">
+              <span id="description-count">0</span>/1000
+            </div>
+          </div>
+
+          <div style="margin-bottom: 1.5rem;">
+            <label for="url" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Primary URL <span style="color: var(--color-error);">*</span></label>
+            <input type="url" id="url" name="url" value={editTool?.url || ''} 
+                   placeholder="https://example.com" required />
+            <small style="display: block; margin-top: 0.25rem; color: var(--color-text-secondary); font-size: 0.8125rem;">Homepage, documentation, or primary source</small>
+          </div>
+        </div>
+
+        <!-- Categories -->
+        <div style="border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 2rem;">
+          <h3 style="margin: 0 0 1.5rem 0; color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem;">Categories</h3>
+          
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
             <div>
-              <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-                Additional Options
-              </label>
-              <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-                <label class="checkbox-wrapper">
-                  <input type="checkbox" id="has-knowledgebase" name="knowledgebase" 
-                         checked={editTool?.knowledgebase} />
-                  <span>Has knowledgebase article</span>
-                </label>
+              <label style="display: block; margin-bottom: 0.75rem; font-weight: 600;">Forensic Domains</label>
+              <div style="display: grid; gap: 0.5rem;">
+                {domains.map(domain => (
+                  <label class="checkbox-wrapper">
+                    <input type="checkbox" name="domains" value={domain.id} 
+                           checked={editTool?.domains?.includes(domain.id)} />
+                    <span>{domain.name}</span>
+                  </label>
+                ))}
+              </div>
+            </div>
+            
+            <div>
+              <label style="display: block; margin-bottom: 0.75rem; font-weight: 600;">Investigation Phases</label>
+              <div style="display: grid; gap: 0.5rem;">
+                {phases.map(phase => (
+                  <label class="checkbox-wrapper">
+                    <input type="checkbox" name="phases" value={phase.id} 
+                           checked={editTool?.phases?.includes(phase.id)} />
+                    <span>{phase.name}</span>
+                  </label>
+                ))}
               </div>
             </div>
           </div>
+        </div>
 
-          <!-- Tags -->
-          <div>
-            <label for="tool-tags" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-              Tags
-            </label>
-            <input type="text" id="tool-tags" name="tags" 
-                   value={editTool?.tags?.join(', ') || ''}
-                   placeholder="gui, forensics, network-analysis, mobile (comma-separated)" />
-            <div class="field-help">
-              Add relevant tags separated by commas. Use lowercase with hyphens for multi-word tags.
+        <!-- Software-Specific Fields -->
+        <div id="software-fields" style="border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 2rem; display: none;">
+          <h3 style="margin: 0 0 1.5rem 0; color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem;">Software Details</h3>
+          
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1.5rem;">
+            <div>
+              <label style="display: block; margin-bottom: 0.75rem; font-weight: 600;">Platforms <span id="platforms-required" style="color: var(--color-error);">*</span></label>
+              <div style="display: grid; gap: 0.5rem;">
+                {['Windows', 'macOS', 'Linux', 'Web', 'Mobile', 'Cross-platform'].map(platform => (
+                  <label class="checkbox-wrapper">
+                    <input type="checkbox" name="platforms" value={platform} 
+                           checked={editTool?.platforms?.includes(platform)} />
+                    <span>{platform}</span>
+                  </label>
+                ))}
+              </div>
+            </div>
+            
+            <div>
+              <label for="license" style="display: block; margin-bottom: 0.75rem; font-weight: 600;">License <span id="license-required" style="color: var(--color-error);">*</span></label>
+              <input type="text" id="license" name="license" value={editTool?.license || ''} 
+                     placeholder="MIT, Apache 2.0, GPL v3, Proprietary" list="license-options" />
+              <datalist id="license-options">
+                <option value="MIT" />
+                <option value="Apache 2.0" />
+                <option value="GPL v3" />
+                <option value="BSD-3-Clause" />
+                <option value="Proprietary" />
+                <option value="Open Source" />
+              </datalist>
             </div>
           </div>
 
-          <!-- Related Concepts -->
-          <div id="related-concepts-field" style="display: none;">
-            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-              Related Concepts
-            </label>
-            <div id="related-concepts" style="display: grid; gap: 0.25rem; font-size: 0.875rem;">
-              {existingTools.filter(tool => tool.type === 'concept').map(concept => (
-                <label class="checkbox-wrapper">
-                  <input type="checkbox" name="relatedConcepts" value={concept.name} 
-                        checked={editTool?.related_concepts?.includes(concept.name)} />
-                  <span>{concept.name}</span>
-                </label>
-              ))}
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+            <div>
+              <label for="accessType" style="display: block; margin-bottom: 0.75rem; font-weight: 600;">Access Type</label>
+              <select id="accessType" name="accessType">
+                <option value="">Select access type...</option>
+                <option value="download" selected={editTool?.accessType === 'download'}>Download</option>
+                <option value="web" selected={editTool?.accessType === 'web'}>Web Application</option>
+                <option value="api" selected={editTool?.accessType === 'api'}>API</option>
+                <option value="cli" selected={editTool?.accessType === 'cli'}>Command Line</option>
+                <option value="service" selected={editTool?.accessType === 'service'}>Service</option>
+              </select>
             </div>
-            <div class="field-help">
-              Wählt Konzepte, die hilfreich sind für das Verständnis dieses Tools oder dieser Methode
+            
+            <div>
+              <label style="display: block; margin-bottom: 0.75rem; font-weight: 600;">Domain-Agnostic Categories</label>
+              <div style="display: grid; gap: 0.5rem;">
+                {domainAgnosticSoftware.map(cat => (
+                  <label class="checkbox-wrapper">
+                    <input type="checkbox" name="domainAgnostic" value={cat.id} 
+                           checked={editTool?.['domain-agnostic-software']?.includes(cat.id)} />
+                    <span>{cat.name}</span>
+                  </label>
+                ))}
+              </div>
             </div>
           </div>
         </div>
 
-          <!-- Contribution Reason -->
-          <div>
-            <label for="contribution-reason" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
-              Reason for Contribution (Optional)
+        <!-- Related Concepts -->
+        <div id="concepts-fields" style="border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 2rem; display: none;">
+          <h3 style="margin: 0 0 1.5rem 0; color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem;">Related Concepts</h3>
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem;">
+            {existingTools.filter(tool => tool.type === 'concept').map(concept => (
+              <label class="checkbox-wrapper">
+                <input type="checkbox" name="relatedConcepts" value={concept.name} 
+                       checked={editTool?.related_concepts?.includes(concept.name)} />
+                <span>{concept.name}</span>
+              </label>
+            ))}
+          </div>
+        </div>
+
+        <!-- Additional Information -->
+        <div style="border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 2rem;">
+          <h3 style="margin: 0 0 1.5rem 0; color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem;">Additional Information</h3>
+          
+          <div style="margin-bottom: 1.5rem;">
+            <label for="tags" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Tags</label>
+            <input type="text" id="tags" name="tags" value={editTool?.tags?.join(', ') || ''} 
+                   placeholder="gui, forensics, network-analysis (comma-separated)" />
+          </div>
+
+          <div style="margin-bottom: 1.5rem;">
+            <label class="checkbox-wrapper">
+              <input type="checkbox" id="knowledgebase" name="knowledgebase" 
+                     checked={editTool?.knowledgebase} />
+              <span>Has knowledgebase article</span>
             </label>
-            <textarea id="contribution-reason" name="reason" 
-                      rows="2" maxlength="500"
-                      placeholder="Why are you adding/updating this tool? Any additional context for reviewers..."></textarea>
-            <div style="display: flex; justify-content: space-between; margin-top: 0.25rem;">
-              <div class="field-help">Help reviewers understand your contribution</div>
-              <div id="reason-count" style="font-size: 0.75rem; color: var(--color-text-secondary);">0/500</div>
-            </div>
           </div>
 
-          <!-- YAML Preview -->
           <div>
-            <div style="display: flex; justify-content: between; align-items: center; margin-bottom: 0.5rem;">
-              <label style="font-weight: 600;">YAML Preview</label>
+            <label for="reason" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Reason for Contribution (Optional)</label>
+            <textarea id="reason" name="reason" rows="3" maxlength="500"
+                      placeholder="Why are you adding/updating this? Any context for reviewers..."></textarea>
+            <div style="text-align: right; font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 0.25rem;">
+              <span id="reason-count">0</span>/500
             </div>
-            <pre id="yaml-preview" style="background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 0.375rem; padding: 1rem; font-size: 0.8125rem; overflow-x: auto; max-height: 300px;">
-# YAML preview will appear here
-            </pre>
           </div>
+        </div>
 
-          <!-- Submit Buttons -->
-          <div style="display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1rem;">
-            <a href="/" class="btn btn-secondary">Cancel</a>
-            <button type="submit" id="submit-btn" class="btn btn-primary">
-              <span id="submit-text">{isEdit ? 'Update Tool' : 'Submit Contribution'}</span>
-              <svg id="submit-spinner" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none; margin-left: 0.5rem; animation: pulse 2s ease-in-out infinite;">
-                <path d="M21 12a9 9 0 0 0-9-9 7 7 0 0 0-7 7"/>
-              </svg>
-            </button>
+        <!-- YAML Preview -->
+        <div style="border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 2rem;">
+          <h3 style="margin: 0 0 1.5rem 0; color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem;">Preview</h3>
+          <div style="border: 1px solid var(--color-border); border-radius: 0.375rem; overflow: hidden;">
+            <pre id="yaml-preview" style="background: var(--color-bg-secondary); color: var(--color-text); padding: 1rem; margin: 0; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.8125rem; line-height: 1.4; overflow-x: auto; max-height: 300px;"># YAML preview will appear here</pre>
           </div>
-        </form>
-      </div>
+        </div>
+
+        <!-- Submit -->
+        <div style="display: flex; gap: 1rem; justify-content: flex-end; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border);">
+          <a href="/" class="btn btn-secondary">Cancel</a>
+          <button type="submit" id="submit-btn" class="btn btn-primary">
+            <span id="submit-text">{isEdit ? 'Update Tool' : 'Submit Contribution'}</span>
+            <span id="submit-spinner" style="display: none; margin-left: 0.5rem;">⏳</span>
+          </button>
+        </div>
+      </form>
     </div>
 
     <!-- Success Modal -->
-    <div id="success-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
-      <div class="card" style="max-width: 500px; width: 90%; margin: 2rem;">
-        <div style="text-align: center;">
-          <div style="background-color: var(--color-accent); color: white; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;">
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="20,6 9,17 4,12"/>
-            </svg>
-          </div>
-          <h3 style="margin-bottom: 1rem;">Contribution Submitted!</h3>
-          <p id="success-message" style="margin-bottom: 1.5rem; line-height: 1.5;"></p>
-          <div style="display: flex; gap: 1rem; justify-content: center;">
-            <a id="pr-link" href="#" target="_blank" class="btn btn-primary" style="display: none;">View Pull Request</a>
-            <a href="/" class="btn btn-secondary">Back to Home</a>
-          </div>
+    <div id="success-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; align-items: center; justify-content: center;">
+      <div class="card" style="max-width: 500px; width: 90%; margin: 2rem; text-align: center;">
+        <div style="font-size: 3rem; margin-bottom: 1rem;">✅</div>
+        <h3 style="margin-bottom: 1rem;">Contribution Submitted!</h3>
+        <p id="success-message" style="margin-bottom: 1.5rem;">Your contribution has been submitted successfully.</p>
+        <div style="display: flex; gap: 1rem; justify-content: center;">
+          <a id="pr-link" href="#" target="_blank" class="btn btn-primary" style="display: none;">View Pull Request</a>
+          <a href="/" class="btn btn-secondary">Back to Home</a>
         </div>
       </div>
     </div>
-  </section>
+  </div>
 </BaseLayout>
 
-<style>
-  .field-error {
-    color: var(--color-error);
-    font-size: 0.8125rem;
-    margin-top: 0.25rem;
+<script define:vars={{ isEdit, editTool, domains, phases, domainAgnosticSoftware }}>
+// FIXED: Prevent duplicate form submissions
+console.log('[FORM] Script loaded, initializing...');
+
+class ContributionForm {
+  constructor() {
+    this.isEdit = isEdit;
+    this.editTool = editTool;
+    this.elements = {};
+    this.isSubmitting = false; // NEW: Prevent concurrent submissions
+    this.init();
   }
 
-  .field-help {
-    font-size: 0.8125rem;
-    color: var(--color-text-secondary);
-  }
-
-  input:invalid, textarea:invalid, select:invalid {
-    border-color: var(--color-error);
-  }
-
-  input:valid, textarea:valid, select:valid {
-    border-color: var(--color-accent);
-  }
-
-  #yaml-preview {
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    line-height: 1.4;
-    white-space: pre-wrap;
-    word-break: break-all;
-  }
-
-  select[multiple] {
-    min-height: auto;
-  }
-
-  /* Responsive adjustments */
-  @media (width <= 768px) {
-    div[style*="grid-template-columns: 1fr 1fr"] {
-      grid-template-columns: 1fr !important;
-    }
-  }
-</style>
-
-<script define:vars={{ 
-  isEdit, 
-  editTool: editTool || null, 
-  domains, 
-  phases, 
-  domainAgnosticSoftware,
-  existingConcepts: existingTools.filter(t => t.type === 'concept')
-}}>
-
-document.addEventListener('DOMContentLoaded', () => {
-  const form = document.getElementById('contribution-form');
-  if (!form) console.error('[INIT ERROR] Form not found');
-  const typeSelect = document.getElementById('tool-type');
-  const submitBtn = document.getElementById('submit-btn');
-  const submitText = document.getElementById('submit-text');
-  const submitSpinner = document.getElementById('submit-spinner');
-  const yamlPreview = document.getElementById('yaml-preview');
-  const refreshPreviewBtn = document.getElementById('refresh-preview');
-  const successModal = document.getElementById('success-modal');
-
-  // Form elements
-  const nameInput = document.getElementById('tool-name');
-  const descriptionTextarea = document.getElementById('tool-description');
-  const reasonTextarea = document.getElementById('contribution-reason');
-  
-  // Field groups
-  const softwareFields = document.getElementById('software-fields');
-  const domainAgnosticField = document.getElementById('domain-agnostic-field');
-  const relatedConceptsField = document.getElementById('related-concepts-field');
-  
-  // Required indicators
-  const platformsRequired = document.getElementById('platforms-required');
-  const licenseRequired = document.getElementById('license-required');
-
-  // Update character counters
-  function updateCharacterCounter(textarea, countElement, maxLength) {
-    const count = textarea.value.length;
-    countElement.textContent = `${count}/${maxLength}`;
-    countElement.style.color = count > maxLength * 0.9 ? 'var(--color-warning)' : 'var(--color-text-secondary)';
-  }
-
-  // Set up character counters
-  const descriptionCount = document.getElementById('description-count');
-  const reasonCount = document.getElementById('reason-count');
-  
-  if (descriptionTextarea && descriptionCount) {
-    descriptionTextarea.addEventListener('input', () => updateCharacterCounter(descriptionTextarea, descriptionCount, 1000));
-    updateCharacterCounter(descriptionTextarea, descriptionCount, 1000);
-  }
-  
-  if (reasonTextarea && reasonCount) {
-    reasonTextarea.addEventListener('input', () => updateCharacterCounter(reasonTextarea, reasonCount, 500));
-    updateCharacterCounter(reasonTextarea, reasonCount, 500);
-  }
-
-  // Handle type-specific field visibility
-  function updateFieldVisibility() {
-    const selectedType = typeSelect.value;
+  init() {
+    console.log('[FORM] Starting initialization...');
     
-    // Hide all type-specific fields
-    if (softwareFields) softwareFields.style.display = 'none';
-    if (relatedConceptsField) relatedConceptsField.style.display = 'none';
-    
-    
-    // Handle required fields
-    const platformsCheckboxes = document.querySelectorAll('input[name="platforms"]');
-    const licenseSelect = document.getElementById('tool-license');
-    
-    if (selectedType === 'software') {
-      // Show software-specific fields
-      if (softwareFields) softwareFields.style.display = 'block';
-      if (relatedConceptsField) relatedConceptsField.style.display = 'block';
-      
-      // Make platforms and license required
-      if (platformsRequired) platformsRequired.style.display = 'inline';
-      if (licenseRequired) licenseRequired.style.display = 'inline';
-      if (platformsCheckboxes.length > 0) {
-        platformsCheckboxes.forEach(cb => cb.removeAttribute('required'));
-        platformsCheckboxes[0].setAttribute('required', 'required');
-      }
-      if (licenseSelect) licenseSelect.setAttribute('required', 'required');
+    // Get all form elements
+    this.elements = {
+      form: document.getElementById('contribution-form'),
+      submitBtn: document.getElementById('submit-btn'),
+      submitText: document.getElementById('submit-text'),
+      submitSpinner: document.getElementById('submit-spinner'),
+      typeSelect: document.getElementById('type'),
+      nameInput: document.getElementById('name'),
+      descriptionTextarea: document.getElementById('description'),
+      reasonTextarea: document.getElementById('reason'),
+      skillLevelSelect: document.getElementById('skillLevel'),
+      urlInput: document.getElementById('url'),
+      yamlPreview: document.getElementById('yaml-preview'),
+      successModal: document.getElementById('success-modal'),
+      softwareFields: document.getElementById('software-fields'),
+      conceptsFields: document.getElementById('concepts-fields'),
+      descriptionCount: document.getElementById('description-count'),
+      reasonCount: document.getElementById('reason-count'),
+      validationErrors: document.getElementById('validation-errors'),
+      errorList: document.getElementById('error-list'),
+      platformsRequired: document.getElementById('platforms-required'),
+      licenseRequired: document.getElementById('license-required'),
+      licenseInput: document.getElementById('license')
+    };
 
-      if (domainAgnosticField) domainAgnosticField.style.display = 'block';
-      
-    } else {
-      // Hide required indicators and remove requirements
-      if (platformsRequired) platformsRequired.style.display = 'none';
-      if (licenseRequired) licenseRequired.style.display = 'none';
-      platformsCheckboxes.forEach(cb => cb.removeAttribute('required'));
-      if (licenseSelect) licenseSelect.removeAttribute('required');
-
-      if (domainAgnosticField) domainAgnosticField.style.display = 'none';
-
-      // Show related concepts for methods
-      if (selectedType === 'method' && relatedConceptsField) {
-        relatedConceptsField.style.display = 'block';
-      }
-    }
-    
-    // Update YAML preview
-    if (typeof updateYAMLPreview === 'function') {
-      updateYAMLPreview();
-    }
-  }
-
-  // Generate YAML preview
-  function updateYAMLPreview() {
-    if (!yamlPreview) return;
-    
-    try {
-      const formData = new FormData(form);
-      const toolData = {
-        name: formData.get('name') || '',
-        icon: formData.get('icon') || null,
-        type: formData.get('type') || '',
-        description: formData.get('description') || '',
-        domains: formData.getAll('domains') || [],
-        phases: formData.getAll('phases') || [],
-        skillLevel: formData.get('skillLevel') || '',
-        url: formData.get('url') || ''
-      };
-
-      // Add type-specific fields
-      if (toolData.type === 'software') {
-        toolData.platforms = formData.getAll('platforms') || [];
-        toolData.license = formData.get('license')?.trim() || null;
-        toolData.accessType = formData.get('accessType') || null;
-        toolData['domain-agnostic-software'] = formData.getAll('domainAgnostic') || [];
-      } else {
-        toolData.platforms = [];
-        toolData.license = null;
-        toolData.accessType = null;
-      }
-
-      // Add optional fields
-      toolData.knowledgebase = formData.has('knowledgebase') || null;
-      
-      // Handle tags
-      const tagsValue = formData.get('tags');
-      toolData.tags = tagsValue ? tagsValue.split(',').map(tag => tag.trim()).filter(Boolean) : [];
-      
-      // Handle related concepts
-      if (toolData.type !== 'concept') {
-        const relatedConcepts = formData.getAll('relatedConcepts');
-        toolData.related_concepts = relatedConcepts.length > 0 ? relatedConcepts : null;
-      }
-
-      // Generate YAML
-      yamlPreview.textContent = `name: "${toolData.name}"
-${toolData.icon ? `icon: "${toolData.icon}"` : '# icon: "📦"'}
-type: ${toolData.type}
-description: "${toolData.description}"
-domains: [${toolData.domains.map(d => `"${d}"`).join(', ')}]
-phases: [${toolData.phases.map(p => `"${p}"`).join(', ')}]
-skillLevel: ${toolData.skillLevel}
-url: "${toolData.url}"${toolData.platforms.length > 0 ? `
-platforms: [${toolData.platforms.map(p => `"${p}"`).join(', ')}]` : ''}${toolData.license ? `
-license: "${toolData.license}"` : ''}${toolData.accessType ? `
-accessType: ${toolData.accessType}` : ''}${toolData['domain-agnostic-software'] && toolData['domain-agnostic-software'].length > 0 ? `
-domain-agnostic-software: [${toolData['domain-agnostic-software'].map(c => `"${c}"`).join(', ')}]` : ''}${toolData.knowledgebase ? `
-knowledgebase: true` : ''}${toolData.tags.length > 0 ? `
-tags: [${toolData.tags.map(t => `"${t}"`).join(', ')}]` : ''}${toolData.related_concepts ? `
-related_concepts: [${toolData.related_concepts.map(c => `"${c}"`).join(', ')}]` : ''}`;
-
-    } catch (error) {
-      yamlPreview.textContent = '# Error generating preview';
-      console.error('YAML preview error:', error);
-    }
-  }
-
-  // Form validation
-  function validateForm() {
-    const errors = [];
-    const formData = new FormData(form);
-    const selectedType = typeSelect.value;
-    
-    // Basic validation
-    if (!formData.get('name')?.trim()) {
-      errors.push('Tool name is required');
-    }
-    
-    if (!formData.get('description')?.trim()) {
-      errors.push('Description is required');
-    }
-    
-    if (!formData.get('url')?.trim()) {
-      errors.push('URL is required');
-    }
-    
-    if (!formData.get('skillLevel')) {
-      errors.push('Skill level is required');
-    }
-    
-    // Type-specific validation
-    if (selectedType === 'software') {
-      const platforms = formData.getAll('platforms');
-      if (platforms.length === 0) {
-        errors.push('At least one platform is required for software');
-      }
-      
-      if (!document.getElementById('tool-license')?.value?.trim()) {
-        errors.push('License is required for software');
-      }
+    // Verify critical elements
+    if (!this.elements.form || !this.elements.submitBtn) {
+      console.error('[FORM] Critical elements missing!');
+      return;
     }
 
-    return errors;
+    // FIXED: Check if already initialized
+    if (this.elements.form.hasAttribute('data-form-initialized')) {
+      console.log('[FORM] Form already initialized, skipping...');
+      return;
+    }
+
+    // Mark as initialized
+    this.elements.form.setAttribute('data-form-initialized', 'true');
+
+    console.log('[FORM] Setting up handlers...');
+    this.setupEventListeners();
+    this.updateFieldVisibility();
+    this.setupCharacterCounters();
+    this.updateYAMLPreview();
+
+    console.log('[FORM] Initialization complete!');
   }
 
-  // Event listeners
-  if (typeSelect) {
-    typeSelect.addEventListener('change', updateFieldVisibility);
-  }
-  
-  // Update preview on form changes
-  if (form) {
-    form.addEventListener('input', debounce(updateYAMLPreview, 500));
-    form.addEventListener('change', updateYAMLPreview);
-  }
+  setupEventListeners() {
+    // Type change handler
+    this.elements.typeSelect.addEventListener('change', () => {
+      this.updateFieldVisibility();
+      this.updateYAMLPreview();
+    });
 
-  // Form submission
-  if (form) {
-    form?.addEventListener('submit', async (e) => {
+    // Form input handlers
+    this.elements.form.addEventListener('input', () => {
+      this.debounce(() => this.updateYAMLPreview(), 300);
+    });
+
+    this.elements.form.addEventListener('change', () => {
+      this.updateYAMLPreview();
+    });
+
+    // FIXED: Single submit handler with double-submission prevention
+    this.elements.form.addEventListener('submit', (e) => {
       e.preventDefault();
-      console.log('[DEBUG] Submit button clicked');
+      e.stopPropagation();
       
-      const errors = validateForm();
-      if (errors.length > 0) {
-        alert('Please fix the following errors:\n' + errors.join('\n'));
+      // Prevent double submission
+      if (this.isSubmitting) {
+        console.log('[FORM] Submission already in progress, ignoring...');
         return;
       }
-
-      // Show loading state
-      if (submitBtn) submitBtn.disabled = true;
-      if (submitText) submitText.textContent = isEdit ? 'Updating...' : 'Submitting...';
-      if (submitSpinner) submitSpinner.style.display = 'inline-block';
-
-      try {
-        const formData = new FormData(form);
-        
-        // FIXED: Prepare submission data with proper metadata.reason handling
-        const submissionData = {
-          action: isEdit ? 'edit' : 'add',
-          tool: {
-            name: formData.get('name'),
-            icon: formData.get('icon') || null,
-            type: formData.get('type'),
-            description: formData.get('description'),
-            domains: formData.getAll('domains'),
-            phases: formData.getAll('phases'),
-            skillLevel: formData.get('skillLevel'),
-            url: formData.get('url'),
-            tags: formData.get('tags') ? formData.get('tags').split(',').map(tag => tag.trim()).filter(Boolean) : []
-          },
-          metadata: {
-            // FIXED: Always provide a string, never null
-            reason: formData.get('reason')?.trim() || ''
-          }
-        };
-
-        // Add type-specific fields
-        if (submissionData.tool.type === 'software') {
-          submissionData.tool.platforms = formData.getAll('platforms');
-          submissionData.tool.license = formData.get('license')?.trim() || null;
-          submissionData.tool.accessType = formData.get('accessType') || null;
-          const da = formData.getAll('domainAgnostic');
-          if (da.length > 0) submissionData.tool['domain-agnostic-software'] = da;
-        }
-
-        // Add optional fields
-        submissionData.tool.knowledgebase = formData.has('knowledgebase') || null;
-        
-        if (submissionData.tool.type !== 'concept') {
-          const relatedConcepts = formData.getAll('relatedConcepts');
-          submissionData.tool.related_concepts = relatedConcepts.length > 0 ? relatedConcepts : null;
-        }
-
-        console.log('Submitting:', submissionData); // Debug log
-
-        const response = await fetch('/api/contribute/tool', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(submissionData)
-        });
-
-        const result = await response.json();
-
-        if (result.success) {
-          // Show success modal
-          if (successModal) {
-            const successMessage = document.getElementById('success-message');
-            if (successMessage) {
-              successMessage.textContent = `Your ${isEdit ? 'update' : 'contribution'} has been submitted successfully and will be reviewed by the maintainers.`;
-            }
-            
-            if (result.prUrl) {
-              const prLink = document.getElementById('pr-link');
-              if (prLink) {
-                prLink.href = result.prUrl;
-                prLink.style.display = 'inline-flex';
-              }
-            }
-            
-            successModal.style.display = 'flex';
-          }
-        } else {
-          let errorMessage = result.error || 'Submission failed';
-          if (result.details && Array.isArray(result.details)) {
-            errorMessage += '\n\nDetails:\n' + result.details.join('\n');
-          }
-          alert(errorMessage);
-        }
-      } catch (error) {
-        console.error('Submission error:', error);
-        alert('An error occurred while submitting your contribution. Please try again.');
-      } finally {
-        // Reset loading state
-        if (submitBtn) submitBtn.disabled = false;
-        if (submitText) submitText.textContent = isEdit ? 'Update Tool' : 'Submit Contribution';
-        if (submitSpinner) submitSpinner.style.display = 'none';
-      }
+      
+      this.handleSubmit();
     });
+
+    console.log('[FORM] Event listeners attached');
   }
 
-  // FIXED: Initialize form with proper order
-  function initializeForm() {
-    if (isEdit && editTool) {
-      console.log('Initializing edit form for:', editTool.name);
+updateFieldVisibility() {
+  const type = this.elements.typeSelect.value;
+  
+  // Hide all conditional fields
+  this.elements.softwareFields.style.display = 'none';
+  this.elements.conceptsFields.style.display = 'none';
+  
+  // Hide required indicators
+  if (this.elements.platformsRequired) this.elements.platformsRequired.style.display = 'none';
+  if (this.elements.licenseRequired) this.elements.licenseRequired.style.display = 'none';
+
+  // Show relevant fields based on type
+  if (type === 'software') {
+    this.elements.softwareFields.style.display = 'block';
+    this.elements.conceptsFields.style.display = 'block';
+    if (this.elements.platformsRequired) this.elements.platformsRequired.style.display = 'inline';
+    if (this.elements.licenseRequired) this.elements.licenseRequired.style.display = 'inline';
+  } else if (type === 'method') {
+    this.elements.conceptsFields.style.display = 'block';
+  }
+
+  console.log('[FORM] Field visibility updated for type:', type);
+}
+
+setupCharacterCounters() {
+  const counters = [
+    { element: this.elements.descriptionTextarea, counter: this.elements.descriptionCount, max: 1000 },
+    { element: this.elements.reasonTextarea, counter: this.elements.reasonCount, max: 500 }
+  ];
+
+  counters.forEach(({ element, counter, max }) => {
+    if (element && counter) {
+      const updateCounter = () => {
+        const count = element.value.length;
+        counter.textContent = count;
+        counter.style.color = count > max * 0.9 ? 'var(--color-warning)' : 'var(--color-text-secondary)';
+      };
       
-      // Set basic fields first
-      if (typeSelect) {
-        typeSelect.value = editTool.type;
+      element.addEventListener('input', updateCounter);
+      updateCounter();
+    }
+  });
+}
+
+updateYAMLPreview() {
+  if (!this.elements.yamlPreview) return;
+
+  try {
+    const formData = new FormData(this.elements.form);
+    
+    const tool = {
+      name: formData.get('name') || 'Tool Name',
+      type: formData.get('type') || 'software',
+      description: formData.get('description') || 'Tool description',
+      domains: formData.getAll('domains'),
+      phases: formData.getAll('phases'),
+      skillLevel: formData.get('skillLevel') || 'intermediate',
+      url: formData.get('url') || 'https://example.com'
+    };
+
+    // Add icon if provided
+    if (formData.get('icon')) {
+      tool.icon = formData.get('icon');
+    }
+
+    // Add software-specific fields
+    if (tool.type === 'software') {
+      tool.platforms = formData.getAll('platforms');
+      tool.license = formData.get('license') || 'Unknown';
+      if (formData.get('accessType')) {
+        tool.accessType = formData.get('accessType');
       }
-      
-      // Update field visibility FIRST
-      updateFieldVisibility();
-      
-      // THEN set the platform checkboxes and access type after a brief delay
-      setTimeout(() => {
-        // FIXED: Set platform checkboxes with more specific selector
-        if (editTool.platforms) {
-          editTool.platforms.forEach(platform => {
-            const checkbox = document.querySelector(`input[name="platforms"][value="${platform}"]`);
-            if (checkbox) {
-              checkbox.checked = true;
-              console.log('Set platform checkbox:', platform);
-            } else {
-              console.warn('Platform checkbox not found:', platform);
-            }
-          });
-        }
-        
-        // FIXED: Set access type value
-        if (editTool.accessType) {
-          const accessTypeSelect = document.getElementById('access-type');
-          if (accessTypeSelect) {
-            accessTypeSelect.value = editTool.accessType;
-            console.log('Set access type:', editTool.accessType);
-          }
-        }
-        
-        // Update YAML preview after all values are set
-        updateYAMLPreview();
-      }, 100);
-    } else {
-      updateFieldVisibility();
+      const domainAgnostic = formData.getAll('domainAgnostic');
+      if (domainAgnostic.length > 0) {
+        tool['domain-agnostic-software'] = domainAgnostic;
+      }
+    }
+
+    // Add optional fields
+    if (formData.has('knowledgebase')) {
+      tool.knowledgebase = true;
+    }
+
+    const tags = formData.get('tags');
+    if (tags) {
+      tool.tags = tags.split(',').map(t => t.trim()).filter(Boolean);
+    }
+
+    const relatedConcepts = formData.getAll('relatedConcepts');
+    if (relatedConcepts.length > 0) {
+      tool.related_concepts = relatedConcepts;
+    }
+
+    // Generate YAML
+    const yaml = this.generateYAML(tool);
+    this.elements.yamlPreview.textContent = yaml;
+
+  } catch (error) {
+    console.error('[FORM] YAML preview error:', error);
+    this.elements.yamlPreview.textContent = '# Error generating preview';
+  }
+}
+
+generateYAML(tool) {
+  const lines = [];
+  
+  lines.push(`name: "${tool.name}"`);
+  if (tool.icon) lines.push(`icon: "${tool.icon}"`);
+  lines.push(`type: ${tool.type}`);
+  lines.push(`description: "${tool.description}"`);
+  lines.push(`domains: [${tool.domains.map(d => `"${d}"`).join(', ')}]`);
+  lines.push(`phases: [${tool.phases.map(p => `"${p}"`).join(', ')}]`);
+  lines.push(`skillLevel: ${tool.skillLevel}`);
+  lines.push(`url: "${tool.url}"`);
+  
+  if (tool.platforms && tool.platforms.length > 0) {
+    lines.push(`platforms: [${tool.platforms.map(p => `"${p}"`).join(', ')}]`);
+  }
+  if (tool.license) lines.push(`license: "${tool.license}"`);
+  if (tool.accessType) lines.push(`accessType: ${tool.accessType}`);
+  if (tool['domain-agnostic-software']) {
+    lines.push(`domain-agnostic-software: [${tool['domain-agnostic-software'].map(c => `"${c}"`).join(', ')}]`);
+  }
+  if (tool.knowledgebase) lines.push(`knowledgebase: true`);
+  if (tool.tags && tool.tags.length > 0) {
+    lines.push(`tags: [${tool.tags.map(t => `"${t}"`).join(', ')}]`);
+  }
+  if (tool.related_concepts && tool.related_concepts.length > 0) {
+    lines.push(`related_concepts: [${tool.related_concepts.map(c => `"${c}"`).join(', ')}]`);
+  }
+
+  return lines.join('\n');
+}
+
+validateForm() {
+  const errors = [];
+  const formData = new FormData(this.elements.form);
+
+  // Required field validation
+  const name = formData.get('name')?.trim();
+  if (!name) {
+    errors.push('Tool name is required');
+  }
+
+  const description = formData.get('description')?.trim();
+  if (!description) {
+    errors.push('Description is required');
+  } else if (description.length < 10) {
+    errors.push('Description must be at least 10 characters long');
+  }
+
+  const skillLevel = formData.get('skillLevel');
+  if (!skillLevel) {
+    errors.push('Skill level is required');
+  }
+
+  const type = formData.get('type');
+  if (!type) {
+    errors.push('Type is required');
+  }
+
+  const url = formData.get('url')?.trim();
+  if (!url) {
+    errors.push('Primary URL is required');
+  } else {
+    try {
+      new URL(url);
+    } catch {
+      errors.push('Primary URL must be a valid URL');
     }
   }
 
-  // Initialize form
-  initializeForm();
+  // Software-specific validation
+  if (type === 'software') {
+    const platforms = formData.getAll('platforms');
+    if (platforms.length === 0) {
+      errors.push('At least one platform is required for software');
+    }
 
-  // Debounce utility
-  function debounce(func, wait) {
-    let timeout;
-    return function executedFunction(...args) {
-      const later = () => {
-        clearTimeout(timeout);
-        func(...args);
+    const license = formData.get('license')?.trim();
+    if (!license) {
+      errors.push('License is required for software');
+    }
+  }
+
+  return errors;
+}
+
+showValidationErrors(errors) {
+  if (errors.length === 0) {
+    this.elements.validationErrors.style.display = 'none';
+    return;
+  }
+
+  // Clear previous errors
+  this.elements.errorList.innerHTML = '';
+  
+  // Add each error as list item
+  errors.forEach(error => {
+    const li = document.createElement('li');
+    li.textContent = error;
+    this.elements.errorList.appendChild(li);
+  });
+
+  // Show error container
+  this.elements.validationErrors.style.display = 'block';
+  
+  // Scroll to top to show errors
+  this.elements.validationErrors.scrollIntoView({ behavior: 'smooth', block: 'center' });
+}
+  async handleSubmit() {
+    console.log('[FORM] Submit handler called!');
+
+    // FIXED: Immediate submission lock
+    if (this.isSubmitting) {
+      console.log('[FORM] Already submitting, aborting...');
+      return;
+    }
+
+    this.isSubmitting = true;
+
+    // Validate before submitting
+    const validationErrors = this.validateForm();
+    if (validationErrors.length > 0) {
+      console.log('[FORM] Validation failed:', validationErrors);
+      this.showValidationErrors(validationErrors);
+      this.isSubmitting = false; // Reset lock
+      return;
+    }
+
+    // Hide validation errors
+    this.elements.validationErrors.style.display = 'none';
+
+    // Immediate UI feedback
+    this.elements.submitBtn.disabled = true;
+    this.elements.submitText.textContent = this.isEdit ? 'Updating...' : 'Submitting...';
+    this.elements.submitSpinner.style.display = 'inline';
+
+    try {
+      const formData = new FormData(this.elements.form);
+      
+      // Build submission object
+      const submission = {
+        action: this.isEdit ? 'edit' : 'add',
+        tool: {
+          name: formData.get('name'),
+          type: formData.get('type'),
+          description: formData.get('description'),
+          domains: formData.getAll('domains'),
+          phases: formData.getAll('phases'),
+          skillLevel: formData.get('skillLevel'),
+          url: formData.get('url'),
+          tags: formData.get('tags') ? 
+            formData.get('tags').split(',').map(t => t.trim()).filter(Boolean) : []
+        },
+        metadata: {
+          reason: formData.get('reason') || ''
+        }
       };
+
+      // Add optional fields
+      if (formData.get('icon')) submission.tool.icon = formData.get('icon');
+      if (formData.has('knowledgebase')) submission.tool.knowledgebase = true;
+
+      // Add software-specific fields
+      if (submission.tool.type === 'software') {
+        submission.tool.platforms = formData.getAll('platforms');
+        submission.tool.license = formData.get('license');
+        if (formData.get('accessType')) {
+          submission.tool.accessType = formData.get('accessType');
+        }
+        const domainAgnostic = formData.getAll('domainAgnostic');
+        if (domainAgnostic.length > 0) {
+          submission.tool['domain-agnostic-software'] = domainAgnostic;
+        }
+      }
+
+      // Add related concepts
+      if (submission.tool.type !== 'concept') {
+        const related = formData.getAll('relatedConcepts');
+        if (related.length > 0) {
+          submission.tool.related_concepts = related;
+        }
+      }
+
+      console.log('[FORM] Sending submission:', submission);
+
+      // Submit to API
+      const response = await fetch('/api/contribute/tool', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(submission)
+      });
+
+      console.log('[FORM] Response status:', response.status);
+      const result = await response.json();
+      console.log('[FORM] Response data:', result);
+
+      if (result.success) {
+        this.showSuccess(result);
+      } else {
+        throw new Error(result.error || 'Submission failed');
+      }
+
+    } catch (error) {
+      console.error('[FORM] Submission error:', error);
+      alert(`Submission failed: ${error.message}\n\nPlease try again or contact support if the problem persists.`);
+    } finally {
+      // FIXED: Always reset submission state
+      this.isSubmitting = false;
+      this.elements.submitBtn.disabled = false;
+      this.elements.submitText.textContent = this.isEdit ? 'Update Tool' : 'Submit Contribution';
+      this.elements.submitSpinner.style.display = 'none';
+    }
+  }
+
+  showSuccess(result) {
+    // Update success message
+    const successMessage = document.getElementById('success-message');
+    if (successMessage) {
+      successMessage.textContent = `Your ${this.isEdit ? 'update' : 'contribution'} has been submitted as an issue and will be reviewed by maintainers.`;
+    }
+
+    // Show issue link if available
+    if (result.issueUrl) {
+      const prLink = document.getElementById('pr-link');
+      if (prLink) {
+        prLink.href = result.issueUrl;
+        prLink.textContent = 'View Issue';
+        prLink.style.display = 'inline-flex';
+      }
+    }
+
+    // Show modal
+    this.elements.successModal.style.display = 'flex';
+  }
+
+  debounce(func, wait) {
+    let timeout;
+    return (...args) => {
       clearTimeout(timeout);
-      timeout = setTimeout(later, wait);
+      timeout = setTimeout(() => func.apply(this, args), wait);
     };
   }
-});
+}
+
+// FIXED: Single initialization only
+function initializeForm() {
+  const form = document.getElementById('contribution-form');
+  if (!form) {
+    console.error('[FORM] Form element not found!');
+    return;
+  }
+
+  if (form.hasAttribute('data-form-initialized')) {
+    console.log('[FORM] Form already initialized');
+    return;
+  }
+
+  console.log('[FORM] Initializing form...');
+  new ContributionForm();
+}
+
+// FIXED: Simple initialization
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeForm);
+} else {
+  initializeForm();
+}
+
+console.log('[FORM] Script loaded successfully');
 </script>
\ No newline at end of file
diff --git a/src/utils/gitContributions.ts b/src/utils/gitContributions.ts
index 163d592..adb6b36 100644
--- a/src/utils/gitContributions.ts
+++ b/src/utils/gitContributions.ts
@@ -1,8 +1,5 @@
-// src/utils/gitContributions.ts - Enhanced for Phase 3 with YAML preservation
-import { execSync, spawn } from 'child_process';
-import { promises as fs } from 'fs';
-import { load, dump } from 'js-yaml';
-import path from 'path';
+// src/utils/gitContributions.ts - MINIMAL: Issues only, no filesystem/git operations
+import { dump } from 'js-yaml';
 
 export interface ContributionData {
   type: 'add' | 'edit';
@@ -34,413 +31,63 @@ export interface ContributionData {
 export interface GitOperationResult {
   success: boolean;
   message: string;
-  prUrl?: string;
-  branchName?: string;
+  issueUrl?: string;
+  issueNumber?: number;
 }
 
 interface GitConfig {
-  localRepoPath: string;
   provider: 'gitea' | 'github' | 'gitlab';
   apiEndpoint: string;
   apiToken: string;
-  repoUrl: string;
   repoOwner: string;
   repoName: string;
 }
 
 export class GitContributionManager {
-  protected config: GitConfig;
-  private activeBranches = new Set<string>();
+  private config: GitConfig;
 
   constructor() {
     const repoUrl = process.env.GIT_REPO_URL || '';
     const { owner, name } = this.parseRepoUrl(repoUrl);
     
     this.config = {
-      localRepoPath: process.env.LOCAL_REPO_PATH || '/var/git/cc24-hub',
       provider: (process.env.GIT_PROVIDER as any) || 'gitea',
       apiEndpoint: process.env.GIT_API_ENDPOINT || '',
       apiToken: process.env.GIT_API_TOKEN || '',
-      repoUrl,
       repoOwner: owner,
       repoName: name
     };
 
-    if (!this.config.apiEndpoint || !this.config.apiToken || !this.config.repoUrl) {
+    if (!this.config.apiEndpoint || !this.config.apiToken) {
       throw new Error('Missing required git configuration');
     }
   }
 
   private parseRepoUrl(url: string): { owner: string; name: string } {
+    const match = url.match(/\/([^\/]+)\/([^\/]+?)(?:\.git)?$/);
+    if (!match) {
+      throw new Error('Invalid repository URL format');
+    }
+    return { owner: match[1], name: match[2] };
+  }
+
+  async submitContribution(data: ContributionData): Promise<GitOperationResult> {
     try {
-      // Parse URLs like: https://git.cc24.dev/mstoeck3/cc24-hub.git
-      const match = url.match(/\/([^\/]+)\/([^\/]+?)(?:\.git)?$/);
-      if (!match) {
-        throw new Error('Invalid repository URL format');
-      }
-      return { owner: match[1], name: match[2] };
+      const toolYaml = this.generateYAML(data.tool);
+      const issueUrl = await this.createIssue(data, toolYaml);
+
+      return {
+        success: true,
+        message: 'Tool contribution submitted as issue',
+        issueUrl
+      };
     } catch (error) {
-      throw new Error(`Failed to parse repository URL: ${url}`);
+      throw new Error(`Issue creation failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
   }
 
-  // Enhanced git operations for Phase 3
-
-  /**
-   * Create a new branch
-   */
-  protected async createBranch(branchName: string): Promise<void> {
-    try {
-      // Ensure we're on main and up to date
-      execSync('git checkout main', { cwd: this.config.localRepoPath, stdio: 'pipe' });
-      execSync('git pull origin main', { cwd: this.config.localRepoPath, stdio: 'pipe' });
-      
-      // Create and checkout new branch
-      execSync(`git checkout -b "${branchName}"`, { cwd: this.config.localRepoPath, stdio: 'pipe' });
-      
-      this.activeBranches.add(branchName);
-      
-    } catch (error) {
-      throw new Error(`Failed to create branch ${branchName}: ${error instanceof Error ? error.message : 'Unknown error'}`);
-    }
-  }
-
-  /**
-   * Write file to repository
-   */
-  protected async writeFile(filePath: string, content: string): Promise<void> {
-    try {
-      const fullPath = path.join(this.config.localRepoPath, filePath);
-      const dirPath = path.dirname(fullPath);
-      
-      // Ensure directory exists
-      await fs.mkdir(dirPath, { recursive: true });
-      
-      // Write file
-      await fs.writeFile(fullPath, content, 'utf8');
-      
-    } catch (error) {
-      throw new Error(`Failed to write file ${filePath}: ${error instanceof Error ? error.message : 'Unknown error'}`);
-    }
-  }
-
-  /**
-   * Read file from repository
-   */
-  protected async readFile(filePath: string): Promise<string> {
-    try {
-      const fullPath = path.join(this.config.localRepoPath, filePath);
-      return await fs.readFile(fullPath, 'utf8');
-    } catch (error) {
-      throw new Error(`Failed to read file ${filePath}: ${error instanceof Error ? error.message : 'Unknown error'}`);
-    }
-  }
-
-  /**
-   * Commit changes with message
-   */
-  protected async commitChanges(message: string): Promise<void> {
-    try {
-      // Add all changes
-      execSync('git add .', { cwd: this.config.localRepoPath, stdio: 'pipe' });
-      
-      // Check if there are any changes to commit
-      try {
-        execSync('git diff --cached --exit-code', { cwd: this.config.localRepoPath, stdio: 'pipe' });
-        // If we get here, there are no changes
-        throw new Error('No changes to commit');
-      } catch (error) {
-        // This is expected - it means there are changes to commit
-      }
-      
-      // Set git config if not already set
-      try {
-        execSync('git config user.email "contributions@cc24-hub.local"', { cwd: this.config.localRepoPath, stdio: 'pipe' });
-        execSync('git config user.name "CC24-Hub Contributions"', { cwd: this.config.localRepoPath, stdio: 'pipe' });
-      } catch {
-        // Config might already be set
-      }
-      
-      // Commit changes
-      execSync(`git commit -m "${message.replace(/"/g, '\\"')}"`, { cwd: this.config.localRepoPath, stdio: 'pipe' });
-      
-    } catch (error) {
-      throw new Error(`Failed to commit changes: ${error instanceof Error ? error.message : 'Unknown error'}`);
-    }
-  }
-
-  /**
-   * Push branch to remote
-   */
-  protected async pushBranch(branchName: string): Promise<void> {
-    try {
-      execSync(`git push -u origin "${branchName}"`, { cwd: this.config.localRepoPath, stdio: 'pipe' });
-    } catch (error) {
-      throw new Error(`Failed to push branch ${branchName}: ${error instanceof Error ? error.message : 'Unknown error'}`);
-    }
-  }
-
-  /**
-   * Delete branch (cleanup)
-   */
-  protected async deleteBranch(branchName: string): Promise<void> {
-    try {
-      // Switch to main first
-      execSync('git checkout main', { cwd: this.config.localRepoPath, stdio: 'pipe' });
-      
-      // Delete local branch
-      execSync(`git branch -D "${branchName}"`, { cwd: this.config.localRepoPath, stdio: 'pipe' });
-      
-      // Delete remote branch if it exists
-      try {
-        execSync(`git push origin --delete "${branchName}"`, { cwd: this.config.localRepoPath, stdio: 'pipe' });
-      } catch {
-        // Branch might not exist on remote yet
-      }
-      
-      this.activeBranches.delete(branchName);
-      
-    } catch (error) {
-      console.warn(`Failed to cleanup branch ${branchName}:`, error);
-    }
-  }
-
-  /**
-   * Create pull request
-   */
-  protected async createPullRequest(branchName: string, title: string, body: string): Promise<string> {
-    try {
-      let apiUrl: string;
-      let requestBody: any;
-
-      switch (this.config.provider) {
-        case 'gitea':
-          apiUrl = `${this.config.apiEndpoint}/repos/${this.config.repoOwner}/${this.config.repoName}/pulls`;
-          requestBody = {
-            title,
-            body,
-            head: branchName,
-            base: 'main'
-          };
-          break;
-        
-        case 'github':
-          apiUrl = `${this.config.apiEndpoint}/repos/${this.config.repoOwner}/${this.config.repoName}/pulls`;
-          requestBody = {
-            title,
-            body,
-            head: branchName,
-            base: 'main'
-          };
-          break;
-          
-        case 'gitlab':
-          apiUrl = `${this.config.apiEndpoint}/projects/${encodeURIComponent(this.config.repoOwner + '/' + this.config.repoName)}/merge_requests`;
-          requestBody = {
-            title,
-            description: body,
-            source_branch: branchName,
-            target_branch: 'main'
-          };
-          break;
-          
-        default:
-          throw new Error(`Unsupported git provider: ${this.config.provider}`);
-      }
-
-      const response = await fetch(apiUrl, {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${this.config.apiToken}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(requestBody)
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(`PR creation failed (${response.status}): ${errorText}`);
-      }
-
-      const prData = await response.json();
-      
-      // Extract PR URL based on provider
-      let prUrl: string;
-      switch (this.config.provider) {
-        case 'gitea':
-        case 'github':
-          prUrl = prData.html_url || prData.url;
-          break;
-        case 'gitlab':
-          prUrl = prData.web_url;
-          break;
-        default:
-          throw new Error('Unknown provider response format');
-      }
-
-      return prUrl;
-      
-    } catch (error) {
-      throw new Error(`Failed to create pull request: ${error instanceof Error ? error.message : 'Unknown error'}`);
-    }
-  }
-
-  /**
-   * CRITICAL FIX: Preserve YAML formatting while updating tools
-   * This prevents the complete rewrite that destroys multiline descriptions
-   */
-  private async preserveYamlFormat(toolsPath: string, newTool: any, isEdit: boolean): Promise<string> {
-    const originalContent = await this.readFile(toolsPath);
-    const yamlData: any = load(originalContent);
-
-    if (!yamlData.tools || !Array.isArray(yamlData.tools)) {
-      throw new Error('Invalid tools.yaml format');
-    }
-
-    if (isEdit) {
-      // Find and replace existing tool
-      const toolIndex = yamlData.tools.findIndex((t: any) => 
-        (t.name || '').toLowerCase() === newTool.name.toLowerCase()
-      );
-      
-      if (toolIndex >= 0) {
-        yamlData.tools[toolIndex] = newTool;
-      } else {
-        throw new Error('Tool to edit not found');
-      }
-    } else {
-      // Add new tool - insert alphabetically
-      const insertIndex = yamlData.tools.findIndex((t: any) => 
-        (t.name || '').toLowerCase() > newTool.name.toLowerCase()
-      );
-      
-      if (insertIndex >= 0) {
-        yamlData.tools.splice(insertIndex, 0, newTool);
-      } else {
-        yamlData.tools.push(newTool);
-      }
-    }
-
-    // Split original content into sections to preserve formatting
-    const lines = originalContent.split('\n');
-    const toolsStartIndex = lines.findIndex(line => line.trim() === 'tools:');
-    
-    if (toolsStartIndex === -1) {
-      // Fallback to full rewrite if structure is unexpected
-      console.warn('Could not find tools section, falling back to full YAML rewrite');
-      return dump(yamlData, { 
-        lineWidth: -1, 
-        noRefs: true, 
-        quotingType: '"', 
-        forceQuotes: false, 
-        indent: 2
-      });
-    }
-
-    // Preserve header (everything before tools:)
-    const header = lines.slice(0, toolsStartIndex + 1).join('\n');
-    
-    // Find footer (domains, phases, etc.)
-    const domainsStartIndex = lines.findIndex(line => line.trim() === 'domains:');
-    const footer = domainsStartIndex >= 0 ? '\n' + lines.slice(domainsStartIndex).join('\n') : '';
-
-    // Generate only the tools section with proper formatting
-    const toolsYaml = yamlData.tools.map((tool: any) => {
-      return this.formatToolYaml(tool);
-    }).join('');
-
-    return header + '\n' + toolsYaml + footer;
-  }
-
-  /**
-   * Format a single tool entry preserving multiline descriptions
-   */
-  private formatToolYaml(tool: any): string {
-    let toolEntry = `  - name: "${tool.name}"\n`;
-    
-    if (tool.icon) toolEntry += `    icon: "${tool.icon}"\n`;
-    toolEntry += `    type: ${tool.type}\n`;
-    
-    // PRESERVE multiline description format for longer descriptions
-    if (tool.description && tool.description.length > 80) {
-      toolEntry += `    description: >-\n`;
-      const words: string[] = tool.description.split(' ');
-      const lines: string[] = [];
-      let currentLine: string = '';
-      
-      words.forEach((word: string) => {
-        if ((currentLine + ' ' + word).length > 80) {
-          if (currentLine) lines.push(currentLine);
-          currentLine = word;
-        } else {
-          currentLine = currentLine ? currentLine + ' ' + word : word;
-        }
-      });
-      if (currentLine) lines.push(currentLine);
-      
-      lines.forEach((line: string) => {
-        toolEntry += `      ${line}\n`;
-      });
-    } else {
-      toolEntry += `    description: "${tool.description}"\n`;
-    }
-
-    // Add array fields
-    if (tool.domains && tool.domains.length > 0) {
-      toolEntry += `    domains:\n`;
-      tool.domains.forEach((domain: string) => {
-        toolEntry += `      - ${domain}\n`;
-      });
-    }
-
-    if (tool.phases && tool.phases.length > 0) {
-      toolEntry += `    phases:\n`;
-      tool.phases.forEach((phase: string) => {
-        toolEntry += `      - ${phase}\n`;
-      });
-    }
-
-    if (tool.platforms && tool.platforms.length > 0) {
-      toolEntry += `    platforms:\n`;
-      tool.platforms.forEach((platform: string) => {
-        toolEntry += `      - ${platform}\n`;
-      });
-    }
-
-    if (tool.related_concepts && tool.related_concepts.length > 0) {
-      toolEntry += `    related_concepts:\n`;
-      tool.related_concepts.forEach((concept: string) => {
-        toolEntry += `      - ${concept}\n`;
-      });
-    }
-
-    if (tool['domain-agnostic-software'] && tool['domain-agnostic-software'].length > 0) {
-      toolEntry += `    domain-agnostic-software:\n`;
-      tool['domain-agnostic-software'].forEach((item: string) => {
-        toolEntry += `      - ${item}\n`;
-      });
-    }
-
-    // Add scalar fields
-    toolEntry += `    skillLevel: ${tool.skillLevel}\n`;
-    if (tool.accessType) toolEntry += `    accessType: ${tool.accessType}\n`;
-    toolEntry += `    url: ${tool.url}\n`;
-    if (tool.projectUrl) toolEntry += `    projectUrl: ${tool.projectUrl}\n`;
-    if (tool.license) toolEntry += `    license: ${tool.license}\n`;
-    if (tool.knowledgebase) toolEntry += `    knowledgebase: ${tool.knowledgebase}\n`;
-
-    if (tool.tags && tool.tags.length > 0) {
-      toolEntry += `    tags:\n`;
-      tool.tags.forEach((tag: string) => {
-        toolEntry += `      - ${tag}\n`;
-      });
-    }
-
-    return toolEntry;
-  }
-
-  private generateToolYAML(tool: any): string {
-    // Clean up the tool object - remove null/undefined values
+  private generateYAML(tool: any): string {
+    // Clean tool object
     const cleanTool: any = {
       name: tool.name,
       type: tool.type,
@@ -451,125 +98,116 @@ export class GitContributionManager {
       url: tool.url
     };
 
-    // Add optional fields only if they have values
+    // Add optional fields
     if (tool.icon) cleanTool.icon = tool.icon;
-    if (tool.platforms && tool.platforms.length > 0) cleanTool.platforms = tool.platforms;
+    if (tool.platforms?.length) cleanTool.platforms = tool.platforms;
     if (tool.license) cleanTool.license = tool.license;
     if (tool.accessType) cleanTool.accessType = tool.accessType;
     if (tool.projectUrl) cleanTool.projectUrl = tool.projectUrl;
     if (tool.knowledgebase) cleanTool.knowledgebase = tool.knowledgebase;
-    if (tool.related_concepts && tool.related_concepts.length > 0) cleanTool.related_concepts = tool.related_concepts;
-    if (tool.tags && tool.tags.length > 0) cleanTool.tags = tool.tags;
+    if (tool.related_concepts?.length) cleanTool.related_concepts = tool.related_concepts;
+    if (tool.tags?.length) cleanTool.tags = tool.tags;
+    if (tool['domain-agnostic-software']?.length) {
+      cleanTool['domain-agnostic-software'] = tool['domain-agnostic-software'];
+    }
 
-    // Generate clean YAML
     return dump(cleanTool, {
       lineWidth: -1,
       noRefs: true,
       quotingType: '"',
       forceQuotes: false,
       indent: 2
-    });
+    }).trim();
   }
 
-  async submitContribution(data: ContributionData): Promise<GitOperationResult> {
-    const branchName = `tool-${data.type}-${Date.now()}`;
+  private async createIssue(data: ContributionData, toolYaml: string): Promise<string> {
+    const title = `${data.type === 'add' ? 'Add' : 'Update'} tool: ${data.tool.name}`;
+    const body = this.generateIssueBody(data, toolYaml);
 
-    try {
-      await this.createBranch(branchName);
+    let apiUrl: string;
+    let requestBody: any;
 
-      const toolsPath = 'src/data/tools.yaml';
+    switch (this.config.provider) {
+      case 'gitea':
+        apiUrl = `${this.config.apiEndpoint}/repos/${this.config.repoOwner}/${this.config.repoName}/issues`;
+        requestBody = { title, body };
+        break;
       
-      // CRITICAL FIX: Use format-preserving method instead of dump()
-      const newYaml = await this.preserveYamlFormat(toolsPath, data.tool, data.type === 'edit');
+      case 'github':
+        apiUrl = `${this.config.apiEndpoint}/repos/${this.config.repoOwner}/${this.config.repoName}/issues`;
+        requestBody = { title, body };
+        break;
+        
+      case 'gitlab':
+        apiUrl = `${this.config.apiEndpoint}/projects/${encodeURIComponent(this.config.repoOwner + '/' + this.config.repoName)}/issues`;
+        requestBody = { title, description: body };
+        break;
+        
+      default:
+        throw new Error(`Unsupported git provider: ${this.config.provider}`);
+    }
 
-      await this.writeFile(toolsPath, newYaml);
+    const response = await fetch(apiUrl, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${this.config.apiToken}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(requestBody)
+    });
 
-      const commitMessage = `${data.type === 'add' ? 'Add' : 'Update'} tool: ${data.tool.name}
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`HTTP ${response.status}: ${errorText}`);
+    }
 
-Submitted by: ${data.metadata.submitter}
-${data.metadata.reason ? `Reason: ${data.metadata.reason}` : ''}`;
-
-      await this.commitChanges(commitMessage);
-
-      await this.pushBranch(branchName);
-
-      // Generate tool YAML for PR description
-      const toolYaml = this.generateToolYAML(data.tool);
-
-      const prUrl = await this.createPullRequest(
-        branchName,
-        `${data.type === 'add' ? 'Add' : 'Update'} tool: ${data.tool.name}`,
-        this.generateEnhancedPRDescription(data, toolYaml)
-      );
-
-      return {
-        success: true,
-        message: `Tool contribution submitted successfully`,
-        prUrl,
-        branchName
-      };
-      
-    } catch (error) {
-      // Cleanup on failure
-      try {
-        await this.deleteBranch(branchName);
-      } catch (cleanupError) {
-        console.error('Failed to cleanup branch:', cleanupError);
-      }
-      
-      throw error;
+    const issueData = await response.json();
+    
+    // Extract issue URL
+    switch (this.config.provider) {
+      case 'gitea':
+      case 'github':
+        return issueData.html_url || issueData.url;
+      case 'gitlab':
+        return issueData.web_url;
+      default:
+        throw new Error('Unknown provider response format');
     }
   }
 
-  private generateEnhancedPRDescription(data: ContributionData, toolYaml: string): string {
-    return `## Tool ${data.type === 'add' ? 'Addition' : 'Update'}: ${data.tool.name}
+  private generateIssueBody(data: ContributionData, toolYaml: string): string {
+    return `## ${data.type === 'add' ? 'Add' : 'Update'} Tool: ${data.tool.name}
 
-**Type:** ${data.tool.type}  
 **Submitted by:** ${data.metadata.submitter}  
-**Action:** ${data.type === 'add' ? 'Add new tool' : 'Update existing tool'}
+**Type:** ${data.tool.type}  
+**Action:** ${data.type}
 
-### Tool Details
+### Tool Information
 - **Name:** ${data.tool.name}
 - **Description:** ${data.tool.description}
 - **URL:** ${data.tool.url}
 - **Skill Level:** ${data.tool.skillLevel}
-${data.tool.platforms && data.tool.platforms.length > 0 ? `- **Platforms:** ${data.tool.platforms.join(', ')}` : ''}
+${data.tool.platforms?.length ? `- **Platforms:** ${data.tool.platforms.join(', ')}` : ''}
 ${data.tool.license ? `- **License:** ${data.tool.license}` : ''}
-${data.tool.accessType ? `- **Access Type:** ${data.tool.accessType}` : ''}
-${data.tool.projectUrl ? `- **Project URL:** ${data.tool.projectUrl}` : ''}
-- **Domains:** ${data.tool.domains.join(', ')}
-- **Phases:** ${data.tool.phases.join(', ')}
-${data.tool.tags && data.tool.tags.length > 0 ? `- **Tags:** ${data.tool.tags.join(', ')}` : ''}
-${data.tool.related_concepts && data.tool.related_concepts.length > 0 ? `- **Related Concepts:** ${data.tool.related_concepts.join(', ')}` : ''}
+${data.tool.domains?.length ? `- **Domains:** ${data.tool.domains.join(', ')}` : ''}
+${data.tool.phases?.length ? `- **Phases:** ${data.tool.phases.join(', ')}` : ''}
 
-${data.metadata.reason ? `### Reason for Contribution
+${data.metadata.reason ? `### Reason
 ${data.metadata.reason}
 
-` : ''}### Raw Tool Data (Copy & Paste Ready)
+` : ''}### Copy-Paste YAML
 
 \`\`\`yaml
-${toolYaml}\`\`\`
+  - ${toolYaml.split('\n').join('\n    ')}
+\`\`\`
 
 ### For Maintainers
-
-**To add this tool to tools.yaml:**
-1. Copy the YAML data above
-2. ${data.type === 'add' ? 'Add it to the tools array in the appropriate alphabetical position' : 'Replace the existing tool entry with this updated data'}
-3. Verify all fields are correct
-4. Test that the tool displays properly
-5. Close this PR
-
-### Review Checklist
-- [ ] Tool information is accurate and complete
-- [ ] Description is clear and informative  
-- [ ] Domains and phases are correctly assigned
-- [ ] Tags are relevant and consistent with existing tools
-- [ ] License information is correct (for software)
-- [ ] URLs are valid and accessible
-- [ ] No duplicate tool entries
-- [ ] YAML syntax is valid
+1. Copy the YAML above
+2. Add to \`src/data/tools.yaml\` in the tools array
+3. Maintain alphabetical order
+4. Close this issue when done
 
 ---
-*This contribution was submitted via the CC24-Hub web interface and contains only the raw tool data for manual integration.*`;
+*Submitted via CC24-Hub contribution form*`;
   }
 }
\ No newline at end of file