[{"_1":2,"_129":-5,"_130":-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,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_5":43,"_54":55,"_56":40,"_57":58,"_59":58,"_60":58,"_61":58,"_62":58,"_63":58,"_64":58,"_65":58,"_66":17,"_67":17,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_91":-5,"_92":17,"_93":94,"_125":30,"_126":127,"_128":17},"id","1e195d23aae32397dd8f","isMyApp",false,"name","gorkterm","description","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.\"","brief","ASCII-powered terminal where degens chat, shill coins, and consult an AI that's proudly dumber than your portfolio.","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/1e195d23aae32397dd8f/61386_fcb2fd2a.webp","cdnUrl","https://cdn.dev.fun/app/1e195d23aae32397dd8f/61386","createdAt",["D",1746068309136],"updatedAt",["D",1746071129589],"lastCommitId",["B","61386"],"tier",1,"credits",117,{"_14":44,"_45":46,"_47":-5,"_48":46,"_49":50,"_51":-5,"_52":53},"6ce198bf-1c7d-42db-806d-e67a69afcfe8","uniqueId","DVgNGvFv1Lpo3E2tYg9Kmz2vsouh7LWnyPobpKTKSHmN","username","solanaWallet","displayName","DVg...HmN","bio","avatar","/avatar.svg","commitCount",11,"forkCount","likeCount",0,"runsCount","downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","YkimQodPBMtLAvTWNwKqvNBNLNjaUeBpj8uEE7bpump","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-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 = () =>

;\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/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;","packageJson","{\"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\"}}","appFunctions",[],"token",{"_18":78,"_79":80,"_81":82,"_83":84,"_85":86,"_87":-5,"_88":-5,"_89":40,"_90":40,"_68":69},"Gork Terminal","symbol","GorkT","price",0.0000042,"marketcap",5817.98695658,"image","https://pump.mypinata.cloud/ipfs/QmTDZjvB9o59qKwvKC7KpC98eex6VpfmAKTPo4w28RzrYb?img-width=256&img-dpr=2","website","twitter","devCount","appCount","upstreamApp","isLordOfDev","analytics",[95,99,101,103,105,107,109,111,113,115,117,119,121,123],{"_96":97,"_98":58},"day","2025-08-15","runCount",{"_96":100,"_98":58},"2025-08-16",{"_96":102,"_98":58},"2025-08-17",{"_96":104,"_98":58},"2025-08-18",{"_96":106,"_98":58},"2025-08-19",{"_96":108,"_98":58},"2025-08-20",{"_96":110,"_98":58},"2025-08-21",{"_96":112,"_98":58},"2025-08-22",{"_96":114,"_98":58},"2025-08-23",{"_96":116,"_98":58},"2025-08-24",{"_96":118,"_98":58},"2025-08-25",{"_96":120,"_98":58},"2025-08-26",{"_96":122,"_98":58},"2025-08-27",{"_96":124,"_98":58},"2025-08-28","snapshot","ogImage","https://cdn.dev.fun/og/image/1e195d23aae32397dd8f/218e0bbe.webp","isDevbase","actionData","errors"]
</article></body></html>

say something