[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_112":113,"_114":115},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","canonry","name","Brand-Perception-Check","path","src/ui/render.ts","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":59,"_60":61,"_62":63,"_64":34,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/canonry/Brand-Perception-Check/code/src/ui/render.ts","extension","id","25e9bdda-d0a3-42ca-8aea-1e46dbcefc02","render.ts","fileId","ef796fc4-a7bd-11f1-b510-1607ee4eb77e","parentId","ee10eef0-a7bd-11f1-a791-1607ee4eb77e","branchId","0ff5a62c-67cf-45f9-85df-c272daf0a6a9","branchVersion",30,"latest",true,"createdAt",["D",1788474100810],"version",1,"fileType","script","content","import { MAX_USER_QUERIES } from 'npm:@canonry/val-kit@0.2.0/jobs'\nimport { canonryGlyph, canonryMark } from 'npm:@canonry/val-kit@0.2.0/ui'\nimport { brandPerceptionClientScript, QUERY_HINT_SUFFIX } from './client.ts'\nimport { brandPerceptionStyles } from './styles.ts'\nimport type {\n BrandPerceptionViewModel,\n DemoUiStatus,\n PerceptionAnswerViewModel,\n PerceptionSourceViewModel,\n PerceptionViewModel,\n UiNotice,\n} from './types.ts'\n\nconst DEFAULT_CSS_HREF = '/assets/canonry-ui.css'\nconst DEFAULT_SCRIPT_SRC = '/assets/canonry-ui.js'\nconst DEFAULT_MARK_SRC = '/assets/canonry-mark.svg'\nconst DEFAULT_GLYPH_SRC = '/assets/canonry-glyph.svg'\n\n/** The product's name, written once and used everywhere a name appears. */\nexport const PRODUCT_NAME = 'Brand Perception Check'\n\n/**\n * Fingerprint an asset's own content into its URL.\n *\n * The document is `no-store` but a stylesheet on a TTL means that after a deploy\n * a returning visitor gets new markup styled by an old stylesheet — new class\n * names unstyled, removed ones still applied. A content hash changes the URL\n * exactly when the bytes change, which is what makes a long cache lifetime safe\n * rather than a liability.\n *\n * FNV-1a rather than SHA-256 because this runs at module load and only has to\n * differ when the content differs; it is a cache key, not a security boundary.\n */\nexport function assetUrl(path: string, content: string): string {\n let hash = 0x811c9dc5\n for (let index = 0; index < content.length; index++) {\n hash ^= content.charCodeAt(index)\n hash = Math.imul(hash, 0x01000193) >>> 0\n }\n return `${path}?v=${hash.toString(36)}`\n}\n\nconst MAX_ANSWER_CHARS = 1_400\n\n/** Where \"open source Canonry\" points. */\nconst CANONRY_REPO_URL = 'https://github.com/Canonry/canonry'\n\n/**\n * What the check actually does, carried by the heading's tooltip rather than a\n * subtitle. The trigger is a real button, and the copy rides its `aria-label`\n * so nothing is lost for assistive tech or for a test that looks the button up\n * by accessible name.\n */\nconst LANDING_EXPLAINER =\n 'An answer engine is asked questions that name this brand. We record the position each answer takes and quote the ' +\n 'sentences it wrote that carry it, along with the concerns it raises and the sources it attributed.'\n\nconst VERDICT_TIP =\n 'Each answer is read back for the position it takes, and a verdict is kept only when sentences copied word for ' +\n 'word out of that answer carry it. \"Took no position\" means the answer described the brand without recommending ' +\n 'or cautioning, which is a finding. Nothing here is a sentiment score.'\n\nconst ANSWERS_TIP =\n 'Every question here names the brand, so the engine was always going to discuss it. The finding is what it said, ' +\n 'not whether it appeared, which makes this a different instrument from an AI visibility rate and never comparable ' +\n 'to one. Open a row for the full quotations, the concerns, and the sources behind that answer.'\n\nconst CONCERNS_TIP =\n 'A concern is a short phrase the answer itself writes as a drawback, verified word for word against the prose. It ' +\n 'counts once per answer, however often that answer repeats it, so one verbose answer cannot outrank a concern ' +\n 'three separate answers raised.'\n\nconst SOURCES_TIP =\n 'The sources this answer engine attributed for these answers, grouped by kind. A kind counts once per answer, so ' +\n 'eight links to one forum is one answer leaning on community sources. This is not a claim about where opinions ' +\n 'about the brand come from on the web — three answers cannot support that.'\n\nfunction escapeHtml(value: unknown): string {\n return String(value ?? '')\n .replaceAll('&', '&')\n .replaceAll('<', '<')\n .replaceAll('>', '>')\n .replaceAll('\"', '"')\n .replaceAll(\"'\", ''')\n}\n\nfunction escapeAttr(value: unknown): string {\n return escapeHtml(value).replaceAll('`', '`')\n}\n\nfunction safeUrl(value: string): string | null {\n try {\n const url = new URL(value)\n return url.protocol === 'https:' || url.protocol === 'http:' ? url.toString() : null\n } catch {\n return null\n }\n}\n\nfunction safeHref(value: string): string | null {\n if (value.startsWith('/') && !value.startsWith('//')) return value\n return safeUrl(value)\n}\n\nfunction safeFormAction(value: string): string {\n return value.startsWith('/') && !value.startsWith('//') ? value : '/check'\n}\n\nfunction safeHost(value: string): string {\n const url = safeUrl(value)\n if (!url) return 'Unavailable source'\n return new URL(url).hostname\n}\n\nfunction clip(value: string | null | undefined, limit = MAX_ANSWER_CHARS): string {\n if (!value) return ''\n return value.length > limit ? `${value.slice(0, limit - 1).trimEnd()}…` : value\n}\n\nfunction plural(count: number, one: string, many: string): string {\n return count === 1 ? one : many\n}\n\nfunction formatTime(value: string | null | undefined): string | null {\n if (!value) return null\n const date = new Date(value)\n if (Number.isNaN(date.valueOf())) return null\n return new Intl.DateTimeFormat('en-US', {\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n hour: 'numeric',\n minute: '2-digit',\n }).format(date)\n}\n\nfunction statusCopy(status: DemoUiStatus): UiNotice | null {\n switch (status) {\n case 'loading':\n return {\n tone: 'neutral',\n title: 'Checking this brand',\n detail: 'The report will appear here when the bounded check finishes.',\n }\n case 'partial':\n return {\n tone: 'caution',\n title: 'Partial result',\n detail: 'Only the answers that were measured are counted below. The rest are shown as not measured.',\n }\n case 'error':\n return {\n tone: 'negative',\n title: 'This check could not finish',\n detail: 'Try again later or use a domain that responds publicly.',\n }\n case 'rate-limited':\n return {\n tone: 'caution',\n title: 'Check limit reached',\n detail: 'This public sample has reached its current limit. Try again later.',\n }\n case 'empty':\n return { tone: 'neutral', title: 'No report yet', detail: 'Enter a public domain to create a bounded snapshot.' }\n default:\n return null\n }\n}\n\nfunction renderNotice(notice: UiNotice | undefined): string {\n if (!notice) return ''\n const href = notice.action?.href ? safeHref(notice.action.href) : null\n const action = href && notice.action\n ? `${escapeHtml(notice.action.label)}`\n : ''\n return `\n `\n}\n\n/** Hover- and focus-revealed note. CSS only, because the page CSP allows no inline script. */\nfunction renderInfoTip(copy: string): string {\n return `${\n escapeHtml(copy)\n }`\n}\n\n/**\n * One tone vocabulary for the whole page. The badge and the KPI cell read the\n * SAME `verdictTone`, so the colour of \"Cautions\" cannot be rose in one place\n * and amber in the other — which is what happens when a renderer decides tone\n * a second time.\n */\nconst VERDICT_TONE_CLASS = {\n positive: 'signal-positive',\n negative: 'signal-negative',\n caution: 'signal-caution',\n neutral: 'signal-neutral',\n} as const\n\nconst VERDICT_GLYPH = { recommends: '✓', cautions: '!', mixed: '~', none: '−' } as const\n\n/** A verdict badge, never a score. An unmeasured row is dimmed, not toned. */\nfunction verdictBadge(answer: PerceptionAnswerViewModel): string {\n const glyph = answer.verdict === null ? '?' : VERDICT_GLYPH[answer.verdict]\n const className = answer.verdict === null ? 'signal-unavailable' : VERDICT_TONE_CLASS[answer.verdictTone]\n return `${glyph}${\n escapeHtml(answer.verdictLabel)\n }`\n}\n\n/**\n * The headline cell.\n *\n * A measured verdict quotes the answer's own first verified sentence. `none`\n * gets a statement of what happened, and an unmeasured row gets the reason it\n * was not measured — the row already says \"Not measured\", and the question a\n * reader then asks is \"why\".\n */\nfunction answerHeadlineCell(answer: PerceptionAnswerViewModel): string {\n if (answer.verdict === null) {\n return `${escapeHtml(answer.error ?? 'This answer was not measured.')}`\n }\n if (answer.headline) {\n return `${escapeHtml(answer.headline)}`\n }\n return 'The answer described the brand without taking a position.'\n}\n\nfunction renderSource(source: PerceptionSourceViewModel): string {\n const url = safeUrl(source.url)\n const title = source.title?.trim() || (url ? safeHost(url) : 'Unavailable source')\n const host = url ? safeHost(url) : source.domain\n const meta = `${escapeHtml(host ?? 'Unattributed host')} · ${escapeHtml(source.typeLabel)}`\n if (!url) {\n return `

${escapeHtml(title)}${meta}

`\n }\n return `

`\n}\n\nfunction renderAnswerDetails(answer: PerceptionAnswerViewModel): string {\n const quotes = answer.evidenceSentences.length\n ? `

What the answer said

${escapeHtml(sentence)}

`\n : `

What the answer said

${\n answer.verdict === null\n ? 'This answer was not measured, so nothing was read out of it.'\n : 'No sentence in this answer took a position on the brand.'\n }

`\n const concerns = answer.concerns.length\n ? `

Concerns this answer raised

${escapeHtml(concern)}

`\n : ''\n const sources = answer.sources.length\n ? `

${answer.sources.map(renderSource).join('')}`\n : `

${\n answer.verdict === null\n ? 'This answer was not measured, so no source was attributed to it.'\n : 'The engine attributed no source to this answer.'\n }

`\n const searches = answer.searchQueries.length\n ? `

Searches the engine ran${\n escapeHtml(answer.searchQueries.join(', '))\n }

`\n : ''\n const models = [\n answer.requestedModel ? `Requested: ${escapeHtml(answer.requestedModel)}` : '',\n answer.servedModel ? `Served: ${escapeHtml(answer.servedModel)}` : '',\n answer.completedAt && formatTime(answer.completedAt)\n ? `Completed: ${escapeHtml(formatTime(answer.completedAt)!)}`\n : '',\n ].filter(Boolean).join('')\n const answerText = answer.answerText\n ? `

Full answer

${\n escapeHtml(clip(answer.answerText))\n }

`\n : '

Answer text was not retained for this result.

'\n const error = answer.error\n ? `

Not measured${escapeHtml(answer.error)}

`\n : ''\n return `\n

View evidence

${models}

\n ${quotes}${concerns}${error}\n

Sources

${sources}

\n ${searches}\n ${answerText}\n

`\n}\n\n/**\n * The headline row.\n *\n * Flat KPI cells, never progress bars: \"2 of 3 answers\" has no target to fill,\n * and a bar would invent one. The denominator is written under every number\n * rather than once at the top, because the number and the bound it rests on\n * have to be read together.\n */\nfunction renderVerdictSnapshot(perception: PerceptionViewModel): string {\n const measured = perception.measuredAnswers\n const checkedAt = formatTime(perception.checkedAt)\n const cells = perception.verdicts.map((verdict) =>\n `

${escapeHtml(verdict.label)}

${\n measured === 0\n ? '

Not measured

'\n : `

${verdict.count}

`\n }${\n measured === 0 ? 'No answer was measured' : `of ${measured} ${plural(measured, 'answer', 'answers')}`\n }

`\n ).join('')\n return `\n

Verdict snapshot${renderInfoTip(VERDICT_TIP)}

\n ${checkedAt ? `

Checked ${escapeHtml(checkedAt)}

` : ''}\n

${perception.requestedAnswers} branded ${\n plural(perception.requestedAnswers, 'question', 'questions')\n }Gemini${measured} measured

${cells}\n

`\n}\n\nfunction renderAnswers(perception: PerceptionViewModel): string {\n const rows = perception.answers.map((answer) => `\n \n ${escapeHtml(answer.query)}\n ${verdictBadge(answer)}\n ${answerHeadlineCell(answer)}\n ${\n // An unmeasured answer has no sources because there is no answer, not\n // because the engine attributed none. A 0 here would be a measured zero.\n answer.verdict === null\n ? 'not measured'\n : answer.sources.length\n }\n ${renderAnswerDetails(answer)}\n `).join('')\n const empty =\n '

No answers were recorded

Answers appear once the engine replies to a branded question.

'\n return `\n

Answers${renderInfoTip(ANSWERS_TIP)}

\n ${perception.notice ? renderNotice(perception.notice) : ''}\n ${\n perception.answers.length\n ? `

${rows}

Branded question	Verdict	What the answer said	Sources	Evidence

`\n : empty\n }\n

`\n}\n\nfunction renderConcerns(perception: PerceptionViewModel): string {\n const measured = perception.measuredAnswers\n const body = perception.concerns.length\n ? `

${escapeHtml(concern.phrase)}in ${concern.answers} of ${measured} ${\n plural(measured, 'answer', 'answers')\n }

`\n : `

${\n measured === 0\n ? 'No answer was measured, so no concern could be read out of one.'\n : `No concern was raised in the ${measured} ${plural(measured, 'answer', 'answers')} measured.`\n }

`\n return `\n

Concerns raised${\n renderInfoTip(CONCERNS_TIP)\n }

\n ${body}\n

`\n}\n\nfunction renderSourceTypes(perception: PerceptionViewModel): string {\n const share = perception.sourceTypes\n const body = share\n ? `

${\n share.entries.map((entry) =>\n ``\n ).join('')\n }

Kind of source	Answers	Share
${escapeHtml(entry.label)}	${entry.answers} of ${share.measuredAnswers}	${entry.percent}%

${\n share.unattributedAnswers > 0\n ? `

${share.unattributedAnswers} measured ${\n plural(share.unattributedAnswers, 'answer', 'answers')\n } attributed no source at all, and ${\n plural(share.unattributedAnswers, 'is', 'are')\n } excluded from the share.

`\n : ''\n }`\n : `

${\n perception.measuredAnswers === 0\n ? 'No answer was measured, so no source could be attributed.'\n : 'No measured answer attributed a source.'\n }

`\n return `\n

Sources the engine attributed${\n renderInfoTip(SOURCES_TIP)\n }

\n ${body}\n

`\n}\n\n/**\n * The waiting state, revealed by script when a check is submitted.\n *\n * A check takes about 45 seconds and execution is request-bound, so a native\n * form POST leaves the browser blocked on a navigation for the whole time with\n * nothing on screen but a disabled button. The work still happens inside one\n * request; this just stops that request being the thing the browser is painting.\n *\n * It claims only what is knowable while waiting. The domain and any questions\n * the visitor typed are theirs already, and elapsed time is counted rather than\n * guessed. There is ONE track, not a list of phases: this runner really is\n * sequential — plan, then probe, then read the answers back — but the server\n * reports no phase, so naming three of them would tell the reader which one is\n * running when nothing knows that.\n */\nfunction renderLoadingView(): string {\n return `\n `\n}\n\n/**\n * The form does two different jobs, so it gets two treatments.\n *\n * On the landing page it is the ONLY thing to do, so it is the hero: a full\n * headline, a large field, and the scope note underneath. On a result page the\n * reader already has what they came for, so it shrinks into the header as a\n * secondary action and drops the onboarding copy.\n */\nfunction renderCheckForm(model: BrandPerceptionViewModel, variant: 'hero' | 'compact' = 'compact'): string {\n if (!model.form) return ''\n const value = model.status === 'empty' ? '' : model.domain\n const verificationStatus = model.form.verificationStatus ?? (model.form.turnstileSiteKey ? 'ready' : 'not-required')\n const hasTurnstile = Boolean(model.form.turnstileSiteKey && verificationStatus === 'ready')\n const disabled = verificationStatus === 'unavailable'\n // interaction-only: the challenge still runs on load, so a token is ready at\n // submit, but the widget is drawn only if the visitor has to do something.\n const verification = hasTurnstile\n ? `

`\n : verificationStatus === 'unavailable'\n ? `

!${\n escapeHtml(\n model.form.verificationUnavailableMessage ?? 'Human verification is unavailable. Public checks are disabled.',\n )\n }

`\n : ''\n const verificationSlot = verification\n ? `

${verification}

`\n : ''\n const hero = variant === 'hero'\n const submitLabel = model.form.submitLabel ?? 'Check a brand'\n return `\n `\n}\n\nfunction brandLockup(glyphHref: string): string {\n return `

brand perception checkpowered by $\"\"$ Canonry

`\n}\n\nconst FOOTER_LINKS =\n 'npm i -g @canonry/canonryGitHub canonry.ai'\n\nfunction renderMain(model: BrandPerceptionViewModel): string {\n const glyphHref = assetUrl(DEFAULT_GLYPH_SRC, canonryGlyph)\n const globalNotice = (model.status === 'ready' ? model.notice : model.notice ?? statusCopy(model.status)) ?? undefined\n const perception = model.perception\n // Nothing has been checked yet, so a report header over two empty panels is\n // scaffolding around an absence. Lead with the one action instead.\n if (model.status === 'empty') {\n return `\n

\n \n

What does AI say about your brand?${renderInfoTip(LANDING_EXPLAINER)}

\n ${renderCheckForm(model, 'hero')}\n

\n ${renderLoadingView()}\n

\n \n

`\n }\n return `\n

\n \n

${escapeHtml(model.domain)}

\n ${renderNotice(globalNotice)}\n

\n ${\n perception\n ? `${renderVerdictSnapshot(perception)}${renderAnswers(perception)}${renderConcerns(perception)}${\n renderSourceTypes(perception)\n }`\n : '

No brand perception result

Start a check to see what an answer engine says about this brand.

'\n }\n

\n \n

`\n}\n\n/** Returns a complete document so the runtime can use it as an HTTP response body. */\nexport function renderBrandPerception(model: BrandPerceptionViewModel): string {\n const title = `${model.displayName} | ${PRODUCT_NAME}`\n return `\n\n \n \n \n \n ${escapeHtml(title)}\n \n \n \n \n \n \n ${\n model.form?.turnstileSiteKey && (model.form.verificationStatus ?? 'ready') === 'ready'\n ? ''\n : ''\n }\n \n ${renderMain(model)}\n`\n}\n\n/** Useful for a host that owns the outer document or wants an embedded fragment. */\nexport function renderBrandPerceptionBody(model: BrandPerceptionViewModel): string {\n return renderMain(model)\n}\n","deleted",false,"label",[47,48,24],"src","ui","801445f4-c67d-433d-af43-92af47fb72c9",["D",1788456812405],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","What AI engines say about a brand. Powered by Canonry.","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/aa8bd75a-0bc9-4694-0b72-9f187d1a6201/square512?exp=1789549199&sig=028232929fe339d399c508e5e799ac885a1ee83d90e910991ab4a79d08c704b5","userId","891d245e-ec71-404d-a5ca-223733ee2844","pinnedFileId","f06d06b6-a7bd-11f1-990b-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a0460b-6625-75ce-9e7f-9a6b062b0798","tursoName","801445f4c67d433daf4392af47fb72c9","tursoHostname","801445f4c67d433daf4392af47fb72c9-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789501263826],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_111":107},"org",{"_9":10,"_104":105,"_106":107,"_60":-5,"_108":109,"_110":44},"branch",{"_37":94,"_11":95,"_22":30,"_96":49,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":12,"_103":10},"isOwned",40,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Canonry","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/5ae39d80-0d23-48e5-89d8-6bd2a7096401/square512?exp=1789549199&sig=8fff3646e917fd1a59abe9de8276029babb42246cd40658a590eb6cf82b240b4","tier","free","canRestrictVals","profileImageUrl","ctx",{"_87":-5,"_145":146,"_147":148,"_149":150,"_151":44,"_152":44,"_153":44,"_154":34,"_155":-5,"_156":-7,"_157":-7,"_158":68,"_159":44,"_160":44,"_161":-5,"_162":44,"_163":44,"_164":44,"_165":-5},"ENV",{"_116":117,"_118":119,"_120":95,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142,"_143":144},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]