@builderos/create-agent-os 0.0.2

package/src/template/agent-os-ui/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@antigravity/agent-os-ui",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/agent-os-ui.umd.cjs",
+  "module": "./dist/agent-os-ui.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/agent-os-ui.js",
+      "require": "./dist/agent-os-ui.umd.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint ."
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.469.0",
+    "react-markdown": "^9.0.0",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.0",
+    "tailwind-merge": "^2.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.7.0"
+  }
+}

package/src/template/agent-os-ui/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

package/src/template/agent-os-ui/src/components/AgentShell.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react'
+
+interface AgentShellProps {
+    sidebar: ReactNode
+    header?: ReactNode
+    children: ReactNode
+    className?: string
+}
+
+export function AgentShell({ sidebar, header, children, className }: AgentShellProps) {
+    return (
+        <div className={`flex h-screen bg-stone-50 dark:bg-stone-900 text-stone-900 dark:text-stone-100 font-sans transition-colors ${className || ''}`}>
+            {/* Sidebar Area */}
+            <div className="shrink-0">
+                {sidebar}
+            </div>
+
+            {/* Main Content Area */}
+            <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+                {header && (
+                    <div className="shrink-0">
+                        {header}
+                    </div>
+                )}
+                <main className="flex-1 overflow-auto bg-stone-50 dark:bg-black/20">
+                    {children}
+                </main>
+            </div>
+        </div>
+    )
+}

