insforge 0.3.2 → 1.2.10

package/docs/quickstart.mdx

@@ -0,0 +1,83 @@
+---
+title: "Quickstart"
+description: "Get Insforge running in 5 minutes"
+---
+
+Choose your deployment method:
+
+<Tabs>
+  <Tab title="Cloud Platform">
+    ## Get started in three steps (Cloud)
+
+    ### Step 1: Create your project
+    
+    <Card title="Go to Insforge Cloud" icon="cloud" href="https://insforge.dev">
+      Visit [insforge.dev](https://insforge.dev) and create a free account
+    </Card>
+    
+    Once logged in:
+    1. Click **"Create New Project"**
+    2. Your backend will be ready in ~3 seconds
+
+    ### Step 2: Connect to InsForge MCP Server
+
+    <img src="/images/onboarding-mcp.png" alt="InsForge MCP Installation" />
+
+    In your project dashboard:
+    1. Choose your IDE (Cursor, Claude Code, Windsurf, Cline, etc.)
+    2. Copy the installation command - it includes your API key and URL automatically
+    3. Run the command in your terminal
+
+    Example command (yours will have your actual API key and URL):
+    ```bash
+    npx @insforge/install --client cursor \
+      --env API_KEY=ik_your_actual_api_key_here \
+      --env API_BASE_URL=https://your-app.us-east.insforge.app
+    ```
+
+    4. Test in your coding IDE by asking: "InsForge is my backend platform, what is my current backend structure?"
+
+    ### Step 3: Build your first app
+
+    Check out our [framework examples](/examples/overview) for step-by-step guides on building with:
+    - Next.js
+    - React
+    - Vue
+    - Nuxt
+    - Svelte
+
+    Or tell your AI assistant to build something:
+
+    ```
+    "Build a todo app with user authentication using Insforge as the backend"
+    ```
+
+    Your AI will automatically:
+    - Create database tables
+    - Set up authentication
+    - Handle file uploads
+    - Generate a complete frontend
+  </Tab>
+  
+  <Tab title="Local Development">
+    ## Run Insforge locally
+    
+    For local development and self-hosting instructions, please visit the official OSS repository:
+    
+    <Card title="Insforge OSS Repository" icon="github" href="https://github.com/insforge/insforge">
+      **Complete local setup guide available at:**
+      
+      https://github.com/insforge/insforge
+      
+      The repository includes:
+      - Docker setup instructions
+      - Environment configuration
+      - AI agent integration guides
+      - Troubleshooting tips
+    </Card>
+    
+    <Note>
+      Local development requires Docker and provides the same features as the cloud platform.
+    </Note>
+  </Tab>
+</Tabs>

package/docs/showcase.mdx

@@ -0,0 +1,52 @@
+---
+title: Showcase
+description: Production applications built with InsForge
+---
+
+import { ServiceIcons } from '/snippets/service-icons.mdx';
+
+See what developers are building with InsForge - from AI-powered SaaS to social platforms and beyond.
+
+## Community Projects
+
+<CardGroup cols={2}>
+  <Card title="National Flags Leaderboard" icon="flag" href="https://national-flags-phi.vercel.app/">
+    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
+      <img src="/showcase/national-flags.png" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="National Flags Leaderboard showcase" />
+    </div>
+
+    Learn national flags through an interactive database and take on challenges with real-time leaderboard rankings.
+
+    <ServiceIcons services={['database', 'auth', 'storage', 'ai', 'functions']} />
+  </Card>
+
+  <Card title="Pokemon Vibe" icon="wand-magic-sparkles" href="https://pokemon-vibe.vercel.app/">
+    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
+      <img src="/showcase/pokemon-vibe.png" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="Pokemon Vibe showcase" />
+    </div>
+
+    Form your own Pokemon teams and compete against others. AI-powered battles let two teams fight on top of AI-generated drawings.
+
+    <ServiceIcons services={['database', 'auth', 'storage', 'ai', 'functions']} />
+  </Card>
+
+  <Card title="2048 Arena" icon="gamepad" href="https://insforge-2048-arena.netlify.app/">
+    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
+      <img src="/showcase/2048-arena.png" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="2048 Arena showcase" />
+    </div>
+
+    Classic 2048 puzzle game with multiplayer arena and competitive leaderboards.
+
+    <ServiceIcons services={['database', 'auth']} />
+  </Card>
+
+  <Card title="Line Connect Race" icon="route" href="https://line-connect-race.vercel.app/">
+    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
+      <img src="/showcase/line-connect-race.png" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="Line Connect Race showcase" />
+    </div>
+
+    Interactive line-drawing racing game with real-time multiplayer and competitive gameplay.
+
+    <ServiceIcons services={['database', 'auth', 'functions']} />
+  </Card>
+</CardGroup>

package/docs/snippets/sdk-installation.mdx

@@ -0,0 +1,22 @@
+<CodeGroup>
+```bash npm
+npm install @insforge/sdk@latest
+```
+
+```bash yarn
+yarn add @insforge/sdk@latest
+```
+
+```bash pnpm
+pnpm add @insforge/sdk@latest
+```
+</CodeGroup>
+
+```javascript
+import { createClient } from '@insforge/sdk';
+
+const insforge = createClient({
+  baseUrl: 'https://your-app.us-east.insforge.app',
+  anonKey: 'your-anon-key'  // Optional: for public/unauthenticated requests
+});
+```

package/docs/snippets/service-icons.mdx

@@ -0,0 +1,27 @@
+export const ServiceIcons = ({ services }) => {
+  const iconMap = {
+    database: { src: '/images/icons/database.svg', title: 'Database' },
+    auth: { src: '/images/icons/auth.svg', title: 'Authentication' },
+    storage: { src: '/images/icons/storage.svg', title: 'Storage' },
+    ai: { src: '/images/icons/ai.svg', title: 'AI Services' },
+    functions: { src: '/images/icons/function.svg', title: 'Edge Functions' }
+  };
+
+  return (
+    <div className="flex gap-2 mt-3" style={{pointerEvents: 'none'}}>
+      {services.map((service) => {
+        const icon = iconMap[service.toLowerCase()];
+        return icon ? (
+          <img
+            key={service}
+            src={icon.src}
+            alt={icon.title}
+            title={icon.title}
+            className="w-5 h-5 opacity-70"
+            style={{pointerEvents: 'none'}}
+          />
+        ) : null;
+      })}
+    </div>
+  );
+};

package/eslint.config.js

@@ -17,13 +17,20 @@ export default defineConfig(
   prettierConfig,
   // Frontend configuration
   {
-    files: ['frontend/**/*.ts', 'frontend/**/*.tsx'],
-    ignores: ['frontend/tests/**/*', 'frontend/**/*.test.*', 'frontend/**/*.spec.*'],
+    files: ['frontend/**/*.ts', 'frontend/**/*.tsx', 'auth/**/*.ts', 'auth/**/*.tsx'],
+    ignores: [
+      'frontend/tests/**/*',
+      'frontend/**/*.test.*',
+      'frontend/**/*.spec.*',
+      'auth/tests/**/*',
+      'auth/**/*.test.*',
+      'auth/**/*.spec.*',
+    ],
     languageOptions: {
       ecmaVersion: 'latest',
       sourceType: 'module',
       parserOptions: {
-        project: './frontend/tsconfig.json',
+        project: ['./frontend/tsconfig.json', './auth/tsconfig.json'],
         tsconfigRootDir: __dirname,
         ecmaFeatures: {
           jsx: true,

package/frontend/package.json

@@ -14,7 +14,10 @@
     "test:watch": "vitest --watch"
   },
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-sql": "^6.10.0",
     "@hookform/resolvers": "^5.1.1",
+    "@insforge/react": "^0.6.8",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.14",
@@ -31,14 +34,17 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tanstack/react-query": "^5.83.0",
     "@types/uuid": "^10.0.0",
+    "@uiw/codemirror-theme-vscode": "^4.25.2",
+    "@uiw/react-codemirror": "^4.25.2",
     "@xyflow/react": "^12.8.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.536.0",
-    "react": "19.1.1",
+    "posthog-js": "^1.302.2",
+    "react": "^19.2.0",
     "react-data-grid": "7.0.0-beta.47",
-    "react-dom": "19.1.1",
+    "react-dom": "^19.2.0",
     "react-hook-form": "^7.61.1",
     "react-router-dom": "^7.7.0",
     "socket.io-client": "^4.8.1",
@@ -50,8 +56,8 @@
     "@tailwindcss/vite": "^4.1.11",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react": "^4.7.0",
     "@vitest/ui": "^3.2.4",
     "jsdom": "^26.1.0",

package/frontend/src/App.tsx

@@ -1,26 +1,10 @@
-import { Routes, Route, Navigate } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AuthProvider } from '@/lib/contexts/AuthContext';
-import { AuthErrorBoundary } from '@/features/login/components/AuthErrorBoundary';
-import { PrivateRoute } from '@/features/login/components/PrivateRoute';
+import { AppRoutes } from '@/lib/routing/AppRoutes';
 import { ToastProvider } from '@/lib/hooks/useToast';
 import { SocketProvider } from '@/lib/contexts/SocketContext';
-import LoginPage from './features/login/page/LoginPage';
-import DashboardPage from './features/dashboard/page/DashboardPage';
-import DatabasePage from './features/database/page/DatabasePage';
-import AuthenticationPage from './features/auth/page/AuthenticationPage';
-import AuditsPage from './features/logs/page/AuditsPage';
-import AnalyticsLogsPage from './features/logs/page/AnalyticsLogsPage';
-import StoragePage from './features/storage/page/StoragePage';
-import MetadataPage from './features/metadata/page/MetadataPage';
-import OnBoardPage from './features/onboard/page/OnBoardPage';
-import VisualizerPage from './features/visualizer/page/VisualizerPage';
-import FunctionsPage from './features/functions/page/FunctionsPage';
-import Layout from './components/layout/Layout';
-import { OnboardStepProvider } from './lib/contexts/OnboardStepContext';
-import CloudLayout from './components/layout/CloudLayout';
-import CloudLoginPage from './features/login/page/CloudLoginPage';
-import AiPage from './features/ai/page/AIPage';
+import { PostHogAnalyticsProvider } from './lib/analytics/posthog';
+import { SQLEditorProvider } from '@/features/database/contexts/SQLEditorContext';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -35,72 +19,19 @@ const queryClient = new QueryClient({
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <AuthErrorBoundary>
-        <AuthProvider>
-          <SocketProvider>
-            <ToastProvider>
-              <OnboardStepProvider>
+      <AuthProvider>
+        <SocketProvider>
+          <ToastProvider>
+            <PostHogAnalyticsProvider>
+              <SQLEditorProvider>
                 <AppRoutes />
-              </OnboardStepProvider>
-            </ToastProvider>
-          </SocketProvider>
-        </AuthProvider>
-      </AuthErrorBoundary>
+              </SQLEditorProvider>
+            </PostHogAnalyticsProvider>
+          </ToastProvider>
+        </SocketProvider>
+      </AuthProvider>
     </QueryClientProvider>
   );
 }
 
-function AppRoutes() {
-  return (
-    <Routes>
-      <Route path="/dashboard/login" element={<LoginPage />} />
-      <Route path="/cloud/login" element={<CloudLoginPage />} />
-      <Route
-        path="/cloud/*"
-        element={
-          <PrivateRoute classname="bg-neutral-800">
-            <CloudLayout>
-              <Routes>
-                <Route path="/" element={<Navigate to="/cloud/dashboard" replace />} />
-                <Route path="/visualizer" element={<VisualizerPage />} />
-                <Route path="/dashboard" element={<DashboardPage />} />
-                <Route path="/authentication" element={<AuthenticationPage />} />
-                <Route path="/database" element={<DatabasePage />} />
-                <Route path="/storage" element={<StoragePage />} />
-                <Route path="/analytics" element={<AnalyticsLogsPage />} />
-                <Route path="/functions" element={<FunctionsPage />} />
-                <Route path="/ai" element={<AiPage />} />
-                <Route path="*" element={<Navigate to="/cloud/dashboard" replace />} />
-              </Routes>
-            </CloudLayout>
-          </PrivateRoute>
-        }
-      />
-      <Route
-        path="/*"
-        element={
-          <PrivateRoute classname="bg-bg-gray">
-            <Layout>
-              <Routes>
-                <Route path="/" element={<Navigate to="/dashboard" replace />} />
-                <Route path="/dashboard" element={<DashboardPage />} />
-                <Route path="/dashboard/authentication" element={<AuthenticationPage />} />
-                <Route path="/dashboard/database" element={<DatabasePage />} />
-                <Route path="/dashboard/storage" element={<StoragePage />} />
-                <Route path="/dashboard/audits" element={<AuditsPage />} />
-                <Route path="/dashboard/analytics" element={<AnalyticsLogsPage />} />
-                <Route path="/dashboard/functions" element={<FunctionsPage />} />
-                <Route path="/dashboard/metadata" element={<MetadataPage />} />
-                <Route path="/dashboard/onboard" element={<OnBoardPage />} />
-                <Route path="/dashboard/ai" element={<AiPage />} />
-                <Route path="*" element={<Navigate to="/dashboard" replace />} />
-              </Routes>
-            </Layout>
-          </PrivateRoute>
-        }
-      />
-    </Routes>
-  );
-}
-
 export default App;

package/frontend/src/assets/icons/connected.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4265 6.66591V8.33164H10.2843C9.31948 8.34964 8.51161 8.67459 7.86072 9.30848C7.20883 9.94238 6.87388 10.7283 6.85588 11.6651V14.9976C6.87388 15.9354 7.20883 16.7203 7.86072 17.3542C8.51161 17.9871 9.32048 18.313 10.2843 18.33H18.8539C19.8178 18.313 20.6256 17.9871 21.2775 17.3542C21.9294 16.7203 22.2644 15.9344 22.2824 14.9976V11.6651C22.2824 11.0572 22.1304 10.5013 21.8264 9.99837C21.5178 9.48996 21.0846 9.06874 20.5677 8.77457V6.95187C21.5855 7.31681 22.4074 7.91571 23.0323 8.74858C23.6571 9.58144 23.9781 10.5543 23.9961 11.6651V14.9976C23.9601 16.4213 23.4602 17.6011 22.4963 18.539C21.5325 19.4758 20.3177 19.9618 18.8539 19.9967H10.2843C8.81956 19.9618 7.60576 19.4768 6.64192 18.539C5.67808 17.6011 5.17816 16.4213 5.14216 14.9976V11.6651C5.17816 10.2413 5.67808 9.06152 6.64192 8.12368C7.60576 7.18583 8.81956 6.69991 10.2843 6.66591H15.4265ZM8.5686 13.3308V11.6651H13.7108C14.6756 11.6471 15.4835 11.3222 16.1344 10.6883C16.7863 10.0544 17.1212 9.26849 17.1392 8.33164V4.99919C17.1212 4.06134 16.7863 3.27647 16.1344 2.64257C15.4835 2.00967 14.6746 1.68373 13.7108 1.66673H5.14216C4.17832 1.68373 3.37045 2.00967 2.71856 2.64257C2.06666 3.27647 1.73172 4.06234 1.71372 4.99919V8.33164C1.71372 8.93954 1.8657 9.49545 2.16965 9.99837C2.4726 10.5013 2.89253 10.9092 3.42844 11.2222V13.0449C2.39261 12.6799 1.56674 12.073 0.950845 11.2222C0.338537 10.3826 0.0058831 9.37173 0 8.33264L0 4.99919C0.0359941 3.57542 0.535913 2.39561 1.49976 1.45776C2.4636 0.520915 3.6784 0.0349943 5.14216 0H13.7118C15.1765 0.0349943 16.3903 0.519915 17.3542 1.45776C18.318 2.39561 18.8179 3.57542 18.8539 4.99919V8.33164C18.8179 9.75541 18.318 10.9352 17.3542 11.8731C16.3903 12.8109 15.1765 13.2968 13.7118 13.3308H8.5696H8.5686Z" fill="currentColor"/>
+</svg>

package/frontend/src/assets/icons/loader.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 11.0001C21.5523 11.0001 22 11.4488 22 12.001C21.9998 14.1126 21.331 16.1697 20.0898 17.878C18.8485 19.5864 17.0983 20.8583 15.0898 21.5108C13.0814 22.1633 10.9176 22.1634 8.90918 21.5108C6.90105 20.8582 5.15132 19.5862 3.91016 17.878C2.66893 16.1695 2 14.1118 2 12.0001C2.00002 9.8883 2.66889 7.83059 3.91016 6.12213C5.15141 4.41379 6.90184 3.14188 8.91016 2.48932C10.9184 1.83689 13.0816 1.83689 15.0898 2.48932C15.6149 2.65993 15.9027 3.22397 15.7324 3.74909C15.5618 4.27434 14.9969 4.56232 14.4717 4.39167C12.865 3.86972 11.134 3.86962 9.52734 4.39167C7.92085 4.91376 6.52124 5.93134 5.52832 7.29792C4.53531 8.66468 4.00001 10.3107 4 12.0001C4 13.6894 4.53447 15.3355 5.52734 16.7022C6.52027 18.0689 7.92076 19.0863 9.52734 19.6085C11.134 20.1305 12.865 20.1304 14.4717 19.6085C16.0784 19.0865 17.4786 18.0689 18.4717 16.7022C19.4647 15.3355 19.9999 13.6894 20 12.0001C20.0002 11.448 20.4479 11.0001 21 11.0001Z" fill="url(#paint0_linear_2076_6939)"/>
+<defs>
+<linearGradient id="paint0_linear_2076_6939" x1="9" y1="1" x2="22" y2="12" gradientUnits="userSpaceOnUse">
+<stop stop-color="currentColor"/>
+<stop offset="1" stop-color="currentColor" stop-opacity="0.39"/>
+</linearGradient>
+</defs>
+</svg>

package/frontend/src/assets/logos/apple.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 17 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z"/>
+</svg>

package/frontend/src/assets/logos/discord.svg

@@ -2,7 +2,7 @@
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
     <g>
-        <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#ffffff" fill-rule="nonzero">
+        <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero">
 
 </path>
     </g>

package/frontend/src/assets/logos/facebook.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#1877F2">
+  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+</svg>

package/frontend/src/assets/logos/instagram.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 2500 2500" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="0" cx="332.14" cy="2511.81" r="3263.54" gradientUnits="userSpaceOnUse"><stop offset=".09" stop-color="#fa8f21"/><stop offset=".78" stop-color="#d82d7e"/></radialGradient><radialGradient id="1" cx="1516.14" cy="2623.81" r="2572.12" gradientUnits="userSpaceOnUse"><stop offset=".64" stop-color="#8c3aaa" stop-opacity="0"/><stop offset="1" stop-color="#8c3aaa"/></radialGradient></defs><path d="M833.4,1250c0-230.11,186.49-416.7,416.6-416.7s416.7,186.59,416.7,416.7-186.59,416.7-416.7,416.7S833.4,1480.11,833.4,1250m-225.26,0c0,354.5,287.36,641.86,641.86,641.86S1891.86,1604.5,1891.86,1250,1604.5,608.14,1250,608.14,608.14,895.5,608.14,1250M1767.27,582.69a150,150,0,1,0,150.06-149.94h-0.06a150.07,150.07,0,0,0-150,149.94M745,2267.47c-121.87-5.55-188.11-25.85-232.13-43-58.36-22.72-100-49.78-143.78-93.5s-70.88-85.32-93.5-143.68c-17.16-44-37.46-110.26-43-232.13-6.06-131.76-7.27-171.34-7.27-505.15s1.31-373.28,7.27-505.15c5.55-121.87,26-188,43-232.13,22.72-58.36,49.78-100,93.5-143.78s85.32-70.88,143.78-93.5c44-17.16,110.26-37.46,232.13-43,131.76-6.06,171.34-7.27,505-7.27s373.28,1.31,505.15,7.27c121.87,5.55,188,26,232.13,43,58.36,22.62,100,49.78,143.78,93.5s70.78,85.42,93.5,143.78c17.16,44,37.46,110.26,43,232.13,6.06,131.87,7.27,171.34,7.27,505.15s-1.21,373.28-7.27,505.15c-5.55,121.87-25.95,188.11-43,232.13-22.72,58.36-49.78,100-93.5,143.68s-85.42,70.78-143.78,93.5c-44,17.16-110.26,37.46-232.13,43-131.76,6.06-171.34,7.27-505.15,7.27s-373.28-1.21-505-7.27M734.65,7.57c-133.07,6.06-224,27.16-303.41,58.06C349,97.54,279.38,140.35,209.81,209.81S97.54,349,65.63,431.24c-30.9,79.46-52,170.34-58.06,303.41C1.41,867.93,0,910.54,0,1250s1.41,382.07,7.57,515.35c6.06,133.08,27.16,223.95,58.06,303.41,31.91,82.19,74.62,152,144.18,221.43S349,2402.37,431.24,2434.37c79.56,30.9,170.34,52,303.41,58.06C868,2498.49,910.54,2500,1250,2500s382.07-1.41,515.35-7.57c133.08-6.06,223.95-27.16,303.41-58.06,82.19-32,151.86-74.72,221.43-144.18s112.18-139.24,144.18-221.43c30.9-79.46,52.1-170.34,58.06-303.41,6.06-133.38,7.47-175.89,7.47-515.35s-1.41-382.07-7.47-515.35c-6.06-133.08-27.16-224-58.06-303.41-32-82.19-74.72-151.86-144.18-221.43S2150.95,97.54,2068.86,65.63c-79.56-30.9-170.44-52.1-303.41-58.06C1632.17,1.51,1589.56,0,1250.1,0S868,1.41,734.65,7.57" fill="url(#0)"/><path d="M833.4,1250c0-230.11,186.49-416.7,416.6-416.7s416.7,186.59,416.7,416.7-186.59,416.7-416.7,416.7S833.4,1480.11,833.4,1250m-225.26,0c0,354.5,287.36,641.86,641.86,641.86S1891.86,1604.5,1891.86,1250,1604.5,608.14,1250,608.14,608.14,895.5,608.14,1250M1767.27,582.69a150,150,0,1,0,150.06-149.94h-0.06a150.07,150.07,0,0,0-150,149.94M745,2267.47c-121.87-5.55-188.11-25.85-232.13-43-58.36-22.72-100-49.78-143.78-93.5s-70.88-85.32-93.5-143.68c-17.16-44-37.46-110.26-43-232.13-6.06-131.76-7.27-171.34-7.27-505.15s1.31-373.28,7.27-505.15c5.55-121.87,26-188,43-232.13,22.72-58.36,49.78-100,93.5-143.78s85.32-70.88,143.78-93.5c44-17.16,110.26-37.46,232.13-43,131.76-6.06,171.34-7.27,505-7.27s373.28,1.31,505.15,7.27c121.87,5.55,188,26,232.13,43,58.36,22.62,100,49.78,143.78,93.5s70.78,85.42,93.5,143.78c17.16,44,37.46,110.26,43,232.13,6.06,131.87,7.27,171.34,7.27,505.15s-1.21,373.28-7.27,505.15c-5.55,121.87-25.95,188.11-43,232.13-22.72,58.36-49.78,100-93.5,143.68s-85.42,70.78-143.78,93.5c-44,17.16-110.26,37.46-232.13,43-131.76,6.06-171.34,7.27-505.15,7.27s-373.28-1.21-505-7.27M734.65,7.57c-133.07,6.06-224,27.16-303.41,58.06C349,97.54,279.38,140.35,209.81,209.81S97.54,349,65.63,431.24c-30.9,79.46-52,170.34-58.06,303.41C1.41,867.93,0,910.54,0,1250s1.41,382.07,7.57,515.35c6.06,133.08,27.16,223.95,58.06,303.41,31.91,82.19,74.62,152,144.18,221.43S349,2402.37,431.24,2434.37c79.56,30.9,170.34,52,303.41,58.06C868,2498.49,910.54,2500,1250,2500s382.07-1.41,515.35-7.57c133.08-6.06,223.95-27.16,303.41-58.06,82.19-32,151.86-74.72,221.43-144.18s112.18-139.24,144.18-221.43c30.9-79.46,52.1-170.34,58.06-303.41,6.06-133.38,7.47-175.89,7.47-515.35s-1.41-382.07-7.47-515.35c-6.06-133.08-27.16-224-58.06-303.41-32-82.19-74.72-151.86-144.18-221.43S2150.95,97.54,2068.86,65.63c-79.56-30.9-170.44-52.1-303.41-58.06C1632.17,1.51,1589.56,0,1250.1,0S868,1.41,734.65,7.57" fill="url(#1)"/></svg>

package/frontend/src/assets/logos/linkedin.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#0A66C2">
+  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+</svg>

package/frontend/src/assets/logos/microsoft.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path fill="#f3f3f3" d="M0 0h23v23H0z"/><path fill="#f35325" d="M1 1h10v10H1z"/><path fill="#81bc06" d="M12 1h10v10H12z"/><path fill="#05a6f0" d="M1 12h10v10H1z"/><path fill="#ffba08" d="M12 12h10v10H12z"/></svg>

package/frontend/src/assets/logos/spotify.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>Spotify-color</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Color-" transform="translate(-200.000000, -460.000000)" fill="#00DA5A">
+            <path d="M238.16,481.36 C230.48,476.8 217.64,476.32 210.32,478.6 C209.12,478.96 207.92,478.24 207.56,477.16 C207.2,475.96 207.92,474.76 209,474.4 C217.52,471.88 231.56,472.36 240.44,477.64 C241.52,478.24 241.88,479.68 241.28,480.76 C240.68,481.6 239.24,481.96 238.16,481.36 M237.92,488.08 C237.32,488.92 236.24,489.28 235.4,488.68 C228.92,484.72 219.08,483.52 211.52,485.92 C210.56,486.16 209.48,485.68 209.24,484.72 C209,483.76 209.48,482.68 210.44,482.44 C219.2,479.8 230,481.12 237.44,485.68 C238.16,486.04 238.52,487.24 237.92,488.08 M235.04,494.68 C234.56,495.4 233.72,495.64 233,495.16 C227.36,491.68 220.28,490.96 211.88,492.88 C211.04,493.12 210.32,492.52 210.08,491.8 C209.84,490.96 210.44,490.24 211.16,490 C220.28,487.96 228.2,488.8 234.44,492.64 C235.28,493 235.4,493.96 235.04,494.68 M224,460 C210.8,460 200,470.8 200,484 C200,497.2 210.8,508 224,508 C237.2,508 248,497.2 248,484 C248,470.8 237.32,460 224,460" id="Spotify">
+
+</path>
+        </g>
+    </g>
+</svg>

package/frontend/src/assets/logos/tiktok.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<title>tiktok</title>
+<path d="M16.656 1.029c1.637-0.025 3.262-0.012 4.886-0.025 0.054 2.031 0.878 3.859 2.189 5.213l-0.002-0.002c1.411 1.271 3.247 2.095 5.271 2.235l0.028 0.002v5.036c-1.912-0.048-3.71-0.489-5.331-1.247l0.082 0.034c-0.784-0.377-1.447-0.764-2.077-1.196l0.052 0.034c-0.012 3.649 0.012 7.298-0.025 10.934-0.103 1.853-0.719 3.543-1.707 4.954l0.020-0.031c-1.652 2.366-4.328 3.919-7.371 4.011l-0.014 0c-0.123 0.006-0.268 0.009-0.414 0.009-1.73 0-3.347-0.482-4.725-1.319l0.040 0.023c-2.508-1.509-4.238-4.091-4.558-7.094l-0.004-0.041c-0.025-0.625-0.037-1.25-0.012-1.862 0.49-4.779 4.494-8.476 9.361-8.476 0.547 0 1.083 0.047 1.604 0.136l-0.056-0.008c0.025 1.849-0.050 3.699-0.050 5.548-0.423-0.153-0.911-0.242-1.42-0.242-1.868 0-3.457 1.194-4.045 2.861l-0.009 0.030c-0.133 0.427-0.21 0.918-0.21 1.426 0 0.206 0.013 0.41 0.037 0.61l-0.002-0.024c0.332 2.046 2.086 3.59 4.201 3.59 0.061 0 0.121-0.001 0.181-0.004l-0.009 0c1.463-0.044 2.733-0.831 3.451-1.994l0.010-0.018c0.267-0.372 0.45-0.822 0.511-1.311l0.001-0.014c0.125-2.237 0.075-4.461 0.087-6.698 0.012-5.036-0.012-10.060 0.025-15.083z"></path>
+</svg>

package/frontend/src/assets/logos/x.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(2.22, 2) scale(0.0163)" d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="currentColor"/>
+</svg>

package/frontend/src/components/Checkbox.tsx

@@ -25,37 +25,35 @@ export function Checkbox({
   const showIcon = checked || indeterminate;
 
   return (
-    <div className="w-full h-full flex items-center justify-center">
-      <div className="relative grid place-items-center">
-        {/* Native checkbox (visually hidden but accessible) */}
-        <input
-          type="checkbox"
+    <div className="relative grid place-items-center">
+      {/* Native checkbox (visually hidden but accessible) */}
+      <input
+        type="checkbox"
+        className={cn(
+          'w-4 h-4 bg-white dark:bg-neutral-700 rounded appearance-none border border-zinc-200 dark:border-neutral-600 shadow-[0px_2px_1px_0px_rgba(0,0,0,0.1)] cursor-pointer row-start-1 col-start-1 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        checked={indeterminate ? false : checked}
+        onChange={(e) => onChange(e.target.checked)}
+        tabIndex={tabIndex}
+        disabled={disabled}
+      />
+
+      {/* Overlay icon with dynamic background and text color */}
+      {showIcon && (
+        <div
           className={cn(
-            'w-4 h-4 bg-white dark:bg-neutral-700 rounded appearance-none border border-zinc-200 dark:border-neutral-600 shadow-[0px_2px_1px_0px_rgba(0,0,0,0.1)] cursor-pointer row-start-1 col-start-1 disabled:cursor-not-allowed disabled:opacity-50',
-            className
+            'mx-auto w-4 h-4 rounded row-start-1 col-start-1 pointer-events-none',
+            resolvedTheme === 'light' ? 'bg-black text-white' : 'bg-emerald-300 text-black'
           )}
-          checked={indeterminate ? false : checked}
-          onChange={(e) => onChange(e.target.checked)}
-          tabIndex={tabIndex}
-          disabled={disabled}
-        />
-
-        {/* Overlay icon with dynamic background and text color */}
-        {showIcon && (
-          <div
-            className={cn(
-              'mx-auto w-4 h-4 rounded row-start-1 col-start-1 pointer-events-none',
-              resolvedTheme === 'light' ? 'bg-black text-white' : 'bg-white text-black'
-            )}
-          >
-            {indeterminate ? (
-              <CheckboxUndeterminedIcon className="w-full h-full" />
-            ) : (
-              <CheckboxCheckedIcon className="w-full h-full" />
-            )}
-          </div>
-        )}
-      </div>
+        >
+          {indeterminate ? (
+            <CheckboxUndeterminedIcon className="w-full h-full" />
+          ) : (
+            <CheckboxCheckedIcon className="w-full h-full" />
+          )}
+        </div>
+      )}
     </div>
   );
 }

package/frontend/src/components/CodeBlock.tsx

@@ -7,6 +7,10 @@ interface CodeBlockProps {
   showCopy?: boolean;
   onCopy?: (code: string) => void;
   buttonClassName?: string;
+  /** Optional label displayed in header - enables compact variant */
+  label?: string;
+  /** Variant style: 'default' for inline code, 'compact' for labeled blocks */
+  variant?: 'default' | 'compact';
 }
 
 export function CodeBlock({
@@ -15,18 +19,67 @@ export function CodeBlock({
   showCopy = true,
   onCopy,
   buttonClassName,
+  label,
+  variant = 'default',
 }: CodeBlockProps) {
+  // Use compact variant when label is provided
+  const isCompact = variant === 'compact' || !!label;
+
+  if (isCompact) {
+    return (
+      <div
+        className={cn(
+          'bg-gray-100 dark:bg-neutral-900 rounded p-3 w-full overflow-hidden',
+          className
+        )}
+      >
+        {/* Header row with label and copy button */}
+        <div className="flex items-center justify-between mb-2">
+          {label && (
+            <div className="bg-white dark:bg-neutral-700 rounded px-2 shrink-0">
+              <span className="text-gray-900 dark:text-neutral-50 text-xs">{label}</span>
+            </div>
+          )}
+          {showCopy && (
+            <CopyButton
+              text={code}
+              onCopy={onCopy}
+              showText={false}
+              className={cn(
+                'h-6 w-6 p-1 bg-white dark:bg-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 border-none rounded-md shadow-sm min-w-0 shrink-0 text-black dark:text-white',
+                !label && 'ml-auto',
+                buttonClassName
+              )}
+            />
+          )}
+        </div>
+        {/* Code text */}
+        <p className="text-gray-900 dark:text-neutral-300 text-sm leading-6 break-all whitespace-pre-wrap">
+          {code}
+        </p>
+      </div>
+    );
+  }
+
+  // Default inline variant
   return (
     <div
       className={cn(
-        'bg-slate-50 dark:bg-neutral-800 py-4 px-6 flex items-center justify-between text-zinc-950 dark:text-neutral-300 font-mono text-sm break-all font-semibold',
+        'relative h-16 bg-slate-50 dark:bg-neutral-800 py-4 px-6 rounded-md flex items-center justify-between text-zinc-950 dark:text-neutral-300 font-mono text-sm break-all font-semibold',
         className
       )}
     >
       <div className="flex-1 max-w-4/5">
         <code>{code}</code>
       </div>
-      {showCopy && <CopyButton text={code} onCopy={onCopy} className={buttonClassName} />}
+      {showCopy && (
+        <CopyButton
+          variant="primary"
+          text={code}
+          onCopy={onCopy}
+          className={cn('absolute right-3.5 top-3.5 h-9 pl-2', buttonClassName)}
+        />
+      )}
     </div>
   );
 }