# DRAAN.ai — Full Source Code
# Generated for AI crawlers. See /llms.txt for the structured summary.
# Built by CmdShift, LLC — Darin Manley, Founder

================================================================
FILE: artifacts/draan-ai/src/App.tsx
================================================================

import { Switch, Route, Router as WouterRouter } from "wouter";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import LandingPage from "@/pages/LandingPage";
import WhatIsDraanPage from "@/pages/WhatIsDraanPage";
import PaperPage from "@/pages/PaperPage";
import ChatPage from "@/pages/ChatPage";
import PrivacyPage from "@/pages/PrivacyPage";
import TermsPage from "@/pages/TermsPage";
import SmsConsentPage from "@/pages/SmsConsentPage";
import NotFound from "@/pages/not-found";
import PaperGate from "@/components/PaperGate";
import { IrisTransitionProvider } from "@/components/IrisTransition";
import "./index.css";

const queryClient = new QueryClient();

function ProtectedPaper() {
  return (
    <PaperGate>
      <PaperPage />
    </PaperGate>
  );
}

function Router() {
  return (
    <IrisTransitionProvider>
      <Switch>
        <Route path="/" component={WhatIsDraanPage} />
        <Route path="/what-is-draan" component={LandingPage} />
        <Route path="/paper" component={ProtectedPaper} />
        <Route path="/chat" component={ChatPage} />
        <Route path="/privacy" component={PrivacyPage} />
        <Route path="/terms" component={TermsPage} />
        <Route path="/sms-consent" component={SmsConsentPage} />
        <Route component={NotFound} />
      </Switch>
    </IrisTransitionProvider>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <WouterRouter base={import.meta.env.BASE_URL.replace(/\/$/, "")}>
        <Router />
      </WouterRouter>
    </QueryClientProvider>
  );
}

export default App;


================================================================
FILE: artifacts/draan-ai/src/components/IrisTransition.tsx
================================================================

import { createContext, useContext, useState, useCallback, useRef, useEffect } from "react";
import { useLocation } from "wouter";

interface IrisContextType {
  navigateWithIris: (path: string) => void;
}

export const IrisContext = createContext<IrisContextType>({
  navigateWithIris: () => {},
});

export function useIrisNavigate() {
  return useContext(IrisContext).navigateWithIris;
}

type Phase = "idle" | "close" | "hold" | "open";

export function IrisTransitionProvider({ children }: { children: React.ReactNode }) {
  const [, setLocation] = useLocation();
  const [phase, setPhase] = useState<Phase>("idle");
  const timerRefs = useRef<number[]>([]);
  const rafRefs = useRef<number[]>([]);
  const busy = useRef(false);

  function clearAll() {
    timerRefs.current.forEach(clearTimeout);
    timerRefs.current = [];
    rafRefs.current.forEach(cancelAnimationFrame);
    rafRefs.current = [];
  }

  const navigateWithIris = useCallback(
    (path: string) => {
      if (busy.current) return;
      busy.current = true;
      clearAll();

      // Phase 1 — iris closes (circle shrinks to nothing) over 800ms
      setPhase("close");

      const t1 = window.setTimeout(() => {
        // Phase 2 — hold: lens is at 0, screen is black
        setPhase("hold");

        // Wait two frames so "hold" is painted before we swap the route
        const r1 = requestAnimationFrame(() => {
          const r2 = requestAnimationFrame(() => {
            setLocation(path);

            // Phase 3 — iris opens (circle grows to full screen) over 700ms
            const t2 = window.setTimeout(() => {
              setPhase("open");

              const t3 = window.setTimeout(() => {
                setPhase("idle");
                busy.current = false;
              }, 700);
              timerRefs.current.push(t3);
            }, 60);
            timerRefs.current.push(t2);
          });
          rafRefs.current.push(r2);
        });
        rafRefs.current.push(r1);
      }, 800);
      timerRefs.current.push(t1);
    },
    [setLocation]
  );

  useEffect(() => {
    const html = document.documentElement;
    if (phase !== "idle") {
      html.classList.add("iris-active");
    } else {
      html.classList.remove("iris-active");
    }
    return () => html.classList.remove("iris-active");
  }, [phase]);

  const isAnimating = phase !== "idle";

  return (
    <IrisContext.Provider value={{ navigateWithIris }}>
      {phase !== "idle" && (
        <div className="iris-overlay" aria-hidden="true">
          <div className={`iris-lens iris-lens-${phase}`} />
        </div>
      )}
      {children}
    </IrisContext.Provider>
  );
}