package/src/template/agent-os-ui/src/components/AgentSidebar.tsx

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react'
+
+interface SidebarItem {
+    label: string
+    icon?: ReactNode
+    active?: boolean
+    onClick?: () => void
+    badge?: string | number
+}
+
+interface AgentSidebarProps {
+    title?: string
+    version?: string
+    items: SidebarItem[]
+    footer?: ReactNode
+    className?: string
+}
+
+export function AgentSidebar({ title = "Agent OS", version = "v1.0", items, footer, className }: AgentSidebarProps) {
+    return (
+        <div className={`w-64 h-full bg-white dark:bg-stone-950 border-r border-stone-200 dark:border-stone-800 flex flex-col ${className || ''}`}>
+            {/* Header */}
+            <div className="p-6">
+                <div className="flex items-center gap-2 mb-1">
+                    <div className="w-8 h-8 bg-stone-900 dark:bg-stone-100 rounded-lg flex items-center justify-center">
+                        <div className="w-4 h-4 bg-white dark:bg-stone-900 rounded-sm" />
+                    </div>
+                    <span className="font-bold text-lg tracking-tight">{title}</span>
+                </div>
+                <div className="text-xs text-stone-500 font-mono pl-1">{version}</div>
+            </div>
+
+            {/* Navigation */}
+            <div className="flex-1 px-4 space-y-1 overflow-y-auto">
+                {items.map((item, index) => (
+                    <button
+                        key={index}
+                        onClick={item.onClick}
+                        className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors ${item.active
+                            ? 'bg-stone-100 dark:bg-stone-800 text-stone-900 dark:text-stone-100'
+                            : 'text-stone-600 dark:text-stone-400 hover:bg-stone-50 dark:hover:bg-stone-900'
+                            }`}
+                    >
+                        <div className="flex items-center gap-3">
+                            {item.icon}
+                            <span>{item.label}</span>
+                        </div>
+                        {item.badge && (
+                            <span className="text-xs bg-stone-200 dark:bg-stone-800 px-1.5 py-0.5 rounded-md">
+                                {item.badge}
+                            </span>
+                        )}
+                    </button>
+                ))}
+            </div>
+
+            {/* Footer */}
+            {footer && (
+                <div className="p-4 border-t border-stone-200 dark:border-stone-800">
+                    {footer}
+                </div>
+            )}
+        </div>
+    )
+}

package/src/template/agent-os-ui/src/components/GuidanceCard.tsx

@@ -0,0 +1,75 @@
+import { PromptButton } from './PromptButton'
+
+interface GuidanceCardProps {
+    phase?: string
+    title: string
+    description: string
+    prompt?: string
+    actionLabel?: string
+    onAction?: () => void
+    onCopy?: (text: string) => void
+    className?: string
+}
+
+export function GuidanceCard({
+    phase,
+    title,
+    description,
+    prompt,
+    actionLabel,
+    onAction,
+    onCopy,
+    className
+}: GuidanceCardProps) {
+    const handleCopy = (text: string) => {
+        if (onCopy) {
+            onCopy(text)
+        } else if (navigator.clipboard) {
+            navigator.clipboard.writeText(text)
+        }
+    }
+
+    return (
+        <div className={`bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-xl p-6 shadow-sm relative overflow-hidden ${className || ''}`}>
+            {/* Decorative Background Icon Effect - Optional, kept simple for package */}
+
+            <div className="relative z-10">
+                {phase && (
+                    <div className="text-xs font-bold tracking-wider text-stone-500 uppercase mb-2">
+                        {phase}
+                    </div>
+                )}
+
+                <h2 className="text-2xl font-bold text-stone-900 dark:text-stone-100 mb-2">
+                    {title}
+                </h2>
+
+                <p className="text-stone-600 dark:text-stone-400 mb-6 max-w-2xl leading-relaxed">
+                    {description}
+                </p>
+
+                <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
+                    {prompt && (
+                        <div className="flex-1 w-full sm:w-auto">
+                            <PromptButton
+                                label="Copy Prompt for Agent"
+                                prompt={prompt}
+                                onClick={handleCopy}
+                                primary
+                            />
+                        </div>
+                    )}
+
+                    {actionLabel && onAction && (
+                        <button
+                            onClick={onAction}
+                            className="px-4 py-2 text-sm font-medium text-stone-700 dark:text-stone-300 bg-stone-100 dark:bg-stone-800 hover:bg-stone-200 dark:hover:bg-stone-700 rounded-lg transition-colors"
+                        >
+                            {actionLabel}
+                        </button>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/template/agent-os-ui/src/components/MarkdownViewer.tsx

@@ -0,0 +1,25 @@
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import remarkBreaks from 'remark-breaks'
+
+interface MarkdownViewerProps {
+    content: string
+    className?: string
+}
+
+export function MarkdownViewer({ content, className }: MarkdownViewerProps) {
+    return (
+        <article className={`prose dark:prose-invert max-w-none 
+            prose-headings:font-serif prose-headings:font-semibold 
+            prose-a:text-stone-900 dark:prose-a:text-stone-100 
+            prose-code:text-stone-900 dark:prose-code:text-stone-100 
+            prose-pre:bg-stone-50 dark:prose-pre:bg-stone-900/50 
+            prose-pre:border prose-pre:border-stone-200 dark:prose-pre:border-stone-800 
+            prose-p:leading-relaxed prose-p:mb-4
+            ${className || ''}`}>
+            <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>
+                {content || ''}
+            </ReactMarkdown>
+        </article>
+    )
+}

package/src/template/agent-os-ui/src/components/PromptButton.tsx

@@ -0,0 +1,28 @@
+import { Copy } from 'lucide-react'
+
+interface PromptButtonProps {
+    label: string
+    prompt: string
+    onClick: (text: string) => void
+    small?: boolean
+    primary?: boolean
+    className?: string
+}
+
+export function PromptButton({ label, prompt, onClick, small, primary, className }: PromptButtonProps) {
+    return (
+        <button
+            onClick={() => onClick(prompt)}
+            className={`flex items-center justify-center gap-2 rounded-lg font-medium transition cursor-pointer
+            ${small ? 'px-3 py-1.5 text-xs flex-1' : 'px-4 py-2 text-sm w-full'}
+            ${primary
+                    ? 'bg-stone-900 hover:bg-stone-800 dark:bg-stone-100 dark:hover:bg-white text-white dark:text-stone-900 shadow-sm'
+                    : 'bg-white hover:bg-stone-100 dark:bg-stone-950 dark:hover:bg-stone-900 border border-stone-200 dark:border-stone-800 text-stone-900 dark:text-stone-100'}
+            ${className || ''}
+          `}
+        >
+            <Copy size={small ? 12 : 14} />
+            {label}
+        </button>
+    )
+}

package/src/template/agent-os-ui/src/components/StatusItem.tsx

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react'
+
+interface Status {
+    exists: boolean
+    completed?: number
+    total?: number
+    label?: string
+}
+
+interface StatusItemProps {
+    label: string
+    status: Status | undefined | null
+    icon: ReactNode
+    small?: boolean
+    onClick?: () => void
+    className?: string
+}
+
+export function StatusItem({ label, status, icon, small, onClick, className }: StatusItemProps) {
+    if (!status) return null
+    const isComplete = status.exists && (status.total && status.total > 0 ? status.completed === status.total : true)
+
+    return (
+        <div
+            onClick={onClick}
+            className={`flex items-center justify-between ${small ? 'text-xs' : 'text-sm'} ${onClick ? 'cursor-pointer hover:bg-black/5 dark:hover:bg-white/5 p-1.5 -mx-1.5 rounded-md transition-colors group' : ''} ${className || ''}`}
+        >
+            <div className="flex items-center gap-2 text-stone-500 dark:text-stone-400 group-hover:text-stone-900 dark:group-hover:text-stone-200 transition-colors">
+                {icon}
+                <span>{label}</span>
+            </div>
+            <div>
+                {status.exists ? (
+                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium border ${isComplete
+                        ? 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400 border-emerald-200 dark:border-emerald-800'
+                        : 'bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-800'}`}>
+                        {status.total && status.total > 0 ? `${status.completed}/${status.total}` : (status.label || 'Done')}
+                    </span>
+                ) : (
+                    <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-stone-100 dark:bg-stone-800 text-stone-500 dark:text-stone-400 border border-stone-200 dark:border-stone-700">Missing</span>
+                )}
+            </div>
+        </div>
+    )
+}

