Tim/eng 1475 visual bugs

apps/framework-docs-v2/README.md

@@ -28,6 +28,42 @@ pnpm build
 pnpm test:snippets
 ```
 
+## Environment Variables
+
+Create a `.env.local` file in the root directory with the following variables:
+
+```bash
+# GitHub API token (optional but recommended)
+# Without token: 60 requests/hour rate limit
+# With token: 5,000 requests/hour rate limit
+GITHUB_TOKEN=your_github_token_here
+```
+
+### Creating a GitHub Token
+
+**Option 1: Using GitHub CLI (recommended)**
+
+If you have the GitHub CLI (`gh`) installed and authenticated:
+
+```bash
+# Get your current GitHub token
+gh auth token
+
+# Or create a new token with specific scopes
+gh auth refresh -s public_repo
+```
+
+Then add the token to your `.env.local` file.
+
+**Option 2: Using the Web Interface**
+
+1. Go to https://github.com/settings/tokens
+2. Click "Generate new token" → "Generate new token (classic)"
+3. Give it a name (e.g., "Moose Docs")
+4. Select the `public_repo` scope (or no scopes needed for public repos)
+5. Generate and copy the token
+6. Add it to your `.env.local` file
+
 ## Structure
 
 - `/src/app/typescript` - TypeScript documentation

apps/framework-docs-v2/content/guides/applications/automated-reports/guide-overview.mdx

@@ -0,0 +1,17 @@
+---
+title: Automated Reports Overview
+description: Overview of building automated reporting systems with MooseStack
+---
+
+# Automated Reports Overview
+
+This guide covers how to build automated reporting systems using MooseStack workflows and APIs.
+
+## Overview
+
+Automated reporting systems enable scheduled and event-driven report generation, distribution, and management.
+
+## Getting Started
+
+Select a starting point from the sidebar to begin implementing automated reports.
+

apps/framework-docs-v2/content/guides/applications/going-to-production/guide-overview.mdx

@@ -0,0 +1,17 @@
+---
+title: Going to Production Overview
+description: Overview of preparing and deploying MooseStack applications to production
+---
+
+# Going to Production Overview
+
+This guide covers best practices and considerations for deploying MooseStack applications to production environments.
+
+## Overview
+
+Deploying to production requires careful planning around infrastructure, monitoring, security, and scalability.
+
+## Getting Started
+
+Select a starting point from the sidebar to begin preparing for production deployment.
+

apps/framework-docs-v2/content/guides/applications/in-app-chat-analytics/guide-overview.mdx

@@ -0,0 +1,17 @@
+---
+title: In-App Chat Analytics Overview
+description: Overview of implementing analytics for in-app chat features
+---
+
+# In-App Chat Analytics Overview
+
+This guide shows you how to implement analytics for in-app chat features using MooseStack.
+
+## Overview
+
+Implementing analytics for in-app chat requires tracking messages, user interactions, and engagement metrics in real-time.
+
+## Getting Started
+
+Select a starting point from the sidebar to begin implementing in-app chat analytics.
+

apps/framework-docs-v2/content/guides/applications/performant-dashboards/existing-oltp-db.mdx

@@ -0,0 +1,36 @@
+---
+title: From Existing OLTP DB
+description: Build performant dashboards by connecting to your existing OLTP database
+---
+
+# From Existing OLTP DB
+
+This guide walks you through building performant dashboards by connecting to your existing OLTP (Online Transaction Processing) database and creating optimized materialized views for analytics.
+
+## Overview
+
+When you have an existing OLTP database (like PostgreSQL, MySQL, or SQL Server), you can leverage MooseStack to create high-performance dashboards without disrupting your production database. This approach involves:
+
+1. **Connecting** to your existing database
+2. **Creating materialized views** that aggregate and pre-compute data
+3. **Querying** the materialized views for fast dashboard responses
+
+## Benefits
+
+- **No disruption** to your production OLTP database
+- **Fast queries** through pre-aggregated materialized views
+- **Real-time updates** as data changes in your source database
+- **Scalable** architecture that separates transactional and analytical workloads
+
+## Prerequisites
+
+Before starting, ensure you have:
+
+- Access to your existing OLTP database
+- Database connection credentials
+- A MooseStack project initialized
+
+## Implementation Steps
+
+Follow the steps below to implement performant dashboards from your existing OLTP database. Each step builds on the previous one, guiding you through the complete setup process.
+

apps/framework-docs-v2/content/guides/applications/performant-dashboards/existing-oltp-db/1-setup-connection.mdx

@@ -0,0 +1,80 @@
+---
+title: Setup Connection
+description: Configure connection to your existing OLTP database
+---
+
+import { LanguageTabs, LanguageTabContent } from "@/components/mdx";
+
+# Step 1: Setup Connection
+
+In this step, you'll configure MooseStack to connect to your existing OLTP database.
+
+## Overview
+
+MooseStack needs to connect to your existing database to read data and create materialized views. This connection is configured securely and doesn't require any changes to your production database.
+
+## Configuration
+
+<LanguageTabs items={["TypeScript", "Python"]}>
+  <LanguageTabContent value="typescript">
+```typescript filename="moose.config.ts"
+import { defineConfig } from "@514labs/moose-cli";
+
+export default defineConfig({
+  dataSources: {
+    postgres: {
+      type: "postgres",
+      host: process.env.DB_HOST || "localhost",
+      port: parseInt(process.env.DB_PORT || "5432"),
+      database: process.env.DB_NAME || "mydb",
+      user: process.env.DB_USER || "postgres",
+      password: process.env.DB_PASSWORD || "",
+    },
+  },
+});
+```
+  </LanguageTabContent>
+  <LanguageTabContent value="python">
+```python filename="moose.config.py"
+from moose_cli import define_config
+
+config = define_config(
+    data_sources={
+        "postgres": {
+            "type": "postgres",
+            "host": "localhost",
+            "port": 5432,
+            "database": "mydb",
+            "user": "postgres",
+            "password": "",
+        }
+    }
+)
+```
+  </LanguageTabContent>
+</LanguageTabs>
+
+## Environment Variables
+
+For security, store sensitive credentials in environment variables:
+
+```bash filename=".env"
+DB_HOST=your-db-host
+DB_PORT=5432
+DB_NAME=your-database
+DB_USER=your-username
+DB_PASSWORD=your-password
+```
+
+## Verify Connection
+
+After configuring the connection, verify it works:
+
+```bash
+moose db ping
+```
+
+## Next Steps
+
+Once your connection is configured, proceed to the next step to create materialized views.
+

apps/framework-docs-v2/content/guides/applications/performant-dashboards/existing-oltp-db/2-create-materialized-view[@scope=initiative].mdx

@@ -0,0 +1,108 @@
+---
+title: Create Materialized View (Initiative)
+description: Create optimized materialized views for initiative-level dashboard queries
+---
+
+import { LanguageTabs, LanguageTabContent } from "@/components/mdx";
+
+# Step 2: Create Materialized View (Initiative Scope)
+
+In this step, you'll create materialized views that pre-aggregate data from your OLTP database for fast dashboard queries, specifically tailored for initiative-level reporting.
+
+## Overview
+
+Materialized views store pre-computed query results, allowing dashboards to load instantly without querying your production OLTP database directly. This step shows you how to define and create these views.
+
+## Define Materialized View
+
+<LanguageTabs items={["TypeScript", "Python"]}>
+  <LanguageTabContent value="typescript">
+```typescript filename="dashboard-views.ts"
+import { OlapMaterializedView, OlapTable } from "@514labs/moose-lib";
+
+// Define the source table (from your OLTP DB)
+interface OrdersTable {
+  id: string;
+  customer_id: string;
+  amount: number;
+  created_at: Date;
+}
+
+// Define the materialized view
+interface InitiativeSalesView {
+  date: Date;
+  initiative_id: string;
+  total_sales: number;
+  order_count: number;
+}
+
+export const initiativeSalesView = new OlapMaterializedView<InitiativeSalesView>(
+  "initiative_sales",
+  {
+    source: "orders", // References your OLTP table
+    query: `
+      SELECT
+        toDate(created_at) as date,
+        initiative_id,
+        sum(amount) as total_sales,
+        count(*) as order_count
+      FROM orders
+      GROUP BY date, initiative_id
+    `,
+    refresh: "incremental", // Update as new data arrives
+  }
+);
+```
+  </LanguageTabContent>
+  <LanguageTabContent value="python">
+```python filename="dashboard_views.py"
+from moose_lib import OlapMaterializedView
+from pydantic import BaseModel
+from datetime import date
+
+# Define the materialized view
+class InitiativeSalesView(BaseModel):
+    date: date
+    initiative_id: str
+    total_sales: float
+    order_count: int
+
+initiative_sales_view = OlapMaterializedView[InitiativeSalesView](
+    "initiative_sales",
+    source="orders",
+    query="""
+        SELECT
+            toDate(created_at) as date,
+            initiative_id,
+            sum(amount) as total_sales,
+            count(*) as order_count
+        FROM orders
+        GROUP BY date, initiative_id
+    """,
+    refresh="incremental",
+)
+```
+  </LanguageTabContent>
+</LanguageTabs>
+
+## Apply the View
+
+Create the materialized view in your database:
+
+```bash
+moose db migrate
+```
+
+## Query the View
+
+Once created, you can query the materialized view directly:
+
+```typescript
+const results = await initiativeSalesView.select({
+  date: { $gte: new Date("2024-01-01") },
+});
+```
+
+## Next Steps
+
+Your materialized view is now ready! You can use it in your dashboard queries for fast, pre-aggregated data.