@theproductguy/create-mission-control 1.0.0 → 1.0.4

package/bin/cli.js

@@ -87,16 +87,23 @@ async function init() {
                 const templateDir = path.resolve(__dirname, '../src/template');
 
                 // Copy Control Center
-                fs.cpSync(path.join(templateDir, 'control-center'), path.join(root, 'control-center'), { recursive: true });
+                // Copy helper to exclude node_modules
+                const copyOptions = {
+                    recursive: true,
+                    filter: (src) => !src.includes('node_modules')
+                };
+
+                // Copy Control Center
+                fs.cpSync(path.join(templateDir, 'control-center'), path.join(root, 'control-center'), copyOptions);
 
                 // Copy Design System
-                fs.cpSync(path.join(templateDir, 'design'), path.join(root, 'design-system'), { recursive: true });
+                fs.cpSync(path.join(templateDir, 'design-system'), path.join(root, 'design-system'), copyOptions);
 
                 // Copy Agent OS Docs
-                fs.cpSync(path.join(templateDir, 'agent-os'), path.join(root, 'agent-os'), { recursive: true });
+                fs.cpSync(path.join(templateDir, 'agent-os'), path.join(root, 'agent-os'), copyOptions);
 
                 // Copy Agent OS UI Package (for local workspace support)
-                fs.cpSync(path.join(templateDir, 'agent-os-ui'), path.join(root, 'agent-os-ui'), { recursive: true });
+                fs.cpSync(path.join(templateDir, 'agent-os-ui'), path.join(root, 'agent-os-ui'), copyOptions);
 
                 // 3. Configure Workspace
                 console.log(cyan('\n3. Configuring Workspace...'));
@@ -112,7 +119,7 @@ async function init() {
 
                 appPkg.dependencies = {
                     ...appPkg.dependencies,
-                    "@builderos/agent-os-ui": "*", // Use workspace version
+                    "@theproductguy/agent-os-ui": "*", // Use workspace version
                     "lucide-react": "^0.469.0",
                     "clsx": "^2.1.0",
                     "tailwind-merge": "^2.2.0",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@theproductguy/create-mission-control",
-    "version": "1.0.0",
+    "version": "1.0.4",
     "description": "Scaffolding tool for Agent OS applications",
     "type": "module",
     "bin": {
@@ -41,4 +41,4 @@
         "typescript": "^5.3.3",
         "vite": "^5.0.10"
     }
-}
+}

package/src/template/agent-os/commands/export-product/export-product.md

@@ -19,6 +19,30 @@ Verify the minimum requirements exist:
 
 If required files are missing, stop and ask the user to complete them first.
 
+## Step 1.5: Impeccable Quality Check (Pre-Export)
+
+Before exporting, run a quick quality assessment:
+
+**Check for QA Reports:**
+1. Look for `design-system/QA/audit-report.md` — Has a full audit been run?
+2. Look for `design-system/QA/tokens-audit.md` — Were design tokens audited?
+3. Look for `design-system/QA/shell-audit.md` — Was the shell audited?
+
+**If no audit reports exist:**
+"⚠️ **Impeccable Warning**: No quality audits found. I recommend running `/audit` before exporting to ensure your design meets quality standards and avoids 'AI Slop'.
+
+Would you like me to:
+1. Run `/audit` now (recommended)
+2. Proceed with export anyway"
+
+**If audits exist but have failures:**
+"⚠️ **Impeccable Warning**: Previous audit found issues that may not have been addressed. Consider running the suggested fix commands (`/normalize`, `/harden`, etc.) before exporting.
+
+Proceed with export?"
+
+**If audits pass or user confirms:**
+Continue to Step 2.
+
 ## Step 2: Create Export Directory Structure
 
 Create the `product-plan/` directory in the project root with this structure:
@@ -167,7 +191,8 @@ Use Test-Driven Development (TDD) based on `@product-plan/sections/SECTION_ID/te
 ## Step 9: Zip and Handoff
 
 1. Zip `product-plan/` into `product-plan.zip`.
-2. Sync key files to `app/agent-os/product/` (Overview, Roadmap, Data Model, Design System) to update the status in the main app dashboard.
+2. Copy `product-plan.zip` to `design-system/product-plan.zip` (so Design OS can detect it).
+3. Sync key files to `app/agent-os/product/` (Overview, Roadmap, Data Model, Design System) to update the status in the main app dashboard.
 
 ## Final Output
 

package/src/template/agent-os/commands/initialize-design/initialize-design.md

@@ -64,4 +64,13 @@ Create a draft data model file:
 ### Step 3: Verification
 - Check that `design-system/product/product-overview.md` exists.
 - Check that `design-system/product/product-roadmap.md` exists.
-- Output a confirmation message: "Design OS initialized! You can now open http://localhost:3000 to begin designing."
+- Output a confirmation message:
+
+"Design OS initialized! You can now open http://localhost:5400 to begin designing.
+
+**Recommended Next Steps:**
+1. Run `/teach-impeccable` — One-time setup to establish design context for this project.
+2. Run `/design-tokens` — Define your colors and typography.
+3. Run `/design-shell` — Design your navigation and layout.
+
+The Impeccable command system will guide you toward distinctive, AI-slop-free designs."

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

@@ -1,4 +1,4 @@
-# @builderos/agent-os-ui
+# @theproductguy/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).
@@ -6,19 +6,19 @@ Use this library to build the control interface that guides you through the Anti
 ## Installation
 
 ```bash
-npm install @builderos/agent-os-ui
+npm install @theproductguy/agent-os-ui
 ```
 
 ## Setup
 
 1. Import the styles:
 ```ts
-import '@builderos/agent-os-ui/style.css';
+import '@theproductguy/agent-os-ui/style.css';
 ```
 
 2. Build your Control Dashboard:
 ```tsx
-import { AgentShell, GuidanceCard } from '@builderos/agent-os-ui';
+import { AgentShell, GuidanceCard } from '@theproductguy/agent-os-ui';
 
 export function ControlCenter() {
   return (
@@ -48,7 +48,7 @@ export function ControlCenter() {
 ## Example Layout
 
 ```tsx
-import { AgentShell, AgentSidebar, ThemeToggle } from '@builderos/agent-os-ui';
+import { AgentShell, AgentSidebar, ThemeToggle } from '@theproductguy/agent-os-ui';
 import { Home, Layers } from 'lucide-react';
 
 export default function App() {

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

@@ -1,5 +1,5 @@
 {
-  "name": "@builderos/agent-os-ui",
+  "name": "@theproductguy/agent-os-ui",
   "version": "0.1.0",
   "type": "module",
   "main": "./dist/agent-os-ui.umd.cjs",

package/src/template/control-center/backend/index.js

@@ -125,9 +125,11 @@ app.get('/api/status', async (req, res) => {
 
         // Check for Design OS export and steps
         const designDir = path.join(PROJECT_ROOT, 'design-system');
-        // Note: In dev, these files are in design/public/product. In prod, injected elsewhere.
-        // But for this local dev setup, we check where the initialize-design command puts them?
-        // Actually, initialize-design puts them in `design/public/product`.
+
+        // QA Check
+        const qaDir = path.join(designDir, 'QA');
+        const auditReport = path.join(qaDir, 'audit-report.md');
+        const polishReport = path.join(qaDir, 'polish-report.md');
 
         const hasDesignExport = fs.existsSync(path.join(PROJECT_ROOT, 'product-plan'));
         const hasDesignInit = fs.existsSync(path.join(designDir, 'product/product-overview.md'));
@@ -146,6 +148,10 @@ app.get('/api/status', async (req, res) => {
                 exportPrompts: {
                     oneShot: fs.existsSync(path.join(PROJECT_ROOT, 'product-plan/prompts/one-shot-prompt.md')),
                     section: fs.existsSync(path.join(PROJECT_ROOT, 'product-plan/prompts/section-prompt.md'))
+                },
+                qa: {
+                    audit: fs.existsSync(auditReport),
+                    polish: fs.existsSync(polishReport)
                 }
             },
             implementation: {

package/src/template/control-center/frontend/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@builderos/agent-os-ui": "*",
+    "@theproductguy/agent-os-ui": "*",
     "@tailwindcss/typography": "^0.5.19",
     "axios": "^1.13.2",
     "clsx": "^2.1.1",

package/src/template/control-center/frontend/src/App.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import axios from 'axios';
-import { Layout, Monitor, Layers, FileText, Code, CheckSquare, RefreshCw, ArrowRight, X, Plus, Trash2, WalletCards, LayoutDashboard, Copy, Package } from 'lucide-react';
+import { Layout, Layers, FileText, Code, CheckSquare, RefreshCw, ArrowRight, X, Plus, Trash2, WalletCards, LayoutDashboard, Copy, Package } from 'lucide-react';
 import { useToast } from './components/ui/ToastContext';
-import { ThemeToggle } from '@builderos/agent-os-ui';
-import '@builderos/agent-os-ui/style.css';
+import { ThemeToggle } from '@theproductguy/agent-os-ui';
+import '@theproductguy/agent-os-ui/style.css';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkBreaks from 'remark-breaks';
@@ -39,6 +39,10 @@ interface ProjectState {
       oneShot: boolean;
       section: boolean;
     };
+    qa?: {
+      audit: boolean;
+      polish: boolean;
+    };
   };
   implementation: {
     scaffolded: boolean;
@@ -265,7 +269,7 @@ function App() {
     fetch('/runtime-config.json')
       .then(res => res.json())
       .then(config => { setRuntimeConfig(config); })
-      .catch(err => {
+      .catch(() => {
         setRuntimeConfig({
           api: 'http://localhost:5403',
           app: 'http://localhost:5402',
@@ -416,7 +420,7 @@ function App() {
                   <textarea
                     value={editContent}
                     onChange={(e) => setEditContent(e.target.value)}
-                    className="w-full h-full min-h-[500px] p-4 font-mono text-sm bg-secondary/10 border border-border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-primary/20"
+                    className="w-full h-full min-h-[500px] p-4 font-mono text-sm bg-secondary text-secondary-foreground border border-border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-primary/20"
                   />
                 ) : (
                   <article className="prose dark:prose-invert max-w-none prose-headings:font-serif prose-headings:font-semibold prose-a:text-primary prose-code:text-primary prose-pre:bg-secondary/50 prose-pre:border prose-pre:border-border prose-p:leading-relaxed prose-p:mb-4">
@@ -443,7 +447,7 @@ function App() {
                     <input
                       autoFocus
                       type="text"
-                      className="w-full px-3 py-2 rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      className="w-full px-3 py-2 rounded-md border border-input bg-secondary text-secondary-foreground text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                       placeholder="e.g. user-profile"
                       value={newSpecName}
                       onChange={(e) => setNewSpecName(e.target.value)}
@@ -646,6 +650,17 @@ function App() {
                   </div>
                 </div>
 
+                <div className="grid grid-cols-2 gap-2">
+                  <div className={`p-2 rounded-lg border text-center ${state?.design?.qa?.audit ? 'bg-emerald-50/50 border-emerald-200 text-emerald-700 dark:bg-emerald-900/20 dark:border-emerald-800 dark:text-emerald-300' : 'bg-secondary/20 border-border/50 text-muted-foreground'}`}>
+                    <span className="text-xs font-medium block mb-1">Audit</span>
+                    {state?.design?.qa?.audit ? <CheckSquare size={14} className="mx-auto" /> : <span className="block w-2 h-2 rounded-full bg-stone-300 mx-auto mt-1" />}
+                  </div>
+                  <div className={`p-2 rounded-lg border text-center ${state?.design?.qa?.polish ? 'bg-emerald-50/50 border-emerald-200 text-emerald-700 dark:bg-emerald-900/20 dark:border-emerald-800 dark:text-emerald-300' : 'bg-secondary/20 border-border/50 text-muted-foreground'}`}>
+                    <span className="text-xs font-medium block mb-1">Polish</span>
+                    {state?.design?.qa?.polish ? <CheckSquare size={14} className="mx-auto" /> : <span className="block w-2 h-2 rounded-full bg-stone-300 mx-auto mt-1" />}
+                  </div>
+                </div>
+
                 <div className="flex items-center justify-between p-3 bg-secondary/30 rounded-lg border border-border/50">
                   <span className="text-foreground font-medium text-sm flex items-center gap-2"><ArrowRight size={16} className="text-muted-foreground" /> Export</span>
                   {state?.design?.exported ? (
@@ -658,7 +673,7 @@ function App() {
                 </div>
               </div>
 
-              <div className="mt-6 flex gap-2">
+              <div className="mt-6 flex flex-col gap-2">
                 {!state?.design?.initialized && (
                   <PromptButton
                     label="Sync Data"
@@ -667,6 +682,22 @@ function App() {
                     primary
                   />
                 )}
+                {state?.design?.initialized && !state?.design?.exported && (
+                  <div className="flex gap-2">
+                    <PromptButton
+                      label="Run Audit"
+                      prompt="Antigravity, run an audit on the design system. Read 'design-system/.gemini/commands/impeccable/audit.md'."
+                      onClick={copyToClipboard}
+                      small
+                    />
+                    <PromptButton
+                      label="Run Polish"
+                      prompt="Antigravity, run a polish pass. Read 'design-system/.gemini/commands/impeccable/polish.md'."
+                      onClick={copyToClipboard}
+                      small
+                    />
+                  </div>
+                )}
               </div>
             </section>
 
@@ -691,14 +722,20 @@ function App() {
               </div>
 
               <div className="mt-6">
-                <PromptButton
-                  label="Scaffold App"
-                  prompt="Antigravity, scaffold the implementation. Read 'agent-os/commands/scaffold-implementation/scaffold-implementation.md'."
-                  onClick={copyToClipboard}
-                />
+                {!state?.implementation?.scaffolded ? (
+                  <PromptButton
+                    label="Scaffold App"
+                    prompt="Antigravity, scaffold the implementation. Read 'agent-os/commands/scaffold-implementation/scaffold-implementation.md'."
+                    onClick={copyToClipboard}
+                  />
+                ) : (
+                  <div className="p-3 bg-secondary/30 rounded-lg border border-border/50 text-sm text-muted-foreground text-center italic mb-4">
+                    App scaffolded. Ready for implementation.
+                  </div>
+                )}
 
                 {state?.implementation?.scaffolded && state?.design?.exportPrompts?.oneShot && (
-                  <div className="mt-3 pt-3 border-t border-border/50">
+                  <div className="pt-3 border-t border-border/50">
                     <p className="text-xs text-muted-foreground mb-2 font-medium">Implementation Options:</p>
                     <div className="space-y-2">
                       <PromptButton
@@ -709,12 +746,17 @@ function App() {
                         primary
                       />
                       {state?.design?.exportPrompts?.section && (
-                        <PromptButton
-                          label="Option B: Incremental (Section)"
-                          prompt={`Antigravity, implement a section. Read 'product-plan/prompts/section-prompt.md'.`}
-                          onClick={copyToClipboard}
-                          small
-                        />
+                        <div className="relative">
+                          <PromptButton
+                            label="Option B: Incremental (Section)"
+                            prompt={`Antigravity, implement a section. Read 'product-plan/prompts/section-prompt.md'.`}
+                            onClick={copyToClipboard}
+                            small
+                          />
+                          <p className="text-[10px] text-muted-foreground mt-1.5 text-center leading-tight">
+                            Build feature-by-feature using the <strong>Feature Specs</strong> list &rarr;
+                          </p>
+                        </div>
                       )}
                     </div>
                   </div>
@@ -776,39 +818,56 @@ function App() {
                   </div>
                 ))}
 
+                {/* Pending Roadmap Items */}
                 {/* Pending Roadmap Items */}
                 {state?.product?.roadmap?.items?.filter(item =>
                   !item.completed &&
                   !state?.product?.roadmap?.isBoilerplate &&
-                  !state?.specs?.some(s => s.name.toLowerCase() === item.name.toLowerCase().trim().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, ''))
+                  !state?.specs?.some(s => s.name.toLowerCase().includes(item.name.toLowerCase().trim().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '')))
                 ).map(item => (
                   <div key={item.name} className="border border-dashed border-border/60 p-4 rounded-lg bg-secondary/5 hover:bg-secondary/10 transition-colors">
-                    <h3 className="font-medium text-base mb-2 flex items-center gap-2 text-muted-foreground">
-                      <div className="w-2 h-2 rounded-full bg-stone-300" />
-                      {item.name}
-                    </h3>
-                    <p className="text-xs text-muted-foreground mb-4 pl-4">Pending in Roadmap</p>
+                    <div className="flex justify-between items-start mb-2">
+                      <h3 className="font-medium text-base flex items-center gap-2 text-muted-foreground w-full">
+                        <div className="w-2 h-2 rounded-full bg-stone-300 shrink-0" />
+                        <span className="truncate" title={item.name}>{item.name}</span>
+                      </h3>
+                      <span className="text-[10px] uppercase tracking-wider font-semibold text-muted-foreground bg-secondary px-1.5 py-0.5 rounded shrink-0 ml-2">Planned</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground mb-4 pl-4 opacity-70">
+                      Defined in Product Roadmap. Ready to spec.
+                    </p>
                     <div className="pl-4">
                       <button
                         onClick={() => {
-                          setNewSpecName(item.name.toLowerCase().replace(/\s+/g, '-'));
+                          setNewSpecName(item.name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, ''));
                           setCreatingSpec(true);
                         }}
-                        className="text-xs bg-background hover:bg-secondary border border-border px-3 py-1.5 rounded-md flex items-center gap-1.5 font-medium transition cursor-pointer"
+                        className="text-xs bg-background hover:bg-secondary border border-border px-3 py-1.5 rounded-md flex items-center gap-1.5 font-medium transition cursor-pointer w-full justify-center group"
                       >
-                        <Plus size={12} /> Shape Spec
+                        <Plus size={12} className="group-hover:text-primary transition-colors" /> Shape Spec
                       </button>
                     </div>
                   </div>
                 ))}
 
-                {state?.specs?.length === 0 && (!state?.product?.roadmap?.items || state?.product?.roadmap?.items?.length === 0) && (
-                  <div className="text-muted-foreground italic p-8 text-center text-sm border border-dashed border-border rounded-lg bg-secondary/10">
-                    No specs found yet.<br />Create one to start coding.
+                {/* Empty State */}
+                {(!state?.specs?.length && (!state?.product?.roadmap?.items?.length || state?.product?.roadmap?.isBoilerplate)) && (
+                  <div className="border border-dashed border-border/60 p-8 rounded-lg text-center h-40 flex flex-col items-center justify-center">
+                    <p className="text-muted-foreground text-sm mb-3">No specs found yet.</p>
+                    <button
+                      onClick={() => setCreatingSpec(true)}
+                      className="text-sm px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+                    >
+                      Create your first spec
+                    </button>
                   </div>
                 )}
+
+
               </div>
             </section>
+
+
           </main>
         </div>
       </div>