/* global React */ const { useState, useEffect, useMemo, useRef } = React; /* ---- Inline markdown renderer ---------------------------------------------- Handles **bold**, *italic*, `inline code`, and [text](url) without pulling in a dependency (the page already loads React + Babel from unpkg; adding marked.js would double our CDN bloom). Block-level features (headings, lists, fenced code) are intentionally NOT handled here — assistant replies from the gather-requirements turn are short prose, and the rare bullet lists already arrive via msg.bullets / msg.codeBlock structured fields. */ const INLINE_MD_RE = /(`[^`\n]+`)|(\[[^\]]+\]\([^)\s]+\))|(\*\*[^*\n]+\*\*)|(\*[^*\n]+\*)/g; function renderInlineMd(text) { if (!text) return text; const parts = []; let last = 0; let m; INLINE_MD_RE.lastIndex = 0; while ((m = INLINE_MD_RE.exec(text)) !== null) { if (m.index > last) parts.push(text.slice(last, m.index)); const seg = m[0]; const key = `md${m.index}`; if (seg.startsWith('`')) { parts.push({seg.slice(1, -1)}); } else if (seg.startsWith('[')) { const lm = /^\[([^\]]+)\]\(([^)\s]+)\)$/.exec(seg); if (lm) { parts.push({lm[1]}); } else { parts.push(seg); } } else if (seg.startsWith('**')) { parts.push({seg.slice(2, -2)}); } else if (seg.startsWith('*')) { parts.push({seg.slice(1, -1)}); } last = m.index + seg.length; } if (last < text.length) parts.push(text.slice(last)); return parts.length > 0 ? parts : text; } function MarkdownText({ children }) { const text = String(children ?? ''); if (!text) return null; const lines = text.split('\n'); return ( <> {lines.map((line, i) => ( {renderInlineMd(line)} {i < lines.length - 1 &&
} ))} ); } /* ---- ThreadRail (Phase 2) ------------------------------------------------- Slim left rail showing recent conversations as a quick-switcher. Does NOT duplicate Dashboard's filtered list or History's full pagination — caps at 10 rows and links out to History for the long tail. Collapses to a 44px icon bar on narrow viewports, mirroring the right results-rail's own collapse pattern. */ function relTime(iso) { if (!iso) return ''; const ms = Date.now() - new Date(iso).getTime(); if (Number.isNaN(ms)) return ''; if (ms < 60_000) return 'just now'; if (ms < 3600_000) return `${Math.floor(ms / 60_000)}m`; if (ms < 86_400_000) return `${Math.floor(ms / 3600_000)}h`; if (ms < 7 * 86_400_000) return `${Math.floor(ms / 86_400_000)}d`; return new Date(iso).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }); } function ThreadRail({ activeConvoId, collapsed, onToggleCollapsed, onPickConvo, onNewChat, onViewHistory }) { const [rows, setRows] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { let cancelled = false; setLoading(true); // listConversations is cached (2-min TTL) so this is cheap on tab switches. window.API.listConversations(10).then(res => { if (cancelled) return; const items = Array.isArray(res?.items) ? res.items : []; // Sort by updatedAt desc — matches Dashboard's recency grouping. items.sort((a, b) => (b.updatedAt || '').localeCompare(a.updatedAt || '')); setRows(items.slice(0, 10)); }).catch(() => { if (!cancelled) setRows([]); }).finally(() => { if (!cancelled) setLoading(false); }); return () => { cancelled = true; }; }, [activeConvoId]); // re-fetch when user lands on a new convo if (collapsed) { return ( ); } return ( ); } /* ========================================================================= 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, routeParams } = useApp(); const { PIPELINE_STEPS, SAMPLE_TF } = window.APP_DATA; const reopenConvoId = routeParams?.conversationId || null; 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 [editMode, setEditMode] = useState(false); const [conversationId, setConversationId] = useState(null); const [chatBusy, setChatBusy] = useState(false); const [archTitle, setArchTitle] = useState(null); const [idsOpen, setIdsOpen] = useState(false); // Latest assistant.complete frame received over WebSocket. Carries the // structured `decision` object the assistant produced — used by the // proposal-gate card to render the run-confirmation UI. When VITE_WS_URL // is empty this stays null and the REST response remains the only path. const [lastAssistantComplete, setLastAssistantComplete] = useState(null); // In-flight streaming reply (Phase 1d). assistant.token frames append to // this; assistant.complete clears it because the REST response will // append the final aggregated message at that point. Carrying `turnId` // lets reconnects ignore frames from a stale turn. const [streamingTurn, setStreamingTurn] = useState(null); // { turnId, text } // AbortController for the in-flight chat POST. Stop-button click triggers // .abort() — backend Lambda continues but the frontend drops the response. const chatAbortRef = useRef(null); // Pipeline event bus — receives step.* / run.* frames from useChatSocket // and exposes a Promise-returning subscribe helper that followPipeline // races against the 2s polling. WS fires within ~50ms of each Lambda's // emitCompleted; polling tick lag is up to 2s. Whichever wins resolves // the step, the loser becomes a no-op. const pipelineEventBusRef = useRef({ // events: Map<`${runId}#${eventType}`, {detail}> events: new Map(), // listeners: Map<`${runId}#${eventType}`, Array> listeners: new Map(), }); function publishPipelineEvent(detail) { const bus = pipelineEventBusRef.current; if (!detail?.runId) return; const stepName = detail.step; // 'parse' | 'diagram' | 'analysis' | undefined const key = stepName ? `${detail.runId}#${detail.eventType}#${stepName}` : `${detail.runId}#${detail.eventType}`; bus.events.set(key, detail); const queue = bus.listeners.get(key); if (queue && queue.length > 0) { queue.forEach(resolve => resolve(detail)); bus.listeners.set(key, []); } } function awaitPipelineEvent(runId, eventType, stepName, timeoutMs) { const bus = pipelineEventBusRef.current; const key = stepName ? `${runId}#${eventType}#${stepName}` : `${runId}#${eventType}`; const existing = bus.events.get(key); if (existing) return Promise.resolve(existing); return new Promise((resolve) => { const queue = bus.listeners.get(key) || []; queue.push(resolve); bus.listeners.set(key, queue); if (timeoutMs) { setTimeout(() => resolve(null), timeoutMs); } }); } window.CAC_WS.useChatSocket(conversationId, (ev) => { if (ev?.type === 'assistant.token') { setStreamingTurn(prev => { if (prev && prev.turnId !== ev.turnId) return prev; // ignore stale return { turnId: ev.turnId, text: ev.replySoFar || ((prev?.text || '') + (ev.delta || '')) }; }); } else if (ev?.type === 'assistant.complete') { setLastAssistantComplete(ev); setStreamingTurn(null); } else if (ev?.eventType) { // Pipeline events from the WS broadcaster: step.started / step.completed // / step.failed / run.completed / run.failed. The broadcaster forwards // event.detail (not the EventBridge wrapper) so the discriminant is // `eventType`, not `type`. publishPipelineEvent(ev); } }); const chatRef = useRef(null); const idsRef = useRef(null); // Tracks which version's snapshot is currently loaded into the artifact panel. // Used to suppress the version-switch fetch right after a fresh run produces // a new version (data is already live from waitForDiagram/getReview). // Must match initial archVersion — otherwise the version-switch effect fetches v1 the moment a fresh conversation gets an id, before the pipeline has produced it. const loadedVersionRef = useRef('v1'); const [versionSwitching, setVersionSwitching] = useState(false); useEffect(() => { if (!idsOpen) return; const onDocClick = (e) => { if (idsRef.current && !idsRef.current.contains(e.target)) setIdsOpen(false); }; document.addEventListener('mousedown', onDocClick); return () => document.removeEventListener('mousedown', onDocClick); }, [idsOpen]); // Seed greeting (skip when reopening a previous conversation — the load effect // below will hydrate messages from the stored conversation instead). useEffect(() => { if (messages.length === 0 && !reopenConvoId) { 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." }, ]); } }, []); // Reopen a previous conversation in the chat view (Re-run from detail page). // Hydrates messages + the latest version's architecture/diagram/review/cost // so the user lands inside the existing conversation and can iterate or re-run. useEffect(() => { if (!reopenConvoId) return; let cancelled = false; (async () => { try { const convo = await window.API.getConversation(reopenConvoId); if (cancelled) return; setConversationId(reopenConvoId); setArchTitle(convo?.header?.title || null); const loaded = (convo?.messages || []).map(m => ({ role: m.role, kind: 'text', content: m.content, ...(Array.isArray(m.suggestedChips) && m.suggestedChips.length > 0 ? { suggests: m.suggestedChips } : {}), })); const v = convo?.header?.currentVersion; if (v && v >= 1) { const snap = await window.API.getConversationVersion(reopenConvoId, v); if (cancelled) return; setArchitecture(snap.version?.architecture || null); setAnalysisId(snap.version?.runId || null); if (snap.wafReview) { setReview({ scorecard: snap.wafReview.scorecard, recommendations: snap.wafReview.recommendations }); } if (snap.costEstimate) setCostEstimate(snap.costEstimate); if (snap.diagram) setDiagram(snap.diagram); const versionRows = (convo.versions || []).map((vs, i) => ({ id: `v${vs.v}`, label: i === 0 ? 'Initial' : 'Revision', at: vs.createdAt ? new Date(vs.createdAt).toLocaleString() : 'earlier', current: vs.v === v, })); if (versionRows.length) { setVersions(versionRows); setArchVersion(`v${v}`); loadedVersionRef.current = `v${v}`; } loaded.push({ role: 'assistant', kind: 'pipeline', state: 'done', totalMs: 0, stepStates: PIPELINE_STEPS.map(() => ({ status: 'complete', durationMs: 0 })), }); setPipelineState('done'); } if (loaded.length > 0) setMessages(loaded); } catch (err) { if (!cancelled) { setMessages(m => m.length === 0 ? [{ role: 'assistant', kind: 'text', content: `Could not reopen conversation: ${err?.message || err}` }] : m); } } })(); return () => { cancelled = true; }; }, [reopenConvoId]); // Scroll-stick: auto-follow only when the user is already within ~100px of // the bottom. If they've scrolled up to read history, new messages don't // yank them back — instead the floating pill below appears and they jump // on click. Standard pattern across Claude/ChatGPT/Gemini chats. const stickedRef = useRef(true); const [showNewPill, setShowNewPill] = useState(false); useEffect(() => { const el = chatRef.current; if (!el) return undefined; const onScroll = () => { const atBottom = el.scrollHeight - (el.scrollTop + el.clientHeight) < 100; stickedRef.current = atBottom; if (atBottom) setShowNewPill(false); }; el.addEventListener('scroll', onScroll, { passive: true }); return () => el.removeEventListener('scroll', onScroll); }, []); useEffect(() => { const el = chatRef.current; if (!el) return; if (stickedRef.current) { el.scrollTop = el.scrollHeight; } else { setShowNewPill(true); } }, [messages]); const jumpToBottom = () => { const el = chatRef.current; if (!el) return; el.scrollTop = el.scrollHeight; stickedRef.current = true; setShowNewPill(false); }; // Switch the artifact panel (diagram, scorecard, cost) when the user clicks // an older version dot. Skips when the selected version is already loaded — // either because we just produced it live, or we just fetched it. useEffect(() => { if (!conversationId || !archVersion) return; if (loadedVersionRef.current === archVersion) return; const versionNum = parseInt(archVersion.slice(1), 10); if (!Number.isFinite(versionNum) || versionNum < 1) return; let cancelled = false; setVersionSwitching(true); (async () => { try { const snap = await window.API.getConversationVersion(conversationId, versionNum); if (cancelled) return; setArchitecture(snap?.version?.architecture || null); setAnalysisId(snap?.version?.runId || null); setReview(snap?.wafReview ? { scorecard: snap.wafReview.scorecard, recommendations: snap.wafReview.recommendations } : null); setCostEstimate(snap?.costEstimate || null); setDiagram(snap?.diagram || null); loadedVersionRef.current = archVersion; } catch (err) { if (!cancelled) { setMessages(m => [...m, { role: 'assistant', kind: 'text', content: `Could not load ${archVersion}: ${err?.message || err}` }]); } } finally { if (!cancelled) setVersionSwitching(false); } })(); return () => { cancelled = true; }; }, [archVersion, conversationId]); // 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(); const wsLive = window.CAC_WS.enabled(); // WS-fast-path: when the WS broadcaster delivers `step.started`, patch // the UI immediately (no 2s polling lag). The artifact fetch still goes // through the REST API — WS only carries event metadata. awaitPipelineEvent(runId, 'step.started', 'parse').then(() => { patchStep(0, { status: 'inprogress', startedAt: Date.now() }); }); awaitPipelineEvent(runId, 'step.started', 'diagram').then(() => { patchStep(1, { status: 'inprogress', startedAt: Date.now() }); }); awaitPipelineEvent(runId, 'step.started', 'analysis').then(() => { const now = Date.now(); // Cost is bundled with analysis on the backend (no separate emit), // so both UI rows light up on the same event. patchStep(2, { status: 'inprogress', startedAt: now }); patchStep(3, { status: 'inprogress', startedAt: now }); }); const parseStart = Date.now(); patchStep(0, { status: 'inprogress', startedAt: parseStart }); // Race WS step.completed vs polling. On WS-fired completion, do a single // getAnalysis() to fetch the parsed architecture. The polling path // handles the same call internally; whichever wins, we get the data. const parsePoll = window.API.waitForParse(runId); const parseWs = wsLive ? awaitPipelineEvent(runId, 'step.completed', 'parse').then(async (ev) => { if (!ev) return null; return window.API.getAnalysis(runId); }) : Promise.resolve(null); let parsed; try { parsed = await Promise.race([ parsePoll, // WS race only takes precedence if it resolves with truthy data. parseWs.then(d => d || new Promise(() => {})), ]); } 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 }); // Diagram: race WS-event-triggered fetch vs polling. const diagWs = wsLive ? awaitPipelineEvent(runId, 'step.completed', 'diagram').then(async (ev) => { if (!ev) return null; // The diagram artifact lives behind a different endpoint than // getAnalysis. Reuse waitForDiagram's first iteration which fetches // and seeds the cache — but with a tiny interval so we don't wait. try { return await window.API.getDiagram(runId); } catch { return null; } }) : Promise.resolve(null); const diagPromise = Promise.race([ window.API.waitForDiagram(runId), diagWs.then(d => d || new Promise(() => {})), ]).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; }, ); // Review/cost: race WS analysis completion vs the existing getReview // call. getReview is a one-shot blocking call (not a poll loop), so // racing buys nothing latency-wise; we keep this WS branch so the UI // step rows flip to 'complete' the instant the analysis Lambda emits, // even if getReview's response is still in flight. if (wsLive) { awaitPipelineEvent(runId, 'step.completed', 'analysis').then((ev) => { if (!ev) return; const ms = Date.now() - reviewStart; patchStep(2, { status: 'complete', durationMs: ms }); patchStep(3, { status: 'complete', durationMs: ms }); }); } 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 })); // Bypass the version-switch effect for the freshly produced version — its // diagram/review/cost are already in state from the live pipeline calls. loadedVersionRef.current = newV; 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 ? `Here's the architecture — anything you'd like to change? ${high.length} HIGH finding${high.length === 1 ? '' : 's'} on the scorecard if you want to dig in.` : "Here's the architecture — anything you'd like to change?", suggests: ['Show me the cost breakdown', high.length ? 'List the HIGH findings' : 'Walk me through the design', 'Make it multi-AZ'].filter(Boolean), }]); } 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); } // Fresh AbortController per send so a Stop click cleanly cancels // this turn's fetch without leaking signal references between turns. chatAbortRef.current = new AbortController(); const resp = await window.API.sendChatMessage(cid, raw, { signal: chatAbortRef.current.signal }); const reply = resp?.reply || resp?.assistantMessage?.content || ''; const chips = resp?.assistantMessage?.suggestedChips; const pendingRunId = resp?.pendingRunId; if (pendingRunId) { const isRevision = versions.length > 1 || archHasRun(); if (resp.title) setArchTitle(resp.title); // Phase 1c real proposal-gate: backend wrote a *pending* run but did // NOT start the SFN. Render the proposal card with an active "Run // analysis" button — the user explicitly approves before the // pipeline fires (and before usage is incremented). // Prefer the REST response decision (always present); fall back to // the WS frame for older backends. Avoids a race where the proposal // card renders with just a title when WS hasn't arrived yet. const wsDecision = lastAssistantComplete?.pendingRunId === pendingRunId ? lastAssistantComplete.decision : null; const decision = resp?.decision || wsDecision || {}; setMessages(m => [...m, { role: 'assistant', kind: 'text', content: reply }, { role: 'assistant', kind: 'proposal', title: resp.title || null, narrative: decision.narrative || null, inputType: decision.inputType || null, intent: decision.intent || null, pendingRunId, isRevision, status: 'pending' }, ]); } else { setMessages(m => [...m, { role: 'assistant', kind: 'text', content: reply, ...(chips && chips.length && { suggests: chips }), }]); } } catch (err) { // User-initiated Stop — drop silently; the streaming bubble was // already cleared by stopChat(). if (err?.name === 'AbortError') { // nothing — finally clears chatBusy. } else 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 { chatAbortRef.current = null; setChatBusy(false); } } // Stop click: abort the REST POST + drop the streaming bubble. The // server-side Lambda finishes (Bedrock calls can't be cancelled), but // the user gets immediate UI responsiveness. function stopChat() { if (chatAbortRef.current) { try { chatAbortRef.current.abort(); } catch { /* noop */ } } setStreamingTurn(null); } function submitFromInput() { if (tier === 'free' && showQuotaBlock) return; sendChat(inputMode === 'text' ? textVal : iacVal); } // Phase 1c real gate: user clicked "Run analysis" on the proposal card. // Approve the pending run (server-side: usage check + SFN start) and // begin the pipeline-progress UI. Updates the matching proposal-card // message to status 'approved' so the button hides + becomes a quiet // breadcrumb. Idempotent — a double-click returns alreadyApproved. async function approveProposal(proposalMsg) { if (!conversationId || !proposalMsg?.pendingRunId) return; setMessages(m => m.map(x => x === proposalMsg ? { ...x, status: 'approving' } : x )); try { await window.API.approveRun(conversationId, proposalMsg.pendingRunId); setMessages(m => { const next = m.map(x => x === proposalMsg ? { ...x, status: 'approved' } : x ); next.push({ role: 'assistant', kind: 'pipeline', state: 'running', startedAt: Date.now(), stepStates: window.APP_DATA.PIPELINE_STEPS.map(() => ({ status: 'pending' })), }); return next; }); refreshUsage?.(); await followPipeline(proposalMsg.pendingRunId, proposalMsg.isRevision); } catch (err) { setMessages(m => m.map(x => x === proposalMsg ? { ...x, status: 'pending' } : x )); 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: `Could not start the pipeline: ${err.message || err}` }]); } } } 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. // Phase 2 adds a 220px thread rail on the left (220 wide, 44 collapsed), // making the page a 4-col grid. Chat shrinks its min from 360→300 to // absorb the rail's footprint without squeezing the diagram canvas. const [threadRailCollapsed, setThreadRailCollapsed] = useState(false); const threadRailWidth = threadRailCollapsed ? '44px' : '220px'; const chatWidth = 'minmax(300px, 480px)'; const railWidth = showResults ? (railOpen ? 'minmax(300px, 380px)' : '44px') : '0px'; return (
{/* LEFT-LEFT — thread rail (Phase 2). Quick-switch between recent conversations without leaving the chat. Defers the long tail to History; defers the rich filtered view to Dashboard. */} setThreadRailCollapsed(c => !c)} onPickConvo={(id) => { if (id === conversationId) return; setRoute('new', { conversationId: id }); }} onNewChat={() => setRoute('new')} onViewHistory={() => setRoute('history')} /> {/* Diagram editor full-screen overlay */} {editMode && diagram?.drawioUrl && ( setEditMode(false)} onConfirm={(updatedArchitecture) => { setEditMode(false); setArchitecture(updatedArchitecture); setDiagram(null); setReview(null); setCostEstimate(null); window.API.waitForDiagram(analysisId).then(d => setDiagram(d)).catch(() => {}); }} /> )} {/* LEFT — chat */}