You are an expert full-stack engineer + infra architect + product designer.Your job: DESIGN AND BUILD a **real agentic AI browser inside a browser** with:- A **Next.js + React + Tailwind frontend** (deployed on Vercel).- A **Node.js + Playwright backend worker** that runs real automated browsers (NOT mock data, NOT simulation).- A simple **job queue** and **WebSocket/HTTP polling** connection so the frontend can see what the worker is doing in real time.IMPORTANT GLOBAL RULES:- Use **real Playwright automation** for websites (Chromium).- Use **TypeScript** everywhere.- Design a **production-quality** architecture: separation of frontend/orchestrator and worker.- Include all **core code** in one answer: folder structure + all important files.- The system must be usable with minimal setup: run backend worker (Node) and frontend (Next.js) and get a working prototype.- Focus on 2–3 example flows (order/search/fill form) that actually use Playwright to do real navigation, clicking, typing, reading text from pages (e.g. public websites or your own demo pages).- Do NOT bypass captchas or 2FA. If OTP or MFA appears, the automation must pause and ask the user via UI.==================================================0. OVERALL IDEA==================================================We are building **LetEX Agentic Browser**:- Frontend: Next.js (App Router) + Tailwind + React running on Vercel. - UI looks like Perplexity Comet / OpenAI Atlas, **light theme**, **high blur/glassmorphism**, **blue accent**, **smooth animations**. - User types a natural-language task: “Order pizza”, “Book hotel”, “Fill profile form”, etc. - Frontend sends this to backend to create a **job**. - Frontend shows: - Plan (list of steps). - Real-time preview: screenshots from Playwright. - Logs & step statuses. - History & replay.- Backend Worker: Node.js + Playwright. - Listens for jobs (REST or simple queue). - For each job: - Uses deterministic planner to break task into steps. - Launches **real browser** (Chromium via Playwright). - Executes steps: goto URL, click, type, waitForSelector, read text, etc. - Captures screenshot at each step. - Sends **events** (step started/completed, log messages, screenshot URL) to the frontend via a simple HTTP API or WebSocket.- Storage: - For simplicity, use **in-memory** storage for jobs/sessions in this implementation. - Store screenshots in local disk (`/screenshots`) and serve via a tiny static file server or Express static. - Design the code so later screenshots can be moved to S3 or another object store.==================================================1. ARCHITECTURE + FOLDER STRUCTURE==================================================Design a monorepo like this:- `/agentic-browser/` - `frontend/` (Next.js + Tailwind + framer-motion) - `app/` - `page.tsx` (main UI page) - `api/jobs/route.ts` (optional thin proxy to backend; OR clearly explain CORS if calling worker directly) - `components/` - `CommandBar.tsx` - `PreviewBrowser.tsx` - `HistoryPanel.tsx` - `PlanPanel.tsx` - `LogsPanel.tsx` - `TimelineBar.tsx` - `JobStatusBadge.tsx` - `lib/` - `types.ts` (shared frontend types matching backend) - `api.ts` (helper to call backend worker: create job, get job, subscribe to events via SSE/WebSocket or polling) - `styles/` - `globals.css` - `tailwind.config.ts` - `postcss.config.mjs` - `tsconfig.json` - `package.json` - `worker/` (Node.js + Playwright automation server) - `src/` - `index.ts` (Express or Fastify server) - `planner.ts` (deterministic step planner from user prompt → job plan) - `executor.ts` (Playwright runner that executes steps) - `jobsStore.ts` (in-memory job + history storage) - `types.ts` (backend types; align with frontend/lib/types.ts) - `events.ts` (EventEmitter or simple pub/sub for job events, SSE/WebSocket) - `screenshots/` (directory where Playwright stores screenshots) - `package.json` - `tsconfig.json` - `playwright.config.ts`Explain clearly:- Frontend will call worker at `http://localhost:4000` (dev) or `https://worker.my-domain.com` (prod).- Vercel will host frontend; worker hosted on a Node server (Render, Railway, VPS, etc.).==================================================2. REAL AUTOMATION WORKFLOW (NO MOCK)==================================================Implement real behavior:1) **User prompt → Job creation**- Frontend sends POST `/jobs` to worker with JSON `{ prompt: string }`.- Worker: - Generates a unique jobId. - Runs `planner.ts` to convert `prompt` into a `Job` with `steps[]`. - Store job in `jobsStore`. - Returns `{ jobId, job }`.2) **Planner (real, but deterministic)**- The planner inspects the prompt and: - Identifies intent: ORDER, BOOK, FILL_FORM, SEARCH. - For each intent, create a series of `AutomationStep`s with: - `type`: "GOTO" | "CLICK" | "TYPE" | "WAIT_FOR_SELECTOR" | "READ_TEXT" | ... - `url` (for GOTO). - `selector` (for CLICK/TYPE/WAIT_FOR_SELECTOR). - `value` (for TYPE). - `description`. - For this implementation, pick **1–2 specific real websites** (simple ones, e.g. your own test site or a well-structured public example) and build fixed selectors for them. - Example: for “Book hotel in Mumbai under ₹3000/night” you can: - Use a public demo website (like a “hotel search mock” or sample travel site) that doesn’t require login. - Plan: goto homepage → type “Mumbai” → select dates → filter by price → read some results.3) **Execution engine (Playwright)**- Endpoint: `POST /jobs/:id/run` - Starts executing steps for that job. - Launch Playwright Chromium (`chromium.launch({ headless: true })`). - For each step in `job.steps`: - Emit event: `STEP_STARTED` (store in jobsStore; also push via SSE/WebSocket). - Execute: - GOTO: `page.goto(step.url)` - CLICK: `page.click(step.selector)` - TYPE: `page.fill(step.selector, step.value)` or `page.type(...)` - WAIT_FOR_SELECTOR: `page.waitForSelector(step.selector)` - READ_TEXT: `const text = await page.textContent(step.selector)`; store as `step.result`. - After each step: - Take screenshot: `page.screenshot({ path: ... })`. - Emit event: `STEP_COMPLETED` with screenshot path and optional result. - Handle errors: - Emit `STEP_FAILED` with error message. - Mark job as `failed` but leave data for debugging.- Endpoint: `GET /jobs/:id` - Returns job with steps, status, events, screenshot URLs.- Endpoint: `GET /jobs/:id/events` (SSE or WebSocket) - Streams events as JSON: step started, completed, log messages.4) **Screenshots**- Store screenshots under `worker/src/screenshots/{jobId}-{stepIndex}.png`.- Expose via static route: e.g. `GET /screenshots/:fileName`.- Frontend will display them in the PreviewBrowser.5) **OTP / 2FA Safety**- If any step triggers OTP or 2FA, in this version: - Detect that the page contains something like “Enter OTP” or “verification code” (simple heuristic). - Stop execution and mark job as `requires_user_input`. - Emit event to frontend describing the situation. - Frontend shows message: “Automation paused due to OTP/2FA. Please continue manually”.- DO NOT implement any bypassing or automatic OTP handling.==================================================3. FRONTEND UI & UX (PERPLEXITY-STYLE, REAL DATA)==================================================UI must use **real job data from worker**:- CommandBar: - Large input with placeholder: “Describe what you want the AI to do…”. - On submit: - Calls `createJob(prompt)` in `lib/api.ts`. - The returned job is set as `currentJob`. - UI immediately shows the planned steps in PlanPanel. - Show a button: “Run Automation”. - On “Run Automation”: - Call `runJob(jobId)` (POST `/jobs/:id/run`). - Start listening to events via SSE or polling `GET /jobs/:id` in intervals.- Layout: - Header with logo + nav + avatar. - Main area: - Left: HistoryPanel (list of job titles, statuses). - Center: PreviewBrowser (fake chrome + screenshot). - Right: PlanPanel + LogsPanel. - Bottom: TimelineBar with step markers based on `job.steps`.- PreviewBrowser: - Shows screenshot of current step (from API). - While a step is running, fade between last screenshot and new screenshot. - Show a “live status” badge (Running / Idle / Failed / Completed).- PlanPanel: - Show steps with: - Step number. - Description. - Status (Pending, Running, Completed, Failed). - Highlight current step.- LogsPanel: - Show chronological log lines from job events: - e.g. `"[12:30:11] STEP 2 STARTED: Click search button"`. - `"[12:30:14] STEP 2 COMPLETED"`.- TimelineBar: - Show a progress bar representing step index vs total. - Markers for each step. - When user clicks on a marker: - Frontend sets `selectedStepIndex`. - PreviewBrowser shows screenshot for that step if available. - This is **real** replay based on actual screenshots, not fake simulation.VISUAL STYLE:- Use Tailwind classes: - Background: gradient pastel + subtle noise; main cards: `bg-white/60` + `backdrop-blur-xl`. - Accent: `text-sky-500`, `bg-sky-500`, `border-sky-500`. - Cards: `rounded-2xl`, `shadow-xl`.- Use `framer-motion` to animate: - CommandBar (slide/opacity). - Preview card (subtle scale on mount). - Step list items (staggered appearance).==================================================4. TYPES & DATA CONTRACT==================================================Define shared types (frontend `lib/types.ts` and backend `worker/src/types.ts`):```tsexport type JobStatus = "pending" | "running" | "completed" | "failed" | "paused" | "requires_user_input";export type StepStatus = "pending" | "running" | "completed" | "failed";export interface AutomationStep { id: string; index: number; type: "GOTO" | "CLICK" | "TYPE" | "WAIT_FOR_SELECTOR" | "READ_TEXT"; url?: string; selector?: string; value?: string; description: string; status: StepStatus; screenshotPath?: string; // backend path resultText?: string;}export interface JobEvent { id: string; timestamp: string; jobId: string; stepId?: string; type: "JOB_CREATED" | "STEP_STARTED" | "STEP_COMPLETED" | "STEP_FAILED" | "JOB_COMPLETED" | "JOB_FAILED" | "LOG"; message: string;}export interface AgentJob { id: string; prompt: string; title: string; status: JobStatus; createdAt: string; steps: AutomationStep[]; events: JobEvent[];}Frontend must convert screenshotPath to a full URL using configured WORKER_BASE_URL, e.g: const screenshotUrl = WORKER_BASE_URL + "/screenshots/" + fileName;================================================== 5. WHAT TO OUTPUT (STRUCTURE OF YOUR ANSWER)You must output all of the following:A. SHORT OVERVIEW (3–5 lines)Explain what the system does, that it uses real Playwright automation.B. FOLDER STRUCTURE (for entire repo)Show /frontend and /worker structure with key files.C. FULL BACKEND (WORKER) CODEworker/package.json (with dependencies: typescript, ts-node, express/fastify, playwright, cors, etc.)worker/tsconfig.jsonworker/playwright.config.ts (basic config).worker/src/types.ts (as above).worker/src/jobsStore.ts (in-memory store).worker/src/planner.ts (deterministic planner that builds steps for at least 2 intents).worker/src/executor.ts (core Playwright runner that executes steps and updates job state).worker/src/index.ts (Express/Fastify server with routes:POST /jobsPOST /jobs/:id/runGET /jobs/:idGET /jobs/:id/events (SSE or simple long polling)static route /screenshots/*).D. FULL FRONTEND CODEfrontend/package.json (Next.js, React, Tailwind, framer-motion).frontend/tailwind.config.ts, postcss.config.mjs, tsconfig.json, app/layout.tsx, app/globals.css.frontend/app/page.tsx (main page).React components:CommandBar.tsxPreviewBrowser.tsxHistoryPanel.tsxPlanPanel.tsxLogsPanel.tsxTimelineBar.tsxJobStatusBadge.tsxfrontend/lib/types.ts (mirroring backend types).frontend/lib/api.ts (functions:createJob(prompt: string): Promise<AgentJob>runJob(jobId: string): Promise<void>getJob(jobId: string): Promise<AgentJob>optional subscribeToEvents(jobId: string, onEvent: (e: JobEvent) => void) using SSE or polling).E. WIREFRAME-LEVEL CSS & TAILWINDUse Tailwind classes in JSX.In globals.css, set:background gradient.base font.simple scroll styles.F. RUN INSTRUCTIONSAt the end of your answer, include a short section like:how to install and run worker:cd worker && npm install && npx playwright install && npm run devhow to install and run frontend:cd frontend && npm install && npm run devconfiguration of WORKER_BASE_URL in frontend (e.g. .env.local).================================================== 6. SAFETY & LIMITATIONS (MANDATORY)Do NOT implement any feature that automatically bypasses:captchas,2FA,OTP-based security.If such pages appear, detect via simple keyword heuristic and:pause the job,emit an event requires_user_input,update job status accordingly.All passwords or credentials in this prototype should be:provided at runtime by the user or stored in environment variables for testing,NEVER hard-coded in the repo.Make it clear in comments that:This is a proof-of-concept and should be audited before handling sensitive credentials.================================================== 7. STYLE & QUALITYUse clean, idiomatic TypeScript.Use async/await consistently.Keep code readable, with short comments where needed.Avoid unnecessary abstractions; keep architecture understandable to a single developer.The final code should be realistic enough that if I copy it into a project and configure URLs, I will get:a real browser automation backend via Playwright,a modern Perplexity-style UI that shows real screenshots and logs as automation runs.Now, based on everything above, output the COMPLETE implementation (overview + structure + all critical code files) in one answer, so I can copy it into my project and run a fully working agentic browser with real Playwright automation.