preview_creative (Advanced)

function PreviewFrame({ render }) {
  if (render.output_format !== 'html') {
    return <p>Request HTML output for this isolated review frame.</p>;
  }
  return (
    <iframe
      title={`Creative preview: ${render.role}`}
      sandbox=""
      referrerPolicy="no-referrer"
      loading="lazy"
      srcDoc={previewSrcdoc(render.preview_html)}
    />
  );
}

const capabilities = await creative_agent.get_adcp_capabilities({ protocols: ['creative'] });
const routes = capabilities.creative.supported_formats.filter(
  capability => capability.operations.includes('preview')
);
const formatPreviews = await creative_agent.preview_creative({
  request_type: 'batch',
  quality: 'draft',
  output_format: 'html',
  requests: routes.slice(0, 50).map(capability => ({
    target_capability_id: capability.capability_id,
    creative_manifest: createExampleManifest(capability.format)
  }))
});

function CampaignReview({ entries, onReview }) {
  return (
    <div className="review-grid">
      {entries.map(({ request, result }, index) => {
        if (!result.success) {
          return <p key={index}>{result.errors.map(error => error.message).join('; ')}</p>;
        }
        const previewAvailable = previewEntryIsFresh({ result }, Date.now());
        const productionFidelity = request.quality === 'production' &&
          result.quality_used === 'production';
        return (
          <div className="creative-card" key={index}>
            <p>Rendered quality: {result.quality_used ?? 'undeclared'}</p>
            {!previewAvailable && <p>This preview has expired. Request a fresh rendering.</p>}
            {result.response.previews.flatMap(preview => preview.renders.map(render => (
              <PreviewFrame key={`${preview.preview_id}:${render.render_id}`} render={render} />
            )))}
            <button disabled={!productionFidelity || !previewAvailable} onClick={() => {
              if (previewEntryIsFresh({ result }, Date.now())) onReview(index);
            }}>
              Review production rendering
            </button>
          </div>
        );
      })}
    </div>
  );
}

function effectivePreviewItem(item, defaults) {
  const effective = { ...item };
  for (const field of ['target_capability_id', 'quality', 'output_format']) {
    if (effective[field] === undefined && defaults[field] !== undefined) {
      effective[field] = defaults[field];
    }
  }
  effective.output_format ??= 'url';
  if (!effective.target_capability_id || !effective.quality) {
    throw new Error('Select an explicit preview route and quality before caching.');
  }
  return effective;
}

function previewCacheKey(context, request) {
  const required = ['endpoint', 'principalScope', 'sourceSnapshot',
    'renderingSnapshot', 'authoritySnapshot'];
  if (required.some(field => !context[field])) return null;
  // Normalize JSON object key order; retain array order and every input value.
  return JSON.stringify({ context, request }, (_key, value) => {
    if (value && typeof value === 'object' && !Array.isArray(value)) {
      return Object.fromEntries(Object.keys(value).sort().map(key => [key, value[key]]));
    }
    return value;
  });
}

function previewEntryIsFresh(entry, now) {
  const expiry = entry.result.response.expires_at;
  return expiry === undefined || Date.parse(expiry) > now;
}

async function getPreviewsWithCache(client, cache, context, items, defaults = {}) {
  if (items.length < 1 || items.length > 50) throw new Error('Use 1–50 preview items.');
  context = structuredClone(context);
  const entries = new Array(items.length);
  const missing = [];
  items.forEach((item, index) => {
    const request = structuredClone(effectivePreviewItem(item, defaults));
    const key = previewCacheKey(context, request);
    const cached = key === null ? undefined : cache.get(key);
    if (cached && previewEntryIsFresh(cached, Date.now())) {
      entries[index] = structuredClone(cached);
    } else {
      missing.push({ index, key, request });
    }
  });
  if (missing.length === 0) return entries;

  const response = await client.preview_creative({
    request_type: 'batch',
    requests: missing.map(item => item.request)
  });
  if (response.errors) throw new Error(response.errors.map(error => error.message).join('; '));
  if (response.response_type !== 'batch' || response.results.length !== missing.length) {
    throw new Error('Expected one synchronous batch result per requested item.');
  }
  response.results.forEach((result, index) => {
    const pending = missing[index];
    if (result.success && result.quality_used === undefined) {
      throw new Error('Missing quality_used for an explicit-quality request.');
    }
    if (result.success && !previewEntryIsFresh({ result }, Date.now())) {
      throw new Error('The fetched preview has expired. Request a fresh rendering.');
    }
    const entry = structuredClone({ request: pending.request, result, provenance: context });
    entries[pending.index] = entry;
    // Partial failures remain visible and can be retried; never cache them.
    if (result.success && pending.key !== null) cache.set(pending.key, structuredClone(entry));
  });
  return entries;
}

const response = await client.preview_creative({
  request_type: 'batch',
  requests: formatRequests
});
if (response.errors) {
  console.error(response.errors);
} else if (response.response_type === 'batch') {
  for (const result of response.results) {
    if (!result.success) {
      for (const error of result.errors) console.error(error.code, error.message);
      continue;
    }
    console.log(result.creative_id, result.quality_used, result.response.expires_at);
    // Pass renders to PreviewFrame; retain the complete item for review.
  }
}