// ============================================================ // PRODOTTO — AiKo Engine // Hero + Cosa fa + Pipeline + Phases + Memory + Compare + Use cases + Stack + CTA // ============================================================ const { useState: useStateAK, useEffect: useEffectAK, useRef: useRefAK } = React; const motionAK = new Proxy({}, { get: (_, p) => window.FramerMotion.motion[p] }); const useInViewAK = (...a) => window.FramerMotion.useInView(...a); // ============================================================ // HERO prodotto // ============================================================ function AikoHero() { const ref = useRefAK(null); const isInView = useInViewAK(ref, { once: true }); return (
{/* Hexagonal frame */}
AiKo avatar { e.currentTarget.style.display = 'none'; }} /> {/* Scanline overlay */}
{/* HUD corners */}
{/* Status bar */}
★ ONLINE SYS: 95%
{/* Outer glow */}
); } // ============================================================ // COSA FA — gaming ability cards (3D tilt + neon glow) // ============================================================ function AbilityCard({ c, i, accent }) { const cardRef = useRefAK(null); const [tilt, setTilt] = useStateAK({ rx: 0, ry: 0, mx: 50, my: 50 }); const handleMove = (e) => { const r = cardRef.current.getBoundingClientRect(); const x = e.clientX - r.left, y = e.clientY - r.top; const ry = ((x / r.width) - 0.5) * 18; const rx = -((y / r.height) - 0.5) * 18; setTilt({ rx, ry, mx: (x / r.width) * 100, my: (y / r.height) * 100 }); }; const handleLeave = () => setTilt({ rx: 0, ry: 0, mx: 50, my: 50 }); return (
e.currentTarget.style.borderColor = accent} > {/* Hex grid background */}
{/* HUD corners */}
{/* Top scan line */}
{/* Ability badge */}
SKILL_{String(i + 1).padStart(2, '0')}
{/* Hexagonal icon */}

{c.title}

{c.desc}

); } function AikoWhatItDoes() { const abilities = [ { icon: 'cpu', title: 'Conversione assistita', desc: 'AiKo legge il sorgente RPG, ne capisce la business logic e genera codice moderno equivalente. L\'umano approva.' }, { icon: 'shield-check', title: 'Domain-specific', desc: 'Non è un prompt generico: è una pipeline costruita su pattern RPG/ILE/DB2 reali, codificati e versionati.' }, { icon: 'infinity', title: 'Zero disruption', desc: 'La modernizzazione avviene modulo per modulo. La produzione non si ferma. La logica resta dove funziona.' }, ]; return ( {/* Subtle gaming grid */}
// SKILL_TREE.exe

Trasforma codice RPG che tiene in piedi aziende intere
in applicazioni web moderne, modulo per modulo.

{abilities.map((c, i) => ( ))}
); } // ============================================================ // PIPELINE // ============================================================ function AikoPipeline() { const ref = useRefAK(null); const isInView = useInViewAK(ref, { once: true, margin: '-100px' }); const pipeline = [ { id: 1, label: 'Analisi Sorgente', icon: 'search-code', desc: 'L\'Analyst produce analisi backend e frontend dettagliate, con vincoli ancorati al blueprint.', output: 'analisi backend · analisi frontend' }, { id: 2, label: 'Generazione Codice', icon: 'cpu', desc: 'Il Backend Developer converte RPG, compila, legge spool, corregge iterativamente.', output: 'modulo.rpgle compilato · 95% pass rate' }, { id: 3, label: 'Review & Deploy', icon: 'rocket', desc: 'Approvazione umana, Frontend Developer genera pagina React, deploy staging.', output: 'page.jsx · staging URL · audit log' }, { id: 4, label: 'Documentazione', icon: 'file-text', desc: 'Il Docs Writer redige documentazione tecnica e operativa del modulo: API, contratti dati, runbook, note per chi mantiene.', output: 'docs tecniche · manuale operativo · changelog' }, ]; return ( {/* Arena floor — radial vignette + grid */}
{/* HUD frame */}
{/* HUD top bar */}
SYS://PIPELINE.STATUS = ACTIVE HUMAN-IN-THE-LOOP
{/* HUD corners */}
{pipeline.map((step, i) => ( { e.currentTarget.style.borderColor = colors.brandGold; e.currentTarget.style.boxShadow = `0 0 30px ${colors.brandGold}30`; }} onMouseLeave={e => { e.currentTarget.style.borderColor = `${colors.brandGold}40`; e.currentTarget.style.boxShadow = 'none'; }} > {/* Glow halo behind icon */}
{/* Hex icon with rotating ring */}
STAGE_{String(step.id).padStart(2, '0')}

{step.label}

{/* Loading bar with time */}

{step.desc}

OUTPUT > {step.output}
{i < pipeline.length - 1 && (
{/* Base line */} {/* Animated dashes */} {/* Packet */}
)} ))}
{/* HUD footer with telemetry */}
◢ HUMAN-IN-THE-LOOP: required at gate 03 ACCURACY: 95.0% ● CONVERGENCE: 3-phase loop
); } // ============================================================ // PIPELINE PHASES + CONSTITUTIONAL MEMORY // ============================================================ function AikoFiveDimRlaif() { const phases = [ { code: 'ANALYSIS', stages: ['Architect', 'Reinforcer', 'Analyst'] }, { code: 'CONTRACT', stages: ['Validator', 'Contract Freezer'] }, { code: 'BACKEND', stages: ['Backend IBMi', 'Source Verifier'] }, { code: 'FRONTEND', stages: ['Frontend'] }, { code: 'VERIFICATION', stages: ['E2E Tester', 'Doc Tech', 'Doc Ops', 'Learner'] }, ]; return (
12 stage · 5 fasi

