{name}

Spaces

Tune in to live audio conversations

\n )\n}\n\nexport async function spaceImage(channel: string) {\n const space = await fetchSpace(channel)\n if (!space) return await homeImage()\n\n const users = await fetchUsersById([space.created_by, ...space.hosts, ...space.speakers].join(','))\n\n const hostFids = [space.created_by, ...space.hosts]\n const speakerFids = [...space.speakers]\n const creator = users?.find((u) => u.fid === space?.created_by)\n const speakers = users?.filter((u) => speakerFids.includes(u.fid))\n\n return await ogImage(\n

Space

{space?.name || channel}

\n\n {creator && (\n

Hosted by

{creator?.username}

\n )}\n\n {speakers?.length > 1 && (\n

Speakers

\n {speakers?.slice(0, 15).map((s) => (\n

\n ))}\n

\n )}\n

\n )\n}\n\nexport async function iconImage() {\n return await ogImage(\n

,\n {\n width: 512,\n height: 512,\n }\n )\n}\n\n//////////\n\nexport async function ogImage(body, options = {}) {\n const svg = await satori(body, {\n width: 945,\n height: 630,\n ...options,\n fonts: await loadFonts(),\n loadAdditionalAsset: async (code, segment) => {\n console.log('loadAdditionalAsset', code, segment)\n if (code === 'emoji') {\n const unicode = segment.codePointAt(0).toString(16).toUpperCase()\n return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode))\n }\n return ''\n },\n })\n return await render(svg)\n}\n\nconst loadFonts = async () => {\n const fontsConfig = [\n { name: 'Inter', weight: 400, fontFile: 'Inter-Regular.otf' },\n // { name: \"Inter\", weight: 500, fontFile: \"Inter-Medium.otf\" },\n { name: 'Inter', weight: 600, fontFile: 'Inter-SemiBold.otf' },\n // { name: \"Inter\", weight: 700, fontFile: \"Inter-Bold.otf\" },\n ]\n const fontPromises = fontsConfig.map(async (font) => {\n const fontUrl = 'https://cdn.jsdelivr.net/npm/@tamagui/font-inter@1.108.3/otf/' + font.fontFile\n const fontArrayBuf = await fetch(fontUrl).then((res) => res.arrayBuffer())\n return { name: font.name, data: fontArrayBuf, weight: font.weight }\n })\n const fonts: any = await Promise.all(fontPromises)\n\n return fonts\n}\n\nconst loadEmoji = (code) => {\n // const api = `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${code.toLowerCase()}.svg`\n const api = `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_color.svg`\n return fetch(api).then((r) => r.text())\n}\n\nconst base64Icon = (svg: any) => {\n if (!svg) return undefined\n svg = svg.replace('stroke=\"currentColor\"', 'stroke=\"white\"')\n const base64 = Buffer.from(svg).toString('base64')\n // console.log('getIconDataUrl', name, svg, base64)\n return `data:image/svg+xml;base64,${base64}`\n}\n",[],[178,215],{"_103":224,"_95":225,"_149":115,"_151":179,"_152":136,"_153":119,"_155":117,"_105":226,"_100":227,"_157":228,"_159":229,"_160":27,"_161":230,"_162":231,"_98":232},"17ebad38-3040-11f0-b763-569c3dd06744","index.tsx",["D",1747171228567],20,"http","/** @jsxImportSource npm:hono/jsx */\nimport { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nimport { handleAgoraEndpoints } from \"./agora.ts\";\nimport { embedMetadata, handleFarcasterEndpoints, name } from \"./farcaster.ts\";\nimport { handleImageEndpoints } from \"./image.tsx\";\nimport { fetchNeynarGet } from \"./neynar.ts\";\n\nconst app = new Hono();\n\nhandleImageEndpoints(app);\nhandleFarcasterEndpoints(app);\nhandleAgoraEndpoints(app);\n\napp.get(\"/testxxx\", c =>\n c.json({\n hello: \"world\",\n baseUrl: c.req.url.replace(c.req.path, \"\"),\n \"import.meta.url\": import.meta.url,\n // AGORA_CUSTOMER_SECRET: Deno.env.get(\"AGORA_CUSTOMER_SECRET\"),\n }));\n\napp.get(\"/neynar-proxy\", async c => {\n const url = new URL(c.req.url);\n const path = url.searchParams.get(\"path\");\n const response = await fetchNeynarGet(path);\n return c.json(response);\n});\n\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\napp.get(\"/\", async c => {\n const url = new URL(c.req.url);\n const path = c.req.url?.replace(url.origin, \"\");\n return c.html(generateHtml(url.origin, path));\n});\napp.get(\"*\", async c => {\n const url = new URL(c.req.url);\n const path = c.req.url?.replace(url.origin, \"\");\n return c.html(generateHtml(url.origin, path));\n});\n\nfunction generateHtml(baseUrl: string, path: string = \"/\") {\n return (\n \n \n {name}\n \n \n \n \n \n \n \n

\n {/* */}\n \n \n \n );\n}\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;","spaces-fc",[],[178,225],{"_103":234,"_95":235,"_149":236,"_151":179,"_152":136,"_153":119,"_155":117,"_105":237,"_100":170,"_157":190,"_159":238,"_160":27,"_161":-5,"_162":239,"_98":240},"17ebb0bc-3040-11f0-b763-569c3dd06744","neynar.ts","575ebc70-1b8d-11f0-8a63-569c3dd06744",["D",1747171228567],"const NEYNAR_API_KEY = Deno.env.get('NEYNAR_API_KEY') || 'NEYNAR_API_DOCS'\nconst headers = {\n 'Content-Type': 'application/json',\n 'x-api-key': NEYNAR_API_KEY,\n}\n\nexport const fetchNeynarGet = async (path: string) => {\n return await fetch('https://api.neynar.com/v2/farcaster/' + path, {\n method: 'GET',\n headers: headers,\n }).then((r) => r.json())\n}\n\nexport const fetchNeynarPost = async (path: string, body: any) => {\n return await fetch('https://api.neynar.com/v2/farcaster/' + path, {\n method: 'POST',\n headers: headers,\n body: JSON.stringify(body),\n }).then((r) => r.json())\n}\n\n//////////\n\nexport function fetchUsersById(fids: string) {\n return fetchNeynarGet(`user/bulk?fids=${fids}`).then((r) => r.users)\n}\n",[],[178,235],[178],{"_103":243,"_95":244,"_149":245,"_151":-5,"_152":136,"_153":180,"_155":117,"_105":246,"_100":31,"_157":158,"_159":-5,"_160":27,"_161":-5,"_162":247,"_98":333},"48d07e38-11b4-11f0-bdb9-569c3dd06744","frontend","303dd49d-5c87-40b1-886d-7ab3d274c65e",["D",1743812646130],[248,265,292,316,325],{"_103":249,"_95":250,"_149":251,"_151":245,"_152":136,"_153":180,"_155":117,"_105":252,"_100":31,"_157":158,"_159":-5,"_160":27,"_161":-5,"_162":253,"_98":264},"48d07316-11b4-11f0-bdb9-569c3dd06744","components","63cae51c-afe6-4c60-ba46-25640fcfccca",["D",1743812646130],[254],{"_103":255,"_95":256,"_149":257,"_151":251,"_152":136,"_153":258,"_155":117,"_105":259,"_100":260,"_157":190,"_159":261,"_160":27,"_161":-5,"_162":262,"_98":263},"7959fb0a-2ecf-11f0-824b-569c3dd06744","ui.tsx","8c0642ac-3b57-4e02-95ea-ed4cb09f37ff",663,["D",1747012907743],25,"/** @jsxImportSource https://esm.sh/react@19 */\nimport { ArrowLeft, Share } from \"https://esm.sh/lucide-react\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nexport function Section({ children, ...props }: any) {\n const sectionClass = `p-5 rounded-3xl bg-neutral-400/15 ${props.className || \"\"}`;\n return

