@theproductguy/create-mission-control 1.0.17 → 1.0.25

package/src/template/control-center/frontend/src/index.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -6,6 +7,7 @@
 /*
   Control Center Theme (Aligned with Design OS)
   Warm Neutrals / Stone Palette
+  Font: Outfit (Modern, Premium)
 */
 
 
@@ -50,6 +52,18 @@
     /* stone-500 */
     --chart-1: oklch(0.532 0.157 131.589);
     /* lime-600 */
+    --success: oklch(0.627 0.194 149.214);
+    /* emerald-500 */
+    --success-foreground: oklch(0.985 0.001 106.424);
+    /* stone-50 */
+    --warning: oklch(0.704 0.191 47.567);
+    /* amber-500 */
+    --warning-foreground: oklch(0.985 0.001 106.424);
+    /* stone-50 */
+    --info: oklch(0.612 0.203 252.339);
+    /* blue-500 */
+    --info-foreground: oklch(0.985 0.001 106.424);
+    /* stone-50 */
     /* Sidebar */
     --sidebar: oklch(0.985 0.001 106.424);
     /* stone-50 */
@@ -109,6 +123,18 @@
     /* stone-500 */
     --chart-1: oklch(0.648 0.2 131.684);
     /* lime-500 */
+    --success: oklch(0.627 0.194 149.214);
+    /* emerald-500 */
+    --success-foreground: oklch(0.216 0.006 56.043);
+    /* stone-900 */
+    --warning: oklch(0.704 0.191 47.567);
+    /* amber-500 */
+    --warning-foreground: oklch(0.216 0.006 56.043);
+    /* stone-900 */
+    --info: oklch(0.612 0.203 252.339);
+    /* blue-500 */
+    --info-foreground: oklch(0.216 0.006 56.043);
+    /* stone-900 */
     /* Sidebar */
     --sidebar: oklch(0.268 0.007 34.298);
     /* stone-800 */

package/src/template/control-center/frontend/src/types.ts

@@ -0,0 +1,65 @@
+
+export interface Status {
+    exists: boolean;
+    completed: number;
+    total: number;
+    nextItem?: string | null;
+    items?: { name: string; completed: boolean }[];
+    isBoilerplate?: boolean;
+}
+
+export interface ProductStatus {
+    mission: Status;
+    roadmap: Status;
+    techStack: Status;
+}
+
+export interface Spec {
+    name: string;
+    spec: Status;
+    tasks: Status;
+}
+
+export interface ProjectState {
+    product: ProductStatus;
+    design: {
+        exists: boolean;
+        initialized: boolean;
+        tokens: boolean;
+        shell: boolean;
+        exported: boolean;
+        exportPrompts?: {
+            oneShot: boolean;
+            section: boolean;
+        };
+        qa?: {
+            audit: boolean;
+            polish: boolean;
+        };
+    };
+    implementation: {
+        scaffolded: boolean;
+        tests?: {
+            count: number;
+            hasTests: boolean;
+        };
+        coverage?: number | null;
+        specs?: {
+            total: number;
+            completed: number;
+        };
+        git?: {
+            initialized: boolean;
+            branch: string | null;
+            uncommitted: number;
+            lastCommit: string | null;
+        };
+    };
+    specs: Spec[];
+    services?: {
+        api: boolean;
+        design: boolean;
+        app: boolean;
+    };
+    projectRoot: string;
+}

package/src/template/control-center/frontend/tailwind.config.js

