@notis_ai/cli 0.2.0-beta.191.1 → 0.2.0-beta.196.1

package/dist/view-renderer/src/renderer.js

@@ -0,0 +1,201 @@
+import { readFile } from 'node:fs/promises';
+import { createBrowserPool } from './pool.js';
+import { expandScrollAreas, extractRenderedMarkdown, restrictBrowserTransports, freezeFrameViewportSizes, settleFrameImages } from './dom.js';
+import { ViewRenderError, renderFailure } from './errors.js';
+
+export const RENDER_ORIGIN = 'http://notis-render.invalid';
+const READ_OPERATIONS = new Set(['action', 'shown', 'viewer_read', 'document_body', 'record', 'html', 'report', 'resolve_links']);
+const CSP = "default-src 'none'; script-src 'self' blob: data: 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self'; frame-src 'self' blob: data:; worker-src 'none'; form-action 'none'; base-uri 'none'; object-src 'none'";
+const DEFAULT_HTML = '<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="/theme.css"><link rel="stylesheet" href="/host.css"></head><body><script src="/host.js"></script></body></html>';
+
+function inputs({ outputs = ['markdown', 'screenshot'], width = 1440, timeoutMs = 45000 }) {
+  if (!Array.isArray(outputs) || !outputs.length || new Set(outputs).size !== outputs.length || outputs.some(value => !['markdown', 'screenshot'].includes(value))) throw new TypeError('Choose markdown and/or screenshot once.');
+  if (![390, 1440].includes(width)) throw new TypeError('Render at 390 or 1440 CSS pixels.');
+  if (!Number.isInteger(timeoutMs) || timeoutMs < 1000 || timeoutMs > 90000) throw new TypeError('Use a bounded render timeout.');
+  return { outputs, width, timeoutMs };
+}
+function publicSnapshot(snapshot) {
+  // Explicit whitelist: never spread a ticket, broker object, endpoint or token
+  // into source-visible bootstrap data, even when the provider adds fields.
+  return { descriptor: snapshot.descriptor, source: snapshot.source, css: snapshot.css || '',
+    cacheKey: snapshot.cacheKey, markdownExport: snapshot.markdownExport || null,
+    url: snapshot.url, hostCss: snapshot.hostCss || '', params: snapshot.params || {}, locale: snapshot.locale || 'en' };
+}
+
+function diagnosticFailure(error, stage, fallback = 'render_failed') {
+  const failure = error instanceof ViewRenderError
+    ? new ViewRenderError(error.code, error.message, error.status) : renderFailure(fallback);
+  // Private in-process diagnostics only. Public JSON/error projections cannot
+  // enumerate a browser exception, which may contain source or request data.
+  Object.defineProperties(failure, { cause: { value: error }, stage: { value: stage } });
+  return failure;
+}
+
+/** Shared by CLI and warm service. No broad credential is an argument to this library. */
+export async function renderView({ broker, outputs, width, timeoutMs, signal, pool, host, maxHeight = 60000, maxPixels = 80000000 }) {
+  const config = inputs({ outputs, width, timeoutMs });
+  const deadline = AbortSignal.timeout(config.timeoutMs);
+  const cancellation = signal ? AbortSignal.any([signal, deadline]) : deadline;
+  // Fail authorization before opening a browser or exposing cached page data.
+  let snapshot;
+  try { snapshot = await broker.snapshot({ signal: cancellation }); }
+  catch (error) { throw diagnosticFailure(error, 'manifest', cancellation.aborted ? 'render_timeout' : 'render_failed'); }
+  if (!snapshot || typeof snapshot.url !== 'string' || !snapshot.view || !snapshot.descriptor || typeof snapshot.source !== 'string') throw renderFailure('render_manifest_invalid');
+  if (snapshot.render_options && (!Array.isArray(snapshot.render_options.outputs) || snapshot.render_options.width !== config.width
+    || JSON.stringify([...snapshot.render_options.outputs].sort()) !== JSON.stringify([...config.outputs].sort()))) {
+    throw new ViewRenderError('render_options_changed', 'Use the outputs and width authorized for this render.', 409);
+  }
+  const hostSource = host?.script ?? await readFile(new URL('../dist/host.js', import.meta.url), 'utf8');
+  snapshot.hostCss = host ? host.css || '' : await readFile(new URL('../dist/host.css', import.meta.url), 'utf8');
+  snapshot.theme_css ||= host ? host.themeCss || '' : await readFile(new URL('../dist/theme.css', import.meta.url), 'utf8');
+  const ownPool = !pool;
+  pool ||= createBrowserPool();
+  const blocked = [];
+  let authorityLost = false, authorityFailure, transientFailure, assetRequests = 0, assetBytes = 0, readRequests = 0;
+  let stage = 'browser_context';
+  let assetOrigin = null;
+  try { const asset = new URL(snapshot.asset_origin); if (asset.protocol === 'https:' && asset.origin === snapshot.asset_origin) assetOrigin = asset.origin; } catch {}
+  const policy = assetOrigin ? CSP.replace("img-src 'self' data: blob:", "img-src 'self' data: blob: " + assetOrigin).replace("font-src 'self' data:", "font-src 'self' data: " + assetOrigin) : CSP;
+  try {
+    return await pool.use(async context => {
+      stage = 'browser_setup';
+      context.setDefaultTimeout(config.timeoutMs);
+      await context.addInitScript(restrictBrowserTransports);
+      await context.routeWebSocket('**/*', socket => socket.close({ code: 1008, reason: 'Read-only rendering has no sockets.' }));
+      await context.route('**/*', async route => {
+        const request = route.request();
+        const url = new URL(request.url());
+        const respond = (status, data, contentType = 'application/json') => route.fulfill({ status, body: typeof data === 'string' ? data : JSON.stringify(data),
+          contentType, headers: { 'Cache-Control': 'no-store', 'Content-Security-Policy': policy, 'X-Content-Type-Options': 'nosniff' } });
+        let payload;
+        try {
+          if (url.origin !== RENDER_ORIGIN || url.search || url.hash) {
+            const kind = request.resourceType();
+            if (url.origin === assetOrigin && request.method() === 'GET' && ['image', 'font'].includes(kind)
+                && !url.search && !url.hash && ++assetRequests <= 128) {
+              const asset = await broker.read({ operation: 'asset', url: url.href, kind }, { signal: cancellation });
+              const bytes = Buffer.from(asset.data_base64, 'base64'); assetBytes += bytes.length;
+              if (assetBytes > 32 * 1024 * 1024 || !/^(image|font)\//.test(asset.mime_type)) throw renderFailure('render_asset_limit');
+              return route.fulfill({ status: 200, body: bytes, contentType: asset.mime_type,
+                headers: { 'Cache-Control': 'no-store', 'Access-Control-Allow-Origin': '*', 'X-Content-Type-Options': 'nosniff' } });
+            }
+            if (blocked.length < 100) blocked.push({ code: 'render_egress_denied' });
+            return route.abort('blockedbyclient');
+          }
+          if (request.method() === 'GET') {
+            if (url.pathname === '/') return respond(200, host?.html || DEFAULT_HTML, 'text/html');
+            if (url.pathname === '/host.js') return respond(200, hostSource, 'text/javascript');
+            if (url.pathname === '/host.css') return respond(200, snapshot.hostCss || '', 'text/css');
+            if (url.pathname === '/theme.css') return respond(200, snapshot.theme_css || '', 'text/css');
+            if (url.pathname === '/__snapshot') return respond(200, publicSnapshot(snapshot));
+            return respond(404, { error: 'render_resource_unavailable' });
+          }
+          if (url.pathname !== '/__read' || request.method() !== 'POST' || (request.postData()?.length || 0) > 262144) return respond(403, { error: 'render_read_only' });
+          payload = request.postDataJSON();
+          if (!payload || typeof payload !== 'object' || Array.isArray(payload) || !READ_OPERATIONS.has(payload.operation)) {
+            if (blocked.length < 100) blocked.push({ code: 'render_read_only' });
+            return respond(403, { error: 'render_read_only', message: 'Rendering never changes records or runs write actions.' });
+          }
+          if (++readRequests > 128) throw new ViewRenderError('render_read_limit', 'This render exceeded its read limit.', 429);
+          // The server independently reconstructs and classifies every call.
+          const result = await broker.read(payload, { signal: cancellation });
+          return respond(200, { result });
+        } catch (error) {
+          const code = ['render_read_only', 'render_paid_background_denied'].includes(error?.code) ? error.code : 'render_read_unavailable';
+          if (['render_read_only', 'render_paid_background_denied'].includes(code)) {
+            if (blocked.length < 100) blocked.push({ code, ...(typeof payload?.action_id === 'string' && /^[a-zA-Z0-9_-]{1,100}$/.test(payload.action_id) ? { action_id: payload.action_id } : {}) });
+          } else if (error?.status >= 500 || error?.status === 429) {
+            // Backend load is not an access change: fail the capture as retryable.
+            transientFailure ||= error;
+          } else { authorityLost = true; authorityFailure ||= error; }
+          await respond(error?.status === 401 || error?.status === 404 ? error.status : 403, { error: code, message: 'This read is unavailable in the current render.' }).catch(() => {});
+        }
+      });
+      const page = await context.newPage();
+      context.on('page', child => { if (child !== page) void child.close(); });
+      stage = 'host_navigation';
+      await page.goto(RENDER_ORIGIN, { waitUntil: 'domcontentloaded' });
+      stage = 'host_ready';
+      await page.waitForFunction(() => window.__notisRenderState?.mounted && window.__notisRenderState.pending === 0 && performance.now() - window.__notisRenderState.lastActivity > 100, undefined, { timeout: config.timeoutMs });
+      // A committed data response must settle React layout and browser fonts.
+      stage = 'fonts_layout';
+      await page.evaluate(async () => {
+        await Promise.race([document.fonts.ready, new Promise(resolve => setTimeout(resolve, 2000))]);
+        await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+      });
+      let lastHeight = -1, settled = false;
+      const frozenFrames = new WeakSet();
+      stage = 'layout_expansion';
+      for (let pass = 0; pass < 10; pass++) {
+        for (const frame of [...page.frames()].reverse()) {
+          if (!await frame.evaluate(settleFrameImages)) throw renderFailure('render_asset_unavailable');
+          if (frame !== page.mainFrame() && !frozenFrames.has(frame)) {
+            await frame.evaluate(freezeFrameViewportSizes); frozenFrames.add(frame);
+          }
+          const size = await frame.evaluate(expandScrollAreas, { maxHeight });
+          if (size.tooLarge) throw new ViewRenderError('render_too_large', 'This view exceeds the full-page render limit; nothing was cropped.', 413);
+          if (frame !== page.mainFrame()) await (await frame.frameElement()).evaluate((node, height) => {
+            node.style.setProperty('height', `${height}px`, 'important'); node.style.setProperty('min-height', `${height}px`, 'important');
+            node.style.setProperty('max-height', 'none', 'important'); node.style.setProperty('flex-shrink', '0', 'important');
+            node.style.setProperty('flex-basis', 'auto', 'important');
+          }, size.height);
+        }
+        // Expansion can reveal lazy rows and trigger additional declared reads.
+        // Wait for their committed DOM before deciding that the full page fits.
+        await page.waitForFunction(() => window.__notisRenderState.pending === 0 && performance.now() - window.__notisRenderState.lastActivity > 100,
+          undefined, { timeout: config.timeoutMs });
+        const height = await page.evaluate(() => Math.max(document.documentElement.scrollHeight, document.body.scrollHeight));
+        if (height === lastHeight) { settled = true; break; }
+        lastHeight = height;
+      }
+      if (!settled) throw new ViewRenderError('render_unstable', 'This view did not settle into a full-page capture; nothing was cropped.', 409);
+      if (blocked.some(value => value.code === 'render_paid_background_denied')) throw new ViewRenderError('render_paid_background_denied', 'Background snapshots cannot run paid reads.', 403);
+      const dimensions = await page.evaluate(() => ({ width: innerWidth, height: Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) }));
+      if (dimensions.height > maxHeight || dimensions.width * dimensions.height > maxPixels) throw new ViewRenderError('render_too_large', 'This view exceeds the full-page render limit; nothing was cropped.', 413);
+      let markdown, screenshot;
+      if (config.outputs.includes('markdown')) {
+        stage = 'markdown';
+        let override;
+        try { override = await page.evaluate(async () => {
+          if (typeof window.__notisRenderMarkdown === 'function') return await window.__notisRenderMarkdown();
+          return null;
+        }); } catch { throw renderFailure('render_markdown_invalid'); }
+        if (override !== null && typeof override !== 'string') throw renderFailure('render_markdown_invalid');
+        markdown = override ?? (await Promise.all(page.frames().map(frame => frame.evaluate(extractRenderedMarkdown, { baseUrl: snapshot.url })))).filter(Boolean).join('\n\n');
+        if (Buffer.byteLength(markdown, 'utf8') > 2000000) throw new ViewRenderError('render_too_large', 'The Markdown exceeds the render limit.', 413);
+        markdown = markdown.replace(/\r\n/g, '\n').trim() + '\n';
+      }
+      if (config.outputs.includes('screenshot')) {
+        stage = 'screenshot';
+        const png = await page.screenshot({ type: 'png', fullPage: true, animations: 'disabled', caret: 'hide', scale: 'css' });
+        if (png.length > 32 * 1024 * 1024) throw new ViewRenderError('render_too_large', 'The PNG exceeds the render transport limit; nothing was cropped.', 413);
+        screenshot = { mime_type: 'image/png', data_base64: png.toString('base64'), width: png.readUInt32BE(16), height: png.readUInt32BE(20) };
+      }
+      stage = 'read_completion';
+      if (blocked.some(value => value.code === 'render_paid_background_denied')) throw new ViewRenderError('render_paid_background_denied', 'Background snapshots cannot run paid reads.', 403);
+      for (const code of await page.evaluate(() => (window.__notisRenderState.blocked || []).filter(value => value === 'render_read_only').slice(0, 100))) {
+        if (blocked.length < 100) blocked.push({ code });
+      }
+      if (transientFailure && !authorityLost && !cancellation.aborted) {
+        const failure = new ViewRenderError('render_temporarily_unavailable', 'The view could not be rendered right now. Try again in a moment.', 503);
+        Object.defineProperty(failure, 'cause', { value: transientFailure });
+        throw failure;
+      }
+      if (authorityLost || cancellation.aborted || await page.evaluate(() => Boolean(window.__notisRenderState.failed))) {
+        const failure = renderFailure('render_access_changed');
+        if (authorityFailure) Object.defineProperty(failure, 'cause', { value: authorityFailure });
+        throw failure;
+      }
+      // Do not release Markdown or image bytes after revocation/source changes.
+      stage = 'authorize_finish';
+      const finalAuthority = await broker.finish({ signal: cancellation });
+      if (finalAuthority?.valid !== true) throw renderFailure('render_access_changed');
+      return { url: snapshot.url, view: snapshot.view, ...(snapshot.record_key ? { record_key: snapshot.record_key } : {}),
+        ...(typeof finalAuthority.render_id === 'string' ? { render_id: finalAuthority.render_id } : {}),
+        params: snapshot.params || {}, ...(markdown !== undefined ? { markdown } : {}), ...(screenshot ? { screenshot } : {}),
+        rendered_at: new Date().toISOString(), ...(blocked.length ? { blocked_calls: blocked } : {}) };
+    }, { signal: cancellation, width: config.width, locale: snapshot.locale || 'en', timezone: snapshot.timezone || 'UTC' });
+  } catch (error) {
+    throw diagnosticFailure(error, stage, cancellation.aborted ? 'render_timeout' : 'render_failed');
+  } finally { if (ownPool) await pool.close(); }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@notis_ai/cli",
-  "version": "0.2.0-beta.191.1",
+  "version": "0.2.0-beta.196.1",
   "description": "Agent-first Notis CLI for apps and generic tool execution",
   "type": "module",
   "bin": {
@@ -30,12 +30,14 @@
     "node": ">=22.12.0"
   },
   "dependencies": {
+    "@babel/parser": "^7.29.9",
+    "ajv": "^8.20.0",
+    "ajv-formats": "^3.0.1",
     "commander": "^15.0.0",
+    "esbuild": "^0.28.2",
+    "playwright-core": "1.63.0",
     "sharp": "^0.35.4"
   },
-  "devDependencies": {
-    "esbuild": "^0.28.2"
-  },
   "keywords": [
     "notis",
     "cli",
@@ -45,5 +47,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  }
 }