# Project export: Gov.AI

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: TreeHacks 2024
- Tagline: AI-Powered Governance: Shaping Tomorrow's Policies, Today
- Devpost: https://devpost.com/software/ai-powered-governance
- GitHub: https://github.com/treehacks24/ai-congress-frontend
- Demo: https://github.com/treehacks24/backend
- Team: 1 GitHub contributor(s) — Darshan (15 commits)

## Devpost submission (written by the team)

### Inspiration

Our project is driven by a clear purpose: to make a real, positive difference in society using technology, especially by fixing how the government works. We're excited about using statistical and reinforcement learning to tackle big issues like the tax gap and to build tools that agencies like the IRS and FDA can use. We're at a key moment for AI and learning technologies. We believe these technologies can hugely improve government efficiency, helping it better serve the community in today's fast-moving world.

### What it does

Our project brings to life a unique system for automating and improving policy-making through AI. It starts by gathering preferences from people or AI on what matters most for societal well-being. Then, it designs a game-like scenario where these preferences guide the creation of policies, aiming to achieve the best outcomes for society. This continuous loop of feedback and improvement allows for experimenting with policies in a safe, simulated environment, making it easier to see what works and what doesn't before implementing these policies in the real world.

### How we built it

We built our system by experimenting with various AI models and hosting solutions. Initially, we tried GPT-3.5 Turbo, Groq, and Together.AI, but decided on self-hosting for optimal performance. We started with Ollama, moved to Mystic, and finally settled on VLLM with RunPod, utilizing tensor parallelism and automatic weight quantization for efficiency.

### Challenges we ran into

Scaling our backend was challenging due to the need for batching inputs and managing resources efficiently. We faced difficulties in finding the right balance between speed and quality, and in deploying models that met our requirements.

### Accomplishments we're proud of

We're proud of deploying a system capable of running thousands of agents with efficient resource management, particularly our use of VLLM on RunPod with advanced computational strategies, which allowed us to achieve our goals.

### What we learned

We learned a lot about model optimization, the importance of the right hosting environment, and the balance between model size and performance. The experience has been invaluable in understanding how to scale AI systems effectively.

### What's next

Next, we aim to scale up to 100,000 to 1M agents by refining our token-level encoding scheme, further speeding up processing by an estimated 10x. This expansion will allow for broader experimentation with policies and more nuanced governance decisions, leveraging the full potential of AI to modernize and improve governmental efficiency and responsiveness. Our journey continues as we explore new technologies and methodologies to enhance our system's capabilities, driving forward the mission of Gov.Ai for societal betterment.

## README (from the GitHub repository)

# Convex + TypeScript + Next.js + Tailwind + shadcn/ui

