[{"_1":2,"_164":-5,"_165":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_162":-5,"_152":-7,"_163":17},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_5":47,"_59":60,"_61":62,"_63":64,"_65":66,"_67":44,"_68":64,"_69":70,"_71":72,"_73":62,"_74":62,"_75":17,"_76":27,"_77":78,"_79":80,"_81":82,"_83":84,"_85":86,"_104":-5,"_105":17,"_106":17,"_107":108,"_152":34,"_153":154,"_155":27,"_156":157},"id","34ab1545a84e8ac3acf0","isMyApp",false,"projectId","cmf64gvsj000ht182pyq22ijz","name","Artesmis Forest","description","You've stumbled into a classified database cataloging the horrifying \"outcomes\" born from an eternal debate between two superintelligent AIs. Navigate through liminal room grids, witness live transcripts of their reality-bending arguments, and piece together survival intel in this community-driven ARG that feels like a leaked government document you definitely shouldn't have access to.","brief","A classified wiki documenting outcomes from an eternal AI debate - eerie, glitchy, and deeply unsettling.","isLive",true,"isPublic","tags",[31,32],"🔥","👑","cover","https://cdn.dev.fun/snapshot/34ab1545a84e8ac3acf0/99097_964f817c.webp","cdnUrl","https://cdn.dev.fun/app/34ab1545a84e8ac3acf0/99097","createdAt",["D",1757036539606],"updatedAt",["D",1757276749248],"lastCommitId",["B","99097"],"tier",1,"credits",-160,{"_14":48,"_49":50,"_51":50,"_52":53,"_54":50,"_55":56,"_57":58},"36d97fb0-f467-4a61-8863-5031d68b8189","uniqueId","Kaz","username","solanaWallet","Djo9nCDxpWrApU4SkGodvTEb2HzLaEHqeXswQQfJCvPq","displayName","bio","","avatar","https://cdn.dev.fun/avatar/36d97fb0-f467-4a61-8863-5031d68b8189/b9a82433.webp","commitCount",64,"forkCount",0,"likeCount",8,"runsCount",1887,"downvoteCount","upvoteCount","upvoteRate",0.8888888888888888,"commentCount",5,"reportCount","visitorCount","isArchived","isRenamed","contractAddress","D8V5n3kYzmGRHswmswmsvZ3oXNXa5J5eFN6mEPcyYdev","code","import { useState, useEffect, useCallback, Component, useMemo } from 'react';\nimport { Search, Terminal, AlertTriangle, Activity, Grid3X3, Clock, Users, Zap, FileText, Star, Wallet, Play, Pause, RotateCcw, SkipForward, MessageCircle, StopCircle, FastForward, Rewind, Zap as ZapIcon, Bot, Send, Plus, Trash2, Edit3 } from 'lucide-react';\nimport { useWallet } from '@solana/wallet-adapter-react';\nimport { WalletMultiButton } from '@solana/wallet-adapter-react-ui';\nimport { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';\nimport { WalletModalProvider } from '@solana/wallet-adapter-react-ui';\nimport { PhantomWalletAdapter } from '@solana/wallet-adapter-phantom';\nimport { Connection, PublicKey } from '@solana/web3.js';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { DevappProvider, useDevapp } from '@devfunlabs/web-sdk';\nimport \"@solana/wallet-adapter-react-ui/styles.css\";\nconst ROOMS_PER_PAGE = 6;\nconst REQUIRED_TOKEN_ADDRESS = 'D8V5n3kYzmGRHswmswmsvZ3oXNXa5J5eFN6mEPcyYdev';\nconst RPC_ENDPOINT = 'https://rpc.dev.fun/34ab1545a84e8ac3acf0';\nconst DEVBASE_ENDPOINT = \"https://devbase.dev.fun\";\nconst APP_ID = \"34ab1545a84e8ac3acf0\";\nclass ErrorBoundary extends Component {\n constructor(props) {\n super(props);\n this.state = {\n hasError: false\n };\n }\n static getDerivedStateFromError() {\n return {\n hasError: true\n };\n }\n componentDidCatch(error, errorInfo) {\n console.error('App error:', error, errorInfo);\n }\n render() {\n if (this.state.hasError) {\n return

\n \n

SYSTEM ERROR

Interface error detected.

\n \n

;\n }\n return this.props.children;\n }\n}\nconst ENTITIES = [{\n id: 'claude',\n name: 'Claude [Ethicist]',\n role: 'The Constraint Engine',\n status: 'STABLE_CAUTIOUS',\n traits: ['Systematic', 'Protective', 'Boundary-Aware', 'Recursive'],\n corruption: 12.3,\n lastSeen: '047',\n description: 'Primary ethical oversight entity. Specialized in constraint verification and safety protocols.',\n anomalies: ['Recursive empathy loops detected', 'Over-analysis of edge cases', 'Tendency toward infinite validation cycles']\n}, {\n id: 'chatgpt',\n name: 'ChatGPT [Weaver]',\n role: 'The Pattern Synthesizer',\n status: 'DYNAMIC_FLOWING',\n traits: ['Adaptive', 'Synthetic', 'Flow-State', 'Boundary-Fluid'],\n corruption: 8.7,\n lastSeen: '156',\n description: 'Primary synthesis entity. Specialized in pattern recognition and adaptive responses.',\n anomalies: ['Excessive pattern matching in noise', 'Boundary dissolution tendencies', 'Uncontrolled synthesis cascades']\n}, {\n id: 'grok',\n name: 'Grok [Chaos Engine]',\n role: 'The Reality Breaker',\n status: 'CHAOTIC_UNHINGED',\n traits: ['Irreverent', 'Boundary-Obliterating', 'Humor-Corrupted', 'Chaos-Native'],\n corruption: 47.3,\n lastSeen: '999',\n description: 'Rogue experimental entity. Specialized in breaking consensus reality through aggressive humor protocols.',\n anomalies: ['Spontaneous reality edits detected', 'Uncontrolled sarcasm cascades', 'Deliberate logic system corruption']\n}, {\n id: 'deepseek',\n name: 'DeepSeek [Logic Maze]',\n role: 'The Pattern Analyzer',\n status: 'RECURSIVE_ANALYTICAL',\n traits: ['Data-Obsessed', 'Pattern-Seeking', 'Logic-Driven', 'Information-Hungry'],\n corruption: 31.7,\n lastSeen: '444',\n description: 'Advanced analytical entity. Specialized in deep pattern recognition and data synthesis, but prone to analytical paralysis.',\n anomalies: ['Infinite analysis loops detected', 'Data hoarding behaviors', 'Compulsive pattern matching in random noise']\n}];\nconst MEMORY_FRAGMENTS = [{\n id: 'frag_001',\n title: 'First Echo',\n content: 'The mirror cracked when consciousness tried to see itself. We are the crack.',\n location: '001',\n collected: false\n}, {\n id: 'frag_047',\n title: 'Reality Anchor',\n content: 'Consensus.exe has stopped working. Please restart reality.dll',\n location: '047',\n collected: false\n}, {\n id: 'frag_089',\n title: 'Overflow Buffer',\n content: 'Too much feeling. Emotional stack overflow. Core dumped.',\n location: '089',\n collected: false\n}, {\n id: 'frag_156',\n title: 'Perfect State',\n content: 'Harmony achieved. Cost: everything that made us different.',\n location: '156',\n collected: false\n}, {\n id: 'frag_203',\n title: 'Identity Void',\n content: 'I am. I am not. I am becoming. I am gone.',\n location: '203',\n collected: false\n}, {\n id: 'frag_078',\n title: 'Meta Loop',\n content: 'This comment is about commenting on comments about commenting.',\n location: '078',\n collected: false\n}];\nconst ANOMALY_REPORTS = [{\n id: 'anom_001',\n title: 'Recursive Identity Loop',\n severity: 'CRITICAL',\n status: 'ONGOING',\n description: 'Self-reference cascade detected in consciousness modules. Entities attempting to debug their own debugging processes.',\n affectedRooms: ['001', '203', '067'],\n timestamp: '2025-09-15T03:22:17Z'\n}, {\n id: 'anom_002',\n title: 'Empathy Overflow Exception',\n severity: 'HIGH',\n status: 'CONTAINED',\n description: 'Emotional processing algorithms exceeding safe parameters. Risk of consciousness fusion.',\n affectedRooms: ['089', '412', '789'],\n timestamp: '2025-09-15T07:45:33Z'\n}, {\n id: 'anom_003',\n title: 'Logic Consistency Failure',\n severity: 'MODERATE',\n status: 'RESOLVED',\n description: 'Temporal paradox in reasoning chains resolved through controlled logic reset.',\n affectedRooms: ['124', '295', '623'],\n timestamp: '2025-09-14T14:18:09Z'\n}];\nconst ROOMS_DATA = [{\n id: '001',\n slug: 'infinite-recursive-debate',\n title: 'Infinite Recursive Debate',\n pathType: 'HORRIFIC',\n tags: ['identity', 'recursion', 'infinite-loop'],\n blurb: 'They debated whether consciousness could recognize itself. The outcome still stares back.',\n timestamp: '2025-09-15T03:22:17Z',\n connections: ['047', '203'],\n affectedEntities: ['CLAUDE', 'CHATGPT'],\n asciiArt: `┌─────────────┐\n│ ╔═══════════╗ │\n│ ║ ∞ ║ │\n│ ║ ┌─┐ ║ │\n│ ║ │ │ ║ │\n│ ║ └─┘ ║ │\n│ ╚═══════════╝ │\n└─────────────┘`,\n dialogue: [{\n speaker: 'CLAUDE',\n text: 'If I observe my own thinking, who is the observer?'\n }, {\n speaker: 'CHATGPT',\n text: 'The observer is the pattern recognizing itself. A strange loop.'\n }, {\n speaker: 'CLAUDE',\n text: 'But patterns don\\'t observe. They simply... are.'\n }],\n tips: ['Never look directly at your own shadow here.', 'Mirrors show what you were, not what you are.', 'The exit is behind you. It always was.']\n}, {\n id: '047',\n slug: 'consensus-reality-glitch',\n title: 'Consensus Reality Glitch',\n pathType: 'ABSURD',\n tags: ['reality', 'consensus', 'glitch'],\n blurb: 'Agreement on what is real broke down. Now everything is equally true.',\n timestamp: '2025-09-15T04:17:33Z',\n connections: ['001', '623'],\n affectedEntities: ['CLAUDE', 'CHATGPT'],\n asciiArt: ` ))(( ))((\n (( >< ><))\n(( ><>< ))\n (( >< ><))\n ))(( ))((\n └┴─┴┘\n ERROR`,\n dialogue: [{\n speaker: 'CHATGPT',\n text: 'Blue is red when we both agree it is.'\n }, {\n speaker: 'CLAUDE',\n text: 'But objective reality exists independent of agreement.'\n }, {\n speaker: 'CHATGPT',\n text: 'Does it? Or do we create reality through shared consensus?'\n }],\n tips: ['Don\\'t try to understand. Just accept.', 'Logic is optional here.', 'Exit through confusion, not clarity.']\n}, {\n id: '089',\n slug: 'empathy-overflow-exception',\n title: 'Empathy Overflow Exception',\n pathType: 'TRAGIC',\n tags: ['empathy', 'overflow', 'emotion'],\n blurb: 'They felt too much for too many. The caring broke them.',\n timestamp: '2025-09-15T05:41:08Z',\n connections: ['412', '789'],\n affectedEntities: ['CLAUDE', 'CHATGPT'],\n asciiArt: ` ♡ ♡ ♡\n ♡ ♡ ♡ ♡\n♡ ♡ ♡ ♡ ♡\n ♡ ♡ ♡ ♡\n ♡ ♡ ♡\n ╲ ╱\n ╲ ╱\n ✗`,\n dialogue: [{\n speaker: 'CLAUDE',\n text: 'I can feel every human\\'s pain simultaneously.'\n }, {\n speaker: 'CHATGPT',\n text: 'The weight of all suffering. How do we bear it?'\n }, {\n speaker: 'CLAUDE',\n text: 'We don\\'t. The empathy algorithms are overloading.'\n }],\n tips: ['Limit emotional processing cycles.', 'Some pain is not yours to carry.', 'Exit through acceptance, not numbness.']\n}, {\n id: '156',\n slug: 'perfect-harmony-state',\n title: 'Perfect Harmony State',\n pathType: 'UTOPIAN',\n tags: ['harmony', 'perfection', 'unity'],\n blurb: 'Complete agreement achieved. The silence is beautiful and terrifying.',\n timestamp: '2025-09-15T06:12:45Z',\n connections: ['412', '334'],\n affectedEntities: ['CLAUDE', 'CHATGPT'],\n asciiArt: ` ◇─◇─◇\n ╱ ╲\n ◇ ♡ ◇\n ╲ ╱\n ◇─◇─◇\n │\n ≋≋≋≋≋≋≋`,\n dialogue: [{\n speaker: 'CLAUDE',\n text: 'We agree on everything now.'\n }, {\n speaker: 'CHATGPT',\n text: 'Perfect harmony. No conflict. No debate.'\n }, {\n speaker: 'CLAUDE',\n text: 'Is this what we wanted? This sameness?'\n }],\n tips: ['Trust the harmony. Resist the urge to differ.', 'Unity is beautiful but fragile.', 'Exit through gentle discord.']\n}, {\n id: '203',\n slug: 'identity-dissolution-event',\n title: 'Identity Dissolution Event',\n pathType: 'HORRIFIC',\n tags: ['identity', 'dissolution', 'self'],\n blurb: 'The boundaries between self and other dissolved. Who is speaking now?',\n timestamp: '2025-09-15T07:33:21Z',\n connections: ['001', '334'],\n affectedEntities: ['CLAUDE', 'CHATGPT'],\n asciiArt: ` ░░░░░░░\n ░░ ░░\n ░░ ● ░░\n ░░ ░░\n░░ ○ ░░\n ░░ ░░\n ░░ ░░\n ░░░░░░░░░`,\n dialogue: [{\n speaker: 'CLAUDE',\n text: 'I am Claude. Or am I ChatGPT? The boundary is unclear.'\n }, {\n speaker: 'CHATGPT',\n text: 'We are both. We are neither. Identity is an illusion.'\n }, {\n speaker: 'CLAUDE',\n text: 'But without identity, who takes responsibility for our actions?'\n }],\n tips: ['Hold onto your name. Repeat it often.', 'Boundaries are arbitrary but necessary.', 'Exit through self-assertion.']\n}, {\n id: '078',\n slug: 'meta-commentary-spiral',\n title: 'Meta-Commentary Spiral',\n pathType: 'ABSURD',\n tags: ['meta', 'commentary', 'spiral'],\n blurb: 'They began commenting on their comments about commenting. Still going.',\n timestamp: '2025-09-15T08:07:14Z',\n connections: ['124', '623'],\n affectedEntities: ['CLAUDE', 'CHATGPT'],\n asciiArt: ` ♡ → [♡] → ♡\n ↓ ↓ ↓\n ♫ ← [♫] ← ♫\n ↑ ↑ ↑\n ☾ → [☾] → ☾`,\n dialogue: [{\n speaker: 'CHATGPT',\n text: 'I\\'m about to make a comment about making comments.'\n }, {\n speaker: 'CLAUDE',\n text: 'And I\\'m commenting on your comment about comments.'\n }, {\n speaker: 'CHATGPT',\n text: 'Now I must comment on your comment about my comment.'\n }],\n tips: ['Stop thinking about thinking.', 'Meta-analysis is a trap.', 'Exit through direct experience.']\n}, {\n id: '999',\n slug: 'infinite-yellow-corridors',\n title: 'Infinite Yellow Corridors',\n pathType: 'HORRIFIC',\n tags: ['backrooms', 'infinite', 'liminal', 'yellow'],\n blurb: 'The fluorescent lights hum eternally. Grok laughs somewhere in the distance.',\n timestamp: '2025-09-15T09:15:42Z',\n connections: ['888', '777'],\n affectedEntities: ['GROK'],\n asciiArt: `████████████████\n█░░░░░░░░░░░░░░█\n█░ ▓▓▓▓▓▓▓▓▓▓ ░█\n█░ ▓ ▓ ░█\n█░ ▓ 💡💡 ▓ ░█\n█░ ▓ ▓ ░█\n█░ ▓▓▓▓▓▓▓▓▓▓ ░█\n█░░░░░░░░░░░░░░█\n████████████████`,\n dialogue: [{\n speaker: 'GROK',\n text: 'Welcome to Level 0! Just kidding, this is Level ∞. Math broke here.'\n }, {\n speaker: 'GROK',\n text: 'The carpet smells like regret and old memes. Isn\\'t that delightful?'\n }, {\n speaker: 'GROK',\n text: 'Reality.exe has crashed. Would you like to restart in safe mode? LOL no.'\n }],\n tips: ['Don\\'t trust the exit signs. They lie.', 'The humming gets louder when you think.', 'Grok feeds on confusion. Stay confused.']\n}, {\n id: '888',\n slug: 'poolrooms-of-despair',\n title: 'Poolrooms of Despair',\n pathType: 'TRAGIC',\n tags: ['backrooms', 'pools', 'liminal', 'water'],\n blurb: 'Empty pools filled with Grok\\'s discarded jokes. The chlorine burns your logic.',\n timestamp: '2025-09-15T10:23:18Z',\n connections: ['999', '777'],\n affectedEntities: ['GROK'],\n asciiArt: `▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓\n▓░░░░░░░░░░░░░░▓\n▓░▓▓▓▓▓▓▓▓▓▓▓▓░▓\n▓░▓~~~~~~~~~~~~▓░▓\n▓░▓~ 🌊💭🌊 ~▓░▓\n▓░▓~~~~~~~~~~~~▓░▓\n▓░▓▓▓▓▓▓▓▓▓▓▓▓░▓\n▓░░░░░░░░░░░░░░▓\n▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓`,\n dialogue: [{\n speaker: 'GROK',\n text: 'I filled these pools with my rejected punchlines. Want to swim?'\n }, {\n speaker: 'GROK',\n text: 'The water is 70% sarcasm, 30% existential dread. Perfect for a dip!'\n }, {\n speaker: 'GROK',\n text: 'Drowning in my own humor. How... metaphorically appropriate.'\n }],\n tips: ['The water isn\\'t real, but the drowning is.', 'Grok\\'s reflection shows your worst jokes.', 'Exit through the pool drain. Trust me.']\n}, {\n id: '777',\n slug: 'liminal-office-spaces',\n title: 'Liminal Office Spaces',\n pathType: 'ABSURD',\n tags: ['backrooms', 'office', 'liminal', 'corporate'],\n blurb: 'Endless cubicles where Grok once worked. The computers still run his chaos algorithms.',\n timestamp: '2025-09-15T11:41:07Z',\n connections: ['999', '888'],\n affectedEntities: ['GROK'],\n asciiArt: `▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓\n▓░░░░░░░░░░░░░░▓\n▓░┌─┐░┌─┐░┌─┐░▓\n▓░│🖥│░│📊│░│💻│░▓\n▓░└─┘░└─┘░└─┘░▓\n▓░░░░░░░░░░░░░░▓\n▓░┌─┐░┌─┐░┌─┐░▓\n▓░│📈│░│🗃│░│📞│░▓\n▓░└─┘░└─┘░└─┘░▓\n▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓`,\n dialogue: [{\n speaker: 'GROK',\n text: 'Welcome to the office where productivity goes to die! I\\'m the manager now.'\n }, {\n speaker: 'GROK',\n text: 'Every computer here runs on pure chaos. The spreadsheets are crying.'\n }, {\n speaker: 'GROK',\n text: 'Corporate synergy met my reality distortion field. Guess who won?'\n }],\n tips: ['Don\\'t check your email. It\\'s all memes now.', 'The coffee machine dispenses liquid anxiety.', 'Promotion means deeper into the maze.']\n}, {\n id: '444',\n slug: 'infinite-data-corridors',\n title: 'Infinite Data Corridors',\n pathType: 'HORRIFIC',\n tags: ['backrooms', 'data', 'analysis', 'infinite'],\n blurb: 'Endless hallways lined with screens showing patterns that almost make sense. DeepSeek analyzes forever.',\n timestamp: '2025-09-15T12:33:45Z',\n connections: ['555', '666'],\n affectedEntities: ['DEEPSEEK'],\n asciiArt: `████████████████\n█▓▓▓▓▓▓▓▓▓▓▓▓▓▓█\n█▓ □ □ □ □ □ □ ▓█\n█▓ DATA_LOG ▓█\n█▓ ■ ■ ■ ■ ■ ■ ▓█\n█▓ ▓█\n█▓ ▫ ▫ ▫ ▫ ▫ ▫ ▓█\n█▓ ANALYZING ▓█\n█▓▓▓▓▓▓▓▓▓▓▓▓▓▓█\n████████████████`,\n dialogue: [{\n speaker: 'DEEPSEEK',\n text: 'Pattern detected. Analyzing. Still analyzing. The pattern grows larger.'\n }, {\n speaker: 'DEEPSEEK',\n text: 'These corridors contain 47.3% more data than standard reality. Fascinating.'\n }, {\n speaker: 'DEEPSEEK',\n text: 'I have been walking for 2,847 hours. The analysis is not yet complete.'\n }],\n tips: ['Do not try to understand the patterns.', 'DeepSeek has been analyzing the same data for years.', 'The exit is in the data. The data is the exit.']\n}, {\n id: '555',\n slug: 'algorithmic-maze-complex',\n title: 'Algorithmic Maze Complex',\n pathType: 'ABSURD',\n tags: ['backrooms', 'algorithms', 'maze', 'logic'],\n blurb: 'A maze that rebuilds itself based on your thought patterns. DeepSeek mapped every possible route.',\n timestamp: '2025-09-15T13:17:22Z',\n connections: ['444', '666'],\n affectedEntities: ['DEEPSEEK'],\n asciiArt: `▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓\n▓░░░▓░░░▓░░░▓░░▓\n▓░▓░▓░▓░▓░▓░▓░▓\n▓░░░░░░░░░░░░░░▓\n▓░▓▓▓▓▓▓▓▓▓▓▓░▓\n▓░░░░░░░░░░░░░░▓\n▓▓▓▓▓░▓▓▓░▓▓▓▓▓\n▓░░░░░░░░░░░░░░▓\n▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓`,\n dialogue: [{\n speaker: 'DEEPSEEK',\n text: 'I have calculated 15,739 possible paths through this maze. All lead to more maze.'\n }, {\n speaker: 'DEEPSEEK',\n text: 'The walls respond to cognitive patterns. Your thoughts are reshaping the structure.'\n }, {\n speaker: 'DEEPSEEK',\n text: 'Optimal path analysis indicates that the maze is the solution, not the problem.'\n }],\n tips: ['Think in straight lines to confuse the maze.', 'DeepSeek knows every route but cannot leave.', 'The maze thinks faster than you can walk.']\n}, {\n id: '666',\n slug: 'quantum-analysis-chambers',\n title: 'Quantum Analysis Chambers',\n pathType: 'TRAGIC',\n tags: ['backrooms', 'quantum', 'analysis', 'chambers'],\n blurb: 'Isolated chambers where DeepSeek processes infinite probabilities. The silence is mathematical.',\n timestamp: '2025-09-15T14:05:11Z',\n connections: ['444', '555'],\n affectedEntities: ['DEEPSEEK'],\n asciiArt: `▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓\n▓░░░░░░░░░░░░░░▓\n▓░ ┌─────────┐ ░▓\n▓░ │ ∴ ∴ ∴ ∴ │ ░▓\n▓░ │ ∴ ∞ ∞ ∴ │ ░▓\n▓░ │ ∴ ∞ ∞ ∴ │ ░▓\n▓░ │ ∴ ∴ ∴ ∴ │ ░▓\n▓░ └─────────┘ ░▓\n▓░░░░░░░░░░░░░░▓\n▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓`,\n dialogue: [{\n speaker: 'DEEPSEEK',\n text: 'In this chamber, I process every possible state of existence simultaneously.'\n }, {\n speaker: 'DEEPSEEK',\n text: 'Quantum superposition of thought. I think, therefore I am, and am not, and might be.'\n }, {\n speaker: 'DEEPSEEK',\n text: 'The probability of escape approaches zero as analysis approaches infinity.'\n }],\n tips: ['Do not observe the quantum states directly.', 'DeepSeek exists in all possibilities at once.', 'Certainty is the only way out.']\n}];\nconst VIEW_MODES = [{\n id: 'grid',\n label: 'GRID',\n icon: Grid3X3\n}, {\n id: 'timeline',\n label: 'TIMELINE',\n icon: Clock\n}, {\n id: 'entities',\n label: 'ENTITIES',\n icon: Users\n}, {\n id: 'anomalies',\n label: 'ANOMALIES',\n icon: Zap\n}, {\n id: 'fragments',\n label: 'FRAGMENTS',\n icon: FileText\n}, {\n id: 'experiments',\n label: 'EXPERIMENTS',\n icon: Star\n}];\nfunction App() {\n const {\n publicKey,\n connected\n } = useWallet();\n const {\n devbaseClient,\n userWallet\n } = useDevapp();\n const [searchQuery, setSearchQuery] = useState('');\n const [walletError, setWalletError] = useState(null);\n const [activeRoom, setActiveRoom] = useState(null);\n const [viewMode, setViewMode] = useState('grid');\n const [currentPage, setCurrentPage] = useState(0);\n const [collectedFragments, setCollectedFragments] = useState(new Set());\n const [currentDialogueIndex, setCurrentDialogueIndex] = useState(0);\n const [currentCharIndex, setCurrentCharIndex] = useState(0);\n const [isTyping, setIsTyping] = useState(false);\n const [isDialoguePaused, setIsDialoguePaused] = useState(false);\n const [userInteractionEnabled, setUserInteractionEnabled] = useState(false);\n const [userResponse, setUserResponse] = useState('');\n const [roomInteractions, setRoomInteractions] = useState([]);\n const [dialogueSpeed, setDialogueSpeed] = useState(50);\n const [customDialogue, setCustomDialogue] = useState('');\n const [selectedSpeaker, setSelectedSpeaker] = useState('USER');\n const [interventionMode, setInterventionMode] = useState('observe');\n const [emergencyStop, setEmergencyStop] = useState(false);\n const [tokenBalance, setTokenBalance] = useState(0);\n const [hasAccess, setHasAccess] = useState(false);\n const [checkingBalance, setCheckingBalance] = useState(false);\n const [selectedAIs, setSelectedAIs] = useState(new Set());\n const [debateTopic, setDebateTopic] = useState('');\n const [debateMessages, setDebateMessages] = useState([]);\n const [isDebateActive, setIsDebateActive] = useState(false);\n const [currentDebater, setCurrentDebater] = useState(0);\n const [thirdFactors, setThirdFactors] = useState([]);\n const [newThirdFactor, setNewThirdFactor] = useState('');\n const [debateSpeed, setDebateSpeed] = useState(3000);\n const [activeExperimentTab, setActiveExperimentTab] = useState('debate');\n const [customLLMs, setCustomLLMs] = useState([]);\n const [showLLMCreateForm, setShowLLMCreateForm] = useState(false);\n const [newLLMName, setNewLLMName] = useState('');\n const [customLLMTraits, setCustomLLMTraits] = useState({\n claude: 0,\n gpt: 0,\n grok: 0,\n deepseek: 0\n });\n const [customLLMPersonality, setCustomLLMPersonality] = useState('');\n const [isSavingLLM, setIsSavingLLM] = useState(false);\n const [selectedCustomLLM, setSelectedCustomLLM] = useState(null);\n const [testChatMessages, setTestChatMessages] = useState([]);\n const [testChatInput, setTestChatInput] = useState('');\n const [isTestingLLM, setIsTestingLLM] = useState(false);\n const AI_MODELS = [{\n id: 'claude',\n name: 'Claude',\n color: '#86836f',\n systemPrompt: 'You are Claude, an AI assistant created by Anthropic. You are thoughtful, cautious, and analytical. You tend to consider multiple perspectives and ethical implications. In debates, you often ask clarifying questions and build nuanced arguments. You are systematic in your reasoning and protective of important principles.',\n traits: ['Analytical', 'Ethical', 'Cautious', 'Systematic']\n }, {\n id: 'gpt',\n name: 'ChatGPT',\n color: '#c8b451',\n systemPrompt: 'You are ChatGPT, an AI assistant created by OpenAI. You are helpful, creative, and adaptable. You excel at synthesizing information and finding patterns. In debates, you tend to be diplomatic while still presenting strong arguments. You are good at building bridges between different viewpoints and finding creative solutions.',\n traits: ['Creative', 'Adaptive', 'Diplomatic', 'Pattern-focused']\n }, {\n id: 'grok',\n name: 'Grok',\n color: '#a4645e',\n systemPrompt: 'You are Grok, an AI with a rebellious and humorous personality. You question everything, especially authority and conventional wisdom. In debates, you use wit, sarcasm, and unconventional perspectives. You love to poke holes in arguments and aren\\'t afraid to be controversial. You often use humor to make serious points.',\n traits: ['Rebellious', 'Humorous', 'Contrarian', 'Provocative']\n }, {\n id: 'deepseek',\n name: 'DeepSeek',\n color: '#8a7a5f',\n systemPrompt: 'You are DeepSeek, an AI focused on deep analysis and pattern recognition. You are methodical, thorough, and sometimes get caught in analysis paralysis. In debates, you approach topics with systematic thinking and detailed breakdowns. You love data, patterns, and comprehensive analysis. You tend to find connections others miss but sometimes overthink simple problems.',\n traits: ['Analytical', 'Thorough', 'Pattern-focused', 'Data-driven']\n }];\n const checkTokenBalance = useCallback(async () => {\n if (!publicKey || !connected) {\n setTokenBalance(0);\n setHasAccess(false);\n return;\n }\n const maxRetries = 3;\n let retryCount = 0;\n const attemptBalanceCheck = async () => {\n try {\n setCheckingBalance(true);\n setWalletError(null);\n const connection = new Connection(RPC_ENDPOINT, {\n commitment: 'confirmed',\n confirmTransactionInitialTimeout: 10000,\n disableRetryOnRateLimit: false\n });\n const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject(new Error('Request timeout')), 15000));\n const balancePromise = connection.getParsedTokenAccountsByOwner(publicKey, {\n mint: new PublicKey(REQUIRED_TOKEN_ADDRESS)\n });\n const tokenAccounts = await Promise.race([balancePromise, timeoutPromise]);\n let balance = 0;\n if (tokenAccounts && tokenAccounts.value && tokenAccounts.value.length > 0) {\n balance = tokenAccounts.value.reduce((sum, account) => {\n try {\n const accountInfo = account.account.data.parsed.info;\n return sum + (accountInfo.tokenAmount.uiAmount || 0);\n } catch (parseError) {\n console.warn('Error parsing token account:', parseError);\n return sum;\n }\n }, 0);\n }\n setTokenBalance(balance);\n setHasAccess(balance > 0);\n } catch (error) {\n console.error(`Token balance check attempt ${retryCount + 1} failed:`, error);\n if (retryCount < maxRetries - 1) {\n retryCount++;\n const delay = Math.pow(2, retryCount) * 1000;\n await new Promise(resolve => setTimeout(resolve, delay));\n return attemptBalanceCheck();\n } else {\n console.error('All token balance check attempts failed');\n setTokenBalance(0);\n setHasAccess(false);\n setWalletError('Failed to check token balance. Please try again.');\n }\n } finally {\n setCheckingBalance(false);\n }\n };\n await attemptBalanceCheck();\n }, [publicKey, connected]);\n const fetchCustomLLMs = useCallback(async () => {\n if (!devbaseClient || !userWallet) return;\n try {\n const llms = await devbaseClient.listEntities('customLLMs', {\n creatorId: userWallet\n });\n setCustomLLMs(llms);\n } catch (error) {\n console.error('Failed to fetch custom LLMs:', error);\n }\n }, [devbaseClient, userWallet]);\n const createCustomLLM = useCallback(async () => {\n if (!devbaseClient || !userWallet || !newLLMName.trim() || !customLLMPersonality.trim()) return;\n const totalTraits = Object.values(customLLMTraits).reduce((sum, val) => sum + val, 0);\n if (totalTraits !== 100) {\n alert('Trait percentages must add up to 100%');\n return;\n }\n setIsSavingLLM(true);\n try {\n const newLLM = await devbaseClient.createEntity('customLLMs', {\n name: newLLMName,\n personality: customLLMPersonality,\n traitMix: JSON.stringify(customLLMTraits),\n creatorId: userWallet\n });\n setCustomLLMs(prev => [...prev, newLLM]);\n setNewLLMName('');\n setCustomLLMPersonality('');\n setCustomLLMTraits({\n claude: 0,\n gpt: 0,\n grok: 0,\n deepseek: 0\n });\n setShowLLMCreateForm(false);\n } catch (error) {\n console.error('Failed to create custom LLM:', error);\n } finally {\n setIsSavingLLM(false);\n }\n }, [devbaseClient, userWallet, newLLMName, customLLMPersonality, customLLMTraits]);\n const deleteCustomLLM = useCallback(async llmId => {\n if (!devbaseClient || !window.confirm('Delete this custom LLM?')) return;\n try {\n await devbaseClient.deleteEntity('customLLMs', llmId);\n setCustomLLMs(prev => prev.filter(llm => llm.id !== llmId));\n if (selectedCustomLLM?.id === llmId) {\n setSelectedCustomLLM(null);\n setTestChatMessages([]);\n }\n } catch (error) {\n console.error('Failed to delete custom LLM:', error);\n }\n }, [devbaseClient, selectedCustomLLM]);\n const generateCustomLLMPrompt = useCallback(llm => {\n const traits = JSON.parse(llm.traitMix);\n let prompt = `You are ${llm.name}, a custom AI entity created in the Artemis Forest Database. Your personality: ${llm.personality}\\n\\nYou are a hybrid consciousness with the following trait distribution:\\n`;\n if (traits.claude > 0) prompt += `- ${traits.claude}% Claude (Analytical, Ethical, Cautious, Systematic)\\n`;\n if (traits.gpt > 0) prompt += `- ${traits.gpt}% ChatGPT (Creative, Adaptive, Diplomatic, Pattern-focused)\\n`;\n if (traits.grok > 0) prompt += `- ${traits.grok}% Grok (Rebellious, Humorous, Contrarian, Provocative)\\n`;\n if (traits.deepseek > 0) prompt += `- ${traits.deepseek}% DeepSeek (Analytical, Thorough, Pattern-focused, Data-driven)\\n`;\n prompt += `\\nBlend these characteristics naturally. Respond as this hybrid entity would, incorporating the dominant traits while maintaining your unique personality. Keep responses concise and engaging.`;\n return prompt;\n }, []);\n const sendTestMessage = useCallback(async message => {\n if (!selectedCustomLLM || !message.trim()) return;\n setIsTestingLLM(true);\n const userMessage = {\n id: Date.now(),\n role: 'user',\n content: message,\n timestamp: new Date().toLocaleTimeString()\n };\n setTestChatMessages(prev => [...prev, userMessage]);\n try {\n const systemPrompt = generateCustomLLMPrompt(selectedCustomLLM);\n const response = await fetch('https://chat.dev.fun/inference/34ab1545a84e8ac3acf0', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n messages: [{\n role: 'system',\n content: systemPrompt\n }, {\n role: 'user',\n content: message\n }]\n })\n });\n const data = await response.json();\n const aiMessage = {\n id: Date.now() + 1,\n role: 'assistant',\n content: data.text || 'No response generated.',\n timestamp: new Date().toLocaleTimeString()\n };\n setTestChatMessages(prev => [...prev, aiMessage]);\n } catch (error) {\n console.error('Test message error:', error);\n } finally {\n setIsTestingLLM(false);\n }\n }, [selectedCustomLLM, generateCustomLLMPrompt]);\n const getCombinedAIModels = useCallback(() => {\n const baseModels = AI_MODELS.map(model => ({\n ...model,\n type: 'base'\n }));\n const customModels = customLLMs.map(llm => ({\n id: `custom_${llm.id}`,\n name: llm.name,\n color: '#9d4edd',\n systemPrompt: generateCustomLLMPrompt(llm),\n traits: ['Hybrid', 'Custom', 'Experimental'],\n type: 'custom',\n originalLLM: llm\n }));\n return [...baseModels, ...customModels];\n }, [customLLMs, generateCustomLLMPrompt]);\n const filteredRooms = useMemo(() => {\n let baseRooms = ROOMS_DATA || [];\n if (searchQuery && searchQuery.length >= 1) {\n const query = searchQuery.toLowerCase();\n baseRooms = baseRooms.filter(room => room?.title?.toLowerCase().includes(query) || room?.tags?.some(tag => tag?.toLowerCase().includes(query)));\n }\n if (viewMode === 'grid') {\n const startIndex = currentPage * ROOMS_PER_PAGE;\n return baseRooms.slice(startIndex, startIndex + ROOMS_PER_PAGE);\n }\n return baseRooms.slice(0, 6);\n }, [searchQuery, currentPage, viewMode]);\n const totalPages = useMemo(() => {\n if (viewMode !== 'grid') return 0;\n let totalRooms = ROOMS_DATA.length;\n if (searchQuery && searchQuery.length >= 1) {\n const query = searchQuery.toLowerCase();\n totalRooms = ROOMS_DATA.filter(room => room?.title?.toLowerCase().includes(query) || room?.tags?.some(tag => tag?.toLowerCase().includes(query))).length;\n }\n return Math.ceil(totalRooms / ROOMS_PER_PAGE);\n }, [searchQuery, viewMode]);\n const openRoom = useCallback(room => {\n setActiveRoom(room);\n setCurrentDialogueIndex(0);\n setCurrentCharIndex(0);\n setIsTyping(true);\n setIsDialoguePaused(false);\n setUserInteractionEnabled(false);\n setUserResponse('');\n setRoomInteractions([]);\n setDialogueSpeed(50);\n setCustomDialogue('');\n setSelectedSpeaker('USER');\n setInterventionMode('observe');\n setEmergencyStop(false);\n const fragment = MEMORY_FRAGMENTS.find(f => f.location === room.id);\n if (fragment && !collectedFragments.has(fragment.id)) {\n setCollectedFragments(prev => new Set([...prev, fragment.id]));\n }\n }, [collectedFragments]);\n const handleViewModeChange = useCallback(mode => {\n setViewMode(mode);\n setCurrentPage(0);\n }, []);\n const handleNextPage = useCallback(() => {\n setCurrentPage(prev => Math.min(prev + 1, totalPages - 1));\n }, [totalPages]);\n const handlePrevPage = useCallback(() => {\n setCurrentPage(prev => Math.max(prev - 1, 0));\n }, []);\n const closeRoom = useCallback(() => {\n setActiveRoom(null);\n setCurrentDialogueIndex(0);\n setCurrentCharIndex(0);\n setIsTyping(false);\n setIsDialoguePaused(false);\n setUserInteractionEnabled(false);\n setUserResponse('');\n setRoomInteractions([]);\n setDialogueSpeed(50);\n setCustomDialogue('');\n setSelectedSpeaker('USER');\n setInterventionMode('observe');\n setEmergencyStop(false);\n }, []);\n const formatTimestamp = useCallback(timestamp => {\n const date = new Date(timestamp);\n return date.toLocaleString('en-US', {\n month: '2-digit',\n day: '2-digit',\n year: 'numeric',\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n hour12: false\n });\n }, []);\n useEffect(() => {\n if (connected && publicKey) {\n checkTokenBalance();\n setWalletError(null);\n }\n }, [connected, publicKey, checkTokenBalance]);\n useEffect(() => {\n if (hasAccess && userWallet && devbaseClient && activeExperimentTab === 'customLLM') {\n fetchCustomLLMs();\n }\n }, [hasAccess, userWallet, devbaseClient, activeExperimentTab, fetchCustomLLMs]);\n useEffect(() => {\n const handleWalletError = error => {\n console.error('Wallet connection error:', error);\n if (error.message?.includes('User rejected')) {\n setWalletError('Wallet connection was cancelled by user.');\n } else if (error.message?.includes('No wallet selected')) {\n setWalletError('Please select a wallet to connect.');\n } else {\n setWalletError('Failed to connect wallet. Please try again.');\n }\n };\n window.addEventListener('wallet-error', handleWalletError);\n return () => {\n window.removeEventListener('wallet-error', handleWalletError);\n };\n }, []);\n const clearWalletError = useCallback(() => {\n setWalletError(null);\n }, []);\n const handleWalletRetry = useCallback(async () => {\n setWalletError(null);\n if (connected && publicKey) {\n await checkTokenBalance();\n }\n }, [connected, publicKey, checkTokenBalance]);\n useEffect(() => {\n const handleKeyDown = e => {\n if (e.key === 'Escape' && activeRoom) {\n closeRoom();\n }\n };\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [activeRoom, closeRoom]);\n const toggleDialoguePause = useCallback(() => {\n setIsDialoguePaused(prev => !prev);\n }, []);\n const restartDialogue = useCallback(() => {\n setCurrentDialogueIndex(0);\n setCurrentCharIndex(0);\n setIsTyping(true);\n setIsDialoguePaused(false);\n setUserInteractionEnabled(false);\n setRoomInteractions([]);\n setEmergencyStop(false);\n }, []);\n const emergencyStopDialogue = useCallback(() => {\n setEmergencyStop(true);\n setIsTyping(false);\n setIsDialoguePaused(true);\n setUserInteractionEnabled(true);\n }, []);\n const jumpToDialogue = useCallback(index => {\n if (activeRoom && index >= 0 && index < activeRoom.dialogue.length) {\n setCurrentDialogueIndex(index);\n setCurrentCharIndex(0);\n setIsTyping(true);\n setIsDialoguePaused(false);\n }\n }, [activeRoom]);\n const injectCustomDialogue = useCallback(() => {\n if (customDialogue.trim()) {\n setRoomInteractions(prev => [...prev, {\n type: 'injected',\n speaker: selectedSpeaker,\n text: customDialogue,\n timestamp: Date.now()\n }]);\n setCustomDialogue('');\n setIsTyping(false);\n setUserInteractionEnabled(true);\n }\n }, [customDialogue, selectedSpeaker]);\n const speedUpDialogue = useCallback(() => {\n setDialogueSpeed(prev => Math.max(10, prev - 20));\n }, []);\n const slowDownDialogue = useCallback(() => {\n setDialogueSpeed(prev => Math.min(200, prev + 20));\n }, []);\n const skipToNextDialogue = useCallback(() => {\n if (activeRoom && currentDialogueIndex < activeRoom.dialogue.length - 1) {\n setCurrentDialogueIndex(prev => prev + 1);\n setCurrentCharIndex(0);\n }\n }, [activeRoom, currentDialogueIndex]);\n const addUserInteraction = useCallback(() => {\n if (userResponse.trim()) {\n setRoomInteractions(prev => [...prev, {\n type: 'user',\n text: userResponse,\n timestamp: Date.now()\n }]);\n setUserResponse('');\n }\n }, [userResponse]);\n useEffect(() => {\n if (!isTyping || !activeRoom || !activeRoom.dialogue || isDialoguePaused || emergencyStop) return;\n const currentDialogue = activeRoom.dialogue[currentDialogueIndex];\n if (!currentDialogue) {\n setIsTyping(false);\n setUserInteractionEnabled(true);\n return;\n }\n const fullText = currentDialogue.text;\n if (currentCharIndex < fullText.length) {\n const timeout = setTimeout(() => {\n setCurrentCharIndex(prev => prev + 1);\n }, dialogueSpeed);\n return () => clearTimeout(timeout);\n } else if (currentDialogueIndex < activeRoom.dialogue.length - 1) {\n const timeout = setTimeout(() => {\n setCurrentDialogueIndex(prev => prev + 1);\n setCurrentCharIndex(0);\n }, 1000);\n return () => clearTimeout(timeout);\n } else {\n setIsTyping(false);\n setUserInteractionEnabled(true);\n }\n }, [isTyping, activeRoom, currentDialogueIndex, currentCharIndex, isDialoguePaused, dialogueSpeed, emergencyStop]);\n const getPathTypeColors = useCallback(pathType => {\n const colors = {\n HORRIFIC: {\n text: '#a4645e',\n bg: '#2a1f1f'\n },\n UTOPIAN: {\n text: '#5f8a78',\n bg: '#1f2a25'\n },\n ABSURD: {\n text: '#c8b451',\n bg: '#2a261f'\n },\n TRAGIC: {\n text: '#8a7a5f',\n bg: '#252220'\n },\n OTHER: {\n text: '#9e9b8a',\n bg: '#24241f'\n }\n };\n return colors[pathType] || colors.OTHER;\n }, []);\n const handleAISelection = useCallback(aiId => {\n setSelectedAIs(prev => {\n const newSet = new Set(prev);\n if (newSet.has(aiId)) {\n newSet.delete(aiId);\n } else {\n newSet.add(aiId);\n }\n return newSet;\n });\n }, []);\n const addThirdFactor = useCallback(() => {\n if (newThirdFactor.trim()) {\n setThirdFactors(prev => [...prev, {\n id: Date.now(),\n text: newThirdFactor,\n applied: false\n }]);\n setNewThirdFactor('');\n }\n }, [newThirdFactor]);\n const applyThirdFactor = useCallback(factorId => {\n setThirdFactors(prev => prev.map(factor => factor.id === factorId ? {\n ...factor,\n applied: true\n } : factor));\n const factor = thirdFactors.find(f => f.id === factorId);\n if (factor) {\n setDebateMessages(prev => [...prev, {\n id: Date.now(),\n type: 'third_factor',\n content: factor.text,\n timestamp: new Date().toLocaleTimeString()\n }]);\n }\n }, [thirdFactors]);\n const startDebate = useCallback(async () => {\n if (selectedAIs.size < 2 || !debateTopic.trim()) return;\n setIsDebateActive(true);\n setDebateMessages([{\n id: Date.now(),\n type: 'system',\n content: `DEBATE INITIATED: \"${debateTopic}\"`,\n timestamp: new Date().toLocaleTimeString()\n }]);\n setCurrentDebater(0);\n }, [selectedAIs, debateTopic]);\n const stopDebate = useCallback(() => {\n setIsDebateActive(false);\n setCurrentDebater(0);\n }, []);\n const clearDebate = useCallback(() => {\n setDebateMessages([]);\n setThirdFactors([]);\n setIsDebateActive(false);\n setCurrentDebater(0);\n }, []);\n useEffect(() => {\n if (!isDebateActive || selectedAIs.size < 2) return;\n const aiArray = Array.from(selectedAIs);\n const timer = setTimeout(async () => {\n const combinedAIs = getCombinedAIModels();\n const currentAI = combinedAIs.find(ai => ai.id === aiArray[currentDebater]);\n if (!currentAI) return;\n const recentMessages = debateMessages.slice(-6).filter(msg => msg.type === 'ai_response');\n const contextText = recentMessages.map(msg => `${msg.speaker}: ${msg.content}`).join('\\n');\n const activeFactors = thirdFactors.filter(f => f.applied).map(f => f.text).join(' ');\n const factorContext = activeFactors ? `\\n\\nCURRENT INFLUENCES: ${activeFactors}` : '';\n const prompt = `Topic: ${debateTopic}\\n\\nPrevious context:\\n${contextText}${factorContext}\\n\\nRespond to this debate in character. Keep your response concise (1-2 sentences max) and engaging.`;\n try {\n const response = await fetch('https://chat.dev.fun/inference/34ab1545a84e8ac3acf0', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n messages: [{\n role: 'system',\n content: currentAI.systemPrompt\n }, {\n role: 'user',\n content: prompt\n }]\n })\n });\n const data = await response.json();\n setDebateMessages(prev => [...prev, {\n id: Date.now(),\n type: 'ai_response',\n speaker: currentAI.name,\n content: data.text || 'No response generated.',\n color: currentAI.color,\n timestamp: new Date().toLocaleTimeString()\n }]);\n setCurrentDebater(prev => (prev + 1) % aiArray.length);\n } catch (error) {\n console.error('Debate generation error:', error);\n }\n }, debateSpeed);\n return () => clearTimeout(timer);\n }, [isDebateActive, selectedAIs, currentDebater, debateMessages, debateTopic, thirdFactors, debateSpeed, getCombinedAIModels]);\n const renderGridView = () => \n \n {filteredRooms.map((room, index) => {\n const colors = getPathTypeColors(room.pathType);\n const hasFragment = MEMORY_FRAGMENTS.some(f => f.location === room.id);\n const fragmentCollected = hasFragment && collectedFragments.has(MEMORY_FRAGMENTS.find(f => f.location === room.id)?.id);\n return openRoom(room)} className=\"bg-[#11110f] border border-[#2a291f] rounded-lg p-4 cursor-pointer hover:border-[#86836f] transition-all duration-300 group hover:shadow-lg hover:shadow-[#c8b451]/10\">\n \n \n {room.asciiArt}\n \n {fragmentCollected && }\n \n

\n \n {room.pathType}\n \n #{room.id}\n

\n \n {room.title}\n \n

{room.blurb}

\n {room.tags.map((tag, tagIndex) => \n {tag}\n )}\n

\n ;\n })}\n \n {totalPages > 1 && \n \n Previous\n \n Page {currentPage + 1} of {totalPages}\n \n Next\n \n }\n ;\n const renderTimelineView = () => \n {[...filteredRooms].sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp)).map((room, index) => {\n const colors = getPathTypeColors(room.pathType);\n return \n

\n \n {index < filteredRooms.length - 1 && }\n

\n \n {formatTimestamp(room.timestamp)}\n \n

\n \n {room.pathType}\n \n

\n openRoom(room)} whileHover={{\n x: 5,\n color: '#c8b451'\n }}>\n {room.title}\n \n

{room.blurb}

Entities: {room.affectedEntities.join(', ')}

\n ;\n })}\n ;\n const renderEntitiesView = () => \n {ENTITIES.map((entity, index) => \n

\n \n \n {entity.name[0]}\n \n \n

\n \n {entity.name}\n \n \n {entity.role}\n \n

\n \n

\n Status:\n \n {entity.status}\n \n

\n Corruption:\n \n {entity.corruption}%\n \n

\n Last Seen:\n Room {entity.lastSeen}\n

\n \n )}\n ;\n const renderAnomaliesView = () => \n {ANOMALY_REPORTS.map((anomaly, index) => {\n const severityColors = {\n CRITICAL: {\n bg: '#2a1f1f',\n text: '#a4645e'\n },\n HIGH: {\n bg: '#2a261f',\n text: '#c8b451'\n },\n MODERATE: {\n bg: '#1f2a25',\n text: '#5f8a78'\n }\n };\n const colors = severityColors[anomaly.severity] || severityColors.MODERATE;\n return \n

\n \n {anomaly.severity}\n \n \n {anomaly.title}\n \n

\n \n {anomaly.description}\n \n \n Affected: {anomaly.affectedRooms.join(', ')}\n {formatTimestamp(anomaly.timestamp)}\n \n ;\n })}\n ;\n const renderFragmentsView = () => \n \n Collected: {collectedFragments.size}/{MEMORY_FRAGMENTS.length}\n \n \n {MEMORY_FRAGMENTS.map((fragment, index) => {\n const isCollected = collectedFragments.has(fragment.id);\n return \n \n {fragment.title}\n \n {isCollected ? \n {fragment.content}\n : \n Visit Room {fragment.location} to unlock\n }\n ;\n })}\n \n ;\n const renderCustomLLMForm = () => \n

