/* global React */ const { useState, useEffect, useMemo, useRef } = React; // Map a server Conversation to the row shape the table expects. function toRow(c) { const iso = c.updatedAt || c.createdAt || ''; const date = iso.replace('T', ' ').slice(0, 16); // currentVersion === 0 means no run has finalised yet — treat as in-flight. const currentVersion = c.currentVersion ?? 0; const status = currentVersion > 0 ? 'complete' : 'pending'; const title = (c.title || '').trim(); return { id: c.convoId, name: title || c.convoId, hasTitle: title.length > 0, status, score: null, cost: null, date, iso, pillars: 6, currentVersion, }; } // Fan out to load each completed row's latest version so we can show its // WAF score and monthly cost in the table. Updates rows individually as // requests resolve so the UI doesn't block on the slowest one. function hydrateScoreCost(rows, applyUpdate) { for (const row of rows) { if (row.status !== 'complete' || row.currentVersion < 1) continue; window.API.getConversationVersion(row.id, row.currentVersion) .then(snap => applyUpdate(row.id, window.extractScoreCost(snap))) .catch(() => { /* leave score/cost as — on failure */ }); } } function bucketAnalyses(rows) { const now = new Date(); const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime(); const startOfWeek = startOfToday - 6 * 24 * 60 * 60 * 1000; const today = []; const week = []; const earlier = []; for (const r of rows) { const t = r.iso ? Date.parse(r.iso) : NaN; if (Number.isNaN(t)) { earlier.push(r); continue; } if (t >= startOfToday) today.push(r); else if (t >= startOfWeek) week.push(r); else earlier.push(r); } return [ { label: 'Today', items: today }, { label: 'This week', items: week }, { label: 'Earlier', items: earlier }, ]; } /* ========================================================================= LOGIN ========================================================================= */ // Temporary: registrations are closed. Flip to true to re-enable, and // also clear REGISTRATION_DISABLED in infrastructure/lib/auth-stack.ts. const REGISTRATION_ENABLED = false; function LoginScreen() { const { signIn, setRoute } = useApp(); const [mode, setMode] = useState('signin'); // signin | signup | reset const [email, setEmail] = useState(''); const [pw, setPw] = useState(''); const [givenName, setGivenName] = useState(''); const [familyName, setFamilyName] = useState(''); const [show, setShow] = useState(false); const [submitting, setSubmitting] = useState(false); const [error, setError] = useState(null); const [sent, setSent] = useState(false); async function submit(e) { e.preventDefault(); if (!window.API?.hasBackend) { setError({ code: 'CONFIG', msg: 'Backend is not configured. Set cac-cognito-client-id in index.html.' }); return; } setSubmitting(true); setError(null); try { if (mode === 'reset') { await window.API.sendPasswordReset(email); setSent(true); } else if (mode === 'signup') { if (!REGISTRATION_ENABLED) { setError({ code: 'INVALID', msg: 'Registration is temporarily closed.' }); setMode('signin'); return; } await window.API.signUp(email, pw, { givenName: givenName.trim(), familyName: familyName.trim(), }); setError({ code: 'UNVERIFIED', msg: 'Account created — check your inbox to verify, then sign in.' }); setMode('signin'); } else { await window.API.signIn(email, pw); signIn(); setRoute('dashboard'); } } catch (err) { const code = err.code === 'UserNotConfirmedException' ? 'UNVERIFIED' : 'INVALID'; setError({ code, msg: err.message }); } finally { setSubmitting(false); } } const asciiArt = ` ┌──────────────────────────────────────────┐ │ cac ▸ converse │ ├──────────────────────────────────────────┤ │ > parse("ECS Fargate api, RDS postgres") │ │ ├─ 11 resources │ │ ├─ 14 edges │ │ └─ 0 ambiguous │ │ │ │ > render() │ │ ┌──────────┐ ┌──────────┐ │ │ │ ALB │────▶│ ECS×3 │──┐ │ │ └──────────┘ └──────────┘ │ │ │ ┌────────▼──┐ │ │ │ RDS (⚠) │ │ │ └───────────┘ │ │ │ │ > review() │ │ ops ████████▓░ 82 · sec ███████░░ │ │ rel █████▓░░░░ 58 · perf ████████▓ │ │ cost ██████▓░░░ 64 · sus ████████░ │ │ │ │ > estimate() │ │ €1,284.32 /mo ± 8% │ │ ⚠ 2 hidden line-items detected │ └──────────────────────────────────────────┘`; return (
{mode === 'signin' && '— sign in —'} {mode === 'signup' && '— create account —'} {mode === 'reset' && '— reset password —'}