This template provides a minimal setup to get Convex working with [Next.js](https://nextjs.org/).

Start by editing `convex/myFunctions.ts` and interact with your Next.js app.

See Convex docs at https://docs.convex.dev/home

## Setting up

```
npm create convex@latest -t nextjs-shadcn
```


## Detected evidence (automated analysis)

Indexed codebase: 92 recognized source files, 307 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- Next.js (technology) — detected in the code
- OpenAI (technology) — detected in the code
- React (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- TypeScript (language) — detected in the code
- FastAPI (technology) — claimed on Devpost, not found in the code
- MongoDB (technology) — claimed on Devpost, not found in the code
- Python (language) — claimed on Devpost, not found in the code
- Redis (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (97 of 97)

```
.eslintrc.cjs
.gitignore
app/api.ts
app/chat/chat.css
app/chat/chat.tsx
app/chat/segmented_control.module.css
app/ConvexClientProvider.tsx
app/globals.css
app/layout.tsx
app/layouts/layout.tsx
app/layouts/page.tsx
app/layouts/sticky-header-footer-below-fold/page.tsx
app/layouts/sticky-header-sidebar-footer-below-fold-responsive/page.tsx
app/layouts/sticky-header-sidebar-footer-below-fold/page.tsx
app/layouts/sticky-header-sidebar-footer-inside/page.tsx
app/layouts/sticky-header-sidebar-sticky-footer/page.tsx
app/layouts/sticky-header-sticky-footer/page.tsx
app/layouts/sticky-sides-flex-content-simple/page.tsx
app/layouts/sticky-sides-flex-content/page.tsx
app/map/page.tsx
app/orbparticles.css
app/page.css
app/page.tsx
app/user_home/page.css
app/user_home/page.tsx
app/visualize/page.tsx
components.json
components/helpers/AfterSSR.tsx
components/helpers/FakeParagraphs.tsx
components/helpers/FakeWordList.tsx
components/layout/footer.tsx
components/layout/paragraph.tsx
components/layout/responsive-sidebar-button.tsx
components/layout/sticky-footer.tsx
components/layout/sticky-header.tsx
components/layout/sticky-sidebar.tsx
components/typography/code.tsx
components/typography/link.tsx
components/ui/accordion.tsx
components/ui/alert-dialog.tsx
components/ui/alert.tsx
components/ui/aspect-ratio.tsx
components/ui/avatar.tsx
components/ui/badge.tsx
components/ui/button.tsx
components/ui/calendar.tsx
components/ui/card.tsx
components/ui/checkbox.tsx
components/ui/collapsible.tsx
components/ui/command.tsx
components/ui/context-menu.tsx
components/ui/dialog.tsx
components/ui/dropdown-menu.tsx
components/ui/form.tsx
components/ui/hover-card.tsx
components/ui/input.tsx
components/ui/label.tsx
components/ui/menubar.tsx
components/ui/navigation-menu.tsx
components/ui/popover.tsx
components/ui/progress.tsx
components/ui/radio-group.tsx
components/ui/scroll-area.tsx
components/ui/select.tsx
components/ui/separator.tsx
components/ui/sheet.tsx
components/ui/skeleton.tsx
components/ui/slider.tsx
components/ui/switch.tsx
components/ui/table.tsx
components/ui/tabs.tsx
components/ui/textarea.tsx
components/ui/toast.tsx
components/ui/toaster.tsx
components/ui/toggle.tsx
components/ui/tooltip.tsx
components/ui/use-toast.ts
convex/_generated/api.d.ts
convex/_generated/api.js
convex/_generated/dataModel.d.ts
convex/_generated/server.d.ts
convex/_generated/server.js
convex/init.ts
convex/messages.ts
convex/openai.ts
convex/README.md
convex/schema.ts
convex/users.ts
lib/utils.tsx
next.config.js
package.json
postcss.config.js
public/globe.html
public/visualization.html
README.md
tailwind.config.js
tsconfig.json
```

### Dependencies

- package.json: @faker-js/faker@^8.4.1, @hookform/resolvers@^3.3.2, @mantine/core@^7.5.3, @mantine/hooks@^7.5.3, @radix-ui/react-accordion@^1.1.2, @radix-ui/react-alert-dialog@^1.0.5, @radix-ui/react-aspect-ratio@^1.0.3, @radix-ui/react-avatar@^1.0.4, @radix-ui/react-checkbox@^1.0.4, @radix-ui/react-collapsible@^1.0.3, @radix-ui/react-context-menu@^2.1.5, @radix-ui/react-dialog@^1.0.5, @radix-ui/react-dropdown-menu@^2.0.6, @radix-ui/react-hover-card@^1.0.7, @radix-ui/react-icons@^1.3.0, @radix-ui/react-label@^2.0.2, @radix-ui/react-menubar@^1.0.4, @radix-ui/react-navigation-menu@^1.1.4, @radix-ui/react-popover@^1.0.7, @radix-ui/react-progress@^1.0.3, @radix-ui/react-radio-group@^1.1.3, @radix-ui/react-scroll-area@^1.0.5, @radix-ui/react-select@^1.2.2, @radix-ui/react-separator@^1.0.3, @radix-ui/react-slider@^1.1.2, @radix-ui/react-slot@^1.0.2, @radix-ui/react-switch@^1.0.3, @radix-ui/react-tabs@^1.0.4, @radix-ui/react-toast@^1.1.5, @radix-ui/react-toggle@^1.0.3, @radix-ui/react-tooltip@^1.0.7, @tabler/icons-react@^2.47.0, @types/node@20.6.0, @types/react@18.2.21, @types/react-dom@18.2.7, @typescript-eslint/eslint-plugin@^6.9.0, autoprefixer@10.4.15, class-variance-authority@^0.7.0, clsx@^2.0.0, cmdk@^0.2.0, convex@^1.8.0, date-fns@^2.30.0, eslint@8.49.0, eslint-config-next@13.4.19, jabber@^1.5.3, next@13.4.19, npm-run-all@^4.1.5, openai@^4.28.0, postcss@^8.4.35, postcss-loader@^8.1.0, postcss-preset-mantine@^1.13.0, react@18.2.0, react-day-picker@^8.9.1, react-dom@18.2.0, react-hook-form@^7.47.0, react-remove-scroll@^2.5.6, react-simple-maps@^3.0.0, tailwind-merge@^1.14.0, tailwindcss@3.3.3, tailwindcss-animate@^1.0.7, typescript@5.2.2, zod@^3.22.4

### Recent commits (newest first)

- Fixed version
- Added optimize code
- Working no sim
- Add all apis
- Add crazy orb particles
- Add different state toggles
- Add title
- Fix chat bar scrolling
- Clean up UI
- Fix chat ui
- Add convex chatbot
- Add mantine
- Add mantine
- Add user home
- First commit

## Key source files (fetched from GitHub, selected and truncated for size)

### package.json

```
{
  "name": "ai-congress",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "npm-run-all --parallel dev:frontend dev:backend",
    "dev:frontend": "next dev",
    "dev:backend": "convex dev",
    "predev": "convex dev --until-success && convex dashboard",
    "build": "next build",
    "start": "next start",
    "lint": "tsc && next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.2",
    "@mantine/core": "^7.5.3",
    "@mantine/hooks": "^7.5.3",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-aspect-ratio": "^1.0.3",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-context-menu": "^2.1.5",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-hover-card": "^1.0.7",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-menubar": "^1.0.4",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-select": "^1.2.2",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slider": "^1.1.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "@radix-ui/react-toggle": "^1.0.3",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@tabler/icons-react": "^2.47.0",
    "@types/node": "20.6.0",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.9.0",
    "autoprefixer": "10.4.15",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.0",
    "convex": "^1.8.0",
    "date-fns": "^2.30.0",
    "eslint": "8.49.0",
    "eslint-config-next": "13.4.19",
    "jabber": "^1.5.3",
    "next": "13.4.19",
    "openai": "^4.28.0",
    "react": "18.2.0",
    "react-day-picker": "^8.9.1",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.47.0",
    "react-remove-scroll": "^2.5.6",
    "react-simple-maps": "^3.0.0",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "3.3.3",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "5.2.2",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@faker-js/faker": "^8.4.1",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.35",
    "postcss-loader": "^8.1.0",
    "postcss-preset-mantine": "^1.13.0"
  }
}

```

### app/layout.tsx

```typescript
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import ConvexClientProvider from "./ConvexClientProvider";
import '@mantine/core/styles.css';
import { createTheme, MantineProvider } from '@mantine/core';


const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "gov.ai",
  description: "An AI governance platform.",
};

const theme = createTheme({
  /** Put your mantine theme override here */
});

export default function RootLayout ({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <MantineProvider theme={theme}>
          <ConvexClientProvider>{children}</ConvexClientProvider>
        </MantineProvider>
      </body>
    </html>
  );
}

```

### app/page.tsx

```typescript
"use client";

import { api } from "../convex/_generated/api";
import { useMutation } from "convex/react";
import { useState } from "react";
import { useRouter } from 'next/navigation'
import { createUser } from "./api";

import { Stack, TextInput, Text, Button, Group, Title } from "@mantine/core";

import "./page.css";
import "./orbparticles.css";


export default function Home () {
  const [name, setName] = useState("");
  const createUserConvex = useMutation(api.users.create);
  const router = useRouter()

  const handleButtonClick = async () => {
    // Create a random user id
    const userId = Math.floor(Math.random() * 5000).toString();

    // Store user in convex database
    createUserConvex({ name: name, userId: userId })
      .then(response => console.log(response))
      .catch(error => console.log(error))

    // Store user in backend database
    createUser(name, userId)
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.log(error))
    
      // Store in local storage
    localStorage.setItem('userId', userId)

    // Move to the next page
    router.push('/user_home')
  }

  const numParticles = Array.from(Array(100).keys());

  const crazyOrbParticles = numParticles.map((number) => {
    return <div className='c' key={number}></div>;
  });

  return (
    <main>
      <div className="dialogue-container">
        <Stack gap={75}>
          <Stack mt={175} align="center">
            <Title>What is your name?</Title>
            <TextInput
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Name"
              size="xl"
              radius="xl"
              w="95%"
            />
          </Stack>
          <Stack align="center">
            <Button onClick={handleButtonClick} className="button box-shadow" w="50%" justify="center" radius="lg" size="lg" variant="default">
              Begin
            </Button>
          </Stack>
        </Stack>
      </div>
      {/* Crazy orb in background */}
      <div className='wrap'>
        {crazyOrbParticles}
      </div>
    </main >
  );
}

```

### app/visualize/page.tsx

```typescript
export default function Visualize() {
  return (
    <div>
      <h1>Visualize</h1>
    </div>
  );
}
```

### app/layouts/layout.tsx

```typescript
import type { Metadata } from "next";
import { ReactNode } from "react";

export const metadata: Metadata = {
  title: "Layout showcase - you can delete me",
  description: 'You can delete the whole "layouts" directory',
};

export default function LayoutsLayout({ children }: { children: ReactNode }) {
  return children;
}

```

### app/map/page.tsx

```typescript
"use client"

import React from "react";
import {
  ComposableMap,
  Geographies,
  Geography,
  Marker
} from "react-simple-maps";

const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";

const people = [
  {
    name: "Eddie Zhang", coordinates: [-90.1193, 40.4897]
  },
]

function MapChart () {
  return (
    <ComposableMap
      projection="geoAlbersUsa"
      projectionConfig={{
        scale: 800,
      }}
    >
      <Geographies geography={geoUrl}>
        {({ geographies }) =>
          geographies.map((geo) => (
            <Geography
              key={geo.rsmKey}
              geography={geo}
              fill="#EAEAEC"
              stroke="#D6D6DA"
            />
          ))
        }
      </Geographies>
      {people.map(({ name, coordinates }) => (
        <Marker key={name} coordinates={coordinates}>
          <circle r={8} fill="#3498db" stroke="#fff" strokeWidth={2} />
          <text
            textAnchor="middle"
            y={-15}
            style={{ fill: "#5D5A6D", fontSize: "12px" }}
          >
            {name}
          </text>
        </Marker>
      ))}
    </ComposableMap>
  );
};

export default MapChart;

```

### convex/_generated/server.js

```javascript
/* eslint-disable */
/**
 * Generated utilities for implementing server-side Convex query and mutation functions.
 *
 * THIS CODE IS AUTOMATICALLY GENERATED.
 *
 * Generated by convex@1.8.0.
 * To regenerate, run `npx convex dev`.
 * @module
 */

import {
  actionGeneric,
  httpActionGeneric,
  queryGeneric,
  mutationGeneric,
  internalActionGeneric,
  internalMutationGeneric,
  internalQueryGeneric,
} from "convex/server";

/**
 * Define a query in this Convex app's public API.
 *
 * This function will be allowed to read your Convex database and will be accessible from the client.
 *
 * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 */
export const query = queryGeneric;

/**
 * Define a query that is only accessible from other Convex functions (but not from the client).
 *
 * This function will be allowed to read from your Convex database. It will not be accessible from the client.
 *
 * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 */
export const internalQuery = internalQueryGeneric;

/**
 * Define a mutation in this Convex app's public API.
 *
 * This function will be allowed to modify your Convex database and will be accessible from the client.
 *
 * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 */
export const mutation = mutationGeneric;

/**
 * Define a mutation that is only accessible from other Convex functions (but not from the client).
 *
 * This function will be allowed to modify your Convex database. It will not be accessible from the client.
 *
 * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 */
export const internalMutation = internalMutationGeneric;

/**
 * Define an action in this Convex app's public API.
 *
 * An action is a function which can execute any JavaScript code, including non-deterministic
 * code and code with side-effects, like calling third-party services.
 * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
 * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
 *
 * @param func - The action. It receives an {@link ActionCtx} as its first argument.
 * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
 */
export const action = actionGeneric;

/**
 * Define an action that is only accessible from other Convex functions (but not from the client).
 *
 * @param func - The function. It receives an {@link ActionCtx} as its first argument.
 * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
 */
export const internalAction = internalActionGeneric;

/**
 * Define a Convex HTTP action.
 *
 * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object
 * as its second.
 * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`.
 */
export const httpAction = httpActionGeneric;

```

### app/layouts/page.tsx

```typescript
import { Code } from "@/components/typography/code";
import { Link } from "@/components/typography/link";

export default function Layouts() {
  return (
    <main className="container grid md:grid-cols-3 gap-12 p-4">
      <Link href="/layouts/sticky-header-sticky-footer">
        Sticky header, sticky footer
        <div className="pt-2">
          <div className="border-2 border-primary">
            <div className="h-4 w-full bg-red-400"></div>
            <div className="h-32 w-full bg-blue-400"></div>
            <div className="h-4 w-full bg-yellow-400"></div>
          </div>
        </div>
      </Link>

      <Link href="/layouts/sticky-header-footer-below-fold">
        Sticky header, footer below fold
        <div className="pt-2">
          <div className="border-2 border-primary">
            <div className="h-4 w-full bg-red-400"></div>
            <div className="h-32 w-full bg-blue-400"></div>
          </div>
          <div className="h-4 w-full bg-yellow-400"></div>
        </div>
      </Link>

      <Link href="/layouts/sticky-header-sidebar-footer-below-fold">
        Sticky header, sticky sidebar, footer below fold
        <div className="pt-2">
          <div className="border-2 border-primary">
            <div className="h-4 w-full bg-red-400"></div>
            <div className="flex">
              <div className="h-32 w-20 bg-green-400"></div>
              <div className="h-32 w-full bg-blue-400"></div>
            </div>
          </div>
          <div className="h-4 w-full bg-yellow-400"></div>
        </div>
      </Link>

      <Link href="/layouts/sticky-header-sidebar-footer-inside">
        Sticky header, sticky sidebar, footer inside & below fold
        <div className="pt-2">
          <div className="border-2 border-primary">
            <div className="h-4 w-full bg-red-400"></div>
            <div className="flex">
              <div className="h-32 w-20 bg-green-400"></div>
              <div className="h-32 w-full bg-blue-400"></div>
            </div>
          </div>
          <div className="flex">
            <div className="w-[82px]"></div>
            <div className="h-4 w-full bg-yellow-400"></div>
          </div>
        </div>
      </Link>

      <Link href="/layouts/sticky-header-sidebar-sticky-footer">
        Sticky header, sticky sidebar, sticky footer
        <div className="pt-2">
          <div className="border-2 border-primary">
            <div className="h-4 w-full bg-red-400"></div>
            <div className="flex">
              <div className="h-32 w-20 bg-green-400"></div>
              <div className="h-32 w-full bg-blue-400"></div>
            </div>
            <div className="h-4 w-full bg-yellow-400"></div>
          </div>
        </div>
      </Link>

      <Link href="/layouts/sticky-sides-flex-content">
        Sticky header & sidebar & footer, full-screen content
        <div className="pt-2">
          <div className="border-2 border-primary">
            <div className="h-4 w-full bg-red-400"></div>
            <div className="flex">
              <div className="h-32 w-20 bg-green-400"></div>
              <div className="h-32 w-full bg-blue-400 p-2">
                <div className="h-full w-full bg-blue-200"></div>
              </div>
            </div>
            <div className="h-4 w-full bg-yellow-400"></div>
          </div>
        </div>
      </Link>

      <Link href="/layouts/sticky-sides-flex-content-simple">
        Sticky header & sidebar & footer, full-screen content (simple)
        <div className="pt-2">
          <div className="border-2 border-primary">
            <div className="h-4 w-full bg-red-400"></div>
            <div className="flex">
              <div className="h-32 w-20 bg-green-400"></div>
              <div className="h-32 w-full bg-blue-400 p-2">
                <div className="h-full w-full bg-blue-200"></div>
              </div>
            </div>
            <div className="h-4 w-full bg-yellow-400"></div>
          </div>
        </div>
      </Link>

      <Link href="/layouts/sticky-header-sidebar-footer-below-fold-responsive">
        Sticky header & sidebar, footer below fold, responsive
        <div className="pt-2 grid grid-cols-[4rem,4rem,1fr] gap-2">
          <div>
            <div className="border-2 border-primary">
              <div className="h-4 w-full bg-red-400 flex items-center justify-end p-1">
                <div className="h-2 w-2 bg-red-200" />
              </div>
              <div className="flex">
                <div className="h-32 w-full bg-blue-400"></div>
              </div>
            </div>
          </div>
          <div>
            <div className="border-2 border-primary">
              <div className="h-4 w-full bg-red-400 flex items-center justify-end p-1">
                <div className="h-2 w-2 bg-red-200" />
              </div>
              <div className="flex">
                <div className="h-32 w-full bg-green-400"></div>
              </div>
            </div>
          </div>
          <div>
            <div className="border-2 border-primary">
              <div className="h-4 w-full bg-red-400"></div>
              <div className="flex">
                <div className="h-32 w-20 bg-green-400"></div>
                <div className="h-32 w-full bg-blue-400"></div>
              </div>
            </div>
            <div className="h-4 w-full bg-yellow-400"></div>
          </div>
        </div>
      </Link>
      <p>
        Done with layouts? Simply delete the <Code>app/layouts</Code> directory.
      </p>
    </main>
  );
}

```

### app/user_home/page.tsx

```typescript
"use client"

import { useState, useEffect } from "react";
import { useQuery } from "convex/react";
import { api } from "../../convex/_generated/api";
import Link from "next/link";
import { getStateDetail } from "@/app/api";

import { Button, Stack, Title, Grid, Tooltip, SegmentedControl, Progress } from "@mantine/core";
import { IconBrain, IconCoin, IconHeart, IconMoneybag, IconSocial, IconUmbrella, IconUsers, IconWallet } from '@tabler/icons-react';
import Chat from '@/app/chat/chat'

import classes from "@/app/chat/segmented_control.module.css";
import "./page.css";



export default function UserHome () {
  const user = useQuery(api.users.get, { userId: localStorage.getItem("userId")! });
  const [stateDetail, setStateDetail] = useState(null);

  const getStateDetailLocal = () => {
    getStateDetail(localStorage.getItem("userId")!)
      .then(result => result.json())
      .then(data => {
        console.log(data)
        setStateDetail(data)
      })
      .catch(err => console.log(err))
  }

  useEffect(() => {
    getStateDetailLocal()
    const interval = setInterval(() => getStateDetailLocal(), 5000)
    return () => {
      clearInterval(interval);
    }
  }, [])

  return (
    <Grid gutter={0}>
      <Grid.Col span={3}>
        <Stack p="xl" className="column state-column">
          <Sidebar name={user?.name} stateDetail={stateDetail} />
        </Stack>
      </Grid.Col>
      <Grid.Col span={9}>
        <Chat name={user?.name} userId={user?.userId} />
      </Grid.Col>
    </Grid>
  );
}

function Sidebar ({ name, stateDetail }: { name: string, stateDetail: any }) {
  return (
    <Stack gap={70} justify="space-between" align="center">
      <Title mt="md" order={1}>{name}</Title>
      <StateDetail stateDetail={stateDetail} />
      <Button mt={85} className="box-shadow" justify="center" radius="lg" size="lg" leftSection={<IconUsers size={14} />} variant="default" component={Link} href="/globe.html">
        Find more people
      </Button>
    </Stack>
  );
}

function StateDetail ({ stateDetail }: { stateDetail: any }) {
  const [demoType, setDemoType] = useState("insurance");

  let stateDetails;

  if (demoType === "general") {
    stateDetails = <GeneralStateDetails netWorth={stateDetail?.netWorth} healthScore={stateDetail?.healthScore} wellnessScore={stateDetail?.wellnessScore} socialScore={stateDetail?.socialScore} />;
  } else {
    stateDetails = <InsuranceStateDetails netWorth={stateDetail?.netWorth} healthScore={stateDetail?.healthScore} insurancePremium={stateDetail?.insurancePremium} insuranceDeductible={stateDetail?.insuranceDeductible} insuranceCoverage={stateDetail?.insuranceCoverage} />;
  }

  return (
    <Stack>
      {stateDetails}
      {/* <SegmentedControl
        radius="xl"
        size="sm"
        value={demoType}
        onChange={setDemoType}
        data={['insurance', 'general']}
        classNames={classes}
        w="100%"
      /> */}
    </Stack>
  )
}

function GeneralStateDetails ({ netWorth = 100, healthScore = 51, wellnessScore = 42, socialScore = 31 }) {
  return (
    <Stack gap="xs" mt={60}>
      <Tooltip label="Net worth">
        <Button className="box-shadow" justify="center" radius="lg" size="lg" leftSection={<IconMoneybag />} variant="default">
          ${netWorth.toLocaleString()}
        </Button>
      </Tooltip>
      <Tooltip label="Health score">
        <Button className="box-shadow" justify="center" radius="lg" size="lg" leftSection={<IconHeart />} variant="default">
          {healthScore} / 100
        </Button>
      </Tooltip>
      <Tooltip label="Wellness score">
        <Button className="box-shadow" justify="center" radius="lg" size="lg" leftSection={<IconBrain />} variant="default">
          {wellnessScore} / 100
        </Button>
      </Tooltip>
      <Tooltip label="Social score">
        <Button className="box-shadow" justify="center" radius="lg" size="lg" leftSection={<IconSocial />} variant="default">
          {socialScore} / 100
        </Button>
      </Tooltip>
    </Stack>
  )
}

function InsuranceStateDetails ({ netWorth = 0, healthScore = 0, insurancePremium = 0, insuranceCoverage = 0, insuranceDeductible = 0 }) {
  return (
    <Stack gap="xs" mt={60}>
      <Tooltip label="Net worth">
        <Button className="box-shadow" justify="center" radius="lg" size="lg" leftSection={<IconMoneybag />} variant="default">
          ${netWorth.toLocaleString()}
        </Button>
      </Tooltip>
      <Tooltip label="Health score">
        <Button className="box-shadow" justify="center" radius="lg" size="lg" leftSection={<IconHeart />} variant="default">
          {healthScore} / 100
        </Button>
      </Tooltip>
      <Tooltip label="Insurance premium">
        <Button className="box-shadow" justify="center" radius="lg" size="lg" leftSection={<IconCoin />} variant="default">
          ${insurancePremium.toLocaleString()}
        </Button>
      </Tooltip>
      <Tooltip label="Insurance coverage">
        <Button className="box-shadow" justify="center" radius="lg" size="lg" leftSection={<IconUmbrella />} variant="default">
          ${insuranceCoverage.toLocaleString()}
        </Button>
      </Tooltip>
      <Tooltip label="Insurance deductible">
        <Button className="box-shadow" justify="center" radius="lg" size="lg" leftSection={<IconWallet />} variant="default">
          ${insuranceDeductible.toLocaleString()}
        </Button>
      </Tooltip>
    </Stack>
  )
}


/*
// General Case
{
  netWorth: number, // $
  healthScore: number, // 0-100
  wellnessScore: number, // 0-100
  socialScore: number, // 0-100
}

// Insurance Case
{
  netWorth: number, // $
  healthScore: number, // 0-100
  insurancePremium: number, // $
  insuranceCoverage: number, // $
  insuranceDeductible: number, // $
}
*/
```

### app/layouts/sticky-header-footer-below-fold/page.tsx

```typescript
import { FakeParagraphs } from "@/components/helpers/FakeParagraphs";
import { Footer } from "@/components/layout/footer";
import { Paragraph } from "@/components/layout/paragraph";
import { StickyHeader } from "@/components/layout/sticky-header";

export default function Layout() {
  return (
    <>
      <StickyHeader className="p-2">Sticky header</StickyHeader>
      {/* For Footer to appear below the fold, the subtrahend
        inside calc() must be the same height as the header */}
      <main className="min-h-[calc(100vh-(2.5rem+1px))]">
        <Paragraph>Main content</Paragraph>
        <FakeParagraphs words={80} count={5} />
      </main>
      <Footer>Footer below fold</Footer>
    </>
  );
}

```

[80 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]