@juuno-sdk/cli 1.0.5

package/README.md

@@ -0,0 +1,245 @@
+# Juuno CLI
+
+Official CLI for Juuno external app development - simulator, deployment, and tools.
+
+## What This Does
+
+The App Simulator loads your external app and displays it in a split-screen view:
+
+- **Left**: Player view (how your app appears on screens)
+- **Right**: Configuration UI (your app's settings interface)
+
+This simulates the real Juuno platform environment using import maps, just like production.
+
+## Installation
+
+```bash
+npm install --save-dev @juuno-sdk/cli
+```
+
+## Commands
+
+### Testing: App Simulator
+
+Test your app locally before deployment.
+
+```bash
+# Point to your dev server
+npx juuno-cli dev --app http://localhost:3000
+
+# Or point to a deployed URL
+npx juuno-cli dev --app https://cdn.example.com/my-app/
+```
+
+### Deployment
+
+Deploy your app to Juuno CDN.
+
+```bash
+# Deploy from default ./dist directory
+npx juuno-cli deploy
+
+# Specify build directory
+npx juuno-cli deploy --build-dir ./build
+
+# Provide API key inline (otherwise will prompt)
+npx juuno-cli deploy --api-key your-juuno-api-key
+```
+
+### npm Scripts
+
+Add to your `package.json`:
+
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test:player": "juuno-cli dev --app http://localhost:3000",
+    "deploy": "juuno-cli deploy"
+  }
+}
+```
+
+Then run:
+
+```bash
+# Terminal 1: Your app dev server
+npm run dev
+
+# Terminal 2: Simulator
+npm run test:player
+
+# Deploy to production
+npm run build
+npm run deploy
+```
+
+## How It Works
+
+1. **Your App**: Runs on your dev server (e.g., `localhost:3000`)
+2. **Simulator**: Loads at `localhost:5004`
+3. **Import Maps**: Simulator loads your app via ES module import
+4. **Live Updates**: Changes in your app reflect immediately
+
+## Requirements
+
+Your app must:
+
+- Export ES modules
+- Provide player and config components
+- Build with externalized dependencies:
+  ```js
+  // vite.config.ts
+  export default {
+    build: {
+      lib: {
+        entry: './src/index.ts',
+        formats: ['es'],
+        fileName: 'index',
+      },
+      rollupOptions: {
+        external: ['vue', '@juuno-sdk/app-sdk'],
+      },
+    },
+  };
+  ```
+
+## Development Workflow
+
+The simulator works with built app bundles to match the production architecture.
+
+**Terminal 1: Auto-rebuild your app**
+
+```bash
+cd my-juuno-app
+npm run build:watch
+# Watches for changes and rebuilds automatically
+```
+
+**Terminal 2: Serve your app bundle**
+
+```bash
+cd my-juuno-app
+npx serve dist -l 3000 --cors
+# Serves the built bundle at localhost:3000
+```
+
+**Terminal 3: Start the simulator**
+
+```bash
+npx juuno-cli dev --app http://localhost:3000/index.js
+# → localhost:5004
+```
+
+**Development Flow:**
+
+1. Edit your app's source code
+2. Auto-rebuild happens in background (100-500ms)
+3. Manually refresh browser at http://localhost:5004
+4. See changes reflected in the simulator
+
+**Note:** This workflow matches production closely (import maps + static bundles) but doesn't support HMR.
+
+## CLI Options
+
+### Simulator (dev command)
+
+```bash
+juuno-cli dev [options]
+
+Options:
+  --app <url>       URL of your external app (required)
+  --port <number>   Port for simulator (default: 5004)
+  --help            Show help
+```
+
+### Deploy Command
+
+```bash
+juuno-cli deploy [options]
+
+Options:
+  --build-dir <dir> Build directory to deploy (default: ./dist)
+  --api-key <key>   Juuno API key (will prompt if not provided)
+  --help            Show help
+```
+
+## Deployment Workflow
+
+1. **Build your app**: Run your build command to generate the dist bundle
+2. **Deploy to CDN**: Use `juuno-cli deploy` to upload your app
+3. **Get API key**: Obtain a Juuno API key from your account settings
+4. **Configure in Juuno**: Add the returned manifest URL to your Juuno account
+
+```bash
+# Complete deployment flow
+npm run build
+npx juuno-cli deploy
+
+# Follow the prompts:
+# 1. Enter your Juuno API key
+# 2. CLI uploads to S3 and returns manifest URL
+# 3. Add manifest URL to Juuno account (SDK > Custom Apps)
+```
+
+Your app will be hosted at:
+
+```
+https://[bucket].s3.[region].amazonaws.com/[account]/[app-id]/[version]/manifest.json
+```
+
+## Troubleshooting
+
+### CORS Errors
+
+If you see CORS errors, your dev server needs to enable CORS:
+
+```js
+// vite.config.ts
+export default {
+  server: {
+    cors: true,
+  },
+};
+```
+
+### Module Not Found
+
+Ensure your app exports the required components:
+
+```ts
+// src/index.ts
+export { MyAppSlide } from './MyAppSlide.vue';
+export { MyAppConfig } from './MyAppConfig.vue';
+export { defaultMeta } from './settings';
+```
+
+### Import Map Issues
+
+The simulator uses import maps to load dependencies. If you see import errors, check that your app properly externalizes `vue` and `@juuno-sdk/app-sdk`.
+
+## Example
+
+See [@juuno-sdk/app-sdk-example](../app-sdk-example) for a complete working example.
+
+## Related Packages
+
+- **@juuno-sdk/app-sdk**: SDK for building external apps
+- **@juuno-sdk/app-sdk-example**: Example external app demonstrating the workflow
+
+## Package Exports
+
+The CLI provides both programmatic and command-line interfaces:
+
+- **CLI Commands**: `juuno-cli dev`, `juuno-cli deploy`
+- **Programmatic API**: Import deployment functions for custom workflows
+
+```typescript
+import { deployApp } from '@juuno-sdk/cli';
+
+await deployApp({
+  buildDir: './dist',
+  apiKey: process.env.JUUNO_API_KEY,
+});
+```

package/bin/cli.js

@@ -0,0 +1,237 @@
+#!/usr/bin/env node
+
+import { spawn } from 'child_process';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import {
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+  copyFileSync,
+  readdirSync,
+  rmSync,
+} from 'fs';
+import { tmpdir } from 'os';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+
+// Check if first argument is a command
+const command = args[0];
+
+// Handle deploy command
+if (command === 'deploy') {
+  const { deployApp } = await import('../src/deploy/index.ts');
+
+  // Parse deploy options
+  const buildDirIndex = args.indexOf('--build-dir');
+  const apiKeyIndex = args.indexOf('--api-key');
+
+  const buildDir = buildDirIndex !== -1 ? args[buildDirIndex + 1] : './dist';
+  const apiKey = apiKeyIndex !== -1 ? args[apiKeyIndex + 1] : undefined;
+
+  await deployApp({ buildDir, apiKey });
+  process.exit(0);
+}
+
+// Handle simulator command (default behavior)
+// Remove the command from args if it was 'dev'
+if (command === 'dev') {
+  args.shift();
+}
+const appUrlIndex = args.indexOf('--app');
+const portIndex = args.indexOf('--port');
+
+if (args.includes('--help') || args.includes('-h') || command === 'help') {
+  console.log(`
+Juuno CLI - Official CLI for Juuno external app development
+
+Usage:
+  juuno-cli <command> [options]
+
+Commands:
+  dev               Launch the app simulator (default)
+  deploy            Deploy your app to Juuno CDN
+  help              Show this help message
+
+Simulator Options:
+  --app <url>       URL of your external app (required)
+  --port <number>   Port for simulator (default: 5004)
+
+Deploy Options:
+  --build-dir <dir> Build directory to deploy (default: ./dist)
+  --api-key <key>   Juuno API key (will prompt if not provided)
+
+Examples:
+  # Start simulator
+  juuno-cli dev --app http://localhost:3000
+  juuno-cli --app http://localhost:3000
+
+  # Deploy app
+  juuno-cli deploy
+  juuno-cli deploy --build-dir ./dist --api-key your-api-key
+  `);
+  process.exit(0);
+}
+
+if (appUrlIndex === -1) {
+  console.error('Error: --app parameter is required for simulator');
+  console.error('Usage: juuno-cli dev --app <url>');
+  console.error('Run with --help for more information');
+  process.exit(1);
+}
+
+const appUrl = args[appUrlIndex + 1];
+const port = portIndex !== -1 ? args[portIndex + 1] : '5004';
+
+if (!appUrl) {
+  console.error('Error: --app parameter requires a URL value');
+  process.exit(1);
+}
+
+// Path to the built dist directory
+const distPath = join(__dirname, '..', 'dist');
+
+// Create a temporary directory for the modified dist
+const tempDir = join(tmpdir(), `juuno-simulator-${Date.now()}`);
+mkdirSync(tempDir, { recursive: true });
+
+// Copy all files from dist to temp directory
+function copyDir(src, dest) {
+  const entries = readdirSync(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      mkdirSync(destPath, { recursive: true });
+      copyDir(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+copyDir(distPath, tempDir);
+
+// Inject the app URL and import map CDN URLs into index.html
+const indexPath = join(tempDir, 'index.html');
+let indexHtml = readFileSync(indexPath, 'utf-8');
+
+// Fill in the import map with CDN URLs for vue and @juuno-sdk/app-sdk
+indexHtml = indexHtml.replace(
+  '"vue": ""',
+  '"vue": "https://cdn.jsdelivr.net/npm/vue@3.5.22/dist/vue.esm-browser.prod.js"',
+);
+indexHtml = indexHtml.replace(
+  '"@juuno-sdk/app-sdk": ""',
+  '"@juuno-sdk/app-sdk": "https://cdn.jsdelivr.net/npm/@juuno-sdk/app-sdk@1.0.2/dist/index.js"',
+);
+
+// Fill in CDN URLs for externalized dependencies from the SDK
+indexHtml = indexHtml.replace(
+  '"@vueuse/core": ""',
+  '"@vueuse/core": "https://cdn.jsdelivr.net/npm/@vueuse/core@11.4.1/index.mjs"',
+);
+indexHtml = indexHtml.replace(
+  '"@tiptap/vue-3": ""',
+  '"@tiptap/vue-3": "https://cdn.jsdelivr.net/npm/@tiptap/vue-3@2.10.5/dist/index.js"',
+);
+indexHtml = indexHtml.replace(
+  '"@tiptap/starter-kit": ""',
+  '"@tiptap/starter-kit": "https://cdn.jsdelivr.net/npm/@tiptap/starter-kit@2.10.5/dist/index.js"',
+);
+indexHtml = indexHtml.replace(
+  '"@tiptap/extension-underline": ""',
+  '"@tiptap/extension-underline": "https://cdn.jsdelivr.net/npm/@tiptap/extension-underline@2.10.5/dist/index.js"',
+);
+indexHtml = indexHtml.replace(
+  '"lodash-es": ""',
+  '"lodash-es": "https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.js"',
+);
+indexHtml = indexHtml.replace(
+  '"date-fns": ""',
+  '"date-fns": "https://cdn.jsdelivr.net/npm/date-fns@4.1.0/index.mjs"',
+);
+indexHtml = indexHtml.replace(
+  '"url-parse": ""',
+  '"url-parse": "https://cdn.jsdelivr.net/npm/url-parse@1.5.10/dist/url-parse.min.js"',
+);
+
+// Fill in the import map with external app entrypoints
+indexHtml = indexHtml.replace(
+  '"external-app/player": ""',
+  `"external-app/player": "${appUrl}/player/index.js"`,
+);
+indexHtml = indexHtml.replace(
+  '"external-app/config": ""',
+  `"external-app/config": "${appUrl}/config/index.js"`,
+);
+
+// Inject the app URL as a global variable before any scripts load
+const injection = `
+<script>
+  window.__JUUNO_EXTERNAL_APP_URL__ = '${appUrl}';
+</script>
+`;
+
+indexHtml = indexHtml.replace('</head>', `${injection}</head>`);
+writeFileSync(indexPath, indexHtml);
+
+console.log(`
+🚀 Juuno App Simulator Starting...
+
+  External App: ${appUrl}
+  Simulator URL: http://localhost:${port}
+
+  Press Ctrl+C to stop
+`);
+
+// Serve the modified temp directory
+const server = spawn(
+  'npx',
+  ['sirv-cli', tempDir, '--port', port, '--cors', '--single'],
+  {
+    stdio: 'inherit',
+    shell: true,
+  },
+);
+
+server.on('error', (err) => {
+  console.error('Failed to start server:', err);
+  process.exit(1);
+});
+
+server.on('exit', (code) => {
+  if (code !== 0) {
+    console.error(`Server exited with code ${code}`);
+  }
+  process.exit(code);
+});
+
+// Cleanup function
+function cleanup() {
+  try {
+    rmSync(tempDir, { recursive: true, force: true });
+  } catch (err) {
+    // Ignore cleanup errors
+  }
+}
+
+// Handle termination
+process.on('SIGINT', () => {
+  console.log('\n\n👋 Stopping simulator...');
+  server.kill();
+  cleanup();
+  process.exit(0);
+});
+
+process.on('SIGTERM', () => {
+  server.kill();
+  cleanup();
+  process.exit(0);
+});

package/dist/assets/main-BIR58A5i.css

@@ -0,0 +1 @@
+[data-v-6107adb1]{box-sizing:border-box}.juuno-cli[data-v-6107adb1]{min-height:100vh;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#f5f5f5}.header[data-v-6107adb1]{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1.5rem 2rem;box-shadow:0 2px 4px #0000001a}.header-content[data-v-6107adb1]{max-width:1600px;margin:0 auto}.header h1[data-v-6107adb1]{margin:0 0 .5rem;font-size:1.75rem;font-weight:600}.header-info[data-v-6107adb1]{display:flex;justify-content:space-between;align-items:center;gap:1rem}.app-url[data-v-6107adb1]{font-size:.875rem;opacity:.9;font-family:Courier New,monospace}.loading-state[data-v-6107adb1],.error-state[data-v-6107adb1]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center}.spinner[data-v-6107adb1]{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin-6107adb1 1s linear infinite}@keyframes spin-6107adb1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.url-info[data-v-6107adb1]{margin-top:1rem;font-size:.875rem;color:#666;font-family:Courier New,monospace}.error-icon[data-v-6107adb1]{font-size:4rem;margin-bottom:1rem}.error-message[data-v-6107adb1]{color:#d32f2f;font-weight:500;margin:1rem 0}.error-details[data-v-6107adb1]{background:#fff;border-radius:8px;padding:1.5rem;margin-top:2rem;text-align:left;max-width:600px}.error-details ul[data-v-6107adb1]{margin:.5rem 0 0 1.5rem;padding:0}.error-details li[data-v-6107adb1]{margin:.25rem 0}.container[data-v-6107adb1]{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2rem;max-width:1600px;margin:0 auto;width:100%}.player-section[data-v-6107adb1],.config-section[data-v-6107adb1]{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 1px 3px #0000001a}.player-section h2[data-v-6107adb1],.config-section h2[data-v-6107adb1]{margin:0 0 1rem;font-size:1.25rem;font-weight:600;color:#333}.player-preview[data-v-6107adb1]{aspect-ratio:16 / 9;background:#000;border-radius:4px;overflow:hidden;box-shadow:0 4px 6px #0000001a}.config-panel[data-v-6107adb1]{background:#fafafa;border-radius:4px;padding:1rem;min-height:400px}.placeholder[data-v-6107adb1]{display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-style:italic}.footer[data-v-6107adb1]{background:#fff;padding:1.5rem;text-align:center;border-top:1px solid #e0e0e0;color:#666;font-size:.875rem}.footer p[data-v-6107adb1]{margin:0}@media (max-width: 1200px){.container[data-v-6107adb1]{grid-template-columns:1fr}}

package/dist/assets/main-BYDwbwR9.js

@@ -0,0 +1 @@
+import{defineComponent as P,ref as g,shallowRef as y,reactive as k,onMounted as S,createElementBlock as f,openBlock as d,createElementVNode as o,toDisplayString as _,createTextVNode as h,createBlock as E,resolveDynamicComponent as C,createApp as O}from"vue";import{provideAppConfigContext as b}from"@juuno-sdk/app-sdk";(function(){const a=document.createElement("link").relList;if(a&&a.supports&&a.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))c(t);new MutationObserver(t=>{for(const r of t)if(r.type==="childList")for(const l of r.addedNodes)l.tagName==="LINK"&&l.rel==="modulepreload"&&c(l)}).observe(document,{childList:!0,subtree:!0});function i(t){const r={};return t.integrity&&(r.integrity=t.integrity),t.referrerPolicy&&(r.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?r.credentials="include":t.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function c(t){if(t.ep)return;t.ep=!0;const r=i(t);fetch(t.href,r)}})();const I="modulepreload",R=function(p){return"/"+p},L={},x=function(a,i,c){let t=Promise.resolve();if(i&&i.length>0){let l=function(n){return Promise.all(n.map(e=>Promise.resolve(e).then(m=>({status:"fulfilled",value:m}),m=>({status:"rejected",reason:m}))))};document.getElementsByTagName("link");const s=document.querySelector("meta[property=csp-nonce]"),v=(s==null?void 0:s.nonce)||(s==null?void 0:s.getAttribute("nonce"));t=l(i.map(n=>{if(n=R(n),n in L)return;L[n]=!0;const e=n.endsWith(".css"),m=e?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${n}"]${m}`))return;const u=document.createElement("link");if(u.rel=e?"stylesheet":I,e||(u.as="script"),u.crossOrigin="",u.href=n,v&&u.setAttribute("nonce",v),document.head.appendChild(u),e)return new Promise((w,A)=>{u.addEventListener("load",w),u.addEventListener("error",()=>A(new Error(`Unable to preload CSS for ${n}`)))})}))}function r(l){const s=new Event("vite:preloadError",{cancelable:!0});if(s.payload=l,window.dispatchEvent(s),!s.defaultPrevented)throw l}return t.then(l=>{for(const s of l||[])s.status==="rejected"&&r(s.reason);return a().catch(r)})},U={class:"juuno-cli"},N={class:"header"},T={class:"header-content"},j={class:"header-info"},V={class:"app-url"},q={key:0,class:"loading-state"},B={class:"url-info"},D={key:1,class:"error-state"},F={class:"error-message"},J={class:"error-details"},$={key:2,class:"container"},M={class:"player-section"},K={class:"player-preview"},W={key:1,class:"placeholder"},X={class:"config-section"},z={class:"config-panel"},G={key:1,class:"placeholder"},H={name:"JuunoCLI"},Q=P({...H,setup(p){const a=g(window.__JUUNO_EXTERNAL_APP_URL__||"http://localhost:5002/index.js"),i=y(null),c=y(null),t=g(!0),r=g(null),l=k({idx:"simulator-scene-1",name:"Simulator Test Scene",app:null,meta:{title:"Test App",backgroundColor:"#2c3e50",textColor:"#ecf0f1"},mediaAssets:[]}),v=b({async save(n){console.log("Simulator: Scene updated",n),Object.assign(l,n)}},{scene:l});return S(async()=>{try{t.value=!0,r.value=null,console.log(`Loading external app from: ${a.value}`);const n=await x(()=>import("external-app/player"),[]);if(i.value=n.default,!i.value)throw new Error("External app must export a default component from /player");try{const e=await x(()=>import("external-app/config"),[]);c.value=e.default||null}catch(e){console.warn("Config component not found or failed to load:",e),c.value=null}v.load(l),console.log("✅ External app loaded successfully"),t.value=!1}catch(n){console.error("Failed to load external app:",n),r.value=n instanceof Error?n.message:"Failed to load external app",t.value=!1}}),(n,e)=>(d(),f("div",U,[o("header",N,[o("div",T,[e[0]||(e[0]=o("h1",null,"Juuno CLI",-1)),o("div",j,[o("span",V,_(a.value),1)])])]),t.value?(d(),f("div",q,[e[1]||(e[1]=o("div",{class:"spinner"},null,-1)),e[2]||(e[2]=o("p",null,"Loading external app...",-1)),o("p",B,_(a.value),1)])):r.value?(d(),f("div",D,[e[6]||(e[6]=o("div",{class:"error-icon"},"⚠️",-1)),e[7]||(e[7]=o("h2",null,"Failed to Load App",-1)),o("p",F,_(r.value),1),o("div",J,[o("p",null,[e[3]||(e[3]=o("strong",null,"App URL:",-1)),h(" "+_(a.value),1)]),e[4]||(e[4]=o("p",null,[o("strong",null,"Common Issues:")],-1)),e[5]||(e[5]=o("ul",null,[o("li",null,"App dev server not running"),o("li",null,"CORS not enabled on app dev server"),o("li",null," App doesn't export required components from /player and /config "),o("li",null,"Incorrect URL provided"),o("li",null,"Missing exports field in package.json")],-1))])])):(d(),f("div",$,[o("div",M,[e[8]||(e[8]=o("h2",null,"Player View",-1)),o("div",K,[i.value?(d(),E(C(i.value),{key:0,scene:l},null,8,["scene"])):(d(),f("div",W,"No player component found"))])]),o("div",X,[e[9]||(e[9]=o("h2",null,"Configuration UI",-1)),o("div",z,[c.value?(d(),E(C(c.value),{key:0})):(d(),f("div",G,"No config component found"))])])])),e[10]||(e[10]=o("footer",{class:"footer"},[o("p",null,[o("strong",null,"Juuno CLI"),h(" - Test your external app in a production-like environment ")])],-1))]))}}),Y=(p,a)=>{const i=p.__vccOpts||p;for(const[c,t]of a)i[c]=t;return i},Z=Y(Q,[["__scopeId","data-v-6107adb1"]]),ee=O(Z);ee.mount("#app");

