@telepat/rilo 0.1.0 → 0.1.7

package/frontend/dist/assets/index-Wcsyfv3q.css

@@ -0,0 +1 @@
+:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:15px;--bg: #0d1117;--bg-card: #161b22;--bg-elevated: #1c2330;--border: #30363d;--border-subtle: #21262d;--text: #e6edf3;--text-muted: #7d8590;--text-subtle: #484f58;--accent: #ff4e00;--accent-hover: #ff7a00;--green: #3fb950;--yellow: #d29922;--orange: #db6d28;--red: #f85149;--flame: #ff4e00;--flame-mid: #ff7a00;--flame-yellow: #ffcc00;--sidebar-w: 260px;background:var(--bg);color:var(--text)}*,*:before,*:after{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden;background:var(--bg)}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}p,h2,h3{margin:0}textarea,input{border:1px solid var(--border);border-radius:8px;padding:.55rem .75rem;background:var(--bg);color:var(--text);width:100%;resize:vertical;transition:border-color .15s}textarea:focus,input:focus{outline:none;border-color:var(--accent)}.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100dvh;overflow:hidden}.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--bg-card);overflow:hidden}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1rem;border-bottom:1px solid var(--border-subtle);flex-shrink:0}.brand-wordmark{font-size:1.1rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--text);flex-shrink:0}.sidebar-section{flex:1;display:flex;flex-direction:column;gap:.65rem;padding:.9rem;overflow:hidden}.sidebar-row{display:flex;align-items:center;justify-content:space-between}.sidebar-section-title{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.project-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;min-height:0}.project-item{width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:6px;padding:.55rem .75rem;font-size:.88rem;color:var(--text-muted);transition:background .1s,color .1s,border-color .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-item:hover{background:var(--bg-elevated);color:var(--text)}.project-item-active{background:var(--bg-elevated);border-color:var(--border);border-left-color:var(--accent);color:var(--text);font-weight:500}.sidebar-footer{padding:.6rem .75rem;border-top:1px solid var(--border-subtle);flex-shrink:0}.main-area{display:flex;flex-direction:column;overflow:hidden}.project-header{flex-shrink:0;background:var(--bg-card);border-bottom:1px solid var(--border);padding:1rem 1.5rem 0;display:flex;flex-direction:column;gap:.75rem;z-index:10}.project-header-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.project-title-row{display:flex;align-items:center;gap:.6rem;min-width:0}.project-name{font-size:1.05rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;flex-shrink:0}.step-dots{display:flex;gap:0;align-items:center;overflow-x:auto;padding-bottom:.15rem}.dot{display:flex;align-items:center;gap:.35rem;font-size:.75rem;padding:.2rem .65rem;border-radius:20px;transition:background .2s;white-space:nowrap;flex-shrink:0}.dot:before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0}.dot-done{color:var(--green)}.dot-done:before{background:var(--green)}.dot-running{color:var(--yellow);animation:pulse 1.2s ease-in-out infinite}.dot-running:before{background:var(--yellow)}.dot-idle{color:var(--text-muted)}.dot-idle:before{background:var(--border)}.dot-label{font-weight:500}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}.tab-spacer{flex:1}.analytics-pane{gap:1.25rem}.analytics-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}@media(max-width:800px){.analytics-summary{grid-template-columns:repeat(2,1fr)}}.analytics-stat-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:10px;padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:.4rem}.stat-value{font-size:1.5rem;font-weight:600;color:var(--text);line-height:1}.stat-label{font-size:.78rem;color:var(--text-muted)}.stat-ok{color:var(--green)}.stat-fail{color:var(--red)}.analytics-empty{margin-top:.25rem}.analytics-error{color:var(--red)}.analytics-runs{display:flex;flex-direction:column;gap:.35rem}.analytics-runs-title{font-size:.78rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.run-row{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;overflow:hidden}.run-row-header{display:flex;align-items:center;gap:.75rem;width:100%;background:transparent;border:none;padding:.8rem 1rem;text-align:left;cursor:pointer;transition:background .12s}.run-row-header:hover{background:var(--bg-elevated)}.run-badge{font-size:.72rem;font-weight:600;padding:.15em .55em;border-radius:6px;flex-shrink:0}.run-badge-ok{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}.run-badge-fail{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}.run-badge-running{background:color-mix(in srgb,var(--yellow) 15%,transparent);color:var(--yellow)}.run-row-date{font-size:.82rem;color:var(--text);flex:1}.run-row-meta{font-size:.82rem;color:var(--text-muted);flex-shrink:0}.run-row-cost{min-width:5rem;text-align:right}.run-row-chevron{font-size:.65rem;color:var(--text-subtle);flex-shrink:0}.run-stages{border-top:1px solid var(--border-subtle);padding:.75rem 1rem 1rem}.stages-table{width:100%;border-collapse:collapse;font-size:.82rem}.stages-table th{text-align:left;color:var(--text-muted);font-weight:500;padding:.2rem .6rem .4rem;border-bottom:1px solid var(--border-subtle)}.stages-table td{padding:.3rem .6rem;color:var(--text)}.stage-name-cell{display:flex;align-items:center;gap:.45rem}.stage-status-cell{color:var(--text-muted)}.stage-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}.stage-dot-ok{background:var(--green)}.stage-dot-reused{background:var(--accent)}.stage-dot-fail{background:var(--red)}.stage-dot-running{background:var(--yellow)}.stage-dot-idle{background:var(--border)}.stage-row-pending td{color:var(--text-subtle)}.tab-bar{display:flex;gap:0;border-bottom:none;margin:0 -1.5rem;padding:0 1.5rem;overflow-x:auto}.tab{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;padding:.7rem 1rem;font-size:.88rem;font-weight:500;color:var(--text-muted);transition:color .15s,border-color .15s;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:.4rem}.tab:hover{color:var(--text)}.tab-active{color:var(--text);border-bottom-color:var(--accent)}.tab-count{font-size:.72rem;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:10px;padding:.05em .45em;color:var(--text-muted);font-weight:500;min-width:1.4em;text-align:center}.tab-content{flex:1;overflow-y:auto;padding:1.5rem}.tab-pane{display:flex;flex-direction:column;gap:2rem}.config-inner-tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border-subtle);margin-bottom:1.5rem;overflow-x:auto}.config-inner-tab{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;padding:.45rem .85rem;font-size:.82rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap;margin-bottom:-1px}.config-inner-tab:hover{color:var(--text)}.config-inner-tab-active{color:var(--text);border-bottom-color:var(--accent)}.btn{background:var(--bg-elevated);border:1px solid var(--border);border-radius:6px;padding:.45rem .9rem;font-size:.88rem;font-weight:500;color:var(--text);transition:background .15s,border-color .15s,opacity .15s;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}.btn:hover:not(:disabled){background:#2d3748;border-color:#4a5568}.btn:disabled{opacity:.45;cursor:default}.btn-sm{padding:.3rem .65rem;font-size:.8rem}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn-secondary{background:color-mix(in srgb,var(--accent) 12%,var(--bg-elevated));border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent-hover)}.btn-secondary:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 22%,var(--bg-elevated))}.btn-ghost{background:transparent;border-color:transparent}.btn-ghost:hover:not(:disabled){background:var(--bg-elevated);border-color:var(--border)}.btn-danger{color:var(--red)}.btn-danger:hover:not(:disabled){border-color:var(--red)}.full-width{width:100%;justify-content:center}.badge{font-size:.72rem;font-weight:600;padding:.15em .55em;border-radius:10px;border:1px solid currentColor;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}.badge-ok{color:var(--green)}.badge-running{color:var(--yellow);animation:pulse 1.2s ease-in-out infinite}.badge-pending{color:var(--orange)}.badge-fail{color:var(--red)}.badge-paused{color:var(--yellow)}.pause-banner{font-size:.82rem;color:var(--yellow);background:color-mix(in srgb,var(--yellow) 10%,transparent);border:1px solid color-mix(in srgb,var(--yellow) 30%,transparent);border-radius:6px;padding:.5rem .75rem;margin-bottom:.5rem}.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes toast-in{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}.toast-popup{position:fixed;bottom:1.25rem;right:1.25rem;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-width:240px;max-width:400px;padding:.65rem .9rem;border-radius:10px;font-size:.84rem;background:var(--bg-elevated);border:1px solid var(--border);box-shadow:0 8px 32px #00000059;animation:toast-in .18s ease-out}.toast-ok{border-left:3px solid var(--green)}.toast-error{border-left:3px solid var(--red)}.toast-close{background:transparent;border:none;padding:0 .2rem;color:var(--text-muted);font-size:.8rem;flex-shrink:0;cursor:pointer}.toast-close:hover{color:var(--text)}.modal-overlay{position:fixed;inset:0;background:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.modal-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;width:100%;max-width:540px;max-height:90dvh;overflow-y:auto;box-shadow:0 24px 64px #00000080;outline:none}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.15rem 1.5rem;border-bottom:1px solid var(--border-subtle)}.modal-title{font-size:1rem;font-weight:600}.modal-close{background:transparent;border:none;font-size:1rem;color:var(--text-muted);padding:.15rem .35rem;border-radius:4px}.modal-close:hover{color:var(--text);background:var(--bg-elevated)}.modal-body{padding:1.5rem}.modal-form{display:flex;flex-direction:column;gap:1rem}.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.25rem}.field{display:flex;flex-direction:column;gap:.5rem}.field-label{font-size:.82rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.field-hint{font-size:.78rem;color:var(--text-muted);font-weight:400;text-transform:none;letter-spacing:0}.editor-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.editor-grid .full-width{grid-column:1 / -1}.save-row{display:flex;align-items:center;gap:.75rem}.output-actions-row{margin-top:.75rem;display:flex;gap:.5rem;flex-wrap:wrap}.config-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.config-item{border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-card);padding:.7rem .8rem;display:flex;flex-direction:column;gap:.3rem}.config-key{font-size:.74rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.config-value{font-size:.95rem;color:var(--text);font-weight:500;word-break:break-word}.config-json{margin:0;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-card);padding:.85rem;overflow:auto;font-size:.8rem;line-height:1.45;color:var(--text)}.config-form{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.config-form-fields{display:flex;flex-direction:column;gap:1rem}.config-group{border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--bg-elevated) 65%,transparent);padding:1rem 1.15rem}.config-group-header{margin-bottom:.9rem}.config-group-title{margin:0;font-size:.86rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text)}.config-group-note{margin:.2rem 0 0}.config-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.config-form-field{display:flex;flex-direction:column;gap:.35rem}.config-form-field:has(input[type=checkbox]){flex-direction:row;align-items:center;gap:.5rem}.config-form-field:has(input[type=checkbox]) input[type=checkbox]{width:1rem;height:1rem;flex-shrink:0;cursor:pointer;order:-1}.config-form-field--readonly{justify-content:flex-end;padding:.4rem 0 .1rem}.config-form-label{font-size:.74rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.config-form-optional{font-weight:400;text-transform:none;letter-spacing:0;opacity:.7}.config-select,.config-input{background:var(--bg-elevated);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.9rem;padding:.45rem .65rem;width:100%;outline:none;transition:border-color .15s;box-sizing:border-box;font-family:inherit;appearance:auto}.config-select:focus,.config-input:focus{border-color:var(--accent)}.config-form-actions{display:flex;align-items:center;gap:.75rem}.config-color-input-row{display:flex;align-items:center;gap:.5rem}.config-inline-actions{display:flex;gap:.5rem;flex-wrap:wrap}.config-color-picker{width:2.35rem;height:2.1rem;border:1px solid var(--border);border-radius:7px;padding:.1rem;background:var(--bg-elevated);cursor:pointer;flex-shrink:0}@media(max-width:860px){.config-group-grid{grid-template-columns:1fr}}.combo-box{position:relative}.combo-box-list{position:absolute;top:100%;left:0;right:0;z-index:200;margin:2px 0 0;padding:0;list-style:none;background:var(--bg-elevated);border:1px solid var(--border);border-radius:7px;box-shadow:0 4px 16px #00000040;max-height:220px;overflow-y:auto}.combo-box-option{padding:.45rem .65rem;font-size:.9rem;color:var(--text);cursor:pointer}.combo-box-option:hover,.combo-box-option--active{background:var(--accent);color:#fff}.model-config-section{border:1px solid var(--border);border-radius:10px;margin-bottom:1.5rem;overflow:hidden}.model-config-toggle{all:unset;display:flex;align-items:center;justify-content:space-between;width:100%;gap:.75rem;padding:.9rem 1.15rem;cursor:pointer;background:var(--bg-elevated);box-sizing:border-box;transition:background .15s}.model-config-toggle:hover{background:var(--bg-hover, color-mix(in srgb, var(--bg-elevated) 85%, var(--accent)))}.model-config-summary{display:flex;flex-direction:column;gap:.2rem;min-width:0}.model-config-name{font-size:.92rem;font-weight:600;color:var(--text)}.model-config-url{font-size:.78rem}a.model-config-url{color:var(--accent);text-decoration:none}a.model-config-url:hover{text-decoration:underline}.model-config-pricing{font-size:.78rem}.model-config-chevron{flex-shrink:0;font-size:.72rem;color:var(--text-muted)}.model-config-body{padding:1.15rem 1.25rem;border-top:1px solid var(--border);background:var(--bg)}.model-config-body .config-form{margin-bottom:0}.asset-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(var(--grid-col-min, 200px),1fr))}.asset-card{border:1px solid var(--border-subtle);border-radius:10px;padding:.65rem;display:flex;flex-direction:column;gap:.6rem;background:var(--bg-card)}.asset-card>.btn:last-child{margin-top:auto}.asset-index{font-size:.72rem;color:var(--text-muted);font-weight:600;padding:0 .15rem}.asset-status-row{display:flex;align-items:center;justify-content:space-between;gap:.45rem}.card-prompt{display:flex;flex-direction:column;gap:.3rem}.card-prompt-header{display:flex;align-items:center;justify-content:space-between}.card-prompt-edit-btn{padding:.1rem .35rem;font-size:.75rem;opacity:.6;flex-shrink:0}.card-prompt-edit-btn:hover:not(:disabled){opacity:1}.card-prompt-row{display:flex;align-items:flex-start;gap:.35rem}.prompt-text{font-size:.78rem;color:var(--text-muted);line-height:1.45;margin:0;flex:1}.prompt-textarea{font-size:.8rem;resize:none;overflow:hidden;min-height:3.5rem}.prompt-edit-actions{display:flex;gap:.4rem}.media-wrap{aspect-ratio:var(--ar, 9/16);width:100%;background:#000;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.media-wrap img,.media-wrap video{width:100%;height:100%;object-fit:cover;display:block}.media-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated)}.media-placeholder-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;text-align:center;padding:.65rem}.media-placeholder-title{font-size:.76rem;color:var(--text-muted);font-weight:500}.final-video-section{margin-bottom:.5rem}.final-video-wrap{margin:0 auto}.tab-content:has(.tab-pane-output){overflow:hidden;display:flex;flex-direction:column}.tab-pane-output{flex:1;min-height:0;display:flex;flex-direction:column;gap:0}.tab-pane-output .final-video-section{flex:1;min-height:0;margin-bottom:0;display:flex;flex-direction:column}.tab-pane-output .final-video-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.tab-pane-output .media-wrap{aspect-ratio:unset;height:100%;width:auto;max-width:100%}.section-label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.65rem}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;padding:3.5rem 1.5rem;text-align:center;height:100%;min-height:200px}.empty-state-title{font-size:1.15rem;font-weight:600;color:var(--text)}.empty-state-brand{font-size:clamp(1.8rem,5vw,2.4rem);font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--text);opacity:.9;margin-bottom:.5rem}.muted{color:var(--text-muted)}.size-sm{font-size:.82rem}.size-xs{font-size:.75rem}@media(max-width:900px){:root{--sidebar-w: 200px}.editor-grid{grid-template-columns:1fr}.project-header-top{gap:.5rem}}@media(max-width:640px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}body{overflow:auto}}

