@theproductguy/create-mission-control 1.0.0

package/src/template/index.css

@@ -0,0 +1,102 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --radius: 0.5rem;
+        --background: 0.985 0.001 106.424;
+        /* oklch components if using tailwind 4, but for T3 we use values */
+        /* Reverting to hex/standard values or using the T3 CSS var format */
+        /* Actually, copying the Oklch values is fine if we use postcss-preset-env or if browser supports it. 
+       Tailwind 3 doesn't automatically parse "0.985 0.001 106.424" without "oklch(...)".
+       The previous CSS file used `oklch(...)`. I should use that.
+    */
+        --background: oklch(0.985 0.001 106.424);
+        --foreground: oklch(0.216 0.006 56.043);
+        --card: oklch(1 0 0);
+        --card-foreground: oklch(0.216 0.006 56.043);
+        --popover: oklch(1 0 0);
+        --popover-foreground: oklch(0.216 0.006 56.043);
+        --primary: oklch(0.216 0.006 56.043);
+        --primary-foreground: oklch(0.985 0.001 106.424);
+        --secondary: oklch(0.970 0.001 106.424);
+        --secondary-foreground: oklch(0.216 0.006 56.043);
+        --muted: oklch(0.970 0.001 106.424);
+        --muted-foreground: oklch(0.370 0.010 67.558);
+        --accent: oklch(0.970 0.001 106.424);
+        --accent-foreground: oklch(0.216 0.006 56.043);
+        --destructive: oklch(0.586 0.253 17.585);
+        --destructive-foreground: oklch(0.985 0.001 106.424);
+        /* Added missing dest-bg */
+        --border: oklch(0.923 0.003 48.717);
+        --input: oklch(0.923 0.003 48.717);
+        --ring: oklch(0.553 0.013 58.071);
+
+        --chart-1: oklch(0.532 0.157 131.589);
+        --chart-2: oklch(0.6 0.118 184.704);
+        --chart-3: oklch(0.398 0.07 227.392);
+        --chart-4: oklch(0.828 0.189 84.429);
+        --chart-5: oklch(0.769 0.188 70.08);
+
+        --sidebar: oklch(0.985 0.001 106.424);
+        --sidebar-foreground: oklch(0.216 0.006 56.043);
+        --sidebar-primary: oklch(0.216 0.006 56.043);
+        --sidebar-primary-foreground: oklch(0.985 0.001 106.424);
+        --sidebar-accent: oklch(0.970 0.001 106.424);
+        --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+        --sidebar-border: oklch(0.923 0.003 48.717);
+        --sidebar-ring: oklch(0.553 0.013 58.071);
+
+        --font-display: "DM Sans", system-ui, sans-serif;
+        --font-sans: "DM Sans", system-ui, sans-serif;
+        --font-mono: "IBM Plex Mono", ui-monospace, monospace;
+    }
+
+    .dark {
+        --background: oklch(0.216 0.006 56.043);
+        --foreground: oklch(0.985 0.001 106.424);
+        --card: oklch(0.268 0.007 34.298);
+        --card-foreground: oklch(0.985 0.001 106.424);
+        --popover: oklch(0.268 0.007 34.298);
+        --popover-foreground: oklch(0.985 0.001 106.424);
+        --primary: oklch(0.923 0.003 48.717);
+        --primary-foreground: oklch(0.216 0.006 56.043);
+        --secondary: oklch(0.318 0.008 43.185);
+        --secondary-foreground: oklch(0.985 0.001 106.424);
+        --muted: oklch(0.318 0.008 43.185);
+        --muted-foreground: oklch(0.709 0.01 56.259);
+        --accent: oklch(0.318 0.008 43.185);
+        --accent-foreground: oklch(0.985 0.001 106.424);
+        --destructive: oklch(0.712 0.194 13.428);
+        --destructive-foreground: oklch(0.985 0.001 106.424);
+        --border: oklch(0.370 0.010 67.558);
+        --input: oklch(0.370 0.010 67.558);
+        --ring: oklch(0.553 0.013 58.071);
+
+        --chart-1: oklch(0.648 0.2 131.684);
+        --chart-2: oklch(0.696 0.17 162.48);
+        --chart-3: oklch(0.769 0.188 70.08);
+        --chart-4: oklch(0.627 0.265 303.9);
+        --chart-5: oklch(0.645 0.246 16.439);
+
+        --sidebar: oklch(0.268 0.007 34.298);
+        --sidebar-foreground: oklch(0.985 0.001 106.424);
+        --sidebar-primary: oklch(0.648 0.2 131.684);
+        --sidebar-primary-foreground: oklch(0.216 0.006 56.043);
+        --sidebar-accent: oklch(0.318 0.008 43.185);
+        --sidebar-accent-foreground: oklch(0.985 0.001 106.424);
+        --sidebar-border: oklch(0.370 0.010 67.558);
+        --sidebar-ring: oklch(0.553 0.013 58.071);
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground font-sans;
+    }
+}

