@theproductguy/create-mission-control 1.0.4 → 1.0.6

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

@@ -136,6 +136,53 @@ app.get('/api/status', async (req, res) => {
         const hasTokens = fs.existsSync(path.join(designDir, 'product/design-system/colors.json'));
         const hasShell = fs.existsSync(path.join(designDir, 'product/shell/spec.md'));
 
+        // Implementation tracking
+        const appDir = path.join(PROJECT_ROOT, 'app');
+        const hasScaffold = fs.existsSync(path.join(APP_DIR, 'src/lib/utils.ts'));
+
+        // Check for test files
+        const testFiles = glob.sync('**/*.{test,spec}.{ts,tsx,js,jsx}', { cwd: appDir, ignore: ['node_modules/**'] });
+        const hasTests = testFiles.length > 0;
+
+        // Check for coverage report
+        const coverageDir = path.join(PROJECT_ROOT, 'coverage');
+        const coverageSummary = path.join(coverageDir, 'coverage-summary.json');
+        let coveragePercent = null;
+        if (fs.existsSync(coverageSummary)) {
+            try {
+                const coverage = JSON.parse(fs.readFileSync(coverageSummary, 'utf-8'));
+                if (coverage.total && coverage.total.lines) {
+                    coveragePercent = Math.round(coverage.total.lines.pct);
+                }
+            } catch (e) {
+                // Ignore parsing errors
+            }
+        }
+
+        // Check git status
+        let gitInfo = { initialized: false, branch: null, uncommitted: 0, lastCommit: null };
+        const gitDir = path.join(PROJECT_ROOT, '.git');
+        if (fs.existsSync(gitDir)) {
+            gitInfo.initialized = true;
+            try {
+                const { execSync } = require('child_process');
+                gitInfo.branch = execSync('git rev-parse --abbrev-ref HEAD', { cwd: PROJECT_ROOT, encoding: 'utf-8' }).trim();
+                const status = execSync('git status --porcelain', { cwd: PROJECT_ROOT, encoding: 'utf-8' });
+                gitInfo.uncommitted = status.split('\n').filter(l => l.trim()).length;
+                try {
+                    gitInfo.lastCommit = execSync('git log -1 --pretty=format:"%s"', { cwd: PROJECT_ROOT, encoding: 'utf-8' }).trim();
+                } catch (e) {
+                    // No commits yet
+                }
+            } catch (e) {
+                // Git commands failed
+            }
+        }
+
+        // Check for linked specs
+        const specsWithTasks = specs.filter(s => s.tasks.exists && s.tasks.total > 0);
+        const specsCompleted = specs.filter(s => s.tasks.exists && s.tasks.completed === s.tasks.total && s.tasks.total > 0);
+
         res.json({
             product: productFiles,
             services,
@@ -155,7 +202,17 @@ app.get('/api/status', async (req, res) => {
                 }
             },
             implementation: {
-                scaffolded: fs.existsSync(path.join(APP_DIR, 'src/lib/utils.ts'))
+                scaffolded: hasScaffold,
+                tests: {
+                    count: testFiles.length,
+                    hasTests
+                },
+                coverage: coveragePercent,
+                specs: {
+                    total: specsWithTasks.length,
+                    completed: specsCompleted.length
+                },
+                git: gitInfo
             },
             specs,
             projectRoot: PROJECT_ROOT

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import axios from 'axios';
-import { Layout, 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, Play } from 'lucide-react';
 import { useToast } from './components/ui/ToastContext';
 import { ThemeToggle } from '@theproductguy/agent-os-ui';
 import '@theproductguy/agent-os-ui/style.css';
@@ -46,6 +46,21 @@ interface ProjectState {
   };
   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?: {
@@ -130,19 +145,33 @@ function StatusItem({ label, status, icon, small, onClick }: any) {
 }
 
 function PromptButton({ label, prompt, onClick, small, primary }: any) {
+  const deepLink = `vscode://vscode.executeCommand/workbench.action.chat.open?query=${encodeURIComponent(prompt)}`;
+
   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-primary hover:bg-primary/90 text-primary-foreground shadow-sm'
-          : 'bg-background hover:bg-secondary border border-border text-foreground hover:text-foreground'}
-          `}
-    >
-      <Copy size={small ? 12 : 14} />
-      {label}
-    </button>
+    <div className={`flex gap-1 items-center ${!small ? 'w-full' : 'flex-1'}`}>
+      <button
+        onClick={() => onClick(prompt)}
+        className={`flex items-center justify-center gap-2 rounded-lg font-medium transition cursor-pointer flex-1
+              ${small ? 'px-3 py-1.5 text-xs' : 'px-4 py-2 text-sm'}
+              ${primary
+            ? 'bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm'
+            : 'bg-background hover:bg-secondary border border-border text-foreground hover:text-foreground'}
+            `}
+      >
+        <Copy size={small ? 12 : 14} />
+        {label}
+      </button>
+
+      <a
+        href={deepLink}
+        className={`flex items-center justify-center rounded-lg border border-border bg-secondary hover:bg-secondary/80 text-foreground transition
+          ${small ? 'w-8 h-[30px]' : 'w-10 h-[38px]'}
+        `}
+        title="Run in IDE (Deep Link)"
+      >
+        <Play size={small ? 12 : 14} fill="currentColor" className="opacity-70" />
+      </a>
+    </div>
   )
 }
 
@@ -701,77 +730,14 @@ function App() {
               </div>
             </section>
 
-            {/* Phase 3: Implementation */}
-            <section className="bg-card border border-border rounded-xl p-5 shadow-sm h-full flex flex-col transition-all hover:shadow-md hover:border-border/80">
-              <div className="flex items-center gap-3 mb-5 pb-4 border-b border-border/50">
-                <div className="p-2 bg-sidebar-primary/10 text-sidebar-primary rounded-lg">
-                  <Package size={20} />
-                </div>
-                <h2 className="text-lg font-semibold">3. Implementation</h2>
-              </div>
-
-              <div className="space-y-4 flex-1">
-                <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"><Layout size={16} className="text-muted-foreground" /> Scaffold</span>
-                  {state?.implementation?.scaffolded ? (
-                    <span className="text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 px-2 py-0.5 rounded text-xs font-medium border border-emerald-200 dark:border-emerald-800">Done</span>
-                  ) : (
-                    <span className="text-muted-foreground bg-secondary px-2 py-0.5 rounded text-xs font-medium border border-border">Pending</span>
-                  )}
-                </div>
-              </div>
-
-              <div className="mt-6">
-                {!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="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
-                        label="Option A: One-Shot (All)"
-                        prompt={`Antigravity, implement the app. Read 'product-plan/prompts/one-shot-prompt.md'.`}
-                        onClick={copyToClipboard}
-                        small
-                        primary
-                      />
-                      {state?.design?.exportPrompts?.section && (
-                        <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>
-                )}
-              </div>
-            </section>
-
-            {/* Phase 4: Specs & Implementation */}
+            {/* Phase 3: Feature Specs */}
             <section className="bg-card border border-border rounded-xl p-5 shadow-sm col-span-1 md:col-span-2 lg:col-span-1 h-full flex flex-col transition-all hover:shadow-md hover:border-border/80">
               <div className="flex items-center justify-between mb-5 pb-4 border-b border-border/50">
                 <div className="flex items-center gap-3">
                   <div className="p-2 bg-sidebar-primary/10 text-sidebar-primary rounded-lg">
                     <Code size={20} />
                   </div>
-                  <h2 className="text-lg font-semibold">4. Feature Specs</h2>
+                  <h2 className="text-lg font-semibold">3. Feature Specs</h2>
                 </div>
                 <button className="text-xs bg-secondary hover:bg-secondary/80 border border-border px-3 py-2 rounded-md flex items-center gap-1.5 font-medium transition cursor-pointer"
                   onClick={() => setCreatingSpec(true)}>
@@ -780,6 +746,24 @@ function App() {
               </div>
 
               <div className="space-y-3 flex-1 overflow-y-auto max-h-[300px] pr-1">
+                {/* Auto-generate from Roadmap after Design Export */}
+                {(state?.product?.roadmap?.items?.filter(item =>
+                  !item.completed &&
+                  !state?.product?.roadmap?.isBoilerplate
+                ) ?? []).length > 0 && !state?.specs?.length && (
+                    <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 p-4 rounded-lg mb-3">
+                      <p className="text-sm text-blue-700 dark:text-blue-300 mb-2">
+                        Ready to generate specs from roadmap items?
+                      </p>
+                      <PromptButton
+                        label="Generate All Specs"
+                        prompt={`Antigravity, generate feature specs from the roadmap items. For each item in 'agent-os/product/roadmap.md' that is not yet completed, create a spec folder in 'agent-os/specs/[feature-name]/' with spec.md and tasks.md files. Context: 1. Read 'product-plan/product-overview.md' for data model/flows. 2. Read 'design-system/design-tokens.md' and 'design-system/app-shell.md' for UI/UX constraints. 3. Use the shape-spec command: Read 'agent-os/commands/shape-spec/shape-spec.md'.`}
+                        onClick={copyToClipboard}
+                        small
+                        primary
+                      />
+                    </div>
+                  )}
                 {state?.specs?.map(spec => (
                   <div key={spec.name} className="bg-secondary/20 p-4 rounded-lg border border-border/50 hover:border-border transition-colors group relative">
                     <button
@@ -867,6 +851,132 @@ function App() {
               </div>
             </section>
 
+            {/* Phase 4: Implementation */}
+            <section className="bg-card border border-border rounded-xl p-5 shadow-sm h-full flex flex-col transition-all hover:shadow-md hover:border-border/80">
+              <div className="flex items-center gap-3 mb-5 pb-4 border-b border-border/50">
+                <div className="p-2 bg-sidebar-primary/10 text-sidebar-primary rounded-lg">
+                  <Package size={20} />
+                </div>
+                <h2 className="text-lg font-semibold">4. Implementation</h2>
+              </div>
+
+              <div className="space-y-3 flex-1">
+                {/* Scaffold Status */}
+                <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"><Layout size={16} className="text-muted-foreground" /> Scaffold</span>
+                  {state?.implementation?.scaffolded ? (
+                    <span className="text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 px-2 py-0.5 rounded text-xs font-medium border border-emerald-200 dark:border-emerald-800">Done</span>
+                  ) : (
+                    <span className="text-muted-foreground bg-secondary px-2 py-0.5 rounded text-xs font-medium border border-border">Pending</span>
+                  )}
+                </div>
+
+                {/* Git Status */}
+                {state?.implementation?.git?.initialized && (
+                  <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">
+                      <svg className="w-4 h-4 text-muted-foreground" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /></svg>
+                      {state.implementation.git.branch || 'main'}
+                    </span>
+                    <div className="flex items-center gap-2">
+                      {state.implementation.git.uncommitted > 0 && (
+                        <span className="text-amber-600 bg-amber-50 dark:bg-amber-900/20 px-2 py-0.5 rounded text-xs font-medium border border-amber-200 dark:border-amber-800">
+                          {state.implementation.git.uncommitted} uncommitted
+                        </span>
+                      )}
+                      {state.implementation.git.uncommitted === 0 && (
+                        <span className="text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 px-2 py-0.5 rounded text-xs font-medium border border-emerald-200 dark:border-emerald-800">Clean</span>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {/* Tests & Coverage */}
+                {state?.implementation?.scaffolded && (
+                  <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">
+                      <CheckSquare size={16} className="text-muted-foreground" /> Tests
+                    </span>
+                    <div className="flex items-center gap-2">
+                      {state?.implementation?.tests?.hasTests ? (
+                        <span className="text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 px-2 py-0.5 rounded text-xs font-medium border border-emerald-200 dark:border-emerald-800">
+                          {state.implementation.tests.count} files
+                        </span>
+                      ) : (
+                        <span className="text-muted-foreground bg-secondary px-2 py-0.5 rounded text-xs font-medium border border-border">No tests</span>
+                      )}
+                      {state?.implementation?.coverage !== null && state?.implementation?.coverage !== undefined && (
+                        <span className={`px-2 py-0.5 rounded text-xs font-medium border ${state.implementation.coverage >= 80
+                          ? 'text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-800'
+                          : state.implementation.coverage >= 50
+                            ? 'text-amber-600 bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800'
+                            : 'text-red-600 bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800'
+                          }`}>
+                          {state.implementation.coverage}% coverage
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {/* Spec Progress */}
+                {state?.implementation?.specs && state.implementation.specs.total > 0 && (
+                  <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">
+                      <FileText size={16} className="text-muted-foreground" /> Specs
+                    </span>
+                    <span className={`px-2 py-0.5 rounded text-xs font-medium border ${state.implementation.specs.completed === state.implementation.specs.total
+                      ? 'text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-800'
+                      : 'text-blue-600 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
+                      }`}>
+                      {state.implementation.specs.completed}/{state.implementation.specs.total} complete
+                    </span>
+                  </div>
+                )}
+              </div>
+
+              <div className="mt-6">
+                {!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="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
+                        label="Option A: One-Shot (All)"
+                        prompt={`Antigravity, implement the app. Read 'product-plan/prompts/one-shot-prompt.md'. If Context7 is configured, use it to verify library documentation.`}
+                        onClick={copyToClipboard}
+                        small
+                        primary
+                      />
+                      {state?.design?.exportPrompts?.section && (
+                        <div className="relative">
+                          <PromptButton
+                            label="Option B: Incremental (Section)"
+                            prompt={`Antigravity, implement a section. Read 'product-plan/prompts/section-prompt.md'. Use Context7 for latest docs if available.`}
+                            onClick={copyToClipboard}
+                            small
+                          />
+                          <p className="text-[10px] text-muted-foreground mt-1.5 text-center leading-tight">
+                            Build by spec from <strong>Feature Specs</strong> &larr;
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </section>
 
           </main>
         </div>

package/src/template/design-system/.gemini/hooks/ai-slop-guard.md

@@ -0,0 +1,80 @@
+# Hook: AI Slop Guard
+
+## Purpose
+Warn when code or design patterns that indicate generic AI-generated output are detected.
+
+## Trigger
+- PreToolUse: Before writing to CSS/TSX/HTML files
+- PreCommit: Before committing changes
+
+## Patterns to Watch For
+
+### Typography Slop
+- ⚠️ `font-family: 'Inter'` — Generic AI default font
+- ⚠️ `font-family: 'Roboto'` — Overused AI choice
+- ⚠️ `font-family: 'Open Sans'` — Too common
+- ⚠️ `font-family: 'Poppins'` — AI favorite
+
+### Color Slop
+- ⚠️ `#808080` or `gray` — Dead gray
+- ⚠️ `#cccccc`, `#dddddd` — Lifeless neutral
+- ⚠️ `#f5f5f5` — The AI background color
+- ⚠️ Pure `#000000` or `#ffffff` — No warmth
+- ⚠️ `#3b82f6` or `#2563eb` — Everyone's blue
+
+### Layout Slop
+- ⚠️ Cards in cards — Nested containers
+- ⚠️ Hero with centered h1 + subtitle + CTA — The AI template
+- ⚠️ 3-column feature grid — Overused pattern
+- ⚠️ Centered everything — Lazy alignment
+
+### Effect Slop
+- ⚠️ `backdrop-filter: blur(10px)` — Glassmorphism default
+- ⚠️ `border-radius: 12px` — The AI corner radius
+- ⚠️ `box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1)` — Tailwind default
+
+### Animation Slop
+- ⚠️ `transition: all` — Lazy animation
+- ⚠️ `animate-bounce` — Generic micro-interaction
+- ⚠️ `animate-pulse` — Loading skeleton overuse
+
+### Copy Slop
+- ⚠️ "Streamline your workflow" — Generic SaaS copy
+- ⚠️ "Unlock the power of" — AI cliché
+- ⚠️ "Seamlessly integrate" — Meaningless buzzword
+- ⚠️ "Best-in-class" — Tells nothing
+
+## Response When Detected
+
+```
+⚠️ AI Slop Guard Warning
+
+Detected potentially generic AI patterns:
+- [Pattern name]: [File:Line]
+
+Consider:
+1. Running `/audit` to get specific recommendations
+2. Consulting the frontend-design skill for alternatives
+3. Using `/bolder` if design is too safe
+
+Continue anyway? [y/N]
+```
+
+## Configuration
+Users can customize in `.gemini/settings.json`:
+```json
+{
+  "hooks": {
+    "ai-slop-guard": {
+      "enabled": true,
+      "strictness": "medium",  // low, medium, high
+      "ignore": ["Inter"]      // Patterns to ignore
+    }
+  }
+}
+```
+
+## Notes
+- This is a warning, not a blocker
+- Some patterns are acceptable in context
+- The goal is awareness, not restriction

package/src/template/design-system/.gemini/hooks/on-design-complete.md

@@ -0,0 +1,63 @@
+# Hook: On Design Complete
+
+## Purpose
+Automatically run quality checks when a design phase is completed.
+
+## Trigger
+After completing:
+- `/design-tokens`
+- `/design-shell`
+- `/design-screen`
+
+## Actions
+
+### 1. Run Auto-Audit
+Execute a mini-audit focusing on the just-completed work:
+
+**After `/design-tokens`:**
+- Check for AI slop fonts
+- Verify color hierarchy exists
+- Ensure contrast ratios meet WCAG AA
+- Validate color format consistency
+
+**After `/design-shell`:**
+- Check for AI slop layout patterns
+- Verify touch targets (44x44 minimum)
+- Check spacing consistency
+- Validate responsive breakpoints
+
+**After `/design-screen`:**
+- Full component audit
+- Accessibility check
+- Performance impact assessment
+
+### 2. Generate Report
+Save audit results to `design-system/QA/[phase]-audit.md`
+
+### 3. Suggest Next Steps
+Based on audit results:
+- If issues found: Suggest specific fix commands
+- If clean: Suggest next phase
+
+## Output Format
+
+```
+✅ Design phase completed!
+
+Auto-audit results:
+├── Accessibility: ✓ Pass
+├── Typography: ⚠️ 1 warning (consider font alternatives)
+├── Colors: ✓ Pass
+└── Layout: ✓ Pass
+
+Suggestions:
+- Run `/critique` for UX evaluation
+- Continue to `/design-shell` when ready
+
+Full report: design-system/QA/tokens-audit.md
+```
+
+## Notes
+- This hook runs automatically, no user action needed
+- Reports accumulate, so you can see progress over time
+- Hook can be disabled in settings if desired

package/src/template/eslint.config.js

@@ -0,0 +1,37 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+    { ignores: ['dist', 'node_modules', 'coverage', '.next', 'build'] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            'react-refresh/only-export-components': [
+                'warn',
+                { allowConstantExport: true },
+            ],
+            // Strict TypeScript rules
+            '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+            '@typescript-eslint/no-explicit-any': 'warn',
+            '@typescript-eslint/explicit-function-return-type': 'off',
+            '@typescript-eslint/explicit-module-boundary-types': 'off',
+            // Best practices
+            'no-console': ['warn', { allow: ['warn', 'error'] }],
+            'prefer-const': 'error',
+            'no-var': 'error',
+        },
+    },
+)

package/src/template/lint-staged.config.js

@@ -0,0 +1,6 @@
+export default {
+    '*.{ts,tsx}': ['eslint --fix', 'prettier --write'],
+    '*.{js,jsx,cjs,mjs}': ['eslint --fix', 'prettier --write'],
+    '*.{json,md,yml,yaml}': ['prettier --write'],
+    '*.css': ['prettier --write'],
+}

package/src/template/package.json

@@ -19,9 +19,32 @@
         "start:control": "cd control-center/frontend && npm run dev -- --port 5401",
         "start:app": "cd app && npm run dev -- --port 5402",
         "build": "npm run build --workspaces",
-        "test": "npm run test --workspaces"
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "test:coverage": "vitest run --coverage",
+        "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
+        "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
+        "format": "prettier --write .",
+        "format:check": "prettier --check .",
+        "typecheck": "tsc --noEmit",
+        "prepare": "husky"
     },
     "devDependencies": {
-        "concurrently": "^8.2.2"
+        "@commitlint/cli": "^19.0.0",
+        "@commitlint/config-conventional": "^19.0.0",
+        "@eslint/js": "^9.0.0",
+        "@types/node": "^20.11.0",
+        "@vitest/coverage-v8": "^2.0.0",
+        "concurrently": "^8.2.2",
+        "eslint": "^9.0.0",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-refresh": "^0.4.0",
+        "globals": "^15.0.0",
+        "husky": "^9.0.0",
+        "lint-staged": "^15.0.0",
+        "prettier": "^3.2.0",
+        "prettier-plugin-tailwindcss": "^0.6.0",
+        "typescript-eslint": "^8.0.0",
+        "vitest": "^2.0.0"
     }
 }

package/src/template/src/__tests__/example.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+
+describe('Example Test Suite', () => {
+    it('should pass a basic test', () => {
+        expect(1 + 1).toBe(2)
+    })
+
+    it('should handle strings', () => {
+        expect('hello world').toContain('world')
+    })
+
+    it('should handle arrays', () => {
+        const items = [1, 2, 3]
+        expect(items).toHaveLength(3)
+        expect(items).toContain(2)
+    })
+})

package/src/template/src/__tests__/setup.ts

@@ -0,0 +1,14 @@
+import '@testing-library/jest-dom/vitest'
+
+// Global test setup
+beforeAll(() => {
+    // Setup code that runs before all tests
+})
+
+afterEach(() => {
+    // Cleanup after each test
+})
+
+afterAll(() => {
+    // Cleanup code that runs after all tests
+})