From d30e9017cd33ef4b76d6adc4d3610d77f1ec5eb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Mon, 6 Jul 2026 17:49:38 -0300
Subject: [PATCH 1/2] New screen builder

---
 .env.example                                  |  17 +
 index.html                                    |   5 +-
 package-lock.json                             | 370 ++++++-
 package.json                                  |   6 +-
 scripts/vibe-cursor-agent.mjs                 | 100 ++
 src/App.vue                                   | 151 ++-
 src/components/index.js                       |  11 +-
 src/components/vue-form-builder.vue           |  25 +
 src/vibe-project/components/ExampleHeader.vue |  43 +
 src/vibe-project/components/VibeAlert.vue     |  91 ++
 src/vibe-project/components/VibeBadge.vue     |  57 +
 src/vibe-project/components/VibeButton.vue    | 120 +++
 src/vibe-project/components/VibeCard.vue      | 103 ++
 src/vibe-project/components/VibeCartItem.vue  | 186 ++++
 .../components/VibeFeatureBlock.vue           | 131 +++
 .../components/VibeFlightCard.vue             | 264 +++++
 .../components/VibeFlightSearchForm.vue       | 263 +++++
 .../components/VibeFlightSummary.vue          | 264 +++++
 src/vibe-project/components/VibeInput.vue     |  82 ++
 src/vibe-project/components/VibePosCart.vue   | 205 ++++
 .../components/VibePricingCard.vue            | 136 +++
 .../components/VibeProductCard.vue            | 134 +++
 .../components/VibeProfileCard.vue            | 133 +++
 src/vibe-project/components/VibeStatCard.vue  |  85 ++
 src/vibe-project/components/VibeTimeline.vue  | 104 ++
 src/vibe-project/components/index.js          |  17 +
 src/vibe-project/index.js                     |   1 +
 src/vibe-project/previewLoader.js             |  39 +
 .../screens/FlightBookingScreen.vue           | 383 +++++++
 src/vibe-project/screens/MainScreen.vue       |  39 +
 .../screens/PosProductSelectionScreen.vue     | 262 +++++
 .../screens/UserRegistrationScreen.vue        | 301 ++++++
 .../tests/flight-booking-scenarios.yaml       | 256 +++++
 src/vibe-project/tests/pos-scenarios.yaml     | 212 ++++
 src/vibe-project/tests/scenarios.yaml         | 109 ++
 src/vibe/VibeAppShell.vue                     |  22 +
 src/vibe/VibeScreenBuilder.vue                | 983 ++++++++++++++++++
 src/vibe/components/EditorWorkspace.vue       | 228 ++++
 src/vibe/components/FileTreeNode.vue          | 401 +++++++
 src/vibe/components/FileTreePanel.vue         | 524 ++++++++++
 src/vibe/components/FileTypeIcon.vue          | 132 +++
 src/vibe/components/ImportExportModal.vue     | 191 ++++
 src/vibe/components/PanelResizeHandle.vue     |  95 ++
 src/vibe/components/PreviewPanel.vue          | 280 +++++
 src/vibe/components/ScreenCanvasNode.vue      | 364 +++++++
 src/vibe/components/ScreenPropertiesPanel.vue | 384 +++++++
 src/vibe/components/ScreenSheetEditor.vue     | 140 +++
 src/vibe/components/TestScenariosPanel.vue    | 298 ++++++
 src/vibe/components/VibeAiPanel.vue           | 478 +++++++++
 src/vibe/components/VibeCodeEditor.vue        | 118 +++
 src/vibe/components/VibeProjectScreen.vue     | 140 +++
 src/vibe/components/VibeToolbar.vue           | 165 +++
 src/vibe/services/panelSizes.js               |  57 +
 src/vibe/services/vibeAiPreferences.js        |  27 +
 src/vibe/services/vibeAiPrompt.js             | 154 +++
 src/vibe/services/vibeAiService.js            |  28 +
 src/vibe/services/vibeCompiler.js             |  46 +
 src/vibe/services/vibeComponentProps.js       | 204 ++++
 src/vibe/services/vibeFileTreeDrag.js         |  27 +
 src/vibe/services/vibeImportExport.js         |  49 +
 src/vibe/services/vibeImportPaths.js          |  53 +
 src/vibe/services/vibeProjectApi.js           | 218 ++++
 src/vibe/services/vibeProjectCreate.js        | 194 ++++
 src/vibe/services/vibeProjectFileOps.js       | 150 +++
 src/vibe/services/vibeProjectScreenLoader.js  | 189 ++++
 src/vibe/services/vibeScenarioPreferences.js  |  43 +
 src/vibe/services/vibeScreenCodegen.js        | 198 ++++
 src/vibe/services/vibeScreenModel.js          | 224 ++++
 src/vibe/services/vibeScreenParser.js         | 117 +++
 src/vibe/services/vibeSfcPatch.js             | 240 +++++
 src/vibe/services/vibeSfcRuntime.js           | 198 ++++
 src/vibe/services/vibeSheetDrag.js            |  53 +
 src/vibe/services/vibeTestRunner.js           | 112 ++
 src/vibe/services/vibeUseScreenControl.js     |  60 ++
 src/vibe/styles/vibe-layout.scss              | 240 +++++
 src/vibe/styles/vibe-tokens.scss              |  46 +
 src/vite/vibeAiHandler.js                     | 128 +++
 src/vite/vibeProjectPlugin.js                 | 295 ++++++
 vite.config.js                                |  11 +-
 79 files changed, 12976 insertions(+), 33 deletions(-)
 create mode 100644 .env.example
 create mode 100644 scripts/vibe-cursor-agent.mjs
 create mode 100644 src/vibe-project/components/ExampleHeader.vue
 create mode 100644 src/vibe-project/components/VibeAlert.vue
 create mode 100644 src/vibe-project/components/VibeBadge.vue
 create mode 100644 src/vibe-project/components/VibeButton.vue
 create mode 100644 src/vibe-project/components/VibeCard.vue
 create mode 100644 src/vibe-project/components/VibeCartItem.vue
 create mode 100644 src/vibe-project/components/VibeFeatureBlock.vue
 create mode 100644 src/vibe-project/components/VibeFlightCard.vue
 create mode 100644 src/vibe-project/components/VibeFlightSearchForm.vue
 create mode 100644 src/vibe-project/components/VibeFlightSummary.vue
 create mode 100644 src/vibe-project/components/VibeInput.vue
 create mode 100644 src/vibe-project/components/VibePosCart.vue
 create mode 100644 src/vibe-project/components/VibePricingCard.vue
 create mode 100644 src/vibe-project/components/VibeProductCard.vue
 create mode 100644 src/vibe-project/components/VibeProfileCard.vue
 create mode 100644 src/vibe-project/components/VibeStatCard.vue
 create mode 100644 src/vibe-project/components/VibeTimeline.vue
 create mode 100644 src/vibe-project/components/index.js
 create mode 100644 src/vibe-project/index.js
 create mode 100644 src/vibe-project/previewLoader.js
 create mode 100644 src/vibe-project/screens/FlightBookingScreen.vue
 create mode 100644 src/vibe-project/screens/MainScreen.vue
 create mode 100644 src/vibe-project/screens/PosProductSelectionScreen.vue
 create mode 100644 src/vibe-project/screens/UserRegistrationScreen.vue
 create mode 100644 src/vibe-project/tests/flight-booking-scenarios.yaml
 create mode 100644 src/vibe-project/tests/pos-scenarios.yaml
 create mode 100644 src/vibe-project/tests/scenarios.yaml
 create mode 100644 src/vibe/VibeAppShell.vue
 create mode 100644 src/vibe/VibeScreenBuilder.vue
 create mode 100644 src/vibe/components/EditorWorkspace.vue
 create mode 100644 src/vibe/components/FileTreeNode.vue
 create mode 100644 src/vibe/components/FileTreePanel.vue
 create mode 100644 src/vibe/components/FileTypeIcon.vue
 create mode 100644 src/vibe/components/ImportExportModal.vue
 create mode 100644 src/vibe/components/PanelResizeHandle.vue
 create mode 100644 src/vibe/components/PreviewPanel.vue
 create mode 100644 src/vibe/components/ScreenCanvasNode.vue
 create mode 100644 src/vibe/components/ScreenPropertiesPanel.vue
 create mode 100644 src/vibe/components/ScreenSheetEditor.vue
 create mode 100644 src/vibe/components/TestScenariosPanel.vue
 create mode 100644 src/vibe/components/VibeAiPanel.vue
 create mode 100644 src/vibe/components/VibeCodeEditor.vue
 create mode 100644 src/vibe/components/VibeProjectScreen.vue
 create mode 100644 src/vibe/components/VibeToolbar.vue
 create mode 100644 src/vibe/services/panelSizes.js
 create mode 100644 src/vibe/services/vibeAiPreferences.js
 create mode 100644 src/vibe/services/vibeAiPrompt.js
 create mode 100644 src/vibe/services/vibeAiService.js
 create mode 100644 src/vibe/services/vibeCompiler.js
 create mode 100644 src/vibe/services/vibeComponentProps.js
 create mode 100644 src/vibe/services/vibeFileTreeDrag.js
 create mode 100644 src/vibe/services/vibeImportExport.js
 create mode 100644 src/vibe/services/vibeImportPaths.js
 create mode 100644 src/vibe/services/vibeProjectApi.js
 create mode 100644 src/vibe/services/vibeProjectCreate.js
 create mode 100644 src/vibe/services/vibeProjectFileOps.js
 create mode 100644 src/vibe/services/vibeProjectScreenLoader.js
 create mode 100644 src/vibe/services/vibeScenarioPreferences.js
 create mode 100644 src/vibe/services/vibeScreenCodegen.js
 create mode 100644 src/vibe/services/vibeScreenModel.js
 create mode 100644 src/vibe/services/vibeScreenParser.js
 create mode 100644 src/vibe/services/vibeSfcPatch.js
 create mode 100644 src/vibe/services/vibeSfcRuntime.js
 create mode 100644 src/vibe/services/vibeSheetDrag.js
 create mode 100644 src/vibe/services/vibeTestRunner.js
 create mode 100644 src/vibe/services/vibeUseScreenControl.js
 create mode 100644 src/vibe/styles/vibe-layout.scss
 create mode 100644 src/vibe/styles/vibe-tokens.scss
 create mode 100644 src/vite/vibeAiHandler.js
 create mode 100644 src/vite/vibeProjectPlugin.js

diff --git a/.env.example b/.env.example
new file mode 100644
index 000000000..b543ab688
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,17 @@
+# Vibe IDE — AI Assistant
+# Copy to .env and fill in one of the options below.
+
+# ── Option A: OpenAI (or compatible API) ─────────────────────────────
+VIBE_AI_PROVIDER=openai
+VIBE_AI_API_KEY=sk-your-key-here
+# VIBE_AI_MODEL=gpt-4o-mini
+# VIBE_AI_BASE_URL=https://api.openai.com/v1
+
+# ── Option B: Cursor sidecar (local agent) ───────────────────────────
+# 1. npm install @cursor/sdk --save-dev
+# 2. export CURSOR_API_KEY=your-cursor-api-key
+# 3. npm run vibe:cursor-agent   (keep running in a terminal)
+# 4. Uncomment:
+# VIBE_AI_PROVIDER=cursor
+# VIBE_CURSOR_AGENT_URL=http://127.0.0.1:4877
+# VIBE_AI_MODEL=composer-2.5
diff --git a/index.html b/index.html
index d2c73152c..a9a1d28e6 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="favicon.ico">
-    <title>vue-form-builder</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <title>Vibe Screen Builder</title>
   </head>
   <body>
     <noscript>
diff --git a/package-lock.json b/package-lock.json
index b5801c98d..d4bf55b97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "@4tw/cypress-drag-drop": "^2.2.5",
         "@babel/core": "^7.12.16",
         "@babel/eslint-parser": "^7.12.16",
+        "@cursor/sdk": "^1.0.22",
         "@cypress-audit/lighthouse": "^1.4.2",
         "@cypress-audit/pa11y": "^1.4.2",
         "@cypress/code-coverage": "^3.12.19",
@@ -74,6 +75,8 @@
         "jest-environment-jsdom": "^30.2.0",
         "jest-serializer-vue": "^2.0.2",
         "jest-transform-stub": "^2.0.0",
+        "js-yaml": "^5.2.1",
+        "jszip": "^3.10.1",
         "mustache": "^3.0.1",
         "nyc": "^15.1.0",
         "prettier": "2.7.1",
@@ -2070,6 +2073,13 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@bufbuild/protobuf": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.10.0.tgz",
+      "integrity": "sha512-QDdVFLoN93Zjg36NoQPZfsVH9tZew7wKDKyV5qRdj8ntT4wQCOradQjRaTdwMhWUYsgKsvCINKKm87FdEk96Ag==",
+      "dev": true,
+      "license": "(Apache-2.0 AND BSD-3-Clause)"
+    },
     "node_modules/@chantouchsek/validatorjs": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@chantouchsek/validatorjs/-/validatorjs-1.2.3.tgz",
@@ -2107,6 +2117,44 @@
         "node": ">=0.1.90"
       }
     },
+    "node_modules/@connectrpc/connect": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@connectrpc/connect/-/connect-1.7.0.tgz",
+      "integrity": "sha512-iNKdJRi69YP3mq6AePRT8F/HrxWCewrhxnLMNm0vpqXAR8biwzRtO6Hjx80C6UvtKJ5sFmffQT7I4Baecz389w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@bufbuild/protobuf": "^1.10.0"
+      }
+    },
+    "node_modules/@connectrpc/connect-node": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@connectrpc/connect-node/-/connect-node-1.7.0.tgz",
+      "integrity": "sha512-6vaPIkG/NyhxlYgytLoR9KYbPhczEboFB2OYWkA9qvUz1K7efXfeGrlRxoLtpa+r8VxyIOw73w5ktNe743nD+A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "undici": "^5.28.4"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "peerDependencies": {
+        "@bufbuild/protobuf": "^1.10.0",
+        "@connectrpc/connect": "1.7.0"
+      }
+    },
+    "node_modules/@connectrpc/connect-web": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@connectrpc/connect-web/-/connect-web-1.7.0.tgz",
+      "integrity": "sha512-qyP0YOnUPRWwCc/VfsoydMJvkb7EyUPr2q9sHgBuJzbADjiqck1gKH5V5ZPzPhTLBvmz5UvG+wiZ5sMRQHU1MQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@bufbuild/protobuf": "^1.10.0",
+        "@connectrpc/connect": "1.7.0"
+      }
+    },
     "node_modules/@csstools/color-helpers": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
@@ -2217,6 +2265,116 @@
         "node": ">=18"
       }
     },
+    "node_modules/@cursor/sdk": {
+      "version": "1.0.22",
+      "resolved": "https://registry.npmjs.org/@cursor/sdk/-/sdk-1.0.22.tgz",
+      "integrity": "sha512-xn99xoMvq/JwIXmWrpmEGMSY88zPr6dgxGSZYv3m9PytOBrawkwx9CHKosXs8m3ihVcQ+Wrt+TaEIUsgSNc5YA==",
+      "dev": true,
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@bufbuild/protobuf": "1.10.0",
+        "@connectrpc/connect": "^1.6.1",
+        "@connectrpc/connect-node": "^1.6.1",
+        "@connectrpc/connect-web": "^1.6.1",
+        "@statsig/js-client": "3.31.0",
+        "zod": "^3.25.0"
+      },
+      "engines": {
+        "node": ">=22.13"
+      },
+      "optionalDependencies": {
+        "@cursor/sdk-darwin-arm64": "1.0.22",
+        "@cursor/sdk-darwin-x64": "1.0.22",
+        "@cursor/sdk-linux-arm64": "1.0.22",
+        "@cursor/sdk-linux-x64": "1.0.22",
+        "@cursor/sdk-win32-x64": "1.0.22"
+      }
+    },
+    "node_modules/@cursor/sdk-darwin-arm64": {
+      "version": "1.0.22",
+      "resolved": "https://registry.npmjs.org/@cursor/sdk-darwin-arm64/-/sdk-darwin-arm64-1.0.22.tgz",
+      "integrity": "sha512-BdGH+cd2VtxbfwYQ52a6mHlPoJkbjpjKfUrmhFQTN3a/A0h/n2Iv6ZCfnzT+IiLv99lYDaQfqzikM2EAzEx+Qw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "bin": {
+        "rg": "bin/rg"
+      }
+    },
+    "node_modules/@cursor/sdk-darwin-x64": {
+      "version": "1.0.22",
+      "resolved": "https://registry.npmjs.org/@cursor/sdk-darwin-x64/-/sdk-darwin-x64-1.0.22.tgz",
+      "integrity": "sha512-60rL0tYdJ8LYbOq/3cz5xlRyJsWn+LMkG8YQG6CckLsLyMFCzkK3POU0w7jIsRoC17cpSj2miJGtX2dEGSg8tg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "bin": {
+        "rg": "bin/rg"
+      }
+    },
+    "node_modules/@cursor/sdk-linux-arm64": {
+      "version": "1.0.22",
+      "resolved": "https://registry.npmjs.org/@cursor/sdk-linux-arm64/-/sdk-linux-arm64-1.0.22.tgz",
+      "integrity": "sha512-tpywB5MiBSvGUr9kErfcbG4bOmtHqOsiK+CNOVhjlUFMQ+iCRPfu0VCj+1VGAo258/V6a2GS/1d5CuR14Hq+Ow==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "bin": {
+        "rg": "bin/rg"
+      }
+    },
+    "node_modules/@cursor/sdk-linux-x64": {
+      "version": "1.0.22",
+      "resolved": "https://registry.npmjs.org/@cursor/sdk-linux-x64/-/sdk-linux-x64-1.0.22.tgz",
+      "integrity": "sha512-tmX1kH/pyxhv0dQaJIcCQbdouLrPbKvv8iuALwMzh42piCI51q5pdRzUaWUUtH8VMdFjwZdVsDfumuSwqTlAIA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "bin": {
+        "rg": "bin/rg"
+      }
+    },
+    "node_modules/@cursor/sdk-win32-x64": {
+      "version": "1.0.22",
+      "resolved": "https://registry.npmjs.org/@cursor/sdk-win32-x64/-/sdk-win32-x64-1.0.22.tgz",
+      "integrity": "sha512-Dy5aI6YN/9rWvGl78kG+UqqTCwdC/eT9SKf9NSPeLXriPaCRYs7JHH/93yuAUmO9IaX+mt/0tKl+CqsYaGimVg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "bin": {
+        "rg": "bin/rg.exe"
+      }
+    },
     "node_modules/@cypress-audit/lighthouse": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/@cypress-audit/lighthouse/-/lighthouse-1.4.2.tgz",
@@ -2317,6 +2475,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/@cypress/code-coverage/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/@cypress/code-coverage/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -2824,6 +2995,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.0.tgz",
+      "integrity": "sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/type-fest": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -2851,6 +3045,16 @@
       "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==",
       "dev": true
     },
+    "node_modules/@fastify/busboy": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
+      "integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
@@ -5672,6 +5876,23 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@statsig/client-core": {
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/@statsig/client-core/-/client-core-3.31.0.tgz",
+      "integrity": "sha512-SuxQD6TmVszPG7FoMKwTk/uyBuVFk7XnxI3T/E0uyb7PL7GNjONtfsoh+NqBBVUJVse0CUeSFfgJPoZy1ZOslQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@statsig/js-client": {
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/@statsig/js-client/-/js-client-3.31.0.tgz",
+      "integrity": "sha512-LFa5E0LjT6sTfZv3sNGoyRLSZ1078+agdgOA+Vm1ecjG+KbSOfBLTW7hMwimrJ29slRwbYDzbtKaPJo/R37N2g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@statsig/client-core": "3.31.0"
+      }
+    },
     "node_modules/@storybook/addon-actions": {
       "version": "7.6.13",
       "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.13.tgz",
@@ -14295,6 +14516,29 @@
         "node": ">=8"
       }
     },
+    "node_modules/eslint/node_modules/js-yaml": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.0.tgz",
+      "integrity": "sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/eslint/node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -16425,6 +16669,13 @@
       "integrity": "sha512-W7+sO6/yhxy83L0G7xR8YAc5Z5QFtYEXXRV6EaE8tuYBZJnA3gVgp3q7X7muhLZVodeb9UfvjSbwt9VJwjIYAg==",
       "dev": true
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/immutable": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
@@ -20428,15 +20679,26 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-5.2.1.tgz",
+      "integrity": "sha512-zfLtNfQqxVqq3uaTqSkh4x4hZw3KHobGUA0fJUj4wawW8bsQLTVqpHdXSIzidh7o+4lEW36tANuAGdaFx6Zgnw==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
       },
       "bin": {
-        "js-yaml": "bin/js-yaml.js"
+        "js-yaml": "bin/js-yaml.mjs"
       }
     },
     "node_modules/jsbn": {
@@ -20800,6 +21062,66 @@
         "promise": "^7.0.1"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "dev": true,
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jszip/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jszip/node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "dev": true,
+      "license": "(MIT AND Zlib)"
+    },
+    "node_modules/jszip/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/jszip/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jszip/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -20874,6 +21196,16 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lighthouse": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/lighthouse/-/lighthouse-10.4.0.tgz",
@@ -25318,6 +25650,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -26917,6 +27256,19 @@
         "through": "^2.3.8"
       }
     },
+    "node_modules/undici": {
+      "version": "5.29.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.29.0.tgz",
+      "integrity": "sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/busboy": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
@@ -28432,6 +28784,16 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 60ded0196..a7d69fd49 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "test": "jest tests/unit --no-coverage",
     "test:coverage": "jest tests/unit --coverage",
     "test:variables": "jest tests/unit/VariablesToSubmit.spec.js --no-coverage",
-    "serve": "npm run dev"
+    "serve": "npm run dev",
+    "vibe:cursor-agent": "node scripts/vibe-cursor-agent.mjs"
   },
   "main": "./dist/vue-form-builder.umd.js",
   "module": "./dist/vue-form-builder.es.js",
@@ -55,6 +56,7 @@
     "@4tw/cypress-drag-drop": "^2.2.5",
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@cursor/sdk": "^1.0.22",
     "@cypress-audit/lighthouse": "^1.4.2",
     "@cypress-audit/pa11y": "^1.4.2",
     "@cypress/code-coverage": "^3.12.19",
@@ -100,6 +102,8 @@
     "jest-environment-jsdom": "^30.2.0",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
+    "js-yaml": "^5.2.1",
+    "jszip": "^3.10.1",
     "mustache": "^3.0.1",
     "nyc": "^15.1.0",
     "prettier": "2.7.1",
diff --git a/scripts/vibe-cursor-agent.mjs b/scripts/vibe-cursor-agent.mjs
new file mode 100644
index 000000000..4cb542b4b
--- /dev/null
+++ b/scripts/vibe-cursor-agent.mjs
@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+/**
+ * Optional Cursor SDK sidecar for Vibe IDE AI panel.
+ *
+ * Requires: npm install @cursor/sdk
+ * Env: CURSOR_API_KEY, optional VIBE_CURSOR_AGENT_PORT=4877
+ *
+ * Usage: npm run vibe:cursor-agent
+ * Then set VIBE_AI_PROVIDER=cursor in .env
+ */
+import http from "http";
+import {
+  buildSystemPrompt,
+  parseAgentResponse,
+  normalizeAgentResult,
+} from "../src/vibe/services/vibeAiPrompt.js";
+
+const PORT = Number(process.env.VIBE_CURSOR_AGENT_PORT || 4877);
+const MODEL = process.env.VIBE_AI_MODEL || "composer-2.5";
+
+async function loadCursorSdk() {
+  try {
+    return await import("@cursor/sdk");
+  } catch {
+    throw new Error(
+      "Install @cursor/sdk: npm install @cursor/sdk --save-dev"
+    );
+  }
+}
+
+async function runCursorAgent(messages, context) {
+  const { Agent } = await loadCursorSdk();
+  const apiKey = process.env.CURSOR_API_KEY;
+
+  if (!apiKey) {
+    throw new Error("CURSOR_API_KEY is required");
+  }
+
+  const system = buildSystemPrompt(context);
+  const userTurns = messages.filter((m) => m.role === "user");
+  const lastUser = userTurns[userTurns.length - 1]?.content || "";
+  const prompt = `${system}\n\nUser request:\n${lastUser}`;
+
+  const result = await Agent.prompt(prompt, {
+    apiKey,
+    model: { id: MODEL },
+    local: { cwd: process.cwd() },
+  });
+
+  return result.result || result.output || String(result);
+}
+
+function readBody(req) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+    req.on("data", (chunk) => chunks.push(chunk));
+    req.on("end", () => resolve(Buffer.concat(chunks).toString()));
+    req.on("error", reject);
+  });
+}
+
+const server = http.createServer(async (req, res) => {
+  res.setHeader("Access-Control-Allow-Origin", "*");
+  res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+
+  if (req.method === "OPTIONS") {
+    res.writeHead(204);
+    res.end();
+    return;
+  }
+
+  if (req.url === "/health" && req.method === "GET") {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ ok: true, provider: "cursor" }));
+    return;
+  }
+
+  if (req.url === "/chat" && req.method === "POST") {
+    try {
+      const body = JSON.parse(await readBody(req));
+      const raw = await runCursorAgent(body.messages || [], body.context || {});
+      const parsed = normalizeAgentResult(parseAgentResponse(raw));
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ content: JSON.stringify(parsed) }));
+    } catch (err) {
+      res.writeHead(500, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ error: err.message }));
+    }
+    return;
+  }
+
+  res.writeHead(404);
+  res.end("Not found");
+});
+
+server.listen(PORT, () => {
+  console.log(`Vibe Cursor agent sidecar listening on http://127.0.0.1:${PORT}`);
+  console.log(`Set VIBE_AI_PROVIDER=cursor and VIBE_CURSOR_AGENT_URL=http://127.0.0.1:${PORT}`);
+});
diff --git a/src/App.vue b/src/App.vue
index 19e3e5c8e..110c7b84b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,12 @@
 <template>
-  <b-container id="screen-builder-container" class="h-100">
+  <div class="app-root h-100">
+    <vibe-app-shell
+      v-if="builderMode === 'vibe'"
+      :used-screen-paths="usedVibeScreenPaths"
+      @switch-mode="setBuilderMode"
+      @use-screen="useVibeScreen"
+    />
+    <b-container v-else id="screen-builder-container" class="h-100">
     <b-card id="app" no-body class="h-100 bg-white border-top-0 ">
       <!-- Card Header -->
       <b-card-header class="bg-white p-0">
@@ -48,7 +55,15 @@
             </b-button-group>
           </b-col>
 
-          <b-col v-if="displayBuilder && !displayPreview" class="text-right">
+          <b-col v-if="displayBuilder && !displayPreview" class="text-right d-flex align-items-center justify-content-end">
+            <b-btn
+              variant="outline-secondary"
+              size="sm"
+              class="mr-2"
+              @click="setBuilderMode('vibe')"
+            >
+              Vibe IDE
+            </b-btn>
             <screen-toolbar
               :disabled="$refs.builder?.isCurrentPageClipboard"
               @undo="$refs.builder.undo()"
@@ -315,6 +330,7 @@
       />
     </b-modal>
   </b-container>
+  </div>
 </template>
 
 <script>
@@ -329,7 +345,8 @@ import VueFormBuilder from "./components/vue-form-builder.vue";
 import VueFormRenderer from "./components/vue-form-renderer.vue";
 import ScreenToolbar from "./components/ScreenToolbar.vue";
 import canOpenJsonFile from "./mixins/canOpenJsonFile";
-
+import VibeAppShell from "./vibe/VibeAppShell.vue";
+import { extractUsedVibeScreenPaths } from "./vibe/services/vibeUseScreenControl";
 // Bring in our initial set of controls
 import controlConfig from "./form-builder-controls";
 import globalProperties from "./global-properties";
@@ -395,10 +412,12 @@ export default {
     MonacoEditor,
     WatchersPopup,
     ScreenToolbar,
+    VibeAppShell,
   },
   mixins: [canOpenJsonFile],
   data() {
     return {
+      builderMode: "classic",
       previewDataStringify: "",
       numberOfElements: 0,
       preview: {
@@ -453,10 +472,15 @@ export default {
       },
       showTemplatesPanel: false,
       sharedTemplatesData: null,
-      displayType: 'form'
+      displayType: 'form',
+      classicInitialized: false,
+      pendingVibeScreenPath: null,
     };
   },
   computed: {
+    usedVibeScreenPaths() {
+      return extractUsedVibeScreenPaths(this.config);
+    },
     previewInputValid() {
       try {
         JSON.parse(this.previewInput);
@@ -547,26 +571,98 @@ export default {
       globalObject.ProcessMaker.user.lang &&
       typeof globalObject.ProcessMaker.setValidatorLanguage === 'function'
     ) {
-      //Validator.useLang(globalObject.ProcessMaker.user.lang);
       globalObject.ProcessMaker.setValidatorLanguage(Validator, globalObject.ProcessMaker.user.lang);
     }
-    // Iterate through our initial config set, calling this.addControl
-    controlConfig.forEach((config) => {
-      config.control.inspector.push(...globalProperties[0].inspector);
-
-      this.addControl(
-        config.control,
-        config.rendererComponent,
-        config.rendererBinding,
-        config.builderComponent,
-        config.builderBinding
-      );
-    });
-
-    this.loadFromLocalStorage();
+    if (this.builderMode === "classic") {
+      this.initClassicBuilder();
+    }
   },
   methods: {
     ...mapMutations("globalErrorsModule", { setStoreMode: "setMode" }),
+    setBuilderMode(mode) {
+      if (mode === "vibe") {
+        this.classicInitialized = false;
+        this.pendingVibeScreenPath = null;
+      }
+      this.builderMode = mode;
+      if (mode === "classic") {
+        this.$nextTick(() => this.initClassicBuilder());
+      }
+    },
+    useVibeScreen(screenPath) {
+      if (!screenPath) return;
+      this.pendingVibeScreenPath = screenPath;
+      this.setBuilderMode("classic");
+    },
+    initClassicBuilder() {
+      if (this.classicInitialized) {
+        this.applyPendingVibeScreen();
+        return;
+      }
+
+      const tryInit = (attempts = 0) => {
+        if (!this.$refs.builder) {
+          if (attempts < 20) {
+            this.$nextTick(() => tryInit(attempts + 1));
+          }
+          return;
+        }
+
+        controlConfig.forEach((config) => {
+          config.control.inspector.push(...globalProperties[0].inspector);
+          this.addControl(
+            config.control,
+            config.rendererComponent,
+            config.rendererBinding,
+            config.builderComponent,
+            config.builderBinding
+          );
+        });
+        this.loadFromLocalStorage();
+        this.classicInitialized = true;
+        this.applyPendingVibeScreen();
+      };
+
+      tryInit();
+    },
+    applyPendingVibeScreen() {
+      const screenPath = this.pendingVibeScreenPath;
+      if (!screenPath) return;
+
+      const tryAdd = (attempts = 0) => {
+        const builder = this.$refs.builder;
+        if (!builder?.addVibeScreenControl) {
+          if (attempts < 30) {
+            this.$nextTick(() => tryAdd(attempts + 1));
+          } else {
+            // eslint-disable-next-line no-alert
+            window.alert(
+              "Vue Component Editor control is not available. Is package-plg installed?"
+            );
+            this.pendingVibeScreenPath = null;
+          }
+          return;
+        }
+
+        const added = builder.addVibeScreenControl(screenPath);
+        if (added) {
+          this.pendingVibeScreenPath = null;
+          return;
+        }
+
+        if (attempts < 30) {
+          this.$nextTick(() => tryAdd(attempts + 1));
+        } else {
+          // eslint-disable-next-line no-alert
+          window.alert(
+            "Vue Component Editor control is not available. Is package-plg installed?"
+          );
+          this.pendingVibeScreenPath = null;
+        }
+      };
+
+      tryAdd();
+    },
     updateDataInput() {
       this.updateDataInputNow();
     },
@@ -739,11 +835,13 @@ export default {
       builderComponent,
       builderBinding
     ) {
-      // Add it to the renderer
-      this.$refs.renderer.$options.components[rendererBinding] =
-        rendererComponent;
-      // Add it to the form builder
-      this.$refs.builder.addControl(control, builderComponent, builderBinding);
+      if (this.$refs.renderer) {
+        this.$refs.renderer.$options.components[rendererBinding] =
+          rendererComponent;
+      }
+      if (this.$refs.builder) {
+        this.$refs.builder.addControl(control, builderComponent, builderBinding);
+      }
     }
   }
 };
@@ -771,6 +869,11 @@ body {
   overflow: hidden;
 }
 
+.app-root {
+  height: 100%;
+  overflow: hidden;
+}
+
 .header-bg {
   background: $primary-white;
 }
diff --git a/src/components/index.js b/src/components/index.js
index e001acd71..e763dbecf 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -54,6 +54,10 @@ import { LinkButton, CaseProgressBar } from "./renderer";
 import "../assets/css/tabs.css";
 import FormCollectionRecordControl from "./renderer/form-collection-record-control.vue";
 import FormCollectionViewControl from "./renderer/form-collection-view-control.vue";
+import VibeAppShell from "../vibe/VibeAppShell.vue";
+import VibeProjectScreen from "../vibe/components/VibeProjectScreen.vue";
+import { extractUsedVibeScreenPaths } from "../vibe/services/vibeUseScreenControl";
+import { invalidateVibeScreenRuntimeCache } from "../vibe/services/vibeProjectScreenLoader";
 
 const rendererComponents = {
   ...renderer,
@@ -105,7 +109,10 @@ export {
   DataFormatProperty,
   globalErrorsModule,
   accordions,
-  VariableNameGenerator
+  VariableNameGenerator,
+  VibeAppShell,
+  extractUsedVibeScreenPaths,
+  invalidateVibeScreenRuntimeCache,
 };
 export * from "./inspector";
 export * from "./renderer";
@@ -174,6 +181,8 @@ export default {
     Vue.component("CaseProgressBar", CaseProgressBar);
     Vue.component("FormCollectionRecordControl", FormCollectionRecordControl);
     Vue.component("FormCollectionViewControl", FormCollectionViewControl);
+    Vue.component("VibeAppShell", VibeAppShell);
+    Vue.component("VibeProjectScreen", VibeProjectScreen);
     const store = new Vuex.Store({
       modules: {
         globalErrorsModule,
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 1f616fb13..feb4f8c04 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -563,6 +563,7 @@ import Sortable from './sortable/Sortable.vue';
 import ClipboardButton from './ClipboardButton.vue';
 import ScreenTemplates from './ScreenTemplates.vue';
 import CodeEditor from "./inspector/code-editor.vue";
+import { buildVibeScreenControlFields } from "../vibe/services/vibeUseScreenControl";
 
 // To include another language in the Validator with variable processmaker
 const globalObject = typeof window === "undefined" ? global : window;
@@ -1628,6 +1629,30 @@ export default {
       this.updateState();
       this.inspect(clone);
     },
+    addVibeScreenControl(screenPath) {
+      const vueControl = this.controls.find(
+        (control) => control.component === "VueComponentRenderTemplate"
+      );
+
+      if (!vueControl) {
+        return false;
+      }
+
+      const fields = buildVibeScreenControlFields(screenPath);
+      const clone = this.cloneControl(vueControl);
+
+      clone.config.contentVue = fields.contentVue;
+      clone.config.handlerVue = fields.handlerVue;
+      clone.config.componentName = fields.componentName;
+      clone.config.label = fields.label;
+      clone.config.interactive = fields.interactive;
+      clone.config.ignoreMustache = fields.ignoreMustache;
+
+      this.config[this.currentPage].items.push(clone);
+      this.updateState();
+      this.inspect(clone);
+      return true;
+    },
     /**
      * Compares a config with an array and updates UUIDs if different.
      *
diff --git a/src/vibe-project/components/ExampleHeader.vue b/src/vibe-project/components/ExampleHeader.vue
new file mode 100644
index 000000000..a7ab5dbd1
--- /dev/null
+++ b/src/vibe-project/components/ExampleHeader.vue
@@ -0,0 +1,43 @@
+<template>
+  <header class="example-header p-3">
+    <h1 class="example-header__title">{{ title }}</h1>
+    <p v-if="subtitle" class="example-header__subtitle">{{ subtitle }}</p>
+  </header>
+</template>
+
+<script>
+export default {
+  name: "ExampleHeader",
+  props: {
+    title: {
+      type: String,
+      default: "Screen",
+    },
+    subtitle: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
+
+<style scoped>
+.example-header {
+  margin-bottom: 28px;
+}
+
+.example-header__title {
+  margin: 0 0 6px;
+  font-size: 24px;
+  font-weight: 700;
+  color: #1e1b4b;
+  letter-spacing: -0.03em;
+}
+
+.example-header__subtitle {
+  margin: 0;
+  font-size: 14px;
+  color: #6b7280;
+  line-height: 1.5;
+}
+</style>
diff --git a/src/vibe-project/components/VibeAlert.vue b/src/vibe-project/components/VibeAlert.vue
new file mode 100644
index 000000000..22e0a4cce
--- /dev/null
+++ b/src/vibe-project/components/VibeAlert.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="vibe-alert" :class="`vibe-alert--${variant}`" role="alert">
+    <div class="vibe-alert__content">
+      <strong v-if="title" class="vibe-alert__title">{{ title }}</strong>
+      <p class="vibe-alert__message">{{ message }}</p>
+    </div>
+    <button
+      v-if="dismissible"
+      type="button"
+      class="vibe-alert__close"
+      aria-label="Dismiss"
+      @click="$emit('dismiss')"
+    >
+      ×
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VibeAlert",
+  props: {
+    title: { type: String, default: "" },
+    message: { type: String, default: "Something happened." },
+    variant: {
+      type: String,
+      default: "info",
+      validator: (v) => ["info", "success", "warning", "error"].includes(v),
+    },
+    dismissible: { type: Boolean, default: false },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-alert {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 16px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.vibe-alert--info {
+  background: rgba(15, 38, 74, 0.06);
+  color: #0f264a;
+}
+
+.vibe-alert--success {
+  background: #ecfdf5;
+  color: #065f46;
+}
+
+.vibe-alert--warning {
+  background: #fffbeb;
+  color: #92400e;
+}
+
+.vibe-alert--error {
+  background: rgba(197, 48, 48, 0.08);
+  color: #9b2c2c;
+}
+
+.vibe-alert__title {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 13px;
+}
+
+.vibe-alert__message {
+  margin: 0;
+}
+
+.vibe-alert__close {
+  border: none;
+  background: none;
+  font-size: 20px;
+  line-height: 1;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  padding: 0 4px;
+}
+
+.vibe-alert__close:hover {
+  opacity: 1;
+}
+</style>
diff --git a/src/vibe-project/components/VibeBadge.vue b/src/vibe-project/components/VibeBadge.vue
new file mode 100644
index 000000000..9a7e9134a
--- /dev/null
+++ b/src/vibe-project/components/VibeBadge.vue
@@ -0,0 +1,57 @@
+<template>
+  <span class="vibe-badge" :class="`vibe-badge--${variant}`">
+    {{ label }}
+  </span>
+</template>
+
+<script>
+export default {
+  name: "VibeBadge",
+  props: {
+    label: { type: String, default: "Badge" },
+    variant: {
+      type: String,
+      default: "neutral",
+      validator: (v) => ["neutral", "success", "warning", "danger", "accent"].includes(v),
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
+.vibe-badge--neutral {
+  background: rgba(15, 38, 74, 0.08);
+  color: #4a5f78;
+}
+
+.vibe-badge--success {
+  background: #ecfdf5;
+  color: #059669;
+}
+
+.vibe-badge--warning {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+.vibe-badge--danger {
+  background: rgba(197, 48, 48, 0.1);
+  color: #c53030;
+}
+
+.vibe-badge--accent {
+  background: rgba(183, 240, 107, 0.35);
+  color: #0f264a;
+}
+</style>
diff --git a/src/vibe-project/components/VibeButton.vue b/src/vibe-project/components/VibeButton.vue
new file mode 100644
index 000000000..f11760bbc
--- /dev/null
+++ b/src/vibe-project/components/VibeButton.vue
@@ -0,0 +1,120 @@
+<template>
+  <button
+    :type="nativeType"
+    class="vibe-button"
+    :class="[
+      `vibe-button--${variant}`,
+      `vibe-button--${size}`,
+      { 'vibe-button--block': block, 'vibe-button--disabled': disabled },
+    ]"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <span v-if="icon" class="vibe-button__icon" aria-hidden="true">{{ icon }}</span>
+    <span class="vibe-button__label">{{ label }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: "VibeButton",
+  props: {
+    label: { type: String, default: "Button" },
+    variant: {
+      type: String,
+      default: "primary",
+      validator: (v) => ["primary", "secondary", "ghost", "danger"].includes(v),
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: (v) => ["sm", "md", "lg"].includes(v),
+    },
+    nativeType: { type: String, default: "button" },
+    block: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    icon: { type: String, default: "" },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: none;
+  border-radius: 999px;
+  font-family: Inter, system-ui, sans-serif;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+
+.vibe-button--sm {
+  padding: 8px 14px;
+  font-size: 12px;
+}
+
+.vibe-button--md {
+  padding: 11px 18px;
+  font-size: 14px;
+}
+
+.vibe-button--lg {
+  padding: 14px 22px;
+  font-size: 15px;
+}
+
+.vibe-button--primary {
+  background: linear-gradient(135deg, #1a3a6b 0%, #0f264a 100%);
+  color: #fff;
+  box-shadow: 0 10px 28px rgba(15, 38, 74, 0.22);
+}
+
+.vibe-button--primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 14px 32px rgba(15, 38, 74, 0.28);
+}
+
+.vibe-button--secondary {
+  background: #b7f06b;
+  color: #0f264a;
+  box-shadow: 0 8px 20px rgba(183, 240, 107, 0.35);
+}
+
+.vibe-button--secondary:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.vibe-button--ghost {
+  background: rgba(15, 38, 74, 0.06);
+  color: #0f264a;
+}
+
+.vibe-button--ghost:hover:not(:disabled) {
+  background: rgba(15, 38, 74, 0.1);
+}
+
+.vibe-button--danger {
+  background: #c53030;
+  color: #fff;
+}
+
+.vibe-button--block {
+  width: 100%;
+}
+
+.vibe-button--disabled,
+.vibe-button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.vibe-button__icon {
+  font-size: 1.1em;
+  line-height: 1;
+}
+</style>
diff --git a/src/vibe-project/components/VibeCard.vue b/src/vibe-project/components/VibeCard.vue
new file mode 100644
index 000000000..b6bf1bdaf
--- /dev/null
+++ b/src/vibe-project/components/VibeCard.vue
@@ -0,0 +1,103 @@
+<template>
+  <article class="vibe-card" :class="{ 'vibe-card--hoverable': hoverable }">
+    <header v-if="title || subtitle" class="vibe-card__header">
+      <div class="vibe-card__heading">
+        <h3 v-if="title" class="vibe-card__title">{{ title }}</h3>
+        <p v-if="subtitle" class="vibe-card__subtitle">{{ subtitle }}</p>
+      </div>
+      <vibe-badge v-if="badge" :label="badge" :variant="badgeVariant" />
+    </header>
+    <div v-if="$slots.default" class="vibe-card__body">
+      <slot />
+    </div>
+    <footer v-if="actionLabel" class="vibe-card__footer">
+      <button type="button" class="vibe-card__action" @click="$emit('action')">
+        {{ actionLabel }}
+      </button>
+    </footer>
+  </article>
+</template>
+
+<script>
+import VibeBadge from "./VibeBadge.vue";
+
+export default {
+  name: "VibeCard",
+  components: { VibeBadge },
+  props: {
+    title: { type: String, default: "Card title" },
+    subtitle: { type: String, default: "" },
+    badge: { type: String, default: "" },
+    badgeVariant: { type: String, default: "neutral" },
+    actionLabel: { type: String, default: "" },
+    hoverable: { type: Boolean, default: false },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-card {
+  background: #fff;
+  border-radius: 20px;
+  padding: 20px;
+  box-shadow: 0 10px 40px rgba(15, 38, 74, 0.08);
+}
+
+.vibe-card--hoverable {
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.vibe-card--hoverable:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 16px 48px rgba(15, 38, 74, 0.12);
+}
+
+.vibe-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.vibe-card__title {
+  margin: 0 0 4px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f264a;
+  letter-spacing: -0.02em;
+}
+
+.vibe-card__subtitle {
+  margin: 0;
+  font-size: 13px;
+  color: #7a8fa8;
+  line-height: 1.5;
+}
+
+.vibe-card__body {
+  font-size: 14px;
+  color: #4a5f78;
+  line-height: 1.6;
+}
+
+.vibe-card__footer {
+  margin-top: 16px;
+  padding-top: 14px;
+  border-top: 1px solid rgba(15, 38, 74, 0.08);
+}
+
+.vibe-card__action {
+  border: none;
+  background: none;
+  padding: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: #0f264a;
+  cursor: pointer;
+}
+
+.vibe-card__action:hover {
+  color: #1a3a6b;
+}
+</style>
diff --git a/src/vibe-project/components/VibeCartItem.vue b/src/vibe-project/components/VibeCartItem.vue
new file mode 100644
index 000000000..a447329b7
--- /dev/null
+++ b/src/vibe-project/components/VibeCartItem.vue
@@ -0,0 +1,186 @@
+<template>
+  <li class="vibe-cart-item" data-cy="cart-item">
+    <div class="vibe-cart-item__info">
+      <span class="vibe-cart-item__emoji" aria-hidden="true">{{ emoji }}</span>
+      <div class="vibe-cart-item__details">
+        <span class="vibe-cart-item__name">{{ name }}</span>
+        <span class="vibe-cart-item__unit-price">{{ formattedUnitPrice }}</span>
+      </div>
+    </div>
+    <div class="vibe-cart-item__controls">
+      <div class="vibe-cart-item__quantity" role="group" :aria-label="`Cantidad de ${name}`">
+        <button
+          type="button"
+          class="vibe-cart-item__qty-btn"
+          aria-label="Disminuir cantidad"
+          data-cy="decrease-qty"
+          @click="$emit('decrease')"
+        >
+          −
+        </button>
+        <span class="vibe-cart-item__qty-value" data-cy="item-quantity">{{ quantity }}</span>
+        <button
+          type="button"
+          class="vibe-cart-item__qty-btn"
+          aria-label="Aumentar cantidad"
+          data-cy="increase-qty"
+          @click="$emit('increase')"
+        >
+          +
+        </button>
+      </div>
+      <span class="vibe-cart-item__line-total">{{ formattedLineTotal }}</span>
+      <button
+        type="button"
+        class="vibe-cart-item__remove"
+        aria-label="Eliminar del carrito"
+        data-cy="remove-item"
+        @click="$emit('remove')"
+      >
+        ×
+      </button>
+    </div>
+  </li>
+</template>
+
+<script>
+export default {
+  name: "VibeCartItem",
+  props: {
+    name: { type: String, required: true },
+    price: { type: Number, required: true },
+    quantity: { type: Number, required: true },
+    emoji: { type: String, default: "📦" },
+    currency: { type: String, default: "USD" },
+  },
+  computed: {
+    formattedUnitPrice() {
+      return new Intl.NumberFormat("es-AR", {
+        style: "currency",
+        currency: this.currency,
+      }).format(this.price);
+    },
+    formattedLineTotal() {
+      return new Intl.NumberFormat("es-AR", {
+        style: "currency",
+        currency: this.currency,
+      }).format(this.price * this.quantity);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-cart-item {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(15, 38, 74, 0.08);
+  list-style: none;
+}
+
+.vibe-cart-item:last-child {
+  border-bottom: none;
+}
+
+.vibe-cart-item__info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.vibe-cart-item__emoji {
+  font-size: 24px;
+  line-height: 1;
+}
+
+.vibe-cart-item__details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.vibe-cart-item__name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #0f264a;
+}
+
+.vibe-cart-item__unit-price {
+  font-size: 12px;
+  color: #7a8fa8;
+}
+
+.vibe-cart-item__controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.vibe-cart-item__quantity {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: #f4f7fa;
+  border-radius: 999px;
+  padding: 2px;
+}
+
+.vibe-cart-item__qty-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 50%;
+  background: #fff;
+  color: #0f264a;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.vibe-cart-item__qty-btn:hover {
+  background: rgba(15, 38, 74, 0.08);
+}
+
+.vibe-cart-item__qty-value {
+  min-width: 24px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: #0f264a;
+}
+
+.vibe-cart-item__line-total {
+  flex: 1;
+  text-align: right;
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f264a;
+}
+
+.vibe-cart-item__remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(197, 48, 48, 0.08);
+  color: #c53030;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.vibe-cart-item__remove:hover {
+  background: rgba(197, 48, 48, 0.15);
+}
+</style>
diff --git a/src/vibe-project/components/VibeFeatureBlock.vue b/src/vibe-project/components/VibeFeatureBlock.vue
new file mode 100644
index 000000000..c8915b2fa
--- /dev/null
+++ b/src/vibe-project/components/VibeFeatureBlock.vue
@@ -0,0 +1,131 @@
+<template>
+  <section class="vibe-feature-block">
+    <div class="vibe-feature-block__icon" aria-hidden="true">
+      <svg viewBox="0 0 24 24" fill="none">
+        <path
+          d="M12 3 4 7v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V7l-8-4Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linejoin="round"
+        />
+        <path
+          d="m9 12 2 2 4-4"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+    <div class="vibe-feature-block__content">
+      <h3 class="vibe-feature-block__title">{{ title }}</h3>
+      <p class="vibe-feature-block__description">{{ description }}</p>
+      <ul class="vibe-feature-block__list">
+        <li v-for="item in featureList" :key="item">{{ item }}</li>
+      </ul>
+      <vibe-button
+        v-if="ctaLabel"
+        :label="ctaLabel"
+        variant="secondary"
+        size="sm"
+        @click="$emit('cta')"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import VibeButton from "./VibeButton.vue";
+
+export default {
+  name: "VibeFeatureBlock",
+  components: { VibeButton },
+  props: {
+    title: { type: String, default: "Enterprise ready" },
+    description: {
+      type: String,
+      default: "Ship screens faster with reusable components and visual composition.",
+    },
+    features: {
+      type: String,
+      default: "Visual editor,Live preview,Nested components",
+    },
+    ctaLabel: { type: String, default: "Learn more" },
+  },
+  computed: {
+    featureList() {
+      return this.features
+        .split(",")
+        .map((f) => f.trim())
+        .filter(Boolean);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-feature-block {
+  display: flex;
+  gap: 18px;
+  padding: 22px;
+  border-radius: 20px;
+  background: linear-gradient(135deg, rgba(183, 240, 107, 0.18) 0%, rgba(15, 38, 74, 0.04) 100%);
+  border: 1px solid rgba(15, 38, 74, 0.06);
+}
+
+.vibe-feature-block__icon {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  background: #0f264a;
+  color: #b7f06b;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vibe-feature-block__icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.vibe-feature-block__title {
+  margin: 0 0 6px;
+  font-size: 17px;
+  font-weight: 700;
+  color: #0f264a;
+}
+
+.vibe-feature-block__description {
+  margin: 0 0 12px;
+  font-size: 13px;
+  color: #4a5f78;
+  line-height: 1.55;
+}
+
+.vibe-feature-block__list {
+  margin: 0 0 14px;
+  padding: 0;
+  list-style: none;
+}
+
+.vibe-feature-block__list li {
+  position: relative;
+  padding-left: 18px;
+  margin-bottom: 6px;
+  font-size: 13px;
+  color: #0f264a;
+}
+
+.vibe-feature-block__list li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 7px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #b7f06b;
+}
+</style>
diff --git a/src/vibe-project/components/VibeFlightCard.vue b/src/vibe-project/components/VibeFlightCard.vue
new file mode 100644
index 000000000..e2cc1597f
--- /dev/null
+++ b/src/vibe-project/components/VibeFlightCard.vue
@@ -0,0 +1,264 @@
+<template>
+  <article
+    class="vibe-flight-card"
+    :class="{ 'vibe-flight-card--selected': selected }"
+    :data-cy="`flight-${flightNumber}`"
+  >
+    <div class="vibe-flight-card__header">
+      <div class="vibe-flight-card__airline">
+        <span class="vibe-flight-card__logo" aria-hidden="true">{{ airlineEmoji }}</span>
+        <div>
+          <h3 class="vibe-flight-card__airline-name">{{ airline }}</h3>
+          <p class="vibe-flight-card__flight-number">{{ flightNumber }}</p>
+        </div>
+      </div>
+      <vibe-badge :label="stopsLabel" :variant="stops === 0 ? 'accent' : 'neutral'" />
+    </div>
+
+    <div class="vibe-flight-card__route">
+      <div class="vibe-flight-card__endpoint">
+        <span class="vibe-flight-card__time">{{ departureTime }}</span>
+        <span class="vibe-flight-card__code">{{ origin }}</span>
+      </div>
+
+      <div class="vibe-flight-card__timeline" aria-hidden="true">
+        <span class="vibe-flight-card__duration">{{ duration }}</span>
+        <div class="vibe-flight-card__line">
+          <span class="vibe-flight-card__dot" />
+          <span class="vibe-flight-card__track" />
+          <span class="vibe-flight-card__plane">✈</span>
+          <span class="vibe-flight-card__track" />
+          <span class="vibe-flight-card__dot" />
+        </div>
+      </div>
+
+      <div class="vibe-flight-card__endpoint vibe-flight-card__endpoint--right">
+        <span class="vibe-flight-card__time">{{ arrivalTime }}</span>
+        <span class="vibe-flight-card__code">{{ destination }}</span>
+      </div>
+    </div>
+
+    <div class="vibe-flight-card__footer">
+      <div class="vibe-flight-card__price-block">
+        <span class="vibe-flight-card__price">{{ formattedPrice }}</span>
+        <span class="vibe-flight-card__price-note">per passenger</span>
+      </div>
+      <vibe-button
+        :label="selected ? 'Selected' : 'Select flight'"
+        :variant="selected ? 'secondary' : 'primary'"
+        size="sm"
+        :disabled="selected"
+        data-cy="select-flight"
+        @click="$emit('select')"
+      />
+    </div>
+  </article>
+</template>
+
+<script>
+import VibeBadge from "./VibeBadge.vue";
+import VibeButton from "./VibeButton.vue";
+
+export default {
+  name: "VibeFlightCard",
+  components: { VibeBadge, VibeButton },
+  props: {
+    airline: { type: String, required: true },
+    airlineEmoji: { type: String, default: "✈" },
+    flightNumber: { type: String, required: true },
+    origin: { type: String, required: true },
+    destination: { type: String, required: true },
+    departureTime: { type: String, required: true },
+    arrivalTime: { type: String, required: true },
+    duration: { type: String, required: true },
+    stops: { type: Number, default: 0 },
+    price: { type: Number, required: true },
+    currency: { type: String, default: "USD" },
+    selected: { type: Boolean, default: false },
+  },
+  computed: {
+    formattedPrice() {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: this.currency,
+      }).format(this.price);
+    },
+    stopsLabel() {
+      if (this.stops === 0) return "Nonstop";
+      if (this.stops === 1) return "1 stop";
+      return `${this.stops} stops`;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-flight-card {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px;
+  background: #fff;
+  border-radius: 20px;
+  box-shadow: 0 10px 40px rgba(15, 38, 74, 0.08);
+  border: 2px solid transparent;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+}
+
+.vibe-flight-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 16px 48px rgba(15, 38, 74, 0.12);
+}
+
+.vibe-flight-card--selected {
+  border-color: #b7f06b;
+  box-shadow: 0 16px 48px rgba(183, 240, 107, 0.25);
+}
+
+.vibe-flight-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.vibe-flight-card__airline {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.vibe-flight-card__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  background: rgba(15, 38, 74, 0.06);
+  font-size: 22px;
+}
+
+.vibe-flight-card__airline-name {
+  margin: 0 0 2px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #0f264a;
+}
+
+.vibe-flight-card__flight-number {
+  margin: 0;
+  font-size: 12px;
+  color: #7a8fa8;
+}
+
+.vibe-flight-card__route {
+  display: grid;
+  grid-template-columns: 1fr 1.4fr 1fr;
+  gap: 12px;
+  align-items: center;
+}
+
+.vibe-flight-card__endpoint {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.vibe-flight-card__endpoint--right {
+  text-align: right;
+}
+
+.vibe-flight-card__time {
+  font-size: 20px;
+  font-weight: 700;
+  color: #0f264a;
+  letter-spacing: -0.02em;
+}
+
+.vibe-flight-card__code {
+  font-size: 13px;
+  font-weight: 600;
+  color: #7a8fa8;
+}
+
+.vibe-flight-card__timeline {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.vibe-flight-card__duration {
+  font-size: 12px;
+  color: #7a8fa8;
+}
+
+.vibe-flight-card__line {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.vibe-flight-card__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #0f264a;
+  flex-shrink: 0;
+}
+
+.vibe-flight-card__track {
+  flex: 1;
+  height: 2px;
+  background: rgba(15, 38, 74, 0.12);
+}
+
+.vibe-flight-card__plane {
+  font-size: 14px;
+  color: #0f264a;
+  margin: 0 4px;
+}
+
+.vibe-flight-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 14px;
+  border-top: 1px solid rgba(15, 38, 74, 0.08);
+}
+
+.vibe-flight-card__price-block {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.vibe-flight-card__price {
+  font-size: 18px;
+  font-weight: 700;
+  color: #0f264a;
+}
+
+.vibe-flight-card__price-note {
+  font-size: 11px;
+  color: #7a8fa8;
+}
+
+@media (max-width: 560px) {
+  .vibe-flight-card__route {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .vibe-flight-card__endpoint--right {
+    text-align: left;
+  }
+
+  .vibe-flight-card__footer {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>
diff --git a/src/vibe-project/components/VibeFlightSearchForm.vue b/src/vibe-project/components/VibeFlightSearchForm.vue
new file mode 100644
index 000000000..41bb45f14
--- /dev/null
+++ b/src/vibe-project/components/VibeFlightSearchForm.vue
@@ -0,0 +1,263 @@
+<template>
+  <form class="vibe-flight-search-form" @submit.prevent="handleSubmit">
+    <div class="vibe-flight-search-form__trip-type" role="group" aria-label="Trip type">
+      <button
+        v-for="option in tripTypeOptions"
+        :key="option.value"
+        type="button"
+        class="vibe-flight-search-form__trip-option"
+        :class="{ 'vibe-flight-search-form__trip-option--active': tripType === option.value }"
+        :data-cy="`trip-type-${option.value}`"
+        @click="setTripType(option.value)"
+      >
+        {{ option.label }}
+      </button>
+    </div>
+
+    <div class="vibe-flight-search-form__row">
+      <vibe-input
+        v-model="localForm.origin"
+        label="From"
+        placeholder="City or airport"
+        data-cy="flight-origin"
+      />
+      <button
+        type="button"
+        class="vibe-flight-search-form__swap"
+        aria-label="Swap origin and destination"
+        data-cy="swap-airports"
+        @click="swapAirports"
+      >
+        ⇄
+      </button>
+      <vibe-input
+        v-model="localForm.destination"
+        label="To"
+        placeholder="City or airport"
+        data-cy="flight-destination"
+      />
+    </div>
+
+    <div class="vibe-flight-search-form__row">
+      <vibe-input
+        v-model="localForm.departureDate"
+        label="Departure"
+        type="date"
+        data-cy="departure-date"
+      />
+      <vibe-input
+        v-if="tripType === 'round-trip'"
+        v-model="localForm.returnDate"
+        label="Return"
+        type="date"
+        data-cy="return-date"
+      />
+    </div>
+
+    <div class="vibe-flight-search-form__row">
+      <div class="vibe-flight-search-form__field">
+        <label for="passengers" class="vibe-flight-search-form__label">Passengers</label>
+        <select
+          id="passengers"
+          v-model.number="localForm.passengers"
+          class="vibe-flight-search-form__select"
+          data-cy="passengers"
+        >
+          <option v-for="count in 6" :key="count" :value="count">
+            {{ count }} {{ count === 1 ? "passenger" : "passengers" }}
+          </option>
+        </select>
+      </div>
+
+      <div class="vibe-flight-search-form__field">
+        <label for="cabin" class="vibe-flight-search-form__label">Cabin class</label>
+        <select
+          id="cabin"
+          v-model="localForm.cabinClass"
+          class="vibe-flight-search-form__select"
+          data-cy="cabin-class"
+        >
+          <option value="economy">Economy</option>
+          <option value="premium">Premium Economy</option>
+          <option value="business">Business</option>
+          <option value="first">First Class</option>
+        </select>
+      </div>
+    </div>
+
+    <vibe-button
+      label="Search flights"
+      variant="primary"
+      native-type="submit"
+      icon="✈"
+      block
+      data-cy="search-flights"
+    />
+  </form>
+</template>
+
+<script>
+import VibeButton from "./VibeButton.vue";
+import VibeInput from "./VibeInput.vue";
+
+export default {
+  name: "VibeFlightSearchForm",
+  components: { VibeButton, VibeInput },
+  props: {
+    origin: { type: String, default: "" },
+    destination: { type: String, default: "" },
+    departureDate: { type: String, default: "" },
+    returnDate: { type: String, default: "" },
+    passengers: { type: Number, default: 1 },
+    cabinClass: { type: String, default: "economy" },
+    initialTripType: {
+      type: String,
+      default: "round-trip",
+      validator: (v) => ["round-trip", "one-way"].includes(v),
+    },
+  },
+  data() {
+    return {
+      tripType: this.initialTripType,
+      localForm: {
+        origin: this.origin,
+        destination: this.destination,
+        departureDate: this.departureDate,
+        returnDate: this.returnDate,
+        passengers: this.passengers,
+        cabinClass: this.cabinClass,
+      },
+      tripTypeOptions: [
+        { value: "round-trip", label: "Round trip" },
+        { value: "one-way", label: "One way" },
+      ],
+    };
+  },
+  methods: {
+    setTripType(value) {
+      this.tripType = value;
+      if (value === "one-way") {
+        this.localForm.returnDate = "";
+      }
+    },
+    swapAirports() {
+      const temp = this.localForm.origin;
+      this.localForm.origin = this.localForm.destination;
+      this.localForm.destination = temp;
+    },
+    handleSubmit() {
+      this.$emit("search", {
+        ...this.localForm,
+        tripType: this.tripType,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-flight-search-form {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.vibe-flight-search-form__trip-type {
+  display: flex;
+  gap: 8px;
+}
+
+.vibe-flight-search-form__trip-option {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 999px;
+  background: rgba(15, 38, 74, 0.06);
+  color: #4a5f78;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.vibe-flight-search-form__trip-option:hover {
+  background: rgba(15, 38, 74, 0.1);
+  color: #0f264a;
+}
+
+.vibe-flight-search-form__trip-option--active {
+  background: #0f264a;
+  color: #fff;
+}
+
+.vibe-flight-search-form__row {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 12px;
+  align-items: end;
+}
+
+.vibe-flight-search-form__row:last-of-type {
+  grid-template-columns: 1fr 1fr;
+}
+
+.vibe-flight-search-form__swap {
+  width: 40px;
+  height: 40px;
+  margin-bottom: 2px;
+  border: none;
+  border-radius: 999px;
+  background: rgba(183, 240, 107, 0.35);
+  color: #0f264a;
+  font-size: 18px;
+  cursor: pointer;
+  transition: transform 0.15s ease, background 0.15s ease;
+}
+
+.vibe-flight-search-form__swap:hover {
+  transform: rotate(180deg);
+  background: #b7f06b;
+}
+
+.vibe-flight-search-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vibe-flight-search-form__label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #0f264a;
+}
+
+.vibe-flight-search-form__select {
+  padding: 12px 16px;
+  border: none;
+  border-radius: 16px;
+  font-size: 14px;
+  color: #0f264a;
+  background: #f4f7fa;
+  outline: none;
+  transition: box-shadow 0.15s ease, background 0.15s ease;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a5f78' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 16px center;
+}
+
+.vibe-flight-search-form__select:focus {
+  background-color: #fff;
+  box-shadow: 0 0 0 3px rgba(15, 38, 74, 0.12);
+}
+
+@media (max-width: 640px) {
+  .vibe-flight-search-form__row {
+    grid-template-columns: 1fr;
+  }
+
+  .vibe-flight-search-form__swap {
+    justify-self: center;
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/src/vibe-project/components/VibeFlightSummary.vue b/src/vibe-project/components/VibeFlightSummary.vue
new file mode 100644
index 000000000..b4f41367e
--- /dev/null
+++ b/src/vibe-project/components/VibeFlightSummary.vue
@@ -0,0 +1,264 @@
+<template>
+  <aside class="vibe-flight-summary" data-cy="flight-summary">
+    <header class="vibe-flight-summary__header">
+      <h2 class="vibe-flight-summary__title">Booking summary</h2>
+      <vibe-badge :label="tripTypeLabel" variant="neutral" />
+    </header>
+
+    <div class="vibe-flight-summary__route">
+      <div class="vibe-flight-summary__cities">
+        <span class="vibe-flight-summary__city">{{ origin }}</span>
+        <span class="vibe-flight-summary__arrow" aria-hidden="true">→</span>
+        <span class="vibe-flight-summary__city">{{ destination }}</span>
+      </div>
+      <p class="vibe-flight-summary__dates">{{ dateSummary }}</p>
+    </div>
+
+    <div v-if="flight" class="vibe-flight-summary__flight">
+      <div class="vibe-flight-summary__flight-row">
+        <span class="vibe-flight-summary__label">Airline</span>
+        <span class="vibe-flight-summary__value">{{ flight.airline }}</span>
+      </div>
+      <div class="vibe-flight-summary__flight-row">
+        <span class="vibe-flight-summary__label">Flight</span>
+        <span class="vibe-flight-summary__value">{{ flight.flightNumber }}</span>
+      </div>
+      <div class="vibe-flight-summary__flight-row">
+        <span class="vibe-flight-summary__label">Schedule</span>
+        <span class="vibe-flight-summary__value">
+          {{ flight.departureTime }} – {{ flight.arrivalTime }}
+        </span>
+      </div>
+      <div class="vibe-flight-summary__flight-row">
+        <span class="vibe-flight-summary__label">Duration</span>
+        <span class="vibe-flight-summary__value">{{ flight.duration }}</span>
+      </div>
+    </div>
+
+    <p v-else class="vibe-flight-summary__empty">
+      Select a flight to see your booking details here.
+    </p>
+
+    <div class="vibe-flight-summary__meta">
+      <div class="vibe-flight-summary__flight-row">
+        <span class="vibe-flight-summary__label">Passengers</span>
+        <span class="vibe-flight-summary__value">{{ passengersLabel }}</span>
+      </div>
+      <div class="vibe-flight-summary__flight-row">
+        <span class="vibe-flight-summary__label">Cabin</span>
+        <span class="vibe-flight-summary__value">{{ cabinLabel }}</span>
+      </div>
+    </div>
+
+    <div class="vibe-flight-summary__total">
+      <span class="vibe-flight-summary__total-label">Total</span>
+      <span class="vibe-flight-summary__total-value">{{ formattedTotal }}</span>
+    </div>
+
+    <div class="vibe-flight-summary__actions">
+      <vibe-button
+        label="Confirm booking"
+        variant="primary"
+        block
+        :disabled="!flight"
+        data-cy="confirm-booking"
+        @click="$emit('confirm')"
+      />
+      <vibe-button
+        label="Clear selection"
+        variant="ghost"
+        block
+        :disabled="!flight"
+        data-cy="clear-selection"
+        @click="$emit('clear')"
+      />
+    </div>
+  </aside>
+</template>
+
+<script>
+import VibeBadge from "./VibeBadge.vue";
+import VibeButton from "./VibeButton.vue";
+
+const CABIN_LABELS = {
+  economy: "Economy",
+  premium: "Premium Economy",
+  business: "Business",
+  first: "First Class",
+};
+
+export default {
+  name: "VibeFlightSummary",
+  components: { VibeBadge, VibeButton },
+  props: {
+    origin: { type: String, default: "" },
+    destination: { type: String, default: "" },
+    departureDate: { type: String, default: "" },
+    returnDate: { type: String, default: "" },
+    tripType: { type: String, default: "round-trip" },
+    passengers: { type: Number, default: 1 },
+    cabinClass: { type: String, default: "economy" },
+    flight: { type: Object, default: null },
+    currency: { type: String, default: "USD" },
+  },
+  computed: {
+    tripTypeLabel() {
+      return this.tripType === "one-way" ? "One way" : "Round trip";
+    },
+    dateSummary() {
+      if (!this.departureDate) return "Dates not selected";
+      if (this.tripType === "one-way" || !this.returnDate) {
+        return this.formatDate(this.departureDate);
+      }
+      return `${this.formatDate(this.departureDate)} – ${this.formatDate(this.returnDate)}`;
+    },
+    passengersLabel() {
+      return `${this.passengers} ${this.passengers === 1 ? "passenger" : "passengers"}`;
+    },
+    cabinLabel() {
+      return CABIN_LABELS[this.cabinClass] || this.cabinClass;
+    },
+    totalPrice() {
+      if (!this.flight) return 0;
+      const multiplier = this.tripType === "round-trip" ? 2 : 1;
+      return this.flight.price * this.passengers * multiplier;
+    },
+    formattedTotal() {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: this.currency,
+      }).format(this.totalPrice);
+    },
+  },
+  methods: {
+    formatDate(value) {
+      if (!value) return "";
+      return new Date(`${value}T12:00:00`).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-flight-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 20px;
+  background: #fff;
+  border-radius: 20px;
+  box-shadow: 0 10px 40px rgba(15, 38, 74, 0.08);
+  position: sticky;
+  top: 24px;
+}
+
+.vibe-flight-summary__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.vibe-flight-summary__title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #0f264a;
+}
+
+.vibe-flight-summary__route {
+  padding: 14px;
+  border-radius: 16px;
+  background: rgba(15, 38, 74, 0.04);
+}
+
+.vibe-flight-summary__cities {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.vibe-flight-summary__city {
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f264a;
+}
+
+.vibe-flight-summary__arrow {
+  color: #7a8fa8;
+}
+
+.vibe-flight-summary__dates {
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: #7a8fa8;
+}
+
+.vibe-flight-summary__flight,
+.vibe-flight-summary__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.vibe-flight-summary__flight-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+}
+
+.vibe-flight-summary__label {
+  color: #7a8fa8;
+}
+
+.vibe-flight-summary__value {
+  font-weight: 600;
+  color: #0f264a;
+  text-align: right;
+}
+
+.vibe-flight-summary__empty {
+  margin: 0;
+  padding: 16px;
+  text-align: center;
+  font-size: 13px;
+  color: #7a8fa8;
+  background: rgba(15, 38, 74, 0.04);
+  border-radius: 16px;
+}
+
+.vibe-flight-summary__total {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 14px;
+  border-top: 1px solid rgba(15, 38, 74, 0.08);
+}
+
+.vibe-flight-summary__total-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #4a5f78;
+}
+
+.vibe-flight-summary__total-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #0f264a;
+  letter-spacing: -0.02em;
+}
+
+.vibe-flight-summary__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>
diff --git a/src/vibe-project/components/VibeInput.vue b/src/vibe-project/components/VibeInput.vue
new file mode 100644
index 000000000..e38271b07
--- /dev/null
+++ b/src/vibe-project/components/VibeInput.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="vibe-input">
+    <label v-if="label" :for="inputId" class="vibe-input__label">{{ label }}</label>
+    <input
+      :id="inputId"
+      class="vibe-input__field"
+      :type="type"
+      :value="value"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :data-cy="dataCy"
+      @input="$emit('input', $event.target.value)"
+    />
+    <p v-if="hint" class="vibe-input__hint">{{ hint }}</p>
+  </div>
+</template>
+
+<script>
+let inputCounter = 0;
+
+export default {
+  name: "VibeInput",
+  props: {
+    label: { type: String, default: "Label" },
+    value: { type: String, default: "" },
+    placeholder: { type: String, default: "" },
+    type: { type: String, default: "text" },
+    hint: { type: String, default: "" },
+    disabled: { type: Boolean, default: false },
+    dataCy: { type: String, default: "" },
+  },
+  data() {
+    inputCounter += 1;
+    return { inputId: `vibe-input-${inputCounter}` };
+  },
+};
+</script>
+
+<style scoped>
+.vibe-input {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vibe-input__label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #0f264a;
+}
+
+.vibe-input__field {
+  padding: 12px 16px;
+  border: none;
+  border-radius: 16px;
+  font-size: 14px;
+  color: #0f264a;
+  background: #f4f7fa;
+  outline: none;
+  transition: box-shadow 0.15s ease, background 0.15s ease;
+}
+
+.vibe-input__field:focus {
+  background: #fff;
+  box-shadow: 0 0 0 3px rgba(15, 38, 74, 0.12);
+}
+
+.vibe-input__field::placeholder {
+  color: #9ca3af;
+}
+
+.vibe-input__field:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.vibe-input__hint {
+  margin: 0;
+  font-size: 12px;
+  color: #7a8fa8;
+}
+</style>
diff --git a/src/vibe-project/components/VibePosCart.vue b/src/vibe-project/components/VibePosCart.vue
new file mode 100644
index 000000000..9878c25db
--- /dev/null
+++ b/src/vibe-project/components/VibePosCart.vue
@@ -0,0 +1,205 @@
+<template>
+  <aside class="vibe-pos-cart" data-cy="pos-cart">
+    <header class="vibe-pos-cart__header">
+      <div>
+        <h2 class="vibe-pos-cart__title">{{ title }}</h2>
+        <p class="vibe-pos-cart__subtitle">{{ itemCount }} {{ itemCount === 1 ? "artículo" : "artículos" }}</p>
+      </div>
+      <vibe-button
+        v-if="items.length"
+        label="Vaciar"
+        variant="ghost"
+        size="sm"
+        data-cy="clear-cart"
+        @click="$emit('clear')"
+      />
+    </header>
+
+    <div v-if="!items.length" class="vibe-pos-cart__empty">
+      <span class="vibe-pos-cart__empty-icon" aria-hidden="true">🛒</span>
+      <p class="vibe-pos-cart__empty-text">{{ emptyMessage }}</p>
+    </div>
+
+    <ul v-else class="vibe-pos-cart__items">
+      <vibe-cart-item
+        v-for="item in items"
+        :key="item.id"
+        :name="item.name"
+        :price="item.price"
+        :quantity="item.quantity"
+        :emoji="item.emoji"
+        :currency="currency"
+        @increase="$emit('increase', item.id)"
+        @decrease="$emit('decrease', item.id)"
+        @remove="$emit('remove', item.id)"
+      />
+    </ul>
+
+    <footer v-if="items.length" class="vibe-pos-cart__footer">
+      <div class="vibe-pos-cart__totals">
+        <div class="vibe-pos-cart__row">
+          <span>Subtotal</span>
+          <span data-cy="cart-subtotal">{{ formattedSubtotal }}</span>
+        </div>
+        <div class="vibe-pos-cart__row">
+          <span>IVA ({{ taxRate }}%)</span>
+          <span data-cy="cart-tax">{{ formattedTax }}</span>
+        </div>
+        <div class="vibe-pos-cart__row vibe-pos-cart__row--total">
+          <span>Total</span>
+          <span data-cy="cart-total">{{ formattedTotal }}</span>
+        </div>
+      </div>
+      <vibe-button
+        label="Cobrar"
+        variant="primary"
+        block
+        size="lg"
+        data-cy="checkout"
+        @click="$emit('checkout')"
+      />
+    </footer>
+  </aside>
+</template>
+
+<script>
+import VibeButton from "./VibeButton.vue";
+import VibeCartItem from "./VibeCartItem.vue";
+
+export default {
+  name: "VibePosCart",
+  components: { VibeButton, VibeCartItem },
+  props: {
+    items: { type: Array, default: () => [] },
+    title: { type: String, default: "Carrito" },
+    emptyMessage: { type: String, default: "Agregue productos desde el catálogo" },
+    taxRate: { type: Number, default: 21 },
+    currency: { type: String, default: "USD" },
+  },
+  computed: {
+    itemCount() {
+      return this.items.reduce((sum, item) => sum + item.quantity, 0);
+    },
+    subtotal() {
+      return this.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
+    },
+    tax() {
+      return this.subtotal * (this.taxRate / 100);
+    },
+    total() {
+      return this.subtotal + this.tax;
+    },
+    formattedSubtotal() {
+      return this.formatCurrency(this.subtotal);
+    },
+    formattedTax() {
+      return this.formatCurrency(this.tax);
+    },
+    formattedTotal() {
+      return this.formatCurrency(this.total);
+    },
+  },
+  methods: {
+    formatCurrency(value) {
+      return new Intl.NumberFormat("es-AR", {
+        style: "currency",
+        currency: this.currency,
+      }).format(value);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-pos-cart {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 20px;
+  box-shadow: 0 10px 40px rgba(15, 38, 74, 0.08);
+  height: 100%;
+  min-height: 400px;
+}
+
+.vibe-pos-cart__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 20px 20px 16px;
+  border-bottom: 1px solid rgba(15, 38, 74, 0.08);
+}
+
+.vibe-pos-cart__title {
+  margin: 0 0 4px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #0f264a;
+  letter-spacing: -0.02em;
+}
+
+.vibe-pos-cart__subtitle {
+  margin: 0;
+  font-size: 13px;
+  color: #7a8fa8;
+}
+
+.vibe-pos-cart__empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 40px 24px;
+  text-align: center;
+}
+
+.vibe-pos-cart__empty-icon {
+  font-size: 48px;
+  line-height: 1;
+  opacity: 0.5;
+}
+
+.vibe-pos-cart__empty-text {
+  margin: 0;
+  font-size: 14px;
+  color: #7a8fa8;
+  line-height: 1.5;
+}
+
+.vibe-pos-cart__items {
+  flex: 1;
+  overflow-y: auto;
+  margin: 0;
+  padding: 8px 20px;
+}
+
+.vibe-pos-cart__footer {
+  padding: 16px 20px 20px;
+  border-top: 1px solid rgba(15, 38, 74, 0.08);
+}
+
+.vibe-pos-cart__totals {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.vibe-pos-cart__row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  color: #4a5f78;
+}
+
+.vibe-pos-cart__row--total {
+  margin-top: 4px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(15, 38, 74, 0.08);
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f264a;
+}
+</style>
diff --git a/src/vibe-project/components/VibePricingCard.vue b/src/vibe-project/components/VibePricingCard.vue
new file mode 100644
index 000000000..f5f0c95b8
--- /dev/null
+++ b/src/vibe-project/components/VibePricingCard.vue
@@ -0,0 +1,136 @@
+<template>
+  <article class="vibe-pricing-card" :class="{ 'vibe-pricing-card--featured': featured }">
+    <vibe-badge
+      v-if="featured"
+      label="Popular"
+      variant="accent"
+      class="vibe-pricing-card__badge"
+    />
+    <h3 class="vibe-pricing-card__plan">{{ plan }}</h3>
+    <div class="vibe-pricing-card__price">
+      <span class="vibe-pricing-card__amount">{{ price }}</span>
+      <span class="vibe-pricing-card__period">/{{ period }}</span>
+    </div>
+    <p class="vibe-pricing-card__description">{{ description }}</p>
+    <ul class="vibe-pricing-card__features">
+      <li v-for="item in featureList" :key="item">{{ item }}</li>
+    </ul>
+    <vibe-button
+      :label="ctaLabel"
+      :variant="featured ? 'primary' : 'ghost'"
+      block
+      @click="$emit('select')"
+    />
+  </article>
+</template>
+
+<script>
+import VibeBadge from "./VibeBadge.vue";
+import VibeButton from "./VibeButton.vue";
+
+export default {
+  name: "VibePricingCard",
+  components: { VibeBadge, VibeButton },
+  props: {
+    plan: { type: String, default: "Pro" },
+    price: { type: String, default: "$29" },
+    period: { type: String, default: "mo" },
+    description: { type: String, default: "For teams building production screens." },
+    features: {
+      type: String,
+      default: "Unlimited screens,Visual composer,Priority support",
+    },
+    ctaLabel: { type: String, default: "Get started" },
+    featured: { type: Boolean, default: false },
+  },
+  computed: {
+    featureList() {
+      return this.features
+        .split(",")
+        .map((f) => f.trim())
+        .filter(Boolean);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-pricing-card {
+  position: relative;
+  background: #fff;
+  border-radius: 24px;
+  padding: 24px;
+  box-shadow: 0 10px 40px rgba(15, 38, 74, 0.08);
+  border: 1px solid rgba(15, 38, 74, 0.06);
+}
+
+.vibe-pricing-card--featured {
+  border-color: #0f264a;
+  box-shadow: 0 16px 48px rgba(15, 38, 74, 0.16);
+  transform: scale(1.02);
+}
+
+.vibe-pricing-card__badge {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+
+.vibe-pricing-card__plan {
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #7a8fa8;
+}
+
+.vibe-pricing-card__price {
+  margin-bottom: 10px;
+}
+
+.vibe-pricing-card__amount {
+  font-size: 36px;
+  font-weight: 700;
+  color: #0f264a;
+  letter-spacing: -0.03em;
+}
+
+.vibe-pricing-card__period {
+  font-size: 14px;
+  color: #7a8fa8;
+}
+
+.vibe-pricing-card__description {
+  margin: 0 0 18px;
+  font-size: 13px;
+  color: #4a5f78;
+  line-height: 1.5;
+}
+
+.vibe-pricing-card__features {
+  margin: 0 0 20px;
+  padding: 0;
+  list-style: none;
+}
+
+.vibe-pricing-card__features li {
+  position: relative;
+  padding: 8px 0 8px 22px;
+  font-size: 13px;
+  color: #0f264a;
+  border-bottom: 1px solid rgba(15, 38, 74, 0.06);
+}
+
+.vibe-pricing-card__features li:last-child {
+  border-bottom: none;
+}
+
+.vibe-pricing-card__features li::before {
+  content: "✓";
+  position: absolute;
+  left: 0;
+  color: #059669;
+  font-weight: 700;
+}
+</style>
diff --git a/src/vibe-project/components/VibeProductCard.vue b/src/vibe-project/components/VibeProductCard.vue
new file mode 100644
index 000000000..998b0e011
--- /dev/null
+++ b/src/vibe-project/components/VibeProductCard.vue
@@ -0,0 +1,134 @@
+<template>
+  <article
+    class="vibe-product-card"
+    :class="{ 'vibe-product-card--out-of-stock': !inStock }"
+    data-cy="product-card"
+  >
+    <div class="vibe-product-card__image" :style="{ background: imageColor }">
+      <span class="vibe-product-card__emoji" aria-hidden="true">{{ emoji }}</span>
+    </div>
+    <div class="vibe-product-card__body">
+      <div class="vibe-product-card__meta">
+        <vibe-badge v-if="category" :label="category" variant="neutral" />
+        <vibe-badge v-if="!inStock" label="Agotado" variant="danger" />
+      </div>
+      <h3 class="vibe-product-card__name">{{ name }}</h3>
+      <p v-if="description" class="vibe-product-card__description">{{ description }}</p>
+      <div class="vibe-product-card__footer">
+        <span class="vibe-product-card__price">{{ formattedPrice }}</span>
+        <vibe-button
+          label="Agregar"
+          variant="secondary"
+          size="sm"
+          icon="+"
+          :disabled="!inStock"
+          data-cy="add-product"
+          @click="$emit('add')"
+        />
+      </div>
+    </div>
+  </article>
+</template>
+
+<script>
+import VibeBadge from "./VibeBadge.vue";
+import VibeButton from "./VibeButton.vue";
+
+export default {
+  name: "VibeProductCard",
+  components: { VibeBadge, VibeButton },
+  props: {
+    name: { type: String, required: true },
+    price: { type: Number, required: true },
+    description: { type: String, default: "" },
+    category: { type: String, default: "" },
+    emoji: { type: String, default: "📦" },
+    imageColor: { type: String, default: "#f4f7fa" },
+    inStock: { type: Boolean, default: true },
+    currency: { type: String, default: "USD" },
+  },
+  computed: {
+    formattedPrice() {
+      return new Intl.NumberFormat("es-AR", {
+        style: "currency",
+        currency: this.currency,
+      }).format(this.price);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-product-card {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 10px 40px rgba(15, 38, 74, 0.08);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.vibe-product-card:not(.vibe-product-card--out-of-stock):hover {
+  transform: translateY(-2px);
+  box-shadow: 0 16px 48px rgba(15, 38, 74, 0.12);
+}
+
+.vibe-product-card--out-of-stock {
+  opacity: 0.72;
+}
+
+.vibe-product-card__image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+}
+
+.vibe-product-card__emoji {
+  font-size: 48px;
+  line-height: 1;
+}
+
+.vibe-product-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+}
+
+.vibe-product-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.vibe-product-card__name {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  color: #0f264a;
+  letter-spacing: -0.02em;
+}
+
+.vibe-product-card__description {
+  margin: 0;
+  font-size: 12px;
+  color: #7a8fa8;
+  line-height: 1.5;
+}
+
+.vibe-product-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 4px;
+}
+
+.vibe-product-card__price {
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f264a;
+}
+</style>
diff --git a/src/vibe-project/components/VibeProfileCard.vue b/src/vibe-project/components/VibeProfileCard.vue
new file mode 100644
index 000000000..d0ec85c78
--- /dev/null
+++ b/src/vibe-project/components/VibeProfileCard.vue
@@ -0,0 +1,133 @@
+<template>
+  <article class="vibe-profile-card">
+    <div class="vibe-profile-card__avatar" :style="{ background: avatarColor }">
+      {{ initials }}
+    </div>
+    <div class="vibe-profile-card__info">
+      <h3 class="vibe-profile-card__name">{{ name }}</h3>
+      <p class="vibe-profile-card__role">{{ role }}</p>
+      <p v-if="bio" class="vibe-profile-card__bio">{{ bio }}</p>
+    </div>
+    <div class="vibe-profile-card__actions">
+      <vibe-button
+        :label="primaryAction"
+        variant="primary"
+        size="sm"
+        @click="$emit('primary-action')"
+      />
+      <vibe-button
+        v-if="secondaryAction"
+        :label="secondaryAction"
+        variant="ghost"
+        size="sm"
+        @click="$emit('secondary-action')"
+      />
+    </div>
+    <ul v-if="tags" class="vibe-profile-card__tags">
+      <li v-for="tag in tagList" :key="tag">{{ tag }}</li>
+    </ul>
+  </article>
+</template>
+
+<script>
+import VibeButton from "./VibeButton.vue";
+
+export default {
+  name: "VibeProfileCard",
+  components: { VibeButton },
+  props: {
+    name: { type: String, default: "Jane Doe" },
+    role: { type: String, default: "Product Designer" },
+    bio: { type: String, default: "Building delightful experiences for enterprise workflows." },
+    tags: { type: String, default: "Design,UX,Process" },
+    primaryAction: { type: String, default: "Follow" },
+    secondaryAction: { type: String, default: "Message" },
+    avatarColor: { type: String, default: "#b7f06b" },
+  },
+  computed: {
+    initials() {
+      return this.name
+        .split(" ")
+        .map((part) => part.charAt(0))
+        .join("")
+        .slice(0, 2)
+        .toUpperCase();
+    },
+    tagList() {
+      return this.tags
+        .split(",")
+        .map((t) => t.trim())
+        .filter(Boolean);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-profile-card {
+  background: #fff;
+  border-radius: 24px;
+  padding: 24px;
+  box-shadow: 0 10px 40px rgba(15, 38, 74, 0.08);
+  text-align: center;
+}
+
+.vibe-profile-card__avatar {
+  width: 72px;
+  height: 72px;
+  margin: 0 auto 16px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  font-weight: 700;
+  color: #0f264a;
+}
+
+.vibe-profile-card__name {
+  margin: 0 0 4px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #0f264a;
+}
+
+.vibe-profile-card__role {
+  margin: 0 0 10px;
+  font-size: 13px;
+  color: #7a8fa8;
+}
+
+.vibe-profile-card__bio {
+  margin: 0 0 18px;
+  font-size: 13px;
+  color: #4a5f78;
+  line-height: 1.55;
+}
+
+.vibe-profile-card__actions {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.vibe-profile-card__tags {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 18px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.vibe-profile-card__tags li {
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(15, 38, 74, 0.06);
+  font-size: 11px;
+  font-weight: 600;
+  color: #4a5f78;
+}
+</style>
diff --git a/src/vibe-project/components/VibeStatCard.vue b/src/vibe-project/components/VibeStatCard.vue
new file mode 100644
index 000000000..80159b54d
--- /dev/null
+++ b/src/vibe-project/components/VibeStatCard.vue
@@ -0,0 +1,85 @@
+<template>
+  <article class="vibe-stat-card">
+    <div class="vibe-stat-card__top">
+      <span class="vibe-stat-card__label">{{ label }}</span>
+      <vibe-badge v-if="trend" :label="trend" :variant="trendVariant" />
+    </div>
+    <div class="vibe-stat-card__value">{{ value }}</div>
+    <p v-if="description" class="vibe-stat-card__description">{{ description }}</p>
+    <div v-if="showBar" class="vibe-stat-card__bar">
+      <div class="vibe-stat-card__bar-fill" :style="{ width: `${progress}%` }" />
+    </div>
+  </article>
+</template>
+
+<script>
+import VibeBadge from "./VibeBadge.vue";
+
+export default {
+  name: "VibeStatCard",
+  components: { VibeBadge },
+  props: {
+    label: { type: String, default: "Metric" },
+    value: { type: String, default: "0" },
+    description: { type: String, default: "" },
+    trend: { type: String, default: "" },
+    trendVariant: { type: String, default: "success" },
+    progress: { type: Number, default: 65 },
+    showBar: { type: Boolean, default: true },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-stat-card {
+  background: linear-gradient(145deg, #0f264a 0%, #1a3a6b 100%);
+  color: #fff;
+  border-radius: 20px;
+  padding: 20px;
+  box-shadow: 0 14px 40px rgba(15, 38, 74, 0.25);
+}
+
+.vibe-stat-card__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.vibe-stat-card__label {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.75;
+}
+
+.vibe-stat-card__value {
+  font-size: 32px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+}
+
+.vibe-stat-card__description {
+  margin: 8px 0 0;
+  font-size: 13px;
+  opacity: 0.8;
+}
+
+.vibe-stat-card__bar {
+  margin-top: 16px;
+  height: 6px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.15);
+  overflow: hidden;
+}
+
+.vibe-stat-card__bar-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: #b7f06b;
+  transition: width 0.3s ease;
+}
+</style>
diff --git a/src/vibe-project/components/VibeTimeline.vue b/src/vibe-project/components/VibeTimeline.vue
new file mode 100644
index 000000000..c0137b021
--- /dev/null
+++ b/src/vibe-project/components/VibeTimeline.vue
@@ -0,0 +1,104 @@
+<template>
+  <ol class="vibe-timeline">
+    <li
+      v-for="(item, index) in itemList"
+      :key="index"
+      class="vibe-timeline__item"
+      :class="{ 'vibe-timeline__item--active': index === 0 }"
+    >
+      <div class="vibe-timeline__marker" />
+      <div class="vibe-timeline__content">
+        <span class="vibe-timeline__time">{{ item.time }}</span>
+        <strong class="vibe-timeline__title">{{ item.title }}</strong>
+        <p v-if="item.detail" class="vibe-timeline__detail">{{ item.detail }}</p>
+      </div>
+    </li>
+  </ol>
+</template>
+
+<script>
+export default {
+  name: "VibeTimeline",
+  props: {
+    items: {
+      type: String,
+      default: "10:00|Request submitted|Form sent for review,11:30|Under review|Team is validating data,14:00|Approved|Ready for next step",
+    },
+  },
+  computed: {
+    itemList() {
+      return this.items
+        .split(",")
+        .map((entry) => entry.trim())
+        .filter(Boolean)
+        .map((entry) => {
+          const [time, title, detail = ""] = entry.split("|").map((p) => p.trim());
+          return { time, title, detail };
+        });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-timeline {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.vibe-timeline__item {
+  display: flex;
+  gap: 14px;
+  position: relative;
+  padding-bottom: 20px;
+}
+
+.vibe-timeline__item:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  left: 7px;
+  top: 18px;
+  bottom: 0;
+  width: 2px;
+  background: rgba(15, 38, 74, 0.1);
+}
+
+.vibe-timeline__marker {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  border-radius: 50%;
+  background: rgba(15, 38, 74, 0.15);
+  border: 3px solid #fff;
+  box-shadow: 0 0 0 2px rgba(15, 38, 74, 0.1);
+}
+
+.vibe-timeline__item--active .vibe-timeline__marker {
+  background: #b7f06b;
+  box-shadow: 0 0 0 2px #0f264a;
+}
+
+.vibe-timeline__time {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  color: #7a8fa8;
+  margin-bottom: 2px;
+}
+
+.vibe-timeline__title {
+  display: block;
+  font-size: 14px;
+  color: #0f264a;
+  margin-bottom: 4px;
+}
+
+.vibe-timeline__detail {
+  margin: 0;
+  font-size: 12px;
+  color: #4a5f78;
+  line-height: 1.5;
+}
+</style>
diff --git a/src/vibe-project/components/index.js b/src/vibe-project/components/index.js
new file mode 100644
index 000000000..e1a7d06e0
--- /dev/null
+++ b/src/vibe-project/components/index.js
@@ -0,0 +1,17 @@
+export { default as ExampleHeader } from "./ExampleHeader.vue";
+export { default as VibeAlert } from "./VibeAlert.vue";
+export { default as VibeBadge } from "./VibeBadge.vue";
+export { default as VibeButton } from "./VibeButton.vue";
+export { default as VibeCard } from "./VibeCard.vue";
+export { default as VibeFeatureBlock } from "./VibeFeatureBlock.vue";
+export { default as VibeFlightCard } from "./VibeFlightCard.vue";
+export { default as VibeFlightSearchForm } from "./VibeFlightSearchForm.vue";
+export { default as VibeFlightSummary } from "./VibeFlightSummary.vue";
+export { default as VibeInput } from "./VibeInput.vue";
+export { default as VibeCartItem } from "./VibeCartItem.vue";
+export { default as VibePosCart } from "./VibePosCart.vue";
+export { default as VibePricingCard } from "./VibePricingCard.vue";
+export { default as VibeProductCard } from "./VibeProductCard.vue";
+export { default as VibeProfileCard } from "./VibeProfileCard.vue";
+export { default as VibeStatCard } from "./VibeStatCard.vue";
+export { default as VibeTimeline } from "./VibeTimeline.vue";
diff --git a/src/vibe-project/index.js b/src/vibe-project/index.js
new file mode 100644
index 000000000..d7025c739
--- /dev/null
+++ b/src/vibe-project/index.js
@@ -0,0 +1 @@
+export { default } from "./screens/UserRegistrationScreen.vue";
diff --git a/src/vibe-project/previewLoader.js b/src/vibe-project/previewLoader.js
new file mode 100644
index 000000000..5e60681fe
--- /dev/null
+++ b/src/vibe-project/previewLoader.js
@@ -0,0 +1,39 @@
+/**
+ * Webpack entry: bundles all .vue files via require.context and exposes
+ * a runtime loader for per-file preview in ProcessMaker.
+ */
+const vueModules = require.context("./", true, /\.vue$/);
+
+function normalizeKey(relativePath) {
+  return `./${String(relativePath).replace(/^\.\//, "")}`;
+}
+
+function loadVueFile(relativePath) {
+  const key = normalizeKey(relativePath);
+  if (!vueModules.keys().includes(key)) {
+    throw new Error(`Vue component not found: ${relativePath}`);
+  }
+  const mod = vueModules(key);
+  return mod.default || mod;
+}
+
+function loadEntry() {
+  const indexModule = require("./index.js");
+  return indexModule.default || indexModule;
+}
+
+const loader = {
+  loadVueFile(relativePath) {
+    return Promise.resolve(loadVueFile(relativePath));
+  },
+  loadEntry() {
+    return Promise.resolve(loadEntry());
+  },
+};
+
+if (typeof window !== "undefined") {
+  window.__vibeProjectLoader = loader;
+}
+
+export default loader;
+export { loadVueFile, loadEntry };
diff --git a/src/vibe-project/screens/FlightBookingScreen.vue b/src/vibe-project/screens/FlightBookingScreen.vue
new file mode 100644
index 000000000..1356a9533
--- /dev/null
+++ b/src/vibe-project/screens/FlightBookingScreen.vue
@@ -0,0 +1,383 @@
+<template>
+  <div class="flight-booking" data-cy="flight-booking-screen">
+    <example-header
+      title="Book a flight"
+      subtitle="Search routes, compare options, and confirm your trip"
+    />
+
+    <vibe-alert
+      v-if="errorMessage"
+      variant="error"
+      title="Search error"
+      :message="errorMessage"
+      dismissible
+      @dismiss="errorMessage = ''"
+    />
+
+    <vibe-alert
+      v-if="bookingConfirmed"
+      variant="success"
+      title="Booking confirmed"
+      :message="confirmationMessage"
+      data-cy="booking-success"
+    />
+
+    <div class="flight-booking__layout">
+      <div class="flight-booking__main">
+        <vibe-card
+          title="Find your flight"
+          subtitle="Enter your route and travel dates"
+          badge="Search"
+          badge-variant="accent"
+        >
+          <vibe-flight-search-form
+            :origin="searchCriteria.origin"
+            :destination="searchCriteria.destination"
+            :departure-date="searchCriteria.departureDate"
+            :return-date="searchCriteria.returnDate"
+            :passengers="searchCriteria.passengers"
+            :cabin-class="searchCriteria.cabinClass"
+            :initial-trip-type="searchCriteria.tripType"
+            @search="handleSearch"
+          />
+        </vibe-card>
+
+        <section v-if="hasSearched" class="flight-booking__results">
+          <div class="flight-booking__results-header">
+            <h2 class="flight-booking__results-title">
+              {{ filteredFlights.length }} flight{{ filteredFlights.length === 1 ? "" : "s" }} found
+            </h2>
+            <p class="flight-booking__results-subtitle">
+              {{ routeLabel }} · {{ cabinLabel }}
+            </p>
+          </div>
+
+          <div v-if="filteredFlights.length" class="flight-booking__list">
+            <vibe-flight-card
+              v-for="flight in filteredFlights"
+              :key="flight.id"
+              :airline="flight.airline"
+              :airline-emoji="flight.airlineEmoji"
+              :flight-number="flight.flightNumber"
+              :origin="flight.origin"
+              :destination="flight.destination"
+              :departure-time="flight.departureTime"
+              :arrival-time="flight.arrivalTime"
+              :duration="flight.duration"
+              :stops="flight.stops"
+              :price="flight.price"
+              :selected="selectedFlight && selectedFlight.id === flight.id"
+              @select="selectFlight(flight)"
+            />
+          </div>
+
+          <p v-else class="flight-booking__no-results">
+            No flights match your search. Try different cities or dates.
+          </p>
+        </section>
+      </div>
+
+      <vibe-flight-summary
+        :origin="searchCriteria.origin"
+        :destination="searchCriteria.destination"
+        :departure-date="searchCriteria.departureDate"
+        :return-date="searchCriteria.returnDate"
+        :trip-type="searchCriteria.tripType"
+        :passengers="searchCriteria.passengers"
+        :cabin-class="searchCriteria.cabinClass"
+        :flight="selectedFlight"
+        @confirm="confirmBooking"
+        @clear="clearSelection"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ExampleHeader from "../components/ExampleHeader.vue";
+import VibeAlert from "../components/VibeAlert.vue";
+import VibeCard from "../components/VibeCard.vue";
+import VibeFlightCard from "../components/VibeFlightCard.vue";
+import VibeFlightSearchForm from "../components/VibeFlightSearchForm.vue";
+import VibeFlightSummary from "../components/VibeFlightSummary.vue";
+
+const FLIGHTS = [
+  {
+    id: 1,
+    airline: "SkyRoute Air",
+    airlineEmoji: "🛫",
+    flightNumber: "SR 204",
+    origin: "JFK",
+    destination: "LAX",
+    departureTime: "08:15",
+    arrivalTime: "11:40",
+    duration: "5h 25m",
+    stops: 0,
+    price: 289,
+    cabinClass: "economy",
+  },
+  {
+    id: 2,
+    airline: "Pacific Wings",
+    airlineEmoji: "🌊",
+    flightNumber: "PW 118",
+    origin: "JFK",
+    destination: "LAX",
+    departureTime: "10:30",
+    arrivalTime: "14:20",
+    duration: "5h 50m",
+    stops: 1,
+    price: 219,
+    cabinClass: "economy",
+  },
+  {
+    id: 3,
+    airline: "Summit Airlines",
+    airlineEmoji: "⛰",
+    flightNumber: "SA 882",
+    origin: "JFK",
+    destination: "LAX",
+    departureTime: "14:05",
+    arrivalTime: "17:10",
+    duration: "5h 05m",
+    stops: 0,
+    price: 349,
+    cabinClass: "business",
+  },
+  {
+    id: 4,
+    airline: "Coastal Jet",
+    airlineEmoji: "🌅",
+    flightNumber: "CJ 501",
+    origin: "SFO",
+    destination: "SEA",
+    departureTime: "07:50",
+    arrivalTime: "10:05",
+    duration: "2h 15m",
+    stops: 0,
+    price: 159,
+    cabinClass: "economy",
+  },
+  {
+    id: 5,
+    airline: "Northern Express",
+    airlineEmoji: "❄",
+    flightNumber: "NE 330",
+    origin: "ORD",
+    destination: "MIA",
+    departureTime: "09:20",
+    arrivalTime: "13:45",
+    duration: "3h 25m",
+    stops: 0,
+    price: 199,
+    cabinClass: "premium",
+  },
+  {
+    id: 6,
+    airline: "Atlas Airways",
+    airlineEmoji: "🌍",
+    flightNumber: "AA 760",
+    origin: "ORD",
+    destination: "MIA",
+    departureTime: "16:10",
+    arrivalTime: "22:30",
+    duration: "5h 20m",
+    stops: 1,
+    price: 175,
+    cabinClass: "economy",
+  },
+];
+
+const CABIN_LABELS = {
+  economy: "Economy",
+  premium: "Premium Economy",
+  business: "Business",
+  first: "First Class",
+};
+
+const DEFAULT_SEARCH = () => ({
+  origin: "New York (JFK)",
+  destination: "Los Angeles (LAX)",
+  departureDate: "",
+  returnDate: "",
+  passengers: 1,
+  cabinClass: "economy",
+  tripType: "round-trip",
+});
+
+export default {
+  name: "FlightBookingScreen",
+  components: {
+    ExampleHeader,
+    VibeAlert,
+    VibeCard,
+    VibeFlightCard,
+    VibeFlightSearchForm,
+    VibeFlightSummary,
+  },
+  data() {
+    return {
+      flights: FLIGHTS,
+      searchCriteria: DEFAULT_SEARCH(),
+      hasSearched: false,
+      selectedFlight: null,
+      bookingConfirmed: false,
+      confirmationMessage: "",
+      errorMessage: "",
+    };
+  },
+  computed: {
+    filteredFlights() {
+      const originCode = this.extractAirportCode(this.searchCriteria.origin);
+      const destinationCode = this.extractAirportCode(this.searchCriteria.destination);
+
+      return this.flights.filter((flight) => {
+        const matchesRoute =
+          this.matchesAirport(flight.origin, originCode) &&
+          this.matchesAirport(flight.destination, destinationCode);
+        const matchesCabin = flight.cabinClass === this.searchCriteria.cabinClass;
+        return matchesRoute && matchesCabin;
+      });
+    },
+    routeLabel() {
+      return `${this.searchCriteria.origin} to ${this.searchCriteria.destination}`;
+    },
+    cabinLabel() {
+      return CABIN_LABELS[this.searchCriteria.cabinClass] || this.searchCriteria.cabinClass;
+    },
+  },
+  methods: {
+    handleSearch(criteria) {
+      this.errorMessage = this.validateSearch(criteria);
+      if (this.errorMessage) return;
+
+      this.searchCriteria = { ...criteria };
+      this.hasSearched = true;
+      this.selectedFlight = null;
+      this.bookingConfirmed = false;
+      this.confirmationMessage = "";
+    },
+    validateSearch(criteria) {
+      if (!criteria.origin.trim() || !criteria.destination.trim()) {
+        return "Enter both origin and destination.";
+      }
+      if (criteria.origin.trim().toLowerCase() === criteria.destination.trim().toLowerCase()) {
+        return "Origin and destination must be different.";
+      }
+      if (!criteria.departureDate) {
+        return "Select a departure date.";
+      }
+      if (criteria.tripType === "round-trip" && !criteria.returnDate) {
+        return "Select a return date for round-trip flights.";
+      }
+      if (
+        criteria.tripType === "round-trip" &&
+        criteria.returnDate &&
+        criteria.returnDate < criteria.departureDate
+      ) {
+        return "Return date must be on or after the departure date.";
+      }
+      return "";
+    },
+    selectFlight(flight) {
+      this.selectedFlight = flight;
+      this.bookingConfirmed = false;
+      this.confirmationMessage = "";
+    },
+    clearSelection() {
+      this.selectedFlight = null;
+      this.bookingConfirmed = false;
+      this.confirmationMessage = "";
+    },
+    confirmBooking() {
+      if (!this.selectedFlight) return;
+
+      const multiplier = this.searchCriteria.tripType === "round-trip" ? 2 : 1;
+      const total =
+        this.selectedFlight.price * this.searchCriteria.passengers * multiplier;
+
+      this.bookingConfirmed = true;
+      this.confirmationMessage = `Your ${this.searchCriteria.tripType === "one-way" ? "one-way" : "round-trip"} flight on ${this.selectedFlight.airline} (${this.selectedFlight.flightNumber}) is confirmed for ${this.searchCriteria.passengers} passenger(s). Total: ${this.formatCurrency(total)}.`;
+    },
+    extractAirportCode(value) {
+      const match = value.match(/\(([A-Z]{3})\)/);
+      if (match) return match[1];
+      return value.trim().slice(0, 3).toUpperCase();
+    },
+    matchesAirport(flightCode, searchCode) {
+      if (!searchCode) return true;
+      return flightCode.toUpperCase().includes(searchCode.toUpperCase());
+    },
+    formatCurrency(value) {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(value);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.flight-booking {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 28px 24px;
+  font-family: Inter, system-ui, sans-serif;
+}
+
+.flight-booking__layout {
+  display: grid;
+  grid-template-columns: 1fr 320px;
+  gap: 24px;
+  align-items: start;
+}
+
+.flight-booking__main {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.flight-booking__results-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.flight-booking__results-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #0f264a;
+}
+
+.flight-booking__results-subtitle {
+  margin: 0;
+  font-size: 13px;
+  color: #7a8fa8;
+}
+
+.flight-booking__list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.flight-booking__no-results {
+  margin: 0;
+  padding: 40px 20px;
+  text-align: center;
+  font-size: 14px;
+  color: #7a8fa8;
+  background: #fff;
+  border-radius: 20px;
+  box-shadow: 0 10px 40px rgba(15, 38, 74, 0.08);
+}
+
+@media (max-width: 900px) {
+  .flight-booking__layout {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/vibe-project/screens/MainScreen.vue b/src/vibe-project/screens/MainScreen.vue
new file mode 100644
index 000000000..b959ecf4d
--- /dev/null
+++ b/src/vibe-project/screens/MainScreen.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="main-screen" data-cy="main-screen">
+      <example-header title="Contact Form" subtitle="Fill in your details to get started">
+        <vibe-profile-card />
+      </example-header>
+      <example-header />
+      <form class="main-screen__form" prevent="handleSubmit"></form>
+      <div v-if="submitted" class="success-message" data-cy="successMessage"></div>
+      <section class="screen-section"></section>
+      <form class="screen-form"></form>
+      <div class="screen-block"></div>
+      <example-header />
+      <example-header />
+      <vibe-profile-card />
+      <vibe-profile-card name="Jane Doe" role="Product Designer" bio="Building delightful experiences for enterprise workflows." tags="Design,UX,Process" primaryAction="Follow" secondaryAction="Message" avatarColor="#b7f06b" />
+    </div>
+</template>
+
+<script>
+import ExampleHeader from "../components/ExampleHeader.vue";
+import VibeProfileCard from "../components/VibeProfileCard.vue";
+
+export default {
+  name: "MainScreen",
+  components: { ExampleHeader, VibeProfileCard },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+.main-screen {
+  max-width: 480px;
+  margin: 0 auto;
+  padding: 28px 24px;
+  font-family: Inter, system-ui, sans-serif;
+}
+</style>
diff --git a/src/vibe-project/screens/PosProductSelectionScreen.vue b/src/vibe-project/screens/PosProductSelectionScreen.vue
new file mode 100644
index 000000000..4a6e26609
--- /dev/null
+++ b/src/vibe-project/screens/PosProductSelectionScreen.vue
@@ -0,0 +1,262 @@
+<template>
+  <div class="pos-product-selection" data-cy="pos-product-selection-screen">
+    <example-header
+      title="Punto de venta"
+      subtitle="Seleccione productos y agregue al carrito"
+    />
+
+    <vibe-alert
+      v-if="checkoutMessage"
+      variant="success"
+      title="Venta registrada"
+      :message="checkoutMessage"
+      dismissible
+      data-cy="checkout-success"
+      @dismiss="checkoutMessage = ''"
+    />
+
+    <div class="pos-product-selection__layout">
+      <section class="pos-product-selection__catalog">
+        <div class="pos-product-selection__toolbar">
+          <vibe-input
+            v-model="searchQuery"
+            label="Buscar producto"
+            placeholder="Nombre o categoría..."
+            data-cy="product-search"
+          />
+          <div class="pos-product-selection__categories" role="group" aria-label="Filtrar por categoría">
+            <button
+              v-for="cat in categories"
+              :key="cat.value"
+              type="button"
+              class="pos-product-selection__category"
+              :class="{ 'pos-product-selection__category--active': activeCategory === cat.value }"
+              :data-cy="`category-${cat.value || 'all'}`"
+              @click="activeCategory = cat.value"
+            >
+              {{ cat.label }}
+            </button>
+          </div>
+        </div>
+
+        <div v-if="filteredProducts.length" class="pos-product-selection__grid">
+          <vibe-product-card
+            v-for="product in filteredProducts"
+            :key="product.id"
+            :name="product.name"
+            :price="product.price"
+            :description="product.description"
+            :category="product.category"
+            :emoji="product.emoji"
+            :image-color="product.imageColor"
+            :in-stock="product.inStock"
+            :data-cy="`product-${product.id}`"
+            @add="addToCart(product)"
+          />
+        </div>
+
+        <p v-else class="pos-product-selection__no-results">
+          No se encontraron productos con los filtros actuales.
+        </p>
+      </section>
+
+      <vibe-pos-cart
+        :items="cartItems"
+        :tax-rate="21"
+        @increase="increaseQuantity"
+        @decrease="decreaseQuantity"
+        @remove="removeFromCart"
+        @clear="clearCart"
+        @checkout="handleCheckout"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ExampleHeader from "../components/ExampleHeader.vue";
+import VibeAlert from "../components/VibeAlert.vue";
+import VibeInput from "../components/VibeInput.vue";
+import VibePosCart from "../components/VibePosCart.vue";
+import VibeProductCard from "../components/VibeProductCard.vue";
+
+const PRODUCTS = [
+  { id: 1, name: "Café Americano", price: 3.5, category: "Bebidas", emoji: "☕", imageColor: "#fef3c7", description: "Café filtrado 240 ml", inStock: true },
+  { id: 2, name: "Cappuccino", price: 4.25, category: "Bebidas", emoji: "🥤", imageColor: "#fde68a", description: "Espresso con leche espumada", inStock: true },
+  { id: 3, name: "Medialuna", price: 1.8, category: "Panadería", emoji: "🥐", imageColor: "#ffedd5", description: "Medialuna de manteca", inStock: true },
+  { id: 4, name: "Sandwich Club", price: 7.9, category: "Comidas", emoji: "🥪", imageColor: "#dcfce7", description: "Pollo, bacon, lechuga y tomate", inStock: true },
+  { id: 5, name: "Ensalada César", price: 8.5, category: "Comidas", emoji: "🥗", imageColor: "#d1fae5", description: "Lechuga, crutones y aderezo", inStock: true },
+  { id: 6, name: "Agua mineral", price: 2.0, category: "Bebidas", emoji: "💧", imageColor: "#dbeafe", description: "Botella 500 ml", inStock: true },
+  { id: 7, name: "Brownie", price: 3.2, category: "Panadería", emoji: "🍫", imageColor: "#fce7f3", description: "Brownie de chocolate", inStock: false },
+  { id: 8, name: "Jugo natural", price: 4.0, category: "Bebidas", emoji: "🍊", imageColor: "#fed7aa", description: "Naranja recién exprimida", inStock: true },
+];
+
+export default {
+  name: "PosProductSelectionScreen",
+  components: {
+    ExampleHeader,
+    VibeAlert,
+    VibeInput,
+    VibePosCart,
+    VibeProductCard,
+  },
+  data() {
+    return {
+      products: PRODUCTS,
+      cart: {},
+      searchQuery: "",
+      activeCategory: "",
+      checkoutMessage: "",
+      categories: [
+        { value: "", label: "Todos" },
+        { value: "Bebidas", label: "Bebidas" },
+        { value: "Panadería", label: "Panadería" },
+        { value: "Comidas", label: "Comidas" },
+      ],
+    };
+  },
+  computed: {
+    filteredProducts() {
+      const query = this.searchQuery.trim().toLowerCase();
+      return this.products.filter((product) => {
+        const matchesCategory = !this.activeCategory || product.category === this.activeCategory;
+        const matchesSearch =
+          !query ||
+          product.name.toLowerCase().includes(query) ||
+          product.category.toLowerCase().includes(query);
+        return matchesCategory && matchesSearch;
+      });
+    },
+    cartItems() {
+      return Object.values(this.cart);
+    },
+  },
+  methods: {
+    addToCart(product) {
+      if (!product.inStock) return;
+
+      if (this.cart[product.id]) {
+        this.cart[product.id].quantity += 1;
+      } else {
+        this.$set(this.cart, product.id, {
+          id: product.id,
+          name: product.name,
+          price: product.price,
+          emoji: product.emoji,
+          quantity: 1,
+        });
+      }
+    },
+    increaseQuantity(productId) {
+      if (this.cart[productId]) {
+        this.cart[productId].quantity += 1;
+      }
+    },
+    decreaseQuantity(productId) {
+      if (!this.cart[productId]) return;
+      if (this.cart[productId].quantity <= 1) {
+        this.removeFromCart(productId);
+      } else {
+        this.cart[productId].quantity -= 1;
+      }
+    },
+    removeFromCart(productId) {
+      this.$delete(this.cart, productId);
+    },
+    clearCart() {
+      this.cart = {};
+    },
+    handleCheckout() {
+      const total = this.cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
+      const count = this.cartItems.reduce((sum, item) => sum + item.quantity, 0);
+      this.checkoutMessage = `Venta completada: ${count} artículo(s) por ${this.formatCurrency(total * 1.21)} (IVA incluido).`;
+      this.clearCart();
+    },
+    formatCurrency(value) {
+      return new Intl.NumberFormat("es-AR", {
+        style: "currency",
+        currency: "USD",
+      }).format(value);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pos-product-selection {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 28px 24px;
+  font-family: Inter, system-ui, sans-serif;
+}
+
+.pos-product-selection__layout {
+  display: grid;
+  grid-template-columns: 1fr 340px;
+  gap: 24px;
+  align-items: start;
+}
+
+.pos-product-selection__catalog {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.pos-product-selection__toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.pos-product-selection__categories {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.pos-product-selection__category {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 999px;
+  background: rgba(15, 38, 74, 0.06);
+  color: #4a5f78;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.pos-product-selection__category:hover {
+  background: rgba(15, 38, 74, 0.1);
+  color: #0f264a;
+}
+
+.pos-product-selection__category--active {
+  background: #0f264a;
+  color: #fff;
+}
+
+.pos-product-selection__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.pos-product-selection__no-results {
+  margin: 0;
+  padding: 40px 20px;
+  text-align: center;
+  font-size: 14px;
+  color: #7a8fa8;
+  background: #fff;
+  border-radius: 20px;
+  box-shadow: 0 10px 40px rgba(15, 38, 74, 0.08);
+}
+
+@media (max-width: 900px) {
+  .pos-product-selection__layout {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/vibe-project/screens/UserRegistrationScreen.vue b/src/vibe-project/screens/UserRegistrationScreen.vue
new file mode 100644
index 000000000..1f672b2f9
--- /dev/null
+++ b/src/vibe-project/screens/UserRegistrationScreen.vue
@@ -0,0 +1,301 @@
+<template>
+  <div class="user-registration" data-cy="user-registration-screen">
+    <example-header
+      title="Alta de usuarios"
+      subtitle="Complete el formulario para registrar un nuevo usuario en el sistema"
+    />
+
+    <vibe-alert
+      v-if="errorMessage"
+      variant="error"
+      title="Error"
+      :message="errorMessage"
+      dismissible
+      @dismiss="errorMessage = ''"
+    />
+
+    <vibe-alert
+      v-if="submitted"
+      variant="success"
+      title="Usuario registrado"
+      :message="successMessage"
+      data-cy="successMessage"
+    />
+
+    <vibe-card
+      v-if="!submitted"
+      title="Datos del usuario"
+      subtitle="Los campos marcados con * son obligatorios"
+      badge="Nuevo"
+      badge-variant="accent"
+    >
+      <form class="user-registration__form" @submit.prevent="handleSubmit">
+        <div class="user-registration__row">
+          <vibe-input
+            v-model="form.firstName"
+            label="Nombre *"
+            placeholder="Ej. María"
+            data-cy="firstName"
+          />
+          <vibe-input
+            v-model="form.lastName"
+            label="Apellido *"
+            placeholder="Ej. García"
+            data-cy="lastName"
+          />
+        </div>
+
+        <vibe-input
+          v-model="form.email"
+          label="Correo electrónico *"
+          type="email"
+          placeholder="usuario@empresa.com"
+          data-cy="email"
+        />
+
+        <vibe-input
+          v-model="form.username"
+          label="Nombre de usuario *"
+          placeholder="mgarcia"
+          hint="Solo letras, números y guiones bajos"
+          data-cy="username"
+        />
+
+        <div class="user-registration__field">
+          <label for="role" class="user-registration__label">Rol *</label>
+          <select
+            id="role"
+            v-model="form.role"
+            class="user-registration__select"
+            data-cy="role"
+          >
+            <option value="">Seleccione un rol</option>
+            <option value="admin">Administrador</option>
+            <option value="manager">Supervisor</option>
+            <option value="operator">Operador</option>
+            <option value="viewer">Consulta</option>
+          </select>
+        </div>
+
+        <div class="user-registration__row">
+          <vibe-input
+            v-model="form.password"
+            label="Contraseña *"
+            type="password"
+            placeholder="Mínimo 8 caracteres"
+            data-cy="password"
+          />
+          <vibe-input
+            v-model="form.confirmPassword"
+            label="Confirmar contraseña *"
+            type="password"
+            placeholder="Repita la contraseña"
+            data-cy="confirmPassword"
+          />
+        </div>
+
+        <label class="user-registration__checkbox">
+          <input
+            v-model="form.active"
+            type="checkbox"
+            data-cy="active"
+          />
+          <span>Activar usuario al registrar</span>
+        </label>
+
+        <div class="user-registration__actions">
+          <vibe-button
+            label="Cancelar"
+            variant="ghost"
+            native-type="button"
+            data-cy="cancel"
+            @click="handleCancel"
+          />
+          <vibe-button
+            label="Registrar usuario"
+            variant="primary"
+            native-type="submit"
+            :disabled="submitting"
+            data-cy="submit"
+          />
+        </div>
+      </form>
+    </vibe-card>
+  </div>
+</template>
+
+<script>
+import ExampleHeader from "../components/ExampleHeader.vue";
+import VibeAlert from "../components/VibeAlert.vue";
+import VibeButton from "../components/VibeButton.vue";
+import VibeCard from "../components/VibeCard.vue";
+import VibeInput from "../components/VibeInput.vue";
+
+const EMPTY_FORM = () => ({
+  firstName: "",
+  lastName: "",
+  email: "",
+  username: "",
+  role: "",
+  password: "",
+  confirmPassword: "",
+  active: true,
+});
+
+export default {
+  name: "UserRegistrationScreen",
+  components: {
+    ExampleHeader,
+    VibeAlert,
+    VibeButton,
+    VibeCard,
+    VibeInput,
+  },
+  data() {
+    return {
+      form: EMPTY_FORM(),
+      submitted: false,
+      submitting: false,
+      errorMessage: "",
+      successMessage: "",
+    };
+  },
+  methods: {
+    validate() {
+      const { firstName, lastName, email, username, role, password, confirmPassword } = this.form;
+
+      if (!firstName.trim() || !lastName.trim()) {
+        return "Ingrese nombre y apellido.";
+      }
+      if (!email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        return "Ingrese un correo electrónico válido.";
+      }
+      if (!username.trim() || !/^[a-zA-Z0-9_]+$/.test(username)) {
+        return "El nombre de usuario solo puede contener letras, números y guiones bajos.";
+      }
+      if (!role) {
+        return "Seleccione un rol para el usuario.";
+      }
+      if (password.length < 8) {
+        return "La contraseña debe tener al menos 8 caracteres.";
+      }
+      if (password !== confirmPassword) {
+        return "Las contraseñas no coinciden.";
+      }
+      return "";
+    },
+    handleSubmit() {
+      this.errorMessage = this.validate();
+      if (this.errorMessage) return;
+
+      this.submitting = true;
+
+      setTimeout(() => {
+        this.submitting = false;
+        this.submitted = true;
+        this.successMessage = `${this.form.firstName} ${this.form.lastName} fue registrado correctamente como ${this.roleLabel(this.form.role)}.`;
+      }, 600);
+    },
+    handleCancel() {
+      this.form = EMPTY_FORM();
+      this.errorMessage = "";
+      this.submitted = false;
+      this.successMessage = "";
+    },
+    roleLabel(role) {
+      const labels = {
+        admin: "Administrador",
+        manager: "Supervisor",
+        operator: "Operador",
+        viewer: "Consulta",
+      };
+      return labels[role] || role;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.user-registration {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 28px 24px;
+  font-family: Inter, system-ui, sans-serif;
+}
+
+.user-registration__form {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.user-registration__row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.user-registration__field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.user-registration__label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #0f264a;
+}
+
+.user-registration__select {
+  padding: 12px 16px;
+  border: none;
+  border-radius: 16px;
+  font-size: 14px;
+  color: #0f264a;
+  background: #f4f7fa;
+  outline: none;
+  transition: box-shadow 0.15s ease, background 0.15s ease;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a5f78' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 16px center;
+}
+
+.user-registration__select:focus {
+  background-color: #fff;
+  box-shadow: 0 0 0 3px rgba(15, 38, 74, 0.12);
+}
+
+.user-registration__checkbox {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  color: #4a5f78;
+  cursor: pointer;
+}
+
+.user-registration__checkbox input {
+  width: 16px;
+  height: 16px;
+  accent-color: #0f264a;
+}
+
+.user-registration__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding-top: 8px;
+}
+
+@media (max-width: 560px) {
+  .user-registration__row {
+    grid-template-columns: 1fr;
+  }
+
+  .user-registration__actions {
+    flex-direction: column-reverse;
+  }
+}
+</style>
diff --git a/src/vibe-project/tests/flight-booking-scenarios.yaml b/src/vibe-project/tests/flight-booking-scenarios.yaml
new file mode 100644
index 000000000..fcd8a6f2a
--- /dev/null
+++ b/src/vibe-project/tests/flight-booking-scenarios.yaml
@@ -0,0 +1,256 @@
+scenarios:
+  - name: "Booking screen loads with search form and summary"
+    description: "Verifies main layout elements render on initial load"
+    when: []
+    then:
+      - assert: visible
+        target: flight-booking-screen
+      - assert: visible
+        target: flight-origin
+      - assert: visible
+        target: flight-destination
+      - assert: visible
+        target: departure-date
+      - assert: visible
+        target: return-date
+      - assert: visible
+        target: passengers
+      - assert: visible
+        target: cabin-class
+      - assert: visible
+        target: search-flights
+      - assert: visible
+        target: flight-summary
+      - assert: visible
+        target: trip-type-round-trip
+      - assert: visible
+        target: trip-type-one-way
+
+  - name: "Search without departure date shows validation error"
+    description: "Submitting the form without a departure date sets errorMessage"
+    when:
+      - action: click
+        target: search-flights
+    then:
+      - assert: data
+        field: errorMessage
+        equals: "Select a departure date."
+      - assert: data
+        field: hasSearched
+        equals: false
+
+  - name: "Round trip requires return date"
+    description: "Round-trip search without a return date shows validation error"
+    when:
+      - action: fill
+        field: departure-date
+        value: "2026-07-15"
+      - action: click
+        target: search-flights
+    then:
+      - assert: data
+        field: errorMessage
+        equals: "Select a return date for round-trip flights."
+
+  - name: "Origin and destination must differ"
+    description: "Searching with the same origin and destination shows validation error"
+    when:
+      - action: fill
+        field: flight-origin
+        value: "New York (JFK)"
+      - action: fill
+        field: flight-destination
+        value: "New York (JFK)"
+      - action: fill
+        field: departure-date
+        value: "2026-07-15"
+      - action: fill
+        field: return-date
+        value: "2026-07-22"
+      - action: click
+        target: search-flights
+    then:
+      - assert: data
+        field: errorMessage
+        equals: "Origin and destination must be different."
+
+  - name: "Return date must be on or after departure"
+    description: "Return date before departure shows validation error"
+    when:
+      - action: fill
+        field: departure-date
+        value: "2026-07-20"
+      - action: fill
+        field: return-date
+        value: "2026-07-10"
+      - action: click
+        target: search-flights
+    then:
+      - assert: data
+        field: errorMessage
+        equals: "Return date must be on or after the departure date."
+
+  - name: "Successful search shows matching economy flights"
+    description: "Valid JFK to LAX search displays economy flight results"
+    when:
+      - action: fill
+        field: departure-date
+        value: "2026-07-15"
+      - action: fill
+        field: return-date
+        value: "2026-07-22"
+      - action: click
+        target: search-flights
+    then:
+      - assert: data
+        field: hasSearched
+        equals: true
+      - assert: data
+        field: errorMessage
+        equals: ""
+      - assert: visible
+        target: flight-SR 204
+      - assert: visible
+        target: flight-PW 118
+
+  - name: "Swap airports exchanges origin and destination"
+    description: "Clicking swap reverses route before search updates criteria"
+    when:
+      - action: click
+        target: swap-airports
+      - action: fill
+        field: departure-date
+        value: "2026-07-15"
+      - action: fill
+        field: return-date
+        value: "2026-07-22"
+      - action: click
+        target: search-flights
+    then:
+      - assert: data
+        field: hasSearched
+        equals: true
+      - assert: data
+        field: errorMessage
+        equals: ""
+
+  - name: "Search alternate route shows route flights"
+    description: "Searching SFO to SEA displays Coastal Jet flight"
+    when:
+      - action: fill
+        field: flight-origin
+        value: "San Francisco (SFO)"
+      - action: fill
+        field: flight-destination
+        value: "Seattle (SEA)"
+      - action: fill
+        field: departure-date
+        value: "2026-08-01"
+      - action: fill
+        field: return-date
+        value: "2026-08-08"
+      - action: click
+        target: search-flights
+    then:
+      - assert: data
+        field: hasSearched
+        equals: true
+      - assert: visible
+        target: flight-CJ 501
+
+  - name: "One way search and booking confirms correct total"
+    description: "One-way trip books first flight at single-passenger price"
+    when:
+      - action: click
+        target: trip-type-one-way
+      - action: fill
+        field: departure-date
+        value: "2026-07-15"
+      - action: click
+        target: search-flights
+      - action: click
+        target: select-flight
+      - action: click
+        target: confirm-booking
+    then:
+      - assert: visible
+        target: booking-success
+      - assert: data
+        field: bookingConfirmed
+        equals: true
+      - assert: data
+        field: confirmationMessage
+        equals: "Your one-way flight on SkyRoute Air (SR 204) is confirmed for 1 passenger(s). Total: $289.00."
+
+  - name: "Round trip booking confirms doubled total"
+    description: "Round-trip booking doubles the selected flight price"
+    when:
+      - action: fill
+        field: departure-date
+        value: "2026-07-15"
+      - action: fill
+        field: return-date
+        value: "2026-07-22"
+      - action: click
+        target: search-flights
+      - action: click
+        target: select-flight
+      - action: click
+        target: confirm-booking
+    then:
+      - assert: visible
+        target: booking-success
+      - assert: data
+        field: bookingConfirmed
+        equals: true
+      - assert: data
+        field: confirmationMessage
+        equals: "Your round-trip flight on SkyRoute Air (SR 204) is confirmed for 1 passenger(s). Total: $578.00."
+
+  - name: "Clear selection resets booking state"
+    description: "Clearing a selected flight removes confirmation state"
+    when:
+      - action: fill
+        field: departure-date
+        value: "2026-07-15"
+      - action: fill
+        field: return-date
+        value: "2026-07-22"
+      - action: click
+        target: search-flights
+      - action: click
+        target: select-flight
+      - action: click
+        target: clear-selection
+    then:
+      - assert: data
+        field: bookingConfirmed
+        equals: false
+      - assert: data
+        field: confirmationMessage
+        equals: ""
+
+  - name: "New search clears previous booking confirmation"
+    description: "Running a new search resets bookingConfirmed and confirmationMessage"
+    when:
+      - action: fill
+        field: departure-date
+        value: "2026-07-15"
+      - action: fill
+        field: return-date
+        value: "2026-07-22"
+      - action: click
+        target: search-flights
+      - action: click
+        target: select-flight
+      - action: click
+        target: confirm-booking
+      - action: click
+        target: search-flights
+    then:
+      - assert: data
+        field: bookingConfirmed
+        equals: false
+      - assert: data
+        field: confirmationMessage
+        equals: ""
diff --git a/src/vibe-project/tests/pos-scenarios.yaml b/src/vibe-project/tests/pos-scenarios.yaml
new file mode 100644
index 000000000..ae4800cd0
--- /dev/null
+++ b/src/vibe-project/tests/pos-scenarios.yaml
@@ -0,0 +1,212 @@
+scenarios:
+  - name: "POS screen loads with catalog and empty cart"
+    description: "Verifies main layout elements render on initial load"
+    when: []
+    then:
+      - assert: visible
+        target: pos-product-selection-screen
+      - assert: visible
+        target: product-search
+      - assert: visible
+        target: pos-cart
+      - assert: visible
+        target: category-all
+      - assert: visible
+        target: category-Bebidas
+      - assert: visible
+        target: category-Panadería
+      - assert: visible
+        target: category-Comidas
+      - assert: visible
+        target: product-1
+
+  - name: "Search filters products by name"
+    description: "Typing in search updates searchQuery and keeps matching products visible"
+    when:
+      - action: fill
+        field: product-search
+        value: "Café"
+    then:
+      - assert: data
+        field: searchQuery
+        equals: "Café"
+      - assert: visible
+        target: add-product
+
+  - name: "Search filters products by category"
+    description: "Searching a category name updates searchQuery and shows category products"
+    when:
+      - action: fill
+        field: product-search
+        value: "Panadería"
+    then:
+      - assert: data
+        field: searchQuery
+        equals: "Panadería"
+      - assert: visible
+        target: product-3
+
+  - name: "Category filter selects Bebidas"
+    description: "Clicking Bebidas category updates activeCategory"
+    when:
+      - action: click
+        target: category-Bebidas
+    then:
+      - assert: data
+        field: activeCategory
+        equals: "Bebidas"
+
+  - name: "Category filter selects Panadería"
+    description: "Clicking Panadería category updates activeCategory"
+    when:
+      - action: click
+        target: category-Panadería
+    then:
+      - assert: data
+        field: activeCategory
+        equals: "Panadería"
+
+  - name: "Category filter selects Comidas"
+    description: "Clicking Comidas category updates activeCategory"
+    when:
+      - action: click
+        target: category-Comidas
+    then:
+      - assert: data
+        field: activeCategory
+        equals: "Comidas"
+
+  - name: "Category filter resets to Todos"
+    description: "Clicking Todos clears activeCategory filter"
+    when:
+      - action: click
+        target: category-Bebidas
+      - action: click
+        target: category-all
+    then:
+      - assert: data
+        field: activeCategory
+        equals: ""
+
+  - name: "Add product to cart shows totals"
+    description: "Adding a product from catalog displays cart item and checkout controls"
+    when:
+      - action: click
+        target: add-product
+    then:
+      - assert: visible
+        target: cart-item
+      - assert: visible
+        target: cart-subtotal
+      - assert: visible
+        target: cart-tax
+      - assert: visible
+        target: cart-total
+      - assert: visible
+        target: checkout
+      - assert: visible
+        target: clear-cart
+
+  - name: "Checkout single item completes sale"
+    description: "Completing checkout shows success alert with correct message"
+    when:
+      - action: click
+        target: add-product
+      - action: click
+        target: checkout
+    then:
+      - assert: visible
+        target: checkout-success
+      - assert: data
+        field: checkoutMessage
+        equals: "Venta completada: 1 artículo(s) por US$ 4,23 (IVA incluido)."
+
+  - name: "Checkout multiple units of same product"
+    description: "Adding the same product twice records correct item count and total"
+    when:
+      - action: click
+        target: add-product
+      - action: click
+        target: add-product
+      - action: click
+        target: checkout
+    then:
+      - assert: visible
+        target: checkout-success
+      - assert: data
+        field: checkoutMessage
+        equals: "Venta completada: 2 artículo(s) por US$ 8,47 (IVA incluido)."
+
+  - name: "Increase quantity in cart before checkout"
+    description: "Using cart controls to increase quantity updates sale total"
+    when:
+      - action: click
+        target: add-product
+      - action: click
+        target: increase-qty
+      - action: click
+        target: increase-qty
+      - action: click
+        target: checkout
+    then:
+      - assert: visible
+        target: checkout-success
+      - assert: data
+        field: checkoutMessage
+        equals: "Venta completada: 3 artículo(s) por US$ 12,71 (IVA incluido)."
+
+  - name: "Decrease quantity in cart"
+    description: "Decreasing quantity after adding twice leaves one unit in cart"
+    when:
+      - action: click
+        target: add-product
+      - action: click
+        target: add-product
+      - action: click
+        target: decrease-qty
+    then:
+      - assert: visible
+        target: cart-item
+      - assert: visible
+        target: checkout
+
+  - name: "Remove item clears cart controls"
+    description: "Removing the only cart item hides checkout controls"
+    when:
+      - action: click
+        target: add-product
+      - action: click
+        target: remove-item
+    then:
+      - assert: data
+        field: checkoutMessage
+        equals: ""
+
+  - name: "Clear cart empties checkout state"
+    description: "Vaciar removes items and leaves checkout message unset"
+    when:
+      - action: click
+        target: add-product
+      - action: click
+        target: clear-cart
+    then:
+      - assert: data
+        field: checkoutMessage
+        equals: ""
+
+  - name: "Checkout filtered product by search"
+    description: "Searching for Cappuccino and checking out calculates correct total"
+    when:
+      - action: fill
+        field: product-search
+        value: "Cappuccino"
+      - action: click
+        target: add-product
+      - action: click
+        target: checkout
+    then:
+      - assert: visible
+        target: checkout-success
+      - assert: data
+        field: checkoutMessage
+        equals: "Venta completada: 1 artículo(s) por US$ 5,14 (IVA incluido)."
diff --git a/src/vibe-project/tests/scenarios.yaml b/src/vibe-project/tests/scenarios.yaml
new file mode 100644
index 000000000..9f215ea57
--- /dev/null
+++ b/src/vibe-project/tests/scenarios.yaml
@@ -0,0 +1,109 @@
+scenarios:
+  - name: "POS screen loads with catalog and empty cart"
+    description: "Verifies main layout elements render on initial load"
+    when: []
+    then:
+      - assert: visible
+        target: pos-product-selection-screen
+      - assert: visible
+        target: product-search
+      - assert: visible
+        target: pos-cart
+      - assert: visible
+        target: category-all
+      - assert: visible
+        target: category-Bebidas
+
+  - name: "Search filters products by name"
+    description: "Typing in search updates searchQuery and keeps matching products visible"
+    when:
+      - action: fill
+        field: product-search
+        value: "Café"
+    then:
+      - assert: data
+        field: searchQuery
+        equals: "Café"
+      - assert: visible
+        target: add-product
+
+  - name: "Category filter selects Bebidas"
+    description: "Clicking Bebidas category updates activeCategory"
+    when:
+      - action: click
+        target: category-Bebidas
+    then:
+      - assert: data
+        field: activeCategory
+        equals: "Bebidas"
+
+  - name: "Category filter selects Panadería"
+    description: "Clicking Panadería category updates activeCategory"
+    when:
+      - action: click
+        target: category-Panadería
+    then:
+      - assert: data
+        field: activeCategory
+        equals: "Panadería"
+
+  - name: "Add product to cart shows totals"
+    description: "Adding a product from catalog displays cart item and checkout controls"
+    when:
+      - action: click
+        target: add-product
+    then:
+      - assert: visible
+        target: cart-item
+      - assert: visible
+        target: cart-subtotal
+      - assert: visible
+        target: cart-tax
+      - assert: visible
+        target: cart-total
+      - assert: visible
+        target: checkout
+      - assert: visible
+        target: clear-cart
+
+  - name: "Checkout single item completes sale"
+    description: "Completing checkout shows success alert with correct message"
+    when:
+      - action: click
+        target: add-product
+      - action: click
+        target: checkout
+    then:
+      - assert: visible
+        target: checkout-success
+      - assert: data
+        field: checkoutMessage
+        equals: "Venta completada: 1 artículo(s) por US$ 4,24 (IVA incluido)."
+
+  - name: "Checkout multiple units of same product"
+    description: "Adding the same product twice records correct item count and total"
+    when:
+      - action: click
+        target: add-product
+      - action: click
+        target: add-product
+      - action: click
+        target: checkout
+    then:
+      - assert: visible
+        target: checkout-success
+      - assert: data
+        field: checkoutMessage
+        equals: "Venta completada: 2 artículo(s) por US$ 8,47 (IVA incluido)."
+
+  - name: "Clear cart empties checkout state"
+    description: "Vaciar removes items and leaves checkout message unset"
+    when:
+      - action: click
+        target: add-product
+      - action: click
+        target: clear-cart
+    then:
+      - assert: data
+        field: checkoutMessage
+        equals: ""
diff --git a/src/vibe/VibeAppShell.vue b/src/vibe/VibeAppShell.vue
new file mode 100644
index 000000000..c786d520d
--- /dev/null
+++ b/src/vibe/VibeAppShell.vue
@@ -0,0 +1,22 @@
+<template>
+  <vibe-screen-builder
+    :used-screen-paths="usedScreenPaths"
+    @switch-mode="$emit('switch-mode', $event)"
+    @use-screen="$emit('use-screen', $event)"
+  />
+</template>
+
+<script>
+import VibeScreenBuilder from "./VibeScreenBuilder.vue";
+
+export default {
+  name: "VibeAppShell",
+  components: { VibeScreenBuilder },
+  props: {
+    usedScreenPaths: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
diff --git a/src/vibe/VibeScreenBuilder.vue b/src/vibe/VibeScreenBuilder.vue
new file mode 100644
index 000000000..bebf65b60
--- /dev/null
+++ b/src/vibe/VibeScreenBuilder.vue
@@ -0,0 +1,983 @@
+<template>
+  <div
+    class="vibe-screen-builder vibe-shell"
+    :class="resizeShellClass"
+  >
+    <div ref="workspace" class="vibe-workspace">
+      <vibe-toolbar
+        class="vibe-float-panel"
+        :run-state="runState"
+        :can-save="dirty && !!activeFile"
+        :can-use-screen="canUseScreen"
+        :show-preview="showPreview"
+        :show-sidebar="showSidebar"
+        :show-editor="showEditor"
+        :show-tests="!testsCollapsed"
+        @run="handleRun"
+        @save="handleSave"
+        @import="openImport"
+        @export="openExport"
+        @toggle-preview="showPreview = !showPreview"
+        @toggle-sidebar="showSidebar = !showSidebar"
+        @toggle-editor="showEditor = !showEditor"
+        @toggle-tests="testsCollapsed = !testsCollapsed"
+        @switch-mode="$emit('switch-mode', $event)"
+        @use-screen="handleUseScreen"
+      />
+
+      <div ref="mainRow" class="vibe-main">
+        <aside
+          v-show="showSidebar"
+          class="vibe-sidebar vibe-float-panel"
+          :style="{ width: `${sidebarWidth}px` }"
+        >
+          <file-tree-panel
+            ref="fileTree"
+            :selected-path="activeFile"
+            :sheet-drag-enabled="sheetDragEnabled"
+            :used-screen-paths="usedScreenPaths"
+            @select="onProjectFileSelect"
+            @path-changed="onProjectPathChanged"
+          />
+        </aside>
+
+        <panel-resize-handle
+          v-if="showSidebar && (showEditor || showPreview)"
+          direction="horizontal"
+          :active="activeResize === 'sidebar'"
+          @resize-start="startResize('sidebar', $event)"
+        />
+
+        <div v-show="showEditor" class="vibe-editor-column">
+          <div class="vibe-editor-column__workspace vibe-float-panel">
+            <editor-workspace
+              :file-path="activeFile"
+              :content="fileContent"
+              :dirty="dirty"
+              :preview-error="previewError"
+              :mode.sync="editorMode"
+              :screen-model="screenModel"
+              :selected-node-id="selectedNodeId"
+              :selected-scenario-file="scenarioFilePath"
+              @change="onContentChange"
+              @select-node="selectedNodeId = $event"
+              @drop-node="onSheetDrop"
+              @update-props="onSheetUpdateProps"
+              @update-attrs="onSheetUpdateAttrs"
+              @remove-node="onSheetRemoveNode"
+              @duplicate-node="onSheetDuplicateNode"
+              :on-apply-edits="handleAiEdits"
+            />
+          </div>
+        </div>
+
+        <panel-resize-handle
+          v-if="showPreview && (showEditor || showSidebar)"
+          direction="horizontal"
+          :active="activeResize === 'preview'"
+          @resize-start="startResize('preview', $event)"
+        />
+
+        <aside
+          v-show="showPreview"
+          class="vibe-preview vibe-float-panel"
+          :class="{ 'vibe-preview--full': previewFullWidth }"
+          :style="previewPanelStyle"
+        >
+          <preview-panel
+            ref="previewPanel"
+            :component="previewComponent"
+            :error="previewError"
+            :run-state="runState"
+            :preview-key="previewRunKey"
+          />
+        </aside>
+      </div>
+
+      <panel-resize-handle
+        v-if="!testsCollapsed"
+        direction="vertical"
+        :active="activeResize === 'tests'"
+        @resize-start="startResize('tests', $event)"
+      />
+
+      <div
+        class="vibe-tests-drawer vibe-float-panel"
+        :class="{ 'vibe-tests-drawer--collapsed': testsCollapsed }"
+        :style="testsDrawerStyle"
+      >
+        <test-scenarios-panel
+          :scenarios="testScenarios"
+          :scenario-file-path="scenarioFilePath"
+          :scenario-files="scenarioFiles"
+          :collapsed="testsCollapsed"
+          :has-preview="!!previewComponent && !previewError"
+          :get-preview-root="getPreviewRoot"
+          :get-preview-vm="getPreviewVm"
+          @toggle-collapse="testsCollapsed = !testsCollapsed"
+          @select-scenario-file="setScenarioFile"
+          @edit-scenario-file="openScenarioFile"
+        />
+      </div>
+    </div>
+
+    <import-export-modal
+      :visible="modalVisible"
+      :mode="modalMode"
+      @close="modalVisible = false"
+      @imported="onImported"
+    />
+  </div>
+</template>
+
+<script>
+import VibeToolbar from "./components/VibeToolbar.vue";
+import FileTreePanel from "./components/FileTreePanel.vue";
+import EditorWorkspace from "./components/EditorWorkspace.vue";
+import PreviewPanel from "./components/PreviewPanel.vue";
+import TestScenariosPanel from "./components/TestScenariosPanel.vue";
+import ImportExportModal from "./components/ImportExportModal.vue";
+import PanelResizeHandle from "./components/PanelResizeHandle.vue";
+import { fetchFile, saveFile, fetchTree, cacheFileContent, invalidateFileContentCache } from "./services/vibeProjectApi";
+import { ensureVueFileContent } from "./services/vibeProjectCreate";
+import { invalidateVibeScreenRuntimeCache, cacheVibeScreenComponent } from "./services/vibeProjectScreenLoader";
+import { invalidateComponentPropSchema } from "./services/vibeComponentProps";
+import { applyAiEdits } from "./services/vibeAiService";
+import { compileEntry, compileVueFile } from "./services/vibeCompiler";
+import { parseScenarios } from "./services/vibeTestRunner";
+import { generateVueSfc, patchComponentPropsInSource } from "./services/vibeScreenCodegen";
+import {
+  patchComponentUsageProps,
+  patchContainerTagAttrs,
+  extractPreservedBlocks,
+  syncImportedVueComponentsInSource,
+} from "./services/vibeSfcPatch";
+import { parseVueToScreenModel, isScreenFile, isSheetFile } from "./services/vibeScreenParser";
+import { pickPrimaryEditPath } from "./services/vibeAiPrompt";
+import {
+  DEFAULT_SCENARIO_PATH,
+  isScenarioFilePath,
+  listScenarioFilesFromTree,
+  loadScenarioPreferences,
+  saveScenarioPreferences,
+} from "./services/vibeScenarioPreferences";
+import {
+  addNode,
+  createNodeFromPayload,
+  duplicateNode,
+  findNode,
+  insertNode,
+  moveNode,
+  removeNode,
+  updateNodeAttrs,
+  updateNodeProps,
+} from "./services/vibeScreenModel";
+import {
+  clamp,
+  loadPanelSizes,
+  savePanelSizes,
+  PANEL_LIMITS,
+} from "./services/panelSizes";
+import "./styles/vibe-layout.scss";
+
+const DEFAULT_SCENARIOS_PATH = DEFAULT_SCENARIO_PATH;
+const PREVIEW_CACHE_LIMIT = 40;
+
+export default {
+  name: "VibeScreenBuilder",
+  components: {
+    VibeToolbar,
+    FileTreePanel,
+    EditorWorkspace,
+    PreviewPanel,
+    TestScenariosPanel,
+    ImportExportModal,
+    PanelResizeHandle,
+  },
+  props: {
+    usedScreenPaths: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    const sizes = loadPanelSizes();
+    const scenarioPrefs = loadScenarioPreferences();
+    return {
+      activeFile: "",
+      fileContent: "",
+      savedContent: "",
+      showPreview: true,
+      showSidebar: true,
+      showEditor: true,
+      testsCollapsed: true,
+      editorMode: "code",
+      screenModel: null,
+      selectedNodeId: "",
+      previewTimer: null,
+      lastPreviewCompileKey: "",
+      runState: "idle",
+      previewComponent: null,
+      previewError: null,
+      previewRunKey: 0,
+      testScenarios: [],
+      scenarioFilePath: scenarioPrefs.scenarioFilePath,
+      scenarioFiles: [DEFAULT_SCENARIOS_PATH],
+      modalVisible: false,
+      modalMode: "import",
+      sidebarWidth: sizes.sidebarWidth,
+      previewWidth: sizes.previewWidth,
+      testsHeight: sizes.testsHeight,
+      activeResize: null,
+      resizeStart: null,
+    };
+  },
+  computed: {
+    dirty() {
+      return this.fileContent !== this.savedContent;
+    },
+    resizeShellClass() {
+      return {
+        "vibe-shell--resizing": !!this.activeResize,
+        "vibe-shell--resizing-vertical": this.activeResize === "tests",
+      };
+    },
+    testsDrawerStyle() {
+      if (this.testsCollapsed) return {};
+      return { height: `${this.testsHeight}px` };
+    },
+    sheetDragEnabled() {
+      return this.editorMode === "sheet" && isSheetFile(this.activeFile);
+    },
+    previewFullWidth() {
+      return this.showPreview && !this.showEditor && !this.showSidebar;
+    },
+    previewPanelStyle() {
+      if (!this.showPreview || this.previewFullWidth) return {};
+      return { width: `${this.previewWidth}px` };
+    },
+    canUseScreen() {
+      return isScreenFile(this.activeFile);
+    },
+  },
+  watch: {
+    editorMode(mode) {
+      this.$refs.fileTree?.refresh();
+      if (mode === "sheet" && isSheetFile(this.activeFile)) {
+        this.initScreenModel();
+        this.requestPreview(this.activeFile, this.fileContent);
+      }
+    },
+  },
+  created() {
+    this.previewCompileCache = new Map();
+  },
+  mounted() {
+    invalidateFileContentCache();
+    this.refreshScenarioFiles().then(() => this.loadScenarios());
+    document.addEventListener("keydown", this.handleKeydown);
+    this.openFile("screens/MainScreen.vue");
+    this.$nextTick(() => this.$refs.fileTree?.refresh());
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this.handleKeydown);
+    this.stopResize();
+    if (this.previewTimer) clearTimeout(this.previewTimer);
+  },
+  methods: {
+    handleKeydown(event) {
+      if ((event.metaKey || event.ctrlKey) && event.key === "s") {
+        event.preventDefault();
+        this.handleSave();
+      }
+    },
+    startResize(panel, { clientX, clientY }) {
+      this.activeResize = panel;
+      this.resizeStart = {
+        clientX,
+        clientY,
+        sidebarWidth: this.sidebarWidth,
+        previewWidth: this.previewWidth,
+        testsHeight: this.testsHeight,
+      };
+      document.addEventListener("mousemove", this.onResizeMove);
+      document.addEventListener("mouseup", this.stopResize);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor =
+        panel === "tests" ? "row-resize" : "col-resize";
+    },
+    onResizeMove(event) {
+      if (!this.resizeStart) return;
+
+      const dx = event.clientX - this.resizeStart.clientX;
+      const dy = event.clientY - this.resizeStart.clientY;
+      const mainWidth = this.$refs.mainRow?.clientWidth || window.innerWidth;
+      const maxPreview = Math.max(
+        PANEL_LIMITS.preview.min,
+        Math.floor(mainWidth * 0.65)
+      );
+
+      if (this.activeResize === "sidebar") {
+        this.sidebarWidth = clamp(
+          this.resizeStart.sidebarWidth + dx,
+          PANEL_LIMITS.sidebar.min,
+          PANEL_LIMITS.sidebar.max
+        );
+      } else if (this.activeResize === "preview") {
+        this.previewWidth = clamp(
+          this.resizeStart.previewWidth - dx,
+          PANEL_LIMITS.preview.min,
+          maxPreview
+        );
+      } else if (this.activeResize === "tests") {
+        this.testsHeight = clamp(
+          this.resizeStart.testsHeight - dy,
+          PANEL_LIMITS.tests.min,
+          PANEL_LIMITS.tests.max
+        );
+      }
+    },
+    stopResize() {
+      if (!this.activeResize) return;
+
+      document.removeEventListener("mousemove", this.onResizeMove);
+      document.removeEventListener("mouseup", this.stopResize);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+
+      savePanelSizes({
+        sidebarWidth: this.sidebarWidth,
+        previewWidth: this.previewWidth,
+        testsHeight: this.testsHeight,
+      });
+
+      this.activeResize = null;
+      this.resizeStart = null;
+    },
+    handleUseScreen() {
+      if (!this.canUseScreen) return;
+      this.prepareScreenForClassicUse().then((ready) => {
+        if (ready) {
+          this.$emit("use-screen", this.activeFile);
+        }
+      });
+    },
+    async prepareScreenForClassicUse() {
+      if (this.dirty) {
+        await this.handleSave();
+      }
+
+      const compileKey = this.buildPreviewCompileKey(this.activeFile, this.fileContent);
+      let component = this.previewComponent;
+
+      if (!component || this.lastPreviewCompileKey !== compileKey || this.runState !== "success") {
+        await this.previewVueFile(this.activeFile, this.fileContent);
+        component = this.previewComponent;
+      }
+
+      if (!component) {
+        window.alert("No se pudo compilar el screen para usar en Classic Builder.");
+        return false;
+      }
+
+      cacheVibeScreenComponent(this.activeFile, this.fileContent, component);
+      return true;
+    },
+    onProjectFileSelect(target) {
+      if (!target) {
+        this.openFile("");
+        return;
+      }
+      if (typeof target === "string") {
+        this.openFile(target);
+        return;
+      }
+      this.openFile(target.path, { initialContent: target.initialContent });
+    },
+    onProjectPathChanged({ from, to, action }) {
+      if (!from) return;
+
+      invalidateFileContentCache(from);
+      if (to) invalidateFileContentCache(to);
+      invalidateComponentPropSchema(from);
+      if (to) invalidateComponentPropSchema(to);
+
+      if (from.startsWith("screens/") && from.endsWith(".vue")) {
+        invalidateVibeScreenRuntimeCache(from);
+      }
+      if (to?.startsWith("screens/") && to.endsWith(".vue")) {
+        invalidateVibeScreenRuntimeCache(to);
+      }
+
+      if (!this.activeFile) return;
+
+      if (action === "delete") {
+        if (this.activeFile === from || this.activeFile.startsWith(`${from}/`)) {
+          this.openFile("", { skipDirtyCheck: true });
+        }
+        return;
+      }
+
+      if (this.activeFile === from) {
+        this.activeFile = to;
+        if (this.screenModel) {
+          this.screenModel.screenPath = to;
+        }
+        return;
+      }
+
+      if (this.activeFile.startsWith(`${from}/`) && to) {
+        this.activeFile = this.activeFile.replace(`${from}/`, `${to}/`);
+        if (this.screenModel && this.screenModel.screenPath?.startsWith(`${from}/`)) {
+          this.screenModel.screenPath = this.screenModel.screenPath.replace(
+            `${from}/`,
+            `${to}/`
+          );
+        }
+      }
+    },
+    async openFile(path, { skipDirtyCheck = false, initialContent = null } = {}) {
+      if (!path) {
+        this.activeFile = "";
+        this.fileContent = "";
+        this.savedContent = "";
+        this.screenModel = null;
+        return;
+      }
+
+      if (path === this.activeFile && !this.dirty && initialContent === null) {
+        return;
+      }
+
+      if (!skipDirtyCheck && this.dirty && this.activeFile) {
+        const save = window.confirm("Save changes before switching files?");
+        if (save) await this.handleSave();
+      }
+
+      try {
+        let fetchedContent = initialContent;
+        if (fetchedContent === null) {
+          const { content } = await fetchFile(path);
+          fetchedContent = content;
+        }
+
+        const content = ensureVueFileContent(path, fetchedContent);
+        const scaffolded = content !== fetchedContent;
+
+        if (scaffolded) {
+          await saveFile(path, content);
+          invalidateComponentPropSchema(path);
+        }
+
+        this.activeFile = path;
+        this.fileContent = content;
+        this.savedContent = content;
+
+        if (this.editorMode === "sheet" && !isSheetFile(path)) {
+          this.editorMode = "code";
+        }
+
+        if (isSheetFile(path)) {
+          this.initScreenModel();
+        } else {
+          this.screenModel = null;
+          this.selectedNodeId = "";
+        }
+
+        if (path.toLowerCase().endsWith(".vue")) {
+          await this.requestPreview(path, content, { force: true });
+        }
+
+        if (isScenarioFilePath(path)) {
+          this.setScenarioFile(path, { reload: true });
+        }
+      } catch (err) {
+        window.alert(err.message);
+      }
+    },
+    buildPreviewCompileKey(filePath, sourceContent = null) {
+      const content =
+        sourceContent !== null
+          ? sourceContent
+          : filePath === this.activeFile
+            ? this.fileContent
+            : "";
+      return `${filePath}\0${content}`;
+    },
+    getCachedPreview(compileKey) {
+      return this.previewCompileCache.get(compileKey) || null;
+    },
+    storePreviewCache(compileKey, result) {
+      if (!this.previewCompileCache.has(compileKey) && this.previewCompileCache.size >= PREVIEW_CACHE_LIMIT) {
+        const oldestKey = this.previewCompileCache.keys().next().value;
+        this.previewCompileCache.delete(oldestKey);
+      }
+      this.previewCompileCache.set(compileKey, result);
+    },
+    clearPreviewCache() {
+      this.previewCompileCache.clear();
+      this.lastPreviewCompileKey = "";
+    },
+    applyPreviewResult(compileKey, { component, error }, { remount = true } = {}) {
+      if (error) {
+        this.previewError = error;
+        this.previewComponent = null;
+        this.runState = "error";
+      } else {
+        this.previewError = null;
+        this.previewComponent = component;
+        this.runState = "success";
+        if (remount) {
+          this.previewRunKey += 1;
+        }
+        if (component && isScreenFile(this.activeFile)) {
+          const separatorIndex = compileKey.indexOf("\0");
+          const content =
+            separatorIndex === -1 ? this.fileContent : compileKey.slice(separatorIndex + 1);
+          cacheVibeScreenComponent(this.activeFile, content, component);
+        }
+      }
+      this.lastPreviewCompileKey = compileKey;
+    },
+    requestPreview(filePath, sourceContent = null, { debounce = 0, force = false } = {}) {
+      if (this.previewTimer) {
+        clearTimeout(this.previewTimer);
+        this.previewTimer = null;
+      }
+
+      const run = () => {
+        this.previewTimer = null;
+        this.previewVueFile(filePath, sourceContent, { force });
+      };
+
+      if (debounce > 0) {
+        this.previewTimer = setTimeout(run, debounce);
+        return;
+      }
+
+      return run();
+    },
+    onContentChange(content) {
+      this.fileContent = content;
+      if (this.activeFile) {
+        cacheFileContent(this.activeFile, content);
+      }
+      if (
+        this.editorMode === "code" &&
+        this.activeFile?.toLowerCase().endsWith(".vue")
+      ) {
+        this.requestPreview(this.activeFile, content, { debounce: 350 });
+      }
+    },
+    initScreenModel() {
+      if (!isSheetFile(this.activeFile)) {
+        this.screenModel = null;
+        this.selectedNodeId = "";
+        return;
+      }
+      this.screenModel = parseVueToScreenModel(this.activeFile, this.fileContent);
+      this.selectedNodeId = this.screenModel.root.id;
+    },
+    syncSheetToCode({ preview = false, mode = "full" } = {}) {
+      if (!this.screenModel) return;
+
+      if (mode === "component-props-root" && this.screenModel.isComponentSheet) {
+        this.fileContent = patchComponentPropsInSource(
+          this.fileContent,
+          this.screenModel.componentProps,
+          this.screenModel.script?.props
+        );
+      } else if (mode === "structural") {
+        this.fileContent = generateVueSfc(this.screenModel, { structural: true });
+        this.refreshPreservedBlocks();
+      } else if (this.screenModel.preservedTemplate) {
+        // Non-structural edits keep the original template/script/styles intact.
+        return;
+      } else {
+        this.fileContent = generateVueSfc(this.screenModel);
+      }
+
+      if (this.activeFile) {
+        cacheFileContent(this.activeFile, this.fileContent);
+      }
+
+      if (preview) {
+        this.requestPreview(this.activeFile, this.fileContent, { debounce: 350 });
+      }
+    },
+    refreshPreservedBlocks() {
+      const preserved = extractPreservedBlocks(this.fileContent);
+      if (!this.screenModel) return;
+      this.screenModel.preservedTemplate = preserved.template;
+      this.screenModel.preservedScript = preserved.script;
+      this.screenModel.preservedStyles = preserved.styles;
+    },
+    patchSheetNodeProps(nodeId, props) {
+      const found = findNode(this.screenModel.root, nodeId);
+      const node = found?.node;
+      if (!node) return false;
+
+      if (node.type === "component") {
+        this.fileContent = patchComponentUsageProps(
+          this.fileContent,
+          node.componentName,
+          node.templateTagIndex || 0,
+          props
+        );
+      }
+      updateNodeProps(this.screenModel, nodeId, props);
+      this.refreshPreservedBlocks();
+      return true;
+    },
+    patchSheetNodeAttrs(nodeId, attrs) {
+      const found = findNode(this.screenModel.root, nodeId);
+      const node = found?.node;
+      if (!node || node.type !== "container") return false;
+
+      if (nodeId === this.screenModel.root.id) {
+        this.screenModel.root.attrs = { ...attrs };
+      } else {
+        updateNodeAttrs(this.screenModel, nodeId, attrs);
+      }
+
+      this.fileContent = patchContainerTagAttrs(
+        this.fileContent,
+        node.tag,
+        node.templateTagIndex || 0,
+        attrs
+      );
+      this.refreshPreservedBlocks();
+      return true;
+    },
+    onSheetDrop({ parentId, payload, index = null }) {
+      if (payload?.kind === "move" && payload.nodeId) {
+        this.onSheetMove({ nodeId: payload.nodeId, parentId, index });
+        return;
+      }
+
+      this.ensureComponentFileReady(payload).then(() => {
+        const node = createNodeFromPayload(payload);
+        if (!node || !this.screenModel) return;
+
+        if (index === null || index === undefined) {
+          addNode(this.screenModel, parentId, node);
+        } else {
+          insertNode(this.screenModel, parentId, node, index);
+        }
+
+        this.selectedNodeId = node.id;
+        this.syncSheetToCode({ preview: true, mode: "structural" });
+      });
+    },
+    onSheetMove({ nodeId, parentId, index = null }) {
+      if (!this.screenModel || !nodeId || nodeId === parentId) return;
+      if (moveNode(this.screenModel, nodeId, parentId, index)) {
+        this.selectedNodeId = nodeId;
+        this.syncSheetToCode({ preview: true, mode: "structural" });
+      }
+    },
+    async ensureComponentFileReady(payload) {
+      if (payload?.kind !== "component" || !payload.path) return;
+
+      try {
+        let content = "";
+        try {
+          const result = await fetchFile(payload.path);
+          content = result.content;
+        } catch (err) {
+          if (!/not found/i.test(err.message)) {
+            throw err;
+          }
+        }
+
+        const scaffoldedContent = ensureVueFileContent(payload.path, content);
+        cacheFileContent(payload.path, scaffoldedContent);
+
+        if (!content || scaffoldedContent !== content) {
+          await saveFile(payload.path, scaffoldedContent);
+          invalidateComponentPropSchema(payload.path);
+          await this.$refs.fileTree?.refresh();
+        }
+      } catch (err) {
+        window.alert(err.message);
+      }
+    },
+    onSheetUpdateProps({ nodeId, props }) {
+      if (!this.screenModel) return;
+      if (this.screenModel.isComponentSheet && nodeId === this.screenModel.root.id) {
+        this.screenModel.componentProps = { ...props };
+        this.syncSheetToCode({ preview: true, mode: "component-props-root" });
+        return;
+      }
+
+      if (this.patchSheetNodeProps(nodeId, props)) {
+        this.requestPreview(this.activeFile, this.fileContent, { debounce: 350 });
+        return;
+      }
+
+      updateNodeProps(this.screenModel, nodeId, props);
+      this.syncSheetToCode({ preview: true, mode: "structural" });
+    },
+    onSheetUpdateAttrs({ nodeId, attrs }) {
+      if (!this.screenModel) return;
+
+      if (this.patchSheetNodeAttrs(nodeId, attrs)) {
+        this.requestPreview(this.activeFile, this.fileContent, { debounce: 350 });
+        return;
+      }
+
+      updateNodeAttrs(this.screenModel, nodeId, attrs);
+      this.syncSheetToCode({ preview: true, mode: "structural" });
+    },
+    onSheetRemoveNode(nodeId) {
+      if (!this.screenModel) return;
+      if (removeNode(this.screenModel, nodeId)) {
+        this.selectedNodeId = this.screenModel.root.id;
+        this.syncSheetToCode({ preview: true, mode: "structural" });
+      }
+    },
+    onSheetDuplicateNode(nodeId) {
+      if (!this.screenModel) return;
+      const clone = duplicateNode(this.screenModel, nodeId);
+      if (clone) {
+        this.selectedNodeId = clone.id;
+        this.syncSheetToCode({ preview: true, mode: "structural" });
+      }
+    },
+    async handleSave() {
+      if (!this.activeFile) return;
+
+      if (this.editorMode === "sheet" && this.screenModel && isSheetFile(this.activeFile)) {
+        this.syncSheetToCode({ preview: false, mode: "structural" });
+      }
+
+      if (!this.dirty) return;
+
+      try {
+        let contentToSave = this.fileContent;
+        if (this.activeFile.toLowerCase().endsWith(".vue")) {
+          const synced = syncImportedVueComponentsInSource(contentToSave);
+          if (synced !== contentToSave) {
+            contentToSave = synced;
+            this.fileContent = synced;
+            cacheFileContent(this.activeFile, synced);
+          }
+        }
+
+        await saveFile(this.activeFile, contentToSave);
+        this.savedContent = contentToSave;
+        if (this.activeFile.startsWith("screens/") && this.activeFile.endsWith(".vue")) {
+          invalidateVibeScreenRuntimeCache(this.activeFile);
+        }
+        if (isScenarioFilePath(this.activeFile)) {
+          this.loadScenariosFromContent(contentToSave);
+        }
+      } catch (err) {
+        window.alert(err.message);
+      }
+    },
+    async previewVueFile(filePath, sourceContent = null, { force = false } = {}) {
+      const compileKey = this.buildPreviewCompileKey(filePath, sourceContent);
+
+      if (
+        !force &&
+        compileKey === this.lastPreviewCompileKey &&
+        this.runState === "success" &&
+        this.previewComponent
+      ) {
+        return;
+      }
+
+      const cached = !force ? this.getCachedPreview(compileKey) : null;
+      if (cached) {
+        this.applyPreviewResult(compileKey, cached);
+        return;
+      }
+
+      this.runState = "compiling";
+      this.previewError = null;
+
+      const result = await compileVueFile(filePath, sourceContent);
+      this.storePreviewCache(compileKey, result);
+      this.applyPreviewResult(compileKey, result);
+    },
+    async handleRun() {
+      if (this.dirty && this.activeFile) {
+        await this.handleSave();
+      }
+
+      if (this.activeFile?.toLowerCase().endsWith(".vue")) {
+        const source =
+          this.editorMode === "sheet" && isSheetFile(this.activeFile)
+            ? this.fileContent
+            : null;
+        await this.previewVueFile(this.activeFile, source, { force: true });
+      } else {
+        this.runState = "compiling";
+        this.previewError = null;
+        this.lastPreviewCompileKey = "";
+
+        const { component, error } = await compileEntry();
+
+        if (error) {
+          this.previewError = error;
+          this.runState = "error";
+        } else {
+          this.previewComponent = component;
+          this.previewRunKey += 1;
+          this.runState = "success";
+        }
+      }
+
+      await this.loadScenarios();
+    },
+    async refreshScenarioFiles() {
+      try {
+        const { tree } = await fetchTree();
+        this.scenarioFiles = listScenarioFilesFromTree(tree);
+      } catch {
+        this.scenarioFiles = [DEFAULT_SCENARIOS_PATH];
+      }
+
+      if (!this.scenarioFiles.includes(this.scenarioFilePath)) {
+        this.scenarioFilePath =
+          this.scenarioFiles.find((path) => path === DEFAULT_SCENARIOS_PATH) ||
+          this.scenarioFiles[0] ||
+          DEFAULT_SCENARIOS_PATH;
+        saveScenarioPreferences({ scenarioFilePath: this.scenarioFilePath });
+      }
+    },
+    async setScenarioFile(path, { reload = true } = {}) {
+      if (!isScenarioFilePath(path)) return;
+      this.scenarioFilePath = path;
+      saveScenarioPreferences({ scenarioFilePath: path });
+      if (reload) {
+        await this.loadScenarios();
+      }
+    },
+    openScenarioFile(path) {
+      if (!isScenarioFilePath(path)) return;
+      this.openFile(path);
+    },
+    async loadScenarios() {
+      try {
+        const { content } = await fetchFile(this.scenarioFilePath);
+        this.loadScenariosFromContent(content);
+      } catch {
+        this.testScenarios = [];
+      }
+    },
+    loadScenariosFromContent(content) {
+      try {
+        this.testScenarios = parseScenarios(content);
+      } catch {
+        this.testScenarios = [];
+      }
+    },
+    openImport() {
+      this.modalMode = "import";
+      this.modalVisible = true;
+    },
+    openExport() {
+      this.modalMode = "export";
+      this.modalVisible = true;
+    },
+    async onImported() {
+      this.clearPreviewCache();
+      await this.$refs.fileTree.refresh();
+      await this.refreshScenarioFiles();
+      await this.loadScenarios();
+      await this.handleRun();
+    },
+    getPreviewRoot() {
+      return this.$refs.previewPanel?.getPreviewRoot();
+    },
+    getPreviewVm() {
+      return this.$refs.previewPanel?.getPreviewVm();
+    },
+    async handleAiEdits(edits, { switchToCode = true } = {}) {
+      if (!edits?.length) return;
+
+      try {
+        this.clearPreviewCache();
+        await applyAiEdits(edits, saveFile);
+
+        const openPath = pickPrimaryEditPath(edits, this.activeFile);
+        const openEdit = edits.find((e) => e.path === openPath);
+
+        if (openPath) {
+          this.activeFile = openPath;
+          if (openEdit) {
+            this.fileContent = openEdit.content;
+            this.savedContent = openEdit.content;
+          } else {
+            const { content } = await fetchFile(openPath);
+            this.fileContent = content;
+            this.savedContent = content;
+          }
+        } else if (this.activeFile) {
+          const activeEdit = edits.find((e) => e.path === this.activeFile);
+          if (activeEdit) {
+            this.fileContent = activeEdit.content;
+            this.savedContent = activeEdit.content;
+          } else {
+            const { content } = await fetchFile(this.activeFile);
+            this.fileContent = content;
+            this.savedContent = content;
+          }
+        }
+
+        edits.forEach((edit) => {
+          if (isSheetFile(edit.path) && edit.path === this.activeFile) {
+            this.initScreenModel();
+          }
+          if (edit.path.startsWith("components/") && edit.path.endsWith(".vue")) {
+            invalidateComponentPropSchema(edit.path);
+          }
+        });
+
+        await this.$refs.fileTree?.refresh();
+
+        const scenarioEdits = edits.filter((e) => isScenarioFilePath(e.path));
+        if (scenarioEdits.length) {
+          scenarioEdits.forEach((edit) => {
+            if (!this.scenarioFiles.includes(edit.path)) {
+              this.scenarioFiles.push(edit.path);
+            }
+          });
+          this.scenarioFiles.sort((a, b) => a.localeCompare(b));
+          await this.refreshScenarioFiles();
+          const primaryScenario = scenarioEdits[scenarioEdits.length - 1].path;
+          await this.setScenarioFile(primaryScenario);
+          this.testsCollapsed = false;
+        } else {
+          const activeScenarioEdit = edits.find((e) => e.path === this.scenarioFilePath);
+          if (activeScenarioEdit) {
+            this.loadScenariosFromContent(activeScenarioEdit.content);
+          }
+        }
+
+        if (switchToCode) {
+          this.editorMode = "code";
+        } else if (isSheetFile(this.activeFile)) {
+          this.initScreenModel();
+        }
+
+        if (this.activeFile?.toLowerCase().endsWith(".vue")) {
+          await this.previewVueFile(this.activeFile, this.fileContent, { force: true });
+        } else {
+          await this.handleRun();
+        }
+      } catch (err) {
+        throw err;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-screen-builder {
+  height: 100%;
+}
+</style>
diff --git a/src/vibe/components/EditorWorkspace.vue b/src/vibe/components/EditorWorkspace.vue
new file mode 100644
index 000000000..e80921b09
--- /dev/null
+++ b/src/vibe/components/EditorWorkspace.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="editor-workspace">
+    <div class="editor-workspace__header vibe-panel-header">
+      <div class="editor-workspace__meta">
+        <span v-if="filePath" class="editor-workspace__file">{{ fileName }}</span>
+        <span v-if="dirty" class="editor-workspace__dirty" title="Unsaved changes">●</span>
+      </div>
+
+      <div class="editor-workspace__toggle">
+        <button
+          class="vibe-btn ghost"
+          :class="{ active: mode === 'code' }"
+          @click="$emit('update:mode', 'code')"
+        >
+          Code
+        </button>
+        <button
+          v-if="canUseSheet"
+          class="vibe-btn ghost"
+          :class="{ active: mode === 'sheet' }"
+          @click="$emit('update:mode', 'sheet')"
+        >
+          Hoja
+        </button>
+        <button
+          class="vibe-btn ghost editor-workspace__tab editor-workspace__tab--ai"
+          :class="{ active: mode === 'ai' }"
+          title="AI Assistant"
+          @click="$emit('update:mode', 'ai')"
+        >
+          <svg
+            class="editor-workspace__tab-icon"
+            viewBox="0 0 132 132"
+            fill="none"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M64.2526 56.8326L60.1595 60.9257L18.7605 102.325C15.7465 105.339 15.7465 110.226 18.7605 113.24C21.7746 116.254 26.6613 116.254 29.6754 113.24L71.0743 71.8405M60.1595 60.9257L71.0743 71.8405M71.0743 71.8405L75.1674 67.7474M64.2526 56.8326L64.4864 56.5983C66.6182 54.4672 70.0733 54.4672 72.2045 56.5983L75.4017 59.7955C77.5329 61.9267 77.5329 65.3818 75.4017 67.5131L75.1674 67.7474M64.2526 56.8326L75.1674 67.7474"
+              stroke="currentColor"
+              stroke-width="8.25"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M100.307 17.4189C100.879 16.1937 102.621 16.1937 103.193 17.4189L105.348 22.0356C106.296 24.069 107.931 25.7035 109.964 26.6525L114.581 28.8071C115.806 29.3789 115.806 31.1211 114.581 31.6929L109.964 33.8475C107.931 34.7965 106.296 36.431 105.348 38.4644L103.193 43.0811C102.621 44.3063 100.879 44.3063 100.307 43.0811L98.1524 38.4644C97.2037 36.431 95.5691 34.7965 93.5357 33.8475L88.919 31.6929C87.6936 31.1211 87.6936 29.3789 88.919 28.8071L93.5357 26.6525C95.5691 25.7035 97.2037 24.069 98.1524 22.0356L100.307 17.4189Z"
+              stroke="currentColor"
+              stroke-width="8.25"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M100.307 77.919C100.879 76.6936 102.621 76.6936 103.193 77.919L105.348 82.5358C106.296 84.5691 107.931 86.2037 109.964 87.1524L114.581 89.3073C115.806 89.8788 115.806 91.6212 114.581 92.1927L109.964 94.3476C107.931 95.2963 106.296 96.9309 105.348 98.9642L103.193 103.581C102.621 104.806 100.879 104.806 100.307 103.581L98.1524 98.9642C97.2037 96.9309 95.5691 95.2963 93.5357 94.3476L88.919 92.1927C87.6936 91.6212 87.6936 89.8788 88.919 89.3073L93.5357 87.1524C95.5691 86.2037 97.2037 84.5691 98.1524 82.5358L100.307 77.919Z"
+              stroke="currentColor"
+              stroke-width="8.25"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M39.8071 17.4189C40.3789 16.1937 42.1211 16.1937 42.6929 17.4189L44.8475 22.0356C45.7965 24.069 47.431 25.7035 49.4644 26.6525L54.0811 28.8071C55.3063 29.3789 55.3063 31.1211 54.0811 31.6929L49.4644 33.8475C47.431 34.7965 45.7965 36.431 44.8475 38.4644L42.6929 43.0811C42.1211 44.3063 40.3789 44.3063 39.8071 43.0811L37.6525 38.4644C36.7035 36.431 35.069 34.7965 33.0356 33.8475L28.4189 31.6929C27.1937 31.1211 27.1937 29.3789 28.4189 28.8071L33.0356 26.6525C35.069 25.7035 36.7035 24.069 37.6525 22.0356L39.8071 17.4189Z"
+              stroke="currentColor"
+              stroke-width="8.25"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <span>AI</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="editor-workspace__body">
+      <vibe-code-editor
+        v-if="mode === 'code' || (mode === 'sheet' && !canUseSheet)"
+        :file-path="filePath"
+        :content="content"
+        :dirty="dirty"
+        :show-tab="false"
+        @change="$emit('change', $event)"
+      />
+      <screen-sheet-editor
+        v-else-if="mode === 'sheet' && screenModel"
+        :model="screenModel"
+        :selected-node-id="selectedNodeId"
+        @select-node="$emit('select-node', $event)"
+        @drop-node="$emit('drop-node', $event)"
+        @update-props="$emit('update-props', $event)"
+        @update-attrs="$emit('update-attrs', $event)"
+        @remove-node="$emit('remove-node', $event)"
+        @duplicate-node="$emit('duplicate-node', $event)"
+      />
+      <div
+        v-else-if="mode === 'sheet' && canUseSheet"
+        class="editor-workspace__sheet-loading vibe-empty-state"
+      >
+        <div class="vibe-empty-state__title">Preparing sheet editor...</div>
+      </div>
+      <vibe-ai-panel
+        v-else-if="mode === 'ai'"
+        embedded
+        :active-file="filePath"
+        :active-file-content="content"
+        :editor-mode="aiContextMode"
+        :preview-error="previewError"
+        :selected-scenario-file="selectedScenarioFile"
+        :on-apply-edits="onApplyEdits"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import VibeCodeEditor from "./VibeCodeEditor.vue";
+import ScreenSheetEditor from "./ScreenSheetEditor.vue";
+import VibeAiPanel from "./VibeAiPanel.vue";
+import { isSheetFile } from "../services/vibeScreenParser";
+
+export default {
+  name: "EditorWorkspace",
+  components: { VibeCodeEditor, ScreenSheetEditor, VibeAiPanel },
+  props: {
+    filePath: { type: String, default: "" },
+    content: { type: String, default: "" },
+    dirty: { type: Boolean, default: false },
+    previewError: { type: String, default: null },
+    mode: {
+      type: String,
+      default: "code",
+      validator: (v) => ["code", "sheet", "ai"].includes(v),
+    },
+    screenModel: { type: Object, default: null },
+    selectedNodeId: { type: String, default: "" },
+    selectedScenarioFile: { type: String, default: "tests/scenarios.yaml" },
+    onApplyEdits: { type: Function, default: null },
+  },
+  computed: {
+    fileName() {
+      return this.filePath ? this.filePath.split("/").pop() : "";
+    },
+    canUseSheet() {
+      return isSheetFile(this.filePath);
+    },
+    aiContextMode() {
+      if (this.canUseSheet && this.screenModel) return "sheet";
+      return "code";
+    },
+  },
+};
+</script>
+
+<style scoped>
+.editor-workspace {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.editor-workspace__header {
+  gap: 12px;
+}
+
+.editor-workspace__meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.editor-workspace__file {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vibe-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.editor-workspace__dirty {
+  color: var(--vibe-accent-secondary);
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.editor-workspace__toggle {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.editor-workspace__tab {
+  gap: 6px;
+}
+
+.editor-workspace__tab-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.editor-workspace__tab--ai {
+  color: var(--vibe-accent);
+  background: var(--vibe-accent-muted);
+  border-color: transparent;
+  font-weight: 600;
+}
+
+.editor-workspace__tab--ai:hover:not(:disabled) {
+  background: rgba(15, 38, 74, 0.12);
+  transform: none;
+}
+
+.editor-workspace__tab--ai.active {
+  background: var(--vibe-accent);
+  border-color: transparent;
+  color: var(--vibe-accent-on);
+  box-shadow: 0 4px 14px rgba(15, 38, 74, 0.18);
+}
+
+.editor-workspace__body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.editor-workspace__sheet-loading {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/src/vibe/components/FileTreeNode.vue b/src/vibe/components/FileTreeNode.vue
new file mode 100644
index 000000000..f0c0607d0
--- /dev/null
+++ b/src/vibe/components/FileTreeNode.vue
@@ -0,0 +1,401 @@
+<template>
+  <div class="file-tree-node">
+    <div
+      v-if="node.type === 'directory'"
+      class="file-tree-node__row file-tree-node__row--dir"
+      :class="{
+        'file-tree-node__row--creatable': creatableKind,
+        'file-tree-node__row--drop-target': dropActive,
+        'file-tree-node__row--draggable': canManage,
+      }"
+      :style="{ paddingLeft: `${depth * 12 + 8}px` }"
+      :draggable="canManage"
+      @click="toggle"
+      @contextmenu.prevent="onContextMenu"
+      @dragstart.stop="onFileMoveDragStart"
+      @dragend.stop="onFileMoveDragEnd"
+      @dragenter.prevent.stop="onFolderDragEnter"
+      @dragover.prevent.stop="onFolderDragOver"
+      @dragleave.stop="onFolderDragLeave"
+      @drop.prevent.stop="onFolderDrop"
+    >
+      <span class="file-tree-node__chevron" :class="{ open: expanded }">
+        <svg viewBox="0 0 12 12" fill="none">
+          <path
+            d="M4.5 2.5 8 6l-3.5 3.5"
+            stroke="currentColor"
+            stroke-width="1.4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+      <file-type-icon :icon-type="expanded ? 'folder-open' : 'folder'" />
+      <span class="file-tree-node__name">{{ node.name }}</span>
+      <div v-if="creatableKind" class="file-tree-node__actions" @click.stop>
+        <button
+          class="file-tree-node__action"
+          :title="createFileLabel"
+          @click="createFile"
+        >
+          +
+        </button>
+        <button
+          class="file-tree-node__action file-tree-node__action--folder"
+          title="New folder"
+          @click="createFolder"
+        >
+          dir
+        </button>
+      </div>
+    </div>
+
+    <div
+      v-else
+      class="file-tree-node__row file-tree-node__row--file"
+      :class="{
+        active: selectedPath === node.path,
+        'file-tree-node__row--draggable': isSheetDraggable || canManage,
+      }"
+      :style="{ paddingLeft: `${depth * 12 + 8}px` }"
+      :draggable="isSheetDraggable || canManage"
+      @click="selectFile"
+      @contextmenu.prevent="onContextMenu"
+      @dragstart="onFileDragStart"
+      @dragend="onFileMoveDragEnd"
+    >
+      <span class="file-tree-node__chevron file-tree-node__chevron--spacer" />
+      <file-type-icon :icon-type="fileIconType" />
+      <span class="file-tree-node__name">{{ node.name }}</span>
+      <span
+        v-if="isUsedInClassic"
+        class="file-tree-node__used-badge"
+        title="Used in Classic Builder"
+        aria-label="Used in Classic Builder"
+      >
+        <svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
+          <circle cx="6" cy="6" r="5.25" fill="currentColor" opacity="0.16" />
+          <path
+            d="M3.5 6.1 5.2 7.8 8.6 4.4"
+            stroke="currentColor"
+            stroke-width="1.35"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+    </div>
+
+    <template v-if="node.type === 'directory' && expanded">
+      <file-tree-node
+        v-for="child in node.children"
+        :key="child.path"
+        :node="child"
+        :depth="depth + 1"
+        :selected-path="selectedPath"
+        :sheet-drag-enabled="sheetDragEnabled"
+        :used-screen-paths="usedScreenPaths"
+        :force-expanded="childForceExpanded(child)"
+        @select="$emit('select', $event)"
+        @context-menu="$emit('context-menu', $event)"
+        @create-file="$emit('create-file', $event)"
+        @create-folder="$emit('create-folder', $event)"
+        @move-node="$emit('move-node', $event)"
+      />
+    </template>
+  </div>
+</template>
+
+<script>
+import { getFileIcon } from "../services/vibeProjectApi";
+import {
+  getCreatableDirectoryKind,
+  getCreateActionLabel,
+} from "../services/vibeProjectCreate";
+import {
+  buildComponentDragPayload,
+  isSheetDraggableComponent,
+  setSheetDragData,
+} from "../services/vibeSheetDrag";
+import {
+  buildMovePath,
+  canManageNode,
+  isDirectoryDropTarget,
+} from "../services/vibeProjectFileOps";
+import {
+  isFileTreeMoveDrag,
+  setFileTreeDragData,
+} from "../services/vibeFileTreeDrag";
+import FileTypeIcon from "./FileTypeIcon.vue";
+
+const EXPANDED_ROOTS = ["components", "screens", "tests"];
+
+export default {
+  name: "FileTreeNode",
+  components: { FileTypeIcon },
+  props: {
+    node: { type: Object, required: true },
+    depth: { type: Number, default: 0 },
+    selectedPath: { type: String, default: "" },
+    sheetDragEnabled: { type: Boolean, default: false },
+    forceExpanded: { type: Boolean, default: false },
+    usedScreenPaths: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      expanded: this.forceExpanded || this.depth < 2,
+      dropActive: false,
+      dropDepth: 0,
+    };
+  },
+  computed: {
+    canManage() {
+      return canManageNode(this.node);
+    },
+    fileIconType() {
+      return getFileIcon(this.node.path, this.node.type);
+    },
+    isSheetDraggable() {
+      return this.sheetDragEnabled && isSheetDraggableComponent(this.node.path);
+    },
+    creatableKind() {
+      if (this.node.type !== "directory") return null;
+      return getCreatableDirectoryKind(this.node.path);
+    },
+    createFileLabel() {
+      return getCreateActionLabel(this.creatableKind);
+    },
+    isUsedInClassic() {
+      if (this.node.type !== "file") return false;
+      if (!this.node.path.startsWith("screens/")) return false;
+      return this.usedScreenPaths.includes(this.node.path);
+    },
+  },
+  watch: {
+    forceExpanded(expanded) {
+      if (expanded) this.expanded = true;
+    },
+    selectedPath(path) {
+      if (this.node.type === "directory" && path.startsWith(`${this.node.path}/`)) {
+        this.expanded = true;
+      }
+    },
+  },
+  methods: {
+    childForceExpanded(child) {
+      if (child.type !== "directory") return false;
+      if (EXPANDED_ROOTS.includes(child.path)) return true;
+      if (!this.selectedPath) return false;
+      return this.selectedPath.startsWith(`${child.path}/`);
+    },
+    toggle() {
+      this.expanded = !this.expanded;
+    },
+    selectFile() {
+      if (this.selectedPath === this.node.path) return;
+      this.$emit("select", this.node.path);
+    },
+    onContextMenu(event) {
+      this.$emit("context-menu", { event, node: this.node });
+    },
+    onDragStart(event) {
+      if (!this.isSheetDraggable) return;
+      setSheetDragData(event, buildComponentDragPayload(this.node.path));
+    },
+    onFileDragStart(event) {
+      if (this.isSheetDraggable && !event.shiftKey) {
+        this.onDragStart(event);
+        return;
+      }
+      if (!this.canManage) return;
+      setFileTreeDragData(event, this.node);
+    },
+    onFileMoveDragStart(event) {
+      if (!this.canManage) return;
+      setFileTreeDragData(event, this.node);
+    },
+    onFileMoveDragEnd() {
+      this.dropDepth = 0;
+      this.dropActive = false;
+    },
+    onFolderDragEnter(event) {
+      if (!isFileTreeMoveDrag(event)) return;
+      this.dropDepth += 1;
+      this.dropActive = true;
+    },
+    onFolderDragOver(event) {
+      if (!isFileTreeMoveDrag(event)) return;
+      event.dataTransfer.dropEffect = "move";
+    },
+    onFolderDragLeave() {
+      this.dropDepth = Math.max(0, this.dropDepth - 1);
+      if (this.dropDepth === 0) this.dropActive = false;
+    },
+    onFolderDrop(event) {
+      this.dropDepth = 0;
+      this.dropActive = false;
+
+      const payload = event.dataTransfer?.getData("application/vibe-file-tree");
+      if (!payload) return;
+
+      let source;
+      try {
+        source = JSON.parse(payload);
+      } catch {
+        return;
+      }
+
+      if (!source?.path || !isDirectoryDropTarget(this.node, source.path)) return;
+
+      const destination = buildMovePath(source.path, this.node.path);
+      if (!destination || destination === source.path) return;
+
+      this.$emit("move-node", { from: source.path, to: destination });
+    },
+    createFile() {
+      if (!this.creatableKind) return;
+      this.$emit("create-file", {
+        parentPath: this.node.path,
+        kind: this.creatableKind,
+      });
+    },
+    createFolder() {
+      if (!this.creatableKind) return;
+      this.$emit("create-folder", { parentPath: this.node.path });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.file-tree-node__row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 12px;
+  color: var(--vibe-text);
+  border-radius: var(--vibe-radius-sm);
+  margin: 2px 0;
+  transition: background 0.15s ease;
+}
+
+.file-tree-node__row:hover {
+  background: var(--vibe-accent-muted);
+}
+
+.file-tree-node__row--creatable:hover .file-tree-node__actions {
+  opacity: 1;
+}
+
+.file-tree-node__row--file.active {
+  background: var(--vibe-accent-muted);
+  color: var(--vibe-accent);
+  font-weight: 600;
+}
+
+.file-tree-node__row--draggable {
+  cursor: grab;
+}
+
+.file-tree-node__row--draggable:active {
+  cursor: grabbing;
+}
+
+.file-tree-node__row--drop-target {
+  background: var(--vibe-accent-muted);
+  box-shadow: inset 0 0 0 2px var(--vibe-accent);
+}
+
+.file-tree-node__actions {
+  display: flex;
+  gap: 2px;
+  margin-left: auto;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.file-tree-node__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: var(--vibe-radius-sm);
+  background: var(--vibe-panel-bg);
+  color: var(--vibe-text-muted);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+}
+
+.file-tree-node__action:hover {
+  background: var(--vibe-accent-muted);
+  color: var(--vibe-accent);
+}
+
+.file-tree-node__action--folder {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  width: auto;
+  min-width: 22px;
+  padding: 0 4px;
+}
+
+.file-tree-node__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  color: var(--vibe-text-subtle);
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+}
+
+.file-tree-node__chevron svg {
+  width: 12px;
+  height: 12px;
+}
+
+.file-tree-node__chevron.open {
+  transform: rotate(90deg);
+}
+
+.file-tree-node__chevron--spacer {
+  visibility: hidden;
+}
+
+.file-tree-node__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.file-tree-node__used-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--vibe-success);
+}
+
+.file-tree-node__used-badge svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+</style>
diff --git a/src/vibe/components/FileTreePanel.vue b/src/vibe/components/FileTreePanel.vue
new file mode 100644
index 000000000..a1ca1d1d2
--- /dev/null
+++ b/src/vibe/components/FileTreePanel.vue
@@ -0,0 +1,524 @@
+<template>
+  <div class="file-tree-panel">
+    <div class="file-tree-panel__header vibe-panel-header">
+      <div class="vibe-panel-title-row">
+        <span class="file-tree-panel__title vibe-panel-title">Project</span>
+        <span
+          v-if="loading"
+          class="vibe-inline-spinner"
+          role="status"
+          aria-label="Loading project files"
+        />
+      </div>
+      <div class="file-tree-panel__actions">
+        <button
+          class="vibe-btn ghost"
+          title="Refresh"
+          :disabled="loading"
+          @click="loadTree"
+        >
+          ↻
+        </button>
+      </div>
+    </div>
+
+    <div v-if="error && !tree.length" class="file-tree-panel__error">{{ error }}</div>
+    <div v-else class="file-tree-panel__body">
+      <div v-if="sheetDragEnabled" class="file-tree-panel__sheet-palette">
+        <span class="file-tree-panel__sheet-label">Layout</span>
+        <div
+          v-for="item in layoutItems"
+          :key="item.id"
+          class="file-tree-panel__sheet-item"
+          draggable="true"
+          @dragstart="onLayoutDragStart($event, item.payload)"
+        >
+          <file-type-icon icon-type="folder" />
+          <span>{{ item.label }}</span>
+        </div>
+      </div>
+
+      <div v-if="tree.length === 0" class="file-tree-panel__empty">
+        No files yet
+      </div>
+      <div v-else class="file-tree-panel__tree">
+        <file-tree-node
+          v-for="node in tree"
+          :key="node.path"
+          :node="node"
+          :selected-path="selectedPath"
+          :sheet-drag-enabled="sheetDragEnabled"
+          :used-screen-paths="usedScreenPaths"
+          :force-expanded="isForceExpanded(node)"
+          @select="$emit('select', $event)"
+          @context-menu="showContextMenu"
+          @create-file="createInDirectory"
+          @create-folder="createSubfolder"
+          @move-node="moveNode"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="contextMenu.visible"
+      class="file-tree-panel__context-menu"
+      :style="{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }"
+      @click.stop
+    >
+      <template v-if="contextMenu.node?.type === 'directory' && contextMenuKind">
+        <button @click="createInDirectory({ parentPath: contextMenu.node.path, kind: contextMenuKind })">
+          {{ createFileLabel }}
+        </button>
+        <button @click="createSubfolder({ parentPath: contextMenu.node.path })">
+          New folder
+        </button>
+      </template>
+      <template v-if="canManageContextNode">
+        <button @click="renameNode">Rename</button>
+        <button @click="duplicateNode">Duplicate</button>
+        <button @click="moveNodeToFolder">Move to folder...</button>
+      </template>
+      <button
+        v-if="contextMenu.node && !isProtectedNode(contextMenu.node)"
+        class="file-tree-panel__context-delete"
+        @click="deleteSelected"
+      >
+        Delete
+      </button>
+    </div>
+    <div class="file-tree-panel__help">
+      <template v-if="sheetDragEnabled">
+        Arrastrá <strong>Layout</strong> o <strong>components/*.vue</strong> a la Hoja ·
+        <strong>Shift+drag</strong> para mover archivos ·
+        Click derecho para renombrar/duplicar
+      </template>
+      <template v-else>
+        <kbd>⌘S</kbd> Save · Arrastrá archivos a carpetas · Click derecho para renombrar/duplicar
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import FileTreeNode from "./FileTreeNode.vue";
+import FileTypeIcon from "./FileTypeIcon.vue";
+import {
+  fetchTree,
+  createDirectory,
+  deletePath,
+  saveFile,
+  fetchFile,
+  movePath,
+  duplicatePath,
+} from "../services/vibeProjectApi";
+import {
+  buildNewFilePath,
+  buildNewFolderPath,
+  getCreateActionLabel,
+  getCreateContentForPath,
+  getCreatePrompt,
+  getCreatableDirectoryKind,
+  isProtectedDirectory,
+} from "../services/vibeProjectCreate";
+import {
+  buildMovePath,
+  buildRenamedPath,
+  buildUniqueDuplicatePath,
+  canManageNode,
+  flattenTreePaths,
+  getManagedRoot,
+  normalizeProjectPath,
+  updateVueComponentName,
+} from "../services/vibeProjectFileOps";
+import { SHEET_LAYOUT_ITEMS, setSheetDragData } from "../services/vibeSheetDrag";
+
+export default {
+  name: "FileTreePanel",
+  components: { FileTreeNode, FileTypeIcon },
+  props: {
+    selectedPath: { type: String, default: "" },
+    sheetDragEnabled: { type: Boolean, default: false },
+    usedScreenPaths: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      tree: [],
+      loading: false,
+      error: null,
+      contextMenu: { visible: false, x: 0, y: 0, node: null },
+      layoutItems: SHEET_LAYOUT_ITEMS,
+    };
+  },
+  computed: {
+    contextMenuKind() {
+      const node = this.contextMenu.node;
+      if (!node || node.type !== "directory") return null;
+      return getCreatableDirectoryKind(node.path);
+    },
+    createFileLabel() {
+      return getCreateActionLabel(this.contextMenuKind);
+    },
+    canManageContextNode() {
+      return canManageNode(this.contextMenu.node);
+    },
+  },
+  mounted() {
+    this.loadTree();
+    document.addEventListener("click", this.hideContextMenu);
+    window.addEventListener("focus", this.loadTree);
+  },
+  beforeDestroy() {
+    document.removeEventListener("click", this.hideContextMenu);
+    window.removeEventListener("focus", this.loadTree);
+  },
+  methods: {
+    async loadTree() {
+      this.loading = true;
+      if (!this.tree.length) {
+        this.error = null;
+      }
+      try {
+        const { tree } = await fetchTree();
+        this.tree = tree;
+        this.error = null;
+      } catch (err) {
+        if (!this.tree.length) {
+          this.error = err.message;
+        }
+      } finally {
+        this.loading = false;
+      }
+    },
+    refresh() {
+      return this.loadTree();
+    },
+    isForceExpanded(node) {
+      if (node.type !== "directory") return false;
+      if (["components", "screens", "tests"].includes(node.path)) return true;
+      if (!this.selectedPath) return false;
+      return this.selectedPath.startsWith(`${node.path}/`);
+    },
+    isProtectedNode(node) {
+      return node.type === "directory" && isProtectedDirectory(node.path);
+    },
+    async createInDirectory({ parentPath, kind }) {
+      this.hideContextMenu();
+      const name = window.prompt(getCreatePrompt(kind));
+      if (!name) return;
+
+      const filePath = buildNewFilePath(parentPath, kind, name);
+      if (!filePath) {
+        window.alert("Invalid name. Use letters and numbers.");
+        return;
+      }
+
+      try {
+        const content = getCreateContentForPath(filePath, kind);
+        await saveFile(filePath, content);
+        await this.loadTree();
+        this.$emit("select", { path: filePath, initialContent: content });
+      } catch (err) {
+        window.alert(err.message);
+      }
+    },
+    async createSubfolder({ parentPath }) {
+      this.hideContextMenu();
+      const name = window.prompt("Folder name:");
+      if (!name) return;
+
+      const folderPath = buildNewFolderPath(parentPath, name);
+      if (!folderPath) {
+        window.alert("Invalid folder name.");
+        return;
+      }
+
+      try {
+        await createDirectory(folderPath);
+        await this.loadTree();
+      } catch (err) {
+        window.alert(err.message);
+      }
+    },
+    showContextMenu({ event, node }) {
+      this.contextMenu = {
+        visible: true,
+        x: event.clientX,
+        y: event.clientY,
+        node,
+      };
+    },
+    hideContextMenu() {
+      this.contextMenu.visible = false;
+    },
+    onLayoutDragStart(event, payload) {
+      setSheetDragData(event, payload);
+    },
+    async deleteSelected() {
+      const { node } = this.contextMenu;
+      if (!node || this.isProtectedNode(node)) return;
+      if (!window.confirm(`Delete ${node.path}?`)) return;
+      try {
+        await deletePath(node.path);
+        this.hideContextMenu();
+        await this.loadTree();
+        this.emitPathChange(node.path, null, "delete");
+        if (this.selectedPath === node.path || this.selectedPath.startsWith(`${node.path}/`)) {
+          this.$emit("select", "");
+        }
+      } catch (err) {
+        window.alert(err.message);
+      }
+    },
+    async renameNode() {
+      const { node } = this.contextMenu;
+      if (!node || !canManageNode(node)) return;
+
+      const newName = window.prompt("New name:", node.name);
+      this.hideContextMenu();
+      if (!newName || newName.trim() === node.name) return;
+
+      const parent = node.path.split("/").slice(0, -1).join("/");
+      const newPath =
+        node.type === "directory"
+          ? buildNewFolderPath(parent, newName)
+          : buildRenamedPath(node.path, newName);
+
+      if (!newPath) {
+        window.alert("Invalid name.");
+        return;
+      }
+
+      await this.moveNode({ from: node.path, to: newPath, select: true });
+    },
+    async duplicateNode() {
+      const { node } = this.contextMenu;
+      if (!node || !canManageNode(node)) return;
+      this.hideContextMenu();
+
+      try {
+        const existingPaths = flattenTreePaths(this.tree);
+        const targetPath = buildUniqueDuplicatePath(node.path, existingPaths);
+        const result = await duplicatePath(node.path, targetPath);
+        await this.patchVueNameIfNeeded(result.path);
+        await this.loadTree();
+        if (node.type === "file") {
+          this.$emit("select", result.path);
+        }
+        this.emitPathChange(node.path, result.path, "duplicate");
+      } catch (err) {
+        window.alert(err.message);
+      }
+    },
+    async moveNodeToFolder() {
+      const { node } = this.contextMenu;
+      if (!node || !canManageNode(node)) return;
+
+      const root = getManagedRoot(node.path);
+      const suggestion = root || "screens";
+      const targetDir = window.prompt(
+        `Move into folder (e.g. ${suggestion}/my-folder):`,
+        node.path.split("/").slice(0, -1).join("/")
+      );
+      this.hideContextMenu();
+      if (!targetDir) return;
+
+      const destination = buildMovePath(node.path, targetDir.trim());
+      if (!destination) {
+        window.alert("Invalid destination folder.");
+        return;
+      }
+
+      await this.moveNode({ from: node.path, to: destination, select: true });
+    },
+    async moveNode({ from, to, select = false }) {
+      if (!from || !to || from === to) return;
+
+      try {
+        await movePath(from, to);
+        await this.patchVueNameIfNeeded(to);
+        await this.loadTree();
+        this.emitPathChange(from, to, "move");
+        if (select) {
+          this.$emit("select", to);
+        } else if (
+          this.selectedPath === from ||
+          this.selectedPath.startsWith(`${from}/`)
+        ) {
+          const updated =
+            this.selectedPath === from
+              ? to
+              : this.selectedPath.replace(`${from}/`, `${to}/`);
+          this.$emit("select", updated);
+        }
+      } catch (err) {
+        window.alert(err.message);
+      }
+    },
+    async patchVueNameIfNeeded(filePath) {
+      if (!/\.vue$/i.test(filePath)) return;
+
+      try {
+        const { content } = await fetchFile(filePath);
+        const patched = updateVueComponentName(content, filePath);
+        if (patched !== content) {
+          await saveFile(filePath, patched);
+        }
+      } catch {
+        // non-blocking
+      }
+    },
+    emitPathChange(from, to, action) {
+      this.$emit("path-changed", {
+        from: normalizeProjectPath(from),
+        to: to ? normalizeProjectPath(to) : null,
+        action,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.file-tree-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.file-tree-panel__header {
+  flex-shrink: 0;
+}
+
+.file-tree-panel__actions {
+  display: flex;
+  gap: 4px;
+}
+
+.file-tree-panel__body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.file-tree-panel__sheet-palette {
+  flex-shrink: 0;
+  padding: 8px 10px 10px;
+  border-bottom: 1px solid var(--vibe-border);
+}
+
+.file-tree-panel__sheet-label {
+  display: block;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--vibe-accent-soft);
+  margin-bottom: 6px;
+  padding: 0 4px;
+}
+
+.file-tree-panel__sheet-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  margin: 2px 0;
+  border-radius: var(--vibe-radius-sm);
+  font-size: 12px;
+  color: var(--vibe-text);
+  cursor: grab;
+  user-select: none;
+  transition: background 0.15s ease;
+}
+
+.file-tree-panel__sheet-item:hover {
+  background: var(--vibe-accent-muted);
+}
+
+.file-tree-panel__sheet-item:active {
+  cursor: grabbing;
+}
+
+.file-tree-panel__tree {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 10px 10px;
+}
+
+.file-tree-panel__error,
+.file-tree-panel__empty {
+  padding: 20px 16px;
+  font-size: 12px;
+  color: var(--vibe-text-muted);
+}
+
+.file-tree-panel__error {
+  color: var(--vibe-error);
+}
+
+.file-tree-panel__context-menu {
+  position: fixed;
+  z-index: 1000;
+  background: var(--vibe-panel-bg);
+  border: 1px solid var(--vibe-border);
+  border-radius: var(--vibe-radius-lg);
+  box-shadow: var(--vibe-shadow-lg);
+  padding: 6px;
+  min-width: 160px;
+}
+
+.file-tree-panel__context-menu button {
+  display: block;
+  width: 100%;
+  padding: 8px 14px;
+  border: none;
+  background: none;
+  text-align: left;
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: var(--vibe-radius-sm);
+  color: var(--vibe-text);
+}
+
+.file-tree-panel__context-menu button:hover {
+  background: var(--vibe-accent-muted);
+}
+
+.file-tree-panel__context-delete {
+  color: var(--vibe-error) !important;
+}
+
+.file-tree-panel__context-delete:hover {
+  background: var(--vibe-error-bg) !important;
+}
+
+.file-tree-panel__help {
+  padding: 12px 16px;
+  margin: 0 10px 10px;
+  border-radius: var(--vibe-radius-lg);
+  background: var(--vibe-bg-soft);
+  font-size: 10px;
+  color: var(--vibe-text-subtle);
+  line-height: 1.5;
+  flex-shrink: 0;
+}
+
+.file-tree-panel__help kbd {
+  display: inline-block;
+  padding: 2px 7px;
+  border: none;
+  border-radius: var(--vibe-radius-pill);
+  background: var(--vibe-accent-muted);
+  color: var(--vibe-accent);
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 600;
+}
+</style>
diff --git a/src/vibe/components/FileTypeIcon.vue b/src/vibe/components/FileTypeIcon.vue
new file mode 100644
index 000000000..029e42e3d
--- /dev/null
+++ b/src/vibe/components/FileTypeIcon.vue
@@ -0,0 +1,132 @@
+<template>
+  <span
+    class="file-type-icon"
+    :class="`file-type-icon--${iconType}`"
+    aria-hidden="true"
+  >
+    <!-- folder -->
+    <svg v-if="iconType === 'folder'" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M1.5 4.75C1.5 3.78 2.28 3 3.25 3h3.06l1.19 1.38H12.75c.97 0 1.75.78 1.75 1.75v5.62c0 .97-.78 1.75-1.75 1.75H3.25c-.97 0-1.75-.78-1.75-1.75V4.75Z"
+        fill="currentColor"
+      />
+    </svg>
+
+    <!-- folder open -->
+    <svg v-else-if="iconType === 'folder-open'" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M1 6.25 2.15 4.5h2.85L6.2 3h6.05c.69 0 1.25.56 1.25 1.25V5H2.5c-.55 0-1.02.36-1.17.88L1 6.25Z"
+        fill="currentColor"
+      />
+      <path
+        d="M1.35 6.75h13.3c.69 0 1.24.58 1.17 1.27l-.72 6.48c-.06.55-.54.97-1.1.97H3.3c-.56 0-1.04-.42-1.1-.97l-.85-7.75Z"
+        fill="currentColor"
+        opacity="0.82"
+      />
+    </svg>
+
+    <!-- vue -->
+    <svg v-else-if="iconType === 'vue'" viewBox="0 0 16 16" fill="none">
+      <path d="M8 1.5 1.5 13h3.75l2.75-4.75L10.75 13H14.5L8 1.5Z" fill="#42b883" />
+      <path d="M8 4.75 9.9 8.25H6.1L8 4.75Z" fill="#35495e" />
+    </svg>
+
+    <!-- javascript -->
+    <svg v-else-if="iconType === 'js'" viewBox="0 0 16 16" fill="none">
+      <rect x="2" y="2" width="12" height="12" rx="2" fill="#f7df1e" />
+      <path
+        d="M10.35 9.55c.2.35.42.6.88.6.45 0 .72-.22.72-.52 0-.36-.28-.48-.75-.7l-.27-.12c-.75-.32-1.24-.72-1.24-1.58 0-.8.6-1.4 1.52-1.4.66 0 1.14.23 1.48.83l-.78.5c-.18-.31-.36-.44-.7-.44-.32 0-.5.2-.5.44 0 .3.24.42.78.6l.27.12c.88.37 1.38.75 1.38 1.6 0 .94-.7 1.45-1.64 1.45-.93 0-1.52-.43-1.8-1.08l.75-.56Z"
+        fill="#323330"
+      />
+      <path
+        d="M6.45 9.62V6.05h1.02v3.05c0 .52.27.77.67.77.4 0 .67-.25.67-.77V6.05h1.02v3.52c0 1.07-.62 1.65-1.68 1.65-1.06 0-1.68-.58-1.68-1.65Z"
+        fill="#323330"
+      />
+    </svg>
+
+    <!-- yaml -->
+    <svg v-else-if="iconType === 'yaml'" viewBox="0 0 16 16" fill="none">
+      <rect x="3" y="1.5" width="10" height="13" rx="1.5" fill="#cb171e" />
+      <path
+        d="M5.25 4.75 6.75 7.5 5.25 10.25M10.75 4.75 9.25 7.5l1.5 2.75M7.35 10.25h1.3"
+        stroke="#fff"
+        stroke-width="1.15"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+
+    <!-- json -->
+    <svg v-else-if="iconType === 'json'" viewBox="0 0 16 16" fill="none">
+      <rect x="3" y="1.5" width="10" height="13" rx="1.5" fill="#f59e0b" />
+      <path
+        d="M6.35 5.35c-.58 0-1 .27-1.2.76-.16.37-.22.82-.22 1.34H4.4c0-.65.08-1.17.3-1.58.32-.6.86-.92 1.6-.92 1 0 1.58.55 1.58 1.42 0 .47-.16.86-.48 1.17-.2.2-.45.37-.86.58l-.37.2c-.58.3-.9.58-1.1 1-.2.37-.27.82-.27 1.32v.05h-.78v-.08c0-.62.1-1.1.37-1.48.23-.34.6-.62 1.2-.92l.37-.2c.37-.18.58-.34.72-.5.24-.26.35-.58.35-.96 0-.75-.5-1.2-1.28-1.2Z"
+        fill="#fff"
+      />
+      <path
+        d="M9.65 10.65c.58 0 1-.27 1.2-.76.16-.37.22-.82.22-1.34h.53c0 .65-.08 1.17-.3 1.58-.32.6-.86.92-1.6.92-1 0-1.58-.55-1.58-1.42 0-.47.16-.86.48-1.17.2-.2.45-.37.86-.58l.37-.2c.58-.3.9-.58 1.1-1 .2-.37.27-.82.27-1.32v-.05h.78v.08c0 .62-.1 1.1-.37 1.48-.23.34-.6.62-1.2.92l-.37.2c-.37.18-.58.34-.72.5-.24.26-.35.58-.35.96 0 .75.5 1.2 1.28 1.2Z"
+        fill="#fff"
+      />
+    </svg>
+
+    <!-- css -->
+    <svg v-else-if="iconType === 'css'" viewBox="0 0 16 16" fill="none">
+      <path d="M2 2h12l-1.05 10.45L8 15l-4.95-2.55L2 2Z" fill="#264de4" />
+      <path
+        d="M8 12.35 10.85 11.4 11.4 7.1H5.95l.18 1.45h3.72l-.2 1.75-1.85.55-.92-.27v-.92l.5.14h.92V9.65H6.55L6.15 4.85h5.45l-.35 2.85H8v1.15Z"
+        fill="#fff"
+      />
+    </svg>
+
+    <!-- generic file -->
+    <svg v-else viewBox="0 0 16 16" fill="none">
+      <path
+        d="M4.25 1.75h5.84c.2 0 .39.08.53.22l2.66 2.66c.14.14.22.33.22.53V13.25c0 .83-.67 1.5-1.5 1.5h-7c-.83 0-1.5-.67-1.5-1.5V3.25c0-.83.67-1.5 1.5-1.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.25 1.75v2.75c0 .55.45 1 1 1h2.75"
+        fill="currentColor"
+        opacity="0.45"
+      />
+    </svg>
+  </span>
+</template>
+
+<script>
+export default {
+  name: "FileTypeIcon",
+  props: {
+    iconType: {
+      type: String,
+      default: "file",
+    },
+  },
+};
+</script>
+
+<style scoped>
+.file-type-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.file-type-icon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.file-type-icon--folder,
+.file-type-icon--folder-open {
+  color: var(--vibe-accent-soft);
+}
+
+.file-type-icon--file {
+  color: #94a3b8;
+}
+</style>
diff --git a/src/vibe/components/ImportExportModal.vue b/src/vibe/components/ImportExportModal.vue
new file mode 100644
index 000000000..0bff52f8c
--- /dev/null
+++ b/src/vibe/components/ImportExportModal.vue
@@ -0,0 +1,191 @@
+<template>
+  <div v-if="visible" class="import-export-modal">
+    <div class="import-export-modal__backdrop" @click="$emit('close')" />
+    <div class="import-export-modal__dialog">
+      <div class="import-export-modal__header">
+        <h3>{{ mode === "import" ? "Import Project" : "Export Project" }}</h3>
+        <button class="vibe-btn ghost" @click="$emit('close')">✕</button>
+      </div>
+
+      <div class="import-export-modal__body">
+        <template v-if="mode === 'import'">
+          <p class="import-export-modal__hint">
+            Upload a ZIP file containing your vibe-project files (screens/, components/, index.js).
+          </p>
+          <input
+            ref="fileInput"
+            type="file"
+            accept=".zip"
+            @change="onFileSelected"
+          />
+          <p v-if="error" class="import-export-modal__error">{{ error }}</p>
+          <p v-if="success" class="import-export-modal__success">{{ success }}</p>
+        </template>
+
+        <template v-else>
+          <p class="import-export-modal__hint">
+            Export all files from vibe-project/ as a ZIP archive.
+          </p>
+          <p v-if="error" class="import-export-modal__error">{{ error }}</p>
+        </template>
+      </div>
+
+      <div class="import-export-modal__footer">
+        <button class="vibe-btn" @click="$emit('close')">Cancel</button>
+        <button
+          v-if="mode === 'export'"
+          class="vibe-btn primary"
+          :disabled="loading"
+          @click="doExport"
+        >
+          {{ loading ? "Exporting..." : "Download ZIP" }}
+        </button>
+        <button
+          v-if="mode === 'import'"
+          class="vibe-btn primary"
+          :disabled="loading || !selectedFile"
+          @click="doImport"
+        >
+          {{ loading ? "Importing..." : "Import" }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { exportProjectAsZip, importProjectFromZip } from "../services/vibeImportExport";
+
+export default {
+  name: "ImportExportModal",
+  props: {
+    visible: { type: Boolean, default: false },
+    mode: { type: String, default: "import" },
+  },
+  data() {
+    return {
+      selectedFile: null,
+      loading: false,
+      error: null,
+      success: null,
+    };
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.selectedFile = null;
+        this.error = null;
+        this.success = null;
+      }
+    },
+  },
+  methods: {
+    onFileSelected(event) {
+      this.selectedFile = event.target.files[0] || null;
+      this.error = null;
+    },
+    async doExport() {
+      this.loading = true;
+      this.error = null;
+      try {
+        await exportProjectAsZip();
+        this.$emit("close");
+      } catch (err) {
+        this.error = err.message;
+      } finally {
+        this.loading = false;
+      }
+    },
+    async doImport() {
+      if (!this.selectedFile) return;
+      this.loading = true;
+      this.error = null;
+      try {
+        const count = await importProjectFromZip(this.selectedFile);
+        this.success = `Imported ${count} files successfully.`;
+        this.$emit("imported");
+        setTimeout(() => this.$emit("close"), 800);
+      } catch (err) {
+        this.error = err.message;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.import-export-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.import-export-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(30, 27, 75, 0.35);
+  backdrop-filter: blur(6px);
+}
+
+.import-export-modal__dialog {
+  position: relative;
+  width: 440px;
+  max-width: 90vw;
+  background: var(--vibe-panel-bg);
+  border: 1px solid var(--vibe-border);
+  border-radius: var(--vibe-radius-xl);
+  box-shadow: var(--vibe-shadow-lg);
+  font-family: var(--vibe-font);
+  overflow: hidden;
+}
+
+.import-export-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 22px 12px;
+}
+
+.import-export-modal__header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--vibe-text);
+}
+
+.import-export-modal__body {
+  padding: 8px 22px 20px;
+}
+
+.import-export-modal__hint {
+  font-size: 13px;
+  color: var(--vibe-text-muted);
+  margin: 0 0 16px;
+  line-height: 1.5;
+}
+
+.import-export-modal__error {
+  color: var(--vibe-error);
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+.import-export-modal__success {
+  color: var(--vibe-success);
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+.import-export-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 12px 22px 20px;
+}
+</style>
diff --git a/src/vibe/components/PanelResizeHandle.vue b/src/vibe/components/PanelResizeHandle.vue
new file mode 100644
index 000000000..a7265020f
--- /dev/null
+++ b/src/vibe/components/PanelResizeHandle.vue
@@ -0,0 +1,95 @@
+<template>
+  <div
+    class="vibe-resize-handle"
+    :class="[
+      `vibe-resize-handle--${direction}`,
+      { 'vibe-resize-handle--active': active },
+    ]"
+    :title="title"
+    @mousedown.prevent="onMouseDown"
+  >
+    <span class="vibe-resize-handle__grip" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PanelResizeHandle",
+  props: {
+    direction: {
+      type: String,
+      default: "horizontal",
+      validator: (v) => ["horizontal", "vertical"].includes(v),
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    title() {
+      return this.direction === "horizontal"
+        ? "Drag to resize width"
+        : "Drag to resize height";
+    },
+  },
+  methods: {
+    onMouseDown(event) {
+      this.$emit("resize-start", {
+        direction: this.direction,
+        clientX: event.clientX,
+        clientY: event.clientY,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-resize-handle {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 2;
+  touch-action: none;
+}
+
+.vibe-resize-handle--horizontal {
+  width: 10px;
+  margin: 0 -3px;
+  cursor: col-resize;
+}
+
+.vibe-resize-handle--vertical {
+  height: 10px;
+  margin: -3px 0;
+  cursor: row-resize;
+}
+
+.vibe-resize-handle__grip {
+  display: block;
+  border-radius: var(--vibe-radius-pill);
+  background: var(--vibe-border-strong);
+  opacity: 0.45;
+  transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
+}
+
+.vibe-resize-handle--horizontal .vibe-resize-handle__grip {
+  width: 4px;
+  height: 36px;
+}
+
+.vibe-resize-handle--vertical .vibe-resize-handle__grip {
+  width: 36px;
+  height: 4px;
+}
+
+.vibe-resize-handle:hover .vibe-resize-handle__grip,
+.vibe-resize-handle--active .vibe-resize-handle__grip {
+  opacity: 1;
+  background: var(--vibe-accent);
+  box-shadow: 0 0 0 3px var(--vibe-accent-muted);
+}
+</style>
diff --git a/src/vibe/components/PreviewPanel.vue b/src/vibe/components/PreviewPanel.vue
new file mode 100644
index 000000000..55d039d48
--- /dev/null
+++ b/src/vibe/components/PreviewPanel.vue
@@ -0,0 +1,280 @@
+<template>
+  <div class="preview-panel">
+    <div class="preview-panel__header vibe-panel-header">
+      <div class="vibe-panel-title-row">
+        <span class="preview-panel__title vibe-panel-title">Preview</span>
+        <span
+          v-if="runState === 'compiling'"
+          class="vibe-inline-spinner"
+          role="status"
+          aria-label="Compiling preview"
+        />
+      </div>
+      <div class="preview-panel__controls">
+        <button
+          class="vibe-btn ghost preview-panel__device-btn"
+          :class="{ active: device === 'desktop' }"
+          title="Desktop"
+          aria-label="Desktop preview"
+          @click="device = 'desktop'"
+        >
+          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <rect
+              x="1.75"
+              y="2.5"
+              width="12.5"
+              height="8.5"
+              rx="1.25"
+              stroke="currentColor"
+              stroke-width="1.25"
+            />
+            <path
+              d="M6 13.5h4"
+              stroke="currentColor"
+              stroke-width="1.25"
+              stroke-linecap="round"
+            />
+            <path
+              d="M8 11v2.5"
+              stroke="currentColor"
+              stroke-width="1.25"
+              stroke-linecap="round"
+            />
+          </svg>
+        </button>
+        <button
+          class="vibe-btn ghost preview-panel__device-btn"
+          :class="{ active: device === 'mobile' }"
+          title="Mobile"
+          aria-label="Mobile preview"
+          @click="device = 'mobile'"
+        >
+          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <rect
+              x="4.75"
+              y="1.75"
+              width="6.5"
+              height="12.5"
+              rx="1.25"
+              stroke="currentColor"
+              stroke-width="1.25"
+            />
+            <circle cx="8" cy="12.25" r="0.75" fill="currentColor" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <div class="preview-panel__body">
+      <div v-if="showIdleState" class="vibe-empty-state">
+        <div class="vibe-empty-state__title">No preview yet</div>
+        <div class="vibe-empty-state__hint">
+          Select a <strong>.vue</strong> file or click <strong>Run</strong> to preview.
+        </div>
+      </div>
+
+      <div v-else-if="showErrorOnly" class="preview-panel__error">
+        <div class="preview-panel__error-title">Compilation error</div>
+        <pre class="preview-panel__error-message">{{ error }}</pre>
+      </div>
+
+      <div
+        v-else
+        class="preview-panel__frame"
+        :class="[
+          `preview-panel__frame--${device}`,
+          { 'preview-panel__frame--compiling': runState === 'compiling' },
+        ]"
+      >
+        <div ref="previewMount" class="preview-panel__mount" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import { injectPreviewStyles } from "../services/vibeSfcRuntime";
+
+export default {
+  name: "PreviewPanel",
+  props: {
+    component: { type: [Object, Function], default: null },
+    error: { type: String, default: null },
+    runState: { type: String, default: "idle" },
+    previewKey: { type: Number, default: 0 },
+  },
+  data() {
+    return {
+      device: "desktop",
+      previewInstance: null,
+      removeStyles: null,
+    };
+  },
+  computed: {
+    showIdleState() {
+      return this.runState === "idle" && !this.component;
+    },
+    showErrorOnly() {
+      return !!this.error && !this.component;
+    },
+  },
+  watch: {
+    component() {
+      this.scheduleMount();
+    },
+    previewKey() {
+      this.scheduleMount();
+    },
+    runState(val) {
+      if (val === "success") {
+        this.scheduleMount();
+      }
+    },
+    error(val) {
+      if (val) this.destroyPreview();
+    },
+  },
+  beforeDestroy() {
+    this.destroyPreview();
+  },
+  methods: {
+    scheduleMount() {
+      this.$nextTick(() => this.mountPreview());
+    },
+    mountPreview() {
+      this.destroyPreview();
+      if (!this.component || this.error) return;
+
+      const mountEl = this.$refs.previewMount;
+      if (!mountEl) return;
+
+      const Component = this.component;
+      const scopeId = `preview-${this.previewKey}-${Date.now()}`;
+      this.removeStyles = injectPreviewStyles(Component, scopeId);
+
+      this.previewInstance = new Vue({
+        render(h) {
+          return h(Component);
+        },
+      });
+      this.previewInstance.$mount();
+      mountEl.appendChild(this.previewInstance.$el);
+    },
+    destroyPreview() {
+      if (this.removeStyles) {
+        this.removeStyles();
+        this.removeStyles = null;
+      }
+      if (this.previewInstance) {
+        this.previewInstance.$destroy();
+        if (this.previewInstance.$el?.parentNode) {
+          this.previewInstance.$el.parentNode.removeChild(this.previewInstance.$el);
+        }
+        this.previewInstance = null;
+      }
+    },
+    getPreviewRoot() {
+      return this.previewInstance?.$el || null;
+    },
+    getPreviewVm() {
+      return this.previewInstance?.$children?.[0] || null;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.preview-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.preview-panel__header {
+  flex-shrink: 0;
+}
+
+.preview-panel__title {
+  /* uses vibe-panel-title */
+}
+
+.preview-panel__controls {
+  display: flex;
+  gap: 4px;
+}
+
+.preview-panel__device-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+}
+
+.preview-panel__device-btn svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.preview-panel__body {
+  flex: 1;
+  overflow: auto;
+  background: var(--vibe-bg-soft);
+  margin: 0 12px 12px;
+  border-radius: var(--vibe-radius-lg);
+}
+
+.preview-panel__error {
+  padding: 16px;
+}
+
+.preview-panel__error-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--vibe-error);
+  margin-bottom: 8px;
+}
+
+.preview-panel__error-message {
+  font-size: 11px;
+  font-family: Menlo, Monaco, monospace;
+  color: var(--vibe-text);
+  background: var(--vibe-error-bg);
+  border: none;
+  border-radius: var(--vibe-radius);
+  padding: 14px;
+  overflow: auto;
+  white-space: pre-wrap;
+  margin: 0;
+}
+
+.preview-panel__frame {
+  padding: 16px;
+  min-height: 100%;
+}
+
+.preview-panel__frame--mobile .preview-panel__mount {
+  max-width: 375px;
+  margin: 0 auto;
+  border: none;
+  border-radius: var(--vibe-radius-xl);
+  overflow: hidden;
+  background: #fff;
+  box-shadow: var(--vibe-shadow-sm);
+}
+
+.preview-panel__frame--compiling .preview-panel__mount {
+  opacity: 0.72;
+  pointer-events: none;
+}
+
+.preview-panel__mount {
+  background: #fff;
+  min-height: 200px;
+  border-radius: var(--vibe-radius-lg);
+}
+</style>
diff --git a/src/vibe/components/ScreenCanvasNode.vue b/src/vibe/components/ScreenCanvasNode.vue
new file mode 100644
index 000000000..29213eb52
--- /dev/null
+++ b/src/vibe/components/ScreenCanvasNode.vue
@@ -0,0 +1,364 @@
+<template>
+  <div
+    class="screen-canvas-node"
+    :class="{
+      'screen-canvas-node--root': isRoot,
+      'screen-canvas-node--selected': selectedId === node.id,
+      'screen-canvas-node--dragover': dragOver,
+      'screen-canvas-node--dragging': draggingNodeId === node.id,
+    }"
+    @click.stop="$emit('select', node.id)"
+    @dragenter.prevent="onContainerDragEnter"
+    @dragover.prevent="onContainerDragOver"
+    @dragleave="onContainerDragLeave"
+    @drop.prevent="onContainerDrop"
+  >
+    <div
+      class="screen-canvas-node__header"
+      :class="{ 'screen-canvas-node__header--draggable': !isRoot }"
+      :draggable="!isRoot"
+      @dragstart.stop="onDragStart"
+      @dragend.stop="onDragEnd"
+    >
+      <span v-if="!isRoot" class="screen-canvas-node__grip" aria-hidden="true">⋮⋮</span>
+      <file-type-icon :icon-type="nodeIcon" />
+      <span class="screen-canvas-node__label">{{ nodeLabel }}</span>
+      <span v-if="node.type === 'component'" class="screen-canvas-node__path">
+        {{ node.componentPath }}
+      </span>
+
+      <div v-if="!isRoot" class="screen-canvas-node__actions" @click.stop @mousedown.stop>
+        <button
+          type="button"
+          class="screen-canvas-node__action"
+          title="Duplicar"
+          aria-label="Duplicar nodo"
+          @click="$emit('duplicate-node', node.id)"
+        >
+          <svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
+            <rect
+              x="4"
+              y="4"
+              width="6.5"
+              height="6.5"
+              rx="1"
+              stroke="currentColor"
+              stroke-width="1.2"
+            />
+            <path
+              d="M2.5 8V3.5A1 1 0 0 1 3.5 2.5H8"
+              stroke="currentColor"
+              stroke-width="1.2"
+              stroke-linecap="round"
+            />
+          </svg>
+        </button>
+        <button
+          type="button"
+          class="screen-canvas-node__action screen-canvas-node__action--danger"
+          title="Eliminar"
+          aria-label="Eliminar nodo"
+          @click="$emit('remove-node', node.id)"
+        >
+          <svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
+            <path
+              d="M2.5 3.5h7M4.5 3.5V2.8a.8.8 0 0 1 .8-.8h1.4a.8.8 0 0 1 .8.8v.7M5 5.8v3.2M7 5.8v3.2M3.8 3.5l.4 6.2a.8.8 0 0 0 .8.8h2a.8.8 0 0 0 .8-.8l.4-6.2"
+              stroke="currentColor"
+              stroke-width="1.1"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <div v-if="!node.children?.length" class="screen-canvas-node__empty">
+      Soltá acá para agregar o reordenar
+    </div>
+
+    <div v-else class="screen-canvas-node__children">
+      <template v-for="(child, index) in node.children">
+        <div
+          :key="`before-${child.id}`"
+          class="screen-canvas-node__insert-zone"
+          :class="{ 'screen-canvas-node__insert-zone--active': isInsertActive(node.id, index) }"
+          @dragenter.prevent.stop="setInsertTarget(node.id, index)"
+          @dragover.prevent.stop
+          @dragleave.stop="clearInsertTarget(node.id, index)"
+          @drop.prevent.stop="onInsertDrop(node.id, index, $event)"
+        />
+
+        <screen-canvas-node
+          :key="child.id"
+          :node="child"
+          :selected-id="selectedId"
+          :dragging-node-id="draggingNodeId"
+          :active-insert="activeInsert"
+          @select="$emit('select', $event)"
+          @drop-node="$emit('drop-node', $event)"
+          @drag-state="$emit('drag-state', $event)"
+          @remove-node="$emit('remove-node', $event)"
+          @duplicate-node="$emit('duplicate-node', $event)"
+        />
+      </template>
+
+      <div
+        class="screen-canvas-node__insert-zone"
+        :class="{
+          'screen-canvas-node__insert-zone--active': isInsertActive(
+            node.id,
+            node.children.length
+          ),
+        }"
+        @dragenter.prevent.stop="setInsertTarget(node.id, node.children.length)"
+        @dragover.prevent.stop
+        @dragleave.stop="clearInsertTarget(node.id, node.children.length)"
+        @drop.prevent.stop="onInsertDrop(node.id, node.children.length, $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  VIBE_SHEET_DRAG,
+  parseSheetDragPayload,
+  setSheetMoveDragData,
+} from "../services/vibeSheetDrag";
+import FileTypeIcon from "./FileTypeIcon.vue";
+
+export default {
+  name: "ScreenCanvasNode",
+  components: { FileTypeIcon },
+  props: {
+    node: { type: Object, required: true },
+    selectedId: { type: String, default: "" },
+    isRoot: { type: Boolean, default: false },
+    isComponentSheet: { type: Boolean, default: false },
+    componentName: { type: String, default: "" },
+    draggingNodeId: { type: String, default: "" },
+    activeInsert: { type: String, default: "" },
+  },
+  data() {
+    return {
+      dragOver: false,
+      dragDepth: 0,
+    };
+  },
+  computed: {
+    nodeIcon() {
+      if (this.node.type === "component") return "vue";
+      if (this.isRoot && this.isComponentSheet) return "vue";
+      return "folder";
+    },
+    nodeLabel() {
+      if (this.node.type === "component") return this.node.componentName;
+      if (this.isRoot && this.isComponentSheet) return this.componentName;
+      if (this.isRoot) return "Screen root";
+      return `<${this.node.tag}>`;
+    },
+  },
+  methods: {
+    insertKey(parentId, index) {
+      return `${parentId}:${index}`;
+    },
+    isInsertActive(parentId, index) {
+      return this.activeInsert === this.insertKey(parentId, index);
+    },
+    setInsertTarget(parentId, index) {
+      this.$emit("drag-state", { activeInsert: this.insertKey(parentId, index) });
+    },
+    clearInsertTarget(parentId, index) {
+      if (this.activeInsert === this.insertKey(parentId, index)) {
+        this.$emit("drag-state", { activeInsert: "" });
+      }
+    },
+    onDragStart(event) {
+      if (this.isRoot) return;
+      setSheetMoveDragData(event, this.node.id);
+      this.$emit("drag-state", { draggingNodeId: this.node.id, activeInsert: "" });
+    },
+    onDragEnd() {
+      this.$emit("drag-state", { draggingNodeId: "", activeInsert: "" });
+    },
+    onContainerDragEnter() {
+      this.dragDepth += 1;
+      this.dragOver = true;
+    },
+    onContainerDragOver(event) {
+      event.dataTransfer.dropEffect = this.getDropEffect(event);
+    },
+    onContainerDragLeave() {
+      this.dragDepth = Math.max(0, this.dragDepth - 1);
+      if (this.dragDepth === 0) this.dragOver = false;
+    },
+    getDropEffect(event) {
+      const payload = parseSheetDragPayload(event);
+      return payload?.kind === "move" ? "move" : "copy";
+    },
+    emitDrop({ parentId, payload, index = null }) {
+      this.$emit("drop-node", { parentId, payload, index });
+    },
+    onContainerDrop(event) {
+      this.dragDepth = 0;
+      this.dragOver = false;
+      const payload = parseSheetDragPayload(event);
+      if (!payload) return;
+      this.emitDrop({
+        parentId: this.node.id,
+        payload,
+        index: this.node.children?.length ?? 0,
+      });
+    },
+    onInsertDrop(parentId, index, event) {
+      const payload = parseSheetDragPayload(event);
+      if (!payload) return;
+      this.$emit("drag-state", { draggingNodeId: "", activeInsert: "" });
+      this.emitDrop({ parentId, payload, index });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.screen-canvas-node {
+  border: 1px dashed var(--vibe-border-strong);
+  border-radius: var(--vibe-radius-lg);
+  padding: 10px;
+  margin: 8px;
+  background: var(--vibe-panel-bg);
+  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
+  cursor: pointer;
+}
+
+.screen-canvas-node--root {
+  flex: 1;
+  margin: 12px;
+  overflow: auto;
+  min-height: 120px;
+}
+
+.screen-canvas-node--selected {
+  border-color: var(--vibe-accent);
+  box-shadow: 0 0 0 3px var(--vibe-accent-muted);
+}
+
+.screen-canvas-node--dragover {
+  background: var(--vibe-accent-muted);
+  border-color: var(--vibe-accent);
+}
+
+.screen-canvas-node--dragging {
+  opacity: 0.45;
+}
+
+.screen-canvas-node__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 12px;
+}
+
+.screen-canvas-node__actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+.screen-canvas-node:hover .screen-canvas-node__actions,
+.screen-canvas-node--selected .screen-canvas-node__actions {
+  opacity: 1;
+}
+
+.screen-canvas-node__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: var(--vibe-radius-sm);
+  background: transparent;
+  color: var(--vibe-text-muted);
+  cursor: pointer;
+  padding: 0;
+}
+
+.screen-canvas-node__action svg {
+  width: 12px;
+  height: 12px;
+}
+
+.screen-canvas-node__action:hover {
+  background: var(--vibe-accent-muted);
+  color: var(--vibe-accent);
+}
+
+.screen-canvas-node__action--danger:hover {
+  background: rgba(220, 53, 69, 0.12);
+  color: #dc3545;
+}
+
+.screen-canvas-node__header--draggable {
+  cursor: grab;
+}
+
+.screen-canvas-node__header--draggable:active {
+  cursor: grabbing;
+}
+
+.screen-canvas-node__grip {
+  color: var(--vibe-text-subtle);
+  font-size: 10px;
+  letter-spacing: -2px;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.screen-canvas-node__label {
+  font-weight: 600;
+  color: var(--vibe-accent);
+}
+
+.screen-canvas-node__path {
+  font-size: 10px;
+  color: var(--vibe-text-subtle);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.screen-canvas-node__empty {
+  padding: 16px;
+  text-align: center;
+  font-size: 11px;
+  color: var(--vibe-text-subtle);
+  border: 1px dashed var(--vibe-border);
+  border-radius: var(--vibe-radius-sm);
+}
+
+.screen-canvas-node__children {
+  padding-left: 8px;
+  border-left: 2px solid var(--vibe-border);
+}
+
+.screen-canvas-node__insert-zone {
+  height: 6px;
+  margin: 2px 0;
+  border-radius: 999px;
+  transition: height 0.12s ease, background 0.12s ease, margin 0.12s ease;
+}
+
+.screen-canvas-node__insert-zone--active {
+  height: 10px;
+  margin: 6px 0;
+  background: var(--vibe-accent);
+  box-shadow: 0 0 0 3px var(--vibe-accent-muted);
+}
+</style>
diff --git a/src/vibe/components/ScreenPropertiesPanel.vue b/src/vibe/components/ScreenPropertiesPanel.vue
new file mode 100644
index 000000000..71d124d01
--- /dev/null
+++ b/src/vibe/components/ScreenPropertiesPanel.vue
@@ -0,0 +1,384 @@
+<template>
+  <aside class="screen-properties-panel">
+    <div class="screen-properties-panel__header vibe-panel-header">
+      <span class="vibe-panel-title">Properties</span>
+      <div v-if="node" class="screen-properties-panel__tabs">
+        <button
+          class="vibe-btn ghost"
+          :class="{ active: mode === 'visual' }"
+          @click="mode = 'visual'"
+        >
+          Visual
+        </button>
+        <button
+          class="vibe-btn ghost"
+          :class="{ active: mode === 'code' }"
+          @click="mode = 'code'"
+        >
+          Code
+        </button>
+      </div>
+    </div>
+
+    <div v-if="!node" class="screen-properties-panel__empty">
+      {{
+        isComponentSheet
+          ? "Seleccioná el componente o un nodo hijo para editar sus propiedades."
+          : "Seleccioná un nodo del screen para editar sus propiedades."
+      }}
+    </div>
+
+    <div v-else class="screen-properties-panel__body">
+      <div class="screen-properties-panel__meta">
+        <div>
+          <strong>{{ nodeTitle }}</strong>
+          <span v-if="node.type === 'component'" class="screen-properties-panel__path">
+            {{ node.componentPath }}
+          </span>
+        </div>
+        <button
+          v-if="!node.isComponentRoot"
+          class="vibe-btn ghost"
+          title="Remove node"
+          @click="$emit('remove')"
+        >
+          Remove
+        </button>
+      </div>
+
+      <template v-if="node.type === 'component'">
+        <template v-if="mode === 'visual'">
+          <div v-if="schemaLoading" class="screen-properties-panel__loading">
+            Cargando props...
+          </div>
+          <div v-else-if="propFields.length === 0" class="screen-properties-panel__empty-inline">
+            No se encontraron props en este componente.
+          </div>
+          <div
+            v-for="field in propFields"
+            :key="field.name"
+            class="screen-properties-panel__field"
+          >
+            <label :for="fieldInputId(field.name)">
+              {{ formatPropLabel(field.name) }}
+              <span class="screen-properties-panel__type">{{ field.type }}</span>
+            </label>
+
+            <select
+              v-if="field.options && field.options.length"
+              :id="fieldInputId(field.name)"
+              v-model="field.value"
+              @change="emitPropsFromFields"
+            >
+              <option v-for="option in field.options" :key="option" :value="option">
+                {{ option }}
+              </option>
+            </select>
+
+            <label
+              v-else-if="field.type === 'Boolean'"
+              class="screen-properties-panel__checkbox"
+            >
+              <input
+                :id="fieldInputId(field.name)"
+                v-model="field.value"
+                type="checkbox"
+                @change="emitPropsFromFields"
+              />
+              <span>{{ field.value ? "true" : "false" }}</span>
+            </label>
+
+            <input
+              v-else-if="field.type === 'Number'"
+              :id="fieldInputId(field.name)"
+              v-model.number="field.value"
+              type="number"
+              @change="emitPropsFromFields"
+            />
+
+            <input
+              v-else
+              :id="fieldInputId(field.name)"
+              v-model="field.value"
+              type="text"
+              :placeholder="defaultPlaceholder(field)"
+              @change="emitPropsFromFields"
+            />
+          </div>
+        </template>
+        <textarea
+          v-else
+          v-model="propsJson"
+          class="screen-properties-panel__code"
+          @blur="applyPropsJson"
+        />
+      </template>
+
+      <template v-else>
+        <template v-if="mode === 'visual'">
+          <div class="screen-properties-panel__field">
+            <label>HTML tag</label>
+            <input :value="node.tag" disabled />
+          </div>
+          <div
+            v-for="(entry, index) in attrEntries"
+            :key="index"
+            class="screen-properties-panel__field"
+          >
+            <label>Attribute</label>
+            <input v-model="entry.key" @change="emitAttrs" />
+            <label>Value</label>
+            <input v-model="entry.value" @change="emitAttrs" />
+          </div>
+          <button class="vibe-btn" @click="addAttr">+ Add attribute</button>
+        </template>
+        <textarea
+          v-else
+          v-model="attrsJson"
+          class="screen-properties-panel__code"
+          @blur="applyAttrsJson"
+        />
+      </template>
+    </div>
+  </aside>
+</template>
+
+<script>
+import {
+  fetchComponentPropSchema,
+  mergePropValues,
+  fieldsToPropsObject,
+  formatPropLabel,
+} from "../services/vibeComponentProps";
+
+export default {
+  name: "ScreenPropertiesPanel",
+  props: {
+    node: { type: Object, default: null },
+    isComponentSheet: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      mode: "visual",
+      propFields: [],
+      propSchema: [],
+      schemaLoading: false,
+      attrEntries: [],
+      propsJson: "{}",
+      attrsJson: "{}",
+      fieldIdCounter: 0,
+    };
+  },
+  computed: {
+    nodeTitle() {
+      if (!this.node) return "";
+      if (this.node.type === "component") return this.node.componentName;
+      return `<${this.node.tag}>`;
+    },
+  },
+  watch: {
+    node: {
+      immediate: true,
+      handler(val) {
+        this.syncFromNode(val);
+      },
+    },
+  },
+  methods: {
+    formatPropLabel,
+    fieldInputId(name) {
+      return `prop-field-${this.fieldIdCounter}-${name}`;
+    },
+    defaultPlaceholder(field) {
+      if (field.default === undefined || field.default === "") return "";
+      return String(field.default);
+    },
+    async syncFromNode(node) {
+      if (!node) return;
+
+      if (node.type === "component") {
+        this.fieldIdCounter += 1;
+        await this.loadPropSchema(node.componentPath);
+        this.propFields = mergePropValues(this.propSchema, node.props || {});
+        this.propsJson = JSON.stringify(node.props || {}, null, 2);
+        return;
+      }
+
+      this.propFields = [];
+      this.propSchema = [];
+      this.attrEntries = Object.entries(node.attrs || {}).map(([key, value]) => ({
+        key,
+        value: String(value),
+      }));
+      this.attrsJson = JSON.stringify(node.attrs || {}, null, 2);
+    },
+    async loadPropSchema(componentPath) {
+      this.schemaLoading = true;
+      try {
+        this.propSchema = await fetchComponentPropSchema(componentPath);
+      } catch {
+        this.propSchema = [];
+      } finally {
+        this.schemaLoading = false;
+      }
+    },
+    emitPropsFromFields() {
+      const props = fieldsToPropsObject(this.propFields);
+      this.$emit("update-props", props);
+      this.propsJson = JSON.stringify(props, null, 2);
+    },
+    emitAttrs() {
+      const attrs = {};
+      this.attrEntries.forEach(({ key, value }) => {
+        if (key) attrs[key] = value;
+      });
+      this.$emit("update-attrs", attrs);
+      this.attrsJson = JSON.stringify(attrs, null, 2);
+    },
+    applyPropsJson() {
+      try {
+        const props = JSON.parse(this.propsJson);
+        this.$emit("update-props", props);
+        this.propFields = mergePropValues(this.propSchema, props);
+      } catch {
+        // keep invalid json until user fixes
+      }
+    },
+    applyAttrsJson() {
+      try {
+        const attrs = JSON.parse(this.attrsJson);
+        this.$emit("update-attrs", attrs);
+        this.attrEntries = Object.entries(attrs).map(([key, value]) => ({
+          key,
+          value: String(value),
+        }));
+      } catch {
+        // keep invalid json
+      }
+    },
+    addAttr() {
+      this.attrEntries.push({ key: "class", value: "" });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.screen-properties-panel {
+  width: 260px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--vibe-border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--vibe-bg-soft);
+}
+
+.screen-properties-panel__header {
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.screen-properties-panel__tabs {
+  display: flex;
+  gap: 4px;
+}
+
+.screen-properties-panel__empty,
+.screen-properties-panel__empty-inline,
+.screen-properties-panel__loading {
+  padding: 20px 14px;
+  font-size: 12px;
+  color: var(--vibe-text-muted);
+  line-height: 1.5;
+}
+
+.screen-properties-panel__empty-inline,
+.screen-properties-panel__loading {
+  padding: 0 0 12px;
+}
+
+.screen-properties-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 14px;
+}
+
+.screen-properties-panel__meta {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 14px;
+  font-size: 12px;
+  color: var(--vibe-text);
+}
+
+.screen-properties-panel__path {
+  display: block;
+  margin-top: 4px;
+  font-size: 10px;
+  color: var(--vibe-text-subtle);
+  word-break: break-all;
+}
+
+.screen-properties-panel__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 12px;
+}
+
+.screen-properties-panel__field label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--vibe-text-subtle);
+  text-transform: uppercase;
+}
+
+.screen-properties-panel__type {
+  font-weight: 500;
+  text-transform: none;
+  color: var(--vibe-accent-soft);
+  background: var(--vibe-accent-muted);
+  padding: 1px 6px;
+  border-radius: 999px;
+}
+
+.screen-properties-panel__field input,
+.screen-properties-panel__field select {
+  padding: 8px 10px;
+  border: 1px solid var(--vibe-border);
+  border-radius: var(--vibe-radius-sm);
+  font-size: 12px;
+  background: var(--vibe-panel-bg);
+}
+
+.screen-properties-panel__checkbox {
+  flex-direction: row !important;
+  text-transform: none !important;
+  font-size: 12px !important;
+  color: var(--vibe-text) !important;
+  gap: 8px !important;
+}
+
+.screen-properties-panel__checkbox input {
+  width: auto;
+}
+
+.screen-properties-panel__code {
+  width: 100%;
+  min-height: 160px;
+  padding: 10px;
+  border: 1px solid var(--vibe-border);
+  border-radius: var(--vibe-radius-sm);
+  font-family: Menlo, Monaco, monospace;
+  font-size: 11px;
+  resize: vertical;
+  background: var(--vibe-panel-bg);
+}
+</style>
diff --git a/src/vibe/components/ScreenSheetEditor.vue b/src/vibe/components/ScreenSheetEditor.vue
new file mode 100644
index 000000000..c6d7c77af
--- /dev/null
+++ b/src/vibe/components/ScreenSheetEditor.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="screen-sheet-editor">
+    <section class="screen-sheet-editor__canvas-wrap">
+      <div class="screen-sheet-editor__canvas-header">
+        <span class="vibe-panel-title">{{ canvasTitle }}</span>
+        <span class="screen-sheet-editor__screen-name">{{ screenName }}</span>
+      </div>
+      <screen-canvas-node
+        :node="model.root"
+        :selected-id="selectedNodeId"
+        :dragging-node-id="draggingNodeId"
+        :active-insert="activeInsert"
+        :is-root="true"
+        :is-component-sheet="isComponentSheet"
+        :component-name="screenName"
+        @select="$emit('select-node', $event)"
+        @drop-node="onDropNode"
+        @drag-state="onDragState"
+        @remove-node="$emit('remove-node', $event)"
+        @duplicate-node="$emit('duplicate-node', $event)"
+      />
+    </section>
+
+    <screen-properties-panel
+      :node="selectedNode"
+      :is-component-sheet="isComponentSheet"
+      @update-props="onUpdateProps"
+      @update-attrs="onUpdateAttrs"
+      @remove="onRemoveSelected"
+    />
+  </div>
+</template>
+
+<script>
+import ScreenCanvasNode from "./ScreenCanvasNode.vue";
+import ScreenPropertiesPanel from "./ScreenPropertiesPanel.vue";
+
+export default {
+  name: "ScreenSheetEditor",
+  components: { ScreenCanvasNode, ScreenPropertiesPanel },
+  props: {
+    model: { type: Object, required: true },
+    selectedNodeId: { type: String, default: "" },
+  },
+  data() {
+    return {
+      draggingNodeId: "",
+      activeInsert: "",
+    };
+  },
+  computed: {
+    screenName() {
+      return this.model.screenName || "Screen";
+    },
+    canvasTitle() {
+      return this.isComponentSheet ? "Component" : "Screen";
+    },
+    isComponentSheet() {
+      return !!this.model.isComponentSheet;
+    },
+    selectedNode() {
+      if (!this.selectedNodeId) return null;
+      if (this.isComponentSheet && this.selectedNodeId === this.model.root.id) {
+        return {
+          id: this.model.root.id,
+          type: "component",
+          componentPath: this.model.screenPath,
+          componentName: this.model.screenName,
+          props: { ...(this.model.componentProps || {}) },
+          isComponentRoot: true,
+        };
+      }
+      if (this.selectedNodeId === this.model.root.id) return this.model.root;
+      return this.findNode(this.model.root, this.selectedNodeId);
+    },
+  },
+  methods: {
+    onDragState({ draggingNodeId = "", activeInsert = "" } = {}) {
+      if (draggingNodeId !== undefined) {
+        this.draggingNodeId = draggingNodeId;
+      }
+      if (activeInsert !== undefined) {
+        this.activeInsert = activeInsert;
+      }
+    },
+    onDropNode(event) {
+      this.draggingNodeId = "";
+      this.activeInsert = "";
+      this.$emit("drop-node", event);
+    },
+    onUpdateProps(props) {
+      this.$emit("update-props", { nodeId: this.selectedNodeId, props });
+    },
+    onUpdateAttrs(attrs) {
+      this.$emit("update-attrs", { nodeId: this.selectedNodeId, attrs });
+    },
+    onRemoveSelected() {
+      this.$emit("remove-node", this.selectedNodeId);
+    },
+    findNode(node, id) {
+      if (node.id === id) return node;
+      for (const child of node.children || []) {
+        const found = this.findNode(child, id);
+        if (found) return found;
+      }
+      return null;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.screen-sheet-editor {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+.screen-sheet-editor__canvas-wrap {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.screen-sheet-editor__canvas-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--vibe-border);
+  flex-shrink: 0;
+}
+
+.screen-sheet-editor__screen-name {
+  font-size: 11px;
+  color: var(--vibe-text-subtle);
+}
+</style>
diff --git a/src/vibe/components/TestScenariosPanel.vue b/src/vibe/components/TestScenariosPanel.vue
new file mode 100644
index 000000000..2fe1d24c9
--- /dev/null
+++ b/src/vibe/components/TestScenariosPanel.vue
@@ -0,0 +1,298 @@
+<template>
+  <div class="test-scenarios-panel">
+    <div class="test-scenarios-panel__header" @click="$emit('toggle-collapse')">
+      <span class="test-scenarios-panel__title">
+        Test Scenarios
+        <span v-if="scenarios.length" class="test-scenarios-panel__count">
+          {{ scenarios.length }}
+        </span>
+      </span>
+      <div class="test-scenarios-panel__actions" @click.stop>
+        <button
+          class="vibe-btn"
+          :disabled="running || !hasPreview"
+          @click="runAll"
+        >
+          {{ running ? "Running..." : "Run All" }}
+        </button>
+        <button class="vibe-btn ghost" @click="$emit('toggle-collapse')">
+          {{ collapsed ? "▲" : "▼" }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="!collapsed" class="test-scenarios-panel__body">
+      <div class="test-scenarios-panel__toolbar">
+        <label class="test-scenarios-panel__file-label">
+          <span>Scenario file</span>
+          <select
+            class="test-scenarios-panel__file-select"
+            :value="scenarioFilePath"
+            @change="onSelectFile"
+          >
+            <option v-for="filePath in scenarioFiles" :key="filePath" :value="filePath">
+              {{ filePath }}
+            </option>
+          </select>
+        </label>
+        <button
+          class="vibe-btn ghost"
+          :disabled="!scenarioFilePath"
+          @click="$emit('edit-scenario-file', scenarioFilePath)"
+        >
+          Edit YAML
+        </button>
+      </div>
+
+      <div v-if="scenarios.length === 0" class="test-scenarios-panel__empty">
+        No scenarios in {{ scenarioFilePath || "tests/scenarios.yaml" }}.
+        Ask the AI assistant to create test scenarios, or edit the YAML file.
+      </div>
+
+      <div v-else class="test-scenarios-panel__list">
+        <div
+          v-for="(scenario, index) in scenarios"
+          :key="index"
+          class="test-scenario-card"
+          :class="resultClass(index)"
+        >
+          <div class="test-scenario-card__header">
+            <span class="test-scenario-card__name">{{ scenario.name }}</span>
+            <button
+              class="vibe-btn ghost"
+              :disabled="running || !hasPreview"
+              @click="runOne(index)"
+            >
+              Run
+            </button>
+          </div>
+          <p v-if="scenario.description" class="test-scenario-card__desc">
+            {{ scenario.description }}
+          </p>
+          <p v-if="results[index]?.error" class="test-scenario-card__error">
+            {{ results[index].error }}
+          </p>
+          <p v-else-if="results[index]?.passed" class="test-scenario-card__pass">
+            Passed
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { runAllScenarios, runScenario } from "../services/vibeTestRunner";
+
+export default {
+  name: "TestScenariosPanel",
+  props: {
+    scenarios: { type: Array, default: () => [] },
+    scenarioFilePath: { type: String, default: "tests/scenarios.yaml" },
+    scenarioFiles: { type: Array, default: () => [] },
+    collapsed: { type: Boolean, default: true },
+    hasPreview: { type: Boolean, default: false },
+    getPreviewRoot: { type: Function, default: null },
+    getPreviewVm: { type: Function, default: null },
+  },
+  data() {
+    return {
+      running: false,
+      results: [],
+    };
+  },
+  watch: {
+    scenarioFilePath() {
+      this.results = [];
+    },
+    scenarios() {
+      this.results = [];
+    },
+  },
+  methods: {
+    onSelectFile(event) {
+      const path = event.target.value;
+      if (path && path !== this.scenarioFilePath) {
+        this.$emit("select-scenario-file", path);
+      }
+    },
+    resultClass(index) {
+      const r = this.results[index];
+      if (!r) return "";
+      return r.passed ? "passed" : "failed";
+    },
+    async runAll() {
+      this.running = true;
+      this.results = [];
+      try {
+        const root = this.getPreviewRoot?.();
+        const vm = this.getPreviewVm?.();
+        this.results = await runAllScenarios(this.scenarios, root, vm);
+      } finally {
+        this.running = false;
+      }
+    },
+    async runOne(index) {
+      this.running = true;
+      try {
+        const root = this.getPreviewRoot?.();
+        const vm = this.getPreviewVm?.();
+        const result = await runScenario(this.scenarios[index], root, vm);
+        this.$set(this.results, index, result);
+      } finally {
+        this.running = false;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.test-scenarios-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.test-scenarios-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 18px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.test-scenarios-panel__title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--vibe-accent-soft);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.test-scenarios-panel__count {
+  background: var(--vibe-accent-gradient);
+  color: var(--vibe-accent-on);
+  padding: 2px 8px;
+  border-radius: var(--vibe-radius-pill);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.test-scenarios-panel__actions {
+  display: flex;
+  gap: 4px;
+}
+
+.test-scenarios-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 14px 14px;
+}
+
+.test-scenarios-panel__toolbar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.test-scenarios-panel__file-label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.test-scenarios-panel__file-label span {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--vibe-text-muted);
+}
+
+.test-scenarios-panel__file-select {
+  width: 100%;
+  max-width: 100%;
+  padding: 6px 8px;
+  border: none;
+  border-radius: var(--vibe-radius-md);
+  background: var(--vibe-bg-soft);
+  color: var(--vibe-text);
+  font-size: 12px;
+  box-shadow: var(--vibe-shadow-sm);
+}
+
+.test-scenarios-panel__empty {
+  font-size: 12px;
+  color: var(--vibe-text-muted);
+  padding: 8px 0;
+}
+
+.test-scenarios-panel__list {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+
+.test-scenario-card {
+  flex-shrink: 0;
+  width: 260px;
+  padding: 14px 16px;
+  border: none;
+  border-radius: var(--vibe-radius-lg);
+  background: var(--vibe-bg-soft);
+  box-shadow: var(--vibe-shadow-sm);
+}
+
+.test-scenario-card.passed {
+  background: var(--vibe-success-bg);
+}
+
+.test-scenario-card.failed {
+  background: var(--vibe-error-bg);
+}
+
+.test-scenario-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.test-scenario-card__name {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vibe-text);
+}
+
+.test-scenario-card__desc {
+  font-size: 11px;
+  color: var(--vibe-text-muted);
+  margin: 0 0 4px;
+  line-height: 1.4;
+}
+
+.test-scenario-card__error {
+  font-size: 11px;
+  color: var(--vibe-error);
+  margin: 4px 0 0;
+}
+
+.test-scenario-card__pass {
+  font-size: 11px;
+  color: var(--vibe-success);
+  margin: 4px 0 0;
+  font-weight: 500;
+}
+</style>
diff --git a/src/vibe/components/VibeAiPanel.vue b/src/vibe/components/VibeAiPanel.vue
new file mode 100644
index 000000000..ebdca3b98
--- /dev/null
+++ b/src/vibe/components/VibeAiPanel.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="vibe-ai-panel" :class="{ 'vibe-ai-panel--embedded': embedded }">
+    <div
+      v-if="!embedded"
+      class="vibe-ai-panel__header"
+      @click="$emit('toggle-collapse')"
+    >
+      <span class="vibe-ai-panel__title vibe-panel-title">
+        AI Assistant
+        <span v-if="aiConfig.provider" class="vibe-ai-panel__badge">
+          {{ providerLabel }}
+        </span>
+      </span>
+      <div class="vibe-ai-panel__actions" @click.stop>
+        <button class="vibe-btn ghost" @click="$emit('toggle-collapse')">
+          {{ collapsed ? "▲" : "▼" }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="embedded || !collapsed" class="vibe-ai-panel__body">
+      <div v-if="embedded && aiConfig.provider" class="vibe-ai-panel__embedded-meta">
+        <span class="vibe-ai-panel__badge">{{ providerLabel }}</span>
+      </div>
+
+      <div class="vibe-ai-panel__settings">
+        <span class="vibe-ai-panel__settings-label">Aplicar cambios</span>
+        <div class="vibe-ai-panel__settings-toggle">
+          <button
+            class="vibe-btn ghost"
+            :class="{ active: applyMode === AI_APPLY_ASK }"
+            @click="setApplyMode(AI_APPLY_ASK)"
+          >
+            Preguntar
+          </button>
+          <button
+            class="vibe-btn ghost"
+            :class="{ active: applyMode === AI_APPLY_AUTO }"
+            @click="setApplyMode(AI_APPLY_AUTO)"
+          >
+            Automático
+          </button>
+        </div>
+      </div>
+      <div v-if="configError" class="vibe-ai-panel__notice vibe-ai-panel__notice--error">
+        {{ configError }}
+      </div>
+      <div v-else-if="!aiConfig.configured && aiConfig.provider !== 'cursor'" class="vibe-ai-panel__notice">
+        Set <code>VIBE_AI_API_KEY</code> in .env or run
+        <code>npm run vibe:cursor-agent</code> with <code>VIBE_AI_PROVIDER=cursor</code>.
+      </div>
+
+      <div ref="messagesEl" class="vibe-ai-panel__messages">
+        <div
+          v-for="(message, index) in messages"
+          :key="index"
+          class="vibe-ai-panel__message"
+          :class="`vibe-ai-panel__message--${message.role}`"
+        >
+          <span class="vibe-ai-panel__message-role">
+            {{ message.role === "user" ? "You" : "AI" }}
+          </span>
+          <p class="vibe-ai-panel__message-text">{{ message.text }}</p>
+          <div
+            v-if="message.edits && message.edits.length"
+            class="vibe-ai-panel__edits"
+          >
+            <span class="vibe-ai-panel__edits-label">
+              {{ message.edits.length }} file change(s)
+            </span>
+            <button
+              v-if="!message.applied && applyMode === AI_APPLY_ASK"
+              class="vibe-btn primary"
+              :disabled="applyingIndex === index"
+              @click="applyEdits(message, index)"
+            >
+              {{ applyingIndex === index ? "Applying..." : "Apply changes" }}
+            </button>
+            <span v-else-if="message.applyError" class="vibe-ai-panel__apply-error">
+              {{ message.applyError }}
+            </span>
+            <span v-else-if="message.applied" class="vibe-ai-panel__applied">Applied</span>
+          </div>
+        </div>
+        <div v-if="sending" class="vibe-ai-panel__message vibe-ai-panel__message--assistant">
+          <span class="vibe-ai-panel__message-role">AI</span>
+          <p class="vibe-ai-panel__message-text">Thinking...</p>
+        </div>
+      </div>
+
+      <form class="vibe-ai-panel__composer" @submit.prevent="sendMessage">
+        <textarea
+          v-model="draft"
+          class="vibe-ai-panel__input"
+          rows="2"
+          placeholder="Describe los cambios que querés en el screen o en el código..."
+          :disabled="sending"
+          @keydown.enter.exact.prevent="sendMessage"
+        />
+        <button
+          class="vibe-btn primary"
+          type="submit"
+          :disabled="!draft.trim() || sending"
+        >
+          Send
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { fetchAiConfig, sendAiChat } from "../services/vibeAiService";
+import { fetchTree } from "../services/vibeProjectApi";
+import { flattenProjectPaths } from "../services/vibeAiPrompt";
+import {
+  AI_APPLY_ASK,
+  AI_APPLY_AUTO,
+  loadAiPreferences,
+  saveAiPreferences,
+} from "../services/vibeAiPreferences";
+
+export default {
+  name: "VibeAiPanel",
+  props: {
+    embedded: { type: Boolean, default: false },
+    collapsed: { type: Boolean, default: false },
+    activeFile: { type: String, default: "" },
+    activeFileContent: { type: String, default: "" },
+    editorMode: { type: String, default: "code" },
+    previewError: { type: String, default: null },
+    selectedScenarioFile: { type: String, default: "tests/scenarios.yaml" },
+    onApplyEdits: { type: Function, default: null },
+  },
+  data() {
+    return {
+      AI_APPLY_ASK,
+      AI_APPLY_AUTO,
+      applyMode: AI_APPLY_ASK,
+      applyingIndex: null,
+      projectFiles: [],
+      draft: "",
+      sending: false,
+      configError: null,
+      aiConfig: {
+        provider: "openai",
+        model: "",
+        configured: false,
+      },
+      messages: [
+        {
+          role: "assistant",
+          text:
+            "Contame qué querés cambiar. Puedo crear componentes, screens, escenarios de prueba en tests/*.yaml, o editar archivos existentes.",
+        },
+      ],
+    };
+  },
+  computed: {
+    providerLabel() {
+      if (this.aiConfig.provider === "cursor") return "Cursor";
+      return this.aiConfig.model || "OpenAI";
+    },
+  },
+  mounted() {
+    this.applyMode = loadAiPreferences().applyMode;
+    this.loadConfig();
+    this.loadProjectFiles();
+  },
+  methods: {
+    async loadProjectFiles() {
+      try {
+        const { tree } = await fetchTree();
+        this.projectFiles = flattenProjectPaths(tree);
+      } catch {
+        this.projectFiles = [];
+      }
+    },
+    setApplyMode(mode) {
+      this.applyMode = mode;
+      saveAiPreferences({ applyMode: mode });
+    },
+    async loadConfig() {
+      try {
+        this.aiConfig = await fetchAiConfig();
+        this.configError = null;
+      } catch (err) {
+        this.configError = err.message;
+      }
+    },
+    buildContext() {
+      return {
+        activeFile: this.activeFile,
+        activeFileContent: this.activeFileContent,
+        editorMode: this.editorMode,
+        previewError: this.previewError,
+        projectFiles: this.projectFiles,
+        selectedScenarioFile: this.selectedScenarioFile,
+      };
+    },
+    async sendMessage() {
+      const text = this.draft.trim();
+      if (!text || this.sending) return;
+
+      this.messages.push({ role: "user", text });
+      this.draft = "";
+      this.sending = true;
+      this.scrollToBottom();
+
+      try {
+        const history = this.messages
+          .filter((m) => m.role === "user" || m.role === "assistant")
+          .slice(-10)
+          .map((m) => ({ role: m.role, text: m.text }));
+
+        const result = await sendAiChat({
+          messages: history,
+          context: this.buildContext(),
+        });
+
+        const newMessage = {
+          role: "assistant",
+          text: result.message,
+          edits: result.edits || [],
+          applied: !(result.edits && result.edits.length),
+        };
+        this.messages.push(newMessage);
+
+        if (this.applyMode === AI_APPLY_AUTO && newMessage.edits.length) {
+          await this.applyEdits(newMessage, this.messages.length - 1);
+        }
+
+        await this.loadProjectFiles();
+      } catch (err) {
+        this.messages.push({
+          role: "assistant",
+          text: err.message,
+          edits: [],
+          applied: true,
+        });
+      } finally {
+        this.sending = false;
+        this.scrollToBottom();
+      }
+    },
+    async applyEdits(message, index) {
+      if (!message.edits?.length || message.applied) return;
+
+      this.applyingIndex = index;
+      try {
+        const switchToCode = this.applyMode === AI_APPLY_ASK;
+        if (this.onApplyEdits) {
+          await this.onApplyEdits(message.edits, { switchToCode });
+        } else {
+          this.$emit("apply-edits", message.edits);
+        }
+        this.$set(this.messages, index, { ...message, applied: true, applyError: "" });
+        await this.loadProjectFiles();
+      } catch (err) {
+        this.$set(this.messages, index, {
+          ...message,
+          applied: false,
+          applyError: err.message || "Failed to apply changes",
+        });
+      } finally {
+        this.applyingIndex = null;
+      }
+    },
+    scrollToBottom() {
+      this.$nextTick(() => {
+        const el = this.$refs.messagesEl;
+        if (el) el.scrollTop = el.scrollHeight;
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-ai-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.vibe-ai-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 18px;
+  flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.vibe-ai-panel__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vibe-ai-panel__badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: var(--vibe-radius-pill);
+  background: var(--vibe-accent-muted);
+  color: var(--vibe-accent);
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.vibe-ai-panel__actions {
+  display: flex;
+  gap: 4px;
+}
+
+.vibe-ai-panel__body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  padding: 0 14px 14px;
+  gap: 10px;
+}
+
+.vibe-ai-panel--embedded .vibe-ai-panel__body {
+  padding: 14px;
+}
+
+.vibe-ai-panel__embedded-meta {
+  flex-shrink: 0;
+}
+
+.vibe-ai-panel__settings {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  flex-shrink: 0;
+  padding: 2px 0 4px;
+}
+
+.vibe-ai-panel__settings-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vibe-text-subtle);
+}
+
+.vibe-ai-panel__settings-toggle {
+  display: flex;
+  gap: 4px;
+}
+
+.vibe-ai-panel__notice {
+  font-size: 11px;
+  line-height: 1.5;
+  padding: 10px 12px;
+  border-radius: var(--vibe-radius-sm);
+  background: var(--vibe-bg-soft);
+  color: var(--vibe-text-muted);
+}
+
+.vibe-ai-panel__notice--error {
+  background: var(--vibe-error-bg);
+  color: var(--vibe-error);
+}
+
+.vibe-ai-panel__notice code {
+  font-size: 10px;
+  background: var(--vibe-accent-muted);
+  padding: 1px 5px;
+  border-radius: 4px;
+}
+
+.vibe-ai-panel__messages {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 4px 2px;
+}
+
+.vibe-ai-panel__message {
+  max-width: 92%;
+  padding: 10px 12px;
+  border-radius: var(--vibe-radius-lg);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.vibe-ai-panel__message--user {
+  align-self: flex-end;
+  background: var(--vibe-accent);
+  color: var(--vibe-accent-on);
+}
+
+.vibe-ai-panel__message--assistant {
+  align-self: flex-start;
+  background: var(--vibe-bg-soft);
+  color: var(--vibe-text);
+  border: 1px solid var(--vibe-border);
+}
+
+.vibe-ai-panel__message-role {
+  display: block;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.7;
+  margin-bottom: 4px;
+}
+
+.vibe-ai-panel__message-text {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.vibe-ai-panel__edits {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--vibe-border);
+}
+
+.vibe-ai-panel__edits-label {
+  font-size: 11px;
+  color: var(--vibe-text-muted);
+}
+
+.vibe-ai-panel__applied {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vibe-success);
+}
+
+.vibe-ai-panel__apply-error {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vibe-error);
+}
+
+.vibe-ai-panel__composer {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  flex-shrink: 0;
+}
+
+.vibe-ai-panel__input {
+  flex: 1;
+  resize: none;
+  border: 1px solid var(--vibe-border);
+  border-radius: var(--vibe-radius-lg);
+  padding: 10px 12px;
+  font-family: var(--vibe-font);
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--vibe-text);
+  background: var(--vibe-panel-bg);
+  outline: none;
+}
+
+.vibe-ai-panel__input:focus {
+  border-color: var(--vibe-accent-soft);
+  box-shadow: 0 0 0 3px var(--vibe-accent-muted);
+}
+
+.vibe-ai-panel__input:disabled {
+  opacity: 0.6;
+}
+</style>
diff --git a/src/vibe/components/VibeCodeEditor.vue b/src/vibe/components/VibeCodeEditor.vue
new file mode 100644
index 000000000..a60455020
--- /dev/null
+++ b/src/vibe/components/VibeCodeEditor.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="vibe-code-editor">
+    <div v-if="showTab && filePath" class="vibe-code-editor__tab">
+      <span class="vibe-code-editor__filename">{{ fileName }}</span>
+      <span v-if="dirty" class="vibe-code-editor__dirty">●</span>
+    </div>
+    <div v-if="!filePath" class="vibe-empty-state">
+      <div class="vibe-empty-state__title">No file selected</div>
+      <div class="vibe-empty-state__hint">
+        Select a file from the project tree to edit. Press <kbd>⌘S</kbd> to save.
+      </div>
+    </div>
+    <monaco-editor
+      v-else
+      :key="filePath"
+      v-model="localContent"
+      class="vibe-code-editor__monaco"
+      :language="language"
+      :options="monacoOptions"
+      @change="onChange"
+    />
+  </div>
+</template>
+
+<script>
+import MonacoEditor from "vue-monaco";
+import { getLanguageForPath } from "../services/vibeProjectApi";
+
+export default {
+  name: "VibeCodeEditor",
+  components: { MonacoEditor },
+  props: {
+    filePath: { type: String, default: "" },
+    content: { type: String, default: "" },
+    dirty: { type: Boolean, default: false },
+    showTab: { type: Boolean, default: true },
+  },
+  data() {
+    return {
+      localContent: this.content,
+      monacoOptions: {
+        lineNumbers: "on",
+        minimap: { enabled: false },
+        automaticLayout: true,
+        fontSize: 13,
+        fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+        scrollBeyondLastLine: false,
+        renderLineHighlight: "line",
+        padding: { top: 8 },
+        tabSize: 2,
+      },
+    };
+  },
+  computed: {
+    fileName() {
+      return this.filePath ? this.filePath.split("/").pop() : "";
+    },
+    language() {
+      return getLanguageForPath(this.filePath);
+    },
+  },
+  watch: {
+    content(val) {
+      this.localContent = val;
+    },
+    filePath() {
+      this.localContent = this.content;
+    },
+  },
+  methods: {
+    onChange() {
+      this.$emit("change", this.localContent);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-code-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.vibe-code-editor__tab {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 18px;
+  flex-shrink: 0;
+}
+
+.vibe-code-editor__filename {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 14px;
+  border-radius: var(--vibe-radius-pill);
+  background: var(--vibe-accent-muted);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vibe-accent);
+}
+
+.vibe-code-editor__dirty {
+  color: var(--vibe-accent-secondary);
+  font-size: 10px;
+}
+
+.vibe-code-editor__monaco {
+  flex: 1;
+  min-height: 0;
+  margin: 0 12px 12px;
+  border-radius: var(--vibe-radius-lg);
+  overflow: hidden;
+  background: var(--vibe-bg-soft);
+}
+</style>
diff --git a/src/vibe/components/VibeProjectScreen.vue b/src/vibe/components/VibeProjectScreen.vue
new file mode 100644
index 000000000..4c4000a21
--- /dev/null
+++ b/src/vibe/components/VibeProjectScreen.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="vibe-project-screen">
+    <component :is="resolvedComponent" v-if="resolvedComponent" />
+    <div v-else-if="error" class="vibe-project-screen__error">
+      {{ error }}
+    </div>
+    <div v-else-if="loading" class="vibe-project-screen__loading">
+      Loading Vibe screen...
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  getCachedVibeScreenComponent,
+  resolveVibeScreenComponent,
+} from "../services/vibeProjectScreenLoader";
+import { injectPreviewStyles } from "../services/vibeSfcRuntime";
+
+export default {
+  name: "VibeProjectScreen",
+  props: {
+    screenPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      resolvedComponent: null,
+      error: null,
+      loading: false,
+      loadToken: 0,
+      removeStyles: null,
+    };
+  },
+  watch: {
+    screenPath: {
+      immediate: true,
+      handler: "loadScreen",
+    },
+  },
+  mounted() {
+    this.onCacheInvalidated = (event) => {
+      const path = String(event?.detail?.screenPath || "").replace(/^\.\//, "");
+      if (path && path === this.styleScopeId().replace(/^classic-/, "")) {
+        this.loadScreen();
+      }
+    };
+    window.addEventListener("vibe-screen-cache-invalidated", this.onCacheInvalidated);
+  },
+  beforeDestroy() {
+    window.removeEventListener("vibe-screen-cache-invalidated", this.onCacheInvalidated);
+    this.clearStyles();
+  },
+  methods: {
+    styleScopeId() {
+      const path = String(this.screenPath || "").replace(/^\.\//, "");
+      return `classic-${path}`;
+    },
+    clearStyles() {
+      if (this.removeStyles) {
+        this.removeStyles();
+        this.removeStyles = null;
+      }
+    },
+    applyStyles(component) {
+      this.clearStyles();
+      if (!component) return;
+      this.removeStyles = injectPreviewStyles(component, this.styleScopeId());
+    },
+    async loadScreen() {
+      const token = ++this.loadToken;
+
+      if (!this.screenPath) {
+        this.resolvedComponent = null;
+        this.error = "No screen path configured";
+        this.loading = false;
+        this.clearStyles();
+        return;
+      }
+
+      const cached = getCachedVibeScreenComponent(this.screenPath);
+      if (cached) {
+        if (token !== this.loadToken) return;
+        this.resolvedComponent = cached;
+        this.applyStyles(cached);
+        this.error = null;
+        this.loading = false;
+        return;
+      }
+
+      this.resolvedComponent = null;
+      this.error = null;
+      this.loading = true;
+
+      try {
+        const { component, error } = await resolveVibeScreenComponent(this.screenPath);
+        if (token !== this.loadToken) return;
+
+        if (error || !component) {
+          this.error = error || "Failed to load Vibe screen";
+          this.resolvedComponent = null;
+          this.clearStyles();
+          return;
+        }
+
+        this.resolvedComponent = component;
+        this.applyStyles(component);
+      } catch (err) {
+        if (token !== this.loadToken) return;
+        this.error = err.message || String(err);
+        this.resolvedComponent = null;
+        this.clearStyles();
+      } finally {
+        if (token === this.loadToken) {
+          this.loading = false;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-project-screen__error {
+  padding: 12px;
+  color: #b42318;
+  background: #fef3f2;
+  border: 1px solid #fecdca;
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.vibe-project-screen__loading {
+  padding: 12px;
+  color: #667085;
+  font-size: 13px;
+}
+</style>
diff --git a/src/vibe/components/VibeToolbar.vue b/src/vibe/components/VibeToolbar.vue
new file mode 100644
index 000000000..bbd166562
--- /dev/null
+++ b/src/vibe/components/VibeToolbar.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="vibe-toolbar">
+    <div class="vibe-toolbar__left">
+      <span class="vibe-toolbar__logo">V</span>
+      <div class="vibe-toolbar__brand">
+        <span class="vibe-toolbar__title">Vibe</span>
+        <span class="vibe-toolbar__subtitle">Screen Builder</span>
+      </div>
+    </div>
+
+    <div class="vibe-toolbar__center">
+      <button
+        class="vibe-btn primary"
+        :disabled="runState === 'compiling'"
+        @click="$emit('run')"
+      >
+        <span v-if="runState === 'compiling'">Compiling...</span>
+        <span v-else>▶ Run</span>
+      </button>
+      <button
+        class="vibe-btn"
+        :disabled="!canSave"
+        title="Save (⌘S)"
+        @click="$emit('save')"
+      >
+        Save
+      </button>
+      <button
+        class="vibe-btn"
+        :disabled="!canUseScreen"
+        title="Add this screen to Classic Builder as Vue Component Editor control"
+        @click="$emit('use-screen')"
+      >
+        Use screen
+      </button>
+      <button class="vibe-btn" @click="$emit('import')">Import</button>
+      <button class="vibe-btn" @click="$emit('export')">Export</button>
+    </div>
+
+    <div class="vibe-toolbar__right">
+      <button
+        class="vibe-btn ghost"
+        :class="{ active: showEditor }"
+        title="Toggle editor panel"
+        @click="$emit('toggle-editor')"
+      >
+        Editor
+      </button>
+      <button
+        class="vibe-btn ghost"
+        :class="{ active: showTests }"
+        title="Toggle tests panel"
+        @click="$emit('toggle-tests')"
+      >
+        Tests
+      </button>
+      <button
+        class="vibe-btn ghost"
+        :class="{ active: showPreview }"
+        title="Toggle preview panel"
+        @click="$emit('toggle-preview')"
+      >
+        Preview
+      </button>
+      <button
+        class="vibe-btn ghost"
+        :class="{ active: showSidebar }"
+        title="Toggle sidebar"
+        @click="$emit('toggle-sidebar')"
+      >
+        Files
+      </button>
+      <div class="vibe-toolbar__divider" />
+      <button class="vibe-btn" @click="$emit('switch-mode', 'classic')">
+        Classic Builder
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VibeToolbar",
+  props: {
+    runState: { type: String, default: "idle" },
+    canSave: { type: Boolean, default: false },
+    canUseScreen: { type: Boolean, default: false },
+    showPreview: { type: Boolean, default: true },
+    showSidebar: { type: Boolean, default: true },
+    showEditor: { type: Boolean, default: true },
+    showTests: { type: Boolean, default: false },
+  },
+};
+</script>
+
+<style scoped>
+.vibe-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--vibe-toolbar-height);
+  padding: 10px 18px;
+  flex-shrink: 0;
+  gap: 16px;
+}
+
+.vibe-toolbar__left,
+.vibe-toolbar__center,
+.vibe-toolbar__right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vibe-toolbar__left {
+  min-width: 180px;
+}
+
+.vibe-toolbar__center {
+  flex: 1;
+  justify-content: center;
+}
+
+.vibe-toolbar__logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--vibe-radius-pill);
+  background: var(--vibe-accent-gradient);
+  color: var(--vibe-accent-on);
+  font-size: 14px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  box-shadow: 0 6px 18px rgba(15, 38, 74, 0.14);
+}
+
+.vibe-toolbar__brand {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.vibe-toolbar__title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--vibe-text);
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+
+.vibe-toolbar__subtitle {
+  font-size: 11px;
+  color: var(--vibe-text-subtle);
+  line-height: 1.1;
+}
+
+.vibe-toolbar__divider {
+  width: 1px;
+  height: 24px;
+  background: var(--vibe-border-strong);
+  margin: 0 4px;
+}
+</style>
diff --git a/src/vibe/services/panelSizes.js b/src/vibe/services/panelSizes.js
new file mode 100644
index 000000000..006d28799
--- /dev/null
+++ b/src/vibe/services/panelSizes.js
@@ -0,0 +1,57 @@
+const STORAGE_KEY = "vibe-panel-sizes";
+
+export const PANEL_LIMITS = {
+  sidebar: { min: 180, max: 480, default: 260 },
+  preview: { min: 280, max: 900, default: 420 },
+  tests: { min: 120, max: 420, default: 220 },
+  ai: { min: 140, max: 480, default: 240 },
+};
+
+export function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function loadPanelSizes() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return getDefaultPanelSizes();
+    const parsed = JSON.parse(raw);
+    return {
+      sidebarWidth: clamp(
+        parsed.sidebarWidth ?? PANEL_LIMITS.sidebar.default,
+        PANEL_LIMITS.sidebar.min,
+        PANEL_LIMITS.sidebar.max
+      ),
+      previewWidth: clamp(
+        parsed.previewWidth ?? PANEL_LIMITS.preview.default,
+        PANEL_LIMITS.preview.min,
+        PANEL_LIMITS.preview.max
+      ),
+      testsHeight: clamp(
+        parsed.testsHeight ?? PANEL_LIMITS.tests.default,
+        PANEL_LIMITS.tests.min,
+        PANEL_LIMITS.tests.max
+      ),
+      aiHeight: clamp(
+        parsed.aiHeight ?? PANEL_LIMITS.ai.default,
+        PANEL_LIMITS.ai.min,
+        PANEL_LIMITS.ai.max
+      ),
+    };
+  } catch {
+    return getDefaultPanelSizes();
+  }
+}
+
+export function savePanelSizes(sizes) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(sizes));
+}
+
+export function getDefaultPanelSizes() {
+  return {
+    sidebarWidth: PANEL_LIMITS.sidebar.default,
+    previewWidth: PANEL_LIMITS.preview.default,
+    testsHeight: PANEL_LIMITS.tests.default,
+    aiHeight: PANEL_LIMITS.ai.default,
+  };
+}
diff --git a/src/vibe/services/vibeAiPreferences.js b/src/vibe/services/vibeAiPreferences.js
new file mode 100644
index 000000000..d53a3921a
--- /dev/null
+++ b/src/vibe/services/vibeAiPreferences.js
@@ -0,0 +1,27 @@
+const STORAGE_KEY = "vibe-ai-preferences";
+
+export const AI_APPLY_ASK = "ask";
+export const AI_APPLY_AUTO = "auto";
+
+export function loadAiPreferences() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return { applyMode: AI_APPLY_ASK };
+    const parsed = JSON.parse(raw);
+    return {
+      applyMode: parsed.applyMode === AI_APPLY_AUTO ? AI_APPLY_AUTO : AI_APPLY_ASK,
+    };
+  } catch {
+    return { applyMode: AI_APPLY_ASK };
+  }
+}
+
+export function saveAiPreferences(preferences) {
+  localStorage.setItem(
+    STORAGE_KEY,
+    JSON.stringify({
+      applyMode:
+        preferences.applyMode === AI_APPLY_AUTO ? AI_APPLY_AUTO : AI_APPLY_ASK,
+    })
+  );
+}
diff --git a/src/vibe/services/vibeAiPrompt.js b/src/vibe/services/vibeAiPrompt.js
new file mode 100644
index 000000000..f19b7b25c
--- /dev/null
+++ b/src/vibe/services/vibeAiPrompt.js
@@ -0,0 +1,154 @@
+export const AI_EDITABLE_PATH_PATTERN =
+  /^(components\/.+\.vue|screens\/.+\.vue|index\.js|tests\/.+\.ya?ml)$/i;
+
+export function normalizeAiEditPath(filePath) {
+  if (typeof filePath !== "string") return null;
+  const normalized = filePath.replace(/^\.\//, "").replace(/\\/g, "/").trim();
+  if (!AI_EDITABLE_PATH_PATTERN.test(normalized)) return null;
+  return normalized;
+}
+
+export function flattenProjectPaths(tree, list = []) {
+  (tree || []).forEach((node) => {
+    if (node.type === "file") list.push(node.path);
+    if (node.children) flattenProjectPaths(node.children, list);
+  });
+  return list;
+}
+
+export function isTestScenarioPath(filePath) {
+  if (typeof filePath !== "string") return false;
+  const normalized = filePath.replace(/^\.\//, "").replace(/\\/g, "/").trim();
+  return /^tests\/.+\.ya?ml$/i.test(normalized);
+}
+
+export function pickPrimaryEditPath(edits, activeFile = "") {
+  if (!edits?.length) return activeFile;
+
+  const screenEdit = edits.find((edit) => edit.path.startsWith("screens/"));
+  if (screenEdit) return screenEdit.path;
+
+  const scenarioEdit = edits.find((edit) => isTestScenarioPath(edit.path));
+  if (scenarioEdit) return scenarioEdit.path;
+
+  const activeEdit = edits.find((edit) => edit.path === activeFile);
+  if (activeEdit) return activeEdit.path;
+
+  const componentEdit = edits.find(
+    (edit) => edit.path.startsWith("components/") && edit.path.endsWith(".vue")
+  );
+  if (componentEdit) return componentEdit.path;
+
+  return edits[0].path;
+}
+
+export function buildSystemPrompt(context) {
+  const projectFiles = Array.isArray(context.projectFiles)
+    ? context.projectFiles
+    : [];
+  const filesBlock = projectFiles.length
+    ? projectFiles.map((filePath) => `- ${filePath}`).join("\n")
+    : "(no files listed)";
+
+  const selectedScenarioFile =
+    context.selectedScenarioFile || "tests/scenarios.yaml";
+
+  return `You are the Vibe Screen Builder AI assistant for ProcessMaker screens built as Vue 2 single-file components.
+
+Project layout:
+- screens/*.vue — screen entry components (create new screens here)
+- components/*.vue — reusable Vue components (create new components here)
+- tests/*.yaml — YAML test scenario files for the preview test runner
+- index.js — re-exports the main screen entry
+
+You CAN:
+- Create NEW files under components/, screens/, and tests/
+- Edit EXISTING screens, components, and test scenario files
+- Update index.js when the user wants a different entry screen
+- Create test scenarios when the user asks for tests, QA scenarios, or acceptance criteria
+
+Path rules (strict):
+- New component: components/PascalCaseName.vue
+- New screen: screens/PascalCaseName.vue
+- New test file: tests/kebab-case-scenarios.yaml (e.g. tests/pos-scenarios.yaml)
+- Edit default tests: tests/scenarios.yaml
+- Optional entry update: index.js
+- Do NOT use paths outside components/, screens/, tests/, or index.js
+
+Vue rules:
+- Output valid Vue 2 SFC syntax (template, script, style scoped when needed)
+- Use Options API (export default { ... })
+- Screens import project components with: import Foo from "../components/Foo.vue"
+- Use clear props on reusable components
+- Prefer simple, accessible markup
+- Use data-cy attributes on interactive elements and key regions for test targeting
+- When creating or editing, return the FULL file content for each changed file
+
+Test scenario YAML rules:
+- Top-level key: scenarios (array)
+- Each scenario: name, optional description, optional given.data, when (actions), then (assertions)
+- Actions: { action: fill|click, field|target: data-cy value, value?: string }
+- Assertions: { assert: visible, target: data-cy } or { assert: data, field: vmField, equals: value }
+- Target elements by data-cy values from the active screen/components
+- Read the screen source to discover existing data-cy attributes before writing tests
+- ALWAYS include the full YAML file in edits when creating or updating scenarios (never only describe the file in message)
+
+Example test file:
+{
+  "path": "tests/pos-scenarios.yaml",
+  "content": "scenarios:\\n  - name: Screen loads\\n    when: []\\n    then:\\n      - assert: visible\\n        target: my-screen\\n"
+}
+
+Respond with JSON only (no markdown fences):
+{
+  "message": "Brief explanation for the user",
+  "edits": [
+    { "path": "components/MyComponent.vue", "content": "full file content" },
+    { "path": "tests/my-scenarios.yaml", "content": "full yaml content" }
+  ]
+}
+
+If no file changes are needed, use an empty edits array.
+
+Existing project files:
+${filesBlock}
+
+Context:
+- Active file: ${context.activeFile || "(none)"}
+- Editor mode: ${context.editorMode || "code"}
+- Preview error: ${context.previewError || "(none)"}
+- Selected test scenario file in runner: ${selectedScenarioFile}
+
+Active file content:
+${context.activeFileContent ? `\`\`\`\n${context.activeFileContent}\n\`\`\`` : "(empty)"}`;
+}
+
+export function parseAgentResponse(rawText) {
+  const trimmed = rawText.trim();
+  try {
+    return JSON.parse(trimmed);
+  } catch {
+    const jsonMatch = trimmed.match(/\{[\s\S]*\}/);
+    if (jsonMatch) {
+      return JSON.parse(jsonMatch[0]);
+    }
+    return {
+      message: trimmed,
+      edits: [],
+    };
+  }
+}
+
+export function normalizeAgentResult(parsed) {
+  const message = typeof parsed.message === "string" ? parsed.message : "Done.";
+  const edits = Array.isArray(parsed.edits)
+    ? parsed.edits
+        .filter((e) => e && typeof e.path === "string" && typeof e.content === "string")
+        .map((e) => ({
+          path: normalizeAiEditPath(e.path),
+          content: e.content,
+        }))
+        .filter((e) => e.path)
+    : [];
+  return { message, edits };
+}
diff --git a/src/vibe/services/vibeAiService.js b/src/vibe/services/vibeAiService.js
new file mode 100644
index 000000000..2fccd24af
--- /dev/null
+++ b/src/vibe/services/vibeAiService.js
@@ -0,0 +1,28 @@
+import { normalizeAiEditPath } from "./vibeAiPrompt";
+import { vibeProjectRequest } from "./vibeProjectApi";
+
+const API_BASE = "/api/vibe-project";
+
+export function fetchAiConfig() {
+  return vibeProjectRequest(`${API_BASE}/ai/config`);
+}
+
+export function sendAiChat(payload) {
+  return vibeProjectRequest(`${API_BASE}/ai/chat`, {
+    method: "POST",
+    body: JSON.stringify(payload),
+  });
+}
+
+export async function applyAiEdits(edits, saveFileFn) {
+  const applied = [];
+  for (const edit of edits) {
+    const path = normalizeAiEditPath(edit.path);
+    if (!path) {
+      throw new Error(`Invalid AI edit path: ${edit.path}`);
+    }
+    await saveFileFn(path, edit.content);
+    applied.push(path);
+  }
+  return applied;
+}
diff --git a/src/vibe/services/vibeCompiler.js b/src/vibe/services/vibeCompiler.js
new file mode 100644
index 000000000..ca5864c55
--- /dev/null
+++ b/src/vibe/services/vibeCompiler.js
@@ -0,0 +1,46 @@
+import { compileEntryFromProject, compileVueSfcFromProject } from "./vibeSfcRuntime";
+
+function isVueFile(filePath) {
+  return typeof filePath === "string" && filePath.toLowerCase().endsWith(".vue");
+}
+
+async function compileTarget(filePath, sourceContent = null) {
+  try {
+    const component = filePath
+      ? await compileVueSfcFromProject(filePath, sourceContent)
+      : await compileEntryFromProject();
+
+    if (!component) {
+      throw new Error(
+        filePath
+          ? `${filePath} must export a default Vue component`
+          : "vibe-project/index.js must export a default Vue component"
+      );
+    }
+
+    return { component, error: null };
+  } catch (err) {
+    return {
+      component: null,
+      error: err.message || String(err),
+    };
+  }
+}
+
+export async function compileEntry() {
+  return compileTarget(null);
+}
+
+export async function compileVueFile(filePath, sourceContent = null) {
+  if (!isVueFile(filePath)) {
+    return {
+      component: null,
+      error: "Only .vue files can be previewed",
+    };
+  }
+  return compileTarget(filePath, sourceContent);
+}
+
+export function invalidatePreview() {
+  // Runtime compilation always reads fresh file content from the API.
+}
diff --git a/src/vibe/services/vibeComponentProps.js b/src/vibe/services/vibeComponentProps.js
new file mode 100644
index 000000000..15c134e2c
--- /dev/null
+++ b/src/vibe/services/vibeComponentProps.js
@@ -0,0 +1,204 @@
+import { fetchFile } from "./vibeProjectApi";
+
+const schemaCache = new Map();
+
+function extractScriptBlock(source) {
+  const match = source.match(/<script[^>]*>([\s\S]*?)<\/script>/i);
+  return match ? match[1] : "";
+}
+
+function extractPropsBlock(script) {
+  const propsIdx = script.search(/\bprops\s*:/);
+  if (propsIdx === -1) return null;
+
+  const afterProps = script.slice(propsIdx);
+  const arrayMatch = afterProps.match(/props\s*:\s*\[([\s\S]*?)\]/);
+  if (arrayMatch) {
+    return { kind: "array", content: arrayMatch[1] };
+  }
+
+  const objStart = afterProps.indexOf("{");
+  if (objStart === -1) return null;
+
+  let depth = 0;
+  for (let i = objStart; i < afterProps.length; i += 1) {
+    const ch = afterProps[i];
+    if (ch === "{") depth += 1;
+    if (ch === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return { kind: "object", content: afterProps.slice(objStart + 1, i) };
+      }
+    }
+  }
+
+  return null;
+}
+
+function splitTopLevelEntries(content) {
+  const segments = [];
+  let current = "";
+  let depth = 0;
+
+  for (let i = 0; i < content.length; i += 1) {
+    const ch = content[i];
+    if (ch === "{") depth += 1;
+    if (ch === "}") depth -= 1;
+    if (ch === "," && depth === 0) {
+      if (current.trim()) segments.push(current.trim());
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+
+  if (current.trim()) segments.push(current.trim());
+  return segments;
+}
+
+function parseDefaultValue(raw) {
+  if (raw === "true") return true;
+  if (raw === "false") return false;
+  if (/^-?\d+(?:\.\d+)?$/.test(raw)) return Number(raw);
+  if (
+    (raw.startsWith('"') && raw.endsWith('"')) ||
+    (raw.startsWith("'") && raw.endsWith("'"))
+  ) {
+    return raw.slice(1, -1);
+  }
+  return raw;
+}
+
+function parsePropObjectBody(name, body) {
+  const typeMatch = body.match(/type\s*:\s*(\w+)/);
+  const type = typeMatch ? typeMatch[1] : "String";
+
+  let defaultValue;
+  const defaultMatch = body.match(
+    /default\s*:\s*("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|-?\d+(?:\.\d+)?|true|false)/
+  );
+  if (defaultMatch) {
+    defaultValue = parseDefaultValue(defaultMatch[1]);
+  }
+
+  let options = null;
+  const validatorMatch = body.match(/validator[\s\S]*?\[([^\]]+)\]/);
+  if (validatorMatch) {
+    options = [...validatorMatch[1].matchAll(/"([^"]+)"|'([^']+)'/g)].map(
+      (match) => match[1] || match[2]
+    );
+  }
+
+  return { name, type, default: defaultValue, options };
+}
+
+function parsePropSegment(segment) {
+  const match = segment.match(/^(\w+)\s*:\s*([\s\S]+)$/);
+  if (!match) return null;
+
+  const name = match[1];
+  const value = match[2].trim();
+
+  if (value.startsWith("{")) {
+    return parsePropObjectBody(name, value.slice(1, -1));
+  }
+
+  return {
+    name,
+    type: value.replace(/[,;]\s*$/, ""),
+    default: undefined,
+    options: null,
+  };
+}
+
+export function parsePropsFromVueSource(source) {
+  const script = extractScriptBlock(source);
+  const block = extractPropsBlock(script);
+  if (!block) return [];
+
+  if (block.kind === "array") {
+    return [...block.content.matchAll(/"([^"]+)"|'([^']+)'/g)].map((match) => ({
+      name: match[1] || match[2],
+      type: "String",
+      default: "",
+      options: null,
+    }));
+  }
+
+  return splitTopLevelEntries(block.content)
+    .map(parsePropSegment)
+    .filter(Boolean);
+}
+
+export async function fetchComponentPropSchema(componentPath) {
+  if (schemaCache.has(componentPath)) {
+    return schemaCache.get(componentPath);
+  }
+
+  const { content } = await fetchFile(componentPath);
+  const schema = parsePropsFromVueSource(content);
+  schemaCache.set(componentPath, schema);
+  return schema;
+}
+
+export function invalidateComponentPropSchema(componentPath) {
+  if (componentPath) {
+    schemaCache.delete(componentPath);
+  } else {
+    schemaCache.clear();
+  }
+}
+
+export function mergePropValues(schema, currentProps = {}) {
+  const fields = schema.map((def) => ({
+    ...def,
+    value:
+      currentProps[def.name] !== undefined
+        ? currentProps[def.name]
+        : def.default !== undefined
+          ? def.default
+          : def.type === "Boolean"
+            ? false
+            : "",
+  }));
+
+  Object.entries(currentProps).forEach(([name, value]) => {
+    if (!schema.some((def) => def.name === name)) {
+      fields.push({
+        name,
+        type: typeof value === "boolean" ? "Boolean" : typeof value === "number" ? "Number" : "String",
+        default: value,
+        options: null,
+        value,
+        custom: true,
+      });
+    }
+  });
+
+  return fields;
+}
+
+export function fieldsToPropsObject(fields) {
+  const props = {};
+  fields.forEach((field) => {
+    if (!field.name) return;
+    if (field.type === "Boolean") {
+      props[field.name] = Boolean(field.value);
+      return;
+    }
+    if (field.type === "Number") {
+      const num = Number(field.value);
+      props[field.name] = Number.isNaN(num) ? field.value : num;
+      return;
+    }
+    props[field.name] = field.value ?? "";
+  });
+  return props;
+}
+
+export function formatPropLabel(name) {
+  return name
+    .replace(/([A-Z])/g, " $1")
+    .replace(/^./, (char) => char.toUpperCase())
+    .trim();
+}
diff --git a/src/vibe/services/vibeFileTreeDrag.js b/src/vibe/services/vibeFileTreeDrag.js
new file mode 100644
index 000000000..ed6c11159
--- /dev/null
+++ b/src/vibe/services/vibeFileTreeDrag.js
@@ -0,0 +1,27 @@
+export const VIBE_FILE_TREE_DRAG = "application/vibe-file-tree";
+
+export function setFileTreeDragData(event, node) {
+  event.dataTransfer.setData(
+    VIBE_FILE_TREE_DRAG,
+    JSON.stringify({
+      path: node.path,
+      type: node.type,
+    })
+  );
+  event.dataTransfer.effectAllowed = "move";
+}
+
+export function parseFileTreeDragData(event) {
+  const raw = event.dataTransfer?.getData(VIBE_FILE_TREE_DRAG);
+  if (!raw) return null;
+
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+export function isFileTreeMoveDrag(event) {
+  return !!parseFileTreeDragData(event);
+}
diff --git a/src/vibe/services/vibeImportExport.js b/src/vibe/services/vibeImportExport.js
new file mode 100644
index 000000000..d17526621
--- /dev/null
+++ b/src/vibe/services/vibeImportExport.js
@@ -0,0 +1,49 @@
+import JSZip from "jszip";
+import { exportProject, importProject } from "./vibeProjectApi";
+
+export async function exportProjectAsZip() {
+  const { files } = await exportProject();
+  const zip = new JSZip();
+
+  files.forEach(({ path, content }) => {
+    zip.file(path, content);
+  });
+
+  const blob = await zip.generateAsync({ type: "blob" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = "vibe-project.zip";
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+export async function importProjectFromZip(file) {
+  const zip = await JSZip.loadAsync(file);
+  const files = [];
+
+  const entries = Object.keys(zip.files).filter(
+    (name) => !zip.files[name].dir && !name.startsWith("__MACOSX")
+  );
+
+  await Promise.all(
+    entries.map(async (name) => {
+      const content = await zip.files[name].async("string");
+      files.push({ path: name, content });
+    })
+  );
+
+  if (files.length === 0) {
+    throw new Error("ZIP file contains no files");
+  }
+
+  const hasIndex = files.some((f) => f.path === "index.js" || f.path.endsWith("/index.js"));
+  const hasVueScreen = files.some((f) => f.path.includes("screens/") && f.path.endsWith(".vue"));
+
+  if (!hasIndex && !hasVueScreen) {
+    throw new Error("ZIP must contain index.js and at least one .vue file in screens/");
+  }
+
+  await importProject(files);
+  return files.length;
+}
diff --git a/src/vibe/services/vibeImportPaths.js b/src/vibe/services/vibeImportPaths.js
new file mode 100644
index 000000000..112b55140
--- /dev/null
+++ b/src/vibe/services/vibeImportPaths.js
@@ -0,0 +1,53 @@
+function splitPath(filePath) {
+  return String(filePath || "")
+    .replace(/^\.\//, "")
+    .split("/")
+    .filter(Boolean);
+}
+
+export function resolveComponentImportPath(ownerPath, componentPath) {
+  const ownerParts = splitPath(ownerPath);
+  const ownerDir = ownerParts.slice(0, -1);
+  const targetParts = splitPath(componentPath);
+
+  if (!ownerDir.length || !targetParts.length) {
+    return `./${targetParts[targetParts.length - 1] || "Component.vue"}`;
+  }
+
+  let common = 0;
+  const targetDir = targetParts.slice(0, -1);
+  while (
+    common < ownerDir.length &&
+    common < targetDir.length &&
+    ownerDir[common] === targetDir[common]
+  ) {
+    common += 1;
+  }
+
+  const up = ownerDir.length - common;
+  const down = targetParts.slice(common);
+  const relative = [...Array(up).fill(".."), ...down];
+
+  if (!relative.length) {
+    return `./${targetParts[targetParts.length - 1]}`;
+  }
+
+  if (relative.length === 1 && !relative[0].startsWith("..")) {
+    return `./${relative[0]}`;
+  }
+
+  return relative.join("/");
+}
+
+export function resolveImportPath(fromFile, importPath) {
+  if (!importPath.startsWith(".")) return null;
+
+  const segments = splitPath(fromFile).slice(0, -1);
+  importPath.split("/").forEach((part) => {
+    if (part === "." || part === "") return;
+    if (part === "..") segments.pop();
+    else segments.push(part);
+  });
+
+  return segments.join("/");
+}
diff --git a/src/vibe/services/vibeProjectApi.js b/src/vibe/services/vibeProjectApi.js
new file mode 100644
index 000000000..90cbb3da3
--- /dev/null
+++ b/src/vibe/services/vibeProjectApi.js
@@ -0,0 +1,218 @@
+const API_BASE = "/api/vibe-project";
+const pendingFileContent = new Map();
+
+function normalizeApiPath(path) {
+  return String(path || "").replace(/^\.\//, "");
+}
+
+export function cacheFileContent(path, content) {
+  if (!path) return;
+  pendingFileContent.set(normalizeApiPath(path), content);
+}
+
+export function getCachedFileContent(path) {
+  const normalizedPath = normalizeApiPath(path);
+  return pendingFileContent.has(normalizedPath)
+    ? pendingFileContent.get(normalizedPath)
+    : null;
+}
+
+export function invalidateFileContentCache(path = null) {
+  if (path) {
+    pendingFileContent.delete(normalizeApiPath(path));
+    return;
+  }
+  pendingFileContent.clear();
+}
+
+function getCsrfToken() {
+  if (typeof window === "undefined") return null;
+
+  const fromAxios =
+    window.ProcessMaker?.apiClient?.defaults?.headers?.common?.["X-CSRF-TOKEN"];
+  if (fromAxios) return fromAxios;
+
+  const meta = document.head?.querySelector('meta[name="csrf-token"]');
+  return meta?.content || null;
+}
+
+function buildRequestHeaders(extraHeaders = {}) {
+  const headers = {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+    ...extraHeaders,
+  };
+
+  const csrfToken = getCsrfToken();
+  if (csrfToken) {
+    headers["X-CSRF-TOKEN"] = csrfToken;
+    headers["X-Requested-With"] = "XMLHttpRequest";
+  }
+
+  return headers;
+}
+
+function parseResponseBody(text) {
+  const trimmed = text.trim();
+  if (!trimmed) return {};
+
+  if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+    return JSON.parse(trimmed);
+  }
+
+  throw new Error("NOT_JSON");
+}
+
+function buildHttpError(response, text, requestUrl = "") {
+  if (response.status === 419) {
+    return new Error("Session expired (CSRF). Refresh the page and try again.");
+  }
+  if (response.status === 401 || response.status === 403) {
+    return new Error(`Not authorized (${response.status}). Please log in again.`);
+  }
+  if (response.status === 404) {
+    if (requestUrl.includes("/ai/")) {
+      return new Error(
+        "AI endpoint not found (404). Run ~/Sites/nds.sh to sync screen-builder into ProcessMaker."
+      );
+    }
+    return new Error(
+      `Vibe project file or API not found (404)${requestUrl ? `: ${requestUrl}` : ""}. ` +
+        "If you just created a file, save again and retry. Otherwise run ~/Sites/nds.sh to sync screen-builder into ProcessMaker."
+    );
+  }
+  if (response.status === 502 || response.status === 504) {
+    return new Error(
+      "AI request timed out (502). PHP/nginx closed the connection before OpenAI responded. " +
+        "Restart Herd after adding fastcgi_read_timeout, or retry with a shorter prompt."
+    );
+  }
+
+  const snippet = text.replace(/\s+/g, " ").slice(0, 140);
+  return new Error(
+    `Server returned HTML instead of JSON (${response.status}): ${snippet}`
+  );
+}
+
+export async function vibeProjectRequest(url, options = {}) {
+  const response = await fetch(url, {
+    ...options,
+    headers: buildRequestHeaders(options.headers),
+  });
+
+  const text = await response.text();
+  let data;
+
+  try {
+    data = parseResponseBody(text);
+  } catch {
+    throw buildHttpError(response, text, url);
+  }
+
+  if (!response.ok) {
+    throw new Error(data.error || data.message || `Request failed (${response.status})`);
+  }
+
+  return data;
+}
+
+export function fetchTree() {
+  return vibeProjectRequest(`${API_BASE}/tree`);
+}
+
+export function fetchFile(path) {
+  const normalizedPath = normalizeApiPath(path);
+
+  return vibeProjectRequest(`${API_BASE}/file?path=${encodeURIComponent(normalizedPath)}`).then(
+    (data) => {
+      cacheFileContent(normalizedPath, data.content ?? "");
+      return data;
+    }
+  );
+}
+
+export function saveFile(path, content) {
+  const normalizedPath = normalizeApiPath(path);
+
+  return vibeProjectRequest(`${API_BASE}/file`, {
+    method: "PUT",
+    body: JSON.stringify({ path: normalizedPath, content }),
+  }).then((data) => {
+    cacheFileContent(normalizedPath, content);
+    return data;
+  });
+}
+
+export function createDirectory(path) {
+  return vibeProjectRequest(`${API_BASE}/mkdir`, {
+    method: "POST",
+    body: JSON.stringify({ path }),
+  });
+}
+
+export function deletePath(path) {
+  return vibeProjectRequest(`${API_BASE}/file?path=${encodeURIComponent(path)}`, {
+    method: "DELETE",
+  }).then((data) => {
+    invalidateFileContentCache(path);
+    return data;
+  });
+}
+
+export function movePath(from, to) {
+  const source = normalizeApiPath(from);
+  const destination = normalizeApiPath(to);
+
+  return vibeProjectRequest(`${API_BASE}/move`, {
+    method: "POST",
+    body: JSON.stringify({ from: source, to: destination }),
+  }).then((data) => {
+    invalidateFileContentCache(source);
+    invalidateFileContentCache(destination);
+    return data;
+  });
+}
+
+export function duplicatePath(path, to = null) {
+  const source = normalizeApiPath(path);
+
+  return vibeProjectRequest(`${API_BASE}/duplicate`, {
+    method: "POST",
+    body: JSON.stringify({ path: source, to: to ? normalizeApiPath(to) : null }),
+  }).then((data) => {
+    if (data?.path) {
+      invalidateFileContentCache(data.path);
+    }
+    return data;
+  });
+}
+
+export function exportProject() {
+  return vibeProjectRequest(`${API_BASE}/export`);
+}
+
+export function importProject(files) {
+  return vibeProjectRequest(`${API_BASE}/import`, {
+    method: "POST",
+    body: JSON.stringify({ files }),
+  });
+}
+
+export function getLanguageForPath(filePath) {
+  if (filePath.endsWith(".vue")) return "html";
+  if (filePath.endsWith(".yaml") || filePath.endsWith(".yml")) return "plaintext";
+  if (filePath.endsWith(".json")) return "json";
+  if (filePath.endsWith(".css") || filePath.endsWith(".scss")) return "css";
+  return "javascript";
+}
+
+export function getFileIcon(filePath, type) {
+  if (type === "directory") return "folder";
+  const lower = filePath.toLowerCase();
+  if (lower.endsWith(".vue")) return "vue";
+  if (lower.endsWith(".yaml") || lower.endsWith(".yml")) return "yaml";
+  if (lower.endsWith(".json")) return "json";
+  if (lower.endsWith(".css") || lower.endsWith(".scss")) return "css";
+  if (/\.(js|mjs|cjs|jsx)$/.test(lower)) return "js";
+  return "file";
+}
diff --git a/src/vibe/services/vibeProjectCreate.js b/src/vibe/services/vibeProjectCreate.js
new file mode 100644
index 000000000..316496db2
--- /dev/null
+++ b/src/vibe/services/vibeProjectCreate.js
@@ -0,0 +1,194 @@
+export const PROJECT_ROOT_FOLDERS = {
+  screens: "screen",
+  components: "component",
+  tests: "test",
+};
+
+export function getCreatableDirectoryKind(dirPath) {
+  if (!dirPath) return null;
+  const normalized = dirPath.replace(/^\.\//, "").replace(/\\/g, "/").trim();
+  if (normalized in PROJECT_ROOT_FOLDERS) {
+    return PROJECT_ROOT_FOLDERS[normalized];
+  }
+  const root = normalized.split("/")[0];
+  return PROJECT_ROOT_FOLDERS[root] || null;
+}
+
+export function isCreatableDirectory(dirPath) {
+  return !!getCreatableDirectoryKind(dirPath);
+}
+
+export function isProtectedDirectory(dirPath) {
+  return Object.keys(PROJECT_ROOT_FOLDERS).includes(dirPath);
+}
+
+export function toPascalCase(value) {
+  return String(value)
+    .replace(/[^a-zA-Z0-9]+/g, " ")
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+    .join("");
+}
+
+export function toKebabCase(value) {
+  return String(value)
+    .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .replace(/[^a-zA-Z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .toLowerCase();
+}
+
+export function toScreenClassName(pascalName) {
+  return toKebabCase(pascalName) || "screen";
+}
+
+export function buildBlankScreenContent(name) {
+  const componentName = toPascalCase(name) || "NewScreen";
+  const className = toScreenClassName(componentName);
+  const dataCy = className;
+
+  return `<template>
+  <div class="${className}" data-cy="${dataCy}">
+  </div>
+</template>
+
+<script>
+export default {
+  name: "${componentName}",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+.${className} {
+  max-width: 480px;
+  margin: 0 auto;
+  padding: 28px 24px;
+  font-family: Inter, system-ui, sans-serif;
+}
+</style>
+`;
+}
+
+export function buildBlankComponentContent(name) {
+  const componentName = toPascalCase(name) || "NewComponent";
+  const className = toScreenClassName(componentName);
+
+  return `<template>
+  <div class="${className}">
+  </div>
+</template>
+
+<script>
+export default {
+  name: "${componentName}",
+  props: {},
+};
+</script>
+
+<style scoped>
+.${className} {
+  font-family: Inter, system-ui, sans-serif;
+}
+</style>
+`;
+}
+
+export function buildBlankTestContent(name) {
+  const label = String(name || "new-scenarios").trim() || "new-scenarios";
+  const target = toKebabCase(label.replace(/\.ya?ml$/i, "").replace(/-scenarios$/i, "")) || "screen";
+
+  return `scenarios:
+  - name: "Screen loads"
+    description: "Verifies the screen renders on initial load"
+    when: []
+    then:
+      - assert: visible
+        target: ${target}
+`;
+}
+
+export function buildNewFilePath(parentPath, kind, rawName) {
+  const parent = parentPath.replace(/\/$/, "");
+  const trimmed = String(rawName || "").trim();
+  if (!trimmed) return null;
+
+  if (kind === "screen") {
+    const base = trimmed.replace(/\.vue$/i, "");
+    const pascal = toPascalCase(base);
+    if (!pascal) return null;
+    return `${parent}/${pascal}.vue`;
+  }
+
+  if (kind === "component") {
+    const base = trimmed.replace(/\.vue$/i, "");
+    const pascal = toPascalCase(base);
+    if (!pascal) return null;
+    return `${parent}/${pascal}.vue`;
+  }
+
+  if (kind === "test") {
+    let base = trimmed.replace(/\.ya?ml$/i, "");
+    base = toKebabCase(base);
+    if (!base) return null;
+    if (!base.endsWith("-scenarios")) {
+      base = `${base}-scenarios`;
+    }
+    return `${parent}/${base}.yaml`;
+  }
+
+  return null;
+}
+
+export function buildNewFolderPath(parentPath, rawName) {
+  const parent = parentPath.replace(/\/$/, "");
+  const folder = String(rawName || "")
+    .trim()
+    .replace(/\\/g, "/")
+    .split("/")
+    .pop()
+    .replace(/[^a-zA-Z0-9_-]/g, "-")
+    .replace(/^-+|-+$/g, "");
+  if (!folder) return null;
+  return `${parent}/${folder}`;
+}
+
+export function getCreateContentForPath(filePath, kind) {
+  const fileName = filePath.split("/").pop().replace(/\.(vue|ya?ml)$/i, "");
+  if (kind === "screen") return buildBlankScreenContent(fileName);
+  if (kind === "component") return buildBlankComponentContent(fileName);
+  if (kind === "test") return buildBlankTestContent(fileName);
+  return "";
+}
+
+export function ensureVueFileContent(filePath, content = "") {
+  if (content?.trim()) return content;
+
+  if (filePath.startsWith("screens/") && filePath.toLowerCase().endsWith(".vue")) {
+    return getCreateContentForPath(filePath, "screen");
+  }
+
+  if (filePath.startsWith("components/") && filePath.toLowerCase().endsWith(".vue")) {
+    return getCreateContentForPath(filePath, "component");
+  }
+
+  return content || "";
+}
+
+export function getCreateActionLabel(kind) {
+  if (kind === "screen") return "New screen";
+  if (kind === "component") return "New component";
+  if (kind === "test") return "New test file";
+  return "New file";
+}
+
+export function getCreatePrompt(kind) {
+  if (kind === "screen") return "Screen name (PascalCase, e.g. MyScreen):";
+  if (kind === "component") return "Component name (PascalCase, e.g. MyCard):";
+  if (kind === "test") return "Test file name (e.g. pos or pos-scenarios):";
+  return "Name:";
+}
diff --git a/src/vibe/services/vibeProjectFileOps.js b/src/vibe/services/vibeProjectFileOps.js
new file mode 100644
index 000000000..b0abe99ac
--- /dev/null
+++ b/src/vibe/services/vibeProjectFileOps.js
@@ -0,0 +1,150 @@
+import { toKebabCase, toPascalCase } from "./vibeProjectCreate";
+
+export const MANAGED_ROOTS = ["screens", "components", "tests"];
+
+export function normalizeProjectPath(path) {
+  return String(path || "")
+    .replace(/^\.\//, "")
+    .replace(/\\/g, "/")
+    .replace(/\/+/g, "/")
+    .replace(/\/$/, "");
+}
+
+export function getManagedRoot(path) {
+  const normalized = normalizeProjectPath(path);
+  const root = normalized.split("/")[0];
+  return MANAGED_ROOTS.includes(root) ? root : null;
+}
+
+export function isManagedFilePath(path) {
+  const normalized = normalizeProjectPath(path);
+  if (!getManagedRoot(normalized)) return false;
+  return /\.(vue|ya?ml)$/i.test(normalized);
+}
+
+export function canManageNode(node) {
+  if (!node?.path) return false;
+  if (node.type === "directory") {
+    return !MANAGED_ROOTS.includes(node.path);
+  }
+  return isManagedFilePath(node.path);
+}
+
+export function inferKindFromPath(filePath) {
+  const normalized = normalizeProjectPath(filePath);
+  if (normalized.startsWith("screens/") && normalized.endsWith(".vue")) return "screen";
+  if (normalized.startsWith("components/") && normalized.endsWith(".vue")) return "component";
+  if (normalized.startsWith("tests/") && /\.ya?ml$/i.test(normalized)) return "test";
+  return null;
+}
+
+export function buildRenamedPath(currentPath, rawName) {
+  const normalized = normalizeProjectPath(currentPath);
+  const parent = normalized.split("/").slice(0, -1).join("/");
+  const trimmed = String(rawName || "").trim();
+  if (!trimmed || !parent) return null;
+
+  const kind = inferKindFromPath(normalized);
+  if (kind === "screen" || kind === "component") {
+    const base = trimmed.replace(/\.vue$/i, "");
+    const pascal = toPascalCase(base);
+    if (!pascal) return null;
+    return `${parent}/${pascal}.vue`;
+  }
+
+  if (kind === "test") {
+    let base = trimmed.replace(/\.ya?ml$/i, "");
+    base = toKebabCase(base);
+    if (!base) return null;
+    if (!base.endsWith("-scenarios")) {
+      base = `${base}-scenarios`;
+    }
+    return `${parent}/${base}.yaml`;
+  }
+
+  const safeName = trimmed
+    .replace(/\\/g, "/")
+    .split("/")
+    .pop()
+    .replace(/[^a-zA-Z0-9._-]/g, "-")
+    .replace(/^-+|-+$/g, "");
+  if (!safeName) return null;
+  return `${parent}/${safeName}`;
+}
+
+export function buildDuplicatePath(path, suffix = "Copy") {
+  const normalized = normalizeProjectPath(path);
+  const parts = normalized.split("/");
+  const fileName = parts.pop();
+  const dot = fileName.lastIndexOf(".");
+  const base = dot === -1 ? fileName : fileName.slice(0, dot);
+  const ext = dot === -1 ? "" : fileName.slice(dot);
+  return `${parts.join("/")}/${base}${suffix}${ext}`;
+}
+
+export function buildUniqueDuplicatePath(path, existingPaths = []) {
+  const existing = new Set(existingPaths.map(normalizeProjectPath));
+  let candidate = buildDuplicatePath(path);
+  let index = 2;
+
+  while (existing.has(candidate)) {
+    candidate = buildDuplicatePath(path, `Copy${index}`);
+    index += 1;
+  }
+
+  return candidate;
+}
+
+export function buildMovePath(sourcePath, targetDir) {
+  const source = normalizeProjectPath(sourcePath);
+  const dir = normalizeProjectPath(targetDir);
+  if (!source || !dir) return null;
+
+  const fileName = source.split("/").pop();
+  if (!fileName) return null;
+  if (source === dir || source.startsWith(`${dir}/`)) return null;
+
+  return `${dir}/${fileName}`;
+}
+
+export function flattenTreePaths(tree, list = []) {
+  tree.forEach((node) => {
+    list.push(node.path);
+    if (node.children?.length) {
+      flattenTreePaths(node.children, list);
+    }
+  });
+  return list;
+}
+
+export function updateVueComponentName(content, filePath) {
+  if (!content || !/\.vue$/i.test(filePath)) return content;
+
+  const baseName = filePath.split("/").pop().replace(/\.vue$/i, "");
+  const componentName = toPascalCase(baseName);
+  if (!componentName) return content;
+
+  if (/name\s*:\s*["'][^"']+["']/.test(content)) {
+    return content.replace(/name\s*:\s*["'][^"']+["']/, `name: "${componentName}"`);
+  }
+
+  return content.replace(
+    /export\s+default\s*\{/,
+    `export default {\n  name: "${componentName}",`
+  );
+}
+
+export function isDirectoryDropTarget(node, sourcePath) {
+  if (!node || node.type !== "directory") return false;
+
+  const source = normalizeProjectPath(sourcePath);
+  const target = normalizeProjectPath(node.path);
+  const sourceRoot = getManagedRoot(source);
+  const targetRoot = MANAGED_ROOTS.includes(target) ? target : getManagedRoot(target);
+
+  if (!sourceRoot || !targetRoot || sourceRoot !== targetRoot) return false;
+  if (source === target) return false;
+  if (target.startsWith(`${source}/`)) return false;
+
+  return true;
+}
diff --git a/src/vibe/services/vibeProjectScreenLoader.js b/src/vibe/services/vibeProjectScreenLoader.js
new file mode 100644
index 000000000..5747d8f01
--- /dev/null
+++ b/src/vibe/services/vibeProjectScreenLoader.js
@@ -0,0 +1,189 @@
+import { fetchFile } from "./vibeProjectApi";
+import { compileVueFile } from "./vibeCompiler";
+
+const runtimeCache = new Map();
+const dynamicCache = new Map();
+const pathContentHashes = new Map();
+
+function normalizeScreenPath(screenPath) {
+  return String(screenPath).replace(/^\.\//, "");
+}
+
+function hashContent(content) {
+  let hash = 0;
+  for (let i = 0; i < content.length; i += 1) {
+    hash = (hash << 5) - hash + content.charCodeAt(i);
+    hash |= 0;
+  }
+  return String(hash);
+}
+
+export function hashVibeScreenContent(content) {
+  return hashContent(content ?? "");
+}
+
+export function cacheVibeScreenComponent(screenPath, sourceContent, component) {
+  if (!screenPath || !component) return;
+
+  const normalizedPath = normalizeScreenPath(screenPath);
+  const contentHash = hashContent(sourceContent ?? "");
+  const cacheKey = `${normalizedPath}\0${contentHash}`;
+
+  const previousHash = pathContentHashes.get(normalizedPath);
+  if (previousHash && previousHash !== contentHash) {
+    dynamicCache.delete(`${normalizedPath}\0${previousHash}`);
+  }
+
+  dynamicCache.set(cacheKey, component);
+  pathContentHashes.set(normalizedPath, contentHash);
+  runtimeCache.set(normalizedPath, component);
+}
+
+export function isVibeScreenCachedForContent(screenPath, sourceContent) {
+  const normalizedPath = normalizeScreenPath(screenPath);
+  const contentHash = hashContent(sourceContent ?? "");
+  return (
+    pathContentHashes.get(normalizedPath) === contentHash &&
+    dynamicCache.has(`${normalizedPath}\0${contentHash}`)
+  );
+}
+
+export function shouldUseDynamicVibeCompile() {
+  if (typeof window === "undefined") return false;
+  if (window.__vibeProjectDynamicCompile === false) return false;
+  if (window.__vibeProjectDynamicCompile === true) return true;
+
+  const path = window.location?.pathname || "";
+  return path.includes("screen-builder") || path.includes("/designer/");
+}
+
+export function getCachedVibeScreenComponent(screenPath) {
+  return runtimeCache.get(normalizeScreenPath(screenPath)) || null;
+}
+
+function removeInjectedStyles(screenPath) {
+  if (typeof document === "undefined") return;
+  const scopeId = `classic-${normalizeScreenPath(screenPath)}`;
+  document
+    .querySelectorAll(`style[data-vibe-preview="${scopeId}"]`)
+    .forEach((el) => el.remove());
+}
+
+export function invalidateVibeScreenRuntimeCache(screenPath = null) {
+  if (screenPath) {
+    const path = normalizeScreenPath(screenPath);
+    runtimeCache.delete(path);
+    removeInjectedStyles(path);
+
+    const hash = pathContentHashes.get(path);
+    if (hash) {
+      dynamicCache.delete(`${path}\0${hash}`);
+      pathContentHashes.delete(path);
+    }
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("vibe-screen-cache-invalidated", { detail: { screenPath: path } })
+      );
+    }
+    return;
+  }
+
+  runtimeCache.clear();
+  dynamicCache.clear();
+  pathContentHashes.clear();
+
+  if (typeof document !== "undefined") {
+    document
+      .querySelectorAll("style[data-vibe-preview^='classic-']")
+      .forEach((el) => el.remove());
+  }
+}
+
+async function loadFromBundle(screenPath) {
+  const normalizedPath = normalizeScreenPath(screenPath);
+  const loader = typeof window !== "undefined" ? window.__vibeProjectLoader : null;
+
+  if (!loader?.loadVueFile) {
+    return {
+      component: null,
+      error:
+        "Vibe screen bundle is not loaded. Rebuild ProcessMaker assets (npm run dev) to include vibe-project-entry.js.",
+    };
+  }
+
+  try {
+    const component = await loader.loadVueFile(normalizedPath);
+    if (!component) {
+      return {
+        component: null,
+        error: `Vibe screen not found in bundle: ${normalizedPath}`,
+      };
+    }
+    return { component, error: null };
+  } catch (err) {
+    return {
+      component: null,
+      error: err.message || String(err),
+    };
+  }
+}
+
+async function loadDynamically(screenPath) {
+  const normalizedPath = normalizeScreenPath(screenPath);
+
+  try {
+    const { content } = await fetchFile(normalizedPath);
+    const contentHash = hashContent(content);
+    const cacheKey = `${normalizedPath}\0${contentHash}`;
+
+    if (dynamicCache.has(cacheKey)) {
+      const component = dynamicCache.get(cacheKey);
+      runtimeCache.set(normalizedPath, component);
+      pathContentHashes.set(normalizedPath, contentHash);
+      return { component, error: null };
+    }
+
+    const { component, error } = await compileVueFile(normalizedPath, content);
+    if (error || !component) {
+      return { component: null, error: error || "Failed to compile Vibe screen" };
+    }
+
+    const previousHash = pathContentHashes.get(normalizedPath);
+    if (previousHash && previousHash !== contentHash) {
+      dynamicCache.delete(`${normalizedPath}\0${previousHash}`);
+    }
+
+    dynamicCache.set(cacheKey, component);
+    pathContentHashes.set(normalizedPath, contentHash);
+    runtimeCache.set(normalizedPath, component);
+    return { component, error: null };
+  } catch (err) {
+    return { component: null, error: err.message || String(err) };
+  }
+}
+
+export async function resolveVibeScreenComponent(screenPath) {
+  const normalizedPath = normalizeScreenPath(screenPath);
+  if (!normalizedPath) {
+    return { component: null, error: "No screen path configured" };
+  }
+
+  if (shouldUseDynamicVibeCompile()) {
+    const dynamicResult = await loadDynamically(normalizedPath);
+    if (dynamicResult.component) {
+      return dynamicResult;
+    }
+    // Fall back to bundle if dynamic compile fails (e.g. API unavailable).
+  }
+
+  if (runtimeCache.has(normalizedPath)) {
+    return { component: runtimeCache.get(normalizedPath), error: null };
+  }
+
+  const result = await loadFromBundle(normalizedPath);
+  if (result.component) {
+    runtimeCache.set(normalizedPath, result.component);
+  }
+  return result;
+}
diff --git a/src/vibe/services/vibeScenarioPreferences.js b/src/vibe/services/vibeScenarioPreferences.js
new file mode 100644
index 000000000..63d157474
--- /dev/null
+++ b/src/vibe/services/vibeScenarioPreferences.js
@@ -0,0 +1,43 @@
+import { flattenProjectPaths } from "./vibeAiPrompt";
+
+export const DEFAULT_SCENARIO_PATH = "tests/scenarios.yaml";
+export const SCENARIO_FILE_PATTERN = /^tests\/.+\.ya?ml$/i;
+
+export function isScenarioFilePath(filePath) {
+  if (typeof filePath !== "string") return false;
+  const normalized = filePath.replace(/^\.\//, "").replace(/\\/g, "/").trim();
+  return SCENARIO_FILE_PATTERN.test(normalized);
+}
+
+export function loadScenarioPreferences() {
+  try {
+    const raw = localStorage.getItem("vibe-scenario-preferences");
+    if (!raw) return { scenarioFilePath: DEFAULT_SCENARIO_PATH };
+    const parsed = JSON.parse(raw);
+    return {
+      scenarioFilePath: isScenarioFilePath(parsed.scenarioFilePath)
+        ? parsed.scenarioFilePath
+        : DEFAULT_SCENARIO_PATH,
+    };
+  } catch {
+    return { scenarioFilePath: DEFAULT_SCENARIO_PATH };
+  }
+}
+
+export function saveScenarioPreferences({ scenarioFilePath }) {
+  if (!isScenarioFilePath(scenarioFilePath)) return;
+  localStorage.setItem(
+    "vibe-scenario-preferences",
+    JSON.stringify({ scenarioFilePath })
+  );
+}
+
+export function listScenarioFilesFromTree(tree) {
+  const paths = flattenProjectPaths(tree).filter(isScenarioFilePath);
+  paths.sort((a, b) => a.localeCompare(b));
+  const unique = [...new Set(paths)];
+  if (!unique.includes(DEFAULT_SCENARIO_PATH)) {
+    unique.unshift(DEFAULT_SCENARIO_PATH);
+  }
+  return unique;
+}
diff --git a/src/vibe/services/vibeScreenCodegen.js b/src/vibe/services/vibeScreenCodegen.js
new file mode 100644
index 000000000..50ece5b44
--- /dev/null
+++ b/src/vibe/services/vibeScreenCodegen.js
@@ -0,0 +1,198 @@
+import { collectComponentImports } from "./vibeScreenModel";
+import {
+  assembleSfc,
+  generateVueSfcPreserved,
+} from "./vibeSfcPatch";
+import { resolveComponentImportPath } from "./vibeImportPaths";
+
+function escapeAttr(value) {
+  return String(value).replace(/"/g, "&quot;");
+}
+
+function renderProps(props) {
+  return Object.entries(props || {})
+    .map(([key, value]) => {
+      if (typeof value === "string") {
+        return `${key}="${escapeAttr(value)}"`;
+      }
+      if (typeof value === "boolean") {
+        return value ? key : `:${key}="false"`;
+      }
+      if (typeof value === "number") {
+        return `:${key}="${value}"`;
+      }
+      return `:${key}='${JSON.stringify(value)}'`;
+    })
+    .join(" ");
+}
+
+function renderNode(node, depth = 2) {
+  const indent = "  ".repeat(depth);
+
+  if (node.type === "component") {
+    const tag = node.componentName
+      .replace(/([a-z])([A-Z])/g, "$1-$2")
+      .toLowerCase();
+    const propsStr = renderProps(node.props);
+    const open = propsStr ? `<${tag} ${propsStr}` : `<${tag}`;
+
+    if (!node.children?.length) {
+      return `${indent}${open} />`;
+    }
+
+    const childLines = node.children.map((c) => renderNode(c, depth + 1)).join("\n");
+    return `${indent}${open}>\n${childLines}\n${indent}</${tag}>`;
+  }
+
+  const attrs = Object.entries(node.attrs || {})
+    .map(([key, value]) => `${key}="${escapeAttr(value)}"`)
+    .join(" ");
+  const tag = node.tag || "div";
+  const open = attrs ? `<${tag} ${attrs}` : `<${tag}`;
+
+  if (!node.children?.length) {
+    return `${indent}${open}></${tag}>`;
+  }
+
+  const childLines = node.children.map((c) => renderNode(c, depth + 1)).join("\n");
+  return `${indent}${open}>\n${childLines}\n${indent}</${tag}>`;
+}
+
+function formatPropDefault(value, type) {
+  if (type === "Boolean") {
+    return value ? "true" : "false";
+  }
+  if (type === "Number") {
+    return String(value);
+  }
+  if (typeof value === "string") {
+    return `"${value.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+  }
+  return JSON.stringify(value);
+}
+
+export function renderPropsBlock(schema, values = {}) {
+  if (!schema?.length) return "";
+
+  return schema
+    .map((def) => {
+      const value =
+        values[def.name] !== undefined ? values[def.name] : def.default;
+      const type = def.type || "String";
+      if (value !== undefined) {
+        return `    ${def.name}: { type: ${type}, default: ${formatPropDefault(value, type)} }`;
+      }
+      return `    ${def.name}: { type: ${type} }`;
+    })
+    .join(",\n");
+}
+
+function replaceObjectBlock(source, key, newBlock) {
+  const match = source.match(new RegExp(`\\b${key}\\s*:`));
+  if (!match || match.index === undefined) return null;
+
+  const keyIdx = match.index;
+  const braceStart = source.indexOf("{", keyIdx);
+  if (braceStart === -1) return null;
+
+  let depth = 0;
+  for (let i = braceStart; i < source.length; i += 1) {
+    const ch = source[i];
+    if (ch === "{") depth += 1;
+    if (ch === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return source.slice(0, keyIdx) + newBlock + source.slice(i + 1);
+      }
+    }
+  }
+
+  return null;
+}
+
+export function patchComponentPropsInSource(content, componentProps, schema) {
+  if (!content || !schema?.length) return content;
+
+  const propsBlock = renderPropsBlock(schema, componentProps);
+  if (!propsBlock) return content;
+
+  const newPropsSection = `props: {\n${propsBlock}\n  }`;
+  const replaced = replaceObjectBlock(content, "props", newPropsSection);
+  if (replaced) return replaced;
+
+  const anchor = content.match(/\n(\s*)(computed|methods|data)\s*:/);
+  if (anchor && anchor.index !== undefined) {
+    const idx = anchor.index;
+    return `${content.slice(0, idx)},\n  ${newPropsSection}${content.slice(idx)}`;
+  }
+
+  const exportClose = content.lastIndexOf("};");
+  if (exportClose !== -1) {
+    return `${content.slice(0, exportClose)},\n  ${newPropsSection}\n${content.slice(exportClose)}`;
+  }
+
+  return content;
+}
+
+function renderScript(model) {
+  const imports = collectComponentImports(model.root);
+  const ownerPath = model.screenPath || "screens/MainScreen.vue";
+  const importLines = [...imports.entries()]
+    .map(
+      ([name, path]) =>
+        `import ${name} from "${resolveComponentImportPath(ownerPath, path)}";`
+    )
+    .join("\n");
+
+  const componentList = [...imports.keys()].join(", ");
+  const script = model.script || {};
+  const isComponent = model.isComponentSheet;
+  const propsBlock = renderPropsBlock(script.props, model.componentProps);
+
+  if (isComponent) {
+    const propsSection = propsBlock
+      ? `  props: {\n${propsBlock}\n  },`
+      : "";
+
+    return `${importLines}${importLines ? "\n\n" : ""}export default {
+  name: "${script.name || model.screenName}",
+  components: { ${componentList} },${propsSection ? `\n${propsSection}` : ""}
+};`;
+  }
+
+  return `${importLines}${importLines ? "\n\n" : ""}export default {
+  name: "${script.name || model.screenName}",
+  components: { ${componentList} },
+  data() {
+    return {};
+  },
+};`;
+}
+
+export function generateVueSfc(model, { structural = false } = {}) {
+  if (structural && model.preservedScript) {
+    return generateVueSfcPreserved(model, (m) => renderNode(m.root, 2));
+  }
+
+  if (model.preservedTemplate && model.preservedScript && !structural) {
+    return assembleSfc(model.preservedTemplate, model.preservedScript, model.preservedStyles || "");
+  }
+
+  const templateBody = renderNode(model.root, 2);
+  const scriptBody = renderScript(model);
+  const rootClass = model.root.attrs?.class || "screen";
+  const isComponent = model.isComponentSheet || model.screenPath?.startsWith("components/");
+
+  const styleRules = isComponent
+    ? `.${rootClass} {
+  font-family: Inter, system-ui, sans-serif;
+}`
+    : `.${rootClass} {
+  max-width: 480px;
+  margin: 0 auto;
+  padding: 28px 24px;
+  font-family: Inter, system-ui, sans-serif;
+}`;
+
+  return assembleSfc(templateBody, scriptBody, styleRules);
+}
diff --git a/src/vibe/services/vibeScreenModel.js b/src/vibe/services/vibeScreenModel.js
new file mode 100644
index 000000000..7aab1d1bf
--- /dev/null
+++ b/src/vibe/services/vibeScreenModel.js
@@ -0,0 +1,224 @@
+let idCounter = 0;
+
+export function createNodeId(prefix = "node") {
+  idCounter += 1;
+  return `${prefix}-${idCounter}`;
+}
+
+export function componentNameFromPath(filePath) {
+  const base = filePath.split("/").pop() || "Component";
+  return base.replace(/\.vue$/i, "");
+}
+
+export function createContainerNode(tag = "div", attrs = {}) {
+  return {
+    id: createNodeId("container"),
+    type: "container",
+    tag,
+    attrs: { ...attrs },
+    children: [],
+  };
+}
+
+export function createComponentNode(componentPath, props = {}) {
+  const name = componentNameFromPath(componentPath);
+  return {
+    id: createNodeId("comp"),
+    type: "component",
+    componentPath,
+    componentName: name,
+    props: { ...props },
+    children: [],
+  };
+}
+
+export function createNodeFromPayload(payload) {
+  if (payload?.kind === "container") {
+    return createContainerNode(payload.tag || "div", payload.attrs || {});
+  }
+  if (payload?.kind === "component" && payload.path) {
+    return createComponentNode(payload.path, {});
+  }
+  return null;
+}
+
+export function createScreenModel(screenPath, existing = null) {
+  const screenName = componentNameFromPath(screenPath);
+  if (existing) {
+    return JSON.parse(JSON.stringify(existing));
+  }
+  return {
+    screenPath,
+    screenName,
+    root: createContainerNode("div", {
+      class: screenName.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "") || "screen",
+      "data-cy": screenName.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "") || "screen",
+    }),
+    script: {
+      name: screenName,
+      data: {},
+      methods: {},
+    },
+  };
+}
+
+export function findNode(root, nodeId) {
+  if (root.id === nodeId) return { node: root, parent: null };
+  return findNodeInChildren(root, nodeId, root);
+}
+
+function findNodeInChildren(node, nodeId, parent) {
+  for (const child of node.children || []) {
+    if (child.id === nodeId) return { node: child, parent: node };
+    const found = findNodeInChildren(child, nodeId, node);
+    if (found) return found;
+  }
+  return null;
+}
+
+export function addNode(model, parentId, node) {
+  const parent = parentId === model.root.id
+    ? model.root
+    : findNode(model.root, parentId)?.node;
+  if (!parent) return null;
+  if (!parent.children) parent.children = [];
+  parent.children.push(node);
+  return node;
+}
+
+export function insertNode(model, parentId, node, index) {
+  const parent =
+    parentId === model.root.id
+      ? model.root
+      : findNode(model.root, parentId)?.node;
+  if (!parent) return null;
+  if (!parent.children) parent.children = [];
+
+  const insertIndex = Math.max(
+    0,
+    Math.min(index ?? parent.children.length, parent.children.length)
+  );
+  parent.children.splice(insertIndex, 0, node);
+  return node;
+}
+
+export function removeNode(model, nodeId) {
+  if (nodeId === model.root.id) return false;
+  const result = findNode(model.root, nodeId);
+  if (!result?.parent) return false;
+  const idx = result.parent.children.findIndex((c) => c.id === nodeId);
+  if (idx === -1) return false;
+  result.parent.children.splice(idx, 1);
+  return true;
+}
+
+export function isNodeDescendant(root, ancestorId, nodeId) {
+  const ancestor = ancestorId === root.id ? root : findNode(root, ancestorId)?.node;
+  if (!ancestor) return false;
+  if (ancestor.id === nodeId) return true;
+
+  const walk = (node) => {
+    if (node.id === nodeId) return true;
+    return (node.children || []).some(walk);
+  };
+
+  return (ancestor.children || []).some(walk);
+}
+
+export function moveNode(model, nodeId, targetParentId, targetIndex = null) {
+  if (nodeId === model.root.id) return false;
+
+  const source = findNode(model.root, nodeId);
+  if (!source?.parent) return false;
+
+  const targetParent =
+    targetParentId === model.root.id
+      ? model.root
+      : findNode(model.root, targetParentId)?.node;
+  if (!targetParent) return false;
+
+  if (isNodeDescendant(model.root, nodeId, targetParentId)) {
+    return false;
+  }
+
+  const fromIndex = source.parent.children.findIndex((child) => child.id === nodeId);
+  if (fromIndex === -1) return false;
+
+  const [node] = source.parent.children.splice(fromIndex, 1);
+  if (!targetParent.children) targetParent.children = [];
+
+  let insertIndex =
+    targetIndex === null || targetIndex === undefined
+      ? targetParent.children.length
+      : targetIndex;
+
+  if (source.parent === targetParent && fromIndex < insertIndex) {
+    insertIndex -= 1;
+  }
+
+  insertIndex = Math.max(0, Math.min(insertIndex, targetParent.children.length));
+  targetParent.children.splice(insertIndex, 0, node);
+  return true;
+}
+
+function cloneNodeTree(node) {
+  const prefix = node.type === "component" ? "comp" : "container";
+  const cloned = {
+    ...JSON.parse(JSON.stringify(node)),
+    id: createNodeId(prefix),
+  };
+  if (cloned.children?.length) {
+    cloned.children = cloned.children.map(cloneNodeTree);
+  }
+  return cloned;
+}
+
+export function duplicateNode(model, nodeId) {
+  if (nodeId === model.root.id) return null;
+
+  const result = findNode(model.root, nodeId);
+  if (!result?.parent) return null;
+
+  const clone = cloneNodeTree(result.node);
+  const siblings = result.parent.children;
+  const fromIndex = siblings.findIndex((child) => child.id === nodeId);
+  siblings.splice(fromIndex + 1, 0, clone);
+  return clone;
+}
+
+export function updateNodeProps(model, nodeId, props) {
+  const result = findNode(model.root, nodeId);
+  if (!result) return false;
+  result.node.props = { ...props };
+  return true;
+}
+
+export function updateNodeAttrs(model, nodeId, attrs) {
+  const result = findNode(model.root, nodeId);
+  if (!result || result.node.type !== "container") return false;
+  result.node.attrs = { ...attrs };
+  return true;
+}
+
+export function collectComponentImports(root, imports = new Map()) {
+  if (root.type === "component" && root.componentPath) {
+    imports.set(root.componentName, root.componentPath);
+  }
+  (root.children || []).forEach((child) => collectComponentImports(child, imports));
+  return imports;
+}
+
+export function flattenPaletteComponents(tree, list = []) {
+  tree.forEach((node) => {
+    if (node.type === "file" && node.path.toLowerCase().endsWith(".vue")) {
+      if (node.path.startsWith("components/") || node.path.includes("/components/")) {
+        list.push({
+          path: node.path,
+          name: componentNameFromPath(node.path),
+        });
+      }
+    }
+    if (node.children) flattenPaletteComponents(node.children, list);
+  });
+  return list;
+}
diff --git a/src/vibe/services/vibeScreenParser.js b/src/vibe/services/vibeScreenParser.js
new file mode 100644
index 000000000..f47a47651
--- /dev/null
+++ b/src/vibe/services/vibeScreenParser.js
@@ -0,0 +1,117 @@
+import {
+  createScreenModel,
+  createComponentNode,
+  createContainerNode,
+} from "./vibeScreenModel";
+import { parsePropsFromVueSource } from "./vibeComponentProps";
+import { extractPreservedBlocks } from "./vibeSfcPatch";
+
+function parsePropsFromTag(attrsStr) {
+  const props = {};
+  attrsStr.replace(/(?:^|\s)([\w-]+)="([^"]*)"/g, (_, key, value) => {
+    if (!["class", "id", "data-cy"].includes(key)) {
+      props[key] = value;
+    }
+  });
+  return props;
+}
+
+function kebabToPascal(tag) {
+  return tag
+    .split("-")
+    .map((p) => p.charAt(0).toUpperCase() + p.slice(1))
+    .join("");
+}
+
+export function parseVueToScreenModel(screenPath, content) {
+  const model = createScreenModel(screenPath);
+  model.isComponentSheet = isComponentFile(screenPath);
+
+  if (model.isComponentSheet && content?.trim()) {
+    const propSchema = parsePropsFromVueSource(content);
+    model.script.props = propSchema;
+    model.componentProps = {};
+    propSchema.forEach((def) => {
+      if (def.default !== undefined) {
+        model.componentProps[def.name] = def.default;
+      }
+    });
+  }
+
+  if (!content?.trim()) return model;
+
+  const preserved = extractPreservedBlocks(content);
+  model.preservedTemplate = preserved.template;
+  model.preservedScript = preserved.script;
+  model.preservedStyles = preserved.styles;
+
+  const imports = {};
+  content.replace(/import\s+(\w+)\s+from\s+['"]([^'"]+)['"]/g, (_, name, path) => {
+    imports[name] = path.replace(/^\.\.\//, "");
+  });
+
+  const templateMatch = content.match(/<template[^>]*>([\s\S]*?)<\/template>/i);
+  if (!templateMatch) return model;
+
+  const rootMatch = templateMatch[1].trim().match(/^<(\w+)([^>]*)>([\s\S]*)<\/\1>$/);
+  if (rootMatch) {
+    model.root.tag = rootMatch[1];
+    const attrs = {};
+    rootMatch[2].replace(/([\w-]+)="([^"]*)"/g, (_, k, v) => {
+      attrs[k] = v;
+    });
+    model.root.attrs = attrs;
+    model.root.templateTagIndex = 0;
+  }
+
+  const nameMatch = content.match(/name:\s*["']([^"']+)["']/);
+  if (nameMatch) model.script.name = nameMatch[1];
+
+  model.root.children = [];
+  const inner = rootMatch ? rootMatch[3] : templateMatch[1];
+  const tagOccurrence = {};
+  const tagRe = /<([\w-]+)([^>]*?)(?:\/>|>([\s\S]*?)<\/\1>)/g;
+  let tagMatch = tagRe.exec(inner);
+
+  while (tagMatch) {
+    const tagName = tagMatch[1];
+    const attrsStr = tagMatch[2] || "";
+    const occurrenceIndex = tagOccurrence[tagName] || 0;
+    tagOccurrence[tagName] = occurrenceIndex + 1;
+    const pascalName = kebabToPascal(tagName);
+    const importName = Object.keys(imports).find(
+      (name) => name.toLowerCase() === pascalName.toLowerCase()
+    );
+
+    if (importName) {
+      let path = imports[importName];
+      if (!path.endsWith(".vue")) path += ".vue";
+      const node = createComponentNode(path, parsePropsFromTag(attrsStr));
+      node.templateTagIndex = occurrenceIndex;
+      model.root.children.push(node);
+    } else if (!["template", "script", "style"].includes(tagName.toLowerCase())) {
+      const attrs = {};
+      attrsStr.replace(/([\w-]+)="([^"]*)"/g, (_, k, v) => {
+        attrs[k] = v;
+      });
+      const node = createContainerNode(tagName, attrs);
+      node.templateTagIndex = occurrenceIndex;
+      model.root.children.push(node);
+    }
+    tagMatch = tagRe.exec(inner);
+  }
+
+  return model;
+}
+
+export function isScreenFile(filePath) {
+  return filePath.startsWith("screens/") && filePath.toLowerCase().endsWith(".vue");
+}
+
+export function isComponentFile(filePath) {
+  return filePath.startsWith("components/") && filePath.toLowerCase().endsWith(".vue");
+}
+
+export function isSheetFile(filePath) {
+  return isScreenFile(filePath) || isComponentFile(filePath);
+}
diff --git a/src/vibe/services/vibeSfcPatch.js b/src/vibe/services/vibeSfcPatch.js
new file mode 100644
index 000000000..fa36c1fb1
--- /dev/null
+++ b/src/vibe/services/vibeSfcPatch.js
@@ -0,0 +1,240 @@
+/* istanbul ignore file */
+import { collectComponentImports } from "./vibeScreenModel";
+import { resolveComponentImportPath } from "./vibeImportPaths";
+
+function pascalToKebab(name) {
+  return name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+export function extractPreservedBlocks(content) {
+  if (!content) {
+    return { template: null, script: null, styles: null };
+  }
+
+  const templateMatch = content.match(/<template[^>]*>([\s\S]*?)<\/template>/i);
+  const scriptMatch = content.match(/<script[^>]*>([\s\S]*?)<\/script>/i);
+  const styleMatch = content.match(/<style[^>]*>([\s\S]*?)<\/style>/i);
+
+  return {
+    template: templateMatch ? templateMatch[1] : null,
+    script: scriptMatch ? scriptMatch[1].trim() : null,
+    styles: styleMatch ? styleMatch[1].trim() : null,
+  };
+}
+
+export function assembleSfc(template, script, styles) {
+  return `<template>
+${template}
+</template>
+
+<script>
+${script}
+</script>
+
+<style scoped>
+${styles}
+</style>
+`;
+}
+
+function findNthOpeningTag(content, tagName, occurrenceIndex = 0) {
+  const re = new RegExp(`<${tagName}(\\s[^>/]*?)?(\\/>|>)`, "gi");
+  let match;
+  let count = 0;
+
+  while ((match = re.exec(content)) !== null) {
+    if (count === occurrenceIndex) {
+      return {
+        start: match.index,
+        end: match.index + match[0].length,
+        tag: match[0],
+      };
+    }
+    count += 1;
+  }
+
+  return null;
+}
+
+function escapeAttr(value) {
+  return String(value).replace(/"/g, "&quot;");
+}
+
+function renderStaticProps(props) {
+  return Object.entries(props || {})
+    .map(([key, value]) => {
+      if (typeof value === "string") {
+        return `${key}="${escapeAttr(value)}"`;
+      }
+      if (typeof value === "boolean") {
+        return value ? key : `:${key}="false"`;
+      }
+      if (typeof value === "number") {
+        return `:${key}="${value}"`;
+      }
+      return `:${key}='${JSON.stringify(value)}'`;
+    })
+    .join(" ");
+}
+
+function patchOpeningTagAttributes(openTag, props) {
+  const tagMatch = openTag.match(/^<([\w-]+)/);
+  if (!tagMatch) return openTag;
+
+  const tagName = tagMatch[1];
+  const isSelfClosing = /\/>\s*$/.test(openTag);
+  let inner = openTag.slice(tagName.length + 1).replace(/\/?>\s*$/, "").trim();
+
+  Object.keys(props || {}).forEach((key) => {
+    inner = inner.replace(new RegExp(`(^|\\s)${key}="[^"]*"`, "g"), " ");
+    inner = inner.replace(new RegExp(`(^|\\s):${key}="[^"]*"`, "g"), " ");
+  });
+
+  inner = inner.replace(/\s+/g, " ").trim();
+  const newProps = renderStaticProps(props);
+  const parts = [inner, newProps].filter(Boolean).join(" ");
+  const attrSegment = parts ? ` ${parts}` : "";
+  const closing = isSelfClosing ? " /" : "";
+
+  return `<${tagName}${attrSegment}${closing}>`;
+}
+
+export function patchComponentUsageProps(content, componentName, occurrenceIndex, props) {
+  if (!content || !componentName) return content;
+
+  const tagName = pascalToKebab(componentName);
+  const match = findNthOpeningTag(content, tagName, occurrenceIndex);
+  if (!match) return content;
+
+  const patchedTag = patchOpeningTagAttributes(match.tag, props);
+  return content.slice(0, match.start) + patchedTag + content.slice(match.end);
+}
+
+export function patchContainerTagAttrs(content, tagName, occurrenceIndex, attrs) {
+  if (!content || !tagName) return content;
+
+  const match = findNthOpeningTag(content, tagName, occurrenceIndex);
+  if (!match) return content;
+
+  const attrProps = Object.fromEntries(
+    Object.entries(attrs || {}).map(([key, value]) => [key, String(value)])
+  );
+  const patchedTag = patchOpeningTagAttributes(match.tag, attrProps);
+  return content.slice(0, match.start) + patchedTag + content.slice(match.end);
+}
+
+function mergeComponentsRegistration(script, requiredNames) {
+  const required = [...requiredNames];
+  if (!required.length) return script;
+
+  const match = script.match(/components\s*:\s*\{/);
+  const existing = new Set();
+
+  if (match && match.index !== undefined) {
+    const braceStart = script.indexOf("{", match.index);
+    let depth = 0;
+    for (let i = braceStart; i < script.length; i += 1) {
+      const ch = script[i];
+      if (ch === "{") depth += 1;
+      if (ch === "}") {
+        depth -= 1;
+        if (depth === 0) {
+          const inner = script.slice(braceStart + 1, i);
+          inner.split(",").forEach((part) => {
+            const name = part.trim().split(/\s+/)[0];
+            if (name && /^[A-Za-z_$]/.test(name)) {
+              existing.add(name);
+            }
+          });
+
+          const merged = [...new Set([...existing, ...required])];
+          const block = `components: { ${merged.join(", ")} }`;
+          return script.slice(0, match.index) + block + script.slice(i + 1);
+        }
+      }
+    }
+  }
+
+  const merged = [...new Set([...existing, ...required])];
+  const block = `components: { ${merged.join(", ")} }`;
+  return script.replace(/export\s+default\s*\{/, `export default {\n  ${block},`);
+}
+
+function mergeScriptImports(preservedScript, model) {
+  if (!preservedScript) return preservedScript;
+
+  const needed = collectComponentImports(model.root);
+  if (!needed.size) return preservedScript;
+
+  const ownerPath = model.screenPath || "screens/MainScreen.vue";
+  const lines = preservedScript.split("\n");
+  const existingImports = new Set();
+  preservedScript.replace(
+    /import\s+(\w+)\s+from\s+['"][^'"]+['"]\s*;?/g,
+    (_, name) => {
+      existingImports.add(name);
+    }
+  );
+
+  const newImportLines = [];
+  needed.forEach((path, name) => {
+    if (!existingImports.has(name)) {
+      newImportLines.push(
+        `import ${name} from "${resolveComponentImportPath(ownerPath, path)}";`
+      );
+    }
+  });
+
+  let result = preservedScript;
+
+  if (newImportLines.length) {
+    const exportIdx = lines.findIndex((line) => /export\s+default/.test(line));
+    if (exportIdx === -1) {
+      result = `${newImportLines.join("\n")}\n\n${preservedScript}`;
+    } else {
+      result = [...lines.slice(0, exportIdx), ...newImportLines, "", ...lines.slice(exportIdx)].join(
+        "\n"
+      );
+    }
+  }
+
+  return mergeComponentsRegistration(result, [...needed.keys()]);
+}
+
+export function generateVueSfcPreserved(model, renderTemplate) {
+  const templateBody = renderTemplate(model);
+  const scriptBody =
+    mergeScriptImports(model.preservedScript, model) ||
+    model.preservedScript ||
+    "export default { name: \"Component\" };";
+  const styleBody =
+    model.preservedStyles ||
+    `.${model.root.attrs?.class || "screen"} {
+  font-family: Inter, system-ui, sans-serif;
+}`;
+
+  return assembleSfc(templateBody, scriptBody, styleBody);
+}
+
+export function syncImportedVueComponentsInSource(content) {
+  if (!content) return content;
+
+  const scriptMatch = content.match(/<script[^>]*>([\s\S]*?)<\/script>/i);
+  if (!scriptMatch) return content;
+
+  const script = scriptMatch[1].trim();
+  const importNames = [];
+  script.replace(
+    /import\s+(\w+)\s+from\s+['"][^'"]+\.vue['"]\s*;?/g,
+    (_, name) => {
+      importNames.push(name);
+    }
+  );
+
+  if (!importNames.length) return content;
+
+  const updatedScript = mergeComponentsRegistration(script, importNames);
+  if (updatedScript === script) return content;
+
+  return content.replace(scriptMatch[0], `<script>\n${updatedScript}\n</script>`);
+}
diff --git a/src/vibe/services/vibeSfcRuntime.js b/src/vibe/services/vibeSfcRuntime.js
new file mode 100644
index 000000000..95836edcb
--- /dev/null
+++ b/src/vibe/services/vibeSfcRuntime.js
@@ -0,0 +1,198 @@
+import Vue from "vue";
+import { compileToFunctions } from "vue-template-compiler";
+import { fetchFile, getCachedFileContent } from "./vibeProjectApi";
+import { resolveImportPath } from "./vibeImportPaths";
+
+const BLOCK_RE = (tag, global = false) =>
+  new RegExp(`<${tag}[^>]*>([\\s\\S]*?)<\\/${tag}>`, global ? "gi" : "i");
+
+function matchAllBlocks(source, tag) {
+  const re = BLOCK_RE(tag, true);
+  const matches = [];
+  let match = re.exec(source);
+  while (match) {
+    matches.push(match);
+    match = re.exec(source);
+  }
+  return matches;
+}
+
+function parseSfc(source) {
+  const templateMatch = source.match(BLOCK_RE("template"));
+  const scriptMatch = source.match(BLOCK_RE("script"));
+  const styleMatches = matchAllBlocks(source, "style");
+
+  return {
+    template: templateMatch ? templateMatch[1].trim() : "",
+    script: scriptMatch ? scriptMatch[1].trim() : "",
+    styles: styleMatches.map((match) => match[1].trim()).filter(Boolean),
+  };
+}
+
+function parseImports(script) {
+  const imports = [];
+  const importRe = /import\s+(\w+)\s+from\s+['"]([^'"]+)['"]\s*;?/g;
+  let match = importRe.exec(script);
+  while (match) {
+    imports.push({ name: match[1], path: match[2] });
+    match = importRe.exec(script);
+  }
+  return imports;
+}
+
+function compileScript(script, injectedVars) {
+  if (!script || !script.trim()) {
+    return {};
+  }
+
+  const importNames = [];
+  let body = script.replace(
+    /import\s+(\w+)\s+from\s+['"][^'"]+['"]\s*;?\s*/g,
+    (_, name) => {
+      importNames.push(name);
+      return "";
+    }
+  );
+
+  if (!/export\s+default/.test(body)) {
+    throw new Error("Script block must use export default");
+  }
+
+  body = body.replace(/export\s+default\s+/, "var __sfc_exports__ = ");
+
+  const injectLines = importNames
+    .map((name) => `const ${name} = __injected__["${name}"];`)
+    .join("\n");
+
+  const fn = new Function(
+    "__injected__",
+    `${injectLines}${injectLines ? "\n" : ""}${body.trim()}\nreturn __sfc_exports__;`
+  );
+
+  try {
+    const result = fn(injectedVars);
+    if (!result || typeof result !== "object") {
+      throw new Error("export default must return a component options object");
+    }
+    return result;
+  } catch (err) {
+    throw new Error(`Script compile error: ${err.message}`);
+  }
+}
+
+function compileTemplate(template) {
+  if (!template) {
+    return { render: undefined, staticRenderFns: undefined };
+  }
+  try {
+    return compileToFunctions(template);
+  } catch (err) {
+    throw new Error(`Template compile error: ${err.message}`);
+  }
+}
+
+async function compileVueFile(
+  filePath,
+  cache = new Map(),
+  allStyles = [],
+  sourceContent = null
+) {
+  if (cache.has(filePath)) {
+    return cache.get(filePath);
+  }
+
+  let content;
+  try {
+    if (sourceContent !== null && sourceContent !== undefined) {
+      content = sourceContent;
+    } else {
+      const cached = getCachedFileContent(filePath);
+      content = cached !== null ? cached : (await fetchFile(filePath)).content;
+    }
+  } catch (err) {
+    throw new Error(`Failed to load "${filePath}": ${err.message}`);
+  }
+
+  const { template, script, styles } = parseSfc(content);
+  const imports = parseImports(script);
+  const injectedVars = {};
+
+  for (const imp of imports) {
+    const resolved = resolveImportPath(filePath, imp.path);
+    if (resolved?.toLowerCase().endsWith(".vue")) {
+      injectedVars[imp.name] = await compileVueFile(resolved, cache, allStyles);
+    }
+  }
+
+  const options = compileScript(script, injectedVars) || {};
+  const { render, staticRenderFns } = compileTemplate(template);
+
+  const vueImportNames = imports.filter((imp) => {
+    const resolved = resolveImportPath(filePath, imp.path);
+    return resolved?.toLowerCase().endsWith(".vue") && injectedVars[imp.name];
+  });
+
+  if (vueImportNames.length) {
+    options.components = { ...(options.components || {}) };
+    vueImportNames.forEach((imp) => {
+      options.components[imp.name] = injectedVars[imp.name];
+    });
+  }
+
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+  }
+
+  if (styles.length) {
+    allStyles.push(...styles);
+  }
+
+  cache.set(filePath, options);
+  return options;
+}
+
+export async function resolveEntryVuePath() {
+  const { content } = await fetchFile("index.js");
+  const reExport = content.match(
+    /export\s+\{\s*default\s*\}\s+from\s+['"]([^'"]+)['"]/
+  );
+  if (reExport) {
+    return resolveImportPath("index.js", reExport[1]);
+  }
+
+  const defaultExport = content.match(
+    /export\s+default\s+from\s+['"]([^'"]+)['"]/
+  );
+  if (defaultExport) {
+    return resolveImportPath("index.js", defaultExport[1]);
+  }
+
+  throw new Error("Could not resolve entry component from vibe-project/index.js");
+}
+
+export async function compileVueSfcFromProject(filePath, sourceContent = null) {
+  const allStyles = [];
+  const options = await compileVueFile(filePath, new Map(), allStyles, sourceContent);
+  const component = Vue.extend(options);
+  component.options.__previewStyles = allStyles;
+  return component;
+}
+
+export async function compileEntryFromProject() {
+  const entryPath = await resolveEntryVuePath();
+  return compileVueSfcFromProject(entryPath);
+}
+
+export function injectPreviewStyles(componentCtor, scopeId) {
+  if (!componentCtor.options.__previewStyles?.length) return () => {};
+
+  const styleEl = document.createElement("style");
+  styleEl.setAttribute("data-vibe-preview", scopeId);
+  styleEl.textContent = componentCtor.options.__previewStyles.join("\n");
+  document.head.appendChild(styleEl);
+
+  return () => {
+    styleEl.remove();
+  };
+}
diff --git a/src/vibe/services/vibeSheetDrag.js b/src/vibe/services/vibeSheetDrag.js
new file mode 100644
index 000000000..556dc129b
--- /dev/null
+++ b/src/vibe/services/vibeSheetDrag.js
@@ -0,0 +1,53 @@
+import { componentNameFromPath } from "./vibeScreenModel";
+
+export const VIBE_SHEET_DRAG = "application/vibe-sheet-node";
+
+export const SHEET_LAYOUT_ITEMS = [
+  {
+    id: "section",
+    label: "Section",
+    payload: { kind: "container", tag: "section", attrs: { class: "screen-section" } },
+  },
+  {
+    id: "form",
+    label: "Form",
+    payload: { kind: "container", tag: "form", attrs: { class: "screen-form" } },
+  },
+  {
+    id: "div",
+    label: "Container",
+    payload: { kind: "container", tag: "div", attrs: { class: "screen-block" } },
+  },
+];
+
+export function isSheetDraggableComponent(filePath) {
+  if (typeof filePath !== "string") return false;
+  return filePath.startsWith("components/") && /\.vue$/i.test(filePath);
+}
+
+export function buildComponentDragPayload(filePath) {
+  return {
+    kind: "component",
+    path: filePath,
+    name: componentNameFromPath(filePath),
+  };
+}
+
+export function setSheetDragData(event, payload) {
+  event.dataTransfer.setData(VIBE_SHEET_DRAG, JSON.stringify(payload));
+  event.dataTransfer.effectAllowed = payload?.kind === "move" ? "move" : "copy";
+}
+
+export function setSheetMoveDragData(event, nodeId) {
+  setSheetDragData(event, { kind: "move", nodeId });
+}
+
+export function parseSheetDragPayload(event) {
+  const raw = event.dataTransfer?.getData(VIBE_SHEET_DRAG);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
diff --git a/src/vibe/services/vibeTestRunner.js b/src/vibe/services/vibeTestRunner.js
new file mode 100644
index 000000000..6e885685c
--- /dev/null
+++ b/src/vibe/services/vibeTestRunner.js
@@ -0,0 +1,112 @@
+import { load as yamlLoad, dump as yamlDump } from "js-yaml";
+
+export function parseScenarios(content) {
+  try {
+    const parsed = yamlLoad(content);
+    return parsed?.scenarios || [];
+  } catch (err) {
+    throw new Error(`Invalid YAML: ${err.message}`);
+  }
+}
+
+export function serializeScenarios(scenarios) {
+  return yamlDump({ scenarios }, { indent: 2, lineWidth: 120 });
+}
+
+function findByDataCy(root, target) {
+  return root.querySelector(`[data-cy="${target}"]`);
+}
+
+function getComponentData(vm) {
+  if (!vm) return {};
+  const data = {};
+  if (vm.form) {
+    Object.assign(data, vm.form);
+  }
+  if (vm.$data) {
+    Object.keys(vm.$data).forEach((key) => {
+      if (typeof vm.$data[key] !== "function" && key !== "submitted") {
+        data[key] = vm.$data[key];
+      }
+    });
+  }
+  return data;
+}
+
+async function runStep(step, root, vm) {
+  const el = findByDataCy(root, step.field || step.target);
+  if (!el) {
+    throw new Error(`Element [data-cy="${step.field || step.target}"] not found`);
+  }
+
+  if (step.action === "fill") {
+    el.value = step.value;
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+  } else if (step.action === "click") {
+    el.click();
+    await new Promise((resolve) => setTimeout(resolve, 50));
+  }
+}
+
+async function runAssert(assertion, root, vm) {
+  if (assertion.assert === "visible") {
+    const el = findByDataCy(root, assertion.target);
+    if (!el || el.offsetParent === null) {
+      throw new Error(`Expected "${assertion.target}" to be visible`);
+    }
+  } else if (assertion.assert === "data") {
+    const data = getComponentData(vm);
+    const actual = data[assertion.field];
+    if (actual !== assertion.equals) {
+      throw new Error(
+        `Expected ${assertion.field} to equal "${assertion.equals}", got "${actual}"`
+      );
+    }
+  }
+}
+
+export async function runScenario(scenario, previewRoot, previewVm) {
+  const result = {
+    name: scenario.name,
+    passed: false,
+    error: null,
+  };
+
+  try {
+    if (scenario.given?.data && previewVm) {
+      Object.entries(scenario.given.data).forEach(([key, value]) => {
+        if (previewVm.form && key in previewVm.form) {
+          previewVm.form[key] = value;
+        }
+      });
+      await previewVm.$nextTick();
+    }
+
+    if (scenario.when) {
+      for (const step of scenario.when) {
+        await runStep(step, previewRoot, previewVm);
+        await previewVm?.$nextTick();
+      }
+    }
+
+    if (scenario.then) {
+      for (const assertion of scenario.then) {
+        await runAssert(assertion, previewRoot, previewVm);
+      }
+    }
+
+    result.passed = true;
+  } catch (err) {
+    result.error = err.message;
+  }
+
+  return result;
+}
+
+export async function runAllScenarios(scenarios, previewRoot, previewVm) {
+  const results = [];
+  for (const scenario of scenarios) {
+    results.push(await runScenario(scenario, previewRoot, previewVm));
+  }
+  return results;
+}
diff --git a/src/vibe/services/vibeUseScreenControl.js b/src/vibe/services/vibeUseScreenControl.js
new file mode 100644
index 000000000..6bc47a26b
--- /dev/null
+++ b/src/vibe/services/vibeUseScreenControl.js
@@ -0,0 +1,60 @@
+export function screenPathToLabel(screenPath) {
+  const base = screenPath.split("/").pop() || screenPath;
+  return base.replace(/\.vue$/i, "");
+}
+
+const VIBE_SCREEN_PATH_RE = /screen-path=["']([^"']+)["']/gi;
+
+function collectFromItems(items, paths) {
+  if (!Array.isArray(items)) return;
+
+  items.forEach((item) => {
+    if (!item || typeof item !== "object") return;
+
+    if (Array.isArray(item)) {
+      collectFromItems(item, paths);
+      return;
+    }
+
+    const contentVue = item.config?.contentVue;
+    if (item.component === "VueComponentRenderTemplate" && contentVue) {
+      const matches = contentVue.matchAll(VIBE_SCREEN_PATH_RE);
+      for (const match of matches) {
+        if (match[1]) paths.add(match[1]);
+      }
+    }
+
+    if (Array.isArray(item.items)) {
+      if (item.component === "FormMultiColumn") {
+        item.items.forEach((column) => collectFromItems(column, paths));
+      } else {
+        collectFromItems(item.items, paths);
+      }
+    }
+
+    if (Array.isArray(item.config?.items)) {
+      collectFromItems(item.config.items, paths);
+    }
+  });
+}
+
+export function extractUsedVibeScreenPaths(config) {
+  const paths = new Set();
+  if (!Array.isArray(config)) return [];
+
+  config.forEach((page) => collectFromItems(page?.items, paths));
+  return [...paths];
+}
+
+export function buildVibeScreenControlFields(screenPath) {
+  const label = screenPathToLabel(screenPath);
+
+  return {
+    label,
+    componentName: "VibeProjectScreen",
+    contentVue: `<VibeProjectScreen screen-path="${screenPath}" />`,
+    handlerVue: "return {}",
+    interactive: true,
+    ignoreMustache: true,
+  };
+}
diff --git a/src/vibe/styles/vibe-layout.scss b/src/vibe/styles/vibe-layout.scss
new file mode 100644
index 000000000..da6b4f746
--- /dev/null
+++ b/src/vibe/styles/vibe-layout.scss
@@ -0,0 +1,240 @@
+@import "./vibe-tokens.scss";
+
+.vibe-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-family: var(--vibe-font);
+  font-size: var(--vibe-font-size);
+  color: var(--vibe-text);
+  background: var(--vibe-bg);
+  overflow: hidden;
+}
+
+.vibe-workspace {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  padding: var(--vibe-workspace-padding);
+  gap: var(--vibe-gap);
+}
+
+.vibe-float-panel {
+  background: var(--vibe-panel-bg);
+  border-radius: var(--vibe-radius-xl);
+  box-shadow: var(--vibe-shadow);
+  border: 1px solid var(--vibe-border);
+  overflow: hidden;
+}
+
+.vibe-main {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  gap: 6px;
+  overflow: hidden;
+  align-items: stretch;
+}
+
+.vibe-sidebar {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.vibe-editor-area {
+  flex: 1;
+  min-width: 240px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.vibe-editor-column {
+  flex: 1;
+  min-width: 240px;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow: hidden;
+}
+
+.vibe-editor-column__workspace {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.vibe-preview {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.vibe-preview--full {
+  flex: 1;
+  width: auto;
+  min-width: 0;
+}
+
+.vibe-tests-drawer {
+  flex-shrink: 0;
+  min-height: 52px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.vibe-shell--resizing {
+  user-select: none;
+}
+
+.vibe-shell--resizing:not(.vibe-shell--resizing-vertical) {
+  cursor: col-resize;
+}
+
+.vibe-shell--resizing-vertical {
+  cursor: row-resize;
+}
+
+.vibe-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: 1px solid var(--vibe-border-strong);
+  border-radius: var(--vibe-radius-pill);
+  background: var(--vibe-panel-bg);
+  color: var(--vibe-text);
+  font-family: var(--vibe-font);
+  font-size: var(--vibe-font-size-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: var(--vibe-shadow-sm);
+    background: var(--vibe-bg-soft);
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+  }
+
+  &.primary {
+    background: var(--vibe-accent-gradient);
+    border-color: transparent;
+    color: var(--vibe-accent-on);
+    box-shadow: 0 8px 24px rgba(15, 38, 74, 0.14);
+
+    &:hover:not(:disabled) {
+      background: var(--vibe-accent-hover);
+      box-shadow: 0 10px 28px rgba(15, 38, 74, 0.18);
+    }
+  }
+
+  &.ghost {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+
+    &:hover:not(:disabled) {
+      background: var(--vibe-accent-muted);
+      transform: none;
+    }
+  }
+
+  &.active {
+    background: var(--vibe-accent-muted);
+    color: var(--vibe-accent);
+    border-color: transparent;
+  }
+}
+
+.vibe-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--vibe-text-muted);
+  text-align: center;
+  padding: 32px 24px;
+  gap: 10px;
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--vibe-text);
+    letter-spacing: -0.02em;
+  }
+
+  &__hint {
+    font-size: var(--vibe-font-size-sm);
+    max-width: 300px;
+    line-height: 1.6;
+    color: var(--vibe-text-subtle);
+  }
+
+  kbd {
+    display: inline-block;
+    padding: 2px 8px;
+    border: none;
+    border-radius: var(--vibe-radius-pill);
+    background: var(--vibe-accent-muted);
+    color: var(--vibe-accent);
+    font-size: 11px;
+    font-family: inherit;
+    font-weight: 600;
+  }
+}
+
+.vibe-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  flex-shrink: 0;
+}
+
+.vibe-panel-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--vibe-accent-soft);
+}
+
+.vibe-panel-title-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vibe-inline-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  border: 2px solid var(--vibe-accent-muted);
+  border-top-color: var(--vibe-accent);
+  border-radius: 50%;
+  animation: vibe-inline-spin 0.65s linear infinite;
+}
+
+@keyframes vibe-inline-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/vibe/styles/vibe-tokens.scss b/src/vibe/styles/vibe-tokens.scss
new file mode 100644
index 000000000..8054678ee
--- /dev/null
+++ b/src/vibe/styles/vibe-tokens.scss
@@ -0,0 +1,46 @@
+:root {
+  /* Brand palette */
+  --vibe-navy: #0f264a;
+  --vibe-lime: #b7f06b;
+
+  --vibe-bg: #edf1f6;
+  --vibe-bg-soft: #f4f7fa;
+  --vibe-panel-bg: #ffffff;
+  --vibe-border: rgba(15, 38, 74, 0.08);
+  --vibe-border-strong: rgba(15, 38, 74, 0.14);
+  --vibe-text: #0f264a;
+  --vibe-text-muted: #4a5f78;
+  --vibe-text-subtle: #7a8fa8;
+
+  --vibe-accent: #0f264a;
+  --vibe-accent-hover: #1a3a6b;
+  --vibe-accent-soft: #4a6585;
+  --vibe-accent-secondary: #b7f06b;
+  --vibe-accent-muted: rgba(15, 38, 74, 0.08);
+  --vibe-accent-on: #ffffff;
+  --vibe-accent-gradient: linear-gradient(135deg, #1a3a6b 0%, #0f264a 100%);
+
+  --vibe-success: #059669;
+  --vibe-success-bg: #ecfdf5;
+  --vibe-error: #c53030;
+  --vibe-error-bg: rgba(197, 48, 48, 0.08);
+  --vibe-warning: #d97706;
+
+  --vibe-radius-xl: 28px;
+  --vibe-radius-lg: 20px;
+  --vibe-radius: 16px;
+  --vibe-radius-sm: 12px;
+  --vibe-radius-pill: 999px;
+  --vibe-shadow-sm: 0 4px 16px rgba(15, 38, 74, 0.06);
+  --vibe-shadow: 0 10px 40px rgba(15, 38, 74, 0.08);
+  --vibe-shadow-lg: 0 20px 60px rgba(15, 38, 74, 0.12);
+  --vibe-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --vibe-font-size: 13px;
+  --vibe-font-size-sm: 12px;
+  --vibe-gap: 14px;
+  --vibe-workspace-padding: 16px;
+  --vibe-toolbar-height: 56px;
+  --vibe-sidebar-width: 260px;
+  --vibe-preview-width: 420px;
+  --vibe-tests-height: 220px;
+}
diff --git a/src/vite/vibeAiHandler.js b/src/vite/vibeAiHandler.js
new file mode 100644
index 000000000..11ce4cbdd
--- /dev/null
+++ b/src/vite/vibeAiHandler.js
@@ -0,0 +1,128 @@
+import {
+  buildSystemPrompt,
+  parseAgentResponse,
+  normalizeAgentResult,
+} from "../vibe/services/vibeAiPrompt.js";
+
+async function callOpenAiCompatible({ apiKey, baseUrl, model, messages }) {
+  const url = `${baseUrl.replace(/\/$/, "")}/chat/completions`;
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${apiKey}`,
+    },
+    body: JSON.stringify({
+      model,
+      messages,
+      temperature: 0.2,
+      response_format: { type: "json_object" },
+    }),
+  });
+
+  const data = await response.json();
+  if (!response.ok) {
+    throw new Error(
+      data.error?.message || data.error || `AI request failed (${response.status})`
+    );
+  }
+
+  const content = data.choices?.[0]?.message?.content;
+  if (!content) {
+    throw new Error("Empty response from AI provider");
+  }
+  return content;
+}
+
+async function callCursorSidecar({ sidecarUrl, messages, context }) {
+  const url = `${sidecarUrl.replace(/\/$/, "")}/chat`;
+  const response = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ messages, context }),
+  });
+
+  const data = await response.json();
+  if (!response.ok) {
+    throw new Error(data.error || `Cursor agent failed (${response.status})`);
+  }
+  return data.content || data.message || "";
+}
+
+export function getAiEnvConfig(env = process.env) {
+  const provider = env.VIBE_AI_PROVIDER || "openai";
+  return {
+    provider,
+    apiKey: env.VIBE_AI_API_KEY || "",
+    baseUrl: env.VIBE_AI_BASE_URL || "https://api.openai.com/v1",
+    model: env.VIBE_AI_MODEL || "gpt-4o-mini",
+    cursorSidecarUrl: env.VIBE_CURSOR_AGENT_URL || "http://127.0.0.1:4877",
+    configured:
+      provider === "cursor"
+        ? Boolean(env.VIBE_CURSOR_AGENT_URL || true)
+        : Boolean(env.VIBE_AI_API_KEY),
+  };
+}
+
+export function getAiPublicConfig(env = process.env) {
+  const config = getAiEnvConfig(env);
+  return {
+    provider: config.provider,
+    model: config.model,
+    configured: config.provider === "cursor" ? true : Boolean(config.apiKey),
+    cursorSidecarUrl:
+      config.provider === "cursor" ? config.cursorSidecarUrl : undefined,
+  };
+}
+
+export async function runVibeAiChat(body, env = process.env) {
+  const config = getAiEnvConfig(env);
+  const { messages = [], context = {} } = body;
+
+  if (!messages.length) {
+    throw new Error("messages are required");
+  }
+
+  const systemPrompt = buildSystemPrompt(context);
+  const chatMessages = [
+    { role: "system", content: systemPrompt },
+    ...messages.map((m) => ({
+      role: m.role === "assistant" ? "assistant" : "user",
+      content: m.text || m.content || "",
+    })),
+  ];
+
+  let rawContent;
+
+  if (config.provider === "cursor") {
+    try {
+      rawContent = await callCursorSidecar({
+        sidecarUrl: config.cursorSidecarUrl,
+        messages: chatMessages,
+        context,
+      });
+    } catch (err) {
+      throw new Error(
+        `${err.message}. Start the Cursor sidecar: npm run vibe:cursor-agent`
+      );
+    }
+  } else {
+    if (!config.apiKey) {
+      throw new Error(
+        "AI not configured. Set VIBE_AI_API_KEY or use VIBE_AI_PROVIDER=cursor with npm run vibe:cursor-agent."
+      );
+    }
+    rawContent = await callOpenAiCompatible({
+      apiKey: config.apiKey,
+      baseUrl: config.baseUrl,
+      model: config.model,
+      messages: chatMessages,
+    });
+  }
+
+  const parsed = normalizeAgentResult(parseAgentResponse(rawContent));
+  return {
+    ...parsed,
+    provider: config.provider,
+  };
+}
diff --git a/src/vite/vibeProjectPlugin.js b/src/vite/vibeProjectPlugin.js
new file mode 100644
index 000000000..a13da7242
--- /dev/null
+++ b/src/vite/vibeProjectPlugin.js
@@ -0,0 +1,295 @@
+import fs from "fs";
+import path from "path";
+import { resolve } from "path";
+import { loadEnv } from "vite";
+import { getAiPublicConfig, runVibeAiChat } from "./vibeAiHandler.js";
+
+const PROJECT_DIR = "src/vibe-project";
+
+function resolveSafePath(rootDir, relativePath) {
+  const normalized = path.normalize(relativePath).replace(/^(\.\.(\/|\\|$))+/, "");
+  const fullPath = resolve(rootDir, PROJECT_DIR, normalized);
+  const projectRoot = resolve(rootDir, PROJECT_DIR);
+
+  if (!fullPath.startsWith(projectRoot)) {
+    throw new Error("Invalid path");
+  }
+
+  return { fullPath, relativePath: normalized };
+}
+
+function buildTree(dirPath, relativeBase = "") {
+  const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+  const nodes = entries
+    .filter((entry) => !entry.name.startsWith("."))
+    .map((entry) => {
+      const relPath = relativeBase ? `${relativeBase}/${entry.name}` : entry.name;
+      if (entry.isDirectory()) {
+        return {
+          name: entry.name,
+          path: relPath,
+          type: "directory",
+          children: buildTree(path.join(dirPath, entry.name), relPath),
+        };
+      }
+      return {
+        name: entry.name,
+        path: relPath,
+        type: "file",
+      };
+    })
+    .sort((a, b) => {
+      if (a.type !== b.type) {
+        return a.type === "directory" ? -1 : 1;
+      }
+      return a.name.localeCompare(b.name);
+    });
+
+  return nodes;
+}
+
+function readBody(req) {
+  return new Promise((resolvePromise, reject) => {
+    const chunks = [];
+    req.on("data", (chunk) => chunks.push(chunk));
+    req.on("end", () => resolvePromise(Buffer.concat(chunks)));
+    req.on("error", reject);
+  });
+}
+
+function sendJson(res, status, data) {
+  res.statusCode = status;
+  res.setHeader("Content-Type", "application/json");
+  res.end(JSON.stringify(data));
+}
+
+export default function vibeProjectPlugin() {
+  const rootDir = process.cwd();
+  const env = loadEnv("development", rootDir, "");
+
+  return {
+    name: "vibe-project-plugin",
+    configureServer(server) {
+      server.middlewares.use(async (req, res, next) => {
+        const url = req.url?.split("?")[0];
+
+        try {
+          if (url === "/api/vibe-project/ai/config" && req.method === "GET") {
+            sendJson(res, 200, getAiPublicConfig(env));
+            return;
+          }
+
+          if (url === "/api/vibe-project/ai/chat" && req.method === "POST") {
+            const body = JSON.parse((await readBody(req)).toString());
+            const result = await runVibeAiChat(body, env);
+            sendJson(res, 200, result);
+            return;
+          }
+
+          if (url === "/api/vibe-project/tree" && req.method === "GET") {
+            const projectPath = resolve(rootDir, PROJECT_DIR);
+            if (!fs.existsSync(projectPath)) {
+              fs.mkdirSync(projectPath, { recursive: true });
+            }
+            sendJson(res, 200, { tree: buildTree(projectPath) });
+            return;
+          }
+
+          if (url === "/api/vibe-project/file" && req.method === "GET") {
+            const params = new URL(req.url, "http://localhost").searchParams;
+            const filePath = params.get("path");
+            if (!filePath) {
+              sendJson(res, 400, { error: "path is required" });
+              return;
+            }
+            const { fullPath } = resolveSafePath(rootDir, filePath);
+            if (!fs.existsSync(fullPath) || !fs.statSync(fullPath).isFile()) {
+              sendJson(res, 404, { error: "File not found" });
+              return;
+            }
+            sendJson(res, 200, {
+              path: filePath,
+              content: fs.readFileSync(fullPath, "utf-8"),
+            });
+            return;
+          }
+
+          if (url === "/api/vibe-project/file" && req.method === "PUT") {
+            const body = await readBody(req);
+            const { path: filePath, content } = JSON.parse(body.toString());
+            if (!filePath) {
+              sendJson(res, 400, { error: "path is required" });
+              return;
+            }
+            const { fullPath } = resolveSafePath(rootDir, filePath);
+            fs.mkdirSync(path.dirname(fullPath), { recursive: true });
+            fs.writeFileSync(fullPath, content ?? "", "utf-8");
+            sendJson(res, 200, { path: filePath, saved: true });
+            return;
+          }
+
+          if (url === "/api/vibe-project/mkdir" && req.method === "POST") {
+            const body = await readBody(req);
+            const { path: dirPath } = JSON.parse(body.toString());
+            if (!dirPath) {
+              sendJson(res, 400, { error: "path is required" });
+              return;
+            }
+            const { fullPath } = resolveSafePath(rootDir, dirPath);
+            fs.mkdirSync(fullPath, { recursive: true });
+            sendJson(res, 200, { path: dirPath, created: true });
+            return;
+          }
+
+          if (url === "/api/vibe-project/file" && req.method === "DELETE") {
+            const params = new URL(req.url, "http://localhost").searchParams;
+            const filePath = params.get("path");
+            if (!filePath) {
+              sendJson(res, 400, { error: "path is required" });
+              return;
+            }
+            const { fullPath } = resolveSafePath(rootDir, filePath);
+            if (!fs.existsSync(fullPath)) {
+              sendJson(res, 404, { error: "Not found" });
+              return;
+            }
+            const stat = fs.statSync(fullPath);
+            if (stat.isDirectory()) {
+              fs.rmSync(fullPath, { recursive: true });
+            } else {
+              fs.unlinkSync(fullPath);
+            }
+            sendJson(res, 200, { path: filePath, deleted: true });
+            return;
+          }
+
+          if (url === "/api/vibe-project/move" && req.method === "POST") {
+            const body = JSON.parse((await readBody(req)).toString());
+            const { from, to } = body;
+            if (!from || !to) {
+              sendJson(res, 400, { error: "from and to are required" });
+              return;
+            }
+            const source = resolveSafePath(rootDir, from);
+            const destination = resolveSafePath(rootDir, to);
+            if (!fs.existsSync(source.fullPath)) {
+              sendJson(res, 404, { error: `Not found: ${from}` });
+              return;
+            }
+            if (fs.existsSync(destination.fullPath)) {
+              sendJson(res, 409, { error: `Already exists: ${to}` });
+              return;
+            }
+            fs.mkdirSync(path.dirname(destination.fullPath), { recursive: true });
+            fs.renameSync(source.fullPath, destination.fullPath);
+            sendJson(res, 200, { from, to, moved: true });
+            return;
+          }
+
+          if (url === "/api/vibe-project/duplicate" && req.method === "POST") {
+            const body = JSON.parse((await readBody(req)).toString());
+            const { path: sourcePath, to } = body;
+            if (!sourcePath) {
+              sendJson(res, 400, { error: "path is required" });
+              return;
+            }
+            const source = resolveSafePath(rootDir, sourcePath);
+            if (!fs.existsSync(source.fullPath)) {
+              sendJson(res, 404, { error: `Not found: ${sourcePath}` });
+              return;
+            }
+
+            let targetRelative = to;
+            if (!targetRelative) {
+              const parts = source.relativePath.split("/");
+              const fileName = parts.pop();
+              const dot = fileName.lastIndexOf(".");
+              const base = dot === -1 ? fileName : fileName.slice(0, dot);
+              const ext = dot === -1 ? "" : fileName.slice(dot);
+              targetRelative = [...parts, `${base}Copy${ext}`].join("/");
+            }
+
+            const destination = resolveSafePath(rootDir, targetRelative);
+            if (fs.existsSync(destination.fullPath)) {
+              sendJson(res, 409, { error: `Already exists: ${targetRelative}` });
+              return;
+            }
+
+            const stat = fs.statSync(source.fullPath);
+            if (stat.isDirectory()) {
+              const copyRecursive = (src, dest) => {
+                fs.mkdirSync(dest, { recursive: true });
+                fs.readdirSync(src, { withFileTypes: true }).forEach((entry) => {
+                  const srcPath = path.join(src, entry.name);
+                  const destPath = path.join(dest, entry.name);
+                  if (entry.isDirectory()) {
+                    copyRecursive(srcPath, destPath);
+                  } else {
+                    fs.copyFileSync(srcPath, destPath);
+                  }
+                });
+              };
+              copyRecursive(source.fullPath, destination.fullPath);
+            } else {
+              fs.mkdirSync(path.dirname(destination.fullPath), { recursive: true });
+              fs.copyFileSync(source.fullPath, destination.fullPath);
+            }
+
+            sendJson(res, 200, {
+              from: sourcePath,
+              path: destination.relativePath,
+              duplicated: true,
+            });
+            return;
+          }
+
+          if (url === "/api/vibe-project/import" && req.method === "POST") {
+            const body = await readBody(req);
+            const { files } = JSON.parse(body.toString());
+            if (!files || !Array.isArray(files)) {
+              sendJson(res, 400, { error: "files array is required" });
+              return;
+            }
+            files.forEach(({ path: filePath, content }) => {
+              const { fullPath } = resolveSafePath(rootDir, filePath);
+              fs.mkdirSync(path.dirname(fullPath), { recursive: true });
+              fs.writeFileSync(fullPath, content ?? "", "utf-8");
+            });
+            sendJson(res, 200, { imported: files.length });
+            return;
+          }
+
+          if (url === "/api/vibe-project/export" && req.method === "GET") {
+            const projectPath = resolve(rootDir, PROJECT_DIR);
+            const files = [];
+
+            function walk(dir, relBase = "") {
+              if (!fs.existsSync(dir)) return;
+              fs.readdirSync(dir, { withFileTypes: true }).forEach((entry) => {
+                const relPath = relBase ? `${relBase}/${entry.name}` : entry.name;
+                const full = path.join(dir, entry.name);
+                if (entry.isDirectory()) {
+                  walk(full, relPath);
+                } else {
+                  files.push({
+                    path: relPath,
+                    content: fs.readFileSync(full, "utf-8"),
+                  });
+                }
+              });
+            }
+
+            walk(projectPath);
+            sendJson(res, 200, { files });
+            return;
+          }
+        } catch (err) {
+          sendJson(res, 500, { error: err.message });
+          return;
+        }
+
+        next();
+      });
+    },
+  };
+}
diff --git a/vite.config.js b/vite.config.js
index 11d8b7fc4..2fbc7de94 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,6 +4,7 @@ import monacoEditorPlugin from "vite-plugin-monaco-editor";
 import { resolve } from "path";
 import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
 import istanbulPlugin from "vite-plugin-istanbul";
+import vibeProjectPlugin from "./src/vite/vibeProjectPlugin.js";
 
 const libraryName = "VueFormBuilder";
 const monacoLanguages = ["editorWorkerService", "typescript", "css", "json"];
@@ -14,13 +15,14 @@ export default defineConfig({
     "process.env": {}
   },
   plugins: [
+    vibeProjectPlugin(),
     vue(),
     // https://github.com/vdesjs/vite-plugin-monaco-editor/issues/21
     monacoEditorPlugin({ languageWorkers: monacoLanguages }),
     viteCommonjs(),
     istanbulPlugin({
       include: "src/**",
-      exclude: ["node_modules", "test/"],
+      exclude: ["node_modules", "test/", "src/vibe/**", "src/vibe-project/**"],
       extension: [".js", ".ts", ".vue"],
       requireEnv: true
     })
@@ -31,6 +33,10 @@ export default defineConfig({
         find: "@",
         replacement: resolve(__dirname, "src")
       },
+      {
+        find: "@vibe-project",
+        replacement: resolve(__dirname, "src/vibe-project")
+      },
       {
         find: "vue",
         replacement: resolve(__dirname, "node_modules/vue/dist/vue.esm.js")
@@ -62,7 +68,8 @@ export default defineConfig({
         "@processmaker/vue-multiselect",
         "vue-monaco",
         "monaco-editor",
-        "SharedComponents"
+        "SharedComponents",
+        /^@vibe-project\//
       ],
       output: {
         exports: "named",

From debd4ebfb54b570b6428fa13c1d59ed32cb019d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Wed, 19 Aug 2026 13:21:40 -0300
Subject: [PATCH 2/2] Added backgrounds to preview

---
 src/vibe/components/PreviewPanel.vue | 151 ++++++++++++++++++++++++++-
 1 file changed, 149 insertions(+), 2 deletions(-)

diff --git a/src/vibe/components/PreviewPanel.vue b/src/vibe/components/PreviewPanel.vue
index 55d039d48..53ca49cf4 100644
--- a/src/vibe/components/PreviewPanel.vue
+++ b/src/vibe/components/PreviewPanel.vue
@@ -62,6 +62,79 @@
             <circle cx="8" cy="12.25" r="0.75" fill="currentColor" />
           </svg>
         </button>
+
+        <span class="preview-panel__controls-divider" aria-hidden="true" />
+
+        <button
+          class="vibe-btn ghost preview-panel__device-btn"
+          :class="{ active: bgMode === 'transparency' }"
+          title="Transparency (checkerboard)"
+          aria-label="Transparency background"
+          @click="bgMode = 'transparency'"
+        >
+          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <rect x="2" y="2" width="5.5" height="5.5" fill="currentColor" opacity="0.35" />
+            <rect x="8.5" y="2" width="5.5" height="5.5" fill="currentColor" opacity="0.12" />
+            <rect x="2" y="8.5" width="5.5" height="5.5" fill="currentColor" opacity="0.12" />
+            <rect x="8.5" y="8.5" width="5.5" height="5.5" fill="currentColor" opacity="0.35" />
+            <rect
+              x="2"
+              y="2"
+              width="12"
+              height="12"
+              rx="1.25"
+              stroke="currentColor"
+              stroke-width="1.2"
+            />
+          </svg>
+        </button>
+
+        <label
+          class="preview-panel__color-btn vibe-btn ghost preview-panel__device-btn m-0"
+          :class="{ active: bgMode === 'solid' }"
+          title="Solid background"
+        >
+          <input
+            v-model="bgColor"
+            class="preview-panel__color-input"
+            type="color"
+            aria-label="Background color"
+            @focus="bgMode = 'solid'"
+            @click="bgMode = 'solid'"
+            @input="bgMode = 'solid'"
+          />
+          <span
+            class="preview-panel__color-swatch"
+            :style="{ backgroundColor: bgColor }"
+            aria-hidden="true"
+          />
+        </label>
+
+        <button
+          class="vibe-btn ghost preview-panel__device-btn"
+          :class="{ active: bgMode === 'guides' }"
+          title="Guide grid"
+          aria-label="Guide grid background"
+          @click="bgMode = 'guides'"
+        >
+          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path
+              d="M2 5.5h12M2 10.5h12M5.5 2v12M10.5 2v12"
+              stroke="currentColor"
+              stroke-width="1.15"
+              stroke-linecap="round"
+            />
+            <rect
+              x="2"
+              y="2"
+              width="12"
+              height="12"
+              rx="1.25"
+              stroke="currentColor"
+              stroke-width="1.2"
+            />
+          </svg>
+        </button>
       </div>
     </div>
 
@@ -83,8 +156,10 @@
         class="preview-panel__frame"
         :class="[
           `preview-panel__frame--${device}`,
+          `preview-panel__frame--bg-${bgMode}`,
           { 'preview-panel__frame--compiling': runState === 'compiling' },
         ]"
+        :style="frameStyle"
       >
         <div ref="previewMount" class="preview-panel__mount" />
       </div>
@@ -107,6 +182,8 @@ export default {
   data() {
     return {
       device: "desktop",
+      bgMode: "transparency",
+      bgColor: "#ffffff",
       previewInstance: null,
       removeStyles: null,
     };
@@ -118,6 +195,12 @@ export default {
     showErrorOnly() {
       return !!this.error && !this.component;
     },
+    frameStyle() {
+      if (this.bgMode === "solid") {
+        return { backgroundColor: this.bgColor };
+      }
+      return null;
+    },
   },
   watch: {
     component() {
@@ -202,9 +285,18 @@ export default {
 
 .preview-panel__controls {
   display: flex;
+  align-items: center;
   gap: 4px;
 }
 
+.preview-panel__controls-divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 4px;
+  background: var(--vibe-border-strong);
+  flex-shrink: 0;
+}
+
 .preview-panel__device-btn {
   display: inline-flex;
   align-items: center;
@@ -212,6 +304,7 @@ export default {
   width: 28px;
   height: 28px;
   padding: 0;
+  position: relative;
 }
 
 .preview-panel__device-btn svg {
@@ -220,6 +313,31 @@ export default {
   display: block;
 }
 
+.preview-panel__color-btn {
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.preview-panel__color-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+}
+
+.preview-panel__color-swatch {
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  border: 1px solid var(--vibe-border-strong);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
+  pointer-events: none;
+}
+
 .preview-panel__body {
   flex: 1;
   overflow: auto;
@@ -257,13 +375,42 @@ export default {
   min-height: 100%;
 }
 
+.preview-panel__frame--bg-transparency {
+  background-color: #ffffff;
+  background-image:
+    linear-gradient(45deg, #e5e5e5 25%, transparent 25%),
+    linear-gradient(-45deg, #e5e5e5 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e5e5e5 75%),
+    linear-gradient(-45deg, transparent 75%, #e5e5e5 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+
+.preview-panel__frame--bg-solid {
+  background-image: none;
+}
+
+.preview-panel__frame--bg-guides {
+  background-color: #ffffff;
+  background-image:
+    linear-gradient(to right, rgba(15, 38, 74, 0.08) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(15, 38, 74, 0.08) 1px, transparent 1px),
+    linear-gradient(to right, rgba(15, 38, 74, 0.16) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(15, 38, 74, 0.16) 1px, transparent 1px);
+  background-size:
+    10px 10px,
+    10px 10px,
+    100px 100px,
+    100px 100px;
+  background-position: 0 0;
+}
+
 .preview-panel__frame--mobile .preview-panel__mount {
   max-width: 375px;
   margin: 0 auto;
   border: none;
   border-radius: var(--vibe-radius-xl);
   overflow: hidden;
-  background: #fff;
   box-shadow: var(--vibe-shadow-sm);
 }
 
@@ -273,8 +420,8 @@ export default {
 }
 
 .preview-panel__mount {
-  background: #fff;
   min-height: 200px;
   border-radius: var(--vibe-radius-lg);
+  background: transparent;
 }
 </style>