package/src/template/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "agent-os-app",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "workspaces": [
+        "app",
+        "control-center/frontend",
+        "control-center/backend",
+        "design-system",
+        "agent-os-ui"
+    ],
+    "scripts": {
+        "dev": "npm run build:ui && npm run start:all",
+        "build:ui": "cd agent-os-ui && npm run build",
+        "start:all": "concurrently \"npm run start:api\" \"npm run start:design\" \"npm run start:control\" \"npm run start:app\"",
+        "start:api": "cd control-center/backend && PORT=5403 npm start",
+        "start:design": "cd design-system && npm run dev -- --port 5400",
+        "start:control": "cd control-center/frontend && npm run dev -- --port 5401",
+        "start:app": "cd app && npm run dev -- --port 5402",
+        "build": "npm run build --workspaces",
+        "test": "npm run test --workspaces"
+    },
+    "devDependencies": {
+        "concurrently": "^8.2.2"
+    }
+}

package/src/template/tailwind.config.js

@@ -0,0 +1,80 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    darkMode: ["class"],
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+        "./node_modules/@builderos/agent-os-ui/dist/**/*.{js,ts,jsx,tsx}" // Support for installed UI lib if built
+    ],
+    theme: {
+        extend: {
+            fontFamily: {
+                display: ["DM Sans", "system-ui", "sans-serif"],
+                body: ["DM Sans", "system-ui", "sans-serif"],
+                sans: ["DM Sans", "system-ui", "sans-serif"],
+                mono: ["IBM Plex Mono", "ui-monospace", "monospace"]
+            },
+            borderRadius: {
+                lg: 'var(--radius)',
+                md: 'calc(var(--radius) - 2px)',
+                sm: 'calc(var(--radius) - 4px)',
+                xl: 'calc(var(--radius) + 4px)'
+            },
+            colors: {
+                background: 'var(--background)',
+                foreground: 'var(--foreground)',
+                card: {
+                    DEFAULT: 'var(--card)',
+                    foreground: 'var(--card-foreground)'
+                },
+                popover: {
+                    DEFAULT: 'var(--popover)',
+                    foreground: 'var(--popover-foreground)'
+                },
+                primary: {
+                    DEFAULT: 'var(--primary)',
+                    foreground: 'var(--primary-foreground)'
+                },
+                secondary: {
+                    DEFAULT: 'var(--secondary)',
+                    foreground: 'var(--secondary-foreground)'
+                },
+                muted: {
+                    DEFAULT: 'var(--muted)',
+                    foreground: 'var(--muted-foreground)'
+                },
+                accent: {
+                    DEFAULT: 'var(--accent)',
+                    foreground: 'var(--accent-foreground)'
+                },
+                destructive: {
+                    DEFAULT: 'var(--destructive)',
+                    foreground: 'var(--destructive-foreground)'
+                },
+                border: 'var(--border)',
+                input: 'var(--input)',
+                ring: 'var(--ring)',
+                chart: {
+                    '1': 'var(--chart-1)',
+                    '2': 'var(--chart-2)',
+                    '3': 'var(--chart-3)',
+                    '4': 'var(--chart-4)',
+                    '5': 'var(--chart-5)'
+                },
+                sidebar: {
+                    DEFAULT: 'var(--sidebar)',
+                    foreground: 'var(--sidebar-foreground)',
+                    primary: 'var(--sidebar-primary)',
+                    'primary-foreground': 'var(--sidebar-primary-foreground)',
+                    accent: 'var(--sidebar-accent)',
+                    'accent-foreground': 'var(--sidebar-accent-foreground)',
+                    border: 'var(--sidebar-border)',
+                    ring: 'var(--sidebar-ring)'
+                }
+            }
+        }
+    },
+    plugins: [
+        require("tailwindcss-animate")
+    ],
+}

package/src/template/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+
+})