@theproductguy/create-mission-control 1.0.0

package/src/template/agent-os/specs/README.md

@@ -0,0 +1 @@
+# Specs

package/src/template/agent-os/standards/backend/api.md

@@ -0,0 +1,10 @@
+## API endpoint standards and conventions
+
+- **RESTful Design**: Follow REST principles with clear resource-based URLs and appropriate HTTP methods (GET, POST, PUT, PATCH, DELETE)
+- **Consistent Naming**: Use consistent, lowercase, hyphenated or underscored naming conventions for endpoints across the API
+- **Versioning**: Implement API versioning strategy (URL path or headers) to manage breaking changes without disrupting existing clients
+- **Plural Nouns**: Use plural nouns for resource endpoints (e.g., `/users`, `/products`) for consistency
+- **Nested Resources**: Limit nesting depth to 2-3 levels maximum to keep URLs readable and maintainable
+- **Query Parameters**: Use query parameters for filtering, sorting, pagination, and search rather than creating separate endpoints
+- **HTTP Status Codes**: Return appropriate, consistent HTTP status codes that accurately reflect the response (200, 201, 400, 404, 500, etc.)
+- **Rate Limiting Headers**: Include rate limit information in response headers to help clients manage their usage

package/src/template/agent-os/standards/backend/migrations.md

@@ -0,0 +1,9 @@
+## Database migration best practices
+
+- **Reversible Migrations**: Always implement rollback/down methods to enable safe migration reversals
+- **Small, Focused Changes**: Keep each migration focused on a single logical change for clarity and easier troubleshooting
+- **Zero-Downtime Deployments**: Consider deployment order and backwards compatibility for high-availability systems
+- **Separate Schema and Data**: Keep schema changes separate from data migrations for better rollback safety
+- **Index Management**: Create indexes on large tables carefully, using concurrent options when available to avoid locks
+- **Naming Conventions**: Use clear, descriptive names that indicate what the migration does
+- **Version Control**: Always commit migrations to version control and never modify existing migrations after deployment

package/src/template/agent-os/standards/backend/models.md

@@ -0,0 +1,10 @@
+## Database model best practices
+
+- **Clear Naming**: Use singular names for models and plural for tables following your framework's conventions
+- **Timestamps**: Include created and updated timestamps on all tables for auditing and debugging
+- **Data Integrity**: Use database constraints (NOT NULL, UNIQUE, foreign keys) to enforce data rules at the database level
+- **Appropriate Data Types**: Choose data types that match the data's purpose and size requirements
+- **Indexes on Foreign Keys**: Index foreign key columns and other frequently queried fields for performance
+- **Validation at Multiple Layers**: Implement validation at both model and database levels for defense in depth
+- **Relationship Clarity**: Define relationships clearly with appropriate cascade behaviors and naming conventions
+- **Avoid Over-Normalization**: Balance normalization with practical query performance needs

package/src/template/agent-os/standards/backend/queries.md

@@ -0,0 +1,9 @@
+## Database query best practices
+
+- **Prevent SQL Injection**: Always use parameterized queries or ORM methods; never interpolate user input into SQL strings
+- **Avoid N+1 Queries**: Use eager loading or joins to fetch related data in a single query instead of multiple queries
+- **Select Only Needed Data**: Request only the columns you need rather than using SELECT * for better performance
+- **Index Strategic Columns**: Index columns used in WHERE, JOIN, and ORDER BY clauses for query optimization
+- **Use Transactions for Related Changes**: Wrap related database operations in transactions to maintain data consistency
+- **Set Query Timeouts**: Implement timeouts to prevent runaway queries from impacting system performance
+- **Cache Expensive Queries**: Cache results of complex or frequently-run queries when appropriate

package/src/template/agent-os/standards/frontend/accessibility.md

@@ -0,0 +1,10 @@
+## UI accessibility best practices
+
+- **Semantic HTML**: Use appropriate HTML elements (nav, main, button, etc.) that convey meaning to assistive technologies
+- **Keyboard Navigation**: Ensure all interactive elements are accessible via keyboard with visible focus indicators
+- **Color Contrast**: Maintain sufficient contrast ratios (4.5:1 for normal text) and don't rely solely on color to convey information
+- **Alternative Text**: Provide descriptive alt text for images and meaningful labels for all form inputs
+- **Screen Reader Testing**: Test and verify that all views are accessible on screen reading devices.
+- **ARIA When Needed**: Use ARIA attributes to enhance complex components when semantic HTML isn't sufficient
+- **Logical Heading Structure**: Use heading levels (h1-h6) in proper order to create a clear document outline
+- **Focus Management**: Manage focus appropriately in dynamic content, modals, and single-page applications

