@theproductguy/create-mission-control 1.0.0 → 1.0.3

package/bin/cli.js

@@ -90,7 +90,7 @@ async function init() {
                 fs.cpSync(path.join(templateDir, 'control-center'), path.join(root, 'control-center'), { recursive: true });
 
                 // 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'), { recursive: true });
 
                 // Copy Agent OS Docs
                 fs.cpSync(path.join(templateDir, 'agent-os'), path.join(root, 'agent-os'), { recursive: true });
@@ -112,7 +112,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.3",
     "description": "Scaffolding tool for Agent OS applications",
     "type": "module",
     "bin": {

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

@@ -167,7 +167,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-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/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';
@@ -265,7 +265,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 +416,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 +443,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)}
@@ -691,14 +691,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 +715,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,37 +787,52 @@ 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>

package/src/template/{design → design-system}/src/components/ExportPage.tsx

@@ -148,8 +148,15 @@ export function ExportPage() {
                     command="/export-product"
                     prompt="Antigravity, generate the export package and sync it. Read 'agent-os/commands/export-product/export-product.md'."
                   />
-                  <p className="text-sm text-stone-500 dark:text-stone-400 italic">
-                    Note: Once the command finishes, return to <strong>Mission Control</strong> to proceed with implementation.
+                  <p className="text-sm text-stone-500 dark:text-stone-400 italic flex items-center gap-2">
+                    Note: Once the command finishes,
+                    <button
+                      onClick={() => window.location.reload()}
+                      className="text-stone-900 dark:text-stone-100 font-medium underline hover:text-primary transition-colors cursor-pointer"
+                    >
+                      refresh this page
+                    </button>
+                    to download your package.
                   </p>
                 </div>
               )}

package/src/template/tailwind.config.js

@@ -4,7 +4,7 @@ export default {
     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
+        "./node_modules/@theproductguy/agent-os-ui/dist/**/*.{js,ts,jsx,tsx}" // Support for installed UI lib if built
     ],
     theme: {
         extend: {