achira-wf 3.1.0

package/.agent/workflows/react+vite.md

@@ -0,0 +1,280 @@
+---
+description: Scaffold a mature, scalable React + Vite project with Absolute Imports, React Router, and a Service-oriented architecture.
+---
+
+// turbo-all
+
+## 1. Create the Vite project
+
+```
+npx -y create-vite@latest ./ --template react
+```
+
+## 2. Install scalable architecture dependencies
+
+```
+npm install axios lucide-react react-router-dom
+npm install -D eslint prettier eslint-config-prettier vitest @testing-library/react @testing-library/jest-dom jsdom
+```
+
+## 3. Configure Absolute Imports (@)
+
+### vite.config.js
+
+```javascript
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { fileURLToPath, URL } from "node:url";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: "./src/test/setup.js",
+  },
+});
+```
+
+### jsconfig.json
+
+Add this to the project root so VS Code resolves `@/` imports:
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
+```
+
+## 4. Create directory structure
+
+```
+mkdir src/pages src/components src/layouts src/hooks src/services src/utils src/globals src/styles src/test
+```
+
+## 5. Global CSS Architecture
+
+### src/globals/variables.css
+
+```css
+:root {
+  --color-primary: #6366f1;
+  --color-bg: #ffffff;
+  --color-text: #0f172a;
+  --transition-default: all 0.2s ease;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #0f172a;
+    --color-text: #f8fafc;
+  }
+}
+```
+
+### src/globals/reset.css
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+}
+body {
+  font-family: system-ui;
+  background: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.6;
+}
+img {
+  max-width: 100%;
+  display: block;
+}
+button {
+  cursor: pointer;
+}
+```
+
+### src/globals/globals.css
+
+```css
+@import "./variables.css";
+@import "./reset.css";
+```
+
+## 6. Layout & Router Setup
+
+### src/layouts/MainLayout.jsx
+
+```jsx
+export default function MainLayout({ children }) {
+  return <div className="main-layout">{children}</div>;
+}
+```
+
+### src/router.jsx
+
+```jsx
+import { createBrowserRouter } from "react-router-dom";
+import Home from "@/pages/Home/Home";
+
+export const router = createBrowserRouter([{ path: "/", element: <Home /> }]);
+```
+
+### src/main.jsx
+
+```jsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider } from "react-router-dom";
+import { router } from "./router";
+import "./globals/globals.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+);
+```
+
+## 7. Folder Philosophy Pattern
+
+### src/pages/Home/Home.jsx
+
+```jsx
+import "./Home.css";
+import MainLayout from "@/layouts/MainLayout";
+
+export default function Home() {
+  return (
+    <MainLayout>
+      <div className="home-page">
+        <h1>Home</h1>
+      </div>
+    </MainLayout>
+  );
+}
+```
+
+### src/pages/Home/Home.css
+
+```css
+.home-page {
+  padding: 2rem;
+}
+```
+
+## 8. Services Layer
+
+### src/services/apiClient.js
+
+```javascript
+import axios from "axios";
+import { API_BASE_URL } from "@/globals/config";
+
+export const apiClient = axios.create({ baseURL: API_BASE_URL });
+```
+
+## 9. Environment setup
+
+### .env.example
+
+```
+VITE_APP_ENV=development
+VITE_API_URL=
+VITE_ENABLE_ANALYTICS=false
+```
+
+### src/globals/config.js
+
+```javascript
+export const APP_NAME = "Achira Project";
+export const API_BASE_URL = import.meta.env.VITE_API_URL || "";
+```
+
+## 10. Testing Setup
+
+### src/test/setup.js
+
+```javascript
+import "@testing-library/jest-dom";
+```
+
+### src/pages/Home/Home.test.jsx
+
+```jsx
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import Home from "./Home";
+
+describe("Home", () => {
+  it("renders the heading", () => {
+    render(<Home />);
+    expect(screen.getByText("Home")).toBeInTheDocument();
+  });
+});
+```
+
+Add this to `package.json` scripts:
+
+```json
+"scripts": {
+  "test": "vitest"
+}
+```
+
+## 11. Linter & Formatter Config
+
+### .eslintrc.cjs
+
+```javascript
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+    "prettier",
+  ],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "detect" } },
+  rules: {
+    "react/prop-types": "off",
+  },
+};
+```
+
+### .prettierrc
+
+```json
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100
+}
+```
+
+## 12. Clean up & Execute
+
+- Remove `src/App.css`, `src/index.css`, `src/App.jsx`.
+- Run `npm run dev`.

package/.agent/workflows/status.md

