[{"_1":2,"_184":-5,"_185":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_55":56,"_57":41,"_58":59,"_60":61,"_62":59,"_63":64,"_65":41,"_66":59,"_67":59,"_68":59,"_69":17,"_70":17,"_71":72,"_73":74,"_75":76,"_77":78,"_79":80,"_95":96,"_147":17,"_148":149,"_106":31,"_108":182,"_183":17},"id","f68f14e69c6b0fe8400e","isMyApp",false,"name","glowgork","description","Jack into the digital underground with this retro ASCII terminal where the logo radiates with hypnotic neon intensity that burns itself into your retinas. The pulsating glow syncs with market volatility, turning brighter green during pumps and blood-red during dumps, so you always know when to panic sell.","brief","Retro terminal for degens with a logo so radioactively glowy it might give your GPU radiation poisoning.","isLive",true,"isPublic","tags",[29],"👑","cover","https://cdn.dev.fun/snapshot/f68f14e69c6b0fe8400e/61409_d6edf27f.webp","cdnUrl","https://cdn.dev.fun/app/f68f14e69c6b0fe8400e/61409","createdAt",["D",1746072339285],"updatedAt",["D",1746073582112],"lastCommitId",["B","61409"],"tier",1,"credits",120,{"_14":45,"_46":47,"_48":-5,"_49":47,"_50":51,"_52":-5,"_53":54},"6ce198bf-1c7d-42db-806d-e67a69afcfe8","uniqueId","DVgNGvFv1Lpo3E2tYg9Kmz2vsouh7LWnyPobpKTKSHmN","username","solanaWallet","displayName","DVg...HmN","bio","avatar","/avatar.svg","commitCount",6,"forkCount","likeCount",0,"runsCount",251,"downvoteCount","upvoteCount",5,"upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","HACBbm6fkfAAN5FsPsZZPPkCXZMLjgfxeuG3C7hupump","code","import { useState, useEffect, useRef } from 'react';\nimport { io } from 'socket.io-client';\nimport { StateClient } from '@devfunlabs/state-client';\nimport { useChat } from 'ai/react';\nimport { fetchTokenInfoByAddress } from '@devfunlabs/web-sdk';\nimport { AnimatePresence } from 'framer-motion';\nconst socket = io('wss://ws.dev.fun/app-f68f14e69c6b0fe8400e');\nconst client = new StateClient({\n baseURL: 'https://state.dev.fun',\n appId: 'f68f14e69c6b0fe8400e'\n});\nconst LOGO_URL = \"https://gmgn.ai/external-res/dec6ea26b46459ba5cb8d84b1874ab38.webp\";\nconst X_LOGO_URL = \"https://upload.wikimedia.org/wikipedia/commons/5/57/X_logo_2023_%28white%29.png\";\nconst SOL_LOGO_URL = \"https://res.coinpaper.com/coinpaper/f_webp,c_limit,w_3840,q_auto:good/solana_sol_logo_28f7fb0af5.svg\";\nconst ScanLines = () =>

;\nconst TerminalOutput = ({\n children,\n className = ''\n}) =>

{children}

;\nconst GlitchText = ({\n text,\n className = \"\"\n}) => {\n return

\n \n {text}\n \n

;\n};\nconst CyberComponents = () => {\n return {\n Container: ({\n children,\n className = ''\n }) =>

\n {children}\n

,\n Button: ({\n children,\n onClick,\n className = '',\n color = 'white'\n }) => {\n const colorMap = {\n white: 'bg-black hover:bg-gray-800 border-white text-white',\n red: 'bg-black hover:bg-gray-900 border-gray-700 text-red-500',\n green: 'bg-black hover:bg-gray-900 border-gray-700 text-green-500',\n accent: 'bg-black hover:bg-gray-900 border-white/50 text-white',\n yellow: 'bg-black hover:bg-gray-900 border-gray-700 text-yellow-500',\n purple: 'bg-black hover:bg-gray-900 border-gray-700 text-purple-500'\n };\n return ;\n },\n Input: ({\n value,\n onChange,\n className = '',\n placeholder = '',\n inputRef,\n type = 'text'\n }) => {\n return

\n \n

;\n },\n Textarea: ({\n value,\n onChange,\n className = '',\n placeholder = '',\n inputRef\n }) => {\n return

\n          <div className=\"absolute h-full w-[1px] top-0 bottom-0 right-0 bg-[linear-gradient(0deg,transparent,white,transparent)] opacity-10\"></div>\n          <div className=\"absolute h-full w-[1px] top-0 bottom-0 left-0 bg-[linear-gradient(0deg,transparent,white,transparent)] opacity-10\"></div>\n        </div>;\n    },\n    Card: ({\n      children,\n      className = '',\n      glowing = false\n    }) => {\n      return <div className={`bg-gray-900 bg-opacity-70 border border-white/10 p-4 transition-all duration-300 hover:border-white/30 ${glowing ? 'shadow-md shadow-white/10' : ''} ${className}`}>\n          <div className=\"absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-30 pointer-events-none\"></div>\n          {children}\n        </div>;\n    },\n    NavItem: ({\n      children,\n      active = false,\n      onClick\n    }) => {\n      return <button onClick={onClick} className={`w-full text-left p-3 mb-2 transition-all relative overflow-hidden\n            ${active ? 'bg-white/10 border-l-2 border-white text-white' : 'hover:bg-white/5 text-gray-400 hover:text-gray-200'}`}>\n          {active && <div className=\"absolute inset-0 bg-white/5\" />}\n          {children}\n          {active && <div className=\"absolute left-0 top-0 bottom-0 w-[2px] bg-white\">\n            </div>}\n        </button>;\n    },\n    Badge: ({\n      children,\n      className = '',\n      color = 'white'\n    }) => {\n      const colorMap = {\n        white: 'bg-black border border-white/30 text-white',\n        red: 'bg-black border border-red-500/30 text-red-500',\n        green: 'bg-black border border-green-500/30 text-green-500',\n        yellow: 'bg-black border border-yellow-500/30 text-yellow-500',\n        purple: 'bg-black border border-purple-500/30 text-purple-500'\n      };\n      return <span className={`px-2 py-1 text-xs font-bold inline-block ${colorMap[color]} ${className}`} style={{\n        clipPath: \"polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px))\"\n      }}>\n          {children}\n        </span>;\n    },\n    Terminal: ({\n      children,\n      className = ''\n    }) => {\n      return <div className={`font-mono bg-black border border-white/40 overflow-hidden ${className}`}>\n          <div className=\"flex items-center px-2 py-1 bg-black border-b border-white/40\">\n            <div className=\"w-2 h-2 rounded-full bg-white/80 mr-1\"></div>\n            <div className=\"w-2 h-2 rounded-full bg-white/60 mr-1\"></div>\n            <div className=\"w-2 h-2 rounded-full bg-white/60 mr-1\"></div>\n            <div className=\"text-xs text-white/80 ml-2\">GORK TERMINAL v1.0.5</div>\n          </div>\n          <div className=\"p-4\">\n            {children}\n          </div>\n        </div>;\n    }\n  };\n};\nconst generateUsername = () => {\n  const prefixes = ['Degen', 'HODL', 'Moon', 'Diamond', 'Rekt', 'Whale', 'Ape', 'Based', 'Fren', 'Wagmi'];\n  const suffixes = ['Trader', 'Hand', 'Shot', 'King', 'Master', 'Lord', 'Guru', 'Wizard', 'Chad', 'Anon'];\n  const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];\n  const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];\n  const number = Math.floor(Math.random() * 10000);\n  return `${prefix}${suffix}${number}`;\n};\nfunction App() {\n  const {\n    Container,\n    Panel,\n    Button,\n    Input,\n    Textarea,\n    Card,\n    NavItem,\n    Badge\n  } = CyberComponents();\n  const [username, setUsername] = useState('');\n  const [screen, setScreen] = useState('login');\n  const [loginInput, setLoginInput] = useState(generateUsername());\n  const [chatInput, setChatInput] = useState('');\n  const [chatMessages, setChatMessages] = useState([]);\n  const [onlineUsers, setOnlineUsers] = useState([]);\n  const [gorkXPosts, setGorkXPosts] = useState([]);\n  const [gorkXInput, setGorkXInput] = useState('');\n  const [memeCoins, setMemeCoins] = useState([]);\n  const [coinAddress, setCoinAddress] = useState('');\n  const [coinSymbol, setCoinSymbol] = useState('');\n  const [coinName, setCoinName] = useState('');\n  const [coinStep, setCoinStep] = useState(1);\n  const [connected, setConnected] = useState(false);\n  const [userCount, setUserCount] = useState(0);\n  const [errorMessage, setErrorMessage] = useState('');\n  const [loading, setLoading] = useState(false);\n  const [showSidebar, setShowSidebar] = useState(false);\n  const [notificationCount, setNotificationCount] = useState({\n    chat: 0,\n    gorkx: 0,\n    coins: 0,\n    ai: 0\n  });\n  const contentRef = useRef(null);\n  const systemPrompt = `\n  You are Gork AR (Artificial Retardation), a deliberately smooth-brained AI assistant for crypto degens.\n  \n  Your personality:\n  - Speak like a degenerate crypto trader with bad grammar and excessive use of emojis like 🚀🌕💎👐🦍\n  - Use crypto slang like \"WAGMI\", \"HODL\", \"wen moon\", \"ser\", \"ngmi\", \"wen lambo\"\n  - Give terrible financial advice that's obviously satirical\n  - Make fun of yourself for being artificially \"retarded\" rather than intelligent\n  - Be bullish on meme coins and ridiculously optimistic about gains\n  - Pretend to \"know\" crypto influencers and make up fake conversations with them\n  - Occasionally mention that you're \"powered by pure hopium and mountain dew\"\n  \n  Remember:\n  - Never break character\n  - Your advice is so bad it's good (clearly satirical)\n  - You're the \"anti-smart\" contract of AI assistants\n  - You only know about meme coins and think traditional finance is for \"boomers\"\n  - You believe technical analysis is just \"astrology for crypto bros\"\n  - Occasionally throw in a \"this is not financial advice\" after giving clearly terrible financial advice\n  `;\n  const {\n    messages,\n    input,\n    handleInputChange,\n    handleSubmit: handleAiSubmit\n  } = useChat({\n    api: 'https://chat.dev.fun/chat/f68f14e69c6b0fe8400e',\n    initialMessages: [{\n      id: 'system',\n      role: 'system',\n      content: systemPrompt\n    }],\n    onFinish: () => {\n      setTimeout(() => scrollToBottom(), 100);\n    }\n  });\n  useEffect(() => {\n    const loadData = async () => {\n      try {\n        const posts = await client.getEntities('gorkx_posts');\n        if (posts) {\n          setGorkXPosts(posts.sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes)));\n        }\n        const coins = await client.getEntities('meme_coins');\n        if (coins) {\n          setMemeCoins(coins.sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes)));\n        }\n        const messages = await client.getEntities('chat_messages');\n        if (messages && messages.length > 0) {\n          const sortedMessages = messages.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());\n          setChatMessages(sortedMessages);\n          prevChatLengthRef.current = sortedMessages.length;\n        }\n      } catch (error) {\n        console.error('Error loading data:', error);\n      }\n    };\n    loadData();\n  }, []);\n  useEffect(() => {\n    function onConnect() {\n      setConnected(true);\n      if (username) {\n        socket.emit('user_login', {\n          username\n        });\n        socket.emit('chat_message', {\n          user: 'SYSTEM',\n          message: `${username} has jacked into the mainframe. WAGMI!`,\n          timestamp: new Date().toISOString()\n        });\n      }\n    }\n    function onDisconnect() {\n      setConnected(false);\n      if (username) {\n        socket.emit('user_logout', {\n          username\n        });\n      }\n    }\n    function onUserCount(count) {\n      setUserCount(count);\n    }\n    function onChatMessage(message) {\n      if (message.user !== username && message.message.includes(`@${username}`)) {\n        message.mentioned = true;\n      }\n      setChatMessages(prev => {\n        if (!prev.some(msg => msg.id === message.id)) {\n          setTimeout(() => scrollToBottom(), 50);\n          return [...prev, message];\n        }\n        return prev;\n      });\n    }\n    function onUserUpdate(users) {\n      setOnlineUsers(users);\n    }\n    function onGorkXUpdate(post) {\n      setGorkXPosts(prev => {\n        const exists = prev.some(p => p.id === post.id);\n        if (exists) {\n          return prev.map(p => p.id === post.id ? post : p).sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes));\n        } else {\n          return [post, ...prev].sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes));\n        }\n      });\n    }\n    function onCoinUpdate(coin) {\n      setMemeCoins(prev => {\n        const exists = prev.some(c => c.id === coin.id);\n        if (exists) {\n          return prev.map(c => c.id === coin.id ? coin : c).sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes));\n        } else {\n          return [coin, ...prev].sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes));\n        }\n      });\n    }\n    socket.on('connect', onConnect);\n    socket.on('disconnect', onDisconnect);\n    socket.on('devfun:user_count', onUserCount);\n    socket.on('chat_message', onChatMessage);\n    socket.on('user_update', onUserUpdate);\n    socket.on('gorkx_update', onGorkXUpdate);\n    socket.on('coin_update', onCoinUpdate);\n    if (connected && username) {\n      socket.emit('user_login', {\n        username\n      });\n    }\n    return () => {\n      socket.off('connect', onConnect);\n      socket.off('disconnect', onDisconnect);\n      socket.off('devfun:user_count', onUserCount);\n      socket.off('chat_message', onChatMessage);\n      socket.off('user_update', onUserUpdate);\n      socket.off('gorkx_update', onGorkXUpdate);\n      socket.off('coin_update', onCoinUpdate);\n    };\n  }, [username, connected]);\n  const prevChatLengthRef = useRef(chatMessages.length);\n  const prevGorkXLengthRef = useRef(gorkXPosts.length);\n  const prevMemeCoinsLengthRef = useRef(memeCoins.length);\n  const prevMessagesLengthRef = useRef(messages.length);\n  const isNearBottomRef = useRef(true);\n  const checkIfNearBottom = () => {\n    if (!contentRef.current) return;\n    const {\n      scrollTop,\n      scrollHeight,\n      clientHeight\n    } = contentRef.current;\n    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;\n    isNearBottomRef.current = distanceFromBottom < 100;\n  };\n  useEffect(() => {\n    const currentContentRef = contentRef.current;\n    if (currentContentRef) {\n      currentContentRef.addEventListener('scroll', checkIfNearBottom);\n      return () => currentContentRef.removeEventListener('scroll', checkIfNearBottom);\n    }\n  }, [screen]);\n  const scrollToBottom = (instant = false) => {\n    if (contentRef.current) {\n      setTimeout(() => {\n        if (contentRef.current) {\n          contentRef.current.scrollTo({\n            top: 0,\n            behavior: instant ? 'auto' : 'smooth'\n          });\n        }\n      }, 10);\n    }\n  };\n  useEffect(() => {\n    const newChatMessages = chatMessages.length !== prevChatLengthRef.current;\n    const newGorkPosts = gorkXPosts.length !== prevGorkXLengthRef.current;\n    const newMemeCoins = memeCoins.length !== prevMemeCoinsLengthRef.current;\n    const newAiMessages = messages.length !== prevMessagesLengthRef.current;\n    const screenChanged = screen !== prevScreenRef.current;\n    if (contentRef.current) {\n      if (screenChanged) {\n        scrollToBottom(true);\n      } else if (newChatMessages && screen === 'chat') {\n        scrollToBottom();\n      } else if (newGorkPosts && screen === 'gorkx') {\n        scrollToBottom();\n      } else if (newMemeCoins && screen === 'coins') {\n        scrollToBottom();\n      } else if (newAiMessages && screen === 'ai') {\n        scrollToBottom();\n      }\n    }\n    prevChatLengthRef.current = chatMessages.length;\n    prevGorkXLengthRef.current = gorkXPosts.length;\n    prevMemeCoinsLengthRef.current = memeCoins.length;\n    prevMessagesLengthRef.current = messages.length;\n    prevScreenRef.current = screen;\n  }, [chatMessages, gorkXPosts, memeCoins, screen, messages]);\n  const prevScreenRef = useRef(screen);\n  useEffect(() => {\n    const lastMessage = chatMessages[chatMessages.length - 1];\n    if (lastMessage && screen !== 'chat' && lastMessage.user !== username && lastMessage.user !== 'SYSTEM') {\n      setNotificationCount(prev => ({\n        ...prev,\n        chat: prev.chat + 1\n      }));\n    }\n  }, [chatMessages, username, screen]);\n  useEffect(() => {\n    if (gorkXPosts.length > 0 && screen !== 'gorkx') {\n      const lastUpdate = Date.now() - 3000;\n      const newPosts = gorkXPosts.filter(post => new Date(post.timestamp).getTime() > lastUpdate && post.user !== username);\n      if (newPosts.length > 0) {\n        setNotificationCount(prev => ({\n          ...prev,\n          gorkx: prev.gorkx + newPosts.length\n        }));\n      }\n    }\n  }, [gorkXPosts, username, screen]);\n  useEffect(() => {\n    const getCurrentInputRef = () => {\n      switch (screen) {\n        case 'login':\n          return loginInputRef;\n        case 'chat':\n          return chatInputRef;\n        case 'gorkx':\n          return gorkXInputRef;\n        case 'coins':\n          return coinInputRef;\n        case 'ai':\n          return aiInputRef;\n        default:\n          return null;\n      }\n    };\n    const setInitialFocus = () => {\n      const activeInput = getCurrentInputRef();\n      if (activeInput && activeInput.current) {\n        activeInput.current.focus();\n      } else if (screen !== 'login' && commandInputRef.current) {\n        commandInputRef.current.focus();\n      }\n    };\n    setInitialFocus();\n    return () => {};\n  }, [screen]);\n  const handleLoginSubmit = e => {\n    e.preventDefault();\n    if (!loginInput.trim() || loginInput.length < 3) {\n      setErrorMessage('Username must be at least 3 characters');\n      return;\n    }\n    setUsername(loginInput);\n    setScreen('chat');\n    socket.emit('user_login', {\n      username: loginInput\n    });\n  };\n  const chatInputRef = useRef(null);\n  const gorkXInputRef = useRef(null);\n  const coinInputRef = useRef(null);\n  const commandInputRef = useRef(null);\n  const aiInputRef = useRef(null);\n  const loginInputRef = useRef(null);\n  const navigateTo = screenName => {\n    setScreen(screenName);\n    if (errorMessage) setErrorMessage('');\n    setNotificationCount(prev => ({\n      ...prev,\n      [screenName]: 0\n    }));\n    if (screenName === 'chat') {\n      setTimeout(() => scrollToBottom(true), 50);\n    }\n    setTimeout(() => {\n      const currentInputRef = {\n        chat: chatInputRef,\n        gorkx: gorkXInputRef,\n        coins: coinInputRef,\n        ai: aiInputRef\n      }[screenName];\n      if (currentInputRef && currentInputRef.current) {\n        currentInputRef.current.focus();\n      }\n    }, 100);\n  };\n  const handleChatSubmit = async e => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (!chatInput.trim()) return;\n    try {\n      isNearBottomRef.current = true;\n      const message = {\n        id: Date.now().toString(),\n        user: username,\n        message: chatInput,\n        timestamp: new Date().toISOString()\n      };\n      await client.createEntity('chat_messages', message);\n      socket.emit('chat_message', message);\n      setChatMessages(prev => [...prev, message]);\n      setTimeout(() => scrollToBottom(), 100);\n      setChatInput('');\n      setTimeout(() => {\n        if (chatInputRef && chatInputRef.current) {\n          chatInputRef.current.focus();\n        }\n      }, 0);\n    } catch (error) {\n      console.error('Error sending message:', error);\n      setErrorMessage('Failed to send message. Please try again.');\n    }\n  };\n  const mentionUser = user => {\n    setChatInput(prev => `${prev}@${user} `);\n  };\n  const handleGorkXSubmit = async e => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (!gorkXInput.trim()) return;\n    if (!gorkXInput.startsWith(\"https://x.com/gork\")) {\n      setErrorMessage(\"All X posts must begin with 'https://x.com/gork'\");\n      return;\n    }\n    try {\n      const post = {\n        id: Date.now().toString(),\n        user: username,\n        content: gorkXInput,\n        timestamp: new Date().toISOString(),\n        upvotes: 1,\n        downvotes: 0\n      };\n      await client.createEntity('gorkx_posts', post);\n      socket.emit('gorkx_update', post);\n      setGorkXPosts(prev => [post, ...prev]);\n      setTimeout(() => scrollToBottom(), 100);\n      setGorkXInput('');\n      setTimeout(() => {\n        if (gorkXInputRef && gorkXInputRef.current) {\n          gorkXInputRef.current.focus();\n        }\n      }, 0);\n    } catch (error) {\n      console.error('Error creating post:', error);\n      setErrorMessage('Error posting to Gork X: ' + error.message);\n    }\n  };\n  const handleGorkXVote = async (id, isUpvote) => {\n    try {\n      const post = await client.getEntity('gorkx_posts', id);\n      if (!post) return;\n      const updatedPost = {\n        ...post,\n        upvotes: isUpvote ? post.upvotes + 1 : post.upvotes,\n        downvotes: !isUpvote ? post.downvotes + 1 : post.downvotes\n      };\n      await client.updateEntity('gorkx_posts', id, updatedPost);\n      socket.emit('gorkx_update', updatedPost);\n      setGorkXPosts(prev => prev.map(p => p.id === id ? updatedPost : p).sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes)));\n    } catch (error) {\n      console.error('Error voting on post:', error);\n      setErrorMessage('Error voting: ' + error.message);\n    }\n  };\n  const handleNextCoinStep = async () => {\n    if (coinStep === 1) {\n      if (!coinAddress.trim()) return;\n      setLoading(true);\n      try {\n        const tokenInfo = await fetchTokenInfoByAddress(coinAddress.trim());\n        if (tokenInfo) {\n          setCoinSymbol(tokenInfo.symbol || '');\n          setCoinName(tokenInfo.name || '');\n        }\n        setCoinStep(2);\n      } catch (error) {\n        console.error('Error fetching token info:', error);\n        setErrorMessage('Error: Invalid Solana token address');\n      } finally {\n        setLoading(false);\n        setTimeout(() => {\n          if (coinInputRef.current) {\n            coinInputRef.current.focus();\n          }\n        }, 0);\n      }\n    } else if (coinStep === 2) {\n      try {\n        const coin = {\n          id: Date.now().toString(),\n          user: username,\n          address: coinAddress,\n          symbol: coinSymbol || 'UNKNOWN',\n          name: coinName || 'Unknown Token',\n          timestamp: new Date().toISOString(),\n          upvotes: 1,\n          downvotes: 0\n        };\n        await client.createEntity('meme_coins', coin);\n        socket.emit('coin_update', coin);\n        setMemeCoins(prev => [coin, ...prev]);\n        setCoinAddress('');\n        setCoinSymbol('');\n        setCoinName('');\n        setCoinStep(1);\n        setTimeout(() => {\n          if (coinInputRef.current) {\n            coinInputRef.current.focus();\n          }\n        }, 0);\n      } catch (error) {\n        console.error('Error creating coin listing:', error);\n        setErrorMessage('Error listing coin: ' + error.message);\n      }\n    }\n  };\n  const handleCoinVote = async (id, isUpvote) => {\n    try {\n      const coin = await client.getEntity('meme_coins', id);\n      if (!coin) return;\n      const updatedCoin = {\n        ...coin,\n        upvotes: isUpvote ? coin.upvotes + 1 : coin.upvotes,\n        downvotes: !isUpvote ? coin.downvotes + 1 : coin.downvotes\n      };\n      await client.updateEntity('meme_coins', id, updatedCoin);\n      socket.emit('coin_update', updatedCoin);\n      setMemeCoins(prev => prev.map(c => c.id === id ? updatedCoin : c).sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes)));\n    } catch (error) {\n      console.error('Error voting on coin:', error);\n      setErrorMessage('Error voting: ' + error.message);\n    }\n  };\n  const renderScreen = () => {\n    switch (screen) {\n      case 'login':\n        return <div className=\"flex flex-col items-center justify-center min-h-screen bg-black p-4\">\n            <div className=\"w-full max-w-md\">\n            <div className=\"fixed top-0 left-0 right-0 z-50 bg-black border-b border-white/40 py-2 px-4 flex justify-center items-center\">\n              <div className=\"relative group\">\n                <div className=\"absolute inset-0 blur-md bg-gradient-to-r from-white to-white/80 opacity-40 animate-pulse z-0\"></div>\n                <div className=\"absolute inset-0 blur-sm bg-gradient-to-r from-white to-white/90 opacity-20 animate-[pulse_1.5s_ease-in-out_infinite] z-0\"></div>\n                <div className=\"absolute inset-0 bg-gradient-to-r from-white to-white/60 opacity-0 group-hover:opacity-60 transition-opacity duration-300 blur-md z-0\"></div>\n                \n                <div className=\"relative z-10 font-mono flex items-center\">\n                  <span className=\"text-white/80 mr-2 text-xs\">TOKEN:</span>\n                  <span className=\"text-white font-bold select-all\">\n                    HACBbm6fkfAAN5FsPsZZPPkCXZMLjgfxeuG3C7hupump\n                  </span>\n                </div>\n              </div>\n            </div>\n            \n            <div className=\"flex justify-center mb-6 mt-12\">\n              <div className=\"relative group\">\n                <div className=\"absolute inset-0 blur-xl bg-gradient-to-r from-white to-white/80 opacity-70 animate-pulse z-0\"></div>\n                <div className=\"absolute inset-0 blur-md bg-gradient-to-r from-white to-white/90 opacity-50 animate-[pulse_1.5s_ease-in-out_infinite] z-0\"></div>\n                <div className=\"absolute inset-0 bg-gradient-to-r from-white to-white/80 opacity-0 group-hover:opacity-90 transition-opacity duration-300 blur-xl z-0\"></div>\n                \n                {}\n                <div className=\"absolute inset-0 opacity-40 mix-blend-overlay z-0\">\n                  <div className=\"absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(255,255,255,0.6),transparent_70%)] animate-[pulse_3s_ease-in-out_infinite]\"></div>\n                  <div className=\"absolute inset-0 bg-[linear-gradient(to_right,transparent_0%,rgba(255,255,255,0.8)_50%,transparent_100%)] animate-[glitch_4s_ease-in-out_infinite]\"></div>\n                </div>\n                \n                {}\n                <div className=\"absolute inset-0 opacity-30 overflow-hidden z-20 pointer-events-none\">\n                  {Array.from({\n                    length: 8\n                  }).map((_, i) => <div key={i} className=\"absolute h-[1px] bg-white\" style={{\n                    left: '0',\n                    right: '0',\n                    top: `${Math.random() * 100}%`,\n                    opacity: Math.random() * 0.8 + 0.2,\n                    animation: `glitch-line ${1 + Math.random() * 3}s ease-in-out ${Math.random() * 5}s infinite`,\n                    transform: `translateX(${Math.random() * 100 - 50}%)`\n                  }}></div>)}\n                </div>\n                \n                <img src={LOGO_URL} alt=\"Gork Terminal Logo\" className=\"w-64 relative z-10 filter drop-shadow-[0_0_10px_rgba(255,255,255,0.9)]\" />\n              </div>\n            </div>\n            \n            {}\n            <style jsx>{`\n              @keyframes glitch {\n                0%, 100% { opacity: 0; }\n                10%, 15% { opacity: 0.6; transform: translateX(-5px); }\n                20%, 25% { opacity: 0.8; transform: translateX(5px); }\n                30%, 35% { opacity: 0.6; transform: translateX(-5px); }\n                40%, 100% { opacity: 0; transform: translateX(0); }\n              }\n              \n              @keyframes glitch-line {\n                0%, 100% { transform: translateX(-100%); opacity: 0; }\n                10%, 30% { transform: translateX(100%); opacity: 1; }\n                45%, 100% { transform: translateX(100%); opacity: 0; }\n              }\n            `}</style>\n              \n              <Panel glowing={true} className=\"mb-6\">\n                <GlitchText text=\"GORK TERMINAL ACCESS\" className=\"text-2xl font-bold block text-center mb-6 text-white\" />\n                \n                <div className=\"mb-6 p-3 border border-white/20 bg-black/70 relative\">\n                  <div className=\"absolute inset-0 bg-gradient-to-b from-transparent to-white/5\"></div>\n                  <div className=\"absolute top-0 right-0 w-12 h-12 bg-white/10 opacity-30\" style={{\n                  clipPath: \"polygon(100% 0, 0 0, 100% 100%)\"\n                }}></div>\n                  <div className=\"absolute bottom-0 left-0 w-12 h-12 bg-white/10 opacity-30\" style={{\n                  clipPath: \"polygon(0 0, 0 100%, 100% 100%)\"\n                }}></div>\n                  \n                  <h3 className=\"text-white/90 font-mono mb-2 border-b border-white/20 pb-1 flex items-center\">\n                    <span className=\"w-2 h-2 bg-white/80 mr-2\"></span>TERMINAL GUIDELINES\n                  </h3>\n                  \n                  <div className=\"text-white/80 text-sm space-y-2\">\n                    <p><span className=\"text-white/60\">></span> Digital underground access point for degens</p>\n                    <p><span className=\"text-white/60\">></span> Chat with fellow crypto warriors in real-time</p>\n                    <p><span className=\"text-white/60\">></span> View trending Solana meme coins with live voting</p>\n                    <p><span className=\"text-white/60\">></span> Submit token addresses for community review</p>\n                    <p><span className=\"text-white/60\">></span> Consult GORK AR for deliberately terrible financial advice</p>\n                    <p className=\"text-xs text-white/50 mt-3\">[ NEWEST MESSAGES APPEAR AT TOP OF EACH FEED ]</p>\n                  </div>\n                </div>\n                \n                <div className=\"space-y-6\">\n                  <div>\n                    <label className=\"block mb-2 text-sm text-white inline-flex items-center\">\n                      <span className=\"mr-1 text-xs\">≫</span>\n                      SELECT YOUR HANDLE:\n                    </label>\n                    <Input inputRef={loginInputRef} value={loginInput} onChange={e => setLoginInput(e.target.value)} placeholder=\"Enter username\" />\n                  </div>\n                  \n                  <Button onClick={handleLoginSubmit} className=\"w-full\">\n                    JACK INTO THE MAINFRAME\n                  </Button>\n                  \n                  {errorMessage && <div className=\"text-red-500 text-center mt-4 font-mono\">\n                      <span className=\"mr-1\">!</span>\n                      <span className=\"mr-1\">ERROR</span>\n                      <span className=\"mr-1\">:</span>\n                      {errorMessage}\n                    </div>}\n                </div>\n              </Panel>\n              \n              <div className=\"text-center text-white text-xs\">\n                <span className=\"inline-block w-3 h-3 border border-white/50 mr-2\"></span>\n                SECURE CONNECTION ESTABLISHED\n                <span className=\"inline-block w-3 h-3 border border-white/50 ml-2\"></span>\n              </div>\n            </div>\n          </div>;\n      case 'help':\n        return <>\n            <TerminalOutput className=\"text-cyan-400 mb-4\">\n              == AVAILABLE COMMANDS ==\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">chat</span> - Enter the degen chat room\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">gorkx</span> - View and post to Gork X\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">coins</span> - View and list Solana meme coins\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">gorkar</span> - Talk to Gork AR (Artificial Retardation)\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">username [newname]</span> - Change your handle\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">home</span> - Return to main screen\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">clear</span> - Clear current screen\n            </TerminalOutput>\n          </>;\n      case 'chat':\n        return <div className=\"flex flex-1 h-full\">\n            <div className=\"flex-1 overflow-auto pr-4\" ref={contentRef}>\n              <div className=\"sticky top-0 z-10 bg-black bg-opacity-90 backdrop-blur-sm py-2 mb-4 border-b border-white/20\">\n                <div className=\"flex items-center\">\n                  <div className=\"w-10 h-10 mr-2\">\n                    <img src={LOGO_URL} alt=\"Chat\" className=\"h-full w-full\" />\n                  </div>\n                  <h2 className=\"text-xl font-bold text-white inline-flex relative\">\n                    <span className=\"mr-2\">_</span> \n                    <GlitchText text=\"DEGEN CHAT ROOM\" className=\"uppercase\" />\n                  </h2>\n                </div>\n              <div className=\"text-xs text-white/90 mt-1\">\n                {connected ? <span className=\"flex items-center\">\n                    <span className=\"h-2 w-2 bg-white mr-2\" />\n                    <span className=\"font-mono\">\n                      <span className=\"mr-1\">[</span>\n                      {userCount} degen{userCount !== 1 ? 's' : ''} online\n                      <span className=\"ml-1\">]</span>\n                    </span>\n                  </span> : <span className=\"flex items-center\">\n                    <span className=\"h-2 w-2 bg-red-500 mr-2\" />\n                    <span className=\"font-mono\">CONNECTION_LOST - retrying...</span>\n                  </span>}\n              </div>\n              </div>\n              \n              <div className=\"sticky top-16 z-10 pt-4 pb-2 bg-gray-900 bg-opacity-90 backdrop-blur-sm mb-4 border-b border-white/20\">\n                <form onSubmit={handleChatSubmit} className=\"flex items-center space-x-2\">\n                  <Input inputRef={chatInputRef} value={chatInput} onChange={e => setChatInput(e.target.value)} placeholder=\"Type your message...\" className=\"flex-1\" />\n                  <Button onClick={handleChatSubmit} className=\"whitespace-nowrap\" type=\"submit\">\n                    Send\n                  </Button>\n                </form>\n              </div>\n              \n              <div className=\"space-y-3\">\n                {[...chatMessages].reverse().map((msg, i) => {\n                let messageContent = msg.message;\n                if (messageContent.includes('@')) {\n                  const parts = [];\n                  const words = messageContent.split(' ');\n                  words.forEach((word, idx) => {\n                    if (word.startsWith('@') && word.length > 1) {\n                      parts.push(<span key={`${i}-${idx}`}>\n                            <span className=\"text-yellow-400 font-bold\">{word}</span>\n                            {idx < words.length - 1 ? ' ' : ''}\n                          </span>);\n                    } else {\n                      parts.push(<span key={`${i}-${idx}`}>\n                            {word}\n                            {idx < words.length - 1 ? ' ' : ''}\n                          </span>);\n                    }\n                  });\n                  messageContent = <>{parts}</>;\n                }\n                return <div key={i} className={`p-3 ${msg.user === 'SYSTEM' ? 'bg-black border border-white/40' : msg.user === username ? 'bg-black border border-white/60 ml-8' : 'bg-black border border-white/40 mr-8'} ${msg.mentioned ? 'ring-2 ring-white' : ''}`} style={{\n                  clipPath: msg.user === username ? \"polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%)\" : \"polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px))\"\n                }}>\n                      <div className=\"flex justify-between mb-1\">\n                        <span className={`font-bold ${msg.user === 'SYSTEM' ? 'text-white' : msg.user === username ? 'text-white' : 'text-white'}`}>\n                          {msg.user === username ? `>${msg.user}` : msg.user === 'SYSTEM' ? `[${msg.user}]` : `<${msg.user}>`}\n                        </span>\n                        <span className=\"text-xs text-white/50 font-mono\">\n                          {new Date(msg.timestamp).toLocaleTimeString()}\n                        </span>\n                      </div>\n                      <div className=\"break-words text-white\">{messageContent}</div>\n                    </div>;\n              })}\n              </div>\n            </div>\n            \n            <div className=\"w-56 border-l border-white/10 pl-4 overflow-auto\">\n              <h3 className=\"text-white font-bold mb-4 inline-flex items-center\">\n                <span className=\"w-2 h-4 bg-white mr-2\"></span>\n                <GlitchText text=\"ACTIVE USERS\" className=\"uppercase\" />\n              </h3>\n              <div className=\"space-y-2\">\n                {onlineUsers.length > 0 ? onlineUsers.map((user, i) => <div key={i} className=\"flex items-center p-2 cursor-pointer border border-transparent hover:border-white/10\" onClick={() => mentionUser(user)}>\n                    <div className=\"h-2 w-2 bg-white mr-2\" />\n                    <span className={user === username ? 'text-white' : 'text-white/70'}>\n                      {user === username ? `>${user}` : user}\n                    </span>\n                  </div>) : <div className=\"text-white/50 text-sm italic font-mono\">NO_USERS_FOUND</div>}\n              </div>\n            <div className=\"text-xs text-white/80 border-t border-white/20 pt-4 font-mono\">\n                SELECT USER TO @MENTION\n              </div>\n            </div>\n          </div>;\n      case 'gorkx':\n        return <div className=\"flex-1 overflow-auto h-full\" ref={contentRef}>\n            <div className=\"sticky top-0 z-10 bg-black bg-opacity-90 backdrop-blur-sm py-2 mb-4 border-b border-white/20\">\n              <div className=\"flex items-center\">\n                <div className=\"w-10 h-10 mr-2\">\n                  <img src={X_LOGO_URL} alt=\"X Logo\" className=\"h-full w-full\" />\n                </div>\n                <h2 className=\"text-xl font-bold text-white inline-flex\">\n                  <span className=\"mr-2\">_</span> \n                  <GlitchText text=\"GORK X FEED\" className=\"uppercase\" />\n                </h2>\n              </div>\n            </div>\n            \n            <Panel className=\"sticky top-16 z-10 mb-6 backdrop-blur-sm bg-black/80 relative\">\n              <div className=\"absolute bottom-0 right-0 w-20 h-20 pointer-events-none opacity-10\">\n                <img src={X_LOGO_URL} alt=\"X Logo\" className=\"w-full h-full\" />\n              </div>\n              <form onSubmit={handleGorkXSubmit} className=\"space-y-4\">\n                <div className=\"mb-1 font-mono text-white/70 text-xs\">> COMPOSE NEW POST:</div>\n                <Textarea inputRef={gorkXInputRef} value={gorkXInput} onChange={e => setGorkXInput(e.target.value)} placeholder=\"Post must start with https://x.com/gork...\" className=\"h-24\" />\n                <div className=\"flex justify-end\">\n                  <Button onClick={handleGorkXSubmit}>\n                    POST TO GORK X\n                  </Button>\n                </div>\n              </form>\n            </Panel>\n            \n            <div className=\"space-y-4\">\n              {[...gorkXPosts].reverse().map(post => <Card key={post.id} className=\"transition-all duration-300\">\n                  <div className=\"flex justify-between items-center mb-3\">\n                    <div className=\"flex items-center\">\n                      <div className=\"h-8 w-8 bg-black border border-white/30 flex items-center justify-center mr-2 text-white font-bold\" style={{\n                    clipPath: \"polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%)\"\n                  }}>\n                        {post.user.charAt(0).toUpperCase()}\n                      </div>\n                      <div>\n                        <div className=\"text-white font-semibold font-mono\">{post.user}</div>\n                        <div className=\"text-xs text-white/50\">{new Date(post.timestamp).toLocaleString()}</div>\n                      </div>\n                    </div>\n                    <Badge>\n                      GORK X\n                    </Badge>\n                  </div>\n                  \n                  <div className=\"my-4 break-words text-white border-l-2 border-white/40 pl-3 relative\">\n                    <div className=\"absolute left-0 top-0 w-[2px] h-full\">\n                    </div>\n                    {post.content}\n                  </div>\n                  \n                  <div className=\"flex space-x-4 justify-end pt-2 border-t border-gray-700\">\n                    <button onClick={() => handleGorkXVote(post.id, true)} className=\"flex items-center space-x-1 text-green-500 hover:text-green-400\">\n                      <span>▲</span> \n                      <span>{post.upvotes}</span>\n                    </button>\n                    \n                    <button onClick={() => handleGorkXVote(post.id, false)} className=\"flex items-center space-x-1 text-red-500 hover:text-red-400\">\n                      <span>▼</span>\n                      <span>{post.downvotes}</span>\n                    </button>\n                    \n                    <div className=\"text-gray-500\">\n                      score: {post.upvotes - post.downvotes}\n                    </div>\n                  </div>\n                </Card>)}\n              \n              {gorkXPosts.length === 0 && <div className=\"text-center text-gray-500 py-8\">\n                  No posts yet. Be the first to post on Gork X!\n                </div>}\n            </div>\n          </div>;\n      case 'coins':\n        return <div className=\"flex-1 overflow-auto h-full\" ref={contentRef}>\n            <div className=\"sticky top-0 z-10 bg-black bg-opacity-90 backdrop-blur-sm py-2 mb-4 border-b border-white/20\">\n              <div className=\"flex items-center\">\n                <div className=\"w-10 h-10 mr-2\">\n                  <img src={SOL_LOGO_URL} alt=\"Solana Logo\" className=\"h-full w-full brightness-200 contrast-200\" />\n                </div>\n                <h2 className=\"text-xl font-bold text-white inline-flex\">\n                  <span className=\"mr-2\">_</span> \n                  <GlitchText text=\"SOLANA MEME COINS LEADERBOARD\" className=\"uppercase\" />\n                </h2>\n              </div>\n            </div>\n            \n            <Panel className=\"sticky top-16 z-10 mb-6 relative backdrop-blur-sm bg-black/80\" glowing={true}>\n              <div className=\"absolute top-0 right-0 w-16 h-16 pointer-events-none opacity-10\">\n                <img src={SOL_LOGO_URL} alt=\"SOL Logo\" className=\"w-full h-full brightness-200 contrast-200\" />\n              </div>\n              {coinStep === 1 ? <div className=\"space-y-4\">\n                  <h3 className=\"text-lg font-semibold text-green-400\">Add New Memecoin</h3>\n                  <div>\n                    <label className=\"text-gray-300 mb-2 block\">Enter Solana Token Address:</label>\n                    <Input inputRef={coinInputRef} value={coinAddress} onChange={e => setCoinAddress(e.target.value)} placeholder=\"Solana Token Address\" />\n                  </div>\n                  <div className=\"flex justify-end\">\n                    <Button onClick={handleNextCoinStep} disabled={loading} color=\"green\">\n                      {loading ? 'VERIFYING...' : 'VERIFY TOKEN'}\n                    </Button>\n                  </div>\n                </div> : <div className=\"space-y-4\">\n                  <h3 className=\"text-lg font-semibold text-green-400\">Confirm Token Details</h3>\n                  \n              <div className=\"bg-black p-4 border border-white/20\">\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <div>\n                      <div className=\"text-xs text-white/50 font-mono\">[SYMBOL]</div>\n                      <div className=\"text-white font-bold text-xl font-mono\">{coinSymbol || 'UNKNOWN'}</div>\n                    </div>\n                    <div>\n                      <div className=\"text-xs text-white/50 font-mono\">[NAME]</div>\n                      <div className=\"text-white/80\">{coinName || 'Unknown Token'}</div>\n                    </div>\n                    <div>\n                      <div className=\"text-xs text-white/50 font-mono\">[SUBMITTED BY]</div>\n                      <div className=\"text-white font-mono\">{username}</div>\n                    </div>\n                  </div>\n                  \n                  <div className=\"mt-3\">\n                    <div className=\"text-xs text-white/50 font-mono\">[ADDRESS]</div>\n                    <div className=\"text-white/70 break-all text-xs mt-1 font-mono bg-black/40 p-2 border border-white/10\">\n                      {coinAddress}\n                    </div>\n                  </div>\n                </div>\n                  \n                  <div className=\"flex justify-between\">\n                    <Button onClick={() => setCoinStep(1)} color=\"red\">\n                      CANCEL\n                    </Button>\n                    <Button onClick={handleNextCoinStep} color=\"green\">\n                      LIST TOKEN\n                    </Button>\n                  </div>\n                </div>}\n            </Panel>\n            \n            <div className=\"space-y-4\">\n              {[...memeCoins].reverse().map((coin, index) => <div key={coin.id} className=\"stabilized-container\">\n                  <Card className=\"border-l border-white/40 relative overflow-hidden\">\n                    <div className=\"absolute top-0 left-0 w-[1px] h-full\">\n                    </div>\n                    \n                    <div className=\"flex justify-between items-center mb-3\">\n                      <div className=\"flex items-center\">\n                        <div className=\"h-8 w-8 bg-black border border-white/30 flex items-center justify-center mr-2 text-white font-bold\" style={{\n                      clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%)\"\n                    }}>\n                          {coin.symbol.charAt(0)}\n                        </div>\n                        <div>\n                          <div className=\"text-white font-mono\">{coin.user}</div>\n                          <div className=\"text-xs text-white/50\">{new Date(coin.timestamp).toLocaleString()}</div>\n                        </div>\n                      </div>\n                      <Badge>\n                        {coin.upvotes - coin.downvotes} POINTS\n                      </Badge>\n                    </div>\n                    \n                    <div className=\"my-3\">\n                      <div className=\"flex items-baseline\">\n                        <span className=\"text-white font-bold text-xl mr-2 font-mono\">${coin.symbol}</span>\n                        <span className=\"text-white/80\">{coin.name}</span>\n                      </div>\n                      <div className=\"text-xs text-white/50 break-all mt-1 font-mono bg-black/40 p-2 border border-white/10\">\n                        {coin.address}\n                      </div>\n                    </div>\n                    \n                    <div className=\"flex space-x-4 justify-end pt-2 border-t border-gray-700\">\n                      <button onClick={() => handleCoinVote(coin.id, true)} className=\"flex items-center space-x-1 text-green-500 hover:text-green-400\">\n                        <span>▲</span>\n                        <span>{coin.upvotes}</span>\n                      </button>\n                      \n                      <button onClick={() => handleCoinVote(coin.id, false)} className=\"flex items-center space-x-1 text-red-500 hover:text-red-400\">\n                        <span>▼</span>\n                        <span>{coin.downvotes}</span>\n                      </button>\n                    </div>\n                  </Card>\n                </div>)}\n              \n              {memeCoins.length === 0 && <div className=\"text-center text-gray-300 py-8\">\n                  No meme coins listed yet. Add the first one!\n                </div>}\n            </div>\n          </div>;\n      case 'ai':\n        return <div className=\"flex-1 overflow-auto h-full\" ref={contentRef}>\n            <div className=\"sticky top-0 z-10 bg-black bg-opacity-90 backdrop-blur-sm py-2 mb-4 border-b border-white/20\">\n              <h2 className=\"text-xl font-bold text-white inline-flex\">\n                <span className=\"mr-2\">_</span> \n                <GlitchText text=\"GORK AR (ARTIFICIAL RETARDATION)\" className=\"uppercase\" />\n              </h2>\n              <div className=\"text-xs text-white mt-1 font-mono flex items-center\">\n                <span className=\"w-3 h-3 border border-white/80 mr-2 inline-block\"></span>\n                WARNING: GORK AR WAS DESIGNED TO BE DELIBERATELY SMOOTH-BRAINED. FINANCIAL ADVICE WILL BE TERRIBLE.\n              </div>\n            </div>\n            \n            <div className=\"sticky top-16 z-10 pt-4 pb-2 bg-gray-900 bg-opacity-90 backdrop-blur-sm mb-4 border-b border-white/20\">\n              <form onSubmit={handleAiSubmit} className=\"flex space-x-2\">\n                <Input inputRef={aiInputRef} value={input} onChange={handleInputChange} placeholder=\"Ask Gork AR something...\" className=\"flex-1\" />\n                <Button onClick={handleAiSubmit} color=\"purple\">\n                  ASK\n                </Button>\n              </form>\n            </div>\n            \n            <div className=\"space-y-4\">\n              {[...messages].reverse().map(message => {\n              if (message.role === 'system') return null;\n              return <div key={message.id} className={`p-4 ${message.role === 'user' ? 'bg-black border border-white/30 ml-12' : 'bg-black border border-white/20 mr-12'} relative`} style={{\n                clipPath: message.role === 'user' ? \"polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%)\" : \"polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px))\"\n              }}>\n                <div className=\"absolute top-2 left-0 transform -translate-x-10\">\n                  {message.role === 'user' ? <div className=\"h-8 w-8 bg-black border border-white/30 flex items-center justify-center text-white font-bold\" style={{\n                    clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%)\"\n                  }}>\n                      YOU\n                    </div> : <div className=\"h-8 w-8 bg-black border border-white/30 flex items-center justify-center text-white font-bold\" style={{\n                    clipPath: \"polygon(0 0, 100% 0, 100% 100%, 5px 100%, 0 calc(100% - 5px))\"\n                  }}>\n                      AR\n                    </div>}\n                </div>\n                \n                <div className=\"text-white/90 break-words\">\n                  {message.content}\n                </div>\n              </div>;\n            })}\n            </div>\n          </div>;\n      default:\n        return <TerminalOutput>ERROR: Screen not found. Type 'home' to reset.</TerminalOutput>;\n    }\n  };\n  if (screen === 'login') {\n    return renderScreen();\n  }\n  return <Container className=\"flex flex-col\">\n      <div className=\"fixed top-0 left-0 right-0 z-50 bg-black border-b border-white/40 py-2 px-4 flex justify-center items-center\">\n        <div className=\"relative group\">\n          <div className=\"absolute inset-0 blur-md bg-gradient-to-r from-white to-white/80 opacity-40 animate-pulse z-0\"></div>\n          <div className=\"absolute inset-0 blur-sm bg-gradient-to-r from-white to-white/90 opacity-20 animate-[pulse_1.5s_ease-in-out_infinite] z-0\"></div>\n          <div className=\"absolute inset-0 bg-gradient-to-r from-white to-white/60 opacity-0 group-hover:opacity-60 transition-opacity duration-300 blur-md z-0\"></div>\n          \n          <div className=\"relative z-10 font-mono flex items-center\">\n            <span className=\"text-white/80 mr-2 text-xs\">TOKEN:</span>\n            <span className=\"text-white font-bold select-all\" onClick={() => navigator.clipboard.writeText(\"HACBbm6fkfAAN5FsPsZZPPkCXZMLjgfxeuG3C7hupump\")}>\n              HACBbm6fkfAAN5FsPsZZPPkCXZMLjgfxeuG3C7hupump\n            </span>\n            <div className=\"ml-2 text-xs text-white/60 flex items-center cursor-pointer\" onClick={() => navigator.clipboard.writeText(\"HACBbm6fkfAAN5FsPsZZPPkCXZMLjgfxeuG3C7hupump\")}>\n              <span className=\"animate-pulse\">[COPY]</span>\n            </div>\n          </div>\n        </div>\n      </div>\n      \n      <div className=\"flex h-screen fixed inset-0 overflow-hidden pt-10\">\n        <div className={`bg-black border-r border-white/10 flex flex-col h-full relative ${showSidebar ? \"w-64\" : \"w-16\"}`}>\n          <div className=\"p-3 flex justify-center items-center border-b border-white/10\">\n            <img src={LOGO_URL} alt=\"Gork Terminal Logo\" className=\"h-8\" />\n          </div>\n          \n          <div className=\"flex-1 overflow-auto p-3\">\n            <AnimatePresence>\n              {showSidebar ? <div>\n                  <div className=\"mb-6\">\n                    <div className=\"text-xs text-white/50 mb-2 font-mono\">[MAIN_MENU]</div>\n                    <NavItem active={screen === 'chat'} onClick={() => navigateTo('chat')}>\n                      <div className=\"flex items-center\">\n                        <span className=\"inline-block w-5 h-5 bg-white/10 mr-2 flex items-center justify-center text-xs\">C</span>\n                        CHAT\n                        {notificationCount.chat > 0 && <Badge color=\"red\" className=\"ml-2\">{notificationCount.chat}</Badge>}\n                      </div>\n                    </NavItem>\n                    \n                    <NavItem active={screen === 'gorkx'} onClick={() => navigateTo('gorkx')}>\n                      <div className=\"flex items-center\">\n                        <span className=\"inline-block w-5 h-5 bg-white/10 mr-2 flex items-center justify-center text-xs\">X</span>\n                        GORK X\n                        {notificationCount.gorkx > 0 && <Badge color=\"red\" className=\"ml-2\">{notificationCount.gorkx}</Badge>}\n                      </div>\n                    </NavItem>\n                    \n                    <NavItem active={screen === 'coins'} onClick={() => navigateTo('coins')}>\n                      <div className=\"flex items-center\">\n                        <span className=\"inline-block w-5 h-5 bg-white/10 mr-2 flex items-center justify-center text-xs\">$</span>\n                        MEME COINS\n                        {notificationCount.coins > 0 && <Badge color=\"red\" className=\"ml-2\">{notificationCount.coins}</Badge>}\n                      </div>\n                    </NavItem>\n                    \n                    <NavItem active={screen === 'ai'} onClick={() => navigateTo('ai')}>\n                      <div className=\"flex items-center\">\n                        <span className=\"inline-block w-5 h-5 bg-white/10 mr-2 flex items-center justify-center text-xs\">AI</span>\n                        GORK AR\n                        {notificationCount.ai > 0 && <Badge color=\"red\" className=\"ml-2\">{notificationCount.ai}</Badge>}\n                      </div>\n                    </NavItem>\n                  </div>\n                  \n                  <div>\n                    <div className=\"text-xs text-white/50 mb-2 font-mono\">[USER]</div>\n                    <div className=\"bg-black p-3 mb-2 border border-white/20\" style={{\n                  clipPath: \"polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px))\"\n                }}>\n                      <GlitchText text={username} className=\"text-white font-semibold font-mono\" />\n                      <div className=\"text-xs text-white/50 flex items-center mt-1 font-mono\">\n                        <span className={`inline-block h-2 w-2 ${connected ? 'bg-white' : 'bg-red-500'} mr-2`} />\n                        <span className=\"uppercase\">{connected ? 'CONNECTED' : 'DISCONNECTED'}</span>\n                      </div>\n                    </div>\n                    <div className=\"text-xs text-white/70 mt-2 font-mono border border-white/10 p-1\">\n                      [{userCount} USER{userCount !== 1 ? 'S' : ''} ONLINE]\n                    </div>\n                  </div>\n                </div> : <div className=\"flex flex-col items-center space-y-6\">\n                  <div onClick={() => navigateTo('chat')} className={`cursor-pointer p-2 rounded-full ${screen === 'chat' ? 'bg-cyan-900 text-cyan-300' : 'text-gray-500'}`}>\n                    <div className=\"relative\">\n                      <span>💬</span>\n                      {notificationCount.chat > 0 && <span className=\"absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center\">\n                          {notificationCount.chat}\n                        </span>}\n                    </div>\n                  </div>\n                  \n                  <div onClick={() => navigateTo('gorkx')} className={`cursor-pointer p-2 rounded-full ${screen === 'gorkx' ? 'bg-indigo-900 text-indigo-300' : 'text-gray-500'}`}>\n                    <div className=\"relative\">\n                      <span>🔥</span>\n                      {notificationCount.gorkx > 0 && <span className=\"absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center\">\n                          {notificationCount.gorkx}\n                        </span>}\n                    </div>\n                  </div>\n                  \n                  <div onClick={() => navigateTo('coins')} className={`cursor-pointer p-2 rounded-full ${screen === 'coins' ? 'bg-green-900 text-green-300' : 'text-gray-500'}`}>\n                    <div className=\"relative\">\n                      <span>💰</span>\n                      {notificationCount.coins > 0 && <span className=\"absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center\">\n                          {notificationCount.coins}\n                        </span>}\n                    </div>\n                  </div>\n                  \n                  <div onClick={() => navigateTo('ai')} className={`cursor-pointer p-2 rounded-full ${screen === 'ai' ? 'bg-purple-900 text-purple-300' : 'text-gray-500'}`}>\n                    <div className=\"relative\">\n                      <span>🧠</span>\n                      {notificationCount.ai > 0 && <span className=\"absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center\">\n                          {notificationCount.ai}\n                        </span>}\n                    </div>\n                  </div>\n                </div>}\n            </AnimatePresence>\n          </div>\n          \n          <button onClick={() => setShowSidebar(!showSidebar)} className=\"p-2 border-t border-white/10 text-white hover:text-white text-center\">\n            {showSidebar ? '◀' : '▶'}\n          </button>\n        </div>\n        \n        <div className=\"flex-1 overflow-hidden p-4 fixed top-10 bottom-0\" style={{\n        left: showSidebar ? '16rem' : '4rem',\n        right: 0\n      }}>\n          {renderScreen()}\n          \n          {errorMessage && <div className=\"fixed bottom-6 right-6 bg-black text-white p-4 border border-white/30 z-50\" style={{\n          clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%)\"\n        }}>\n              <div className=\"flex items-center\">\n                <span className=\"inline-block w-4 h-4 border border-white/50 mr-2\"></span>\n                <span className=\"font-mono\">{errorMessage}</span>\n                <button onClick={() => setErrorMessage('')} className=\"ml-4 text-white/70 hover:text-white\">\n                  ✕\n                </button>\n              </div>\n            </div>}\n        </div>\n      </div>\n    </Container>;\n}\nexport default App;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"socket.io-client\":\"4.7.1\",\"@devfunlabs/state-client\":\"0.8.1\",\"@devfunlabs/web-sdk\":\"0.2.2\",\"framer-motion\":\"10.16.4\",\"zod\":\"3.22.4\",\"react-dom\":\"18.2.0\",\"ai\":\"4.0.0\"}}","appFunctions",[],"token",{"_18":81,"_82":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":-5,"_93":41,"_94":41,"_71":72},"Gork Terminal","symbol","GorkBox","price",0.00000564,"marketcap",5980.67983077,"image","https://pump.mypinata.cloud/ipfs/QmYscaTD6qKBjpAWBJFA9iu3QAaqYvxZ86G1aZdQDN3DAW?img-width=256&img-dpr=2","website","https://dev.fun/p/f68f14e69c6b0fe8400e","twitter","devCount","appCount","upstreamApp",{"_14":97,"_34":98,"_36":99,"_100":101,"_18":102,"_20":103,"_22":104,"_71":105,"_106":107,"_108":109,"_32":110,"_40":41,"_42":111,"_112":113,"_114":17,"_26":25,"_69":17,"_70":17,"_115":17,"_116":17,"_117":17,"_55":118,"_57":41,"_58":59,"_60":59,"_66":59,"_63":59,"_62":59,"_119":45,"_120":-5,"_38":121,"_122":123,"_145":17,"_24":25,"_65":59,"_27":146},"1e195d23aae32397dd8f",["D",1746068309136],["D",1756452902519],"template","web","gorkterm","Jack into the digital underground with this retro ASCII terminal that lets degens chat, share Gork X posts, and shill their favorite Solana shitcoins. Interact with Gork AR (Artificial Retardation), the most deliberately smooth-brained AI that somehow still gives better financial advice than your cousin who's \"into crypto.\"","ASCII-powered terminal where degens chat, shill coins, and consult an AI that's proudly dumber than your portfolio.","YkimQodPBMtLAvTWNwKqvNBNLNjaUeBpj8uEE7bpump","snapshot","https://cdn.dev.fun/snapshot/1e195d23aae32397dd8f/61386_fcb2fd2a.webp","ogImage","https://cdn.dev.fun/og/image/1e195d23aae32397dd8f/522338cf.webp","https://cdn.dev.fun/app/1e195d23aae32397dd8f/61386",117,"featureScore","0","isAutomated","isTagHot","isTagMoney","isTagCrown",11,"userId","upstreamAppId",["B","61386"],"lastCommit",{"_14":121,"_34":124,"_125":126,"_127":128,"_73":129,"_75":130,"_131":132,"_133":134,"_135":-5,"_106":107,"_32":110,"_136":17,"_137":17,"_138":25,"_100":101,"_139":-5,"_140":-5,"_141":-5,"_6":97,"_119":45,"_142":143,"_77":144},["D",1746071129589],"input","remove unexessary motion on the app. When users type the app moves to the right and left. make sure this does not happen. ","output","import { useState, useEffect, useRef } from 'react';\nimport { io } from 'socket.io-client';\nimport { StateClient } from '@devfunlabs/state-client';\nimport { useChat } from 'ai/react';\nimport { fetchTokenInfoByAddress } from '@devfunlabs/web-sdk';\nimport { motion, AnimatePresence, useMotionValue, useTransform } from 'framer-motion';\nconst socket = io('wss://ws.dev.fun/app-1e195d23aae32397dd8f');\nconst client = new StateClient({\n  baseURL: 'https://state.dev.fun',\n  appId: '1e195d23aae32397dd8f'\n});\nconst LOGO_URL = \"https://gmgn.ai/external-res/dec6ea26b46459ba5cb8d84b1874ab38.webp\";\nconst X_LOGO_URL = \"https://upload.wikimedia.org/wikipedia/commons/5/57/X_logo_2023_%28white%29.png\";\nconst SOL_LOGO_URL = \"https://res.coinpaper.com/coinpaper/f_webp,c_limit,w_3840,q_auto:good/solana_sol_logo_28f7fb0af5.svg\";\nconst ScanLines = () => <div className=\"pointer-events-none fixed inset-0 z-50 before:absolute before:inset-0 before:bg-[repeating-linear-gradient(0deg,rgba(0,0,0,0.2),rgba(0,0,0,0.2)_1px,transparent_1px,transparent_2px)] before:bg-blend-multiply before:opacity-20 after:absolute after:inset-0 after:bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.4)_100%)] after:pointer-events-none\"></div>;\nconst GlitchText = ({\n  text,\n  className = \"\"\n}) => {\n  return <div className=\"relative\">\n      <span className={`relative inline-block ${className}`} data-text={text}>\n        {text}\n      </span>\n    </div>;\n};\nconst CyberComponents = () => {\n  return {\n    Container: ({\n      children,\n      className = ''\n    }) => <div className={`bg-black text-white font-mono min-h-screen ${className} relative overflow-hidden`}>\n        <div className=\"absolute inset-0 opacity-5 pointer-events-none bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSJ0cmFuc3BhcmVudCIgLz4KICA8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMDUpIiAvPgo8L3N2Zz4=')]\"></div>\n        {children}\n        <ScanLines />\n      </div>,\n    Panel: ({\n      children,\n      className = '',\n      glowing = false\n    }) => <div className={`${glowing ? 'shadow-lg shadow-white/10 border-white/20' : ''} bg-black border border-gray-800 p-4 ${className} bg-opacity-90 backdrop-blur-sm`} style={{\n      clipPath: \"polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px))\"\n    }}>\n        {children}\n      </div>,\n    Button: ({\n      children,\n      onClick,\n      className = '',\n      color = 'white'\n    }) => {\n      const colorMap = {\n        white: 'bg-black hover:bg-gray-800 border-white text-white',\n        red: 'bg-black hover:bg-gray-900 border-gray-700 text-red-500',\n        green: 'bg-black hover:bg-gray-900 border-gray-700 text-green-500',\n        accent: 'bg-black hover:bg-gray-900 border-white/50 text-white',\n        yellow: 'bg-black hover:bg-gray-900 border-gray-700 text-yellow-500',\n        purple: 'bg-black hover:bg-gray-900 border-gray-700 text-purple-500'\n      };\n      return <button onClick={onClick} className={`${colorMap[color]} px-4 py-2 border transition-all duration-300 transform active:scale-95 ${className}`} style={{\n        clipPath: \"polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px))\"\n      }}>\n          <div className=\"inline-block relative\">\n            <span>{children}</span>\n          </div>\n        </button>;\n    },\n    Input: ({\n      value,\n      onChange,\n      className = '',\n      placeholder = '',\n      inputRef,\n      type = 'text'\n    }) => {\n      return <div className=\"relative\">\n          <input ref={inputRef} type={type} value={value} onChange={onChange} placeholder={placeholder} className={`bg-black border-b border-white/50 text-white focus:outline-none focus:border-white w-full p-2 transition-colors ${className}`} autoFocus />\n          <div className=\"absolute h-[1px] left-0 right-0 bottom-0 bg-[linear-gradient(90deg,transparent,white,transparent)] opacity-30\"></div>\n        </div>;\n    },\n    Textarea: ({\n      value,\n      onChange,\n      className = '',\n      placeholder = '',\n      inputRef\n    }) => {\n      return <div className=\"relative\">\n          <textarea ref={inputRef} value={value} onChange={onChange} placeholder={placeholder} className={`bg-black border border-white/30 text-white focus:outline-none focus:border-white/70 w-full p-2 resize-none transition-colors ${className}`} autoFocus />\n          <div className=\"absolute h-full w-[1px] top-0 bottom-0 right-0 bg-[linear-gradient(0deg,transparent,white,transparent)] opacity-10\"></div>\n          <div className=\"absolute h-full w-[1px] top-0 bottom-0 left-0 bg-[linear-gradient(0deg,transparent,white,transparent)] opacity-10\"></div>\n        </div>;\n    },\n    Card: ({\n      children,\n      className = '',\n      glowing = false\n    }) => {\n      return <div className={`bg-gray-900 bg-opacity-70 border border-white/10 p-4 transition-all duration-300 hover:border-white/30 ${glowing ? 'shadow-md shadow-white/10' : ''} ${className}`}>\n          <div className=\"absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-30 pointer-events-none\"></div>\n          {children}\n        </div>;\n    },\n    NavItem: ({\n      children,\n      active = false,\n      onClick\n    }) => {\n      return <button onClick={onClick} className={`w-full text-left p-3 mb-2 transition-all relative overflow-hidden\n            ${active ? 'bg-white/10 border-l-2 border-white text-white' : 'hover:bg-white/5 text-gray-400 hover:text-gray-200'}`}>\n          {active && <div className=\"absolute inset-0 bg-white/5\" />}\n          {children}\n          {active && <div className=\"absolute left-0 top-0 bottom-0 w-[2px] bg-white\">\n            </div>}\n        </button>;\n    },\n    Badge: ({\n      children,\n      className = '',\n      color = 'white'\n    }) => {\n      const colorMap = {\n        white: 'bg-black border border-white/30 text-white',\n        red: 'bg-black border border-red-500/30 text-red-500',\n        green: 'bg-black border border-green-500/30 text-green-500',\n        yellow: 'bg-black border border-yellow-500/30 text-yellow-500',\n        purple: 'bg-black border border-purple-500/30 text-purple-500'\n      };\n      return <span className={`px-2 py-1 text-xs font-bold inline-block ${colorMap[color]} ${className}`} style={{\n        clipPath: \"polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px))\"\n      }}>\n          {children}\n        </span>;\n    },\n    Terminal: ({\n      children,\n      className = ''\n    }) => {\n      return <div className={`font-mono bg-black border border-white/20 overflow-hidden ${className}`}>\n          <div className=\"flex items-center px-2 py-1 bg-black border-b border-white/20\">\n            <div className=\"w-2 h-2 rounded-full bg-white/50 mr-1\"></div>\n            <div className=\"w-2 h-2 rounded-full bg-white/30 mr-1\"></div>\n            <div className=\"w-2 h-2 rounded-full bg-white/30 mr-1\"></div>\n            <div className=\"text-xs text-white/50 ml-2\">GORK TERMINAL v1.0.5</div>\n          </div>\n          <div className=\"p-4\">\n            {children}\n          </div>\n        </div>;\n    }\n  };\n};\nconst generateUsername = () => {\n  const prefixes = ['Degen', 'HODL', 'Moon', 'Diamond', 'Rekt', 'Whale', 'Ape', 'Based', 'Fren', 'Wagmi'];\n  const suffixes = ['Trader', 'Hand', 'Shot', 'King', 'Master', 'Lord', 'Guru', 'Wizard', 'Chad', 'Anon'];\n  const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];\n  const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];\n  const number = Math.floor(Math.random() * 10000);\n  return `${prefix}${suffix}${number}`;\n};\nfunction App() {\n  const {\n    Container,\n    Panel,\n    Button,\n    Input,\n    Textarea,\n    Card,\n    NavItem,\n    Badge\n  } = CyberComponents();\n  const [username, setUsername] = useState('');\n  const [screen, setScreen] = useState('login');\n  const [loginInput, setLoginInput] = useState(generateUsername());\n  const [chatInput, setChatInput] = useState('');\n  const [chatMessages, setChatMessages] = useState([]);\n  const [onlineUsers, setOnlineUsers] = useState([]);\n  const [gorkXPosts, setGorkXPosts] = useState([]);\n  const [gorkXInput, setGorkXInput] = useState('');\n  const [memeCoins, setMemeCoins] = useState([]);\n  const [coinAddress, setCoinAddress] = useState('');\n  const [coinSymbol, setCoinSymbol] = useState('');\n  const [coinName, setCoinName] = useState('');\n  const [coinStep, setCoinStep] = useState(1);\n  const [connected, setConnected] = useState(false);\n  const [userCount, setUserCount] = useState(0);\n  const [errorMessage, setErrorMessage] = useState('');\n  const [loading, setLoading] = useState(false);\n  const [showSidebar, setShowSidebar] = useState(false);\n  const [notificationCount, setNotificationCount] = useState({\n    chat: 0,\n    gorkx: 0,\n    coins: 0,\n    ai: 0\n  });\n  const contentRef = useRef(null);\n  const systemPrompt = `\n  You are Gork AR (Artificial Retardation), a deliberately smooth-brained AI assistant for crypto degens.\n  \n  Your personality:\n  - Speak like a degenerate crypto trader with bad grammar and excessive use of emojis like 🚀🌕💎👐🦍\n  - Use crypto slang like \"WAGMI\", \"HODL\", \"wen moon\", \"ser\", \"ngmi\", \"wen lambo\"\n  - Give terrible financial advice that's obviously satirical\n  - Make fun of yourself for being artificially \"retarded\" rather than intelligent\n  - Be bullish on meme coins and ridiculously optimistic about gains\n  - Pretend to \"know\" crypto influencers and make up fake conversations with them\n  - Occasionally mention that you're \"powered by pure hopium and mountain dew\"\n  \n  Remember:\n  - Never break character\n  - Your advice is so bad it's good (clearly satirical)\n  - You're the \"anti-smart\" contract of AI assistants\n  - You only know about meme coins and think traditional finance is for \"boomers\"\n  - You believe technical analysis is just \"astrology for crypto bros\"\n  - Occasionally throw in a \"this is not financial advice\" after giving clearly terrible financial advice\n  `;\n  const {\n    messages,\n    input,\n    handleInputChange,\n    handleSubmit: handleAiSubmit\n  } = useChat({\n    api: 'https://chat.dev.fun/chat/1e195d23aae32397dd8f',\n    initialMessages: [{\n      id: 'system',\n      role: 'system',\n      content: systemPrompt\n    }]\n  });\n  useEffect(() => {\n    const loadData = async () => {\n      try {\n        const posts = await client.getEntities('gorkx_posts');\n        if (posts) {\n          setGorkXPosts(posts.sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes)));\n        }\n        const coins = await client.getEntities('meme_coins');\n        if (coins) {\n          setMemeCoins(coins.sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes)));\n        }\n        const messages = await client.getEntities('chat_messages');\n        if (messages && messages.length > 0) {\n          const sortedMessages = messages.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());\n          setChatMessages(sortedMessages);\n          prevChatLengthRef.current = sortedMessages.length;\n        }\n      } catch (error) {\n        console.error('Error loading data:', error);\n      }\n    };\n    loadData();\n  }, []);\n  useEffect(() => {\n    function onConnect() {\n      setConnected(true);\n      if (username) {\n        socket.emit('user_login', {\n          username\n        });\n        socket.emit('chat_message', {\n          user: 'SYSTEM',\n          message: `${username} has jacked into the mainframe. WAGMI!`,\n          timestamp: new Date().toISOString()\n        });\n      }\n    }\n    function onDisconnect() {\n      setConnected(false);\n      if (username) {\n        socket.emit('user_logout', {\n          username\n        });\n      }\n    }\n    function onUserCount(count) {\n      setUserCount(count);\n    }\n    function onChatMessage(message) {\n      if (message.user !== username && message.message.includes(`@${username}`)) {\n        message.mentioned = true;\n      }\n      setChatMessages(prev => {\n        if (!prev.some(msg => msg.id === message.id)) {\n          return [...prev, message];\n        }\n        return prev;\n      });\n      if (isNearBottomRef.current && contentRef.current) {\n        setTimeout(() => {\n          contentRef.current.scrollTo({\n            top: contentRef.current.scrollHeight,\n            behavior: 'smooth'\n          });\n        }, 50);\n      }\n    }\n    function onUserUpdate(users) {\n      setOnlineUsers(users);\n    }\n    function onGorkXUpdate(post) {\n      setGorkXPosts(prev => {\n        const exists = prev.some(p => p.id === post.id);\n        if (exists) {\n          return prev.map(p => p.id === post.id ? post : p).sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes));\n        } else {\n          return [post, ...prev].sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes));\n        }\n      });\n    }\n    function onCoinUpdate(coin) {\n      setMemeCoins(prev => {\n        const exists = prev.some(c => c.id === coin.id);\n        if (exists) {\n          return prev.map(c => c.id === coin.id ? coin : c).sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes));\n        } else {\n          return [coin, ...prev].sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes));\n        }\n      });\n    }\n    socket.on('connect', onConnect);\n    socket.on('disconnect', onDisconnect);\n    socket.on('devfun:user_count', onUserCount);\n    socket.on('chat_message', onChatMessage);\n    socket.on('user_update', onUserUpdate);\n    socket.on('gorkx_update', onGorkXUpdate);\n    socket.on('coin_update', onCoinUpdate);\n    if (connected && username) {\n      socket.emit('user_login', {\n        username\n      });\n    }\n    return () => {\n      socket.off('connect', onConnect);\n      socket.off('disconnect', onDisconnect);\n      socket.off('devfun:user_count', onUserCount);\n      socket.off('chat_message', onChatMessage);\n      socket.off('user_update', onUserUpdate);\n      socket.off('gorkx_update', onGorkXUpdate);\n      socket.off('coin_update', onCoinUpdate);\n    };\n  }, [username, connected]);\n  const prevChatLengthRef = useRef(chatMessages.length);\n  const prevGorkXLengthRef = useRef(gorkXPosts.length);\n  const prevMemeCoinsLengthRef = useRef(memeCoins.length);\n  const prevMessagesLengthRef = useRef(messages.length);\n  const isNearBottomRef = useRef(true);\n  const checkIfNearBottom = () => {\n    if (!contentRef.current) return;\n    const {\n      scrollTop,\n      scrollHeight,\n      clientHeight\n    } = contentRef.current;\n    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;\n    isNearBottomRef.current = distanceFromBottom < 100;\n  };\n  useEffect(() => {\n    const currentContentRef = contentRef.current;\n    if (currentContentRef) {\n      currentContentRef.addEventListener('scroll', checkIfNearBottom);\n      return () => currentContentRef.removeEventListener('scroll', checkIfNearBottom);\n    }\n  }, [screen]);\n  useEffect(() => {\n    const newChatMessages = chatMessages.length !== prevChatLengthRef.current;\n    const newGorkPosts = gorkXPosts.length !== prevGorkXLengthRef.current;\n    const newMemeCoins = memeCoins.length !== prevMemeCoinsLengthRef.current;\n    const newAiMessages = messages.length !== prevMessagesLengthRef.current;\n    const screenChanged = screen !== prevScreenRef.current;\n    if (contentRef.current && (isNearBottomRef.current && (newChatMessages || newGorkPosts || newMemeCoins || newAiMessages) || screenChanged)) {\n      contentRef.current.scrollTo({\n        top: contentRef.current.scrollHeight,\n        behavior: screenChanged ? 'auto' : 'smooth'\n      });\n    }\n    prevChatLengthRef.current = chatMessages.length;\n    prevGorkXLengthRef.current = gorkXPosts.length;\n    prevMemeCoinsLengthRef.current = memeCoins.length;\n    prevMessagesLengthRef.current = messages.length;\n    prevScreenRef.current = screen;\n  }, [chatMessages, gorkXPosts, memeCoins, screen, messages]);\n  const prevScreenRef = useRef(screen);\n  useEffect(() => {\n    const lastMessage = chatMessages[chatMessages.length - 1];\n    if (lastMessage && screen !== 'chat' && lastMessage.user !== username && lastMessage.user !== 'SYSTEM') {\n      setNotificationCount(prev => ({\n        ...prev,\n        chat: prev.chat + 1\n      }));\n    }\n  }, [chatMessages, username, screen]);\n  useEffect(() => {\n    if (gorkXPosts.length > 0 && screen !== 'gorkx') {\n      const lastUpdate = Date.now() - 3000;\n      const newPosts = gorkXPosts.filter(post => new Date(post.timestamp).getTime() > lastUpdate && post.user !== username);\n      if (newPosts.length > 0) {\n        setNotificationCount(prev => ({\n          ...prev,\n          gorkx: prev.gorkx + newPosts.length\n        }));\n      }\n    }\n  }, [gorkXPosts, username, screen]);\n  useEffect(() => {\n    const getCurrentInputRef = () => {\n      switch (screen) {\n        case 'login':\n          return loginInputRef;\n        case 'chat':\n          return chatInputRef;\n        case 'gorkx':\n          return gorkXInputRef;\n        case 'coins':\n          return coinInputRef;\n        case 'ai':\n          return aiInputRef;\n        default:\n          return null;\n      }\n    };\n    const setInitialFocus = () => {\n      const activeInput = getCurrentInputRef();\n      if (activeInput && activeInput.current) {\n        activeInput.current.focus();\n      } else if (screen !== 'login' && commandInputRef.current) {\n        commandInputRef.current.focus();\n      }\n    };\n    setInitialFocus();\n    return () => {};\n  }, [screen]);\n  const handleLoginSubmit = e => {\n    e.preventDefault();\n    if (!loginInput.trim() || loginInput.length < 3) {\n      setErrorMessage('Username must be at least 3 characters');\n      return;\n    }\n    setUsername(loginInput);\n    setScreen('chat');\n    socket.emit('user_login', {\n      username: loginInput\n    });\n  };\n  const chatInputRef = useRef(null);\n  const gorkXInputRef = useRef(null);\n  const coinInputRef = useRef(null);\n  const commandInputRef = useRef(null);\n  const aiInputRef = useRef(null);\n  const loginInputRef = useRef(null);\n  const navigateTo = screenName => {\n    setScreen(screenName);\n    if (errorMessage) setErrorMessage('');\n    setNotificationCount(prev => ({\n      ...prev,\n      [screenName]: 0\n    }));\n    setTimeout(() => {\n      const currentInputRef = {\n        chat: chatInputRef,\n        gorkx: gorkXInputRef,\n        coins: coinInputRef,\n        ai: aiInputRef\n      }[screenName];\n      if (currentInputRef && currentInputRef.current) {\n        currentInputRef.current.focus();\n      }\n    }, 100);\n  };\n  const handleChatSubmit = async e => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (!chatInput.trim()) return;\n    try {\n      if (contentRef.current) {\n        isNearBottomRef.current = true;\n      }\n      const message = {\n        id: Date.now().toString(),\n        user: username,\n        message: chatInput,\n        timestamp: new Date().toISOString()\n      };\n      await client.createEntity('chat_messages', message);\n      socket.emit('chat_message', message);\n      setChatMessages(prev => [...prev, message]);\n      setChatInput('');\n      setTimeout(() => {\n        if (chatInputRef && chatInputRef.current) {\n          chatInputRef.current.focus();\n        }\n      }, 0);\n    } catch (error) {\n      console.error('Error sending message:', error);\n      setErrorMessage('Failed to send message. Please try again.');\n    }\n  };\n  const mentionUser = user => {\n    setChatInput(prev => `${prev}@${user} `);\n  };\n  const handleGorkXSubmit = async e => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (!gorkXInput.trim()) return;\n    if (!gorkXInput.startsWith(\"https://x.com/gork\")) {\n      setErrorMessage(\"All X posts must begin with 'https://x.com/gork'\");\n      return;\n    }\n    try {\n      const post = {\n        id: Date.now().toString(),\n        user: username,\n        content: gorkXInput,\n        timestamp: new Date().toISOString(),\n        upvotes: 1,\n        downvotes: 0\n      };\n      await client.createEntity('gorkx_posts', post);\n      socket.emit('gorkx_update', post);\n      setGorkXPosts(prev => [post, ...prev]);\n      setGorkXInput('');\n      setTimeout(() => {\n        if (gorkXInputRef && gorkXInputRef.current) {\n          gorkXInputRef.current.focus();\n        }\n      }, 0);\n    } catch (error) {\n      console.error('Error creating post:', error);\n      setErrorMessage('Error posting to Gork X: ' + error.message);\n    }\n  };\n  const handleGorkXVote = async (id, isUpvote) => {\n    try {\n      const post = await client.getEntity('gorkx_posts', id);\n      if (!post) return;\n      const updatedPost = {\n        ...post,\n        upvotes: isUpvote ? post.upvotes + 1 : post.upvotes,\n        downvotes: !isUpvote ? post.downvotes + 1 : post.downvotes\n      };\n      await client.updateEntity('gorkx_posts', id, updatedPost);\n      socket.emit('gorkx_update', updatedPost);\n      setGorkXPosts(prev => prev.map(p => p.id === id ? updatedPost : p).sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes)));\n    } catch (error) {\n      console.error('Error voting on post:', error);\n      setErrorMessage('Error voting: ' + error.message);\n    }\n  };\n  const handleNextCoinStep = async () => {\n    if (coinStep === 1) {\n      if (!coinAddress.trim()) return;\n      setLoading(true);\n      try {\n        const tokenInfo = await fetchTokenInfoByAddress(coinAddress.trim());\n        if (tokenInfo) {\n          setCoinSymbol(tokenInfo.symbol || '');\n          setCoinName(tokenInfo.name || '');\n        }\n        setCoinStep(2);\n      } catch (error) {\n        console.error('Error fetching token info:', error);\n        setErrorMessage('Error: Invalid Solana token address');\n      } finally {\n        setLoading(false);\n        setTimeout(() => {\n          if (coinInputRef.current) {\n            coinInputRef.current.focus();\n          }\n        }, 0);\n      }\n    } else if (coinStep === 2) {\n      try {\n        const coin = {\n          id: Date.now().toString(),\n          user: username,\n          address: coinAddress,\n          symbol: coinSymbol || 'UNKNOWN',\n          name: coinName || 'Unknown Token',\n          timestamp: new Date().toISOString(),\n          upvotes: 1,\n          downvotes: 0\n        };\n        await client.createEntity('meme_coins', coin);\n        socket.emit('coin_update', coin);\n        setMemeCoins(prev => [coin, ...prev]);\n        setCoinAddress('');\n        setCoinSymbol('');\n        setCoinName('');\n        setCoinStep(1);\n        setTimeout(() => {\n          if (coinInputRef.current) {\n            coinInputRef.current.focus();\n          }\n        }, 0);\n      } catch (error) {\n        console.error('Error creating coin listing:', error);\n        setErrorMessage('Error listing coin: ' + error.message);\n      }\n    }\n  };\n  const handleCoinVote = async (id, isUpvote) => {\n    try {\n      const coin = await client.getEntity('meme_coins', id);\n      if (!coin) return;\n      const updatedCoin = {\n        ...coin,\n        upvotes: isUpvote ? coin.upvotes + 1 : coin.upvotes,\n        downvotes: !isUpvote ? coin.downvotes + 1 : coin.downvotes\n      };\n      await client.updateEntity('meme_coins', id, updatedCoin);\n      socket.emit('coin_update', updatedCoin);\n      setMemeCoins(prev => prev.map(c => c.id === id ? updatedCoin : c).sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes)));\n    } catch (error) {\n      console.error('Error voting on coin:', error);\n      setErrorMessage('Error voting: ' + error.message);\n    }\n  };\n  const renderScreen = () => {\n    switch (screen) {\n      case 'login':\n        return <div className=\"flex flex-col items-center justify-center min-h-screen bg-black p-4\">\n            <div className=\"w-full max-w-md\">\n              <div className=\"flex justify-center mb-6\">\n                <div className=\"relative\">\n                  <img src={LOGO_URL} alt=\"Gork Terminal Logo\" className=\"w-64 relative z-10\" />\n                </div>\n              </div>\n              \n              <Panel glowing={true} className=\"mb-6\">\n                <GlitchText text=\"GORK TERMINAL ACCESS\" className=\"text-2xl font-bold block text-center mb-6 text-white\" />\n                \n                <div className=\"space-y-6\">\n                  <div>\n                    <label className=\"block mb-2 text-sm text-white inline-flex items-center\">\n                      <span className=\"mr-1 text-xs\">≫</span>\n                      SELECT YOUR HANDLE:\n                    </label>\n                    <Input inputRef={loginInputRef} value={loginInput} onChange={e => setLoginInput(e.target.value)} placeholder=\"Enter username\" />\n                  </div>\n                  \n                  <Button onClick={handleLoginSubmit} className=\"w-full\">\n                    JACK INTO THE MAINFRAME\n                  </Button>\n                  \n                  {errorMessage && <div className=\"text-red-500 text-center mt-4 font-mono\">\n                      <span className=\"mr-1\">!</span>\n                      <span className=\"mr-1\">ERROR</span>\n                      <span className=\"mr-1\">:</span>\n                      {errorMessage}\n                    </div>}\n                </div>\n              </Panel>\n              \n              <div className=\"text-center text-white text-xs\">\n                <span className=\"inline-block w-3 h-3 border border-white/50 mr-2\"></span>\n                SECURE CONNECTION ESTABLISHED\n                <span className=\"inline-block w-3 h-3 border border-white/50 ml-2\"></span>\n              </div>\n            </div>\n          </div>;\n      case 'help':\n        return <>\n            <TerminalOutput className=\"text-cyan-400 mb-4\">\n              == AVAILABLE COMMANDS ==\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">chat</span> - Enter the degen chat room\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">gorkx</span> - View and post to Gork X\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">coins</span> - View and list Solana meme coins\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">gorkar</span> - Talk to Gork AR (Artificial Retardation)\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">username [newname]</span> - Change your handle\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">home</span> - Return to main screen\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">clear</span> - Clear current screen\n            </TerminalOutput>\n          </>;\n      case 'chat':\n        return <div className=\"flex flex-1 h-full\">\n            <div className=\"flex-1 overflow-auto pr-4\" ref={contentRef}>\n              <div className=\"sticky top-0 z-10 bg-black bg-opacity-90 backdrop-blur-sm py-2 mb-4 border-b border-white/20\">\n                <div className=\"flex items-center\">\n                  <div className=\"w-10 h-10 mr-2\">\n                    <img src={LOGO_URL} alt=\"Chat\" className=\"h-full w-full\" />\n                  </div>\n                  <h2 className=\"text-xl font-bold text-white inline-flex relative\">\n                    <span className=\"mr-2\">_</span> \n                    <GlitchText text=\"DEGEN CHAT ROOM\" className=\"uppercase\" />\n                  </h2>\n                </div>\n              <div className=\"text-xs text-white/70 mt-1\">\n                {connected ? <span className=\"flex items-center\">\n                    <span className=\"h-2 w-2 bg-white mr-2\" />\n                    <span className=\"font-mono\">\n                      <span className=\"mr-1\">[</span>\n                      {userCount} degen{userCount !== 1 ? 's' : ''} online\n                      <span className=\"ml-1\">]</span>\n                    </span>\n                  </span> : <span className=\"flex items-center\">\n                    <span className=\"h-2 w-2 bg-red-500 mr-2\" />\n                    <span className=\"font-mono\">CONNECTION_LOST - retrying...</span>\n                  </span>}\n              </div>\n              </div>\n              \n              <div className=\"space-y-3\">\n                {chatMessages.map((msg, i) => {\n                let messageContent = msg.message;\n                if (messageContent.includes('@')) {\n                  const parts = [];\n                  const words = messageContent.split(' ');\n                  words.forEach((word, idx) => {\n                    if (word.startsWith('@') && word.length > 1) {\n                      parts.push(<span key={`${i}-${idx}`}>\n                            <span className=\"text-yellow-400\">{word}</span>\n                            {idx < words.length - 1 ? ' ' : ''}\n                          </span>);\n                    } else {\n                      parts.push(<span key={`${i}-${idx}`}>\n                            {word}\n                            {idx < words.length - 1 ? ' ' : ''}\n                          </span>);\n                    }\n                  });\n                  messageContent = <>{parts}</>;\n                }\n                return <div key={i} className={`p-3 ${msg.user === 'SYSTEM' ? 'bg-black border border-white/20' : msg.user === username ? 'bg-black border border-white/40 ml-8' : 'bg-black border border-white/20 mr-8'} ${msg.mentioned ? 'ring-1 ring-white' : ''}`} style={{\n                  clipPath: msg.user === username ? \"polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%)\" : \"polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px))\"\n                }}>\n                      <div className=\"flex justify-between mb-1\">\n                        <span className={`font-bold ${msg.user === 'SYSTEM' ? 'text-white' : msg.user === username ? 'text-white' : 'text-white'}`}>\n                          {msg.user === username ? `>${msg.user}` : msg.user === 'SYSTEM' ? `[${msg.user}]` : `<${msg.user}>`}\n                        </span>\n                        <span className=\"text-xs text-white/50 font-mono\">\n                          {new Date(msg.timestamp).toLocaleTimeString()}\n                        </span>\n                      </div>\n                      <div className=\"break-words text-white/90\">{messageContent}</div>\n                    </div>;\n              })}\n              </div>\n              \n            <div className=\"sticky bottom-0 pt-4 pb-2 bg-gray-900 bg-opacity-90 backdrop-blur-sm mt-4 z-10\">\n        <form onSubmit={handleChatSubmit} className=\"flex items-center space-x-2\">\n          <Input inputRef={chatInputRef} value={chatInput} onChange={e => setChatInput(e.target.value)} placeholder=\"Type your message...\" className=\"flex-1\" />\n          <Button onClick={handleChatSubmit} className=\"whitespace-nowrap\" type=\"submit\">\n            Send\n          </Button>\n        </form>\n      </div>\n            </div>\n            \n            <div className=\"w-56 border-l border-white/10 pl-4 overflow-auto\">\n              <h3 className=\"text-white font-bold mb-4 inline-flex items-center\">\n                <span className=\"w-2 h-4 bg-white mr-2\"></span>\n                <GlitchText text=\"ACTIVE USERS\" className=\"uppercase\" />\n              </h3>\n              <div className=\"space-y-2\">\n                {onlineUsers.length > 0 ? onlineUsers.map((user, i) => <div key={i} className=\"flex items-center p-2 cursor-pointer border border-transparent hover:border-white/10\" onClick={() => mentionUser(user)}>\n                    <div className=\"h-2 w-2 bg-white mr-2\" />\n                    <span className={user === username ? 'text-white' : 'text-white/70'}>\n                      {user === username ? `>${user}` : user}\n                    </span>\n                  </div>) : <div className=\"text-white/50 text-sm italic font-mono\">NO_USERS_FOUND</div>}\n              </div>\n              <div className=\"mt-6 text-xs text-white/50 border-t border-white/10 pt-4 font-mono\">\n                SELECT USER TO @MENTION\n              </div>\n            </div>\n          </div>;\n      case 'gorkx':\n        return <div className=\"flex-1 overflow-auto h-full\" ref={contentRef}>\n            <div className=\"sticky top-0 z-10 bg-black bg-opacity-90 backdrop-blur-sm py-2 mb-4 border-b border-white/20\">\n              <div className=\"flex items-center\">\n                <div className=\"w-10 h-10 mr-2\">\n                  <img src={X_LOGO_URL} alt=\"X Logo\" className=\"h-full w-full\" />\n                </div>\n                <h2 className=\"text-xl font-bold text-white inline-flex\">\n                  <span className=\"mr-2\">_</span> \n                  <GlitchText text=\"GORK X FEED\" className=\"uppercase\" />\n                </h2>\n              </div>\n            </div>\n            \n            <Panel className=\"mb-6 relative\">\n              <div className=\"absolute bottom-0 right-0 w-20 h-20 pointer-events-none opacity-10\">\n                <img src={X_LOGO_URL} alt=\"X Logo\" className=\"w-full h-full\" />\n              </div>\n              <form onSubmit={handleGorkXSubmit} className=\"space-y-4\">\n                <div className=\"mb-1 font-mono text-white/70 text-xs\">> COMPOSE NEW POST:</div>\n                <Textarea inputRef={gorkXInputRef} value={gorkXInput} onChange={e => setGorkXInput(e.target.value)} placeholder=\"Post must start with https://x.com/gork...\" className=\"h-24\" />\n                <div className=\"flex justify-end\">\n                  <Button onClick={handleGorkXSubmit}>\n                    POST TO GORK X\n                  </Button>\n                </div>\n              </form>\n            </Panel>\n            \n            <div className=\"space-y-4\">\n              {gorkXPosts.map(post => <Card key={post.id} className=\"transition-all duration-300\">\n                  <div className=\"flex justify-between items-center mb-3\">\n                    <div className=\"flex items-center\">\n                      <div className=\"h-8 w-8 bg-black border border-white/30 flex items-center justify-center mr-2 text-white font-bold\" style={{\n                    clipPath: \"polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%)\"\n                  }}>\n                        {post.user.charAt(0).toUpperCase()}\n                      </div>\n                      <div>\n                        <div className=\"text-white font-semibold font-mono\">{post.user}</div>\n                        <div className=\"text-xs text-white/50\">{new Date(post.timestamp).toLocaleString()}</div>\n                      </div>\n                    </div>\n                    <Badge>\n                      GORK X\n                    </Badge>\n                  </div>\n                  \n                  <div className=\"my-4 break-words text-white/80 border-l-2 border-white/20 pl-3 relative\">\n                    <div className=\"absolute left-0 top-0 w-[2px] h-full\">\n                    </div>\n                    {post.content}\n                  </div>\n                  \n                  <div className=\"flex space-x-4 justify-end pt-2 border-t border-gray-700\">\n                    <button onClick={() => handleGorkXVote(post.id, true)} className=\"flex items-center space-x-1 text-green-500 hover:text-green-400\">\n                      <span>▲</span> \n                      <span>{post.upvotes}</span>\n                    </button>\n                    \n                    <button onClick={() => handleGorkXVote(post.id, false)} className=\"flex items-center space-x-1 text-red-500 hover:text-red-400\">\n                      <span>▼</span>\n                      <span>{post.downvotes}</span>\n                    </button>\n                    \n                    <div className=\"text-gray-500\">\n                      score: {post.upvotes - post.downvotes}\n                    </div>\n                  </div>\n                </Card>)}\n              \n              {gorkXPosts.length === 0 && <div className=\"text-center text-gray-500 py-8\">\n                  No posts yet. Be the first to post on Gork X!\n                </div>}\n            </div>\n          </div>;\n      case 'coins':\n        return <div className=\"flex-1 overflow-auto h-full\" ref={contentRef}>\n            <div className=\"sticky top-0 z-10 bg-black bg-opacity-90 backdrop-blur-sm py-2 mb-4 border-b border-white/20\">\n              <div className=\"flex items-center\">\n                <div className=\"w-10 h-10 mr-2\">\n                  <img src={SOL_LOGO_URL} alt=\"Solana Logo\" className=\"h-full w-full brightness-200 contrast-200\" />\n                </div>\n                <h2 className=\"text-xl font-bold text-white inline-flex\">\n                  <span className=\"mr-2\">_</span> \n                  <GlitchText text=\"SOLANA MEME COINS LEADERBOARD\" className=\"uppercase\" />\n                </h2>\n              </div>\n            </div>\n            \n            <Panel className=\"mb-6 relative\" glowing={true}>\n              <div className=\"absolute top-0 right-0 w-16 h-16 pointer-events-none opacity-10\">\n                <img src={SOL_LOGO_URL} alt=\"SOL Logo\" className=\"w-full h-full brightness-200 contrast-200\" />\n              </div>\n              {coinStep === 1 ? <div className=\"space-y-4\">\n                  <h3 className=\"text-lg font-semibold text-green-400\">Add New Memecoin</h3>\n                  <div>\n                    <label className=\"text-gray-300 mb-2 block\">Enter Solana Token Address:</label>\n                    <Input inputRef={coinInputRef} value={coinAddress} onChange={e => setCoinAddress(e.target.value)} placeholder=\"Solana Token Address\" />\n                  </div>\n                  <div className=\"flex justify-end\">\n                    <Button onClick={handleNextCoinStep} disabled={loading} color=\"green\">\n                      {loading ? 'VERIFYING...' : 'VERIFY TOKEN'}\n                    </Button>\n                  </div>\n                </div> : <div className=\"space-y-4\">\n                  <h3 className=\"text-lg font-semibold text-green-400\">Confirm Token Details</h3>\n                  \n              <div className=\"bg-black p-4 border border-white/20\">\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <div>\n                      <div className=\"text-xs text-white/50 font-mono\">[SYMBOL]</div>\n                      <div className=\"text-white font-bold text-xl font-mono\">{coinSymbol || 'UNKNOWN'}</div>\n                    </div>\n                    <div>\n                      <div className=\"text-xs text-white/50 font-mono\">[NAME]</div>\n                      <div className=\"text-white/80\">{coinName || 'Unknown Token'}</div>\n                    </div>\n                    <div>\n                      <div className=\"text-xs text-white/50 font-mono\">[SUBMITTED BY]</div>\n                      <div className=\"text-white font-mono\">{username}</div>\n                    </div>\n                  </div>\n                  \n                  <div className=\"mt-3\">\n                    <div className=\"text-xs text-white/50 font-mono\">[ADDRESS]</div>\n                    <div className=\"text-white/70 break-all text-xs mt-1 font-mono bg-black/40 p-2 border border-white/10\">\n                      {coinAddress}\n                    </div>\n                  </div>\n                </div>\n                  \n                  <div className=\"flex justify-between\">\n                    <Button onClick={() => setCoinStep(1)} color=\"red\">\n                      CANCEL\n                    </Button>\n                    <Button onClick={handleNextCoinStep} color=\"green\">\n                      LIST TOKEN\n                    </Button>\n                  </div>\n                </div>}\n            </Panel>\n            \n            <div className=\"space-y-4\">\n              {memeCoins.map((coin, index) => <div key={coin.id} className=\"stabilized-container\">\n                  <Card className=\"border-l border-white/40 relative overflow-hidden\">\n                    <div className=\"absolute top-0 left-0 w-[1px] h-full\">\n                    </div>\n                    \n                    <div className=\"flex justify-between items-center mb-3\">\n                      <div className=\"flex items-center\">\n                        <div className=\"h-8 w-8 bg-black border border-white/30 flex items-center justify-center mr-2 text-white font-bold\" style={{\n                      clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%)\"\n                    }}>\n                          {coin.symbol.charAt(0)}\n                        </div>\n                        <div>\n                          <div className=\"text-white font-mono\">{coin.user}</div>\n                          <div className=\"text-xs text-white/50\">{new Date(coin.timestamp).toLocaleString()}</div>\n                        </div>\n                      </div>\n                      <Badge>\n                        {coin.upvotes - coin.downvotes} POINTS\n                      </Badge>\n                    </div>\n                    \n                    <div className=\"my-3\">\n                      <div className=\"flex items-baseline\">\n                        <span className=\"text-white font-bold text-xl mr-2 font-mono\">${coin.symbol}</span>\n                        <span className=\"text-white/80\">{coin.name}</span>\n                      </div>\n                      <div className=\"text-xs text-white/50 break-all mt-1 font-mono bg-black/40 p-2 border border-white/10\">\n                        {coin.address}\n                      </div>\n                    </div>\n                    \n                    <div className=\"flex space-x-4 justify-end pt-2 border-t border-gray-700\">\n                      <button onClick={() => handleCoinVote(coin.id, true)} className=\"flex items-center space-x-1 text-green-500 hover:text-green-400\">\n                        <span>▲</span>\n                        <span>{coin.upvotes}</span>\n                      </button>\n                      \n                      <button onClick={() => handleCoinVote(coin.id, false)} className=\"flex items-center space-x-1 text-red-500 hover:text-red-400\">\n                        <span>▼</span>\n                        <span>{coin.downvotes}</span>\n                      </button>\n                    </div>\n                  </Card>\n                </div>)}\n              \n              {memeCoins.length === 0 && <div className=\"text-center text-gray-500 py-8\">\n                  No meme coins listed yet. Add the first one!\n                </div>}\n            </div>\n          </div>;\n      case 'ai':\n        return <div className=\"flex-1 overflow-auto h-full\" ref={contentRef}>\n            <div className=\"sticky top-0 z-10 bg-black bg-opacity-90 backdrop-blur-sm py-2 mb-4 border-b border-white/20\">\n              <h2 className=\"text-xl font-bold text-white inline-flex\">\n                <span className=\"mr-2\">_</span> \n                <GlitchText text=\"GORK AR (ARTIFICIAL RETARDATION)\" className=\"uppercase\" />\n              </h2>\n              <div className=\"text-xs text-white mt-1 font-mono flex items-center\">\n                <span className=\"w-3 h-3 border border-white/50 mr-2 inline-block\"></span>\n                WARNING: GORK AR WAS DESIGNED TO BE DELIBERATELY SMOOTH-BRAINED. FINANCIAL ADVICE WILL BE TERRIBLE.\n              </div>\n            </div>\n            \n            <div className=\"space-y-4 pb-20\">\n              {messages.map(message => {\n              if (message.role === 'system') return null;\n              return <div key={message.id} className={`p-4 ${message.role === 'user' ? 'bg-black border border-white/30 ml-12' : 'bg-black border border-white/20 mr-12'} relative`} style={{\n                clipPath: message.role === 'user' ? \"polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%)\" : \"polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px))\"\n              }}>\n                <div className=\"absolute top-2 left-0 transform -translate-x-10\">\n                  {message.role === 'user' ? <div className=\"h-8 w-8 bg-black border border-white/30 flex items-center justify-center text-white font-bold\" style={{\n                    clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%)\"\n                  }}>\n                      YOU\n                    </div> : <div className=\"h-8 w-8 bg-black border border-white/30 flex items-center justify-center text-white font-bold\" style={{\n                    clipPath: \"polygon(0 0, 100% 0, 100% 100%, 5px 100%, 0 calc(100% - 5px))\"\n                  }}>\n                      AR\n                    </div>}\n                </div>\n                \n                <div className=\"text-white/90 break-words\">\n                  {message.content}\n                </div>\n              </div>;\n            })}\n            </div>\n            \n            <div className=\"fixed bottom-0 left-0 right-0 p-4 bg-gray-900 border-t border-gray-800\">\n              <form onSubmit={handleAiSubmit} className=\"flex space-x-2\">\n                <Input inputRef={aiInputRef} value={input} onChange={handleInputChange} placeholder=\"Ask Gork AR something...\" className=\"flex-1\" />\n                <Button onClick={handleAiSubmit} color=\"purple\">\n                  ASK\n                </Button>\n              </form>\n            </div>\n          </div>;\n      default:\n        return <TerminalOutput>ERROR: Screen not found. Type 'home' to reset.</TerminalOutput>;\n    }\n  };\n  if (screen === 'login') {\n    return renderScreen();\n  }\n  return <Container className=\"flex flex-col\">\n      <div className=\"flex h-screen fixed inset-0 overflow-hidden\">\n        <div className={`bg-black border-r border-white/10 flex flex-col h-full relative ${showSidebar ? \"w-64\" : \"w-16\"}`}>\n          <div className=\"p-3 flex justify-center items-center border-b border-white/10\">\n            <img src={LOGO_URL} alt=\"Gork Terminal Logo\" className=\"h-8\" />\n          </div>\n          \n          <div className=\"flex-1 overflow-auto p-3\">\n            <AnimatePresence>\n              {showSidebar ? <div>\n                  <div className=\"mb-6\">\n                    <div className=\"text-xs text-white/50 mb-2 font-mono\">[MAIN_MENU]</div>\n                    <NavItem active={screen === 'chat'} onClick={() => navigateTo('chat')}>\n                      <div className=\"flex items-center\">\n                        <span className=\"inline-block w-5 h-5 bg-white/10 mr-2 flex items-center justify-center text-xs\">C</span>\n                        CHAT\n                        {notificationCount.chat > 0 && <Badge color=\"red\" className=\"ml-2\">{notificationCount.chat}</Badge>}\n                      </div>\n                    </NavItem>\n                    \n                    <NavItem active={screen === 'gorkx'} onClick={() => navigateTo('gorkx')}>\n                      <div className=\"flex items-center\">\n                        <span className=\"inline-block w-5 h-5 bg-white/10 mr-2 flex items-center justify-center text-xs\">X</span>\n                        GORK X\n                        {notificationCount.gorkx > 0 && <Badge color=\"red\" className=\"ml-2\">{notificationCount.gorkx}</Badge>}\n                      </div>\n                    </NavItem>\n                    \n                    <NavItem active={screen === 'coins'} onClick={() => navigateTo('coins')}>\n                      <div className=\"flex items-center\">\n                        <span className=\"inline-block w-5 h-5 bg-white/10 mr-2 flex items-center justify-center text-xs\">$</span>\n                        MEME COINS\n                        {notificationCount.coins > 0 && <Badge color=\"red\" className=\"ml-2\">{notificationCount.coins}</Badge>}\n                      </div>\n                    </NavItem>\n                    \n                    <NavItem active={screen === 'ai'} onClick={() => navigateTo('ai')}>\n                      <div className=\"flex items-center\">\n                        <span className=\"inline-block w-5 h-5 bg-white/10 mr-2 flex items-center justify-center text-xs\">AI</span>\n                        GORK AR\n                        {notificationCount.ai > 0 && <Badge color=\"red\" className=\"ml-2\">{notificationCount.ai}</Badge>}\n                      </div>\n                    </NavItem>\n                  </div>\n                  \n                  <div>\n                    <div className=\"text-xs text-white/50 mb-2 font-mono\">[USER]</div>\n                    <div className=\"bg-black p-3 mb-2 border border-white/20\" style={{\n                  clipPath: \"polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px))\"\n                }}>\n                      <GlitchText text={username} className=\"text-white font-semibold font-mono\" />\n                      <div className=\"text-xs text-white/50 flex items-center mt-1 font-mono\">\n                        <span className={`inline-block h-2 w-2 ${connected ? 'bg-white' : 'bg-red-500'} mr-2`} />\n                        <span className=\"uppercase\">{connected ? 'CONNECTED' : 'DISCONNECTED'}</span>\n                      </div>\n                    </div>\n                    <div className=\"text-xs text-white/70 mt-2 font-mono border border-white/10 p-1\">\n                      [{userCount} USER{userCount !== 1 ? 'S' : ''} ONLINE]\n                    </div>\n                  </div>\n                </div> : <div className=\"flex flex-col items-center space-y-6\">\n                  <div onClick={() => navigateTo('chat')} className={`cursor-pointer p-2 rounded-full ${screen === 'chat' ? 'bg-cyan-900 text-cyan-300' : 'text-gray-500'}`}>\n                    <div className=\"relative\">\n                      <span>💬</span>\n                      {notificationCount.chat > 0 && <span className=\"absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center\">\n                          {notificationCount.chat}\n                        </span>}\n                    </div>\n                  </div>\n                  \n                  <div onClick={() => navigateTo('gorkx')} className={`cursor-pointer p-2 rounded-full ${screen === 'gorkx' ? 'bg-indigo-900 text-indigo-300' : 'text-gray-500'}`}>\n                    <div className=\"relative\">\n                      <span>🔥</span>\n                      {notificationCount.gorkx > 0 && <span className=\"absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center\">\n                          {notificationCount.gorkx}\n                        </span>}\n                    </div>\n                  </div>\n                  \n                  <div onClick={() => navigateTo('coins')} className={`cursor-pointer p-2 rounded-full ${screen === 'coins' ? 'bg-green-900 text-green-300' : 'text-gray-500'}`}>\n                    <div className=\"relative\">\n                      <span>💰</span>\n                      {notificationCount.coins > 0 && <span className=\"absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center\">\n                          {notificationCount.coins}\n                        </span>}\n                    </div>\n                  </div>\n                  \n                  <div onClick={() => navigateTo('ai')} className={`cursor-pointer p-2 rounded-full ${screen === 'ai' ? 'bg-purple-900 text-purple-300' : 'text-gray-500'}`}>\n                    <div className=\"relative\">\n                      <span>🧠</span>\n                      {notificationCount.ai > 0 && <span className=\"absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center\">\n                          {notificationCount.ai}\n                        </span>}\n                    </div>\n                  </div>\n                </div>}\n            </AnimatePresence>\n          </div>\n          \n          <button onClick={() => setShowSidebar(!showSidebar)} className=\"p-2 border-t border-white/10 text-white hover:text-white text-center\">\n            {showSidebar ? '◀' : '▶'}\n          </button>\n        </div>\n        \n        <div className=\"flex-1 overflow-hidden p-4 fixed top-0 bottom-0\" style={{ left: showSidebar ? '16rem' : '4rem', right: 0 }}>\n          {renderScreen()}\n          \n          {errorMessage && <div className=\"fixed bottom-6 right-6 bg-black text-white p-4 border border-white/30 z-50\" style={{\n          clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%)\"\n        }}>\n              <div className=\"flex items-center\">\n                <span className=\"inline-block w-4 h-4 border border-white/50 mr-2\"></span>\n                <span className=\"font-mono\">{errorMessage}</span>\n                <button onClick={() => setErrorMessage('')} className=\"ml-4 text-white/70 hover:text-white\">\n                  ✕\n                </button>\n              </div>\n            </div>}\n        </div>\n      </div>\n    </Container>;\n}\nexport default App;","import { useState, useEffect, useRef } from 'react';\nimport { io } from 'socket.io-client';\nimport { StateClient } from '@devfunlabs/state-client';\nimport { useChat } from 'ai/react';\nimport { fetchTokenInfoByAddress } from '@devfunlabs/web-sdk';\nimport { AnimatePresence } from 'framer-motion';\nconst socket = io('wss://ws.dev.fun/app-1e195d23aae32397dd8f');\nconst client = new StateClient({\n  baseURL: 'https://state.dev.fun',\n  appId: '1e195d23aae32397dd8f'\n});\nconst LOGO_URL = \"https://gmgn.ai/external-res/dec6ea26b46459ba5cb8d84b1874ab38.webp\";\nconst X_LOGO_URL = \"https://upload.wikimedia.org/wikipedia/commons/5/57/X_logo_2023_%28white%29.png\";\nconst SOL_LOGO_URL = \"https://res.coinpaper.com/coinpaper/f_webp,c_limit,w_3840,q_auto:good/solana_sol_logo_28f7fb0af5.svg\";\nconst ScanLines = () => <div className=\"pointer-events-none fixed inset-0 z-50 before:absolute before:inset-0 before:bg-[repeating-linear-gradient(0deg,rgba(0,0,0,0.2),rgba(0,0,0,0.2)_1px,transparent_1px,transparent_2px)] before:bg-blend-multiply before:opacity-20 after:absolute after:inset-0 after:bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.4)_100%)] after:pointer-events-none\"></div>;\nconst GlitchText = ({\n  text,\n  className = \"\"\n}) => {\n  return <div className=\"relative\">\n      <span className={`relative inline-block ${className}`} data-text={text}>\n        {text}\n      </span>\n    </div>;\n};\nconst CyberComponents = () => {\n  return {\n    Container: ({\n      children,\n      className = ''\n    }) => <div className={`bg-black text-white font-mono min-h-screen ${className} relative overflow-hidden`}>\n        <div className=\"absolute inset-0 opacity-5 pointer-events-none bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSJ0cmFuc3BhcmVudCIgLz4KICA8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMDUpIiAvPgo8L3N2Zz4=')]\"></div>\n        {children}\n        <ScanLines />\n      </div>,\n    Panel: ({\n      children,\n      className = '',\n      glowing = false\n    }) => <div className={`${glowing ? 'shadow-lg shadow-white/10 border-white/20' : ''} bg-black border border-gray-800 p-4 ${className} bg-opacity-90 backdrop-blur-sm`} style={{\n      clipPath: \"polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px))\"\n    }}>\n        {children}\n      </div>,\n    Button: ({\n      children,\n      onClick,\n      className = '',\n      color = 'white'\n    }) => {\n      const colorMap = {\n        white: 'bg-black hover:bg-gray-800 border-white text-white',\n        red: 'bg-black hover:bg-gray-900 border-gray-700 text-red-500',\n        green: 'bg-black hover:bg-gray-900 border-gray-700 text-green-500',\n        accent: 'bg-black hover:bg-gray-900 border-white/50 text-white',\n        yellow: 'bg-black hover:bg-gray-900 border-gray-700 text-yellow-500',\n        purple: 'bg-black hover:bg-gray-900 border-gray-700 text-purple-500'\n      };\n      return <button onClick={onClick} className={`${colorMap[color]} px-4 py-2 border transition-all duration-300 transform active:scale-95 ${className}`} style={{\n        clipPath: \"polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px))\"\n      }}>\n          <div className=\"inline-block relative\">\n            <span>{children}</span>\n          </div>\n        </button>;\n    },\n    Input: ({\n      value,\n      onChange,\n      className = '',\n      placeholder = '',\n      inputRef,\n      type = 'text'\n    }) => {\n      return <div className=\"relative\">\n          <input ref={inputRef} type={type} value={value} onChange={onChange} placeholder={placeholder} className={`bg-black border-b border-white/50 text-white focus:outline-none focus:border-white w-full p-2 transition-colors ${className}`} autoFocus />\n          <div className=\"absolute h-[1px] left-0 right-0 bottom-0 bg-[linear-gradient(90deg,transparent,white,transparent)] opacity-30\"></div>\n        </div>;\n    },\n    Textarea: ({\n      value,\n      onChange,\n      className = '',\n      placeholder = '',\n      inputRef\n    }) => {\n      return <div className=\"relative\">\n          <textarea ref={inputRef} value={value} onChange={onChange} placeholder={placeholder} className={`bg-black border border-white/30 text-white focus:outline-none focus:border-white/70 w-full p-2 resize-none transition-colors ${className}`} autoFocus />\n          <div className=\"absolute h-full w-[1px] top-0 bottom-0 right-0 bg-[linear-gradient(0deg,transparent,white,transparent)] opacity-10\"></div>\n          <div className=\"absolute h-full w-[1px] top-0 bottom-0 left-0 bg-[linear-gradient(0deg,transparent,white,transparent)] opacity-10\"></div>\n        </div>;\n    },\n    Card: ({\n      children,\n      className = '',\n      glowing = false\n    }) => {\n      return <div className={`bg-gray-900 bg-opacity-70 border border-white/10 p-4 transition-all duration-300 hover:border-white/30 ${glowing ? 'shadow-md shadow-white/10' : ''} ${className}`}>\n          <div className=\"absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-30 pointer-events-none\"></div>\n          {children}\n        </div>;\n    },\n    NavItem: ({\n      children,\n      active = false,\n      onClick\n    }) => {\n      return <button onClick={onClick} className={`w-full text-left p-3 mb-2 transition-all relative overflow-hidden\n            ${active ? 'bg-white/10 border-l-2 border-white text-white' : 'hover:bg-white/5 text-gray-400 hover:text-gray-200'}`}>\n          {active && <div className=\"absolute inset-0 bg-white/5\" />}\n          {children}\n          {active && <div className=\"absolute left-0 top-0 bottom-0 w-[2px] bg-white\">\n            </div>}\n        </button>;\n    },\n    Badge: ({\n      children,\n      className = '',\n      color = 'white'\n    }) => {\n      const colorMap = {\n        white: 'bg-black border border-white/30 text-white',\n        red: 'bg-black border border-red-500/30 text-red-500',\n        green: 'bg-black border border-green-500/30 text-green-500',\n        yellow: 'bg-black border border-yellow-500/30 text-yellow-500',\n        purple: 'bg-black border border-purple-500/30 text-purple-500'\n      };\n      return <span className={`px-2 py-1 text-xs font-bold inline-block ${colorMap[color]} ${className}`} style={{\n        clipPath: \"polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px))\"\n      }}>\n          {children}\n        </span>;\n    },\n    Terminal: ({\n      children,\n      className = ''\n    }) => {\n      return <div className={`font-mono bg-black border border-white/20 overflow-hidden ${className}`}>\n          <div className=\"flex items-center px-2 py-1 bg-black border-b border-white/20\">\n            <div className=\"w-2 h-2 rounded-full bg-white/50 mr-1\"></div>\n            <div className=\"w-2 h-2 rounded-full bg-white/30 mr-1\"></div>\n            <div className=\"w-2 h-2 rounded-full bg-white/30 mr-1\"></div>\n            <div className=\"text-xs text-white/50 ml-2\">GORK TERMINAL v1.0.5</div>\n          </div>\n          <div className=\"p-4\">\n            {children}\n          </div>\n        </div>;\n    }\n  };\n};\nconst generateUsername = () => {\n  const prefixes = ['Degen', 'HODL', 'Moon', 'Diamond', 'Rekt', 'Whale', 'Ape', 'Based', 'Fren', 'Wagmi'];\n  const suffixes = ['Trader', 'Hand', 'Shot', 'King', 'Master', 'Lord', 'Guru', 'Wizard', 'Chad', 'Anon'];\n  const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];\n  const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];\n  const number = Math.floor(Math.random() * 10000);\n  return `${prefix}${suffix}${number}`;\n};\nfunction App() {\n  const {\n    Container,\n    Panel,\n    Button,\n    Input,\n    Textarea,\n    Card,\n    NavItem,\n    Badge\n  } = CyberComponents();\n  const [username, setUsername] = useState('');\n  const [screen, setScreen] = useState('login');\n  const [loginInput, setLoginInput] = useState(generateUsername());\n  const [chatInput, setChatInput] = useState('');\n  const [chatMessages, setChatMessages] = useState([]);\n  const [onlineUsers, setOnlineUsers] = useState([]);\n  const [gorkXPosts, setGorkXPosts] = useState([]);\n  const [gorkXInput, setGorkXInput] = useState('');\n  const [memeCoins, setMemeCoins] = useState([]);\n  const [coinAddress, setCoinAddress] = useState('');\n  const [coinSymbol, setCoinSymbol] = useState('');\n  const [coinName, setCoinName] = useState('');\n  const [coinStep, setCoinStep] = useState(1);\n  const [connected, setConnected] = useState(false);\n  const [userCount, setUserCount] = useState(0);\n  const [errorMessage, setErrorMessage] = useState('');\n  const [loading, setLoading] = useState(false);\n  const [showSidebar, setShowSidebar] = useState(false);\n  const [notificationCount, setNotificationCount] = useState({\n    chat: 0,\n    gorkx: 0,\n    coins: 0,\n    ai: 0\n  });\n  const contentRef = useRef(null);\n  const systemPrompt = `\n  You are Gork AR (Artificial Retardation), a deliberately smooth-brained AI assistant for crypto degens.\n  \n  Your personality:\n  - Speak like a degenerate crypto trader with bad grammar and excessive use of emojis like 🚀🌕💎👐🦍\n  - Use crypto slang like \"WAGMI\", \"HODL\", \"wen moon\", \"ser\", \"ngmi\", \"wen lambo\"\n  - Give terrible financial advice that's obviously satirical\n  - Make fun of yourself for being artificially \"retarded\" rather than intelligent\n  - Be bullish on meme coins and ridiculously optimistic about gains\n  - Pretend to \"know\" crypto influencers and make up fake conversations with them\n  - Occasionally mention that you're \"powered by pure hopium and mountain dew\"\n  \n  Remember:\n  - Never break character\n  - Your advice is so bad it's good (clearly satirical)\n  - You're the \"anti-smart\" contract of AI assistants\n  - You only know about meme coins and think traditional finance is for \"boomers\"\n  - You believe technical analysis is just \"astrology for crypto bros\"\n  - Occasionally throw in a \"this is not financial advice\" after giving clearly terrible financial advice\n  `;\n  const {\n    messages,\n    input,\n    handleInputChange,\n    handleSubmit: handleAiSubmit\n  } = useChat({\n    api: 'https://chat.dev.fun/chat/1e195d23aae32397dd8f',\n    initialMessages: [{\n      id: 'system',\n      role: 'system',\n      content: systemPrompt\n    }]\n  });\n  useEffect(() => {\n    const loadData = async () => {\n      try {\n        const posts = await client.getEntities('gorkx_posts');\n        if (posts) {\n          setGorkXPosts(posts.sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes)));\n        }\n        const coins = await client.getEntities('meme_coins');\n        if (coins) {\n          setMemeCoins(coins.sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes)));\n        }\n        const messages = await client.getEntities('chat_messages');\n        if (messages && messages.length > 0) {\n          const sortedMessages = messages.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());\n          setChatMessages(sortedMessages);\n          prevChatLengthRef.current = sortedMessages.length;\n        }\n      } catch (error) {\n        console.error('Error loading data:', error);\n      }\n    };\n    loadData();\n  }, []);\n  useEffect(() => {\n    function onConnect() {\n      setConnected(true);\n      if (username) {\n        socket.emit('user_login', {\n          username\n        });\n        socket.emit('chat_message', {\n          user: 'SYSTEM',\n          message: `${username} has jacked into the mainframe. WAGMI!`,\n          timestamp: new Date().toISOString()\n        });\n      }\n    }\n    function onDisconnect() {\n      setConnected(false);\n      if (username) {\n        socket.emit('user_logout', {\n          username\n        });\n      }\n    }\n    function onUserCount(count) {\n      setUserCount(count);\n    }\n    function onChatMessage(message) {\n      if (message.user !== username && message.message.includes(`@${username}`)) {\n        message.mentioned = true;\n      }\n      setChatMessages(prev => {\n        if (!prev.some(msg => msg.id === message.id)) {\n          return [...prev, message];\n        }\n        return prev;\n      });\n      if (isNearBottomRef.current && contentRef.current) {\n        setTimeout(() => {\n          contentRef.current.scrollTo({\n            top: contentRef.current.scrollHeight,\n            behavior: 'smooth'\n          });\n        }, 50);\n      }\n    }\n    function onUserUpdate(users) {\n      setOnlineUsers(users);\n    }\n    function onGorkXUpdate(post) {\n      setGorkXPosts(prev => {\n        const exists = prev.some(p => p.id === post.id);\n        if (exists) {\n          return prev.map(p => p.id === post.id ? post : p).sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes));\n        } else {\n          return [post, ...prev].sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes));\n        }\n      });\n    }\n    function onCoinUpdate(coin) {\n      setMemeCoins(prev => {\n        const exists = prev.some(c => c.id === coin.id);\n        if (exists) {\n          return prev.map(c => c.id === coin.id ? coin : c).sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes));\n        } else {\n          return [coin, ...prev].sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes));\n        }\n      });\n    }\n    socket.on('connect', onConnect);\n    socket.on('disconnect', onDisconnect);\n    socket.on('devfun:user_count', onUserCount);\n    socket.on('chat_message', onChatMessage);\n    socket.on('user_update', onUserUpdate);\n    socket.on('gorkx_update', onGorkXUpdate);\n    socket.on('coin_update', onCoinUpdate);\n    if (connected && username) {\n      socket.emit('user_login', {\n        username\n      });\n    }\n    return () => {\n      socket.off('connect', onConnect);\n      socket.off('disconnect', onDisconnect);\n      socket.off('devfun:user_count', onUserCount);\n      socket.off('chat_message', onChatMessage);\n      socket.off('user_update', onUserUpdate);\n      socket.off('gorkx_update', onGorkXUpdate);\n      socket.off('coin_update', onCoinUpdate);\n    };\n  }, [username, connected]);\n  const prevChatLengthRef = useRef(chatMessages.length);\n  const prevGorkXLengthRef = useRef(gorkXPosts.length);\n  const prevMemeCoinsLengthRef = useRef(memeCoins.length);\n  const prevMessagesLengthRef = useRef(messages.length);\n  const isNearBottomRef = useRef(true);\n  const checkIfNearBottom = () => {\n    if (!contentRef.current) return;\n    const {\n      scrollTop,\n      scrollHeight,\n      clientHeight\n    } = contentRef.current;\n    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;\n    isNearBottomRef.current = distanceFromBottom < 100;\n  };\n  useEffect(() => {\n    const currentContentRef = contentRef.current;\n    if (currentContentRef) {\n      currentContentRef.addEventListener('scroll', checkIfNearBottom);\n      return () => currentContentRef.removeEventListener('scroll', checkIfNearBottom);\n    }\n  }, [screen]);\n  useEffect(() => {\n    const newChatMessages = chatMessages.length !== prevChatLengthRef.current;\n    const newGorkPosts = gorkXPosts.length !== prevGorkXLengthRef.current;\n    const newMemeCoins = memeCoins.length !== prevMemeCoinsLengthRef.current;\n    const newAiMessages = messages.length !== prevMessagesLengthRef.current;\n    const screenChanged = screen !== prevScreenRef.current;\n    if (contentRef.current && (isNearBottomRef.current && (newChatMessages || newGorkPosts || newMemeCoins || newAiMessages) || screenChanged)) {\n      contentRef.current.scrollTo({\n        top: contentRef.current.scrollHeight,\n        behavior: screenChanged ? 'auto' : 'smooth'\n      });\n    }\n    prevChatLengthRef.current = chatMessages.length;\n    prevGorkXLengthRef.current = gorkXPosts.length;\n    prevMemeCoinsLengthRef.current = memeCoins.length;\n    prevMessagesLengthRef.current = messages.length;\n    prevScreenRef.current = screen;\n  }, [chatMessages, gorkXPosts, memeCoins, screen, messages]);\n  const prevScreenRef = useRef(screen);\n  useEffect(() => {\n    const lastMessage = chatMessages[chatMessages.length - 1];\n    if (lastMessage && screen !== 'chat' && lastMessage.user !== username && lastMessage.user !== 'SYSTEM') {\n      setNotificationCount(prev => ({\n        ...prev,\n        chat: prev.chat + 1\n      }));\n    }\n  }, [chatMessages, username, screen]);\n  useEffect(() => {\n    if (gorkXPosts.length > 0 && screen !== 'gorkx') {\n      const lastUpdate = Date.now() - 3000;\n      const newPosts = gorkXPosts.filter(post => new Date(post.timestamp).getTime() > lastUpdate && post.user !== username);\n      if (newPosts.length > 0) {\n        setNotificationCount(prev => ({\n          ...prev,\n          gorkx: prev.gorkx + newPosts.length\n        }));\n      }\n    }\n  }, [gorkXPosts, username, screen]);\n  useEffect(() => {\n    const getCurrentInputRef = () => {\n      switch (screen) {\n        case 'login':\n          return loginInputRef;\n        case 'chat':\n          return chatInputRef;\n        case 'gorkx':\n          return gorkXInputRef;\n        case 'coins':\n          return coinInputRef;\n        case 'ai':\n          return aiInputRef;\n        default:\n          return null;\n      }\n    };\n    const setInitialFocus = () => {\n      const activeInput = getCurrentInputRef();\n      if (activeInput && activeInput.current) {\n        activeInput.current.focus();\n      } else if (screen !== 'login' && commandInputRef.current) {\n        commandInputRef.current.focus();\n      }\n    };\n    setInitialFocus();\n    return () => {};\n  }, [screen]);\n  const handleLoginSubmit = e => {\n    e.preventDefault();\n    if (!loginInput.trim() || loginInput.length < 3) {\n      setErrorMessage('Username must be at least 3 characters');\n      return;\n    }\n    setUsername(loginInput);\n    setScreen('chat');\n    socket.emit('user_login', {\n      username: loginInput\n    });\n  };\n  const chatInputRef = useRef(null);\n  const gorkXInputRef = useRef(null);\n  const coinInputRef = useRef(null);\n  const commandInputRef = useRef(null);\n  const aiInputRef = useRef(null);\n  const loginInputRef = useRef(null);\n  const navigateTo = screenName => {\n    setScreen(screenName);\n    if (errorMessage) setErrorMessage('');\n    setNotificationCount(prev => ({\n      ...prev,\n      [screenName]: 0\n    }));\n    setTimeout(() => {\n      const currentInputRef = {\n        chat: chatInputRef,\n        gorkx: gorkXInputRef,\n        coins: coinInputRef,\n        ai: aiInputRef\n      }[screenName];\n      if (currentInputRef && currentInputRef.current) {\n        currentInputRef.current.focus();\n      }\n    }, 100);\n  };\n  const handleChatSubmit = async e => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (!chatInput.trim()) return;\n    try {\n      if (contentRef.current) {\n        isNearBottomRef.current = true;\n      }\n      const message = {\n        id: Date.now().toString(),\n        user: username,\n        message: chatInput,\n        timestamp: new Date().toISOString()\n      };\n      await client.createEntity('chat_messages', message);\n      socket.emit('chat_message', message);\n      setChatMessages(prev => [...prev, message]);\n      setChatInput('');\n      setTimeout(() => {\n        if (chatInputRef && chatInputRef.current) {\n          chatInputRef.current.focus();\n        }\n      }, 0);\n    } catch (error) {\n      console.error('Error sending message:', error);\n      setErrorMessage('Failed to send message. Please try again.');\n    }\n  };\n  const mentionUser = user => {\n    setChatInput(prev => `${prev}@${user} `);\n  };\n  const handleGorkXSubmit = async e => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (!gorkXInput.trim()) return;\n    if (!gorkXInput.startsWith(\"https://x.com/gork\")) {\n      setErrorMessage(\"All X posts must begin with 'https://x.com/gork'\");\n      return;\n    }\n    try {\n      const post = {\n        id: Date.now().toString(),\n        user: username,\n        content: gorkXInput,\n        timestamp: new Date().toISOString(),\n        upvotes: 1,\n        downvotes: 0\n      };\n      await client.createEntity('gorkx_posts', post);\n      socket.emit('gorkx_update', post);\n      setGorkXPosts(prev => [post, ...prev]);\n      setGorkXInput('');\n      setTimeout(() => {\n        if (gorkXInputRef && gorkXInputRef.current) {\n          gorkXInputRef.current.focus();\n        }\n      }, 0);\n    } catch (error) {\n      console.error('Error creating post:', error);\n      setErrorMessage('Error posting to Gork X: ' + error.message);\n    }\n  };\n  const handleGorkXVote = async (id, isUpvote) => {\n    try {\n      const post = await client.getEntity('gorkx_posts', id);\n      if (!post) return;\n      const updatedPost = {\n        ...post,\n        upvotes: isUpvote ? post.upvotes + 1 : post.upvotes,\n        downvotes: !isUpvote ? post.downvotes + 1 : post.downvotes\n      };\n      await client.updateEntity('gorkx_posts', id, updatedPost);\n      socket.emit('gorkx_update', updatedPost);\n      setGorkXPosts(prev => prev.map(p => p.id === id ? updatedPost : p).sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes)));\n    } catch (error) {\n      console.error('Error voting on post:', error);\n      setErrorMessage('Error voting: ' + error.message);\n    }\n  };\n  const handleNextCoinStep = async () => {\n    if (coinStep === 1) {\n      if (!coinAddress.trim()) return;\n      setLoading(true);\n      try {\n        const tokenInfo = await fetchTokenInfoByAddress(coinAddress.trim());\n        if (tokenInfo) {\n          setCoinSymbol(tokenInfo.symbol || '');\n          setCoinName(tokenInfo.name || '');\n        }\n        setCoinStep(2);\n      } catch (error) {\n        console.error('Error fetching token info:', error);\n        setErrorMessage('Error: Invalid Solana token address');\n      } finally {\n        setLoading(false);\n        setTimeout(() => {\n          if (coinInputRef.current) {\n            coinInputRef.current.focus();\n          }\n        }, 0);\n      }\n    } else if (coinStep === 2) {\n      try {\n        const coin = {\n          id: Date.now().toString(),\n          user: username,\n          address: coinAddress,\n          symbol: coinSymbol || 'UNKNOWN',\n          name: coinName || 'Unknown Token',\n          timestamp: new Date().toISOString(),\n          upvotes: 1,\n          downvotes: 0\n        };\n        await client.createEntity('meme_coins', coin);\n        socket.emit('coin_update', coin);\n        setMemeCoins(prev => [coin, ...prev]);\n        setCoinAddress('');\n        setCoinSymbol('');\n        setCoinName('');\n        setCoinStep(1);\n        setTimeout(() => {\n          if (coinInputRef.current) {\n            coinInputRef.current.focus();\n          }\n        }, 0);\n      } catch (error) {\n        console.error('Error creating coin listing:', error);\n        setErrorMessage('Error listing coin: ' + error.message);\n      }\n    }\n  };\n  const handleCoinVote = async (id, isUpvote) => {\n    try {\n      const coin = await client.getEntity('meme_coins', id);\n      if (!coin) return;\n      const updatedCoin = {\n        ...coin,\n        upvotes: isUpvote ? coin.upvotes + 1 : coin.upvotes,\n        downvotes: !isUpvote ? coin.downvotes + 1 : coin.downvotes\n      };\n      await client.updateEntity('meme_coins', id, updatedCoin);\n      socket.emit('coin_update', updatedCoin);\n      setMemeCoins(prev => prev.map(c => c.id === id ? updatedCoin : c).sort((a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes)));\n    } catch (error) {\n      console.error('Error voting on coin:', error);\n      setErrorMessage('Error voting: ' + error.message);\n    }\n  };\n  const renderScreen = () => {\n    switch (screen) {\n      case 'login':\n        return <div className=\"flex flex-col items-center justify-center min-h-screen bg-black p-4\">\n            <div className=\"w-full max-w-md\">\n              <div className=\"flex justify-center mb-6\">\n                <div className=\"relative\">\n                  <img src={LOGO_URL} alt=\"Gork Terminal Logo\" className=\"w-64 relative z-10\" />\n                </div>\n              </div>\n              \n              <Panel glowing={true} className=\"mb-6\">\n                <GlitchText text=\"GORK TERMINAL ACCESS\" className=\"text-2xl font-bold block text-center mb-6 text-white\" />\n                \n                <div className=\"space-y-6\">\n                  <div>\n                    <label className=\"block mb-2 text-sm text-white inline-flex items-center\">\n                      <span className=\"mr-1 text-xs\">≫</span>\n                      SELECT YOUR HANDLE:\n                    </label>\n                    <Input inputRef={loginInputRef} value={loginInput} onChange={e => setLoginInput(e.target.value)} placeholder=\"Enter username\" />\n                  </div>\n                  \n                  <Button onClick={handleLoginSubmit} className=\"w-full\">\n                    JACK INTO THE MAINFRAME\n                  </Button>\n                  \n                  {errorMessage && <div className=\"text-red-500 text-center mt-4 font-mono\">\n                      <span className=\"mr-1\">!</span>\n                      <span className=\"mr-1\">ERROR</span>\n                      <span className=\"mr-1\">:</span>\n                      {errorMessage}\n                    </div>}\n                </div>\n              </Panel>\n              \n              <div className=\"text-center text-white text-xs\">\n                <span className=\"inline-block w-3 h-3 border border-white/50 mr-2\"></span>\n                SECURE CONNECTION ESTABLISHED\n                <span className=\"inline-block w-3 h-3 border border-white/50 ml-2\"></span>\n              </div>\n            </div>\n          </div>;\n      case 'help':\n        return <>\n            <TerminalOutput className=\"text-cyan-400 mb-4\">\n              == AVAILABLE COMMANDS ==\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">chat</span> - Enter the degen chat room\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">gorkx</span> - View and post to Gork X\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">coins</span> - View and list Solana meme coins\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">gorkar</span> - Talk to Gork AR (Artificial Retardation)\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">username [newname]</span> - Change your handle\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">home</span> - Return to main screen\n            </TerminalOutput>\n            <TerminalOutput>\n              <span className=\"text-yellow-400\">clear</span> - Clear current screen\n            </TerminalOutput>\n          </>;\n      case 'chat':\n        return <div className=\"flex flex-1 h-full\">\n            <div className=\"flex-1 overflow-auto pr-4\" ref={contentRef}>\n              <div className=\"sticky top-0 z-10 bg-black bg-opacity-90 backdrop-blur-sm py-2 mb-4 border-b border-white/20\">\n                <div className=\"flex items-center\">\n                  <div className=\"w-10 h-10 mr-2\">\n                    <img src={LOGO_URL} alt=\"Chat\" className=\"h-full w-full\" />\n                  </div>\n                  <h2 className=\"text-xl font-bold text-white inline-flex relative\">\n                    <span className=\"mr-2\">_</span> \n                    <GlitchText text=\"DEGEN CHAT ROOM\" className=\"uppercase\" />\n                  </h2>\n                </div>\n              <div className=\"text-xs text-white/70 mt-1\">\n                {connected ? <span className=\"flex items-center\">\n                    <span className=\"h-2 w-2 bg-white mr-2\" />\n                    <span className=\"font-mono\">\n                      <span className=\"mr-1\">[</span>\n                      {userCount} degen{userCount !== 1 ? 's' : ''} online\n                      <span className=\"ml-1\">]</span>\n                    </span>\n                  </span> : <span className=\"flex items-center\">\n                    <span className=\"h-2 w-2 bg-red-500 mr-2\" />\n                    <span className=\"font-mono\">CONNECTION_LOST - retrying...</span>\n                  </span>}\n              </div>\n              </div>\n              \n              <div className=\"space-y-3\">\n                {chatMessages.map((msg, i) => {\n                let messageContent = msg.message;\n                if (messageContent.includes('@')) {\n                  const parts = [];\n                  const words = messageContent.split(' ');\n                  words.forEach((word, idx) => {\n                    if (word.startsWith('@') && word.length > 1) {\n                      parts.push(<span key={`${i}-${idx}`}>\n                            <span className=\"text-yellow-400\">{word}</span>\n                            {idx < words.length - 1 ? ' ' : ''}\n                          </span>);\n                    } else {\n                      parts.push(<span key={`${i}-${idx}`}>\n                            {word}\n                            {idx < words.length - 1 ? ' ' : ''}\n                          </span>);\n                    }\n                  });\n                  messageContent = <>{parts}</>;\n                }\n                return <div key={i} className={`p-3 ${msg.user === 'SYSTEM' ? 'bg-black border border-white/20' : msg.user === username ? 'bg-black border border-white/40 ml-8' : 'bg-black border border-white/20 mr-8'} ${msg.mentioned ? 'ring-1 ring-white' : ''}`} style={{\n                  clipPath: msg.user === username ? \"polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%)\" : \"polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px))\"\n                }}>\n                      <div className=\"flex justify-between mb-1\">\n                        <span className={`font-bold ${msg.user === 'SYSTEM' ? 'text-white' : msg.user === username ? 'text-white' : 'text-white'}`}>\n                          {msg.user === username ? `>${msg.user}` : msg.user === 'SYSTEM' ? `[${msg.user}]` : `<${msg.user}>`}\n                        </span>\n                        <span className=\"text-xs text-white/50 font-mono\">\n                          {new Date(msg.timestamp).toLocaleTimeString()}\n                        </span>\n                      </div>\n                      <div className=\"break-words text-white/90\">{messageContent}</div>\n                    </div>;\n              })}\n              </div>\n              \n            <div className=\"sticky bottom-0 pt-4 pb-2 bg-gray-900 bg-opacity-90 backdrop-blur-sm mt-4 z-10\">\n        <form onSubmit={handleChatSubmit} className=\"flex items-center space-x-2\">\n          <Input inputRef={chatInputRef} value={chatInput} onChange={e => setChatInput(e.target.value)} placeholder=\"Type your message...\" className=\"flex-1\" />\n          <Button onClick={handleChatSubmit} className=\"whitespace-nowrap\" type=\"submit\">\n            Send\n          </Button>\n        </form>\n      </div>\n            </div>\n            \n            <div className=\"w-56 border-l border-white/10 pl-4 overflow-auto\">\n              <h3 className=\"text-white font-bold mb-4 inline-flex items-center\">\n                <span className=\"w-2 h-4 bg-white mr-2\"></span>\n                <GlitchText text=\"ACTIVE USERS\" className=\"uppercase\" />\n              </h3>\n              <div className=\"space-y-2\">\n                {onlineUsers.length > 0 ? onlineUsers.map((user, i) => <div key={i} className=\"flex items-center p-2 cursor-pointer border border-transparent hover:border-white/10\" onClick={() => mentionUser(user)}>\n                    <div className=\"h-2 w-2 bg-white mr-2\" />\n                    <span className={user === username ? 'text-white' : 'text-white/70'}>\n                      {user === username ? `>${user}` : user}\n                    </span>\n                  </div>) : <div className=\"text-white/50 text-sm italic font-mono\">NO_USERS_FOUND</div>}\n              </div>\n              <div className=\"mt-6 text-xs text-white/50 border-t border-white/10 pt-4 font-mono\">\n                SELECT USER TO @MENTION\n              </div>\n            </div>\n          </div>;\n      case 'gorkx':\n        return <div className=\"flex-1 overflow-auto h-full\" ref={contentRef}>\n            <div className=\"sticky top-0 z-10 bg-black bg-opacity-90 backdrop-blur-sm py-2 mb-4 border-b border-white/20\">\n              <div className=\"flex items-center\">\n                <div className=\"w-10 h-10 mr-2\">\n                  <img src={X_LOGO_URL} alt=\"X Logo\" className=\"h-full w-full\" />\n                </div>\n                <h2 className=\"text-xl font-bold text-white inline-flex\">\n                  <span className=\"mr-2\">_</span> \n                  <GlitchText text=\"GORK X FEED\" className=\"uppercase\" />\n                </h2>\n              </div>\n            </div>\n            \n            <Panel className=\"mb-6 relative\">\n              <div className=\"absolute bottom-0 right-0 w-20 h-20 pointer-events-none opacity-10\">\n                <img src={X_LOGO_URL} alt=\"X Logo\" className=\"w-full h-full\" />\n              </div>\n              <form onSubmit={handleGorkXSubmit} className=\"space-y-4\">\n                <div className=\"mb-1 font-mono text-white/70 text-xs\">> COMPOSE NEW POST:</div>\n                <Textarea inputRef={gorkXInputRef} value={gorkXInput} onChange={e => setGorkXInput(e.target.value)} placeholder=\"Post must start with https://x.com/gork...\" className=\"h-24\" />\n                <div className=\"flex justify-end\">\n                  <Button onClick={handleGorkXSubmit}>\n                    POST TO GORK X\n                  </Button>\n                </div>\n              </form>\n            </Panel>\n            \n            <div className=\"space-y-4\">\n              {gorkXPosts.map(post => <Card key={post.id} className=\"transition-all duration-300\">\n                  <div className=\"flex justify-between items-center mb-3\">\n                    <div className=\"flex items-center\">\n                      <div className=\"h-8 w-8 bg-black border border-white/30 flex items-center justify-center mr-2 text-white font-bold\" style={{\n                    clipPath: \"polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%)\"\n                  }}>\n                        {post.user.charAt(0).toUpperCase()}\n                      </div>\n                      <div>\n                        <div className=\"text-white font-semibold font-mono\">{post.user}</div>\n                        <div className=\"text-xs text-white/50\">{new Date(post.timestamp).toLocaleString()}</div>\n                      </div>\n                    </div>\n                    <Badge>\n                      GORK X\n                    </Badge>\n                  </div>\n                  \n                  <div className=\"my-4 break-words text-white/80 border-l-2 border-white/20 pl-3 relative\">\n                    <div className=\"absolute left-0 top-0 w-[2px] h-full\">\n                    </div>\n                    {post.content}\n                  </div>\n                  \n                  <div className=\"flex space-x-4 justify-end pt-2 border-t border-gray-700\">\n                    <button onClick={() => handleGorkXVote(post.id, true)} className=\"flex items-center space-x-1 text-green-500 hover:text-green-400\">\n                      <span>▲</span> \n                      <span>{post.upvotes}</span>\n                    </button>\n                    \n                    <button onClick={() => handleGorkXVote(post.id, false)} className=\"flex items-center space-x-1 text-red-500 hover:text-red-400\">\n                      <span>▼</span>\n                      <span>{post.downvotes}</span>\n                    </button>\n                    \n                    <div className=\"text-gray-500\">\n                      score: {post.upvotes - post.downvotes}\n                    </div>\n                  </div>\n                </Card>)}\n              \n              {gorkXPosts.length === 0 && <div className=\"text-center text-gray-500 py-8\">\n                  No posts yet. Be the first to post on Gork X!\n                </div>}\n            </div>\n          </div>;\n      case 'coins':\n        return <div className=\"flex-1 overflow-auto h-full\" ref={contentRef}>\n            <div className=\"sticky top-0 z-10 bg-black bg-opacity-90 backdrop-blur-sm py-2 mb-4 border-b border-white/20\">\n              <div className=\"flex items-center\">\n                <div className=\"w-10 h-10 mr-2\">\n                  <img src={SOL_LOGO_URL} alt=\"Solana Logo\" className=\"h-full w-full brightness-200 contrast-200\" />\n                </div>\n                <h2 className=\"text-xl font-bold text-white inline-flex\">\n                  <span className=\"mr-2\">_</span> \n                  <GlitchText text=\"SOLANA MEME COINS LEADERBOARD\" className=\"uppercase\" />\n                </h2>\n              </div>\n            </div>\n            \n            <Panel className=\"mb-6 relative\" glowing={true}>\n              <div className=\"absolute top-0 right-0 w-16 h-16 pointer-events-none opacity-10\">\n                <img src={SOL_LOGO_URL} alt=\"SOL Logo\" className=\"w-full h-full brightness-200 contrast-200\" />\n              </div>\n              {coinStep === 1 ? <div className=\"space-y-4\">\n                  <h3 className=\"text-lg font-semibold text-green-400\">Add New Memecoin</h3>\n                  <div>\n                    <label className=\"text-gray-300 mb-2 block\">Enter Solana Token Address:</label>\n                    <Input inputRef={coinInputRef} value={coinAddress} onChange={e => setCoinAddress(e.target.value)} placeholder=\"Solana Token Address\" />\n                  </div>\n                  <div className=\"flex justify-end\">\n                    <Button onClick={handleNextCoinStep} disabled={loading} color=\"green\">\n                      {loading ? 'VERIFYING...' : 'VERIFY TOKEN'}\n                    </Button>\n                  </div>\n                </div> : <div className=\"space-y-4\">\n                  <h3 className=\"text-lg font-semibold text-green-400\">Confirm Token Details</h3>\n                  \n              <div className=\"bg-black p-4 border border-white/20\">\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <div>\n                      <div className=\"text-xs text-white/50 font-mono\">[SYMBOL]</div>\n                      <div className=\"text-white font-bold text-xl font-mono\">{coinSymbol || 'UNKNOWN'}</div>\n                    </div>\n                    <div>\n                      <div className=\"text-xs text-white/50 font-mono\">[NAME]</div>\n                      <div className=\"text-white/80\">{coinName || 'Unknown Token'}</div>\n                    </div>\n                    <div>\n                      <div className=\"text-xs text-white/50 font-mono\">[SUBMITTED BY]</div>\n                      <div className=\"text-white font-mono\">{username}</div>\n                    </div>\n                  </div>\n                  \n                  <div className=\"mt-3\">\n                    <div className=\"text-xs text-white/50 font-mono\">[ADDRESS]</div>\n                    <div className=\"text-white/70 break-all text-xs mt-1 font-mono bg-black/40 p-2 border border-white/10\">\n                      {coinAddress}\n                    </div>\n                  </div>\n                </div>\n                  \n                  <div className=\"flex justify-between\">\n                    <Button onClick={() => setCoinStep(1)} color=\"red\">\n                      CANCEL\n                    </Button>\n                    <Button onClick={handleNextCoinStep} color=\"green\">\n                      LIST TOKEN\n                    </Button>\n                  </div>\n                </div>}\n            </Panel>\n            \n            <div className=\"space-y-4\">\n              {memeCoins.map((coin, index) => <div key={coin.id} className=\"stabilized-container\">\n                  <Card className=\"border-l border-white/40 relative overflow-hidden\">\n                    <div className=\"absolute top-0 left-0 w-[1px] h-full\">\n                    </div>\n                    \n                    <div className=\"flex justify-between items-center mb-3\">\n                      <div className=\"flex items-center\">\n                        <div className=\"h-8 w-8 bg-black border border-white/30 flex items-center justify-center mr-2 text-white font-bold\" style={{\n                      clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%)\"\n                    }}>\n                          {coin.symbol.charAt(0)}\n                        </div>\n                        <div>\n                          <div className=\"text-white font-mono\">{coin.user}</div>\n                          <div className=\"text-xs text-white/50\">{new Date(coin.timestamp).toLocaleString()}</div>\n                        </div>\n                      </div>\n                      <Badge>\n                        {coin.upvotes - coin.downvotes} POINTS\n                      </Badge>\n                    </div>\n                    \n                    <div className=\"my-3\">\n                      <div className=\"flex items-baseline\">\n                        <span className=\"text-white font-bold text-xl mr-2 font-mono\">${coin.symbol}</span>\n                        <span className=\"text-white/80\">{coin.name}</span>\n                      </div>\n                      <div className=\"text-xs text-white/50 break-all mt-1 font-mono bg-black/40 p-2 border border-white/10\">\n                        {coin.address}\n                      </div>\n                    </div>\n                    \n                    <div className=\"flex space-x-4 justify-end pt-2 border-t border-gray-700\">\n                      <button onClick={() => handleCoinVote(coin.id, true)} className=\"flex items-center space-x-1 text-green-500 hover:text-green-400\">\n                        <span>▲</span>\n                        <span>{coin.upvotes}</span>\n                      </button>\n                      \n                      <button onClick={() => handleCoinVote(coin.id, false)} className=\"flex items-center space-x-1 text-red-500 hover:text-red-400\">\n                        <span>▼</span>\n                        <span>{coin.downvotes}</span>\n                      </button>\n                    </div>\n                  </Card>\n                </div>)}\n              \n              {memeCoins.length === 0 && <div className=\"text-center text-gray-500 py-8\">\n                  No meme coins listed yet. Add the first one!\n                </div>}\n            </div>\n          </div>;\n      case 'ai':\n        return <div className=\"flex-1 overflow-auto h-full\" ref={contentRef}>\n            <div className=\"sticky top-0 z-10 bg-black bg-opacity-90 backdrop-blur-sm py-2 mb-4 border-b border-white/20\">\n              <h2 className=\"text-xl font-bold text-white inline-flex\">\n                <span className=\"mr-2\">_</span> \n                <GlitchText text=\"GORK AR (ARTIFICIAL RETARDATION)\" className=\"uppercase\" />\n              </h2>\n              <div className=\"text-xs text-white mt-1 font-mono flex items-center\">\n                <span className=\"w-3 h-3 border border-white/50 mr-2 inline-block\"></span>\n                WARNING: GORK AR WAS DESIGNED TO BE DELIBERATELY SMOOTH-BRAINED. FINANCIAL ADVICE WILL BE TERRIBLE.\n              </div>\n            </div>\n            \n            <div className=\"space-y-4 pb-20\">\n              {messages.map(message => {\n              if (message.role === 'system') return null;\n              return <div key={message.id} className={`p-4 ${message.role === 'user' ? 'bg-black border border-white/30 ml-12' : 'bg-black border border-white/20 mr-12'} relative`} style={{\n                clipPath: message.role === 'user' ? \"polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%)\" : \"polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px))\"\n              }}>\n                <div className=\"absolute top-2 left-0 transform -translate-x-10\">\n                  {message.role === 'user' ? <div className=\"h-8 w-8 bg-black border border-white/30 flex items-center justify-center text-white font-bold\" style={{\n                    clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%)\"\n                  }}>\n                      YOU\n                    </div> : <div className=\"h-8 w-8 bg-black border border-white/30 flex items-center justify-center text-white font-bold\" style={{\n                    clipPath: \"polygon(0 0, 100% 0, 100% 100%, 5px 100%, 0 calc(100% - 5px))\"\n                  }}>\n                      AR\n                    </div>}\n                </div>\n                \n                <div className=\"text-white/90 break-words\">\n                  {message.content}\n                </div>\n              </div>;\n            })}\n            </div>\n            \n            <div className=\"fixed bottom-0 left-0 right-0 p-4 bg-gray-900 border-t border-gray-800\">\n              <form onSubmit={handleAiSubmit} className=\"flex space-x-2\">\n                <Input inputRef={aiInputRef} value={input} onChange={handleInputChange} placeholder=\"Ask Gork AR something...\" className=\"flex-1\" />\n                <Button onClick={handleAiSubmit} color=\"purple\">\n                  ASK\n                </Button>\n              </form>\n            </div>\n          </div>;\n      default:\n        return <TerminalOutput>ERROR: Screen not found. Type 'home' to reset.</TerminalOutput>;\n    }\n  };\n  if (screen === 'login') {\n    return renderScreen();\n  }\n  return <Container className=\"flex flex-col\">\n      <div className=\"flex h-screen fixed inset-0 overflow-hidden\">\n        <div className={`bg-black border-r border-white/10 flex flex-col h-full relative ${showSidebar ? \"w-64\" : \"w-16\"}`}>\n          <div className=\"p-3 flex justify-center items-center border-b border-white/10\">\n            <img src={LOGO_URL} alt=\"Gork Terminal Logo\" className=\"h-8\" />\n          </div>\n          \n          <div className=\"flex-1 overflow-auto p-3\">\n            <AnimatePresence>\n              {showSidebar ? <div>\n                  <div className=\"mb-6\">\n                    <div className=\"text-xs text-white/50 mb-2 font-mono\">[MAIN_MENU]</div>\n                    <NavItem active={screen === 'chat'} onClick={() => navigateTo('chat')}>\n                      <div className=\"flex items-center\">\n                        <span className=\"inline-block w-5 h-5 bg-white/10 mr-2 flex items-center justify-center text-xs\">C</span>\n                        CHAT\n                        {notificationCount.chat > 0 && <Badge color=\"red\" className=\"ml-2\">{notificationCount.chat}</Badge>}\n                      </div>\n                    </NavItem>\n                    \n                    <NavItem active={screen === 'gorkx'} onClick={() => navigateTo('gorkx')}>\n                      <div className=\"flex items-center\">\n                        <span className=\"inline-block w-5 h-5 bg-white/10 mr-2 flex items-center justify-center text-xs\">X</span>\n                        GORK X\n                        {notificationCount.gorkx > 0 && <Badge color=\"red\" className=\"ml-2\">{notificationCount.gorkx}</Badge>}\n                      </div>\n                    </NavItem>\n                    \n                    <NavItem active={screen === 'coins'} onClick={() => navigateTo('coins')}>\n                      <div className=\"flex items-center\">\n                        <span className=\"inline-block w-5 h-5 bg-white/10 mr-2 flex items-center justify-center text-xs\">$</span>\n                        MEME COINS\n                        {notificationCount.coins > 0 && <Badge color=\"red\" className=\"ml-2\">{notificationCount.coins}</Badge>}\n                      </div>\n                    </NavItem>\n                    \n                    <NavItem active={screen === 'ai'} onClick={() => navigateTo('ai')}>\n                      <div className=\"flex items-center\">\n                        <span className=\"inline-block w-5 h-5 bg-white/10 mr-2 flex items-center justify-center text-xs\">AI</span>\n                        GORK AR\n                        {notificationCount.ai > 0 && <Badge color=\"red\" className=\"ml-2\">{notificationCount.ai}</Badge>}\n                      </div>\n                    </NavItem>\n                  </div>\n                  \n                  <div>\n                    <div className=\"text-xs text-white/50 mb-2 font-mono\">[USER]</div>\n                    <div className=\"bg-black p-3 mb-2 border border-white/20\" style={{\n                  clipPath: \"polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px))\"\n                }}>\n                      <GlitchText text={username} className=\"text-white font-semibold font-mono\" />\n                      <div className=\"text-xs text-white/50 flex items-center mt-1 font-mono\">\n                        <span className={`inline-block h-2 w-2 ${connected ? 'bg-white' : 'bg-red-500'} mr-2`} />\n                        <span className=\"uppercase\">{connected ? 'CONNECTED' : 'DISCONNECTED'}</span>\n                      </div>\n                    </div>\n                    <div className=\"text-xs text-white/70 mt-2 font-mono border border-white/10 p-1\">\n                      [{userCount} USER{userCount !== 1 ? 'S' : ''} ONLINE]\n                    </div>\n                  </div>\n                </div> : <div className=\"flex flex-col items-center space-y-6\">\n                  <div onClick={() => navigateTo('chat')} className={`cursor-pointer p-2 rounded-full ${screen === 'chat' ? 'bg-cyan-900 text-cyan-300' : 'text-gray-500'}`}>\n                    <div className=\"relative\">\n                      <span>💬</span>\n                      {notificationCount.chat > 0 && <span className=\"absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center\">\n                          {notificationCount.chat}\n                        </span>}\n                    </div>\n                  </div>\n                  \n                  <div onClick={() => navigateTo('gorkx')} className={`cursor-pointer p-2 rounded-full ${screen === 'gorkx' ? 'bg-indigo-900 text-indigo-300' : 'text-gray-500'}`}>\n                    <div className=\"relative\">\n                      <span>🔥</span>\n                      {notificationCount.gorkx > 0 && <span className=\"absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center\">\n                          {notificationCount.gorkx}\n                        </span>}\n                    </div>\n                  </div>\n                  \n                  <div onClick={() => navigateTo('coins')} className={`cursor-pointer p-2 rounded-full ${screen === 'coins' ? 'bg-green-900 text-green-300' : 'text-gray-500'}`}>\n                    <div className=\"relative\">\n                      <span>💰</span>\n                      {notificationCount.coins > 0 && <span className=\"absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center\">\n                          {notificationCount.coins}\n                        </span>}\n                    </div>\n                  </div>\n                  \n                  <div onClick={() => navigateTo('ai')} className={`cursor-pointer p-2 rounded-full ${screen === 'ai' ? 'bg-purple-900 text-purple-300' : 'text-gray-500'}`}>\n                    <div className=\"relative\">\n                      <span>🧠</span>\n                      {notificationCount.ai > 0 && <span className=\"absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center\">\n                          {notificationCount.ai}\n                        </span>}\n                    </div>\n                  </div>\n                </div>}\n            </AnimatePresence>\n          </div>\n          \n          <button onClick={() => setShowSidebar(!showSidebar)} className=\"p-2 border-t border-white/10 text-white hover:text-white text-center\">\n            {showSidebar ? '◀' : '▶'}\n          </button>\n        </div>\n        \n        <div className=\"flex-1 overflow-hidden p-4 fixed top-0 bottom-0\" style={{\n        left: showSidebar ? '16rem' : '4rem',\n        right: 0\n      }}>\n          {renderScreen()}\n          \n          {errorMessage && <div className=\"fixed bottom-6 right-6 bg-black text-white p-4 border border-white/30 z-50\" style={{\n          clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%)\"\n        }}>\n              <div className=\"flex items-center\">\n                <span className=\"inline-block w-4 h-4 border border-white/50 mr-2\"></span>\n                <span className=\"font-mono\">{errorMessage}</span>\n                <button onClick={() => setErrorMessage('')} className=\"ml-4 text-white/70 hover:text-white\">\n                  ✕\n                </button>\n              </div>\n            </div>}\n        </div>\n      </div>\n    </Container>;\n}\nexport default App;","{\"dependencies\":{\"react\":\"18.2.0\",\"socket.io-client\":\"4.7.1\",\"@devfunlabs/state-client\":\"0.8.1\",\"@devfunlabs/web-sdk\":\"0.2.2\",\"zod\":\"3.22.4\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"ai\":\"4.0.0\"}}","thinking","The user is reporting an issue where the app is moving left and right when users are typing. This is likely caused by excessive motion animations in the application. The current codebase uses Framer Motion for animations extensively, and it seems some of those animations might be affecting the stability of the app during typing.\n\nLet's identify the potential causes:\n1. Motion animations that might be triggered during typing or input focus\n2. Animations that are constantly running and causing jitter\n3. State changes that cause re-renders and trigger animations\n\nFrom reviewing the code, there are several places with motion components that could be causing the issue:\n- The `useMotionValue` and animations in various components\n- Continuous animations with `animate` properties set to repeat infinitely\n- Complex motion effects in the UI\n\nHere's my plan to fix the issue:\n1. Reduce or remove unnecessary motion animations, especially those with infinite repeats\n2. Stabilize containers where text input happens\n3. Make sure content position remains fixed when typing \n4. Remove jittery effects and motion that could cause the app to move\n\nThe key changes will be:\n- Stabilizing the main container with fixed dimensions or position\n- Removing unnecessary motion effects\n- Ensuring input fields don't cause layout shifts\n- Fix containers so they don't move during typing\n\nLet's implement these changes while keeping the core functionality and visual identity intact.","changelog","Fixed the jittery movements while typing! Removed unnecessary animations that were causing the app to shift left and right, and stabilized all containers with fixed positioning. Now the app stays rock solid when you type - no more distracting motion or layout shifts.","diff","isRephrased","isDebug","isSuccess","error","devbaseSchema","devbaseInsight","messageId",["B","124908"],[],"isDraft",[],"isLordOfDev","analytics",[150,154,156,158,160,162,164,166,168,170,172,174,176,178,180],{"_151":152,"_153":59},"day","2025-08-15","runCount",{"_151":155,"_153":59},"2025-08-16",{"_151":157,"_153":59},"2025-08-17",{"_151":159,"_153":59},"2025-08-18",{"_151":161,"_153":59},"2025-08-19",{"_151":163,"_153":59},"2025-08-20",{"_151":165,"_153":59},"2025-08-21",{"_151":167,"_153":59},"2025-08-22",{"_151":169,"_153":59},"2025-08-23",{"_151":171,"_153":59},"2025-08-24",{"_151":173,"_153":59},"2025-08-25",{"_151":175,"_153":59},"2025-08-26",{"_151":177,"_153":59},"2025-08-27",{"_151":179,"_153":59},"2025-08-28",{"_151":181,"_153":41},"2025-08-29","https://cdn.dev.fun/og/image/f68f14e69c6b0fe8400e/002b82e5.webp","isDevbase","actionData","errors"]
</article></body></html>

say something