From 0281387f871382a2857db30c89fd45ca09d2c540 Mon Sep 17 00:00:00 2001 From: Floke Date: Thu, 8 Jan 2026 21:23:46 +0000 Subject: [PATCH] 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 | 57 ++++----- gtm-architect/components/SessionBrowser.css | 134 ++++++++++++++++++++ gtm-architect/components/SessionBrowser.tsx | 58 +++++++++ gtm-architect/types.ts | 4 + gtm_architect_documentation.md | 10 +- gtm_db_manager.py | 28 +++- 6 files changed, 252 insertions(+), 39 deletions(-) create mode 100644 gtm-architect/components/SessionBrowser.css create mode 100644 gtm-architect/components/SessionBrowser.tsx diff --git a/gtm-architect/App.tsx b/gtm-architect/App.tsx index 55eea0cf..ad9e343d 100644 --- 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([]); + 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 = () => (
+ {viewingSessions ? ( + + ) : (
{/* LEFT COLUMN: Input */} @@ -1023,43 +1033,22 @@ const App: React.FC = () => {

{labels.historyTitle}

- +
-
- {sessions.length === 0 ? ( -
{labels.noSessions}
- ) : ( - sessions.map((session) => ( -
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 - "> - -
- {session.name} -
-
- - {new Date(session.updated_at + "Z").toLocaleDateString()} -
-
- )) - )} +
+

+ Oder starten Sie eine neue Analyse auf der linken Seite. +

-
+ )} ); diff --git a/gtm-architect/components/SessionBrowser.css b/gtm-architect/components/SessionBrowser.css new file mode 100644 index 00000000..5c5a19e9 --- /dev/null +++ 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; +} + diff --git a/gtm-architect/components/SessionBrowser.tsx b/gtm-architect/components/SessionBrowser.tsx new file mode 100644 index 00000000..b719bb74 --- /dev/null +++ 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 = ({ 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 ( +
+

Gespeicherte Sitzungen

+
+ {sessions.map((session) => ( +
+
+ {getCategoryIcon(session.productCategory)} +

{session.productName}

+
+ {/* Thumbnail placeholder */} +
+ 🖼️ +

Thumbnail

+
+
+

{session.productDescription}

+

Zuletzt bearbeitet: {new Date(session.updated_at).toLocaleString()}

+
+
+ + +
+
+ ))} +
+
+ ); +}; + +export default SessionBrowser; diff --git a/gtm-architect/types.ts b/gtm-architect/types.ts index 471e234d..d60b92d6 100644 --- 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 } \ No newline at end of file diff --git a/gtm_architect_documentation.md b/gtm_architect_documentation.md index 60b1d61d..0a049e9f 100644 --- 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`. diff --git a/gtm_db_manager.py b/gtm_db_manager.py index 07e1017e..e14809ef 100644 --- 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()