/* brand-review.jsx — post-scan AI critique of the user's site vs top competitors.
*
* Calls Claude with the full discovered brand context + inferred competitors,
* asks for a structured review covering:
* - identity (brand presentation, visual differentiation)
* - feature_gaps (what competitors have that user doesn't)
* - elements (specific UI/content pieces to add)
* - quick_wins (immediate UX improvements)
* - bold_moves (one ambitious "2027" idea — generative, spatial, novel)
*
* Renders as a layered card stack with depth, glow, and the editorial
* vocabulary the rest of the prototype uses.
*/
const { useState, useEffect, useRef } = React;
async function runBrandReview(brand, { anthropicKey } = {}) {
if (!brand?.domain) return null;
const managed = window.getManagedProviders && window.getManagedProviders();
const hasAnthropic = !!anthropicKey || managed?.has('anthropic');
let claude;
if (hasAnthropic && window.callModel) {
// managed mode or BYO — callModel ignores the key arg in managed mode
// Sonnet 4.6 — now that api/llm.js runs on the Node runtime (60s) it no longer hits
// the edge function's ~25s 504. Full token budget so the JSON doesn't truncate.
claude = (p) => window.callModel('anthropic', anthropicKey, p, { maxTokens: 3000, model: 'claude-opus-4-7', timeoutMs: 58000 }).then(r => r.text);
} else if (window.claude?.complete) {
// sandbox fallback
claude = (p) => window.claude.complete(p);
} else {
return null;
}
// If the live site couldn't be read (blocked / degraded discovery), the scan signals
// are absence-of-DATA, not absence-of-FEATURE — feeding has_og_image:false etc. makes
// the review fabricate "missing og:image / JSON-LD / social" as if they were facts.
const blind = !!brand.degraded;
const summary = {
name: brand.name, domain: brand.domain, industry: brand.industry,
location: brand.location, tagline: brand.tagline, description: brand.description,
audience: brand.audience, vertical: brand.vertical,
competitors: (brand.competitors || []).slice(0, 10).map(c => c.name || c),
site_readable: !blind,
// Only include scan-derived technical signals when we actually read the site.
...(blind ? {} : {
has_jsonld: (brand.jsonld?.types?.length || 0) > 0,
has_og_image: !!brand.meta?.ogImage,
has_address: !!brand.address,
sitemap_urls: brand.sitemap?.urls || 0,
social_count: Object.keys(brand.social || {}).length,
}),
};
const blindNote = blind
? `\nIMPORTANT: the live site could NOT be read (it blocked automated fetching), so there are NO reliable technical signals. Do NOT claim the site is missing og:image, JSON-LD, sitemap, social links, or that it is "degraded" — those are UNKNOWN, not absent. Base identity and feature-gap commentary ONLY on your training knowledge of ${brand.name} vs its competitors, and open the thesis with a one-line caveat that the live site couldn't be scanned.\n`
: '';
const prompt = `You are a senior product designer doing a post-audit creative review.
Brand context (${blind ? 'the live site could NOT be read — signals are limited to what is known' : 'real, from a recent scan'}):
\`\`\`json
${JSON.stringify(summary, null, 2)}
\`\`\`
${blindNote}
Compare ${brand.name} against the listed competitors using your training knowledge. Be specific, opinionated, and concrete — not generic. Reference real things competitors actually do where you can.
Return ONLY a JSON object (no markdown):
{
"thesis": "One-sentence diagnosis of where this brand sits vs the competitive set",
"identity": {
"verdict": "<=15 words on visual / brand identity gap vs competitors",
"observations": ["3-4 specific observations about logo, OG, palette, tone"]
},
"feature_gaps": [
{"feature": "Specific feature", "competitors_with_it": ["Comp A", "Comp B"], "why_it_matters": "1 sentence"},
... (3-5 items)
],
"elements": [
{"element": "Specific UI/content element (e.g. 'Bento-grid case study wall')", "where": "page section", "why": "1 sentence"},
... (4-6 items, lean toward novel 2027 patterns: spatial, layered, generative, conversational, no-form, etc.)
],
"quick_wins": [
{"win": "Action verb + object", "effort": "low|medium", "impact": "low|medium|high"},
... (4-6 items, immediately shippable)
],
"bold_move": {
"title": "One ambitious 2027-shaped idea",
"description": "2-3 sentences. Should feel like a near-future product moment, not a buzzword salad.",
"inspiration": ["1-2 reference points from real products that hint at this direction"]
}
}
Tone: confident, plain-spoken, no marketing fluff. Treat the reader as someone who already knows the basics.`;
try {
const text = await Promise.race([
claude(prompt),
new Promise((_, r) => setTimeout(() => r(new Error('review timeout')), 58000)),
]);
const m = text.match(/(\{[\s\S]*\})/);
if (!m) return null;
const cleaned = m[1].replace(/,(\s*[}\]])/g, '$1');
return JSON.parse(cleaned);
} catch (e) {
return { error: e.message || 'review failed' };
}
}
function BrandReview({ brand, anthropicKey, onSettings }) {
const [state, setState] = useState({ loading: true, review: null, error: null });
const lastBrandRef = useRef(null);
useEffect(() => {
if (!brand?.domain) return;
if (lastBrandRef.current === brand.domain + (brand.discoveredAt || '')) return;
lastBrandRef.current = brand.domain + (brand.discoveredAt || '');
setState({ loading: true, review: null, error: null });
let cancelled = false;
(async () => {
const review = await runBrandReview(brand, { anthropicKey });
if (cancelled) return;
if (!review || review.error) {
setState({
loading: false, review: null,
error: review?.error || 'Creative review is temporarily unavailable — try re-running the scan.',
});
} else {
setState({ loading: false, review, error: null });
}
})();
return () => { cancelled = true; };
}, [brand?.domain, brand?.discoveredAt, anthropicKey]);
if (state.loading) {
return (
Generating creative review…
Reviewing {brand?.name || 'your brand'} against {(brand?.competitors || []).slice(0, 5).map(c => c.name || c).join(' · ') || 'the top 5'}
);
}
if (state.error) {
return (
Review unavailable
{state.error}
);
}
const r = state.review;
if (!r) return null;
return (
Creative review · Claude Opus 4.7 · {(brand.competitors || []).length} competitors considered