{children}

;\n}\n\nexport const Input = ({ ...props }) => {\n let sizeStyles = \"text-md px-3 py-1\";\n if (props.sm || props.size == \"sm\") sizeStyles = \"text-sm px-2 py-1\";\n if (props.lg || props.size == \"lg\") sizeStyles = \"text-lg px-3 py-2\";\n const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm \n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\tplaceholder:text-neutral-500 placeholder:opacity-50 disabled:opacity-50 disabled:bg-neutral-200/70 dark:disabled:bg-neutral-800/70\n\t${sizeStyles}\n\t${props.className || \"\"}\n\t`;\n\n return ;\n};\n\nexport const TextArea = ({ ...props }) => {\n const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm px-3 py-2\n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\tplaceholder:text-neutral-500 placeholder:opacity-50 \n\t${props.className || \"\"}\n\t`;\n\n return

;\n};\n\nexport const Select = ({ ...props }) => {\n  const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm px-3 py-2\n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\t${props.className || \"\"}\n\t`;\n\n  return <select {...props} className={className} />;\n};\n\nexport const Checkbox = ({ label, ...props }) => {\n  const className = `\n\th-4 w-4 rounded-xl bg-inherit text-neutral-700\n\tborder border-neutral-400 dark:border-neutral-600  focus:ring-neutral-700 dark:focus:ring-neutral-300 \n\txfocus:ring-0 xfocus:outline-red-500 focus:ring-offset-transparent focus:ring-offset-0\n\t${props.className || \"\"}\n\t`;\n\n  return (\n    <div className=\"relative flex gap-x-2\">\n      <div className=\"flex  items-center\">\n        <input type=\"checkbox\" {...props} className={className} />\n      </div>\n      <div className=\"text-sm flex  items-center\">\n        <label htmlFor={props.id} className={props?.checked ? \"font-medium\" : \"opacity-50\"}>\n          {label}\n        </label>\n      </div>\n    </div>\n  );\n};\n\nexport const Button = ({ ...props }) => {\n  let sizeStyles = \"text-md px-3 py-1\";\n  if (props.sm || props.size == \"sm\") sizeStyles = \"text-sm px-2 py-1\";\n  if (props.lg || props.size == \"lg\") sizeStyles = \"text-lg px-4 py-2\";\n  let variantStyles =\n    \"bg-neutral-900 border-2 border-transparent dark:bg-neutral-100 text-neutral-100 dark:text-neutral-900 \";\n  if (props.variant === \"outline\") {\n    variantStyles =\n      \"bg-transparent border-2 border-neutral-400/40 text-neutral-900 dark:text-neutral-100\";\n  }\n\n  const className = `\n\tflex flex-row justify-center items-center   rounded-xl font-semibold \n\t${variantStyles}\n\tshadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600  \n\topacity-95 hover:opacity-100 disabled:opacity-50\n\t${sizeStyles}\n\t${props.className || \"\"}\n\t`;\n\n  if (props.href && !props.disabled) return <a {...props} className={className} />;\n  return <button {...props} className={className} />;\n};\n\n// export function Input(props: any) {\n//   const inputClass = \"dark:bg-white dark:text-black bg-black text-white rounded-md px-3 py-1 \";\n//   return <input class={inputClass} {...props} />;\n// }\n\n// export function Button(props: any) {\n//   const buttonClass = \"dark:bg-white dark:text-black bg-black text-white rounded-md px-3 py-1 \";\n//   return <button class={buttonClass} {...props} />;\n// }\n\nexport function MonoButton(props: any) {\n  return (\n    <Button {...props}>\n      <div class=\"font-mono text-sm\">{props.children}</div>\n    </Button>\n  );\n}\n\nexport function MonoButtonWithStatus(props: any) {\n  const [status, setStatus] = useState<any>();\n  const handleClick = async () => {\n    try {\n      setStatus(\"...\");\n      const result = await props.onClick?.();\n      setStatus(formatJSON(result));\n    } catch (err) {\n      console.error(err);\n      setStatus(\"Error: \" + err);\n    }\n  };\n\n  return (\n    <div>\n      <MonoButton {...props} onClick={handleClick} />\n      {status && <div class={\"mt-2 font-mono text-xs opacity-50 whitespace-pre-wrap break-all\"}>{status}</div>}\n    </div>\n  );\n}\n\nexport function formatJSON(json: any) {\n  return JSON.stringify(json, null, 2);\n}\n\nexport const shorten = (string, start, end) => {\n  return string.substring(0, start) + \"…\" + string.substring(string.length - end);\n};\n\nexport const formatAddress = (address) => {\n  if (!address) return \"\";\n  if (address.length < 20) return address;\n  return shorten(address, 6, 4);\n};\n\nexport function BackButton({}) {\n  return <ArrowLeft className=\"w-5 h-5 m-2 cursor-pointer opacity-50\" onClick={() => window.location.href = \"/\"} />;\n}\n\nexport function ShareButton({ onClick }) {\n  return <Share className=\"w-5 h-5 m-2 cursor-pointer opacity-50\" onClick={onClick} />;\n}\n\nexport function Sheet({ children, showSheet, setShowSheet }: any) {\n  return (\n    <>\n      {showSheet && (\n        <div\n          className=\"absolute top-0 left-0 w-full h-full bg-neutral-100/80 dark:bg-neutral-900/80 z-10\"\n          onClick={() => setShowSheet(false)}\n        >\n          <div className=\"absolute bottom-0 left-0 w-full bg-white dark:bg-black rounded-t-3xl pb-5\">\n            <div className=\"flex flex-col items-stretch gap-3 max-w-2xl mx-auto p-5\">{children}</div>\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n",[],[244,250,256],[244,250],{"_103":266,"_95":267,"_149":268,"_151":245,"_152":136,"_153":269,"_155":117,"_105":270,"_100":31,"_157":158,"_159":-5,"_160":27,"_161":-5,"_162":271,"_98":291},"7e30aac0-1282-11f0-9065-569c3dd06744","screens","7e30ab74-1282-11f0-9065-569c3dd06744",225,["D",1743901212057],[272,282],{"_103":273,"_95":274,"_149":275,"_151":268,"_152":136,"_153":276,"_155":117,"_105":277,"_100":278,"_157":190,"_159":279,"_160":27,"_161":-5,"_162":280,"_98":281},"4631ac18-2a7a-11f0-be55-569c3dd06744","Home.tsx","82e1f6d2-1282-11f0-8a52-569c3dd06744",640,["D",1746536510029],119,"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from 'https://esm.sh/@farcaster/frame-sdk'\nimport { useQuery } from 'https://esm.sh/@tanstack/react-query@5'\nimport { LoaderCircle, Mic, MicOff } from 'https://esm.sh/lucide-react'\nimport { NavLink, Route, Routes, useNavigate, useParams } from 'https://esm.sh/react-router@7'\nimport { useEffect, useRef, useState } from 'https://esm.sh/react@19'\n\nimport { Button, Input, Section, ShareButton } from '../components/ui.tsx'\nimport { fetchUsersById } from '../util/neynar.ts'\nimport { supabase } from '../util/db.ts'\n\nexport function Home() {\n  const [context, setContext] = useState<any>()\n  useEffect(() => {\n    fcsdk.context.then(setContext)\n  }, [])\n\n  const onShare = () => {\n    if (!context) return\n    const text = `Check out Spaces mini app by @moe!\\n`\n    fcsdk?.actions?.composeCast?.({ text, embeds: [window.location.href] })\n  }\n\n  return (\n    <div className=\"p-5 mb-8\">\n      <div className=\"flex flex-row items-center gap-2  mb-10\">\n        <Mic className=\"w-6 h-6 mt-[3]\" />\n        <h1 className=\"text-2xl font-medium grow\">Spaces</h1>\n        {context && <ShareButton onClick={onShare} />}\n      </div>\n\n      <Spaces />\n      <div className=\"h-8\"></div>\n      <CreateForm />\n    </div>\n  )\n}\n\nfunction Spaces() {\n  const queryFn = async () => {\n    const agoraChannels = await fetch(`/api/channels`)\n      .then((r) => r.json())\n      .then((r) => r?.data?.channels)\n    const { data: dbSpaces, error } = await supabase.from('spaces').select().limit(1000)\n\n    const results = agoraChannels.map((channel: any) => {\n      const space = dbSpaces.find((space: any) => space.id == channel.channel_name)\n      return { ...channel, ...(space || {}) }\n    })\n\n    console.log('Spaces', agoraChannels, dbSpaces, results)\n    return results\n  }\n  const { data: spaces } = useQuery({ queryKey: ['spaces'], queryFn })\n\n  if (!spaces) {\n    return (\n      <div className=\"flex flex-row items-center justify-center p-4 opacity-50 h-32\">\n        <LoaderCircle className=\"animate-spin\" />\n      </div>\n    )\n  }\n\n  if (spaces.length == 0) {\n    return (\n      <Section className=\"flex flex-row items-center justify-center gap-4 h-32\">\n        <div className=\"text-xs opacity-50 align-center uppercase\">No live spaces</div>\n      </Section>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      {spaces?.map((space: any) => (\n        <Space key={space.channel_name} space={space} />\n      ))}\n    </div>\n  )\n}\n\nfunction Space({ space }: any) {\n  const navigate = useNavigate()\n\n  return (\n    <Section className=\"flex flex-row items-center justify-between gap-4\">\n      <div>\n        <div className=\"text-xl font-semibold\">{space.name || space.channel_name}</div>\n        <div className=\"text-sm opacity-50\">\n          {space.user_count} user{space.user_count == 1 ? '' : 's'}\n        </div>\n      </div>\n      <Button size=\"lg\" onClick={() => navigate(`/space/${encodeURIComponent(space.channel_name)}`)}>\n        Join\n      </Button>\n    </Section>\n  )\n}\n\nfunction CreateForm({}) {\n  const [context, setContext] = useState<any>()\n  useEffect(() => {\n    fcsdk.context.then(setContext)\n  }, [])\n\n  const navigate = useNavigate()\n  const [name, setName] = useState('')\n\n  const onCreate = async () => {\n    const id = Math.random().toString(36).substring(2, 12)\n    const { error } = await supabase.from('spaces').insert({ id: id, name: name, created_by: context?.user?.fid })\n    navigate(`/space/${encodeURIComponent(id)}`)\n  }\n\n  return (\n    <Section className=\"flex flex-col gap-4\">\n      <Input\n        size=\"lg\"\n        onChange={(e) => setName(e.target.value)}\n        placeholder=\"Space Title\"\n        autoCapitalize=\"on\"\n        autoCorrect=\"on\"\n        type=\"text\"\n        value={name}\n      />\n      <Button size=\"lg\" disabled={!name} onClick={onCreate}>\n        Create Space\n      </Button>\n    </Section>\n  )\n}\n",[],[244,267,274],{"_103":283,"_95":284,"_149":285,"_151":268,"_152":136,"_153":135,"_155":117,"_105":286,"_100":287,"_157":190,"_159":288,"_160":27,"_161":-5,"_162":289,"_98":290},"2daf19ee-30d0-11f0-93e5-569c3dd06744","Space.tsx","863114d4-1283-11f0-95d3-569c3dd06744",["D",1747233112615],160,"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from 'https://esm.sh/@farcaster/frame-sdk'\nimport { useQuery } from 'https://esm.sh/@tanstack/react-query@5'\nimport { AudioLines, Mic, MicOff, LoaderCircle } from 'https://esm.sh/lucide-react'\nimport { NavLink, Route, Routes, useNavigate, useParams } from 'https://esm.sh/react-router@7'\nimport { use, useEffect, useRef, useState } from 'https://esm.sh/react@19'\n\nimport { Button, Input, Section, ShareButton, Sheet } from '../components/ui.tsx'\nimport { fetchUsersById } from '../util/neynar.ts'\nimport { supabase, fetchSpace } from '../util/db.ts'\n\nimport {\n  LocalUser, // Plays the microphone audio track and the camera video track\n  RemoteUser, // Plays the remote user audio and video tracks\n  useIsConnected, // Returns whether the SDK is connected to Agora's server\n  useJoin, // Automatically join and leave a channel on mount and unmount\n  useLocalCameraTrack, // Create a local camera video track\n  useLocalMicrophoneTrack, // Create a local microphone audio track\n  usePublish, // Publish the local tracks\n  useRemoteUsers, // Retrieve the list of remote users\n} from 'https://esm.sh/agora-rtc-react'\nimport AgoraRTC, { AgoraRTCProvider } from 'https://esm.sh/agora-rtc-react'\n\nconst client = AgoraRTC.createClient({ mode: 'live', codec: 'vp8', role: 'host' })\n// client.setClientRole(\"host\");\n\nexport function Space() {\n  return (\n    <div className=\"p-5 mb-8\">\n      <AgoraRTCProvider client={client}>\n        <Basics />\n      </AgoraRTCProvider>\n    </div>\n  )\n}\n\nconst Basics = () => {\n  const [context, setContext] = useState<any>()\n  useEffect(() => {\n    fcsdk.context.then(setContext)\n  }, [])\n  const uid = context?.user?.fid || 0\n\n  const { id } = useParams()\n\n  const { data: space, isLoading } = useQuery({ queryKey: ['space', id], queryFn: () => fetchSpace(id) })\n\n  const [calling, setCalling] = useState(false)\n  const isConnected = useIsConnected()\n  const [token, setToken] = useState('')\n  const channel = id\n\n  // console.log(\"Basics\", name, calling, isConnected);\n\n  const onShare = () => {\n    if (!context) return\n    const text = `Join me in this audio space!\\n\\n${space?.name || channel}\\n\\ncc @moe`\n    fcsdk?.actions?.composeCast?.({ text, embeds: [window.location.href] })\n  }\n\n  if (isLoading) {\n    return (\n      <div className=\"flex flex-row items-center justify-center p-4 opacity-50 h-32\">\n        <LoaderCircle className=\"animate-spin\" />\n      </div>\n    )\n  }\n\n  if (!space) {\n    return (\n      <div className=\"flex flex-row items-center justify-center p-4 opacity-50 h-32\">\n        <div className=\"text-sm\">Space not found</div>\n      </div>\n    )\n  }\n\n  return (\n    <>\n      <SpaceHeader channel={space?.name || channel} />\n\n      <div className=\"room\">\n        {calling ? (\n          <Room channel={channel} calling={calling} setCalling={setCalling} token={token} uid={uid} />\n        ) : (\n          <Lobby channel={channel} space={space} setToken={setToken} setCalling={setCalling} uid={uid} />\n        )}\n      </div>\n\n      <Section className=\"flex flex-col items-center gap-4 my-16\">\n        <div className=\"text-sm opacity-50 text-center\">Share this space with friends</div>\n        <div className=\"flex flex-row gap-4\">\n          <Button variant=\"outline\" onClick={() => navigator.clipboard.writeText(window.location.href)}>\n            Copy Link\n          </Button>\n          {context && (\n            <Button variant=\"outline\" onClick={onShare}>\n              Share on Farcaster\n            </Button>\n          )}\n        </div>\n      </Section>\n    </>\n  )\n}\n\nfunction SpaceHeader({ channel }: any) {\n  const navigate = useNavigate()\n\n  const [context, setContext] = useState<any>()\n  useEffect(() => {\n    fcsdk.context.then(setContext)\n  }, [])\n\n  // const onShare = () => {\n  //   if (!context) return\n  //   const text = `Join me in this audio space!\\n\\n${channel}\\n\\n`\n  //   fcsdk.actions.openUrl(\n  //     `https://warpcast.com/~/compose?text=${encodeURIComponent(text)}&embeds[]=${window.location.href}`\n  //   )\n  // }\n\n  return (\n    <div className=\"flex flex-row items-start justify-between  mb-8\">\n      <div className=\"flex flex-col gap-1\">\n        <div className=\"flex flex-row items-center gap-1 opacity-50 cursor-pointer\" onClick={() => navigate('/')}>\n          <Mic className=\"w-5 h-5 mt-[1]\" />\n          <h1 className=\"text-md font-medium\">Spaces</h1>\n        </div>\n        <h1 className=\"text-3xl font-semibold\">{channel}</h1>\n      </div>\n      {/* {false && <ShareButton onClick={onShare} />} */}\n    </div>\n  )\n}\n\nfunction Lobby({ channel, space, uid, setCalling, setToken }: any) {\n  // console.log(\"Lobby\", channel);\n  const { data: creator } = useUser(space?.created_by)\n\n  const queryFn = () =>\n    fetch(`/api/channels`)\n      .then((r) => r.json())\n      .then((r) => r?.data?.channels?.find((c) => c.channel_name == channel))\n  const { data: agoraChannel } = useQuery({ queryKey: ['agoraChannel', channel], queryFn })\n  console.log('agoraChannel', agoraChannel)\n\n  const join = async () => {\n    const response = await fetch(`/api/token?channel=${channel}&uid=${uid}`).then((r) => r.json())\n    console.log('response', response)\n    setToken(response.token)\n    setCalling(true)\n  }\n\n  return (\n    <>\n      <div className=\"flex flex-col  gap-8\">\n        {creator && (\n          <div className=\"flex flex-col gap-3\">\n            <div className=\"text-xs opacity-50 max-w-full truncate uppercase\">Hosted by</div>\n            <div className=\"flex flex-row items-center gap-3\">\n              <img\n                className=\"rounded-full w-10 h-10 object-cover bg-neutral-500/10\"\n                src={creator?.pfp_url}\n                onClick={() => fcsdk.actions.viewProfile({ fid: creator.fid })}\n              />\n              <div className=\"text-md font-semibold\">{creator?.username}</div>\n            </div>\n          </div>\n        )}\n        {agoraChannel?.user_count > 1 && (\n          <div className=\"flex flex-col gap-3\">\n            <div className=\"text-xs opacity-50 max-w-full truncate uppercase\">{agoraChannel?.user_count} users</div>\n          </div>\n        )}\n        <Button size=\"lg\" disabled={!channel} onClick={() => join()}>\n          <span>Join Space</span>\n        </Button>\n      </div>\n    </>\n  )\n}\n\nfunction Room({ channel, token, uid, calling, setCalling }: any) {\n  // console.log(\"Room\", channel, calling, setCalling);\n\n  // const [calling, setCalling] = useState(false);\n  const isConnected = useIsConnected()\n  const [appId, setAppId] = useState('1e46ee7dda94477c833739c1fc1f8d38')\n  // const [channel, setChannel] = useState(\"test\");\n\n  const { data: localUserId } = useJoin({ appid: appId, channel, token, uid }, calling)\n\n  const [micOn, setMic] = useState(false)\n  const { localMicrophoneTrack } = useLocalMicrophoneTrack(micOn)\n  usePublish([localMicrophoneTrack])\n\n  const remoteUsers = useRemoteUsers()\n  const activeSpeakerUid = useActiveSpeakerUid({ isConnected })\n\n  const { space, toggleHost, toggleSpeaker } = useSpace(channel)\n  // console.log('🟢 space', space)\n\n  const localUserIsCreator = space?.created_by === localUserId\n  const localUserIsHost = space?.hosts?.includes(localUserId)\n  const localUserIsSpeaker = space?.speakers?.includes(localUserId)\n\n  useEffect(() => {\n    if (!localUserIsSpeaker) setMic(false)\n  }, [localUserIsSpeaker])\n\n  const { receivedEmojis, sendEmoji } = useEmojis(channel)\n\n  const localUserProps = {\n    uid: localUserId,\n    space,\n    muted: !micOn,\n    speaking: activeSpeakerUid === localUserId,\n    receivedEmojis,\n  }\n\n  const getRemoteUserProps = (user: any) => ({\n    uid: user.uid,\n    key: user.uid,\n    space,\n    muted: !user?.hasAudio,\n    speaking: activeSpeakerUid === user.uid,\n    toggleHost: localUserIsHost ? toggleHost : undefined,\n    toggleSpeaker: localUserIsHost ? toggleSpeaker : undefined,\n    receivedEmojis,\n  })\n\n  return (\n    <>\n      {isConnected && (\n        <div className=\"control flex flex-row flex-wrap gap-4 mt-10 mb-10\">\n          {localUserIsSpeaker && (\n            <div className=\"left-control flex flex-row flex-wrap gap-4\">\n              <Button variant=\"outline\" size=\"lg\" onClick={() => setMic((a) => !a)}>\n                {micOn ? <Mic /> : <MicOff />}\n              </Button>\n            </div>\n          )}\n          <Button variant=\"outline\" size=\"lg\" onClick={() => sendEmoji('✋', localUserId)}>\n            ✋\n          </Button>\n          <Button variant=\"outline\" size=\"lg\" onClick={() => sendEmoji('❤️', localUserId)}>\n            ❤️\n          </Button>\n          <Button variant=\"outline\" size=\"lg\" onClick={() => setCalling((a) => !a)}>\n            {calling ? 'Leave' : 'Call'}\n          </Button>\n        </div>\n      )}\n\n      <div className=\"flex flex-col gap-6\">\n        <div className=\"flex flex-row flex-wrap gap-2\">\n          <User {...localUserProps} onlySpeakers>\n            <LocalUser audioTrack={localMicrophoneTrack} cameraOn={false} micOn={micOn} playAudio={false}></LocalUser>\n          </User>\n          {remoteUsers.map((user) => (\n            <User {...getRemoteUserProps(user)} onlySpeakers>\n              <RemoteUser user={user}></RemoteUser>\n            </User>\n          ))}\n        </div>\n        <div className=\"flex flex-row flex-wrap gap-2\">\n          <User {...localUserProps} onlyListeners>\n            <LocalUser audioTrack={localMicrophoneTrack} cameraOn={false} micOn={micOn} playAudio={false}></LocalUser>\n          </User>\n          {remoteUsers.map((user) => (\n            <User {...getRemoteUserProps(user)} onlyListeners>\n              <RemoteUser user={user}></RemoteUser>\n            </User>\n          ))}\n        </div>\n      </div>\n    </>\n  )\n}\n\nfunction User({\n  uid,\n  muted,\n  speaking,\n  space,\n  toggleHost,\n  toggleSpeaker,\n  receivedEmojis,\n  onlySpeakers,\n  onlyListeners,\n  ...props\n}: any) {\n  const { data: user } = useUser(uid)\n  // console.log(\"User\", uid, user);\n\n  const image =\n    user?.pfp_url ||\n    userImageUrl(uid) ||\n    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjmD59ugIABXQB5tNl2LwAAAAASUVORK5CYII='\n\n  const goToProfile = (uid) => {\n    console.log('goToProfile', uid)\n    fcsdk?.actions?.viewProfile({ fid: uid }).catch(console.error)\n  }\n\n  const [showMenu, setShowMenu] = useState(false)\n\n  const userIsCreator = space?.created_by === uid\n  const userIsHost = space?.hosts?.includes(uid)\n  const userIsSpeaker = space?.speakers?.includes(uid)\n\n  if (onlySpeakers && !userIsSpeaker) return null\n  if (onlyListeners && userIsSpeaker) return null\n\n  const userEmoji = receivedEmojis.find((emoji) => emoji.uid === uid && emoji.timestamp > Date.now() - 1000 * 5)\n\n  return (\n    <div className=\"overflow-hidden flex flex-col  items-center w-20\">\n      <div className=\"relative\">\n        <img\n          className=\"rounded-full w-14 h-14 object-cover bg-neutral-500/10\"\n          src={image}\n          onClick={() => setShowMenu(true)}\n        />\n        {muted && <Indicator Icon={MicOff} color=\"red\" />}\n        {speaking && <Indicator Icon={AudioLines} color=\"purple\" />}\n        {userEmoji && <Emoji emoji={userEmoji.emoji} color=\"grey\" />}\n      </div>\n      <div className=\"font-semibold text-sm max-w-full truncate mt-1\">{user?.username || uid}</div>\n      <div className=\"text-[8px] opacity-50 max-w-full truncate uppercase\">\n        {userIsHost ? 'Host' : userIsSpeaker ? 'Speaker' : ''}\n      </div>\n      <div className=\"absolute opacity-0\">{props.children}</div>\n\n      <Sheet showSheet={showMenu} setShowSheet={setShowMenu}>\n        <div className=\"font-semibold text-sm text-center max-w-full truncate opacity-50\">{user?.username || uid}</div>\n        {toggleHost && !userIsCreator && (\n          <>\n            <Button variant=\"outline\" size=\"lg\" onClick={() => toggleHost?.(uid)}>\n              {userIsHost ? 'Remove' : 'Make'} Co-Host\n            </Button>\n          </>\n        )}\n        {toggleSpeaker && !userIsHost && (\n          <>\n            <Button variant=\"outline\" size=\"lg\" onClick={() => toggleSpeaker?.(uid)}>\n              {userIsSpeaker ? 'Remove' : 'Make'} Speaker\n            </Button>\n          </>\n        )}\n        <Button variant=\"outline\" size=\"lg\" onClick={() => goToProfile(uid)}>\n          View Profile\n        </Button>\n      </Sheet>\n    </div>\n  )\n}\n\nfunction Indicator({ Icon, color }: any) {\n  return (\n    <div\n      className={`flex items-center justify-center w-5 h-5 rounded-full bg-${color}-500 border border-white/50 dark:border-black/50 absolute bottom-0 right-0`}\n    >\n      <Icon className=\"w-3 h-3 text-white\" />\n    </div>\n  )\n}\nfunction Emoji({ emoji, color }: any) {\n  return (\n    <div className={`flex items-center justify-center w-5 h-5 rounded-full bg-${color}-500  absolute bottom-0 left-0`}>\n      <div className=\"text-lg text-white\">{emoji}</div>\n    </div>\n  )\n}\n\n//////////\n\nfunction useUser(uid: number) {\n  return useQuery({\n    queryKey: ['user', uid],\n    queryFn: () => getUserByUid(uid),\n    staleTime: 1000 * 60 * 60 * 1,\n  })\n}\n\nasync function getUserByUid(uid?: number) {\n  if (!uid) return null\n  if (uid > 2_000_000) return null\n  return await fetchUsersById(`${uid}`).then((users) => users?.[0])\n}\n\nfunction userImageUrl(address) {\n  if (!address) return null\n  return 'https://cdn.stamp.fyi/avatar/' + address + '?s=140'\n}\n\nfunction useActiveSpeakerUid({ isConnected }) {\n  const [activeSpeakerUid, setActiveSpeakerUid] = useState<any>()\n  useEffect(() => {\n    if (isConnected) {\n      client.enableAudioVolumeIndicator()\n      client.on('volume-indicator', (volumes) => setActiveSpeakerUid(getActiveSpeakerUid(volumes)))\n    }\n  }, [isConnected])\n  return activeSpeakerUid\n}\n\nfunction getActiveSpeakerUid(volumes) {\n  if (!volumes || volumes.length === 0) return undefined\n  const topSpeaker = volumes?.reduce((prev, current) => (prev.level > current.level ? prev : current))\n  // console.log(\"volumes\", volumes, topSpeaker);\n  if (topSpeaker?.level > 40) return topSpeaker.uid\n  else return undefined\n}\n\nfunction useSpace(id: string) {\n  const [space, setSpace] = useState<any>()\n\n  useEffect(() => {\n    fetchSpace(id).then(setSpace)\n\n    const changes = supabase\n      .channel('table-db-changes')\n      .on(\n        'postgres_changes',\n        {\n          event: '*',\n          schema: 'public',\n          table: 'spaces',\n          filter: `id=eq.${id}`,\n        },\n        (payload) => {\n          console.log('🗄️ realtime spaces', payload)\n          setSpace(payload.new)\n        }\n      )\n      .subscribe()\n  }, [])\n\n  const toggleHost = async (uid) => {\n    console.log('toggleHost', uid)\n    const hosts = space?.hosts || []\n    const newHosts = hosts.includes(uid) ? hosts.filter((s) => s !== uid) : [...hosts, uid]\n    const { data, error } = await supabase.from('spaces').update({ hosts: newHosts }).eq('id', id)\n    console.log('toggleHost', data, error)\n  }\n\n  const toggleSpeaker = async (uid) => {\n    console.log('toggleSpeaker', uid)\n    const speakers = space?.speakers || []\n    const newSpeakers = speakers.includes(uid) ? speakers.filter((s) => s !== uid) : [...speakers, uid]\n    const { data, error } = await supabase.from('spaces').update({ speakers: newSpeakers }).eq('id', id)\n    console.log('toggleSpeaker', data, error)\n  }\n\n  const hosts = space ? [...space?.hosts, space?.created_by].filter(Boolean) : []\n  const speakers = space ? [...space?.speakers, ...space?.hosts, space?.created_by].filter(Boolean) : []\n\n  return { space: { ...space, hosts, speakers }, toggleHost, toggleSpeaker }\n}\n\nfunction useEmojis(id: string) {\n  const [receivedEmojis, setEmojis] = useState<any[]>([])\n\n  useEffect(() => {\n    supabase.channel(id).on('broadcast', { event: 'emoji' }, onBroadcast).subscribe()\n  }, [])\n\n  const onBroadcast = (data) => {\n    // console.log('onBroadcast', data)\n    setEmojis((prev) => [data.payload, ...prev].slice(0, 100))\n  }\n\n  const sendEmoji = (emoji, uid) =>\n    supabase.channel(id).send({\n      type: 'broadcast',\n      event: 'emoji',\n      payload: { emoji, uid, timestamp: Date.now() },\n    })\n\n  return { receivedEmojis, sendEmoji }\n}\n",[],[244,267,284],[244,267],{"_103":293,"_95":294,"_149":295,"_151":245,"_152":136,"_153":180,"_155":117,"_105":296,"_100":31,"_157":158,"_159":-5,"_160":27,"_161":-5,"_162":297,"_98":315},"48d07762-11b4-11f0-bdb9-569c3dd06744","util","73f8c066-ac54-4c37-a806-38e2cbad731f",["D",1743812646130],[298,307],{"_103":299,"_95":300,"_149":301,"_151":295,"_152":136,"_153":302,"_155":117,"_105":303,"_100":180,"_157":190,"_159":304,"_160":27,"_161":-5,"_162":305,"_98":306},"7dbec54e-2aa2-11f0-be73-569c3dd06744","db.ts","46316fdc-2a7a-11f0-be55-569c3dd06744",648,["D",1746553783063],"import { createClient } from 'https://esm.sh/@supabase/supabase-js'\n\nexport const supabase = createClient(\n  'https://jfdnoveuufyggaezifgz.supabase.co',\n  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImpmZG5vdmV1dWZ5Z2dhZXppZmd6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDY0NjEzODEsImV4cCI6MjA2MjAzNzM4MX0.mch0JzFzHCwZkiPqmSK71u3Ns5A_O7aqTR40X3H8DJg'\n)\n\nexport const fetchSpace = async (id: string) => {\n  const { data, error } = await supabase.from('spaces').select().eq('id', id).single()\n  // console.log('🗄️ space', data, error)\n  return data\n}\n",[],[244,294,300],{"_103":308,"_95":235,"_149":309,"_151":295,"_152":136,"_153":119,"_155":117,"_105":310,"_100":311,"_157":190,"_159":312,"_160":27,"_161":-5,"_162":313,"_98":314},"17ebc0d4-3040-11f0-b763-569c3dd06744","93dc8e97-7d8f-44a7-9867-8601eaaaba3f",["D",1747171228567],4,"const baseUrl = \"/neynar-proxy?path=\";\n// const baseUrl = \"https://api.neynar.com/v2/farcaster/\";\n\nexport async function fetchNeynarGet(path: string) {\n  const res = await fetch(baseUrl + encodeURIComponent(path), {\n    method: \"GET\",\n    headers: {\n      \"Content-Type\": \"application/json\",\n      \"x-neynar-experimental\": \"true\",\n      \"x-api-key\": \"NEYNAR_API_DOCS\",\n    },\n  });\n  const json = await res.json();\n  return json;\n}\n\nexport async function fetchNeynarGetPages(path: string, pages: number, dataKey: string) {\n  let data: any = [];\n  let cursor = \"\";\n  let pagesLeft = pages;\n  while (true) {\n    const res = await fetchNeynarGet(`${path}&cursor=${cursor}`);\n    data = [...data, ...res[dataKey]];\n    cursor = res?.next?.cursor;\n    pagesLeft--;\n    if (!cursor || pagesLeft <= 0) {\n      break;\n    }\n  }\n  return {\n    [dataKey]: data,\n  };\n}\n\n//////////\n\nexport function fetchUser(username: string) {\n  return fetchNeynarGet(`user/by_username?username=${username}`).then(r => r.user);\n}\nexport function fetchUsersById(fids: string) {\n  return fetchNeynarGet(`user/bulk?fids=${fids}`).then(r => r.users);\n}\n\nexport function fetchUserFeed(fid: number) {\n  return fetchNeynarGet(\n    `feed?feed_type=filter&filter_type=fids&fids=${fid}&with_recasts=false&with_replies=false&limit=100&cursor=`,\n  ).then(r => r.casts);\n}\n\nexport function fetchChannel(channelId: string) {\n  return fetchNeynarGet(`channel?id=${channelId}`).then(r => r.channel);\n}\n\nexport function fetchChannelFeed(channelId: string) {\n  return fetchNeynarGet(\n    `feed/channels?channel_ids=${channelId}&with_recasts=false&limit=100`,\n  ).then(r => r.casts);\n}\n\nexport function fetchChannelsFeed(channelIds: string[]) {\n  return fetchNeynarGet(\n    `feed/channels?channel_ids=${channelIds.join(\",\")}&with_recasts=false&limit=100`,\n  ).then(r => r.casts);\n}",[],[244,294,235],[244,294],{"_103":317,"_95":318,"_149":319,"_151":245,"_152":136,"_153":276,"_155":117,"_105":320,"_100":321,"_157":190,"_159":322,"_160":27,"_161":-5,"_162":323,"_98":324},"46318eae-2a7a-11f0-be55-569c3dd06744","App.tsx","05536b6d-e7a8-485f-a1f5-9e291da4c16a",["D",1746536510029],22,"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from \"https://esm.sh/@farcaster/frame-sdk\";\nimport { NavLink, Route, Routes } from \"https://esm.sh/react-router@7\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nimport { Home } from \"./screens/Home.tsx\";\nimport { Space } from \"./screens/Space.tsx\";\n\nexport function App() {\n  const [context, setContext] = useState<any>();\n  useEffect(() => {\n    fcsdk.actions.ready();\n    fcsdk.context.then(setContext);\n  }, []);\n\n  return (\n    <div className=\"max-w-2xl mx-auto\">\n      <Routes>\n        <Route path=\"/\" element={<Home />} />\n        <Route path=\"/space/:id\" element={<Space />} />\n        <Route path=\"/about\" element={<About />} />\n      </Routes>\n    </div>\n  );\n}\n\nfunction About() {\n  return <h2 className=\"p-5\">About page</h2>;\n}",[],[244,318],{"_103":326,"_95":225,"_149":327,"_151":245,"_152":136,"_153":328,"_155":117,"_105":329,"_100":180,"_157":190,"_159":330,"_160":27,"_161":-5,"_162":331,"_98":332},"a72b9a78-1b8f-11f0-b006-569c3dd06744","55dbf137-b487-455e-9653-d686e787f656",620,["D",1744896424726],"/** @jsxImportSource https://esm.sh/react@19 */\nimport { QueryClient, QueryClientProvider } from \"https://esm.sh/@tanstack/react-query@5\";\nimport { createRoot } from \"https://esm.sh/react-dom@19/client\";\nimport { BrowserRouter } from \"https://esm.sh/react-router@7\";\n\nimport { App } from \"./App.tsx\";\n\nconst queryClient = new QueryClient();\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(\n  <BrowserRouter>\n    <QueryClientProvider client={queryClient}>\n      <App />\n    </QueryClientProvider>\n  </BrowserRouter>,\n);",[],[244,225],[244],{"_103":335,"_95":336,"_149":337,"_151":-5,"_152":136,"_153":338,"_155":117,"_105":339,"_100":31,"_157":171,"_159":340,"_160":27,"_161":-5,"_162":341,"_98":342},"13932e32-29c9-11f0-b43c-569c3dd06744",".vtignore","13932edc-29c9-11f0-b43c-569c3dd06744",635,["D",1746460404171],".git\n.DS_Store\nnode_modules\nvendor",[],[336],{"_103":344,"_95":345,"_149":346,"_151":-5,"_152":136,"_153":180,"_155":117,"_105":347,"_100":31,"_157":171,"_159":348,"_160":27,"_161":-5,"_162":349,"_98":350},"48d08086-11b4-11f0-bdb9-569c3dd06744","README.md","cd5dd838-4629-48a1-8d57-776c63c86c46",["D",1743812646130],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n- **Remix** this starter template on the top right to get started.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.",[],[345],{"_103":352,"_95":353,"_149":354,"_151":-5,"_152":136,"_153":355,"_155":117,"_105":356,"_100":31,"_157":171,"_159":357,"_160":27,"_161":-5,"_162":358,"_98":359},"13a00260-29c9-11f0-8e44-569c3dd06744","deno.json","13a00328-29c9-11f0-8e44-569c3dd06744",639,["D",1746460404177],"{\n  \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n  \"lock\": false,\n  \"compilerOptions\": {\n    \"noImplicitAny\": false,\n    \"strict\": false,\n    \"types\": [\n      \"https://www.val.town/types/valtown.d.ts\"\n    ],\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"dom.asynciterable\",\n      \"deno.ns\",\n      \"deno.unstable\"\n    ]\n  },\n  \"lint\": {\n    \"files\": {\n      \"include\": [\n        \"deno:/https/esm.town/**/*\"\n      ]\n    },\n    \"rules\": {\n      \"exclude\": [\n        \"no-explicit-any\",\n        \"no-unused-vars\",\n        \"no-window\",\n        \"no-empty-pattern\"\n      ]\n    }\n  },\n  \"node_modules_dir\": false,\n  \"experimental\": {\n    \"unstable-node-globals\": true,\n    \"unstable-temporal\": true,\n    \"unstable-worker-options\": true,\n    \"unstable-sloppy-imports\": true\n  }\n}",[],[353],{"_103":361,"_95":362,"_149":363,"_151":-5,"_152":136,"_153":135,"_155":117,"_105":364,"_100":189,"_157":171,"_159":365,"_160":27,"_161":-5,"_162":366,"_98":367},"2daf4702-30d0-11f0-93e5-569c3dd06744","todo.txt","f296befd-5d54-45c6-8c71-1acf0913944c",["D",1747233112615],"notifications to followers on space start\nschedule space\nuser tip\nmore emojis\n",[],[362],"files",[146,164,176,183,194,203,213,223,233,242,248,254,265,272,282,292,298,307,316,325,334,343,351,360],"counts",{"_372":31,"_373":180,"_374":31,"_375":376},"pulls","branches","forks","envVars",6,"contents",[],{"_103":317,"_95":318,"_149":319,"_151":245,"_152":136,"_153":276,"_155":117,"_105":380,"_100":321,"_157":190,"_159":322,"_160":27,"_161":-5,"_98":381},["D",1746536510029],[244,318],"upstream",{"_103":384,"_95":385,"_111":386,"_112":-5,"_109":110,"_21":387},"321956b6-059c-11f0-aa46-569c3dd06744","MiniAppStarter","Hono + React + Tailwind + Farcaster Mini App Starter Project",{"_93":94,"_131":132},"emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":41,"_100":-7,"_98":99,"_101":392,"_144":396,"_368":469,"_171":470,"_377":472,"_382":473,"_482":117,"_483":-5},{"_103":104,"_95":96,"_105":393,"_107":-5,"_108":27,"_109":110,"_111":-5,"_112":-5,"_12":113,"_114":115,"_116":117,"_118":119,"_120":31,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":27,"_21":394,"_133":395},["D",1743812646130],{"_93":94,"_131":132},{"_100":135,"_95":41,"_103":136,"_137":104,"_138":139,"_140":141,"_142":110,"_143":113},[397,403,424,457,460,463,466],{"_103":147,"_95":148,"_149":150,"_151":-5,"_152":136,"_153":154,"_155":117,"_105":156,"_100":31,"_157":158,"_159":-5,"_160":27,"_161":-5,"_162":398,"_98":402},[399],{"_103":165,"_95":166,"_149":167,"_151":150,"_152":136,"_153":168,"_155":117,"_105":169,"_100":170,"_157":171,"_159":172,"_160":27,"_161":-5,"_162":400,"_98":401},[],[148,166],[148],{"_103":177,"_95":178,"_149":179,"_151":-5,"_152":136,"_153":180,"_155":117,"_105":181,"_100":31,"_157":158,"_159":-5,"_160":27,"_161":-5,"_162":404,"_98":423},[405,408,411,414,417,420],{"_103":184,"_95":185,"_149":186,"_151":179,"_152":136,"_153":187,"_155":117,"_105":188,"_100":189,"_157":190,"_159":191,"_160":27,"_161":-5,"_162":406,"_98":407},[],[178,185],{"_103":195,"_95":196,"_149":197,"_151":179,"_152":136,"_153":198,"_155":117,"_105":199,"_100":170,"_157":190,"_159":200,"_160":27,"_161":-5,"_162":409,"_98":410},[],[178,196],{"_103":204,"_95":205,"_149":206,"_151":179,"_152":136,"_153":207,"_155":117,"_105":208,"_100":209,"_157":190,"_159":210,"_160":27,"_161":-5,"_162":412,"_98":413},[],[178,205],{"_103":214,"_95":215,"_149":216,"_151":179,"_152":136,"_153":217,"_155":117,"_105":218,"_100":219,"_157":190,"_159":220,"_160":27,"_161":-5,"_162":415,"_98":416},[],[178,215],{"_103":224,"_95":225,"_149":115,"_151":179,"_152":136,"_153":119,"_155":117,"_105":226,"_100":227,"_157":228,"_159":229,"_160":27,"_161":230,"_162":418,"_98":419},[],[178,225],{"_103":234,"_95":235,"_149":236,"_151":179,"_152":136,"_153":119,"_155":117,"_105":237,"_100":170,"_157":190,"_159":238,"_160":27,"_161":-5,"_162":421,"_98":422},[],[178,235],[178],{"_103":243,"_95":244,"_149":245,"_151":-5,"_152":136,"_153":180,"_155":117,"_105":246,"_100":31,"_157":158,"_159":-5,"_160":27,"_161":-5,"_162":425,"_98":456},[426,432,441,450,453],{"_103":249,"_95":250,"_149":251,"_151":245,"_152":136,"_153":180,"_155":117,"_105":252,"_100":31,"_157":158,"_159":-5,"_160":27,"_161":-5,"_162":427,"_98":431},[428],{"_103":255,"_95":256,"_149":257,"_151":251,"_152":136,"_153":258,"_155":117,"_105":259,"_100":260,"_157":190,"_159":261,"_160":27,"_161":-5,"_162":429,"_98":430},[],[244,250,256],[244,250],{"_103":266,"_95":267,"_149":268,"_151":245,"_152":136,"_153":269,"_155":117,"_105":270,"_100":31,"_157":158,"_159":-5,"_160":27,"_161":-5,"_162":433,"_98":440},[434,437],{"_103":273,"_95":274,"_149":275,"_151":268,"_152":136,"_153":276,"_155":117,"_105":277,"_100":278,"_157":190,"_159":279,"_160":27,"_161":-5,"_162":435,"_98":436},[],[244,267,274],{"_103":283,"_95":284,"_149":285,"_151":268,"_152":136,"_153":135,"_155":117,"_105":286,"_100":287,"_157":190,"_159":288,"_160":27,"_161":-5,"_162":438,"_98":439},[],[244,267,284],[244,267],{"_103":293,"_95":294,"_149":295,"_151":245,"_152":136,"_153":180,"_155":117,"_105":296,"_100":31,"_157":158,"_159":-5,"_160":27,"_161":-5,"_162":442,"_98":449},[443,446],{"_103":299,"_95":300,"_149":301,"_151":295,"_152":136,"_153":302,"_155":117,"_105":303,"_100":180,"_157":190,"_159":304,"_160":27,"_161":-5,"_162":444,"_98":445},[],[244,294,300],{"_103":308,"_95":235,"_149":309,"_151":295,"_152":136,"_153":119,"_155":117,"_105":310,"_100":311,"_157":190,"_159":312,"_160":27,"_161":-5,"_162":447,"_98":448},[],[244,294,235],[244,294],{"_103":317,"_95":318,"_149":319,"_151":245,"_152":136,"_153":276,"_155":117,"_105":320,"_100":321,"_157":190,"_159":322,"_160":27,"_161":-5,"_162":451,"_98":452},[],[244,318],{"_103":326,"_95":225,"_149":327,"_151":245,"_152":136,"_153":328,"_155":117,"_105":329,"_100":180,"_157":190,"_159":330,"_160":27,"_161":-5,"_162":454,"_98":455},[],[244,225],[244],{"_103":335,"_95":336,"_149":337,"_151":-5,"_152":136,"_153":338,"_155":117,"_105":339,"_100":31,"_157":171,"_159":340,"_160":27,"_161":-5,"_162":458,"_98":459},[],[336],{"_103":344,"_95":345,"_149":346,"_151":-5,"_152":136,"_153":180,"_155":117,"_105":347,"_100":31,"_157":171,"_159":348,"_160":27,"_161":-5,"_162":461,"_98":462},[],[345],{"_103":352,"_95":353,"_149":354,"_151":-5,"_152":136,"_153":355,"_155":117,"_105":356,"_100":31,"_157":171,"_159":357,"_160":27,"_161":-5,"_162":464,"_98":465},[],[353],{"_103":361,"_95":362,"_149":363,"_151":-5,"_152":136,"_153":135,"_155":117,"_105":364,"_100":189,"_157":171,"_159":365,"_160":27,"_161":-5,"_162":467,"_98":468},[],[362],[397,399,403,405,408,411,414,417,420,424,426,428,432,434,437,441,443,446,450,453,457,460,463,466],{"_103":317,"_95":318,"_149":319,"_151":245,"_152":136,"_153":276,"_155":117,"_105":380,"_100":321,"_157":190,"_159":322,"_160":27,"_161":-5,"_98":471},[244,318],[],{"_103":139,"_105":474,"_475":476,"_95":41,"_137":384,"_100":477,"_138":-5,"_140":-5,"_478":479,"_129":27,"_109":110,"_480":94,"_481":385},["D",1742482886202],"updatedAt",["D",1746973304668],590,"lockfileKey","1746975387403-esm.town_v_moe_MiniAppStarter@590-main","userHandle","projectName","showCompareCallout","pull","routes/_app","actionData","errors"]
</article></body></html>