Una catena di dodici agent

Ogni stage lavora su un blueprint condiviso e passa il testimone al successivo. Quando un E2E test fallisce, la regressione torna allo stage responsabile e il flusso riprende da lì.

Constitutional Memory · self-distilling context

Il modello scrive i propri vincoli

Ogni pipeline distilla regole nella memoria del cliente. La conversione successiva le rispetta come vincolo. Nessun fine-tuning: il contesto è l'asset.

); } function PipelinePhases({ phases }) { // Flatten stage list to compute global indices const totalStages = phases.reduce((acc, p) => acc + p.stages.length, 0); const phaseRanges = (() => { let acc = 0; return phases.map(p => { const start = acc; acc += p.stages.length; return { start, end: acc - 1 }; }); })(); // Animated execution head: 0..totalStages-1 = active stage, totalStages..totalStages+2 = "all done" pause const [pos, setPos] = useStateAK(0); useEffectAK(() => { const id = setInterval(() => { setPos(p => (p + 1) % (totalStages + 3)); }, 850); return () => clearInterval(id); }, [totalStages]); const safePos = Math.min(pos, totalStages); const allDone = pos >= totalStages; return (
{/* Runtime header bar */}
{allDone ? 'PIPELINE · CONVERGED' : 'RUNTIME · LIVE'}
STAGE {String(allDone ? totalStages : safePos + 1).padStart(2,'0')}/{totalStages}
{phases.map((p, i) => { const range = phaseRanges[i]; let status = 'pending'; if (allDone || pos > range.end) status = 'done'; else if (pos >= range.start && pos <= range.end) status = 'running'; const ledColor = status === 'running' ? colors.brandGreen : status === 'done' ? colors.brandGold : '#3a3a52'; const labelColor = status === 'pending' ? colors.textDim : colors.brandGold; const phaseBg = status === 'running' ? 'rgba(45,106,79,0.12)' : status === 'done' ? 'rgba(201,168,76,0.06)' : 'rgba(201,168,76,0.02)'; const phaseBorder = status === 'running' ? 'rgba(45,106,79,0.5)' : status === 'done' ? 'rgba(201,168,76,0.28)' : 'rgba(201,168,76,0.12)'; const phaseBorderL = status === 'running' ? colors.brandEmerald : status === 'done' ? colors.brandGold : 'rgba(201,168,76,0.25)'; return (
0{i + 1} · {p.code}
{p.stages.map((s, j) => { const stageGlobal = range.start + j; const isActive = !allDone && pos === stageGlobal; const isDone = allDone || pos > stageGlobal; const stageColor = isActive ? colors.brandEmerald : isDone ? colors.brandGold : colors.textMuted; const stageBg = isActive ? 'rgba(45,106,79,0.22)' : 'rgba(15,15,35,0.55)'; const stageBorder = isActive ? 'rgba(45,106,79,0.55)' : isDone ? 'rgba(201,168,76,0.28)' : 'rgba(201,168,76,0.16)'; const marker = isDone ? '✓' : isActive ? '▸' : '·'; return ( {marker} {s} ); })}
{i < phases.length - 1 && ( phaseRanges[i].end} /> )}
); })}
); } function PipelineConnector({ done }) { return (
↓ {done && ( )}
); } // ============================================================ // MEMORY TERMINAL — typewriter effect // ============================================================ function MemoryTerminal() { const lines = [ { text: '// MEMORY · client signature', tone: 'dim' }, { text: '[LEARNER] distilling 12 entries', tone: 'emerald' }, { text: '+ COALESCE on every nullable column', tone: 'gold' }, { text: '+ admin endpoint: POST /api/admin//', tone: 'gold' }, { text: '+ flat body, no legacy wrappers', tone: 'gold' }, { text: '✓ 3 new rules · dedup against 89 existing', tone: 'goldBright' }, ]; const [lineIdx, setLineIdx] = useStateAK(0); const [charIdx, setCharIdx] = useStateAK(0); useEffectAK(() => { const current = lines[lineIdx]; if (!current) { // All lines done — pause then loop const t = setTimeout(() => { setLineIdx(0); setCharIdx(0); }, 2800); return () => clearTimeout(t); } if (charIdx < current.text.length) { const speed = current.tone === 'dim' ? 22 : 28; const t = setTimeout(() => setCharIdx(c => c + 1), speed); return () => clearTimeout(t); } const t = setTimeout(() => { setLineIdx(i => i + 1); setCharIdx(0); }, 280); return () => clearTimeout(t); }, [lineIdx, charIdx]); const toneColor = (tone) => ({ dim: colors.textDim, emerald: colors.brandEmerald, gold: colors.textGold, goldBright: colors.brandGold, }[tone] || colors.textGold); const visibleLines = lines.slice(0, lineIdx + 1); const cursorActive = lineIdx < lines.length; return (
{/* CRT scanlines */}
{/* Top bar */}
REC · MEMORY.LOG {lineIdx >= lines.length - 1 && charIdx >= (lines[lines.length-1]?.text.length ?? 0) ? 'CONVERGED' : 'WRITING...'}
{visibleLines.map((l, i) => { const isCurrent = i === lineIdx; const text = isCurrent ? l.text.slice(0, charIdx) : l.text; return (
{text} {isCurrent && cursorActive && ( )}
); })}
); } // ============================================================ // TASK TYPES — pipeline configurabile // ============================================================ function AikoTaskTypes() { const types = [ { code: 'conversion', label: 'Conversion', desc: 'Programmi RPG legacy convertiti in web. Pipeline completa con compile su IBM i, source-verifier e regression re-loop.', accent: colors.brandGold }, { code: 'feature', label: 'Feature', desc: 'Nuova funzionalità su codebase esistente. Catena ridotta: analyst → backend → frontend → e2e.', accent: colors.brandGoldMuted }, { code: 'new-rpg', label: 'New RPG', desc: 'Nuovo programma SQLRPGLE da zero, con compile + deploy + registrazione menu via MCP IBM i.', accent: colors.brandEmerald }, { code: 'standalone', label: 'Standalone', desc: 'Progetto indipendente, fuori dall\'ecosistema Lumiere/Kodari. Solo analisi + frontend.', accent: '#a855f7' }, { code: 'crud-gen', label: 'CRUD Gen', desc: 'Schema DB → schermate CRUD admin. Mapper-DB raggruppa tabelle in unità UI (master-detail, wizard, simple-crud).', accent: '#3aafff' }, ]; return (
{types.map((t, i) => ( { e.currentTarget.style.borderColor = t.accent; e.currentTarget.style.boxShadow = `0 0 30px ${t.accent}30`; }} onMouseLeave={e => { e.currentTarget.style.borderColor = `${t.accent}40`; e.currentTarget.style.boxShadow = 'none'; }} >
{`{${t.code}}`}

{t.label}

{t.desc}

))}
{/* Tree-mapping callout */}
{'{tree-mapping}'} · BONUS

