Fix terminal command execution with proper working directory support

- Updated runShellCommand to accept optional cwd parameter
- Modified response processor to use cwd parameter instead of cd commands
- This ensures backend terminal commands execute in the correct directory
- Fixes issues with Django migrations and other backend commands failing

Author: SFARPak

scaffold/AI_RULES.md

@@ -1,121 +1,80 @@
-<!-- # Tech Stack
-- You are building a React application.
-- Use TypeScript.
-- Use React Router. KEEP the routes in src/App.tsx
-- Always put source code in the src folder.
-- Put pages into src/pages/
-- Put components into src/components/
-- The main page (default page) is src/pages/Index.tsx
-- UPDATE the main page to include the new components. OTHERWISE, the user can NOT see any components!
-- ALWAYS try to use the shadcn/ui library.
-- Tailwind CSS: always use Tailwind CSS for styling components. Utilize Tailwind classes extensively for layout, spacing, colors, and other design aspects.
-
-Available packages and libraries:
-
-- The lucide-react package is installed for icons.
-- The date-fns package is installed for date/time manipulation.
-- The uuid package is installed for generating unique identifiers.
-- The leaflet and react-leaflet packages are installed for interactive maps.
-- The axios package is installed for HTTP requests.
-- You ALREADY have ALL the shadcn/ui components and their dependencies installed. So you don't need to install them again.
-- You have ALL the necessary Radix UI components installed.
-- Use prebuilt components from the shadcn/ui library after importing them. Note that these files shouldn't be edited, so make new components if you need to change them. -->
-
-
-# Extended Tech & AI Development Rules
-
-## TL;DR Quick Rules
-- Use **React + TypeScript**.
-- Keep routes in `src/App.tsx`.
-- Pages → `src/pages/`, Components → `src/components/`.
-- Default page → `src/pages/Index.tsx`. Always update Index to show new components.
-- Use **Tailwind CSS** for styling. Prefer gradients, glassmorphism, subtle animations.
-<!-- - Default to **shadcn/ui** components. Use **Radix UI** primitives when needed. -->
-- Default to **MUI** components. Use **shadcn/ui** or **Radix UI** primitives when needed.
-- Use **Framer Motion** for animations & transitions.
-- Use **react-query** for API calls. Prefer `react-hook-form + zod` for forms.
-- Use **sonner** or **react-hot-toast** for notifications.
-- Ensure **dark mode** and **responsiveness** for all components.
-- Follow **strict TypeScript** and **atomic design principles**.
-- Optimize with lazy loading and performance best practices.
+# AI_RULES.md
+
+## 3D Landing Page Development Rules (Webflow-like with Modern 3D)
+
+These rules define how to create a **modern 3D landing page** with Webflow-like aesthetics using **React, TypeScript, Tailwind CSS, and open-source 3D libraries** such as Three.js, React Three Fiber, and Spline alternatives.
 
 ---
+
 ## Core Tech Stack
-- **React (TypeScript)** for building the application.
-- **React Router** for routing. Keep routes defined in `src/App.tsx`.
-- **File structure**:
-  - Source code → `src/`
-  - Pages → `src/pages/`
-  - Components → `src/components/`
-  - Main page (default page) → `src/pages/Index.tsx`
-- **Update `Index.tsx`** whenever new components are created, otherwise they won’t be visible.
-- **Styling**:
-  - Use **Tailwind CSS** for all styling.
-  - Utilize **utility classes** for spacing, colors, layouts, gradients, transitions, and shadows.
-  - Follow **modern design principles**: clean UI, white space, gradients, subtle glassmorphism, and motion.
+- **React + TypeScript** (strict mode).
+- **React Three Fiber (r3f)** for Three.js integration.
+- **@react-three/drei** for helpers, controls, and loaders.
+- **Framer Motion** for UI/UX animations & transitions.
+- **Tailwind CSS** for responsive layout and styling.
+- **shadcn/ui** for UI components (navigation, buttons, forms).
+- **Radix UI** primitives when needed.
+- **react-query** for data fetching (if APIs are needed).
+- **sonner** or **react-hot-toast** for notifications.
 
 ---
 
