Update: GTM Architect v2.6.2 (Edit Specs, Report Fix) & Company Explorer v0.4 (Export, Timestamps)

company-explorer/frontend/src/components/Inspector.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import axios from 'axios'
-import { X, ExternalLink, Bot, Briefcase, Calendar, Globe, Users, DollarSign, MapPin, Tag, RefreshCw as RefreshCwIcon, Search as SearchIcon, Pencil, Check } from 'lucide-react'
+import { X, ExternalLink, Bot, Briefcase, Calendar, Globe, Users, DollarSign, MapPin, Tag, RefreshCw as RefreshCwIcon, Search as SearchIcon, Pencil, Check, Download, Clock } from 'lucide-react'
 import clsx from 'clsx'
 
 interface InspectorProps {
@@ -20,6 +20,7 @@ type EnrichmentData = {
   source_type: string
   content: any
   is_locked?: boolean
+  created_at?: string
 }
 
 type CompanyDetail = {
@@ -110,6 +111,38 @@ export function Inspector({ companyId, onClose, apiBase }: InspectorProps) {
     }
   }
   
+  const handleExport = () => {
+      if (!data) return;
+      
+      // Prepare full export object
+      const exportData = {
+          metadata: {
+              id: data.id,
+              exported_at: new Date().toISOString(),
+              source: "Company Explorer (Robotics Edition)"
+          },
+          company: {
+              name: data.name,
+              website: data.website,
+              status: data.status,
+              industry_ai: data.industry_ai,
+              created_at: data.created_at
+          },
+          enrichment: data.enrichment_data,
+          signals: data.signals
+      };
+
+      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `company-export-${data.id}-${data.name.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+  };
+  
   const handleWikiOverride = async () => {
     if (!companyId) return
     setIsProcessing(true)
@@ -145,11 +178,16 @@ export function Inspector({ companyId, onClose, apiBase }: InspectorProps) {
   const wikiEntry = data?.enrichment_data?.find(e => e.source_type === 'wikipedia')
   const wiki = wikiEntry?.content
   const isLocked = wikiEntry?.is_locked
+  const wikiDate = wikiEntry?.created_at
   
-  const aiAnalysis = data?.enrichment_data?.find(e => e.source_type === 'ai_analysis')?.content
+  const aiAnalysisEntry = data?.enrichment_data?.find(e => e.source_type === 'ai_analysis')
+  const aiAnalysis = aiAnalysisEntry?.content
+  const aiDate = aiAnalysisEntry?.created_at
   
-  const scrapeData = data?.enrichment_data?.find(e => e.source_type === 'website_scrape')?.content
+  const scrapeEntry = data?.enrichment_data?.find(e => e.source_type === 'website_scrape')
+  const scrapeData = scrapeEntry?.content
   const impressum = scrapeData?.impressum
+  const scrapeDate = scrapeEntry?.created_at
 
   return (
     <div className="fixed inset-y-0 right-0 w-[550px] bg-slate-900 border-l border-slate-800 shadow-2xl transform transition-transform duration-300 ease-in-out z-40 overflow-y-auto">
@@ -164,6 +202,13 @@ export function Inspector({ companyId, onClose, apiBase }: InspectorProps) {
             <div className="flex justify-between items-start mb-4">
               <h2 className="text-xl font-bold text-white leading-tight">{data.name}</h2>
               <div className="flex items-center gap-2">
+                <button 
+                  onClick={handleExport} 
+                  className="p-1.5 text-slate-500 hover:text-blue-400 transition-colors"
+                  title="Export JSON"
+                >
+                  <Download className="h-4 w-4" />
+                </button>
                 <button 
                   onClick={() => fetchData(true)} 
                   className="p-1.5 text-slate-500 hover:text-white transition-colors"
@@ -261,12 +306,19 @@ export function Inspector({ companyId, onClose, apiBase }: InspectorProps) {
             {/* Impressum / Legal Data (NEW) */}
             {impressum && (
                 <div className="bg-slate-950 rounded-lg p-4 border border-slate-800 flex flex-col gap-2">
-                    <div className="flex items-center gap-2 mb-1">
+                    <div className="flex items-center justify-between mb-1">
+                        <div className="flex items-center gap-2">
                             <div className="p-1 bg-slate-800 rounded text-slate-400">
                                 <Briefcase className="h-3 w-3" />
                             </div>
                             <span className="text-[10px] uppercase font-bold text-slate-500 tracking-wider">Official Legal Data</span>
                         </div>
+                        {scrapeDate && (
+                            <div className="text-[10px] text-slate-600 flex items-center gap-1">
+                                <Clock className="h-3 w-3" /> {new Date(scrapeDate).toLocaleDateString()}
+                            </div>
+                        )}
+                    </div>
                     
                     <div className="text-sm font-medium text-white">
                         {impressum.legal_name || "Unknown Legal Name"}
@@ -293,9 +345,16 @@ export function Inspector({ companyId, onClose, apiBase }: InspectorProps) {
             {/* AI Analysis Dossier (NEW) */}
             {aiAnalysis && (
                 <div className="space-y-4">
+                    <div className="flex items-center justify-between">
                         <h3 className="text-sm font-semibold text-slate-400 uppercase tracking-wider flex items-center gap-2">
                             <Bot className="h-4 w-4" /> AI Strategic Dossier
                         </h3>
+                        {aiDate && (
+                            <div className="text-[10px] text-slate-600 flex items-center gap-1">
+                                <Clock className="h-3 w-3" /> {new Date(aiDate).toLocaleDateString()}
+                            </div>
+                        )}
+                    </div>
                     <div className="bg-slate-800/30 rounded-xl p-5 border border-slate-800/50 space-y-4">
                         <div>
                             <div className="text-[10px] text-blue-400 uppercase font-bold tracking-tight mb-1">Business Model</div>
@@ -317,6 +376,13 @@ export function Inspector({ companyId, onClose, apiBase }: InspectorProps) {
                   <h3 className="text-sm font-semibold text-slate-400 uppercase tracking-wider flex items-center gap-2">
                     <Globe className="h-4 w-4" /> Company Profile (Wikipedia)
                   </h3>
+                  
+                  <div className="flex items-center gap-2">
+                      {wikiDate && (
+                            <div className="text-[10px] text-slate-600 flex items-center gap-1 mr-2">
+                                <Clock className="h-3 w-3" /> {new Date(wikiDate).toLocaleDateString()}
+                            </div>
+                        )}
                       {!isEditingWiki ? (
                           <button 
                             onClick={() => { setWikiUrlInput(wiki?.url || ""); setIsEditingWiki(true); }}
@@ -344,6 +410,7 @@ export function Inspector({ companyId, onClose, apiBase }: InspectorProps) {
                           </div>
                       )}
                   </div>
+               </div>
 
                {isEditingWiki && (
                    <div className="mb-2">

gtm-architect/App.tsx

@@ -208,7 +208,7 @@ const App: React.FC = () => {
   
   // Session Management
   const [sessions, setSessions] = useState<ProjectHistoryItem[]>([]);
-  const [viewingSessions, setViewingSessions] = useState(true); // Start in session view
+  const [viewingSessions, setViewingSessions] = useState(false); // Start in input view
 
   // Local state for adding new items (Human in the Loop inputs)
   // Phase 1
@@ -237,6 +237,10 @@ const App: React.FC = () => {
   const [brushColor, setBrushColor] = useState('#ef4444'); // Red for annotations
   const [brushSize, setBrushSize] = useState(4);
 
+  // Specs Editing
+  const [isEditingSpecs, setIsEditingSpecs] = useState(false);
+  const [specsJsonInput, setSpecsJsonInput] = useState("");
+
   const labels = TRANSLATIONS[language];
 
   // Apply theme to body
@@ -918,6 +922,31 @@ const App: React.FC = () => {
       }));
   };
 
+  const handleSaveSpecs = async () => {
+      if (!state.projectId) return;
+      try {
+          const parsedSpecs = JSON.parse(specsJsonInput);
+          setState(s => ({ ...s, isLoading: true }));
+          
+          await Gemini.updateSpecs(state.projectId, parsedSpecs);
+          
+          setState(s => ({
+              ...s,
+              isLoading: false,
+              phase1Result: s.phase1Result ? {
+                  ...s.phase1Result,
+                  specs: parsedSpecs
+              } : undefined
+          }));
+          setIsEditingSpecs(false);
+          setError(null);
+      } catch (e: any) {
+          console.error("Failed to save specs", e);
+          setError("Invalid JSON or Save Failed: " + e.message);
+          setState(s => ({ ...s, isLoading: false }));
+      }
+  };
+
   // --- Render Helpers ---
 
   const renderInputPhase = () => (
@@ -1074,7 +1103,7 @@ const App: React.FC = () => {
           <div>
             <h3 className="text-sm font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-2">{labels.features}</h3>
             <ul className="space-y-2">
-              {state.phase1Result?.features.map((f, i) => (
+              {(state.phase1Result?.features || []).map((f, i) => (
                 <li key={i} className="flex justify-between items-center group text-sm p-2 rounded border transition-colors
                     bg-slate-50 border-slate-200 text-slate-700
                     dark:bg-robo-900 dark:border-robo-700 dark:text-slate-200
@@ -1113,7 +1142,7 @@ const App: React.FC = () => {
           <div>
             <h3 className="text-sm font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-2">{labels.constraints}</h3>
             <ul className="space-y-2">
-              {state.phase1Result?.constraints.map((c, i) => (
+              {(state.phase1Result?.constraints || []).map((c, i) => (
                 <li key={i} className="flex justify-between items-center group text-sm p-2 rounded border transition-colors
                     bg-red-50 border-red-200 text-red-700
                     dark:bg-robo-900 dark:border-red-900/30 dark:text-red-200
@@ -1153,10 +1182,51 @@ const App: React.FC = () => {
       {/* NEW: Hard Facts Specs Display */}
       {state.phase1Result?.specs && 'metadata' in state.phase1Result.specs && (
         <div className="p-6 rounded-xl border transition-colors bg-white border-slate-200 dark:bg-robo-800 dark:border-robo-700">
-            <h2 className="text-xl font-bold mb-4 flex items-center gap-2 text-slate-900 dark:text-white">
+            <div className="flex justify-between items-center mb-4">
+                <h2 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
                     <Database className="text-blue-500" /> Technical Specifications (Hard Facts)
                 </h2>
+                {!isEditingSpecs ? (
+                    <button 
+                        onClick={() => {
+                            setSpecsJsonInput(JSON.stringify(state.phase1Result?.specs, null, 2));
+                            setIsEditingSpecs(true);
+                        }}
+                        className="text-xs font-bold px-3 py-1.5 rounded bg-slate-100 dark:bg-robo-700 hover:bg-slate-200 dark:hover:bg-robo-600 text-slate-600 dark:text-slate-300 transition-colors flex items-center gap-1"
+                    >
+                        <Pencil size={12}/> Edit Raw Data
+                    </button>
+                ) : (
+                    <div className="flex gap-2">
+                         <button 
+                            onClick={() => setIsEditingSpecs(false)}
+                            className="text-xs font-bold px-3 py-1.5 rounded bg-slate-100 dark:bg-robo-700 hover:bg-slate-200 dark:hover:bg-robo-600 text-slate-600 dark:text-slate-300 transition-colors"
+                        >
+                            Cancel
+                        </button>
+                        <button 
+                            onClick={handleSaveSpecs}
+                            className="text-xs font-bold px-3 py-1.5 rounded bg-blue-600 hover:bg-blue-700 text-white transition-colors flex items-center gap-1"
+                        >
+                            <Save size={12}/> Save Changes
+                        </button>
+                    </div>
+                )}
+            </div>
 
+            {isEditingSpecs ? (
+                <div className="animate-in fade-in">
+                    <p className="text-xs text-slate-500 mb-2">
+                        Edit the raw JSON data below. Be careful with the syntax. This data is used for the Strategy Report.
+                    </p>
+                    <textarea
+                        value={specsJsonInput}
+                        onChange={(e) => setSpecsJsonInput(e.target.value)}
+                        className="w-full h-96 font-mono text-xs p-4 rounded bg-slate-50 border border-slate-300 text-slate-800 focus:ring-2 focus:ring-blue-500 outline-none
+                        dark:bg-robo-900 dark:border-robo-600 dark:text-slate-300"
+                    />
+                </div>
+            ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                 {/* Core Data */}
                 <div className="p-4 bg-slate-50 dark:bg-robo-900 rounded-lg border border-slate-200 dark:border-robo-700">
@@ -1222,9 +1292,9 @@ const App: React.FC = () => {
                     )}
                 </div>
             </div>
+            )}
 
-            {/* Extended Features */}
+            {!isEditingSpecs && state.phase1Result.specs.extended_features.length > 0 && (
-            {state.phase1Result.specs.extended_features.length > 0 && (
                 <div>
                      <h3 className="text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Extended Features</h3>
                      <div className="flex flex-wrap gap-2">
@@ -1239,7 +1309,7 @@ const App: React.FC = () => {
         </div>
       )}
 
-      {state.phase1Result?.conflictCheck.hasConflict ? (
+      {state.phase1Result?.conflictCheck?.hasConflict ? (
         <div className="border p-6 rounded-xl flex gap-4 transition-colors
             bg-red-50 border-red-200
             dark:bg-red-950/50 dark:border-red-500/50
@@ -1299,7 +1369,7 @@ const App: React.FC = () => {
         <h2 className="text-2xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
             <Target className="text-blue-600 dark:text-robo-accent"/> {labels.targetId}
         </h2>
-        {state.phase2Result?.icps.map((icp, i) => (
+        {(state.phase2Result?.icps || []).map((icp, i) => (
           <div key={i} className="relative p-6 rounded-xl border transition-colors cursor-default group
             bg-white border-slate-200 hover:border-blue-400
             dark:bg-robo-800 dark:border-robo-700 dark:hover:border-robo-500
@@ -1361,7 +1431,7 @@ const App: React.FC = () => {
            <Database size={16}/> {labels.dataProxies}
          </h3>
          <div className="space-y-3">
-            {state.phase2Result?.dataProxies.map((proxy, i) => (
+            {(state.phase2Result?.dataProxies || []).map((proxy, i) => (
               <div key={i} className="flex gap-4 items-center p-3 rounded-lg group relative
                 bg-white border border-slate-200
                 dark:bg-black/20 dark:border-transparent
@@ -1452,7 +1522,7 @@ const App: React.FC = () => {
               </h3>
               
               <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                {state.phase3Result?.whales.map((whaleGroup, groupIdx) => (
+                {(state.phase3Result?.whales || []).map((whaleGroup, groupIdx) => (
                     <div key={groupIdx} className="p-6 rounded-xl border transition-colors flex flex-col
                         bg-white border-slate-200
                         dark:bg-robo-800 dark:border-robo-700
@@ -1518,7 +1588,7 @@ const App: React.FC = () => {
                <UserCircle className="text-blue-500 dark:text-blue-400"/> {labels.roles}
              </h3>
              <ul className="space-y-3">
-                {state.phase3Result?.roles.map((role: any, i) => (
+                {(state.phase3Result?.roles || []).map((role: any, i) => (
                   <li key={i} className="flex items-center justify-between group p-3 rounded-lg border transition-colors
                     bg-slate-50 border-slate-200
                     dark:bg-robo-900 dark:border-robo-800
@@ -1613,7 +1683,7 @@ const App: React.FC = () => {
             </tr>
           </thead>
           <tbody className="divide-y divide-slate-200 dark:divide-robo-700 bg-white dark:bg-robo-800">
-            {state.phase4Result?.strategyMatrix.map((row, i) => (
+            {(state.phase4Result?.strategyMatrix || []).map((row, i) => (
               <tr key={i} className="hover:bg-slate-50 dark:hover:bg-robo-700/50 transition-colors">
                 <td className="p-4 font-bold text-slate-800 dark:text-white">{row.segment}</td>
                 <td className="p-4 text-sm text-red-600 dark:text-red-300">{row.painPoint}</td>
@@ -1657,6 +1727,14 @@ const App: React.FC = () => {
             <Terminal className="text-pink-600 dark:text-pink-400"/> {labels.genAssets}
          </h2>
          <div className="flex items-center gap-4">
+             <button 
+                onClick={handlePhase5Submit} 
+                disabled={state.isLoading} 
+                className="text-xs flex items-center gap-1 bg-blue-100 dark:bg-robo-700 text-blue-700 dark:text-blue-300 px-3 py-1.5 rounded hover:bg-blue-200 dark:hover:bg-robo-600 transition-colors font-bold"
+                title="Regenerate Report with latest data"
+             >
+                <RefreshCw size={14}/> Refresh
+             </button>
              <div className="text-xs font-mono text-slate-500">format: markdown</div>
          </div>
       </div>

gtm-architect/App.tsx.backup

@@ -0,0 +1,16 @@
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Layout } from './components/Layout';
+import { Phase, AppState, Phase1Data, Phase2Data, Phase3Data, Phase4Data, Phase6Data, Phase7Data, Phase8Data, Phase9Data, Language, Theme, ProjectHistoryItem } from './types';
+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 = {
+  // ... (TRANSLATIONS content would be here, but using placeholder to save context space if writing full file is needed, 
+  // but since we are modifying via replace, I'll stick to replace strategy but with more precise context)
+};
+// ...

gtm-architect/components/Layout.tsx

@@ -78,7 +78,7 @@ export const Layout: React.FC<LayoutProps> = ({
           <div>
             <h1 className="text-xl font-bold font-mono tracking-tighter flex items-center gap-2 text-slate-900 dark:text-white">
               <div className="w-3 h-3 bg-robo-500 dark:bg-robo-accent rounded-full animate-pulse"></div>
-              ROBOPLANET v2.5
+              ROBOPLANET v2.6
             </h1>
             <p className="text-xs mt-1 uppercase tracking-widest text-slate-500 dark:text-robo-400">GTM Architect Engine</p>
           </div>

gtm-architect/components/SessionBrowser.css

@@ -1,37 +1,277 @@
-/* ... (existing styles) ... */
+.session-browser {
+  padding: 1rem;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
 
-.product-description {
+.browser-header {
-  font-size: 0.9rem;
+  display: flex;
-  color: #555;
+  justify_content: space-between;
-  margin-bottom: 12px;
+  align-items: center;
-  height: 4.5em; /* Approximately 3 lines of text */
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.browser-header h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.dark .browser-header h2 {
+  color: #f1f5f9;
+}
+
+.start-new-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background-color: #2563eb;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  transition: background-color 0.2s;
+}
+
+.start-new-btn:hover {
+  background-color: #1d4ed8;
+}
+
+/* LIST LAYOUT */
+.session-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.session-card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+  display: flex;
+  align-items: flex-start; /* Align top for multi-line description */
+  gap: 1.5rem;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.dark .session-card {
+  background: #1e293b;
+  border-color: #334155;
+}
+
+.session-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  border-color: #94a3b8;
+}
+
+/* Header Section (Left) */
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  width: 280px; /* Fixed width for alignment */
+  flex-shrink: 0;
+}
+
+.category-badge {
+  font-size: 1.75rem;
+  background: #f1f5f9;
+  width: 3.5rem;
+  height: 3.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.75rem;
+  flex-shrink: 0;
+}
+
+.dark .category-badge {
+  background: #334155;
+}
+
+.card-title-container {
+  flex: 1;
+  min-width: 0;
+}
+
+.card-title {
+  font-weight: 700;
+  font-size: 1rem;
+  color: #0f172a;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-bottom: 0.25rem;
+}
+
+.dark .card-title {
+  color: #f8fafc;
+}
+
+.card-date {
+  font-size: 0.75rem;
+  color: #64748b;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+/* Content Section (Middle) */
+.card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-right: 1rem;
+  border-right: 1px solid #f1f5f9;
+}
+
+.dark .card-content {
+  border-right-color: #334155;
+}
+
+.product-description {
+  font-size: 0.875rem;
+  color: #475569;
+  line-height: 1.5;
   display: -webkit-box;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
-.source-url {
+.dark .product-description {
-  font-size: 0.8rem;
+  color: #94a3b8;
-  margin-bottom: 12px;
 }
 
-.source-url a {
+.card-meta {
-  color: #007bff;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-size: 0.75rem;
+}
+
+.source-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: #3b82f6;
   text-decoration: none;
-  transition: color 0.2s;
+  font-weight: 500;
+  padding: 0.25rem 0.5rem;
+  background: #eff6ff;
+  border-radius: 0.25rem;
+  transition: background 0.2s;
 }
 
-.source-url a:hover {
+.dark .source-link {
-  color: #0056b3;
+  background: #1e3a8a;
-  text-decoration: underline;
+  color: #bfdbfe;
 }
 
-.last-updated {
+.source-link:hover {
-  font-size: 0.8rem;
+  background: #dbeafe;
-  color: #888;
-  margin-top: auto; /* Pushes to the bottom if content is short */
 }
 
-/* ... (rest of the styles) ... */
+/* Actions Section (Right) */
+.card-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 120px;
+  flex-shrink: 0;
+}
+
+.load-btn {
+  width: 100%;
+  background-color: #0f172a;
+  color: white;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-align: center;
+  transition: opacity 0.2s;
+}
+
+.dark .load-btn {
+  background-color: #f8fafc;
+  color: #0f172a;
+}
+
+.load-btn:hover {
+  opacity: 0.9;
+}
+
+.delete-btn {
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  color: #ef4444;
+  background-color: transparent;
+  border: 1px solid #fecaca;
+  font-size: 0.875rem;
+  text-align: center;
+  transition: all 0.2s;
+}
+
+.dark .delete-btn {
+  border-color: #7f1d1d;
+  color: #fca5a5;
+}
+
+.delete-btn:hover {
+  background-color: #fef2f2;
+}
+
+.dark .delete-btn:hover {
+  background-color: #450a0a;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .session-card {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .card-header, .card-content, .card-actions {
+    width: 100%;
+    border-right: none;
+    padding-right: 0;
+  }
+  
+  .card-actions {
+    flex-direction: row;
+  }
+}
+
+.empty-state {
+  text-align: center;
+  padding: 4rem;
+  color: #64748b;
+}
+
+.start-new-btn-secondary {
+  margin-top: 1rem;
+  padding: 0.75rem 1.5rem;
+  background: white;
+  border: 1px solid #cbd5e1;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  color: #475569;
+  transition: all 0.2s;
+}
+
+.start-new-btn-secondary:hover {
+  border-color: #94a3b8;
+  background: #f8fafc;
+}

gtm-architect/components/SessionBrowser.tsx

@@ -15,18 +15,18 @@ const SessionBrowser: React.FC<SessionBrowserProps> = ({ sessions, onLoadSession
   const getCategoryIcon = (category: string) => {
     // Return an icon based on the category, default to a generic robot
     if (!category) return '🤖';
-    switch (category.toLowerCase()) {
+    const cat = category.toLowerCase();
-      case 'reinigungsroboter':
+    
-        return '🧹';
+    if (cat.includes('reinigung') || cat.includes('cleaning')) return '🧹';
-      case 'serviceroboter':
+    if (cat.includes('service') || cat.includes('kellner')) return '🛎️';
-        return '🛎️';
+    if (cat.includes('transport') || cat.includes('logistik') || cat.includes('logistics')) return '📦';
-      case 'transportroboter':
+    if (cat.includes('security') || cat.includes('sicherheit') || cat.includes('wach')) return '🛡️';
-        return '📦';
+    if (cat.includes('inspektion') || cat.includes('inspection')) return '🔍';
-      case 'security roboter':
+    if (cat.includes('humanoid')) return '🦾';
-        return '🛡️';
+    if (cat.includes('drohne') || cat.includes('drone')) return '🚁';
-      default:
+    if (cat.includes('rasen') || cat.includes('mower')) return '🌱';
+    
     return '🤖';
-    }
   };
 
   return (
@@ -48,27 +48,48 @@ const SessionBrowser: React.FC<SessionBrowserProps> = ({ sessions, onLoadSession
       ) : (
         <div className="session-grid">
           {sessions.map((session) => (
-            <div key={session.id} className="session-card">
+            <div key={session.id} className="session-card group">
+              {/* Left Column: Icon & Title */}
               <div className="card-header">
-                  <span className="category-icon">{getCategoryIcon(session.productCategory)}</span>
+                  <div className="category-badge" title={session.productCategory}>
-                  <h3 title={session.productName}>{session.productName || 'Unbenannt'}</h3>
+                    {getCategoryIcon(session.productCategory)}
                   </div>
-              <div className="thumbnail-placeholder">
+                  <div className="card-title-container">
-                <span>🖼️</span>
+                    <h3 className="card-title" title={session.productName}>{session.productName || 'Unbenanntes Projekt'}</h3>
-                <p>Thumbnail</p>
+                    <div className="card-date">
+                         <span className="text-xs text-slate-400">Updated:</span>
+                         {new Date(session.updated_at).toLocaleDateString()}
                     </div>
+                  </div>
+              </div>
+              
+              {/* Middle Column: Description & Meta */}
               <div className="card-content">
-                <p className="product-description">{session.productDescription || 'Keine Beschreibung verfügbar.'}</p>
+                <p className="product-description">
-                <p className="source-url">
+                  {session.productDescription && session.productDescription !== "No description available." 
-                    <a href={session.sourceUrl} target="_blank" rel="noopener noreferrer">
+                    ? session.productDescription 
-                        Quelle anzeigen
+                    : <span className="italic text-slate-400">Keine Beschreibung verfügbar.</span>}
-                    </a>
                 </p>
-                <p className="last-updated">Zuletzt bearbeitet: {new Date(session.updated_at).toLocaleString()}</p>
+                
+                <div className="card-meta">
+                   {session.sourceUrl && session.sourceUrl !== "No source URL found." && (
+                      <a href={session.sourceUrl} target="_blank" rel="noopener noreferrer" className="source-link">
+                         🔗 Link zur Quelle
+                      </a>
+                   )}
+                   <span className="text-slate-400">•</span>
+                   <span className="text-slate-500">{session.productCategory || 'Unkategorisiert'}</span>
                 </div>
+              </div>
+
+              {/* Right Column: Actions */}
               <div className="card-actions">
-                <button onClick={() => onLoadSession(session.id)} className="load-btn">Laden</button>
+                <button onClick={() => onLoadSession(session.id)} className="load-btn">
-                <button onClick={() => onDeleteSession(session.id)} className="delete-btn">Löschen</button>
+                    Öffnen
+                </button>
+                <button onClick={() => onDeleteSession(session.id)} className="delete-btn" title="Löschen">
+                   Löschen
+                </button>
               </div>
             </div>
           ))}

gtm-architect/geminiService.ts

@@ -118,3 +118,7 @@ export const loadSession = async (projectId: string): Promise<any> => {
 export const deleteSession = async (projectId: string): Promise<any> => {
     return callApi('run', 'delete_session', { projectId });
 };
+
+export const updateSpecs = async (projectId: string, specs: any): Promise<any> => {
+    return callApi('run', 'update_specs', { projectId, specs });
+};

gtm_architect_documentation.md

@@ -1,4 +1,4 @@
-# Dokumentation: GTM Architect Engine (v2.5)
+# Dokumentation: GTM Architect Engine (v2.6)
 
 ## 1. Projektübersicht
 
@@ -67,11 +67,11 @@ Die `call_gemini_image`-Funktion wählt automatisch die beste Methode basierend
 
 | Phase | Modus | Input | Output | Beschreibung |
 | :--- | :--- | :--- | :--- | :--- |
-| **1** | `phase1` | Rohtext / URL | Features, Constraints, **Specs** | Extrahiert technische Daten, **Hard Facts (Specs)** & erstellt DB-Projekt. |
+| **1** | `phase1` | Rohtext / URL | Features, Constraints, **Specs** | Extrahiert technische Daten, **Hard Facts (Specs)** & erstellt DB-Projekt. **Specs sind editierbar.** |
 | **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 inkl. technischer Spezifikationen (Hard Facts) aus Phase 1. |
+| **5** | `phase5` | Alle Daten | Markdown Report | **Strategie-Fixierung**. Konsolidierter Report inkl. Specs & Phase 2 Insights. |
 | **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. |
@@ -91,10 +91,15 @@ Das System verwaltet persistente Sitzungen in der SQLite-Datenbank:
 
 ## 7. Historie & Fixes (Jan 2026)
 
-*   **[UPGRADE] v2.6.1: Stability & URL Persistence**
+*   **[UPGRADE] v2.6.2: Report Completeness & Edit Mode**
-    *   **Bugfix:** Behebung des "Weißen Bildschirms" durch Absicherung der Session-Liste gegen `undefined`-Werte.
+    *   **Edit Hard Facts:** Neue Funktion in Phase 1 ("Edit Raw Data") erlaubt die manuelle Korrektur der extrahierten technischen JSON-Daten.
-    *   **URL Tracking:** Die Recherche-URL wird nun zwingend im Projekt gespeichert, in der Lade-Übersicht angezeigt und in den finalen Report-Export integriert.
+    *   **Report-Update:** Phase 5 Prompt wurde angepasst, um explizit die Ergebnisse aus Phase 2 (ICPs & Data Proxies) im finalen Report aufzuführen.
-    *   **UX Flow:** Direkter Wechsel zwischen "Letzte Sitzungen" und "Neue Analyse starten" jederzeit möglich.
+    *   **Backend-Fix:** Korrektur eines Fehlers beim Speichern von JSON-Daten, der auftrat, wenn Datenbank-Inhalte als Strings vorlagen.
+
+*   **[UPGRADE] v2.6.1: Stability & UI Improvements**
+    *   **White Screen Fix:** Robuste Absicherung des Frontends gegen `undefined`-Werte beim Laden älterer Sitzungen (`optional chaining`).
+    *   **Session Browser:** Komplettes Redesign der Sitzungsübersicht zu einer übersichtlichen Listenansicht mit Icons (Reinigung/Service/Transport/Security).
+    *   **URL-Anzeige:** Die Quell-URL wird nun als dedizierter Link angezeigt und das Projekt automatisch basierend auf dem erkannten Produktnamen umbenannt.
 
 *   **[UPGRADE] v2.6: Rich Session Browser**
     *   **Neues UI:** Die textbasierte Liste für "Letzte Sitzungen" wurde durch eine dedizierte, kartenbasierte UI (`SessionBrowser.tsx`) ersetzt.

gtm_architect_orchestrator.py

@@ -211,6 +211,7 @@ def phase1(payload):
             "product_id": "string (slug)",
             "brand": "string",
             "model_name": "string",
+            "description": "string (short marketing description of the product)",
             "category": "cleaning | service | security | industrial",
             "manufacturer_url": "string"
           },
@@ -289,6 +290,16 @@ def phase1(payload):
                     specs_data['metadata'] = {}
                 specs_data['metadata']['manufacturer_url'] = product_input.strip()
             
+            # AUTO-RENAME PROJECT based on extracted metadata
+            if 'metadata' in specs_data:
+                brand = specs_data['metadata'].get('brand', '')
+                model = specs_data['metadata'].get('model_name', '')
+                if brand or model:
+                    new_name = f"{brand} {model}".strip()
+                    if new_name:
+                        logging.info(f"Renaming project {project_id} to: {new_name}")
+                        db_manager.update_project_name(project_id, new_name)
+
             data['specs'] = specs_data
         except json.JSONDecodeError:
             logging.error(f"Failed to decode JSON from Gemini response in phase1 (specs): {specs_response}")
@@ -404,9 +415,11 @@ def phase5(payload):
     lang_instr = get_output_lang_instruction(lang)
 
     # Reduziere Input-Daten auf das Wesentliche, um den Output-Fokus zu verbessern
+    # FIX: Include 'specs' (Hard Facts) for the report
     lean_phase1 = {
         "features": phase1_data.get('features', []),
-        "constraints": phase1_data.get('constraints', [])
+        "constraints": phase1_data.get('constraints', []),
+        "specs": phase1_data.get('specs', {})
     }
 
     prompt = f"""
@@ -415,6 +428,7 @@ def phase5(payload):
     INPUT DATA:
     - Product: {json.dumps(lean_phase1)}
     - ICPs: {json.dumps(phase2_data.get('icps', []))}
+    - Data Proxies: {json.dumps(phase2_data.get('dataProxies', []))}
     - Targets: {json.dumps(phase3_data.get('whales', []))}
     - Strategy Matrix: {json.dumps(phase4_data.get('strategyMatrix', []))}
     
@@ -424,9 +438,14 @@ def phase5(payload):
     REQUIRED STRUCTURE:
     1. **Executive Summary**: A brief strategic overview.
     2. **Product Analysis**: Key features & constraints.
-    3. **Target Audience**: The selected ICPs and why.
+    3. **Technical Specifications (Hard Facts)**:
-    4. **Target Accounts**: Top companies (Whales).
+       - Create a dedicated section displaying the technical data (Dimensions, Weight, Runtime, Layers, etc.) found in 'Product.specs'.
-    5. **Strategy Matrix**:
+       - Use a clear Markdown table or bullet points.
+    4. **Phase 2: ICP Discovery**:
+       - Present the selected ICPs (Industries) and the rationale behind them.
+       - List the identified Data Proxies used to find these customers.
+    5. **Target Accounts**: Top companies (Whales).
+    6. **Strategy Matrix**:
        - Create a STRICT Markdown table.
        - Columns: Segment | Pain Point | Angle | Differentiation
        - Template:
@@ -435,8 +454,8 @@ def phase5(payload):
          | [Content] | [Content] | [Content] | [Content] |
        - Use the data from the 'Strategy Matrix' input.
        - Do NOT use newlines inside table cells (use <br> instead) to keep the table structure intact.
-    6. **Next Steps**: Actionable recommendations.
+    7. **Next Steps**: Actionable recommendations.
-    7. **Hybrid Service Logic**: Explain the machine/human symbiosis.
+    8. **Hybrid Service Logic**: Explain the machine/human symbiosis.
     
     {lang_instr}
     
@@ -562,6 +581,47 @@ def phase9(payload):
     db_manager.save_gtm_result(project_id, 'phase9_result', json.dumps(data))
     return data
 
+def update_specs(payload):
+    """
+    Updates the technical specifications (Hard Facts) for a project.
+    This allows manual correction of AI-extracted data.
+    """
+    project_id = payload.get('projectId')
+    new_specs = payload.get('specs')
+    
+    if not project_id:
+        raise ValueError("No projectId provided for update_specs.")
+    if not new_specs:
+        raise ValueError("No specs provided for update_specs.")
+        
+    # Load current project data
+    project_data = db_manager.get_project_data(project_id)
+    if not project_data:
+        raise ValueError(f"Project {project_id} not found.")
+        
+    phases = project_data.get('phases', {})
+    phase1_result = phases.get('phase1_result')
+    
+    if not phase1_result:
+        raise ValueError("Phase 1 result not found. Cannot update specs.")
+    
+    # FIX: Parse JSON string if necessary
+    if isinstance(phase1_result, str):
+        try:
+            phase1_result = json.loads(phase1_result)
+        except json.JSONDecodeError:
+            raise ValueError("Phase 1 result is corrupted (invalid JSON string).")
+
+    # Update specs
+    phase1_result['specs'] = new_specs
+    
+    # Save back to DB
+    # We use save_gtm_result which expects a stringified JSON for the phase result
+    db_manager.save_gtm_result(project_id, 'phase1_result', json.dumps(phase1_result))
+    
+    logging.info(f"Updated specs for project {project_id}")
+    return {"status": "success", "specs": new_specs}
+    
 def translate(payload):
     # ... (to be implemented)
     return {"report": "Translated report will be here."}
@@ -633,6 +693,7 @@ def main():
         "phase7": phase7,
         "phase8": phase8,
         "phase9": phase9,
+        "update_specs": update_specs,
         "translate": translate,
         "image": image,
         "list_history": list_history,

gtm_db_manager.py

@@ -49,6 +49,20 @@ def create_project(name):
         if conn:
             conn.close()
 
+def update_project_name(project_id, new_name):
+    """Updates the name of an existing project."""
+    conn = get_db_connection()
+    try:
+        conn.execute(
+            'UPDATE gtm_projects SET name = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?',
+            (new_name, project_id)
+        )
+        conn.commit()
+        return {"id": project_id, "name": new_name, "status": "updated"}
+    finally:
+        if conn:
+            conn.close()
+
 def save_gtm_result(project_id, phase, result):
     """Saves or updates the result of a specific phase for a given project."""
     conn = get_db_connection()