/* global React */ const { useState, useEffect, useMemo, useRef } = React; /* ========================================================================= NEW CONVERSATION — wider chat · reflowable · pinned architecture card inline pipeline that collapses · suggest chips · tab badges ========================================================================= */ function shortId(id) { if (!id) return ''; const s = String(id); return s.length <= 12 ? s : `${s.slice(0, 4)}…${s.slice(-4)}`; } function archSummary(architecture) { const nodes = architecture?.services?.length ?? 0; const edges = architecture?.connections?.length ?? 0; const region = architecture?.services?.find(s => s.region)?.region || 'eu-west-1'; return `${nodes} node${nodes === 1 ? '' : 's'} · ${edges} edge${edges === 1 ? '' : 's'} · ${region}`; } // Backend's RateLimitError surfaces as a 429 with "Monthly limit ... exceeded". // Catch both on shape and on message so we don't leak the raw error to chat. function isQuotaError(err) { if (!err) return false; if (err.status === 429 || err.statusCode === 429) return true; return /monthly limit|rate limit|quota/i.test(err.message || String(err)); } function NewAnalysis() { const { tier, pipelineState, setPipelineState, setRoute, refreshUsage } = useApp(); const { PIPELINE_STEPS, SAMPLE_TF } = window.APP_DATA; const [inputMode, setInputMode] = useState('text'); const [textVal, setTextVal] = useState(''); const [iacVal, setIacVal] = useState(SAMPLE_TF); const [messages, setMessages] = useState([]); const [showQuotaBlock, setShowQuotaBlock] = useState(false); const [railOpen, setRailOpen] = useState(true); const [railTab, setRailTab] = useState('score'); const [archVersion, setArchVersion] = useState('v1'); const [versions, setVersions] = useState([ { id: 'v1', label: 'Initial', at: 'just now', current: true }, ]); // Live results from the most recent run. const [analysisId, setAnalysisId] = useState(null); const [architecture, setArchitecture] = useState(null); const [review, setReview] = useState(null); const [costEstimate, setCostEstimate] = useState(null); const [diagram, setDiagram] = useState(null); const [conversationId, setConversationId] = useState(null); const [chatBusy, setChatBusy] = useState(false); const [archTitle, setArchTitle] = useState(null); const chatRef = useRef(null); // Seed greeting useEffect(() => { if (messages.length === 0) { setMessages([ { role: 'assistant', kind: 'greet', content: "Describe an AWS architecture, paste Terraform, or ask a question. I'll diagram it, review it against Well-Architected, and quote it — then we can iterate." }, ]); } }, []); useEffect(() => { if (chatRef.current) chatRef.current.scrollTop = chatRef.current.scrollHeight; }, [messages]); // Mirror tweak state into latest pipeline turn (e.g. user clicks Retry). // Only the state field is mirrored — per-step state lives on the message. useEffect(() => { setMessages(ms => { let found = false; const next = [...ms].reverse().map(m => { if (!found && m.kind === 'pipeline') { found = true; return { ...m, state: pipelineState }; } return m; }).reverse(); return next; }); }, [pipelineState]); function archHasRun() { return messages.some(m => m.kind === 'pipeline'); } // Update the most-recent pipeline message immutably. function updateLatestPipeline(updater) { setMessages(ms => { const out = [...ms]; for (let i = out.length - 1; i >= 0; i--) { if (out[i].kind === 'pipeline') { out[i] = updater(out[i]); break; } } return out; }); } function patchStep(idx, patch) { updateLatestPipeline(msg => ({ ...msg, stepStates: (msg.stepStates || PIPELINE_STEPS.map(() => ({ status: 'pending' }))) .map((s, i) => i === idx ? { ...s, ...patch } : s), })); } async function followPipeline(runId, isRevision) { setPipelineState('running'); setDiagram(null); setAnalysisId(runId); const pipelineStartedAt = Date.now(); // Step 0: parse — sequential. Steps 1/2/3 (diagram, waf review, cost) // run in parallel after parse: diagram from waitForDiagram, waf+cost // both produced by getReview. const parseStart = Date.now(); patchStep(0, { status: 'inprogress', startedAt: parseStart }); let parsed; try { parsed = await window.API.waitForParse(runId); } catch (err) { const msg = err?.message || String(err); patchStep(0, { status: 'failed', durationMs: Date.now() - parseStart, error: msg }); updateLatestPipeline(m => ({ ...m, totalMs: Date.now() - pipelineStartedAt })); setPipelineState('failed'); if (isQuotaError(err)) { setShowQuotaBlock(true); setMessages(m => [...m, { role: 'assistant', kind: 'text', content: "You've hit the Free-tier limit for this month. The Pro plan is launching soon — leave your email to be notified the moment it opens up." }]); } else { setMessages(m => [...m, { role: 'assistant', kind: 'text', content: `Pipeline failed: ${msg}` }]); } return; } patchStep(0, { status: 'complete', durationMs: Date.now() - parseStart }); setArchitecture(parsed.architecture || null); const diagStart = Date.now(); const reviewStart = Date.now(); patchStep(1, { status: 'inprogress', startedAt: diagStart }); patchStep(2, { status: 'inprogress', startedAt: reviewStart }); patchStep(3, { status: 'inprogress', startedAt: reviewStart }); const diagPromise = window.API.waitForDiagram(runId).then( d => { patchStep(1, { status: 'complete', durationMs: Date.now() - diagStart }); setDiagram(d); return d; }, err => { patchStep(1, { status: 'failed', durationMs: Date.now() - diagStart, error: err?.message || String(err) }); return null; }, ); const reviewPromise = window.API.getReview(runId).then( rev => { const ms = Date.now() - reviewStart; patchStep(2, { status: 'complete', durationMs: ms }); patchStep(3, { status: 'complete', durationMs: ms }); setReview(rev.scorecard ? rev : { scorecard: rev }); setCostEstimate(rev.costEstimate || null); return rev; }, err => { const ms = Date.now() - reviewStart; const msg = err?.message || String(err); patchStep(2, { status: 'failed', durationMs: ms, error: msg }); patchStep(3, { status: 'failed', durationMs: ms, error: msg }); return null; }, ); const [, rev] = await Promise.all([diagPromise, reviewPromise]); updateLatestPipeline(m => ({ ...m, totalMs: Date.now() - pipelineStartedAt })); setPipelineState('done'); const newV = `v${versions.length + 1}`; setVersions(vs => vs.map(v => ({ ...v, current: false })).concat({ id: newV, label: isRevision ? 'Revision' : 'Initial', at: 'just now', current: true })); setArchVersion(newV); const findings = window.scorecardToFindings(rev?.scorecard); const high = findings.filter(f => f.sev === 'HIGH'); setMessages(m => [...m, { role: 'assistant', kind: 'summary', content: high.length ? `Scorecard, cost and recommendations are ready in the right rail. ${high.length} HIGH finding${high.length === 1 ? '' : 's'} flagged.` : 'Scorecard, cost and recommendations are ready in the right rail.', suggests: ['Open the scorecard', 'Show me the cost breakdown', 'List the HIGH findings'], }]); } async function sendChat(raw) { if (!raw.trim() || chatBusy) return; setMessages(m => [...m, { role: 'user', kind: 'text', content: raw }]); setTextVal(''); setChatBusy(true); try { let cid = conversationId; if (!cid) { const c = await window.API.createConversation(); cid = c?.conversationId || c?.id || c?.convoId; if (!cid) throw new Error('Could not create conversation'); setConversationId(cid); } const resp = await window.API.sendChatMessage(cid, raw); const reply = resp?.reply || resp?.assistantMessage?.content || ''; const chips = resp?.assistantMessage?.suggestedChips; if (resp?.runId) { const isRevision = versions.length > 1 || archHasRun(); if (resp.title) setArchTitle(resp.title); setMessages(m => [...m, { role: 'assistant', kind: 'text', content: reply || (isRevision ? 'Revising the architecture.' : 'Running the pipeline now.') }, { role: 'assistant', kind: 'pipeline', state: 'running', startedAt: Date.now(), stepStates: window.APP_DATA.PIPELINE_STEPS.map(() => ({ status: 'pending' })) }, ]); // The backend incremented the usage counter when this run was // accepted — re-pull /user so the topnav guard, dashboard count and // composer all see the new value as soon as the next send is tried. refreshUsage?.(); await followPipeline(resp.runId, isRevision); } else { setMessages(m => [...m, { role: 'assistant', kind: 'text', content: reply, ...(chips && chips.length && { suggests: chips }), }]); } } catch (err) { if (isQuotaError(err)) { setShowQuotaBlock(true); setMessages(m => [...m, { role: 'assistant', kind: 'text', content: "You've hit the Free-tier limit for this month. The Pro plan is launching soon — leave your email to be notified the moment it opens up." }]); } else { setMessages(m => [...m, { role: 'assistant', kind: 'text', content: `Chat failed: ${err.message || err}` }]); } } finally { setChatBusy(false); } } function submitFromInput() { if (tier === 'free' && showQuotaBlock) return; sendChat(inputMode === 'text' ? textVal : iacVal); } const anyPipelineRun = messages.some(m => m.kind === 'pipeline'); const diagramVisible = anyPipelineRun || pipelineState === 'done' || pipelineState === 'running' || pipelineState === 'failed'; const showResults = pipelineState === 'done'; // Reflowable widths: chat flexes between 360 and 520, rail is fixed. // Using minmax on the chat column keeps the center diagram from collapsing // on narrow viewports (~920px) while still letting chat breathe when wide. const chatWidth = 'minmax(360px, 520px)'; const railWidth = showResults ? (railOpen ? 'minmax(300px, 380px)' : '44px') : '0px'; return (
{/* LEFT — chat */}