package/src/template/agent-os/standards/frontend/components.md

@@ -0,0 +1,11 @@
+## UI component best practices
+
+- **Single Responsibility**: Each component should have one clear purpose and do it well
+- **Reusability**: Design components to be reused across different contexts with configurable props
+- **Composability**: Build complex UIs by combining smaller, simpler components rather than monolithic structures
+- **Clear Interface**: Define explicit, well-documented props with sensible defaults for ease of use
+- **Encapsulation**: Keep internal implementation details private and expose only necessary APIs
+- **Consistent Naming**: Use clear, descriptive names that indicate the component's purpose and follow team conventions
+- **State Management**: Keep state as local as possible; lift it up only when needed by multiple components
+- **Minimal Props**: Keep the number of props manageable; if a component needs many props, consider composition or splitting it
+- **Documentation**: Document component usage, props, and provide examples for easier adoption by team members

package/src/template/agent-os/standards/frontend/css.md

@@ -0,0 +1,7 @@
+## CSS best practices
+
+- **Consistent Methodology**: Apply and stick to the project's consistent CSS methodology (Tailwind, BEM, utility classes, CSS modules, etc.) across the entire project
+- **Avoid Overriding Framework Styles**: Work with your framework's patterns rather than fighting against them with excessive overrides
+- **Maintain Design System**: Establish and document design tokens (colors, spacing, typography) for consistency
+- **Minimize Custom CSS**: Leverage framework utilities and components to reduce custom CSS maintenance burden
+- **Performance Considerations**: Optimize for production with CSS purging/tree-shaking to remove unused styles

package/src/template/agent-os/standards/frontend/responsive.md

@@ -0,0 +1,11 @@
+## Responsive design best practices
+
+- **Mobile-First Development**: Start with mobile layout and progressively enhance for larger screens
+- **Standard Breakpoints**: Consistently use standard breakpoints across the application (e.g., mobile, tablet, desktop)
+- **Fluid Layouts**: Use percentage-based widths and flexible containers that adapt to screen size
+- **Relative Units**: Prefer rem/em units over fixed pixels for better scalability and accessibility
+- **Test Across Devices**: Test and verify UI changes across multiple screen sizes from mobile to tablet to desktop screen sizes and ensure a balanced, user-friendly viewing and reading experience on all
+- **Touch-Friendly Design**: Ensure tap targets are appropriately sized (minimum 44x44px) for mobile users
+- **Performance on Mobile**: Optimize images and assets for mobile network conditions and smaller screens
+- **Readable Typography**: Maintain readable font sizes across all breakpoints without requiring zoom
+- **Content Priority**: Show the most important content first on smaller screens through thoughtful layout decisions

package/src/template/agent-os/standards/global/coding-style.md

@@ -0,0 +1,10 @@
+## Coding style best practices
+
+- **Consistent Naming Conventions**: Establish and follow naming conventions for variables, functions, classes, and files across the codebase
+- **Automated Formatting**: Maintain consistent code style (indenting, line breaks, etc.)
+- **Meaningful Names**: Choose descriptive names that reveal intent; avoid abbreviations and single-letter variables except in narrow contexts
+- **Small, Focused Functions**: Keep functions small and focused on a single task for better readability and testability
+- **Consistent Indentation**: Use consistent indentation (spaces or tabs) and configure your editor/linter to enforce it
+- **Remove Dead Code**: Delete unused code, commented-out blocks, and imports rather than leaving them as clutter
+- **Backward compatibility only when required:** Unless specifically instructed otherwise, assume you do not need to write additional code logic to handle backward compatibility.
+- **DRY Principle**: Avoid duplication by extracting common logic into reusable functions or modules

package/src/template/agent-os/standards/global/commenting.md

