enhance: integrated UI with visual loading feedback

- Integrate file upload controls with status display for cleaner UX
- Add dark grey internal styling vs. dark green external theme
- Create enhanced SVG template with prominent month indicators
- Improve file loading error detection and user guidance
- Add visual confirmation system for external resource loading
- Update generator to support enhanced template styling
- Fix CSV/template loading context binding issues

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

engine.js

@@ -4,20 +4,68 @@ window.timelineEngine = {
   csvOverride: false,
   cssOverride: false,
 
+  projectBasePath: '',
+
+  updateFileStatus(fileType, filename, status = 'loaded') {
+    const statusElement = document.getElementById(`${fileType}File`);
+
+    if (statusElement) {
+      if (filename && status === 'loaded') {
+        statusElement.textContent = filename;
+        statusElement.style.color = '#28a745';
+        statusElement.title = `Loaded: ${filename}`;
+      } else if (filename && status === 'error') {
+        statusElement.textContent = `Error: ${filename}`;
+        statusElement.style.color = '#dc3545';
+        statusElement.title = `Failed to load: ${filename}`;
+      } else {
+        statusElement.textContent = 'Not loaded';
+        statusElement.style.color = '#6c757d';
+        statusElement.title = 'No file loaded';
+      }
+    }
+
+    // Add visual feedback with brief highlight animation
+    if (statusElement && filename) {
+      statusElement.style.transform = 'scale(1.05)';
+      setTimeout(() => {
+        statusElement.style.transform = 'scale(1)';
+      }, 200);
+    }
+  },
+
+  resolveProjectPath(relativePath) {
+    if (!relativePath) return relativePath;
+    // If path is already absolute (starts with http/https) or has no base path, return as-is
+    if (relativePath.startsWith('http') || !this.projectBasePath) {
+      return relativePath;
+    }
+    const resolvedPath = this.projectBasePath + relativePath;
+    console.log("Resolved path:", relativePath, "->", resolvedPath);
+    return resolvedPath;
+  },
+
   async autoLoadDefaultProject() {
+    console.log("Starting autoLoadDefaultProject");
     // Versuche zuerst Binect-Projekt, sonst Example
-    const candidates = ["binect/project.json", "example/project.json"];
-    for (const path of candidates) {
+    const candidates = [
+      { path: "binect/project.json", basePath: "binect/" },
+      { path: "example/project.json", basePath: "example/" }
+    ];
+    for (const candidate of candidates) {
       try {
-        const res = await fetch(path);
+        const res = await fetch(candidate.path);
         if (!res.ok) continue;
         const cfg = await res.json();
+        this.projectBasePath = candidate.basePath;
         await this.loadProjectConfigObject(cfg);
+        console.log("Project loaded successfully from:", candidate.path);
         return;
       } catch (e) {
         continue;
       }
     }
+    console.log("No project could be auto-loaded");
   },
 
   async loadProjectConfigObject(cfg) {
@@ -27,64 +75,175 @@ window.timelineEngine = {
     document.getElementById("projectSubtitle").innerText =
       cfg.description || "Projektkonfiguration geladen.";
 
+    // Update project status
+    this.updateFileStatus('project', name, 'loaded');
+
+    // Track loading errors for user feedback
+    const loadingErrors = [];
+
     // Stylesheet
     if (cfg.stylesheet && !this.cssOverride) {
-      document.getElementById("dynamicCss").href = cfg.stylesheet;
+      const stylesheetPath = this.resolveProjectPath(cfg.stylesheet);
+      const linkElement = document.getElementById("dynamicCss");
+
+      // Set up load/error event handlers before setting href
+      const handleLoad = () => {
+        console.log("Stylesheet loaded successfully:", stylesheetPath);
+        this.updateFileStatus('css', cfg.stylesheet + ' ✨', 'loaded');
+        linkElement.removeEventListener('load', handleLoad);
+        linkElement.removeEventListener('error', handleError);
+      };
+
+      const handleError = () => {
+        console.error("Stylesheet could not be loaded:", stylesheetPath);
+        this.updateFileStatus('css', cfg.stylesheet, 'error');
+        loadingErrors.push(`Stylesheet: ${cfg.stylesheet}`);
+        linkElement.removeEventListener('load', handleLoad);
+        linkElement.removeEventListener('error', handleError);
+      };
+
+      linkElement.addEventListener('load', handleLoad);
+      linkElement.addEventListener('error', handleError);
+      linkElement.href = stylesheetPath;
     }
 
     // SVG template
     if (cfg.svgTemplate) {
       try {
-        this.template = await fetch(cfg.svgTemplate).then(r => r.text());
+        const templatePath = this.resolveProjectPath(cfg.svgTemplate);
+        console.log("Attempting to fetch SVG template from:", templatePath);
+        const response = await fetch(templatePath);
+        console.log("SVG template fetch response:", response.status, response.statusText);
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        this.template = await response.text();
+        console.log("SVG template loaded, length:", this.template.length);
+        this.updateFileStatus('svg', cfg.svgTemplate, 'loaded');
       } catch (e) {
-        console.warn("SVG template could not be loaded:", e);
+        console.error("SVG template could not be loaded:", e);
+        console.error("Failed SVG template path was:", this.resolveProjectPath(cfg.svgTemplate));
+        this.updateFileStatus('svg', cfg.svgTemplate, 'error');
+        loadingErrors.push(`SVG template: ${cfg.svgTemplate}`);
       }
     }
 
     // CSV data
     if (cfg.dataSource && !this.csvOverride) {
       try {
-        const csvText = await fetch(cfg.dataSource).then(r => r.text());
+        const csvPath = this.resolveProjectPath(cfg.dataSource);
+        console.log("Attempting to fetch CSV from:", csvPath);
+        const response = await fetch(csvPath);
+        console.log("CSV fetch response:", response.status, response.statusText);
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        const csvText = await response.text();
+        console.log("CSV text loaded, length:", csvText.length);
+        console.log("CSV preview:", csvText.substring(0, 200));
+
+        this.updateFileStatus('csv', cfg.dataSource, 'loaded');
         this.processCsv(csvText);
       } catch (e) {
-        console.warn("CSV could not be loaded:", e);
+        console.error("CSV could not be loaded:", e);
+        console.error("Failed CSV path was:", this.resolveProjectPath(cfg.dataSource));
+        this.updateFileStatus('csv', cfg.dataSource, 'error');
+        loadingErrors.push(`CSV data: ${cfg.dataSource}`);
       }
     }
+
+    // Show user feedback if there were loading errors
+    if (loadingErrors.length > 0) {
+      setTimeout(() => {
+        const viewer = document.getElementById("viewer");
+        if (viewer && !viewer.innerHTML.includes('<svg')) {
+          viewer.innerHTML = `
+            <div style="text-align:center; padding:40px 20px; color:#6c757d;">
+              <div style="font-size:48px; margin-bottom:16px;">⚠️</div>
+              <h4 style="margin:0 0 8px 0; color:#dc3545;">Projektdateien konnten nicht geladen werden</h4>
+              <p style="margin:0 0 12px 0; font-size:14px;">
+                <strong>Fehlgeschlagene Dateien:</strong><br>
+                ${loadingErrors.map(err => `• ${err}`).join('<br>')}
+              </p>
+              <p style="margin:0; font-size:12px; color:#6c757d;">
+                💡 <strong>Tipp:</strong> Lade die Dateien manuell mit den Load-Buttons oben oder
+                verwende einen lokalen Server (<code>make serve</code>).
+              </p>
+            </div>
+          `;
+        }
+      }, 500); // Small delay to let other operations complete
+    }
   },
 
   processCsv(text) {
+    console.log("processCsv called with text length:", text?.length);
+
     if (!this.config || !this.config.fieldMapping) {
       console.error("No config or fieldMapping found.");
       return;
     }
+
+    if (typeof Papa === 'undefined') {
+      console.error("Papa Parse library not available");
+      document.getElementById("viewer").innerHTML =
+        "<em style='color:#dc3545;'>Fehler: CSV Parser nicht verfügbar.</em>";
+      return;
+    }
+
     const m = this.config.fieldMapping;
 
+    const self = this; // Capture 'this' context
     Papa.parse(text, {
       header: true,
       skipEmptyLines: true,
       complete: (res) => {
+        console.log("Papa.parse complete, found", res.data.length, "rows");
         const rows = res.data;
         const items = rows.map((r) => {
           const dueField = (m.due || []).find(f => r[f]);
-          return {
+          const item = {
             id: m.id ? r[m.id] : (r["ID"] || ""),
             title: m.title ? r[m.title] : (r["Title"] || ""),
             lane: m.lane ? (r[m.lane] || "Ohne Epic") : (r["Lane"] || "Default"),
-            due: this.parseDate(dueField ? r[dueField] : null)
+            due: self.parseDate(dueField ? r[dueField] : null)
           };
+          return item;
         }).filter(i => i.title && i.due);
 
+        console.log("Filtered to", items.length, "valid items");
+
         if (!items.length) {
           document.getElementById("viewer").innerHTML =
             "<em style='color:#999;'>Keine gültigen Items gefunden.</em>";
           return;
         }
 
-        const svg = window.timelineGenerator.generate(items, this.config, this.template);
-        document.getElementById("viewer").innerHTML = svg;
-        const dlBtn = document.getElementById("downloadSvg");
-        dlBtn.disabled = false;
-        dlBtn.style.opacity = 1;
+        // Ensure generator is available
+        if (!window.timelineGenerator) {
+          console.error("Timeline generator not available");
+          document.getElementById("viewer").innerHTML =
+            "<em style='color:#dc3545;'>Fehler: Timeline Generator nicht verfügbar.</em>";
+          return;
+        }
+
+        try {
+          console.log("Generating timeline with:", items, self.config, self.template ? "template loaded" : "no template");
+          const svg = window.timelineGenerator.generate(items, self.config, self.template);
+          document.getElementById("viewer").innerHTML = svg;
+          const dlBtn = document.getElementById("downloadSvg");
+          dlBtn.disabled = false;
+          dlBtn.style.opacity = 1;
+          console.log("Timeline generated successfully");
+        } catch (error) {
+          console.error("Error generating timeline:", error);
+          document.getElementById("viewer").innerHTML =
+            "<em style='color:#dc3545;'>Fehler beim Generieren der Timeline.</em>";
+        }
       }
     });
   },
@@ -118,58 +277,131 @@ window.timelineEngine = {
 
 // --------- UI event handlers ---------
 
-document.getElementById("projectInput").addEventListener("change", async (ev) => {
-  const file = ev.target.files[0];
-  if (!file) return;
-  const text = await file.text();
-  const cfg = JSON.parse(text);
-  await window.timelineEngine.loadProjectConfigObject(cfg);
-});
+function setupEventHandlers() {
+  const projectInput = document.getElementById("projectInput");
+  if (projectInput) {
+    projectInput.addEventListener("change", async (ev) => {
+      const file = ev.target.files[0];
+      if (!file) return;
+      try {
+        const text = await file.text();
+        const cfg = JSON.parse(text);
 
-document.getElementById("csvInput").addEventListener("change", async (ev) => {
-  const file = ev.target.files[0];
-  if (!file) return;
-  const text = await file.text();
-  window.timelineEngine.csvOverride = true;
-  window.timelineEngine.processCsv(text);
-});
+        // For manually loaded projects, try to infer base path from filename
+        // If it's example/project.json or binect/project.json, set appropriate base path
+        const filename = file.name;
+        if (filename === 'project.json') {
+          // Try to detect if this is a known project by checking the config
+          if (cfg.name && cfg.name.includes('Example')) {
+            window.timelineEngine.projectBasePath = 'example/';
+            console.log("Detected example project, setting base path to example/");
+          } else {
+            window.timelineEngine.projectBasePath = '';
+            console.log("Unknown project, clearing base path");
+          }
+        } else {
+          window.timelineEngine.projectBasePath = '';
+        }
 
-document.getElementById("cssInput").addEventListener("change", async (ev) => {
-  const file = ev.target.files[0];
-  if (!file) return;
-  const cssText = await file.text();
-  window.timelineEngine.cssOverride = true;
-  const blob = new Blob([cssText], { type: "text/css" });
-  document.getElementById("dynamicCss").href = URL.createObjectURL(blob);
-});
+        window.timelineEngine.updateFileStatus('project', file.name, 'loaded');
+        await window.timelineEngine.loadProjectConfigObject(cfg);
 
-document.getElementById("svgInput").addEventListener("change", async (ev) => {
-  const file = ev.target.files[0];
-  if (!file) return;
-  window.timelineEngine.template = await file.text();
-});
+        // Show message about relative paths if project has data sources
+        if (cfg.dataSource || cfg.stylesheet || cfg.svgTemplate) {
+          const viewer = document.getElementById("viewer");
+          if (viewer && (viewer.innerHTML.includes("could not be loaded") || viewer.innerHTML.includes("Keine gültigen Items"))) {
+            viewer.innerHTML += "<br><br><em style='color:#6c757d; font-size:12px;'>💡 Hinweis: Stelle sicher, dass sich die referenzierten Dateien (CSV, CSS, SVG) im gleichen Verzeichnis wie die HTML-Datei befinden.</em>";
+          }
+        }
+      } catch (error) {
+        console.error("Error loading project:", error);
+        window.timelineEngine.updateFileStatus('project', file.name, 'error');
+      }
+    });
+  }
 
-document.getElementById("downloadSvg").addEventListener("click", () => {
-  const svg = document.querySelector("#viewer svg");
-  if (!svg) return;
+  const csvInput = document.getElementById("csvInput");
+  if (csvInput) {
+    csvInput.addEventListener("change", async (ev) => {
+      const file = ev.target.files[0];
+      if (!file) return;
+      const text = await file.text();
+      window.timelineEngine.csvOverride = true;
+      window.timelineEngine.updateFileStatus('csv', file.name, 'loaded');
+      window.timelineEngine.processCsv(text);
+    });
+  }
 
-  // Always external view for export: IDs ausblenden
-  svg.querySelectorAll(".item-id").forEach(el => el.style.display = "none");
+  const cssInput = document.getElementById("cssInput");
+  if (cssInput) {
+    cssInput.addEventListener("change", async (ev) => {
+      const file = ev.target.files[0];
+      if (!file) return;
+      const cssText = await file.text();
+      window.timelineEngine.cssOverride = true;
+      const blob = new Blob([cssText], { type: "text/css" });
+      document.getElementById("dynamicCss").href = URL.createObjectURL(blob);
+      window.timelineEngine.updateFileStatus('css', file.name, 'loaded');
+    });
+  }
 
-  const now = new Date();
-  const ts = String(now.getFullYear()).slice(2)
-            + String(now.getMonth() + 1).padStart(2, "0")
-            + String(now.getDate()).padStart(2, "0")
-            + "T"
-            + String(now.getHours()).padStart(2, "0")
-            + String(now.getMinutes()).padStart(2, "0");
+  const svgInput = document.getElementById("svgInput");
+  if (svgInput) {
+    svgInput.addEventListener("change", async (ev) => {
+      const file = ev.target.files[0];
+      if (!file) return;
+      window.timelineEngine.template = await file.text();
+      window.timelineEngine.updateFileStatus('svg', file.name, 'loaded');
+    });
+  }
 
-  const blob = new Blob([svg.outerHTML], { type: "image/svg+xml" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = `${ts}-timeline.svg`;
-  a.click();
-  URL.revokeObjectURL(url);
-});
+  const downloadSvg = document.getElementById("downloadSvg");
+  if (downloadSvg) {
+    downloadSvg.addEventListener("click", () => {
+      const svg = document.querySelector("#viewer svg");
+      if (!svg) return;
+
+      // Always external view for export: IDs ausblenden
+      svg.querySelectorAll(".item-id").forEach(el => el.style.display = "none");
+
+      const now = new Date();
+      const ts = String(now.getFullYear()).slice(2)
+                + String(now.getMonth() + 1).padStart(2, "0")
+                + String(now.getDate()).padStart(2, "0")
+                + "T"
+                + String(now.getHours()).padStart(2, "0")
+                + String(now.getMinutes()).padStart(2, "0");
+
+      const blob = new Blob([svg.outerHTML], { type: "image/svg+xml" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${ts}-timeline.svg`;
+      a.click();
+      URL.revokeObjectURL(url);
+    });
+  }
+
+  const toggleView = document.getElementById("toggleView");
+  if (toggleView) {
+    toggleView.addEventListener("click", () => {
+      const body = document.body;
+      const isInternal = body.classList.contains("internal-mode");
+
+      if (isInternal) {
+        body.classList.remove("internal-mode");
+        body.classList.add("external-mode");
+        toggleView.textContent = "Switch to Internal View";
+        // Hide IDs in external mode
+        document.querySelectorAll(".item-id").forEach(el => el.style.display = "none");
+      } else {
+        body.classList.remove("external-mode");
+        body.classList.add("internal-mode");
+        toggleView.textContent = "Switch to External View";
+        // Show IDs in internal mode
+        document.querySelectorAll(".item-id").forEach(el => el.style.display = "inline");
+      }
+    });
+  }
+}
 

example/style.css

@@ -1 +1,64 @@
-body { background:#fafafa; }
+/* Example Project Dark Green Theme */
+/* This CSS demonstrates successful external stylesheet loading */
+
+body {
+  background: #1e3a2f !important;
+}
+
+#projectName {
+  color: #2d8659 !important;
+  border-bottom: 2px solid #2d8659;
+  padding-bottom: 8px;
+}
+
+#projectSubtitle {
+  color: #4a9b6b !important;
+}
+
+/* File Manager Override */
+#fileManager {
+  background: #243329 !important;
+  border-color: #2d8659 !important;
+}
+
+#fileManager h3 {
+  color: #4a9b6b !important;
+}
+
+.file-item {
+  background: #2a3f32 !important;
+  border-color: #2d8659 !important;
+}
+
+.file-item:hover {
+  border-color: #4a9b6b !important;
+  box-shadow: 0 2px 8px rgba(45, 134, 89, 0.2) !important;
+}
+
+.file-label {
+  color: #4a9b6b !important;
+}
+
+.upload-btn {
+  background: #2d8659 !important;
+}
+
+.upload-btn:hover {
+  background: #1e5a3d !important;
+}
+
+/* Buttons */
+button {
+  background: #2d8659 !important;
+}
+
+button:hover:not(:disabled) {
+  background: #4a9b6b !important;
+}
+
+/* Viewer */
+#viewer {
+  background: #2a3f32 !important;
+  border-color: #2d8659 !important;
+  color: #e8f5e8 !important;
+}

example/template.svg

@@ -1,5 +1,50 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-  <rect width="100%" height="100%" fill="#FFFFFF"/>
-  {{MONTHS}}
-  {{LANES}}
+<svg xmlns="http://www.w3.org/2000/svg" style="background: linear-gradient(135deg, #f0f9f4 0%, #e6f7ea 100%);">
+  <defs>
+    <!-- Enhanced month indicator styling -->
+    <linearGradient id="monthHeaderGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#2d8659;stop-opacity:0.15"/>
+      <stop offset="100%" style="stop-color:#4a9b6b;stop-opacity:0.08"/>
+    </linearGradient>
+
+    <!-- Drop shadow for month labels -->
+    <filter id="textShadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feDropShadow dx="1" dy="1" stdDeviation="1.5" flood-color="#2d8659" flood-opacity="0.4"/>
+    </filter>
+
+    <!-- Subtle background grid pattern -->
+    <pattern id="bgGrid" width="40" height="40" patternUnits="userSpaceOnUse">
+      <rect width="40" height="40" fill="transparent"/>
+      <circle cx="20" cy="20" r="1" fill="#4a9b6b" opacity="0.1"/>
+    </pattern>
+  </defs>
+
+  <!-- Background with subtle pattern -->
+  <rect width="100%" height="100%" fill="url(#bgGrid)"/>
+
+  <!-- Enhanced month header background -->
+  <rect x="0" y="0" width="100%" height="130" fill="url(#monthHeaderGrad)" stroke="#2d8659" stroke-width="1" opacity="0.6"/>
+
+  <!-- Title area with visual indicator -->
+  <rect x="10" y="10" width="300" height="60" fill="#ffffff" stroke="#2d8659" stroke-width="2" rx="8" opacity="0.9"/>
+  <text x="20" y="35" fill="#2d8659" font-size="16" font-weight="bold" filter="url(#textShadow)">
+    📊 External Template Active
+  </text>
+  <text x="20" y="55" fill="#4a9b6b" font-size="11" font-weight="500">
+    Enhanced styling with prominent months ✨
+  </text>
+
+  <!-- Month indicators with enhanced styling -->
+  <g class="enhanced-months" transform="translate(0,0)">
+    <rect x="0" y="75" width="100%" height="55" fill="rgba(45, 134, 89, 0.05)" stroke="#4a9b6b" stroke-width="1"/>
+    {{MONTHS}}
+  </g>
+
+  <!-- Lane content -->
+  <g class="enhanced-lanes">
+    {{LANES}}
+  </g>
+
+  <!-- Decorative border -->
+  <rect x="1" y="1" width="calc(100% - 2)" height="calc(100% - 2)"
+        fill="none" stroke="#2d8659" stroke-width="2" rx="4" opacity="0.7"/>
 </svg>

generator.js

@@ -45,8 +45,22 @@ window.timelineGenerator = {
     months.forEach((m, i) => {
       const x = left + i * monthWidth;
       const label = m.toLocaleString("de-DE", { month: "short", year: "2-digit" });
-      monthGraphics += `<line x1="${x}" y1="${gridTop}" x2="${x}" y2="${gridBottom}" stroke="#E3E8EF" />`;
-      monthGraphics += `<text x="${x + 4}" y="${monthLabelY}" fill="#5C6B7A" font-size="12">${label}</text>`;
+
+      // Enhanced styling when using external template
+      if (template && template.includes('Enhanced')) {
+        // More prominent month indicators for external template
+        monthGraphics += `<line x1="${x}" y1="${gridTop}" x2="${x}" y2="${gridBottom}" stroke="#4a9b6b" stroke-width="2" opacity="0.6" />`;
+        monthGraphics += `<rect x="${x-30}" y="${monthLabelY-20}" width="60" height="25" fill="#2d8659" opacity="0.1" rx="4" />`;
+        monthGraphics += `<text x="${x + 4}" y="${monthLabelY}" fill="#2d8659" font-size="13" font-weight="600">${label}</text>`;
+        // Add month separator
+        if (i > 0) {
+          monthGraphics += `<rect x="${x-1}" y="${gridTop}" width="2" height="${gridBottom-gridTop}" fill="#4a9b6b" opacity="0.3" />`;
+        }
+      } else {
+        // Default styling
+        monthGraphics += `<line x1="${x}" y1="${gridTop}" x2="${x}" y2="${gridBottom}" stroke="#E3E8EF" />`;
+        monthGraphics += `<text x="${x + 4}" y="${monthLabelY}" fill="#5C6B7A" font-size="12">${label}</text>`;
+      }
     });
 
     // Helper to compute month index
@@ -60,10 +74,18 @@ window.timelineGenerator = {
     laneNames.forEach((laneName, laneIdx) => {
       const laneY = top + laneIdx * (laneHeight + laneGap);
 
-      // Background band for lane
-      laneBlocks += `<rect x="40" y="${laneY - 24}" width="${left + months.length * monthWidth}" height="${laneHeight}" fill="#FFFFFF" stroke="#E3E8EF" rx="10" />`;
-      // Lane label
-      laneBlocks += `<text x="56" y="${laneY - 4}" fill="#0B1F3B" font-size="14" font-weight="600">${this.escapeXml(laneName)}</text>`;
+      // Enhanced styling when using external template
+      if (template && template.includes('Enhanced')) {
+        // More subtle lane borders for enhanced template
+        laneBlocks += `<rect x="40" y="${laneY - 24}" width="${left + months.length * monthWidth}" height="${laneHeight}" fill="rgba(255,255,255,0.7)" stroke="#4a9b6b" stroke-width="1" opacity="0.5" rx="8" />`;
+        // Enhanced lane label
+        laneBlocks += `<text x="56" y="${laneY - 4}" fill="#2d8659" font-size="14" font-weight="700">${this.escapeXml(laneName)}</text>`;
+      } else {
+        // Default lane styling
+        laneBlocks += `<rect x="40" y="${laneY - 24}" width="${left + months.length * monthWidth}" height="${laneHeight}" fill="#FFFFFF" stroke="#E3E8EF" rx="10" />`;
+        // Default lane label
+        laneBlocks += `<text x="56" y="${laneY - 4}" fill="#0B1F3B" font-size="14" font-weight="600">${this.escapeXml(laneName)}</text>`;
+      }
 
       const laneItems = laneMap.get(laneName).sort((a, b) => a.due - b.due);
       laneItems.forEach((it, idx) => {
@@ -72,11 +94,21 @@ window.timelineGenerator = {
         const cx = left + clampedMi * monthWidth + monthWidth * 0.5;
         const cy = laneY + 10 + idx * 18;
 
-        laneBlocks += `<circle cx="${cx}" cy="${cy}" r="5" fill="#0A4D8C" />`;
-        laneBlocks += `<text x="${cx + 10}" y="${cy + 4}" font-size="12" fill="#0B1F3B">
-                          <tspan class="item-id">${this.escapeXml(it.id || "")}: </tspan>
-                          <tspan class="item-title">${this.escapeXml(it.title || "")}</tspan>
-                       </text>`;
+        // Enhanced task item styling for external template
+        if (template && template.includes('Enhanced')) {
+          laneBlocks += `<circle cx="${cx}" cy="${cy}" r="6" fill="#2d8659" stroke="#4a9b6b" stroke-width="2" />`;
+          laneBlocks += `<text x="${cx + 12}" y="${cy + 4}" font-size="12" fill="#2d8659" font-weight="500">
+                            <tspan class="item-id">${this.escapeXml(it.id || "")}: </tspan>
+                            <tspan class="item-title" fill="#1e5a3d">${this.escapeXml(it.title || "")}</tspan>
+                         </text>`;
+        } else {
+          // Default task item styling
+          laneBlocks += `<circle cx="${cx}" cy="${cy}" r="5" fill="#0A4D8C" />`;
+          laneBlocks += `<text x="${cx + 10}" y="${cy + 4}" font-size="12" fill="#0B1F3B">
+                            <tspan class="item-id">${this.escapeXml(it.id || "")}: </tspan>
+                            <tspan class="item-title">${this.escapeXml(it.title || "")}</tspan>
+                         </text>`;
+        }
       });
     });
 

index.html

@@ -5,46 +5,273 @@
   <title>Timeline Generator</title>
   <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
   <link id="dynamicCss" rel="stylesheet" href="">
-  <script defer src="engine.js"></script>
-  <script defer src="generator.js"></script>
+  <style>
+    /* File Manager Styling */
+    .file-item {
+      background: #fff;
+      border: 1px solid #dee2e6;
+      border-radius: 8px;
+      padding: 12px;
+      transition: all 0.2s ease;
+    }
+
+    .file-item:hover {
+      border-color: #495057;
+      box-shadow: 0 2px 8px rgba(73, 80, 87, 0.1);
+    }
+
+    .file-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
+    .file-label {
+      font-weight: 600;
+      color: #495057;
+      font-size: 13px;
+    }
+
+    .upload-btn {
+      background: #495057;
+      color: white;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 11px;
+      cursor: pointer;
+      transition: background-color 0.2s;
+      border: none;
+      user-select: none;
+    }
+
+    .upload-btn:hover {
+      background: #343a40;
+    }
+
+    .file-status {
+      border-top: 1px solid #f1f3f4;
+      padding-top: 8px;
+    }
+
+    .file-name {
+      font-family: 'Courier New', monospace;
+      font-size: 11px;
+      font-weight: 500;
+      display: block;
+      padding: 4px 8px;
+      border-radius: 4px;
+      background: #f8f9fa;
+      color: #6c757d;
+      font-style: italic;
+      transition: all 0.2s ease;
+    }
+
+    .file-name[style*="color: #28a745"] {
+      background: #d4edda;
+      border: 1px solid #c3e6cb;
+      color: #155724 !important;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .file-name[style*="color: #dc3545"] {
+      background: #f8d7da;
+      border: 1px solid #f1b6bb;
+      color: #721c24 !important;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .file-name[style*="color: #6c757d"] {
+      background: #f8f9fa;
+      border: 1px solid #e9ecef;
+    }
+
+    .controls {
+      animation: fadeInUp 0.3s ease;
+    }
+
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    #fileManager {
+      transition: all 0.3s ease-in-out;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+
+    @media (max-width: 768px) {
+      .file-grid {
+        grid-template-columns: 1fr !important;
+      }
+
+      .file-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 6px;
+      }
+
+      .upload-btn {
+        align-self: flex-end;
+      }
+
+      .controls {
+        flex-direction: column;
+      }
+
+      .controls button {
+        width: 100%;
+      }
+    }
+
+    /* Button improvements */
+    button {
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+
+    button:hover:not(:disabled) {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    }
+
+    button:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  </style>
+  <script src="generator.js"></script>
+  <script src="engine.js"></script>
 </head>
 <body class="internal-mode" style="font-family: Inter, Arial, sans-serif; background:#f5f7fa; margin:20px;">
 
-  <h1 id="projectName" style="color:#0A4D8C; margin-bottom:8px;">Timeline Generator</h1>
+  <h1 id="projectName" style="color:#495057; margin-bottom:8px;">Timeline Generator</h1>
   <p id="projectSubtitle" style="color:#5C6B7A; margin-top:0; margin-bottom:16px;">
-    Wähle ein Projekt oder lade CSV/CSS/SVG-Dateien, um eine Timeline zu erzeugen.
+    Lade Projektdateien um eine Timeline zu erstellen oder verwende den lokalen Server für automatisches Laden.
   </p>
 
-  <div class="controls" style="margin-bottom:16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center;">
-    <label>Projekt laden:
-      <input type="file" id="projectInput" accept=".json" />
-    </label>
-    <label>CSV laden:
-      <input type="file" id="csvInput" accept=".csv" />
-    </label>
-    <label>CSS laden:
-      <input type="file" id="cssInput" accept=".css" />
-    </label>
-    <label>SVG Template laden:
-      <input type="file" id="svgInput" accept=".svg" />
-    </label>
+  <!-- Integrated File Management -->
+  <div id="fileManager" style="margin-bottom:16px; padding:16px; background:#f8f9fa; border:1px solid #e9ecef; border-radius:8px;">
+    <h3 style="margin:0 0 12px 0; font-size:14px; font-weight:600; color:#495057;">Project Files</h3>
 
-    <button id="toggleView" style="padding:8px 14px; background:#0A4D8C; color:white; border:none; border-radius:6px; cursor:pointer;">
-      Switch View (Internal / External)
-    </button>
-    <button id="downloadSvg" disabled
-      style="padding:8px 14px; background:#0A4D8C; color:white; border:none; border-radius:6px; cursor:pointer; opacity:0.6;">
-      Download SVG
-    </button>
+    <div class="file-grid" style="display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:12px; margin-bottom:16px;">
+      <div class="file-item">
+        <div class="file-header">
+          <span class="file-label">Project Configuration</span>
+          <label class="upload-btn">
+            <input type="file" id="projectInput" accept=".json" style="display:none;" />
+            📁 Load
+          </label>
+        </div>
+        <div class="file-status">
+          <span id="projectFile" class="file-name">Not loaded</span>
+        </div>
+      </div>
+
+      <div class="file-item">
+        <div class="file-header">
+          <span class="file-label">CSV Data</span>
+          <label class="upload-btn">
+            <input type="file" id="csvInput" accept=".csv" style="display:none;" />
+            📊 Load
+          </label>
+        </div>
+        <div class="file-status">
+          <span id="csvFile" class="file-name">Not loaded</span>
+        </div>
+      </div>
+
+      <div class="file-item">
+        <div class="file-header">
+          <span class="file-label">Stylesheet</span>
+          <label class="upload-btn">
+            <input type="file" id="cssInput" accept=".css" style="display:none;" />
+            🎨 Load
+          </label>
+        </div>
+        <div class="file-status">
+          <span id="cssFile" class="file-name">Not loaded</span>
+        </div>
+      </div>
+
+      <div class="file-item">
+        <div class="file-header">
+          <span class="file-label">SVG Template</span>
+          <label class="upload-btn">
+            <input type="file" id="svgInput" accept=".svg" style="display:none;" />
+            🖼️ Load
+          </label>
+        </div>
+        <div class="file-status">
+          <span id="svgFile" class="file-name">Not loaded</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="controls" style="display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding-top:12px; border-top:1px solid #dee2e6;">
+      <button id="toggleView" style="padding:8px 16px; background:#495057; color:white; border:none; border-radius:6px; cursor:pointer; font-size:12px;">
+        🔄 Switch View (Internal / External)
+      </button>
+      <button id="downloadSvg" disabled
+        style="padding:8px 16px; background:#495057; color:white; border:none; border-radius:6px; cursor:pointer; opacity:0.6; font-size:12px;">
+        💾 Download SVG
+      </button>
+    </div>
   </div>
 
   <div id="viewer" style="border:1px solid #ccd3db; background:white; padding:12px; border-radius:8px; overflow-x:auto; min-height:200px;">
-    <em style="color:#999;">Noch keine Timeline generiert.</em>
+    <div style="text-align:center; padding:40px 20px; color:#6c757d;">
+      <div style="font-size:48px; margin-bottom:16px;">📊</div>
+      <h4 style="margin:0 0 8px 0; color:#495057;">Keine Timeline verfügbar</h4>
+      <p style="margin:0; font-size:14px;">
+        Lade eine <strong>Projektkonfiguration</strong> oder <strong>CSV-Datei</strong> um zu beginnen.
+      </p>
+    </div>
   </div>
 
   <script>
     document.addEventListener("DOMContentLoaded", () => {
-      window.timelineEngine.autoLoadDefaultProject();
+      // Setup event handlers first
+      if (typeof setupEventHandlers === 'function') {
+        setupEventHandlers();
+        console.log("Event handlers set up");
+      }
+
+      // Ensure engines are loaded before auto-loading
+      function tryAutoLoad() {
+        if (window.timelineEngine && window.timelineGenerator) {
+          console.log("Both engines loaded, starting auto-load");
+          // Only try auto-load if not running from file:// protocol
+          if (location.protocol !== 'file:') {
+            window.timelineEngine.autoLoadDefaultProject();
+          } else {
+            console.log("Running from file:// protocol - auto-load disabled due to CORS");
+            document.getElementById("viewer").innerHTML =
+              "<div style='text-align:center; padding:40px 20px; color:#6c757d;'>" +
+              "<div style='font-size:48px; margin-bottom:16px;'>📁</div>" +
+              "<h4 style='margin:0 0 8px 0; color:#495057;'>Manuelle Dateien laden</h4>" +
+              "<p style='margin:0; font-size:14px;'>" +
+              "Verwende die <strong>Load</strong>-Buttons oben um Projektdateien zu laden.<br>" +
+              "<small>💡 Tipp: Für automatisches Laden verwende einen lokalen Server (z.B. <code>make serve</code>)</small>" +
+              "</p></div>";
+          }
+        } else {
+          console.log("Engines not ready, retrying...", {
+            engine: !!window.timelineEngine,
+            generator: !!window.timelineGenerator
+          });
+          setTimeout(tryAutoLoad, 50);
+        }
+      }
+      tryAutoLoad();
     });
   </script>