back onto dev

* re-introduce project sync

* refactor: streamline media deletion logic in useMediaBin hook

* refactor: enhance path security and streamline file handling in timeline and video render modules

* feat: enhance AI functionality + ChatBox with context menu and  utilities

* feat: integrate zod validation

* chore: update environment configuration and Docker settings

* chore: update frontend server port in nginx configuration

* feat: left pannel bar

* Bump react-router from 7.7.1 to 7.12.0

Bumps [react-router](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router) from 7.7.1 to 7.12.0.
- [Release notes](https://github.com/remix-run/react-router/releases)
- [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router/CHANGELOG.md)
- [Commits](https://github.com/remix-run/react-router/commits/react-router@7.12.0/packages/react-router)

---
updated-dependencies:
- dependency-name: react-router
  dependency-version: 7.12.0
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>

* Merge canary into main: path security, Zod validation, AI enhancements, infra updates (#180)

* Initial plan

* Fix 4 Polynomial ReDoS vulnerabilities in backend/main.py regexes

Co-authored-by: sr2echa <65058816+sr2echa@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sr2echa <65058816+sr2echa@users.noreply.github.com>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: sr2echa <65058816+sr2echa@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>

Author: 4 people

.cursorrules

@@ -0,0 +1,75 @@
+# Cursor Rules for Kimu Video Editor
+
+project:
+  name: "Kimu Video Editor"
+  language: "TypeScript/React (React Router) + Python FastAPI"
+  package_manager: pnpm
+
+conventions:
+  - Prefer central Zod schemas in app/schemas/**; do not define inline schemas in components or routes.
+  - Always validate external boundaries: AI responses, API inputs/outputs, localStorage, drag-and-drop payloads.
+  - Keep UI components presentational; move parsing/validation to hooks or route loaders/actions when possible.
+  - Use named exports and barrel files under app/schemas for discoverability.
+
+imports:
+  zod:
+    source: "zod"
+    identifier: "z"
+  schemas:
+    source: "~/schemas"
+
+editor:
+  formatting:
+    - Match existing indentation and code style.
+    - Avoid reformatting unrelated code during edits.
+  typescript:
+    - Prefer explicit types for exported APIs; avoid any.
+    - Use narrow schemas and safeParse for user/LLM data.
+
+testing:
+  - Add schema unit tests when adding complex schemas.
+  - Validate response shapes in API route tests.
+
+commit_messages:
+  - Use scope tags: feat(schemas), refactor(chat), fix(api), chore(tooling).
+
+typescript_guidelines:
+  - Always enable strict type checking
+  - Export interfaces and types from dedicated type files
+  - Leverage a common module for shared types and utilities when possible
+  - Use proper type imports from @types packages when available
+  - Follow framework conventions for typing (e.g., Remix loaders/actions, React types)
+  - DO NOT use the any type
+  - Prefer importing types from packages before declaring your own
+  - Avoid type casting; prefer precise types and narrowing
+  - Prefer inferring types from Zod schemas using z.infer instead of manual type definitions
+  - For Zod schemas, prefer .nullish().transform((val) => val ?? undefined) over .optional() for null handling; do not combine .nullish() with .default()
+
+project_structure:
+  overview:
+    - Frontend (Remix/React) lives under app/
+    - Backend (FastAPI) lives under backend/
+    - Centralized Zod schemas live under app/schemas/** with barrel exports in app/schemas/index.ts
+    - Database/sql migrations under migrations/
+    - Shared UI primitives under app/components/ui/**
+    - Timeline/editor components under app/components/timeline/**
+    - Chat/AI components under app/components/chat/**
+    - Hooks under app/hooks/**
+    - Utilities under app/utils/** and app/lib/**
+
+code_organization_rules:
+  - Keep feature-specific code within its respective directory (timeline, chat, media, etc.)
+  - Place all Zod schemas under app/schemas/** (components/, apis/, domain files) and import from there (no inline schemas in components/routes)
+  - Maintain consistent file naming:
+      - index.ts for barrel exports
+      - types.ts or types/index.ts for type definitions when schema inference is not applicable
+  - Remix routes:
+      - Validate params in loaders/actions with Zod
+      - Validate request bodies and response payloads (APIs under app/routes/api.*)
+  - Components:
+      - Keep presentational; parse/validate data in hooks or route loaders
+      - Import schemas from app/schemas/components/**
+  - APIs:
+      - Import request/response schemas from app/schemas/apis/**
+      - Validate inputs (safeParse) and outputs (parse) at boundaries
+  - Prefer z.infer<typeof Schema> to derive TS types from Zod

.env.example

@@ -1,5 +1,7 @@
+NODE_ENV= # production | development
 VITE_SUPABASE_URL=
 VITE_SUPABASE_ANON_KEY=
 DATABASE_URL=
 GOOGLE_CLIENT_ID=
-GOOGLE_CLIENT_SECRET=
+GOOGLE_CLIENT_SECRET=
+PROD_DOMAIN= # trykimu.com

Dockerfile.frontend

@@ -23,7 +23,7 @@ COPY . .
 RUN pnpm run build
 
 # Expose port
-EXPOSE 3000
+EXPOSE 5173
 
 # Start the application
 CMD ["pnpm", "run", "start"] 

README.md

@@ -56,32 +56,114 @@
 <br> and much more...</p>
 </samp>
 
-## 🐋Deployment
+## 💻 Development
 
+<strong> 🐳 <ins>Docker</ins> <code>Recommended</code> </strong>
+
+**Quick Start:**
+
+```bash
+docker compose -f docker-compose.yml \
+  -f docker-compose.dev.yml up -d
 ```
-git clone https://github.com/robinroy03/videoeditor.git
-cd videoeditor
-docker compose up
+
+**Ports:**
+
+<samp>
+  
+- Frontend: `5173`
+- Backend : `8000`
+- FastAPI : `3000`
+
+</samp>
+<br>
+
+<strong> 🛠️ <ins>Local Development</ins></strong>
+
+<samp>For local development without Docker:</samp>
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start services
+pnpm run dev                                    # Frontend (port 5173)
+pnpm dlx tsx app/videorender/videorender.ts     # Backend (port 8000)
+uv run backend/main.py                          # FastAPI (port 3000)
+
+# Note: You'll need GEMINI_API_KEY for AI features
+```
+
+`Requirements`
+
+<samp>
+  
+- Node.js 20+
+- Python 3.9+
+- PostgreSQL
+- pnpm
+
+</samp>
+</details>
+
+## 🚀 Production
+
+**Quick Start:**
+
+```bash
+docker compose up -d
 ```
 
-## 🧑‍💻Development
+**With Custom Domain:**
 
+```bash
+PROD_DOMAIN=yourdomain.com docker compose up -d
 ```
-pnpm i
-pnpm run dev (frontend)
-pnpm dlx tsx app/videorender/videorender.ts (backend)
-uv run backend/main.py
-flip `isProduction` to `false` in `/app/utils/api.ts`
+
+or alternatively edit `docker-compose.yml`
+
+**Ports:**
+
+- HTTP: `80`
+- HTTPS: `443`
+
+## ⚙️ Environment Configuration
+
+Create a `.env` file for custom settings:
+
+```env
+# Domain Configuration
+PROD_DOMAIN=yourdomain.com
+
+# Database
+DATABASE_URL=postgresql://user:pass@localhost:5432/videoeditor
+
+# Authentication (Google OAuth)
+GOOGLE_CLIENT_ID=your_google_client_id
+GOOGLE_CLIENT_SECRET=your_google_client_secret
+
+# AI Features (Optional -> /backend)
+GEMINI_API_KEY=your_gemini_api_key
+
+# Supabase (Optional)
+VITE_SUPABASE_URL=your_supabase_url
+VITE_SUPABASE_ANON_KEY=your_supabase_key
 ```
 
-## 📃TODO
+**Environment Variables Explained:**
+
+- `PROD_DOMAIN`: Your production domain (host only, e.g., `yourdomain.com`)
+- `DATABASE_URL`: PostgreSQL connection string
+- `GOOGLE_CLIENT_ID/SECRET`: Google OAuth credentials for authentication
+- `GEMINI_API_KEY`: Required for AI-powered video editing features
+- `VITE_SUPABASE_*`: Optional Supabase integration for additional features
 
-We have a lot of work! For starters, we plan to integrate all Remotion APIs. I'll add a proper roadmap soon. Join the [Discord Server](https://discord.com/invite/GSknuxubZK) for updates and support.
+<br>
 
 ## ❤️Contribution
 
-We would love your contributions! ❤️ Check the [contribution guide](CONTRIBUTING.md).
+<samp> We would love your contributions! ❤️ Check the [contribution guide](CONTRIBUTING.md). </samp>
 
 ## 📜License
 
-This project is licensed under a dual-license. Refer to [LICENSE](LICENSE.md) for details. The [Remotion license](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md) also applies to the relevant parts of the project.
+<samp> This project is licensed under a dual-license. Refer to [LICENSE](LICENSE.md) for details. The [Remotion license](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md) also applies to the relevant parts of the project. </samp>

app/app.css

@@ -4,8 +4,9 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans:
+    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
 }
 
 html,
@@ -202,6 +203,27 @@ body {
     max-width: 100%;
   }
 
+  /* Ultra-thin scrollbar specifically for chat tabs strip */
+  .chat-tabs-scroll::-webkit-scrollbar {
+    height: 0px; /* hide horizontal bar */
+  }
+  .chat-tabs-scroll::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 9999px;
+  }
+  .chat-tabs-scroll::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  /* Hide scrollbar utility (cross-browser) */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
   /* Prevent horizontal overflow in chat areas */
   .chat-container * {
     max-width: 100%;
@@ -332,11 +354,14 @@ body {
 @keyframes glow-pulse {
   0%,
   100% {
-    box-shadow: 0 0 20px rgba(37, 99, 235, 0.1),
+    box-shadow:
+      0 0 20px rgba(37, 99, 235, 0.1),
       0 0 40px rgba(37, 99, 235, 0.05);
   }
   50% {
-    box-shadow: 0 0 30px rgba(37, 99, 235, 0.2), 0 0 60px rgba(37, 99, 235, 0.1);
+    box-shadow:
+      0 0 30px rgba(37, 99, 235, 0.2),
+      0 0 60px rgba(37, 99, 235, 0.1);
   }
 }
 
@@ -489,7 +514,16 @@ body {
 }
 
 @keyframes indeterminate-slide {
-  0% { left: -40%; width: 40%; }
-  50% { left: 20%; width: 60%; }
-  100% { left: 100%; width: 40%; }
-}
+  0% {
+    left: -40%;
+    width: 40%;
+  }
+  50% {
+    left: 20%;
+    width: 60%;
+  }
+  100% {
+    left: 100%;
+    width: 40%;
+  }
+}