{items.map(it => (
))}
{TIER_LABEL[tier]}
{menuOpen && (
<>
setMenuOpen(false)} />
{displayName}
{displayEmail}
)}
);
}
function MenuItem({ icon, label, onClick }) {
return (
);
}
window.TopNav = TopNav;
/* =========================================================================
Upgrade CTA — single source of truth for paid-tier conversion buttons.
Routes to the pricing screen.
========================================================================= */
function UpgradeCta({ className = 'btn accent', size, label = 'Upgrade to Pro', icon = 'sparkle' }) {
const { setRoute } = useApp();
const cls = size === 'sm' ? `${className} sm` : className;
return (
);
}
window.UpgradeCta = UpgradeCta;
/* =========================================================================
Locked overlay — for gated features
========================================================================= */
function LockedOverlay({ title, sub, cta = 'Upgrade to Pro', onUpgrade }) {
return (
);
}
window.LockedOverlay = LockedOverlay;
/* =========================================================================
Score ring
========================================================================= */
function ScoreRing({ value, size = 120, stroke = 8 }) {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const pct = Math.max(0, Math.min(100, value));
const color = pct >= 80 ? 'var(--ok)' : pct >= 60 ? 'var(--warn)' : 'var(--err)';
return (
);
}
window.ScoreRing = ScoreRing;
/* =========================================================================
Diagram (ASCII) — renders mono text with subtle color tagging on specific tokens
========================================================================= */
function AsciiDiagram({ text, height = '100%', bare = false }) {
const [zoom, setZoom] = useState(1);
// Colorize specific markers: ⚠ → warn, words in backticks → accent
const lines = text.split('\n');
return (
{lines.map((ln, i) => {
// Very light syntax coloring
const colored = ln
.replace(/⚠/g, '§W§⚠§/§')
.replace(/▶/g, '§A§▶§/§');
const parts = colored.split(/§W§|§A§|§\/§/);
return (
{parts.map((p, j) => {
if (p === '⚠') return ⚠;
if (p === '▶') return ▶;
return {p};
})}
);
})}
);
}
window.AsciiDiagram = AsciiDiagram;
/* =========================================================================
DiagramImage — renders the real PNG/SVG returned by the diagram service
========================================================================= */
function DiagramImage({ url, svgUrl, drawioUrl, height = '100%', bare = false }) {
// draw.io-style viewport: zoom + pan (translate). The inner wrapper is
// transformed; the outer viewport clips. Drag-to-pan with mouse, wheel to
// zoom (ctrl/cmd or plain wheel) centered on the cursor, +/−/Fit buttons.
const MIN_ZOOM = 0.2;
const MAX_ZOOM = 5;
const [zoom, setZoom] = useState(1);
const [pan, setPan] = useState({ x: 0, y: 0 });
const [dragging, setDragging] = useState(false);
const viewportRef = useRef(null);
const dragStart = useRef(null);
const displayUrl = svgUrl || url;
// Inline the SVG when available so it stays vector under CSS transforms.
//
rasterises once and then `transform: scale()` samples
// that bitmap — fine for fit-view, fuzzy when zoomed in. Inline SVG keeps
// the browser re-painting at every zoom level.
const [svgMarkup, setSvgMarkup] = useState(null);
useEffect(() => {
setSvgMarkup(null);
if (!svgUrl) return;
let cancelled = false;
fetch(svgUrl)
.then(r => r.ok ? r.text() : Promise.reject(new Error(`svg fetch ${r.status}`)))
.then(text => { if (!cancelled) setSvgMarkup(text); })
.catch(() => { /* fall back to
![]()
path below */ });
return () => { cancelled = true; };
}, [svgUrl]);
const reset = () => { setZoom(1); setPan({ x: 0, y: 0 }); };
const zoomAt = (nextZoom, cx, cy) => {
const clamped = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, +nextZoom.toFixed(3)));
setZoom(prevZoom => {
// Keep the point under the cursor stationary across the zoom change.
setPan(prevPan => {
const k = clamped / prevZoom;
return { x: cx - k * (cx - prevPan.x), y: cy - k * (cy - prevPan.y) };
});
return clamped;
});
};
const onWheel = (e) => {
e.preventDefault();
const rect = viewportRef.current?.getBoundingClientRect();
if (!rect) return;
const cx = e.clientX - rect.left;
const cy = e.clientY - rect.top;
const factor = Math.exp(-e.deltaY * 0.0015);
setZoom(prevZoom => {
const next = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, prevZoom * factor));
setPan(prevPan => {
const k = next / prevZoom;
return { x: cx - k * (cx - prevPan.x), y: cy - k * (cy - prevPan.y) };
});
return next;
});
};
// Attach wheel listener manually so we can passive:false (preventDefault).
useEffect(() => {
const el = viewportRef.current;
if (!el) return;
el.addEventListener('wheel', onWheel, { passive: false });
return () => el.removeEventListener('wheel', onWheel);
}, []);
const onMouseDown = (e) => {
if (e.button !== 0 && e.button !== 1) return;
dragStart.current = { x: e.clientX - pan.x, y: e.clientY - pan.y };
setDragging(true);
};
const onMouseMove = (e) => {
if (!dragging || !dragStart.current) return;
setPan({ x: e.clientX - dragStart.current.x, y: e.clientY - dragStart.current.y });
};
const endDrag = () => { setDragging(false); dragStart.current = null; };
const stepZoom = (delta) => {
const el = viewportRef.current;
const cx = el ? el.clientWidth / 2 : 0;
const cy = el ? el.clientHeight / 2 : 0;
zoomAt(zoom + delta, cx, cy);
};
return (
{drawioUrl &&
.drawio}
{url &&
.png}
{displayUrl ? (
{svgMarkup ? (
) : (
)}
) : (
rendering diagram…
)}
);
}
window.DiagramImage = DiagramImage;
/* =========================================================================
Backend → UI shape converters
========================================================================= */
const PILLAR_KEYS = {
'operational-excellence': { key: 'ops', name: 'Operational Excellence' },
'security': { key: 'sec', name: 'Security' },
'reliability': { key: 'rel', name: 'Reliability' },
'performance': { key: 'perf', name: 'Performance Efficiency' },
'cost': { key: 'cost', name: 'Cost Optimization' },
'sustainability': { key: 'sus', name: 'Sustainability' },
};
function scorecardToPillars(scorecard) {
if (!scorecard) return [];
const counts = {};
(scorecard.results || []).forEach(r => {
const k = r.pillar;
counts[k] = counts[k] || { rules: 0, fail: 0, warn: 0 };
counts[k].rules++;
if (!r.passed) {
if (r.severity === 'HIGH') counts[k].fail++;
else counts[k].warn++;
}
});
return Object.entries(scorecard.pillarScores || {}).map(([apiKey, score]) => {
const meta = PILLAR_KEYS[apiKey] || { key: apiKey, name: apiKey };
const c = counts[apiKey] || { rules: 0, fail: 0, warn: 0 };
return { key: meta.key, apiKey, name: meta.name, score: Math.round(score), ...c };
});
}
function scorecardToFindings(scorecard) {
if (!scorecard) return [];
return (scorecard.results || []).filter(r => !r.passed).map(r => ({
pillar: PILLAR_KEYS[r.pillar]?.key || r.pillar,
sev: r.severity,
rule: r.ruleId,
desc: r.recommendation,
ref: r.ruleId,
}));
}
function costToLines(cost) {
if (!cost) return [];
const hidden = new Set(cost.hiddenCostFlags || []);
return (cost.lineItems || []).map(l => ({
// The "resource" column shows the canonical AWS service ("Amazon RDS"),
// not the user-supplied identifier ("main-db") — users want to see what
// they're paying AWS for, not the label they gave it.
resource: l.awsServiceName || l.serviceType,
detail: l.serviceName ? `${l.serviceName} · ${l.notes}` : l.notes,
qty: '—',
unit: l.unit || '—',
mo: l.monthlyEstimate,
hidden: hidden.has(l.serviceId),
unavailable: l.priceSource === 'unavailable',
}));
}
// Pull the headline score/cost numbers out of a `getConversationVersion`
// response. Used by the dashboard and history list to hydrate row summaries.
function extractScoreCost(snap) {
const score = snap?.wafReview?.scorecard?.overallScore ?? null;
const totalMonthly = snap?.costEstimate?.totalMonthly;
const cost = typeof totalMonthly === 'number' ? totalMonthly : null;
return { score, cost };
}
window.scorecardToPillars = scorecardToPillars;
window.scorecardToFindings = scorecardToFindings;
window.costToLines = costToLines;
window.extractScoreCost = extractScoreCost;
const PAGE_SIZE_OPTIONS = [10, 25, 50];
const DEFAULT_PAGE_SIZE = 25;
// Footer with page-size selector ("10 / 25 / 50") + Prev/Next + range label.
// Total is the count of items being paginated; the parent slices the visible
// page itself.
function Pagination({ total, page, pageSize, onPage, onPageSize, label = 'conversation' }) {
const totalPages = Math.max(1, Math.ceil(total / pageSize));
const safePage = Math.min(Math.max(page, 1), totalPages);
const start = total === 0 ? 0 : (safePage - 1) * pageSize + 1;
const end = Math.min(total, safePage * pageSize);
return (
Showing {start}–{end} of {total} {total === 1 ? label : `${label}s`}
Page {safePage} of {totalPages}
);
}
window.Pagination = Pagination;
window.PAGE_SIZE_OPTIONS = PAGE_SIZE_OPTIONS;
window.DEFAULT_PAGE_SIZE = DEFAULT_PAGE_SIZE;
// Persist a per-list page-size choice across reloads. `key` namespaces it
// (e.g. "dashboard", "history") so each table remembers its own setting.
function usePersistedPageSize(key) {
const storageKey = `cac.pageSize.${key}`;
const [pageSize, setPageSize] = useState(() => {
try {
const raw = localStorage.getItem(storageKey);
const n = raw ? Number(raw) : NaN;
return PAGE_SIZE_OPTIONS.includes(n) ? n : DEFAULT_PAGE_SIZE;
} catch {
return DEFAULT_PAGE_SIZE;
}
});
const set = useCallback(n => {
setPageSize(n);
try { localStorage.setItem(storageKey, String(n)); } catch { /* quota / private mode */ }
}, [storageKey]);
return [pageSize, set];
}
window.usePersistedPageSize = usePersistedPageSize;
/* =========================================================================
Tweak surface registration
========================================================================= */
function AppProvider({ children }) {
// Tweak defaults (edit-mode block)
const defaults = /*EDITMODE-BEGIN*/ {
"theme": "light",
"accent": "cyan",
"tier": "pro",
"density": "comfortable",
"font": "inter-mono",
"pipelineState": "pending"
} /*EDITMODE-END*/;
const [state, setState] = useState(defaults);
// Full preferences doc (defaults, analysis, notifications). Loaded from
// the backend on auth. `null` means "not yet loaded" — components should
// fall back to their own defaults until it arrives.
const [preferences, setPreferences] = useState(null);
// With a real backend wired up, gate auth on a stored token. Without one,
// the prototype stays "signed in" so the design always renders.
const hasBackend = window.API?.hasBackend;
const [isAuthed, setAuthed] = useState(() => hasBackend ? Boolean(window.API.isAuthed()) : true);
const [user, setUser] = useState(() => (hasBackend ? window.API.currentUser() : null));
useEffect(() => {
setUser(isAuthed && hasBackend ? window.API.currentUser() : null);
}, [isAuthed, hasBackend]);
// Server-authoritative usage info (current month). Loaded from /user; the
// backend is the source of truth — never compute the count from the
// conversation list (that conflates lifetime conversations with monthly
// analyses) or trust localStorage.
const [usage, setUsage] = useState(null);
const [analysesLimit, setAnalysesLimit] = useState(null);
// Load tier + preferences + usage from backend whenever auth flips on.
useEffect(() => {
if (!isAuthed || !hasBackend) return;
let cancelled = false;
window.API.getMe().then(me => {
if (cancelled) return;
const next = {};
if (me?.subscription?.tier) next.tier = me.subscription.tier;
const a = me?.preferences?.appearance;
if (a) {
if (a.theme) next.theme = a.theme;
if (a.accent) next.accent = a.accent;
if (a.density) next.density = a.density;
if (a.font) next.font = a.font;
}
if (Object.keys(next).length) setState(s => ({ ...s, ...next }));
if (me?.preferences) setPreferences(me.preferences);
if (me?.usage) setUsage(me.usage);
if (typeof me?.subscription?.analysesLimit === 'number') {
setAnalysesLimit(me.subscription.analysesLimit);
}
}).catch(() => { /* leave defaults in place */ });
return () => { cancelled = true; };
}, [isAuthed, hasBackend]);
// Force-refresh /user (busts the 5-min client cache) so the dashboard /
// composer can re-pull the authoritative usage count after a run finishes.
const refreshUsage = useCallback(async () => {
if (!isAuthed || !hasBackend) return;
try {
window.API.invalidate?.('user');
const me = await window.API.getMe();
if (me?.usage) setUsage(me.usage);
if (typeof me?.subscription?.analysesLimit === 'number') {
setAnalysesLimit(me.subscription.analysesLimit);
}
} catch { /* leave previous value in place */ }
}, [isAuthed, hasBackend]);
const [route, _setRoute] = useState(() => {
const h = window.location.hash.replace('#', '');
return h || 'dashboard';
});
const [routeParams, setRouteParams] = useState({});
const setRoute = useCallback((r, params = {}) => {
_setRoute(r);
setRouteParams(params);
window.location.hash = r;
window.scrollTo({ top: 0 });
}, []);
useEffect(() => {
const onHash = () => {
const h = window.location.hash.replace('#', '') || 'dashboard';
_setRoute(h);
};
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
// Persist to host (edit-mode iframe) for design-tweak round-tripping.
const set = useCallback((patch) => {
setState(s => ({ ...s, ...patch }));
try {
window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
} catch (e) {}
}, []);
// Save appearance prefs (theme/accent/density/font) to the backend whenever
// they change, but only after the initial /user load has populated state
// — otherwise we'd overwrite the persisted values with the EDITMODE defaults
// on first render. We gate on `preferences` being non-null for that reason.
const persistAppearance = useCallback((patch) => {
if (!isAuthed || !hasBackend || !preferences) return;
const nextPrefs = {
...preferences,
appearance: { ...preferences.appearance, ...patch },
};
setPreferences(nextPrefs);
window.API.savePreferences(nextPrefs).catch(() => {});
}, [isAuthed, hasBackend, preferences]);
// Persist the full preferences doc (used by the Preferences screen's Save).
const savePreferences = useCallback(async (next) => {
setPreferences(next);
if (next.appearance) {
setState(s => ({
...s,
theme: next.appearance.theme ?? s.theme,
accent: next.appearance.accent ?? s.accent,
density: next.appearance.density ?? s.density,
font: next.appearance.font ?? s.font,
}));
}
if (!isAuthed || !hasBackend) return next;
const result = await window.API.savePreferences(next);
if (result?.preferences) setPreferences(result.preferences);
return result?.preferences ?? next;
}, [isAuthed, hasBackend]);
// Apply theme/density/font/accent to document
useEffect(() => {
document.documentElement.dataset.theme = state.theme;
document.documentElement.dataset.density = state.density;
document.documentElement.dataset.font = state.font;
const hues = { cyan: 215, green: 150, violet: 280, amber: 60, rose: 15 };
document.documentElement.style.setProperty('--accent-h', hues[state.accent] ?? 215);
}, [state.theme, state.density, state.font, state.accent]);
// Quota tier-cap: only `free` blocks at the limit (overage allowed for paid).
// Treat unloaded usage (`null`) as "not exceeded" so the gate doesn't flicker
// open during the initial /user fetch.
const tierLimitFromConfig = { free: 3, pro: 25, team: 100, enterprise: Infinity, admin: Infinity };
const effectiveLimit = analysesLimit ?? tierLimitFromConfig[state.tier] ?? tierLimitFromConfig.free;
const usageCount = usage?.count ?? 0;
const quotaExceeded = state.tier === 'free' && Number.isFinite(effectiveLimit) && usageCount >= effectiveLimit;
const value = {
theme: state.theme, setTheme: t => { set({ theme: t }); persistAppearance({ theme: t }); },
accent: state.accent, setAccent: a => { set({ accent: a }); persistAppearance({ accent: a }); },
tier: state.tier, setTier: t => set({ tier: t }),
density: state.density, setDensity: d => { set({ density: d }); persistAppearance({ density: d }); },
font: state.font, setFont: f => { set({ font: f }); persistAppearance({ font: f }); },
pipelineState: state.pipelineState, setPipelineState: v => set({ pipelineState: v }),
isAuthed, setAuthed,
user,
preferences, savePreferences,
refreshUser: () => setUser(hasBackend ? window.API.currentUser() : null),
hasBackend,
usage, usageCount, analysesLimit: effectiveLimit, quotaExceeded, refreshUsage,
signIn: () => { setAuthed(true); setUser(hasBackend ? window.API.currentUser() : null); },
signOut: () => {
if (hasBackend) window.API.signOut();
setAuthed(false);
setUser(null);
setPreferences(null);
setUsage(null);
setAnalysesLimit(null);
_setRoute('login');
window.location.hash = 'login';
},
route, setRoute,
routeParams,
};
return
{children};
}
window.AppProvider = AppProvider;
window.useApp = useApp;
window.TIERS = TIERS;
window.TIER_LABEL = TIER_LABEL;