@@ -9,9 +9,9 @@ export default {
     theme: {
         extend: {
             fontFamily: {
-                display: ["DM Sans", "system-ui", "sans-serif"],
-                body: ["DM Sans", "system-ui", "sans-serif"],
-                sans: ["DM Sans", "system-ui", "sans-serif"],
+                display: ["Outfit", "system-ui", "sans-serif"],
+                body: ["Outfit", "system-ui", "sans-serif"],
+                sans: ["Outfit", "system-ui", "sans-serif"],
                 mono: ["IBM Plex Mono", "ui-monospace", "monospace"]
             },
             borderRadius: {
@@ -51,6 +51,18 @@ export default {
                     DEFAULT: 'var(--destructive)',
                     foreground: 'var(--destructive-foreground)'
                 },
+                success: {
+                    DEFAULT: 'var(--success)',
+                    foreground: 'var(--success-foreground)'
+                },
+                warning: {
+                    DEFAULT: 'var(--warning)',
+                    foreground: 'var(--warning-foreground)'
+                },
+                info: {
+                    DEFAULT: 'var(--info)',
+                    foreground: 'var(--info-foreground)'
+                },
                 border: 'var(--border)',
                 input: 'var(--input)',
                 ring: 'var(--ring)',

package/src/template/control-center/product/design-system/QA/audit-report.md

@@ -0,0 +1,34 @@
+# Audit Report: Action Centre
+
+## Anti-Patterns Verdict
+**FAIL**. The codebase exhibits "Monolithic Spaghetti" and "Generic Utility" anti-patterns. While it functionality works, the structure is brittle and the aesthetic is generic "Dashboard UI".
+
+## Executive Summary
+- **Total Issues**: 4 key issues
+- **Critical**: 1 (Monolithic Architecture)
+- **High**: 2 (Mixed Tokens, Inline Components)
+- **Overall Score**: C-
+- **Next Steps**: Refactor `App.tsx`, Normalize Tokens.
+
+## Detailed Findings
+
+### Critical Issues
+1.  **Monolithic `App.tsx`**: The file is 1000+ lines, containing state (`ProjectState`), API logic (`fetchStatus`), and UI components (`Guidance`, `StatusItem`). This violates clean code principles and makes "polishing" impossible.
+    - *Recommendation*: Extract `StatusItem`, `Guidance`, `NextStepCard` to `components/`. Move state to `hooks/useProjectState`.
+
+### High Severity
+2.  **Hardcoded Colors**: `App.tsx` contains literals like `bg-emerald-50`, `text-red-500`.
+    - *Impact*: Inconsistent theming. If we change the "Success" token, these won't update.
+    - *Fix*: Use `text-destructive`, `bg-success-subtle` (need to define semantic tokens).
+
+3.  **Inline Components**: `StatusItem` and `PromptButton` are defined inside the same file as `App`.
+    - *Impact*: Low reusability, hard to read.
+
+### Medium Severity
+4.  **Generic Typography**: `App.tsx` relies on default `font-sans`.
+    - *Fix*: Adopt a distinct font stack in `index.css` (e.g., `Outfit` or `Space Grotesk` for headers) to match "Impeccable" standards.
+
+## Recommendations
+1.  **Refactor**: Break `App.tsx` into `components/` and `hooks/`.
+2.  **Normalize**: Replace all `red-500`, `emerald-50` with semantic variables (`--destructive`, `--success`).
+3.  **Polish**: Introduce micro-interactions for the "Action" buttons.

package/src/template/control-center/product/mission.md

@@ -0,0 +1,38 @@
+# Product Mission
+
+## Pitch
+**Action Centre** is the central nervous system for Agent OS that helps **Developers** manage the complexity of autonomous development by providing **unified orchestration of projects, agents, and design systems**.
+
+## Users
+
+### Primary Customers
+- **The Creator**: A developer building multiple products simultaneously using Agent OS.
+
+### User Personas
+**The Product Guy/Gal** (25-45)
+- **Role:** Full-stack Developer / Entrepreneur
+- **Context:** Juggling strategy, design, and code across multiple potential products.
+- **Pain Points:** Context switching, losing track of agent states, fragmented workflows.
+- **Goals:** High-velocity shipping, widely "Impeccable" design quality, seamless agent collaboration.
+
+## The Problem
+
+### Fragmentation of Control
+Managing autonomous agents, design systems (`design-os`), and product strategy (`mission.md`) via scattered CLI commands is inefficient and opaque. Users lack a single "pane of glass" to see the health and state of their Agent OS instance.
+
+**Our Solution:** A unified web-based **Action Centre** (running on port 5401) that visualizes the entire ecosystem, allowing direct manipulation of agent capabilities and design standards.
+
+## Differentiators
+
+### "Impeccable" Native
+Unlike generic admin dashboards, Action Centre is built with and for the **Impeccable Design System**, embodying the very aesthetics and quality standards it enforces. It is not just a tool; it is a reference implementation.
+
+## Key Features
+
+### Core Features
+- **Project Dashboard:** Visual overview of all active projects, their "Mission" status, and current phase.
+- **Agent Orchestration:** Interface to view, install, and configure Agent Capabilities (Skills, Tools).
+- **Design System Bridge:** Direct access to Design OS status, Token management, and Audit reports.
+
+### Advanced Features
+- **Workflow Visualizer:** Real-time view of the "Master Workflow" progress (Strategy -> Design -> Build).

package/src/template/control-center/product/roadmap.md

@@ -0,0 +1,10 @@
+# Product Roadmap
+
+1. [ ] **Refactor Monolithic App** — Extract `Guidance`, `StatusItem`, and `PromptButton` into dedicated components and move logic to `useProjectState`; ensure `App.tsx` is < 200 lines. `[M]`
+2. [ ] **Normalize Design Tokens** — Replace all hardcoded Tailwind colors (e.g., `emerald-50`, `red-500`) with semantic CSS variables (`--success`, `--destructive`) in `index.css` and components. `[S]`
+3. [ ] **Enhance Typography** — Introduce a distinct font stack (e.g., Outfit/Inter pair) and update `index.css` to remove generic "system-ui" failover. `[S]`
+4. [ ] **Add "Impeccable" Polish** — Implementation of micro-interactions for buttons (hover lift, active scale) and list items (staggered entrance). `[S]`
+
+> Notes
+> - Priority is refactoring to enable easier design iteration.
+> - "Polish" phase depends on "Normalize" being complete.

package/src/template/design-system/src/lib/product-loader.ts

@@ -52,6 +52,9 @@ function slugify(str: string): string {
 export function parseProductOverview(md: string): ProductOverview | null {
   if (!md || !md.trim()) return null
 
+  // Normalize line endings for Windows compatibility
+  md = md.replace(/\r\n/g, '\n')
+
   try {
     // Extract product name from first # heading
     const nameMatch = md.match(/^#\s+(.+)$/m)
@@ -117,6 +120,9 @@ export function parseProductOverview(md: string): ProductOverview | null {
 export function parseProductRoadmap(md: string): ProductRoadmap | null {
   if (!md || !md.trim()) return null
 
+  // Normalize line endings for Windows compatibility
+  md = md.replace(/\r\n/g, '\n')
+
   try {
     const sections: Section[] = []