@@ -0,0 +1,5 @@
+## Code commenting best practices
+
+- **Self-Documenting Code**: Write code that explains itself through clear structure and naming
+- **Minimal, helpful comments**: Add concise, minimal comments to explain large sections of code logic.
+- **Don't comment changes or fixes**: Do not leave code comments that speak to recent or temporary changes or fixes. Comments should be evergreen informational texts that are relevant far into the future.

package/src/template/agent-os/standards/global/conventions.md

@@ -0,0 +1,11 @@
+## General development conventions
+
+- **Consistent Project Structure**: Organize files and directories in a predictable, logical structure that team members can navigate easily
+- **Clear Documentation**: Maintain up-to-date README files with setup instructions, architecture overview, and contribution guidelines
+- **Version Control Best Practices**: Use clear commit messages, feature branches, and meaningful pull/merge requests with descriptions
+- **Environment Configuration**: Use environment variables for configuration; never commit secrets or API keys to version control
+- **Dependency Management**: Keep dependencies up-to-date and minimal; document why major dependencies are used
+- **Code Review Process**: Establish a consistent code review process with clear expectations for reviewers and authors
+- **Testing Requirements**: Define what level of testing is required before merging (unit tests, integration tests, etc.)
+- **Feature Flags**: Use feature flags for incomplete features rather than long-lived feature branches
+- **Changelog Maintenance**: Keep a changelog or release notes to track significant changes and improvements

package/src/template/agent-os/standards/global/error-handling.md

@@ -0,0 +1,9 @@
+## Error handling best practices
+
+- **User-Friendly Messages**: Provide clear, actionable error messages to users without exposing technical details or security information
+- **Fail Fast and Explicitly**: Validate input and check preconditions early; fail with clear error messages rather than allowing invalid state
+- **Specific Exception Types**: Use specific exception/error types rather than generic ones to enable targeted handling
+- **Centralized Error Handling**: Handle errors at appropriate boundaries (controllers, API layers) rather than scattering try-catch blocks everywhere
+- **Graceful Degradation**: Design systems to degrade gracefully when non-critical services fail rather than breaking entirely
+- **Retry Strategies**: Implement exponential backoff for transient failures in external service calls
+- **Clean Up Resources**: Always clean up resources (file handles, connections) in finally blocks or equivalent mechanisms

package/src/template/agent-os/standards/global/tech-stack.md

@@ -0,0 +1,31 @@
+## Tech stack
+
+Define your technical stack below. This serves as a reference for all team members and helps maintain consistency across the project.
+
+### Framework & Runtime
+- **Application Framework:** [e.g., Rails, Django, Next.js, Express]
+- **Language/Runtime:** [e.g., Ruby, Python, Node.js, Java]
+- **Package Manager:** [e.g., bundler, pip, npm, yarn]
+
+### Frontend
+- **JavaScript Framework:** [e.g., React, Vue, Svelte, Alpine, vanilla JS]
+- **CSS Framework:** [e.g., Tailwind CSS, Bootstrap, custom]
+- **UI Components:** [e.g., shadcn/ui, Material UI, custom library]
+
+### Database & Storage
+- **Database:** [e.g., PostgreSQL, MySQL, MongoDB]
+- **ORM/Query Builder:** [e.g., ActiveRecord, Prisma, Sequelize]
+- **Caching:** [e.g., Redis, Memcached]
+
+### Testing & Quality
+- **Test Framework:** [e.g., Jest, RSpec, pytest]
+- **Linting/Formatting:** [e.g., ESLint, Prettier, RuboCop]
+
+### Deployment & Infrastructure
+- **Hosting:** [e.g., Heroku, AWS, Vercel, Railway]
+- **CI/CD:** [e.g., GitHub Actions, CircleCI]
+
+### Third-Party Services
+- **Authentication:** [e.g., Auth0, Devise, NextAuth]
+- **Email:** [e.g., SendGrid, Postmark]
+- **Monitoring:** [e.g., Sentry, Datadog]

package/src/template/agent-os/standards/global/validation.md