Reverse-engineering 5250 interattivo

Modalità separata che ricostruisce l'albero delle chiamate interattive (F-keys, opzioni subfile) fino a 8 livelli di profondità. Produce un grafo di progetto con classificazione UI semantica (modale vs pagina, lookup vs drill-down) e identificazione dei componenti condivisi — prima di lanciare la conversione di massa.

); } // ============================================================ // WaveColumn / MemoryShard — gaming HUD building blocks // ============================================================ function WaveColumn({ num, status, statusColor, programs, dim }) { return (
{/* corner notch */}
{/* Header */}
WAVE
{num}
{status}
{/* Programs */}
{programs.map(p => ( ))}
); } function ProgramCard({ name, pct, state }) { const stateColor = state === 'done' ? colors.brandEmerald : state === 'active' ? colors.brandGold : colors.textDim; const stateGlyph = state === 'done' ? '✓' : state === 'active' ? '◉' : '○'; return (
{stateGlyph} {name} {pct}%
{/* HP/XP bar */}
); } function MemoryShard({ label, pending }) { const c = pending ? colors.textDim : colors.brandEmerald; return (
{/* Diamond shard */}
{label}
{pending ? 'LOCKED' : '+XP'}
); } // ============================================================ // MULTI-PIPELINE — Projects + Mapper + Waves // ============================================================ function AikoProjects() { const features = [ { icon: 'git-fork', title: 'Mapper agent', desc: 'Analizza CALL/CALLP, copy member, display file. Costruisce un grafo di dipendenze con ordinamento topologico in wave parallele.' }, { icon: 'layers', title: 'Wave execution', desc: 'I programmi senza dipendenze partono in parallelo (wave 1). Le wave successive aspettano il completamento delle precedenti.' }, { icon: 'brain', title: 'Memory Merger', desc: 'Fra una wave e l\'altra, un agente dedicato consolida i learning di pipeline nel MEMORY.md del cliente. La wave successiva parte già più informata.' }, { icon: 'sliders-horizontal', title: 'Stage selector', desc: 'Per progetto si scelgono quali stadi includere (e.g. saltare docs, e2e). Max parallelismo modificabile a runtime.' }, ]; return (
{/* Wave diagram — gaming HUD */} {/* Scanline overlay */}
{/* HUD Top bar */}
◢ MISSION ACTIVE // project_alpha
DEPS 6/6 PARALLEL ×3 SHARDS +2
{/* Wave grid */}
{/* WAVE 01 — completed */} {/* WAVE 02 — in progress */} {/* WAVE 03 — queued */}
{/* HUD bottom */}
◢ MAPPER builds dependency graph · waves enforce topological order ◢ MEMORY consolidates between waves · +XP on next run
{/* Features */}
{features.map((f, i) => (

{f.title}

{f.desc}

 ))}
); } // ============================================================ // HUMAN-IN-THE-LOOP CONTROLS // ============================================================ function AikoHitlControls() { const controls = [ { icon: 'check-check', label: 'Approve', desc: 'Il revisore approva lo stadio e la pipeline avanza. Auto-approve attivabile per stadi a basso rischio.' }, { icon: 'undo-2', label: 'Reject + feedback', desc: 'Rigetto con motivazione: l\'agente riprende dalla session, integra il feedback, riproduce.' }, { icon: 'rotate-ccw', label: 'Retry', desc: 'Stadio in errore: rollback a pending e respawn da capo. Sessione fresca, prompt invariato.' }, { icon: 'skip-forward', label: 'Skip', desc: 'Marca lo stadio fallito come completed e fa proseguire la pipeline. Utile su passaggi non bloccanti.' }, { icon: 'rewind', label: 'Rollback regressivo', desc: 'L\'E2E tester individua chi è responsabile di un bug: rollback automatico fino a quello stadio per re-loop.' }, { icon: 'message-square-warning', label: 'Unblock', desc: 'L\'agente segnala uno stato BLOCKED quando ha bisogno di input umano. Risposta dell\'utente → resume.' }, ]; return (
{controls.map((c, i) => (
{c.label}

{c.desc}

 ))}
); } // ============================================================ // USE CASES // ============================================================ function AikoUseCases() { const cases = [ { tier: 'BOSS', tierColor: colors.brandGold, title: 'Modernizzazione UI di gestionale ERP', problem: 'Centinaia di programmi RPG con interfaccia 5250 ancora in produzione.', solution: 'AiKo converte modulo per modulo in pagine React mantenendo la business logic intatta.', kpi: 'Modernizzazione incrementale, zero downtime', stats: { difficulty: 5, xp: '60K', time: '6w' }, }, { tier: 'ELITE', tierColor: colors.brandEmerald, title: 'Apertura backend IBM i a mobile/web', problem: 'Logica di business preziosa, ma chiusa nel green-screen.', solution: 'La pipeline AiKo genera anche le proposte API REST, esposte poi via Kodari Bridge.', kpi: 'API REST documentate generate da analisi automatica', stats: { difficulty: 4, xp: '40K', time: '4w' }, }, { tier: 'LEGENDARY', tierColor: '#a855f7', title: 'Continuità operativa a fronte di skill shortage', problem: 'I developer RPG vanno in pensione, sostituirli è quasi impossibile.', solution: 'AiKo codifica i pattern in MD versionati: il know-how diventa asset, non persona.', kpi: 'Pattern proprietario riusabile, IP protetto', stats: { difficulty: 5, xp: '∞', time: 'permanent' }, }, ]; return ( {/* Scan line atmosphere */}
{cases.map((c, i) => ( { e.currentTarget.style.borderColor = c.tierColor; e.currentTarget.style.boxShadow = `0 0 0 1px ${c.tierColor}40 inset, 0 0 40px ${c.tierColor}30, 0 20px 50px -20px rgba(0,0,0,0.6)`; }} onMouseLeave={e => { e.currentTarget.style.borderColor = `${c.tierColor}40`; e.currentTarget.style.boxShadow = `0 0 0 1px ${c.tierColor}10 inset, 0 20px 50px -20px rgba(0,0,0,0.6)`; }} > {/* Glow corner */}
{/* Tier ribbon */}
★ {c.tier}
QUEST_{String(i + 1).padStart(3, '0')}

{c.title}

{/* Stats bar */}
DIFF
{Array.from({ length: 5 }).map((_, k) => (
))}
XP
+{c.stats.xp}
▼ THREAT

{c.problem}

▲ STRATEGY

{c.solution}

✓ {c.kpi}
))}
); } // ============================================================ // COMPARE TABLE (riusato da V1) // ============================================================ function AikoCompare() { const compRows = [ { dim: 'Modello', generic: 'Prompt generico', aiko: 'Pipeline multi-agente domain-specific IBM i' }, { dim: 'Accuratezza', generic: '40-60% (dipende dal prompt)', aiko: '95% verificato su codice reale enterprise' }, { dim: 'Dominio', generic: 'Generico, non conosce DB2/400, ILE', aiko: 'Costruito su 30+ anni di pattern RPG reali' }, { dim: 'Scalabilità', generic: 'Manuale, non replicabile', aiko: 'Pipeline automatizzata, 1.000+ programmi' }, { dim: 'Proprietà IP', generic: 'Know-how nel prompt (volatile)', aiko: 'Pattern MD codificati, asset aziendale' }, { dim: 'Apprendimento', generic: '—', aiko: 'Constitutional memory: il modello scrive i propri vincoli' }, ]; return (
Dimensione
Approccio Generico
★ AiKo Engine
{compRows.map((row, i) => (
{row.dim}
{row.generic}
{row.aiko}
))}
); } // ============================================================ // METRICS — quote-able // ============================================================ function AikoMetrics() { const ref = useRefAK(null); const isInView = useInViewAK(ref, { once: true }); return (
{[ { val: '95', suf: '%', label: 'Accuratezza', sub: 'su codice enterprise' }, { val: '10', suf: 'x', label: 'Velocità', sub: 'vs approccio manuale' }, { val: '12', suf: '', label: 'Stage', sub: 'pipeline orchestrata' }, ].map((m, i) => ( ))}
); } function MetricBlock({ val, suf, label, sub, delay, triggered }) { const num = useCounterAnimation(parseInt(val), 2200, triggered); return (
{num}{suf}
{label}
{sub}
 ); } // ============================================================ // CROSS-LINK ALTRI BRAND // ============================================================ function AikoCrossLinks() { const others = [ { name: 'Kodari', role: 'Backend / API Gateway', href: 'kodari.html', Logo: KodariLogo, color: colors.brandGreen }, { name: 'Lumiere', role: 'Frontend Enterprise', href: 'lumiere.html', Logo: LumiereLogo, color: colors.brandGold }, { name: 'Lestage', role: 'File Flow Orchestration', href: 'lestage.html', Logo: LestageLogo, color: colors.brandAmber }, ]; return ( ); } // ============================================================ // CTA // ============================================================ function AikoCta() { return (
); } // ============================================================ // APP // ============================================================ function AikoApp() { return (
); } function mountAiko() { const ready = typeof colors !== 'undefined' && typeof CompassLogo !== 'undefined' && typeof SiteNav !== 'undefined' && typeof SiteFooter !== 'undefined' && window.FramerMotion && window.lucide; if (!ready) return setTimeout(mountAiko, 50); const root = ReactDOM.createRoot(document.getElementById('app')); root.render(); if (window.lucide) { const observer = new MutationObserver(() => window.lucide.createIcons()); observer.observe(document.body, { childList: true, subtree: true }); window.lucide.createIcons(); } } mountAiko();