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.
2026-01-08 21:23:46 +00:00
parent 57206d0916
commit 0281387f87
6 changed files with 252 additions and 39 deletions
--- a/gtm-architect/App.tsx
+++ b/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>
  );

--- a/gtm-architect/components/SessionBrowser.css
+++ b/gtm-architect/components/SessionBrowser.css
@@ -0,0 +1,134 @@
+.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 */
+}
+
+.product-description {
+  font-size: 0.9rem;
+  color: #555;
+  margin-bottom: 12px;
+  height: 4.5em; /* Approximately 3 lines of text */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.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;
+}
+
--- a/gtm-architect/components/SessionBrowser.tsx
+++ b/gtm-architect/components/SessionBrowser.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { ProjectHistoryItem } from './types';
+import './SessionBrowser.css';
+
+interface SessionBrowserProps {
+  sessions: ProjectHistoryItem[];
+  onLoadSession: (projectId: string) => void;
+  onDeleteSession: (projectId: string) => void;
+}
+
+const SessionBrowser: React.FC<SessionBrowserProps> = ({ sessions, onLoadSession, onDeleteSession }) => {
+  
+  const getCategoryIcon = (category: string) => {
+    switch (category.toLowerCase()) {
+      case 'reinigungsroboter':
+        return '🧹'; // Sweeping broom emoji
+      case 'serviceroboter':
+        return '🛎️'; // Bellhop bell emoji
+      case 'transportroboter':
+        return '📦'; // Package emoji
+      case 'security roboter':
+        return '🛡️'; // Shield emoji
+      default:
+        return '🤖'; // Default robot emoji
+    }
+  };
+
+  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>
+    </div>
+  );
+};
+
+export default SessionBrowser;
--- a/gtm-architect/types.ts
+++ b/gtm-architect/types.ts
@@ -165,4 +165,8 @@ export interface ProjectHistoryItem {
    name: string;
    created_at: string;
    updated_at: string;
+    productName: string;
+    productCategory: string;
+    productDescription: string;
+    productThumbnail?: string; // Optional for now
 }
--- a/gtm_architect_documentation.md
+++ b/gtm_architect_documentation.md
@@ -71,7 +71,7 @@ Die `call_gemini_image`-Funktion wählt automatisch die beste Methode basierend
 | **2** | `phase2` | Phase 1 Result | ICPs, Data Proxies | Identifiziert ideale Kundenprofile. |
 | **3** | `phase3` | Phase 2 Result | Whales, Rollen | Identifiziert Zielkunden & Buying Center. |
 | **4** | `phase4` | Phase 1 & 3 | Strategy Matrix | Entwickelt "Angles" und Pain-Points. |
-| **5** | `phase5` | Alle Daten | Markdown Report | **Strategie-Fixierung**. Konsolidierter Report. |
+| **5** | `phase5` | Alle Daten | Markdown Report | **Strategie-Fixierung**. Konsolidierter Report inkl. technischer Spezifikationen (Hard Facts) aus Phase 1. |
 | **6** | `phase6` | Phase 1, 3, 4 | Battlecards, Prompts | Generiert Einwandbehandlung & Bild-Prompts. |
 | **7** | `phase7` | Phase 2, 4 | Landing Page Copy | Erstellt Landingpage-Texte. |
 | **8** | `phase8` | Phase 1, 2 | Business Case | CFO-Argumentation, ROI-Logik. |
@@ -80,7 +80,7 @@ Die `call_gemini_image`-Funktion wählt automatisch die beste Methode basierend
 ## 5. Sitzungs-Management

 Das System verwaltet persistente Sitzungen in der SQLite-Datenbank:
-*   **List:** Abruf aller gespeicherten Projekte mit Zeitstempel.
+*   **List:** Abruf aller gespeicherten Projekte, angereichert mit extrahierten Metadaten wie Produktname, Kategorie und Beschreibung für eine informative Übersicht.
 *   **Load:** Vollständige Wiederherstellung des App-States (alle Phasen).
 *   **Delete:** Permanentes Entfernen aus der Datenbank.

@@ -91,6 +91,12 @@ Das System verwaltet persistente Sitzungen in der SQLite-Datenbank:

 ## 7. Historie & Fixes (Jan 2026)

+*   **[UPGRADE] v2.6: Rich Session Browser**
+    *   **Neues UI:** Die textbasierte Liste für "Letzte Sitzungen" wurde durch eine dedizierte, kartenbasierte UI (`SessionBrowser.tsx`) ersetzt.
+    *   **Angereicherte Daten:** Jede Sitzungskarte zeigt nun den Produktnamen, die Produktkategorie (mit Icon), eine Kurzbeschreibung und einen Thumbnail-Platzhalter an.
+    *   **Backend-Anpassung:** Die Datenbankabfrage (`gtm_db_manager.py`) wurde erweitert, um diese Metadaten direkt aus der JSON-Spalte zu extrahieren und an das Frontend zu liefern.
+    *   **Verbesserte UX:** Deutlich verbesserte Übersichtlichkeit und schnellere Identifikation von vergangenen Analysen.
+
 *   **[UPGRADE] v2.5: Hard Fact Extraction**
    *   **Phase 1 Erweiterung:** Implementierung eines sekundären Extraktions-Schritts für "Hard Facts" (Specs).
    *   **Strukturiertes Daten-Schema:** Integration von `templates/json_struktur_roboplanet.txt`.
--- a/gtm_db_manager.py
+++ b/gtm_db_manager.py
@@ -94,11 +94,33 @@ def get_project_data(project_id):
            conn.close()

 def get_all_projects():
-    """Lists all projects."""
+    """Lists all projects with key details extracted from the JSON data."""
    conn = get_db_connection()
    try:
-        projects = conn.execute('SELECT id, name, created_at, updated_at FROM gtm_projects ORDER BY updated_at DESC').fetchall()
-        return [dict(ix) for ix in projects]
+        query = """
+            SELECT 
+                id, 
+                name, 
+                updated_at,
+                json_extract(data, '$.phases.phase1_result.specs.metadata.model_name') AS productName,
+                json_extract(data, '$.phases.phase1_result.specs.metadata.category') AS productCategory,
+                json_extract(data, '$.phases.phase1_result.specs.metadata.description') AS productDescription
+            FROM gtm_projects 
+            ORDER BY updated_at DESC
+        """
+        projects = conn.execute(query).fetchall()
+        # Convert row objects to dictionaries, handling potential None values
+        project_list = []
+        for row in projects:
+            project_dict = dict(row)
+            if project_dict.get('productName') is None:
+                project_dict['productName'] = project_dict['name'] # Fallback to project name
+            if project_dict.get('productCategory') is None:
+                project_dict['productCategory'] = "Uncategorized" # Default category
+            if project_dict.get('productDescription') is None:
+                project_dict['productDescription'] = "No description available." # Default description
+            project_list.append(project_dict)
+        return project_list
    finally:
        if conn:
            conn.close()