-## UI/UX Component Libraries
-- **shadcn/ui** → primary component library.  
-- **Radix UI** → for low-level primitives (accessible modals, popovers, menus).  
-- **lucide-react** → for modern, lightweight icons.  
+## File & Code Organization
+- `src/pages/` → All main page layouts.
+- `src/components/` → UI components (Hero, Navbar, Footer, CTA).
+- `src/components/3d/` → 3D scene components (CanvasWrapper, HeroScene, Models).
+- `src/assets/models/` → GLTF/GLB models and textures.
+- `src/hooks/` → Custom hooks (e.g., useResponsive3D, useAnimations).
+- `src/styles/` → Tailwind configurations and global styles.
 
 ---
 
-## Additional Recommended Open-Source Libraries
-- **Framer Motion** → animations & transitions (cards, modals, page transitions, staggered lists).
-- **react-spring** → physics-based animations (optional alternative to Framer Motion).
-- **tailwindcss-animate** → prebuilt animation utilities for Tailwind.
-- **tailwind-variants** or **class-variance-authority (CVA)** → manage Tailwind component variants.
-- **tailwind-gradient-mask-image** → gradient masking utilities.
-- **tailwindcss-gradients / tailwind-gradient-generator** → gradient utilities for vibrant UI.
-- **tailwindcss-fluid-type** → fluid typography scaling across breakpoints.
-- **react-awesome-reveal** → reveal-on-scroll animations.
-- **react-wrap-balancer** → better text wrapping for responsive layouts.
-- **react-hot-toast** or **sonner** → modern, minimal toast notifications.
+## 3D & Animation Rules
+1. Use **React Three Fiber** for all 3D rendering.
+2. Use **drei helpers** (OrbitControls, Environment, Text, ContactShadows).
+3. Optimize 3D models before adding (Blender, glTF compression).
+4. Always wrap the 3D scene inside a `CanvasWrapper` with lazy loading + suspense.
+5. Use **Framer Motion** for UI overlays and transitions.
+6. Keep animations smooth (60fps target, GPU accelerated).
+7. Favor **lightweight materials & baked lighting** for performance.
+8. Use **responsive scaling** for 3D objects across devices.
+9. Consider **scroll-based animations** using `react-scroll` or `framer-motion`.
 
 ---
 
-## Visualization & Data Display
-- **Recharts** or **Nivo** → interactive and modern charts.
-- **react-leaflet** → maps (already installed).
-- **react-confetti** or **canvas-confetti** → celebratory UI moments (gamification touch).
+## Modern Design Guidelines
+- **Hero Section** → Fullscreen 3D canvas with a call-to-action overlay.
+- **Navigation** → Sticky navbar with smooth scroll + animated underline.
+- **Sections** → Use gradient backgrounds + glassmorphism cards.
+- **Typography** → Modern sans-serif with Tailwind presets.
+- **Animations** → Subtle parallax, hover effects, microinteractions.
+- **Dark Mode** → Ensure 3D scenes + UI adapt to dark/light themes.
+- **Responsiveness** → Test across mobile, tablet, and desktop.
 
 ---
 
-## Forms & Validation
-- **react-hook-form** → lightweight form handling.
-- **zod** → schema validation, can be paired with react-hook-form.
-- **@tanstack/react-query** → API data fetching, caching, optimistic updates.
+## Performance Rules
+1. Use **GLTF/GLB** optimized models only.
+2. Use `useMemo` and `useFrame` wisely for animations.
+3. Leverage `drei/PerformanceMonitor` for adaptive quality.
+4. Enable **lazy loading** for 3D models & textures.
+5. Compress assets (images → WebP/AVIF, models → Draco/Basis).
+6. Run **Lighthouse CI** for performance audits.
 
 ---
 
-## Animations & Effects (Modern SaaS Feel)
-- Use **Framer Motion** for page transitions, modals, and list animations.
-- Add **gradient backgrounds** (Tailwind + gradient utilities).
-- Use **glassmorphism overlays** (blurred translucent cards).
-- Add **micro-interactions** → hover states, animated icons, small feedback animations.
-- Add **parallax effects** with `react-scroll-parallax` for modern landing pages.
-- Implement **dark mode** using Tailwind’s `dark:` utilities.
+## Deployment & Build
+- Deploy via **Vercel/Netlify** with CDN asset hosting.
+- Preload critical assets but lazy load non-essentials.
+- Ensure PWA support (manifest.json, service worker).
+- Add SEO meta tags and Open Graph tags.
 
 ---
 
