Expand Genies section with multi-provider, terminal, editor, MCP & full feature audit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/page.jsx

@@ -122,7 +122,7 @@ export default function Home() {
               {icon:'🌐', label:'Web Apps',         desc:'Next.js, Nuxt, SvelteKit, Remix, Rails, Django, Laravel',    glow:'rgba(139,92,246,0.12)'},
               {icon:'⚙️', label:'REST & GraphQL',   desc:'Express, Fastify, Go Fiber, FastAPI, NestJS, tRPC',          glow:'rgba(99,102,241,0.12)'},
               {icon:'🗄️', label:'Databases',        desc:'Postgres, MySQL, MongoDB, Redis, SQLite, ClickHouse',         glow:'rgba(59,130,246,0.1)'},
-              {icon:'🤖', label:'AI Agents',         desc:'Autonomous Genies — Claude-powered, in-playground coders',   glow:'rgba(167,139,250,0.12)'},
+              {icon:'🤖', label:'AI Agents',         desc:'Multi-provider Genies — Claude, Gemini, GPT, OpenCode — terminal, editor & MCP in every Playground',   glow:'rgba(167,139,250,0.12)'},
               {icon:'🔄', label:'Preview Envs',      desc:'Every branch gets its own subdomain & live URL automatically',glow:'rgba(34,197,94,0.09)'},
               {icon:'⚡', label:'Jobs & CI',         desc:'One-shot Tricks: tests, migrations, cron, build pipelines',  glow:'rgba(234,179,8,0.09)'},
               {icon:'🧩', label:'Microservices',     desc:'Multi-repo compose: frontend + backend + workers + infra',   glow:'rgba(239,68,68,0.08)'},
@@ -217,32 +217,71 @@ export default function Home() {
       {/* ── GENIES SPOTLIGHT ── */}
       <section id="genies" className="py-28 px-6 relative overflow-hidden" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
         <div className="glow-orb" style={{width:900,height:900,background:'radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 70%)',top:'50%',left:'50%',transform:'translate(-50%,-50%)'}} />
-        <div className="max-w-5xl mx-auto relative z-10">
+        <div className="max-w-6xl mx-auto relative z-10">
-          <div className="glass-strong rounded-3xl p-10 md:p-16 text-center">
+
-            <div className="text-5xl mb-6">🤖</div>
+          <div className="text-center mb-16">
-            <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(139,92,246,0.7)'}}>Genies — AI Agents</p>
+            <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(139,92,246,0.7)'}}>Genies — AI Development Agents</p>
             <h2 className="font-display text-4xl md:text-6xl font-normal mb-6" style={{letterSpacing:'-0.02em'}}>
               Agents that actually<br /><em className="gradient-text not-italic">ship code.</em>
             </h2>
-            <p className="text-lg max-w-2xl mx-auto mb-12 leading-relaxed" style={{color:'rgba(161,161,170,0.75)'}}>
+            <p className="text-lg max-w-2xl mx-auto mb-10 leading-relaxed" style={{color:'rgba(161,161,170,0.75)'}}>
-              Genies are autonomous Claude-powered agents that live inside your Playgrounds.
+              Genies are autonomous AI agents that live inside your Playgrounds.
-              Full access to your codebase, terminal, Docker and git.
+              Full access to your codebase, a real terminal, a file editor and Docker.
               Assign a task — they plan, build, test and push.
             </p>
 
-            <div className="grid md:grid-cols-3 gap-4 text-left">
+            {/* Provider chips */}
+            <div className="flex flex-wrap justify-center gap-2">
               {[
-                {title:'Full environment access', desc:'Reads code, runs commands, edits files, pushes commits — inside a live Playground with real Docker services running.'},
+                {label:'Claude Code', color:'#a78bfa'},
-                {title:'Mutter stream',            desc:'Real-time internal monologue. Watch the agent reason, plan and debug. Transparent by design. No black boxes.'},
+                {label:'Gemini CLI',  color:'#34d399'},
-                {title:'Artefacts & Feedback',     desc:'Genies produce artefacts (files, reports, PRs) and request feedback. A proper async collaboration loop.'},
+                {label:'OpenAI Codex',color:'#60a5fa'},
-              ].map(({title, desc}) => (
+                {label:'OpenCode',    color:'#fb923c'},
-                <div key={title} className="glass rounded-xl p-5" style={{borderColor:'rgba(139,92,246,0.15)'}}>
+              ].map(({label, color}) => (
+                <span key={label} className="px-3 py-1 rounded-full text-xs font-semibold"
+                  style={{color, border:`1px solid ${color}40`, background:`${color}18`}}>
+                  {label}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* 6-card grid */}
+          <div className="grid md:grid-cols-3 gap-4 mb-6">
+            {[
+              {icon:'⬛', title:'In-browser Terminal',   desc:'Full PTY terminal via xterm.js. Watch your agent run commands, install packages and start servers — live, in the browser.'},
+              {icon:'📝', title:'CodeMirror 6 Editor',   desc:'Production-grade file editor built in. Agents edit code; you see every change — syntax-highlighted, diff-aware, instant.'},
+              {icon:'🧠', title:'Activity & Thinking',   desc:'Live reasoning sidebar. Thinking steps, planning and debugging surface in real time. No black boxes, no guessing.'},
+              {icon:'🔌', title:'MCP Server support',    desc:'Connect any Model Context Protocol server — HTTP or stdio. Extend Genie capabilities with custom tools and data sources.'},
+              {icon:'💬', title:'Mutter stream',         desc:'Real-time internal monologue. Agents surface blockers, proofs and problems as structured mutters you can act on immediately.'},
+              {icon:'📦', title:'Artefacts & Feedback',  desc:'Genies produce files, reports and PRs as artefacts. Leave feedback. A proper async human-in-the-loop collaboration loop.'},
+            ].map(({icon, title, desc}) => (
+              <div key={title} className="glass rounded-2xl p-6 transition-all hover:scale-[1.01] hover:brightness-105"
+                style={{borderColor:'rgba(139,92,246,0.15)'}}>
+                <div className="text-2xl mb-3">{icon}</div>
                 <h4 className="font-semibold text-white text-sm mb-2">{title}</h4>
                 <p className="text-xs leading-relaxed" style={{color:'rgba(161,161,170,0.6)'}}>{desc}</p>
               </div>
             ))}
           </div>
+
+          {/* Feature strip */}
+          <div className="glass rounded-2xl p-6" style={{borderColor:'rgba(139,92,246,0.1)'}}>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
+              {[
+                {val:'≤ 20 MB',       label:'file uploads'},
+                {val:'persistent',    label:'multi-conversation memory'},
+                {val:'GHCR',          label:'multi-arch Docker images'},
+                {val:'GDPR',          label:'export & delete built-in'},
+              ].map(({val, label}) => (
+                <div key={label}>
+                  <div className="font-semibold text-sm gradient-text mb-0.5">{val}</div>
+                  <div className="text-xs" style={{color:'rgba(161,161,170,0.4)'}}>{label}</div>
                 </div>
+              ))}
+            </div>
+          </div>
+
         </div>
       </section>
 
@@ -259,7 +298,7 @@ export default function Home() {
             </p>
           </div>
 
-          <div className="grid md:grid-cols-2 gap-10">
+          <div className="grid md:grid-cols-2 gap-10 mb-10">
             <div>
               <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(255,255,255,0.2)'}}>Platform</p>
               <div className="flex flex-wrap gap-2">
@@ -283,6 +322,17 @@ export default function Home() {
               </div>
             </div>
           </div>
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(255,255,255,0.2)'}}>Genies stack</p>
+            <div className="flex flex-wrap gap-2">
+              {['xterm.js','CodeMirror 6','WebSocket / PTY','Claude Code','Gemini CLI','OpenAI Codex','OpenCode','MCP','GHCR multi-arch'].map(t => (
+                <span key={t} className="px-3 py-1.5 rounded-lg text-sm font-mono glass"
+                  style={{color:'rgba(167,139,250,0.75)',borderColor:'rgba(139,92,246,0.18)'}}>
+                  {t}
+                </span>
+              ))}
+            </div>
+          </div>
         </div>
       </section>