feat(gtm): Implement Rich Session Browser UI

- Replaced the basic session list with a dedicated, card-based Session Browser page.
- Each session card now displays product name, category, description, and a thumbnail placeholder for better usability.
- Updated the backend DB manager to extract this rich information from the existing JSON data store.
- Refactored the frontend (App.tsx, types.ts) to support the new UI and data structure.
- Added new component SessionBrowser.tsx and its corresponding CSS.
- Updated documentation to reflect the v2.6 changes.

gtm-architect/App.tsx

@@ -5,6 +5,8 @@ import * as Gemini from './geminiService';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { AlertTriangle, ArrowRight, ArrowLeft, Check, Database, Globe, Search, ShieldAlert, Cpu, Building2, UserCircle, Briefcase, Zap, Terminal, Target, Crosshair, Loader2, Plus, X, Download, ShieldCheck, Image as ImageIcon, Copy, Sparkles, Upload, CheckCircle, PenTool, Eraser, Undo, Save, RefreshCw, Pencil, Trash2, LayoutTemplate, TrendingUp, Shield, Languages, Clock, History, FileText } from 'lucide-react';
+import SessionBrowser from './components/SessionBrowser';
+import './components/SessionBrowser.css';
 
 const TRANSLATIONS = {
   en: {
@@ -206,6 +208,7 @@ const App: React.FC = () => {
   
   // Session Management
   const [sessions, setSessions] = useState<ProjectHistoryItem[]>([]);
+  const [viewingSessions, setViewingSessions] = useState(true); // Start in session view
   
   // Local state for adding new items (Human in the Loop inputs)
   // Phase 1
@@ -343,14 +346,14 @@ const App: React.FC = () => {
               phase8Result: phases.phase8_result,
               phase9Result: phases.phase9_result,
           }));
+          setViewingSessions(false); // Switch back to the main view
       } catch (e: any) {
           setError("Failed to load session: " + e.message);
           setState(s => ({ ...s, isLoading: false }));
       }
   };
 
-  const handleDeleteSession = async (e: React.MouseEvent, projectId: string) => {
-      e.stopPropagation();
+  const handleDeleteSession = async (projectId: string) => {
       if (!window.confirm("Delete this session permanently?")) return;
       
       try {
@@ -912,6 +915,13 @@ const App: React.FC = () => {
 
   const renderInputPhase = () => (
     <div className="flex flex-col items-center justify-center min-h-[60vh] animate-in fade-in slide-in-from-bottom-4 duration-700">
+      {viewingSessions ? (
+        <SessionBrowser 
+            sessions={sessions}
+            onLoadSession={handleLoadSession}
+            onDeleteSession={handleDeleteSession}
+        />
+      ) : (
       <div className="w-full max-w-4xl grid grid-cols-1 md:grid-cols-3 gap-6">
         
         {/* LEFT COLUMN: Input */}
@@ -1023,43 +1033,22 @@ const App: React.FC = () => {
                 <h3 className="font-bold flex items-center gap-2 text-slate-700 dark:text-slate-300">
                     <History size={18}/> {labels.historyTitle}
                 </h3>
-                <label className="p-1.5 rounded-lg hover:bg-blue-100 dark:hover:bg-robo-800 text-blue-600 dark:text-robo-400 cursor-pointer transition-colors" title="Load Markdown File">
-                    <input type="file" accept=".md" onChange={handleLoadMarkdown} className="hidden" />
-                    <Upload size={16}/>
-                </label>
+                <button 
+                  onClick={() => setViewingSessions(true)}
+                  className="text-sm font-bold text-blue-600 dark:text-robo-400 hover:underline"
+                >
+                    Alle anzeigen ({sessions.length})
+                </button>
             </div>
             
-            <div className="flex-1 overflow-y-auto space-y-2 pr-2">
-                {sessions.length === 0 ? (
-                    <div className="text-sm text-slate-400 italic text-center py-10">{labels.noSessions}</div>
-                ) : (
-                    sessions.map((session) => (
-                        <div key={session.id} 
-                            onClick={() => handleLoadSession(session.id)}
-                            className="p-3 rounded-lg border cursor-pointer group transition-all relative
-                            bg-white border-slate-200 hover:border-blue-400 hover:shadow-md
-                            dark:bg-robo-800 dark:border-robo-700 dark:hover:border-robo-500
-                        ">
-                            <button 
-                                onClick={(e) => handleDeleteSession(e, session.id)}
-                                className="absolute top-2 right-2 p-1.5 rounded-md opacity-0 group-hover:opacity-100 hover:bg-red-50 dark:hover:bg-red-900/30 text-slate-400 hover:text-red-500 transition-all"
-                            >
-                                <Trash2 size={14}/>
-                            </button>
-                            <div className="font-medium text-sm text-slate-800 dark:text-slate-200 line-clamp-1 mb-1 pr-6 group-hover:text-blue-600 dark:group-hover:text-robo-400">
-                                {session.name}
-                            </div>
-                            <div className="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-500">
-                                <Clock size={12}/>
-                                {new Date(session.updated_at + "Z").toLocaleDateString()}
-                            </div>
-                        </div>
-                    ))
-                )}
+            <div className="flex-1 flex items-center justify-center">
+                <p className="text-center text-slate-500 text-sm p-4">
+                    Oder starten Sie eine neue Analyse auf der linken Seite.
+                </p>
             </div>
         </div>
-
       </div>
+      )}
     </div>
   );