package/dist/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Juuno App Simulator</title>
+<script type="importmap">
+{
+  "imports": {
+  "vue": "",
+  "@vueuse/core": "",
+  "@tiptap/vue-3": "",
+  "@tiptap/starter-kit": "",
+  "@tiptap/extension-underline": "",
+  "lodash-es": "",
+  "date-fns": "",
+  "url-parse": "",
+  "@juuno-sdk/app-sdk": "",
+  "external-app/player": "",
+  "external-app/config": ""
+}
+}
+</script>
+    <script type="module" crossorigin src="/assets/main-BYDwbwR9.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/main-BIR58A5i.css">
+  
+
+</head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@juuno-sdk/cli",
+  "version": "1.0.5",
+  "description": "Official CLI for Juuno external app development - simulator, deployment, and tools",
+  "private": false,
+  "type": "module",
+  "bin": {
+    "juuno-cli": "./bin/cli.js"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "type-check": "vue-tsc --project tsconfig.build.json --noEmit --composite false"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.709.0",
+    "@juuno-sdk/app-sdk": "^1.0.2",
+    "commander": "^12.1.0",
+    "inquirer": "^11.2.0",
+    "mime-types": "^2.1.35",
+    "sirv-cli": "^2.0.2"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.22"
+  },
+  "devDependencies": {
+    "@juuno/service-vitejs-plugins": "workspace:*",
+    "@tsconfig/node22": "^22.0.2",
+    "@types/node": "^22.15.30",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vue": "^3.5.22",
+    "vue-tsc": "^2.2.10"
+  },
+  "keywords": [
+    "juuno",
+    "app",
+    "simulator",
+    "testing",
+    "digital-signage"
+  ],
+  "author": "Juuno",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
+}

