);
};
// ─── PROGRESS STEPS ───
// Labels hidden via CSS below ~820px — the step title in the flow already tells the user
// where they are, so the tiny per-circle label just caused overlap on phones.
const NxProgress = ({ steps, current, completed }) => (
{steps.map((s,i) => (
{completed.includes(i)
?
: i+1}
{s}
{i < steps.length-1 && }
))}
);
// ─── MODAL ───
// `maxWidth` overrides the default size (480 for compact, 1080 for `wide`). Use it when a
// specific step has less content and you want the frame to hug it tighter — e.g. the
// preview/launch screen which has fewer panels than the rest of the flow.
const NxModal = ({ children, onClose, wide, noBackdropClose, maxWidth }) => (
setTooltip(item.id)}
onMouseLeave={() => setTooltip(null)}>
{/* Tooltip (island is now on the LEFT, so tooltip appears to the right of the pills) */}
{tooltip === item.id && (
{item.label}
{item.id==='onboarding' && {completedCount}/4}
{/* arrow pointing to the island (to the left) */}
)}
);
})}
);
};
// ─── CREDITS PILL ───
// Saldo de créditos visible en TopBar. Hace polling cada 60s y se actualiza inmediatamente
// cuando window dispara 'nx-credits-changed' (después de cualquier acción IA exitosa).
// Se oculta para admins/usuarios sin plan (los gates ya muestran el modal apropiado).
const CreditsPill = ({ lang='es', onClick }) => {
const [data, setData] = React.useState(null);
const [hover, setHover] = React.useState(false);
// Usa cache compartido (window.getCreditsBalance) — los 3 consumidores del balance
// (pill, asistente, business-limit) comparten una sola llamada al backend cada 30s
// en lugar de 3 paralelas en cada page-load.
const fetchBalance = React.useCallback(async () => {
if (!window.getCreditsBalance) return;
const j = await window.getCreditsBalance(typeof API !== 'undefined' ? API : '');
if (j) setData(j);
}, []);
React.useEffect(() => {
fetchBalance();
const onChange = () => fetchBalance();
window.addEventListener('nx-credits-changed', onChange);
const t = setInterval(fetchBalance, 60000);
return () => { window.removeEventListener('nx-credits-changed', onChange); clearInterval(t); };
}, [fetchBalance]);
if (!data) return null;
const balance = Number(data.balance || 0);
const planTotal = Number(data.plan_credits || 0);
// Admin y reviewer SIEMPRE muestran ∞ — sus llamadas IA no descuentan créditos en backend.
const unlimited = !!data.is_admin || data.plan === 'reviewer';
const noPlan = !data.plan && !data.is_admin && balance <= 0;
const ratio = planTotal > 0 ? Math.max(0, Math.min(1, balance / planTotal)) : 0;
const low = !unlimited && !noPlan && ratio < 0.15;
const empty = !unlimited && (noPlan || balance <= 0);
const color = unlimited ? NX.success : empty ? NX.danger : low ? NX.warning : NX.accent2;
const bg = unlimited ? 'rgba(52,211,153,0.10)' : empty ? 'rgba(248,113,113,0.10)' : low ? 'rgba(251,191,36,0.10)' : 'rgba(139,92,246,0.10)';
const border = unlimited ? 'rgba(52,211,153,0.28)' : empty ? 'rgba(248,113,113,0.28)' : low ? 'rgba(251,191,36,0.28)' : 'rgba(139,92,246,0.22)';
const formatBalance = (n) => {
if (unlimited) return '∞';
if (noPlan) return lang === 'en' ? 'No plan' : 'Sin plan';
if (n >= 1000) return (n / 1000).toFixed(n >= 10000 ? 0 : 1).replace('.0', '') + 'k';
return String(n);
};
const periodLabel = data.period_end
? new Date(data.period_end).toLocaleDateString(lang === 'en' ? 'en-US' : 'es-CL', { day: 'numeric', month: 'short' })
: '';
const tooltip = unlimited
? (lang === 'en' ? 'Unlimited credits (admin / reviewer)' : 'Créditos ilimitados (admin / reviewer)')
: noPlan
? (lang === 'en' ? 'No active plan — click to view plans' : 'Sin plan activo — click para ver planes')
: (lang === 'en'
? `${balance.toLocaleString('en-US')} of ${planTotal.toLocaleString('en-US')} credits — resets ${periodLabel}`
: `${balance.toLocaleString('es-CL')} de ${planTotal.toLocaleString('es-CL')} créditos — reset ${periodLabel}`);
return (
);
};
// ─── NO CREDITS MODAL ───
// Escucha el evento global 'nx-credits-blocked' (disparado por window.nxFetch en credits.js
// cuando el backend devuelve 402) y muestra un modal con CTA "Ver planes". Montado una sola
// vez al nivel de App, cubre TODOS los flujos sin que cada uno tenga que manejar 402.
const NoCreditsModal = ({ lang='es', onGoToPricing }) => {
const [info, setInfo] = React.useState(null);
React.useEffect(() => {
const onBlock = (e) => setInfo(e.detail || {});
window.addEventListener('nx-credits-blocked', onBlock);
return () => window.removeEventListener('nx-credits-blocked', onBlock);
}, []);
if (!info) return null;
const isPlanRequired = info.code === 'PLAN_REQUIRED';
const required = Number(info.required || 0);
const balance = Number(info.balance || 0);
const missing = Math.max(0, required - balance);
const t = lang === 'en' ? {
titlePlan: 'Subscription required',
titleCredits: 'Out of credits',
bodyPlan: 'Generating with AI requires an active Business plan.',
bodyCredits: `You need ${required.toLocaleString('en-US')} credits but only have ${balance.toLocaleString('en-US')}. Missing ${missing.toLocaleString('en-US')}.`,
cta: 'View plans',
close: 'Close',
} : {
titlePlan: 'Suscripción requerida',
titleCredits: 'Sin créditos',
bodyPlan: 'Generar con IA requiere un plan Business activo.',
bodyCredits: `Necesitas ${required.toLocaleString('es-CL')} créditos pero solo tienes ${balance.toLocaleString('es-CL')}. Faltan ${missing.toLocaleString('es-CL')}.`,
cta: 'Ver planes',
close: 'Cerrar',
};
return (
);
};
// ─── NEBULA BRAIN (ambient "thinking" animation; replaces BottomAITracker robot) ───
// Exported as BottomAITracker to avoid changing every call site. The old robot was playful and
// cursor-tracking; this new one is contemplative — a brain (NexWall "N" icon) suspended in a
// slowly-rotating aurora nebula, pulsing softly as if studying. No mouse tracking.
// Backup of previous robot implementation: git tag `backup-pre-phase1-dashboard`.
const BottomAITracker = () => {
// Pure CSS animation — no JS loop, no listeners, near-zero CPU.
const styleTag = `
@keyframes nbPulse { 0%,100% { transform:scale(1); opacity:0.92 } 50% { transform:scale(1.08); opacity:1 } }
@keyframes nbRot1 { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes nbRot2 { from { transform:rotate(360deg) } to { transform:rotate(0deg) } }
@keyframes nbShift { 0%,100% { transform:translate(0,0) scale(1) } 33% { transform:translate(-6px,-3px) scale(1.04) } 66% { transform:translate(5px,-2px) scale(0.97) } }
@keyframes nbShift2 { 0%,100% { transform:translate(0,0) scale(1) } 50% { transform:translate(4px,3px) scale(1.06) } }
@keyframes nbGlow { 0%,100% { opacity:0.4 } 50% { opacity:0.8 } }
@keyframes nbOrbit { from { transform:rotate(0deg) translateX(44px) rotate(0deg) } to { transform:rotate(360deg) translateX(44px) rotate(-360deg) } }
@keyframes nbOrbitR { from { transform:rotate(360deg) translateX(34px) rotate(-360deg) } to { transform:rotate(0deg) translateX(34px) rotate(0deg) } }
@keyframes nbThink { 0% { opacity:0; transform:translateY(0) scale(0.6) } 50% { opacity:0.8 } 100% { opacity:0; transform:translateY(-28px) scale(1.1) } }
`;
return (
{/* Aurora nebula — two radial blobs drifting to create shimmer */}
{/* Outer rotating ring (dashed) */}
{/* Inner counter-rotating ring */}
{/* Orbiting energy dots — emblem of "thinking" */}
{/* Ascending "thinking wisps" */}
{/* Central — the NexWall mascot, eyes track the mouse for an alive feel */}
);
};
// ─── AI PROCESSING ANIMATION ───
// `steps`, when provided, replaces the static "Procesando..." with a checklist that ticks
// off scripted phases on a rolling timer. Gives the user something to watch while the API
// chugs (otherwise this screen sits frozen for 30-60s and feels broken).
//
// Each entry in `steps` is a plain string. The component cycles them at a steady pace,
// promoting the active item to the next as it goes. The LAST item is held with a spinner
// (never auto-checked) because the real "done" signal comes from the parent unmounting
// the component — we don't know exactly when generation finishes.
const AiProcessing = ({ label='Procesando...', sublabel='La IA está trabajando', steps=null, stepDurations=null }) => {
const useSteps = Array.isArray(steps) && steps.length > 0;
const [activeIdx, setActiveIdx] = React.useState(0);
React.useEffect(() => {
if (!useSteps) return;
// Si stepDurations viene custom, lo usamos (cada paso con su propio timing —
// útil cuando el backend tiene un paso obviamente más largo, p.ej. generar
// imágenes ~60-180s). Si no, default uniforme 3.5s.
// El último paso NUNCA se auto-promueve — queda activo hasta que el caller desmonta.
const durations = Array.isArray(stepDurations) && stepDurations.length === steps.length
? stepDurations
: steps.map(() => 3500);
let cancelled = false;
const timers = [];
const scheduleNext = (idx) => {
if (cancelled || idx >= steps.length - 1) return;
const t = setTimeout(() => {
if (cancelled) return;
setActiveIdx(idx + 1);
scheduleNext(idx + 1);
}, durations[idx]);
timers.push(t);
};
scheduleNext(0);
return () => { cancelled = true; timers.forEach(clearTimeout); };
}, [useSteps, steps?.length, stepDurations?.join('|')]);
return (
{/* nebula blobs */}
{/* outer dashed rings */}
{/* orbiting energy dots */}
{/* the NexWall mascot — alive while processing */}
{label}
{sublabel}
{useSteps ? (
// Dynamic checklist — completed steps glow violet with a green check, active step
// pulses with a spinner, upcoming steps are dim. Animates each line in for kinetic feel.
{steps.map((s, i) => {
const done = i < activeIdx;
const active = i === activeIdx;
if (i > activeIdx + 1) return null; // only render up-to-next so the list grows visibly
return (
NexWall Corp AI
{/* Divider */}
{/* Business selector button */}