@atlashub/smartstack-cli 1.14.0 → 1.14.2

package/templates/skills/gitflow/steps/step-start.md

@@ -152,20 +152,100 @@ git checkout "$BASE_BRANCH" && git pull origin "$BASE_BRANCH"
 git checkout -b "$FULL_BRANCH"
 ```
 
-### 7. Create Local DB Config (.NET)
+### 7. Create Local Environment Config (Backend + Frontend)
 
-**If `appsettings.json` detected:**
+**Detect project structure:**
 ```bash
+# Find API project directory
+API_DIR=$(find "$WORKTREE_PATH" -type d -name "*.Api" -path "*/src/*" | head -1)
+# Find Web project directory
+WEB_DIR=$(find "$WORKTREE_PATH" -type d -name "*-web" -path "*/web/*" | head -1)
+
+# Generate unique ports based on branch name hash (to avoid conflicts between worktrees)
+HASH=$(echo "$BRANCH_NAME" | md5sum | cut -c1-4)
+HASH_NUM=$((16#$HASH % 100))
+API_PORT=$((5200 + HASH_NUM))
+WEB_PORT=$((5300 + HASH_NUM))
+
+# Project and DB naming
 PROJECT_NAME=$(basename $(pwd) | tr '[:upper:]' '[:lower:]')
-DB_NAME="${PROJECT_NAME}_${branch_type}_${BRANCH_NAME}" | cut -c1-63
+DB_NAME=$(echo "${PROJECT_NAME}_${branch_type}_${BRANCH_NAME}" | cut -c1-63)
+```
+
+#### 7a. Backend: appsettings.Local.json
 
-cat > "$WORKTREE_PATH/appsettings.Local.json" << EOF
+**If API project detected:**
+```bash
+[ -n "$API_DIR" ] && [ -f "$API_DIR/appsettings.json" ] && {
+  cat > "$API_DIR/appsettings.Local.json" << EOF
 {
   "ConnectionStrings": {
     "DefaultConnection": "Server=localhost;Database=${DB_NAME};Trusted_Connection=true;TrustServerCertificate=true"
+  },
+  "Authentication": {
+    "FrontendUrl": "http://localhost:${WEB_PORT}"
+  },
+  "Kestrel": {
+    "Endpoints": {
+      "Http": {
+        "Url": "http://localhost:${API_PORT}"
+      }
+    }
+  },
+  "Serilog": {
+    "MinimumLevel": {
+      "Default": "Debug"
+    }
   }
 }
 EOF
+  echo "Created: $API_DIR/appsettings.Local.json (DB: $DB_NAME, Port: $API_PORT)"
+}
+```
+
+#### 7b. Frontend: .env.local + npm script
+
+**If Web project detected:**
+```bash
+[ -n "$WEB_DIR" ] && [ -f "$WEB_DIR/package.json" ] && {
+  # Create .env.local
+  cat > "$WEB_DIR/.env.local" << EOF
+# Local environment configuration
+# Generated by /gitflow:start for branch: ${FULL_BRANCH}
+# Run with: npm run local
+
+VITE_API_URL=http://localhost:${API_PORT}
+VITE_APP_ENV=local
+VITE_DEBUG=true
+EOF
+  echo "Created: $WEB_DIR/.env.local (API: localhost:$API_PORT)"
+
+  # Add "local" script to package.json if not exists
+  if ! grep -q '"local"' "$WEB_DIR/package.json"; then
+    # Use Node.js to safely modify package.json
+    node -e "
+      const fs = require('fs');
+      const pkg = JSON.parse(fs.readFileSync('$WEB_DIR/package.json', 'utf8'));
+      if (!pkg.scripts.local) {
+        pkg.scripts.local = 'vite --mode local --port ${WEB_PORT}';
+        fs.writeFileSync('$WEB_DIR/package.json', JSON.stringify(pkg, null, 2) + '\n');
+        console.log('Added script: npm run local');
+      }
+    "
+  fi
+}
+```
+
+#### 7c. Summary of local config
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  LOCAL ENVIRONMENT CONFIGURED                               │
+├─────────────────────────────────────────────────────────────┤
+│  Database:  ${DB_NAME}                                      │
+│  API Port:  ${API_PORT}  →  dotnet run --environment Local  │
+│  Web Port:  ${WEB_PORT}  →  npm run local                   │
+└─────────────────────────────────────────────────────────────┘
 ```
 
 ### 8. Store State
@@ -178,7 +258,14 @@ EOF
   "base_branch": "{BASE_BRANCH}",
   "target_branch": "{TARGET}",
   "worktree_path": "{WORKTREE_PATH}",
-  "version_current": "{VERSION}"
+  "version_current": "{VERSION}",
+  "local_config": {
+    "database": "{DB_NAME}",
+    "api_port": "{API_PORT}",
+    "web_port": "{WEB_PORT}",
+    "api_dir": "{API_DIR}",
+    "web_dir": "{WEB_DIR}"
+  }
 }
 ```
 
@@ -193,18 +280,29 @@ EOF
 ║  Target:   {TARGET}                                               ║
 ║  Worktree: {WORKTREE_PATH}                                        ║
 ╠══════════════════════════════════════════════════════════════════╣
+║  LOCAL ENVIRONMENT:                                               ║
+║  Database: {DB_NAME}                                              ║
+║  API:      http://localhost:{API_PORT}                            ║
+║  Web:      http://localhost:{WEB_PORT}                            ║
+╠══════════════════════════════════════════════════════════════════╣
 ║  NEXT STEPS:                                                      ║
 ║                                                                    ║
 ║  1. Go to worktree:                                               ║
 ║     cd {WORKTREE_PATH}                                            ║
 ║                                                                    ║
-║  2. Make changes and commit:                                      ║
+║  2. Start local environment:                                      ║
+║     # Terminal 1 - Backend:                                       ║
+║     cd src/SmartStack.Api && dotnet run --environment Local       ║
+║     # Terminal 2 - Frontend:                                      ║
+║     cd web/smartstack-web && npm run local                        ║
+║                                                                    ║
+║  3. Make changes and commit:                                      ║
 ║     /gitflow commit                                               ║
 ║                                                                    ║
-║  3. Create pull request:                                          ║
+║  4. Create pull request:                                          ║
 ║     /gitflow pr                                                   ║
 ║                                                                    ║
-║  4. After PR merged, finalize:                                    ║
+║  5. After PR merged, finalize:                                    ║
 ║     /gitflow finish                                               ║
 ╚══════════════════════════════════════════════════════════════════╝
 ```
@@ -226,7 +324,9 @@ EOF
 
 - Branch created from correct base
 - Worktree set up (if enabled)
-- Local config created (if .NET)
+- Backend local config created: `appsettings.Local.json` (if .NET API detected)
+- Frontend local config created: `.env.local` + `npm run local` script (if web project detected)
+- Ports synchronized between backend and frontend (unique per branch)
 - State stored for subsequent steps
 
 ## NEXT STEP:

package/templates/skills/ui-components/SKILL.md

@@ -70,12 +70,12 @@ import { EntityCard, ProviderCard, TemplateCard } from '@/components/ui/EntityCa
 | `links` | `Array<{ icon, label, href?, onClick? }>` |
 | `actions` | `Array<{ label, href?, onClick?, variant, icon?, disabled? }>` |
 
-### Action Variants
+### Action Variants (EntityCard)
 | Variant | Style |
 |---------|-------|
-| `primary` | `bg-accent-500 text-white` |
-| `secondary` | `bg-accent-700 text-white` |
-| `ghost` | `border bg-transparent` |
+| `primary` | `bg-[var(--color-accent-600)] text-white` |
+| `secondary` | `bg-[var(--bg-secondary)] text-[var(--text-secondary)]` |
+| `ghost` | `text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]` (NO border!) |
 
 ## RESPONSIVE GRID
 
@@ -159,12 +159,174 @@ const canExecute = hasPermission('module.action.execute');
 | Catalogs | Cards with complex interactive states |
 | Clickable grids | Cards with integrated forms |
 
+## CRITICAL: CSS VARIABLES (NEVER HARDCODE COLORS)
+
+**NEVER use hardcoded Tailwind colors.** ALWAYS use CSS variables for theme compliance.
+
+### Status Colors
+| Status | Background | Text | Border | Dot (solid) |
+|--------|------------|------|--------|-------------|
+| **Info** (Pending, Business) | `--info-bg` | `--info-text` | `--info-border` | `--info-dot` |
+| **Success** (Active) | `--success-bg` | `--success-text` | `--success-border` | `--success-dot` |
+| **Warning** (Suspended, Owner) | `--warning-bg` | `--warning-text` | `--warning-border` | `--warning-dot` |
+| **Error** (Danger, Archive) | `--error-bg` | `--error-text` | `--error-border` | `--error-dot` |
+| **Accent** (Personal, Primary) | `--accent-bg` | `--accent-text` | `--accent-border` | `--color-accent-500` |
+
+### Badge Pattern
+```tsx
+// ✅ CORRECT - Uses CSS variables
+<span className="px-2 py-0.5 text-xs rounded-[var(--radius-badge)] bg-[var(--info-bg)] text-[var(--info-text)]">
+  Info Badge
+</span>
+
+// ❌ WRONG - Hardcoded Tailwind colors
+<span className="bg-blue-500/10 text-blue-500">Info Badge</span>
+```
+
+### Status Config Pattern
+```tsx
+// ✅ CORRECT
+const STATUS_CONFIG = {
+  Pending: { bgColor: 'bg-[var(--info-bg)]', color: 'text-[var(--info-text)]', borderColor: 'border-[var(--info-border)]' },
+  Active: { bgColor: 'bg-[var(--success-bg)]', color: 'text-[var(--success-text)]', borderColor: 'border-[var(--success-border)]' },
+  Suspended: { bgColor: 'bg-[var(--warning-bg)]', color: 'text-[var(--warning-text)]', borderColor: 'border-[var(--warning-border)]' },
+  Archived: { bgColor: 'bg-[var(--bg-tertiary)]', color: 'text-[var(--text-tertiary)]', borderColor: 'border-[var(--border-color)]' }
+};
+
+// ❌ WRONG - dark: variants are obsolete
+const STATUS_CONFIG = {
+  Active: { bgColor: 'bg-emerald-50 dark:bg-emerald-900/20', ... }
+};
+```
+
+## BUTTON VARIANTS
+
+### Action Buttons (Status changes)
+```tsx
+// Success action (Activate)
+<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--success-dot)] text-white hover:opacity-90">
+  Activate
+</button>
+
+// Warning action (Suspend)
+<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--warning-dot)] text-white hover:opacity-90">
+  Suspend
+</button>
+
+// Danger action (Archive/Delete)
+<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--error-dot)] text-white hover:opacity-90">
+  Archive
+</button>
+
+// Primary action
+<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] text-white hover:bg-[var(--color-accent-700)]">
+  Save
+</button>
+
+// Ghost action (NO BORDER!)
+<button className="px-4 py-2 rounded-[var(--radius-button)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]">
+  Refresh
+</button>
+
+// Secondary action
+<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]">
+  Cancel
+</button>
+```
+
+### Button Rules
+| Variant | Background | Text | Border | Hover |
+|---------|------------|------|--------|-------|
+| **Primary** | `--color-accent-600` | `white` | none | `--color-accent-700` |
+| **Success** | `--success-dot` | `white` | none | `opacity-90` |
+| **Warning** | `--warning-dot` | `white` | none | `opacity-90` |
+| **Danger** | `--error-dot` | `white` | none | `opacity-90` |
+| **Secondary** | `--bg-secondary` | `--text-secondary` | none | `--bg-hover` |
+| **Ghost** | transparent | `--text-secondary` | **NONE** | `--bg-hover` |
+
+## DETAIL PAGE TEMPLATE
+
+### Structure
+```tsx
+<div className="container mx-auto px-4 py-6 max-w-7xl space-y-6">
+  {/* Header */}
+  <div className="flex items-center gap-4">
+    <button onClick={() => navigate(-1)} className="p-2 rounded-[var(--radius-button)] hover:bg-[var(--bg-hover)]">
+      <ArrowLeft className="w-5 h-5 text-[var(--text-secondary)]" />
+    </button>
+    <div className="flex-1">
+      <h1 className="text-xl sm:text-2xl font-bold text-[var(--text-primary)]">{title}</h1>
+      <p className="text-sm text-[var(--text-secondary)]">{subtitle}</p>
+    </div>
+    <div className="flex items-center gap-2">
+      {/* Status badges */}
+    </div>
+  </div>
+
+  {/* Pill Tabs */}
+  <div className="flex gap-1 p-1 bg-[var(--bg-secondary)] rounded-[var(--radius-card)] border border-[var(--border-color)]">
+    {tabs.map(tab => (
+      <button
+        key={tab.id}
+        className={`px-4 py-2 rounded-[var(--radius-button)] font-medium ${
+          activeTab === tab.id
+            ? 'bg-[var(--color-accent-600)] text-white'
+            : 'text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]'
+        }`}
+      >
+        {tab.label}
+      </button>
+    ))}
+  </div>
+
+  {/* Tab Content */}
+  <div className="min-h-[400px]">{/* ... */}</div>
+</div>
+```
+
+### Info Card Pattern
+```tsx
+<div className="p-4 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)]">
+  <div className="flex items-center justify-between mb-4">
+    <h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center gap-2">
+      <Icon className="w-5 h-5" />
+      {title}
+    </h3>
+    <button className="flex items-center gap-1 px-3 py-1.5 rounded-[var(--radius-button)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]">
+      <Edit3 className="w-4 h-4" />
+      {t('common:edit')}
+    </button>
+  </div>
+  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+    <div className="p-3 rounded-lg bg-[var(--bg-secondary)]">
+      <p className="text-xs text-[var(--text-tertiary)] uppercase tracking-wider mb-1">{label}</p>
+      <p className="text-sm text-[var(--text-primary)] font-medium">{value}</p>
+    </div>
+  </div>
+</div>
+```
+
+### Error Display Pattern
+```tsx
+{error && (
+  <div className="p-4 rounded-[var(--radius-card)] bg-[var(--error-bg)] border border-[var(--error-border)]">
+    <div className="flex items-center gap-2 text-[var(--error-text)]">
+      <AlertTriangle className="w-5 h-5" />
+      <span>{error}</span>
+    </div>
+  </div>
+)}
+```
+
 ## ABSOLUTE RULES
 
 | DO | DON'T |
 |----|-------|
+| CSS variables for ALL colors | Hardcoded Tailwind colors (`bg-blue-500`) |
+| `--success-dot`, `--warning-dot`, `--error-dot` for action buttons | `bg-emerald-500`, `bg-amber-500`, `bg-red-500` |
+| `--info-bg`, `--success-bg`, etc. for badges | `bg-blue-500/10 dark:bg-blue-900/20` |
+| Ghost buttons WITHOUT border | `border border-[var(--border-color)]` on ghost |
 | EntityCard for entities | Custom cards with manual divs |
-| Distinct colored header | rounded-full for avatar (that's table) |
 | Responsive grid 1→2→3→4 | Fixed non-responsive grid |
 | h-full + flex-1 + mt-auto | Unaligned buttons in grid |
 | Empty and loading states | Native HTML tooltip |

package/templates/commands/gitflow/OPTIMIZATIONS.md

@@ -1,206 +0,0 @@
-# GitFlow Optimizations - Resume
-
-> **Date:** 2026-01-20
-> **Objectif:** Reduire le temps d'execution des commandes GitFlow de ~70%
-
----
-
-## Optimisations Implementees
-
-### 1. Fonctions Partagees (`_shared.md`)
-
-**Fichier cree:** `templates/commands/gitflow/_shared.md`
-
-Centralise les fonctions reutilisables pour eviter la duplication:
-
-| Fonction | Usage | Gain |
-|----------|-------|------|
-| `get_current_branch()` | Detection robuste de branche | ~66% |
-| `get_version_info()` | Version + tags en 1 appel | ~75% |
-| `get_sync_status()` | Statut sync local/remote | ~70% |
-| `collect_repo_data_parallel()` | Collecte parallele | ~60-70% |
-| `read_gitflow_config()` | Config avec cache | ~90% |
-| `detect_worktree_mode()` | Detection auto structure | Fiabilite |
-| `get_worktree_path()` | Chemin worktree standard | Consistance |
-
----
-
-### 2. Parallelisation Git (`2-status.md`, `10-start.md`, `11-finish.md`)
-
-**Avant:**
-```bash
-# Sequentiel - ~8 secondes
-git fetch --all
-git for-each-ref refs/heads
-git for-each-ref refs/remotes
-git for-each-ref refs/tags
-git worktree list
-git branch -vv
-git status
-# + boucles for pour chaque branche
-```
-
-**Apres:**
-```bash
-# Parallele - ~2 secondes
-{
-  git for-each-ref refs/heads > /tmp/local &
-  git for-each-ref refs/remotes > /tmp/remote &
-  git for-each-ref refs/tags > /tmp/tags &
-  git worktree list > /tmp/worktrees &
-  git status --porcelain > /tmp/status &
-  wait
-}
-```
-
-**Gain:** ~70% du temps de collecte
-
----
-
-### 3. Mode Fast (`2-status.md`)
-
-**Nouveau:** `/gitflow:status --fast`
-
-Output compact en ~1 seconde:
-```
-[develop] clean | v1.5.0 | dev->main:+5 | main->dev:+0 | sync:UP-TO-DATE
--> /gitflow:start release (5 commits prets)
-```
-
----
-
-### 4. Consolidation des Questions (`10-start.md`)
-
-**Avant:** 6+ `AskUserQuestion` sequentiels
-- Type de branche
-- Divergence main (release)
-- Migrations EF Core (release)
-- Version (release)
-- Nom de branche
-- Working directory dirty
-
-**Apres:** 1-2 questions maximum
-- Question unique avec options dynamiques
-- Execution directe si arguments fournis
-
-**Gain:** ~70% du temps d'interaction
-
----
-
-### 5. Optimisation des Agents
-
-| Agent | Avant | Apres | Raison |
-|-------|-------|-------|--------|
-| `gitflow-finish` | sonnet | **haiku** | Actions predefinies |
-| `gitflow-commit` | sonnet | **haiku** | Validation simple |
-| `gitflow-exec` | sonnet | sonnet | Gestion conflits complexe |
-| `gitflow-status` | haiku | haiku | OK |
-| `gitflow-start` | haiku | haiku | OK |
-| `gitflow-pr` | haiku | haiku | OK |
-
-**Gain latence:** ~30-50% pour les agents optimises
-
----
-
-## Gains Totaux par Commande
-
-| Commande | Avant | Apres | Gain |
-|----------|-------|-------|------|
-| `/gitflow:status` | ~8-12s | ~2-3s | **~70%** |
-| `/gitflow:status --fast` | N/A | ~1s | **Nouveau** |
-| `/gitflow:start` (interactif) | ~25s | ~8s | **~65%** |
-| `/gitflow:start feature xxx` | ~15s | ~5s | **~65%** |
-| `/gitflow:finish` | ~15s | ~5s | **~65%** |
-| `/gitflow:commit` | ~8s | ~4s | **~50%** |
-
----
-
-## Principes Appliques
-
-### 1. Collecte Avant Affichage
-- Executer TOUTES les commandes git AVANT de generer l'output
-- Utiliser des fichiers temporaires ou variables pour stocker
-
-### 2. Parallelisation Aggressive
-- Utiliser `&` et `wait` pour les commandes independantes
-- Limiter le parallelisme avec `wait -n` si necessaire
-
-### 3. Single-Pass Parsing
-- Parser les donnees une seule fois
-- Stocker en memoire pour reutilisation
-
-### 4. Cache des Donnees Frequentes
-- Config GitFlow (variable globale)
-- Tags Git (valide pendant la session)
-- Version (calculee une fois)
-
-### 5. Questions Minimales
-- Consolider les questions en 1-2 appels
-- Utiliser les arguments directs quand possible
-- Options dynamiques basees sur le contexte
-
-### 6. Modeles Adaptes
-- **haiku** pour les taches simples/predefinies
-- **sonnet** uniquement pour le raisonnement complexe
-
----
-
-## Fichiers Modifies
-
-```
-templates/commands/gitflow/
-  _shared.md          # NOUVEAU - Fonctions partagees
-  2-status.md         # Parallelisation + mode fast
-  10-start.md         # Consolidation questions
-  11-finish.md        # Parallelisation scan + haiku
-  OPTIMIZATIONS.md    # NOUVEAU - Cette documentation
-
-templates/agents/gitflow/
-  finish.md           # sonnet -> haiku
-  commit.md           # sonnet -> haiku
-```
-
----
-
-## Compatibilite
-
-**Aucun breaking change:**
-- Les commandes gardent la meme interface
-- Les options existantes fonctionnent
-- Nouveaux modes (`--fast`) sont optionnels
-
----
-
-## Tests Recommandes
-
-1. `/gitflow:status` - Verifier temps < 3s
-2. `/gitflow:status --fast` - Verifier temps < 1s
-3. `/gitflow:start feature test` - Verifier temps < 5s
-4. `/gitflow:start` (interactif) - Verifier 1-2 questions max
-5. `/gitflow:finish` - Verifier scan parallele
-
----
-
-## Metriques de Suivi
-
-Pour mesurer les performances:
-
-```bash
-# Temps d'execution
-time /gitflow:status
-
-# Avec mode fast
-time /gitflow:status --fast
-
-# Creation directe
-time /gitflow:start feature test-perf --no-worktree
-```
-
----
-
-## Ameliorations Futures Possibles
-
-1. **Cache persistant** - Stocker tags/config entre sessions
-2. **Pre-fetch** - Fetch en background au demarrage
-3. **Incremental status** - Ne collecter que les changements
-4. **Batch PR checks** - API GitHub/Azure en batch