package/frontend/dist/favicon.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <defs>
+    <linearGradient id="flameGrad" x1="0%" y1="100%" x2="0%" y2="0%">
+      <stop offset="0%" stop-color="#ff3d00"/>
+      <stop offset="60%" stop-color="#ff7a00"/>
+      <stop offset="100%" stop-color="#ffcc00"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Rounded square background -->
+  <rect width="32" height="32" rx="7" fill="#111111"/>
+
+  <!-- Flame: main triangle, centered in 32x32, with ~4px padding -->
+  <!-- Points: tip at top-center, base spanning bottom -->
+  <polygon points="16,5 26,27 6,27" fill="#ff4e00"/>
+  <!-- Inner lighter triangle -->
+  <polygon points="16,12 22,27 10,27" fill="#ff7a00"/>
+
+</svg>

package/frontend/dist/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>Rilo</title>
+    <script type="module" crossorigin src="/assets/index-BvNWHzrr.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Wcsyfv3q.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@telepat/rilo",
-  "version": "0.1.0",
+  "version": "0.1.7",
   "license": "MIT",
   "bin": {
     "rilo": "src/cli/index.js"
   },
   "files": [
     "src/",
+    "frontend/dist/",
     "models/",
     "index.js",
     "README.md"
@@ -30,6 +31,7 @@
     "frontend:lint": "npm --prefix frontend run lint",
     "frontend:build": "npm --prefix frontend run build",
     "frontend:preview": "npm --prefix frontend run preview",
+    "prepack": "node -e \"const fs=require('node:fs'); if(!fs.existsSync('frontend/dist/index.html')) { console.error('Missing frontend build output at frontend/dist/index.html. Run npm run build before publish.'); process.exit(1); }\"",
     "docs:start": "npm --prefix docs-site run start",
     "docs:build": "npm --prefix docs-site run build",
     "docs:serve": "npm --prefix docs-site run serve",

package/src/api/middleware/auth.js

@@ -5,6 +5,32 @@ function unauthorized(res) {
   res.status(401).json({ error: 'Unauthorized' });
 }
 
+function isLoopbackAddress(address) {
+  if (!address || typeof address !== 'string') {
+    return false;
+  }
+
+  const normalized = address.toLowerCase();
+  return normalized === '127.0.0.1'
+    || normalized === '::1'
+    || normalized === '::ffff:127.0.0.1';
+}
+
+function shouldBypassAuth(req, options) {
+  if (!options.previewMode) {
+    return false;
+  }
+
+  if (options.allowUnauthenticatedExposedPreview) {
+    return true;
+  }
+
+  const socketAddress = typeof req?.socket?.remoteAddress === 'string'
+    ? req.socket.remoteAddress
+    : '';
+  return isLoopbackAddress(socketAddress);
+}
+
 function getTokenFromAuthorizationHeader(req) {
   const authHeader = req.get('authorization');
   if (!authHeader) {
@@ -51,20 +77,50 @@ export function isAuthorizedApiRequest(req, { allowQueryAccessToken = false } =
   return isMatchingToken(queryToken);
 }
 
-export function requireBearerToken(req, res, next) {
-  if (!isAuthorizedApiRequest(req)) {
-    unauthorized(res);
-    return;
+export function createAuthGuards(options = {}) {
+  const authOptions = {
+    previewMode: Boolean(options.previewMode),
+    allowUnauthenticatedExposedPreview: Boolean(options.allowUnauthenticatedExposedPreview)
+  };
+
+  function requireBearerTokenWithOptions(req, res, next) {
+    if (shouldBypassAuth(req, authOptions)) {
+      next();
+      return;
+    }
+
+    if (!isAuthorizedApiRequest(req)) {
+      unauthorized(res);
+      return;
+    }
+
+    next();
   }
 
-  next();
-}
+  function requireBearerTokenOrAccessTokenWithOptions(req, res, next) {
+    if (shouldBypassAuth(req, authOptions)) {
+      next();
+      return;
+    }
 
-export function requireBearerTokenOrAccessToken(req, res, next) {
-  if (!isAuthorizedApiRequest(req, { allowQueryAccessToken: true })) {
-    unauthorized(res);
-    return;
+    if (!isAuthorizedApiRequest(req, { allowQueryAccessToken: true })) {
+      unauthorized(res);
+      return;
+    }
+
+    next();
   }
 
-  next();
+  return {
+    requireBearerToken: requireBearerTokenWithOptions,
+    requireBearerTokenOrAccessToken: requireBearerTokenOrAccessTokenWithOptions
+  };
+}
+
+export function requireBearerToken(req, res, next) {
+  return createAuthGuards().requireBearerToken(req, res, next);
+}
+
+export function requireBearerTokenOrAccessToken(req, res, next) {
+  return createAuthGuards().requireBearerTokenOrAccessToken(req, res, next);
 }

package/src/api/openapi/spec.js

@@ -57,7 +57,8 @@ const schemas = {
     properties: {
       story: { type: 'string' },
       project: { type: 'string' },
-      forceRestart: { type: 'boolean' }
+      forceRestart: { type: 'boolean' },
+      pauseAfterKeyframes: { type: 'boolean' }
     },
     required: ['story'],
     additionalProperties: true
@@ -180,6 +181,7 @@ const schemas = {
     type: 'object',
     properties: {
       forceRestart: { type: 'boolean' },
+      pauseAfterKeyframes: { type: 'boolean' },
       targetType: {
         type: 'string',
         enum: ['script', 'voiceover', 'keyframe', 'segment', 'align', 'burnin']

package/src/api/routes/jobs.js

@@ -7,12 +7,27 @@ export function createJobsRouter() {
   const router = express.Router();
 
   router.post('/', async (req, res) => {
-    const { story, project, forceRestart } = req.body || {};
+    const { story, project, forceRestart, pauseAfterKeyframes } = req.body || {};
     if (!story) {
       res.status(400).json({ error: 'story is required' });
       return;
     }
 
+    if (typeof story !== 'string') {
+      res.status(400).json({ error: 'story must be a string' });
+      return;
+    }
+
+    if (forceRestart !== undefined && typeof forceRestart !== 'boolean') {
+      res.status(400).json({ error: 'forceRestart must be a boolean when provided' });
+      return;
+    }
+
+    if (pauseAfterKeyframes !== undefined && typeof pauseAfterKeyframes !== 'boolean') {
+      res.status(400).json({ error: 'pauseAfterKeyframes must be a boolean when provided' });
+      return;
+    }
+
     const resolvedProject = resolveProjectName(project || `api-${Date.now()}`);
     const existingActiveJob = findActiveJobByProject(resolvedProject);
     if (existingActiveJob) {
@@ -28,7 +43,11 @@ export function createJobsRouter() {
     await writeProjectStory(resolvedProject, story);
 
     const job = createJob({ story, project: resolvedProject });
-    setImmediate(() => runPipeline(job.id, { forceRestart: Boolean(forceRestart) }));
+    const pipelineOptions = { forceRestart: forceRestart === true };
+    if (pauseAfterKeyframes !== undefined) {
+      pipelineOptions.pauseAfterKeyframes = pauseAfterKeyframes;
+    }
+    setImmediate(() => runPipeline(job.id, pipelineOptions));
     res.status(202).json({ jobId: job.id, status: job.status });
   });
 

package/src/api/routes/projects.js

@@ -578,6 +578,7 @@ export function createProjectsRouter(deps = {}) {
 
       const {
         forceRestart,
+        pauseAfterKeyframes,
         targetType,
         index
       } = req.body || {};
@@ -597,6 +598,11 @@ export function createProjectsRouter(deps = {}) {
           return;
         }
 
+        if (pauseAfterKeyframes !== undefined) {
+          res.status(400).json({ error: 'pauseAfterKeyframes is not supported for targeted regeneration' });
+          return;
+        }
+
         const targetRequiresIndex = normalizedTargetType === 'keyframe' || normalizedTargetType === 'segment';
         if (targetRequiresIndex && !hasIndex) {
           res.status(400).json({ error: 'index is required for keyframe/segment targeted regeneration' });
@@ -628,9 +634,18 @@ export function createProjectsRouter(deps = {}) {
         return;
       }
 
+      if (pauseAfterKeyframes !== undefined && typeof pauseAfterKeyframes !== 'boolean') {
+        res.status(400).json({ error: 'pauseAfterKeyframes must be a boolean when provided' });
+        return;
+      }
+
       const story = await readProjectStory(project);
       const job = createJobFn({ story, project });
-      setImmediate(() => runPipelineFn(job.id, { forceRestart: Boolean(forceRestart) }));
+      const pipelineOptions = { forceRestart: forceRestart === true };
+      if (pauseAfterKeyframes !== undefined) {
+        pipelineOptions.pauseAfterKeyframes = pauseAfterKeyframes;
+      }
+      setImmediate(() => runPipelineFn(job.id, pipelineOptions));
 
       res.status(202).json({
         jobId: job.id,

package/src/api/server.js

@@ -1,11 +1,13 @@
 import express from 'express';
+import fs from 'node:fs';
+import path from 'node:path';
 import { pathToFileURL } from 'node:url';
 import { assertRequiredApiEnv, env } from '../config/env.js';
 import { createJobsRouter } from './routes/jobs.js';
 import { createProjectAssetsRouter } from './routes/projectAssets.js';
 import { createProjectsRouter } from './routes/projects.js';
 import { createWebhookRouter } from './routes/webhooks.js';
-import { requireBearerToken, requireBearerTokenOrAccessToken } from './middleware/auth.js';
+import { createAuthGuards } from './middleware/auth.js';
 import { buildOpenApiSpec } from './openapi/spec.js';
 
 const swaggerUiHtml = `<!doctype html>
@@ -42,11 +44,29 @@ function getRequestBaseUrl(req, { fallbackPort = 3000 } = {}) {
   return `http://localhost:${fallbackPort}`;
 }
 
-export function createApiApp({ baseUrl } = {}) {
-  assertRequiredApiEnv();
+function hasDashboardBundle(dashboardDir) {
+  if (!dashboardDir || typeof dashboardDir !== 'string') {
+    return false;
+  }
+
+  return fs.existsSync(path.join(dashboardDir, 'index.html'));
+}
+
+export function createApiApp({ baseUrl, dashboardDir, auth } = {}) {
+  const authOptions = {
+    previewMode: Boolean(auth?.previewMode),
+    allowUnauthenticatedExposedPreview: Boolean(auth?.allowUnauthenticatedExposedPreview)
+  };
+  const shouldRequireApiToken = !authOptions.previewMode;
+  if (shouldRequireApiToken) {
+    assertRequiredApiEnv();
+  }
+
+  const guards = createAuthGuards(authOptions);
+  const dashboardEnabled = hasDashboardBundle(dashboardDir);
 
   const app = express();
-  app.set('trust proxy', true);
+  app.set('trust proxy', !authOptions.previewMode);
   app.use(express.json({ limit: '2mb' }));
 
   app.get('/health', (_req, res) => {
@@ -67,16 +87,30 @@ export function createApiApp({ baseUrl } = {}) {
   });
 
   app.use('/webhooks', createWebhookRouter());
-  app.use('/projects', requireBearerTokenOrAccessToken, createProjectAssetsRouter());
-  app.use(requireBearerToken);
+  app.use('/projects', guards.requireBearerTokenOrAccessToken, createProjectAssetsRouter());
+  app.use(guards.requireBearerToken);
   app.use('/jobs', createJobsRouter());
   app.use('/projects', createProjectsRouter());
 
+  if (dashboardEnabled) {
+    app.use(express.static(dashboardDir));
+    app.get('/', (_req, res) => {
+      res.sendFile(path.join(dashboardDir, 'index.html'));
+    });
+  }
+
   return app;
 }
 
-export function startApiServer({ port = env.port, baseUrl } = {}) {
-  const app = createApiApp({ baseUrl });
+export function startApiServer({ port = env.port, host, baseUrl, dashboardDir, auth } = {}) {
+  const app = createApiApp({ baseUrl, dashboardDir, auth });
+
+  if (host) {
+    return app.listen(port, host, () => {
+      console.log(`rilo api listening on ${host}:${port}`);
+    });
+  }
+
   return app.listen(port, () => {
     console.log(`rilo api listening on :${port}`);
   });

package/src/cli/commands/preview.js

@@ -0,0 +1,126 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import { startApiServer } from '../../api/server.js';
+import { openPath } from './openHome.js';
+
+function parsePort(value, fallback) {
+  if (!value) {
+    return fallback;
+  }
+
+  const parsed = Number(value);
+  if (!Number.isInteger(parsed) || parsed < 1 || parsed > 65535) {
+    throw new Error(`Invalid port: ${value}`);
+  }
+
+  return parsed;
+}
+
+function resolveDashboardDir() {
+  const commandDir = path.dirname(fileURLToPath(import.meta.url));
+  return path.resolve(commandDir, '../../../frontend/dist');
+}
+
+function resolveWorkerEntryPoint() {
+  const commandDir = path.dirname(fileURLToPath(import.meta.url));
+  return path.resolve(commandDir, '../../worker/processor.js');
+}
+
+function buildWorkerProcess() {
+  const workerPath = resolveWorkerEntryPoint();
+  return spawn(process.execPath, [workerPath], {
+    stdio: 'inherit'
+  });
+}
+
+function printUnsafeExposeWarning(url) {
+  console.warn('WARNING: running preview in exposed mode without auth.');
+  console.warn(`WARNING: dashboard and API are reachable from ${url}`);
+  console.warn('WARNING: use only on trusted networks or isolated containers.');
+}
+
+function resolveOpenUrl(host, port) {
+  if (host === '0.0.0.0' || host === '::') {
+    return `http://127.0.0.1:${port}`;
+  }
+
+  return `http://${host}:${port}`;
+}
+
+export async function startPreview({ args = process.argv.slice(3) } = {}) {
+  const expose = args.includes('--expose');
+  const unsafeNoAuth = args.includes('--unsafe-no-auth');
+  const noOpen = args.includes('--no-open');
+
+  if (!expose && unsafeNoAuth) {
+    throw new Error('--unsafe-no-auth can only be used with --expose');
+  }
+
+  if (expose && !unsafeNoAuth) {
+    throw new Error('Exposed preview requires --unsafe-no-auth');
+  }
+
+  const portArgIndex = args.indexOf('--port');
+  const portArg = portArgIndex === -1 ? null : args[portArgIndex + 1] || null;
+  const port = parsePort(portArg, 3000);
+
+  const hostArgIndex = args.indexOf('--host');
+  const hostArg = hostArgIndex === -1 ? null : args[hostArgIndex + 1] || null;
+  const host = hostArg || (expose ? '0.0.0.0' : '127.0.0.1');
+
+  const dashboardDir = resolveDashboardDir();
+  if (!fs.existsSync(path.join(dashboardDir, 'index.html'))) {
+    throw new Error('Dashboard bundle not found. Run `npm run frontend:build` first.');
+  }
+
+  const apiServer = startApiServer({
+    port,
+    host,
+    dashboardDir,
+    auth: {
+      previewMode: true,
+      allowUnauthenticatedExposedPreview: unsafeNoAuth
+    }
+  });
+
+  const worker = buildWorkerProcess();
+  const openUrl = resolveOpenUrl(host, port);
+
+  const stopAll = () => {
+    if (!worker.killed) {
+      worker.kill('SIGTERM');
+    }
+    apiServer.close();
+  };
+
+  process.once('SIGINT', () => {
+    stopAll();
+    process.exit(0);
+  });
+
+  process.once('SIGTERM', () => {
+    stopAll();
+    process.exit(0);
+  });
+
+  worker.once('exit', (code) => {
+    apiServer.close(() => {
+      if (typeof code === 'number' && code !== 0) {
+        process.exit(code);
+      }
+    });
+  });
+
+  if (unsafeNoAuth) {
+    printUnsafeExposeWarning(openUrl);
+  }
+
+  console.log(`Dashboard: ${openUrl}`);
+  console.log(`Docs: ${openUrl}/docs`);
+
+  if (!noOpen) {
+    await openPath(openUrl);
+  }
+}

package/src/cli/index.js

@@ -14,6 +14,7 @@ import {
 } from '../store/projectStore.js';
 import { openSettings } from './commands/settingsFlow.js';
 import { openHome } from './commands/openHome.js';
+import { startPreview } from './commands/preview.js';
 import { applyStoredSettings } from '../config/env.js';
 
 function getArg(flag) {
@@ -46,10 +47,11 @@ async function main() {
 
   if (process.argv.includes('--help')) {
     const helpText = `
-Rilo — Story-first vertical video generation
+Rilo — Turn a story into a finished video
 
 USAGE
   rilo --project <name> [--story-file <path>] [--force]
+  rilo preview [--port <n>] [--host <host>] [--no-open] [--expose --unsafe-no-auth]
   rilo settings
   rilo home
   rilo --help
@@ -62,6 +64,7 @@ COMMANDS
     --project <name>         Project identifier (required); creates projects/<name>/
     --story-file <path>      Path to story text file (required on first run)
     --force                  Force restart from earlier stages (use after config changes)
+    --full-run               Skip the pause after keyframe generation and run all the way through
 
   rilo settings
     Configure API tokens, timeouts, and binary paths interactively
@@ -69,9 +72,19 @@ COMMANDS
   rilo home
     Open ~/.rilo, the default home for projects and output files
 
+  rilo preview [--port <n>] [--host <host>] [--no-open] [--expose --unsafe-no-auth]
+    Start API, worker, and dashboard preview for local use
+
+    --port <n>               API/dashboard port (default: 3000)
+    --host <host>            Host bind address (default: 127.0.0.1)
+    --no-open                Do not auto-open browser
+    --expose                 Bind preview for external/container access
+    --unsafe-no-auth         Allow unauthenticated exposed preview (required with --expose)
+
 FLAGS
   --help                     Show this help message
   --version                  Show version information
+  --full-run                 Skip the keyframe review pause and run all pipeline stages
 
 EXAMPLES
   # First run: create project and generate
@@ -89,6 +102,12 @@ EXAMPLES
   # Open the default Rilo home folder
   rilo home
 
+  # Run local dashboard/API preview
+  rilo preview
+
+  # Expose preview over container or tunnel (unsafe)
+  rilo preview --expose --unsafe-no-auth --host 0.0.0.0 --port 3000
+
   # Using npx (no installation needed)
   npx @telepat/rilo --project wedding-case --story-file ./story.txt
   npx @telepat/rilo home
@@ -115,6 +134,9 @@ SETTINGS
   Configure via interactive menu:
     rilo settings
 
+  Recommended install:
+    npm install -g @telepat/rilo
+
   Or with environment variables:
     export RILO_REPLICATE_API_TOKEN=r8_xxxxx
     export RILO_MAX_RETRIES=5
@@ -129,7 +151,7 @@ SETTINGS
 INVOCATION METHODS
   Global install:        rilo --project <name> --story-file <path>
   No install (npx):      npx @telepat/rilo --project <name> --story-file <path>
-  Local development:     npm run dev -- --project <name> --story-file <path>
+  Contributor workflow:  npm run dev -- --project <name> --story-file <path>
 `;
     console.log(helpText);
     return;
@@ -146,6 +168,12 @@ INVOCATION METHODS
     return;
   }
 
+  if (process.argv[2] === 'preview') {
+    await applyStoredSettings();
+    await startPreview();
+    return;
+  }
+
   // Merge stored settings (config.json + keystore) into env before running
   await applyStoredSettings();
 
@@ -156,6 +184,7 @@ INVOCATION METHODS
 
   const project = resolveProjectName(projectArg);
   const forceRestart = hasFlag('--force');
+  const fullRun = hasFlag('--full-run');
   const storyFile = getArg('--story-file');
 
   await ensureProject(project);
@@ -173,7 +202,17 @@ INVOCATION METHODS
   }
 
   const job = createJob({ story, project });
-  const result = await runPipeline(job.id, { forceRestart });
+  const result = await runPipeline(job.id, { forceRestart, pauseAfterKeyframes: !fullRun });
+
+  if (result.status === 'paused') {
+    console.log(JSON.stringify({
+      jobId: result.id,
+      project,
+      status: 'paused',
+      message: `Keyframes generated. Review assets in projects/${project}/assets/, then run again to continue to video generation.`
+    }, null, 2));
+    return;
+  }
 
   if (result.status !== 'completed') {
     throw new Error(`Generation failed: ${result.error || 'unknown error'}`);

package/src/pipeline/orchestrator.js

@@ -571,9 +571,10 @@ export async function regenerateProjectAsset(projectName, target, options = {})
   }
 
   const updatedAt = new Date().toISOString();
+  const nextStatus = targetType === 'keyframe' ? JobStatus.PAUSED : (runState.status || JobStatus.COMPLETED);
   await deps.persistArtifacts(project, artifacts);
   await deps.writeProjectRunState(project, {
-    status: runState.status || JobStatus.COMPLETED,
+    status: nextStatus,
     error: runState.error || null,
     steps,
     artifacts,
@@ -629,6 +630,9 @@ export async function runPipeline(jobId, options = {}) {
     const projectDir = deps.getProjectDir(project);
     const targetDurationSec = resolveTargetDurationSec(projectConfig);
     const plannedShots = resolveShotCount(projectConfig);
+    const shouldPause = options.pauseAfterKeyframes !== undefined
+      ? Boolean(options.pauseAfterKeyframes)
+      : Boolean(projectConfig.pauseAfterKeyframes);
     const safeStory = deps.preprocessStory(job.payload.story);
     analyticsProjectDir = projectDir;
     const analyticsRunId = deps.createRunId();
@@ -1326,6 +1330,12 @@ export async function runPipeline(jobId, options = {}) {
       await finishStageAnalytics(JobStep.KEYFRAMES, { executed: true, status: 'succeeded', details: { mode: 'partial_regen', changedShots: changed } });
       await finishStageAnalytics(JobStep.SEGMENTS, { executed: true, status: 'succeeded', details: { mode: 'partial_regen' } });
       currentJob = getJob(jobId);
+
+      if (shouldPause) {
+        const paused = updateJob(jobId, { status: JobStatus.PAUSED });
+        await persistCheckpoint(paused, null, deps);
+        return paused;
+      }
     }
 
     if (!currentJob.steps[JobStep.KEYFRAMES]) {
@@ -1387,6 +1397,12 @@ export async function runPipeline(jobId, options = {}) {
       await persistCheckpoint(getJob(jobId), null, deps);
       await finishStageAnalytics(JobStep.KEYFRAMES, { executed: true, status: 'succeeded' });
       currentJob = getJob(jobId);
+
+      if (shouldPause) {
+        const paused = updateJob(jobId, { status: JobStatus.PAUSED });
+        await persistCheckpoint(paused, null, deps);
+        return paused;
+      }
     } else if (
       currentJob.artifacts.keyframeUrls.length > 0 &&
       (!currentJob.artifacts.keyframePaths || currentJob.artifacts.keyframePaths.length === 0)