@@ -0,0 +1,86 @@
+---
+description: Display agent and project status. Progress tracking and status board.
+---
+
+# /status - Show Status
+
+$ARGUMENTS
+
+---
+
+## Task
+
+Show current project and agent status.
+
+### What It Shows
+
+1. **Project Info**
+   - Project name and path
+   - Tech stack
+   - Current features
+
+2. **Agent Status Board**
+   - Which agents are running
+   - Which tasks are completed
+   - Pending work
+
+3. **File Statistics**
+   - Files created count
+   - Files modified count
+
+4. **Preview Status**
+   - Is server running
+   - URL
+   - Health check
+
+---
+
+## Example Output
+
+```
+=== Project Status ===
+
+📁 Project: my-ecommerce
+📂 Path: C:/projects/my-ecommerce
+🏷️ Type: nextjs-ecommerce
+📊 Status: active
+
+🔧 Tech Stack:
+   Framework: next.js
+   Database: postgresql
+   Auth: clerk
+   Payment: stripe
+
+✅ Features (5):
+   • product-listing
+   • cart
+   • checkout
+   • user-auth
+   • order-history
+
+⏳ Pending (2):
+   • admin-panel
+   • email-notifications
+
+📄 Files: 73 created, 12 modified
+
+=== Agent Status ===
+
+✅ database-architect → Completed
+✅ backend-specialist → Completed
+🔄 frontend-specialist → Dashboard components (60%)
+⏳ test-engineer → Waiting
+
+=== Preview ===
+
+🌐 URL: http://localhost:3000
+💚 Health: OK
+```
+
+---
+
+## Technical
+
+Status uses these scripts:
+- `python .achira/scripts/session_manager.py status`
+- `python .achira/scripts/auto_preview.py status`

package/.agent/workflows/test.md

@@ -0,0 +1,144 @@
+---
+description: Test generation and test running command. Creates and executes tests for code.
+---
+
+# /test - Test Generation and Execution
+
+$ARGUMENTS
+
+---
+
+## Purpose
+
+This command generates tests, runs existing tests, or checks test coverage.
+
+---
+
+## Sub-commands
+
+```
+/test                - Run all tests
+/test [file/feature] - Generate tests for specific target
+/test coverage       - Show test coverage report
+/test watch          - Run tests in watch mode
+```
+
+---
+
+## Behavior
+
+### Generate Tests
+
+When asked to test a file or feature:
+
+1. **Analyze the code**
+   - Identify functions and methods
+   - Find edge cases
+   - Detect dependencies to mock
+
+2. **Generate test cases**
+   - Happy path tests
+   - Error cases
+   - Edge cases
+   - Integration tests (if needed)
+
+3. **Write tests**
+   - Use project's test framework (Jest, Vitest, etc.)
+   - Follow existing test patterns
+   - Mock external dependencies
+
+---
+
+## Output Format
+
+### For Test Generation
+
+```markdown
+## 🧪 Tests: [Target]
+
+### Test Plan
+| Test Case | Type | Coverage |
+|-----------|------|----------|
+| Should create user | Unit | Happy path |
+| Should reject invalid email | Unit | Validation |
+| Should handle db error | Unit | Error case |
+
+### Generated Tests
+
+`tests/[file].test.ts`
+
+[Code block with tests]
+
+---
+
+Run with: `npm test`
+```
+
+### For Test Execution
+
+```
+🧪 Running tests...
+
+✅ auth.test.ts (5 passed)
+✅ user.test.ts (8 passed)
+❌ order.test.ts (2 passed, 1 failed)
+
+Failed:
+  ✗ should calculate total with discount
+    Expected: 90
+    Received: 100
+
+Total: 15 tests (14 passed, 1 failed)
+```
+
+---
+
+## Examples
+
+```
+/test src/services/auth.service.ts
+/test user registration flow
+/test coverage
+/test fix failed tests
+```
+
+---
+
+## Test Patterns
+
+### Unit Test Structure
+
+```typescript
+describe('AuthService', () => {
+  describe('login', () => {
+    it('should return token for valid credentials', async () => {
+      // Arrange
+      const credentials = { email: 'test@test.com', password: 'pass123' };
+      
+      // Act
+      const result = await authService.login(credentials);
+      
+      // Assert
+      expect(result.token).toBeDefined();
+    });
+
+    it('should throw for invalid password', async () => {
+      // Arrange
+      const credentials = { email: 'test@test.com', password: 'wrong' };
+      
+      // Act & Assert
+      await expect(authService.login(credentials)).rejects.toThrow('Invalid credentials');
+    });
+  });
+});
+```
+
+---
+
+## Key Principles
+
+- **Test behavior not implementation**
+- **One assertion per test** (when practical)
+- **Descriptive test names**
+- **Arrange-Act-Assert pattern**
+- **Mock external dependencies**