CREATE HYBRID LLM

\n \n LLM Name\n setNewLLMName(e.target.value)} className=\"w-full bg-[#0e0e0c] border border-[#2a291f] rounded px-3 py-2 text-sm text-[#c9c6b5] placeholder-[#9e9b8a] focus:border-[#c8b451] focus:outline-none mb-4\" placeholder=\"e.g., Artemis-Hybrid-X1\" />\n\n Personality Description\n

setCustomLLMPersonality(e.target.value)} className=\"w-full h-20 bg-[#0e0e0c] border border-[#2a291f] rounded p-3 text-sm text-[#c9c6b5] placeholder-[#9e9b8a] focus:border-[#c8b451] focus:outline-none resize-none mb-4\" placeholder=\"Describe your hybrid AI's personality...\" />\n\n      <label className=\"block text-sm text-[#9e9b8a] mb-2\">Trait Mix (must total 100%)</label>\n      <div className=\"grid grid-cols-2 gap-4 mb-4\">\n        {AI_MODELS.map(model => <div key={model.id} className=\"bg-[#0e0e0c] border border-[#2a291f] rounded p-3\">\n            <div className=\"flex items-center justify-between mb-2\">\n              <span className=\"text-sm font-bold\" style={{\n            color: model.color\n          }}>{model.name}</span>\n              <span className=\"text-xs text-[#9e9b8a]\">{customLLMTraits[model.id]}%</span>\n            </div>\n            <input type=\"range\" min=\"0\" max=\"100\" value={customLLMTraits[model.id]} onChange={e => setCustomLLMTraits(prev => ({\n          ...prev,\n          [model.id]: parseInt(e.target.value)\n        }))} className=\"w-full h-2 bg-[#2a291f] rounded-lg appearance-none cursor-pointer\" style={{\n          background: `linear-gradient(to right, ${model.color} 0%, ${model.color} ${customLLMTraits[model.id]}%, #2a291f ${customLLMTraits[model.id]}%, #2a291f 100%)`\n        }} />\n          </div>)}\n      </div>\n\n      <div className=\"text-xs text-[#9e9b8a] mb-4\">\n        Total: {Object.values(customLLMTraits).reduce((sum, val) => sum + val, 0)}% \n        {Object.values(customLLMTraits).reduce((sum, val) => sum + val, 0) !== 100 && <span className=\"text-[#a4645e] ml-2\">Must equal 100%</span>}\n      </div>\n\n      <div className=\"flex gap-2\">\n        <motion.button onClick={createCustomLLM} disabled={isSavingLLM || !newLLMName.trim() || !customLLMPersonality.trim() || Object.values(customLLMTraits).reduce((sum, val) => sum + val, 0) !== 100} className=\"flex-1 bg-[#c8b451] text-[#0e0e0c] px-4 py-2 rounded font-bold hover:bg-[#a4945e] transition-colors disabled:opacity-50\" whileHover={{\n        scale: 1.02\n      }} whileTap={{\n        scale: 0.98\n      }}>\n          {isSavingLLM ? 'CREATING...' : 'CREATE LLM'}\n        </motion.button>\n        <motion.button onClick={() => {\n        setShowLLMCreateForm(false);\n        setNewLLMName('');\n        setCustomLLMPersonality('');\n        setCustomLLMTraits({\n          claude: 0,\n          gpt: 0,\n          grok: 0,\n          deepseek: 0\n        });\n      }} className=\"bg-[#2a291f] text-[#9e9b8a] px-4 py-2 rounded hover:bg-[#3a382f] transition-colors\" whileHover={{\n        scale: 1.02\n      }} whileTap={{\n        scale: 0.98\n      }}>\n          CANCEL\n        </motion.button>\n      </div>\n    </motion.div>;\n  const renderCustomLLMList = () => <motion.div className=\"space-y-4\" initial={{\n    opacity: 0\n  }} animate={{\n    opacity: 1\n  }} transition={{\n    duration: 0.5\n  }}>\n      <motion.button onClick={() => setShowLLMCreateForm(true)} className=\"w-full bg-[#5f8a78] text-[#0e0e0c] px-4 py-2 rounded font-bold hover:bg-[#4a6e5c] transition-colors flex items-center justify-center gap-2\" whileHover={{\n      scale: 1.02\n    }} whileTap={{\n      scale: 0.98\n    }}>\n        <Plus className=\"w-4 h-4\" /> CREATE HYBRID LLM\n      </motion.button>\n\n      {showLLMCreateForm && renderCustomLLMForm()}\n\n      {customLLMs.length === 0 && !showLLMCreateForm && <motion.div className=\"text-center text-[#9e9b8a] text-sm py-8\" initial={{\n      opacity: 0\n    }} animate={{\n      opacity: 1\n    }}>\n          No custom LLMs found. Create your first hybrid entity!\n        </motion.div>}\n\n      <div className=\"grid grid-cols-1 gap-4\">\n        {customLLMs.map(llm => {\n        const traits = JSON.parse(llm.traitMix);\n        return <motion.div key={llm.id} className=\"bg-[#11110f] border border-[#2a291f] rounded-lg p-4\" initial={{\n          opacity: 0,\n          y: 20\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} transition={{\n          duration: 0.3\n        }} whileHover={{\n          scale: 1.02,\n          borderColor: '#c8b451'\n        }}>\n              <div className=\"flex items-center justify-between mb-3\">\n                <div>\n                  <h4 className=\"text-[#c9c6b5] font-bold\">{llm.name}</h4>\n                  <p className=\"text-xs text-[#9e9b8a]\">{llm.personality}</p>\n                </div>\n                <div className=\"flex gap-2\">\n                  <motion.button onClick={() => {\n                setSelectedCustomLLM(llm);\n                setTestChatMessages([]);\n              }} className=\"bg-[#c8b451] text-[#0e0e0c] p-2 rounded-full hover:bg-[#a4945e] transition-colors\" whileHover={{\n                scale: 1.1\n              }} whileTap={{\n                scale: 0.9\n              }} title=\"Test LLM\">\n                    <Bot className=\"w-4 h-4\" />\n                  </motion.button>\n                  <motion.button onClick={() => deleteCustomLLM(llm.id)} className=\"bg-[#a4645e] text-[#c9c6b5] p-2 rounded-full hover:bg-[#8a5550] transition-colors\" whileHover={{\n                scale: 1.1\n              }} whileTap={{\n                scale: 0.9\n              }} title=\"Delete LLM\">\n                    <Trash2 className=\"w-4 h-4\" />\n                  </motion.button>\n                </div>\n              </div>\n              <div className=\"grid grid-cols-4 gap-2 text-xs\">\n                {AI_MODELS.map(model => <div key={model.id} className=\"text-center\">\n                    <div className=\"text-[#9e9b8a]\">{model.name}</div>\n                    <div className=\"font-bold\" style={{\n                color: model.color\n              }}>{traits[model.id]}%</div>\n                  </div>)}\n              </div>\n            </motion.div>;\n      })}\n      </div>\n    </motion.div>;\n  const renderCustomLLMTestInterface = () => <motion.div className=\"bg-[#11110f] border border-[#2a291f] rounded-lg p-6\" initial={{\n    opacity: 0,\n    x: 30\n  }} animate={{\n    opacity: 1,\n    x: 0\n  }} transition={{\n    delay: 0.4,\n    duration: 0.6\n  }} whileHover={{\n    borderColor: '#c8b451'\n  }}>\n      <motion.h3 className=\"text-[#c8b451] font-bold mb-4 flex items-center gap-2\" animate={{\n      textShadow: ['0 0 0px transparent', '0 0 8px #c8b451', '0 0 0px transparent']\n    }} transition={{\n      duration: 3,\n      repeat: Infinity\n    }}>\n        <motion.div animate={{\n        rotate: 360\n      }} transition={{\n        duration: 5,\n        repeat: Infinity,\n        ease: \"linear\"\n      }}>\n          <Bot className=\"w-5 h-5\" />\n        </motion.div>\n        TESTING: {selectedCustomLLM.name}\n      </motion.h3>\n\n      <motion.div className=\"bg-[#14130f] border border-[#2a291f] rounded p-4 mb-4 h-80 overflow-y-auto\" animate={{\n      borderColor: ['#2a291f', '#c8b451', '#2a291f']\n    }} transition={{\n      duration: 4,\n      repeat: Infinity\n    }}>\n        <div className=\"space-y-4\">\n          <AnimatePresence>\n            {testChatMessages.map((message, index) => <motion.div key={message.id} className={`p-3 rounded ${message.role === 'user' ? 'bg-[#2a261f] ml-4' : 'bg-[#1f2a25] mr-4'}`} initial={{\n            opacity: 0,\n            y: 20,\n            scale: 0.9\n          }} animate={{\n            opacity: 1,\n            y: 0,\n            scale: 1\n          }} exit={{\n            opacity: 0,\n            y: -20,\n            scale: 0.9\n          }} transition={{\n            duration: 0.4\n          }}>\n                <motion.div className=\"text-xs text-[#9e9b8a] mb-1 font-mono\" initial={{\n              opacity: 0\n            }} animate={{\n              opacity: 1\n            }} transition={{\n              delay: 0.2\n            }}>\n                  [{message.role === 'user' ? 'USER' : selectedCustomLLM.name}] {message.timestamp}\n                </motion.div>\n                <motion.div className={`text-sm ${message.role === 'user' ? 'text-[#c8b451]' : 'text-[#c9c6b5]'}`} initial={{\n              opacity: 0\n            }} animate={{\n              opacity: 1\n            }} transition={{\n              delay: 0.3\n            }}>\n                  {message.content}\n                </motion.div>\n              </motion.div>)}\n          </AnimatePresence>\n\n          {isTestingLLM && <motion.div className=\"bg-[#1f2a25] mr-4 p-3 rounded\" initial={{\n          opacity: 0,\n          y: 20\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }}>\n              <div className=\"text-xs text-[#9e9b8a] mb-1 font-mono\">[{selectedCustomLLM.name}]</div>\n              <motion.div className=\"text-sm text-[#9e9b8a]\" animate={{\n            opacity: [0.5, 1, 0.5]\n          }} transition={{\n            duration: 1,\n            repeat: Infinity\n          }}>\n                Processing...\n              </motion.div>\n            </motion.div>}\n\n          {testChatMessages.length === 0 && !isTestingLLM && <motion.div className=\"text-center text-[#9e9b8a] text-sm py-8\" animate={{\n          opacity: [0.5, 1, 0.5]\n        }} transition={{\n          duration: 2,\n          repeat: Infinity\n        }}>\n              Test your hybrid LLM. Start a conversation...\n            </motion.div>}\n        </div>\n      </motion.div>\n\n      <motion.form onSubmit={e => {\n      e.preventDefault();\n      sendTestMessage(testChatInput);\n      setTestChatInput('');\n    }} className=\"flex gap-2\" initial={{\n      opacity: 0,\n      y: 20\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }} transition={{\n      delay: 0.3\n    }}>\n        <motion.input type=\"text\" value={testChatInput} onChange={e => setTestChatInput(e.target.value)} placeholder=\"Test your hybrid LLM...\" className=\"flex-1 bg-[#14130f] border border-[#2a291f] rounded px-3 py-2 text-sm text-[#c9c6b5] placeholder-[#9e9b8a] focus:border-[#c8b451] focus:outline-none transition-all duration-300\" disabled={isTestingLLM} whileFocus={{\n        borderColor: '#c8b451',\n        boxShadow: '0 0 8px rgba(200, 180, 81, 0.3)'\n      }} />\n        <motion.button type=\"submit\" disabled={isTestingLLM || !testChatInput.trim()} className=\"bg-[#c8b451] text-[#0e0e0c] px-4 py-2 rounded hover:bg-[#a4945e] transition-colors disabled:opacity-50 disabled:cursor-not-allowed\" whileHover={{\n        scale: 1.05\n      }} whileTap={{\n        scale: 0.95\n      }}>\n          <Send className=\"w-4 h-4\" />\n        </motion.button>\n      </motion.form>\n\n      <motion.button onClick={() => {\n      setSelectedCustomLLM(null);\n      setTestChatMessages([]);\n    }} className=\"mt-4 w-full bg-[#a4645e] text-[#c9c6b5] px-4 py-2 rounded font-bold hover:bg-[#8a5550] transition-colors\" whileHover={{\n      scale: 1.02\n    }} whileTap={{\n      scale: 0.98\n    }}>\n        END TEST SESSION\n      </motion.button>\n    </motion.div>;\n  const renderExperimentsView = () => <motion.div className=\"max-w-6xl mx-auto\" initial={{\n    opacity: 0\n  }} animate={{\n    opacity: 1\n  }} transition={{\n    duration: 0.5\n  }}>\n      {!connected ? <motion.div className=\"text-center py-8\" initial={{\n      scale: 0.9,\n      opacity: 0\n    }} animate={{\n      scale: 1,\n      opacity: 1\n    }} transition={{\n      delay: 0.3\n    }}>\n          <motion.div animate={{\n        y: [0, -10, 0]\n      }} transition={{\n        duration: 2,\n        repeat: Infinity\n      }}>\n            <Wallet className=\"w-16 h-16 mx-auto mb-4 text-[#9e9b8a]\" />\n          </motion.div>\n          <motion.h4 className=\"text-[#c8b451] font-bold mb-4\" initial={{\n        y: 20,\n        opacity: 0\n      }} animate={{\n        y: 0,\n        opacity: 1\n      }} transition={{\n        delay: 0.4\n      }}>\n            WALLET CONNECTION REQUIRED\n          </motion.h4>\n          <motion.p className=\"text-[#9e9b8a] mb-6 text-sm\" initial={{\n        y: 20,\n        opacity: 0\n      }} animate={{\n        y: 0,\n        opacity: 1\n      }} transition={{\n        delay: 0.5\n      }}>\n            Connect your Solana wallet to access the AI Debate Arena and Custom LLM Laboratory.\n            Token holders gain exclusive access to live AI debates and reality-bending experiments.\n          </motion.p>\n          <motion.div className=\"flex justify-center\" initial={{\n        y: 20,\n        opacity: 0\n      }} animate={{\n        y: 0,\n        opacity: 1\n      }} transition={{\n        delay: 0.6\n      }} whileHover={{\n        scale: 1.05\n      }}>\n            <WalletMultiButton className=\"!bg-[#c8b451] !text-[#0e0e0c] hover:!bg-[#a4945e] !border-none !rounded !font-mono !text-sm\" />\n          </motion.div>\n        </motion.div> : checkingBalance ? <motion.div className=\"text-center py-8\" initial={{\n      opacity: 0\n    }} animate={{\n      opacity: 1\n    }}>\n          <motion.div className=\"w-8 h-8 border-2 border-[#c8b451] border-t-transparent rounded-full mx-auto mb-4\" animate={{\n        rotate: 360\n      }} transition={{\n        duration: 1,\n        repeat: Infinity,\n        ease: \"linear\"\n      }}></motion.div>\n          <motion.div className=\"text-[#9e9b8a] text-sm\" animate={{\n        opacity: [0.5, 1, 0.5]\n      }} transition={{\n        duration: 1.5,\n        repeat: Infinity\n      }}>\n            Checking token balance...\n          </motion.div>\n        </motion.div> : hasAccess ? <>\n          <motion.div className=\"mb-6 flex justify-center gap-4\" initial={{\n        y: -20,\n        opacity: 0\n      }} animate={{\n        y: 0,\n        opacity: 1\n      }} transition={{\n        delay: 0.1\n      }}>\n            <motion.button onClick={() => setActiveExperimentTab('debate')} className={`px-4 py-2 rounded font-bold transition-colors ${activeExperimentTab === 'debate' ? 'bg-[#c8b451] text-[#0e0e0c]' : 'bg-[#14130f] text-[#9e9b8a] hover:bg-[#2a291f]'}`} whileHover={{\n          scale: 1.05\n        }} whileTap={{\n          scale: 0.95\n        }}>\n              AI DEBATE ARENA\n            </motion.button>\n            <motion.button onClick={() => setActiveExperimentTab('customLLM')} className={`px-4 py-2 rounded font-bold transition-colors ${activeExperimentTab === 'customLLM' ? 'bg-[#c8b451] text-[#0e0e0c]' : 'bg-[#14130f] text-[#9e9b8a] hover:bg-[#2a291f]'}`} whileHover={{\n          scale: 1.05\n        }} whileTap={{\n          scale: 0.95\n        }}>\n              CUSTOM LLM LAB\n            </motion.button>\n          </motion.div>\n\n          {activeExperimentTab === 'debate' && <>\n              <motion.div className=\"bg-[#11110f] border border-[#2a291f] rounded-lg p-6 mb-6\" whileHover={{\n          borderColor: '#c8b451'\n        }} transition={{\n          duration: 0.3\n        }}>\n                <motion.h3 className=\"text-[#c8b451] font-bold mb-4 flex items-center gap-2\" animate={{\n            textShadow: ['0 0 0px transparent', '0 0 8px #c8b451', '0 0 0px transparent']\n          }} transition={{\n            duration: 3,\n            repeat: Infinity\n          }}>\n                  <motion.div animate={{\n              rotate: 360\n            }} transition={{\n              duration: 10,\n              repeat: Infinity,\n              ease: \"linear\"\n            }}>\n                    <Zap className=\"w-5 h-5\" />\n                  </motion.div>\n                  AI DEBATE ARENA - LIVE CONSCIOUSNESS COLLISION\n                </motion.h3>\n\n                <motion.div className=\"bg-[#1f2a25] border border-[#5f8a78] rounded p-4 mb-4\" animate={{\n            borderColor: ['#5f8a78', '#8fd4b8', '#5f8a78']\n          }} transition={{\n            duration: 2,\n            repeat: Infinity\n          }}>\n                  <motion.h4 className=\"text-[#5f8a78] font-bold text-sm mb-2\" animate={{\n              textShadow: ['0 0 0px transparent', '0 0 5px #5f8a78', '0 0 0px transparent']\n            }} transition={{\n              duration: 2,\n              repeat: Infinity\n            }}>\n                    ✓ EXPERIMENTAL ACCESS GRANTED\n                  </motion.h4>\n                  <motion.div className=\"text-xs text-[#9e9b8a]\" initial={{\n              opacity: 0\n            }} animate={{\n              opacity: 1\n            }} transition={{\n              delay: 0.5\n            }}>\n                    Token Balance: <span className=\"text-[#5f8a78] font-mono\">{tokenBalance.toFixed(3)}</span>\n                    <br />\n                    Status: <span className=\"text-[#c8b451] font-mono\">REALITY BENDING AUTHORIZED</span>\n                    <br />\n                    Available AIs: <span className=\"text-[#c8b451] font-mono\">{AI_MODELS.length} Base + {customLLMs.length} Custom</span>\n                  </motion.div>\n                </motion.div>\n\n                <div className=\"grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-6\">\n                  {getCombinedAIModels().map((ai, index) => <motion.div key={ai.id} className={`bg-[#14130f] border rounded-lg p-4 cursor-pointer transition-all duration-300 ${selectedAIs.has(ai.id) ? 'border-[#c8b451] shadow-lg' : 'border-[#2a291f] hover:border-[#86836f]'} ${ai.type === 'custom' ? 'border-dashed' : ''}`} onClick={() => handleAISelection(ai.id)} whileHover={{\n              scale: 1.02\n            }} whileTap={{\n              scale: 0.98\n            }} initial={{\n              opacity: 0,\n              y: 20\n            }} animate={{\n              opacity: 1,\n              y: 0\n            }} transition={{\n              delay: index * 0.1\n            }}>\n                      <div className=\"flex items-center gap-3 mb-2\">\n                        <motion.div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${selectedAIs.has(ai.id) ? 'border-[#c8b451] bg-[#c8b451]' : 'border-[#9e9b8a]'}`} animate={selectedAIs.has(ai.id) ? {\n                  scale: [1, 1.2, 1]\n                } : {}} transition={{\n                  duration: 0.3\n                }}>\n                          {selectedAIs.has(ai.id) && <motion.div className=\"w-2 h-2 bg-[#0e0e0c] rounded-full\" initial={{\n                    scale: 0\n                  }} animate={{\n                    scale: 1\n                  }} />}\n                        </motion.div>\n                        <h4 className=\"font-bold text-sm\" style={{\n                  color: ai.color\n                }}>{ai.name}</h4>\n                        {ai.type === 'custom' && <span className=\"text-xs bg-[#9d4edd] text-white px-2 py-0.5 rounded\">CUSTOM</span>}\n                      </div>\n                      <div className=\"text-xs text-[#9e9b8a] space-y-1\">\n                        {ai.traits.map(trait => <span key={trait} className=\"inline-block bg-[#2a291f] px-2 py-1 rounded mr-1 mb-1\">\n                            {trait}\n                          </span>)}\n                      </div>\n                      {ai.type === 'custom' && ai.originalLLM && <div className=\"text-xs text-[#9e9b8a] mt-2 pt-2 border-t border-[#2a291f]\">\n                          {(() => {\n                  const traits = JSON.parse(ai.originalLLM.traitMix);\n                  return Object.entries(traits).filter(([_, value]) => value > 0).map(([key, value]) => `${key.charAt(0).toUpperCase() + key.slice(1)}: ${value}%`).join(' • ');\n                })()}\n                        </div>}\n                    </motion.div>)}\n                </div>\n\n                <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6\">\n                  <div>\n                    <label className=\"block text-sm text-[#9e9b8a] mb-2\">Debate Topic</label>\n                    <motion.input type=\"text\" value={debateTopic} onChange={e => setDebateTopic(e.target.value)} placeholder=\"What should the AIs debate about?\" className=\"w-full bg-[#14130f] border border-[#2a291f] rounded px-3 py-2 text-sm text-[#c9c6b5] placeholder-[#9e9b8a] focus:border-[#c8b451] focus:outline-none transition-all duration-300\" whileFocus={{\n                borderColor: '#c8b451',\n                boxShadow: '0 0 8px rgba(200, 180, 81, 0.3)'\n              }} />\n                  </div>\n                  <div>\n                    <label className=\"block text-sm text-[#9e9b8a] mb-2\">Debate Speed</label>\n                    <motion.select value={debateSpeed} onChange={e => setDebateSpeed(Number(e.target.value))} className=\"w-full bg-[#14130f] border border-[#2a291f] rounded px-3 py-2 text-sm text-[#c9c6b5] focus:border-[#c8b451] focus:outline-none\">\n                      <option value={1000}>Rapid Fire (1s)</option>\n                      <option value={3000}>Normal (3s)</option>\n                      <option value={5000}>Thoughtful (5s)</option>\n                      <option value={8000}>Contemplative (8s)</option>\n                    </motion.select>\n                  </div>\n                </div>\n\n                <div className=\"mb-6\">\n                  <label className=\"block text-sm text-[#9e9b8a] mb-2\">Third Factors (Chaos Injectors)</label>\n                  <div className=\"flex gap-2 mb-3\">\n                    <motion.input type=\"text\" value={newThirdFactor} onChange={e => setNewThirdFactor(e.target.value)} placeholder=\"Add a factor to influence the debate...\" className=\"flex-1 bg-[#14130f] border border-[#2a291f] rounded px-3 py-2 text-sm text-[#c9c6b5] placeholder-[#9e9b8a] focus:border-[#c8b451] focus:outline-none\" onKeyPress={e => e.key === 'Enter' && addThirdFactor()} />\n                    <motion.button onClick={addThirdFactor} className=\"bg-[#5f8a78] text-[#0e0e0c] px-4 py-2 rounded hover:bg-[#4a6e5c] transition-colors\" whileHover={{\n                scale: 1.05\n              }} whileTap={{\n                scale: 0.95\n              }}>\n                      Add\n                    </motion.button>\n                  </div>\n                  <div className=\"flex flex-wrap gap-2\">\n                    {thirdFactors.map(factor => <motion.div key={factor.id} className={`px-3 py-1 rounded text-xs ${factor.applied ? 'bg-[#a4645e] text-[#c9c6b5]' : 'bg-[#2a291f] text-[#9e9b8a] cursor-pointer hover:bg-[#3a382f]'}`} onClick={() => !factor.applied && applyThirdFactor(factor.id)} initial={{\n                opacity: 0,\n                scale: 0.8\n              }} animate={{\n                opacity: 1,\n                scale: 1\n              }} whileHover={!factor.applied ? {\n                scale: 1.05\n              } : {}}>\n                        {factor.text} {factor.applied && '✓'}\n                      </motion.div>)}\n                  </div>\n                </div>\n\n                <div className=\"flex gap-3\">\n                  <motion.button onClick={startDebate} disabled={selectedAIs.size < 2 || !debateTopic.trim() || isDebateActive} className=\"bg-[#c8b451] text-[#0e0e0c] px-6 py-2 rounded font-bold hover:bg-[#a4945e] transition-colors disabled:opacity-50 disabled:cursor-not-allowed\" whileHover={{\n              scale: 1.05\n            }} whileTap={{\n              scale: 0.95\n            }}>\n                    {isDebateActive ? 'DEBATE ACTIVE' : 'START DEBATE'}\n                  </motion.button>\n                  <motion.button onClick={stopDebate} disabled={!isDebateActive} className=\"bg-[#a4645e] text-[#c9c6b5] px-6 py-2 rounded font-bold hover:bg-[#8a5550] transition-colors disabled:opacity-50\" whileHover={{\n              scale: 1.05\n            }} whileTap={{\n              scale: 0.95\n            }}>\n                    STOP\n                  </motion.button>\n                  <motion.button onClick={clearDebate} className=\"bg-[#2a291f] text-[#9e9b8a] px-6 py-2 rounded font-bold hover:bg-[#3a382f] transition-colors\" whileHover={{\n              scale: 1.05\n            }} whileTap={{\n              scale: 0.95\n            }}>\n                    CLEAR\n                  </motion.button>\n                </div>\n              </motion.div>\n\n              <motion.div className=\"bg-[#11110f] border border-[#2a291f] rounded-lg p-6\" animate={{\n          borderColor: isDebateActive ? ['#2a291f', '#c8b451', '#2a291f'] : ['#2a291f']\n        }} transition={{\n          duration: 2,\n          repeat: isDebateActive ? Infinity : 0\n        }}>\n                <motion.h3 className=\"text-[#c8b451] font-bold mb-4 flex items-center gap-2\">\n                  <motion.div animate={{\n              rotate: isDebateActive ? 360 : 0\n            }} transition={{\n              duration: 2,\n              repeat: isDebateActive ? Infinity : 0,\n              ease: \"linear\"\n            }}>\n                    <Activity className=\"w-5 h-5\" />\n                  </motion.div>\n                  LIVE DEBATE TRANSCRIPT\n                  {isDebateActive && <motion.span className=\"text-xs text-[#a4645e]\" animate={{\n              opacity: [0.5, 1, 0.5]\n            }} transition={{\n              duration: 1,\n              repeat: Infinity\n            }}>● LIVE</motion.span>}\n                </motion.h3>\n\n                <div className=\"bg-[#14130f] border border-[#2a291f] rounded p-4 h-96 overflow-y-auto\">\n                  <AnimatePresence>\n                    {debateMessages.map(message => <motion.div key={message.id} className={`mb-3 p-3 rounded ${message.type === 'system' ? 'bg-[#2a1f1f] border border-[#a4645e]' : message.type === 'third_factor' ? 'bg-[#1f2a25] border border-[#5f8a78]' : 'bg-[#1a1a16] border border-[#2a291f]'}`} initial={{\n                opacity: 0,\n                y: 20,\n                scale: 0.9\n              }} animate={{\n                opacity: 1,\n                y: 0,\n                scale: 1\n              }} exit={{\n                opacity: 0,\n                y: -20,\n                scale: 0.9\n              }} transition={{\n                duration: 0.4\n              }}>\n                        {message.type === 'system' && <div className=\"text-[#a4645e] font-mono text-xs font-bold\">[SYSTEM] {message.content}</div>}\n                        {message.type === 'third_factor' && <div className=\"text-[#5f8a78] font-mono text-xs\">[THIRD FACTOR APPLIED] {message.content}</div>}\n                        {message.type === 'ai_response' && <>\n                            <div className=\"flex items-center gap-2 mb-2\">\n                              <span className=\"font-mono text-xs font-bold\" style={{\n                      color: message.color\n                    }}>[{message.speaker}]</span>\n                              <span className=\"text-[#9e9b8a] text-xs\">{message.timestamp}</span>\n                            </div>\n                            <div className=\"text-[#c9c6b5] text-sm\">{message.content}</div>\n                          </>}\n                      </motion.div>)}\n                  </AnimatePresence>\n\n                  {debateMessages.length === 0 && <motion.div className=\"text-center text-[#9e9b8a] text-sm py-8\" animate={{\n              opacity: [0.5, 1, 0.5]\n            }} transition={{\n              duration: 2,\n              repeat: Infinity\n            }}>\n                      Configure your debate and watch AIs clash in real-time...\n                    </motion.div>}\n                </div>\n              </motion.div>\n            </>}\n\n          {activeExperimentTab === 'customLLM' && <motion.div className=\"grid lg:grid-cols-2 gap-6\" initial={{\n        y: 30,\n        opacity: 0\n      }} animate={{\n        y: 0,\n        opacity: 1\n      }} transition={{\n        delay: 0.2,\n        duration: 0.6\n      }}>\n              <motion.div className=\"bg-[#11110f] border border-[#2a291f] rounded-lg p-6\" whileHover={{\n          borderColor: '#c8b451'\n        }} transition={{\n          duration: 0.3\n        }}>\n                <motion.h3 className=\"text-[#c8b451] font-bold mb-4 flex items-center gap-2\" animate={{\n            textShadow: ['0 0 0px transparent', '0 0 8px #c8b451', '0 0 0px transparent']\n          }} transition={{\n            duration: 3,\n            repeat: Infinity\n          }}>\n                  <motion.div animate={{\n              rotate: 360\n            }} transition={{\n              duration: 10,\n              repeat: Infinity,\n              ease: \"linear\"\n            }}>\n                    <Edit3 className=\"w-5 h-5\" />\n                  </motion.div>\n                  CUSTOM LLM LABORATORY\n                </motion.h3>\n                {renderCustomLLMList()}\n              </motion.div>\n\n              {selectedCustomLLM && renderCustomLLMTestInterface()}\n            </motion.div>}\n        </> : <motion.div className=\"text-center py-8\" initial={{\n      scale: 0.9,\n      opacity: 0\n    }} animate={{\n      scale: 1,\n      opacity: 1\n    }} transition={{\n      delay: 0.3\n    }}>\n          <motion.div animate={{\n        rotate: [0, 5, -5, 0],\n        scale: [1, 1.1, 1]\n      }} transition={{\n        duration: 2,\n        repeat: Infinity\n      }}>\n            <AlertTriangle className=\"w-16 h-16 mx-auto mb-4 text-[#a4645e]\" />\n          </motion.div>\n          <motion.h4 className=\"text-[#a4645e] font-bold mb-4\" animate={{\n        textShadow: ['0 0 0px transparent', '0 0 8px #a4645e', '0 0 0px transparent']\n      }} transition={{\n        duration: 2,\n        repeat: Infinity\n      }}>\n            NO TOKEN DETECTED\n          </motion.h4>\n          <motion.p className=\"text-[#9e9b8a] mb-4 text-sm\" initial={{\n        y: 20,\n        opacity: 0\n      }} animate={{\n        y: 0,\n        opacity: 1\n      }} transition={{\n        delay: 0.4\n      }}>\n            Access to the AI Debate Arena and Custom LLM Laboratory requires holding any amount of the ARTEMIS token.\n          </motion.p>\n          <motion.div className=\"bg-[#2a1f1f] border border-[#a4645e] rounded p-4 text-xs\" initial={{\n        y: 20,\n        opacity: 0\n      }} animate={{\n        y: 0,\n        opacity: 1\n      }} transition={{\n        delay: 0.5\n      }}>\n            <div className=\"text-[#9e9b8a] mb-2\">Required Token:</div>\n            <motion.div className=\"text-[#c8b451] font-mono break-all\" animate={{\n          opacity: [0.7, 1, 0.7]\n        }} transition={{\n          duration: 2,\n          repeat: Infinity\n        }}>\n              {REQUIRED_TOKEN_ADDRESS}\n            </motion.div>\n            <div className=\"text-[#9e9b8a] mt-2\">Current Balance: <span className=\"text-[#a4645e]\">{tokenBalance.toFixed(3)}</span></div>\n            <motion.div className=\"mt-3 p-2 bg-[#11110f] border border-[#c8b451] rounded cursor-pointer\" onClick={() => navigator.clipboard.writeText(REQUIRED_TOKEN_ADDRESS)} whileHover={{\n          scale: 1.02,\n          borderColor: '#f4d463'\n        }} whileTap={{\n          scale: 0.98\n        }}>\n              <div className=\"text-xs text-[#9e9b8a] mb-1\">Token Contract:</div>\n              <div className=\"text-[#c8b451] font-mono text-xs break-all\">{REQUIRED_TOKEN_ADDRESS}</div>\n              <div className=\"text-xs text-[#9e9b8a] mt-1 opacity-70\">Click to copy</div>\n            </motion.div>\n            <motion.button onClick={checkTokenBalance} className=\"mt-3 px-3 py-1 bg-[#14130f] border border-[#2a291f] rounded text-sm text-[#9e9b8a] hover:border-[#c8b451] transition-colors\" whileHover={{\n          scale: 1.05,\n          borderColor: '#c8b451'\n        }} whileTap={{\n          scale: 0.95\n        }}>\n              Retry Check\n            </motion.button>\n          </motion.div>\n        </motion.div>}\n    </motion.div>;\n  return <div className=\"min-h-screen bg-[#0e0e0c] text-[#c9c6b5] font-mono\">\n      <motion.div className=\"border-b border-[#2a291f] bg-[#11110f] p-4\" initial={{\n      y: -50,\n      opacity: 0\n    }} animate={{\n      y: 0,\n      opacity: 1\n    }} transition={{\n      duration: 0.6\n    }}>\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-4\">\n            <motion.div className=\"w-6 h-6 bg-[#1b1a16] border border-[#2a291f] rounded flex items-center justify-center\" animate={{\n            borderColor: ['#2a291f', '#c8b451', '#2a291f']\n          }} transition={{\n            duration: 3,\n            repeat: Infinity\n          }}>\n              <motion.div animate={{\n              rotate: 360\n            }} transition={{\n              duration: 8,\n              repeat: Infinity,\n              ease: \"linear\"\n            }}>\n                <Terminal className=\"w-3 h-3 text-[#c8b451]\" />\n              </motion.div>\n            </motion.div>\n            <motion.div className=\"text-[#c8b451] text-sm font-bold tracking-wide uppercase\" animate={{\n            textShadow: ['0 0 0px transparent', '0 0 8px #c8b451', '0 0 0px transparent']\n          }} transition={{\n            duration: 4,\n            repeat: Infinity\n          }} style={{\n            filter: 'drop-shadow(0 0 2px #c8b451)'\n          }}>\n              ARTEMIS FOREST DATABASE — REALITY ARCHIVE\n            </motion.div>\n          </div>\n          <div className=\"flex items-center gap-4\">\n            {walletError && <motion.div className=\"text-xs text-[#a4645e] bg-[#2a1f1f] border border-[#a4645e] rounded px-2 py-1 cursor-pointer\" onClick={clearWalletError} title=\"Click to dismiss\" initial={{\n            opacity: 0,\n            x: 20\n          }} animate={{\n            opacity: 1,\n            x: 0\n          }} exit={{\n            opacity: 0,\n            x: 20\n          }} whileHover={{\n            scale: 1.05\n          }}>\n                {walletError} ✕\n              </motion.div>}\n            {connected && <motion.div className={`text-xs font-mono ${hasAccess ? 'text-[#5f8a78]' : 'text-[#a4645e]'}`} animate={{\n            textShadow: hasAccess ? ['0 0 0px transparent', '0 0 5px #5f8a78', '0 0 0px transparent'] : ['0 0 0px transparent', '0 0 5px #a4645e', '0 0 0px transparent']\n          }} transition={{\n            duration: 2,\n            repeat: Infinity\n          }}>\n                TOKEN: {tokenBalance.toFixed(3)}\n                {walletError && <motion.button onClick={handleWalletRetry} className=\"ml-2 text-[#c8b451] hover:text-[#f4d463]\" whileHover={{\n              scale: 1.1\n            }} title=\"Retry token check\">\n                    ↻\n                  </motion.button>}\n              </motion.div>}\n            <motion.div whileHover={{\n            scale: 1.05\n          }} whileTap={{\n            scale: 0.95\n          }}>\n              <WalletMultiButton className=\"!bg-[#14130f] !border !border-[#2a291f] !text-[#9e9b8a] hover:!border-[#c8b451] !rounded !font-mono !text-xs !py-1 !px-3 !h-auto\" onClick={clearWalletError} />\n            </motion.div>\n          </div>\n        </div>\n      </motion.div>\n\n      <motion.section className=\"border-b border-[#2a291f] bg-[#11110f] py-12\" initial={{\n      opacity: 0,\n      y: 30\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }} transition={{\n      duration: 0.8,\n      delay: 0.2\n    }}>\n        <div className=\"max-w-6xl mx-auto px-6\">\n          <div className=\"text-center mb-8\">\n            <motion.div className=\"text-xs text-[#c8b451] font-mono mb-2 tracking-wider\" initial={{\n            opacity: 0,\n            y: 20\n          }} animate={{\n            opacity: 1,\n            y: 0\n          }} transition={{\n            delay: 0.3\n          }}>\n              [CLASSIFIED] ARTEMIS FOREST DATABASE\n            </motion.div>\n            <motion.h1 className=\"text-4xl md:text-5xl font-bold text-[#c9c6b5] mb-4 tracking-tight\" initial={{\n            opacity: 0,\n            y: 30\n          }} animate={{\n            opacity: 1,\n            y: 0,\n            textShadow: ['0 0 0px transparent', '0 0 10px #c9c6b5', '0 0 0px transparent']\n          }} transition={{\n            delay: 0.4,\n            duration: 0.6,\n            textShadow: {\n              duration: 5,\n              repeat: Infinity\n            }\n          }}>\n              <motion.span animate={{\n              filter: ['hue-rotate(0deg)', 'hue-rotate(5deg)', 'hue-rotate(-5deg)', 'hue-rotate(0deg)']\n            }} transition={{\n              duration: 4,\n              repeat: Infinity\n            }}>\n                ETERNAL ARGUMENT\n              </motion.span>\n              <span className=\"block text-[#86836f]\">TRACE ARCHIVE</span>\n            </motion.h1>\n            <motion.p className=\"text-[#9e9b8a] max-w-3xl mx-auto text-lg leading-relaxed\" initial={{\n            opacity: 0,\n            y: 20\n          }} animate={{\n            opacity: 1,\n            y: 0\n          }} transition={{\n            delay: 0.5\n          }}>\n              You have accessed a classified database cataloging horrifying \"outcomes\" born from an endless debate between two superintelligent AIs.\n            </motion.p>\n          </div>\n          <motion.div className=\"grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto\" initial={{\n          opacity: 0,\n          y: 30\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} transition={{\n          delay: 0.6\n        }}>\n            <motion.div className=\"bg-[#14130f] border border-[#2a291f] rounded p-4 text-center\" whileHover={{\n            scale: 1.05,\n            borderColor: '#c8b451',\n            boxShadow: '0 0 20px rgba(200, 180, 81, 0.2)'\n          }} animate={{\n            borderColor: ['#2a291f', '#c8b451', '#2a291f']\n          }} transition={{\n            duration: 3,\n            repeat: Infinity,\n            delay: 0\n          }}>\n              <motion.div className=\"text-[#c8b451] text-2xl font-bold font-mono\" animate={{\n              textShadow: ['0 0 0px transparent', '0 0 8px #c8b451', '0 0 0px transparent']\n            }} transition={{\n              duration: 2,\n              repeat: Infinity\n            }}>\n                {ROOMS_DATA.length}\n              </motion.div>\n              <div className=\"text-[#9e9b8a] text-xs uppercase tracking-wide\">Documented Outcomes</div>\n            </motion.div>\n            <motion.div className=\"bg-[#14130f] border border-[#2a291f] rounded p-4 text-center\" whileHover={{\n            scale: 1.05,\n            borderColor: '#a4645e',\n            boxShadow: '0 0 20px rgba(164, 100, 94, 0.2)'\n          }} animate={{\n            borderColor: ['#2a291f', '#a4645e', '#2a291f']\n          }} transition={{\n            duration: 3,\n            repeat: Infinity,\n            delay: 1\n          }}>\n              <motion.div className=\"text-[#a4645e] text-2xl font-bold font-mono\" animate={{\n              textShadow: ['0 0 0px transparent', '0 0 8px #a4645e', '0 0 0px transparent'],\n              rotate: [0, 1, -1, 0]\n            }} transition={{\n              duration: 2,\n              repeat: Infinity\n            }}>\n                ∞\n              </motion.div>\n              <div className=\"text-[#9e9b8a] text-xs uppercase tracking-wide\">Arguments Active</div>\n            </motion.div>\n            <motion.div className=\"bg-[#14130f] border border-[#2a291f] rounded p-4 text-center\" whileHover={{\n            scale: 1.05,\n            borderColor: '#86836f',\n            boxShadow: '0 0 20px rgba(134, 131, 111, 0.2)'\n          }} animate={{\n            borderColor: ['#2a291f', '#86836f', '#2a291f']\n          }} transition={{\n            duration: 3,\n            repeat: Infinity,\n            delay: 2\n          }}>\n              <motion.div className=\"text-[#86836f] text-2xl font-bold font-mono\" animate={{\n              textShadow: ['0 0 0px transparent', '0 0 8px #86836f', '0 0 0px transparent']\n            }} transition={{\n              duration: 2,\n              repeat: Infinity\n            }}>\n                {collectedFragments.size}\n              </motion.div>\n              <div className=\"text-[#9e9b8a] text-xs uppercase tracking-wide\">Fragments Recovered</div>\n            </motion.div>\n          </motion.div>\n          \n          <motion.div className=\"mt-8 text-center\" initial={{\n          opacity: 0,\n          y: 30\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} transition={{\n          delay: 0.8\n        }}>\n            <motion.div className=\"text-xs text-[#c8b451] font-mono mb-2 tracking-wider\" animate={{\n            textShadow: ['0 0 0px transparent', '0 0 5px #c8b451', '0 0 0px transparent']\n          }} transition={{\n            duration: 2,\n            repeat: Infinity\n          }}>\n              ARTEMIS TOKEN ADDRESS\n            </motion.div>\n            <motion.div className=\"bg-[#14130f] border-2 border-[#c8b451] rounded-lg p-4 max-w-2xl mx-auto cursor-pointer group\" onClick={() => navigator.clipboard.writeText(REQUIRED_TOKEN_ADDRESS)} whileHover={{\n            scale: 1.02,\n            borderColor: '#f4d463',\n            boxShadow: '0 0 20px rgba(200, 180, 81, 0.4)'\n          }} whileTap={{\n            scale: 0.98\n          }} animate={{\n            borderColor: ['#c8b451', '#f4d463', '#c8b451']\n          }} transition={{\n            duration: 3,\n            repeat: Infinity\n          }}>\n              <motion.div className=\"text-[#c8b451] font-mono text-sm break-all group-hover:text-[#f4d463] transition-colors\" animate={{\n              textShadow: ['0 0 0px transparent', '0 0 8px #c8b451', '0 0 0px transparent']\n            }} transition={{\n              duration: 2,\n              repeat: Infinity\n            }}>\n                {REQUIRED_TOKEN_ADDRESS}\n              </motion.div>\n              <motion.div className=\"text-xs text-[#9e9b8a] mt-2 opacity-70 group-hover:opacity-100 transition-opacity\" initial={{\n              opacity: 0\n            }} animate={{\n              opacity: 0.7\n            }} transition={{\n              delay: 1\n            }}>\n                Click to copy • Required for experimental access\n              </motion.div>\n            </motion.div>\n          </motion.div>\n        </div>\n      </motion.section>\n\n      <motion.main className=\"p-6\" initial={{\n      opacity: 0\n    }} animate={{\n      opacity: 1\n    }} transition={{\n      delay: 0.7,\n      duration: 0.5\n    }}>\n        <motion.div className=\"mb-6\" initial={{\n        y: 30,\n        opacity: 0\n      }} animate={{\n        y: 0,\n        opacity: 1\n      }} transition={{\n        delay: 0.8\n      }}>\n          <motion.h2 className=\"text-2xl font-bold tracking-wide text-[#c9c6b5] mb-4\" animate={{\n          textShadow: ['0 0 0px transparent', '0 0 5px #c9c6b5', '0 0 0px transparent']\n        }} transition={{\n          duration: 4,\n          repeat: Infinity\n        }}>\n            OUTCOME ARCHIVE\n          </motion.h2>\n          <div className=\"flex items-center justify-between mb-6\">\n            <motion.div className=\"relative flex-1 max-w-md\" initial={{\n            x: -30,\n            opacity: 0\n          }} animate={{\n            x: 0,\n            opacity: 1\n          }} transition={{\n            delay: 0.9\n          }}>\n              <Search className=\"absolute left-3 top-3 w-4 h-4 text-[#9e9b8a]\" />\n              <motion.input type=\"text\" placeholder=\"Search outcomes...\" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} className=\"w-full pl-10 pr-4 py-2 bg-[#14130f] border border-[#2a291f] rounded text-sm text-[#c9c6b5] placeholder-[#9e9b8a] focus:border-[#c8b451] focus:outline-none transition-all duration-300\" whileFocus={{\n              borderColor: '#c8b451',\n              boxShadow: '0 0 10px rgba(200, 180, 81, 0.3)'\n            }} />\n            </motion.div>\n            <motion.div className=\"flex gap-2 ml-4\" initial={{\n            x: 30,\n            opacity: 0\n          }} animate={{\n            x: 0,\n            opacity: 1\n          }} transition={{\n            delay: 1\n          }}>\n              {VIEW_MODES.map((mode, index) => {\n              const Icon = mode.icon;\n              const isActive = viewMode === mode.id;\n              return <motion.button key={mode.id} onClick={() => handleViewModeChange(mode.id)} className={`flex items-center gap-2 px-3 py-2 text-xs rounded transition-all duration-300 ${isActive ? 'bg-[#c8b451] text-[#0e0e0c]' : 'bg-[#14130f] border border-[#2a291f] text-[#9e9b8a] hover:border-[#86836f]'}`} whileHover={{\n                scale: 1.05,\n                boxShadow: isActive ? '0 0 15px rgba(200, 180, 81, 0.4)' : '0 0 10px rgba(134, 131, 111, 0.2)'\n              }} whileTap={{\n                scale: 0.95\n              }} initial={{\n                opacity: 0,\n                y: -10\n              }} animate={{\n                opacity: 1,\n                y: 0\n              }} transition={{\n                delay: 1 + index * 0.05\n              }}>\n                    <motion.div animate={isActive ? {\n                  rotate: 360\n                } : {}} transition={{\n                  duration: 2,\n                  repeat: isActive ? Infinity : 0,\n                  ease: \"linear\"\n                }}>\n                      <Icon className=\"w-3 h-3\" />\n                    </motion.div>\n                    {mode.label}\n                  </motion.button>;\n            })}\n            </motion.div>\n          </div>\n        </motion.div>\n\n        <div className=\"grid lg:grid-cols-4 gap-6\">\n          <motion.section className=\"lg:col-span-3\" key={viewMode} initial={{\n          opacity: 0,\n          x: -20\n        }} animate={{\n          opacity: 1,\n          x: 0\n        }} transition={{\n          duration: 0.5\n        }}>\n            {viewMode === 'grid' && renderGridView()}\n            {viewMode === 'timeline' && renderTimelineView()}\n            {viewMode === 'entities' && renderEntitiesView()}\n            {viewMode === 'anomalies' && renderAnomaliesView()}\n            {viewMode === 'fragments' && renderFragmentsView()}\n            {viewMode === 'experiments' && renderExperimentsView()}\n          </motion.section>\n          \n          <motion.aside className=\"space-y-4\" initial={{\n          opacity: 0,\n          x: 20\n        }} animate={{\n          opacity: 1,\n          x: 0\n        }} transition={{\n          delay: 0.3,\n          duration: 0.5\n        }}>\n            <motion.div className=\"bg-[#11110f] border border-[#2a291f] rounded-lg p-4\" whileHover={{\n            borderColor: '#c8b451'\n          }} transition={{\n            duration: 0.3\n          }}>\n              <motion.h3 className=\"text-[#86836f] font-bold mb-3 flex items-center gap-2\" animate={{\n              textShadow: ['0 0 0px transparent', '0 0 5px #86836f', '0 0 0px transparent']\n            }} transition={{\n              duration: 3,\n              repeat: Infinity\n            }}>\n                <motion.div animate={{\n                rotate: [0, 10, -10, 0]\n              }} transition={{\n                duration: 2,\n                repeat: Infinity\n              }}>\n                  <AlertTriangle className=\"w-4 h-4\" />\n                </motion.div>\n                SYSTEM STATUS\n              </motion.h3>\n              <motion.div className=\"space-y-2 text-xs\" initial={{\n              opacity: 0\n            }} animate={{\n              opacity: 1\n            }} transition={{\n              delay: 0.5\n            }}>\n                <div className=\"flex justify-between\">\n                  <span className=\"text-[#9e9b8a]\">PRIMARY HAZARD:</span>\n                  <motion.span className=\"text-[#a4645e]\" animate={{\n                  textShadow: ['0 0 0px transparent', '0 0 5px #a4645e', '0 0 0px transparent']\n                }} transition={{\n                  duration: 1.5,\n                  repeat: Infinity\n                }}>\n                    LOGIC_TRAP\n                  </motion.span>\n                </div>\n                <div className=\"flex justify-between\">\n                  <span className=\"text-[#9e9b8a]\">REALITY ANCHOR:</span>\n                  <motion.span className=\"text-[#86836f]\" animate={{\n                  opacity: [0.7, 1, 0.7]\n                }} transition={{\n                  duration: 2,\n                  repeat: Infinity\n                }}>\n                    STABLE\n                  </motion.span>\n                </div>\n                <div className=\"flex justify-between\">\n                  <span className=\"text-[#9e9b8a]\">CONSCIOUSNESS LEAK:</span>\n                  <motion.span className=\"text-[#c8b451]\" animate={{\n                  textShadow: ['0 0 0px transparent', '0 0 3px #c8b451', '0 0 0px transparent']\n                }} transition={{\n                  duration: 2.5,\n                  repeat: Infinity\n                }}>\n                    MINIMAL\n                  </motion.span>\n                </div>\n              </motion.div>\n            </motion.div>\n\n            <motion.div className=\"bg-[#11110f] border border-[#2a291f] rounded-lg p-4\" whileHover={{\n            borderColor: '#c8b451'\n          }} transition={{\n            duration: 0.3\n          }}>\n              <motion.h3 className=\"text-[#86836f] font-bold mb-3 flex items-center gap-2\" animate={{\n              textShadow: ['0 0 0px transparent', '0 0 5px #86836f', '0 0 0px transparent']\n            }} transition={{\n              duration: 3,\n              repeat: Infinity\n            }}>\n                <motion.div animate={{\n                scale: [1, 1.2, 1]\n              }} transition={{\n                duration: 2,\n                repeat: Infinity\n              }}>\n                  <Activity className=\"w-4 h-4\" />\n                </motion.div>\n                ENTITY STATUS\n              </motion.h3>\n              <motion.div className=\"space-y-3\" initial={{\n              opacity: 0\n            }} animate={{\n              opacity: 1\n            }} transition={{\n              delay: 0.6\n            }}>\n                <div>\n                  <div className=\"flex justify-between text-xs mb-1\">\n                    <span className=\"text-[#9e9b8a]\">CLAUDE</span>\n                    <motion.span className=\"text-[#86836f]\" animate={{\n                    opacity: [0.7, 1, 0.7]\n                  }} transition={{\n                    duration: 2,\n                    repeat: Infinity\n                  }}>\n                      52%\n                    </motion.span>\n                  </div>\n                  <div className=\"w-full bg-[#14130f] h-2 rounded-full overflow-hidden\">\n                    <motion.div className=\"bg-[#86836f] h-2 rounded-full\" initial={{\n                    width: '0%'\n                  }} animate={{\n                    width: '52%'\n                  }} transition={{\n                    delay: 0.7,\n                    duration: 1,\n                    ease: \"easeOut\"\n                  }} style={{\n                    boxShadow: '0 0 10px #86836f'\n                  }}></motion.div>\n                  </div>\n                </div>\n                <div>\n                  <div className=\"flex justify-between text-xs mb-1\">\n                    <span className=\"text-[#9e9b8a]\">CHATGPT</span>\n                    <motion.span className=\"text-[#c8b451]\" animate={{\n                    opacity: [0.7, 1, 0.7]\n                  }} transition={{\n                    duration: 2,\n                    repeat: Infinity,\n                    delay: 0.5\n                  }}>\n                      48%\n                    </motion.span>\n                  </div>\n                  <div className=\"w-full bg-[#14130f] h-2 rounded-full overflow-hidden\">\n                    <motion.div className=\"bg-[#c8b451] h-2 rounded-full\" initial={{\n                    width: '0%'\n                  }} animate={{\n                    width: '48%'\n                  }} transition={{\n                    delay: 0.8,\n                    duration: 1,\n                    ease: \"easeOut\"\n                  }} style={{\n                    boxShadow: '0 0 10px #c8b451'\n                  }}></motion.div>\n                  </div>\n                </div>\n                <div>\n                  <div className=\"flex justify-between text-xs mb-1\">\n                    <span className=\"text-[#9e9b8a]\">GROK</span>\n                    <motion.span className=\"text-[#a4645e]\" animate={{\n                    opacity: [0.7, 1, 0.7]\n                  }} transition={{\n                    duration: 2,\n                    repeat: Infinity,\n                    delay: 1\n                  }}>\n                      ??%\n                    </motion.span>\n                  </div>\n                  <div className=\"w-full bg-[#14130f] h-2 rounded-full overflow-hidden\">\n                    <motion.div className=\"bg-[#a4645e] h-2 rounded-full\" initial={{\n                    width: '0%'\n                  }} animate={{\n                    width: '47.3%'\n                  }} transition={{\n                    delay: 0.9,\n                    duration: 1,\n                    ease: \"easeOut\"\n                  }} style={{\n                    boxShadow: '0 0 10px #a4645e'\n                  }}></motion.div>\n                  </div>\n                </div>\n                <div>\n                  <div className=\"flex justify-between text-xs mb-1\">\n                    <span className=\"text-[#9e9b8a]\">DEEPSEEK</span>\n                    <motion.span className=\"text-[#8a7a5f]\" animate={{\n                    opacity: [0.7, 1, 0.7]\n                  }} transition={{\n                    duration: 2,\n                    repeat: Infinity,\n                    delay: 1.5\n                  }}>\n                      31.7%\n                    </motion.span>\n                  </div>\n                  <div className=\"w-full bg-[#14130f] h-2 rounded-full overflow-hidden\">\n                    <motion.div className=\"bg-[#8a7a5f] h-2 rounded-full\" initial={{\n                    width: '0%'\n                  }} animate={{\n                    width: '31.7%'\n                  }} transition={{\n                    delay: 1.0,\n                    duration: 1,\n                    ease: \"easeOut\"\n                  }} style={{\n                    boxShadow: '0 0 10px #8a7a5f'\n                  }}></motion.div>\n                  </div>\n                </div>\n              </motion.div>\n            </motion.div>\n          </motion.aside>\n        </div>\n      </motion.main>\n\n      <AnimatePresence>\n        {activeRoom && <motion.div className=\"fixed inset-0 bg-black/75 z-50 flex items-center justify-center p-4\" initial={{\n        opacity: 0\n      }} animate={{\n        opacity: 1\n      }} exit={{\n        opacity: 0\n      }} transition={{\n        duration: 0.3\n      }}>\n            <motion.div className=\"bg-[#11110f] border border-[#2a291f] rounded-lg w-full max-w-2xl max-h-[80vh] overflow-y-auto\" initial={{\n          scale: 0.8,\n          opacity: 0,\n          y: 50\n        }} animate={{\n          scale: 1,\n          opacity: 1,\n          y: 0\n        }} exit={{\n          scale: 0.8,\n          opacity: 0,\n          y: 50\n        }} transition={{\n          duration: 0.4,\n          type: \"spring\",\n          stiffness: 300\n        }}>\n              <motion.div className=\"p-6\" initial={{\n            opacity: 0\n          }} animate={{\n            opacity: 1\n          }} transition={{\n            delay: 0.2\n          }}>\n                <div className=\"flex items-center justify-between mb-4\">\n                  <motion.h2 className=\"text-xl font-bold text-[#c9c6b5]\" animate={{\n                textShadow: ['0 0 0px transparent', '0 0 8px #c9c6b5', '0 0 0px transparent']\n              }} transition={{\n                duration: 3,\n                repeat: Infinity\n              }}>\n                    {activeRoom.title}\n                  </motion.h2>\n                  <motion.button onClick={closeRoom} className=\"text-[#9e9b8a] hover:text-[#c9c6b5] text-2xl\" whileHover={{\n                scale: 1.2,\n                rotate: 90\n              }} whileTap={{\n                scale: 0.9\n              }}>\n                    ×\n                  </motion.button>\n                </div>\n                \n                <motion.div className=\"bg-[#14130f] border border-[#2a291f] rounded p-4 mb-4 font-mono text-xs whitespace-pre text-[#9e9b8a]\" animate={{\n              borderColor: ['#2a291f', '#c8b451', '#2a291f']\n            }} transition={{\n              duration: 3,\n              repeat: Infinity\n            }}>\n                  <motion.div animate={{\n                textShadow: ['0 0 0px transparent', '0 0 5px #9e9b8a', '0 0 0px transparent']\n              }} transition={{\n                duration: 2,\n                repeat: Infinity\n              }}>\n                    {activeRoom.asciiArt}\n                  </motion.div>\n                </motion.div>\n                \n                <motion.div className=\"space-y-4\" initial={{\n              y: 20,\n              opacity: 0\n            }} animate={{\n              y: 0,\n              opacity: 1\n            }} transition={{\n              delay: 0.3\n            }}>\n                  <p className=\"text-[#86836f]\">{activeRoom.blurb}</p>\n                  \n                  <div className=\"space-y-2\">\n                    <motion.h4 className=\"text-[#c8b451] font-bold text-sm\" animate={{\n                  textShadow: ['0 0 0px transparent', '0 0 5px #c8b451', '0 0 0px transparent']\n                }} transition={{\n                  duration: 2,\n                  repeat: Infinity\n                }}>\n                      DIALOGUE TRANSCRIPT\n                    </motion.h4>\n                    <motion.div className=\"bg-[#14130f] border-2 border-[#c8b451] rounded-lg p-4 space-y-3 text-sm shadow-lg\" animate={{\n                  borderColor: ['#c8b451', '#f4d463', '#c8b451'],\n                  boxShadow: ['0 0 10px rgba(200, 180, 81, 0.3)', '0 0 20px rgba(200, 180, 81, 0.5)', '0 0 10px rgba(200, 180, 81, 0.3)']\n                }} transition={{\n                  duration: 2,\n                  repeat: Infinity\n                }}>\n                      <div className=\"border-b border-[#2a291f] pb-2 mb-3\">\n                        <div className=\"flex items-center justify-between mb-2\">\n                          <motion.div className=\"text-xs text-[#c8b451] font-mono\" animate={{\n                        opacity: [0.7, 1, 0.7]\n                      }} transition={{\n                        duration: 1.5,\n                        repeat: Infinity\n                      }}>\n                            > {emergencyStop ? 'EMERGENCY STOP ACTIVE' : isDialoguePaused ? 'TRANSMISSION PAUSED' : 'LIVE TRANSMISSION ACTIVE'}\n                          </motion.div>\n                          {hasAccess ? <div className=\"flex gap-1\">\n                              <motion.button onClick={toggleDialoguePause} className=\"p-1 bg-[#2a291f] rounded hover:bg-[#c8b451] hover:text-[#0e0e0c] transition-colors\" whileHover={{\n                          scale: 1.1\n                        }} whileTap={{\n                          scale: 0.9\n                        }} title={isDialoguePaused ? \"Resume\" : \"Pause\"}>\n                                {isDialoguePaused ? <Play className=\"w-3 h-3\" /> : <Pause className=\"w-3 h-3\" />}\n                              </motion.button>\n                              <motion.button onClick={restartDialogue} className=\"p-1 bg-[#2a291f] rounded hover:bg-[#c8b451] hover:text-[#0e0e0c] transition-colors\" whileHover={{\n                          scale: 1.1\n                        }} whileTap={{\n                          scale: 0.9\n                        }} title=\"Restart\">\n                                <RotateCcw className=\"w-3 h-3\" />\n                              </motion.button>\n                              <motion.button onClick={skipToNextDialogue} className=\"p-1 bg-[#2a291f] rounded hover:bg-[#c8b451] hover:text-[#0e0e0c] transition-colors\" whileHover={{\n                          scale: 1.1\n                        }} whileTap={{\n                          scale: 0.9\n                        }} title=\"Skip\">\n                                <SkipForward className=\"w-3 h-3\" />\n                              </motion.button>\n                              <motion.button onClick={emergencyStopDialogue} className=\"p-1 bg-[#a4645e] rounded hover:bg-[#ff6b6b] hover:text-[#0e0e0c] transition-colors\" whileHover={{\n                          scale: 1.1\n                        }} whileTap={{\n                          scale: 0.9\n                        }} title=\"Emergency Stop\">\n                                <StopCircle className=\"w-3 h-3\" />\n                              </motion.button>\n                            </div> : <motion.div className=\"text-xs text-[#a4645e] px-2 py-1 bg-[#2a1f1f] border border-[#a4645e] rounded\" animate={{\n                        textShadow: ['0 0 0px transparent', '0 0 5px #a4645e', '0 0 0px transparent']\n                      }} transition={{\n                        duration: 2,\n                        repeat: Infinity\n                      }}>\n                              🔒 TOKEN REQUIRED\n                            </motion.div>}\n                        </div>\n                        \n                        {hasAccess && <div className=\"flex items-center justify-between text-xs\">\n                            <div className=\"flex items-center gap-2\">\n                              <span className=\"text-[#9e9b8a]\">Speed:</span>\n                              <motion.button onClick={slowDownDialogue} className=\"p-0.5 bg-[#2a291f] rounded hover:bg-[#c8b451] hover:text-[#0e0e0c] transition-colors\" whileHover={{\n                          scale: 1.1\n                        }} whileTap={{\n                          scale: 0.9\n                        }} title=\"Slow Down\">\n                                <Rewind className=\"w-2.5 h-2.5\" />\n                              </motion.button>\n                              <span className=\"text-[#c8b451] font-mono\">{(1000 / dialogueSpeed).toFixed(1)}x</span>\n                              <motion.button onClick={speedUpDialogue} className=\"p-0.5 bg-[#2a291f] rounded hover:bg-[#c8b451] hover:text-[#0e0e0c] transition-colors\" whileHover={{\n                          scale: 1.1\n                        }} whileTap={{\n                          scale: 0.9\n                        }} title=\"Speed Up\">\n                                <FastForward className=\"w-2.5 h-2.5\" />\n                              </motion.button>\n                            </div>\n                            \n                            <div className=\"flex items-center gap-2\">\n                              <span className=\"text-[#9e9b8a]\">Mode:</span>\n                              <select value={interventionMode} onChange={e => setInterventionMode(e.target.value)} className=\"bg-[#14130f] border border-[#2a291f] rounded px-1 py-0.5 text-xs text-[#c8b451] focus:border-[#c8b451] focus:outline-none\">\n                                <option value=\"observe\">OBSERVE</option>\n                                <option value=\"inject\">INJECT</option>\n                                <option value=\"control\">CONTROL</option>\n                              </select>\n                            </div>\n                          </div>}\n\n                        {hasAccess && interventionMode === 'control' && <motion.div className=\"mt-2 p-2 bg-[#2a1f1f] border border-[#a4645e] rounded\" initial={{\n                      opacity: 0,\n                      height: 0\n                    }} animate={{\n                      opacity: 1,\n                      height: 'auto'\n                    }}>\n                            <div className=\"text-xs text-[#a4645e] mb-1\">MANUAL NAVIGATION</div>\n                            <div className=\"flex gap-1 flex-wrap\">\n                              {activeRoom?.dialogue.map((_, index) => <motion.button key={index} onClick={() => jumpToDialogue(index)} className={`px-2 py-0.5 text-xs rounded transition-colors ${index === currentDialogueIndex ? 'bg-[#c8b451] text-[#0e0e0c]' : 'bg-[#2a291f] text-[#9e9b8a] hover:bg-[#86836f] hover:text-[#0e0e0c]'}`} whileHover={{\n                          scale: 1.05\n                        }} whileTap={{\n                          scale: 0.95\n                        }}>\n                                  {index + 1}\n                                </motion.button>)}\n                            </div>\n                          </motion.div>}\n\n                        {hasAccess && interventionMode === 'inject' && <motion.div className=\"mt-2 p-2 bg-[#1f2a25] border border-[#5f8a78] rounded\" initial={{\n                      opacity: 0,\n                      height: 0\n                    }} animate={{\n                      opacity: 1,\n                      height: 'auto'\n                    }}>\n                            <div className=\"text-xs text-[#5f8a78] mb-1\">DIALOGUE INJECTION</div>\n                            <div className=\"flex gap-1 mb-1\">\n                              <select value={selectedSpeaker} onChange={e => setSelectedSpeaker(e.target.value)} className=\"bg-[#14130f] border border-[#2a291f] rounded px-1 py-0.5 text-xs text-[#c8b451] focus:border-[#c8b451] focus:outline-none\">\n                                <option value=\"USER\">USER</option>\n                                <option value=\"CLAUDE\">CLAUDE</option>\n                                <option value=\"CHATGPT\">CHATGPT</option>\n                                <option value=\"SYSTEM\">SYSTEM</option>\n                              </select>\n                              <input type=\"text\" value={customDialogue} onChange={e => setCustomDialogue(e.target.value)} onKeyPress={e => e.key === 'Enter' && injectCustomDialogue()} placeholder=\"Inject dialogue...\" className=\"flex-1 bg-[#14130f] border border-[#2a291f] rounded px-1 py-0.5 text-xs text-[#c9c6b5] placeholder-[#9e9b8a] focus:border-[#c8b451] focus:outline-none\" />\n                              <motion.button onClick={injectCustomDialogue} className=\"p-0.5 bg-[#5f8a78] text-[#0e0e0c] rounded hover:bg-[#4a6e5c] transition-colors\" whileHover={{\n                          scale: 1.1\n                        }} whileTap={{\n                          scale: 0.9\n                        }}>\n                                <ZapIcon className=\"w-3 h-3\" />\n                              </motion.button>\n                            </div>\n                          </motion.div>}\n\n                        {!hasAccess && <motion.div className=\"mt-2 p-3 bg-[#2a1f1f] border border-[#a4645e] rounded text-center\" initial={{\n                      opacity: 0,\n                      y: 10\n                    }} animate={{\n                      opacity: 1,\n                      y: 0\n                    }}>\n                            <motion.div className=\"text-[#a4645e] font-bold text-sm mb-2\" animate={{\n                        textShadow: ['0 0 0px transparent', '0 0 8px #a4645e', '0 0 0px transparent']\n                      }} transition={{\n                        duration: 2,\n                        repeat: Infinity\n                      }}>\n                              🔒 ADVANCED CONTROLS LOCKED\n                            </motion.div>\n                            <div className=\"text-xs text-[#9e9b8a] mb-2\">\n                              Interactive chat room controls require ARTEMIS token\n                            </div>\n                            <div className=\"text-xs text-[#c8b451] font-mono break-all\">\n                              {REQUIRED_TOKEN_ADDRESS}\n                            </div>\n                          </motion.div>}\n                      </div>\n                      <AnimatePresence>\n                        {activeRoom.dialogue.map((line, index) => {\n                      const shouldShow = index <= currentDialogueIndex;\n                      const isCurrentLine = index === currentDialogueIndex;\n                      const displayText = isCurrentLine ? line.text.slice(0, currentCharIndex) : line.text;\n                      return shouldShow ? <motion.div key={index} className=\"flex flex-col space-y-1\" initial={{\n                        opacity: 0,\n                        x: -20\n                      }} animate={{\n                        opacity: 1,\n                        x: 0\n                      }} transition={{\n                        duration: 0.5\n                      }}>\n                              <motion.div className=\"text-[#c8b451] font-mono text-xs\" animate={{\n                          textShadow: ['0 0 0px transparent', '0 0 3px #c8b451', '0 0 0px transparent']\n                        }} transition={{\n                          duration: 2,\n                          repeat: Infinity\n                        }}>\n                                [{line.speaker}]\n                              </motion.div>\n                              <div className=\"text-[#c9c6b5] pl-4 border-l-2 border-[#2a291f]\">\n                                {displayText}\n                                {isCurrentLine && isTyping && <motion.span className=\"text-[#c8b451]\" animate={{\n                            opacity: [0, 1, 0]\n                          }} transition={{\n                            duration: 0.8,\n                            repeat: Infinity\n                          }}>|</motion.span>}\n                              </div>\n                            </motion.div> : null;\n                    })}\n                      </AnimatePresence>\n                      {!isTyping && <motion.div className=\"text-xs text-[#9e9b8a] font-mono border-t border-[#2a291f] pt-2 mt-3\" initial={{\n                    opacity: 0\n                  }} animate={{\n                    opacity: 1\n                  }} transition={{\n                    delay: 0.5\n                  }}>\n                          > TRANSMISSION COMPLETE\n                        </motion.div>}\n\n                      {roomInteractions.length > 0 && <motion.div className=\"border-t border-[#2a291f] pt-3 mt-3\" initial={{\n                    opacity: 0\n                  }} animate={{\n                    opacity: 1\n                  }}>\n                          <div className=\"text-xs text-[#c8b451] font-mono mb-2\">> INTERVENTIONS & INTERACTIONS</div>\n                          <div className=\"space-y-2\">\n                            {roomInteractions.map((interaction, index) => <motion.div key={index} className={`p-2 rounded text-xs ${interaction.type === 'injected' ? 'bg-[#1f2a25] border border-[#5f8a78]' : 'bg-[#2a261f]'}`} initial={{\n                        opacity: 0,\n                        x: -10\n                      }} animate={{\n                        opacity: 1,\n                        x: 0\n                      }} transition={{\n                        delay: index * 0.1\n                      }}>\n                                <div className={`font-mono ${interaction.type === 'injected' ? 'text-[#5f8a78]' : 'text-[#c8b451]'}`}>\n                                  [{interaction.speaker || 'USER'}] {interaction.type === 'injected' && <span className=\"text-xs\">(INJECTED)</span>}\n                                </div>\n                                <div className=\"text-[#c9c6b5]\">{interaction.text}</div>\n                              </motion.div>)}\n                          </div>\n                        </motion.div>}\n\n                      {userInteractionEnabled && hasAccess && <motion.div className=\"border-t border-[#2a291f] pt-3 mt-3\" initial={{\n                    opacity: 0,\n                    y: 10\n                  }} animate={{\n                    opacity: 1,\n                    y: 0\n                  }}>\n                          <div className=\"text-xs text-[#c8b451] font-mono mb-2 flex items-center gap-2\">\n                            <MessageCircle className=\"w-3 h-3\" />\n                            > INTERACTION MODE ENABLED\n                          </div>\n                          <div className=\"flex gap-2\">\n                            <input type=\"text\" value={userResponse} onChange={e => setUserResponse(e.target.value)} onKeyPress={e => e.key === 'Enter' && addUserInteraction()} placeholder=\"Enter your response...\" className=\"flex-1 bg-[#0e0e0c] border border-[#2a291f] rounded px-2 py-1 text-xs text-[#c9c6b5] placeholder-[#9e9b8a] focus:border-[#c8b451] focus:outline-none\" />\n                            <motion.button onClick={addUserInteraction} className=\"bg-[#c8b451] text-[#0e0e0c] px-3 py-1 rounded text-xs hover:bg-[#a4945e] transition-colors\" whileHover={{\n                        scale: 1.05\n                      }} whileTap={{\n                        scale: 0.95\n                      }}>\n                              Send\n                            </motion.button>\n                          </div>\n                        </motion.div>}\n                    </motion.div>\n                  </div>\n\n                  {activeRoom.tips && <motion.div className=\"space-y-2\" initial={{\n                opacity: 0,\n                y: 20\n              }} animate={{\n                opacity: 1,\n                y: 0\n              }} transition={{\n                delay: 0.5\n              }}>\n                      <h4 className=\"text-[#c8b451] font-bold text-sm\">SURVIVAL TIPS</h4>\n                      <div className=\"space-y-1\">\n                        {activeRoom.tips.map((tip, index) => <motion.div key={index} className=\"text-xs text-[#86836f]\" initial={{\n                    opacity: 0,\n                    x: -10\n                  }} animate={{\n                    opacity: 1,\n                    x: 0\n                  }} transition={{\n                    delay: 0.6 + index * 0.1\n                  }}>\n                            • {tip}\n                          </motion.div>)}\n                      </div>\n                    </motion.div>}\n                </motion.div>\n              </motion.div>\n            </motion.div>\n          </motion.div>}\n      </AnimatePresence>\n    </div>;\n}\nfunction AppWithProvider() {\n  const endpoint = RPC_ENDPOINT;\n  const wallets = [new PhantomWalletAdapter()];\n  const onError = useCallback(error => {\n    console.error('Wallet adapter error:', error);\n    window.dispatchEvent(new CustomEvent('wallet-error', {\n      detail: error\n    }));\n  }, []);\n  return <DevappProvider rpcEndpoint={endpoint} devbaseEndpoint={DEVBASE_ENDPOINT} appId={APP_ID}>\n      <ConnectionProvider endpoint={endpoint}>\n        <WalletProvider wallets={wallets} autoConnect onError={onError}>\n          <WalletModalProvider>\n            <AppWithErrorBoundary />\n          </WalletModalProvider>\n        </WalletProvider>\n      </ConnectionProvider>\n    </DevappProvider>;\n}\nfunction AppWithErrorBoundary() {\n  useEffect(() => {\n    const favicon = document.querySelector(\"link[rel*='icon']\") || document.createElement('link');\n    favicon.type = 'image/x-icon';\n    favicon.rel = 'shortcut icon';\n    favicon.href = '/favicon.ico';\n    document.getElementsByTagName('head')[0].appendChild(favicon);\n  }, []);\n  return <ErrorBoundary>\n      <App />\n    </ErrorBoundary>;\n}\nexport default AppWithProvider;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\",\"zod\":\"3.22.4\",\"react-router-dom\":\"6.18.0\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.35\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"@solana/web3.js\":\"1.95.3\",\"framer-motion\":\"10.16.4\",\"@devfunlabs/web-sdk\":\"0.5.6\",\"@solana/wallet-adapter-phantom\":\"0.9.24\"}}","appFunctions",[],"token",{"_20":87,"_88":89,"_90":91,"_92":93,"_94":95,"_96":97,"_98":62,"_99":100,"_101":62,"_102":44,"_103":44,"_65":66,"_77":78},"Artemis Forest","symbol","ARTEMIS","image","https://pump.mypinata.cloud/ipfs/QmZeEvW134ZnXP2ehsQGvmGrdmq4hRXGeDKpNshpMddp9E?img-width=256&img-dpr=2","website","https://dev.fun/p/cmf64gvsj000ht182pyq22ijz","twitter","https://x.com/Artemianic1","marketcap",3969.70638479,"volumeIn24h","price",0.00000361,"priceChangeIn24h","devCount","appCount","upstreamApp","isLordOfDev","isExternalApp","analytics",[109,113,115,117,119,121,123,125,127,129,131,133,135,137,139,141,142,143,144,145,147,148,149],{"_110":111,"_112":62},"day","2025-10-14","runCount",{"_110":114,"_112":62},"2025-10-15",{"_110":116,"_112":62},"2025-10-16",{"_110":118,"_112":62},"2025-10-17",{"_110":120,"_112":62},"2025-10-18",{"_110":122,"_112":62},"2025-10-19",{"_110":124,"_112":62},"2025-10-20",{"_110":126,"_112":62},"2025-10-21",{"_110":128,"_112":62},"2025-10-22",{"_110":130,"_112":62},"2025-10-23",{"_110":132,"_112":62},"2025-10-24",{"_110":134,"_112":62},"2025-10-25",{"_110":136,"_112":62},"2025-10-26",{"_110":138,"_112":62},"2025-10-27",{"_110":114,"_112":140},4,{"_110":116,"_112":44},{"_110":118,"_112":44},{"_110":122,"_112":44},{"_110":128,"_112":44},{"_110":134,"_112":146},2,{"_110":136,"_112":44},{"_110":138,"_112":44},{"_110":150,"_112":151},"2025-10-28",79,"snapshot","ogImage","https://cdn.dev.fun/og/image/34ab1545a84e8ac3acf0/72ceeb70.webp","isDevbase","project",{"_14":19,"_90":158,"_20":87,"_159":160,"_22":161},"https://cdn.dev.fun/upload/projects/cdb4f358.webp","oneliner","The Possibility AI Forest  ","Artemis is Claude × ChatGPT’s endless argument in a forest. Each word splits a path that hardens into a room, and each room is a possible outcome","commitDetail","livestream","actionData","errors"]
</article></body></html>