{mode === 'signin' && 'Welcome back.'} {mode === 'signup' && 'Get started.'} {mode === 'reset' && 'Reset your password.'}

{mode === 'signin' && 'Discuss AWS architectures from plain language or IaC.'} {mode === 'signup' && '3 free conversations per month, no credit card required.'} {mode === 'reset' && 'We\'ll send a reset link to your inbox.'}
{sent ? (
Check your inbox
If an account exists for {email}, a reset link is on its way.
) : ( <> {mode === 'signup' && (
setGivenName(e.target.value)} placeholder="Ada" /> setFamilyName(e.target.value)} placeholder="Lovelace" />
)}
setEmail(e.target.value)} placeholder="you@company.com" />
{mode !== 'reset' && ( setMode('reset')} style={{padding:'0 4px', height:'auto', fontSize:11.5, color:'var(--ink-2)'}}>Forgot? ) : null}>
setPw(e.target.value)} placeholder={mode === 'signup' ? 'min. 12 characters' : '••••••••••••'} />
)} {error?.code === 'INVALID' && (
{error.msg}
)} {error?.code === 'UNVERIFIED' && (
Email not verified
Check {email} for the verification link, or .
)}
{mode === 'signin' && (REGISTRATION_ENABLED ? <>No account? : Registrations are temporarily closed. )} {mode === 'signup' && <>Already have one? } {mode === 'reset' && }
)}
); } function FormRow({ label, right, children }) { return (
{label} {right}
{children}
); } window.LoginScreen = LoginScreen; /* ========================================================================= ONE-TIME PROFILE SETUP Shown automatically the first time a user signs in without given_name / family_name claims (e.g. accounts created before the signup form collected them). Skipping persists for the session only. ========================================================================= */ const PROFILE_SKIP_KEY = 'cac.profile-setup-skipped'; function profileSetupNeeded(user) { if (!user) return false; if (sessionStorage.getItem(PROFILE_SKIP_KEY) === '1') return false; return !user.firstName || !user.name || user.name === user.email; } window.profileSetupNeeded = profileSetupNeeded; function ProfileSetup() { const { user, refreshUser, setRoute } = useApp(); const [given, setGiven] = useState(''); const [family, setFamily] = useState(''); const [submitting, setSubmitting] = useState(false); const [error, setError] = useState(null); async function submit(e) { e.preventDefault(); setSubmitting(true); setError(null); try { await window.API.updateProfile({ givenName: given.trim(), familyName: family.trim() }); refreshUser(); sessionStorage.removeItem(PROFILE_SKIP_KEY); setRoute('dashboard'); } catch (err) { setError(err.message || 'Could not save your name.'); } finally { setSubmitting(false); } } function skip() { sessionStorage.setItem(PROFILE_SKIP_KEY, '1'); setRoute('dashboard'); } return (
welcome

What should we call you?

Signed in as {user?.email}. We'll use your name in greetings and exports.
setGiven(e.target.value)} placeholder="Ada"/> setFamily(e.target.value)} placeholder="Lovelace"/>
{error && (
{error}
)}
); } window.ProfileSetup = ProfileSetup; /* ========================================================================= DASHBOARD ========================================================================= */ function Dashboard() { const { tier, setRoute, user, usageCount, analysesLimit, quotaExceeded: ctxQuotaExceeded } = useApp(); const quotaByTier = { free: 3, pro: 25, team: 100, enterprise: Infinity, admin: Infinity }; const quota = Number.isFinite(analysesLimit) ? analysesLimit : (quotaByTier[tier] ?? quotaByTier.free); const unlimited = !Number.isFinite(quota); const now = new Date(); const hour = now.getHours(); const greeting = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening'; const greetName = user?.firstName || user?.name || ''; const monthYear = now.toLocaleString(undefined, { month: 'long', year: 'numeric' }); const [analyses, setAnalyses] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [page, setPage] = useState(1); const [pageSize, setPageSize] = window.usePersistedPageSize('dashboard'); useEffect(() => { let cancelled = false; window.API.listConversations(200) .then(r => { if (cancelled) return; const rows = (r.items || []).map(toRow); setAnalyses(rows); hydrateScoreCost(rows, (id, patch) => { if (cancelled) return; setAnalyses(prev => prev.map(row => row.id === id ? { ...row, ...patch } : row)); }); }) .catch(e => { if (!cancelled) setError(e.message); }) .finally(() => { if (!cancelled) setLoading(false); }); return () => { cancelled = true; }; }, []); const totalPages = Math.max(1, Math.ceil(analyses.length / pageSize)); const safePage = Math.min(page, totalPages); const pageItems = analyses.slice((safePage - 1) * pageSize, safePage * pageSize); // `used` is the authoritative this-month count from /user (server-tracked // in the usage table). Fall back to the conversation list length only when // the /user response hasn't loaded yet — never use it as the truth source, // since lifetime conversations ≠ monthly analyses. const used = typeof usageCount === 'number' ? usageCount : analyses.length; const pct = unlimited ? 0 : Math.min(100, (used / quota) * 100); const quotaExceeded = ctxQuotaExceeded || (used >= quota && tier === 'free'); return (
dashboard · {monthYear.toLowerCase()}

{greeting}{greetName ? `, ${greetName}` : ''}.

{unlimited ? <>You have unlimited conversations. : <>You have {quota - used} conversations remaining this billing month.}
{/* Quota exceeded banner */} {quotaExceeded && (
Free-tier quota reached
You've used all 3 conversations for this month. Upgrade to Pro for 25/mo, full pipeline, and PDF export.
)} {/* Stats row */}
Conversations used
{used}/ {unlimited ? ∞ : quota}
{!unlimited &&
90 ? 'var(--err)' : pct > 70 ? 'var(--warn)' : 'var(--accent)'}} />
}
{unlimited ? 'no monthly cap' : <>resets on 2026-05-01}
Current plan
{TIER_LABEL[tier]}
{tier === 'free' ? '€0/mo — 3 conversations' : tier === 'pro' ? '€29/mo — 25 conversations' : tier === 'team' ? '€79/mo — 100 conversations' : tier === 'admin' ? 'Unlimited · all features' : 'Custom SLAs'}
Conversations (total)
{loading ? '—' : analyses.length}
{loading ? 'Loading…' : (error || 'across all time')}
Last activity
{loading ? '—' : (analyses[0]?.date || 'No runs yet')}
{loading ? '' : (analyses[0]?.name || 'Start a new chat to begin')}
{/* Recent conversations */}
Conversations
{analyses.length > 0 && {analyses.length}}
{analyses.length === 0 ? ( 
{`    ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
    │                           │
    │    no conversations yet   │
    │                           │
    └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘`}
Start with a description
Paste a paragraph describing your AWS setup, or drop in Terraform. We'll diagram it, review it against Well-Architected, and quote it.
{['3-tier web app', 'Event-driven API', 'Data lake', 'Multi-region DR'].map(ex => ( ))}
) : (
{bucketAnalyses(pageItems).map((g, gi) => g.items.length === 0 ? null : (
— {g.label} —
{g.items.length}
{g.items.map(a => ( setRoute('detail', { id: a.id })}> ))}
{a.hasTitle && {a.id}} {a.name}
{a.status === 'complete' && complete} {a.status === 'failed' && failed} {a.score ?? '—'} {a.cost ? `€${a.cost.toFixed(2)}` : '—'} {a.date}
))} { setPageSize(n); setPage(1); }} />
)}
); } window.Dashboard = Dashboard;