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

gtm-architect/App.tsx

@@ -208,8 +208,8 @@ 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
   const [newFeatureInput, setNewFeatureInput] = useState("");
@@ -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">
-                <Database className="text-blue-500" /> Technical Specifications (Hard Facts)
-            </h2>
-            
+            <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 */}
-            {state.phase1Result.specs.extended_features.length > 0 && (
+            {!isEditingSpecs && 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 {
-  font-size: 0.9rem;
-  color: #555;
-  margin-bottom: 12px;
-  height: 4.5em; /* Approximately 3 lines of text */
+.browser-header {
+  display: flex;
+  justify_content: space-between;
+  align-items: center;
+  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 {
-  font-size: 0.8rem;
-  margin-bottom: 12px;
+.dark .product-description {
+  color: #94a3b8;
 }
 
-.source-url a {
-  color: #007bff;
+.card-meta {
+  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 {
-  color: #0056b3;
-  text-decoration: underline;
+.dark .source-link {
+  background: #1e3a8a;
+  color: #bfdbfe;
 }
 
-.last-updated {
-  font-size: 0.8rem;
-  color: #888;
-  margin-top: auto; /* Pushes to the bottom if content is short */
+.source-link:hover {
+  background: #dbeafe;
 }
 
-/* ... (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()) {
-      case 'reinigungsroboter':
-        return '🧹';
-      case 'serviceroboter':
-        return '🛎️';
-      case 'transportroboter':
-        return '📦';
-      case 'security roboter':
-        return '🛡️';
-      default:
-        return '🤖';
-    }
+    const cat = category.toLowerCase();
+    
+    if (cat.includes('reinigung') || cat.includes('cleaning')) return '🧹';
+    if (cat.includes('service') || cat.includes('kellner')) return '🛎️';
+    if (cat.includes('transport') || cat.includes('logistik') || cat.includes('logistics')) return '📦';
+    if (cat.includes('security') || cat.includes('sicherheit') || cat.includes('wach')) return '🛡️';
+    if (cat.includes('inspektion') || cat.includes('inspection')) return '🔍';
+    if (cat.includes('humanoid')) return '🦾';
+    if (cat.includes('drohne') || cat.includes('drone')) return '🚁';
+    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>
-                  <h3 title={session.productName}>{session.productName || 'Unbenannt'}</h3>
-              </div>
-              <div className="thumbnail-placeholder">
-                <span>🖼️</span>
-                <p>Thumbnail</p>
+                  <div className="category-badge" title={session.productCategory}>
+                    {getCategoryIcon(session.productCategory)}
+                  </div>
+                  <div className="card-title-container">
+                    <h3 className="card-title" title={session.productName}>{session.productName || 'Unbenanntes Projekt'}</h3>
+                    <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="source-url">
-                    <a href={session.sourceUrl} target="_blank" rel="noopener noreferrer">
-                        Quelle anzeigen
-                    </a>
+                <p className="product-description">
+                  {session.productDescription && session.productDescription !== "No description available." 
+                    ? session.productDescription 
+                    : <span className="italic text-slate-400">Keine Beschreibung verfügbar.</span>}
                 </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={() => onDeleteSession(session.id)} className="delete-btn">Löschen</button>
+                <button onClick={() => onLoadSession(session.id)} className="load-btn">
+                    Öffnen
+                </button>
+                <button onClick={() => onDeleteSession(session.id)} className="delete-btn" title="Löschen">
+                   Löschen
+                </button>
               </div>
             </div>
           ))}

gtm-architect/geminiService.ts

@@ -117,4 +117,8 @@ 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 });
 };