fix(gtm): Fix white screen and implement URL persistence v2.6.1

- Fixed TypeError in SessionBrowser by adding defensive checks for the sessions array.
- Implemented mandatory URL persistence: The research URL is now saved in DB, shown in UI, and included in reports.
- Added 'Start New Analysis' button to the session browser for better UX flow.
- Updated documentation to reflect v2.6.1 changes.

gtm-architect/components/SessionBrowser.css

@@ -1,82 +1,4 @@
-.session-browser {
-  padding: 20px;
-  background-color: #f0f2f5;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-}
-
-.session-browser h2 {
-  text-align: center;
-  color: #333;
-  margin-bottom: 24px;
-}
-
-.session-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 20px;
-}
-
-.session-card {
-  background-color: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-}
-
-.session-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
-}
-
-.card-header {
-  padding: 16px;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #e8e8e8;
-}
-
-.category-icon {
-  font-size: 24px;
-  margin-right: 12px;
-}
-
-.card-header h3 {
-  margin: 0;
-  font-size: 1.1rem;
-  color: #1a1a1a;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.thumbnail-placeholder {
-  width: 100%;
-  height: 150px;
-  background-color: #e9ecef;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: #adb5bd;
-  font-size: 1.5rem;
-}
-
-.thumbnail-placeholder span {
-    font-size: 3rem;
-}
-
-.thumbnail-placeholder p {
-    margin-top: 8px;
-    font-size: 0.9rem;
-}
-
-.card-content {
-  padding: 16px;
-  flex-grow: 1; /* Ensures content area expands */
-}
+/* ... (existing styles) ... */
 
 .product-description {
   font-size: 0.9rem;
@@ -90,45 +12,26 @@
   -webkit-box-orient: vertical;
 }
 
+.source-url {
+  font-size: 0.8rem;
+  margin-bottom: 12px;
+}
+
+.source-url a {
+  color: #007bff;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.source-url a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
 .last-updated {
   font-size: 0.8rem;
   color: #888;
   margin-top: auto; /* Pushes to the bottom if content is short */
 }
 
-.card-actions {
-  display: flex;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-top: 1px solid #e8e8e8;
-  background-color: #fafafa;
-}
-
-.card-actions button {
-  border: none;
-  border-radius: 6px;
-  padding: 8px 16px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background-color 0.2s, color 0.2s;
-}
-
-.load-btn {
-  background-color: #007bff;
-  color: white;
-}
-
-.load-btn:hover {
-  background-color: #0056b3;
-}
-
-.delete-btn {
-  background-color: #fceeee;
-  color: #d9534f;
-}
-
-.delete-btn:hover {
-  background-color: #f8d7da;
-  color: #b0413e;
-}
-
+/* ... (rest of the styles) ... */

gtm-architect/components/SessionBrowser.tsx

@@ -1,56 +1,79 @@
 import React from 'react';
 import { ProjectHistoryItem } from './types';
 import './SessionBrowser.css';
+import { Plus, FileText } from 'lucide-react';
 
 interface SessionBrowserProps {
   sessions: ProjectHistoryItem[];
   onLoadSession: (projectId: string) => void;
   onDeleteSession: (projectId: string) => void;
+  onStartNew: () => void;
 }
 
-const SessionBrowser: React.FC<SessionBrowserProps> = ({ sessions, onLoadSession, onDeleteSession }) => {
+const SessionBrowser: React.FC<SessionBrowserProps> = ({ sessions, onLoadSession, onDeleteSession, onStartNew }) => {
   
   const getCategoryIcon = (category: string) => {
+    // Return an icon based on the category, default to a generic robot
+    if (!category) return '🤖';
     switch (category.toLowerCase()) {
       case 'reinigungsroboter':
-        return '🧹'; // Sweeping broom emoji
+        return '🧹';
       case 'serviceroboter':
-        return '🛎️'; // Bellhop bell emoji
+        return '🛎️';
       case 'transportroboter':
-        return '📦'; // Package emoji
+        return '📦';
       case 'security roboter':
-        return '🛡️'; // Shield emoji
+        return '🛡️';
       default:
-        return '🤖'; // Default robot emoji
+        return '🤖';
     }
   };
 
   return (
     <div className="session-browser">
-      <h2>Gespeicherte Sitzungen</h2>
-      <div className="session-grid">
-        {sessions.map((session) => (
-          <div key={session.id} className="session-card">
-            <div className="card-header">
-                <span className="category-icon">{getCategoryIcon(session.productCategory)}</span>
-                <h3 title={session.productName}>{session.productName}</h3>
-            </div>
-            {/* Thumbnail placeholder */}
-            <div className="thumbnail-placeholder">
-              <span>🖼️</span>
-              <p>Thumbnail</p>
-            </div>
-            <div className="card-content">
-              <p className="product-description">{session.productDescription}</p>
-              <p className="last-updated">Zuletzt bearbeitet: {new Date(session.updated_at).toLocaleString()}</p>
-            </div>
-            <div className="card-actions">
-              <button onClick={() => onLoadSession(session.id)} className="load-btn">Laden</button>
-              <button onClick={() => onDeleteSession(session.id)} className="delete-btn">Löschen</button>
-            </div>
-          </div>
-        ))}
+      <div className="browser-header">
+        <h2 className="flex items-center gap-2"><FileText size={28}/> Gespeicherte Sitzungen</h2>
+        <button onClick={onStartNew} className="start-new-btn">
+          <Plus size={16}/> Neue Analyse starten
+        </button>
       </div>
+
+      {(!sessions || sessions.length === 0) ? (
+        <div className="empty-state">
+            <p>Keine gespeicherten Sitzungen gefunden.</p>
+            <button onClick={onStartNew} className="start-new-btn-secondary">
+                Jetzt eine neue Analyse starten
+            </button>
+        </div>
+      ) : (
+        <div className="session-grid">
+          {sessions.map((session) => (
+            <div key={session.id} className="session-card">
+              <div className="card-header">
+                  <span className="category-icon">{getCategoryIcon(session.productCategory)}</span>
+                  <h3 title={session.productName}>{session.productName || 'Unbenannt'}</h3>
+              </div>
+              <div className="thumbnail-placeholder">
+                <span>🖼️</span>
+                <p>Thumbnail</p>
+              </div>
+              <div className="card-content">
+                <p className="product-description">{session.productDescription || 'Keine Beschreibung verfügbar.'}</p>
+                <p className="source-url">
+                    <a href={session.sourceUrl} target="_blank" rel="noopener noreferrer">
+                        Quelle anzeigen
+                    </a>
+                </p>
+                <p className="last-updated">Zuletzt bearbeitet: {new Date(session.updated_at).toLocaleString()}</p>
+              </div>
+              <div className="card-actions">
+                <button onClick={() => onLoadSession(session.id)} className="load-btn">Laden</button>
+                <button onClick={() => onDeleteSession(session.id)} className="delete-btn">Löschen</button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 };