package/src/App.vue

@@ -0,0 +1,350 @@
+<script lang="ts">
+/**
+ * Juuno CLI Development Tool.
+ *
+ * Loads external apps and displays them in a split-screen view.
+ */
+export default {
+  name: 'JuunoCLI',
+};
+</script>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, shallowRef } from 'vue';
+import type { Component } from 'vue';
+import type { Scene } from '@juuno-sdk/app-sdk';
+import { provideAppConfigContext } from '@juuno-sdk/app-sdk';
+
+// Get external app URL from Vite define or fallback to default.
+const externalAppUrl = ref(
+  (window as any).__JUUNO_EXTERNAL_APP_URL__ ||
+    'http://localhost:5002/index.js',
+);
+
+// Dynamically loaded components from external app (use shallowRef to avoid reactive overhead)
+const PlayerComponent = shallowRef<Component | null>(null);
+const ConfigComponent = shallowRef<Component | null>(null);
+const isLoading = ref(true);
+const error = ref<string | null>(null);
+
+// Create scene (matching production pattern)
+const scene = reactive({
+  idx: 'simulator-scene-1',
+  name: 'Simulator Test Scene',
+  app: null,
+  meta: {
+    title: 'Test App',
+    backgroundColor: '#2c3e50',
+    textColor: '#ecf0f1',
+  },
+  mediaAssets: [],
+}) as Scene;
+
+// Create mock service for saving scene data
+const mockService = {
+  async save(updatedScene: Scene) {
+    console.log('Simulator: Scene updated', updatedScene);
+    // Sync changes back to the original scene object
+    Object.assign(scene, updatedScene);
+  },
+};
+
+// Provide context using production pattern (matches SceneAppConfig.vue)
+// NOTE: Passing original scene directly for live-sync - config changes immediately
+// reflect in player. Production clones the scene for draft/commit workflow.
+const appConfigContext = provideAppConfigContext(mockService, {
+  scene: scene,
+});
+
+// Load external app components
+onMounted(async () => {
+  try {
+    isLoading.value = true;
+    error.value = null;
+
+    console.log(`Loading external app from: ${externalAppUrl.value}`);
+
+    // Load player component from import map
+    const playerModule = await import('external-app/player');
+    PlayerComponent.value = playerModule.default;
+
+    if (!PlayerComponent.value) {
+      throw new Error(
+        'External app must export a default component from /player',
+      );
+    }
+
+    // Load config component from import map (optional)
+    try {
+      const configModule = await import('external-app/config');
+      ConfigComponent.value = configModule.default || null;
+    } catch (configErr) {
+      console.warn('Config component not found or failed to load:', configErr);
+      ConfigComponent.value = null;
+    }
+
+    // Load the scene into the app config context
+    appConfigContext.load(scene);
+
+    console.log('✅ External app loaded successfully');
+    isLoading.value = false;
+  } catch (err) {
+    console.error('Failed to load external app:', err);
+    error.value =
+      err instanceof Error ? err.message : 'Failed to load external app';
+    isLoading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div class="juuno-cli">
+    <header class="header">
+      <div class="header-content">
+        <h1>Juuno CLI</h1>
+        <div class="header-info">
+          <span class="app-url">{{ externalAppUrl }}</span>
+        </div>
+      </div>
+    </header>
+
+    <div v-if="isLoading" class="loading-state">
+      <div class="spinner"></div>
+      <p>Loading external app...</p>
+      <p class="url-info">{{ externalAppUrl }}</p>
+    </div>
+
+    <div v-else-if="error" class="error-state">
+      <div class="error-icon">⚠️</div>
+      <h2>Failed to Load App</h2>
+      <p class="error-message">{{ error }}</p>
+      <div class="error-details">
+        <p><strong>App URL:</strong> {{ externalAppUrl }}</p>
+        <p><strong>Common Issues:</strong></p>
+        <ul>
+          <li>App dev server not running</li>
+          <li>CORS not enabled on app dev server</li>
+          <li>
+            App doesn't export required components from /player and /config
+          </li>
+          <li>Incorrect URL provided</li>
+          <li>Missing exports field in package.json</li>
+        </ul>
+      </div>
+    </div>
+
+    <div v-else class="container">
+      <!-- Player View -->
+      <div class="player-section">
+        <h2>Player View</h2>
+        <div class="player-preview">
+          <component
+            :is="PlayerComponent"
+            v-if="PlayerComponent"
+            :scene="scene"
+          />
+          <div v-else class="placeholder">No player component found</div>
+        </div>
+      </div>
+
+      <!-- Config View -->
+      <div class="config-section">
+        <h2>Configuration UI</h2>
+        <div class="config-panel">
+          <component :is="ConfigComponent" v-if="ConfigComponent" />
+          <div v-else class="placeholder">No config component found</div>
+        </div>
+      </div>
+    </div>
+
+    <footer class="footer">
+      <p>
+        <strong>Juuno CLI</strong> - Test your external app in a
+        production-like environment
+      </p>
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+* {
+  box-sizing: border-box;
+}
+
+.juuno-cli {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, sans-serif;
+  background-color: #f5f5f5;
+}
+
+.header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 1.5rem 2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-content {
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+.header h1 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.75rem;
+  font-weight: 600;
+}
+
+.header-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.app-url {
+  font-size: 0.875rem;
+  opacity: 0.9;
+  font-family: 'Courier New', monospace;
+}
+
+.loading-state,
+.error-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  text-align: center;
+}
+
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #667eea;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.url-info {
+  margin-top: 1rem;
+  font-size: 0.875rem;
+  color: #666;
+  font-family: 'Courier New', monospace;
+}
+
+.error-icon {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+}
+
+.error-message {
+  color: #d32f2f;
+  font-weight: 500;
+  margin: 1rem 0;
+}
+
+.error-details {
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-top: 2rem;
+  text-align: left;
+  max-width: 600px;
+}
+
+.error-details ul {
+  margin: 0.5rem 0 0 1.5rem;
+  padding: 0;
+}
+
+.error-details li {
+  margin: 0.25rem 0;
+}
+
+.container {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  padding: 2rem;
+  max-width: 1600px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.player-section,
+.config-section {
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.player-section h2,
+.config-section h2 {
+  margin: 0 0 1rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.player-preview {
+  aspect-ratio: 16 / 9;
+  background: #000;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.config-panel {
+  background: #fafafa;
+  border-radius: 4px;
+  padding: 1rem;
+  min-height: 400px;
+}
+
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #999;
+  font-style: italic;
+}
+
+.footer {
+  background: white;
+  padding: 1.5rem;
+  text-align: center;
+  border-top: 1px solid #e0e0e0;
+  color: #666;
+  font-size: 0.875rem;
+}
+
+.footer p {
+  margin: 0;
+}
+
+/* Responsive layout */
+@media (max-width: 1200px) {
+  .container {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/src/deploy/index.ts

@@ -0,0 +1,202 @@
+import { readFileSync, existsSync, readdirSync } from 'fs';
+import { join, basename } from 'path';
+import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
+import { lookup } from 'mime-types';
+import inquirer from 'inquirer';
+
+interface ExternalAppManifest {
+  id: string;
+  version: string;
+  name: string;
+  resources: Record<string, string[]>;
+}
+
+interface DeployOptions {
+  buildDir: string;
+  apiKey?: string;
+}
+
+interface S3Credentials {
+  s3Token: {
+    accessKeyId: string;
+    secretAccessKey: string;
+    sessionToken?: string;
+  };
+  region: string;
+  bucket: string;
+  namespace: string;
+}
+
+/**
+ * Exchange Juuno API key for temporary S3 credentials.
+ */
+async function exchangeApiKey(apiKey: string): Promise<S3Credentials> {
+  // TODO: Replace with actual backend endpoint when ready.
+  const apiUrl = process.env.JUUNO_API_URL || 'https://api.juuno.co';
+
+  try {
+    const response = await fetch(
+      `${apiUrl}/api/external-apps/auth/exchange-key`,
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ apiKey }),
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`Authentication failed: ${response.statusText}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    throw new Error(
+      `Failed to authenticate with Juuno API. The backend endpoint may not be ready yet. Error: ${error instanceof Error ? error.message : String(error)}`,
+    );
+  }
+}
+
+/**
+ * Upload a file to S3.
+ */
+async function uploadFile(
+  s3Client: S3Client,
+  bucket: string,
+  key: string,
+  filePath: string,
+): Promise<void> {
+  const fileContent = readFileSync(filePath);
+  const contentType = lookup(filePath) || 'application/octet-stream';
+
+  const command = new PutObjectCommand({
+    Bucket: bucket,
+    Key: key,
+    Body: fileContent,
+    ContentType: contentType,
+  });
+
+  await s3Client.send(command);
+}
+
+/**
+ * Deploy external app to S3.
+ */
+export async function deployApp(options: DeployOptions): Promise<void> {
+  const buildDir = options.buildDir;
+
+  // 1. Validate build directory exists.
+  if (!existsSync(buildDir)) {
+    console.error(`❌ Build directory not found: ${buildDir}`);
+    console.error('   Run your build command first (e.g., npm run build)');
+    process.exit(1);
+  }
+
+  // 2. Load and validate manifest.
+  const manifestPath = join(buildDir, 'manifest.json');
+  if (!existsSync(manifestPath)) {
+    console.error(`❌ manifest.json not found in ${buildDir}`);
+    console.error('   Your build should generate a manifest.json file');
+    process.exit(1);
+  }
+
+  const manifest: ExternalAppManifest = JSON.parse(
+    readFileSync(manifestPath, 'utf-8'),
+  );
+
+  if (!manifest.id || !manifest.version || !manifest.name) {
+    console.error(
+      '❌ Invalid manifest.json - missing required fields (id, version, name)',
+    );
+    process.exit(1);
+  }
+
+  console.log(`📦 Deploying ${manifest.name} v${manifest.version}...`);
+  console.log('');
+
+  // 3. Prompt for API key if not provided.
+  let apiKey = options.apiKey;
+  if (!apiKey) {
+    const answers = await inquirer.prompt([
+      {
+        type: 'password',
+        name: 'apiKey',
+        message: 'Enter your Juuno API key:',
+        validate: (input: string) => {
+          if (!input || input.trim().length === 0) {
+            return 'API key is required';
+          }
+          return true;
+        },
+      },
+    ]);
+    apiKey = answers.apiKey;
+  }
+
+  // 4. Exchange API key for S3 credentials.
+  console.log('🔑 Authenticating...');
+  let credentials: S3Credentials;
+  try {
+    credentials = await exchangeApiKey(apiKey);
+    console.log(`✓ Authenticated as account: ${credentials.namespace}`);
+    console.log('');
+  } catch (error) {
+    console.error(
+      `❌ ${error instanceof Error ? error.message : String(error)}`,
+    );
+    process.exit(1);
+  }
+
+  // 5. Create S3 client with temporary credentials.
+  const s3Client = new S3Client({
+    region: credentials.region,
+    credentials: {
+      accessKeyId: credentials.s3Token.accessKeyId,
+      secretAccessKey: credentials.s3Token.secretAccessKey,
+      ...(credentials.s3Token.sessionToken && {
+        sessionToken: credentials.s3Token.sessionToken,
+      }),
+    },
+  });
+
+  // 6. Upload all files from build directory.
+  const s3Path = `${credentials.namespace}/${manifest.id}/${manifest.version}`;
+  const files = readdirSync(buildDir).filter((file) =>
+    existsSync(join(buildDir, file)),
+  );
+
+  console.log(`☁️  Uploading to s3://${credentials.bucket}/${s3Path}/`);
+  console.log('');
+
+  for (const file of files) {
+    const filePath = join(buildDir, file);
+    const s3Key = `${s3Path}/${file}`;
+
+    process.stdout.write(`   Uploading ${file}... `);
+
+    try {
+      await uploadFile(s3Client, credentials.bucket, s3Key, filePath);
+      process.stdout.write('✓\n');
+    } catch (error) {
+      process.stdout.write('✗\n');
+      console.error(
+        `   Error: ${error instanceof Error ? error.message : String(error)}`,
+      );
+      process.exit(1);
+    }
+  }
+
+  // 7. Generate manifest URL and display success message.
+  const manifestUrl = `https://${credentials.bucket}.s3.${credentials.region}.amazonaws.com/${s3Path}/manifest.json`;
+
+  console.log('');
+  console.log('✅ Deployment successful!');
+  console.log('');
+  console.log('📋 Manifest URL:');
+  console.log(`   ${manifestUrl}`);
+  console.log('');
+  console.log('→ Next steps:');
+  console.log('   1. Go to your Juuno account');
+  console.log('   2. Navigate to SDK > Custom Apps');
+  console.log('   3. Add a new custom app with the manifest URL above');
+  console.log('');
+}

package/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+const app = createApp(App);
+app.mount('#app');