Update: GTM Architect v2.6.2 (Edit Specs, Report Fix) & Company Explorer v0.4 (Export, Timestamps)
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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 */}
|
||||
{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>
|
||||
|
||||
16
gtm-architect/App.tsx.backup
Normal file
16
gtm-architect/App.tsx.backup
Normal file
@@ -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)
|
||||
};
|
||||
// ...
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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:
|
||||
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 className="category-badge" title={session.productCategory}>
|
||||
{getCategoryIcon(session.productCategory)}
|
||||
</div>
|
||||
<div className="thumbnail-placeholder">
|
||||
<span>🖼️</span>
|
||||
<p>Thumbnail</p>
|
||||
<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>
|
||||
))}
|
||||
|
||||
@@ -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 });
|
||||
};
|
||||
@@ -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**
|
||||
* **Bugfix:** Behebung des "Weißen Bildschirms" durch Absicherung der Session-Liste gegen `undefined`-Werte.
|
||||
* **URL Tracking:** Die Recherche-URL wird nun zwingend im Projekt gespeichert, in der Lade-Übersicht angezeigt und in den finalen Report-Export integriert.
|
||||
* **UX Flow:** Direkter Wechsel zwischen "Letzte Sitzungen" und "Neue Analyse starten" jederzeit möglich.
|
||||
* **[UPGRADE] v2.6.2: Report Completeness & Edit Mode**
|
||||
* **Edit Hard Facts:** Neue Funktion in Phase 1 ("Edit Raw Data") erlaubt die manuelle Korrektur der extrahierten technischen JSON-Daten.
|
||||
* **Report-Update:** Phase 5 Prompt wurde angepasst, um explizit die Ergebnisse aus Phase 2 (ICPs & Data Proxies) im finalen Report aufzuführen.
|
||||
* **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.
|
||||
|
||||
@@ -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.
|
||||
4. **Target Accounts**: Top companies (Whales).
|
||||
5. **Strategy Matrix**:
|
||||
3. **Technical Specifications (Hard Facts)**:
|
||||
- Create a dedicated section displaying the technical data (Dimensions, Weight, Runtime, Layers, etc.) found in 'Product.specs'.
|
||||
- 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. **Hybrid Service Logic**: Explain the machine/human symbiosis.
|
||||
7. **Next Steps**: Actionable recommendations.
|
||||
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,
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user