@@ -0,0 +1,11 @@
+## Validation best practices
+
+- **Validate on Server Side**: Always validate on the server; never trust client-side validation alone for security or data integrity
+- **Client-Side for UX**: Use client-side validation to provide immediate user feedback, but duplicate checks server-side
+- **Fail Early**: Validate input as early as possible and reject invalid data before processing
+- **Specific Error Messages**: Provide clear, field-specific error messages that help users correct their input
+- **Allowlists Over Blocklists**: When possible, define what is allowed rather than trying to block everything that's not
+- **Type and Format Validation**: Check data types, formats, ranges, and required fields systematically
+- **Sanitize Input**: Sanitize user input to prevent injection attacks (SQL, XSS, command injection)
+- **Business Rule Validation**: Validate business rules (e.g., sufficient balance, valid dates) at the appropriate application layer
+- **Consistent Validation**: Apply validation consistently across all entry points (web forms, API endpoints, background jobs)

package/src/template/agent-os/standards/testing/test-writing.md

@@ -0,0 +1,9 @@
+## Test coverage best practices
+
+- **Write Minimal Tests During Development**: Do NOT write tests for every change or intermediate step. Focus on completing the feature implementation first, then add strategic tests only at logical completion points
+- **Test Only Core User Flows**: Write tests exclusively for critical paths and primary user workflows. Skip writing tests for non-critical utilities and secondary workflows until if/when you're instructed to do so.
+- **Defer Edge Case Testing**: Do NOT test edge cases, error states, or validation logic unless they are business-critical. These can be addressed in dedicated testing phases, not during feature development.
+- **Test Behavior, Not Implementation**: Focus tests on what the code does, not how it does it, to reduce brittleness
+- **Clear Test Names**: Use descriptive names that explain what's being tested and the expected outcome
+- **Mock External Dependencies**: Isolate units by mocking databases, APIs, file systems, and other external services
+- **Fast Execution**: Keep unit tests fast (milliseconds) so developers run them frequently during development

package/src/template/agent-os-ui/README.md

@@ -0,0 +1,73 @@
+# @builderos/agent-os-ui
+
+The official UI capability for the **Agent OS** workflow.
+Use this library to build the control interface that guides you through the Antigravity development process (Product -> Design -> Build -> Verify).
+
+## Installation
+
+```bash
+npm install @builderos/agent-os-ui
+```
+
+## Setup
+
+1. Import the styles:
+```ts
+import '@builderos/agent-os-ui/style.css';
+```
+
+2. Build your Control Dashboard:
+```tsx
+import { AgentShell, GuidanceCard } from '@builderos/agent-os-ui';
+
+export function ControlCenter() {
+  return (
+    <AgentShell sidebar={...}>
+      <div className="p-8 space-y-6">
+        {/* The core workflow component */}
+        <GuidanceCard 
+           phase="Phase 1: Strategy"
+           title="Plan Your Product"
+           description="Define your Mission and Roadmap."
+           prompt="Antigravity, plan the product..."
+        />
+      </div>
+    </AgentShell>
+  );
+}
+```
+
+## Features
+- **AgentShell**: Full application layout (Sidebar + Header + Main).
+- **AgentSidebar**: Standardized navigation menu.
+- **GuidanceCard**: The "Next Step" card with integrated prompt copying.
+- **ThemeToggle**: Dark/Light mode switcher with system sync.
+- **MarkdownViewer**: Beautifully styled Markdown rendering (Prose).
+- **StatusItem**: Standardized pills for checking system health.
+
+## Example Layout
+
+```tsx
+import { AgentShell, AgentSidebar, ThemeToggle } from '@builderos/agent-os-ui';
+import { Home, Layers } from 'lucide-react';
+
+export default function App() {
+  return (
+    <AgentShell
+      sidebar={
+         <AgentSidebar 
+           items={[
+             { label: 'Home', icon: <Home size={18}/>, active: true },
+             { label: 'Design', icon: <Layers size={18}/> }
+           ]}
+           footer={<ThemeToggle />}
+         />
+      }
+    >
+      <div className="p-8">
+        <h1 className="text-2xl font-bold">Welcome to Agent OS</h1>
+      </div>
+    </AgentShell>
+  )
+}
+```

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

@@ -0,0 +1,54 @@
+{
+  "name": "@builderos/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.20",
+    "postcss": "^8.4.49",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
+    "eslint": "^9.39.1",
+    "globals": "^16.5.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.7.0"
+  }
+}

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>
+    )
+}