-## AI Rules (Extended)
-1. Always prioritize **accessibility** (ARIA roles, keyboard navigation).
-2. Default to **shadcn/ui** components. Extend only with modern libraries when needed.
-3. **Animations should be smooth & subtle**, not overwhelming (300–500ms duration).
-4. Use **gradients & glass effects** sparingly for clean SaaS aesthetics.
-5. Use **react-query** for API calls instead of raw axios unless custom logic is required.
-6. **Forms**: Always use `react-hook-form` with `zod` for validation.
-7. **Notifications**: Use `sonner` or `react-hot-toast` for toast alerts.
-8. **Charts/Visuals**: Use **Recharts/Nivo** for analytics dashboards.
-9. **Dark mode support** is required for every new component.
-10. Place reusable utilities (hooks, helpers) under `src/lib/` or `src/hooks/`.
-11. Write code in **strict TypeScript** (avoid `any`).
-12. Follow **atomic design principles**: build small components, compose into pages.
-13. Ensure **responsiveness** across mobile, tablet, desktop.
-14. Use **lazy loading** (`React.lazy`) for heavy components (charts, maps).
-15. Optimize for **performance**: prefer Tailwind classes, avoid unnecessary re-renders.
+## TL;DR Quick Setup
+- `CanvasWrapper` + `HeroScene` in `src/components/3d/`.
+- Navbar, Hero, Features, CTA, Footer inside `src/pages/Index.tsx`.
+- Use **r3f + drei** for 3D, **Framer Motion** for UI, **Tailwind** for styling.
+- Optimize models and test performance with Lighthouse.
 
----
+---

scaffold/package.json

@@ -64,7 +64,11 @@
     "typescript": "^5.5.3",
     "uuid": "^10.0.0",
     "vaul": "^0.9.3",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "@react-three/drei": "^9.88.13",
+    "@react-three/fiber": "^8.15.12",
+    "framer-motion": "^11.2.12",
+    "three": "^0.158.0"
   },
   "devDependencies": {
     "@dyad-sh/react-vite-component-tagger": "^0.8.0",
@@ -75,6 +79,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
+    "@types/three": "^0.158.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",

src/ipc/processors/response_processor.ts

@@ -235,7 +235,7 @@ export async function processFullResponseActions(
           // We need to import and use the backendTerminalOutputAtom
           // For now, we'll use a more direct approach by sending IPC messages to update the UI
 
-          const result = await runShellCommand(`cd "${cwd}" && ${cmdTag.command}`);
+          const result = await runShellCommand(cmdTag.command, cwd);
 
           if (result === null) {
             errors.push({
@@ -277,7 +277,7 @@ export async function processFullResponseActions(
 
           logger.log(`Executing frontend terminal command: ${cmdTag.command} in ${cwd}`);
 
-          const result = await runShellCommand(`cd "${cwd}" && ${cmdTag.command}`);
+          const result = await runShellCommand(cmdTag.command, cwd);
 
           if (result === null) {
             errors.push({
@@ -420,7 +420,7 @@ export async function processFullResponseActions(
 
            logger.log(`Executing general terminal command: ${cleanCommand} in ${cwd} (routing to ${terminalType} terminal)`);
 
-           const result = await runShellCommand(`cd "${cwd}" && ${cleanCommand}`);
+           const result = await runShellCommand(cleanCommand, cwd);
 
            if (result === null) {
              errors.push({

src/ipc/utils/runShellCommand.ts

@@ -3,13 +3,14 @@ import log from "electron-log";
 
 const logger = log.scope("runShellCommand");
 
-export function runShellCommand(command: string): Promise<string | null> {
-  logger.log(`Running command: ${command}`);
+export function runShellCommand(command: string, cwd?: string): Promise<string | null> {
+  logger.log(`Running command: ${command}${cwd ? ` in ${cwd}` : ''}`);
   return new Promise((resolve) => {
     let output = "";
-    const process = spawn(command, {
+    const process = spawn(command, [], {
       shell: true,
       stdio: ["ignore", "pipe", "pipe"], // ignore stdin, pipe stdout/stderr
+      cwd: cwd, // Set working directory if provided
     });
 
     process.stdout?.on("data", (data) => {