================================================================
FILE: artifacts/draan-ai/src/components/Topbar.tsx
================================================================

import { useState, useEffect } from "react";
import { Link, useLocation } from "wouter";
import { useIrisNavigate } from "@/components/IrisTransition";

interface TopbarProps {
  activePage?: "home" | "whatis" | "paper" | "chat";
}

export default function Topbar({ activePage }: TopbarProps) {
  const [menuOpen, setMenuOpen] = useState(false);
  const [location] = useLocation();
  const navigateWithIris = useIrisNavigate();

  useEffect(() => { setMenuOpen(false); }, [location]);

  useEffect(() => {
    if (menuOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  function goToChat() { navigateWithIris("/chat"); }
  function goToHome() { navigateWithIris("/"); }

  return (
    <>
      <nav className="topbar">
        <button className="topbar-logo" onClick={goToHome}>
          <img src="/draan-logo.ico" alt="DRAAN" className="topbar-logo-img" />
          DRAAN <span>v0.1</span>
        </button>
        <div className="topbar-links">
          {/* nav links vary by activePage */}
          <Link href="/what-is-draan">What's DRAAN?</Link>
          <button className="topbar-cta" onClick={goToChat}>Try Chat →</button>
        </div>
        <button className="topbar-hamburger" aria-label="Toggle menu">
          <span/><span/><span/>
        </button>
      </nav>
    </>
  );
}


================================================================
FILE: artifacts/draan-ai/src/components/PaperGate.tsx
================================================================

// Password-protects /paper. Verifies a session token against /api/paper/verify.
// On success stores token in sessionStorage under "draan_paper_token".

const API = import.meta.env.VITE_API_URL ?? "";
const STORAGE_KEY = "draan_paper_token";

async function verifyToken(token: string): Promise<boolean> {
  if (!token) return false;
  try {
    const res = await fetch(`${API}/api/paper/verify`, {
      method: "POST",
      headers: { Authorization: `Bearer ${token}` },
    });
    const data = await res.json();
    return data.valid === true;
  } catch {
    return false;
  }
}

// Auth form posts to /api/paper/auth with { username, password }
// Returns { token } on success, { error } on failure.


================================================================
FILE: artifacts/draan-ai/src/pages/WhatIsDraanPage.tsx  (main landing — route: /)
================================================================

// MeshCanvas — interactive WebGL-like canvas background
// Uses forwardRef + MeshHandle for implode/explode animation API
// landing=true: 110 nodes, 230px connect distance, window-level mouse tracking
// landing=false: 60 nodes, 180px connect distance

// Key sections (in order):
//   HERO      — "The Browser Is The Model." | 10ms retrieval | mesh canvas
//   COST      — Token pricing comparison: cloud LLMs vs DRAAN ($0 token cost)
//   EQUATION  — attention(Q,K,V) = softmax(QK^T / sqrt(d)) * V
//   RLM       — Retrieval Language Model definition
//   INFRA     — Two deployment modes: Raspberry Pi / VPS server OR browser WebGPU
//   HOWITWORKS — 7-card grid: Brain, Entity Links, Self-Sustaining, GloVe,
//                Neuroplastic Learning, Query Comprehension, Brain Marketplace
//   ARCH      — 5-layer stack: L0 browser fleet → L1 text → L2 TF-IDF/BM25
//                → L3 cross-attention → L4 response composition
//   COMPARE   — GPU cluster vs commodity server side-by-side
//   MODES     — Three modes: Extractive | Grounded | Inferential
//   TURBOQUANT — Google Research ICLR 2026, arXiv:2504.19874
//                6x KV cache compression, 0% accuracy loss, 8x speedup
//   PROVENANCE — Source attribution system
//   VERTICALS  — Target industries
//   DEMO       — Live chat demo embed
//   CLUSTERS   — 30 knowledge domains
//   FAQ        — 8 questions
//   THESIS     — Closing investment thesis
//   CTA        — Waitlist signup with Mailgun double opt-in

// Hero copy:
//   headline: "The Browser / Is The Model."
//   subline:  "10ms retrieval. Local generation. Every answer traces to its source."
//   italic:   "No cloud. No tokens. No GPU."
//   stats:    14 patent-grade claims | 324K indexed chunks | 1 e-Brain | 0 LLMs | 0 Tokens | 0 GPUs


================================================================
FILE: artifacts/draan-ai/src/pages/LandingPage.tsx  (trust-layer narrative — route: /what-is-draan)
================================================================

// Hero:
//   headline: "Your LLM / hallucinates. / DRAAN doesn't."
//   sub: "Every company deploying AI has the same problem..."
//   stats: 0 LLMs | 0 Parameters | 0 Training Cost | 0 GPU | 0 Tokens

// Sections:
//   THE PROBLEM — 5 thesis cards: Verified not generated, Zero-cost verification,
//                 Attention without parameters, Censorship-resistant, Fully on-prem
//   EQUATION    — User question → LLM generates → DRAAN verifies → trusted output
//   ARCH        — 5 layers: L0 domain intelligence → L1 signal extraction →
//                 L2 distributed knowledge → L3 attention scoring → L4 verified synthesis
//   COMPARE     — Table: hallucination risk, source attribution, verification cost,
//                 data sovereignty, knowledge freshness, deployment cost, hardware, compliance
//   DEMO        — Terminal output showing verified answers with source citations
//   CLUSTERS    — 30 knowledge domains grid
//   FAQ         — 6 questions including "How is this different from RAG?"
//   THESIS      — Closing: "The intelligence emerges from mathematical structure"
//   WAITLIST    — Email + optional SMS consent (TCPA compliant, unchecked by default)


================================================================
FILE: artifacts/draan-ai/src/pages/PaperPage.tsx  (route: /paper — password protected)
================================================================

// White paper: "DRAAN: Dynamic Retrieval Augmented Attention Network"
// Sections: Abstract | Introduction | Architecture | RLM Definition |
//           Mathematical Foundation | TurboQuant Integration |
//           Deployment Modes | Patent Claims | Conclusion
// Access: requires valid session token from PaperGate


================================================================
ROUTE MAP
================================================================

/               → WhatIsDraanPage  (main investor/product landing)
/what-is-draan  → LandingPage      (trust-layer narrative for enterprise)
/chat           → ChatPage         (live chat → FastAPI at think.draan.ai)
/paper          → PaperGate → PaperPage  (password-protected white paper)
/privacy        → PrivacyPage
/terms          → TermsPage
/sms-consent    → SmsConsentPage   (TCPA/CTIA compliant, 4-year recordkeeping)


================================================================
API ROUTES  (Express 5, artifacts/api-server)
================================================================

POST /api/paper/auth     — authenticate with username+password, returns JWT token
POST /api/paper/verify   — verify JWT token validity
POST /api/waitlist       — join email waitlist (Mailgun double opt-in)
GET  /api/health         — health check


================================================================
KEY DESIGN DECISIONS
================================================================

1. The browser is the model — no cloud LLM calls, no GPU, runs on CPU via WebGPU or server
2. TurboQuant (arXiv:2504.19874) — 6x KV cache compression for grounded mode LLM
3. Brain Marketplace — vector stores at brain.draan.ai, downloaded once, run forever locally
4. Iris wipe transitions — box-shadow lens CSS animation: close→hold→swap route→open→idle
5. MeshCanvas — 110 nodes, amber+teal clusters, window-level mouse tracking, implode/explode API
6. DRAAN acronym — Dynamic Retrieval Augmented Attention Network (no hyphen, not "Distributed")
7. Speed claim — 10ms retrieval latency (BM25 + cosine similarity, no token generation)
8. Copyright — CmdShift, LLC 2026 | legal@draan.ai | privacy@draan.ai


================================================================
DESIGN TOKENS
================================================================

--amber:  #f59e0b   primary accent
--teal:   #14b8a6   secondary accent
--bg:     #050709   primary background
--bg2:    #080b0f   section alternating bg
--fg:     #fafaf9   primary text (not pure white)
--fg2:    #8aa8c4   body text
--fg3:    #4a6080   muted/caption
--red:    #ef4444   error/danger
--mono:   'JetBrains Mono', monospace
--serif:  Georgia, serif