package/src/template/agent-os-ui/src/components/ThemeToggle.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from 'react'
+import { Moon, Sun } from 'lucide-react'
+
+export type Theme = 'light' | 'dark' | 'system'
+
+interface ThemeToggleProps {
+    onThemeChange?: (theme: Theme) => void
+    className?: string
+}
+
+export function ThemeToggle({ onThemeChange, className }: ThemeToggleProps) {
+    const [theme, setTheme] = useState<Theme>(() => {
+        if (typeof window !== 'undefined') {
+            return (localStorage.getItem('theme') as Theme) || 'system'
+        }
+        return 'system'
+    })
+
+    useEffect(() => {
+        const root = document.documentElement
+
+        const applyTheme = (targetTheme: Theme) => {
+            if (targetTheme === 'system') {
+                const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+                root.classList.toggle('dark', systemDark)
+            } else {
+                root.classList.toggle('dark', targetTheme === 'dark')
+            }
+        }
+
+        applyTheme(theme)
+        localStorage.setItem('theme', theme)
+
+        // Notify parent
+        onThemeChange?.(theme)
+
+        // Listen for system theme changes when in system mode
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+        const handleChange = () => {
+            if (theme === 'system') {
+                applyTheme('system')
+            }
+        }
+        mediaQuery.addEventListener('change', handleChange)
+
+        return () => mediaQuery.removeEventListener('change', handleChange)
+    }, [theme, onThemeChange])
+
+    const toggleTheme = () => {
+        setTheme((prev) => {
+            if (prev === 'light') return 'dark'
+            if (prev === 'dark') return 'system'
+            return 'light'
+        })
+    }
+
+    const isDark = theme === 'dark' || (theme === 'system' && typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+    return (
+        <button
+            onClick={toggleTheme}
+            className={`w-9 h-9 flex items-center justify-center rounded-md text-stone-500 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 hover:bg-stone-100 dark:hover:bg-stone-800 transition-colors ${className || ''}`}
+            title={`Theme: ${theme}`}
+        >
+            {isDark ? (
+                <Moon className="w-5 h-5" strokeWidth={1.5} />
+            ) : (
+                <Sun className="w-5 h-5" strokeWidth={1.5} />
+            )}
+        </button>
+    )
+}

package/src/template/agent-os-ui/src/index.ts

@@ -0,0 +1,11 @@
+import './style.css'
+
+export { AgentShell } from './components/AgentShell'
+export { AgentSidebar } from './components/AgentSidebar'
+export { GuidanceCard } from './components/GuidanceCard'
+export { ThemeToggle } from './components/ThemeToggle'
+export { PromptButton } from './components/PromptButton'
+export { StatusItem } from './components/StatusItem'
+export { MarkdownViewer } from './components/MarkdownViewer'
+// Export types if needed
+export type { Theme } from './components/ThemeToggle'

package/src/template/agent-os-ui/src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/template/agent-os-ui/tailwind.config.js

@@ -0,0 +1,50 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    darkMode: 'class',
+    theme: {
+        extend: {
+            colors: {
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                primary: {
+                    DEFAULT: "hsl(var(--primary))",
+                    foreground: "hsl(var(--primary-foreground))",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover))",
+                    foreground: "hsl(var(--popover-foreground))",
+                },
+                card: {
+                    DEFAULT: "hsl(var(--card))",
+                    foreground: "hsl(var(--card-foreground))",
+                },
+            },
+        },
+    },
+    plugins: [
+        require('tailwindcss-animate'),
+        require('@tailwindcss/typography'),
+    ],
+}

package/src/template/agent-os-ui/tsconfig.json

@@ -0,0 +1,33 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "declaration": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "./src/*"
+            ]
+        }
+    },
+    "include": [
+        "src"
+    ]
+}

package/src/template/agent-os-ui/vite.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = resolve(__filename, '..');
+
+export default defineConfig({
+    plugins: [
+        react(),
+        dts({ include: ['src'] })
+    ],
+    build: {
+        lib: {
+            entry: resolve(__dirname, 'src/index.ts'),
+            name: 'AgentOSUI',
+            fileName: 'agent-os-ui',
+        },
+        rollupOptions: {
+            external: ['react', 'react-dom', 'react/jsx-runtime'],
+            output: {
+                globals: {
+                    react: 'React',
+                    'react-dom': 'ReactDOM',
+                    'react/jsx-runtime': 'jsxRuntime',
+                },
+            },
+        },
+    },
+});

package/src/template/control-center/backend/backend.log

@@ -0,0 +1,2 @@
+Control Center Backend running on http://localhost:3001
+Monitoring Agent OS at: /Users/siddarth/OS/learning-agent-os/app/agent-os