Hide header on mobile to give map more space

.github/FUNDING.yml

@@ -12,4 +12,4 @@ lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cl
 polar: # Replace with a single Polar username
 buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
 thanks_dev: # Replace with a single thanks.dev username
-custom: https://www.paypal.com/ncp/payment/H7JHQ5LZPY63S
+custom: https://paypal.me/queuenorth

README.md

@@ -1,165 +1,96 @@
 <div align="center">
 
-# QCX  
-**Quality Computer Experience**  
-Language → Maps  
-A General Intelligence Interface, A planet computer core
+#  Quality  Computer  Experience
 
-<br />
 
-[![Watch the demo](https://img.youtube.com/vi/y8M6qaFeZOw/0.jpg)](https://youtu.be/y8M6qaFeZOw?si=eYMXxqh7vQ4I-Mhr)
 
-<br />
-
-[**Try Live**](https://www.queue.cx) &nbsp;•&nbsp; 
-[**Pricing / Pre-sale**](https://www.paypal.com/ncp/payment/G82N9CZ6ZLLCQ) &nbsp;•&nbsp; 
-[**@tryqcx on X**](https://x.com/tryqcx) &nbsp;•&nbsp; 
-[**Documentation**](https://deepwiki.com/QueueLab/QCX)
+[**Pricing**](https://buy.stripe.com/14A3cv7K72TR3go14Nasg02) &nbsp;|&nbsp; [**Land**](https://wwww.queue.cx) &nbsp;|&nbsp; [**X**](https://x.com/tryqcx)
 
+<a href="https://www.producthunt.com/products/qcx?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-qcx" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1035588&theme=light&t=1762583679476" alt="QCX - Artificial&#0032;General&#0032;Intelligence&#0046; | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 </div>
 
-## What is QCX?
+<img width="1277" alt="Screen Shot 2024-06-18 at 4 27 51 PM" src="https://github.com/QueueLab/MapGPT/assets/115367894/01584e12-b3f5-41c9-8009-a16642568798">
 
-QCX is an experimental **AI-first geospatial companion** that lets you explore the planet (and beyond) through natural language + interactive maps.
 
-- Chat with AI about any location, event, or spatial question
-- Draw on the map → get measurements, analysis & AI insights
-- Real-time geolocation, 3D view, time-zone aware reasoning
-- Powered by multi-agent orchestration + generative UI
-- Currently interpolating full chat ↔ map bidirectional integration
 
-Built as a research prototype from **QueueLab** — exploring the frontier between natural language, spatial reasoning and artificial general intelligence.
 
-<br />
 
-## ✨ Features (Current & In-progress)
+## Contributing
 
-- Conversational geospatial queries with tool-using agents
-- Interactive Mapbox map with drawing, measurements & GeoJSON
-- Generative UI via Vercel AI SDK (streaming React components)
-- Multi-model support (Grok, OpenAI, Google, Bedrock, …)
-- Efficient task routing to minimize unnecessary LLM calls
-- Persistent chat + map state (Redis + database)
-- Mobile-responsive chat + map experience
+Welcome! Please see the issues for items that need attention, and below for some tools to aid in development and debugging. We're working to interpolate chat functionality onto the map module.
 
-<br />
+Documentation.
 
-## Tech Stack
+https://deepwiki.com/QueueLab/QCX
 
-| Category               | Technology                              |
-|------------------------|-----------------------------------------|
-| Framework              | [Next.js 15](https://nextjs.org/) (App Router + RSC) |
-| Language               | TypeScript 5.x + React 19               |
-| Runtime                | [Bun](https://bun.sh/)                  |
-| AI SDK                 | [Vercel AI SDK](https://sdk.vercel.ai/) |
-| Models                 | Grok, OpenAI, Google, Amazon Bedrock, … |
-| Search / RAG           | [Tavily](https://tavily.com/), [Exa](https://exa.ai/) |
-| Database / Cache       | [Upstash Redis](https://upstash.com/), PostgreSQL + Drizzle |
-| UI Components          | [shadcn/ui](https://ui.shadcn.com/), [Radix UI](https://www.radix-ui.com/) |
-| Styling                | [Tailwind CSS](https://tailwindcss.com/) + Framer Motion |
-| Maps                   | [Mapbox GL JS](https://www.mapbox.com/) + Mapbox Draw |
-| Alternative Maps       | Google Maps (optional)                  |
+### Running the app on your own machine
 
-<br />
 
-## Quick Start – Run Locally
+## Stack
 
-### 1. Prerequisites
+- App framework: [Next.js](https://nextjs.org/)
+- Text streaming / Generative UI: [Vercel AI SDK](https://sdk.vercel.ai/docs)
+- Generative Model [Varies](https://openai.com/)
+- Search API: [Tavily AI](https://tavily.com/) / [Exa AI](https://exa.ai/)
+- Serverless Database: [Upstash](https://upstash.com/)
+- Component library: [shadcn/ui](https://ui.shadcn.com/)
+- Headless component primitives: [Radix UI](https://www.radix-ui.com/)
+- Styling: [Tailwind CSS](https://tailwindcss.com/)
+- Mapping : [Mapbox]
+(https://www.mapbox.com/)
 
-- [Bun](https://bun.sh/) ≥ 1.1
-- Node.js (only for compatibility checks — app runs on Bun)
 
-```bash
-# Install Bun (if not already installed)
-curl -fsSL https://bun.sh/install | bash
-```
 
-### 2. Clone & Install
+### 2. Install dependencies
 
-```bash
-git clone https://github.com/QueueLab/QCX.git
-cd QCX
+```
+install bun package manager
 bun install
+bun run build
+bun run dev
 ```
 
-### 3. Environment Variables
+### 3. Setting up Upstash Redis
+
+Follow the guide below to set up Upstash Redis. Create a database and obtain `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN`. Refer to the [Upstash guide](https://upstash.com/blog/rag-chatbot-upstash#setting-up-upstash-redis) for instructions on how to proceed.
 
-```bash
+### 4. Fill out secrets
+
+```
 cp .env.local.example .env.local
 ```
 
-Fill in `.env.local`:
+Your .env.local file should look like this:
 
-```env
-# AI providers (at least one required)
-XAI_API_KEY=                 # https://console.x.ai
-OPENAI_API_KEY=              # optional
-GOOGLE_API_KEY=              # optional (Gemini)
-BEDROCK_ACCESS_KEY_ID=       # optional
-BEDROCK_SECRET_ACCESS_KEY=   # optional
+```
+# XAI API key retrieved here: https://platform.openai.com/api-keys
+XAI_API_KEY=
 
-# Search
+# Tavily API Key retrieved here: https://app.tavily.com/home
 TAVILY_API_KEY=
-# or
-EXA_API_KEY=
 
-# Upstash Redis (for rate limiting, caching, prompt storage)
+# Upstash Redis URL and Token retrieved here: https://console.upstash.com/redis
 UPSTASH_REDIS_REST_URL=
 UPSTASH_REDIS_REST_TOKEN=
-
-# Mapbox (required for maps)
-NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=
-
-# Optional: database, analytics, etc.
+#Mapbox access token
+NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN
 ```
 
-> **Note**: Complex generative UI and tool calling works best with frontier models (Grok family, GPT-4o, Claude 3.5/4, Gemini 1.5/2, etc.). Smaller or local models may not format output correctly.
 
-### 4. Run
 
-```bash
-bun run dev
-# or for production build preview
-bun run build && bun run start
-```
-
-Open http://localhost:3000
 
-<br />
 
-## Contributing
+_Note: This project focuses on Generative UI and requires complex output from LLMs. Currently, it's assumed that the official state of the art models will be used. Although it's possible to set up other models, if you use an Standard-compatible model, but we don't guarantee that it'll work._
 
-We welcome contributions — especially around:
+### 5. Run app locally
 
-- Better map ↔ chat integration
-- New geospatial tools / agents
-- UI/UX polish (mobile especially)
-- Model output parsing robustness
-- Performance optimizations
-
-1. See open [issues](https://github.com/QueueLab/QCX/issues)
-2. Fork & create a branch
-3. Submit a PR with clear description
-
-Read the in-depth architecture & component docs here:  
-→ https://deepwiki.com/QueueLab/QCX
-
-<br />
-
-## Verified Models (Stable Output Formatting)
-
-- Grok-3-mini  
-- (add more models as tested — PRs welcome!)
-
-Models with reasoning / heavy tool calling can sometimes break generative UI — test carefully.
-
-<br />
-
-<div align="center">
-
-**QCX** — Language is the new UI for exploring worlds.
+```
+bun run dev
+```
 
-Made with curiosity by [QueueLab](https://github.com/QueueLab)
+You can now visit http://localhost:3000.
 
-</div>
+## Verified models
 
+List of non reasoning verified models
+Grok-3-mini

app/globals.css

@@ -131,7 +131,7 @@
     border-bottom: 1px solid hsl(var(--border));
     display: flex;
     align-items: center;
-    padding: 0 10px;
+    padding: 0 5px;
     z-index: 20;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
@@ -144,8 +144,8 @@
 
   .mobile-icons-bar-content {
     display: flex;
-    gap: 20px;
-    padding: 0 10px;
+    gap: 10px;
+    padding: 0 5px;
     min-width: max-content;
     /* justify-content: space-between; */
   }
@@ -189,7 +189,7 @@
 
   .mobile-chat-input-area {
     height: auto;
-    padding: 10px;
+    padding: 5px;
     background-color: hsl(var(--background));
     /* border-top: 1px solid hsl(var(--border)); */ /* Removed for cleaner separation */
     border-bottom: 1px solid hsl(var(--border)); /* Added for separation from messages area below */
@@ -205,7 +205,7 @@
     /* left: 0; */ /* Handled by parent flex */
     /* right: 0; */ /* Handled by parent flex */
     width: 100%; /* Ensure it takes full width of its container */
-    padding: 10px;
+    padding: 5px;
     background-color: hsl(var(--background));
     /* border-top: 1px solid hsl(var(--border)); */ /* Removed to avoid double border */
     /* z-index: 30; */ /* No longer needed */

components/header-search-button.tsx

@@ -33,7 +33,26 @@ export function HeaderSearchButton() {
   useEffect(() => {
     // Portals can only be used on the client-side after the DOM has mounted
     setDesktopPortal(document.getElementById('header-search-portal'))
-    setMobilePortal(document.getElementById('mobile-header-search-portal'))
+
+    // Mobile portal might mount later, so check periodically
+    const checkMobilePortal = () => {
+      const el = document.getElementById('mobile-header-search-portal')
+      if (el) {
+        setMobilePortal(el)
+        return true
+      }
+      return false
+    }
+
+    if (!checkMobilePortal()) {
+      const interval = setInterval(() => {
+        if (checkMobilePortal()) {
+          clearInterval(interval)
+        }
+      }, 500)
+
+      return () => clearInterval(interval)
+    }
   }, [])
 
   const handleResolutionSearch = async () => {
@@ -164,9 +183,12 @@ export function HeaderSearchButton() {
   )
 
   const mobileButton = (
-    <Button variant="ghost" size="sm" onClick={handleResolutionSearch} disabled={isAnalyzing || !map || !actions}>
-      <Search className="h-4 w-4 mr-2" />
-      Search
+    <Button variant="ghost" size="icon" onClick={handleResolutionSearch} disabled={isAnalyzing || !map || !actions} data-testid="mobile-search-button">
+      {isAnalyzing ? (
+        <div className="h-[1.2rem] w-[1.2rem] animate-spin rounded-full border-b-2 border-current"></div>
+      ) : (
+        <Search className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
+      )}
     </Button>
   )
 

components/header.tsx

@@ -44,7 +44,7 @@ export const Header = () => {
   return (
     <>
       <PurchaseCreditsPopup isOpen={isPurchaseOpen} onClose={() => setIsPurchaseOpen(false)} />
-    <header className="fixed w-full p-1 md:p-2 flex justify-between items-center z-[60] backdrop-blur bg-background/95 border-b border-border/40">
+    <header className="fixed w-full p-1 md:p-2 hidden md:flex justify-between items-center z-[60] backdrop-blur bg-background/95 border-b border-border/40">
       <div>
         <a href="/">
           <span className="sr-only">Chat</span>

components/mobile-icons-bar.tsx

@@ -19,6 +19,8 @@ import { MapToggle } from './map-toggle'
 import { ModeToggle } from './mode-toggle'
 import { ProfileToggle } from './profile-toggle'
 import { useCalendarToggle } from './calendar-toggle-context'
+import { useUsageToggle } from './usage-toggle-context'
+import { useProfileToggle } from './profile-toggle-context'
 
 interface MobileIconsBarProps {
   onAttachmentClick: () => void;
@@ -29,6 +31,16 @@ export const MobileIconsBar: React.FC<MobileIconsBarProps> = ({ onAttachmentClic
   const [, setMessages] = useUIState<typeof AI>()
   const { clearChat } = useActions()
   const { toggleCalendar } = useCalendarToggle()
+  const { toggleUsage, isUsageOpen } = useUsageToggle()
+  const { activeView, closeProfileView } = useProfileToggle()
+
+  const handleUsageToggle = () => {
+    // If we're about to open usage and profile is open, close profile first
+    if (!isUsageOpen && activeView) {
+      closeProfileView()
+    }
+    toggleUsage()
+  }
 
   const handleNewChat = async () => {
     setMessages([])
@@ -45,14 +57,10 @@ export const MobileIconsBar: React.FC<MobileIconsBarProps> = ({ onAttachmentClic
       <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar" data-testid="mobile-calendar-button">
         <CalendarDays className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
       </Button>
-      <Button variant="ghost" size="icon" data-testid="mobile-search-button">
-        <Search className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
+      <div id="mobile-header-search-portal" className="contents" />
+      <Button variant="ghost" size="icon" onClick={handleUsageToggle}>
+        <TentTree className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
       </Button>
-      <a href="https://www.paypal.com/ncp/payment/G82N9CZ6ZLLCQ" target="_blank" rel="noopener noreferrer">
-        <Button variant="ghost" size="icon">
-          <TentTree className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
-        </Button>
-      </a>
       <Button variant="ghost" size="icon" onClick={onAttachmentClick} data-testid="mobile-attachment-button">
         <Paperclip className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
       </Button>

components/purchase-credits-popup.tsx

@@ -19,7 +19,7 @@ interface PurchaseCreditsPopupProps {
 
 export function PurchaseCreditsPopup({ isOpen, onClose }: PurchaseCreditsPopupProps) {
   const handlePurchase = () => {
-    window.open('https://www.paypal.com/ncp/payment/G82N9CZ6ZLLCQ', '_blank');
+    window.open('https://buy.stripe.com/14A3cv7K72TR3go14Nasg02', '_blank');
     onClose();
   };
 

components/usage-view.tsx

@@ -32,7 +32,7 @@ export function UsageView() {
         <div className="p-4 border rounded-xl space-y-4">
           <div className="flex justify-between items-center">
             <span className="italic font-medium text-lg">Free</span>
-            <Button size="sm" className="rounded-full px-4" onClick={() => window.open('https://www.paypal.com/ncp/payment/G82N9CZ6ZLLCQ', '_blank')}>
+            <Button size="sm" className="rounded-full px-4" onClick={() => window.open('https://buy.stripe.com/14A3cv7K72TR3go14Nasg02', '_blank')}>
               Upgrade
             </Button>
           </div>