found.\" });\n recommendations.push(\"Add a descriptive <title> tag (30–60 characters) including the primary keyword.\");\n } else {\n const len = title.length;\n if (len >= 30 && len <= 60) {\n checks.push({ name: \"Title tag\", status: \"pass\", detail: `${len} chars — \"${title}\".` });\n } else if (len < 30) {\n checks.push({ name: \"Title tag\", status: \"warn\", detail: `Only ${len} chars (aim 30–60) — \"${title}\".` });\n recommendations.push(\"Lengthen the title toward 30–60 characters to better describe the page.\");\n } else {\n checks.push({ name: \"Title tag\", status: \"warn\", detail: `${len} chars may truncate in SERPs (aim 30–60).` });\n recommendations.push(\"Shorten the title to under ~60 characters so it does not truncate in search results.\");\n }\n }\n\n // Meta description (length 70–160 ideal).\n if (!metaDesc) {\n checks.push({ name: \"Meta description\", status: \"fail\", detail: \"No meta description found.\" });\n recommendations.push(\"Add a meta description (70–160 characters) that summarizes the page and includes the keyword.\");\n } else {\n const len = metaDesc.length;\n if (len >= 70 && len <= 160) {\n checks.push({ name: \"Meta description\", status: \"pass\", detail: `${len} chars.` });\n } else if (len < 70) {\n checks.push({ name: \"Meta description\", status: \"warn\", detail: `Only ${len} chars (aim 70–160).` });\n recommendations.push(\"Expand the meta description toward 70–160 characters.\");\n } else {\n checks.push({ name: \"Meta description\", status: \"warn\", detail: `${len} chars may truncate (aim 70–160).` });\n recommendations.push(\"Trim the meta description to ~160 characters to avoid SERP truncation.\");\n }\n }\n\n // H1 (exactly one).\n if (h1.count === 0) {\n checks.push({ name: \"H1 heading\", status: \"fail\", detail: \"No <h1> on the page.\" });\n recommendations.push(\"Add a single, descriptive <h1> heading.\");\n } else if (h1.count === 1) {\n checks.push({ name: \"H1 heading\", status: \"pass\", detail: h1.first ? `\"${h1.first}\".` : \"One H1 present.\" });\n } else {\n checks.push({ name: \"H1 heading\", status: \"warn\", detail: `${h1.count} H1 tags found — use exactly one.` });\n recommendations.push(\"Reduce to a single <h1>; demote the others to <h2>/<h3>.\");\n }\n\n // Word count (300+ for substantive content; 800+ ideal for ranking pages).\n if (wordCount >= 800) {\n checks.push({ name: \"Content length\", status: \"pass\", detail: `${wordCount} words.` });\n } else if (wordCount >= 300) {\n checks.push({ name: \"Content length\", status: \"warn\", detail: `${wordCount} words — thin for a ranking page (aim 800+).` });\n recommendations.push(\"Expand the content toward 800+ words to improve topical depth.\");\n } else {\n checks.push({ name: \"Content length\", status: \"fail\", detail: `${wordCount} words — too thin.` });\n recommendations.push(\"This page is very thin; add substantive, original content (aim 300+ words minimum).\");\n }\n\n // Internal links.\n if (links.internal >= 3) {\n checks.push({ name: \"Internal links\", status: \"pass\", detail: `${links.internal} internal links.` });\n } else if (links.internal >= 1) {\n checks.push({ name: \"Internal links\", status: \"warn\", detail: `${links.internal} internal link(s) — add more.` });\n recommendations.push(\"Add internal links to related pages to spread authority and aid crawling.\");\n } else {\n checks.push({ name: \"Internal links\", status: \"fail\", detail: \"No internal links found.\" });\n recommendations.push(\"Add internal links to related content on your site.\");\n }\n\n // Outbound links (at least one authoritative reference is healthy).\n if (links.outbound >= 1) {\n checks.push({ name: \"Outbound links\", status: \"pass\", detail: `${links.outbound} outbound link(s).` });\n } else {\n checks.push({ name: \"Outbound links\", status: \"warn\", detail: \"No outbound links — cite authoritative sources where relevant.\" });\n recommendations.push(\"Link out to a relevant authoritative source where it strengthens the content.\");\n }\n\n // Image alt coverage.\n if (images.count === 0) {\n checks.push({ name: \"Image alt text\", status: \"info\", detail: \"No images on the page.\" });\n } else if (images.missingAlt === 0) {\n checks.push({ name: \"Image alt text\", status: \"pass\", detail: `All ${images.count} image(s) have alt text.` });\n } else {\n const ratio = images.missingAlt / images.count;\n checks.push({\n name: \"Image alt text\",\n status: ratio > 0.5 ? \"fail\" : \"warn\",\n detail: `${images.missingAlt} of ${images.count} image(s) missing alt text.`,\n });\n recommendations.push(\"Add descriptive alt text to every image for accessibility and image search.\");\n }\n\n // Canonical.\n if (canonical) {\n checks.push({ name: \"Canonical tag\", status: \"pass\", detail: \"Canonical link present.\" });\n } else {\n checks.push({ name: \"Canonical tag\", status: \"warn\", detail: \"No canonical link found.\" });\n recommendations.push(\"Add a <link rel=\\\"canonical\\\"> to consolidate duplicate URLs.\");\n }\n\n // Mobile viewport.\n if (viewport) {\n checks.push({ name: \"Mobile viewport\", status: \"pass\", detail: \"Responsive viewport meta present.\" });\n } else {\n checks.push({ name: \"Mobile viewport\", status: \"fail\", detail: \"No responsive viewport meta tag.\" });\n recommendations.push(\"Add <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\"> for mobile.\");\n }\n\n // Keyword-in-title coherence with GSC top query (real signal when available).\n if (gsc && title) {\n // The page's own top GSC query would require a second call; instead we surface position as\n // an informational, real check rather than inventing a keyword.\n checks.push({\n name: \"Search Console\",\n status: \"info\",\n detail: `${gsc.clicks} clicks · ${gsc.impressions} impressions · CTR ${gsc.ctr.toFixed(1)}% · avg pos ${gsc.position.toFixed(1)} (90d).`,\n });\n if (gsc.position > 10 && gsc.impressions > 0) {\n recommendations.push(`This page averages position ${gsc.position.toFixed(1)} in Search Console — improving on-page relevance and links could lift it onto page one.`);\n }\n } else if (wp.isOurSite) {\n checks.push({ name: \"Search Console\", status: \"skip\", detail: \"Connect Google Search Console to see live query/position data for this page.\" });\n }\n\n // Ahrefs domain context (informational, real).\n if (ahrefs) {\n checks.push({\n name: \"Domain authority\",\n status: \"info\",\n detail: `Ahrefs DR ${ahrefs.domain_rating ?? \"—\"}${ahrefs.organic_traffic != null ? ` · organic traffic ${ahrefs.organic_traffic}` : \"\"}.`,\n });\n }\n\n if (wp.isOurSite) {\n checks.push({ name: \"Ownership\", status: \"info\", detail: \"URL is on your connected WordPress site — content checks use the published post body.\" });\n }\n\n // 7) Score from the SCORED checks only (pass/warn/fail). info/skip do not affect the score.\n const scored = checks.filter((c) => c.status === \"pass\" || c.status === \"warn\" || c.status === \"fail\");\n const achieved = scored.reduce((sum, c) => sum + pointsFor(c.status), 0);\n const score = scored.length ? Math.round((achieved / scored.length) * 100) : null;\n\n // De-duplicate recommendations while preserving order.\n const seen = new Set<string>();\n const uniqueRecs = recommendations.filter((r) => (seen.has(r) ? false : (seen.add(r), true)));\n\n return {\n url,\n analyzable: true,\n score,\n checks,\n recommendations: uniqueRecs,\n signals: {\n fetched: true,\n http_status: httpStatus,\n title,\n title_length: title?.length ?? 0,\n meta_description: metaDesc,\n meta_description_length: metaDesc?.length ?? 0,\n h1_count: h1.count,\n h1_text: h1.first,\n word_count: wordCount,\n internal_links: links.internal,\n outbound_links: links.outbound,\n image_count: images.count,\n images_missing_alt: images.missingAlt,\n has_canonical: canonical,\n has_viewport: viewport,\n is_our_site: wp.isOurSite,\n },\n gsc,\n ahrefs,\n notes,\n };\n}\n","createdAt",["D",1780475238533],"branchVersion","branchId","ecb58646-56c9-11f1-abd8-ee650bb23af1","id","ecb4ccf6-56c9-11f1-abd8-ee650bb23af1","aihivecommand",["D",1779556068488],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","AIHive Command Center","imageUrl","e8c17657-6210-4c45-bd2b-dbcf2e020293","pinnedFileId","32167c2c-56ca-11f1-955a-ee650bb23af1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019e4de5-f6b1-7488-a017-a3a028bc2ba8","tursoName","ecb4ccf656c911f1abd8ee650bb23af1","tursoHostname","ecb4ccf656c911f1abd8ee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789503703835],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":98,"_101":102,"_18":54,"_103":104,"_105":24},"branch",{"_13":88,"_31":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"isOwned",1111,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","vlduy123","handle","displayName","avatar","https://avatars.githubusercontent.com/u/208025931?v=4","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":1690,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":1691,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":1692,"_83":1693,"_85":1694,"_87":24},"tree",[505,576,594,623,624,625,626,627,628,629,630,631,632,633,634,635,636,637,638,639,640,641,642,643,644,645,646,647,648,649,650,651,652,653,654,655,656,657,658,659,660,661,662],"files",[505,506,507,508,509,510,511,512,513,514,515,516,517,518,519,520,521,522,523,524,525,526,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,542,543,544,545,546,547,548,549,550,551,552,553,554,555,556,557,558,559,560,561,562,563,564,565,566,567,568,569,570,571,572,573,574,575,576,577,578,579,580,581,582,583,584,585,586,587,588,589,590,591,592,593,594,595,596,597,598,599,600,601,602,603,604,605,606,607,608,609,610,611,612,613,614,615,616,617,618,619,620,621,622,623,624,625,626,627,628,629,630,631,632,633,634,635,636,637,638,639,640,641,642,643,644,645,646,647,648,649,650,651,652,653,654,655,656,657,658,659,660,661,662],"counts",{"_495":62,"_496":348,"_497":62,"_498":499,"_500":501},"contents",[129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":490,"_31":491,"_29":492,"_175":-5,"_40":41,"_39":266,"_177":58,"_37":493,"_13":62,"_33":482,"_35":-5,"_23":24,"_181":-5,"_26":494},{"_42":484,"_31":485,"_29":486,"_175":-5,"_40":41,"_39":487,"_177":58,"_37":488,"_13":62,"_33":482,"_35":-5,"_23":24,"_181":-5,"_26":489},{"_42":477,"_31":478,"_29":479,"_175":-5,"_40":41,"_39":480,"_177":58,"_37":481,"_13":62,"_33":482,"_35":-5,"_23":24,"_181":-5,"_26":483},{"_42":470,"_31":471,"_29":472,"_175":-5,"_40":41,"_39":473,"_177":24,"_37":474,"_13":62,"_33":34,"_35":475,"_23":24,"_181":-5,"_26":476},{"_42":463,"_31":464,"_29":465,"_175":-5,"_40":41,"_39":466,"_177":24,"_37":467,"_13":204,"_33":34,"_35":468,"_23":24,"_181":-5,"_26":469},{"_42":456,"_31":457,"_29":458,"_175":-5,"_40":41,"_39":459,"_177":58,"_37":460,"_13":266,"_33":34,"_35":461,"_23":24,"_181":-5,"_26":462},{"_42":448,"_31":449,"_29":450,"_175":-5,"_40":41,"_39":451,"_177":24,"_37":452,"_13":453,"_33":34,"_35":454,"_23":24,"_181":-5,"_26":455},{"_42":440,"_31":441,"_29":442,"_175":-5,"_40":41,"_39":443,"_177":24,"_37":444,"_13":445,"_33":34,"_35":446,"_23":24,"_181":-5,"_26":447},{"_42":433,"_31":434,"_29":435,"_175":-5,"_40":41,"_39":436,"_177":58,"_37":437,"_13":348,"_33":34,"_35":438,"_23":24,"_181":-5,"_26":439},{"_42":425,"_31":426,"_29":427,"_175":-5,"_40":41,"_39":428,"_177":58,"_37":429,"_13":430,"_33":34,"_35":431,"_23":24,"_181":-5,"_26":432},{"_42":417,"_31":418,"_29":419,"_175":-5,"_40":41,"_39":420,"_177":58,"_37":421,"_13":422,"_33":34,"_35":423,"_23":24,"_181":-5,"_26":424},{"_42":410,"_31":411,"_29":412,"_175":-5,"_40":41,"_39":413,"_177":58,"_37":414,"_13":242,"_33":34,"_35":415,"_23":24,"_181":-5,"_26":416},{"_42":402,"_31":403,"_29":404,"_175":-5,"_40":41,"_39":405,"_177":58,"_37":406,"_13":407,"_33":34,"_35":408,"_23":24,"_181":-5,"_26":409},{"_42":395,"_31":396,"_29":397,"_175":-5,"_40":41,"_39":398,"_177":58,"_37":399,"_13":204,"_33":34,"_35":400,"_23":24,"_181":-5,"_26":401},{"_42":388,"_31":389,"_29":390,"_175":-5,"_40":41,"_39":391,"_177":58,"_37":392,"_13":62,"_33":34,"_35":393,"_23":24,"_181":-5,"_26":394},{"_42":381,"_31":382,"_29":383,"_175":-5,"_40":41,"_39":384,"_177":58,"_37":385,"_13":303,"_33":34,"_35":386,"_23":24,"_181":-5,"_26":387},{"_42":374,"_31":375,"_29":376,"_175":-5,"_40":41,"_39":377,"_177":58,"_37":378,"_13":204,"_33":34,"_35":379,"_23":24,"_181":-5,"_26":380},{"_42":366,"_31":367,"_29":368,"_175":-5,"_40":41,"_39":369,"_177":24,"_37":370,"_13":371,"_33":34,"_35":372,"_23":24,"_181":-5,"_26":373},{"_42":358,"_31":359,"_29":360,"_175":-5,"_40":41,"_39":361,"_177":24,"_37":362,"_13":363,"_33":34,"_35":364,"_23":24,"_181":-5,"_26":365},{"_42":351,"_31":352,"_29":353,"_175":-5,"_40":41,"_39":354,"_177":58,"_37":355,"_13":311,"_33":34,"_35":356,"_23":24,"_181":-5,"_26":357},{"_42":343,"_31":344,"_29":345,"_175":-5,"_40":41,"_39":346,"_177":24,"_37":347,"_13":348,"_33":34,"_35":349,"_23":24,"_181":-5,"_26":350},{"_42":336,"_31":337,"_29":338,"_175":-5,"_40":41,"_39":339,"_177":58,"_37":340,"_13":62,"_33":34,"_35":341,"_23":24,"_181":-5,"_26":342},{"_42":329,"_31":330,"_29":331,"_175":-5,"_40":41,"_39":332,"_177":58,"_37":333,"_13":303,"_33":34,"_35":334,"_23":24,"_181":-5,"_26":335},{"_42":321,"_31":322,"_29":323,"_175":-5,"_40":41,"_39":324,"_177":24,"_37":325,"_13":326,"_33":34,"_35":327,"_23":24,"_181":-5,"_26":328},{"_42":314,"_31":315,"_29":316,"_175":-5,"_40":41,"_39":317,"_177":58,"_37":318,"_13":266,"_33":34,"_35":319,"_23":24,"_181":-5,"_26":320},{"_42":306,"_31":307,"_29":308,"_175":-5,"_40":41,"_39":309,"_177":58,"_37":310,"_13":311,"_33":34,"_35":312,"_23":24,"_181":-5,"_26":313},{"_42":298,"_31":299,"_29":300,"_175":-5,"_40":41,"_39":301,"_177":58,"_37":302,"_13":303,"_33":34,"_35":304,"_23":24,"_181":-5,"_26":305},{"_42":290,"_31":291,"_29":292,"_175":-5,"_40":41,"_39":293,"_177":24,"_37":294,"_13":295,"_33":34,"_35":296,"_23":24,"_181":-5,"_26":297},{"_42":283,"_31":284,"_29":285,"_175":-5,"_40":41,"_39":286,"_177":58,"_37":287,"_13":266,"_33":34,"_35":288,"_23":24,"_181":-5,"_26":289},{"_42":276,"_31":277,"_29":278,"_175":-5,"_40":41,"_39":279,"_177":58,"_37":280,"_13":220,"_33":34,"_35":281,"_23":24,"_181":-5,"_26":282},{"_42":269,"_31":270,"_29":271,"_175":-5,"_40":41,"_39":272,"_177":58,"_37":273,"_13":204,"_33":34,"_35":274,"_23":24,"_181":-5,"_26":275},{"_42":261,"_31":262,"_29":263,"_175":-5,"_40":41,"_39":264,"_177":58,"_37":265,"_13":266,"_33":34,"_35":267,"_23":24,"_181":-5,"_26":268},{"_42":253,"_31":254,"_29":255,"_175":-5,"_40":41,"_39":256,"_177":58,"_37":257,"_13":258,"_33":34,"_35":259,"_23":24,"_181":-5,"_26":260},{"_42":245,"_31":246,"_29":247,"_175":-5,"_40":41,"_39":248,"_177":58,"_37":249,"_13":250,"_33":34,"_35":251,"_23":24,"_181":-5,"_26":252},{"_42":237,"_31":238,"_29":239,"_175":-5,"_40":41,"_39":240,"_177":58,"_37":241,"_13":242,"_33":34,"_35":243,"_23":24,"_181":-5,"_26":244},{"_42":230,"_31":231,"_29":232,"_175":-5,"_40":41,"_39":233,"_177":58,"_37":234,"_13":62,"_33":34,"_35":235,"_23":24,"_181":-5,"_26":236},{"_42":223,"_31":224,"_29":225,"_175":-5,"_40":41,"_39":226,"_177":58,"_37":227,"_13":62,"_33":34,"_35":228,"_23":24,"_181":-5,"_26":229},{"_42":215,"_31":216,"_29":217,"_175":-5,"_40":41,"_39":218,"_177":58,"_37":219,"_13":220,"_33":34,"_35":221,"_23":24,"_181":-5,"_26":222},{"_42":207,"_31":208,"_29":209,"_175":-5,"_40":41,"_39":210,"_177":58,"_37":211,"_13":212,"_33":34,"_35":213,"_23":24,"_181":-5,"_26":214},{"_42":199,"_31":200,"_29":201,"_175":-5,"_40":41,"_39":202,"_177":58,"_37":203,"_13":204,"_33":34,"_35":205,"_23":24,"_181":-5,"_26":206},{"_42":191,"_31":192,"_29":56,"_175":-5,"_40":41,"_39":193,"_177":24,"_37":194,"_13":195,"_33":196,"_35":197,"_23":24,"_181":-5,"_26":198},{"_42":183,"_31":184,"_29":185,"_175":-5,"_40":41,"_39":186,"_177":24,"_37":187,"_13":188,"_33":34,"_35":189,"_23":24,"_181":-5,"_26":190},{"_42":172,"_31":173,"_29":174,"_175":-5,"_40":41,"_39":176,"_177":58,"_37":178,"_13":179,"_33":34,"_35":180,"_23":24,"_181":-5,"_26":182},"026e63e8-5d7a-11f1-a7f5-1607ee4eb77e","types.ts","151549be-56ca-11f1-bc41-ee650bb23af1","parentId",699,"latest",["D",1780291403301],16,"export interface Integration {\n id: string;\n name: string; // 'ahrefs'|'ga4'|'gsc'|'linkedin'|'outlook'|'wordpress'|'youtube'|'producthunt'\n api_key?: string;\n api_secret?: string;\n access_token?: string;\n refresh_token?: string;\n extra_config?: string; // JSON string\n connected_at?: string;\n updated_at?: string;\n}\n\nexport interface LLMConfig {\n id: string;\n // QA fix: gemini was already routed in callLLM but missing from the union, causing TS noise.\n provider: 'anthropic' | 'openai' | 'gemini' | 'custom';\n api_key: string;\n endpoint?: string;\n model: string;\n updated_at?: string;\n // Per-provider key presence flags (computed from the 4 api_key_<provider> columns) —\n // used by Settings UI to render \"(saved)\" pills without leaking the actual key.\n has_key?: { anthropic: boolean; openai: boolean; gemini: boolean; custom: boolean };\n}\n\nexport interface Agent {\n id: string;\n name: string;\n workspace: 'marketing' | 'sales';\n description: string;\n system_prompt: string;\n tools: string; // JSON array string\n model?: string;\n enabled: number; // 0 or 1\n created_at: string;\n updated_at: string;\n created_by: 'user' | 'ai';\n // B2: budget cap (USD/month) + running spend, joined from agent_budgets\n monthly_cap?: number;\n current_spend?: number;\n}\n\nexport interface Conversation {\n id: string;\n agent_id?: string;\n workspace: string;\n messages: string; // JSON array string\n created_at: string;\n updated_at: string;\n}\n\nexport interface Task {\n id: string;\n agent_id?: string;\n workspace: string;\n title: string;\n status: 'pending' | 'running' | 'done' | 'failed';\n input?: string;\n output?: string;\n created_at: string;\n completed_at?: string;\n}\n\nexport interface ChatMessage {\n role: 'user' | 'assistant' | 'system' | 'tool';\n content: string;\n timestamp?: string;\n // Tool-use fields (OpenAI-style) carried at runtime by chat.ts / llm.ts.\n tool_calls?: any[];\n tool_call_id?: string;\n reasoning_content?: string;\n // Part 14.2: structured execution trace (round/tool/action/message steps) shown in the UI.\n trace?: Array<{ t: string; role?: string; name?: string; preview?: string; args_preview?: string; result_preview?: string; ok?: boolean; ms?: number; n?: number; ts?: string }>;\n}\n","label",[173],"0cd8e370-5f15-11f1-bf54-1607ee4eb77e","router.ts","30479b74-56ca-11f1-a296-ee650bb23af1",1010,["D",1780467943919],126,"import { sqlite, initDB, DEFAULT_AGENT_SEEDS, currentRole, currentTenantId, currentCtx } from \"./db.ts\";\nimport { registerUser, loginUser, getMe, upsertOAuthUser, bootstrapOwner } from \"./api/auth.ts\";\nimport { resolveSession, sessionSetCookie, sessionClearCookie } from \"./api/session.ts\";\nimport { newOAuthState, CLEAR_OAUTH_STATE, redirectWithCookie, oauthStateValid, identityLoginStart, identityLoginCallback } from \"./api/oauth_login.ts\";\nimport { listAgents, createAgent, updateAgent, deleteAgent } from \"./api/agents.ts\";\nimport { getLLMConfig, saveLLMConfig } from \"./api/llm.ts\";\nimport { handleChat, handleChatStream, listConversations, getConversationById, deleteConversation } from \"./api/chat.ts\";\nimport { handleIntegrationProxy, getCredentials, GOOGLE_SERVICES, MICROSOFT_SCOPES, getIntegrationSchema, listDescriptorNames } from \"./api/integrations.ts\";\nimport { serveAppModule } from \"./app_modules.ts\";\nimport { getFunnelSummary, getCorrelations, getRecommendations, getLeadScores, getAIOKpis, getIntelligenceFeed } from \"./api/intelligence.ts\";\nimport { listSignals, recordSignal, actionSignal, getHotLeads, getHotLeadsCount } from \"./api/signals.ts\";\nimport { listObjectives, createObjective, updateObjective, deleteObjective, createKeyResult, updateKeyResult, getOKRDashboard, syncObjectivesFromFunnel } from \"./api/okrs.ts\";\nimport { getNSM, setNSM, recordNSMValue, getNSMProgress } from \"./api/nsm.ts\";\nimport { listCohorts, createCohort, deleteCohort, getCohortSummary, getEngagementVelocity, getAttributionSummary, recordConversion, getRetention, getRevenueModel } from \"./api/aio.ts\";\nimport { getLatestDigest, generateDigest, getDigestHistory } from \"./api/digest.ts\";\nimport { listExperiments, createExperiment, updateExperiment, deleteExperiment, runExperiment, completeExperiment, getExperimentStats, suggestICE } from \"./api/experiments.ts\";\nimport { getUnifiedCalendar, getCalendarSummary, createCalendarEntry, updateCalendarEntry, deleteCalendarEntry } from \"./api/calendar_unified.ts\";\nimport { getGraphify } from \"./api/graphify.ts\";\nimport { listTasks, createTask, updateTask, deleteTask, listIceRankedTasks, generateTasksFromSource, runTask } from \"./api/tasks.ts\";\nimport { listDeals, getDeal, createDeal, updateDeal, deleteDeal, syncDealsFromLeads, listCandidates, importDeals } from \"./api/deals.ts\";\nimport { listKnowledgeFiles, getKnowledgeFile, createKnowledgeFile, updateKnowledgeFile, deleteKnowledgeFile, summarizeKnowledgeFile, buildKnowledgeGraph, AI_FEATURES } from \"./api/knowledge.ts\";\nimport { getCompanyProfile, setCompanyProfile, getBrandContext, setBrandContext } from \"./api/company.ts\";\nimport { enrichCompanyProfile } from \"./api/company-enrichment.ts\";\nimport { listMemory, addMemory, updateMemory, deleteMemory } from \"./api/memory.ts\";\nimport { listSkills, getSkill, setSkillState, createCustomSkill } from \"./api/skills.ts\";\nimport { getMethodConfig, saveMethodConfig, getMethodsMetadata } from \"./api/method_config.ts\";\nimport { listActions, enqueueAction, getAction, approveAction, rejectAction } from \"./api/actions.ts\";\nimport { processPendingRuns } from \"./cron.ts\";\nimport { getExecutedWorkCounts } from \"./api/propagate.ts\";\nimport { listCampaigns, getCampaign, getCampaignAgents, createCampaign, deleteCampaign, listCampaignRuns, orchestrateCampaignRun, updateCampaign, setCampaignTrigger } from \"./api/campaigns.ts\";\nimport { getWorldActivity, getWorldBoard, getWorldProject } from \"./api/world.ts\";\nimport { handlePlatformRoutes } from \"./api/platform.ts\";\nimport { isCrmPath, handleCrmRoutes } from \"./api/crm_routes.ts\";\nimport { isMarketingPath, handleMarketingRoutes } from \"./api/marketing_routes.ts\";\n\nconst corsHeaders = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, PUT, DELETE, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, Authorization\",\n};\n\n// App version for the data-free health probe. Prefer the val.town deploy id (DENO_DEPLOYMENT_ID\n// is set by the runtime per deploy); fall back to a hardcoded release tag when running locally.\nconst APP_VERSION = (() => {\n try { return Deno.env.get(\"DENO_DEPLOYMENT_ID\") || \"p3-s3\"; } catch { return \"p3-s3\"; }\n})();\n\nfunction json(data: unknown, status = 200): Response {\n return new Response(JSON.stringify(data), {\n status,\n headers: {\n \"Content-Type\": \"application/json\",\n ...corsHeaders,\n },\n });\n}\n// JSON response that also carries a Set-Cookie header (session set/clear on auth endpoints).\nfunction jsonWithCookie(data: unknown, setCookie: string, status = 200): Response {\n const res = json(data, status);\n res.headers.append(\"Set-Cookie\", setCookie);\n return res;\n}\n// Best-effort client IP for per-IP rate limiting (val.town/Cloudflare forwarded headers).\nfunction clientIp(req: Request): string {\n return req.headers.get(\"x-forwarded-for\")?.split(\",\")[0].trim() || req.headers.get(\"cf-connecting-ip\") || \"\";\n}\n\n// Mask an integration row before returning it: NO endpoint may return secrets in cleartext\n// — only presence flags + a short masked hint.\nfunction maskIntegration(obj: any, googleConnected = false) {\n return {\n ...obj,\n connected: !!(obj.api_key || obj.access_token) ||\n (GOOGLE_SERVICES.includes(String(obj.name)) && googleConnected),\n has_api_key: !!obj.api_key,\n has_api_secret: !!obj.api_secret,\n has_access_token: !!obj.access_token,\n api_key: obj.api_key ? String(obj.api_key).slice(0, 4) + \"***\" : undefined,\n api_secret: obj.api_secret ? \"***\" : undefined,\n access_token: obj.access_token ? \"***\" : undefined,\n refresh_token: obj.refresh_token ? \"***\" : undefined,\n };\n}\n\n\nexport async function handleRequest(req: Request, url: URL): Promise<Response> {\n const { pathname } = url;\n const method = req.method;\n const tid = currentTenantId(); // tenant scope for every business query (stable within request)\n\n // CORS preflight\n if (method === \"OPTIONS\") {\n return new Response(null, { status: 204, headers: corsHeaders });\n }\n\n try {\n // GET /api/health — data-free liveness probe: { ok, version } (+ legacy status/timestamp).\n if (pathname === \"/api/health\" && method === \"GET\") {\n return json({ ok: true, version: APP_VERSION, status: \"ok\", timestamp: new Date().toISOString() });\n }\n\n // GET /api/health/auth - gated token verifier. Reaching this (past the main.ts gate) means the\n // APP_TOKEN is valid; the login screen uses it to confirm the password.\n if (pathname === \"/api/health/auth\" && method === \"GET\") {\n return json({ ok: true });\n }\n\n // --- Auth: email/password + session ----\n // Thin handlers — logic lives in api/auth.ts; the \"nexus_session\" cookie via api/session.ts.\n if (pathname === \"/api/auth/register\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const r = await registerUser({ email: body.email, password: body.password, name: body.name, honeypot: body.honeypot ?? body.company_url, turnstileToken: body.turnstileToken, ip: clientIp(req) });\n if (!r.ok) return json({ ok: false, error: r.error }, 400);\n return jsonWithCookie({ ok: true }, sessionSetCookie(r.ctxToken!));\n }\n if (pathname === \"/api/auth/login\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const r = await loginUser({ email: body.email, password: body.password, ip: clientIp(req) });\n if (!r.ok) return json({ ok: false, error: r.error }, 401);\n return jsonWithCookie({ ok: true }, sessionSetCookie(r.ctxToken!));\n }\n if (pathname === \"/api/auth/logout\" && method === \"POST\") {\n return jsonWithCookie({ ok: true }, sessionClearCookie());\n }\n if (pathname === \"/api/auth/me\" && method === \"GET\") {\n const ctx = await resolveSession(req);\n if (!ctx) return json({ ok: false, user: null }, 200);\n return json({ ok: true, ...(await getMe(ctx)) });\n }\n\n // GET /api/config - LLM runtime config + all app_config key/values\n if (pathname === \"/api/config\" && method === \"GET\") {\n const llmConfig = await getLLMConfig();\n const merged: Record<string, any> = {\n provider: llmConfig.provider,\n model: llmConfig.model,\n has_key: (llmConfig as any).has_key,\n };\n try {\n const r = await sqlite.execute(\"SELECT key, value FROM app_config WHERE tenant_id = ?\", [tid]);\n for (const row of (r.rows || []) as any[]) {\n const k = String(row[0]);\n let v: any = row[1];\n if (typeof v === \"string\") { try { v = JSON.parse(v); } catch { /* keep raw string */ } }\n merged[k] = v;\n }\n } catch { /* app_config missing → just return LLM fields */ }\n return json(merged);\n }\n // POST /api/config - upsert arbitrary key/value into app_config (Settings toggles, ROI inputs…).\n if (pathname === \"/api/config\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const updated: Record<string, any> = {};\n try {\n for (const [k, v] of Object.entries(body)) {\n if (k === \"provider\" || k === \"model\" || k === \"has_key\") continue;\n const value = typeof v === \"string\" ? v : JSON.stringify(v);\n await sqlite.execute(\n \"INSERT INTO app_config (key, value, tenant_id) VALUES (?, ?, ?) ON CONFLICT(key) DO UPDATE SET value = excluded.value, tenant_id = excluded.tenant_id, updated_at = datetime('now')\",\n [k, value, tid],\n );\n updated[k] = v;\n }\n return json({ success: true, updated });\n } catch (e: any) {\n return json({ error: String(e?.message || e) }, 500);\n }\n }\n\n // --- Frontend JS module routes (table lives in app_modules.ts to keep router under 80KB) ----\n if (method === \"GET\") {\n const _moduleSrc = serveAppModule(pathname);\n if (_moduleSrc !== null) {\n return new Response(_moduleSrc, {\n headers: {\n \"Content-Type\": \"application/javascript\",\n \"Cache-Control\": \"no-cache, no-store, must-revalidate\",\n ...corsHeaders,\n },\n });\n }\n }\n\n // --- Intelligence routes ----\n if (pathname === \"/api/intelligence/funnel-summary\" && method === \"GET\") {\n const force = url.searchParams.get(\"force\") === \"1\";\n const days = parseInt(url.searchParams.get(\"days\") ?? \"30\", 10);\n return json(await getFunnelSummary(force, days));\n }\n if (pathname === \"/api/intelligence/correlations\" && method === \"GET\") {\n const force = url.searchParams.get(\"force\") === \"1\";\n return json(await getCorrelations(force));\n }\n if (pathname === \"/api/intelligence/recommendations\" && method === \"GET\") {\n return json(await getRecommendations());\n }\n if (pathname === \"/api/intelligence/leads\" && method === \"GET\") {\n return json(await getLeadScores());\n }\n if (pathname === \"/api/intelligence/kpis\" && method === \"GET\") {\n return json(await getAIOKpis());\n }\n if (pathname === \"/api/intelligence/feed\" && method === \"GET\") {\n return json(await getIntelligenceFeed());\n }\n // Execution-aware metric: how much real work was completed (tasks/experiments).\n if (pathname === \"/api/intelligence/executed-work\" && method === \"GET\") {\n const days = parseInt(url.searchParams.get(\"days\") ?? \"30\", 10);\n return json(await getExecutedWorkCounts(days));\n }\n\n // --- Signals routes ----\n if (pathname === \"/api/signals\" && method === \"GET\") {\n const actioned = url.searchParams.get(\"actioned\");\n const lead_email = url.searchParams.get(\"lead_email\") ?? undefined;\n return json(await listSignals({ lead_email, actioned: actioned === \"true\" ? true : actioned === \"false\" ? false : undefined }));\n }\n if (pathname === \"/api/signals\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (!body.lead_email || !body.signal_type) {\n return json({ error: \"lead_email and signal_type are required\" }, 400);\n }\n return json(await recordSignal(body), 201);\n }\n const signalActionMatch = pathname.match(/^\\/api\\/signals\\/([^/]+)\\/action$/);\n if (signalActionMatch && method === \"PUT\") {\n const result = await actionSignal(signalActionMatch[1]);\n return result ? json(result) : json({ error: \"Signal not found\" }, 404);\n }\n if (pathname === \"/api/signals/hot-leads\" && method === \"GET\") {\n return json(await getHotLeads());\n }\n if (pathname === \"/api/signals/hot-leads/count\" && method === \"GET\") {\n return json({ count: await getHotLeadsCount() });\n }\n\n // --- OKR / Objectives routes ----\n if (pathname === \"/api/okrs\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n return json(await listObjectives({ workspace }));\n }\n if (pathname === \"/api/okrs\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createObjective(body), 201);\n }\n if (pathname === \"/api/okrs/dashboard\" && method === \"GET\") {\n return json(await getOKRDashboard());\n }\n // Explicit funnel→OKR sync — refreshes stored KR/objective progress on demand.\n if (pathname === \"/api/okrs/sync\" && method === \"POST\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n return json(await syncObjectivesFromFunnel({ workspace }));\n }\n const okrIdMatch = pathname.match(/^\\/api\\/okrs\\/([^/]+)$/);\n if (okrIdMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n return json(await updateObjective(okrIdMatch[1], body));\n }\n if (okrIdMatch && method === \"DELETE\") {\n const ok = await deleteObjective(okrIdMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n const okrKrMatch = pathname.match(/^\\/api\\/okrs\\/([^/]+)\\/key-results$/);\n if (okrKrMatch && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createKeyResult(okrKrMatch[1], body), 201);\n }\n const krIdMatch = pathname.match(/^\\/api\\/okrs\\/key-results\\/([^/]+)$/);\n if (krIdMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n return json(await updateKeyResult(krIdMatch[1], body));\n }\n\n // --- NSM routes ----\n if (pathname === \"/api/nsm\" && method === \"GET\") {\n return json(await getNSM());\n }\n if (pathname === \"/api/nsm\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await setNSM(body));\n }\n if (pathname === \"/api/nsm/record\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n await recordNSMValue(body.value);\n return json({ success: true });\n }\n if (pathname === \"/api/nsm/progress\" && method === \"GET\") {\n return json(await getNSMProgress());\n }\n\n // --- AIO / Cohort routes ----\n if (pathname === \"/api/aio/cohorts\" && method === \"GET\") {\n return json(await listCohorts());\n }\n if (pathname === \"/api/aio/cohorts\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createCohort(body), 201);\n }\n const cohortIdMatch = pathname.match(/^\\/api\\/aio\\/cohorts\\/([^/]+)$/);\n if (cohortIdMatch && method === \"DELETE\") {\n return json({ success: await deleteCohort(cohortIdMatch[1]) });\n }\n if (pathname === \"/api/aio/cohort-summary\" && method === \"GET\") {\n return json(await getCohortSummary());\n }\n if (pathname === \"/api/aio/engagement-velocity\" && method === \"GET\") {\n return json(await getEngagementVelocity());\n }\n\n // --- Frontend-expected aliases (cohorts/attribution/key-results) ----\n if (pathname === \"/api/cohorts\" && method === \"GET\") {\n return json(await getCohortSummary());\n }\n if (pathname === \"/api/cohorts\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createCohort(body), 201);\n }\n const cohortAliasMatch = pathname.match(/^\\/api\\/cohorts\\/([^/]+)$/);\n if (cohortAliasMatch && method === \"DELETE\") {\n return json({ success: await deleteCohort(cohortAliasMatch[1]) });\n }\n if (pathname === \"/api/attribution\" && method === \"GET\") {\n return json(await getAttributionSummary());\n }\n // retention (GRR/NRR + curve) + revenue model endpoints.\n if (pathname === \"/api/intelligence/retention\" && method === \"GET\") {\n return json(await getRetention());\n }\n if (pathname === \"/api/intelligence/revenue-model\" && method === \"GET\") {\n return json(await getRevenueModel());\n }\n if (pathname === \"/api/attribution\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n await recordConversion(body);\n return json({ success: true }, 201);\n }\n const krAliasMatch = pathname.match(/^\\/api\\/key-results\\/([^/]+)$/);\n if (krAliasMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n return json(await updateKeyResult(krAliasMatch[1], body));\n }\n\n // --- Digest routes ----\n if (pathname === \"/api/digest\" && method === \"GET\") {\n return json(await getLatestDigest());\n }\n if (pathname === \"/api/digest/generate\" && method === \"POST\") {\n return json(await generateDigest());\n }\n if (pathname === \"/api/digest/history\" && method === \"GET\") {\n const limit = parseInt(url.searchParams.get(\"limit\") ?? \"10\", 10);\n return json(await getDigestHistory(limit));\n }\n\n // --- Experiments routes ----\n if (pathname === \"/api/experiments\" && method === \"GET\") {\n const status = url.searchParams.get(\"status\") ?? undefined;\n const funnel_stage = url.searchParams.get(\"stage\") ?? url.searchParams.get(\"funnel_stage\") ?? undefined;\n const aarrr_lever = url.searchParams.get(\"aarrr_lever\") ?? undefined;\n return json(await listExperiments({ status, funnel_stage, aarrr_lever }));\n }\n if (pathname === \"/api/experiments\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createExperiment(body), 201);\n }\n if (pathname === \"/api/experiments/stats\" && method === \"GET\") {\n return json(await getExperimentStats());\n }\n // suggest-ice: alias of ice-suggest (same handler).\n if ((pathname === \"/api/experiments/ice-suggest\" || pathname === \"/api/experiments/suggest-ice\") && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await suggestICE(body));\n }\n // GET /api/experiments/:id/stats — sub-resource form; getExperimentStats() is tenant-aggregate (portfolio-wide).\n // Declared before the run|complete and bare :id matchers so \"stats\" isn't read as an id.\n const expStatsMatch = pathname.match(/^\\/api\\/experiments\\/([^/]+)\\/stats$/);\n if (expStatsMatch && method === \"GET\") {\n return json(await getExperimentStats());\n }\n const expActionMatch = pathname.match(/^\\/api\\/experiments\\/([^/]+)\\/(run|complete)$/);\n if (expActionMatch && method === \"POST\") {\n const id = expActionMatch[1];\n const body = await req.json().catch(() => ({}));\n const result = expActionMatch[2] === \"run\"\n ? await runExperiment(id, Number(body.baseline_value) || 0)\n : await completeExperiment(id, {\n result_value: Number(body.result_value) || 0,\n outcome: body.outcome ?? \"inconclusive\",\n learnings: body.learnings,\n control: body.control,\n variant: body.variant,\n sample_size: body.sample_size,\n });\n return result ? json(result) : json({ error: \"Experiment not found\" }, 404);\n }\n const expIdMatch = pathname.match(/^\\/api\\/experiments\\/([^/]+)$/);\n if (expIdMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n const updated = await updateExperiment(expIdMatch[1], body);\n return updated ? json(updated) : json({ error: \"Experiment not found\" }, 404);\n }\n if (expIdMatch && method === \"DELETE\") {\n const ok = await deleteExperiment(expIdMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // --- Calendar unified route ----\n if (pathname === \"/api/calendar/unified\" && method === \"GET\") {\n const today = new Date().toISOString().slice(0, 10);\n const from = url.searchParams.get(\"from\") ?? url.searchParams.get(\"start\") ?? today;\n const to = url.searchParams.get(\"to\") ?? url.searchParams.get(\"end\") ?? from;\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n const sourcesParam = url.searchParams.getAll(\"source\");\n return json(await getUnifiedCalendar({ from, to, workspace, sources: sourcesParam.length ? sourcesParam as any : undefined }));\n }\n if (pathname === \"/api/calendar/summary\" && method === \"GET\") {\n const date = url.searchParams.get(\"date\") ?? new Date().toISOString().slice(0, 10);\n return json(await getCalendarSummary(date));\n }\n if (pathname === \"/api/calendar/entries\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createCalendarEntry(body), 201);\n }\n const calEntryMatch = pathname.match(/^\\/api\\/calendar\\/entries\\/([^/]+)$/);\n if (calEntryMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n const updated = await updateCalendarEntry(calEntryMatch[1], body);\n return updated ? json(updated) : json({ error: \"Not found\" }, 404);\n }\n if (calEntryMatch && method === \"DELETE\") {\n const ok = await deleteCalendarEntry(calEntryMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // --- Knowledge files (AI knowledge injection + graph view) ----\n if (pathname === \"/api/knowledge\" && method === \"GET\") {\n return json(await listKnowledgeFiles());\n }\n if (pathname === \"/api/knowledge\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const created = await createKnowledgeFile(body);\n return created ? json(created, 201) : json({ error: \"content required\" }, 400);\n }\n if (pathname === \"/api/knowledge/graph\" && method === \"GET\") {\n return json(await buildKnowledgeGraph());\n }\n if (pathname === \"/api/knowledge/features\" && method === \"GET\") {\n return json(AI_FEATURES);\n }\n const knSummarizeMatch = pathname.match(/^\\/api\\/knowledge\\/([^/]+)\\/summarize$/);\n if (knSummarizeMatch && method === \"POST\") {\n const summary = await summarizeKnowledgeFile(knSummarizeMatch[1]);\n const file = await getKnowledgeFile(knSummarizeMatch[1]);\n return json({ summary, tokens_estimate: file?.tokens_estimate ?? 0 });\n }\n const knIdMatch = pathname.match(/^\\/api\\/knowledge\\/([^/]+)$/);\n if (knIdMatch && method === \"GET\") {\n const f = await getKnowledgeFile(knIdMatch[1]);\n return f ? json(f) : json({ error: \"Not found\" }, 404);\n }\n if (knIdMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n const updated = await updateKnowledgeFile(knIdMatch[1], body);\n return updated ? json(updated) : json({ error: \"Not found\" }, 404);\n }\n if (knIdMatch && method === \"DELETE\") {\n const ok = await deleteKnowledgeFile(knIdMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // --- Company Profile + Brand Context (Part 15.2) — the business identity ---\n if (pathname === \"/api/company-profile\" && method === \"GET\") {\n return json(await getCompanyProfile());\n }\n if (pathname === \"/api/company-profile\" && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n return json(await setCompanyProfile(body));\n }\n if (pathname === \"/api/company-profile/enrich\" && method === \"POST\") {\n try {\n const enriched = await enrichCompanyProfile();\n return json({ enriched, message: \"AI enrichment complete — review and save.\" });\n } catch (e) {\n return json({ error: String(e?.message ?? e) }, 500);\n }\n }\n if (pathname === \"/api/brand-context\" && method === \"GET\") {\n return json({ text: await getBrandContext() });\n }\n if (pathname === \"/api/brand-context\" && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n await setBrandContext(String(body.text ?? \"\"));\n return json({ ok: true });\n }\n\n // --- Memory (Part 15.3) — persistent evolving business facts ----\n if (pathname === \"/api/memory\" && method === \"GET\") {\n return json(await listMemory());\n }\n if (pathname === \"/api/memory\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const m = await addMemory(body);\n return m ? json(m, 201) : json({ error: \"content required\" }, 400);\n }\n const memIdMatch = pathname.match(/^\\/api\\/memory\\/([0-9]+)$/);\n if (memIdMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n const m = await updateMemory(Number(memIdMatch[1]), body);\n return m ? json(m) : json({ error: \"Not found\" }, 404);\n }\n if (memIdMatch && method === \"DELETE\") {\n const ok = await deleteMemory(Number(memIdMatch[1]));\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // --- Skills (Playbooks) — marketing skill catalog + per-skill state ----\n if (pathname === \"/api/skills\" && method === \"GET\") {\n return json(await listSkills());\n }\n if (pathname === \"/api/skills\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const created = await createCustomSkill(body);\n return created.ok ? json(created, 201) : json({ error: created.error || \"invalid skill\" }, 400);\n }\n const skillNameMatch = pathname.match(/^\\/api\\/skills\\/([^/]+)$/);\n if (skillNameMatch && method === \"GET\") {\n const s = await getSkill(decodeURIComponent(skillNameMatch[1]));\n return s ? json(s) : json({ error: \"Not found\" }, 404);\n }\n if (skillNameMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n const ok = await setSkillState(decodeURIComponent(skillNameMatch[1]), body);\n return ok ? json({ ok: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // --- Method config (prioritization methodology: ICE/RICE/WSJF) ----\n if (pathname === \"/api/method-config/methods\" && method === \"GET\") {\n return json(getMethodsMetadata());\n }\n if (pathname === \"/api/method-config\" && method === \"GET\") {\n return json(await getMethodConfig());\n }\n if (pathname === \"/api/method-config\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await saveMethodConfig(body));\n }\n\n // --- Action queue (human-in-the-loop execution) ----\n if (pathname === \"/api/actions\" && method === \"GET\") {\n const status = url.searchParams.get(\"status\") ?? undefined;\n return json(await listActions(status));\n }\n if (pathname === \"/api/actions\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const created = await enqueueAction(body);\n return created ? json(created, 201) : json({ error: \"integration + endpoint required\" }, 400);\n }\n const actionApproveMatch = pathname.match(/^\\/api\\/actions\\/([^/]+)\\/approve$/);\n if (actionApproveMatch && method === \"POST\") {\n const a = await approveAction(actionApproveMatch[1]);\n return a ? json(a) : json({ error: \"Not found\" }, 404);\n }\n const actionRejectMatch = pathname.match(/^\\/api\\/actions\\/([^/]+)\\/reject$/);\n if (actionRejectMatch && method === \"POST\") {\n const a = await rejectAction(actionRejectMatch[1]);\n return a ? json(a) : json({ error: \"Not found\" }, 404);\n }\n const actionIdMatch = pathname.match(/^\\/api\\/actions\\/([^/]+)$/);\n if (actionIdMatch && method === \"GET\") {\n const a = await getAction(actionIdMatch[1]);\n return a ? json(a) : json({ error: \"Not found\" }, 404);\n }\n\n // Manual trigger for the execution engine (the interval val also calls processPendingRuns).\n if (pathname === \"/api/agents/run-pending\" && method === \"POST\") {\n const limit = parseInt(url.searchParams.get(\"limit\") ?? \"3\", 10);\n return json(await processPendingRuns(limit));\n }\n\n // GET /api/agents/activity?limit=N — cross-agent run feed; before the /api/agents/:id matchers.\n if (pathname === \"/api/agents/activity\" && method === \"GET\") {\n const limit = parseInt(url.searchParams.get(\"limit\") ?? \"20\", 10);\n const r = await sqlite.execute(\n `SELECT r.id, r.agent_id, a.name, a.workspace, r.status, r.started_at, r.finished_at, r.output\n FROM agent_runs r LEFT JOIN agents a ON a.id = r.agent_id AND a.tenant_id = ?\n WHERE r.tenant_id = ?\n ORDER BY r.started_at DESC LIMIT ?`,\n [tid, tid, limit]\n );\n return json({ activity: r.rows.map((row) => rowToObject(r.columns, row)) });\n }\n\n // --- Agent runs ----\n const agentRunsMatch = pathname.match(/^\\/api\\/agents\\/([^/]+)\\/runs$/);\n if (agentRunsMatch && method === \"GET\") {\n const agent_id = agentRunsMatch[1];\n const limit = parseInt(url.searchParams.get(\"limit\") ?? \"20\", 10);\n const result = await sqlite.execute(\n \"SELECT * FROM agent_runs WHERE agent_id = ? AND tenant_id = ? ORDER BY started_at DESC LIMIT ?\",\n [agent_id, tid, limit]\n );\n return json(result.rows.map((row) => rowToObject(result.columns, row)));\n }\n if (agentRunsMatch && method === \"POST\") {\n const agent_id = agentRunsMatch[1];\n const body = await req.json().catch(() => ({}));\n const id = crypto.randomUUID();\n const now = new Date().toISOString();\n await sqlite.execute(\n \"INSERT INTO agent_runs (id, agent_id, trigger, status, started_at, tenant_id) VALUES (?, ?, ?, ?, ?, ?)\",\n [id, agent_id, body.trigger ?? \"manual\", \"pending\", now, tid]\n );\n // App-level automation (no cron): run the queued job in-request. Fire-and-forget; status='running' claim guards dupes.\n processPendingRuns(1).catch(() => {});\n return json({ id, agent_id, trigger: body.trigger ?? \"manual\", status: \"pending\", started_at: now }, 201);\n }\n\n // Integrations routes\n // GET /api/integrations - list all integrations\n if (pathname === \"/api/integrations\" && method === \"GET\") {\n const result = await sqlite.execute(\"SELECT * FROM integrations WHERE tenant_id = ? ORDER BY name ASC\", [tid]);\n const rows = result.rows.map((row) => rowToObject(result.columns, row));\n // Google-family services inherit the central 'google' OAuth token, so they are \"connected\"\n // whenever google is — even without their own api_key/access_token row.\n const googleConnected = rows.some((o) => o.name === \"google\" && o.access_token);\n const integrations = rows.map((obj) => maskIntegration(obj, googleConnected));\n return json(integrations);\n }\n\n // POST /api/integrations/:name - upsert integration credentials\n const integrationUpsertMatch = pathname.match(/^\\/api\\/integrations\\/([^/]+)$/);\n if (integrationUpsertMatch && method === \"POST\") {\n const name = integrationUpsertMatch[1];\n const body = await req.json().catch(() => ({}));\n const now = new Date().toISOString();\n\n const existing = await sqlite.execute(\n \"SELECT id, api_key, api_secret, access_token, refresh_token, extra_config FROM integrations WHERE name = ? AND tenant_id = ?\",\n [name, tid]\n );\n\n // Keep the existing secret when the incoming value is blank/missing/masked (\"***\"),\n // so saving the masked Settings form does not wipe stored credentials.\n const keepSecret = (incoming: any, current: any) => {\n if (incoming == null) return current ?? null;\n const s = String(incoming);\n if (s === \"\" || s.includes(\"***\")) return current ?? null;\n return incoming;\n };\n\n if (existing.rows.length > 0) {\n const cur = existing.rows[0] as any[]; // [id, api_key, api_secret, access_token, refresh_token, extra_config]\n await sqlite.execute(\n `UPDATE integrations SET\n api_key = ?,\n api_secret = ?,\n access_token = ?,\n refresh_token = ?,\n extra_config = ?,\n updated_at = ?\n WHERE name = ? AND tenant_id = ?`,\n [\n keepSecret(body.api_key, cur[1]),\n keepSecret(body.api_secret, cur[2]),\n keepSecret(body.access_token, cur[3]),\n keepSecret(body.refresh_token, cur[4]),\n body.extra_config != null ? JSON.stringify(body.extra_config) : (cur[5] ?? null),\n now,\n name,\n tid,\n ]\n );\n } else {\n // Insert\n const id = crypto.randomUUID();\n await sqlite.execute(\n `INSERT INTO integrations (id, name, api_key, api_secret, access_token, refresh_token, extra_config, connected_at, updated_at, tenant_id)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n [\n id,\n name,\n body.api_key ?? null,\n body.api_secret ?? null,\n body.access_token ?? null,\n body.refresh_token ?? null,\n body.extra_config != null ? JSON.stringify(body.extra_config) : null,\n now,\n now,\n tid,\n ]\n );\n }\n\n const updated = await sqlite.execute(\n \"SELECT * FROM integrations WHERE name = ? AND tenant_id = ?\",\n [name, tid]\n );\n const raw = rowToObject(updated.columns, updated.rows[0]);\n // NEVER return the just-saved secrets in cleartext — mask like the list endpoint.\n const googleConnected = raw.name === \"google\"\n ? !!raw.access_token\n : !!(await getCredentials(\"google\"))?.access_token;\n return json({ success: true, integration: maskIntegration(raw, googleConnected) });\n }\n\n // DELETE /api/integrations/:name\n const integrationDeleteMatch = pathname.match(/^\\/api\\/integrations\\/([^/]+)$/);\n if (integrationDeleteMatch && method === \"DELETE\") {\n const name = integrationDeleteMatch[1];\n await sqlite.execute(\"DELETE FROM integrations WHERE name = ? AND tenant_id = ?\", [name, tid]);\n return json({ success: true, message: `Integration '${name}' deleted` });\n }\n\n // Part 13: GET /api/integrations/:name/schema — descriptor-generated action/trigger schema\n // (UI form fields + AI tool hints). null when the integration is still hand-written.\n const integrationSchemaMatch = pathname.match(/^\\/api\\/integrations\\/([^/]+)\\/schema$/);\n if (integrationSchemaMatch && method === \"GET\") {\n const schema = getIntegrationSchema(integrationSchemaMatch[1]);\n return schema ? json(schema) : json({ error: \"no descriptor for this integration yet\", descriptor_integrations: listDescriptorNames() }, 404);\n }\n\n // GET|POST /api/integrations/:name/data - proxy to integration API\n const integrationDataMatch = pathname.match(/^\\/api\\/integrations\\/([^/]+)\\/data$/);\n if (integrationDataMatch && (method === \"GET\" || method === \"POST\")) {\n const name = integrationDataMatch[1];\n const credentials = await getCredentials(name);\n if (!credentials) {\n return json({ error: `Integration '${name}' not found or not configured` }, 404);\n }\n return handleIntegrationProxy(req, name, url.searchParams, credentials);\n }\n\n // Agents routes\n // GET /api/agents - list agents (optional ?workspace= query param)\n if (pathname === \"/api/agents\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n const agents = await listAgents(workspace);\n return json(agents);\n }\n\n // POST /api/agents - create agent\n if (pathname === \"/api/agents\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const agent = await createAgent(body);\n return json(agent, 201);\n }\n\n // PUT /api/agents/:id - update agent\n const agentUpdateMatch = pathname.match(/^\\/api\\/agents\\/([^/]+)$/);\n if (agentUpdateMatch && method === \"PUT\") {\n const id = agentUpdateMatch[1];\n const body = await req.json().catch(() => ({}));\n const agent = await updateAgent(id, body);\n if (!agent) {\n return json({ error: `Agent '${id}' not found` }, 404);\n }\n return json(agent);\n }\n\n // DELETE /api/agents/:id - delete agent\n const agentDeleteMatch = pathname.match(/^\\/api\\/agents\\/([^/]+)$/);\n if (agentDeleteMatch && method === \"DELETE\") {\n const id = agentDeleteMatch[1];\n const deleted = await deleteAgent(id);\n if (!deleted) {\n return json({ error: `Agent '${id}' not found` }, 404);\n }\n return json({ success: true, message: `Agent '${id}' deleted` });\n }\n\n // LLM config routes\n // GET /api/llm/config - get LLM config (mask api_key)\n if (pathname === \"/api/llm/config\" && method === \"GET\") {\n const config = await getLLMConfig();\n if (!config) {\n return json({ error: \"LLM config not found\" }, 404);\n }\n // Mask api_key: show first 8 chars + ***\n const masked = {\n ...config,\n api_key: config.api_key\n ? config.api_key.slice(0, 8) + \"***\"\n : \"\",\n };\n return json(masked);\n }\n\n // POST /api/llm/config - save LLM config\n if (pathname === \"/api/llm/config\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const config = await saveLLMConfig(body);\n // Mask api_key in response\n const masked = {\n ...config,\n api_key: config.api_key\n ? config.api_key.slice(0, 8) + \"***\"\n : \"\",\n };\n return json(masked);\n }\n\n // Chat route\n // POST /api/chat - AI chat handler\n if (pathname === \"/api/chat\" && method === \"POST\") {\n return handleChat(req);\n }\n\n // POST /api/chat/stream - SSE streaming chat\n if (pathname === \"/api/chat/stream\" && method === \"POST\") {\n return handleChatStream(req);\n }\n\n // --- Conversation history routes ----\n if (pathname === \"/api/conversations\" && method === \"GET\") {\n return json(await listConversations());\n }\n const convIdMatch = pathname.match(/^\\/api\\/conversations\\/([^/]+)$/);\n if (convIdMatch && method === \"GET\") {\n const conv = await getConversationById(convIdMatch[1]);\n return conv ? json(conv) : json({ error: \"Not found\" }, 404);\n }\n if (convIdMatch && method === \"DELETE\") {\n const ok = await deleteConversation(convIdMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // Tasks routes\n // GET /api/tasks - list tasks (optional ?workspace= query param)\n if (pathname === \"/api/tasks\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n const status = url.searchParams.get(\"status\") ?? undefined;\n return json(await listTasks({ workspace, status }));\n }\n\n // POST /api/tasks - create task\n if (pathname === \"/api/tasks\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createTask(body), 201);\n }\n\n // GET /api/tasks/ice - ICE-ranked backlog (sorted by ICE score desc).\n // Declared before the /api/tasks/:id matchers so \"ice\" isn't read as an id.\n if (pathname === \"/api/tasks/ice\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n const limit = parseInt(url.searchParams.get(\"limit\") ?? \"50\", 10);\n return json(await listIceRankedTasks({ workspace, limit }));\n }\n\n // POST /api/tasks/generate - LLM-plan tasks from an experiment/KR/objective/campaign.\n if (pathname === \"/api/tasks/generate\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (!body.source_type || !body.source_id) {\n return json({ error: \"source_type and source_id are required\" }, 400);\n }\n return json(await generateTasksFromSource(body), 201);\n }\n\n // POST /api/tasks/:id/run - execute the task with an agent (sub-resource; before the bare :id matchers).\n const taskRunMatch = pathname.match(/^\\/api\\/tasks\\/([^/]+)\\/run$/);\n if (taskRunMatch && method === \"POST\") {\n const result = await runTask(taskRunMatch[1]);\n if (!result.task) return json({ error: result.error || \"Not found\" }, 404);\n return json(result);\n }\n\n // PUT /api/tasks/:id - update task (e.g. toggle status)\n const taskUpdateMatch = pathname.match(/^\\/api\\/tasks\\/([^/]+)$/);\n if (taskUpdateMatch && method === \"PUT\") {\n const id = taskUpdateMatch[1];\n const body = await req.json().catch(() => ({}));\n const updated = await updateTask(id, body);\n if (!updated) return json({ error: \"Not found\" }, 404);\n return json(updated);\n }\n\n // DELETE /api/tasks/:id - delete task\n const taskDeleteMatch = pathname.match(/^\\/api\\/tasks\\/([^/]+)$/);\n if (taskDeleteMatch && method === \"DELETE\") {\n const ok = await deleteTask(taskDeleteMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // --- Relational CRM (accounts + contacts + deal↔contact links) ----\n // Delegate to api/crm_routes.ts; tenant context is already set by main.ts. Kept thin to stay under the 80KB file limit.\n if (isCrmPath(pathname)) return handleCrmRoutes(req, url, method);\n if (isMarketingPath(pathname)) return handleMarketingRoutes(req, url, method);\n\n // --- CRM Deals (sales pipeline) ----\n if (pathname === \"/api/deals\" && method === \"GET\") {\n return json(await listDeals(url.searchParams.get(\"stage\") ?? undefined));\n }\n if (pathname === \"/api/deals\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createDeal(body), 201);\n }\n // Seed deals from qualified leads (explicit; checked before the :id matcher).\n if (pathname === \"/api/deals/sync\" && method === \"POST\") {\n return json(await syncDealsFromLeads());\n }\n // Interactive import: candidate leads to review, then import the selected emails.\n if (pathname === \"/api/deals/candidates\" && method === \"GET\") {\n return json(await listCandidates());\n }\n if (pathname === \"/api/deals/import\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await importDeals(Array.isArray(body.emails) ? body.emails : []));\n }\n const dealIdMatch = pathname.match(/^\\/api\\/deals\\/([^/]+)$/);\n if (dealIdMatch && dealIdMatch[1] !== \"sync\" && method === \"GET\") {\n const d = await getDeal(dealIdMatch[1]);\n return d ? json(d) : json({ error: \"Not found\" }, 404);\n }\n if (dealIdMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n const updated = await updateDeal(dealIdMatch[1], body);\n return updated ? json(updated) : json({ error: \"Not found\" }, 404);\n }\n if (dealIdMatch && method === \"DELETE\") {\n const ok = await deleteDeal(dealIdMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // --- Data export (CSV) ----\n if (pathname === \"/api/export/signals\" && method === \"GET\") {\n const r = await sqlite.execute(\"SELECT id, lead_email, lead_name, signal_type, signal_source, signal_strength, actioned, detected_at FROM intent_signals WHERE tenant_id = ? ORDER BY detected_at DESC\", [tid]);\n const cols = r.columns;\n let csv = cols.join(\",\") + \"\\n\";\n for (const row of r.rows) {\n csv += (row as any[]).map((v) => `\"${String(v ?? \"\").replace(/\"/g, '\"\"')}\"`).join(\",\") + \"\\n\";\n }\n return new Response(csv, { headers: { \"Content-Type\": \"text/csv\", \"Content-Disposition\": 'attachment; filename=\"signals.csv\"', ...corsHeaders } });\n }\n if (pathname === \"/api/export/okrs\" && method === \"GET\") {\n const objR = await sqlite.execute(\"SELECT id, title, description, workspace, status, progress, quarter, created_at FROM objectives WHERE tenant_id = ? ORDER BY created_at DESC\", [tid]);\n const krR = await sqlite.execute(\"SELECT id, objective_id, title, target_value, current_value, unit, progress, updated_at FROM key_results WHERE tenant_id = ? ORDER BY updated_at DESC\", [tid]);\n let csv = \"type,\" + objR.columns.join(\",\") + \"\\n\";\n for (const row of objR.rows) {\n csv += \"objective,\" + (row as any[]).map((v) => `\"${String(v ?? \"\").replace(/\"/g, '\"\"')}\"`).join(\",\") + \"\\n\";\n }\n if (krR.rows.length > 0) {\n csv += \"\\ntype,\" + krR.columns.join(\",\") + \"\\n\";\n for (const row of krR.rows) {\n csv += \"key_result,\" + (row as any[]).map((v) => `\"${String(v ?? \"\").replace(/\"/g, '\"\"')}\"`).join(\",\") + \"\\n\";\n }\n }\n return new Response(csv, { headers: { \"Content-Type\": \"text/csv\", \"Content-Disposition\": 'attachment; filename=\"okrs.csv\"', ...corsHeaders } });\n }\n if (pathname === \"/api/export/tasks\" && method === \"GET\") {\n const r = await sqlite.execute(\"SELECT id, title, description, status, priority, workspace, due_date, created_at, updated_at FROM tasks WHERE tenant_id = ? ORDER BY created_at DESC\", [tid]);\n const cols = r.columns;\n let csv = cols.join(\",\") + \"\\n\";\n for (const row of r.rows) {\n csv += (row as any[]).map((v) => `\"${String(v ?? \"\").replace(/\"/g, '\"\"')}\"`).join(\",\") + \"\\n\";\n }\n return new Response(csv, { headers: { \"Content-Type\": \"text/csv\", \"Content-Disposition\": 'attachment; filename=\"tasks.csv\"', ...corsHeaders } });\n }\n\n // --- LinkedIn OAuth flow (legacy aliases) ----\n if (pathname === \"/api/oauth/linkedin/start\" && method === \"GET\") {\n return Response.redirect(`${url.origin}/api/auth/linkedin`);\n }\n if (pathname === \"/api/oauth/linkedin/callback\" && method === \"GET\") {\n return Response.redirect(`${url.origin}/api/auth/linkedin/callback?${url.search.slice(1)}`);\n }\n\n // --- Graphify - app map for MCP / AI-native navigation ----\n if (pathname === \"/api/graphify\" && method === \"GET\") {\n return json(await getGraphify());\n }\n\n // --- Calendar today shortcut (TodayPanel widget) ----\n if (pathname === \"/api/calendar/today\" && method === \"GET\") {\n const today = new Date().toISOString().slice(0, 10);\n return json(await getUnifiedCalendar({ from: today, to: today }));\n }\n\n // --- Digest latest alias ----\n if (pathname === \"/api/digest/latest\" && method === \"GET\") {\n return json(await getLatestDigest());\n }\n\n // --- PLATFORM SUPERADMIN (master-only; the single audited exception to tenant isolation) ----\n // GATE first, then delegate all /api/platform/* routes to handlePlatformRoutes (api/platform.ts).\n if (pathname.startsWith(\"/api/platform/\")) {\n if (!currentCtx().isPlatformAdmin) return json({ error: \"Forbidden: platform admin only\" }, 403);\n return handlePlatformRoutes(req, url, method);\n }\n\n // --- ADMIN LOCKDOWN: every destructive /api/admin/* route is owner-only (plus per-route confirm\n // tokens below). No-op under default SYSTEM_CTX (role \"owner\"); locks out trial members. ----\n if (pathname.startsWith(\"/api/admin/\") && currentRole() !== \"owner\") {\n return json({ error: \"Forbidden: owner role required\" }, 403);\n }\n\n // Owner bootstrap (owner-only): create/attach the platform owner to t_default for email+password login. Idempotent.\n if (pathname === \"/api/admin/bootstrap-owner\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (!body.email || !body.password) return json({ ok: false, error: \"email + password required\" }, 400);\n const r = await bootstrapOwner(String(body.email), String(body.password));\n return json({ ok: r.ok, created: r.created });\n }\n\n // Admin backup/export (owner-only): read-only, tenant-scoped (WHERE tenant_id=?) JSON snapshot of this tenant's rows.\n // Confirm is optional: pass { confirm: \"EXPORT\" } to be explicit, otherwise it just runs.\n if (pathname === \"/api/admin/export\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm != null && body.confirm !== \"EXPORT\") {\n return json({ ok: false, error: \"Send confirm: EXPORT (or omit confirm)\" }, 400);\n }\n const EXPORT_TABLES = [\n \"tasks\", \"deals\", \"campaigns\", \"objectives\", \"key_results\", \"experiments\",\n \"agents\", \"action_queue\", \"calendar_entries\", \"knowledge_files\", \"notes\",\n ];\n const data: Record<string, any[]> = {};\n const counts: Record<string, number> = {};\n for (const table of EXPORT_TABLES) {\n try {\n const r = await sqlite.execute(`SELECT * FROM ${table} WHERE tenant_id = ?`, [tid]);\n const rows = (r.rows || []).map((row) => rowToObject(r.columns, row));\n data[table] = rows;\n counts[table] = rows.length;\n } catch {\n // Missing table (e.g. not yet created): record empty rather than failing the whole export.\n data[table] = [];\n counts[table] = 0;\n }\n }\n const snapshot = {\n ok: true,\n tenant_id: tid,\n version: APP_VERSION,\n exported_at: new Date().toISOString(),\n tables: EXPORT_TABLES,\n counts,\n data,\n };\n const filename = `aihive-backup-${tid}-${new Date().toISOString().slice(0, 10)}.json`;\n return new Response(JSON.stringify(snapshot, null, 2), {\n headers: {\n \"Content-Type\": \"application/json\",\n \"Content-Disposition\": `attachment; filename=\"${filename}\"`,\n \"Cache-Control\": \"no-store\",\n ...corsHeaders,\n },\n });\n }\n\n // --- Admin purge (clear intelligence cache) ----\n if (pathname === \"/api/admin/purge\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm !== \"PURGE\") return json({ error: \"Send confirm: PURGE\" }, 400);\n await sqlite.execute(\"DELETE FROM intelligence_cache WHERE tenant_id = ?\", [tid]).catch(() => {});\n await sqlite.execute(\"UPDATE app_config SET value=NULL WHERE key='funnel_cache' AND tenant_id = ?\", [tid]).catch(() => {});\n return json({ success: true, message: \"Cache purged\" });\n }\n\n // Remove demo/seed data: starter agents matched exactly on (name, description, system_prompt) so edits are never touched.\n if (pathname === \"/api/admin/seed-status\" && method === \"GET\") {\n let agents = 0;\n for (const seed of DEFAULT_AGENT_SEEDS) {\n const r = await sqlite.execute(\n \"SELECT COUNT(*) FROM agents WHERE name = ? AND description = ? AND system_prompt = ? AND tenant_id = ?\",\n [seed.name, seed.description, seed.system_prompt, tid],\n ).catch(() => null);\n if (r?.rows?.length) agents += Number((r.rows[0] as any[])[0]) || 0;\n }\n return json({ ok: true, total: agents, counts: { agents } });\n }\n if (pathname === \"/api/admin/cleanup-mock\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm !== \"CLEANUP\") return json({ ok: false, error: \"Send confirm: CLEANUP\" }, 400);\n let removed = 0;\n for (const seed of DEFAULT_AGENT_SEEDS) {\n const r = await sqlite.execute(\n \"DELETE FROM agents WHERE name = ? AND description = ? AND system_prompt = ? AND tenant_id = ?\",\n [seed.name, seed.description, seed.system_prompt, tid],\n ).catch(() => null);\n removed += Number((r as any)?.rowsAffected ?? 0) || 0;\n }\n return json({ ok: true, total: removed });\n }\n\n // Bulk reset: wipe ALL agents (= agents + campaigns, same table) plus related\n // run/budget/conversation rows that deleteAgent() does not cascade. Confirm-guarded.\n if (pathname === \"/api/admin/reset-agents\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm !== \"CLEANUP\") return json({ ok: false, error: \"Send confirm: CLEANUP\" }, 400);\n const counts: Record<string, number> = {};\n for (const table of [\"agents\", \"agent_runs\", \"agent_budgets\", \"conversations\"]) {\n const r = await sqlite.execute(`DELETE FROM ${table} WHERE tenant_id = ?`, [tid]).catch(() => null);\n counts[table] = Number((r as any)?.rowsAffected ?? 0) || 0;\n }\n return json({ ok: true, counts });\n }\n\n // Factory reset (this app + tenant only): wipe the data tables below, keeping integrations/llm_config/knowledge_files. Confirm-guarded.\n if (pathname === \"/api/admin/reset-data\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm !== \"CLEANUP\") return json({ ok: false, error: \"Send confirm: CLEANUP\" }, 400);\n const WIPE_TABLES = [\n \"agents\", \"conversations\", \"agent_budgets\", \"agent_runs\",\n \"objectives\", \"key_results\", \"north_star\", \"nsm_history\",\n \"experiments\", \"tasks\", \"tasks_legacy\", \"notes\",\n \"intent_signals\", \"growth_digests\", \"calendar_entries\", \"action_queue\",\n \"customer_cohorts\", \"lead_state_changes\", \"utm_conversions\",\n \"metric_baselines\", \"metric_history\", \"intelligence_cache\", \"app_config\",\n ];\n const counts: Record<string, number> = {};\n for (const table of WIPE_TABLES) {\n const r = await sqlite.execute(`DELETE FROM ${table} WHERE tenant_id = ?`, [tid]).catch(() => null);\n counts[table] = Number((r as any)?.rowsAffected ?? 0) || 0;\n }\n return json({ ok: true, kept: [\"integrations\", \"llm_config\", \"knowledge_files\"], counts });\n }\n\n // Precise working-data wipe (KEEPS knowledge_files/skills/memory/app_config/integrations/llm_config). Confirm-guarded.\n if (pathname === \"/api/admin/wipe-working-data\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm !== \"WIPE\") return json({ ok: false, error: \"Send confirm: WIPE\" }, 400);\n const WIPE = [\n \"agents\", \"agent_runs\", \"agent_budgets\", \"conversations\", \"deals\",\n \"experiments\", \"tasks\", \"tasks_legacy\", \"objectives\", \"key_results\",\n \"north_star\", \"nsm_history\", \"intent_signals\", \"growth_digests\",\n \"calendar_entries\", \"action_queue\", \"customer_cohorts\", \"lead_state_changes\",\n \"utm_conversions\", \"metric_baselines\", \"metric_history\", \"intelligence_cache\", \"notes\",\n ];\n const counts: Record<string, number> = {};\n for (const table of WIPE) {\n const r = await sqlite.execute(`DELETE FROM ${table} WHERE tenant_id = ?`, [tid]).catch(() => null);\n counts[table] = Number((r as any)?.rowsAffected ?? 0) || 0;\n }\n return json({\n ok: true,\n kept: [\"knowledge_files\", \"skills\", \"memory\", \"app_config\", \"integrations\", \"llm_config\"],\n counts,\n });\n }\n\n // --- Targeted wipe: tasks + run history + agents/budgets + campaign↔agent links ONLY ----\n // Keeps campaigns/objectives/everything else. Confirm-guarded.\n if (pathname === \"/api/admin/wipe-tasks-agents\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm !== \"WIPE\") return json({ ok: false, error: \"Send confirm: WIPE\" }, 400);\n const WIPE = [\"tasks\", \"tasks_legacy\", \"agent_runs\", \"agent_budgets\", \"campaign_agents\", \"agents\", \"campaign_runs\"];\n const counts: Record<string, number> = {};\n for (const table of WIPE) {\n const r = await sqlite.execute(`DELETE FROM ${table} WHERE tenant_id = ?`, [tid]).catch(() => null);\n counts[table] = Number((r as any)?.rowsAffected ?? 0) || 0;\n }\n // Also clear internal completion events (metric_history integration='internal') and task-done\n // calendar markers (event_type='completion'); keep real integration metric history intact.\n const mh = await sqlite.execute(\"DELETE FROM metric_history WHERE integration = 'internal' AND tenant_id = ?\", [tid]).catch(() => null);\n counts[\"metric_history(internal)\"] = Number((mh as any)?.rowsAffected ?? 0) || 0;\n const cm = await sqlite.execute(\"DELETE FROM calendar_entries WHERE event_type = 'completion' AND tenant_id = ?\", [tid]).catch(() => null);\n counts[\"calendar_entries(completion)\"] = Number((cm as any)?.rowsAffected ?? 0) || 0;\n return json({ ok: true, wiped: [...WIPE, \"metric_history(internal)\", \"calendar_entries(completion)\"], counts });\n }\n\n // --- Targeted wipe: action_queue (approvals / prepared+sent action history) ONLY ----\n if (pathname === \"/api/admin/wipe-actions\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm !== \"WIPE\") return json({ ok: false, error: \"Send confirm: WIPE\" }, 400);\n const r = await sqlite.execute(\"DELETE FROM action_queue WHERE tenant_id = ?\", [tid]).catch(() => null);\n return json({ ok: true, wiped: [\"action_queue\"], counts: { action_queue: Number((r as any)?.rowsAffected ?? 0) || 0 } });\n }\n\n // --- Google OAuth redirect flow ----\n if (pathname === \"/api/auth/google\" && method === \"GET\") {\n const creds = await getCredentials(\"google\");\n // OAuth client is env-driven by design (GOOGLE_CLIENT_ID/SECRET); fall back to the DB row.\n const clientId = Deno.env.get(\"GOOGLE_CLIENT_ID\") || creds?.extra_config?.client_id || creds?.extra_config?.clientId;\n const redirectUri = creds?.extra_config?.redirect_uri || creds?.extra_config?.redirectUri || `${url.origin}/api/auth/google/callback`;\n if (!clientId) {\n return new Response(\"Google OAuth not configured. Add Client ID in Settings - Google.\", { status: 400 });\n }\n const scopes = [\n \"https://www.googleapis.com/auth/userinfo.email\",\n \"https://www.googleapis.com/auth/analytics.readonly\",\n \"https://www.googleapis.com/auth/webmasters.readonly\",\n \"https://www.googleapis.com/auth/gmail.modify\",\n \"https://www.googleapis.com/auth/drive.readonly\",\n \"https://www.googleapis.com/auth/spreadsheets.readonly\",\n \"https://www.googleapis.com/auth/documents.readonly\",\n \"https://www.googleapis.com/auth/calendar\",\n \"https://www.googleapis.com/auth/youtube.readonly\",\n \"https://www.googleapis.com/auth/yt-analytics.readonly\",\n ].join(\" \");\n const { state, setCookie } = newOAuthState();\n const params = new URLSearchParams({\n client_id: clientId,\n redirect_uri: redirectUri,\n response_type: \"code\",\n scope: scopes,\n access_type: \"offline\",\n prompt: \"consent\",\n state,\n });\n return redirectWithCookie(`https://accounts.google.com/o/oauth2/v2/auth?${params}`, setCookie);\n }\n\n if (pathname === \"/api/auth/google/callback\" && method === \"GET\") {\n const code = url.searchParams.get(\"code\");\n const error = url.searchParams.get(\"error\");\n if (error || !code) {\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(error || \"no_code\")}`);\n }\n if (!oauthStateValid(req, url)) {\n return Response.redirect(`${url.origin}/?auth_error=state_mismatch`);\n }\n const creds = await getCredentials(\"google\");\n // Trim env/DB values to avoid whitespace producing a malformed (invalid_request) token request.\n const clientId = (Deno.env.get(\"GOOGLE_CLIENT_ID\") || creds?.extra_config?.client_id || creds?.extra_config?.clientId || \"\").trim();\n const clientSecret = (Deno.env.get(\"GOOGLE_CLIENT_SECRET\") || creds?.api_secret || \"\").trim();\n const redirectUri = (creds?.extra_config?.redirect_uri || creds?.extra_config?.redirectUri || `${url.origin}/api/auth/google/callback`).trim();\n\n // Fail fast with a clear cause if a required param is empty (Google would return invalid_request).\n if (!clientId || !clientSecret) {\n const missing = !clientId && !clientSecret ? \"client_id_and_secret\"\n : !clientId ? \"client_id\" : \"client_secret\";\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(\"missing_\" + missing)}`);\n }\n\n const tokenRes = await fetch(\"https://oauth2.googleapis.com/token\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/x-www-form-urlencoded\" },\n body: new URLSearchParams({ code, client_id: clientId, client_secret: clientSecret, redirect_uri: redirectUri, grant_type: \"authorization_code\" }),\n });\n const tokens = await tokenRes.json() as any;\n if (!tokenRes.ok || !tokens.access_token) {\n const detail = [tokens.error, tokens.error_description].filter(Boolean).join(\": \") || \"token_exchange_failed\";\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(detail)}`);\n }\n\n const now = new Date().toISOString();\n const newExtraConfig = { ...(creds?.extra_config || {}), token_expiry: Date.now() + (tokens.expires_in || 3600) * 1000 };\n const existing = await sqlite.execute(\"SELECT id FROM integrations WHERE name = ? AND tenant_id = ?\", [\"google\", tid]);\n if (existing.rows.length > 0) {\n await sqlite.execute(\n \"UPDATE integrations SET access_token=?, refresh_token=?, extra_config=?, updated_at=? WHERE name='google' AND tenant_id = ?\",\n [tokens.access_token, tokens.refresh_token || creds?.refresh_token || null, JSON.stringify(newExtraConfig), now, tid]\n );\n } else {\n await sqlite.execute(\n \"INSERT INTO integrations (id, name, access_token, refresh_token, extra_config, connected_at, updated_at, tenant_id) VALUES (?,?,?,?,?,?,?,?)\",\n [crypto.randomUUID(), \"google\", tokens.access_token, tokens.refresh_token || null, JSON.stringify(newExtraConfig), now, now, tid]\n );\n }\n return redirectWithCookie(`${url.origin}/?auth=google_ok`, CLEAR_OAUTH_STATE);\n }\n\n // --- LinkedIn OAuth flow ----\n if (pathname === \"/api/auth/linkedin\" && method === \"GET\") {\n const creds = await getCredentials(\"linkedin\");\n const clientId = creds?.extra_config?.clientId || creds?.extra_config?.client_id;\n const redirectUri = `${url.origin}/api/auth/linkedin/callback`;\n if (!clientId) {\n return new Response(\"LinkedIn OAuth not configured. Add Client ID in Settings - LinkedIn.\", { status: 400 });\n }\n const { state, setCookie } = newOAuthState();\n const params = new URLSearchParams({\n response_type: \"code\",\n client_id: clientId,\n redirect_uri: redirectUri,\n scope: \"openid profile email w_member_social r_basicprofile\",\n state,\n });\n return redirectWithCookie(`https://www.linkedin.com/oauth/v2/authorization?${params}`, setCookie);\n }\n\n if (pathname === \"/api/auth/linkedin/callback\" && method === \"GET\") {\n const code = url.searchParams.get(\"code\");\n const error = url.searchParams.get(\"error\");\n if (error || !code) {\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(error || \"no_code\")}`);\n }\n if (!oauthStateValid(req, url)) {\n return Response.redirect(`${url.origin}/?auth_error=state_mismatch`);\n }\n const creds = await getCredentials(\"linkedin\");\n const clientId = creds?.extra_config?.clientId || creds?.extra_config?.client_id || \"\";\n const clientSecret = creds?.api_secret || \"\";\n const redirectUri = `${url.origin}/api/auth/linkedin/callback`;\n\n const tokenRes = await fetch(\"https://www.linkedin.com/oauth/v2/accessToken\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/x-www-form-urlencoded\" },\n body: new URLSearchParams({ grant_type: \"authorization_code\", code, redirect_uri: redirectUri, client_id: clientId, client_secret: clientSecret }),\n });\n const tokens = await tokenRes.json() as any;\n if (!tokenRes.ok || !tokens.access_token) {\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(tokens.error || \"linkedin_token_failed\")}`);\n }\n\n // Fetch LinkedIn profile to get the author URN needed for posts endpoint.\n let authorId = creds?.extra_config?.author_id || \"\";\n try {\n const profileRes = await fetch(\"https://api.linkedin.com/v2/me\", {\n headers: { Authorization: `Bearer ${tokens.access_token}` },\n });\n if (profileRes.ok) {\n const profile = await profileRes.json() as any;\n if (profile.id) authorId = `urn:li:person:${profile.id}`;\n }\n } catch { /* non-fatal - author_id can be set manually later */ }\n\n const now = new Date().toISOString();\n const newExtraConfig = { ...(creds?.extra_config || {}), token_expiry: Date.now() + (tokens.expires_in || 5184000) * 1000, author_id: authorId };\n const existing = await sqlite.execute(\"SELECT id FROM integrations WHERE name = ? AND tenant_id = ?\", [\"linkedin\", tid]);\n if (existing.rows.length > 0) {\n await sqlite.execute(\n \"UPDATE integrations SET access_token=?, extra_config=?, updated_at=? WHERE name='linkedin' AND tenant_id = ?\",\n [tokens.access_token, JSON.stringify(newExtraConfig), now, tid]\n );\n } else {\n await sqlite.execute(\n \"INSERT INTO integrations (id, name, access_token, extra_config, connected_at, updated_at, tenant_id) VALUES (?,?,?,?,?,?,?)\",\n [crypto.randomUUID(), \"linkedin\", tokens.access_token, JSON.stringify(newExtraConfig), now, now, tid]\n );\n }\n return redirectWithCookie(`${url.origin}/?auth=linkedin_ok`, CLEAR_OAUTH_STATE);\n }\n\n // Microsoft (Outlook) OAuth: env-first client (MICROSOFT_CLIENT_ID/SECRET), `common` tenant, DB fallback. Mirrors Google.\n if (pathname === \"/api/auth/microsoft\" && method === \"GET\") {\n const mcreds = await getCredentials(\"outlook\");\n const clientId = (Deno.env.get(\"MICROSOFT_CLIENT_ID\") || mcreds?.extra_config?.client_id || mcreds?.extra_config?.clientId || \"\").trim();\n if (!clientId) {\n return new Response(\"Microsoft OAuth not configured. Set MICROSOFT_CLIENT_ID (env) or add the Client ID in Settings → Outlook.\", { status: 400 });\n }\n const redirectUri = `${url.origin}/api/auth/microsoft/callback`;\n const scopes = MICROSOFT_SCOPES;\n const { state, setCookie } = newOAuthState();\n const params = new URLSearchParams({\n client_id: clientId,\n response_type: \"code\",\n redirect_uri: redirectUri,\n response_mode: \"query\",\n scope: scopes,\n state,\n });\n return redirectWithCookie(`https://login.microsoftonline.com/common/oauth2/v2.0/authorize?${params}`, setCookie);\n }\n\n if (pathname === \"/api/auth/microsoft/callback\" && method === \"GET\") {\n const code = url.searchParams.get(\"code\");\n const error = url.searchParams.get(\"error\");\n if (error || !code) {\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(error || \"no_code\")}`);\n }\n if (!oauthStateValid(req, url)) {\n return Response.redirect(`${url.origin}/?auth_error=state_mismatch`);\n }\n const creds = await getCredentials(\"outlook\");\n const clientId = (Deno.env.get(\"MICROSOFT_CLIENT_ID\") || creds?.extra_config?.client_id || creds?.extra_config?.clientId || \"\").trim();\n const clientSecret = (Deno.env.get(\"MICROSOFT_CLIENT_SECRET\") || creds?.api_secret || \"\").trim();\n const redirectUri = `${url.origin}/api/auth/microsoft/callback`;\n if (!clientId || !clientSecret) {\n const missing = !clientId && !clientSecret ? \"client_id_and_secret\" : !clientId ? \"client_id\" : \"client_secret\";\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(\"missing_microsoft_\" + missing)}`);\n }\n const scopes = MICROSOFT_SCOPES;\n const tokenRes = await fetch(\"https://login.microsoftonline.com/common/oauth2/v2.0/token\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/x-www-form-urlencoded\" },\n body: new URLSearchParams({ client_id: clientId, client_secret: clientSecret, code, redirect_uri: redirectUri, grant_type: \"authorization_code\", scope: scopes }),\n });\n const tokens = await tokenRes.json() as any;\n if (!tokenRes.ok || !tokens.access_token) {\n const detail = [tokens.error, tokens.error_description].filter(Boolean).join(\": \") || \"token_exchange_failed\";\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(detail)}`);\n }\n\n const now = new Date().toISOString();\n const newExtraConfig = { ...(creds?.extra_config || {}), token_expiry: Date.now() + (tokens.expires_in || 3600) * 1000 };\n const existing = await sqlite.execute(\"SELECT id FROM integrations WHERE name = ? AND tenant_id = ?\", [\"outlook\", tid]);\n if (existing.rows.length > 0) {\n await sqlite.execute(\n \"UPDATE integrations SET access_token=?, refresh_token=?, extra_config=?, updated_at=? WHERE name='outlook' AND tenant_id = ?\",\n [tokens.access_token, tokens.refresh_token || creds?.refresh_token || null, JSON.stringify(newExtraConfig), now, tid]\n );\n } else {\n await sqlite.execute(\n \"INSERT INTO integrations (id, name, access_token, refresh_token, extra_config, connected_at, updated_at, tenant_id) VALUES (?,?,?,?,?,?,?,?)\",\n [crypto.randomUUID(), \"outlook\", tokens.access_token, tokens.refresh_token || null, JSON.stringify(newExtraConfig), now, now, tid]\n );\n }\n return redirectWithCookie(`${url.origin}/?auth=outlook_ok`, CLEAR_OAUTH_STATE);\n }\n\n // Identity login OAuth (sign-in, NOT data scopes): scope \"openid email profile\"; callback mints an app session.\n const loginMatch = pathname.match(/^\\/api\\/login\\/(google|microsoft)(\\/callback)?$/);\n if (loginMatch && method === \"GET\") {\n const provider = loginMatch[1] as \"google\" | \"microsoft\";\n return loginMatch[2]\n ? await identityLoginCallback(provider, req, url)\n : identityLoginStart(provider, url);\n }\n\n // --- Notes routes (TeamHub collaborative notes) ----\n if (pathname === \"/api/notes\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? \"marketing\";\n const result = await sqlite.execute(\n \"SELECT * FROM notes WHERE workspace=? AND tenant_id = ? ORDER BY pinned DESC, created_at DESC\",\n [workspace, tid]\n );\n return json(result.rows.map((r) => rowToObject(result.columns, r)));\n }\n if (pathname === \"/api/notes\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const id = crypto.randomUUID();\n const now = new Date().toISOString();\n await sqlite.execute(\n \"INSERT INTO notes (id, content, pinned, workspace, created_at, updated_at, tenant_id) VALUES (?,?,?,?,?,?,?)\",\n [id, body.content ?? \"\", body.pinned ? 1 : 0, body.workspace ?? \"marketing\", now, now, tid]\n );\n return json({ id, content: body.content ?? \"\", pinned: !!body.pinned, workspace: body.workspace ?? \"marketing\", created_at: now, updated_at: now }, 201);\n }\n const noteMatch = pathname.match(/^\\/api\\/notes\\/([^/]+)$/);\n if (noteMatch && method === \"PUT\") {\n const id = noteMatch[1];\n const body = await req.json().catch(() => ({}));\n const now = new Date().toISOString();\n const setParts: string[] = [\"updated_at=?\"];\n const setArgs: any[] = [now];\n if (body.pinned !== undefined) { setParts.push(\"pinned=?\"); setArgs.push(body.pinned ? 1 : 0); }\n if (body.content !== undefined) { setParts.push(\"content=?\"); setArgs.push(body.content); }\n await sqlite.execute(\n `UPDATE notes SET ${setParts.join(\", \")} WHERE id=? AND tenant_id = ?`,\n [...setArgs, id, tid]\n );\n const r = await sqlite.execute(\"SELECT * FROM notes WHERE id=? AND tenant_id = ?\", [id, tid]);\n if (!r.rows.length) return json({ error: \"Not found\" }, 404);\n return json(rowToObject(r.columns, r.rows[0]));\n }\n if (noteMatch && method === \"DELETE\") {\n await sqlite.execute(\"DELETE FROM notes WHERE id=? AND tenant_id = ?\", [noteMatch[1], tid]);\n return json({ success: true });\n }\n\n // --- World dashboard rollups (logs / kanban / project panels) ----\n // /api/world/activity — cross-agent runs; ?campaign[_id]=ID scopes to that campaign, bare ?campaign = legacy filter.\n if (pathname === \"/api/world/activity\" && method === \"GET\") {\n const limit = parseInt(url.searchParams.get(\"limit\") ?? \"40\", 10);\n const status = url.searchParams.get(\"status\") ?? undefined;\n const agent_id = url.searchParams.get(\"agent_id\") ?? undefined;\n const campaignParam = url.searchParams.get(\"campaign_id\") ?? url.searchParams.get(\"campaign\");\n const campaign_id = campaignParam ? campaignParam : undefined;\n const campaign = url.searchParams.get(\"campaign\") != null && !campaign_id;\n return json(await getWorldActivity({ limit, status, agent_id, campaign, campaign_id }));\n }\n // /api/world/board — tasks grouped into the 4 kanban columns; ?campaign[_id]=ID scopes them.\n if (pathname === \"/api/world/board\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n const campaign_id = url.searchParams.get(\"campaign_id\") ?? url.searchParams.get(\"campaign\") ?? undefined;\n return json(await getWorldBoard({ workspace, campaign_id: campaign_id || undefined }));\n }\n // /api/world/project — active campaign brief + real run-usage rollup; ?campaign[_id]=ID focuses it.\n if (pathname === \"/api/world/project\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n const campaign_id = url.searchParams.get(\"campaign_id\") ?? url.searchParams.get(\"campaign\") ?? undefined;\n return json(await getWorldProject({ workspace, campaign_id: campaign_id || undefined }));\n }\n\n // --- Campaigns (Director: multi-agent orchestrated pipelines) ----\n if (pathname === \"/api/campaigns\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n return json(await listCampaigns(workspace));\n }\n if (pathname === \"/api/campaigns\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createCampaign(body), 201);\n }\n // Sub-resources (:id/runs, :id/agents, :id/trigger) before the bare :id matcher.\n const campaignRunsMatch = pathname.match(/^\\/api\\/campaigns\\/([^/]+)\\/runs$/);\n if (campaignRunsMatch && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n // Runs the Director pipeline synchronously and returns the run result.\n return json(await orchestrateCampaignRun(campaignRunsMatch[1], body.input));\n }\n if (campaignRunsMatch && method === \"GET\") {\n return json(await listCampaignRuns(campaignRunsMatch[1]));\n }\n const campaignAgentsMatch = pathname.match(/^\\/api\\/campaigns\\/([^/]+)\\/agents$/);\n if (campaignAgentsMatch && method === \"GET\") {\n return json(await getCampaignAgents(campaignAgentsMatch[1]));\n }\n // Clicking a campaign returns its tasks (OKR→Campaign→Task link).\n const campaignTasksMatch = pathname.match(/^\\/api\\/campaigns\\/([^/]+)\\/tasks$/);\n if (campaignTasksMatch && method === \"GET\") {\n return json(await listTasks({ campaign_id: campaignTasksMatch[1] }));\n }\n const campaignTriggerMatch = pathname.match(/^\\/api\\/campaigns\\/([^/]+)\\/trigger$/);\n if (campaignTriggerMatch && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await setCampaignTrigger(campaignTriggerMatch[1], body));\n }\n const campaignIdMatch = pathname.match(/^\\/api\\/campaigns\\/([^/]+)$/);\n if (campaignIdMatch && method === \"GET\") {\n const c = await getCampaign(campaignIdMatch[1]);\n return c ? json(c) : json({ error: \"Not found\" }, 404);\n }\n if (campaignIdMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n return json(await updateCampaign(campaignIdMatch[1], body));\n }\n if (campaignIdMatch && method === \"DELETE\") {\n const ok = await deleteCampaign(campaignIdMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // No route matched\n return json({ error: \"Not found\", path: pathname }, 404);\n } catch (err) {\n const message = err instanceof Error ? err.message : String(err);\n console.error(`[router] Error handling ${method} ${pathname}:`, message);\n return json({ error: \"Internal server error\", detail: message }, 500);\n }\n}\n\n/**\n * Converts a sqlite result row (array of values) to a plain object\n * using the columns array from the result set.\n */\nfunction rowToObject(columns: string[], row: unknown[]): Record<string, unknown> {\n const obj: Record<string, unknown> = {};\n for (let i = 0; i < columns.length; i++) {\n obj[columns[i]] = row[i];\n }\n return obj;\n}\n",[184],"093e1b2c-5f15-11f1-85c6-1607ee4eb77e","main.ts",1005,["D",1780467937905],22,"http","import { initDB, tenantStore, SYSTEM_CTX } from \"./db.ts\";\nimport { handleRequest } from \"./router.ts\";\nimport { getFrontendHTML, getWorldHTML } from \"./frontend.ts\";\nimport { seedKnowledge } from \"./api/knowledge_seed.ts\";\nimport { resolveSession } from \"./api/session.ts\";\n\n// Foundation tenant context: a session resolves to a TenantCtx; absent one we fall back to the\n// system/default SYSTEM_CTX (imported from db.ts, typed as TenantCtx) so all existing\n// (t_default-backfilled) data keeps working exactly as today.\n\nlet initialized = false;\n\n// Shared-secret gate. Set APP_TOKEN in the val's environment. Every /api/* route\n// requires `Authorization: Bearer <APP_TOKEN>` (or `?token=` for download links),\n// EXCEPT the public paths below. Fail-closed: if APP_TOKEN is unset, data routes 503.\nconst APP_TOKEN = (Deno.env.get(\"APP_TOKEN\") || \"\").trim();\n\n// Auth ENABLED (Phase 3): /api/* requires a valid nexus_session cookie OR the APP_TOKEN bearer\n// (recovery hatch). Public paths (app modules, /api/auth/*, /api/login/*, /api/health) stay open so\n// the login screen always loads. Verified: owner session authorizes, anonymous → 401 → login screen.\nconst AUTH_DISABLED = false;\n\n// Public /api paths that must stay reachable without the app token:\n// - /api/app-* : the frontend's own JS modules (static code, no secrets; loaded by <script>/import)\n// - /api/auth/* : OAuth start + callback (browser redirect can't carry a header; protected by OAuth state)\n// - /api/health : liveness probe\n// - Wave-2 anonymous marketing surfaces (the only intentionally-unauthed business endpoints):\n// POST /api/marketing/forms/:id/submit : public lead-capture form submit. SAFE because\n// submitForm() never trusts the session — it resolves the owning tenant FROM the form id\n// (system/unscoped SELECT by id) and writes ONLY to that tenant; honeypot + rate-limit gate bots.\n// GET /api/marketing/p/:slug : public landing-page render. SAFE because renderLandingPage()\n// resolves the page BY SLUG across tenants and only serves it when published; read-only.\n// Both still flow through tenantStore.run with SYSTEM_CTX; the handlers carry the resolved owning\n// tenant_id explicitly, so a public caller can never read/write another tenant beyond the matched record.\nconst PUBLIC_FORM_SUBMIT_RE = /^\\/api\\/marketing\\/forms\\/[^/]+\\/submit$/;\nconst PUBLIC_LANDING_RENDER_RE = /^\\/api\\/marketing\\/p\\/[^/]+$/;\nfunction isPublicApiPath(pathname: string): boolean {\n if (pathname.startsWith(\"/api/app-\")) return true;\n if (pathname.startsWith(\"/api/auth/\")) return true;\n // Identity-only OAuth login start + callbacks: browser redirects can't carry a bearer header.\n if (pathname.startsWith(\"/api/login/\")) return true;\n if (pathname === \"/api/health\") return true;\n // Anonymous marketing capture + landing render (tenant resolved from the record, not the session).\n if (PUBLIC_FORM_SUBMIT_RE.test(pathname)) return true;\n if (PUBLIC_LANDING_RENDER_RE.test(pathname)) return true;\n return false;\n}\n\nfunction safeEqual(a: string, b: string): boolean {\n if (a.length !== b.length) return false;\n let r = 0;\n for (let i = 0; i < a.length; i++) r |= a.charCodeAt(i) ^ b.charCodeAt(i);\n return r === 0;\n}\n\nfunction isAuthorized(req: Request, url: URL): boolean {\n if (!APP_TOKEN) return false;\n const header = req.headers.get(\"Authorization\") || \"\";\n const bearer = header.startsWith(\"Bearer \") ? header.slice(7).trim() : \"\";\n const provided = bearer || (url.searchParams.get(\"token\") || \"\").trim();\n return provided.length > 0 && safeEqual(provided, APP_TOKEN);\n}\n\nexport default async function(req: Request): Promise<Response> {\n if (!initialized) {\n await initDB();\n initialized = true;\n // Part 4 / W2: seed the growth-model + math knowledge packs (idempotent, version-gated).\n // Fire-and-forget so it can never block or break boot.\n seedKnowledge().catch(() => {});\n }\n\n const url = new URL(req.url);\n const corsHeaders = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, PUT, DELETE, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, Authorization\",\n };\n const jsonHeaders = { \"Content-Type\": \"application/json\", ...corsHeaders };\n\n if (req.method === \"OPTIONS\") {\n return new Response(null, { status: 204, headers: corsHeaders });\n }\n\n if (url.pathname.startsWith(\"/api/\")) {\n // Resolve the caller's session ONCE into a TenantCtx (or null). A non-null session is\n // authorization in its own right; APP_TOKEN remains a fallback/recovery hatch for callers\n // (e.g. /world, scripts) that present a bearer instead of a cookie. Fall back to the\n // system/default context so all existing (t_default-backfilled) data keeps working as today.\n const sessionCtx = await resolveSession(req);\n const authed = !!sessionCtx || isAuthorized(req, url);\n const ctx = sessionCtx || SYSTEM_CTX;\n\n if (!AUTH_DISABLED && !isPublicApiPath(url.pathname) && !authed) {\n return new Response(JSON.stringify({ error: \"Unauthorized\" }), { status: 401, headers: jsonHeaders });\n }\n // Phase D global READ-ONLY guard: while the master is impersonating (\"view as tenant\"), block every\n // tenant-data write. Only GETs, the platform routes (so the master can POST the exit route + controls),\n // and /api/auth/* (so /api/auth/me keeps working) are allowed through; everything else is 403.\n if (\n ctx.impersonating &&\n req.method !== \"GET\" &&\n !url.pathname.startsWith(\"/api/platform/\") &&\n !url.pathname.startsWith(\"/api/auth/\")\n ) {\n return new Response(\n JSON.stringify({ error: \"Read-only while viewing as a tenant — exit impersonation to make changes.\" }),\n { status: 403, headers: jsonHeaders },\n );\n }\n // Run the data handler inside the resolved tenant scope so every business query sees currentCtx().\n return tenantStore.run(ctx, () => handleRequest(req, url));\n }\n\n // Part 10: the 3D Agent World — a second front-end skin (director chat + agents + 3D office)\n // over the SAME backend. MUST branch BEFORE the SPA fall-through (which catches every non-/api path).\n if (url.pathname === \"/world\") {\n return new Response(getWorldHTML(), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\", ...corsHeaders },\n });\n }\n\n // Per-tab deep links: each SPA view gets a REAL, bookmarkable URL (`/dashboard`, `/sales`, …)\n // that serves the exact same SPA shell as \"/\". The client router reads the path on boot and\n // opens the matching view. Placed AFTER /api/* (returns above) and /world so it never shadows\n // those; the jsModule routes all live under /api/ so they're unaffected too.\n const SPA_VIEW_IDS = new Set([\n \"dashboard\", \"objectives\", \"experiments\", \"marketing\", \"sales\", \"campaigns\",\n \"agents\", \"approvals\", \"calendar\", \"analytics\", \"workspace\", \"knowledge\",\n \"playbooks\", \"tasks\", \"settings\", \"platform\",\n ]);\n if (SPA_VIEW_IDS.has(url.pathname.slice(1))) {\n return new Response(getFrontendHTML(), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\", ...corsHeaders },\n });\n }\n\n return new Response(getFrontendHTML(), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\", ...corsHeaders },\n });\n}\n",[192],"b411dbce-5e66-11f1-a5c9-1607ee4eb77e","frontend_world_ui.ts","1d515596-5da0-11f1-98b2-1607ee4eb77e",889,["D",1780393062576],6,"// frontend_world_ui.ts — the HTML overlay module for the Agent World (\"/world\").\n//\n// getWorldUIJS() returns ONE backtick-delimited browser ES-module (served at /api/app-world-ui).\n// It exports createUI(world, office, opts) which builds the DOM overlay inside #world-root:\n// - LARGE, detailed speech bubbles projected from each avatar head (camera.project each frame)\n// - a colored Team panel with live status (running=green pulse / completed=blue / failed=red / idle=grey)\n// - a Director chat bar (bottom) whose send calls opts.onChat (the entry posts to /api/chat)\n// - an Approvals toast (top-right, auto-dismiss ~5s)\n// - an empty-state \"no agents yet\" card\n//\n// API returned by createUI:\n// { mount(rootEl), updateBubbles(entries), teamPanel(list), toast(msg), emptyState(show), onChat(handler) }\n//\n// FOOTGUNS (must hold): NO TS annotations inside the returned string; NO unescaped backticks or\n// ${...} inside it (plain string concat everywhere); emojis as \\uXXXX escapes. Placement-style\n// values use deterministic index hashes only — no Math.random / Date in layout. (Runtime ambient\n// jitter, if any, may use the browser PRNG.) Keep this file well under 80KB.\n\nexport function getWorldUIJS(): string {\n return `\nimport * as THREE from 'three';\n\n// ---------------------------------------------------------------------------\n// Shared palette + helpers (kept in agreement with the other world modules).\n// ---------------------------------------------------------------------------\nvar DIRECTOR_COLOR = '#4285F4';\nvar MEMBER_COLORS = ['#34A853','#FBBC05','#EA4335','#F59E0B','#40D5AD','#E64347','#E643C5','#7CE630','#5E888E'];\nvar STATUS_RUNNING = '#34A853';\nvar STATUS_FAILED = '#EA4335';\nvar STATUS_COMPLETED = '#4285F4';\nvar STATUS_IDLE = '#9aa3b2';\n\nfunction memberColorHex(i) {\n var L = MEMBER_COLORS.length;\n return MEMBER_COLORS[(((i % L) + L) % L)];\n}\n\n// Coerce ANY value to a safe display string — never \"[object Object]\".\n// Strings/numbers/booleans pass through; objects yield a text field if one exists,\n// else a compact JSON.stringify(...) slice; arrays join their stringified items.\n// This is the single choke point every String(x)/trunc(x) that might receive an\n// object should go through (bubbles, previews, inspect popover, tasks-done list).\nfunction textOf(v) {\n if (v == null) return '';\n var t = typeof v;\n if (t === 'string') return v;\n if (t === 'number' || t === 'boolean') return String(v);\n if (t === 'function') return '';\n if (Array.isArray(v)) {\n var parts = [];\n for (var i = 0; i < v.length && i < 12; i++) {\n var p = textOf(v[i]);\n if (p) parts.push(p);\n }\n return parts.join(', ');\n }\n if (t === 'object') {\n // Prefer a human text field if the object carries one.\n var keys = ['text', 'content', 'message', 'preview', 'value', 'title',\n 'name', 'label', 'output', 'summary', 'description', 'detail'];\n for (var k = 0; k < keys.length; k++) {\n var f = v[keys[k]];\n if (typeof f === 'string' && f.trim() !== '') return f;\n if (typeof f === 'number' || typeof f === 'boolean') return String(f);\n }\n // No friendly field — fall back to compact JSON (never \"[object Object]\").\n try {\n var j = JSON.stringify(v);\n if (j && j !== '{}' && j !== 'null') return j.length > 300 ? j.slice(0, 300) + '\\\\u2026' : j;\n } catch (e) { /* circular / unserializable */ }\n return '';\n }\n return String(v);\n}\n\nfunction esc(s) {\n s = textOf(s);\n return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')\n .replace(/\"/g, '"').replace(/'/g, ''');\n}\nfunction trunc(s, n) {\n s = textOf(s).replace(/\\\\s+/g, ' ').trim();\n n = n || 40;\n if (s.length > n) s = s.slice(0, n - 1) + '\\\\u2026';\n return s;\n}\nfunction lower(s) { return textOf(s).toLowerCase().trim(); }\n\n// ---------------------------------------------------------------------------\n// Auth + activity fetch (self-contained: this module owns its own Bearer call so\n// it does not depend on the host frontend's apiJSON). Reads the same nexus_token\n// the rest of /world uses from localStorage and GETs the completed-runs feed for\n// one agent (so a click can list the work that agent has finished).\n// ---------------------------------------------------------------------------\nfunction nexusToken() {\n try { return localStorage.getItem('nexus_token') || ''; } catch (e) { return ''; }\n}\nfunction fetchAgentActivity(agentId, status, limit) {\n var qs = '/api/world/activity?agent_id=' + encodeURIComponent(String(agentId)) +\n (status ? '&status=' + encodeURIComponent(status) : '') +\n '&limit=' + (limit || 8);\n var headers = {};\n var tok = nexusToken();\n if (tok) headers['Authorization'] = 'Bearer ' + tok;\n return fetch(qs, { headers: headers }).then(function (res) {\n if (!res || !res.ok) return [];\n return res.json().then(function (data) {\n return (data && Array.isArray(data.runs)) ? data.runs : [];\n }, function () { return []; });\n }, function () { return []; });\n}\n\n// A human \"when\" for a run, from its finished_at / started_at ISO timestamp.\n// Relative (\"3m ago\" / \"2h ago\" / \"yesterday\") for recent, else a short date.\nfunction whenOf(run) {\n if (!run) return '';\n var iso = run.finished_at || run.started_at || '';\n if (!iso) return '';\n var t = Date.parse(iso);\n if (isNaN(t)) return '';\n var diff = Date.now() - t;\n if (diff < 0) diff = 0;\n var sec = Math.floor(diff / 1000);\n if (sec < 45) return 'just now';\n var min = Math.floor(sec / 60);\n if (min < 60) return min + 'm ago';\n var hr = Math.floor(min / 60);\n if (hr < 24) return hr + 'h ago';\n var day = Math.floor(hr / 24);\n if (day === 1) return 'yesterday';\n if (day < 7) return day + 'd ago';\n try { return new Date(t).toLocaleDateString(); } catch (e) { return day + 'd ago'; }\n}\n\n// A short title/preview for one completed run row in the \"Tasks done\" list.\n// Prefer the run output, then its input, then the last meaningful trace step.\nfunction runTitleOf(run) {\n if (!run) return '';\n var s = (textOf(run.output) || textOf(run.input) || '').replace(/\\\\s+/g, ' ').trim();\n if (s) return trunc(s, 96);\n var steps = traceStepsOf(run.trace);\n for (var i = steps.length - 1; i >= 0; i--) {\n var line = stepLine(steps[i]);\n if (line) return trunc(line, 96);\n }\n if (run.error) return '\\\\u26A0\\\\uFE0F ' + trunc(run.error, 80);\n return 'completed a task';\n}\n\n// Deterministic 0..1 hash from an integer seed (fract of sin*large) — no Math.random.\n// Used only for stable cosmetic offsets (never for randomness that must vary at runtime).\nfunction hash01(i) {\n var x = Math.sin(i * 12.9898 + 1.0) * 43758.5453;\n return x - Math.floor(x);\n}\n\n// Map an avatar status string to a swatch color + a short live word for the panel.\nfunction statusColorOf(status) {\n status = lower(status);\n if (status === 'running' || status === 'active' || status === 'pending' || status === 'in_progress') return STATUS_RUNNING;\n if (status === 'failed' || status === 'error') return STATUS_FAILED;\n if (status === 'completed' || status === 'done' || status === 'success' || status === 'succeeded') return STATUS_COMPLETED;\n return STATUS_IDLE;\n}\nfunction statusWordOf(status) {\n status = lower(status);\n if (status === 'running' || status === 'active' || status === 'pending' || status === 'in_progress') return 'working';\n if (status === 'failed' || status === 'error') return 'failed';\n if (status === 'completed' || status === 'done' || status === 'success' || status === 'succeeded') return 'completed';\n if (status === 'paused' || status === 'disabled') return 'paused';\n return 'idle';\n}\nfunction isRunning(status) { return statusWordOf(status) === 'working'; }\n\n// Per-agent hue: director-blue for the lead (index 0 / role matches), else cycle MEMBER_COLORS.\nfunction colorForRow(row, index) {\n if (row && row.colorHex) return row.colorHex;\n var role = lower(row && row.role || '');\n var name = lower(row && row.name || '');\n var isLead = (index === 0) || /director|lead/.test(role) || /director|lead/.test(name);\n if (isLead) return DIRECTOR_COLOR;\n return memberColorHex(index - 1);\n}\n\n// Parse an agent_run.trace (JSON string / array / {steps}/{director}) into a flat step list.\n// Defensive: any failure yields []. Each step is one of the backend shapes:\n// {t:'round',n,ts} | {t:'tool',name,args_preview,result_preview,ms,ts}\n// {t:'message',role,preview,ts} | {t:'director'|'agent'|'synthesis'|'approval',name,preview,note,ts}\nfunction traceStepsOf(trace) {\n if (typeof trace === 'string') { try { trace = JSON.parse(trace); } catch (e) { return []; } }\n if (Array.isArray(trace)) return trace;\n if (trace && Array.isArray(trace.steps)) return trace.steps;\n if (trace && Array.isArray(trace.director)) return trace.director;\n if (trace && trace.pipeline && Array.isArray(trace.pipeline)) return trace.pipeline;\n return [];\n}\n\n// Turn ONE trace step into a short live line (glyph + label, e.g. \"\\\\uD83D\\\\uDD27 prepare_post \\\\u2192 queued draft\").\n// Returns '' for steps that carry no meaningful text (so callers can skip backwards over them).\nfunction stepLine(s) {\n if (!s) return '';\n var t = lower(s.t);\n if (t === 'round') return ''; // bare round markers are not meaningful on their own\n // Coerce every preview-ish field to a display string up front, so the truthiness\n // checks below operate on resolved text (an object like {} must read as empty, and\n // a structured preview must never reach the DOM as \"[object Object]\").\n if (t === 'tool' || s.tool || s.name && (t === 'tool' || !t)) {\n var nm = textOf(s.name || s.tool || 'tool');\n var pv = textOf(s.result_preview) || textOf(s.preview) || textOf(s.args_preview) || '';\n if (nm && pv) return '\\\\uD83D\\\\uDD27 ' + trunc(nm, 30) + ' \\\\u2192 ' + trunc(pv, 70);\n if (nm) return '\\\\uD83D\\\\uDD27 ' + trunc(nm, 60);\n }\n if (t === 'message' || s.role === 'assistant') {\n var mp = textOf(s.preview) || textOf(s.message) || textOf(s.text) || textOf(s.content) || '';\n if (mp) return '\\\\uD83D\\\\uDCAC ' + trunc(mp, 84);\n }\n // Campaign/director step kinds carry their own name/preview/note.\n var dn = textOf(s.name) || textOf(s.agent) || '';\n var dp = textOf(s.preview) || textOf(s.note) || textOf(s.result_preview) || '';\n if (t === 'director' && (dp || dn)) return '\\\\uD83C\\\\uDF9B\\\\uFE0F ' + (dp ? trunc(dp, 80) : trunc(dn, 60));\n if (t === 'agent' && (dn || dp)) return '\\\\uD83E\\\\uDD16 ' + trunc(dn, 26) + (dp ? ' \\\\u2192 ' + trunc(dp, 60) : '');\n if (t === 'synthesis' && (dp || dn)) return '\\\\uD83D\\\\uDD00 ' + trunc(dp || dn, 80);\n if (t === 'approval' && (dp || dn)) return '\\\\u2705 ' + trunc(dp || dn, 80);\n if (dn && dp) return trunc(dn, 28) + ' \\\\u2192 ' + trunc(dp, 64);\n if (dp) return trunc(dp, 88);\n if (dn) return trunc(dn, 60);\n return '';\n}\n\n// The latest MEANINGFUL trace step of an entry's run, as a short live line. Because the entry\n// refreshes each poll (the backend streams the trace), this line updates live = a streaming trace.\nfunction previewLine(entry) {\n if (!entry) return '';\n var run = entry.run;\n if (!run) return '';\n var steps = traceStepsOf(run.trace);\n for (var i = steps.length - 1; i >= 0; i--) {\n var line = stepLine(steps[i]);\n if (line) return line;\n }\n if (run.error) return '\\\\u26A0\\\\uFE0F ' + trunc(run.error, 80);\n return '';\n}\n\n// Is this entry currently in a 1-to-1 talk (a handoff-walk pause facing another agent,\n// or any talk flag the agents module surfaces)? Defensive: tolerate several shapes.\nfunction inTalk(entry) {\n if (!entry) return false;\n if (entry.inTalk || entry.talking || entry.talkingWith) return true;\n var h = entry.handoff;\n if (h && (h.phase === 'talk' || h.talk === true)) return true;\n return false;\n}\n\n// The dad-joke / small-talk line to show in the bubble (from the agents module's\n// entry.sayLine). Returned only when the agent is FREE (idle/completed/none) or in a\n// 1-to-1 talk — i.e. not when it is heads-down on a running task. '' = no joke to show.\n// DECORATIVE vs REAL: a dad joke is purely cosmetic small-talk, NOT real agent work, so it\n// gets a distinct smiley glyph (\\\\uD83D\\\\uDE04) instead of the \\\\uD83D\\\\uDCAC trace-bubble glyph\n// that real reasoning/message previews use. fillBubble() additionally styles a joke body muted\n// + italic so it reads clearly as decorative chatter, never as a live trace step.\nfunction talkLineOf(entry) {\n if (!entry) return '';\n var line = textOf(entry.sayLine);\n if (line.trim() === '') return '';\n var st = statusWordOf(entry.status);\n var free = (st === 'idle' || st === 'completed' || st === 'paused');\n if (free || inTalk(entry)) return '\\\\uD83D\\\\uDE04 ' + trunc(line, 96);\n return '';\n}\n\n// Is this entry's CURRENT bubble body a decorative dad joke (vs real trace work)? The agents\n// module flags every dad-joke say-line with entry.sayIsJoke; a joke is only shown when the agent\n// is FREE / in a 1-to-1 talk (same gate as talkLineOf). Used by fillBubble() to apply the muted,\n// italic, decorative styling so jokes are visually distinct from real trace-preview bubbles.\nfunction isDecorativeJokeBody(entry) {\n if (!entry || !entry.sayIsJoke) return false;\n var line = textOf(entry.sayLine);\n if (line.trim() === '') return false;\n var st = statusWordOf(entry.status);\n if (st === 'working' || st === 'failed') return false; // real work / errors win over a joke\n var free = (st === 'idle' || st === 'completed' || st === 'paused');\n return free || inTalk(entry);\n}\n\n// The bubble BODY: prefer the agent's latest live trace step; otherwise a brief status/idle line.\n// Idle/no-run agents are roaming, so they get a free \"wandering\" line rather than a blank.\nfunction bodyLineOf(entry) {\n var st = statusWordOf(entry && entry.status);\n if (st === 'working') {\n var live = previewLine(entry);\n if (live) return live;\n return '\\\\uD83D\\\\uDD27 working on a task';\n }\n // FREE / talking agents: a dad joke from entry.sayLine beats the generic roaming line.\n var joke = talkLineOf(entry);\n if (joke && st !== 'failed') return joke;\n if (st === 'failed') {\n var run = entry && entry.run;\n if (run && run.error) return '\\\\u26A0\\\\uFE0F ' + trunc(run.error, 78);\n return '\\\\u26A0\\\\uFE0F last run failed';\n }\n if (st === 'completed') {\n var last = previewLine(entry);\n if (last) return last;\n return '\\\\u2705 finished its task';\n }\n if (st === 'paused') return '\\\\u23F8\\\\uFE0F paused';\n return '\\\\uD83D\\\\uDEB6 roaming \\\\u00B7 free for a task';\n}\n\n// ---------------------------------------------------------------------------\n// createUI factory.\n// ---------------------------------------------------------------------------\nexport function createUI(world, office, opts) {\n opts = opts || {};\n var rootEl = null;\n var chatHandler = (opts && typeof opts.onChat === 'function') ? opts.onChat : null;\n\n // DOM handles (filled in mount()).\n var panelEl = null; // team panel container\n var panelListEl = null; // team panel row list\n var panelCountEl = null; // agent count badge\n var bubbleLayer = null; // absolutely-positioned div the bubbles attach to\n var toastRegion = null; // top-right toast stack\n var emptyEl = null; // centered \"no agents yet\" card\n var chatInput = null; // director chat input\n var chatSend = null; // director chat send button\n var chatTranscript = null;// director chat transcript\n var mounted = false;\n\n // Bubble DOM nodes keyed by entry id (diffed — never full re-render).\n var bubbleNodes = {};\n // Scratch vector reused for projection each frame (no per-frame allocation).\n var _proj = new THREE.Vector3();\n\n // ---- DOM construction helpers -----------------------------------------\n function el(tag, cls, css) {\n var n = document.createElement(tag);\n if (cls) n.className = cls;\n if (css) n.style.cssText = css;\n return n;\n }\n\n // ---- mount -------------------------------------------------------------\n function mount(root) {\n if (mounted) return;\n rootEl = root || document.getElementById('world-root');\n if (!rootEl) return;\n mounted = true;\n\n // Inject the live-status pulse keyframes once (running dots breathe green).\n if (!document.getElementById('world-ui-style')) {\n var st = document.createElement('style');\n st.id = 'world-ui-style';\n st.textContent =\n '@keyframes worldDotPulse{0%{box-shadow:0 0 4px currentColor;opacity:.85;}' +\n '50%{box-shadow:0 0 11px currentColor;opacity:1;}100%{box-shadow:0 0 4px currentColor;opacity:.85;}}' +\n '.world-dot-pulse{animation:worldDotPulse 1.3s ease-in-out infinite;}';\n document.head.appendChild(st);\n }\n\n // Bubble layer: a transparent, click-through plane the projected bubbles live in.\n bubbleLayer = el('div', null, 'position:absolute;inset:0;z-index:18;pointer-events:none;overflow:hidden;');\n bubbleLayer.id = 'world-bubble-layer';\n rootEl.appendChild(bubbleLayer);\n\n // Toast region: top-right column.\n toastRegion = el('div', null, 'position:fixed;top:64px;right:14px;z-index:34;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;');\n toastRegion.id = 'world-toast-region';\n rootEl.appendChild(toastRegion);\n\n // NOTE: the dashboard (frontend_world_dash.ts) now owns the Team roster (MEMBER ROSTER panel)\n // and the Director input (top bar). This in-scene UI module is ONLY the toast region + the\n // bubble/chip layer over the canvas — building the old top-right Team panel + a second chat\n // bar here would overlap the dashboard's right panel + duplicate the input. So: skip them.\n buildEmptyState();\n buildInspect();\n // Click an agent in the 3D -> show its info popover (the bubble layer is click-through).\n var cv = document.getElementById('world-canvas');\n if (cv) cv.addEventListener('click', onCanvasClick);\n }\n\n // ---- click-an-agent -> info popover (raycast into the avatar meshes) ----\n var _ray = new THREE.Raycaster();\n var _mouse = new THREE.Vector2();\n var inspectEl = null;\n var activeId = null;\n\n // Entry calls ui.setActive(runningId) — remember it so the bubble can emphasize the speaker.\n function setActive(id) { activeId = (id == null ? null : String(id)); }\n\n function buildInspect() {\n if (inspectEl || !rootEl) return;\n inspectEl = el('div', 'glass', 'position:absolute;left:14px;bottom:14px;width:300px;max-width:44vw;max-height:min(70vh,520px);overflow-y:auto;border-radius:14px;padding:13px 15px;z-index:30;color:#1f2430;display:none;box-shadow:0 12px 40px rgba(20,30,60,0.18);pointer-events:auto;');\n inspectEl.id = 'world-inspect';\n rootEl.appendChild(inspectEl);\n }\n\n function entryAtPointer(ev) {\n if (!world || !world.camera || !lastEntries || !lastEntries.length) return null;\n var cv = ev.currentTarget || document.getElementById('world-canvas');\n if (!cv) return null;\n var rect = cv.getBoundingClientRect();\n if (!rect.width || !rect.height) return null;\n _mouse.x = ((ev.clientX - rect.left) / rect.width) * 2 - 1;\n _mouse.y = -((ev.clientY - rect.top) / rect.height) * 2 + 1;\n _ray.setFromCamera(_mouse, world.camera);\n var targets = [];\n for (var i = 0; i < lastEntries.length; i++) { if (lastEntries[i] && lastEntries[i].object3D) targets.push(lastEntries[i].object3D); }\n var hits = _ray.intersectObjects(targets, true);\n if (!hits.length) return null;\n var obj = hits[0].object;\n for (var k = 0; k < lastEntries.length; k++) {\n var rootObj = lastEntries[k].object3D, p = obj;\n while (p) { if (p === rootObj) return lastEntries[k]; p = p.parent; }\n }\n return null;\n }\n\n function onCanvasClick(ev) {\n var found = entryAtPointer(ev);\n if (found) showInspect(found); else hideInspect();\n }\n\n // Monotonic click token: a stale activity fetch (user clicked another agent first)\n // never overwrites the popover that is now showing.\n var _inspectSeq = 0;\n\n // The \"currently running\" block (only shown when the agent is mid-run).\n function currentRunHTML(run, hue) {\n if (!run) return '';\n var line = previewLine({ run: run, status: 'running' });\n if (!line) line = '\\\\uD83D\\\\uDD27 working on a task';\n return '<div style=\"font-size:10.5px;font-weight:700;color:' + hue + ';text-transform:uppercase;letter-spacing:.5px;margin:11px 0 5px;\">Working now</div>' +\n '<div style=\"font-size:11.5px;line-height:1.4;color:#39414f;background:rgba(52,168,83,0.10);border:1px solid rgba(52,168,83,0.22);border-radius:9px;padding:7px 9px;white-space:normal;word-break:break-word;\">' + esc(line) + '</div>';\n }\n\n // The \"Tasks done\" list: the agent's last few COMPLETED runs (title/preview + when).\n function tasksDoneHTML(runs) {\n if (!runs || !runs.length) {\n return '<div style=\"font-size:10.5px;font-weight:700;color:#5a6273;text-transform:uppercase;letter-spacing:.5px;margin:11px 0 5px;\">Tasks done</div>' +\n '<div style=\"font-size:11px;color:#8a93a3;font-style:italic;\">No completed tasks yet.</div>';\n }\n var html = '<div style=\"font-size:10.5px;font-weight:700;color:#5a6273;text-transform:uppercase;letter-spacing:.5px;margin:11px 0 5px;\">Tasks done ' +\n '<span style=\"color:#9aa3b2;font-weight:600;\">(' + runs.length + ')</span></div>' +\n '<div style=\"display:flex;flex-direction:column;gap:6px;\">';\n for (var i = 0; i < runs.length; i++) {\n var r = runs[i] || {};\n var when = whenOf(r);\n html += '<div style=\"font-size:11.5px;line-height:1.4;color:#39414f;background:rgba(20,30,60,0.04);border-radius:9px;padding:7px 9px;\">' +\n '<div style=\"display:flex;align-items:flex-start;gap:6px;\">' +\n '<span style=\"color:#4285F4;flex:0 0 auto;line-height:1.4;\">\\\\u2705</span>' +\n '<span style=\"flex:1;min-width:0;white-space:normal;word-break:break-word;\">' + esc(runTitleOf(r)) + '</span>' +\n '</div>' +\n (when ? '<div style=\"font-size:10px;color:#9aa3b2;margin-top:3px;\">' + esc(when) + '</div>' : '') +\n '</div>';\n }\n html += '</div>';\n return html;\n }\n\n function showInspect(entry) {\n buildInspect();\n if (!inspectEl || !entry) return;\n var seq = ++_inspectSeq;\n activeId = (entry.id == null ? null : String(entry.id));\n var a = entry.agent || {};\n var name = a.name || String(entry.id);\n var role = entry.role || a.role || 'Agent';\n var hue = entry.colorHex || '#4285F4';\n var status = statusWordOf(entry.status);\n var run = entry.run || null;\n var running = (status === 'working');\n var detail = '';\n if (run) {\n // textOf each candidate (never let an object short-circuit into \"[object Object]\").\n var prev = (textOf(run.output) || textOf(run.preview) || textOf(run.input) || '').replace(/\\\\s+/g, ' ').trim();\n if (prev.length > 240) prev = prev.slice(0, 239) + '\\\\u2026';\n detail = prev;\n }\n var extra = '';\n if (a.goal) extra += '<div style=\"font-size:10.5px;color:#5a6273;margin-top:7px;\"><b>Goal</b> ' + esc(trunc(a.goal, 110)) + '</div>';\n if (a.channel) extra += '<div style=\"font-size:10.5px;color:#5a6273;margin-top:2px;\"><b>Channel</b> ' + esc(a.channel) + '</div>';\n inspectEl.innerHTML =\n '<div style=\"display:flex;align-items:center;gap:8px;margin-bottom:7px;position:sticky;top:-13px;margin:-13px -15px 7px;padding:13px 15px 7px;background:rgba(255,255,255,0.96);z-index:1;\">' +\n '<span style=\"width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:' + hue + ';box-shadow:0 0 8px ' + hue + ';\"></span>' +\n '<span style=\"font-weight:800;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\">' + esc(name) + '</span>' +\n '<button id=\"world-inspect-x\" style=\"border:none;background:transparent;cursor:pointer;font-size:17px;color:#5a6273;line-height:1;padding:0 2px;\">\\\\u00D7</button>' +\n '</div>' +\n '<div style=\"font-size:11px;color:#5a6273;margin-bottom:8px;\">' + esc(role) + ' \\\\u00B7 <b style=\"color:' + hue + ';\">' + esc(status) + '</b></div>' +\n (detail\n ? '<div style=\"font-size:11.5px;line-height:1.45;color:#39414f;background:rgba(20,30,60,0.04);border-radius:9px;padding:8px 10px;max-height:150px;overflow:auto;white-space:pre-wrap;\">' + esc(detail) + '</div>'\n : '<div style=\"font-size:11px;color:#8a93a3;font-style:italic;\">No recent activity yet.</div>') +\n extra +\n (running ? currentRunHTML(run, hue) : '') +\n '<div id=\"world-inspect-done\"><div style=\"font-size:10.5px;font-weight:700;color:#5a6273;text-transform:uppercase;letter-spacing:.5px;margin:11px 0 5px;\">Tasks done</div>' +\n '<div style=\"font-size:11px;color:#9aa3b2;\">Loading\\\\u2026</div></div>';\n inspectEl.style.display = 'block';\n inspectEl.scrollTop = 0;\n var xb = document.getElementById('world-inspect-x');\n if (xb) xb.addEventListener('click', hideInspect);\n\n // Async: fetch the agent's completed runs and fill in the \"Tasks done\" list.\n // Guarded by seq so a later click wins; skip when there's no agent id to query.\n if (entry.id == null) {\n var slot0 = document.getElementById('world-inspect-done');\n if (slot0) slot0.innerHTML = tasksDoneHTML([]);\n return;\n }\n fetchAgentActivity(entry.id, 'completed', 6).then(function (runs) {\n if (seq !== _inspectSeq || !inspectEl || inspectEl.style.display === 'none') return;\n var slot = document.getElementById('world-inspect-done');\n if (slot) slot.innerHTML = tasksDoneHTML(runs.slice(0, 5));\n }, function () {\n if (seq !== _inspectSeq) return;\n var slotE = document.getElementById('world-inspect-done');\n if (slotE) slotE.innerHTML = tasksDoneHTML([]);\n });\n }\n function hideInspect() { if (inspectEl) inspectEl.style.display = 'none'; }\n\n // ---- Team panel (top-right, below any app top bar) ---------------------\n function buildTeamPanel() {\n panelEl = el('div', 'glass', 'position:fixed;top:66px;right:14px;width:270px;max-height:calc(100vh - 240px);overflow-y:auto;border-radius:14px;padding:12px;z-index:24;color:#1f2430;');\n panelEl.id = 'world-team-panel';\n var head = el('div', null, 'display:flex;align-items:center;gap:8px;margin-bottom:9px;');\n head.innerHTML =\n '<span style=\"font-weight:700;font-size:12px;color:#4285F4;text-transform:uppercase;letter-spacing:.6px;\">Team</span>' +\n '<span style=\"flex:1\"></span>' +\n '<span id=\"world-team-count\" style=\"font-size:11px;font-weight:700;color:#5a6273;background:rgba(66,133,244,0.12);border-radius:8px;padding:2px 8px;\">0</span>';\n panelEl.appendChild(head);\n panelListEl = el('div', null, '');\n panelListEl.id = 'world-team-list';\n panelEl.appendChild(panelListEl);\n rootEl.appendChild(panelEl);\n panelCountEl = head.querySelector('#world-team-count');\n }\n\n // Re-render the team list (one row per agent). Diff-light: full innerHTML rebuild is cheap\n // for a panel of N rows and keeps the click wiring simple; only called on roster change.\n function teamPanel(list) {\n if (!panelListEl) return;\n list = list || [];\n if (panelCountEl) panelCountEl.textContent = String(list.length);\n if (!list.length) {\n panelListEl.innerHTML = '<div style=\"font-size:12px;color:#9aa3b2;padding:8px 2px;\">No agents yet</div>';\n return;\n }\n var html = '';\n for (var i = 0; i < list.length; i++) {\n var a = list[i] || {};\n var hue = colorForRow(a, i);\n var status = a.status || 'idle';\n var dot = statusColorOf(status);\n var word = statusWordOf(status);\n var pulse = isRunning(status) ? 'world-dot-pulse' : '';\n var role = a.role ? a.role : (a.department || a.workspace || '');\n html += '<button class=\"world-team-row\" data-id=\"' + esc(a.id) + '\" ' +\n 'style=\"display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:none;border-radius:9px;padding:7px 8px;cursor:pointer;color:#1f2430;\">' +\n '<span class=\"' + pulse + '\" style=\"width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:' + hue + ';box-shadow:0 0 8px ' + dot + ';\"></span>' +\n '<span style=\"flex:1;min-width:0;\">' +\n '<span style=\"display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">' + esc(a.name || a.id) + '</span>' +\n '<span style=\"display:block;font-size:11px;color:#7a818f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">' +\n esc(role) + (role ? ' \\\\u00B7 ' : '') +\n '<span style=\"color:' + dot + ';font-weight:700;\">' + esc(word) + '</span>' +\n '</span>' +\n '</span>' +\n '</button>';\n }\n panelListEl.innerHTML = html;\n var rows = panelListEl.querySelectorAll('.world-team-row');\n for (var r = 0; r < rows.length; r++) {\n rows[r].addEventListener('mouseenter', function () { this.style.background = 'rgba(66,133,244,0.10)'; });\n rows[r].addEventListener('mouseleave', function () { this.style.background = 'transparent'; });\n rows[r].addEventListener('click', function () { focusRow(this.getAttribute('data-id')); });\n }\n }\n\n // Clicking a team row spotlights that agent (if we can find its head position).\n function focusRow(id) {\n if (!id) return;\n var ents = lastEntries;\n if (!ents) return;\n for (var i = 0; i < ents.length; i++) {\n if (String(ents[i].id) === String(id)) {\n try {\n var head = ents[i].headWorldPos ? ents[i].headWorldPos() : null;\n if (head && world && typeof world.spotlightOn === 'function') world.spotlightOn(head);\n } catch (e) { /* spotlight optional */ }\n return;\n }\n }\n }\n\n // ---- Director chat bar (bottom-center) --------------------------------\n function buildChatBar() {\n var bar = el('div', 'glass', 'position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:min(680px,calc(100vw - 28px));border-radius:16px;padding:12px;z-index:24;color:#1f2430;');\n bar.id = 'world-chat-bar';\n var head = el('div', null, 'display:flex;align-items:center;gap:8px;margin-bottom:8px;');\n head.innerHTML =\n '<span style=\"width:9px;height:9px;border-radius:50%;background:#4285F4;box-shadow:0 0 8px #4285F4;\"></span>' +\n '<span style=\"font-weight:700;font-size:13px;\">Director</span>' +\n '<span style=\"font-size:11px;color:#7a818f;\">\\\\u00B7 direct the team; create agents or campaigns</span>';\n bar.appendChild(head);\n\n chatTranscript = el('div', null, 'max-height:170px;overflow-y:auto;display:none;flex-direction:column;gap:8px;margin-bottom:8px;padding-right:4px;');\n chatTranscript.id = 'world-chat-transcript';\n bar.appendChild(chatTranscript);\n\n var row = el('div', null, 'display:flex;gap:8px;');\n chatInput = el('input', null, 'flex:1;background:rgba(255,255,255,0.7);border:1px solid rgba(20,30,60,0.12);border-radius:10px;padding:10px 12px;color:#1f2430;font-size:14px;outline:none;');\n chatInput.type = 'text';\n chatInput.placeholder = 'Direct your agents\\\\u2026';\n chatSend = el('button', null, 'background:#4285F4;border:none;border-radius:10px;padding:0 18px;color:#fff;font-weight:700;cursor:pointer;font-size:14px;');\n chatSend.textContent = 'Send';\n row.appendChild(chatInput); row.appendChild(chatSend);\n bar.appendChild(row);\n rootEl.appendChild(bar);\n\n chatSend.addEventListener('click', function () { submitChat(); });\n chatInput.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); submitChat(); } });\n }\n\n function appendMsg(role, text) {\n if (!chatTranscript) return null;\n chatTranscript.style.display = 'flex';\n var wrap = el('div', null, '');\n var isUser = (role === 'user');\n wrap.style.cssText = 'max-width:88%;align-self:' + (isUser ? 'flex-end' : 'flex-start') + ';' +\n 'background:' + (isUser ? 'rgba(66,133,244,0.16)' : 'rgba(20,30,60,0.05)') + ';' +\n 'border:1px solid rgba(20,30,60,0.08);border-radius:12px;padding:8px 11px;font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word;color:#1f2430;';\n wrap.textContent = text;\n chatTranscript.appendChild(wrap);\n chatTranscript.scrollTop = chatTranscript.scrollHeight;\n return wrap;\n }\n\n var chatBusy = false;\n function submitChat() {\n if (chatBusy || !chatInput) return;\n var msg = (chatInput.value || '').trim();\n if (!msg) return;\n chatInput.value = '';\n chatBusy = true;\n appendMsg('user', msg);\n var thinking = appendMsg('assistant', '\\\\u2026');\n var handler = chatHandler;\n var done = function (reply) {\n if (thinking) thinking.textContent = (reply == null || reply === '') ? '(no response)' : String(reply);\n chatBusy = false;\n };\n var fail = function (e) {\n if (thinking) thinking.textContent = 'Error: ' + (e && e.message ? e.message : String(e));\n chatBusy = false;\n };\n try {\n var out = handler ? handler(msg) : Promise.resolve('');\n if (out && typeof out.then === 'function') out.then(done, fail);\n else done(out);\n } catch (e) { fail(e); }\n }\n\n // Register / override the chat submit handler. handler(text) is called on send and may\n // return a string or a Promise<string> (its resolved value is shown as the reply).\n function onChat(handler) {\n if (typeof handler === 'function') chatHandler = handler;\n return chatHandler;\n }\n\n // ---- Empty-state card --------------------------------------------------\n function buildEmptyState() {\n emptyEl = el('div', 'glass', 'position:fixed;top:48%;left:50%;transform:translate(-50%,-50%);max-width:360px;text-align:center;padding:22px 26px;border-radius:16px;z-index:16;color:#1f2430;display:none;pointer-events:none;');\n emptyEl.id = 'world-empty';\n emptyEl.innerHTML =\n '<div style=\"font-size:30px;margin-bottom:8px;\">\\\\uD83E\\\\uDD16</div>' +\n '<div style=\"font-weight:700;font-size:16px;margin-bottom:6px;\">No agents yet</div>' +\n '<div style=\"font-size:13px;line-height:1.5;color:#5a6472;\">Use the Director chat below to build your team. Each agent appears here and the room scales to fit them.</div>';\n rootEl.appendChild(emptyEl);\n }\n function emptyState(show) {\n if (emptyEl) emptyEl.style.display = show ? 'block' : 'none';\n }\n\n // ---- Toast (top-right, auto-dismiss ~5s) ------------------------------\n function toast(msg) {\n if (!toastRegion) return;\n var t = el('div', 'glass', 'pointer-events:auto;padding:11px 16px;border-radius:12px;font-size:14px;font-weight:600;color:#1f2430;' +\n 'background:rgba(255,255,255,0.96);border:1px solid rgba(52,168,83,0.45);' +\n 'box-shadow:0 12px 30px rgba(20,30,60,0.22);opacity:0;transform:translateX(12px);transition:opacity .3s, transform .3s;' +\n 'display:flex;align-items:center;gap:8px;max-width:320px;');\n t.innerHTML = '<span style=\"width:9px;height:9px;border-radius:50%;background:#34A853;box-shadow:0 0 8px #34A853;flex:0 0 auto;\"></span><span>' + esc(msg) + '</span>';\n toastRegion.appendChild(t);\n requestAnimationFrame(function () { t.style.opacity = '1'; t.style.transform = 'translateX(0)'; });\n setTimeout(function () {\n t.style.opacity = '0'; t.style.transform = 'translateX(12px)';\n setTimeout(function () { if (t.parentNode) t.parentNode.removeChild(t); }, 340);\n }, 5000);\n }\n\n // ---- Speech bubbles (projected from each avatar head every frame) -----\n var lastEntries = null;\n\n // Build one bubble DOM node (reused across frames; content updated in place).\n function makeBubbleNode() {\n var box = el('div', 'glass', 'position:absolute;left:0;top:0;z-index:18;pointer-events:none;' +\n 'min-width:160px;max-width:280px;padding:10px 12px;border-radius:13px;font-size:12px;line-height:1.4;' +\n 'color:#1f2430;background:rgba(255,255,255,0.96);border:1px solid rgba(20,30,60,0.12);' +\n 'box-shadow:0 10px 26px rgba(20,30,60,0.20);' +\n 'transform:translate(-50%,-100%);opacity:0;transition:opacity .2s;will-change:left,top;display:none;');\n // Header line (dot + name + role) and a body (status / preview) and a downward pointer.\n var headRow = el('div', 'b-head', 'display:flex;align-items:center;gap:7px;margin-bottom:3px;');\n headRow.innerHTML =\n '<span class=\"b-dot\" style=\"width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#4285F4;box-shadow:0 0 7px #4285F4;\"></span>' +\n '<span class=\"b-name\" style=\"font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px;\"></span>' +\n '<span class=\"b-role\" style=\"font-size:11px;color:#7a818f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px;\"></span>';\n var bodyRow = el('div', 'b-status', 'font-size:12px;color:#3a4150;margin-top:1px;');\n var prevRow = el('div', 'b-prev', 'font-size:11px;color:#5a6273;margin-top:4px;display:none;white-space:normal;word-break:break-word;');\n var ptr = el('div', 'b-ptr', 'position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:0;height:0;' +\n 'border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid rgba(255,255,255,0.96);');\n box.appendChild(headRow); box.appendChild(bodyRow); box.appendChild(prevRow); box.appendChild(ptr);\n box._dot = headRow.querySelector('.b-dot');\n box._name = headRow.querySelector('.b-name');\n box._role = headRow.querySelector('.b-role');\n box._body = bodyRow;\n box._prev = prevRow;\n box._lastKey = '';\n bubbleLayer.appendChild(box);\n return box;\n }\n\n // Update the textual content of a bubble (diffed via a composite key so we only touch the DOM\n // when something actually changed).\n function fillBubble(box, entry) {\n var hue = entry.colorHex || '#4285F4';\n var name = entry.agent && (entry.agent.name || entry.agent.id) || entry.id || 'agent';\n var role = (entry.role && lower(entry.role) === 'director') ? 'director' : (entry.role || (entry.agent && entry.agent.role) || '');\n var running = isRunning(entry.status);\n // BODY = the agent's latest live trace step (streams as the entry refreshes each poll);\n // falls back to a brief status/idle line when there's no parseable trace.\n var bodyLine = bodyLineOf(entry);\n // Is this body a DECORATIVE dad joke (vs a real trace/work line)? Jokes get a clearly\n // cosmetic look (muted + italic) so they never read as live agent work. talkLineOf()\n // already prefixes the joke with the smiley glyph (\\\\uD83D\\\\uDE04) instead of \\\\uD83D\\\\uDCAC.\n var jokeBody = isDecorativeJokeBody(entry);\n // Secondary line: while running, a faint \"working\" hint under the streaming step.\n var prev = (running && previewLine(entry)) ? '\\\\uD83D\\\\uDD27 working\\\\u2026' : '';\n var key = hue + '|' + name + '|' + role + '|' + bodyLine + '|' + prev + '|' + (jokeBody ? 'j' : '-');\n if (box._lastKey === key) return;\n box._lastKey = key;\n box._dot.style.background = hue;\n box._dot.style.boxShadow = '0 0 7px ' + hue;\n if (running) { if (box._dot.className.indexOf('world-dot-pulse') < 0) box._dot.className = 'b-dot world-dot-pulse'; }\n else { box._dot.className = 'b-dot'; }\n box._name.textContent = trunc(name, 22);\n box._role.textContent = role ? ('\\\\u00B7 ' + trunc(role, 18)) : '';\n box._body.textContent = bodyLine;\n // DECORATIVE vs REAL styling: a dad joke reads muted + italic (cosmetic chatter); a real\n // trace/status line keeps the solid #3a4150 upright style. Reset explicitly each pass so a\n // reused bubble node never carries the joke look over into a later real-work line.\n if (jokeBody) { box._body.style.color = '#9aa3b2'; box._body.style.fontStyle = 'italic'; }\n else { box._body.style.color = '#3a4150'; box._body.style.fontStyle = 'normal'; }\n if (prev) { box._prev.style.display = 'block'; box._prev.textContent = prev; }\n else { box._prev.style.display = 'none'; box._prev.textContent = ''; }\n }\n\n // Project each entry's head to screen px and position its bubble. Reuse DOM nodes keyed by id;\n // create on first sight, remove on diff. Hide bubbles behind the camera (z>1) or off-screen.\n function updateBubbles(entries) {\n if (!bubbleLayer || !world || !world.camera) return;\n entries = entries || [];\n lastEntries = entries;\n var cam = world.camera;\n var rect = bubbleLayer.getBoundingClientRect();\n var w = rect.width || window.innerWidth;\n var h = rect.height || window.innerHeight;\n var seen = {};\n\n for (var i = 0; i < entries.length; i++) {\n var entry = entries[i];\n if (!entry || entry.id == null) continue;\n var id = String(entry.id);\n seen[id] = true;\n var box = bubbleNodes[id];\n if (!box) { box = makeBubbleNode(); bubbleNodes[id] = box; }\n\n var head = null;\n try { head = entry.headWorldPos ? entry.headWorldPos() : null; } catch (e) { head = null; }\n if (!head) {\n var o = entry.object3D;\n if (o && o.position) head = new THREE.Vector3(o.position.x, 1.5, o.position.z);\n }\n if (!head) { box.style.display = 'none'; box.style.opacity = '0'; continue; }\n\n _proj.set(head.x, head.y, head.z).project(cam);\n if (_proj.z > 1 || _proj.z < -1) { box.style.display = 'none'; box.style.opacity = '0'; continue; }\n var x = (_proj.x * 0.5 + 0.5) * w;\n var y = (-_proj.y * 0.5 + 0.5) * h;\n // Off-screen (with a small margin) -> hide rather than pin to the edge.\n if (x < -160 || x > w + 160 || y < -120 || y > h + 120) { box.style.display = 'none'; box.style.opacity = '0'; continue; }\n\n fillBubble(box, entry);\n box.style.display = 'block';\n // Lift the bubble a hair above the head; deterministic per-id micro-offset avoids exact overlap\n // when two heads project to nearly the same pixel.\n var lift = 14 + hash01(idHashSeed(id)) * 4;\n box.style.left = Math.round(x) + 'px';\n box.style.top = Math.round(y - lift) + 'px';\n box.style.opacity = '1';\n }\n\n // Remove bubbles for entries that vanished.\n for (var key in bubbleNodes) {\n if (!seen[key]) {\n var dead = bubbleNodes[key];\n if (dead && dead.parentNode) dead.parentNode.removeChild(dead);\n delete bubbleNodes[key];\n }\n }\n }\n\n // Stable integer seed from an id string (deterministic; for cosmetic micro-offsets only).\n function idHashSeed(id) {\n var s = 0;\n for (var i = 0; i < id.length; i++) s = (s * 31 + id.charCodeAt(i)) % 100000;\n return s + 1;\n }\n\n return {\n mount: mount,\n updateBubbles: updateBubbles,\n updateChips: updateBubbles, // entry calls updateChips() each frame -> renders the name+status bubbles\n setActive: setActive,\n showInspect: showInspect,\n hideInspect: hideInspect,\n teamPanel: teamPanel,\n toast: toast,\n emptyState: emptyState,\n onChat: onChat\n };\n}\n`;\n}\n",[200],"1e3fd93c-5e36-11f1-a723-1607ee4eb77e","frontend_world_scene.ts","1b97d5d6-5da0-11f1-89d4-1607ee4eb77e",814,["D",1780372195351],5,"// Part 10a: the SCENE module for the /world Agent-World page. This is the render core.\n// getWorldSceneJS() returns ONE backtick template-literal that is a browser ES-module exporting\n// createWorld(canvas).\n//\n// FAITHFUL PORT of the-delegation (core/Engine.ts + core/Stage.ts + constants.ts) — their exact\n// flat-but-clean look, ported from WebGPU/TSL to three r0.160 WebGL:\n// - Renderer: EVERY render-affecting setting is now EXPLICIT + deterministic (no platform-\n// conditional behaviour), so the output is consistent on Mac and Windows:\n// THREE.ColorManagement.enabled = true (explicit), outputColorSpace = SRGBColorSpace\n// (explicit), toneMapping = NoToneMapping + exposure 1 (explicit), shadowMap.enabled = true\n// with a FIXED shadowMap.type = PCFSoftShadowMap, antialias on. dpr = Math.min(dpr,2) (same\n// clamped formula on both platforms, re-applied on devicePixelRatio changes). NO\n// setClearColor (clear comes from scene.background). Canvas sizing is identical on both\n// platforms: ResizeObserver on #world-canvas-wrap -> resize() -> setSize(w,h,true).\n// - Scene: background = 0xFAFCFB (SCENE_BACKGROUND_COLOR). NO fog. NO environment/IBL.\n// - Lights: exactly two — AmbientLight(0xffffff, Math.PI) and a STATIC DirectionalLight\n// (0xffffff, 0.5*Math.PI) at (10,20,10) with a fixed 20x20 shadow frustum\n// (near 0.1 / far 100 / +-10), mapSize 2048, bias -0.0001, radius 2. NO hemisphere fill,\n// NO rim, NO normalBias, NO dynamic shadow rescaling.\n// - Camera: PerspectiveCamera(45, aspect, 0.1, 500) at (10,8,15), target (0,0.8,0). This authored\n// position sits ~19.4 units from the target, which is precisely the framing that fully fits the\n// FIXED ~10x10 office floor in the fov-45 frustum.\n// - Controls: damping 0.05, no pan, polar Math.PI/4.5..Math.PI/2.4, target (0,0.8,0). Distance\n// band is a FIXED window centered on the authored ~19.4 framing distance (NOT the old 3..10,\n// which was tuned for the pre-fix procedurally-shrunk floor and would crop the fixed office).\n// - Postprocessing: NONE. render() = renderer.render(scene, camera) (try/catch shell kept).\n//\n// LAYERED ON TOP (AIHive features the other modules rely on, kept): the movable speaker spotlight\n// + light-ramp lerp (visualizes the active running agent) and a gentle camera follow-target lerp.\n//\n// FOOTGUNS (must hold): NO TS annotations inside the returned string; NO unescaped backticks and\n// NO unescaped ${...} inside it (plain string concat everywhere); emojis as \\\\uXXXX. Placement is\n// deterministic; only render-time ambient may use the browser PRNG (none used here).\n\nexport function getWorldSceneJS(): string {\n return `\nimport * as THREE from 'three';\n\n// Only addon we need is OrbitControls. Wrapped so a missing addon degrades gracefully.\nvar OrbitControls = null;\ntry { OrbitControls = (await import('three/addons/controls/OrbitControls.js')).OrbitControls; } catch (e) { OrbitControls = null; }\n\n// SCENE_BACKGROUND_COLOR from the-delegation constants.ts — off-white, RGB 250,252,251.\nvar BG = 0xFAFCFB;\n\n// clamp helper.\nfunction clamp(v, lo, hi) { return v < lo ? lo : (v > hi ? hi : v); }\n\nexport function createWorld(canvas) {\n // ---------------------------------------------------------------------------------------------\n // (1) RENDERER (the-delegation Engine.ts) — NoToneMapping, explicit SRGB, PCFSoft shadows, AA.\n //\n // MADE EXPLICIT to remove Mac/Windows divergence: previously several render-affecting settings\n // were left at three's defaults, which made the look depend on three's per-build/per-platform\n // defaults rather than on us. Every render-affecting setting below is now stated explicitly and\n // deterministically, with NO platform-conditional behaviour:\n // - THREE.ColorManagement.enabled = true (explicit) -> identical sRGB<->linear conversions on\n // every platform/build, instead of relying on the (build-default) ColorManagement state.\n // - renderer.outputColorSpace = THREE.SRGBColorSpace (explicit) -> was relying on the r0.160\n // default; now pinned so the output transfer function can never differ between platforms.\n // - renderer.toneMapping = THREE.NoToneMapping (explicit) + toneMappingExposure = 1 -> was\n // relying on the default; now pinned so no tone curve is ever applied.\n // - renderer.shadowMap.enabled = true + renderer.shadowMap.type = THREE.PCFSoftShadowMap\n // (explicit fixed type) -> identical shadow filtering on Mac (Metal/GL) and Windows\n // (ANGLE/D3D); never left to a default.\n // - dpr: setPixelRatio(Math.min(window.devicePixelRatio||1, 2)) — same clamped formula on both\n // platforms (also re-applied on dpr changes; see resize()/dpr watcher below).\n // - NO setClearColor -> clear comes from scene.background (deterministic off-white).\n // The-delegation lights/camera/background are kept verbatim (see below).\n // ---------------------------------------------------------------------------------------------\n // ColorManagement: pin ON explicitly so sRGB<->linear math is identical everywhere (not left to\n // whatever the loaded three build defaults to). Guarded for builds that lack it.\n try { if (THREE.ColorManagement) THREE.ColorManagement.enabled = true; } catch (e) {}\n\n var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });\n // dpr: same clamped formula on Mac and Windows. min(dpr,2) caps Retina/HiDPI for perf while\n // still giving HiDPI sharpness; re-applied whenever the device pixel ratio changes (see below).\n renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));\n // Output color space: pinned to sRGB explicitly (was relying on the r0.160 default).\n renderer.outputColorSpace = THREE.SRGBColorSpace;\n // Tone mapping: pinned OFF explicitly (the-delegation applies none) so no tone curve ever runs.\n renderer.toneMapping = THREE.NoToneMapping;\n renderer.toneMappingExposure = 1.0;\n // Shadows: enabled with a FIXED filter type (PCFSoftShadowMap) so dirLight.shadow.radius=2 is\n // honored and filtering matches across WebGL backends.\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n\n // ---------------------------------------------------------------------------------------------\n // SCENE (the-delegation Stage.ts + constants.ts) — off-white background, NO fog, NO IBL/env.\n // ---------------------------------------------------------------------------------------------\n var scene = new THREE.Scene();\n scene.background = new THREE.Color(BG);\n // scene.fog: NONE (deleted). scene.environment: NONE (deleted) — the-delegation sets no env map.\n\n // ---------------------------------------------------------------------------------------------\n // (2) LIGHTS (the-delegation Stage.ts setupLights) — exactly two, physically-correct *Math.PI.\n // AmbientLight(0xffffff, 1*PI) and one STATIC DirectionalLight(0xffffff, 0.5*PI) at (10,20,10).\n // NO hemisphere fill, NO rim, NO normalBias, NO dynamic frustum rescaling.\n // ---------------------------------------------------------------------------------------------\n var ambient = new THREE.AmbientLight(0xffffff, Math.PI); // ~3.14159\n scene.add(ambient);\n\n var key = new THREE.DirectionalLight(0xffffff, 0.5 * Math.PI); // ~1.5708\n key.position.set(10, 20, 10);\n key.castShadow = true;\n key.target.position.set(0, 0, 0);\n scene.add(key);\n scene.add(key.target);\n // Fixed 20x20 shadow frustum (never rescaled).\n key.shadow.camera.near = 0.1;\n key.shadow.camera.far = 100;\n key.shadow.camera.top = 10;\n key.shadow.camera.bottom = -10;\n key.shadow.camera.right = 10;\n key.shadow.camera.left = -10;\n key.shadow.mapSize.set(2048, 2048);\n key.shadow.bias = -0.0001;\n if ('radius' in key.shadow) key.shadow.radius = 2;\n key.shadow.camera.updateProjectionMatrix();\n key.target.updateMatrixWorld();\n\n // ---------------------------------------------------------------------------------------------\n // (4)/(7) CAMERA (the-delegation Stage.ts) — fov 45, position (10,8,15), target (0,0.8,0).\n // Initial aspect reads the CONTAINER (#world-canvas-wrap = canvas.parentElement), NOT the window:\n // the canvas now lives inside the bounded center stage, sized width/height:100% by CSS.\n // ---------------------------------------------------------------------------------------------\n var host0 = canvas.parentElement || canvas;\n var w0 = host0.clientWidth || canvas.clientWidth || 800;\n var h0 = host0.clientHeight || canvas.clientHeight || 600;\n if (w0 < 1) w0 = 800; if (h0 < 1) h0 = 600;\n var camera = new THREE.PerspectiveCamera(45, w0 / h0, 0.1, 500);\n camera.position.set(10, 8, 15);\n\n // the-delegation Stage: defaultTarget = Vector3(0, 0.8, 0); controls.target initialized to it.\n var defaultTarget = new THREE.Vector3(0, 0.8, 0);\n camera.lookAt(defaultTarget);\n\n // The office is now a FIXED ~10x10 natural-scale model (the office module returns a fixed\n // extentFor and no longer scales the floor procedurally). The-delegation authored the camera at\n // (10,8,15) — distance ~19.4 from target (0,0.8,0) — precisely so the whole fixed office frames\n // fully (its 14.1-unit floor diagonal fits the fov-45 frustum with a small margin). So the\n // OrbitControls distance window must be a FIXED band centered on that authored framing distance,\n // NOT the old tiny 3..10 window (which was tuned for the pre-fix procedurally-shrunk floor and\n // would clamp the authored camera IN to distance 10, cropping the office). We keep the polar\n // limits verbatim and keep a bounded zoom band, just sized to the fixed office.\n var BASE_DIST = camera.position.distanceTo(defaultTarget); // ~19.41, the authored framing\n var MIN_DIST = Math.max(6, BASE_DIST - 8); // ~11.4 — can dolly a bit closer\n var MAX_DIST = BASE_DIST + 6; // ~25.4 — and a bit further out\n\n var controls = null;\n if (OrbitControls) {\n controls = new OrbitControls(camera, renderer.domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.rotateSpeed = 0.8;\n controls.enablePan = false;\n controls.enableRotate = true;\n controls.enableZoom = true;\n controls.minPolarAngle = Math.PI / 4.5;\n controls.maxPolarAngle = Math.PI / 2.4;\n // Fixed distance band that frames the fixed office; the authored distance sits inside it, so\n // controls.update() leaves the (10,8,15) framing intact instead of dollying it in to 10.\n controls.minDistance = MIN_DIST;\n controls.maxDistance = MAX_DIST;\n controls.target.copy(defaultTarget);\n controls.update();\n }\n\n // ---------------------------------------------------------------------------------------------\n // (9) SPEAKER SPOTLIGHT — AIHive feature layered ON TOP of the faithful base. Starts off\n // (intensity 0). Visualizes the active running agent (the-delegation pins camera-follow instead).\n // ---------------------------------------------------------------------------------------------\n var spot = new THREE.SpotLight(0xffffff, 0, 14, Math.PI / 7, 0.5, 1.2);\n spot.castShadow = false;\n spot.position.set(0, 9, 1.5);\n scene.add(spot);\n scene.add(spot.target);\n spot.target.position.set(0, 0.8, 0);\n\n // Stored ramp targets — render() lerps the live values toward these for smoothness.\n var lightTargets = { spot: 0.0 };\n var SPOT_ON = 6.0;\n\n // ---------------------------------------------------------------------------------------------\n // CONTENT GROUP — ALL world content (floor, desks, avatars, rings) attaches here so a single\n // transform owns the whole scene.\n // ---------------------------------------------------------------------------------------------\n var group = new THREE.Group();\n scene.add(group);\n\n var clock = new THREE.Clock();\n\n // ---------------------------------------------------------------------------------------------\n // POSTPROCESSING — NONE. render() draws straight through. (try/catch shell kept for shape.)\n // ---------------------------------------------------------------------------------------------\n // No composer / SSAO / bloom / FXAA. There is no env map, so the office/agents modules'\n // envMapIntensity assignments are harmless no-ops (nothing to sample).\n try { window.__worldSSAO = false; } catch (e) {}\n\n // ---------------------------------------------------------------------------------------------\n // setExtent(E) — GROW-ONLY framing guard for the fixed office. The office is a FIXED ~10x10\n // natural-scale model: the office module returns a fixed extentFor and never scales the floor, so\n // the-delegation's authored camera (10,8,15)->(0,0.8,0) already frames the whole room, and we MUST\n // NOT dolly the camera in/away from that authored framing for a normal roster. So for any E within\n // the fixed office (E <= FIXED_EXTENT) this stays a NO-OP: the camera, target, OrbitControls band\n // and shadow frustum are left exactly as authored.\n //\n // The ONE thing this now guards: a larger agent count. The office places overflow agents on rings\n // clamped INSIDE the office footprint, so the fixed framing still covers them — but if a caller\n // ever reports an extent LARGER than the fixed office (E > FIXED_EXTENT: a bigger roster ring, or a\n // future larger office), we GENTLY widen so nothing is cropped — and ONLY widen, never tighten:\n // - raise controls.maxDistance so the user can dolly out far enough to see the whole spread,\n // - grow the directional-light shadow frustum so shadows still cover the wider area.\n // We never touch minDistance, never move the camera/target, and never shrink anything — the\n // authored fixed-office framing is always preserved as the floor. Idempotent + monotonic.\n //\n // Kept in the public API (office.buildDesks + agents.sync call it); clamped to a sane [3,16] band.\n // ---------------------------------------------------------------------------------------------\n var FIXED_EXTENT = 7.2; // half-extent the authored fixed-office framing already covers\n var curExtent = -1;\n var grownExtent = FIXED_EXTENT; // largest extent we have grown framing to (monotonic, never shrinks)\n function setExtent(E) {\n E = (typeof E === 'number' && isFinite(E)) ? E : 3;\n E = clamp(E, 3, 16);\n if (E === curExtent) return;\n curExtent = E;\n // Within the fixed office: NO-OP. The authored framing already covers it; leave everything as is.\n if (E <= FIXED_EXTENT) return;\n // Larger than the fixed office and larger than anything we've grown to before: widen (grow-only).\n if (E <= grownExtent) return;\n grownExtent = E;\n // (a) Let the user dolly out far enough to fit the wider spread (never reduce the band).\n if (controls) {\n // Distance that fits a half-extent E in a fov-45 frustum, with the same margin the authored\n // framing uses (~BASE_DIST for FIXED_EXTENT). Scale the authored distance by E/FIXED_EXTENT.\n var fitDist = BASE_DIST * (E / FIXED_EXTENT);\n if (fitDist > controls.maxDistance) controls.maxDistance = fitDist;\n }\n // (b) Grow the shadow frustum so shadows still cover the wider area (only ever enlarge it).\n var half = Math.max(10, E + 3); // a little margin past the spread; authored frustum is +-10\n if (half > key.shadow.camera.right) {\n key.shadow.camera.top = half;\n key.shadow.camera.bottom = -half;\n key.shadow.camera.right = half;\n key.shadow.camera.left = -half;\n key.shadow.camera.updateProjectionMatrix();\n }\n }\n\n // ---------------------------------------------------------------------------------------------\n // (9) spotlightOn(vec3OrNull) — store the ramp target; the actual lerp happens in render().\n // vec3 -> aim spot at that head, ramp spot ~6.0, follow camera target toward the speaker.\n // null -> ramp spot to 0, return camera target toward defaultTarget.\n // ---------------------------------------------------------------------------------------------\n var spotTargetPos = new THREE.Vector3(0, 0.8, 0);\n var spotHasTarget = false;\n function spotlightOn(vec3OrNull) {\n if (vec3OrNull && typeof vec3OrNull.x === 'number') {\n spotHasTarget = true;\n spotTargetPos.set(vec3OrNull.x, vec3OrNull.y, vec3OrNull.z);\n lightTargets.spot = SPOT_ON;\n } else {\n spotHasTarget = false;\n lightTargets.spot = 0.0;\n }\n }\n\n // ---------------------------------------------------------------------------------------------\n // render() — controls + spotlight lerp + gentle camera follow-target lerp, then a direct\n // renderer.render (the-delegation has no composer). try/catch shell kept. The ENTRY owns rAF.\n // ---------------------------------------------------------------------------------------------\n var _tmpVec = new THREE.Vector3();\n var _followTarget = new THREE.Vector3().copy(defaultTarget);\n function render() {\n // Smooth spotlight-intensity ramp (frame-rate-tolerant lerp factor).\n spot.intensity += (lightTargets.spot - spot.intensity) * 0.08;\n\n // (the-delegation Stage.update) gentle camera follow-target lerp at 0.06, Y pinned to 0.8.\n if (spotHasTarget) {\n _followTarget.set(spotTargetPos.x, 0.8, spotTargetPos.z);\n } else {\n _followTarget.copy(defaultTarget);\n }\n if (controls) {\n controls.target.lerp(_followTarget, 0.06);\n controls.update();\n } else {\n camera.lookAt(_followTarget);\n }\n\n // Move the spotlight smoothly toward the active speaker's head.\n if (spotHasTarget) {\n spot.target.position.lerp(spotTargetPos, 0.1);\n _tmpVec.set(spotTargetPos.x, spotTargetPos.y + 5, spotTargetPos.z + 1.5);\n spot.position.lerp(_tmpVec, 0.08);\n }\n spot.target.updateMatrixWorld();\n\n try { renderer.render(scene, camera); }\n catch (e) { /* nothing else to fall back to */ }\n }\n\n // ---------------------------------------------------------------------------------------------\n // resize() — CONTAINER-sized (the bounded center stage), NOT window. host = the canvas's parent\n // (#world-canvas-wrap), which is width/height:100% of the flexed middle of #world-stage. Falls\n // back to the canvas's own client box, then to a sane 800x600 default if the box is still 0\n // (first paint before layout).\n //\n // MADE EXPLICIT to remove Mac/Windows divergence: the sizing path is now IDENTICAL on both\n // platforms. It (a) re-applies the SAME clamped pixel ratio (min(dpr,2)) every resize so a\n // device-pixel-ratio change (HiDPI <-> standard, browser zoom, dragging a window between Retina\n // and non-Retina displays) is always picked up, and (b) calls setSize(w, h, true) so three sets\n // BOTH the backing store AND the canvas CSS box deterministically (updateStyle=true), instead of\n // trusting platform/browser CSS to own the box. The result is the same backing-store resolution\n // for the same container size on Mac and Windows.\n // ---------------------------------------------------------------------------------------------\n var lastDpr = -1;\n function applyPixelRatio() {\n // Same clamped formula on every platform; only touch the renderer when dpr actually changed.\n var dpr = Math.min(window.devicePixelRatio || 1, 2);\n if (dpr !== lastDpr) {\n lastDpr = dpr;\n renderer.setPixelRatio(dpr);\n }\n }\n function resize() {\n applyPixelRatio();\n var host = canvas.parentElement || canvas;\n var w = host.clientWidth || canvas.clientWidth || 800;\n var h = host.clientHeight || canvas.clientHeight || 600;\n if (w < 1) w = 1; if (h < 1) h = 1;\n camera.aspect = w / h;\n camera.updateProjectionMatrix();\n // updateStyle=true: three sizes BOTH the backing store and the canvas CSS box deterministically,\n // identical on Mac and Windows (no reliance on platform CSS to own the displayed box).\n renderer.setSize(w, h, true);\n }\n\n // OBSERVE the container (not just the window): a ResizeObserver on #world-canvas-wrap reflows the\n // scene when the grid/flex layout changes the stage (panel collapse, responsive breakpoints,\n // window resize). Keep window 'resize' too as a belt-and-braces fallback. The SAME resize() runs\n // on both platforms from every trigger.\n try {\n if (typeof ResizeObserver !== 'undefined') {\n var ro = new ResizeObserver(function () { resize(); });\n ro.observe(canvas.parentElement || canvas);\n }\n } catch (e) {}\n try { window.addEventListener('resize', resize); } catch (e) {}\n\n // Re-apply pixel ratio on devicePixelRatio CHANGES specifically (browser zoom, or moving the\n // window between a HiDPI/Retina and a standard display). A resize event does not always fire for\n // a pure dpr change, so we watch it via matchMedia and re-arm the listener each time it flips.\n // Identical behaviour on Mac and Windows; degrades to the resize-driven applyPixelRatio() above\n // if matchMedia is unavailable.\n function watchDpr() {\n try {\n if (typeof window.matchMedia !== 'function') return;\n var mq = window.matchMedia('(resolution: ' + (window.devicePixelRatio || 1) + 'dppx)');\n var onChange = function () { resize(); watchDpr(); };\n if (mq.addEventListener) { mq.addEventListener('change', onChange, { once: true }); }\n else if (mq.addListener) { mq.addListener(onChange); }\n } catch (e) {}\n }\n watchDpr();\n\n // Construction order done; do the initial sizing pass and the base extent. A rAF-deferred second\n // pass guards against the wrap being 0x0 on the very first paint (before grid layout settles).\n setExtent(3);\n resize();\n try { requestAnimationFrame(resize); } catch (e) {}\n\n // ---------------------------------------------------------------------------------------------\n // The world object every other module consumes (exact API: scene, camera, renderer, controls,\n // group, clock, render, resize, setExtent, spotlightOn). 'key'/'spot' kept for compatibility.\n // ---------------------------------------------------------------------------------------------\n return {\n scene: scene,\n camera: camera,\n renderer: renderer,\n controls: controls,\n composer: null,\n group: group,\n clock: clock,\n key: key,\n spot: spot,\n render: render,\n resize: resize,\n setExtent: setExtent,\n spotlightOn: spotlightOn\n };\n}\n`;\n}\n",[208],"1fe74b4e-5e36-11f1-a8ca-1607ee4eb77e","frontend_world_office.ts","1c4ad992-5da0-11f1-aa43-1607ee4eb77e",815,["D",1780372198155],4,"// Part 10b: the OFFICE module of the /world Agent World page. Served at /api/app-world-office and\n// imported by the entry (frontend_world.ts) via that ABSOLUTE URL. It owns the SINGLE SOURCE OF\n// TRUTH for where every agent sits (layout, sourced from the REAL office.glb POIs), how big the\n// world is (extentFor — now the FIXED office footprint, the office does NOT scale to agent count),\n// the meeting center (the boardroom/hub POI), a NO-OP buildDesks (the office already HAS its desks)\n// and the real GLB office (loadFloor — now loads the WHOLE office faithfully).\n//\n// This is a line-faithful port of the-delegation WorldManager.load + PoiManager.loadFromGlb to\n// three r0.160 WebGL: load office.glb (GLTFLoader + DRACOLoader), add the WHOLE gltf.scene to\n// world.group, traverse every mesh — SHOW every static-* piece (desk/chair/pc/plant/sofa/board/\n// counter/cafe-table/cabinet/laptop/flexo) + the static-floor + the colored-border (the blue\n// perimeter is IN the model), HIDE the navMesh and every poi-* marker node, set castShadow/\n// receiveShadow, and replace each material with a fresh MeshStandardMaterial (color = the brand\n// blue for 'colored*' meshes, else the baked color; roughness 1, metalness 0.35) exactly like the\n// original's MeshStandardNodeMaterial treatment. After the traverse it EXTRACTS POIs like\n// PoiManager.loadFromGlb (world position + quaternion + arrivalState + label), and layout(count)\n// is sourced from those REAL POIs: sit_work first (AT the desks), then sit_idle, then spawn/area.\n//\n// FOOTGUNS: this returns ONE backtick template literal (a browser ES-module). Inside it there are NO\n// unescaped backticks and NO unescaped ${...}; every dynamic string is built by '+' concatenation.\n// NO TS annotations inside the returned string (plain JS only). Placement (layout) is sourced from\n// the deterministic baked POIs (never Math.random / Date). Emojis, if any, are \\\\uXXXX escapes.\n// Keep the file well under 80KB.\n\nexport function getWorldOfficeJS(): string {\n return `\nimport * as THREE from 'three';\nimport { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';\nimport { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';\n\n// ---- the-delegation public assets (MIT). The WHOLE office GLB + DRACO decoder. ----\nvar OFFICE_GLB = 'https://cdn.jsdelivr.net/gh/arturitu/the-delegation@16c97c43d1c32fae797ace4ed8058157e1126c96/public/models/office.glb';\nvar DRACO_DECODER = 'https://www.gstatic.com/draco/versioned/decoders/1.5.6/';\n\n// The brand blue used for the-delegation's 'colored-*' meshes (the blue perimeter border is baked\n// INTO the model as 'colored-border'). In the original this is the active AgentSet theme color; we\n// pin it to the unboring.net / DIRECTOR_COLOR blue so the border matches the UI legend + agent lead.\nvar THEME_COLOR = '#4285F4';\n\n// Fallback half-extent (world units) of the office footprint, used by extentFor() BEFORE the GLB\n// has loaded (so the camera frames sanely on the first paint). Once office.glb is in, extentFor\n// returns the REAL measured footprint half-extent. The office is ONE fixed room — it does NOT grow\n// with the roster, so this is a FIXED value, not a function of agent count.\nvar FOOTPRINT_FALLBACK = 6.0;\n\nexport function createOffice(world) {\n // ---- meetCenter: the HEAD-OF-TABLE anchor where the agents module seats the Director. Derived\n // from the boardroom POI (else hub, else first area) once the office loads: the POI marks the table\n // CENTER, and meetCenter is pushed back along the POI's forward axis to the table END (the head\n // seat), with meetFacing the yaw to look down the table. Until the office loads, the origin. ----\n var meetCenter = new THREE.Vector3(0, 0, 0);\n // ---- meetFacing: the yaw (radians, atan2(dx,dz) convention) the Director faces at the head of the\n // table — toward the table center / the rest of the seats. 0 until the office loads. ----\n var meetFacing = 0;\n\n // The measured office footprint half-extent (set when office.glb loads). Until then, the fallback.\n var footprint = FOOTPRINT_FALLBACK;\n\n // The navMesh node's world-space geometry, captured from office.glb so the agents can pathfind on\n // it (three-pathfinding). We clone the node's BufferGeometry and BAKE its world matrix into the\n // positions so it is in WORLD coords (matching the world-space POI positions). null until the GLB\n // loads (or if the office has no navMesh node). The mesh itself stays visually hidden.\n var navMeshGeometry = null;\n\n // Module-scoped count mirror. The entry / agents module may set world.__officeCount; we keep our\n // own mirror so any caller that reads it gets a sane value. (Nothing here SIZES to it anymore —\n // the office is fixed — but the property is part of the cross-module contract, so we honour it.)\n var currentCount = 1;\n function rememberCount(n) {\n n = Math.max(1, Math.floor(n || 1));\n currentCount = n;\n try { world.__officeCount = n; } catch (e) {}\n return n;\n }\n function readCount() {\n var n = currentCount;\n try {\n if (world && typeof world.__officeCount === 'number' && world.__officeCount > 0) {\n n = world.__officeCount;\n }\n } catch (e) {}\n return Math.max(1, Math.floor(n || 1));\n }\n\n // ---- extentFor: the office FOOTPRINT half-extent. FIXED — the office does NOT scale to the agent\n // count (each project is one fixed office). We ignore 'count' and return the measured footprint\n // (or the fallback before the GLB loads). Kept as a function (scene + agents call it) so the\n // camera/controls frame the room. Clamped to a sane [3, 16] band like before. ----\n function extentFor(count) {\n var E = footprint;\n if (!(typeof E === 'number' && isFinite(E))) E = FOOTPRINT_FALLBACK;\n if (E < 3) E = 3;\n if (E > 16) E = 16;\n return E;\n }\n\n // ---- POIs: extracted from office.glb exactly like the-delegation PoiManager.loadFromGlb. Each is\n // { id, position:Vector3, quaternion:Quaternion, arrivalState, label, type, kind }.\n // regex ^poi-([a-z0-9_]+)-(.+)$ -> type = group1, uniqueId = group2 (greedy).\n // arrivalState defaults 'idle'; if type is neither 'spawn' nor 'area', arrivalState = type\n // (so 'sit_work', 'sit_idle' become the arrival state; 'idle' stays 'idle').\n // label: only 'sit_idle' gets 'Sit down'.\n // id = type + '-' + uniqueId (the node name minus the 'poi-' prefix).\n // 'kind' is OUR classification for layout ordering, derived from the full id so it survives the\n // greedy regex (e.g. 'poi-idle-spawn-1' -> type 'idle', id 'idle-spawn-1', kind 'spawn'):\n // kind 'sit_work' | 'sit_idle' | 'spawn' | 'area' | 'other'. ----\n var pois = [];\n\n function classifyKind(id, arrivalState) {\n var s = String(id).toLowerCase();\n if (arrivalState === 'sit_work' || s.indexOf('sit_work') !== -1) return 'sit_work';\n if (arrivalState === 'sit_idle' || s.indexOf('sit_idle') !== -1) return 'sit_idle';\n if (s.indexOf('spawn') !== -1) return 'spawn';\n if (s.indexOf('area') !== -1) return 'area';\n return 'other';\n }\n\n function loadPoisFromGlb(root) {\n pois = [];\n root.traverse(function (child) {\n var m = String(child.name || '').match(/^poi-([a-z0-9_]+)-(.+)$/);\n if (!m) return;\n var type = m[1];\n var uniqueId = m[2];\n var arrivalState = 'idle';\n var label;\n if (type !== 'spawn' && type !== 'area') {\n arrivalState = type;\n if (arrivalState === 'sit_idle') label = 'Sit down';\n }\n var id = type + '-' + uniqueId;\n var worldPos = new THREE.Vector3();\n var worldQuat = new THREE.Quaternion();\n child.getWorldPosition(worldPos);\n child.getWorldQuaternion(worldQuat);\n pois.push({\n id: id,\n position: worldPos,\n quaternion: worldQuat,\n arrivalState: arrivalState,\n label: label,\n type: type,\n kind: classifyKind(id, arrivalState)\n });\n });\n // Deterministic order WITHIN each kind: sort by id so re-syncs / parallel readers agree on which\n // seat goes to which roster index (the GLB traversal order is stable, but id-sort is belt-and-\n // braces and makes 'sit_work-1' come before 'sit_work-2', etc.).\n pois.sort(function (a, b) { return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0); });\n // Update meetCenter to a HEAD-OF-TABLE anchor for the Director. We first find the meeting POI\n // (boardroom POI, else hub, else first area, else origin) — that POI sits at the table CENTER.\n // The Director should NOT stand on the table center; it should sit at the END of the table (the\n // head seat) and look DOWN the table toward the other seats. So we push the center back along the\n // POI's authored forward axis by a table half-length, and store the matching facing yaw. The\n // agents module reads office.meetCenter (and office.meetFacing) to seat the Director there.\n var hub = null, board = null, anyArea = null;\n for (var i = 0; i < pois.length; i++) {\n var p = pois[i];\n var lid = p.id.toLowerCase();\n if (lid.indexOf('boardroom') !== -1) board = p;\n else if (lid.indexOf('hub') !== -1) hub = p;\n if (p.kind === 'area' && !anyArea) anyArea = p;\n }\n var center = board || hub || anyArea;\n if (center) {\n // Forward axis the POI was authored facing (unit, on the XZ plane).\n _fwd.set(0, 0, 1).applyQuaternion(center.quaternion);\n var fx = _fwd.x, fz = _fwd.z;\n var fl = Math.sqrt(fx * fx + fz * fz);\n if (fl > 1e-4) { fx /= fl; fz /= fl; } else { fx = 0; fz = 1; }\n // Head-of-table offset: a sensible table half-length so the Director sits at the table end, not\n // its middle. Clamped to the office footprint so it can never push the anchor outside the room.\n var headOffset = Math.min(2.4, Math.max(1.2, footprint * 0.4));\n meetCenter.set(\n center.position.x - fx * headOffset,\n center.position.y,\n center.position.z - fz * headOffset\n );\n // Face from the head seat back toward the table center (down the table), i.e. +forward.\n meetFacing = Math.atan2(fx, fz);\n } else {\n meetCenter.set(0, 0, 0);\n meetFacing = 0;\n }\n }\n\n // POIs grouped by kind, in the fill order layout() wants: sit_work first (these are AT the real\n // desks), then sit_idle, then spawn, then area, then anything else. Returns a flat ordered array.\n function orderedPois() {\n var order = ['sit_work', 'sit_idle', 'spawn', 'area', 'other'];\n var out = [];\n for (var k = 0; k < order.length; k++) {\n for (var i = 0; i < pois.length; i++) {\n if (pois[i].kind === order[k]) out.push(pois[i]);\n }\n }\n return out;\n }\n\n // Convert a POI quaternion to the avatar facing yaw. The avatar (object3D.rotation.y) faces +Z by\n // default; the agents module uses Math.atan2(dx, dz) for facing, so we extract the same convention:\n // forward = (0,0,1) applied by the quaternion, yaw = atan2(forward.x, forward.z). This makes the\n // seated avatar face the way the POI was authored (toward its desk).\n var _fwd = new THREE.Vector3();\n function yawFromQuat(q) {\n _fwd.set(0, 0, 1).applyQuaternion(q);\n return Math.atan2(_fwd.x, _fwd.z);\n }\n\n // ---- layout(count): the single source of truth for agent placement, SOURCED FROM THE REAL POIs.\n // Returns Array(count) of { x, z, angle, deskX, deskZ, deskAngle }. Fill order: sit_work POIs\n // first (these sit AT the real desks, so deskX/deskZ = the POI itself), then sit_idle, then\n // spawn/area for overflow. angle comes from the POI quaternion (so the avatar faces its desk).\n //\n // OVERFLOW (MAX_AGENTS can rise above the real POI count): the surplus reuse POIs round-robin, but\n // they must NOT stack on the exact same world point. Each POI can host several occupants; the FIRST\n // occupant sits exactly on the POI (its desk), and every later occupant is fanned onto a scaled\n // ring around that POI so no two avatars overlap, however large the roster grows. The ring radius\n // grows with how many occupants share a POI (so a crowded reuse spreads to a wider ring), and the\n // angular slot is deterministic by occupant index. The desk target stays the POI itself for the\n // first occupant; overflow occupants get their own ring point as their desk so movement is stable.\n // If the office has not loaded yet (no POIs), we fall back to a small deterministic origin ring so\n // the first paint is not empty. ----\n function layout(count) {\n var n = Math.max(0, Math.floor(count || 0));\n var seats = [];\n if (n <= 0) return seats;\n\n var src = orderedPois();\n if (src.length === 0) {\n // No POIs yet (GLB not loaded): deterministic fallback ring near the origin so placement is\n // never random. Replaced the moment loadFloor() resolves and sync() re-runs.\n for (var f = 0; f < n; f++) {\n var ang = (f / n) * Math.PI * 2;\n var rr = (f === 0) ? 0 : 2.2;\n var fxx = Math.sin(ang), fzz = Math.cos(ang);\n var sxx = (f === 0) ? 0 : Math.sin(ang) * rr;\n var szz = (f === 0) ? 0 : Math.cos(ang) * rr;\n seats.push({ x: sxx, z: szz, angle: ang, deskX: sxx + fxx * 0.6, deskZ: szz + fzz * 0.6, deskAngle: ang });\n }\n return seats;\n }\n\n // How many occupants each POI will end up hosting: ceil(n / src.length) for the first\n // (n mod src.length) POIs, floor for the rest. We only need a per-POI running occupant counter to\n // pick each agent's ring slot + radius, so track it as we fill.\n var seatsPerPoi = Math.ceil(n / src.length); // upper bound of co-occupants on any POI\n var occCount = []; // running occupant index per POI\n for (var z = 0; z < src.length; z++) occCount[z] = 0;\n // Minimum spacing between adjacent avatars on a shared ring (avatar footprint ~0.7u). The ring\n // radius is chosen so the chord between adjacent slots is at least this, then clamped so the ring\n // can never escape the office footprint.\n var AVATAR_GAP = 0.95;\n var BASE_RING = 0.9; // radius of the first overflow ring\n\n for (var i = 0; i < n; i++) {\n var pIdx = i % src.length;\n var poi = src[pIdx];\n var px = poi.position.x;\n var pz = poi.position.z;\n var yaw = yawFromQuat(poi.quaternion);\n var occ = occCount[pIdx]++; // this agent's occupant index on its POI\n\n if (occ === 0) {\n // First occupant sits exactly AT the POI (its desk). The desk is the POI itself.\n seats.push({ x: px, z: pz, angle: yaw, deskX: px, deskZ: pz, deskAngle: yaw });\n continue;\n }\n\n // Overflow occupant: place it on a scaled ring around the POI so it never overlaps the seated\n // first occupant or its ring siblings. Distribute occupants 1..(seatsPerPoi-1) evenly around the\n // circle; widen the ring radius enough that adjacent slots are at least AVATAR_GAP apart, and\n // clamp so the ring stays inside the room (never pushes an avatar through a wall/out of frame).\n var ringSlots = Math.max(1, seatsPerPoi - 1); // slots available on the overflow ring(s)\n var slot = occ - 1; // 0-based slot on the ring\n var slotAng = (slot / ringSlots) * Math.PI * 2;\n // Radius so the chord between adjacent slots >= AVATAR_GAP: chord = 2*r*sin(pi/ringSlots).\n var sinHalf = Math.sin(Math.PI / Math.max(2, ringSlots));\n var needR = (sinHalf > 1e-4) ? (AVATAR_GAP / (2 * sinHalf)) : BASE_RING;\n var ringR = Math.max(BASE_RING, needR);\n // Keep the ring inside the office: cap the radius so px/pz +- ringR stays within the footprint.\n var room = footprint - 0.6;\n if (room < BASE_RING) room = BASE_RING;\n var maxR = room - Math.max(Math.abs(px), Math.abs(pz));\n if (maxR < BASE_RING) maxR = BASE_RING; // never collapse below the base ring\n if (ringR > maxR) ringR = maxR;\n var ox = Math.cos(slotAng) * ringR;\n var oz = Math.sin(slotAng) * ringR;\n var sx = px + ox;\n var sz = pz + oz;\n // Face back toward the POI center (so a fanned-out overflow avatar still orients to its cluster).\n var faceYaw = Math.atan2(-ox, -oz);\n seats.push({ x: sx, z: sz, angle: faceYaw, deskX: sx, deskZ: sz, deskAngle: faceYaw });\n }\n return seats;\n }\n\n // ---- buildDesks(count): NO-OP. The office already HAS its desks (they are real GLB meshes loaded\n // by loadFloor). We no longer build any BoxGeometry desk/chair/monitor instances or a procedural\n // perimeter (the blue border is the model's 'colored-border'). We keep the function (agents.sync\n // calls it) and keep it honouring the count mirror + the setExtent contract so the camera frames\n // the fixed room. ----\n function buildDesks(count) {\n var n = rememberCount(count);\n if (world && typeof world.setExtent === 'function') {\n try { world.setExtent(extentFor(n)); } catch (e) {}\n }\n }\n\n // ---- Material treatment, line-faithful to the-delegation WorldManager.load(): for every mesh\n // (NOT navmesh, NOT a poi marker), enable shadows and REPLACE the material with a fresh\n // MeshStandardMaterial — color = THEME_COLOR for 'colored*' meshes, else the baked color; keep the\n // baked map; roughness 1, metalness 0.35. (The original uses MeshStandardNodeMaterial for WebGPU\n // shadow compatibility; on three r0.160 WebGL the plain MeshStandardMaterial is the equivalent.) ----\n function treatMesh(mesh) {\n var name = String(mesh.name || '').toLowerCase();\n var isColored = name.indexOf('colored') === 0;\n var oldMat = mesh.material;\n if (Array.isArray(oldMat)) oldMat = oldMat[0];\n var baseColor = (oldMat && oldMat.color) ? oldMat.color.clone() : new THREE.Color(0xcccccc);\n var baseMap = (oldMat && oldMat.map) ? oldMat.map : null;\n var col = isColored ? new THREE.Color(THEME_COLOR) : baseColor;\n var mat = new THREE.MeshStandardMaterial({\n color: col,\n map: baseMap,\n roughness: 1.0,\n metalness: 0.35\n });\n if ('envMapIntensity' in mat) mat.envMapIntensity = 0.4;\n mesh.material = mat;\n mesh.castShadow = true;\n mesh.receiveShadow = true;\n }\n\n // Add the WHOLE office to world.group and traverse it like WorldManager.load: hide the navMesh,\n // hide every poi-* marker node (markers, not furniture), treat every other mesh. Returns nothing;\n // mutates the scene graph in place.\n function installOffice(root) {\n // 1) Hide every poi-* marker node (and its subtree). They are empty/marker objects; we never\n // render them. (PoiManager already read their transforms before this.)\n root.traverse(function (o) {\n var nm = String(o.name || '').toLowerCase();\n if (nm.indexOf('poi-') === 0) o.visible = false;\n });\n // 2) Per-mesh: navMesh -> hidden; everything else -> shadows + material treatment.\n root.traverse(function (o) {\n if (!o.isMesh) return;\n var nm = String(o.name || '').toLowerCase();\n var pnm = (o.parent && o.parent.name) ? String(o.parent.name).toLowerCase() : '';\n // If this mesh lives under a hidden poi-* marker, leave it hidden and skip treatment.\n if (nm.indexOf('poi-') === 0 || pnm.indexOf('poi-') === 0) { o.visible = false; return; }\n if (nm.indexOf('navmesh') !== -1) {\n // The navMesh is invisible collision/walkable geometry. KEEP a world-space clone of its\n // BufferGeometry so the agents can pathfind on it (three-pathfinding consumes a geometry in\n // world coords). Clone, then bake the node's world matrix into the positions so the polygons\n // line up with the world-space POI positions. Take the FIRST navMesh found. The mesh stays\n // hidden (we never render it).\n try {\n if (!navMeshGeometry && o.geometry && typeof o.geometry.clone === 'function') {\n o.updateWorldMatrix(true, false);\n var g = o.geometry.clone();\n g.applyMatrix4(o.matrixWorld);\n navMeshGeometry = g;\n }\n } catch (e) {}\n o.visible = false;\n return;\n }\n treatMesh(o);\n });\n // 3) Measure the office footprint half-extent from the visible scene bbox (X/Z), so extentFor()\n // frames the real room. Fixed thereafter — the office does not scale to the roster.\n try {\n var box = new THREE.Box3().setFromObject(root);\n var maxAbs = Math.max(\n Math.abs(box.min.x), Math.abs(box.max.x),\n Math.abs(box.min.z), Math.abs(box.max.z)\n );\n if (isFinite(maxAbs) && maxAbs > 0.5) footprint = maxAbs;\n } catch (e) {}\n }\n\n // Fallback floor: a plain disc + a thin blue border ring, used ONLY if office.glb fails to load,\n // so the scene is never empty. (No furniture — the real furniture lives in the GLB.)\n function buildFallbackOffice() {\n var E = FOOTPRINT_FALLBACK;\n var r = Math.max(6, E + 1.5);\n var disc = new THREE.Mesh(\n new THREE.CircleGeometry(r, 64),\n new THREE.MeshStandardMaterial({ color: new THREE.Color('#c4cedd'), roughness: 1.0, metalness: 0.35 })\n );\n disc.rotation.x = -Math.PI / 2;\n disc.position.y = 0;\n disc.receiveShadow = true;\n disc.castShadow = false;\n disc.frustumCulled = false;\n world.group.add(disc);\n var col = new THREE.Color(THEME_COLOR);\n var ring = new THREE.Mesh(\n new THREE.RingGeometry(r - 0.12, r, 96),\n new THREE.MeshStandardMaterial({\n color: col.clone(), emissive: col.clone(), emissiveIntensity: 0.8,\n roughness: 0.5, metalness: 0.0, transparent: true, opacity: 0.95\n })\n );\n ring.rotation.x = -Math.PI / 2;\n ring.position.y = 0.012;\n ring.receiveShadow = false;\n ring.castShadow = false;\n ring.frustumCulled = false;\n world.group.add(ring);\n }\n\n // ---- loadFloor(): async. Now loads the WHOLE office.glb, extracts its POIs, installs the whole\n // scene into world.group (faithful traverse), and measures the footprint. Tolerant of load\n // failure (falls back to a plain disc + border ring). Keeps the loadFloor() name + Promise\n // contract the entry awaits. ----\n function loadFloor() {\n return new Promise(function (resolve) {\n var draco = new DRACOLoader();\n draco.setDecoderPath(DRACO_DECODER);\n var loader = new GLTFLoader();\n loader.setDRACOLoader(draco);\n loader.load(\n OFFICE_GLB,\n function (gltf) {\n try {\n var root = gltf.scene || (gltf.scenes && gltf.scenes[0]);\n if (!root) { buildFallbackOffice(); resolve(); return; }\n // Bake world matrices so POI getWorldPosition/Quaternion + the bbox are correct.\n root.updateMatrixWorld(true);\n // Extract POIs FIRST (before we hide the markers), exactly like PoiManager.loadFromGlb.\n loadPoisFromGlb(root);\n // Faithfully install the whole office (hide navmesh + poi markers, treat every mesh).\n installOffice(root);\n // Add the WHOLE gltf.scene to world.group (one Group, nothing pruned) — verbatim, no\n // scale/position/rotation mutation (the office transform is identity in the GLB).\n world.group.add(root);\n resolve();\n } catch (e) {\n buildFallbackOffice();\n resolve();\n }\n },\n undefined,\n function () {\n // Load error -> never leave the scene empty.\n buildFallbackOffice();\n resolve();\n }\n );\n });\n }\n\n // ---- getNavMeshGeometry(): the navMesh node's world-space BufferGeometry (a clone with the node's\n // world matrix baked in, so it is in WORLD coords). Returns null if office.glb has not loaded yet\n // or has no navMesh node. The agents module feeds this to three-pathfinding so avatars walk on the\n // walkable surface instead of clipping through walls. The navMesh itself stays visually hidden. ----\n function getNavMeshGeometry() {\n return navMeshGeometry;\n }\n\n // ---- getPois(): the REAL extracted POIs (ordered like layout: sit_work, sit_idle, spawn, area,\n // other), each as { id, position:Vector3(clone), quaternion:Quaternion(clone), arrivalState, label,\n // type, kind }. The agents module reads these so it can path (three-pathfinding) to a sit_work desk\n // (on a running run), a sit_idle seat, or an idle/area POI, and sit AT the chair (snap to the POI's\n // exact world position + quaternion). Positions/quaternions are CLONED so callers can't mutate ours.\n // Empty array until office.glb loads. ----\n function getPois() {\n var src = orderedPois();\n var out = [];\n for (var i = 0; i < src.length; i++) {\n var p = src[i];\n out.push({\n id: p.id,\n position: p.position.clone(),\n quaternion: p.quaternion.clone(),\n arrivalState: p.arrivalState,\n label: p.label,\n type: p.type,\n kind: p.kind\n });\n }\n return out;\n }\n\n // ---- getMeetFacing(): the live head-of-table yaw (radians). meetFacing is a primitive that gets\n // reassigned when the office loads, so we expose it via a getter (a plain value would snapshot 0 at\n // createOffice time). The agents module rotates the Director by this when seating it at meetCenter. ----\n function getMeetFacing() { return meetFacing; }\n\n return {\n meetCenter: meetCenter,\n meetFacing: meetFacing,\n getMeetFacing: getMeetFacing,\n layout: layout,\n extentFor: extentFor,\n buildDesks: buildDesks,\n loadFloor: loadFloor,\n getNavMeshGeometry: getNavMeshGeometry,\n getPois: getPois\n };\n}\n`;\n}\n",[216],"1007af90-5e7f-11f1-b825-1607ee4eb77e","frontend_world_dash_view.ts","1007b03a-5e7f-11f1-b825-1607ee4eb77e",941,["D",1780403524788],"// frontend_world_dash_view.ts — SOURCE FRAGMENT of the /world dashboard browser module.\n// Exports DASH_VIEW: a plain string of browser-JS SOURCE (function declarations only — NO\n// top-level state). getWorldDashJS() in frontend_world_dash.ts concatenates this fragment\n// INSIDE the createDash closure, so every function here shares that one closure (the shared\n// var declarations + KAN_COLS live in the entry file). Contains: logs (buildLogs/applyLogFilter/\n// buildLogRow/phaseBadge*/renderLogs/appendLogs/capLogDom), kanban (buildKanban/buildTaskCard/\n// priorityCss/fmtDate/colorByName/renderKanban), project shell (buildProject), project render\n// (setPhase/chip/renderProject/renderRoster/renderUsageRows/trace*/renderTrace/renderTopbar),\n// and topbar/scenehead (buildTopbar/setAutoApprove/buildScenehead/setSceneState).\n// FOOTGUNS: keep the SAME escaping as the entry template (escaped backticks and \\${ stay\n// escaped); NO new unescaped backticks or ${...}. Keep under 80000 bytes.\nexport const DASH_VIEW = `\n // ---- TOP BAR ----------------------------------------------------------\n function buildTopbar() {\n if (!elTopbar) return;\n elTopbar.innerHTML = '';\n\n // Brand cluster + back link.\n var brand = el('div', null, 'display:flex;align-items:center;gap:9px;');\n var back = el('a', 'wd-btn', 'display:flex;align-items:center;gap:6px;text-decoration:none;color:' + TXT_MUTED + ';' +\n 'font-size:12px;font-weight:700;padding:5px 8px;border-radius:9px;');\n back.href = '/';\n back.innerHTML = ms('arrow_back', 18, TXT_MUTED) + '<span>App</span>';\n back.addEventListener('mouseenter', function () { back.style.background = 'rgba(20,30,60,0.05)'; });\n back.addEventListener('mouseleave', function () { back.style.background = 'transparent'; });\n var dot = el('span', null, 'width:11px;height:11px;border-radius:3px;background:' + DIRECTOR_COLOR + ';box-shadow:0 0 8px ' + DIRECTOR_COLOR + ';');\n var title = el('span', null, 'font-weight:900;font-size:15px;letter-spacing:-.2px;color:' + BRAND_DARK + ';');\n title.textContent = 'Agent World';\n brand.appendChild(back); brand.appendChild(dot); brand.appendChild(title);\n elTopbar.appendChild(brand);\n\n // Divider.\n elTopbar.appendChild(el('span', null, 'width:1px;height:24px;background:' + PANEL_BORDER + ';'));\n\n // Project name + team count.\n var pwrap = el('div', null, 'display:flex;align-items:center;gap:10px;min-width:0;');\n topProject = el('span', null, 'font-weight:700;font-size:13px;color:' + TXT_DARK + ';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;');\n topProject.textContent = 'No active project';\n topTeam = el('span', null, 'font-size:11px;font-weight:800;color:' + TXT_LABEL + ';background:' + USER_COLOR_LIGHT + ';border-radius:8px;padding:2px 8px;display:flex;align-items:center;gap:4px;');\n topTeam.innerHTML = ms('group', 14, DIRECTOR_COLOR) + '<span class=\"wd-mono\">0</span>';\n pwrap.appendChild(topProject); pwrap.appendChild(topTeam);\n elTopbar.appendChild(pwrap);\n\n // Spacer.\n elTopbar.appendChild(el('span', null, 'flex:1 1 auto;'));\n\n // Director identity pill — the RIGHT-column chat directs the team; this keeps the label present.\n var dirPill = el('span', null, 'display:flex;align-items:center;gap:5px;flex:0 0 auto;white-space:nowrap;' +\n 'font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:' + DIRECTOR_COLOR + ';' +\n 'background:' + USER_COLOR_LIGHT + ';border:1px solid ' + USER_COLOR_SOFT + ';border-radius:9px;padding:4px 10px;');\n dirPill.innerHTML = ms('account_tree', 14, DIRECTOR_COLOR) + '<span>Director</span>';\n dirPill.title = 'The Director orchestrates the team \\\\u2014 chat with it in the Project panel';\n elTopbar.appendChild(dirPill);\n\n // Model chip.\n topModel = el('span', null, 'font-size:11px;font-weight:700;color:' + TXT_MUTED + ';background:rgba(20,30,60,0.05);' +\n 'border-radius:8px;padding:3px 9px;display:flex;align-items:center;gap:5px;white-space:nowrap;');\n topModel.innerHTML = ms('memory', 14, TXT_MUTED) + '<span class=\"wd-mono\">model</span>';\n elTopbar.appendChild(topModel);\n\n // Auto-approve indicator.\n topAuto = el('span', null, 'font-size:11px;font-weight:800;letter-spacing:.4px;border-radius:8px;padding:3px 9px;' +\n 'display:flex;align-items:center;gap:5px;white-space:nowrap;');\n setAutoApprove(false);\n elTopbar.appendChild(topAuto);\n }\n\n function setAutoApprove(on) {\n if (!topAuto) return;\n if (on) {\n topAuto.style.color = EMERALD;\n topAuto.style.background = 'rgba(16,185,129,0.12)';\n topAuto.innerHTML = ms('bolt', 14, EMERALD) + '<span>AUTO</span>';\n } else {\n topAuto.style.color = TXT_MUTED;\n topAuto.style.background = 'rgba(20,30,60,0.05)';\n topAuto.innerHTML = ms('verified_user', 14, TXT_MUTED) + '<span>REVIEW</span>';\n }\n }\n\n // ---- SCENE HEADER (centered strip inside #world-stage) ----------------\n function buildScenehead() {\n if (!elScenehead) return;\n elScenehead.innerHTML = '';\n sceneTeamBadge = el('span', null, 'font-size:11px;font-weight:800;letter-spacing:.4px;color:' + DIRECTOR_COLOR + ';' +\n 'background:' + USER_COLOR_LIGHT + ';border-radius:8px;padding:3px 9px;display:flex;align-items:center;gap:5px;');\n sceneTeamBadge.innerHTML = ms('groups', 15, DIRECTOR_COLOR) + '<span>Team</span>';\n elScenehead.appendChild(sceneTeamBadge);\n elScenehead.appendChild(el('span', null, 'flex:1 1 auto;'));\n sceneOut = el('span', null, 'font-size:11px;font-weight:600;color:' + TXT_MUTED + ';display:flex;align-items:center;gap:6px;white-space:nowrap;');\n setSceneState(false);\n elScenehead.appendChild(sceneOut);\n }\n\n // Scene status label — real state: 'Live' when a run is active or the campaign is\n // running, else 'Idle'. Driven by renderProject.\n function setSceneState(live) {\n if (!sceneOut) return;\n if (live) {\n sceneOut.style.color = EMERALD;\n sceneOut.innerHTML = '<span class=\"wd-pulse\" style=\"width:8px;height:8px;border-radius:50%;background:' + EMERALD + ';box-shadow:0 0 7px ' + EMERALD + ';flex:0 0 auto;\"></span><span>Live</span>';\n } else {\n sceneOut.style.color = TXT_MUTED;\n sceneOut.innerHTML = ms('pause_circle', 15, TXT_MUTED) + '<span>Idle</span>';\n }\n }\n\n // ---- LEFT LOGS PANEL --------------------------------------------------\n function buildLogs() {\n if (!elLogs) return;\n elLogs.innerHTML = '';\n elLogs.style.cssText += ';display:flex;flex-direction:column;';\n\n var head = el('div', null, 'flex:0 0 auto;padding:12px 12px 8px;border-bottom:1px solid ' + PANEL_BORDER + ';');\n var titleRow = el('div', null, 'display:flex;align-items:center;gap:7px;margin-bottom:9px;');\n titleRow.innerHTML = ms('receipt_long', 16, TXT_LABEL) + '<span class=\"wd-label\">Activity</span>';\n head.appendChild(titleRow);\n\n logsFilterInp = el('input', null, 'width:100%;background:#fff;border:1px solid ' + PANEL_BORDER + ';' +\n 'border-radius:8px;padding:6px 9px;font-size:12px;color:' + TXT_DARK + ';outline:none;');\n logsFilterInp.type = 'text';\n logsFilterInp.placeholder = 'Filter\\\\u2026';\n logsFilterInp.addEventListener('input', function () { logFilter = lower(logsFilterInp.value); applyLogFilter(); });\n head.appendChild(logsFilterInp);\n elLogs.appendChild(head);\n\n logsList = el('div', 'wd-scroll', 'flex:1 1 auto;min-height:0;padding:8px;display:flex;flex-direction:column;gap:7px;');\n elLogs.appendChild(logsList);\n\n logsEmpty = el('div', null, 'padding:20px 12px;text-align:center;color:' + TXT_MUTED + ';font-size:12px;font-style:italic;');\n logsEmpty.textContent = 'No activity yet\\\\u2026';\n logsList.appendChild(logsEmpty);\n }\n\n function applyLogFilter() {\n var any = false;\n for (var i = 0; i < logOrder.length; i++) {\n var row = logNodes[logOrder[i]];\n if (!row) continue;\n var hit = !logFilter || (row._search && row._search.indexOf(logFilter) >= 0);\n row.style.display = hit ? 'block' : 'none';\n if (hit) any = true;\n }\n if (logsEmpty) logsEmpty.style.display = (any || !logOrder.length) ? (logOrder.length ? 'none' : 'block') : 'none';\n }\n\n // Build a single log row element for an activity run.\n function buildLogRow(run) {\n run = run || {};\n var id = String(run.id != null ? run.id : Math.random());\n var agentName = run.agent_name || run.agent_id || 'Agent';\n var hue = colorMap[String(run.agent_id)] || DIRECTOR_COLOR;\n var st = normStatus(run.status);\n\n var row = el('div', 'wd-card', 'padding:9px 10px;');\n // Header: dot + ROLE CAPS + phase badge.\n var hdr = el('div', null, 'display:flex;align-items:center;gap:7px;');\n var sdot = el('span', (st === 'running' ? 'wd-pulse' : ''),\n 'width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:' + hue + ';box-shadow:0 0 7px ' + hue + ';');\n var roleLbl = el('span', null, 'font-size:11px;font-weight:800;letter-spacing:.4px;color:' + TXT_DARK + ';' +\n 'white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0;');\n roleLbl.textContent = String(agentName).toUpperCase();\n hdr.appendChild(sdot); hdr.appendChild(roleLbl);\n\n // REQUEST / RESPONSE / FAILED badge.\n var badge = el('span', null, phaseBadgeCss(st));\n badge.textContent = phaseBadgeLabel(st);\n hdr.appendChild(badge);\n row.appendChild(hdr);\n\n // Meta row: clock + duration chip.\n var meta = el('div', null, 'display:flex;align-items:center;gap:6px;margin-top:5px;');\n var clock = el('span', 'wd-mono', 'font-size:10.5px;color:' + TXT_MUTED + ';');\n clock.textContent = fmtClock(run.finished_at || run.started_at);\n meta.appendChild(clock);\n var dur = fmtDuration(run.duration_ms);\n if (dur) {\n var dchip = el('span', 'wd-mono', 'font-size:10px;font-weight:700;color:#52525b;background:#f4f4f5;' +\n 'border:1px solid rgba(20,30,60,0.06);border-radius:6px;padding:1px 6px;');\n dchip.textContent = dur;\n meta.appendChild(dchip);\n }\n row.appendChild(meta);\n\n // Body preview = output / input / error (truncated). asText() guards against\n // object-shaped output/input/error so we never print \"[object Object]\".\n var bodyText = asText((st === 'completed' && run.output) ? run.output\n : (run.input ? run.input : (run.error ? run.error : '')));\n var body = el('div', null, 'font-size:12px;line-height:1.45;color:#3a4150;margin-top:5px;white-space:normal;word-break:break-word;');\n body.textContent = trunc(bodyText, 160);\n if (!bodyText) body.style.display = 'none';\n row.appendChild(body);\n\n // Tool chips parsed from trace.\n var steps = traceSteps(run.trace);\n var toolWrap = null;\n var toolText = '';\n for (var s = 0; s < steps.length; s++) {\n var step = steps[s] || {};\n if (lower(step.t) === 'tool' || step.tool) {\n if (!toolWrap) {\n toolWrap = el('div', null, 'display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;');\n }\n var nm = asText(step.name || step.tool || 'tool') || 'tool';\n var ltc = (step.ms != null) ? fmtDuration(step.ms) : '';\n var chip = el('span', null, 'display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;' +\n 'color:#047857;background:#ecfdf5;border:1px solid rgba(5,150,105,0.18);border-radius:999px;padding:2px 8px;');\n chip.innerHTML = ms('bolt', 13, '#059669') + '<span>' + esc(trunc(nm, 26)) + '</span>' +\n (ltc ? '<span class=\"wd-mono\" style=\"color:#0a7;opacity:.8;\">' + esc(ltc) + '</span>' : '');\n var tip = asText(step.args_preview || step.result_preview || step.preview || '');\n if (tip) chip.title = tip;\n toolText += ' ' + lower(nm);\n toolWrap.appendChild(chip);\n }\n }\n if (toolWrap) row.appendChild(toolWrap);\n\n // COLLAPSIBLE DETAIL — streaming trace + technical footer behind a disclosure (panel stays\n // short). Long entries collapse by default; logOpen[id] persists the open/closed choice across\n // the in-place row replacement (a user-opened row stays open as it streams steps).\n var COLLAPSE_OVER = 3; // collapse by default once there are more than this many step lines\n\n // Parse meaningful step lines (the bulk of a \"long\" entry).\n var prevCount = (streamState[id] && streamState[id].count) || 0;\n var lineSteps = [];\n for (var li = 0; li < steps.length; li++) {\n var txt = stepText(steps[li]);\n if (txt) lineSteps.push({ s: steps[li], text: txt, i: li });\n }\n\n // The collapsible body holds the trace stream + the technical footer.\n var det = el('div', 'wd-log-det', '');\n var hasDetail = false;\n\n if (lineSteps.length) {\n hasDetail = true;\n var stream = el('div', null, 'display:flex;flex-direction:column;gap:0;margin-top:7px;' +\n 'border-left:2px solid ' + hue + '33;padding-left:8px;');\n for (var ls = 0; ls < lineSteps.length; ls++) {\n var item = lineSteps[ls];\n var isNew = (item.i >= prevCount);\n var line = el('div', null, 'display:flex;align-items:flex-start;gap:6px;padding:2px 0;' +\n (isNew ? 'animation:wdFadeIn .5s ease;' : ''));\n var gi = el('span', 'msym', 'font-size:13px;line-height:1.5;flex:0 0 auto;color:' + hue + ';');\n gi.textContent = stepGlyph(item.s);\n var tx = el('span', null, 'font-size:11px;line-height:1.5;color:#3a4150;white-space:normal;word-break:break-word;min-width:0;');\n tx.textContent = item.text;\n line.appendChild(gi); line.appendChild(tx);\n stream.appendChild(line);\n }\n det.appendChild(stream);\n }\n // Remember how many step lines this run reached (only grow — never shrink the seen count).\n streamState[id] = { count: Math.max(prevCount, lineSteps.length) };\n\n // Technical footer (raw ids / trigger / campaign) — inside the disclosure.\n var tech = el('div', 'wd-mono', 'margin-top:6px;padding-top:6px;border-top:1px dashed ' + PANEL_BORDER + ';' +\n 'font-size:10px;color:' + TXT_MUTED + ';line-height:1.5;');\n var techBits = [];\n techBits.push('run ' + esc(trunc(id, 14)));\n if (run.trigger) techBits.push('trigger ' + esc(String(run.trigger)));\n if (run.campaign_run_id) techBits.push('campaign');\n techBits.push('status ' + esc(String(run.status || '')));\n tech.innerHTML = techBits.join(' \\\\u00B7 ');\n det.appendChild(tech);\n\n // Default open state: respect a remembered choice, else collapse long entries.\n var defaultOpen = (lineSteps.length <= COLLAPSE_OVER);\n var isOpen = (logOpen[id] != null) ? !!logOpen[id] : defaultOpen;\n logOpen[id] = isOpen;\n det.style.display = isOpen ? 'block' : 'none';\n\n // Disclosure toggle — shown whenever there is a trace worth collapsing.\n if (lineSteps.length > COLLAPSE_OVER || (lineSteps.length && !isOpen)) {\n var toggle = el('button', 'wd-log-toggle', '');\n var chev = el('span', 'wd-chev msym' + (isOpen ? ' is-open' : ''), 'font-size:14px;color:' + DIRECTOR_COLOR + ';');\n chev.textContent = 'chevron_right';\n var tlbl = el('span', null, '');\n tlbl.textContent = isOpen ? 'Hide trace' : ('Show trace (' + lineSteps.length + ')');\n toggle.appendChild(chev); toggle.appendChild(tlbl);\n (function (rid, d, c, l) {\n toggle.addEventListener('click', function () {\n var nowOpen = (d.style.display === 'none');\n d.style.display = nowOpen ? 'block' : 'none';\n c.className = 'wd-chev msym' + (nowOpen ? ' is-open' : '');\n l.textContent = nowOpen ? 'Hide trace' : ('Show trace (' + lineSteps.length + ')');\n logOpen[rid] = nowOpen;\n });\n })(id, det, chev, tlbl);\n row.appendChild(toggle);\n row.appendChild(det);\n } else if (hasDetail || techBits.length) {\n // Short entry: show the detail inline (no toggle needed), trace already open.\n det.style.display = 'block';\n logOpen[id] = true;\n row.appendChild(det);\n }\n\n row._search = lower(agentName + ' ' + String(run.status) + ' ' + bodyText + ' ' + toolText);\n row._id = id;\n return row;\n }\n\n function phaseBadgeCss(st) {\n var base = 'font-size:9.5px;font-weight:800;letter-spacing:.5px;border-radius:6px;padding:2px 7px;flex:0 0 auto;';\n if (st === 'running') return base + 'color:' + USER_COLOR + ';background:' + USER_COLOR_LIGHT + ';';\n if (st === 'failed') return base + 'color:' + STATUS_FAILED + ';background:#fdecec;';\n if (st === 'completed') return base + 'color:#059669;background:#ecfdf5;';\n return base + 'color:' + TXT_MUTED + ';background:rgba(20,30,60,0.05);';\n }\n function phaseBadgeLabel(st) {\n if (st === 'running') return 'REQUEST';\n if (st === 'failed') return 'FAILED';\n if (st === 'completed') return 'RESPONSE';\n return 'IDLE';\n }\n\n // Full render (first load): rebuild the whole list once.\n function renderLogs(list) {\n if (!logsList) return;\n list = Array.isArray(list) ? list : (list && Array.isArray(list.runs) ? list.runs : []);\n logsList.innerHTML = '';\n logNodes = {}; logOrder = []; streamState = {}; logOpen = {};\n logsList.appendChild(logsEmpty);\n if (!list.length) { logsEmpty.style.display = 'block'; return; }\n logsEmpty.style.display = 'none';\n // Newest first (the endpoint already orders by started_at DESC).\n for (var i = 0; i < list.length; i++) {\n var run = list[i];\n if (!run || run.id == null) continue;\n var id = String(run.id);\n var node = buildLogRow(run);\n logNodes[id] = node;\n logOrder.push(id);\n logsList.appendChild(node);\n }\n capLogDom();\n applyLogFilter();\n }\n\n // Append-not-rebuild: PREPEND new rows, update an existing row in place when its status flips.\n function appendLogs(rows) {\n if (!logsList) return;\n rows = Array.isArray(rows) ? rows : (rows && Array.isArray(rows.runs) ? rows.runs : []);\n if (!rows.length) return;\n if (logsEmpty) logsEmpty.style.display = 'none';\n // Oldest of the new batch first so the newest ends up on top after prepends.\n for (var i = rows.length - 1; i >= 0; i--) {\n var run = rows[i];\n if (!run || run.id == null) continue;\n var id = String(run.id);\n var fresh = buildLogRow(run);\n if (logNodes[id]) {\n // In-place replace (status flipped running->completed etc.); preserve position.\n var old = logNodes[id];\n if (old.parentNode) old.parentNode.replaceChild(fresh, old);\n logNodes[id] = fresh;\n } else {\n logNodes[id] = fresh;\n logOrder.unshift(id);\n if (logsList.firstChild && logsList.firstChild !== logsEmpty) {\n logsList.insertBefore(fresh, logsList.firstChild === logsEmpty ? logsList.firstChild.nextSibling : logsList.firstChild);\n } else {\n logsList.appendChild(fresh);\n }\n }\n }\n capLogDom();\n applyLogFilter();\n }\n\n // Bound the DOM size — keep the most recent ~80 rows.\n function capLogDom() {\n var MAX = 80;\n while (logOrder.length > MAX) {\n var dropId = logOrder.pop();\n var dn = logNodes[dropId];\n if (dn && dn.parentNode) dn.parentNode.removeChild(dn);\n delete logNodes[dropId];\n delete streamState[dropId];\n delete logOpen[dropId];\n }\n }\n\n function buildKanban() {\n if (!elKanban) return;\n elKanban.innerHTML = '';\n elKanban.style.cssText += ';display:flex;flex-direction:column;';\n var head = el('div', null, 'flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:9px 12px 7px;border-bottom:1px solid ' + PANEL_BORDER + ';');\n head.innerHTML = ms('view_kanban', 16, TXT_LABEL) + '<span class=\"wd-label\">Board</span>';\n elKanban.appendChild(head);\n\n kanbanCols = el('div', null, 'flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px;');\n elKanban.appendChild(kanbanCols);\n\n for (var c = 0; c < KAN_COLS.length; c++) {\n var col = el('div', null, 'display:flex;flex-direction:column;min-height:0;min-width:0;');\n var ch = el('div', null, 'display:flex;align-items:center;gap:6px;margin-bottom:6px;flex:0 0 auto;');\n var label = el('span', 'wd-label', 'font-size:10px;');\n label.textContent = KAN_COLS[c].label;\n var count = el('span', 'wd-mono', 'font-size:10px;font-weight:800;color:' + TXT_MUTED + ';background:rgba(20,30,60,0.06);border-radius:7px;padding:1px 7px;');\n count.textContent = '0';\n ch.appendChild(label); ch.appendChild(el('span', null, 'flex:1;')); ch.appendChild(count);\n col.appendChild(ch);\n var listEl = el('div', 'wd-scroll', 'flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px;padding-right:2px;');\n col.appendChild(listEl);\n col._count = count; col._list = listEl; col._key = KAN_COLS[c].key;\n kanbanCols.appendChild(col);\n }\n }\n\n function buildTaskCard(task) {\n task = task || {};\n var id = String(task.id != null ? task.id : Math.random());\n var st = lower(task.status);\n var assignee = task.assignee || '';\n var hasAssignee = !!assignee;\n var tagColor = hasAssignee ? (colorByName(assignee) || DIRECTOR_COLOR) : USER_COLOR;\n var tagName = hasAssignee ? assignee : 'User';\n\n var card = el('div', 'wd-card', 'padding:8px 9px;');\n var titleRow = el('div', null, 'display:flex;align-items:flex-start;gap:6px;cursor:pointer;');\n var chev = el('span', 'wd-chev msym', 'font-size:15px;color:' + TXT_MUTED + ';flex:0 0 auto;margin-top:1px;');\n chev.textContent = 'chevron_right';\n var ttl = el('span', null, 'font-size:12px;font-weight:700;color:' + TXT_DARK + ';line-height:1.35;flex:1 1 auto;min-width:0;');\n ttl.textContent = trunc(task.title || '(untitled)', 80);\n titleRow.appendChild(chev); titleRow.appendChild(ttl);\n card.appendChild(titleRow);\n\n // Collapsible description.\n var desc = el('div', null, 'display:none;font-size:11px;line-height:1.45;color:' + TXT_MUTED + ';margin-top:5px;white-space:normal;word-break:break-word;');\n if (task.description) desc.textContent = trunc(task.description, 220);\n card.appendChild(desc);\n titleRow.addEventListener('click', function () {\n var open = desc.style.display === 'block';\n desc.style.display = open ? 'none' : (task.description ? 'block' : 'none');\n chev.className = 'wd-chev msym' + (!open ? ' is-open' : '');\n });\n\n // Footer: agent tag + priority + due + working pill.\n var foot = el('div', null, 'display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap;');\n var tag = el('span', null, 'display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:' + TXT_MUTED + ';');\n tag.innerHTML = '<span style=\"width:8px;height:8px;border-radius:50%;background:' + tagColor + ';flex:0 0 auto;\"></span><span>' + esc(trunc(tagName, 18)) + '</span>';\n foot.appendChild(tag);\n\n if (task.priority) {\n var pr = el('span', null, 'font-size:9px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;border-radius:6px;padding:1px 6px;' + priorityCss(task.priority));\n pr.textContent = String(task.priority);\n foot.appendChild(pr);\n }\n if (task.due_date) {\n var due = el('span', 'wd-mono', 'display:inline-flex;align-items:center;gap:3px;font-size:9.5px;color:' + TXT_MUTED + ';');\n due.innerHTML = ms('event', 12, TXT_MUTED) + '<span>' + esc(fmtDate(task.due_date)) + '</span>';\n foot.appendChild(due);\n }\n foot.appendChild(el('span', null, 'flex:1;'));\n if (st === 'doing') {\n var wp = el('span', null, 'font-size:9px;font-weight:800;letter-spacing:.4px;color:' + USER_COLOR + ';background:' + USER_COLOR_LIGHT + ';border-radius:6px;padding:1px 7px;');\n wp.textContent = 'WORKING';\n foot.appendChild(wp);\n }\n card.appendChild(foot);\n\n card._id = id;\n return card;\n }\n\n function priorityCss(p) {\n p = lower(p);\n if (p === 'urgent') return 'color:#EA4335;background:#fdecec;';\n if (p === 'high') return 'color:#d97706;background:#fffbeb;';\n if (p === 'medium') return 'color:' + DIRECTOR_COLOR + ';background:' + USER_COLOR_LIGHT + ';';\n return 'color:' + TXT_MUTED + ';background:rgba(20,30,60,0.05);';\n }\n function fmtDate(iso) {\n var d = new Date(iso);\n if (isNaN(d.getTime())) return String(iso);\n try { return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' }); }\n catch (e) { return String(iso).slice(0, 10); }\n }\n\n // Map a name onto a stable member color (deterministic) when no roster index is known.\n function colorByName(name) {\n name = lower(name);\n if (/director|lead/.test(name)) return DIRECTOR_COLOR;\n var h = 0;\n for (var i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) % 100000;\n return memberColorHex(h);\n }\n\n // Keyed-diff render of the board (cards by task id, never wipe the whole column).\n function renderKanban(board) {\n if (!kanbanCols) return;\n board = board || {};\n var columns = board.columns || [];\n // Index columns by key for easy lookup.\n var byKey = {};\n for (var i = 0; i < columns.length; i++) byKey[columns[i].key] = columns[i];\n var seen = {};\n var colEls = kanbanCols.children;\n for (var c = 0; c < colEls.length; c++) {\n var colEl = colEls[c];\n var data = byKey[colEl._key] || { tasks: [] };\n var tasks = data.tasks || [];\n if (colEl._count) colEl._count.textContent = String(tasks.length);\n // Rebuild ordering in the column list while reusing nodes by id.\n var listEl = colEl._list;\n // Empty state.\n if (!tasks.length) {\n if (!listEl._empty) {\n listEl.innerHTML = '';\n var emp = el('div', null, 'font-size:11px;color:' + TXT_MUTED + ';font-style:italic;border:1px dashed ' + PANEL_BORDER + ';border-radius:8px;padding:10px;text-align:center;');\n emp.textContent = 'Empty';\n listEl.appendChild(emp); listEl._empty = emp;\n }\n listEl._empty.style.display = 'block';\n continue;\n }\n if (listEl._empty) listEl._empty.style.display = 'none';\n // Build the ordered set of nodes for this column.\n var frag = document.createDocumentFragment();\n for (var t = 0; t < tasks.length; t++) {\n var task = tasks[t];\n if (!task || task.id == null) continue;\n var tid = String(task.id);\n seen[tid] = true;\n var node = taskNodes[tid];\n // Rebuild card (cheap; preserves open-state risk is acceptable for status flips).\n var fresh = buildTaskCard(task);\n taskNodes[tid] = fresh;\n frag.appendChild(fresh);\n }\n // Replace the column contents (keep the empty node out).\n listEl.innerHTML = '';\n listEl._empty = null;\n listEl.appendChild(frag);\n }\n // Drop stale task nodes.\n for (var key in taskNodes) { if (!seen[key]) delete taskNodes[key]; }\n }\n\n // ---- RIGHT PROJECT INFO ----------------------------------------------\n function buildProject() {\n if (!elProject) return;\n elProject.innerHTML = '';\n elProject.className = (elProject.className || '') + ' wd-scroll';\n // RIGHT column must scroll, but the shell sets #world-project{overflow:hidden} via an ID\n // selector that out-specifies .wd-scroll — force scrolling with INLINE styles (inline beats\n // ID). min-height:0 lets the flex column shrink; max-height bounds it so it scrolls as one.\n elProject.style.cssText += ';display:flex;flex-direction:column;padding:14px;gap:14px;' +\n 'overflow-y:auto;overflow-x:hidden;min-height:0;max-height:100%;';\n\n // Title + phase badge.\n var titleRow = el('div', null, 'display:flex;align-items:center;gap:8px;flex:0 0 auto;');\n titleRow.innerHTML = ms('insights', 17, TXT_LABEL) + '<span class=\"wd-label\" style=\"font-size:12px;\">Project Info</span>';\n projPhase = el('span', null, 'margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.4px;border-radius:7px;padding:3px 9px;display:flex;align-items:center;gap:5px;');\n titleRow.appendChild(projPhase);\n elProject.appendChild(titleRow);\n setPhase('idle');\n\n // DIRECTOR CHAT box — user message shows immediately; the streaming assistant reply lands here\n // too so it's visible. (Start-New-Project button removed; Director chat is the project entry.)\n buildChat();\n\n // USER BRIEF section.\n var briefWrap = el('div', 'wd-card', 'flex:0 0 auto;padding:11px 12px;');\n var briefLbl = el('div', 'wd-label', 'margin-bottom:6px;');\n briefLbl.textContent = 'User Brief';\n briefWrap.appendChild(briefLbl);\n projBrief = el('div', null, 'font-size:13px;line-height:1.5;color:' + TXT_DARK + ';white-space:normal;word-break:break-word;');\n projBrief.innerHTML = '<span style=\"color:' + TXT_MUTED + ';font-style:italic;\">No active brief\\\\u2026</span>';\n briefWrap.appendChild(projBrief);\n projChips = el('div', null, 'display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;');\n briefWrap.appendChild(projChips);\n elProject.appendChild(briefWrap);\n\n // MEMBER ROSTER section.\n var rosterWrap = el('div', 'wd-card', 'flex:0 0 auto;padding:11px 12px;');\n var rosterLbl = el('div', 'wd-label', 'margin-bottom:8px;');\n rosterLbl.textContent = 'Member Roster';\n rosterWrap.appendChild(rosterLbl);\n projRoster = el('div', null, 'display:flex;flex-direction:column;gap:7px;');\n rosterWrap.appendChild(projRoster);\n elProject.appendChild(rosterWrap);\n\n // ORCHESTRATION section — live trace: Director -> agents -> synthesis -> Approvals.\n var traceWrap = el('div', 'wd-card', 'flex:0 0 auto;padding:11px 12px;');\n var traceHead = el('div', null, 'display:flex;align-items:center;gap:7px;margin-bottom:8px;');\n var traceLbl = el('span', 'wd-label', '');\n traceLbl.textContent = 'Orchestration';\n traceHead.appendChild(traceLbl);\n traceHead.appendChild(el('span', null, 'flex:1;'));\n projTraceBadge = el('span', null, 'display:none;font-size:9.5px;font-weight:800;letter-spacing:.4px;' +\n 'border-radius:6px;padding:2px 8px;align-items:center;gap:5px;');\n traceHead.appendChild(projTraceBadge);\n traceWrap.appendChild(traceHead);\n projTrace = el('div', null, 'display:flex;flex-direction:column;gap:0;');\n projTrace.innerHTML = '<div style=\"font-size:11px;color:' + TXT_MUTED + ';font-style:italic;\">No orchestration yet\\\\u2026</div>';\n traceWrap.appendChild(projTrace);\n elProject.appendChild(traceWrap);\n\n // AGENT ACTIVITY section — real run counts (no token/cost framing).\n var usageWrap = el('div', 'wd-card', 'flex:0 0 auto;padding:11px 12px;');\n var usageHead = el('div', null, 'display:flex;align-items:center;gap:7px;margin-bottom:8px;');\n usageHead.innerHTML = '<span class=\"wd-label\">Agent Activity</span>';\n usageWrap.appendChild(usageHead);\n\n var bigRow = el('div', null, 'display:flex;align-items:baseline;gap:7px;');\n projUsageBig = el('span', 'wd-mono', 'font-size:30px;font-weight:900;color:' + TXT_DARK + ';line-height:1;');\n projUsageBig.textContent = '0';\n var bigLbl = el('span', null, 'font-size:12px;font-weight:700;color:' + TXT_MUTED + ';');\n bigLbl.textContent = 'runs';\n bigRow.appendChild(projUsageBig); bigRow.appendChild(bigLbl);\n usageWrap.appendChild(bigRow);\n\n projUsageSub = el('div', null, 'font-size:11px;color:' + TXT_MUTED + ';margin-top:3px;');\n projUsageSub.textContent = '0 done + 0 active + 0 failed';\n usageWrap.appendChild(projUsageSub);\n\n projUsageRows = el('div', null, 'display:flex;flex-direction:column;gap:6px;margin-top:10px;');\n usageWrap.appendChild(projUsageRows);\n elProject.appendChild(usageWrap);\n }\n\n function setPhase(phase) {\n if (!projPhase) return;\n phase = lower(phase);\n if (phase === 'working' || phase === 'active' || phase === 'running') {\n projPhase.style.color = USER_COLOR;\n projPhase.style.background = USER_COLOR_LIGHT;\n projPhase.innerHTML = '<span class=\"wd-pulse\" style=\"width:7px;height:7px;border-radius:50%;background:' + USER_COLOR + ';\"></span><span>WORKING</span>';\n } else if (phase === 'done' || phase === 'completed') {\n projPhase.style.color = PHASE_DONE;\n projPhase.style.background = 'rgba(34,197,94,0.12)';\n projPhase.innerHTML = '<span style=\"width:7px;height:7px;border-radius:50%;background:' + PHASE_DONE + ';\"></span><span>DONE</span>';\n } else {\n projPhase.style.color = TXT_MUTED;\n projPhase.style.background = 'rgba(20,30,60,0.05)';\n projPhase.innerHTML = '<span style=\"width:7px;height:7px;border-radius:50%;background:' + STATUS_IDLE + ';\"></span><span>READY TO START</span>';\n }\n }\n\n function chip(label, value) {\n return '<span style=\"font-size:10px;font-weight:600;color:' + TXT_LABEL + ';background:rgba(20,30,60,0.05);' +\n 'border-radius:7px;padding:2px 8px;display:inline-flex;gap:4px;\">' +\n '<span style=\"color:' + TXT_MUTED + ';\">' + esc(asText(label)) + '</span><span style=\"color:' + TXT_DARK + ';font-weight:700;\">' + esc(asText(value)) + '</span></span>';\n }\n\n function renderProject(project) {\n if (!elProject) return;\n project = project || {};\n var campaign = project.campaign || null;\n var usage = project.usage || {};\n\n // Phase (explicit or inferred).\n setPhase(project.phase || (campaign ? 'working' : 'idle'));\n\n // Brief. asText() guards an object-shaped goal/description.\n if (projBrief) {\n var brief = campaign ? asText(campaign.goal || campaign.description || '') : '';\n if (brief) projBrief.textContent = brief;\n else projBrief.innerHTML = '<span style=\"color:' + TXT_MUTED + ';font-style:italic;\">No active brief\\\\u2026</span>';\n }\n if (projChips) {\n var chips = '';\n if (campaign) {\n if (campaign.channel) chips += chip('channel', campaign.channel);\n if (campaign.audience) chips += chip('audience', campaign.audience);\n if (campaign.workspace) chips += chip('workspace', campaign.workspace);\n if (campaign.mode) chips += chip('mode', campaign.mode);\n }\n projChips.innerHTML = chips;\n projChips.style.display = chips ? 'flex' : 'none';\n }\n\n // Roster rows (by sequence).\n renderRoster(campaign ? (campaign.agents || []) : []);\n\n // Orchestration trace — the latest campaign run rides on project.run (or\n // campaign.run); fall back to project.orchestration / project.trace if present.\n var run = project.run || (campaign && campaign.run) || project.orchestration || project.trace || null;\n renderTrace(run);\n\n // Usage (REAL runs; tokens not tracked).\n var runs = usage.runs || {};\n var total = Number(runs.total != null ? runs.total : 0) || 0;\n var done = Number(runs.completed != null ? runs.completed : 0) || 0;\n var active = Number(runs.running != null ? runs.running : 0) || 0;\n var failed = Number(runs.failed != null ? runs.failed : 0) || 0;\n if (projUsageBig) projUsageBig.textContent = String(total);\n if (projUsageSub) projUsageSub.textContent = done + ' done + ' + active + ' active + ' + failed + ' failed';\n renderUsageRows(usage.perAgent || []);\n\n // Scene status label — real state. 'Live' when a run is active (runs.running>0)\n // or the campaign is running/active; else 'Idle'.\n var phaseStr = lower(project.phase || (campaign ? 'working' : 'idle'));\n var campaignActive = /working|active|running/.test(phaseStr);\n setSceneState(active > 0 || campaignActive);\n\n // Top bar model chip — real data via resolveModelLabel; hide when no campaign.\n if (topModel) {\n var modelTxt = resolveModelLabel(campaign);\n if (modelTxt) {\n topModel.style.display = 'flex';\n topModel.innerHTML = ms('memory', 14, TXT_MUTED) + '<span class=\"wd-mono\">' + esc(trunc(modelTxt, 22)) + '</span>';\n } else {\n topModel.style.display = 'none';\n }\n }\n }\n\n function renderRoster(list) {\n if (!projRoster) return;\n list = Array.isArray(list) ? list.slice() : [];\n list.sort(function (a, b) { return (Number(a.sequence) || 0) - (Number(b.sequence) || 0); });\n if (!list.length) {\n projRoster.innerHTML = '<div style=\"font-size:12px;color:' + TXT_MUTED + ';font-style:italic;\">No members yet</div>';\n rosterNodes = {};\n return;\n }\n projRoster.innerHTML = '';\n rosterNodes = {};\n for (var i = 0; i < list.length; i++) {\n var m = list[i] || {};\n var agent = m.agent || {};\n var id = String(m.agent_id != null ? m.agent_id : (agent.id != null ? agent.id : i));\n var hue = colorMap[id] || colorForRow(m, i);\n var name = agent.name || m.name || id;\n var role = m.role || agent.role || '';\n var row = el('div', null, 'display:flex;align-items:center;gap:8px;');\n row.innerHTML =\n '<span style=\"width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:' + hue + ';box-shadow:0 0 6px ' + hue + ';\"></span>' +\n '<span style=\"flex:1;min-width:0;font-size:12.5px;font-weight:600;color:' + TXT_DARK + ';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">' + esc(name) + '</span>' +\n (role ? '<span style=\"font-size:10px;color:' + TXT_MUTED + ';text-transform:capitalize;\">' + esc(trunc(role, 16)) + '</span>' : '');\n projRoster.appendChild(row);\n rosterNodes[id] = row;\n }\n }\n\n function renderUsageRows(perAgent) {\n if (!projUsageRows) return;\n perAgent = Array.isArray(perAgent) ? perAgent.slice() : [];\n perAgent.sort(function (a, b) { return (Number(b.runs) || 0) - (Number(a.runs) || 0); });\n if (!perAgent.length) {\n projUsageRows.innerHTML = '<div style=\"font-size:11px;color:' + TXT_MUTED + ';font-style:italic;\">No runs yet</div>';\n usageNodes = {};\n return;\n }\n projUsageRows.innerHTML = '';\n usageNodes = {};\n for (var i = 0; i < perAgent.length; i++) {\n var a = perAgent[i] || {};\n var id = String(a.agent_id != null ? a.agent_id : i);\n var hue = colorMap[id] || memberColorHex(i);\n var name = (a.name || id);\n var runs = Number(a.runs) || 0;\n var right = '<span class=\"wd-mono\" style=\"font-size:11px;font-weight:800;color:' + TXT_DARK + ';\">' + runs + '</span>' +\n '<span style=\"font-size:10px;color:' + TXT_MUTED + ';margin-left:4px;\">runs</span>';\n var row = el('div', null, 'display:flex;align-items:center;gap:7px;');\n row.innerHTML =\n '<span style=\"width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:' + hue + ';\"></span>' +\n '<span style=\"flex:1;min-width:0;font-size:11px;font-weight:700;letter-spacing:.2px;color:' + TXT_DARK + ';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">' + esc(String(name).toUpperCase()) + '</span>' +\n '<span style=\"flex:0 0 auto;display:flex;align-items:baseline;\">' + right + '</span>';\n projUsageRows.appendChild(row);\n usageNodes[id] = row;\n }\n }\n\n // ---- ORCHESTRATION trace ----------------------------------------------\n // Per-step glyph + hue for the four directorTrace kinds.\n function traceKindGlyph(t) {\n t = lower(t);\n if (t === 'director') return 'account_tree';\n if (t === 'agent') return 'smart_toy';\n if (t === 'synthesis') return 'merge';\n if (t === 'approval') return 'task_alt';\n return 'radio_button_checked';\n }\n function traceKindHue(step, index) {\n var t = lower(step && step.t);\n if (t === 'director') return DIRECTOR_COLOR;\n if (t === 'synthesis') return USER_COLOR;\n if (t === 'approval') return EMERALD;\n if (t === 'agent') {\n // Prefer the roster color for this agent name; else cycle member hues.\n var nm = lower(step && step.name);\n if (nm) {\n var byName = colorByName(step.name);\n if (byName) return byName;\n }\n return memberColorHex(index);\n }\n return TXT_MUTED;\n }\n // Human title per step kind.\n function traceTitle(step) {\n var t = lower(step && step.t);\n if (t === 'director') return 'Director';\n if (t === 'agent') return asText(step && step.name) || 'Agent';\n if (t === 'synthesis') return 'Synthesis';\n if (t === 'approval') return 'Approvals';\n return 'Step';\n }\n // Preview/note text per step kind. asText() guards object-shaped preview/note.\n function traceBody(step) {\n if (!step) return '';\n var pv = asText(step.preview);\n if (pv) return pv;\n return asText(step.note);\n }\n\n // Set the run-status badge (running / completed / failed) on the Orchestration head.\n function setTraceBadge(status) {\n if (!projTraceBadge) return;\n var st = normStatus(status);\n if (!status) { projTraceBadge.style.display = 'none'; return; }\n projTraceBadge.style.display = 'flex';\n if (st === 'running') {\n projTraceBadge.style.color = USER_COLOR;\n projTraceBadge.style.background = USER_COLOR_LIGHT;\n projTraceBadge.innerHTML = '<span class=\"wd-pulse\" style=\"width:7px;height:7px;border-radius:50%;background:' + USER_COLOR + ';\"></span><span>RUNNING</span>';\n } else if (st === 'failed') {\n projTraceBadge.style.color = STATUS_FAILED;\n projTraceBadge.style.background = '#fdecec';\n projTraceBadge.innerHTML = '<span style=\"width:7px;height:7px;border-radius:50%;background:' + STATUS_FAILED + ';\"></span><span>FAILED</span>';\n } else if (st === 'completed') {\n projTraceBadge.style.color = '#059669';\n projTraceBadge.style.background = '#ecfdf5';\n projTraceBadge.innerHTML = '<span style=\"width:7px;height:7px;border-radius:50%;background:#059669;\"></span><span>COMPLETED</span>';\n } else {\n projTraceBadge.style.color = TXT_MUTED;\n projTraceBadge.style.background = 'rgba(20,30,60,0.05)';\n projTraceBadge.innerHTML = '<span style=\"width:7px;height:7px;border-radius:50%;background:' + STATUS_IDLE + ';\"></span><span>' + esc(String(status).toUpperCase()) + '</span>';\n }\n }\n\n // Render the ordered orchestration trace. Accepts a run object ({status,steps}/{trace}) or a\n // bare steps array. While 'running', the latest step gets a live pulse.\n function renderTrace(run) {\n if (!projTrace) return;\n // Normalize input → { status, steps }.\n var status = '';\n var steps = [];\n if (Array.isArray(run)) {\n steps = run;\n } else if (run && typeof run === 'object') {\n status = run.status != null ? run.status : '';\n if (Array.isArray(run.steps)) steps = run.steps;\n else if (run.trace != null) steps = traceSteps(run.trace);\n else if (Array.isArray(run.director)) steps = run.director;\n }\n setTraceBadge(status);\n\n if (!steps.length) {\n projTrace.innerHTML = '<div style=\"font-size:11px;color:' + TXT_MUTED + ';font-style:italic;\">No orchestration yet\\\\u2026</div>';\n return;\n }\n var st = normStatus(status);\n var running = (st === 'running');\n var lastIdx = steps.length - 1;\n var agentSeq = 0; // index among agent steps (for hue cycling fallback)\n\n projTrace.innerHTML = '';\n for (var i = 0; i < steps.length; i++) {\n var step = steps[i] || {};\n var kind = lower(step.t);\n var hueIdx = (kind === 'agent') ? agentSeq++ : i;\n var hue = traceKindHue(step, hueIdx);\n var isLast = (i === lastIdx);\n var live = running && isLast;\n\n // Row: timeline rail (dot + connector) + content.\n var row = el('div', null, 'display:flex;gap:9px;align-items:flex-start;');\n\n // Rail.\n var rail = el('div', null, 'display:flex;flex-direction:column;align-items:center;flex:0 0 auto;width:18px;');\n var node = el('span', (live ? 'wd-pulse' : ''),\n 'width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;' +\n 'background:' + hue + '1A;border:1.5px solid ' + hue + ';');\n node.innerHTML = ms(traceKindGlyph(kind), 11, hue);\n rail.appendChild(node);\n if (!isLast) {\n var conn = el('span', null, 'width:2px;flex:1 1 auto;min-height:14px;background:' + PANEL_BORDER + ';margin:2px 0;');\n rail.appendChild(conn);\n }\n row.appendChild(rail);\n\n // Content.\n var content = el('div', null, 'flex:1 1 auto;min-width:0;padding-bottom:' + (isLast ? '0' : '10px') + ';');\n var head = el('div', null, 'display:flex;align-items:center;gap:6px;');\n var ttl = el('span', null, 'font-size:11.5px;font-weight:800;letter-spacing:.2px;color:' + TXT_DARK + ';' +\n 'white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;');\n ttl.textContent = traceTitle(step);\n head.appendChild(ttl);\n // Role chip for agent steps.\n if (kind === 'agent' && step.role) {\n var roleChip = el('span', null, 'flex:0 0 auto;font-size:9px;color:' + TXT_MUTED + ';text-transform:capitalize;');\n roleChip.textContent = trunc(step.role, 18);\n head.appendChild(roleChip);\n }\n head.appendChild(el('span', null, 'flex:1;'));\n // Clock.\n var clk = el('span', 'wd-mono', 'flex:0 0 auto;font-size:9.5px;color:' + TXT_MUTED + ';');\n clk.textContent = fmtClock(step.ts);\n head.appendChild(clk);\n content.appendChild(head);\n\n // Preview / note body.\n var bodyText = traceBody(step);\n if (bodyText) {\n var body = el('div', null, 'font-size:11px;line-height:1.45;color:#3a4150;margin-top:3px;' +\n 'white-space:normal;word-break:break-word;');\n body.textContent = trunc(bodyText, 160);\n content.appendChild(body);\n }\n row.appendChild(content);\n projTrace.appendChild(row);\n }\n }\n\n // ---- TOP BAR live render ----------------------------------------------\n function renderTopbar(project, agents) {\n project = project || {};\n var campaign = project.campaign || null;\n // Roster color map (keeps logs/usage colors in agreement with the 3D).\n if (Array.isArray(agents)) { colorMap = colorMapFromRoster(agents); rosterCount = agents.length; }\n else if (campaign && Array.isArray(campaign.agents)) { rosterCount = campaign.agents.length; }\n if (topTeam) topTeam.innerHTML = ms('group', 14, DIRECTOR_COLOR) + '<span class=\"wd-mono\">' + rosterCount + '</span>';\n if (sceneTeamBadge) sceneTeamBadge.innerHTML = ms('groups', 15, DIRECTOR_COLOR) + '<span>Team \\\\u00B7 ' + rosterCount + '</span>';\n if (topProject) topProject.textContent = campaign ? (campaign.name || 'Project') : 'No active project';\n // Auto-approve: 'auto' campaign mode or an explicit project.autoApprove flag.\n var auto = !!(project.autoApprove || (campaign && lower(campaign.mode) === 'auto'));\n setAutoApprove(auto);\n if (topModel) {\n var modelTxt = resolveModelLabel(campaign);\n if (modelTxt) {\n topModel.style.display = 'flex';\n topModel.innerHTML = ms('memory', 14, TXT_MUTED) + '<span class=\"wd-mono\">' + esc(trunc(modelTxt, 22)) + '</span>';\n } else {\n topModel.style.display = 'none';\n }\n }\n }\n`;\n",[224],"10f49526-5e7f-11f1-8071-1607ee4eb77e","frontend_world_dash_chat.ts","10f495f8-5e7f-11f1-8071-1607ee4eb77e",942,["D",1780403526320],"// frontend_world_dash_chat.ts — SOURCE FRAGMENT of the /world dashboard browser module.\n// Exports DASH_CHAT: a plain string of browser-JS SOURCE (function declarations only — NO\n// top-level state). getWorldDashJS() in frontend_world_dash.ts concatenates this fragment\n// INSIDE the createDash closure, so every function here shares that one closure (the shared\n// var chatStreamRow/chatStreamBody/chatStreamText/chatStreamTools etc. live in the entry file).\n// Contains: SAFE markdown (mdInline/mdToHtml with nested flushList/flushCode), and the Director\n// chat box (buildChat/setRunBtnIdle/setRunBtnBusy/chatScroll/chatAppend/chatStreamStart/\n// chatStreamChunk/chatStreamEnd/chatStreamTool). mdInline/mdToHtml moved here from the module\n// top level into the createDash scope — their only callers (chatAppend/chatStreamEnd) live here\n// and they reference only closure-visible helpers (esc, DIRECTOR_COLOR), so behavior is identical.\n// FOOTGUNS: keep the SAME escaping as the entry template (escaped backticks and \\${ stay\n// escaped); NO new unescaped backticks or ${...}. Keep under 80000 bytes.\nexport const DASH_CHAT = `\n// Tiny SAFE markdown -> HTML (assistant bubbles only). Golden rule: ESCAPE the raw text\n// FIRST (so no user/model text can inject HTML), then apply markdown transforms on the\n// already-escaped string. Supports fenced code, inline code, bold, italic, links, bullet\n// + numbered lists, line breaks. Used by chatAppend / chatStreamEnd.\nfunction mdInline(s) {\n // s is ALREADY html-escaped here. Apply inline spans (no block elements).\n // inline code \\`x\\` FIRST so its contents aren't touched by bold/italic/link.\n var codeStash = [];\n s = s.replace(/\\`([^\\`]+)\\`/g, function (m, code) {\n codeStash.push('<code class=\"wd-mono\" style=\"font-size:11.5px;' +\n 'background:rgba(20,30,60,0.06);border-radius:4px;padding:1px 4px;\">' + code + '</code>');\n return '\\\\u0000' + (codeStash.length - 1) + '\\\\u0000';\n });\n // links: [text](http(s)://url) — url restricted to http/https to stay safe.\n s = s.replace(/\\\\[([^\\\\]]+)\\\\]\\\$(https?:\\\\/\\\\/[^\\\\s)]+)\\\$/g, function (m, txt, url) {\n return '<a href=\"' + url + '\" target=\"_blank\" rel=\"noopener noreferrer\" ' +\n 'style=\"color:' + DIRECTOR_COLOR + ';text-decoration:underline;\">' + txt + '</a>';\n });\n // bold **x** (before italic so ** isn't eaten by * rule).\n s = s.replace(/\\\\*\\\\*([^*]+)\\\\*\\\\*/g, '<strong>$1</strong>');\n // italic *x* (avoid matching across already-consumed bold).\n s = s.replace(/(^|[^*])\\\\*([^*\\\\n]+)\\\\*(?!\\\\*)/g, '$1<em>$2</em>');\n // restore stashed inline-code spans.\n s = s.replace(/\\\\u0000(\\\\d+)\\\\u0000/g, function (m, n) { return codeStash[Number(n)] || ''; });\n return s;\n}\nfunction mdToHtml(raw) {\n raw = (raw == null) ? '' : String(raw);\n // ESCAPE FIRST.\n var text = esc(raw);\n var out = [];\n var lines = text.split(/\\\\r?\\\\n/);\n var inCode = false; // inside a fenced code block\n var codeBuf = [];\n var listType = ''; // '' | 'ul' | 'ol'\n var listBuf = [];\n function flushList() {\n if (!listType) return;\n out.push('<' + listType + ' style=\"margin:4px 0;padding-left:20px;\">' + listBuf.join('') + '</' + listType + '>');\n listType = ''; listBuf = [];\n }\n function flushCode() {\n out.push('<pre style=\"margin:6px 0;padding:8px 10px;background:rgba(20,30,60,0.06);border-radius:8px;' +\n 'overflow-x:auto;\"><code class=\"wd-mono\" style=\"font-size:11.5px;line-height:1.5;white-space:pre;\">' +\n codeBuf.join('\\\\n') + '</code></pre>');\n codeBuf = [];\n }\n for (var i = 0; i < lines.length; i++) {\n var line = lines[i];\n // Fenced code blocks (escaped backticks render as ` — match the literal char).\n if (/^\\\\s*\\`\\`\\`/.test(line)) {\n if (inCode) { flushCode(); inCode = false; }\n else { flushList(); inCode = true; }\n continue;\n }\n if (inCode) { codeBuf.push(line); continue; }\n // Bullet list item: -, *, or • .\n var mUl = line.match(/^\\\\s*[-*\\\\u2022]\\\\s+(.*)$/);\n if (mUl) {\n if (listType && listType !== 'ul') flushList();\n listType = 'ul';\n listBuf.push('<li style=\"margin:1px 0;\">' + mdInline(mUl[1]) + '</li>');\n continue;\n }\n // Numbered list item: 1. 2) etc.\n var mOl = line.match(/^\\\\s*\\\\d+[.)]\\\\s+(.*)$/);\n if (mOl) {\n if (listType && listType !== 'ol') flushList();\n listType = 'ol';\n listBuf.push('<li style=\"margin:1px 0;\">' + mdInline(mOl[1]) + '</li>');\n continue;\n }\n flushList();\n if (line.trim() === '') { out.push('<br>'); continue; }\n out.push('<div>' + mdInline(line) + '</div>');\n }\n flushList();\n if (inCode) flushCode();\n // inline code spans are handled per-line inside mdInline (so they never touch\n // the contents of fenced <pre> blocks).\n return out.join('');\n}\n\n // ---- DIRECTOR CHAT box ------------------------------------------------\n // Self-contained chat (transcript + input + send) in the RIGHT column. Submitting shows the\n // user bubble at once and calls opts.onChat(text); the entry streams the reply back through\n // chatStream{Start,Chunk,End} (so the assistant reply is visible).\n function buildChat() {\n if (!elProject) return;\n var wrap = el('div', 'wd-card', 'flex:0 0 auto;display:flex;flex-direction:column;overflow:hidden;');\n\n // Head — Director identity.\n var head = el('div', null, 'display:flex;align-items:center;gap:7px;padding:10px 12px 8px;border-bottom:1px solid ' + PANEL_BORDER + ';');\n head.innerHTML = ms('account_tree', 16, DIRECTOR_COLOR) +\n '<span class=\"wd-label\" style=\"color:' + DIRECTOR_COLOR + ';\">Director</span>' +\n '<span style=\"flex:1;\"></span>' +\n '<span style=\"font-size:10px;color:' + TXT_MUTED + ';\">chat to direct the team</span>';\n wrap.appendChild(head);\n\n // Transcript.\n chatTranscript = el('div', 'wd-scroll', 'display:flex;flex-direction:column;gap:8px;padding:11px 12px;' +\n 'min-height:120px;max-height:300px;overflow-y:auto;');\n chatEmpty = el('div', null, 'font-size:12px;color:' + TXT_MUTED + ';font-style:italic;text-align:center;padding:14px 6px;');\n chatEmpty.textContent = 'Direct the team or start a project\\\\u2026';\n chatTranscript.appendChild(chatEmpty);\n wrap.appendChild(chatTranscript);\n\n // Composer — input + send.\n var form = el('form', null, 'display:flex;align-items:flex-end;gap:7px;padding:9px 11px;border-top:1px solid ' + PANEL_BORDER + ';');\n form.setAttribute('autocomplete', 'off');\n chatInput = el('textarea', null, 'flex:1 1 auto;min-width:0;resize:none;background:#fff;border:1px solid ' + PANEL_BORDER + ';' +\n 'border-radius:10px;padding:8px 11px;font-size:13px;line-height:1.4;color:' + TXT_DARK + ';outline:none;' +\n 'font-family:inherit;max-height:90px;');\n chatInput.rows = 1;\n chatInput.placeholder = 'Message the Director\\\\u2026';\n // Auto-grow + Enter-to-send (Shift+Enter for newline).\n chatInput.addEventListener('input', function () {\n chatInput.style.height = 'auto';\n chatInput.style.height = Math.min(90, chatInput.scrollHeight) + 'px';\n });\n chatInput.addEventListener('keydown', function (e) {\n if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submitChat(); }\n });\n var sendBtn = el('button', 'wd-btn', 'flex:0 0 auto;background:' + DIRECTOR_COLOR + ';color:#fff;border-radius:10px;' +\n 'width:36px;height:36px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(66,133,244,0.28);');\n sendBtn.type = 'submit';\n sendBtn.innerHTML = ms('send', 18, '#fff');\n form.appendChild(chatInput); form.appendChild(sendBtn);\n form.addEventListener('submit', function (e) { e.preventDefault(); submitChat(); });\n wrap.appendChild(form);\n\n // RUN THE TEAM / Execute — explicit kick-off. Chat directs the team; this button RUNS the\n // campaign via opts.onRunCampaign(), with a brief \"running…\" state.\n var runRow = el('div', null, 'display:flex;padding:0 11px 11px;');\n runBtn = el('button', 'wd-btn', 'flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:7px;' +\n 'background:' + EMERALD + ';color:#fff;border-radius:11px;padding:11px 14px;font-size:13px;font-weight:800;' +\n 'letter-spacing:.2px;box-shadow:0 6px 16px rgba(16,185,129,0.28);');\n runBtn.type = 'button';\n setRunBtnIdle();\n runBtn.addEventListener('click', function () { triggerRunCampaign(); });\n runBtn.addEventListener('mouseenter', function () { if (!runBtnBusy) runBtn.style.filter = 'brightness(1.05)'; });\n runBtn.addEventListener('mouseleave', function () { runBtn.style.filter = 'none'; });\n runRow.appendChild(runBtn);\n wrap.appendChild(runRow);\n\n elProject.appendChild(wrap);\n }\n\n // Toggle the Run button between idle (\"Run the Team\") and its brief \"running…\" state.\n function setRunBtnIdle() {\n if (!runBtn) return;\n runBtnBusy = false; runBtn.disabled = false;\n runBtn.style.opacity = '1'; runBtn.style.cursor = 'pointer'; runBtn.style.filter = 'none';\n runBtn.innerHTML = ms('play_arrow', 19, '#fff') + '<span>Run the Team</span>';\n }\n function setRunBtnBusy() {\n if (!runBtn) return;\n runBtnBusy = true; runBtn.disabled = true;\n runBtn.style.opacity = '0.85'; runBtn.style.cursor = 'default'; runBtn.style.filter = 'none';\n runBtn.innerHTML = ms('autorenew', 18, '#fff') + '<span class=\"wd-pulse\">Running\\\\u2026</span>';\n }\n\n // Scroll the transcript to the newest message.\n function chatScroll() {\n if (chatTranscript) chatTranscript.scrollTop = chatTranscript.scrollHeight;\n }\n\n // Append a FINISHED message bubble (role = 'user' | 'assistant'/'director' | other).\n function chatAppend(role, text) {\n if (!chatTranscript) return null;\n if (chatEmpty && chatEmpty.parentNode) chatEmpty.parentNode.removeChild(chatEmpty);\n var isUser = (lower(role) === 'user' || lower(role) === 'you');\n var rowEl = el('div', 'wd-bub-row', 'align-items:' + (isUser ? 'flex-end' : 'flex-start') + ';');\n var name = el('div', 'wd-bub-name', '');\n name.textContent = isUser ? 'You' : 'Director';\n var bub = el('div', 'wd-bub ' + (isUser ? 'wd-bub-user' : 'wd-bub-ai'), '');\n // User messages stay PLAIN text; assistant/director bubbles render safe markdown.\n if (isUser) bub.textContent = String(text == null ? '' : text);\n else bub.innerHTML = mdToHtml(text);\n rowEl.appendChild(name); rowEl.appendChild(bub);\n chatTranscript.appendChild(rowEl);\n chatScroll();\n return bub;\n }\n\n function chatStreamStart() {\n if (!chatTranscript) return;\n if (chatStreamRow) chatStreamEnd();\n if (chatEmpty && chatEmpty.parentNode) chatEmpty.parentNode.removeChild(chatEmpty);\n chatStreamText = '';\n chatStreamTools = {};\n chatStreamRow = el('div', 'wd-bub-row', 'align-items:flex-start;');\n var name = el('div', 'wd-bub-name', '');\n name.textContent = 'Director';\n chatStreamBody = el('div', 'wd-bub wd-bub-ai', '');\n chatStreamBody.innerHTML = '<span class=\"wd-caret\"></span>';\n chatStreamRow.appendChild(name); chatStreamRow.appendChild(chatStreamBody);\n chatTranscript.appendChild(chatStreamRow);\n chatScroll();\n }\n\n function chatStreamChunk(t) {\n if (!chatStreamBody) { chatStreamStart(); }\n if (!chatStreamBody) return;\n chatStreamText += String(t == null ? '' : t);\n chatStreamBody.textContent = chatStreamText;\n var caret = el('span', 'wd-caret', '');\n chatStreamBody.appendChild(caret);\n chatScroll();\n }\n\n function chatStreamEnd() {\n if (!chatStreamBody) { chatStreamRow = null; chatStreamText = ''; chatStreamTools = {}; return; }\n if (chatStreamText) chatStreamBody.innerHTML = mdToHtml(chatStreamText);\n else chatStreamBody.textContent = '';\n if (!chatStreamText) {\n if (chatStreamRow && chatStreamRow.parentNode) chatStreamRow.parentNode.removeChild(chatStreamRow);\n if (chatTranscript && !chatTranscript.querySelector('.wd-bub-row') && chatEmpty) {\n chatTranscript.appendChild(chatEmpty);\n }\n }\n chatStreamRow = null; chatStreamBody = null; chatStreamText = ''; chatStreamTools = {};\n chatScroll();\n }\n\n // {tool} SSE frame -> reuse the SAME chip per tool name, flip running->done in place.\n function chatStreamTool(name) {\n if (!chatStreamRow) { chatStreamStart(); }\n if (!chatStreamRow) return;\n var _nm, _st;\n if (name && typeof name === 'object') { _nm = name.name || name.tool || 'tool'; _st = name.status; }\n else { _nm = (name == null ? 'tool' : name); _st = null; }\n _nm = String(_nm);\n var chip = chatStreamTools[_nm];\n if (!chip) {\n chip = document.createElement('span');\n chip.style.cssText = 'display:inline-flex;align-items:center;gap:4px;margin:4px 5px 0 0;font-size:10px;font-weight:600;color:#5a6273;background:rgba(20,30,60,0.06);border-radius:6px;padding:1px 7px;';\n chatStreamTools[_nm] = chip;\n chatStreamRow.appendChild(chip);\n }\n chip.textContent = '\\\\uD83D\\\\uDD27 ' + _nm + (_st ? ' \\\\u00B7 ' + String(_st) : '');\n chatScroll();\n }\n`;\n",[231],"11c174f6-5e7f-11f1-bc5e-1607ee4eb77e","frontend_world_dash.ts","508e5094-5da5-11f1-bae3-1607ee4eb77e",943,["D",1780403527651],10,"// frontend_world_dash.ts — DASHBOARD PANELS module for the Agent World (\"/world\").\n// getWorldDashJS() returns ONE backtick browser ES-module (served at /api/app-world-dash),\n// exporting createDash(opts) which owns ALL panel DOM (3D scene lives elsewhere) and fills the\n// five fixed shell containers from getWorldHTML (#world-topbar/-logs/-scenehead/-kanban/-project),\n// NEVER creating its own grid ids. Append-not-rebuild logs (by run id); keyed diff for kanban\n// cards (task id) and usage rows (agent_id).\n// API: mount, renderTopbar, renderLogs, appendLogs, renderActivity(=logs), renderKanban,\n// renderBoard(=kanban), renderProject, renderTrace, setPhase, toast, onStartProject, onChat,\n// onRunCampaign, chatAppend, chatStream{Start,Chunk,End,Tool}.\n// opts = { topbar, logs, scenehead, kanban, project, onStartProject, onChat, onRunCampaign }.\n// RIGHT chat box calls opts.onChat(text); reply streams back via chatStream{Start,Chunk,End} so it's\n// VISIBLE. Director-chat card holds a \"Run the Team\" button -> opts.onRunCampaign() (guarded) to KICK\n// OFF the campaign run, with a \"running…\" state.\n// FOOTGUNS: NO TS annotations inside the returned string; NO unescaped backticks or ${...} (plain\n// string concat); emojis as \\uXXXX. Keep this file under 80000 bytes.\n//\n// SPLIT (near the 80000-byte val.town limit): the SINGLE browser program is assembled by STRING\n// CONCATENATION from this entry plus two SOURCE fragments — DASH_VIEW (frontend_world_dash_view.ts)\n// and DASH_CHAT (frontend_world_dash_chat.ts). They are spliced INSIDE the createDash closure, so it\n// stays ONE closure with ONE set of shared mutable vars (declared below). Function declarations are\n// hoisted, so the order of the fragment blocks among the other function declarations is irrelevant;\n// only the shared `var` declarations + the final mount/return must stay in this entry. The assembled\n// string is behavior-equivalent to the pre-split file — only the SOURCE is split across files.\n\nimport { DASH_VIEW } from \"./frontend_world_dash_view.ts\";\nimport { DASH_CHAT } from \"./frontend_world_dash_chat.ts\";\n\nexport function getWorldDashJS(): string {\n return `\n// ===========================================================================\n// PALETTE (exact hexes — mirrors the other world modules + the-delegation brand)\n// ===========================================================================\nvar DIRECTOR_COLOR = '#4285F4';\nvar MEMBER_COLORS = ['#34A853','#FBBC05','#EA4335','#F59E0B','#40D5AD','#E64347','#E643C5','#7CE630','#5E888E'];\nvar USER_COLOR = '#7EACEA';\nvar USER_COLOR_LIGHT = '#7EACEA1A'; // 10%\nvar USER_COLOR_SOFT = '#7EACEA33'; // 20%\nvar STATUS_RUNNING = '#34A853';\nvar STATUS_FAILED = '#EA4335';\nvar STATUS_DONE = '#4285F4';\nvar STATUS_IDLE = '#9aa3b2';\nvar PHASE_WORKING = '#7EACEA';\nvar PHASE_DONE = '#22c55e';\nvar BRAND_DARK = '#313437';\nvar TXT_DARK = '#1f2430';\nvar TXT_MUTED = '#7a818f';\nvar TXT_LABEL = '#5a6273';\nvar PANEL_BORDER = 'rgba(20,30,60,0.08)';\nvar EMERALD = '#10b981';\nvar MONO = \"'Courier Prime',ui-monospace,SFMono-Regular,Menlo,monospace\";\n\nfunction memberColorHex(i) {\n var L = MEMBER_COLORS.length;\n return MEMBER_COLORS[(((i % L) + L) % L)];\n}\n\n// ===========================================================================\n// small utils\n// ===========================================================================\nfunction esc(s) {\n s = (s == null) ? '' : String(s);\n return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')\n .replace(/\"/g, '"').replace(/'/g, ''');\n}\nfunction lower(s) { return String(s == null ? '' : s).toLowerCase().trim(); }\n\n\n// [object Object] DEFENSE. Backend steps/previews/outputs sometimes arrive as objects\n// ({text:'...'} or a raw tool result). NEVER render \"[object Object]\": coerce to text —\n// pull a known text-ish field if present, else compact JSON. Used by every preview path.\nfunction asText(v) {\n if (v == null) return '';\n var t = typeof v;\n if (t === 'string') return v;\n if (t === 'number' || t === 'boolean') return String(v);\n if (t === 'function') return '';\n if (Array.isArray(v)) {\n var parts = [];\n for (var i = 0; i < v.length; i++) {\n var p = asText(v[i]);\n if (p) parts.push(p);\n }\n if (parts.length) return parts.join(', ');\n try { return JSON.stringify(v); } catch (e) { return ''; }\n }\n if (t === 'object') {\n // Prefer a human text field if it holds a non-empty string.\n var keys = ['text', 'preview', 'content', 'message', 'value', 'output',\n 'result', 'summary', 'description', 'note', 'title', 'name', 'label'];\n for (var k = 0; k < keys.length; k++) {\n var val = v[keys[k]];\n if (typeof val === 'string' && val.trim()) return val;\n }\n // Nested {text:{...}} etc. — recurse one level into the first such field.\n for (var k2 = 0; k2 < keys.length; k2++) {\n var vv = v[keys[k2]];\n if (vv && typeof vv === 'object') { var r = asText(vv); if (r) return r; }\n }\n try { var j = JSON.stringify(v); return (j === '{}') ? '' : j; }\n catch (e) { return ''; }\n }\n return '';\n}\nfunction trunc(s, n) {\n s = asText(s).replace(/\\\\s+/g, ' ').trim();\n n = n || 60;\n if (s.length > n) s = s.slice(0, n - 1) + '\\\\u2026';\n return s;\n}\nfunction el(tag, cls, css) {\n var n = document.createElement(tag);\n if (cls) n.className = cls;\n if (css) n.style.cssText = css;\n return n;\n}\nfunction byId(id) { return document.getElementById(id); }\n\n// Normalize any run status to one of: running | failed | completed | idle.\nfunction normStatus(s) {\n s = lower(s);\n if (s === 'running' || s === 'pending' || s === 'queued' || s === 'active' || s === 'in_progress') return 'running';\n if (s === 'failed' || s === 'error') return 'failed';\n if (s === 'completed' || s === 'done' || s === 'success' || s === 'succeeded') return 'completed';\n return 'idle';\n}\n\n// Per-agent hue: director-blue for the lead (index 0 / role matches), else cycle MEMBER_COLORS.\nfunction colorForRow(row, index) {\n if (row && row.colorHex) return row.colorHex;\n if (row && row.color) return row.color;\n var role = lower(row && (row.role || (row.agent && row.agent.role)) || '');\n var name = lower(row && (row.name || (row.agent && row.agent.name)) || '');\n var isLead = (index === 0) || /director|lead/.test(role) || /director|lead/.test(name);\n if (isLead) return DIRECTOR_COLOR;\n return memberColorHex(index - 1);\n}\n\n// Build a stable agent_id -> color map from an ordered roster (so logs/usage agree with the 3D).\nfunction colorMapFromRoster(roster) {\n var map = {};\n roster = Array.isArray(roster) ? roster : [];\n for (var i = 0; i < roster.length; i++) {\n var r = roster[i] || {};\n var id = String(r.id != null ? r.id : (r.agent_id != null ? r.agent_id : ''));\n if (id) map[id] = colorForRow(r, i);\n }\n return map;\n}\n\n// HH:MM:SS in en-GB 2-digit (real timestamps only).\nfunction fmtClock(iso) {\n if (!iso) return '';\n var d = new Date(String(iso).replace(' ', 'T') + (String(iso).indexOf('Z') < 0 && String(iso).indexOf('+') < 0 ? 'Z' : ''));\n if (isNaN(d.getTime())) { d = new Date(iso); }\n if (isNaN(d.getTime())) return '';\n try {\n return d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });\n } catch (e) {\n var p = function (n) { n = String(n); return n.length < 2 ? '0' + n : n; };\n return p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds());\n }\n}\n\n// duration_ms -> '142ms' / '1.2s' (real data only).\nfunction fmtDuration(ms) {\n var n = Number(ms);\n if (!isFinite(n) || n <= 0) return '';\n if (n < 1000) return Math.round(n) + 'ms';\n var s = n / 1000;\n return (s < 10 ? s.toFixed(1) : Math.round(s)) + 's';\n}\n\n// Parse a run.trace (JSON string -> array) into a flat step list; tolerate {director}/{steps} shapes.\nfunction traceSteps(trace) {\n if (typeof trace === 'string') { try { trace = JSON.parse(trace); } catch (e) { return []; } }\n if (Array.isArray(trace)) return trace;\n if (trace && Array.isArray(trace.steps)) return trace.steps;\n if (trace && Array.isArray(trace.director)) return trace.director;\n if (trace && trace.pipeline && Array.isArray(trace.pipeline)) return trace.pipeline;\n return [];\n}\n\n// Per-step glyph + short label for the STREAMING step lines in the logs feed.\n// Step shapes (cron + campaign): {t:'round'} | {t:'tool',name,args_preview,result_preview,ms}\n// | {t:'message',role,preview} | {t:'director'|'agent'|'synthesis'|'approval',name,preview,note}\nfunction stepGlyph(s) {\n var t = lower(s && s.t);\n if (t === 'tool' || (s && s.tool)) return 'bolt';\n if (t === 'message' || (s && s.role === 'assistant')) return 'chat_bubble';\n if (t === 'round') return 'radio_button_checked';\n if (t === 'director') return 'account_tree';\n if (t === 'agent') return 'smart_toy';\n if (t === 'synthesis') return 'merge';\n if (t === 'approval') return 'task_alt';\n return 'circle';\n}\n// One trace step -> short text. Returns '' for steps with no meaningful content (callers skip).\nfunction stepText(s) {\n if (!s) return '';\n var t = lower(s.t);\n if (t === 'round') return (s.n != null) ? ('round ' + s.n) : '';\n // asText() everywhere so an object-shaped name/preview never renders as\n // \"[object Object]\" (trunc also defends, but the bare \"nm + ' -> '\" concat\n // below would bypass it without this).\n if (t === 'tool' || s.tool) {\n var nm = asText(s.name || s.tool) || 'tool';\n var pv = asText(s.result_preview || s.preview || s.args_preview || '');\n return pv ? (trunc(nm, 28) + ' \\\\u2192 ' + trunc(pv, 90)) : trunc(nm, 60);\n }\n if (t === 'message' || s.role === 'assistant') {\n var mp = asText(s.preview || s.message || s.text || s.content || '');\n return mp ? trunc(mp, 120) : '';\n }\n var dn = asText(s.name || s.agent || '');\n var dp = asText(s.preview || s.note || s.result_preview || '');\n if (dn && dp) return trunc(dn, 28) + ' \\\\u2192 ' + trunc(dp, 90);\n if (dp) return trunc(dp, 120);\n if (dn) return trunc(dn, 60);\n return '';\n}\n\n// Material Symbols glyph span.\nfunction ms(name, size, color) {\n return '<span class=\"msym\" style=\"font-size:' + (size || 16) + 'px;' +\n (color ? 'color:' + color + ';' : '') + 'line-height:1;\">' + name + '</span>';\n}\n\n// Model-chip label from real data only: campaign.model -> first roster agent.model\n// -> honest 'default'. No bare 'auto' literal. '' = no campaign (caller hides chip).\nfunction resolveModelLabel(campaign) {\n if (!campaign) return '';\n var m = asText(campaign.model);\n if (m) return m;\n var agents = campaign.agents;\n if (Array.isArray(agents)) {\n for (var i = 0; i < agents.length; i++) {\n var a = agents[i] || {};\n var am = asText(a.model || (a.agent && a.agent.model) || '');\n if (am) return am;\n }\n }\n return 'default';\n}\n\n// ===========================================================================\n// createDash factory.\n// ===========================================================================\n\nexport function createDash(opts) {\n opts = opts || {};\n var startHandler = (typeof opts.onStartProject === 'function') ? opts.onStartProject : null;\n var chatHandler = (typeof opts.onChat === 'function') ? opts.onChat : null;\n var runHandler = (typeof opts.onRunCampaign === 'function') ? opts.onRunCampaign : null; // kicks off the team RUN\n\n // Resolve the 5 fixed shell containers (passed in or looked up by id).\n var elTopbar = opts.topbar || byId('world-topbar');\n var elLogs = opts.logs || byId('world-logs');\n var elScenehead = opts.scenehead || byId('world-scenehead');\n var elKanban = opts.kanban || byId('world-kanban');\n var elProject = opts.project || byId('world-project');\n\n var mounted = false;\n var colorMap = {}; // agent_id -> hex (from roster)\n var rosterCount = 0;\n var logFilter = ''; // text filter for the logs panel\n\n // Inner DOM handles (filled in mount()).\n var topModel = null, topTeam = null, topProject = null, topAuto = null;\n var logsList = null, logsEmpty = null, logsFilterInp = null;\n var kanbanCols = null;\n var projPhase = null, projBrief = null, projChips = null, projRoster = null,\n projUsageBig = null, projUsageSub = null, projUsageRows = null, projStartBtn = null,\n projTrace = null, projTraceBadge = null,\n sceneTeamBadge = null, sceneOut = null;\n\n // Director CHAT box (RIGHT column).\n var chatTranscript = null; // scrollable bubble area\n var chatInput = null; // text input\n var chatEmpty = null; // placeholder shown when no messages\n var chatStreamRow = null; // in-flight assistant bubble element (null when none open)\n var chatStreamBody = null; // the text node holder of the in-flight assistant bubble\n var chatStreamText = ''; // accumulated text of the in-flight assistant bubble\n var chatStreamTools = {}; // tool-name -> chip (flip running->done in place)\n var runBtn = null; // \"Run the Team\" / Execute button (in the Director chat card)\n var runBtnBusy = false; // true while a kick-off is in flight (brief \"running…\" state)\n\n // Keyed node caches (append-not-rebuild).\n var logNodes = {}; // run id -> row element\n var logOrder = []; // newest-first run ids (cap the DOM size)\n // Streaming-trace state per run id — survives in-place row replacement so step lines are\n // APPENDED (not re-rendered) as the backend streams more steps into run.trace.\n var streamState = {}; // run id -> { count: <# step lines already rendered> }\n var logOpen = {}; // run id -> bool (disclosure open) — persists across in-place row replace\n var taskNodes = {}; // task id -> card element\n var usageNodes = {}; // agent_id -> usage row element\n var rosterNodes = {}; // agent_id -> roster row element\n var toastRegion = null;\n\n // ---- one-time stylesheet ----------------------------------------------\n function injectStyle() {\n if (byId('world-dash-style')) return;\n var st = document.createElement('style');\n st.id = 'world-dash-style';\n st.textContent =\n '@keyframes wdPulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}' +\n '.wd-pulse{animation:wdPulse 1.6s ease-in-out infinite;}' +\n '@keyframes wdFadeIn{0%{opacity:0;transform:translateY(-3px);}100%{opacity:1;transform:translateY(0);}}' +\n '.wd-scroll{overflow-y:auto;}' +\n '.wd-scroll::-webkit-scrollbar{width:7px;}' +\n '.wd-scroll::-webkit-scrollbar-thumb{background:rgba(20,30,60,0.16);border-radius:4px;}' +\n '.wd-label{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:' + TXT_LABEL + ';}' +\n '.wd-tab{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:5px 9px;' +\n 'border-radius:8px;cursor:pointer;border:none;background:transparent;color:' + TXT_MUTED + ';}' +\n '.wd-tab.is-on{background:' + USER_COLOR_LIGHT + ';color:' + DIRECTOR_COLOR + ';}' +\n '.wd-card{background:#fff;border:1px solid ' + PANEL_BORDER + ';border-radius:10px;}' +\n '.wd-btn{cursor:pointer;border:none;font-family:inherit;}' +\n '.wd-chev{transition:transform .18s ease;display:inline-block;}' +\n '.wd-chev.is-open{transform:rotate(90deg);}' +\n '.wd-mono{font-family:' + MONO + ';font-variant-numeric:tabular-nums;}' +\n // chat bubbles\n '.wd-bub{max-width:88%;border-radius:13px;padding:8px 11px;font-size:12.5px;line-height:1.5;' +\n 'white-space:pre-wrap;word-break:break-word;animation:wdFadeIn .25s ease;}' +\n '.wd-bub-user{align-self:flex-end;background:' + DIRECTOR_COLOR + ';color:#fff;border-bottom-right-radius:5px;}' +\n '.wd-bub-ai{align-self:flex-start;background:#fff;color:' + TXT_DARK + ';border:1px solid ' + PANEL_BORDER + ';border-bottom-left-radius:5px;}' +\n '.wd-bub-row{display:flex;flex-direction:column;}' +\n '.wd-bub-name{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;margin:0 3px 2px;color:' + TXT_MUTED + ';}' +\n // streaming caret\n '@keyframes wdBlink{0%,100%{opacity:1}50%{opacity:0}}' +\n '.wd-caret{display:inline-block;width:6px;height:13px;margin-left:1px;vertical-align:-2px;background:' + DIRECTOR_COLOR + ';animation:wdBlink 1s step-end infinite;border-radius:1px;}' +\n // collapsible log detail\n '.wd-log-det{overflow:hidden;}' +\n '.wd-log-toggle{display:inline-flex;align-items:center;gap:3px;cursor:pointer;font-size:10px;font-weight:800;' +\n 'letter-spacing:.3px;text-transform:uppercase;color:' + DIRECTOR_COLOR + ';background:transparent;border:none;' +\n 'padding:3px 0 0;margin-top:4px;font-family:inherit;}';\n document.head.appendChild(st);\n }\n\n // ===========================================================================\n // MOUNT — build the static chrome of every panel once.\n // ===========================================================================\n function mount(els) {\n if (mounted) return;\n if (els) {\n elTopbar = els.topbar || elTopbar;\n elLogs = els.logs || elLogs;\n elScenehead = els.scenehead || elScenehead;\n elKanban = els.kanban || elKanban;\n elProject = els.project || elProject;\n }\n mounted = true;\n injectStyle();\n buildTopbar();\n buildScenehead();\n buildLogs();\n buildKanban();\n buildProject();\n buildToast();\n }\n\n var KAN_COLS = [\n { key: 'scheduled', label: 'Scheduled' },\n { key: 'on_hold', label: 'On Hold' },\n { key: 'in_progress', label: 'In Progress' },\n { key: 'done', label: 'Done' }\n ];\n` + DASH_VIEW + DASH_CHAT + `\n // ---- toast ------------------------------------------------------------\n function buildToast() {\n if (toastRegion) return;\n toastRegion = el('div', null, 'position:fixed;top:64px;right:16px;z-index:50;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;');\n toastRegion.id = 'world-dash-toast';\n document.body.appendChild(toastRegion);\n }\n function toast(msg) {\n if (!toastRegion) buildToast();\n var t = el('div', null, 'pointer-events:auto;display:flex;align-items:center;gap:8px;max-width:330px;' +\n 'background:#fff;border:1px solid rgba(52,168,83,0.45);border-radius:12px;padding:11px 15px;' +\n 'box-shadow:0 12px 30px rgba(20,30,60,0.22);font-size:13px;font-weight:600;color:' + TXT_DARK + ';' +\n 'opacity:0;transform:translateX(12px);transition:opacity .3s,transform .3s;');\n t.innerHTML = '<span style=\"width:9px;height:9px;border-radius:50%;background:' + STATUS_RUNNING + ';box-shadow:0 0 8px ' + STATUS_RUNNING + ';flex:0 0 auto;\"></span><span>' + esc(msg) + '</span>';\n toastRegion.appendChild(t);\n requestAnimationFrame(function () { t.style.opacity = '1'; t.style.transform = 'translateX(0)'; });\n setTimeout(function () {\n t.style.opacity = '0'; t.style.transform = 'translateX(12px)';\n setTimeout(function () { if (t.parentNode) t.parentNode.removeChild(t); }, 340);\n }, 5000);\n }\n\n // ---- Director chat / start-project hooks ------------------------------\n function triggerStart() {\n // The Director chat box IS the new-project entry point now, so ALWAYS focus + prime it.\n if (chatInput) {\n if (!chatInput.value) chatInput.value = 'Start a new project: ';\n chatInput.focus();\n try { chatInput.setSelectionRange(chatInput.value.length, chatInput.value.length); } catch (e) {}\n try { chatInput.dispatchEvent(new Event('input')); } catch (e2) {}\n }\n if (startHandler) { try { startHandler(); } catch (e3) {} }\n }\n // Kick off the team RUN (campaign execution) via opts.onRunCampaign(). Guarded if absent. Brief\n // \"running…\" state; the live run surfaces via Orchestration trace / Activity / kanban as it streams.\n function triggerRunCampaign() {\n if (runBtnBusy) return;\n if (!runHandler) { toast('Run is not wired up yet'); return; }\n setRunBtnBusy();\n var settled = false;\n var done = function () { if (settled) return; settled = true; setRunBtnIdle(); };\n // Tie feedback to the REAL run lifecycle: runHandler() returns a Promise that\n // resolves when the campaign-run POST is accepted and rejects on error. Toast\n // real success/failure — no fabricated fixed-duration spinner.\n try {\n var out = runHandler();\n if (out && typeof out.then === 'function') {\n out.then(\n function () { done(); toast('Run started'); },\n function () { done(); toast('Could not start the run'); }\n );\n } else {\n // Sync handler returned without throwing: kick-off accepted (no fake timer).\n done(); toast('Run started');\n }\n } catch (e) { done(); toast('Could not start the run'); }\n }\n // Send the composed message: show the USER bubble at once, then hand to onChat (which streams\n // the reply back via chatStream{Start,Chunk,End} so it's visible).\n function submitChat() {\n if (!chatInput) return;\n var msg = (chatInput.value || '').trim();\n if (!msg) return;\n chatInput.value = '';\n chatInput.style.height = 'auto';\n // 1) user message — immediate.\n chatAppend('user', msg);\n // 2) hand off to the entry (it owns the /api/chat/stream pump).\n if (chatHandler) {\n try {\n var out = chatHandler(msg);\n if (out && typeof out.then === 'function') out.then(function () {}, function () {});\n } catch (e) {}\n }\n }\n function onStartProject(fn) { if (typeof fn === 'function') startHandler = fn; return startHandler; }\n function onChat(fn) { if (typeof fn === 'function') chatHandler = fn; return chatHandler; }\n function onRunCampaign(fn) { if (typeof fn === 'function') runHandler = fn; return runHandler; }\n\n // ===========================================================================\n // public API\n // ===========================================================================\n return {\n mount: mount,\n renderTopbar: renderTopbar,\n renderLogs: renderLogs,\n renderActivity: renderLogs, // alias (task spec: renderActivity)\n appendLogs: appendLogs,\n renderKanban: renderKanban,\n renderBoard: renderKanban, // alias (task spec: renderBoard)\n renderProject: renderProject,\n renderTrace: renderTrace,\n setPhase: setPhase,\n toast: toast,\n chatAppend: chatAppend,\n chatStreamStart: chatStreamStart,\n chatStreamChunk: chatStreamChunk,\n chatStreamEnd: chatStreamEnd,\n chatStreamTool: chatStreamTool,\n onStartProject: onStartProject,\n onChat: onChat,\n onRunCampaign: onRunCampaign\n };\n}\n`;\n}\n",[238],"b505f510-5e66-11f1-8f10-1607ee4eb77e","frontend_world_agents.ts","1cd4a8ac-5da0-11f1-841b-1607ee4eb77e",890,["D",1780393064155],11,"// frontend_world_agents.ts — the AGENTS module of the split \"/world\" 3D office.\n// getWorldAgentsJS() returns ONE backtick template-literal browser ES-module exporting\n// createAgents(world, office). It loads character.glb (GLTFLoader+DRACO), clones the WHOLE rig per\n// agent via SkeletonUtils (plain .clone() breaks skinning), and drives ONE AnimationMixer each with\n// the named clips.\n//\n// MOVEMENT + SIT — FAITHFUL to the-delegation (NavMeshManager + PathAgent + CharacterController +\n// CharacterStateMachine + NpcAgentDriver). ALL agent movement follows the office navmesh:\n// - We build a three-pathfinding zone from office.getNavMeshGeometry() (the real walkable polygons\n// baked from office.glb). findPath() returns waypoints between two world points; agents follow\n// those waypoints (delta-scaled at the-delegation speed, advancing a node within PATH_NODE_ARRIVAL\n// = 0.25 XZ, snapping within 0.2) so they NEVER walk through walls. There is NO free random wander.\n// - Behaviour: each agent has a FIXED home sit_work POI (its own desk, assigned by office.layout\n// index, nearest-matched and stable across re-syncs). When its REAL run is RUNNING it paths to\n// THAT same sit_work desk and sits doing Sit_Work (interacting with the desk). When it has NO\n// work (idle / completed / none) it is FREE: it ROAMS between the poi-idle-area POIs (hub /\n// boardroom / canteen / workspace) and STANDS / idles / looks around via the navmesh — it does\n// NOT sit at the work desk (light ambient roaming, never stuck sitting). Disabled agents rest\n// seated (Sit_Idle) at their seat. Every move is via the navmesh.\n// - Arriving at a SIT POI snaps the avatar to the POI's exact world position + quaternion, marks it\n// SEATED, plays the one-shot 'Sit' (sit_down) clip, then auto-advances to the looping Sit_Work /\n// Sit_Idle clip — a real interaction with the chair. POIs are occupied on claim, released on\n// stand-up, so two agents never share a seat.\n// - FALLBACK: if three-pathfinding fails to load OR the navmesh geometry is unavailable, agents do\n// NOT walk at all — they simply sit at their assigned POIs (sit_work when running, else sit_idle /\n// idle in place). With no straight-line walking, they still NEVER clip walls.\n//\n// HANDOFF (ADDITIVE, optional). Two complementary cues, both safe to call often:\n// - playHandoff(orderedIds): a pure VISUAL overlay flashing a brief glowing beam (thin emissive\n// tube + travelling dot) from each agent head to the next (Director->A->B->C) using entries()\n// head positions, auto-fading + disposing after ~1.5s per hop. A separate disposable layer on\n// world.group; movement/sit/sync/setStatus/entries are NOT touched; no-op while one is playing.\n// - handoffWalk(fromId, toId): a PHYSICAL cue — the GIVER walks (navmesh) to the RECEIVER's\n// desk/POI, faces them, plays Talk for ~2s, then walks back to its OWN desk and resumes roaming.\n// Runs ONLY for a free (non-running, non-disabled) giver and ONLY when a navmesh exists, so it\n// never disturbs a working/seated agent and never clips walls. A 3-phase per-agent machine on\n// entry.handoff, advanced in update() (guarded). Refused (returns false) when there is no path.\n//\n// CAP/HAT: cap + headphones are always hidden (showCap=false / showPhones=false) — clean blob head.\n// Placement is DETERMINISTIC: each avatar's home is office.layout(n)[i]; the navmesh decides the path\n// shape; runtime PRNG only times ambient decisions + picks among free POIs.\n//\n// FOOTGUNS honoured: NO TS annotations inside the returned string; NO unescaped backticks or ${...}\n// inside it (string concat everywhere); emojis as \\uXXXX escapes; deterministic placement. <80KB.\n\nexport function getWorldAgentsJS(): string {\n return `\nimport * as THREE from 'three';\nimport { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';\nimport { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';\nimport { clone as cloneSkinned } from 'three/addons/utils/SkeletonUtils.js';\n\n// ---- three-pathfinding (pinned, shares the host's three@0.160.0). Loaded in a try/catch so a CDN\n// failure degrades gracefully to POI-only (no-walk) behaviour instead of breaking the whole module. -\nvar Pathfinding = null;\ntry {\n var _pfMod = await import('https://esm.sh/three-pathfinding@1.3.0?deps=three@0.160.0');\n Pathfinding = (_pfMod && _pfMod.Pathfinding) ? _pfMod.Pathfinding : (_pfMod && _pfMod.default ? _pfMod.default : null);\n} catch (e) { Pathfinding = null; }\n\n// ---- shared conventions (must match the other 4 world modules) -------------------------------\nvar DIRECTOR_COLOR = '#4285F4';\nvar MEMBER_COLORS = ['#34A853','#FBBC05','#EA4335','#F59E0B','#40D5AD','#E64347','#E643C5','#7CE630','#5E888E'];\nfunction memberColorHex(i) {\n var L = MEMBER_COLORS.length;\n return MEMBER_COLORS[((i % L) + L) % L];\n}\nfunction lower(s) { return String(s == null ? '' : s).toLowerCase().trim(); }\nfunction isLeadAgent(a, i) {\n if (i === 0) return true;\n var r = lower(a && (a.role || a.name));\n return /director|lead/.test(r);\n}\nfunction isDisabled(a) { return a && (a.enabled === 0 || a.enabled === false || a.enabled === '0' || a.status === 'disabled'); }\n// DIRECTOR ENTRY: an explicit roster flag __director===true marks the meeting Director. It does NOT\n// claim a member sit_work desk — it stands/idles at the HEAD of the meeting table, facing the team.\nfunction isDirectorEntry(a) { return !!(a && a.__director === true); }\n\n// DAD JOKES — short, family-friendly one-liners spoken when two FREE agents meet 1-to-1 (a handoff\n// talk or an ambient social encounter). Picked DETERMINISTICALLY by agent index + a runtime counter\n// (jokeCounter, bumped each time a joke is set) so the same agent says different jokes over time.\nvar DAD_JOKES = [\n 'I only know 25 letters of the alphabet. I dont know y.',\n 'I used to hate facial hair, but then it grew on me.',\n 'I would tell you a chemistry joke, but I know I wouldnt get a reaction.',\n 'Why dont skeletons fight? They dont have the guts.',\n 'I am reading a book about anti-gravity. Its impossible to put down.',\n 'What do you call fake spaghetti? An impasta.',\n 'I dont trust stairs. Theyre always up to something.',\n 'Why did the scarecrow win an award? He was outstanding in his field.',\n 'I made a pencil with two erasers. It was pointless.',\n 'How does a penguin build its house? Igloos it together.',\n 'I told my computer I needed a break, and it froze.',\n 'Why did the bicycle fall over? It was two tired.',\n 'I burned my Hawaiian pizza. I should have used aloha temperature.',\n 'What did the ocean say to the beach? Nothing, it just waved.',\n 'I used to play piano by ear, but now I use my hands.'\n];\nvar jokeCounter = 0;\nvar SAY_LINE_MS = 3000; // a sayLine bubble lasts ~3s, then clears.\n\n// Normalize a run/agent status to one of: running | failed | completed | idle.\nfunction normStatus(s) {\n s = lower(s);\n if (s === 'running' || s === 'pending' || s === 'active' || s === 'in_progress' || s === 'queued') return 'running';\n if (s === 'failed' || s === 'error') return 'failed';\n if (s === 'completed' || s === 'done' || s === 'success' || s === 'succeeded') return 'completed';\n return 'idle';\n}\n\n// Asset URLs (character GLB only — the floor GLB is owned by the office module).\nvar DRACO_DECODER = 'https://www.gstatic.com/draco/versioned/decoders/1.5.6/';\nvar GLB_CHARACTER = 'https://cdn.jsdelivr.net/gh/arturitu/the-delegation@16c97c43d1c32fae797ace4ed8058157e1126c96/public/models/character.glb';\n\n// Units / scale (shared): character ~1.32 tall, feet at y=0, head anchor ~1.5.\nvar CHAR_TARGET_H = 1.32;\nvar HEAD_Y = 1.5;\nvar RING_Y = 0.02;\n\n// ---- the-delegation movement constants (real numbers from src/simulation/constants.ts) -------\nvar NAVMESH_ZONE = 'level'; // three-pathfinding zone id\nvar PATH_NODE_ARRIVAL = 0.25; // XZ dist at which a path NODE is reached (PathAgent.update)\nvar SNAP_RADIUS = 0.2; // GPU waypoint snap threshold in the original compute shader\nvar ARRIVAL_RADIUS = 0.3; // (kept for parity; arrival is detected by node consumption)\n// The original moves 0.045 world units / compute-dispatch (~60fps) -> ~2.7 u/s, frame-rate dependent.\n// Per the reimplementation note we DELTA-SCALE it for stable WebGL motion at any frame rate.\nvar MOVE_SPEED = 2.7; // world units / second (delta-scaled)\nvar MAX_AGENTS = 32; // raised: distributed area-slot angle cap (NpcAgentDriver). Higher =\n // more agents fan out around an idle-area POI without overlapping.\nvar SLOT_RADIUS = 1.0; // base radial distance of a roam slot from its area-POI center.\n\n// Behaviour modes (the-delegation AgentBehavior). On the CPU here: IDLE/SEATED don't move, GOTO does.\nvar B_IDLE = 0, B_GOTO = 1, B_SEATED = 2;\n\n// Named clips present in character.glb.\nvar CLIP_NAMES = ['Happy','Idle','Listen','LookAround','Pick','Sad','Sit','Sit_Idle','Sit_Work','Talk','Walk','Wave'];\n\n// State -> ordered clip preferences (lower-cased clip lookup).\nvar CLIP_FOR = {\n sit_down: ['sit', 'sit_idle', 'idle'],\n sit_work: ['sit_work', 'sit', 'sit_idle', 'idle'],\n sit_idle: ['sit_idle', 'sit', 'idle'],\n idle: ['idle', 'lookaround', 'sit_idle'],\n look: ['lookaround', 'idle'],\n walk: ['walk', 'idle'],\n talk: ['talk', 'happy', 'wave', 'idle'],\n listen: ['listen', 'lookaround', 'idle'],\n wave: ['wave', 'happy', 'idle'],\n happy: ['happy', 'wave', 'idle']\n};\n// States that hold a seated pose (used to detect stand-up so we release the chair).\nfunction isSeatedState(s) { return s === 'sit_down' || s === 'sit_idle' || s === 'sit_work'; }\n// Non-looping states play once then auto-advance (sit_down -> the looping sit_* clip).\nfunction isOneShot(s) { return s === 'sit_down' || s === 'look' || s === 'wave' || s === 'happy'; }\nfunction nextStateAfter(s) { return s === 'sit_down' ? null : 'idle'; }\n\n// Per-agent hue helpers ------------------------------------------------------------------------\nfunction brightTint(colorHex) {\n return new THREE.Color(colorHex).lerp(new THREE.Color(0xffffff), 0.10);\n}\nfunction capTint(colorHex) {\n return new THREE.Color(colorHex).offsetHSL(0, 0.06, -0.18);\n}\nfunction isBodyPart(name) {\n var nm = lower(name);\n return nm === 'body' || nm.indexOf('body') !== -1;\n}\nfunction isCapPart(name) {\n var nm = lower(name);\n return nm === 'cap' || nm.indexOf('cap') !== -1 || nm.indexOf('hat') !== -1 ||\n nm.indexOf('beanie') !== -1 || nm.indexOf('helmet') !== -1;\n}\nfunction isHeadphonePart(name) {\n var nm = lower(name);\n return nm.indexOf('headphone') !== -1 || nm.indexOf('headset') !== -1;\n}\nfunction isFacePart(name) {\n var nm = lower(name);\n return nm.indexOf('eye') !== -1 || nm.indexOf('mouth') !== -1 || nm.indexOf('teeth') !== -1 ||\n nm.indexOf('face') !== -1 || nm.indexOf('pupil') !== -1 || nm.indexOf('brow') !== -1;\n}\n\nexport function createAgents(world, office) {\n var template = null; // gltf.scene rig template\n var clips = null; // AnimationClip[]\n var assetsReady = false;\n\n // ---- navmesh / pathfinding state (three-pathfinding) --------------------------------------\n var pf = null; // Pathfinding instance (null until built / if lib failed)\n var navReady = false; // true once a zone is set on pf\n var navTried = false; // we only attempt to build the zone once per geometry presence\n\n // POI bookkeeping (mirrors PoiManager): id -> { ...poi, occupiedBy }.\n var poiById = {}; // id -> poi def (with live occupiedBy)\n var poiList = []; // ordered poi defs\n var poisReady = false;\n\n // id -> entry record.\n var byId = {};\n var order = []; // ordered list of ids (roster order) — drives seat index\n var spotlightId = null; // currently spotlit (running) speaker id\n\n // ---- OPTIONAL handoff-beam overlay (ADDITIVE — never read by movement/sit/sync) ------------\n // A glowing beam (thin emissive tube + a travelling dot) is drawn Director->A->B->C between\n // consecutive agents' head positions, one hop at a time, ~1.5s each, then auto-faded + disposed.\n // It is a pure visual overlay added to world.group; nothing in stepMovement/driveAgent/sync ever\n // touches it. playHandoff() is a no-op while a sequence is already playing (safe to call often).\n var HANDOFF_HOP_MS = 1500; // duration per hop\n var HANDOFF_FADE_FRAC = 0.35; // last fraction of a hop spent fading out\n var handoffActive = false; // true while a sequence is animating\n var handoffHops = []; // [{ a:Vector3, b:Vector3 }] head endpoints per hop\n var handoffIndex = 0; // current hop being drawn\n var handoffElapsed = 0; // ms elapsed within the current hop\n var handoffBeam = null; // { tube, dot, tubeMat, dotMat, tubeGeo, dotGeo } or null\n\n // ---- HANDOFF-WALK state (ADDITIVE physical cue) --------------------------------------------\n // When work passes giver -> receiver, the GIVER physically WALKS (navmesh) to the RECEIVER's\n // desk/POI, faces them, plays Talk/Listen for ~2s, then walks back to its OWN desk and resumes.\n // It runs ONLY for free (non-running, non-disabled) givers so it never disturbs a working/seated\n // agent. Per-agent flag entry.handoff carries the little 3-phase machine; TALK_MS sets the pause.\n var HANDOFF_TALK_MS = 2000; // ~2s facing + Talk/Listen at the receiver\n\n // ---- loadAssets() : load character.glb once ------------------------------------------------\n function loadGLB(url) {\n return new Promise(function (resolve) {\n try {\n var draco = new DRACOLoader();\n draco.setDecoderPath(DRACO_DECODER);\n var loader = new GLTFLoader();\n loader.setDRACOLoader(draco);\n loader.load(url, function (gltf) { resolve(gltf); }, undefined, function () { resolve(null); });\n } catch (e) { resolve(null); }\n });\n }\n async function loadAssets() {\n if (assetsReady) return;\n var gltf = await loadGLB(GLB_CHARACTER);\n if (gltf && gltf.scene) {\n template = gltf.scene;\n clips = (gltf.animations && gltf.animations.length) ? gltf.animations : [];\n template.traverse(function (o) {\n if (o.isMesh) { o.castShadow = true; o.receiveShadow = true; o.frustumCulled = false; }\n });\n }\n assetsReady = true;\n // The navmesh geometry + POIs may already be available (office loads in parallel); try now.\n tryBuildNav();\n refreshPois();\n }\n\n // ---- build the three-pathfinding zone from office.getNavMeshGeometry() --------------------\n // NavMeshManager.loadFromGeometry: Pathfinding.createZone(geometry) + setZoneData(NAVMESH_ZONE).\n // The office bakes the navmesh into WORLD coords, matching the world-space POI positions. We try\n // lazily because the office GLB loads in parallel with the character GLB — the geometry may not be\n // ready at loadAssets() time, so update()/sync() retry until it is (or give up to the fallback).\n function tryBuildNav() {\n if (navReady || navTried && !Pathfinding) return;\n if (!Pathfinding) { navTried = true; return; }\n var geo = null;\n try { geo = office.getNavMeshGeometry ? office.getNavMeshGeometry() : null; } catch (e) { geo = null; }\n if (!geo) return; // geometry not ready yet — retry next frame\n navTried = true;\n try {\n pf = new Pathfinding();\n var zone = Pathfinding.createZone(geo);\n pf.setZoneData(NAVMESH_ZONE, zone);\n navReady = true;\n } catch (e) { pf = null; navReady = false; }\n }\n\n // findPath(from, to) -> waypoints EXCLUDING start (three-pathfinding shifts the start off), [] on\n // any failure. Mirrors NavMeshManager.findPath: resolve the group of 'from', then findPath. (The\n // library's getGroup returns the NEAREST group when the point is slightly off the mesh, so paths\n // are robust to sub-unit POI offsets.)\n function findPath(from, to) {\n if (!navReady || !pf) return [];\n try {\n var groupID = pf.getGroup(NAVMESH_ZONE, from);\n if (groupID === null || groupID === undefined) return [];\n var path = pf.findPath(from, to, NAVMESH_ZONE, groupID);\n if (!path || path.length === 0) return [];\n return path;\n } catch (e) { return []; }\n }\n\n // ---- POI mirror (PoiManager) --------------------------------------------------------------\n // Pull the REAL POIs from the office (id/position/quaternion/arrivalState/kind). We keep a live\n // 'occupiedBy' per POI so two agents never claim the same seat. refreshPois() preserves existing\n // occupancy across re-reads.\n function refreshPois() {\n var src = [];\n try { src = (office.getPois ? office.getPois() : []) || []; } catch (e) { src = []; }\n if (!src.length) return;\n var prevOcc = {};\n for (var id in poiById) { if (poiById[id]) prevOcc[id] = poiById[id].occupiedBy; }\n poiById = {};\n poiList = [];\n for (var i = 0; i < src.length; i++) {\n var p = src[i];\n var def = {\n id: p.id,\n position: p.position.clone ? p.position.clone() : new THREE.Vector3(p.position.x, p.position.y, p.position.z),\n quaternion: p.quaternion.clone ? p.quaternion.clone() : new THREE.Quaternion(p.quaternion.x, p.quaternion.y, p.quaternion.z, p.quaternion.w),\n arrivalState: p.arrivalState,\n kind: p.kind,\n type: p.type,\n label: p.label,\n occupiedBy: (prevOcc[p.id] !== undefined ? prevOcc[p.id] : null)\n };\n poiById[p.id] = def;\n poiList.push(def);\n }\n poisReady = true;\n }\n function poiOccupy(id, agentKey) { var p = poiById[id]; if (p) p.occupiedBy = agentKey; }\n function poiReleaseAll(agentKey) {\n for (var id in poiById) { var p = poiById[id]; if (p && p.occupiedBy === agentKey) p.occupiedBy = null; }\n }\n // Free POIs of a kind (kind 'sit_idle' | 'area' ...) for this agent (its own claim counts as free).\n function freePoisByKind(kind, agentKey) {\n var out = [];\n for (var i = 0; i < poiList.length; i++) {\n var p = poiList[i];\n if (p.kind !== kind) continue;\n if (p.occupiedBy === null || p.occupiedBy === agentKey) out.push(p);\n }\n return out;\n }\n // 'idle-area' POIs: area POIs OR idle-typed POIs (poi-idle-area-*). We treat both as wanderable\n // standing spots so agents path to an open part of the room, idle, then return.\n function freeIdleAreaPois(agentKey) {\n var out = [];\n for (var i = 0; i < poiList.length; i++) {\n var p = poiList[i];\n var isArea = (p.kind === 'area') || (String(p.id).indexOf('area') !== -1 && p.arrivalState === 'idle');\n if (!isArea) continue;\n if (p.occupiedBy === null || p.occupiedBy === agentKey) out.push(p);\n }\n return out;\n }\n function pickRandom(arr) { return (arr && arr.length) ? arr[Math.floor(Math.random() * arr.length) % arr.length] : null; }\n function yawFromQuat(q) {\n var f = new THREE.Vector3(0, 0, 1).applyQuaternion(q);\n return Math.atan2(f.x, f.z);\n }\n\n // ---- avatar construction (unchanged: clone rig, tint body only, accessories hidden) --------\n function tintInPlace(o, kind, bright, accCol, accentMats) {\n if (!o.material) return;\n if (Array.isArray(o.material)) {\n o.material = o.material.map(function (mm) { return mm ? mm.clone() : mm; });\n for (var ai = 0; ai < o.material.length; ai++) editMat(o.material[ai], kind, bright, accCol, accentMats);\n } else {\n o.material = o.material.clone();\n editMat(o.material, kind, bright, accCol, accentMats);\n }\n }\n function editMat(cm, kind, bright, accCol, accentMats) {\n if (!cm) return;\n if (kind === 'body') {\n if (cm.color) cm.color.copy(bright);\n if ('map' in cm) cm.map = null;\n if ('roughness' in cm) cm.roughness = 0.6;\n if ('metalness' in cm) cm.metalness = 0.0;\n if ('envMapIntensity' in cm) cm.envMapIntensity = 0.45;\n if (cm.emissive) cm.emissive.setRGB(0, 0, 0);\n if ('emissiveIntensity' in cm) cm.emissiveIntensity = 0.0;\n cm.needsUpdate = true;\n accentMats.push(cm);\n } else if (kind === 'cap' || kind === 'headphone') {\n if (cm.color) cm.color.copy(accCol);\n if ('map' in cm) cm.map = null;\n if ('roughness' in cm) cm.roughness = 0.55;\n if ('metalness' in cm) cm.metalness = 0.0;\n if ('envMapIntensity' in cm) cm.envMapIntensity = 0.45;\n if (cm.emissive) cm.emissive.setRGB(0, 0, 0);\n cm.needsUpdate = true;\n } else {\n if ('envMapIntensity' in cm) cm.envMapIntensity = 0.45;\n }\n }\n function classify(o) {\n var mn = o.material && !Array.isArray(o.material) ? (o.material.name || '') : '';\n if (isFacePart(o.name) || isFacePart(mn)) return 'face';\n if (isHeadphonePart(o.name) || isHeadphonePart(mn)) return 'headphone';\n if (isCapPart(o.name) || isCapPart(mn)) return 'cap';\n if (isBodyPart(o.name) || isBodyPart(mn)) return 'body';\n return 'misc';\n }\n function buildAvatar(colorHex, isLead) {\n var g = new THREE.Group();\n var model = cloneSkinned(template);\n var bright = brightTint(colorHex);\n var accCol = capTint(colorHex);\n var accentMats = [];\n var showCap = false; // cap REMOVED — clean blob head\n var showPhones = false; // headphones REMOVED too\n model.traverse(function (o) {\n if (o.isMesh && o.material) {\n var kind = classify(o);\n if (kind === 'cap') {\n o.visible = showCap;\n o.frustumCulled = false;\n if (showCap) { tintInPlace(o, 'cap', bright, accCol, accentMats); o.castShadow = true; o.receiveShadow = true; }\n return;\n }\n if (kind === 'headphone') {\n o.visible = showPhones;\n o.frustumCulled = false;\n if (showPhones) { tintInPlace(o, 'headphone', bright, accCol, accentMats); o.castShadow = true; o.receiveShadow = true; }\n return;\n }\n tintInPlace(o, kind, bright, accCol, accentMats);\n o.castShadow = true; o.receiveShadow = true;\n o.frustumCulled = false;\n }\n });\n model.updateMatrixWorld(true);\n var box = new THREE.Box3().setFromObject(model);\n var size = new THREE.Vector3(); box.getSize(size);\n var h = size.y || 1;\n model.scale.setScalar(CHAR_TARGET_H / h);\n model.updateMatrixWorld(true);\n var box2 = new THREE.Box3().setFromObject(model);\n if (isFinite(box2.min.y)) model.position.y -= box2.min.y;\n g.add(model);\n\n var mixer = new THREE.AnimationMixer(model);\n var actions = {};\n if (clips && clips.length) {\n for (var i = 0; i < clips.length; i++) {\n var clip = clips[i];\n var nm = lower(clip.name) || ('clip' + i);\n actions[nm] = mixer.clipAction(clip);\n if (i === 0) actions.__first = actions[nm];\n }\n }\n return { group: g, model: model, mixer: mixer, actions: actions, accentMats: accentMats };\n }\n\n function buildRing(colorHex) {\n var col = new THREE.Color(colorHex);\n var mat = new THREE.MeshStandardMaterial({\n color: col.clone(),\n emissive: col.clone(),\n emissiveIntensity: 0.6,\n roughness: 0.5,\n metalness: 0.0,\n transparent: true,\n opacity: 0.92\n });\n var geo = new THREE.RingGeometry(0.45, 0.62, 40);\n var ring = new THREE.Mesh(geo, mat);\n ring.rotation.x = -Math.PI / 2;\n ring.position.y = RING_Y;\n ring.receiveShadow = false;\n ring.castShadow = false;\n return { mesh: ring, mat: mat };\n }\n\n // ---- animation state machine (CharacterStateMachine) ---------------------------------------\n function resolveAction(actions, state) {\n if (!actions) return null;\n var cands = CLIP_FOR[state] || [state, 'idle'];\n for (var i = 0; i < cands.length; i++) {\n if (actions[cands[i]]) return actions[cands[i]];\n }\n return actions.__first || null;\n }\n function clipDurationFor(entry, state) {\n var a = resolveAction(entry.actions, state);\n if (a && a.getClip) { var c = a.getClip(); if (c && c.duration > 0) return c.duration; }\n return 1.0;\n }\n // playState: cross-fade to the resolved clip. One-shot states (sit_down/look/wave/happy) play once\n // (LoopOnce, clampWhenFinished) and arm a stateTimer; looping states repeat. Standing up from a\n // seated state releases the chair (poiReleaseAll), faithful to CharacterController.play().\n function playState(entry, state) {\n if (entry.animState === state && entry.active) return;\n // Stand-up: leaving a seated state for a non-seated one frees the chair.\n if (isSeatedState(entry.animState) && !isSeatedState(state)) {\n poiReleaseAll(entry.key);\n if (entry.homePoiId && poiById[entry.homePoiId] && poiById[entry.homePoiId].occupiedBy === entry.key) {\n // homePoiId is re-claimed only on sitting; releaseAll already cleared it.\n }\n }\n entry.animState = state;\n var oneShot = isOneShot(state);\n entry.stateTimer = oneShot ? clipDurationFor(entry, state) : 0;\n var next = resolveAction(entry.actions, state);\n if (!next) return;\n if (entry.active === next) {\n // same clip object reused (e.g. sit -> sit): just restart for one-shots.\n if (oneShot) { next.reset(); next.setLoop(THREE.LoopOnce, 1); next.clampWhenFinished = true; next.enabled = true; next.play(); }\n return;\n }\n next.reset();\n if (oneShot) { next.setLoop(THREE.LoopOnce, 1); next.clampWhenFinished = true; }\n else { next.setLoop(THREE.LoopRepeat, Infinity); next.clampWhenFinished = false; }\n next.enabled = true;\n next.timeScale = (state === 'walk') ? 1.1 : 1.0;\n next.fadeIn(0.3).play();\n if (entry.active) entry.active.fadeOut(0.3);\n entry.active = next;\n }\n\n // ---- placement (DETERMINISTIC — office.layout is the single source of truth) ---------------\n function placeEntry(entry, seat) {\n var g = entry.object3D;\n g.position.set(seat.x, 0, seat.z);\n g.rotation.y = seat.angle;\n entry.seat = seat;\n entry.deskPos = new THREE.Vector3(seat.x, 0, seat.z);\n entry.basePos = new THREE.Vector3(seat.x, 0, seat.z);\n entry.baseAngle = seat.angle;\n }\n\n // ---- DIRECTOR seat: the HEAD of the meeting table. office.meetCenter is ALREADY the head-of-table\n // anchor — the office pushed it back from the boardroom POI along the table's AUTHORED forward axis\n // by a table half-length (and clamped it to the footprint). office.getMeetFacing() is the live yaw\n // to look DOWN the table toward the gathered team. So we do NOT add our own world-axis offset (that\n // used to double-offset along +Z and shove the Director through the wall/floor edge). We sit AT the\n // anchor, nudge a SMALL amount further back ALONG the table axis (opposite the facing) so the head\n // seat clears the table edge, face down the table, and CLAMP to the office floor so it can never\n // land outside the room. It STANDS / idles here and never claims a member sit_work desk. ----\n var DIRECTOR_BACK = 0.45; // small nudge behind the head anchor, ALONG the table axis (units).\n var DIRECTOR_EDGE = 0.7; // keep the Director at least this far inside the floor edge (units).\n function directorSeat() {\n var c = (office && office.meetCenter) ? office.meetCenter : null;\n var cx = c ? c.x : 0, cz = c ? c.z : 0;\n // Live head-of-table facing (look down the table toward the team). Fall back to the stale\n // primitive, then to PI. NOTE: office.meetFacing is a snapshot of 0 — always prefer the getter.\n var facing = 0;\n if (office && typeof office.getMeetFacing === 'function') facing = office.getMeetFacing();\n else if (office && typeof office.meetFacing === 'number') facing = office.meetFacing;\n if (!(typeof facing === 'number' && isFinite(facing))) facing = Math.PI;\n // Forward (down the table) = (sin,cos) of facing; stand a touch further BACK = opposite forward.\n var fwdX = Math.sin(facing), fwdZ = Math.cos(facing);\n var x = cx - fwdX * DIRECTOR_BACK;\n var z = cz - fwdZ * DIRECTOR_BACK;\n // CLAMP inside the office floor extent so the Director can never end up past a wall / off the\n // floor. extentFor is the half-extent (FIXED office footprint); keep a margin from the edge and a\n // sane minimum radius for tiny rooms. We clamp each axis independently to the floor square.\n var ext = 6.0;\n try { if (office && typeof office.extentFor === 'function') ext = office.extentFor(1); } catch (e) {}\n if (!(typeof ext === 'number' && isFinite(ext))) ext = 6.0;\n var lim = ext - DIRECTOR_EDGE;\n if (lim < 1.0) lim = 1.0;\n if (x > lim) x = lim; else if (x < -lim) x = -lim;\n if (z > lim) z = lim; else if (z < -lim) z = -lim;\n return { x: x, z: z, angle: facing, deskX: x, deskZ: z, deskAngle: facing };\n }\n\n // ---- anti-overlap: when office.layout reuses a POI round-robin (roster > unique POIs), two seats\n // can coincide. We spread duplicates onto a deterministic small ring around the shared seat so more\n // agents render WITHOUT overlapping. dupRank is how many earlier seats share this (x,z). ----\n function spreadSeat(seat, dupRank) {\n if (!dupRank) return seat;\n var ang = dupRank * 2.399963; // golden-angle spread (deterministic, even)\n var r = 0.65 + 0.32 * Math.floor((dupRank - 1) / 6); // grow the ring every 6 duplicates\n return {\n x: seat.x + Math.cos(ang) * r,\n z: seat.z + Math.sin(ang) * r,\n angle: seat.angle,\n deskX: seat.deskX + Math.cos(ang) * r,\n deskZ: seat.deskZ + Math.sin(ang) * r,\n deskAngle: seat.deskAngle\n };\n }\n\n // Find this agent's HOME sit_work POI: the nearest sit_work POI to its deterministic seat. (layout\n // fills sit_work POIs first in id order, so the i-th agent's seat IS the i-th sit_work POI; nearest-\n // match makes this robust to round-robin overflow / re-reads.)\n function resolveHomePoi(entry) {\n if (!poisReady) { entry.homePoiId = null; return; }\n var best = null, bestD = Infinity;\n for (var i = 0; i < poiList.length; i++) {\n var p = poiList[i];\n if (p.kind !== 'sit_work') continue;\n var dx = p.position.x - entry.basePos.x, dz = p.position.z - entry.basePos.z;\n var d = dx * dx + dz * dz;\n if (d < bestD) { bestD = d; best = p; }\n }\n entry.homePoiId = best ? best.id : null;\n }\n\n // ---- sync(list, campaign) : diff roster -> avatars -----------------------------------------\n function sync(list, campaign) {\n list = Array.isArray(list) ? list : [];\n if (!template) return;\n tryBuildNav();\n refreshPois();\n var n = list.length;\n var seats = office.layout(n);\n var nextIds = {};\n var newOrder = [];\n\n var ordered = list.slice();\n // Director-first ordering. An explicit __director===true entry wins; else fall back to the lead\n // heuristic (index 0 / role/name contains director|lead) so legacy rosters still get a Director.\n var leadIdx = -1;\n var hasFlag = false;\n for (var lf = 0; lf < ordered.length; lf++) {\n if (isDirectorEntry(ordered[lf])) { leadIdx = lf; hasFlag = true; break; }\n }\n if (leadIdx < 0) {\n for (var li = 0; li < ordered.length; li++) {\n if (isLeadAgent(ordered[li], li)) { leadIdx = li; break; }\n }\n }\n if (leadIdx > 0) {\n var lead0 = ordered.splice(leadIdx, 1)[0];\n ordered.unshift(lead0);\n }\n\n // Track how many earlier seats share each (x,z) so duplicates fan out (anti-overlap).\n var seatDupCount = {};\n for (var i = 0; i < ordered.length; i++) {\n var a = ordered[i] || {};\n var id = String(a.id != null ? a.id : ('idx-' + i));\n nextIds[id] = true;\n newOrder.push(id);\n // The Director is whoever sits at index 0 AND (carries the flag, OR — when no flag exists in the\n // roster at all — matches the lead heuristic). Members are never treated as Director.\n var director = (i === 0) && (hasFlag ? isDirectorEntry(a) : isLeadAgent(a, 0));\n var lead = director || (i === 0) || isLeadAgent(a, i);\n var colorHex = lead ? DIRECTOR_COLOR : memberColorHex(i - 1);\n var seat;\n if (director) {\n seat = directorSeat(); // head of the meeting table — NOT a member desk\n } else {\n seat = seats[i] || { x: 0, z: 0, angle: 0, deskX: 0, deskZ: 0, deskAngle: 0 };\n var sk = seat.x.toFixed(2) + ',' + seat.z.toFixed(2);\n var dup = seatDupCount[sk] || 0;\n seatDupCount[sk] = dup + 1;\n seat = spreadSeat(seat, dup); // fan out duplicate POI seats so nobody overlaps\n }\n var entry = byId[id];\n if (!entry) {\n var built = buildAvatar(colorHex, lead);\n var ringObj = buildRing(colorHex);\n entry = {\n id: id,\n key: id,\n agent: a,\n role: String(a.role || (lead ? 'Director' : 'Agent')),\n colorHex: colorHex,\n status: 'idle',\n run: null,\n isLead: lead,\n isDirector: director, // head-of-table Director: stands/idles, no member desk\n seatIndex: i,\n object3D: built.group,\n model: built.model,\n mixer: built.mixer,\n actions: built.actions,\n active: null,\n animState: null,\n stateTimer: 0,\n accentMats: built.accentMats,\n ring: ringObj.mesh,\n ringMat: ringObj.mat,\n ringPulse: 0,\n headTmp: new THREE.Vector3(),\n // --- movement / pathing (PathAgent + driver) state ---\n behavior: B_IDLE, // B_IDLE / B_GOTO / B_SEATED\n path: null, // Vector3[] waypoints\n nodeIndex: 0,\n isMoving: false,\n arrivalCb: null,\n sitTarget: null, // 'sit_work' | 'sit_idle' set by prepareSitDown\n homePoiId: null,\n behaviorTimer: Math.random() * 5 + 2, // initial 2-7s wait (NpcAgentDriver)\n wasBusy: false,\n seatedPoiId: null, // POI currently occupied while seated\n handoff: null, // ADDITIVE handoff-walk machine: { phase, talkTimer, returnTo } or null\n sayLine: null, // DAD-JOKE line for the UI bubble (set ~3s on a free 1-to-1 meet)\n sayIsJoke: false, // MARK: the current sayLine is a DECORATIVE dad joke, not real work\n sayTimer: 0, // ms remaining on the current sayLine before it clears\n socialTimer: Math.random() * 10 + 6 // cooldown before this agent may emit an ambient joke\n };\n world.group.add(entry.object3D);\n world.group.add(entry.ring);\n byId[id] = entry;\n } else {\n if (entry.colorHex !== colorHex) {\n recolor(entry, colorHex);\n entry.colorHex = colorHex;\n }\n entry.agent = a;\n entry.role = String(a.role || (lead ? 'Director' : 'Agent'));\n entry.isLead = lead;\n entry.isDirector = director;\n entry.seatIndex = i;\n }\n entry.ring.position.set(seat.x, RING_Y, seat.z);\n var seatMoved = !entry.seat || entry.seat.x !== seat.x || entry.seat.z !== seat.z || entry.seat.angle !== seat.angle;\n if (seatMoved) placeEntry(entry, seat);\n if (entry.isDirector) {\n // Director never owns a member desk: drop any home POI + any seat claim it might have held.\n entry.homePoiId = null;\n poiReleaseAll(entry.key);\n } else {\n resolveHomePoi(entry);\n }\n if (!entry.active) playState(entry, restState(entry));\n }\n\n for (var k = 0; k < order.length; k++) {\n var oldId = order[k];\n if (!nextIds[oldId]) {\n var e = byId[oldId];\n if (e) {\n poiReleaseAll(e.key);\n try { if (e.mixer) e.mixer.stopAllAction(); } catch (er) {}\n if (e.object3D && e.object3D.parent) e.object3D.parent.remove(e.object3D);\n if (e.ring && e.ring.parent) e.ring.parent.remove(e.ring);\n disposeObject(e.object3D);\n if (e.ring) { if (e.ring.geometry) e.ring.geometry.dispose(); if (e.ringMat) e.ringMat.dispose(); }\n }\n if (spotlightId === oldId) { spotlightId = null; try { world.spotlightOn(null); } catch (er2) {} }\n delete byId[oldId];\n }\n }\n\n order = newOrder;\n\n var E = office.extentFor(n);\n try { world.setExtent(E); } catch (e3) {}\n try { office.buildDesks(n); } catch (e4) {}\n }\n\n function recolor(entry, colorHex) {\n var bright = brightTint(colorHex);\n var accCol = capTint(colorHex);\n for (var i = 0; i < entry.accentMats.length; i++) {\n var m = entry.accentMats[i];\n if (m && m.color) { m.color.copy(bright); m.needsUpdate = true; }\n }\n if (entry.ringMat) {\n entry.ringMat.color.set(colorHex);\n entry.ringMat.emissive.set(colorHex);\n entry.ringMat.needsUpdate = true;\n }\n entry.model.traverse(function (o) {\n if (!o.isMesh || !o.visible || !o.material) return;\n var mn = (!Array.isArray(o.material) && o.material.name) ? o.material.name : '';\n var isAcc = isCapPart(o.name) || isCapPart(mn) || isHeadphonePart(o.name) || isHeadphonePart(mn);\n if (!isAcc) return;\n var mats = Array.isArray(o.material) ? o.material : [o.material];\n for (var k = 0; k < mats.length; k++) {\n if (mats[k] && mats[k].color) { mats[k].color.copy(accCol); mats[k].needsUpdate = true; }\n }\n });\n }\n\n function disposeObject(obj) {\n if (!obj) return;\n obj.traverse(function (o) {\n if (o.isMesh) {\n if (o.geometry) o.geometry.dispose();\n if (o.material) {\n if (Array.isArray(o.material)) o.material.forEach(function (m) { if (m && m.dispose) m.dispose(); });\n else if (o.material.dispose) o.material.dispose();\n }\n }\n });\n }\n\n // Resting state when not pathing: sit_work on a running run; disabled -> sit_idle; else idle.\n // The Director never sits at a member desk — it STANDS / idles at the meeting-table head.\n function restState(entry) {\n if (entry.isDirector) return 'idle';\n if (entry.status === 'running') return 'sit_work';\n if (isDisabled(entry.agent)) return 'sit_idle';\n return 'idle';\n }\n\n // ---- movement core (PathAgent + CharacterController) ---------------------------------------\n // setPath: prepend 'from' if the first node is meaningfully away (so the avatar walks from where it\n // stands), start at the right node, mark moving. Mirrors PathAgent.setPath.\n function setPath(entry, path, fromPos) {\n var p = path.slice();\n var startIdx = 0;\n if (fromPos && p.length) {\n var dx = p[0].x - fromPos.x, dz = p[0].z - fromPos.z;\n if ((dx * dx + dz * dz) >= 0.0001) { p = [fromPos.clone()].concat(p); startIdx = 1; }\n }\n entry.path = p;\n entry.nodeIndex = startIdx;\n entry.isMoving = p.length > 0;\n }\n\n // moveTo: navmesh path from->target, overwrite last node with exact target, store arrival cb, set\n // GOTO + walk. NPCs REFUSE to move when there is no path (return false) — they never teleport (only\n // the player teleports in the original; there is no player here). Mirrors CharacterController.moveTo.\n function moveTo(entry, target, arrivalState, onArrival, fromPos, targetQuat) {\n var from = fromPos ? fromPos.clone() : new THREE.Vector3(entry.object3D.position.x, 0, entry.object3D.position.z);\n var path = findPath(from, target);\n if (!path || path.length === 0) return false; // NPC: no path -> refuse to move\n path = path.slice();\n path[path.length - 1] = target.clone(); // end EXACTLY at target\n setPath(entry, path, from);\n entry.arrivalCb = function () {\n if (targetQuat) entry.object3D.rotation.y = yawFromQuat(targetQuat);\n playState(entry, arrivalState || 'idle');\n if (onArrival) onArrival(entry);\n };\n entry.behavior = B_GOTO;\n playState(entry, 'walk');\n return true;\n }\n\n // walkToPoi: the SIT trigger. Claim a free POI, prepareSitDown for sit variants (store sitTarget\n // BEFORE the async arrival), path to it; the arrival cb snaps to the POI's exact world pos + facing,\n // marks SEATED, plays the one-shot 'Sit' (sit_down) clip which auto-advances to the looping\n // Sit_Work / Sit_Idle clip. Occupy on success. Mirrors CharacterController.walkToPoi.\n function walkToPoi(entry, poiId, onArrival, fromPos) {\n var poi = poiById[poiId];\n if (!poi) return false;\n if (poi.occupiedBy !== null && poi.occupiedBy !== entry.key) return false;\n var targetState = poi.arrivalState;\n var isSitVariant = (targetState === 'sit_idle' || targetState === 'sit_work');\n var isArea = String(poi.id).indexOf('area') !== -1 || poi.kind === 'area';\n if (isSitVariant) entry.sitTarget = targetState; // prepareSitDown\n var ok = moveTo(entry, poi.position, isSitVariant ? 'sit_down' : targetState, function (en) {\n // teleport to the POI's EXACT world position (kills sub-unit navmesh offset).\n en.object3D.position.set(poi.position.x, 0, poi.position.z);\n if (!isArea) en.object3D.rotation.y = yawFromQuat(poi.quaternion); // snap facing to the chair\n if (isSitVariant) {\n en.behavior = B_SEATED;\n en.seatedPoiId = poi.id;\n // playState('sit_down') was set as the arrivalState in moveTo; ensure SEATED stays after it.\n }\n if (onArrival) onArrival(en);\n }, fromPos, null);\n if (!ok) { if (isSitVariant) entry.sitTarget = null; return false; }\n // Claim: release my old claims, occupy this POI.\n poiReleaseAll(entry.key);\n poiOccupy(poiId, entry.key);\n return true;\n }\n\n function cancelMovement(entry) {\n entry.path = null; entry.isMoving = false; entry.nodeIndex = 0; entry.arrivalCb = null;\n if (entry.behavior === B_GOTO) entry.behavior = B_IDLE;\n }\n\n // Per-frame: advance the GOTO body toward its current waypoint, consume nodes within\n // PATH_NODE_ARRIVAL (XZ), fire the arrival callback on the final node. Mirrors the GPU mover +\n // PathAgent.update + CharacterController.updatePaths.\n function stepMovement(entry, dt) {\n if (entry.behavior !== B_GOTO || !entry.isMoving || !entry.path || !entry.path.length) return;\n var pos = entry.object3D.position;\n var node = entry.path[entry.nodeIndex];\n if (!node) { entry.isMoving = false; return; }\n var dx = node.x - pos.x, dz = node.z - pos.z;\n var dist = Math.sqrt(dx * dx + dz * dz);\n if (dist > SNAP_RADIUS) {\n var step = Math.min(dist, MOVE_SPEED * dt);\n pos.x += (dx / dist) * step;\n pos.z += (dz / dist) * step;\n // face along travel.\n var want = Math.atan2(dx, dz);\n var cur = entry.object3D.rotation.y;\n var d = want - cur;\n while (d > Math.PI) d -= Math.PI * 2;\n while (d < -Math.PI) d += Math.PI * 2;\n entry.object3D.rotation.y = cur + d * Math.min(1, dt * 10);\n } else {\n pos.x = node.x; pos.z = node.z; // snap to waypoint\n }\n // PathAgent.update: node consumed within PATH_NODE_ARRIVAL (XZ) -> advance / final arrival.\n var ndx = node.x - pos.x, ndz = node.z - pos.z;\n if ((ndx * ndx + ndz * ndz) < PATH_NODE_ARRIVAL * PATH_NODE_ARRIVAL) {\n entry.nodeIndex++;\n if (entry.nodeIndex >= entry.path.length) {\n // FINAL arrival.\n entry.isMoving = false;\n entry.path = null;\n if (entry.behavior === B_GOTO) entry.behavior = B_IDLE;\n var cb = entry.arrivalCb; entry.arrivalCb = null;\n if (cb) cb();\n }\n }\n }\n\n // ---- NPC decision logic (NpcAgentDriver) ---------------------------------------------------\n // NO-WORK agents are FREE: they ROAM between the poi-idle-area POIs (hub / boardroom / canteen /\n // workspace) and stand / idle / look around via the navmesh. They do NOT sit at a work desk or an\n // idle desk — free agents stay on their feet (light ambient roaming, never stuck sitting). Running\n // agents are driven to their OWN work seat elsewhere; disabled agents rest. All movement is navmesh.\n // Autonomy-eligible only in a stable, non-moving state: idle / look.\n function decideNext(entry) {\n var rand = Math.random();\n var currentPos = new THREE.Vector3(entry.object3D.position.x, 0, entry.object3D.position.z);\n\n // A free agent should never linger seated: if it is somehow in a seated state, stand up + release\n // the chair first (it will roam on the next pass). Guarantees req #2 — free agents do not sit.\n if (isSeatedState(entry.animState)) {\n poiReleaseAll(entry.key);\n entry.behavior = B_IDLE;\n playState(entry, 'idle');\n entry.behaviorTimer = Math.random() * 2 + 1; // re-decide (roam) shortly\n return;\n }\n\n // A. Roam to an idle-area POI (hub / boardroom / canteen / workspace), stand there, look around,\n // then later roam again — navmesh both ways. This is the primary free-agent behaviour (~75%).\n if (rand < 0.75) {\n var ap = pickRandom(freeIdleAreaPois(entry.key));\n if (ap) {\n // distributed slot around the area center (NpcAgentDriver): angle by index, radius 1.\n var ang = entry.seatIndex * (Math.PI * 2) / MAX_AGENTS;\n var tx = ap.position.x + Math.cos(ang) * 1.0;\n var tz = ap.position.z + Math.sin(ang) * 1.0;\n var dir = new THREE.Vector3(ap.position.x - tx, 0, ap.position.z - tz);\n var faceQ = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.atan2(dir.x, dir.z));\n var tgt = new THREE.Vector3(tx, 0, tz);\n // arrival state 'look' -> stand and look around (no sitting); release any prior claim.\n if (moveTo(entry, tgt, 'look', undefined, currentPos, faceQ)) {\n poiReleaseAll(entry.key); // free agents never hold a seat\n entry.behaviorTimer = Math.random() * 5 + 8; // 8-13s of standing ambient before the next roam\n return;\n }\n }\n }\n\n // B. Stand in place and play a light ambient reaction (look / wave / happy) — still no sitting.\n var pickR = Math.random();\n var react = (pickR < 0.5) ? 'look' : (pickR < 0.8 ? 'wave' : 'happy');\n playState(entry, react);\n entry.behaviorTimer = Math.random() * 4 + 4; // 4-8s\n }\n\n // The driver-style per-agent tick: route running/disabled to their seats; otherwise count down the\n // autonomy timer and decide. Only runs when NOT mid-path (GOTO) and in a stable state.\n function driveAgent(entry, dt) {\n var busy = (entry.status === 'running');\n\n // DIRECTOR: it does not work a desk and does not roam — it STANDS / idles at the meeting-table\n // head, facing the team. Keep it pinned to its head-of-table seat + idle (re-derive the seat each\n // tick so it tracks meetCenter once the office GLB loads). It is never a handoff giver/receiver.\n if (entry.isDirector) {\n if (entry.handoff) entry.handoff = null;\n if (entry.behavior === B_GOTO) cancelMovement(entry);\n var ds = directorSeat();\n entry.basePos.set(ds.x, 0, ds.z);\n entry.deskPos.set(ds.x, 0, ds.z);\n entry.baseAngle = ds.angle;\n entry.object3D.position.set(ds.x, 0, ds.z);\n entry.object3D.rotation.y = ds.angle;\n if (entry.ring) entry.ring.position.set(ds.x, RING_Y, ds.z);\n entry.behavior = B_IDLE;\n if (entry.animState !== 'idle' && entry.animState !== 'look') playState(entry, 'idle');\n return;\n }\n\n // busy -> idle edge: act immediately (NpcAgentDriver wasBusy/!isBusy).\n if (entry.wasBusy && !busy) entry.behaviorTimer = 0;\n entry.wasBusy = busy;\n\n // RUNNING: ensure the agent is heading to / seated at its WORK desk (Sit_Work). SceneManager owns\n // this in the original; here the driver does it directly. A running agent is NEVER a handoff\n // giver, so drop any handoff-walk it might be mid-way through (it goes back to its desk).\n if (busy) {\n if (entry.handoff) { entry.handoff = null; cancelMovement(entry); }\n if (entry.animState === 'sit_work') return; // already working\n if (entry.animState === 'sit_down') return; // sitting down -> auto-advances to sit_work\n if (entry.behavior === B_SEATED) return; // seated/settling — leave it\n if (entry.behavior === B_GOTO) return; // already walking to the desk\n var workPoi = entry.homePoiId ? poiById[entry.homePoiId] : null;\n if (navReady && workPoi && (workPoi.occupiedBy === null || workPoi.occupiedBy === entry.key)) {\n var fromW = new THREE.Vector3(entry.object3D.position.x, 0, entry.object3D.position.z);\n if (walkToPoi(entry, workPoi.id, undefined, fromW)) return;\n }\n // Fallback (no nav / no path / occupied): sit_work in place at the desk seat.\n entry.object3D.position.set(entry.deskPos.x, 0, entry.deskPos.z);\n entry.object3D.rotation.y = entry.baseAngle;\n entry.behavior = B_SEATED;\n playState(entry, 'sit_work');\n return;\n }\n\n // DISABLED: rest seated (Sit_Idle) in place at the seat.\n if (isDisabled(entry.agent)) {\n if (entry.handoff) entry.handoff = null;\n if (entry.behavior === B_GOTO) cancelMovement(entry);\n entry.object3D.position.set(entry.basePos.x, 0, entry.basePos.z);\n entry.object3D.rotation.y = entry.baseAngle;\n entry.behavior = B_SEATED;\n playState(entry, 'sit_idle');\n return;\n }\n\n // HANDOFF-WALK in progress (free giver visiting a receiver): the handoff stepper owns this agent —\n // skip all autonomy so decideNext never hijacks the walk. The stepper advances it in update().\n if (entry.handoff) return;\n\n // Currently walking: let stepMovement finish; no decision.\n if (entry.behavior === B_GOTO) return;\n\n // Without a working navmesh we NEVER walk (fallback) — agents just sit at their POI: sit_idle at\n // their seat. This guarantees they never clip walls.\n if (!navReady) {\n if (!isSeatedState(entry.animState)) {\n entry.object3D.position.set(entry.basePos.x, 0, entry.basePos.z);\n entry.object3D.rotation.y = entry.baseAngle;\n entry.behavior = B_SEATED;\n playState(entry, 'sit_idle');\n }\n return;\n }\n\n // Autonomy only in a stable state.\n var stable = (entry.animState === 'idle' || entry.animState === 'sit_idle' || entry.animState === 'look');\n if (!stable) return;\n entry.behaviorTimer -= dt;\n if (entry.behaviorTimer <= 0) decideNext(entry);\n }\n\n // ---- update(dt) : mixers + state-machine timers + movement + drivers + ring pulse ----------\n function update(dt) {\n if (!isFinite(dt) || dt < 0) dt = 0;\n if (dt > 0.1) dt = 0.1;\n // Lazy nav build (office GLB may have finished loading after us).\n if (!navReady) tryBuildNav();\n if (!poisReady) refreshPois();\n var now = (typeof performance !== 'undefined' ? performance.now() : Date.now()) / 1000;\n for (var i = 0; i < order.length; i++) {\n var e = byId[order[i]];\n if (!e) continue;\n if (e.mixer) e.mixer.update(dt);\n\n // (1) state-machine timers: one-shot states auto-advance (sit_down -> sit_target/idle).\n if (e.stateTimer > 0) {\n e.stateTimer -= dt;\n if (e.stateTimer <= 0) {\n var cur = e.animState;\n if (cur === 'sit_down') {\n var next = e.sitTarget || 'sit_idle';\n e.sitTarget = null;\n playState(e, next); // looping Sit_Work / Sit_Idle\n e.behavior = B_SEATED;\n } else {\n playState(e, nextStateAfter(cur) || 'idle');\n }\n }\n }\n\n // (2) move along the navmesh path (GOTO only).\n stepMovement(e, dt);\n\n // (3) driver decision (running/disabled routing + autonomy).\n driveAgent(e, dt);\n\n // ring pulse.\n var targetPulse = (e.status === 'running') ? 1.0 : 0.6;\n e.ringPulse += (targetPulse - e.ringPulse) * Math.min(1, dt * 4);\n if (e.ringMat) {\n var extra = (e.status === 'running') ? (0.4 * (0.5 + 0.5 * Math.sin(now * 3))) : 0;\n e.ringMat.emissiveIntensity = e.ringPulse + extra;\n }\n }\n\n // (4) ADDITIVE overlay: advance the optional handoff beam (no-op unless playing). Guarded so a\n // failure here can never disturb the movement/sit loop above.\n try { stepHandoff(dt); } catch (eh) {}\n\n // (5) ADDITIVE physical cue: advance any active handoff-walks (giver walking to/from a receiver).\n // Guarded so a failure here can never disturb the movement/sit loop above.\n try { stepHandoffWalks(dt); } catch (ehw) {}\n\n // (6) ADDITIVE DAD JOKES: detect FREE 1-to-1 ambient encounters (set sayLine) + expire old lines.\n // Guarded so a failure here can never disturb the movement/sit loop above.\n try { scanSocialEncounters(dt); } catch (es) {}\n try { tickSayLines(dt); } catch (et) {}\n }\n\n // ---- setStatus(id, status, run) ------------------------------------------------------------\n function headPosOf(entry) {\n entry.object3D.updateMatrixWorld(true);\n entry.headTmp.set(entry.object3D.position.x, HEAD_Y, entry.object3D.position.z);\n return entry.headTmp.clone();\n }\n\n // ---- handoff-beam overlay helpers (ADDITIVE) -----------------------------------------------\n // Dispose any live beam meshes/materials and detach from the scene group. Safe to call twice.\n function disposeHandoffBeam() {\n var b = handoffBeam;\n handoffBeam = null;\n if (!b) return;\n try { if (b.tube && b.tube.parent) b.tube.parent.remove(b.tube); } catch (e) {}\n try { if (b.dot && b.dot.parent) b.dot.parent.remove(b.dot); } catch (e2) {}\n try { if (b.tubeGeo) b.tubeGeo.dispose(); } catch (e3) {}\n try { if (b.dotGeo) b.dotGeo.dispose(); } catch (e4) {}\n try { if (b.tubeMat) b.tubeMat.dispose(); } catch (e5) {}\n try { if (b.dotMat) b.dotMat.dispose(); } catch (e6) {}\n }\n\n // Build the beam meshes for the CURRENT hop (a glowing emissive tube + a small travelling dot).\n // The tube spans from->to; the dot starts at 'from' and travels to 'to' over the hop.\n function buildHandoffBeam(from, to) {\n disposeHandoffBeam();\n if (!from || !to) return;\n var dir = new THREE.Vector3().subVectors(to, from);\n var len = dir.length();\n if (!isFinite(len) || len < 0.001) return;\n // Hue: the Director-first hop colour (use the destination agent's emissive feel — soft cyan/blue).\n var col = new THREE.Color(0x6fb7ff);\n // Thin tube: a unit cylinder (radius 0.025) along +Y, oriented to the segment, centred at midpoint.\n var tubeGeo = new THREE.CylinderGeometry(0.025, 0.025, len, 8, 1, true);\n var tubeMat = new THREE.MeshBasicMaterial({ color: col.clone(), transparent: true, opacity: 0.0, depthWrite: false });\n var tube = new THREE.Mesh(tubeGeo, tubeMat);\n var mid = new THREE.Vector3().addVectors(from, to).multiplyScalar(0.5);\n tube.position.copy(mid);\n tube.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.clone().normalize());\n tube.frustumCulled = false;\n tube.renderOrder = 9;\n // Travelling dot: a small emissive sphere, starts at 'from'.\n var dotGeo = new THREE.SphereGeometry(0.07, 12, 10);\n var dotMat = new THREE.MeshBasicMaterial({ color: col.clone(), transparent: true, opacity: 0.0, depthWrite: false });\n var dot = new THREE.Mesh(dotGeo, dotMat);\n dot.position.copy(from);\n dot.frustumCulled = false;\n dot.renderOrder = 10;\n try { world.group.add(tube); world.group.add(dot); } catch (e) {}\n handoffBeam = { tube: tube, dot: dot, tubeMat: tubeMat, dotMat: dotMat, tubeGeo: tubeGeo, dotGeo: dotGeo, from: from.clone(), to: to.clone() };\n }\n\n // playHandoff(orderedIds): flash a brief glowing beam from each agent head to the next, in order\n // (Director->A->B->C). Resolves CURRENT head positions per id via headPosOf. No-op if a sequence is\n // already playing (safe to call repeatedly). Fully guarded — any failure leaves the scene untouched.\n function playHandoff(orderedIds) {\n try {\n if (handoffActive) return; // ignore while a handoff is already playing\n if (!Array.isArray(orderedIds) || orderedIds.length < 2) return;\n // Resolve head positions for the ids we actually have entries for, preserving order.\n var pts = [];\n for (var i = 0; i < orderedIds.length; i++) {\n var e = byId[String(orderedIds[i])];\n if (!e || !e.object3D) continue;\n pts.push(headPosOf(e));\n }\n if (pts.length < 2) return;\n // Build the per-hop endpoint list (consecutive heads).\n handoffHops = [];\n for (var h = 0; h < pts.length - 1; h++) handoffHops.push({ a: pts[h], b: pts[h + 1] });\n if (!handoffHops.length) return;\n handoffActive = true;\n handoffIndex = 0;\n handoffElapsed = 0;\n buildHandoffBeam(handoffHops[0].a, handoffHops[0].b);\n } catch (e) { handoffActive = false; disposeHandoffBeam(); }\n }\n\n // Per-frame advance of the handoff overlay (called from update). Animates the dot along the hop,\n // pulses the tube, fades out over the tail of each hop, then advances to the next hop. When the\n // last hop finishes it disposes the beam and clears the active flag. Fully guarded.\n function stepHandoff(dt) {\n if (!handoffActive) return;\n try {\n handoffElapsed += dt * 1000;\n var t = handoffElapsed / HANDOFF_HOP_MS;\n if (t >= 1) {\n // advance to the next hop (or finish).\n handoffIndex++;\n handoffElapsed = 0;\n if (handoffIndex >= handoffHops.length) {\n handoffActive = false;\n handoffHops = [];\n handoffIndex = 0;\n disposeHandoffBeam();\n return;\n }\n var hop = handoffHops[handoffIndex];\n buildHandoffBeam(hop.a, hop.b);\n t = 0;\n }\n var b = handoffBeam;\n if (!b) return;\n // Alpha envelope: quick rise, hold, fade over the last HANDOFF_FADE_FRAC of the hop.\n var alpha;\n if (t < 0.15) alpha = t / 0.15;\n else if (t > (1 - HANDOFF_FADE_FRAC)) alpha = Math.max(0, (1 - t) / HANDOFF_FADE_FRAC);\n else alpha = 1;\n if (b.tubeMat) b.tubeMat.opacity = 0.55 * alpha;\n if (b.dotMat) b.dotMat.opacity = 0.95 * alpha;\n // Travel the dot from 'from' to 'to' across the hop.\n if (b.dot && b.from && b.to) {\n var p = t < 0 ? 0 : (t > 1 ? 1 : t);\n b.dot.position.lerpVectors(b.from, b.to, p);\n }\n } catch (e) {\n // On any failure, tear the overlay down and stop — the rest of the scene is unaffected.\n handoffActive = false;\n handoffHops = [];\n handoffIndex = 0;\n disposeHandoffBeam();\n }\n }\n\n // ---- HANDOFF-WALK (ADDITIVE physical cue) --------------------------------------------------\n // handoffWalk(fromId, toId): the GIVER (fromId) physically WALKS the navmesh to the RECEIVER's\n // (toId) desk/POI, faces them, plays Talk/Listen for ~HANDOFF_TALK_MS, then walks back to its OWN\n // desk and resumes free roaming. A tiny 3-phase machine on entry.handoff:\n // phase 1 'toReceiver' -> walking to a point ~1.2u in front of the receiver\n // phase 2 'talk' -> standing, facing the receiver, Talk (giver) (timed)\n // phase 3 'return' -> walking back to its own desk seat, then idle\n // It is SKIPPED entirely (no-op, returns false) for a busy/disabled giver and when no navmesh —\n // it must never disturb a working/seated agent or cause wall-clipping. Fully guarded by the caller.\n function targetPointNear(entry, anchorPos, anchorAngle) {\n // A standing point ~1.2u in front of the anchor (so the giver faces the receiver, not on top of\n // them). Falls back to a small radial offset by the giver's seat index for determinism.\n var dist = 1.2;\n if (isFinite(anchorAngle)) {\n var fx = Math.sin(anchorAngle), fz = Math.cos(anchorAngle); // anchor forward (matches yawFromQuat)\n return new THREE.Vector3(anchorPos.x + fx * dist, 0, anchorPos.z + fz * dist);\n }\n var ang = entry.seatIndex * (Math.PI * 2) / MAX_AGENTS;\n return new THREE.Vector3(anchorPos.x + Math.cos(ang) * dist, 0, anchorPos.z + Math.sin(ang) * dist);\n }\n function faceTowardsXZ(entry, px, pz) {\n var dx = px - entry.object3D.position.x, dz = pz - entry.object3D.position.z;\n if ((dx * dx + dz * dz) > 0.000001) entry.object3D.rotation.y = Math.atan2(dx, dz);\n }\n // Resolve the receiver's \"desk\" anchor position + facing angle (its home sit_work POI when known,\n // else its deterministic desk seat). Returns { pos:Vector3, angle:number } or null.\n function receiverAnchor(receiver) {\n var poi = receiver.homePoiId ? poiById[receiver.homePoiId] : null;\n if (poi) return { pos: poi.position.clone(), angle: yawFromQuat(poi.quaternion) };\n if (receiver.deskPos) return { pos: receiver.deskPos.clone(), angle: receiver.baseAngle };\n return null;\n }\n // ---- DAD JOKES (ADDITIVE) ------------------------------------------------------------------\n // An agent is \"free to chat\" when it is NOT the Director, NOT running, and NOT disabled. Only such\n // agents say dad jokes (req #2: \"Only when FREE — no running run\").\n function isFreeToChat(entry) {\n return !!entry && !entry.isDirector && entry.status !== 'running' && !isDisabled(entry.agent);\n }\n // setSayLine: pick a dad joke DETERMINISTICALLY by (seatIndex + a runtime counter) so the same\n // agent varies its line over time, set it on the entry for ~SAY_LINE_MS, bump the shared counter.\n function setSayLine(entry) {\n if (!isFreeToChat(entry)) return;\n var idx = ((entry.seatIndex + jokeCounter) % DAD_JOKES.length + DAD_JOKES.length) % DAD_JOKES.length;\n entry.sayLine = DAD_JOKES[idx];\n entry.sayIsJoke = true; // every setSayLine line IS a decorative dad joke (UI styles it apart)\n entry.sayTimer = SAY_LINE_MS;\n jokeCounter = (jokeCounter + 1) % 1000000;\n }\n // Both ends of a free 1-to-1 meet exchange a quick line (giver speaks, receiver answers).\n function exchangeJokes(a, b) {\n if (isFreeToChat(a)) setSayLine(a);\n if (isFreeToChat(b)) setSayLine(b);\n }\n // tickSayLines: count down every active sayLine and clear it when it expires (called from update).\n function tickSayLines(dt) {\n for (var i = 0; i < order.length; i++) {\n var e = byId[order[i]];\n if (!e || !e.sayLine) continue;\n e.sayTimer -= dt * 1000;\n if (e.sayTimer <= 0) { e.sayLine = null; e.sayIsJoke = false; e.sayTimer = 0; }\n }\n }\n // scanSocialEncounters: an AMBIENT social cue. When two FREE idle agents happen to stand close\n // together (and neither is mid-joke / on cooldown), they exchange dad jokes 1-to-1. Cheap O(n^2)\n // over the small roster, guarded, and rate-limited per agent via socialTimer so it stays sparse.\n var SOCIAL_DIST = 1.6; // how close two agents must be to \"meet\" (world units).\n function scanSocialEncounters(dt) {\n for (var i = 0; i < order.length; i++) {\n var a = byId[order[i]];\n if (!a) continue;\n if (a.socialTimer > 0) a.socialTimer -= dt;\n if (!isFreeToChat(a) || a.handoff || a.behavior === B_GOTO) continue;\n var stableA = (a.animState === 'idle' || a.animState === 'look');\n if (!stableA || a.socialTimer > 0 || a.sayLine) continue;\n for (var j = i + 1; j < order.length; j++) {\n var b = byId[order[j]];\n if (!b || !isFreeToChat(b) || b.handoff || b.behavior === B_GOTO) continue;\n var stableB = (b.animState === 'idle' || b.animState === 'look');\n if (!stableB || b.socialTimer > 0 || b.sayLine) continue;\n var dx = a.object3D.position.x - b.object3D.position.x;\n var dz = a.object3D.position.z - b.object3D.position.z;\n if ((dx * dx + dz * dz) > (SOCIAL_DIST * SOCIAL_DIST)) continue;\n // They meet: face each other, exchange jokes, set a cooldown so it stays sparse.\n faceTowardsXZ(a, b.object3D.position.x, b.object3D.position.z);\n faceTowardsXZ(b, a.object3D.position.x, a.object3D.position.z);\n exchangeJokes(a, b);\n a.socialTimer = Math.random() * 12 + 10;\n b.socialTimer = Math.random() * 12 + 10;\n break; // a meets at most one partner per scan\n }\n }\n }\n\n function handoffWalk(fromId, toId) {\n try {\n if (!navReady) return false; // POI-only fallback: never walk\n var giver = byId[String(fromId)];\n var receiver = byId[String(toId)];\n if (!giver || !receiver || giver === receiver) return false;\n // Only a FREE giver hands off physically — never pull a running/disabled agent off its desk.\n if (giver.status === 'running' || isDisabled(giver.agent)) return false;\n if (giver.handoff) return false; // already walking a handoff — ignore\n var anchor = receiverAnchor(receiver);\n if (!anchor) return false;\n var standPt = targetPointNear(giver, anchor.pos, anchor.angle);\n var from = new THREE.Vector3(giver.object3D.position.x, 0, giver.object3D.position.z);\n // Remember where to return to (the giver's OWN desk seat).\n var returnTo = giver.deskPos ? giver.deskPos.clone() : from.clone();\n var returnAngle = giver.baseAngle;\n // Phase 1: walk to the receiver. On arrival, face the receiver + start the talk pause.\n var ok = moveTo(giver, standPt, 'talk', function (en) {\n try {\n faceTowardsXZ(en, anchor.pos.x, anchor.pos.z);\n if (en.handoff) { en.handoff.phase = 'talk'; en.handoff.talkTimer = HANDOFF_TALK_MS; }\n playState(en, 'talk');\n // DAD JOKE: a free 1-to-1 talk — giver (and the receiver if it is also free) say a line.\n exchangeJokes(en, receiver);\n } catch (e) {}\n }, from, null);\n if (!ok) return false; // no path -> refuse (NPCs never teleport)\n poiReleaseAll(giver.key); // a roaming giver holds no seat\n giver.handoff = { phase: 'toReceiver', talkTimer: 0, returnTo: returnTo, returnAngle: returnAngle, toId: String(toId) };\n return true;\n } catch (e) { return false; }\n }\n // Per-frame advance of every active handoff-walk (called from update, guarded). Phase 2 counts down\n // the talk pause then walks the giver home; phase 3 ends when the walk-home arrival fires.\n function stepHandoffWalks(dt) {\n for (var i = 0; i < order.length; i++) {\n var en = byId[order[i]];\n if (!en || !en.handoff) continue;\n var h = en.handoff;\n // Safety: a running/disabled giver drops the handoff (driveAgent also guards this).\n if (en.status === 'running' || isDisabled(en.agent)) { en.handoff = null; continue; }\n if (h.phase === 'talk') {\n h.talkTimer -= dt * 1000;\n if (h.talkTimer <= 0) {\n // Phase 3: walk back to the giver's own desk seat, then idle (free again).\n h.phase = 'return';\n var fromR = new THREE.Vector3(en.object3D.position.x, 0, en.object3D.position.z);\n var ok = moveTo(en, h.returnTo, 'idle', function (e2) {\n try {\n e2.object3D.position.set(h.returnTo.x, 0, h.returnTo.z);\n if (isFinite(h.returnAngle)) e2.object3D.rotation.y = h.returnAngle;\n } catch (er) {}\n e2.handoff = null; // handoff complete — resume autonomy\n e2.behaviorTimer = Math.random() * 3 + 2;\n }, fromR, null);\n if (!ok) { en.handoff = null; en.behaviorTimer = Math.random() * 2 + 1; } // no path home: just resume\n }\n }\n // 'toReceiver' and 'return' phases are driven by stepMovement + the moveTo arrival callbacks.\n }\n }\n\n function setStatus(id, status, run) {\n var key = String(id);\n var entry = byId[key];\n if (!entry) return;\n var s = normStatus(status);\n var was = entry.status;\n entry.status = s;\n entry.run = run || null;\n if (s === 'running') {\n // route to the work desk on the next driver tick; spotlight the speaker now.\n entry.behaviorTimer = 0;\n try { world.spotlightOn(headPosOf(entry)); } catch (e) {}\n spotlightId = key;\n } else if (was === 'running' && s !== 'running') {\n if (spotlightId === key) {\n spotlightId = null;\n try { world.spotlightOn(null); } catch (e2) {}\n }\n // run stopped: stand up (frees the chair) and resume autonomy soon.\n if (entry.behavior === B_GOTO) cancelMovement(entry);\n if (isSeatedState(entry.animState)) { entry.behavior = B_IDLE; playState(entry, 'idle'); }\n entry.behaviorTimer = Math.random() * 2 + 0.5;\n }\n }\n\n // ---- entries() : feed the UI ---------------------------------------------------------------\n function entries() {\n var out = [];\n for (var i = 0; i < order.length; i++) {\n var e = byId[order[i]];\n if (!e) continue;\n out.push(makeEntryView(e));\n }\n return out;\n }\n function makeEntryView(e) {\n return {\n id: e.id,\n agent: e.agent,\n role: e.role,\n colorHex: e.colorHex,\n status: e.status,\n run: e.run,\n object3D: e.object3D,\n ring: e.ring,\n isLead: e.isLead,\n isDirector: e.isDirector,\n sayLine: e.sayLine || null, // DAD JOKE the UI bubble can read (~3s, free 1-to-1 meets only)\n sayIsJoke: !!(e.sayLine && e.sayIsJoke), // MARK: this sayLine is a decorative dad joke (not real\n // work) — the UI renders it with a distinct decorative style.\n headWorldPos: (function (en) { return function () { return headPosOf(en); }; })(e)\n };\n }\n\n return {\n loadAssets: loadAssets,\n sync: sync,\n update: update,\n setStatus: setStatus,\n entries: entries,\n playHandoff: playHandoff,\n handoffWalk: handoffWalk\n };\n}\n`;\n}\n",[246],"ac43c74a-5e66-11f1-991e-1607ee4eb77e","frontend_world.ts","d3331444-5d8c-11f1-85f7-1607ee4eb77e",876,["D",1780393049485],17,"// Part 10 (ENTRY): the \"/world\" Agent World DASHBOARD bootstrap. This is the SMALL ENTRY: it does\n// NOT build the three.js scene OR the panel DOM itself. It imports the 5 factory modules by ABSOLUTE\n// /api URL and wires them together:\n// createWorld <- /api/app-world-scene (the bounded 3D scene, self-sizing to #world-canvas-wrap)\n// createOffice <- /api/app-world-office (floor + desks + perimeter)\n// createAgents <- /api/app-world-agents (avatars driven by the real roster)\n// createUI <- /api/app-world-ui (tiny in-scene status chips over #world-overlay)\n// createDash <- /api/app-world-dash (ALL panel DOM: topbar, logs, kanban, project)\n//\n// The light shell (getWorldHTML) is the SOLE creator of every fixed DOM id; this entry only LOOKS\n// them up: #world-canvas (scene), #world-overlay (chips), and the 5 dash handles (#world-topbar,\n// #world-logs, #world-scenehead, #world-kanban, #world-project). It fetches THIS app's REAL data\n// (Bearer nexus_token) from three cross-cutting endpoints + /api/agents:\n// GET /api/world/activity -> the cross-agent runs feed (LEFT logs + per-agent 3D status)\n// GET /api/world/board -> tasks pre-grouped into the 4 Kanban columns (CENTER kanban)\n// GET /api/world/project -> active campaign brief + REAL usage rollup (RIGHT project panel)\n// distributes them to scene/agents/ui/dash, runs the rAF loop (agents.update -> world.render ->\n// ui.updateChips), and live-syncs the PANELS on the app-wide 'nexus:tick' event + a slow fallback\n// interval — BOTH funnelled through a DEBOUNCER (scheduleRefresh) that enforces a min gap between\n// refreshes so the two triggers can never combine into a back-to-back request burst. When pinned to\n// a campaign (?campaign=ID), the 3D roster source is that campaign's MEMBER agents (matching the\n// campaign-scoped activity feed), not the global /api/agents list.\n// ADDITIVE: when /api/world/project carries a fresh run (project.run.id changed) that is running or\n// just-completed, it fires TWO complementary handoff cues — a one-time glowing beam across the\n// Director-first roster heads via agents.playHandoff(orderedIds), AND a physical handoff-walk where,\n// for each consecutive agent hop in the run's directorTrace steps (step name -> entry id, in order),\n// the GIVER walks the navmesh to the RECEIVER's desk via agents.handoffWalk(prev, next), spaced over\n// time so the visits chain. Both are fully guarded; neither ever affects the scene/movement\n// (continued below)\n// (the 3D keeps its own independent 60fps loop; fetches never block a frame). One /api/world/activity\n// call now feeds BOTH the logs AND per-agent status (no per-agent /runs fan-out anymore).\n//\n// FOOTGUNS (must hold): NO TS annotations inside the returned string; NO unescaped backticks / ${...}\n// inside it (plain string concat everywhere; \\\\uXXXX for emojis). Placement is owned by the office\n// module, so nothing in this entry needs determinism beyond what the factories provide.\n\nexport function getWorldJS(): string {\n return `\nimport { createWorld } from '/api/app-world-scene';\nimport { createOffice } from '/api/app-world-office';\nimport { createAgents } from '/api/app-world-agents';\nimport { createUI } from '/api/app-world-ui';\nimport { createDash } from '/api/app-world-dash';\n\n// ---------------------------------------------------------------------------\n// Auth + fetch helpers. Every /api request carries the NEXUS bearer token from\n// localStorage so the world sees the SAME real data as the main app.\n// ---------------------------------------------------------------------------\nvar NEXUS_TOKEN_KEY = 'nexus_token';\nfunction getToken() {\n try { return localStorage.getItem(NEXUS_TOKEN_KEY) || ''; } catch (e) { return ''; }\n}\n\n// ---------------------------------------------------------------------------\n// PER-CAMPAIGN scoping. When the page is opened with ?campaign=ID the whole\n// world (activity feed / kanban board / project brief) is scoped to that one\n// campaign. CAMPAIGN_ID is read ONCE from location.search and appended as a\n// query param to the three /api/world/* fetches when set.\n// ---------------------------------------------------------------------------\nvar CAMPAIGN_ID = '';\ntry {\n var qp = new URLSearchParams(window.location.search || '');\n CAMPAIGN_ID = String(qp.get('campaign') || '').trim();\n} catch (e) { CAMPAIGN_ID = ''; }\n\n// Append &campaign=ID (or ?campaign=ID) to a path only when a campaign is pinned.\nfunction withCampaign(path) {\n if (!CAMPAIGN_ID) return path;\n var sep = (String(path).indexOf('?') >= 0) ? '&' : '?';\n return path + sep + 'campaign=' + encodeURIComponent(CAMPAIGN_ID);\n}\nasync function apiFetch(path, opts) {\n opts = opts || {};\n var headers = new Headers(opts.headers || {});\n var tok = getToken();\n if (tok && !headers.has('Authorization')) headers.set('Authorization', 'Bearer ' + tok);\n if (opts.body && !headers.has('Content-Type')) headers.set('Content-Type', 'application/json');\n return fetch(path, Object.assign({}, opts, { headers: headers }));\n}\nasync function apiJSON(path, opts) {\n try {\n var res = await apiFetch(path, opts);\n if (!res || !res.ok) return null;\n return await res.json();\n } catch (e) { return null; }\n}\n\nfunction byId(id) { return document.getElementById(id); }\nfunction lower(s) { return String(s == null ? '' : s).toLowerCase().trim(); }\n\n// Normalize any run / agent status to one of: running | failed | completed | idle.\nfunction normStatus(s) {\n s = lower(s);\n if (s === 'running' || s === 'pending' || s === 'queued' || s === 'active' || s === 'in_progress') return 'running';\n if (s === 'failed' || s === 'error') return 'failed';\n if (s === 'completed' || s === 'done' || s === 'success' || s === 'succeeded') return 'completed';\n return 'idle';\n}\n\n// ---------------------------------------------------------------------------\n// DOM handles. The light dashboard shell (getWorldHTML) provides ALL of these.\n// The canvas + overlay live INSIDE #world-canvas-wrap (center stage); the five\n// dash handles are the grid/stage children the panels render into.\n// ---------------------------------------------------------------------------\nvar canvas = byId('world-canvas');\n\n// ---------------------------------------------------------------------------\n// Construct the cooperating modules. ORDER MATTERS: scene -> office (needs world)\n// -> agents (needs world + office) -> ui (needs world) -> dash (needs the panels).\n// createWorld now self-sizes to #world-canvas-wrap (the canvas' parent), NOT the\n// window. createUI keeps the (world, office, opts) signature for call-site churn;\n// office is ignored inside it.\n// ---------------------------------------------------------------------------\n// Director chat (STREAMING): POST the text to /api/chat/stream (Bearer) and read the SSE stream\n// frame-by-frame. The dash renders the live bubble via chatStreamStart() -> chatStreamChunk(delta)\n// per frame -> chatStreamEnd(); a {tool} event is surfaced when present. After the stream completes\n// we refreshAll() so any newly-created agents/campaigns/tasks appear. Wired to the top-bar\n// \"Direct the team\" input + Start New Project. The campaign scope rides along when pinned.\nasync function sendChat(text) {\n text = String(text == null ? '' : text).trim();\n if (!text) return null;\n var reply = '';\n var started = false;\n try { dash.chatStreamStart(); started = true; } catch (e) { started = false; }\n try {\n var payload = { message: text, workspace: 'marketing' };\n if (CAMPAIGN_ID) payload.campaign = CAMPAIGN_ID;\n var res = await apiFetch('/api/chat/stream', { method: 'POST', body: JSON.stringify(payload) });\n if (!res || !res.ok || !res.body) throw new Error('stream unavailable');\n var reader = res.body.getReader();\n var decoder = new TextDecoder();\n var buf = '';\n while (true) {\n var step = await reader.read();\n if (step.done) break;\n buf += decoder.decode(step.value, { stream: true });\n var parts = buf.split('\\\\n\\\\n');\n buf = parts.pop() || '';\n for (var pi = 0; pi < parts.length; pi++) {\n var part = parts[pi];\n if (!part || part.indexOf('data:') !== 0) continue;\n var ev = null;\n try { ev = JSON.parse(part.slice(5).trim()); } catch (e2) { ev = null; }\n if (!ev) continue;\n if (ev.tool != null) {\n try { dash.chatStreamTool(ev.tool); } catch (e3) {}\n // The Director decided to EXECUTE the campaign -> fire the real run from the browser so the\n // members start working (their runs stream into /api/world/activity). Guarded inside.\n if (ev.tool && ev.tool.name === 'run_campaign') { try { var _cid = (ev.tool && (ev.tool.campaign_id || (ev.tool.args && ev.tool.args.campaign_id))) || ''; var rp = runCampaignNow(_cid); if (rp && rp.catch) rp.catch(function () {}); } catch (e7) {} }\n continue;\n }\n if (ev.done) {\n if (ev.response != null) reply = String(ev.response);\n if (ev.error != null && !reply) reply = String(ev.error);\n } else if (ev.delta) {\n reply += String(ev.delta);\n try { dash.chatStreamChunk(String(ev.delta)); } catch (e4) {}\n }\n }\n }\n } catch (e) {\n // Fall back to the non-streaming endpoint so a missing/unsupported stream still answers.\n try {\n var data = await apiJSON('/api/chat', { method: 'POST', body: JSON.stringify({ message: text, workspace: 'marketing' }) });\n if (data && data.response != null) {\n reply = String(data.response);\n try { dash.chatStreamChunk(reply); } catch (e5) {}\n }\n } catch (e6) {}\n }\n if (started) { try { dash.chatStreamEnd(reply); } catch (e) {} }\n // ONE refresh after the stream COMPLETES (never per token); routed through the debouncer so it\n // coalesces with any concurrent nexus:tick/interval trigger instead of adding a request burst.\n setTimeout(function () { try { scheduleRefresh(); } catch (e) {} }, 700);\n return reply || null;\n}\n\n// ---------------------------------------------------------------------------\n// runCampaignNow(explicitId?): FIRE the real campaign run from the browser. The Director (in\n// the SSE stream) deciding to execute passes its frame's campaign_id, OR the dash Run button\n// lands here; the explicit id wins, else we fall back to the page-pinned CAMPAIGN_ID (so the\n// main /world entry with NO ?campaign can still run a campaign the Director names).\n// We POST /api/campaigns/<cid>/runs and RETURN A PROMISE that resolves\n// ONLY when the POST is accepted (res.ok) and REJECTS on a network error or a\n// 500 (!res.ok) — so the dash Run button can report REAL success/failure instead\n// of guessing on a timer. The world-nudge refreshAll() schedule still fires on a\n// successful accept so the bodies visibly start working ahead of the live-sync tick.\n// Double-fire guarded by an in-flight flag + a short cooldown (so a Director\n// tool-call + a Run-button tap in the same beat fire ONCE); a coalesced call\n// resolves harmlessly (the real run is already on its way) rather than reporting\n// a false failure.\nvar campaignRunInFlight = false; // a POST is in the air right now\nvar lastCampaignRunAt = 0; // timestamp of the last fired run (cooldown anchor)\nvar CAMPAIGN_RUN_COOLDOWN_MS = 8000; // min gap between two real runs we fire\nfunction runCampaignNow(explicitId) {\n // Resolve the campaign to run: an explicit id (e.g. the Director run_campaign frame's campaign_id,\n // or the dash Run button's row) wins; otherwise fall back to the page-pinned CAMPAIGN_ID. This is\n // what makes \"Run the Team\" work on the main /world entry (opened with NO ?campaign) — the id rides\n // in from the Director frame instead of the empty CAMPAIGN_ID.\n var cid = (explicitId && String(explicitId).trim()) || CAMPAIGN_ID;\n if (!cid) return Promise.resolve(); // nothing to run without ANY campaign id\n if (campaignRunInFlight) return Promise.resolve(); // a POST is already going out — coalesce (not a failure)\n var since = Date.now() - lastCampaignRunAt;\n if (lastCampaignRunAt !== 0 && since < CAMPAIGN_RUN_COOLDOWN_MS) return Promise.resolve(); // within cooldown — coalesce\n campaignRunInFlight = true;\n lastCampaignRunAt = Date.now();\n // Await the POST so the returned Promise reflects the REAL outcome: resolve on res.ok,\n // reject on a network error or a non-ok (e.g. 500) response. The dash awaits this.\n return apiFetch('/api/campaigns/' + encodeURIComponent(cid) + '/runs', { method: 'POST', body: '{}' })\n .then(function (res) {\n campaignRunInFlight = false;\n if (!res || !res.ok) throw new Error('campaign run rejected: ' + (res ? res.status : 'no response'));\n // Accepted: nudge the world a few times over ~10s so the members visibly start working ahead\n // of the slow live-sync tick. Each pass funnels through the debouncer so it never stampedes.\n var delays = [1200, 3500, 6500, 10000];\n for (var d = 0; d < delays.length; d++) {\n setTimeout(function () { try { scheduleRefresh(); } catch (e) {} }, delays[d]);\n }\n return true;\n }, function (err) {\n campaignRunInFlight = false;\n throw err; // network failure -> reject so the dash reports a REAL failure\n });\n}\n\nvar world = createWorld(canvas);\nvar office = createOffice(world);\nvar agents = createAgents(world, office);\nvar ui = createUI(world, office, {});\nvar dash = createDash({\n topbar: byId('world-topbar'),\n logs: byId('world-logs'),\n scenehead: byId('world-scenehead'),\n kanban: byId('world-kanban'),\n project: byId('world-project'),\n onChat: sendChat,\n onRunCampaign: runCampaignNow,\n onStartProject: function () { try { var t = document.querySelector('#world-topbar input'); if (t) t.focus(); } catch (e) {} }\n});\n\n// Chips project into the in-scene overlay (over the canvas only); the dash owns the panels.\nui.mount(byId('world-overlay'));\ndash.mount();\n\n// ---------------------------------------------------------------------------\n// Roster ordering. The active campaign (from /api/world/project) emphasizes its\n// director; the per-agent status feed drives rings + the moving spotlight.\n// ---------------------------------------------------------------------------\nvar roster = [];\nvar activeSpeakerId = null;\nvar preparedCount = -1; // -1 = uninitialised (no toast on the first read)\nvar booted = false;\nvar syncing = false; // guards refreshAll against overlapping live-sync triggers\nvar firstLogsRender = true; // first activity pass renders; later passes APPEND\nvar seenRunIds = {}; // run ids already in the logs panel (append-not-rebuild)\nvar lastHandoffRunId = null; // last project.run.id we flashed a handoff beam for (fire ONCE per run)\n\n// Map an agent's role/name to a coarse funnel/objective CATEGORY so members can be\n// grouped under the Director by what they do (research -> strategy -> compose -> ...).\n// The rank orders the groups; unknown roles sort last but keep relative order.\nfunction roleCategory(a) {\n var r = lower((a && a.role) || '') + ' ' + lower((a && a.name) || '');\n if (/director|lead/.test(r)) return 'director';\n if (/research|analy|insight|listen|monitor/.test(r)) return 'research';\n if (/strateg|plan|brief|objective/.test(r)) return 'strategy';\n if (/compos|writer|content|creativ|design|copy/.test(r)) return 'compose';\n if (/distribut|publish|social|post|send|outreach|campaign/.test(r)) return 'distribute';\n if (/measur|report|metric|track|optim|seo|growth/.test(r)) return 'measure';\n return 'support';\n}\nfunction categoryRank(cat) {\n switch (cat) {\n case 'director': return 0;\n case 'research': return 1;\n case 'strategy': return 2;\n case 'compose': return 3;\n case 'distribute': return 4;\n case 'measure': return 5;\n default: return 6;\n }\n}\n\n// (1) Pick the SOURCE roster that agents.sync renders. When the page is pinned to a campaign\n// (?campaign=ID) the activity feed + board + project are all scoped to that campaign's MEMBER\n// agents — so the 3D roster must be those SAME members (not the global /api/agents list), or the\n// bodies and the per-agent status feed would not line up. We therefore prefer the campaign's\n// member roster (project.campaign.agents -> {id,name,role}) when pinned, and only fall back to the\n// global agentList when no campaign members resolve (so the scene never renders empty). When NOT\n// pinned, the global agentList is the source as before.\nfunction rosterSource(agentList, campaign) {\n agentList = Array.isArray(agentList) ? agentList : [];\n // Only override with campaign members when the page is explicitly pinned to a campaign AND that\n // campaign actually carries members. Otherwise keep the global roster.\n if (CAMPAIGN_ID && campaign && Array.isArray(campaign.agents) && campaign.agents.length) {\n var members = [];\n for (var i = 0; i < campaign.agents.length; i++) {\n var m = campaign.agents[i] || {};\n var mid = String(m.agent_id != null ? m.agent_id : (m.id != null ? m.id : ''));\n if (!mid) continue;\n members.push({\n id: mid,\n name: String(m.name || (m.agent && m.agent.name) || 'Agent'),\n role: String(m.role || (m.agent && m.agent.role) || 'Agent'),\n // carry the real agent's status when the member shape includes it (sync ignores it; status\n // is driven by the scoped activity feed below — this is just a sensible default).\n status: (m.agent && m.agent.status) || m.status || null\n });\n }\n if (members.length) return members;\n }\n return agentList;\n}\n\n// Build the Director-first ordered roster, then group the remaining members by\n// role/category (research -> strategy -> compose -> distribute -> measure -> support).\n// (2) When a campaign is ACTIVE, PREPEND a synthetic Director lead so the world always\n// renders a Director body even when no real director agent exists in the roster. The lead\n// is otherwise the campaign's director (by id/name) when present, else an agent whose\n// role/name matches /director|lead/i, else index 0 stays the lead.\nfunction orderRoster(list, campaign) {\n list = Array.isArray(list) ? list.slice() : [];\n\n // (2) Synthetic Director: only when there is an active campaign. It is PREPENDED so\n // agents.sync renders a Director body even with an empty/director-less roster.\n if (campaign) {\n var campaignId = String(campaign.id != null ? campaign.id : (campaign.campaign_id != null ? campaign.campaign_id : ''));\n var hasRealDirector = false;\n var dId = String(campaign.director_id || campaign.directorId || campaign.lead_id || '');\n var dNm = lower(campaign.director || campaign.director_name || '');\n for (var di = 0; di < list.length; di++) {\n var da = list[di] || {};\n var dr = lower(da.role) + ' ' + lower(da.name);\n if ((dId && String(da.id) === dId) || (dNm && lower(da.name) === dNm) || /director|lead/.test(dr)) {\n hasRealDirector = true; break;\n }\n }\n if (!hasRealDirector) {\n list.unshift({\n id: 'director:' + campaignId,\n name: 'Director',\n role: 'director',\n __director: true,\n colorHex: '#4285F4'\n });\n }\n }\n\n if (!list.length) return list;\n\n // Find the lead (campaign director by id/name, else first /director|lead/, else index 0).\n var leadIdx = -1;\n if (campaign) {\n var dirId = String(campaign.director_id || campaign.directorId || campaign.lead_id || '');\n var dirName = lower(campaign.director || campaign.director_name || '');\n for (var i = 0; i < list.length; i++) {\n var a = list[i];\n if (a && a.__director) { leadIdx = i; break; }\n if (dirId && String(a.id) === dirId) { leadIdx = i; break; }\n if (dirName && lower(a.name) === dirName) { leadIdx = i; break; }\n }\n }\n if (leadIdx < 0) {\n for (var j = 0; j < list.length; j++) {\n var r = lower(list[j].role) + ' ' + lower(list[j].name);\n if (/director|lead/.test(r)) { leadIdx = j; break; }\n }\n }\n if (leadIdx > 0) {\n var lead = list.splice(leadIdx, 1)[0];\n list.unshift(lead);\n }\n\n // (3) Group the members AFTER the lead by role/category (stable within a group).\n if (list.length > 2) {\n var head = list.shift(); // the Director (index 0) stays first\n var decorated = [];\n for (var m = 0; m < list.length; m++) {\n decorated.push({ a: list[m], rank: categoryRank(roleCategory(list[m])), ord: m });\n }\n decorated.sort(function (x, y) {\n if (x.rank !== y.rank) return x.rank - y.rank;\n return x.ord - y.ord; // stable within a category\n });\n var grouped = [head];\n for (var g = 0; g < decorated.length; g++) grouped.push(decorated[g].a);\n list = grouped;\n }\n return list;\n}\n\n// Pick the freshest run per agent id from the (already cross-agent) activity feed.\n// The feed is ordered started_at DESC, so the FIRST row seen for an id is its latest.\nfunction latestRunByAgent(runs) {\n var map = {};\n if (!Array.isArray(runs)) return map;\n for (var i = 0; i < runs.length; i++) {\n var r = runs[i];\n if (!r) continue;\n var aid = String(r.agent_id == null ? '' : r.agent_id);\n if (!aid) continue;\n if (!map[aid]) map[aid] = r; // first occurrence = latest (feed is DESC)\n }\n return map;\n}\n\n// ---------------------------------------------------------------------------\n// driveHandoffWalks(run, roster): map each directorTrace AGENT step's name -> its roster entry id\n// (in step order), then for each consecutive hop physically walk the GIVER to the RECEIVER via\n// agents.handoffWalk(prev, next). Hops are SPACED OUT in time (each giver does a ~walk+talk+walk\n// round-trip) so the visits chain rather than stampede; consecutive duplicate ids are collapsed.\n// Fully guarded — any failure is swallowed so the scene/movement is never affected.\n// ---------------------------------------------------------------------------\nfunction buildAgentIndex(roster) {\n // name(lower) -> id and id -> id, so a directorTrace step (which carries a name) resolves to an\n // entry id. Names can collide; first-wins is fine (roster is small + Director-first).\n var byName = {};\n var ids = {};\n for (var i = 0; i < roster.length; i++) {\n var a = roster[i];\n if (!a || a.id == null) continue;\n var id = String(a.id);\n ids[id] = true;\n var nm = lower(a.name);\n if (nm && byName[nm] === undefined) byName[nm] = id;\n }\n return { byName: byName, ids: ids };\n}\nfunction stepAgentOrder(run, roster) {\n // Extract the ORDERED list of distinct entry ids from the run's directorTrace agent steps.\n var steps = (run && Array.isArray(run.steps)) ? run.steps : [];\n var idx = buildAgentIndex(roster);\n var out = [];\n var lastId = null;\n for (var i = 0; i < steps.length; i++) {\n var st = steps[i] || {};\n if (lower(st.t) !== 'agent') continue; // only agent hops (skip tool/think/etc.)\n var id = null;\n if (st.agent_id != null && idx.ids[String(st.agent_id)]) id = String(st.agent_id);\n else { var nm = lower(st.name); if (nm && idx.byName[nm] !== undefined) id = idx.byName[nm]; }\n if (!id) continue;\n if (id === lastId) continue; // collapse consecutive duplicates (no self-handoff)\n out.push(id);\n lastId = id;\n }\n return out;\n}\nfunction driveHandoffWalks(run, roster) {\n var ids = stepAgentOrder(run, roster);\n if (ids.length < 2) return;\n // Schedule each hop on its own timer so givers chain (one round-trip ~ walk + 2s talk + walk).\n // ~5s per hop is comfortably longer than a typical visit; failures inside are swallowed.\n var HOP_SPACING_MS = 5000;\n for (var h = 0; h < ids.length - 1; h++) {\n (function (fromId, toId, delay) {\n setTimeout(function () {\n try { agents.handoffWalk(fromId, toId); } catch (e) {}\n }, delay);\n })(ids[h], ids[h + 1], h * HOP_SPACING_MS);\n }\n}\n\n// ---------------------------------------------------------------------------\n// refreshAll: the SINGLE live-sync pass. Fetches the 3 panel endpoints + the\n// roster in parallel, distributes to agents (3D) + dash (panels), maps per-agent\n// status onto the avatars/spotlight, appends new log rows, and polls approvals.\n// Guarded by 'syncing' so overlapping triggers never double-run.\n// ---------------------------------------------------------------------------\nasync function refreshAll() {\n if (syncing) return;\n syncing = true;\n try {\n var results = await Promise.all([\n apiJSON(withCampaign('/api/world/project')),\n apiJSON(withCampaign('/api/world/board')),\n apiJSON(withCampaign('/api/world/activity?limit=40')),\n apiJSON('/api/agents')\n ]);\n var project = results[0] || { campaign: null, phase: 'idle', usage: null };\n var board = results[1] || { columns: [], counts: {} };\n var activity = results[2] || { runs: [] };\n var agentList = Array.isArray(results[3]) ? results[3] : [];\n\n var runs = Array.isArray(activity.runs) ? activity.runs : [];\n\n // (1)+(2) roster: when pinned to a campaign, the SOURCE is that campaign's MEMBER agents (so the\n // 3D bodies match the campaign-scoped activity feed); otherwise it's the global /api/agents list.\n // Then order Director-first (synthetic Director prepended when an active campaign has no real one).\n // agents.sync therefore receives the REAL member agents (not only the Director), and the per-agent\n // status loop below runs setStatus for EACH of them off the single scoped /api/world/activity feed.\n var campaign = project && project.campaign ? project.campaign : null;\n roster = orderRoster(rosterSource(agentList, campaign), campaign);\n try { agents.sync(roster, campaign); } catch (e) { /* keep the prior scene */ }\n\n // (3) panels: top bar + project + kanban + phase (keyed diff updates inside the dash).\n try { dash.renderTopbar(project, roster); } catch (e) {}\n try { dash.renderProject(project); } catch (e) {}\n try { dash.renderKanban(board); } catch (e) {}\n try { dash.setPhase(project && project.phase ? project.phase : 'idle'); } catch (e) {}\n\n // (4) LOGS append-not-rebuild: first pass renders the list; later passes prepend ONLY\n // rows we have not seen, and let the dash update an existing row in place when its status\n // flips (keyed by run id) — the panel never flickers / full-rebuilds on a tick.\n try {\n if (firstLogsRender) {\n dash.renderLogs(runs);\n firstLogsRender = false;\n for (var s = 0; s < runs.length; s++) if (runs[s] && runs[s].id != null) seenRunIds[String(runs[s].id)] = true;\n } else {\n var fresh = [];\n for (var n = 0; n < runs.length; n++) {\n var rr = runs[n];\n if (!rr || rr.id == null) continue;\n if (!seenRunIds[String(rr.id)]) { fresh.push(rr); seenRunIds[String(rr.id)] = true; }\n }\n // appendLogs both prepends new rows AND updates known rows in place (running->completed).\n dash.appendLogs(fresh.length ? fresh : runs);\n }\n } catch (e) {}\n\n // (5) per-agent status -> 3D. The feed is already cross-agent, so NO per-agent fan-out:\n // resolve each roster id's latest run, set the avatar status, and spotlight the first\n // running agent (lead-priority since roster is Director-first).\n var latest = latestRunByAgent(runs);\n var firstRunning = null;\n for (var k = 0; k < roster.length; k++) {\n var aid = String(roster[k].id);\n var run = latest[aid] || null;\n var status = run ? normStatus(run.status) : 'idle';\n try { agents.setStatus(aid, status, run); } catch (e) {}\n if (status === 'running' && firstRunning == null) firstRunning = aid;\n }\n updateSpeaker(firstRunning);\n\n // (5b) ADDITIVE handoff: when a NEW campaign run appears (project.run.id changed) AND it is\n // running or just-completed, fire BOTH handoff cues across the run's actual step order. Fully\n // guarded — any failure leaves the rest of the scene untouched. The run id is recorded so the\n // handoff fires ONCE per run, not on every 4s live-sync tick.\n // - playHandoff: a one-time glowing beam across the Director-first roster heads (complementary).\n // - handoffWalk: drives the GIVER to physically WALK to the RECEIVER for each consecutive hop in\n // the run's directorTrace steps — map each agent step's name -> its entry id (in order), then\n // handoffWalk(prev, next) per hop. Spaced out over time so the walks chain, not stampede.\n try {\n var prun = project && project.run ? project.run : null;\n if (prun && prun.id != null) {\n var rid2 = String(prun.id);\n var rstat = normStatus(prun.status);\n var freshRun = (rid2 !== lastHandoffRunId);\n if (freshRun && (rstat === 'running' || rstat === 'completed')) {\n lastHandoffRunId = rid2;\n // (i) complementary beam across the Director-first roster heads.\n var orderedIds = [];\n for (var ri = 0; ri < roster.length; ri++) {\n if (roster[ri] && roster[ri].id != null) orderedIds.push(String(roster[ri].id));\n }\n if (orderedIds.length >= 2) { try { agents.playHandoff(orderedIds); } catch (eb) {} }\n // (ii) physical handoff-walk between consecutive agents in the run's directorTrace steps.\n try { driveHandoffWalks(prun, roster); } catch (ew) {}\n } else if (freshRun) {\n // A new run id we are NOT animating (e.g. failed/idle): still record it so a later flip to\n // running/completed for the SAME id does not retroactively replay an old run's beam.\n lastHandoffRunId = rid2;\n }\n }\n } catch (e) {}\n\n // (6) approvals toast (prepared count INCREASED -> a deliverable is ready for review).\n await pollActions();\n } catch (e) { /* keep the prior frame on a transient failure */ }\n syncing = false;\n}\n\n// Drive the active-speaker highlight + the scene spotlight. ui.setActive rings the chip;\n// world.spotlightOn (via agents.setStatus) follows the head, so here we set the chip + the\n// camera/spot target via the agents' head position.\nfunction updateSpeaker(speakerId) {\n // Always re-track a moving head while the same speaker stays active.\n if (speakerId === activeSpeakerId) {\n if (speakerId) {\n var hp = headPosFor(speakerId);\n if (hp) { try { world.spotlightOn(hp); } catch (e) {} }\n }\n return;\n }\n activeSpeakerId = speakerId;\n try { ui.setActive(speakerId || null); } catch (e) {}\n if (speakerId) {\n var pos = headPosFor(speakerId);\n try { world.spotlightOn(pos || null); } catch (e) {}\n } else {\n try { world.spotlightOn(null); } catch (e) {}\n }\n}\n\n// Look up a fresh head world-position for an agent id from the agents entries.\nfunction headPosFor(id) {\n var list = agents.entries();\n for (var i = 0; i < list.length; i++) {\n if (String(list[i].id) === String(id)) {\n try { return list[i].headWorldPos(); } catch (e) { return null; }\n }\n }\n return null;\n}\n\n// Approvals toast: when the number of 'prepared' actions INCREASES, a new deliverable\n// is awaiting review. Tolerant of the list/object response shapes.\nasync function pollActions() {\n var n = null;\n var prepared = await apiJSON('/api/actions?status=prepared');\n if (Array.isArray(prepared)) {\n n = prepared.length;\n } else if (prepared && Array.isArray(prepared.actions)) {\n n = 0;\n for (var p = 0; p < prepared.actions.length; p++) if (lower(prepared.actions[p] && prepared.actions[p].status) === 'prepared') n++;\n } else {\n var all = await apiJSON('/api/actions');\n if (Array.isArray(all)) {\n n = 0;\n for (var i = 0; i < all.length; i++) if (lower(all[i] && all[i].status) === 'prepared') n++;\n } else if (all && Array.isArray(all.actions)) {\n n = 0;\n for (var j = 0; j < all.actions.length; j++) if (lower(all.actions[j] && all.actions[j].status) === 'prepared') n++;\n }\n }\n if (n == null) return;\n if (preparedCount >= 0 && n > preparedCount) {\n try { dash.toast('A deliverable is ready for review'); } catch (e) {}\n }\n preparedCount = n;\n}\n\n// ---------------------------------------------------------------------------\n// Boot: load the floor (office.glb) + the character GLB in parallel, then do the\n// first refreshAll(), then start live-sync. The dash shows its empty-state (no\n// agents / \"No active brief\") until data arrives.\n// ---------------------------------------------------------------------------\nasync function boot() {\n if (booted) return;\n booted = true;\n try {\n await Promise.all([ office.loadFloor(), agents.loadAssets() ]);\n } catch (e) { /* the factories fall back internally; the scene still renders */ }\n await refreshAll();\n startLiveSync();\n}\n\n// ---------------------------------------------------------------------------\n// Live-sync: refresh the PANELS (and per-agent 3D status) on the app-wide\n// 'nexus:tick' event AND on a slow interval fallback. (2) TO AVOID HAMMERING the\n// backend, ALL triggers funnel through scheduleRefresh(), which DEBOUNCES them:\n// - refreshAll() does 4 panel fetches + the actions poll, so each pass is ~5\n// requests; firing it from BOTH the 6s nexus:tick AND a fast interval would\n// double (or worse) the request volume.\n// - scheduleRefresh enforces a MIN_REFRESH_MS gap between refresh STARTS and\n// coalesces any triggers inside that window into ONE trailing refresh, so the\n// event + the interval can never both kick off a full burst back-to-back.\n// - the 'syncing' flag in refreshAll remains the concurrency guard (no overlap);\n// scheduleRefresh is the rate guard (no stampede).\n// The single /api/world/activity call still feeds BOTH logs and per-agent status,\n// so one pass keeps rings/chips/spotlight + panels fresh together — no separate\n// status-only interval, no per-agent /runs fan-out, no per-token chat refresh.\n// ---------------------------------------------------------------------------\nvar MIN_REFRESH_MS = 5000; // hard floor between refresh starts (coalescing window)\nvar lastRefreshAt = 0; // timestamp of the last refresh START (0 = never)\nvar refreshTimer = null; // pending trailing-refresh timer id (null = none scheduled)\n\n// Run a refresh now and stamp the start time, so the debouncer can space the next one.\nfunction runRefreshNow() {\n refreshTimer = null;\n lastRefreshAt = Date.now();\n try { refreshAll(); } catch (e) {}\n}\n\n// Debounced refresh entry point. If enough time has passed since the last refresh we run\n// immediately; otherwise we schedule a SINGLE trailing refresh at the window boundary and\n// collapse any further triggers that arrive before it fires (refreshTimer stays set).\nfunction scheduleRefresh() {\n if (document.hidden) return;\n if (refreshTimer != null) return; // a trailing refresh is already queued — coalesce\n var since = Date.now() - lastRefreshAt;\n if (lastRefreshAt === 0 || since >= MIN_REFRESH_MS) {\n runRefreshNow();\n } else {\n refreshTimer = setTimeout(runRefreshNow, MIN_REFRESH_MS - since);\n }\n}\n\nvar liveStarted = false;\nfunction startLiveSync() {\n if (liveStarted) return;\n liveStarted = true;\n lastRefreshAt = Date.now(); // boot() already ran one refresh; count it so we don't double-fire.\n window.addEventListener('nexus:tick', scheduleRefresh);\n // Slow fallback in case nexus:tick is not running on this page; the debouncer guarantees the\n // event + this interval can never combine into more than one refresh per MIN_REFRESH_MS.\n setInterval(scheduleRefresh, 8000);\n}\n\n// ---------------------------------------------------------------------------\n// rAF loop (EXACT order): advance mixers + ambient, render the world (controls +\n// spotlight lerp), THEN project the in-scene chips from the just-rendered camera\n// so they sit crisply over the heads. This loop runs independently at ~60fps and\n// is NEVER blocked by fetches (refreshAll is event/interval-driven, fully awaited).\n// ---------------------------------------------------------------------------\nfunction frame() {\n // Schedule the NEXT frame FIRST so a throw anywhere below can never kill the loop.\n requestAnimationFrame(frame);\n var dt = 0.016;\n try { dt = world.clock.getDelta(); } catch (e) { dt = 0.016; }\n try { agents.update(dt); } catch (e) { /* keep rendering */ }\n try { world.render(); } catch (e) { /* fallback handled inside render() */ }\n try { ui.updateChips(agents.entries()); } catch (e) { /* chips optional */ }\n}\n\n// Kick everything off.\nboot();\nrequestAnimationFrame(frame);\n`;\n}\n",[254],"56e08cca-5b19-11f1-8302-ee650bb23af1","frontend_widgets.ts","a304c91c-589f-11f1-b75f-ee650bb23af1",463,["D",1780029981482],2,"// Nexus widgets module — small UI primitives for the CommandCenter and Signals workspaces.\n// Served at /api/app-widgets, dynamically imported by frontend_command.ts and SalesWorkspace.\n// Shared deps from window.__nexus.\n\nexport function getWidgetsJS(): string {\n return `\nimport React, { useState, useEffect, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\nconst fmtNum = (v, unit) => {\n if (v == null) return '—';\n const n = Math.abs(Number(v) || 0);\n const sign = (Number(v) || 0) < 0 ? '-' : '';\n if (n >= 1e9) return sign + (n/1e9).toFixed(1) + 'B' + (unit ? ' ' + unit : '');\n if (n >= 1e6) return sign + (n/1e6).toFixed(1) + 'M' + (unit ? ' ' + unit : '');\n if (n >= 1e3) return sign + (n/1e3).toFixed(1) + 'k' + (unit ? ' ' + unit : '');\n return sign + (Number.isInteger(n) ? n : n.toFixed(1)) + (unit ? ' ' + unit : '');\n};\nconst fmtRel = (iso) => {\n if (!iso) return '';\n const ms = Date.now() - new Date(iso).getTime();\n if (ms < 60000) return 'just now';\n if (ms < 3600000) return Math.floor(ms/60000) + 'm ago';\n if (ms < 86400000) return Math.floor(ms/3600000) + 'h ago';\n return Math.floor(ms/86400000) + 'd ago';\n};\n\n// ─── NSM HERO ────────────────────────────────────────────────────────────────\n// Giant current value + target + on-track badge. Polls /api/nsm/progress.\nexport function NSMHero({setActivePage}) {\n const {Icon, Btn} = N();\n const [data, setData] = useState(null);\n const [editing, setEditing] = useState(false);\n const [draft, setDraft] = useState({metric_name:'', metric_source:'ga4', metric_key:'sessions', target_value:'', target_date:'', unit:'count', description:''});\n const [saving, setSaving] = useState(false);\n\n const load = () => fetch('/api/nsm/progress').then(r => r.json()).then(setData).catch(() => setData({error: true}));\n useEffect(() => { load(); const iv = setInterval(load, 300000); return () => clearInterval(iv); }, []);\n\n const saveNSM = async () => {\n if (!draft.metric_name.trim() || !draft.target_value || !draft.target_date) return;\n setSaving(true);\n try {\n await fetch('/api/nsm', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n metric_name: draft.metric_name.trim(),\n metric_source: draft.metric_source || 'custom',\n metric_key: draft.metric_key || null,\n target_value: parseFloat(draft.target_value) || 0,\n target_date: draft.target_date,\n unit: draft.unit || 'count',\n description: draft.description || null,\n })\n });\n setEditing(false);\n await load();\n } finally { setSaving(false); }\n };\n\n if (!data) return h('div', {className:'glass-panel rounded-xl p-lg h-[180px] flex items-center justify-center'},\n h('div', {className:'text-text-muted text-[13px]'}, 'Loading North Star…')\n );\n\n // No NSM set yet — render a \"set one\" CTA\n if (!data.current && !data.target) {\n return h('div', {className:'glass-panel rounded-xl p-lg'},\n h('div', {className:'flex items-center justify-between mb-3'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'star', size:20, filled:true, className:'text-primary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-primary'}, 'North Star Metric')\n ),\n !editing && h(Btn, {onClick: () => setEditing(true), variant:'primary', size:'sm'},\n h(Icon, {name:'add', size:14}), 'Set NSM'\n )\n ),\n !editing && h('div', {className:'text-text-muted text-[13px] py-6 text-center'},\n 'No North Star set. Define the one metric your team is steering toward.'\n ),\n editing && h('div', {className:'space-y-2.5'},\n h('input', {value: draft.metric_name, onChange: e => setDraft(d => ({...d, metric_name: e.target.value})), placeholder:'Metric name (e.g. Weekly Active Outreach Sequences)', className:'w-full bg-surface-container-lowest border border-border-subtle rounded-md px-3 py-2 text-[13px] text-on-surface'}),\n h('div', {className:'grid grid-cols-2 gap-2'},\n h('select', {value: draft.metric_source, onChange: e => setDraft(d => ({...d, metric_source: e.target.value})), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-2 text-[13px] text-on-surface'},\n ['ga4','gsc','ahrefs','gmail','outlook','youtube','linkedin','wordpress','custom'].map(s => h('option', {key:s, value:s}, s))\n ),\n h('input', {value: draft.metric_key, onChange: e => setDraft(d => ({...d, metric_key: e.target.value})), placeholder:'metric_key (e.g. sessions)', className:'bg-surface-container-lowest border border-border-subtle rounded-md px-3 py-2 text-[13px] text-on-surface'})\n ),\n h('div', {className:'grid grid-cols-3 gap-2'},\n h('input', {type:'number', value: draft.target_value, onChange: e => setDraft(d => ({...d, target_value: e.target.value})), placeholder:'Target', className:'bg-surface-container-lowest border border-border-subtle rounded-md px-3 py-2 text-[13px] text-on-surface font-mono-data'}),\n h('input', {type:'date', value: draft.target_date, onChange: e => setDraft(d => ({...d, target_date: e.target.value})), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-3 py-2 text-[13px] text-on-surface font-mono-data'}),\n h('select', {value: draft.unit, onChange: e => setDraft(d => ({...d, unit: e.target.value})), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-2 text-[13px] text-on-surface'},\n ['count','%','$','ratio'].map(s => h('option', {key:s, value:s}, s))\n )\n ),\n h('div', {className:'flex justify-end gap-2'},\n h(Btn, {onClick: () => setEditing(false), variant:'ghost', size:'sm'}, 'Cancel'),\n h(Btn, {onClick: saveNSM, variant:'primary', size:'sm', disabled: saving}, saving ? 'Saving…' : 'Set North Star')\n )\n )\n );\n }\n\n const onTrack = !!data.on_track;\n const pct = Math.round(data.pct_complete || 0);\n return h('div', {className:'glass-panel rounded-xl p-lg relative overflow-hidden'},\n h('div', {className:'absolute -right-8 -top-8 w-40 h-40 rounded-full blur-3xl ' + (onTrack ? 'bg-secondary/10' : 'bg-error/10') + ' pointer-events-none'}),\n h('div', {className:'flex items-center justify-between mb-3 relative'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'star', size:20, filled:true, className:'text-primary'}),\n h('div', null,\n h('div', {className:'text-[11px] font-bold uppercase tracking-widest text-primary'}, 'North Star Metric'),\n h('div', {className:'text-[12px] text-text-muted truncate max-w-[280px]'}, data.metric_name || '')\n )\n ),\n h('span', {className:'inline-flex items-center gap-1 px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border ' +\n (onTrack ? 'bg-secondary/10 text-secondary border-secondary/30' : 'bg-error/10 text-error border-error/30')},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + (onTrack ? 'bg-secondary pulse-dot' : 'bg-error')}),\n onTrack ? 'On Track' : 'Off Track'\n )\n ),\n h('div', {className:'flex items-end gap-3 relative'},\n h('span', {className:'text-[48px] font-extrabold tracking-tight font-mono-data text-on-surface leading-none', style:{fontVariantNumeric:'tabular-nums'}},\n fmtNum(data.current, data.unit && data.unit !== 'count' ? data.unit : '')\n ),\n h('div', {className:'pb-1'},\n h('div', {className:'text-[11px] text-text-muted'}, 'Target ' + fmtNum(data.target, data.unit && data.unit !== 'count' ? data.unit : '')),\n h('div', {className:'text-[11px] font-mono-data ' + (onTrack ? 'text-secondary' : 'text-error')}, pct + '% complete · ' + (data.days_remaining ?? 0) + 'd left')\n )\n ),\n h('div', {className:'mt-3 h-1.5 bg-surface-container rounded-full overflow-hidden relative'},\n h('div', {className:'h-full transition-all ' + (onTrack ? 'bg-secondary' : 'bg-tertiary'), style:{width: Math.min(100, pct) + '%'}})\n ),\n h('div', {className:'mt-2 flex justify-between items-center text-[10px] text-text-muted relative'},\n h('span', null, data.velocity_per_day != null ? ('velocity ' + (data.velocity_per_day >= 0 ? '+' : '') + data.velocity_per_day.toFixed(2) + '/day') : ''),\n h('button', {onClick: () => setEditing(true), className:'text-primary hover:underline'}, 'Edit')\n ),\n editing && h('div', {className:'mt-3 pt-3 border-t border-border-subtle space-y-2'},\n h('input', {value: draft.metric_name, onChange: e => setDraft(d => ({...d, metric_name: e.target.value})), placeholder: data.metric_name, className:'w-full bg-surface-container-lowest border border-border-subtle rounded-md px-3 py-2 text-[13px] text-on-surface'}),\n h('div', {className:'flex gap-2'},\n h('input', {type:'number', value: draft.target_value, onChange: e => setDraft(d => ({...d, target_value: e.target.value})), placeholder:'new target', className:'flex-1 bg-surface-container-lowest border border-border-subtle rounded-md px-3 py-2 text-[13px] text-on-surface font-mono-data'}),\n h('input', {type:'date', value: draft.target_date, onChange: e => setDraft(d => ({...d, target_date: e.target.value})), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-3 py-2 text-[13px] text-on-surface font-mono-data'}),\n h(Btn, {onClick: saveNSM, variant:'primary', size:'sm', disabled: saving}, saving ? '…' : 'Save'),\n h(Btn, {onClick: () => setEditing(false), variant:'ghost', size:'sm'}, 'X')\n )\n )\n );\n}\n\n// ─── TODAY PANEL ─────────────────────────────────────────────────────────────\nexport function TodayPanel({setActivePage}) {\n const {Icon, Btn} = N();\n const [events, setEvents] = useState([]);\n const [loading, setLoading] = useState(true);\n const load = () => {\n setLoading(true);\n fetch('/api/calendar/today').then(r => r.json()).then(d => setEvents(Array.isArray(d) ? d : [])).catch(() => setEvents([])).finally(() => setLoading(false));\n };\n useEffect(() => { load(); const iv = setInterval(load, 300000); return () => clearInterval(iv); }, []);\n\n const toggleTaskDone = async (ev) => {\n if (ev.source !== 'task') return;\n const taskId = (ev.id || '').replace(/^task_/, '');\n try {\n await fetch('/api/tasks/' + taskId, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({status: ev.status === 'done' ? 'todo' : 'done'})});\n load();\n } catch {}\n };\n\n const today = new Date();\n const fmtDate = today.toLocaleDateString('en-US', {weekday:'short', day:'numeric', month:'short'});\n\n return h('div', {className:'glass-panel rounded-xl p-lg flex flex-col h-full min-h-[320px]'},\n h('div', {className:'flex items-center justify-between mb-3'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'today', size:18, filled:true, className:'text-tertiary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-tertiary'}, 'TODAY · ' + fmtDate)\n ),\n h('button', {onClick: () => setActivePage('calendar'), className:'text-[11px] text-primary hover:underline font-semibold'}, 'Open Calendar →')\n ),\n loading ? h('div', {className:'flex-1 flex items-center justify-center text-text-muted text-[12px]'}, 'Loading…')\n : events.length === 0 ? h('div', {className:'flex-1 flex flex-col items-center justify-center text-text-muted text-[12px] gap-2'},\n h(Icon, {name:'event_available', size:32, className:'text-text-muted/50'}),\n h('span', null, 'Clear schedule today'),\n h('button', {onClick: () => setActivePage('calendar'), className:'text-primary hover:underline text-[11px]'}, 'Add an event')\n )\n : h('div', {className:'flex-1 overflow-y-auto space-y-1.5 pr-1 -mr-1'},\n events.slice(0, 12).map(ev => h('div', {key: ev.id, className:'flex items-start gap-2 p-2 rounded-md hover:bg-surface-container-lowest cursor-pointer group'},\n ev.source === 'task'\n ? h('button', {onClick: () => toggleTaskDone(ev), className:'mt-0.5 w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center ' + (ev.status === 'done' ? 'bg-secondary border-secondary' : 'border-border-subtle hover:border-primary')},\n ev.status === 'done' && h(Icon, {name:'check', size:10, className:'text-on-secondary'})\n )\n : h('span', {className:'mt-1 w-1.5 h-1.5 rounded-full flex-shrink-0', style:{background: ev.color}}),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'flex items-center gap-1.5 text-[12px]'},\n ev.time && h('span', {className:'font-mono-data text-text-muted'}, ev.time),\n h('span', {className:'truncate ' + (ev.status === 'done' ? 'line-through text-text-muted' : 'text-on-surface')}, ev.title)\n ),\n ev.description && h('div', {className:'text-[10px] text-text-muted truncate mt-0.5'}, ev.description.slice(0, 80))\n ),\n ev.linked_url && ev.source === 'google_calendar' && h('a', {href: ev.linked_url, target:'_blank', rel:'noopener', className:'opacity-0 group-hover:opacity-100 text-primary'},\n h(Icon, {name:'open_in_new', size:14})\n )\n ))\n )\n );\n}\n\n// ─── HOT SIGNALS PANEL ───────────────────────────────────────────────────────\nexport function HotSignalsPanel({onDraftOutreach}) {\n const {Icon, Btn} = N();\n const [leads, setLeads] = useState([]);\n const [loading, setLoading] = useState(true);\n const load = () => {\n setLoading(true);\n fetch('/api/signals/hot-leads').then(r => r.json()).then(d => setLeads(Array.isArray(d) ? d : [])).catch(() => setLeads([])).finally(() => setLoading(false));\n };\n useEffect(() => { load(); const iv = setInterval(load, 30000); return () => clearInterval(iv); }, []);\n\n return h('div', {className:'glass-panel rounded-xl flex flex-col h-[480px]'},\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-center'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'local_fire_department', size:20, filled:true, className:'text-error'}),\n h('h3', {className:'text-[16px] font-bold tracking-tight'}, 'Hot Signals'),\n leads.length > 0 && h('span', {className:'text-[10px] font-bold uppercase tracking-widest bg-error/10 text-error border border-error/30 px-2 py-0.5 rounded-full pulse-dot'},\n leads.length + ' HOT'\n )\n ),\n h('div', {className:'flex items-center gap-1'},\n // P3 wire: CSV export of all signals (token-bearing download — see __nexusDownload)\n h('button', {onClick: () => window.__nexusDownload('/api/export/signals'), title:'Export signals CSV',\n className:'p-1.5 rounded hover:bg-surface-container-high text-text-muted hover:text-on-surface'},\n h(Icon, {name:'download', size:16})\n ),\n h('button', {onClick: load, className:'p-1.5 rounded hover:bg-surface-container-high text-text-muted hover:text-on-surface'},\n h(Icon, {name: loading ? 'sync' : 'refresh', size:16, className: loading ? 'spin' : ''})\n )\n )\n ),\n h('div', {className:'flex-1 overflow-y-auto p-md space-y-2'},\n loading && leads.length === 0 && h('div', {className:'flex items-center justify-center py-8 text-text-muted text-[12px]'}, 'Scanning signals…'),\n !loading && leads.length === 0 && h('div', {className:'text-center py-8 text-text-muted text-[12px]'},\n h(Icon, {name:'search_off', size:28, className:'text-text-muted/50 mb-2 mx-auto block'}),\n h('div', null, 'No hot leads detected'),\n h('div', {className:'text-[10px] mt-1'}, 'Connect Gmail or Outlook to surface intent signals.')\n ),\n leads.map(lead => h('div', {key: lead.email, className:'p-3 rounded-lg border border-border-subtle bg-surface-container-lowest hover:border-error/40 transition-all'},\n h('div', {className:'flex items-start justify-between gap-2 mb-1.5'},\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[13px] font-bold text-on-surface truncate'}, lead.name || lead.email),\n h('div', {className:'text-[10px] text-text-muted truncate'}, lead.email + (lead.company ? ' · ' + lead.company : ''))\n ),\n h('span', {className:'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-error/10 text-error border border-error/30'},\n lead.score\n )\n ),\n h('div', {className:'flex flex-wrap gap-1 mb-2'},\n (lead.top_signals || []).slice(0, 3).map((s, i) => h('span', {key: i, className:'px-1.5 py-0.5 text-[9px] font-mono-data uppercase tracking-wider bg-surface-container-high text-on-surface-variant rounded'}, s.replace(/_/g, ' ')))\n ),\n h('div', {className:'flex items-center justify-between text-[10px] text-text-muted'},\n h('span', null, lead.signal_count + ' signals · ' + fmtRel(lead.last_detected_at)),\n h('button', {\n onClick: () => onDraftOutreach && onDraftOutreach({email: lead.email, name: lead.name, company: lead.company, signal: (lead.top_signals||[])[0]}),\n className:'text-primary hover:underline font-semibold'\n }, 'Draft Outreach →')\n )\n ))\n )\n );\n}\n\n// ─── DIGEST PANEL ────────────────────────────────────────────────────────────\nexport function DigestPanel() {\n const {Icon, Btn, Spinner} = N();\n const [digest, setDigest] = useState(null);\n const [loading, setLoading] = useState(true);\n const [generating, setGenerating] = useState(false);\n // P3 wire: history dropdown — backend already exposed at /api/digest/history\n const [history, setHistory] = useState([]);\n const [historyOpen, setHistoryOpen] = useState(false);\n useEffect(() => {\n fetch('/api/digest/history?limit=10').then(r => r.json()).then(d => setHistory(Array.isArray(d) ? d : [])).catch(() => {});\n }, []);\n\n const load = () => {\n setLoading(true);\n fetch('/api/digest/latest').then(r => r.json()).then(d => setDigest(d && d.headline ? d : null)).catch(() => setDigest(null)).finally(() => setLoading(false));\n };\n useEffect(load, []);\n\n const generate = async () => {\n setGenerating(true);\n try {\n const d = await fetch('/api/digest/generate', {method:'POST'}).then(r => r.json());\n if (d && d.headline) setDigest(d);\n } finally { setGenerating(false); }\n };\n\n const statusStyle = (s) =>\n s === 'on_track' ? 'bg-secondary/10 text-secondary border-secondary/30'\n : s === 'at_risk' ? 'bg-tertiary/10 text-tertiary border-tertiary/30'\n : s === 'off_track' ? 'bg-error/10 text-error border-error/30'\n : 'bg-surface-container-high text-text-muted border-border-subtle';\n\n return h('div', {className:'glass-panel rounded-xl p-lg flex flex-col min-h-[280px]'},\n h('div', {className:'flex items-center justify-between mb-3'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'auto_stories', size:18, filled:true, className:'text-primary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-primary'}, 'Growth Digest')\n ),\n h('div', {className:'flex items-center gap-1.5'},\n // P3 wire: digest history dropdown (was orphaned — backend at /api/digest/history)\n history.length > 0 && h('button', {\n onClick: () => setHistoryOpen(o => !o),\n className:'text-[11px] text-text-muted hover:text-on-surface px-2 py-1 rounded hover:bg-surface-container-high transition-colors flex items-center gap-1'\n },\n h(Icon, {name:'history', size:13}),\n 'History (' + history.length + ')'\n ),\n h(Btn, {onClick: generate, variant: digest ? 'ghost' : 'primary', size:'sm', disabled: generating},\n generating ? h(Spinner, {size:12}) : h(Icon, {name: digest ? 'refresh' : 'auto_awesome', size:13}),\n generating ? 'Generating…' : (digest ? 'Regenerate' : 'Generate Now')\n )\n )\n ),\n // History panel (collapsible)\n historyOpen && history.length > 0 && h('div', {className:'mb-3 p-2 rounded-md border border-border-subtle bg-surface-container-lowest max-h-[140px] overflow-y-auto'},\n history.map((entry, i) => h('div', {\n key: i,\n className:'flex items-start gap-2 py-1.5 px-1 text-[11px] cursor-pointer hover:bg-surface-container-high rounded',\n onClick: () => { setDigest(entry); setHistoryOpen(false); }\n },\n h('span', {className:'text-text-muted font-mono-data flex-shrink-0'}, entry.week_of || '—'),\n h('span', {className:'text-on-surface-variant truncate'}, entry.headline || '(no headline)')\n ))\n ),\n loading ? h('div', {className:'flex-1 flex items-center justify-center text-text-muted text-[12px]'}, 'Loading…')\n : !digest ? h('div', {className:'flex-1 flex flex-col items-center justify-center text-center text-text-muted text-[12px] gap-2'},\n h(Icon, {name:'auto_stories', size:32, className:'text-text-muted/50'}),\n h('span', null, 'No digest yet for this week.'),\n h('span', {className:'text-[10px]'}, 'Generate one to summarize NSM + OKR + experiments.')\n )\n : h('div', {className:'flex-1 flex flex-col gap-3 overflow-y-auto'},\n h('div', {className:'flex items-start gap-3'},\n h('span', {className:'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-widest border ' + statusStyle(digest.nsm_status)},\n (digest.nsm_status || 'unknown').replace(/_/g, ' ')\n ),\n h('span', {className:'text-[10px] text-text-muted font-mono-data'}, 'Week of ' + (digest.week_of || ''))\n ),\n h('p', {className:'text-[15px] leading-snug font-semibold text-on-surface'}, digest.headline),\n digest.top_win && h('div', {className:'flex items-start gap-2 text-[12px]'},\n h('span', {className:'text-secondary font-bold flex-shrink-0'}, '✓ WIN'),\n h('span', {className:'text-on-surface-variant'}, digest.top_win)\n ),\n digest.top_risk && h('div', {className:'flex items-start gap-2 text-[12px]'},\n h('span', {className:'text-error font-bold flex-shrink-0'}, '⚠ RISK'),\n h('span', {className:'text-on-surface-variant'}, digest.top_risk)\n ),\n Array.isArray(digest.next_actions) && digest.next_actions.length > 0 && h('div', {className:'pt-2 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1.5'}, 'Next Actions'),\n h('ul', {className:'space-y-1 text-[12px]'},\n digest.next_actions.slice(0, 5).map((a, i) => h('li', {key: i, className:'flex items-start gap-2'},\n h('span', {className:'text-primary flex-shrink-0'}, '→'),\n h('span', {className:'text-on-surface-variant'}, a)\n ))\n )\n )\n )\n );\n}\n`;\n}\n",[262],"66eefcee-58c8-11f1-8be1-ee650bb23af1","frontend_ui.ts","8f5e62f0-5792-11f1-81bc-ee650bb23af1",232,["D",1779775316358],"// Shared UI primitives + DataDisplay — served at /api/app-ui as ES module\n// Tailwind classNames + Material Symbols icons. Design: Nexus AI / Obsidian Command.\nexport function getUIJS(): string {\n return `\nimport React, { useState } from 'react';\n\nconst h = React.createElement;\nconst fmtNum = v => typeof v!=='number'?v:v>=1e9?(v/1e9).toFixed(1)+'B':v>=1e6?(v/1e6).toFixed(1)+'M':v>=1e3?(v/1e3).toFixed(1)+'K':String(v);\nfunction exportCSV(data,filename='export.csv'){\n const rows=(Array.isArray(data)?data:Object.values(data||{}).find(v=>Array.isArray(v)&&v.length)||[data]).filter(r=>r&&typeof r==='object');\n if(!rows.length)return;\n const keys=Object.keys(rows[0]);\n const csv=[keys.join(','),...rows.map(r=>keys.map(k=>JSON.stringify(r[k]??'')).join(','))].join('\\\\n');\n Object.assign(document.createElement('a'),{href:'data:text/csv;charset=utf-8,'+encodeURIComponent(csv),download:filename}).click();\n}\n\n// Material Symbols icon helper. Replaces lucide-react across the app.\n// size in px, filled toggles the FILL axis, className appended.\nexport function Icon({name, size=18, filled=false, className=''}) {\n return h('span', {\n className: 'material-symbols-outlined ' + (filled?'ms-filled ':'') + className,\n style: {fontSize: size+'px', lineHeight: 1, verticalAlign: 'middle'},\n 'data-icon': name\n }, name);\n}\n\nexport function Spinner({size=18, color='#c0c1ff'}){\n return h('div',{\n className:'spin',\n style:{width:size,height:size,borderRadius:'50%',border:'2px solid rgba(192,193,255,0.2)',borderTopColor:color,flexShrink:0,display:'inline-block'}\n });\n}\n\nexport function Badge({label, variant='default', icon=null}){\n const variants = {\n default: 'bg-primary/10 text-primary border-primary/20',\n success: 'bg-secondary/10 text-secondary border-secondary/20',\n error: 'bg-error/10 text-error border-error/20',\n warning: 'bg-tertiary/10 text-tertiary border-tertiary/20',\n muted: 'bg-surface-container-high/60 text-text-muted border-border-subtle',\n };\n return h('span', {\n className: 'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border ' + (variants[variant]||variants.default)\n }, icon, label);\n}\n\nexport function StatusDot({state='online'}){\n const map = {\n online: 'bg-secondary',\n offline: 'bg-text-muted',\n error: 'bg-error',\n warn: 'bg-tertiary',\n primary: 'bg-primary',\n };\n return h('span', { className: 'w-1.5 h-1.5 rounded-full pulse-dot inline-block ' + (map[state]||map.online) });\n}\n\nexport function Toggle({value, onChange}){\n return h('button', {\n onClick:()=>onChange(!value), type:'button',\n 'aria-pressed': !!value,\n className: 'w-10 h-5 rounded-full relative cursor-pointer transition-colors duration-150 flex-shrink-0 ' + (value?'bg-primary':'bg-surface-variant')\n },\n h('div',{\n className: 'absolute top-0.5 w-4 h-4 bg-white rounded-full transition-all duration-150 shadow ' + (value?'right-0.5':'left-0.5'),\n style:{boxShadow:'0 1px 3px rgba(0,0,0,0.4)'}\n })\n );\n}\n\nexport function Btn({children, onClick, variant='primary', size='md', disabled=false, className='', style={}, type='button'}){\n const sizes = {\n sm: 'px-3 py-1.5 text-[12px] gap-1.5',\n md: 'px-4 py-2 text-[13px] gap-2',\n lg: 'px-6 py-3 text-[14px] gap-2',\n };\n const variants = {\n primary: 'bg-primary text-on-primary hover:opacity-90 active:scale-[0.98] shadow-lg shadow-primary/20',\n secondary: 'bg-secondary text-on-secondary hover:opacity-90 active:scale-[0.98]',\n ghost: 'bg-surface-container/40 border border-border-subtle text-on-surface-variant hover:bg-surface-variant/30 hover:text-on-surface',\n danger: 'bg-error/10 text-error border border-error/20 hover:bg-error/20',\n success: 'bg-secondary/10 text-secondary border border-secondary/20 hover:bg-secondary/20',\n outline: 'border border-outline/30 text-on-surface hover:bg-surface-variant/20',\n };\n const cls = 'inline-flex items-center justify-center rounded-lg font-semibold transition-all whitespace-nowrap ' +\n (sizes[size]||sizes.md) + ' ' + (variants[variant]||variants.primary) +\n (disabled?' opacity-50 cursor-not-allowed pointer-events-none':' cursor-pointer') +\n (className?' '+className:'');\n return h('button', {onClick, disabled, type, className: cls, style}, children);\n}\n\nexport function IconBtn({name, onClick, size=18, tone='muted', className=''}){\n const tones = {\n muted: 'text-on-surface-variant hover:text-primary',\n primary: 'text-primary hover:text-primary-fixed',\n danger: 'text-error hover:text-error',\n surface: 'text-on-surface hover:text-primary',\n };\n return h('button',{onClick, type:'button',\n className:'p-1 rounded transition-colors cursor-pointer ' + (tones[tone]||tones.muted) + (className?' '+className:'')\n }, h(Icon,{name, size}));\n}\n\nexport function Input({label, value, onChange, type='text', placeholder='', hint='', icon=null, className=''}){\n const [show, setShow] = useState(false);\n const isPass = type === 'password';\n const actualType = isPass && !show ? 'password' : (type === 'password' ? 'text' : type);\n return h('div', {className: 'flex flex-col gap-1.5 ' + className},\n label && h('label', {className: 'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, label),\n h('div', {className: 'flex items-center gap-2 bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 neon-stroke transition-all'},\n icon && h(Icon, {name: icon, size: 16, className: 'text-text-muted'}),\n h('input', {\n type: actualType, value: value||'',\n onChange: e => onChange && onChange(e.target.value),\n placeholder,\n className: 'flex-1 bg-transparent border-none text-on-surface text-[13px] outline-none focus:ring-0 p-0 min-w-0 placeholder:text-text-muted'\n }),\n isPass && h('button',{onClick:()=>setShow(!show), type:'button', className:'text-text-muted hover:text-on-surface transition-colors'},\n h(Icon,{name: show?'visibility_off':'visibility', size:16})\n )\n ),\n hint && h('div',{className:'text-[11px] text-text-muted pl-1'},hint)\n );\n}\n\nexport function Textarea({label, value, onChange, placeholder='', rows=4, className=''}){\n return h('div', {className: 'flex flex-col gap-1.5 ' + className},\n label && h('label', {className: 'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, label),\n h('textarea', {\n value: value||'', onChange: e=>onChange&&onChange(e.target.value), placeholder, rows,\n className: 'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2.5 text-on-surface text-[13px] resize-none outline-none focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all placeholder:text-text-muted',\n style: {fontFamily: 'inherit', lineHeight: 1.5}\n })\n );\n}\n\nexport function Select({label, value, onChange, options, className=''}){\n return h('div', {className: 'flex flex-col gap-1.5 ' + className},\n label && h('label', {className: 'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, label),\n h('select', {\n value, onChange: e=>onChange&&onChange(e.target.value),\n className: 'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-on-surface text-[13px] cursor-pointer outline-none focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all appearance-none',\n style: {backgroundImage: 'url(\"data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns=\\\\'http://www.w3.org/2000/svg\\\\' width=\\\\'12\\\\' height=\\\\'12\\\\' viewBox=\\\\'0 0 24 24\\\\' fill=\\\\'none\\\\' stroke=\\\\'%23c7c4d7\\\\' stroke-width=\\\\'2\\\\'%3E%3Cpath d=\\\\'M6 9l6 6 6-6\\\\'/%3E%3C/svg%3E\")', backgroundRepeat:'no-repeat', backgroundPosition:'right 12px center', paddingRight:'32px'}\n }, options.map(o => h('option', {key: o.value, value: o.value, style:{background:'#1c1b1e',color:'#e5e1e5'}}, o.label)))\n );\n}\n\nexport function BrandIcon({slug, color='#c0c1ff', size=18, bare=false}){\n const [err, setErr] = useState(false);\n const img = h('img', {\n src: 'https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/'+slug+'.svg',\n width: size, height: size, alt: slug,\n style: {filter: 'invert(1)', opacity: 0.9, display: 'block'},\n onError: ()=>setErr(true)\n });\n const fb = h('span', {style:{fontSize: size*0.65, fontWeight: 700, color}}, (slug||'?')[0].toUpperCase());\n const inner = err ? fb : img;\n if (bare) return inner;\n return h('div', {\n className:'rounded-lg flex items-center justify-center flex-shrink-0',\n style: {width: size+14, height: size+14, background: color+'22'}\n }, inner);\n}\n\nexport function MetricCard({icon, title, value, subtitle, color='#c0c1ff', trend=null, onClick=null}){\n return h('div', {\n onClick,\n className: 'glass-panel rounded-xl p-lg flex flex-col gap-md transition-all ' + (onClick?'cursor-pointer hover:border-primary/30':''),\n },\n h('div', {className:'flex items-center justify-between'},\n h('div', {\n className:'w-10 h-10 rounded-lg flex items-center justify-center',\n style:{background: color+'18', color}\n }, typeof icon === 'string' ? h(Icon,{name:icon, size:22}) : icon),\n h('div', {className:'text-[28px] font-extrabold text-on-surface leading-none tracking-tight'}, value)\n ),\n h('div', null,\n h('div',{className:'text-[14px] font-semibold text-on-surface'},title),\n subtitle && h('div',{className:'text-[11px] text-text-muted mt-1'},subtitle),\n trend\n )\n );\n}\n\nexport function DateRangePicker({value, onChange}){\n const opts = [{label:'7d', days:7},{label:'30d', days:30},{label:'90d', days:90},{label:'6m', days:180}];\n return h('div',{className:'flex bg-surface-container-lowest rounded-lg p-0.5 border border-border-subtle gap-0.5'},\n opts.map(o => h('button',{\n key:o.days, onClick:()=>onChange(o.days), type:'button',\n className:'px-2.5 py-1 rounded-md text-[11px] font-bold uppercase tracking-wider transition-all ' +\n (value===o.days?'bg-primary text-on-primary':'text-text-muted hover:text-on-surface')\n }, o.label))\n );\n}\n\nexport function TrendBadge({current, previous}){\n if (previous == null || previous === 0) return null;\n const pct = (current - previous) / Math.abs(previous) * 100;\n const up = pct >= 0;\n return h('span',{\n className:'inline-flex items-center text-[11px] font-bold px-1.5 py-0.5 rounded ' +\n (up?'text-secondary bg-secondary/10':'text-error bg-error/10')\n }, (up?'↑ +':'↓ ') + Math.abs(pct).toFixed(1) + '%');\n}\n\nexport function GlassPanel({children, className='', padding='p-lg', onClick=null}){\n return h('div', {\n onClick,\n className: 'glass-panel rounded-xl ' + padding + ' ' + className + (onClick?' cursor-pointer':'')\n }, children);\n}\n\nexport function SectionHeader({icon, title, action=null, color='primary'}){\n const colorMap = {primary:'text-primary', secondary:'text-secondary', tertiary:'text-tertiary'};\n return h('div', {className:'flex items-center justify-between border-b border-border-subtle pb-md mb-lg'},\n h('div', {className:'flex items-center gap-sm'},\n icon && h(Icon, {name: icon, size: 22, className: colorMap[color]||colorMap.primary}),\n h('h3', {className:'text-[18px] font-bold text-on-surface tracking-tight'}, title)\n ),\n action\n );\n}\n\nexport function DataDisplay({data, loading, error, integrationName='', onFix=null}){\n const [sortCol, setSortCol] = useState(null);\n const [sortDir, setSortDir] = useState(1);\n const [page, setPage] = useState(0);\n const PAGE = 50;\n\n if (loading) return h('div', {className:'flex flex-col gap-2 py-3'},\n ...[1,2,3].map(i => h('div', {\n key:i,\n style: {height: 34, borderRadius: 8, background: 'linear-gradient(90deg,#1c1b1e 25%,#2a2a2d 50%,#1c1b1e 75%)', backgroundSize:'200% 100%', animation:'shimmer 1.5s infinite'}\n }))\n );\n\n if (error) {\n const hints = {\n 'select: column':'Check Ahrefs column names in the API docs',\n '401':'Token expired — reconnect in Settings',\n '403':'Check API key permissions in the provider dashboard',\n 'not found':'Verify your target domain or property ID',\n 'property_id':'Set your GA4 Property ID in Settings'\n };\n const hint = Object.entries(hints).find(([k]) => String(error).toLowerCase().includes(k.toLowerCase()))?.[1] || '';\n return h('div', {className:'p-md rounded-lg bg-error/5 border border-error/30 text-error text-[13px] leading-relaxed'},\n h('div', {className:'flex items-start gap-2'},\n h(Icon, {name:'error', size:16, className:'mt-0.5 flex-shrink-0'}),\n h('div', {className:'flex-1'},\n String(error),\n hint && h('div', {className:'text-error/80 text-[11px] mt-1'}, hint)\n ),\n onFix && h('button', {\n onClick: onFix,\n className:'flex-shrink-0 text-[11px] px-2.5 py-1 rounded border border-error/40 bg-error/10 text-error cursor-pointer whitespace-nowrap hover:bg-error/20 transition-all'\n }, 'Fix →')\n )\n );\n }\n\n if (!data) return null;\n\n const flattenRow = (r) => {\n const out = {};\n for (const [k,v] of Object.entries(r)) {\n if (v === null || v === undefined) { out[k] = v; }\n else if (typeof v === 'object' && !Array.isArray(v)) {\n for (const [k2,v2] of Object.entries(v)) {\n if (typeof v2 !== 'object') out[k+'_'+k2] = v2;\n }\n } else if (Array.isArray(v)) {\n out[k] = v.join(', ');\n } else {\n out[k] = v;\n }\n }\n return out;\n };\n\n let rows = null, rk = '';\n if (Array.isArray(data) && data.length && typeof data[0] === 'object') { rows = data.map(flattenRow); rk = 'results'; }\n if (!rows) {\n for (const k of ['keywords','backlinks','refdomains','organic_keywords','sitemap','pages','rows','items','posts','messages','results','edges','value','events','categories','data']) {\n const a = Array.isArray(data[k]) ? data[k] : Array.isArray(data?.data?.[k]) ? data.data[k] : null;\n if (a?.length && typeof a[0] === 'object') { rows = a.map(flattenRow); rk = k; break; }\n }\n }\n if (!rows && data?.rows?.length && data.dimensionHeaders) {\n const dh = data.dimensionHeaders.map(h => h.name), mh = (data.metricHeaders||[]).map(h => h.name);\n rows = data.rows.map(r => ({\n ...Object.fromEntries(dh.map((k,i) => [k, r.dimensionValues[i]?.value])),\n ...Object.fromEntries(mh.map((k,i) => [k, r.metricValues[i]?.value]))\n }));\n rk = 'analytics';\n }\n\n const wrapCls = 'mt-3 bg-surface-container-lowest border border-border-subtle rounded-xl p-4 overflow-x-auto';\n\n if (rows?.length) {\n const cols = Object.keys(rows[0]).slice(0, 10);\n const sorted = sortCol ? [...rows].sort((a,b) => {\n const v = a[sortCol], w = b[sortCol];\n return (typeof v === 'number' && typeof w === 'number' ? v - w : String(v??'').localeCompare(String(w??''))) * sortDir;\n }) : rows;\n const totalPages = Math.ceil(sorted.length / PAGE);\n const visible = sorted.slice(page * PAGE, (page+1) * PAGE);\n return h('div', {className: wrapCls, style:{maxHeight: 520, overflowY: 'auto'}},\n h('div', {className:'flex justify-between items-center mb-3 text-[11px] text-text-muted flex-wrap gap-2'},\n h('span', {className:'font-mono-data tracking-wide uppercase'}, rk+' · '+rows.length+' rows'+(totalPages>1?' · p'+(page+1)+'/'+totalPages:'')),\n h('div', {className:'flex gap-1.5 items-center'},\n totalPages > 1 && h('div', {className:'flex gap-1'},\n h('button', {onClick:()=>setPage(p=>Math.max(0,p-1)), disabled:page===0,\n className:'px-2 py-0.5 rounded border border-border-subtle bg-surface-container-low text-[11px] text-on-surface-variant disabled:opacity-30 hover:bg-surface-variant/40 cursor-pointer'\n }, '‹'),\n h('button', {onClick:()=>setPage(p=>Math.min(totalPages-1,p+1)), disabled:page===totalPages-1,\n className:'px-2 py-0.5 rounded border border-border-subtle bg-surface-container-low text-[11px] text-on-surface-variant disabled:opacity-30 hover:bg-surface-variant/40 cursor-pointer'\n }, '›')\n ),\n h('button', {onClick:()=>exportCSV(rows, integrationName+'-'+rk+'.csv'),\n className:'text-[11px] px-2.5 py-0.5 rounded border border-primary/30 bg-primary/10 text-primary cursor-pointer hover:bg-primary/20 transition-all'\n }, '↓ CSV')\n )\n ),\n h('table', {className:'w-full', style:{borderCollapse:'collapse'}},\n h('thead', null,\n h('tr', null,\n cols.map(c => h('th', {\n key:c, onClick:()=>{setSortCol(c); setSortDir(sortCol===c?-sortDir:1); setPage(0);},\n className:'text-left px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-text-muted cursor-pointer select-none whitespace-nowrap hover:text-on-surface border-b border-border-subtle'\n }, c.replace(/_/g,' ') + (sortCol===c ? (sortDir>0?' ↑':' ↓') : ' ·')))\n )\n ),\n h('tbody', null,\n visible.map((r,i) => h('tr', {key:i, className:'hover:bg-white/5'},\n cols.map(c => {\n const v = r[c];\n return h('td', {\n key:c, title: v==null?'':String(v),\n className:'px-3 py-2 text-[13px] text-on-surface border-b border-border-subtle/50',\n style:{maxWidth: 220, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}\n }, v==null?'—':typeof v==='number'?fmtNum(v):String(v).slice(0,60));\n })\n ))\n )\n )\n );\n }\n\n if (data && typeof data === 'object') {\n const src = Object.values(data).find(v => v && typeof v === 'object' && !Array.isArray(v) && Object.keys(v).length > 0) || data;\n const entries = Object.entries(src).filter(([,v]) => v !== null && v !== undefined && typeof v !== 'object').slice(0, 60);\n if (entries.length) return h('div', {className: wrapCls, style: {padding: 0, display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(200px,1fr))'}},\n entries.map(([k,v]) => h('div', {key:k, className:'px-4 py-2.5 border-b border-border-subtle/50 flex flex-col gap-1'},\n h('span', {className:'text-[10px] text-text-muted uppercase tracking-wider'}, k.replace(/_/g,' ')),\n h('span', {className:'text-[14px] font-semibold text-on-surface'}, typeof v === 'number' ? fmtNum(v) : String(v))\n ))\n );\n }\n\n return h('div', {className: wrapCls},\n h('pre', {className:'text-[12px] text-on-surface-variant leading-relaxed font-mono-data'}, JSON.stringify(data, null, 2))\n );\n}\n `;\n}\n",[270],"d61a37c4-5e7b-11f1-9c7b-1607ee4eb77e","frontend_tasks.ts","d22866b8-5e3a-11f1-b18c-1607ee4eb77e",936,["D",1780402139102],"// TasksPage — task-oriented, navigable execution surface (Phase 1 Framework Layer).\n// Served at /api/app-tasks and dynamically imported by frontend_js.ts.\n//\n// Mirrors frontend_objectives.ts: browser React module, h = React.createElement,\n// shared deps pulled from window.__nexus, default-exported page component.\n// The bearer token is auto-attached to every /api fetch by frontend_js.ts's\n// window.fetch override — so calls are plain '/api/...' like the other pages.\n//\n// Backend endpoints used (all return JSON):\n// GET /api/tasks/ice?limit= — ICE-ranked backlog (ice_score desc, nulls last)\n// GET /api/tasks?status= — full list (due_date asc, nulls last)\n// GET /api/campaigns — campaign id→name lookup for chips\n// GET /api/okrs — objective id→title + KR id→title lookup for chips\n// GET /api/experiments — experiment list for the Generate source dropdown\n// PUT /api/tasks/:id — mark/cycle status\n// POST /api/tasks/:id/run — run an agent on one task; returns { task, run, error }\n// POST /api/tasks/generate — LLM-plan tasks from a source (objective/KR/campaign/experiment)\n\nexport function getTasksJS(): string {\n return `\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// ─── ICE colour grading (1-10 component avg) ────────────────────────────────\nconst ICE_HEX = (s) => {\n if (s == null) return '#8a8a99';\n if (s >= 7) return '#4edea3'; // strong — secondary green\n if (s >= 4) return '#d0bcff'; // moderate — tertiary\n return '#ffb4ab'; // weak — error\n};\nconst ICE_LABEL = (s) => {\n if (s == null) return 'Unscored';\n if (s >= 7) return 'High leverage';\n if (s >= 4) return 'Moderate';\n return 'Low leverage';\n};\n\n// ─── Status model ───────────────────────────────────────────────────────────\nconst STATUSES = ['todo', 'doing', 'done', 'blocked'];\nconst STATUS_META = {\n todo: { label: 'To do', hex: '#c0c1ff', cls: 'bg-primary/10 text-primary border-primary/30' },\n doing: { label: 'Doing', hex: '#d0bcff', cls: 'bg-tertiary/10 text-tertiary border-tertiary/30' },\n done: { label: 'Done', hex: '#4edea3', cls: 'bg-secondary/10 text-secondary border-secondary/30' },\n blocked: { label: 'Blocked', hex: '#ffb4ab', cls: 'bg-error/10 text-error border-error/30' },\n};\nconst normStatus = (s) => {\n const v = String(s || 'todo').toLowerCase();\n return STATUS_META[v] ? v : 'todo';\n};\n// Click cycles the work forward: todo → doing → done → todo. Blocked is its own\n// terminal state that cycles back to todo so a click can always unblock.\nconst NEXT_STATUS = { todo: 'doing', doing: 'done', done: 'todo', blocked: 'todo' };\n\n// ─── Day bucketing by due_date ──────────────────────────────────────────────\nconst DAY_MS = 86400000;\nconst startOfDay = (d) => { const x = new Date(d); x.setHours(0, 0, 0, 0); return x; };\n\n// Order + presentation metadata for each bucket. Lower 'order' renders first.\nconst BUCKETS = {\n overdue: { order: 0, label: 'Overdue', icon: 'error', tone: 'text-error' },\n today: { order: 1, label: 'Today', icon: 'today', tone: 'text-primary' },\n tomorrow: { order: 2, label: 'Tomorrow', icon: 'event', tone: 'text-tertiary' },\n week: { order: 3, label: 'This Week', icon: 'date_range', tone: 'text-on-surface' },\n later: { order: 4, label: 'Later', icon: 'schedule', tone: 'text-text-muted' },\n none: { order: 5, label: 'No date', icon: 'remove_circle', tone: 'text-text-muted' },\n};\n\nconst bucketFor = (dueRaw) => {\n if (!dueRaw) return 'none';\n const due = new Date(dueRaw);\n if (Number.isNaN(due.getTime())) return 'none';\n const today = startOfDay(new Date());\n const day = startOfDay(due);\n const diff = Math.round((day.getTime() - today.getTime()) / DAY_MS);\n if (diff < 0) return 'overdue';\n if (diff === 0) return 'today';\n if (diff === 1) return 'tomorrow';\n if (diff <= 7) return 'week';\n return 'later';\n};\n\nconst fmtDue = (dueRaw) => {\n if (!dueRaw) return null;\n const d = new Date(dueRaw);\n if (Number.isNaN(d.getTime())) return null;\n return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });\n};\n\n// ─── ICE badge ──────────────────────────────────────────────────────────────\n// Shows Impact·Confidence·Ease components + the computed ice_score, colour-graded.\nfunction IceBadge({impact, confidence, ease, score}) {\n const hasComponents = impact != null && confidence != null && ease != null;\n const hex = ICE_HEX(score == null ? null : Number(score));\n const scoreTxt = score == null ? '—' : (Math.round(Number(score) * 100) / 100);\n return h('div', {\n className: 'inline-flex items-center gap-1.5 px-2 py-1 rounded-lg border flex-shrink-0',\n style: { borderColor: hex + '55', background: hex + '14' },\n title: ICE_LABEL(score == null ? null : Number(score)) + ' · ICE = (Impact + Confidence + Ease) / 3'\n },\n h('span', { className: 'text-[8px] font-bold uppercase tracking-widest', style: { color: hex } }, 'ICE'),\n hasComponents\n ? h('span', { className: 'text-[10px] font-mono-data text-text-muted', style: { fontVariantNumeric: 'tabular-nums' } },\n Number(impact) + '·' + Number(confidence) + '·' + Number(ease))\n : null,\n h('span', {\n className: 'text-[12px] font-extrabold font-mono-data',\n style: { color: hex, fontVariantNumeric: 'tabular-nums' }\n }, String(scoreTxt))\n );\n}\n\n// ─── Status pill (clickable to cycle) ───────────────────────────────────────\nfunction StatusPill({status, onCycle, busy}) {\n const {Icon, Spinner} = N();\n const s = normStatus(status);\n const meta = STATUS_META[s];\n return h('button', {\n type: 'button',\n onClick: (e) => { e.stopPropagation(); if (!busy && onCycle) onCycle(); },\n disabled: busy,\n title: 'Click to advance status (' + meta.label + ' → ' + STATUS_META[NEXT_STATUS[s]].label + ')',\n className: 'inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border transition-all hover:brightness-110 ' + meta.cls\n },\n busy\n ? (Spinner ? h(Spinner, { size: 9 }) : '…')\n : h('span', { className: 'w-1.5 h-1.5 rounded-full', style: { background: meta.hex } }),\n meta.label\n );\n}\n\n// ─── Link chip (campaign / objective / KR) ──────────────────────────────────\nfunction LinkChip({icon, label, onClick}) {\n const {Icon} = N();\n if (!label) return null;\n return h('button', {\n type: 'button',\n onClick: (e) => { e.stopPropagation(); if (onClick) onClick(); },\n className: 'inline-flex items-center gap-1 max-w-[180px] text-[10px] font-medium px-1.5 py-0.5 rounded border border-border-subtle bg-surface-container/40 text-text-muted hover:text-primary hover:border-primary/40 transition-colors'\n },\n Icon ? h(Icon, { name: icon, size: 11, className: 'flex-shrink-0' }) : null,\n h('span', { className: 'truncate' }, label)\n );\n}\n\n// ─── TaskCard ───────────────────────────────────────────────────────────────\nfunction TaskCard({task, campaignName, objectiveTitle, krTitle, onCycleStatus, onRun, onDelete, setActivePage}) {\n const {Icon, Spinner} = N();\n const [busy, setBusy] = useState(false);\n const [running, setRunning] = useState(false);\n const s = normStatus(task.status);\n const done = s === 'done';\n const blocked = s === 'blocked';\n const due = fmtDue(task.due_date);\n\n // Reopen a blocked task back to 'todo' without running it — reuses the same\n // status-cycle handler as the pill (NEXT_STATUS.blocked === 'todo').\n const reopen = async (e) => {\n if (e) e.stopPropagation();\n if (busy) return;\n setBusy(true);\n try { await onCycleStatus(task.id, NEXT_STATUS[s]); }\n finally { setBusy(false); }\n };\n\n const cycle = async () => {\n setBusy(true);\n try { await onCycleStatus(task.id, NEXT_STATUS[s]); }\n finally { setBusy(false); }\n };\n\n // Put an agent to work on this single task: POST /api/tasks/:id/run, then the\n // parent refetches so the status flips (doing → done) once the agent finishes.\n const run = async (e) => {\n if (e) e.stopPropagation();\n if (running) return;\n setRunning(true);\n try { await onRun(task.id); }\n finally { setRunning(false); }\n };\n\n const del = async (e) => {\n if (e) e.stopPropagation();\n if (onDelete) await onDelete(task.id);\n };\n\n return h('div', {\n className: 'glass-panel rounded-xl p-md flex items-start gap-3 group transition-all hover:border-primary/30 ' + (done ? 'opacity-60' : '')\n },\n // Left: complete toggle\n h('button', {\n type: 'button',\n onClick: cycle,\n title: done ? 'Reopen task' : 'Mark done',\n className: 'mt-0.5 flex-shrink-0 w-5 h-5 rounded-full border flex items-center justify-center transition-all ' +\n (done ? 'bg-secondary/20 border-secondary text-secondary' : 'border-border-subtle text-transparent hover:border-secondary hover:text-secondary/60')\n }, Icon ? h(Icon, { name: 'check', size: 13 }) : '✓'),\n\n // Body\n h('div', { className: 'flex-1 min-w-0 space-y-1.5' },\n h('div', { className: 'flex items-start justify-between gap-2' },\n h('p', {\n className: 'text-[13px] font-semibold leading-snug text-on-surface min-w-0 ' + (done ? 'line-through text-text-muted' : '')\n }, task.title || 'Untitled task'),\n h('div', { className: 'flex items-center gap-1.5 flex-shrink-0' },\n // Blocked → recovery affordances. A failed run/agent leaves the task\n // 'blocked' with no obvious next step; offer Retry (re-run via onRun)\n // and Reopen (back to todo via the status-cycle handler).\n blocked ? h('button', {\n type: 'button',\n onClick: run,\n disabled: running || busy,\n title: 'Retry — re-run an agent on this blocked task',\n className: 'inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded border transition-all disabled:opacity-40 disabled:cursor-not-allowed ' +\n (running\n ? 'border-tertiary/40 bg-tertiary/10 text-tertiary'\n : 'border-primary/40 bg-primary/10 text-primary hover:brightness-110')\n },\n running\n ? (Spinner ? h(Spinner, { size: 10 }) : '…')\n : (Icon ? h(Icon, { name: 'refresh', size: 12 }) : '↻'),\n running ? 'Retrying' : 'Retry'\n ) : null,\n blocked ? h('button', {\n type: 'button',\n onClick: reopen,\n disabled: busy || running,\n title: 'Reopen — move this blocked task back to To do',\n className: 'inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded border transition-all disabled:opacity-40 disabled:cursor-not-allowed border-border-subtle bg-surface-container/40 text-text-muted hover:text-on-surface hover:border-primary/40'\n },\n busy\n ? (Spinner ? h(Spinner, { size: 10 }) : '…')\n : (Icon ? h(Icon, { name: 'undo', size: 12 }) : '↺'),\n 'Reopen'\n ) : null,\n // Run — put an agent to work on just this task. Hidden for blocked\n // tasks (Retry covers re-running); disabled once done.\n blocked ? null : h('button', {\n type: 'button',\n onClick: run,\n disabled: running || done,\n title: done ? 'Task already done' : 'Run an agent on this task',\n className: 'inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded border transition-all disabled:opacity-40 disabled:cursor-not-allowed ' +\n (running\n ? 'border-tertiary/40 bg-tertiary/10 text-tertiary'\n : 'border-secondary/40 bg-secondary/10 text-secondary hover:brightness-110')\n },\n running\n ? (Spinner ? h(Spinner, { size: 10 }) : '…')\n : (Icon ? h(Icon, { name: 'play_arrow', size: 12 }) : '▶'),\n running ? 'Running' : 'Run'\n ),\n h(IceBadge, { impact: task.impact, confidence: task.confidence, ease: task.ease, score: task.ice_score }),\n onDelete ? h('button', {\n type: 'button',\n onClick: del,\n title: 'Delete task',\n className: 'inline-flex items-center justify-center w-5 h-5 rounded text-text-muted opacity-0 group-hover:opacity-100 hover:text-error hover:bg-error/10 transition-all'\n }, Icon ? h(Icon, { name: 'delete', size: 13 }) : 'x') : null\n )\n ),\n task.description\n ? h('p', { className: 'text-[11px] text-text-muted leading-relaxed line-clamp-2' }, task.description)\n : null,\n // Meta row: status pill, due, link chips\n h('div', { className: 'flex items-center gap-1.5 flex-wrap pt-0.5' },\n h(StatusPill, { status: s, busy, onCycle: cycle }),\n due\n ? h('span', { className: 'inline-flex items-center gap-1 text-[10px] text-text-muted' },\n Icon ? h(Icon, { name: 'schedule', size: 11 }) : null, due)\n : null,\n campaignName\n ? h(LinkChip, { icon: 'campaign', label: campaignName, onClick: () => setActivePage && setActivePage('campaigns') })\n : null,\n objectiveTitle\n ? h(LinkChip, { icon: 'flag', label: objectiveTitle, onClick: () => setActivePage && setActivePage('objectives') })\n : null,\n krTitle\n ? h(LinkChip, { icon: 'target', label: krTitle, onClick: () => setActivePage && setActivePage('objectives') })\n : null\n )\n )\n );\n}\n\n// ─── DayGroup ───────────────────────────────────────────────────────────────\nfunction DayGroup({bucketKey, tasks, lookups, onCycleStatus, onRun, onDelete, setActivePage}) {\n const {Icon} = N();\n const meta = BUCKETS[bucketKey];\n if (!tasks.length) return null;\n return h('section', { className: 'space-y-2.5' },\n h('div', { className: 'flex items-center gap-2 px-0.5' },\n Icon ? h(Icon, { name: meta.icon, size: 14, className: meta.tone }) : null,\n h('h3', { className: 'text-[12px] font-bold uppercase tracking-widest ' + meta.tone }, meta.label),\n h('span', { className: 'text-[11px] font-mono-data text-text-muted' }, '· ' + tasks.length)\n ),\n h('div', { className: 'space-y-2' },\n tasks.map((t) => h(TaskCard, {\n key: t.id,\n task: t,\n campaignName: t.campaign_id != null ? lookups.campaigns[String(t.campaign_id)] : null,\n objectiveTitle: t.objective_id != null ? lookups.objectives[String(t.objective_id)] : null,\n krTitle: t.key_result_id != null ? lookups.krs[String(t.key_result_id)] : null,\n onCycleStatus,\n onRun,\n onDelete,\n setActivePage\n }))\n )\n );\n}\n\n// ─── GeneratePanel (inline source picker → POST /api/tasks/generate) ─────────\nfunction GeneratePanel({objectives, campaigns, experiments, onGenerate, onClose}) {\n const {Icon, Btn, Spinner} = N();\n const [busy, setBusy] = useState(false);\n const [value, setValue] = useState('');\n\n // Build a flat option list: each objective, each KR, each campaign, each experiment.\n const options = useMemo(() => {\n const out = [];\n for (const o of objectives) {\n out.push({ key: 'objective:' + o.id, source_type: 'objective', source_id: o.id, label: 'Objective · ' + (o.title || 'Untitled') });\n for (const kr of (o.key_results || [])) {\n out.push({ key: 'key_result:' + kr.id, source_type: 'key_result', source_id: kr.id, label: ' KR · ' + (kr.title || 'Untitled') });\n }\n }\n for (const c of campaigns) {\n out.push({ key: 'campaign:' + c.id, source_type: 'campaign', source_id: c.id, label: 'Campaign · ' + (c.name || 'Untitled') });\n }\n for (const x of (experiments || [])) {\n out.push({ key: 'experiment:' + x.id, source_type: 'experiment', source_id: x.id, label: 'Experiment · ' + (x.title || 'Untitled') });\n }\n return out;\n }, [objectives, campaigns, experiments]);\n\n const submit = async () => {\n const opt = options.find((o) => o.key === value);\n if (!opt) return;\n setBusy(true);\n try { await onGenerate(opt.source_type, opt.source_id); }\n finally { setBusy(false); }\n };\n\n return h('section', { className: 'glass-panel rounded-xl p-lg space-y-md border border-primary/30' },\n h('div', { className: 'flex items-center justify-between' },\n h('h3', { className: 'text-[15px] font-bold text-on-surface tracking-tight flex items-center gap-2' },\n Icon ? h(Icon, { name: 'auto_awesome', size: 17, className: 'text-primary' }) : null, 'Generate tasks'),\n h('button', { onClick: onClose, className: 'text-text-muted hover:text-on-surface' },\n Icon ? h(Icon, { name: 'close', size: 17 }) : '✕')\n ),\n h('p', { className: 'text-[12px] text-text-muted' },\n 'Pick an objective, key result, campaign, or experiment — the planner drafts up to 5 ICE-scored next-step tasks for it.'),\n options.length === 0\n ? h('p', { className: 'text-[12px] text-text-muted italic' },\n 'No objectives, campaigns, or experiments yet. Create one first to plan tasks against it.')\n : h('div', { className: 'flex flex-col sm:flex-row gap-2' },\n h('select', {\n value, onChange: (e) => setValue(e.target.value),\n className: 'flex-1 bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n },\n h('option', { value: '' }, 'Select a source…'),\n options.map((o) => h('option', { key: o.key, value: o.key }, o.label))\n ),\n h(Btn, {\n onClick: submit, variant: 'primary', size: 'sm', disabled: busy || !value\n },\n busy ? (Spinner ? h(Spinner, { size: 13 }) : '…') : (Icon ? h(Icon, { name: 'auto_awesome', size: 14 }) : null),\n busy ? 'Planning…' : 'Generate'\n )\n )\n );\n}\n\n// ─── TasksPage ──────────────────────────────────────────────────────────────\nexport function TasksPage({setActivePage}) {\n const {Icon, Btn, MetricCard, PageHeader, Spinner} = N();\n const [tasks, setTasks] = useState([]);\n const [campaigns, setCampaigns] = useState([]);\n const [objectives, setObjectives] = useState([]);\n const [experiments, setExperiments] = useState([]);\n const [sort, setSort] = useState('ice'); // 'ice' | 'due'\n const [statusFilter, setStatusFilter] = useState('all');\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [generating, setGenerating] = useState(false);\n\n // Load tasks. ICE sort uses the ICE-ranked endpoint; due sort uses the\n // due-date-ordered list. Status filter is passed through to the list endpoint\n // when sorting by due date; the ICE endpoint filters client-side.\n const loadTasks = useCallback(async () => {\n setLoading(true); setError(null);\n try {\n const path = sort === 'ice'\n ? '/api/tasks/ice?limit=200'\n : ('/api/tasks' + (statusFilter !== 'all' ? '?status=' + encodeURIComponent(statusFilter) : ''));\n const r = await fetch(path);\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const d = await r.json();\n setTasks(Array.isArray(d) ? d : []);\n } catch (e) { setError(e && e.message || String(e)); }\n finally { setLoading(false); }\n }, [sort, statusFilter]);\n\n // Chip lookups — campaign id→name, objective id→title, KR id→title.\n const loadLookups = useCallback(async () => {\n try {\n const cr = await fetch('/api/campaigns');\n if (cr.ok) { const cd = await cr.json(); setCampaigns(Array.isArray(cd) ? cd : []); }\n } catch {}\n try {\n const or = await fetch('/api/okrs');\n if (or.ok) { const od = await or.json(); setObjectives(Array.isArray(od) ? od : []); }\n } catch {}\n try {\n const er = await fetch('/api/experiments');\n if (er.ok) { const ed = await er.json(); setExperiments(Array.isArray(ed) ? ed : []); }\n } catch {}\n }, []);\n\n useEffect(() => { loadTasks(); }, [loadTasks]);\n useEffect(() => { loadLookups(); }, [loadLookups]);\n\n const lookups = useMemo(() => {\n const c = {}, o = {}, k = {};\n for (const cm of campaigns) c[String(cm.id)] = cm.name || 'Campaign';\n for (const ob of objectives) {\n o[String(ob.id)] = ob.title || 'Objective';\n for (const kr of (ob.key_results || [])) k[String(kr.id)] = kr.title || 'Key result';\n }\n return { campaigns: c, objectives: o, krs: k };\n }, [campaigns, objectives]);\n\n // Apply status filter client-side (covers both endpoints uniformly), then\n // bucket by due day. Within each bucket honour the active sort.\n const grouped = useMemo(() => {\n const filtered = statusFilter === 'all'\n ? tasks\n : tasks.filter((t) => normStatus(t.status) === statusFilter);\n\n const buckets = {};\n for (const key of Object.keys(BUCKETS)) buckets[key] = [];\n for (const t of filtered) buckets[bucketFor(t.due_date)].push(t);\n\n const iceVal = (t) => (t.ice_score == null ? -Infinity : Number(t.ice_score));\n const dueVal = (t) => {\n if (!t.due_date) return Infinity;\n const d = new Date(t.due_date).getTime();\n return Number.isNaN(d) ? Infinity : d;\n };\n for (const key of Object.keys(buckets)) {\n buckets[key].sort((a, b) => sort === 'ice'\n ? (iceVal(b) - iceVal(a))\n : (dueVal(a) - dueVal(b)));\n }\n return buckets;\n }, [tasks, statusFilter, sort]);\n\n const orderedBuckets = useMemo(\n () => Object.keys(BUCKETS).sort((a, b) => BUCKETS[a].order - BUCKETS[b].order),\n []\n );\n\n const visibleCount = useMemo(\n () => orderedBuckets.reduce((acc, key) => acc + grouped[key].length, 0),\n [grouped, orderedBuckets]\n );\n\n // Summary metrics (over the raw, unfiltered task set).\n const summary = useMemo(() => {\n const open = tasks.filter((t) => normStatus(t.status) !== 'done').length;\n const done = tasks.filter((t) => normStatus(t.status) === 'done').length;\n const blocked = tasks.filter((t) => normStatus(t.status) === 'blocked').length;\n const overdue = tasks.filter((t) => normStatus(t.status) !== 'done' && bucketFor(t.due_date) === 'overdue').length;\n return { open, done, blocked, overdue };\n }, [tasks]);\n\n // PUT /api/tasks/:id — optimistic status change, reconcile from server.\n const cycleStatus = useCallback(async (id, next) => {\n setTasks((prev) => prev.map((t) => t.id === id ? { ...t, status: next } : t));\n try {\n const r = await fetch('/api/tasks/' + id, {\n method: 'PUT', headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ status: next })\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const updated = await r.json();\n setTasks((prev) => prev.map((t) => t.id === id ? { ...t, ...updated } : t));\n } catch (e) { loadTasks(); }\n }, [loadTasks]);\n\n // POST /api/tasks/:id/run — put an agent to work on a single task. Optimistically\n // flip the row to 'doing' so the running state is visible immediately, then drive the\n // row from the REAL run outcome: the endpoint returns 200 with { task, run, error }.\n // On success task.status is 'done' (with the agent output stashed on description); on\n // an agent error/timeout the endpoint still returns 200, leaves task.status as 'doing'\n // and sets an error string — surface that real error instead of silently flipping to\n // done. The body returns 404 (with an error field) only when the task can't be found.\n const runTask = useCallback(async (id) => {\n setTasks((prev) => prev.map((t) => t.id === id ? { ...t, status: 'doing' } : t));\n let d = null;\n try {\n const r = await fetch('/api/tasks/' + id + '/run', {\n method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({})\n });\n d = await r.json().catch(() => null);\n if (!r.ok) throw new Error((d && d.error) || ('HTTP ' + r.status));\n } catch (e) {\n // Transport/HTTP failure: reconcile from the server so the row shows its true state.\n alert('Run task failed: ' + (e && e.message || e));\n await loadTasks();\n return;\n }\n // 200 with a real agent error (run did not complete): keep the returned task status\n // (stays 'doing', not 'done') and tell the user what actually went wrong.\n if (d && d.error) {\n if (d.task) setTasks((prev) => prev.map((t) => t.id === id ? { ...t, ...d.task } : t));\n alert('Run did not complete: ' + d.error);\n await loadTasks();\n return;\n }\n // Success: drive the row from runTask's result (done + agent output on description).\n if (d && d.task) {\n setTasks((prev) => prev.map((t) => t.id === id ? { ...t, ...d.task } : t));\n }\n await loadTasks();\n }, [loadTasks]);\n\n // POST /api/tasks/generate — plan tasks from a chosen source, then reload.\n const generateTasks = useCallback(async (source_type, source_id) => {\n try {\n const body = { source_type, source_id };\n if (source_type === 'campaign') body.campaign_id = source_id;\n const r = await fetch('/api/tasks/generate', {\n method: 'POST', headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(body)\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const created = await r.json();\n setGenerating(false);\n await loadTasks();\n if (!Array.isArray(created) || created.length === 0) {\n alert('No tasks were generated. Add an LLM API key in Settings, or pick a richer source.');\n }\n } catch (e) { alert('Generate tasks failed: ' + (e && e.message || e)); }\n }, [loadTasks]);\n\n // DELETE /api/tasks/:id — remove a task (optimistic), reconcile on failure.\n const deleteTask = useCallback(async (id) => {\n if (typeof window !== 'undefined' && window.confirm && !window.confirm('Delete this task? This cannot be undone.')) return;\n setTasks((prev) => prev.filter((t) => t.id !== id));\n try {\n const r = await fetch('/api/tasks/' + id, { method: 'DELETE' });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n } catch (e) {\n alert('Delete failed: ' + (e && e.message || e));\n await loadTasks();\n }\n }, [loadTasks]);\n\n return h('div', { className: 'p-lg lg:p-xl space-y-xl max-w-5xl mx-auto pb-32' },\n h(PageHeader, {\n title: 'Tasks',\n subtitle: 'The day\\\\'s execution — ICE-ranked, grouped by when it is due, linked back to the work it serves.',\n action: h('div', { className: 'flex items-center gap-2' },\n h('button', {\n onClick: loadTasks,\n title: 'Refresh',\n className: 'inline-flex items-center gap-1 text-[11px] font-semibold uppercase tracking-widest text-text-muted hover:text-on-surface px-2.5 py-1.5 rounded-md border border-border-subtle hover:border-primary/40 transition-colors'\n }, Icon ? h(Icon, { name: 'sync', size: 13 }) : null, 'Refresh'),\n h(Btn, {\n onClick: () => setGenerating((g) => !g), variant: 'primary', size: 'sm'\n }, Icon ? h(Icon, { name: 'auto_awesome', size: 14 }) : null, 'Generate tasks')\n )\n }),\n\n // ─── Summary bento ────────────────────────────────────────────────────\n h('div', { className: 'grid grid-cols-2 lg:grid-cols-4 gap-md' },\n h(MetricCard, { icon: 'checklist', color: '#c0c1ff', title: 'Open', value: String(summary.open), subtitle: 'not done' }),\n h(MetricCard, { icon: 'error', color: '#ffb4ab', title: 'Overdue', value: String(summary.overdue), subtitle: 'past due, open' }),\n h(MetricCard, { icon: 'block', color: '#ffb4ab', title: 'Blocked', value: String(summary.blocked), subtitle: 'needs unblocking' }),\n h(MetricCard, { icon: 'check_circle', color: '#4edea3', title: 'Done', value: String(summary.done), subtitle: 'completed' })\n ),\n\n // ─── Toolbar: sort toggle + status filter ─────────────────────────────\n h('div', { className: 'glass-panel rounded-xl p-md flex items-center justify-between flex-wrap gap-3' },\n h('div', { className: 'flex items-center gap-1' },\n h('span', { className: 'text-[10px] font-bold uppercase tracking-widest text-text-muted mr-2' }, 'Sort'),\n [['ice', 'ICE'], ['due', 'Due date']].map(([k, lbl]) => h('button', {\n key: k, type: 'button', onClick: () => setSort(k),\n className: 'px-2.5 py-1 rounded-md text-[11px] font-bold uppercase tracking-wider transition-all ' +\n (sort === k ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface bg-surface-container-lowest border border-border-subtle')\n }, lbl))\n ),\n h('div', { className: 'flex items-center gap-2' },\n h('span', { className: 'text-[10px] font-bold uppercase tracking-widest text-text-muted' }, 'Status'),\n h('select', {\n value: statusFilter, onChange: (e) => setStatusFilter(e.target.value),\n className: 'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[12px] text-on-surface capitalize focus:border-primary focus:outline-none'\n },\n h('option', { value: 'all' }, 'All statuses'),\n STATUSES.map((s) => h('option', { key: s, value: s }, STATUS_META[s].label))\n )\n )\n ),\n\n // ─── Generate panel ───────────────────────────────────────────────────\n generating && h(GeneratePanel, {\n objectives, campaigns, experiments,\n onGenerate: generateTasks,\n onClose: () => setGenerating(false)\n }),\n\n // ─── Loading / error / empty / grouped lists ──────────────────────────\n loading && tasks.length === 0\n ? h('div', { className: 'flex items-center justify-center py-16 text-text-muted gap-2' },\n Spinner ? h(Spinner, { size: 18 }) : null, h('span', { className: 'text-[13px]' }, 'Loading tasks…'))\n : error\n ? h('div', { className: 'glass-panel rounded-xl p-lg text-error text-[13px] flex items-center gap-2' },\n Icon ? h(Icon, { name: 'error', size: 16 }) : null, 'Failed to load tasks: ' + error)\n : visibleCount === 0\n ? h('div', { className: 'glass-panel rounded-xl p-xl text-center space-y-3' },\n h('div', { className: 'w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto' },\n Icon ? h(Icon, { name: 'checklist', size: 28, className: 'text-primary' }) : null),\n h('h3', { className: 'text-[16px] font-bold text-on-surface' },\n statusFilter === 'all' ? 'No tasks yet' : ('No ' + STATUS_META[statusFilter].label.toLowerCase() + ' tasks')),\n h('p', { className: 'text-[13px] text-text-muted max-w-md mx-auto' },\n 'Generate a focused, ICE-scored task list from any objective, key result, or campaign — or clear the status filter to see everything.'),\n h('div', { className: 'flex justify-center gap-2 pt-2' },\n h(Btn, { onClick: () => setGenerating(true), variant: 'primary', size: 'sm' },\n Icon ? h(Icon, { name: 'auto_awesome', size: 14 }) : null, 'Generate tasks'),\n statusFilter !== 'all' && h(Btn, { onClick: () => setStatusFilter('all'), variant: 'ghost', size: 'sm' },\n 'Clear filter')\n )\n )\n : h('div', { className: 'space-y-lg' },\n orderedBuckets.map((key) => h(DayGroup, {\n key,\n bucketKey: key,\n tasks: grouped[key],\n lookups,\n onCycleStatus: cycleStatus,\n onRun: runTask,\n onDelete: deleteTask,\n setActivePage\n }))\n )\n );\n}\n\nexport { TasksPage as default };\n `;\n}\n",[277],"d4b2388c-5e7b-11f1-b598-1607ee4eb77e","frontend_skills.ts","0060f180-5d6e-11f1-9a9b-1607ee4eb77e",934,["D",1780402136705],"// SkillsView — the Playbooks page. Served at /api/app-skills, dynamically imported\n// by frontend_js.ts and rendered for the 'playbooks' nav page (bound as _skills.SkillsView).\n//\n// Backend endpoints consumed:\n// GET /api/skills -> {categories:[{category, skills:[{name,category,description,\n// version,enabled,pinned,source,has_body}]}], total, enabled}\n// PUT /api/skills/:name -> {enabled} (toggle a skill on/off in the AI context)\n//\n// \"Apply in Chat\" seeds the AI chat with an apply-skill prompt and opens it, so the request\n// routes through /api/chat where the apply_skill tool fires against the company profile.\n// (It is not a deterministic job — it just pre-seeds chat; the label reflects that reality.)\n//\n// Shared deps from window.__nexus: Icon, Spinner, Btn, Toggle, Input, SectionHeader, PageHeader.\n// (Badge / GlassPanel aren't on __nexus, so we render Tailwind equivalents consistent with the app.)\nexport function getSkillsJS(): string {\n return `\nimport React, { useState, useEffect, useMemo } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// Per-category accent so the grid reads as a real product taxonomy, not a flat list.\nconst CAT_ACCENT = {\n 'Outreach': {chip:'bg-primary/10 text-primary border-primary/25', dot:'bg-primary'},\n 'Content': {chip:'bg-tertiary/10 text-tertiary border-tertiary/25', dot:'bg-tertiary'},\n 'SEO': {chip:'bg-secondary/10 text-secondary border-secondary/25', dot:'bg-secondary'},\n 'Growth': {chip:'bg-secondary/10 text-secondary border-secondary/25', dot:'bg-secondary'},\n 'Analytics': {chip:'bg-primary/10 text-primary border-primary/25', dot:'bg-primary'},\n 'Custom': {chip:'bg-surface-container-high/70 text-text-muted border-border-subtle', dot:'bg-text-muted'},\n};\nconst catAccent = (c) => CAT_ACCENT[c] || {chip:'bg-surface-container-high/70 text-on-surface-variant border-border-subtle', dot:'bg-primary/60'};\n\n// Lightweight Badge (Badge primitive isn't exposed on __nexus).\nfunction Chip({label, className='', icon=null}) {\n return h('span', {\n className:'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border ' + className\n }, icon, label);\n}\n\n// ─── Skill card ───────────────────────────────────────────────────────────────\nfunction SkillCard({skill, onToggle, onRun, busy}) {\n const { Icon, Toggle } = N();\n const accent = catAccent(skill.category);\n const enabled = skill.enabled !== false;\n return h('div', {\n className:'group relative flex flex-col gap-3 rounded-xl border p-lg transition-all bg-surface-container-lowest ' +\n (enabled ? 'border-border-subtle hover:border-primary/40' : 'border-border-subtle/60 opacity-70 hover:opacity-100') +\n ' hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/20'\n },\n // Title row + enable toggle\n h('div', {className:'flex items-start justify-between gap-3'},\n h('div', {className:'flex items-start gap-2.5 min-w-0'},\n h('span', {className:'mt-1 w-2 h-2 rounded-full flex-shrink-0 ' + (enabled ? accent.dot : 'bg-text-muted')}),\n h('div', {className:'min-w-0'},\n h('h4', {className:'text-[14px] font-bold text-on-surface leading-tight truncate'}, skill.name),\n h('div', {className:'text-[10px] font-mono-data text-text-muted mt-0.5'}, 'v' + (skill.version || '1.0.0'))\n )\n ),\n Toggle\n ? h(Toggle, {value: enabled, onChange: () => onToggle(skill)})\n : h('button', {\n type:'button', onClick: () => onToggle(skill), 'aria-pressed': enabled,\n className:'w-10 h-5 rounded-full relative cursor-pointer transition-colors flex-shrink-0 ' + (enabled ? 'bg-primary' : 'bg-surface-variant')\n }, h('div', {className:'absolute top-0.5 w-4 h-4 bg-white rounded-full transition-all shadow ' + (enabled ? 'right-0.5' : 'left-0.5')}))\n ),\n // Description (clamped)\n h('p', {\n className:'text-[12px] leading-relaxed text-on-surface-variant',\n style:{display:'-webkit-box', WebkitLineClamp:3, WebkitBoxOrient:'vertical', overflow:'hidden'}\n }, skill.description || 'No description provided.'),\n // Badges\n h('div', {className:'flex items-center gap-1.5 flex-wrap'},\n h(Chip, {label: skill.category, className: accent.chip}),\n skill.pinned && h(Chip, {label:'Pinned', className:'bg-tertiary/10 text-tertiary border-tertiary/25',\n icon: Icon && h(Icon, {name:'push_pin', size:10, filled:true})}),\n skill.source === 'user' && h(Chip, {label:'Custom', className:'bg-secondary/10 text-secondary border-secondary/25',\n icon: Icon && h(Icon, {name:'person', size:10})})\n ),\n // Footer actions\n h('div', {className:'flex items-center justify-between gap-2 pt-1 mt-auto border-t border-border-subtle/60'},\n h('span', {className:'text-[10px] font-semibold uppercase tracking-wider ' + (enabled ? 'text-secondary' : 'text-text-muted')},\n enabled ? 'In AI context' : 'Disabled'\n ),\n h('button', {\n type:'button', onClick: () => onRun(skill), disabled: !!busy,\n className:'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[12px] font-semibold transition-all ' +\n 'bg-primary/10 text-primary border border-primary/25 hover:bg-primary/20 active:scale-[0.98] ' +\n 'focus:outline-none focus:ring-2 focus:ring-primary/40 disabled:opacity-50 disabled:cursor-not-allowed'\n },\n Icon && h(Icon, {name:'play_arrow', size:15, filled:true}),\n 'Apply in Chat'\n )\n )\n );\n}\n\n// ─── Playbooks page ───────────────────────────────────────────────────────────\nexport function SkillsView({setActivePage, showToast, setChatOpen, setChatMessages}) {\n const { Icon, Spinner, Btn, Input, PageHeader, SectionHeader } = N();\n const [categories, setCategories] = useState([]); // [{category, skills:[...]}]\n const [total, setTotal] = useState(0);\n const [enabledCount, setEnabledCount] = useState(0);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [query, setQuery] = useState('');\n\n const load = async () => {\n setLoading(true); setError(null);\n try {\n const api = N().api || N().fetch || fetch; // shared authed fetch wrapper if present\n const r = await api('/api/skills');\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const data = await r.json();\n setCategories(Array.isArray(data.categories) ? data.categories : []);\n setTotal(Number(data.total) || 0);\n setEnabledCount(Number(data.enabled) || 0);\n } catch (e) {\n setError(e && e.message ? e.message : 'Failed to load playbooks');\n } finally { setLoading(false); }\n };\n useEffect(() => { load(); }, []);\n\n // Optimistic enable/disable with revert-on-failure.\n const toggleSkill = async (skill) => {\n const next = !(skill.enabled !== false);\n setCategories(cats => cats.map(c => ({\n ...c, skills: c.skills.map(s => s.name === skill.name ? {...s, enabled: next} : s)\n })));\n setEnabledCount(n => n + (next ? 1 : -1));\n try {\n const api = N().api || N().fetch || fetch;\n const r = await api('/api/skills/' + encodeURIComponent(skill.name), {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({enabled: next})\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n } catch (e) {\n // revert\n setCategories(cats => cats.map(c => ({\n ...c, skills: c.skills.map(s => s.name === skill.name ? {...s, enabled: !next} : s)\n })));\n setEnabledCount(n => n - (next ? 1 : -1));\n if (typeof showToast === 'function') {\n showToast('Could not ' + (next ? 'enable' : 'disable') + ' \"' + skill.name + '\"', 'error');\n }\n }\n };\n\n // Run → seed the chat with an apply-skill prompt and open it on the dashboard.\n const runSkill = (skill) => {\n const content = 'Apply the ' + skill.name + ' skill to my product. Use my company profile for context.';\n if (typeof setChatMessages === 'function') {\n setChatMessages(prev => [...prev, {role:'user', content, id: Date.now()}]);\n }\n if (typeof setChatOpen === 'function') setChatOpen(true);\n if (typeof setActivePage === 'function') setActivePage('dashboard');\n };\n\n // Client-side filter by name/description.\n const filtered = useMemo(() => {\n const q = query.trim().toLowerCase();\n const cats = categories.map(c => ({\n category: c.category,\n skills: (c.skills || []).filter(s => !q ||\n (s.name || '').toLowerCase().includes(q) ||\n (s.description || '').toLowerCase().includes(q))\n })).filter(c => c.skills.length);\n return cats;\n }, [categories, query]);\n\n const matchCount = useMemo(() => filtered.reduce((a, c) => a + c.skills.length, 0), [filtered]);\n\n // ── Page shell ──\n const header = PageHeader\n ? h(PageHeader, {\n title:'Playbooks',\n subtitle:'Marketing skills the AI can apply to your product — enable the ones you want in context, then run one to draft against your company profile.',\n icon:'auto_stories'\n })\n : h('div', {className:'flex items-center gap-3'},\n Icon && h(Icon, {name:'auto_stories', size:24, className:'text-primary'}),\n h('div', null,\n h('h2', {className:'text-[20px] font-bold text-on-surface tracking-tight'}, 'Playbooks'),\n h('p', {className:'text-[12px] text-text-muted'}, 'Marketing skills the AI can apply to your product.')\n )\n );\n\n return h('div', {className:'p-lg lg:p-xl max-w-[1440px] mx-auto space-y-lg'},\n header,\n\n // Toolbar: search + counts\n h('div', {className:'flex items-center justify-between gap-3 flex-wrap'},\n h('div', {className:'flex-1 min-w-[220px] max-w-md'},\n Input\n ? h(Input, {value: query, onChange: setQuery, placeholder:'Search playbooks by name or description…', icon:'search'})\n : h('div', {className:'flex items-center gap-2 bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2'},\n Icon && h(Icon, {name:'search', size:16, className:'text-text-muted'}),\n h('input', {\n value: query, onChange: e => setQuery(e.target.value),\n placeholder:'Search playbooks by name or description…',\n className:'flex-1 bg-transparent border-none text-on-surface text-[13px] outline-none placeholder:text-text-muted'\n })\n )\n ),\n h('div', {className:'flex items-center gap-2 text-[11px]'},\n loading && Spinner && h(Spinner, {size:14}),\n h(Chip, {label: enabledCount + ' enabled', className:'bg-secondary/10 text-secondary border-secondary/25'}),\n h(Chip, {label: total + ' total', className:'bg-surface-container-high/70 text-text-muted border-border-subtle'})\n )\n ),\n\n // What-is-this explainer — honest, no metrics. Tells the user what playbooks are\n // and what \"Apply in Chat\" actually does (it seeds the assistant, it isn't a job).\n !error && h('div', {className:'flex items-start gap-2.5 p-md rounded-lg bg-primary/5 border border-primary/20 text-[12px] leading-relaxed text-on-surface-variant'},\n Icon && h(Icon, {name:'lightbulb', size:16, className:'text-primary flex-shrink-0 mt-0.5'}),\n h('p', {className:'flex-1'},\n h('span', {className:'font-semibold text-on-surface'}, 'Playbooks are reusable growth methods the AI can apply in chat.'),\n ' Enable the ones you want available in the assistant\\\\'s context, then click ',\n h('span', {className:'font-semibold text-primary'}, 'Apply in Chat'),\n ' to seed the assistant with a playbook and draft against your company profile.'\n )\n ),\n\n // Error\n error && h('div', {className:'p-md rounded-lg bg-error/5 border border-error/30 text-error text-[13px] flex items-center gap-2'},\n Icon && h(Icon, {name:'error', size:16, className:'flex-shrink-0'}),\n h('span', {className:'flex-1'}, error),\n Btn\n ? h(Btn, {onClick: load, variant:'ghost', size:'sm'}, 'Retry')\n : h('button', {onClick: load, className:'px-2.5 py-1 rounded border border-error/40 bg-error/10 text-[11px] text-error hover:bg-error/20'}, 'Retry')\n ),\n\n // Loading skeleton\n loading && !categories.length && !error && h('div', {className:'grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-md'},\n [0,1,2,3,4,5].map(i => h('div', {\n key:i,\n className:'rounded-xl border border-border-subtle h-[180px]',\n style:{background:'linear-gradient(90deg,#1c1b1e 25%,#2a2a2d 50%,#1c1b1e 75%)', backgroundSize:'200% 100%', animation:'shimmer 1.5s infinite'}\n }))\n ),\n\n // Empty: no skills at all\n !loading && !error && !categories.length && h('div', {className:'flex flex-col items-center justify-center text-center py-16 text-text-muted'},\n Icon && h(Icon, {name:'auto_stories', size:36, className:'text-text-muted/50 mb-3'}),\n h('div', {className:'text-[14px] font-semibold text-on-surface-variant'}, 'No playbooks yet'),\n h('div', {className:'text-[12px] mt-1'}, 'Marketing skills will appear here once they are loaded.')\n ),\n\n // Empty: filtered out by search\n !loading && !error && categories.length > 0 && matchCount === 0 && h('div', {className:'flex flex-col items-center justify-center text-center py-16 text-text-muted'},\n Icon && h(Icon, {name:'search_off', size:34, className:'text-text-muted/50 mb-3'}),\n h('div', {className:'text-[14px] font-semibold text-on-surface-variant'}, 'No playbooks match \"' + query + '\"'),\n h('button', {\n onClick: () => setQuery(''),\n className:'mt-2 text-[11px] uppercase tracking-widest font-bold text-text-muted hover:text-primary transition-colors'\n }, 'Clear search')\n ),\n\n // Category sections\n filtered.map(cat => h('section', {key: cat.category, className:'space-y-md'},\n SectionHeader\n ? h(SectionHeader, {\n icon:'folder',\n title: cat.category,\n action: h('span', {className:'text-[11px] font-mono-data text-text-muted'}, cat.skills.length + (cat.skills.length === 1 ? ' skill' : ' skills'))\n })\n : h('div', {className:'flex items-center gap-2 border-b border-border-subtle pb-2'},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + catAccent(cat.category).dot}),\n h('h3', {className:'text-[15px] font-bold text-on-surface'}, cat.category),\n h('span', {className:'text-[11px] font-mono-data text-text-muted'}, '(' + cat.skills.length + ')')\n ),\n h('div', {className:'grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-md'},\n cat.skills.map(s => h(SkillCard, {\n key: s.name, skill: s,\n onToggle: toggleSkill,\n onRun: runSkill\n }))\n )\n ))\n );\n}\n`;\n}\n",[284],"b1874c68-5e66-11f1-bd5f-1607ee4eb77e","frontend_settings.ts","2ed92908-5821-11f1-92db-ee650bb23af1",884,["D",1780393058305],30,"// SettingsPage extracted from frontend_js2.ts (gap closure Phase 1 / Step 1 / C1).\n// Frees up frontend_js2.ts which had ~25 chars of headroom under val.town's 80K hard limit.\n// Served at /api/app-settings and dynamically imported by frontend_js.ts.\n//\n// Dependencies come from `window.__nexus` (set by frontend_js.ts on boot):\n// INTEGRATIONS, INTEGRATION_META, INTEGRATION_FIELDS, GOOGLE_SHARED,\n// Icon, BrandIcon, Btn, Input, Toggle, Spinner, SectionHeader, PageHeader.\n\nexport function getSettingsJS(): string {\n return `\nimport React, { useState, useEffect, useRef } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// QA fix: 4 real provider presets (was just OpenAI + Claude). Each card now corresponds\n// 1:1 with a provider the callLLM dispatcher actually supports.\nconst MODEL_PRESETS = [\n { id:'anthropic', name:'Claude Sonnet 4.6', meta:'Anthropic - 200k context', provider:'anthropic', model:'claude-sonnet-4-6', accent:'#c0c1ff', icon:'auto_awesome' },\n { id:'openai', name:'GPT-4o', meta:'OpenAI - 128k context', provider:'openai', model:'gpt-4o', accent:'#10a37f', icon:'flash_on' },\n { id:'gemini', name:'Gemini 3 Pro', meta:'Google - 1M context - reasoning', provider:'gemini', model:'gemini-3-pro-preview', accent:'#4285f4', icon:'diamond' },\n { id:'custom', name:'Custom Endpoint', meta:'Any OpenAI-compatible API', provider:'custom', model:'your-model', accent:'#d0bcff', icon:'extension' },\n];\n\n// D1: Customer Cohorts panel - list + add (label, size, ARPU, retention_curve CSV) + per-row LTV.\nfunction CohortPanel({showToast}) {\n const {Icon, Btn, Input, SectionHeader} = N();\n const [summary, setSummary] = useState({cohorts:[], blended_ltv:0, total_customers:0});\n const [draft, setDraft] = useState({label:'', size:'', arpu:'', curve:''});\n const [busy, setBusy] = useState(false);\n // QA fix: try the new /api/aio/cohorts path first, fall back to legacy /api/cohorts.\n // Also normalize the response so summary always has a cohorts array — a 404 JSON body\n // like {error:'...'} was previously overwriting state and crashing summary.cohorts.length.\n const normalize = (d) => ({\n cohorts: Array.isArray(d && d.cohorts) ? d.cohorts : [],\n blended_ltv: (d && Number(d.blended_ltv)) || 0,\n total_customers: (d && Number(d.total_customers)) || 0,\n });\n const tryFetch = async () => {\n for (const path of ['/api/aio/cohort-summary', '/api/aio/cohorts', '/api/cohorts']) {\n try {\n const r = await fetch(path);\n if (!r.ok) continue;\n const d = await r.json();\n return d;\n } catch {}\n }\n return null;\n };\n const load = () => tryFetch().then(d => setSummary(normalize(d)));\n // Wrap in a non-returning arrow - load() returns a Promise and React-18 would treat it\n // as the effect's cleanup function (then crash on unmount with \"t is not a function\").\n useEffect(() => { load(); }, []);\n // Try-each pattern for write endpoints too — POST/DELETE try the new path first, fall back.\n const postCohort = async (body) => {\n for (const path of ['/api/aio/cohorts', '/api/cohorts']) {\n const r = await fetch(path, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(() => null);\n if (r && r.ok) return true;\n }\n return false;\n };\n const deleteCohortRemote = async (id) => {\n for (const path of ['/api/aio/cohorts/' + id, '/api/cohorts/' + id]) {\n const r = await fetch(path, {method:'DELETE'}).catch(() => null);\n if (r && r.ok) return true;\n }\n return false;\n };\n const addCohort = async () => {\n if (!draft.label.trim() || !draft.size || !draft.arpu) return;\n setBusy(true);\n try {\n const retention_curve = draft.curve.split(/[, ]+/).map(x => parseFloat(x)).filter(n => Number.isFinite(n));\n const ok = await postCohort({\n cohort_label: draft.label.trim(),\n cohort_size: parseInt(draft.size, 10) || 0,\n arpu: parseFloat(draft.arpu) || 0,\n retention_curve,\n });\n setDraft({label:'', size:'', arpu:'', curve:''});\n await load();\n showToast && showToast(ok ? 'Cohort added' : 'Cohort endpoint not reachable', ok ? 'success' : 'error');\n } catch { showToast && showToast('Failed to add cohort', 'error'); }\n finally { setBusy(false); }\n };\n const delCohort = async (id) => {\n await deleteCohortRemote(id);\n await load();\n };\n return h('section', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h(SectionHeader, {icon:'group', title:'Customer Cohorts (LTV)', color:'secondary',\n action: h('span', {className:'text-[11px] text-text-muted font-mono-data'},\n summary.total_customers ? ('Blended LTV $' + Math.round(summary.blended_ltv) + ' - ' + summary.total_customers + ' customers') : 'No cohorts yet'\n )\n }),\n h('div', {className:'grid grid-cols-1 sm:grid-cols-4 gap-2.5'},\n h(Input, {label:'Label', value: draft.label, onChange: v => setDraft(d => ({...d, label: v})), placeholder:'2025-Q1 SaaS'}),\n h(Input, {label:'Size', type:'text', value: draft.size, onChange: v => setDraft(d => ({...d, size: v.replace(/[^0-9]/g,'')})), placeholder:'100'}),\n h(Input, {label:'ARPU ($/mo)', type:'text', value: draft.arpu, onChange: v => setDraft(d => ({...d, arpu: v.replace(/[^0-9.]/g,'')})), placeholder:'49'}),\n h(Input, {label:'Retention curve (CSV)', type:'text', value: draft.curve, onChange: v => setDraft(d => ({...d, curve: v})), placeholder:'100,82,71,65,60'})\n ),\n h('div', {className:'flex justify-end'},\n h(Btn, {onClick: addCohort, variant:'primary', size:'sm', disabled: busy},\n h(Icon, {name:'add', size:14}), busy ? 'Adding-' : 'Add cohort'\n )\n ),\n summary.cohorts.length > 0 && h('div', {className:'border border-border-subtle rounded-lg overflow-hidden'},\n h('div', {className:'grid grid-cols-12 gap-2 px-3 py-2 text-[10px] uppercase tracking-widest text-text-muted border-b border-border-subtle bg-surface-container/40'},\n h('div', {className:'col-span-4'}, 'Cohort'),\n h('div', {className:'col-span-2 text-right'}, 'Size'),\n h('div', {className:'col-span-2 text-right'}, 'ARPU'),\n h('div', {className:'col-span-2 text-right'}, 'Survival'),\n h('div', {className:'col-span-2 text-right'}, 'LTV')\n ),\n summary.cohorts.map(c => h('div', {key: c.id, className:'grid grid-cols-12 gap-2 px-3 py-2 text-[12px] border-b border-border-subtle/50 last:border-0 items-center'},\n h('div', {className:'col-span-4 truncate font-semibold text-on-surface flex items-center gap-2'},\n h('span', null, c.cohort_label),\n h('button', {onClick: () => delCohort(c.id), className:'text-text-muted hover:text-error transition-colors'},\n h(Icon, {name:'close', size:12})\n )\n ),\n h('div', {className:'col-span-2 text-right font-mono-data text-on-surface-variant'}, c.cohort_size),\n h('div', {className:'col-span-2 text-right font-mono-data text-on-surface-variant'}, '$' + c.arpu.toFixed(0)),\n h('div', {className:'col-span-2 text-right font-mono-data text-on-surface-variant'}, (c.survival * 100).toFixed(0) + '%'),\n h('div', {className:'col-span-2 text-right font-mono-data font-bold text-secondary'}, '$' + Math.round(c.ltv))\n ))\n )\n );\n}\n\n// Growth Methodology — pill selector for prioritization method (ICE | RICE | WSJF),\n// collapsible per-stage funnel metric overrides, collapsible custom-KPI builder.\n// Autosaves to /api/method-config on every change.\nfunction GrowthMethodologyPanel({showToast}) {\n const {Icon, Btn, Input, SectionHeader} = N();\n const INTEGRATIONS = (N().INTEGRATIONS || ['google','ahrefs','ga4','gsc','gmail','linkedin','outlook','wordpress','youtube','producthunt']);\n const [methods, setMethods] = useState([]); // static metadata from /api/method-config/methods\n const [cfg, setCfg] = useState({prioritization_method: 'ICE', funnel_metric_overrides: {TOFU:[], MOFU:[], BOFU:[]}, custom_kpis: []});\n const [loaded, setLoaded] = useState(false);\n const [overridesOpen, setOverridesOpen] = useState(false);\n const [kpisOpen, setKpisOpen] = useState(false);\n const [draftKpi, setDraftKpi] = useState({name:'', formula:'', unit:'count'});\n const [savedAt, setSavedAt] = useState(null);\n const saveTimer = useRef(null);\n\n useEffect(() => {\n Promise.all([\n fetch('/api/method-config').then(r => r.ok ? r.json() : null).catch(() => null),\n fetch('/api/method-config/methods').then(r => r.ok ? r.json() : null).catch(() => null),\n ]).then(([c, m]) => {\n if (c && typeof c === 'object') {\n setCfg({\n prioritization_method: c.prioritization_method || 'ICE',\n funnel_metric_overrides: c.funnel_metric_overrides || {TOFU:[], MOFU:[], BOFU:[]},\n custom_kpis: Array.isArray(c.custom_kpis) ? c.custom_kpis : [],\n });\n }\n if (m && Array.isArray(m.methods)) setMethods(m.methods);\n setLoaded(true);\n });\n }, []);\n\n // Debounced autosave - every cfg mutation triggers POST after 400ms quiet.\n const scheduleSave = (next) => {\n clearTimeout(saveTimer.current);\n saveTimer.current = setTimeout(async () => {\n try {\n const r = await fetch('/api/method-config', {\n method: 'POST', headers: {'Content-Type':'application/json'},\n body: JSON.stringify(next),\n });\n if (r.ok) { setSavedAt(Date.now()); }\n } catch {}\n }, 400);\n };\n\n const update = (patch) => {\n setCfg(prev => {\n const next = {...prev, ...patch};\n scheduleSave(next);\n return next;\n });\n };\n\n const setMethod = (key) => update({prioritization_method: key});\n\n const addOverride = (stage) => {\n const overrides = {...cfg.funnel_metric_overrides};\n overrides[stage] = [...(overrides[stage] || []), {integration:'gsc', metric:'clicks', weight:1}];\n update({funnel_metric_overrides: overrides});\n };\n const removeOverride = (stage, idx) => {\n const overrides = {...cfg.funnel_metric_overrides};\n overrides[stage] = (overrides[stage] || []).filter((_, i) => i !== idx);\n update({funnel_metric_overrides: overrides});\n };\n const setOverride = (stage, idx, key, val) => {\n const overrides = {...cfg.funnel_metric_overrides};\n const arr = [...(overrides[stage] || [])];\n arr[idx] = {...arr[idx], [key]: key === 'weight' ? (parseFloat(val) || 0) : val};\n overrides[stage] = arr;\n update({funnel_metric_overrides: overrides});\n };\n\n const addKpi = () => {\n if (!draftKpi.name.trim() || !draftKpi.formula.trim()) return;\n const kpis = [...cfg.custom_kpis, {name: draftKpi.name.trim(), formula: draftKpi.formula.trim(), unit: draftKpi.unit || 'count'}];\n setDraftKpi({name:'', formula:'', unit:'count'});\n update({custom_kpis: kpis});\n showToast && showToast('Custom KPI added', 'success');\n };\n const removeKpi = (idx) => {\n update({custom_kpis: cfg.custom_kpis.filter((_, i) => i !== idx)});\n };\n\n const activeMethod = methods.find(m => m.key === cfg.prioritization_method) || null;\n const stageColors = {TOFU:'primary', MOFU:'secondary', BOFU:'tertiary'};\n\n if (!loaded) {\n return h('section', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h(SectionHeader, {icon:'insights', title:'Growth Methodology', color:'primary'}),\n h('div', {className:'text-[12px] text-text-muted italic'}, 'Loading methods-')\n );\n }\n\n return h('section', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h(SectionHeader, {icon:'insights', title:'Growth Methodology', color:'primary',\n action: savedAt\n ? h('span', {className:'inline-flex items-center gap-1 text-[10px] text-secondary font-semibold uppercase tracking-widest'},\n h(Icon, {name:'check_circle', size:12, filled:true}), 'Saved'\n )\n : h('span', {className:'text-[10px] text-text-muted'}, 'Autosaves on change')\n }),\n\n // Pill selector ----------------------------------------------------------\n h('div', {className:'space-y-2.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'},\n 'Prioritization Method'\n ),\n h('div', {className:'flex flex-wrap gap-2'},\n methods.map(m => {\n const on = cfg.prioritization_method === m.key;\n return h('button', {\n key: m.key, onClick: () => setMethod(m.key), type:'button',\n className:'px-3 py-1.5 rounded-full text-[12px] font-semibold uppercase tracking-wider border transition-all ' +\n (on\n ? 'bg-primary text-on-primary border-primary shadow-md shadow-primary/20'\n : 'bg-surface-container-lowest text-on-surface-variant border-border-subtle hover:border-primary/40')\n }, m.key);\n })\n ),\n activeMethod && h('div', {className:'p-3 rounded-lg bg-surface-container/40 border border-border-subtle space-y-1.5'},\n h('div', {className:'flex items-baseline justify-between gap-2'},\n h('span', {className:'text-[12px] font-bold text-on-surface'}, activeMethod.name),\n h('span', {className:'text-[10px] text-text-muted font-mono-data truncate'}, activeMethod.range)\n ),\n h('div', {className:'text-[12px] text-secondary font-mono-data'}, activeMethod.formula),\n h('div', {className:'text-[11px] text-text-medium-contrast leading-relaxed'}, activeMethod.why)\n )\n ),\n\n // Funnel metric overrides (collapsed by default) -------------------------\n h('div', {className:'border-t border-border-subtle/50 pt-md space-y-2'},\n h('button', {\n onClick: () => setOverridesOpen(!overridesOpen), type:'button',\n className:'w-full flex items-center justify-between text-left'\n },\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[12px] font-bold text-on-surface'}, 'Funnel metric overrides ',\n h('span', {className:'text-[10px] text-text-muted font-normal'}, '(advanced)')\n ),\n h('span', {className:'text-[10px] text-text-muted'},\n 'Override which metrics drive TOFU/MOFU/BOFU health. Empty = use built-in AARRR map.'\n )\n ),\n h(Icon, {name: overridesOpen ? 'expand_less' : 'expand_more', size:18})\n ),\n overridesOpen && h('div', {className:'space-y-md pt-2'},\n ['TOFU','MOFU','BOFU'].map(stage => {\n const rows = cfg.funnel_metric_overrides[stage] || [];\n return h('div', {key: stage, className:'border border-border-subtle rounded-lg overflow-hidden'},\n h('div', {className:'flex items-center justify-between px-3 py-2 bg-surface-container/40 border-b border-border-subtle'},\n h('div', {className:'flex items-center gap-2'},\n h('span', {className:'inline-block w-1.5 h-1.5 rounded-full bg-' + stageColors[stage]}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-on-surface'}, stage),\n h('span', {className:'text-[10px] text-text-muted'}, rows.length + ' override' + (rows.length === 1 ? '' : 's'))\n ),\n h('button', {\n onClick: () => addOverride(stage), type:'button',\n className:'text-[10px] font-semibold uppercase tracking-wider text-primary hover:text-primary/80 flex items-center gap-1'\n }, h(Icon, {name:'add', size:12}), 'Add metric')\n ),\n rows.length === 0\n ? h('div', {className:'px-3 py-2 text-[11px] text-text-muted italic'}, 'No overrides - using defaults')\n : rows.map((row, idx) =>\n h('div', {key: idx, className:'grid grid-cols-12 gap-2 px-3 py-2 border-b border-border-subtle/30 last:border-0 items-center'},\n h('select', {\n value: row.integration,\n onChange: e => setOverride(stage, idx, 'integration', e.target.value),\n className:'col-span-4 bg-surface-container-lowest border border-border-subtle rounded px-2 py-1 text-[11px] font-mono-data text-on-surface'\n }, INTEGRATIONS.map(it => h('option', {key: it, value: it}, it))),\n h('input', {\n type:'text', value: row.metric,\n onChange: e => setOverride(stage, idx, 'metric', e.target.value),\n placeholder:'metric_key',\n className:'col-span-5 bg-surface-container-lowest border border-border-subtle rounded px-2 py-1 text-[11px] font-mono-data text-on-surface'\n }),\n h('input', {\n type:'number', step:'0.1', min:'0', max:'2', value: row.weight,\n onChange: e => setOverride(stage, idx, 'weight', e.target.value),\n className:'col-span-2 bg-surface-container-lowest border border-border-subtle rounded px-2 py-1 text-[11px] font-mono-data text-on-surface text-right'\n }),\n h('button', {\n onClick: () => removeOverride(stage, idx), type:'button',\n className:'col-span-1 text-text-muted hover:text-error flex justify-center'\n }, h(Icon, {name:'close', size:14}))\n )\n )\n );\n })\n )\n ),\n\n // Custom KPI builder (collapsed by default) ------------------------------\n h('div', {className:'border-t border-border-subtle/50 pt-md space-y-2'},\n h('button', {\n onClick: () => setKpisOpen(!kpisOpen), type:'button',\n className:'w-full flex items-center justify-between text-left'\n },\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[12px] font-bold text-on-surface'}, 'Custom KPIs ',\n h('span', {className:'text-[10px] text-text-muted font-normal'}, '(advanced)')\n ),\n h('span', {className:'text-[10px] text-text-muted'},\n 'Define your own KPIs - saved to your growth config. ' + cfg.custom_kpis.length + ' defined.'\n )\n ),\n h(Icon, {name: kpisOpen ? 'expand_less' : 'expand_more', size:18})\n ),\n kpisOpen && h('div', {className:'space-y-md pt-2'},\n h('div', {className:'grid grid-cols-12 gap-2'},\n h('input', {\n type:'text', placeholder:'KPI name (e.g. Pipeline Velocity)',\n value: draftKpi.name,\n onChange: e => setDraftKpi(d => ({...d, name: e.target.value})),\n className:'col-span-4 bg-surface-container-lowest border border-border-subtle rounded px-2 py-1.5 text-[12px] text-on-surface'\n }),\n h('input', {\n type:'text', placeholder:'Formula (ga4.conversions / ga4.sessions)',\n value: draftKpi.formula,\n onChange: e => setDraftKpi(d => ({...d, formula: e.target.value})),\n className:'col-span-5 bg-surface-container-lowest border border-border-subtle rounded px-2 py-1.5 text-[12px] font-mono-data text-on-surface'\n }),\n h('select', {\n value: draftKpi.unit,\n onChange: e => setDraftKpi(d => ({...d, unit: e.target.value})),\n className:'col-span-2 bg-surface-container-lowest border border-border-subtle rounded px-2 py-1.5 text-[12px] text-on-surface'\n }, ['count','%','$','s','ratio'].map(u => h('option', {key: u, value: u}, u))),\n h('button', {\n onClick: addKpi, type:'button',\n className:'col-span-1 bg-primary text-on-primary rounded text-[12px] font-semibold uppercase tracking-wider hover:opacity-90'\n }, 'Add')\n ),\n cfg.custom_kpis.length > 0 && h('div', {className:'border border-border-subtle rounded-lg overflow-hidden'},\n cfg.custom_kpis.map((k, idx) => h('div', {key: idx, className:'grid grid-cols-12 gap-2 px-3 py-2 border-b border-border-subtle/30 last:border-0 items-center'},\n h('div', {className:'col-span-3 text-[12px] font-bold text-on-surface truncate'}, k.name),\n h('div', {className:'col-span-7 text-[11px] font-mono-data text-on-surface-variant truncate'}, k.formula),\n h('div', {className:'col-span-1 text-[10px] text-text-muted font-mono-data text-right'}, k.unit),\n h('button', {\n onClick: () => removeKpi(idx), type:'button',\n className:'col-span-1 text-text-muted hover:text-error flex justify-center'\n }, h(Icon, {name:'close', size:14}))\n ))\n )\n )\n )\n );\n}\n\nfunction PrefRow({label, desc, value, onChange}) {\n const {Toggle} = N();\n return h('div', {className:'flex items-center justify-between py-1.5'},\n h('div', {className:'flex flex-col min-w-0 pr-3'},\n h('span', {className:'text-[13px] font-bold text-on-surface'}, label),\n h('span', {className:'text-[10px] text-text-muted'}, desc)\n ),\n h(Toggle, {value, onChange})\n );\n}\n\n// Part 15.2 — Company Profile panel. Structured business identity bound to\n// GET/PUT /api/company-profile. Loads on mount; Save does a JSON PUT and toasts.\n// ADDITIVE: new self-contained panel, does not touch any existing section.\nfunction CompanyProfilePanel({showToast}) {\n const {Icon, Btn, Input, SectionHeader, Spinner} = N();\n const FIELDS = [\n {key:'name', label:'Company name', placeholder:'Acme Inc.'},\n {key:'product', label:'What we sell', placeholder:'Products / services'},\n {key:'value_proposition', label:'Positioning / value', placeholder:'Why customers choose us'},\n {key:'icp', label:'Ideal customer (ICP)', placeholder:'Segments, personas, who we sell to'},\n {key:'differentiators', label:'Differentiators', placeholder:'What sets us apart'},\n {key:'competitors', label:'Competitors', placeholder:'Who we compete with'},\n {key:'pricing', label:'Pricing', placeholder:'Plans, model, price points'},\n {key:'voice', label:'Voice / tone', placeholder:\"Tone + brand do's & don'ts\"},\n {key:'goals', label:'Goals / targets', placeholder:'What we are trying to achieve'},\n ];\n const empty = () => FIELDS.reduce((o, f) => { o[f.key] = ''; return o; }, {});\n const [form, setForm] = useState(empty);\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n // ADDITIVE (Part 15.2b): AI enrich + company-document upload.\n const [enriching, setEnriching] = useState(false);\n const [uploading, setUploading] = useState(false);\n const uploadRef = useRef(null);\n\n useEffect(() => {\n fetch('/api/company-profile')\n .then(r => r.ok ? r.json() : null)\n .then(p => {\n if (p && typeof p === 'object') {\n setForm(prev => {\n const next = {...prev};\n FIELDS.forEach(f => { if (typeof p[f.key] === 'string') next[f.key] = p[f.key]; });\n return next;\n });\n }\n })\n .catch(() => {})\n .finally(() => setLoading(false));\n }, []);\n\n const setField = (key, v) => setForm(f => ({...f, [key]: v}));\n\n const save = async () => {\n setSaving(true);\n try {\n const body = {};\n FIELDS.forEach(f => { body[f.key] = form[f.key] || ''; });\n const r = await fetch('/api/company-profile', {\n method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)\n });\n if (!r.ok) throw new Error('Failed');\n showToast && showToast('Company profile saved', 'success');\n } catch (e) {\n showToast && showToast('Failed to save company profile', 'error');\n } finally { setSaving(false); }\n };\n\n // AI Enrich — POST /api/company-profile/enrich, then MERGE the returned\n // enriched profile into form state so the user reviews suggestions and\n // clicks the existing Save. Only fills fields the model returned as strings.\n const enrich = async () => {\n setEnriching(true);\n try {\n const r = await fetch('/api/company-profile/enrich', {\n method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({})\n });\n const data = await r.json().catch(() => ({}));\n if (!r.ok) throw new Error((data && data.error) || 'Enrichment failed');\n const enriched = (data && data.enriched && typeof data.enriched === 'object') ? data.enriched : {};\n setForm(prev => {\n const next = {...prev};\n FIELDS.forEach(f => {\n const v = enriched[f.key];\n if (typeof v === 'string' && v.trim()) next[f.key] = v;\n });\n return next;\n });\n showToast && showToast((data && data.message) || 'AI enrichment ready - review then Save', 'success');\n } catch (e) {\n showToast && showToast(e && e.message ? e.message : 'AI enrichment failed', 'error');\n } finally { setEnriching(false); }\n };\n\n // ---- Company-document upload → company-tagged global knowledge ----------\n // Extract text in-browser (txt/md/csv/json via FileReader; .pdf via pdfjs-dist;\n // .docx via mammoth — replicated inline, NO cross-module import), then POST\n // /api/knowledge with kind:'company' + empty targets so it's global context\n // the AI uses and the enrichment reads.\n const MAX_KNOWLEDGE_CHARS = 500000;\n const readTextFile = (file) => new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => resolve(String(reader.result || ''));\n reader.onerror = () => reject(new Error('Could not read file'));\n reader.readAsText(file);\n });\n const readPdfFile = async (file) => {\n const pdfjs = await import('https://esm.sh/pdfjs-dist@4.0.379/build/pdf.min.mjs');\n pdfjs.GlobalWorkerOptions.workerSrc = 'https://esm.sh/pdfjs-dist@4.0.379/build/pdf.worker.min.mjs';\n const buf = await file.arrayBuffer();\n const pdf = await pdfjs.getDocument({data: buf}).promise;\n const parts = [];\n for (let i = 1; i <= pdf.numPages; i++) {\n const page = await pdf.getPage(i);\n const tc = await page.getTextContent();\n parts.push(tc.items.map(it => (it && it.str) || '').join(' '));\n }\n return parts.join('\\\\n\\\\n');\n };\n const readDocxFile = async (file) => {\n const mammoth = await import('https://esm.sh/mammoth@1.6.0/mammoth.browser.min.js');\n const lib = (mammoth && mammoth.default) ? mammoth.default : mammoth;\n const buf = await file.arrayBuffer();\n const out = await lib.extractRawText({arrayBuffer: buf});\n return (out && out.value) || '';\n };\n const onUploadContext = async (e) => {\n const file = e && e.target && e.target.files && e.target.files[0];\n if (e && e.target) e.target.value = ''; // allow re-selecting the same file\n if (!file) return;\n setUploading(true);\n showToast && showToast('Reading ' + (file.name || 'file') + '-', 'info');\n try {\n const lower = (file.name || '').toLowerCase();\n let text = '';\n if (lower.endsWith('.pdf') || file.type === 'application/pdf') {\n text = await readPdfFile(file);\n } else if (lower.endsWith('.docx') || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {\n text = await readDocxFile(file);\n } else {\n text = await readTextFile(file);\n }\n text = (text || '').trim();\n if (!text) throw new Error('No readable text found in file');\n if (text.length > MAX_KNOWLEDGE_CHARS) text = text.slice(0, MAX_KNOWLEDGE_CHARS);\n const r = await fetch('/api/knowledge', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({name: file.name || 'Company context', kind:'company', content: text, enabled: true, targets: []})\n });\n if (!r.ok) throw new Error('Upload failed');\n showToast && showToast('Added \"' + (file.name || 'file') + '\" to company knowledge', 'success');\n } catch (err) {\n showToast && showToast('Upload failed: ' + (err && err.message ? err.message : 'could not parse file'), 'error');\n } finally { setUploading(false); }\n };\n\n return h('section', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h(SectionHeader, {icon:'badge', title:'Company Profile', color:'primary',\n action: h('span', {className:'text-[10px] text-text-muted'}, 'Who this business is - injected into every AI surface')\n }),\n loading\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'Loading profile-')\n : h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-md'},\n FIELDS.map(f =>\n h(Input, {\n key: f.key, label: f.label, type:'text',\n value: form[f.key] || '',\n onChange: v => setField(f.key, v),\n placeholder: f.placeholder\n })\n )\n ),\n // Hidden file input — extracts text in-browser, POSTs as company knowledge.\n h('input', {\n ref: uploadRef, type:'file', className:'hidden',\n accept:'.txt,.md,.csv,.json,.pdf,.docx',\n onChange: onUploadContext\n }),\n h('div', {className:'flex flex-wrap items-center justify-between gap-2.5 pt-1'},\n h('div', {className:'flex items-center gap-2.5'},\n h(Btn, {\n onClick: () => uploadRef.current && uploadRef.current.click(),\n variant:'ghost', size:'sm', disabled: uploading || loading,\n title:'Upload a doc (.txt .md .csv .json .pdf .docx) as company-tagged knowledge the AI uses'\n },\n uploading ? h(Spinner, {size:13}) : h(Icon, {name:'upload_file', size:14}),\n uploading ? 'Uploading-' : 'Upload context'\n ),\n h(Btn, {\n onClick: enrich, variant:'secondary', size:'sm',\n disabled: enriching || loading,\n title:'Use AI to draft/fill profile fields from your knowledge - review, then Save'\n },\n enriching ? h(Spinner, {size:13}) : h(Icon, {name:'auto_awesome', size:14}),\n enriching ? 'Enriching-' : 'AI Enrich'\n )\n ),\n h(Btn, {onClick: save, variant:'primary', size:'sm', disabled: saving || loading || enriching},\n saving ? h(Spinner, {size:13}) : h(Icon, {name:'save', size:14}),\n saving ? 'Saving-' : 'Save profile'\n )\n )\n );\n}\n\n// Part 15.3 — Memory panel. Lists GET /api/memory; Add (POST {content}),\n// per-row pin (PUT /api/memory/{id} {pinned}) + delete (DELETE /api/memory/{id}).\n// ADDITIVE: new self-contained panel, does not touch any existing section.\nfunction MemoryPanel({showToast}) {\n const {Icon, Btn, Input, SectionHeader} = N();\n const [items, setItems] = useState([]);\n const [draft, setDraft] = useState('');\n const [busy, setBusy] = useState(false);\n\n const load = () =>\n fetch('/api/memory')\n .then(r => r.ok ? r.json() : [])\n .then(d => setItems(Array.isArray(d) ? d : []))\n .catch(() => {});\n useEffect(() => { load(); }, []);\n\n const add = async () => {\n const content = draft.trim();\n if (!content) return;\n setBusy(true);\n try {\n const r = await fetch('/api/memory', {\n method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({content})\n });\n if (!r.ok) throw new Error('Failed');\n setDraft('');\n await load();\n showToast && showToast('Memory added', 'success');\n } catch (e) {\n showToast && showToast('Failed to add memory', 'error');\n } finally { setBusy(false); }\n };\n\n const togglePin = async (m) => {\n try {\n const r = await fetch('/api/memory/' + m.id, {\n method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({pinned: !m.pinned})\n });\n if (!r.ok) throw new Error('Failed');\n await load();\n } catch (e) { showToast && showToast('Failed to update memory', 'error'); }\n };\n\n const remove = async (m) => {\n try {\n const r = await fetch('/api/memory/' + m.id, {method:'DELETE'});\n if (!r.ok) throw new Error('Failed');\n await load();\n showToast && showToast('Memory removed', 'info');\n } catch (e) { showToast && showToast('Failed to remove memory', 'error'); }\n };\n\n return h('section', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h(SectionHeader, {icon:'psychology', title:'Memory', color:'secondary',\n action: h('span', {className:'text-[11px] text-text-muted font-mono-data'},\n items.length ? (items.length + ' item' + (items.length === 1 ? '' : 's')) : 'No memory yet'\n )\n }),\n h('div', {className:'flex items-end gap-2.5'},\n h('div', {className:'flex-1'},\n h(Input, {\n label:'Add a memory', type:'text', value: draft,\n onChange: v => setDraft(v),\n placeholder:'A durable fact about this business the AI should remember'\n })\n ),\n h(Btn, {onClick: add, variant:'primary', size:'sm', disabled: busy || !draft.trim()},\n h(Icon, {name:'add', size:14}), busy ? 'Adding-' : 'Add'\n )\n ),\n items.length > 0 && h('div', {className:'border border-border-subtle rounded-lg overflow-hidden'},\n items.map(m => h('div', {\n key: m.id,\n className:'flex items-center gap-2 px-3 py-2 text-[12px] border-b border-border-subtle/50 last:border-0'\n },\n h('span', {\n className:'flex-shrink-0 px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-widest border ' +\n (m.pinned ? 'bg-primary/10 text-primary border-primary/30' : 'bg-surface-container/60 text-text-muted border-border-subtle')\n }, m.type || 'fact'),\n h('span', {className:'flex-1 min-w-0 truncate text-on-surface'}, m.content),\n m.pinned && h(Icon, {name:'push_pin', size:12, filled:true, className:'text-primary flex-shrink-0'}),\n h('button', {\n onClick: () => togglePin(m),\n title: m.pinned ? 'Unpin' : 'Pin',\n className:'flex-shrink-0 text-text-muted hover:text-primary transition-colors'\n }, h(Icon, {name: m.pinned ? 'push_pin' : 'push_pin', size:14, filled: !!m.pinned})),\n h('button', {\n onClick: () => remove(m),\n title:'Delete',\n className:'flex-shrink-0 text-text-muted hover:text-error transition-colors'\n }, h(Icon, {name:'close', size:14}))\n ))\n )\n );\n}\n\nexport function SettingsPage({integrations, setIntegrations, llmConfig, setLlmConfig, showToast}) {\n const {INTEGRATIONS, INTEGRATION_META, INTEGRATION_FIELDS, GOOGLE_SHARED,\n Icon, BrandIcon, Btn, Input, Spinner, SectionHeader, PageHeader} = N();\n const [llmForm, setLlmForm] = useState({\n provider: llmConfig?.provider || 'anthropic',\n apiKey: llmConfig?.api_key || '',\n model: llmConfig?.model || 'claude-sonnet-4-6',\n endpoint: llmConfig?.endpoint || '',\n });\n const [llmSaving, setLlmSaving] = useState(false);\n const [dirty, setDirty] = useState(false);\n // QA fix: removed cosmetic secondaryKey state - old UI had two key inputs but only one\n // was wired. New UI shows one key input bound to the active provider (per-provider storage).\n const [temperature, setTemperature] = useState(0.7);\n const [freqPenalty, setFreqPenalty] = useState(0.5);\n const [intFields, setIntFields] = useState(() => {\n const init = {};\n (INTEGRATIONS || []).forEach(name => {\n init[name] = {};\n ((INTEGRATION_FIELDS || {})[name] || []).forEach(f => { init[name][f.key] = ''; });\n });\n return init;\n });\n const [intSaving, setIntSaving] = useState({});\n const [expandedInt, setExpandedInt] = useState(null);\n const [lastSavedAt, setLastSavedAt] = useState(null);\n const [prefsLocal, setPrefsLocal] = useState({\n ultraDensity: true, translucency: true, mono: false,\n hardwareAccel: true,\n });\n // D2 + D1 + D4: extra config inputs (pipeline/quota for coverage, retention for LTV/MER)\n const [roiConfig, setRoiConfig] = useState({avg_deal_size:'', est_marketing_spend:'', pipeline_value:'', sales_quota:'', retention_months:''});\n const [autoSyncSec, setAutoSyncSec] = useState(60); // B4: drives funnel/feed polling\n useEffect(() => {\n fetch('/api/config').then(r => r.json()).then(cfg => {\n if (cfg.workspace_prefs && typeof cfg.workspace_prefs === 'object') {\n setPrefsLocal(p => ({...p, ...cfg.workspace_prefs}));\n // B1: also apply to DOM so toggles match reality when the page opens.\n N().applyWorkspacePrefs && N().applyWorkspacePrefs(cfg.workspace_prefs);\n }\n if (cfg.avg_deal_size != null) setRoiConfig(rc => ({...rc, avg_deal_size: String(cfg.avg_deal_size)}));\n if (cfg.est_marketing_spend != null) setRoiConfig(rc => ({...rc, est_marketing_spend: String(cfg.est_marketing_spend)}));\n if (cfg.pipeline_value != null) setRoiConfig(rc => ({...rc, pipeline_value: String(cfg.pipeline_value)}));\n if (cfg.sales_quota != null) setRoiConfig(rc => ({...rc, sales_quota: String(cfg.sales_quota)}));\n if (cfg.retention_months != null) setRoiConfig(rc => ({...rc, retention_months: String(cfg.retention_months)}));\n if (cfg.temperature != null) setTemperature(parseFloat(cfg.temperature));\n if (cfg.frequency_penalty != null) setFreqPenalty(parseFloat(cfg.frequency_penalty));\n if (cfg.auto_sync_seconds != null) setAutoSyncSec(parseInt(cfg.auto_sync_seconds, 10) || 60);\n }).catch(() => {});\n }, []);\n const persistPrefs = useRef(null);\n const saveCfg = (k, v) => fetch('/api/config',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({[k]:v})});\n const saveRoiConfig = async () => {\n await Promise.all([\n saveCfg('avg_deal_size', parseFloat(roiConfig.avg_deal_size)||0),\n saveCfg('est_marketing_spend', parseFloat(roiConfig.est_marketing_spend)||0),\n // D2 + D1: pipeline coverage + retention months for LTV\n ...(roiConfig.pipeline_value !== '' ? [saveCfg('pipeline_value', parseFloat(roiConfig.pipeline_value)||0)] : []),\n ...(roiConfig.sales_quota !== '' ? [saveCfg('sales_quota', parseFloat(roiConfig.sales_quota)||0)] : []),\n ...(roiConfig.retention_months !== '' ? [saveCfg('retention_months', parseFloat(roiConfig.retention_months)||12)] : []),\n ]);\n showToast && showToast('Marketing + Sales inputs saved', 'success');\n };\n const purgeAll = async () => {\n if (prompt('Type PURGE to wipe notes/cache/history/baselines/tasks (keeps integrations + LLM):') !== 'PURGE') return;\n const r = await fetch('/api/admin/purge',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({confirm:'PURGE'})});\n showToast(r.ok?'Data purged':'Purge failed', r.ok?'info':'error');\n };\n const removeDemoData = async () => {\n try {\n const s = await fetch('/api/admin/seed-status').then(r => r.json()).catch(() => null);\n const total = s && s.ok ? (s.total || 0) : 0;\n if (!total) { showToast('No demo data found','info'); return; }\n const parts = Object.entries(s.counts || {}).filter(([,n]) => Number(n) > 0).map(([k,n]) => k+':'+n).join(', ');\n if (!window.confirm('Found ' + total + ' demo rows (' + parts + '). Remove them? This cannot be undone.')) return;\n const r = await fetch('/api/admin/cleanup-mock',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({confirm:'CLEANUP'})});\n const j = await r.json().catch(() => ({}));\n if (r.ok && j.ok) showToast('Removed ' + (j.total||0) + ' demo rows','success');\n else showToast('Cleanup failed','error');\n } catch (e) { showToast('Cleanup error','error'); }\n };\n\n useEffect(() => {\n const f = {};\n integrations.forEach(ig => {\n f[ig.name] = {};\n let ec = ig.extra_config || {};\n if (typeof ec === 'string') { try { ec = JSON.parse(ec); } catch (e) { ec = {}; } }\n if (ec.target) f[ig.name].target = ec.target;\n if (ec.property_id) f[ig.name].propertyId = ec.property_id;\n if (ec.site_url) f[ig.name].siteUrl = ec.site_url;\n if (ec.client_id) f[ig.name].clientId = ec.client_id;\n if (ec.redirect_uri) f[ig.name].redirectUri = ec.redirect_uri;\n if (ec.youtube_channels) f[ig.name].ytChannels = ec.youtube_channels;\n });\n setIntFields(prev => {\n const u = {...prev};\n Object.keys(f).forEach(n => { u[n] = {...u[n], ...f[n]}; });\n return u;\n });\n }, [integrations]);\n\n useEffect(() => {\n if (llmConfig) {\n setLlmForm({\n provider: llmConfig.provider || 'anthropic',\n apiKey: llmConfig.api_key || '',\n model: llmConfig.model || 'claude-sonnet-4-6',\n endpoint: llmConfig.endpoint || '',\n });\n }\n }, [llmConfig]);\n\n const setLlmField = (k, v) => { setLlmForm(f => ({...f, [k]: v})); setDirty(true); };\n const setIntField = (name, key, val) => setIntFields(f => ({...f, [name]: {...f[name], [key]: val}}));\n\n const discardChanges = () => {\n if (llmConfig) setLlmForm({\n provider: llmConfig.provider || 'anthropic',\n apiKey: llmConfig.api_key || '',\n model: llmConfig.model || 'claude-sonnet-4-6',\n endpoint: llmConfig.endpoint || '',\n });\n setTemperature(0.7); setFreqPenalty(0.5);\n setDirty(false);\n showToast('Pending changes discarded', 'info');\n };\n\n const selectPreset = (preset) => {\n setLlmField('provider', preset.provider);\n setLlmField('model', preset.model);\n };\n\n const saveLlm = async () => {\n setLlmSaving(true);\n try {\n // QA fix: only send api_key when user actually typed one - backend preserves the\n // per-provider key when this field is omitted (prevents accidental wipe on switch).\n const payload = {provider: llmForm.provider, model: llmForm.model, endpoint: llmForm.endpoint};\n const typedKey = (llmForm.apiKey || '').trim();\n // If apiKey looks like the masked echo from GET (ends with ***), treat as unchanged.\n if (typedKey && !typedKey.endsWith('***')) payload.api_key = typedKey;\n const res = await fetch('/api/llm/config', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(payload)\n });\n if (!res.ok) throw new Error('Failed');\n const data = await res.json();\n setLlmConfig(data);\n // Reflect server-side resolved key (masked) so the field doesn't keep showing the raw key.\n setLlmForm(f => ({...f, apiKey: data.api_key || '', endpoint: data.endpoint || '', model: data.model || f.model}));\n setLastSavedAt(Date.now());\n setDirty(false);\n showToast('Configuration committed', 'success');\n } catch (e) { showToast('Failed to save LLM config', 'error'); }\n finally { setLlmSaving(false); }\n };\n\n const disconnectIntegration = async (name) => {\n if (!confirm(\\`Disconnect \\${INTEGRATION_META[name]?.label}? This clears stored credentials.\\`)) return;\n await fetch(\\`/api/integrations/\\${name}\\`, {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({access_token: null, api_key: null, api_secret: null})\n });\n setIntegrations(prev => prev.map(i => i.name === name ? {...i, connected: false, access_token: undefined} : i));\n showToast(\\`\\${INTEGRATION_META[name]?.label} disconnected\\`, 'info');\n };\n\n const saveIntegration = async (name, opts={silent: false}) => {\n setIntSaving(s => ({...s, [name]: true}));\n try {\n const f = intFields[name] || {};\n const ex = {};\n if (f.propertyId) ex.property_id = f.propertyId;\n if (f.siteUrl) ex.site_url = f.siteUrl;\n if (f.target) ex.target = f.target;\n if (f.clientId) ex.client_id = f.clientId;\n if (f.redirectUri) ex.redirect_uri = f.redirectUri;\n if (f.ytChannels) ex.youtube_channels = String(f.ytChannels).trim();\n const pl = {};\n if (f.apiKey) pl.api_key = f.apiKey;\n if (f.apiSecret) pl.api_secret = f.apiSecret;\n if (f.accessToken) pl.access_token = f.accessToken;\n if (Object.keys(ex).length) pl.extra_config = ex;\n if (Object.keys(pl).length === 0) {\n setIntSaving(s => ({...s, [name]: false}));\n return;\n }\n const res = await fetch(\\`/api/integrations/\\${name}\\`, {\n method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(pl)\n });\n if (!res.ok) throw new Error('Failed');\n\n const fresh = await fetch('/api/integrations').then(r => r.json()).catch(() => null);\n if (Array.isArray(fresh)) setIntegrations(fresh);\n\n let verified = null;\n if (name !== 'google' && !(GOOGLE_SHARED || []).includes(name)) {\n try {\n const r = await (await fetch(\\`/api/integrations/\\${name}/data?endpoint=test\\`)).json();\n verified = r.ok === true;\n } catch {}\n }\n setLastSavedAt(Date.now());\n if (!opts.silent) {\n showToast(\n verified === true ? \\`\\${INTEGRATION_META[name].label} verified\\`\n : verified === false ? 'Saved - credentials look invalid'\n : \\`\\${INTEGRATION_META[name].label} credentials saved\\`,\n verified === false ? 'error' : 'success'\n );\n }\n // Only clear the secret inputs on an explicit save. On silent autosaves, KEEP them so a\n // follow-up autosave re-sends the key (prevents a target-only save from racing/clobbering it).\n if (!opts.silent) setIntFields(prev => ({...prev, [name]: {...prev[name], apiKey: '', apiSecret: '', accessToken: ''}}));\n } catch (e) { showToast('Save failed', 'error'); }\n finally { setIntSaving(s => ({...s, [name]: false})); }\n };\n\n const autoSaveTimers = useRef({});\n const scheduleAutoSave = (name) => {\n clearTimeout(autoSaveTimers.current[name]);\n autoSaveTimers.current[name] = setTimeout(() => saveIntegration(name, {silent: true}), 600);\n };\n\n const providerModels = {anthropic:'claude-sonnet-4-6', openai:'gpt-4o', gemini:'gemini-1.5-flash', custom:'your-model'};\n const togglePref = (k) => {\n setPrefsLocal(p => {\n const next = {...p, [k]: !p[k]};\n // B1: apply to DOM immediately so the user sees the visual change without waiting for save.\n N().applyWorkspacePrefs && N().applyWorkspacePrefs(next);\n clearTimeout(persistPrefs.current);\n persistPrefs.current = setTimeout(() => {\n fetch('/api/config', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({workspace_prefs: next})}).catch(() => {});\n }, 400);\n return next;\n });\n };\n const secondsAgo = lastSavedAt ? Math.round((Date.now() - lastSavedAt)/1000) : null;\n\n return h('div', {className:'p-lg lg:p-xl space-y-xl max-w-6xl mx-auto pb-32'},\n h(PageHeader, {\n title:'System Configuration',\n subtitle:'Manage global LLM parameters, secure authentication channels, and workspace performance settings.'\n }),\n\n h('div', {className:'grid grid-cols-1 lg:grid-cols-12 gap-lg items-start'},\n\n h('section', {className:'lg:col-span-7 glass-panel rounded-xl p-lg space-y-lg'},\n // QA fix: removed cosmetic \"System Online\" pulse-dot badge that was hardcoded true.\n // Real system health lives on SystemStatusBar (pings /api/health).\n h(SectionHeader, {icon:'neurology', title:'LLM Config', color:'primary'}),\n\n h('div', {className:'space-y-md'},\n\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Default Model Engine'),\n // QA fix: 4-card grid (was 2). All 4 providers callLLM actually supports are now selectable.\n h('div', {className:'grid grid-cols-2 sm:grid-cols-4 gap-2.5'},\n MODEL_PRESETS.map(p => {\n const on = llmForm.provider === p.provider;\n const hasKey = !!(llmConfig?.has_key && llmConfig.has_key[p.provider]);\n return h('button', {\n key: p.id, onClick: () => selectPreset(p), type:'button',\n className:'flex flex-col items-start gap-1.5 p-3 rounded-lg border text-left transition-all ' +\n (on ? 'border-primary bg-primary/5' : 'border-border-subtle bg-surface-container-lowest hover:border-outline/40')\n },\n h('div', {className:'flex items-center justify-between w-full'},\n h(Icon, {name: p.icon, size:18, className: on ? 'text-primary' : 'text-text-muted'}),\n hasKey\n ? h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-secondary'}, '- saved')\n : h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, '- empty')\n ),\n h('span', {className:'text-[12px] font-bold leading-tight ' + (on?'text-on-surface':'text-on-surface-variant')}, p.name),\n h('span', {className:'text-[10px] text-text-muted leading-tight'}, p.meta)\n );\n })\n )\n ),\n\n // QA fix: single API-key input bound to the ACTIVE provider. Placeholder + helper\n // text adapt to provider so users know exactly what to paste.\n h('div', {className:'space-y-1.5'},\n h('div', {className:'flex items-center justify-between'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'},\n 'API Key - ' + (llmForm.provider || 'anthropic')\n ),\n llmConfig?.has_key && llmConfig.has_key[llmForm.provider]\n ? h('span', {className:'text-[10px] text-secondary font-semibold'}, '- saved (leave blank to keep)')\n : h('span', {className:'text-[10px] text-text-muted'}, 'paste to save')\n ),\n h('div', {className:'flex items-center gap-2 bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 neon-stroke transition-all'},\n h(Icon, {name:'key', size:16, className:'text-text-muted'}),\n h('input', {\n type:'password',\n value: llmForm.apiKey || '',\n onChange: e => setLlmField('apiKey', e.target.value),\n placeholder: llmForm.provider === 'anthropic' ? 'sk-ant--'\n : llmForm.provider === 'openai' ? 'sk-proj--'\n : llmForm.provider === 'gemini' ? 'AIza-'\n : 'your custom token',\n className:'flex-1 bg-transparent border-none text-secondary text-[13px] font-mono-data outline-none p-0 min-w-0 placeholder:text-text-muted'\n })\n ),\n llmForm.provider === 'custom' && h('div', {className:'flex items-center gap-2 bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 mt-2'},\n h(Icon, {name:'link', size:16, className:'text-text-muted'}),\n h('input', {\n type:'text',\n value: llmForm.endpoint || '',\n onChange: e => setLlmField('endpoint', e.target.value),\n placeholder:'https://your-openai-compatible.com/v1',\n className:'flex-1 bg-transparent border-none text-on-surface text-[13px] font-mono-data outline-none p-0 min-w-0 placeholder:text-text-muted'\n })\n )\n ),\n\n h('div', {className:'grid grid-cols-1 sm:grid-cols-2 gap-md'},\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Temperature'),\n h('input', {\n type:'range', min:0, max:1, step:0.01, value: temperature,\n onChange: e => { const v=parseFloat(e.target.value); setTemperature(v); setDirty(true); saveCfg('temperature',v); },\n className:'w-full accent-primary bg-surface-variant rounded-lg h-1.5 appearance-none cursor-pointer'\n }),\n h('div', {className:'flex justify-between text-[10px] text-text-muted font-mono-data'},\n h('span', null, 'Deterministic (0.0)'),\n h('span', {className:'text-primary font-bold'}, temperature.toFixed(2)),\n h('span', null, 'Creative (1.0)')\n )\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Frequency Penalty'),\n h('input', {\n type:'range', min:0, max:1, step:0.01, value: freqPenalty,\n onChange: e => { const v=parseFloat(e.target.value); setFreqPenalty(v); setDirty(true); saveCfg('frequency_penalty',v); },\n className:'w-full accent-primary bg-surface-variant rounded-lg h-1.5 appearance-none cursor-pointer'\n }),\n h('div', {className:'flex justify-between text-[10px] text-text-muted font-mono-data'},\n h('span', null, 'None'),\n h('span', {className:'text-primary font-bold'}, freqPenalty.toFixed(2)),\n h('span', null, 'Max')\n )\n )\n ),\n\n h(Input, {label:'Model Name', value: llmForm.model, onChange: v => setLlmField('model', v), placeholder: providerModels[llmForm.provider]}),\n\n h('div', {className:'pt-md mt-md border-t border-border-subtle'},\n h('div', {className:'flex items-center justify-between mb-2'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'},\n 'Marketing ROI inputs'\n ),\n h('span', {className:'text-[10px] text-text-muted'}, '(GA4 conversions - deal size) - spend')\n ),\n h('div', {className:'grid grid-cols-2 gap-md'},\n h(Input, {\n label:'Avg Deal Size ($)', type:'text',\n value: roiConfig.avg_deal_size,\n onChange: v => setRoiConfig(rc => ({...rc, avg_deal_size: v.replace(/[^0-9.]/g,'')})),\n placeholder:'500'\n }),\n h(Input, {\n label:'Monthly Spend ($)', type:'text',\n value: roiConfig.est_marketing_spend,\n onChange: v => setRoiConfig(rc => ({...rc, est_marketing_spend: v.replace(/[^0-9.]/g,'')})),\n placeholder:'5000'\n }),\n // D1: retention drives LTV = avg_deal - retention_months\n h(Input, {\n label:'Retention (months)', type:'text',\n value: roiConfig.retention_months,\n onChange: v => setRoiConfig(rc => ({...rc, retention_months: v.replace(/[^0-9.]/g,'')})),\n placeholder:'12'\n }),\n // D2: Pipeline Coverage Ratio inputs - drives the sales-side benchmark\n h(Input, {\n label:'Pipeline Value ($)', type:'text',\n value: roiConfig.pipeline_value,\n onChange: v => setRoiConfig(rc => ({...rc, pipeline_value: v.replace(/[^0-9.]/g,'')})),\n placeholder:'150000'\n }),\n h(Input, {\n label:'Sales Quota ($/period)', type:'text',\n value: roiConfig.sales_quota,\n onChange: v => setRoiConfig(rc => ({...rc, sales_quota: v.replace(/[^0-9.]/g,'')})),\n placeholder:'50000'\n })\n ),\n h('div', {className:'mt-3 flex justify-end'},\n h(Btn, {onClick: saveRoiConfig, variant:'ghost', size:'sm'},\n h(Icon, {name:'save', size:13}), 'Save AIO inputs'\n )\n )\n )\n )\n ),\n\n h('section', {className:'lg:col-span-5 space-y-lg'},\n h('div', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h(SectionHeader, {icon:'cable', title:'Integration Auth', color:'secondary'}),\n h('div', {className:'space-y-2.5 max-h-[520px] overflow-y-auto pr-1 -mr-1'},\n (INTEGRATIONS || []).map(name => {\n const meta = INTEGRATION_META[name];\n const integ = integrations.find(i => i.name === name);\n const google = integrations.find(i => i.name === 'google');\n const outlook = integrations.find(i => i.name === 'outlook');\n const MS_SHARED = ['onedrive','teams','excel'];\n const sharesGoogle = (GOOGLE_SHARED || []).includes(name);\n const sharesMicrosoft = MS_SHARED.includes(name);\n const connected = integ?.connected || (sharesGoogle && google?.connected) || (sharesMicrosoft && outlook?.connected);\n const configured = integ?.configured || (sharesGoogle && google?.configured) || (sharesMicrosoft && outlook?.connected);\n const isWhite = name === 'google';\n const ago = integ?.updated_at\n ? Math.round((Date.now() - new Date(integ.updated_at).getTime())/3600000) + 'h ago'\n : null;\n const dotCls = connected ? 'bg-secondary' : configured ? 'bg-tertiary' : 'bg-text-muted';\n const statusText = connected\n ? (sharesGoogle && !integ?.connected ? 'Connected via Google'\n : sharesMicrosoft && !integ?.connected ? 'Connected via Outlook'\n : 'Connected' + (ago ? ' - ' + ago : ''))\n : configured ? 'Saved - awaiting OAuth'\n : sharesGoogle ? 'Inherits Google OAuth'\n : sharesMicrosoft ? 'Inherits Outlook OAuth'\n : 'Not configured';\n return h('div', {\n key: name,\n className:'bg-surface-container/50 border border-border-subtle rounded-lg p-md flex items-center justify-between gap-3 group hover:border-primary/40 transition-all'\n },\n h('div', {className:'flex items-center gap-md min-w-0 flex-1'},\n h('div', {\n className:'w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ' + (isWhite ? 'bg-white' : ''),\n style: isWhite ? {} : {background: meta.color}\n }, h(BrandIcon, {slug: meta.icon, color: isWhite ? meta.color : '#ffffff', size: 18, bare: true})),\n h('div', {className:'min-w-0 flex-1'},\n h('p', {className:'text-[13px] font-bold text-on-surface truncate'}, meta.label),\n h('div', {className:'flex items-center gap-1.5 mt-1'},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + dotCls}),\n h('span', {className:'text-[10px] text-text-muted truncate'}, statusText)\n )\n )\n ),\n (() => {\n // OAuth integrations get a Reconnect (re-authorize in place) — Outlook + its shared\n // MS services (onedrive/teams/excel) use the Microsoft flow; Google-family uses Google.\n const oauthUrl = (name === 'outlook' || sharesMicrosoft) ? '/api/auth/microsoft'\n : name === 'linkedin' ? '/api/auth/linkedin'\n : (name === 'google' || sharesGoogle) ? '/api/auth/google' : null;\n const primaryOauth = name === 'google' || name === 'outlook' || name === 'linkedin';\n if (oauthUrl) {\n return h('div', {className:'flex items-center gap-2 flex-shrink-0'},\n h('button', {\n onClick: () => { window.location.href = oauthUrl; },\n title: connected ? 'Re-authorize (keeps your data, refreshes scopes)' : 'Connect via OAuth',\n className:'text-[11px] font-semibold uppercase tracking-wider text-primary border border-primary/20 bg-primary/5 px-2 py-1 rounded hover:bg-primary/20 transition-all'\n }, connected ? 'Reconnect' : 'Connect'),\n (primaryOauth && connected) ? h('button', {\n onClick: () => disconnectIntegration(name),\n className:'text-[11px] font-semibold uppercase tracking-wider text-error border border-error/20 bg-error/5 px-2 py-1 rounded hover:bg-error/20 transition-all'\n }, 'Disconnect') : null\n );\n }\n if (connected) return h('button', {\n onClick: () => disconnectIntegration(name),\n className:'text-[11px] font-semibold uppercase tracking-wider text-error border border-error/20 bg-error/5 px-2 py-1 rounded hover:bg-error/20 transition-all flex-shrink-0'\n }, 'Disconnect');\n return h('button', {\n onClick: () => setExpandedInt(expandedInt === name ? null : name),\n className:'text-[11px] font-semibold uppercase tracking-wider text-on-surface border border-outline/30 px-2 py-1 rounded hover:bg-surface-variant transition-all flex-shrink-0'\n }, expandedInt === name ? 'Hide' : (configured ? 'Edit' : 'Connect'));\n })()\n );\n })\n )\n )\n ),\n\n h('section', {className:'lg:col-span-12 glass-panel rounded-xl p-lg'},\n h(SectionHeader, {icon:'room_preferences', title:'Workspace Preferences', color:'tertiary'}),\n h('div', {className:'grid grid-cols-1 md:grid-cols-3 gap-xl'},\n\n h('div', {className:'space-y-md'},\n h('h4', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-muted border-l-2 border-primary pl-2'}, 'Visual & Interface'),\n h('div', {className:'space-y-2.5'},\n h(PrefRow, {label:'Ultra-Density Mode', desc:'Maximize data per pixel', value: prefsLocal.ultraDensity, onChange: () => togglePref('ultraDensity')}),\n h(PrefRow, {label:'Animated Translucency', desc:'Glassmorphism effects', value: prefsLocal.translucency, onChange: () => togglePref('translucency')}),\n h(PrefRow, {label:'Code Monospacing', desc:'Force mono for all IDs', value: prefsLocal.mono, onChange: () => togglePref('mono')})\n )\n ),\n\n h('div', {className:'space-y-md'},\n h('h4', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-muted border-l-2 border-secondary pl-2'}, 'Performance Shell'),\n h('div', {className:'space-y-2.5'},\n h(PrefRow, {label:'Reduced Motion', desc:'Reduce motion & transforms', value: prefsLocal.hardwareAccel, onChange: () => togglePref('hardwareAccel')}),\n // B4: real Auto-Sync Interval - drives the funnel/feed/badge polling cadence.\n h('div', {className:'flex items-center justify-between py-1.5 border-t border-border-subtle/50'},\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[13px] font-bold'}, 'Auto-Sync Interval'),\n h('span', {className:'text-[10px] text-text-muted'}, 'Funnel + feed refresh cadence')\n ),\n h('select', {\n value: String(autoSyncSec),\n onChange: e => {\n const v = parseInt(e.target.value, 10);\n setAutoSyncSec(v);\n N().setAutoSyncSeconds && N().setAutoSyncSeconds(v);\n saveCfg('auto_sync_seconds', v);\n },\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[12px] font-mono-data text-on-surface focus:border-primary focus:outline-none'\n },\n [10,30,60,120,300].map(sec =>\n h('option', {key: sec, value: String(sec)}, sec < 60 ? sec + 's' : (sec/60) + 'm')\n )\n )\n )\n )\n ),\n\n h('div', {className:'space-y-md'},\n h('h4', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-muted border-l-2 border-tertiary pl-2'}, 'Security & Privacy'),\n h('div', {className:'space-y-2.5'},\n h('button', {onClick: purgeAll, className:'w-full flex items-center justify-between py-1.5 border-t border-border-subtle/50 hover:bg-error/5 transition-colors text-left'},\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[13px] font-bold text-error'}, 'Purge All Data'),\n h('span', {className:'text-[10px] text-text-muted'}, 'Irreversible - type PURGE to confirm')\n ),\n h(Icon, {name:'delete_forever', size:20, className:'text-error'})\n ),\n h('button', {onClick: removeDemoData, className:'w-full flex items-center justify-between py-1.5 border-t border-border-subtle/50 hover:bg-warning/5 transition-colors text-left'},\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[13px] font-bold text-warning'}, 'Remove demo data'),\n h('span', {className:'text-[10px] text-text-muted'}, 'Deletes seed agents + QA/test rows only')\n ),\n h(Icon, {name:'cleaning_services', size:20, className:'text-warning'})\n )\n )\n )\n )\n )\n ),\n\n // D1: Customer Cohorts panel - drives cohort-survival LTV in /api/cohorts\n h(CohortPanel, {showToast}),\n\n // CONFIGURABLE METRICS: Growth Methodology - prioritization method + funnel\n // metric overrides + custom KPIs. Autosaves to /api/method-config.\n h(GrowthMethodologyPanel, {showToast}),\n\n // Part 15.2 — Company Profile: structured business identity (GET/PUT /api/company-profile).\n h(CompanyProfilePanel, {showToast}),\n\n // Part 15.3 — Memory: persistent evolving business facts (GET/POST/PUT/DELETE /api/memory).\n h(MemoryPanel, {showToast}),\n\n expandedInt && (() => {\n const expIntg = integrations.find(i => i.name === expandedInt);\n const hasKey = !!expIntg?.has_api_key;\n const hasSecret = !!expIntg?.has_api_secret;\n const hasToken = !!expIntg?.has_access_token;\n const savedPlaceholder = (key) => {\n if ((key === 'apiKey' && hasKey) ||\n (key === 'apiSecret' && hasSecret) ||\n (key === 'accessToken' && hasToken)) {\n return '-------- Saved - leave empty to keep';\n }\n return null;\n };\n return h('section', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h(SectionHeader, {\n icon:'tune',\n title:'Configure - ' + INTEGRATION_META[expandedInt].label,\n color:'primary',\n action: h('div', {className:'flex items-center gap-2'},\n hasKey || hasSecret || hasToken\n ? h('span', {className:'inline-flex items-center gap-1 text-[10px] font-semibold uppercase tracking-widest text-secondary'},\n h(Icon, {name:'check_circle', size:14, filled:true}), 'Credentials on file'\n )\n : null,\n h('button', {onClick: () => setExpandedInt(null), className:'text-text-muted hover:text-on-surface ml-2'},\n h(Icon, {name:'close', size:20})\n )\n )\n }),\n expandedInt === 'google' && (() => {\n let ec = expIntg?.extra_config || {};\n if (typeof ec === 'string') { try { ec = JSON.parse(ec); } catch (e) { ec = {}; } }\n const SCOPE_LABELS = [\n ['analytics', 'GA4'], ['webmasters', 'Search Console'], ['youtube', 'YouTube'],\n ['drive', 'Drive'], ['spreadsheets', 'Sheets'], ['documents', 'Docs'],\n ['calendar', 'Calendar'], ['gmail', 'Gmail']\n ];\n const granted = Array.isArray(ec.granted_scopes) ? ec.granted_scopes : [];\n const grantedSet = granted.join(' ').toLowerCase();\n const lastAuth = ec.last_authorized_at;\n return h('div', {className:'p-3.5 rounded-lg bg-primary/5 border border-primary/20 text-[12px] text-on-surface-variant leading-relaxed space-y-2'},\n h('div', null,\n 'One Google Cloud project authorizes all 8 Workspace services. Click ',\n h('span', {className:'font-bold'}, hasToken ? '\"Re-authorize Google\"' : '\"Connect with Google\"'),\n ' to grant all Workspace tools at once.'\n ),\n hasToken && h('div', {className:'pt-2 border-t border-border-subtle/50'},\n h('div', {className:'text-[10px] uppercase tracking-widest text-text-medium-contrast mb-1.5'},\n 'Token scope coverage' + (lastAuth ? ' - authorized ' + new Date(lastAuth).toLocaleString() : '')\n ),\n h('div', {className:'flex flex-wrap gap-1.5'},\n SCOPE_LABELS.map(([key, label]) => {\n const on = grantedSet.includes(key);\n return h('span', {\n key: key,\n className:'inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider border ' +\n (on\n ? 'bg-secondary/10 text-secondary border-secondary/30'\n : 'bg-error/10 text-error border-error/30')\n }, h(Icon, {name: on?'check':'close', size:11}), label);\n })\n ),\n granted.length === 0 && h('div', {className:'mt-1.5 text-[11px] text-text-muted'},\n 'Granted scopes weren\\\\'t saved - click Re-authorize Google to refresh the list.'\n )\n )\n );\n })(),\n ((INTEGRATION_FIELDS || {})[expandedInt] || []).length === 0\n ? h('div', {className:'text-[13px] text-text-muted italic text-center py-4'},\n 'No separate credentials needed - uses Google Workspace OAuth.'\n )\n : h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-md'},\n ((INTEGRATION_FIELDS || {})[expandedInt] || []).map(f => {\n const saved = savedPlaceholder(f.key);\n return h('div', {key: f.key, onBlur: () => scheduleAutoSave(expandedInt)},\n h(Input, {\n label: f.label, type: f.type,\n value: intFields[expandedInt]?.[f.key] || '',\n onChange: v => setIntField(expandedInt, f.key, v),\n placeholder: saved || (f.type === 'password' ? '--------' : ('Enter ' + f.label.toLowerCase() + '-')),\n hint: f.hint\n })\n );\n })\n ),\n h('div', {className:'flex gap-2.5 flex-wrap items-center pt-2'},\n h(Btn, {onClick: () => saveIntegration(expandedInt), variant:'primary', size:'sm', disabled: intSaving[expandedInt]},\n intSaving[expandedInt] ? h(Spinner, {size:13}) : h(Icon, {name:'save', size:14}),\n intSaving[expandedInt] ? 'Saving-' : 'Save now'\n ),\n expandedInt === 'google' && h(Btn, {\n onClick: () => { window.location.href = '/api/auth/google'; },\n variant:'secondary', size:'sm'\n }, h(Icon, {name:'key', size:14}), hasToken ? 'Re-authorize Google' : 'Connect with Google'),\n expandedInt === 'linkedin' && h(Btn, {\n onClick: () => { window.location.href = '/api/auth/linkedin'; },\n variant:'secondary', size:'sm'\n }, h(Icon, {name:'link', size:14}), hasToken ? 'Re-authorize LinkedIn' : 'Connect with LinkedIn'),\n expandedInt === 'outlook' && h(Btn, {\n onClick: () => { window.location.href = '/api/auth/microsoft'; },\n variant:'secondary', size:'sm'\n }, h(Icon, {name:'key', size:14}), hasToken ? 'Re-authorize Outlook' : 'Connect with Outlook'),\n h('span', {className:'text-[10px] text-text-muted italic'}, '- Fields auto-save on blur')\n )\n );\n })(),\n\n h('div', {className:'fixed left-0 sm:left-64 right-0 bottom-8 z-30 px-4 pb-4 pointer-events-none'},\n h('div', {className:'max-w-6xl mx-auto flex items-center justify-between bg-surface-container-high/85 backdrop-blur-md p-3 rounded-xl border border-border-subtle pointer-events-auto shadow-2xl gap-3'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h(Icon, {\n name: dirty ? 'sync' : 'check_circle',\n size:16,\n className: dirty ? 'text-tertiary spin' : (secondsAgo != null ? 'text-secondary' : 'text-text-muted')\n }),\n h('span', {className:'text-[11px] font-semibold uppercase tracking-widest text-text-medium-contrast truncate'},\n dirty ? 'Unsaved changes' : (secondsAgo != null ? 'Last auto-saved ' + secondsAgo + 's ago' : 'All systems nominal')\n )\n ),\n h('div', {className:'flex items-center gap-md flex-shrink-0'},\n h('button', {\n onClick: discardChanges, disabled: !dirty, type:'button',\n className:'px-lg py-2 text-on-surface-variant text-[11px] font-semibold uppercase tracking-widest hover:text-on-surface transition-all disabled:opacity-40 disabled:cursor-not-allowed'\n }, 'Discard Changes'),\n h('button', {\n onClick: saveLlm, disabled: llmSaving, type:'button',\n className:'bg-primary text-on-primary text-[11px] font-semibold uppercase tracking-widest px-xl py-2 rounded-lg shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5'\n }, llmSaving && h(Spinner, {size:12, color:'#fff'}), llmSaving ? 'Committing-' : 'Commit Configuration')\n )\n )\n )\n );\n}\n`;\n}\n",[291],"d0446246-5b4e-11f1-ac08-ee650bb23af1","frontend_renderers2.ts","713d2982-5b48-11f1-8e6c-ee650bb23af1",519,["D",1780052948479],3,"// Assembles per-integration renderers from val.town/renderers/<name>.ts into the served ES module.\n// Each renderer lives in its own file; this concatenates them (val.town has no build step).\nimport { PREAMBLE } from \"./renderers/_preamble.ts\";\nimport { RENDERER as ahrefs } from \"./renderers/ahrefs.ts\";\nimport { RENDERER as onedrive } from \"./renderers/onedrive.ts\";\nimport { RENDERER as teams } from \"./renderers/teams.ts\";\nimport { RENDERER as excel } from \"./renderers/excel.ts\";\nimport { RENDERER as ga4 } from \"./renderers/ga4.ts\";\n\nexport function getRenderers2JS(): string {\n return [PREAMBLE, ahrefs, onedrive, teams, excel, ga4].join(\"\\n\\n\");\n}\n",[299],"cfddefc0-5b4e-11f1-b9cd-ee650bb23af1","frontend_renderers.ts","3e3eef40-5808-11f1-a5fb-ee650bb23af1",518,["D",1780052947805],9,"// Assembles per-integration renderers from val.town/renderers/<name>.ts into the served ES module.\n// Each renderer lives in its own file; this concatenates them (val.town has no build step).\nimport { PREAMBLE } from \"./renderers/_preamble.ts\";\nimport { RENDERER as gmail } from \"./renderers/gmail.ts\";\nimport { RENDERER as drive } from \"./renderers/drive.ts\";\nimport { RENDERER as calendar } from \"./renderers/calendar.ts\";\nimport { RENDERER as sheets } from \"./renderers/sheets.ts\";\nimport { RENDERER as docs } from \"./renderers/docs.ts\";\nimport { RENDERER as linkedin } from \"./renderers/linkedin.ts\";\nimport { RENDERER as gsc } from \"./renderers/gsc.ts\";\nimport { RENDERER as youtube } from \"./renderers/youtube.ts\";\nimport { RENDERER as outlook } from \"./renderers/outlook.ts\";\nimport { RENDERER as wordpress } from \"./renderers/wordpress.ts\";\nimport { RENDERER as producthunt } from \"./renderers/producthunt.ts\";\n\nexport function getRenderersJS(): string {\n return [PREAMBLE, gmail, drive, calendar, sheets, docs, linkedin, gsc, youtube, outlook, wordpress, producthunt].join(\"\\n\\n\");\n}\n",[307],"25c42708-5ef9-11f1-b9da-1607ee4eb77e","frontend_platform.ts","afb4c7b8-5ef1-11f1-bffe-1607ee4eb77e",960,["D",1780455959852],"// PlatformConsole - master-only superadmin surface (Phase A portal + Phase B console + Phase C controls).\n// Served at /api/app-platform and dynamically imported by frontend_js.ts, registered on\n// window.__nexus exactly like frontend_tasks.ts (TasksPage). Reachable ONLY when the\n// authenticated user is the platform master (me.isPlatformAdmin === true). The router GATE\n// (router.ts) already 403s every /api/platform/* request from non-admins, and the nav entry\n// + render in frontend_js2.ts is gated - this page is the single, audited exception to\n// per-tenant isolation. Phase C adds CONTROLS: per-user/per-tenant Suspend / Reactivate /\n// Delete, an audit log, and immediate lockout enforcement (api/auth.ts). Phase D adds a\n// \"View as\" action per non-admin row that starts READ-ONLY impersonation\n// (POST /api/platform/impersonate/<tenantId> -> reload); the fixed banner + exit live in\n// frontend_js2.ts, and every tenant-data write is blocked server-side (main.ts) until exit.\n//\n// Mirrors frontend_tasks.ts: browser React module, h = React.createElement,\n// shared deps pulled from window.__nexus, default-exported page component. The bearer token\n// is auto-attached to every /api fetch by frontend_js.ts's fetch override, so calls are\n// plain '/api/...'.\n//\n// Backend endpoints used (all master-only, all return JSON - the ONLY cross-tenant reads):\n// GET /api/platform/overview - { tenants, users, activeSessions, recentSignups }\n// GET /api/platform/tenants - [{ id, name, plan, created_at, owner_email, member_count }]\n// GET /api/platform/users - [{ id, email, name, tenant_id, last_login_at, status,\n// is_platform_admin, created_at }]\n// GET /api/platform/sessions - [{ email, tenant, created_at, user_agent }] (who is logged in)\n// GET /api/platform/activity - merged tenant-attributed, time-sorted feed\n// GET /api/platform/audit - [{ actor_email, action, target_type, target_id, created_at, detail }]\n//\n// Phase C control endpoints (POST, master-only, return { ok, error? }):\n// POST /api/platform/users/:id/{suspend,reactivate,delete} (delete = user + their tenant, IRREVERSIBLE)\n// POST /api/platform/tenants/:id/{suspend,reactivate,delete} (delete = whole-tenant teardown, IRREVERSIBLE)\n// Phase D impersonation endpoints (POST, master-only, return { ok, error? }):\n// POST /api/platform/impersonate/:tenantId (start READ-ONLY view-as; flips the master's session)\n// POST /api/platform/impersonate/exit (stop; handled by the banner in frontend_js2.ts)\n// Suspend/Delete are DISABLED in the UI for platform admins and for the master's own account\n// (the backend enforces the same guards; the UI just avoids offering an action that will 400).\n//\n// Browser template-literal rules: ONE outer template literal, string concat inside (no ${}),\n// no unescaped backticks, no TypeScript annotations, emojis as \\uXXXX.\n\nexport function getPlatformJS(): string {\n return `\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// --- Time helpers (relative + absolute) -------------------------------------\nfunction timeAgo(iso) {\n if (!iso) return '';\n const d = new Date(iso); const now = new Date();\n const sec = Math.floor((now - d) / 1000);\n if (isNaN(sec)) return '';\n if (sec < 0) return 'just now';\n if (sec < 60) return sec + 's ago';\n if (sec < 3600) return Math.floor(sec/60) + 'm ago';\n if (sec < 86400) return Math.floor(sec/3600) + 'h ago';\n if (sec < 2592000) return Math.floor(sec/86400) + 'd ago';\n return d.toLocaleDateString();\n}\nfunction fmtDateTime(iso) {\n if (!iso) return '\\\\u2014';\n const d = new Date(iso);\n if (isNaN(d.getTime())) return String(iso);\n return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });\n}\nconst MIDDOT = ' \\\\u00b7 ';\nconst ARROW = ' \\\\u2192 ';\n\n// --- Status pill (user lifecycle) -------------------------------------------\nconst STATUS_META = {\n active: { label: 'Active', hex: '#4edea3', cls: 'bg-secondary/10 text-secondary border-secondary/30' },\n suspended: { label: 'Suspended', hex: '#ffb4ab', cls: 'bg-error/10 text-error border-error/30' },\n invited: { label: 'Invited', hex: '#d0bcff', cls: 'bg-tertiary/10 text-tertiary border-tertiary/30' },\n disabled: { label: 'Disabled', hex: '#8a8a99', cls: 'bg-surface-container/40 text-text-muted border-border-subtle' },\n};\nfunction StatusPill({status}) {\n const v = String(status || 'active').toLowerCase();\n const meta = STATUS_META[v] || { label: status || 'Unknown', hex: '#8a8a99', cls: 'bg-surface-container/40 text-text-muted border-border-subtle' };\n return h('span', {\n className: 'inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border ' + meta.cls\n },\n h('span', { className: 'w-1.5 h-1.5 rounded-full', style: { background: meta.hex } }),\n meta.label\n );\n}\n\n// --- Row action button (view-as / suspend / reactivate / delete) ------------\n// A compact icon+label button used in the tenants/users table. \\`tone\\` selects the\n// colour scheme; \\`disabled\\` greys it out (used for platform admins / the master's own\n// row, where the action is forbidden). \\`busy\\` shows a spinner while the POST is in flight.\nconst ACTION_TONE = {\n warn: 'text-amber-300 border-amber-400/30 hover:bg-amber-400/10 hover:border-amber-400/50',\n good: 'text-secondary border-secondary/30 hover:bg-secondary/10 hover:border-secondary/50',\n danger: 'text-error border-error/30 hover:bg-error/10 hover:border-error/50',\n view: 'text-primary border-primary/30 hover:bg-primary/10 hover:border-primary/50',\n};\nfunction ActionBtn({icon, label, tone, disabled, busy, title, onClick}) {\n const {Icon} = N();\n const toneCls = ACTION_TONE[tone] || ACTION_TONE.warn;\n const base = 'inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-1 rounded-md border transition-colors whitespace-nowrap';\n if (disabled) {\n return h('span', {\n title: title || 'Not allowed',\n className: base + ' opacity-40 cursor-not-allowed text-text-muted border-border-subtle'\n },\n Icon && icon ? h(Icon, { name: icon, size: 12 }) : null,\n h('span', null, label)\n );\n }\n return h('button', {\n type: 'button', title: title || label, disabled: busy, onClick,\n className: base + ' ' + toneCls + (busy ? ' opacity-60 cursor-wait' : '')\n },\n Icon && icon ? h(Icon, { name: busy ? 'hourglass_empty' : icon, size: 12 }) : null,\n h('span', null, busy ? 'Working\\\\u2026' : label)\n );\n}\n\n// --- Small inline labelled chip (tenant / plan) -----------------------------\nfunction Chip({icon, label, title}) {\n const {Icon} = N();\n if (!label) return null;\n return h('span', {\n title: title || label,\n className: 'inline-flex items-center gap-1 max-w-[200px] text-[10px] font-medium px-1.5 py-0.5 rounded border border-border-subtle bg-surface-container/40 text-text-muted'\n },\n Icon && icon ? h(Icon, { name: icon, size: 11, className: 'flex-shrink-0' }) : null,\n h('span', { className: 'truncate' }, label)\n );\n}\n\n// --- Section shell (titled glass panel with optional count) -----------------\nfunction Section({icon, color, title, subtitle, count, children}) {\n const {Icon} = N();\n return h('section', { className: 'glass-panel rounded-xl p-lg space-y-md' },\n h('div', { className: 'flex items-center justify-between gap-3 flex-wrap' },\n h('div', { className: 'flex items-center gap-2' },\n Icon && icon ? h(Icon, { name: icon, size: 18, style: { color: color || '#c0c1ff' } }) : null,\n h('h3', { className: 'text-[15px] font-bold text-on-surface tracking-tight' }, title),\n count != null ? h('span', { className: 'text-[11px] font-mono-data text-text-muted' }, MIDDOT + count) : null\n ),\n subtitle ? h('span', { className: 'text-[11px] text-text-muted' }, subtitle) : null\n ),\n children\n );\n}\n\n// --- Honest empty state -----------------------------------------------------\nfunction Empty({icon, text}) {\n const {Icon} = N();\n return h('div', { className: 'flex flex-col items-center justify-center gap-2 py-8 text-center' },\n Icon && icon ? h(Icon, { name: icon, size: 22, className: 'text-text-muted/60' }) : null,\n h('p', { className: 'text-[12px] text-text-muted' }, text)\n );\n}\n\n// --- \"Who is logged in now\" - one active session row ------------------------\nfunction uaShort(ua) {\n if (!ua) return 'Unknown device';\n const s = String(ua);\n if (/iPhone|iPad|Android|Mobile/i.test(s)) {\n if (/iPhone/i.test(s)) return 'iPhone';\n if (/iPad/i.test(s)) return 'iPad';\n if (/Android/i.test(s)) return 'Android';\n return 'Mobile';\n }\n let browser = 'Browser';\n if (/Edg\\\\//i.test(s)) browser = 'Edge';\n else if (/Chrome\\\\//i.test(s) && !/Chromium/i.test(s)) browser = 'Chrome';\n else if (/Firefox\\\\//i.test(s)) browser = 'Firefox';\n else if (/Safari\\\\//i.test(s) && !/Chrome/i.test(s)) browser = 'Safari';\n let os = '';\n if (/Macintosh|Mac OS X/i.test(s)) os = 'macOS';\n else if (/Windows/i.test(s)) os = 'Windows';\n else if (/Linux/i.test(s)) os = 'Linux';\n return os ? (browser + MIDDOT.trim() + ' ' + os) : browser;\n}\n\nfunction SessionRow({s}) {\n const {Icon} = N();\n const email = s.email || 'Unknown user';\n const tenant = s.tenant || s.tenant_name || s.tenant_id || '';\n return h('div', { className: 'flex items-center gap-3 py-2.5 px-1 border-b border-border-subtle/60 last:border-b-0' },\n h('span', {\n className: 'flex-shrink-0 w-2 h-2 rounded-full bg-secondary',\n title: 'Active session', style: { boxShadow: '0 0 0 3px rgba(78,222,163,0.18)' }\n }),\n h('div', { className: 'min-w-0 flex-1' },\n h('div', { className: 'flex items-center gap-2 flex-wrap' },\n h('span', { className: 'text-[13px] font-semibold text-on-surface truncate' }, email),\n tenant ? h(Chip, { icon: 'corporate_fare', label: tenant }) : null\n ),\n h('div', { className: 'flex items-center gap-2 text-[10px] text-text-muted mt-0.5' },\n Icon ? h(Icon, { name: 'devices', size: 11 }) : null,\n h('span', null, uaShort(s.user_agent)),\n s.created_at ? h('span', null, MIDDOT + 'signed in ' + timeAgo(s.created_at)) : null\n )\n )\n );\n}\n\n// --- Activity feed - one merged, tenant-attributed event ---------------------\n// The backend merges agent_runs, campaign_runs and recent logins into one\n// time-sorted feed. Each item is rendered defensively: we read whichever of the\n// known fields are present rather than assuming a single rigid shape.\nconst ACTIVITY_META = {\n agent_run: { icon: 'smart_toy', color: '#c0c1ff', label: 'Agent run' },\n campaign_run: { icon: 'campaign', color: '#d0bcff', label: 'Campaign run' },\n login: { icon: 'login', color: '#4edea3', label: 'Login' },\n default: { icon: 'bolt', color: '#8a8a99', label: 'Activity' },\n};\nfunction activityKind(a) {\n const t = String(a.type || a.kind || a.event || '').toLowerCase();\n if (t.indexOf('agent') !== -1) return 'agent_run';\n if (t.indexOf('campaign') !== -1) return 'campaign_run';\n if (t.indexOf('login') !== -1 || t.indexOf('session') !== -1) return 'login';\n if (a.agent_name || a.agent) return 'agent_run';\n if (a.campaign_name || a.campaign) return 'campaign_run';\n return 'default';\n}\nfunction activityWhen(a) {\n return a.created_at || a.started_at || a.finished_at || a.at || a.time || '';\n}\nfunction activityTitle(a, kind) {\n if (a.title) return a.title;\n if (kind === 'agent_run') return (a.agent_name || a.agent || 'Agent') + ' run';\n if (kind === 'campaign_run') return (a.campaign_name || a.campaign || 'Campaign') + ' run';\n if (kind === 'login') return (a.email || 'A user') + ' signed in';\n return a.action || a.label || 'Activity';\n}\nconst RUN_STATUS_HEX = {\n completed: '#4edea3', success: '#4edea3', done: '#4edea3',\n running: '#d0bcff', queued: '#c0c1ff', pending: '#c0c1ff',\n failed: '#ffb4ab', error: '#ffb4ab', blocked: '#ffb4ab',\n};\nfunction ActivityRow({a}) {\n const {Icon} = N();\n const kind = activityKind(a);\n const meta = ACTIVITY_META[kind] || ACTIVITY_META.default;\n const when = activityWhen(a);\n const tenant = a.tenant || a.tenant_name || a.tenant_id || '';\n const status = a.status ? String(a.status).toLowerCase() : '';\n const statusHex = status ? (RUN_STATUS_HEX[status] || '#8a8a99') : '';\n return h('div', { className: 'flex items-start gap-3 py-2.5 px-1 border-b border-border-subtle/60 last:border-b-0' },\n h('div', {\n className: 'flex-shrink-0 w-7 h-7 rounded-lg flex items-center justify-center mt-0.5',\n style: { background: meta.color + '1c', color: meta.color }\n }, Icon ? h(Icon, { name: meta.icon, size: 14 }) : null),\n h('div', { className: 'min-w-0 flex-1' },\n h('div', { className: 'flex items-center gap-2 flex-wrap' },\n h('span', { className: 'text-[12px] font-semibold text-on-surface truncate' }, activityTitle(a, kind)),\n status ? h('span', {\n className: 'text-[9px] font-bold uppercase tracking-widest',\n style: { color: statusHex }\n }, status) : null\n ),\n h('div', { className: 'flex items-center gap-2 text-[10px] text-text-muted mt-0.5 flex-wrap' },\n h('span', { className: 'text-[9px] font-bold uppercase tracking-widest', style: { color: meta.color } }, meta.label),\n tenant ? h(Chip, { icon: 'corporate_fare', label: tenant }) : null,\n when ? h('span', null, MIDDOT + timeAgo(when)) : null\n )\n )\n );\n}\n\n// --- Tenants & Users table --------------------------------------------------\n// One row per platform user (email, tenant, last login, status, actions). Tenant id is\n// resolved to a tenant name via the /tenants list when possible. The platform master row\n// is flagged with a small badge. Suspend + Delete are disabled for platform admins and for\n// the current master's own account (\\`myEmail\\`); Reactivate appears only for suspended users.\n// onAction(kind, id, label) -> kind in 'suspend'|'reactivate'|'delete', id = user id.\n// onViewAs(tenantId, label) -> starts READ-ONLY impersonation of that row's tenant.\n// busyKey = 'user:<id>:<kind>' of the action currently in flight (or '').\n// \"View as\" is hidden for platform admins and the master's own row (no point viewing\n// the master's own workspace; impersonation is for stepping into OTHER tenants).\nfunction UsersTable({users, tenantNameById, onAction, onViewAs, busyKey, myEmail}) {\n const {Icon} = N();\n if (!users.length) return h(Empty, { icon: 'group', text: 'No users yet. Sign-ups will appear here as accounts are created.' });\n const me = String(myEmail || '').toLowerCase();\n return h('div', { className: 'overflow-x-auto -mx-1' },\n h('table', { className: 'w-full text-left border-collapse' },\n h('thead', null,\n h('tr', { className: 'border-b border-border-subtle' },\n ['User', 'Tenant', 'Last login', 'Status', 'Actions'].map((c) =>\n h('th', { key: c, className: 'py-2 px-2 text-[9px] font-bold uppercase tracking-widest text-text-muted' + (c === 'Actions' ? ' text-right' : '') }, c)\n )\n )\n ),\n h('tbody', null,\n users.map((u) => {\n const tName = (u.tenant_id != null && tenantNameById[String(u.tenant_id)]) || u.tenant || u.tenant_id || '\\\\u2014';\n const isAdmin = u.is_platform_admin === 1 || u.is_platform_admin === true;\n const isSelf = !!me && String(u.email || '').toLowerCase() === me;\n const protectedRow = isAdmin || isSelf; // suspend/delete forbidden by backend guards\n const status = String(u.status || 'active').toLowerCase();\n const label = u.email || u.name || 'this account';\n const k = (kind) => 'user:' + (u.id || u.email) + ':' + kind;\n const guardTitle = isSelf ? 'You cannot act on your own account.' : (isAdmin ? 'Platform-admin accounts are protected.' : '');\n return h('tr', { key: u.id || u.email, className: 'border-b border-border-subtle/50 hover:bg-surface-container/30 transition-colors' },\n h('td', { className: 'py-2.5 px-2' },\n h('div', { className: 'flex items-center gap-2 min-w-0' },\n h('div', { className: 'min-w-0' },\n h('div', { className: 'flex items-center gap-1.5' },\n h('span', { className: 'text-[12px] font-semibold text-on-surface truncate' }, u.email || 'Unknown'),\n isAdmin ? h('span', {\n title: 'Platform master',\n className: 'inline-flex items-center gap-0.5 text-[8px] font-bold uppercase tracking-widest px-1 py-0.5 rounded bg-primary/15 text-primary border border-primary/30'\n }, Icon ? h(Icon, { name: 'shield_person', size: 9 }) : null, 'Master') : null,\n isSelf && !isAdmin ? h('span', {\n title: 'This is you',\n className: 'text-[8px] font-bold uppercase tracking-widest px-1 py-0.5 rounded bg-surface-container/60 text-text-muted border border-border-subtle'\n }, 'You') : null\n ),\n u.name ? h('div', { className: 'text-[10px] text-text-muted truncate' }, u.name) : null\n )\n )\n ),\n h('td', { className: 'py-2.5 px-2' }, h(Chip, { icon: 'corporate_fare', label: String(tName) })),\n h('td', { className: 'py-2.5 px-2' },\n h('span', { className: 'text-[11px] text-text-muted', title: u.last_login_at ? fmtDateTime(u.last_login_at) : 'Never signed in' },\n u.last_login_at ? timeAgo(u.last_login_at) : 'Never')\n ),\n h('td', { className: 'py-2.5 px-2' }, h(StatusPill, { status: u.status })),\n h('td', { className: 'py-2.5 px-2' },\n h('div', { className: 'flex items-center justify-end gap-1.5' },\n (!protectedRow && u.tenant_id != null && String(u.tenant_id) !== '')\n ? h(ActionBtn, {\n icon: 'visibility', label: 'View as', tone: 'view',\n busy: busyKey === ('view:' + String(u.tenant_id)),\n title: 'View ' + String(tName) + ' as this tenant (read-only)',\n onClick: () => onViewAs(u.tenant_id, String(tName))\n })\n : null,\n status === 'suspended'\n ? h(ActionBtn, {\n icon: 'check_circle', label: 'Reactivate', tone: 'good',\n busy: busyKey === k('reactivate'),\n title: 'Reactivate ' + label,\n onClick: () => onAction('reactivate', u.id, label)\n })\n : h(ActionBtn, {\n icon: 'block', label: 'Suspend', tone: 'warn',\n disabled: protectedRow, title: protectedRow ? guardTitle : ('Suspend ' + label),\n busy: busyKey === k('suspend'),\n onClick: () => onAction('suspend', u.id, label)\n }),\n h(ActionBtn, {\n icon: 'delete', label: 'Delete', tone: 'danger',\n disabled: protectedRow, title: protectedRow ? guardTitle : ('Delete ' + label + ' and its tenant'),\n busy: busyKey === k('delete'),\n onClick: () => onAction('delete', u.id, label)\n })\n )\n )\n );\n })\n )\n )\n );\n}\n\n// --- Audit log row (one master action) --------------------------------------\n// Renders one platform_audit entry: actor_email \\\\u00b7 action \\\\u00b7 target \\\\u00b7 time.\n// The action verb drives the icon + colour so suspends/deletes are visually distinct.\nconst AUDIT_META = {\n suspend: { icon: 'block', color: '#ffb4ab' },\n reactivate: { icon: 'check_circle', color: '#4edea3' },\n delete: { icon: 'delete', color: '#ffb4ab' },\n default: { icon: 'history', color: '#c0c1ff' },\n};\nfunction auditMeta(action) {\n const a = String(action || '').toLowerCase();\n if (a.indexOf('reactivate') !== -1) return AUDIT_META.reactivate;\n if (a.indexOf('delete') !== -1) return AUDIT_META.delete;\n if (a.indexOf('suspend') !== -1) return AUDIT_META.suspend;\n return AUDIT_META.default;\n}\nfunction prettyAction(action) {\n return String(action || '').replace(/_/g, ' ').replace(/^./, function(c){ return c.toUpperCase(); });\n}\nfunction AuditRow({e}) {\n const {Icon} = N();\n const meta = auditMeta(e.action);\n const target = (e.target_type ? String(e.target_type) : 'item') + (e.target_id ? (' ' + String(e.target_id).slice(0, 8)) : '');\n return h('div', { className: 'flex items-start gap-3 py-2 px-1 border-b border-border-subtle/60 last:border-b-0' },\n h('div', {\n className: 'flex-shrink-0 w-6 h-6 rounded-md flex items-center justify-center mt-0.5',\n style: { background: meta.color + '1c', color: meta.color }\n }, Icon ? h(Icon, { name: meta.icon, size: 12 }) : null),\n h('div', { className: 'min-w-0 flex-1' },\n h('div', { className: 'flex items-center gap-2 flex-wrap' },\n h('span', { className: 'text-[12px] font-semibold text-on-surface truncate' }, prettyAction(e.action)),\n h('span', { className: 'text-[10px] text-text-muted truncate' }, target)\n ),\n h('div', { className: 'flex items-center gap-2 text-[10px] text-text-muted mt-0.5 flex-wrap' },\n h('span', { className: 'truncate' }, e.actor_email || 'system'),\n e.created_at ? h('span', null, MIDDOT + timeAgo(e.created_at)) : null\n )\n )\n );\n}\n\n// --- PlatformConsole (page component) ---------------------------------------\nexport function PlatformConsole({setActivePage}) {\n const {Icon, Btn, MetricCard, PageHeader, Spinner} = N();\n const [overview, setOverview] = useState(null);\n const [tenants, setTenants] = useState([]);\n const [users, setUsers] = useState([]);\n const [sessions, setSessions] = useState([]);\n const [activity, setActivity] = useState([]);\n const [audit, setAudit] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n // Control state: which row+action is in flight ('user:<id>:<kind>'), and the last\n // action's result banner ({ ok, msg }).\n const [busyKey, setBusyKey] = useState('');\n const [actionMsg, setActionMsg] = useState(null);\n\n const load = useCallback(async () => {\n setLoading(true); setError(null);\n try {\n // Each endpoint is master-only; the router 403s non-admins. Fetch in\n // parallel and fail loudly only if the core overview is forbidden/unavailable.\n const [ov, tn, us, ss, ac, au] = await Promise.all([\n fetch('/api/platform/overview'),\n fetch('/api/platform/tenants'),\n fetch('/api/platform/users'),\n fetch('/api/platform/sessions'),\n fetch('/api/platform/activity?limit=50'),\n fetch('/api/platform/audit?limit=50'),\n ]);\n if (ov.status === 403 || tn.status === 403) {\n throw new Error('Forbidden - this console is restricted to the platform master.');\n }\n if (!ov.ok) throw new Error('Overview failed: HTTP ' + ov.status);\n const ovd = await ov.json().catch(() => null);\n setOverview(ovd && typeof ovd === 'object' ? ovd : null);\n const tnd = tn.ok ? await tn.json().catch(() => []) : [];\n setTenants(Array.isArray(tnd) ? tnd : []);\n const usd = us.ok ? await us.json().catch(() => []) : [];\n setUsers(Array.isArray(usd) ? usd : []);\n const ssd = ss.ok ? await ss.json().catch(() => []) : [];\n setSessions(Array.isArray(ssd) ? ssd : []);\n const acd = ac.ok ? await ac.json().catch(() => []) : [];\n setActivity(Array.isArray(acd) ? acd : (acd && Array.isArray(acd.items) ? acd.items : []));\n const aud = au.ok ? await au.json().catch(() => []) : [];\n setAudit(Array.isArray(aud) ? aud : (aud && Array.isArray(aud.items) ? aud.items : []));\n } catch (e) {\n setError(e && e.message || String(e));\n } finally {\n setLoading(false);\n }\n }, []);\n\n useEffect(() => { load(); }, [load]);\n\n // The master's own email: prefer the authenticated identity from window.__nexus,\n // else fall back to the platform-admin row in the users list. Used to disable\n // self-targeting controls in the UI (the backend enforces this too).\n const myEmail = useMemo(() => {\n const me = (N().me) || (N().currentUser) || null;\n if (me && me.email) return String(me.email);\n const admin = users.find((u) => u.is_platform_admin === 1 || u.is_platform_admin === true);\n return admin && admin.email ? String(admin.email) : '';\n }, [users]);\n\n // Run one control action against /api/platform/{users|tenants}/:id/:kind. Delete is\n // gated behind window.confirm with an honest, irreversible-cascade warning. After any\n // action we re-fetch every list so the table + audit log reflect the new truth.\n const onUserAction = useCallback(async (kind, id, label) => {\n if (!id) return;\n const who = label || 'this account';\n if (kind === 'delete') {\n const ok = window.confirm('Delete ' + who + ' and ALL its data (the user and their entire tenant \\\\u2014 every member, every record)? This cannot be undone.');\n if (!ok) return;\n } else if (kind === 'suspend') {\n const ok = window.confirm('Suspend ' + who + '? They will be logged out immediately and blocked from signing in until reactivated.');\n if (!ok) return;\n }\n const bk = 'user:' + id + ':' + kind;\n setBusyKey(bk); setActionMsg(null);\n try {\n const res = await fetch('/api/platform/users/' + encodeURIComponent(id) + '/' + kind, {\n method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}',\n });\n const data = await res.json().catch(() => ({}));\n if (res.ok && data && data.ok) {\n const verb = kind === 'suspend' ? 'Suspended' : kind === 'reactivate' ? 'Reactivated' : 'Deleted';\n setActionMsg({ ok: true, msg: verb + ' ' + who + '.' });\n } else {\n setActionMsg({ ok: false, msg: (data && data.error) || ('Action failed (HTTP ' + res.status + ').') });\n }\n } catch (e) {\n setActionMsg({ ok: false, msg: e && e.message || String(e) });\n } finally {\n setBusyKey('');\n await load(); // re-fetch lists + audit regardless of outcome\n }\n }, [load]);\n\n // Start READ-ONLY impersonation of a tenant: POST the impersonate route (which flips\n // impersonate_tenant_id on the master's OWN session row, server-side), then hard-reload\n // so the whole app re-resolves as that tenant. On reload, /api/auth/me reports\n // impersonating + the fixed banner (frontend_js2.ts) takes over. All tenant-data writes\n // are blocked by the main.ts guard until the master exits. Failures surface in the banner.\n const onViewAs = useCallback(async (tenantId, label) => {\n if (tenantId == null || String(tenantId) === '') return;\n const who = label || 'this tenant';\n const ok = window.confirm('View ' + who + ' as this tenant? You will see their actual workspace READ-ONLY \\\\u2014 every write is blocked until you exit. This is audited.');\n if (!ok) return;\n const bk = 'view:' + String(tenantId);\n setBusyKey(bk); setActionMsg(null);\n try {\n const res = await fetch('/api/platform/impersonate/' + encodeURIComponent(tenantId), {\n method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}',\n });\n const data = await res.json().catch(() => ({}));\n if (res.ok && data && data.ok) {\n window.location.reload();\n return; // reload in flight; leave busy state as-is\n }\n setActionMsg({ ok: false, msg: (data && data.error) || ('Could not start view-as (HTTP ' + res.status + ').') });\n } catch (e) {\n setActionMsg({ ok: false, msg: e && e.message || String(e) });\n }\n setBusyKey('');\n }, []);\n\n // tenant_id -> name lookup for the users table + chips.\n const tenantNameById = useMemo(() => {\n const m = {};\n for (const t of tenants) if (t && t.id != null) m[String(t.id)] = t.name || String(t.id);\n return m;\n }, [tenants]);\n\n // Overview card values. Prefer the server's counts; fall back to the lengths\n // of the lists we already loaded so the cards are never silently blank.\n const cards = useMemo(() => {\n const ov = overview || {};\n const num = (v, fallback) => (v == null || isNaN(Number(v))) ? fallback : Number(v);\n return {\n tenants: num(ov.tenants, tenants.length),\n users: num(ov.users, users.length),\n activeSessions: num(ov.activeSessions, sessions.length),\n recentSignups: num(ov.recentSignups, 0),\n };\n }, [overview, tenants, users, sessions]);\n\n return h('div', { className: 'p-lg lg:p-xl space-y-xl max-w-6xl mx-auto pb-32' },\n h(PageHeader, {\n title: 'Master Console',\n subtitle: 'Platform-wide superadmin control across every tenant \\\\u2014 the single, audited exception to per-tenant isolation.',\n action: h('div', { className: 'flex items-center gap-2' },\n h('span', {\n className: 'inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded border border-primary/30 bg-primary/10 text-primary'\n }, Icon ? h(Icon, { name: 'shield_person', size: 12 }) : null, 'Platform master'),\n h('button', {\n onClick: load, title: 'Refresh',\n className: 'inline-flex items-center gap-1 text-[11px] font-semibold uppercase tracking-widest text-text-muted hover:text-on-surface px-2.5 py-1.5 rounded-md border border-border-subtle hover:border-primary/40 transition-colors'\n }, Icon ? h(Icon, { name: 'sync', size: 13 }) : null, 'Refresh')\n )\n }),\n\n // --- Error banner -----------------------------------------------------\n error\n ? h('div', { className: 'glass-panel rounded-xl p-lg text-error text-[13px] flex items-center gap-2 border border-error/30' },\n Icon ? h(Icon, { name: 'error', size: 16 }) : null,\n 'Failed to load the master console: ' + error)\n : null,\n\n // --- Action result banner (suspend / reactivate / delete) -------------\n actionMsg\n ? h('div', {\n className: 'glass-panel rounded-xl px-4 py-3 text-[12px] flex items-center justify-between gap-2 border ' +\n (actionMsg.ok ? 'text-secondary border-secondary/30' : 'text-error border-error/30')\n },\n h('div', { className: 'flex items-center gap-2 min-w-0' },\n Icon ? h(Icon, { name: actionMsg.ok ? 'check_circle' : 'error', size: 15 }) : null,\n h('span', { className: 'truncate' }, actionMsg.msg)),\n h('button', {\n onClick: () => setActionMsg(null), title: 'Dismiss',\n className: 'text-text-muted hover:text-on-surface flex-shrink-0'\n }, Icon ? h(Icon, { name: 'close', size: 14 }) : 'x'))\n : null,\n\n // --- Loading (first paint) --------------------------------------------\n loading && !overview\n ? h('div', { className: 'flex items-center justify-center py-16 text-text-muted gap-2' },\n Spinner ? h(Spinner, { size: 18 }) : null,\n h('span', { className: 'text-[13px]' }, 'Loading platform data\\\\u2026'))\n : h(React.Fragment, null,\n\n // --- Overview cards ---------------------------------------------\n h('div', { className: 'grid grid-cols-2 lg:grid-cols-4 gap-md' },\n h(MetricCard, { icon: 'corporate_fare', color: '#c0c1ff', title: 'Tenants', value: String(cards.tenants), subtitle: 'organizations' }),\n h(MetricCard, { icon: 'group', color: '#d0bcff', title: 'Users', value: String(cards.users), subtitle: 'across all tenants' }),\n h(MetricCard, { icon: 'wifi_tethering', color: '#4edea3', title: 'Active sessions', value: String(cards.activeSessions), subtitle: 'logged in now' }),\n h(MetricCard, { icon: 'person_add', color: '#ffd8a8', title: 'Recent signups', value: String(cards.recentSignups), subtitle: 'newly joined' })\n ),\n\n // --- Two-column: Who is logged in + Activity feed -------------\n h('div', { className: 'grid grid-cols-1 lg:grid-cols-2 gap-lg' },\n h(Section, {\n icon: 'wifi_tethering', color: '#4edea3',\n title: 'Who is logged in now', count: sessions.length,\n subtitle: 'live sessions'\n },\n sessions.length === 0\n ? h(Empty, { icon: 'person_off', text: 'No active sessions right now.' })\n : h('div', { className: 'divide-y divide-border-subtle/0' },\n sessions.map((s, i) => h(SessionRow, { key: (s.id || s.email || 'sess') + ':' + i, s })))\n ),\n h(Section, {\n icon: 'bolt', color: '#d0bcff',\n title: 'Cross-tenant activity', count: activity.length,\n subtitle: 'agent + campaign runs, logins'\n },\n activity.length === 0\n ? h(Empty, { icon: 'history', text: 'No recent activity across tenants yet.' })\n : h('div', { className: 'max-h-[420px] overflow-y-auto pr-1' },\n activity.map((a, i) => h(ActivityRow, { key: (a.id || 'act') + ':' + i, a })))\n )\n ),\n\n // --- Tenants & Users --------------------------------------------\n h(Section, {\n icon: 'group', color: '#c0c1ff',\n title: 'Tenants & Users', count: users.length,\n subtitle: tenants.length + (tenants.length === 1 ? ' tenant' : ' tenants')\n },\n h(UsersTable, { users, tenantNameById, onAction: onUserAction, onViewAs, busyKey, myEmail })\n ),\n\n // --- Audit log --------------------------------------------------\n h(Section, {\n icon: 'history', color: '#ffd8a8',\n title: 'Audit log', count: audit.length,\n subtitle: 'every control action'\n },\n audit.length === 0\n ? h(Empty, { icon: 'verified_user', text: 'No control actions recorded yet. Suspends, reactivations and deletes will appear here.' })\n : h('div', { className: 'max-h-[360px] overflow-y-auto pr-1' },\n audit.map((e, i) => h(AuditRow, { key: (e.id || 'aud') + ':' + i, e })))\n ),\n\n // --- Footnote ---------------------------------------------------\n h('p', { className: 'text-[11px] text-text-muted/70 text-center pt-2' },\n 'Controls act across every tenant and are irreversible where noted. Platform-admin accounts and your own account are protected. \\\\u201cView as\\\\u201d steps into a tenant\\\\u2019s workspace READ-ONLY (every write is blocked until you exit). Every action here is audited.')\n )\n );\n}\n\nexport { PlatformConsole as default };\n `;\n}\n",[315],"0c2f9270-5f15-11f1-ad5e-1607ee4eb77e","frontend_pages.ts","319a5c72-580b-11f1-8e5b-ee650bb23af1",1009,["D",1780467942685],27,"// Page-level workspace components: Dashboard, MarketingWorkspace, SalesWorkspace,\n// plus the smaller components they compose (PillTabs, WorkspaceHealth, AIContentPipeline,\n// SignalKPIs, AILeadRanking, SystemStatusBar, TeamHub).\n// Served at /api/app-pages so frontend_js.ts can stay under val.town's 80K char limit.\n//\n// Dependencies live in `window.__nexus` (set by frontend_js.ts on boot):\n// INTEGRATION_META, INTEGRATIONS, INTEGRATION_ACTIONS, INTEGRATION_FIELDS, ALL_TOOLS,\n// GOOGLE_SHARED, IntegrationPanel, parseTools, PageHeader, Icon, BrandIcon, Spinner,\n// Btn, MetricCard, LineChart, ChannelChart.\n\nexport function getPagesJS(): string {\n return `\nimport React, { useState, useEffect, useRef } from 'react';\nconst h = React.createElement;\n\n// Shared deps from frontend_js.ts (set on window.__nexus during boot).\nconst N = () => window.__nexus || {};\n\n// Phase 1 Advanced: pull in the intelligence frontend components (UnifiedFunnelView,\n// IntelligenceFeed, IntelligenceBadge, OutreachDrawer) from /api/app-intelligence.\nconst _intel = await import('/api/app-intelligence').catch(() => ({}));\nconst UnifiedFunnelView = _intel.UnifiedFunnelView || (() => null);\nconst IntelligenceFeed = _intel.IntelligenceFeed || (() => null);\nconst OutreachDrawer = _intel.OutreachDrawer || (() => null);\n\n// I1 Hot Signals panel from the widgets module.\nconst _widgets = await import('/api/app-widgets').catch(() => ({}));\nconst HotSignalsPanel = _widgets.HotSignalsPanel || (() => null);\n\n// WAVE 1: marketing operating-surface components (Overview/Attribution/Personas/UTM/Brand/\n// Nurture/CRO) from /api/app-marketing2. Lazy + tolerant: any missing export degrades to a\n// quiet empty note so the Strategy shell still renders if the module hasn't shipped.\nconst _mkt2 = await import('/api/app-marketing2').catch(() => ({}));\nconst _mktFallback = (label) => () => h('div', {className:'glass-panel rounded-xl p-xl text-center text-text-muted text-[13px]'},\n (label || 'This view') + ' is loading. Connect data sources in Settings if it stays empty.');\nconst MktOverview = _mkt2.MarketingOverview || _mktFallback('Overview');\nconst MktAttribution = _mkt2.AttributionView || _mktFallback('Attribution');\nconst MktPersonas = _mkt2.PersonaLibrary || _mktFallback('Audiences');\nconst MktUtm = _mkt2.UtmBuilder || _mktFallback('UTM Builder');\nconst MktBrand = _mkt2.BrandKit || _mktFallback('Brand Kit');\nconst MktNurture = _mkt2.NurtureView || _mktFallback('Automation');\nconst MktCRO = _mkt2.CROFeed || _mktFallback('Recommendations');\n// WAVE 2: capture (forms/landing), audiences (segments/lists), and the MQL handoff surface.\n// Split into /api/app-marketing3 to keep each val.town source file under the 80 000-byte limit;\n// same tolerant-fallback pattern so the shell still renders if an export hasn't shipped yet.\nconst _mkt3 = await import('/api/app-marketing3').catch(() => ({}));\nconst MktForms = _mkt3.FormsView || _mktFallback('Forms');\nconst MktLanding = _mkt3.LandingView || _mktFallback('Landing Pages');\nconst MktSegments = _mkt3.SegmentsView || _mktFallback('Segments');\nconst MktLists = _mkt3.ListsView || _mktFallback('Lists');\nconst MktHandoff = _mkt3.HandoffView || _mktFallback('Handoff');\n// Wrapper that bridges HotSignalsPanel.onDraftOutreach to the SalesWorkspace openDrawer.\nfunction HotSignalsRow({openDrawer}) {\n return h(HotSignalsPanel, {\n onDraftOutreach: (lead) => openDrawer({\n name: lead.name, email: lead.email, company: lead.company,\n role: 'hot-lead', signal: lead.signal || 'intent signal detected'\n })\n });\n}\n\nconst fmtRelative = (iso) => {\n if (!iso) return '';\n const ms = Date.now() - new Date(iso).getTime();\n if (ms < 60000) return 'just now';\n if (ms < 3600000) return Math.floor(ms/60000) + 'm ago';\n if (ms < 86400000) return Math.floor(ms/3600000) + 'h ago';\n if (ms < 604800000) return Math.floor(ms/86400000) + 'd ago';\n return new Date(iso).toLocaleDateString('en-US',{month:'short',day:'numeric'});\n};\nconst fmtNum = (v) => { const n = parseFloat(v)||0; return n>=1e9?(n/1e9).toFixed(1)+'B':n>=1e6?(n/1e6).toFixed(1)+'M':n>=1e3?(n/1e3).toFixed(1)+'K':String(Math.round(n*100)/100); };\nconst initialsOf = (name) => (name||'?').replace(/<[^>]+>/g,'').trim().split(/\\\\s+/).slice(0,2).map(s=>s[0]||'').join('').toUpperCase() || '?';\nconst colorFromName = (name) => {\n const colors = ['#c0c1ff','#4edea3','#d0bcff','#8083ff','#6ffbbe','#a078ff','#e1e0ff','#494bd6'];\n const sum = (name||'').split('').reduce((a,c) => a + c.charCodeAt(0), 0);\n return colors[sum % colors.length];\n};\n\n// --- ANALYTICS PAGE (was \"Dashboard / Command\") -----------------------------\n// Renamed per user spec: this analytical surface lives on the Analytics nav now.\n// 'Command' nav now points to the new CommandCenter (chat-with-commands palette).\n// 4 KPI cards row + AIO math strip + UnifiedFunnelView + IntelligenceFeed + Connected Services.\nexport function AnalyticsPage({integrations, agents, setActivePage}) {\n const {Icon, BrandIcon, INTEGRATIONS, INTEGRATION_META, PageHeader, Btn} = N();\n const connectedCount = integrations.filter(i => i.connected).length;\n const activeAgents = agents.filter(a => !!a.enabled).length;\n const runningAgents = agents.filter(a => !!a.is_running).length;\n const marketingConnected = integrations.filter(i => INTEGRATION_META[i.name]?.category === 'marketing' && i.connected).length;\n const salesConnected = integrations.filter(i => INTEGRATION_META[i.name]?.category === 'sales' && i.connected).length;\n const totalServices = INTEGRATIONS.length;\n const coveragePct = Math.round(connectedCount / totalServices * 100);\n const velocity = Math.round(coveragePct * 0.6 + (activeAgents / Math.max(1,agents.length) * 40));\n\n // Real Marketing math: pull AIO KPIs (CAC, LTV/CAC, ROI, funnel conv rates) from intelligence layer.\n const [kpis, setKpis] = useState(null);\n useEffect(() => {\n let cancelled = false;\n (async () => {\n try {\n const k = await fetch('/api/intelligence/kpis').then(r => r.json()).catch(() => null);\n if (!cancelled) setKpis(k);\n } catch {}\n })();\n return () => { cancelled = true; };\n }, []);\n // Execution-aware measure: real work completed (tasks/experiments), polled.\n const [exec, setExec] = useState(null);\n // Real \"last synced\" timestamp — captured when a data pull actually succeeds.\n const [lastSynced, setLastSynced] = useState(null);\n useEffect(() => {\n let cancelled = false;\n const pull = () => fetch('/api/intelligence/executed-work').then(r => r.json()).then(d => { if (!cancelled) { setExec(d); setLastSynced(Date.now()); } }).catch(() => {});\n pull();\n const iv = setInterval(pull, 60000);\n return () => { cancelled = true; clearInterval(iv); };\n }, []);\n\n // D4: read mer (new name), fall back to legacy roi_multiplier for older cached payloads.\n const roi = kpis === null ? null : {\n value: kpis.mer ?? kpis.roi_multiplier,\n configured: (kpis.mer ?? kpis.roi_multiplier) != null,\n conversions: kpis.conversions,\n revenue: kpis.conversions * kpis.avg_deal_size,\n spend: kpis.marketing_spend,\n };\n\n return h('div', {className:'p-lg lg:p-xl space-y-lg max-w-[1440px] mx-auto'},\n h(PageHeader, {\n title:'Nexus Command',\n subtitle:'Mission control for autonomous marketing operations. Real-time KPIs, agent activity, and integration health at a glance.',\n action: h(Btn, {onClick:()=>setActivePage('agents'), variant:'primary', size:'lg'},\n h(Icon,{name:'rocket_launch', size:18}), 'Create New Agent'\n )\n }),\n\n // -- 4 KPI cards row --------------------------------------------------\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-lg'},\n // Marketing ROI - real calc: (GA4 conversions - avg_deal_size) / est_marketing_spend\n h('div', {\n className:'glass-panel p-md rounded-xl flex flex-col justify-between h-32 relative overflow-hidden group ' + (!roi?.configured ? 'cursor-pointer' : ''),\n onClick: () => { if (roi && !roi.configured) setActivePage('settings'); }\n },\n h('div', {className:'absolute -right-2 -top-2 w-16 h-16 bg-primary/5 rounded-full blur-xl group-hover:bg-primary/10 transition-all'}),\n h('div', {className:'flex justify-between items-start'},\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-on-surface-variant'}, 'Marketing ROI'),\n roi?.configured\n ? h('span', {className:'text-secondary font-mono-data text-[13px] flex items-center gap-1'},\n '$', (roi.revenue/1000).toFixed(1), 'k ', h(Icon,{name:'trending_up', size:12}))\n : h('span', {className:'text-text-muted font-mono-data text-[10px] uppercase tracking-widest'}, 'unconfigured')\n ),\n h('div', {className:'mt-auto'},\n roi === null\n ? h('p', {className:'text-[14px] text-text-muted'}, 'Loading-')\n : roi.configured\n ? h('p', {className:'text-[32px] font-extrabold text-on-surface leading-none tracking-tight', style:{fontVariantNumeric:'tabular-nums'}},\n roi.value.toFixed(2), h('span', {className:'text-primary text-[18px] ml-1'}, 'x')\n )\n : h('div', null,\n h('p', {className:'text-[14px] font-bold text-on-surface'}, 'Configure ROI -'),\n h('p', {className:'text-[10px] text-text-muted mt-1'}, 'Set avg deal size + spend in Settings')\n ),\n roi?.configured && h('div', {className:'w-full bg-white/5 h-1 rounded-full mt-3 overflow-hidden'},\n h('div', {className:'bg-primary h-full transition-all', style:{width: Math.min(100, Math.round(roi.value * 20)) + '%'}})\n ),\n roi?.configured && h('p', {className:'text-[10px] text-text-muted mt-1 font-mono-data', style:{fontVariantNumeric:'tabular-nums'}},\n roi.conversions + ' conv - $' + roi.spend.toLocaleString() + ' spend'\n )\n )\n ),\n // Active AI Agents (enabled) — \"Running\" badge reflects real is_running state\n h('div', {className:'glass-panel p-md rounded-xl flex flex-col justify-between h-32 relative overflow-hidden'},\n h('div', {className:'flex justify-between items-start'},\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-on-surface-variant'}, 'Active AI Agents'),\n h('span', {className: 'font-mono-data text-[13px] ' + (runningAgents > 0 ? 'text-tertiary' : activeAgents > 0 ? 'text-secondary' : 'text-text-muted')},\n runningAgents > 0 ? (runningAgents + ' Running') : activeAgents > 0 ? 'Active' : 'Idle')\n ),\n h('div', {className:'mt-auto'},\n h('p', {className:'text-[32px] font-extrabold text-on-surface leading-none tracking-tight'}, activeAgents),\n h('div', {className:'flex gap-1 mt-3'},\n Array.from({length: Math.max(4, agents.length)}).map((_,i) => h('div', {\n key:i,\n className:'h-1 w-full rounded ' + (i < activeAgents ? 'bg-secondary' : 'bg-secondary/30'),\n style: i < activeAgents ? {boxShadow:'0 0 8px rgba(78,222,163,0.4)'} : {}\n }))\n )\n )\n ),\n // Sales Pipeline (Signal coverage from sales integrations)\n h('div', {className:'glass-panel p-md rounded-xl flex flex-col justify-between h-32'},\n h('div', {className:'flex justify-between items-start'},\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-on-surface-variant'}, 'Signal Channels'),\n h('span', {className:'text-primary font-mono-data text-[13px]'}, salesConnected, '/', 2)\n ),\n h('div', {className:'mt-auto'},\n h('p', {className:'text-[32px] font-extrabold text-on-surface leading-none tracking-tight'},\n agents.filter(a => a.workspace === 'sales').length\n ),\n h('p', {className:'text-[10px] uppercase tracking-widest text-on-surface-variant mt-3'},\n 'Sales agents deployed'\n )\n )\n ),\n // Growth Velocity (composite)\n h('div', {className:'glass-panel p-md rounded-xl flex flex-col justify-between h-32'},\n h('div', {className:'flex justify-between items-start'},\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-on-surface-variant'}, 'Growth Velocity'),\n h(Icon, {name:'speed', size:20, className:'text-secondary'})\n ),\n h('div', {className:'mt-auto'},\n h('p', {className:'text-[32px] font-extrabold text-on-surface leading-none tracking-tight'}, velocity, h('span',{className:'text-[14px] text-text-muted ml-1'},'/100')),\n h('div', {className:'w-full bg-white/5 h-1.5 rounded-full mt-3 overflow-hidden'},\n h('div', {className:'bg-primary h-full transition-all', style:{width: Math.min(100, Math.max(0, velocity)) + '%'}})\n )\n )\n )\n ),\n\n // -- EXECUTION STRIP (work actually completed — measure reflects execution) --\n exec && h('div', {className:'glass-panel rounded-xl p-md flex flex-wrap items-center gap-lg'},\n h('div', {className:'flex items-center gap-2 mr-2'},\n h(Icon, {name:'task_alt', size:18, className:'text-secondary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-secondary'}, 'Execution · 30d')\n ),\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Tasks done'),\n h('span', {className:'text-[18px] font-bold font-mono-data', style:{fontVariantNumeric:'tabular-nums'}}, String((exec && exec.tasks_completed) || 0))\n ),\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Experiments done'),\n h('span', {className:'text-[18px] font-bold font-mono-data', style:{fontVariantNumeric:'tabular-nums'}}, String((exec && exec.experiments_completed) || 0))\n ),\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Experiments won'),\n h('span', {className:'text-[18px] font-bold font-mono-data text-secondary', style:{fontVariantNumeric:'tabular-nums'}}, String((exec && exec.experiments_won) || 0))\n )\n ),\n // -- AIO MARKETING KPI STRIP (real CAC/LTV/conversion math) ---------\n kpis && (kpis.cac != null || kpis.ltv_cac_ratio != null || kpis.funnel_conv_mofu_bofu != null) &&\n h('div', {className:'glass-panel rounded-xl p-md flex flex-wrap items-center gap-lg'},\n h('div', {className:'flex items-center gap-2 mr-2'},\n h(Icon, {name:'functions', size:18, className:'text-tertiary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-tertiary'}, 'AIO Math')\n ),\n // CAC\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'CAC'),\n h('span', {className:'text-[18px] font-bold font-mono-data', style:{fontVariantNumeric:'tabular-nums'}},\n kpis.cac != null ? '$' + kpis.cac.toFixed(0) : '-'\n ),\n h('span', {className:'text-[10px] text-text-muted'}, 'spend - conv')\n ),\n // LTV/CAC ratio\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'LTV/CAC'),\n h('span', {\n className:'text-[18px] font-bold font-mono-data ' +\n (kpis.benchmark_status.ltv_cac === 'healthy' ? 'text-secondary'\n : kpis.benchmark_status.ltv_cac === 'borderline' ? 'text-tertiary'\n : kpis.benchmark_status.ltv_cac === 'unhealthy' ? 'text-error' : ''),\n style:{fontVariantNumeric:'tabular-nums'}\n },\n kpis.ltv_cac_ratio != null ? kpis.ltv_cac_ratio.toFixed(1) + ':1' : '-'\n ),\n h('span', {className:'text-[10px] text-text-muted'}, 'healthy -3:1')\n ),\n // Funnel conversion: TOFU - MOFU (real-data-only; hidden when unknown)\n kpis.funnel_conv_tofu_mofu != null && h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'TOFU-MOFU'),\n h('span', {className:'text-[18px] font-bold font-mono-data', style:{fontVariantNumeric:'tabular-nums'}},\n kpis.funnel_conv_tofu_mofu.toFixed(1) + '%'\n ),\n h('span', {className:'text-[10px] text-text-muted'}, 'sessions - clicks')\n ),\n // Funnel conversion: MOFU - BOFU (real-data-only; hidden when unknown)\n kpis.funnel_conv_mofu_bofu != null && h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'MOFU-BOFU'),\n h('span', {className:'text-[18px] font-bold font-mono-data', style:{fontVariantNumeric:'tabular-nums'}},\n kpis.funnel_conv_mofu_bofu.toFixed(2) + '%'\n ),\n h('span', {className:'text-[10px] text-text-muted'}, 'conv - sessions')\n ),\n // LTV\n kpis.ltv != null && h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'LTV'),\n h('span', {className:'text-[18px] font-bold font-mono-data', style:{fontVariantNumeric:'tabular-nums'}},\n '$' + (kpis.ltv / 1000).toFixed(1) + 'k'\n ),\n h('span', {className:'text-[10px] text-text-muted'}, kpis.retention_months + 'mo retention')\n ),\n // D4: MER (Marketing Efficiency Ratio) - revenue - spend, replaces 'ROI multiplier'\n kpis.mer != null && h('div', {className:'flex flex-col', title:'Marketing Efficiency Ratio = revenue - spend'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'MER'),\n h('span', {\n className:'text-[18px] font-bold font-mono-data ' +\n (kpis.benchmark_status?.mer === 'healthy' ? 'text-secondary'\n : kpis.benchmark_status?.mer === 'borderline' ? 'text-tertiary'\n : kpis.benchmark_status?.mer === 'unhealthy' ? 'text-error' : ''),\n style:{fontVariantNumeric:'tabular-nums'}\n }, kpis.mer.toFixed(2) + 'x'),\n h('span', {className:'text-[10px] text-text-muted'}, 'healthy -3.0x')\n ),\n // D2: Pipeline Coverage Ratio - pipeline - quota\n kpis.pipeline_coverage != null && h('div', {className:'flex flex-col', title:'Pipeline Coverage = pipeline value - sales quota'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Pipe Cov.'),\n h('span', {\n className:'text-[18px] font-bold font-mono-data ' +\n (kpis.benchmark_status?.pipeline_coverage === 'healthy' ? 'text-secondary'\n : kpis.benchmark_status?.pipeline_coverage === 'borderline' ? 'text-tertiary'\n : kpis.benchmark_status?.pipeline_coverage === 'unhealthy' ? 'text-error' : ''),\n style:{fontVariantNumeric:'tabular-nums'}\n }, kpis.pipeline_coverage.toFixed(2) + 'x'),\n h('span', {className:'text-[10px] text-text-muted'}, 'healthy -3.0x')\n ),\n // Configure shortcut if any input missing\n (kpis.cac == null || kpis.ltv == null) && h('button', {\n onClick: () => setActivePage('settings'),\n className:'ml-auto text-[11px] font-bold uppercase tracking-widest text-primary hover:underline'\n }, 'Configure -')\n ),\n\n // D5: UTM attribution channel strip - pulls /api/attribution (last 30d)\n h(AttributionStrip, null),\n\n // -- Unified Funnel View (PHASE 1 ADVANCED) --------------------------\n // Replaces the GA4-only Acquisition Funnel with a TOFU/MOFU/BOFU view across all 14 integrations.\n h('div', {className:'grid grid-cols-1 xl:grid-cols-3 gap-lg'},\n h('div', {className:'xl:col-span-2'}, h(UnifiedFunnelView, {setActivePage})),\n h(IntelligenceFeed, {\n onInvestigate: (card) => {\n // Dispatch a global event the App listens for to seed the chat with this card's context.\n window.dispatchEvent(new CustomEvent('investigate-intelligence', {detail: card}));\n }\n })\n ),\n\n // -- Connected Services + Quick Actions -------------------------------\n h('div', {className:'grid grid-cols-1 xl:grid-cols-4 gap-lg'},\n h(ConnectedServicesGrid, {integrations, setActivePage}),\n h(QuickActionsPanel, {setActivePage, lastSynced})\n )\n );\n}\n\n// AI Actions Feed - timeline of recent agent activity (derived from agents.updated_at).\nfunction AIActionsFeed({agents, setActivePage}) {\n const {Icon} = N();\n const recent = agents.slice().sort((a,b) => new Date(b.updated_at||0) - new Date(a.updated_at||0)).slice(0, 5);\n const iconFor = (a) => {\n const parseTools = N().parseTools || (() => []);\n const tools = parseTools(a.tools);\n if (tools.includes('ahrefs')) return {icon:'radar', color:'#c0c1ff'};\n if (tools.includes('ga4')) return {icon:'analytics', color:'#4edea3'};\n if (tools.includes('linkedin')) return {icon:'contact_mail', color:'#0077b5'};\n if (tools.includes('wordpress')) return {icon:'edit_note', color:'#d0bcff'};\n if (a.workspace === 'sales') return {icon:'hub', color:'#4edea3'};\n return {icon:'psychology', color:'#c0c1ff'};\n };\n return h('div', {className:'glass-panel rounded-xl flex flex-col h-[400px]'},\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-center'},\n // QA fix: dropped duplicate \"LIVE\" pulse-dot - IntelligenceFeed is the canonical live feed.\n h('h3', {className:'text-[18px] font-bold tracking-tight'}, 'AI Actions Feed')\n ),\n h('div', {className:'flex-1 overflow-y-auto p-md space-y-md'},\n recent.length === 0\n ? h('div', {className:'text-center text-text-muted text-[13px] py-8'}, h(Icon,{name:'history',size:32,className:'opacity-30 mb-2 block mx-auto'}), 'No agent activity yet')\n : recent.map((a, idx) => {\n const {icon, color} = iconFor(a);\n return h('div', {key: a.id, className:'flex gap-md relative'},\n idx < recent.length - 1 && h('div', {className:'w-px absolute', style:{height:'100%', left:15, top:32, background: color + '33'}}),\n h('div', {\n className:'w-8 h-8 rounded-full flex items-center justify-center shrink-0 border z-10',\n style:{background: color + '18', borderColor: color + '4d'}\n }, h(Icon, {name: icon, size:14, style:{color}})),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'flex justify-between items-center'},\n h('p', {className:'text-[13px] font-bold text-on-surface truncate'}, a.name),\n h('span', {className:'text-[10px] text-on-surface-variant flex-shrink-0'}, fmtRelative(a.updated_at))\n ),\n h('p', {className:'text-[13px] text-on-surface-variant truncate'},\n a.is_running\n ? 'Running now-'\n : a.enabled\n ? (a.description ? a.description.slice(0, 60) + (a.description.length > 60 ? '-' : '') : 'Enabled - awaiting run.')\n : 'Standby - awaiting trigger.'\n ),\n (a.is_running || a.enabled) && h('p', {className:'text-[10px] font-mono-data mt-1 flex items-center gap-1 ' + (a.is_running ? 'text-tertiary' : 'text-secondary')},\n h(Icon,{name: a.is_running ? 'sync' : 'check_circle', size:10, className: a.is_running ? 'spin' : ''}),\n (a.is_running ? 'Running' : 'Active') + ' - ', a.workspace\n )\n )\n );\n })\n )\n );\n}\n\n// Connected Services grid - 5+ service cards using Material Symbols icons (mock-faithful).\nfunction ConnectedServicesGrid({integrations, setActivePage}) {\n const {Icon, INTEGRATIONS, INTEGRATION_META} = N();\n const SERVICE_ICONS = {\n google:'google', ga4:'analytics', gsc:'troubleshoot', ahrefs:'search_insights',\n gmail:'mail', drive:'folder', sheets:'table_chart', docs:'description', calendar:'event',\n youtube:'smart_display', producthunt:'rocket_launch',\n linkedin:'business_center', outlook:'inbox', wordpress:'web',\n };\n const display = INTEGRATIONS.slice(0, 10);\n return h('div', {className:'xl:col-span-3 glass-panel rounded-xl p-lg'},\n h('div', {className:'flex justify-between items-center mb-lg'},\n h('h3', {className:'text-[18px] font-bold tracking-tight'}, 'Connected Services'),\n h('button', {\n onClick: () => setActivePage('settings'),\n className:'text-[11px] font-bold uppercase tracking-widest text-primary hover:underline'\n }, 'Manage All')\n ),\n h('div', {className:'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-md'},\n display.map(name => {\n const meta = INTEGRATION_META[name];\n const integ = integrations.find(i => i.name === name);\n const connected = integ?.connected;\n const inheritsGoogle = ['ga4','gsc','youtube','drive','sheets','docs','calendar','gmail'].includes(name) &&\n integrations.find(i => i.name === 'google')?.connected;\n const status = connected || inheritsGoogle;\n return h('button', {\n key: name,\n onClick: () => setActivePage(meta.category === 'sales' ? 'sales' : 'marketing'),\n className:'bg-surface-container-low border border-border-subtle p-md rounded-lg flex flex-col items-center gap-sm hover:bg-surface-variant/10 transition-colors text-center'\n },\n h('div', {className:'w-10 h-10 bg-white/5 rounded flex items-center justify-center'},\n h(Icon, {name: SERVICE_ICONS[name] || 'extension', size:20, className:'text-on-surface', style:{color: status ? meta.color : '#64748b'}})\n ),\n h('span', {className:'text-[11px] font-bold uppercase tracking-wider text-on-surface truncate w-full'}, meta.label.split(' ')[0]),\n h('div', {className:'flex items-center gap-1.5'},\n h('div', {className:'w-1.5 h-1.5 rounded-full ' + (status ? 'bg-secondary' : 'bg-error')}),\n h('span', {className:'text-[9px] text-on-surface-variant'}, status ? 'Healthy' : 'Offline')\n )\n );\n })\n )\n );\n}\n\nfunction QuickActionsPanel({setActivePage, lastSynced}) {\n const {Icon} = N();\n const actions = [\n {icon:'rocket_launch', label:'Deploy New Agent', desc:'Set up an autonomous task', page:'agents', primary:true},\n {icon:'insights', label:'Strategy Workspace', desc:'SEO, content, signals', page:'marketing'},\n {icon:'contacts', label:'Sales CRM', desc:'Pipeline, contacts & deals', page:'sales'},\n ];\n return h('div', {className:'glass-panel rounded-xl p-lg flex flex-col'},\n h('h3', {className:'text-[18px] font-bold tracking-tight mb-lg'}, 'Quick Actions'),\n h('div', {className:'space-y-2 flex-1'},\n actions.map((a, i) => h('button', {\n key: i, onClick: () => setActivePage(a.page),\n className: 'w-full flex items-center justify-between p-3 rounded-lg transition-all text-left ' + (a.primary\n ? 'bg-primary/10 border border-primary/20 hover:bg-primary/20'\n : 'bg-white/5 border border-border-subtle hover:bg-white/10')\n },\n h('div', {className:'flex items-center gap-3'},\n h(Icon, {name:a.icon, size:20, className: a.primary ? 'text-primary' : 'text-on-surface-variant'}),\n h('div', null,\n h('div', {className:'text-[13px] font-bold text-on-surface'}, a.label),\n h('div', {className:'text-[10px] text-text-muted'}, a.desc)\n )\n ),\n h(Icon, {name:'chevron_right', size:18, className:'text-on-surface-variant'})\n ))\n ),\n h('p', {className:'text-[10px] text-on-surface-variant mt-lg text-center italic opacity-60'},\n lastSynced\n ? ('Last synced: ' + new Date(lastSynced).toLocaleTimeString('en-US',{hour:'numeric',minute:'2-digit'}))\n : 'Syncing-'\n )\n );\n}\n\n\n// D5: AttributionStrip - top channels from /api/attribution (last 30d), with simple\n// horizontal share bars. No chart library - inline divs keep file size small.\nfunction AttributionStrip() {\n const {Icon} = N();\n const [data, setData] = useState(null);\n useEffect(() => {\n fetch('/api/attribution').then(r => r.json()).then(setData).catch(() => {});\n }, []);\n if (!data || !data.channels || data.channels.length === 0) return null;\n const palette = ['#c0c1ff','#4edea3','#d0bcff','#8083ff','#6ffbbe'];\n return h('div', {className:'glass-panel rounded-xl p-md'},\n h('div', {className:'flex items-center justify-between mb-3'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'donut_small', size:18, className:'text-secondary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-secondary'}, 'Attribution - last 30d'),\n h('span', {className:'text-[10px] text-text-muted ml-2 font-mono-data'},\n data.total_conversions + ' conv - $' + Math.round(data.total_value).toLocaleString()\n )\n )\n ),\n h('div', {className:'space-y-1.5'},\n data.channels.slice(0, 6).map((c, i) => h('div', {key: c.source, className:'flex items-center gap-3 text-[12px]'},\n h('span', {className:'w-2 h-2 rounded-full flex-shrink-0', style:{background: palette[i % palette.length]}}),\n h('span', {className:'w-24 truncate text-on-surface-variant capitalize'}, c.source),\n h('div', {className:'flex-1 h-1.5 bg-surface-container rounded-full overflow-hidden'},\n h('div', {className:'h-full', style:{width:(c.share*100)+'%', background: palette[i % palette.length]}})\n ),\n h('span', {className:'w-16 text-right font-mono-data text-on-surface', style:{fontVariantNumeric:'tabular-nums'}},\n (c.share*100).toFixed(0)+'%'\n ),\n h('span', {className:'w-20 text-right font-mono-data text-text-muted'}, c.conversions + ' conv')\n ))\n )\n );\n}\n\n// --- STRATEGY (MARKETING) WORKSPACE ------------------------------------------\nexport function PillTabs({tabs, activeTab, setActiveTab}) {\n const {Icon, INTEGRATION_META} = N();\n // Mock uses Material Symbols for tabs (public/analytics/search_check), not brand logos.\n const TAB_ICONS = {\n ahrefs:'public', ga4:'analytics', gsc:'search_check',\n wordpress:'web', youtube:'smart_display', producthunt:'rocket_launch',\n gmail:'mail', drive:'folder', sheets:'table_chart', docs:'description', calendar:'event',\n linkedin:'business_center', outlook:'inbox',\n };\n return h('div', {className:'flex items-center gap-sm bg-surface-container-lowest p-1 rounded-xl w-fit border border-border-subtle overflow-x-auto'},\n tabs.map(tab => {\n const meta = INTEGRATION_META[tab];\n const on = activeTab === tab;\n return h('button', {\n key: tab, onClick: () => setActiveTab(tab), type:'button',\n className:'px-md py-2 rounded-lg text-[13px] font-bold flex items-center gap-2 whitespace-nowrap transition-all ' +\n (on\n ? 'bg-surface-elevated text-primary border border-primary/20'\n : 'text-on-surface-variant border border-transparent hover:bg-surface-elevated/50')\n },\n h(Icon, {name: TAB_ICONS[tab] || 'extension', size:16}),\n meta.label.replace('Google Analytics 4','GA4').replace('Google Search Console','GSC').replace('Google Workspace','Google').split(' ')[0]\n );\n })\n );\n}\n\nexport function WorkspaceHealth({integrations, category, label}) {\n const {Icon, INTEGRATIONS, INTEGRATION_META} = N();\n const slice = INTEGRATIONS.filter(n => INTEGRATION_META[n]?.category === category);\n const connectedCount = slice.filter(n => integrations.find(i => i.name === n)?.connected).length;\n // Real health score = the intelligence funnel composite (0-100), polled — NOT \"% connected\".\n const [summary, setSummary] = useState(null);\n useEffect(() => {\n let c = false;\n const pull = () => fetch('/api/intelligence/funnel-summary').then(r => r.json()).then(d => { if (!c) setSummary(d); }).catch(() => {});\n pull(); const iv = setInterval(pull, 60000);\n return () => { c = true; clearInterval(iv); };\n }, []);\n const score = summary && typeof summary.overall_health === 'number' ? Math.round(summary.overall_health) : null;\n const bottleneck = summary && summary.bottleneck ? summary.bottleneck.stage : null;\n const pct = score != null ? score : 0;\n const sub = score != null\n ? (bottleneck ? ('Bottleneck: ' + bottleneck) : 'Composite funnel health')\n : (connectedCount ? 'Computing health…' : 'Connect integrations to compute health');\n\n return h('div', {className:'glass-panel p-xl rounded-xl flex flex-col items-center justify-center text-center relative overflow-hidden h-full min-h-[300px]'},\n h('div', {className:'absolute inset-0 opacity-10 pointer-events-none'},\n h('div', {className:'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-40 h-40 rounded-full blur-3xl', style:{background: pct >= 50 ? '#4edea3' : '#c0c1ff'}})\n ),\n h('h3', {className:'text-[11px] font-bold uppercase tracking-widest text-secondary mb-xl relative'}, label),\n h('div', {className:'relative'},\n h('span', {className:'text-[64px] leading-none text-on-surface font-black tracking-tight'},\n score != null ? String(pct) : '—', score != null && h('span', {className: pct >= 50 ? 'text-secondary' : 'text-tertiary'}, '%')\n ),\n h('div', {className:'mt-sm flex items-center justify-center gap-1 ' + (pct >= 50 ? 'text-secondary' : 'text-tertiary')},\n score != null && h(Icon, {name: pct >= 50 ? 'arrow_upward' : 'arrow_downward', size:14}),\n h('span', {className:'font-mono-data text-[12px]'}, sub)\n )\n ),\n h('div', {className:'w-full mt-xl space-y-sm text-left relative'},\n slice.slice(0, 4).map(name => {\n const meta = INTEGRATION_META[name];\n const integ = integrations.find(i => i.name === name);\n const on = !!integ?.connected;\n return h('div', {key:name, className:'flex justify-between items-center text-[13px] py-1'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className:'w-2 h-2 rounded-full flex-shrink-0 ' + (on ? 'bg-secondary' : 'bg-surface-variant border border-border-subtle')}),\n h('span', {className:'text-on-surface-variant truncate'}, meta.label.replace('Google Analytics 4','GA4').replace('Google Search Console','GSC').split(' ')[0])\n ),\n h('span', {className:'text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full ' + (on ? 'bg-secondary/15 text-secondary' : 'bg-surface-container text-text-muted')}, on ? 'Connected' : 'Offline')\n );\n }),\n h('div', {className:'flex items-center gap-1.5 mt-md text-[10px] text-text-muted font-mono-data uppercase tracking-wider'},\n h('span', {className:'w-1.5 h-1.5 rounded-full bg-secondary pulse-dot'}),\n connectedCount + ' of ' + slice.length + ' integrations connected'\n )\n )\n );\n}\n\nexport function AIContentPipeline({agents, workspace, setActivePage}) {\n const {Icon, parseTools} = N();\n const wsAgents = agents.filter(a => a.workspace === workspace);\n const activeCount = wsAgents.filter(a => !!a.enabled).length;\n\n // QA fix: was using array-index (i mod 2) to fake \"drafting\" vs \"reviewing\" status and\n // hardcoded progress percentages derived from agent.name.length. Now derived from REAL\n // agent state: enabled=true means \"active\" (with last_run if available), else \"idle\".\n // Per-agent recent run is polled lazily inside RunStatusChip.\n const fmtRel = (iso) => {\n if (!iso) return 'never';\n const ms = Date.now() - new Date(iso).getTime();\n if (ms < 60000) return 'just now';\n if (ms < 3600000) return Math.floor(ms / 60000) + 'm ago';\n if (ms < 86400000) return Math.floor(ms / 3600000) + 'h ago';\n return Math.floor(ms / 86400000) + 'd ago';\n };\n const RunStatusChip = ({agentId}) => {\n const [run, setRun] = useState(null);\n useEffect(() => {\n let cancelled = false;\n fetch('/api/agents/' + agentId + '/runs?limit=1')\n .then(r => r.json())\n .then(d => { if (!cancelled && Array.isArray(d) && d[0]) setRun(d[0]); })\n .catch(() => {});\n return () => { cancelled = true; };\n }, [agentId]);\n if (!run) return h('span', {className:'text-[10px] font-mono-data text-text-muted'}, 'no runs yet');\n const color = run.status === 'completed' ? 'text-secondary'\n : run.status === 'failed' ? 'text-error'\n : run.status === 'running' ? 'text-tertiary'\n : 'text-text-muted';\n return h('span', {className:'text-[10px] font-mono-data ' + color},\n run.status + ' · ' + fmtRel(run.started_at)\n );\n };\n\n const cardFor = (agent) => {\n const tools = parseTools(agent.tools);\n const active = !!agent.enabled;\n return h('div', {\n key: agent.id, onClick: () => setActivePage('agents'),\n className: 'glass-panel rounded-xl p-md flex flex-col gap-md cursor-pointer transition-all ' +\n (active ? 'hover:border-primary/30' : 'opacity-70 hover:opacity-100')\n },\n h('div', {className:'flex justify-between items-start'},\n h('div', {className: 'w-10 h-10 rounded-lg flex items-center justify-center ' +\n (active ? 'bg-primary/10 text-primary' : 'bg-surface-container text-on-surface-variant')},\n h(Icon, {name: active ? 'auto_awesome' : 'schedule', size: 20})\n ),\n h('span', {className: 'text-[10px] font-bold uppercase tracking-widest ' +\n (active ? 'text-primary' : 'text-text-muted')},\n active ? 'ACTIVE' : 'IDLE'\n )\n ),\n h('div', null,\n h('h4', {className:'text-[15px] font-bold text-on-surface mb-1 line-clamp-1'}, agent.name),\n h('p', {className:'text-[12px] text-on-surface-variant line-clamp-2 leading-relaxed'},\n agent.description || 'No description'\n )\n ),\n h('div', {className:'mt-auto pt-md border-t border-border-subtle flex items-center justify-between gap-2'},\n h('div', {className:'flex -space-x-2 flex-shrink-0'},\n tools.slice(0, 3).map((t, j) => h('div', {\n key: j,\n className:'w-6 h-6 rounded-full border-2 border-surface-core text-[10px] flex items-center justify-center font-bold uppercase ' +\n (j % 2 === 0 ? 'bg-primary-container text-on-primary-container' : 'bg-secondary text-on-secondary')\n }, (t||'?')[0]))\n ),\n h(RunStatusChip, {agentId: agent.id})\n )\n );\n };\n // Old \"drafting/reviewing/queued\" branches removed — cardFor now renders every agent\n // with the same shape using real enabled state + a per-agent RunStatusChip that polls\n // /api/agents/:id/runs?limit=1. No more array-index-driven fake statuses.\n\n return h('div', null,\n h('div', {className:'flex items-center justify-between mb-md flex-wrap gap-3'},\n h('div', {className:'flex items-center gap-md'},\n h('h2', {className:'text-[22px] font-extrabold tracking-tight flex items-center gap-sm'},\n h(Icon, {name:'auto_awesome', size:24, filled:true, className:'text-primary'}),\n 'AI Content Pipeline'\n ),\n h('span', {className:'bg-primary/10 text-primary px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-widest border border-primary/20'},\n activeCount + ' ACTIVE / ' + wsAgents.length + ' TOTAL'\n )\n ),\n h('div', {className:'flex gap-2'},\n h('button', {onClick: () => setActivePage('agents'), className:'p-2 rounded-lg bg-surface-container-high text-on-surface-variant hover:text-on-surface transition-colors'},\n h(Icon, {name:'refresh', size:18})\n ),\n h('button', {onClick: () => setActivePage('agents'), className:'px-md py-2 rounded-lg bg-primary text-on-primary text-[11px] font-bold uppercase tracking-widest hover:opacity-90 transition-all'},\n 'Configure Pipeline'\n )\n )\n ),\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-md'},\n wsAgents.slice(0, 7).map(cardFor),\n h('button', {\n onClick: () => setActivePage('agents'), type:'button',\n className:'rounded-xl border-2 border-dashed border-border-subtle hover:border-primary/50 hover:bg-primary/5 transition-all flex flex-col items-center justify-center gap-md p-md group min-h-[200px]'\n },\n h('div', {className:'w-12 h-12 rounded-full border border-border-subtle flex items-center justify-center group-hover:bg-primary/20 group-hover:border-primary transition-all'},\n h(Icon, {name:'add', size:24, className:'text-on-surface-variant group-hover:text-primary'})\n ),\n h('div', {className:'text-center'},\n h('p', {className:'text-[15px] font-bold text-on-surface'}, 'New Agent Task'),\n h('p', {className:'text-[12px] text-on-surface-variant'}, 'Define prompt & parameters')\n )\n )\n )\n );\n}\n\n// --- TEAM HUB (Co-working) ---------------------------------------------------\n// Workspace Toolkit (Gmail/Drive/Sheets/Docs/Calendar pill tabs + IntegrationPanel)\n// + 3-column collab surface (Team Members + Activity Stream + Shared Notes).\n// Notes persist to /api/notes so multiple users see the same notepad.\nexport function TeamHub({agents, workspace, showToast, integrations, setActivePage}) {\n const {Icon, Spinner, Btn, IntegrationPanel, INTEGRATION_META} = N();\n // Workspace Toolkit sub-tab state - only renders if any tool is connected (via shared Google OAuth).\n const WORKSPACE_TOOLS = ['gmail', 'outlook', 'drive', 'sheets', 'docs', 'calendar', 'onedrive', 'teams', 'excel'];\n const [toolTab, setToolTab] = useState('gmail');\n const TOOL_ICONS = {gmail:'mail', outlook:'inbox', drive:'folder', sheets:'table_chart', docs:'description', calendar:'event', onedrive:'cloud', teams:'groups', excel:'table_view'};\n const [notes, setNotes] = useState([]);\n const [draft, setDraft] = useState('');\n const [saving, setSaving] = useState(false);\n const [loading, setLoading] = useState(true);\n const wsAgents = agents.filter(a => a.workspace === workspace);\n\n const loadNotes = async () => {\n try {\n const r = await fetch('/api/notes?workspace=' + workspace);\n const d = await r.json();\n setNotes(Array.isArray(d) ? d : []);\n } catch {} finally { setLoading(false); }\n };\n useEffect(() => { loadNotes(); const iv = setInterval(loadNotes, 30000); return () => clearInterval(iv); }, [workspace]);\n\n const addNote = async () => {\n if (!draft.trim()) return;\n setSaving(true);\n try {\n const r = await fetch('/api/notes', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({content: draft, workspace, author: 'Director'})\n });\n if (r.ok) {\n setDraft('');\n await loadNotes();\n showToast && showToast('Note added to team feed', 'success');\n }\n } finally { setSaving(false); }\n };\n\n const togglePin = async (n) => {\n await fetch('/api/notes/' + n.id, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({pinned: !n.pinned})});\n await loadNotes();\n };\n const deleteNote = async (id) => {\n if (!confirm('Delete this note?')) return;\n await fetch('/api/notes/' + id, {method:'DELETE'});\n await loadNotes();\n };\n\n // Derive activity stream from agent updated_at timestamps.\n const activity = wsAgents\n .slice()\n .sort((a,b) => new Date(b.updated_at||0) - new Date(a.updated_at||0))\n .slice(0, 6)\n .map(a => ({\n id: a.id, name: a.name, when: fmtRelative(a.updated_at),\n action: a.is_running ? 'is running now' : a.enabled ? 'enabled - awaiting run' : 'standby',\n tone: a.is_running ? 'secondary' : a.enabled ? 'secondary' : 'muted'\n }));\n\n return h('section', {className:'space-y-md'},\n h('div', {className:'flex items-center justify-between mb-md flex-wrap gap-3'},\n h('div', {className:'flex items-center gap-md'},\n h('h2', {className:'text-[22px] font-extrabold tracking-tight flex items-center gap-sm'},\n h(Icon, {name:'diversity_3', size:24, filled:true, className:'text-tertiary'}),\n 'Team Hub'\n ),\n h('span', {className:'bg-tertiary/10 text-tertiary px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-widest border border-tertiary/20'},\n 'CO-WORKING - ' + wsAgents.length + ' AGENTS'\n )\n ),\n h('span', {className:'text-[10px] text-text-muted font-mono-data uppercase tracking-widest'}, 'workspace - ' + workspace)\n ),\n\n // -- WORKSPACE TOOLKIT (non-marketing tools live here, per user spec) -\n integrations && setActivePage && h('div', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h('div', {className:'flex items-center justify-between flex-wrap gap-2'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'apps', size:18, className:'text-tertiary'}),\n h('h3', {className:'text-[15px] font-bold'}, 'Workspace Toolkit'),\n h('span', {className:'text-[10px] text-text-muted'}, '- Gmail - Drive - Sheets - Docs - Calendar')\n ),\n h('span', {className:'text-[10px] font-mono-data text-text-muted uppercase tracking-widest'}, 'Google OAuth')\n ),\n h('div', {className:'flex items-center gap-sm bg-surface-container-lowest p-1 rounded-xl w-fit border border-border-subtle overflow-x-auto'},\n WORKSPACE_TOOLS.map(t => {\n const on = toolTab === t;\n const meta = INTEGRATION_META?.[t] || {label: t};\n return h('button', {\n key: t, onClick: () => setToolTab(t), type:'button',\n className:'px-md py-2 rounded-lg text-[13px] font-bold flex items-center gap-2 whitespace-nowrap transition-all ' +\n (on ? 'bg-surface-elevated text-tertiary border border-tertiary/20'\n : 'text-on-surface-variant border border-transparent hover:bg-surface-elevated/50')\n },\n h(Icon, {name: TOOL_ICONS[t] || 'extension', size: 16}),\n meta.label.replace('Google ','').split(' ')[0]\n );\n })\n ),\n h('div', {className:'pt-2'},\n IntegrationPanel && h(IntegrationPanel, {\n key: toolTab, integrationName: toolTab, integrations,\n onGoToSettings: () => setActivePage('settings')\n })\n )\n ),\n\n h('div', {className:'grid grid-cols-1 lg:grid-cols-3 gap-md'},\n\n // Team Members (agents as collaborators)\n h('div', {className:'glass-panel rounded-xl p-lg'},\n h('div', {className:'flex items-center justify-between mb-md'},\n h('h3', {className:'text-[15px] font-bold flex items-center gap-2'},\n h(Icon,{name:'groups',size:18,className:'text-primary'}), 'Team Members'\n ),\n h('span', {className:'text-[10px] text-text-muted font-mono-data'}, wsAgents.length + ' total')\n ),\n h('div', {className:'space-y-2 max-h-[320px] overflow-y-auto pr-1'},\n wsAgents.length === 0\n ? h('div', {className:'text-center text-text-muted text-[12px] py-6'}, 'No agents in this workspace yet.')\n : wsAgents.map(a => {\n const c = colorFromName(a.name);\n return h('div', {key: a.id, className:'flex items-center gap-2.5 p-2 rounded-lg hover:bg-white/[0.02] transition-colors'},\n h('div', {className:'w-9 h-9 rounded-full flex items-center justify-center font-bold text-[12px] flex-shrink-0', style:{background:c+'33',color:c}},\n initialsOf(a.name)\n ),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'text-[13px] font-bold text-on-surface truncate'}, a.name),\n h('div', {className:'flex items-center gap-1.5 mt-0.5'},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + (a.is_running ? 'bg-tertiary pulse-dot' : a.enabled ? 'bg-secondary' : 'bg-text-muted')}),\n h('span', {className:'text-[10px] text-text-muted'}, a.is_running ? 'Running now' : a.enabled ? 'Active' : 'Idle')\n )\n )\n );\n })\n )\n ),\n\n // Activity Stream (live agent actions)\n h('div', {className:'glass-panel rounded-xl p-lg'},\n h('div', {className:'flex items-center justify-between mb-md'},\n // QA fix: dropped duplicate \"LIVE\" pulse-dot - IntelligenceFeed owns that signal.\n h('h3', {className:'text-[15px] font-bold flex items-center gap-2'},\n h(Icon,{name:'graphic_eq',size:18,className:'text-secondary'}), 'Activity Stream'\n )\n ),\n h('div', {className:'space-y-3 max-h-[320px] overflow-y-auto pr-1'},\n activity.length === 0\n ? h('div', {className:'text-center text-text-muted text-[12px] py-6'}, 'No recent activity.')\n : activity.map(a => h('div', {key: a.id, className:'relative pl-3 border-l ' + (a.tone === 'secondary' ? 'border-secondary/30' : 'border-text-muted/30')},\n h('div', {className:'absolute -left-[4.5px] top-0 w-2 h-2 rounded-full ' + (a.tone === 'secondary' ? 'bg-secondary' : 'bg-text-muted')}),\n h('div', {className:'flex justify-between mb-0.5'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-wider ' + (a.tone === 'secondary' ? 'text-secondary' : 'text-text-muted')}, a.name),\n h('span', {className:'text-[10px] font-mono-data text-text-muted'}, a.when)\n ),\n h('p', {className:'text-[11px] text-on-surface-variant'}, a.action)\n ))\n )\n ),\n\n // Shared Notes (backed by /api/notes - real co-working persistence)\n h('div', {className:'glass-panel rounded-xl p-lg flex flex-col'},\n h('div', {className:'flex items-center justify-between mb-md'},\n h('h3', {className:'text-[15px] font-bold flex items-center gap-2'},\n h(Icon,{name:'sticky_note_2',size:18,className:'text-tertiary'}), 'Shared Notes'\n ),\n h('span', {className:'text-[10px] text-text-muted font-mono-data'}, notes.length + ' notes')\n ),\n h('div', {className:'space-y-2 max-h-[260px] overflow-y-auto pr-1 mb-3 flex-1'},\n loading\n ? h('div', {className:'text-center py-4'}, h(Spinner,{size:18}))\n : notes.length === 0\n ? h('div', {className:'text-center text-text-muted text-[12px] py-6'}, 'No notes yet. Drop the first one -')\n : notes.map(n => h('div', {\n key: n.id,\n className:'p-2.5 rounded-lg group relative ' + (n.pinned ? 'bg-tertiary/5 border border-tertiary/20' : 'bg-surface-container/40 border border-border-subtle')\n },\n h('p', {className:'text-[12px] text-on-surface leading-snug pr-12'}, n.content),\n h('div', {className:'flex justify-between items-center mt-1.5 text-[10px] text-text-muted'},\n h('span', null, h('span',{className:'text-on-surface-variant font-bold'},n.author||'-'), ' - ', fmtRelative(n.created_at)),\n h('div', {className:'flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity'},\n h('button', {onClick: () => togglePin(n), className:'text-text-muted hover:text-tertiary', title: n.pinned ? 'Unpin' : 'Pin'},\n h(Icon,{name: n.pinned ? 'push_pin' : 'keep', size:13, filled: !!n.pinned})\n ),\n h('button', {onClick: () => deleteNote(n.id), className:'text-text-muted hover:text-error', title:'Delete'},\n h(Icon,{name:'close', size:13})\n )\n )\n )\n ))\n ),\n h('div', {className:'border-t border-border-subtle pt-3 space-y-2'},\n h('textarea', {\n value: draft,\n onChange: e => setDraft(e.target.value),\n onKeyDown: e => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); addNote(); } },\n placeholder:'Drop a note for the team- (-+Enter to send)',\n rows: 2,\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[12px] resize-none outline-none focus:border-tertiary focus:ring-1 focus:ring-tertiary/30 transition-all',\n style:{fontFamily:'inherit'}\n }),\n h('div', {className:'flex justify-end'},\n h(Btn, {onClick: addNote, variant:'primary', size:'sm', disabled: !draft.trim() || saving},\n saving ? h(Spinner,{size:13}) : h(Icon,{name:'send', size:14}),\n 'Post Note'\n )\n )\n )\n )\n )\n );\n}\n\n\n// WAVE 1: Strategy is now a CRM-grade operating surface. Adopts the CRM shell —\n// PageHeader + a 4-card KPI header (fed by /api/marketing/overview) + a segmented sub-tab\n// toolbar — and SURFACES the already-built intelligence/attribution/persona/utm/brand/nurture\n// capability (mounted from /api/app-marketing2). The channel-pill IntegrationPanel surface\n// (the generic per-channel read/write mini-app) is preserved on the SEO/Traffic/Content tabs,\n// each scoped to its relevant channels. AIContentPipeline + channel-aware Draft-with-AI are\n// preserved (Draft only shows on Content write channels). Everything else (other workspaces,\n// tenant scoping handled server-side) is untouched.\nexport function MarketingWorkspace({integrations, agents, setActivePage, showToast}) {\n const {PageHeader, IntegrationPanel, MetricCard, Icon} = N();\n\n // Sub-tab views. Overview/Attribution/Audiences/Automation/Tools mount frontend_marketing2\n // components; SEO/Traffic/Content keep the existing PillTabs + IntegrationPanel surface.\n const SUBTABS = [\n ['overview', 'Overview', 'dashboard'],\n ['seo', 'SEO', 'search_check'],\n ['traffic', 'Traffic', 'analytics'],\n ['content', 'Content', 'edit_note'],\n ['capture', 'Capture', 'capture'],\n ['attribution', 'Attribution', 'donut_small'],\n ['audiences', 'Audiences', 'groups'],\n ['automation', 'Automation', 'auto_awesome'],\n ['handoff', 'Handoff', 'swap_horiz'],\n ['tools', 'Tools', 'build'],\n ];\n // Channel pills scoped per sub-tab (only SEO/Traffic/Content use them).\n const CHANNELS = { seo: ['ahrefs','gsc'], traffic: ['ga4','youtube','producthunt'], content: ['wordpress','linkedin'] };\n // Channels we can actually draft+publish content to (gate Draft-with-AI to these).\n const WRITE_CHANNELS = { wordpress: 'prepare_wordpress_post', linkedin: 'prepare_linkedin_post' };\n\n const [view, setView] = useState('overview');\n // Per-channel-group active pill — initialised to the first channel of each group.\n const [chanTab, setChanTab] = useState({ seo: 'ahrefs', traffic: 'ga4', content: 'wordpress' });\n const channels = CHANNELS[view] || null;\n const activeChannel = channels ? chanTab[view] : null;\n const setActiveChannel = (c) => setChanTab(prev => ({ ...prev, [view]: c }));\n\n // KPI header — composed server-side from AIO KPIs + funnel-summary + attribution.\n // Real-data-only: honest dashes while loading / when an input is unconfigured.\n const [ov, setOv] = useState(null);\n useEffect(() => {\n let cancelled = false;\n fetch('/api/marketing/overview').then(r => r.json()).then(d => { if (!cancelled) setOv(d); }).catch(() => {});\n return () => { cancelled = true; };\n }, []);\n const k = ov && ov.kpis ? ov.kpis : null;\n const fn = ov && ov.funnel ? ov.funnel : null;\n const at = ov && ov.attribution ? ov.attribution : null;\n const dash = '\\\\u2014';\n const kpiVal = (v, fmt) => (v == null ? dash : fmt(v));\n\n // Draft-with-AI is channel-aware: only meaningful on Content write channels.\n const writeTool = activeChannel ? WRITE_CHANNELS[activeChannel] : null;\n const draftWithAI = () => window.dispatchEvent(new CustomEvent('nexus:open-chat', { detail: { action_payload: {\n question: 'Draft a marketing content piece for the ' + activeChannel + ' channel and queue it for approval (use ' + writeTool + '). Ask me for the topic if you need it.'\n } } }));\n\n return h('div', {className:'p-lg lg:p-xl max-w-[1440px] mx-auto space-y-lg'},\n h(PageHeader, {\n title:'Strategy Workspace',\n subtitle:'SEO intelligence, analytics, content, attribution, audiences, and automation - one operating surface.',\n icon:'insights',\n action: h('button', {\n onClick: () => window.dispatchEvent(new CustomEvent('nexus:open-chat', { detail: { action_payload: { question: 'Help me plan and execute a marketing initiative. Walk me through the options across SEO, content, paid, and lifecycle, then queue the work for approval.' } } })),\n className:'bg-primary text-on-primary font-semibold py-2 px-4 rounded-lg hover:opacity-90 text-[13px] shrink-0 flex items-center gap-2'\n }, h(Icon, {name:'auto_awesome', size:16}), 'Execute with AI')\n }),\n\n // -- 4-card KPI header (fed by /api/marketing/overview) ----------------\n h('div', {className:'grid grid-cols-2 lg:grid-cols-4 gap-md'},\n h(MetricCard, {\n icon:'payments', color:'#c0c1ff', title:'CAC',\n value: kpiVal(k && k.cac, v => '$' + Math.round(v).toLocaleString()),\n subtitle:'Cost to acquire a customer'\n }),\n h(MetricCard, {\n icon:'trending_up', color:'#4edea3', title:'LTV : CAC',\n value: kpiVal(k && k.ltv_cac_ratio, v => v.toFixed(1) + ':1'),\n subtitle:'Healthy at 3:1 or above'\n }),\n h(MetricCard, {\n icon:'monitoring', color:'#d0bcff', title:'Funnel health',\n value: kpiVal(fn && fn.overall_health, v => Math.round(v) + '%'),\n subtitle: fn && fn.bottleneck && fn.bottleneck.stage ? ('Bottleneck: ' + fn.bottleneck.stage) : 'Composite TOFU-BOFU'\n }),\n h(MetricCard, {\n icon:'donut_small', color:'#8083ff', title:'Conversions - 30d',\n value: kpiVal(at && at.total_conversions, v => fmtNum(v)),\n subtitle: at && at.total_value != null ? ('$' + Math.round(at.total_value).toLocaleString() + ' attributed') : 'Across all channels'\n })\n ),\n\n // -- Segmented sub-tab toolbar (CRM toolbar feel) ----------------------\n h('div', {className:'flex items-center justify-between gap-3 flex-wrap'},\n h('div', {className:'inline-flex rounded-lg border border-border-subtle overflow-hidden flex-wrap'},\n SUBTABS.map(([v, label, ic]) => h('button', {\n key: v, onClick: () => setView(v), type:'button',\n className:'px-3 py-1.5 text-[12px] font-semibold flex items-center gap-1.5 ' +\n (view === v ? 'bg-primary text-white' : 'bg-surface-container text-text-muted hover:text-on-surface')\n }, h(Icon, {name: ic, size:15}), label))\n )\n ),\n\n // -- Channel pills (only on SEO/Traffic/Content) -----------------------\n channels && h(PillTabs, {tabs: channels, activeTab: activeChannel, setActiveTab: setActiveChannel}),\n\n // -- Channel-aware Draft-with-AI (only on Content write channels) ------\n writeTool && h('div', {className:'glass-panel rounded-xl p-md flex items-center justify-between gap-md flex-wrap'},\n h('div', null,\n h('div', {className:'text-[13px] font-semibold text-on-surface'}, 'Draft with AI'),\n h('div', {className:'text-[11px] text-text-muted'}, 'Draft a ' + activeChannel + ' post - it queues in Approvals before anything publishes.')\n ),\n h('button', {\n onClick: draftWithAI,\n className:'bg-primary text-on-primary font-semibold py-2 px-4 rounded-lg hover:opacity-90 text-[13px] shrink-0'\n }, 'Draft with AI')\n ),\n\n // -- Body switch -------------------------------------------------------\n // Overview/Attribution/Audiences/Automation/Tools mount frontend_marketing2 components.\n // SEO/Traffic/Content render the per-channel IntegrationPanel beside the funnel-health gauge.\n view === 'overview'\n ? h(MktOverview, {setActivePage})\n : view === 'capture'\n // WAVE 2: lead-capture surface — forms (with submissions) + landing pages.\n ? h('div', {className:'space-y-lg'}, h(MktForms, {setActivePage, showToast}), h(MktLanding, {setActivePage, showToast}))\n : view === 'attribution'\n ? h(MktAttribution, {setActivePage})\n : view === 'audiences'\n // WAVE 2: audiences now spans personas + segments + lists.\n ? h('div', {className:'space-y-lg'}, h(MktPersonas, {setActivePage, showToast}), h(MktSegments, {setActivePage, showToast}), h(MktLists, {setActivePage, showToast}))\n : view === 'automation'\n ? h('div', {className:'space-y-lg'}, h(MktNurture, {setActivePage, showToast}), h(MktCRO, {setActivePage}))\n : view === 'handoff'\n // WAVE 2: MQL-ready leads → promote-to-deal handoff to Sales.\n ? h(MktHandoff, {setActivePage, showToast})\n : view === 'tools'\n ? h('div', {className:'grid grid-cols-1 xl:grid-cols-2 gap-lg'}, h(MktUtm, {setActivePage, showToast}), h(MktBrand, {setActivePage, showToast}))\n : // SEO / Traffic / Content — preserved PillTabs + IntegrationPanel surface\n h('div', {className:'grid grid-cols-12 gap-lg'},\n h('div', {className:'col-span-12 lg:col-span-4'},\n h(WorkspaceHealth, {integrations, category:'marketing', label:'Funnel health'})\n ),\n h('div', {className:'col-span-12 lg:col-span-8'},\n h('div', {className:'glass-panel rounded-xl p-lg h-full'},\n h(IntegrationPanel, {\n key: activeChannel, integrationName: activeChannel, integrations,\n onGoToSettings: () => setActivePage('settings')\n })\n )\n )\n ),\n\n // -- AI Content Pipeline (preserved across all sub-tabs) ---------------\n h(AIContentPipeline, {agents, workspace:'marketing', setActivePage})\n // Team Hub moved to its own top-level Workspace page per user spec.\n );\n}\n\n\n// --- WORKSPACE PAGE (NEW top-level page - was Team Hub embedded in Strategy/Signals) -\n// Contains the Workspace Toolkit (Gmail/Drive/Sheets/Docs/Calendar) + collab columns.\n// Switchable between marketing/sales workspace context via a small selector.\nexport function WorkspacePage({integrations, agents, setActivePage, showToast}) {\n const {PageHeader} = N();\n const [workspaceCtx, setWorkspaceCtx] = useState('marketing');\n return h('div', {className:'p-lg lg:p-xl max-w-[1440px] mx-auto space-y-lg'},\n h(PageHeader, {\n title:'Workspace - Co-Working Hub',\n subtitle:'Gmail - Drive - Sheets - Docs - Calendar - OneDrive - Teams - Excel - plus team activity, shared notes, and live agent presence. Everything the team needs that\\\\'s not marketing analytics.',\n action: h('div', {className:'flex items-center gap-2 bg-surface-container-lowest p-1 rounded-lg border border-border-subtle'},\n ['marketing','sales'].map(w => h('button', {\n key: w, onClick: () => setWorkspaceCtx(w), type:'button',\n className: 'px-3 py-1.5 rounded-md text-[11px] font-bold uppercase tracking-widest transition-all ' +\n (workspaceCtx === w ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface')\n }, w))\n )\n }),\n h(TeamHub, {agents, workspace: workspaceCtx, showToast, integrations, setActivePage})\n );\n}\n\n\n// --- SIGNALS (SALES) WORKSPACE -----------------------------------------------\nexport function SignalKPIs({integrations}) {\n const {Icon} = N();\n const li = integrations.find(i => i.name === 'linkedin' && i.connected);\n const ol = integrations.find(i => i.name === 'outlook' && i.connected);\n const totalChannels = 2;\n const totalConnected = [li, ol].filter(Boolean).length;\n const coveragePct = Math.round(totalConnected / totalChannels * 100);\n\n return h('div', {className:'flex flex-col gap-4 h-full'},\n h('div', {className:'glass-panel p-4 rounded-xl flex items-center justify-between flex-1'},\n h('div', {className:'w-full'},\n h('p', {className:'text-[11px] font-bold uppercase tracking-widest text-text-muted'}, 'Channel Coverage'),\n h('h4', {className:'text-[32px] font-extrabold tracking-tight ' + (totalConnected > 0 ? 'text-secondary' : 'text-text-muted')},\n coveragePct, h('span', {className:'text-[20px]'}, '%')\n ),\n h('p', {className:'text-[11px] text-text-muted mt-1'}, totalConnected + ' of ' + totalChannels + ' channels live'),\n h('div', {className:'w-full bg-white/5 h-1.5 rounded-full mt-2 overflow-hidden'},\n h('div', {className:'h-full transition-all ' + (totalConnected > 0 ? 'bg-secondary' : 'bg-surface-variant'), style:{width: coveragePct + '%'}})\n )\n )\n ),\n h('div', {className:'glass-panel p-4 rounded-xl flex items-center justify-between flex-1'},\n h('div', null,\n h('p', {className:'text-[11px] font-bold uppercase tracking-widest text-text-muted'}, 'Active Channels'),\n h('h4', {className:'text-[32px] font-extrabold tracking-tight text-on-surface'}, String(totalConnected)),\n h('p', {className:'text-[11px] text-text-muted mt-1'},\n li ? 'LinkedIn ' : '', ol ? 'Outlook ' : '', totalConnected === 0 ? '- configure in Settings' : 'live now'\n )\n ),\n h(Icon, {name:'payments', size:36, className:'text-primary'})\n )\n );\n}\n\nexport function AILeadRanking({integrations, onOpenChat}) {\n const {Icon, Spinner} = N();\n const ol = integrations.find(i => i.name === 'outlook' && i.connected);\n const li = integrations.find(i => i.name === 'linkedin' && i.connected);\n const [rows, setRows] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const load = async () => {\n setLoading(true); setError(null);\n try {\n // Primary source: /api/intelligence/leads - real MQL/SQL math from Gmail + Outlook + calendar.\n const r = await fetch('/api/intelligence/leads');\n const leads = await r.json();\n if (Array.isArray(leads) && leads.length > 0) {\n setRows(leads.slice(0, 8).map(L => ({\n id: L.email, name: L.name, role: L.signal_breakdown && Object.keys(L.signal_breakdown).slice(0,2).join(' - ') || L.email,\n company: L.company, score: Math.min(99, L.mql_score),\n stage: L.stage, mql: L.mql_qualified, sql: L.sql_qualified,\n sql_signals: L.sql_signals, source: L.source,\n signal: L.sql_qualified ? 'SQL - ' + L.sql_signals.length + ' qualified signals'\n : L.mql_qualified ? 'MQL - score ' + L.mql_score\n : 'Cold - score ' + L.mql_score\n })));\n } else { setRows([]); }\n } catch (e) { setError(e.message); }\n finally { setLoading(false); }\n };\n\n useEffect(() => { load(); }, [ol?.id, li?.id]);\n\n if (!ol && !li) {\n return h('div', {className:'glass-panel rounded-xl p-xl flex flex-col items-center justify-center text-center gap-3'},\n h(Icon, {name:'contact_mail', size:36, className:'text-text-muted'}),\n h('h3', {className:'text-[16px] font-bold text-on-surface-variant'}, 'No signal sources connected'),\n h('p', {className:'text-[13px] text-text-muted max-w-md'}, 'Connect LinkedIn or Outlook in Settings to populate the AI Lead Ranking with real inbound signals.')\n );\n }\n\n return h('div', {className:'glass-panel rounded-xl overflow-hidden'},\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-center bg-surface-container-lowest/50 flex-wrap gap-3'},\n h('div', {className:'flex items-center gap-3'},\n h(Icon, {name:'auto_awesome', size:22, filled:true, className:'text-secondary'}),\n h('h3', {className:'text-[18px] font-bold'}, 'AI Lead Ranking')\n ),\n h('div', {className:'flex gap-4 items-center'},\n error && h('span', {className:'text-[11px] text-error'}, error),\n h('button', {onClick: load,\n className:'text-[11px] font-bold uppercase tracking-widest text-secondary flex items-center gap-2 hover:opacity-80'\n }, h(Icon, {name:'sync', size:14, className: loading ? 'spin' : ''}), 'Refresh AI Model')\n )\n ),\n rows.length === 0 && !loading && h('div', {className:'p-xl text-center text-text-muted text-[13px]'},\n 'No recent signals. Pull will retry on next refresh.'\n ),\n loading && rows.length === 0 && h('div', {className:'p-xl text-center'}, h(Spinner,{size:24})),\n rows.length > 0 && h('div', {className:'overflow-x-auto'},\n h('table', {className:'w-full text-left', style:{borderCollapse:'collapse'}},\n h('thead', {className:'bg-surface-container-high/30'},\n h('tr', null,\n ['Prospect','Company','AI Score','Signal Type','Actions'].map(c => h('th', {\n key: c, className:'p-3 text-[10px] font-bold uppercase tracking-widest text-text-muted border-b border-border-subtle'\n }, c))\n )\n ),\n h('tbody', null,\n rows.map(r => h('tr', {key: r.id, className:'hover:bg-white/[0.02] transition-colors border-b border-border-subtle/50'},\n h('td', {className:'p-3'},\n h('div', {className:'flex items-center gap-3'},\n h('div', {className:'w-9 h-9 rounded-lg flex items-center justify-center font-bold text-[12px] flex-shrink-0 ' +\n (r.source === 'linkedin' ? 'bg-[#0077b5]/20 text-[#0077b5]' : 'bg-primary/15 text-primary')},\n initialsOf(r.name).slice(0,2)\n ),\n h('div', {className:'min-w-0'},\n h('p', {className:'text-[13px] font-bold truncate'}, r.name),\n h('p', {className:'text-[10px] text-text-muted truncate'}, r.role)\n )\n )\n ),\n h('td', {className:'p-3 text-[12px] font-mono-data uppercase tracking-wider text-on-surface-variant'}, r.company),\n h('td', {className:'p-3'},\n h('div', {className:'flex items-center justify-center'},\n h('div', {className:'w-12 h-12 relative flex items-center justify-center'},\n h('svg', {className:'absolute inset-0 w-full h-full -rotate-90', viewBox:'0 0 48 48'},\n h('circle', {cx:24, cy:24, r:20, fill:'transparent', stroke:'#353438', strokeWidth:4}),\n h('circle', {cx:24, cy:24, r:20, fill:'transparent',\n stroke: r.score >= 80 ? '#4edea3' : r.score >= 60 ? '#c0c1ff' : '#ffb4ab',\n strokeWidth:4, strokeDasharray:125.6, strokeDashoffset: 125.6 - (r.score/100 * 125.6), strokeLinecap:'round'})\n ),\n h('span', {className:'font-mono-data text-[12px] font-bold ' +\n (r.score >= 80 ? 'text-secondary' : r.score >= 60 ? 'text-primary' : 'text-error')}, r.score)\n )\n )\n ),\n h('td', {className:'p-3'},\n h('div', {className:'flex items-center gap-2'},\n // Real MQL/SQL stage badge from /api/intelligence/leads scoring\n r.stage && h('span', {\n className:'text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border ' +\n (r.stage === 'SQL' ? 'bg-secondary/15 text-secondary border-secondary/30'\n : r.stage === 'MQL' ? 'bg-primary/15 text-primary border-primary/30'\n : 'bg-text-muted/15 text-text-muted border-text-muted/30')\n }, r.stage),\n h('span', {className:'text-[12px] text-on-surface'}, r.signal)\n )\n ),\n h('td', {className:'p-3 text-right'},\n h('button', {onClick: () => onOpenChat(r),\n className:'px-3 py-1 border border-secondary text-secondary rounded-lg text-[10px] font-bold uppercase tracking-widest hover:bg-secondary hover:text-on-secondary transition-all'\n }, 'Draft Outreach')\n )\n ))\n )\n )\n )\n );\n}\n\nexport function SalesWorkspace({integrations, agents, setActivePage, openOutreach, showToast}) {\n const {PageHeader, IntegrationPanel, Icon, PipelineVelocityChart} = N();\n const tabs = ['linkedin', 'outlook'];\n const [activeTab, setActiveTab] = useState('linkedin');\n // Outreach drawer state: opens when a row's \"Draft Outreach\" is clicked.\n const [drawerProspect, setDrawerProspect] = useState(null);\n const openDrawer = (signal) => setDrawerProspect(signal);\n\n // Real pipeline funnel for PipelineVelocityChart — no hardcoded stages/currentStage.\n const [funnel, setFunnel] = useState(null);\n useEffect(() => {\n let cancelled = false;\n const pull = () => fetch('/api/intelligence/funnel-summary').then(r => r.json()).then(d => { if (!cancelled) setFunnel(d); }).catch(() => {});\n pull();\n const iv = setInterval(pull, 60000);\n return () => { cancelled = true; clearInterval(iv); };\n }, []);\n // Map the funnel-summary payload to the chart's { stages:[{label,value}], currentStage } shape.\n const funnelStages = funnel && Array.isArray(funnel.stages)\n ? funnel.stages.map(s => ({ label: s.label || s.stage || s.name, value: s.value != null ? s.value : (s.count != null ? s.count : 0) }))\n : [];\n const funnelCurrentStage = funnel && funnel.bottleneck && funnel.bottleneck.stage\n ? funnel.bottleneck.stage\n : (funnelStages.length ? funnelStages[funnelStages.length - 1].label : null);\n\n return h('div', {className:'p-lg lg:p-xl max-w-[1440px] mx-auto space-y-lg'},\n h(PageHeader, {\n title:'Signals Workspace',\n subtitle:'LinkedIn outreach, email signals, and pipeline intelligence.'\n }),\n h(PillTabs, {tabs, activeTab, setActiveTab}),\n\n // -- Pipeline Velocity + Growth KPIs (mock-faithful row) -------------\n h('div', {className:'grid grid-cols-12 gap-lg'},\n h('div', {className:'col-span-12 xl:col-span-8 glass-panel rounded-xl p-lg flex flex-col gap-lg'},\n h('div', {className:'flex justify-between items-center'},\n h('div', null,\n h('h3', {className:'text-[18px] font-bold uppercase tracking-wide'}, 'Pipeline Velocity'),\n h('p', {className:'text-[13px] text-text-muted'}, 'Conversion and funnel distribution')\n ),\n funnelStages.length > 0\n ? h('span', {className:'px-3 py-1 bg-secondary/10 border border-secondary/20 text-secondary text-[10px] rounded-full font-bold uppercase'}, 'Live')\n : h('span', {className:'px-3 py-1 bg-surface-container border border-border-subtle text-text-muted text-[10px] rounded-full font-bold uppercase'}, 'No data')\n ),\n PipelineVelocityChart\n ? (funnelStages.length > 0\n ? h(PipelineVelocityChart, {stages: funnelStages, currentStage: funnelCurrentStage})\n : h('div', {className:'flex-1 flex items-center justify-center text-center text-text-muted text-[13px] py-12'}, 'No pipeline data yet. Connect sales sources to populate the funnel.'))\n : null\n ),\n h('div', {className:'col-span-12 xl:col-span-4'}, h(SignalKPIs, {integrations})),\n\n // -- HOT SIGNALS (I1: real-time intent signals) ----------------------\n h('div', {className:'col-span-12'}, h(HotSignalsRow, {openDrawer})),\n\n // -- Workspace panel + AI Lead Ranking -----------------------------\n h('div', {className:'col-span-12 lg:col-span-8'},\n h('div', {className:'glass-panel rounded-xl p-lg h-full'},\n h(IntegrationPanel, {key: activeTab, integrationName: activeTab, integrations, onGoToSettings: () => setActivePage('settings')})\n )\n ),\n h('div', {className:'col-span-12 lg:col-span-4 flex flex-col gap-md'},\n h('button', {\n onClick: () => openDrawer({name:'New Prospect', company:'', role:'general outreach', signal:'manual draft'}),\n className:'glass-panel rounded-xl p-lg flex items-center justify-between hover:border-primary/40 transition-all cursor-pointer'\n },\n h('div', {className:'flex items-center gap-3'},\n h(Icon, {name:'outgoing_mail', size:24, className:'text-secondary'}),\n h('div', {className:'text-left'},\n h('div', {className:'text-[14px] font-bold'}, 'Compose Outreach'),\n h('div', {className:'text-[11px] text-text-muted'}, 'AI-drafted LinkedIn + Email')\n )\n ),\n h(Icon, {name:'arrow_forward', size:18, className:'text-on-surface-variant'})\n )\n ),\n\n h('div', {className:'col-span-12'}, h(AILeadRanking, {integrations, onOpenChat: openDrawer}))\n // Team Hub moved to its own Workspace page per user spec.\n ),\n\n // -- Outreach Drafts slide-out drawer -------------------------------\n drawerProspect && h(OutreachDrawer, {\n open: !!drawerProspect, prospect: drawerProspect,\n onClose: () => setDrawerProspect(null),\n onSend: (payload) => {\n showToast && showToast('Outreach queued: ' + payload.type, 'success');\n // Also pipe through the legacy openOutreach so the chat panel sees it.\n openOutreach && openOutreach(drawerProspect);\n setDrawerProspect(null);\n }\n })\n );\n}\n\nexport function SystemStatusBar() {\n const {Icon} = N();\n const [health, setHealth] = useState({ok: true, ts: null, version: null});\n useEffect(() => {\n let mounted = true;\n const ping = async () => {\n try {\n const r = await fetch('/api/health');\n const d = await r.json();\n if (mounted) setHealth({ok: d.status === 'ok', ts: d.timestamp, version: d.version || null});\n } catch { if (mounted) setHealth({ok: false, ts: null, version: null}); }\n };\n ping();\n const iv = setInterval(ping, 30000);\n return () => { mounted = false; clearInterval(iv); };\n }, []);\n\n return h('footer', {className:'h-8 bg-surface-container-lowest border-t border-border-subtle flex items-center justify-between px-lg z-40 flex-shrink-0'},\n h('div', {className:'flex items-center gap-lg'},\n h('div', {className:'flex items-center gap-1.5'},\n h('div', {className:'w-2 h-2 rounded-full pulse-dot ' + (health.ok ? 'bg-secondary' : 'bg-error')}),\n h('span', {className:'font-mono-data text-[10px] text-on-surface-variant uppercase tracking-widest'},\n health.ok ? 'System Operational' : 'System Degraded'\n )\n ),\n h('div', {className:'hidden sm:flex items-center gap-1.5'},\n h(Icon, {name:'dns', size:14, className:'text-on-surface-variant'}),\n h('span', {className:'font-mono-data text-[10px] text-on-surface-variant'}, 'VAL.TOWN')\n )\n ),\n h('div', {className:'flex items-center gap-md'},\n h('span', {className:'font-mono-data text-[10px] text-on-surface-variant'}, health.version ? ('v' + health.version) : '—')\n )\n );\n}\n `;\n}\n",[322],"fa39a554-5b1a-11f1-b807-ee650bb23af1","frontend_objectives.ts","a38a02d0-589f-11f1-be5e-ee650bb23af1",474,["D",1780030685043],"// ObjectivesPage — OKR command surface (Phase 2 / Step 1).\n// Served at /api/app-objectives and dynamically imported by frontend_js.ts.\n//\n// Shared deps come from window.__nexus (set by frontend_js.ts on boot):\n// Icon, Btn, Input, MetricCard, PageHeader, SectionHeader, Toggle, Spinner.\n//\n// Backend endpoints used (all return JSON):\n// GET /api/okrs?workspace=&quarter=\n// POST /api/okrs\n// PUT /api/okrs/:id\n// DELETE /api/okrs/:id\n// POST /api/okrs/:id/key-results\n// PUT /api/key-results/:id\n// GET /api/okrs/dashboard\n\nexport function getObjectivesJS(): string {\n return `\nimport React, { useState, useEffect, useRef } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// Google-OKR scoring: >=70 on track (green), 40-69 at risk (amber/tertiary), <40 off track (red).\nconst PROGRESS_TONE = (p) => p >= 70 ? 'secondary' : p >= 40 ? 'tertiary' : 'error';\nconst PROGRESS_HEX = (p) => p >= 70 ? '#4edea3' : p >= 40 ? '#d0bcff' : '#ffb4ab';\nconst STATUS_LABEL = (p) => p >= 70 ? 'On Track' : p >= 40 ? 'At Risk' : 'Off Track';\n\nconst QUARTERS = ['Q1-2026','Q2-2026','Q3-2026','Q4-2026'];\nconst WORKSPACES = ['all','marketing','sales','growth','company'];\n\nconst currentQuarter = () => {\n const now = new Date();\n const q = Math.floor(now.getMonth() / 3) + 1;\n return 'Q' + q + '-' + now.getFullYear();\n};\n\nconst fmtNum = (v, unit) => {\n if (v == null || v === '' || Number.isNaN(Number(v))) return '—';\n const n = Number(v);\n const abs = Math.abs(n);\n let body;\n if (abs >= 1e9) body = (n/1e9).toFixed(1) + 'B';\n else if (abs >= 1e6) body = (n/1e6).toFixed(1) + 'M';\n else if (abs >= 1e3) body = (n/1e3).toFixed(1) + 'k';\n else if (Number.isInteger(n)) body = String(n);\n else body = n.toFixed(2);\n return body + (unit ? ' ' + unit : '');\n};\n\n// ─── ProgressRing ───────────────────────────────────────────────────────────\n// CSS conic-gradient ring — no chart lib. Centered numeric % label.\nfunction ProgressRing({progress, size = 64}) {\n const p = Math.max(0, Math.min(100, Math.round(progress || 0)));\n const hex = PROGRESS_HEX(p);\n const ringSize = size;\n const holeSize = Math.round(size * 0.72);\n return h('div', {\n className:'relative flex items-center justify-center flex-shrink-0',\n style:{\n width: ringSize, height: ringSize, borderRadius:'50%',\n background: 'conic-gradient(' + hex + ' ' + p + '%, rgba(255,255,255,0.06) 0)'\n }\n },\n h('div', {\n className:'flex items-center justify-center bg-surface-container-lowest border border-border-subtle',\n style:{\n width: holeSize, height: holeSize, borderRadius:'50%',\n }\n },\n h('span', {\n className:'text-[12px] font-extrabold tracking-tight',\n style:{color: hex, fontVariantNumeric:'tabular-nums'}\n }, p + '%')\n )\n );\n}\n\n// ─── ProgressBar (KR row) ───────────────────────────────────────────────────\nfunction ProgressBar({progress}) {\n const p = Math.max(0, Math.min(100, Math.round(progress || 0)));\n const hex = PROGRESS_HEX(p);\n return h('div', {className:'h-1.5 w-full bg-surface-container rounded-full overflow-hidden'},\n h('div', {className:'h-full transition-all', style:{width: p + '%', background: hex}})\n );\n}\n\n// ─── StatusPill ─────────────────────────────────────────────────────────────\nfunction StatusPill({progress}) {\n const tone = PROGRESS_TONE(progress);\n const cls = tone === 'secondary'\n ? 'bg-secondary/10 text-secondary border-secondary/30'\n : tone === 'tertiary'\n ? 'bg-tertiary/10 text-tertiary border-tertiary/30'\n : 'bg-error/10 text-error border-error/30';\n return h('span', {\n className:'inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border ' + cls\n }, STATUS_LABEL(progress));\n}\n\n// ─── KRRow ──────────────────────────────────────────────────────────────────\nfunction KRRow({kr, onConfidence, onCurrent}) {\n const {Icon} = N();\n const [conf, setConf] = useState(kr.confidence != null ? Number(kr.confidence) : 5);\n const [current, setCurrent] = useState(kr.current_value != null ? kr.current_value : '');\n const confTimer = useRef(null);\n const currentTimer = useRef(null);\n\n useEffect(() => { setConf(kr.confidence != null ? Number(kr.confidence) : 5); }, [kr.confidence]);\n useEffect(() => { setCurrent(kr.current_value != null ? kr.current_value : ''); }, [kr.current_value]);\n\n const progress = (() => {\n if (typeof kr.progress === 'number') return kr.progress;\n const sv = Number(kr.start_value) || 0;\n const cv = Number(kr.current_value);\n const tv = Number(kr.target_value);\n if (!Number.isFinite(cv) || !Number.isFinite(tv) || tv === sv) return 0;\n return Math.max(0, Math.min(100, ((cv - sv) / (tv - sv)) * 100));\n })();\n\n const tone = PROGRESS_TONE(progress);\n const toneText = tone === 'secondary' ? 'text-secondary' : tone === 'tertiary' ? 'text-tertiary' : 'text-error';\n const autoSync = !!kr.metric_source;\n\n const onConfSlide = (v) => {\n setConf(v);\n clearTimeout(confTimer.current);\n confTimer.current = setTimeout(() => onConfidence && onConfidence(v), 400);\n };\n const onCurrentChange = (v) => {\n setCurrent(v);\n clearTimeout(currentTimer.current);\n currentTimer.current = setTimeout(() => onCurrent && onCurrent(v), 600);\n };\n\n return h('div', {className:'p-3 rounded-lg bg-surface-container-lowest border border-border-subtle space-y-2'},\n // Row 1: title + status text + auto-sync badge\n h('div', {className:'flex items-start justify-between gap-2'},\n h('div', {className:'min-w-0 flex-1'},\n h('p', {className:'text-[12px] font-semibold text-on-surface leading-tight truncate'}, kr.title || 'Untitled KR'),\n kr.metric_source && h('p', {className:'text-[10px] text-text-muted mt-0.5 font-mono-data truncate'},\n kr.metric_source + (kr.metric_key ? ' · ' + kr.metric_key : '')\n )\n ),\n autoSync && h('span', {\n className:'inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-widest text-primary bg-primary/10 border border-primary/20 px-1.5 py-0.5 rounded flex-shrink-0',\n title:'Auto-synced from integration'\n }, h(Icon, {name:'sync', size:10}), 'AUTO')\n ),\n\n // Row 2: progress bar\n h(ProgressBar, {progress}),\n\n // Row 3: current / target + unit\n h('div', {className:'flex items-center justify-between text-[11px] font-mono-data'},\n h('div', {className:'flex items-center gap-1.5 min-w-0'},\n autoSync\n ? h('span', {className: toneText + ' font-bold', style:{fontVariantNumeric:'tabular-nums'}},\n fmtNum(kr.current_value, kr.unit))\n : h('input', {\n type:'text', value: current,\n onChange: e => onCurrentChange(e.target.value.replace(/[^0-9.\\\\-]/g,'')),\n placeholder:'0',\n className:'w-20 bg-transparent border-b border-border-subtle ' + toneText + ' font-bold outline-none focus:border-primary text-right px-1'\n }),\n h('span', {className:'text-text-muted'}, '/'),\n h('span', {className:'text-on-surface-variant'}, fmtNum(kr.target_value, kr.unit))\n ),\n h('span', {className: toneText + ' font-bold', style:{fontVariantNumeric:'tabular-nums'}},\n Math.round(progress) + '%'\n )\n ),\n\n // Row 4: confidence slider\n h('div', {className:'pt-1.5 border-t border-border-subtle/50'},\n h('div', {className:'flex items-center justify-between mb-1'},\n h('span', {className:'text-[10px] uppercase tracking-widest text-text-muted'}, 'Confidence'),\n h('span', {\n className:'text-[11px] font-bold font-mono-data',\n style:{color: conf >= 7 ? '#4edea3' : conf >= 4 ? '#d0bcff' : '#ffb4ab', fontVariantNumeric:'tabular-nums'}\n }, conf + '/10')\n ),\n h('input', {\n type:'range', min:0, max:10, step:1, value: conf,\n onChange: e => onConfSlide(parseInt(e.target.value, 10)),\n className:'w-full accent-primary bg-surface-variant rounded-lg h-1.5 appearance-none cursor-pointer'\n })\n )\n );\n}\n\n// ─── KRForm ─────────────────────────────────────────────────────────────────\nfunction KRForm({onSave, onCancel}) {\n const {Icon, Btn, Input, Spinner} = N();\n const [draft, setDraft] = useState({\n title:'', metric_source:'', metric_key:'', start_value:'',\n current_value:'', target_value:'', unit:'', confidence:5\n });\n const [busy, setBusy] = useState(false);\n const submit = async () => {\n if (!draft.title.trim() || draft.target_value === '') return;\n setBusy(true);\n try {\n await onSave({\n title: draft.title.trim(),\n metric_source: draft.metric_source || null,\n metric_key: draft.metric_key || null,\n start_value: draft.start_value !== '' ? Number(draft.start_value) : 0,\n current_value: draft.current_value !== '' ? Number(draft.current_value) : 0,\n target_value: Number(draft.target_value),\n unit: draft.unit || null,\n confidence: Number(draft.confidence) || 5,\n });\n } finally { setBusy(false); }\n };\n return h('div', {className:'p-3 rounded-lg border border-primary/30 bg-primary/5 space-y-2.5'},\n h(Input, {label:'KR title', value: draft.title, onChange: v => setDraft(d => ({...d, title: v})), placeholder:'Grow MQLs to 500/mo'}),\n h('div', {className:'grid grid-cols-2 sm:grid-cols-4 gap-2'},\n h(Input, {label:'Start', type:'text', value: String(draft.start_value),\n onChange: v => setDraft(d => ({...d, start_value: v.replace(/[^0-9.\\\\-]/g,'')})), placeholder:'0'}),\n h(Input, {label:'Current', type:'text', value: String(draft.current_value),\n onChange: v => setDraft(d => ({...d, current_value: v.replace(/[^0-9.\\\\-]/g,'')})), placeholder:'0'}),\n h(Input, {label:'Target', type:'text', value: String(draft.target_value),\n onChange: v => setDraft(d => ({...d, target_value: v.replace(/[^0-9.\\\\-]/g,'')})), placeholder:'500'}),\n h(Input, {label:'Unit', value: draft.unit, onChange: v => setDraft(d => ({...d, unit: v})), placeholder:'leads'})\n ),\n h('div', {className:'grid grid-cols-2 gap-2'},\n h(Input, {label:'Metric source (optional)', value: draft.metric_source,\n onChange: v => setDraft(d => ({...d, metric_source: v})), placeholder:'ga4 / hubspot / stripe'}),\n h(Input, {label:'Metric key (optional)', value: draft.metric_key,\n onChange: v => setDraft(d => ({...d, metric_key: v})), placeholder:'mql_count'})\n ),\n h('div', {className:'flex justify-end gap-2 pt-1'},\n h(Btn, {onClick: onCancel, variant:'ghost', size:'sm', disabled: busy}, 'Cancel'),\n h(Btn, {onClick: submit, variant:'primary', size:'sm', disabled: busy || !draft.title.trim() || draft.target_value === ''},\n busy ? h(Spinner, {size:13}) : h(Icon, {name:'add', size:14}),\n busy ? 'Adding…' : 'Add KR'\n )\n )\n );\n}\n\n// ─── ObjectiveCard ──────────────────────────────────────────────────────────\nfunction ObjectiveCard({okr, onUpdate, onDelete, onAddKR, onUpdateKR}) {\n const {Icon, Btn} = N();\n const [showAll, setShowAll] = useState(false);\n const [addingKR, setAddingKR] = useState(false);\n const [editing, setEditing] = useState(false);\n const [editDraft, setEditDraft] = useState({title: okr.title || '', description: okr.description || '', owner: okr.owner || ''});\n\n useEffect(() => {\n setEditDraft({title: okr.title || '', description: okr.description || '', owner: okr.owner || ''});\n }, [okr.id, okr.title, okr.description, okr.owner]);\n\n const krs = Array.isArray(okr.key_results) ? okr.key_results : [];\n const visibleKRs = showAll ? krs : krs.slice(0, 3);\n const progress = (() => {\n if (typeof okr.progress === 'number') return okr.progress;\n if (krs.length === 0) return 0;\n const sum = krs.reduce((acc, k) => {\n if (typeof k.progress === 'number') return acc + k.progress;\n const sv = Number(k.start_value) || 0;\n const cv = Number(k.current_value);\n const tv = Number(k.target_value);\n if (!Number.isFinite(cv) || !Number.isFinite(tv) || tv === sv) return acc;\n return acc + Math.max(0, Math.min(100, ((cv - sv) / (tv - sv)) * 100));\n }, 0);\n return sum / krs.length;\n })();\n\n const saveEdit = async () => {\n await onUpdate({title: editDraft.title.trim(), description: editDraft.description.trim(), owner: editDraft.owner.trim() || null});\n setEditing(false);\n };\n\n return h('div', {className:'glass-panel rounded-xl p-lg space-y-md group transition-all hover:border-primary/30'},\n // Header: ring + title/desc + status + actions\n h('div', {className:'flex items-start gap-md'},\n h(ProgressRing, {progress, size: 68}),\n h('div', {className:'flex-1 min-w-0'},\n editing\n ? h('div', {className:'space-y-2'},\n h('input', {\n value: editDraft.title,\n onChange: e => setEditDraft(d => ({...d, title: e.target.value})),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[16px] font-bold text-on-surface outline-none focus:border-primary'\n }),\n h('textarea', {\n value: editDraft.description, rows:2,\n onChange: e => setEditDraft(d => ({...d, description: e.target.value})),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[12px] text-on-surface-variant outline-none focus:border-primary resize-none',\n style:{fontFamily:'inherit'}\n }),\n h('input', {\n value: editDraft.owner, placeholder:'Owner',\n onChange: e => setEditDraft(d => ({...d, owner: e.target.value})),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[12px] text-on-surface-variant outline-none focus:border-primary'\n })\n )\n : h(React.Fragment, null,\n h('h3', {className:'text-[16px] sm:text-[18px] font-extrabold text-on-surface leading-tight tracking-tight'}, okr.title || 'Untitled Objective'),\n okr.description && h('p', {className:'text-[12px] text-text-muted leading-relaxed mt-1'}, okr.description)\n ),\n h('div', {className:'flex items-center gap-1.5 mt-2 flex-wrap'},\n h(StatusPill, {progress}),\n okr.workspace && h('span', {className:'inline-flex items-center text-[10px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border border-border-subtle bg-surface-container/40 text-text-muted'},\n okr.workspace),\n okr.owner && h('span', {className:'inline-flex items-center gap-1 text-[10px] text-text-muted'},\n h(Icon, {name:'person', size:11}), okr.owner\n ),\n okr.quarter && h('span', {className:'text-[10px] font-mono-data text-text-muted'}, '· ' + okr.quarter)\n )\n ),\n h('div', {className:'flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0'},\n editing\n ? h(React.Fragment, null,\n h('button', {\n onClick: saveEdit,\n className:'p-1.5 rounded text-secondary hover:bg-secondary/10 transition-colors',\n title:'Save'\n }, h(Icon, {name:'check', size:16})),\n h('button', {\n onClick: () => setEditing(false),\n className:'p-1.5 rounded text-text-muted hover:bg-surface-variant transition-colors',\n title:'Cancel'\n }, h(Icon, {name:'close', size:16}))\n )\n : h(React.Fragment, null,\n h('button', {\n onClick: () => setEditing(true),\n className:'p-1.5 rounded text-text-muted hover:text-primary hover:bg-primary/10 transition-colors',\n title:'Edit'\n }, h(Icon, {name:'edit', size:16})),\n h('button', {\n onClick: onDelete,\n className:'p-1.5 rounded text-text-muted hover:text-error hover:bg-error/10 transition-colors',\n title:'Delete'\n }, h(Icon, {name:'delete', size:16}))\n )\n )\n ),\n\n // KR list\n krs.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic text-center py-3 border-t border-border-subtle/50'},\n 'No key results yet — add the measurable outcomes that prove this objective.')\n : h('div', {className:'space-y-2 pt-2 border-t border-border-subtle/50'},\n visibleKRs.map(kr => h(KRRow, {\n key: kr.id,\n kr,\n onConfidence: (v) => onUpdateKR(kr.id, {confidence: v}),\n onCurrent: (v) => onUpdateKR(kr.id, {current_value: v === '' ? null : Number(v)}),\n })),\n krs.length > 3 && h('button', {\n onClick: () => setShowAll(s => !s),\n className:'text-[11px] font-bold uppercase tracking-widest text-primary hover:underline'\n }, showAll ? 'Show top 3 ↑' : ('Show all ' + krs.length + ' KRs ↓'))\n ),\n\n // Add KR\n addingKR\n ? h(KRForm, {\n onSave: async (payload) => { await onAddKR(payload); setAddingKR(false); },\n onCancel: () => setAddingKR(false)\n })\n : h('button', {\n onClick: () => setAddingKR(true),\n className:'w-full flex items-center justify-center gap-1.5 py-2 rounded-lg border border-dashed border-border-subtle text-[11px] font-bold uppercase tracking-widest text-text-muted hover:text-primary hover:border-primary/40 transition-all'\n }, h(Icon, {name:'add', size:14}), 'Add Key Result')\n );\n}\n\n// ─── ObjectiveForm (new objective inline) ───────────────────────────────────\nfunction ObjectiveForm({quarter, workspace, onSave, onCancel}) {\n const {Icon, Btn, Input, Spinner} = N();\n const [draft, setDraft] = useState({title:'', description:'', owner:'', quarter: quarter || currentQuarter(), workspace: workspace === 'all' ? 'company' : (workspace || 'company')});\n const [busy, setBusy] = useState(false);\n const submit = async () => {\n if (!draft.title.trim()) return;\n setBusy(true);\n try {\n await onSave({\n title: draft.title.trim(),\n description: draft.description.trim() || null,\n quarter: draft.quarter,\n workspace: draft.workspace,\n owner: draft.owner.trim() || null,\n });\n } finally { setBusy(false); }\n };\n return h('section', {className:'glass-panel rounded-xl p-lg space-y-md border border-primary/30'},\n h('div', {className:'flex items-center justify-between'},\n h('h3', {className:'text-[16px] font-bold text-on-surface tracking-tight flex items-center gap-2'},\n h(Icon, {name:'flag', size:18, className:'text-primary'}), 'New Objective'),\n h('button', {onClick: onCancel, className:'text-text-muted hover:text-on-surface'},\n h(Icon, {name:'close', size:18}))\n ),\n h(Input, {label:'Objective title', value: draft.title, onChange: v => setDraft(d => ({...d, title: v})),\n placeholder:'Become the default AI ops layer for SAP EWM teams'}),\n h('div', null,\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast block mb-1'}, 'Description'),\n h('textarea', {\n value: draft.description, rows: 3,\n onChange: e => setDraft(d => ({...d, description: e.target.value})),\n placeholder:'The aspirational outcome — why this matters for the quarter.',\n className:'w-full p-2.5 bg-surface-container-lowest border border-border-subtle rounded-lg text-[13px] text-on-surface outline-none focus:border-primary transition-all resize-none',\n style:{fontFamily:'inherit'}\n })\n ),\n h('div', {className:'grid grid-cols-1 sm:grid-cols-3 gap-md'},\n h('div', null,\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast block mb-1'}, 'Quarter'),\n h('select', {\n value: draft.quarter, onChange: e => setDraft(d => ({...d, quarter: e.target.value})),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] font-mono-data text-on-surface focus:border-primary focus:outline-none'\n }, QUARTERS.map(q => h('option', {key:q, value:q}, q)))\n ),\n h('div', null,\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast block mb-1'}, 'Workspace'),\n h('select', {\n value: draft.workspace, onChange: e => setDraft(d => ({...d, workspace: e.target.value})),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none capitalize'\n }, WORKSPACES.filter(w => w !== 'all').map(w => h('option', {key:w, value:w}, w)))\n ),\n h(Input, {label:'Owner', value: draft.owner, onChange: v => setDraft(d => ({...d, owner: v})), placeholder:'Founder / team lead'})\n ),\n h('div', {className:'flex justify-end gap-2 pt-1'},\n h(Btn, {onClick: onCancel, variant:'ghost', size:'sm', disabled: busy}, 'Cancel'),\n h(Btn, {onClick: submit, variant:'primary', size:'sm', disabled: busy || !draft.title.trim()},\n busy ? h(Spinner, {size:13}) : h(Icon, {name:'flag', size:14}),\n busy ? 'Creating…' : 'Create Objective'\n )\n )\n );\n}\n\n// ─── ObjectivesPage ─────────────────────────────────────────────────────────\nexport function ObjectivesPage({setActivePage}) {\n const {Icon, Btn, MetricCard, PageHeader, Spinner} = N();\n const [quarter, setQuarter] = useState(currentQuarter());\n const [workspace, setWorkspace] = useState('all');\n const [okrs, setOkrs] = useState([]);\n const [dash, setDash] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [creating, setCreating] = useState(false);\n\n const loadOkrs = async () => {\n setLoading(true); setError(null);\n try {\n const qs = new URLSearchParams();\n if (quarter) qs.set('quarter', quarter);\n if (workspace && workspace !== 'all') qs.set('workspace', workspace);\n const r = await fetch('/api/okrs?' + qs.toString());\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const d = await r.json();\n setOkrs(Array.isArray(d) ? d : []);\n } catch (e) { setError(e.message); }\n finally { setLoading(false); }\n };\n\n const loadDash = async () => {\n try {\n const r = await fetch('/api/okrs/dashboard');\n if (!r.ok) return;\n setDash(await r.json());\n } catch {}\n };\n\n useEffect(() => { loadOkrs(); }, [quarter, workspace]);\n useEffect(() => { loadDash(); }, [okrs.length]);\n\n const createObjective = async (payload) => {\n try {\n const r = await fetch('/api/okrs', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(payload)\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const created = await r.json();\n // Optimistic: only prepend if it matches active filters.\n const matchesQ = !quarter || created.quarter === quarter;\n const matchesW = !workspace || workspace === 'all' || created.workspace === workspace;\n if (matchesQ && matchesW) {\n setOkrs(prev => [created, ...prev]);\n } else {\n // Filter mismatch — jump to the created OKR's quarter/workspace.\n if (created.quarter) setQuarter(created.quarter);\n if (created.workspace) setWorkspace(created.workspace);\n }\n setCreating(false);\n loadDash();\n } catch (e) { alert('Failed to create objective: ' + e.message); }\n };\n\n const updateObjective = async (id, patch) => {\n setOkrs(prev => prev.map(o => o.id === id ? {...o, ...patch} : o));\n try {\n const r = await fetch('/api/okrs/' + id, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(patch)\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const updated = await r.json();\n setOkrs(prev => prev.map(o => o.id === id ? updated : o));\n } catch (e) { loadOkrs(); }\n };\n\n const deleteObjective = async (id) => {\n if (!confirm('Delete this objective and all its key results? This cannot be undone.')) return;\n setOkrs(prev => prev.filter(o => o.id !== id));\n try {\n await fetch('/api/okrs/' + id, {method:'DELETE'});\n loadDash();\n } catch (e) { loadOkrs(); }\n };\n\n const addKR = async (okrId, payload) => {\n try {\n const r = await fetch('/api/okrs/' + okrId + '/key-results', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(payload)\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const created = await r.json();\n setOkrs(prev => prev.map(o => o.id === okrId\n ? {...o, key_results: [...(o.key_results || []), created]}\n : o));\n loadDash();\n } catch (e) { alert('Failed to add KR: ' + e.message); }\n };\n\n const updateKR = async (okrId, krId, patch) => {\n setOkrs(prev => prev.map(o => o.id === okrId\n ? {...o, key_results: (o.key_results || []).map(k => k.id === krId ? {...k, ...patch} : k)}\n : o));\n try {\n const r = await fetch('/api/key-results/' + krId, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(patch)\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const updated = await r.json();\n setOkrs(prev => prev.map(o => o.id === okrId\n ? {...o, key_results: (o.key_results || []).map(k => k.id === krId ? updated : k)}\n : o));\n loadDash();\n } catch (e) { loadOkrs(); }\n };\n\n return h('div', {className:'p-lg lg:p-xl space-y-xl max-w-7xl mx-auto pb-32'},\n h(PageHeader, {\n title:'Objectives',\n subtitle:'OKRs aligned to the North Star — auto-synced from your funnel data.',\n action: h('div', {className:'flex items-center gap-2'},\n // Funnel→OKR sync now happens on the cron + on demand (GET no longer writes on read).\n h('button', {\n onClick: async () => {\n try {\n await fetch('/api/okrs/sync', {method:'POST'});\n loadOkrs(); loadDash();\n } catch (e) {}\n },\n title:'Refresh KR progress from live funnel data',\n className:'inline-flex items-center gap-1 text-[11px] font-semibold uppercase tracking-widest text-text-muted hover:text-on-surface px-2.5 py-1.5 rounded-md border border-border-subtle hover:border-primary/40 transition-colors'\n },\n h(Icon, {name:'sync', size:13}), 'Sync'\n ),\n // P3 wire: CSV export (token-bearing download — see __nexusDownload)\n h('button', {\n onClick: () => window.__nexusDownload('/api/export/okrs'),\n className:'inline-flex items-center gap-1 text-[11px] font-semibold uppercase tracking-widest text-text-muted hover:text-on-surface px-2.5 py-1.5 rounded-md border border-border-subtle hover:border-primary/40 transition-colors'\n },\n h(Icon, {name:'download', size:13}), 'Export CSV'\n ),\n h(Btn, {onClick: () => setCreating(true), variant:'primary', size:'sm', disabled: creating},\n h(Icon, {name:'add', size:14}), 'New Objective'\n )\n )\n }),\n\n // ─── Dashboard summary bento ──────────────────────────────────────────\n h('div', {className:'grid grid-cols-2 lg:grid-cols-5 gap-md'},\n h(MetricCard, {\n icon:'flag', color:'#c0c1ff', title:'Total Objectives',\n value: dash ? String(dash.total) : '—',\n subtitle: dash ? (dash.quarter || quarter) : 'loading…'\n }),\n h(MetricCard, {\n icon:'trending_up', color:'#4edea3', title:'On Track',\n value: dash ? String(dash.on_track) : '—',\n subtitle:'progress ≥ 70%'\n }),\n h(MetricCard, {\n icon:'warning', color:'#d0bcff', title:'At Risk',\n value: dash ? String(dash.at_risk) : '—',\n subtitle:'40-69% progress'\n }),\n h(MetricCard, {\n icon:'error', color:'#ffb4ab', title:'Off Track',\n value: dash ? String(dash.off_track) : '—',\n subtitle:'below 40%'\n }),\n h(MetricCard, {\n icon:'speed', color:'#c0c1ff', title:'Avg KR Progress',\n value: dash ? (Math.round(dash.avg_progress || 0) + '%') : '—',\n subtitle: dash && dash.quarter ? ('quarter ' + dash.quarter) : 'rolling'\n })\n ),\n\n // ─── Filter bar ───────────────────────────────────────────────────────\n h('div', {className:'glass-panel rounded-xl p-md flex items-center justify-between flex-wrap gap-3'},\n h('div', {className:'flex items-center gap-1 flex-wrap'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mr-2'}, 'Quarter'),\n QUARTERS.map(q => h('button', {\n key: q, onClick: () => setQuarter(q), type:'button',\n className:'px-2.5 py-1 rounded-md text-[11px] font-bold uppercase tracking-wider transition-all ' +\n (quarter === q ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface bg-surface-container-lowest border border-border-subtle')\n }, q))\n ),\n h('div', {className:'flex items-center gap-2'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Workspace'),\n h('select', {\n value: workspace, onChange: e => setWorkspace(e.target.value),\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[12px] text-on-surface capitalize focus:border-primary focus:outline-none'\n }, WORKSPACES.map(w => h('option', {key: w, value: w}, w === 'all' ? 'All workspaces' : w)))\n )\n ),\n\n // ─── New-objective inline form ────────────────────────────────────────\n creating && h(ObjectiveForm, {\n quarter, workspace,\n onSave: createObjective,\n onCancel: () => setCreating(false)\n }),\n\n // ─── Loading / error / empty / grid ───────────────────────────────────\n loading && okrs.length === 0\n ? h('div', {className:'flex items-center justify-center py-16 text-text-muted gap-2'},\n h(Spinner, {size:18}), h('span', {className:'text-[13px]'}, 'Loading objectives…')\n )\n : error\n ? h('div', {className:'glass-panel rounded-xl p-lg text-error text-[13px] flex items-center gap-2'},\n h(Icon, {name:'error', size:16}), 'Failed to load objectives: ' + error\n )\n : okrs.length === 0\n ? h('div', {className:'glass-panel rounded-xl p-xl text-center space-y-3'},\n h('div', {className:'w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto'},\n h(Icon, {name:'flag', size:28, className:'text-primary'})\n ),\n h('h3', {className:'text-[16px] font-bold text-on-surface'},\n 'No objectives for ' + quarter + (workspace !== 'all' ? ' · ' + workspace : '')\n ),\n h('p', {className:'text-[13px] text-text-muted max-w-md mx-auto'},\n 'Set the first one to align the team. Each objective gets 2–5 key results — measurable, time-boxed, and ideally auto-synced from your integrations.'\n ),\n h('div', {className:'flex justify-center gap-2 pt-2'},\n h(Btn, {onClick: () => setCreating(true), variant:'primary', size:'sm'},\n h(Icon, {name:'add', size:14}), 'Create first objective'\n ),\n h(Btn, {onClick: () => setActivePage && setActivePage('settings'), variant:'ghost', size:'sm'},\n h(Icon, {name:'cable', size:14}), 'Connect data sources'\n )\n )\n )\n : h('div', {className:'grid grid-cols-1 xl:grid-cols-2 gap-lg'},\n okrs.map(okr => h(ObjectiveCard, {\n key: okr.id,\n okr,\n onUpdate: (patch) => updateObjective(okr.id, patch),\n onDelete: () => deleteObjective(okr.id),\n onAddKR: (payload) => addKR(okr.id, payload),\n onUpdateKR: (krId, patch) => updateKR(okr.id, krId, patch),\n }))\n )\n );\n}\n\n// ─── OKRBadge (Sidebar nav) ─────────────────────────────────────────────────\n// Compact at-risk/off-track counter for the Objectives nav row.\nexport function OKRBadge({onClick}) {\n const [stats, setStats] = useState(null);\n useEffect(() => {\n let mounted = true;\n const load = async () => {\n try {\n const r = await fetch('/api/okrs/dashboard');\n if (!r.ok) return;\n const d = await r.json();\n if (mounted) setStats(d);\n } catch {}\n };\n load();\n const ms = (window.__nexus && window.__nexus.autoSyncMs) || 60000;\n const iv = setInterval(load, ms);\n return () => { mounted = false; clearInterval(iv); };\n }, []);\n if (!stats || !stats.total) return null;\n const danger = (stats.off_track || 0) + (stats.at_risk || 0);\n if (!danger) {\n return h('span', {\n onClick,\n className:'inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-widest bg-secondary/15 text-secondary border border-secondary/30 cursor-pointer',\n title: stats.total + ' objectives · all on track'\n }, stats.total, h('span', {className:'opacity-70'}, 'OKR'));\n }\n const critical = (stats.off_track || 0) > 0;\n return h('span', {\n onClick,\n className:'inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-widest cursor-pointer ' +\n (critical ? 'bg-error/15 text-error border border-error/30 pulse-dot' : 'bg-tertiary/15 text-tertiary border border-tertiary/30'),\n title: danger + ' KR' + (danger === 1 ? '' : 's') + ' needing attention'\n }, danger, h('span', {className:'opacity-70'}, '!'));\n}\n\nexport { ObjectivesPage as default };\n `;\n}\n",[330],"0b356f66-5f15-11f1-97b6-1607ee4eb77e","frontend_marketing3.ts","0b357060-5f15-11f1-97b6-1607ee4eb77e",1008,["D",1780467941202],"// frontend_marketing3.ts — Wave 2 Marketing operating-surface components.\n// Served at /api/app-marketing3 (router.ts jsModules), lazy-imported by frontend_pages.ts\n// (MarketingWorkspace). Split out of frontend_marketing2.ts to keep each val.town source\n// file under the 80 000-byte source-file limit. Emits an ES module that EXPORTS named React\n// components consumed as Marketing sub-tabs / panels — all REAL-DATA, honest empty states,\n// pixel-faithful to the same CRM visual language as Wave 1:\n//\n// FormsView — /api/marketing/forms CRUD + per-form submissions (public submit endpoint).\n// LandingView — /api/marketing/landing builder + publish to public /api/marketing/p/:slug.\n// SegmentsView — /api/marketing/segments rule builder + live preview (/segments/preview).\n// ListsView — /api/marketing/lists static/dynamic lists + members (materialize from segment).\n// HandoffView — /api/marketing/handoff/mql-ready + /promote (MQL -> CRM deal).\n//\n// All endpoints are tenant-scoped JSON (see api/marketing.ts + api/marketing_routes.ts); the\n// public form-submit and landing-page routes resolve the tenant from the stored record, never\n// from the session. Shared deps from window.__nexus: Icon, Btn, Spinner.\nexport function getMarketing3JS(): string {\n return `\nimport React, { useState, useEffect, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// ─── Shared helpers (mirrored from frontend_marketing2.ts visual language) ──────\nconst fmtNum = (n) => {\n const v = Number(n) || 0;\n if (Math.abs(v) >= 1000000) return (v/1000000).toFixed(1).replace(/\\\\.0$/,'') + 'M';\n if (Math.abs(v) >= 1000) return (v/1000).toFixed(1).replace(/\\\\.0$/,'') + 'K';\n return Number.isInteger(v) ? String(v) : v.toFixed(1);\n};\nconst fmtRel = (iso) => {\n if (!iso) return '';\n const ms = Date.now() - new Date(iso).getTime();\n if (isNaN(ms)) return '';\n if (ms < 3600000) return Math.max(1, Math.floor(ms/60000)) + 'm ago';\n if (ms < 86400000) return Math.floor(ms/3600000) + 'h ago';\n if (ms < 2592000000) return Math.floor(ms/86400000) + 'd ago';\n return new Date(iso).toLocaleDateString('en-US', {month:'short', day:'numeric'});\n};\nconst colorFromName = (name) => {\n const colors = ['#c0c1ff','#4edea3','#d0bcff','#8083ff','#6ffbbe','#a078ff','#e1e0ff','#494bd6'];\n const sum = (name||'').split('').reduce((a,c) => a + c.charCodeAt(0), 0);\n return colors[sum % colors.length];\n};\nconst titleCase = (s) => String(s||'').replace(/[_-]/g,' ').replace(/\\\\b\\\\w/g, c => c.toUpperCase()).trim();\n\n// ─── Small shared UI atoms (mirrored from frontend_marketing2.ts) ──────────────\nfunction Section({title, icon, accent, right, children, sub}) {\n const { Icon } = N();\n return h('div', {className:'glass-panel rounded-xl p-lg space-y-4'},\n h('div', {className:'flex items-start justify-between gap-3'},\n h('div', {className:'min-w-0'},\n h('div', {className:'flex items-center gap-2'},\n icon && Icon && h(Icon, {name: icon, size:16, className: accent || 'text-primary'}),\n h('h3', {className:'text-[14px] font-bold text-on-surface'}, title)\n ),\n sub && h('div', {className:'text-[11px] text-text-muted mt-0.5'}, sub)\n ),\n right\n ),\n children\n );\n}\nconst EmptyNote = (msg) => h('div', {className:'text-[12px] text-text-muted italic py-2'}, msg);\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 7) FORMS VIEW (capture forms + submissions) /api/marketing/forms\n// ═══════════════════════════════════════════════════════════════════════════════\nconst FIELD_TYPES = ['text','email','tel','textarea','select','checkbox'];\nconst slugify = (s) => String(s||'').toLowerCase().trim().replace(/[^a-z0-9]+/g,'_').replace(/^_+|_+$/g,'') || 'field';\n\nfunction copyToClipboard(txt) { try { navigator.clipboard.writeText(txt); } catch (e) {} }\n\nexport function FormsView() {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [editing, setEditing] = useState(null); // form object or {} for new\n const [openId, setOpenId] = useState(null);\n const [copied, setCopied] = useState('');\n\n const load = useCallback(() => {\n fetch('/api/marketing/forms').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const save = async (p) => {\n const body = {name: p.name, fields: p.fields || [], success_message: p.success_message || '', asset_url: p.asset_url || '', redirect_url: p.redirect_url || ''};\n if (p.id) await fetch('/api/marketing/forms/' + p.id, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n else await fetch('/api/marketing/forms', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n setEditing(null); load();\n };\n const del = async (id) => {\n await fetch('/api/marketing/forms/' + id, {method:'DELETE'}).catch(()=>{});\n if (openId === id) setOpenId(null);\n load();\n };\n const copyLink = (id) => {\n const url = (typeof location !== 'undefined' ? location.origin : '') + '/api/marketing/forms/' + id + '/submit';\n copyToClipboard(url); setCopied(id); setTimeout(() => setCopied(''), 1400);\n };\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Capture forms', icon:'list_alt', accent:'text-primary',\n sub:'Lead-capture forms \\\\u00B7 embed on a landing page or POST submissions to convert anonymous traffic',\n right: h(Btn, {onClick: () => setEditing({name:'', fields:[], success_message:'', asset_url:'', redirect_url:''}), variant:'primary', size:'sm'}, h(Icon,{name:'add',size:14}), 'New form')},\n editing && h(FormBuilder, {form: editing, onCancel: () => setEditing(null), onSave: save}),\n rows === null\n ? h('div', {className:'flex items-center justify-center py-10'}, h(Spinner,{size:18}))\n : rows.length === 0\n ? EmptyNote('No forms yet \\\\u2014 click \\\\u201CNew form\\\\u201D to build a lead-capture form. Attach it to a landing page to start collecting submissions.')\n : h('div', {className:'space-y-2'},\n rows.map(form => {\n const fields = parseFields(form.fields);\n return h('div', {key:form.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg overflow-hidden'},\n h('div', {className:'flex items-center gap-2 px-3 py-2.5'},\n h('span', {className:'w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0', style:{background: colorFromName(form.name)+'22', color: colorFromName(form.name)}}, h(Icon,{name:'list_alt', size:16})),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[13px] font-bold text-on-surface truncate'}, form.name || '(untitled form)'),\n h('div', {className:'text-[10px] text-text-muted truncate'},\n fields.length + ' field' + (fields.length===1?'':'s') + ' \\\\u00B7 ' + (Number(form.submit_count)||0) + ' submission' + ((Number(form.submit_count)||0)===1?'':'s') + (form.updated_at ? ' \\\\u00B7 ' + fmtRel(form.updated_at) : ''))\n ),\n form.asset_url && h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border font-bold bg-tertiary/10 text-tertiary border-tertiary/30'}, 'lead magnet'),\n h('button', {onClick: () => copyLink(form.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Copy submit endpoint (test link)'}, h(Icon,{name: copied === form.id ? 'check' : 'content_copy', size:13})),\n h('button', {onClick: () => setOpenId(openId === form.id ? null : form.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Submissions'}, h(Icon,{name: openId === form.id ? 'expand_more' : 'inbox', size:13})),\n h('button', {onClick: () => setEditing(form), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Edit'}, h(Icon,{name:'edit',size:13})),\n h('button', {onClick: () => del(form.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Delete'}, h(Icon,{name:'delete',size:13}))\n ),\n openId === form.id && h(FormSubmissions, {formId: form.id, form})\n );\n })\n )\n )\n );\n}\n\nfunction parseFields(raw) {\n if (Array.isArray(raw)) return raw;\n if (typeof raw === 'string' && raw.trim()) { try { const a = JSON.parse(raw); return Array.isArray(a) ? a : []; } catch { return []; } }\n return [];\n}\n\nfunction FormBuilder({form, onCancel, onSave}) {\n const { Icon, Btn } = N();\n const [name, setName] = useState(form.name || '');\n const [fields, setFields] = useState(parseFields(form.fields));\n const [successMsg, setSuccessMsg] = useState(form.success_message || '');\n const [assetUrl, setAssetUrl] = useState(form.asset_url || '');\n const [redirectUrl, setRedirectUrl] = useState(form.redirect_url || '');\n const [busy, setBusy] = useState(false);\n\n const addField = () => setFields(fs => [...fs, {name:'', label:'', type:'text', required:false}]);\n const upd = (i, k, v) => setFields(fs => fs.map((f,idx) => idx===i ? {...f, [k]: v, name: k==='label' ? slugify(v) : f.name} : f));\n const rm = (i) => setFields(fs => fs.filter((_,idx) => idx!==i));\n\n const submit = async () => {\n setBusy(true);\n const cleaned = fields.filter(f => String(f.label||'').trim()).map(f => ({name: f.name || slugify(f.label), label: f.label.trim(), type: f.type || 'text', required: !!f.required}));\n await onSave({...form, name: name.trim(), fields: cleaned, success_message: successMsg.trim(), asset_url: assetUrl.trim(), redirect_url: redirectUrl.trim()});\n setBusy(false);\n };\n\n return h('div', {className:'mb-3 bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2.5'},\n h('div', {className:'text-[11px] font-bold text-on-surface'}, form.id ? 'Edit form' : 'New form'),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Form name *'),\n h('input', {type:'text', value: name, onChange: e => setName(e.target.value), placeholder:'Demo request',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n // Fields editor\n h('div', {className:'flex flex-col gap-1.5'},\n h('div', {className:'flex items-center justify-between'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Fields'),\n h('button', {onClick: addField, className:'text-[11px] text-primary hover:underline flex items-center gap-1 font-semibold'}, h(Icon,{name:'add',size:13}), 'Add field')\n ),\n fields.length === 0\n ? EmptyNote('No fields yet \\\\u2014 add at least an email field to identify leads.')\n : h('div', {className:'space-y-1.5'},\n fields.map((f,i) => h('div', {key:i, className:'flex items-center gap-1.5'},\n h('input', {type:'text', value: f.label, onChange: e => upd(i,'label', e.target.value), placeholder:'Label (e.g. Work email)',\n className:'flex-1 bg-surface-container border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'}),\n h('select', {value: f.type, onChange: e => upd(i,'type', e.target.value),\n className:'bg-surface-container border border-border-subtle rounded-md px-1.5 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'},\n FIELD_TYPES.map(t => h('option', {key:t, value:t}, t))),\n h('label', {className:'flex items-center gap-1 text-[10px] text-text-muted cursor-pointer select-none', title:'Required'},\n h('input', {type:'checkbox', checked: !!f.required, onChange: e => upd(i,'required', e.target.checked)}), 'req'),\n h('button', {onClick: () => rm(i), className:'w-6 h-6 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Remove'}, h(Icon,{name:'close',size:12}))\n ))\n )\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Success message'),\n h('input', {type:'text', value: successMsg, onChange: e => setSuccessMsg(e.target.value), placeholder:'Thanks \\\\u2014 we\\\\u2019ll be in touch shortly.',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-2'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Asset URL (lead magnet \\\\u2014 optional)'),\n h('input', {type:'text', value: assetUrl, onChange: e => setAssetUrl(e.target.value), placeholder:'https://\\\\u2026/whitepaper.pdf',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Redirect URL (optional)'),\n h('input', {type:'text', value: redirectUrl, onChange: e => setRedirectUrl(e.target.value), placeholder:'https://\\\\u2026/thank-you',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n )\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: submit, variant:'primary', size:'sm', disabled: busy || !name.trim()}, h(Icon,{name:'save',size:14}), 'Save form'),\n h('button', {onClick: onCancel, className:'text-[12px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n );\n}\n\nfunction FormSubmissions({formId, form}) {\n const { Icon, Spinner } = N();\n const [rows, setRows] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/marketing/forms/' + formId + '/submissions').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n }, [formId]);\n useEffect(() => { load(); }, [load]);\n\n return h('div', {className:'border-t border-border-subtle px-3 py-2.5 bg-surface-container/20 space-y-2'},\n h('div', {className:'flex items-center gap-2 text-[10px] text-text-muted'},\n h(Icon, {name:'info', size:12, className:'flex-shrink-0'}),\n h('span', null, 'Embed this form on a landing page (Capture \\\\u2192 Landing pages) or POST to /api/marketing/forms/' + formId + '/submit. Submissions upsert a contact, log an intent signal and create a lead.')\n ),\n rows === null\n ? h('div', {className:'flex items-center justify-center py-4'}, h(Spinner,{size:14}))\n : rows.length === 0\n ? EmptyNote('No submissions yet.')\n : h('div', {className:'overflow-x-auto'},\n h('div', {className:'min-w-[420px] space-y-1'},\n h('div', {className:'grid grid-cols-12 gap-2 px-2 py-1 text-[10px] uppercase tracking-widest text-text-muted font-bold'},\n h('div', {className:'col-span-4'}, 'Email'),\n h('div', {className:'col-span-3'}, 'Name'),\n h('div', {className:'col-span-3'}, 'Data'),\n h('div', {className:'col-span-2 text-right'}, 'When')\n ),\n rows.map(s => {\n const data = (typeof s.data === 'string') ? (() => { try { return JSON.parse(s.data); } catch { return {}; } })() : (s.data || {});\n const extra = Object.entries(data).filter(([k]) => k !== 'email' && k !== 'name' && k !== 'lead_email' && k !== 'lead_name').slice(0,3).map(([k,v]) => titleCase(k) + ': ' + String(v).slice(0,24)).join(' \\\\u00B7 ');\n return h('div', {key:s.id, className:'grid grid-cols-12 gap-2 px-2 py-1.5 items-center text-[11px] border-t border-border-subtle/40'},\n h('div', {className:'col-span-4 text-on-surface truncate font-mono-data'}, s.lead_email || '\\\\u2014'),\n h('div', {className:'col-span-3 text-on-surface-variant truncate'}, s.lead_name || '\\\\u2014'),\n h('div', {className:'col-span-3 text-text-muted truncate'}, extra || '\\\\u2014'),\n h('div', {className:'col-span-2 text-right text-text-muted font-mono-data'}, s.created_at ? fmtRel(s.created_at) : '')\n );\n })\n )\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 8) LANDING VIEW (landing-page builder + public URL) /api/marketing/landing\n// ═══════════════════════════════════════════════════════════════════════════════\nconst BLOCK_TYPES = [\n {type:'heading', label:'Heading', icon:'title'},\n {type:'text', label:'Text', icon:'notes'},\n {type:'image', label:'Image', icon:'image'},\n {type:'cta', label:'CTA', icon:'ads_click'},\n];\nconst blockMeta = (t) => BLOCK_TYPES.find(b => b.type === t) || BLOCK_TYPES[1];\n\nexport function LandingView() {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [forms, setForms] = useState([]);\n const [editing, setEditing] = useState(null);\n const [copied, setCopied] = useState('');\n\n const load = useCallback(() => {\n fetch('/api/marketing/landing').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n fetch('/api/marketing/forms').then(r => r.json()).then(d => setForms(Array.isArray(d) ? d : [])).catch(() => {});\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const save = async (p) => {\n const body = {title: p.title, subtitle: p.subtitle || '', blocks: p.blocks || [], form_id: p.form_id || null, theme: p.theme || 'dark'};\n if (!p.id) body.slug = p.slug || '';\n if (p.id) await fetch('/api/marketing/landing/' + p.id, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n else await fetch('/api/marketing/landing', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n setEditing(null); load();\n };\n const del = async (id) => {\n await fetch('/api/marketing/landing/' + id, {method:'DELETE'}).catch(()=>{});\n load();\n };\n const togglePublish = async (p) => {\n await fetch('/api/marketing/landing/' + p.id + '/publish', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({published: p.published ? 0 : 1})}).catch(()=>{});\n load();\n };\n const publicUrl = (slug) => (typeof location !== 'undefined' ? location.origin : '') + '/api/marketing/p/' + slug;\n const copyUrl = (slug) => { copyToClipboard(publicUrl(slug)); setCopied(slug); setTimeout(() => setCopied(''), 1400); };\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Landing pages', icon:'web', accent:'text-primary',\n sub:'Public landing pages with an embedded capture form \\\\u00B7 served at /api/marketing/p/:slug',\n right: h(Btn, {onClick: () => setEditing({title:'', subtitle:'', slug:'', blocks:[], form_id:null, theme:'dark'}), variant:'primary', size:'sm'}, h(Icon,{name:'add',size:14}), 'New page')},\n editing && h(LandingBuilder, {page: editing, forms, onCancel: () => setEditing(null), onSave: save}),\n rows === null\n ? h('div', {className:'flex items-center justify-center py-10'}, h(Spinner,{size:18}))\n : rows.length === 0\n ? EmptyNote('No landing pages yet \\\\u2014 click \\\\u201CNew page\\\\u201D to build one, attach a capture form and publish it to a public URL.')\n : h('div', {className:'space-y-2'},\n rows.map(p => h('div', {key:p.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2.5 flex items-center gap-2'},\n h('span', {className:'w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0', style:{background: colorFromName(p.title)+'22', color: colorFromName(p.title)}}, h(Icon,{name:'web', size:16})),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'flex items-center gap-2'},\n h('div', {className:'text-[13px] font-bold text-on-surface truncate'}, p.title || '(untitled page)'),\n p.published\n ? h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border font-bold bg-secondary/15 text-secondary border-secondary/40'}, 'live')\n : h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border font-bold bg-surface-container-high text-text-muted border-border-subtle'}, 'draft')\n ),\n h('div', {className:'text-[10px] text-text-muted truncate font-mono-data'}, '/api/marketing/p/' + (p.slug||'') + ' \\\\u00B7 ' + (Number(p.view_count)||0) + ' view' + ((Number(p.view_count)||0)===1?'':'s'))\n ),\n p.published && h('button', {onClick: () => copyUrl(p.slug), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Copy public URL'}, h(Icon,{name: copied === p.slug ? 'check' : 'content_copy', size:13})),\n p.published && h('a', {href: publicUrl(p.slug), target:'_blank', rel:'noopener noreferrer', className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Open / live preview'}, h(Icon,{name:'open_in_new',size:13})),\n h('button', {onClick: () => togglePublish(p), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border ' + (p.published ? 'border-secondary/40 text-secondary' : 'border-border-subtle text-text-muted hover:text-secondary hover:border-secondary/40'), title: p.published ? 'Unpublish' : 'Publish'}, h(Icon,{name: p.published ? 'cloud_done' : 'cloud_upload', size:13})),\n h('button', {onClick: () => setEditing(p), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Edit'}, h(Icon,{name:'edit',size:13})),\n h('button', {onClick: () => del(p.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Delete'}, h(Icon,{name:'delete',size:13}))\n ))\n )\n )\n );\n}\n\nfunction parseBlocks(raw) {\n if (Array.isArray(raw)) return raw;\n if (typeof raw === 'string' && raw.trim()) { try { const a = JSON.parse(raw); return Array.isArray(a) ? a : []; } catch { return []; } }\n return [];\n}\n\nfunction LandingBuilder({page, forms, onCancel, onSave}) {\n const { Icon, Btn } = N();\n const [title, setTitle] = useState(page.title || '');\n const [subtitle, setSubtitle] = useState(page.subtitle || '');\n const [slug, setSlug] = useState(page.slug || '');\n const [formId, setFormId] = useState(page.form_id || '');\n const [blocks, setBlocks] = useState(parseBlocks(page.blocks));\n const [busy, setBusy] = useState(false);\n\n const addBlock = (type) => setBlocks(bs => [...bs, {type, value: ''}]);\n const updBlock = (i, v) => setBlocks(bs => bs.map((b,idx) => idx===i ? {...b, value: v} : b));\n const rmBlock = (i) => setBlocks(bs => bs.filter((_,idx) => idx!==i));\n const moveBlock = (i, dir) => setBlocks(bs => { const a=[...bs]; const j=i+dir; if(j<0||j>=a.length) return a; const t=a[i]; a[i]=a[j]; a[j]=t; return a; });\n\n const submit = async () => {\n setBusy(true);\n const cleaned = blocks.filter(b => String(b.value||'').trim()).map(b => ({type: b.type, value: b.value.trim()}));\n await onSave({...page, title: title.trim(), subtitle: subtitle.trim(), slug: slug.trim(), form_id: formId || null, blocks: cleaned});\n setBusy(false);\n };\n\n return h('div', {className:'mb-3 bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2.5'},\n h('div', {className:'text-[11px] font-bold text-on-surface'}, page.id ? 'Edit landing page' : 'New landing page'),\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-2'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Title *'),\n h('input', {type:'text', value: title, onChange: e => setTitle(e.target.value), placeholder:'Cut ops time in half',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, page.id ? 'Slug (locked)' : 'Slug (optional \\\\u2014 auto from title)'),\n h('input', {type:'text', value: slug, onChange: e => setSlug(e.target.value), disabled: !!page.id, placeholder:'cut-ops-time',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none font-mono-data disabled:opacity-50'})\n )\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Subtitle'),\n h('input', {type:'text', value: subtitle, onChange: e => setSubtitle(e.target.value), placeholder:'A one-line value proposition',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n // Blocks\n h('div', {className:'flex flex-col gap-1.5'},\n h('div', {className:'flex items-center justify-between flex-wrap gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Content blocks'),\n h('div', {className:'flex items-center gap-1'},\n BLOCK_TYPES.map(b => h('button', {key:b.type, onClick: () => addBlock(b.type), className:'text-[10px] text-primary hover:underline flex items-center gap-0.5 font-semibold'}, h(Icon,{name:b.icon,size:12}), b.label)))\n ),\n blocks.length === 0\n ? EmptyNote('No blocks \\\\u2014 add a heading, text, image or CTA above.')\n : h('div', {className:'space-y-1.5'},\n blocks.map((b,i) => { const m = blockMeta(b.type); return h('div', {key:i, className:'flex items-start gap-1.5'},\n h('span', {className:'mt-1.5 flex items-center gap-1 text-[9px] uppercase tracking-wider text-text-muted font-bold w-16 flex-shrink-0'}, h(Icon,{name:m.icon,size:12}), m.label),\n h('input', {type:'text', value: b.value, onChange: e => updBlock(i, e.target.value), placeholder: b.type==='image' ? 'https://\\\\u2026/image.png' : b.type==='cta' ? 'Button label' : b.type==='heading' ? 'Section heading' : 'Paragraph text',\n className:'flex-1 bg-surface-container border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'}),\n h('button', {onClick: () => moveBlock(i,-1), className:'w-6 h-6 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary', title:'Up'}, h(Icon,{name:'arrow_upward',size:11})),\n h('button', {onClick: () => moveBlock(i,1), className:'w-6 h-6 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary', title:'Down'}, h(Icon,{name:'arrow_downward',size:11})),\n h('button', {onClick: () => rmBlock(i), className:'w-6 h-6 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Remove'}, h(Icon,{name:'close',size:12}))\n ); })\n )\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Embedded capture form'),\n h('select', {value: formId || '', onChange: e => setFormId(e.target.value),\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'},\n h('option', {value:''}, '\\\\u2014 none \\\\u2014'),\n (forms||[]).map(fm => h('option', {key:fm.id, value:fm.id}, fm.name || '(untitled form)')))\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: submit, variant:'primary', size:'sm', disabled: busy || !title.trim()}, h(Icon,{name:'save',size:14}), 'Save page'),\n h('button', {onClick: onCancel, className:'text-[12px] text-text-muted hover:text-on-surface'}, 'Cancel'),\n h('span', {className:'text-[10px] text-text-muted'}, 'Publish from the list to get a public URL.')\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 9) SEGMENTS VIEW (rule builder + live preview) /api/marketing/segments\n// ═══════════════════════════════════════════════════════════════════════════════\nconst SEG_FIELDS = [\n {field:'email', label:'Email', group:'contact'},\n {field:'company', label:'Company', group:'contact'},\n {field:'title', label:'Job title', group:'contact'},\n {field:'lifecycle', label:'Lifecycle', group:'contact'},\n {field:'grade', label:'Lead grade', group:'lead'},\n {field:'status', label:'Lead status', group:'lead'},\n {field:'score', label:'Lead score', group:'lead'},\n {field:'intent_count', label:'Intent signals',group:'intent'},\n];\nconst SEG_OPS = [\n {op:'eq', label:'is'},\n {op:'neq', label:'is not'},\n {op:'contains', label:'contains'},\n {op:'gt', label:'>'},\n {op:'gte', label:'\\\\u2265'},\n {op:'lt', label:'<'},\n {op:'lte', label:'\\\\u2264'},\n {op:'exists', label:'is set'},\n];\nconst segFieldLabel = (f) => (SEG_FIELDS.find(x => x.field === f) || {label: titleCase(f)}).label;\n\nexport function SegmentsView() {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [editing, setEditing] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/marketing/segments').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const save = async (p) => {\n const body = {name: p.name, description: p.description || '', kind: p.kind || 'dynamic', rules: p.rules || []};\n if (p.id) await fetch('/api/marketing/segments/' + p.id, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n else await fetch('/api/marketing/segments', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n setEditing(null); load();\n };\n const del = async (id) => {\n await fetch('/api/marketing/segments/' + id, {method:'DELETE'}).catch(()=>{});\n load();\n };\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Segments', icon:'filter_alt', accent:'text-primary',\n sub:'Rule-based audiences over contacts \\\\u00D7 lead status \\\\u00D7 intent \\\\u00B7 live preview before you save',\n right: h(Btn, {onClick: () => setEditing({name:'', description:'', kind:'dynamic', rules:[{field:'grade', op:'eq', value:'A'}]}), variant:'primary', size:'sm'}, h(Icon,{name:'add',size:14}), 'New segment')},\n editing && h(SegmentBuilder, {segment: editing, onCancel: () => setEditing(null), onSave: save}),\n rows === null\n ? h('div', {className:'flex items-center justify-center py-10'}, h(Spinner,{size:18}))\n : rows.length === 0\n ? EmptyNote('No segments yet \\\\u2014 build a rule set (e.g. lead grade is A) and save it as a reusable audience.')\n : h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-3'},\n rows.map(s => {\n const rules = parseRules(s.rules);\n return h('div', {key:s.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-3 space-y-2'},\n h('div', {className:'flex items-start gap-2'},\n h('span', {className:'w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0', style:{background: colorFromName(s.name)+'22', color: colorFromName(s.name)}}, h(Icon,{name:'filter_alt', size:16})),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'flex items-center gap-2'},\n h('div', {className:'text-[13px] font-bold text-on-surface truncate'}, s.name || '(untitled)'),\n h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border font-bold ' + (s.kind==='static' ? 'bg-surface-container-high text-on-surface-variant border-border-subtle' : 'bg-primary/10 text-primary border-primary/30')}, s.kind || 'dynamic')\n ),\n s.description && h('div', {className:'text-[11px] text-on-surface-variant truncate'}, s.description)\n ),\n h('div', {className:'flex items-center gap-1 flex-shrink-0'},\n h('button', {onClick: () => setEditing(s), className:'w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Edit'}, h(Icon,{name:'edit',size:13})),\n h('button', {onClick: () => del(s.id), className:'w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Delete'}, h(Icon,{name:'delete',size:13}))\n )\n ),\n rules.length > 0 && h('div', {className:'flex flex-wrap gap-1'},\n rules.slice(0,6).map((r,i) => h('span', {key:i, className:'text-[10px] font-mono-data text-text-muted bg-surface-container-high rounded px-1.5 py-0.5'},\n segFieldLabel(r.field) + ' ' + ((SEG_OPS.find(o=>o.op===r.op)||{label:r.op}).label) + (r.op==='exists' ? '' : ' ' + String(r.value).slice(0,20)))))\n );\n })\n )\n )\n );\n}\n\nfunction parseRules(raw) {\n if (Array.isArray(raw)) return raw;\n if (typeof raw === 'string' && raw.trim()) { try { const a = JSON.parse(raw); return Array.isArray(a) ? a : []; } catch { return []; } }\n return [];\n}\n\nfunction SegmentBuilder({segment, onCancel, onSave}) {\n const { Icon, Btn, Spinner } = N();\n const [name, setName] = useState(segment.name || '');\n const [description, setDescription] = useState(segment.description || '');\n const [kind, setKind] = useState(segment.kind || 'dynamic');\n const [rules, setRules] = useState(parseRules(segment.rules));\n const [preview, setPreview] = useState(null);\n const [previewing, setPreviewing] = useState(false);\n const [busy, setBusy] = useState(false);\n\n const addRule = () => setRules(rs => [...rs, {field:'grade', op:'eq', value:''}]);\n const updRule = (i, k, v) => setRules(rs => rs.map((r,idx) => idx===i ? {...r, [k]: v} : r));\n const rmRule = (i) => setRules(rs => rs.filter((_,idx) => idx!==i));\n\n const runPreview = async () => {\n setPreviewing(true);\n const d = await fetch('/api/marketing/segments/preview', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({rules})}).then(r => r.json()).catch(() => null);\n setPreview(d && typeof d === 'object' ? d : {count:0, sample:[]});\n setPreviewing(false);\n };\n\n const submit = async () => {\n setBusy(true);\n await onSave({...segment, name: name.trim(), description: description.trim(), kind, rules: rules.filter(r => r.field && r.op)});\n setBusy(false);\n };\n\n return h('div', {className:'mb-3 bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2.5'},\n h('div', {className:'text-[11px] font-bold text-on-surface'}, segment.id ? 'Edit segment' : 'New segment'),\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-2'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Name *'),\n h('input', {type:'text', value: name, onChange: e => setName(e.target.value), placeholder:'Hot enterprise leads',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Kind'),\n h('select', {value: kind, onChange: e => setKind(e.target.value),\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'},\n h('option', {value:'dynamic'}, 'Dynamic (re-evaluated)'), h('option', {value:'static'}, 'Static (snapshot)'))\n )\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Description'),\n h('input', {type:'text', value: description, onChange: e => setDescription(e.target.value), placeholder:'Optional',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n // Rules\n h('div', {className:'flex flex-col gap-1.5'},\n h('div', {className:'flex items-center justify-between'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Rules (all must match)'),\n h('button', {onClick: addRule, className:'text-[11px] text-primary hover:underline flex items-center gap-1 font-semibold'}, h(Icon,{name:'add',size:13}), 'Add rule')\n ),\n rules.length === 0\n ? EmptyNote('No rules \\\\u2014 add one to define the audience.')\n : h('div', {className:'space-y-1.5'},\n rules.map((r,i) => h('div', {key:i, className:'flex items-center gap-1.5'},\n h('select', {value: r.field, onChange: e => updRule(i,'field', e.target.value),\n className:'bg-surface-container border border-border-subtle rounded-md px-1.5 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'},\n SEG_FIELDS.map(sf => h('option', {key:sf.field, value:sf.field}, sf.label))),\n h('select', {value: r.op, onChange: e => updRule(i,'op', e.target.value),\n className:'bg-surface-container border border-border-subtle rounded-md px-1.5 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'},\n SEG_OPS.map(o => h('option', {key:o.op, value:o.op}, o.label))),\n r.op !== 'exists' && h('input', {type:'text', value: r.value == null ? '' : r.value, onChange: e => updRule(i,'value', e.target.value), placeholder:'value',\n className:'flex-1 bg-surface-container border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'}),\n h('button', {onClick: () => rmRule(i), className:'w-6 h-6 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Remove'}, h(Icon,{name:'close',size:12}))\n ))\n )\n ),\n // Live preview\n h('div', {className:'flex items-center gap-2 flex-wrap'},\n h(Btn, {onClick: runPreview, variant:'secondary', size:'sm', disabled: previewing || rules.length === 0}, previewing ? h(Spinner,{size:13}) : h(Icon,{name:'visibility',size:14}), 'Preview count'),\n preview && h('span', {className:'text-[12px] text-on-surface font-semibold'},\n h('span', {className:'font-mono-data text-primary'}, fmtNum(preview.count)), ' contact' + ((Number(preview.count)||0)===1?'':'s') + ' match')\n ),\n preview && Array.isArray(preview.sample) && preview.sample.length > 0 && h('div', {className:'flex flex-wrap gap-1'},\n preview.sample.slice(0,12).map((s,i) => h('span', {key:i, className:'text-[10px] font-mono-data text-text-muted bg-surface-container-high rounded px-1.5 py-0.5'}, s.email || s.name || s.company || '\\\\u2014'))\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: submit, variant:'primary', size:'sm', disabled: busy || !name.trim()}, h(Icon,{name:'save',size:14}), 'Save segment'),\n h('button', {onClick: onCancel, className:'text-[12px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 10) LISTS VIEW (static / dynamic lists + members) /api/marketing/lists\n// ═══════════════════════════════════════════════════════════════════════════════\nexport function ListsView() {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [segments, setSegments] = useState([]);\n const [creating, setCreating] = useState(false);\n const [draft, setDraft] = useState({name:'', kind:'static', segment_id:''});\n const [openId, setOpenId] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/marketing/lists').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n fetch('/api/marketing/segments').then(r => r.json()).then(d => setSegments(Array.isArray(d) ? d : [])).catch(() => {});\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const create = async () => {\n if (!String(draft.name).trim()) return;\n const body = {name: draft.name.trim(), kind: draft.kind, segment_id: draft.kind==='dynamic' ? (draft.segment_id || null) : null};\n await fetch('/api/marketing/lists', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n setDraft({name:'', kind:'static', segment_id:''}); setCreating(false); load();\n };\n const del = async (id) => {\n await fetch('/api/marketing/lists/' + id, {method:'DELETE'}).catch(()=>{});\n if (openId === id) setOpenId(null);\n load();\n };\n const materialize = async (id) => {\n await fetch('/api/marketing/lists/' + id + '/members', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({materialize: true})}).catch(()=>{});\n load();\n };\n const segName = (sid) => (segments.find(s => String(s.id) === String(sid)) || {}).name || '';\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Lists', icon:'format_list_bulleted', accent:'text-tertiary',\n sub:'Static lists you curate, or dynamic lists materialized from a segment',\n right: h(Btn, {onClick: () => setCreating(v => !v), variant:'secondary', size:'sm'}, h(Icon,{name: creating ? 'close' : 'add',size:14}), creating ? 'Cancel' : 'New list')},\n creating && h('div', {className:'bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2 mb-2'},\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-2'},\n h('input', {type:'text', value: draft.name, onChange: e => setDraft(d => ({...d, name: e.target.value})), placeholder:'List name (e.g. Webinar invitees)',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h('select', {value: draft.kind, onChange: e => setDraft(d => ({...d, kind: e.target.value})),\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'},\n h('option', {value:'static'}, 'Static (manual members)'), h('option', {value:'dynamic'}, 'Dynamic (from segment)'))\n ),\n draft.kind === 'dynamic' && h('select', {value: draft.segment_id, onChange: e => setDraft(d => ({...d, segment_id: e.target.value})),\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'},\n h('option', {value:''}, '\\\\u2014 choose a segment \\\\u2014'),\n (segments||[]).map(s => h('option', {key:s.id, value:s.id}, s.name || '(untitled)'))),\n h(Btn, {onClick: create, variant:'primary', size:'sm', disabled: !String(draft.name).trim() || (draft.kind==='dynamic' && !draft.segment_id)}, h(Icon,{name:'save',size:14}), 'Create list')\n ),\n rows === null\n ? h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}))\n : rows.length === 0\n ? EmptyNote('No lists yet \\\\u2014 create a static list to curate members, or a dynamic list driven by a segment.')\n : h('div', {className:'space-y-1.5'},\n rows.map(l => h('div', {key:l.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg overflow-hidden'},\n h('div', {className:'flex items-center gap-2 px-3 py-2'},\n h(Icon, {name:'format_list_bulleted', size:15, className:'text-tertiary flex-shrink-0'}),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'flex items-center gap-2'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, l.name || '(untitled list)'),\n h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border font-bold ' + (l.kind==='dynamic' ? 'bg-primary/10 text-primary border-primary/30' : 'bg-surface-container-high text-on-surface-variant border-border-subtle')}, l.kind || 'static')\n ),\n l.kind === 'dynamic' && l.segment_id && h('div', {className:'text-[10px] text-text-muted truncate'}, 'from segment: ' + (segName(l.segment_id) || l.segment_id))\n ),\n h('span', {className:'flex-shrink-0 text-[10px] text-text-muted font-mono-data'}, (Number(l.member_count)||0) + ' member' + ((Number(l.member_count)||0)===1?'':'s')),\n l.kind === 'dynamic' && h('button', {onClick: () => materialize(l.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Re-materialize from segment'}, h(Icon,{name:'sync',size:13})),\n h('button', {onClick: () => setOpenId(openId === l.id ? null : l.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Members'}, h(Icon,{name: openId === l.id ? 'expand_more' : 'group', size:13})),\n h('button', {onClick: () => del(l.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Delete'}, h(Icon,{name:'delete',size:13}))\n ),\n openId === l.id && h(ListMembers, {listId: l.id, kind: l.kind})\n ))\n )\n )\n );\n}\n\nfunction ListMembers({listId, kind}) {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [adding, setAdding] = useState(false);\n const [draft, setDraft] = useState({lead_email:'', lead_name:''});\n\n const load = useCallback(() => {\n fetch('/api/marketing/lists/' + listId + '/members').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n }, [listId]);\n useEffect(() => { load(); }, [load]);\n\n const add = async () => {\n if (!String(draft.lead_email).trim()) return;\n await fetch('/api/marketing/lists/' + listId + '/members', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({lead_email: draft.lead_email.trim(), lead_name: draft.lead_name.trim()})}).catch(()=>{});\n setDraft({lead_email:'', lead_name:''}); setAdding(false); load();\n };\n const rm = async (id) => {\n await fetch('/api/marketing/lists/' + listId + '/members/' + id, {method:'DELETE'}).catch(()=>{});\n load();\n };\n\n return h('div', {className:'border-t border-border-subtle px-3 py-2.5 bg-surface-container/20 space-y-2'},\n rows === null\n ? h('div', {className:'flex items-center justify-center py-3'}, h(Spinner,{size:14}))\n : rows.length === 0\n ? EmptyNote(kind === 'dynamic' ? 'No members \\\\u2014 re-materialize this list from its segment.' : 'No members yet.')\n : h('div', {className:'space-y-1'},\n rows.map(m => h('div', {key:m.id, className:'flex items-center gap-2 text-[11px]'},\n h('span', {className:'w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0', style:{background: colorFromName(m.lead_email||m.lead_name)+'22', color: colorFromName(m.lead_email||m.lead_name)}}, h(Icon,{name:'person',size:11})),\n h('span', {className:'text-on-surface truncate flex-1 font-mono-data'}, m.lead_email || '\\\\u2014'),\n m.lead_name && h('span', {className:'text-text-muted truncate'}, m.lead_name),\n kind !== 'dynamic' && h('button', {onClick: () => rm(m.id), className:'flex-shrink-0 text-text-muted hover:text-error', title:'Remove'}, h(Icon,{name:'close',size:12}))\n ))\n ),\n kind !== 'dynamic' && (adding\n ? h('div', {className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-2 space-y-1.5'},\n h('div', {className:'grid grid-cols-2 gap-1.5'},\n h('input', {type:'email', value: draft.lead_email, onChange: e => setDraft(d => ({...d, lead_email: e.target.value})), placeholder:'email@company.com',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'}),\n h('input', {type:'text', value: draft.lead_name, onChange: e => setDraft(d => ({...d, lead_name: e.target.value})), placeholder:'Name (optional)',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: add, variant:'primary', size:'sm', disabled: !String(draft.lead_email).trim()}, h(Icon,{name:'add',size:13}), 'Add member'),\n h('button', {onClick: () => setAdding(false), className:'text-[11px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n )\n : h('button', {onClick: () => setAdding(true), className:'text-[11px] text-primary hover:underline flex items-center gap-1 font-semibold'}, h(Icon,{name:'add',size:13}), 'Add member'))\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 11) HANDOFF VIEW (MQL-ready leads -> promote to deal) /api/marketing/handoff\n// ═══════════════════════════════════════════════════════════════════════════════\nconst GRADE_CHIP = {\n A:'bg-secondary/15 text-secondary border-secondary/40',\n B:'bg-primary/15 text-primary border-primary/30',\n C:'bg-tertiary/15 text-tertiary border-tertiary/30',\n D:'bg-surface-container-high text-on-surface-variant border-border-subtle',\n};\nconst gradeChip = (g) => GRADE_CHIP[String(g||'').toUpperCase()] || GRADE_CHIP.D;\n\nexport function HandoffView() {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [promoting, setPromoting] = useState('');\n const [toast, setToast] = useState('');\n\n const load = useCallback(() => {\n fetch('/api/marketing/handoff/mql-ready').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const promote = async (email) => {\n if (!email) return;\n setPromoting(email);\n const r = await fetch('/api/marketing/handoff/promote', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({lead_email: email})}).then(x => x.json()).catch(() => null);\n setPromoting('');\n if (r && (r.ok || r.id || r.success)) { setToast('Promoted ' + email + ' to a deal'); setTimeout(() => setToast(''), 2200); }\n load();\n };\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Sales handoff \\\\u2014 MQL ready', icon:'swap_horiz', accent:'text-secondary',\n sub:'Marketing-qualified leads (grade A/B, not yet a deal) ready to promote into the CRM pipeline',\n right: h('div', {className:'flex items-center gap-2'},\n toast && h('span', {className:'text-[11px] text-secondary'}, toast),\n h(Btn, {onClick: load, variant:'secondary', size:'sm'}, h(Icon,{name:'refresh',size:14}), 'Refresh'))},\n rows === null\n ? h('div', {className:'flex items-center justify-center py-10'}, h(Spinner,{size:18}))\n : rows.length === 0\n ? EmptyNote('No MQL-ready leads right now \\\\u2014 leads graded A or B with no open deal will appear here for one-click promotion to the pipeline.')\n : h('div', {className:'overflow-x-auto'},\n h('div', {className:'min-w-[640px]'},\n h('div', {className:'grid grid-cols-12 gap-2 px-3 py-2 text-[10px] uppercase tracking-widest text-text-muted bg-surface-container/40 font-bold rounded-t-lg border border-border-subtle'},\n h('div', {className:'col-span-4'}, 'Lead'),\n h('div', {className:'col-span-3'}, 'Company'),\n h('div', {className:'col-span-1 text-center'}, 'Grade'),\n h('div', {className:'col-span-1 text-right'}, 'Score'),\n h('div', {className:'col-span-1 text-right'}, 'Signals'),\n h('div', {className:'col-span-2 text-right'}, 'Action')\n ),\n rows.map((l,i) => {\n const email = l.lead_email || l.email || '';\n return h('div', {key: email + i, className:'grid grid-cols-12 gap-2 px-3 py-2.5 items-center border-l border-r border-b border-border-subtle/50 last:rounded-b-lg'},\n h('div', {className:'col-span-4 flex items-center gap-2 min-w-0'},\n h('span', {className:'w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0', style:{background: colorFromName(l.name||email)+'22', color: colorFromName(l.name||email)}}, h(Icon,{name:'person',size:14})),\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, l.name || email || '(unknown)'),\n l.name && h('div', {className:'text-[10px] text-text-muted truncate font-mono-data'}, email)\n )\n ),\n h('div', {className:'col-span-3 text-[11px] text-on-surface-variant truncate'}, l.company || '\\\\u2014'),\n h('div', {className:'col-span-1 text-center'},\n l.grade ? h('span', {className:'text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border font-bold ' + gradeChip(l.grade)}, l.grade) : h('span', {className:'text-text-muted'}, '\\\\u2014')),\n h('div', {className:'col-span-1 text-right text-[12px] font-mono-data font-bold text-on-surface'}, l.score != null ? fmtNum(l.score) : '\\\\u2014'),\n h('div', {className:'col-span-1 text-right text-[11px] font-mono-data text-text-muted'}, l.intent_count != null ? fmtNum(l.intent_count) : '\\\\u2014'),\n h('div', {className:'col-span-2 flex justify-end'},\n h(Btn, {onClick: () => promote(email), variant:'primary', size:'sm', disabled: promoting === email || !email},\n promoting === email ? h(Spinner,{size:13}) : h(Icon,{name:'swap_horiz',size:14}), 'Promote')\n )\n );\n })\n )\n )\n )\n );\n}\n `;\n}\n",[337],"0a8531a0-5f15-11f1-816f-1607ee4eb77e","frontend_marketing2.ts","25aff394-5f0f-11f1-83c8-1607ee4eb77e",1007,["D",1780467940042],1,"// frontend_marketing2.ts — Wave 1 Marketing operating-surface components.\n// Served at /api/app-marketing2 (router.ts MODULE_ROUTES), lazy-imported by frontend_pages.ts\n// (MarketingWorkspace). Emits an ES module that EXPORTS named React components consumed as\n// Marketing sub-tabs / panels — all REAL-DATA, honest empty states, pixel-faithful to the\n// CRM visual language (Section / EmptyNote / HBar / MetricCard / fmtMoney / fmtRel):\n//\n// MarketingOverview — 4 KPI MetricCards from /api/marketing/overview + the unified TOFU/MOFU/BOFU\n// funnel (lazy UnifiedFunnelView, else rendered from funnel-summary data) +\n// an attribution mini-panel + a live IntelligenceFeed.\n// AttributionView — /api/attribution expanded: per-channel sessions / CAC / ROI table + bars.\n// PersonaLibrary — /api/marketing/personas CRUD + \"Import from enrichment\".\n// UtmBuilder — /api/marketing/utm-links: live-preview tagged URL builder + saved library w/ copy.\n// BrandKit — /api/marketing/brand-kit voice/tone/values/dos/donts editor (one row/tenant).\n// NurtureView — marketing-framed list+create of sequences via /api/crm/sequences (+ /:id/steps).\n// CROFeed — /api/intelligence/recommendations action cards.\n//\n// Backend (all tenant-scoped JSON; see api/marketing.ts + api/marketing_routes.ts, api/intelligence.ts,\n// api/aio.ts):\n// GET /api/marketing/overview -> {kpis, funnel, attribution, generatedAt}\n// GET/POST /api/marketing/personas | PUT/DELETE /api/marketing/personas/:id | POST /api/marketing/personas/import\n// GET/POST /api/marketing/utm-links | DELETE /api/marketing/utm-links/:id\n// GET/PUT /api/marketing/brand-kit\n// GET /api/attribution -> {channels[], total_conversions, total_value, window_days, spend_source?}\n// GET /api/intelligence/funnel-summary -> {overall_health, total_integrations_connected, stages[], bottleneck}\n// GET /api/intelligence/feed | /api/intelligence/recommendations\n// GET/POST /api/crm/sequences | GET/POST /api/crm/sequences/:id/steps\n//\n// Shared deps from window.__nexus: Icon, Btn, Spinner, MetricCard, PageHeader.\nexport function getMarketing2JS(): string {\n return `\nimport React, { useState, useEffect, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// Lazy-import the already-built intelligence surfaces so we SURFACE (not rebuild) them.\nconst _intel = await import('/api/app-intelligence').catch(() => ({}));\nconst UnifiedFunnelView = _intel.UnifiedFunnelView || null;\nconst IntelligenceFeed = _intel.IntelligenceFeed || null;\n\n// ─── Shared helpers (mirrored from frontend_crm2.ts visual language) ───────────\nconst fmtMoney = (n) => {\n const v = Number(n) || 0;\n if (v >= 1000000) return '$' + (v/1000000).toFixed(1).replace(/\\\\.0$/,'') + 'M';\n if (v >= 1000) return '$' + (v/1000).toFixed(1).replace(/\\\\.0$/,'') + 'K';\n return '$' + v.toLocaleString();\n};\nconst fmtNum = (n) => {\n const v = Number(n) || 0;\n if (Math.abs(v) >= 1000000) return (v/1000000).toFixed(1).replace(/\\\\.0$/,'') + 'M';\n if (Math.abs(v) >= 1000) return (v/1000).toFixed(1).replace(/\\\\.0$/,'') + 'K';\n return Number.isInteger(v) ? String(v) : v.toFixed(1);\n};\nconst fmtRel = (iso) => {\n if (!iso) return '';\n const ms = Date.now() - new Date(iso).getTime();\n if (isNaN(ms)) return '';\n if (ms < 3600000) return Math.max(1, Math.floor(ms/60000)) + 'm ago';\n if (ms < 86400000) return Math.floor(ms/3600000) + 'h ago';\n if (ms < 2592000000) return Math.floor(ms/86400000) + 'd ago';\n return new Date(iso).toLocaleDateString('en-US', {month:'short', day:'numeric'});\n};\nconst ratio1 = (n) => (n == null || isNaN(Number(n))) ? '—' : (Math.round(Number(n) * 10) / 10);\nconst pct1 = (n) => (n == null || isNaN(Number(n))) ? '—' : (Math.round(Number(n) * 10) / 10) + '%';\nconst colorFromName = (name) => {\n const colors = ['#c0c1ff','#4edea3','#d0bcff','#8083ff','#6ffbbe','#a078ff','#e1e0ff','#494bd6'];\n const sum = (name||'').split('').reduce((a,c) => a + c.charCodeAt(0), 0);\n return colors[sum % colors.length];\n};\nconst titleCase = (s) => String(s||'').replace(/[_-]/g,' ').replace(/\\\\b\\\\w/g, c => c.toUpperCase()).trim();\nconst healthColor = (s) => Number(s) > 75 ? 'text-secondary' : Number(s) >= 50 ? 'text-tertiary' : 'text-error';\n\n// ─── Small shared UI atoms (mirrored from frontend_crm2.ts) ────────────────────\nfunction Section({title, icon, accent, right, children, sub}) {\n const { Icon } = N();\n return h('div', {className:'glass-panel rounded-xl p-lg space-y-4'},\n h('div', {className:'flex items-start justify-between gap-3'},\n h('div', {className:'min-w-0'},\n h('div', {className:'flex items-center gap-2'},\n icon && Icon && h(Icon, {name: icon, size:16, className: accent || 'text-primary'}),\n h('h3', {className:'text-[14px] font-bold text-on-surface'}, title)\n ),\n sub && h('div', {className:'text-[11px] text-text-muted mt-0.5'}, sub)\n ),\n right\n ),\n children\n );\n}\nconst EmptyNote = (msg) => h('div', {className:'text-[12px] text-text-muted italic py-2'}, msg);\n\n// Horizontal labeled bar (clean Tailwind — charts module isn't on window.__nexus).\nfunction HBar({label, value, max, color, valueText}) {\n const w = max > 0 ? Math.max(2, (Number(value)||0) / max * 100) : 0;\n return h('div', {className:'flex items-center gap-2'},\n h('div', {className:'text-[11px] text-on-surface-variant truncate flex-shrink-0 text-right', style:{width:120}}, label),\n h('div', {className:'flex-1 h-5 bg-surface-container-high rounded overflow-hidden relative'},\n h('div', {className:'h-full rounded transition-all duration-500', style:{width: w + '%', background: color || '#c0c1ff'}})\n ),\n h('div', {className:'text-[11px] text-text-muted text-right flex-shrink-0 font-mono-data', style:{width:96}}, valueText)\n );\n}\n\n// ─── Funnel fallback (renders from /api/intelligence/funnel-summary data when the\n// UnifiedFunnelView export isn't available) ────────────────────────────────────\nconst STAGE_FB = {\n TOFU: {bg:'#c0c1ff', text:'text-primary', label:'Awareness & Reach'},\n MOFU: {bg:'#d0bcff', text:'text-tertiary', label:'Engagement & Consideration'},\n BOFU: {bg:'#4edea3', text:'text-secondary', label:'Conversion & Revenue'},\n};\nfunction FunnelFallback({funnel}) {\n const { Icon } = N();\n if (!funnel || !Array.isArray(funnel.stages)) return EmptyNote('Funnel data unavailable — connect an integration to populate TOFU/MOFU/BOFU.');\n const bottleneck = funnel.bottleneck || null;\n return h('div', {className:'glass-panel rounded-xl p-lg'},\n h('div', {className:'flex items-center justify-between mb-md flex-wrap gap-2'},\n h('div', {className:'flex items-center gap-2'},\n Icon && h(Icon, {name:'insights', size:18, className:'text-primary'}),\n h('h3', {className:'text-[15px] font-bold text-on-surface'}, 'Acquisition funnel'),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest bg-primary/10 text-primary px-2 py-0.5 rounded border border-primary/20'},\n (Number(funnel.total_integrations_connected)||0) + ' sources')\n ),\n typeof funnel.overall_health === 'number' && h('div', {className:'flex items-center gap-2 px-3 py-1.5 rounded-lg border border-border-subtle bg-surface-container-lowest'},\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Overall'),\n h('span', {className:'text-[16px] font-extrabold ' + healthColor(funnel.overall_health), style:{fontVariantNumeric:'tabular-nums'}}, funnel.overall_health + '%')\n )\n ),\n h('div', {className:'grid grid-cols-1 md:grid-cols-3 gap-md'},\n funnel.stages.map(s => {\n const c = STAGE_FB[s.stage] || STAGE_FB.TOFU;\n const isBottleneck = bottleneck && bottleneck.stage === s.stage;\n const metrics = Array.isArray(s.metrics) ? s.metrics : [];\n return h('div', {key:s.stage, className:'p-md rounded-lg border ' + (isBottleneck ? 'border-tertiary/40 bg-tertiary/5' : 'border-border-subtle bg-surface-container-lowest')},\n h('div', {className:'flex items-center justify-between mb-2'},\n h('div', null,\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest ' + c.text}, s.stage),\n h('div', {className:'text-[10px] text-text-muted mt-0.5'}, c.label)\n ),\n isBottleneck && h('span', {className:'inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-widest bg-tertiary/10 text-tertiary px-1.5 py-0.5 rounded'}, 'BOTTLENECK')\n ),\n h('div', {className:'space-y-1.5 mb-3 min-h-[96px]'},\n metrics.length === 0\n ? h('div', {className:'text-[11px] text-text-muted italic py-4 text-center'}, 'No data — connect an integration.')\n : metrics.slice(0,5).map(m => h('div', {key: m.integration + '_' + m.metric, className:'flex items-center justify-between text-[12px]'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className:'text-[10px] uppercase tracking-wider text-text-muted font-mono-data flex-shrink-0'}, m.integration),\n h('span', {className:'text-on-surface-variant truncate'}, String(m.metric||'').replace(/_/g,' '))\n ),\n h('span', {className:'font-mono-data text-on-surface font-bold flex-shrink-0', style:{fontVariantNumeric:'tabular-nums'}}, fmtNum(m.value) + (m.unit ? ' ' + m.unit : ''))\n ))\n ),\n h('div', {className:'pt-2 border-t border-border-subtle'},\n h('div', {className:'flex justify-between items-center mb-1'},\n h('span', {className:'text-[10px] uppercase tracking-widest text-text-muted'}, 'Stage health'),\n h('span', {className:'text-[13px] font-extrabold ' + healthColor(s.health_score), style:{fontVariantNumeric:'tabular-nums'}}, (Number(s.health_score)||0) + '%')\n ),\n h('div', {className:'h-1.5 w-full bg-surface-container rounded-full overflow-hidden'},\n h('div', {className:'h-full transition-all', style:{width: (Number(s.health_score)||0) + '%', background: c.bg}})\n ),\n s.diagnosis && h('p', {className:'text-[10px] text-text-muted mt-1.5'}, s.diagnosis)\n )\n );\n })\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// Attribution mini-panel (compact, used inside Overview) + full AttributionView\n// ═══════════════════════════════════════════════════════════════════════════════\nconst CHANNEL_COLORS = ['#c0c1ff','#4edea3','#d0bcff','#8083ff','#6ffbbe','#a078ff','#e1e0ff','#494bd6'];\nconst chColor = (i) => CHANNEL_COLORS[i % CHANNEL_COLORS.length];\n\nfunction AttributionMini({attribution}) {\n const channels = (attribution && Array.isArray(attribution.channels)) ? attribution.channels : null;\n if (channels === null) return EmptyNote('Attribution unavailable.');\n if (channels.length === 0) return EmptyNote('No attributed conversions in the last 30 days — UTM-tagged conversions appear here once tracked.');\n const maxConv = Math.max(1, ...channels.map(c => Number(c.conversions)||0));\n return h('div', {className:'space-y-2'},\n channels.slice(0,6).map((c,i) => h(HBar, {key: c.source + i, label: titleCase(c.source), value: c.conversions, max: maxConv,\n color: chColor(i), valueText: (Number(c.conversions)||0) + ' \\\\u00B7 ' + Math.round((Number(c.share)||0)*100) + '%'}))\n );\n}\n\nexport function AttributionView() {\n const { Icon, Btn, Spinner } = N();\n const [data, setData] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/attribution').then(r => r.json()).then(d => setData(d && Array.isArray(d.channels) ? d : {channels:[], total_conversions:0, total_value:0})).catch(() => setData({channels:[]}));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n if (data === null) return h('div', {className:'glass-panel rounded-xl p-12 flex items-center justify-center'}, h(Spinner,{size:20}));\n const channels = Array.isArray(data.channels) ? data.channels : [];\n const hasSpend = channels.some(c => c.spend != null);\n const maxConv = Math.max(1, ...channels.map(c => Number(c.conversions)||0));\n\n return h('div', {className:'space-y-lg'},\n // Summary cards\n h('div', {className:'grid grid-cols-2 lg:grid-cols-3 gap-md'},\n kpiTile('Channels', String(channels.length), 'hub', 'text-primary'),\n kpiTile('Conversions (30d)', String(Number(data.total_conversions)||0), 'conversion', 'text-secondary'),\n kpiTile('Attributed value', fmtMoney(data.total_value), 'paid', 'text-tertiary')\n ),\n h(Section, {title:'Last-touch channel attribution', icon:'donut_large', accent:'text-primary',\n sub:'UTM last-touch over the last 30 days' + (data.spend_source === 'estimate' ? ' \\\\u00B7 spend / CAC / ROI are estimates (from configured marketing spend \\\\u00D7 session share)' : ''),\n right: h(Btn, {onClick: load, variant:'secondary', size:'sm'}, h(Icon,{name:'refresh',size:14}), 'Refresh')},\n channels.length === 0\n ? EmptyNote('No attributed conversions in the last 30 days. Tag your campaign URLs with UTM parameters (use the Tools tab\\\\u2019s UTM builder) and record conversions to populate this.')\n : h('div', {className:'overflow-x-auto'},\n h('div', {className:'min-w-[640px]'},\n h('div', {className:'grid grid-cols-12 gap-2 px-3 py-2 text-[10px] uppercase tracking-widest text-text-muted bg-surface-container/40 font-bold rounded-t-lg border border-border-subtle'},\n h('div', {className:'col-span-3'}, 'Channel'),\n h('div', {className:'col-span-3'}, 'Share'),\n h('div', {className:'col-span-1 text-right'}, 'Conv'),\n h('div', {className:'col-span-1 text-right'}, 'Sess'),\n h('div', {className:'col-span-1 text-right'}, 'Value'),\n h('div', {className:'col-span-1 text-right'}, 'CAC'),\n h('div', {className:'col-span-1 text-right'}, 'ROI'),\n h('div', {className:'col-span-1 text-right'}, 'PB')\n ),\n channels.map((c,i) => h('div', {key: c.source + i, className:'grid grid-cols-12 gap-2 px-3 py-2.5 items-center border-l border-r border-b border-border-subtle/50 last:rounded-b-lg'},\n h('div', {className:'col-span-3 flex items-center gap-2 min-w-0'},\n h('span', {className:'w-2.5 h-2.5 rounded-full flex-shrink-0', style:{background: chColor(i)}}),\n h('span', {className:'text-[12px] font-semibold text-on-surface truncate'}, titleCase(c.source))\n ),\n h('div', {className:'col-span-3'},\n h('div', {className:'h-4 bg-surface-container-high rounded overflow-hidden'},\n h('div', {className:'h-full rounded', style:{width: Math.max(2, (Number(c.conversions)||0)/maxConv*100) + '%', background: chColor(i)}}))\n ),\n h('div', {className:'col-span-1 text-right text-[12px] font-mono-data font-bold text-on-surface'}, Number(c.conversions)||0),\n h('div', {className:'col-span-1 text-right text-[11px] font-mono-data text-text-muted'}, c.sessions != null ? fmtNum(c.sessions) : '\\\\u2014'),\n h('div', {className:'col-span-1 text-right text-[11px] font-mono-data text-on-surface-variant'}, fmtMoney(c.value)),\n h('div', {className:'col-span-1 text-right text-[11px] font-mono-data text-text-muted'}, c.cac != null ? fmtMoney(c.cac) : '\\\\u2014'),\n h('div', {className:'col-span-1 text-right text-[11px] font-mono-data font-bold ' + (c.roi != null && Number(c.roi) >= 0 ? 'text-secondary' : (c.roi != null ? 'text-error' : 'text-text-muted'))}, c.roi != null ? (Number(c.roi) >= 0 ? '+' : '') + ratio1(c.roi) + 'x' : '\\\\u2014'),\n h('div', {className:'col-span-1 text-right text-[11px] font-mono-data text-text-muted'}, c.payback_months != null ? ratio1(c.payback_months) + 'mo' : '\\\\u2014')\n ))\n )\n ),\n !hasSpend && channels.length > 0 && h('div', {className:'text-[11px] text-text-muted italic'}, 'CAC / ROI / payback fill in once GA4 session data and a configured marketing-spend estimate are available.')\n )\n );\n}\n\n// Reusable compact KPI tile (matches the forecast roll-up card look).\nfunction kpiTile(label, value, icon, accent) {\n const { Icon } = N();\n return h('div', {className:'rounded-xl border border-border-subtle bg-surface-container-lowest p-4 flex flex-col gap-1'},\n h('div', {className:'flex items-center gap-2'},\n Icon && h(Icon, {name: icon, size:15, className: accent}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, label)\n ),\n h('div', {className:'text-[22px] font-extrabold text-on-surface font-mono-data leading-none mt-1'}, value)\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 1) MARKETING OVERVIEW\n// ═══════════════════════════════════════════════════════════════════════════════\nexport function MarketingOverview({setActivePage}) {\n const { Icon, Btn, MetricCard, Spinner } = N();\n const [data, setData] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/marketing/overview').then(r => r.json()).then(d => setData(d || {})).catch(() => setData({}));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n if (data === null) return h('div', {className:'glass-panel rounded-xl p-12 flex items-center justify-center'}, h(Spinner,{size:20}));\n const kpis = data.kpis || {};\n const funnel = data.funnel || null;\n const attribution = data.attribution || null;\n\n // 4 KPI MetricCards — real marketing math (honest '—' when an input is missing).\n const cac = kpis.cac;\n const ltvCac = kpis.ltv_cac_ratio;\n const mer = kpis.mer;\n const conv = kpis.conversions;\n const bench = kpis.benchmark_status || {};\n const benchColor = (st) => st === 'healthy' ? '#4edea3' : st === 'borderline' ? '#d0bcff' : st === 'unhealthy' ? '#ffb4ab' : '#c0c1ff';\n\n return h('div', {className:'space-y-lg'},\n // KPI header — composed marketing-math metrics\n MetricCard ? h('div', {className:'grid grid-cols-2 lg:grid-cols-4 gap-md'},\n h(MetricCard, {icon:'payments', title:'CAC', value: cac != null ? fmtMoney(cac) : '\\\\u2014', color:'#c0c1ff',\n subtitle: cac != null ? 'cost per acquisition \\\\u00B7 estimate' : 'set marketing spend + conversions'}),\n h(MetricCard, {icon:'balance', title:'LTV : CAC', value: ltvCac != null ? ratio1(ltvCac) + 'x' : '\\\\u2014', color: benchColor(bench.ltv_cac),\n subtitle: ltvCac != null ? (bench.ltv_cac || 'estimate') + ' \\\\u00B7 healthy \\\\u2265 3x' : 'needs LTV + CAC inputs'}),\n h(MetricCard, {icon:'trending_up', title:'MER', value: mer != null ? ratio1(mer) + 'x' : '\\\\u2014', color: benchColor(bench.mer),\n subtitle: mer != null ? 'marketing efficiency \\\\u00B7 healthy \\\\u2265 3x' : 'needs spend + revenue inputs'}),\n h(MetricCard, {icon:'conversion', title:'Conversions', value: conv != null ? fmtNum(conv) : '\\\\u2014', color:'#6ffbbe',\n subtitle: 'GA4 conversions in window'})\n ) : null,\n\n // Unified TOFU/MOFU/BOFU funnel — surface the already-built view, else render from data.\n UnifiedFunnelView ? h(UnifiedFunnelView, {setActivePage}) : h(FunnelFallback, {funnel}),\n\n // Attribution mini + Intelligence feed side-by-side\n h('div', {className:'grid grid-cols-1 lg:grid-cols-2 gap-lg'},\n h(Section, {title:'Channel attribution', icon:'donut_large', accent:'text-primary',\n sub:'Last-touch conversions (30d)',\n right: setActivePage && h('button', {onClick: () => setActivePage && setActivePage('marketing'), className:'hidden'}, '')},\n h(AttributionMini, {attribution})\n ),\n IntelligenceFeed\n ? h(IntelligenceFeed, {onInvestigate: (c) => { try { window.dispatchEvent(new CustomEvent('nexus:open-chat', {detail: {prompt: (c && (c.action_label || c.title)) || ''}})); } catch (e) {} }})\n : h(Section, {title:'Intelligence feed', icon:'auto_awesome', accent:'text-primary'}, EmptyNote('Intelligence feed module unavailable.'))\n ),\n\n // Provenance footer\n h('div', {className:'flex items-center gap-2 text-[11px] text-text-muted'},\n Icon && h(Icon, {name:'schedule', size:13}),\n h('span', null, 'Composed from funnel-summary + AIO KPIs + attribution' + (data.generatedAt ? ' \\\\u00B7 ' + fmtRel(data.generatedAt) : '')),\n Btn && h(Btn, {onClick: load, variant:'secondary', size:'sm'}, h(Icon,{name:'refresh',size:13}), 'Refresh')\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 2) PERSONA LIBRARY\n// ═══════════════════════════════════════════════════════════════════════════════\nconst KIND_META = {\n icp: {label:'ICP', chip:'bg-primary/10 text-primary border-primary/30', icon:'target'},\n persona: {label:'Persona', chip:'bg-tertiary/10 text-tertiary border-tertiary/30', icon:'person'},\n segment: {label:'Segment', chip:'bg-secondary/15 text-secondary border-secondary/40', icon:'group'},\n};\nconst kindMeta = (k) => KIND_META[k] || {label: titleCase(k) || 'Persona', chip:'bg-surface-container-high text-on-surface-variant border-border-subtle', icon:'person'};\n\nfunction parseAttrs(raw) {\n if (raw == null) return null;\n if (typeof raw === 'object') return raw;\n try { const o = JSON.parse(raw); return (o && typeof o === 'object') ? o : null; } catch { return null; }\n}\n\nexport function PersonaLibrary() {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [editing, setEditing] = useState(null); // persona object or {} for new\n const [importing, setImporting] = useState(false);\n const [filter, setFilter] = useState('');\n\n const load = useCallback(() => {\n fetch('/api/marketing/personas').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const save = async (p) => {\n let attributes = p.attributes;\n if (typeof attributes === 'string') {\n const trimmed = attributes.trim();\n if (trimmed) { try { JSON.parse(trimmed); } catch { attributes = JSON.stringify({notes: trimmed}); } }\n else attributes = '';\n }\n const body = {name: p.name, kind: p.kind || 'persona', description: p.description || '', attributes, source: p.source || 'manual'};\n if (p.id) await fetch('/api/marketing/personas/' + p.id, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n else await fetch('/api/marketing/personas', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n setEditing(null); load();\n };\n const del = async (id) => {\n await fetch('/api/marketing/personas/' + id, {method:'DELETE'}).catch(()=>{});\n load();\n };\n const doImport = async () => {\n setImporting(true);\n await fetch('/api/marketing/personas/import', {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'}).catch(()=>{});\n setImporting(false); load();\n };\n\n const filtered = filter ? (rows || []).filter(r => r.kind === filter) : (rows || []);\n const kbtn = (k, label) => h('button', {key:k, onClick: () => setFilter(filter === k ? '' : k),\n className:'px-2.5 py-0.5 rounded-md text-[11px] font-semibold border ' + (filter === k ? 'bg-primary text-white border-primary' : 'bg-surface-container border-border-subtle text-text-muted hover:text-on-surface')}, label);\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Audience library', icon:'group', accent:'text-primary',\n sub:'ICPs, buyer personas and segments \\\\u00B7 import from your company-enrichment profile or author manually',\n right: h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: doImport, variant:'secondary', size:'sm', disabled: importing}, importing ? h(Spinner,{size:13}) : h(Icon,{name:'cloud_download',size:14}), 'Import from enrichment'),\n h(Btn, {onClick: () => setEditing({name:'', kind:'persona', description:'', attributes:''}), variant:'primary', size:'sm'}, h(Icon,{name:'add',size:14}), 'New')\n )},\n // Kind filters\n h('div', {className:'flex items-center gap-1.5 mb-1'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mr-1'}, 'Kind'),\n kbtn('icp','ICP'), kbtn('persona','Persona'), kbtn('segment','Segment'),\n filter && h('button', {onClick: () => setFilter(''), className:'text-[11px] text-text-muted hover:text-on-surface ml-1'}, 'Clear')\n ),\n editing && h(PersonaEditor, {persona: editing, onCancel: () => setEditing(null), onSave: save}),\n rows === null\n ? h('div', {className:'flex items-center justify-center py-10'}, h(Spinner,{size:18}))\n : filtered.length === 0\n ? EmptyNote(filter\n ? 'No ' + kindMeta(filter).label + ' records yet.'\n : 'No audiences yet \\\\u2014 click \\\\u201CImport from enrichment\\\\u201D to pull ICP/personas/segments from your company profile, or author one manually.')\n : h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-3'},\n filtered.map(p => {\n const km = kindMeta(p.kind);\n const attrs = parseAttrs(p.attributes);\n const attrEntries = attrs ? Object.entries(attrs).filter(([,v]) => v != null && String(v).trim() !== '').slice(0, 6) : [];\n return h('div', {key:p.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-3 space-y-2'},\n h('div', {className:'flex items-start gap-2'},\n h('span', {className:'w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0', style:{background: colorFromName(p.name)+'22', color: colorFromName(p.name)}}, h(Icon,{name: km.icon, size:16})),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'flex items-center gap-2'},\n h('div', {className:'text-[13px] font-bold text-on-surface truncate'}, p.name || '(untitled)'),\n h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border font-bold ' + km.chip}, km.label)\n ),\n p.source && h('div', {className:'text-[10px] text-text-muted'}, 'via ' + p.source + (p.updated_at ? ' \\\\u00B7 ' + fmtRel(p.updated_at) : ''))\n ),\n h('div', {className:'flex items-center gap-1 flex-shrink-0'},\n h('button', {onClick: () => setEditing(p), className:'w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Edit'}, h(Icon,{name:'edit',size:13})),\n h('button', {onClick: () => del(p.id), className:'w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Delete'}, h(Icon,{name:'delete',size:13}))\n )\n ),\n p.description && h('div', {className:'text-[12px] text-on-surface-variant leading-relaxed'}, p.description),\n attrEntries.length > 0 && h('div', {className:'flex flex-wrap gap-1'},\n attrEntries.map(([k,v]) => h('span', {key:k, className:'text-[10px] font-mono-data text-text-muted bg-surface-container-high rounded px-1.5 py-0.5'}, titleCase(k) + ': ' + (Array.isArray(v) ? v.join(', ') : String(v)).slice(0,40)))\n )\n );\n })\n )\n )\n );\n}\n\nfunction PersonaEditor({persona, onCancel, onSave}) {\n const { Icon, Btn } = N();\n const attrInit = (() => {\n const a = persona.attributes;\n if (a == null || a === '') return '';\n if (typeof a === 'string') return a;\n try { return JSON.stringify(a, null, 2); } catch { return ''; }\n })();\n const [f, setF] = useState({name: persona.name||'', kind: persona.kind||'persona', description: persona.description||'', attributes: attrInit});\n const [busy, setBusy] = useState(false);\n const set = (k,v) => setF(s => ({...s, [k]: v}));\n const submit = async () => { setBusy(true); await onSave({...persona, ...f, source: persona.source || 'manual'}); setBusy(false); };\n return h('div', {className:'mt-1 mb-3 bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2'},\n h('div', {className:'text-[11px] font-bold text-on-surface'}, persona.id ? 'Edit audience' : 'New audience'),\n h('div', {className:'grid grid-cols-2 gap-2'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Name'),\n h('input', {type:'text', value: f.name, onChange: e => set('name', e.target.value), placeholder:'Enterprise Ops Lead',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Kind'),\n h('select', {value: f.kind, onChange: e => set('kind', e.target.value),\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'},\n h('option', {value:'icp'}, 'ICP'), h('option', {value:'persona'}, 'Persona'), h('option', {value:'segment'}, 'Segment'))\n )\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Description'),\n h('textarea', {value: f.description, onChange: e => set('description', e.target.value), rows:2, placeholder:'Who they are, what they care about\\\\u2026',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none resize-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Attributes (JSON or notes)'),\n h('textarea', {value: f.attributes, onChange: e => set('attributes', e.target.value), rows:3, placeholder:'{\"industry\":\"SaaS\",\"seniority\":\"Director\",\"pain\":\"manual ops\"}',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none resize-none font-mono-data'})\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: submit, variant:'primary', size:'sm', disabled: busy || !String(f.name).trim()}, h(Icon,{name:'save',size:14}), 'Save'),\n h('button', {onClick: onCancel, className:'text-[12px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 3) UTM BUILDER\n// ═══════════════════════════════════════════════════════════════════════════════\nconst UTM_PARAMS = [\n {key:'utm_source', label:'Source', ph:'newsletter', req:true},\n {key:'utm_medium', label:'Medium', ph:'email', req:true},\n {key:'utm_campaign', label:'Campaign', ph:'q3_launch', req:true},\n {key:'utm_term', label:'Term', ph:'keyword', req:false},\n {key:'utm_content', label:'Content', ph:'cta_button', req:false},\n];\nfunction buildUtmUrl(base, params) {\n const b = String(base || '').trim();\n if (!b) return '';\n const pairs = [];\n UTM_PARAMS.forEach(p => { const v = String(params[p.key] || '').trim(); if (v) pairs.push(p.key + '=' + encodeURIComponent(v)); });\n if (pairs.length === 0) return b;\n const sep = b.includes('?') ? '&' : '?';\n return b + sep + pairs.join('&');\n}\n\nexport function UtmBuilder() {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [f, setF] = useState({name:'', base_url:'', utm_source:'', utm_medium:'', utm_campaign:'', utm_term:'', utm_content:''});\n const [busy, setBusy] = useState(false);\n const [copied, setCopied] = useState('');\n\n const load = useCallback(() => {\n fetch('/api/marketing/utm-links').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const set = (k,v) => setF(s => ({...s, [k]: v}));\n const preview = buildUtmUrl(f.base_url, f);\n const canSave = String(f.base_url).trim() && String(f.utm_source).trim() && String(f.utm_medium).trim() && String(f.utm_campaign).trim();\n\n const save = async () => {\n if (!canSave) return;\n setBusy(true);\n const body = {name: f.name.trim(), base_url: f.base_url.trim(),\n utm_source: f.utm_source.trim(), utm_medium: f.utm_medium.trim(), utm_campaign: f.utm_campaign.trim(),\n utm_term: f.utm_term.trim(), utm_content: f.utm_content.trim()};\n await fetch('/api/marketing/utm-links', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n setBusy(false);\n setF({name:'', base_url:'', utm_source:'', utm_medium:'', utm_campaign:'', utm_term:'', utm_content:''});\n load();\n };\n const del = async (id) => {\n await fetch('/api/marketing/utm-links/' + id, {method:'DELETE'}).catch(()=>{});\n load();\n };\n const copy = (url, id) => {\n try { navigator.clipboard.writeText(url); } catch (e) {}\n setCopied(id); setTimeout(() => setCopied(''), 1400);\n };\n\n return h('div', {className:'grid grid-cols-1 lg:grid-cols-2 gap-lg'},\n // Builder\n h(Section, {title:'UTM link builder', icon:'link', accent:'text-primary',\n sub:'Compose campaign-tagged URLs \\\\u00B7 source / medium / campaign required'},\n h('div', {className:'space-y-2.5'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Base URL *'),\n h('input', {type:'text', value: f.base_url, onChange: e => set('base_url', e.target.value), placeholder:'https://example.com/landing',\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Name (optional)'),\n h('input', {type:'text', value: f.name, onChange: e => set('name', e.target.value), placeholder:'Q3 newsletter blast',\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'grid grid-cols-2 gap-2'},\n UTM_PARAMS.map(p => h('div', {key:p.key, className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, p.label + (p.req ? ' *' : '')),\n h('input', {type:'text', value: f[p.key], onChange: e => set(p.key, e.target.value), placeholder: p.ph,\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ))\n ),\n // Live preview\n h('div', {className:'pt-1'},\n h('div', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted mb-1'}, 'Tagged URL preview'),\n preview\n ? h('div', {className:'flex items-center gap-2 bg-surface-container-lowest border border-primary/30 rounded-lg px-3 py-2'},\n h('div', {className:'flex-1 min-w-0 text-[11px] font-mono-data text-on-surface break-all'}, preview),\n h('button', {onClick: () => copy(preview, '__preview'), className:'flex-shrink-0 text-text-muted hover:text-primary', title:'Copy'}, h(Icon,{name: copied === '__preview' ? 'check' : 'content_copy', size:14}))\n )\n : EmptyNote('Enter a base URL to preview the tagged link.')\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: save, variant:'primary', size:'sm', disabled: busy || !canSave}, busy ? h(Spinner,{size:13}) : h(Icon,{name:'save',size:14}), 'Save link'),\n !canSave && h('span', {className:'text-[11px] text-text-muted'}, 'Base URL + source + medium + campaign required')\n )\n )\n ),\n // Saved library\n h(Section, {title:'Saved links', icon:'bookmark', accent:'text-tertiary',\n sub:'Reuse tagged campaign URLs',\n right: h(Btn, {onClick: load, variant:'secondary', size:'sm'}, h(Icon,{name:'refresh',size:14}), 'Refresh')},\n rows === null\n ? h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}))\n : rows.length === 0\n ? EmptyNote('No saved links yet \\\\u2014 build one on the left and click Save.')\n : h('div', {className:'space-y-1.5'},\n rows.map(l => h('div', {key:l.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 space-y-1'},\n h('div', {className:'flex items-center gap-2'},\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, l.name || l.utm_campaign || '(link)'),\n h('div', {className:'text-[10px] text-text-muted truncate'},\n [l.utm_source, l.utm_medium, l.utm_campaign].filter(Boolean).join(' \\\\u00B7 ') + (l.created_at ? ' \\\\u00B7 ' + fmtRel(l.created_at) : ''))\n ),\n h('button', {onClick: () => copy(l.full_url || buildUtmUrl(l.base_url, l), l.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Copy URL'}, h(Icon,{name: copied === l.id ? 'check' : 'content_copy', size:13})),\n h('button', {onClick: () => del(l.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Delete'}, h(Icon,{name:'delete',size:13}))\n ),\n h('div', {className:'text-[10px] font-mono-data text-on-surface-variant break-all bg-surface-container/40 rounded px-2 py-1'}, l.full_url || buildUtmUrl(l.base_url, l))\n ))\n )\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 4) BRAND KIT\n// ═══════════════════════════════════════════════════════════════════════════════\nexport function BrandKit() {\n const { Icon, Btn, Spinner } = N();\n const [data, setData] = useState(null);\n const [f, setF] = useState(null);\n const [busy, setBusy] = useState(false);\n const [toast, setToast] = useState('');\n\n const load = useCallback(() => {\n fetch('/api/marketing/brand-kit').then(r => r.json()).then(d => {\n const k = (d && typeof d === 'object') ? d : {};\n setData(k);\n setF({voice: k.voice||'', tone: k.tone||'', values: k.values||'', dos: k.dos||'', donts: k.donts||'', boilerplate: k.boilerplate||'', logo_url: k.logo_url||''});\n }).catch(() => { setData({}); setF({voice:'', tone:'', values:'', dos:'', donts:'', boilerplate:'', logo_url:''}); });\n }, []);\n useEffect(() => { load(); }, [load]);\n\n if (f === null) return h('div', {className:'glass-panel rounded-xl p-12 flex items-center justify-center'}, h(Spinner,{size:20}));\n const set = (k,v) => setF(s => ({...s, [k]: v}));\n const palette = (() => { const p = data && data.palette; if (!p) return []; try { const a = typeof p === 'string' ? JSON.parse(p) : p; return Array.isArray(a) ? a : []; } catch { return []; } })();\n\n const save = async () => {\n setBusy(true);\n const r = await fetch('/api/marketing/brand-kit', {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(f)}).catch(() => null);\n setBusy(false);\n if (r && r.ok) { setToast('Saved'); load(); setTimeout(() => setToast(''), 1500); }\n };\n\n const ta = (label, key, ph, rows) => h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, label),\n h('textarea', {value: f[key], onChange: e => set(key, e.target.value), rows: rows||2, placeholder: ph,\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none resize-none'})\n );\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Brand kit', icon:'palette', accent:'text-primary',\n sub:'Voice, tone and guardrails \\\\u2014 referenced when drafting marketing copy with AI',\n right: h('div', {className:'flex items-center gap-2'},\n toast && h('span', {className:'text-[11px] text-secondary'}, toast),\n h(Btn, {onClick: save, variant:'primary', size:'sm', disabled: busy}, busy ? h(Spinner,{size:13}) : h(Icon,{name:'save',size:14}), 'Save')\n )},\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-3'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Voice'),\n h('input', {type:'text', value: f.voice, onChange: e => set('voice', e.target.value), placeholder:'Confident, expert, human',\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Tone'),\n h('input', {type:'text', value: f.tone, onChange: e => set('tone', e.target.value), placeholder:'Direct but warm \\\\u00B7 no hype',\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'})\n )\n ),\n ta('Values', 'values', 'What the brand stands for \\\\u2014 one per line', 2),\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-3'},\n ta(\"Do's\", 'dos', 'Use active voice; lead with outcomes\\\\u2026', 3),\n ta(\"Don'ts\", 'donts', 'Avoid jargon; never overpromise\\\\u2026', 3)\n ),\n ta('Boilerplate', 'boilerplate', 'Standard company description used in footers / press\\\\u2026', 3),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Logo URL'),\n h('input', {type:'text', value: f.logo_url, onChange: e => set('logo_url', e.target.value), placeholder:'https://\\\\u2026/logo.svg',\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n // Palette (read-only swatches from saved JSON; enrichment / future editor populates it)\n palette.length > 0 && h('div', {className:'pt-2 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2'}, 'Palette'),\n h('div', {className:'flex flex-wrap gap-2'},\n palette.map((c,i) => h('div', {key:i, className:'flex items-center gap-1.5 bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1'},\n h('span', {className:'w-4 h-4 rounded flex-shrink-0 border border-border-subtle', style:{background: String(c)}}),\n h('span', {className:'text-[10px] font-mono-data text-text-muted'}, String(c))\n ))\n )\n )\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 5) NURTURE VIEW (marketing-framed sequences via /api/crm/sequences)\n// ═══════════════════════════════════════════════════════════════════════════════\nconst CH_ICON = {email:'mail', call:'call', task:'check_circle', linkedin:'group', ad:'campaign'};\n\nexport function NurtureView() {\n const { Icon, Btn, Spinner } = N();\n const [sequences, setSequences] = useState(null);\n const [creating, setCreating] = useState(false);\n const [draft, setDraft] = useState({name:'', description:''});\n const [openId, setOpenId] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/crm/sequences').then(r => r.json()).then(d => setSequences(Array.isArray(d) ? d : [])).catch(() => setSequences([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const create = async () => {\n if (!String(draft.name).trim()) return;\n await fetch('/api/crm/sequences', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({name: draft.name.trim(), description: draft.description.trim()})}).catch(()=>{});\n setDraft({name:'', description:''}); setCreating(false); load();\n };\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Nurture sequences', icon:'cadence', accent:'text-tertiary',\n sub:'Multi-step nurture cadences \\\\u00B7 shared with the CRM sequence engine',\n right: h(Btn, {onClick: () => setCreating(v => !v), variant:'secondary', size:'sm'}, h(Icon,{name: creating ? 'close' : 'add',size:14}), creating ? 'Cancel' : 'New sequence')},\n creating && h('div', {className:'bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2 mb-2'},\n h('input', {type:'text', value: draft.name, onChange: e => setDraft(d => ({...d, name: e.target.value})), placeholder:'Sequence name (e.g. Trial nurture)',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h('input', {type:'text', value: draft.description, onChange: e => setDraft(d => ({...d, description: e.target.value})), placeholder:'Goal / audience (optional)',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h(Btn, {onClick: create, variant:'primary', size:'sm', disabled: !String(draft.name).trim()}, h(Icon,{name:'save',size:14}), 'Create sequence')\n ),\n sequences === null\n ? h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}))\n : sequences.length === 0\n ? EmptyNote('No sequences yet \\\\u2014 create one to build a nurture cadence of steps.')\n : h('div', {className:'space-y-1.5'},\n sequences.map(s => h('div', {key:s.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg overflow-hidden'},\n h('button', {onClick: () => setOpenId(openId === s.id ? null : s.id), className:'w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-white/[0.02]'},\n h(Icon, {name: openId === s.id ? 'expand_more' : 'chevron_right', size:16, className:'text-text-muted flex-shrink-0'}),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, s.name || '(untitled)'),\n s.description && h('div', {className:'text-[10px] text-text-muted truncate'}, s.description)\n ),\n h('span', {className:'flex-shrink-0 text-[10px] text-text-muted font-mono-data'}, (Number(s.step_count)||0) + ' step' + ((Number(s.step_count)||0)===1?'':'s')),\n (s.active === false) && h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border border-border-subtle text-text-muted'}, 'paused')\n ),\n openId === s.id && h(NurtureSteps, {sequenceId: s.id})\n ))\n )\n )\n );\n}\n\nfunction NurtureSteps({sequenceId}) {\n const { Icon, Btn, Spinner } = N();\n const [steps, setSteps] = useState(null);\n const [adding, setAdding] = useState(false);\n const [draft, setDraft] = useState({channel:'email', delay_days:'0', subject:''});\n\n const load = useCallback(() => {\n fetch('/api/crm/sequences/' + sequenceId + '/steps').then(r => r.json()).then(d => setSteps(Array.isArray(d) ? d : [])).catch(() => setSteps([]));\n }, [sequenceId]);\n useEffect(() => { load(); }, [load]);\n\n const add = async () => {\n await fetch('/api/crm/sequences/' + sequenceId + '/steps', {method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({channel: draft.channel, delay_days: Number(draft.delay_days)||0, subject: draft.subject.trim(), body: ''})}).catch(()=>{});\n setDraft({channel:'email', delay_days:'0', subject:''}); setAdding(false); load();\n };\n\n return h('div', {className:'border-t border-border-subtle px-3 py-2.5 space-y-2 bg-surface-container/20'},\n steps === null\n ? h('div', {className:'flex items-center justify-center py-3'}, h(Spinner,{size:14}))\n : steps.length === 0\n ? EmptyNote('No steps yet.')\n : h('div', {className:'space-y-1.5'},\n steps.map(st => h('div', {key:st.id, className:'flex items-center gap-2 text-[11px]'},\n h('span', {className:'w-5 h-5 rounded-full bg-surface-container-high flex items-center justify-center text-[10px] font-bold text-on-surface-variant flex-shrink-0'}, st.step_order != null ? st.step_order : '\\\\u00B7'),\n h(Icon, {name: CH_ICON[st.channel] || 'mail', size:13, className:'text-primary flex-shrink-0'}),\n h('span', {className:'text-on-surface truncate flex-1'}, st.subject || st.body || ('(' + (st.channel||'email') + ' step)')),\n h('span', {className:'text-text-muted font-mono-data flex-shrink-0'}, '+' + (Number(st.delay_days)||0) + 'd')\n ))\n ),\n adding\n ? h('div', {className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-2 space-y-1.5'},\n h('div', {className:'flex gap-1.5'},\n ['email','linkedin','task'].map(c => h('button', {key:c, onClick: () => setDraft(d => ({...d, channel:c})),\n className:'flex-1 px-2 py-1 rounded-md text-[11px] font-semibold flex items-center justify-center gap-1 border ' + (draft.channel===c ? 'bg-primary text-white border-primary' : 'bg-surface-container border-border-subtle text-text-muted hover:text-on-surface')},\n h(Icon,{name: CH_ICON[c], size:12}), c)),\n h('input', {type:'number', value: draft.delay_days, onChange: e => setDraft(d => ({...d, delay_days: e.target.value})), title:'Delay days',\n className:'w-16 bg-surface-container border border-border-subtle rounded-md px-1.5 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none', placeholder:'days'})\n ),\n h('input', {type:'text', value: draft.subject, onChange: e => setDraft(d => ({...d, subject: e.target.value})), placeholder:'Subject / step note (optional)',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'}),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: add, variant:'primary', size:'sm'}, h(Icon,{name:'add',size:13}), 'Add step'),\n h('button', {onClick: () => setAdding(false), className:'text-[11px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n )\n : h('button', {onClick: () => setAdding(true), className:'text-[11px] text-primary hover:underline flex items-center gap-1 font-semibold'}, h(Icon,{name:'add',size:13}), 'Add step')\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 6) CRO FEED (recommendations as action cards)\n// ═══════════════════════════════════════════════════════════════════════════════\nconst PRIORITY_BADGE = {\n critical:'bg-error/15 text-error border-error/30',\n high:'bg-tertiary/15 text-tertiary border-tertiary/30',\n medium:'bg-primary/15 text-primary border-primary/30',\n low:'bg-surface-container-high text-on-surface-variant border-border-subtle',\n};\nconst priBadge = (p) => PRIORITY_BADGE[p] || PRIORITY_BADGE.medium;\n\nexport function CROFeed() {\n const { Icon, Btn, Spinner } = N();\n const [recs, setRecs] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/intelligence/recommendations').then(r => r.json()).then(d => setRecs(Array.isArray(d) ? d : [])).catch(() => setRecs([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const ask = (prompt) => { try { window.dispatchEvent(new CustomEvent('nexus:open-chat', {detail: {prompt: prompt || ''}})); } catch (e) {} };\n\n return h(Section, {title:'Optimization recommendations', icon:'lightbulb', accent:'text-tertiary',\n sub:'AI-derived next actions from your funnel + correlations',\n right: h(Btn, {onClick: load, variant:'secondary', size:'sm'}, h(Icon,{name:'refresh',size:14}), 'Refresh')},\n recs === null\n ? h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}))\n : recs.length === 0\n ? EmptyNote('No recommendations yet \\\\u2014 connect integrations to generate funnel intelligence.')\n : h('div', {className:'space-y-2'},\n recs.map((r,i) => h('div', {key:i, className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-3 flex items-start gap-3'},\n h('span', {className:'w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0 bg-tertiary/10 text-tertiary'}, h(Icon,{name:'lightbulb',size:16})),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'flex items-center gap-2 mb-1'},\n h('div', {className:'text-[13px] font-bold text-on-surface flex-1 min-w-0'}, r.title),\n h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-widest px-1.5 py-0.5 rounded border font-bold ' + priBadge(r.priority)}, r.priority)\n ),\n r.action && h('button', {onClick: () => ask(r.action),\n className:'text-[11px] font-bold uppercase tracking-widest text-tertiary hover:underline flex items-center gap-1'},\n h(Icon,{name:'auto_awesome',size:12}), r.action)\n )\n ))\n )\n );\n}\n\n `;\n}\n",[344],"d56be55c-5e7b-11f1-a9e2-1607ee4eb77e","frontend_knowledge_graph.ts","3b326e5a-5991-11f1-881b-ee650bb23af1",935,["D",1780402137967],"// Knowledge Graph view — modal that visualizes which knowledge files affect which AI features.\n// Backed by /api/knowledge/graph (nodes + edges + feature registry). Served at /api/app-knowledge-graph\n// and lazy-loaded by the Sidebar's \"Graph\" button so frontend_pages.ts stays under val.town's 80K limit.\n//\n// Shared deps come from window.__nexus (set by frontend_js.ts).\n\nexport function getKnowledgeGraphJS(): string {\n return `\nimport React, { useState, useEffect, useRef, useMemo } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// Registry order — used to lay out feature nodes top-to-bottom on the right column.\n// MUST match the backend registry so the SVG matches what the graph endpoint reports.\nconst FEATURE_ORDER = [\n 'chat','funnel_summary','kpis','ice_suggest','lead_scoring',\n 'digest','standup','cohort_ltv','correlations','recommendations'\n];\nconst FEATURE_LABELS = {\n chat:'Chat', funnel_summary:'Funnel Summary', kpis:'KPIs', ice_suggest:'ICE Suggest',\n lead_scoring:'Lead Scoring', digest:'Growth Digest', standup:'Standup',\n cohort_ltv:'Cohort LTV', correlations:'Correlations', recommendations:'Recommendations'\n};\n\nconst COLOR_KNOWLEDGE = '#c0c1ff'; // lavender\nconst COLOR_FEATURE = '#4edea3'; // mint\nconst COLOR_EDGE = '#c7c4d7';\n\nconst KIND_CHIP = {\n playbook: 'bg-primary/10 text-primary border-primary/30',\n framework: 'bg-tertiary/10 text-tertiary border-tertiary/30',\n benchmark: 'bg-secondary/10 text-secondary border-secondary/30',\n};\n\n// Left-bar categories — group knowledge files by kind in a fixed, logical order.\nconst KIND_ORDER = ['framework','formula','benchmark','playbook','reference'];\nconst KIND_LABELS = {\n framework:'Frameworks', formula:'Formulas', benchmark:'Benchmarks',\n playbook:'Playbooks', reference:'References', other:'Other',\n};\n\nfunction fmtTokens(t) {\n if (t == null) return '';\n if (t < 1000) return t + ' tk';\n return (Math.round(t/100)/10) + 'k tk';\n}\n\nexport function KnowledgeGraphView({open, onClose}) {\n const {Icon, Btn, Spinner} = N();\n const [graph, setGraph] = useState(null); // {nodes, edges, features}\n const [files, setFiles] = useState([]); // /api/knowledge raw list (drives left column)\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [hoverKnowledge, setHoverKnowledge] = useState(null);\n const [addPopover, setAddPopover] = useState(null); // featureId being targeted\n const [editing, setEditing] = useState(null); // file being edited (loaded with full content)\n const [editForm, setEditForm] = useState(null); // {name, kind, content, targets}\n const [editBusy, setEditBusy] = useState(false);\n const [editErr, setEditErr] = useState(null);\n const [editTab, setEditTab] = useState('content'); // 'content' | 'targets'\n const svgRef = useRef(null);\n\n // Open editor: fetch full content (list endpoint omits it) and populate the form.\n const openEditor = async (file) => {\n setEditing({id: file.id, loading: true});\n setEditErr(null); setEditTab('content');\n try {\n const r = await fetch('/api/knowledge/' + file.id);\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const full = await r.json();\n setEditing(full);\n setEditForm({\n name: full.name || '',\n kind: full.kind || 'playbook',\n content: full.content || '',\n targets: Array.isArray(full.targets) ? full.targets.slice() : [],\n enabled: full.enabled !== false\n });\n } catch (e) {\n setEditErr(e && e.message ? e.message : 'Failed to load file');\n setEditing(file); // fall back to row data\n setEditForm({\n name: file.name || '', kind: file.kind || 'playbook', content: '',\n targets: Array.isArray(file.targets) ? file.targets.slice() : [],\n enabled: file.enabled !== false\n });\n }\n };\n // Open the editor on a brand-new blank file (no id yet → saveEditor POSTs to create).\n const openNew = () => {\n setEditing({id: null, isNew: true});\n setEditErr(null); setEditTab('content');\n setEditForm({name:'', kind:'playbook', content:'', targets:[], enabled:true});\n };\n const closeEditor = () => { setEditing(null); setEditForm(null); setEditErr(null); setEditBusy(false); };\n const saveEditor = async () => {\n if (!editing || !editForm) return;\n setEditBusy(true); setEditErr(null);\n try {\n const isNew = editing.id == null;\n const r = await fetch(isNew ? '/api/knowledge' : '/api/knowledge/' + editing.id, {\n method: isNew ? 'POST' : 'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n name: editForm.name, kind: editForm.kind, content: editForm.content,\n targets: editForm.targets, enabled: editForm.enabled\n })\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const saved = await r.json();\n if (isNew) {\n setFiles(fs => fs.concat([saved]));\n } else {\n setFiles(fs => fs.map(f => f.id === editing.id ? {...f, ...saved} : f));\n }\n closeEditor();\n } catch (e) {\n setEditErr(e && e.message ? e.message : 'Save failed');\n } finally { setEditBusy(false); }\n };\n const resummarize = async () => {\n if (!editing) return;\n setEditBusy(true); setEditErr(null);\n try {\n const r = await fetch('/api/knowledge/' + editing.id + '/summarize', {method:'POST'});\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const out = await r.json();\n setFiles(fs => fs.map(f => f.id === editing.id ? {...f, summary: out.summary, tokens_estimate: out.tokens_estimate} : f));\n setEditing(e => e ? {...e, summary: out.summary, tokens_estimate: out.tokens_estimate} : e);\n } catch (e) {\n setEditErr(e && e.message ? e.message : 'Re-summarize failed');\n } finally { setEditBusy(false); }\n };\n const deleteFile = async () => {\n if (!editing) return;\n if (!confirm('Delete \"' + (editForm && editForm.name || editing.name) + '\"? This cannot be undone.')) return;\n setEditBusy(true); setEditErr(null);\n try {\n const r = await fetch('/api/knowledge/' + editing.id, {method:'DELETE'});\n if (!r.ok) throw new Error('HTTP ' + r.status);\n setFiles(fs => fs.filter(f => f.id !== editing.id));\n closeEditor();\n } catch (e) {\n setEditErr(e && e.message ? e.message : 'Delete failed');\n } finally { setEditBusy(false); }\n };\n\n // ---- File upload → content (Part 15.1) ----------------------------------\n // Reads .txt/.md/.csv/.json via FileReader, .pdf via pdfjs-dist, .docx via\n // mammoth. Extracted text is dropped into the editor content state. Strictly\n // additive: reuses the existing setEditForm content setter and editErr banner.\n const uploadInputRef = useRef(null);\n const [uploadBusy, setUploadBusy] = useState(false);\n const MAX_KNOWLEDGE_CHARS = 500000;\n\n const readTextFile = (file) => new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => resolve(String(reader.result || ''));\n reader.onerror = () => reject(new Error('Could not read file'));\n reader.readAsText(file);\n });\n\n const readPdfFile = async (file) => {\n const pdfjs = await import('https://esm.sh/pdfjs-dist@4.0.379/build/pdf.min.mjs');\n pdfjs.GlobalWorkerOptions.workerSrc = 'https://esm.sh/pdfjs-dist@4.0.379/build/pdf.worker.min.mjs';\n const buf = await file.arrayBuffer();\n const pdf = await pdfjs.getDocument({data: buf}).promise;\n const parts = [];\n for (let i = 1; i <= pdf.numPages; i++) {\n const page = await pdf.getPage(i);\n const tc = await page.getTextContent();\n parts.push(tc.items.map(it => (it && it.str) || '').join(' '));\n }\n return parts.join('\\\\n\\\\n');\n };\n\n const readDocxFile = async (file) => {\n const mammoth = await import('https://esm.sh/mammoth@1.6.0/mammoth.browser.min.js');\n const lib = (mammoth && mammoth.default) ? mammoth.default : mammoth;\n const buf = await file.arrayBuffer();\n const out = await lib.extractRawText({arrayBuffer: buf});\n return (out && out.value) || '';\n };\n\n const onUploadFile = async (e) => {\n const file = e && e.target && e.target.files && e.target.files[0];\n if (e && e.target) e.target.value = ''; // allow re-selecting the same file\n if (!file) return;\n setUploadBusy(true); setEditErr(null);\n try {\n const lower = (file.name || '').toLowerCase();\n let text = '';\n if (lower.endsWith('.pdf') || file.type === 'application/pdf') {\n text = await readPdfFile(file);\n } else if (lower.endsWith('.docx') || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {\n text = await readDocxFile(file);\n } else {\n text = await readTextFile(file);\n }\n text = (text || '').trim();\n if (!text) throw new Error('No readable text found in file');\n let truncated = false;\n if (text.length > MAX_KNOWLEDGE_CHARS) { text = text.slice(0, MAX_KNOWLEDGE_CHARS); truncated = true; }\n setEditForm(f => {\n const base = f || {name:'', kind:'playbook', content:'', targets:[], enabled:true};\n const nextName = (base.name && base.name.trim()) ? base.name : (file.name || '').replace(/\\\\.[^.]+$/, '');\n return {...base, content: text, name: nextName};\n });\n setEditTab('content');\n if (truncated) setEditErr('File truncated to ' + MAX_KNOWLEDGE_CHARS.toLocaleString() + ' characters.');\n } catch (err) {\n setEditErr('Upload failed: ' + (err && err.message ? err.message : 'could not parse file'));\n } finally { setUploadBusy(false); }\n };\n\n const load = async () => {\n setLoading(true); setError(null);\n try {\n const [g, k] = await Promise.all([\n fetch('/api/knowledge/graph').then(r => r.json()),\n fetch('/api/knowledge').then(r => r.json()),\n ]);\n setGraph(g && g.nodes ? g : {nodes:[], edges:[], features:[]});\n setFiles(Array.isArray(k) ? k : []);\n } catch (e) {\n setError(e && e.message ? e.message : 'Failed to load knowledge graph');\n } finally { setLoading(false); }\n };\n\n useEffect(() => { if (open) load(); }, [open]);\n\n // Mutations — keep local state in sync so the SVG re-renders without waiting for refetch.\n const updateTargets = async (fileId, nextTargets) => {\n setFiles(fs => fs.map(f => f.id === fileId ? {...f, targets: nextTargets} : f));\n try {\n await fetch('/api/knowledge/' + fileId, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({targets: nextTargets})\n });\n } catch {}\n };\n const toggleTarget = (file, featureId) => {\n const cur = Array.isArray(file.targets) ? file.targets : [];\n const next = cur.includes(featureId) ? cur.filter(t => t !== featureId) : cur.concat([featureId]);\n updateTargets(file.id, next);\n };\n const removeEdge = (fileId, featureId) => {\n const f = files.find(x => x.id === fileId);\n if (!f) return;\n const cur = Array.isArray(f.targets) ? f.targets : [];\n updateTargets(fileId, cur.filter(t => t !== featureId));\n };\n const toggleEnabled = async (file) => {\n setFiles(fs => fs.map(f => f.id === file.id ? {...f, enabled: !f.enabled} : f));\n try {\n await fetch('/api/knowledge/' + file.id, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({enabled: !file.enabled})\n });\n } catch {}\n };\n\n // Derived: SVG layout. Knowledge on the left, features on the right.\n const layout = useMemo(() => {\n const W = 540, H = 560;\n const padTop = 30, padBot = 30;\n const kx = 70; // x of knowledge nodes\n const fx = W - 90; // x of feature nodes\n const usableH = H - padTop - padBot;\n\n const kFiles = files.slice(); // left column drives knowledge layout (so disabled show too)\n const features = FEATURE_ORDER.map(id => ({id, label: FEATURE_LABELS[id] || id}));\n\n const kStep = kFiles.length > 1 ? usableH / (kFiles.length - 1) : 0;\n const kPos = {};\n kFiles.forEach((f, i) => { kPos[f.id] = {x: kx, y: padTop + (kFiles.length === 1 ? usableH/2 : i * kStep)}; });\n\n const fStep = features.length > 1 ? usableH / (features.length - 1) : 0;\n const fPos = {};\n features.forEach((f, i) => { fPos[f.id] = {x: fx, y: padTop + (features.length === 1 ? usableH/2 : i * fStep)}; });\n\n return {W, H, kFiles, features, kPos, fPos};\n }, [files]);\n\n if (!open) return null;\n\n const targetsOf = (f) => (Array.isArray(f.targets) ? f.targets : []);\n const fileById = (id) => files.find(f => f.id === id);\n\n // Files NOT yet targeting a given feature, used by the per-feature \"+\" popover.\n const availableForFeature = (featureId) => files.filter(f => f.enabled && !targetsOf(f).includes(featureId));\n\n // One knowledge-file row in the left column (extracted so categories can reuse it).\n const renderFileRow = (f) => {\n const targets = targetsOf(f);\n const isGlobal = targets.length === 0;\n const isHover = hoverKnowledge === f.id;\n return h('div', {\n key: f.id,\n onMouseEnter: () => setHoverKnowledge(f.id),\n onMouseLeave: () => setHoverKnowledge(null),\n className:'p-2.5 rounded-lg border bg-surface-container-lowest transition-all ' +\n (isHover ? 'border-primary/40' : 'border-border-subtle') +\n (f.enabled ? '' : ' opacity-50 grayscale')\n },\n // Row 1: name + kind + tokens + enable toggle + edit button\n h('div', {className:'flex items-center gap-2 mb-1.5'},\n h('button', {\n onClick: () => toggleEnabled(f), type:'button',\n title: f.enabled ? 'Disable in AI context' : 'Enable',\n className:'w-2 h-2 rounded-full flex-shrink-0 ' + (f.enabled ? 'bg-secondary' : 'bg-text-muted')\n }),\n h('button', {\n type:'button', onClick: () => openEditor(f),\n title:'Edit content',\n className:'flex-1 truncate text-left text-[12px] font-semibold text-on-surface hover:text-primary transition-colors'\n }, f.name),\n f.kind && h('span', {\n className:'text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border flex-shrink-0 ' +\n (KIND_CHIP[f.kind] || 'bg-surface-container-high text-text-muted border-border-subtle')\n }, f.kind),\n h('span', {className:'text-[9px] font-mono-data text-text-muted flex-shrink-0'},\n fmtTokens(f.tokens_estimate)\n ),\n h('button', {\n type:'button', onClick: () => openEditor(f), title:'Edit',\n className:'p-1 rounded text-text-muted hover:text-primary hover:bg-surface-container-high transition-colors flex-shrink-0'\n }, h(Icon, {name:'edit', size:12}))\n ),\n // Row 2: GLOBAL badge OR feature checkboxes\n isGlobal\n ? h('div', {className:'flex items-center gap-1.5'},\n h('span', {className:'inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-widest bg-secondary/10 text-secondary border border-secondary/30'},\n h(Icon, {name:'public', size:10}), 'GLOBAL'\n ),\n h('span', {className:'text-[10px] text-text-muted'}, 'affects every AI feature')\n )\n : h('div', {className:'flex flex-wrap gap-1'},\n FEATURE_ORDER.map(fid => {\n const on = targets.includes(fid);\n return h('label', {\n key: fid, title: FEATURE_LABELS[fid],\n className:'inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] cursor-pointer border transition-colors ' +\n (on\n ? 'bg-primary/15 text-primary border-primary/40'\n : 'bg-surface-container-high text-text-muted border-border-subtle hover:text-on-surface-variant')\n },\n h('input', {\n type:'checkbox', checked: on, onChange: () => toggleTarget(f, fid),\n className:'sr-only'\n }),\n h('span', null, FEATURE_LABELS[fid])\n );\n })\n )\n );\n };\n\n return h(React.Fragment, null,\n // Glass backdrop\n h('div', {\n className:'fixed inset-0 bg-black/60 backdrop-blur-sm z-[70]',\n onClick: onClose\n }),\n // Full-screen panel\n h('div', {\n className:'fixed inset-0 z-[71] pointer-events-none'\n },\n h('div', {\n className:'glass-panel shadow-2xl pointer-events-auto flex flex-col overflow-hidden w-screen h-screen',\n onClick: (e) => e.stopPropagation()\n },\n // Header\n h('div', {className:'p-lg border-b border-border-subtle flex items-center justify-between flex-shrink-0'},\n h('div', {className:'flex items-center gap-3'},\n h(Icon, {name:'hub', size:20, filled:true, className:'text-primary'}),\n h('h3', {className:'text-[16px] font-bold tracking-tight'}, 'Knowledge Graph'),\n graph && h('span', {className:'text-[10px] font-bold uppercase tracking-widest bg-primary/10 text-primary border border-primary/20 px-2 py-0.5 rounded'},\n files.length + ' file' + (files.length===1?'':'s') + ' - ' + FEATURE_ORDER.length + ' features'\n )\n ),\n h('div', {className:'flex items-center gap-1'},\n h('button', {\n onClick: openNew,\n className:'inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-[11px] font-bold bg-primary text-on-primary hover:bg-primary/90 transition-colors mr-1',\n title:'Add a knowledge file'\n }, h(Icon, {name:'add', size:14}), 'Add knowledge'),\n h('button', {\n onClick: load,\n className:'p-1.5 rounded hover:bg-surface-container-high text-text-muted hover:text-on-surface transition-colors',\n title:'Reload'\n }, h(Icon, {name: loading ? 'sync' : 'refresh', size:16, className: loading ? 'spin' : ''})),\n h('button', {\n onClick: onClose,\n className:'p-1.5 rounded hover:bg-surface-container-high text-text-muted hover:text-on-surface transition-colors',\n title:'Close'\n }, h(Icon, {name:'close', size:18}))\n )\n ),\n\n // Body\n h('div', {className:'flex-1 overflow-hidden grid grid-cols-12 gap-0'},\n // LEFT: knowledge file list with kind + tokens + per-feature checkboxes\n h('div', {className:'col-span-5 border-r border-border-subtle overflow-y-auto p-md space-y-2'},\n error && h('div', {className:'p-3 text-[12px] text-error bg-error/5 border border-error/20 rounded'}, error),\n // Explainer — what knowledge is for + how it reaches the AI. Always visible.\n h('div', {className:'p-3 rounded-lg border border-primary/20 bg-primary/5 space-y-1.5'},\n h('div', {className:'flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-widest text-primary'},\n h(Icon, {name:'lightbulb', size:13, filled:true}),\n 'How knowledge works'\n ),\n h('div', {className:'text-[11px] leading-relaxed text-on-surface-variant'},\n 'Knowledge files are injected into the AI\\\\'s context so its answers stay grounded in ',\n h('strong', {className:'text-on-surface'}, 'your'),\n ' formulas, benchmarks, and playbooks — not generic guesses.'\n ),\n h('div', {className:'text-[10px] leading-relaxed text-text-muted'},\n 'Add a file below, then toggle which AI features load it. ',\n h('strong', {className:'text-on-surface-variant'}, 'Global'),\n ' files reach every feature; targeted files load only where you connect them.'\n ),\n h('button', {\n type:'button', onClick: openNew,\n className:'mt-1 inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-[11px] font-bold bg-primary text-on-primary hover:bg-primary/90 transition-colors'\n }, h(Icon, {name:'add', size:13}), 'Add knowledge')\n ),\n loading && files.length === 0 && h('div', {className:'flex items-center justify-center py-8'}, h(Spinner, {size:18})),\n !loading && files.length === 0 && !error && h('div', {className:'text-center text-[12px] text-text-muted py-6 border border-dashed border-border-subtle rounded-lg'},\n h(Icon, {name:'menu_book', size:28, className:'text-text-muted/50 mb-2 mx-auto block'}),\n h('div', {className:'font-semibold text-on-surface-variant'}, 'No knowledge files yet'),\n h('div', {className:'text-[10px] mt-1 px-4'}, 'Use Add knowledge above to paste or upload a doc (.txt .md .pdf .docx), pick its kind, and choose which features use it.')\n ),\n (() => {\n // Group files by kind into logical categories, fixed order, \"Other\" last.\n const groups = {};\n layout.kFiles.forEach(f => {\n const k = KIND_LABELS[f.kind] ? f.kind : 'other';\n (groups[k] = groups[k] || []).push(f);\n });\n const order = KIND_ORDER.filter(k => groups[k] && groups[k].length);\n if (groups.other && groups.other.length) order.push('other');\n return order.map(k => h('div', {key:'grp_' + k, className:'space-y-2'},\n h('div', {className:'flex items-center gap-2'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted whitespace-nowrap'}, KIND_LABELS[k]),\n h('span', {className:'text-[9px] font-mono-data text-text-muted'}, '(' + groups[k].length + ')'),\n h('span', {className:'flex-1 h-px bg-border-subtle/60'})\n ),\n groups[k].map(f => renderFileRow(f))\n ));\n })()\n ),\n\n // RIGHT: SVG graph\n h('div', {className:'col-span-7 relative overflow-hidden bg-surface-container-lowest/30'},\n h('svg', {\n ref: svgRef,\n viewBox: '0 0 ' + layout.W + ' ' + layout.H,\n preserveAspectRatio:'xMidYMid meet',\n style:{width:'100%', height:'100%', display:'block'}\n },\n // Column labels\n h('text', {x: 70, y: 14, textAnchor:'middle', style:{fill:'#9a96b1', fontSize:10, fontWeight:700, letterSpacing:'0.12em'}},\n 'KNOWLEDGE'\n ),\n h('text', {x: layout.W - 90, y: 14, textAnchor:'middle', style:{fill:'#9a96b1', fontSize:10, fontWeight:700, letterSpacing:'0.12em'}},\n 'AI FEATURES'\n ),\n\n // Edges — drawn first so nodes sit on top\n layout.kFiles.flatMap(f => {\n const targets = targetsOf(f);\n if (targets.length === 0) return [];\n const kp = layout.kPos[f.id];\n if (!kp) return [];\n const isHov = hoverKnowledge === f.id;\n const dimmed = hoverKnowledge && hoverKnowledge !== f.id;\n return targets.map(tid => {\n const fp = layout.fPos[tid];\n if (!fp) return null;\n // Bezier curve for a softer look\n const midX = (kp.x + fp.x) / 2;\n const d = 'M ' + kp.x + ' ' + kp.y +\n ' C ' + midX + ' ' + kp.y + ', ' + midX + ' ' + fp.y + ', ' + fp.x + ' ' + fp.y;\n return h('path', {\n key: f.id + '__' + tid,\n d,\n fill:'none',\n stroke: isHov ? COLOR_KNOWLEDGE : COLOR_EDGE,\n strokeWidth: isHov ? 1.8 : 1.2,\n opacity: isHov ? 1.0 : (dimmed ? 0.12 : 0.4),\n style:{cursor:'pointer', transition:'opacity 120ms, stroke 120ms, stroke-width 120ms'},\n onClick: () => removeEdge(f.id, tid),\n children: h('title', null, 'Click to remove: ' + f.name + ' → ' + (FEATURE_LABELS[tid] || tid))\n });\n }).filter(Boolean);\n }),\n\n // Knowledge nodes (circles, left column)\n layout.kFiles.map(f => {\n const p = layout.kPos[f.id];\n if (!p) return null;\n const isHov = hoverKnowledge === f.id;\n const dimmed = hoverKnowledge && hoverKnowledge !== f.id;\n const isGlobal = targetsOf(f).length === 0;\n return h('g', {\n key: 'kn_' + f.id,\n onMouseEnter: () => setHoverKnowledge(f.id),\n onMouseLeave: () => setHoverKnowledge(null),\n style:{cursor:'pointer', opacity: f.enabled ? (dimmed ? 0.35 : 1) : 0.4, filter: f.enabled ? 'none' : 'grayscale(1)', transition:'opacity 120ms'}\n },\n h('circle', {\n cx: p.x, cy: p.y, r: isHov ? 9 : 7,\n fill: COLOR_KNOWLEDGE,\n stroke: isHov ? '#ffffff' : 'rgba(255,255,255,0.15)',\n strokeWidth: isHov ? 2 : 1,\n style:{transition:'r 120ms, stroke 120ms'}\n }),\n isGlobal && h('circle', {\n cx: p.x, cy: p.y, r: 12,\n fill:'none', stroke: COLOR_KNOWLEDGE, strokeWidth: 1, opacity: 0.5,\n strokeDasharray:'2 2'\n }),\n h('text', {\n x: p.x - 14, y: p.y + 3, textAnchor:'end',\n style:{fill:'#e6e1f3', fontSize: 10.5, fontWeight: isHov ? 700 : 500}\n }, (f.name || '').length > 22 ? (f.name || '').slice(0, 21) + '…' : (f.name || '')),\n isGlobal && h('text', {\n x: p.x - 14, y: p.y + 14, textAnchor:'end',\n style:{fill:'#4edea3', fontSize: 8, fontWeight: 700, letterSpacing:'0.12em'}\n }, 'GLOBAL'),\n h('title', null, f.name + ' - ' + (f.kind || '') + ' - ' + fmtTokens(f.tokens_estimate))\n );\n }),\n\n // Feature nodes (rounded rects, right column)\n layout.features.map(feat => {\n const p = layout.fPos[feat.id];\n if (!p) return null;\n // Highlight if hovered knowledge targets it\n const hovFile = hoverKnowledge ? fileById(hoverKnowledge) : null;\n const isLit = hovFile && targetsOf(hovFile).includes(feat.id);\n const isGlobalHit = hovFile && targetsOf(hovFile).length === 0;\n const lit = isLit || isGlobalHit;\n return h('g', {key:'ft_' + feat.id, style:{cursor:'default'}},\n h('rect', {\n x: p.x - 56, y: p.y - 12, width: 112, height: 24, rx: 6, ry: 6,\n fill: lit ? COLOR_FEATURE : 'rgba(78, 222, 163, 0.18)',\n stroke: COLOR_FEATURE,\n strokeWidth: lit ? 1.8 : 1,\n opacity: hoverKnowledge && !lit ? 0.4 : 1,\n style:{transition:'opacity 120ms, fill 120ms, stroke-width 120ms'}\n }),\n h('text', {\n x: p.x, y: p.y + 3.5, textAnchor:'middle',\n style:{fill: lit ? '#0d2a1d' : '#e6e1f3', fontSize: 10.5, fontWeight: lit ? 700 : 600, pointerEvents:'none'}\n }, feat.label),\n // \"+\" add button on the right of each feature pill\n h('g', {\n onClick: () => setAddPopover(addPopover === feat.id ? null : feat.id),\n style:{cursor:'pointer'}\n },\n h('circle', {\n cx: p.x + 70, cy: p.y, r: 9,\n fill: addPopover === feat.id ? COLOR_FEATURE : 'rgba(255,255,255,0.06)',\n stroke: COLOR_FEATURE, strokeWidth: 1\n }),\n h('text', {\n x: p.x + 70, y: p.y + 4, textAnchor:'middle',\n style:{fill: addPopover === feat.id ? '#0d2a1d' : COLOR_FEATURE, fontSize: 12, fontWeight: 900, pointerEvents:'none'}\n }, '+'),\n h('title', null, 'Add a knowledge file to ' + feat.label)\n )\n );\n })\n ),\n\n // Add popover — overlaid on top of the SVG, anchored to the active feature node.\n addPopover && (() => {\n const idx = FEATURE_ORDER.indexOf(addPopover);\n if (idx < 0) return null;\n const candidates = availableForFeature(addPopover);\n // Approximate popover position as a percentage of the SVG container\n const topPct = ((30 + (FEATURE_ORDER.length > 1 ? (idx * (560 - 60) / (FEATURE_ORDER.length - 1)) : (560-60)/2)) / 560) * 100;\n return h('div', {\n className:'absolute z-10 glass-panel border border-border-subtle rounded-lg shadow-xl p-2 w-[220px] max-h-[260px] overflow-y-auto',\n style:{right: 16, top: 'calc(' + topPct.toFixed(2) + '% - 8px)'},\n onClick: (e) => e.stopPropagation()\n },\n h('div', {className:'flex items-center justify-between mb-1.5 px-1'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'},\n 'Add to ' + (FEATURE_LABELS[addPopover] || addPopover)\n ),\n h('button', {\n onClick: () => setAddPopover(null),\n className:'text-text-muted hover:text-on-surface'\n }, h(Icon, {name:'close', size:12}))\n ),\n candidates.length === 0\n ? h('div', {className:'text-[11px] text-text-muted italic px-2 py-3 text-center'},\n 'All enabled files already target this feature.'\n )\n : candidates.map(f => h('button', {\n key: f.id,\n onClick: () => {\n toggleTarget(f, addPopover);\n setAddPopover(null);\n },\n className:'w-full flex items-center gap-2 px-2 py-1.5 rounded text-left text-[11px] text-on-surface-variant hover:bg-primary/10 hover:text-primary transition-colors'\n },\n h('span', {className:'w-1.5 h-1.5 rounded-full bg-primary/60 flex-shrink-0'}),\n h('span', {className:'flex-1 truncate'}, f.name),\n f.kind && h('span', {className:'text-[9px] font-mono-data text-text-muted'}, f.kind)\n ))\n );\n })()\n )\n ),\n\n // Editor overlay — opens on top of the graph modal when a knowledge row is clicked.\n editing && h('div', {\n className:'absolute inset-0 bg-black/40 backdrop-blur-sm z-20 flex items-center justify-center p-4',\n onClick: closeEditor\n },\n h('div', {\n className:'glass-panel rounded-lg border border-border-subtle shadow-2xl flex flex-col overflow-hidden',\n style:{width:'min(820px, 96%)', height:'min(620px, 92%)'},\n onClick: (e) => e.stopPropagation()\n },\n // Editor header\n h('div', {className:'p-md border-b border-border-subtle flex items-center justify-between flex-shrink-0'},\n h('div', {className:'flex items-center gap-2 flex-1 min-w-0'},\n h(Icon, {name:'edit_note', size:18, className:'text-primary flex-shrink-0'}),\n editing && editing.loading\n ? h('span', {className:'text-[13px] font-semibold text-text-muted'}, 'Loading…')\n : h('input', {\n value: (editForm && editForm.name) || '',\n onChange: (e) => setEditForm(f => ({...f, name: e.target.value})),\n placeholder:'Knowledge file name',\n className:'flex-1 bg-transparent border-0 outline-none text-[14px] font-semibold text-on-surface px-1 focus:bg-surface-container-high rounded'\n })\n ),\n h('button', {\n onClick: closeEditor,\n className:'p-1.5 rounded hover:bg-surface-container-high text-text-muted hover:text-on-surface transition-colors flex-shrink-0',\n title:'Close'\n }, h(Icon, {name:'close', size:16}))\n ),\n\n // Toolbar: kind dropdown + enabled toggle + tabs + meta\n h('div', {className:'px-md py-2 border-b border-border-subtle flex items-center gap-3 flex-wrap flex-shrink-0 bg-surface-container/30'},\n h('label', {className:'flex items-center gap-1.5 text-[11px] text-text-muted'},\n 'Kind',\n h('select', {\n value: (editForm && editForm.kind) || 'playbook',\n onChange: (e) => setEditForm(f => ({...f, kind: e.target.value})),\n className:'bg-surface-container-high border border-border-subtle rounded px-1.5 py-0.5 text-[11px] text-on-surface'\n },\n ['playbook','framework','benchmark','formula','reference'].map(k => h('option', {key:k, value:k}, k))\n )\n ),\n h('label', {className:'flex items-center gap-1.5 text-[11px] cursor-pointer text-text-muted'},\n h('input', {\n type:'checkbox', checked: !!(editForm && editForm.enabled),\n onChange: (e) => setEditForm(f => ({...f, enabled: e.target.checked})),\n className:'accent-primary'\n }),\n 'Enabled in AI context'\n ),\n h('div', {className:'flex items-center gap-1 ml-auto'},\n // Hidden file input + Upload button — extracts text/PDF/DOCX into content.\n h('input', {\n ref: uploadInputRef, type:'file',\n accept:'.txt,.md,.csv,.json,.pdf,.docx',\n onChange: onUploadFile,\n className:'hidden'\n }),\n h('button', {\n type:'button',\n onClick: () => uploadInputRef.current && uploadInputRef.current.click(),\n disabled: uploadBusy,\n title:'Upload a file (.txt .md .csv .json .pdf .docx) into content',\n className:'px-2.5 py-1 rounded text-[11px] font-semibold text-text-muted hover:text-on-surface hover:bg-surface-container-high transition-colors disabled:opacity-50 inline-flex items-center gap-1'\n },\n uploadBusy ? h(Spinner, {size:12}) : h(Icon, {name:'upload_file', size:14}),\n uploadBusy ? 'Reading…' : 'Upload'\n ),\n h('button', {\n onClick: () => setEditTab('content'),\n className:'px-2.5 py-1 rounded text-[11px] font-semibold transition-colors ' +\n (editTab==='content' ? 'bg-primary/15 text-primary' : 'text-text-muted hover:text-on-surface')\n }, 'Content'),\n h('button', {\n onClick: () => setEditTab('targets'),\n className:'px-2.5 py-1 rounded text-[11px] font-semibold transition-colors ' +\n (editTab==='targets' ? 'bg-primary/15 text-primary' : 'text-text-muted hover:text-on-surface')\n },\n 'Targets ',\n h('span', {className:'text-[10px] opacity-70'},\n '(' + ((editForm && editForm.targets && editForm.targets.length) || 0) + (editForm && editForm.targets && editForm.targets.length === 0 ? ' = global' : '') + ')'\n )\n )\n )\n ),\n\n // Body\n h('div', {className:'flex-1 overflow-hidden flex flex-col'},\n editTab === 'content'\n ? h('textarea', {\n value: (editForm && editForm.content) || '',\n onChange: (e) => setEditForm(f => ({...f, content: e.target.value})),\n spellCheck: false,\n placeholder:'# Knowledge content (Markdown)\\\\n\\\\nDescribe formulas, thresholds, playbooks the AI should follow…',\n className:'flex-1 w-full bg-surface-container-lowest/40 border-0 outline-none p-md text-[12px] font-mono-data text-on-surface resize-none'\n })\n : h('div', {className:'flex-1 overflow-y-auto p-md'},\n h('div', {className:'text-[11px] text-text-muted mb-2'},\n 'Pick the AI features that should load this file. ',\n h('strong', {className:'text-on-surface-variant'}, 'Empty = global'),\n ' (loaded by every feature).'\n ),\n h('div', {className:'grid grid-cols-2 gap-1.5'},\n FEATURE_ORDER.map(fid => {\n const on = editForm && editForm.targets && editForm.targets.includes(fid);\n return h('label', {\n key: fid,\n className:'flex items-center gap-2 px-2.5 py-2 rounded border cursor-pointer transition-colors ' +\n (on\n ? 'bg-primary/10 text-primary border-primary/30'\n : 'bg-surface-container-lowest text-on-surface-variant border-border-subtle hover:border-border')\n },\n h('input', {\n type:'checkbox', checked: !!on,\n onChange: () => setEditForm(f => {\n const cur = Array.isArray(f.targets) ? f.targets : [];\n const next = cur.includes(fid) ? cur.filter(t => t !== fid) : cur.concat([fid]);\n return {...f, targets: next};\n }),\n className:'accent-primary'\n }),\n h('span', {className:'text-[12px] font-semibold'}, FEATURE_LABELS[fid] || fid)\n );\n })\n ),\n h('button', {\n onClick: () => setEditForm(f => ({...f, targets: []})),\n className:'mt-3 text-[10px] uppercase tracking-widest font-bold text-text-muted hover:text-primary transition-colors'\n }, 'Reset to global')\n )\n ),\n\n // Footer: actions + meta + error\n h('div', {className:'px-md py-2.5 border-t border-border-subtle bg-surface-container/30 flex-shrink-0'},\n editErr && h('div', {className:'mb-2 text-[11px] text-error bg-error/5 border border-error/20 rounded px-2 py-1'}, editErr),\n h('div', {className:'flex items-center gap-2'},\n editing && editing.id != null && h('button', {\n onClick: deleteFile, disabled: editBusy,\n className:'px-2.5 py-1.5 rounded text-[11px] font-semibold text-error hover:bg-error/10 transition-colors disabled:opacity-50',\n title:'Delete this knowledge file'\n }, h(Icon, {name:'delete', size:14, className:'inline mr-1'}), 'Delete'),\n editing && editing.id != null && h('button', {\n onClick: resummarize, disabled: editBusy,\n className:'px-2.5 py-1.5 rounded text-[11px] font-semibold text-text-muted hover:text-on-surface hover:bg-surface-container-high transition-colors disabled:opacity-50',\n title:'Re-summarize and recompute tokens from current content'\n }, h(Icon, {name:'auto_awesome', size:14, className:'inline mr-1'}), 'Re-summarize'),\n h('span', {className:'flex-1 text-[10px] text-text-muted font-mono-data text-right'},\n editing && editing.tokens_estimate != null ? fmtTokens(editing.tokens_estimate) + ' • ' : '',\n editing && editing.source ? editing.source : ''\n ),\n h('button', {\n onClick: closeEditor, disabled: editBusy,\n className:'px-3 py-1.5 rounded text-[11px] font-semibold text-text-muted hover:text-on-surface hover:bg-surface-container-high transition-colors disabled:opacity-50'\n }, 'Cancel'),\n h('button', {\n onClick: saveEditor, disabled: editBusy || !editForm || !(editForm.name || '').trim(),\n className:'px-3 py-1.5 rounded text-[11px] font-bold bg-primary text-on-primary hover:bg-primary/90 transition-colors disabled:opacity-50 inline-flex items-center gap-1.5'\n },\n editBusy && h(Spinner, {size:12}),\n 'Save'\n )\n )\n )\n )\n ),\n\n // Footer hint strip\n h('div', {className:'px-lg py-2 border-t border-border-subtle flex items-center justify-between text-[10px] text-text-muted bg-surface-container/30 flex-shrink-0'},\n h('div', {className:'flex items-center gap-3'},\n h('span', {className:'flex items-center gap-1.5'},\n h('span', {className:'w-2 h-2 rounded-full', style:{background: COLOR_KNOWLEDGE}}),\n 'knowledge'\n ),\n h('span', {className:'flex items-center gap-1.5'},\n h('span', {className:'w-2 h-2 rounded-sm', style:{background: COLOR_FEATURE}}),\n 'AI feature'\n ),\n h('span', {className:'flex items-center gap-1.5'},\n h('span', {className:'w-3 h-px', style:{background: COLOR_EDGE}}),\n 'click edge to disconnect'\n )\n ),\n h('span', null, 'Hover a knowledge file to highlight its reach.')\n )\n )\n )\n );\n}\n`;\n}\n",[352],"264f8a5a-5ef9-11f1-b22e-1607ee4eb77e","frontend_js2.ts","8e7f1b2c-5792-11f1-a888-ee650bb23af1",961,["D",1780455960768],60,"export function getAppJS2(): string {\n return `\n\n // Deterministic icon picker by agent name hash - gives Market Sentry / Creative Weaver / Threat Hunter variety.\n const AGENT_ICONS = ['psychology', 'architecture', 'security', 'monitoring', 'biotech', 'hub', 'auto_awesome', 'memory'];\n const iconForAgent = (agent) => {\n const tools = parseTools(agent.tools);\n if (tools.includes('ahrefs') || tools.includes('gsc')) return 'security';\n if (tools.includes('ga4') || tools.includes('youtube')) return 'monitoring';\n if (tools.includes('wordpress') || tools.includes('producthunt')) return 'architecture';\n if (agent.workspace === 'sales') return 'contact_mail';\n const s = (agent.name || '').split('').reduce((a,c) => a + c.charCodeAt(0), 0);\n return AGENT_ICONS[s % AGENT_ICONS.length];\n };\n\n // \"time ago\" for last_run_at (real timestamp). Returns '-' when never run.\n const fmtAgo = (iso) => {\n if (!iso) return 'never';\n const ms = Date.now() - new Date(iso).getTime();\n const h = Math.floor(ms / 3600000), m = Math.floor((ms % 3600000) / 60000);\n if (ms < 60000) return 'just now';\n if (ms < 3600000) return m + 'm ago';\n if (ms < 86400000) return h + 'h ' + m + 'm ago';\n return Math.floor(h/24) + 'd ago';\n };\n\n function AgentCard({agent, onToggle, onEdit, onDelete, onRun}) {\n const [running, setRunning] = useState(false);\n const [recent, setRecent] = useState([]);\n // C3: pull last 3 runs for the timeline strip (cheap query, indexed on agent_id).\n useEffect(() => {\n fetch(\\`/api/agents/\\${agent.id}/runs?limit=3\\`).then(r => r.json()).then(r => Array.isArray(r) && setRecent(r)).catch(() => {});\n }, [agent.id, running]);\n const handleRun = async () => {\n setRunning(true);\n try {\n // Record the manual run trigger before delegating to onRun (which does the actual work).\n await fetch(\\`/api/agents/\\${agent.id}/runs\\`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({trigger:'manual'})}).catch(() => {});\n await onRun(agent);\n } finally { setRunning(false); }\n };\n const tools = parseTools(agent.tools);\n const isMarketing = agent.workspace === 'marketing';\n const accent = isMarketing ? 'primary' : 'secondary';\n const accentClasses = isMarketing\n ? { glow: 'neon-glow-primary', border: '', iconBg: 'bg-primary/10 border-primary/20', iconText: 'text-primary' }\n : { glow: 'neon-glow-secondary', border: 'border-l-4 border-l-secondary/30', iconBg: 'bg-secondary/10 border-secondary/20', iconText: 'text-secondary' };\n\n // Footer shows REAL last-run time (last_run_at from the run-state contract) + an\n // always-actionable run button. While a manual run is in flight we show an honest\n // \"Executing-\" spinner-text (no fabricated progress percentage).\n let footer;\n if (running) {\n footer = h('div', {className:'pt-3 border-t border-border-subtle flex justify-between items-center gap-2'},\n h('span', {className:'font-mono-data text-[11px] text-text-muted'}, 'Executing-'),\n h(Spinner, {size: 12})\n );\n } else {\n footer = h('div', {className:'pt-3 border-t border-border-subtle flex justify-between items-center gap-2'},\n h('span', {className:'font-mono-data text-[11px] text-text-muted'},\n 'Last run: ' + fmtAgo(agent.last_run_at)\n ),\n h('button', {\n onClick: handleRun, type:'button',\n className:'text-' + accent + ' font-bold text-[10px] uppercase tracking-widest hover:underline'\n }, agent.enabled ? 'Run Now' : 'Wake Agent')\n );\n }\n\n return h('div', {\n className: 'glass-panel p-5 rounded-xl group transition-all flex flex-col gap-3.5 ' + accentClasses.glow + ' ' + accentClasses.border\n },\n h('div', {className:'flex justify-between items-start gap-2.5'},\n h('div', {className:'flex items-center gap-3 flex-1 min-w-0'},\n h('div', {className:'w-12 h-12 border rounded-lg flex items-center justify-center flex-shrink-0 transition-all group-hover:scale-105 ' + accentClasses.iconBg + ' ' + accentClasses.iconText},\n h(Icon, {name: iconForAgent(agent), size:28})\n ),\n h('div', {className:'min-w-0 flex-1'},\n h('h3', {className:'font-bold text-[15px] text-on-surface truncate'}, agent.name),\n // Real run-state (contract #1): \"Running\" only when a run is actually in flight\n // (is_running, or this card's own manual run), else \"Active\" (enabled) / \"Idle\".\n (() => {\n const isRunning = running || !!agent.is_running;\n const dotClass = isRunning ? 'bg-tertiary pulse-dot' : (agent.enabled ? 'bg-secondary' : 'bg-text-muted');\n const txtClass = isRunning ? 'text-tertiary' : (agent.enabled ? 'text-secondary' : 'text-text-muted');\n const label = isRunning ? 'Running' : (agent.enabled ? 'Active' : 'Idle');\n return h('div', {className:'flex items-center gap-1.5 mt-0.5'},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + dotClass}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-wider ' + txtClass}, label)\n );\n })()\n )\n ),\n h('div', {className:'relative flex items-center gap-1'},\n h(Toggle, {value: !!agent.enabled, onChange: v => onToggle(agent.id, v ? 1 : 0)}),\n h('button', {\n onClick: () => onEdit(agent), title:'Edit',\n className:'p-1 rounded-md text-on-surface-variant hover:text-' + accent + ' transition-all'\n }, h(Icon, {name:'more_vert', size:18})),\n onDelete && h('button', {\n onClick: () => onDelete(agent.id), title:'Delete agent',\n className:'p-1 rounded-md text-on-surface-variant hover:text-error transition-all'\n }, h(Icon, {name:'delete', size:18}))\n )\n ),\n\n agent.description && h('p', {className:'text-[13px] text-on-surface-variant leading-relaxed line-clamp-2'},\n agent.description\n ),\n\n tools.length > 0 && h('div', {className:'flex flex-wrap gap-1.5'},\n tools.slice(0, 4).map(t => h('span', {\n key: t,\n className:'px-2 py-1 bg-surface-container-high rounded text-[10px] font-semibold uppercase tracking-wider text-on-surface-variant'\n }, t))\n ),\n\n // C3: recent-run timeline - colored dots (latest on the right) with status tooltip\n recent.length > 0 && h('div', {className:'flex items-center gap-1.5 text-[10px] text-text-muted'},\n h('span', {className:'uppercase tracking-widest'}, 'Recent'),\n h('div', {className:'flex gap-0.5'},\n recent.slice().reverse().map(r => h('span', {\n key: r.id,\n title: (r.status || 'unknown') + (r.duration_ms ? ' - ' + r.duration_ms + 'ms' : '') + (r.started_at ? ' - ' + r.started_at : ''),\n className: 'w-1.5 h-1.5 rounded-full ' +\n (r.status === 'completed' ? 'bg-secondary' :\n r.status === 'failed' ? 'bg-error' :\n r.status === 'running' ? 'bg-tertiary pulse-dot' : 'bg-text-muted')\n }))\n )\n ),\n\n footer\n );\n }\n\n\n // I3: Agent roles. Each role injects a specialized system-prompt prefix in api/chat.ts.\n const AGENT_ROLES = [\n { key:'general', label:'General', icon:'auto_awesome', desc:'No specialized prompt - uses your custom system prompt only.' },\n { key:'listener', label:'Listener', icon:'hearing', desc:'Monitors Gmail/Outlook/LinkedIn for buyer intent. Flags patterns weekly.' },\n { key:'topic', label:'Topic', icon:'lightbulb', desc:'Generates content ideas from pain signals. Outputs ICE-scored backlog.' },\n { key:'creator', label:'Creator', icon:'edit_note', desc:'Drafts blog/LinkedIn/email assets in your brand voice with data citations.' },\n { key:'analyst', label:'Analyst', icon:'analytics', desc:'Daily funnel analysis. Identifies bottleneck. Proposes top 3 ICE experiments.' },\n ];\n\n function AgentBuilderDrawer({agent, onSave, onClose}) {\n const [form, setForm] = useState({\n name: agent?.name || '',\n workspace: agent?.workspace || 'marketing',\n description: agent?.description || '',\n system_prompt: agent?.system_prompt || '',\n tools: parseTools(agent?.tools),\n role: agent?.role || 'general',\n model: agent?.model || 'claude-sonnet-4-6',\n // B2: monthly LLM-cost cap (USD). Default $250 matches db.ts agent_budgets default.\n monthly_cap: agent?.monthly_cap != null ? String(agent.monthly_cap) : '250',\n });\n const [showCustomIntegrations, setShowCustomIntegrations] = useState(false);\n const [autonomous, setAutonomous] = useState(!!agent?.enabled);\n const [saving, setSaving] = useState(false);\n const setField = (k, v) => setForm(f => ({...f, [k]: v}));\n const toggleTool = (t) => setField('tools', form.tools.includes(t) ? form.tools.filter(x => x !== t) : [...form.tools, t]);\n\n const handleSave = async () => {\n if (!form.name.trim()) return;\n setSaving(true);\n await onSave({...form, id: agent?.id, enabled: autonomous ? 1 : 0});\n setSaving(false);\n onClose();\n };\n\n return h(React.Fragment, null,\n h('div', {\n className:'fixed inset-0 bg-black/60 backdrop-blur-sm z-[55]',\n onClick: onClose\n }),\n h('div', {\n className:'fixed inset-y-0 right-0 w-full sm:w-[460px] glass-panel border-l border-border-subtle shadow-2xl z-[60] drawer-in'\n },\n h('div', {className:'h-full flex flex-col p-xl'},\n h('div', {className:'flex justify-between items-center mb-xl'},\n h('div', null,\n h('h2', {className:'text-[22px] font-extrabold text-on-surface tracking-tight'}, agent ? 'Edit Agent Node' : 'New Agent Node'),\n h('p', {className:'text-[13px] text-text-muted mt-0.5'}, agent ? 'Reconfigure protocol' : 'System initialization protocol')\n ),\n h('button', {\n onClick: onClose, type:'button',\n className:'w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-variant/30 transition-all'\n }, h(Icon, {name:'close', size:20}))\n ),\n\n h('div', {className:'flex-1 overflow-y-auto pr-2 -mr-2 space-y-xl'},\n\n h('section', null,\n h('div', {className:'flex items-center gap-3 mb-md'},\n h('span', {className:'w-7 h-7 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-[12px]'}, '1'),\n h('h4', {className:'text-[15px] font-bold text-on-surface'}, 'Core Identity')\n ),\n h('div', {className:'space-y-md'},\n h(Input, {label:'Agent Designation', value: form.name, onChange: v => setField('name', v), placeholder:'e.g. Lead Sourcing Alpha'}),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Workspace'),\n h('div', {className:'flex gap-2'},\n ['marketing','sales'].map(w => h('button', {\n key: w, onClick: () => setField('workspace', w), type:'button',\n className: 'flex-1 px-4 py-2.5 rounded-lg border text-[13px] font-medium capitalize transition-all ' +\n (form.workspace === w\n ? 'border-primary bg-primary/15 text-primary'\n : 'border-border-subtle bg-surface-container-lowest text-text-muted hover:border-outline/40')\n }, w))\n )\n ),\n h(Textarea, {label:'Strategic Directive', value: form.description, onChange: v => setField('description', v), placeholder:'Define the primary objective-', rows: 3}),\n // I3: Role selector - Listener/Topic/Creator/Analyst inject specialized\n // system-prompt prefixes server-side (see api/chat.ts AGENT_ROLE_PROMPTS).\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Agent Role'),\n h('div', {className:'grid grid-cols-5 gap-1.5'},\n AGENT_ROLES.map(r => h('button', {\n key: r.key, onClick: () => setField('role', r.key), type:'button',\n className: 'flex flex-col items-center gap-1 p-2 rounded-lg border text-[10px] font-bold uppercase tracking-wider transition-all ' +\n (form.role === r.key\n ? 'border-primary bg-primary/10 text-primary'\n : 'border-border-subtle bg-surface-container-lowest text-text-muted hover:border-outline/40')\n },\n h(Icon, {name: r.icon, size: 16}),\n h('span', null, r.label)\n ))\n ),\n h('p', {className:'text-[10px] text-text-muted leading-snug'},\n AGENT_ROLES.find(r => r.key === form.role)?.desc\n )\n ),\n h(Textarea, {label:'System Prompt', value: form.system_prompt, onChange: v => setField('system_prompt', v), placeholder:'You are a helpful marketing assistant-', rows: 5})\n )\n ),\n\n h('section', null,\n h('div', {className:'flex items-center gap-3 mb-md'},\n h('span', {className:'w-7 h-7 rounded-full bg-surface-container-highest text-on-surface flex items-center justify-center font-bold text-[12px]'}, '2'),\n h('h4', {className:'text-[15px] font-bold text-on-surface'}, 'Capabilities')\n ),\n h('button', {\n onClick: () => setShowCustomIntegrations(s => !s), type:'button',\n className:'w-full py-2 border border-dashed border-border-subtle rounded-lg text-[11px] font-semibold uppercase tracking-widest text-text-muted hover:text-on-surface hover:border-primary/40 transition-all'\n }, showCustomIntegrations ? '- HIDE INTEGRATION TOOLS' : '+ ADD CUSTOM INTEGRATION'),\n showCustomIntegrations && h('div', {className:'mt-md grid grid-cols-2 gap-2'},\n ALL_TOOLS.map(t => {\n const on = form.tools.includes(t);\n const meta = INTEGRATION_META[t];\n return h('button', {\n key: t, onClick: () => toggleTool(t), type:'button',\n className:'px-2.5 py-2 border rounded-lg flex items-center gap-2 cursor-pointer transition-all ' +\n (on ? 'border-secondary bg-secondary/10' : 'border-border-subtle hover:bg-secondary/5')\n },\n h(BrandIcon, {slug: meta?.icon || t, color: meta?.color || '#4edea3', size: 12, bare: true}),\n h('span', {className:'text-[11px] flex-1 text-left text-on-surface-variant capitalize'}, t),\n on && h(Icon, {name:'check', size:14, className:'text-secondary'})\n );\n })\n )\n ),\n\n h('section', null,\n h('div', {className:'flex items-center gap-3 mb-md'},\n h('span', {className:'w-7 h-7 rounded-full bg-surface-container-highest text-on-surface flex items-center justify-center font-bold text-[12px]'}, '3'),\n h('h4', {className:'text-[15px] font-bold text-on-surface'}, 'Governor Settings')\n ),\n h('div', {className:'space-y-2.5'},\n h('div', {className:'flex justify-between items-center bg-surface-container/40 p-3.5 rounded-lg'},\n h('div', null,\n h('span', {className:'text-[13px] font-medium text-on-surface'}, 'Autonomous Mode'),\n h('div', {className:'text-[10px] text-text-muted mt-0.5'}, 'Run on schedule without user prompts')\n ),\n h(Toggle, {value: autonomous, onChange: setAutonomous})\n ),\n // B2: real Budget Cap input - persisted to agent_budgets, enforced server-side later.\n h('div', {className:'bg-surface-container/40 p-3.5 rounded-lg space-y-2'},\n h('div', {className:'flex justify-between items-center'},\n h('div', null,\n h('span', {className:'text-[13px] font-medium text-on-surface'}, 'Budget Cap (Monthly)'),\n h('div', {className:'text-[10px] text-text-muted mt-0.5'},\n 'USD ceiling for LLM spend (tracked; enforcement coming)',\n agent?.current_spend != null\n ? ' - $' + Number(agent.current_spend).toFixed(2) + ' used'\n : ''\n )\n ),\n h('div', {className:'flex items-center gap-1'},\n h('span', {className:'text-[13px] text-text-muted font-mono-data'}, '$'),\n h('input', {\n type:'number', min:0, step:10,\n value: form.monthly_cap,\n onChange: e => setField('monthly_cap', e.target.value.replace(/[^0-9.]/g,'')),\n className:'w-24 bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[13px] font-mono-data text-right text-on-surface focus:border-primary focus:outline-none',\n })\n )\n ),\n agent?.current_spend != null && agent?.monthly_cap > 0 && (() => {\n const pct = Math.min(100, (Number(agent.current_spend) / Number(agent.monthly_cap)) * 100);\n const bar = pct >= 100 ? 'bg-error' : pct >= 80 ? 'bg-tertiary' : 'bg-secondary';\n return h('div', {className:'h-1 w-full bg-surface-container rounded-full overflow-hidden'},\n h('div', {className:'h-full ' + bar, style:{width: pct + '%'}})\n );\n })()\n ),\n h(Input, {label:'Model', value: form.model, onChange: v => setField('model', v), placeholder:'claude-sonnet-4-6'})\n )\n )\n ),\n\n h('div', {className:'mt-auto pt-lg border-t border-border-subtle grid grid-cols-2 gap-3'},\n h(Btn, {onClick: onClose, variant:'ghost', size:'md'}, 'Cancel'),\n h(Btn, {onClick: handleSave, variant:'secondary', size:'md', disabled: !form.name.trim() || saving},\n saving ? h(Spinner, {size:14}) : h(Icon, {name: agent?'save':'rocket_launch', size:15}),\n saving ? 'Saving-' : (agent ? 'Update Node' : 'Deploy Node')\n )\n )\n )\n )\n );\n }\n\n\n function AgentStudio({agents, setAgents, setChatOpen, setChatMessages, setConvId, showToast}) {\n const [showBuilder, setShowBuilder] = useState(false);\n const [editingAgent, setEditingAgent] = useState(null);\n // Hierarchy data: campaigns (each carries its member agents + objective_id) + objectives, so\n // the studio groups agents by Objective -> Campaign instead of a flat fleet. Live on nexus:tick.\n const [campaigns, setCampaigns] = useState([]);\n const [objectives, setObjectives] = useState([]);\n // History Log: REAL cross-agent run feed (contract #2), newest first. Auto-refreshes\n // on nexus:tick + every 20s so the \"Live\" badge is honest. No seed/fabricated rows.\n const [activity, setActivity] = useState([]);\n useEffect(() => {\n let alive = true;\n const load = () => {\n fetch('/api/campaigns').then(r => r.json()).then(d => { if (alive && Array.isArray(d)) setCampaigns(d); }).catch(() => {});\n fetch('/api/okrs').then(r => r.json()).then(d => { if (alive && Array.isArray(d)) setObjectives(d); }).catch(() => {});\n fetch('/api/agents/activity?limit=20').then(r => r.json()).then(d => { if (alive && d && Array.isArray(d.activity)) setActivity(d.activity); }).catch(() => {});\n };\n load();\n const onTick = () => load();\n window.addEventListener('nexus:tick', onTick);\n const iv = setInterval(load, 20000);\n return () => { alive = false; clearInterval(iv); window.removeEventListener('nexus:tick', onTick); };\n }, [agents.length]);\n\n const handleSaveAgent = async (form) => {\n try {\n const isEdit = !!form.id;\n const url = isEdit ? \\`/api/agents/\\${form.id}\\` : '/api/agents';\n const method = isEdit ? 'PUT' : 'POST';\n const payload = {\n name: form.name, workspace: form.workspace, description: form.description,\n system_prompt: form.system_prompt, tools: form.tools, model: form.model,\n ...(form.enabled !== undefined ? {enabled: form.enabled} : {}),\n // B2: pass budget cap through to /api/agents (handler writes to agent_budgets).\n ...(form.monthly_cap !== undefined && form.monthly_cap !== ''\n ? {monthly_cap: parseFloat(form.monthly_cap) || 0}\n : {}),\n // I3: agent role (Listener/Topic/Creator/Analyst/General)\n ...(form.role ? {role: form.role} : {}),\n };\n const res = await fetch(url, { method, headers:{'Content-Type':'application/json'}, body: JSON.stringify(payload) });\n if (!res.ok) throw new Error('Failed to save agent');\n const saved = await res.json();\n setAgents(prev => isEdit ? prev.map(a => a.id === saved.id ? saved : a) : [...prev, saved]);\n showToast(isEdit ? 'Agent updated' : 'Agent deployed', 'success');\n } catch (e) { showToast('Failed to save agent: ' + e.message, 'error'); }\n };\n\n const handleToggle = async (id, enabled) => {\n try {\n const res = await fetch(\\`/api/agents/\\${id}\\`, { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({enabled}) });\n if (!res.ok) throw new Error();\n setAgents(prev => prev.map(a => a.id === id ? {...a, enabled} : a));\n } catch { showToast('Failed to update agent', 'error'); }\n };\n\n const handleDelete = async (id) => {\n if (!confirm('Delete this agent node?')) return;\n try {\n const res = await fetch(\\`/api/agents/\\${id}\\`, {method:'DELETE'});\n if (!res.ok) throw new Error();\n setAgents(prev => prev.filter(a => a.id !== id));\n showToast('Agent deleted', 'info');\n } catch { showToast('Failed to delete agent', 'error'); }\n };\n\n const handleRun = async (agent) => {\n const msg = (\\`Execute your primary task now. \\${agent.description || ''}\\`).trim();\n const userMsg = {role:'user', content: \\`[\\${agent.name}] \\${msg}\\`, id: Date.now()};\n setChatMessages(prev => [...prev, userMsg]);\n setChatOpen(true);\n try {\n const res = await fetch('/api/chat', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({message: msg, agent_id: agent.id, workspace: agent.workspace})\n });\n const data = await res.json();\n if (!res.ok) throw new Error(data?.error?.message || data?.error || \\`HTTP \\${res.status}\\`);\n // Share the run's conversation with the chat panel so follow-up messages keep context.\n if (data.conversation_id && setConvId) setConvId(data.conversation_id);\n setChatMessages(prev => [...prev, {role:'assistant', content: data.response, trace: data.trace, id: Date.now()+1}]);\n showToast(\\`Agent \"\\${agent.name}\" completed\\`, 'success');\n } catch (e) {\n setChatMessages(prev => [...prev, {role:'assistant', content: \\`Error: \\${e.message}\\`, id: Date.now()+1, error: true}]);\n showToast(\\`Agent \"\\${agent.name}\" failed\\`, 'error');\n }\n };\n\n // History Log rows come straight from REAL agent_runs (the activity state above).\n // Map each run to a display row: agent name, workspace tone, timestamp, status + output.\n const fmtRunTime = (iso) => {\n if (!iso) return '-';\n const d = new Date(iso);\n if (isNaN(d.getTime())) return '-';\n return d.toLocaleTimeString('en-US', {hour12:false, hour:'2-digit', minute:'2-digit', second:'2-digit'});\n };\n const historyLog = activity.map(r => ({\n id: r.id,\n name: r.name || 'Agent',\n workspace: r.workspace || 'marketing',\n status: r.status || 'unknown',\n time: fmtRunTime(r.finished_at || r.started_at),\n msg: (r.output && String(r.output).trim()) ? String(r.output).slice(0, 240) : ('Run ' + (r.status || 'recorded'))\n }));\n\n // Group agents by Objective -> Campaign -> agents (+ Unassigned). campaign.agents carries the\n // member links (agent_id / agent), campaign.objective_id -> the parent OKR.\n const objById = {}; objectives.forEach(o => { objById[String(o.id)] = o; });\n const agentCampaign = {};\n campaigns.forEach(c => { (c.agents || []).forEach(m => {\n const aid = String(m && (m.agent_id != null ? m.agent_id : (m.agent && m.agent.id)));\n if (aid && aid !== 'undefined' && aid !== 'null') agentCampaign[aid] = c;\n }); });\n const groupsMap = {}; const unassigned = [];\n agents.forEach(a => {\n const c = agentCampaign[String(a.id)];\n if (c) {\n const cid = String(c.id);\n if (!groupsMap[cid]) groupsMap[cid] = { campaign: c, objective: (c.objective_id != null ? objById[String(c.objective_id)] : null), agents: [] };\n groupsMap[cid].agents.push(a);\n } else unassigned.push(a);\n });\n const campaignGroups = Object.keys(groupsMap).map(k => groupsMap[k]);\n const mkCard = (agent) => h(AgentCard, { key: agent.id, agent, onToggle: handleToggle, onEdit: (a) => { setEditingAgent(a); setShowBuilder(true); }, onDelete: handleDelete, onRun: handleRun });\n const newNodeCard = h('div', {\n key: 'new-node',\n onClick: () => { setEditingAgent(null); setShowBuilder(true); },\n className:'border-2 border-dashed border-border-subtle p-6 rounded-xl flex flex-col items-center justify-center text-center group hover:border-primary/50 transition-all cursor-pointer min-h-[200px]'\n },\n h('div', {className:'w-12 h-12 rounded-full bg-surface-container flex items-center justify-center mb-3 group-hover:bg-primary/10 group-hover:text-primary text-on-surface-variant transition-all'}, h(Icon, {name:'add', size:24})),\n h('p', {className:'text-[15px] font-bold text-on-surface-variant group-hover:text-on-surface transition-colors'}, 'Initialize New Node'),\n h('p', {className:'text-[12px] text-text-muted mt-1'}, 'Expand your autonomous ecosystem')\n );\n const groupHead = (icon, title, sub, count, color) => h('div', {className:'flex items-center gap-2 mb-3'},\n h(Icon, {name: icon, size: 15, className: color || 'text-primary'}),\n h('span', {className:'font-bold text-[12px] uppercase tracking-wider text-on-surface'}, title),\n sub ? h('span', {className:'text-[11px] text-text-muted truncate max-w-[220px]'}, '\\\\u00b7 ' + sub) : null,\n h('span', {className:'ml-auto text-[10px] font-semibold text-text-muted bg-surface-container px-2 py-0.5 rounded'}, count + (count === 1 ? ' agent' : ' agents'))\n );\n\n return h('div', {className:'p-lg lg:p-xl max-w-7xl mx-auto'},\n h(PageHeader, {\n title:'Agent Studio',\n subtitle:'Orchestrate your autonomous fleet. Configure multi-modal agents with specialized toolsets and real-time execution monitoring.',\n action: h(Btn, {\n onClick: () => { setEditingAgent(null); setShowBuilder(true); },\n variant:'primary', size:'lg'\n }, h(Icon,{name:'rocket_launch', size:18}), 'Create New Agent')\n }),\n\n h('div', {className:'grid grid-cols-1 xl:grid-cols-12 gap-lg'},\n\n // Agents grouped by the hierarchy: each campaign (with its parent objective) -> its agents,\n // then an Unassigned group for standalone agents (+ the Create card).\n h('div', {className:'xl:col-span-8 flex flex-col gap-lg'},\n campaignGroups.map(g => h('div', {key: g.campaign.id, className:'glass-panel rounded-xl p-md'},\n groupHead('campaign', g.campaign.name, (g.objective ? g.objective.title : (g.campaign.goal || '')), g.agents.length, 'text-primary'),\n h('div', {className:'grid grid-cols-1 lg:grid-cols-2 gap-md auto-rows-min'}, g.agents.map(mkCard))\n )),\n h('div', {key:'unassigned', className: campaignGroups.length ? 'glass-panel rounded-xl p-md' : ''},\n campaignGroups.length ? groupHead('person', 'Unassigned', 'standalone agents (not in a campaign)', unassigned.length, 'text-on-surface-variant') : null,\n h('div', {className:'grid grid-cols-1 lg:grid-cols-2 gap-md auto-rows-min'},\n unassigned.map(mkCard).concat([newNodeCard])\n )\n )\n ),\n\n h('div', {className:'xl:col-span-4'},\n h('div', {className:'glass-panel h-full rounded-xl flex flex-col overflow-hidden min-h-[400px]'},\n h('div', {className:'p-md border-b border-border-subtle bg-surface-container/30 flex justify-between items-center'},\n h('h3', {className:'text-[15px] font-bold text-on-surface'}, 'History Log'),\n h('span', {className:'text-[10px] font-semibold uppercase tracking-wider bg-secondary/10 text-secondary px-2 py-0.5 rounded'}, 'Live')\n ),\n h('div', {className:'flex-1 overflow-y-auto p-md space-y-md'},\n historyLog.length === 0\n ? h('div', {className:'text-center text-text-muted text-[13px] py-8'},\n h(Icon, {name:'history', size:32, className:'opacity-30 mb-2 block mx-auto'}),\n 'No agent activity yet'\n )\n : historyLog.map((entry) => {\n const tone = entry.workspace === 'marketing' ? 'primary' : 'secondary';\n const statusColor = entry.status === 'completed' ? 'text-secondary'\n : entry.status === 'failed' ? 'text-error'\n : entry.status === 'running' ? 'text-tertiary'\n : 'text-text-muted';\n return h('div', {key: entry.id, className:'relative pl-3 border-l ' + (tone==='primary'?'border-primary/30':'border-secondary/30')},\n h('div', {className:'absolute -left-[5px] top-0 w-2 h-2 rounded-full ' + (tone==='primary'?'bg-primary':'bg-secondary')}),\n h('div', {className:'flex justify-between mb-1 gap-2'},\n h('span', {className:'text-[10px] font-semibold uppercase tracking-wider truncate ' + (tone==='primary'?'text-primary':'text-secondary')}, entry.name),\n h('div', {className:'flex items-center gap-1.5 flex-shrink-0'},\n h('span', {className:'text-[9px] font-bold uppercase tracking-wider ' + statusColor}, entry.status),\n h('span', {className:'text-[10px] font-mono-data text-text-muted'}, entry.time)\n )\n ),\n h('div', {className:'bg-surface-container-low p-2.5 rounded-lg'},\n h('p', {className:'text-[12px] font-mono-data text-on-surface-variant leading-relaxed whitespace-pre-wrap break-words'}, entry.msg)\n )\n );\n })\n )\n )\n )\n ),\n\n showBuilder && h(AgentBuilderDrawer, {\n agent: editingAgent, onSave: handleSaveAgent,\n onClose: () => { setShowBuilder(false); setEditingAgent(null); }\n })\n );\n }\n\n\n // Part 14.2: collapsible reasoning trace under an assistant message. Renders the\n // /api/chat response trace array (tool calls, agent actions, messages, rounds).\n function TraceDisclosure({trace}) {\n const [open, setOpen] = useState(false);\n if (!Array.isArray(trace) || trace.length === 0) return null;\n\n const iconForStep = (t) => {\n if (t === 'tool') return 'build';\n if (t === 'action') return 'smart_toy';\n if (t === 'message') return 'chat_bubble';\n if (t === 'round') return 'radio_button_checked';\n return 'info';\n };\n\n const fmtTime = (ts) => {\n if (!ts) return '';\n const d = new Date(ts);\n if (isNaN(d.getTime())) return '';\n return d.toLocaleTimeString('en-US', {hour12:false, hour:'2-digit', minute:'2-digit', second:'2-digit'});\n };\n\n return h('div', {className:'mt-1.5 max-w-[85%]'},\n h('button', {\n onClick: () => setOpen(o => !o), type:'button',\n className:'flex items-center gap-1 text-[10px] font-mono-data uppercase tracking-wider text-text-muted hover:text-on-surface-variant transition-colors'\n },\n h(Icon, {name: open ? 'expand_less' : 'expand_more', size: 14}),\n h('span', null, 'Trace (' + trace.length + ' steps)')\n ),\n open && h('div', {className:'mt-1 space-y-1 rounded-lg border border-border-subtle bg-surface-container p-2'},\n trace.map((step, i) => {\n const label = (step.t || 'step') + (step.role ? ' - ' + step.role : '') + (step.name ? ' - ' + step.name : '');\n const preview = step.preview || step.result_preview || step.args_preview || '';\n const time = fmtTime(step.ts);\n return h('div', {key: i, className:'flex gap-2'},\n h(Icon, {name: iconForStep(step.t), size: 13, className:'text-text-muted flex-shrink-0 mt-0.5'}),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'flex items-center gap-2'},\n h('span', {className:'text-[10px] font-mono-data font-semibold text-on-surface-variant truncate'}, label),\n time && h('span', {className:'text-[10px] font-mono-data text-text-muted ml-auto flex-shrink-0'}, time)\n ),\n preview && h('div', {className:'text-[10px] font-mono-data text-text-muted leading-snug line-clamp-2 break-words'}, preview)\n )\n );\n })\n )\n );\n }\n\n\n function AIChatPanel({open, onClose, messages, setMessages, currentWorkspace, setCurrentWorkspace, convId, setConvId}) {\n const [input, setInput] = useState('');\n const [loading, setLoading] = useState(false);\n // Phase 1 Advanced: dynamic quick actions + funnel context toggle\n const [dynamicActions, setDynamicActions] = useState([]);\n const [funnelOpen, setFunnelOpen] = useState(false);\n const [funnelSummary, setFunnelSummary] = useState(null);\n // convId/setConvId now provided by App (shared with agent runs so chat context persists across turns).\n const [historyOpen, setHistoryOpen] = useState(false);\n const [history, setHistory] = useState([]);\n\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n // Pull recommended questions + funnel summary while the panel is open.\n useEffect(() => {\n if (!open) return;\n let cancelled = false;\n (async () => {\n try {\n const [recs, summary] = await Promise.all([\n fetch('/api/intelligence/recommendations').then(r => r.json()).catch(() => []),\n fetch('/api/intelligence/funnel-summary').then(r => r.json()).catch(() => null),\n ]);\n if (cancelled) return;\n if (Array.isArray(recs)) setDynamicActions(recs.slice(0, 4).map(r => r.action || r.title));\n if (summary) setFunnelSummary(summary);\n } catch {}\n })();\n return () => { cancelled = true; };\n }, [open]);\n\n useEffect(() => {\n if (open) {\n setTimeout(() => messagesEndRef.current?.scrollIntoView({behavior:'smooth'}), 50);\n inputRef.current?.focus();\n }\n }, [messages, open]);\n\n if (!open) return null;\n\n // Mix dynamic recommendations (from /api/intelligence/recommendations) with fallback defaults.\n const quickActions = dynamicActions.length > 0\n ? dynamicActions\n : ['What\\\\'s blocking conversion?', 'Show the SEO - traffic chain', 'Why did MOFU drop?', 'Top 3 actions this week'];\n\n const loadHistory = () => fetch('/api/conversations').then(r => r.json()).then(d => Array.isArray(d) && setHistory(d)).catch(() => {});\n\n const newChat = () => { setConvId(null); setMessages([]); setHistoryOpen(false); };\n\n const loadConversation = async (id) => {\n try {\n const r = await fetch('/api/conversations/' + id);\n const d = await r.json();\n if (d && Array.isArray(d.messages)) {\n setConvId(id);\n setMessages(d.messages.map((m, i) => ({...m, id: i})));\n setHistoryOpen(false);\n }\n } catch {}\n };\n\n const deleteConv = async (id, e) => {\n e.stopPropagation();\n await fetch('/api/conversations/' + id, {method:'DELETE'}).catch(() => {});\n loadHistory();\n if (convId === id) { setConvId(null); setMessages([]); }\n };\n\n const sendMessage = async (text) => {\n const msg = text || input.trim();\n if (!msg || loading) return;\n setInput('');\n const userMsg = {role:'user', content: msg, id: Date.now()};\n setMessages(prev => [...prev, userMsg]);\n setLoading(true);\n // The streaming endpoint has NO tools — force non-streaming so the AI actually executes\n // tools (prepare_* → Approvals) and keeps funnel context + memory. (Was defaulting to stream.)\n const useStream = false;\n try {\n if (useStream) {\n const aiBubbleId = Date.now() + 1;\n setMessages(prev => [...prev, {role:'assistant', content: '', id: aiBubbleId, streaming: true}]);\n const res = await fetch('/api/chat/stream', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({message: msg, workspace: currentWorkspace, conversation_id: convId || undefined})\n });\n if (!res.ok || !res.body) throw new Error(\\`HTTP \\${res.status}\\`);\n const reader = res.body.getReader();\n const decoder = new TextDecoder();\n let buf = '';\n let finalConvId = convId;\n while (true) {\n const {done, value} = await reader.read();\n if (done) break;\n buf += decoder.decode(value, {stream: true});\n const parts = buf.split('\\\\n\\\\n');\n buf = parts.pop() || '';\n for (const part of parts) {\n if (!part.startsWith('data:')) continue;\n try {\n const ev = JSON.parse(part.slice(5).trim());\n if (ev.done) {\n finalConvId = ev.conversation_id || finalConvId;\n setMessages(prev => prev.map(m => m.id === aiBubbleId ? {...m, content: ev.response || m.content, streaming: false} : m));\n } else if (ev.delta) {\n setMessages(prev => prev.map(m => m.id === aiBubbleId ? {...m, content: m.content + ev.delta} : m));\n }\n } catch {}\n }\n }\n if (finalConvId) setConvId(finalConvId);\n } else {\n const res = await fetch('/api/chat', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({message: msg, workspace: currentWorkspace, conversation_id: convId || undefined})\n });\n if (!res.ok) throw new Error(\\`HTTP \\${res.status}\\`);\n const data = await res.json();\n if (data.conversation_id) setConvId(data.conversation_id);\n setMessages(prev => [...prev, {role:'assistant', content: data.response || data.message || 'Done!', trace: data.trace, id: Date.now()+1}]);\n }\n } catch (e) {\n setMessages(prev => [...prev.filter(m => !m.streaming), {role:'assistant', content: \\`Error: \\${e.message}\\`, id: Date.now()+2, error: true}]);\n } finally { setLoading(false); }\n };\n\n return h('div', {\n className:'chat-in fixed bottom-12 right-5 w-[380px] h-[540px] z-[500] glass-panel rounded-2xl flex flex-col shadow-2xl overflow-hidden'\n },\n h('div', {className:'p-4 border-b border-border-subtle flex items-center justify-between flex-shrink-0'},\n h('div', {className:'flex items-center gap-2'},\n h('div', {className:'w-2 h-2 rounded-full bg-secondary pulse-dot'}),\n h('span', {className:'font-bold text-[14px] text-on-surface'}, 'AI Assistant'),\n h('button', {\n onClick: () => { setHistoryOpen(o => !o); if (!historyOpen) loadHistory(); },\n title:'Conversation history',\n className:'ml-1 p-1 rounded text-text-muted hover:text-primary transition-colors'\n }, h(Icon, {name:'history', size:15})),\n h('button', {\n onClick: newChat, title:'New chat',\n className:'p-1 rounded text-text-muted hover:text-secondary transition-colors'\n }, h(Icon, {name:'add', size:15}))\n ),\n h('div', {className:'flex items-center gap-2'},\n h('div', {className:'flex bg-surface-container-lowest rounded-lg p-0.5 border border-border-subtle'},\n ['marketing','sales'].map(w => h('button', {\n key: w, onClick: () => setCurrentWorkspace(w),\n className: 'px-2.5 py-0.5 rounded-md text-[11px] font-bold uppercase tracking-wider transition-all ' +\n (currentWorkspace === w ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface-variant')\n }, w))\n ),\n h('button', {\n onClick: onClose,\n className:'bg-surface-variant/40 hover:bg-surface-variant/60 border-none rounded-md p-1.5 cursor-pointer text-on-surface-variant transition-all'\n }, h(Icon, {name:'close', size:16}))\n )\n ),\n\n // History panel (replaces messages list when open)\n historyOpen && h('div', {className:'flex-1 overflow-y-auto p-3 flex flex-col gap-1.5'},\n history.length === 0\n ? h('div', {className:'text-center py-8 text-text-muted text-[13px]'}, 'No conversations yet')\n : history.map(c => h('div', {\n key: c.id,\n onClick: () => loadConversation(c.id),\n className:'flex items-center justify-between gap-2 p-2.5 rounded-lg bg-surface-container border border-border-subtle hover:border-primary/40 cursor-pointer transition-all group'\n },\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, c.title),\n h('div', {className:'text-[10px] text-text-muted mt-0.5'}, new Date(c.updated_at).toLocaleString())\n ),\n h('button', {\n onClick: (e) => deleteConv(c.id, e),\n className:'flex-shrink-0 opacity-0 group-hover:opacity-100 p-1 rounded text-error hover:bg-error/10 transition-all'\n }, h(Icon, {name:'close', size:13}))\n ))\n ),\n\n !historyOpen && h('div', {className:'flex-1 overflow-y-auto p-4 flex flex-col gap-3'},\n messages.length === 0 && h('div', {className:'text-center py-8 text-text-muted'},\n h(Icon, {name:'smart_toy', size:36, className:'text-primary/60 block mx-auto mb-3'}),\n h('div', {className:'text-[14px] font-semibold text-on-surface-variant mb-1'}, 'Nexus Assistant'),\n h('div', {className:'text-[12px] leading-relaxed'}, 'Ask about your marketing, sales, or to help create agents.')\n ),\n messages.map(msg => {\n const isUser = msg.role === 'user';\n const isError = msg.error;\n const isStreaming = msg.streaming;\n const marked = (window.__nexus || {}).marked || ((s) => s);\n const bubbleClass = 'max-w-[85%] px-3.5 py-2.5 text-[13px] leading-relaxed break-words ' +\n (isUser\n ? 'bg-primary text-on-primary rounded-2xl rounded-br-sm whitespace-pre-wrap'\n : isError\n ? 'bg-error/10 border border-error/30 text-error rounded-2xl rounded-bl-sm whitespace-pre-wrap'\n : 'md-body bg-surface-container border border-border-subtle text-on-surface rounded-2xl rounded-bl-sm' + (isStreaming ? ' typing' : ''));\n return h('div', {key: msg.id, className:'flex flex-col ' + (isUser ? 'items-end' : 'items-start')},\n isUser || isError\n ? h('div', {className: bubbleClass}, msg.content)\n : h('div', {className: bubbleClass, dangerouslySetInnerHTML: {__html: marked(String(msg.content || ''))}}),\n // Part 14.2: reasoning trace under assistant messages (when present).\n !isUser && !isError && Array.isArray(msg.trace) && msg.trace.length > 0 &&\n h(TraceDisclosure, {trace: msg.trace})\n );\n }),\n loading && !messages.some(m => m.streaming) && h('div', {className:'flex justify-start'},\n h('div', {className:'px-4 py-3 bg-surface-container border border-border-subtle rounded-2xl rounded-bl-sm flex gap-1 items-center'},\n h('span', {className:'typing-dot'}),\n h('span', {className:'typing-dot'}),\n h('span', {className:'typing-dot'})\n )\n ),\n h('div', {ref: messagesEndRef})\n ),\n\n // Funnel context toggle: collapsed summary of TOFU/MOFU/BOFU health above the input.\n !historyOpen && funnelSummary && h('div', {className:'px-3 pt-2 border-t border-border-subtle/40 flex-shrink-0'},\n h('button', {\n onClick: () => setFunnelOpen(o => !o),\n className:'w-full flex items-center justify-between text-[10px] font-bold uppercase tracking-widest text-text-muted hover:text-on-surface transition-colors py-1'\n },\n h('span', null, 'Funnel Context - ' + funnelSummary.total_metrics_observed + ' metrics live'),\n h(Icon, {name: funnelOpen ? 'expand_less' : 'expand_more', size: 16})\n ),\n funnelOpen && h('div', {className:'pb-2 grid grid-cols-3 gap-1 text-[10px]'},\n funnelSummary.stages.map(s => h('div', {\n key: s.stage,\n className:'flex items-center gap-1.5 p-1.5 rounded bg-surface-container-lowest border border-border-subtle'\n },\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + (s.health_score > 75 ? 'bg-secondary' : s.health_score >= 50 ? 'bg-tertiary' : 'bg-error')}),\n h('span', {className:'font-mono-data text-text-muted'}, s.stage),\n h('span', {className:'font-bold text-on-surface ml-auto', style:{fontVariantNumeric:'tabular-nums'}}, s.health_score + '%')\n ))\n )\n ),\n !historyOpen && h('div', {className:'px-3 pt-2 pb-1 flex gap-1.5 flex-wrap border-t border-border-subtle flex-shrink-0'},\n quickActions.map(qa => h('button', {\n key: qa, onClick: () => sendMessage(qa),\n className:'text-[11px] px-2.5 py-1 rounded-full bg-surface-container-lowest border border-border-subtle text-text-muted hover:border-primary/40 hover:text-primary cursor-pointer transition-all whitespace-nowrap font-medium'\n }, qa))\n ),\n\n !historyOpen && h('div', {className:'p-3 border-t border-border-subtle/40 flex-shrink-0'},\n h('div', {className:'flex gap-2 bg-surface-container-lowest rounded-xl border border-border-subtle px-3 py-2 items-end neon-stroke transition-all'},\n h('textarea', {\n ref: inputRef, value: input,\n onChange: e => setInput(e.target.value),\n onKeyDown: e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } },\n placeholder:'Ask the AI assistant-', rows: 1,\n className:'flex-1 bg-transparent border-none text-on-surface text-[13px] resize-none outline-none leading-relaxed max-h-24 overflow-y-auto placeholder:text-text-muted',\n style:{fontFamily:'inherit'}\n }),\n h('button', {\n onClick: () => sendMessage(), disabled: !input.trim() || loading,\n className:'w-9 h-9 rounded-lg cursor-pointer flex items-center justify-center flex-shrink-0 transition-all ' +\n (input.trim() && !loading ? 'bg-primary text-on-primary hover:opacity-90' : 'bg-surface-variant text-text-muted cursor-not-allowed')\n }, loading ? h(Spinner, {size:14, color:'#fff'}) : h(Icon, {name:'send', size:16}))\n )\n )\n );\n }\n\n\n // Valid deep-linkable view ids (must match the renderPage() switch cases). Used to map\n // location.pathname -> initial active page so each nav tab opens at its own URL (/campaigns, /agents, ...).\n const NEXUS_VIEW_IDS = ['dashboard','analytics','marketing','sales','workspace','objectives','calendar','experiments','campaigns','tasks','knowledge','approvals','agents','settings','playbooks','platform'];\n function pathnameToViewId() {\n try {\n const seg = (window.location.pathname || '/').replace(/^\\\\/+|\\\\/+$/g, '').split('/')[0];\n if (!seg) return 'dashboard';\n return NEXUS_VIEW_IDS.indexOf(seg) !== -1 ? seg : 'dashboard';\n } catch (e) { return 'dashboard'; }\n }\n\n // Phase D: fixed, obvious top banner shown only while the master is read-only \"viewing as\"\n // a tenant. Distinct warning color (tertiary), always above the app shell. The Exit button\n // POSTs /api/platform/impersonate/exit (always allowed during impersonation) then reloads so\n // AuthGate re-resolves /api/auth/me and the banner disappears.\n function ImpersonationBanner({tenant}) {\n const [exiting, setExiting] = useState(false);\n const exit = async () => {\n if (exiting) return;\n setExiting(true);\n try {\n await fetch('/api/platform/impersonate/exit', {method:'POST'});\n } catch (e) {}\n window.location.reload();\n };\n const name = (tenant && tenant.name) || (tenant && tenant.id) || 'tenant';\n return h('div', {\n className:'flex items-center justify-center gap-3 px-4 py-2 bg-tertiary text-on-tertiary text-[13px] font-bold tracking-wide shadow-lg flex-shrink-0 border-b border-tertiary/60',\n style:{zIndex:600}\n },\n h('span', null, '\\\\uD83D\\\\uDC41 Viewing as ' + name + ' \\\\u2014 READ ONLY'),\n h('button', {\n onClick: exit, disabled: exiting, type:'button',\n className:'ml-2 px-3 py-1 rounded-md bg-black/25 hover:bg-black/40 text-on-tertiary text-[11px] font-bold uppercase tracking-widest flex items-center gap-1.5 transition-all disabled:opacity-60'\n },\n exiting ? h(Spinner, {size:12, color:'#fff'}) : h(Icon, {name:'logout', size:14}),\n exiting ? 'Exiting-' : 'Exit'\n )\n );\n }\n\n function App() {\n // Deep-link: start on the view named by the URL path (e.g. /campaigns -> Campaigns), default dashboard for \"/\".\n const [activePage, setActivePage] = useState(pathnameToViewId);\n const [integrations, setIntegrations] = useState([]);\n const [agents, setAgents] = useState([]);\n const [llmConfig, setLlmConfig] = useState(null);\n const [chatOpen, setChatOpen] = useState(false);\n const [chatMessages, setChatMessages] = useState([]);\n const [convId, setConvId] = useState(null); // shared chat conversation id (agent runs + chat panel share it, so context persists)\n const [currentWorkspace, setCurrentWorkspace] = useState('marketing');\n const [loading, setLoading] = useState(true);\n // Master flag from /api/auth/me (resolved by AuthGate, stashed on window.__nexus). Gates the\n // platform-console render below; the nav entry/account menu read the same window.__nexus value.\n const isPlatformAdmin = !!((window.__nexus || {}).isPlatformAdmin);\n // Phase D read-only impersonation: when the master is \"viewing as\" a tenant, /api/auth/me\n // reports impersonating + impersonatedTenant (stashed on window.__nexus by AuthGate). We\n // surface a fixed warning banner above the whole app while this is true.\n const impersonating = !!((window.__nexus || {}).impersonating);\n const impersonatedTenant = (window.__nexus || {}).impersonatedTenant || null;\n const { toasts, show: showToast } = useToast();\n\n // One-page app WITH real URLs: keep the address bar in sync with the active view (pushState on\n // change) and respond to browser back/forward (popstate) by switching the view. Navigation is\n // in-place (no new tab); only the World opens its own /world tab, so it is never in this history.\n useEffect(() => {\n try {\n const want = '/' + activePage;\n if (window.location.pathname !== want) window.history.pushState({ view: activePage }, '', want);\n } catch (e) {}\n }, [activePage]);\n useEffect(() => {\n const onPop = () => { try { setActivePage(pathnameToViewId()); } catch (e) {} };\n window.addEventListener('popstate', onPop);\n return () => window.removeEventListener('popstate', onPop);\n }, []);\n\n // B1 + B4: apply persisted Workspace Preferences and auto-sync interval at boot.\n useEffect(() => {\n const apply = (prefs) => {\n if (!prefs || typeof prefs !== 'object') return;\n const b = document.body;\n b.classList.toggle('no-translucency', !prefs.translucency);\n b.classList.toggle('ultra-density', !!prefs.ultraDensity);\n b.classList.toggle('mono-numbers', !!prefs.mono);\n b.classList.toggle('no-hardware-accel', !prefs.hardwareAccel);\n };\n window.__nexus = window.__nexus || {};\n window.__nexus.applyWorkspacePrefs = apply;\n window.__nexus.setAutoSyncSeconds = (sec) => {\n const ms = Math.max(5, Math.min(3600, Number(sec) || 30)) * 1000;\n window.__nexus.autoSyncMs = ms;\n window.dispatchEvent(new CustomEvent('nexus:auto-sync-change', {detail:{ms}}));\n };\n fetch('/api/config').then(r => r.json()).then(cfg => {\n apply(cfg?.workspace_prefs);\n if (cfg?.auto_sync_seconds != null) window.__nexus.setAutoSyncSeconds(cfg.auto_sync_seconds);\n else window.__nexus.autoSyncMs = 60000;\n }).catch(() => { window.__nexus.autoSyncMs = 60000; });\n }, []);\n\n useEffect(() => {\n const init = async () => {\n try {\n const [intRes, agentRes, llmRes] = await Promise.allSettled([\n fetch('/api/integrations').then(r => r.json()),\n fetch('/api/agents').then(r => r.json()),\n fetch('/api/llm/config').then(r => r.json()),\n ]);\n if (intRes.status === 'fulfilled') setIntegrations(Array.isArray(intRes.value) ? intRes.value : []);\n if (agentRes.status === 'fulfilled') setAgents(Array.isArray(agentRes.value) ? agentRes.value : []);\n if (llmRes.status === 'fulfilled' && llmRes.value) setLlmConfig(llmRes.value);\n\n const sp = new URLSearchParams(window.location.search);\n if (sp.get('auth') === 'google_ok') {\n showToast('Google connected - GA4, Search Console & YouTube are ready.', 'success');\n window.history.replaceState({}, '', window.location.pathname);\n } else if (sp.get('auth_error')) {\n showToast('Google OAuth failed: ' + sp.get('auth_error'), 'error');\n window.history.replaceState({}, '', window.location.pathname);\n }\n } catch (e) { console.error('Init error:', e); }\n finally { setLoading(false); }\n };\n init();\n }, []);\n\n // Centralized server-error surfacing — the wrapped window.fetch dispatches 'nexus-api-error'\n // on 5xx / network failures (see frontend_js.ts) so failures aren't silently swallowed by\n // per-call .catch(()=>[]). Throttled to avoid flooding on background polling.\n useEffect(() => {\n let last = 0;\n const handler = (e) => {\n const now = Date.now();\n if (now - last < 8000) return;\n last = now;\n const st = (e.detail && e.detail.status) || 0;\n showToast(st === 0 ? 'Không kết nối được máy chủ' : ('Lỗi máy chủ (' + st + ')'), 'error');\n };\n window.addEventListener('nexus-api-error', handler);\n return () => window.removeEventListener('nexus-api-error', handler);\n }, []);\n\n useEffect(() => {\n const handler = (e) => {\n const { source, endpoint, data } = e.detail || {};\n const summary = JSON.stringify(data).slice(0, 3000);\n setChatMessages(prev => [...prev, {\n role:'user',\n content: \\`Analyze this \\${source} \"\\${endpoint}\" data and give me 3 specific, actionable insights with numbers:\\\\n\\\\n\\${summary}\\`,\n id: Date.now()\n }]);\n setChatOpen(true);\n };\n window.addEventListener('analyze-data', handler);\n return () => window.removeEventListener('analyze-data', handler);\n }, []);\n\n // Phase 1 Advanced: IntelligenceFeed dispatches 'investigate-intelligence' when user clicks a card.\n useEffect(() => {\n const handler = (e) => {\n const card = e.detail || {};\n const prompt = (card.action_payload?.question || 'Tell me more about this signal') +\n (card.title ? '\\\\n\\\\nContext: ' + card.title : '') +\n (card.body ? '\\\\n' + card.body : '');\n setChatMessages(prev => [...prev, {role:'user', content: prompt, id: Date.now()}]);\n setChatOpen(true);\n };\n window.addEventListener('investigate-intelligence', handler);\n window.addEventListener('nexus:open-chat', handler);\n return () => {\n window.removeEventListener('investigate-intelligence', handler);\n window.removeEventListener('nexus:open-chat', handler);\n };\n }, []);\n\n useEffect(() => {\n let pending = null;\n const map = {d:'dashboard', m:'marketing', s:'sales', a:'agents', p:'settings'};\n const onKey = (e) => {\n if (['INPUT','TEXTAREA','SELECT'].includes(e.target.tagName)) return;\n if (pending === 'g' && map[e.key]) { setActivePage(map[e.key]); pending = null; return; }\n pending = e.key === 'g' ? 'g' : null;\n if (pending) setTimeout(() => { pending = null; }, 800);\n };\n window.addEventListener('keydown', onKey);\n return () => window.removeEventListener('keydown', onKey);\n }, []);\n\n const pageTitles = {\n dashboard: 'Command Center',\n marketing: 'Strategy',\n sales: 'Sales CRM',\n workspace: 'Workspace',\n objectives: 'Objectives',\n calendar: 'Command Calendar',\n experiments: 'Experiments',\n analytics: 'Analytics',\n agents: 'Agent Studio',\n campaigns: 'Campaigns',\n knowledge: 'Knowledge Graph',\n approvals: 'Approvals',\n playbooks: 'Playbooks',\n settings: 'System Configuration',\n };\n\n // Hot-leads count for the Signals nav badge (polled every 60s; cheap count endpoint).\n const [hotLeads, setHotLeads] = useState(0);\n useEffect(() => {\n const load = () => fetch('/api/signals/hot-leads/count').then(r => r.json()).then(d => setHotLeads(d.count || 0)).catch(() => {});\n load();\n const iv = setInterval(load, 60000);\n return () => clearInterval(iv);\n }, []);\n\n const renderPage = () => {\n if (loading) return h('div', {className:'flex flex-1 items-center justify-center flex-col gap-4 p-10'},\n h(Spinner, {size:36}),\n h('div', {className:'text-text-muted text-[14px] font-medium'}, 'Initializing Nexus-')\n );\n\n switch (activePage) {\n case 'dashboard': return h(CommandCenter, {setActivePage, agents, integrations, showToast});\n case 'analytics': return h(AnalyticsPage, {integrations, agents, setActivePage});\n case 'marketing': return h(MarketingWorkspace, {integrations, agents, setActivePage, showToast});\n case 'sales': return h(CRMWorkspace, {setActivePage});\n case 'workspace': return h(WorkspacePage, {integrations, agents, setActivePage, showToast});\n case 'objectives': return h(ObjectivesPage, {setActivePage});\n case 'calendar': return h(CalendarPage, {setActivePage, integrations, agents, showToast});\n case 'experiments': return h(ExperimentBoard, {setActivePage});\n case 'campaigns': return h(CampaignsPage, {agents, integrations, setActivePage, showToast});\n case 'tasks': return h(TasksPage, {agents, showToast, setActivePage});\n case 'knowledge': return h(KnowledgeGraphView, {open:true, onClose: () => setActivePage('dashboard')});\n case 'approvals': return h(ApprovalsPage, {showToast});\n case 'agents': return h(AgentStudio, {agents, setAgents, setChatOpen, setChatMessages, setConvId, showToast});\n case 'settings': return h(SettingsPage, {integrations, setIntegrations, llmConfig, setLlmConfig, showToast});\n case 'playbooks': return h(SkillsView, {setActivePage, showToast, setChatOpen, setChatMessages});\n // Master-only platform console. Nav entry is gated on isPlatformAdmin, but we also\n // guard the render here so a non-master deep-link (/platform) can never mount it.\n case 'platform':\n return isPlatformAdmin\n ? h(PlatformConsole, {setActivePage, showToast})\n : h(CommandCenter, {setActivePage, agents, integrations, showToast});\n default: return h(CommandCenter, {setActivePage, agents, integrations, showToast});\n }\n };\n\n // Open the AI chat panel seeded with a draft-outreach prompt for a Signals row.\n const openOutreach = (signal) => {\n const prompt = 'Draft a personalized outreach for ' + (signal.name || 'this prospect') +\n (signal.company && signal.company !== '-' ? ' at ' + signal.company : '') +\n '. Signal context: ' + (signal.signal || 'recent inbound') +\n '. Subject/role: ' + (signal.role || '') + '. Tone: warm, specific, under 120 words.';\n setChatMessages(prev => [...prev, {role:'user', content: prompt, id: Date.now()}]);\n setCurrentWorkspace('sales');\n setChatOpen(true);\n };\n\n return h('div', {className:'flex flex-col h-screen overflow-hidden'},\n // Phase D: read-only impersonation banner pinned above the entire app shell.\n impersonating && h(ImpersonationBanner, {tenant: impersonatedTenant}),\n h('div', {className:'flex flex-1 min-h-0 overflow-hidden'},\n h(Sidebar, {\n activePage, setActivePage, integrations, agents, hotLeads,\n onNewCampaign: () => { setActivePage('campaigns'); }\n }),\n h('main', {className:'flex-1 flex flex-col overflow-hidden relative'},\n h(TopNav, {\n title: pageTitles[activePage] || 'Nexus Command',\n activePage, setActivePage,\n onChatToggle: () => setChatOpen(o => !o),\n chatOpen\n }),\n h('div', {className:'flex-1 overflow-y-auto'},\n renderPage()\n ),\n h(SystemStatusBar)\n ),\n h(AIChatPanel, {\n open: chatOpen, onClose: () => setChatOpen(false),\n messages: chatMessages, setMessages: setChatMessages,\n currentWorkspace, setCurrentWorkspace, convId, setConvId\n }),\n h(ToastContainer, {toasts})\n ) // close inner flex wrapper (sidebar + main + chat)\n );\n }\n\n // --- Polished login / signup screen (real session auth). Matches the app's\n // dark glass-panel design. On submit it POSTs to /api/auth/login or\n // /api/auth/register; the server sets the HttpOnly nexus_session cookie, then\n // we reload so the AuthGate re-checks /api/auth/me and mounts the App. ---\n function AuthScreen() {\n const [mode, setMode] = useState('login'); // 'login' | 'signup'\n const [name, setName] = useState('');\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n const [companyUrl, setCompanyUrl] = useState(''); // honeypot - must stay empty\n const [busy, setBusy] = useState(false);\n const [err, setErr] = useState('');\n\n const isSignup = mode === 'signup';\n const fieldCls = 'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3.5 py-2.5 text-[14px] text-on-surface placeholder:text-text-muted neon-stroke transition-all';\n\n const submit = async (e) => {\n if (e) e.preventDefault();\n if (busy) return;\n const em = email.trim();\n if (!em || !password) { setErr('Email and password are required'); return; }\n if (isSignup && !name.trim()) { setErr('Please enter your name'); return; }\n setBusy(true); setErr('');\n try {\n const url = isSignup ? '/api/auth/register' : '/api/auth/login';\n const body = isSignup\n ? { name: name.trim(), email: em, password, company_url: companyUrl }\n : { email: em, password };\n const r = await fetch(url, {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(body)\n });\n let data = {};\n try { data = await r.json(); } catch (e3) {}\n if (r.ok && data && data.ok) {\n // Cookie is set by the server; reload so AuthGate re-checks /api/auth/me.\n window.location.reload();\n return;\n }\n const msg = (data && (data.error?.message || data.error || data.message))\n || (r.status === 401 ? 'Invalid email or password' : 'Authentication failed');\n setErr(typeof msg === 'string' ? msg : 'Authentication failed');\n } catch (e2) {\n setErr('Connection error - please try again');\n }\n setBusy(false);\n };\n\n const switchMode = (m) => { setMode(m); setErr(''); };\n\n return h('div', {className:'relative flex h-screen items-center justify-center p-6 overflow-hidden'},\n // Ambient brand glow to match the app shell backdrop.\n h('div', {className:'fixed inset-0 pointer-events-none -z-10 overflow-hidden'},\n h('div', {className:'absolute top-0 right-0 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px]'}),\n h('div', {className:'absolute bottom-0 left-0 w-[600px] h-[600px] bg-secondary/5 rounded-full blur-[150px]'})\n ),\n h('div', {className:'w-full max-w-[420px] glass-panel rounded-2xl p-xl shadow-2xl flex flex-col gap-lg'},\n\n // Brand header\n h('div', {className:'flex items-center gap-3'},\n h('div', {className:'w-11 h-11 rounded-xl bg-primary/10 border border-primary/20 text-primary flex items-center justify-center flex-shrink-0'},\n h(Icon, {name:'hub', size:24})\n ),\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[18px] font-extrabold text-on-surface tracking-tight leading-tight'}, 'AIHive Command Center'),\n h('div', {className:'text-[12px] text-text-muted'}, 'Nexus AI')\n )\n ),\n\n // Mode toggle\n h('div', {className:'flex bg-surface-container-lowest rounded-lg p-1 border border-border-subtle'},\n ['login','signup'].map(m => h('button', {\n key: m, type:'button', onClick: () => switchMode(m),\n className: 'flex-1 py-2 rounded-md text-[12px] font-bold uppercase tracking-wider transition-all ' +\n (mode === m ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface-variant')\n }, m === 'login' ? 'Log in' : 'Sign up'))\n ),\n\n h('form', {onSubmit: submit, className:'flex flex-col gap-3'},\n isSignup && h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Name'),\n h('input', {\n type:'text', value: name, autoFocus: isSignup, autoComplete:'name',\n onChange: (ev) => setName(ev.target.value),\n placeholder:'Jane Doe', className: fieldCls\n })\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Email'),\n h('input', {\n type:'email', value: email, autoFocus: !isSignup, autoComplete:'email',\n onChange: (ev) => setEmail(ev.target.value),\n placeholder:'you@company.com', className: fieldCls\n })\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Password'),\n h('input', {\n type:'password', value: password,\n autoComplete: isSignup ? 'new-password' : 'current-password',\n onChange: (ev) => setPassword(ev.target.value),\n placeholder:'********', className: fieldCls\n })\n ),\n\n // Honeypot: bots fill hidden fields; humans never see it. Kept off-screen\n // and aria-hidden. Named exactly company_url to match the server bot-trap.\n isSignup && h('div', {\n 'aria-hidden':'true',\n style:{position:'absolute', left:'-9999px', top:'-9999px', width:'1px', height:'1px', overflow:'hidden', opacity:0}\n },\n h('label', null, 'Company URL'),\n h('input', {\n type:'text', name:'company_url', tabIndex:-1, autoComplete:'off',\n value: companyUrl, onChange: (ev) => setCompanyUrl(ev.target.value)\n })\n ),\n\n err ? h('div', {className:'flex items-center gap-1.5 text-[12px] text-error bg-error/10 border border-error/30 rounded-lg px-3 py-2'},\n h(Icon, {name:'error', size:14}),\n h('span', null, err)\n ) : null,\n\n h('button', {\n type:'submit', disabled: busy,\n className:'w-full mt-1 py-2.5 rounded-lg bg-primary text-on-primary font-bold text-[13px] uppercase tracking-wider flex items-center justify-center gap-2 hover:opacity-90 disabled:opacity-50 transition-all'\n },\n busy ? h(Spinner, {size:15, color:'#1000a9'}) : h(Icon, {name: isSignup ? 'person_add' : 'login', size:16}),\n busy ? 'Please wait-' : (isSignup ? 'Create account' : 'Log in')\n )\n ),\n\n // Social / identity providers\n h('div', {className:'flex items-center gap-3'},\n h('div', {className:'flex-1 h-px bg-border-subtle'}),\n h('span', {className:'text-[10px] font-semibold uppercase tracking-widest text-text-muted'}, 'or'),\n h('div', {className:'flex-1 h-px bg-border-subtle'})\n ),\n h('div', {className:'flex flex-col gap-2'},\n h('button', {\n type:'button', onClick: () => { window.location.href = '/api/login/google'; },\n className:'w-full py-2.5 rounded-lg border border-border-subtle bg-surface-container-lowest text-on-surface font-medium text-[13px] flex items-center justify-center gap-2 hover:border-outline/40 transition-all'\n },\n h(Icon, {name:'g_translate', size:16, className:'text-primary'}),\n 'Continue with Google'\n ),\n h('button', {\n type:'button', onClick: () => { window.location.href = '/api/login/microsoft'; },\n className:'w-full py-2.5 rounded-lg border border-border-subtle bg-surface-container-lowest text-on-surface font-medium text-[13px] flex items-center justify-center gap-2 hover:border-outline/40 transition-all'\n },\n h(Icon, {name:'window', size:16, className:'text-secondary'}),\n 'Continue with Microsoft'\n )\n ),\n h('p', {className:'text-[10px] text-text-muted text-center leading-relaxed'},\n 'Social login may need the workspace owner to configure it first.'\n )\n )\n );\n }\n\n // --- Auth gate. On mount, asks the server who we are (GET /api/auth/me). While\n // that resolves we show a spinner; an authenticated cookie session mounts the\n // App, otherwise we show the login/signup screen. 'nexus-auth-required' (fired\n // by the wrapped fetch on a 401) bounces an expired session back to the screen. ---\n function AuthGate() {\n const [status, setStatus] = useState('loading'); // 'loading' | 'authed' | 'guest'\n\n const check = async () => {\n try {\n const r = await fetch('/api/auth/me', {headers:{'Accept':'application/json'}});\n const data = await r.json().catch(() => ({}));\n const authed = r.ok && data && data.ok;\n // Stash the resolved identity (incl. the master flag) on window.__nexus BEFORE App mounts,\n // so App's synchronous render gate + the account menu (frontend_js.ts) can read it. Only the\n // real master account gets isPlatformAdmin=true; everyone else is explicitly false.\n try {\n window.__nexus = window.__nexus || {};\n window.__nexus.me = authed ? data : null;\n window.__nexus.isPlatformAdmin = !!(authed && data.isPlatformAdmin);\n // Phase D: read-only impersonation flags from the flattened /api/auth/me, stashed next\n // to isPlatformAdmin so App can render the fixed \"Viewing as ...\" banner synchronously.\n window.__nexus.impersonating = !!(authed && data.impersonating);\n window.__nexus.impersonatedTenant = (authed && data.impersonatedTenant) || null;\n } catch (e2) {}\n setStatus(authed ? 'authed' : 'guest');\n } catch (e) {\n try {\n window.__nexus = window.__nexus || {};\n window.__nexus.isPlatformAdmin = false;\n window.__nexus.impersonating = false;\n window.__nexus.impersonatedTenant = null;\n } catch (e2) {}\n setStatus('guest');\n }\n };\n\n useEffect(() => { check(); }, []);\n\n useEffect(() => {\n const onRequired = () => setStatus('guest');\n window.addEventListener('nexus-auth-required', onRequired);\n return () => window.removeEventListener('nexus-auth-required', onRequired);\n }, []);\n\n if (status === 'loading') {\n return h('div', {className:'flex h-screen items-center justify-center flex-col gap-4'},\n h(Spinner, {size:32}),\n h('div', {className:'text-text-muted text-[13px] font-medium'}, 'Checking session-')\n );\n }\n if (status === 'authed') return h(App);\n return h(AuthScreen);\n }\n\n const root = createRoot(document.getElementById('root'));\n // Real session-aware gate: AuthGate checks /api/auth/me, then mounts App or the login screen.\n root.render(h(AuthGate));\n `;\n}\n",[359],"26dd7106-5f0f-11f1-97b5-1607ee4eb77e","frontend_js.ts","463d4604-5774-11f1-8222-ee650bb23af1",994,["D",1780465410611],70,"import { getAppJS2 } from \"./frontend_js2.ts\";\nexport function getAppJS(): string {\n return `\n import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';\n import { createRoot } from 'react-dom/client';\n\n const h = React.createElement;\n\n // --- Shared-secret auth (matches the APP_TOKEN gate in main.ts) -----------\n const NEXUS_TOKEN_KEY = 'nexus_token';\n const getToken = () => { try { return localStorage.getItem(NEXUS_TOKEN_KEY) || ''; } catch (e) { return ''; } };\n const setToken = (t) => { try { localStorage.setItem(NEXUS_TOKEN_KEY, t); } catch (e) {} };\n const clearToken = () => { try { localStorage.removeItem(NEXUS_TOKEN_KEY); } catch (e) {} };\n\n // Wrap window.fetch once so every /api/ call carries the token without touching the\n // dozens of scattered fetch() call-sites. /api/app-* and /api/auth/* are public (no header).\n const __origFetch = window.fetch.bind(window);\n window.fetch = (input, init) => {\n const url = typeof input === 'string' ? input : ((input && input.url) || '');\n const path = url.replace(location.origin, '');\n const isApi = path.startsWith('/api/');\n const isPublic = path.startsWith('/api/app-') || path.startsWith('/api/auth/');\n let nextInput = input, nextInit = init;\n if (isApi && !isPublic && typeof input === 'string') {\n const tok = getToken();\n const headers = new Headers((init && init.headers) || {});\n if (tok && !headers.has('Authorization')) headers.set('Authorization', 'Bearer ' + tok);\n nextInit = { ...(init || {}), headers };\n }\n return __origFetch(nextInput, nextInit).then((res) => {\n if (isApi && !isPublic) {\n if (res.status === 401) {\n clearToken();\n window.dispatchEvent(new CustomEvent('nexus-auth-required'));\n } else if (res.status >= 500) {\n // Surface real server errors centrally instead of letting each call-site swallow them\n // with .catch(()=>[]). 4xx are often expected/handled, so only 5xx raises a toast.\n window.dispatchEvent(new CustomEvent('nexus-api-error', { detail: { path, status: res.status } }));\n }\n }\n return res;\n }).catch((err) => {\n if (isApi && !isPublic) {\n window.dispatchEvent(new CustomEvent('nexus-api-error', { detail: { path, status: 0 } }));\n }\n throw err;\n });\n };\n // Token-bearing download (for export <a href> links that can't send a header).\n window.__nexusDownload = (path) => {\n const sep = path.includes('?') ? '&' : '?';\n const tok = getToken();\n const href = tok ? path + sep + 'token=' + encodeURIComponent(tok) : path;\n window.open(href, '_blank');\n };\n\n const _ui = await import('/api/app-ui');\n const { Icon, Spinner, Badge, StatusDot, Toggle, Btn, IconBtn,\n Input, Textarea, Select, BrandIcon, MetricCard,\n DateRangePicker, TrendBadge, GlassPanel, SectionHeader, DataDisplay } = _ui;\n\n const _ch = await import('/api/app-charts').catch(() => ({}));\n const BarChart = _ch.BarChart || null;\n const Sparkline = _ch.Sparkline || (()=>null);\n const LineChart = _ch.LineChart || null;\n const ChannelChart = _ch.ChannelChart || null;\n // Phase 1 Advanced charts\n const FunnelFlowChart = _ch.FunnelFlowChart || (() => null);\n const PipelineVelocityChart = _ch.PipelineVelocityChart || (() => null);\n\n // Per-integration custom renderers (Gmail inbox, Drive grid, Calendar timeline, Sheets/Docs cards).\n const _rd = await import('/api/app-renderers').catch(() => ({}));\n const _rd2 = await import('/api/app-renderers2').catch(() => ({}));\n const INTEGRATION_RENDERERS = {\n gmail: _rd.GmailRenderer, drive: _rd.DriveRenderer, calendar: _rd.CalendarRenderer,\n sheets: _rd.SheetsRenderer, docs: _rd.DocsRenderer, linkedin: _rd.LinkedInRenderer,\n gsc: _rd.GSCRenderer, youtube: _rd.YouTubeRenderer,\n outlook: _rd.OutlookRenderer, wordpress: _rd.WordPressRenderer, producthunt: _rd.ProductHuntRenderer,\n ahrefs: _rd2.AhrefsRenderer, onedrive: _rd2.OneDriveRenderer, teams: _rd2.TeamsRenderer, excel: _rd2.ExcelRenderer, ga4: _rd2.GA4Renderer,\n };\n\n // Page-level workspace components (Dashboard, MarketingWorkspace, SalesWorkspace, WorkspacePage, SystemStatusBar, TeamHub).\n // Extracted to a separate served module so frontend_js.ts stays under val.town's 80K char limit.\n const _pages = await import('/api/app-pages').catch(() => ({}));\n // Renamed: 'Dashboard' is now AnalyticsPage (analytics-style KPIs/funnel/feed).\n // The 'dashboard' nav route now lands on the new CommandCenter from /api/app-command.\n const AnalyticsPage = _pages.AnalyticsPage || _pages.Dashboard || (() => h('div', {className:'p-8 text-text-muted'}, 'Pages module failed to load'));\n const MarketingWorkspace= _pages.MarketingWorkspace|| (() => null);\n const SalesWorkspace = _pages.SalesWorkspace || (() => null);\n const WorkspacePage = _pages.WorkspacePage || (() => null);\n const SystemStatusBar = _pages.SystemStatusBar || (() => null);\n\n // Command Center - the new home/dashboard surface (chat-style command palette).\n const _cmd = await import('/api/app-command').catch(() => ({}));\n const CommandCenter = _cmd.CommandCenter || (() => h('div', {className:'p-8 text-text-muted'}, 'Command module failed to load'));\n\n // Phase 1 Advanced: intelligence module (UnifiedFunnelView used in Dashboard via pages; IntelligenceBadge here in Sidebar)\n const _intel = await import('/api/app-intelligence').catch(() => ({}));\n const IntelligenceBadge = _intel.IntelligenceBadge || (() => null);\n\n // SettingsPage extracted to its own served module (Phase 1 / C1) so frontend_js2.ts stays under 80K.\n const _settings = await import('/api/app-settings').catch(() => ({}));\n const SettingsPage = _settings.SettingsPage || (() => h('div', {className:'p-8 text-text-muted'}, 'Settings module failed to load'));\n\n // Framework + Calendar pages (NEXUS ULTIMATE FEATURE EXPANSION)\n const _objectives = await import('/api/app-objectives').catch(() => ({}));\n const ObjectivesPage = _objectives.ObjectivesPage || (() => h('div', {className:'p-8 text-text-muted'}, 'Objectives module failed to load'));\n const _calendar = await import('/api/app-calendar').catch(() => ({}));\n const CalendarPage = _calendar.CalendarPage || (() => h('div', {className:'p-8 text-text-muted'}, 'Calendar module failed to load'));\n const _exps = await import('/api/app-experiments').catch(() => ({}));\n const ExperimentBoard = _exps.ExperimentBoard || (() => h('div', {className:'p-8 text-text-muted'}, 'Experiments module failed to load'));\n const _campaigns = await import('/api/app-campaigns').catch(() => ({}));\n const CampaignsPage = _campaigns.CampaignsPage || (() => h('div', {className:'p-8 text-text-muted'}, 'Campaigns module failed to load'));\n const _tasks = await import('/api/app-tasks').catch(() => ({}));\n const TasksPage = _tasks.TasksPage || _tasks.default || (() => h('div', {className:'p-8 text-text-muted'}, 'Tasks module failed to load'));\n // Platform (master-only) console — cross-tenant read console for the platform owner.\n // Loaded the same way as every other page module; the view router + nav are gated on\n // me.isPlatformAdmin so non-master accounts can never reach it.\n const _platform = await import('/api/app-platform').catch(() => ({}));\n const PlatformConsole = _platform.PlatformConsole || _platform.default || (() => h('div', {className:'p-8 text-text-muted'}, 'Platform module failed to load'));\n const _kg = await import('/api/app-knowledge-graph').catch(() => ({}));\n const KnowledgeGraphView = _kg.KnowledgeGraphView || (() => null);\n const _approvals = await import('/api/app-approvals').catch(() => ({}));\n const ApprovalsPage = _approvals.ApprovalsPage || (() => h('div', {className:'p-8 text-text-muted'}, 'Approvals module failed to load'));\n const _crm = await import('/api/app-crm').catch(() => ({}));\n const CRMWorkspace = _crm.CRMWorkspace || (() => h('div', {className:'p-8 text-text-muted'}, 'CRM module failed to load'));\n const _skills = await import('/api/app-skills').catch(() => ({}));\n const SkillsView = _skills.SkillsView || (() => h('div', {className:'p-8 text-text-muted'}, 'Playbooks module failed to load'));\n\n const _marked = await import('https://esm.sh/marked@4').catch(() => ({}));\n const marked = _marked.marked || ((s) => s);\n\n const parseTools = (tools) => {\n if (Array.isArray(tools)) return tools;\n if (typeof tools === 'string' && tools.trim()) {\n try { return JSON.parse(tools); } catch { return []; }\n }\n return [];\n };\n\n const INTEGRATIONS = ['google', 'ahrefs', 'ga4', 'gsc', 'gmail', 'drive', 'sheets', 'docs', 'calendar', 'linkedin', 'outlook', 'onedrive', 'teams', 'excel', 'wordpress', 'youtube', 'producthunt'];\n\n const INTEGRATION_META = {\n google: { icon: 'google', label: 'Google Workspace', category: 'workspace', color: '#4285f4' },\n ahrefs: { icon: 'ahrefs', label: 'Ahrefs', category: 'marketing', color: '#f59e0b' },\n ga4: { icon: 'googleanalytics', label: 'Google Analytics 4', category: 'marketing', color: '#e37400' },\n gsc: { icon: 'googlesearchconsole', label: 'Google Search Console', category: 'marketing', color: '#34a853' },\n gmail: { icon: 'gmail', label: 'Gmail', category: 'workspace', color: '#ea4335' },\n drive: { icon: 'googledrive', label: 'Google Drive', category: 'workspace', color: '#1fa463' },\n sheets: { icon: 'googlesheets', label: 'Google Sheets', category: 'workspace', color: '#0f9d58' },\n docs: { icon: 'googledocs', label: 'Google Docs', category: 'workspace', color: '#4285f4' },\n calendar: { icon: 'googlecalendar', label: 'Google Calendar', category: 'workspace', color: '#4285f4' },\n linkedin: { icon: 'linkedin', label: 'LinkedIn', category: 'marketing', color: '#0077b5' },\n outlook: { icon: 'microsoftoutlook', label: 'Outlook', category: 'sales', color: '#0078d4' },\n wordpress: { icon: 'wordpress', label: 'WordPress', category: 'marketing', color: '#21759b' },\n youtube: { icon: 'youtube', label: 'YouTube', category: 'marketing', color: '#ff0000' },\n producthunt: { icon: 'producthunt', label: 'Product Hunt', category: 'marketing', color: '#da552f' },\n onedrive: { icon: 'microsoftonedrive', label: 'OneDrive', category: 'workspace', color: '#0078d4' },\n teams: { icon: 'microsoftteams', label: 'Microsoft Teams', category: 'workspace', color: '#6264a7' },\n excel: { icon: 'microsoftexcel', label: 'Microsoft Excel', category: 'workspace', color: '#217346' },\n };\n\n // Action schema:\n // { label, endpoint, method?: 'GET'|'POST' (default GET),\n // form?: [{ key, label, type, placeholder?, required?, rows? }],\n // buildBody?: (formValues) => objectToSend }\n // Each integration becomes a mini-app: read actions populate the data display,\n // write actions render an inline form whose submit POSTs to the same /data?endpoint=X.\n const INTEGRATION_ACTIONS = {\n google: [],\n ahrefs: [\n { label: 'Site Overview', endpoint: 'site-explorer' },\n { label: 'Top Pages', endpoint: 'top-pages' },\n { label: 'Keywords', endpoint: 'keywords' },\n { label: 'Backlinks', endpoint: 'backlinks' },\n { label: 'Ref. Domains', endpoint: 'referring-domains' },\n { label: 'Domain Rating', endpoint: 'domain-rating' },\n { label: 'Organic KWs', endpoint: 'organic-keywords' },\n { label: 'Backlinks Stats', endpoint: 'backlinks-stats' },\n { label: 'Keywords Overview', endpoint: 'keywords-overview' },\n { label: 'Broken Backlinks', endpoint: 'broken-backlinks' },\n { label: 'Anchors', endpoint: 'anchors' },\n ],\n ga4: [\n { label: 'KPI Overview', endpoint: 'kpi' },\n { label: 'Traffic Trend', endpoint: 'traffic-over-time' },\n { label: 'Acquisition', endpoint: 'user-acquisition' },\n { label: 'Realtime', endpoint: 'realtime' },\n { label: 'Traffic Report', endpoint: 'report' },\n { label: 'Top Pages', endpoint: 'page-views' },\n { label: 'Top Events', endpoint: 'top-events' },\n { label: 'Devices', endpoint: 'device-breakdown' },\n { label: 'Funnel', endpoint: 'funnel' },\n { label: 'Conversions', endpoint: 'conversions' },\n { label: 'Landing Pages', endpoint: 'landing-pages' },\n { label: 'Acquisition Source', endpoint: 'acquisition-source' },\n { label: 'Cohort Retention', endpoint: 'cohort-retention' },\n ],\n gsc: [\n { label: 'Search Queries', endpoint: 'search-analytics' },\n { label: 'Top Pages', endpoint: 'pages' },\n { label: 'Sitemaps', endpoint: 'sitemaps' },\n { label: 'Trend', endpoint: 'trend' },\n { label: 'By Device', endpoint: 'by-device' },\n { label: 'By Country', endpoint: 'by-country' },\n { label: 'Query-Page', endpoint: 'query-page' },\n ],\n gmail: [\n // Reads\n { label: 'Inbox', endpoint: 'inbox' },\n { label: 'Unread', endpoint: 'unread' },\n { label: 'Sent', endpoint: 'sent' },\n { label: 'Starred', endpoint: 'starred' },\n { label: 'Labels', endpoint: 'labels' },\n { label: 'Profile', endpoint: 'profile' },\n // Writes\n { label: 'Compose Email', endpoint: 'send', method:'POST', icon:'send', form:[\n { key:'to', label:'To', type:'text', placeholder:'recipient@example.com', required:true },\n { key:'cc', label:'Cc', type:'text', placeholder:'(optional)' },\n { key:'subject', label:'Subject', type:'text', required:true },\n { key:'body', label:'Message', type:'textarea', rows:8, required:true },\n ], buildBody: f => ({to:f.to, cc:f.cc, subject:f.subject, body:f.body}) },\n { label: 'Save Draft', endpoint: 'createDraft', method:'POST', icon:'drafts', form:[\n { key:'to', label:'To', type:'text', placeholder:'recipient@example.com' },\n { key:'subject', label:'Subject', type:'text' },\n { key:'body', label:'Message', type:'textarea', rows:8 },\n ], buildBody: f => ({to:f.to, subject:f.subject, body:f.body}) },\n ],\n drive: [\n { label: 'Recent Files', endpoint: 'recent' },\n { label: 'Shared with me',endpoint: 'shared' },\n { label: 'Starred', endpoint: 'starred' },\n { label: 'Trash', endpoint: 'trash' },\n { label: 'Storage Quota', endpoint: 'about' },\n // Writes\n { label: 'Create Folder', endpoint: 'createFolder', method:'POST', icon:'create_new_folder', form:[\n { key:'name', label:'Folder name', type:'text', required:true, placeholder:'New folder' },\n ], buildBody: f => ({name:f.name}) },\n { label: 'Delete File', endpoint: 'deleteFile', method:'POST', icon:'delete', form:[\n { key:'id', label:'File ID', type:'text', required:true, placeholder:'paste ID from Recent Files' },\n ], buildBody: f => ({id:f.id}) },\n ],\n sheets: [\n { label: 'List Sheets', endpoint: 'list' },\n // Writes\n { label: 'Create Sheet', endpoint: 'create', method:'POST', icon:'add_chart', form:[\n { key:'title', label:'Spreadsheet title', type:'text', required:true },\n ], buildBody: f => ({title:f.title}) },\n { label: 'Append Row', endpoint: 'appendRow', method:'POST', icon:'add_row_below', form:[\n { key:'spreadsheetId', label:'Spreadsheet ID', type:'text', required:true, placeholder:'paste ID from List Sheets' },\n { key:'range', label:'Range', type:'text', required:true, placeholder:'Sheet1!A:Z' },\n { key:'values', label:'Values (comma-separated)', type:'text', required:true, placeholder:'col1, col2, col3' },\n ], buildBody: f => ({spreadsheetId:f.spreadsheetId, range:f.range, values:f.values.split(',').map(v=>v.trim())}) },\n ],\n docs: [\n { label: 'List Docs', endpoint: 'list' },\n // Writes\n { label: 'Create Doc', endpoint: 'create', method:'POST', icon:'note_add', form:[\n { key:'title', label:'Document title', type:'text', required:true },\n { key:'content', label:'Initial content (optional)', type:'textarea', rows:5 },\n ], buildBody: f => ({title:f.title, content:f.content}) },\n { label: 'Append Text', endpoint: 'appendText', method:'POST', icon:'edit_note', form:[\n { key:'documentId', label:'Document ID', type:'text', required:true, placeholder:'paste ID from List Docs' },\n { key:'text', label:'Text to append', type:'textarea', rows:5, required:true },\n ], buildBody: f => ({documentId:f.documentId, text:f.text}) },\n ],\n calendar: [\n { label: 'Upcoming', endpoint: 'upcoming' },\n { label: 'Today', endpoint: 'today' },\n { label: 'This Week', endpoint: 'week' },\n { label: 'Calendars', endpoint: 'calendars' },\n // Writes\n { label: 'Create Event', endpoint: 'createEvent', method:'POST', icon:'event_available', form:[\n { key:'summary', label:'Event title', type:'text', required:true },\n { key:'description', label:'Description', type:'textarea', rows:3 },\n { key:'location', label:'Location', type:'text' },\n { key:'start', label:'Start time', type:'datetime-local', required:true },\n { key:'end', label:'End time', type:'datetime-local', required:true },\n { key:'attendees', label:'Attendees (comma-separated)', type:'text', placeholder:'a@x.com, b@y.com' },\n ], buildBody: f => ({summary:f.summary, description:f.description, location:f.location, start:f.start, end:f.end, attendees: f.attendees ? f.attendees.split(',').map(s=>s.trim()).filter(Boolean) : []}) },\n { label: 'Delete Event', endpoint: 'deleteEvent', method:'POST', icon:'event_busy', form:[\n { key:'eventId', label:'Event ID', type:'text', required:true, placeholder:'paste ID from Upcoming' },\n ], buildBody: f => ({eventId:f.eventId}) },\n ],\n linkedin: [\n { label: 'My Profile', endpoint: 'profile' },\n { label: 'Posts', endpoint: 'posts' },\n { label: 'Analytics', endpoint: 'analytics' },\n { label: 'Connections', endpoint: 'connections' },\n { label: 'Compose Post', endpoint: 'share', method:'POST', icon:'post_add', form:[\n { key:'text', label:'Post text', type:'textarea', rows:4, required:true },\n ], buildBody: f => ({text: f.text}) },\n ],\n outlook: [\n { label: 'Inbox', endpoint: 'inbox' },\n { label: 'Calendar', endpoint: 'calendar' },\n { label: 'Contacts', endpoint: 'contacts' },\n // Writes\n { label: 'Send Email', endpoint: 'send', method:'POST', icon:'send', form:[\n { key:'to', label:'To', type:'text', required:true, placeholder:'recipient@example.com' },\n { key:'subject', label:'Subject', type:'text', required:true },\n { key:'body', label:'Message', type:'textarea', rows:8, required:true },\n ], buildBody: f => ({\n message:{\n subject: f.subject,\n body: { contentType:'Text', content: f.body },\n toRecipients: [{ emailAddress: { address: f.to } }],\n },\n saveToSentItems: true\n }) },\n ],\n wordpress: [\n { label: 'Posts', endpoint: 'posts' },\n { label: 'Pages', endpoint: 'pages' },\n { label: 'Media', endpoint: 'media' },\n { label: 'Categories', endpoint: 'categories' },\n { label: 'Tags', endpoint: 'tags' },\n { label: 'Search', endpoint: 'search' },\n { label: 'Comments', endpoint: 'comments' },\n // Writes\n { label: 'Publish Post', endpoint: 'publish-post', method:'POST', icon:'post_add', form:[\n { key:'title', label:'Title', type:'text', required:true },\n { key:'content', label:'Content (HTML or text)', type:'textarea', rows:8, required:true },\n { key:'status', label:'Status', type:'text', placeholder:'publish | draft' },\n ], buildBody: f => ({title:f.title, content:f.content, status: f.status || 'publish'}) },\n { label: 'Update Post', endpoint: 'update-post', method:'POST', icon:'edit_note', form:[\n { key:'id', label:'Post ID', type:'text', required:true, placeholder:'paste ID from Posts' },\n { key:'title', label:'Title', type:'text' },\n { key:'content', label:'Content (HTML or text)', type:'textarea', rows:8 },\n { key:'status', label:'Status', type:'text', placeholder:'publish | draft' },\n ], buildBody: f => ({id:f.id, title:f.title, content:f.content, status:f.status}) },\n ],\n youtube: [\n { label: 'Channels', endpoint: 'channels' },\n { label: 'Analytics', endpoint: 'analytics' },\n { label: 'Trending Videos', endpoint: 'videos' },\n { label: 'Search', endpoint: 'search' },\n ],\n producthunt: [\n { label: \"Today's Posts\", endpoint: 'posts' },\n { label: 'Topics', endpoint: 'topics' },\n ],\n onedrive: [\n { label: 'Recent Files', endpoint: 'recent' },\n { label: 'My Files', endpoint: 'files' },\n { label: 'Search', endpoint: 'search', method: 'POST', icon: 'search',\n form: [{ key: 'q', label: 'Search query', type: 'text', required: true, placeholder: 'e.g. budget.xlsx' }],\n buildBody: f => ({ q: f.q }) },\n { label: 'Create Folder', endpoint: 'createFolder', method: 'POST', icon: 'create_new_folder',\n form: [{ key: 'name', label: 'Folder name', type: 'text', required: true, placeholder: 'New folder' }],\n buildBody: f => ({ name: f.name }) },\n ],\n teams: [\n { label: 'My Teams', endpoint: 'teams' },\n { label: 'Channels', endpoint: 'channels', method: 'POST', icon: 'tag',\n form: [{ key: 'teamId', label: 'Team ID', type: 'text', required: true, placeholder: 'paste ID from My Teams' }],\n buildBody: f => ({ teamId: f.teamId }) },\n { label: 'Channel Messages', endpoint: 'messages', method: 'POST', icon: 'forum',\n form: [{ key: 'teamId', label: 'Team ID', type: 'text', required: true, placeholder: 'paste ID from My Teams' },\n { key: 'channelId', label: 'Channel ID', type: 'text', required: true, placeholder: 'paste ID from Channels' }],\n buildBody: f => ({ teamId: f.teamId, channelId: f.channelId }) },\n { label: 'My Chats', endpoint: 'chats' },\n { label: 'Chat Messages', endpoint: 'chat-messages', method: 'POST', icon: 'chat',\n form: [{ key: 'chatId', label: 'Chat ID', type: 'text', required: true, placeholder: 'paste ID from My Chats' }],\n buildBody: f => ({ chatId: f.chatId }) },\n { label: 'Send to Channel', endpoint: 'send-channel', method: 'POST', icon: 'send',\n form: [{ key: 'teamId', label: 'Team ID', type: 'text', required: true, placeholder: 'paste ID from My Teams' },\n { key: 'channelId', label: 'Channel ID', type: 'text', required: true, placeholder: 'paste ID from Channels' },\n { key: 'content', label: 'Message', type: 'textarea', rows: 5, required: true }],\n buildBody: f => ({ teamId: f.teamId, channelId: f.channelId, content: f.content }) },\n { label: 'Send Chat Message', endpoint: 'send-chat', method: 'POST', icon: 'send',\n form: [{ key: 'chatId', label: 'Chat ID', type: 'text', required: true, placeholder: 'paste ID from My Chats' },\n { key: 'content', label: 'Message', type: 'textarea', rows: 5, required: true }],\n buildBody: f => ({ chatId: f.chatId, content: f.content }) },\n ],\n excel: [\n { label: 'Workbooks', endpoint: 'workbooks' },\n { label: 'Worksheets', endpoint: 'worksheets', method: 'POST', icon: 'tab',\n form: [{ key: 'id', label: 'Workbook file ID', type: 'text', required: true, placeholder: 'paste ID from Workbooks' }],\n buildBody: f => ({ id: f.id }) },\n { label: 'Read Range', endpoint: 'range', method: 'POST', icon: 'grid_on',\n form: [{ key: 'id', label: 'Workbook file ID', type: 'text', required: true, placeholder: 'paste ID from Workbooks' },\n { key: 'sheet', label: 'Worksheet name', type: 'text', required: true, placeholder: 'e.g. Sheet1' }],\n buildBody: f => ({ id: f.id, sheet: f.sheet }) },\n ],\n };\n\n const INTEGRATION_FIELDS = {\n google: [\n { key: 'clientId', label: 'OAuth Client ID', type: 'text', hint: 'From Google Cloud Console - APIs & Services - Credentials - OAuth 2.0 Client ID' },\n { key: 'apiSecret', label: 'OAuth Client Secret', type: 'password', hint: 'From the same OAuth 2.0 credential' },\n { key: 'redirectUri',label: 'Redirect URI', type: 'text', hint: 'Register this exact URI in Google Cloud Console: ' + window.location.origin + '/api/auth/google/callback' },\n ],\n ahrefs: [{ key: 'apiKey', label: 'API Key', type: 'password' }, { key: 'target', label: 'Target Domain', type: 'text' }],\n ga4: [{ key: 'propertyId', label: 'GA4 Property ID', type: 'text', hint: 'Numbers only - e.g. 123456789' }],\n gsc: [{ key: 'siteUrl', label: 'Site URL', type: 'text', hint: 'e.g. https://example.com' }],\n gmail: [],\n drive: [],\n sheets: [],\n docs: [],\n calendar: [],\n linkedin: [{ key: 'accessToken', label: 'Access Token', type: 'password', hint: 'LinkedIn v2 API - requires Marketing Developer Platform approval' }],\n outlook: [{ key: 'accessToken', label: 'Access Token', type: 'password' }],\n wordpress: [{ key: 'siteUrl', label: 'Site URL', type: 'text' }, { key: 'apiKey', label: 'Username', type: 'text' }, { key: 'apiSecret', label: 'App Password', type: 'password' }],\n youtube: [{ key: 'apiKey', label: 'API Key (public data)', type: 'password' }, { key: 'ytChannels', label: 'My channels', type: 'text', hint: 'List ALL your channel handles or IDs, comma-separated (e.g. @AIHive, @MiAgent, UC...). The FIRST is your primary channel (AI Hive). Each imports with its own stats.' }],\n producthunt: [{ key: 'apiKey', label: 'API Key', type: 'password' }],\n onedrive: [],\n teams: [],\n excel: [],\n };\n\n const ALL_TOOLS = ['google', 'ahrefs', 'ga4', 'gsc', 'gmail', 'drive', 'sheets', 'docs', 'calendar', 'linkedin', 'outlook', 'onedrive', 'teams', 'excel', 'wordpress', 'youtube', 'producthunt'];\n\n function useToast() {\n const [toasts, setToasts] = useState([]);\n const show = useCallback((message, type='success') => {\n const id = Date.now();\n setToasts(prev => [...prev.slice(-4), { id, message, type }]);\n setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 3200);\n }, []);\n return { toasts, show };\n }\n\n function ToastContainer({toasts}) {\n const tone = {\n success: 'bg-secondary/15 border-secondary/40 text-secondary',\n error: 'bg-error/15 border-error/40 text-error',\n info: 'bg-tertiary/15 border-tertiary/40 text-tertiary'\n };\n const ico = {success:'check_circle', error:'error', info:'notifications'};\n return h('div', {className:'fixed top-5 right-5 z-[9999] flex flex-col gap-2.5'},\n toasts.map(t => h('div', {\n key:t.id, className:'toast-in flex items-center gap-2.5 px-4 py-3 rounded-xl border backdrop-blur-xl shadow-2xl text-[13px] font-medium max-w-sm ' + (tone[t.type]||tone.info)\n },\n h(Icon, {name: ico[t.type]||'info', size:18}),\n h('span', null, t.message)\n ))\n );\n }\n\n\n // normalizeData imported from /api/app-renderers (extracted to stay under val.town's 80K char limit).\n const normalizeData = _rd.normalizeData || ((_n, _e, d) => d);\n\n function parseGA4Rows(data) {\n if (!data?.rows?.length) return [];\n if (data.dimensionHeaders) {\n const dh = data.dimensionHeaders.map(h => h.name);\n const mh = (data.metricHeaders || []).map(h => h.name);\n return data.rows.map(r => ({\n ...Object.fromEntries(dh.map((k,i) => [k, r.dimensionValues[i]?.value])),\n ...Object.fromEntries(mh.map((k,i) => [k, r.metricValues[i]?.value]))\n }));\n }\n if (data.metricHeaders) {\n const mh = data.metricHeaders.map(h => h.name);\n return data.rows.map(r => Object.fromEntries(mh.map((k,i) => [k, r.metricValues[i]?.value])));\n }\n return [];\n }\n\n\n function GA4RichDisplay({data, endpoint}) {\n const fmtN = v => { const n = parseFloat(v)||0; return n>=1e6?(n/1e6).toFixed(1)+'M':n>=1e3?(n/1e3).toFixed(1)+'K':String(Math.round(n*100)/100); };\n const fmtPct = v => (parseFloat(v)*100).toFixed(1)+'%';\n\n if (endpoint === 'traffic-over-time') {\n const rows = parseGA4Rows(data);\n if (!rows.length || !LineChart) return null;\n return h('div', {className:'mt-4 glass-panel rounded-xl p-5'},\n h('div', {className:'text-[13px] font-semibold text-on-surface-variant mb-3.5'}, 'Sessions Over Time'),\n h(LineChart, {data: rows, xKey:'date', yKey:'sessions', color:'#c0c1ff'})\n );\n }\n\n if (endpoint === 'user-acquisition') {\n const rows = parseGA4Rows(data);\n if (!rows.length || !ChannelChart) return null;\n return h('div', {className:'mt-4 glass-panel rounded-xl p-5'},\n h('div', {className:'text-[13px] font-semibold text-on-surface-variant mb-3.5'}, 'Sessions by Channel'),\n h(ChannelChart, {data: rows, labelKey:'sessionDefaultChannelGroup', valueKey:'sessions'})\n );\n }\n\n if (endpoint === 'kpi') {\n const mh = (data.metricHeaders || []).map(h => h.name);\n const row = data.rows?.[0];\n if (!row || !mh.length) return null;\n const vals = row.metricValues || [];\n const n = mh.length;\n const KPI_META = [\n { key:'sessions', label:'Sessions', color:'#c0c1ff', fmt:fmtN },\n { key:'activeUsers', label:'Active Users', color:'#4edea3', fmt:fmtN },\n { key:'newUsers', label:'New Users', color:'#d0bcff', fmt:fmtN },\n { key:'screenPageViews', label:'Page Views', color:'#8083ff', fmt:fmtN },\n { key:'engagementRate', label:'Engagement Rate', color:'#6ffbbe', fmt:fmtPct },\n { key:'bounceRate', label:'Bounce Rate', color:'#ffb4ab', fmt:fmtPct },\n ];\n return h('div', {className:'grid gap-3 mt-4', style:{gridTemplateColumns:'repeat(auto-fill, minmax(155px, 1fr))'}},\n KPI_META.map(({key, label, color, fmt}) => {\n const idx = mh.indexOf(key);\n if (idx < 0) return null;\n const cur = parseFloat(vals[idx]?.value || '0');\n const prev = n < vals.length ? parseFloat(vals[idx + n]?.value || '0') : null;\n return h('div', {\n key, className:'glass-panel rounded-xl p-4',\n style:{borderColor: color+'28'}\n },\n h('div', {className:'text-[10px] text-text-muted uppercase tracking-wider mb-2'}, label),\n h('div', {className:'flex items-baseline gap-2 flex-wrap'},\n h('div', {className:'text-[26px] font-extrabold text-on-surface leading-none'}, fmt(String(cur))),\n prev != null && h(TrendBadge, {current: cur, previous: prev})\n ),\n h('div', {className:'mt-2 h-0.5 rounded', style:{background:color, opacity:0.35}})\n );\n }).filter(Boolean)\n );\n }\n return null;\n }\n\n\n const GOOGLE_SHARED = ['ga4','gsc','youtube','drive','sheets','docs','calendar','gmail'];\n\n function IntegrationPanel({integrationName, integrations, onGoToSettings, onTargetSave}) {\n const meta = INTEGRATION_META[integrationName];\n const actions = INTEGRATION_ACTIONS[integrationName] || [];\n const integration = integrations.find(i => i.name === integrationName);\n const google = integrations.find(i => i.name === 'google');\n const outlook = integrations.find(i => i.name === 'outlook');\n // Shared-OAuth services inherit their connection: Google Workspace from 'google',\n // Microsoft (onedrive/teams/excel) from 'outlook'.\n const MS_SHARED = ['onedrive','teams','excel'];\n const connected = integration?.connected\n || (GOOGLE_SHARED.includes(integrationName) && google?.connected)\n || (MS_SHARED.includes(integrationName) && outlook?.connected);\n\n const [activeEndpoint, setActiveEndpoint] = useState(null);\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [autoRefresh, setAutoRefresh] = useState(false);\n const [countdown, setCountdown] = useState(0);\n const [lastFetched, setLastFetched] = useState(null);\n const [targetEdit, setTargetEdit] = useState('');\n const [savingTarget, setSavingTarget] = useState(false);\n const [days, setDays] = useState(30);\n const arRef = useRef(null);\n const cdRef = useRef(null);\n const savedTarget = integration?.extra_config?.target || '';\n\n // YouTube channel selector (Marketing tab): pick which of the user's channels to view +\n // manage the channel list inline (so it doesn't have to be set in Settings).\n const [ytChannels, setYtChannels] = useState([]);\n const [ytChannel, setYtChannel] = useState('');\n const [ytEdit, setYtEdit] = useState('');\n const [ytEditing, setYtEditing] = useState(false);\n const loadYtChannels = () => {\n fetch('/api/integrations/youtube/data?endpoint=channels').then(r => r.json()).then(d => {\n const items = Array.isArray(d && d.items) ? d.items : [];\n const list = items.map(it => { const id = (typeof it.id === 'string' ? it.id : ''); return { id: id, title: (it.snippet && it.snippet.title) || '(channel)', primary: !!(d && d.__primary) && id === d.__primary }; }).filter(c => c.id);\n setYtChannels(list);\n setYtChannel(prev => prev || ((list.find(c => c.primary) || list[0] || {}).id || ''));\n }).catch(() => {});\n };\n const saveYtChannels = async () => {\n try {\n await fetch('/api/integrations/youtube', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ extra_config: { youtube_channels: ytEdit.trim() } }) });\n setYtEditing(false);\n loadYtChannels();\n } catch (e) {}\n };\n\n // Form state for POST/write actions - keyed by endpoint so switching tabs doesn't lose values.\n const [formValues, setFormValues] = useState({});\n const [submitting, setSubmitting] = useState(false);\n const setFormValue = (k, v) => setFormValues(s => ({...s, [k]: v}));\n\n const fetchData = async (endpoint, extraParams='', daysOverride=null) => {\n const ep = endpoint || activeEndpoint;\n if (!ep) return;\n // YouTube: scope the Analytics view to the selected channel (the dropdown below).\n if (integrationName === 'youtube' && ytChannel && ep === 'analytics' && !extraParams) {\n extraParams = 'channelId=' + encodeURIComponent(ytChannel);\n }\n setActiveEndpoint(ep);\n setLoading(true); setError(null); setData(null);\n try {\n const qs = [extraParams, \\`days=\\${daysOverride ?? days}\\`].filter(Boolean).join('&');\n const res = await fetch(\\`/api/integrations/\\${integrationName}/data?endpoint=\\${ep}&\\${qs}\\`);\n const json = await res.json();\n if (!res.ok) throw new Error(json?.error || json?.message || \\`HTTP \\${res.status}\\`);\n setData(json); setLastFetched(new Date());\n } catch (e) { setError(e.message || 'Failed to fetch data'); }\n finally { setLoading(false); }\n };\n\n // Submit a write/POST action with the current form values.\n const submitWrite = async (action) => {\n if (!action) return;\n // Required field validation\n const missing = (action.form || []).filter(f => f.required && !formValues[f.key]?.trim?.()).map(f => f.label);\n if (missing.length) { setError('Missing required: ' + missing.join(', ')); return; }\n setSubmitting(true); setError(null);\n try {\n const body = action.buildBody ? action.buildBody(formValues) : formValues;\n const res = await fetch(\\`/api/integrations/\\${integrationName}/data?endpoint=\\${action.endpoint}\\`, {\n method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)\n });\n const json = await res.json();\n if (!res.ok) throw new Error(json?.error?.message || json?.error || \\`HTTP \\${res.status}\\`);\n setData(json); setLastFetched(new Date());\n setFormValues({}); // reset form on success\n } catch (e) { setError(e.message || 'Failed to submit'); }\n finally { setSubmitting(false); }\n };\n\n const triggerAction = (action) => {\n setActiveEndpoint(action.endpoint);\n if (action.method === 'POST') {\n // Don't auto-fetch for writes - wait for user to fill form and click Submit.\n setData(null); setError(null);\n setFormValues({});\n } else {\n fetchData(action.endpoint);\n }\n };\n\n const saveTarget = async () => {\n if (!targetEdit.trim()) return;\n setSavingTarget(true);\n try {\n await fetch(\\`/api/integrations/\\${integrationName}\\`, {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({ extra_config: { target: targetEdit.trim() } })\n });\n if (onTargetSave) onTargetSave(integrationName, targetEdit.trim());\n } finally { setSavingTarget(false); }\n };\n\n useEffect(() => {\n clearInterval(arRef.current); clearInterval(cdRef.current);\n if (!autoRefresh || !activeEndpoint) return;\n const INTERVAL = 30000;\n setCountdown(INTERVAL / 1000);\n arRef.current = setInterval(() => { fetchData(activeEndpoint); setCountdown(INTERVAL/1000); }, INTERVAL);\n cdRef.current = setInterval(() => setCountdown(c => Math.max(0, c-1)), 1000);\n return () => { clearInterval(arRef.current); clearInterval(cdRef.current); };\n }, [autoRefresh, activeEndpoint]);\n\n // Re-fetch when period changes (days selector), but only if there's an active endpoint.\n useEffect(() => {\n if (activeEndpoint) fetchData(activeEndpoint);\n }, [days]);\n\n // YouTube: load the user's channels for the selector dropdown.\n useEffect(() => {\n if (integrationName === 'youtube' && connected) loadYtChannels();\n }, [integrationName, connected]);\n\n const analyzeWithAI = () => {\n if (!data) return;\n window.dispatchEvent(new CustomEvent('analyze-data', { detail: { source: meta.label, endpoint: activeEndpoint, data } }));\n };\n\n if (!connected) {\n return h('div', {className:'glass-panel rounded-xl p-12 flex flex-col items-center justify-center gap-4 text-center'},\n h(BrandIcon, {slug: meta.icon, color: meta.color, size: 42}),\n h('div', {className:'text-[18px] font-bold text-on-surface mt-2'}, meta.label),\n h(Badge, {label:'Not Connected', variant:'muted'}),\n h('div', {className:'text-text-muted text-[13px] max-w-xs leading-relaxed mt-1'},\n 'Connect ' + meta.label + ' in Settings to start using this integration.'\n ),\n h(Btn, {onClick: onGoToSettings, variant:'primary', size:'md', className:'mt-2'},\n h(Icon, {name:'settings', size:15}), 'Go to Settings'\n )\n );\n }\n\n return h('div', {className:'flex flex-col gap-4'},\n h('div', {className:'flex items-center justify-between flex-wrap gap-3'},\n h('div', {className:'flex items-center gap-3'},\n h(BrandIcon, {slug: meta.icon, color: meta.color, size: 22}),\n h('div', null,\n h('div', {className:'font-bold text-[17px] text-on-surface'}, meta.label),\n h('div', {className:'flex items-center gap-2 mt-1'},\n h(Badge, {label:'Connected', variant:'success'}),\n lastFetched && h('span', {className:'text-[10px] text-text-muted'},\n 'Updated ' + Math.round((Date.now() - lastFetched)/1000) + 's ago'\n )\n )\n )\n ),\n h('div', {className:'flex gap-2 items-center flex-wrap'},\n h(DateRangePicker, {value: days, onChange: v => { setDays(v); if (activeEndpoint) fetchData(activeEndpoint, '', v); }}),\n data && !loading && h('button', {\n onClick: analyzeWithAI,\n className:'text-[12px] px-3 py-1.5 rounded-lg border border-primary/40 bg-primary/10 text-primary cursor-pointer flex items-center gap-1.5 font-medium hover:bg-primary/20 transition-all'\n }, h(Icon,{name:'bolt', size:14}), 'AI Insights'),\n // Reconnect (re-authorize OAuth in place — no delete/re-add). Updates the same\n // credential row via the callback. Outlook reconnect picks up newly-added scopes.\n (() => {\n const oauthUrl = integrationName === 'outlook' ? '/api/auth/microsoft'\n : integrationName === 'linkedin' ? '/api/auth/linkedin'\n : (integrationName === 'google' || GOOGLE_SHARED.includes(integrationName)) ? '/api/auth/google'\n : null;\n return oauthUrl ? h('button', {\n onClick: () => { window.location.href = oauthUrl; },\n title: 'Re-authorize this connection (keeps your data — no delete needed)',\n className:'text-[12px] px-3 py-1.5 rounded-lg border border-border-subtle bg-surface-container text-text-muted cursor-pointer flex items-center gap-1.5 font-medium hover:text-on-surface hover:border-outline/40 transition-all'\n }, h(Icon,{name:'autorenew', size:14}), 'Reconnect') : null;\n })(),\n activeEndpoint && h('label', {\n className:'flex items-center gap-2 cursor-pointer text-[12px] select-none ' + (autoRefresh?'text-secondary':'text-text-muted')\n },\n h(Toggle, {value: autoRefresh, onChange: setAutoRefresh}),\n autoRefresh ? \\`Auto (\\${countdown}s)\\` : 'Auto'\n ),\n h(Btn, {onClick: () => fetchData(activeEndpoint), variant:'ghost', size:'sm', disabled: !activeEndpoint || loading},\n loading ? h(Spinner, {size:13}) : h(Icon,{name:'refresh', size:14}), 'Refresh'\n )\n )\n ),\n\n integrationName === 'ahrefs' && h('div', {className:'flex items-center gap-2 px-3.5 py-2.5 glass-panel rounded-lg'},\n h(Icon, {name:'public', size:14, className:'text-text-muted'}),\n h('span', {className:'text-[12px] text-text-muted flex-shrink-0'}, 'Target:'),\n savedTarget && !targetEdit\n ? h('span', {className:'text-[13px] text-secondary font-medium flex-1'}, savedTarget)\n : h('input', {\n placeholder:'example.com', value: targetEdit,\n onChange: e => setTargetEdit(e.target.value),\n onKeyDown: e => e.key === 'Enter' && saveTarget(),\n className:'flex-1 bg-transparent border-none text-on-surface text-[12px] outline-none min-w-0'\n }),\n savedTarget && !targetEdit\n ? h('button', {onClick: () => setTargetEdit(savedTarget), className:'text-[10px] text-primary bg-transparent border-none cursor-pointer flex-shrink-0'}, 'change')\n : h('button', {onClick: saveTarget, disabled: savingTarget || !targetEdit.trim(),\n className:'text-[11px] text-secondary bg-secondary/10 border border-secondary/30 rounded px-2 py-0.5 cursor-pointer flex-shrink-0 disabled:opacity-50'\n }, savingTarget ? '-' : 'Save')\n ),\n\n integrationName === 'youtube' && h('div', {className:'flex items-center gap-2 px-3.5 py-2.5 glass-panel rounded-lg flex-wrap'},\n h(Icon, {name:'smart_display', size:14, className:'text-text-muted flex-shrink-0'}),\n h('span', {className:'text-[12px] text-text-muted flex-shrink-0'}, 'Channel:'),\n ytChannels.length\n ? h('select', {\n value: ytChannel,\n onChange: e => { const v = e.target.value; setYtChannel(v); if (activeEndpoint === 'analytics') fetchData('analytics', 'channelId=' + encodeURIComponent(v)); },\n className:'flex-1 min-w-0 bg-surface-container border border-border-subtle rounded px-2 py-1 text-[12px] text-on-surface outline-none cursor-pointer'\n }, ytChannels.map(c => h('option', {key:c.id, value:c.id}, c.title + (c.primary ? ' (Primary)' : ''))))\n : h('span', {className:'text-[12px] text-text-muted flex-1'}, 'No channels yet - click edit to add them.'),\n h('button', {onClick: () => { setYtEditing(!ytEditing); setYtEdit(ytChannels.map(c => c.id).join(', ')); }, className:'text-[10px] text-primary bg-transparent border-none cursor-pointer flex-shrink-0'}, ytEditing ? 'cancel' : 'edit'),\n ytEditing && h('div', {className:'flex items-center gap-2 w-full mt-1.5'},\n h('input', {placeholder:'@AIHive, @MiAgent, UC... (first = primary)', value: ytEdit, onChange: e => setYtEdit(e.target.value), onKeyDown: e => e.key === 'Enter' && saveYtChannels(),\n className:'flex-1 bg-surface-container border border-border-subtle rounded px-2 py-1 text-[12px] text-on-surface outline-none min-w-0'}),\n h('button', {onClick: saveYtChannels, className:'text-[11px] text-secondary bg-secondary/10 border border-secondary/30 rounded px-2 py-0.5 cursor-pointer flex-shrink-0'}, 'Save')\n )\n ),\n\n // -- READ ACTIONS -------------------------------------------------\n (() => {\n const reads = actions.filter(a => !a.method || a.method === 'GET');\n if (!reads.length) return null;\n return h('div', null,\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2'}, '- READ'),\n h('div', {className:'flex flex-wrap gap-2'},\n reads.map(a => h('button', {\n key: a.endpoint, onClick: () => triggerAction(a),\n className:'px-3.5 py-1.5 rounded-lg border text-[12px] font-medium cursor-pointer transition-all flex items-center gap-1.5 ' +\n (activeEndpoint === a.endpoint\n ? 'border-primary bg-primary/15 text-primary'\n : 'border-border-subtle bg-surface-container-lowest text-text-medium-contrast hover:border-outline/40 hover:text-on-surface')\n },\n loading && activeEndpoint === a.endpoint ? h(Spinner, {size:11}) : h(Icon, {name:'terminal', size:12}),\n a.label\n ))\n )\n );\n })(),\n\n // -- WRITE ACTIONS ------------------------------------------------\n (() => {\n const writes = actions.filter(a => a.method === 'POST');\n if (!writes.length) return null;\n return h('div', null,\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-secondary mb-2'}, '- WRITE / SEND'),\n h('div', {className:'flex flex-wrap gap-2'},\n writes.map(a => h('button', {\n key: a.endpoint, onClick: () => triggerAction(a),\n className:'px-3.5 py-1.5 rounded-lg border text-[12px] font-medium cursor-pointer transition-all flex items-center gap-1.5 ' +\n (activeEndpoint === a.endpoint\n ? 'border-secondary bg-secondary/15 text-secondary'\n : 'border-border-subtle bg-surface-container-lowest text-text-medium-contrast hover:border-secondary/40 hover:text-secondary')\n },\n h(Icon, {name: a.icon || 'edit_note', size:12}),\n a.label\n ))\n )\n );\n })(),\n\n // -- WRITE FORM PANEL (inline) ------------------------------------\n (() => {\n const activeAction = actions.find(a => a.endpoint === activeEndpoint);\n if (!activeAction || activeAction.method !== 'POST' || !activeAction.form) return null;\n return h('div', {className:'glass-panel rounded-xl p-lg space-y-md border-l-2 border-l-secondary'},\n h('div', {className:'flex items-center justify-between mb-1'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name: activeAction.icon || 'edit_note', size:18, className:'text-secondary'}),\n h('h4', {className:'text-[15px] font-bold text-on-surface'}, activeAction.label)\n ),\n h('button', {\n onClick: () => { setActiveEndpoint(null); setFormValues({}); setError(null); },\n className:'text-text-muted hover:text-on-surface text-[11px] font-semibold uppercase tracking-wider'\n }, 'CLOSE')\n ),\n h('div', {className:'space-y-3'},\n activeAction.form.map(f => f.type === 'textarea'\n ? h(Textarea, {\n key: f.key, label: f.label + (f.required ? ' *' : ''),\n value: formValues[f.key] || '',\n onChange: v => setFormValue(f.key, v),\n placeholder: f.placeholder, rows: f.rows || 4\n })\n : h(Input, {\n key: f.key, label: f.label + (f.required ? ' *' : ''), type: f.type || 'text',\n value: formValues[f.key] || '',\n onChange: v => setFormValue(f.key, v),\n placeholder: f.placeholder\n })\n )\n ),\n h('div', {className:'flex justify-end gap-2 pt-2'},\n h(Btn, {\n onClick: () => { setActiveEndpoint(null); setFormValues({}); setError(null); },\n variant:'ghost', size:'sm'\n }, 'Cancel'),\n h(Btn, {\n onClick: () => submitWrite(activeAction),\n variant:'secondary', size:'sm', disabled: submitting\n },\n submitting ? h(Spinner, {size:13}) : h(Icon, {name:'send', size:14}),\n submitting ? 'Sending-' : (activeAction.label.replace('Compose ','Send ').replace('Create ','Create '))\n )\n )\n );\n })(),\n\n // Google-specific error banners. Two distinct failure modes:\n // 1. Scope insufficient - user needs to re-authorize OAuth\n // 2. API not enabled in Cloud Console - user needs to click through to console\n error && GOOGLE_SHARED.includes(integrationName) && (() => {\n const errStr = String(error);\n const apiDisabledMatch = errStr.match(/Enable it by visiting (https:\\\\/\\\\/console\\\\.[^\\\\s\"]+)/);\n if (apiDisabledMatch) {\n return h('div', {className:'flex items-center justify-between gap-3 px-4 py-3 rounded-xl bg-error/10 border border-error/30 text-error flex-wrap'},\n h('div', {className:'flex items-start gap-2 text-[13px] flex-1 min-w-0'},\n h(Icon, {name:'cloud_off', size:18, className:'mt-0.5 flex-shrink-0'}),\n h('div', {className:'min-w-0'},\n h('div', {className:'font-bold mb-0.5'}, meta.label + ' API not enabled in your Google Cloud project'),\n h('div', {className:'text-[12px] text-on-surface-variant'},\n 'One-time setup: click the link to enable, wait ~30s, then retry.'\n )\n )\n ),\n h('a', {\n href: apiDisabledMatch[1], target:'_blank', rel:'noopener',\n className:'flex-shrink-0 text-[11px] font-bold uppercase tracking-widest bg-error text-on-error px-3 py-1.5 rounded-lg hover:opacity-90 inline-flex items-center gap-1'\n }, h(Icon, {name:'open_in_new', size:14}), 'Enable in Cloud Console')\n );\n }\n if (/insufficient.*scope|ACCESS_TOKEN_SCOPE_INSUFFICIENT|insufficient.*permission/i.test(errStr)) {\n return h('div', {className:'flex items-center justify-between gap-3 px-4 py-3 rounded-xl bg-tertiary/10 border border-tertiary/30 text-tertiary'},\n h('div', {className:'flex items-center gap-2 text-[13px]'},\n h(Icon, {name:'lock_open', size:18}),\n h('span', null, 'Your Google token doesn\\\\'t include the ' + meta.label + ' scope yet - re-authorize to grant it.')\n ),\n h('button', {\n onClick: () => { window.location.href = '/api/auth/google'; },\n className:'flex-shrink-0 text-[11px] font-bold uppercase tracking-widest bg-tertiary text-on-tertiary px-3 py-1.5 rounded-lg hover:opacity-90'\n }, 'Re-authorize Google')\n );\n }\n return null;\n })(),\n\n // Per-integration custom renderer (Gmail inbox, Drive grid, Calendar timeline, Sheets cards, Docs cards).\n // Falls back to generic DataDisplay for integrations without a custom renderer (Ahrefs, GSC, LinkedIn, Outlook, WordPress, YouTube, ProductHunt).\n (() => {\n const CustomRenderer = INTEGRATION_RENDERERS[integrationName];\n if (loading && activeEndpoint !== null) {\n return h(DataDisplay, {loading: true, integrationName});\n }\n if (error && !/insufficient.*scope|ACCESS_TOKEN_SCOPE_INSUFFICIENT|insufficient.*permission|has not been used in project/i.test(String(error))) {\n return h(DataDisplay, {error, integrationName, onFix: onGoToSettings});\n }\n // Success path: use custom renderer when available, otherwise generic table.\n if (CustomRenderer && data) return h(CustomRenderer, {data, endpoint: activeEndpoint});\n return h(DataDisplay, {\n data: normalizeData(integrationName, activeEndpoint, data),\n loading: false, error: null, integrationName, onFix: onGoToSettings\n });\n })(),\n\n integrationName === 'ga4' && ['kpi','traffic-over-time','user-acquisition'].includes(activeEndpoint) && error &&\n h('div', {className:'flex flex-col gap-2.5'},\n h('div', {className:'p-3 rounded-lg bg-error/5 border border-error/30 text-error text-[13px]'}, String(error)),\n h(Btn, {onClick: onGoToSettings, variant:'ghost', size:'sm'},\n h(Icon, {name:'settings', size:14}), 'Fix in Settings'\n )\n )\n );\n }\n\n\n // Real account menu — replaces the old hardcoded \"Director / Pro Account\" chip.\n // Fetches GET /api/auth/me on mount to show the actual signed-in user (name, email, tenant).\n // Clicking opens a dropdown with \"Log out\" and, ONLY for the platform master\n // (me.user.isPlatformAdmin or me.isPlatformAdmin), a \"Master Console\" item that routes to\n // the cross-tenant platform view via setActivePage('platform').\n function AccountMenu({setActivePage}) {\n const [me, setMe] = useState(null);\n const [open, setOpen] = useState(false);\n const [loggingOut, setLoggingOut] = useState(false);\n\n useEffect(() => {\n let alive = true;\n fetch('/api/auth/me', { headers: { 'Accept':'application/json' } })\n .then(r => r.ok ? r.json() : null)\n .then(d => { if (alive && d) setMe(d); })\n .catch(() => {});\n return () => { alive = false; };\n }, []);\n\n const user = (me && me.user) || {};\n const tenant = (me && me.tenant) || {};\n // The flag can live either on the user object or on the top-level /me response.\n const isPlatformAdmin = !!((user && user.isPlatformAdmin) || (me && me.isPlatformAdmin));\n const displayName = user.name || (user.email ? user.email.split('@')[0] : 'Account');\n const displayEmail = user.email || '';\n const tenantName = tenant.name || tenant.slug || '';\n const initial = (displayName || displayEmail || 'A').trim().charAt(0).toUpperCase();\n\n const logout = async () => {\n if (loggingOut) return;\n setLoggingOut(true);\n try { await fetch('/api/auth/logout', { method:'POST' }); } catch (e) {}\n window.location.reload();\n };\n\n const avatar = user.avatar_url\n ? h('img', {\n alt: displayName, src: user.avatar_url,\n className:'w-8 h-8 rounded-full border border-primary/30 object-cover flex-shrink-0'\n })\n : h('div', {\n className:'w-8 h-8 rounded-full border border-primary/30 bg-primary/15 text-primary flex items-center justify-center text-[13px] font-bold flex-shrink-0'\n }, initial);\n\n return h('div', {className:'relative'},\n h('button', {\n type:'button',\n onClick: () => setOpen(o => !o),\n title: displayEmail || 'Account',\n className:'w-full flex items-center gap-2.5 px-3 py-1.5 rounded-lg text-left hover:bg-surface-variant/20 transition-colors cursor-pointer'\n },\n avatar,\n h('div', {className:'flex flex-col min-w-0 flex-1'},\n h('span', {className:'text-[12px] font-bold text-on-surface leading-none truncate'}, displayName),\n h('span', {className:'text-[10px] text-text-muted mt-0.5 truncate'}, tenantName || displayEmail || 'Account')\n ),\n isPlatformAdmin && h('span', {\n title:'Platform master',\n className:'text-[8px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded bg-tertiary/15 text-tertiary border border-tertiary/30 flex-shrink-0'\n }, 'MASTER'),\n h(Icon, {name: open ? 'expand_less' : 'expand_more', size:16, className:'text-text-muted flex-shrink-0'})\n ),\n open && h(React.Fragment, null,\n h('div', {className:'fixed inset-0 z-[60]', onClick: () => setOpen(false)}),\n h('div', {className:'absolute bottom-full left-0 right-0 mb-2 z-[61] rounded-xl border border-border-subtle bg-surface-container shadow-xl overflow-hidden'},\n h('div', {className:'px-3.5 py-3 border-b border-border-subtle'},\n h('div', {className:'text-[12px] font-bold text-on-surface truncate'}, displayName),\n displayEmail && h('div', {className:'text-[10px] text-text-muted truncate mt-0.5'}, displayEmail),\n tenantName && h('div', {className:'text-[10px] text-text-muted truncate mt-0.5 flex items-center gap-1'},\n h(Icon, {name:'corporate_fare', size:11, className:'flex-shrink-0'}), tenantName)\n ),\n isPlatformAdmin && h('button', {\n type:'button',\n onClick: () => { setOpen(false); if (setActivePage) setActivePage('platform'); },\n className:'w-full text-left px-3.5 py-2.5 flex items-center gap-2.5 text-[12px] font-medium text-tertiary hover:bg-tertiary/10 transition-colors border-b border-border-subtle/50'\n },\n h(Icon, {name:'admin_panel_settings', size:16}),\n 'Master Console'\n ),\n h('button', {\n type:'button',\n onClick: logout,\n disabled: loggingOut,\n className:'w-full text-left px-3.5 py-2.5 flex items-center gap-2.5 text-[12px] font-medium text-on-surface-variant hover:bg-surface-variant/20 hover:text-on-surface transition-colors disabled:opacity-50'\n },\n loggingOut ? h(Spinner, {size:14}) : h(Icon, {name:'logout', size:16}),\n loggingOut ? 'Logging out…' : 'Log out'\n )\n )\n )\n );\n }\n\n\n function Sidebar({activePage, setActivePage, integrations, agents, onNewCampaign, hotLeads}) {\n // SINGLE global ticker for the whole app shell. Lives here because Sidebar mounts once with\n // the shell and never unmounts. Every 6s it dispatches the shared 'nexus:tick' window event;\n // any view that wants fast auto-refresh listens to 'nexus:tick' instead of its own setInterval.\n // Guarded by a window flag so even an accidental remount can never create a second ticker.\n useEffect(function () {\n if (window.__nexusTickStarted) return undefined;\n window.__nexusTickStarted = true;\n var t = setInterval(function () { window.dispatchEvent(new Event('nexus:tick')); }, 6000);\n return function () { clearInterval(t); window.__nexusTickStarted = false; };\n }, []);\n // QA fix: removed the always-on green \"connected\" dots next to Strategy/Signals - they\n // duplicated the per-integration status already shown inside each workspace page (the\n // \"blue dot\" the user flagged was this static indicator). Real signal-of-attention now\n // lives only in the IntelligenceBadge (Command) and hot-leads badge (Signals).\n // Layered IA — workflow order Plan → Run → Measure. Home pinned top, Settings pinned bottom.\n const homeItem = { id:'dashboard', icon:'space_dashboard', label:'Command Center' };\n // IA matches the product loop: Plan → Run (execute) → Measure. Workspace + Knowledge are\n // SEPARATE supporting areas (not part of Measure). Approvals = human-in-the-loop queue.\n const navGroups = [\n { title:'Plan', items: [\n { id:'objectives', icon:'flag', label:'Objectives' },\n { id:'experiments', icon:'science', label:'Experiments' },\n ]},\n { title:'Run', items: [\n { id:'marketing', icon:'insights', label:'Marketing' },\n { id:'sales', icon:'contact_mail', label:'Sales', badge: hotLeads && hotLeads > 0 ? hotLeads : null, badgeKind:'error' },\n { id:'campaigns', icon:'campaign', label:'Campaigns' },\n { id:'tasks', icon:'checklist', label:'Tasks' },\n { id:'agents', icon:'bolt', label:'Agents', badge: agents.length || null },\n { id:'approvals', icon:'task_alt', label:'Approvals' },\n ]},\n { title:'Measure', items: [\n { id:'calendar', icon:'calendar_month', label:'Calendar' },\n { id:'analytics', icon:'monitoring', label:'Analytics' },\n ]},\n { title:'Workspace', items: [\n { id:'workspace', icon:'diversity_3', label:'Workspace' },\n ]},\n { title:'Knowledge', items: [\n { id:'knowledge', icon:'hub', label:'Knowledge' },\n { id:'playbooks', icon:'menu_book', label:'Playbooks' },\n ]},\n ];\n const settingsItem = { id:'settings', icon:'settings', label:'Settings' };\n\n const navBtn = (item) => h('button', {\n key: item.id,\n // One-page app: nav switches the view IN PLACE (setActivePage) and the URL is kept in sync\n // by the shell (history.pushState on activePage change). Only 'external' items (the per-campaign\n // World) open in a new tab — the World is the sole new-tab destination.\n onClick: () => { if (item.external) { window.open(item.external, '_blank'); } else { setActivePage(item.id); } },\n className: 'flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-[13px] font-medium text-left ' +\n (activePage === item.id\n ? 'text-primary bg-primary-container/10 border-r-2 border-primary'\n : 'text-on-surface-variant hover:bg-surface-variant/20 hover:text-on-surface')\n },\n h(Icon, {name: item.icon, size: 20}),\n h('span', {className:'flex-1'}, item.label),\n item.id === 'dashboard' && h(IntelligenceBadge, {onClick: e => { e.stopPropagation(); setActivePage('dashboard'); }}),\n item.badge != null && h('span', {\n className: (item.badgeKind === 'error'\n ? 'bg-error/15 text-error border border-error/30 pulse-dot'\n : 'bg-primary text-on-primary') + ' text-[10px] font-bold px-1.5 py-0.5 rounded-full min-w-[20px] text-center'\n }, item.badge)\n );\n const sectionHeader = (title) => h('div', {\n className:'px-3 pt-3 pb-1 text-[10px] font-bold tracking-widest uppercase text-text-muted'\n }, title);\n\n return h('aside', {\n className:'flex flex-col h-screen py-gutter px-md gap-lg glass-panel border-r border-border-subtle shadow-2xl w-64 flex-shrink-0 z-50',\n style:{borderTop:0,borderBottom:0,borderRight:'1px solid rgba(255,255,255,0.08)'}\n },\n h('div', {className:'flex items-center gap-sm px-xs'},\n h('div', {className:'w-9 h-9 bg-primary rounded-lg flex items-center justify-center shadow-lg shadow-primary/30'},\n h(Icon, {name:'hub', size:22, className:'text-on-primary'})\n ),\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[16px] text-primary font-extrabold tracking-tight leading-none'}, 'Nexus AI'),\n h('span', {className:'text-[10px] text-text-muted font-semibold tracking-widest uppercase mt-0.5'}, 'Command Center')\n ),\n // Live indicator: pulsing green dot + \"Live\" — signals the global 6s nexus:tick is running.\n h('div', {\n className:'ml-auto flex items-center gap-1.5',\n title:'Live - data auto-refreshes every 6s'\n },\n h('span', {\n className:'pulse-dot w-2 h-2 rounded-full',\n style:{backgroundColor:'#22c55e', boxShadow:'0 0 6px #22c55e'}\n }),\n h('span', {className:'text-[10px] font-bold tracking-widest uppercase', style:{color:'#22c55e'}}, 'Live')\n )\n ),\n\n h('button', {\n onClick: onNewCampaign,\n className:'mx-xs bg-primary text-on-primary font-semibold py-2.5 px-md rounded-lg flex items-center justify-center gap-2 hover:opacity-90 transition-all active:scale-[0.98] text-[13px] shadow-lg shadow-primary/20'\n },\n h(Icon, {name:'add', size:18}), 'New Campaign'\n ),\n\n h('nav', {className:'flex-1 flex flex-col gap-0.5 overflow-y-auto'},\n navBtn(homeItem),\n navGroups.map(g => h(React.Fragment, {key: g.title}, sectionHeader(g.title), ...g.items.map(navBtn)))\n ),\n\n h('div', {className:'mt-auto flex flex-col gap-2 border-t border-border-subtle pt-md'},\n // Agent World — discoverable entry to the /world 3D view. Reuses navBtn's 'external'\n // path so it opens in a new tab (window.open('/world','_blank')) without switching the\n // in-place activePage. This is the sole new-tab destination in the bottom nav section.\n navBtn({ id:'world', icon:'deployed_code', label:'Agent World', external:'/world' }),\n navBtn(settingsItem),\n h('button', {\n onClick: () => {\n // Wire Support to open AI chat with a help-context question (real action).\n window.dispatchEvent(new CustomEvent('investigate-intelligence', {\n detail: { action_payload: { question: 'How do I use Nexus AI? Walk me through the workflow: start at the Command Center, then Plan (Objectives, Experiments, Calendar), Run (Campaigns, Agents, Marketing, Sales), and Measure (Analytics, Knowledge, Workspace). Also cover Settings and the Team Hub co-working tools.' } }\n }));\n },\n className:'flex items-center gap-3 px-3 py-1.5 rounded-lg text-on-surface-variant hover:bg-surface-variant/20 hover:text-on-surface transition-colors text-[13px] text-left'\n },\n h(Icon, {name:'help', size:18}), 'Support'\n ),\n h(AccountMenu, {setActivePage})\n )\n );\n }\n\n\n // Real notification center: polls pending approvals (action_queue status=prepared), shows a\n // live count badge, and a dropdown that deep-links into the Approvals inbox.\n function NotificationBell({setActivePage}) {\n const [open, setOpen] = useState(false);\n const [items, setItems] = useState([]);\n useEffect(() => {\n let alive = true;\n const load = () => fetch('/api/actions?status=prepared')\n .then(r => r.ok ? r.json() : [])\n .then(d => { if (alive) setItems(Array.isArray(d) ? d : ((d && d.actions) || [])); })\n .catch(() => {});\n load();\n // Fast auto-refresh: ride the shared global 6s 'nexus:tick' instead of a private 60s timer,\n // so the pending-approvals badge updates promptly. No second setInterval here.\n window.addEventListener('nexus:tick', load);\n return () => { alive = false; window.removeEventListener('nexus:tick', load); };\n }, []);\n const count = items.length;\n const go = () => { setOpen(false); setActivePage('approvals'); };\n return h('div', {className:'relative'},\n h('button', {\n onClick: () => setOpen(o => !o), type:'button',\n title: count ? (count + ' pending approval' + (count > 1 ? 's' : '')) : 'Notifications',\n className:'relative p-1 rounded transition-colors cursor-pointer ' + (count ? 'text-primary' : 'text-on-surface-variant hover:text-primary')\n },\n h(Icon, {name:'notifications', size:20}),\n count > 0 && h('span', {\n className:'absolute -top-0.5 -right-0.5 min-w-[16px] h-[16px] px-1 rounded-full bg-error text-white text-[10px] font-bold flex items-center justify-center'\n }, count > 9 ? '9+' : String(count))\n ),\n open && h(React.Fragment, null,\n h('div', {className:'fixed inset-0 z-[60]', onClick: () => setOpen(false)}),\n h('div', {className:'absolute right-0 mt-2 w-80 max-h-[420px] overflow-auto z-[61] rounded-xl border border-border-subtle bg-surface-container shadow-xl'},\n h('div', {className:'px-4 py-3 border-b border-border-subtle flex items-center justify-between sticky top-0 bg-surface-container'},\n h('span', {className:'text-[13px] font-semibold text-on-surface'}, 'Notifications'),\n h('span', {className:'text-[11px] text-text-muted'}, count + ' pending')\n ),\n count === 0\n ? h('div', {className:'px-4 py-6 text-[12px] text-text-muted text-center'}, 'No pending action items')\n : items.slice(0, 12).map(a => h('button', {\n key: a.id, type:'button', onClick: go,\n className:'w-full text-left px-4 py-2.5 border-b border-border-subtle/50 hover:bg-surface-container-high transition-colors flex items-start gap-2'\n },\n h(Icon, {name:'pending_actions', size:16, className:'text-secondary mt-0.5'}),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] text-on-surface truncate'}, a.title || ((a.integration || '') + ' · ' + (a.endpoint || ''))),\n h('div', {className:'text-[10px] text-text-muted truncate'}, (a.integration || 'action') + ' · awaiting approval')\n )\n )),\n h('button', {\n type:'button', onClick: go,\n className:'w-full px-4 py-2.5 text-[12px] font-medium text-primary hover:bg-surface-container-high transition-colors'\n }, 'View all in Approvals →')\n )\n )\n );\n }\n\n function TopNav({title, activePage, setActivePage, onChatToggle, chatOpen}) {\n const subNav = [\n { id:'dashboard', label:'Command' },\n { id:'campaigns', label:'Campaigns' },\n { id:'marketing', label:'Strategy' },\n ];\n // Global system search: no search index — Enter routes to the dashboard CommandCenter and\n // seeds its command box with the typed text (reuses the established window.__nexus seed channel\n // + a 'nexus:command-seed' event so an already-mounted CommandCenter picks it up immediately).\n const [q, setQ] = useState('');\n const runGlobalSearch = () => {\n const term = q.trim();\n if (!term) return;\n try { window.__nexus = window.__nexus || {}; window.__nexus.commandSeed = term; } catch (e) {}\n setActivePage('dashboard');\n window.dispatchEvent(new CustomEvent('nexus:command-seed', { detail: { q: term } }));\n setQ('');\n };\n return h('header', {\n className:'flex justify-between items-center w-full px-lg h-16 sticky top-0 z-40 bg-surface-core/80 border-b border-border-subtle backdrop-blur-md flex-shrink-0'\n },\n h('div', {className:'flex items-center gap-xl min-w-0'},\n h('h1', {className:'text-[22px] font-black text-on-surface tracking-tighter truncate'}, title || 'Nexus Command'),\n h('div', {className:'hidden lg:flex items-center gap-lg'},\n subNav.map(n => h('a', {\n key: n.id, href:'#',\n onClick: e => { e.preventDefault(); setActivePage(n.id); },\n className:'text-[11px] font-semibold uppercase tracking-widest transition-all ' +\n (activePage === n.id\n ? 'text-secondary border-b-2 border-secondary pb-1'\n : 'text-on-surface-variant hover:text-primary')\n }, n.label))\n )\n ),\n\n h('div', {className:'flex-1 max-w-md mx-xl hidden md:block'},\n h('div', {className:'relative group'},\n h('span', {\n className:'absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-outline pointer-events-none',\n style:{fontSize:'18px'}\n }, 'search'),\n h('input', {\n type:'text', placeholder:'Global system search...',\n value: q,\n onChange: e => setQ(e.target.value),\n onKeyDown: e => { if (e.key === 'Enter') { e.preventDefault(); runGlobalSearch(); } },\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg pl-10 pr-4 py-2 text-[13px] focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary transition-all placeholder:text-text-muted'\n })\n )\n ),\n\n h('div', {className:'flex items-center gap-md'},\n h('div', {className:'hidden sm:flex items-center gap-1 pr-md border-r border-border-subtle'},\n // Real notification center (pending approvals + count badge + dropdown).\n h(NotificationBell, {setActivePage}),\n // Bolt - jump to Automations / Agent Studio.\n h('button', {\n onClick: () => setActivePage('agents'), type:'button',\n title:'Agent Studio',\n className:'p-1 rounded transition-colors cursor-pointer text-on-surface-variant hover:text-primary'\n }, h(Icon, {name:'bolt', size:20})),\n h('button', {\n onClick: onChatToggle, type:'button',\n title: chatOpen ? 'Close AI Chat' : 'Open AI Chat',\n className:'p-1 rounded transition-colors cursor-pointer ' + (chatOpen?'text-secondary':'text-on-surface-variant hover:text-primary')\n }, h(Icon, {name:'smart_toy', size:20}))\n ),\n h('button', {\n onClick: onChatToggle,\n className:'bg-secondary text-on-secondary font-semibold px-4 py-2 rounded-lg hover:opacity-90 active:opacity-80 transition-all text-[13px] flex items-center gap-1.5'\n }, h(Icon, {name:'rocket_launch', size:16}), 'Deploy AI')\n )\n );\n }\n\n\n function PageHeader({title, subtitle, action=null}) {\n return h('div', {className:'flex justify-between items-end mb-xl flex-wrap gap-4'},\n h('div', null,\n h('h2', {className:'text-[28px] sm:text-[32px] font-extrabold text-text-high-contrast tracking-tight leading-tight'}, title),\n subtitle && h('p', {className:'text-text-medium-contrast text-[14px] mt-1 max-w-2xl'}, subtitle)\n ),\n action\n );\n }\n\n // Expose shared deps to the dynamically-imported pages + intelligence modules.\n // Page components read these via window.__nexus to avoid duplicating large config + components.\n window.__nexus = {\n INTEGRATIONS, INTEGRATION_META, INTEGRATION_ACTIONS, INTEGRATION_FIELDS, ALL_TOOLS, GOOGLE_SHARED,\n IntegrationPanel, PageHeader, parseTools,\n Icon, Spinner, BrandIcon, Btn, MetricCard, Input, Toggle, SectionHeader,\n FunnelFlowChart, PipelineVelocityChart, marked,\n };\n\n ` + getAppJS2();\n}\n",[367],"d78af2e6-5d9b-11f1-8267-1607ee4eb77e","frontend_intelligence.ts","d79afa52-580e-11f1-9308-ee650bb23af1",756,["D",1780305934253],"// Phase 1 Advanced: Unified Intelligence Layer frontend components.\n// UnifiedFunnelView + IntelligenceFeed + IntelligenceBadge + OutreachDrawer.\n// Served at /api/app-intelligence so frontend_pages.ts stays under val.town's 80K limit.\n//\n// Shared deps come from window.__nexus (set by frontend_js.ts).\n\nexport function getIntelligenceJS(): string {\n return `\nimport React, { useState, useEffect, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// B4: Auto-Sync Interval - read from window.__nexus.autoSyncMs (set on boot from /api/config\n// and updated when Settings page saves a new interval). Components subscribe via\n// useAutoSyncMs() so changes take effect without a reload.\nfunction useAutoSyncMs(defaultMs) {\n const [ms, setMs] = useState(() => (window.__nexus && window.__nexus.autoSyncMs) || defaultMs);\n useEffect(() => {\n const handler = (e) => setMs((e?.detail?.ms) || (window.__nexus && window.__nexus.autoSyncMs) || defaultMs);\n window.addEventListener('nexus:auto-sync-change', handler);\n return () => window.removeEventListener('nexus:auto-sync-change', handler);\n }, [defaultMs]);\n return ms;\n}\n\nconst STAGE_COLORS = {\n TOFU: {bg:'#c0c1ff', border:'#c0c1ff', text:'text-primary', label:'Awareness & Reach'},\n MOFU: {bg:'#d0bcff', border:'#d0bcff', text:'text-tertiary', label:'Engagement & Consideration'},\n BOFU: {bg:'#4edea3', border:'#4edea3', text:'text-secondary', label:'Conversion & Revenue'},\n};\nconst healthColor = (s) => s > 75 ? 'text-secondary' : s >= 50 ? 'text-tertiary' : 'text-error';\nconst healthDot = (s) => s > 75 ? 'bg-secondary' : s >= 50 ? 'bg-tertiary' : 'bg-error';\nconst fmtMetric = (v, unit) => {\n if (typeof v !== 'number') return '-';\n const n = Math.abs(v);\n if (n >= 1e6) return (v/1e6).toFixed(1)+'M' + (unit?' '+unit:'');\n if (n >= 1e3) return (v/1e3).toFixed(1)+'k' + (unit?' '+unit:'');\n if (Number.isInteger(v)) return v + (unit?' '+unit:'');\n return v.toFixed(1) + (unit?' '+unit:'');\n};\n\n// --- UnifiedFunnelView ------------------------------------------------------\n// 3-column TOFU/MOFU/BOFU panel with health scores, integration chips, bottleneck + signal flow.\nexport function UnifiedFunnelView({setActivePage}) {\n const {Icon, FunnelFlowChart} = N();\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [days, setDays] = useState(30);\n\n const load = useCallback(async (force = false, daysOverride) => {\n setLoading(true);\n const d_ = daysOverride !== undefined ? daysOverride : days;\n try {\n const params = new URLSearchParams({ days: String(d_) });\n if (force) params.set('force', '1');\n const r = await fetch('/api/intelligence/funnel-summary?' + params.toString());\n const d = await r.json();\n setData(d); setError(null);\n } catch (e) { setError(e.message); }\n finally { setLoading(false); }\n }, [days]);\n const autoMs = useAutoSyncMs(60000);\n useEffect(() => {\n load();\n const onTick = () => load(false);\n const iv = setInterval(onTick, autoMs);\n window.addEventListener('nexus:tick', onTick);\n return () => { clearInterval(iv); window.removeEventListener('nexus:tick', onTick); };\n }, [load, autoMs]);\n\n return h('div', {className:'glass-panel rounded-xl overflow-hidden'},\n // Header\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-center flex-wrap gap-2'},\n h('div', {className:'flex items-center gap-3'},\n h(Icon, {name:'insights', size:22, filled:true, className:'text-primary'}),\n h('h3', {className:'text-[18px] font-bold tracking-tight'}, 'Acquisition Intelligence'),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest bg-primary/10 text-primary px-2 py-0.5 rounded border border-primary/20'},\n data ? data.total_integrations_connected + ' SOURCES' : 'LOADING'\n )\n ),\n // A1: overall_health weighted composite (TOFU 0.25 - MOFU 0.40 - BOFU 0.35) shown top-right\n h('div', {className:'flex items-center gap-3'},\n data && typeof data.overall_health === 'number' && h('div', {className:'flex items-center gap-2 px-3 py-1.5 rounded-lg border border-border-subtle bg-surface-container-lowest', title:'TOFU 0.25 - MOFU 0.40 - BOFU 0.35 weighted composite'},\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Overall'),\n h('span', {className:'text-[16px] font-extrabold ' + healthColor(data.overall_health), style:{fontVariantNumeric:'tabular-nums'}}, data.overall_health + '%')\n ),\n // QA fix: dropped the \"Raw JSON\" open-in-new link - it sat next to Refresh and\n // confused users. Devs can still hit /api/intelligence/funnel-summary directly.\n h('div', {className:'flex gap-2 items-center'},\n h('div', {className:'flex bg-surface-container-lowest rounded-lg p-0.5 border border-border-subtle'},\n [7, 30, 90].map(d => h('button', {\n key: d, onClick: () => { setDays(d); load(false, d); },\n className: 'px-2.5 py-0.5 rounded-md text-[11px] font-bold uppercase tracking-wider transition-all ' +\n (days === d ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface-variant')\n }, d + 'd'))\n ),\n h('button', {\n onClick: () => load(true),\n className:'p-2 rounded-lg bg-surface-container-high text-on-surface-variant hover:text-on-surface transition-colors',\n title:'Refresh'\n }, h(Icon, {name: loading ? 'sync' : 'refresh', size:18, className: loading?'spin':''}))\n )\n )\n ),\n\n // Loading skeleton\n loading && !data && h('div', {className:'p-lg'},\n h('div', {className:'grid grid-cols-1 md:grid-cols-3 gap-md'},\n [0,1,2].map(i => h('div', {key:i, className:'h-48 rounded-lg', style:{background:'linear-gradient(90deg,#1c1b1e 25%,#2a2a2d 50%,#1c1b1e 75%)', backgroundSize:'200% 100%', animation:'shimmer 1.5s infinite'}}))\n )\n ),\n\n error && h('div', {className:'p-lg text-error text-[13px]'}, 'Intelligence layer unavailable: ' + error),\n\n // Stages\n data && h('div', {className:'p-lg'},\n h('div', {className:'grid grid-cols-1 md:grid-cols-3 gap-md mb-md'},\n data.stages.map(s => {\n const c = STAGE_COLORS[s.stage];\n const isBottleneck = data.bottleneck?.stage === s.stage;\n return h('div', {key: s.stage,\n className:'p-md rounded-lg border ' + (isBottleneck ? 'border-tertiary/40 bg-tertiary/5' : 'border-border-subtle bg-surface-container-lowest')\n },\n h('div', {className:'flex items-center justify-between mb-2'},\n h('div', null,\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest ' + c.text}, s.stage),\n h('div', {className:'text-[10px] text-text-muted mt-0.5'}, c.label)\n ),\n isBottleneck && h('span', {className:'inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-widest bg-tertiary/10 text-tertiary px-1.5 py-0.5 rounded'},\n h(Icon,{name:'warning', size:10}), 'BOTTLENECK'\n )\n ),\n // Metric chips\n h('div', {className:'space-y-1.5 mb-3 min-h-[120px]'},\n s.metrics.length === 0\n ? h('div', {className:'text-[11px] text-text-muted italic py-4 text-center'},\n 'No data - ', h('button', {onClick: () => setActivePage('settings'), className:'text-primary hover:underline'}, 'connect integration'), ' to populate.'\n )\n : s.metrics.slice(0, 5).map(m => {\n // A2: TOFU uses 30d delta (SEO/branding compound slowly); MOFU/BOFU use 7d.\n const useThirtyDay = s.stage === 'TOFU';\n const delta = useThirtyDay\n ? (m.delta_30d ?? m.delta_7d ?? m.delta_pct)\n : (m.delta_7d ?? m.delta_pct);\n const deltaLabel = useThirtyDay && m.delta_30d != null ? '30d' : m.delta_7d != null ? '7d' : '';\n const up = delta != null && delta > 0;\n return h('div', {key: m.integration+'_'+m.metric, className:'flex items-center justify-between text-[12px]'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className:'text-[10px] uppercase tracking-wider text-text-muted font-mono-data flex-shrink-0'}, m.integration),\n h('span', {className:'text-on-surface-variant truncate'}, m.metric.replace(/_/g,' '))\n ),\n h('div', {className:'flex items-center gap-1.5 flex-shrink-0'},\n h('span', {className:'font-mono-data text-on-surface font-bold', style:{fontVariantNumeric:'tabular-nums'}}, fmtMetric(m.value, m.unit)),\n delta != null && h('span', {\n className:'text-[10px] font-bold ' + (up ? 'text-secondary' : 'text-error'),\n title: deltaLabel ? ('vs ' + deltaLabel + ' ago') : 'vs baseline'\n }, (up?'-':'-') + Math.abs(delta).toFixed(0) + '%' + (deltaLabel ? ' ' + deltaLabel : ''))\n )\n );\n })\n ),\n // Health bar\n h('div', {className:'pt-2 border-t border-border-subtle'},\n h('div', {className:'flex justify-between items-center mb-1'},\n h('span', {className:'text-[10px] uppercase tracking-widest text-text-muted'}, 'Stage Health'),\n h('span', {className:'text-[13px] font-extrabold ' + healthColor(s.health_score), style:{fontVariantNumeric:'tabular-nums'}}, s.health_score + '%')\n ),\n h('div', {className:'h-1.5 w-full bg-surface-container rounded-full overflow-hidden'},\n h('div', {className:'h-full transition-all', style:{width: s.health_score + '%', background: c.bg}})\n ),\n h('p', {className:'text-[10px] text-text-muted mt-1.5'}, s.diagnosis)\n )\n );\n })\n ),\n\n // Funnel flow chart\n FunnelFlowChart && data.stages.some(s => s.metrics.length > 0) &&\n h('div', {className:'mt-md p-md bg-surface-container-lowest rounded-lg border border-border-subtle'},\n h(FunnelFlowChart, {stages: data.stages})\n ),\n\n // Signal Flow strip\n data.bottleneck && h('div', {className:'mt-md p-3 rounded-lg bg-surface-container/40 border border-border-subtle flex items-center gap-3 flex-wrap'},\n h(Icon, {name:'route', size:16, className:'text-primary flex-shrink-0'}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'SIGNAL FLOW'),\n h('div', {className:'flex items-center gap-1 text-[12px] flex-wrap font-mono-data'},\n ['TOFU','MOFU','BOFU'].map((stage, i) => h(React.Fragment, {key:stage},\n h('span', {className: data.bottleneck.stage === stage ? 'text-tertiary font-bold' : 'text-on-surface-variant'}, stage),\n i < 2 && h('span', {className:'text-text-muted mx-1'}, '-')\n )),\n h('span', {className:'ml-2 text-text-muted'}, '- top bottleneck: '),\n h('span', {className:'text-tertiary font-bold'}, data.bottleneck.stage + ' - ' + data.bottleneck.reason.split('.')[0])\n )\n )\n )\n );\n}\n\n// --- IntelligenceFeed -------------------------------------------------------\n// Vertical card stack with colored left borders, metric chips, Investigate CTA.\nconst CARD_STYLE = {\n win: {border:'border-l-secondary', text:'text-secondary', bg:'bg-secondary/5', icon:'trending_up'},\n risk: {border:'border-l-error', text:'text-error', bg:'bg-error/5', icon:'warning'},\n opportunity: {border:'border-l-tertiary', text:'text-tertiary', bg:'bg-tertiary/5', icon:'lightbulb'},\n correlation: {border:'border-l-primary', text:'text-primary', bg:'bg-primary/5', icon:'link'},\n anomaly: {border:'border-l-tertiary', text:'text-tertiary', bg:'bg-tertiary/5', icon:'show_chart'},\n};\nconst PRIORITY_BADGE = {critical:'bg-error/15 text-error border-error/30', high:'bg-tertiary/15 text-tertiary border-tertiary/30', medium:'bg-primary/15 text-primary border-primary/30'};\n\nexport function IntelligenceFeed({onInvestigate}) {\n const {Icon, Spinner} = N();\n const [cards, setCards] = useState([]);\n const [loading, setLoading] = useState(true);\n\n const load = useCallback(async () => {\n setLoading(true);\n try {\n const r = await fetch('/api/intelligence/feed');\n const d = await r.json();\n setCards(Array.isArray(d) ? d : []);\n } catch {} finally { setLoading(false); }\n }, []);\n const autoMs = useAutoSyncMs(60000);\n useEffect(() => {\n load();\n const iv = setInterval(load, autoMs);\n window.addEventListener('nexus:tick', load);\n return () => { clearInterval(iv); window.removeEventListener('nexus:tick', load); };\n }, [load, autoMs]);\n\n return h('div', {className:'glass-panel rounded-xl flex flex-col h-[480px]'},\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-center'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'auto_awesome', size:20, filled:true, className:'text-primary'}),\n h('h3', {className:'text-[18px] font-bold tracking-tight'}, 'Intelligence Feed'),\n ),\n h('span', {className:'inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-secondary/10 text-secondary border border-secondary/20 pulse-dot'}, 'LIVE')\n ),\n h('div', {className:'flex-1 overflow-y-auto p-md space-y-md'},\n loading && cards.length === 0 && h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:20})),\n cards.map((c, i) => {\n const style = CARD_STYLE[c.type] || CARD_STYLE.correlation;\n return h('div', {\n key: i,\n className:'p-md rounded-lg border-l-2 ' + style.border + ' ' + style.bg + ' bg-surface-container-lowest border-t border-r border-b border-border-subtle'\n },\n h('div', {className:'flex items-start justify-between gap-2 mb-1.5'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h(Icon, {name: style.icon, size:16, className: style.text + ' flex-shrink-0'}),\n h('h4', {className:'text-[13px] font-bold text-on-surface truncate'}, c.title)\n ),\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border flex-shrink-0 ' + (PRIORITY_BADGE[c.priority]||PRIORITY_BADGE.medium)}, c.priority)\n ),\n h('p', {className:'text-[12px] text-on-surface-variant leading-relaxed mb-2'}, c.body),\n c.metrics?.length > 0 && h('div', {className:'flex flex-wrap gap-1 mb-2'},\n c.metrics.map((m, j) => h('span', {key: j, className:'px-1.5 py-0.5 text-[10px] font-mono-data text-text-muted bg-surface-container-high rounded'}, m))\n ),\n h('div', {className:'flex items-center justify-between pt-2 border-t border-border-subtle/50'},\n h('div', {className:'flex items-center gap-2 text-[10px] text-text-muted'},\n h('span', null, c.agent_name),\n h('span', null, '-'),\n c.funnel_stages?.length > 0 && h('span', {className:'font-mono-data'},\n c.funnel_stages.join(' - ')\n )\n ),\n h('button', {\n onClick: () => onInvestigate && onInvestigate(c),\n className:'text-[10px] font-bold uppercase tracking-widest ' + style.text + ' hover:underline'\n }, c.action_label || 'Investigate -')\n )\n );\n })\n )\n );\n}\n\n// --- IntelligenceBadge (Sidebar nav) ----------------------------------------\nexport function IntelligenceBadge({onClick}) {\n const [count, setCount] = useState(0);\n const [critical, setCritical] = useState(false);\n useEffect(() => {\n let mounted = true;\n const load = async () => {\n try {\n const [c, f] = await Promise.all([\n fetch('/api/intelligence/correlations').then(r => r.json()).catch(() => []),\n fetch('/api/intelligence/feed').then(r => r.json()).catch(() => []),\n ]);\n if (!mounted) return;\n setCount(Array.isArray(c) ? c.length : 0);\n setCritical(Array.isArray(f) && f.some(x => x.priority === 'critical'));\n } catch {}\n };\n load();\n const ms = (window.__nexus && window.__nexus.autoSyncMs) || 60000;\n const iv = setInterval(load, ms);\n const onChange = (e) => { clearInterval(iv); };\n window.addEventListener('nexus:auto-sync-change', onChange);\n window.addEventListener('nexus:tick', load);\n return () => { mounted = false; clearInterval(iv); window.removeEventListener('nexus:auto-sync-change', onChange); window.removeEventListener('nexus:tick', load); };\n }, []);\n if (count === 0) return null;\n return h('span', {\n onClick,\n className:'inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-widest cursor-pointer ' +\n (critical ? 'bg-error/15 text-error border border-error/30 pulse-dot' : 'bg-primary/15 text-primary border border-primary/30'),\n title: count + ' signal' + (count===1?'':'s') + (critical ? ' - critical priority' : '')\n }, count, h('span', {className:'opacity-70'}, 'sig'));\n}\n\n// --- OutreachDrawer (Signals slide-out) -------------------------------------\n// Pre-populated with LLM-drafted outreach using current Signals context.\n// Send Now / Schedule Delivery now make REAL POST calls to Gmail send + Calendar invite.\nexport function OutreachDrawer({open, onClose, prospect, onSend}) {\n const {Icon, Spinner, Btn} = N();\n const [sending, setSending] = useState({linkedin:false, email:false});\n\n // Real send via Gmail API. Returns parsed response so the caller can toast success/failure.\n async function sendEmailNow({to, subject, body}) {\n if (!to || !subject) throw new Error('Recipient + subject required');\n const r = await fetch('/api/integrations/gmail/data?endpoint=send', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({to, subject, body})\n });\n const d = await r.json();\n if (!r.ok) throw new Error(d?.error?.message || d?.error || ('HTTP ' + r.status));\n return d;\n }\n // Real LinkedIn-via-Outlook fallback: most LinkedIn write APIs require Marketing Developer\n // approval. We save the draft to Gmail Drafts as a fallback so the user has a real artifact.\n async function saveLinkedInAsDraft(content) {\n const r = await fetch('/api/integrations/gmail/data?endpoint=createDraft', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n to: prospect?.email || '',\n subject: '[LinkedIn InMail Draft] ' + (prospect?.name || prospect?.company || 'Outreach'),\n body: content\n })\n });\n const d = await r.json();\n if (!r.ok) throw new Error(d?.error?.message || d?.error || ('HTTP ' + r.status));\n return d;\n }\n const [linkedInDraft, setLinkedInDraft] = useState('');\n const [emailDraft, setEmailDraft] = useState({subject:'', body:''});\n const [loading, setLoading] = useState(false);\n\n const generateDrafts = useCallback(async () => {\n if (!prospect) return;\n setLoading(true);\n const ctx = prospect.name + (prospect.company ? ' at ' + prospect.company : '') +\n '. Signal: ' + (prospect.signal || 'recent inbound') + '. Subject/role context: ' + (prospect.role || '');\n try {\n const r1 = await fetch('/api/chat', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n message: 'Draft a SHORT (under 80 words) personalized LinkedIn InMail for: ' + ctx + '. No greeting fluff. End with a one-line ask.',\n workspace: 'sales'\n })\n });\n const d1 = await r1.json();\n setLinkedInDraft(d1.response || '');\n const r2 = await fetch('/api/chat', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n message: 'Draft a sales email for: ' + ctx + '. Return JSON {\"subject\":\"...\",\"body\":\"...\"} only. Body under 120 words.',\n workspace: 'sales'\n })\n });\n const d2 = await r2.json();\n try {\n const parsed = JSON.parse((d2.response || '').replace(/^[^{]*/, '').replace(/[^}]*$/, ''));\n if (parsed.subject) setEmailDraft(parsed);\n } catch {\n setEmailDraft({subject:'Quick thought on ' + (prospect.company || prospect.name), body: d2.response || ''});\n }\n } catch {} finally { setLoading(false); }\n }, [prospect]);\n\n useEffect(() => { if (open && prospect) generateDrafts(); }, [open, prospect, generateDrafts]);\n\n if (!open) return null;\n return h(React.Fragment, null,\n h('div', {className:'fixed inset-0 bg-black/50 backdrop-blur-sm z-[55]', onClick: onClose}),\n h('div', {className:'fixed top-0 right-0 h-screen w-full sm:w-[420px] glass-panel shadow-2xl z-[60] flex flex-col drawer-in'},\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-center bg-surface-container-high/20'},\n h('div', {className:'flex items-center gap-3 min-w-0'},\n h(Icon, {name:'outgoing_mail', size:20, className:'text-secondary'}),\n h('div', {className:'min-w-0'},\n h('h3', {className:'text-[16px] font-bold truncate'}, 'Outreach Drafts'),\n prospect && h('p', {className:'text-[11px] text-text-muted truncate'}, prospect.name + (prospect.company ? ' - ' + prospect.company : ''))\n )\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface p-1'}, h(Icon,{name:'close', size:20}))\n ),\n h('div', {className:'flex-1 overflow-y-auto p-lg space-y-lg'},\n loading\n ? h('div', {className:'flex flex-col items-center justify-center py-12 gap-3 text-text-muted text-[12px]'},\n h(Spinner, {size:24}),\n 'Drafting personalized outreach-'\n )\n : h(React.Fragment, null,\n // LinkedIn draft\n h('div', {className:'space-y-3'},\n h('div', {className:'flex items-center justify-between'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'diversity_3', size:16, className:'text-primary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-on-surface'}, 'LinkedIn InMail')\n ),\n h('span', {className:'text-[9px] bg-secondary/10 text-secondary border border-secondary/20 px-2 py-0.5 rounded uppercase font-bold'}, 'AI Drafted')\n ),\n h('textarea', {\n value: linkedInDraft, onChange: e => setLinkedInDraft(e.target.value), rows: 6,\n className:'w-full p-3 bg-surface-container-lowest border border-border-subtle rounded-lg text-[12px] text-on-surface-variant leading-relaxed resize-none outline-none focus:border-primary/40 transition-all',\n style:{fontFamily:'inherit'}\n }),\n h('div', {className:'flex gap-2'},\n h(Btn, {onClick: async () => {\n setSending(s => ({...s, linkedin: true}));\n try {\n // LinkedIn write requires Marketing Developer approval - fall back to saving\n // a Gmail draft labeled \"[LinkedIn InMail Draft]\" so the user has a real artifact.\n await saveLinkedInAsDraft(linkedInDraft);\n onSend && onSend({type:'linkedin', content: linkedInDraft, status:'saved_as_draft'});\n } catch (e) {\n onSend && onSend({type:'error', error: 'LinkedIn draft save failed: ' + e.message});\n } finally { setSending(s => ({...s, linkedin: false})); }\n }, variant:'secondary', size:'sm', className:'flex-1', disabled: sending.linkedin},\n sending.linkedin ? h(Spinner,{size:13}) : h(Icon, {name:'drafts', size:14}),\n sending.linkedin ? 'Saving-' : 'Save as Draft'\n ),\n h(Btn, {onClick: generateDrafts, variant:'ghost', size:'sm'},\n h(Icon, {name:'refresh', size:14}), 'Redraft'\n )\n )\n ),\n // Email draft\n h('div', {className:'space-y-3 pt-4 border-t border-border-subtle'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'mail', size:16, className:'text-primary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-on-surface'}, 'Strategic Email')\n ),\n h('input', {\n value: emailDraft.subject, onChange: e => setEmailDraft({...emailDraft, subject: e.target.value}),\n placeholder:'Subject',\n className:'w-full p-2.5 bg-surface-container-lowest border border-border-subtle rounded-lg text-[13px] font-bold text-on-surface outline-none focus:border-primary/40 transition-all'\n }),\n h('textarea', {\n value: emailDraft.body, onChange: e => setEmailDraft({...emailDraft, body: e.target.value}), rows: 8,\n className:'w-full p-3 bg-surface-container-lowest border border-border-subtle rounded-lg text-[12px] text-on-surface-variant leading-relaxed resize-none outline-none focus:border-primary/40 transition-all',\n style:{fontFamily:'inherit'}\n }),\n h('div', {className:'flex gap-2'},\n h(Btn, {onClick: async () => {\n setSending(s => ({...s, email: true}));\n try {\n const to = prospect?.email || '';\n if (!to) throw new Error('No recipient - prospect email missing');\n const r = await sendEmailNow({to, subject: emailDraft.subject, body: emailDraft.body});\n onSend && onSend({type:'email_sent', ...emailDraft, response: r});\n } catch (e) {\n onSend && onSend({type:'error', error: 'Send failed: ' + e.message});\n } finally { setSending(s => ({...s, email: false})); }\n }, variant:'primary', size:'sm', className:'flex-1', disabled: sending.email},\n sending.email ? h(Spinner,{size:13}) : h(Icon, {name:'send', size:14}),\n sending.email ? 'Sending-' : 'Send Now'\n ),\n h(Btn, {onClick: async () => {\n // \"Schedule Delivery\" = save as Gmail draft (real persistence) - user can\n // open Gmail and add a send-later schedule from there.\n try {\n await fetch('/api/integrations/gmail/data?endpoint=createDraft', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({to: prospect?.email || '', subject: emailDraft.subject, body: emailDraft.body})\n });\n onSend && onSend({type:'email_drafted', ...emailDraft});\n } catch (e) { onSend && onSend({type:'error', error: e.message}); }\n }, variant:'ghost', size:'sm'},\n h(Icon, {name:'schedule_send', size:14}), 'Draft'\n )\n )\n )\n )\n ),\n h('div', {className:'p-lg border-t border-border-subtle bg-surface-container-high/20'},\n // B3: Approve All Drafts - actually send the email (Gmail) AND save the LinkedIn\n // copy as a Gmail draft labeled \"[LinkedIn InMail Draft]\". onSend() reports outcome\n // per channel so the parent can toast accurately.\n h(Btn, {onClick: async () => {\n setSending(s => ({...s, email: true, linkedin: true}));\n const results = {email: null, linkedin: null};\n const to = prospect?.email || '';\n try {\n if (!to) throw new Error('No recipient - prospect email missing');\n const r = await sendEmailNow({to, subject: emailDraft.subject, body: emailDraft.body});\n results.email = {ok: true, response: r};\n onSend && onSend({type:'email_sent', ...emailDraft, response: r});\n } catch (e) {\n results.email = {ok: false, error: e.message};\n onSend && onSend({type:'error', error: 'Email send failed: ' + e.message});\n }\n try {\n await saveLinkedInAsDraft(linkedInDraft);\n results.linkedin = {ok: true};\n onSend && onSend({type:'linkedin', content: linkedInDraft, status:'saved_as_draft'});\n } catch (e) {\n results.linkedin = {ok: false, error: e.message};\n onSend && onSend({type:'error', error: 'LinkedIn draft failed: ' + e.message});\n }\n setSending(s => ({...s, email: false, linkedin: false}));\n onSend && onSend({type:'all_approved', results});\n if (results.email?.ok && results.linkedin?.ok) onClose();\n }, variant:'primary', size:'md', className:'w-full', disabled: sending.email || sending.linkedin},\n (sending.email || sending.linkedin) ? h(Spinner, {size:14}) : h(Icon, {name:'rocket_launch', size:15}),\n (sending.email || sending.linkedin) ? 'Approving-' : 'APPROVE ALL DRAFTS'\n )\n )\n )\n );\n}\n `;\n}\n",[375],"d39810d4-5e7b-11f1-bae0-1607ee4eb77e","frontend_experiments.ts","a3f42ce6-589f-11f1-b75f-ee650bb23af1",933,["D",1780402134889],"// ExperimentBoard + ExperimentDrawer — ICE-scored growth experiments Kanban.\n// Served at /api/app-experiments and dynamically imported by frontend_js.ts.\n//\n// Backend endpoints consumed:\n// GET /api/experiments (filters: status, funnel_stage, aarrr_lever)\n// POST /api/experiments (create)\n// PUT /api/experiments/:id (update)\n// DELETE /api/experiments/:id\n// GET /api/experiments/stats\n// POST /api/experiments/ice-suggest ({title, hypothesis, ...})\n// POST /api/experiments/:id/run ({baseline_value})\n// POST /api/experiments/:id/complete ({result_value, outcome, learnings})\n// GET /api/okrs (objective_id dropdown source)\n//\n// Shared deps come from window.__nexus (set by frontend_js.ts):\n// Icon, Btn, Input, Spinner, PageHeader, SectionHeader, MetricCard.\n\nexport function getExperimentsJS(): string {\n return `\nimport React, { useState, useEffect, useCallback, useRef } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\nconst STATUSES = ['idea', 'queued', 'running', 'completed', 'cancelled'];\nconst STATUS_META = {\n idea: {label:'IDEA', accent:'text-text-muted', dot:'bg-text-muted'},\n queued: {label:'QUEUED', accent:'text-primary', dot:'bg-primary'},\n running: {label:'RUNNING', accent:'text-tertiary', dot:'bg-tertiary pulse-dot'},\n completed: {label:'COMPLETED', accent:'text-secondary', dot:'bg-secondary'},\n cancelled: {label:'CANCELLED', accent:'text-error', dot:'bg-error'},\n};\nconst STAGE_COLORS = {\n TOFU: {chip:'bg-primary/15 text-primary border-primary/30', label:'TOFU'},\n MOFU: {chip:'bg-tertiary/15 text-tertiary border-tertiary/30', label:'MOFU'},\n BOFU: {chip:'bg-secondary/15 text-secondary border-secondary/30', label:'BOFU'},\n};\nconst LEVERS = ['acquisition','activation','retention','referral','revenue'];\nconst CHANNELS = ['email','seo','linkedin','content','ads','product'];\nconst OUTCOMES = ['win','loss','inconclusive'];\n\nconst iceScore = (i, c, e) => {\n const ii = Number(i) || 0, cc = Number(c) || 0, ee = Number(e) || 0;\n // ICE: average of three 1-10 dimensions, rounded to 1 decimal.\n return Math.round(((ii + cc + ee) / 3) * 10) / 10;\n};\nconst iceBadgeCls = (s) =>\n s >= 7 ? 'bg-secondary/15 text-secondary border-secondary/30'\n : s >= 4 ? 'bg-tertiary/15 text-tertiary border-tertiary/30'\n : 'bg-error/15 text-error border-error/30';\n\nconst initial = (name) => (name && String(name).trim()[0] ? String(name).trim()[0].toUpperCase() : '?');\nconst fmtDate = (d) => d ? new Date(d).toLocaleDateString(undefined, {month:'short', day:'numeric'}) : '—';\nconst fmtPct = (v) => (typeof v === 'number') ? ((v >= 0 ? '+' : '') + v.toFixed(1) + '%') : '—';\n\n// ─── ExperimentCard ─────────────────────────────────────────────────────────\nfunction ExperimentCard({exp, onClick, onDragStart}) {\n const {Icon} = N();\n const score = exp.ice_score != null ? exp.ice_score : iceScore(exp.impact, exp.confidence, exp.ease);\n const stage = STAGE_COLORS[exp.funnel_stage] || STAGE_COLORS.TOFU;\n return h('div', {\n draggable: true,\n onDragStart: (e) => onDragStart(e, exp),\n onClick: () => onClick(exp),\n className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-md cursor-pointer hover:border-primary/40 transition-all space-y-2 group'\n },\n h('div', {className:'flex items-start justify-between gap-2'},\n h('h4', {className:'text-[13px] font-bold text-on-surface leading-tight truncate flex-1', title: exp.title}, exp.title || 'Untitled'),\n h('span', {\n className:'flex-shrink-0 inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[11px] font-extrabold font-mono-data ' + iceBadgeCls(score),\n style:{fontVariantNumeric:'tabular-nums'},\n title:'ICE = (Impact + Confidence + Ease) / 3'\n }, 'ICE ', score.toFixed(1))\n ),\n exp.hypothesis && h('p', {\n className:'text-[12px] text-text-muted leading-snug',\n style:{display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden'}\n }, exp.hypothesis),\n // ICE mini-bars\n h('div', {className:'space-y-1'},\n [['I', exp.impact], ['C', exp.confidence], ['E', exp.ease]].map(([letter, v]) => {\n const val = Number(v) || 0;\n const pct = Math.max(0, Math.min(100, val * 10));\n return h('div', {key: letter, className:'flex items-center gap-1.5'},\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted w-3'}, letter),\n h('div', {className:'flex-1 bg-surface-container h-1 rounded-full overflow-hidden'},\n h('div', {className:'h-full bg-primary transition-all', style:{width: pct + '%'}})\n ),\n h('span', {className:'text-[10px] font-mono-data text-on-surface-variant w-4 text-right', style:{fontVariantNumeric:'tabular-nums'}}, val)\n );\n })\n ),\n // Bottom chips\n h('div', {className:'flex items-center justify-between gap-2 pt-1 border-t border-border-subtle/60'},\n h('div', {className:'flex items-center gap-1 min-w-0 flex-wrap'},\n exp.funnel_stage && h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-widest border ' + stage.chip}, stage.label),\n exp.aarrr_lever && h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-container text-on-surface-variant border border-border-subtle'}, exp.aarrr_lever)\n ),\n exp.owner && h('span', {\n className:'flex-shrink-0 w-5 h-5 rounded-full bg-primary/20 text-primary text-[10px] font-bold flex items-center justify-center border border-primary/30',\n title: exp.owner\n }, initial(exp.owner))\n ),\n // Outcome strip (only for completed)\n exp.status === 'completed' && exp.outcome && h('div', {className:'flex items-center justify-between text-[10px] pt-1'},\n h('span', {\n className:'font-bold uppercase tracking-widest ' +\n (exp.outcome === 'win' ? 'text-secondary' : exp.outcome === 'loss' ? 'text-error' : 'text-tertiary')\n }, exp.outcome),\n typeof exp.uplift_pct === 'number' && h('span', {\n className:'font-mono-data font-bold ' + (exp.uplift_pct >= 0 ? 'text-secondary' : 'text-error'),\n style:{fontVariantNumeric:'tabular-nums'}\n }, fmtPct(exp.uplift_pct))\n )\n );\n}\n\n// ─── KanbanColumn ───────────────────────────────────────────────────────────\nfunction KanbanColumn({status, experiments, onCardClick, onDragStart, onDrop}) {\n const meta = STATUS_META[status];\n const [over, setOver] = useState(false);\n return h('div', {\n onDragOver: (e) => { e.preventDefault(); if (!over) setOver(true); },\n onDragLeave: () => setOver(false),\n onDrop: (e) => { e.preventDefault(); setOver(false); onDrop(e, status); },\n className:'bg-surface-container/40 rounded-lg p-md min-h-[400px] flex flex-col gap-2 transition-all ' +\n (over ? 'ring-2 ring-primary/40 bg-primary/5' : '')\n },\n h('div', {className:'flex items-center justify-between mb-1'},\n h('div', {className:'flex items-center gap-2'},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + meta.dot}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest ' + meta.accent}, meta.label)\n ),\n h('span', {className:'inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-surface-container-high text-[10px] font-bold font-mono-data text-on-surface-variant'},\n experiments.length\n )\n ),\n experiments.length === 0\n ? h('div', {className:'flex-1 flex items-center justify-center text-[11px] text-text-muted italic py-6'}, 'Drop here')\n : experiments.map(e => h(ExperimentCard, {key: e.id, exp: e, onClick: onCardClick, onDragStart}))\n );\n}\n\n// ─── ExperimentBoard ────────────────────────────────────────────────────────\nexport function ExperimentBoard({setActivePage}) {\n const {Icon, Btn, PageHeader, SectionHeader, MetricCard, Spinner} = N();\n const [experiments, setExperiments] = useState([]);\n const [stats, setStats] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [filters, setFilters] = useState({status:'', funnel_stage:'', aarrr_lever:''});\n const [drawer, setDrawer] = useState(null); // null | {mode:'create'|'edit', exp}\n const [showLeaderboard, setShowLeaderboard] = useState(true);\n const [sort, setSort] = useState({key:'ice_score', dir:'desc'});\n const [toast, setToast] = useState(null);\n\n const showToast = useCallback((msg, kind='info') => {\n setToast({msg, kind});\n setTimeout(() => setToast(null), 2400);\n }, []);\n\n const buildQuery = useCallback(() => {\n const qs = new URLSearchParams();\n if (filters.status) qs.set('status', filters.status);\n if (filters.funnel_stage) qs.set('funnel_stage', filters.funnel_stage);\n if (filters.aarrr_lever) qs.set('aarrr_lever', filters.aarrr_lever);\n return qs.toString() ? ('?' + qs.toString()) : '';\n }, [filters]);\n\n const load = useCallback(async () => {\n setLoading(true);\n try {\n const [rExp, rStats] = await Promise.all([\n fetch('/api/experiments' + buildQuery()),\n fetch('/api/experiments/stats'),\n ]);\n const exps = await rExp.json();\n const st = await rStats.json();\n setExperiments(Array.isArray(exps) ? exps : []);\n setStats(st && typeof st === 'object' ? st : null);\n setError(null);\n } catch (e) {\n setError(e.message || 'Failed to load experiments');\n } finally {\n setLoading(false);\n }\n }, [buildQuery]);\n\n useEffect(() => { load(); }, [load]);\n\n const onDragStart = (e, exp) => {\n e.dataTransfer.setData('exp-id', String(exp.id));\n e.dataTransfer.effectAllowed = 'move';\n };\n\n const onDrop = async (e, newStatus) => {\n const id = e.dataTransfer.getData('exp-id');\n if (!id) return;\n const expId = isNaN(Number(id)) ? id : Number(id);\n const target = experiments.find(x => String(x.id) === String(id));\n if (!target || target.status === newStatus) return;\n // Optimistic\n setExperiments(prev => prev.map(x => String(x.id) === String(id) ? {...x, status: newStatus} : x));\n try {\n const r = await fetch('/api/experiments/' + expId, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({status: newStatus})\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n showToast('Moved to ' + newStatus, 'success');\n // Reload stats since column counts changed.\n fetch('/api/experiments/stats').then(r => r.json()).then(setStats).catch(() => {});\n } catch (err) {\n // Revert on failure\n setExperiments(prev => prev.map(x => String(x.id) === String(id) ? target : x));\n showToast('Move failed: ' + err.message, 'error');\n }\n };\n\n const onCardClick = (exp) => setDrawer({mode:'edit', exp});\n const onNewExperiment = () => setDrawer({mode:'create', exp: null});\n\n const onDrawerSave = async (payload, opts={}) => {\n const isEdit = drawer?.mode === 'edit' && drawer?.exp?.id;\n try {\n const url = isEdit ? ('/api/experiments/' + drawer.exp.id) : '/api/experiments';\n const method = isEdit ? 'PUT' : 'POST';\n const r = await fetch(url, {\n method, headers:{'Content-Type':'application/json'},\n body: JSON.stringify(payload)\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n showToast(isEdit ? 'Experiment updated' : 'Experiment created', 'success');\n if (!opts.keepOpen) setDrawer(null);\n await load();\n } catch (err) {\n showToast('Save failed: ' + err.message, 'error');\n }\n };\n\n const onDrawerDelete = async () => {\n if (!drawer?.exp?.id) return;\n if (!confirm('Delete this experiment? This cannot be undone.')) return;\n try {\n await fetch('/api/experiments/' + drawer.exp.id, {method:'DELETE'});\n showToast('Experiment deleted', 'info');\n setDrawer(null);\n await load();\n } catch (err) { showToast('Delete failed: ' + err.message, 'error'); }\n };\n\n const onLifecycle = async (action, body) => {\n if (!drawer?.exp?.id) return;\n try {\n const r = await fetch('/api/experiments/' + drawer.exp.id + '/' + action, {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(body || {})\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const updated = await r.json().catch(() => null);\n showToast(action === 'run' ? 'Experiment started' : 'Experiment completed', 'success');\n setDrawer(null);\n await load();\n } catch (err) { showToast(action + ' failed: ' + err.message, 'error'); }\n };\n\n // Board-level quick lifecycle action (Run/Complete) on a row without opening the drawer.\n // POSTs /api/experiments/:id/run|complete, then reloads the board.\n const onRowLifecycle = async (exp, action) => {\n if (!exp || !exp.id) return;\n if (action === 'run' && (exp.baseline_value === '' || exp.baseline_value == null)) {\n // Run needs a baseline; send the user to the drawer to supply it.\n showToast('Set a baseline value to start this experiment', 'info');\n setDrawer({mode:'edit', exp});\n return;\n }\n if (action === 'complete') {\n // Completion needs result + outcome — collect those in the drawer.\n showToast('Add result value and outcome to complete', 'info');\n setDrawer({mode:'edit', exp});\n return;\n }\n try {\n const r = await fetch('/api/experiments/' + exp.id + '/' + action, {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(action === 'run' ? {baseline_value: Number(exp.baseline_value) || 0} : {})\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n showToast(action === 'run' ? 'Experiment started' : 'Experiment completed', 'success');\n await load();\n } catch (err) { showToast(action + ' failed: ' + err.message, 'error'); }\n };\n\n // Board-level quick delete on a row — DELETE /api/experiments/:id, then reload.\n const onRowDelete = async (exp) => {\n if (!exp || !exp.id) return;\n if (!confirm('Delete \"' + (exp.title || 'this experiment') + '\"? This cannot be undone.')) return;\n try {\n const r = await fetch('/api/experiments/' + exp.id, {method:'DELETE'});\n if (!r.ok) throw new Error('HTTP ' + r.status);\n showToast('Experiment deleted', 'info');\n await load();\n } catch (err) { showToast('Delete failed: ' + err.message, 'error'); }\n };\n\n // Board-level \"Suggest ICE\" — POST /api/experiments/ice-suggest, persist the\n // returned impact/confidence/ease via PUT, then reload. Lets users score a row\n // without opening the drawer. (Route is ice-suggest, per router.ts.)\n const onRowSuggestIce = async (exp) => {\n if (!exp || !exp.id) return;\n try {\n const r = await fetch('/api/experiments/ice-suggest', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n title: exp.title,\n hypothesis: exp.hypothesis,\n funnel_stage: exp.funnel_stage,\n aarrr_lever: exp.aarrr_lever,\n objective_id: exp.objective_id || undefined,\n })\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const d = await r.json().catch(() => null);\n if (!d || typeof d.impact !== 'number') throw new Error('no suggestion');\n const pr = await fetch('/api/experiments/' + exp.id, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({impact: d.impact, confidence: d.confidence, ease: d.ease})\n });\n if (!pr.ok) throw new Error('HTTP ' + pr.status);\n showToast('ICE suggested: ' + d.impact + '/' + d.confidence + '/' + d.ease, 'success');\n await load();\n } catch (err) { showToast('Suggest ICE failed: ' + err.message, 'error'); }\n };\n\n // Group experiments by status\n const byStatus = STATUSES.reduce((acc, s) => { acc[s] = []; return acc; }, {});\n experiments.forEach(e => {\n const s = STATUSES.includes(e.status) ? e.status : 'idea';\n byStatus[s].push(e);\n });\n\n // Leaderboard sorted view\n const sorted = [...experiments].sort((a, b) => {\n const av = a[sort.key], bv = b[sort.key];\n if (av == null && bv == null) return 0;\n if (av == null) return 1;\n if (bv == null) return -1;\n if (typeof av === 'number' && typeof bv === 'number') {\n return sort.dir === 'asc' ? av - bv : bv - av;\n }\n return sort.dir === 'asc' ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));\n });\n\n const toggleSort = (key) => setSort(s => s.key === key ? {key, dir: s.dir === 'asc' ? 'desc' : 'asc'} : {key, dir:'desc'});\n const sortIcon = (key) => sort.key === key ? (sort.dir === 'asc' ? '▲' : '▼') : '';\n\n const isEmpty = !loading && experiments.length === 0 && !filters.status && !filters.funnel_stage && !filters.aarrr_lever;\n\n return h('div', {className:'p-lg lg:p-xl space-y-xl max-w-[1600px] mx-auto pb-32'},\n h(PageHeader, {\n title:'Experiments',\n subtitle:'ICE-scored growth experiments. Higher ICE = run first.',\n right: h(Btn, {onClick: onNewExperiment, variant:'primary', size:'md'},\n h(Icon, {name:'add', size:16}), 'New Experiment'\n )\n }),\n\n // ─── Stats bento ──────────────────────────────────────────────────────\n h('div', {className:'grid grid-cols-2 lg:grid-cols-4 gap-md'},\n MetricCard\n ? h(MetricCard, {\n label:'Win Rate',\n value: stats ? (Math.round((stats.win_rate || 0) * 100) + '%') : '—',\n hint:'completed wins / total completed',\n icon:'emoji_events',\n color:'secondary'\n })\n : null,\n MetricCard\n ? h(MetricCard, {\n label:'Avg Uplift',\n value: stats && typeof stats.avg_uplift === 'number' ? fmtPct(stats.avg_uplift) : '—',\n hint:'across completed experiments',\n icon:'trending_up',\n color:'primary'\n })\n : null,\n MetricCard\n ? h(MetricCard, {\n label:'Top Lever',\n value: stats && stats.top_lever ? String(stats.top_lever).toUpperCase() : '—',\n hint:'most-tested AARRR lever',\n icon:'tune',\n color:'tertiary'\n })\n : null,\n MetricCard\n ? h(MetricCard, {\n label:'Total Experiments',\n value: stats ? String(stats.total || 0) : '—',\n hint: stats?.fastest_days != null ? ('fastest ' + stats.fastest_days + 'd') : 'all-time count',\n icon:'science',\n color:'primary'\n })\n : null\n ),\n\n error && h('div', {className:'p-md rounded-lg bg-error/5 border border-error/30 text-[12px] text-error'},\n 'Experiments unavailable: ' + error\n ),\n\n // ─── Empty state ──────────────────────────────────────────────────────\n isEmpty\n ? h('div', {className:'glass-panel rounded-xl p-xl flex flex-col items-center justify-center text-center gap-md py-24'},\n h('div', {className:'w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center'},\n h(Icon, {name:'science', size:36, className:'text-primary'})\n ),\n h('h3', {className:'text-[18px] font-bold text-on-surface'}, 'No experiments yet'),\n h('p', {className:'text-[13px] text-text-muted max-w-md'},\n 'Run your first ICE-scored growth experiment. Score Impact, Confidence, and Ease on a 1-10 scale and let the board prioritize for you.'\n ),\n h(Btn, {onClick: onNewExperiment, variant:'primary', size:'md'},\n h(Icon, {name:'add', size:16}), 'Create first experiment'\n )\n )\n : h(React.Fragment, null,\n // ─── Kanban board ─────────────────────────────────────────────\n h('div', {className:'glass-panel rounded-xl p-md'},\n h('div', {className:'flex items-center justify-between mb-md px-2'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'view_kanban', size:18, className:'text-primary'}),\n h('h3', {className:'text-[15px] font-bold tracking-tight'}, 'Pipeline'),\n loading && h(Spinner, {size:14})\n ),\n h('span', {className:'text-[10px] text-text-muted'}, 'Drag cards between columns to update status')\n ),\n h('div', {className:'grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-md'},\n STATUSES.map(st => h(KanbanColumn, {\n key: st,\n status: st,\n experiments: byStatus[st],\n onCardClick,\n onDragStart,\n onDrop\n }))\n )\n ),\n\n // ─── ICE Leaderboard ──────────────────────────────────────────\n h('section', {className:'glass-panel rounded-xl p-lg'},\n h('div', {className:'flex items-center justify-between mb-md'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'leaderboard', size:18, className:'text-tertiary'}),\n h('h3', {className:'text-[15px] font-bold tracking-tight'}, 'Top by ICE Score'),\n h('span', {className:'text-[10px] text-text-muted'}, '(' + sorted.length + ')')\n ),\n h('button', {\n onClick: () => setShowLeaderboard(v => !v),\n className:'text-[11px] font-semibold uppercase tracking-widest text-primary hover:underline flex items-center gap-1'\n }, h(Icon, {name: showLeaderboard ? 'expand_less' : 'expand_more', size:16}),\n showLeaderboard ? 'Collapse' : 'Expand'\n )\n ),\n showLeaderboard && h(React.Fragment, null,\n // Filter row\n h('div', {className:'flex flex-wrap items-end gap-2 mb-md p-3 rounded-lg bg-surface-container/40 border border-border-subtle'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Status'),\n h('select', {\n value: filters.status,\n onChange: e => setFilters(f => ({...f, status: e.target.value})),\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface font-mono-data focus:border-primary focus:outline-none min-w-[120px]'\n },\n h('option', {value:''}, 'All statuses'),\n STATUSES.map(s => h('option', {key: s, value: s}, s))\n )\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Funnel Stage'),\n h('select', {\n value: filters.funnel_stage,\n onChange: e => setFilters(f => ({...f, funnel_stage: e.target.value})),\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface font-mono-data focus:border-primary focus:outline-none min-w-[120px]'\n },\n h('option', {value:''}, 'All stages'),\n ['TOFU','MOFU','BOFU'].map(s => h('option', {key: s, value: s}, s))\n )\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'AARRR Lever'),\n h('select', {\n value: filters.aarrr_lever,\n onChange: e => setFilters(f => ({...f, aarrr_lever: e.target.value})),\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface font-mono-data focus:border-primary focus:outline-none min-w-[140px]'\n },\n h('option', {value:''}, 'All levers'),\n LEVERS.map(l => h('option', {key: l, value: l}, l))\n )\n ),\n h('button', {\n onClick: () => setFilters({status:'', funnel_stage:'', aarrr_lever:''}),\n className:'ml-auto text-[11px] font-semibold uppercase tracking-widest text-text-muted hover:text-on-surface px-3 py-1.5 border border-border-subtle rounded-md hover:border-outline/40 transition-all'\n }, 'Reset')\n ),\n // Table\n h('div', {className:'border border-border-subtle rounded-lg overflow-hidden'},\n h('div', {className:'grid grid-cols-12 gap-2 px-3 py-2 text-[10px] uppercase tracking-widest text-text-muted border-b border-border-subtle bg-surface-container/40 font-bold'},\n h('button', {onClick: () => toggleSort('id'), className:'col-span-1 text-left hover:text-on-surface'}, '# ', sortIcon('id')),\n h('button', {onClick: () => toggleSort('title'), className:'col-span-3 text-left hover:text-on-surface'}, 'Title ', sortIcon('title')),\n h('button', {onClick: () => toggleSort('ice_score'), className:'col-span-1 text-right hover:text-on-surface'}, 'ICE ', sortIcon('ice_score')),\n h('div', {className:'col-span-2 text-center'}, 'I / C / E'),\n h('button', {onClick: () => toggleSort('funnel_stage'), className:'col-span-1 text-center hover:text-on-surface'}, 'Stage ', sortIcon('funnel_stage')),\n h('button', {onClick: () => toggleSort('outcome'), className:'col-span-1 text-center hover:text-on-surface'}, 'Outcome ', sortIcon('outcome')),\n h('button', {onClick: () => toggleSort('uplift_pct'), className:'col-span-2 text-right hover:text-on-surface'}, 'Uplift ', sortIcon('uplift_pct')),\n h('div', {className:'col-span-1 text-right'}, 'Actions')\n ),\n sorted.length === 0\n ? h('div', {className:'px-3 py-8 text-center text-[12px] text-text-muted italic'}, 'No experiments match current filters.')\n : sorted.slice(0, 50).map((e, idx) => {\n const score = e.ice_score != null ? e.ice_score : iceScore(e.impact, e.confidence, e.ease);\n const stage = STAGE_COLORS[e.funnel_stage];\n return h('div', {\n key: e.id,\n className:'grid grid-cols-12 gap-2 px-3 py-2 text-[12px] border-b border-border-subtle/50 last:border-0 items-center hover:bg-surface-container/30 transition-colors'\n },\n h('div', {className:'col-span-1 font-mono-data text-text-muted'}, '#' + (idx + 1)),\n h('div', {className:'col-span-3 truncate font-semibold text-on-surface', title: e.title}, e.title || '(untitled)'),\n h('div', {className:'col-span-1 text-right'},\n h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded-full border text-[10px] font-extrabold font-mono-data ' + iceBadgeCls(score), style:{fontVariantNumeric:'tabular-nums'}}, score.toFixed(1))\n ),\n h('div', {className:'col-span-2 text-center font-mono-data text-text-muted text-[11px]'},\n (e.impact ?? '–') + ' / ' + (e.confidence ?? '–') + ' / ' + (e.ease ?? '–')\n ),\n h('div', {className:'col-span-1 text-center'},\n stage ? h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-widest border ' + stage.chip}, stage.label) : h('span', {className:'text-text-muted'}, '—')\n ),\n h('div', {className:'col-span-1 text-center'},\n e.outcome\n ? h('span', {\n className:'inline-flex items-center text-[10px] font-bold uppercase tracking-widest ' +\n (e.outcome === 'win' ? 'text-secondary' : e.outcome === 'loss' ? 'text-error' : 'text-tertiary')\n }, e.outcome)\n : h('span', {className:'text-text-muted'}, '—')\n ),\n h('div', {className:'col-span-2 text-right font-mono-data font-bold ' + (typeof e.uplift_pct === 'number' && e.uplift_pct >= 0 ? 'text-secondary' : typeof e.uplift_pct === 'number' ? 'text-error' : 'text-text-muted'), style:{fontVariantNumeric:'tabular-nums'}},\n typeof e.uplift_pct === 'number' ? fmtPct(e.uplift_pct) : '—'\n ),\n h('div', {className:'col-span-1 flex items-center justify-end gap-1.5'},\n (e.status === 'idea' || e.status === 'queued') && h('button', {\n onClick: (ev) => { ev.stopPropagation(); onRowLifecycle(e, 'run'); },\n title:'Run experiment',\n className:'text-tertiary hover:text-tertiary/70'\n }, h(Icon, {name:'play_arrow', size:15})),\n e.status === 'running' && h('button', {\n onClick: (ev) => { ev.stopPropagation(); onRowLifecycle(e, 'complete'); },\n title:'Complete experiment',\n className:'text-secondary hover:text-secondary/70'\n }, h(Icon, {name:'check', size:15})),\n h('button', {\n onClick: (ev) => { ev.stopPropagation(); onRowSuggestIce(e); },\n title:'Suggest ICE score',\n className:'text-primary hover:text-primary/70'\n }, h(Icon, {name:'auto_awesome', size:15})),\n h('button', {\n onClick: (ev) => { ev.stopPropagation(); onCardClick(e); },\n title:'Edit',\n className:'text-on-surface-variant hover:text-on-surface'\n }, h(Icon, {name:'edit', size:15})),\n h('button', {\n onClick: (ev) => { ev.stopPropagation(); onRowDelete(e); },\n title:'Delete',\n className:'text-error/70 hover:text-error'\n }, h(Icon, {name:'delete', size:15}))\n )\n );\n })\n )\n )\n )\n ),\n\n // ─── Drawer ───────────────────────────────────────────────────────────\n drawer && h(ExperimentDrawer, {\n experiment: drawer.exp,\n mode: drawer.mode,\n onSave: onDrawerSave,\n onClose: () => setDrawer(null),\n onDelete: drawer.mode === 'edit' ? onDrawerDelete : null,\n onLifecycle\n }),\n\n // Toast\n toast && h('div', {\n className:'fixed bottom-6 right-6 z-[100] px-4 py-2.5 rounded-lg shadow-2xl border text-[12px] font-semibold ' +\n (toast.kind === 'error' ? 'bg-error/10 border-error/40 text-error'\n : toast.kind === 'success' ? 'bg-secondary/10 border-secondary/40 text-secondary'\n : 'bg-surface-container-high border-border-subtle text-on-surface')\n }, toast.msg)\n );\n}\n\n// ─── ExperimentDrawer ───────────────────────────────────────────────────────\nexport function ExperimentDrawer({experiment, mode, onSave, onClose, onDelete, onLifecycle}) {\n const {Icon, Btn, Input, Spinner, SectionHeader} = N();\n const isEdit = !!(experiment && experiment.id);\n const initialForm = {\n title: experiment?.title || '',\n hypothesis: experiment?.hypothesis || '',\n objective_id: experiment?.objective_id || '',\n funnel_stage: experiment?.funnel_stage || 'TOFU',\n aarrr_lever: experiment?.aarrr_lever || 'acquisition',\n channel: experiment?.channel || 'email',\n impact: experiment?.impact ?? 5,\n confidence: experiment?.confidence ?? 5,\n ease: experiment?.ease ?? 5,\n owner: experiment?.owner || '',\n start_date: experiment?.start_date ? String(experiment.start_date).slice(0, 10) : '',\n end_date: experiment?.end_date ? String(experiment.end_date).slice(0, 10) : '',\n success_metric: experiment?.success_metric || '',\n baseline_value: experiment?.baseline_value ?? '',\n result_value: experiment?.result_value ?? '',\n outcome: experiment?.outcome || '',\n learnings: experiment?.learnings || '',\n status: experiment?.status || 'idea',\n // A/B arm counts — power the backend two-proportion z-test (significance + sample_size).\n control_n: experiment?.control_n ?? '',\n control_conversions: experiment?.control_conversions ?? '',\n variant_n: experiment?.variant_n ?? '',\n variant_conversions: experiment?.variant_conversions ?? '',\n };\n const [form, setForm] = useState(initialForm);\n const [objectives, setObjectives] = useState([]);\n const [aiBusy, setAiBusy] = useState(false);\n const [aiRationale, setAiRationale] = useState('');\n const [saving, setSaving] = useState(false);\n\n useEffect(() => {\n fetch('/api/okrs').then(r => r.json()).then(d => {\n const list = Array.isArray(d) ? d : (Array.isArray(d?.objectives) ? d.objectives : []);\n setObjectives(list);\n }).catch(() => setObjectives([]));\n }, []);\n\n const set = (k, v) => setForm(f => ({...f, [k]: v}));\n const score = iceScore(form.impact, form.confidence, form.ease);\n\n const aiSuggest = async () => {\n if (!form.title.trim() && !form.hypothesis.trim()) return;\n setAiBusy(true);\n try {\n const r = await fetch('/api/experiments/ice-suggest', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n title: form.title,\n hypothesis: form.hypothesis,\n funnel_stage: form.funnel_stage,\n aarrr_lever: form.aarrr_lever,\n objective_id: form.objective_id || undefined,\n })\n });\n const d = await r.json();\n if (typeof d.impact === 'number') set('impact', d.impact);\n if (typeof d.confidence === 'number') set('confidence', d.confidence);\n if (typeof d.ease === 'number') set('ease', d.ease);\n setAiRationale(d.rationale || '');\n } catch (e) {\n setAiRationale('AI suggestion failed: ' + e.message);\n } finally { setAiBusy(false); }\n };\n\n const buildPayload = () => {\n const p = {\n title: form.title.trim(),\n hypothesis: form.hypothesis.trim(),\n objective_id: form.objective_id || null,\n funnel_stage: form.funnel_stage,\n aarrr_lever: form.aarrr_lever,\n channel: form.channel,\n impact: Number(form.impact) || 0,\n confidence: Number(form.confidence) || 0,\n ease: Number(form.ease) || 0,\n owner: form.owner.trim() || null,\n start_date: form.start_date || null,\n end_date: form.end_date || null,\n success_metric: form.success_metric.trim() || null,\n status: form.status,\n };\n if (form.baseline_value !== '' && form.baseline_value != null) p.baseline_value = Number(form.baseline_value);\n if (form.result_value !== '' && form.result_value != null) p.result_value = Number(form.result_value);\n if (form.outcome) p.outcome = form.outcome;\n if (form.learnings && form.learnings.trim()) p.learnings = form.learnings.trim();\n return p;\n };\n\n const handleSave = async () => {\n if (!form.title.trim()) { alert('Title is required'); return; }\n setSaving(true);\n try { await onSave(buildPayload()); } finally { setSaving(false); }\n };\n\n const handleRun = async () => {\n if (form.baseline_value === '' || form.baseline_value == null) {\n alert('Baseline value is required to start a running experiment.');\n return;\n }\n await onLifecycle('run', {baseline_value: Number(form.baseline_value)});\n };\n\n const handleComplete = async () => {\n if (form.result_value === '' || form.result_value == null) { alert('Result value is required.'); return; }\n if (!form.outcome) { alert('Outcome is required.'); return; }\n const body = {\n result_value: Number(form.result_value),\n outcome: form.outcome,\n learnings: form.learnings || undefined,\n };\n // Include A/B arm counts only when all four are supplied so the backend can run\n // a real two-proportion z-test (significance + sample_size). Otherwise omit —\n // the backend keeps significance null rather than fabricating a p-value.\n const hasArms = [form.control_n, form.control_conversions, form.variant_n, form.variant_conversions]\n .every(v => v !== '' && v != null);\n if (hasArms) {\n body.control = {n: Number(form.control_n), conversions: Number(form.control_conversions)};\n body.variant = {n: Number(form.variant_n), conversions: Number(form.variant_conversions)};\n }\n await onLifecycle('complete', body);\n };\n\n const Section = ({n, title, children}) => h('div', {className:'space-y-3 pb-4 border-b border-border-subtle/60 last:border-0'},\n h('div', {className:'flex items-center gap-2'},\n h('span', {className:'w-5 h-5 rounded-full bg-primary/15 text-primary text-[11px] font-extrabold flex items-center justify-center'}, n),\n h('h4', {className:'text-[12px] font-bold uppercase tracking-widest text-on-surface'}, title)\n ),\n children\n );\n\n const Slider = ({label, value, onChange}) => h('div', {className:'space-y-1'},\n h('div', {className:'flex items-center justify-between'},\n h('label', {className:'text-[11px] font-semibold text-on-surface-variant'}, label),\n h('span', {className:'text-[12px] font-extrabold font-mono-data text-primary', style:{fontVariantNumeric:'tabular-nums'}}, value)\n ),\n h('input', {\n type:'range', min:1, max:10, step:1, value: Number(value) || 1,\n onChange: e => onChange(parseInt(e.target.value, 10)),\n className:'w-full accent-primary bg-surface-variant rounded-lg h-1.5 appearance-none cursor-pointer'\n })\n );\n\n return h(React.Fragment, null,\n h('div', {className:'fixed inset-0 bg-black/50 backdrop-blur-sm z-[55]', onClick: onClose}),\n h('div', {className:'fixed top-0 right-0 h-screen w-full sm:w-[480px] glass-panel shadow-2xl z-[60] flex flex-col drawer-in'},\n // Header\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-center bg-surface-container-high/20'},\n h('div', {className:'flex items-center gap-3 min-w-0'},\n h(Icon, {name:'science', size:20, className:'text-primary'}),\n h('div', {className:'min-w-0'},\n h('h3', {className:'text-[16px] font-bold truncate'}, isEdit ? 'Edit Experiment' : 'New Experiment'),\n h('div', {className:'flex items-center gap-2 mt-0.5'},\n h('span', {className:'inline-flex items-center px-2 py-0.5 rounded-full border text-[10px] font-extrabold font-mono-data ' + iceBadgeCls(score), style:{fontVariantNumeric:'tabular-nums'}}, 'ICE ', score.toFixed(1)),\n isEdit && h('span', {className:'text-[10px] text-text-muted font-mono-data'}, '#' + experiment.id)\n )\n )\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface p-1'}, h(Icon, {name:'close', size:20}))\n ),\n // Body\n h('div', {className:'flex-1 overflow-y-auto p-lg space-y-lg'},\n\n // 1. Hypothesis\n h(Section, {n: 1, title:'Hypothesis'},\n h(Input, {\n label:'Title', value: form.title, onChange: v => set('title', v),\n placeholder:'e.g. Add social proof to pricing page'\n }),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Hypothesis'),\n h('textarea', {\n value: form.hypothesis, onChange: e => set('hypothesis', e.target.value), rows: 3,\n placeholder:'We believe that [change] will [outcome] because [rationale].',\n className:'w-full p-3 bg-surface-container-lowest border border-border-subtle rounded-lg text-[13px] text-on-surface-variant leading-relaxed resize-none outline-none focus:border-primary/40 transition-all',\n style:{fontFamily:'inherit'}\n })\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Linked Objective'),\n h('select', {\n value: form.objective_id || '',\n onChange: e => set('objective_id', e.target.value),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n },\n h('option', {value:''}, '— None —'),\n objectives.map(o => h('option', {key: o.id, value: o.id}, (o.title || o.name || 'Objective') + (o.id ? (' (#' + o.id + ')') : '')))\n )\n )\n ),\n\n // 2. ICE Scoring\n h(Section, {n: 2, title:'ICE Scoring'},\n h(Slider, {label:'Impact (how big a win?)', value: form.impact, onChange: v => set('impact', v)}),\n h(Slider, {label:'Confidence (how sure we are?)', value: form.confidence, onChange: v => set('confidence', v)}),\n h(Slider, {label:'Ease (how cheap to run?)', value: form.ease, onChange: v => set('ease', v)}),\n h('div', {className:'flex items-center justify-between gap-2 pt-1'},\n h(Btn, {onClick: aiSuggest, variant:'ghost', size:'sm', disabled: aiBusy || (!form.title.trim() && !form.hypothesis.trim())},\n aiBusy ? h(Spinner, {size:13}) : h(Icon, {name:'auto_awesome', size:14}),\n aiBusy ? 'Suggesting…' : 'AI Suggest'\n ),\n h('div', {className:'text-[11px] text-text-muted'},\n 'Composite ICE: ',\n h('span', {className:'font-extrabold font-mono-data text-primary text-[14px] ml-1', style:{fontVariantNumeric:'tabular-nums'}}, score.toFixed(1))\n )\n ),\n aiRationale && h('div', {className:'p-2.5 rounded-lg bg-primary/5 border border-primary/20 text-[11px] text-on-surface-variant leading-relaxed'},\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-primary mr-1.5'}, 'AI'), aiRationale\n )\n ),\n\n // 3. Classification\n h(Section, {n: 3, title:'Classification'},\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Funnel Stage'),\n h('div', {className:'grid grid-cols-3 gap-2'},\n ['TOFU','MOFU','BOFU'].map(s => {\n const on = form.funnel_stage === s;\n const cls = STAGE_COLORS[s];\n return h('button', {\n key: s, type:'button',\n onClick: () => set('funnel_stage', s),\n className:'p-2 rounded-lg border text-[11px] font-bold uppercase tracking-widest transition-all ' +\n (on ? cls.chip + ' border-2' : 'border-border-subtle bg-surface-container-lowest text-text-muted hover:border-outline/40')\n }, s);\n })\n )\n ),\n h('div', {className:'grid grid-cols-2 gap-md'},\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'AARRR Lever'),\n h('select', {\n value: form.aarrr_lever, onChange: e => set('aarrr_lever', e.target.value),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n }, LEVERS.map(l => h('option', {key: l, value: l}, l)))\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Channel'),\n h('select', {\n value: form.channel, onChange: e => set('channel', e.target.value),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n }, CHANNELS.map(c => h('option', {key: c, value: c}, c)))\n )\n ),\n h(Input, {label:'Owner', value: form.owner, onChange: v => set('owner', v), placeholder:'e.g. Maya'})\n ),\n\n // 4. Schedule\n h(Section, {n: 4, title:'Schedule'},\n h('div', {className:'grid grid-cols-2 gap-md'},\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Start Date'),\n h('input', {\n type:'date', value: form.start_date, onChange: e => set('start_date', e.target.value),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n })\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'End Date'),\n h('input', {\n type:'date', value: form.end_date, onChange: e => set('end_date', e.target.value),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n })\n )\n ),\n h(Input, {label:'Success Metric', value: form.success_metric, onChange: v => set('success_metric', v), placeholder:'e.g. signup_rate, MQL count'})\n ),\n\n // 5. Status & Results (only when status != 'idea')\n form.status !== 'idea' && h(Section, {n: 5, title:'Status & Results'},\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Status'),\n h('select', {\n value: form.status, onChange: e => set('status', e.target.value),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n }, STATUSES.map(s => h('option', {key: s, value: s}, s)))\n ),\n h(Input, {\n label:'Baseline Value', type:'text',\n value: String(form.baseline_value ?? ''),\n onChange: v => set('baseline_value', v.replace(/[^0-9.\\\\-]/g,'')),\n placeholder:'e.g. 100'\n }),\n form.status === 'completed' && h(React.Fragment, null,\n h(Input, {\n label:'Result Value', type:'text',\n value: String(form.result_value ?? ''),\n onChange: v => set('result_value', v.replace(/[^0-9.\\\\-]/g,'')),\n placeholder:'e.g. 124'\n }),\n // A/B arm counts — fill all four to run a real two-proportion z-test\n // (significance + sample_size). Leave any blank to keep significance null.\n h('div', {className:'space-y-2 p-3 rounded-lg bg-surface-container/40 border border-border-subtle'},\n h('div', {className:'flex items-center gap-1.5'},\n h(Icon, {name:'science', size:13, className:'text-tertiary'}),\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'A/B Significance (optional)')\n ),\n h('div', {className:'grid grid-cols-2 gap-md'},\n h(Input, {\n label:'Control n', type:'text',\n value: String(form.control_n ?? ''),\n onChange: v => set('control_n', v.replace(/[^0-9]/g,'')),\n placeholder:'e.g. 1000'\n }),\n h(Input, {\n label:'Control conversions', type:'text',\n value: String(form.control_conversions ?? ''),\n onChange: v => set('control_conversions', v.replace(/[^0-9]/g,'')),\n placeholder:'e.g. 50'\n }),\n h(Input, {\n label:'Variant n', type:'text',\n value: String(form.variant_n ?? ''),\n onChange: v => set('variant_n', v.replace(/[^0-9]/g,'')),\n placeholder:'e.g. 1000'\n }),\n h(Input, {\n label:'Variant conversions', type:'text',\n value: String(form.variant_conversions ?? ''),\n onChange: v => set('variant_conversions', v.replace(/[^0-9]/g,'')),\n placeholder:'e.g. 80'\n })\n ),\n h('p', {className:'text-[10px] text-text-muted'}, 'Fill all four to compute real significance from a two-proportion z-test. Leave blank to skip.')\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Outcome'),\n h('div', {className:'grid grid-cols-3 gap-2'},\n OUTCOMES.map(o => {\n const on = form.outcome === o;\n const cls = o === 'win' ? 'bg-secondary/15 text-secondary border-secondary/40'\n : o === 'loss' ? 'bg-error/15 text-error border-error/40'\n : 'bg-tertiary/15 text-tertiary border-tertiary/40';\n return h('button', {\n key: o, type:'button',\n onClick: () => set('outcome', o),\n className:'p-2 rounded-lg border text-[11px] font-bold uppercase tracking-widest transition-all ' +\n (on ? cls + ' border-2' : 'border-border-subtle bg-surface-container-lowest text-text-muted hover:border-outline/40')\n }, o);\n })\n )\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Learnings'),\n h('textarea', {\n value: form.learnings, onChange: e => set('learnings', e.target.value), rows: 3,\n placeholder:'What worked, what didn\\\\'t, and what we\\\\'ll do next.',\n className:'w-full p-3 bg-surface-container-lowest border border-border-subtle rounded-lg text-[13px] text-on-surface-variant leading-relaxed resize-none outline-none focus:border-primary/40 transition-all',\n style:{fontFamily:'inherit'}\n })\n )\n )\n ),\n\n // Allow promoting from idea\n form.status === 'idea' && h('div', {className:'p-3 rounded-lg bg-surface-container/40 border border-border-subtle space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Status'),\n h('select', {\n value: form.status, onChange: e => set('status', e.target.value),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n }, STATUSES.map(s => h('option', {key: s, value: s}, s))),\n h('p', {className:'text-[10px] text-text-muted'}, 'Move to \"queued\" or \"running\" to unlock baseline + results inputs.')\n ),\n // P3 wire: surface chat-only capabilities so users discover the AI tools\n // (generate_tasks_from_experiment + compose_content). Click sends the prompt to chat.\n isEdit && h('div', {className:'p-3 rounded-lg border border-tertiary/20 bg-tertiary/5 space-y-2'},\n h('div', {className:'flex items-center gap-1.5'},\n h(Icon, {name:'tips_and_updates', size:14, className:'text-tertiary'}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-tertiary'}, 'Try Chat')\n ),\n h('div', {className:'flex flex-wrap gap-1.5'},\n h('button', {\n type:'button',\n onClick: () => window.dispatchEvent(new CustomEvent('nexus:open-chat', {detail:{\n action_payload:{question: 'Draft a 5-task breakdown for experiment #' + form.id + ' (\"' + form.title + '\") so we can ship this week.'}\n }})),\n className:'text-[10px] px-2 py-1 rounded-full bg-surface-container-lowest border border-border-subtle hover:border-tertiary/40 text-on-surface-variant transition-colors'\n }, '✨ Generate tasks from this'),\n h('button', {\n type:'button',\n onClick: () => window.dispatchEvent(new CustomEvent('nexus:open-chat', {detail:{\n action_payload:{question: 'Compose the launch announcement copy (LinkedIn post + email subject + body) for: ' + (form.hypothesis || form.title)}\n }})),\n className:'text-[10px] px-2 py-1 rounded-full bg-surface-container-lowest border border-border-subtle hover:border-tertiary/40 text-on-surface-variant transition-colors'\n }, '✨ Draft launch copy'),\n form.status === 'completed' && h('button', {\n type:'button',\n onClick: () => window.dispatchEvent(new CustomEvent('nexus:open-chat', {detail:{\n action_payload:{question: 'Analyze the result of experiment \"' + form.title + '\" (' + (form.outcome || '?') + ', uplift ' + (form.uplift_pct ?? 'N/A') + '%) and recommend the next 3 follow-up experiments scored by ICE.'}\n }})),\n className:'text-[10px] px-2 py-1 rounded-full bg-surface-container-lowest border border-border-subtle hover:border-tertiary/40 text-on-surface-variant transition-colors'\n }, '✨ Plan follow-up experiments')\n )\n )\n ),\n // Footer\n h('div', {className:'p-lg border-t border-border-subtle bg-surface-container-high/20 flex items-center gap-2 flex-wrap'},\n isEdit && onDelete && h('button', {\n onClick: onDelete,\n className:'text-[11px] font-semibold uppercase tracking-widest text-error border border-error/30 bg-error/5 px-3 py-2 rounded-lg hover:bg-error/15 transition-all'\n }, h(Icon, {name:'delete', size:13, className:'inline mr-1'}), 'Delete'),\n h('div', {className:'flex-1'}),\n h(Btn, {onClick: onClose, variant:'ghost', size:'sm'}, 'Cancel'),\n isEdit && (form.status === 'queued' || form.status === 'idea') && onLifecycle && h(Btn, {\n onClick: handleRun, variant:'secondary', size:'sm'\n }, h(Icon, {name:'play_arrow', size:14}), 'Run'),\n isEdit && form.status === 'running' && onLifecycle && h(Btn, {\n onClick: handleComplete, variant:'secondary', size:'sm'\n }, h(Icon, {name:'check', size:14}), 'Complete'),\n h(Btn, {onClick: handleSave, variant:'primary', size:'sm', disabled: saving},\n saving ? h(Spinner, {size:13}) : h(Icon, {name:'save', size:14}),\n saving ? 'Saving…' : 'Save'\n )\n )\n )\n );\n}\n\nexport { ExperimentBoard as default };\n `;\n}\n",[382],"c7dabd5a-5f07-11f1-9bd8-1607ee4eb77e","frontend_crm2.ts","c7dabe40-5f07-11f1-9bd8-1607ee4eb77e",985,["D",1780462244747],"// frontend_crm2.ts — Wave 4 CRM analytics / lead-ops / productivity surfaces.\n// Served at /api/app-crm2 (router.ts MODULE_ROUTES), lazy-imported by frontend_crm.ts.\n// Emits an ES module that EXPORTS three React components consumed as new Sales-CRM sub-tabs:\n// ForecastDashboard — weighted forecast, leaderboard, aging+stuck, velocity, conversion,\n// snapshot trend (+ capture), quota panel (set target + attainment).\n// LeadsDesk — graded lead table (A/B/C/D), SLA badge, row actions, filters.\n// ProductivityPanel — (a) templates + live render preview + sequences; (b) dedupe + merge.\n//\n// Backend (all tenant-scoped JSON; confirmed against api/analytics_crm.ts, snapshots.ts,\n// leads_crm.ts, templates.ts, dedupe.ts, crm_routes.ts):\n// GET /api/crm/forecast | /leaderboard?period | /aging | /velocity | /conversion\n// GET /api/crm/snapshots | POST /api/crm/snapshots\n// GET /api/crm/quota?period | PUT /api/crm/quota | GET /api/crm/quotas\n// GET /api/crm/leads?grade=&owner=&status= | POST /api/crm/leads/:email/(grade|assign|respond|status)\n// GET /api/crm/templates | POST | PUT/:id | DELETE/:id | POST/:id/render\n// GET /api/crm/sequences | POST | GET/POST /:id/steps\n// GET /api/crm/dedupe/(contacts|accounts|deals) | POST /api/crm/dedupe/(merge-contacts|merge-accounts)\n//\n// Reuses the SAME visual language as frontend_crm.ts (STAGE_META, fmtMoney, fmtRel, Btn/Spinner/Icon\n// from window.__nexus). REAL DATA ONLY — honest empty states, no mock rows.\nexport function getCRM2JS(): string {\n return `\nimport React, { useState, useEffect, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// ─── Shared helpers (mirrored from frontend_crm.ts) ────────────────────────────\nconst STAGES = ['lead','qualified','proposal','negotiation','won','lost'];\nconst STAGE_META = {\n lead: {label:'Lead', dot:'bg-text-muted', accent:'text-text-muted', chip:'bg-surface-container-high text-on-surface-variant border-border-subtle', bar:'#64748b'},\n qualified: {label:'Qualified', dot:'bg-primary', accent:'text-primary', chip:'bg-primary/10 text-primary border-primary/30', bar:'#c0c1ff'},\n proposal: {label:'Proposal', dot:'bg-tertiary', accent:'text-tertiary', chip:'bg-tertiary/10 text-tertiary border-tertiary/30', bar:'#d0bcff'},\n negotiation: {label:'Negotiation', dot:'bg-secondary', accent:'text-secondary', chip:'bg-secondary/10 text-secondary border-secondary/30', bar:'#4edea3'},\n won: {label:'Won', dot:'bg-secondary', accent:'text-secondary', chip:'bg-secondary/15 text-secondary border-secondary/40', bar:'#6ffbbe'},\n lost: {label:'Lost', dot:'bg-error', accent:'text-error', chip:'bg-error/10 text-error border-error/30', bar:'#ffb4ab'},\n};\nconst stMeta = (s) => STAGE_META[s] || STAGE_META.lead;\n\nconst fmtMoney = (n) => {\n const v = Number(n) || 0;\n if (v >= 1000000) return '$' + (v/1000000).toFixed(1).replace(/\\\\.0$/,'') + 'M';\n if (v >= 1000) return '$' + (v/1000).toFixed(1).replace(/\\\\.0$/,'') + 'K';\n return '$' + v.toLocaleString();\n};\nconst fmtRel = (iso) => {\n if (!iso) return '';\n const ms = Date.now() - new Date(iso).getTime();\n if (isNaN(ms)) return '';\n if (ms < 3600000) return Math.max(1, Math.floor(ms/60000)) + 'm ago';\n if (ms < 86400000) return Math.floor(ms/3600000) + 'h ago';\n if (ms < 2592000000) return Math.floor(ms/86400000) + 'd ago';\n return new Date(iso).toLocaleDateString('en-US', {month:'short', day:'numeric'});\n};\nconst initialsOf = (name) => (name||'?').trim().split(/\\\\s+/).slice(0,2).map(s => s[0]||'').join('').toUpperCase() || '?';\nconst colorFromName = (name) => {\n const colors = ['#c0c1ff','#4edea3','#d0bcff','#8083ff','#6ffbbe','#a078ff','#e1e0ff','#494bd6'];\n const sum = (name||'').split('').reduce((a,c) => a + c.charCodeAt(0), 0);\n return colors[sum % colors.length];\n};\nconst pct = (n) => (n == null || isNaN(Number(n))) ? '—' : (Math.round(Number(n) * 10) / 10) + '%';\nconst ownerLabel = (o) => (o == null || String(o).trim() === '') ? '(unassigned)' : String(o);\n\n// Current period helpers for the quota panel (default selectors).\nconst currentQuarter = () => { const d = new Date(); return d.getUTCFullYear() + '-Q' + (Math.floor(d.getUTCMonth()/3) + 1); };\nconst currentMonth = () => { const d = new Date(); return d.getUTCFullYear() + '-' + String(d.getUTCMonth()+1).padStart(2,'0'); };\n\n// ─── Small shared UI atoms ─────────────────────────────────────────────────────\nfunction Section({title, icon, accent, right, children, sub}) {\n const { Icon } = N();\n return h('div', {className:'glass-panel rounded-xl p-lg space-y-4'},\n h('div', {className:'flex items-start justify-between gap-3'},\n h('div', {className:'min-w-0'},\n h('div', {className:'flex items-center gap-2'},\n icon && h(Icon, {name: icon, size:16, className: accent || 'text-primary'}),\n h('h3', {className:'text-[14px] font-bold text-on-surface'}, title)\n ),\n sub && h('div', {className:'text-[11px] text-text-muted mt-0.5'}, sub)\n ),\n right\n ),\n children\n );\n}\nconst EmptyNote = (msg) => h('div', {className:'text-[12px] text-text-muted italic py-2'}, msg);\n\n// Horizontal labeled bar (clean Tailwind — charts module isn't on window.__nexus).\nfunction HBar({label, value, max, color, valueText, sub}) {\n const w = max > 0 ? Math.max(2, (Number(value)||0) / max * 100) : 0;\n return h('div', {className:'flex items-center gap-2'},\n h('div', {className:'text-[11px] text-on-surface-variant truncate flex-shrink-0 text-right', style:{width:120}}, label),\n h('div', {className:'flex-1 h-5 bg-surface-container-high rounded overflow-hidden relative'},\n h('div', {className:'h-full rounded transition-all duration-500', style:{width: w + '%', background: color || '#c0c1ff'}})\n ),\n h('div', {className:'text-[11px] text-text-muted text-right flex-shrink-0 font-mono-data', style:{width: sub ? 92 : 60}}, valueText)\n );\n}\n\n// Lightweight inline sparkline (snapshot trend).\nfunction MiniSpark({data, color, width, height}) {\n const w = width || 200, ht = height || 40;\n if (!data || data.length < 2) return null;\n const mn = Math.min(...data), mx = Math.max(...data), r = mx - mn || 1;\n const pts = data.map((v,i) => [(i/(data.length-1))*w, ht-((v-mn)/r)*(ht-6)+3].join(',')).join(' ');\n return h('svg', {width: w, height: ht, style:{overflow:'visible', display:'block'}},\n h('polyline', {points: pts, fill:'none', stroke: color || '#c0c1ff', strokeWidth: 2, strokeLinejoin:'round', strokeLinecap:'round'})\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 1) FORECAST DASHBOARD\n// ═══════════════════════════════════════════════════════════════════════════════\nexport function ForecastDashboard({onOpenDeal}) {\n const { Icon, Btn, Spinner } = N();\n const [period, setPeriod] = useState('');\n const [forecast, setForecast] = useState(null);\n const [board, setBoard] = useState(null);\n const [aging, setAging] = useState(null);\n const [velocity, setVelocity] = useState(null);\n const [conversion, setConversion] = useState(null);\n const [snapshots, setSnapshots] = useState(null);\n const [capturing, setCapturing] = useState(false);\n\n const getJSON = (u) => fetch(u).then(r => r.json()).catch(() => null);\n const loadCore = useCallback(() => {\n getJSON('/api/crm/forecast').then(d => setForecast(d || {}));\n getJSON('/api/crm/aging').then(d => setAging(d || {}));\n getJSON('/api/crm/velocity').then(d => setVelocity(d || {}));\n getJSON('/api/crm/conversion').then(d => setConversion(d || {}));\n getJSON('/api/crm/snapshots').then(d => setSnapshots(Array.isArray(d) ? d : []));\n }, []);\n const loadBoard = useCallback(() => {\n const u = '/api/crm/leaderboard' + (period ? '?period=' + encodeURIComponent(period) : '');\n getJSON(u).then(d => setBoard(Array.isArray(d) ? d : []));\n }, [period]);\n useEffect(() => { loadCore(); }, [loadCore]);\n useEffect(() => { loadBoard(); }, [loadBoard]);\n\n const capture = async () => {\n setCapturing(true);\n await fetch('/api/crm/snapshots', {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'}).catch(()=>{});\n setCapturing(false);\n getJSON('/api/crm/snapshots').then(d => setSnapshots(Array.isArray(d) ? d : []));\n };\n\n if (forecast === null) return h('div', {className:'glass-panel rounded-xl p-12 flex items-center justify-center'}, h(Spinner,{size:20}));\n\n const byStage = Array.isArray(forecast.by_stage) ? forecast.by_stage : [];\n const commit = forecast.commit || {deal_count:0, amount:0, weighted_amount:0};\n const bestCase = forecast.best_case || {deal_count:0, amount:0, weighted_amount:0};\n const totalOpen = forecast.total_open || {deal_count:0, amount:0, weighted_amount:0};\n const wonRollup = forecast.won || null;\n const maxStageW = Math.max(1, ...byStage.map(s => Number(s.weighted_amount)||0));\n\n // Roll-up cards: commit / best-case / total-open (+ won if the API returns it).\n const card = (label, bucket, icon, accent, tint) => h('div', {className:'rounded-xl border border-border-subtle bg-surface-container-lowest p-4 flex flex-col gap-1'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name: icon, size:15, className: accent}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, label)\n ),\n h('div', {className:'text-[22px] font-extrabold text-on-surface font-mono-data leading-none mt-1'}, fmtMoney(bucket.weighted_amount)),\n h('div', {className:'text-[11px] text-text-muted'}, 'weighted \\\\u00B7 ' + fmtMoney(bucket.amount) + ' total'),\n h('div', {className:'text-[11px] ' + accent + ' font-semibold'}, (Number(bucket.deal_count)||0) + ' deal' + ((Number(bucket.deal_count)||0)===1?'':'s'))\n );\n\n return h('div', {className:'space-y-lg'},\n\n // Roll-up forecast cards\n h('div', {className:'grid grid-cols-1 sm:grid-cols-2 ' + (wonRollup ? 'lg:grid-cols-4' : 'lg:grid-cols-3') + ' gap-md'},\n card('Commit', commit, 'verified', 'text-secondary'),\n card('Best case', bestCase, 'trending_up', 'text-tertiary'),\n card('Total open', totalOpen, 'monitoring', 'text-primary'),\n wonRollup && card('Won', wonRollup, 'trophy', 'text-secondary')\n ),\n\n // Weighted pipeline by stage\n h(Section, {title:'Weighted pipeline by stage', icon:'bar_chart', accent:'text-primary',\n sub:'Open deals only \\\\u00B7 weighted = amount \\\\u00D7 probability'},\n byStage.length === 0\n ? EmptyNote('No open deals in the pipeline yet.')\n : h('div', {className:'space-y-2'},\n byStage.map(s => h('div', {key:s.stage, className:'flex items-center gap-2'},\n h('div', {className:'flex items-center gap-1.5 flex-shrink-0', style:{width:120}},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + stMeta(s.stage).dot}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-wider ' + stMeta(s.stage).accent}, stMeta(s.stage).label)\n ),\n h('div', {className:'flex-1 h-5 bg-surface-container-high rounded overflow-hidden relative'},\n h('div', {className:'h-full rounded transition-all duration-500', style:{width: ((Number(s.weighted_amount)||0)/maxStageW*100) + '%', background: stMeta(s.stage).bar}})\n ),\n h('div', {className:'flex-shrink-0 text-right', style:{width:118}},\n h('span', {className:'text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(s.weighted_amount)),\n h('span', {className:'text-[10px] text-text-muted font-mono-data'}, ' / ' + fmtMoney(s.amount))\n ),\n h('div', {className:'flex-shrink-0 text-[10px] text-text-muted font-mono-data text-right', style:{width:40}}, (Number(s.deal_count)||0) + 'd')\n ))\n )\n ),\n\n // Owner leaderboard\n h(Section, {title:'Owner leaderboard', icon:'leaderboard', accent:'text-tertiary',\n sub: period ? 'Won credited to ' + period : 'Won (all-time) + live open pipeline',\n right: h('div', {className:'flex items-center gap-2'},\n h('input', {type:'text', value: period, onChange: e => setPeriod(e.target.value), placeholder: currentQuarter(),\n className:'w-28 bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none font-mono-data'}),\n period && h('button', {onClick: () => setPeriod(''), className:'text-[11px] text-text-muted hover:text-on-surface'}, 'Clear')\n )},\n board === null\n ? h('div', {className:'flex items-center justify-center py-6'}, h(Spinner,{size:16}))\n : board.length === 0\n ? EmptyNote('No owner data yet — assign owners to deals to populate the leaderboard.')\n : h('div', {className:'overflow-hidden rounded-lg border border-border-subtle'},\n h('div', {className:'grid grid-cols-12 gap-2 px-3 py-2 text-[10px] uppercase tracking-widest text-text-muted bg-surface-container/40 font-bold'},\n h('div', {className:'col-span-1'}, '#'),\n h('div', {className:'col-span-4'}, 'Owner'),\n h('div', {className:'col-span-2 text-right'}, 'Won'),\n h('div', {className:'col-span-2 text-right'}, 'Open'),\n h('div', {className:'col-span-3 text-right'}, 'Weighted open')\n ),\n board.map((r,i) => h('div', {key: (r.owner||'') + i, className:'grid grid-cols-12 gap-2 px-3 py-2 items-center border-t border-border-subtle/50'},\n h('div', {className:'col-span-1 text-[12px] font-mono-data text-text-muted'}, r.rank != null ? r.rank : (i+1)),\n h('div', {className:'col-span-4 flex items-center gap-2 min-w-0'},\n h('span', {className:'w-6 h-6 rounded-full flex items-center justify-center text-[9px] font-bold flex-shrink-0', style:{background:colorFromName(ownerLabel(r.owner))+'33', color:colorFromName(ownerLabel(r.owner))}}, initialsOf(ownerLabel(r.owner))),\n h('span', {className:'text-[12px] font-semibold text-on-surface truncate'}, ownerLabel(r.owner))\n ),\n h('div', {className:'col-span-2 text-right'},\n h('div', {className:'text-[12px] font-mono-data font-bold text-secondary'}, fmtMoney(r.won_amount)),\n h('div', {className:'text-[10px] text-text-muted font-mono-data'}, (Number(r.won_count)||0) + ' won')\n ),\n h('div', {className:'col-span-2 text-right'},\n h('div', {className:'text-[12px] font-mono-data text-on-surface'}, fmtMoney(r.open_amount)),\n h('div', {className:'text-[10px] text-text-muted font-mono-data'}, (Number(r.open_count)||0) + ' open')\n ),\n h('div', {className:'col-span-3 text-right text-[12px] font-mono-data text-primary'}, fmtMoney(r.open_weighted_amount))\n ))\n )\n ),\n\n // Aging buckets + stuck deals\n h(AgingPanel, {aging, onOpenDeal}),\n\n // Velocity\n h(VelocityPanel, {velocity}),\n\n // Conversion funnel\n h(ConversionPanel, {conversion}),\n\n // Snapshot trend\n h(SnapshotPanel, {snapshots, capturing, onCapture: capture}),\n\n // Quota panel\n h(QuotaPanel, {})\n );\n}\n\nfunction AgingPanel({aging, onOpenDeal}) {\n const { Spinner } = N();\n if (aging === null) return h(Section, {title:'Deal aging', icon:'schedule', accent:'text-primary'}, h('div', {className:'flex items-center justify-center py-6'}, h(Spinner,{size:16})));\n const buckets = Array.isArray(aging.buckets) ? aging.buckets : [];\n const stuck = Array.isArray(aging.stuck) ? aging.stuck : [];\n const maxB = Math.max(1, ...buckets.map(b => Number(b.amount)||0));\n const bucketColor = {'0-7':'#4edea3','8-30':'#c0c1ff','31-90':'#d0bcff','90+':'#ffb4ab'};\n return h(Section, {title:'Deal aging', icon:'schedule', accent:'text-primary',\n sub:'Open deals bucketed by days since last activity \\\\u00B7 ' + (Number(aging.total_open)||0) + ' open'},\n buckets.length === 0\n ? EmptyNote('No open deals to age.')\n : h('div', {className:'space-y-2'},\n buckets.map(b => h(HBar, {key:b.bucket, label: b.bucket + ' days', value: b.amount, max: maxB,\n color: bucketColor[b.bucket] || '#c0c1ff', valueText: fmtMoney(b.amount) + ' \\\\u00B7 ' + (Number(b.deal_count)||0)}))\n ),\n h('div', {className:'pt-3 mt-1 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2'}, 'Stuck deals (31+ days idle)'),\n stuck.length === 0\n ? EmptyNote('Nothing stuck — every open deal had activity in the last 30 days.')\n : h('div', {className:'space-y-1.5'},\n stuck.slice(0,12).map(d => h('button', {key:d.id, onClick: () => onOpenDeal && onOpenDeal(d.id),\n className:'w-full flex items-center gap-2 text-left bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 hover:border-primary/40 transition-all'},\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, d.company || d.title || 'Deal'),\n h('div', {className:'text-[10px]'},\n h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider border ' + stMeta(d.stage).chip}, stMeta(d.stage).label),\n d.owner && h('span', {className:'text-text-muted ml-1.5'}, ownerLabel(d.owner))\n )\n ),\n h('div', {className:'flex-shrink-0 text-right'},\n h('div', {className:'text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(d.amount)),\n h('div', {className:'text-[10px] text-error font-mono-data'}, (Number(d.days_idle)||0) + 'd idle')\n )\n ))\n )\n )\n );\n}\n\nfunction VelocityPanel({velocity}) {\n const { Icon, Spinner } = N();\n if (velocity === null) return h(Section, {title:'Stage velocity', icon:'speed', accent:'text-tertiary'}, h('div', {className:'flex items-center justify-center py-6'}, h(Spinner,{size:16})));\n const byStage = (Array.isArray(velocity.by_stage) ? velocity.by_stage : []).filter(s => s.avg_days_in_stage != null);\n const cycle = velocity.avg_sales_cycle_days;\n const maxD = Math.max(1, ...byStage.map(s => Number(s.avg_days_in_stage)||0));\n return h(Section, {title:'Stage velocity', icon:'speed', accent:'text-tertiary',\n sub:'Average days a deal spends in each stage',\n right: cycle != null && h('div', {className:'text-right'},\n h('div', {className:'text-[18px] font-extrabold text-on-surface font-mono-data leading-none'}, cycle + 'd'),\n h('div', {className:'text-[10px] text-text-muted'}, 'avg sales cycle' + (velocity.won_deals_measured ? ' \\\\u00B7 ' + velocity.won_deals_measured + ' won' : ''))\n )},\n byStage.length === 0\n ? EmptyNote('No stage-history yet — velocity fills in as deals move between stages.')\n : h('div', {className:'space-y-2'},\n byStage.map(s => h(HBar, {key:s.stage, label: stMeta(s.stage).label, value: s.avg_days_in_stage, max: maxD,\n color: stMeta(s.stage).bar, valueText: (Number(s.avg_days_in_stage)||0) + 'd \\\\u00B7 n' + (Number(s.sample_size)||0)}))\n )\n );\n}\n\nfunction ConversionPanel({conversion}) {\n const { Icon, Spinner } = N();\n if (conversion === null) return h(Section, {title:'Stage conversion', icon:'filter_alt', accent:'text-secondary'}, h('div', {className:'flex items-center justify-center py-6'}, h(Spinner,{size:16})));\n const stages = Array.isArray(conversion.stages) ? conversion.stages : [];\n const transitions = Array.isArray(conversion.transitions) ? conversion.transitions : [];\n const maxReached = Math.max(1, ...stages.map(s => Number(s.reached)||0));\n return h(Section, {title:'Stage conversion', icon:'filter_alt', accent:'text-secondary',\n sub:'How many deals reach each stage, and the stage\\\\u2192stage rate'},\n stages.length === 0 || maxReached <= 1 && transitions.every(t => t.conversion_pct == null)\n ? EmptyNote('Not enough stage history to compute conversion yet.')\n : h('div', {className:'space-y-3'},\n // Funnel — reached counts per stage\n h('div', {className:'space-y-2'},\n stages.map(s => h(HBar, {key:s.stage, label: stMeta(s.stage).label, value: s.reached, max: maxReached,\n color: stMeta(s.stage).bar, valueText: (Number(s.reached)||0) + ' deals'}))\n ),\n // Transition rates\n transitions.length > 0 && h('div', {className:'flex flex-wrap gap-2 pt-1'},\n transitions.map((t,i) => h('div', {key:i, className:'flex items-center gap-1.5 bg-surface-container-lowest border border-border-subtle rounded-lg px-2.5 py-1.5'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-wider ' + stMeta(t.from_stage).accent}, stMeta(t.from_stage).label),\n h(Icon, {name:'arrow_forward', size:12, className:'text-text-muted'}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-wider ' + stMeta(t.to_stage).accent}, stMeta(t.to_stage).label),\n h('span', {className:'text-[12px] font-mono-data font-bold ' + (t.conversion_pct != null && Number(t.conversion_pct) >= 50 ? 'text-secondary' : 'text-on-surface') + ' ml-1'}, pct(t.conversion_pct))\n ))\n )\n )\n );\n}\n\nfunction SnapshotPanel({snapshots, capturing, onCapture}) {\n const { Icon, Btn, Spinner } = N();\n // Group snapshot rows (one per stage per date) into per-date totals for the trend.\n const byDate = {};\n (snapshots || []).forEach(r => {\n const d = r.snapshot_date;\n if (!byDate[d]) byDate[d] = {date:d, total_amount:0, weighted_amount:0, deal_count:0};\n byDate[d].total_amount += Number(r.total_amount)||0;\n byDate[d].weighted_amount += Number(r.weighted_amount)||0;\n byDate[d].deal_count += Number(r.deal_count)||0;\n });\n const days = Object.values(byDate).sort((a,b) => String(a.date).localeCompare(String(b.date)));\n const latest = days.length ? days[days.length-1] : null;\n const spark = days.map(d => d.weighted_amount);\n return h(Section, {title:'Pipeline snapshot trend', icon:'show_chart', accent:'text-primary',\n sub:'Weighted pipeline captured over time',\n right: h(Btn, {onClick: onCapture, variant:'secondary', size:'sm', disabled: capturing},\n capturing ? h(Spinner,{size:13}) : h(Icon,{name:'camera',size:14}), 'Capture snapshot')},\n snapshots === null\n ? h('div', {className:'flex items-center justify-center py-6'}, h(Spinner,{size:16}))\n : days.length === 0\n ? EmptyNote('No snapshots captured yet — click \\\\u201CCapture snapshot\\\\u201D to record today\\\\u2019s pipeline.')\n : days.length === 1\n ? h('div', {className:'flex items-center justify-between bg-surface-container-lowest border border-border-subtle rounded-lg px-4 py-3'},\n h('div', null,\n h('div', {className:'text-[11px] text-text-muted'}, days[0].date),\n h('div', {className:'text-[18px] font-extrabold text-on-surface font-mono-data'}, fmtMoney(days[0].weighted_amount))\n ),\n h('div', {className:'text-[11px] text-text-muted text-right'}, 'One snapshot so far \\\\u2014', h('br'), 'capture again tomorrow to see a trend.')\n )\n : h('div', {className:'space-y-3'},\n h('div', {className:'flex items-end justify-between gap-4'},\n h('div', null,\n h('div', {className:'text-[10px] text-text-muted'}, 'Latest weighted (' + (latest ? latest.date : '') + ')'),\n h('div', {className:'text-[22px] font-extrabold text-on-surface font-mono-data leading-none'}, fmtMoney(latest ? latest.weighted_amount : 0))\n ),\n h(MiniSpark, {data: spark, color:'#c0c1ff', width: 240, height: 44})\n ),\n h('div', {className:'flex flex-wrap gap-1.5'},\n days.slice(-8).map(d => h('div', {key:d.date, className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1'},\n h('div', {className:'text-[9px] text-text-muted font-mono-data'}, String(d.date).slice(5)),\n h('div', {className:'text-[11px] font-mono-data font-bold text-on-surface'}, fmtMoney(d.weighted_amount))\n ))\n )\n )\n );\n}\n\nfunction QuotaPanel() {\n const { Icon, Btn, Spinner } = N();\n const [period, setPeriod] = useState(currentQuarter());\n const [rows, setRows] = useState(null);\n const [draft, setDraft] = useState({owner:'', target_amount:''});\n const [busy, setBusy] = useState(false);\n\n const load = useCallback(() => {\n fetch('/api/crm/quota?period=' + encodeURIComponent(period)).then(r => r.json())\n .then(d => setRows(Array.isArray(d) ? d : []))\n .catch(() => setRows([]));\n }, [period]);\n useEffect(() => { load(); }, [load]);\n\n const inferType = (p) => /Q[1-4]$/i.test(p) ? 'quarter' : (/^\\\\d{4}-\\\\d{2}$/.test(p) ? 'month' : (/^\\\\d{4}$/.test(p) ? 'year' : 'quarter'));\n const save = async () => {\n const owner = String(draft.owner).trim();\n if (!owner || !period.trim()) return;\n setBusy(true);\n await fetch('/api/crm/quota', {method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({owner, period: period.trim(), period_type: inferType(period.trim()), target_amount: Number(draft.target_amount)||0})}).catch(()=>{});\n setBusy(false); setDraft({owner:'', target_amount:''}); load();\n };\n\n return h(Section, {title:'Quota attainment', icon:'target', accent:'text-secondary',\n sub:'Closed-won vs target per owner',\n right: h('div', {className:'flex items-center gap-2'},\n h('input', {type:'text', value: period, onChange: e => setPeriod(e.target.value), placeholder: currentQuarter(),\n className:'w-28 bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none font-mono-data'}),\n h('button', {onClick: () => setPeriod(currentQuarter()), className:'text-[11px] text-text-muted hover:text-on-surface', title:'This quarter'}, 'Qtr'),\n h('button', {onClick: () => setPeriod(currentMonth()), className:'text-[11px] text-text-muted hover:text-on-surface', title:'This month'}, 'Mo')\n )},\n // Set-target row\n h('div', {className:'flex items-end gap-2 bg-surface-container-lowest border border-border-subtle rounded-lg p-2.5'},\n h('div', {className:'flex-1 flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Owner'),\n h('input', {type:'text', value: draft.owner, onChange: e => setDraft(d => ({...d, owner: e.target.value})), placeholder:'owner@company.com',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'w-32 flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Target (USD)'),\n h('input', {type:'number', value: draft.target_amount, onChange: e => setDraft(d => ({...d, target_amount: e.target.value})), placeholder:'100000',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('button', {onClick: save, disabled: busy || !String(draft.owner).trim(),\n className:'flex-shrink-0 px-3 py-1.5 rounded-md bg-secondary text-on-secondary text-[12px] font-semibold disabled:opacity-40 hover:bg-secondary/90 flex items-center gap-1'},\n busy ? h(Spinner,{size:12}) : h(Icon,{name:'save',size:14}), 'Set')\n ),\n // Attainment rows\n rows === null\n ? h('div', {className:'flex items-center justify-center py-6'}, h(Spinner,{size:16}))\n : rows.length === 0\n ? EmptyNote('No quota targets for ' + period + ' yet — set one above.')\n : h('div', {className:'space-y-2'},\n rows.map((r,i) => {\n const att = r.attainment_pct == null ? null : Number(r.attainment_pct);\n const barW = att == null ? 0 : Math.min(100, Math.max(2, att));\n const barColor = att == null ? '#64748b' : (att >= 100 ? '#4edea3' : att >= 60 ? '#c0c1ff' : '#d0bcff');\n return h('div', {key: (r.owner||'') + i, className:'bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2'},\n h('div', {className:'flex items-center justify-between gap-2 mb-1.5'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className:'w-6 h-6 rounded-full flex items-center justify-center text-[9px] font-bold flex-shrink-0', style:{background:colorFromName(ownerLabel(r.owner))+'33', color:colorFromName(ownerLabel(r.owner))}}, initialsOf(ownerLabel(r.owner))),\n h('span', {className:'text-[12px] font-semibold text-on-surface truncate'}, ownerLabel(r.owner))\n ),\n h('div', {className:'flex items-center gap-2 flex-shrink-0 text-right'},\n h('span', {className:'text-[12px] font-mono-data font-bold text-secondary'}, fmtMoney(r.won_amount)),\n h('span', {className:'text-[10px] text-text-muted font-mono-data'}, '/ ' + fmtMoney(r.target_amount)),\n h('span', {className:'text-[12px] font-mono-data font-bold ' + (att != null && att >= 100 ? 'text-secondary' : 'text-on-surface'), style:{width:54, display:'inline-block'}}, pct(att))\n )\n ),\n h('div', {className:'h-2 bg-surface-container-high rounded overflow-hidden'},\n h('div', {className:'h-full rounded transition-all duration-500', style:{width: barW + '%', background: barColor}})\n ),\n Number(r.gap) > 0 && h('div', {className:'text-[10px] text-text-muted mt-1 font-mono-data'}, fmtMoney(r.gap) + ' to target')\n );\n })\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 2) LEADS DESK\n// ═══════════════════════════════════════════════════════════════════════════════\nconst GRADE_META = {\n A: {chip:'bg-secondary/15 text-secondary border-secondary/40'},\n B: {chip:'bg-primary/10 text-primary border-primary/30'},\n C: {chip:'bg-tertiary/10 text-tertiary border-tertiary/30'},\n D: {chip:'bg-surface-container-high text-on-surface-variant border-border-subtle'},\n};\nconst gradeMeta = (g) => GRADE_META[String(g||'').toUpperCase()] || {chip:'bg-surface-container-high text-text-muted border-border-subtle'};\nconst SLA_META = {\n met: {label:'SLA met', chip:'bg-secondary/15 text-secondary border-secondary/40'},\n missed: {label:'SLA missed', chip:'bg-error/10 text-error border-error/30'},\n pending: {label:'SLA pending', chip:'bg-tertiary/10 text-tertiary border-tertiary/30'},\n};\nconst STATUS_LIST = ['new','working','qualified','disqualified'];\nconst statusChip = (s) => ({\n new:'bg-surface-container-high text-on-surface-variant border-border-subtle',\n working:'bg-primary/10 text-primary border-primary/30',\n qualified:'bg-secondary/15 text-secondary border-secondary/40',\n disqualified:'bg-error/10 text-error border-error/30',\n})[s] || 'bg-surface-container-high text-text-muted border-border-subtle';\n\nexport function LeadsDesk({onOpenContact}) {\n const { Icon, Btn, Spinner } = N();\n const [leads, setLeads] = useState(null);\n const [filters, setFilters] = useState({grade:'', owner:'', status:''});\n const [busyEmail, setBusyEmail] = useState('');\n const [assignFor, setAssignFor] = useState('');\n const [assignVal, setAssignVal] = useState('');\n\n const load = useCallback(() => {\n const qs = [];\n if (filters.grade) qs.push('grade=' + encodeURIComponent(filters.grade));\n if (filters.owner) qs.push('owner=' + encodeURIComponent(filters.owner));\n if (filters.status) qs.push('status=' + encodeURIComponent(filters.status));\n fetch('/api/crm/leads' + (qs.length ? '?' + qs.join('&') : '')).then(r => r.json())\n .then(d => setLeads(Array.isArray(d) ? d : []))\n .catch(() => setLeads([]));\n }, [filters]);\n useEffect(() => { load(); }, [load]);\n\n // Owner suggestions for assignment: distinct owners already seen on leads (free text otherwise).\n const ownerOptions = Array.from(new Set((leads || []).map(l => l.owner).filter(Boolean).map(String)));\n\n const act = async (email, path, body) => {\n setBusyEmail(email);\n await fetch('/api/crm/leads/' + encodeURIComponent(email) + '/' + path, {method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(body || {})}).catch(()=>{});\n setBusyEmail('');\n load();\n };\n const submitAssign = async (email) => {\n const owner = String(assignVal).trim();\n if (!owner) return;\n setAssignFor(''); setAssignVal('');\n await act(email, 'assign', {owner});\n };\n\n const fbtn = (k, v, label) => h('button', {key: k+v, onClick: () => setFilters(f => ({...f, [k]: f[k]===v ? '' : v})),\n className:'px-2 py-0.5 rounded-md text-[11px] font-semibold border ' + (filters[k]===v ? 'bg-primary text-white border-primary' : 'bg-surface-container border-border-subtle text-text-muted hover:text-on-surface')}, label);\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Lead ops desk', icon:'filter_alt', accent:'text-primary',\n sub:'Grade, route and SLA-track leads derived from your intent signals',\n right: h('div', {className:'flex items-center gap-2'},\n N().Spinner && leads === null && h(Spinner,{size:14}),\n h(Btn, {onClick: load, variant:'secondary', size:'sm'}, h(Icon,{name:'refresh',size:14}), 'Refresh')\n )},\n // Filters\n h('div', {className:'flex flex-wrap items-center gap-3 mb-1'},\n h('div', {className:'flex items-center gap-1.5'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Grade'),\n ['A','B','C','D'].map(g => fbtn('grade', g, g))\n ),\n h('div', {className:'flex items-center gap-1.5'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Status'),\n STATUS_LIST.map(s => fbtn('status', s, s))\n ),\n h('input', {type:'text', value: filters.owner, onChange: e => setFilters(f => ({...f, owner: e.target.value})), placeholder:'Filter owner\\\\u2026',\n className:'w-44 bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'}),\n (filters.grade || filters.owner || filters.status) && h('button', {onClick: () => setFilters({grade:'', owner:'', status:''}), className:'text-[11px] text-text-muted hover:text-on-surface'}, 'Clear all')\n ),\n // Table\n leads === null\n ? h('div', {className:'flex items-center justify-center py-10'}, h(Spinner,{size:18}))\n : leads.length === 0\n ? h('div', {className:'px-4 py-10 text-center text-[13px] text-text-muted'},\n (filters.grade || filters.owner || filters.status)\n ? 'No leads match these filters.'\n : 'No intent signals captured yet \\\\u2014 leads appear here once your email/calendar integrations detect prospect activity.')\n : h('div', {className:'overflow-hidden rounded-lg border border-border-subtle'},\n h('div', {className:'grid grid-cols-12 gap-2 px-3 py-2 text-[10px] uppercase tracking-widest text-text-muted bg-surface-container/40 font-bold'},\n h('div', {className:'col-span-1'}, 'Grade'),\n h('div', {className:'col-span-3'}, 'Lead'),\n h('div', {className:'col-span-2'}, 'Signals'),\n h('div', {className:'col-span-2'}, 'Owner'),\n h('div', {className:'col-span-2'}, 'Status / SLA'),\n h('div', {className:'col-span-2 text-right'}, 'Actions')\n ),\n leads.map(l => h(LeadRow, {key: l.lead_email, lead: l, busy: busyEmail === l.lead_email,\n onOpenContact, onAct: act,\n assigning: assignFor === l.lead_email, assignVal, setAssignVal,\n onStartAssign: () => { setAssignFor(l.lead_email); setAssignVal(l.owner || ''); },\n onCancelAssign: () => { setAssignFor(''); setAssignVal(''); },\n onSubmitAssign: () => submitAssign(l.lead_email),\n ownerOptions}))\n )\n )\n );\n}\n\nfunction LeadRow({lead, busy, onOpenContact, onAct, assigning, assignVal, setAssignVal, onStartAssign, onCancelAssign, onSubmitAssign, ownerOptions}) {\n const { Icon, Spinner } = N();\n const l = lead;\n const sla = l.sla ? (SLA_META[l.sla] || null) : null;\n const name = l.lead_name || l.company || l.lead_email;\n return h('div', {className:'grid grid-cols-12 gap-2 px-3 py-2.5 items-center border-t border-border-subtle/50'},\n // Grade\n h('div', {className:'col-span-1'},\n l.grade\n ? h('span', {className:'inline-flex items-center justify-center w-7 h-7 rounded-md text-[13px] font-extrabold border ' + gradeMeta(l.grade).chip}, String(l.grade).toUpperCase())\n : h('button', {onClick: () => onAct(l.lead_email, 'grade'), disabled: busy, title:'Grade this lead',\n className:'inline-flex items-center justify-center w-7 h-7 rounded-md text-[11px] border border-dashed border-border-subtle text-text-muted hover:text-on-surface hover:border-primary/40'},\n busy ? h(Spinner,{size:12}) : h(Icon,{name:'auto_awesome',size:14}))\n ),\n // Lead\n h('button', {onClick: () => onOpenContact && onOpenContact(l.lead_email), className:'col-span-3 flex items-center gap-2 min-w-0 text-left'},\n h('span', {className:'w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0', style:{background:colorFromName(name)+'33', color:colorFromName(name)}}, initialsOf(name)),\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate hover:text-primary'}, name),\n h('div', {className:'text-[10px] text-text-muted truncate'}, l.lead_email)\n )\n ),\n // Signals\n h('div', {className:'col-span-2'},\n h('div', {className:'text-[12px] text-on-surface font-mono-data'}, (Number(l.signal_count)||0) + ' signal' + ((Number(l.signal_count)||0)===1?'':'s')),\n h('div', {className:'text-[10px] text-text-muted'},\n (l.max_strength != null ? 'str ' + l.max_strength : '') + (l.last_signal_at ? (l.max_strength != null ? ' \\\\u00B7 ' : '') + fmtRel(l.last_signal_at) : ''))\n ),\n // Owner\n h('div', {className:'col-span-2 min-w-0'},\n assigning\n ? h('div', {className:'flex items-center gap-1'},\n h('input', {type:'text', value: assignVal, list:'lead-owner-options', onChange: e => setAssignVal(e.target.value), placeholder:'owner\\\\u2026', autoFocus:true,\n onKeyDown: e => { if (e.key === 'Enter') onSubmitAssign(); if (e.key === 'Escape') onCancelAssign(); },\n className:'w-full bg-surface-container-lowest border border-primary/40 rounded-md px-1.5 py-1 text-[11px] text-on-surface focus:outline-none'}),\n h('datalist', {id:'lead-owner-options'}, (ownerOptions||[]).map(o => h('option', {key:o, value:o}))),\n h('button', {onClick: onSubmitAssign, className:'flex-shrink-0 text-secondary hover:text-secondary/80', title:'Save'}, h(Icon,{name:'check',size:15})),\n h('button', {onClick: onCancelAssign, className:'flex-shrink-0 text-text-muted hover:text-on-surface', title:'Cancel'}, h(Icon,{name:'close',size:15}))\n )\n : h('button', {onClick: onStartAssign, className:'flex items-center gap-1.5 text-left max-w-full group', title:'Assign owner'},\n l.owner\n ? h('span', {className:'text-[12px] text-on-surface truncate group-hover:text-primary'}, l.owner)\n : h('span', {className:'text-[11px] text-text-muted italic group-hover:text-primary'}, 'Assign\\\\u2026'),\n h(Icon, {name:'edit', size:11, className:'text-text-muted opacity-0 group-hover:opacity-100 flex-shrink-0'})\n )\n ),\n // Status / SLA\n h('div', {className:'col-span-2 flex flex-col gap-1 items-start'},\n h('select', {value: l.status || 'new', onChange: e => onAct(l.lead_email, 'status', {status: e.target.value}),\n className:'text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded-full border focus:outline-none cursor-pointer ' + statusChip(l.status || 'new')},\n STATUS_LIST.map(s => h('option', {key:s, value:s, className:'bg-surface text-on-surface normal-case'}, s))\n ),\n sla && h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider border ' + sla.chip}, sla.label)\n ),\n // Actions\n h('div', {className:'col-span-2 flex items-center justify-end gap-1'},\n h('button', {onClick: () => onAct(l.lead_email, 'grade'), disabled: busy, title:'Re-grade',\n className:'w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40'}, h(Icon,{name:'auto_awesome',size:14})),\n h('button', {onClick: () => onAct(l.lead_email, 'respond'), disabled: busy || !!l.first_response_at, title: l.first_response_at ? 'Responded ' + fmtRel(l.first_response_at) : 'Mark responded',\n className:'w-7 h-7 rounded-md flex items-center justify-center border ' + (l.first_response_at ? 'border-secondary/40 text-secondary' : 'border-border-subtle text-text-muted hover:text-secondary hover:border-secondary/40')}, h(Icon,{name: l.first_response_at ? 'mark_email_read' : 'reply', size:14})),\n busy && h(Spinner,{size:13})\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 3) PRODUCTIVITY PANEL\n// ═══════════════════════════════════════════════════════════════════════════════\nexport function ProductivityPanel() {\n const { Icon } = N();\n const [tab, setTab] = useState('templates');\n return h('div', {className:'space-y-lg'},\n h('div', {className:'inline-flex rounded-lg border border-border-subtle overflow-hidden'},\n [['templates','Templates & sequences','mail'],['dedupe','Deduplicate','merge']].map(([v,label,ic]) => h('button', {key:v, onClick: () => setTab(v),\n className:'px-3 py-1.5 text-[12px] font-semibold flex items-center gap-1.5 ' + (tab===v ? 'bg-primary text-white' : 'bg-surface-container text-text-muted hover:text-on-surface')},\n h(Icon,{name:ic,size:15}), label))\n ),\n tab === 'templates' ? h(TemplatesView, null) : h(DedupeView, null)\n );\n}\n\n// ─── Templates + sequences ──────────────────────────────────────────────────────\nconst SAMPLE_CTX = {first_name:'Alex', last_name:'Rivera', company:'Acme Corp', deal_title:'Q3 Expansion', owner:'you@company.com'};\n\nfunction TemplatesView() {\n const { Icon, Btn, Spinner } = N();\n const [templates, setTemplates] = useState(null);\n const [editing, setEditing] = useState(null); // template object or {} for new\n const [preview, setPreview] = useState(null); // {id, subject, body}\n const [previewBusy, setPreviewBusy] = useState(false);\n\n const load = useCallback(() => {\n fetch('/api/crm/templates').then(r => r.json()).then(d => setTemplates(Array.isArray(d) ? d : [])).catch(() => setTemplates([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const save = async (tpl) => {\n const body = {name: tpl.name, subject: tpl.subject, body: tpl.body, category: tpl.category};\n if (tpl.id) await fetch('/api/crm/templates/' + tpl.id, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n else await fetch('/api/crm/templates', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n setEditing(null); load();\n };\n const del = async (id) => {\n await fetch('/api/crm/templates/' + id, {method:'DELETE'}).catch(()=>{});\n if (preview && preview.id === id) setPreview(null);\n load();\n };\n const renderPreview = async (tpl) => {\n setPreviewBusy(true);\n const r = await fetch('/api/crm/templates/' + tpl.id + '/render', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(SAMPLE_CTX)}).then(x => x.json()).catch(() => null);\n setPreviewBusy(false);\n if (r && (r.subject != null || r.body != null)) setPreview({id: tpl.id, name: tpl.name, subject: r.subject, body: r.body});\n };\n\n return h('div', {className:'grid grid-cols-1 lg:grid-cols-2 gap-lg'},\n // Templates list\n h(Section, {title:'Email templates', icon:'mail', accent:'text-primary',\n sub:'{{merge_field}} placeholders rendered against sample data',\n right: h(Btn, {onClick: () => setEditing({name:'', subject:'', body:'', category:''}), variant:'primary', size:'sm'}, h(Icon,{name:'add',size:14}), 'New template')},\n templates === null\n ? h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}))\n : templates.length === 0\n ? EmptyNote('No templates yet \\\\u2014 create one to reuse across outreach.')\n : h('div', {className:'space-y-1.5'},\n templates.map(t => h('div', {key:t.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 flex items-center gap-2'},\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, t.name || '(untitled)'),\n h('div', {className:'text-[10px] text-text-muted truncate'}, (t.subject || 'No subject') + (t.category ? ' \\\\u00B7 ' + t.category : ''))\n ),\n h('button', {onClick: () => renderPreview(t), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-tertiary hover:border-tertiary/40', title:'Preview render'}, h(Icon,{name:'visibility',size:14})),\n h('button', {onClick: () => setEditing(t), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Edit'}, h(Icon,{name:'edit',size:14})),\n h('button', {onClick: () => del(t.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Delete'}, h(Icon,{name:'delete',size:14}))\n ))\n ),\n // Editor\n editing && h(TemplateEditor, {tpl: editing, onCancel: () => setEditing(null), onSave: save}),\n // Live render preview\n h('div', {className:'pt-3 mt-1 border-t border-border-subtle'},\n h('div', {className:'flex items-center justify-between mb-1.5'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Render preview'),\n previewBusy && h(Spinner,{size:13})\n ),\n preview\n ? h('div', {className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-3 space-y-1.5'},\n h('div', {className:'text-[10px] text-text-muted'}, 'Sample: ' + Object.entries(SAMPLE_CTX).map(([k,v]) => k + '=' + v).slice(0,3).join(', ') + '\\\\u2026'),\n h('div', {className:'text-[12px] font-bold text-on-surface'}, preview.subject || '(no subject)'),\n h('div', {className:'text-[12px] text-on-surface-variant whitespace-pre-wrap'}, preview.body || '(empty body)')\n )\n : EmptyNote('Click the preview icon on a template to render it with sample merge data.')\n )\n ),\n // Sequences\n h(SequencesView, null)\n );\n}\n\nfunction TemplateEditor({tpl, onCancel, onSave}) {\n const { Icon, Btn } = N();\n const [f, setF] = useState({name: tpl.name||'', subject: tpl.subject||'', body: tpl.body||'', category: tpl.category||''});\n const [busy, setBusy] = useState(false);\n const set = (k,v) => setF(s => ({...s, [k]: v}));\n const submit = async () => { setBusy(true); await onSave({...tpl, ...f}); setBusy(false); };\n const inp = (label, key, ph) => h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, label),\n h('input', {type:'text', value: f[key], onChange: e => set(key, e.target.value), placeholder: ph,\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n );\n return h('div', {className:'mt-2 bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2'},\n h('div', {className:'text-[11px] font-bold text-on-surface'}, tpl.id ? 'Edit template' : 'New template'),\n h('div', {className:'grid grid-cols-2 gap-2'}, inp('Name','name','Welcome email'), inp('Category','category','outreach')),\n inp('Subject','subject','Hi {{first_name}} \\\\u2014 about {{company}}'),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Body'),\n h('textarea', {value: f.body, onChange: e => set('body', e.target.value), rows:4, placeholder:'Hi {{first_name}},\\\\n\\\\nI noticed {{company}} is\\\\u2026',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none resize-none font-mono-data'})\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: submit, variant:'primary', size:'sm', disabled: busy || !String(f.name).trim()}, h(Icon,{name:'save',size:14}), 'Save'),\n h('button', {onClick: onCancel, className:'text-[12px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n );\n}\n\nfunction SequencesView() {\n const { Icon, Btn, Spinner } = N();\n const [sequences, setSequences] = useState(null);\n const [creating, setCreating] = useState(false);\n const [draft, setDraft] = useState({name:'', description:''});\n const [openId, setOpenId] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/crm/sequences').then(r => r.json()).then(d => setSequences(Array.isArray(d) ? d : [])).catch(() => setSequences([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const create = async () => {\n if (!String(draft.name).trim()) return;\n await fetch('/api/crm/sequences', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({name: draft.name.trim(), description: draft.description.trim()})}).catch(()=>{});\n setDraft({name:'', description:''}); setCreating(false); load();\n };\n\n return h(Section, {title:'Sequences', icon:'cadence', accent:'text-tertiary',\n sub:'Multi-step cadences \\\\u00B7 add steps per sequence',\n right: h(Btn, {onClick: () => setCreating(v => !v), variant:'secondary', size:'sm'}, h(Icon,{name: creating ? 'close' : 'add',size:14}), creating ? 'Cancel' : 'New')},\n creating && h('div', {className:'bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2 mb-2'},\n h('input', {type:'text', value: draft.name, onChange: e => setDraft(d => ({...d, name: e.target.value})), placeholder:'Sequence name',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h('input', {type:'text', value: draft.description, onChange: e => setDraft(d => ({...d, description: e.target.value})), placeholder:'Description (optional)',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h(Btn, {onClick: create, variant:'primary', size:'sm', disabled: !String(draft.name).trim()}, h(Icon,{name:'save',size:14}), 'Create sequence')\n ),\n sequences === null\n ? h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}))\n : sequences.length === 0\n ? EmptyNote('No sequences yet \\\\u2014 create one to build a cadence of steps.')\n : h('div', {className:'space-y-1.5'},\n sequences.map(s => h('div', {key:s.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg overflow-hidden'},\n h('button', {onClick: () => setOpenId(openId === s.id ? null : s.id), className:'w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-white/[0.02]'},\n h(Icon, {name: openId === s.id ? 'expand_more' : 'chevron_right', size:16, className:'text-text-muted flex-shrink-0'}),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, s.name || '(untitled)'),\n s.description && h('div', {className:'text-[10px] text-text-muted truncate'}, s.description)\n ),\n h('span', {className:'flex-shrink-0 text-[10px] text-text-muted font-mono-data'}, (Number(s.step_count)||0) + ' step' + ((Number(s.step_count)||0)===1?'':'s')),\n s.active ? null : h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border border-border-subtle text-text-muted'}, 'paused')\n ),\n openId === s.id && h(SequenceSteps, {sequenceId: s.id})\n ))\n )\n );\n}\n\nfunction SequenceSteps({sequenceId}) {\n const { Icon, Btn, Spinner } = N();\n const [steps, setSteps] = useState(null);\n const [adding, setAdding] = useState(false);\n const [draft, setDraft] = useState({channel:'email', delay_days:'0', subject:'', body:''});\n\n const load = useCallback(() => {\n fetch('/api/crm/sequences/' + sequenceId + '/steps').then(r => r.json()).then(d => setSteps(Array.isArray(d) ? d : [])).catch(() => setSteps([]));\n }, [sequenceId]);\n useEffect(() => { load(); }, [load]);\n\n const add = async () => {\n await fetch('/api/crm/sequences/' + sequenceId + '/steps', {method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({channel: draft.channel, delay_days: Number(draft.delay_days)||0, subject: draft.subject.trim(), body: draft.body.trim()})}).catch(()=>{});\n setDraft({channel:'email', delay_days:'0', subject:'', body:''}); setAdding(false); load();\n };\n const chIcon = {email:'mail', call:'call', task:'check_circle'};\n\n return h('div', {className:'border-t border-border-subtle px-3 py-2.5 space-y-2 bg-surface-container/20'},\n steps === null\n ? h('div', {className:'flex items-center justify-center py-3'}, h(Spinner,{size:14}))\n : steps.length === 0\n ? EmptyNote('No steps yet.')\n : h('div', {className:'space-y-1.5'},\n steps.map(st => h('div', {key:st.id, className:'flex items-center gap-2 text-[11px]'},\n h('span', {className:'w-5 h-5 rounded-full bg-surface-container-high flex items-center justify-center text-[10px] font-bold text-on-surface-variant flex-shrink-0'}, st.step_order != null ? st.step_order : '\\\\u00B7'),\n h(Icon, {name: chIcon[st.channel] || 'mail', size:13, className:'text-primary flex-shrink-0'}),\n h('span', {className:'text-on-surface truncate flex-1'}, st.subject || st.body || ('(' + (st.channel||'email') + ' step)')),\n h('span', {className:'text-text-muted font-mono-data flex-shrink-0'}, '+' + (Number(st.delay_days)||0) + 'd')\n ))\n ),\n adding\n ? h('div', {className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-2 space-y-1.5'},\n h('div', {className:'flex gap-1.5'},\n ['email','call','task'].map(c => h('button', {key:c, onClick: () => setDraft(d => ({...d, channel:c})),\n className:'flex-1 px-2 py-1 rounded-md text-[11px] font-semibold flex items-center justify-center gap-1 border ' + (draft.channel===c ? 'bg-primary text-white border-primary' : 'bg-surface-container border-border-subtle text-text-muted hover:text-on-surface')},\n h(Icon,{name: chIcon[c], size:12}), c)),\n h('input', {type:'number', value: draft.delay_days, onChange: e => setDraft(d => ({...d, delay_days: e.target.value})), title:'Delay days',\n className:'w-16 bg-surface-container border border-border-subtle rounded-md px-1.5 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none', placeholder:'days'})\n ),\n h('input', {type:'text', value: draft.subject, onChange: e => setDraft(d => ({...d, subject: e.target.value})), placeholder:'Subject (optional)',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'}),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: add, variant:'primary', size:'sm'}, h(Icon,{name:'add',size:13}), 'Add step'),\n h('button', {onClick: () => setAdding(false), className:'text-[11px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n )\n : h('button', {onClick: () => setAdding(true), className:'text-[11px] text-primary hover:underline flex items-center gap-1 font-semibold'}, h(Icon,{name:'add',size:13}), 'Add step')\n );\n}\n\n// ─── Dedupe + merge ─────────────────────────────────────────────────────────────\nconst DEDUPE_KINDS = [\n {key:'contacts', label:'Contacts', icon:'group', endpoint:'/api/crm/dedupe/contacts', merge:'/api/crm/dedupe/merge-contacts', mergeable:true},\n {key:'accounts', label:'Accounts', icon:'domain', endpoint:'/api/crm/dedupe/accounts', merge:'/api/crm/dedupe/merge-accounts', mergeable:true},\n {key:'deals', label:'Deals', icon:'work', endpoint:'/api/crm/dedupe/deals', merge:null, mergeable:false},\n];\n\nfunction DedupeView() {\n const { Icon } = N();\n const [kind, setKind] = useState('contacts');\n const meta = DEDUPE_KINDS.find(k => k.key === kind);\n return h(Section, {title:'Deduplicate records', icon:'merge', accent:'text-secondary',\n sub:'Likely-duplicate clusters \\\\u00B7 pick a primary and merge the rest into it',\n right: h('div', {className:'inline-flex rounded-lg border border-border-subtle overflow-hidden'},\n DEDUPE_KINDS.map(k => h('button', {key:k.key, onClick: () => setKind(k.key),\n className:'px-2.5 py-1 text-[11px] font-semibold flex items-center gap-1 ' + (kind===k.key ? 'bg-primary text-white' : 'bg-surface-container text-text-muted hover:text-on-surface')},\n h(Icon,{name:k.icon,size:13}), k.label)))},\n h(DedupeClusters, {meta, key: kind})\n );\n}\n\nfunction DedupeClusters({meta}) {\n const { Icon, Btn, Spinner } = N();\n const [clusters, setClusters] = useState(null);\n const [primaryByKey, setPrimaryByKey] = useState({});\n const [busyKey, setBusyKey] = useState('');\n const [confirmKey, setConfirmKey] = useState('');\n\n const load = useCallback(() => {\n setClusters(null);\n fetch(meta.endpoint).then(r => r.json()).then(d => {\n const arr = Array.isArray(d) ? d : [];\n setClusters(arr);\n // Default primary = first (oldest) record in each cluster.\n const defaults = {};\n arr.forEach(c => { const recs = c.records || []; if (recs.length) defaults[c.key] = String(recs[0].id); });\n setPrimaryByKey(defaults);\n }).catch(() => setClusters([]));\n }, [meta.endpoint]);\n useEffect(() => { load(); }, [load]);\n\n const recLabel = (r) => {\n if (meta.key === 'contacts') return ((r.first_name||'') + ' ' + (r.last_name||'')).trim() || r.email || '(contact)';\n if (meta.key === 'accounts') return r.name || r.domain || '(account)';\n return r.title || r.company || r.contact_email || '(deal)';\n };\n const recSub = (r) => {\n if (meta.key === 'contacts') return [r.email, r.title].filter(Boolean).join(' \\\\u00B7 ');\n if (meta.key === 'accounts') return [r.domain, r.industry].filter(Boolean).join(' \\\\u00B7 ');\n return [r.contact_email, r.stage].filter(Boolean).join(' \\\\u00B7 ') + (r.amount != null ? ' \\\\u00B7 ' + fmtMoney(r.amount) : '');\n };\n\n const doMerge = async (cluster) => {\n const primaryId = primaryByKey[cluster.key];\n if (!primaryId) return;\n const dupeIds = (cluster.records || []).map(r => String(r.id)).filter(id => id !== primaryId);\n if (dupeIds.length === 0) return;\n setBusyKey(cluster.key); setConfirmKey('');\n await fetch(meta.merge, {method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({survivor_id: primaryId, duplicate_ids: dupeIds})}).catch(()=>{});\n setBusyKey('');\n load();\n };\n\n if (clusters === null) return h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}));\n if (clusters.length === 0) return EmptyNote('No duplicate ' + meta.label.toLowerCase() + ' detected \\\\u2014 your records look clean.');\n\n return h('div', {className:'space-y-3'},\n clusters.map(c => {\n const recs = c.records || [];\n const primaryId = primaryByKey[c.key];\n const dupeCount = recs.filter(r => String(r.id) !== primaryId).length;\n return h('div', {key: c.key, className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-3 space-y-2'},\n h('div', {className:'flex items-center justify-between gap-2'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className:'text-[11px] font-bold text-on-surface'}, recs.length + ' duplicates'),\n c.reason && h('span', {className:'text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border border-tertiary/30 text-tertiary bg-tertiary/10 font-bold'}, 'by ' + c.reason)\n ),\n meta.mergeable && (\n confirmKey === c.key\n ? h('div', {className:'flex items-center gap-1.5'},\n h('span', {className:'text-[11px] text-text-muted'}, 'Merge ' + dupeCount + ' into primary?'),\n h('button', {onClick: () => doMerge(c), className:'px-2 py-1 rounded-md bg-error text-white text-[11px] font-semibold hover:bg-error/90'}, 'Confirm'),\n h('button', {onClick: () => setConfirmKey(''), className:'text-[11px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n : h('button', {onClick: () => setConfirmKey(c.key), disabled: busyKey === c.key || dupeCount === 0,\n className:'px-2.5 py-1 rounded-md bg-secondary text-on-secondary text-[11px] font-semibold disabled:opacity-40 hover:bg-secondary/90 flex items-center gap-1'},\n busyKey === c.key ? h(Spinner,{size:12}) : h(Icon,{name:'merge',size:13}), 'Merge')\n )\n ),\n h('div', {className:'space-y-1'},\n recs.map(r => {\n const isPrimary = String(r.id) === primaryId;\n return h('label', {key:r.id, className:'flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer border ' + (isPrimary ? 'border-secondary/40 bg-secondary/5' : 'border-border-subtle hover:bg-white/[0.02]')},\n h('input', {type:'radio', name:'primary-' + c.key, checked: isPrimary, onChange: () => setPrimaryByKey(m => ({...m, [c.key]: String(r.id)})), className:'accent-secondary flex-shrink-0'}),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, recLabel(r)),\n h('div', {className:'text-[10px] text-text-muted truncate'}, recSub(r) + (r.created_at ? ' \\\\u00B7 created ' + fmtRel(r.created_at) : ''))\n ),\n isPrimary && h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider font-bold text-secondary'}, 'primary')\n );\n })\n ),\n !meta.mergeable && h('div', {className:'text-[10px] text-text-muted italic'}, 'Deals are surfaced for review only \\\\u2014 merge them manually from the pipeline.')\n );\n })\n );\n}\n `;\n}\n",[389],"c85e404e-5f07-11f1-9bd8-1607ee4eb77e","frontend_crm.ts","71af5516-5b48-11f1-8910-ee650bb23af1",986,["D",1780462245605],"// CRMWorkspace — sales pipeline CRM (board + list + detail). Served at /api/app-crm,\n// dynamically imported by frontend_js.ts and rendered for the 'sales' nav page.\n//\n// Backend endpoints consumed:\n// GET /api/deals (optional ?stage=)\n// GET /api/deals/:id (deal + its contact's intent signals as activity)\n// POST /api/deals (create)\n// PUT /api/deals/:id (edit / drag stage move)\n// DELETE /api/deals/:id\n// POST /api/deals/sync (seed from qualified leads)\n// POST /api/actions (draft outreach email → Approvals inbox)\n//\n// Shared deps from window.__nexus: Icon, Btn, Input, Toggle, Spinner, MetricCard, PageHeader, SectionHeader.\nexport function getCRMJS(): string {\n return `\nimport React, { useState, useEffect, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// Wave 4: pull the heavy CRM analytics/leads/productivity surfaces from the lazy\n// /api/app-crm2 module so neither file exceeds the 80KB val.town limit.\nconst _crm2 = await import('/api/app-crm2').catch(() => ({}));\nconst _crm2Fallback = (name) => () => h('div', {className:'glass-panel rounded-xl px-4 py-10 text-center text-[13px] text-text-muted'}, name + ' module failed to load.');\nconst ForecastDashboard = _crm2.ForecastDashboard || _crm2Fallback('Forecast');\nconst LeadsDesk = _crm2.LeadsDesk || _crm2Fallback('Leads');\nconst ProductivityPanel = _crm2.ProductivityPanel || _crm2Fallback('Templates');\n\nconst STAGES = ['lead','qualified','proposal','negotiation','won','lost'];\nconst STAGE_META = {\n lead: {label:'Lead', dot:'bg-text-muted', accent:'text-text-muted', chip:'bg-surface-container-high text-on-surface-variant border-border-subtle'},\n qualified: {label:'Qualified', dot:'bg-primary', accent:'text-primary', chip:'bg-primary/10 text-primary border-primary/30'},\n proposal: {label:'Proposal', dot:'bg-tertiary', accent:'text-tertiary', chip:'bg-tertiary/10 text-tertiary border-tertiary/30'},\n negotiation: {label:'Negotiation', dot:'bg-secondary', accent:'text-secondary', chip:'bg-secondary/10 text-secondary border-secondary/30'},\n won: {label:'Won', dot:'bg-secondary', accent:'text-secondary', chip:'bg-secondary/15 text-secondary border-secondary/40'},\n lost: {label:'Lost', dot:'bg-error', accent:'text-error', chip:'bg-error/10 text-error border-error/30'},\n};\nconst stMeta = (s) => STAGE_META[s] || STAGE_META.lead;\n\nconst fmtMoney = (n) => {\n const v = Number(n) || 0;\n if (v >= 1000000) return '$' + (v/1000000).toFixed(1).replace(/\\\\.0$/,'') + 'M';\n if (v >= 1000) return '$' + (v/1000).toFixed(1).replace(/\\\\.0$/,'') + 'K';\n return '$' + v.toLocaleString();\n};\nconst fmtRel = (iso) => {\n if (!iso) return '';\n const ms = Date.now() - new Date(iso).getTime();\n if (isNaN(ms)) return '';\n if (ms < 3600000) return Math.max(1, Math.floor(ms/60000)) + 'm ago';\n if (ms < 86400000) return Math.floor(ms/3600000) + 'h ago';\n if (ms < 2592000000) return Math.floor(ms/86400000) + 'd ago';\n return new Date(iso).toLocaleDateString('en-US', {month:'short', day:'numeric'});\n};\nconst initialsOf = (name) => (name||'?').trim().split(/\\\\s+/).slice(0,2).map(s => s[0]||'').join('').toUpperCase() || '?';\nconst colorFromName = (name) => {\n const colors = ['#c0c1ff','#4edea3','#d0bcff','#8083ff','#6ffbbe','#a078ff','#e1e0ff','#494bd6'];\n const sum = (name||'').split('').reduce((a,c) => a + c.charCodeAt(0), 0);\n return colors[sum % colors.length];\n};\n\n// ─── Deal card (board) ───────────────────────────────────────────────────────\nfunction DealCard({deal, onClick, onDragStart}) {\n const { Icon } = N();\n const col = colorFromName(deal.company || deal.contact_name || deal.contact_email);\n return h('div', {\n draggable: true,\n onDragStart: (e) => onDragStart(e, deal),\n onClick: () => onClick(deal),\n className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-md cursor-pointer hover:border-primary/40 transition-all space-y-2 group'\n },\n h('div', {className:'flex items-start justify-between gap-2'},\n h('div', {className:'min-w-0'},\n h('h4', {className:'text-[13px] font-bold text-on-surface leading-tight truncate'}, deal.company || deal.contact_name || '(untitled)'),\n deal.contact_name && deal.company && h('div', {className:'text-[11px] text-text-muted truncate'}, deal.contact_name)\n ),\n h('span', {className:'flex-shrink-0 text-[13px] font-bold font-mono-data text-on-surface', style:{fontVariantNumeric:'tabular-nums'}}, fmtMoney(deal.amount))\n ),\n h('div', {className:'flex items-center justify-between gap-2 pt-1'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className:'flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold', style:{background:col+'33', color:col}}, initialsOf(deal.contact_name || deal.company)),\n deal.last_activity_at && h('span', {className:'text-[10px] text-text-muted truncate'}, fmtRel(deal.last_activity_at))\n ),\n typeof deal.probability === 'number' && h('span', {className:'flex-shrink-0 text-[10px] font-mono-data text-on-surface-variant'}, deal.probability + '%')\n )\n );\n}\n\n// ─── Pipeline column ──────────────────────────────────────────────────────────\nfunction PipelineColumn({stage, deals, onCardClick, onDragStart, onDrop}) {\n const { Icon } = N();\n const [over, setOver] = useState(false);\n const meta = stMeta(stage);\n const sum = deals.reduce((a,d) => a + (Number(d.amount)||0), 0);\n return h('div', {\n onDragOver: (e) => { e.preventDefault(); if (!over) setOver(true); },\n onDragLeave: () => setOver(false),\n onDrop: (e) => { e.preventDefault(); setOver(false); onDrop(e, stage); },\n className:'bg-surface-container/40 rounded-lg p-md min-h-[420px] flex flex-col gap-2 transition-all ' + (over ? 'ring-2 ring-primary/40 bg-primary/5' : '')\n },\n h('div', {className:'flex items-center justify-between mb-1'},\n h('div', {className:'flex items-center gap-2'},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + meta.dot}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest ' + meta.accent}, meta.label)\n ),\n h('span', {className:'inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-surface-container-high text-[10px] font-bold font-mono-data text-on-surface-variant'}, deals.length)\n ),\n h('div', {className:'text-[10px] text-text-muted font-mono-data mb-1'}, fmtMoney(sum)),\n deals.length === 0\n ? h('div', {className:'flex-1 flex items-center justify-center text-[11px] text-text-muted italic py-6'}, 'Drop here')\n : deals.map(d => h(DealCard, {key: d.id, deal: d, onClick: onCardClick, onDragStart}))\n );\n}\n\n// ─── List view ─────────────────────────────────────────────────────────────────\nfunction DealListView({deals, onRowClick}) {\n const [sort, setSort] = useState({key:'amount', dir:'desc'});\n const sorted = [...deals].sort((a,b) => {\n const av = a[sort.key], bv = b[sort.key];\n const cmp = (typeof av === 'number' && typeof bv === 'number') ? (av-bv) : String(av||'').localeCompare(String(bv||''));\n return sort.dir === 'desc' ? -cmp : cmp;\n });\n const toggle = (k) => setSort(s => s.key === k ? {key:k, dir: s.dir==='desc'?'asc':'desc'} : {key:k, dir:'desc'});\n const HEAD = [['company','Company',3],['contact_name','Contact',3],['stage','Stage',2],['amount','Value',1],['probability','%',1],['last_activity_at','Last activity',2]];\n return h('div', {className:'glass-panel rounded-xl overflow-hidden'},\n h('div', {className:'grid grid-cols-12 gap-2 px-4 py-2.5 text-[10px] uppercase tracking-widest text-text-muted border-b border-border-subtle bg-surface-container/40 font-bold'},\n HEAD.map(([k,label,span]) => h('button', {key:k, onClick: () => toggle(k), className:'col-span-' + span + ' text-left hover:text-on-surface flex items-center gap-1'}, label, sort.key===k && h('span', null, sort.dir==='desc'?'↓':'↑')))\n ),\n sorted.length === 0\n ? h('div', {className:'px-4 py-10 text-center text-[13px] text-text-muted'}, 'No deals yet — click Sync from leads or New deal.')\n : sorted.map(d => {\n const meta = stMeta(d.stage);\n return h('div', {key:d.id, onClick: () => onRowClick(d), className:'grid grid-cols-12 gap-2 px-4 py-3 items-center border-b border-border-subtle/50 hover:bg-white/[0.02] cursor-pointer transition-colors'},\n h('div', {className:'col-span-3 text-[13px] font-semibold text-on-surface truncate'}, d.company || '—'),\n h('div', {className:'col-span-3 text-[12px] text-text-muted truncate'}, d.contact_name || d.contact_email || '—'),\n h('div', {className:'col-span-2'}, h('span', {className:'inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border ' + meta.chip}, meta.label)),\n h('div', {className:'col-span-1 text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(d.amount)),\n h('div', {className:'col-span-1 text-[11px] font-mono-data text-on-surface-variant'}, (d.probability||0) + '%'),\n h('div', {className:'col-span-2 text-[11px] text-text-muted truncate'}, fmtRel(d.last_activity_at))\n );\n })\n );\n}\n\n// ─── Role metadata for deal_contacts ───────────────────────────────────────────\nconst ROLES = ['primary','decision_maker','champion','influencer','user','contact'];\nconst roleLabel = (r) => ({primary:'Primary', decision_maker:'Decision maker', champion:'Champion', influencer:'Influencer', user:'User', contact:'Contact'})[r] || (r || 'Contact');\nconst contactName = (c) => ((c && (c.first_name||'') + ' ' + (c && c.last_name||'')) || '').trim() || (c && c.email) || 'Contact';\n\n// ─── Timeline source metadata (unified activity feed) ───────────────────────────\nconst ACT_META = {\n call: {label:'Call', icon:'call', dot:'bg-primary'},\n meeting: {label:'Meeting', icon:'event', dot:'bg-tertiary'},\n note: {label:'Note', icon:'sticky_note_2',dot:'bg-text-muted'},\n email: {label:'Email', icon:'mail', dot:'bg-secondary'},\n task: {label:'Task', icon:'check_circle', dot:'bg-secondary'},\n};\nconst actMeta = (t) => ACT_META[t] || ACT_META.note;\n\n// ─── Line items editor (deal_products) — add/remove + amount roll-up ─────────────\nfunction LineItemsEditor({dealId, onRollup}) {\n const { Icon, Btn, Spinner } = N();\n const [items, setItems] = useState(null);\n const [draft, setDraft] = useState({name:'', quantity:'1', unit_price:''});\n const [busy, setBusy] = useState(false);\n const load = useCallback(() => {\n fetch('/api/deals/' + dealId + '/products').then(r => r.json())\n .then(list => setItems(Array.isArray(list) ? list : []))\n .catch(() => setItems([]));\n }, [dealId]);\n useEffect(() => { load(); }, [load]);\n const dset = (k, v) => setDraft(d => ({...d, [k]: v}));\n const add = async () => {\n if (!String(draft.name).trim()) return;\n setBusy(true);\n await fetch('/api/deals/' + dealId + '/products', {method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({name: draft.name.trim(), quantity: Number(draft.quantity)||1, unit_price: Number(draft.unit_price)||0})}).catch(()=>{});\n setBusy(false); setDraft({name:'', quantity:'1', unit_price:''});\n load(); onRollup && onRollup();\n };\n const remove = async (pid) => {\n await fetch('/api/deals/' + dealId + '/products/' + pid, {method:'DELETE'}).catch(()=>{});\n load(); onRollup && onRollup();\n };\n const total = (items || []).reduce((a,p) => a + (Number(p.amount) != null && !isNaN(Number(p.amount)) ? Number(p.amount) : (Number(p.quantity)||0) * (Number(p.unit_price)||0)), 0);\n return h('div', {className:'pt-3 border-t border-border-subtle'},\n h('div', {className:'flex items-center justify-between mb-2'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted flex items-center gap-2'}, h(Icon,{name:'shopping_cart',size:13,className:'text-primary'}), 'Line items'),\n (items && items.length > 0) && h('span', {className:'text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(total))\n ),\n items === null\n ? h('div', {className:'flex items-center justify-center py-3'}, h(Spinner,{size:16}))\n : h('div', {className:'space-y-1.5'},\n items.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'No line items — deal value is set manually above.')\n : items.map(p => h('div', {key: p.id, className:'flex items-center gap-2 bg-surface-container-lowest border border-border-subtle rounded-lg px-2.5 py-1.5'},\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, p.name || '(item)'),\n h('div', {className:'text-[10px] text-text-muted font-mono-data'}, (Number(p.quantity)||0) + ' \\\\u00D7 ' + fmtMoney(p.unit_price))\n ),\n h('span', {className:'flex-shrink-0 text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(Number(p.amount) || (Number(p.quantity)||0)*(Number(p.unit_price)||0))),\n h('button', {onClick: () => remove(p.id), className:'flex-shrink-0 text-text-muted hover:text-error', title:'Remove line item'}, h(Icon,{name:'close',size:13}))\n ))\n ),\n h('div', {className:'flex items-end gap-1.5 mt-2'},\n h('input', {type:'text', value: draft.name, onChange: e => dset('name', e.target.value), placeholder:'Product / service',\n className:'flex-1 min-w-0 bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h('input', {type:'number', value: draft.quantity, onChange: e => dset('quantity', e.target.value), placeholder:'Qty', title:'Quantity',\n className:'w-12 bg-surface-container-lowest border border-border-subtle rounded-md px-1.5 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h('input', {type:'number', value: draft.unit_price, onChange: e => dset('unit_price', e.target.value), placeholder:'Price', title:'Unit price',\n className:'w-16 bg-surface-container-lowest border border-border-subtle rounded-md px-1.5 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h('button', {onClick: add, disabled: busy || !String(draft.name).trim(), className:'flex-shrink-0 px-2 py-1.5 rounded-md bg-primary text-white text-[12px] font-semibold disabled:opacity-40 hover:bg-primary/90'}, busy ? h(Spinner,{size:12}) : h(Icon,{name:'add',size:14}))\n )\n );\n}\n\n// ─── Unified deal timeline (activities + intent signals + linked tasks) ──────────\nfunction DealTimeline({dealId, onChanged}) {\n const { Icon, Spinner } = N();\n const [feed, setFeed] = useState(null);\n const [logging, setLogging] = useState(false);\n const [draft, setDraft] = useState({type:'call', subject:'', body:''});\n const [busy, setBusy] = useState(false);\n const load = useCallback(() => {\n fetch('/api/timeline?deal_id=' + encodeURIComponent(dealId)).then(r => r.json())\n .then(list => setFeed(Array.isArray(list) ? list : []))\n .catch(() => setFeed([]));\n }, [dealId]);\n useEffect(() => { load(); }, [load]);\n const dset = (k, v) => setDraft(d => ({...d, [k]: v}));\n const log = async () => {\n if (!String(draft.subject).trim() && !String(draft.body).trim()) return;\n setBusy(true);\n await fetch('/api/activities', {method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({type: draft.type, subject: draft.subject.trim(), body: draft.body.trim(), deal_id: dealId})}).catch(()=>{});\n setBusy(false); setDraft({type:'call', subject:'', body:''}); setLogging(false);\n load(); onChanged && onChanged();\n };\n // Normalize a merged-feed row (which may be an activity, an intent_signal, or a task).\n const rowOf = (s) => {\n const src = s.source || (s.signal_type ? 'signal' : (s.type ? 'activity' : 'task'));\n if (src === 'signal') return {\n kind: 'signal', icon: 'bolt', dot: 'bg-tertiary',\n title: String(s.signal_type||'signal').replace(/_/g,' '),\n meta: (s.signal_source||'') + (s.signal_strength ? ' \\\\u00B7 +' + s.signal_strength : ''),\n when: s.occurred_at || s.detected_at, body: ''\n };\n if (src === 'task') return {\n kind: 'task', icon: 'check_circle', dot: s.completed ? 'bg-secondary' : 'bg-text-muted',\n title: s.title || s.subject || 'Task',\n meta: 'task' + (s.completed ? ' \\\\u00B7 done' : (s.due_date ? ' \\\\u00B7 due ' + fmtRel(s.due_date) : '')),\n when: s.occurred_at || s.due_date || s.created_at, body: s.body || ''\n };\n const m = actMeta(s.type);\n return {\n kind: 'activity', icon: m.icon, dot: m.dot,\n title: s.subject || m.label, meta: m.label + (s.owner ? ' \\\\u00B7 ' + s.owner : ''),\n when: s.occurred_at || s.due_date || s.created_at, body: s.body || ''\n };\n };\n return h('div', {className:'pt-3 border-t border-border-subtle'},\n h('div', {className:'flex items-center justify-between mb-2'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted flex items-center gap-2'}, h(Icon,{name:'bolt',size:13,className:'text-tertiary'}), 'Activity timeline'),\n h('button', {onClick: () => setLogging(v => !v), className:'text-[11px] text-primary hover:underline flex items-center gap-1 font-semibold'}, h(Icon,{name: logging ? 'close' : 'add',size:13}), logging ? 'Cancel' : 'Log activity')\n ),\n logging && h('div', {className:'mb-3 space-y-1.5 bg-surface-container-lowest border border-border-subtle rounded-lg p-2.5'},\n h('div', {className:'flex gap-1.5'},\n ['call','meeting','note'].map(t => h('button', {key:t, onClick: () => dset('type', t),\n className:'flex-1 px-2 py-1 rounded-md text-[11px] font-semibold flex items-center justify-center gap-1 border ' + (draft.type===t ? 'bg-primary text-white border-primary' : 'bg-surface-container border-border-subtle text-text-muted hover:text-on-surface')},\n h(Icon,{name: actMeta(t).icon, size:13}), actMeta(t).label))\n ),\n h('input', {type:'text', value: draft.subject, onChange: e => dset('subject', e.target.value), placeholder:'Subject',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h('textarea', {value: draft.body, onChange: e => dset('body', e.target.value), rows:2, placeholder:'Details (optional)',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none resize-none'}),\n h('button', {onClick: log, disabled: busy || (!String(draft.subject).trim() && !String(draft.body).trim()),\n className:'px-2.5 py-1 rounded-md bg-primary text-white text-[12px] font-semibold disabled:opacity-40 hover:bg-primary/90 flex items-center gap-1'},\n busy ? h(Spinner,{size:12}) : h(Icon,{name:'save',size:13}), 'Log')\n ),\n feed === null\n ? h('div', {className:'flex items-center justify-center py-3'}, h(Spinner,{size:16}))\n : feed.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'No activity yet — log a call, meeting, or note above.')\n : h('div', {className:'space-y-2'},\n feed.map((s,i) => { const r = rowOf(s); return h('div', {key: s.id || i, className:'flex items-start gap-2 text-[12px]'},\n h('span', {className:'w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 ' + (r.dot) + '/20'},\n h(Icon, {name: r.icon, size:12, className:'text-on-surface'})),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'text-on-surface font-medium truncate'}, r.title),\n r.body && h('div', {className:'text-[11px] text-text-muted whitespace-pre-wrap'}, r.body),\n h('div', {className:'text-[10px] text-text-muted'}, r.meta + (r.when ? ' \\\\u00B7 ' + fmtRel(r.when) : ''))\n )\n ); })\n )\n );\n}\n\n// ─── Detail panel (slide-in) ────────────────────────────────────────────────────\nfunction DealDetail({dealId, onClose, onChanged, onOpenAccount, onOpenContact}) {\n const { Icon, Btn, Input, Spinner } = N();\n const [deal, setDeal] = useState(null);\n const [form, setForm] = useState({});\n const [busy, setBusy] = useState(false);\n const [toast, setToast] = useState('');\n const [contacts, setContacts] = useState([]);\n const [account, setAccount] = useState(null);\n const [adding, setAdding] = useState(false);\n\n const loadContacts = useCallback(() => {\n fetch('/api/deals/' + dealId + '/contacts').then(r => r.json())\n .then(list => setContacts(Array.isArray(list) ? list : []))\n .catch(() => setContacts([]));\n }, [dealId]);\n\n useEffect(() => {\n let alive = true;\n fetch('/api/deals/' + dealId).then(r => r.json()).then(d => {\n if (!alive) return;\n setDeal(d); setForm(d);\n // Linked account: prefer the nested account the deal detail returns, else fetch by id.\n if (d && d.account) setAccount(d.account);\n else if (d && d.account_id) fetch('/api/accounts/' + d.account_id).then(r => r.json()).then(a => { if (alive) setAccount(a && a.account ? a.account : a); }).catch(()=>{});\n else setAccount(null);\n }).catch(()=>{});\n loadContacts();\n return () => { alive = false; };\n }, [dealId, loadContacts]);\n\n const set = (k, v) => setForm(f => ({...f, [k]: v}));\n const save = async () => {\n setBusy(true);\n const body = { title:form.title, company:form.company, contact_name:form.contact_name, contact_email:form.contact_email, stage:form.stage, amount:Number(form.amount)||0, probability:Number(form.probability)||0, owner:form.owner, close_date:form.close_date, notes:form.notes,\n next_step: form.next_step || '', recurring_type: form.recurring_type || 'one_time', mrr: Number(form.mrr)||0,\n win_reason: form.win_reason || '', lost_reason: form.lost_reason || '' };\n const r = await fetch('/api/deals/' + dealId, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)});\n if (r.ok) { const d = await r.json(); setDeal(d); setForm(d); setToast('Saved'); onChanged && onChanged(); setTimeout(()=>setToast(''),1500); }\n setBusy(false);\n };\n const remove = async () => {\n setBusy(true);\n await fetch('/api/deals/' + dealId, {method:'DELETE'});\n setBusy(false); onChanged && onChanged(); onClose();\n };\n const removeContact = async (contactId) => {\n await fetch('/api/deals/' + dealId + '/contacts/' + contactId, {method:'DELETE'}).catch(()=>{});\n loadContacts();\n };\n const draftEmail = async () => {\n if (!form.contact_email) { setToast('No contact email'); setTimeout(()=>setToast(''),1500); return; }\n // Provider-aware: pick a real connected email provider (prefer Outlook, else Gmail).\n let provider = '';\n try {\n const list = await fetch('/api/integrations').then(r => r.json()).catch(() => null);\n const arr = Array.isArray(list) ? list : [];\n const isOn = (n) => arr.some(i => i && i.name === n && i.connected === true);\n provider = isOn('outlook') ? 'outlook' : (isOn('gmail') ? 'gmail' : '');\n } catch (e) { provider = ''; }\n if (!provider) { setToast('Connect an email provider (Outlook or Gmail) in Settings'); setTimeout(()=>setToast(''),2500); return; }\n await fetch('/api/actions', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({\n integration:provider, endpoint:'send', source_type:'crm', workspace:'sales',\n title:'Email: ' + (form.company || form.contact_email),\n preview:'To: ' + form.contact_email,\n payload:{ message:{ subject:'Following up — ' + (form.company||''), body:{contentType:'Text', content:'Hi ' + (form.contact_name||'') + ',\\\\n\\\\n'}, toRecipients:[{emailAddress:{address: form.contact_email}}] } }\n })});\n setToast('Drafted → Approvals'); setTimeout(()=>setToast(''),2000);\n };\n\n const field = (label, key, type) => h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, label),\n h('input', {type: type||'text', value: form[key] != null ? form[key] : '', onChange: e => set(key, e.target.value),\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'})\n );\n\n return h('div', {className:'fixed inset-0 z-40 flex justify-end', style:{background:'rgba(0,0,0,0.4)'}, onClick: onClose},\n h('div', {onClick: e => e.stopPropagation(), className:'w-full max-w-md h-full bg-surface border-l border-border overflow-y-auto shadow-2xl'},\n !deal ? h('div', {className:'flex items-center justify-center h-full'}, h(Spinner, {size:20}))\n : h('div', {className:'p-lg space-y-4'},\n h('div', {className:'flex items-start justify-between gap-3'},\n h('div', {className:'min-w-0'},\n h('h3', {className:'text-[18px] font-bold text-on-surface truncate'}, deal.company || deal.contact_name || 'Deal'),\n h('div', {className:'text-[12px] text-text-muted truncate'}, deal.contact_email || '')\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface'}, h(Icon, {name:'close', size:20}))\n ),\n h('div', {className:'grid grid-cols-2 gap-3'},\n field('Company','company'), field('Contact','contact_name'),\n field('Email','contact_email'), field('Owner','owner'),\n field('Amount (USD)','amount','number'), field('Probability %','probability','number'),\n field('Close date','close_date','date'),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Stage'),\n h('select', {value: form.stage || 'lead', onChange: e => set('stage', e.target.value),\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'},\n STAGES.map(s => h('option', {key:s, value:s}, stMeta(s).label)))\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Recurring'),\n h('select', {value: form.recurring_type || 'one_time', onChange: e => set('recurring_type', e.target.value),\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'},\n h('option', {value:'one_time'}, 'One-time'), h('option', {value:'monthly'}, 'Monthly'), h('option', {value:'annual'}, 'Annual'))\n ),\n (form.recurring_type === 'monthly' || form.recurring_type === 'annual') && field('MRR (USD)','mrr','number')\n ),\n // Next step (CRM follow-up cue)\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Next step'),\n h('input', {type:'text', value: form.next_step != null ? form.next_step : '', onChange: e => set('next_step', e.target.value), placeholder:'e.g. Send proposal by Friday',\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n // Win / loss reason — shown when the deal is (or is being moved to) won/lost.\n form.stage === 'won' && h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-secondary'}, 'Win reason'),\n h('input', {type:'text', value: form.win_reason != null ? form.win_reason : '', onChange: e => set('win_reason', e.target.value), placeholder:'Why did we win?',\n className:'bg-surface-container-lowest border border-secondary/40 rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-secondary focus:outline-none'})\n ),\n form.stage === 'lost' && h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-error'}, 'Lost reason'),\n h('input', {type:'text', value: form.lost_reason != null ? form.lost_reason : '', onChange: e => set('lost_reason', e.target.value), placeholder:'Why did we lose?',\n className:'bg-surface-container-lowest border border-error/40 rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-error focus:outline-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Notes'),\n h('textarea', {value: form.notes || '', onChange: e => set('notes', e.target.value), rows:3,\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none resize-none'})\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: save, variant:'primary', size:'sm', disabled: busy}, busy ? h(Spinner,{size:13}) : h(Icon,{name:'save',size:14}), 'Save'),\n h(Btn, {onClick: draftEmail, variant:'secondary', size:'sm'}, h(Icon,{name:'mail',size:14}), 'Draft email'),\n h('button', {onClick: remove, className:'ml-auto text-[12px] text-error hover:underline flex items-center gap-1'}, h(Icon,{name:'delete',size:14}), 'Delete'),\n toast && h('span', {className:'text-[11px] text-secondary'}, toast)\n ),\n // Linked account (relational CRM)\n h('div', {className:'pt-3 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2 flex items-center gap-2'}, h(Icon,{name:'domain',size:13,className:'text-primary'}), 'Account'),\n account\n ? h('button', {onClick: () => onOpenAccount && onOpenAccount(account.id),\n className:'w-full flex items-center gap-3 text-left bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 hover:border-primary/40 transition-all'},\n h('span', {className:'w-7 h-7 rounded-md flex items-center justify-center text-[11px] font-bold flex-shrink-0', style:{background:colorFromName(account.name)+'33', color:colorFromName(account.name)}}, initialsOf(account.name)),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[13px] font-semibold text-on-surface truncate'}, account.name || '(account)'),\n (account.domain || account.industry) && h('div', {className:'text-[11px] text-text-muted truncate'}, [account.domain, account.industry].filter(Boolean).join(' \\\\u00B7 '))\n ),\n h(Icon, {name:'chevron_right', size:16, className:'text-text-muted flex-shrink-0'})\n )\n : h('div', {className:'text-[12px] text-text-muted italic'}, 'No account linked' + (deal.company ? ' (company: ' + deal.company + ')' : '') + '.')\n ),\n // Contacts on this deal (deal_contacts with roles)\n h('div', {className:'pt-3 border-t border-border-subtle'},\n h('div', {className:'flex items-center justify-between mb-2'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted flex items-center gap-2'}, h(Icon,{name:'group',size:13,className:'text-tertiary'}), 'Contacts'),\n h('button', {onClick: () => setAdding(true), className:'text-[11px] text-primary hover:underline flex items-center gap-1 font-semibold'}, h(Icon,{name:'person_add',size:13}), 'Add')\n ),\n contacts.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'No contacts linked yet.')\n : h('div', {className:'space-y-1.5'},\n contacts.map(c => h('div', {key: c.contact_id || c.id, className:'flex items-center gap-2 bg-surface-container-lowest border border-border-subtle rounded-lg px-2.5 py-1.5'},\n h('button', {onClick: () => onOpenContact && onOpenContact(c.contact_id || c.id), className:'flex items-center gap-2 min-w-0 flex-1 text-left'},\n h('span', {className:'w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0', style:{background:colorFromName(contactName(c))+'33', color:colorFromName(contactName(c))}}, initialsOf(contactName(c))),\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate hover:text-primary'}, contactName(c)),\n (c.title || c.email) && h('div', {className:'text-[10px] text-text-muted truncate'}, c.title || c.email)\n )\n ),\n h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border border-tertiary/30 text-tertiary bg-tertiary/10 font-bold'}, roleLabel(c.role)),\n h('button', {onClick: () => removeContact(c.contact_id || c.id), className:'flex-shrink-0 text-text-muted hover:text-error', title:'Remove from deal'}, h(Icon,{name:'close',size:13}))\n ))\n )\n ),\n adding && h(AddContactToDealModal, {dealId, existing: contacts, accountId: deal.account_id, onClose: () => setAdding(false), onAdded: () => { setAdding(false); loadContacts(); }}),\n // Line items (deal_products) — add/remove with amount roll-up.\n h(LineItemsEditor, {dealId, onRollup: () => { onChanged && onChanged(); fetch('/api/deals/' + dealId).then(r => r.json()).then(d => { setDeal(d); setForm(f => ({...f, amount: d.amount})); }).catch(()=>{}); }}),\n // Unified activity timeline — merges activities + intent signals + linked tasks.\n h(DealTimeline, {dealId, onChanged})\n )\n )\n );\n}\n\n// ─── Add contact to deal modal ──────────────────────────────────────────────────\nfunction AddContactToDealModal({dealId, existing, accountId, onClose, onAdded}) {\n const { Icon, Btn, Spinner } = N();\n const [contacts, setContacts] = useState(null);\n const [contactId, setContactId] = useState('');\n const [role, setRole] = useState('contact');\n const [busy, setBusy] = useState(false);\n const have = new Set((existing || []).map(c => String(c.contact_id || c.id)));\n useEffect(() => {\n // Prefer contacts on the deal's account; fall back to all contacts.\n const url = accountId ? '/api/contacts?account_id=' + encodeURIComponent(accountId) : '/api/contacts';\n fetch(url).then(r => r.json()).then(list => {\n const arr = (Array.isArray(list) ? list : []).filter(c => !have.has(String(c.id)));\n setContacts(arr);\n if (arr.length) setContactId(String(arr[0].id));\n }).catch(() => setContacts([]));\n }, []);\n const add = async () => {\n if (!contactId) return;\n setBusy(true);\n await fetch('/api/deals/' + dealId + '/contacts', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({contact_id: contactId, role})}).catch(()=>{});\n setBusy(false); onAdded && onAdded();\n };\n return h('div', {className:'fixed inset-0 z-50 flex items-center justify-center p-4', style:{background:'rgba(0,0,0,0.5)'}, onClick:onClose},\n h('div', {onClick:e=>e.stopPropagation(), className:'w-full max-w-sm bg-surface border border-border rounded-2xl p-lg space-y-3 shadow-2xl'},\n h('h3', {className:'text-[16px] font-bold text-on-surface'}, 'Add contact to deal'),\n contacts === null\n ? h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}))\n : contacts.length === 0\n ? h('div', {className:'text-[13px] text-text-muted py-2'}, 'No more contacts available' + (accountId ? ' on this account' : '') + '. Create contacts in the Contacts tab first.')\n : h('div', {className:'space-y-3'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Contact'),\n h('select', {value:contactId, onChange:e=>setContactId(e.target.value), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'},\n contacts.map(c => h('option', {key:c.id, value:String(c.id)}, contactName(c) + (c.email ? ' (' + c.email + ')' : ''))))\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Role'),\n h('select', {value:role, onChange:e=>setRole(e.target.value), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'},\n ROLES.map(rr => h('option', {key:rr, value:rr}, roleLabel(rr))))\n )\n ),\n h('div', {className:'flex items-center gap-2 pt-1'},\n h(Btn, {onClick:add, variant:'primary', size:'sm', disabled: busy || !contactId || (contacts && contacts.length===0)}, busy ? h(Spinner,{size:13}) : h(Icon,{name:'person_add',size:14}), 'Add'),\n h('button', {onClick:onClose, className:'text-[12px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n )\n );\n}\n\n// ─── Accounts list view ─────────────────────────────────────────────────────────\nfunction AccountsListView({onRowClick}) {\n const { Spinner } = N();\n const [rows, setRows] = useState(null);\n useEffect(() => {\n fetch('/api/accounts').then(r => r.json()).then(list => setRows(Array.isArray(list) ? list : [])).catch(() => setRows([]));\n }, []);\n if (rows === null) return h('div', {className:'glass-panel rounded-xl p-12 flex items-center justify-center'}, h(Spinner,{size:20}));\n return h('div', {className:'glass-panel rounded-xl overflow-hidden'},\n h('div', {className:'grid grid-cols-12 gap-2 px-4 py-2.5 text-[10px] uppercase tracking-widest text-text-muted border-b border-border-subtle bg-surface-container/40 font-bold'},\n h('div', {className:'col-span-5'}, 'Account'),\n h('div', {className:'col-span-3'}, 'Domain'),\n h('div', {className:'col-span-2 text-right'}, 'Deals'),\n h('div', {className:'col-span-2 text-right'}, 'Pipeline')\n ),\n rows.length === 0\n ? h('div', {className:'px-4 py-10 text-center text-[13px] text-text-muted'}, 'No accounts yet — they are created from your deals\\\\u2019 companies.')\n : rows.map(a => h('div', {key:a.id, onClick: () => onRowClick(a.id), className:'grid grid-cols-12 gap-2 px-4 py-3 items-center border-b border-border-subtle/50 hover:bg-white/[0.02] cursor-pointer transition-colors'},\n h('div', {className:'col-span-5 flex items-center gap-2.5 min-w-0'},\n h('span', {className:'w-7 h-7 rounded-md flex items-center justify-center text-[11px] font-bold flex-shrink-0', style:{background:colorFromName(a.name)+'33', color:colorFromName(a.name)}}, initialsOf(a.name)),\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[13px] font-semibold text-on-surface truncate'}, a.name || '(unnamed)'),\n a.industry && h('div', {className:'text-[11px] text-text-muted truncate'}, a.industry)\n )\n ),\n h('div', {className:'col-span-3 text-[12px] text-text-muted truncate'}, a.domain || '\\\\u2014'),\n h('div', {className:'col-span-2 text-right text-[12px] font-mono-data text-on-surface-variant'}, String(a.open_deals_count != null ? a.open_deals_count : 0)),\n h('div', {className:'col-span-2 text-right text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(a.pipeline_value))\n ))\n );\n}\n\n// ─── Account detail (slide-in) ──────────────────────────────────────────────────\nfunction AccountDetail({accountId, onClose, onOpenDeal, onOpenContact}) {\n const { Icon, Spinner } = N();\n const [data, setData] = useState(null);\n useEffect(() => {\n fetch('/api/accounts/' + accountId).then(r => r.json()).then(setData).catch(()=>setData({}));\n }, [accountId]);\n const account = data && (data.account || (data.id ? data : null));\n const contacts = (data && data.contacts) || [];\n const deals = (data && data.deals) || [];\n return h('div', {className:'fixed inset-0 z-40 flex justify-end', style:{background:'rgba(0,0,0,0.4)'}, onClick: onClose},\n h('div', {onClick: e => e.stopPropagation(), className:'w-full max-w-md h-full bg-surface border-l border-border overflow-y-auto shadow-2xl'},\n !data ? h('div', {className:'flex items-center justify-center h-full'}, h(Spinner,{size:20}))\n : h('div', {className:'p-lg space-y-4'},\n h('div', {className:'flex items-start justify-between gap-3'},\n h('div', {className:'flex items-center gap-3 min-w-0'},\n h('span', {className:'w-10 h-10 rounded-lg flex items-center justify-center text-[14px] font-bold flex-shrink-0', style:{background:colorFromName(account && account.name)+'33', color:colorFromName(account && account.name)}}, initialsOf(account && account.name)),\n h('div', {className:'min-w-0'},\n h('h3', {className:'text-[18px] font-bold text-on-surface truncate'}, (account && account.name) || 'Account'),\n h('div', {className:'text-[12px] text-text-muted truncate'}, [account && account.domain, account && account.industry, account && account.size].filter(Boolean).join(' \\\\u00B7 ') || '')\n )\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface flex-shrink-0'}, h(Icon, {name:'close', size:20}))\n ),\n (account && account.website) && h('a', {href: account.website, target:'_blank', className:'text-[12px] text-primary hover:underline flex items-center gap-1'}, h(Icon,{name:'link',size:13}), account.website),\n // Deals on this account\n h('div', {className:'pt-2 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2 flex items-center gap-2'}, h(Icon,{name:'work',size:13,className:'text-primary'}), 'Deals (' + deals.length + ')'),\n deals.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'No deals on this account.')\n : h('div', {className:'space-y-1.5'},\n deals.map(d => h('button', {key:d.id, onClick: () => onOpenDeal && onOpenDeal(d.id), className:'w-full flex items-center justify-between gap-2 text-left bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 hover:border-primary/40 transition-all'},\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, d.title || d.company || d.contact_name || 'Deal'),\n h('div', {className:'text-[10px]'}, h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider border ' + stMeta(d.stage).chip}, stMeta(d.stage).label))\n ),\n h('span', {className:'flex-shrink-0 text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(d.amount))\n ))\n )\n ),\n // Contacts at this account\n h('div', {className:'pt-3 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2 flex items-center gap-2'}, h(Icon,{name:'group',size:13,className:'text-tertiary'}), 'Contacts (' + contacts.length + ')'),\n contacts.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'No contacts at this account.')\n : h('div', {className:'space-y-1.5'},\n contacts.map(c => h('button', {key:c.id, onClick: () => onOpenContact && onOpenContact(c.id), className:'w-full flex items-center gap-2 text-left bg-surface-container-lowest border border-border-subtle rounded-lg px-2.5 py-1.5 hover:border-primary/40 transition-all'},\n h('span', {className:'w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0', style:{background:colorFromName(contactName(c))+'33', color:colorFromName(contactName(c))}}, initialsOf(contactName(c))),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, contactName(c)),\n (c.title || c.email) && h('div', {className:'text-[10px] text-text-muted truncate'}, c.title || c.email)\n )\n ))\n )\n )\n )\n )\n );\n}\n\n// ─── Contacts list view ─────────────────────────────────────────────────────────\nfunction ContactsListView({onRowClick}) {\n const { Spinner } = N();\n const [rows, setRows] = useState(null);\n useEffect(() => {\n fetch('/api/contacts').then(r => r.json()).then(list => setRows(Array.isArray(list) ? list : [])).catch(() => setRows([]));\n }, []);\n if (rows === null) return h('div', {className:'glass-panel rounded-xl p-12 flex items-center justify-center'}, h(Spinner,{size:20}));\n return h('div', {className:'glass-panel rounded-xl overflow-hidden'},\n h('div', {className:'grid grid-cols-12 gap-2 px-4 py-2.5 text-[10px] uppercase tracking-widest text-text-muted border-b border-border-subtle bg-surface-container/40 font-bold'},\n h('div', {className:'col-span-4'}, 'Contact'),\n h('div', {className:'col-span-3'}, 'Email'),\n h('div', {className:'col-span-3'}, 'Account'),\n h('div', {className:'col-span-2'}, 'Title')\n ),\n rows.length === 0\n ? h('div', {className:'px-4 py-10 text-center text-[13px] text-text-muted'}, 'No contacts yet — they are created from your deals\\\\u2019 contacts.')\n : rows.map(c => h('div', {key:c.id, onClick: () => onRowClick(c.id), className:'grid grid-cols-12 gap-2 px-4 py-3 items-center border-b border-border-subtle/50 hover:bg-white/[0.02] cursor-pointer transition-colors'},\n h('div', {className:'col-span-4 flex items-center gap-2.5 min-w-0'},\n h('span', {className:'w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0', style:{background:colorFromName(contactName(c))+'33', color:colorFromName(contactName(c))}}, initialsOf(contactName(c))),\n h('div', {className:'text-[13px] font-semibold text-on-surface truncate'}, contactName(c))\n ),\n h('div', {className:'col-span-3 text-[12px] text-text-muted truncate'}, c.email || '\\\\u2014'),\n h('div', {className:'col-span-3 text-[12px] text-on-surface-variant truncate'}, c.account_name || '\\\\u2014'),\n h('div', {className:'col-span-2 text-[12px] text-text-muted truncate'}, c.title || '\\\\u2014')\n ))\n );\n}\n\n// ─── Contact detail (slide-in) — intent-signal timeline + deals ──────────────────\nfunction ContactDetail({contactId, onClose, onOpenAccount, onOpenDeal}) {\n const { Icon, Spinner } = N();\n const [data, setData] = useState(null);\n useEffect(() => {\n fetch('/api/contacts/' + contactId).then(r => r.json()).then(setData).catch(()=>setData({}));\n }, [contactId]);\n const contact = data && (data.contact || (data.id ? data : null));\n const account = data && data.account;\n const deals = (data && data.deals) || [];\n const signals = (data && (data.signals || data.timeline)) || [];\n return h('div', {className:'fixed inset-0 z-40 flex justify-end', style:{background:'rgba(0,0,0,0.4)'}, onClick: onClose},\n h('div', {onClick: e => e.stopPropagation(), className:'w-full max-w-md h-full bg-surface border-l border-border overflow-y-auto shadow-2xl'},\n !data ? h('div', {className:'flex items-center justify-center h-full'}, h(Spinner,{size:20}))\n : h('div', {className:'p-lg space-y-4'},\n h('div', {className:'flex items-start justify-between gap-3'},\n h('div', {className:'flex items-center gap-3 min-w-0'},\n h('span', {className:'w-10 h-10 rounded-full flex items-center justify-center text-[14px] font-bold flex-shrink-0', style:{background:colorFromName(contactName(contact))+'33', color:colorFromName(contactName(contact))}}, initialsOf(contactName(contact))),\n h('div', {className:'min-w-0'},\n h('h3', {className:'text-[18px] font-bold text-on-surface truncate'}, contactName(contact)),\n h('div', {className:'text-[12px] text-text-muted truncate'}, [contact && contact.title, contact && contact.email].filter(Boolean).join(' \\\\u00B7 ') || '')\n )\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface flex-shrink-0'}, h(Icon, {name:'close', size:20}))\n ),\n h('div', {className:'flex flex-wrap gap-x-4 gap-y-1 text-[12px] text-text-muted'},\n (contact && contact.email) && h('span', {className:'flex items-center gap-1'}, h(Icon,{name:'mail',size:13}), contact.email),\n (contact && contact.phone) && h('span', {className:'flex items-center gap-1'}, h(Icon,{name:'call',size:13}), contact.phone)\n ),\n // Account\n account && h('button', {onClick: () => onOpenAccount && onOpenAccount(account.id), className:'w-full flex items-center gap-2.5 text-left bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 hover:border-primary/40 transition-all'},\n h('span', {className:'w-7 h-7 rounded-md flex items-center justify-center text-[11px] font-bold flex-shrink-0', style:{background:colorFromName(account.name)+'33', color:colorFromName(account.name)}}, initialsOf(account.name)),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[13px] font-semibold text-on-surface truncate'}, account.name || '(account)'),\n account.domain && h('div', {className:'text-[11px] text-text-muted truncate'}, account.domain)\n ),\n h(Icon, {name:'chevron_right', size:16, className:'text-text-muted flex-shrink-0'})\n ),\n // Deals\n h('div', {className:'pt-2 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2 flex items-center gap-2'}, h(Icon,{name:'work',size:13,className:'text-primary'}), 'Deals (' + deals.length + ')'),\n deals.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'No deals linked to this contact.')\n : h('div', {className:'space-y-1.5'},\n deals.map(d => h('button', {key:d.id, onClick: () => onOpenDeal && onOpenDeal(d.id), className:'w-full flex items-center justify-between gap-2 text-left bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 hover:border-primary/40 transition-all'},\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, d.title || d.company || 'Deal'),\n h('div', {className:'text-[10px]'}, h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider border ' + stMeta(d.stage).chip}, stMeta(d.stage).label))\n ),\n h('span', {className:'flex-shrink-0 text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(d.amount))\n ))\n )\n ),\n // Intent-signal timeline\n h('div', {className:'pt-3 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2 flex items-center gap-2'}, h(Icon,{name:'bolt',size:13,className:'text-tertiary'}), 'Intent-signal timeline'),\n signals.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'No intent signals captured for this contact yet.')\n : h('div', {className:'space-y-2'},\n signals.map((s,i) => h('div', {key:i, className:'flex items-start gap-2 text-[12px]'},\n h('span', {className:'w-1.5 h-1.5 rounded-full bg-tertiary mt-1.5 flex-shrink-0'}),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'text-on-surface'}, String(s.signal_type||'signal').replace(/_/g,' '), h('span', {className:'text-text-muted'}, ' \\\\u00B7 ' + (s.signal_source||''))),\n h('div', {className:'text-[10px] text-text-muted'}, fmtRel(s.detected_at) + (s.signal_strength ? ' \\\\u00B7 +' + s.signal_strength : ''))\n )\n ))\n )\n )\n )\n )\n );\n}\n\n// ─── New deal modal ──────────────────────────────────────────────────────────\nfunction NewDealForm({onClose, onCreated}) {\n const { Icon, Btn } = N();\n const [f, setF] = useState({company:'', contact_name:'', contact_email:'', amount:'', stage:'lead'});\n const [busy, setBusy] = useState(false);\n const set = (k,v) => setF(s => ({...s,[k]:v}));\n const create = async () => {\n setBusy(true);\n const r = await fetch('/api/deals', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({...f, amount:Number(f.amount)||0})});\n setBusy(false);\n if (r.ok) { onCreated && onCreated(); onClose(); }\n };\n const inp = (label,key,type) => h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, label),\n h('input', {type:type||'text', value:f[key], onChange:e=>set(key,e.target.value), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'})\n );\n return h('div', {className:'fixed inset-0 z-50 flex items-center justify-center', style:{background:'rgba(0,0,0,0.5)'}, onClick:onClose},\n h('div', {onClick:e=>e.stopPropagation(), className:'w-full max-w-sm bg-surface border border-border rounded-2xl p-lg space-y-3 shadow-2xl'},\n h('h3', {className:'text-[16px] font-bold text-on-surface'}, 'New deal'),\n inp('Company','company'), inp('Contact','contact_name'), inp('Email','contact_email','email'), inp('Amount (USD)','amount','number'),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Stage'),\n h('select', {value:f.stage, onChange:e=>set('stage',e.target.value), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'},\n STAGES.map(s => h('option', {key:s, value:s}, stMeta(s).label)))\n ),\n h('div', {className:'flex items-center gap-2 pt-1'},\n h(Btn, {onClick:create, variant:'primary', size:'sm', disabled:busy}, 'Create deal'),\n h('button', {onClick:onClose, className:'text-[12px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n )\n );\n}\n\n// ─── Import contacts modal (interactive lead → deal review) ─────────────────────\nfunction ImportContactsModal({onClose, onImported}) {\n const { Icon, Btn, Spinner } = N();\n const [cands, setCands] = useState(null);\n const [sel, setSel] = useState({});\n const [busy, setBusy] = useState(false);\n useEffect(() => {\n let alive = true;\n fetch('/api/deals/candidates').then(r => r.json()).then(list => {\n if (!alive) return;\n const arr = Array.isArray(list) ? list : [];\n setCands(arr);\n const init = {};\n arr.forEach(c => { if (c.likely_prospect) init[c.email] = true; });\n setSel(init);\n }).catch(() => { if (alive) setCands([]); });\n return () => { alive = false; };\n }, []);\n const toggle = (email) => setSel(s => ({...s, [email]: !s[email]}));\n const selectedEmails = Object.keys(sel).filter(e => sel[e]);\n const setAll = (v) => { const m = {}; (cands || []).forEach(c => { m[c.email] = v; }); setSel(m); };\n const doImport = async () => {\n if (!selectedEmails.length) return;\n setBusy(true);\n await fetch('/api/deals/import', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({emails: selectedEmails})}).catch(()=>{});\n setBusy(false); onImported && onImported(); onClose();\n };\n return h('div', {className:'fixed inset-0 z-50 flex items-center justify-center p-4', style:{background:'rgba(0,0,0,0.5)'}, onClick:onClose},\n h('div', {onClick:e=>e.stopPropagation(), className:'w-full max-w-lg bg-surface border border-border rounded-2xl shadow-2xl flex flex-col', style:{maxHeight:'80vh'}},\n h('div', {className:'p-lg border-b border-border-subtle flex items-start justify-between gap-3'},\n h('div', {className:'min-w-0'},\n h('h3', {className:'text-[16px] font-bold text-on-surface'}, 'Import contacts as deals'),\n h('div', {className:'text-[12px] text-text-muted mt-0.5'}, 'From your email & calendar leads. System/notification senders are pre-unchecked — review and pick real prospects.')\n ),\n h('button', {onClick:onClose, className:'text-text-muted hover:text-on-surface flex-shrink-0'}, h(Icon,{name:'close',size:20}))\n ),\n cands === null\n ? h('div', {className:'flex-1 flex items-center justify-center p-12'}, h(Spinner,{size:20}))\n : cands.length === 0\n ? h('div', {className:'flex-1 flex items-center justify-center p-12 text-[13px] text-text-muted'}, 'No new leads to import — all caught up.')\n : h('div', {className:'flex-1 overflow-y-auto divide-y divide-border-subtle/50'},\n cands.map(c => h('label', {key:c.email, className:'flex items-center gap-3 px-lg py-2.5 cursor-pointer hover:bg-white/[0.02] ' + (c.likely_prospect ? '' : 'opacity-60')},\n h('input', {type:'checkbox', checked: !!sel[c.email], onChange: () => toggle(c.email), className:'accent-primary w-4 h-4 flex-shrink-0'}),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'text-[13px] font-semibold text-on-surface truncate'}, c.company || c.name || c.email),\n h('div', {className:'text-[11px] text-text-muted truncate'}, c.email + (c.reason ? ' · ' + c.reason : ''))\n ),\n h('span', {className:'text-[10px] px-1.5 py-0.5 rounded-full border flex-shrink-0 ' + (c.likely_prospect ? 'text-secondary border-secondary/40 bg-secondary/10' : 'text-text-muted border-border-subtle')}, c.likely_prospect ? (c.stage || 'lead') : 'system?')\n ))\n ),\n h('div', {className:'p-lg border-t border-border-subtle flex items-center justify-between gap-3'},\n h('div', {className:'flex items-center gap-3 text-[11px] text-text-muted'},\n h('button', {onClick:() => setAll(true), className:'hover:text-on-surface font-semibold'}, 'Select all'),\n h('button', {onClick:() => setAll(false), className:'hover:text-on-surface font-semibold'}, 'None')\n ),\n h(Btn, {onClick: doImport, variant:'primary', size:'sm', disabled: busy || !selectedEmails.length},\n busy ? h(Spinner,{size:13}) : h(Icon,{name:'person_add',size:14}), 'Add ' + selectedEmails.length + ' deal' + (selectedEmails.length===1?'':'s'))\n )\n )\n );\n}\n\n// ─── CRM Workspace ─────────────────────────────────────────────────────────────\nexport function CRMWorkspace({setActivePage}) {\n const { Icon, Btn, PageHeader, MetricCard, Spinner } = N();\n const [deals, setDeals] = useState([]);\n const [loading, setLoading] = useState(true);\n const [view, setView] = useState('board');\n const [openId, setOpenId] = useState(null);\n const [openAccountId, setOpenAccountId] = useState(null);\n const [openContactId, setOpenContactId] = useState(null);\n const [creating, setCreating] = useState(false);\n const [importing, setImporting] = useState(false);\n\n const load = useCallback(async () => {\n setLoading(true);\n try { const r = await fetch('/api/deals'); setDeals(await r.json()); } catch (e) { setDeals([]); }\n setLoading(false);\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const onDragStart = (e, deal) => { e.dataTransfer.setData('deal-id', String(deal.id)); e.dataTransfer.effectAllowed = 'move'; };\n const onDrop = async (e, newStage) => {\n const id = e.dataTransfer.getData('deal-id');\n if (!id) return;\n const d = deals.find(x => String(x.id) === id);\n if (!d || d.stage === newStage) return;\n setDeals(ds => ds.map(x => String(x.id) === id ? {...x, stage:newStage} : x)); // optimistic\n await fetch('/api/deals/' + id, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({stage:newStage})}).catch(()=>{});\n load();\n };\n\n const byStage = {};\n STAGES.forEach(s => byStage[s] = []);\n deals.forEach(d => { (byStage[d.stage] || byStage.lead).push(d); });\n const openCount = deals.filter(d => d.stage !== 'won' && d.stage !== 'lost').length;\n const pipelineValue = deals.filter(d => d.stage !== 'won' && d.stage !== 'lost').reduce((a,d)=>a+(Number(d.amount)||0),0);\n const wonValue = byStage.won.reduce((a,d)=>a+(Number(d.amount)||0),0);\n const closed = byStage.won.length + byStage.lost.length;\n const winRate = closed ? Math.round(byStage.won.length / closed * 100) : 0;\n\n return h('div', {className:'p-lg lg:p-xl max-w-[1440px] mx-auto space-y-lg'},\n h(PageHeader, {\n title:'Sales CRM',\n subtitle:'Pipeline, contacts, and deal activity — seeded from your email/calendar intent signals',\n icon:'contacts'\n }),\n // Summary metrics\n h('div', {className:'grid grid-cols-2 lg:grid-cols-4 gap-md'},\n h(MetricCard, {label:'Pipeline value', value: fmtMoney(pipelineValue), icon:'monitoring', accent:'primary'}),\n h(MetricCard, {label:'Open deals', value: String(openCount), icon:'work', accent:'tertiary'}),\n h(MetricCard, {label:'Won', value: fmtMoney(wonValue), icon:'trophy', accent:'secondary'}),\n h(MetricCard, {label:'Win rate', value: winRate + '%', icon:'percent', accent:'secondary'})\n ),\n // Toolbar\n h('div', {className:'flex items-center justify-between gap-3 flex-wrap'},\n h('div', {className:'inline-flex rounded-lg border border-border-subtle overflow-hidden'},\n [['board','Pipeline','view_kanban'],['list','List','list'],['accounts','Accounts','domain'],['contacts','Contacts','group'],['forecast','Forecast','trending_up'],['leads','Leads','filter_alt'],['productivity','Templates','mail']].map(([v,label,ic]) => h('button', {key:v, onClick: () => setView(v),\n className:'px-3 py-1.5 text-[12px] font-semibold flex items-center gap-1.5 ' + (view===v ? 'bg-primary text-white' : 'bg-surface-container text-text-muted hover:text-on-surface')},\n h(Icon, {name: ic, size:15}), label))\n ),\n h('div', {className:'flex items-center gap-2'},\n loading && (view==='board'||view==='list') && h(Spinner, {size:14}),\n (view==='board'||view==='list') && h(Btn, {onClick: () => setImporting(true), variant:'secondary', size:'sm'}, h(Icon,{name:'person_add',size:14}), 'Import contacts'),\n (view==='board'||view==='list') && h(Btn, {onClick: () => setCreating(true), variant:'primary', size:'sm'}, h(Icon,{name:'add',size:14}), 'New deal')\n )\n ),\n // Body — pipeline board, deal list, accounts, contacts, forecast, leads, or productivity\n view === 'board'\n ? h('div', {className:'grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-md'},\n STAGES.map(s => h(PipelineColumn, {key:s, stage:s, deals: byStage[s], onCardClick: d => setOpenId(d.id), onDragStart, onDrop})))\n : view === 'list'\n ? h(DealListView, {deals, onRowClick: d => setOpenId(d.id)})\n : view === 'accounts'\n ? h(AccountsListView, {onRowClick: id => setOpenAccountId(id)})\n : view === 'contacts'\n ? h(ContactsListView, {onRowClick: id => setOpenContactId(id)})\n : view === 'forecast'\n ? h(ForecastDashboard, {onOpenDeal: id => setOpenId(id)})\n : view === 'leads'\n ? h(LeadsDesk, {onOpenContact: id => setOpenContactId(id)})\n : h(ProductivityPanel, null),\n // Detail panels + create/import modals\n openId && h(DealDetail, {dealId: openId, onClose: () => setOpenId(null), onChanged: load,\n onOpenAccount: id => { setOpenId(null); setOpenAccountId(id); },\n onOpenContact: id => { setOpenId(null); setOpenContactId(id); }}),\n openAccountId && h(AccountDetail, {accountId: openAccountId, onClose: () => setOpenAccountId(null),\n onOpenDeal: id => { setOpenAccountId(null); setOpenId(id); },\n onOpenContact: id => { setOpenAccountId(null); setOpenContactId(id); }}),\n openContactId && h(ContactDetail, {contactId: openContactId, onClose: () => setOpenContactId(null),\n onOpenAccount: id => { setOpenContactId(null); setOpenAccountId(id); },\n onOpenDeal: id => { setOpenContactId(null); setOpenId(id); }}),\n creating && h(NewDealForm, {onClose: () => setCreating(false), onCreated: load}),\n importing && h(ImportContactsModal, {onClose: () => setImporting(false), onImported: load})\n );\n}\n `;\n}\n",[396],"af5dcef8-5e66-11f1-a3ec-1607ee4eb77e","frontend_command.ts","68166c5c-5818-11f1-882d-ee650bb23af1",881,["D",1780393054688],12,"// Command Center - the new \"home\" page. Replaces analytics-style Dashboard at\n// the 'dashboard' route. Operates as a command palette + terminal output panel.\n// Each command is either: a direct fetch to a known API endpoint, an AI chat\n// message, or a UI action (navigate / purge / reload). Output streams into a\n// log panel that keeps history across runs.\n//\n// Served at /api/app-command. Deps come from window.__nexus.\n\nexport function getCommandJS(): string {\n return `\nimport React, { useState, useEffect, useRef, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\nconst fmtTime = () => new Date().toLocaleTimeString('en-US',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit'});\n\n// --- COMMAND CATALOG ---------------------------------------------------------\n// type: 'fetch' (hit an endpoint, show result),\n// 'chat' (send AI chat with prompt, show response),\n// 'nav' (navigate to a page),\n// 'action'(invoke a JS callback)\nconst COMMANDS = [\n // -- STATUS -------------------------------------------------------------\n { cat:'STATUS', icon:'health_and_safety', label:'System Health', type:'fetch', target:'/api/health' },\n { cat:'STATUS', icon:'cable', label:'Check Integrations', type:'fetch', target:'/api/integrations' },\n { cat:'STATUS', icon:'verified_user', label:'Google OAuth Scopes', type:'fetch', target:'/api/integrations/google/data?endpoint=test' },\n { cat:'STATUS', icon:'refresh', label:'Refresh Funnel', type:'fetch', target:'/api/intelligence/funnel-summary?force=1' },\n\n // -- MARKETING ----------------------------------------------------------\n { cat:'MARKETING', icon:'auto_fix_high', label:'Top Keywords (Ahrefs)', type:'fetch', target:'/api/integrations/ahrefs/data?endpoint=keywords' },\n { cat:'MARKETING', icon:'analytics', label:'GA4 KPIs (30d)', type:'fetch', target:'/api/integrations/ga4/data?endpoint=kpi&days=30' },\n { cat:'MARKETING', icon:'search_check', label:'GSC Search Analytics', type:'fetch', target:'/api/integrations/gsc/data?endpoint=search-analytics' },\n { cat:'MARKETING', icon:'web', label:'Recent WordPress Posts', type:'fetch', target:'/api/integrations/wordpress/data?endpoint=posts' },\n { cat:'MARKETING', icon:'smart_display', label:'YouTube Channel Stats', type:'fetch', target:'/api/integrations/youtube/data?endpoint=channels' },\n\n // -- SALES --------------------------------------------------------------\n { cat:'SALES', icon:'contact_mail', label:'AI Lead Ranking (MQL/SQL)', type:'fetch', target:'/api/intelligence/leads' },\n { cat:'SALES', icon:'inbox', label:'Outlook Inbox (recent 20)', type:'fetch', target:'/api/integrations/outlook/data?endpoint=inbox' },\n { cat:'SALES', icon:'event', label:\"Today's Calendar\", type:'fetch', target:'/api/integrations/calendar/data?endpoint=today' },\n { cat:'SALES', icon:'mail', label:'Gmail Unread', type:'fetch', target:'/api/integrations/gmail/data?endpoint=unread' },\n\n // -- INTELLIGENCE -------------------------------------------------------\n { cat:'INTELLIGENCE', icon:'insights', label:'Funnel Summary', type:'fetch', target:'/api/intelligence/funnel-summary' },\n { cat:'INTELLIGENCE', icon:'route', label:'Active Correlations', type:'fetch', target:'/api/intelligence/correlations' },\n { cat:'INTELLIGENCE', icon:'tips_and_updates',label:'Recommendations', type:'fetch', target:'/api/intelligence/recommendations' },\n { cat:'INTELLIGENCE', icon:'functions', label:'AIO KPIs (CAC/LTV/conv)', type:'fetch', target:'/api/intelligence/kpis' },\n { cat:'INTELLIGENCE', icon:'auto_awesome', label:'Intelligence Feed (AI)', type:'fetch', target:'/api/intelligence/feed' },\n\n // -- ASK NEXUS (chat-driven analysis) -----------------------------------\n { cat:'ASK NEXUS', icon:'help_outline', label:'Why is BOFU low?', type:'chat', target:'Why is my BOFU funnel health low? Cite specific metrics and give me 3 actions.' },\n { cat:'ASK NEXUS', icon:'trending_down', label:'Top bottleneck right now', type:'chat', target:\"What's the single biggest bottleneck in my funnel right now? Reference real metric values.\" },\n { cat:'ASK NEXUS', icon:'speed', label:'How to improve conversion?', type:'chat', target:'Given my current funnel state, what are the 3 highest-leverage actions to lift conversion rate?' },\n { cat:'ASK NEXUS', icon:'compare_arrows', label:'CAC vs LTV diagnosis', type:'chat', target:'Analyze my CAC and LTV/CAC ratio. Is the unit economics healthy for a B2B SaaS at this stage?' },\n\n // -- AGENTS -------------------------------------------------------------\n { cat:'AGENTS', icon:'smart_toy', label:'List All Agents', type:'fetch', target:'/api/agents' },\n { cat:'AGENTS', icon:'list_alt', label:'Marketing Agents', type:'fetch', target:'/api/agents?workspace=marketing' },\n { cat:'AGENTS', icon:'business_center',label:'Sales Agents', type:'fetch', target:'/api/agents?workspace=sales' },\n { cat:'AGENTS', icon:'monitoring', label:'Agent Trace', type:'trace' },\n { cat:'AGENTS', icon:'public', label:'Open Agent World ↗', type:'world' },\n { cat:'AGENTS', icon:'open_in_new', label:'Open Agent Studio', type:'nav', target:'agents' },\n\n // -- ADMIN --------------------------------------------------------------\n { cat:'ADMIN', icon:'settings', label:'Show Config', type:'fetch', target:'/api/config' },\n { cat:'ADMIN', icon:'delete_sweep', label:'Purge Cache + History',type:'purge' },\n { cat:'ADMIN', icon:'restart_alt', label:'Reload App', type:'action', target:'reload' },\n { cat:'ADMIN', icon:'open_in_new', label:'Open Settings', type:'nav', target:'settings' },\n];\n\nconst CAT_COLOR = {\n STATUS: {bg:'bg-secondary/10', text:'text-secondary', border:'border-secondary/20'},\n MARKETING: {bg:'bg-primary/10', text:'text-primary', border:'border-primary/20'},\n SALES: {bg:'bg-tertiary/10', text:'text-tertiary', border:'border-tertiary/20'},\n INTELLIGENCE: {bg:'bg-primary/10', text:'text-primary', border:'border-primary/20'},\n 'ASK NEXUS': {bg:'bg-tertiary/10', text:'text-tertiary', border:'border-tertiary/20'},\n AGENTS: {bg:'bg-secondary/10', text:'text-secondary', border:'border-secondary/20'},\n ADMIN: {bg:'bg-error/10', text:'text-error', border:'border-error/20'},\n};\n\n// --- COMMAND CENTER PAGE -----------------------------------------------------\n// Lazy-import widgets module so CommandCenter can render NSM + Today + Digest panels at the top.\n// Falls back to no-op components if the module fails to load (e.g. during an incremental deploy).\nconst _widgets = await import('/api/app-widgets').catch(() => ({}));\nconst NSMHero = _widgets.NSMHero || (() => null);\nconst TodayPanel = _widgets.TodayPanel || (() => null);\nconst DigestPanel = _widgets.DigestPanel || (() => null);\n\n// --- TASKS-BY-DAY AGENDA -----------------------------------------------------\n// Compact \"the day's work\" panel: GET /api/tasks (bearer is attached by the\n// global fetch wrapper), drop completed work, then bucket by due_date into\n// Overdue / Today / Tomorrow / This week. Campaign + objective names are\n// resolved from /api/okrs and /api/campaigns so each row can show a real chip.\n// The whole panel links to the Tasks (calendar) page via setActivePage.\nconst AGENDA_BUCKETS = [\n {key:'overdue', label:'Overdue', icon:'warning', tone:'text-error'},\n {key:'today', label:'Today', icon:'today', tone:'text-primary'},\n {key:'tomorrow', label:'Tomorrow', icon:'wb_sunny', tone:'text-tertiary'},\n {key:'week', label:'This week', icon:'date_range', tone:'text-secondary'},\n];\n\nconst STATUS_TONE = {\n todo: 'bg-white/10 text-text-muted',\n doing: 'bg-tertiary/20 text-tertiary',\n blocked: 'bg-error/20 text-error',\n done: 'bg-secondary/20 text-secondary',\n};\n\n// Local-date key (YYYY-MM-DD) for a Date, so bucketing matches the user's day.\nconst dayKey = (d) => {\n const z = new Date(d.getTime() - d.getTimezoneOffset() * 60000);\n return z.toISOString().slice(0, 10);\n};\n\n// Classify a task's due_date string into a bucket key (or null = not on agenda).\nconst bucketFor = (due) => {\n if (!due) return null;\n const raw = String(due).slice(0, 10);\n const now = new Date();\n const todayK = dayKey(now);\n const tomorrow = new Date(now); tomorrow.setDate(now.getDate() + 1);\n const tomorrowK = dayKey(tomorrow);\n const weekEnd = new Date(now); weekEnd.setDate(now.getDate() + 7);\n const weekEndK = dayKey(weekEnd);\n if (raw < todayK) return 'overdue';\n if (raw === todayK) return 'today';\n if (raw === tomorrowK) return 'tomorrow';\n if (raw <= weekEndK) return 'week';\n return null;\n};\n\nfunction AgendaPanel({setActivePage}) {\n const {Icon, Spinner} = N();\n const [tasks, setTasks] = useState(null); // null = loading\n const [names, setNames] = useState({campaigns:{}, objectives:{}});\n\n useEffect(() => {\n let live = true;\n fetch('/api/tasks')\n .then(r => r.ok ? r.json() : [])\n .then(d => { if (live) setTasks(Array.isArray(d) ? d : []); })\n .catch(() => { if (live) setTasks([]); });\n Promise.all([\n fetch('/api/okrs').then(r => r.ok ? r.json() : []).catch(() => []),\n fetch('/api/campaigns').then(r => r.ok ? r.json() : []).catch(() => []),\n ]).then(([objs, camps]) => {\n if (!live) return;\n const objectives = {}; const campaigns = {};\n (Array.isArray(objs) ? objs : []).forEach(o => { objectives[String(o.id)] = o.title || o.name; });\n (Array.isArray(camps) ? camps : []).forEach(c => { campaigns[String(c.id)] = c.name || c.title; });\n setNames({campaigns, objectives});\n }).catch(() => {});\n return () => { live = false; };\n }, []);\n\n const goTasks = () => setActivePage && setActivePage('tasks');\n\n // Bucket non-done tasks; keep each bucket sorted by due date then ICE desc.\n const grouped = {overdue:[], today:[], tomorrow:[], week:[]};\n (tasks || []).forEach(t => {\n if (t.status === 'done') return;\n const b = bucketFor(t.due_date);\n if (b) grouped[b].push(t);\n });\n Object.keys(grouped).forEach(k => grouped[k].sort((a, b) =>\n String(a.due_date).localeCompare(String(b.due_date)) ||\n (Number(b.ice_score || 0) - Number(a.ice_score || 0))\n ));\n const total = grouped.overdue.length + grouped.today.length + grouped.tomorrow.length + grouped.week.length;\n\n const chip = (icon, txt, tone) => h('span', {\n className:'inline-flex items-center gap-0.5 text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded ' + tone\n }, h(Icon, {name: icon, size: 9}), txt);\n\n const taskRow = (t) => {\n const objName = t.objective_id ? names.objectives[String(t.objective_id)] : null;\n const campName = t.campaign_id ? names.campaigns[String(t.campaign_id)] : null;\n return h('button', {\n key: t.id,\n onClick: goTasks,\n className:'w-full text-left flex items-start gap-2 px-2 py-1.5 rounded-lg bg-white/[0.03] hover:bg-white/[0.06] transition-colors group'\n },\n h('span', {className:'mt-0.5 w-1.5 h-1.5 rounded-full flex-shrink-0 ' +\n (t.priority === 'urgent' || t.priority === 'high' ? 'bg-error' : t.priority === 'low' ? 'bg-white/20' : 'bg-tertiary')}),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'text-[11px] text-on-surface font-medium truncate group-hover:text-primary'}, t.title || 'Untitled'),\n h('div', {className:'flex items-center gap-1 flex-wrap mt-1'},\n chip('radio_button_checked', t.status || 'todo', STATUS_TONE[t.status] || STATUS_TONE.todo),\n campName && chip('campaign', campName, 'bg-primary/10 text-primary border border-primary/20'),\n objName && chip('flag', objName, 'bg-secondary/10 text-secondary border border-secondary/20'),\n t.ice_score != null && chip('bolt', 'ICE ' + Number(t.ice_score).toFixed(1), 'bg-tertiary/10 text-tertiary border border-tertiary/20')\n )\n )\n );\n };\n\n return h('div', {className:'glass-panel rounded-xl flex flex-col'},\n h('button', {\n onClick: goTasks,\n className:'p-md border-b border-border-subtle flex items-center justify-between w-full text-left hover:bg-white/[0.02] transition-colors'\n },\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'checklist', size:18, className:'text-primary'}),\n h('h3', {className:'text-[14px] font-bold'}, 'AGENDA'),\n h('span', {className:'text-[10px] text-text-muted'}, total + ' due')\n ),\n h('span', {className:'flex items-center gap-1 text-[10px] font-bold uppercase tracking-widest text-text-muted group-hover:text-on-surface'},\n 'Open Tasks', h(Icon, {name:'arrow_forward', size:12})\n )\n ),\n h('div', {className:'p-md space-y-md max-h-[420px] overflow-y-auto'},\n tasks === null\n ? h('div', {className:'flex items-center gap-2 text-[11px] text-text-muted py-4 justify-center'}, h(Spinner, {size:14}), 'Loading agenda-')\n : total === 0\n ? h('div', {className:'text-center text-text-muted text-[12px] py-8'},\n h(Icon, {name:'event_available', size:28, className:'opacity-30 mb-2 block mx-auto'}),\n h('div', null, 'Nothing due this week.'),\n h('button', {onClick: goTasks, className:'text-primary hover:underline text-[11px] mt-1'}, 'Plan tasks →')\n )\n : AGENDA_BUCKETS.map(b => {\n const items = grouped[b.key];\n if (!items.length) return null;\n return h('div', {key: b.key, className:'space-y-1.5'},\n h('div', {className:'flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest ' + b.tone},\n h(Icon, {name: b.icon, size: 12}),\n h('span', null, b.label),\n h('span', {className:'text-text-muted font-normal'}, items.length)\n ),\n items.map(taskRow)\n );\n })\n )\n );\n}\n\nexport function CommandCenter({setActivePage, agents, integrations, showToast}) {\n const {Icon, Spinner, PageHeader, Btn} = N();\n const [history, setHistory] = useState([]); // {id, command, status, output, ts}\n const [running, setRunning] = useState(null); // command id while in-flight\n const [filter, setFilter] = useState('');\n const [input, setInput] = useState('');\n const outputRef = useRef(null);\n useEffect(() => { outputRef.current?.scrollTo({top: 0, behavior:'smooth'}); }, [history.length]);\n\n // Categories present after filter\n const filtered = COMMANDS.filter(c =>\n !filter || (c.label + ' ' + c.cat).toLowerCase().includes(filter.toLowerCase())\n );\n const categories = Array.from(new Set(filtered.map(c => c.cat)));\n\n const log = (entry) => setHistory(h => [{...entry, id: Date.now() + '_' + Math.random(), ts: fmtTime()}, ...h].slice(0, 30));\n\n const runCommand = async (cmd) => {\n setRunning(cmd.label);\n log({command: cmd.label, status:'running', cat: cmd.cat});\n try {\n let output;\n if (cmd.type === 'fetch') {\n const r = await fetch(cmd.target);\n const ct = r.headers.get('content-type') || '';\n output = ct.includes('json') ? await r.json() : await r.text();\n log({command: cmd.label, status: r.ok ? 'ok' : 'error', cat: cmd.cat, output, target: cmd.target, http: r.status});\n } else if (cmd.type === 'chat') {\n const r = await fetch('/api/chat', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({message: cmd.target, workspace:'marketing'})});\n const d = await r.json();\n log({command: cmd.label, status: r.ok ? 'ok' : 'error', cat: cmd.cat, output: d.response || d, target: 'chat:' + cmd.target.slice(0,60)});\n } else if (cmd.type === 'nav') {\n setActivePage(cmd.target);\n log({command: cmd.label, status:'ok', cat: cmd.cat, output:'Navigated to - ' + cmd.target});\n } else if (cmd.type === 'world') {\n window.open('/world', '_blank');\n log({command: cmd.label, status:'ok', cat: cmd.cat, output:'Opened the 3D Agent World in a new tab.'});\n } else if (cmd.type === 'action' && cmd.target === 'reload') {\n log({command: cmd.label, status:'ok', cat: cmd.cat, output:'Reloading-'});\n setTimeout(() => window.location.reload(), 400);\n } else if (cmd.type === 'trace') {\n // Surface recent agent runs + their structured trace steps as a readable log.\n // No generic recent-runs endpoint exists, so: list agents, then pull the latest\n // runs for the most recently-created few and merge them newest-first.\n const ar = await fetch('/api/agents');\n const agentList = ar.ok ? await ar.json() : [];\n const recentAgents = (Array.isArray(agentList) ? agentList : []).slice(0, 6);\n const runs = [];\n for (const ag of recentAgents) {\n try {\n const rr = await fetch('/api/agents/' + ag.id + '/runs?limit=5');\n if (!rr.ok) continue;\n const rows = await rr.json();\n (Array.isArray(rows) ? rows : []).forEach(run => runs.push({...run, agent_name: ag.name}));\n } catch (_) { /* skip agent on error */ }\n }\n runs.sort((a, b) => String(b.started_at || '').localeCompare(String(a.started_at || '')));\n log({command: cmd.label, status:'ok', cat: cmd.cat, output: {runs: runs.slice(0, 15)}, target: '/api/agents/{id}/runs (recent)'});\n } else if (cmd.type === 'purge') {\n if (prompt('Type PURGE to confirm wipe of intelligence cache + metric history:') !== 'PURGE') {\n log({command: cmd.label, status:'cancelled', cat: cmd.cat, output:'Cancelled by user.'});\n } else {\n const r = await fetch('/api/admin/purge', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({confirm:'PURGE'})});\n const d = await r.json();\n log({command: cmd.label, status: r.ok ? 'ok' : 'error', cat: cmd.cat, output: d});\n showToast && showToast(r.ok ? 'Purged' : 'Purge failed', r.ok ? 'info' : 'error');\n }\n }\n } catch (e) {\n log({command: cmd.label, status:'error', cat: cmd.cat, output: 'Error: ' + (e.message || e)});\n } finally { setRunning(null); }\n };\n\n const submitFreeform = () => {\n if (!input.trim()) return;\n runCommand({label: input.trim(), cat:'ASK NEXUS', type:'chat', target: input.trim()});\n setInput('');\n };\n\n // --- SMART OUTPUT RENDERER ---------------------------------------------------\n // Detects data shape from output structure + API target and renders visual UI\n // instead of raw JSON. Falls back to <pre> only when no shape matches.\n const CommandOutputRenderer = ({output, target, status}) => {\n if (output == null) return null;\n\n // -- Helpers ----------------------------------------------------------------\n const card = (...children) => h('div', {className:'glass-panel rounded-lg border border-border-subtle/60 bg-white/[0.02] p-2 space-y-1'}, ...children);\n const badge = (label, variant) => {\n const styles = {\n ok: 'bg-secondary/20 text-secondary',\n error: 'bg-error/20 text-error',\n warn: 'bg-tertiary/20 text-tertiary',\n primary: 'bg-primary/15 text-primary',\n muted: 'bg-white/10 text-text-muted',\n };\n return h('span', {className:'px-2 py-0.5 rounded text-[10px] font-bold ' + (styles[variant] || styles.muted)}, label);\n };\n const pill = (label) => h('span', {className:'px-1.5 rounded text-[9px] bg-primary/15 text-primary'}, label);\n const row = (...cols) => h('div', {className:'flex items-center gap-2 flex-wrap'}, ...cols);\n const label = (txt) => h('span', {className:'text-[10px] text-text-muted uppercase tracking-widest'}, txt);\n const val = (txt) => h('span', {className:'text-[11px] text-on-surface font-medium'}, String(txt ?? '-'));\n\n const wrap = (...children) => h('div', {className:'mt-1 space-y-1 text-[11px]'}, ...children);\n\n // -- String output ----------------------------------------------------------\n if (typeof output === 'string') {\n const md = /[#*\\`\\\\n]|^- /m.test(output);\n if (md) {\n const marked = (window.__nexus || {}).marked || (s => s);\n return wrap(h('div', {\n className:'md-body text-on-surface-variant prose prose-invert max-w-none',\n dangerouslySetInnerHTML: {__html: marked(output)}\n }));\n }\n return wrap(h('div', {className:'text-on-surface-variant whitespace-pre-wrap break-words'}, output));\n }\n\n // -- Number / boolean ------------------------------------------------------\n if (typeof output === 'number' || typeof output === 'boolean') {\n return wrap(h('div', {className:'text-on-surface font-medium'}, String(output)));\n }\n\n // -- Object / Array shapes -------------------------------------------------\n const isArr = Array.isArray(output);\n const first = isArr && output.length > 0 ? output[0] : null;\n\n // 0. File-content envelope: {ok:true, mimeType, bytes, truncated, content}\n // Must run BEFORE the health-check case (which also matches output.ok === true).\n if (!isArr && output.ok === true && typeof output.content === 'string' && (output.mimeType || output.bytes != null)) {\n const title = output.title || output.subject || output.name || output.path || 'File';\n return wrap(\n card(\n row(badge('file', 'primary'), val(title)),\n row(\n output.mimeType && label('type'), output.mimeType && val(output.mimeType),\n output.bytes != null && label('bytes'), output.bytes != null && val(output.bytes),\n output.truncated && badge('truncated', 'warn')\n )\n ),\n h('pre', {className:'mt-2 max-h-80 overflow-auto whitespace-pre-wrap text-[12px] leading-relaxed text-on-surface bg-surface-container-lowest rounded p-3 font-mono'}, String(output.content))\n );\n }\n\n // 1. Health check: {status:'ok'|'healthy', ...}\n if (!isArr && (output.status === 'ok' || output.status === 'healthy' || output.ok === true)) {\n const ts = output.timestamp || output.checked_at || output.ts || '';\n return wrap(card(\n row(badge(output.status || 'ok', 'ok'), label('System health'), ts && val(ts)),\n output.db && row(label('db'), val(output.db)),\n output.version && row(label('version'), val(output.version))\n ));\n }\n if (!isArr && (output.status === 'error' || output.error)) {\n return wrap(card(\n row(badge('error', 'error'), val(output.error || output.message || 'Error'))\n ));\n }\n\n // 2. Integration list: array of {name, connected, ...}\n if (isArr && first && first.connected !== undefined) {\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'Integrations'),\n h('div', {className:'grid grid-cols-2 gap-1'},\n output.map((it, i) => h('div', {key:i, className:'flex items-center justify-between px-2 py-1 rounded bg-white/[0.03]'},\n h('span', {className:'text-[11px] text-on-surface truncate'}, it.name || it.id),\n badge(it.connected ? 'connected' : 'disconnected', it.connected ? 'ok' : 'error')\n ))\n )\n ));\n }\n\n // 3. Agents list: array of {name, system_prompt, ...}\n if (isArr && first && first.system_prompt !== undefined) {\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, output.length + ' Agents'),\n h('div', {className:'space-y-1'},\n output.slice(0, 10).map((ag, i) => h('div', {key:i, className:'flex items-center justify-between px-2 py-1 rounded bg-white/[0.03]'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className:'text-[11px] text-on-surface truncate'}, ag.name),\n ag.workspace && pill(ag.workspace)\n ),\n badge(ag.enabled ? 'enabled' : 'disabled', ag.enabled ? 'ok' : 'muted')\n ))\n )\n ));\n }\n\n // 4. Single agent: {name, system_prompt, ...}\n if (!isArr && output.name && output.system_prompt !== undefined) {\n return wrap(card(\n row(h('span', {className:'text-[12px] font-bold text-on-surface'}, output.name), output.workspace && pill(output.workspace), badge(output.enabled ? 'enabled' : 'disabled', output.enabled ? 'ok' : 'muted')),\n output.model && row(label('model'), val(output.model))\n ));\n }\n\n // 4b. Agent runs trace: {runs:[...]} OR array of {status, trace, agent_id}\n // Each run.trace is a JSON string of steps {t,name,preview,ts}. Render a\n // terminal-style log, newest first: agent + status badge + each step.\n const runsArr = (!isArr && Array.isArray(output.runs)) ? output.runs\n : (isArr && first && (first.trace !== undefined || first.agent_id !== undefined) && first.status !== undefined) ? output\n : null;\n if (runsArr) {\n const stepIcon = {tool:'build', message:'chat_bubble', round:'radio_button_checked'};\n const statusVariant = (s) => s === 'completed' || s === 'ok' || s === 'done' ? 'ok'\n : s === 'failed' || s === 'error' ? 'error'\n : s === 'running' ? 'warn' : 'muted';\n const parseTrace = (t) => {\n if (!t) return [];\n if (Array.isArray(t)) return t;\n try { const p = JSON.parse(t); return Array.isArray(p) ? p : []; } catch (_) { return []; }\n };\n const stepText = (st) => st.t === 'tool' ? (st.name + (st.result_preview ? ' - ' + st.result_preview : ''))\n : st.t === 'message' ? (st.preview || '')\n : st.t === 'round' ? ('round ' + (st.n ?? ''))\n : (st.preview || st.name || st.t || '');\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'Agent Trace (' + runsArr.length + ' runs)'),\n runsArr.length === 0 && h('div', {className:'text-[11px] text-text-muted'}, 'No recent runs.'),\n h('div', {className:'space-y-2'},\n runsArr.slice(0, 15).map((run, ri) => {\n const steps = parseTrace(run.trace);\n return h('div', {key: run.id || ri, className:'border-l-2 border-border-subtle/40 pl-2 space-y-1'},\n row(\n badge(run.status || 'unknown', statusVariant(run.status)),\n h('span', {className:'text-[11px] font-medium text-on-surface truncate'}, run.agent_name || run.agent_id || 'agent'),\n run.trigger && pill(run.trigger),\n run.started_at && h('span', {className:'text-[10px] text-text-muted'}, String(run.started_at).replace('T',' ').slice(0,19))\n ),\n run.error && h('div', {className:'text-[10px] text-error truncate'}, String(run.error)),\n steps.length > 0 && h('div', {className:'space-y-0.5 mt-0.5'},\n steps.slice(0, 12).map((st, si) => h('div', {key: si, className:'flex items-start gap-1.5'},\n h(Icon, {name: stepIcon[st.t] || 'circle', size: 12, className:'text-text-muted flex-shrink-0 mt-0.5'}),\n h('span', {className:'text-[10px] text-on-surface-variant break-words'}, stepText(st))\n ))\n ),\n steps.length === 0 && !run.error && h('div', {className:'text-[10px] text-text-muted'}, '(no trace recorded)')\n );\n })\n )\n ));\n }\n\n // 5. Leads: output.leads array or array with mql_score\n const leadsArr = (!isArr && Array.isArray(output.leads)) ? output.leads\n : (isArr && first && first.mql_score != null) ? output : null;\n if (leadsArr) {\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'Leads (' + leadsArr.length + ')'),\n h('div', {className:'space-y-1'},\n leadsArr.slice(0, 8).map((l, i) => h('div', {key:i, className:'flex items-center justify-between px-2 py-1 rounded bg-white/[0.03]'},\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[11px] font-medium text-on-surface truncate'}, l.name || l.email || '-'),\n l.company && h('div', {className:'text-[10px] text-text-muted truncate'}, l.company)\n ),\n h('div', {className:'flex items-center gap-1 flex-shrink-0'},\n l.mql_score != null && badge('MQL ' + Math.round(l.mql_score), l.mql_score >= 70 ? 'ok' : l.mql_score >= 40 ? 'warn' : 'muted'),\n l.sql_score != null && badge('SQL ' + Math.round(l.sql_score), l.sql_score >= 70 ? 'ok' : 'muted')\n )\n ))\n )\n ));\n }\n\n // 6. Funnel summary: {stages: [{name, health, ...}]}\n if (!isArr && Array.isArray(output.stages)) {\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'Funnel Health'),\n h('div', {className:'space-y-2'},\n output.stages.map((s, i) => {\n const pct = Math.min(100, Math.max(0, s.health ?? s.score ?? 0));\n const color = pct >= 70 ? 'bg-secondary' : pct >= 40 ? 'bg-tertiary' : 'bg-error';\n return h('div', {key:i, className:'space-y-0.5'},\n h('div', {className:'flex items-center justify-between'},\n h('span', {className:'text-[11px] text-on-surface'}, s.name || s.stage),\n h('span', {className:'text-[10px] text-text-muted'}, Math.round(pct) + '%')\n ),\n h('div', {className:'h-1.5 rounded-full bg-white/10'},\n h('div', {className:'h-1.5 rounded-full ' + color, style:{width: pct + '%'}})\n )\n );\n })\n ),\n output.overall_health != null && row(label('overall'), badge(Math.round(output.overall_health) + '%', output.overall_health >= 70 ? 'ok' : output.overall_health >= 40 ? 'warn' : 'error'))\n ));\n }\n\n // 7. Correlations: {correlations: [{rule, confidence, ...}]}\n if (!isArr && Array.isArray(output.correlations)) {\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'Correlations'),\n h('div', {className:'space-y-1'},\n output.correlations.slice(0, 6).map((c, i) => h('div', {key:i, className:'px-2 py-1 rounded bg-white/[0.03] flex items-start justify-between gap-2'},\n h('span', {className:'text-[11px] text-on-surface-variant flex-1'}, c.rule || c.description || c.name),\n c.confidence != null && badge(Math.round(c.confidence * 100) + '%', c.confidence >= 0.7 ? 'ok' : 'warn')\n ))\n )\n ));\n }\n\n // 8. Recommendations: {recommendations: [{title, action, ...}]}\n if (!isArr && Array.isArray(output.recommendations)) {\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'Recommendations'),\n h('div', {className:'space-y-1'},\n output.recommendations.slice(0, 6).map((r, i) => h('div', {key:i, className:'px-2 py-1.5 rounded bg-white/[0.03]'},\n h('div', {className:'text-[11px] font-medium text-on-surface'}, r.title || r.action || r.description),\n r.rationale && h('div', {className:'text-[10px] text-text-muted mt-0.5'}, r.rationale),\n r.priority && h('span', {className:'inline-block mt-0.5 px-1.5 py-0.5 rounded text-[9px] bg-primary/15 text-primary'}, r.priority)\n ))\n )\n ));\n }\n\n // 9. KPIs: {cac, ltv, mer, ...}\n if (!isArr && (output.cac != null || output.ltv != null || output.mer != null)) {\n const kpis = [\n {k:'CAC', v: output.cac},\n {k:'LTV', v: output.ltv},\n {k:'MER', v: output.mer},\n {k:'LTV:CAC', v: output.ltv_cac_ratio},\n {k:'Conv%', v: output.conversion_rate != null ? (output.conversion_rate * 100).toFixed(1) + '%' : null},\n {k:'ARPU', v: output.arpu},\n ].filter(x => x.v != null);\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'KPIs'),\n h('div', {className:'flex flex-wrap gap-2'},\n kpis.map((kpi, i) => h('div', {key:i, className:'flex flex-col items-center px-3 py-1.5 rounded-lg bg-primary/10'},\n h('span', {className:'text-[9px] text-text-muted uppercase tracking-widest'}, kpi.k),\n h('span', {className:'text-[13px] font-bold text-primary'}, typeof kpi.v === 'number' ? kpi.v.toLocaleString() : kpi.v)\n ))\n )\n ));\n }\n\n // 10. Intelligence feed: array of canonical cards from getIntelligenceFeed.\n // Backend emits type ∈ {correlation,anomaly,opportunity,risk,win} with\n // real fields title + body(description) + priority(severity).\n const FEED_TYPES = ['correlation','anomaly','opportunity','risk','win'];\n if (isArr && first && FEED_TYPES.indexOf(first.type) !== -1) {\n const typeColor = {correlation:'primary', anomaly:'warn', opportunity:'ok', risk:'error', win:'ok'};\n const typeIcon = {correlation:'route', anomaly:'warning', opportunity:'lightbulb', risk:'priority_high', win:'emoji_events'};\n const typeText = {correlation:'text-primary', anomaly:'text-tertiary', opportunity:'text-secondary', risk:'text-error', win:'text-secondary'};\n const sevColor = {critical:'error', high:'warn', medium:'primary', low:'muted'};\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'Intelligence Feed'),\n h('div', {className:'space-y-1'},\n output.slice(0, 8).map((item, i) => {\n const desc = item.body || item.description || item.message;\n const sev = item.priority || item.severity;\n return h('div', {key:i, className:'px-2 py-1.5 rounded bg-white/[0.03] flex items-start gap-2'},\n h(Icon, {name: typeIcon[item.type] || 'auto_awesome', size: 14, className:'flex-shrink-0 mt-0.5 ' + (typeText[item.type] || 'text-text-muted')}),\n h('div', {className:'flex-1 min-w-0'},\n row(\n badge(item.type, typeColor[item.type] || 'muted'),\n sev && badge(sev, sevColor[sev] || 'muted')\n ),\n h('div', {className:'text-[11px] font-medium text-on-surface truncate mt-0.5'}, item.title || item.message),\n desc && h('div', {className:'text-[10px] text-text-muted line-clamp-2'}, desc)\n )\n );\n })\n )\n ));\n }\n\n // 11. LLM Config: {provider, model, ...}\n if (!isArr && output.provider && output.model) {\n return wrap(card(\n row(label('provider'), badge(output.provider, 'primary'), label('model'), val(output.model)),\n output.temperature != null && row(label('temperature'), val(output.temperature)),\n output.max_tokens != null && row(label('max tokens'), val(output.max_tokens))\n ));\n }\n\n // 12. Flat object with -10 primitive-value keys\n if (!isArr && typeof output === 'object') {\n const keys = Object.keys(output);\n const allPrimitive = keys.every(k => {\n const t = typeof output[k];\n return t === 'string' || t === 'number' || t === 'boolean' || output[k] == null;\n });\n if (allPrimitive && keys.length <= 10) {\n return wrap(card(\n h('div', {className:'flex flex-wrap gap-x-4 gap-y-1'},\n keys.map(k => h('div', {key:k, className:'flex items-center gap-1'},\n label(k),\n val(output[k])\n ))\n )\n ));\n }\n }\n\n // 13. Array of plain objects - mini table (first 8 rows, first 5 cols)\n if (isArr && first && typeof first === 'object' && !Array.isArray(first)) {\n const cols = Object.keys(first).slice(0, 5);\n return wrap(card(\n h('table', {className:'w-full text-[10px]'},\n h('thead', null, h('tr', null,\n cols.map(c => h('th', {key:c, className:'text-left text-text-muted font-normal pb-1 pr-3 uppercase tracking-widest'}, c))\n )),\n h('tbody', null,\n output.slice(0, 8).map((row_, ri) => h('tr', {key:ri, className:'border-t border-border-subtle/30'},\n cols.map(c => h('td', {key:c, className:'py-1 pr-3 text-on-surface-variant truncate max-w-[120px]'},\n String(row_[c] ?? '-')\n ))\n ))\n )\n ),\n output.length > 8 && h('div', {className:'text-[10px] text-text-muted mt-1'}, '+ ' + (output.length - 8) + ' more rows')\n ));\n }\n\n // 14. Fallback - pre with truncated JSON\n try {\n const raw = JSON.stringify(output, null, 2);\n return wrap(h('pre', {\n className:'bg-surface-container-lowest p-2 rounded text-[11px] text-on-surface-variant overflow-x-auto max-h-48 overflow-y-auto whitespace-pre-wrap break-all',\n style:{lineHeight:1.4}\n }, raw.slice(0, 3000)));\n } catch {\n return wrap(h('div', {className:'text-text-muted'}, String(output).slice(0, 3000)));\n }\n };\n\n return h('div', {className:'p-lg lg:p-xl max-w-[1440px] mx-auto space-y-lg'},\n h(PageHeader, {\n title:'Command Center',\n subtitle:'North Star - Growth Digest - Real-time command palette. Every operation hits a live endpoint.'\n }),\n\n // -- Framework hero row: NSM + Today + Digest -------------------------\n h('div', {className:'grid grid-cols-1 lg:grid-cols-3 gap-lg'},\n h(NSMHero, {setActivePage}),\n h(TodayPanel, {setActivePage}),\n h(DigestPanel, null)\n ),\n\n // -- Tasks-by-day agenda: the day's work ------------------------------\n h(AgendaPanel, {setActivePage}),\n\n // -- Freeform input bar -----------------------------------------------\n h('div', {className:'glass-panel rounded-xl p-md flex items-center gap-3'},\n h(Icon, {name:'terminal', size:20, className:'text-primary flex-shrink-0'}),\n h('input', {\n value: input, onChange: e => setInput(e.target.value),\n onKeyDown: e => { if (e.key === 'Enter') submitFreeform(); },\n placeholder:'> ask Nexus anything, or type a command name to filter-',\n className:'flex-1 bg-transparent border-none text-on-surface text-[14px] outline-none font-mono-data placeholder:text-text-muted'\n }),\n h('button', {\n onClick: () => { setFilter(input); },\n className:'text-[10px] font-bold uppercase tracking-widest text-text-muted hover:text-on-surface px-2 py-1 rounded border border-border-subtle'\n }, 'Filter'),\n filter && h('button', {\n onClick: () => { setFilter(''); setInput(''); },\n className:'text-[10px] font-bold uppercase tracking-widest text-error hover:bg-error/10 px-2 py-1 rounded'\n }, 'Clear filter'),\n h('button', {\n onClick: submitFreeform,\n className:'bg-primary text-on-primary px-4 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-widest hover:opacity-90'\n }, 'Run')\n ),\n\n // -- Two-column: command palette + output log ------------------------\n h('div', {className:'grid grid-cols-1 xl:grid-cols-2 gap-lg'},\n // Left: command palette grouped by category\n h('div', {className:'glass-panel rounded-xl p-lg space-y-md max-h-[640px] overflow-y-auto'},\n categories.map(cat => {\n const cmds = filtered.filter(c => c.cat === cat);\n const cc = CAT_COLOR[cat] || CAT_COLOR.STATUS;\n return h('div', {key: cat, className:'space-y-2'},\n h('div', {className:'flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest ' + cc.text + ' pt-1'},\n h('span', null, '- ' + cat),\n h('span', {className:'text-text-muted font-normal'}, cmds.length)\n ),\n h('div', {className:'grid grid-cols-1 sm:grid-cols-2 gap-2'},\n cmds.map(cmd => h('button', {\n key: cmd.label,\n onClick: () => runCommand(cmd),\n disabled: running === cmd.label,\n className: 'flex items-center gap-2 px-3 py-2 rounded-lg border text-left transition-all ' + cc.border + ' ' + cc.bg +\n ' hover:opacity-100 hover:scale-[1.01] ' +\n (running === cmd.label ? 'opacity-50 cursor-wait' : 'cursor-pointer')\n },\n running === cmd.label ? h(Spinner, {size:14}) : h(Icon, {name: cmd.icon, size: 16, className: cc.text}),\n h('span', {className:'text-[12px] font-medium text-on-surface flex-1 truncate'}, cmd.label),\n cmd.type === 'chat' && h(Icon, {name:'auto_awesome', size:12, className:'text-text-muted'}),\n cmd.type === 'nav' && h(Icon, {name:'arrow_forward', size:12, className:'text-text-muted'})\n ))\n )\n );\n }),\n categories.length === 0 && h('div', {className:'text-center text-text-muted text-[13px] py-6'}, 'No commands match filter.')\n ),\n\n // Right: terminal-style output log\n h('div', {className:'glass-panel rounded-xl flex flex-col max-h-[640px]'},\n h('div', {className:'p-md border-b border-border-subtle flex justify-between items-center'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'monitor_heart', size:18, className:'text-secondary'}),\n h('h3', {className:'text-[14px] font-bold'}, 'OUTPUT'),\n h('span', {className:'text-[10px] text-text-muted'}, history.length + ' runs')\n ),\n h('button', {\n onClick: () => setHistory([]),\n className:'text-[10px] font-bold uppercase tracking-widest text-text-muted hover:text-on-surface px-2 py-1 rounded',\n disabled: history.length === 0\n }, 'Clear')\n ),\n h('div', {ref: outputRef, className:'flex-1 overflow-y-auto p-md space-y-3 font-mono-data text-[12px]'},\n history.length === 0\n ? h('div', {className:'text-center text-text-muted py-12'},\n h(Icon, {name:'terminal', size:32, className:'opacity-30 mb-2 block mx-auto'}),\n h('div', null, 'Run a command to see output here.')\n )\n : history.map(entry => {\n const cc = CAT_COLOR[entry.cat] || CAT_COLOR.STATUS;\n const statusColor = entry.status === 'ok' ? 'text-secondary' : entry.status === 'error' ? 'text-error' : entry.status === 'running' ? 'text-tertiary' : 'text-text-muted';\n return h('div', {key: entry.id, className:'border-l-2 ' + cc.border + ' pl-3 space-y-1'},\n h('div', {className:'flex items-center justify-between text-[11px]'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className: 'font-bold ' + statusColor}, '> '),\n h('span', {className:'text-on-surface truncate'}, entry.command),\n entry.cat && h('span', {className: cc.text + ' text-[9px] uppercase tracking-widest px-1.5 rounded ' + cc.bg}, entry.cat)\n ),\n h('span', {className:'text-text-muted text-[10px] flex-shrink-0 ml-2'}, entry.ts)\n ),\n entry.target && h('div', {className:'text-text-muted text-[10px] truncate'}, entry.target),\n entry.status === 'running' && h('div', {className:'text-tertiary text-[11px] flex items-center gap-2'}, h(Spinner,{size:11}), 'Running-'),\n entry.output != null && entry.status !== 'running' && h(CommandOutputRenderer, {output: entry.output, target: entry.target, status: entry.status})\n );\n })\n ),\n // Footer status strip\n h('div', {className:'p-2 border-t border-border-subtle flex items-center justify-between text-[10px] text-text-muted'},\n h('div', {className:'flex items-center gap-3'},\n h('span', null, integrations?.length || 0, ' integrations'),\n h('span', null, '-'),\n h('span', null, agents?.filter(a => a.enabled).length || 0, '/', agents?.length || 0, ' agents'),\n h('span', null, '-'),\n h('span', {className:'flex items-center gap-1'},\n h('span', {className:'w-1.5 h-1.5 rounded-full bg-secondary pulse-dot'}),\n 'live'\n )\n ),\n h('span', {className:'font-mono-data'}, COMMANDS.length, ' commands available')\n )\n )\n )\n );\n}\n `;\n}\n",[403],"b29d73a2-5e66-11f1-8a0f-1607ee4eb77e","frontend_charts.ts","46cbad18-5774-11f1-b9d5-ee650bb23af1",886,["D",1780393060117],"// Chart and complex components served as ES module at /api/app-charts\n// Imported dynamically by frontend_js.ts main app.\n// Colors aligned with Nexus AI palette: primary #c0c1ff, secondary #4edea3, tertiary #d0bcff.\n\nexport function getChartsJS(): string {\n return `\nimport React, { useState, useEffect } from 'react';\n\nconst h = React.createElement;\n// Tiny Material Symbols icon helper (charts is loaded before UI module, so inline).\nconst mi = (name, size=14, color='currentColor') => h('span', {\n className:'material-symbols-outlined',\n style:{fontSize:size+'px', color, lineHeight:1, verticalAlign:'middle'}\n}, name);\n\nconst C = {\n primary: '#c0c1ff',\n secondary: '#4edea3',\n tertiary: '#d0bcff',\n surface: '#0e0e11',\n surfaceMid:'#201f22',\n border: 'rgba(255,255,255,0.08)',\n text: '#e5e1e5',\n textMid: '#c7c4d7',\n textMute: '#64748b',\n error: '#ffb4ab',\n warn: '#d0bcff',\n};\n\nexport function Sparkline({data = [], color = '#c0c1ff', width = 72, height = 28}) {\n if (data.length < 2) return null;\n const mn = Math.min(...data), mx = Math.max(...data), r = mx - mn || 1;\n const pts = data.map((v,i) => [(i/(data.length-1))*width, height-((v-mn)/r)*(height-4)+2].join(',')).join(' ');\n const trend = data[data.length-1] > data[0];\n const c = color === 'auto' ? (trend ? C.secondary : C.error) : color;\n return h('svg', {width, height, style:{overflow:'visible', display:'block'}},\n h('polyline', {points: pts, fill:'none', stroke: c, strokeWidth: 1.5, strokeLinejoin:'round', strokeLinecap:'round'})\n );\n}\n\nexport function BarChart({data = [], labelKey = 'label', valueKey = 'value', color = '#c0c1ff', maxBars = 10, showValues = true}) {\n if (!data.length) return null;\n const items = data.slice(0, maxBars);\n const max = Math.max(...items.map(d => Number(d[valueKey]) || 0)) || 1;\n const fmtN = v => v >= 1e6 ? (v/1e6).toFixed(1)+'M' : v >= 1e3 ? (v/1e3).toFixed(1)+'K' : String(v);\n return h('div', {className:'flex flex-col gap-1.5 w-full'},\n items.map((d, i) => {\n const val = Number(d[valueKey]) || 0;\n const pct = (val / max) * 100;\n return h('div', {key:i, className:'flex items-center gap-2'},\n h('div', {\n className:'text-[12px] text-on-surface-variant truncate flex-shrink-0 text-right',\n style:{width: 140}\n }, String(d[labelKey] || '').slice(0, 25)),\n h('div', {className:'flex-1 h-5 bg-surface-container-high rounded overflow-hidden relative'},\n h('div', {\n className:'h-full rounded transition-all duration-500',\n style:{width: pct + '%', background: color}\n })\n ),\n showValues && h('div', {\n className:'text-[11px] text-text-muted text-right flex-shrink-0 font-mono-data',\n style:{width: 48}\n }, fmtN(val))\n );\n })\n );\n}\n\nexport function DonutChart({data = [], size = 120, thickness = 18, centerLabel = '', centerSub = ''}) {\n if (!data.length) return null;\n const total = data.reduce((s, d) => s + (d.value || 0), 0) || 1;\n const r = (size - thickness) / 2;\n const circ = 2 * Math.PI * r;\n let offset = 0;\n const slices = data.map((d, i) => {\n const pct = (d.value || 0) / total;\n const dash = pct * circ;\n const gap = circ - dash;\n const slice = h('circle', {\n key: i, cx: size/2, cy: size/2, r,\n fill:'none', stroke: d.color || C.primary, strokeWidth: thickness,\n strokeDasharray: dash + ' ' + gap,\n strokeDashoffset: -offset, strokeLinecap:'round',\n style:{transform:'rotate(-90deg)', transformOrigin:'50% 50%'}\n });\n offset += dash;\n return slice;\n });\n return h('div', {className:'relative flex-shrink-0', style:{width: size, height: size}},\n h('svg', {width: size, height: size}, ...slices),\n h('div', {className:'absolute inset-0 flex flex-col items-center justify-center'},\n centerLabel && h('div', {className:'text-[18px] font-extrabold text-on-surface leading-none'}, centerLabel),\n centerSub && h('div', {className:'text-[10px] text-text-muted text-center mt-0.5'}, centerSub)\n )\n );\n}\n\nexport function LineChart({data = [], xKey = 'date', yKey = 'sessions', color = '#c0c1ff', height = 110}) {\n if (data.length < 2) return null;\n const vals = data.map(d => Number(d[yKey]) || 0);\n const mn = Math.min(...vals), mx = Math.max(...vals), r = mx - mn || 1;\n const W = 600, H = height;\n const pts = vals.map((v, i) => ((i/(vals.length-1))*W) + ',' + (H - ((v-mn)/r)*(H-16) + 8)).join(' ');\n const first = vals[0], last = vals[vals.length-1];\n const pct = first ? ((last - first) / first * 100) : 0;\n const up = pct >= 0;\n const fmtN = v => v >= 1e6 ? (v/1e6).toFixed(1)+'M' : v >= 1e3 ? (v/1e3).toFixed(1)+'K' : String(Math.round(v));\n const xFirst = String(data[0]?.[xKey] || '').replace(/(\\\\d{4})(\\\\d{2})(\\\\d{2})/, '$1-$2-$3');\n const xLast = String(data.at(-1)?.[xKey] || '').replace(/(\\\\d{4})(\\\\d{2})(\\\\d{2})/, '$1-$2-$3');\n return h('div', {className:'w-full'},\n h('div', {className:'flex justify-between items-center mb-2'},\n h('span', {className:'text-[11px] text-text-muted font-mono-data'}, xFirst + ' → ' + xLast),\n h('span', {\n className:'text-[12px] font-bold',\n style:{color: up ? C.secondary : C.error}\n }, (up ? '↑ +' : '↓ ') + Math.abs(pct).toFixed(1) + '%')\n ),\n h('svg', {\n viewBox:'0 0 ' + W + ' ' + H,\n style:{width:'100%', height: H, display:'block'},\n preserveAspectRatio:'none'\n },\n [0.33, 0.66].map((t, i) => h('line', {key:i, x1:0, x2:W, y1: H*t, y2: H*t, stroke: C.border, strokeWidth: 1})),\n h('polygon', {points:'0,' + H + ' ' + pts + ' ' + W + ',' + H, fill: color + '22'}),\n h('polyline', {points: pts, fill:'none', stroke: color, strokeWidth: 2.5, strokeLinejoin:'round', strokeLinecap:'round'})\n ),\n h('div', {className:'flex justify-between mt-1'},\n h('span', {className:'text-[11px] text-text-muted font-mono-data'}, fmtN(first)),\n h('span', {className:'text-[13px] font-bold text-on-surface font-mono-data'}, fmtN(last))\n )\n );\n}\n\nexport function ChannelChart({data = [], labelKey = 'sessionDefaultChannelGroup', valueKey = 'sessions'}) {\n if (!data.length) return null;\n const COLORS = ['#c0c1ff', '#4edea3', '#d0bcff', '#8083ff', '#6ffbbe', '#a078ff', '#e1e0ff', '#494bd6'];\n const total = data.reduce((s, d) => s + (Number(d[valueKey]) || 0), 0) || 1;\n const fmtN = v => v >= 1e6 ? (v/1e6).toFixed(1)+'M' : v >= 1e3 ? (v/1e3).toFixed(1)+'K' : String(v);\n return h('div', {className:'flex flex-col gap-2.5'},\n data.slice(0, 8).map((d, i) => {\n const val = Number(d[valueKey]) || 0;\n const pct = (val / total * 100).toFixed(1);\n const c = COLORS[i % COLORS.length];\n const label = String(d[labelKey] || '').replace(/_/g, ' ');\n return h('div', {key:i},\n h('div', {className:'flex justify-between mb-1.5'},\n h('span', {className:'text-[12px] text-on-surface-variant flex items-center gap-1.5'},\n h('span', {className:'w-2 h-2 rounded-full flex-shrink-0', style:{background: c}}),\n label\n ),\n h('span', {className:'text-[12px] font-semibold text-on-surface font-mono-data'},\n fmtN(val) + ' (' + pct + '%)'\n )\n ),\n h('div', {className:'h-1.5 bg-surface-container-high rounded overflow-hidden'},\n h('div', {\n className:'h-full rounded transition-all duration-700',\n style:{width: pct + '%', background: c}\n })\n )\n );\n })\n );\n}\n\n// ─── FunnelFlowChart (Phase 1 Advanced — v2 fixed) ──────────────────────────\n// Three equal-height rounded boxes, color-tinted by stage health (green/amber/red),\n// connected by dashed arrows labeled with drop-off %. Replaces v1 which sized\n// boxes by raw metric volume — that collapsed empty stages and overlapped text.\nexport function FunnelFlowChart({stages = []}) {\n if (!stages.length) return null;\n const W = 720, H = 200, padX = 20, padY = 20, gap = 36;\n const bandWidth = (W - padX*2 - gap*2) / 3;\n const colorFor = (score) => score > 75 ? C.secondary : score >= 50 ? C.warn : C.error;\n // Drop-off = degradation in health from one stage to the next.\n const dropOf = (a, b) => {\n const av = (a?.health_score || 0), bv = (b?.health_score || 0);\n if (av === 0) return 0;\n return Math.max(0, Math.round((1 - bv / av) * 100));\n };\n return h('div', {className:'w-full overflow-x-auto'},\n h('svg', {\n viewBox: '0 0 ' + W + ' ' + H,\n style:{width:'100%', maxWidth: W + 'px', height: H + 'px', display:'block'},\n preserveAspectRatio:'xMidYMid meet'\n },\n stages.map((s, i) => {\n const boxH = H - padY * 2; // equal height\n const x = padX + i * (bandWidth + gap);\n const y = padY;\n const color = colorFor(s.health_score || 0);\n const filledH = ((s.health_score || 0) / 100) * (boxH - 12);\n return h('g', {key: s.stage},\n // outer card\n h('rect', {x, y, width: bandWidth, height: boxH, rx: 14, fill: color + '14', stroke: color + 'aa', strokeWidth: 1.5}),\n // health fill (battery indicator at bottom)\n h('rect', {x: x + 6, y: y + boxH - filledH - 6, width: bandWidth - 12, height: Math.max(0, filledH), rx: 10, fill: color + '33'}),\n // stage label (top)\n h('text', {x: x + bandWidth/2, y: y + 28, fill: color, fontSize: 11, fontWeight: 700, textAnchor:'middle', style:{letterSpacing:'0.1em'}}, s.stage),\n // big % (middle)\n h('text', {x: x + bandWidth/2, y: y + boxH/2 + 12, fill: C.text, fontSize: 36, fontWeight: 800, textAnchor:'middle', style:{fontVariantNumeric:'tabular-nums'}}, String(s.health_score || 0) + '%'),\n // metrics count (bottom)\n h('text', {x: x + bandWidth/2, y: y + boxH - 16, fill: C.textMid, fontSize: 11, textAnchor:'middle'}, (s.metrics?.length || 0) + ' metrics'),\n // connecting arrow + drop-off label\n i < stages.length - 1 && (() => {\n const drop = dropOf(s, stages[i+1]);\n const ax = x + bandWidth;\n const ay = y + boxH/2;\n return h('g', null,\n h('line', {x1: ax + 4, y1: ay, x2: ax + gap - 6, y2: ay, stroke: C.textMute, strokeWidth: 1.5, strokeDasharray:'4 4'}),\n h('polygon', {points: (ax + gap - 6) + ',' + (ay - 5) + ' ' + (ax + gap - 1) + ',' + ay + ' ' + (ax + gap - 6) + ',' + (ay + 5), fill: C.textMute}),\n h('text', {x: ax + gap/2, y: ay - 12, fill: drop > 30 ? C.warn : C.textMid, fontSize: 10, fontWeight: 700, textAnchor:'middle'}, drop > 0 ? '−' + drop + '%' : '—')\n );\n })()\n );\n })\n )\n );\n}\n\n// ─── PipelineVelocityChart (Sales — Phase 1 Advanced) ──────────────────────\n// Bar chart of real pipeline stages passed from the page (funnel-summary).\n// Bars scaled to the max passed value; the active stage gets neon-stroke +\n// secondary color. No data passed -> honest empty state (no fabricated stages).\nexport function PipelineVelocityChart({stages, currentStage = null}) {\n // Render ONLY real data passed by the page (GET /api/intelligence/funnel-summary).\n // No hardcoded DEFAULTS, no fabricated 'Proposal' active stage. No data -> honest empty state.\n const data = Array.isArray(stages) ? stages : [];\n if (!data.length) {\n return h('div', {className:'flex items-center justify-center h-48 px-2 text-text-muted text-[12px] text-center'},\n 'No pipeline data yet. Connect a CRM and capture deals to see stage velocity.'\n );\n }\n const max = Math.max(...data.map(s => Number(s.value) || 0)) || 1;\n return h('div', {className:'flex items-end gap-3 h-48 px-2'},\n data.map((s, i) => {\n const label = s.label != null ? s.label : (s.name != null ? s.name : '');\n const val = Number(s.value) || 0;\n const active = currentStage != null && label === currentStage;\n return h('div', {key: label || i, className:'flex-1 flex flex-col gap-2 items-center group cursor-pointer'},\n h('div', {\n className:'w-full rounded-t-sm transition-all ' +\n (active\n ? 'bg-secondary/80'\n : 'bg-surface-container-high group-hover:bg-primary-container/20'),\n style:{\n height: (val / max * 100) + '%',\n ...(active ? {boxShadow:'0 0 10px rgba(78,222,163,0.4)', border:'1px solid #4edea3'} : {})\n }\n }),\n h('span', {className: 'text-[9px] font-bold uppercase tracking-widest ' + (active?'text-secondary':'text-text-muted')}, label)\n );\n })\n );\n}\n\nexport function IntegrationDonut({integrations}) {\n const connected = integrations.filter(i => i.connected).length;\n const total = integrations.length;\n const data = [\n { value: connected, color: C.secondary },\n { value: total - connected, color: C.border },\n ];\n return h('div', {className:'flex items-center gap-4'},\n h(DonutChart, {data, size: 80, thickness: 12, centerLabel: String(connected), centerSub:'of ' + total}),\n h('div', null,\n h('div', {className:'text-[14px] font-bold text-on-surface'}, connected + ' Connected'),\n h('div', {className:'text-[12px] text-text-muted mt-1'}, (total - connected) + ' not configured'),\n data[0].value > 0 && h('div', {\n className:'text-[11px] text-secondary mt-1.5 flex items-center gap-1'\n }, mi('trending_up', 12, C.secondary), Math.round(connected/total*100) + '% coverage')\n )\n );\n}\n `;\n}\n",[411],"aada8452-5e66-11f1-8a0f-1607ee4eb77e","frontend_campaigns.ts","fb37abdc-5998-11f1-a05f-ee650bb23af1",873,["D",1780393047117],8,"// Campaigns page — multi-agent CAMPAIGNS backed by the real /api/campaigns model.\n// A campaign is a container with MANY member agents (campaign.agents, ordered by sequence)\n// that the Director orchestrates on a run: each pipeline step's output, then a synthesized\n// final_output. This page fetches GET /api/campaigns, renders one card per campaign with its\n// status / mode / goal / member-agent pipeline, and lets you Run, Pause/Activate, schedule a\n// Trigger, and inspect recent runs — all against the real REST endpoints.\n//\n// Served at /api/app-campaigns (router.ts jsModules); loaded in frontend_js.ts and\n// rendered by the 'campaigns' nav page (renderPage in frontend_js2.ts).\n//\n// Split module so files stay under val.town's 80K limit.\n\nexport function getCampaignsJS(): string {\n return `\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// Full campaign status palette (draft|active|paused|scheduled|running|completed) — colored by status.\nconst STATUS_META = {\n draft: {color:'text-tertiary', bg:'bg-tertiary/15', label:'Draft', dot:'bg-tertiary'},\n active: {color:'text-secondary', bg:'bg-secondary/15', label:'Active', dot:'bg-secondary'},\n paused: {color:'text-text-muted', bg:'bg-surface-container-high', label:'Paused', dot:'bg-text-muted'},\n scheduled: {color:'text-[#0a66c2]', bg:'bg-[#0a66c2]/15', label:'Scheduled', dot:'bg-[#0a66c2]'},\n running: {color:'text-warning', bg:'bg-warning/15', label:'Running', dot:'bg-warning animate-pulse'},\n completed: {color:'text-primary', bg:'bg-primary/15', label:'Completed', dot:'bg-primary'},\n};\nconst statFor = (s) => STATUS_META[String(s || 'draft').toLowerCase()] || STATUS_META.draft;\n\nconst MODE_META = {\n sequential: {icon:'linear_scale', label:'Sequential', desc:'Each agent hands its output to the next'},\n parallel: {icon:'call_split', label:'Parallel', desc:'Agents work independently, Director synthesizes'},\n};\nconst modeFor = (m) => MODE_META[String(m || 'sequential').toLowerCase()] || MODE_META.sequential;\n\nfunction timeAgo(iso) {\n if (!iso) return '';\n const d = new Date(iso.includes('T') || iso.includes(' ') ? iso : iso); const now = new Date();\n const sec = Math.floor((now - d) / 1000);\n if (isNaN(sec)) return '';\n if (sec < 60) return sec + 's ago';\n if (sec < 3600) return Math.floor(sec/60) + 'm ago';\n if (sec < 86400) return Math.floor(sec/3600) + 'h ago';\n if (sec < 2592000) return Math.floor(sec/86400) + 'd ago';\n return d.toLocaleDateString();\n}\n\n// Ordered member-agent pipeline string, e.g. \"1. Research Agent (research) -> 2. Strategy Agent -> 3. Compose Agent\".\nfunction pipelineLabel(agents) {\n const list = Array.isArray(agents) ? agents.slice().sort((a,b) => (a.sequence||0) - (b.sequence||0)) : [];\n return list.map((m, i) => {\n const name = (m.agent && m.agent.name) || m.name || ('Agent ' + (i+1));\n const role = m.role && m.role !== 'member' ? ' (' + m.role + ')' : '';\n return (i+1) + '. ' + name + role;\n }).join(' → ');\n}\n\n// ─── Director run result panel — pipeline steps + highlighted final synthesis ──\nfunction RunResultPanel(props) {\n const {Icon, marked} = N();\n const run = props.run;\n const [openStep, setOpenStep] = useState(-1);\n if (!run) return null;\n const md = (s) => {\n try { return marked ? marked(String(s || '')) : String(s || ''); } catch (e) { return String(s || ''); }\n };\n const pipeline = Array.isArray(run.pipeline) ? run.pipeline : [];\n const failed = run.status === 'failed' || run.error;\n return h('div', {className:'mt-3 rounded-lg border border-primary/30 bg-surface-container-lowest/60 overflow-hidden'},\n h('div', {className:'flex items-center gap-2 px-3 py-2 border-b border-border-subtle/60 bg-primary/5'},\n h(Icon, {name: failed ? 'error' : 'auto_awesome', size:14, className: failed ? 'text-error' : 'text-primary'}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest ' + (failed ? 'text-error' : 'text-primary')},\n failed ? 'Director run failed' : 'Director run'),\n h('span', {className:'text-[10px] text-text-muted ml-auto'}, (run.mode ? run.mode + ' · ' : '') + pipeline.length + ' agents')\n ),\n // Per-agent pipeline steps (collapsible)\n pipeline.length > 0 && h('div', {className:'p-2 space-y-1.5'},\n pipeline.map((p, i) => {\n const open = openStep === i;\n return h('div', {key: i, className:'rounded-md border border-border-subtle/50 bg-surface-container/40 overflow-hidden'},\n h('button', {\n onClick: () => setOpenStep(open ? -1 : i),\n className:'w-full flex items-center gap-2 px-2.5 py-1.5 text-left hover:bg-surface-container-high/40 transition-colors'\n },\n h('span', {className:'w-5 h-5 rounded-full bg-primary/15 text-primary text-[10px] font-bold flex items-center justify-center flex-shrink-0'}, i+1),\n h('span', {className:'text-[12px] font-semibold text-on-surface truncate'}, p.agent || ('Agent ' + (i+1))),\n p.role && h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted px-1.5 py-0.5 rounded bg-surface-container-high'}, p.role),\n h(Icon, {name: open ? 'expand_less' : 'expand_more', size:14, className:'text-text-muted ml-auto'})\n ),\n open && h('div', {\n className:'px-3 py-2 border-t border-border-subtle/50 text-[12px] text-on-surface-variant leading-relaxed prose-tight max-h-[260px] overflow-y-auto',\n dangerouslySetInnerHTML: {__html: md(p.output)}\n })\n );\n })\n ),\n // The Director synthesis — highlighted final deliverable handed back.\n (run.final_output || run.error) && h('div', {className:'m-2 mt-1 rounded-lg border border-primary/40 bg-primary/5 overflow-hidden'},\n h('div', {className:'flex items-center gap-1.5 px-3 py-1.5 border-b border-primary/20'},\n h(Icon, {name:'workspace_premium', size:13, className:'text-primary'}),\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-primary'}, failed ? 'Error' : 'Director synthesis · final output')\n ),\n h('div', {\n className: 'px-3 py-2.5 text-[12.5px] leading-relaxed prose-tight max-h-[340px] overflow-y-auto ' + (failed ? 'text-error' : 'text-on-surface'),\n dangerouslySetInnerHTML: {__html: failed ? md(String(run.error)) : md(run.final_output)}\n })\n )\n );\n}\n\n// ─── Inline trigger control — interval minutes + loop checkbox ─────────────────\nfunction TriggerControl(props) {\n const {Icon, Spinner} = N();\n const campaign = props.campaign;\n const onSaved = props.onSaved;\n const [open, setOpen] = useState(false);\n const [minutes, setMinutes] = useState(() => {\n try {\n const cfg = typeof campaign.trigger_config === 'string' ? JSON.parse(campaign.trigger_config) : campaign.trigger_config;\n return (cfg && (cfg.minutes || cfg.interval_minutes)) || 60;\n } catch (e) { return 60; }\n });\n const [busy, setBusy] = useState(false);\n const scheduled = campaign.trigger_type === 'interval' || campaign.trigger_type === 'schedule';\n\n // Saving/clearing an interval is only a PREFERENCE — it must never flip the Active/Paused\n // badge (nothing auto-runs here). Keep the trigger fields the backend returns, but drop its\n // forced status / next_run_at so the badge keeps reflecting the campaign's real run-state.\n const triggerPatchOnly = (updated) => {\n if (!updated || typeof updated !== 'object') return {};\n return {\n trigger_type: updated.trigger_type,\n trigger_config: updated.trigger_config,\n loop: updated.loop,\n };\n };\n\n const save = async () => {\n const mins = Math.max(1, parseInt(minutes, 10) || 60);\n setBusy(true);\n try {\n const r = await fetch('/api/campaigns/' + campaign.id + '/trigger', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({ trigger_type:'interval', trigger_config:{ minutes: mins }, loop: false })\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const updated = await r.json().catch(() => null);\n setOpen(false);\n onSaved && onSaved(triggerPatchOnly(updated));\n } catch (e) { alert('Save failed: ' + (e && e.message || e)); }\n finally { setBusy(false); }\n };\n const clear = async () => {\n setBusy(true);\n try {\n const r = await fetch('/api/campaigns/' + campaign.id + '/trigger', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({ trigger_type:'manual', trigger_config:null, loop:false })\n });\n const updated = await r.json().catch(() => null);\n setOpen(false);\n onSaved && onSaved(triggerPatchOnly(updated));\n } catch (e) { alert('Clear failed: ' + (e && e.message || e)); }\n finally { setBusy(false); }\n };\n\n return h('div', {className:'relative'},\n h('button', {\n onClick: () => setOpen(o => !o),\n title:'Interval preference (manual run only)',\n className:'p-1.5 rounded-md transition-colors ' +\n (scheduled ? 'text-[#0a66c2] bg-[#0a66c2]/10 hover:bg-[#0a66c2]/20' : 'text-text-muted hover:text-[#0a66c2] hover:bg-[#0a66c2]/10')\n }, h(Icon, {name:'schedule', size:13})),\n open && h('div', {\n className:'absolute right-0 bottom-full mb-1 z-30 w-[230px] p-3 rounded-lg bg-surface-container-high border border-border-subtle shadow-2xl space-y-2.5',\n onClick: (e) => e.stopPropagation()\n },\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Interval preference'),\n h('div', {className:'flex items-center gap-2'},\n h('input', {\n type:'number', min:1, value: minutes,\n onChange: (e) => setMinutes(e.target.value),\n className:'w-16 px-2 py-1 rounded-md bg-surface-container-lowest border border-border-subtle text-[12px] text-on-surface focus:outline-none focus:border-primary/40'\n }),\n h('span', {className:'text-[11px] text-text-muted'}, 'minutes')\n ),\n h('div', {className:'flex items-start gap-1.5 text-[10px] text-text-muted/80 leading-snug'},\n h(Icon, {name:'info', size:11, className:'flex-shrink-0 mt-0.5'}),\n h('span', null, 'Saved as a preference. Campaigns run when you press Run — there is no unattended auto-run.')\n ),\n h('div', {className:'flex items-center gap-1.5 pt-1'},\n h('button', {\n onClick: save, disabled: busy,\n className:'flex-1 inline-flex items-center justify-center gap-1 px-2 py-1.5 rounded-md text-[11px] font-bold bg-primary text-on-primary hover:bg-primary/90 transition-colors disabled:opacity-50'\n }, busy && h(Spinner, {size:11}), 'Save'),\n scheduled && h('button', {\n onClick: clear, disabled: busy,\n className:'px-2 py-1.5 rounded-md text-[11px] font-semibold text-text-muted hover:text-error hover:bg-error/10 transition-colors'\n }, 'Clear')\n )\n )\n );\n}\n\n// ─── Recent runs list (GET /api/campaigns/:id/runs) ───────────────────────────\nfunction RecentRuns(props) {\n const {Icon} = N();\n const runs = props.runs;\n const onPick = props.onPick;\n if (!Array.isArray(runs) || runs.length === 0) return null;\n return h('div', {className:'space-y-1'},\n h('div', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Recent runs'),\n runs.slice(0, 4).map(r => {\n const st = statFor(r.status);\n return h('button', {\n key: r.id,\n onClick: () => onPick && onPick(r),\n className:'w-full flex items-center gap-2 px-2 py-1 rounded-md text-left hover:bg-surface-container-high/40 transition-colors'\n },\n h('span', {className:'w-1.5 h-1.5 rounded-full flex-shrink-0 ' + st.dot}),\n h('span', {className:'text-[11px] ' + st.color + ' capitalize'}, r.status || 'run'),\n h('span', {className:'text-[10px] text-text-muted truncate flex-1'},\n (r.final_output ? String(r.final_output).slice(0, 60) : (r.input ? String(r.input).slice(0, 60) : ''))),\n h('span', {className:'text-[10px] text-text-muted/70 ml-auto flex-shrink-0'}, timeAgo(r.finished_at || r.started_at))\n );\n })\n );\n}\n\n// ─── Task status palette (todo|doing|done|blocked) ───────────────────────────\nconst TASK_STATUS_META = {\n todo: {color:'text-text-muted', bg:'bg-surface-container-high', label:'To do', dot:'bg-text-muted'},\n doing: {color:'text-warning', bg:'bg-warning/15', label:'Doing', dot:'bg-warning'},\n done: {color:'text-secondary', bg:'bg-secondary/15', label:'Done', dot:'bg-secondary'},\n blocked: {color:'text-error', bg:'bg-error/15', label:'Blocked', dot:'bg-error'},\n};\nconst taskStatFor = (s) => TASK_STATUS_META[String(s || 'todo').toLowerCase()] || TASK_STATUS_META.todo;\n\n// ICE: derive from ice_score if present, else average of impact/confidence/ease (each 1-10).\nfunction taskIce(t) {\n if (t && t.ice_score != null && isFinite(Number(t.ice_score))) return Math.round(Number(t.ice_score) * 10) / 10;\n const i = Number(t && t.impact) || 0, c = Number(t && t.confidence) || 0, e = Number(t && t.ease) || 0;\n if (!i && !c && !e) return null;\n return Math.round(((i + c + e) / 3) * 10) / 10;\n}\nconst iceBadgeCls = (s) =>\n s >= 7 ? 'bg-secondary/15 text-secondary border-secondary/30'\n : s >= 4 ? 'bg-tertiary/15 text-tertiary border-tertiary/30'\n : 'bg-error/15 text-error border-error/30';\n\nfunction dueLabel(iso) {\n if (!iso) return '';\n try {\n const d = new Date(String(iso).length <= 10 ? String(iso) + 'T00:00:00' : iso);\n if (isNaN(d.getTime())) return '';\n return d.toLocaleDateString(undefined, {month:'short', day:'numeric'});\n } catch (e) { return ''; }\n}\n\n// ─── Work Log — collapsible per-campaign task list (GET /api/campaigns/:id/tasks) ─\nfunction WorkLog(props) {\n const {Icon, Spinner} = N();\n const campaign = props.campaign;\n const [open, setOpen] = useState(false);\n const [tasks, setTasks] = useState([]);\n const [loaded, setLoaded] = useState(false);\n const [loading, setLoading] = useState(false);\n const [generating, setGenerating] = useState(false);\n const [runningId, setRunningId] = useState(null); // id of the task an agent is running\n\n const load = useCallback(async () => {\n setLoading(true);\n try {\n const r = await fetch('/api/campaigns/' + campaign.id + '/tasks');\n const d = await r.json();\n setTasks(Array.isArray(d) ? d : []);\n } catch (e) { /* non-critical */ }\n finally { setLoaded(true); setLoading(false); }\n }, [campaign.id]);\n\n // Load the count eagerly so the header can show \"N tasks\" without expanding.\n useEffect(() => { load(); }, [load]);\n\n const toggle = () => {\n const next = !open;\n setOpen(next);\n if (next && !loaded && !loading) load();\n };\n\n const generate = async () => {\n setGenerating(true);\n try {\n const r = await fetch('/api/tasks/generate', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({ source_type:'campaign', campaign_id: campaign.id, source_id: campaign.id })\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n await load();\n } catch (e) { alert('Generate tasks failed: ' + (e && e.message || e)); }\n finally { setGenerating(false); }\n };\n\n // Put an agent to work on a single task: POST /api/tasks/:id/run, show a brief\n // running state, then refetch this campaign's task list so the status flips.\n const runTask = async (id) => {\n if (runningId != null) return;\n setRunningId(id);\n // Optimistically reflect the running state in the row.\n setTasks(ts => ts.map(t => t.id === id ? Object.assign({}, t, {status:'doing'}) : t));\n try {\n const r = await fetch('/api/tasks/' + id + '/run', {\n method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({})\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n } catch (e) {\n alert('Run task failed: ' + (e && e.message || e));\n } finally {\n await load();\n setRunningId(null);\n }\n };\n\n const count = tasks.length;\n const done = tasks.filter(t => String(t.status || '').toLowerCase() === 'done').length;\n\n return h('div', {className:'rounded-lg border border-border-subtle/50 bg-surface-container-lowest/40 overflow-hidden'},\n // Header — count + expand toggle\n h('button', {\n onClick: toggle,\n className:'w-full flex items-center gap-2 px-2.5 py-1.5 text-left hover:bg-surface-container-high/40 transition-colors'\n },\n h(Icon, {name:'checklist', size:12, className:'text-text-muted'}),\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Work Log'),\n h('span', {className:'text-[9px] font-bold text-text-muted/70'}, '·'),\n h('span', {className:'text-[10px] font-semibold text-on-surface-variant'},\n loaded ? (count + (count === 1 ? ' task' : ' tasks')) : '…'),\n count > 0 && h('span', {className:'text-[9px] font-mono-data text-text-muted/70'}, '(' + done + '/' + count + ' done)'),\n h(Icon, {name: open ? 'expand_less' : 'expand_more', size:14, className:'text-text-muted ml-auto'})\n ),\n // Body — task rows (only when expanded)\n open && h('div', {className:'px-2 pb-2 pt-0.5 border-t border-border-subtle/40'},\n loading && !loaded\n ? h('div', {className:'flex items-center gap-2 px-1 py-2 text-[11px] text-text-muted'}, h(Spinner, {size:11}), 'Loading tasks…')\n : count === 0\n ? h('div', {className:'flex items-center justify-between gap-2 px-1 py-2'},\n h('span', {className:'text-[11px] text-text-muted/60 italic'}, 'No tasks yet'),\n h('button', {\n onClick: generate, disabled: generating,\n title:'Generate tasks for this campaign',\n className:'inline-flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-bold text-primary hover:bg-primary/10 transition-colors disabled:opacity-50'\n },\n generating ? h(Spinner, {size:10}) : h(Icon, {name:'auto_awesome', size:11}),\n generating ? 'Generating…' : 'Generate tasks')\n )\n : h('div', {className:'space-y-1 pt-1'},\n tasks.map(t => {\n const ts = taskStatFor(t.status);\n const ice = taskIce(t);\n const due = dueLabel(t.due_date);\n return h('div', {\n key: t.id,\n className:'flex items-center gap-2 px-1.5 py-1 rounded-md hover:bg-surface-container-high/30 transition-colors'\n },\n h('span', {className:'w-1.5 h-1.5 rounded-full flex-shrink-0 ' + ts.dot}),\n h('span', {\n className:'text-[11.5px] text-on-surface truncate flex-1' +\n (String(t.status || '').toLowerCase() === 'done' ? ' line-through text-text-muted' : ''),\n title: t.title\n }, t.title || 'Untitled task'),\n ice != null && h('span', {\n className:'flex-shrink-0 inline-flex items-center px-1.5 py-0.5 rounded-full border text-[9px] font-extrabold font-mono-data ' + iceBadgeCls(ice),\n style:{fontVariantNumeric:'tabular-nums'},\n title:'ICE = (Impact + Confidence + Ease) / 3'\n }, 'ICE ', ice.toFixed(1)),\n due && h('span', {\n className:'flex-shrink-0 inline-flex items-center gap-0.5 text-[9px] font-mono-data text-text-muted',\n title:'Due ' + due\n }, h(Icon, {name:'event', size:10}), due),\n (function(){\n const isDone = String(t.status || '').toLowerCase() === 'done';\n const isRunning = runningId === t.id;\n return h('button', {\n type:'button',\n onClick: (e) => { e.stopPropagation(); runTask(t.id); },\n disabled: isRunning || isDone || (runningId != null && runningId !== t.id),\n title: isDone ? 'Task already done' : 'Run an agent on this task',\n className:'flex-shrink-0 inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider border transition-all disabled:opacity-40 disabled:cursor-not-allowed ' +\n (isRunning ? 'border-warning/40 bg-warning/10 text-warning' : 'border-secondary/40 bg-secondary/10 text-secondary hover:brightness-110')\n },\n isRunning ? h(Spinner, {size:9}) : h(Icon, {name:'play_arrow', size:11}),\n isRunning ? 'Running' : 'Run'\n );\n })(),\n h('span', {\n className:'flex-shrink-0 inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider ' + ts.bg + ' ' + ts.color\n }, ts.label)\n );\n })\n )\n )\n );\n}\n\n// ─── A single campaign card ───────────────────────────────────────────────────\nfunction CampaignCard(props) {\n const {Icon, Spinner} = N();\n const campaign = props.campaign;\n const onPatched = props.onPatched;\n const onDeleted = props.onDeleted;\n const [running, setRunning] = useState(false);\n const [result, setResult] = useState(null); // the Director run currently shown\n const [runs, setRuns] = useState([]);\n const [runsLoaded, setRunsLoaded] = useState(false);\n\n const st = statFor(campaign.status);\n const mode = modeFor(campaign.mode);\n const members = Array.isArray(campaign.agents) ? campaign.agents : [];\n\n const loadRuns = useCallback(async () => {\n try {\n const r = await fetch('/api/campaigns/' + campaign.id + '/runs');\n const d = await r.json();\n setRuns(Array.isArray(d) ? d : []);\n } catch (e) { /* non-critical */ }\n finally { setRunsLoaded(true); }\n }, [campaign.id]);\n useEffect(() => {\n loadRuns();\n const onTick = () => { loadRuns(); };\n window.addEventListener('nexus:tick', onTick);\n return () => window.removeEventListener('nexus:tick', onTick);\n }, [loadRuns]);\n\n const runCampaign = async () => {\n setRunning(true); setResult(null);\n try {\n const r = await fetch('/api/campaigns/' + campaign.id + '/runs', {\n method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({})\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const run = await r.json();\n setResult(run);\n loadRuns();\n // status may have flipped to completed server-side; refresh the card row.\n onPatched && onPatched({ status: run && run.status === 'completed' ? 'completed' : campaign.status });\n } catch (e) {\n setResult({ status:'failed', error: (e && e.message) || 'Run failed', pipeline: [] });\n } finally { setRunning(false); }\n };\n\n const toggleStatus = async () => {\n // The badge reflects REAL run-state: a campaign is either explicitly paused or it is\n // active. Pausing/activating must persist exactly that — it must NOT be derived from a\n // schedule (nothing auto-runs in this deployment) and must round-trip honestly.\n const prev = campaign.status;\n const next = String(prev).toLowerCase() === 'paused' ? 'active' : 'paused';\n onPatched && onPatched({ status: next }); // optimistic\n try {\n const r = await fetch('/api/campaigns/' + campaign.id, {\n method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ status: next })\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n } catch (e) { onPatched && onPatched({ status: prev }); } // revert to the real prior state\n };\n\n const remove = async () => {\n if (!confirm('Delete campaign \"' + (campaign.name || '') + '\"? Its member agents and runs are removed too. This cannot be undone.')) return;\n try {\n await fetch('/api/campaigns/' + campaign.id, {method:'DELETE'});\n onDeleted && onDeleted();\n } catch (e) { alert('Delete failed: ' + (e && e.message || e)); }\n };\n\n return h('div', {\n className:'group p-4 rounded-xl bg-surface-container border border-border-subtle hover:border-primary/30 transition-all flex flex-col gap-3'\n },\n // Header: status badge + mode + menu\n h('div', {className:'flex items-start justify-between gap-2'},\n h('div', {className:'flex items-center gap-1.5 flex-wrap'},\n h('span', {\n className:'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-widest ' + st.bg + ' ' + st.color\n },\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + st.dot}),\n st.label\n ),\n h('span', {\n className:'inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[9px] font-bold uppercase tracking-widest bg-surface-container-high text-text-muted border border-border-subtle',\n title: mode.desc\n }, h(Icon, {name: mode.icon, size:10}), mode.label)\n ),\n h('button', {\n onClick: remove, title:'Delete campaign',\n className:'p-1 rounded-md text-text-muted/60 hover:text-error hover:bg-error/10 transition-colors opacity-0 group-hover:opacity-100'\n }, h(Icon, {name:'delete', size:13}))\n ),\n // Title + workspace\n h('div', null,\n h('h3', {className:'text-[15px] font-bold text-on-surface leading-tight'}, campaign.name || 'Untitled campaign'),\n (campaign.workspace || campaign.channel) && h('div', {className:'text-[10px] uppercase tracking-widest text-text-muted mt-0.5'},\n [campaign.workspace, campaign.channel].filter(Boolean).join(' · '))\n ),\n // Goal\n campaign.goal\n ? h('div', {className:'p-2.5 rounded-lg bg-surface-container-lowest/50 border border-border-subtle/50'},\n h('div', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted mb-1'}, 'Goal'),\n h('p', {className:'text-[12px] text-on-surface-variant leading-relaxed line-clamp-3'}, campaign.goal)\n )\n : campaign.description\n ? h('p', {className:'text-[12px] text-text-muted italic line-clamp-2'}, campaign.description)\n : h('p', {className:'text-[11px] text-text-muted/60 italic'}, 'No goal set yet.'),\n // Member-agent pipeline (ordered by sequence)\n h('div', {className:'p-2.5 rounded-lg bg-surface-container-lowest/40 border border-border-subtle/50'},\n h('div', {className:'flex items-center gap-1 mb-1'},\n h(Icon, {name:'groups', size:12, className:'text-text-muted'}),\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'},\n members.length + (members.length === 1 ? ' member agent' : ' member agents'))\n ),\n members.length > 0\n ? h('p', {className:'text-[11px] text-on-surface-variant leading-relaxed'}, pipelineLabel(members))\n : h('p', {className:'text-[11px] text-text-muted/60 italic'}, 'No member agents — create the campaign to auto-build a Research → Strategy → Compose pipeline.')\n ),\n // Work Log — this campaign's tasks (collapsible)\n h(WorkLog, {campaign}),\n // Director run result (when present)\n (running || result) && (\n running\n ? h('div', {className:'mt-1 flex items-center gap-2 px-3 py-3 rounded-lg border border-primary/30 bg-primary/5'},\n h(Spinner, {size:14}),\n h('span', {className:'text-[12px] text-primary font-semibold'}, 'Director orchestrating ' + members.length + ' agents…')\n )\n : h(RunResultPanel, {run: result})\n ),\n // Recent runs\n runsLoaded && runs.length > 0 && !running && h('div', {className:'pt-1'},\n h(RecentRuns, {runs, onPick: (r) => setResult(r)})\n ),\n // Actions\n h('div', {className:'flex items-center gap-1 pt-2 border-t border-border-subtle/50 mt-auto'},\n h('button', {\n onClick: runCampaign, disabled: running || members.length === 0,\n title: members.length === 0 ? 'No member agents to run' : 'Run the Director pipeline now',\n className:'flex-1 inline-flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-bold bg-primary text-on-primary hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed'\n },\n running ? h(Spinner, {size:12}) : h(Icon, {name:'play_arrow', size:14}),\n running ? 'Running…' : 'Run Campaign'\n ),\n (campaign.status === 'paused'\n ? h('button', {\n onClick: toggleStatus, title:'Activate',\n className:'inline-flex items-center justify-center gap-1 px-2.5 py-1.5 rounded-md text-[11px] font-semibold text-text-muted hover:text-secondary hover:bg-secondary/10 transition-colors'\n }, h(Icon, {name:'play_circle', size:13}), 'Activate')\n : h('button', {\n onClick: toggleStatus, title:'Pause',\n className:'inline-flex items-center justify-center gap-1 px-2.5 py-1.5 rounded-md text-[11px] font-semibold text-text-muted hover:text-tertiary hover:bg-tertiary/10 transition-colors'\n }, h(Icon, {name:'pause_circle', size:13}), 'Pause')\n ),\n h(TriggerControl, {campaign, onSaved: (updated) => onPatched && onPatched(updated || {})}),\n h('button', {\n onClick: () => window.open('/world?campaign=' + campaign.id, '_blank'),\n title:'Open this campaign Agent World in a new tab',\n className:'inline-flex items-center justify-center gap-1 px-2.5 py-1.5 rounded-md text-[11px] font-semibold text-text-muted hover:text-primary hover:bg-primary/10 transition-colors'\n }, h(Icon, {name:'public', size:13}), 'Open World')\n )\n );\n}\n\nexport function CampaignsPage(props) {\n const {Icon, Spinner} = N();\n const [campaigns, setCampaigns] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [workspace, setWorkspace] = useState('all'); // all | marketing | sales\n const [statusFilter, setStatusFilter] = useState('all');\n const [search, setSearch] = useState('');\n const [creating, setCreating] = useState(false);\n const [draft, setDraft] = useState(null); // {name, goal, objective_id} when the New Campaign form is open\n const [objectives, setObjectives] = useState([]); // [{id,title}] for the optional OKR link selector\n const [objectivesLoaded, setObjectivesLoaded] = useState(false);\n\n const load = async () => {\n setLoading(true); setError(null);\n try {\n const r = await fetch('/api/campaigns');\n const d = await r.json();\n setCampaigns(Array.isArray(d) ? d : []);\n } catch (e) {\n setError((e && e.message) || 'Failed to load campaigns');\n } finally { setLoading(false); }\n };\n useEffect(() => {\n load();\n const onTick = () => { load(); };\n window.addEventListener('nexus:tick', onTick);\n return () => window.removeEventListener('nexus:tick', onTick);\n }, []);\n\n // Merge a patch into a single campaign row (optimistic status/trigger updates).\n const patchCampaign = (id, patch) => {\n setCampaigns(cs => cs.map(c => c.id === id ? Object.assign({}, c, patch || {}) : c));\n };\n const removeCampaign = (id) => setCampaigns(cs => cs.filter(c => c.id !== id));\n\n const filtered = useMemo(() => {\n const q = search.trim().toLowerCase();\n return campaigns.filter(c => {\n if (workspace !== 'all' && c.workspace !== workspace) return false;\n if (statusFilter !== 'all' && (c.status || 'draft') !== statusFilter) return false;\n if (q) {\n const blob = [c.name, c.goal, c.channel, c.audience, c.description].filter(Boolean).join(' ').toLowerCase();\n if (!blob.includes(q)) return false;\n }\n return true;\n });\n }, [campaigns, workspace, statusFilter, search]);\n\n const stats = useMemo(() => {\n const total = campaigns.length;\n const active = campaigns.filter(c => (c.status || 'draft') === 'active').length;\n const scheduled = campaigns.filter(c => c.status === 'scheduled').length;\n const completed = campaigns.filter(c => c.status === 'completed').length;\n return {total, active, scheduled, completed};\n }, [campaigns]);\n\n // Fetch the OKR list so the modal can offer an optional objective to link. Read-only;\n // failure is non-critical — the selector simply stays empty (campaign is then NULL-linked).\n const loadObjectives = useCallback(async () => {\n try {\n const r = await fetch('/api/okrs');\n const d = await r.json();\n setObjectives(Array.isArray(d) ? d.map(o => ({ id: o.id, title: o.title })) : []);\n } catch (e) { /* non-critical */ }\n finally { setObjectivesLoaded(true); }\n }, []);\n\n const openNew = () => { setDraft({ name:'', goal:'', objective_id:'' }); loadObjectives(); };\n const closeNew = () => { if (!creating) setDraft(null); };\n\n const createCampaign = async () => {\n if (!draft || !draft.name.trim()) return;\n setCreating(true);\n try {\n const r = await fetch('/api/campaigns', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n name: draft.name.trim(),\n goal: draft.goal.trim() || undefined,\n objective_id: (draft.objective_id && String(draft.objective_id).trim()) || undefined\n })\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const created = await r.json().catch(() => null);\n if (created && created.id) setCampaigns(cs => [created].concat(cs));\n else await load();\n setDraft(null);\n } catch (e) { alert('Create failed: ' + (e && e.message || e)); }\n finally { setCreating(false); }\n };\n\n return h('div', {className:'p-lg space-y-lg'},\n // Header\n h('div', {className:'flex items-center justify-between gap-4 flex-wrap'},\n h('div', null,\n h('h1', {className:'text-[24px] font-bold tracking-tight'}, 'Campaigns'),\n h('p', {className:'text-[12px] text-text-muted mt-1'},\n 'Multi-agent campaigns. Each is a Director orchestrating a team of member agents into one synthesized deliverable.'\n )\n ),\n h('button', {\n onClick: openNew,\n className:'inline-flex items-center gap-2 px-3.5 py-2 rounded-lg bg-primary text-on-primary text-[12px] font-bold hover:bg-primary/90 transition-colors'\n }, h(Icon, {name:'add', size:16}), 'New Campaign')\n ),\n\n // Stats strip\n h('div', {className:'grid grid-cols-4 gap-3'},\n [\n {label:'Total', value: stats.total, icon:'campaign', color:'text-on-surface'},\n {label:'Active', value: stats.active, icon:'play_arrow', color:'text-secondary'},\n {label:'Scheduled', value: stats.scheduled, icon:'schedule', color:'text-[#0a66c2]'},\n {label:'Completed', value: stats.completed, icon:'check_circle', color:'text-primary'},\n ].map(s => h('div', {\n key: s.label,\n className:'p-3 rounded-lg bg-surface-container border border-border-subtle'\n },\n h('div', {className:'flex items-center justify-between mb-1'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, s.label),\n h(Icon, {name: s.icon, size:14, className: s.color})\n ),\n h('div', {className:'text-[22px] font-bold ' + s.color}, s.value)\n ))\n ),\n\n // Filters\n h('div', {className:'flex items-center gap-2 flex-wrap'},\n h('div', {className:'flex bg-surface-container-lowest rounded-lg p-0.5 border border-border-subtle'},\n ['all','marketing','sales'].map(w => h('button', {\n key: w, onClick: () => setWorkspace(w),\n className:'px-3 py-1 rounded-md text-[11px] font-bold uppercase tracking-wider transition-all ' +\n (workspace === w ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface-variant')\n }, w))\n ),\n h('div', {className:'flex bg-surface-container-lowest rounded-lg p-0.5 border border-border-subtle flex-wrap'},\n ['all','draft','active','scheduled','running','paused','completed'].map(s => h('button', {\n key: s, onClick: () => setStatusFilter(s),\n className:'px-2.5 py-1 rounded-md text-[11px] font-bold capitalize transition-all ' +\n (statusFilter === s ? 'bg-secondary/20 text-secondary' : 'text-text-muted hover:text-on-surface-variant')\n }, s))\n ),\n h('div', {className:'flex-1 min-w-[180px] relative'},\n h(Icon, {name:'search', size:14, className:'absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted'}),\n h('input', {\n type:'text', value: search, onChange: (e) => setSearch(e.target.value),\n placeholder:'Search campaigns by name, goal, channel…',\n className:'w-full pl-8 pr-3 py-1.5 rounded-lg bg-surface-container-lowest border border-border-subtle text-[12px] text-on-surface placeholder:text-text-muted/60 focus:outline-none focus:border-primary/40'\n })\n )\n ),\n\n // Body\n error && h('div', {className:'p-3 rounded-lg text-[12px] text-error bg-error/5 border border-error/20'}, error),\n loading && campaigns.length === 0 && h('div', {className:'flex items-center justify-center py-16'}, h(Spinner, {size: 22})),\n !loading && filtered.length === 0 && h('div', {className:'text-center py-16 text-text-muted'},\n h(Icon, {name:'campaign', size:40, className:'text-text-muted/40 mb-3 mx-auto block'}),\n h('div', {className:'text-[14px] font-semibold mb-1 text-on-surface-variant'},\n campaigns.length === 0 ? 'No campaigns yet' : 'No campaigns match your filters'\n ),\n h('div', {className:'text-[12px]'},\n campaigns.length === 0\n ? 'Create one above — a Research → Strategy → Compose agent team is built automatically.'\n : 'Try widening the workspace or status filter.'\n )\n ),\n filtered.length > 0 && h('div', {className:'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3 items-start'},\n filtered.map(c => h(CampaignCard, {\n key: c.id,\n campaign: c,\n onPatched: (patch) => patchCampaign(c.id, patch),\n onDeleted: () => removeCampaign(c.id),\n }))\n ),\n\n // New Campaign modal — POSTs /api/campaigns {name, goal}; member agents auto-created.\n draft && h('div', {\n className:'fixed inset-0 bg-black/60 backdrop-blur-sm z-[80] flex items-center justify-center p-4',\n onClick: closeNew\n },\n h('div', {\n className:'glass-panel rounded-xl shadow-2xl flex flex-col overflow-hidden',\n style:{width:'min(560px, 96vw)', maxHeight:'90vh'},\n onClick: (e) => e.stopPropagation()\n },\n h('div', {className:'p-lg border-b border-border-subtle flex items-center justify-between flex-shrink-0'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'campaign', size:18, className:'text-primary'}),\n h('h3', {className:'text-[16px] font-bold'}, 'New Campaign')\n ),\n h('button', {\n onClick: closeNew,\n className:'p-1.5 rounded hover:bg-surface-container-high text-text-muted hover:text-on-surface transition-colors'\n }, h(Icon, {name:'close', size:16}))\n ),\n h('div', {className:'p-lg space-y-3 overflow-y-auto'},\n h('div', null,\n h('label', {className:'block text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1'}, 'Name'),\n h('input', {\n autoFocus: true,\n value: draft.name,\n onChange: (e) => setDraft(d => Object.assign({}, d, {name: e.target.value})),\n onKeyDown: (e) => { if (e.key === 'Enter' && draft.name.trim()) createCampaign(); },\n placeholder: 'e.g. Q3 LinkedIn Demand-Gen',\n className:'w-full px-3 py-2 rounded-lg bg-surface-container-lowest border border-border-subtle text-[13px] text-on-surface focus:outline-none focus:border-primary/40'\n })\n ),\n h('div', null,\n h('label', {className:'block text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1'}, 'Goal (optional)'),\n h('textarea', {\n value: draft.goal,\n onChange: (e) => setDraft(d => Object.assign({}, d, {goal: e.target.value})),\n placeholder: 'What should the campaign team achieve? (e.g. Book 30 demos from FinTech CMOs this quarter)',\n rows: 3,\n className:'w-full px-3 py-2 rounded-lg bg-surface-container-lowest border border-border-subtle text-[13px] text-on-surface focus:outline-none focus:border-primary/40 resize-none'\n })\n ),\n h('div', null,\n h('label', {className:'block text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1'}, 'Linked objective (optional)'),\n h('select', {\n value: draft.objective_id || '',\n onChange: (e) => setDraft(d => Object.assign({}, d, {objective_id: e.target.value})),\n className:'w-full px-3 py-2 rounded-lg bg-surface-container-lowest border border-border-subtle text-[13px] text-on-surface focus:outline-none focus:border-primary/40'\n },\n h('option', {value:''}, objectivesLoaded ? 'No linked objective' : 'Loading objectives…'),\n objectives.map(o => h('option', {key: o.id, value: o.id}, o.title || ('Objective ' + o.id)))\n ),\n h('p', {className:'text-[10px] text-text-muted/70 mt-1 leading-snug'},\n 'Link this campaign to an OKR so its runs roll progress up to that objective.')\n ),\n h('div', {className:'flex items-start gap-2 p-2.5 rounded-lg bg-primary/5 border border-primary/20'},\n h(Icon, {name:'auto_awesome', size:14, className:'text-primary mt-0.5 flex-shrink-0'}),\n h('p', {className:'text-[11px] text-on-surface-variant leading-relaxed'},\n 'A 3-agent pipeline (Research → Strategy → Compose) is created automatically. Run it to have the Director orchestrate the team into one deliverable.'\n )\n )\n ),\n h('div', {className:'p-md border-t border-border-subtle bg-surface-container/30 flex items-center justify-end gap-2 flex-shrink-0'},\n h('button', {\n onClick: closeNew, disabled: creating,\n className:'px-3 py-1.5 rounded text-[12px] font-semibold text-text-muted hover:text-on-surface hover:bg-surface-container-high transition-colors disabled:opacity-50'\n }, 'Cancel'),\n h('button', {\n onClick: createCampaign,\n disabled: creating || !draft.name.trim(),\n className:'px-4 py-1.5 rounded text-[12px] font-bold bg-primary text-on-primary hover:bg-primary/90 transition-colors disabled:opacity-50 inline-flex items-center gap-1.5'\n },\n creating && h(Spinner, {size: 12}),\n 'Create Campaign'\n )\n )\n )\n )\n );\n}\n`;\n}\n",[418],"a6cbe4f6-5b4f-11f1-9de6-ee650bb23af1","frontend_calendar.ts","5cb728c2-58a1-11f1-a77f-ee650bb23af1",539,["D",1780053308385],7,"// CalendarPage — unified Command Calendar.\n// Month / Week / Agenda views over /api/calendar/unified plus a collapsible\n// Kanban task board. Served at /api/app-calendar so frontend_js.ts stays under\n// val.town's 80K limit.\n//\n// Shared deps come from window.__nexus (set by frontend_js.ts on boot):\n// Icon, Btn, Input, Spinner, PageHeader, SectionHeader.\n\nexport function getCalendarJS(): string {\n return `\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// ─── Date helpers ────────────────────────────────────────────────────────────\nconst today = () => new Date().toISOString().slice(0, 10);\nconst pad2 = (n) => String(n).padStart(2, '0');\nconst isoOf = (d) => d.getFullYear() + '-' + pad2(d.getMonth()+1) + '-' + pad2(d.getDate());\nconst parseIso = (iso) => {\n // Parse 'YYYY-MM-DD' as local-midnight so we don't slide a day in UTC-offset zones.\n if (!iso) return new Date(NaN);\n const [y, m, d] = iso.split('-').map(Number);\n return new Date(y, (m||1)-1, d||1);\n};\nconst addDays = (iso, n) => {\n const d = parseIso(iso); d.setDate(d.getDate()+n); return isoOf(d);\n};\nconst addMonths = (iso, n) => {\n const d = parseIso(iso); d.setMonth(d.getMonth()+n, 1); return isoOf(d);\n};\nconst monthDays = (year, monthIdx) => {\n // 42-cell grid (6 weeks). Week starts Monday.\n const first = new Date(year, monthIdx, 1);\n const dow = (first.getDay() + 6) % 7; // shift so Monday=0\n const startIso = isoOf(addDaysToDate(first, -dow));\n const cells = [];\n for (let i = 0; i < 42; i++) {\n const iso = addDays(startIso, i);\n const d = parseIso(iso);\n cells.push({ date: iso, isCurrentMonth: d.getMonth() === monthIdx, dow: d.getDay() });\n }\n return cells;\n};\nfunction addDaysToDate(date, n) { const d = new Date(date); d.setDate(d.getDate()+n); return d; }\nconst weekDays = (anchorIso) => {\n const d = parseIso(anchorIso);\n const dow = (d.getDay() + 6) % 7;\n const monday = addDaysToDate(d, -dow);\n const out = [];\n for (let i = 0; i < 7; i++) out.push(isoOf(addDaysToDate(monday, i)));\n return out;\n};\nconst fmtDateLong = (iso) => parseIso(iso).toLocaleDateString('en-US', {weekday:'long', month:'long', day:'numeric', year:'numeric'});\nconst fmtMonthYear = (iso) => parseIso(iso).toLocaleDateString('en-US', {month:'long', year:'numeric'});\nconst fmtTime = (hhmm) => {\n if (!hhmm) return '';\n const [h_, m_] = hhmm.split(':').map(Number);\n const d = new Date(); d.setHours(h_||0, m_||0, 0, 0);\n return d.toLocaleTimeString('en-US', {hour:'numeric', minute:'2-digit'});\n};\nconst parseTimeHours = (hhmm) => {\n if (!hhmm) return 0;\n const [h_, m_] = hhmm.split(':').map(Number);\n return (h_||0) + (m_||0)/60;\n};\n\n// ─── Source / status meta ───────────────────────────────────────────────────\n// Keys MUST match the backend source names (plural) from getUnifiedCalendar, otherwise the\n// ?source= filter requests names the backend ignores and those events never render.\nconst SOURCE_META = {\n tasks: { label: 'Tasks', icon: 'task_alt', color: '#c0c1ff' },\n experiments: { label: 'Experiments', icon: 'science', color: '#d0bcff' },\n objectives: { label: 'OKRs', icon: 'flag', color: '#4edea3' },\n key_results: { label: 'KR Updates', icon: 'trending_up', color: '#6ffbbe' },\n actions: { label: 'Action Items', icon: 'bolt', color: '#5eead4' },\n google_calendar: { label: 'Google Cal', icon: 'event', color: '#8083ff' },\n outlook_calendar: { label: 'Outlook', icon: 'mail', color: '#0078d4' },\n custom: { label: 'Custom', icon: 'bookmark', color: '#e1e0ff' },\n nsm: { label: 'North Star', icon: 'star', color: '#f5a3d0' },\n};\nconst ALL_SOURCES = Object.keys(SOURCE_META);\nconst WORKSPACES = ['all', 'marketing', 'sales', 'growth'];\n\nconst statusChip = (s) => {\n if (!s) return null;\n const norm = s.toLowerCase();\n const palette = norm === 'done' || norm === 'completed'\n ? 'bg-secondary/15 text-secondary border-secondary/30'\n : norm === 'blocked'\n ? 'bg-error/15 text-error border-error/30'\n : norm === 'in_progress' || norm === 'in progress'\n ? 'bg-tertiary/15 text-tertiary border-tertiary/30'\n : 'bg-primary/15 text-primary border-primary/30';\n return { cls: palette, label: s.replace(/_/g, ' ') };\n};\n\nconst priorityDot = (p) => {\n if (!p) return null;\n const norm = p.toLowerCase();\n return norm === 'critical' || norm === 'high' ? 'bg-error'\n : norm === 'medium' ? 'bg-tertiary'\n : 'bg-primary';\n};\n\n// ─── Event grouping memo helper ─────────────────────────────────────────────\nfunction groupByDay(events) {\n const map = {};\n for (const e of events) {\n if (!e || !e.date) continue;\n // Span multi-day events across each covered day\n const start = e.date;\n const end = e.end_date || e.date;\n let cur = start;\n let guard = 0;\n while (cur <= end && guard < 60) {\n (map[cur] = map[cur] || []).push(e);\n cur = addDays(cur, 1);\n guard++;\n }\n }\n // Sort within day: all-day first, then by time\n for (const k of Object.keys(map)) {\n map[k].sort((a, b) => {\n if (a.all_day && !b.all_day) return -1;\n if (!a.all_day && b.all_day) return 1;\n return (a.time || '').localeCompare(b.time || '');\n });\n }\n return map;\n}\n\n// ─── AI Briefing modal ──────────────────────────────────────────────────────\nfunction AIBriefingModal({open, onClose, date}) {\n const {Icon, Spinner} = N();\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [err, setErr] = useState(null);\n useEffect(() => {\n if (!open) return;\n setLoading(true); setErr(null); setData(null);\n fetch('/api/calendar/summary?date=' + encodeURIComponent(date || today()))\n .then(r => r.json())\n .then(d => setData(d))\n .catch(e => setErr(e.message))\n .finally(() => setLoading(false));\n }, [open, date]);\n if (!open) return null;\n return h(React.Fragment, null,\n h('div', {className:'fixed inset-0 bg-black/50 backdrop-blur-sm z-[55]', onClick: onClose}),\n h('div', {className:'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[min(560px,92vw)] glass-panel rounded-2xl shadow-2xl z-[60] flex flex-col max-h-[80vh]'},\n h('div', {className:'p-lg border-b border-border-subtle flex items-center justify-between'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'auto_awesome', size:20, filled:true, className:'text-primary'}),\n h('h3', {className:'text-[16px] font-bold tracking-tight'}, 'AI Briefing'),\n h('span', {className:'text-[10px] font-mono-data text-text-muted'}, date || today())\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface'},\n h(Icon, {name:'close', size:20})\n )\n ),\n h('div', {className:'p-lg overflow-y-auto'},\n loading && h('div', {className:'flex items-center justify-center py-10 gap-3 text-text-muted text-[12px]'},\n h(Spinner, {size: 22}), 'Generating briefing…'\n ),\n err && h('div', {className:'text-error text-[13px]'}, 'Failed: ' + err),\n data && h('div', {className:'space-y-3'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'},\n (data.event_count || 0) + ' event' + ((data.event_count||0) === 1 ? '' : 's') + ' on ' + fmtDateLong(data.date || today())\n ),\n h('div', {className:'text-[13px] text-on-surface-variant leading-relaxed whitespace-pre-wrap'},\n data.summary || 'No summary returned.'\n )\n )\n )\n )\n );\n}\n\n// ─── Event Detail Drawer ────────────────────────────────────────────────────\nfunction EventDrawer({event, onClose, onMarkDone, onEdit, showToast}) {\n const {Icon, Btn} = N();\n if (!event) return null;\n const meta = SOURCE_META[event.source] || SOURCE_META.custom;\n const sChip = statusChip(event.meta?.status ?? event.status);\n const askAI = () => {\n window.dispatchEvent(new CustomEvent('nexus:open-chat', { detail: { action_payload: {\n question: 'What should I know about: \"' + event.title + '\" on ' + event.date + '?'\n } } }));\n onClose && onClose();\n };\n const openLink = () => { if (event.linked_url) window.open(event.linked_url, '_blank'); };\n const isTask = event.source === 'tasks';\n return h(React.Fragment, null,\n h('div', {className:'fixed inset-0 bg-black/50 backdrop-blur-sm z-[55]', onClick: onClose}),\n h('div', {className:'fixed top-0 right-0 h-screen w-full sm:w-[420px] glass-panel shadow-2xl z-[60] flex flex-col drawer-in'},\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-start gap-3 bg-surface-container-high/20'},\n h('div', {className:'flex items-start gap-3 min-w-0 flex-1'},\n h('div', {\n className:'w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0',\n style:{background: (event.color || meta.color) + '22', border:'1px solid ' + (event.color || meta.color)}\n }, h(Icon, {name: meta.icon, size:18, style:{color: event.color || meta.color}})),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, meta.label),\n h('h3', {className:'text-[18px] font-extrabold text-on-surface leading-tight mt-0.5 break-words'}, event.title)\n )\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface p-1 flex-shrink-0'},\n h(Icon, {name:'close', size:20})\n )\n ),\n h('div', {className:'flex-1 overflow-y-auto p-lg space-y-md'},\n // Date + time\n h('div', {className:'flex items-center gap-2 text-[13px] text-on-surface'},\n h(Icon, {name:'event', size:16, className:'text-text-muted'}),\n h('span', null, fmtDateLong(event.date)),\n !event.all_day && event.time && h('span', {className:'text-text-muted'},\n '· ' + fmtTime(event.time) + (event.end_time ? ' – ' + fmtTime(event.end_time) : '')\n ),\n event.all_day && h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted ml-2 px-1.5 py-0.5 rounded bg-surface-container'}, 'All day')\n ),\n\n // Chips\n h('div', {className:'flex flex-wrap gap-1.5'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded border border-border-subtle bg-surface-container-lowest'}, meta.label),\n sChip && h('span', {className:'text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded border ' + sChip.cls}, sChip.label),\n event.workspace && h('span', {className:'text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded border border-border-subtle bg-surface-container-lowest text-text-muted'}, event.workspace),\n event.priority && h('span', {className:'text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded border border-border-subtle bg-surface-container-lowest flex items-center gap-1'},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + (priorityDot(event.priority) || 'bg-text-muted')}),\n event.priority\n )\n ),\n\n // Description\n event.description && h('div', {className:'pt-2 border-t border-border-subtle/50'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1'}, 'Description'),\n h('p', {className:'text-[12px] text-on-surface-variant leading-relaxed whitespace-pre-wrap'}, event.description)\n ),\n\n // Linked context\n (event.okr_progress != null || event.ice_score != null || (event.attendees && event.attendees.length) || event.location) &&\n h('div', {className:'pt-2 border-t border-border-subtle/50 space-y-1.5'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Context'),\n event.okr_progress != null && h('div', {className:'flex items-center gap-2 text-[12px]'},\n h(Icon, {name:'flag', size:14, className:'text-secondary'}),\n h('span', {className:'text-text-muted'}, 'OKR:'),\n h('span', {className:'font-mono-data font-bold text-on-surface'}, Math.round(event.okr_progress) + '% complete')\n ),\n event.ice_score != null && h('div', {className:'flex items-center gap-2 text-[12px]'},\n h(Icon, {name:'bolt', size:14, className:'text-tertiary'}),\n h('span', {className:'text-text-muted'}, 'ICE Score:'),\n h('span', {className:'font-mono-data font-bold text-on-surface'}, Number(event.ice_score).toFixed(1))\n ),\n event.attendees && event.attendees.length > 0 && h('div', {className:'flex items-start gap-2 text-[12px]'},\n h(Icon, {name:'group', size:14, className:'text-primary mt-0.5'}),\n h('span', {className:'text-text-muted'}, 'Attendees:'),\n h('span', {className:'text-on-surface-variant break-words'}, event.attendees.join(', '))\n ),\n event.location && h('div', {className:'flex items-center gap-2 text-[12px]'},\n h(Icon, {name:'location_on', size:14, className:'text-primary'}),\n h('span', {className:'text-text-muted'}, 'Location:'),\n h('span', {className:'text-on-surface-variant'}, event.location)\n )\n )\n ),\n h('div', {className:'p-lg border-t border-border-subtle bg-surface-container-high/20 flex flex-wrap gap-2'},\n isTask && (event.meta?.status ?? event.status) !== 'done' && h(Btn, {\n onClick: () => onMarkDone && onMarkDone(event),\n variant:'primary', size:'sm'\n }, h(Icon, {name:'check', size:14}), 'Mark Done'),\n (event.source === 'custom' || isTask) && h(Btn, {\n onClick: () => onEdit && onEdit(event),\n variant:'secondary', size:'sm'\n }, h(Icon, {name:'edit', size:14}), 'Edit'),\n event.linked_url && h(Btn, {onClick: openLink, variant:'ghost', size:'sm'},\n h(Icon, {name:'open_in_new', size:14}), 'Open'\n ),\n h(Btn, {onClick: askAI, variant:'ghost', size:'sm'},\n h(Icon, {name:'auto_awesome', size:14}), 'Ask AI'\n )\n )\n )\n );\n}\n\n// ─── Add / Edit Event modal ─────────────────────────────────────────────────\nfunction EventForm({open, onClose, initial, onSaved, showToast}) {\n const {Icon, Btn, Input} = N();\n const [form, setForm] = useState({\n title:'', description:'', event_date: today(), event_time:'', end_time:'',\n event_type:'custom', workspace:'all', color:'#c0c1ff', all_day:false\n });\n const [saving, setSaving] = useState(false);\n useEffect(() => {\n if (!open) return;\n if (initial && initial.id) {\n setForm({\n title: initial.title || '',\n description: initial.description || '',\n event_date: initial.date || today(),\n event_time: initial.time || '',\n end_time: initial.end_time || '',\n event_type: initial.source === 'custom' ? 'custom' : (initial.source || 'custom'),\n workspace: initial.workspace || 'all',\n color: initial.color || '#c0c1ff',\n all_day: !!initial.all_day,\n });\n } else {\n setForm(f => ({...f, title:'', description:'', event_date: (initial && initial.date) || today(), event_time:'', end_time:'', all_day:false}));\n }\n }, [open, initial]);\n if (!open) return null;\n const setF = (k, v) => setForm(s => ({...s, [k]: v}));\n const save = async () => {\n if (!form.title.trim()) { showToast && showToast('Title required', 'error'); return; }\n setSaving(true);\n try {\n const body = {\n title: form.title.trim(),\n description: form.description.trim() || undefined,\n event_date: form.event_date,\n event_time: form.all_day ? undefined : (form.event_time || undefined),\n end_time: form.all_day ? undefined : (form.end_time || undefined),\n event_type: form.event_type,\n workspace: form.workspace,\n color: form.color,\n all_day: !!form.all_day,\n };\n const isEdit = initial && initial.id && String(initial.id).startsWith('entry_');\n const id = isEdit ? String(initial.id).replace(/^entry_/, '') : null;\n const url = isEdit ? ('/api/calendar/entries/' + id) : '/api/calendar/entries';\n const method = isEdit ? 'PUT' : 'POST';\n const r = await fetch(url, {method, headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)});\n if (!r.ok) throw new Error('HTTP ' + r.status);\n showToast && showToast(isEdit ? 'Event updated' : 'Event added', 'success');\n onSaved && onSaved();\n onClose && onClose();\n } catch (e) {\n showToast && showToast('Save failed: ' + e.message, 'error');\n } finally { setSaving(false); }\n };\n return h(React.Fragment, null,\n h('div', {className:'fixed inset-0 bg-black/50 backdrop-blur-sm z-[65]', onClick: onClose}),\n h('div', {className:'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[min(520px,94vw)] glass-panel rounded-2xl shadow-2xl z-[70] flex flex-col max-h-[88vh]'},\n h('div', {className:'p-lg border-b border-border-subtle flex items-center justify-between'},\n h('h3', {className:'text-[16px] font-bold tracking-tight'},\n initial && initial.id ? 'Edit Event' : 'Add Event'\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface'}, h(Icon, {name:'close', size:20}))\n ),\n h('div', {className:'p-lg overflow-y-auto space-y-md'},\n h(Input, {label:'Title', value: form.title, onChange: v => setF('title', v), placeholder:'Event title'}),\n h(Input, {label:'Description (optional)', value: form.description, onChange: v => setF('description', v), placeholder:'Notes…'}),\n h('div', {className:'grid grid-cols-2 gap-md'},\n h(Input, {label:'Date', type:'date', value: form.event_date, onChange: v => setF('event_date', v)}),\n h('div', {className:'flex flex-col gap-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Workspace'),\n h('select', {\n value: form.workspace, onChange: e => setF('workspace', e.target.value),\n className:'bg-surface-container-lowest border border-border-subtle rounded-lg px-2.5 py-2 text-[13px] text-on-surface outline-none focus:border-primary'\n }, WORKSPACES.map(w => h('option', {key: w, value: w}, w)))\n )\n ),\n h('div', {className:'flex items-center gap-2 text-[12px]'},\n h('input', {type:'checkbox', checked: !!form.all_day, onChange: e => setF('all_day', e.target.checked), className:'accent-primary'}),\n h('span', {className:'text-on-surface-variant'}, 'All-day event')\n ),\n !form.all_day && h('div', {className:'grid grid-cols-2 gap-md'},\n h(Input, {label:'Start time', type:'time', value: form.event_time, onChange: v => setF('event_time', v)}),\n h(Input, {label:'End time', type:'time', value: form.end_time, onChange: v => setF('end_time', v)})\n ),\n h('div', {className:'flex items-center gap-3'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Color'),\n h('input', {type:'color', value: form.color, onChange: e => setF('color', e.target.value), className:'h-8 w-12 bg-transparent border border-border-subtle rounded cursor-pointer'})\n )\n ),\n h('div', {className:'p-lg border-t border-border-subtle flex justify-end gap-2'},\n h(Btn, {onClick: onClose, variant:'ghost', size:'sm'}, 'Cancel'),\n h(Btn, {onClick: save, variant:'primary', size:'sm', disabled: saving},\n h(Icon, {name:'save', size:14}), saving ? 'Saving…' : 'Save'\n )\n )\n )\n );\n}\n\n// ─── Task board (collapsible Kanban) ────────────────────────────────────────\nconst TASK_COLUMNS = [\n {key:'todo', label:'Todo', match: s => !s || s === 'todo' || s === 'open' || s === 'pending'},\n {key:'in_progress', label:'In Progress', match: s => s === 'in_progress' || s === 'in progress' || s === 'doing'},\n {key:'blocked', label:'Blocked', match: s => s === 'blocked' || s === 'on_hold'},\n {key:'done', label:'Done', match: s => s === 'done' || s === 'completed'},\n];\n\nfunction TaskBoard({collapsed, onToggle, showToast}) {\n const {Icon, Btn, Input, Spinner} = N();\n const [tasks, setTasks] = useState([]);\n const [loading, setLoading] = useState(true);\n const [draft, setDraft] = useState({title:'', due_date:'', priority:'medium'});\n const [adding, setAdding] = useState(false);\n\n const load = useCallback(async () => {\n setLoading(true);\n try {\n const r = await fetch('/api/tasks').catch(() => null);\n const d = r && r.ok ? await r.json() : [];\n setTasks(Array.isArray(d) ? d : (d && Array.isArray(d.tasks) ? d.tasks : []));\n } catch { setTasks([]); }\n finally { setLoading(false); }\n }, []);\n useEffect(() => { if (!collapsed) load(); }, [collapsed, load]);\n\n const moveTask = async (taskId, newStatus) => {\n setTasks(prev => prev.map(t => String(t.id) === String(taskId) ? {...t, status: newStatus} : t));\n try {\n await fetch('/api/tasks/' + taskId, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({status: newStatus})\n });\n } catch (e) {\n showToast && showToast('Failed to move task', 'error');\n load();\n }\n };\n\n const addTask = async () => {\n if (!draft.title.trim()) return;\n setAdding(true);\n try {\n await fetch('/api/tasks', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n title: draft.title.trim(),\n due_date: draft.due_date || undefined,\n priority: draft.priority,\n status: 'todo',\n })\n });\n setDraft({title:'', due_date:'', priority:'medium'});\n await load();\n showToast && showToast('Task added', 'success');\n } catch (e) {\n showToast && showToast('Add failed', 'error');\n } finally { setAdding(false); }\n };\n\n const grouped = useMemo(() => {\n const out = {todo:[], in_progress:[], blocked:[], done:[]};\n for (const t of tasks) {\n const col = TASK_COLUMNS.find(c => c.match((t.status || '').toLowerCase()));\n out[col ? col.key : 'todo'].push(t);\n }\n return out;\n }, [tasks]);\n\n const todayIso = today();\n const cardColor = (t) => {\n const due = t.due_date || t.due;\n if (!due) return null;\n if (due < todayIso && (t.status||'').toLowerCase() !== 'done') return 'text-error';\n if (due === todayIso) return 'text-tertiary';\n return 'text-text-muted';\n };\n\n return h('div', {className:'glass-panel rounded-xl mt-lg'},\n // Row of toggle + actions — split so the export link doesn't trigger collapse on click.\n h('div', {className:'w-full p-md flex items-center justify-between hover:bg-surface-container/30 transition-colors'},\n h('button', {type:'button', onClick: onToggle, className:'flex items-center gap-2 flex-1 text-left'},\n h(Icon, {name:'task_alt', size:18, className:'text-primary'}),\n h('h3', {className:'text-[14px] font-bold tracking-tight'}, 'Tasks'),\n h('span', {className:'text-[10px] font-mono-data text-text-muted'}, '· ' + tasks.length)\n ),\n h('div', {className:'flex items-center gap-1'},\n // P3 wire: tasks CSV export (token-bearing download — see __nexusDownload)\n h('button', {type:'button', title:'Export tasks CSV',\n onClick: e => { e.stopPropagation(); window.__nexusDownload('/api/export/tasks'); },\n className:'p-1.5 rounded hover:bg-surface-container-high text-text-muted hover:text-on-surface'},\n h(Icon, {name:'download', size:14})\n ),\n h('button', {type:'button', onClick: onToggle, className:'p-1.5 rounded text-text-muted'},\n h(Icon, {name: collapsed ? 'expand_more' : 'expand_less', size:18})\n )\n )\n ),\n !collapsed && h('div', {className:'p-md border-t border-border-subtle'},\n loading && tasks.length === 0\n ? h('div', {className:'flex items-center justify-center py-6'}, h(Spinner, {size: 18}))\n : h('div', {className:'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-md'},\n TASK_COLUMNS.map(col => h('div', {\n key: col.key,\n onDragOver: e => e.preventDefault(),\n onDrop: e => {\n e.preventDefault();\n const id = e.dataTransfer.getData('task-id');\n if (id) moveTask(id, col.key);\n },\n className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-2.5 flex flex-col min-h-[180px]'\n },\n h('div', {className:'flex items-center justify-between mb-2 px-1'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, col.label),\n h('span', {className:'text-[10px] font-mono-data text-text-muted'}, grouped[col.key].length)\n ),\n h('div', {className:'flex-1 space-y-1.5'},\n grouped[col.key].map(t => h('div', {\n key: t.id,\n draggable: true,\n onDragStart: e => e.dataTransfer.setData('task-id', String(t.id)),\n className:'p-2 rounded border border-border-subtle bg-surface-container/50 hover:border-primary/40 transition-colors cursor-grab active:cursor-grabbing'\n },\n h('div', {className:'flex items-start gap-1.5'},\n priorityDot(t.priority) && h('span', {className:'w-1.5 h-1.5 rounded-full mt-1 flex-shrink-0 ' + priorityDot(t.priority)}),\n h('span', {className:'text-[12px] text-on-surface font-semibold leading-tight flex-1'}, t.title || 'Untitled')\n ),\n h('div', {className:'flex items-center justify-between mt-1.5 gap-1 flex-wrap'},\n (t.due_date || t.due) && h('span', {className:'text-[10px] font-mono-data ' + (cardColor(t) || 'text-text-muted')},\n t.due_date || t.due\n ),\n t.ice_score != null && h('span', {className:'text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded bg-tertiary/10 text-tertiary border border-tertiary/20'},\n 'ICE ' + Number(t.ice_score).toFixed(1)\n ),\n (t.okr_id || t.objective_id) && h('span', {className:'text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded bg-secondary/10 text-secondary border border-secondary/20 flex items-center gap-0.5'},\n h(Icon, {name:'flag', size:9}), 'OKR'\n )\n )\n ))\n ),\n col.key === 'todo' && h('div', {className:'mt-2 pt-2 border-t border-border-subtle/50 space-y-1.5'},\n h(Input, {value: draft.title, onChange: v => setDraft(d => ({...d, title: v})), placeholder:'+ Add task…'}),\n h('div', {className:'flex gap-1.5'},\n h('input', {\n type:'date', value: draft.due_date,\n onChange: e => setDraft(d => ({...d, due_date: e.target.value})),\n className:'flex-1 bg-surface-container-lowest border border-border-subtle rounded px-2 py-1 text-[11px] font-mono-data text-on-surface outline-none focus:border-primary'\n }),\n h('select', {\n value: draft.priority, onChange: e => setDraft(d => ({...d, priority: e.target.value})),\n className:'bg-surface-container-lowest border border-border-subtle rounded px-2 py-1 text-[11px] text-on-surface outline-none focus:border-primary'\n },\n ['low','medium','high','critical'].map(p => h('option', {key: p, value: p}, p))\n )\n ),\n h(Btn, {onClick: addTask, variant:'primary', size:'sm', disabled: adding || !draft.title.trim(), className:'w-full'},\n h(Icon, {name:'add', size:13}), adding ? 'Adding…' : 'Add'\n )\n )\n ))\n )\n )\n );\n}\n\n// ─── Month View ─────────────────────────────────────────────────────────────\nconst DOW_HEAD = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];\n\nfunction MonthView({anchor, eventsByDay, onSelectEvent, onQuickAdd}) {\n const {Icon} = N();\n const d = parseIso(anchor);\n const year = d.getFullYear();\n const monthIdx = d.getMonth();\n const cells = useMemo(() => monthDays(year, monthIdx), [year, monthIdx]);\n const todayIso = today();\n const [hoverCell, setHoverCell] = useState(null);\n\n return h('div', {className:'glass-panel rounded-xl overflow-hidden'},\n h('div', {className:'grid grid-cols-7 border-b border-border-subtle bg-surface-container/40'},\n DOW_HEAD.map(d_ => h('div', {key: d_, className:'px-2 py-2 text-text-muted text-[11px] uppercase tracking-widest font-bold'}, d_))\n ),\n h('div', {className:'grid grid-cols-7'},\n cells.map((c, i) => {\n const dayEvents = eventsByDay[c.date] || [];\n const isToday = c.date === todayIso;\n const hasOverdue = dayEvents.some(e => e.source === 'tasks' && (e.meta?.status ?? e.status) !== 'done' && c.date < todayIso);\n const visible = dayEvents.slice(0, 3);\n const overflow = dayEvents.length - visible.length;\n return h('div', {\n key: c.date + '_' + i,\n onMouseEnter: () => setHoverCell(c.date),\n onMouseLeave: () => setHoverCell(null),\n className: 'border-b border-r border-border-subtle/50 min-h-[112px] p-1.5 flex flex-col gap-1 relative ' +\n (c.isCurrentMonth ? '' : 'bg-surface-container/20 opacity-60 ') +\n (hasOverdue ? 'border-b-error/60 ' : '')\n },\n h('div', {className:'flex items-center justify-between'},\n h('span', {\n className: 'text-[11px] font-mono-data ' +\n (isToday\n ? 'bg-primary text-on-primary px-1.5 py-0.5 rounded-full font-bold'\n : (c.isCurrentMonth ? 'text-on-surface font-bold' : 'text-text-muted')),\n style: isToday ? {boxShadow:'0 0 0 2px rgba(192,193,255,0.3)'} : {}\n }, parseIso(c.date).getDate()),\n hoverCell === c.date && c.isCurrentMonth && h('button', {\n onClick: (e) => { e.stopPropagation(); onQuickAdd && onQuickAdd(c.date); },\n className:'text-text-muted hover:text-primary p-0.5',\n title:'Add event'\n }, h(Icon, {name:'add', size:12}))\n ),\n visible.map((ev, j) => h('button', {\n key: ev.id + '_' + j,\n onClick: (e) => { e.stopPropagation(); onSelectEvent && onSelectEvent(ev); },\n className:'flex items-center gap-1 px-1.5 py-0.5 rounded text-left text-[10px] font-semibold truncate hover:opacity-80 transition-opacity',\n style:{\n background: (ev.color || '#c0c1ff') + '22',\n borderLeft: '2px solid ' + (ev.color || '#c0c1ff'),\n color: ev.color || '#c0c1ff',\n },\n title: ev.title + (ev.time ? ' · ' + fmtTime(ev.time) : '')\n },\n h(Icon, {name: (SOURCE_META[ev.source] || SOURCE_META.custom).icon, size:10}),\n h('span', {className:'truncate'},\n ev.time && !ev.all_day ? fmtTime(ev.time) + ' ' : '',\n ev.title\n )\n )),\n overflow > 0 && h('button', {\n onClick: (e) => { e.stopPropagation(); onQuickAdd && onQuickAdd(c.date, true); },\n className:'text-[10px] text-text-muted hover:text-primary font-mono-data text-left px-1'\n }, '+' + overflow + ' more')\n );\n })\n )\n );\n}\n\n// ─── Week View ──────────────────────────────────────────────────────────────\nfunction WeekView({anchor, eventsByDay, onSelectEvent}) {\n const days = useMemo(() => weekDays(anchor), [anchor]);\n const todayIso = today();\n const [now, setNow] = useState(new Date());\n useEffect(() => {\n const iv = setInterval(() => setNow(new Date()), 60000);\n return () => clearInterval(iv);\n }, []);\n\n // Split events into all-day vs timed for each day\n const allDayByDay = {};\n const timedByDay = {};\n days.forEach(iso => {\n const list = eventsByDay[iso] || [];\n allDayByDay[iso] = list.filter(e => e.all_day || !e.time);\n timedByDay[iso] = list.filter(e => !e.all_day && e.time);\n });\n\n const HOUR_HEIGHT = 48;\n const nowMins = now.getHours() * 60 + now.getMinutes();\n const nowTop = (nowMins / 60) * HOUR_HEIGHT;\n const nowInWeek = days.includes(isoOf(now));\n\n // For overlap detection per day\n const overlapSlots = (events) => {\n // Each event gets {slot: 0/1, slots: 1/2}. Simple: pair-wise overlap halves width.\n const out = events.map(e => ({...e, slot: 0, slots: 1}));\n for (let i = 0; i < out.length; i++) {\n for (let j = 0; j < i; j++) {\n const a = out[i], b = out[j];\n const aStart = parseTimeHours(a.time);\n const aEnd = parseTimeHours(a.end_time) || aStart + 1;\n const bStart = parseTimeHours(b.time);\n const bEnd = parseTimeHours(b.end_time) || bStart + 1;\n if (aStart < bEnd && bStart < aEnd) {\n a.slot = 1; a.slots = 2; b.slots = 2;\n }\n }\n }\n return out;\n };\n\n return h('div', {className:'glass-panel rounded-xl overflow-hidden flex flex-col max-h-[calc(100vh-300px)]'},\n // Sticky header\n h('div', {className:'sticky top-0 z-20 grid grid-cols-[60px_repeat(7,1fr)] border-b border-border-subtle bg-surface-container/90 backdrop-blur-sm'},\n h('div', {className:'border-r border-border-subtle/50'}),\n days.map(iso => {\n const d = parseIso(iso);\n const isTd = iso === todayIso;\n return h('div', {key: iso, className:'px-2 py-2 border-r border-border-subtle/50 text-center'},\n h('div', {className:'text-[10px] uppercase tracking-widest text-text-muted font-bold'},\n d.toLocaleDateString('en-US', {weekday:'short'})\n ),\n h('div', {\n className:'text-[18px] font-extrabold mt-0.5 ' + (isTd ? 'text-primary' : 'text-on-surface'),\n style:{fontVariantNumeric:'tabular-nums'}\n }, d.getDate())\n );\n })\n ),\n\n // All-day swim lane\n h('div', {className:'sticky top-[58px] z-10 grid grid-cols-[60px_repeat(7,1fr)] border-b border-border-subtle bg-surface-container/70 backdrop-blur-sm'},\n h('div', {className:'border-r border-border-subtle/50 px-2 py-1 text-[9px] uppercase tracking-widest text-text-muted font-bold flex items-center justify-end'}, 'All-day'),\n days.map(iso => h('div', {key: iso, className:'border-r border-border-subtle/50 px-1 py-1 space-y-0.5 min-h-[28px]'},\n (allDayByDay[iso] || []).slice(0, 4).map((ev, j) => h('button', {\n key: ev.id + '_' + j,\n onClick: () => onSelectEvent && onSelectEvent(ev),\n className:'block w-full text-left px-1.5 py-0.5 rounded text-[10px] font-semibold truncate hover:opacity-80',\n style:{\n background: (ev.color || '#c0c1ff') + '22',\n borderLeft: '2px solid ' + (ev.color || '#c0c1ff'),\n color: ev.color || '#c0c1ff',\n },\n title: ev.title\n }, ev.title))\n ))\n ),\n\n // Hourly grid\n h('div', {className:'flex-1 overflow-y-auto relative'},\n h('div', {className:'grid grid-cols-[60px_repeat(7,1fr)] relative', style:{minHeight: (24 * HOUR_HEIGHT) + 'px'}},\n // Hour labels\n h('div', {className:'border-r border-border-subtle/50'},\n Array.from({length: 24}).map((_, hh) => h('div', {\n key: hh, style:{height: HOUR_HEIGHT + 'px'},\n className:'border-b border-border-subtle/30 text-[10px] text-text-muted text-right pr-1.5 pt-0.5 font-mono-data'\n }, hh === 0 ? '' : (hh + ':00')))\n ),\n // Day columns\n days.map(iso => {\n const events = overlapSlots(timedByDay[iso] || []);\n return h('div', {key: iso, className:'border-r border-border-subtle/50 relative'},\n // Hour grid lines\n Array.from({length: 24}).map((_, hh) => h('div', {\n key: hh, style:{height: HOUR_HEIGHT + 'px'},\n className:'border-b border-border-subtle/20'\n })),\n // Timed events\n events.map((ev, j) => {\n const startH = parseTimeHours(ev.time);\n const endH = parseTimeHours(ev.end_time) || startH + 1;\n const top = startH * HOUR_HEIGHT;\n const height = Math.max(20, (endH - startH) * HOUR_HEIGHT);\n const leftPct = ev.slots > 1 ? (ev.slot * 50) : 0;\n const widthPct = ev.slots > 1 ? 49 : 98;\n return h('button', {\n key: ev.id + '_' + j,\n onClick: () => onSelectEvent && onSelectEvent(ev),\n className:'absolute rounded p-1 text-left overflow-hidden text-[10px] hover:opacity-90 transition-opacity',\n style:{\n top: top + 'px', height: height + 'px',\n left: 'calc(' + leftPct + '% + 2px)',\n width: 'calc(' + widthPct + '% - 4px)',\n background: (ev.color || '#c0c1ff') + '33',\n borderLeft: '3px solid ' + (ev.color || '#c0c1ff'),\n color: ev.color || '#c0c1ff',\n }\n },\n h('div', {className:'font-bold truncate'}, ev.title),\n h('div', {className:'opacity-80 font-mono-data text-[9px]'}, fmtTime(ev.time))\n );\n })\n );\n }),\n // Current time indicator\n nowInWeek && h('div', {\n className:'absolute left-[60px] right-0 z-30 pointer-events-none',\n style:{top: nowTop + 'px'}\n },\n h('div', {className:'h-px bg-error', style:{boxShadow:'0 0 4px rgba(244,67,54,0.5)'}}),\n h('div', {className:'absolute -left-1 -top-1 w-2 h-2 rounded-full bg-error'})\n )\n )\n )\n );\n}\n\n// ─── Agenda View ────────────────────────────────────────────────────────────\nfunction AgendaView({anchor, eventsByDay, onSelectEvent}) {\n const {Icon} = N();\n // Show 30 days starting at the first of anchor's month.\n const d = parseIso(anchor);\n const start = isoOf(new Date(d.getFullYear(), d.getMonth(), 1));\n const days = useMemo(() => {\n const out = [];\n for (let i = 0; i < 30; i++) out.push(addDays(start, i));\n return out;\n }, [start]);\n const todayIso = today();\n const populated = days.filter(iso => (eventsByDay[iso] || []).length > 0);\n\n if (populated.length === 0) {\n return h('div', {className:'glass-panel rounded-xl p-xl text-center text-text-muted'},\n h(Icon, {name:'event_busy', size:28, className:'mx-auto mb-2 opacity-60'}),\n h('div', {className:'text-[13px]'}, 'No events in this view. Add one with + Add Event.')\n );\n }\n return h('div', {className:'glass-panel rounded-xl divide-y divide-border-subtle/40'},\n populated.map(iso => {\n const list = eventsByDay[iso] || [];\n const isTd = iso === todayIso;\n return h('div', {key: iso, className:'p-md'},\n h('div', {className:'flex items-center gap-2 mb-2'},\n h('h4', {className:'text-[13px] font-extrabold ' + (isTd ? 'text-primary' : 'text-on-surface')},\n fmtDateLong(iso)\n ),\n h('span', {className:'text-[10px] font-mono-data text-text-muted px-2 py-0.5 rounded bg-surface-container border border-border-subtle'},\n list.length + ' event' + (list.length === 1 ? '' : 's')\n )\n ),\n h('div', {className:'space-y-1'},\n list.map((ev, j) => {\n const meta = SOURCE_META[ev.source] || SOURCE_META.custom;\n const sChip = statusChip(ev.meta?.status ?? ev.status);\n return h('button', {\n key: ev.id + '_' + j,\n onClick: () => onSelectEvent && onSelectEvent(ev),\n className:'w-full flex items-center gap-3 p-2 rounded-lg hover:bg-surface-container/40 transition-colors text-left'\n },\n h('div', {className:'w-16 flex-shrink-0 text-[11px] font-mono-data text-text-muted'},\n ev.all_day ? 'All day' : (ev.time ? fmtTime(ev.time) : '—')\n ),\n h('span', {className:'w-2 h-2 rounded-full flex-shrink-0', style:{background: ev.color || meta.color}}),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'text-[13px] font-semibold text-on-surface truncate'}, ev.title),\n h('div', {className:'text-[10px] text-text-muted flex items-center gap-1.5 mt-0.5'},\n h(Icon, {name: meta.icon, size:10}),\n h('span', null, meta.label),\n ev.workspace && ev.workspace !== 'all' && h('span', null, '· ' + ev.workspace)\n )\n ),\n sChip && h('span', {className:'text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border flex-shrink-0 ' + sChip.cls},\n sChip.label\n ),\n h(Icon, {name:'chevron_right', size:16, className:'text-text-muted flex-shrink-0'})\n );\n })\n )\n );\n })\n );\n}\n\n// ─── CalendarPage (top-level) ───────────────────────────────────────────────\nexport function CalendarPage({setActivePage, integrations, agents, showToast}) {\n const {Icon, Btn, PageHeader, Spinner} = N();\n\n const [view, setView] = useState('month'); // month | week | agenda\n const [anchor, setAnchor] = useState(today());\n const [workspace, setWorkspace] = useState('all');\n const [sources, setSources] = useState(() => {\n const init = {}; ALL_SOURCES.forEach(s => { init[s] = true; }); return init;\n });\n\n const [events, setEvents] = useState([]);\n const [loading, setLoading] = useState(true);\n const [err, setErr] = useState(null);\n\n const [selectedEvent, setSelectedEvent] = useState(null);\n const [formOpen, setFormOpen] = useState(false);\n const [formInitial, setFormInitial] = useState(null);\n const [briefOpen, setBriefOpen] = useState(false);\n const [boardCollapsed, setBoardCollapsed] = useState(true);\n\n // Compute fetch range for current view.\n const range = useMemo(() => {\n const d = parseIso(anchor);\n if (view === 'week') {\n const wd = weekDays(anchor);\n return {from: wd[0], to: wd[6]};\n }\n if (view === 'agenda') {\n const start = isoOf(new Date(d.getFullYear(), d.getMonth(), 1));\n return {from: start, to: addDays(start, 30)};\n }\n // month — include leading/trailing days from the 42-cell grid\n const cells = monthDays(d.getFullYear(), d.getMonth());\n return {from: cells[0].date, to: cells[cells.length - 1].date};\n }, [view, anchor]);\n\n const load = useCallback(async () => {\n setLoading(true); setErr(null);\n try {\n const params = new URLSearchParams();\n params.set('from', range.from);\n params.set('to', range.to);\n if (workspace && workspace !== 'all') params.set('workspace', workspace);\n ALL_SOURCES.forEach(s => { if (sources[s]) params.append('source', s); });\n const r = await fetch('/api/calendar/unified?' + params.toString());\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const d = await r.json();\n setEvents(Array.isArray(d) ? d : []);\n } catch (e) {\n setErr(e.message); setEvents([]);\n } finally { setLoading(false); }\n }, [range.from, range.to, workspace, sources]);\n\n useEffect(() => { load(); }, [load]);\n\n // Real-time: silently refresh the unified calendar every 45s + on window focus, so executed\n // tasks/experiments/approved actions appear without a manual reload (no loading flicker).\n useEffect(() => {\n let cancelled = false;\n const silent = async () => {\n try {\n const params = new URLSearchParams();\n params.set('from', range.from); params.set('to', range.to);\n if (workspace && workspace !== 'all') params.set('workspace', workspace);\n ALL_SOURCES.forEach(s => { if (sources[s]) params.append('source', s); });\n const r = await fetch('/api/calendar/unified?' + params.toString());\n if (!r.ok) return;\n const d = await r.json();\n if (!cancelled) setEvents(Array.isArray(d) ? d : []);\n } catch (_e) { /* silent */ }\n };\n const iv = setInterval(silent, 45000);\n const onFocus = () => silent();\n window.addEventListener('focus', onFocus);\n return () => { cancelled = true; clearInterval(iv); window.removeEventListener('focus', onFocus); };\n }, [range.from, range.to, workspace, sources]);\n\n const eventsByDay = useMemo(() => groupByDay(events), [events]);\n\n const goPrev = () => {\n if (view === 'week') setAnchor(addDays(anchor, -7));\n else setAnchor(addMonths(anchor, -1));\n };\n const goNext = () => {\n if (view === 'week') setAnchor(addDays(anchor, 7));\n else setAnchor(addMonths(anchor, 1));\n };\n const goToday = () => setAnchor(today());\n\n const openAdd = (date) => { setFormInitial({date: date || anchor}); setFormOpen(true); };\n const openEdit = (ev) => { setFormInitial(ev); setFormOpen(true); setSelectedEvent(null); };\n\n const markDone = async (ev) => {\n if (ev.source !== 'task') return;\n const id = String(ev.id).replace(/^task_/, '');\n try {\n await fetch('/api/tasks/' + id, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({status:'done'})\n });\n showToast && showToast('Marked done', 'success');\n setSelectedEvent(null);\n load();\n } catch (e) {\n showToast && showToast('Failed: ' + e.message, 'error');\n }\n };\n\n const toggleSource = (s) => setSources(prev => ({...prev, [s]: !prev[s]}));\n\n return h('div', {className:'p-lg lg:p-xl max-w-[1440px] mx-auto pb-20'},\n h(PageHeader, {\n title:'Command Calendar',\n subtitle:'Tasks, experiments, OKRs, and your Google Calendar — one timeline.',\n action: h('div', {className:'flex items-center gap-2'},\n h('div', {className:'flex items-center gap-1 bg-surface-container-lowest p-1 rounded-lg border border-border-subtle'},\n ['month','week','agenda'].map(v => h('button', {\n key: v, onClick: () => setView(v), type:'button',\n className: 'px-3 py-1.5 rounded-md text-[11px] font-bold uppercase tracking-widest transition-all ' +\n (view === v ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface')\n }, v))\n ),\n h(Btn, {onClick: () => openAdd(), variant:'primary', size:'sm'},\n h(Icon, {name:'add', size:14}), 'Add Event'\n )\n )\n }),\n\n // Sub-header filter bar\n h('div', {className:'glass-panel rounded-xl p-md mb-md flex flex-wrap items-center gap-3'},\n h('div', {className:'flex items-center gap-1'},\n h('button', {\n onClick: goPrev, type:'button',\n className:'p-1.5 rounded hover:bg-surface-container text-text-muted hover:text-on-surface',\n title: view === 'week' ? 'Previous week' : 'Previous month'\n }, h(Icon, {name:'chevron_left', size:18})),\n h('button', {\n onClick: goNext, type:'button',\n className:'p-1.5 rounded hover:bg-surface-container text-text-muted hover:text-on-surface',\n title: view === 'week' ? 'Next week' : 'Next month'\n }, h(Icon, {name:'chevron_right', size:18})),\n h('span', {className:'text-[14px] font-bold ml-2 min-w-[140px]'},\n view === 'week'\n ? (fmtDateLong(weekDays(anchor)[0]).split(',')[1] || '').trim() + ' – ' + (fmtDateLong(weekDays(anchor)[6]).split(',')[1] || '').trim()\n : fmtMonthYear(anchor)\n ),\n h('button', {\n onClick: goToday, type:'button',\n className:'ml-2 px-2.5 py-1 rounded text-[11px] font-bold uppercase tracking-widest text-on-surface border border-border-subtle hover:border-primary hover:text-primary transition-colors'\n }, 'Today')\n ),\n h('div', {className:'h-5 w-px bg-border-subtle'}),\n h('div', {className:'flex items-center gap-1.5'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Workspace'),\n h('select', {\n value: workspace, onChange: e => setWorkspace(e.target.value),\n className:'bg-surface-container-lowest border border-border-subtle rounded px-2 py-1 text-[12px] text-on-surface focus:border-primary focus:outline-none'\n }, WORKSPACES.map(w => h('option', {key: w, value: w}, w)))\n ),\n h('div', {className:'h-5 w-px bg-border-subtle'}),\n h('div', {className:'flex flex-wrap items-center gap-1.5'},\n ALL_SOURCES.map(s => {\n const meta = SOURCE_META[s];\n const on = sources[s];\n return h('button', {\n key: s, type:'button', onClick: () => toggleSource(s),\n className:'inline-flex items-center gap-1 px-2 py-1 rounded border text-[10px] font-bold uppercase tracking-widest transition-all ' +\n (on\n ? 'border-primary/40 bg-primary/10 text-on-surface'\n : 'border-border-subtle bg-surface-container-lowest text-text-muted')\n },\n h('span', {className:'w-1.5 h-1.5 rounded-full', style:{background: on ? meta.color : 'currentColor', opacity: on ? 1 : 0.4}}),\n meta.label\n );\n })\n ),\n h('div', {className:'flex-1'}),\n h(Btn, {onClick: () => setBriefOpen(true), variant:'ghost', size:'sm'},\n h(Icon, {name:'auto_awesome', size:14}), 'AI Briefing'\n )\n ),\n\n // View body\n loading && events.length === 0\n ? h('div', {className:'glass-panel rounded-xl py-16 flex items-center justify-center'},\n h(Spinner, {size: 24})\n )\n : err\n ? h('div', {className:'glass-panel rounded-xl p-lg text-error text-[13px]'},\n 'Calendar load failed: ' + err\n )\n : view === 'month'\n ? h(MonthView, {anchor, eventsByDay, onSelectEvent: setSelectedEvent, onQuickAdd: openAdd})\n : view === 'week'\n ? h(WeekView, {anchor, eventsByDay, onSelectEvent: setSelectedEvent})\n : h(AgendaView, {anchor, eventsByDay, onSelectEvent: setSelectedEvent}),\n\n // Empty hint when not loading\n !loading && !err && events.length === 0 && h('div', {className:'glass-panel rounded-xl p-lg mt-md text-center text-text-muted text-[12px]'},\n 'No events in this view. Add one with + Add Event.'\n ),\n\n // Collapsible task board\n h(TaskBoard, {collapsed: boardCollapsed, onToggle: () => setBoardCollapsed(c => !c), showToast}),\n\n // Drawer + modals\n selectedEvent && h(EventDrawer, {\n event: selectedEvent,\n onClose: () => setSelectedEvent(null),\n onMarkDone: markDone,\n onEdit: openEdit,\n showToast,\n }),\n h(EventForm, {\n open: formOpen,\n onClose: () => { setFormOpen(false); setFormInitial(null); },\n initial: formInitial,\n onSaved: load,\n showToast,\n }),\n h(AIBriefingModal, {open: briefOpen, onClose: () => setBriefOpen(false), date: today()})\n );\n}\n\n// QA fix: removed duplicate \"export { CalendarPage }\" — CalendarPage is already exported\n// inline above via \"export function CalendarPage\". A second named export of the same symbol\n// is a SyntaxError in ES modules and made the browser fall back to the \"Calendar module\n// failed to load\" stub.\n`;\n}\n",[426],"d65ddcda-5d9b-11f1-8267-1607ee4eb77e","frontend_approvals.ts","2b723038-5a75-11f1-8516-ee650bb23af1",755,["D",1780305932286],"// Approvals inbox — the human-in-the-loop surface for the action_queue. Lists AI-prepared\n// external actions (email/LinkedIn/WordPress) and lets the user Approve (→ executes the real\n// integration call) or Reject. Served at /api/app-approvals; shared deps via window.__nexus.\n// NOTE: plain browser JS only — never put TypeScript annotations inside this template string.\nexport function getApprovalsJS(): string {\n return `\nimport React, { useState, useEffect, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\nconst INT_ICON = { gmail:'mail', outlook:'mail', wordpress:'article', linkedin:'work', calendar:'event', drive:'folder', sheets:'table_chart', docs:'description' };\nconst STATUS_COLOR = { prepared:'text-tertiary', approved:'text-primary', executing:'text-primary', done:'text-secondary', failed:'text-error', rejected:'text-text-muted' };\nconst FILTERS = ['prepared','done','failed','rejected','all'];\n\nexport function ApprovalsPage(props) {\n const { Icon, Spinner } = N();\n const [actions, setActions] = useState([]);\n const [loading, setLoading] = useState(true);\n const [busy, setBusy] = useState(null);\n const [filter, setFilter] = useState('prepared');\n\n const load = useCallback(() => {\n setLoading(true);\n const qs = filter === 'all' ? '' : ('?status=' + filter);\n fetch('/api/actions' + qs)\n .then(r => r.json())\n .then(d => setActions(Array.isArray(d) ? d : []))\n .catch(() => setActions([]))\n .finally(() => setLoading(false));\n }, [filter]);\n useEffect(() => {\n load();\n const onTick = () => load();\n window.addEventListener('nexus:tick', onTick);\n return () => window.removeEventListener('nexus:tick', onTick);\n }, [load]);\n\n const act = async (id, kind) => {\n setBusy(id);\n try {\n const r = await fetch('/api/actions/' + id + '/' + kind, { method:'POST' });\n const out = await r.json();\n if (props.showToast) {\n if (kind === 'reject') props.showToast('Action rejected', 'success');\n else if (out.status === 'done') props.showToast('Approved & sent', 'success');\n else props.showToast('Send failed: ' + (out.result && out.result.error ? out.result.error : 'see card'), 'error');\n }\n } catch (e) {\n if (props.showToast) props.showToast('Failed: ' + (e && e.message ? e.message : 'error'), 'error');\n } finally {\n setBusy(null);\n load();\n }\n };\n\n return h('div', { className:'p-lg space-y-md max-w-4xl mx-auto' },\n h('div', { className:'flex items-center justify-between flex-wrap gap-2' },\n h('div', null,\n h('h1', { className:'text-[20px] font-bold text-on-surface' }, 'Approvals'),\n h('p', { className:'text-[13px] text-text-muted' }, 'Review AI-prepared actions before they send. Nothing goes out until you approve.')\n ),\n h('div', { className:'flex gap-1 flex-wrap' },\n FILTERS.map(f => h('button', {\n key:f, onClick:() => setFilter(f),\n className:'px-2.5 py-1 rounded-md text-[12px] capitalize ' + (filter === f ? 'bg-primary text-on-primary' : 'text-text-muted hover:bg-surface-variant/20')\n }, f))\n )\n ),\n loading\n ? h('div', { className:'flex justify-center p-10' }, Spinner ? h(Spinner, { size:28 }) : 'Loading…')\n : actions.length === 0\n ? h('div', { className:'glass-panel rounded-xl p-10 text-center text-text-muted text-[13px]' },\n 'No ' + (filter === 'all' ? '' : filter + ' ') + 'actions yet. When the AI drafts an email, LinkedIn post, or WordPress post, it lands here for your approval.')\n : h('div', { className:'space-y-2.5' }, actions.map(a => h('div', { key:a.id, className:'glass-panel rounded-xl p-md' },\n h('div', { className:'flex items-start justify-between gap-3' },\n h('div', { className:'flex items-start gap-2.5 min-w-0' },\n h(Icon, { name: INT_ICON[a.integration] || 'bolt', size:18, className:'mt-0.5 text-primary' }),\n h('div', { className:'min-w-0' },\n h('div', { className:'text-[14px] font-semibold text-on-surface' }, a.title || (a.integration + ' · ' + a.endpoint)),\n h('div', { className:'text-[11px] text-text-muted font-mono-data' }, a.integration + ' · ' + a.endpoint + ' · #' + a.id),\n a.preview && h('pre', { className:'mt-1.5 text-[12px] text-on-surface-variant whitespace-pre-wrap bg-surface-container-high/40 rounded-md p-2 max-h-40 overflow-auto' }, a.preview)\n )\n ),\n h('span', { className:'text-[11px] font-bold uppercase shrink-0 ' + (STATUS_COLOR[a.status] || 'text-text-muted') }, a.status)\n ),\n a.status === 'prepared' && h('div', { className:'flex gap-2 mt-3 justify-end' },\n h('button', { disabled: busy === a.id, onClick:() => act(a.id, 'reject'),\n className:'px-3 py-1.5 rounded-lg text-[13px] text-text-muted hover:bg-surface-variant/20 disabled:opacity-50' }, 'Reject'),\n h('button', { disabled: busy === a.id, onClick:() => act(a.id, 'approve'),\n className:'px-3.5 py-1.5 rounded-lg text-[13px] font-semibold bg-primary text-on-primary hover:opacity-90 disabled:opacity-50' },\n busy === a.id ? 'Working…' : 'Approve & Send')\n ),\n a.status === 'failed' && a.result && h('div', { className:'mt-2 text-[12px] text-error' },\n 'Error: ' + (typeof a.result === 'string' ? a.result : JSON.stringify(a.result)))\n )))\n );\n}\n`;\n}\n",[434],"5113cada-5da5-11f1-a937-1607ee4eb77e","frontend.ts","2ff38a48-56ca-11f1-8589-ee650bb23af1",771,["D",1780310003617],21,"export function getFrontendHTML(): string {\n return `<!DOCTYPE html>\n<html lang=\"en\" class=\"dark\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Nexus AI

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_1695":1696,"_1697":1698},"routes/_app.x.$handle.$name",{"_99":98,"_31":44,"_107":89,"_26":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":24,"_122":123,"_124":58,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":24},"version",1015,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","api/seo.ts","latestPath","fileId","08c0dcfa-5f26-11f1-afa7-1607ee4eb77e","name","seo.ts","fileType","script","content","// On-page SEO analyzer · analyzeUrl(url) -> { score, checks, recommendations }.\n//\n// Combines whatever REAL signals are reachable for a given URL:\n// - the page's own HTML (fetched server-side, SSRF-guarded) -> title, meta description,\n// H1, word count, internal/outbound links, image alt coverage, canonical, viewport.\n// - WordPress post content, when the URL lives on the tenant's connected WP site.\n// - Google Search Console query/position data for the page (when GSC is connected and\n// the URL is on the verified property).\n// - Ahrefs site-level metrics (domain rating, organic traffic) for added context.\n//\n// HONEST DEGRADATION: an external/unreachable URL is reported as not_analyzable rather than\n// scored from nothing. Every check carries a status (pass|warn|fail|info|skip) + a human\n// detail so the UI can render an honest checklist. NO fabricated numbers.\n//\n// Tenant scoping: the only DB access is through getCredentials(), which is already scoped by\n// currentTenantId() (see integrations/_shared.ts). A tenant therefore only ever analyzes\n// against ITS OWN connected WordPress/GSC/Ahrefs credentials.\nimport {\n getCredentials,\n withGoogleFallback,\n safeJson,\n isSafePublicUrl,\n fetchWithTimeout,\n} from \"./integrations/_shared.ts\";\n\nexport type CheckStatus = \"pass\" | \"warn\" | \"fail\" | \"info\" | \"skip\";\n\nexport interface SeoCheck {\n name: string;\n status: CheckStatus;\n detail: string;\n}\n\nexport interface SeoAnalysis {\n url: string;\n analyzable: boolean;\n // 0–100 on-page score, or null when the page could not be fetched (we never invent a score).\n score: number | null;\n checks: SeoCheck[];\n recommendations: string[];\n // Lightweight surfaced signals so the UI can show the raw evidence behind the score.\n signals: {\n fetched: boolean;\n http_status?: number;\n title?: string | null;\n title_length?: number;\n meta_description?: string | null;\n meta_description_length?: number;\n h1_count?: number;\n h1_text?: string | null;\n word_count?: number;\n internal_links?: number;\n outbound_links?: number;\n image_count?: number;\n images_missing_alt?: number;\n has_canonical?: boolean;\n has_viewport?: boolean;\n is_our_site?: boolean;\n };\n // Real provider context that was joinable (omitted when not connected / not matchable).\n gsc?: {\n clicks: number;\n impressions: number;\n ctr: number;\n position: number;\n } | null;\n ahrefs?: {\n domain_rating?: number | null;\n organic_traffic?: number | null;\n } | null;\n notes: string[];\n}\n\n// ─── HTML extraction helpers ─────────────────────────────────────────────────\n// Intentionally lightweight regex parsing: the val.town runtime has no DOM, and pulling a\n// full HTML parser would bloat the bundle. These cover the on-page signals SEO cares about.\n\nfunction stripTag(s: string): string {\n return s.replace(/<[^>]*>/g, \"\").replace(/\\s+/g, \" \").trim();\n}\n\nfunction decodeEntities(s: string): string {\n return s\n .replace(/&/g, \"&\")\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/"/g, '\"')\n .replace(/�?39;|'/g, \"'\")\n .replace(/ /g, \" \");\n}\n\nfunction matchAttr(tag: string, attr: string): string | null {\n const re = new RegExp(`${attr}\\\\s*=\\\\s*(\"([^\"]*)\"|'([^']*)'|([^\\\\s>]+))`, \"i\");\n const m = tag.match(re);\n if (!m) return null;\n return m[2] ?? m[3] ?? m[4] ?? null;\n}\n\nfunction extractTitle(html: string): string | null {\n const m = html.match(/]*>([\\s\\S]*?)<\\/title>/i);\n return m ? decodeEntities(stripTag(m[1])) : null;\n}\n\nfunction extractMetaDescription(html: string): string | null {\n // Scan every tag and return the one whose name=\"description\".\n const metas = html.match(/]*>/gi) || [];\n for (const tag of metas) {\n const name = (matchAttr(tag, \"name\") || \"\").toLowerCase();\n if (name === \"description\") {\n const content = matchAttr(tag, \"content\");\n if (content != null) return decodeEntities(content).trim();\n }\n }\n return null;\n}\n\nfunction extractH1(html: string): { count: number; first: string | null } {\n const matches = html.match(/]*>([\\s\\S]*?)<\\/h1>/gi) || [];\n let first: string | null = null;\n const firstMatch = matches[0];\n if (firstMatch) {\n const inner = firstMatch.replace(/<\\/?h1\\b[^>]*>/gi, \"\");\n first = decodeEntities(stripTag(inner)) || null;\n }\n return { count: matches.length, first };\n}\n\n// Word count from the visible : drop scripts/styles, strip tags, count tokens.\nfunction extractWordCount(html: string): number {\n let body = html;\n const bodyMatch = html.match(/]*>([\\s\\S]*?)<\\/body>/i);\n if (bodyMatch) body = bodyMatch[1];\n const text = body\n .replace(/]*>[\\s\\S]*?<\\/script>/gi, \" \")\n .replace(/]*>[\\s\\S]*?<\\/style>/gi, \" \")\n .replace(/]*>[\\s\\S]*?<\\/noscript>/gi, \" \");\n const plain = decodeEntities(stripTag(text));\n if (!plain) return 0;\n return plain.split(/\\s+/).filter(Boolean).length;\n}\n\nfunction sameHost(a: string, b: string): boolean {\n try {\n const ha = new URL(a).hostname.toLowerCase().replace(/^www\\./, \"\");\n const hb = new URL(b).hostname.toLowerCase().replace(/^www\\./, \"\");\n return ha === hb;\n } catch {\n return false;\n }\n}\n\nfunction extractLinks(html: string, pageUrl: string): { internal: number; outbound: number } {\n const anchors = html.match(/]*href\\s*=\\s*(\"[^\"]*\"|'[^']*'|[^\\s>]+)[^>]*>/gi) || [];\n let internal = 0;\n let outbound = 0;\n for (const a of anchors) {\n const href = (matchAttr(a, \"href\") || \"\").trim();\n if (!href || href.startsWith(\"#\") || href.startsWith(\"mailto:\") || href.startsWith(\"tel:\") || href.startsWith(\"javascript:\")) {\n continue;\n }\n if (/^https?:\\/\\//i.test(href)) {\n if (sameHost(href, pageUrl)) internal++;\n else outbound++;\n } else {\n // Relative URL -> same site.\n internal++;\n }\n }\n return { internal, outbound };\n}\n\nfunction extractImages(html: string): { count: number; missingAlt: number } {\n const imgs = html.match(/]*>/gi) || [];\n let missingAlt = 0;\n for (const img of imgs) {\n const alt = matchAttr(img, \"alt\");\n if (alt == null || alt.trim() === \"\") missingAlt++;\n }\n return { count: imgs.length, missingAlt };\n}\n\nfunction hasCanonical(html: string): boolean {\n const links = html.match(/]*>/gi) || [];\n return links.some((l) => (matchAttr(l, \"rel\") || \"\").toLowerCase().includes(\"canonical\"));\n}\n\nfunction hasViewport(html: string): boolean {\n const metas = html.match(/]*>/gi) || [];\n return metas.some((m) => (matchAttr(m, \"name\") || \"\").toLowerCase() === \"viewport\");\n}\n\n// ─── Provider context (best-effort, honest) ──────────────────────────────────\n\n// GSC page-level query rollup for a specific URL, when GSC is connected and the URL is on the\n// verified property. Returns null otherwise (never throws into the analyzer).\nasync function fetchGscForPage(pageUrl: string): Promise {\n try {\n let creds = await getCredentials(\"gsc\");\n creds = await withGoogleFallback(creds ?? {});\n const rawSite = (creds.extra_config?.site_url ?? \"\").toString().trim();\n if (!creds.access_token || !rawSite) return null;\n // The property may be a URL-prefix (\"https://example.com/\") or a domain property\n // (\"sc-domain:example.com\"). Only query when the page host matches the property host.\n let propHost = \"\";\n if (rawSite.startsWith(\"sc-domain:\")) {\n propHost = rawSite.slice(\"sc-domain:\".length).toLowerCase().replace(/^www\\./, \"\");\n } else {\n try { propHost = new URL(rawSite).hostname.toLowerCase().replace(/^www\\./, \"\"); } catch { propHost = \"\"; }\n }\n let pageHost = \"\";\n try { pageHost = new URL(pageUrl).hostname.toLowerCase().replace(/^www\\./, \"\"); } catch { pageHost = \"\"; }\n if (!propHost || propHost !== pageHost) return null;\n\n const siteParam = encodeURIComponent(rawSite);\n const end = new Date().toISOString().slice(0, 10);\n const start = new Date(Date.now() - 90 * 864e5).toISOString().slice(0, 10);\n const r = await fetchWithTimeout(\n `https://searchconsole.googleapis.com/webmasters/v3/sites/${siteParam}/searchAnalytics/query`,\n {\n method: \"POST\",\n headers: { Authorization: `Bearer ${creds.access_token}`, \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n startDate: start,\n endDate: end,\n dimensions: [\"page\"],\n dimensionFilterGroups: [{ filters: [{ dimension: \"page\", operator: \"equals\", expression: pageUrl }] }],\n rowLimit: 1,\n }),\n },\n 15000,\n );\n if (!r.ok) return null;\n const d = await safeJson(r);\n const row = d?.rows?.[0];\n if (!row) return null;\n return {\n clicks: Number(row.clicks) || 0,\n impressions: Number(row.impressions) || 0,\n ctr: (Number(row.ctr) || 0) * 100,\n position: Number(row.position) || 0,\n };\n } catch {\n return null;\n }\n}\n\n// Ahrefs domain-level context (DR + organic traffic) for the page's domain, when connected.\nasync function fetchAhrefsForDomain(pageUrl: string): Promise {\n try {\n const creds = await getCredentials(\"ahrefs\");\n if (!creds?.api_key) return null;\n let host = \"\";\n try { host = new URL(pageUrl).hostname; } catch { return null; }\n if (!host) return null;\n const today = new Date().toISOString().slice(0, 10);\n const headers = { Authorization: `Bearer ${creds.api_key}` };\n const out: { domain_rating?: number | null; organic_traffic?: number | null } = {};\n try {\n const r = await fetchWithTimeout(\n `https://api.ahrefs.com/v3/site-explorer/domain-rating?target=${encodeURIComponent(host)}&date=${today}`,\n { headers },\n 15000,\n );\n if (r.ok) {\n const d = await safeJson(r);\n const dr = d?.domain_rating?.domain_rating;\n out.domain_rating = typeof dr === \"number\" ? dr : null;\n }\n } catch { /* leave domain_rating undefined */ }\n try {\n const r = await fetchWithTimeout(\n `https://api.ahrefs.com/v3/site-explorer/metrics?target=${encodeURIComponent(host)}&date=${today}&mode=subdomains`,\n { headers },\n 15000,\n );\n if (r.ok) {\n const d = await safeJson(r);\n const ot = d?.metrics?.org_traffic;\n out.organic_traffic = typeof ot === \"number\" ? ot : null;\n }\n } catch { /* leave organic_traffic undefined */ }\n if (out.domain_rating == null && out.organic_traffic == null) return null;\n return out;\n } catch {\n return null;\n }\n}\n\n// Detect whether the URL lives on the tenant's connected WordPress site (so we can trust it as\n// \"our content\" and pull the post body for a richer word count when the raw fetch is JS-rendered).\nasync function getWordpressContext(pageUrl: string): Promise<{ isOurSite: boolean; body: string | null }> {\n const result = { isOurSite: false, body: null as string | null };\n try {\n const creds = await getCredentials(\"wordpress\");\n const siteUrl = (creds?.extra_config?.site_url ?? \"\").toString().replace(/\\/$/, \"\");\n if (!siteUrl || !sameHost(siteUrl, pageUrl)) return result;\n result.isOurSite = true;\n const username = (creds?.api_key ?? \"\").trim();\n const appPassword = (creds?.api_secret ?? \"\").trim();\n if (!username || !appPassword) return result;\n // Look the post up by its slug to read the rendered content for a trustworthy word count.\n let slug = \"\";\n try {\n const segs = new URL(pageUrl).pathname.split(\"/\").filter(Boolean);\n slug = decodeURIComponent(segs[segs.length - 1] || \"\");\n } catch { slug = \"\"; }\n if (!slug) return result;\n const basicAuth = btoa(`${username}:${appPassword}`);\n const r = await fetchWithTimeout(\n `${siteUrl}/wp-json/wp/v2/posts?slug=${encodeURIComponent(slug)}`,\n { headers: { Authorization: `Basic ${basicAuth}` } },\n 15000,\n );\n if (r.ok) {\n const d = await safeJson(r);\n const post = Array.isArray(d) ? d[0] : null;\n const rendered = post?.content?.rendered;\n if (typeof rendered === \"string\" && rendered.trim()) result.body = rendered;\n }\n return result;\n } catch {\n return result;\n }\n}\n\n// ─── Scoring ─────────────────────────────────────────────────────────────────\n// Each on-page check contributes weighted points. The final score is the achieved fraction of\n// the available weight (so skipped/unknown checks never penalize) scaled to 0–100.\n\nfunction pointsFor(status: CheckStatus): number {\n if (status === \"pass\") return 1;\n if (status === \"warn\") return 0.5;\n return 0; // fail\n}\n\n// ─── Public API ──────────────────────────────────────────────────────────────\n\nexport async function analyzeUrl(rawUrl: string): Promise {\n const url = (rawUrl ?? \"\").toString().trim();\n const notes: string[] = [];\n\n // 1) Validate. We only fetch public https URLs (SSRF guard) — anything else is not analyzable.\n if (!url) {\n return {\n url, analyzable: false, score: null, checks: [], recommendations: [],\n signals: { fetched: false, is_our_site: false },\n notes: [\"No URL provided.\"],\n };\n }\n if (!/^https?:\\/\\//i.test(url)) {\n return {\n url, analyzable: false, score: null,\n checks: [{ name: \"URL\", status: \"fail\", detail: \"Enter a full URL beginning with https://.\" }],\n recommendations: [\"Provide a complete public URL, e.g. https://example.com/page.\"],\n signals: { fetched: false, is_our_site: false },\n notes: [\"URL is missing a scheme.\"],\n };\n }\n if (!isSafePublicUrl(url)) {\n return {\n url, analyzable: false, score: null,\n checks: [{ name: \"URL\", status: \"fail\", detail: \"Only public https:// pages can be analyzed (local/private hosts are blocked).\" }],\n recommendations: [\"Use the public https:// address of the page you want to analyze.\"],\n signals: { fetched: false, is_our_site: false },\n notes: [\"URL is not a public https address.\"],\n };\n }\n\n // 2) WordPress ownership context (also tells us if this is our own site).\n const wp = await getWordpressContext(url);\n\n // 3) Fetch the page HTML. Honest not_analyzable on network/HTTP failure.\n let html = \"\";\n let httpStatus: number | undefined;\n let fetched = false;\n try {\n const res = await fetchWithTimeout(\n url,\n { headers: { \"User-Agent\": \"AIHive-SEO-Analyzer/1.0\", Accept: \"text/html,application/xhtml+xml\" }, redirect: \"follow\" },\n 15000,\n );\n httpStatus = res.status;\n const ctype = (res.headers.get(\"Content-Type\") || \"\").toLowerCase();\n if (res.ok && (ctype.includes(\"html\") || ctype === \"\")) {\n html = await res.text();\n fetched = true;\n } else if (res.ok) {\n notes.push(`Page returned ${ctype || \"a non-HTML\"} content; on-page checks were skipped.`);\n } else {\n notes.push(`Page responded with HTTP ${res.status}.`);\n }\n } catch (err) {\n notes.push(err instanceof Error ? err.message : \"Page could not be reached.\");\n }\n\n if (!fetched) {\n // We could not read the page itself. Still surface any provider context we DO have so the\n // result is useful, but do not fabricate a score.\n const gsc = await fetchGscForPage(url).catch(() => null);\n const ahrefs = await fetchAhrefsForDomain(url).catch(() => null);\n const checks: SeoCheck[] = [{\n name: \"Page fetch\",\n status: \"fail\",\n detail: httpStatus\n ? `The page returned HTTP ${httpStatus} and could not be analyzed.`\n : \"The page could not be reached for on-page analysis.\",\n }];\n if (wp.isOurSite) checks.push({ name: \"Ownership\", status: \"info\", detail: \"URL is on your connected WordPress site.\" });\n if (gsc) checks.push({ name: \"Search Console\", status: \"info\", detail: `${gsc.clicks} clicks · ${gsc.impressions} impressions · pos ${gsc.position.toFixed(1)} (last 90d).` });\n if (ahrefs) checks.push({ name: \"Ahrefs\", status: \"info\", detail: `DR ${ahrefs.domain_rating ?? \"—\"} · organic traffic ${ahrefs.organic_traffic ?? \"—\"}.` });\n return {\n url, analyzable: false, score: null, checks,\n recommendations: [\"Confirm the URL is publicly reachable, then re-run the analysis.\"],\n signals: { fetched: false, http_status: httpStatus, is_our_site: wp.isOurSite },\n gsc, ahrefs,\n notes,\n };\n }\n\n // 4) Extract on-page signals.\n const title = extractTitle(html);\n const metaDesc = extractMetaDescription(html);\n const h1 = extractH1(html);\n // Prefer the WordPress rendered body for word count on our own posts (more accurate than a\n // possibly JS-shelled public page); fall back to the fetched HTML otherwise.\n const wordCount = wp.body ? extractWordCount(wp.body) : extractWordCount(html);\n const links = extractLinks(wp.body ? `${html}${wp.body}` : html, url);\n const images = extractImages(wp.body ? `${html}${wp.body}` : html);\n const canonical = hasCanonical(html);\n const viewport = hasViewport(html);\n\n // 5) Provider context (parallel, best-effort).\n const [gsc, ahrefs] = await Promise.all([\n fetchGscForPage(url).catch(() => null),\n fetchAhrefsForDomain(url).catch(() => null),\n ]);\n\n // 6) Build the weighted checklist.\n const checks: SeoCheck[] = [];\n const recommendations: string[] = [];\n\n // Title (length 30–60 ideal).\n if (!title) {\n checks.push({ name: \"Title tag\", status: \"fail\", detail: \"No found.\" });\n recommendations.push(\"Add a descriptive <title> tag (30–60 characters) including the primary keyword.\");\n } else {\n const len = title.length;\n if (len >= 30 && len <= 60) {\n checks.push({ name: \"Title tag\", status: \"pass\", detail: `${len} chars — \"${title}\".` });\n } else if (len < 30) {\n checks.push({ name: \"Title tag\", status: \"warn\", detail: `Only ${len} chars (aim 30–60) — \"${title}\".` });\n recommendations.push(\"Lengthen the title toward 30–60 characters to better describe the page.\");\n } else {\n checks.push({ name: \"Title tag\", status: \"warn\", detail: `${len} chars may truncate in SERPs (aim 30–60).` });\n recommendations.push(\"Shorten the title to under ~60 characters so it does not truncate in search results.\");\n }\n }\n\n // Meta description (length 70–160 ideal).\n if (!metaDesc) {\n checks.push({ name: \"Meta description\", status: \"fail\", detail: \"No meta description found.\" });\n recommendations.push(\"Add a meta description (70–160 characters) that summarizes the page and includes the keyword.\");\n } else {\n const len = metaDesc.length;\n if (len >= 70 && len <= 160) {\n checks.push({ name: \"Meta description\", status: \"pass\", detail: `${len} chars.` });\n } else if (len < 70) {\n checks.push({ name: \"Meta description\", status: \"warn\", detail: `Only ${len} chars (aim 70–160).` });\n recommendations.push(\"Expand the meta description toward 70–160 characters.\");\n } else {\n checks.push({ name: \"Meta description\", status: \"warn\", detail: `${len} chars may truncate (aim 70–160).` });\n recommendations.push(\"Trim the meta description to ~160 characters to avoid SERP truncation.\");\n }\n }\n\n // H1 (exactly one).\n if (h1.count === 0) {\n checks.push({ name: \"H1 heading\", status: \"fail\", detail: \"No <h1> on the page.\" });\n recommendations.push(\"Add a single, descriptive <h1> heading.\");\n } else if (h1.count === 1) {\n checks.push({ name: \"H1 heading\", status: \"pass\", detail: h1.first ? `\"${h1.first}\".` : \"One H1 present.\" });\n } else {\n checks.push({ name: \"H1 heading\", status: \"warn\", detail: `${h1.count} H1 tags found — use exactly one.` });\n recommendations.push(\"Reduce to a single <h1>; demote the others to <h2>/<h3>.\");\n }\n\n // Word count (300+ for substantive content; 800+ ideal for ranking pages).\n if (wordCount >= 800) {\n checks.push({ name: \"Content length\", status: \"pass\", detail: `${wordCount} words.` });\n } else if (wordCount >= 300) {\n checks.push({ name: \"Content length\", status: \"warn\", detail: `${wordCount} words — thin for a ranking page (aim 800+).` });\n recommendations.push(\"Expand the content toward 800+ words to improve topical depth.\");\n } else {\n checks.push({ name: \"Content length\", status: \"fail\", detail: `${wordCount} words — too thin.` });\n recommendations.push(\"This page is very thin; add substantive, original content (aim 300+ words minimum).\");\n }\n\n // Internal links.\n if (links.internal >= 3) {\n checks.push({ name: \"Internal links\", status: \"pass\", detail: `${links.internal} internal links.` });\n } else if (links.internal >= 1) {\n checks.push({ name: \"Internal links\", status: \"warn\", detail: `${links.internal} internal link(s) — add more.` });\n recommendations.push(\"Add internal links to related pages to spread authority and aid crawling.\");\n } else {\n checks.push({ name: \"Internal links\", status: \"fail\", detail: \"No internal links found.\" });\n recommendations.push(\"Add internal links to related content on your site.\");\n }\n\n // Outbound links (at least one authoritative reference is healthy).\n if (links.outbound >= 1) {\n checks.push({ name: \"Outbound links\", status: \"pass\", detail: `${links.outbound} outbound link(s).` });\n } else {\n checks.push({ name: \"Outbound links\", status: \"warn\", detail: \"No outbound links — cite authoritative sources where relevant.\" });\n recommendations.push(\"Link out to a relevant authoritative source where it strengthens the content.\");\n }\n\n // Image alt coverage.\n if (images.count === 0) {\n checks.push({ name: \"Image alt text\", status: \"info\", detail: \"No images on the page.\" });\n } else if (images.missingAlt === 0) {\n checks.push({ name: \"Image alt text\", status: \"pass\", detail: `All ${images.count} image(s) have alt text.` });\n } else {\n const ratio = images.missingAlt / images.count;\n checks.push({\n name: \"Image alt text\",\n status: ratio > 0.5 ? \"fail\" : \"warn\",\n detail: `${images.missingAlt} of ${images.count} image(s) missing alt text.`,\n });\n recommendations.push(\"Add descriptive alt text to every image for accessibility and image search.\");\n }\n\n // Canonical.\n if (canonical) {\n checks.push({ name: \"Canonical tag\", status: \"pass\", detail: \"Canonical link present.\" });\n } else {\n checks.push({ name: \"Canonical tag\", status: \"warn\", detail: \"No canonical link found.\" });\n recommendations.push(\"Add a <link rel=\\\"canonical\\\"> to consolidate duplicate URLs.\");\n }\n\n // Mobile viewport.\n if (viewport) {\n checks.push({ name: \"Mobile viewport\", status: \"pass\", detail: \"Responsive viewport meta present.\" });\n } else {\n checks.push({ name: \"Mobile viewport\", status: \"fail\", detail: \"No responsive viewport meta tag.\" });\n recommendations.push(\"Add <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\"> for mobile.\");\n }\n\n // Keyword-in-title coherence with GSC top query (real signal when available).\n if (gsc && title) {\n // The page's own top GSC query would require a second call; instead we surface position as\n // an informational, real check rather than inventing a keyword.\n checks.push({\n name: \"Search Console\",\n status: \"info\",\n detail: `${gsc.clicks} clicks · ${gsc.impressions} impressions · CTR ${gsc.ctr.toFixed(1)}% · avg pos ${gsc.position.toFixed(1)} (90d).`,\n });\n if (gsc.position > 10 && gsc.impressions > 0) {\n recommendations.push(`This page averages position ${gsc.position.toFixed(1)} in Search Console — improving on-page relevance and links could lift it onto page one.`);\n }\n } else if (wp.isOurSite) {\n checks.push({ name: \"Search Console\", status: \"skip\", detail: \"Connect Google Search Console to see live query/position data for this page.\" });\n }\n\n // Ahrefs domain context (informational, real).\n if (ahrefs) {\n checks.push({\n name: \"Domain authority\",\n status: \"info\",\n detail: `Ahrefs DR ${ahrefs.domain_rating ?? \"—\"}${ahrefs.organic_traffic != null ? ` · organic traffic ${ahrefs.organic_traffic}` : \"\"}.`,\n });\n }\n\n if (wp.isOurSite) {\n checks.push({ name: \"Ownership\", status: \"info\", detail: \"URL is on your connected WordPress site — content checks use the published post body.\" });\n }\n\n // 7) Score from the SCORED checks only (pass/warn/fail). info/skip do not affect the score.\n const scored = checks.filter((c) => c.status === \"pass\" || c.status === \"warn\" || c.status === \"fail\");\n const achieved = scored.reduce((sum, c) => sum + pointsFor(c.status), 0);\n const score = scored.length ? Math.round((achieved / scored.length) * 100) : null;\n\n // De-duplicate recommendations while preserving order.\n const seen = new Set<string>();\n const uniqueRecs = recommendations.filter((r) => (seen.has(r) ? false : (seen.add(r), true)));\n\n return {\n url,\n analyzable: true,\n score,\n checks,\n recommendations: uniqueRecs,\n signals: {\n fetched: true,\n http_status: httpStatus,\n title,\n title_length: title?.length ?? 0,\n meta_description: metaDesc,\n meta_description_length: metaDesc?.length ?? 0,\n h1_count: h1.count,\n h1_text: h1.first,\n word_count: wordCount,\n internal_links: links.internal,\n outbound_links: links.outbound,\n image_count: images.count,\n images_missing_alt: images.missingAlt,\n has_canonical: canonical,\n has_viewport: viewport,\n is_our_site: wp.isOurSite,\n },\n gsc,\n ahrefs,\n notes,\n };\n}\n","createdAt",["D",1780475238533],"branchVersion","branchId","ecb58646-56c9-11f1-abd8-ee650bb23af1","id","ecb4ccf6-56c9-11f1-abd8-ee650bb23af1","aihivecommand",["D",1779556068488],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","AIHive Command Center","imageUrl","e8c17657-6210-4c45-bd2b-dbcf2e020293","pinnedFileId","32167c2c-56ca-11f1-955a-ee650bb23af1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019e4de5-f6b1-7488-a017-a3a028bc2ba8","tursoName","ecb4ccf656c911f1abd8ee650bb23af1","tursoHostname","ecb4ccf656c911f1abd8ee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789503703835],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":98,"_101":102,"_18":54,"_103":104,"_105":24},"branch",{"_13":88,"_31":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"isOwned",1111,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","vlduy123","handle","displayName","avatar","https://avatars.githubusercontent.com/u/208025931?v=4","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":1690,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":1691,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":1692,"_83":1693,"_85":1694,"_87":24},"tree",[505,576,594,623,624,625,626,627,628,629,630,631,632,633,634,635,636,637,638,639,640,641,642,643,644,645,646,647,648,649,650,651,652,653,654,655,656,657,658,659,660,661,662],"files",[505,506,507,508,509,510,511,512,513,514,515,516,517,518,519,520,521,522,523,524,525,526,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,542,543,544,545,546,547,548,549,550,551,552,553,554,555,556,557,558,559,560,561,562,563,564,565,566,567,568,569,570,571,572,573,574,575,576,577,578,579,580,581,582,583,584,585,586,587,588,589,590,591,592,593,594,595,596,597,598,599,600,601,602,603,604,605,606,607,608,609,610,611,612,613,614,615,616,617,618,619,620,621,622,623,624,625,626,627,628,629,630,631,632,633,634,635,636,637,638,639,640,641,642,643,644,645,646,647,648,649,650,651,652,653,654,655,656,657,658,659,660,661,662],"counts",{"_495":62,"_496":348,"_497":62,"_498":499,"_500":501},"contents",[129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":490,"_31":491,"_29":492,"_175":-5,"_40":41,"_39":266,"_177":58,"_37":493,"_13":62,"_33":482,"_35":-5,"_23":24,"_181":-5,"_26":494},{"_42":484,"_31":485,"_29":486,"_175":-5,"_40":41,"_39":487,"_177":58,"_37":488,"_13":62,"_33":482,"_35":-5,"_23":24,"_181":-5,"_26":489},{"_42":477,"_31":478,"_29":479,"_175":-5,"_40":41,"_39":480,"_177":58,"_37":481,"_13":62,"_33":482,"_35":-5,"_23":24,"_181":-5,"_26":483},{"_42":470,"_31":471,"_29":472,"_175":-5,"_40":41,"_39":473,"_177":24,"_37":474,"_13":62,"_33":34,"_35":475,"_23":24,"_181":-5,"_26":476},{"_42":463,"_31":464,"_29":465,"_175":-5,"_40":41,"_39":466,"_177":24,"_37":467,"_13":204,"_33":34,"_35":468,"_23":24,"_181":-5,"_26":469},{"_42":456,"_31":457,"_29":458,"_175":-5,"_40":41,"_39":459,"_177":58,"_37":460,"_13":266,"_33":34,"_35":461,"_23":24,"_181":-5,"_26":462},{"_42":448,"_31":449,"_29":450,"_175":-5,"_40":41,"_39":451,"_177":24,"_37":452,"_13":453,"_33":34,"_35":454,"_23":24,"_181":-5,"_26":455},{"_42":440,"_31":441,"_29":442,"_175":-5,"_40":41,"_39":443,"_177":24,"_37":444,"_13":445,"_33":34,"_35":446,"_23":24,"_181":-5,"_26":447},{"_42":433,"_31":434,"_29":435,"_175":-5,"_40":41,"_39":436,"_177":58,"_37":437,"_13":348,"_33":34,"_35":438,"_23":24,"_181":-5,"_26":439},{"_42":425,"_31":426,"_29":427,"_175":-5,"_40":41,"_39":428,"_177":58,"_37":429,"_13":430,"_33":34,"_35":431,"_23":24,"_181":-5,"_26":432},{"_42":417,"_31":418,"_29":419,"_175":-5,"_40":41,"_39":420,"_177":58,"_37":421,"_13":422,"_33":34,"_35":423,"_23":24,"_181":-5,"_26":424},{"_42":410,"_31":411,"_29":412,"_175":-5,"_40":41,"_39":413,"_177":58,"_37":414,"_13":242,"_33":34,"_35":415,"_23":24,"_181":-5,"_26":416},{"_42":402,"_31":403,"_29":404,"_175":-5,"_40":41,"_39":405,"_177":58,"_37":406,"_13":407,"_33":34,"_35":408,"_23":24,"_181":-5,"_26":409},{"_42":395,"_31":396,"_29":397,"_175":-5,"_40":41,"_39":398,"_177":58,"_37":399,"_13":204,"_33":34,"_35":400,"_23":24,"_181":-5,"_26":401},{"_42":388,"_31":389,"_29":390,"_175":-5,"_40":41,"_39":391,"_177":58,"_37":392,"_13":62,"_33":34,"_35":393,"_23":24,"_181":-5,"_26":394},{"_42":381,"_31":382,"_29":383,"_175":-5,"_40":41,"_39":384,"_177":58,"_37":385,"_13":303,"_33":34,"_35":386,"_23":24,"_181":-5,"_26":387},{"_42":374,"_31":375,"_29":376,"_175":-5,"_40":41,"_39":377,"_177":58,"_37":378,"_13":204,"_33":34,"_35":379,"_23":24,"_181":-5,"_26":380},{"_42":366,"_31":367,"_29":368,"_175":-5,"_40":41,"_39":369,"_177":24,"_37":370,"_13":371,"_33":34,"_35":372,"_23":24,"_181":-5,"_26":373},{"_42":358,"_31":359,"_29":360,"_175":-5,"_40":41,"_39":361,"_177":24,"_37":362,"_13":363,"_33":34,"_35":364,"_23":24,"_181":-5,"_26":365},{"_42":351,"_31":352,"_29":353,"_175":-5,"_40":41,"_39":354,"_177":58,"_37":355,"_13":311,"_33":34,"_35":356,"_23":24,"_181":-5,"_26":357},{"_42":343,"_31":344,"_29":345,"_175":-5,"_40":41,"_39":346,"_177":24,"_37":347,"_13":348,"_33":34,"_35":349,"_23":24,"_181":-5,"_26":350},{"_42":336,"_31":337,"_29":338,"_175":-5,"_40":41,"_39":339,"_177":58,"_37":340,"_13":62,"_33":34,"_35":341,"_23":24,"_181":-5,"_26":342},{"_42":329,"_31":330,"_29":331,"_175":-5,"_40":41,"_39":332,"_177":58,"_37":333,"_13":303,"_33":34,"_35":334,"_23":24,"_181":-5,"_26":335},{"_42":321,"_31":322,"_29":323,"_175":-5,"_40":41,"_39":324,"_177":24,"_37":325,"_13":326,"_33":34,"_35":327,"_23":24,"_181":-5,"_26":328},{"_42":314,"_31":315,"_29":316,"_175":-5,"_40":41,"_39":317,"_177":58,"_37":318,"_13":266,"_33":34,"_35":319,"_23":24,"_181":-5,"_26":320},{"_42":306,"_31":307,"_29":308,"_175":-5,"_40":41,"_39":309,"_177":58,"_37":310,"_13":311,"_33":34,"_35":312,"_23":24,"_181":-5,"_26":313},{"_42":298,"_31":299,"_29":300,"_175":-5,"_40":41,"_39":301,"_177":58,"_37":302,"_13":303,"_33":34,"_35":304,"_23":24,"_181":-5,"_26":305},{"_42":290,"_31":291,"_29":292,"_175":-5,"_40":41,"_39":293,"_177":24,"_37":294,"_13":295,"_33":34,"_35":296,"_23":24,"_181":-5,"_26":297},{"_42":283,"_31":284,"_29":285,"_175":-5,"_40":41,"_39":286,"_177":58,"_37":287,"_13":266,"_33":34,"_35":288,"_23":24,"_181":-5,"_26":289},{"_42":276,"_31":277,"_29":278,"_175":-5,"_40":41,"_39":279,"_177":58,"_37":280,"_13":220,"_33":34,"_35":281,"_23":24,"_181":-5,"_26":282},{"_42":269,"_31":270,"_29":271,"_175":-5,"_40":41,"_39":272,"_177":58,"_37":273,"_13":204,"_33":34,"_35":274,"_23":24,"_181":-5,"_26":275},{"_42":261,"_31":262,"_29":263,"_175":-5,"_40":41,"_39":264,"_177":58,"_37":265,"_13":266,"_33":34,"_35":267,"_23":24,"_181":-5,"_26":268},{"_42":253,"_31":254,"_29":255,"_175":-5,"_40":41,"_39":256,"_177":58,"_37":257,"_13":258,"_33":34,"_35":259,"_23":24,"_181":-5,"_26":260},{"_42":245,"_31":246,"_29":247,"_175":-5,"_40":41,"_39":248,"_177":58,"_37":249,"_13":250,"_33":34,"_35":251,"_23":24,"_181":-5,"_26":252},{"_42":237,"_31":238,"_29":239,"_175":-5,"_40":41,"_39":240,"_177":58,"_37":241,"_13":242,"_33":34,"_35":243,"_23":24,"_181":-5,"_26":244},{"_42":230,"_31":231,"_29":232,"_175":-5,"_40":41,"_39":233,"_177":58,"_37":234,"_13":62,"_33":34,"_35":235,"_23":24,"_181":-5,"_26":236},{"_42":223,"_31":224,"_29":225,"_175":-5,"_40":41,"_39":226,"_177":58,"_37":227,"_13":62,"_33":34,"_35":228,"_23":24,"_181":-5,"_26":229},{"_42":215,"_31":216,"_29":217,"_175":-5,"_40":41,"_39":218,"_177":58,"_37":219,"_13":220,"_33":34,"_35":221,"_23":24,"_181":-5,"_26":222},{"_42":207,"_31":208,"_29":209,"_175":-5,"_40":41,"_39":210,"_177":58,"_37":211,"_13":212,"_33":34,"_35":213,"_23":24,"_181":-5,"_26":214},{"_42":199,"_31":200,"_29":201,"_175":-5,"_40":41,"_39":202,"_177":58,"_37":203,"_13":204,"_33":34,"_35":205,"_23":24,"_181":-5,"_26":206},{"_42":191,"_31":192,"_29":56,"_175":-5,"_40":41,"_39":193,"_177":24,"_37":194,"_13":195,"_33":196,"_35":197,"_23":24,"_181":-5,"_26":198},{"_42":183,"_31":184,"_29":185,"_175":-5,"_40":41,"_39":186,"_177":24,"_37":187,"_13":188,"_33":34,"_35":189,"_23":24,"_181":-5,"_26":190},{"_42":172,"_31":173,"_29":174,"_175":-5,"_40":41,"_39":176,"_177":58,"_37":178,"_13":179,"_33":34,"_35":180,"_23":24,"_181":-5,"_26":182},"026e63e8-5d7a-11f1-a7f5-1607ee4eb77e","types.ts","151549be-56ca-11f1-bc41-ee650bb23af1","parentId",699,"latest",["D",1780291403301],16,"export interface Integration {\n id: string;\n name: string; // 'ahrefs'|'ga4'|'gsc'|'linkedin'|'outlook'|'wordpress'|'youtube'|'producthunt'\n api_key?: string;\n api_secret?: string;\n access_token?: string;\n refresh_token?: string;\n extra_config?: string; // JSON string\n connected_at?: string;\n updated_at?: string;\n}\n\nexport interface LLMConfig {\n id: string;\n // QA fix: gemini was already routed in callLLM but missing from the union, causing TS noise.\n provider: 'anthropic' | 'openai' | 'gemini' | 'custom';\n api_key: string;\n endpoint?: string;\n model: string;\n updated_at?: string;\n // Per-provider key presence flags (computed from the 4 api_key_<provider> columns) —\n // used by Settings UI to render \"(saved)\" pills without leaking the actual key.\n has_key?: { anthropic: boolean; openai: boolean; gemini: boolean; custom: boolean };\n}\n\nexport interface Agent {\n id: string;\n name: string;\n workspace: 'marketing' | 'sales';\n description: string;\n system_prompt: string;\n tools: string; // JSON array string\n model?: string;\n enabled: number; // 0 or 1\n created_at: string;\n updated_at: string;\n created_by: 'user' | 'ai';\n // B2: budget cap (USD/month) + running spend, joined from agent_budgets\n monthly_cap?: number;\n current_spend?: number;\n}\n\nexport interface Conversation {\n id: string;\n agent_id?: string;\n workspace: string;\n messages: string; // JSON array string\n created_at: string;\n updated_at: string;\n}\n\nexport interface Task {\n id: string;\n agent_id?: string;\n workspace: string;\n title: string;\n status: 'pending' | 'running' | 'done' | 'failed';\n input?: string;\n output?: string;\n created_at: string;\n completed_at?: string;\n}\n\nexport interface ChatMessage {\n role: 'user' | 'assistant' | 'system' | 'tool';\n content: string;\n timestamp?: string;\n // Tool-use fields (OpenAI-style) carried at runtime by chat.ts / llm.ts.\n tool_calls?: any[];\n tool_call_id?: string;\n reasoning_content?: string;\n // Part 14.2: structured execution trace (round/tool/action/message steps) shown in the UI.\n trace?: Array<{ t: string; role?: string; name?: string; preview?: string; args_preview?: string; result_preview?: string; ok?: boolean; ms?: number; n?: number; ts?: string }>;\n}\n","label",[173],"0cd8e370-5f15-11f1-bf54-1607ee4eb77e","router.ts","30479b74-56ca-11f1-a296-ee650bb23af1",1010,["D",1780467943919],126,"import { sqlite, initDB, DEFAULT_AGENT_SEEDS, currentRole, currentTenantId, currentCtx } from \"./db.ts\";\nimport { registerUser, loginUser, getMe, upsertOAuthUser, bootstrapOwner } from \"./api/auth.ts\";\nimport { resolveSession, sessionSetCookie, sessionClearCookie } from \"./api/session.ts\";\nimport { newOAuthState, CLEAR_OAUTH_STATE, redirectWithCookie, oauthStateValid, identityLoginStart, identityLoginCallback } from \"./api/oauth_login.ts\";\nimport { listAgents, createAgent, updateAgent, deleteAgent } from \"./api/agents.ts\";\nimport { getLLMConfig, saveLLMConfig } from \"./api/llm.ts\";\nimport { handleChat, handleChatStream, listConversations, getConversationById, deleteConversation } from \"./api/chat.ts\";\nimport { handleIntegrationProxy, getCredentials, GOOGLE_SERVICES, MICROSOFT_SCOPES, getIntegrationSchema, listDescriptorNames } from \"./api/integrations.ts\";\nimport { serveAppModule } from \"./app_modules.ts\";\nimport { getFunnelSummary, getCorrelations, getRecommendations, getLeadScores, getAIOKpis, getIntelligenceFeed } from \"./api/intelligence.ts\";\nimport { listSignals, recordSignal, actionSignal, getHotLeads, getHotLeadsCount } from \"./api/signals.ts\";\nimport { listObjectives, createObjective, updateObjective, deleteObjective, createKeyResult, updateKeyResult, getOKRDashboard, syncObjectivesFromFunnel } from \"./api/okrs.ts\";\nimport { getNSM, setNSM, recordNSMValue, getNSMProgress } from \"./api/nsm.ts\";\nimport { listCohorts, createCohort, deleteCohort, getCohortSummary, getEngagementVelocity, getAttributionSummary, recordConversion, getRetention, getRevenueModel } from \"./api/aio.ts\";\nimport { getLatestDigest, generateDigest, getDigestHistory } from \"./api/digest.ts\";\nimport { listExperiments, createExperiment, updateExperiment, deleteExperiment, runExperiment, completeExperiment, getExperimentStats, suggestICE } from \"./api/experiments.ts\";\nimport { getUnifiedCalendar, getCalendarSummary, createCalendarEntry, updateCalendarEntry, deleteCalendarEntry } from \"./api/calendar_unified.ts\";\nimport { getGraphify } from \"./api/graphify.ts\";\nimport { listTasks, createTask, updateTask, deleteTask, listIceRankedTasks, generateTasksFromSource, runTask } from \"./api/tasks.ts\";\nimport { listDeals, getDeal, createDeal, updateDeal, deleteDeal, syncDealsFromLeads, listCandidates, importDeals } from \"./api/deals.ts\";\nimport { listKnowledgeFiles, getKnowledgeFile, createKnowledgeFile, updateKnowledgeFile, deleteKnowledgeFile, summarizeKnowledgeFile, buildKnowledgeGraph, AI_FEATURES } from \"./api/knowledge.ts\";\nimport { getCompanyProfile, setCompanyProfile, getBrandContext, setBrandContext } from \"./api/company.ts\";\nimport { enrichCompanyProfile } from \"./api/company-enrichment.ts\";\nimport { listMemory, addMemory, updateMemory, deleteMemory } from \"./api/memory.ts\";\nimport { listSkills, getSkill, setSkillState, createCustomSkill } from \"./api/skills.ts\";\nimport { getMethodConfig, saveMethodConfig, getMethodsMetadata } from \"./api/method_config.ts\";\nimport { listActions, enqueueAction, getAction, approveAction, rejectAction } from \"./api/actions.ts\";\nimport { processPendingRuns } from \"./cron.ts\";\nimport { getExecutedWorkCounts } from \"./api/propagate.ts\";\nimport { listCampaigns, getCampaign, getCampaignAgents, createCampaign, deleteCampaign, listCampaignRuns, orchestrateCampaignRun, updateCampaign, setCampaignTrigger } from \"./api/campaigns.ts\";\nimport { getWorldActivity, getWorldBoard, getWorldProject } from \"./api/world.ts\";\nimport { handlePlatformRoutes } from \"./api/platform.ts\";\nimport { isCrmPath, handleCrmRoutes } from \"./api/crm_routes.ts\";\nimport { isMarketingPath, handleMarketingRoutes } from \"./api/marketing_routes.ts\";\n\nconst corsHeaders = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, PUT, DELETE, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, Authorization\",\n};\n\n// App version for the data-free health probe. Prefer the val.town deploy id (DENO_DEPLOYMENT_ID\n// is set by the runtime per deploy); fall back to a hardcoded release tag when running locally.\nconst APP_VERSION = (() => {\n try { return Deno.env.get(\"DENO_DEPLOYMENT_ID\") || \"p3-s3\"; } catch { return \"p3-s3\"; }\n})();\n\nfunction json(data: unknown, status = 200): Response {\n return new Response(JSON.stringify(data), {\n status,\n headers: {\n \"Content-Type\": \"application/json\",\n ...corsHeaders,\n },\n });\n}\n// JSON response that also carries a Set-Cookie header (session set/clear on auth endpoints).\nfunction jsonWithCookie(data: unknown, setCookie: string, status = 200): Response {\n const res = json(data, status);\n res.headers.append(\"Set-Cookie\", setCookie);\n return res;\n}\n// Best-effort client IP for per-IP rate limiting (val.town/Cloudflare forwarded headers).\nfunction clientIp(req: Request): string {\n return req.headers.get(\"x-forwarded-for\")?.split(\",\")[0].trim() || req.headers.get(\"cf-connecting-ip\") || \"\";\n}\n\n// Mask an integration row before returning it: NO endpoint may return secrets in cleartext\n// — only presence flags + a short masked hint.\nfunction maskIntegration(obj: any, googleConnected = false) {\n return {\n ...obj,\n connected: !!(obj.api_key || obj.access_token) ||\n (GOOGLE_SERVICES.includes(String(obj.name)) && googleConnected),\n has_api_key: !!obj.api_key,\n has_api_secret: !!obj.api_secret,\n has_access_token: !!obj.access_token,\n api_key: obj.api_key ? String(obj.api_key).slice(0, 4) + \"***\" : undefined,\n api_secret: obj.api_secret ? \"***\" : undefined,\n access_token: obj.access_token ? \"***\" : undefined,\n refresh_token: obj.refresh_token ? \"***\" : undefined,\n };\n}\n\n\nexport async function handleRequest(req: Request, url: URL): Promise<Response> {\n const { pathname } = url;\n const method = req.method;\n const tid = currentTenantId(); // tenant scope for every business query (stable within request)\n\n // CORS preflight\n if (method === \"OPTIONS\") {\n return new Response(null, { status: 204, headers: corsHeaders });\n }\n\n try {\n // GET /api/health — data-free liveness probe: { ok, version } (+ legacy status/timestamp).\n if (pathname === \"/api/health\" && method === \"GET\") {\n return json({ ok: true, version: APP_VERSION, status: \"ok\", timestamp: new Date().toISOString() });\n }\n\n // GET /api/health/auth - gated token verifier. Reaching this (past the main.ts gate) means the\n // APP_TOKEN is valid; the login screen uses it to confirm the password.\n if (pathname === \"/api/health/auth\" && method === \"GET\") {\n return json({ ok: true });\n }\n\n // --- Auth: email/password + session ----\n // Thin handlers — logic lives in api/auth.ts; the \"nexus_session\" cookie via api/session.ts.\n if (pathname === \"/api/auth/register\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const r = await registerUser({ email: body.email, password: body.password, name: body.name, honeypot: body.honeypot ?? body.company_url, turnstileToken: body.turnstileToken, ip: clientIp(req) });\n if (!r.ok) return json({ ok: false, error: r.error }, 400);\n return jsonWithCookie({ ok: true }, sessionSetCookie(r.ctxToken!));\n }\n if (pathname === \"/api/auth/login\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const r = await loginUser({ email: body.email, password: body.password, ip: clientIp(req) });\n if (!r.ok) return json({ ok: false, error: r.error }, 401);\n return jsonWithCookie({ ok: true }, sessionSetCookie(r.ctxToken!));\n }\n if (pathname === \"/api/auth/logout\" && method === \"POST\") {\n return jsonWithCookie({ ok: true }, sessionClearCookie());\n }\n if (pathname === \"/api/auth/me\" && method === \"GET\") {\n const ctx = await resolveSession(req);\n if (!ctx) return json({ ok: false, user: null }, 200);\n return json({ ok: true, ...(await getMe(ctx)) });\n }\n\n // GET /api/config - LLM runtime config + all app_config key/values\n if (pathname === \"/api/config\" && method === \"GET\") {\n const llmConfig = await getLLMConfig();\n const merged: Record<string, any> = {\n provider: llmConfig.provider,\n model: llmConfig.model,\n has_key: (llmConfig as any).has_key,\n };\n try {\n const r = await sqlite.execute(\"SELECT key, value FROM app_config WHERE tenant_id = ?\", [tid]);\n for (const row of (r.rows || []) as any[]) {\n const k = String(row[0]);\n let v: any = row[1];\n if (typeof v === \"string\") { try { v = JSON.parse(v); } catch { /* keep raw string */ } }\n merged[k] = v;\n }\n } catch { /* app_config missing → just return LLM fields */ }\n return json(merged);\n }\n // POST /api/config - upsert arbitrary key/value into app_config (Settings toggles, ROI inputs…).\n if (pathname === \"/api/config\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const updated: Record<string, any> = {};\n try {\n for (const [k, v] of Object.entries(body)) {\n if (k === \"provider\" || k === \"model\" || k === \"has_key\") continue;\n const value = typeof v === \"string\" ? v : JSON.stringify(v);\n await sqlite.execute(\n \"INSERT INTO app_config (key, value, tenant_id) VALUES (?, ?, ?) ON CONFLICT(key) DO UPDATE SET value = excluded.value, tenant_id = excluded.tenant_id, updated_at = datetime('now')\",\n [k, value, tid],\n );\n updated[k] = v;\n }\n return json({ success: true, updated });\n } catch (e: any) {\n return json({ error: String(e?.message || e) }, 500);\n }\n }\n\n // --- Frontend JS module routes (table lives in app_modules.ts to keep router under 80KB) ----\n if (method === \"GET\") {\n const _moduleSrc = serveAppModule(pathname);\n if (_moduleSrc !== null) {\n return new Response(_moduleSrc, {\n headers: {\n \"Content-Type\": \"application/javascript\",\n \"Cache-Control\": \"no-cache, no-store, must-revalidate\",\n ...corsHeaders,\n },\n });\n }\n }\n\n // --- Intelligence routes ----\n if (pathname === \"/api/intelligence/funnel-summary\" && method === \"GET\") {\n const force = url.searchParams.get(\"force\") === \"1\";\n const days = parseInt(url.searchParams.get(\"days\") ?? \"30\", 10);\n return json(await getFunnelSummary(force, days));\n }\n if (pathname === \"/api/intelligence/correlations\" && method === \"GET\") {\n const force = url.searchParams.get(\"force\") === \"1\";\n return json(await getCorrelations(force));\n }\n if (pathname === \"/api/intelligence/recommendations\" && method === \"GET\") {\n return json(await getRecommendations());\n }\n if (pathname === \"/api/intelligence/leads\" && method === \"GET\") {\n return json(await getLeadScores());\n }\n if (pathname === \"/api/intelligence/kpis\" && method === \"GET\") {\n return json(await getAIOKpis());\n }\n if (pathname === \"/api/intelligence/feed\" && method === \"GET\") {\n return json(await getIntelligenceFeed());\n }\n // Execution-aware metric: how much real work was completed (tasks/experiments).\n if (pathname === \"/api/intelligence/executed-work\" && method === \"GET\") {\n const days = parseInt(url.searchParams.get(\"days\") ?? \"30\", 10);\n return json(await getExecutedWorkCounts(days));\n }\n\n // --- Signals routes ----\n if (pathname === \"/api/signals\" && method === \"GET\") {\n const actioned = url.searchParams.get(\"actioned\");\n const lead_email = url.searchParams.get(\"lead_email\") ?? undefined;\n return json(await listSignals({ lead_email, actioned: actioned === \"true\" ? true : actioned === \"false\" ? false : undefined }));\n }\n if (pathname === \"/api/signals\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (!body.lead_email || !body.signal_type) {\n return json({ error: \"lead_email and signal_type are required\" }, 400);\n }\n return json(await recordSignal(body), 201);\n }\n const signalActionMatch = pathname.match(/^\\/api\\/signals\\/([^/]+)\\/action$/);\n if (signalActionMatch && method === \"PUT\") {\n const result = await actionSignal(signalActionMatch[1]);\n return result ? json(result) : json({ error: \"Signal not found\" }, 404);\n }\n if (pathname === \"/api/signals/hot-leads\" && method === \"GET\") {\n return json(await getHotLeads());\n }\n if (pathname === \"/api/signals/hot-leads/count\" && method === \"GET\") {\n return json({ count: await getHotLeadsCount() });\n }\n\n // --- OKR / Objectives routes ----\n if (pathname === \"/api/okrs\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n return json(await listObjectives({ workspace }));\n }\n if (pathname === \"/api/okrs\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createObjective(body), 201);\n }\n if (pathname === \"/api/okrs/dashboard\" && method === \"GET\") {\n return json(await getOKRDashboard());\n }\n // Explicit funnel→OKR sync — refreshes stored KR/objective progress on demand.\n if (pathname === \"/api/okrs/sync\" && method === \"POST\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n return json(await syncObjectivesFromFunnel({ workspace }));\n }\n const okrIdMatch = pathname.match(/^\\/api\\/okrs\\/([^/]+)$/);\n if (okrIdMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n return json(await updateObjective(okrIdMatch[1], body));\n }\n if (okrIdMatch && method === \"DELETE\") {\n const ok = await deleteObjective(okrIdMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n const okrKrMatch = pathname.match(/^\\/api\\/okrs\\/([^/]+)\\/key-results$/);\n if (okrKrMatch && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createKeyResult(okrKrMatch[1], body), 201);\n }\n const krIdMatch = pathname.match(/^\\/api\\/okrs\\/key-results\\/([^/]+)$/);\n if (krIdMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n return json(await updateKeyResult(krIdMatch[1], body));\n }\n\n // --- NSM routes ----\n if (pathname === \"/api/nsm\" && method === \"GET\") {\n return json(await getNSM());\n }\n if (pathname === \"/api/nsm\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await setNSM(body));\n }\n if (pathname === \"/api/nsm/record\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n await recordNSMValue(body.value);\n return json({ success: true });\n }\n if (pathname === \"/api/nsm/progress\" && method === \"GET\") {\n return json(await getNSMProgress());\n }\n\n // --- AIO / Cohort routes ----\n if (pathname === \"/api/aio/cohorts\" && method === \"GET\") {\n return json(await listCohorts());\n }\n if (pathname === \"/api/aio/cohorts\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createCohort(body), 201);\n }\n const cohortIdMatch = pathname.match(/^\\/api\\/aio\\/cohorts\\/([^/]+)$/);\n if (cohortIdMatch && method === \"DELETE\") {\n return json({ success: await deleteCohort(cohortIdMatch[1]) });\n }\n if (pathname === \"/api/aio/cohort-summary\" && method === \"GET\") {\n return json(await getCohortSummary());\n }\n if (pathname === \"/api/aio/engagement-velocity\" && method === \"GET\") {\n return json(await getEngagementVelocity());\n }\n\n // --- Frontend-expected aliases (cohorts/attribution/key-results) ----\n if (pathname === \"/api/cohorts\" && method === \"GET\") {\n return json(await getCohortSummary());\n }\n if (pathname === \"/api/cohorts\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createCohort(body), 201);\n }\n const cohortAliasMatch = pathname.match(/^\\/api\\/cohorts\\/([^/]+)$/);\n if (cohortAliasMatch && method === \"DELETE\") {\n return json({ success: await deleteCohort(cohortAliasMatch[1]) });\n }\n if (pathname === \"/api/attribution\" && method === \"GET\") {\n return json(await getAttributionSummary());\n }\n // retention (GRR/NRR + curve) + revenue model endpoints.\n if (pathname === \"/api/intelligence/retention\" && method === \"GET\") {\n return json(await getRetention());\n }\n if (pathname === \"/api/intelligence/revenue-model\" && method === \"GET\") {\n return json(await getRevenueModel());\n }\n if (pathname === \"/api/attribution\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n await recordConversion(body);\n return json({ success: true }, 201);\n }\n const krAliasMatch = pathname.match(/^\\/api\\/key-results\\/([^/]+)$/);\n if (krAliasMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n return json(await updateKeyResult(krAliasMatch[1], body));\n }\n\n // --- Digest routes ----\n if (pathname === \"/api/digest\" && method === \"GET\") {\n return json(await getLatestDigest());\n }\n if (pathname === \"/api/digest/generate\" && method === \"POST\") {\n return json(await generateDigest());\n }\n if (pathname === \"/api/digest/history\" && method === \"GET\") {\n const limit = parseInt(url.searchParams.get(\"limit\") ?? \"10\", 10);\n return json(await getDigestHistory(limit));\n }\n\n // --- Experiments routes ----\n if (pathname === \"/api/experiments\" && method === \"GET\") {\n const status = url.searchParams.get(\"status\") ?? undefined;\n const funnel_stage = url.searchParams.get(\"stage\") ?? url.searchParams.get(\"funnel_stage\") ?? undefined;\n const aarrr_lever = url.searchParams.get(\"aarrr_lever\") ?? undefined;\n return json(await listExperiments({ status, funnel_stage, aarrr_lever }));\n }\n if (pathname === \"/api/experiments\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createExperiment(body), 201);\n }\n if (pathname === \"/api/experiments/stats\" && method === \"GET\") {\n return json(await getExperimentStats());\n }\n // suggest-ice: alias of ice-suggest (same handler).\n if ((pathname === \"/api/experiments/ice-suggest\" || pathname === \"/api/experiments/suggest-ice\") && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await suggestICE(body));\n }\n // GET /api/experiments/:id/stats — sub-resource form; getExperimentStats() is tenant-aggregate (portfolio-wide).\n // Declared before the run|complete and bare :id matchers so \"stats\" isn't read as an id.\n const expStatsMatch = pathname.match(/^\\/api\\/experiments\\/([^/]+)\\/stats$/);\n if (expStatsMatch && method === \"GET\") {\n return json(await getExperimentStats());\n }\n const expActionMatch = pathname.match(/^\\/api\\/experiments\\/([^/]+)\\/(run|complete)$/);\n if (expActionMatch && method === \"POST\") {\n const id = expActionMatch[1];\n const body = await req.json().catch(() => ({}));\n const result = expActionMatch[2] === \"run\"\n ? await runExperiment(id, Number(body.baseline_value) || 0)\n : await completeExperiment(id, {\n result_value: Number(body.result_value) || 0,\n outcome: body.outcome ?? \"inconclusive\",\n learnings: body.learnings,\n control: body.control,\n variant: body.variant,\n sample_size: body.sample_size,\n });\n return result ? json(result) : json({ error: \"Experiment not found\" }, 404);\n }\n const expIdMatch = pathname.match(/^\\/api\\/experiments\\/([^/]+)$/);\n if (expIdMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n const updated = await updateExperiment(expIdMatch[1], body);\n return updated ? json(updated) : json({ error: \"Experiment not found\" }, 404);\n }\n if (expIdMatch && method === \"DELETE\") {\n const ok = await deleteExperiment(expIdMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // --- Calendar unified route ----\n if (pathname === \"/api/calendar/unified\" && method === \"GET\") {\n const today = new Date().toISOString().slice(0, 10);\n const from = url.searchParams.get(\"from\") ?? url.searchParams.get(\"start\") ?? today;\n const to = url.searchParams.get(\"to\") ?? url.searchParams.get(\"end\") ?? from;\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n const sourcesParam = url.searchParams.getAll(\"source\");\n return json(await getUnifiedCalendar({ from, to, workspace, sources: sourcesParam.length ? sourcesParam as any : undefined }));\n }\n if (pathname === \"/api/calendar/summary\" && method === \"GET\") {\n const date = url.searchParams.get(\"date\") ?? new Date().toISOString().slice(0, 10);\n return json(await getCalendarSummary(date));\n }\n if (pathname === \"/api/calendar/entries\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createCalendarEntry(body), 201);\n }\n const calEntryMatch = pathname.match(/^\\/api\\/calendar\\/entries\\/([^/]+)$/);\n if (calEntryMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n const updated = await updateCalendarEntry(calEntryMatch[1], body);\n return updated ? json(updated) : json({ error: \"Not found\" }, 404);\n }\n if (calEntryMatch && method === \"DELETE\") {\n const ok = await deleteCalendarEntry(calEntryMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // --- Knowledge files (AI knowledge injection + graph view) ----\n if (pathname === \"/api/knowledge\" && method === \"GET\") {\n return json(await listKnowledgeFiles());\n }\n if (pathname === \"/api/knowledge\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const created = await createKnowledgeFile(body);\n return created ? json(created, 201) : json({ error: \"content required\" }, 400);\n }\n if (pathname === \"/api/knowledge/graph\" && method === \"GET\") {\n return json(await buildKnowledgeGraph());\n }\n if (pathname === \"/api/knowledge/features\" && method === \"GET\") {\n return json(AI_FEATURES);\n }\n const knSummarizeMatch = pathname.match(/^\\/api\\/knowledge\\/([^/]+)\\/summarize$/);\n if (knSummarizeMatch && method === \"POST\") {\n const summary = await summarizeKnowledgeFile(knSummarizeMatch[1]);\n const file = await getKnowledgeFile(knSummarizeMatch[1]);\n return json({ summary, tokens_estimate: file?.tokens_estimate ?? 0 });\n }\n const knIdMatch = pathname.match(/^\\/api\\/knowledge\\/([^/]+)$/);\n if (knIdMatch && method === \"GET\") {\n const f = await getKnowledgeFile(knIdMatch[1]);\n return f ? json(f) : json({ error: \"Not found\" }, 404);\n }\n if (knIdMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n const updated = await updateKnowledgeFile(knIdMatch[1], body);\n return updated ? json(updated) : json({ error: \"Not found\" }, 404);\n }\n if (knIdMatch && method === \"DELETE\") {\n const ok = await deleteKnowledgeFile(knIdMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // --- Company Profile + Brand Context (Part 15.2) — the business identity ---\n if (pathname === \"/api/company-profile\" && method === \"GET\") {\n return json(await getCompanyProfile());\n }\n if (pathname === \"/api/company-profile\" && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n return json(await setCompanyProfile(body));\n }\n if (pathname === \"/api/company-profile/enrich\" && method === \"POST\") {\n try {\n const enriched = await enrichCompanyProfile();\n return json({ enriched, message: \"AI enrichment complete — review and save.\" });\n } catch (e) {\n return json({ error: String(e?.message ?? e) }, 500);\n }\n }\n if (pathname === \"/api/brand-context\" && method === \"GET\") {\n return json({ text: await getBrandContext() });\n }\n if (pathname === \"/api/brand-context\" && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n await setBrandContext(String(body.text ?? \"\"));\n return json({ ok: true });\n }\n\n // --- Memory (Part 15.3) — persistent evolving business facts ----\n if (pathname === \"/api/memory\" && method === \"GET\") {\n return json(await listMemory());\n }\n if (pathname === \"/api/memory\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const m = await addMemory(body);\n return m ? json(m, 201) : json({ error: \"content required\" }, 400);\n }\n const memIdMatch = pathname.match(/^\\/api\\/memory\\/([0-9]+)$/);\n if (memIdMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n const m = await updateMemory(Number(memIdMatch[1]), body);\n return m ? json(m) : json({ error: \"Not found\" }, 404);\n }\n if (memIdMatch && method === \"DELETE\") {\n const ok = await deleteMemory(Number(memIdMatch[1]));\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // --- Skills (Playbooks) — marketing skill catalog + per-skill state ----\n if (pathname === \"/api/skills\" && method === \"GET\") {\n return json(await listSkills());\n }\n if (pathname === \"/api/skills\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const created = await createCustomSkill(body);\n return created.ok ? json(created, 201) : json({ error: created.error || \"invalid skill\" }, 400);\n }\n const skillNameMatch = pathname.match(/^\\/api\\/skills\\/([^/]+)$/);\n if (skillNameMatch && method === \"GET\") {\n const s = await getSkill(decodeURIComponent(skillNameMatch[1]));\n return s ? json(s) : json({ error: \"Not found\" }, 404);\n }\n if (skillNameMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n const ok = await setSkillState(decodeURIComponent(skillNameMatch[1]), body);\n return ok ? json({ ok: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // --- Method config (prioritization methodology: ICE/RICE/WSJF) ----\n if (pathname === \"/api/method-config/methods\" && method === \"GET\") {\n return json(getMethodsMetadata());\n }\n if (pathname === \"/api/method-config\" && method === \"GET\") {\n return json(await getMethodConfig());\n }\n if (pathname === \"/api/method-config\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await saveMethodConfig(body));\n }\n\n // --- Action queue (human-in-the-loop execution) ----\n if (pathname === \"/api/actions\" && method === \"GET\") {\n const status = url.searchParams.get(\"status\") ?? undefined;\n return json(await listActions(status));\n }\n if (pathname === \"/api/actions\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const created = await enqueueAction(body);\n return created ? json(created, 201) : json({ error: \"integration + endpoint required\" }, 400);\n }\n const actionApproveMatch = pathname.match(/^\\/api\\/actions\\/([^/]+)\\/approve$/);\n if (actionApproveMatch && method === \"POST\") {\n const a = await approveAction(actionApproveMatch[1]);\n return a ? json(a) : json({ error: \"Not found\" }, 404);\n }\n const actionRejectMatch = pathname.match(/^\\/api\\/actions\\/([^/]+)\\/reject$/);\n if (actionRejectMatch && method === \"POST\") {\n const a = await rejectAction(actionRejectMatch[1]);\n return a ? json(a) : json({ error: \"Not found\" }, 404);\n }\n const actionIdMatch = pathname.match(/^\\/api\\/actions\\/([^/]+)$/);\n if (actionIdMatch && method === \"GET\") {\n const a = await getAction(actionIdMatch[1]);\n return a ? json(a) : json({ error: \"Not found\" }, 404);\n }\n\n // Manual trigger for the execution engine (the interval val also calls processPendingRuns).\n if (pathname === \"/api/agents/run-pending\" && method === \"POST\") {\n const limit = parseInt(url.searchParams.get(\"limit\") ?? \"3\", 10);\n return json(await processPendingRuns(limit));\n }\n\n // GET /api/agents/activity?limit=N — cross-agent run feed; before the /api/agents/:id matchers.\n if (pathname === \"/api/agents/activity\" && method === \"GET\") {\n const limit = parseInt(url.searchParams.get(\"limit\") ?? \"20\", 10);\n const r = await sqlite.execute(\n `SELECT r.id, r.agent_id, a.name, a.workspace, r.status, r.started_at, r.finished_at, r.output\n FROM agent_runs r LEFT JOIN agents a ON a.id = r.agent_id AND a.tenant_id = ?\n WHERE r.tenant_id = ?\n ORDER BY r.started_at DESC LIMIT ?`,\n [tid, tid, limit]\n );\n return json({ activity: r.rows.map((row) => rowToObject(r.columns, row)) });\n }\n\n // --- Agent runs ----\n const agentRunsMatch = pathname.match(/^\\/api\\/agents\\/([^/]+)\\/runs$/);\n if (agentRunsMatch && method === \"GET\") {\n const agent_id = agentRunsMatch[1];\n const limit = parseInt(url.searchParams.get(\"limit\") ?? \"20\", 10);\n const result = await sqlite.execute(\n \"SELECT * FROM agent_runs WHERE agent_id = ? AND tenant_id = ? ORDER BY started_at DESC LIMIT ?\",\n [agent_id, tid, limit]\n );\n return json(result.rows.map((row) => rowToObject(result.columns, row)));\n }\n if (agentRunsMatch && method === \"POST\") {\n const agent_id = agentRunsMatch[1];\n const body = await req.json().catch(() => ({}));\n const id = crypto.randomUUID();\n const now = new Date().toISOString();\n await sqlite.execute(\n \"INSERT INTO agent_runs (id, agent_id, trigger, status, started_at, tenant_id) VALUES (?, ?, ?, ?, ?, ?)\",\n [id, agent_id, body.trigger ?? \"manual\", \"pending\", now, tid]\n );\n // App-level automation (no cron): run the queued job in-request. Fire-and-forget; status='running' claim guards dupes.\n processPendingRuns(1).catch(() => {});\n return json({ id, agent_id, trigger: body.trigger ?? \"manual\", status: \"pending\", started_at: now }, 201);\n }\n\n // Integrations routes\n // GET /api/integrations - list all integrations\n if (pathname === \"/api/integrations\" && method === \"GET\") {\n const result = await sqlite.execute(\"SELECT * FROM integrations WHERE tenant_id = ? ORDER BY name ASC\", [tid]);\n const rows = result.rows.map((row) => rowToObject(result.columns, row));\n // Google-family services inherit the central 'google' OAuth token, so they are \"connected\"\n // whenever google is — even without their own api_key/access_token row.\n const googleConnected = rows.some((o) => o.name === \"google\" && o.access_token);\n const integrations = rows.map((obj) => maskIntegration(obj, googleConnected));\n return json(integrations);\n }\n\n // POST /api/integrations/:name - upsert integration credentials\n const integrationUpsertMatch = pathname.match(/^\\/api\\/integrations\\/([^/]+)$/);\n if (integrationUpsertMatch && method === \"POST\") {\n const name = integrationUpsertMatch[1];\n const body = await req.json().catch(() => ({}));\n const now = new Date().toISOString();\n\n const existing = await sqlite.execute(\n \"SELECT id, api_key, api_secret, access_token, refresh_token, extra_config FROM integrations WHERE name = ? AND tenant_id = ?\",\n [name, tid]\n );\n\n // Keep the existing secret when the incoming value is blank/missing/masked (\"***\"),\n // so saving the masked Settings form does not wipe stored credentials.\n const keepSecret = (incoming: any, current: any) => {\n if (incoming == null) return current ?? null;\n const s = String(incoming);\n if (s === \"\" || s.includes(\"***\")) return current ?? null;\n return incoming;\n };\n\n if (existing.rows.length > 0) {\n const cur = existing.rows[0] as any[]; // [id, api_key, api_secret, access_token, refresh_token, extra_config]\n await sqlite.execute(\n `UPDATE integrations SET\n api_key = ?,\n api_secret = ?,\n access_token = ?,\n refresh_token = ?,\n extra_config = ?,\n updated_at = ?\n WHERE name = ? AND tenant_id = ?`,\n [\n keepSecret(body.api_key, cur[1]),\n keepSecret(body.api_secret, cur[2]),\n keepSecret(body.access_token, cur[3]),\n keepSecret(body.refresh_token, cur[4]),\n body.extra_config != null ? JSON.stringify(body.extra_config) : (cur[5] ?? null),\n now,\n name,\n tid,\n ]\n );\n } else {\n // Insert\n const id = crypto.randomUUID();\n await sqlite.execute(\n `INSERT INTO integrations (id, name, api_key, api_secret, access_token, refresh_token, extra_config, connected_at, updated_at, tenant_id)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n [\n id,\n name,\n body.api_key ?? null,\n body.api_secret ?? null,\n body.access_token ?? null,\n body.refresh_token ?? null,\n body.extra_config != null ? JSON.stringify(body.extra_config) : null,\n now,\n now,\n tid,\n ]\n );\n }\n\n const updated = await sqlite.execute(\n \"SELECT * FROM integrations WHERE name = ? AND tenant_id = ?\",\n [name, tid]\n );\n const raw = rowToObject(updated.columns, updated.rows[0]);\n // NEVER return the just-saved secrets in cleartext — mask like the list endpoint.\n const googleConnected = raw.name === \"google\"\n ? !!raw.access_token\n : !!(await getCredentials(\"google\"))?.access_token;\n return json({ success: true, integration: maskIntegration(raw, googleConnected) });\n }\n\n // DELETE /api/integrations/:name\n const integrationDeleteMatch = pathname.match(/^\\/api\\/integrations\\/([^/]+)$/);\n if (integrationDeleteMatch && method === \"DELETE\") {\n const name = integrationDeleteMatch[1];\n await sqlite.execute(\"DELETE FROM integrations WHERE name = ? AND tenant_id = ?\", [name, tid]);\n return json({ success: true, message: `Integration '${name}' deleted` });\n }\n\n // Part 13: GET /api/integrations/:name/schema — descriptor-generated action/trigger schema\n // (UI form fields + AI tool hints). null when the integration is still hand-written.\n const integrationSchemaMatch = pathname.match(/^\\/api\\/integrations\\/([^/]+)\\/schema$/);\n if (integrationSchemaMatch && method === \"GET\") {\n const schema = getIntegrationSchema(integrationSchemaMatch[1]);\n return schema ? json(schema) : json({ error: \"no descriptor for this integration yet\", descriptor_integrations: listDescriptorNames() }, 404);\n }\n\n // GET|POST /api/integrations/:name/data - proxy to integration API\n const integrationDataMatch = pathname.match(/^\\/api\\/integrations\\/([^/]+)\\/data$/);\n if (integrationDataMatch && (method === \"GET\" || method === \"POST\")) {\n const name = integrationDataMatch[1];\n const credentials = await getCredentials(name);\n if (!credentials) {\n return json({ error: `Integration '${name}' not found or not configured` }, 404);\n }\n return handleIntegrationProxy(req, name, url.searchParams, credentials);\n }\n\n // Agents routes\n // GET /api/agents - list agents (optional ?workspace= query param)\n if (pathname === \"/api/agents\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n const agents = await listAgents(workspace);\n return json(agents);\n }\n\n // POST /api/agents - create agent\n if (pathname === \"/api/agents\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const agent = await createAgent(body);\n return json(agent, 201);\n }\n\n // PUT /api/agents/:id - update agent\n const agentUpdateMatch = pathname.match(/^\\/api\\/agents\\/([^/]+)$/);\n if (agentUpdateMatch && method === \"PUT\") {\n const id = agentUpdateMatch[1];\n const body = await req.json().catch(() => ({}));\n const agent = await updateAgent(id, body);\n if (!agent) {\n return json({ error: `Agent '${id}' not found` }, 404);\n }\n return json(agent);\n }\n\n // DELETE /api/agents/:id - delete agent\n const agentDeleteMatch = pathname.match(/^\\/api\\/agents\\/([^/]+)$/);\n if (agentDeleteMatch && method === \"DELETE\") {\n const id = agentDeleteMatch[1];\n const deleted = await deleteAgent(id);\n if (!deleted) {\n return json({ error: `Agent '${id}' not found` }, 404);\n }\n return json({ success: true, message: `Agent '${id}' deleted` });\n }\n\n // LLM config routes\n // GET /api/llm/config - get LLM config (mask api_key)\n if (pathname === \"/api/llm/config\" && method === \"GET\") {\n const config = await getLLMConfig();\n if (!config) {\n return json({ error: \"LLM config not found\" }, 404);\n }\n // Mask api_key: show first 8 chars + ***\n const masked = {\n ...config,\n api_key: config.api_key\n ? config.api_key.slice(0, 8) + \"***\"\n : \"\",\n };\n return json(masked);\n }\n\n // POST /api/llm/config - save LLM config\n if (pathname === \"/api/llm/config\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const config = await saveLLMConfig(body);\n // Mask api_key in response\n const masked = {\n ...config,\n api_key: config.api_key\n ? config.api_key.slice(0, 8) + \"***\"\n : \"\",\n };\n return json(masked);\n }\n\n // Chat route\n // POST /api/chat - AI chat handler\n if (pathname === \"/api/chat\" && method === \"POST\") {\n return handleChat(req);\n }\n\n // POST /api/chat/stream - SSE streaming chat\n if (pathname === \"/api/chat/stream\" && method === \"POST\") {\n return handleChatStream(req);\n }\n\n // --- Conversation history routes ----\n if (pathname === \"/api/conversations\" && method === \"GET\") {\n return json(await listConversations());\n }\n const convIdMatch = pathname.match(/^\\/api\\/conversations\\/([^/]+)$/);\n if (convIdMatch && method === \"GET\") {\n const conv = await getConversationById(convIdMatch[1]);\n return conv ? json(conv) : json({ error: \"Not found\" }, 404);\n }\n if (convIdMatch && method === \"DELETE\") {\n const ok = await deleteConversation(convIdMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // Tasks routes\n // GET /api/tasks - list tasks (optional ?workspace= query param)\n if (pathname === \"/api/tasks\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n const status = url.searchParams.get(\"status\") ?? undefined;\n return json(await listTasks({ workspace, status }));\n }\n\n // POST /api/tasks - create task\n if (pathname === \"/api/tasks\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createTask(body), 201);\n }\n\n // GET /api/tasks/ice - ICE-ranked backlog (sorted by ICE score desc).\n // Declared before the /api/tasks/:id matchers so \"ice\" isn't read as an id.\n if (pathname === \"/api/tasks/ice\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n const limit = parseInt(url.searchParams.get(\"limit\") ?? \"50\", 10);\n return json(await listIceRankedTasks({ workspace, limit }));\n }\n\n // POST /api/tasks/generate - LLM-plan tasks from an experiment/KR/objective/campaign.\n if (pathname === \"/api/tasks/generate\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (!body.source_type || !body.source_id) {\n return json({ error: \"source_type and source_id are required\" }, 400);\n }\n return json(await generateTasksFromSource(body), 201);\n }\n\n // POST /api/tasks/:id/run - execute the task with an agent (sub-resource; before the bare :id matchers).\n const taskRunMatch = pathname.match(/^\\/api\\/tasks\\/([^/]+)\\/run$/);\n if (taskRunMatch && method === \"POST\") {\n const result = await runTask(taskRunMatch[1]);\n if (!result.task) return json({ error: result.error || \"Not found\" }, 404);\n return json(result);\n }\n\n // PUT /api/tasks/:id - update task (e.g. toggle status)\n const taskUpdateMatch = pathname.match(/^\\/api\\/tasks\\/([^/]+)$/);\n if (taskUpdateMatch && method === \"PUT\") {\n const id = taskUpdateMatch[1];\n const body = await req.json().catch(() => ({}));\n const updated = await updateTask(id, body);\n if (!updated) return json({ error: \"Not found\" }, 404);\n return json(updated);\n }\n\n // DELETE /api/tasks/:id - delete task\n const taskDeleteMatch = pathname.match(/^\\/api\\/tasks\\/([^/]+)$/);\n if (taskDeleteMatch && method === \"DELETE\") {\n const ok = await deleteTask(taskDeleteMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // --- Relational CRM (accounts + contacts + deal↔contact links) ----\n // Delegate to api/crm_routes.ts; tenant context is already set by main.ts. Kept thin to stay under the 80KB file limit.\n if (isCrmPath(pathname)) return handleCrmRoutes(req, url, method);\n if (isMarketingPath(pathname)) return handleMarketingRoutes(req, url, method);\n\n // --- CRM Deals (sales pipeline) ----\n if (pathname === \"/api/deals\" && method === \"GET\") {\n return json(await listDeals(url.searchParams.get(\"stage\") ?? undefined));\n }\n if (pathname === \"/api/deals\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createDeal(body), 201);\n }\n // Seed deals from qualified leads (explicit; checked before the :id matcher).\n if (pathname === \"/api/deals/sync\" && method === \"POST\") {\n return json(await syncDealsFromLeads());\n }\n // Interactive import: candidate leads to review, then import the selected emails.\n if (pathname === \"/api/deals/candidates\" && method === \"GET\") {\n return json(await listCandidates());\n }\n if (pathname === \"/api/deals/import\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await importDeals(Array.isArray(body.emails) ? body.emails : []));\n }\n const dealIdMatch = pathname.match(/^\\/api\\/deals\\/([^/]+)$/);\n if (dealIdMatch && dealIdMatch[1] !== \"sync\" && method === \"GET\") {\n const d = await getDeal(dealIdMatch[1]);\n return d ? json(d) : json({ error: \"Not found\" }, 404);\n }\n if (dealIdMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n const updated = await updateDeal(dealIdMatch[1], body);\n return updated ? json(updated) : json({ error: \"Not found\" }, 404);\n }\n if (dealIdMatch && method === \"DELETE\") {\n const ok = await deleteDeal(dealIdMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // --- Data export (CSV) ----\n if (pathname === \"/api/export/signals\" && method === \"GET\") {\n const r = await sqlite.execute(\"SELECT id, lead_email, lead_name, signal_type, signal_source, signal_strength, actioned, detected_at FROM intent_signals WHERE tenant_id = ? ORDER BY detected_at DESC\", [tid]);\n const cols = r.columns;\n let csv = cols.join(\",\") + \"\\n\";\n for (const row of r.rows) {\n csv += (row as any[]).map((v) => `\"${String(v ?? \"\").replace(/\"/g, '\"\"')}\"`).join(\",\") + \"\\n\";\n }\n return new Response(csv, { headers: { \"Content-Type\": \"text/csv\", \"Content-Disposition\": 'attachment; filename=\"signals.csv\"', ...corsHeaders } });\n }\n if (pathname === \"/api/export/okrs\" && method === \"GET\") {\n const objR = await sqlite.execute(\"SELECT id, title, description, workspace, status, progress, quarter, created_at FROM objectives WHERE tenant_id = ? ORDER BY created_at DESC\", [tid]);\n const krR = await sqlite.execute(\"SELECT id, objective_id, title, target_value, current_value, unit, progress, updated_at FROM key_results WHERE tenant_id = ? ORDER BY updated_at DESC\", [tid]);\n let csv = \"type,\" + objR.columns.join(\",\") + \"\\n\";\n for (const row of objR.rows) {\n csv += \"objective,\" + (row as any[]).map((v) => `\"${String(v ?? \"\").replace(/\"/g, '\"\"')}\"`).join(\",\") + \"\\n\";\n }\n if (krR.rows.length > 0) {\n csv += \"\\ntype,\" + krR.columns.join(\",\") + \"\\n\";\n for (const row of krR.rows) {\n csv += \"key_result,\" + (row as any[]).map((v) => `\"${String(v ?? \"\").replace(/\"/g, '\"\"')}\"`).join(\",\") + \"\\n\";\n }\n }\n return new Response(csv, { headers: { \"Content-Type\": \"text/csv\", \"Content-Disposition\": 'attachment; filename=\"okrs.csv\"', ...corsHeaders } });\n }\n if (pathname === \"/api/export/tasks\" && method === \"GET\") {\n const r = await sqlite.execute(\"SELECT id, title, description, status, priority, workspace, due_date, created_at, updated_at FROM tasks WHERE tenant_id = ? ORDER BY created_at DESC\", [tid]);\n const cols = r.columns;\n let csv = cols.join(\",\") + \"\\n\";\n for (const row of r.rows) {\n csv += (row as any[]).map((v) => `\"${String(v ?? \"\").replace(/\"/g, '\"\"')}\"`).join(\",\") + \"\\n\";\n }\n return new Response(csv, { headers: { \"Content-Type\": \"text/csv\", \"Content-Disposition\": 'attachment; filename=\"tasks.csv\"', ...corsHeaders } });\n }\n\n // --- LinkedIn OAuth flow (legacy aliases) ----\n if (pathname === \"/api/oauth/linkedin/start\" && method === \"GET\") {\n return Response.redirect(`${url.origin}/api/auth/linkedin`);\n }\n if (pathname === \"/api/oauth/linkedin/callback\" && method === \"GET\") {\n return Response.redirect(`${url.origin}/api/auth/linkedin/callback?${url.search.slice(1)}`);\n }\n\n // --- Graphify - app map for MCP / AI-native navigation ----\n if (pathname === \"/api/graphify\" && method === \"GET\") {\n return json(await getGraphify());\n }\n\n // --- Calendar today shortcut (TodayPanel widget) ----\n if (pathname === \"/api/calendar/today\" && method === \"GET\") {\n const today = new Date().toISOString().slice(0, 10);\n return json(await getUnifiedCalendar({ from: today, to: today }));\n }\n\n // --- Digest latest alias ----\n if (pathname === \"/api/digest/latest\" && method === \"GET\") {\n return json(await getLatestDigest());\n }\n\n // --- PLATFORM SUPERADMIN (master-only; the single audited exception to tenant isolation) ----\n // GATE first, then delegate all /api/platform/* routes to handlePlatformRoutes (api/platform.ts).\n if (pathname.startsWith(\"/api/platform/\")) {\n if (!currentCtx().isPlatformAdmin) return json({ error: \"Forbidden: platform admin only\" }, 403);\n return handlePlatformRoutes(req, url, method);\n }\n\n // --- ADMIN LOCKDOWN: every destructive /api/admin/* route is owner-only (plus per-route confirm\n // tokens below). No-op under default SYSTEM_CTX (role \"owner\"); locks out trial members. ----\n if (pathname.startsWith(\"/api/admin/\") && currentRole() !== \"owner\") {\n return json({ error: \"Forbidden: owner role required\" }, 403);\n }\n\n // Owner bootstrap (owner-only): create/attach the platform owner to t_default for email+password login. Idempotent.\n if (pathname === \"/api/admin/bootstrap-owner\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (!body.email || !body.password) return json({ ok: false, error: \"email + password required\" }, 400);\n const r = await bootstrapOwner(String(body.email), String(body.password));\n return json({ ok: r.ok, created: r.created });\n }\n\n // Admin backup/export (owner-only): read-only, tenant-scoped (WHERE tenant_id=?) JSON snapshot of this tenant's rows.\n // Confirm is optional: pass { confirm: \"EXPORT\" } to be explicit, otherwise it just runs.\n if (pathname === \"/api/admin/export\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm != null && body.confirm !== \"EXPORT\") {\n return json({ ok: false, error: \"Send confirm: EXPORT (or omit confirm)\" }, 400);\n }\n const EXPORT_TABLES = [\n \"tasks\", \"deals\", \"campaigns\", \"objectives\", \"key_results\", \"experiments\",\n \"agents\", \"action_queue\", \"calendar_entries\", \"knowledge_files\", \"notes\",\n ];\n const data: Record<string, any[]> = {};\n const counts: Record<string, number> = {};\n for (const table of EXPORT_TABLES) {\n try {\n const r = await sqlite.execute(`SELECT * FROM ${table} WHERE tenant_id = ?`, [tid]);\n const rows = (r.rows || []).map((row) => rowToObject(r.columns, row));\n data[table] = rows;\n counts[table] = rows.length;\n } catch {\n // Missing table (e.g. not yet created): record empty rather than failing the whole export.\n data[table] = [];\n counts[table] = 0;\n }\n }\n const snapshot = {\n ok: true,\n tenant_id: tid,\n version: APP_VERSION,\n exported_at: new Date().toISOString(),\n tables: EXPORT_TABLES,\n counts,\n data,\n };\n const filename = `aihive-backup-${tid}-${new Date().toISOString().slice(0, 10)}.json`;\n return new Response(JSON.stringify(snapshot, null, 2), {\n headers: {\n \"Content-Type\": \"application/json\",\n \"Content-Disposition\": `attachment; filename=\"${filename}\"`,\n \"Cache-Control\": \"no-store\",\n ...corsHeaders,\n },\n });\n }\n\n // --- Admin purge (clear intelligence cache) ----\n if (pathname === \"/api/admin/purge\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm !== \"PURGE\") return json({ error: \"Send confirm: PURGE\" }, 400);\n await sqlite.execute(\"DELETE FROM intelligence_cache WHERE tenant_id = ?\", [tid]).catch(() => {});\n await sqlite.execute(\"UPDATE app_config SET value=NULL WHERE key='funnel_cache' AND tenant_id = ?\", [tid]).catch(() => {});\n return json({ success: true, message: \"Cache purged\" });\n }\n\n // Remove demo/seed data: starter agents matched exactly on (name, description, system_prompt) so edits are never touched.\n if (pathname === \"/api/admin/seed-status\" && method === \"GET\") {\n let agents = 0;\n for (const seed of DEFAULT_AGENT_SEEDS) {\n const r = await sqlite.execute(\n \"SELECT COUNT(*) FROM agents WHERE name = ? AND description = ? AND system_prompt = ? AND tenant_id = ?\",\n [seed.name, seed.description, seed.system_prompt, tid],\n ).catch(() => null);\n if (r?.rows?.length) agents += Number((r.rows[0] as any[])[0]) || 0;\n }\n return json({ ok: true, total: agents, counts: { agents } });\n }\n if (pathname === \"/api/admin/cleanup-mock\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm !== \"CLEANUP\") return json({ ok: false, error: \"Send confirm: CLEANUP\" }, 400);\n let removed = 0;\n for (const seed of DEFAULT_AGENT_SEEDS) {\n const r = await sqlite.execute(\n \"DELETE FROM agents WHERE name = ? AND description = ? AND system_prompt = ? AND tenant_id = ?\",\n [seed.name, seed.description, seed.system_prompt, tid],\n ).catch(() => null);\n removed += Number((r as any)?.rowsAffected ?? 0) || 0;\n }\n return json({ ok: true, total: removed });\n }\n\n // Bulk reset: wipe ALL agents (= agents + campaigns, same table) plus related\n // run/budget/conversation rows that deleteAgent() does not cascade. Confirm-guarded.\n if (pathname === \"/api/admin/reset-agents\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm !== \"CLEANUP\") return json({ ok: false, error: \"Send confirm: CLEANUP\" }, 400);\n const counts: Record<string, number> = {};\n for (const table of [\"agents\", \"agent_runs\", \"agent_budgets\", \"conversations\"]) {\n const r = await sqlite.execute(`DELETE FROM ${table} WHERE tenant_id = ?`, [tid]).catch(() => null);\n counts[table] = Number((r as any)?.rowsAffected ?? 0) || 0;\n }\n return json({ ok: true, counts });\n }\n\n // Factory reset (this app + tenant only): wipe the data tables below, keeping integrations/llm_config/knowledge_files. Confirm-guarded.\n if (pathname === \"/api/admin/reset-data\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm !== \"CLEANUP\") return json({ ok: false, error: \"Send confirm: CLEANUP\" }, 400);\n const WIPE_TABLES = [\n \"agents\", \"conversations\", \"agent_budgets\", \"agent_runs\",\n \"objectives\", \"key_results\", \"north_star\", \"nsm_history\",\n \"experiments\", \"tasks\", \"tasks_legacy\", \"notes\",\n \"intent_signals\", \"growth_digests\", \"calendar_entries\", \"action_queue\",\n \"customer_cohorts\", \"lead_state_changes\", \"utm_conversions\",\n \"metric_baselines\", \"metric_history\", \"intelligence_cache\", \"app_config\",\n ];\n const counts: Record<string, number> = {};\n for (const table of WIPE_TABLES) {\n const r = await sqlite.execute(`DELETE FROM ${table} WHERE tenant_id = ?`, [tid]).catch(() => null);\n counts[table] = Number((r as any)?.rowsAffected ?? 0) || 0;\n }\n return json({ ok: true, kept: [\"integrations\", \"llm_config\", \"knowledge_files\"], counts });\n }\n\n // Precise working-data wipe (KEEPS knowledge_files/skills/memory/app_config/integrations/llm_config). Confirm-guarded.\n if (pathname === \"/api/admin/wipe-working-data\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm !== \"WIPE\") return json({ ok: false, error: \"Send confirm: WIPE\" }, 400);\n const WIPE = [\n \"agents\", \"agent_runs\", \"agent_budgets\", \"conversations\", \"deals\",\n \"experiments\", \"tasks\", \"tasks_legacy\", \"objectives\", \"key_results\",\n \"north_star\", \"nsm_history\", \"intent_signals\", \"growth_digests\",\n \"calendar_entries\", \"action_queue\", \"customer_cohorts\", \"lead_state_changes\",\n \"utm_conversions\", \"metric_baselines\", \"metric_history\", \"intelligence_cache\", \"notes\",\n ];\n const counts: Record<string, number> = {};\n for (const table of WIPE) {\n const r = await sqlite.execute(`DELETE FROM ${table} WHERE tenant_id = ?`, [tid]).catch(() => null);\n counts[table] = Number((r as any)?.rowsAffected ?? 0) || 0;\n }\n return json({\n ok: true,\n kept: [\"knowledge_files\", \"skills\", \"memory\", \"app_config\", \"integrations\", \"llm_config\"],\n counts,\n });\n }\n\n // --- Targeted wipe: tasks + run history + agents/budgets + campaign↔agent links ONLY ----\n // Keeps campaigns/objectives/everything else. Confirm-guarded.\n if (pathname === \"/api/admin/wipe-tasks-agents\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm !== \"WIPE\") return json({ ok: false, error: \"Send confirm: WIPE\" }, 400);\n const WIPE = [\"tasks\", \"tasks_legacy\", \"agent_runs\", \"agent_budgets\", \"campaign_agents\", \"agents\", \"campaign_runs\"];\n const counts: Record<string, number> = {};\n for (const table of WIPE) {\n const r = await sqlite.execute(`DELETE FROM ${table} WHERE tenant_id = ?`, [tid]).catch(() => null);\n counts[table] = Number((r as any)?.rowsAffected ?? 0) || 0;\n }\n // Also clear internal completion events (metric_history integration='internal') and task-done\n // calendar markers (event_type='completion'); keep real integration metric history intact.\n const mh = await sqlite.execute(\"DELETE FROM metric_history WHERE integration = 'internal' AND tenant_id = ?\", [tid]).catch(() => null);\n counts[\"metric_history(internal)\"] = Number((mh as any)?.rowsAffected ?? 0) || 0;\n const cm = await sqlite.execute(\"DELETE FROM calendar_entries WHERE event_type = 'completion' AND tenant_id = ?\", [tid]).catch(() => null);\n counts[\"calendar_entries(completion)\"] = Number((cm as any)?.rowsAffected ?? 0) || 0;\n return json({ ok: true, wiped: [...WIPE, \"metric_history(internal)\", \"calendar_entries(completion)\"], counts });\n }\n\n // --- Targeted wipe: action_queue (approvals / prepared+sent action history) ONLY ----\n if (pathname === \"/api/admin/wipe-actions\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n if (body.confirm !== \"WIPE\") return json({ ok: false, error: \"Send confirm: WIPE\" }, 400);\n const r = await sqlite.execute(\"DELETE FROM action_queue WHERE tenant_id = ?\", [tid]).catch(() => null);\n return json({ ok: true, wiped: [\"action_queue\"], counts: { action_queue: Number((r as any)?.rowsAffected ?? 0) || 0 } });\n }\n\n // --- Google OAuth redirect flow ----\n if (pathname === \"/api/auth/google\" && method === \"GET\") {\n const creds = await getCredentials(\"google\");\n // OAuth client is env-driven by design (GOOGLE_CLIENT_ID/SECRET); fall back to the DB row.\n const clientId = Deno.env.get(\"GOOGLE_CLIENT_ID\") || creds?.extra_config?.client_id || creds?.extra_config?.clientId;\n const redirectUri = creds?.extra_config?.redirect_uri || creds?.extra_config?.redirectUri || `${url.origin}/api/auth/google/callback`;\n if (!clientId) {\n return new Response(\"Google OAuth not configured. Add Client ID in Settings - Google.\", { status: 400 });\n }\n const scopes = [\n \"https://www.googleapis.com/auth/userinfo.email\",\n \"https://www.googleapis.com/auth/analytics.readonly\",\n \"https://www.googleapis.com/auth/webmasters.readonly\",\n \"https://www.googleapis.com/auth/gmail.modify\",\n \"https://www.googleapis.com/auth/drive.readonly\",\n \"https://www.googleapis.com/auth/spreadsheets.readonly\",\n \"https://www.googleapis.com/auth/documents.readonly\",\n \"https://www.googleapis.com/auth/calendar\",\n \"https://www.googleapis.com/auth/youtube.readonly\",\n \"https://www.googleapis.com/auth/yt-analytics.readonly\",\n ].join(\" \");\n const { state, setCookie } = newOAuthState();\n const params = new URLSearchParams({\n client_id: clientId,\n redirect_uri: redirectUri,\n response_type: \"code\",\n scope: scopes,\n access_type: \"offline\",\n prompt: \"consent\",\n state,\n });\n return redirectWithCookie(`https://accounts.google.com/o/oauth2/v2/auth?${params}`, setCookie);\n }\n\n if (pathname === \"/api/auth/google/callback\" && method === \"GET\") {\n const code = url.searchParams.get(\"code\");\n const error = url.searchParams.get(\"error\");\n if (error || !code) {\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(error || \"no_code\")}`);\n }\n if (!oauthStateValid(req, url)) {\n return Response.redirect(`${url.origin}/?auth_error=state_mismatch`);\n }\n const creds = await getCredentials(\"google\");\n // Trim env/DB values to avoid whitespace producing a malformed (invalid_request) token request.\n const clientId = (Deno.env.get(\"GOOGLE_CLIENT_ID\") || creds?.extra_config?.client_id || creds?.extra_config?.clientId || \"\").trim();\n const clientSecret = (Deno.env.get(\"GOOGLE_CLIENT_SECRET\") || creds?.api_secret || \"\").trim();\n const redirectUri = (creds?.extra_config?.redirect_uri || creds?.extra_config?.redirectUri || `${url.origin}/api/auth/google/callback`).trim();\n\n // Fail fast with a clear cause if a required param is empty (Google would return invalid_request).\n if (!clientId || !clientSecret) {\n const missing = !clientId && !clientSecret ? \"client_id_and_secret\"\n : !clientId ? \"client_id\" : \"client_secret\";\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(\"missing_\" + missing)}`);\n }\n\n const tokenRes = await fetch(\"https://oauth2.googleapis.com/token\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/x-www-form-urlencoded\" },\n body: new URLSearchParams({ code, client_id: clientId, client_secret: clientSecret, redirect_uri: redirectUri, grant_type: \"authorization_code\" }),\n });\n const tokens = await tokenRes.json() as any;\n if (!tokenRes.ok || !tokens.access_token) {\n const detail = [tokens.error, tokens.error_description].filter(Boolean).join(\": \") || \"token_exchange_failed\";\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(detail)}`);\n }\n\n const now = new Date().toISOString();\n const newExtraConfig = { ...(creds?.extra_config || {}), token_expiry: Date.now() + (tokens.expires_in || 3600) * 1000 };\n const existing = await sqlite.execute(\"SELECT id FROM integrations WHERE name = ? AND tenant_id = ?\", [\"google\", tid]);\n if (existing.rows.length > 0) {\n await sqlite.execute(\n \"UPDATE integrations SET access_token=?, refresh_token=?, extra_config=?, updated_at=? WHERE name='google' AND tenant_id = ?\",\n [tokens.access_token, tokens.refresh_token || creds?.refresh_token || null, JSON.stringify(newExtraConfig), now, tid]\n );\n } else {\n await sqlite.execute(\n \"INSERT INTO integrations (id, name, access_token, refresh_token, extra_config, connected_at, updated_at, tenant_id) VALUES (?,?,?,?,?,?,?,?)\",\n [crypto.randomUUID(), \"google\", tokens.access_token, tokens.refresh_token || null, JSON.stringify(newExtraConfig), now, now, tid]\n );\n }\n return redirectWithCookie(`${url.origin}/?auth=google_ok`, CLEAR_OAUTH_STATE);\n }\n\n // --- LinkedIn OAuth flow ----\n if (pathname === \"/api/auth/linkedin\" && method === \"GET\") {\n const creds = await getCredentials(\"linkedin\");\n const clientId = creds?.extra_config?.clientId || creds?.extra_config?.client_id;\n const redirectUri = `${url.origin}/api/auth/linkedin/callback`;\n if (!clientId) {\n return new Response(\"LinkedIn OAuth not configured. Add Client ID in Settings - LinkedIn.\", { status: 400 });\n }\n const { state, setCookie } = newOAuthState();\n const params = new URLSearchParams({\n response_type: \"code\",\n client_id: clientId,\n redirect_uri: redirectUri,\n scope: \"openid profile email w_member_social r_basicprofile\",\n state,\n });\n return redirectWithCookie(`https://www.linkedin.com/oauth/v2/authorization?${params}`, setCookie);\n }\n\n if (pathname === \"/api/auth/linkedin/callback\" && method === \"GET\") {\n const code = url.searchParams.get(\"code\");\n const error = url.searchParams.get(\"error\");\n if (error || !code) {\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(error || \"no_code\")}`);\n }\n if (!oauthStateValid(req, url)) {\n return Response.redirect(`${url.origin}/?auth_error=state_mismatch`);\n }\n const creds = await getCredentials(\"linkedin\");\n const clientId = creds?.extra_config?.clientId || creds?.extra_config?.client_id || \"\";\n const clientSecret = creds?.api_secret || \"\";\n const redirectUri = `${url.origin}/api/auth/linkedin/callback`;\n\n const tokenRes = await fetch(\"https://www.linkedin.com/oauth/v2/accessToken\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/x-www-form-urlencoded\" },\n body: new URLSearchParams({ grant_type: \"authorization_code\", code, redirect_uri: redirectUri, client_id: clientId, client_secret: clientSecret }),\n });\n const tokens = await tokenRes.json() as any;\n if (!tokenRes.ok || !tokens.access_token) {\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(tokens.error || \"linkedin_token_failed\")}`);\n }\n\n // Fetch LinkedIn profile to get the author URN needed for posts endpoint.\n let authorId = creds?.extra_config?.author_id || \"\";\n try {\n const profileRes = await fetch(\"https://api.linkedin.com/v2/me\", {\n headers: { Authorization: `Bearer ${tokens.access_token}` },\n });\n if (profileRes.ok) {\n const profile = await profileRes.json() as any;\n if (profile.id) authorId = `urn:li:person:${profile.id}`;\n }\n } catch { /* non-fatal - author_id can be set manually later */ }\n\n const now = new Date().toISOString();\n const newExtraConfig = { ...(creds?.extra_config || {}), token_expiry: Date.now() + (tokens.expires_in || 5184000) * 1000, author_id: authorId };\n const existing = await sqlite.execute(\"SELECT id FROM integrations WHERE name = ? AND tenant_id = ?\", [\"linkedin\", tid]);\n if (existing.rows.length > 0) {\n await sqlite.execute(\n \"UPDATE integrations SET access_token=?, extra_config=?, updated_at=? WHERE name='linkedin' AND tenant_id = ?\",\n [tokens.access_token, JSON.stringify(newExtraConfig), now, tid]\n );\n } else {\n await sqlite.execute(\n \"INSERT INTO integrations (id, name, access_token, extra_config, connected_at, updated_at, tenant_id) VALUES (?,?,?,?,?,?,?)\",\n [crypto.randomUUID(), \"linkedin\", tokens.access_token, JSON.stringify(newExtraConfig), now, now, tid]\n );\n }\n return redirectWithCookie(`${url.origin}/?auth=linkedin_ok`, CLEAR_OAUTH_STATE);\n }\n\n // Microsoft (Outlook) OAuth: env-first client (MICROSOFT_CLIENT_ID/SECRET), `common` tenant, DB fallback. Mirrors Google.\n if (pathname === \"/api/auth/microsoft\" && method === \"GET\") {\n const mcreds = await getCredentials(\"outlook\");\n const clientId = (Deno.env.get(\"MICROSOFT_CLIENT_ID\") || mcreds?.extra_config?.client_id || mcreds?.extra_config?.clientId || \"\").trim();\n if (!clientId) {\n return new Response(\"Microsoft OAuth not configured. Set MICROSOFT_CLIENT_ID (env) or add the Client ID in Settings → Outlook.\", { status: 400 });\n }\n const redirectUri = `${url.origin}/api/auth/microsoft/callback`;\n const scopes = MICROSOFT_SCOPES;\n const { state, setCookie } = newOAuthState();\n const params = new URLSearchParams({\n client_id: clientId,\n response_type: \"code\",\n redirect_uri: redirectUri,\n response_mode: \"query\",\n scope: scopes,\n state,\n });\n return redirectWithCookie(`https://login.microsoftonline.com/common/oauth2/v2.0/authorize?${params}`, setCookie);\n }\n\n if (pathname === \"/api/auth/microsoft/callback\" && method === \"GET\") {\n const code = url.searchParams.get(\"code\");\n const error = url.searchParams.get(\"error\");\n if (error || !code) {\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(error || \"no_code\")}`);\n }\n if (!oauthStateValid(req, url)) {\n return Response.redirect(`${url.origin}/?auth_error=state_mismatch`);\n }\n const creds = await getCredentials(\"outlook\");\n const clientId = (Deno.env.get(\"MICROSOFT_CLIENT_ID\") || creds?.extra_config?.client_id || creds?.extra_config?.clientId || \"\").trim();\n const clientSecret = (Deno.env.get(\"MICROSOFT_CLIENT_SECRET\") || creds?.api_secret || \"\").trim();\n const redirectUri = `${url.origin}/api/auth/microsoft/callback`;\n if (!clientId || !clientSecret) {\n const missing = !clientId && !clientSecret ? \"client_id_and_secret\" : !clientId ? \"client_id\" : \"client_secret\";\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(\"missing_microsoft_\" + missing)}`);\n }\n const scopes = MICROSOFT_SCOPES;\n const tokenRes = await fetch(\"https://login.microsoftonline.com/common/oauth2/v2.0/token\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/x-www-form-urlencoded\" },\n body: new URLSearchParams({ client_id: clientId, client_secret: clientSecret, code, redirect_uri: redirectUri, grant_type: \"authorization_code\", scope: scopes }),\n });\n const tokens = await tokenRes.json() as any;\n if (!tokenRes.ok || !tokens.access_token) {\n const detail = [tokens.error, tokens.error_description].filter(Boolean).join(\": \") || \"token_exchange_failed\";\n return Response.redirect(`${url.origin}/?auth_error=${encodeURIComponent(detail)}`);\n }\n\n const now = new Date().toISOString();\n const newExtraConfig = { ...(creds?.extra_config || {}), token_expiry: Date.now() + (tokens.expires_in || 3600) * 1000 };\n const existing = await sqlite.execute(\"SELECT id FROM integrations WHERE name = ? AND tenant_id = ?\", [\"outlook\", tid]);\n if (existing.rows.length > 0) {\n await sqlite.execute(\n \"UPDATE integrations SET access_token=?, refresh_token=?, extra_config=?, updated_at=? WHERE name='outlook' AND tenant_id = ?\",\n [tokens.access_token, tokens.refresh_token || creds?.refresh_token || null, JSON.stringify(newExtraConfig), now, tid]\n );\n } else {\n await sqlite.execute(\n \"INSERT INTO integrations (id, name, access_token, refresh_token, extra_config, connected_at, updated_at, tenant_id) VALUES (?,?,?,?,?,?,?,?)\",\n [crypto.randomUUID(), \"outlook\", tokens.access_token, tokens.refresh_token || null, JSON.stringify(newExtraConfig), now, now, tid]\n );\n }\n return redirectWithCookie(`${url.origin}/?auth=outlook_ok`, CLEAR_OAUTH_STATE);\n }\n\n // Identity login OAuth (sign-in, NOT data scopes): scope \"openid email profile\"; callback mints an app session.\n const loginMatch = pathname.match(/^\\/api\\/login\\/(google|microsoft)(\\/callback)?$/);\n if (loginMatch && method === \"GET\") {\n const provider = loginMatch[1] as \"google\" | \"microsoft\";\n return loginMatch[2]\n ? await identityLoginCallback(provider, req, url)\n : identityLoginStart(provider, url);\n }\n\n // --- Notes routes (TeamHub collaborative notes) ----\n if (pathname === \"/api/notes\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? \"marketing\";\n const result = await sqlite.execute(\n \"SELECT * FROM notes WHERE workspace=? AND tenant_id = ? ORDER BY pinned DESC, created_at DESC\",\n [workspace, tid]\n );\n return json(result.rows.map((r) => rowToObject(result.columns, r)));\n }\n if (pathname === \"/api/notes\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const id = crypto.randomUUID();\n const now = new Date().toISOString();\n await sqlite.execute(\n \"INSERT INTO notes (id, content, pinned, workspace, created_at, updated_at, tenant_id) VALUES (?,?,?,?,?,?,?)\",\n [id, body.content ?? \"\", body.pinned ? 1 : 0, body.workspace ?? \"marketing\", now, now, tid]\n );\n return json({ id, content: body.content ?? \"\", pinned: !!body.pinned, workspace: body.workspace ?? \"marketing\", created_at: now, updated_at: now }, 201);\n }\n const noteMatch = pathname.match(/^\\/api\\/notes\\/([^/]+)$/);\n if (noteMatch && method === \"PUT\") {\n const id = noteMatch[1];\n const body = await req.json().catch(() => ({}));\n const now = new Date().toISOString();\n const setParts: string[] = [\"updated_at=?\"];\n const setArgs: any[] = [now];\n if (body.pinned !== undefined) { setParts.push(\"pinned=?\"); setArgs.push(body.pinned ? 1 : 0); }\n if (body.content !== undefined) { setParts.push(\"content=?\"); setArgs.push(body.content); }\n await sqlite.execute(\n `UPDATE notes SET ${setParts.join(\", \")} WHERE id=? AND tenant_id = ?`,\n [...setArgs, id, tid]\n );\n const r = await sqlite.execute(\"SELECT * FROM notes WHERE id=? AND tenant_id = ?\", [id, tid]);\n if (!r.rows.length) return json({ error: \"Not found\" }, 404);\n return json(rowToObject(r.columns, r.rows[0]));\n }\n if (noteMatch && method === \"DELETE\") {\n await sqlite.execute(\"DELETE FROM notes WHERE id=? AND tenant_id = ?\", [noteMatch[1], tid]);\n return json({ success: true });\n }\n\n // --- World dashboard rollups (logs / kanban / project panels) ----\n // /api/world/activity — cross-agent runs; ?campaign[_id]=ID scopes to that campaign, bare ?campaign = legacy filter.\n if (pathname === \"/api/world/activity\" && method === \"GET\") {\n const limit = parseInt(url.searchParams.get(\"limit\") ?? \"40\", 10);\n const status = url.searchParams.get(\"status\") ?? undefined;\n const agent_id = url.searchParams.get(\"agent_id\") ?? undefined;\n const campaignParam = url.searchParams.get(\"campaign_id\") ?? url.searchParams.get(\"campaign\");\n const campaign_id = campaignParam ? campaignParam : undefined;\n const campaign = url.searchParams.get(\"campaign\") != null && !campaign_id;\n return json(await getWorldActivity({ limit, status, agent_id, campaign, campaign_id }));\n }\n // /api/world/board — tasks grouped into the 4 kanban columns; ?campaign[_id]=ID scopes them.\n if (pathname === \"/api/world/board\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n const campaign_id = url.searchParams.get(\"campaign_id\") ?? url.searchParams.get(\"campaign\") ?? undefined;\n return json(await getWorldBoard({ workspace, campaign_id: campaign_id || undefined }));\n }\n // /api/world/project — active campaign brief + real run-usage rollup; ?campaign[_id]=ID focuses it.\n if (pathname === \"/api/world/project\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n const campaign_id = url.searchParams.get(\"campaign_id\") ?? url.searchParams.get(\"campaign\") ?? undefined;\n return json(await getWorldProject({ workspace, campaign_id: campaign_id || undefined }));\n }\n\n // --- Campaigns (Director: multi-agent orchestrated pipelines) ----\n if (pathname === \"/api/campaigns\" && method === \"GET\") {\n const workspace = url.searchParams.get(\"workspace\") ?? undefined;\n return json(await listCampaigns(workspace));\n }\n if (pathname === \"/api/campaigns\" && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await createCampaign(body), 201);\n }\n // Sub-resources (:id/runs, :id/agents, :id/trigger) before the bare :id matcher.\n const campaignRunsMatch = pathname.match(/^\\/api\\/campaigns\\/([^/]+)\\/runs$/);\n if (campaignRunsMatch && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n // Runs the Director pipeline synchronously and returns the run result.\n return json(await orchestrateCampaignRun(campaignRunsMatch[1], body.input));\n }\n if (campaignRunsMatch && method === \"GET\") {\n return json(await listCampaignRuns(campaignRunsMatch[1]));\n }\n const campaignAgentsMatch = pathname.match(/^\\/api\\/campaigns\\/([^/]+)\\/agents$/);\n if (campaignAgentsMatch && method === \"GET\") {\n return json(await getCampaignAgents(campaignAgentsMatch[1]));\n }\n // Clicking a campaign returns its tasks (OKR→Campaign→Task link).\n const campaignTasksMatch = pathname.match(/^\\/api\\/campaigns\\/([^/]+)\\/tasks$/);\n if (campaignTasksMatch && method === \"GET\") {\n return json(await listTasks({ campaign_id: campaignTasksMatch[1] }));\n }\n const campaignTriggerMatch = pathname.match(/^\\/api\\/campaigns\\/([^/]+)\\/trigger$/);\n if (campaignTriggerMatch && method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n return json(await setCampaignTrigger(campaignTriggerMatch[1], body));\n }\n const campaignIdMatch = pathname.match(/^\\/api\\/campaigns\\/([^/]+)$/);\n if (campaignIdMatch && method === \"GET\") {\n const c = await getCampaign(campaignIdMatch[1]);\n return c ? json(c) : json({ error: \"Not found\" }, 404);\n }\n if (campaignIdMatch && method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n return json(await updateCampaign(campaignIdMatch[1], body));\n }\n if (campaignIdMatch && method === \"DELETE\") {\n const ok = await deleteCampaign(campaignIdMatch[1]);\n return ok ? json({ success: true }) : json({ error: \"Not found\" }, 404);\n }\n\n // No route matched\n return json({ error: \"Not found\", path: pathname }, 404);\n } catch (err) {\n const message = err instanceof Error ? err.message : String(err);\n console.error(`[router] Error handling ${method} ${pathname}:`, message);\n return json({ error: \"Internal server error\", detail: message }, 500);\n }\n}\n\n/**\n * Converts a sqlite result row (array of values) to a plain object\n * using the columns array from the result set.\n */\nfunction rowToObject(columns: string[], row: unknown[]): Record<string, unknown> {\n const obj: Record<string, unknown> = {};\n for (let i = 0; i < columns.length; i++) {\n obj[columns[i]] = row[i];\n }\n return obj;\n}\n",[184],"093e1b2c-5f15-11f1-85c6-1607ee4eb77e","main.ts",1005,["D",1780467937905],22,"http","import { initDB, tenantStore, SYSTEM_CTX } from \"./db.ts\";\nimport { handleRequest } from \"./router.ts\";\nimport { getFrontendHTML, getWorldHTML } from \"./frontend.ts\";\nimport { seedKnowledge } from \"./api/knowledge_seed.ts\";\nimport { resolveSession } from \"./api/session.ts\";\n\n// Foundation tenant context: a session resolves to a TenantCtx; absent one we fall back to the\n// system/default SYSTEM_CTX (imported from db.ts, typed as TenantCtx) so all existing\n// (t_default-backfilled) data keeps working exactly as today.\n\nlet initialized = false;\n\n// Shared-secret gate. Set APP_TOKEN in the val's environment. Every /api/* route\n// requires `Authorization: Bearer <APP_TOKEN>` (or `?token=` for download links),\n// EXCEPT the public paths below. Fail-closed: if APP_TOKEN is unset, data routes 503.\nconst APP_TOKEN = (Deno.env.get(\"APP_TOKEN\") || \"\").trim();\n\n// Auth ENABLED (Phase 3): /api/* requires a valid nexus_session cookie OR the APP_TOKEN bearer\n// (recovery hatch). Public paths (app modules, /api/auth/*, /api/login/*, /api/health) stay open so\n// the login screen always loads. Verified: owner session authorizes, anonymous → 401 → login screen.\nconst AUTH_DISABLED = false;\n\n// Public /api paths that must stay reachable without the app token:\n// - /api/app-* : the frontend's own JS modules (static code, no secrets; loaded by <script>/import)\n// - /api/auth/* : OAuth start + callback (browser redirect can't carry a header; protected by OAuth state)\n// - /api/health : liveness probe\n// - Wave-2 anonymous marketing surfaces (the only intentionally-unauthed business endpoints):\n// POST /api/marketing/forms/:id/submit : public lead-capture form submit. SAFE because\n// submitForm() never trusts the session — it resolves the owning tenant FROM the form id\n// (system/unscoped SELECT by id) and writes ONLY to that tenant; honeypot + rate-limit gate bots.\n// GET /api/marketing/p/:slug : public landing-page render. SAFE because renderLandingPage()\n// resolves the page BY SLUG across tenants and only serves it when published; read-only.\n// Both still flow through tenantStore.run with SYSTEM_CTX; the handlers carry the resolved owning\n// tenant_id explicitly, so a public caller can never read/write another tenant beyond the matched record.\nconst PUBLIC_FORM_SUBMIT_RE = /^\\/api\\/marketing\\/forms\\/[^/]+\\/submit$/;\nconst PUBLIC_LANDING_RENDER_RE = /^\\/api\\/marketing\\/p\\/[^/]+$/;\nfunction isPublicApiPath(pathname: string): boolean {\n if (pathname.startsWith(\"/api/app-\")) return true;\n if (pathname.startsWith(\"/api/auth/\")) return true;\n // Identity-only OAuth login start + callbacks: browser redirects can't carry a bearer header.\n if (pathname.startsWith(\"/api/login/\")) return true;\n if (pathname === \"/api/health\") return true;\n // Anonymous marketing capture + landing render (tenant resolved from the record, not the session).\n if (PUBLIC_FORM_SUBMIT_RE.test(pathname)) return true;\n if (PUBLIC_LANDING_RENDER_RE.test(pathname)) return true;\n return false;\n}\n\nfunction safeEqual(a: string, b: string): boolean {\n if (a.length !== b.length) return false;\n let r = 0;\n for (let i = 0; i < a.length; i++) r |= a.charCodeAt(i) ^ b.charCodeAt(i);\n return r === 0;\n}\n\nfunction isAuthorized(req: Request, url: URL): boolean {\n if (!APP_TOKEN) return false;\n const header = req.headers.get(\"Authorization\") || \"\";\n const bearer = header.startsWith(\"Bearer \") ? header.slice(7).trim() : \"\";\n const provided = bearer || (url.searchParams.get(\"token\") || \"\").trim();\n return provided.length > 0 && safeEqual(provided, APP_TOKEN);\n}\n\nexport default async function(req: Request): Promise<Response> {\n if (!initialized) {\n await initDB();\n initialized = true;\n // Part 4 / W2: seed the growth-model + math knowledge packs (idempotent, version-gated).\n // Fire-and-forget so it can never block or break boot.\n seedKnowledge().catch(() => {});\n }\n\n const url = new URL(req.url);\n const corsHeaders = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, PUT, DELETE, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, Authorization\",\n };\n const jsonHeaders = { \"Content-Type\": \"application/json\", ...corsHeaders };\n\n if (req.method === \"OPTIONS\") {\n return new Response(null, { status: 204, headers: corsHeaders });\n }\n\n if (url.pathname.startsWith(\"/api/\")) {\n // Resolve the caller's session ONCE into a TenantCtx (or null). A non-null session is\n // authorization in its own right; APP_TOKEN remains a fallback/recovery hatch for callers\n // (e.g. /world, scripts) that present a bearer instead of a cookie. Fall back to the\n // system/default context so all existing (t_default-backfilled) data keeps working as today.\n const sessionCtx = await resolveSession(req);\n const authed = !!sessionCtx || isAuthorized(req, url);\n const ctx = sessionCtx || SYSTEM_CTX;\n\n if (!AUTH_DISABLED && !isPublicApiPath(url.pathname) && !authed) {\n return new Response(JSON.stringify({ error: \"Unauthorized\" }), { status: 401, headers: jsonHeaders });\n }\n // Phase D global READ-ONLY guard: while the master is impersonating (\"view as tenant\"), block every\n // tenant-data write. Only GETs, the platform routes (so the master can POST the exit route + controls),\n // and /api/auth/* (so /api/auth/me keeps working) are allowed through; everything else is 403.\n if (\n ctx.impersonating &&\n req.method !== \"GET\" &&\n !url.pathname.startsWith(\"/api/platform/\") &&\n !url.pathname.startsWith(\"/api/auth/\")\n ) {\n return new Response(\n JSON.stringify({ error: \"Read-only while viewing as a tenant — exit impersonation to make changes.\" }),\n { status: 403, headers: jsonHeaders },\n );\n }\n // Run the data handler inside the resolved tenant scope so every business query sees currentCtx().\n return tenantStore.run(ctx, () => handleRequest(req, url));\n }\n\n // Part 10: the 3D Agent World — a second front-end skin (director chat + agents + 3D office)\n // over the SAME backend. MUST branch BEFORE the SPA fall-through (which catches every non-/api path).\n if (url.pathname === \"/world\") {\n return new Response(getWorldHTML(), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\", ...corsHeaders },\n });\n }\n\n // Per-tab deep links: each SPA view gets a REAL, bookmarkable URL (`/dashboard`, `/sales`, …)\n // that serves the exact same SPA shell as \"/\". The client router reads the path on boot and\n // opens the matching view. Placed AFTER /api/* (returns above) and /world so it never shadows\n // those; the jsModule routes all live under /api/ so they're unaffected too.\n const SPA_VIEW_IDS = new Set([\n \"dashboard\", \"objectives\", \"experiments\", \"marketing\", \"sales\", \"campaigns\",\n \"agents\", \"approvals\", \"calendar\", \"analytics\", \"workspace\", \"knowledge\",\n \"playbooks\", \"tasks\", \"settings\", \"platform\",\n ]);\n if (SPA_VIEW_IDS.has(url.pathname.slice(1))) {\n return new Response(getFrontendHTML(), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\", ...corsHeaders },\n });\n }\n\n return new Response(getFrontendHTML(), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\", ...corsHeaders },\n });\n}\n",[192],"b411dbce-5e66-11f1-a5c9-1607ee4eb77e","frontend_world_ui.ts","1d515596-5da0-11f1-98b2-1607ee4eb77e",889,["D",1780393062576],6,"// frontend_world_ui.ts — the HTML overlay module for the Agent World (\"/world\").\n//\n// getWorldUIJS() returns ONE backtick-delimited browser ES-module (served at /api/app-world-ui).\n// It exports createUI(world, office, opts) which builds the DOM overlay inside #world-root:\n// - LARGE, detailed speech bubbles projected from each avatar head (camera.project each frame)\n// - a colored Team panel with live status (running=green pulse / completed=blue / failed=red / idle=grey)\n// - a Director chat bar (bottom) whose send calls opts.onChat (the entry posts to /api/chat)\n// - an Approvals toast (top-right, auto-dismiss ~5s)\n// - an empty-state \"no agents yet\" card\n//\n// API returned by createUI:\n// { mount(rootEl), updateBubbles(entries), teamPanel(list), toast(msg), emptyState(show), onChat(handler) }\n//\n// FOOTGUNS (must hold): NO TS annotations inside the returned string; NO unescaped backticks or\n// ${...} inside it (plain string concat everywhere); emojis as \\uXXXX escapes. Placement-style\n// values use deterministic index hashes only — no Math.random / Date in layout. (Runtime ambient\n// jitter, if any, may use the browser PRNG.) Keep this file well under 80KB.\n\nexport function getWorldUIJS(): string {\n return `\nimport * as THREE from 'three';\n\n// ---------------------------------------------------------------------------\n// Shared palette + helpers (kept in agreement with the other world modules).\n// ---------------------------------------------------------------------------\nvar DIRECTOR_COLOR = '#4285F4';\nvar MEMBER_COLORS = ['#34A853','#FBBC05','#EA4335','#F59E0B','#40D5AD','#E64347','#E643C5','#7CE630','#5E888E'];\nvar STATUS_RUNNING = '#34A853';\nvar STATUS_FAILED = '#EA4335';\nvar STATUS_COMPLETED = '#4285F4';\nvar STATUS_IDLE = '#9aa3b2';\n\nfunction memberColorHex(i) {\n var L = MEMBER_COLORS.length;\n return MEMBER_COLORS[(((i % L) + L) % L)];\n}\n\n// Coerce ANY value to a safe display string — never \"[object Object]\".\n// Strings/numbers/booleans pass through; objects yield a text field if one exists,\n// else a compact JSON.stringify(...) slice; arrays join their stringified items.\n// This is the single choke point every String(x)/trunc(x) that might receive an\n// object should go through (bubbles, previews, inspect popover, tasks-done list).\nfunction textOf(v) {\n if (v == null) return '';\n var t = typeof v;\n if (t === 'string') return v;\n if (t === 'number' || t === 'boolean') return String(v);\n if (t === 'function') return '';\n if (Array.isArray(v)) {\n var parts = [];\n for (var i = 0; i < v.length && i < 12; i++) {\n var p = textOf(v[i]);\n if (p) parts.push(p);\n }\n return parts.join(', ');\n }\n if (t === 'object') {\n // Prefer a human text field if the object carries one.\n var keys = ['text', 'content', 'message', 'preview', 'value', 'title',\n 'name', 'label', 'output', 'summary', 'description', 'detail'];\n for (var k = 0; k < keys.length; k++) {\n var f = v[keys[k]];\n if (typeof f === 'string' && f.trim() !== '') return f;\n if (typeof f === 'number' || typeof f === 'boolean') return String(f);\n }\n // No friendly field — fall back to compact JSON (never \"[object Object]\").\n try {\n var j = JSON.stringify(v);\n if (j && j !== '{}' && j !== 'null') return j.length > 300 ? j.slice(0, 300) + '\\\\u2026' : j;\n } catch (e) { /* circular / unserializable */ }\n return '';\n }\n return String(v);\n}\n\nfunction esc(s) {\n s = textOf(s);\n return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')\n .replace(/\"/g, '"').replace(/'/g, ''');\n}\nfunction trunc(s, n) {\n s = textOf(s).replace(/\\\\s+/g, ' ').trim();\n n = n || 40;\n if (s.length > n) s = s.slice(0, n - 1) + '\\\\u2026';\n return s;\n}\nfunction lower(s) { return textOf(s).toLowerCase().trim(); }\n\n// ---------------------------------------------------------------------------\n// Auth + activity fetch (self-contained: this module owns its own Bearer call so\n// it does not depend on the host frontend's apiJSON). Reads the same nexus_token\n// the rest of /world uses from localStorage and GETs the completed-runs feed for\n// one agent (so a click can list the work that agent has finished).\n// ---------------------------------------------------------------------------\nfunction nexusToken() {\n try { return localStorage.getItem('nexus_token') || ''; } catch (e) { return ''; }\n}\nfunction fetchAgentActivity(agentId, status, limit) {\n var qs = '/api/world/activity?agent_id=' + encodeURIComponent(String(agentId)) +\n (status ? '&status=' + encodeURIComponent(status) : '') +\n '&limit=' + (limit || 8);\n var headers = {};\n var tok = nexusToken();\n if (tok) headers['Authorization'] = 'Bearer ' + tok;\n return fetch(qs, { headers: headers }).then(function (res) {\n if (!res || !res.ok) return [];\n return res.json().then(function (data) {\n return (data && Array.isArray(data.runs)) ? data.runs : [];\n }, function () { return []; });\n }, function () { return []; });\n}\n\n// A human \"when\" for a run, from its finished_at / started_at ISO timestamp.\n// Relative (\"3m ago\" / \"2h ago\" / \"yesterday\") for recent, else a short date.\nfunction whenOf(run) {\n if (!run) return '';\n var iso = run.finished_at || run.started_at || '';\n if (!iso) return '';\n var t = Date.parse(iso);\n if (isNaN(t)) return '';\n var diff = Date.now() - t;\n if (diff < 0) diff = 0;\n var sec = Math.floor(diff / 1000);\n if (sec < 45) return 'just now';\n var min = Math.floor(sec / 60);\n if (min < 60) return min + 'm ago';\n var hr = Math.floor(min / 60);\n if (hr < 24) return hr + 'h ago';\n var day = Math.floor(hr / 24);\n if (day === 1) return 'yesterday';\n if (day < 7) return day + 'd ago';\n try { return new Date(t).toLocaleDateString(); } catch (e) { return day + 'd ago'; }\n}\n\n// A short title/preview for one completed run row in the \"Tasks done\" list.\n// Prefer the run output, then its input, then the last meaningful trace step.\nfunction runTitleOf(run) {\n if (!run) return '';\n var s = (textOf(run.output) || textOf(run.input) || '').replace(/\\\\s+/g, ' ').trim();\n if (s) return trunc(s, 96);\n var steps = traceStepsOf(run.trace);\n for (var i = steps.length - 1; i >= 0; i--) {\n var line = stepLine(steps[i]);\n if (line) return trunc(line, 96);\n }\n if (run.error) return '\\\\u26A0\\\\uFE0F ' + trunc(run.error, 80);\n return 'completed a task';\n}\n\n// Deterministic 0..1 hash from an integer seed (fract of sin*large) — no Math.random.\n// Used only for stable cosmetic offsets (never for randomness that must vary at runtime).\nfunction hash01(i) {\n var x = Math.sin(i * 12.9898 + 1.0) * 43758.5453;\n return x - Math.floor(x);\n}\n\n// Map an avatar status string to a swatch color + a short live word for the panel.\nfunction statusColorOf(status) {\n status = lower(status);\n if (status === 'running' || status === 'active' || status === 'pending' || status === 'in_progress') return STATUS_RUNNING;\n if (status === 'failed' || status === 'error') return STATUS_FAILED;\n if (status === 'completed' || status === 'done' || status === 'success' || status === 'succeeded') return STATUS_COMPLETED;\n return STATUS_IDLE;\n}\nfunction statusWordOf(status) {\n status = lower(status);\n if (status === 'running' || status === 'active' || status === 'pending' || status === 'in_progress') return 'working';\n if (status === 'failed' || status === 'error') return 'failed';\n if (status === 'completed' || status === 'done' || status === 'success' || status === 'succeeded') return 'completed';\n if (status === 'paused' || status === 'disabled') return 'paused';\n return 'idle';\n}\nfunction isRunning(status) { return statusWordOf(status) === 'working'; }\n\n// Per-agent hue: director-blue for the lead (index 0 / role matches), else cycle MEMBER_COLORS.\nfunction colorForRow(row, index) {\n if (row && row.colorHex) return row.colorHex;\n var role = lower(row && row.role || '');\n var name = lower(row && row.name || '');\n var isLead = (index === 0) || /director|lead/.test(role) || /director|lead/.test(name);\n if (isLead) return DIRECTOR_COLOR;\n return memberColorHex(index - 1);\n}\n\n// Parse an agent_run.trace (JSON string / array / {steps}/{director}) into a flat step list.\n// Defensive: any failure yields []. Each step is one of the backend shapes:\n// {t:'round',n,ts} | {t:'tool',name,args_preview,result_preview,ms,ts}\n// {t:'message',role,preview,ts} | {t:'director'|'agent'|'synthesis'|'approval',name,preview,note,ts}\nfunction traceStepsOf(trace) {\n if (typeof trace === 'string') { try { trace = JSON.parse(trace); } catch (e) { return []; } }\n if (Array.isArray(trace)) return trace;\n if (trace && Array.isArray(trace.steps)) return trace.steps;\n if (trace && Array.isArray(trace.director)) return trace.director;\n if (trace && trace.pipeline && Array.isArray(trace.pipeline)) return trace.pipeline;\n return [];\n}\n\n// Turn ONE trace step into a short live line (glyph + label, e.g. \"\\\\uD83D\\\\uDD27 prepare_post \\\\u2192 queued draft\").\n// Returns '' for steps that carry no meaningful text (so callers can skip backwards over them).\nfunction stepLine(s) {\n if (!s) return '';\n var t = lower(s.t);\n if (t === 'round') return ''; // bare round markers are not meaningful on their own\n // Coerce every preview-ish field to a display string up front, so the truthiness\n // checks below operate on resolved text (an object like {} must read as empty, and\n // a structured preview must never reach the DOM as \"[object Object]\").\n if (t === 'tool' || s.tool || s.name && (t === 'tool' || !t)) {\n var nm = textOf(s.name || s.tool || 'tool');\n var pv = textOf(s.result_preview) || textOf(s.preview) || textOf(s.args_preview) || '';\n if (nm && pv) return '\\\\uD83D\\\\uDD27 ' + trunc(nm, 30) + ' \\\\u2192 ' + trunc(pv, 70);\n if (nm) return '\\\\uD83D\\\\uDD27 ' + trunc(nm, 60);\n }\n if (t === 'message' || s.role === 'assistant') {\n var mp = textOf(s.preview) || textOf(s.message) || textOf(s.text) || textOf(s.content) || '';\n if (mp) return '\\\\uD83D\\\\uDCAC ' + trunc(mp, 84);\n }\n // Campaign/director step kinds carry their own name/preview/note.\n var dn = textOf(s.name) || textOf(s.agent) || '';\n var dp = textOf(s.preview) || textOf(s.note) || textOf(s.result_preview) || '';\n if (t === 'director' && (dp || dn)) return '\\\\uD83C\\\\uDF9B\\\\uFE0F ' + (dp ? trunc(dp, 80) : trunc(dn, 60));\n if (t === 'agent' && (dn || dp)) return '\\\\uD83E\\\\uDD16 ' + trunc(dn, 26) + (dp ? ' \\\\u2192 ' + trunc(dp, 60) : '');\n if (t === 'synthesis' && (dp || dn)) return '\\\\uD83D\\\\uDD00 ' + trunc(dp || dn, 80);\n if (t === 'approval' && (dp || dn)) return '\\\\u2705 ' + trunc(dp || dn, 80);\n if (dn && dp) return trunc(dn, 28) + ' \\\\u2192 ' + trunc(dp, 64);\n if (dp) return trunc(dp, 88);\n if (dn) return trunc(dn, 60);\n return '';\n}\n\n// The latest MEANINGFUL trace step of an entry's run, as a short live line. Because the entry\n// refreshes each poll (the backend streams the trace), this line updates live = a streaming trace.\nfunction previewLine(entry) {\n if (!entry) return '';\n var run = entry.run;\n if (!run) return '';\n var steps = traceStepsOf(run.trace);\n for (var i = steps.length - 1; i >= 0; i--) {\n var line = stepLine(steps[i]);\n if (line) return line;\n }\n if (run.error) return '\\\\u26A0\\\\uFE0F ' + trunc(run.error, 80);\n return '';\n}\n\n// Is this entry currently in a 1-to-1 talk (a handoff-walk pause facing another agent,\n// or any talk flag the agents module surfaces)? Defensive: tolerate several shapes.\nfunction inTalk(entry) {\n if (!entry) return false;\n if (entry.inTalk || entry.talking || entry.talkingWith) return true;\n var h = entry.handoff;\n if (h && (h.phase === 'talk' || h.talk === true)) return true;\n return false;\n}\n\n// The dad-joke / small-talk line to show in the bubble (from the agents module's\n// entry.sayLine). Returned only when the agent is FREE (idle/completed/none) or in a\n// 1-to-1 talk — i.e. not when it is heads-down on a running task. '' = no joke to show.\n// DECORATIVE vs REAL: a dad joke is purely cosmetic small-talk, NOT real agent work, so it\n// gets a distinct smiley glyph (\\\\uD83D\\\\uDE04) instead of the \\\\uD83D\\\\uDCAC trace-bubble glyph\n// that real reasoning/message previews use. fillBubble() additionally styles a joke body muted\n// + italic so it reads clearly as decorative chatter, never as a live trace step.\nfunction talkLineOf(entry) {\n if (!entry) return '';\n var line = textOf(entry.sayLine);\n if (line.trim() === '') return '';\n var st = statusWordOf(entry.status);\n var free = (st === 'idle' || st === 'completed' || st === 'paused');\n if (free || inTalk(entry)) return '\\\\uD83D\\\\uDE04 ' + trunc(line, 96);\n return '';\n}\n\n// Is this entry's CURRENT bubble body a decorative dad joke (vs real trace work)? The agents\n// module flags every dad-joke say-line with entry.sayIsJoke; a joke is only shown when the agent\n// is FREE / in a 1-to-1 talk (same gate as talkLineOf). Used by fillBubble() to apply the muted,\n// italic, decorative styling so jokes are visually distinct from real trace-preview bubbles.\nfunction isDecorativeJokeBody(entry) {\n if (!entry || !entry.sayIsJoke) return false;\n var line = textOf(entry.sayLine);\n if (line.trim() === '') return false;\n var st = statusWordOf(entry.status);\n if (st === 'working' || st === 'failed') return false; // real work / errors win over a joke\n var free = (st === 'idle' || st === 'completed' || st === 'paused');\n return free || inTalk(entry);\n}\n\n// The bubble BODY: prefer the agent's latest live trace step; otherwise a brief status/idle line.\n// Idle/no-run agents are roaming, so they get a free \"wandering\" line rather than a blank.\nfunction bodyLineOf(entry) {\n var st = statusWordOf(entry && entry.status);\n if (st === 'working') {\n var live = previewLine(entry);\n if (live) return live;\n return '\\\\uD83D\\\\uDD27 working on a task';\n }\n // FREE / talking agents: a dad joke from entry.sayLine beats the generic roaming line.\n var joke = talkLineOf(entry);\n if (joke && st !== 'failed') return joke;\n if (st === 'failed') {\n var run = entry && entry.run;\n if (run && run.error) return '\\\\u26A0\\\\uFE0F ' + trunc(run.error, 78);\n return '\\\\u26A0\\\\uFE0F last run failed';\n }\n if (st === 'completed') {\n var last = previewLine(entry);\n if (last) return last;\n return '\\\\u2705 finished its task';\n }\n if (st === 'paused') return '\\\\u23F8\\\\uFE0F paused';\n return '\\\\uD83D\\\\uDEB6 roaming \\\\u00B7 free for a task';\n}\n\n// ---------------------------------------------------------------------------\n// createUI factory.\n// ---------------------------------------------------------------------------\nexport function createUI(world, office, opts) {\n opts = opts || {};\n var rootEl = null;\n var chatHandler = (opts && typeof opts.onChat === 'function') ? opts.onChat : null;\n\n // DOM handles (filled in mount()).\n var panelEl = null; // team panel container\n var panelListEl = null; // team panel row list\n var panelCountEl = null; // agent count badge\n var bubbleLayer = null; // absolutely-positioned div the bubbles attach to\n var toastRegion = null; // top-right toast stack\n var emptyEl = null; // centered \"no agents yet\" card\n var chatInput = null; // director chat input\n var chatSend = null; // director chat send button\n var chatTranscript = null;// director chat transcript\n var mounted = false;\n\n // Bubble DOM nodes keyed by entry id (diffed — never full re-render).\n var bubbleNodes = {};\n // Scratch vector reused for projection each frame (no per-frame allocation).\n var _proj = new THREE.Vector3();\n\n // ---- DOM construction helpers -----------------------------------------\n function el(tag, cls, css) {\n var n = document.createElement(tag);\n if (cls) n.className = cls;\n if (css) n.style.cssText = css;\n return n;\n }\n\n // ---- mount -------------------------------------------------------------\n function mount(root) {\n if (mounted) return;\n rootEl = root || document.getElementById('world-root');\n if (!rootEl) return;\n mounted = true;\n\n // Inject the live-status pulse keyframes once (running dots breathe green).\n if (!document.getElementById('world-ui-style')) {\n var st = document.createElement('style');\n st.id = 'world-ui-style';\n st.textContent =\n '@keyframes worldDotPulse{0%{box-shadow:0 0 4px currentColor;opacity:.85;}' +\n '50%{box-shadow:0 0 11px currentColor;opacity:1;}100%{box-shadow:0 0 4px currentColor;opacity:.85;}}' +\n '.world-dot-pulse{animation:worldDotPulse 1.3s ease-in-out infinite;}';\n document.head.appendChild(st);\n }\n\n // Bubble layer: a transparent, click-through plane the projected bubbles live in.\n bubbleLayer = el('div', null, 'position:absolute;inset:0;z-index:18;pointer-events:none;overflow:hidden;');\n bubbleLayer.id = 'world-bubble-layer';\n rootEl.appendChild(bubbleLayer);\n\n // Toast region: top-right column.\n toastRegion = el('div', null, 'position:fixed;top:64px;right:14px;z-index:34;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;');\n toastRegion.id = 'world-toast-region';\n rootEl.appendChild(toastRegion);\n\n // NOTE: the dashboard (frontend_world_dash.ts) now owns the Team roster (MEMBER ROSTER panel)\n // and the Director input (top bar). This in-scene UI module is ONLY the toast region + the\n // bubble/chip layer over the canvas — building the old top-right Team panel + a second chat\n // bar here would overlap the dashboard's right panel + duplicate the input. So: skip them.\n buildEmptyState();\n buildInspect();\n // Click an agent in the 3D -> show its info popover (the bubble layer is click-through).\n var cv = document.getElementById('world-canvas');\n if (cv) cv.addEventListener('click', onCanvasClick);\n }\n\n // ---- click-an-agent -> info popover (raycast into the avatar meshes) ----\n var _ray = new THREE.Raycaster();\n var _mouse = new THREE.Vector2();\n var inspectEl = null;\n var activeId = null;\n\n // Entry calls ui.setActive(runningId) — remember it so the bubble can emphasize the speaker.\n function setActive(id) { activeId = (id == null ? null : String(id)); }\n\n function buildInspect() {\n if (inspectEl || !rootEl) return;\n inspectEl = el('div', 'glass', 'position:absolute;left:14px;bottom:14px;width:300px;max-width:44vw;max-height:min(70vh,520px);overflow-y:auto;border-radius:14px;padding:13px 15px;z-index:30;color:#1f2430;display:none;box-shadow:0 12px 40px rgba(20,30,60,0.18);pointer-events:auto;');\n inspectEl.id = 'world-inspect';\n rootEl.appendChild(inspectEl);\n }\n\n function entryAtPointer(ev) {\n if (!world || !world.camera || !lastEntries || !lastEntries.length) return null;\n var cv = ev.currentTarget || document.getElementById('world-canvas');\n if (!cv) return null;\n var rect = cv.getBoundingClientRect();\n if (!rect.width || !rect.height) return null;\n _mouse.x = ((ev.clientX - rect.left) / rect.width) * 2 - 1;\n _mouse.y = -((ev.clientY - rect.top) / rect.height) * 2 + 1;\n _ray.setFromCamera(_mouse, world.camera);\n var targets = [];\n for (var i = 0; i < lastEntries.length; i++) { if (lastEntries[i] && lastEntries[i].object3D) targets.push(lastEntries[i].object3D); }\n var hits = _ray.intersectObjects(targets, true);\n if (!hits.length) return null;\n var obj = hits[0].object;\n for (var k = 0; k < lastEntries.length; k++) {\n var rootObj = lastEntries[k].object3D, p = obj;\n while (p) { if (p === rootObj) return lastEntries[k]; p = p.parent; }\n }\n return null;\n }\n\n function onCanvasClick(ev) {\n var found = entryAtPointer(ev);\n if (found) showInspect(found); else hideInspect();\n }\n\n // Monotonic click token: a stale activity fetch (user clicked another agent first)\n // never overwrites the popover that is now showing.\n var _inspectSeq = 0;\n\n // The \"currently running\" block (only shown when the agent is mid-run).\n function currentRunHTML(run, hue) {\n if (!run) return '';\n var line = previewLine({ run: run, status: 'running' });\n if (!line) line = '\\\\uD83D\\\\uDD27 working on a task';\n return '<div style=\"font-size:10.5px;font-weight:700;color:' + hue + ';text-transform:uppercase;letter-spacing:.5px;margin:11px 0 5px;\">Working now</div>' +\n '<div style=\"font-size:11.5px;line-height:1.4;color:#39414f;background:rgba(52,168,83,0.10);border:1px solid rgba(52,168,83,0.22);border-radius:9px;padding:7px 9px;white-space:normal;word-break:break-word;\">' + esc(line) + '</div>';\n }\n\n // The \"Tasks done\" list: the agent's last few COMPLETED runs (title/preview + when).\n function tasksDoneHTML(runs) {\n if (!runs || !runs.length) {\n return '<div style=\"font-size:10.5px;font-weight:700;color:#5a6273;text-transform:uppercase;letter-spacing:.5px;margin:11px 0 5px;\">Tasks done</div>' +\n '<div style=\"font-size:11px;color:#8a93a3;font-style:italic;\">No completed tasks yet.</div>';\n }\n var html = '<div style=\"font-size:10.5px;font-weight:700;color:#5a6273;text-transform:uppercase;letter-spacing:.5px;margin:11px 0 5px;\">Tasks done ' +\n '<span style=\"color:#9aa3b2;font-weight:600;\">(' + runs.length + ')</span></div>' +\n '<div style=\"display:flex;flex-direction:column;gap:6px;\">';\n for (var i = 0; i < runs.length; i++) {\n var r = runs[i] || {};\n var when = whenOf(r);\n html += '<div style=\"font-size:11.5px;line-height:1.4;color:#39414f;background:rgba(20,30,60,0.04);border-radius:9px;padding:7px 9px;\">' +\n '<div style=\"display:flex;align-items:flex-start;gap:6px;\">' +\n '<span style=\"color:#4285F4;flex:0 0 auto;line-height:1.4;\">\\\\u2705</span>' +\n '<span style=\"flex:1;min-width:0;white-space:normal;word-break:break-word;\">' + esc(runTitleOf(r)) + '</span>' +\n '</div>' +\n (when ? '<div style=\"font-size:10px;color:#9aa3b2;margin-top:3px;\">' + esc(when) + '</div>' : '') +\n '</div>';\n }\n html += '</div>';\n return html;\n }\n\n function showInspect(entry) {\n buildInspect();\n if (!inspectEl || !entry) return;\n var seq = ++_inspectSeq;\n activeId = (entry.id == null ? null : String(entry.id));\n var a = entry.agent || {};\n var name = a.name || String(entry.id);\n var role = entry.role || a.role || 'Agent';\n var hue = entry.colorHex || '#4285F4';\n var status = statusWordOf(entry.status);\n var run = entry.run || null;\n var running = (status === 'working');\n var detail = '';\n if (run) {\n // textOf each candidate (never let an object short-circuit into \"[object Object]\").\n var prev = (textOf(run.output) || textOf(run.preview) || textOf(run.input) || '').replace(/\\\\s+/g, ' ').trim();\n if (prev.length > 240) prev = prev.slice(0, 239) + '\\\\u2026';\n detail = prev;\n }\n var extra = '';\n if (a.goal) extra += '<div style=\"font-size:10.5px;color:#5a6273;margin-top:7px;\"><b>Goal</b> ' + esc(trunc(a.goal, 110)) + '</div>';\n if (a.channel) extra += '<div style=\"font-size:10.5px;color:#5a6273;margin-top:2px;\"><b>Channel</b> ' + esc(a.channel) + '</div>';\n inspectEl.innerHTML =\n '<div style=\"display:flex;align-items:center;gap:8px;margin-bottom:7px;position:sticky;top:-13px;margin:-13px -15px 7px;padding:13px 15px 7px;background:rgba(255,255,255,0.96);z-index:1;\">' +\n '<span style=\"width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:' + hue + ';box-shadow:0 0 8px ' + hue + ';\"></span>' +\n '<span style=\"font-weight:800;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\">' + esc(name) + '</span>' +\n '<button id=\"world-inspect-x\" style=\"border:none;background:transparent;cursor:pointer;font-size:17px;color:#5a6273;line-height:1;padding:0 2px;\">\\\\u00D7</button>' +\n '</div>' +\n '<div style=\"font-size:11px;color:#5a6273;margin-bottom:8px;\">' + esc(role) + ' \\\\u00B7 <b style=\"color:' + hue + ';\">' + esc(status) + '</b></div>' +\n (detail\n ? '<div style=\"font-size:11.5px;line-height:1.45;color:#39414f;background:rgba(20,30,60,0.04);border-radius:9px;padding:8px 10px;max-height:150px;overflow:auto;white-space:pre-wrap;\">' + esc(detail) + '</div>'\n : '<div style=\"font-size:11px;color:#8a93a3;font-style:italic;\">No recent activity yet.</div>') +\n extra +\n (running ? currentRunHTML(run, hue) : '') +\n '<div id=\"world-inspect-done\"><div style=\"font-size:10.5px;font-weight:700;color:#5a6273;text-transform:uppercase;letter-spacing:.5px;margin:11px 0 5px;\">Tasks done</div>' +\n '<div style=\"font-size:11px;color:#9aa3b2;\">Loading\\\\u2026</div></div>';\n inspectEl.style.display = 'block';\n inspectEl.scrollTop = 0;\n var xb = document.getElementById('world-inspect-x');\n if (xb) xb.addEventListener('click', hideInspect);\n\n // Async: fetch the agent's completed runs and fill in the \"Tasks done\" list.\n // Guarded by seq so a later click wins; skip when there's no agent id to query.\n if (entry.id == null) {\n var slot0 = document.getElementById('world-inspect-done');\n if (slot0) slot0.innerHTML = tasksDoneHTML([]);\n return;\n }\n fetchAgentActivity(entry.id, 'completed', 6).then(function (runs) {\n if (seq !== _inspectSeq || !inspectEl || inspectEl.style.display === 'none') return;\n var slot = document.getElementById('world-inspect-done');\n if (slot) slot.innerHTML = tasksDoneHTML(runs.slice(0, 5));\n }, function () {\n if (seq !== _inspectSeq) return;\n var slotE = document.getElementById('world-inspect-done');\n if (slotE) slotE.innerHTML = tasksDoneHTML([]);\n });\n }\n function hideInspect() { if (inspectEl) inspectEl.style.display = 'none'; }\n\n // ---- Team panel (top-right, below any app top bar) ---------------------\n function buildTeamPanel() {\n panelEl = el('div', 'glass', 'position:fixed;top:66px;right:14px;width:270px;max-height:calc(100vh - 240px);overflow-y:auto;border-radius:14px;padding:12px;z-index:24;color:#1f2430;');\n panelEl.id = 'world-team-panel';\n var head = el('div', null, 'display:flex;align-items:center;gap:8px;margin-bottom:9px;');\n head.innerHTML =\n '<span style=\"font-weight:700;font-size:12px;color:#4285F4;text-transform:uppercase;letter-spacing:.6px;\">Team</span>' +\n '<span style=\"flex:1\"></span>' +\n '<span id=\"world-team-count\" style=\"font-size:11px;font-weight:700;color:#5a6273;background:rgba(66,133,244,0.12);border-radius:8px;padding:2px 8px;\">0</span>';\n panelEl.appendChild(head);\n panelListEl = el('div', null, '');\n panelListEl.id = 'world-team-list';\n panelEl.appendChild(panelListEl);\n rootEl.appendChild(panelEl);\n panelCountEl = head.querySelector('#world-team-count');\n }\n\n // Re-render the team list (one row per agent). Diff-light: full innerHTML rebuild is cheap\n // for a panel of N rows and keeps the click wiring simple; only called on roster change.\n function teamPanel(list) {\n if (!panelListEl) return;\n list = list || [];\n if (panelCountEl) panelCountEl.textContent = String(list.length);\n if (!list.length) {\n panelListEl.innerHTML = '<div style=\"font-size:12px;color:#9aa3b2;padding:8px 2px;\">No agents yet</div>';\n return;\n }\n var html = '';\n for (var i = 0; i < list.length; i++) {\n var a = list[i] || {};\n var hue = colorForRow(a, i);\n var status = a.status || 'idle';\n var dot = statusColorOf(status);\n var word = statusWordOf(status);\n var pulse = isRunning(status) ? 'world-dot-pulse' : '';\n var role = a.role ? a.role : (a.department || a.workspace || '');\n html += '<button class=\"world-team-row\" data-id=\"' + esc(a.id) + '\" ' +\n 'style=\"display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:none;border-radius:9px;padding:7px 8px;cursor:pointer;color:#1f2430;\">' +\n '<span class=\"' + pulse + '\" style=\"width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:' + hue + ';box-shadow:0 0 8px ' + dot + ';\"></span>' +\n '<span style=\"flex:1;min-width:0;\">' +\n '<span style=\"display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">' + esc(a.name || a.id) + '</span>' +\n '<span style=\"display:block;font-size:11px;color:#7a818f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">' +\n esc(role) + (role ? ' \\\\u00B7 ' : '') +\n '<span style=\"color:' + dot + ';font-weight:700;\">' + esc(word) + '</span>' +\n '</span>' +\n '</span>' +\n '</button>';\n }\n panelListEl.innerHTML = html;\n var rows = panelListEl.querySelectorAll('.world-team-row');\n for (var r = 0; r < rows.length; r++) {\n rows[r].addEventListener('mouseenter', function () { this.style.background = 'rgba(66,133,244,0.10)'; });\n rows[r].addEventListener('mouseleave', function () { this.style.background = 'transparent'; });\n rows[r].addEventListener('click', function () { focusRow(this.getAttribute('data-id')); });\n }\n }\n\n // Clicking a team row spotlights that agent (if we can find its head position).\n function focusRow(id) {\n if (!id) return;\n var ents = lastEntries;\n if (!ents) return;\n for (var i = 0; i < ents.length; i++) {\n if (String(ents[i].id) === String(id)) {\n try {\n var head = ents[i].headWorldPos ? ents[i].headWorldPos() : null;\n if (head && world && typeof world.spotlightOn === 'function') world.spotlightOn(head);\n } catch (e) { /* spotlight optional */ }\n return;\n }\n }\n }\n\n // ---- Director chat bar (bottom-center) --------------------------------\n function buildChatBar() {\n var bar = el('div', 'glass', 'position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:min(680px,calc(100vw - 28px));border-radius:16px;padding:12px;z-index:24;color:#1f2430;');\n bar.id = 'world-chat-bar';\n var head = el('div', null, 'display:flex;align-items:center;gap:8px;margin-bottom:8px;');\n head.innerHTML =\n '<span style=\"width:9px;height:9px;border-radius:50%;background:#4285F4;box-shadow:0 0 8px #4285F4;\"></span>' +\n '<span style=\"font-weight:700;font-size:13px;\">Director</span>' +\n '<span style=\"font-size:11px;color:#7a818f;\">\\\\u00B7 direct the team; create agents or campaigns</span>';\n bar.appendChild(head);\n\n chatTranscript = el('div', null, 'max-height:170px;overflow-y:auto;display:none;flex-direction:column;gap:8px;margin-bottom:8px;padding-right:4px;');\n chatTranscript.id = 'world-chat-transcript';\n bar.appendChild(chatTranscript);\n\n var row = el('div', null, 'display:flex;gap:8px;');\n chatInput = el('input', null, 'flex:1;background:rgba(255,255,255,0.7);border:1px solid rgba(20,30,60,0.12);border-radius:10px;padding:10px 12px;color:#1f2430;font-size:14px;outline:none;');\n chatInput.type = 'text';\n chatInput.placeholder = 'Direct your agents\\\\u2026';\n chatSend = el('button', null, 'background:#4285F4;border:none;border-radius:10px;padding:0 18px;color:#fff;font-weight:700;cursor:pointer;font-size:14px;');\n chatSend.textContent = 'Send';\n row.appendChild(chatInput); row.appendChild(chatSend);\n bar.appendChild(row);\n rootEl.appendChild(bar);\n\n chatSend.addEventListener('click', function () { submitChat(); });\n chatInput.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); submitChat(); } });\n }\n\n function appendMsg(role, text) {\n if (!chatTranscript) return null;\n chatTranscript.style.display = 'flex';\n var wrap = el('div', null, '');\n var isUser = (role === 'user');\n wrap.style.cssText = 'max-width:88%;align-self:' + (isUser ? 'flex-end' : 'flex-start') + ';' +\n 'background:' + (isUser ? 'rgba(66,133,244,0.16)' : 'rgba(20,30,60,0.05)') + ';' +\n 'border:1px solid rgba(20,30,60,0.08);border-radius:12px;padding:8px 11px;font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word;color:#1f2430;';\n wrap.textContent = text;\n chatTranscript.appendChild(wrap);\n chatTranscript.scrollTop = chatTranscript.scrollHeight;\n return wrap;\n }\n\n var chatBusy = false;\n function submitChat() {\n if (chatBusy || !chatInput) return;\n var msg = (chatInput.value || '').trim();\n if (!msg) return;\n chatInput.value = '';\n chatBusy = true;\n appendMsg('user', msg);\n var thinking = appendMsg('assistant', '\\\\u2026');\n var handler = chatHandler;\n var done = function (reply) {\n if (thinking) thinking.textContent = (reply == null || reply === '') ? '(no response)' : String(reply);\n chatBusy = false;\n };\n var fail = function (e) {\n if (thinking) thinking.textContent = 'Error: ' + (e && e.message ? e.message : String(e));\n chatBusy = false;\n };\n try {\n var out = handler ? handler(msg) : Promise.resolve('');\n if (out && typeof out.then === 'function') out.then(done, fail);\n else done(out);\n } catch (e) { fail(e); }\n }\n\n // Register / override the chat submit handler. handler(text) is called on send and may\n // return a string or a Promise<string> (its resolved value is shown as the reply).\n function onChat(handler) {\n if (typeof handler === 'function') chatHandler = handler;\n return chatHandler;\n }\n\n // ---- Empty-state card --------------------------------------------------\n function buildEmptyState() {\n emptyEl = el('div', 'glass', 'position:fixed;top:48%;left:50%;transform:translate(-50%,-50%);max-width:360px;text-align:center;padding:22px 26px;border-radius:16px;z-index:16;color:#1f2430;display:none;pointer-events:none;');\n emptyEl.id = 'world-empty';\n emptyEl.innerHTML =\n '<div style=\"font-size:30px;margin-bottom:8px;\">\\\\uD83E\\\\uDD16</div>' +\n '<div style=\"font-weight:700;font-size:16px;margin-bottom:6px;\">No agents yet</div>' +\n '<div style=\"font-size:13px;line-height:1.5;color:#5a6472;\">Use the Director chat below to build your team. Each agent appears here and the room scales to fit them.</div>';\n rootEl.appendChild(emptyEl);\n }\n function emptyState(show) {\n if (emptyEl) emptyEl.style.display = show ? 'block' : 'none';\n }\n\n // ---- Toast (top-right, auto-dismiss ~5s) ------------------------------\n function toast(msg) {\n if (!toastRegion) return;\n var t = el('div', 'glass', 'pointer-events:auto;padding:11px 16px;border-radius:12px;font-size:14px;font-weight:600;color:#1f2430;' +\n 'background:rgba(255,255,255,0.96);border:1px solid rgba(52,168,83,0.45);' +\n 'box-shadow:0 12px 30px rgba(20,30,60,0.22);opacity:0;transform:translateX(12px);transition:opacity .3s, transform .3s;' +\n 'display:flex;align-items:center;gap:8px;max-width:320px;');\n t.innerHTML = '<span style=\"width:9px;height:9px;border-radius:50%;background:#34A853;box-shadow:0 0 8px #34A853;flex:0 0 auto;\"></span><span>' + esc(msg) + '</span>';\n toastRegion.appendChild(t);\n requestAnimationFrame(function () { t.style.opacity = '1'; t.style.transform = 'translateX(0)'; });\n setTimeout(function () {\n t.style.opacity = '0'; t.style.transform = 'translateX(12px)';\n setTimeout(function () { if (t.parentNode) t.parentNode.removeChild(t); }, 340);\n }, 5000);\n }\n\n // ---- Speech bubbles (projected from each avatar head every frame) -----\n var lastEntries = null;\n\n // Build one bubble DOM node (reused across frames; content updated in place).\n function makeBubbleNode() {\n var box = el('div', 'glass', 'position:absolute;left:0;top:0;z-index:18;pointer-events:none;' +\n 'min-width:160px;max-width:280px;padding:10px 12px;border-radius:13px;font-size:12px;line-height:1.4;' +\n 'color:#1f2430;background:rgba(255,255,255,0.96);border:1px solid rgba(20,30,60,0.12);' +\n 'box-shadow:0 10px 26px rgba(20,30,60,0.20);' +\n 'transform:translate(-50%,-100%);opacity:0;transition:opacity .2s;will-change:left,top;display:none;');\n // Header line (dot + name + role) and a body (status / preview) and a downward pointer.\n var headRow = el('div', 'b-head', 'display:flex;align-items:center;gap:7px;margin-bottom:3px;');\n headRow.innerHTML =\n '<span class=\"b-dot\" style=\"width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#4285F4;box-shadow:0 0 7px #4285F4;\"></span>' +\n '<span class=\"b-name\" style=\"font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px;\"></span>' +\n '<span class=\"b-role\" style=\"font-size:11px;color:#7a818f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px;\"></span>';\n var bodyRow = el('div', 'b-status', 'font-size:12px;color:#3a4150;margin-top:1px;');\n var prevRow = el('div', 'b-prev', 'font-size:11px;color:#5a6273;margin-top:4px;display:none;white-space:normal;word-break:break-word;');\n var ptr = el('div', 'b-ptr', 'position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:0;height:0;' +\n 'border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid rgba(255,255,255,0.96);');\n box.appendChild(headRow); box.appendChild(bodyRow); box.appendChild(prevRow); box.appendChild(ptr);\n box._dot = headRow.querySelector('.b-dot');\n box._name = headRow.querySelector('.b-name');\n box._role = headRow.querySelector('.b-role');\n box._body = bodyRow;\n box._prev = prevRow;\n box._lastKey = '';\n bubbleLayer.appendChild(box);\n return box;\n }\n\n // Update the textual content of a bubble (diffed via a composite key so we only touch the DOM\n // when something actually changed).\n function fillBubble(box, entry) {\n var hue = entry.colorHex || '#4285F4';\n var name = entry.agent && (entry.agent.name || entry.agent.id) || entry.id || 'agent';\n var role = (entry.role && lower(entry.role) === 'director') ? 'director' : (entry.role || (entry.agent && entry.agent.role) || '');\n var running = isRunning(entry.status);\n // BODY = the agent's latest live trace step (streams as the entry refreshes each poll);\n // falls back to a brief status/idle line when there's no parseable trace.\n var bodyLine = bodyLineOf(entry);\n // Is this body a DECORATIVE dad joke (vs a real trace/work line)? Jokes get a clearly\n // cosmetic look (muted + italic) so they never read as live agent work. talkLineOf()\n // already prefixes the joke with the smiley glyph (\\\\uD83D\\\\uDE04) instead of \\\\uD83D\\\\uDCAC.\n var jokeBody = isDecorativeJokeBody(entry);\n // Secondary line: while running, a faint \"working\" hint under the streaming step.\n var prev = (running && previewLine(entry)) ? '\\\\uD83D\\\\uDD27 working\\\\u2026' : '';\n var key = hue + '|' + name + '|' + role + '|' + bodyLine + '|' + prev + '|' + (jokeBody ? 'j' : '-');\n if (box._lastKey === key) return;\n box._lastKey = key;\n box._dot.style.background = hue;\n box._dot.style.boxShadow = '0 0 7px ' + hue;\n if (running) { if (box._dot.className.indexOf('world-dot-pulse') < 0) box._dot.className = 'b-dot world-dot-pulse'; }\n else { box._dot.className = 'b-dot'; }\n box._name.textContent = trunc(name, 22);\n box._role.textContent = role ? ('\\\\u00B7 ' + trunc(role, 18)) : '';\n box._body.textContent = bodyLine;\n // DECORATIVE vs REAL styling: a dad joke reads muted + italic (cosmetic chatter); a real\n // trace/status line keeps the solid #3a4150 upright style. Reset explicitly each pass so a\n // reused bubble node never carries the joke look over into a later real-work line.\n if (jokeBody) { box._body.style.color = '#9aa3b2'; box._body.style.fontStyle = 'italic'; }\n else { box._body.style.color = '#3a4150'; box._body.style.fontStyle = 'normal'; }\n if (prev) { box._prev.style.display = 'block'; box._prev.textContent = prev; }\n else { box._prev.style.display = 'none'; box._prev.textContent = ''; }\n }\n\n // Project each entry's head to screen px and position its bubble. Reuse DOM nodes keyed by id;\n // create on first sight, remove on diff. Hide bubbles behind the camera (z>1) or off-screen.\n function updateBubbles(entries) {\n if (!bubbleLayer || !world || !world.camera) return;\n entries = entries || [];\n lastEntries = entries;\n var cam = world.camera;\n var rect = bubbleLayer.getBoundingClientRect();\n var w = rect.width || window.innerWidth;\n var h = rect.height || window.innerHeight;\n var seen = {};\n\n for (var i = 0; i < entries.length; i++) {\n var entry = entries[i];\n if (!entry || entry.id == null) continue;\n var id = String(entry.id);\n seen[id] = true;\n var box = bubbleNodes[id];\n if (!box) { box = makeBubbleNode(); bubbleNodes[id] = box; }\n\n var head = null;\n try { head = entry.headWorldPos ? entry.headWorldPos() : null; } catch (e) { head = null; }\n if (!head) {\n var o = entry.object3D;\n if (o && o.position) head = new THREE.Vector3(o.position.x, 1.5, o.position.z);\n }\n if (!head) { box.style.display = 'none'; box.style.opacity = '0'; continue; }\n\n _proj.set(head.x, head.y, head.z).project(cam);\n if (_proj.z > 1 || _proj.z < -1) { box.style.display = 'none'; box.style.opacity = '0'; continue; }\n var x = (_proj.x * 0.5 + 0.5) * w;\n var y = (-_proj.y * 0.5 + 0.5) * h;\n // Off-screen (with a small margin) -> hide rather than pin to the edge.\n if (x < -160 || x > w + 160 || y < -120 || y > h + 120) { box.style.display = 'none'; box.style.opacity = '0'; continue; }\n\n fillBubble(box, entry);\n box.style.display = 'block';\n // Lift the bubble a hair above the head; deterministic per-id micro-offset avoids exact overlap\n // when two heads project to nearly the same pixel.\n var lift = 14 + hash01(idHashSeed(id)) * 4;\n box.style.left = Math.round(x) + 'px';\n box.style.top = Math.round(y - lift) + 'px';\n box.style.opacity = '1';\n }\n\n // Remove bubbles for entries that vanished.\n for (var key in bubbleNodes) {\n if (!seen[key]) {\n var dead = bubbleNodes[key];\n if (dead && dead.parentNode) dead.parentNode.removeChild(dead);\n delete bubbleNodes[key];\n }\n }\n }\n\n // Stable integer seed from an id string (deterministic; for cosmetic micro-offsets only).\n function idHashSeed(id) {\n var s = 0;\n for (var i = 0; i < id.length; i++) s = (s * 31 + id.charCodeAt(i)) % 100000;\n return s + 1;\n }\n\n return {\n mount: mount,\n updateBubbles: updateBubbles,\n updateChips: updateBubbles, // entry calls updateChips() each frame -> renders the name+status bubbles\n setActive: setActive,\n showInspect: showInspect,\n hideInspect: hideInspect,\n teamPanel: teamPanel,\n toast: toast,\n emptyState: emptyState,\n onChat: onChat\n };\n}\n`;\n}\n",[200],"1e3fd93c-5e36-11f1-a723-1607ee4eb77e","frontend_world_scene.ts","1b97d5d6-5da0-11f1-89d4-1607ee4eb77e",814,["D",1780372195351],5,"// Part 10a: the SCENE module for the /world Agent-World page. This is the render core.\n// getWorldSceneJS() returns ONE backtick template-literal that is a browser ES-module exporting\n// createWorld(canvas).\n//\n// FAITHFUL PORT of the-delegation (core/Engine.ts + core/Stage.ts + constants.ts) — their exact\n// flat-but-clean look, ported from WebGPU/TSL to three r0.160 WebGL:\n// - Renderer: EVERY render-affecting setting is now EXPLICIT + deterministic (no platform-\n// conditional behaviour), so the output is consistent on Mac and Windows:\n// THREE.ColorManagement.enabled = true (explicit), outputColorSpace = SRGBColorSpace\n// (explicit), toneMapping = NoToneMapping + exposure 1 (explicit), shadowMap.enabled = true\n// with a FIXED shadowMap.type = PCFSoftShadowMap, antialias on. dpr = Math.min(dpr,2) (same\n// clamped formula on both platforms, re-applied on devicePixelRatio changes). NO\n// setClearColor (clear comes from scene.background). Canvas sizing is identical on both\n// platforms: ResizeObserver on #world-canvas-wrap -> resize() -> setSize(w,h,true).\n// - Scene: background = 0xFAFCFB (SCENE_BACKGROUND_COLOR). NO fog. NO environment/IBL.\n// - Lights: exactly two — AmbientLight(0xffffff, Math.PI) and a STATIC DirectionalLight\n// (0xffffff, 0.5*Math.PI) at (10,20,10) with a fixed 20x20 shadow frustum\n// (near 0.1 / far 100 / +-10), mapSize 2048, bias -0.0001, radius 2. NO hemisphere fill,\n// NO rim, NO normalBias, NO dynamic shadow rescaling.\n// - Camera: PerspectiveCamera(45, aspect, 0.1, 500) at (10,8,15), target (0,0.8,0). This authored\n// position sits ~19.4 units from the target, which is precisely the framing that fully fits the\n// FIXED ~10x10 office floor in the fov-45 frustum.\n// - Controls: damping 0.05, no pan, polar Math.PI/4.5..Math.PI/2.4, target (0,0.8,0). Distance\n// band is a FIXED window centered on the authored ~19.4 framing distance (NOT the old 3..10,\n// which was tuned for the pre-fix procedurally-shrunk floor and would crop the fixed office).\n// - Postprocessing: NONE. render() = renderer.render(scene, camera) (try/catch shell kept).\n//\n// LAYERED ON TOP (AIHive features the other modules rely on, kept): the movable speaker spotlight\n// + light-ramp lerp (visualizes the active running agent) and a gentle camera follow-target lerp.\n//\n// FOOTGUNS (must hold): NO TS annotations inside the returned string; NO unescaped backticks and\n// NO unescaped ${...} inside it (plain string concat everywhere); emojis as \\\\uXXXX. Placement is\n// deterministic; only render-time ambient may use the browser PRNG (none used here).\n\nexport function getWorldSceneJS(): string {\n return `\nimport * as THREE from 'three';\n\n// Only addon we need is OrbitControls. Wrapped so a missing addon degrades gracefully.\nvar OrbitControls = null;\ntry { OrbitControls = (await import('three/addons/controls/OrbitControls.js')).OrbitControls; } catch (e) { OrbitControls = null; }\n\n// SCENE_BACKGROUND_COLOR from the-delegation constants.ts — off-white, RGB 250,252,251.\nvar BG = 0xFAFCFB;\n\n// clamp helper.\nfunction clamp(v, lo, hi) { return v < lo ? lo : (v > hi ? hi : v); }\n\nexport function createWorld(canvas) {\n // ---------------------------------------------------------------------------------------------\n // (1) RENDERER (the-delegation Engine.ts) — NoToneMapping, explicit SRGB, PCFSoft shadows, AA.\n //\n // MADE EXPLICIT to remove Mac/Windows divergence: previously several render-affecting settings\n // were left at three's defaults, which made the look depend on three's per-build/per-platform\n // defaults rather than on us. Every render-affecting setting below is now stated explicitly and\n // deterministically, with NO platform-conditional behaviour:\n // - THREE.ColorManagement.enabled = true (explicit) -> identical sRGB<->linear conversions on\n // every platform/build, instead of relying on the (build-default) ColorManagement state.\n // - renderer.outputColorSpace = THREE.SRGBColorSpace (explicit) -> was relying on the r0.160\n // default; now pinned so the output transfer function can never differ between platforms.\n // - renderer.toneMapping = THREE.NoToneMapping (explicit) + toneMappingExposure = 1 -> was\n // relying on the default; now pinned so no tone curve is ever applied.\n // - renderer.shadowMap.enabled = true + renderer.shadowMap.type = THREE.PCFSoftShadowMap\n // (explicit fixed type) -> identical shadow filtering on Mac (Metal/GL) and Windows\n // (ANGLE/D3D); never left to a default.\n // - dpr: setPixelRatio(Math.min(window.devicePixelRatio||1, 2)) — same clamped formula on both\n // platforms (also re-applied on dpr changes; see resize()/dpr watcher below).\n // - NO setClearColor -> clear comes from scene.background (deterministic off-white).\n // The-delegation lights/camera/background are kept verbatim (see below).\n // ---------------------------------------------------------------------------------------------\n // ColorManagement: pin ON explicitly so sRGB<->linear math is identical everywhere (not left to\n // whatever the loaded three build defaults to). Guarded for builds that lack it.\n try { if (THREE.ColorManagement) THREE.ColorManagement.enabled = true; } catch (e) {}\n\n var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });\n // dpr: same clamped formula on Mac and Windows. min(dpr,2) caps Retina/HiDPI for perf while\n // still giving HiDPI sharpness; re-applied whenever the device pixel ratio changes (see below).\n renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));\n // Output color space: pinned to sRGB explicitly (was relying on the r0.160 default).\n renderer.outputColorSpace = THREE.SRGBColorSpace;\n // Tone mapping: pinned OFF explicitly (the-delegation applies none) so no tone curve ever runs.\n renderer.toneMapping = THREE.NoToneMapping;\n renderer.toneMappingExposure = 1.0;\n // Shadows: enabled with a FIXED filter type (PCFSoftShadowMap) so dirLight.shadow.radius=2 is\n // honored and filtering matches across WebGL backends.\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n\n // ---------------------------------------------------------------------------------------------\n // SCENE (the-delegation Stage.ts + constants.ts) — off-white background, NO fog, NO IBL/env.\n // ---------------------------------------------------------------------------------------------\n var scene = new THREE.Scene();\n scene.background = new THREE.Color(BG);\n // scene.fog: NONE (deleted). scene.environment: NONE (deleted) — the-delegation sets no env map.\n\n // ---------------------------------------------------------------------------------------------\n // (2) LIGHTS (the-delegation Stage.ts setupLights) — exactly two, physically-correct *Math.PI.\n // AmbientLight(0xffffff, 1*PI) and one STATIC DirectionalLight(0xffffff, 0.5*PI) at (10,20,10).\n // NO hemisphere fill, NO rim, NO normalBias, NO dynamic frustum rescaling.\n // ---------------------------------------------------------------------------------------------\n var ambient = new THREE.AmbientLight(0xffffff, Math.PI); // ~3.14159\n scene.add(ambient);\n\n var key = new THREE.DirectionalLight(0xffffff, 0.5 * Math.PI); // ~1.5708\n key.position.set(10, 20, 10);\n key.castShadow = true;\n key.target.position.set(0, 0, 0);\n scene.add(key);\n scene.add(key.target);\n // Fixed 20x20 shadow frustum (never rescaled).\n key.shadow.camera.near = 0.1;\n key.shadow.camera.far = 100;\n key.shadow.camera.top = 10;\n key.shadow.camera.bottom = -10;\n key.shadow.camera.right = 10;\n key.shadow.camera.left = -10;\n key.shadow.mapSize.set(2048, 2048);\n key.shadow.bias = -0.0001;\n if ('radius' in key.shadow) key.shadow.radius = 2;\n key.shadow.camera.updateProjectionMatrix();\n key.target.updateMatrixWorld();\n\n // ---------------------------------------------------------------------------------------------\n // (4)/(7) CAMERA (the-delegation Stage.ts) — fov 45, position (10,8,15), target (0,0.8,0).\n // Initial aspect reads the CONTAINER (#world-canvas-wrap = canvas.parentElement), NOT the window:\n // the canvas now lives inside the bounded center stage, sized width/height:100% by CSS.\n // ---------------------------------------------------------------------------------------------\n var host0 = canvas.parentElement || canvas;\n var w0 = host0.clientWidth || canvas.clientWidth || 800;\n var h0 = host0.clientHeight || canvas.clientHeight || 600;\n if (w0 < 1) w0 = 800; if (h0 < 1) h0 = 600;\n var camera = new THREE.PerspectiveCamera(45, w0 / h0, 0.1, 500);\n camera.position.set(10, 8, 15);\n\n // the-delegation Stage: defaultTarget = Vector3(0, 0.8, 0); controls.target initialized to it.\n var defaultTarget = new THREE.Vector3(0, 0.8, 0);\n camera.lookAt(defaultTarget);\n\n // The office is now a FIXED ~10x10 natural-scale model (the office module returns a fixed\n // extentFor and no longer scales the floor procedurally). The-delegation authored the camera at\n // (10,8,15) — distance ~19.4 from target (0,0.8,0) — precisely so the whole fixed office frames\n // fully (its 14.1-unit floor diagonal fits the fov-45 frustum with a small margin). So the\n // OrbitControls distance window must be a FIXED band centered on that authored framing distance,\n // NOT the old tiny 3..10 window (which was tuned for the pre-fix procedurally-shrunk floor and\n // would clamp the authored camera IN to distance 10, cropping the office). We keep the polar\n // limits verbatim and keep a bounded zoom band, just sized to the fixed office.\n var BASE_DIST = camera.position.distanceTo(defaultTarget); // ~19.41, the authored framing\n var MIN_DIST = Math.max(6, BASE_DIST - 8); // ~11.4 — can dolly a bit closer\n var MAX_DIST = BASE_DIST + 6; // ~25.4 — and a bit further out\n\n var controls = null;\n if (OrbitControls) {\n controls = new OrbitControls(camera, renderer.domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.rotateSpeed = 0.8;\n controls.enablePan = false;\n controls.enableRotate = true;\n controls.enableZoom = true;\n controls.minPolarAngle = Math.PI / 4.5;\n controls.maxPolarAngle = Math.PI / 2.4;\n // Fixed distance band that frames the fixed office; the authored distance sits inside it, so\n // controls.update() leaves the (10,8,15) framing intact instead of dollying it in to 10.\n controls.minDistance = MIN_DIST;\n controls.maxDistance = MAX_DIST;\n controls.target.copy(defaultTarget);\n controls.update();\n }\n\n // ---------------------------------------------------------------------------------------------\n // (9) SPEAKER SPOTLIGHT — AIHive feature layered ON TOP of the faithful base. Starts off\n // (intensity 0). Visualizes the active running agent (the-delegation pins camera-follow instead).\n // ---------------------------------------------------------------------------------------------\n var spot = new THREE.SpotLight(0xffffff, 0, 14, Math.PI / 7, 0.5, 1.2);\n spot.castShadow = false;\n spot.position.set(0, 9, 1.5);\n scene.add(spot);\n scene.add(spot.target);\n spot.target.position.set(0, 0.8, 0);\n\n // Stored ramp targets — render() lerps the live values toward these for smoothness.\n var lightTargets = { spot: 0.0 };\n var SPOT_ON = 6.0;\n\n // ---------------------------------------------------------------------------------------------\n // CONTENT GROUP — ALL world content (floor, desks, avatars, rings) attaches here so a single\n // transform owns the whole scene.\n // ---------------------------------------------------------------------------------------------\n var group = new THREE.Group();\n scene.add(group);\n\n var clock = new THREE.Clock();\n\n // ---------------------------------------------------------------------------------------------\n // POSTPROCESSING — NONE. render() draws straight through. (try/catch shell kept for shape.)\n // ---------------------------------------------------------------------------------------------\n // No composer / SSAO / bloom / FXAA. There is no env map, so the office/agents modules'\n // envMapIntensity assignments are harmless no-ops (nothing to sample).\n try { window.__worldSSAO = false; } catch (e) {}\n\n // ---------------------------------------------------------------------------------------------\n // setExtent(E) — GROW-ONLY framing guard for the fixed office. The office is a FIXED ~10x10\n // natural-scale model: the office module returns a fixed extentFor and never scales the floor, so\n // the-delegation's authored camera (10,8,15)->(0,0.8,0) already frames the whole room, and we MUST\n // NOT dolly the camera in/away from that authored framing for a normal roster. So for any E within\n // the fixed office (E <= FIXED_EXTENT) this stays a NO-OP: the camera, target, OrbitControls band\n // and shadow frustum are left exactly as authored.\n //\n // The ONE thing this now guards: a larger agent count. The office places overflow agents on rings\n // clamped INSIDE the office footprint, so the fixed framing still covers them — but if a caller\n // ever reports an extent LARGER than the fixed office (E > FIXED_EXTENT: a bigger roster ring, or a\n // future larger office), we GENTLY widen so nothing is cropped — and ONLY widen, never tighten:\n // - raise controls.maxDistance so the user can dolly out far enough to see the whole spread,\n // - grow the directional-light shadow frustum so shadows still cover the wider area.\n // We never touch minDistance, never move the camera/target, and never shrink anything — the\n // authored fixed-office framing is always preserved as the floor. Idempotent + monotonic.\n //\n // Kept in the public API (office.buildDesks + agents.sync call it); clamped to a sane [3,16] band.\n // ---------------------------------------------------------------------------------------------\n var FIXED_EXTENT = 7.2; // half-extent the authored fixed-office framing already covers\n var curExtent = -1;\n var grownExtent = FIXED_EXTENT; // largest extent we have grown framing to (monotonic, never shrinks)\n function setExtent(E) {\n E = (typeof E === 'number' && isFinite(E)) ? E : 3;\n E = clamp(E, 3, 16);\n if (E === curExtent) return;\n curExtent = E;\n // Within the fixed office: NO-OP. The authored framing already covers it; leave everything as is.\n if (E <= FIXED_EXTENT) return;\n // Larger than the fixed office and larger than anything we've grown to before: widen (grow-only).\n if (E <= grownExtent) return;\n grownExtent = E;\n // (a) Let the user dolly out far enough to fit the wider spread (never reduce the band).\n if (controls) {\n // Distance that fits a half-extent E in a fov-45 frustum, with the same margin the authored\n // framing uses (~BASE_DIST for FIXED_EXTENT). Scale the authored distance by E/FIXED_EXTENT.\n var fitDist = BASE_DIST * (E / FIXED_EXTENT);\n if (fitDist > controls.maxDistance) controls.maxDistance = fitDist;\n }\n // (b) Grow the shadow frustum so shadows still cover the wider area (only ever enlarge it).\n var half = Math.max(10, E + 3); // a little margin past the spread; authored frustum is +-10\n if (half > key.shadow.camera.right) {\n key.shadow.camera.top = half;\n key.shadow.camera.bottom = -half;\n key.shadow.camera.right = half;\n key.shadow.camera.left = -half;\n key.shadow.camera.updateProjectionMatrix();\n }\n }\n\n // ---------------------------------------------------------------------------------------------\n // (9) spotlightOn(vec3OrNull) — store the ramp target; the actual lerp happens in render().\n // vec3 -> aim spot at that head, ramp spot ~6.0, follow camera target toward the speaker.\n // null -> ramp spot to 0, return camera target toward defaultTarget.\n // ---------------------------------------------------------------------------------------------\n var spotTargetPos = new THREE.Vector3(0, 0.8, 0);\n var spotHasTarget = false;\n function spotlightOn(vec3OrNull) {\n if (vec3OrNull && typeof vec3OrNull.x === 'number') {\n spotHasTarget = true;\n spotTargetPos.set(vec3OrNull.x, vec3OrNull.y, vec3OrNull.z);\n lightTargets.spot = SPOT_ON;\n } else {\n spotHasTarget = false;\n lightTargets.spot = 0.0;\n }\n }\n\n // ---------------------------------------------------------------------------------------------\n // render() — controls + spotlight lerp + gentle camera follow-target lerp, then a direct\n // renderer.render (the-delegation has no composer). try/catch shell kept. The ENTRY owns rAF.\n // ---------------------------------------------------------------------------------------------\n var _tmpVec = new THREE.Vector3();\n var _followTarget = new THREE.Vector3().copy(defaultTarget);\n function render() {\n // Smooth spotlight-intensity ramp (frame-rate-tolerant lerp factor).\n spot.intensity += (lightTargets.spot - spot.intensity) * 0.08;\n\n // (the-delegation Stage.update) gentle camera follow-target lerp at 0.06, Y pinned to 0.8.\n if (spotHasTarget) {\n _followTarget.set(spotTargetPos.x, 0.8, spotTargetPos.z);\n } else {\n _followTarget.copy(defaultTarget);\n }\n if (controls) {\n controls.target.lerp(_followTarget, 0.06);\n controls.update();\n } else {\n camera.lookAt(_followTarget);\n }\n\n // Move the spotlight smoothly toward the active speaker's head.\n if (spotHasTarget) {\n spot.target.position.lerp(spotTargetPos, 0.1);\n _tmpVec.set(spotTargetPos.x, spotTargetPos.y + 5, spotTargetPos.z + 1.5);\n spot.position.lerp(_tmpVec, 0.08);\n }\n spot.target.updateMatrixWorld();\n\n try { renderer.render(scene, camera); }\n catch (e) { /* nothing else to fall back to */ }\n }\n\n // ---------------------------------------------------------------------------------------------\n // resize() — CONTAINER-sized (the bounded center stage), NOT window. host = the canvas's parent\n // (#world-canvas-wrap), which is width/height:100% of the flexed middle of #world-stage. Falls\n // back to the canvas's own client box, then to a sane 800x600 default if the box is still 0\n // (first paint before layout).\n //\n // MADE EXPLICIT to remove Mac/Windows divergence: the sizing path is now IDENTICAL on both\n // platforms. It (a) re-applies the SAME clamped pixel ratio (min(dpr,2)) every resize so a\n // device-pixel-ratio change (HiDPI <-> standard, browser zoom, dragging a window between Retina\n // and non-Retina displays) is always picked up, and (b) calls setSize(w, h, true) so three sets\n // BOTH the backing store AND the canvas CSS box deterministically (updateStyle=true), instead of\n // trusting platform/browser CSS to own the box. The result is the same backing-store resolution\n // for the same container size on Mac and Windows.\n // ---------------------------------------------------------------------------------------------\n var lastDpr = -1;\n function applyPixelRatio() {\n // Same clamped formula on every platform; only touch the renderer when dpr actually changed.\n var dpr = Math.min(window.devicePixelRatio || 1, 2);\n if (dpr !== lastDpr) {\n lastDpr = dpr;\n renderer.setPixelRatio(dpr);\n }\n }\n function resize() {\n applyPixelRatio();\n var host = canvas.parentElement || canvas;\n var w = host.clientWidth || canvas.clientWidth || 800;\n var h = host.clientHeight || canvas.clientHeight || 600;\n if (w < 1) w = 1; if (h < 1) h = 1;\n camera.aspect = w / h;\n camera.updateProjectionMatrix();\n // updateStyle=true: three sizes BOTH the backing store and the canvas CSS box deterministically,\n // identical on Mac and Windows (no reliance on platform CSS to own the displayed box).\n renderer.setSize(w, h, true);\n }\n\n // OBSERVE the container (not just the window): a ResizeObserver on #world-canvas-wrap reflows the\n // scene when the grid/flex layout changes the stage (panel collapse, responsive breakpoints,\n // window resize). Keep window 'resize' too as a belt-and-braces fallback. The SAME resize() runs\n // on both platforms from every trigger.\n try {\n if (typeof ResizeObserver !== 'undefined') {\n var ro = new ResizeObserver(function () { resize(); });\n ro.observe(canvas.parentElement || canvas);\n }\n } catch (e) {}\n try { window.addEventListener('resize', resize); } catch (e) {}\n\n // Re-apply pixel ratio on devicePixelRatio CHANGES specifically (browser zoom, or moving the\n // window between a HiDPI/Retina and a standard display). A resize event does not always fire for\n // a pure dpr change, so we watch it via matchMedia and re-arm the listener each time it flips.\n // Identical behaviour on Mac and Windows; degrades to the resize-driven applyPixelRatio() above\n // if matchMedia is unavailable.\n function watchDpr() {\n try {\n if (typeof window.matchMedia !== 'function') return;\n var mq = window.matchMedia('(resolution: ' + (window.devicePixelRatio || 1) + 'dppx)');\n var onChange = function () { resize(); watchDpr(); };\n if (mq.addEventListener) { mq.addEventListener('change', onChange, { once: true }); }\n else if (mq.addListener) { mq.addListener(onChange); }\n } catch (e) {}\n }\n watchDpr();\n\n // Construction order done; do the initial sizing pass and the base extent. A rAF-deferred second\n // pass guards against the wrap being 0x0 on the very first paint (before grid layout settles).\n setExtent(3);\n resize();\n try { requestAnimationFrame(resize); } catch (e) {}\n\n // ---------------------------------------------------------------------------------------------\n // The world object every other module consumes (exact API: scene, camera, renderer, controls,\n // group, clock, render, resize, setExtent, spotlightOn). 'key'/'spot' kept for compatibility.\n // ---------------------------------------------------------------------------------------------\n return {\n scene: scene,\n camera: camera,\n renderer: renderer,\n controls: controls,\n composer: null,\n group: group,\n clock: clock,\n key: key,\n spot: spot,\n render: render,\n resize: resize,\n setExtent: setExtent,\n spotlightOn: spotlightOn\n };\n}\n`;\n}\n",[208],"1fe74b4e-5e36-11f1-a8ca-1607ee4eb77e","frontend_world_office.ts","1c4ad992-5da0-11f1-aa43-1607ee4eb77e",815,["D",1780372198155],4,"// Part 10b: the OFFICE module of the /world Agent World page. Served at /api/app-world-office and\n// imported by the entry (frontend_world.ts) via that ABSOLUTE URL. It owns the SINGLE SOURCE OF\n// TRUTH for where every agent sits (layout, sourced from the REAL office.glb POIs), how big the\n// world is (extentFor — now the FIXED office footprint, the office does NOT scale to agent count),\n// the meeting center (the boardroom/hub POI), a NO-OP buildDesks (the office already HAS its desks)\n// and the real GLB office (loadFloor — now loads the WHOLE office faithfully).\n//\n// This is a line-faithful port of the-delegation WorldManager.load + PoiManager.loadFromGlb to\n// three r0.160 WebGL: load office.glb (GLTFLoader + DRACOLoader), add the WHOLE gltf.scene to\n// world.group, traverse every mesh — SHOW every static-* piece (desk/chair/pc/plant/sofa/board/\n// counter/cafe-table/cabinet/laptop/flexo) + the static-floor + the colored-border (the blue\n// perimeter is IN the model), HIDE the navMesh and every poi-* marker node, set castShadow/\n// receiveShadow, and replace each material with a fresh MeshStandardMaterial (color = the brand\n// blue for 'colored*' meshes, else the baked color; roughness 1, metalness 0.35) exactly like the\n// original's MeshStandardNodeMaterial treatment. After the traverse it EXTRACTS POIs like\n// PoiManager.loadFromGlb (world position + quaternion + arrivalState + label), and layout(count)\n// is sourced from those REAL POIs: sit_work first (AT the desks), then sit_idle, then spawn/area.\n//\n// FOOTGUNS: this returns ONE backtick template literal (a browser ES-module). Inside it there are NO\n// unescaped backticks and NO unescaped ${...}; every dynamic string is built by '+' concatenation.\n// NO TS annotations inside the returned string (plain JS only). Placement (layout) is sourced from\n// the deterministic baked POIs (never Math.random / Date). Emojis, if any, are \\\\uXXXX escapes.\n// Keep the file well under 80KB.\n\nexport function getWorldOfficeJS(): string {\n return `\nimport * as THREE from 'three';\nimport { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';\nimport { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';\n\n// ---- the-delegation public assets (MIT). The WHOLE office GLB + DRACO decoder. ----\nvar OFFICE_GLB = 'https://cdn.jsdelivr.net/gh/arturitu/the-delegation@16c97c43d1c32fae797ace4ed8058157e1126c96/public/models/office.glb';\nvar DRACO_DECODER = 'https://www.gstatic.com/draco/versioned/decoders/1.5.6/';\n\n// The brand blue used for the-delegation's 'colored-*' meshes (the blue perimeter border is baked\n// INTO the model as 'colored-border'). In the original this is the active AgentSet theme color; we\n// pin it to the unboring.net / DIRECTOR_COLOR blue so the border matches the UI legend + agent lead.\nvar THEME_COLOR = '#4285F4';\n\n// Fallback half-extent (world units) of the office footprint, used by extentFor() BEFORE the GLB\n// has loaded (so the camera frames sanely on the first paint). Once office.glb is in, extentFor\n// returns the REAL measured footprint half-extent. The office is ONE fixed room — it does NOT grow\n// with the roster, so this is a FIXED value, not a function of agent count.\nvar FOOTPRINT_FALLBACK = 6.0;\n\nexport function createOffice(world) {\n // ---- meetCenter: the HEAD-OF-TABLE anchor where the agents module seats the Director. Derived\n // from the boardroom POI (else hub, else first area) once the office loads: the POI marks the table\n // CENTER, and meetCenter is pushed back along the POI's forward axis to the table END (the head\n // seat), with meetFacing the yaw to look down the table. Until the office loads, the origin. ----\n var meetCenter = new THREE.Vector3(0, 0, 0);\n // ---- meetFacing: the yaw (radians, atan2(dx,dz) convention) the Director faces at the head of the\n // table — toward the table center / the rest of the seats. 0 until the office loads. ----\n var meetFacing = 0;\n\n // The measured office footprint half-extent (set when office.glb loads). Until then, the fallback.\n var footprint = FOOTPRINT_FALLBACK;\n\n // The navMesh node's world-space geometry, captured from office.glb so the agents can pathfind on\n // it (three-pathfinding). We clone the node's BufferGeometry and BAKE its world matrix into the\n // positions so it is in WORLD coords (matching the world-space POI positions). null until the GLB\n // loads (or if the office has no navMesh node). The mesh itself stays visually hidden.\n var navMeshGeometry = null;\n\n // Module-scoped count mirror. The entry / agents module may set world.__officeCount; we keep our\n // own mirror so any caller that reads it gets a sane value. (Nothing here SIZES to it anymore —\n // the office is fixed — but the property is part of the cross-module contract, so we honour it.)\n var currentCount = 1;\n function rememberCount(n) {\n n = Math.max(1, Math.floor(n || 1));\n currentCount = n;\n try { world.__officeCount = n; } catch (e) {}\n return n;\n }\n function readCount() {\n var n = currentCount;\n try {\n if (world && typeof world.__officeCount === 'number' && world.__officeCount > 0) {\n n = world.__officeCount;\n }\n } catch (e) {}\n return Math.max(1, Math.floor(n || 1));\n }\n\n // ---- extentFor: the office FOOTPRINT half-extent. FIXED — the office does NOT scale to the agent\n // count (each project is one fixed office). We ignore 'count' and return the measured footprint\n // (or the fallback before the GLB loads). Kept as a function (scene + agents call it) so the\n // camera/controls frame the room. Clamped to a sane [3, 16] band like before. ----\n function extentFor(count) {\n var E = footprint;\n if (!(typeof E === 'number' && isFinite(E))) E = FOOTPRINT_FALLBACK;\n if (E < 3) E = 3;\n if (E > 16) E = 16;\n return E;\n }\n\n // ---- POIs: extracted from office.glb exactly like the-delegation PoiManager.loadFromGlb. Each is\n // { id, position:Vector3, quaternion:Quaternion, arrivalState, label, type, kind }.\n // regex ^poi-([a-z0-9_]+)-(.+)$ -> type = group1, uniqueId = group2 (greedy).\n // arrivalState defaults 'idle'; if type is neither 'spawn' nor 'area', arrivalState = type\n // (so 'sit_work', 'sit_idle' become the arrival state; 'idle' stays 'idle').\n // label: only 'sit_idle' gets 'Sit down'.\n // id = type + '-' + uniqueId (the node name minus the 'poi-' prefix).\n // 'kind' is OUR classification for layout ordering, derived from the full id so it survives the\n // greedy regex (e.g. 'poi-idle-spawn-1' -> type 'idle', id 'idle-spawn-1', kind 'spawn'):\n // kind 'sit_work' | 'sit_idle' | 'spawn' | 'area' | 'other'. ----\n var pois = [];\n\n function classifyKind(id, arrivalState) {\n var s = String(id).toLowerCase();\n if (arrivalState === 'sit_work' || s.indexOf('sit_work') !== -1) return 'sit_work';\n if (arrivalState === 'sit_idle' || s.indexOf('sit_idle') !== -1) return 'sit_idle';\n if (s.indexOf('spawn') !== -1) return 'spawn';\n if (s.indexOf('area') !== -1) return 'area';\n return 'other';\n }\n\n function loadPoisFromGlb(root) {\n pois = [];\n root.traverse(function (child) {\n var m = String(child.name || '').match(/^poi-([a-z0-9_]+)-(.+)$/);\n if (!m) return;\n var type = m[1];\n var uniqueId = m[2];\n var arrivalState = 'idle';\n var label;\n if (type !== 'spawn' && type !== 'area') {\n arrivalState = type;\n if (arrivalState === 'sit_idle') label = 'Sit down';\n }\n var id = type + '-' + uniqueId;\n var worldPos = new THREE.Vector3();\n var worldQuat = new THREE.Quaternion();\n child.getWorldPosition(worldPos);\n child.getWorldQuaternion(worldQuat);\n pois.push({\n id: id,\n position: worldPos,\n quaternion: worldQuat,\n arrivalState: arrivalState,\n label: label,\n type: type,\n kind: classifyKind(id, arrivalState)\n });\n });\n // Deterministic order WITHIN each kind: sort by id so re-syncs / parallel readers agree on which\n // seat goes to which roster index (the GLB traversal order is stable, but id-sort is belt-and-\n // braces and makes 'sit_work-1' come before 'sit_work-2', etc.).\n pois.sort(function (a, b) { return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0); });\n // Update meetCenter to a HEAD-OF-TABLE anchor for the Director. We first find the meeting POI\n // (boardroom POI, else hub, else first area, else origin) — that POI sits at the table CENTER.\n // The Director should NOT stand on the table center; it should sit at the END of the table (the\n // head seat) and look DOWN the table toward the other seats. So we push the center back along the\n // POI's authored forward axis by a table half-length, and store the matching facing yaw. The\n // agents module reads office.meetCenter (and office.meetFacing) to seat the Director there.\n var hub = null, board = null, anyArea = null;\n for (var i = 0; i < pois.length; i++) {\n var p = pois[i];\n var lid = p.id.toLowerCase();\n if (lid.indexOf('boardroom') !== -1) board = p;\n else if (lid.indexOf('hub') !== -1) hub = p;\n if (p.kind === 'area' && !anyArea) anyArea = p;\n }\n var center = board || hub || anyArea;\n if (center) {\n // Forward axis the POI was authored facing (unit, on the XZ plane).\n _fwd.set(0, 0, 1).applyQuaternion(center.quaternion);\n var fx = _fwd.x, fz = _fwd.z;\n var fl = Math.sqrt(fx * fx + fz * fz);\n if (fl > 1e-4) { fx /= fl; fz /= fl; } else { fx = 0; fz = 1; }\n // Head-of-table offset: a sensible table half-length so the Director sits at the table end, not\n // its middle. Clamped to the office footprint so it can never push the anchor outside the room.\n var headOffset = Math.min(2.4, Math.max(1.2, footprint * 0.4));\n meetCenter.set(\n center.position.x - fx * headOffset,\n center.position.y,\n center.position.z - fz * headOffset\n );\n // Face from the head seat back toward the table center (down the table), i.e. +forward.\n meetFacing = Math.atan2(fx, fz);\n } else {\n meetCenter.set(0, 0, 0);\n meetFacing = 0;\n }\n }\n\n // POIs grouped by kind, in the fill order layout() wants: sit_work first (these are AT the real\n // desks), then sit_idle, then spawn, then area, then anything else. Returns a flat ordered array.\n function orderedPois() {\n var order = ['sit_work', 'sit_idle', 'spawn', 'area', 'other'];\n var out = [];\n for (var k = 0; k < order.length; k++) {\n for (var i = 0; i < pois.length; i++) {\n if (pois[i].kind === order[k]) out.push(pois[i]);\n }\n }\n return out;\n }\n\n // Convert a POI quaternion to the avatar facing yaw. The avatar (object3D.rotation.y) faces +Z by\n // default; the agents module uses Math.atan2(dx, dz) for facing, so we extract the same convention:\n // forward = (0,0,1) applied by the quaternion, yaw = atan2(forward.x, forward.z). This makes the\n // seated avatar face the way the POI was authored (toward its desk).\n var _fwd = new THREE.Vector3();\n function yawFromQuat(q) {\n _fwd.set(0, 0, 1).applyQuaternion(q);\n return Math.atan2(_fwd.x, _fwd.z);\n }\n\n // ---- layout(count): the single source of truth for agent placement, SOURCED FROM THE REAL POIs.\n // Returns Array(count) of { x, z, angle, deskX, deskZ, deskAngle }. Fill order: sit_work POIs\n // first (these sit AT the real desks, so deskX/deskZ = the POI itself), then sit_idle, then\n // spawn/area for overflow. angle comes from the POI quaternion (so the avatar faces its desk).\n //\n // OVERFLOW (MAX_AGENTS can rise above the real POI count): the surplus reuse POIs round-robin, but\n // they must NOT stack on the exact same world point. Each POI can host several occupants; the FIRST\n // occupant sits exactly on the POI (its desk), and every later occupant is fanned onto a scaled\n // ring around that POI so no two avatars overlap, however large the roster grows. The ring radius\n // grows with how many occupants share a POI (so a crowded reuse spreads to a wider ring), and the\n // angular slot is deterministic by occupant index. The desk target stays the POI itself for the\n // first occupant; overflow occupants get their own ring point as their desk so movement is stable.\n // If the office has not loaded yet (no POIs), we fall back to a small deterministic origin ring so\n // the first paint is not empty. ----\n function layout(count) {\n var n = Math.max(0, Math.floor(count || 0));\n var seats = [];\n if (n <= 0) return seats;\n\n var src = orderedPois();\n if (src.length === 0) {\n // No POIs yet (GLB not loaded): deterministic fallback ring near the origin so placement is\n // never random. Replaced the moment loadFloor() resolves and sync() re-runs.\n for (var f = 0; f < n; f++) {\n var ang = (f / n) * Math.PI * 2;\n var rr = (f === 0) ? 0 : 2.2;\n var fxx = Math.sin(ang), fzz = Math.cos(ang);\n var sxx = (f === 0) ? 0 : Math.sin(ang) * rr;\n var szz = (f === 0) ? 0 : Math.cos(ang) * rr;\n seats.push({ x: sxx, z: szz, angle: ang, deskX: sxx + fxx * 0.6, deskZ: szz + fzz * 0.6, deskAngle: ang });\n }\n return seats;\n }\n\n // How many occupants each POI will end up hosting: ceil(n / src.length) for the first\n // (n mod src.length) POIs, floor for the rest. We only need a per-POI running occupant counter to\n // pick each agent's ring slot + radius, so track it as we fill.\n var seatsPerPoi = Math.ceil(n / src.length); // upper bound of co-occupants on any POI\n var occCount = []; // running occupant index per POI\n for (var z = 0; z < src.length; z++) occCount[z] = 0;\n // Minimum spacing between adjacent avatars on a shared ring (avatar footprint ~0.7u). The ring\n // radius is chosen so the chord between adjacent slots is at least this, then clamped so the ring\n // can never escape the office footprint.\n var AVATAR_GAP = 0.95;\n var BASE_RING = 0.9; // radius of the first overflow ring\n\n for (var i = 0; i < n; i++) {\n var pIdx = i % src.length;\n var poi = src[pIdx];\n var px = poi.position.x;\n var pz = poi.position.z;\n var yaw = yawFromQuat(poi.quaternion);\n var occ = occCount[pIdx]++; // this agent's occupant index on its POI\n\n if (occ === 0) {\n // First occupant sits exactly AT the POI (its desk). The desk is the POI itself.\n seats.push({ x: px, z: pz, angle: yaw, deskX: px, deskZ: pz, deskAngle: yaw });\n continue;\n }\n\n // Overflow occupant: place it on a scaled ring around the POI so it never overlaps the seated\n // first occupant or its ring siblings. Distribute occupants 1..(seatsPerPoi-1) evenly around the\n // circle; widen the ring radius enough that adjacent slots are at least AVATAR_GAP apart, and\n // clamp so the ring stays inside the room (never pushes an avatar through a wall/out of frame).\n var ringSlots = Math.max(1, seatsPerPoi - 1); // slots available on the overflow ring(s)\n var slot = occ - 1; // 0-based slot on the ring\n var slotAng = (slot / ringSlots) * Math.PI * 2;\n // Radius so the chord between adjacent slots >= AVATAR_GAP: chord = 2*r*sin(pi/ringSlots).\n var sinHalf = Math.sin(Math.PI / Math.max(2, ringSlots));\n var needR = (sinHalf > 1e-4) ? (AVATAR_GAP / (2 * sinHalf)) : BASE_RING;\n var ringR = Math.max(BASE_RING, needR);\n // Keep the ring inside the office: cap the radius so px/pz +- ringR stays within the footprint.\n var room = footprint - 0.6;\n if (room < BASE_RING) room = BASE_RING;\n var maxR = room - Math.max(Math.abs(px), Math.abs(pz));\n if (maxR < BASE_RING) maxR = BASE_RING; // never collapse below the base ring\n if (ringR > maxR) ringR = maxR;\n var ox = Math.cos(slotAng) * ringR;\n var oz = Math.sin(slotAng) * ringR;\n var sx = px + ox;\n var sz = pz + oz;\n // Face back toward the POI center (so a fanned-out overflow avatar still orients to its cluster).\n var faceYaw = Math.atan2(-ox, -oz);\n seats.push({ x: sx, z: sz, angle: faceYaw, deskX: sx, deskZ: sz, deskAngle: faceYaw });\n }\n return seats;\n }\n\n // ---- buildDesks(count): NO-OP. The office already HAS its desks (they are real GLB meshes loaded\n // by loadFloor). We no longer build any BoxGeometry desk/chair/monitor instances or a procedural\n // perimeter (the blue border is the model's 'colored-border'). We keep the function (agents.sync\n // calls it) and keep it honouring the count mirror + the setExtent contract so the camera frames\n // the fixed room. ----\n function buildDesks(count) {\n var n = rememberCount(count);\n if (world && typeof world.setExtent === 'function') {\n try { world.setExtent(extentFor(n)); } catch (e) {}\n }\n }\n\n // ---- Material treatment, line-faithful to the-delegation WorldManager.load(): for every mesh\n // (NOT navmesh, NOT a poi marker), enable shadows and REPLACE the material with a fresh\n // MeshStandardMaterial — color = THEME_COLOR for 'colored*' meshes, else the baked color; keep the\n // baked map; roughness 1, metalness 0.35. (The original uses MeshStandardNodeMaterial for WebGPU\n // shadow compatibility; on three r0.160 WebGL the plain MeshStandardMaterial is the equivalent.) ----\n function treatMesh(mesh) {\n var name = String(mesh.name || '').toLowerCase();\n var isColored = name.indexOf('colored') === 0;\n var oldMat = mesh.material;\n if (Array.isArray(oldMat)) oldMat = oldMat[0];\n var baseColor = (oldMat && oldMat.color) ? oldMat.color.clone() : new THREE.Color(0xcccccc);\n var baseMap = (oldMat && oldMat.map) ? oldMat.map : null;\n var col = isColored ? new THREE.Color(THEME_COLOR) : baseColor;\n var mat = new THREE.MeshStandardMaterial({\n color: col,\n map: baseMap,\n roughness: 1.0,\n metalness: 0.35\n });\n if ('envMapIntensity' in mat) mat.envMapIntensity = 0.4;\n mesh.material = mat;\n mesh.castShadow = true;\n mesh.receiveShadow = true;\n }\n\n // Add the WHOLE office to world.group and traverse it like WorldManager.load: hide the navMesh,\n // hide every poi-* marker node (markers, not furniture), treat every other mesh. Returns nothing;\n // mutates the scene graph in place.\n function installOffice(root) {\n // 1) Hide every poi-* marker node (and its subtree). They are empty/marker objects; we never\n // render them. (PoiManager already read their transforms before this.)\n root.traverse(function (o) {\n var nm = String(o.name || '').toLowerCase();\n if (nm.indexOf('poi-') === 0) o.visible = false;\n });\n // 2) Per-mesh: navMesh -> hidden; everything else -> shadows + material treatment.\n root.traverse(function (o) {\n if (!o.isMesh) return;\n var nm = String(o.name || '').toLowerCase();\n var pnm = (o.parent && o.parent.name) ? String(o.parent.name).toLowerCase() : '';\n // If this mesh lives under a hidden poi-* marker, leave it hidden and skip treatment.\n if (nm.indexOf('poi-') === 0 || pnm.indexOf('poi-') === 0) { o.visible = false; return; }\n if (nm.indexOf('navmesh') !== -1) {\n // The navMesh is invisible collision/walkable geometry. KEEP a world-space clone of its\n // BufferGeometry so the agents can pathfind on it (three-pathfinding consumes a geometry in\n // world coords). Clone, then bake the node's world matrix into the positions so the polygons\n // line up with the world-space POI positions. Take the FIRST navMesh found. The mesh stays\n // hidden (we never render it).\n try {\n if (!navMeshGeometry && o.geometry && typeof o.geometry.clone === 'function') {\n o.updateWorldMatrix(true, false);\n var g = o.geometry.clone();\n g.applyMatrix4(o.matrixWorld);\n navMeshGeometry = g;\n }\n } catch (e) {}\n o.visible = false;\n return;\n }\n treatMesh(o);\n });\n // 3) Measure the office footprint half-extent from the visible scene bbox (X/Z), so extentFor()\n // frames the real room. Fixed thereafter — the office does not scale to the roster.\n try {\n var box = new THREE.Box3().setFromObject(root);\n var maxAbs = Math.max(\n Math.abs(box.min.x), Math.abs(box.max.x),\n Math.abs(box.min.z), Math.abs(box.max.z)\n );\n if (isFinite(maxAbs) && maxAbs > 0.5) footprint = maxAbs;\n } catch (e) {}\n }\n\n // Fallback floor: a plain disc + a thin blue border ring, used ONLY if office.glb fails to load,\n // so the scene is never empty. (No furniture — the real furniture lives in the GLB.)\n function buildFallbackOffice() {\n var E = FOOTPRINT_FALLBACK;\n var r = Math.max(6, E + 1.5);\n var disc = new THREE.Mesh(\n new THREE.CircleGeometry(r, 64),\n new THREE.MeshStandardMaterial({ color: new THREE.Color('#c4cedd'), roughness: 1.0, metalness: 0.35 })\n );\n disc.rotation.x = -Math.PI / 2;\n disc.position.y = 0;\n disc.receiveShadow = true;\n disc.castShadow = false;\n disc.frustumCulled = false;\n world.group.add(disc);\n var col = new THREE.Color(THEME_COLOR);\n var ring = new THREE.Mesh(\n new THREE.RingGeometry(r - 0.12, r, 96),\n new THREE.MeshStandardMaterial({\n color: col.clone(), emissive: col.clone(), emissiveIntensity: 0.8,\n roughness: 0.5, metalness: 0.0, transparent: true, opacity: 0.95\n })\n );\n ring.rotation.x = -Math.PI / 2;\n ring.position.y = 0.012;\n ring.receiveShadow = false;\n ring.castShadow = false;\n ring.frustumCulled = false;\n world.group.add(ring);\n }\n\n // ---- loadFloor(): async. Now loads the WHOLE office.glb, extracts its POIs, installs the whole\n // scene into world.group (faithful traverse), and measures the footprint. Tolerant of load\n // failure (falls back to a plain disc + border ring). Keeps the loadFloor() name + Promise\n // contract the entry awaits. ----\n function loadFloor() {\n return new Promise(function (resolve) {\n var draco = new DRACOLoader();\n draco.setDecoderPath(DRACO_DECODER);\n var loader = new GLTFLoader();\n loader.setDRACOLoader(draco);\n loader.load(\n OFFICE_GLB,\n function (gltf) {\n try {\n var root = gltf.scene || (gltf.scenes && gltf.scenes[0]);\n if (!root) { buildFallbackOffice(); resolve(); return; }\n // Bake world matrices so POI getWorldPosition/Quaternion + the bbox are correct.\n root.updateMatrixWorld(true);\n // Extract POIs FIRST (before we hide the markers), exactly like PoiManager.loadFromGlb.\n loadPoisFromGlb(root);\n // Faithfully install the whole office (hide navmesh + poi markers, treat every mesh).\n installOffice(root);\n // Add the WHOLE gltf.scene to world.group (one Group, nothing pruned) — verbatim, no\n // scale/position/rotation mutation (the office transform is identity in the GLB).\n world.group.add(root);\n resolve();\n } catch (e) {\n buildFallbackOffice();\n resolve();\n }\n },\n undefined,\n function () {\n // Load error -> never leave the scene empty.\n buildFallbackOffice();\n resolve();\n }\n );\n });\n }\n\n // ---- getNavMeshGeometry(): the navMesh node's world-space BufferGeometry (a clone with the node's\n // world matrix baked in, so it is in WORLD coords). Returns null if office.glb has not loaded yet\n // or has no navMesh node. The agents module feeds this to three-pathfinding so avatars walk on the\n // walkable surface instead of clipping through walls. The navMesh itself stays visually hidden. ----\n function getNavMeshGeometry() {\n return navMeshGeometry;\n }\n\n // ---- getPois(): the REAL extracted POIs (ordered like layout: sit_work, sit_idle, spawn, area,\n // other), each as { id, position:Vector3(clone), quaternion:Quaternion(clone), arrivalState, label,\n // type, kind }. The agents module reads these so it can path (three-pathfinding) to a sit_work desk\n // (on a running run), a sit_idle seat, or an idle/area POI, and sit AT the chair (snap to the POI's\n // exact world position + quaternion). Positions/quaternions are CLONED so callers can't mutate ours.\n // Empty array until office.glb loads. ----\n function getPois() {\n var src = orderedPois();\n var out = [];\n for (var i = 0; i < src.length; i++) {\n var p = src[i];\n out.push({\n id: p.id,\n position: p.position.clone(),\n quaternion: p.quaternion.clone(),\n arrivalState: p.arrivalState,\n label: p.label,\n type: p.type,\n kind: p.kind\n });\n }\n return out;\n }\n\n // ---- getMeetFacing(): the live head-of-table yaw (radians). meetFacing is a primitive that gets\n // reassigned when the office loads, so we expose it via a getter (a plain value would snapshot 0 at\n // createOffice time). The agents module rotates the Director by this when seating it at meetCenter. ----\n function getMeetFacing() { return meetFacing; }\n\n return {\n meetCenter: meetCenter,\n meetFacing: meetFacing,\n getMeetFacing: getMeetFacing,\n layout: layout,\n extentFor: extentFor,\n buildDesks: buildDesks,\n loadFloor: loadFloor,\n getNavMeshGeometry: getNavMeshGeometry,\n getPois: getPois\n };\n}\n`;\n}\n",[216],"1007af90-5e7f-11f1-b825-1607ee4eb77e","frontend_world_dash_view.ts","1007b03a-5e7f-11f1-b825-1607ee4eb77e",941,["D",1780403524788],"// frontend_world_dash_view.ts — SOURCE FRAGMENT of the /world dashboard browser module.\n// Exports DASH_VIEW: a plain string of browser-JS SOURCE (function declarations only — NO\n// top-level state). getWorldDashJS() in frontend_world_dash.ts concatenates this fragment\n// INSIDE the createDash closure, so every function here shares that one closure (the shared\n// var declarations + KAN_COLS live in the entry file). Contains: logs (buildLogs/applyLogFilter/\n// buildLogRow/phaseBadge*/renderLogs/appendLogs/capLogDom), kanban (buildKanban/buildTaskCard/\n// priorityCss/fmtDate/colorByName/renderKanban), project shell (buildProject), project render\n// (setPhase/chip/renderProject/renderRoster/renderUsageRows/trace*/renderTrace/renderTopbar),\n// and topbar/scenehead (buildTopbar/setAutoApprove/buildScenehead/setSceneState).\n// FOOTGUNS: keep the SAME escaping as the entry template (escaped backticks and \\${ stay\n// escaped); NO new unescaped backticks or ${...}. Keep under 80000 bytes.\nexport const DASH_VIEW = `\n // ---- TOP BAR ----------------------------------------------------------\n function buildTopbar() {\n if (!elTopbar) return;\n elTopbar.innerHTML = '';\n\n // Brand cluster + back link.\n var brand = el('div', null, 'display:flex;align-items:center;gap:9px;');\n var back = el('a', 'wd-btn', 'display:flex;align-items:center;gap:6px;text-decoration:none;color:' + TXT_MUTED + ';' +\n 'font-size:12px;font-weight:700;padding:5px 8px;border-radius:9px;');\n back.href = '/';\n back.innerHTML = ms('arrow_back', 18, TXT_MUTED) + '<span>App</span>';\n back.addEventListener('mouseenter', function () { back.style.background = 'rgba(20,30,60,0.05)'; });\n back.addEventListener('mouseleave', function () { back.style.background = 'transparent'; });\n var dot = el('span', null, 'width:11px;height:11px;border-radius:3px;background:' + DIRECTOR_COLOR + ';box-shadow:0 0 8px ' + DIRECTOR_COLOR + ';');\n var title = el('span', null, 'font-weight:900;font-size:15px;letter-spacing:-.2px;color:' + BRAND_DARK + ';');\n title.textContent = 'Agent World';\n brand.appendChild(back); brand.appendChild(dot); brand.appendChild(title);\n elTopbar.appendChild(brand);\n\n // Divider.\n elTopbar.appendChild(el('span', null, 'width:1px;height:24px;background:' + PANEL_BORDER + ';'));\n\n // Project name + team count.\n var pwrap = el('div', null, 'display:flex;align-items:center;gap:10px;min-width:0;');\n topProject = el('span', null, 'font-weight:700;font-size:13px;color:' + TXT_DARK + ';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;');\n topProject.textContent = 'No active project';\n topTeam = el('span', null, 'font-size:11px;font-weight:800;color:' + TXT_LABEL + ';background:' + USER_COLOR_LIGHT + ';border-radius:8px;padding:2px 8px;display:flex;align-items:center;gap:4px;');\n topTeam.innerHTML = ms('group', 14, DIRECTOR_COLOR) + '<span class=\"wd-mono\">0</span>';\n pwrap.appendChild(topProject); pwrap.appendChild(topTeam);\n elTopbar.appendChild(pwrap);\n\n // Spacer.\n elTopbar.appendChild(el('span', null, 'flex:1 1 auto;'));\n\n // Director identity pill — the RIGHT-column chat directs the team; this keeps the label present.\n var dirPill = el('span', null, 'display:flex;align-items:center;gap:5px;flex:0 0 auto;white-space:nowrap;' +\n 'font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:' + DIRECTOR_COLOR + ';' +\n 'background:' + USER_COLOR_LIGHT + ';border:1px solid ' + USER_COLOR_SOFT + ';border-radius:9px;padding:4px 10px;');\n dirPill.innerHTML = ms('account_tree', 14, DIRECTOR_COLOR) + '<span>Director</span>';\n dirPill.title = 'The Director orchestrates the team \\\\u2014 chat with it in the Project panel';\n elTopbar.appendChild(dirPill);\n\n // Model chip.\n topModel = el('span', null, 'font-size:11px;font-weight:700;color:' + TXT_MUTED + ';background:rgba(20,30,60,0.05);' +\n 'border-radius:8px;padding:3px 9px;display:flex;align-items:center;gap:5px;white-space:nowrap;');\n topModel.innerHTML = ms('memory', 14, TXT_MUTED) + '<span class=\"wd-mono\">model</span>';\n elTopbar.appendChild(topModel);\n\n // Auto-approve indicator.\n topAuto = el('span', null, 'font-size:11px;font-weight:800;letter-spacing:.4px;border-radius:8px;padding:3px 9px;' +\n 'display:flex;align-items:center;gap:5px;white-space:nowrap;');\n setAutoApprove(false);\n elTopbar.appendChild(topAuto);\n }\n\n function setAutoApprove(on) {\n if (!topAuto) return;\n if (on) {\n topAuto.style.color = EMERALD;\n topAuto.style.background = 'rgba(16,185,129,0.12)';\n topAuto.innerHTML = ms('bolt', 14, EMERALD) + '<span>AUTO</span>';\n } else {\n topAuto.style.color = TXT_MUTED;\n topAuto.style.background = 'rgba(20,30,60,0.05)';\n topAuto.innerHTML = ms('verified_user', 14, TXT_MUTED) + '<span>REVIEW</span>';\n }\n }\n\n // ---- SCENE HEADER (centered strip inside #world-stage) ----------------\n function buildScenehead() {\n if (!elScenehead) return;\n elScenehead.innerHTML = '';\n sceneTeamBadge = el('span', null, 'font-size:11px;font-weight:800;letter-spacing:.4px;color:' + DIRECTOR_COLOR + ';' +\n 'background:' + USER_COLOR_LIGHT + ';border-radius:8px;padding:3px 9px;display:flex;align-items:center;gap:5px;');\n sceneTeamBadge.innerHTML = ms('groups', 15, DIRECTOR_COLOR) + '<span>Team</span>';\n elScenehead.appendChild(sceneTeamBadge);\n elScenehead.appendChild(el('span', null, 'flex:1 1 auto;'));\n sceneOut = el('span', null, 'font-size:11px;font-weight:600;color:' + TXT_MUTED + ';display:flex;align-items:center;gap:6px;white-space:nowrap;');\n setSceneState(false);\n elScenehead.appendChild(sceneOut);\n }\n\n // Scene status label — real state: 'Live' when a run is active or the campaign is\n // running, else 'Idle'. Driven by renderProject.\n function setSceneState(live) {\n if (!sceneOut) return;\n if (live) {\n sceneOut.style.color = EMERALD;\n sceneOut.innerHTML = '<span class=\"wd-pulse\" style=\"width:8px;height:8px;border-radius:50%;background:' + EMERALD + ';box-shadow:0 0 7px ' + EMERALD + ';flex:0 0 auto;\"></span><span>Live</span>';\n } else {\n sceneOut.style.color = TXT_MUTED;\n sceneOut.innerHTML = ms('pause_circle', 15, TXT_MUTED) + '<span>Idle</span>';\n }\n }\n\n // ---- LEFT LOGS PANEL --------------------------------------------------\n function buildLogs() {\n if (!elLogs) return;\n elLogs.innerHTML = '';\n elLogs.style.cssText += ';display:flex;flex-direction:column;';\n\n var head = el('div', null, 'flex:0 0 auto;padding:12px 12px 8px;border-bottom:1px solid ' + PANEL_BORDER + ';');\n var titleRow = el('div', null, 'display:flex;align-items:center;gap:7px;margin-bottom:9px;');\n titleRow.innerHTML = ms('receipt_long', 16, TXT_LABEL) + '<span class=\"wd-label\">Activity</span>';\n head.appendChild(titleRow);\n\n logsFilterInp = el('input', null, 'width:100%;background:#fff;border:1px solid ' + PANEL_BORDER + ';' +\n 'border-radius:8px;padding:6px 9px;font-size:12px;color:' + TXT_DARK + ';outline:none;');\n logsFilterInp.type = 'text';\n logsFilterInp.placeholder = 'Filter\\\\u2026';\n logsFilterInp.addEventListener('input', function () { logFilter = lower(logsFilterInp.value); applyLogFilter(); });\n head.appendChild(logsFilterInp);\n elLogs.appendChild(head);\n\n logsList = el('div', 'wd-scroll', 'flex:1 1 auto;min-height:0;padding:8px;display:flex;flex-direction:column;gap:7px;');\n elLogs.appendChild(logsList);\n\n logsEmpty = el('div', null, 'padding:20px 12px;text-align:center;color:' + TXT_MUTED + ';font-size:12px;font-style:italic;');\n logsEmpty.textContent = 'No activity yet\\\\u2026';\n logsList.appendChild(logsEmpty);\n }\n\n function applyLogFilter() {\n var any = false;\n for (var i = 0; i < logOrder.length; i++) {\n var row = logNodes[logOrder[i]];\n if (!row) continue;\n var hit = !logFilter || (row._search && row._search.indexOf(logFilter) >= 0);\n row.style.display = hit ? 'block' : 'none';\n if (hit) any = true;\n }\n if (logsEmpty) logsEmpty.style.display = (any || !logOrder.length) ? (logOrder.length ? 'none' : 'block') : 'none';\n }\n\n // Build a single log row element for an activity run.\n function buildLogRow(run) {\n run = run || {};\n var id = String(run.id != null ? run.id : Math.random());\n var agentName = run.agent_name || run.agent_id || 'Agent';\n var hue = colorMap[String(run.agent_id)] || DIRECTOR_COLOR;\n var st = normStatus(run.status);\n\n var row = el('div', 'wd-card', 'padding:9px 10px;');\n // Header: dot + ROLE CAPS + phase badge.\n var hdr = el('div', null, 'display:flex;align-items:center;gap:7px;');\n var sdot = el('span', (st === 'running' ? 'wd-pulse' : ''),\n 'width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:' + hue + ';box-shadow:0 0 7px ' + hue + ';');\n var roleLbl = el('span', null, 'font-size:11px;font-weight:800;letter-spacing:.4px;color:' + TXT_DARK + ';' +\n 'white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0;');\n roleLbl.textContent = String(agentName).toUpperCase();\n hdr.appendChild(sdot); hdr.appendChild(roleLbl);\n\n // REQUEST / RESPONSE / FAILED badge.\n var badge = el('span', null, phaseBadgeCss(st));\n badge.textContent = phaseBadgeLabel(st);\n hdr.appendChild(badge);\n row.appendChild(hdr);\n\n // Meta row: clock + duration chip.\n var meta = el('div', null, 'display:flex;align-items:center;gap:6px;margin-top:5px;');\n var clock = el('span', 'wd-mono', 'font-size:10.5px;color:' + TXT_MUTED + ';');\n clock.textContent = fmtClock(run.finished_at || run.started_at);\n meta.appendChild(clock);\n var dur = fmtDuration(run.duration_ms);\n if (dur) {\n var dchip = el('span', 'wd-mono', 'font-size:10px;font-weight:700;color:#52525b;background:#f4f4f5;' +\n 'border:1px solid rgba(20,30,60,0.06);border-radius:6px;padding:1px 6px;');\n dchip.textContent = dur;\n meta.appendChild(dchip);\n }\n row.appendChild(meta);\n\n // Body preview = output / input / error (truncated). asText() guards against\n // object-shaped output/input/error so we never print \"[object Object]\".\n var bodyText = asText((st === 'completed' && run.output) ? run.output\n : (run.input ? run.input : (run.error ? run.error : '')));\n var body = el('div', null, 'font-size:12px;line-height:1.45;color:#3a4150;margin-top:5px;white-space:normal;word-break:break-word;');\n body.textContent = trunc(bodyText, 160);\n if (!bodyText) body.style.display = 'none';\n row.appendChild(body);\n\n // Tool chips parsed from trace.\n var steps = traceSteps(run.trace);\n var toolWrap = null;\n var toolText = '';\n for (var s = 0; s < steps.length; s++) {\n var step = steps[s] || {};\n if (lower(step.t) === 'tool' || step.tool) {\n if (!toolWrap) {\n toolWrap = el('div', null, 'display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;');\n }\n var nm = asText(step.name || step.tool || 'tool') || 'tool';\n var ltc = (step.ms != null) ? fmtDuration(step.ms) : '';\n var chip = el('span', null, 'display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;' +\n 'color:#047857;background:#ecfdf5;border:1px solid rgba(5,150,105,0.18);border-radius:999px;padding:2px 8px;');\n chip.innerHTML = ms('bolt', 13, '#059669') + '<span>' + esc(trunc(nm, 26)) + '</span>' +\n (ltc ? '<span class=\"wd-mono\" style=\"color:#0a7;opacity:.8;\">' + esc(ltc) + '</span>' : '');\n var tip = asText(step.args_preview || step.result_preview || step.preview || '');\n if (tip) chip.title = tip;\n toolText += ' ' + lower(nm);\n toolWrap.appendChild(chip);\n }\n }\n if (toolWrap) row.appendChild(toolWrap);\n\n // COLLAPSIBLE DETAIL — streaming trace + technical footer behind a disclosure (panel stays\n // short). Long entries collapse by default; logOpen[id] persists the open/closed choice across\n // the in-place row replacement (a user-opened row stays open as it streams steps).\n var COLLAPSE_OVER = 3; // collapse by default once there are more than this many step lines\n\n // Parse meaningful step lines (the bulk of a \"long\" entry).\n var prevCount = (streamState[id] && streamState[id].count) || 0;\n var lineSteps = [];\n for (var li = 0; li < steps.length; li++) {\n var txt = stepText(steps[li]);\n if (txt) lineSteps.push({ s: steps[li], text: txt, i: li });\n }\n\n // The collapsible body holds the trace stream + the technical footer.\n var det = el('div', 'wd-log-det', '');\n var hasDetail = false;\n\n if (lineSteps.length) {\n hasDetail = true;\n var stream = el('div', null, 'display:flex;flex-direction:column;gap:0;margin-top:7px;' +\n 'border-left:2px solid ' + hue + '33;padding-left:8px;');\n for (var ls = 0; ls < lineSteps.length; ls++) {\n var item = lineSteps[ls];\n var isNew = (item.i >= prevCount);\n var line = el('div', null, 'display:flex;align-items:flex-start;gap:6px;padding:2px 0;' +\n (isNew ? 'animation:wdFadeIn .5s ease;' : ''));\n var gi = el('span', 'msym', 'font-size:13px;line-height:1.5;flex:0 0 auto;color:' + hue + ';');\n gi.textContent = stepGlyph(item.s);\n var tx = el('span', null, 'font-size:11px;line-height:1.5;color:#3a4150;white-space:normal;word-break:break-word;min-width:0;');\n tx.textContent = item.text;\n line.appendChild(gi); line.appendChild(tx);\n stream.appendChild(line);\n }\n det.appendChild(stream);\n }\n // Remember how many step lines this run reached (only grow — never shrink the seen count).\n streamState[id] = { count: Math.max(prevCount, lineSteps.length) };\n\n // Technical footer (raw ids / trigger / campaign) — inside the disclosure.\n var tech = el('div', 'wd-mono', 'margin-top:6px;padding-top:6px;border-top:1px dashed ' + PANEL_BORDER + ';' +\n 'font-size:10px;color:' + TXT_MUTED + ';line-height:1.5;');\n var techBits = [];\n techBits.push('run ' + esc(trunc(id, 14)));\n if (run.trigger) techBits.push('trigger ' + esc(String(run.trigger)));\n if (run.campaign_run_id) techBits.push('campaign');\n techBits.push('status ' + esc(String(run.status || '')));\n tech.innerHTML = techBits.join(' \\\\u00B7 ');\n det.appendChild(tech);\n\n // Default open state: respect a remembered choice, else collapse long entries.\n var defaultOpen = (lineSteps.length <= COLLAPSE_OVER);\n var isOpen = (logOpen[id] != null) ? !!logOpen[id] : defaultOpen;\n logOpen[id] = isOpen;\n det.style.display = isOpen ? 'block' : 'none';\n\n // Disclosure toggle — shown whenever there is a trace worth collapsing.\n if (lineSteps.length > COLLAPSE_OVER || (lineSteps.length && !isOpen)) {\n var toggle = el('button', 'wd-log-toggle', '');\n var chev = el('span', 'wd-chev msym' + (isOpen ? ' is-open' : ''), 'font-size:14px;color:' + DIRECTOR_COLOR + ';');\n chev.textContent = 'chevron_right';\n var tlbl = el('span', null, '');\n tlbl.textContent = isOpen ? 'Hide trace' : ('Show trace (' + lineSteps.length + ')');\n toggle.appendChild(chev); toggle.appendChild(tlbl);\n (function (rid, d, c, l) {\n toggle.addEventListener('click', function () {\n var nowOpen = (d.style.display === 'none');\n d.style.display = nowOpen ? 'block' : 'none';\n c.className = 'wd-chev msym' + (nowOpen ? ' is-open' : '');\n l.textContent = nowOpen ? 'Hide trace' : ('Show trace (' + lineSteps.length + ')');\n logOpen[rid] = nowOpen;\n });\n })(id, det, chev, tlbl);\n row.appendChild(toggle);\n row.appendChild(det);\n } else if (hasDetail || techBits.length) {\n // Short entry: show the detail inline (no toggle needed), trace already open.\n det.style.display = 'block';\n logOpen[id] = true;\n row.appendChild(det);\n }\n\n row._search = lower(agentName + ' ' + String(run.status) + ' ' + bodyText + ' ' + toolText);\n row._id = id;\n return row;\n }\n\n function phaseBadgeCss(st) {\n var base = 'font-size:9.5px;font-weight:800;letter-spacing:.5px;border-radius:6px;padding:2px 7px;flex:0 0 auto;';\n if (st === 'running') return base + 'color:' + USER_COLOR + ';background:' + USER_COLOR_LIGHT + ';';\n if (st === 'failed') return base + 'color:' + STATUS_FAILED + ';background:#fdecec;';\n if (st === 'completed') return base + 'color:#059669;background:#ecfdf5;';\n return base + 'color:' + TXT_MUTED + ';background:rgba(20,30,60,0.05);';\n }\n function phaseBadgeLabel(st) {\n if (st === 'running') return 'REQUEST';\n if (st === 'failed') return 'FAILED';\n if (st === 'completed') return 'RESPONSE';\n return 'IDLE';\n }\n\n // Full render (first load): rebuild the whole list once.\n function renderLogs(list) {\n if (!logsList) return;\n list = Array.isArray(list) ? list : (list && Array.isArray(list.runs) ? list.runs : []);\n logsList.innerHTML = '';\n logNodes = {}; logOrder = []; streamState = {}; logOpen = {};\n logsList.appendChild(logsEmpty);\n if (!list.length) { logsEmpty.style.display = 'block'; return; }\n logsEmpty.style.display = 'none';\n // Newest first (the endpoint already orders by started_at DESC).\n for (var i = 0; i < list.length; i++) {\n var run = list[i];\n if (!run || run.id == null) continue;\n var id = String(run.id);\n var node = buildLogRow(run);\n logNodes[id] = node;\n logOrder.push(id);\n logsList.appendChild(node);\n }\n capLogDom();\n applyLogFilter();\n }\n\n // Append-not-rebuild: PREPEND new rows, update an existing row in place when its status flips.\n function appendLogs(rows) {\n if (!logsList) return;\n rows = Array.isArray(rows) ? rows : (rows && Array.isArray(rows.runs) ? rows.runs : []);\n if (!rows.length) return;\n if (logsEmpty) logsEmpty.style.display = 'none';\n // Oldest of the new batch first so the newest ends up on top after prepends.\n for (var i = rows.length - 1; i >= 0; i--) {\n var run = rows[i];\n if (!run || run.id == null) continue;\n var id = String(run.id);\n var fresh = buildLogRow(run);\n if (logNodes[id]) {\n // In-place replace (status flipped running->completed etc.); preserve position.\n var old = logNodes[id];\n if (old.parentNode) old.parentNode.replaceChild(fresh, old);\n logNodes[id] = fresh;\n } else {\n logNodes[id] = fresh;\n logOrder.unshift(id);\n if (logsList.firstChild && logsList.firstChild !== logsEmpty) {\n logsList.insertBefore(fresh, logsList.firstChild === logsEmpty ? logsList.firstChild.nextSibling : logsList.firstChild);\n } else {\n logsList.appendChild(fresh);\n }\n }\n }\n capLogDom();\n applyLogFilter();\n }\n\n // Bound the DOM size — keep the most recent ~80 rows.\n function capLogDom() {\n var MAX = 80;\n while (logOrder.length > MAX) {\n var dropId = logOrder.pop();\n var dn = logNodes[dropId];\n if (dn && dn.parentNode) dn.parentNode.removeChild(dn);\n delete logNodes[dropId];\n delete streamState[dropId];\n delete logOpen[dropId];\n }\n }\n\n function buildKanban() {\n if (!elKanban) return;\n elKanban.innerHTML = '';\n elKanban.style.cssText += ';display:flex;flex-direction:column;';\n var head = el('div', null, 'flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:9px 12px 7px;border-bottom:1px solid ' + PANEL_BORDER + ';');\n head.innerHTML = ms('view_kanban', 16, TXT_LABEL) + '<span class=\"wd-label\">Board</span>';\n elKanban.appendChild(head);\n\n kanbanCols = el('div', null, 'flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px;');\n elKanban.appendChild(kanbanCols);\n\n for (var c = 0; c < KAN_COLS.length; c++) {\n var col = el('div', null, 'display:flex;flex-direction:column;min-height:0;min-width:0;');\n var ch = el('div', null, 'display:flex;align-items:center;gap:6px;margin-bottom:6px;flex:0 0 auto;');\n var label = el('span', 'wd-label', 'font-size:10px;');\n label.textContent = KAN_COLS[c].label;\n var count = el('span', 'wd-mono', 'font-size:10px;font-weight:800;color:' + TXT_MUTED + ';background:rgba(20,30,60,0.06);border-radius:7px;padding:1px 7px;');\n count.textContent = '0';\n ch.appendChild(label); ch.appendChild(el('span', null, 'flex:1;')); ch.appendChild(count);\n col.appendChild(ch);\n var listEl = el('div', 'wd-scroll', 'flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px;padding-right:2px;');\n col.appendChild(listEl);\n col._count = count; col._list = listEl; col._key = KAN_COLS[c].key;\n kanbanCols.appendChild(col);\n }\n }\n\n function buildTaskCard(task) {\n task = task || {};\n var id = String(task.id != null ? task.id : Math.random());\n var st = lower(task.status);\n var assignee = task.assignee || '';\n var hasAssignee = !!assignee;\n var tagColor = hasAssignee ? (colorByName(assignee) || DIRECTOR_COLOR) : USER_COLOR;\n var tagName = hasAssignee ? assignee : 'User';\n\n var card = el('div', 'wd-card', 'padding:8px 9px;');\n var titleRow = el('div', null, 'display:flex;align-items:flex-start;gap:6px;cursor:pointer;');\n var chev = el('span', 'wd-chev msym', 'font-size:15px;color:' + TXT_MUTED + ';flex:0 0 auto;margin-top:1px;');\n chev.textContent = 'chevron_right';\n var ttl = el('span', null, 'font-size:12px;font-weight:700;color:' + TXT_DARK + ';line-height:1.35;flex:1 1 auto;min-width:0;');\n ttl.textContent = trunc(task.title || '(untitled)', 80);\n titleRow.appendChild(chev); titleRow.appendChild(ttl);\n card.appendChild(titleRow);\n\n // Collapsible description.\n var desc = el('div', null, 'display:none;font-size:11px;line-height:1.45;color:' + TXT_MUTED + ';margin-top:5px;white-space:normal;word-break:break-word;');\n if (task.description) desc.textContent = trunc(task.description, 220);\n card.appendChild(desc);\n titleRow.addEventListener('click', function () {\n var open = desc.style.display === 'block';\n desc.style.display = open ? 'none' : (task.description ? 'block' : 'none');\n chev.className = 'wd-chev msym' + (!open ? ' is-open' : '');\n });\n\n // Footer: agent tag + priority + due + working pill.\n var foot = el('div', null, 'display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap;');\n var tag = el('span', null, 'display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:' + TXT_MUTED + ';');\n tag.innerHTML = '<span style=\"width:8px;height:8px;border-radius:50%;background:' + tagColor + ';flex:0 0 auto;\"></span><span>' + esc(trunc(tagName, 18)) + '</span>';\n foot.appendChild(tag);\n\n if (task.priority) {\n var pr = el('span', null, 'font-size:9px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;border-radius:6px;padding:1px 6px;' + priorityCss(task.priority));\n pr.textContent = String(task.priority);\n foot.appendChild(pr);\n }\n if (task.due_date) {\n var due = el('span', 'wd-mono', 'display:inline-flex;align-items:center;gap:3px;font-size:9.5px;color:' + TXT_MUTED + ';');\n due.innerHTML = ms('event', 12, TXT_MUTED) + '<span>' + esc(fmtDate(task.due_date)) + '</span>';\n foot.appendChild(due);\n }\n foot.appendChild(el('span', null, 'flex:1;'));\n if (st === 'doing') {\n var wp = el('span', null, 'font-size:9px;font-weight:800;letter-spacing:.4px;color:' + USER_COLOR + ';background:' + USER_COLOR_LIGHT + ';border-radius:6px;padding:1px 7px;');\n wp.textContent = 'WORKING';\n foot.appendChild(wp);\n }\n card.appendChild(foot);\n\n card._id = id;\n return card;\n }\n\n function priorityCss(p) {\n p = lower(p);\n if (p === 'urgent') return 'color:#EA4335;background:#fdecec;';\n if (p === 'high') return 'color:#d97706;background:#fffbeb;';\n if (p === 'medium') return 'color:' + DIRECTOR_COLOR + ';background:' + USER_COLOR_LIGHT + ';';\n return 'color:' + TXT_MUTED + ';background:rgba(20,30,60,0.05);';\n }\n function fmtDate(iso) {\n var d = new Date(iso);\n if (isNaN(d.getTime())) return String(iso);\n try { return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' }); }\n catch (e) { return String(iso).slice(0, 10); }\n }\n\n // Map a name onto a stable member color (deterministic) when no roster index is known.\n function colorByName(name) {\n name = lower(name);\n if (/director|lead/.test(name)) return DIRECTOR_COLOR;\n var h = 0;\n for (var i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) % 100000;\n return memberColorHex(h);\n }\n\n // Keyed-diff render of the board (cards by task id, never wipe the whole column).\n function renderKanban(board) {\n if (!kanbanCols) return;\n board = board || {};\n var columns = board.columns || [];\n // Index columns by key for easy lookup.\n var byKey = {};\n for (var i = 0; i < columns.length; i++) byKey[columns[i].key] = columns[i];\n var seen = {};\n var colEls = kanbanCols.children;\n for (var c = 0; c < colEls.length; c++) {\n var colEl = colEls[c];\n var data = byKey[colEl._key] || { tasks: [] };\n var tasks = data.tasks || [];\n if (colEl._count) colEl._count.textContent = String(tasks.length);\n // Rebuild ordering in the column list while reusing nodes by id.\n var listEl = colEl._list;\n // Empty state.\n if (!tasks.length) {\n if (!listEl._empty) {\n listEl.innerHTML = '';\n var emp = el('div', null, 'font-size:11px;color:' + TXT_MUTED + ';font-style:italic;border:1px dashed ' + PANEL_BORDER + ';border-radius:8px;padding:10px;text-align:center;');\n emp.textContent = 'Empty';\n listEl.appendChild(emp); listEl._empty = emp;\n }\n listEl._empty.style.display = 'block';\n continue;\n }\n if (listEl._empty) listEl._empty.style.display = 'none';\n // Build the ordered set of nodes for this column.\n var frag = document.createDocumentFragment();\n for (var t = 0; t < tasks.length; t++) {\n var task = tasks[t];\n if (!task || task.id == null) continue;\n var tid = String(task.id);\n seen[tid] = true;\n var node = taskNodes[tid];\n // Rebuild card (cheap; preserves open-state risk is acceptable for status flips).\n var fresh = buildTaskCard(task);\n taskNodes[tid] = fresh;\n frag.appendChild(fresh);\n }\n // Replace the column contents (keep the empty node out).\n listEl.innerHTML = '';\n listEl._empty = null;\n listEl.appendChild(frag);\n }\n // Drop stale task nodes.\n for (var key in taskNodes) { if (!seen[key]) delete taskNodes[key]; }\n }\n\n // ---- RIGHT PROJECT INFO ----------------------------------------------\n function buildProject() {\n if (!elProject) return;\n elProject.innerHTML = '';\n elProject.className = (elProject.className || '') + ' wd-scroll';\n // RIGHT column must scroll, but the shell sets #world-project{overflow:hidden} via an ID\n // selector that out-specifies .wd-scroll — force scrolling with INLINE styles (inline beats\n // ID). min-height:0 lets the flex column shrink; max-height bounds it so it scrolls as one.\n elProject.style.cssText += ';display:flex;flex-direction:column;padding:14px;gap:14px;' +\n 'overflow-y:auto;overflow-x:hidden;min-height:0;max-height:100%;';\n\n // Title + phase badge.\n var titleRow = el('div', null, 'display:flex;align-items:center;gap:8px;flex:0 0 auto;');\n titleRow.innerHTML = ms('insights', 17, TXT_LABEL) + '<span class=\"wd-label\" style=\"font-size:12px;\">Project Info</span>';\n projPhase = el('span', null, 'margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.4px;border-radius:7px;padding:3px 9px;display:flex;align-items:center;gap:5px;');\n titleRow.appendChild(projPhase);\n elProject.appendChild(titleRow);\n setPhase('idle');\n\n // DIRECTOR CHAT box — user message shows immediately; the streaming assistant reply lands here\n // too so it's visible. (Start-New-Project button removed; Director chat is the project entry.)\n buildChat();\n\n // USER BRIEF section.\n var briefWrap = el('div', 'wd-card', 'flex:0 0 auto;padding:11px 12px;');\n var briefLbl = el('div', 'wd-label', 'margin-bottom:6px;');\n briefLbl.textContent = 'User Brief';\n briefWrap.appendChild(briefLbl);\n projBrief = el('div', null, 'font-size:13px;line-height:1.5;color:' + TXT_DARK + ';white-space:normal;word-break:break-word;');\n projBrief.innerHTML = '<span style=\"color:' + TXT_MUTED + ';font-style:italic;\">No active brief\\\\u2026</span>';\n briefWrap.appendChild(projBrief);\n projChips = el('div', null, 'display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;');\n briefWrap.appendChild(projChips);\n elProject.appendChild(briefWrap);\n\n // MEMBER ROSTER section.\n var rosterWrap = el('div', 'wd-card', 'flex:0 0 auto;padding:11px 12px;');\n var rosterLbl = el('div', 'wd-label', 'margin-bottom:8px;');\n rosterLbl.textContent = 'Member Roster';\n rosterWrap.appendChild(rosterLbl);\n projRoster = el('div', null, 'display:flex;flex-direction:column;gap:7px;');\n rosterWrap.appendChild(projRoster);\n elProject.appendChild(rosterWrap);\n\n // ORCHESTRATION section — live trace: Director -> agents -> synthesis -> Approvals.\n var traceWrap = el('div', 'wd-card', 'flex:0 0 auto;padding:11px 12px;');\n var traceHead = el('div', null, 'display:flex;align-items:center;gap:7px;margin-bottom:8px;');\n var traceLbl = el('span', 'wd-label', '');\n traceLbl.textContent = 'Orchestration';\n traceHead.appendChild(traceLbl);\n traceHead.appendChild(el('span', null, 'flex:1;'));\n projTraceBadge = el('span', null, 'display:none;font-size:9.5px;font-weight:800;letter-spacing:.4px;' +\n 'border-radius:6px;padding:2px 8px;align-items:center;gap:5px;');\n traceHead.appendChild(projTraceBadge);\n traceWrap.appendChild(traceHead);\n projTrace = el('div', null, 'display:flex;flex-direction:column;gap:0;');\n projTrace.innerHTML = '<div style=\"font-size:11px;color:' + TXT_MUTED + ';font-style:italic;\">No orchestration yet\\\\u2026</div>';\n traceWrap.appendChild(projTrace);\n elProject.appendChild(traceWrap);\n\n // AGENT ACTIVITY section — real run counts (no token/cost framing).\n var usageWrap = el('div', 'wd-card', 'flex:0 0 auto;padding:11px 12px;');\n var usageHead = el('div', null, 'display:flex;align-items:center;gap:7px;margin-bottom:8px;');\n usageHead.innerHTML = '<span class=\"wd-label\">Agent Activity</span>';\n usageWrap.appendChild(usageHead);\n\n var bigRow = el('div', null, 'display:flex;align-items:baseline;gap:7px;');\n projUsageBig = el('span', 'wd-mono', 'font-size:30px;font-weight:900;color:' + TXT_DARK + ';line-height:1;');\n projUsageBig.textContent = '0';\n var bigLbl = el('span', null, 'font-size:12px;font-weight:700;color:' + TXT_MUTED + ';');\n bigLbl.textContent = 'runs';\n bigRow.appendChild(projUsageBig); bigRow.appendChild(bigLbl);\n usageWrap.appendChild(bigRow);\n\n projUsageSub = el('div', null, 'font-size:11px;color:' + TXT_MUTED + ';margin-top:3px;');\n projUsageSub.textContent = '0 done + 0 active + 0 failed';\n usageWrap.appendChild(projUsageSub);\n\n projUsageRows = el('div', null, 'display:flex;flex-direction:column;gap:6px;margin-top:10px;');\n usageWrap.appendChild(projUsageRows);\n elProject.appendChild(usageWrap);\n }\n\n function setPhase(phase) {\n if (!projPhase) return;\n phase = lower(phase);\n if (phase === 'working' || phase === 'active' || phase === 'running') {\n projPhase.style.color = USER_COLOR;\n projPhase.style.background = USER_COLOR_LIGHT;\n projPhase.innerHTML = '<span class=\"wd-pulse\" style=\"width:7px;height:7px;border-radius:50%;background:' + USER_COLOR + ';\"></span><span>WORKING</span>';\n } else if (phase === 'done' || phase === 'completed') {\n projPhase.style.color = PHASE_DONE;\n projPhase.style.background = 'rgba(34,197,94,0.12)';\n projPhase.innerHTML = '<span style=\"width:7px;height:7px;border-radius:50%;background:' + PHASE_DONE + ';\"></span><span>DONE</span>';\n } else {\n projPhase.style.color = TXT_MUTED;\n projPhase.style.background = 'rgba(20,30,60,0.05)';\n projPhase.innerHTML = '<span style=\"width:7px;height:7px;border-radius:50%;background:' + STATUS_IDLE + ';\"></span><span>READY TO START</span>';\n }\n }\n\n function chip(label, value) {\n return '<span style=\"font-size:10px;font-weight:600;color:' + TXT_LABEL + ';background:rgba(20,30,60,0.05);' +\n 'border-radius:7px;padding:2px 8px;display:inline-flex;gap:4px;\">' +\n '<span style=\"color:' + TXT_MUTED + ';\">' + esc(asText(label)) + '</span><span style=\"color:' + TXT_DARK + ';font-weight:700;\">' + esc(asText(value)) + '</span></span>';\n }\n\n function renderProject(project) {\n if (!elProject) return;\n project = project || {};\n var campaign = project.campaign || null;\n var usage = project.usage || {};\n\n // Phase (explicit or inferred).\n setPhase(project.phase || (campaign ? 'working' : 'idle'));\n\n // Brief. asText() guards an object-shaped goal/description.\n if (projBrief) {\n var brief = campaign ? asText(campaign.goal || campaign.description || '') : '';\n if (brief) projBrief.textContent = brief;\n else projBrief.innerHTML = '<span style=\"color:' + TXT_MUTED + ';font-style:italic;\">No active brief\\\\u2026</span>';\n }\n if (projChips) {\n var chips = '';\n if (campaign) {\n if (campaign.channel) chips += chip('channel', campaign.channel);\n if (campaign.audience) chips += chip('audience', campaign.audience);\n if (campaign.workspace) chips += chip('workspace', campaign.workspace);\n if (campaign.mode) chips += chip('mode', campaign.mode);\n }\n projChips.innerHTML = chips;\n projChips.style.display = chips ? 'flex' : 'none';\n }\n\n // Roster rows (by sequence).\n renderRoster(campaign ? (campaign.agents || []) : []);\n\n // Orchestration trace — the latest campaign run rides on project.run (or\n // campaign.run); fall back to project.orchestration / project.trace if present.\n var run = project.run || (campaign && campaign.run) || project.orchestration || project.trace || null;\n renderTrace(run);\n\n // Usage (REAL runs; tokens not tracked).\n var runs = usage.runs || {};\n var total = Number(runs.total != null ? runs.total : 0) || 0;\n var done = Number(runs.completed != null ? runs.completed : 0) || 0;\n var active = Number(runs.running != null ? runs.running : 0) || 0;\n var failed = Number(runs.failed != null ? runs.failed : 0) || 0;\n if (projUsageBig) projUsageBig.textContent = String(total);\n if (projUsageSub) projUsageSub.textContent = done + ' done + ' + active + ' active + ' + failed + ' failed';\n renderUsageRows(usage.perAgent || []);\n\n // Scene status label — real state. 'Live' when a run is active (runs.running>0)\n // or the campaign is running/active; else 'Idle'.\n var phaseStr = lower(project.phase || (campaign ? 'working' : 'idle'));\n var campaignActive = /working|active|running/.test(phaseStr);\n setSceneState(active > 0 || campaignActive);\n\n // Top bar model chip — real data via resolveModelLabel; hide when no campaign.\n if (topModel) {\n var modelTxt = resolveModelLabel(campaign);\n if (modelTxt) {\n topModel.style.display = 'flex';\n topModel.innerHTML = ms('memory', 14, TXT_MUTED) + '<span class=\"wd-mono\">' + esc(trunc(modelTxt, 22)) + '</span>';\n } else {\n topModel.style.display = 'none';\n }\n }\n }\n\n function renderRoster(list) {\n if (!projRoster) return;\n list = Array.isArray(list) ? list.slice() : [];\n list.sort(function (a, b) { return (Number(a.sequence) || 0) - (Number(b.sequence) || 0); });\n if (!list.length) {\n projRoster.innerHTML = '<div style=\"font-size:12px;color:' + TXT_MUTED + ';font-style:italic;\">No members yet</div>';\n rosterNodes = {};\n return;\n }\n projRoster.innerHTML = '';\n rosterNodes = {};\n for (var i = 0; i < list.length; i++) {\n var m = list[i] || {};\n var agent = m.agent || {};\n var id = String(m.agent_id != null ? m.agent_id : (agent.id != null ? agent.id : i));\n var hue = colorMap[id] || colorForRow(m, i);\n var name = agent.name || m.name || id;\n var role = m.role || agent.role || '';\n var row = el('div', null, 'display:flex;align-items:center;gap:8px;');\n row.innerHTML =\n '<span style=\"width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:' + hue + ';box-shadow:0 0 6px ' + hue + ';\"></span>' +\n '<span style=\"flex:1;min-width:0;font-size:12.5px;font-weight:600;color:' + TXT_DARK + ';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">' + esc(name) + '</span>' +\n (role ? '<span style=\"font-size:10px;color:' + TXT_MUTED + ';text-transform:capitalize;\">' + esc(trunc(role, 16)) + '</span>' : '');\n projRoster.appendChild(row);\n rosterNodes[id] = row;\n }\n }\n\n function renderUsageRows(perAgent) {\n if (!projUsageRows) return;\n perAgent = Array.isArray(perAgent) ? perAgent.slice() : [];\n perAgent.sort(function (a, b) { return (Number(b.runs) || 0) - (Number(a.runs) || 0); });\n if (!perAgent.length) {\n projUsageRows.innerHTML = '<div style=\"font-size:11px;color:' + TXT_MUTED + ';font-style:italic;\">No runs yet</div>';\n usageNodes = {};\n return;\n }\n projUsageRows.innerHTML = '';\n usageNodes = {};\n for (var i = 0; i < perAgent.length; i++) {\n var a = perAgent[i] || {};\n var id = String(a.agent_id != null ? a.agent_id : i);\n var hue = colorMap[id] || memberColorHex(i);\n var name = (a.name || id);\n var runs = Number(a.runs) || 0;\n var right = '<span class=\"wd-mono\" style=\"font-size:11px;font-weight:800;color:' + TXT_DARK + ';\">' + runs + '</span>' +\n '<span style=\"font-size:10px;color:' + TXT_MUTED + ';margin-left:4px;\">runs</span>';\n var row = el('div', null, 'display:flex;align-items:center;gap:7px;');\n row.innerHTML =\n '<span style=\"width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:' + hue + ';\"></span>' +\n '<span style=\"flex:1;min-width:0;font-size:11px;font-weight:700;letter-spacing:.2px;color:' + TXT_DARK + ';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">' + esc(String(name).toUpperCase()) + '</span>' +\n '<span style=\"flex:0 0 auto;display:flex;align-items:baseline;\">' + right + '</span>';\n projUsageRows.appendChild(row);\n usageNodes[id] = row;\n }\n }\n\n // ---- ORCHESTRATION trace ----------------------------------------------\n // Per-step glyph + hue for the four directorTrace kinds.\n function traceKindGlyph(t) {\n t = lower(t);\n if (t === 'director') return 'account_tree';\n if (t === 'agent') return 'smart_toy';\n if (t === 'synthesis') return 'merge';\n if (t === 'approval') return 'task_alt';\n return 'radio_button_checked';\n }\n function traceKindHue(step, index) {\n var t = lower(step && step.t);\n if (t === 'director') return DIRECTOR_COLOR;\n if (t === 'synthesis') return USER_COLOR;\n if (t === 'approval') return EMERALD;\n if (t === 'agent') {\n // Prefer the roster color for this agent name; else cycle member hues.\n var nm = lower(step && step.name);\n if (nm) {\n var byName = colorByName(step.name);\n if (byName) return byName;\n }\n return memberColorHex(index);\n }\n return TXT_MUTED;\n }\n // Human title per step kind.\n function traceTitle(step) {\n var t = lower(step && step.t);\n if (t === 'director') return 'Director';\n if (t === 'agent') return asText(step && step.name) || 'Agent';\n if (t === 'synthesis') return 'Synthesis';\n if (t === 'approval') return 'Approvals';\n return 'Step';\n }\n // Preview/note text per step kind. asText() guards object-shaped preview/note.\n function traceBody(step) {\n if (!step) return '';\n var pv = asText(step.preview);\n if (pv) return pv;\n return asText(step.note);\n }\n\n // Set the run-status badge (running / completed / failed) on the Orchestration head.\n function setTraceBadge(status) {\n if (!projTraceBadge) return;\n var st = normStatus(status);\n if (!status) { projTraceBadge.style.display = 'none'; return; }\n projTraceBadge.style.display = 'flex';\n if (st === 'running') {\n projTraceBadge.style.color = USER_COLOR;\n projTraceBadge.style.background = USER_COLOR_LIGHT;\n projTraceBadge.innerHTML = '<span class=\"wd-pulse\" style=\"width:7px;height:7px;border-radius:50%;background:' + USER_COLOR + ';\"></span><span>RUNNING</span>';\n } else if (st === 'failed') {\n projTraceBadge.style.color = STATUS_FAILED;\n projTraceBadge.style.background = '#fdecec';\n projTraceBadge.innerHTML = '<span style=\"width:7px;height:7px;border-radius:50%;background:' + STATUS_FAILED + ';\"></span><span>FAILED</span>';\n } else if (st === 'completed') {\n projTraceBadge.style.color = '#059669';\n projTraceBadge.style.background = '#ecfdf5';\n projTraceBadge.innerHTML = '<span style=\"width:7px;height:7px;border-radius:50%;background:#059669;\"></span><span>COMPLETED</span>';\n } else {\n projTraceBadge.style.color = TXT_MUTED;\n projTraceBadge.style.background = 'rgba(20,30,60,0.05)';\n projTraceBadge.innerHTML = '<span style=\"width:7px;height:7px;border-radius:50%;background:' + STATUS_IDLE + ';\"></span><span>' + esc(String(status).toUpperCase()) + '</span>';\n }\n }\n\n // Render the ordered orchestration trace. Accepts a run object ({status,steps}/{trace}) or a\n // bare steps array. While 'running', the latest step gets a live pulse.\n function renderTrace(run) {\n if (!projTrace) return;\n // Normalize input → { status, steps }.\n var status = '';\n var steps = [];\n if (Array.isArray(run)) {\n steps = run;\n } else if (run && typeof run === 'object') {\n status = run.status != null ? run.status : '';\n if (Array.isArray(run.steps)) steps = run.steps;\n else if (run.trace != null) steps = traceSteps(run.trace);\n else if (Array.isArray(run.director)) steps = run.director;\n }\n setTraceBadge(status);\n\n if (!steps.length) {\n projTrace.innerHTML = '<div style=\"font-size:11px;color:' + TXT_MUTED + ';font-style:italic;\">No orchestration yet\\\\u2026</div>';\n return;\n }\n var st = normStatus(status);\n var running = (st === 'running');\n var lastIdx = steps.length - 1;\n var agentSeq = 0; // index among agent steps (for hue cycling fallback)\n\n projTrace.innerHTML = '';\n for (var i = 0; i < steps.length; i++) {\n var step = steps[i] || {};\n var kind = lower(step.t);\n var hueIdx = (kind === 'agent') ? agentSeq++ : i;\n var hue = traceKindHue(step, hueIdx);\n var isLast = (i === lastIdx);\n var live = running && isLast;\n\n // Row: timeline rail (dot + connector) + content.\n var row = el('div', null, 'display:flex;gap:9px;align-items:flex-start;');\n\n // Rail.\n var rail = el('div', null, 'display:flex;flex-direction:column;align-items:center;flex:0 0 auto;width:18px;');\n var node = el('span', (live ? 'wd-pulse' : ''),\n 'width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;' +\n 'background:' + hue + '1A;border:1.5px solid ' + hue + ';');\n node.innerHTML = ms(traceKindGlyph(kind), 11, hue);\n rail.appendChild(node);\n if (!isLast) {\n var conn = el('span', null, 'width:2px;flex:1 1 auto;min-height:14px;background:' + PANEL_BORDER + ';margin:2px 0;');\n rail.appendChild(conn);\n }\n row.appendChild(rail);\n\n // Content.\n var content = el('div', null, 'flex:1 1 auto;min-width:0;padding-bottom:' + (isLast ? '0' : '10px') + ';');\n var head = el('div', null, 'display:flex;align-items:center;gap:6px;');\n var ttl = el('span', null, 'font-size:11.5px;font-weight:800;letter-spacing:.2px;color:' + TXT_DARK + ';' +\n 'white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;');\n ttl.textContent = traceTitle(step);\n head.appendChild(ttl);\n // Role chip for agent steps.\n if (kind === 'agent' && step.role) {\n var roleChip = el('span', null, 'flex:0 0 auto;font-size:9px;color:' + TXT_MUTED + ';text-transform:capitalize;');\n roleChip.textContent = trunc(step.role, 18);\n head.appendChild(roleChip);\n }\n head.appendChild(el('span', null, 'flex:1;'));\n // Clock.\n var clk = el('span', 'wd-mono', 'flex:0 0 auto;font-size:9.5px;color:' + TXT_MUTED + ';');\n clk.textContent = fmtClock(step.ts);\n head.appendChild(clk);\n content.appendChild(head);\n\n // Preview / note body.\n var bodyText = traceBody(step);\n if (bodyText) {\n var body = el('div', null, 'font-size:11px;line-height:1.45;color:#3a4150;margin-top:3px;' +\n 'white-space:normal;word-break:break-word;');\n body.textContent = trunc(bodyText, 160);\n content.appendChild(body);\n }\n row.appendChild(content);\n projTrace.appendChild(row);\n }\n }\n\n // ---- TOP BAR live render ----------------------------------------------\n function renderTopbar(project, agents) {\n project = project || {};\n var campaign = project.campaign || null;\n // Roster color map (keeps logs/usage colors in agreement with the 3D).\n if (Array.isArray(agents)) { colorMap = colorMapFromRoster(agents); rosterCount = agents.length; }\n else if (campaign && Array.isArray(campaign.agents)) { rosterCount = campaign.agents.length; }\n if (topTeam) topTeam.innerHTML = ms('group', 14, DIRECTOR_COLOR) + '<span class=\"wd-mono\">' + rosterCount + '</span>';\n if (sceneTeamBadge) sceneTeamBadge.innerHTML = ms('groups', 15, DIRECTOR_COLOR) + '<span>Team \\\\u00B7 ' + rosterCount + '</span>';\n if (topProject) topProject.textContent = campaign ? (campaign.name || 'Project') : 'No active project';\n // Auto-approve: 'auto' campaign mode or an explicit project.autoApprove flag.\n var auto = !!(project.autoApprove || (campaign && lower(campaign.mode) === 'auto'));\n setAutoApprove(auto);\n if (topModel) {\n var modelTxt = resolveModelLabel(campaign);\n if (modelTxt) {\n topModel.style.display = 'flex';\n topModel.innerHTML = ms('memory', 14, TXT_MUTED) + '<span class=\"wd-mono\">' + esc(trunc(modelTxt, 22)) + '</span>';\n } else {\n topModel.style.display = 'none';\n }\n }\n }\n`;\n",[224],"10f49526-5e7f-11f1-8071-1607ee4eb77e","frontend_world_dash_chat.ts","10f495f8-5e7f-11f1-8071-1607ee4eb77e",942,["D",1780403526320],"// frontend_world_dash_chat.ts — SOURCE FRAGMENT of the /world dashboard browser module.\n// Exports DASH_CHAT: a plain string of browser-JS SOURCE (function declarations only — NO\n// top-level state). getWorldDashJS() in frontend_world_dash.ts concatenates this fragment\n// INSIDE the createDash closure, so every function here shares that one closure (the shared\n// var chatStreamRow/chatStreamBody/chatStreamText/chatStreamTools etc. live in the entry file).\n// Contains: SAFE markdown (mdInline/mdToHtml with nested flushList/flushCode), and the Director\n// chat box (buildChat/setRunBtnIdle/setRunBtnBusy/chatScroll/chatAppend/chatStreamStart/\n// chatStreamChunk/chatStreamEnd/chatStreamTool). mdInline/mdToHtml moved here from the module\n// top level into the createDash scope — their only callers (chatAppend/chatStreamEnd) live here\n// and they reference only closure-visible helpers (esc, DIRECTOR_COLOR), so behavior is identical.\n// FOOTGUNS: keep the SAME escaping as the entry template (escaped backticks and \\${ stay\n// escaped); NO new unescaped backticks or ${...}. Keep under 80000 bytes.\nexport const DASH_CHAT = `\n// Tiny SAFE markdown -> HTML (assistant bubbles only). Golden rule: ESCAPE the raw text\n// FIRST (so no user/model text can inject HTML), then apply markdown transforms on the\n// already-escaped string. Supports fenced code, inline code, bold, italic, links, bullet\n// + numbered lists, line breaks. Used by chatAppend / chatStreamEnd.\nfunction mdInline(s) {\n // s is ALREADY html-escaped here. Apply inline spans (no block elements).\n // inline code \\`x\\` FIRST so its contents aren't touched by bold/italic/link.\n var codeStash = [];\n s = s.replace(/\\`([^\\`]+)\\`/g, function (m, code) {\n codeStash.push('<code class=\"wd-mono\" style=\"font-size:11.5px;' +\n 'background:rgba(20,30,60,0.06);border-radius:4px;padding:1px 4px;\">' + code + '</code>');\n return '\\\\u0000' + (codeStash.length - 1) + '\\\\u0000';\n });\n // links: [text](http(s)://url) — url restricted to http/https to stay safe.\n s = s.replace(/\\\\[([^\\\\]]+)\\\\]\\\$(https?:\\\\/\\\\/[^\\\\s)]+)\\\$/g, function (m, txt, url) {\n return '<a href=\"' + url + '\" target=\"_blank\" rel=\"noopener noreferrer\" ' +\n 'style=\"color:' + DIRECTOR_COLOR + ';text-decoration:underline;\">' + txt + '</a>';\n });\n // bold **x** (before italic so ** isn't eaten by * rule).\n s = s.replace(/\\\\*\\\\*([^*]+)\\\\*\\\\*/g, '<strong>$1</strong>');\n // italic *x* (avoid matching across already-consumed bold).\n s = s.replace(/(^|[^*])\\\\*([^*\\\\n]+)\\\\*(?!\\\\*)/g, '$1<em>$2</em>');\n // restore stashed inline-code spans.\n s = s.replace(/\\\\u0000(\\\\d+)\\\\u0000/g, function (m, n) { return codeStash[Number(n)] || ''; });\n return s;\n}\nfunction mdToHtml(raw) {\n raw = (raw == null) ? '' : String(raw);\n // ESCAPE FIRST.\n var text = esc(raw);\n var out = [];\n var lines = text.split(/\\\\r?\\\\n/);\n var inCode = false; // inside a fenced code block\n var codeBuf = [];\n var listType = ''; // '' | 'ul' | 'ol'\n var listBuf = [];\n function flushList() {\n if (!listType) return;\n out.push('<' + listType + ' style=\"margin:4px 0;padding-left:20px;\">' + listBuf.join('') + '</' + listType + '>');\n listType = ''; listBuf = [];\n }\n function flushCode() {\n out.push('<pre style=\"margin:6px 0;padding:8px 10px;background:rgba(20,30,60,0.06);border-radius:8px;' +\n 'overflow-x:auto;\"><code class=\"wd-mono\" style=\"font-size:11.5px;line-height:1.5;white-space:pre;\">' +\n codeBuf.join('\\\\n') + '</code></pre>');\n codeBuf = [];\n }\n for (var i = 0; i < lines.length; i++) {\n var line = lines[i];\n // Fenced code blocks (escaped backticks render as ` — match the literal char).\n if (/^\\\\s*\\`\\`\\`/.test(line)) {\n if (inCode) { flushCode(); inCode = false; }\n else { flushList(); inCode = true; }\n continue;\n }\n if (inCode) { codeBuf.push(line); continue; }\n // Bullet list item: -, *, or • .\n var mUl = line.match(/^\\\\s*[-*\\\\u2022]\\\\s+(.*)$/);\n if (mUl) {\n if (listType && listType !== 'ul') flushList();\n listType = 'ul';\n listBuf.push('<li style=\"margin:1px 0;\">' + mdInline(mUl[1]) + '</li>');\n continue;\n }\n // Numbered list item: 1. 2) etc.\n var mOl = line.match(/^\\\\s*\\\\d+[.)]\\\\s+(.*)$/);\n if (mOl) {\n if (listType && listType !== 'ol') flushList();\n listType = 'ol';\n listBuf.push('<li style=\"margin:1px 0;\">' + mdInline(mOl[1]) + '</li>');\n continue;\n }\n flushList();\n if (line.trim() === '') { out.push('<br>'); continue; }\n out.push('<div>' + mdInline(line) + '</div>');\n }\n flushList();\n if (inCode) flushCode();\n // inline code spans are handled per-line inside mdInline (so they never touch\n // the contents of fenced <pre> blocks).\n return out.join('');\n}\n\n // ---- DIRECTOR CHAT box ------------------------------------------------\n // Self-contained chat (transcript + input + send) in the RIGHT column. Submitting shows the\n // user bubble at once and calls opts.onChat(text); the entry streams the reply back through\n // chatStream{Start,Chunk,End} (so the assistant reply is visible).\n function buildChat() {\n if (!elProject) return;\n var wrap = el('div', 'wd-card', 'flex:0 0 auto;display:flex;flex-direction:column;overflow:hidden;');\n\n // Head — Director identity.\n var head = el('div', null, 'display:flex;align-items:center;gap:7px;padding:10px 12px 8px;border-bottom:1px solid ' + PANEL_BORDER + ';');\n head.innerHTML = ms('account_tree', 16, DIRECTOR_COLOR) +\n '<span class=\"wd-label\" style=\"color:' + DIRECTOR_COLOR + ';\">Director</span>' +\n '<span style=\"flex:1;\"></span>' +\n '<span style=\"font-size:10px;color:' + TXT_MUTED + ';\">chat to direct the team</span>';\n wrap.appendChild(head);\n\n // Transcript.\n chatTranscript = el('div', 'wd-scroll', 'display:flex;flex-direction:column;gap:8px;padding:11px 12px;' +\n 'min-height:120px;max-height:300px;overflow-y:auto;');\n chatEmpty = el('div', null, 'font-size:12px;color:' + TXT_MUTED + ';font-style:italic;text-align:center;padding:14px 6px;');\n chatEmpty.textContent = 'Direct the team or start a project\\\\u2026';\n chatTranscript.appendChild(chatEmpty);\n wrap.appendChild(chatTranscript);\n\n // Composer — input + send.\n var form = el('form', null, 'display:flex;align-items:flex-end;gap:7px;padding:9px 11px;border-top:1px solid ' + PANEL_BORDER + ';');\n form.setAttribute('autocomplete', 'off');\n chatInput = el('textarea', null, 'flex:1 1 auto;min-width:0;resize:none;background:#fff;border:1px solid ' + PANEL_BORDER + ';' +\n 'border-radius:10px;padding:8px 11px;font-size:13px;line-height:1.4;color:' + TXT_DARK + ';outline:none;' +\n 'font-family:inherit;max-height:90px;');\n chatInput.rows = 1;\n chatInput.placeholder = 'Message the Director\\\\u2026';\n // Auto-grow + Enter-to-send (Shift+Enter for newline).\n chatInput.addEventListener('input', function () {\n chatInput.style.height = 'auto';\n chatInput.style.height = Math.min(90, chatInput.scrollHeight) + 'px';\n });\n chatInput.addEventListener('keydown', function (e) {\n if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submitChat(); }\n });\n var sendBtn = el('button', 'wd-btn', 'flex:0 0 auto;background:' + DIRECTOR_COLOR + ';color:#fff;border-radius:10px;' +\n 'width:36px;height:36px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(66,133,244,0.28);');\n sendBtn.type = 'submit';\n sendBtn.innerHTML = ms('send', 18, '#fff');\n form.appendChild(chatInput); form.appendChild(sendBtn);\n form.addEventListener('submit', function (e) { e.preventDefault(); submitChat(); });\n wrap.appendChild(form);\n\n // RUN THE TEAM / Execute — explicit kick-off. Chat directs the team; this button RUNS the\n // campaign via opts.onRunCampaign(), with a brief \"running…\" state.\n var runRow = el('div', null, 'display:flex;padding:0 11px 11px;');\n runBtn = el('button', 'wd-btn', 'flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:7px;' +\n 'background:' + EMERALD + ';color:#fff;border-radius:11px;padding:11px 14px;font-size:13px;font-weight:800;' +\n 'letter-spacing:.2px;box-shadow:0 6px 16px rgba(16,185,129,0.28);');\n runBtn.type = 'button';\n setRunBtnIdle();\n runBtn.addEventListener('click', function () { triggerRunCampaign(); });\n runBtn.addEventListener('mouseenter', function () { if (!runBtnBusy) runBtn.style.filter = 'brightness(1.05)'; });\n runBtn.addEventListener('mouseleave', function () { runBtn.style.filter = 'none'; });\n runRow.appendChild(runBtn);\n wrap.appendChild(runRow);\n\n elProject.appendChild(wrap);\n }\n\n // Toggle the Run button between idle (\"Run the Team\") and its brief \"running…\" state.\n function setRunBtnIdle() {\n if (!runBtn) return;\n runBtnBusy = false; runBtn.disabled = false;\n runBtn.style.opacity = '1'; runBtn.style.cursor = 'pointer'; runBtn.style.filter = 'none';\n runBtn.innerHTML = ms('play_arrow', 19, '#fff') + '<span>Run the Team</span>';\n }\n function setRunBtnBusy() {\n if (!runBtn) return;\n runBtnBusy = true; runBtn.disabled = true;\n runBtn.style.opacity = '0.85'; runBtn.style.cursor = 'default'; runBtn.style.filter = 'none';\n runBtn.innerHTML = ms('autorenew', 18, '#fff') + '<span class=\"wd-pulse\">Running\\\\u2026</span>';\n }\n\n // Scroll the transcript to the newest message.\n function chatScroll() {\n if (chatTranscript) chatTranscript.scrollTop = chatTranscript.scrollHeight;\n }\n\n // Append a FINISHED message bubble (role = 'user' | 'assistant'/'director' | other).\n function chatAppend(role, text) {\n if (!chatTranscript) return null;\n if (chatEmpty && chatEmpty.parentNode) chatEmpty.parentNode.removeChild(chatEmpty);\n var isUser = (lower(role) === 'user' || lower(role) === 'you');\n var rowEl = el('div', 'wd-bub-row', 'align-items:' + (isUser ? 'flex-end' : 'flex-start') + ';');\n var name = el('div', 'wd-bub-name', '');\n name.textContent = isUser ? 'You' : 'Director';\n var bub = el('div', 'wd-bub ' + (isUser ? 'wd-bub-user' : 'wd-bub-ai'), '');\n // User messages stay PLAIN text; assistant/director bubbles render safe markdown.\n if (isUser) bub.textContent = String(text == null ? '' : text);\n else bub.innerHTML = mdToHtml(text);\n rowEl.appendChild(name); rowEl.appendChild(bub);\n chatTranscript.appendChild(rowEl);\n chatScroll();\n return bub;\n }\n\n function chatStreamStart() {\n if (!chatTranscript) return;\n if (chatStreamRow) chatStreamEnd();\n if (chatEmpty && chatEmpty.parentNode) chatEmpty.parentNode.removeChild(chatEmpty);\n chatStreamText = '';\n chatStreamTools = {};\n chatStreamRow = el('div', 'wd-bub-row', 'align-items:flex-start;');\n var name = el('div', 'wd-bub-name', '');\n name.textContent = 'Director';\n chatStreamBody = el('div', 'wd-bub wd-bub-ai', '');\n chatStreamBody.innerHTML = '<span class=\"wd-caret\"></span>';\n chatStreamRow.appendChild(name); chatStreamRow.appendChild(chatStreamBody);\n chatTranscript.appendChild(chatStreamRow);\n chatScroll();\n }\n\n function chatStreamChunk(t) {\n if (!chatStreamBody) { chatStreamStart(); }\n if (!chatStreamBody) return;\n chatStreamText += String(t == null ? '' : t);\n chatStreamBody.textContent = chatStreamText;\n var caret = el('span', 'wd-caret', '');\n chatStreamBody.appendChild(caret);\n chatScroll();\n }\n\n function chatStreamEnd() {\n if (!chatStreamBody) { chatStreamRow = null; chatStreamText = ''; chatStreamTools = {}; return; }\n if (chatStreamText) chatStreamBody.innerHTML = mdToHtml(chatStreamText);\n else chatStreamBody.textContent = '';\n if (!chatStreamText) {\n if (chatStreamRow && chatStreamRow.parentNode) chatStreamRow.parentNode.removeChild(chatStreamRow);\n if (chatTranscript && !chatTranscript.querySelector('.wd-bub-row') && chatEmpty) {\n chatTranscript.appendChild(chatEmpty);\n }\n }\n chatStreamRow = null; chatStreamBody = null; chatStreamText = ''; chatStreamTools = {};\n chatScroll();\n }\n\n // {tool} SSE frame -> reuse the SAME chip per tool name, flip running->done in place.\n function chatStreamTool(name) {\n if (!chatStreamRow) { chatStreamStart(); }\n if (!chatStreamRow) return;\n var _nm, _st;\n if (name && typeof name === 'object') { _nm = name.name || name.tool || 'tool'; _st = name.status; }\n else { _nm = (name == null ? 'tool' : name); _st = null; }\n _nm = String(_nm);\n var chip = chatStreamTools[_nm];\n if (!chip) {\n chip = document.createElement('span');\n chip.style.cssText = 'display:inline-flex;align-items:center;gap:4px;margin:4px 5px 0 0;font-size:10px;font-weight:600;color:#5a6273;background:rgba(20,30,60,0.06);border-radius:6px;padding:1px 7px;';\n chatStreamTools[_nm] = chip;\n chatStreamRow.appendChild(chip);\n }\n chip.textContent = '\\\\uD83D\\\\uDD27 ' + _nm + (_st ? ' \\\\u00B7 ' + String(_st) : '');\n chatScroll();\n }\n`;\n",[231],"11c174f6-5e7f-11f1-bc5e-1607ee4eb77e","frontend_world_dash.ts","508e5094-5da5-11f1-bae3-1607ee4eb77e",943,["D",1780403527651],10,"// frontend_world_dash.ts — DASHBOARD PANELS module for the Agent World (\"/world\").\n// getWorldDashJS() returns ONE backtick browser ES-module (served at /api/app-world-dash),\n// exporting createDash(opts) which owns ALL panel DOM (3D scene lives elsewhere) and fills the\n// five fixed shell containers from getWorldHTML (#world-topbar/-logs/-scenehead/-kanban/-project),\n// NEVER creating its own grid ids. Append-not-rebuild logs (by run id); keyed diff for kanban\n// cards (task id) and usage rows (agent_id).\n// API: mount, renderTopbar, renderLogs, appendLogs, renderActivity(=logs), renderKanban,\n// renderBoard(=kanban), renderProject, renderTrace, setPhase, toast, onStartProject, onChat,\n// onRunCampaign, chatAppend, chatStream{Start,Chunk,End,Tool}.\n// opts = { topbar, logs, scenehead, kanban, project, onStartProject, onChat, onRunCampaign }.\n// RIGHT chat box calls opts.onChat(text); reply streams back via chatStream{Start,Chunk,End} so it's\n// VISIBLE. Director-chat card holds a \"Run the Team\" button -> opts.onRunCampaign() (guarded) to KICK\n// OFF the campaign run, with a \"running…\" state.\n// FOOTGUNS: NO TS annotations inside the returned string; NO unescaped backticks or ${...} (plain\n// string concat); emojis as \\uXXXX. Keep this file under 80000 bytes.\n//\n// SPLIT (near the 80000-byte val.town limit): the SINGLE browser program is assembled by STRING\n// CONCATENATION from this entry plus two SOURCE fragments — DASH_VIEW (frontend_world_dash_view.ts)\n// and DASH_CHAT (frontend_world_dash_chat.ts). They are spliced INSIDE the createDash closure, so it\n// stays ONE closure with ONE set of shared mutable vars (declared below). Function declarations are\n// hoisted, so the order of the fragment blocks among the other function declarations is irrelevant;\n// only the shared `var` declarations + the final mount/return must stay in this entry. The assembled\n// string is behavior-equivalent to the pre-split file — only the SOURCE is split across files.\n\nimport { DASH_VIEW } from \"./frontend_world_dash_view.ts\";\nimport { DASH_CHAT } from \"./frontend_world_dash_chat.ts\";\n\nexport function getWorldDashJS(): string {\n return `\n// ===========================================================================\n// PALETTE (exact hexes — mirrors the other world modules + the-delegation brand)\n// ===========================================================================\nvar DIRECTOR_COLOR = '#4285F4';\nvar MEMBER_COLORS = ['#34A853','#FBBC05','#EA4335','#F59E0B','#40D5AD','#E64347','#E643C5','#7CE630','#5E888E'];\nvar USER_COLOR = '#7EACEA';\nvar USER_COLOR_LIGHT = '#7EACEA1A'; // 10%\nvar USER_COLOR_SOFT = '#7EACEA33'; // 20%\nvar STATUS_RUNNING = '#34A853';\nvar STATUS_FAILED = '#EA4335';\nvar STATUS_DONE = '#4285F4';\nvar STATUS_IDLE = '#9aa3b2';\nvar PHASE_WORKING = '#7EACEA';\nvar PHASE_DONE = '#22c55e';\nvar BRAND_DARK = '#313437';\nvar TXT_DARK = '#1f2430';\nvar TXT_MUTED = '#7a818f';\nvar TXT_LABEL = '#5a6273';\nvar PANEL_BORDER = 'rgba(20,30,60,0.08)';\nvar EMERALD = '#10b981';\nvar MONO = \"'Courier Prime',ui-monospace,SFMono-Regular,Menlo,monospace\";\n\nfunction memberColorHex(i) {\n var L = MEMBER_COLORS.length;\n return MEMBER_COLORS[(((i % L) + L) % L)];\n}\n\n// ===========================================================================\n// small utils\n// ===========================================================================\nfunction esc(s) {\n s = (s == null) ? '' : String(s);\n return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')\n .replace(/\"/g, '"').replace(/'/g, ''');\n}\nfunction lower(s) { return String(s == null ? '' : s).toLowerCase().trim(); }\n\n\n// [object Object] DEFENSE. Backend steps/previews/outputs sometimes arrive as objects\n// ({text:'...'} or a raw tool result). NEVER render \"[object Object]\": coerce to text —\n// pull a known text-ish field if present, else compact JSON. Used by every preview path.\nfunction asText(v) {\n if (v == null) return '';\n var t = typeof v;\n if (t === 'string') return v;\n if (t === 'number' || t === 'boolean') return String(v);\n if (t === 'function') return '';\n if (Array.isArray(v)) {\n var parts = [];\n for (var i = 0; i < v.length; i++) {\n var p = asText(v[i]);\n if (p) parts.push(p);\n }\n if (parts.length) return parts.join(', ');\n try { return JSON.stringify(v); } catch (e) { return ''; }\n }\n if (t === 'object') {\n // Prefer a human text field if it holds a non-empty string.\n var keys = ['text', 'preview', 'content', 'message', 'value', 'output',\n 'result', 'summary', 'description', 'note', 'title', 'name', 'label'];\n for (var k = 0; k < keys.length; k++) {\n var val = v[keys[k]];\n if (typeof val === 'string' && val.trim()) return val;\n }\n // Nested {text:{...}} etc. — recurse one level into the first such field.\n for (var k2 = 0; k2 < keys.length; k2++) {\n var vv = v[keys[k2]];\n if (vv && typeof vv === 'object') { var r = asText(vv); if (r) return r; }\n }\n try { var j = JSON.stringify(v); return (j === '{}') ? '' : j; }\n catch (e) { return ''; }\n }\n return '';\n}\nfunction trunc(s, n) {\n s = asText(s).replace(/\\\\s+/g, ' ').trim();\n n = n || 60;\n if (s.length > n) s = s.slice(0, n - 1) + '\\\\u2026';\n return s;\n}\nfunction el(tag, cls, css) {\n var n = document.createElement(tag);\n if (cls) n.className = cls;\n if (css) n.style.cssText = css;\n return n;\n}\nfunction byId(id) { return document.getElementById(id); }\n\n// Normalize any run status to one of: running | failed | completed | idle.\nfunction normStatus(s) {\n s = lower(s);\n if (s === 'running' || s === 'pending' || s === 'queued' || s === 'active' || s === 'in_progress') return 'running';\n if (s === 'failed' || s === 'error') return 'failed';\n if (s === 'completed' || s === 'done' || s === 'success' || s === 'succeeded') return 'completed';\n return 'idle';\n}\n\n// Per-agent hue: director-blue for the lead (index 0 / role matches), else cycle MEMBER_COLORS.\nfunction colorForRow(row, index) {\n if (row && row.colorHex) return row.colorHex;\n if (row && row.color) return row.color;\n var role = lower(row && (row.role || (row.agent && row.agent.role)) || '');\n var name = lower(row && (row.name || (row.agent && row.agent.name)) || '');\n var isLead = (index === 0) || /director|lead/.test(role) || /director|lead/.test(name);\n if (isLead) return DIRECTOR_COLOR;\n return memberColorHex(index - 1);\n}\n\n// Build a stable agent_id -> color map from an ordered roster (so logs/usage agree with the 3D).\nfunction colorMapFromRoster(roster) {\n var map = {};\n roster = Array.isArray(roster) ? roster : [];\n for (var i = 0; i < roster.length; i++) {\n var r = roster[i] || {};\n var id = String(r.id != null ? r.id : (r.agent_id != null ? r.agent_id : ''));\n if (id) map[id] = colorForRow(r, i);\n }\n return map;\n}\n\n// HH:MM:SS in en-GB 2-digit (real timestamps only).\nfunction fmtClock(iso) {\n if (!iso) return '';\n var d = new Date(String(iso).replace(' ', 'T') + (String(iso).indexOf('Z') < 0 && String(iso).indexOf('+') < 0 ? 'Z' : ''));\n if (isNaN(d.getTime())) { d = new Date(iso); }\n if (isNaN(d.getTime())) return '';\n try {\n return d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });\n } catch (e) {\n var p = function (n) { n = String(n); return n.length < 2 ? '0' + n : n; };\n return p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds());\n }\n}\n\n// duration_ms -> '142ms' / '1.2s' (real data only).\nfunction fmtDuration(ms) {\n var n = Number(ms);\n if (!isFinite(n) || n <= 0) return '';\n if (n < 1000) return Math.round(n) + 'ms';\n var s = n / 1000;\n return (s < 10 ? s.toFixed(1) : Math.round(s)) + 's';\n}\n\n// Parse a run.trace (JSON string -> array) into a flat step list; tolerate {director}/{steps} shapes.\nfunction traceSteps(trace) {\n if (typeof trace === 'string') { try { trace = JSON.parse(trace); } catch (e) { return []; } }\n if (Array.isArray(trace)) return trace;\n if (trace && Array.isArray(trace.steps)) return trace.steps;\n if (trace && Array.isArray(trace.director)) return trace.director;\n if (trace && trace.pipeline && Array.isArray(trace.pipeline)) return trace.pipeline;\n return [];\n}\n\n// Per-step glyph + short label for the STREAMING step lines in the logs feed.\n// Step shapes (cron + campaign): {t:'round'} | {t:'tool',name,args_preview,result_preview,ms}\n// | {t:'message',role,preview} | {t:'director'|'agent'|'synthesis'|'approval',name,preview,note}\nfunction stepGlyph(s) {\n var t = lower(s && s.t);\n if (t === 'tool' || (s && s.tool)) return 'bolt';\n if (t === 'message' || (s && s.role === 'assistant')) return 'chat_bubble';\n if (t === 'round') return 'radio_button_checked';\n if (t === 'director') return 'account_tree';\n if (t === 'agent') return 'smart_toy';\n if (t === 'synthesis') return 'merge';\n if (t === 'approval') return 'task_alt';\n return 'circle';\n}\n// One trace step -> short text. Returns '' for steps with no meaningful content (callers skip).\nfunction stepText(s) {\n if (!s) return '';\n var t = lower(s.t);\n if (t === 'round') return (s.n != null) ? ('round ' + s.n) : '';\n // asText() everywhere so an object-shaped name/preview never renders as\n // \"[object Object]\" (trunc also defends, but the bare \"nm + ' -> '\" concat\n // below would bypass it without this).\n if (t === 'tool' || s.tool) {\n var nm = asText(s.name || s.tool) || 'tool';\n var pv = asText(s.result_preview || s.preview || s.args_preview || '');\n return pv ? (trunc(nm, 28) + ' \\\\u2192 ' + trunc(pv, 90)) : trunc(nm, 60);\n }\n if (t === 'message' || s.role === 'assistant') {\n var mp = asText(s.preview || s.message || s.text || s.content || '');\n return mp ? trunc(mp, 120) : '';\n }\n var dn = asText(s.name || s.agent || '');\n var dp = asText(s.preview || s.note || s.result_preview || '');\n if (dn && dp) return trunc(dn, 28) + ' \\\\u2192 ' + trunc(dp, 90);\n if (dp) return trunc(dp, 120);\n if (dn) return trunc(dn, 60);\n return '';\n}\n\n// Material Symbols glyph span.\nfunction ms(name, size, color) {\n return '<span class=\"msym\" style=\"font-size:' + (size || 16) + 'px;' +\n (color ? 'color:' + color + ';' : '') + 'line-height:1;\">' + name + '</span>';\n}\n\n// Model-chip label from real data only: campaign.model -> first roster agent.model\n// -> honest 'default'. No bare 'auto' literal. '' = no campaign (caller hides chip).\nfunction resolveModelLabel(campaign) {\n if (!campaign) return '';\n var m = asText(campaign.model);\n if (m) return m;\n var agents = campaign.agents;\n if (Array.isArray(agents)) {\n for (var i = 0; i < agents.length; i++) {\n var a = agents[i] || {};\n var am = asText(a.model || (a.agent && a.agent.model) || '');\n if (am) return am;\n }\n }\n return 'default';\n}\n\n// ===========================================================================\n// createDash factory.\n// ===========================================================================\n\nexport function createDash(opts) {\n opts = opts || {};\n var startHandler = (typeof opts.onStartProject === 'function') ? opts.onStartProject : null;\n var chatHandler = (typeof opts.onChat === 'function') ? opts.onChat : null;\n var runHandler = (typeof opts.onRunCampaign === 'function') ? opts.onRunCampaign : null; // kicks off the team RUN\n\n // Resolve the 5 fixed shell containers (passed in or looked up by id).\n var elTopbar = opts.topbar || byId('world-topbar');\n var elLogs = opts.logs || byId('world-logs');\n var elScenehead = opts.scenehead || byId('world-scenehead');\n var elKanban = opts.kanban || byId('world-kanban');\n var elProject = opts.project || byId('world-project');\n\n var mounted = false;\n var colorMap = {}; // agent_id -> hex (from roster)\n var rosterCount = 0;\n var logFilter = ''; // text filter for the logs panel\n\n // Inner DOM handles (filled in mount()).\n var topModel = null, topTeam = null, topProject = null, topAuto = null;\n var logsList = null, logsEmpty = null, logsFilterInp = null;\n var kanbanCols = null;\n var projPhase = null, projBrief = null, projChips = null, projRoster = null,\n projUsageBig = null, projUsageSub = null, projUsageRows = null, projStartBtn = null,\n projTrace = null, projTraceBadge = null,\n sceneTeamBadge = null, sceneOut = null;\n\n // Director CHAT box (RIGHT column).\n var chatTranscript = null; // scrollable bubble area\n var chatInput = null; // text input\n var chatEmpty = null; // placeholder shown when no messages\n var chatStreamRow = null; // in-flight assistant bubble element (null when none open)\n var chatStreamBody = null; // the text node holder of the in-flight assistant bubble\n var chatStreamText = ''; // accumulated text of the in-flight assistant bubble\n var chatStreamTools = {}; // tool-name -> chip (flip running->done in place)\n var runBtn = null; // \"Run the Team\" / Execute button (in the Director chat card)\n var runBtnBusy = false; // true while a kick-off is in flight (brief \"running…\" state)\n\n // Keyed node caches (append-not-rebuild).\n var logNodes = {}; // run id -> row element\n var logOrder = []; // newest-first run ids (cap the DOM size)\n // Streaming-trace state per run id — survives in-place row replacement so step lines are\n // APPENDED (not re-rendered) as the backend streams more steps into run.trace.\n var streamState = {}; // run id -> { count: <# step lines already rendered> }\n var logOpen = {}; // run id -> bool (disclosure open) — persists across in-place row replace\n var taskNodes = {}; // task id -> card element\n var usageNodes = {}; // agent_id -> usage row element\n var rosterNodes = {}; // agent_id -> roster row element\n var toastRegion = null;\n\n // ---- one-time stylesheet ----------------------------------------------\n function injectStyle() {\n if (byId('world-dash-style')) return;\n var st = document.createElement('style');\n st.id = 'world-dash-style';\n st.textContent =\n '@keyframes wdPulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}' +\n '.wd-pulse{animation:wdPulse 1.6s ease-in-out infinite;}' +\n '@keyframes wdFadeIn{0%{opacity:0;transform:translateY(-3px);}100%{opacity:1;transform:translateY(0);}}' +\n '.wd-scroll{overflow-y:auto;}' +\n '.wd-scroll::-webkit-scrollbar{width:7px;}' +\n '.wd-scroll::-webkit-scrollbar-thumb{background:rgba(20,30,60,0.16);border-radius:4px;}' +\n '.wd-label{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:' + TXT_LABEL + ';}' +\n '.wd-tab{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:5px 9px;' +\n 'border-radius:8px;cursor:pointer;border:none;background:transparent;color:' + TXT_MUTED + ';}' +\n '.wd-tab.is-on{background:' + USER_COLOR_LIGHT + ';color:' + DIRECTOR_COLOR + ';}' +\n '.wd-card{background:#fff;border:1px solid ' + PANEL_BORDER + ';border-radius:10px;}' +\n '.wd-btn{cursor:pointer;border:none;font-family:inherit;}' +\n '.wd-chev{transition:transform .18s ease;display:inline-block;}' +\n '.wd-chev.is-open{transform:rotate(90deg);}' +\n '.wd-mono{font-family:' + MONO + ';font-variant-numeric:tabular-nums;}' +\n // chat bubbles\n '.wd-bub{max-width:88%;border-radius:13px;padding:8px 11px;font-size:12.5px;line-height:1.5;' +\n 'white-space:pre-wrap;word-break:break-word;animation:wdFadeIn .25s ease;}' +\n '.wd-bub-user{align-self:flex-end;background:' + DIRECTOR_COLOR + ';color:#fff;border-bottom-right-radius:5px;}' +\n '.wd-bub-ai{align-self:flex-start;background:#fff;color:' + TXT_DARK + ';border:1px solid ' + PANEL_BORDER + ';border-bottom-left-radius:5px;}' +\n '.wd-bub-row{display:flex;flex-direction:column;}' +\n '.wd-bub-name{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;margin:0 3px 2px;color:' + TXT_MUTED + ';}' +\n // streaming caret\n '@keyframes wdBlink{0%,100%{opacity:1}50%{opacity:0}}' +\n '.wd-caret{display:inline-block;width:6px;height:13px;margin-left:1px;vertical-align:-2px;background:' + DIRECTOR_COLOR + ';animation:wdBlink 1s step-end infinite;border-radius:1px;}' +\n // collapsible log detail\n '.wd-log-det{overflow:hidden;}' +\n '.wd-log-toggle{display:inline-flex;align-items:center;gap:3px;cursor:pointer;font-size:10px;font-weight:800;' +\n 'letter-spacing:.3px;text-transform:uppercase;color:' + DIRECTOR_COLOR + ';background:transparent;border:none;' +\n 'padding:3px 0 0;margin-top:4px;font-family:inherit;}';\n document.head.appendChild(st);\n }\n\n // ===========================================================================\n // MOUNT — build the static chrome of every panel once.\n // ===========================================================================\n function mount(els) {\n if (mounted) return;\n if (els) {\n elTopbar = els.topbar || elTopbar;\n elLogs = els.logs || elLogs;\n elScenehead = els.scenehead || elScenehead;\n elKanban = els.kanban || elKanban;\n elProject = els.project || elProject;\n }\n mounted = true;\n injectStyle();\n buildTopbar();\n buildScenehead();\n buildLogs();\n buildKanban();\n buildProject();\n buildToast();\n }\n\n var KAN_COLS = [\n { key: 'scheduled', label: 'Scheduled' },\n { key: 'on_hold', label: 'On Hold' },\n { key: 'in_progress', label: 'In Progress' },\n { key: 'done', label: 'Done' }\n ];\n` + DASH_VIEW + DASH_CHAT + `\n // ---- toast ------------------------------------------------------------\n function buildToast() {\n if (toastRegion) return;\n toastRegion = el('div', null, 'position:fixed;top:64px;right:16px;z-index:50;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;');\n toastRegion.id = 'world-dash-toast';\n document.body.appendChild(toastRegion);\n }\n function toast(msg) {\n if (!toastRegion) buildToast();\n var t = el('div', null, 'pointer-events:auto;display:flex;align-items:center;gap:8px;max-width:330px;' +\n 'background:#fff;border:1px solid rgba(52,168,83,0.45);border-radius:12px;padding:11px 15px;' +\n 'box-shadow:0 12px 30px rgba(20,30,60,0.22);font-size:13px;font-weight:600;color:' + TXT_DARK + ';' +\n 'opacity:0;transform:translateX(12px);transition:opacity .3s,transform .3s;');\n t.innerHTML = '<span style=\"width:9px;height:9px;border-radius:50%;background:' + STATUS_RUNNING + ';box-shadow:0 0 8px ' + STATUS_RUNNING + ';flex:0 0 auto;\"></span><span>' + esc(msg) + '</span>';\n toastRegion.appendChild(t);\n requestAnimationFrame(function () { t.style.opacity = '1'; t.style.transform = 'translateX(0)'; });\n setTimeout(function () {\n t.style.opacity = '0'; t.style.transform = 'translateX(12px)';\n setTimeout(function () { if (t.parentNode) t.parentNode.removeChild(t); }, 340);\n }, 5000);\n }\n\n // ---- Director chat / start-project hooks ------------------------------\n function triggerStart() {\n // The Director chat box IS the new-project entry point now, so ALWAYS focus + prime it.\n if (chatInput) {\n if (!chatInput.value) chatInput.value = 'Start a new project: ';\n chatInput.focus();\n try { chatInput.setSelectionRange(chatInput.value.length, chatInput.value.length); } catch (e) {}\n try { chatInput.dispatchEvent(new Event('input')); } catch (e2) {}\n }\n if (startHandler) { try { startHandler(); } catch (e3) {} }\n }\n // Kick off the team RUN (campaign execution) via opts.onRunCampaign(). Guarded if absent. Brief\n // \"running…\" state; the live run surfaces via Orchestration trace / Activity / kanban as it streams.\n function triggerRunCampaign() {\n if (runBtnBusy) return;\n if (!runHandler) { toast('Run is not wired up yet'); return; }\n setRunBtnBusy();\n var settled = false;\n var done = function () { if (settled) return; settled = true; setRunBtnIdle(); };\n // Tie feedback to the REAL run lifecycle: runHandler() returns a Promise that\n // resolves when the campaign-run POST is accepted and rejects on error. Toast\n // real success/failure — no fabricated fixed-duration spinner.\n try {\n var out = runHandler();\n if (out && typeof out.then === 'function') {\n out.then(\n function () { done(); toast('Run started'); },\n function () { done(); toast('Could not start the run'); }\n );\n } else {\n // Sync handler returned without throwing: kick-off accepted (no fake timer).\n done(); toast('Run started');\n }\n } catch (e) { done(); toast('Could not start the run'); }\n }\n // Send the composed message: show the USER bubble at once, then hand to onChat (which streams\n // the reply back via chatStream{Start,Chunk,End} so it's visible).\n function submitChat() {\n if (!chatInput) return;\n var msg = (chatInput.value || '').trim();\n if (!msg) return;\n chatInput.value = '';\n chatInput.style.height = 'auto';\n // 1) user message — immediate.\n chatAppend('user', msg);\n // 2) hand off to the entry (it owns the /api/chat/stream pump).\n if (chatHandler) {\n try {\n var out = chatHandler(msg);\n if (out && typeof out.then === 'function') out.then(function () {}, function () {});\n } catch (e) {}\n }\n }\n function onStartProject(fn) { if (typeof fn === 'function') startHandler = fn; return startHandler; }\n function onChat(fn) { if (typeof fn === 'function') chatHandler = fn; return chatHandler; }\n function onRunCampaign(fn) { if (typeof fn === 'function') runHandler = fn; return runHandler; }\n\n // ===========================================================================\n // public API\n // ===========================================================================\n return {\n mount: mount,\n renderTopbar: renderTopbar,\n renderLogs: renderLogs,\n renderActivity: renderLogs, // alias (task spec: renderActivity)\n appendLogs: appendLogs,\n renderKanban: renderKanban,\n renderBoard: renderKanban, // alias (task spec: renderBoard)\n renderProject: renderProject,\n renderTrace: renderTrace,\n setPhase: setPhase,\n toast: toast,\n chatAppend: chatAppend,\n chatStreamStart: chatStreamStart,\n chatStreamChunk: chatStreamChunk,\n chatStreamEnd: chatStreamEnd,\n chatStreamTool: chatStreamTool,\n onStartProject: onStartProject,\n onChat: onChat,\n onRunCampaign: onRunCampaign\n };\n}\n`;\n}\n",[238],"b505f510-5e66-11f1-8f10-1607ee4eb77e","frontend_world_agents.ts","1cd4a8ac-5da0-11f1-841b-1607ee4eb77e",890,["D",1780393064155],11,"// frontend_world_agents.ts — the AGENTS module of the split \"/world\" 3D office.\n// getWorldAgentsJS() returns ONE backtick template-literal browser ES-module exporting\n// createAgents(world, office). It loads character.glb (GLTFLoader+DRACO), clones the WHOLE rig per\n// agent via SkeletonUtils (plain .clone() breaks skinning), and drives ONE AnimationMixer each with\n// the named clips.\n//\n// MOVEMENT + SIT — FAITHFUL to the-delegation (NavMeshManager + PathAgent + CharacterController +\n// CharacterStateMachine + NpcAgentDriver). ALL agent movement follows the office navmesh:\n// - We build a three-pathfinding zone from office.getNavMeshGeometry() (the real walkable polygons\n// baked from office.glb). findPath() returns waypoints between two world points; agents follow\n// those waypoints (delta-scaled at the-delegation speed, advancing a node within PATH_NODE_ARRIVAL\n// = 0.25 XZ, snapping within 0.2) so they NEVER walk through walls. There is NO free random wander.\n// - Behaviour: each agent has a FIXED home sit_work POI (its own desk, assigned by office.layout\n// index, nearest-matched and stable across re-syncs). When its REAL run is RUNNING it paths to\n// THAT same sit_work desk and sits doing Sit_Work (interacting with the desk). When it has NO\n// work (idle / completed / none) it is FREE: it ROAMS between the poi-idle-area POIs (hub /\n// boardroom / canteen / workspace) and STANDS / idles / looks around via the navmesh — it does\n// NOT sit at the work desk (light ambient roaming, never stuck sitting). Disabled agents rest\n// seated (Sit_Idle) at their seat. Every move is via the navmesh.\n// - Arriving at a SIT POI snaps the avatar to the POI's exact world position + quaternion, marks it\n// SEATED, plays the one-shot 'Sit' (sit_down) clip, then auto-advances to the looping Sit_Work /\n// Sit_Idle clip — a real interaction with the chair. POIs are occupied on claim, released on\n// stand-up, so two agents never share a seat.\n// - FALLBACK: if three-pathfinding fails to load OR the navmesh geometry is unavailable, agents do\n// NOT walk at all — they simply sit at their assigned POIs (sit_work when running, else sit_idle /\n// idle in place). With no straight-line walking, they still NEVER clip walls.\n//\n// HANDOFF (ADDITIVE, optional). Two complementary cues, both safe to call often:\n// - playHandoff(orderedIds): a pure VISUAL overlay flashing a brief glowing beam (thin emissive\n// tube + travelling dot) from each agent head to the next (Director->A->B->C) using entries()\n// head positions, auto-fading + disposing after ~1.5s per hop. A separate disposable layer on\n// world.group; movement/sit/sync/setStatus/entries are NOT touched; no-op while one is playing.\n// - handoffWalk(fromId, toId): a PHYSICAL cue — the GIVER walks (navmesh) to the RECEIVER's\n// desk/POI, faces them, plays Talk for ~2s, then walks back to its OWN desk and resumes roaming.\n// Runs ONLY for a free (non-running, non-disabled) giver and ONLY when a navmesh exists, so it\n// never disturbs a working/seated agent and never clips walls. A 3-phase per-agent machine on\n// entry.handoff, advanced in update() (guarded). Refused (returns false) when there is no path.\n//\n// CAP/HAT: cap + headphones are always hidden (showCap=false / showPhones=false) — clean blob head.\n// Placement is DETERMINISTIC: each avatar's home is office.layout(n)[i]; the navmesh decides the path\n// shape; runtime PRNG only times ambient decisions + picks among free POIs.\n//\n// FOOTGUNS honoured: NO TS annotations inside the returned string; NO unescaped backticks or ${...}\n// inside it (string concat everywhere); emojis as \\uXXXX escapes; deterministic placement. <80KB.\n\nexport function getWorldAgentsJS(): string {\n return `\nimport * as THREE from 'three';\nimport { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';\nimport { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';\nimport { clone as cloneSkinned } from 'three/addons/utils/SkeletonUtils.js';\n\n// ---- three-pathfinding (pinned, shares the host's three@0.160.0). Loaded in a try/catch so a CDN\n// failure degrades gracefully to POI-only (no-walk) behaviour instead of breaking the whole module. -\nvar Pathfinding = null;\ntry {\n var _pfMod = await import('https://esm.sh/three-pathfinding@1.3.0?deps=three@0.160.0');\n Pathfinding = (_pfMod && _pfMod.Pathfinding) ? _pfMod.Pathfinding : (_pfMod && _pfMod.default ? _pfMod.default : null);\n} catch (e) { Pathfinding = null; }\n\n// ---- shared conventions (must match the other 4 world modules) -------------------------------\nvar DIRECTOR_COLOR = '#4285F4';\nvar MEMBER_COLORS = ['#34A853','#FBBC05','#EA4335','#F59E0B','#40D5AD','#E64347','#E643C5','#7CE630','#5E888E'];\nfunction memberColorHex(i) {\n var L = MEMBER_COLORS.length;\n return MEMBER_COLORS[((i % L) + L) % L];\n}\nfunction lower(s) { return String(s == null ? '' : s).toLowerCase().trim(); }\nfunction isLeadAgent(a, i) {\n if (i === 0) return true;\n var r = lower(a && (a.role || a.name));\n return /director|lead/.test(r);\n}\nfunction isDisabled(a) { return a && (a.enabled === 0 || a.enabled === false || a.enabled === '0' || a.status === 'disabled'); }\n// DIRECTOR ENTRY: an explicit roster flag __director===true marks the meeting Director. It does NOT\n// claim a member sit_work desk — it stands/idles at the HEAD of the meeting table, facing the team.\nfunction isDirectorEntry(a) { return !!(a && a.__director === true); }\n\n// DAD JOKES — short, family-friendly one-liners spoken when two FREE agents meet 1-to-1 (a handoff\n// talk or an ambient social encounter). Picked DETERMINISTICALLY by agent index + a runtime counter\n// (jokeCounter, bumped each time a joke is set) so the same agent says different jokes over time.\nvar DAD_JOKES = [\n 'I only know 25 letters of the alphabet. I dont know y.',\n 'I used to hate facial hair, but then it grew on me.',\n 'I would tell you a chemistry joke, but I know I wouldnt get a reaction.',\n 'Why dont skeletons fight? They dont have the guts.',\n 'I am reading a book about anti-gravity. Its impossible to put down.',\n 'What do you call fake spaghetti? An impasta.',\n 'I dont trust stairs. Theyre always up to something.',\n 'Why did the scarecrow win an award? He was outstanding in his field.',\n 'I made a pencil with two erasers. It was pointless.',\n 'How does a penguin build its house? Igloos it together.',\n 'I told my computer I needed a break, and it froze.',\n 'Why did the bicycle fall over? It was two tired.',\n 'I burned my Hawaiian pizza. I should have used aloha temperature.',\n 'What did the ocean say to the beach? Nothing, it just waved.',\n 'I used to play piano by ear, but now I use my hands.'\n];\nvar jokeCounter = 0;\nvar SAY_LINE_MS = 3000; // a sayLine bubble lasts ~3s, then clears.\n\n// Normalize a run/agent status to one of: running | failed | completed | idle.\nfunction normStatus(s) {\n s = lower(s);\n if (s === 'running' || s === 'pending' || s === 'active' || s === 'in_progress' || s === 'queued') return 'running';\n if (s === 'failed' || s === 'error') return 'failed';\n if (s === 'completed' || s === 'done' || s === 'success' || s === 'succeeded') return 'completed';\n return 'idle';\n}\n\n// Asset URLs (character GLB only — the floor GLB is owned by the office module).\nvar DRACO_DECODER = 'https://www.gstatic.com/draco/versioned/decoders/1.5.6/';\nvar GLB_CHARACTER = 'https://cdn.jsdelivr.net/gh/arturitu/the-delegation@16c97c43d1c32fae797ace4ed8058157e1126c96/public/models/character.glb';\n\n// Units / scale (shared): character ~1.32 tall, feet at y=0, head anchor ~1.5.\nvar CHAR_TARGET_H = 1.32;\nvar HEAD_Y = 1.5;\nvar RING_Y = 0.02;\n\n// ---- the-delegation movement constants (real numbers from src/simulation/constants.ts) -------\nvar NAVMESH_ZONE = 'level'; // three-pathfinding zone id\nvar PATH_NODE_ARRIVAL = 0.25; // XZ dist at which a path NODE is reached (PathAgent.update)\nvar SNAP_RADIUS = 0.2; // GPU waypoint snap threshold in the original compute shader\nvar ARRIVAL_RADIUS = 0.3; // (kept for parity; arrival is detected by node consumption)\n// The original moves 0.045 world units / compute-dispatch (~60fps) -> ~2.7 u/s, frame-rate dependent.\n// Per the reimplementation note we DELTA-SCALE it for stable WebGL motion at any frame rate.\nvar MOVE_SPEED = 2.7; // world units / second (delta-scaled)\nvar MAX_AGENTS = 32; // raised: distributed area-slot angle cap (NpcAgentDriver). Higher =\n // more agents fan out around an idle-area POI without overlapping.\nvar SLOT_RADIUS = 1.0; // base radial distance of a roam slot from its area-POI center.\n\n// Behaviour modes (the-delegation AgentBehavior). On the CPU here: IDLE/SEATED don't move, GOTO does.\nvar B_IDLE = 0, B_GOTO = 1, B_SEATED = 2;\n\n// Named clips present in character.glb.\nvar CLIP_NAMES = ['Happy','Idle','Listen','LookAround','Pick','Sad','Sit','Sit_Idle','Sit_Work','Talk','Walk','Wave'];\n\n// State -> ordered clip preferences (lower-cased clip lookup).\nvar CLIP_FOR = {\n sit_down: ['sit', 'sit_idle', 'idle'],\n sit_work: ['sit_work', 'sit', 'sit_idle', 'idle'],\n sit_idle: ['sit_idle', 'sit', 'idle'],\n idle: ['idle', 'lookaround', 'sit_idle'],\n look: ['lookaround', 'idle'],\n walk: ['walk', 'idle'],\n talk: ['talk', 'happy', 'wave', 'idle'],\n listen: ['listen', 'lookaround', 'idle'],\n wave: ['wave', 'happy', 'idle'],\n happy: ['happy', 'wave', 'idle']\n};\n// States that hold a seated pose (used to detect stand-up so we release the chair).\nfunction isSeatedState(s) { return s === 'sit_down' || s === 'sit_idle' || s === 'sit_work'; }\n// Non-looping states play once then auto-advance (sit_down -> the looping sit_* clip).\nfunction isOneShot(s) { return s === 'sit_down' || s === 'look' || s === 'wave' || s === 'happy'; }\nfunction nextStateAfter(s) { return s === 'sit_down' ? null : 'idle'; }\n\n// Per-agent hue helpers ------------------------------------------------------------------------\nfunction brightTint(colorHex) {\n return new THREE.Color(colorHex).lerp(new THREE.Color(0xffffff), 0.10);\n}\nfunction capTint(colorHex) {\n return new THREE.Color(colorHex).offsetHSL(0, 0.06, -0.18);\n}\nfunction isBodyPart(name) {\n var nm = lower(name);\n return nm === 'body' || nm.indexOf('body') !== -1;\n}\nfunction isCapPart(name) {\n var nm = lower(name);\n return nm === 'cap' || nm.indexOf('cap') !== -1 || nm.indexOf('hat') !== -1 ||\n nm.indexOf('beanie') !== -1 || nm.indexOf('helmet') !== -1;\n}\nfunction isHeadphonePart(name) {\n var nm = lower(name);\n return nm.indexOf('headphone') !== -1 || nm.indexOf('headset') !== -1;\n}\nfunction isFacePart(name) {\n var nm = lower(name);\n return nm.indexOf('eye') !== -1 || nm.indexOf('mouth') !== -1 || nm.indexOf('teeth') !== -1 ||\n nm.indexOf('face') !== -1 || nm.indexOf('pupil') !== -1 || nm.indexOf('brow') !== -1;\n}\n\nexport function createAgents(world, office) {\n var template = null; // gltf.scene rig template\n var clips = null; // AnimationClip[]\n var assetsReady = false;\n\n // ---- navmesh / pathfinding state (three-pathfinding) --------------------------------------\n var pf = null; // Pathfinding instance (null until built / if lib failed)\n var navReady = false; // true once a zone is set on pf\n var navTried = false; // we only attempt to build the zone once per geometry presence\n\n // POI bookkeeping (mirrors PoiManager): id -> { ...poi, occupiedBy }.\n var poiById = {}; // id -> poi def (with live occupiedBy)\n var poiList = []; // ordered poi defs\n var poisReady = false;\n\n // id -> entry record.\n var byId = {};\n var order = []; // ordered list of ids (roster order) — drives seat index\n var spotlightId = null; // currently spotlit (running) speaker id\n\n // ---- OPTIONAL handoff-beam overlay (ADDITIVE — never read by movement/sit/sync) ------------\n // A glowing beam (thin emissive tube + a travelling dot) is drawn Director->A->B->C between\n // consecutive agents' head positions, one hop at a time, ~1.5s each, then auto-faded + disposed.\n // It is a pure visual overlay added to world.group; nothing in stepMovement/driveAgent/sync ever\n // touches it. playHandoff() is a no-op while a sequence is already playing (safe to call often).\n var HANDOFF_HOP_MS = 1500; // duration per hop\n var HANDOFF_FADE_FRAC = 0.35; // last fraction of a hop spent fading out\n var handoffActive = false; // true while a sequence is animating\n var handoffHops = []; // [{ a:Vector3, b:Vector3 }] head endpoints per hop\n var handoffIndex = 0; // current hop being drawn\n var handoffElapsed = 0; // ms elapsed within the current hop\n var handoffBeam = null; // { tube, dot, tubeMat, dotMat, tubeGeo, dotGeo } or null\n\n // ---- HANDOFF-WALK state (ADDITIVE physical cue) --------------------------------------------\n // When work passes giver -> receiver, the GIVER physically WALKS (navmesh) to the RECEIVER's\n // desk/POI, faces them, plays Talk/Listen for ~2s, then walks back to its OWN desk and resumes.\n // It runs ONLY for free (non-running, non-disabled) givers so it never disturbs a working/seated\n // agent. Per-agent flag entry.handoff carries the little 3-phase machine; TALK_MS sets the pause.\n var HANDOFF_TALK_MS = 2000; // ~2s facing + Talk/Listen at the receiver\n\n // ---- loadAssets() : load character.glb once ------------------------------------------------\n function loadGLB(url) {\n return new Promise(function (resolve) {\n try {\n var draco = new DRACOLoader();\n draco.setDecoderPath(DRACO_DECODER);\n var loader = new GLTFLoader();\n loader.setDRACOLoader(draco);\n loader.load(url, function (gltf) { resolve(gltf); }, undefined, function () { resolve(null); });\n } catch (e) { resolve(null); }\n });\n }\n async function loadAssets() {\n if (assetsReady) return;\n var gltf = await loadGLB(GLB_CHARACTER);\n if (gltf && gltf.scene) {\n template = gltf.scene;\n clips = (gltf.animations && gltf.animations.length) ? gltf.animations : [];\n template.traverse(function (o) {\n if (o.isMesh) { o.castShadow = true; o.receiveShadow = true; o.frustumCulled = false; }\n });\n }\n assetsReady = true;\n // The navmesh geometry + POIs may already be available (office loads in parallel); try now.\n tryBuildNav();\n refreshPois();\n }\n\n // ---- build the three-pathfinding zone from office.getNavMeshGeometry() --------------------\n // NavMeshManager.loadFromGeometry: Pathfinding.createZone(geometry) + setZoneData(NAVMESH_ZONE).\n // The office bakes the navmesh into WORLD coords, matching the world-space POI positions. We try\n // lazily because the office GLB loads in parallel with the character GLB — the geometry may not be\n // ready at loadAssets() time, so update()/sync() retry until it is (or give up to the fallback).\n function tryBuildNav() {\n if (navReady || navTried && !Pathfinding) return;\n if (!Pathfinding) { navTried = true; return; }\n var geo = null;\n try { geo = office.getNavMeshGeometry ? office.getNavMeshGeometry() : null; } catch (e) { geo = null; }\n if (!geo) return; // geometry not ready yet — retry next frame\n navTried = true;\n try {\n pf = new Pathfinding();\n var zone = Pathfinding.createZone(geo);\n pf.setZoneData(NAVMESH_ZONE, zone);\n navReady = true;\n } catch (e) { pf = null; navReady = false; }\n }\n\n // findPath(from, to) -> waypoints EXCLUDING start (three-pathfinding shifts the start off), [] on\n // any failure. Mirrors NavMeshManager.findPath: resolve the group of 'from', then findPath. (The\n // library's getGroup returns the NEAREST group when the point is slightly off the mesh, so paths\n // are robust to sub-unit POI offsets.)\n function findPath(from, to) {\n if (!navReady || !pf) return [];\n try {\n var groupID = pf.getGroup(NAVMESH_ZONE, from);\n if (groupID === null || groupID === undefined) return [];\n var path = pf.findPath(from, to, NAVMESH_ZONE, groupID);\n if (!path || path.length === 0) return [];\n return path;\n } catch (e) { return []; }\n }\n\n // ---- POI mirror (PoiManager) --------------------------------------------------------------\n // Pull the REAL POIs from the office (id/position/quaternion/arrivalState/kind). We keep a live\n // 'occupiedBy' per POI so two agents never claim the same seat. refreshPois() preserves existing\n // occupancy across re-reads.\n function refreshPois() {\n var src = [];\n try { src = (office.getPois ? office.getPois() : []) || []; } catch (e) { src = []; }\n if (!src.length) return;\n var prevOcc = {};\n for (var id in poiById) { if (poiById[id]) prevOcc[id] = poiById[id].occupiedBy; }\n poiById = {};\n poiList = [];\n for (var i = 0; i < src.length; i++) {\n var p = src[i];\n var def = {\n id: p.id,\n position: p.position.clone ? p.position.clone() : new THREE.Vector3(p.position.x, p.position.y, p.position.z),\n quaternion: p.quaternion.clone ? p.quaternion.clone() : new THREE.Quaternion(p.quaternion.x, p.quaternion.y, p.quaternion.z, p.quaternion.w),\n arrivalState: p.arrivalState,\n kind: p.kind,\n type: p.type,\n label: p.label,\n occupiedBy: (prevOcc[p.id] !== undefined ? prevOcc[p.id] : null)\n };\n poiById[p.id] = def;\n poiList.push(def);\n }\n poisReady = true;\n }\n function poiOccupy(id, agentKey) { var p = poiById[id]; if (p) p.occupiedBy = agentKey; }\n function poiReleaseAll(agentKey) {\n for (var id in poiById) { var p = poiById[id]; if (p && p.occupiedBy === agentKey) p.occupiedBy = null; }\n }\n // Free POIs of a kind (kind 'sit_idle' | 'area' ...) for this agent (its own claim counts as free).\n function freePoisByKind(kind, agentKey) {\n var out = [];\n for (var i = 0; i < poiList.length; i++) {\n var p = poiList[i];\n if (p.kind !== kind) continue;\n if (p.occupiedBy === null || p.occupiedBy === agentKey) out.push(p);\n }\n return out;\n }\n // 'idle-area' POIs: area POIs OR idle-typed POIs (poi-idle-area-*). We treat both as wanderable\n // standing spots so agents path to an open part of the room, idle, then return.\n function freeIdleAreaPois(agentKey) {\n var out = [];\n for (var i = 0; i < poiList.length; i++) {\n var p = poiList[i];\n var isArea = (p.kind === 'area') || (String(p.id).indexOf('area') !== -1 && p.arrivalState === 'idle');\n if (!isArea) continue;\n if (p.occupiedBy === null || p.occupiedBy === agentKey) out.push(p);\n }\n return out;\n }\n function pickRandom(arr) { return (arr && arr.length) ? arr[Math.floor(Math.random() * arr.length) % arr.length] : null; }\n function yawFromQuat(q) {\n var f = new THREE.Vector3(0, 0, 1).applyQuaternion(q);\n return Math.atan2(f.x, f.z);\n }\n\n // ---- avatar construction (unchanged: clone rig, tint body only, accessories hidden) --------\n function tintInPlace(o, kind, bright, accCol, accentMats) {\n if (!o.material) return;\n if (Array.isArray(o.material)) {\n o.material = o.material.map(function (mm) { return mm ? mm.clone() : mm; });\n for (var ai = 0; ai < o.material.length; ai++) editMat(o.material[ai], kind, bright, accCol, accentMats);\n } else {\n o.material = o.material.clone();\n editMat(o.material, kind, bright, accCol, accentMats);\n }\n }\n function editMat(cm, kind, bright, accCol, accentMats) {\n if (!cm) return;\n if (kind === 'body') {\n if (cm.color) cm.color.copy(bright);\n if ('map' in cm) cm.map = null;\n if ('roughness' in cm) cm.roughness = 0.6;\n if ('metalness' in cm) cm.metalness = 0.0;\n if ('envMapIntensity' in cm) cm.envMapIntensity = 0.45;\n if (cm.emissive) cm.emissive.setRGB(0, 0, 0);\n if ('emissiveIntensity' in cm) cm.emissiveIntensity = 0.0;\n cm.needsUpdate = true;\n accentMats.push(cm);\n } else if (kind === 'cap' || kind === 'headphone') {\n if (cm.color) cm.color.copy(accCol);\n if ('map' in cm) cm.map = null;\n if ('roughness' in cm) cm.roughness = 0.55;\n if ('metalness' in cm) cm.metalness = 0.0;\n if ('envMapIntensity' in cm) cm.envMapIntensity = 0.45;\n if (cm.emissive) cm.emissive.setRGB(0, 0, 0);\n cm.needsUpdate = true;\n } else {\n if ('envMapIntensity' in cm) cm.envMapIntensity = 0.45;\n }\n }\n function classify(o) {\n var mn = o.material && !Array.isArray(o.material) ? (o.material.name || '') : '';\n if (isFacePart(o.name) || isFacePart(mn)) return 'face';\n if (isHeadphonePart(o.name) || isHeadphonePart(mn)) return 'headphone';\n if (isCapPart(o.name) || isCapPart(mn)) return 'cap';\n if (isBodyPart(o.name) || isBodyPart(mn)) return 'body';\n return 'misc';\n }\n function buildAvatar(colorHex, isLead) {\n var g = new THREE.Group();\n var model = cloneSkinned(template);\n var bright = brightTint(colorHex);\n var accCol = capTint(colorHex);\n var accentMats = [];\n var showCap = false; // cap REMOVED — clean blob head\n var showPhones = false; // headphones REMOVED too\n model.traverse(function (o) {\n if (o.isMesh && o.material) {\n var kind = classify(o);\n if (kind === 'cap') {\n o.visible = showCap;\n o.frustumCulled = false;\n if (showCap) { tintInPlace(o, 'cap', bright, accCol, accentMats); o.castShadow = true; o.receiveShadow = true; }\n return;\n }\n if (kind === 'headphone') {\n o.visible = showPhones;\n o.frustumCulled = false;\n if (showPhones) { tintInPlace(o, 'headphone', bright, accCol, accentMats); o.castShadow = true; o.receiveShadow = true; }\n return;\n }\n tintInPlace(o, kind, bright, accCol, accentMats);\n o.castShadow = true; o.receiveShadow = true;\n o.frustumCulled = false;\n }\n });\n model.updateMatrixWorld(true);\n var box = new THREE.Box3().setFromObject(model);\n var size = new THREE.Vector3(); box.getSize(size);\n var h = size.y || 1;\n model.scale.setScalar(CHAR_TARGET_H / h);\n model.updateMatrixWorld(true);\n var box2 = new THREE.Box3().setFromObject(model);\n if (isFinite(box2.min.y)) model.position.y -= box2.min.y;\n g.add(model);\n\n var mixer = new THREE.AnimationMixer(model);\n var actions = {};\n if (clips && clips.length) {\n for (var i = 0; i < clips.length; i++) {\n var clip = clips[i];\n var nm = lower(clip.name) || ('clip' + i);\n actions[nm] = mixer.clipAction(clip);\n if (i === 0) actions.__first = actions[nm];\n }\n }\n return { group: g, model: model, mixer: mixer, actions: actions, accentMats: accentMats };\n }\n\n function buildRing(colorHex) {\n var col = new THREE.Color(colorHex);\n var mat = new THREE.MeshStandardMaterial({\n color: col.clone(),\n emissive: col.clone(),\n emissiveIntensity: 0.6,\n roughness: 0.5,\n metalness: 0.0,\n transparent: true,\n opacity: 0.92\n });\n var geo = new THREE.RingGeometry(0.45, 0.62, 40);\n var ring = new THREE.Mesh(geo, mat);\n ring.rotation.x = -Math.PI / 2;\n ring.position.y = RING_Y;\n ring.receiveShadow = false;\n ring.castShadow = false;\n return { mesh: ring, mat: mat };\n }\n\n // ---- animation state machine (CharacterStateMachine) ---------------------------------------\n function resolveAction(actions, state) {\n if (!actions) return null;\n var cands = CLIP_FOR[state] || [state, 'idle'];\n for (var i = 0; i < cands.length; i++) {\n if (actions[cands[i]]) return actions[cands[i]];\n }\n return actions.__first || null;\n }\n function clipDurationFor(entry, state) {\n var a = resolveAction(entry.actions, state);\n if (a && a.getClip) { var c = a.getClip(); if (c && c.duration > 0) return c.duration; }\n return 1.0;\n }\n // playState: cross-fade to the resolved clip. One-shot states (sit_down/look/wave/happy) play once\n // (LoopOnce, clampWhenFinished) and arm a stateTimer; looping states repeat. Standing up from a\n // seated state releases the chair (poiReleaseAll), faithful to CharacterController.play().\n function playState(entry, state) {\n if (entry.animState === state && entry.active) return;\n // Stand-up: leaving a seated state for a non-seated one frees the chair.\n if (isSeatedState(entry.animState) && !isSeatedState(state)) {\n poiReleaseAll(entry.key);\n if (entry.homePoiId && poiById[entry.homePoiId] && poiById[entry.homePoiId].occupiedBy === entry.key) {\n // homePoiId is re-claimed only on sitting; releaseAll already cleared it.\n }\n }\n entry.animState = state;\n var oneShot = isOneShot(state);\n entry.stateTimer = oneShot ? clipDurationFor(entry, state) : 0;\n var next = resolveAction(entry.actions, state);\n if (!next) return;\n if (entry.active === next) {\n // same clip object reused (e.g. sit -> sit): just restart for one-shots.\n if (oneShot) { next.reset(); next.setLoop(THREE.LoopOnce, 1); next.clampWhenFinished = true; next.enabled = true; next.play(); }\n return;\n }\n next.reset();\n if (oneShot) { next.setLoop(THREE.LoopOnce, 1); next.clampWhenFinished = true; }\n else { next.setLoop(THREE.LoopRepeat, Infinity); next.clampWhenFinished = false; }\n next.enabled = true;\n next.timeScale = (state === 'walk') ? 1.1 : 1.0;\n next.fadeIn(0.3).play();\n if (entry.active) entry.active.fadeOut(0.3);\n entry.active = next;\n }\n\n // ---- placement (DETERMINISTIC — office.layout is the single source of truth) ---------------\n function placeEntry(entry, seat) {\n var g = entry.object3D;\n g.position.set(seat.x, 0, seat.z);\n g.rotation.y = seat.angle;\n entry.seat = seat;\n entry.deskPos = new THREE.Vector3(seat.x, 0, seat.z);\n entry.basePos = new THREE.Vector3(seat.x, 0, seat.z);\n entry.baseAngle = seat.angle;\n }\n\n // ---- DIRECTOR seat: the HEAD of the meeting table. office.meetCenter is ALREADY the head-of-table\n // anchor — the office pushed it back from the boardroom POI along the table's AUTHORED forward axis\n // by a table half-length (and clamped it to the footprint). office.getMeetFacing() is the live yaw\n // to look DOWN the table toward the gathered team. So we do NOT add our own world-axis offset (that\n // used to double-offset along +Z and shove the Director through the wall/floor edge). We sit AT the\n // anchor, nudge a SMALL amount further back ALONG the table axis (opposite the facing) so the head\n // seat clears the table edge, face down the table, and CLAMP to the office floor so it can never\n // land outside the room. It STANDS / idles here and never claims a member sit_work desk. ----\n var DIRECTOR_BACK = 0.45; // small nudge behind the head anchor, ALONG the table axis (units).\n var DIRECTOR_EDGE = 0.7; // keep the Director at least this far inside the floor edge (units).\n function directorSeat() {\n var c = (office && office.meetCenter) ? office.meetCenter : null;\n var cx = c ? c.x : 0, cz = c ? c.z : 0;\n // Live head-of-table facing (look down the table toward the team). Fall back to the stale\n // primitive, then to PI. NOTE: office.meetFacing is a snapshot of 0 — always prefer the getter.\n var facing = 0;\n if (office && typeof office.getMeetFacing === 'function') facing = office.getMeetFacing();\n else if (office && typeof office.meetFacing === 'number') facing = office.meetFacing;\n if (!(typeof facing === 'number' && isFinite(facing))) facing = Math.PI;\n // Forward (down the table) = (sin,cos) of facing; stand a touch further BACK = opposite forward.\n var fwdX = Math.sin(facing), fwdZ = Math.cos(facing);\n var x = cx - fwdX * DIRECTOR_BACK;\n var z = cz - fwdZ * DIRECTOR_BACK;\n // CLAMP inside the office floor extent so the Director can never end up past a wall / off the\n // floor. extentFor is the half-extent (FIXED office footprint); keep a margin from the edge and a\n // sane minimum radius for tiny rooms. We clamp each axis independently to the floor square.\n var ext = 6.0;\n try { if (office && typeof office.extentFor === 'function') ext = office.extentFor(1); } catch (e) {}\n if (!(typeof ext === 'number' && isFinite(ext))) ext = 6.0;\n var lim = ext - DIRECTOR_EDGE;\n if (lim < 1.0) lim = 1.0;\n if (x > lim) x = lim; else if (x < -lim) x = -lim;\n if (z > lim) z = lim; else if (z < -lim) z = -lim;\n return { x: x, z: z, angle: facing, deskX: x, deskZ: z, deskAngle: facing };\n }\n\n // ---- anti-overlap: when office.layout reuses a POI round-robin (roster > unique POIs), two seats\n // can coincide. We spread duplicates onto a deterministic small ring around the shared seat so more\n // agents render WITHOUT overlapping. dupRank is how many earlier seats share this (x,z). ----\n function spreadSeat(seat, dupRank) {\n if (!dupRank) return seat;\n var ang = dupRank * 2.399963; // golden-angle spread (deterministic, even)\n var r = 0.65 + 0.32 * Math.floor((dupRank - 1) / 6); // grow the ring every 6 duplicates\n return {\n x: seat.x + Math.cos(ang) * r,\n z: seat.z + Math.sin(ang) * r,\n angle: seat.angle,\n deskX: seat.deskX + Math.cos(ang) * r,\n deskZ: seat.deskZ + Math.sin(ang) * r,\n deskAngle: seat.deskAngle\n };\n }\n\n // Find this agent's HOME sit_work POI: the nearest sit_work POI to its deterministic seat. (layout\n // fills sit_work POIs first in id order, so the i-th agent's seat IS the i-th sit_work POI; nearest-\n // match makes this robust to round-robin overflow / re-reads.)\n function resolveHomePoi(entry) {\n if (!poisReady) { entry.homePoiId = null; return; }\n var best = null, bestD = Infinity;\n for (var i = 0; i < poiList.length; i++) {\n var p = poiList[i];\n if (p.kind !== 'sit_work') continue;\n var dx = p.position.x - entry.basePos.x, dz = p.position.z - entry.basePos.z;\n var d = dx * dx + dz * dz;\n if (d < bestD) { bestD = d; best = p; }\n }\n entry.homePoiId = best ? best.id : null;\n }\n\n // ---- sync(list, campaign) : diff roster -> avatars -----------------------------------------\n function sync(list, campaign) {\n list = Array.isArray(list) ? list : [];\n if (!template) return;\n tryBuildNav();\n refreshPois();\n var n = list.length;\n var seats = office.layout(n);\n var nextIds = {};\n var newOrder = [];\n\n var ordered = list.slice();\n // Director-first ordering. An explicit __director===true entry wins; else fall back to the lead\n // heuristic (index 0 / role/name contains director|lead) so legacy rosters still get a Director.\n var leadIdx = -1;\n var hasFlag = false;\n for (var lf = 0; lf < ordered.length; lf++) {\n if (isDirectorEntry(ordered[lf])) { leadIdx = lf; hasFlag = true; break; }\n }\n if (leadIdx < 0) {\n for (var li = 0; li < ordered.length; li++) {\n if (isLeadAgent(ordered[li], li)) { leadIdx = li; break; }\n }\n }\n if (leadIdx > 0) {\n var lead0 = ordered.splice(leadIdx, 1)[0];\n ordered.unshift(lead0);\n }\n\n // Track how many earlier seats share each (x,z) so duplicates fan out (anti-overlap).\n var seatDupCount = {};\n for (var i = 0; i < ordered.length; i++) {\n var a = ordered[i] || {};\n var id = String(a.id != null ? a.id : ('idx-' + i));\n nextIds[id] = true;\n newOrder.push(id);\n // The Director is whoever sits at index 0 AND (carries the flag, OR — when no flag exists in the\n // roster at all — matches the lead heuristic). Members are never treated as Director.\n var director = (i === 0) && (hasFlag ? isDirectorEntry(a) : isLeadAgent(a, 0));\n var lead = director || (i === 0) || isLeadAgent(a, i);\n var colorHex = lead ? DIRECTOR_COLOR : memberColorHex(i - 1);\n var seat;\n if (director) {\n seat = directorSeat(); // head of the meeting table — NOT a member desk\n } else {\n seat = seats[i] || { x: 0, z: 0, angle: 0, deskX: 0, deskZ: 0, deskAngle: 0 };\n var sk = seat.x.toFixed(2) + ',' + seat.z.toFixed(2);\n var dup = seatDupCount[sk] || 0;\n seatDupCount[sk] = dup + 1;\n seat = spreadSeat(seat, dup); // fan out duplicate POI seats so nobody overlaps\n }\n var entry = byId[id];\n if (!entry) {\n var built = buildAvatar(colorHex, lead);\n var ringObj = buildRing(colorHex);\n entry = {\n id: id,\n key: id,\n agent: a,\n role: String(a.role || (lead ? 'Director' : 'Agent')),\n colorHex: colorHex,\n status: 'idle',\n run: null,\n isLead: lead,\n isDirector: director, // head-of-table Director: stands/idles, no member desk\n seatIndex: i,\n object3D: built.group,\n model: built.model,\n mixer: built.mixer,\n actions: built.actions,\n active: null,\n animState: null,\n stateTimer: 0,\n accentMats: built.accentMats,\n ring: ringObj.mesh,\n ringMat: ringObj.mat,\n ringPulse: 0,\n headTmp: new THREE.Vector3(),\n // --- movement / pathing (PathAgent + driver) state ---\n behavior: B_IDLE, // B_IDLE / B_GOTO / B_SEATED\n path: null, // Vector3[] waypoints\n nodeIndex: 0,\n isMoving: false,\n arrivalCb: null,\n sitTarget: null, // 'sit_work' | 'sit_idle' set by prepareSitDown\n homePoiId: null,\n behaviorTimer: Math.random() * 5 + 2, // initial 2-7s wait (NpcAgentDriver)\n wasBusy: false,\n seatedPoiId: null, // POI currently occupied while seated\n handoff: null, // ADDITIVE handoff-walk machine: { phase, talkTimer, returnTo } or null\n sayLine: null, // DAD-JOKE line for the UI bubble (set ~3s on a free 1-to-1 meet)\n sayIsJoke: false, // MARK: the current sayLine is a DECORATIVE dad joke, not real work\n sayTimer: 0, // ms remaining on the current sayLine before it clears\n socialTimer: Math.random() * 10 + 6 // cooldown before this agent may emit an ambient joke\n };\n world.group.add(entry.object3D);\n world.group.add(entry.ring);\n byId[id] = entry;\n } else {\n if (entry.colorHex !== colorHex) {\n recolor(entry, colorHex);\n entry.colorHex = colorHex;\n }\n entry.agent = a;\n entry.role = String(a.role || (lead ? 'Director' : 'Agent'));\n entry.isLead = lead;\n entry.isDirector = director;\n entry.seatIndex = i;\n }\n entry.ring.position.set(seat.x, RING_Y, seat.z);\n var seatMoved = !entry.seat || entry.seat.x !== seat.x || entry.seat.z !== seat.z || entry.seat.angle !== seat.angle;\n if (seatMoved) placeEntry(entry, seat);\n if (entry.isDirector) {\n // Director never owns a member desk: drop any home POI + any seat claim it might have held.\n entry.homePoiId = null;\n poiReleaseAll(entry.key);\n } else {\n resolveHomePoi(entry);\n }\n if (!entry.active) playState(entry, restState(entry));\n }\n\n for (var k = 0; k < order.length; k++) {\n var oldId = order[k];\n if (!nextIds[oldId]) {\n var e = byId[oldId];\n if (e) {\n poiReleaseAll(e.key);\n try { if (e.mixer) e.mixer.stopAllAction(); } catch (er) {}\n if (e.object3D && e.object3D.parent) e.object3D.parent.remove(e.object3D);\n if (e.ring && e.ring.parent) e.ring.parent.remove(e.ring);\n disposeObject(e.object3D);\n if (e.ring) { if (e.ring.geometry) e.ring.geometry.dispose(); if (e.ringMat) e.ringMat.dispose(); }\n }\n if (spotlightId === oldId) { spotlightId = null; try { world.spotlightOn(null); } catch (er2) {} }\n delete byId[oldId];\n }\n }\n\n order = newOrder;\n\n var E = office.extentFor(n);\n try { world.setExtent(E); } catch (e3) {}\n try { office.buildDesks(n); } catch (e4) {}\n }\n\n function recolor(entry, colorHex) {\n var bright = brightTint(colorHex);\n var accCol = capTint(colorHex);\n for (var i = 0; i < entry.accentMats.length; i++) {\n var m = entry.accentMats[i];\n if (m && m.color) { m.color.copy(bright); m.needsUpdate = true; }\n }\n if (entry.ringMat) {\n entry.ringMat.color.set(colorHex);\n entry.ringMat.emissive.set(colorHex);\n entry.ringMat.needsUpdate = true;\n }\n entry.model.traverse(function (o) {\n if (!o.isMesh || !o.visible || !o.material) return;\n var mn = (!Array.isArray(o.material) && o.material.name) ? o.material.name : '';\n var isAcc = isCapPart(o.name) || isCapPart(mn) || isHeadphonePart(o.name) || isHeadphonePart(mn);\n if (!isAcc) return;\n var mats = Array.isArray(o.material) ? o.material : [o.material];\n for (var k = 0; k < mats.length; k++) {\n if (mats[k] && mats[k].color) { mats[k].color.copy(accCol); mats[k].needsUpdate = true; }\n }\n });\n }\n\n function disposeObject(obj) {\n if (!obj) return;\n obj.traverse(function (o) {\n if (o.isMesh) {\n if (o.geometry) o.geometry.dispose();\n if (o.material) {\n if (Array.isArray(o.material)) o.material.forEach(function (m) { if (m && m.dispose) m.dispose(); });\n else if (o.material.dispose) o.material.dispose();\n }\n }\n });\n }\n\n // Resting state when not pathing: sit_work on a running run; disabled -> sit_idle; else idle.\n // The Director never sits at a member desk — it STANDS / idles at the meeting-table head.\n function restState(entry) {\n if (entry.isDirector) return 'idle';\n if (entry.status === 'running') return 'sit_work';\n if (isDisabled(entry.agent)) return 'sit_idle';\n return 'idle';\n }\n\n // ---- movement core (PathAgent + CharacterController) ---------------------------------------\n // setPath: prepend 'from' if the first node is meaningfully away (so the avatar walks from where it\n // stands), start at the right node, mark moving. Mirrors PathAgent.setPath.\n function setPath(entry, path, fromPos) {\n var p = path.slice();\n var startIdx = 0;\n if (fromPos && p.length) {\n var dx = p[0].x - fromPos.x, dz = p[0].z - fromPos.z;\n if ((dx * dx + dz * dz) >= 0.0001) { p = [fromPos.clone()].concat(p); startIdx = 1; }\n }\n entry.path = p;\n entry.nodeIndex = startIdx;\n entry.isMoving = p.length > 0;\n }\n\n // moveTo: navmesh path from->target, overwrite last node with exact target, store arrival cb, set\n // GOTO + walk. NPCs REFUSE to move when there is no path (return false) — they never teleport (only\n // the player teleports in the original; there is no player here). Mirrors CharacterController.moveTo.\n function moveTo(entry, target, arrivalState, onArrival, fromPos, targetQuat) {\n var from = fromPos ? fromPos.clone() : new THREE.Vector3(entry.object3D.position.x, 0, entry.object3D.position.z);\n var path = findPath(from, target);\n if (!path || path.length === 0) return false; // NPC: no path -> refuse to move\n path = path.slice();\n path[path.length - 1] = target.clone(); // end EXACTLY at target\n setPath(entry, path, from);\n entry.arrivalCb = function () {\n if (targetQuat) entry.object3D.rotation.y = yawFromQuat(targetQuat);\n playState(entry, arrivalState || 'idle');\n if (onArrival) onArrival(entry);\n };\n entry.behavior = B_GOTO;\n playState(entry, 'walk');\n return true;\n }\n\n // walkToPoi: the SIT trigger. Claim a free POI, prepareSitDown for sit variants (store sitTarget\n // BEFORE the async arrival), path to it; the arrival cb snaps to the POI's exact world pos + facing,\n // marks SEATED, plays the one-shot 'Sit' (sit_down) clip which auto-advances to the looping\n // Sit_Work / Sit_Idle clip. Occupy on success. Mirrors CharacterController.walkToPoi.\n function walkToPoi(entry, poiId, onArrival, fromPos) {\n var poi = poiById[poiId];\n if (!poi) return false;\n if (poi.occupiedBy !== null && poi.occupiedBy !== entry.key) return false;\n var targetState = poi.arrivalState;\n var isSitVariant = (targetState === 'sit_idle' || targetState === 'sit_work');\n var isArea = String(poi.id).indexOf('area') !== -1 || poi.kind === 'area';\n if (isSitVariant) entry.sitTarget = targetState; // prepareSitDown\n var ok = moveTo(entry, poi.position, isSitVariant ? 'sit_down' : targetState, function (en) {\n // teleport to the POI's EXACT world position (kills sub-unit navmesh offset).\n en.object3D.position.set(poi.position.x, 0, poi.position.z);\n if (!isArea) en.object3D.rotation.y = yawFromQuat(poi.quaternion); // snap facing to the chair\n if (isSitVariant) {\n en.behavior = B_SEATED;\n en.seatedPoiId = poi.id;\n // playState('sit_down') was set as the arrivalState in moveTo; ensure SEATED stays after it.\n }\n if (onArrival) onArrival(en);\n }, fromPos, null);\n if (!ok) { if (isSitVariant) entry.sitTarget = null; return false; }\n // Claim: release my old claims, occupy this POI.\n poiReleaseAll(entry.key);\n poiOccupy(poiId, entry.key);\n return true;\n }\n\n function cancelMovement(entry) {\n entry.path = null; entry.isMoving = false; entry.nodeIndex = 0; entry.arrivalCb = null;\n if (entry.behavior === B_GOTO) entry.behavior = B_IDLE;\n }\n\n // Per-frame: advance the GOTO body toward its current waypoint, consume nodes within\n // PATH_NODE_ARRIVAL (XZ), fire the arrival callback on the final node. Mirrors the GPU mover +\n // PathAgent.update + CharacterController.updatePaths.\n function stepMovement(entry, dt) {\n if (entry.behavior !== B_GOTO || !entry.isMoving || !entry.path || !entry.path.length) return;\n var pos = entry.object3D.position;\n var node = entry.path[entry.nodeIndex];\n if (!node) { entry.isMoving = false; return; }\n var dx = node.x - pos.x, dz = node.z - pos.z;\n var dist = Math.sqrt(dx * dx + dz * dz);\n if (dist > SNAP_RADIUS) {\n var step = Math.min(dist, MOVE_SPEED * dt);\n pos.x += (dx / dist) * step;\n pos.z += (dz / dist) * step;\n // face along travel.\n var want = Math.atan2(dx, dz);\n var cur = entry.object3D.rotation.y;\n var d = want - cur;\n while (d > Math.PI) d -= Math.PI * 2;\n while (d < -Math.PI) d += Math.PI * 2;\n entry.object3D.rotation.y = cur + d * Math.min(1, dt * 10);\n } else {\n pos.x = node.x; pos.z = node.z; // snap to waypoint\n }\n // PathAgent.update: node consumed within PATH_NODE_ARRIVAL (XZ) -> advance / final arrival.\n var ndx = node.x - pos.x, ndz = node.z - pos.z;\n if ((ndx * ndx + ndz * ndz) < PATH_NODE_ARRIVAL * PATH_NODE_ARRIVAL) {\n entry.nodeIndex++;\n if (entry.nodeIndex >= entry.path.length) {\n // FINAL arrival.\n entry.isMoving = false;\n entry.path = null;\n if (entry.behavior === B_GOTO) entry.behavior = B_IDLE;\n var cb = entry.arrivalCb; entry.arrivalCb = null;\n if (cb) cb();\n }\n }\n }\n\n // ---- NPC decision logic (NpcAgentDriver) ---------------------------------------------------\n // NO-WORK agents are FREE: they ROAM between the poi-idle-area POIs (hub / boardroom / canteen /\n // workspace) and stand / idle / look around via the navmesh. They do NOT sit at a work desk or an\n // idle desk — free agents stay on their feet (light ambient roaming, never stuck sitting). Running\n // agents are driven to their OWN work seat elsewhere; disabled agents rest. All movement is navmesh.\n // Autonomy-eligible only in a stable, non-moving state: idle / look.\n function decideNext(entry) {\n var rand = Math.random();\n var currentPos = new THREE.Vector3(entry.object3D.position.x, 0, entry.object3D.position.z);\n\n // A free agent should never linger seated: if it is somehow in a seated state, stand up + release\n // the chair first (it will roam on the next pass). Guarantees req #2 — free agents do not sit.\n if (isSeatedState(entry.animState)) {\n poiReleaseAll(entry.key);\n entry.behavior = B_IDLE;\n playState(entry, 'idle');\n entry.behaviorTimer = Math.random() * 2 + 1; // re-decide (roam) shortly\n return;\n }\n\n // A. Roam to an idle-area POI (hub / boardroom / canteen / workspace), stand there, look around,\n // then later roam again — navmesh both ways. This is the primary free-agent behaviour (~75%).\n if (rand < 0.75) {\n var ap = pickRandom(freeIdleAreaPois(entry.key));\n if (ap) {\n // distributed slot around the area center (NpcAgentDriver): angle by index, radius 1.\n var ang = entry.seatIndex * (Math.PI * 2) / MAX_AGENTS;\n var tx = ap.position.x + Math.cos(ang) * 1.0;\n var tz = ap.position.z + Math.sin(ang) * 1.0;\n var dir = new THREE.Vector3(ap.position.x - tx, 0, ap.position.z - tz);\n var faceQ = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.atan2(dir.x, dir.z));\n var tgt = new THREE.Vector3(tx, 0, tz);\n // arrival state 'look' -> stand and look around (no sitting); release any prior claim.\n if (moveTo(entry, tgt, 'look', undefined, currentPos, faceQ)) {\n poiReleaseAll(entry.key); // free agents never hold a seat\n entry.behaviorTimer = Math.random() * 5 + 8; // 8-13s of standing ambient before the next roam\n return;\n }\n }\n }\n\n // B. Stand in place and play a light ambient reaction (look / wave / happy) — still no sitting.\n var pickR = Math.random();\n var react = (pickR < 0.5) ? 'look' : (pickR < 0.8 ? 'wave' : 'happy');\n playState(entry, react);\n entry.behaviorTimer = Math.random() * 4 + 4; // 4-8s\n }\n\n // The driver-style per-agent tick: route running/disabled to their seats; otherwise count down the\n // autonomy timer and decide. Only runs when NOT mid-path (GOTO) and in a stable state.\n function driveAgent(entry, dt) {\n var busy = (entry.status === 'running');\n\n // DIRECTOR: it does not work a desk and does not roam — it STANDS / idles at the meeting-table\n // head, facing the team. Keep it pinned to its head-of-table seat + idle (re-derive the seat each\n // tick so it tracks meetCenter once the office GLB loads). It is never a handoff giver/receiver.\n if (entry.isDirector) {\n if (entry.handoff) entry.handoff = null;\n if (entry.behavior === B_GOTO) cancelMovement(entry);\n var ds = directorSeat();\n entry.basePos.set(ds.x, 0, ds.z);\n entry.deskPos.set(ds.x, 0, ds.z);\n entry.baseAngle = ds.angle;\n entry.object3D.position.set(ds.x, 0, ds.z);\n entry.object3D.rotation.y = ds.angle;\n if (entry.ring) entry.ring.position.set(ds.x, RING_Y, ds.z);\n entry.behavior = B_IDLE;\n if (entry.animState !== 'idle' && entry.animState !== 'look') playState(entry, 'idle');\n return;\n }\n\n // busy -> idle edge: act immediately (NpcAgentDriver wasBusy/!isBusy).\n if (entry.wasBusy && !busy) entry.behaviorTimer = 0;\n entry.wasBusy = busy;\n\n // RUNNING: ensure the agent is heading to / seated at its WORK desk (Sit_Work). SceneManager owns\n // this in the original; here the driver does it directly. A running agent is NEVER a handoff\n // giver, so drop any handoff-walk it might be mid-way through (it goes back to its desk).\n if (busy) {\n if (entry.handoff) { entry.handoff = null; cancelMovement(entry); }\n if (entry.animState === 'sit_work') return; // already working\n if (entry.animState === 'sit_down') return; // sitting down -> auto-advances to sit_work\n if (entry.behavior === B_SEATED) return; // seated/settling — leave it\n if (entry.behavior === B_GOTO) return; // already walking to the desk\n var workPoi = entry.homePoiId ? poiById[entry.homePoiId] : null;\n if (navReady && workPoi && (workPoi.occupiedBy === null || workPoi.occupiedBy === entry.key)) {\n var fromW = new THREE.Vector3(entry.object3D.position.x, 0, entry.object3D.position.z);\n if (walkToPoi(entry, workPoi.id, undefined, fromW)) return;\n }\n // Fallback (no nav / no path / occupied): sit_work in place at the desk seat.\n entry.object3D.position.set(entry.deskPos.x, 0, entry.deskPos.z);\n entry.object3D.rotation.y = entry.baseAngle;\n entry.behavior = B_SEATED;\n playState(entry, 'sit_work');\n return;\n }\n\n // DISABLED: rest seated (Sit_Idle) in place at the seat.\n if (isDisabled(entry.agent)) {\n if (entry.handoff) entry.handoff = null;\n if (entry.behavior === B_GOTO) cancelMovement(entry);\n entry.object3D.position.set(entry.basePos.x, 0, entry.basePos.z);\n entry.object3D.rotation.y = entry.baseAngle;\n entry.behavior = B_SEATED;\n playState(entry, 'sit_idle');\n return;\n }\n\n // HANDOFF-WALK in progress (free giver visiting a receiver): the handoff stepper owns this agent —\n // skip all autonomy so decideNext never hijacks the walk. The stepper advances it in update().\n if (entry.handoff) return;\n\n // Currently walking: let stepMovement finish; no decision.\n if (entry.behavior === B_GOTO) return;\n\n // Without a working navmesh we NEVER walk (fallback) — agents just sit at their POI: sit_idle at\n // their seat. This guarantees they never clip walls.\n if (!navReady) {\n if (!isSeatedState(entry.animState)) {\n entry.object3D.position.set(entry.basePos.x, 0, entry.basePos.z);\n entry.object3D.rotation.y = entry.baseAngle;\n entry.behavior = B_SEATED;\n playState(entry, 'sit_idle');\n }\n return;\n }\n\n // Autonomy only in a stable state.\n var stable = (entry.animState === 'idle' || entry.animState === 'sit_idle' || entry.animState === 'look');\n if (!stable) return;\n entry.behaviorTimer -= dt;\n if (entry.behaviorTimer <= 0) decideNext(entry);\n }\n\n // ---- update(dt) : mixers + state-machine timers + movement + drivers + ring pulse ----------\n function update(dt) {\n if (!isFinite(dt) || dt < 0) dt = 0;\n if (dt > 0.1) dt = 0.1;\n // Lazy nav build (office GLB may have finished loading after us).\n if (!navReady) tryBuildNav();\n if (!poisReady) refreshPois();\n var now = (typeof performance !== 'undefined' ? performance.now() : Date.now()) / 1000;\n for (var i = 0; i < order.length; i++) {\n var e = byId[order[i]];\n if (!e) continue;\n if (e.mixer) e.mixer.update(dt);\n\n // (1) state-machine timers: one-shot states auto-advance (sit_down -> sit_target/idle).\n if (e.stateTimer > 0) {\n e.stateTimer -= dt;\n if (e.stateTimer <= 0) {\n var cur = e.animState;\n if (cur === 'sit_down') {\n var next = e.sitTarget || 'sit_idle';\n e.sitTarget = null;\n playState(e, next); // looping Sit_Work / Sit_Idle\n e.behavior = B_SEATED;\n } else {\n playState(e, nextStateAfter(cur) || 'idle');\n }\n }\n }\n\n // (2) move along the navmesh path (GOTO only).\n stepMovement(e, dt);\n\n // (3) driver decision (running/disabled routing + autonomy).\n driveAgent(e, dt);\n\n // ring pulse.\n var targetPulse = (e.status === 'running') ? 1.0 : 0.6;\n e.ringPulse += (targetPulse - e.ringPulse) * Math.min(1, dt * 4);\n if (e.ringMat) {\n var extra = (e.status === 'running') ? (0.4 * (0.5 + 0.5 * Math.sin(now * 3))) : 0;\n e.ringMat.emissiveIntensity = e.ringPulse + extra;\n }\n }\n\n // (4) ADDITIVE overlay: advance the optional handoff beam (no-op unless playing). Guarded so a\n // failure here can never disturb the movement/sit loop above.\n try { stepHandoff(dt); } catch (eh) {}\n\n // (5) ADDITIVE physical cue: advance any active handoff-walks (giver walking to/from a receiver).\n // Guarded so a failure here can never disturb the movement/sit loop above.\n try { stepHandoffWalks(dt); } catch (ehw) {}\n\n // (6) ADDITIVE DAD JOKES: detect FREE 1-to-1 ambient encounters (set sayLine) + expire old lines.\n // Guarded so a failure here can never disturb the movement/sit loop above.\n try { scanSocialEncounters(dt); } catch (es) {}\n try { tickSayLines(dt); } catch (et) {}\n }\n\n // ---- setStatus(id, status, run) ------------------------------------------------------------\n function headPosOf(entry) {\n entry.object3D.updateMatrixWorld(true);\n entry.headTmp.set(entry.object3D.position.x, HEAD_Y, entry.object3D.position.z);\n return entry.headTmp.clone();\n }\n\n // ---- handoff-beam overlay helpers (ADDITIVE) -----------------------------------------------\n // Dispose any live beam meshes/materials and detach from the scene group. Safe to call twice.\n function disposeHandoffBeam() {\n var b = handoffBeam;\n handoffBeam = null;\n if (!b) return;\n try { if (b.tube && b.tube.parent) b.tube.parent.remove(b.tube); } catch (e) {}\n try { if (b.dot && b.dot.parent) b.dot.parent.remove(b.dot); } catch (e2) {}\n try { if (b.tubeGeo) b.tubeGeo.dispose(); } catch (e3) {}\n try { if (b.dotGeo) b.dotGeo.dispose(); } catch (e4) {}\n try { if (b.tubeMat) b.tubeMat.dispose(); } catch (e5) {}\n try { if (b.dotMat) b.dotMat.dispose(); } catch (e6) {}\n }\n\n // Build the beam meshes for the CURRENT hop (a glowing emissive tube + a small travelling dot).\n // The tube spans from->to; the dot starts at 'from' and travels to 'to' over the hop.\n function buildHandoffBeam(from, to) {\n disposeHandoffBeam();\n if (!from || !to) return;\n var dir = new THREE.Vector3().subVectors(to, from);\n var len = dir.length();\n if (!isFinite(len) || len < 0.001) return;\n // Hue: the Director-first hop colour (use the destination agent's emissive feel — soft cyan/blue).\n var col = new THREE.Color(0x6fb7ff);\n // Thin tube: a unit cylinder (radius 0.025) along +Y, oriented to the segment, centred at midpoint.\n var tubeGeo = new THREE.CylinderGeometry(0.025, 0.025, len, 8, 1, true);\n var tubeMat = new THREE.MeshBasicMaterial({ color: col.clone(), transparent: true, opacity: 0.0, depthWrite: false });\n var tube = new THREE.Mesh(tubeGeo, tubeMat);\n var mid = new THREE.Vector3().addVectors(from, to).multiplyScalar(0.5);\n tube.position.copy(mid);\n tube.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.clone().normalize());\n tube.frustumCulled = false;\n tube.renderOrder = 9;\n // Travelling dot: a small emissive sphere, starts at 'from'.\n var dotGeo = new THREE.SphereGeometry(0.07, 12, 10);\n var dotMat = new THREE.MeshBasicMaterial({ color: col.clone(), transparent: true, opacity: 0.0, depthWrite: false });\n var dot = new THREE.Mesh(dotGeo, dotMat);\n dot.position.copy(from);\n dot.frustumCulled = false;\n dot.renderOrder = 10;\n try { world.group.add(tube); world.group.add(dot); } catch (e) {}\n handoffBeam = { tube: tube, dot: dot, tubeMat: tubeMat, dotMat: dotMat, tubeGeo: tubeGeo, dotGeo: dotGeo, from: from.clone(), to: to.clone() };\n }\n\n // playHandoff(orderedIds): flash a brief glowing beam from each agent head to the next, in order\n // (Director->A->B->C). Resolves CURRENT head positions per id via headPosOf. No-op if a sequence is\n // already playing (safe to call repeatedly). Fully guarded — any failure leaves the scene untouched.\n function playHandoff(orderedIds) {\n try {\n if (handoffActive) return; // ignore while a handoff is already playing\n if (!Array.isArray(orderedIds) || orderedIds.length < 2) return;\n // Resolve head positions for the ids we actually have entries for, preserving order.\n var pts = [];\n for (var i = 0; i < orderedIds.length; i++) {\n var e = byId[String(orderedIds[i])];\n if (!e || !e.object3D) continue;\n pts.push(headPosOf(e));\n }\n if (pts.length < 2) return;\n // Build the per-hop endpoint list (consecutive heads).\n handoffHops = [];\n for (var h = 0; h < pts.length - 1; h++) handoffHops.push({ a: pts[h], b: pts[h + 1] });\n if (!handoffHops.length) return;\n handoffActive = true;\n handoffIndex = 0;\n handoffElapsed = 0;\n buildHandoffBeam(handoffHops[0].a, handoffHops[0].b);\n } catch (e) { handoffActive = false; disposeHandoffBeam(); }\n }\n\n // Per-frame advance of the handoff overlay (called from update). Animates the dot along the hop,\n // pulses the tube, fades out over the tail of each hop, then advances to the next hop. When the\n // last hop finishes it disposes the beam and clears the active flag. Fully guarded.\n function stepHandoff(dt) {\n if (!handoffActive) return;\n try {\n handoffElapsed += dt * 1000;\n var t = handoffElapsed / HANDOFF_HOP_MS;\n if (t >= 1) {\n // advance to the next hop (or finish).\n handoffIndex++;\n handoffElapsed = 0;\n if (handoffIndex >= handoffHops.length) {\n handoffActive = false;\n handoffHops = [];\n handoffIndex = 0;\n disposeHandoffBeam();\n return;\n }\n var hop = handoffHops[handoffIndex];\n buildHandoffBeam(hop.a, hop.b);\n t = 0;\n }\n var b = handoffBeam;\n if (!b) return;\n // Alpha envelope: quick rise, hold, fade over the last HANDOFF_FADE_FRAC of the hop.\n var alpha;\n if (t < 0.15) alpha = t / 0.15;\n else if (t > (1 - HANDOFF_FADE_FRAC)) alpha = Math.max(0, (1 - t) / HANDOFF_FADE_FRAC);\n else alpha = 1;\n if (b.tubeMat) b.tubeMat.opacity = 0.55 * alpha;\n if (b.dotMat) b.dotMat.opacity = 0.95 * alpha;\n // Travel the dot from 'from' to 'to' across the hop.\n if (b.dot && b.from && b.to) {\n var p = t < 0 ? 0 : (t > 1 ? 1 : t);\n b.dot.position.lerpVectors(b.from, b.to, p);\n }\n } catch (e) {\n // On any failure, tear the overlay down and stop — the rest of the scene is unaffected.\n handoffActive = false;\n handoffHops = [];\n handoffIndex = 0;\n disposeHandoffBeam();\n }\n }\n\n // ---- HANDOFF-WALK (ADDITIVE physical cue) --------------------------------------------------\n // handoffWalk(fromId, toId): the GIVER (fromId) physically WALKS the navmesh to the RECEIVER's\n // (toId) desk/POI, faces them, plays Talk/Listen for ~HANDOFF_TALK_MS, then walks back to its OWN\n // desk and resumes free roaming. A tiny 3-phase machine on entry.handoff:\n // phase 1 'toReceiver' -> walking to a point ~1.2u in front of the receiver\n // phase 2 'talk' -> standing, facing the receiver, Talk (giver) (timed)\n // phase 3 'return' -> walking back to its own desk seat, then idle\n // It is SKIPPED entirely (no-op, returns false) for a busy/disabled giver and when no navmesh —\n // it must never disturb a working/seated agent or cause wall-clipping. Fully guarded by the caller.\n function targetPointNear(entry, anchorPos, anchorAngle) {\n // A standing point ~1.2u in front of the anchor (so the giver faces the receiver, not on top of\n // them). Falls back to a small radial offset by the giver's seat index for determinism.\n var dist = 1.2;\n if (isFinite(anchorAngle)) {\n var fx = Math.sin(anchorAngle), fz = Math.cos(anchorAngle); // anchor forward (matches yawFromQuat)\n return new THREE.Vector3(anchorPos.x + fx * dist, 0, anchorPos.z + fz * dist);\n }\n var ang = entry.seatIndex * (Math.PI * 2) / MAX_AGENTS;\n return new THREE.Vector3(anchorPos.x + Math.cos(ang) * dist, 0, anchorPos.z + Math.sin(ang) * dist);\n }\n function faceTowardsXZ(entry, px, pz) {\n var dx = px - entry.object3D.position.x, dz = pz - entry.object3D.position.z;\n if ((dx * dx + dz * dz) > 0.000001) entry.object3D.rotation.y = Math.atan2(dx, dz);\n }\n // Resolve the receiver's \"desk\" anchor position + facing angle (its home sit_work POI when known,\n // else its deterministic desk seat). Returns { pos:Vector3, angle:number } or null.\n function receiverAnchor(receiver) {\n var poi = receiver.homePoiId ? poiById[receiver.homePoiId] : null;\n if (poi) return { pos: poi.position.clone(), angle: yawFromQuat(poi.quaternion) };\n if (receiver.deskPos) return { pos: receiver.deskPos.clone(), angle: receiver.baseAngle };\n return null;\n }\n // ---- DAD JOKES (ADDITIVE) ------------------------------------------------------------------\n // An agent is \"free to chat\" when it is NOT the Director, NOT running, and NOT disabled. Only such\n // agents say dad jokes (req #2: \"Only when FREE — no running run\").\n function isFreeToChat(entry) {\n return !!entry && !entry.isDirector && entry.status !== 'running' && !isDisabled(entry.agent);\n }\n // setSayLine: pick a dad joke DETERMINISTICALLY by (seatIndex + a runtime counter) so the same\n // agent varies its line over time, set it on the entry for ~SAY_LINE_MS, bump the shared counter.\n function setSayLine(entry) {\n if (!isFreeToChat(entry)) return;\n var idx = ((entry.seatIndex + jokeCounter) % DAD_JOKES.length + DAD_JOKES.length) % DAD_JOKES.length;\n entry.sayLine = DAD_JOKES[idx];\n entry.sayIsJoke = true; // every setSayLine line IS a decorative dad joke (UI styles it apart)\n entry.sayTimer = SAY_LINE_MS;\n jokeCounter = (jokeCounter + 1) % 1000000;\n }\n // Both ends of a free 1-to-1 meet exchange a quick line (giver speaks, receiver answers).\n function exchangeJokes(a, b) {\n if (isFreeToChat(a)) setSayLine(a);\n if (isFreeToChat(b)) setSayLine(b);\n }\n // tickSayLines: count down every active sayLine and clear it when it expires (called from update).\n function tickSayLines(dt) {\n for (var i = 0; i < order.length; i++) {\n var e = byId[order[i]];\n if (!e || !e.sayLine) continue;\n e.sayTimer -= dt * 1000;\n if (e.sayTimer <= 0) { e.sayLine = null; e.sayIsJoke = false; e.sayTimer = 0; }\n }\n }\n // scanSocialEncounters: an AMBIENT social cue. When two FREE idle agents happen to stand close\n // together (and neither is mid-joke / on cooldown), they exchange dad jokes 1-to-1. Cheap O(n^2)\n // over the small roster, guarded, and rate-limited per agent via socialTimer so it stays sparse.\n var SOCIAL_DIST = 1.6; // how close two agents must be to \"meet\" (world units).\n function scanSocialEncounters(dt) {\n for (var i = 0; i < order.length; i++) {\n var a = byId[order[i]];\n if (!a) continue;\n if (a.socialTimer > 0) a.socialTimer -= dt;\n if (!isFreeToChat(a) || a.handoff || a.behavior === B_GOTO) continue;\n var stableA = (a.animState === 'idle' || a.animState === 'look');\n if (!stableA || a.socialTimer > 0 || a.sayLine) continue;\n for (var j = i + 1; j < order.length; j++) {\n var b = byId[order[j]];\n if (!b || !isFreeToChat(b) || b.handoff || b.behavior === B_GOTO) continue;\n var stableB = (b.animState === 'idle' || b.animState === 'look');\n if (!stableB || b.socialTimer > 0 || b.sayLine) continue;\n var dx = a.object3D.position.x - b.object3D.position.x;\n var dz = a.object3D.position.z - b.object3D.position.z;\n if ((dx * dx + dz * dz) > (SOCIAL_DIST * SOCIAL_DIST)) continue;\n // They meet: face each other, exchange jokes, set a cooldown so it stays sparse.\n faceTowardsXZ(a, b.object3D.position.x, b.object3D.position.z);\n faceTowardsXZ(b, a.object3D.position.x, a.object3D.position.z);\n exchangeJokes(a, b);\n a.socialTimer = Math.random() * 12 + 10;\n b.socialTimer = Math.random() * 12 + 10;\n break; // a meets at most one partner per scan\n }\n }\n }\n\n function handoffWalk(fromId, toId) {\n try {\n if (!navReady) return false; // POI-only fallback: never walk\n var giver = byId[String(fromId)];\n var receiver = byId[String(toId)];\n if (!giver || !receiver || giver === receiver) return false;\n // Only a FREE giver hands off physically — never pull a running/disabled agent off its desk.\n if (giver.status === 'running' || isDisabled(giver.agent)) return false;\n if (giver.handoff) return false; // already walking a handoff — ignore\n var anchor = receiverAnchor(receiver);\n if (!anchor) return false;\n var standPt = targetPointNear(giver, anchor.pos, anchor.angle);\n var from = new THREE.Vector3(giver.object3D.position.x, 0, giver.object3D.position.z);\n // Remember where to return to (the giver's OWN desk seat).\n var returnTo = giver.deskPos ? giver.deskPos.clone() : from.clone();\n var returnAngle = giver.baseAngle;\n // Phase 1: walk to the receiver. On arrival, face the receiver + start the talk pause.\n var ok = moveTo(giver, standPt, 'talk', function (en) {\n try {\n faceTowardsXZ(en, anchor.pos.x, anchor.pos.z);\n if (en.handoff) { en.handoff.phase = 'talk'; en.handoff.talkTimer = HANDOFF_TALK_MS; }\n playState(en, 'talk');\n // DAD JOKE: a free 1-to-1 talk — giver (and the receiver if it is also free) say a line.\n exchangeJokes(en, receiver);\n } catch (e) {}\n }, from, null);\n if (!ok) return false; // no path -> refuse (NPCs never teleport)\n poiReleaseAll(giver.key); // a roaming giver holds no seat\n giver.handoff = { phase: 'toReceiver', talkTimer: 0, returnTo: returnTo, returnAngle: returnAngle, toId: String(toId) };\n return true;\n } catch (e) { return false; }\n }\n // Per-frame advance of every active handoff-walk (called from update, guarded). Phase 2 counts down\n // the talk pause then walks the giver home; phase 3 ends when the walk-home arrival fires.\n function stepHandoffWalks(dt) {\n for (var i = 0; i < order.length; i++) {\n var en = byId[order[i]];\n if (!en || !en.handoff) continue;\n var h = en.handoff;\n // Safety: a running/disabled giver drops the handoff (driveAgent also guards this).\n if (en.status === 'running' || isDisabled(en.agent)) { en.handoff = null; continue; }\n if (h.phase === 'talk') {\n h.talkTimer -= dt * 1000;\n if (h.talkTimer <= 0) {\n // Phase 3: walk back to the giver's own desk seat, then idle (free again).\n h.phase = 'return';\n var fromR = new THREE.Vector3(en.object3D.position.x, 0, en.object3D.position.z);\n var ok = moveTo(en, h.returnTo, 'idle', function (e2) {\n try {\n e2.object3D.position.set(h.returnTo.x, 0, h.returnTo.z);\n if (isFinite(h.returnAngle)) e2.object3D.rotation.y = h.returnAngle;\n } catch (er) {}\n e2.handoff = null; // handoff complete — resume autonomy\n e2.behaviorTimer = Math.random() * 3 + 2;\n }, fromR, null);\n if (!ok) { en.handoff = null; en.behaviorTimer = Math.random() * 2 + 1; } // no path home: just resume\n }\n }\n // 'toReceiver' and 'return' phases are driven by stepMovement + the moveTo arrival callbacks.\n }\n }\n\n function setStatus(id, status, run) {\n var key = String(id);\n var entry = byId[key];\n if (!entry) return;\n var s = normStatus(status);\n var was = entry.status;\n entry.status = s;\n entry.run = run || null;\n if (s === 'running') {\n // route to the work desk on the next driver tick; spotlight the speaker now.\n entry.behaviorTimer = 0;\n try { world.spotlightOn(headPosOf(entry)); } catch (e) {}\n spotlightId = key;\n } else if (was === 'running' && s !== 'running') {\n if (spotlightId === key) {\n spotlightId = null;\n try { world.spotlightOn(null); } catch (e2) {}\n }\n // run stopped: stand up (frees the chair) and resume autonomy soon.\n if (entry.behavior === B_GOTO) cancelMovement(entry);\n if (isSeatedState(entry.animState)) { entry.behavior = B_IDLE; playState(entry, 'idle'); }\n entry.behaviorTimer = Math.random() * 2 + 0.5;\n }\n }\n\n // ---- entries() : feed the UI ---------------------------------------------------------------\n function entries() {\n var out = [];\n for (var i = 0; i < order.length; i++) {\n var e = byId[order[i]];\n if (!e) continue;\n out.push(makeEntryView(e));\n }\n return out;\n }\n function makeEntryView(e) {\n return {\n id: e.id,\n agent: e.agent,\n role: e.role,\n colorHex: e.colorHex,\n status: e.status,\n run: e.run,\n object3D: e.object3D,\n ring: e.ring,\n isLead: e.isLead,\n isDirector: e.isDirector,\n sayLine: e.sayLine || null, // DAD JOKE the UI bubble can read (~3s, free 1-to-1 meets only)\n sayIsJoke: !!(e.sayLine && e.sayIsJoke), // MARK: this sayLine is a decorative dad joke (not real\n // work) — the UI renders it with a distinct decorative style.\n headWorldPos: (function (en) { return function () { return headPosOf(en); }; })(e)\n };\n }\n\n return {\n loadAssets: loadAssets,\n sync: sync,\n update: update,\n setStatus: setStatus,\n entries: entries,\n playHandoff: playHandoff,\n handoffWalk: handoffWalk\n };\n}\n`;\n}\n",[246],"ac43c74a-5e66-11f1-991e-1607ee4eb77e","frontend_world.ts","d3331444-5d8c-11f1-85f7-1607ee4eb77e",876,["D",1780393049485],17,"// Part 10 (ENTRY): the \"/world\" Agent World DASHBOARD bootstrap. This is the SMALL ENTRY: it does\n// NOT build the three.js scene OR the panel DOM itself. It imports the 5 factory modules by ABSOLUTE\n// /api URL and wires them together:\n// createWorld <- /api/app-world-scene (the bounded 3D scene, self-sizing to #world-canvas-wrap)\n// createOffice <- /api/app-world-office (floor + desks + perimeter)\n// createAgents <- /api/app-world-agents (avatars driven by the real roster)\n// createUI <- /api/app-world-ui (tiny in-scene status chips over #world-overlay)\n// createDash <- /api/app-world-dash (ALL panel DOM: topbar, logs, kanban, project)\n//\n// The light shell (getWorldHTML) is the SOLE creator of every fixed DOM id; this entry only LOOKS\n// them up: #world-canvas (scene), #world-overlay (chips), and the 5 dash handles (#world-topbar,\n// #world-logs, #world-scenehead, #world-kanban, #world-project). It fetches THIS app's REAL data\n// (Bearer nexus_token) from three cross-cutting endpoints + /api/agents:\n// GET /api/world/activity -> the cross-agent runs feed (LEFT logs + per-agent 3D status)\n// GET /api/world/board -> tasks pre-grouped into the 4 Kanban columns (CENTER kanban)\n// GET /api/world/project -> active campaign brief + REAL usage rollup (RIGHT project panel)\n// distributes them to scene/agents/ui/dash, runs the rAF loop (agents.update -> world.render ->\n// ui.updateChips), and live-syncs the PANELS on the app-wide 'nexus:tick' event + a slow fallback\n// interval — BOTH funnelled through a DEBOUNCER (scheduleRefresh) that enforces a min gap between\n// refreshes so the two triggers can never combine into a back-to-back request burst. When pinned to\n// a campaign (?campaign=ID), the 3D roster source is that campaign's MEMBER agents (matching the\n// campaign-scoped activity feed), not the global /api/agents list.\n// ADDITIVE: when /api/world/project carries a fresh run (project.run.id changed) that is running or\n// just-completed, it fires TWO complementary handoff cues — a one-time glowing beam across the\n// Director-first roster heads via agents.playHandoff(orderedIds), AND a physical handoff-walk where,\n// for each consecutive agent hop in the run's directorTrace steps (step name -> entry id, in order),\n// the GIVER walks the navmesh to the RECEIVER's desk via agents.handoffWalk(prev, next), spaced over\n// time so the visits chain. Both are fully guarded; neither ever affects the scene/movement\n// (continued below)\n// (the 3D keeps its own independent 60fps loop; fetches never block a frame). One /api/world/activity\n// call now feeds BOTH the logs AND per-agent status (no per-agent /runs fan-out anymore).\n//\n// FOOTGUNS (must hold): NO TS annotations inside the returned string; NO unescaped backticks / ${...}\n// inside it (plain string concat everywhere; \\\\uXXXX for emojis). Placement is owned by the office\n// module, so nothing in this entry needs determinism beyond what the factories provide.\n\nexport function getWorldJS(): string {\n return `\nimport { createWorld } from '/api/app-world-scene';\nimport { createOffice } from '/api/app-world-office';\nimport { createAgents } from '/api/app-world-agents';\nimport { createUI } from '/api/app-world-ui';\nimport { createDash } from '/api/app-world-dash';\n\n// ---------------------------------------------------------------------------\n// Auth + fetch helpers. Every /api request carries the NEXUS bearer token from\n// localStorage so the world sees the SAME real data as the main app.\n// ---------------------------------------------------------------------------\nvar NEXUS_TOKEN_KEY = 'nexus_token';\nfunction getToken() {\n try { return localStorage.getItem(NEXUS_TOKEN_KEY) || ''; } catch (e) { return ''; }\n}\n\n// ---------------------------------------------------------------------------\n// PER-CAMPAIGN scoping. When the page is opened with ?campaign=ID the whole\n// world (activity feed / kanban board / project brief) is scoped to that one\n// campaign. CAMPAIGN_ID is read ONCE from location.search and appended as a\n// query param to the three /api/world/* fetches when set.\n// ---------------------------------------------------------------------------\nvar CAMPAIGN_ID = '';\ntry {\n var qp = new URLSearchParams(window.location.search || '');\n CAMPAIGN_ID = String(qp.get('campaign') || '').trim();\n} catch (e) { CAMPAIGN_ID = ''; }\n\n// Append &campaign=ID (or ?campaign=ID) to a path only when a campaign is pinned.\nfunction withCampaign(path) {\n if (!CAMPAIGN_ID) return path;\n var sep = (String(path).indexOf('?') >= 0) ? '&' : '?';\n return path + sep + 'campaign=' + encodeURIComponent(CAMPAIGN_ID);\n}\nasync function apiFetch(path, opts) {\n opts = opts || {};\n var headers = new Headers(opts.headers || {});\n var tok = getToken();\n if (tok && !headers.has('Authorization')) headers.set('Authorization', 'Bearer ' + tok);\n if (opts.body && !headers.has('Content-Type')) headers.set('Content-Type', 'application/json');\n return fetch(path, Object.assign({}, opts, { headers: headers }));\n}\nasync function apiJSON(path, opts) {\n try {\n var res = await apiFetch(path, opts);\n if (!res || !res.ok) return null;\n return await res.json();\n } catch (e) { return null; }\n}\n\nfunction byId(id) { return document.getElementById(id); }\nfunction lower(s) { return String(s == null ? '' : s).toLowerCase().trim(); }\n\n// Normalize any run / agent status to one of: running | failed | completed | idle.\nfunction normStatus(s) {\n s = lower(s);\n if (s === 'running' || s === 'pending' || s === 'queued' || s === 'active' || s === 'in_progress') return 'running';\n if (s === 'failed' || s === 'error') return 'failed';\n if (s === 'completed' || s === 'done' || s === 'success' || s === 'succeeded') return 'completed';\n return 'idle';\n}\n\n// ---------------------------------------------------------------------------\n// DOM handles. The light dashboard shell (getWorldHTML) provides ALL of these.\n// The canvas + overlay live INSIDE #world-canvas-wrap (center stage); the five\n// dash handles are the grid/stage children the panels render into.\n// ---------------------------------------------------------------------------\nvar canvas = byId('world-canvas');\n\n// ---------------------------------------------------------------------------\n// Construct the cooperating modules. ORDER MATTERS: scene -> office (needs world)\n// -> agents (needs world + office) -> ui (needs world) -> dash (needs the panels).\n// createWorld now self-sizes to #world-canvas-wrap (the canvas' parent), NOT the\n// window. createUI keeps the (world, office, opts) signature for call-site churn;\n// office is ignored inside it.\n// ---------------------------------------------------------------------------\n// Director chat (STREAMING): POST the text to /api/chat/stream (Bearer) and read the SSE stream\n// frame-by-frame. The dash renders the live bubble via chatStreamStart() -> chatStreamChunk(delta)\n// per frame -> chatStreamEnd(); a {tool} event is surfaced when present. After the stream completes\n// we refreshAll() so any newly-created agents/campaigns/tasks appear. Wired to the top-bar\n// \"Direct the team\" input + Start New Project. The campaign scope rides along when pinned.\nasync function sendChat(text) {\n text = String(text == null ? '' : text).trim();\n if (!text) return null;\n var reply = '';\n var started = false;\n try { dash.chatStreamStart(); started = true; } catch (e) { started = false; }\n try {\n var payload = { message: text, workspace: 'marketing' };\n if (CAMPAIGN_ID) payload.campaign = CAMPAIGN_ID;\n var res = await apiFetch('/api/chat/stream', { method: 'POST', body: JSON.stringify(payload) });\n if (!res || !res.ok || !res.body) throw new Error('stream unavailable');\n var reader = res.body.getReader();\n var decoder = new TextDecoder();\n var buf = '';\n while (true) {\n var step = await reader.read();\n if (step.done) break;\n buf += decoder.decode(step.value, { stream: true });\n var parts = buf.split('\\\\n\\\\n');\n buf = parts.pop() || '';\n for (var pi = 0; pi < parts.length; pi++) {\n var part = parts[pi];\n if (!part || part.indexOf('data:') !== 0) continue;\n var ev = null;\n try { ev = JSON.parse(part.slice(5).trim()); } catch (e2) { ev = null; }\n if (!ev) continue;\n if (ev.tool != null) {\n try { dash.chatStreamTool(ev.tool); } catch (e3) {}\n // The Director decided to EXECUTE the campaign -> fire the real run from the browser so the\n // members start working (their runs stream into /api/world/activity). Guarded inside.\n if (ev.tool && ev.tool.name === 'run_campaign') { try { var _cid = (ev.tool && (ev.tool.campaign_id || (ev.tool.args && ev.tool.args.campaign_id))) || ''; var rp = runCampaignNow(_cid); if (rp && rp.catch) rp.catch(function () {}); } catch (e7) {} }\n continue;\n }\n if (ev.done) {\n if (ev.response != null) reply = String(ev.response);\n if (ev.error != null && !reply) reply = String(ev.error);\n } else if (ev.delta) {\n reply += String(ev.delta);\n try { dash.chatStreamChunk(String(ev.delta)); } catch (e4) {}\n }\n }\n }\n } catch (e) {\n // Fall back to the non-streaming endpoint so a missing/unsupported stream still answers.\n try {\n var data = await apiJSON('/api/chat', { method: 'POST', body: JSON.stringify({ message: text, workspace: 'marketing' }) });\n if (data && data.response != null) {\n reply = String(data.response);\n try { dash.chatStreamChunk(reply); } catch (e5) {}\n }\n } catch (e6) {}\n }\n if (started) { try { dash.chatStreamEnd(reply); } catch (e) {} }\n // ONE refresh after the stream COMPLETES (never per token); routed through the debouncer so it\n // coalesces with any concurrent nexus:tick/interval trigger instead of adding a request burst.\n setTimeout(function () { try { scheduleRefresh(); } catch (e) {} }, 700);\n return reply || null;\n}\n\n// ---------------------------------------------------------------------------\n// runCampaignNow(explicitId?): FIRE the real campaign run from the browser. The Director (in\n// the SSE stream) deciding to execute passes its frame's campaign_id, OR the dash Run button\n// lands here; the explicit id wins, else we fall back to the page-pinned CAMPAIGN_ID (so the\n// main /world entry with NO ?campaign can still run a campaign the Director names).\n// We POST /api/campaigns/<cid>/runs and RETURN A PROMISE that resolves\n// ONLY when the POST is accepted (res.ok) and REJECTS on a network error or a\n// 500 (!res.ok) — so the dash Run button can report REAL success/failure instead\n// of guessing on a timer. The world-nudge refreshAll() schedule still fires on a\n// successful accept so the bodies visibly start working ahead of the live-sync tick.\n// Double-fire guarded by an in-flight flag + a short cooldown (so a Director\n// tool-call + a Run-button tap in the same beat fire ONCE); a coalesced call\n// resolves harmlessly (the real run is already on its way) rather than reporting\n// a false failure.\nvar campaignRunInFlight = false; // a POST is in the air right now\nvar lastCampaignRunAt = 0; // timestamp of the last fired run (cooldown anchor)\nvar CAMPAIGN_RUN_COOLDOWN_MS = 8000; // min gap between two real runs we fire\nfunction runCampaignNow(explicitId) {\n // Resolve the campaign to run: an explicit id (e.g. the Director run_campaign frame's campaign_id,\n // or the dash Run button's row) wins; otherwise fall back to the page-pinned CAMPAIGN_ID. This is\n // what makes \"Run the Team\" work on the main /world entry (opened with NO ?campaign) — the id rides\n // in from the Director frame instead of the empty CAMPAIGN_ID.\n var cid = (explicitId && String(explicitId).trim()) || CAMPAIGN_ID;\n if (!cid) return Promise.resolve(); // nothing to run without ANY campaign id\n if (campaignRunInFlight) return Promise.resolve(); // a POST is already going out — coalesce (not a failure)\n var since = Date.now() - lastCampaignRunAt;\n if (lastCampaignRunAt !== 0 && since < CAMPAIGN_RUN_COOLDOWN_MS) return Promise.resolve(); // within cooldown — coalesce\n campaignRunInFlight = true;\n lastCampaignRunAt = Date.now();\n // Await the POST so the returned Promise reflects the REAL outcome: resolve on res.ok,\n // reject on a network error or a non-ok (e.g. 500) response. The dash awaits this.\n return apiFetch('/api/campaigns/' + encodeURIComponent(cid) + '/runs', { method: 'POST', body: '{}' })\n .then(function (res) {\n campaignRunInFlight = false;\n if (!res || !res.ok) throw new Error('campaign run rejected: ' + (res ? res.status : 'no response'));\n // Accepted: nudge the world a few times over ~10s so the members visibly start working ahead\n // of the slow live-sync tick. Each pass funnels through the debouncer so it never stampedes.\n var delays = [1200, 3500, 6500, 10000];\n for (var d = 0; d < delays.length; d++) {\n setTimeout(function () { try { scheduleRefresh(); } catch (e) {} }, delays[d]);\n }\n return true;\n }, function (err) {\n campaignRunInFlight = false;\n throw err; // network failure -> reject so the dash reports a REAL failure\n });\n}\n\nvar world = createWorld(canvas);\nvar office = createOffice(world);\nvar agents = createAgents(world, office);\nvar ui = createUI(world, office, {});\nvar dash = createDash({\n topbar: byId('world-topbar'),\n logs: byId('world-logs'),\n scenehead: byId('world-scenehead'),\n kanban: byId('world-kanban'),\n project: byId('world-project'),\n onChat: sendChat,\n onRunCampaign: runCampaignNow,\n onStartProject: function () { try { var t = document.querySelector('#world-topbar input'); if (t) t.focus(); } catch (e) {} }\n});\n\n// Chips project into the in-scene overlay (over the canvas only); the dash owns the panels.\nui.mount(byId('world-overlay'));\ndash.mount();\n\n// ---------------------------------------------------------------------------\n// Roster ordering. The active campaign (from /api/world/project) emphasizes its\n// director; the per-agent status feed drives rings + the moving spotlight.\n// ---------------------------------------------------------------------------\nvar roster = [];\nvar activeSpeakerId = null;\nvar preparedCount = -1; // -1 = uninitialised (no toast on the first read)\nvar booted = false;\nvar syncing = false; // guards refreshAll against overlapping live-sync triggers\nvar firstLogsRender = true; // first activity pass renders; later passes APPEND\nvar seenRunIds = {}; // run ids already in the logs panel (append-not-rebuild)\nvar lastHandoffRunId = null; // last project.run.id we flashed a handoff beam for (fire ONCE per run)\n\n// Map an agent's role/name to a coarse funnel/objective CATEGORY so members can be\n// grouped under the Director by what they do (research -> strategy -> compose -> ...).\n// The rank orders the groups; unknown roles sort last but keep relative order.\nfunction roleCategory(a) {\n var r = lower((a && a.role) || '') + ' ' + lower((a && a.name) || '');\n if (/director|lead/.test(r)) return 'director';\n if (/research|analy|insight|listen|monitor/.test(r)) return 'research';\n if (/strateg|plan|brief|objective/.test(r)) return 'strategy';\n if (/compos|writer|content|creativ|design|copy/.test(r)) return 'compose';\n if (/distribut|publish|social|post|send|outreach|campaign/.test(r)) return 'distribute';\n if (/measur|report|metric|track|optim|seo|growth/.test(r)) return 'measure';\n return 'support';\n}\nfunction categoryRank(cat) {\n switch (cat) {\n case 'director': return 0;\n case 'research': return 1;\n case 'strategy': return 2;\n case 'compose': return 3;\n case 'distribute': return 4;\n case 'measure': return 5;\n default: return 6;\n }\n}\n\n// (1) Pick the SOURCE roster that agents.sync renders. When the page is pinned to a campaign\n// (?campaign=ID) the activity feed + board + project are all scoped to that campaign's MEMBER\n// agents — so the 3D roster must be those SAME members (not the global /api/agents list), or the\n// bodies and the per-agent status feed would not line up. We therefore prefer the campaign's\n// member roster (project.campaign.agents -> {id,name,role}) when pinned, and only fall back to the\n// global agentList when no campaign members resolve (so the scene never renders empty). When NOT\n// pinned, the global agentList is the source as before.\nfunction rosterSource(agentList, campaign) {\n agentList = Array.isArray(agentList) ? agentList : [];\n // Only override with campaign members when the page is explicitly pinned to a campaign AND that\n // campaign actually carries members. Otherwise keep the global roster.\n if (CAMPAIGN_ID && campaign && Array.isArray(campaign.agents) && campaign.agents.length) {\n var members = [];\n for (var i = 0; i < campaign.agents.length; i++) {\n var m = campaign.agents[i] || {};\n var mid = String(m.agent_id != null ? m.agent_id : (m.id != null ? m.id : ''));\n if (!mid) continue;\n members.push({\n id: mid,\n name: String(m.name || (m.agent && m.agent.name) || 'Agent'),\n role: String(m.role || (m.agent && m.agent.role) || 'Agent'),\n // carry the real agent's status when the member shape includes it (sync ignores it; status\n // is driven by the scoped activity feed below — this is just a sensible default).\n status: (m.agent && m.agent.status) || m.status || null\n });\n }\n if (members.length) return members;\n }\n return agentList;\n}\n\n// Build the Director-first ordered roster, then group the remaining members by\n// role/category (research -> strategy -> compose -> distribute -> measure -> support).\n// (2) When a campaign is ACTIVE, PREPEND a synthetic Director lead so the world always\n// renders a Director body even when no real director agent exists in the roster. The lead\n// is otherwise the campaign's director (by id/name) when present, else an agent whose\n// role/name matches /director|lead/i, else index 0 stays the lead.\nfunction orderRoster(list, campaign) {\n list = Array.isArray(list) ? list.slice() : [];\n\n // (2) Synthetic Director: only when there is an active campaign. It is PREPENDED so\n // agents.sync renders a Director body even with an empty/director-less roster.\n if (campaign) {\n var campaignId = String(campaign.id != null ? campaign.id : (campaign.campaign_id != null ? campaign.campaign_id : ''));\n var hasRealDirector = false;\n var dId = String(campaign.director_id || campaign.directorId || campaign.lead_id || '');\n var dNm = lower(campaign.director || campaign.director_name || '');\n for (var di = 0; di < list.length; di++) {\n var da = list[di] || {};\n var dr = lower(da.role) + ' ' + lower(da.name);\n if ((dId && String(da.id) === dId) || (dNm && lower(da.name) === dNm) || /director|lead/.test(dr)) {\n hasRealDirector = true; break;\n }\n }\n if (!hasRealDirector) {\n list.unshift({\n id: 'director:' + campaignId,\n name: 'Director',\n role: 'director',\n __director: true,\n colorHex: '#4285F4'\n });\n }\n }\n\n if (!list.length) return list;\n\n // Find the lead (campaign director by id/name, else first /director|lead/, else index 0).\n var leadIdx = -1;\n if (campaign) {\n var dirId = String(campaign.director_id || campaign.directorId || campaign.lead_id || '');\n var dirName = lower(campaign.director || campaign.director_name || '');\n for (var i = 0; i < list.length; i++) {\n var a = list[i];\n if (a && a.__director) { leadIdx = i; break; }\n if (dirId && String(a.id) === dirId) { leadIdx = i; break; }\n if (dirName && lower(a.name) === dirName) { leadIdx = i; break; }\n }\n }\n if (leadIdx < 0) {\n for (var j = 0; j < list.length; j++) {\n var r = lower(list[j].role) + ' ' + lower(list[j].name);\n if (/director|lead/.test(r)) { leadIdx = j; break; }\n }\n }\n if (leadIdx > 0) {\n var lead = list.splice(leadIdx, 1)[0];\n list.unshift(lead);\n }\n\n // (3) Group the members AFTER the lead by role/category (stable within a group).\n if (list.length > 2) {\n var head = list.shift(); // the Director (index 0) stays first\n var decorated = [];\n for (var m = 0; m < list.length; m++) {\n decorated.push({ a: list[m], rank: categoryRank(roleCategory(list[m])), ord: m });\n }\n decorated.sort(function (x, y) {\n if (x.rank !== y.rank) return x.rank - y.rank;\n return x.ord - y.ord; // stable within a category\n });\n var grouped = [head];\n for (var g = 0; g < decorated.length; g++) grouped.push(decorated[g].a);\n list = grouped;\n }\n return list;\n}\n\n// Pick the freshest run per agent id from the (already cross-agent) activity feed.\n// The feed is ordered started_at DESC, so the FIRST row seen for an id is its latest.\nfunction latestRunByAgent(runs) {\n var map = {};\n if (!Array.isArray(runs)) return map;\n for (var i = 0; i < runs.length; i++) {\n var r = runs[i];\n if (!r) continue;\n var aid = String(r.agent_id == null ? '' : r.agent_id);\n if (!aid) continue;\n if (!map[aid]) map[aid] = r; // first occurrence = latest (feed is DESC)\n }\n return map;\n}\n\n// ---------------------------------------------------------------------------\n// driveHandoffWalks(run, roster): map each directorTrace AGENT step's name -> its roster entry id\n// (in step order), then for each consecutive hop physically walk the GIVER to the RECEIVER via\n// agents.handoffWalk(prev, next). Hops are SPACED OUT in time (each giver does a ~walk+talk+walk\n// round-trip) so the visits chain rather than stampede; consecutive duplicate ids are collapsed.\n// Fully guarded — any failure is swallowed so the scene/movement is never affected.\n// ---------------------------------------------------------------------------\nfunction buildAgentIndex(roster) {\n // name(lower) -> id and id -> id, so a directorTrace step (which carries a name) resolves to an\n // entry id. Names can collide; first-wins is fine (roster is small + Director-first).\n var byName = {};\n var ids = {};\n for (var i = 0; i < roster.length; i++) {\n var a = roster[i];\n if (!a || a.id == null) continue;\n var id = String(a.id);\n ids[id] = true;\n var nm = lower(a.name);\n if (nm && byName[nm] === undefined) byName[nm] = id;\n }\n return { byName: byName, ids: ids };\n}\nfunction stepAgentOrder(run, roster) {\n // Extract the ORDERED list of distinct entry ids from the run's directorTrace agent steps.\n var steps = (run && Array.isArray(run.steps)) ? run.steps : [];\n var idx = buildAgentIndex(roster);\n var out = [];\n var lastId = null;\n for (var i = 0; i < steps.length; i++) {\n var st = steps[i] || {};\n if (lower(st.t) !== 'agent') continue; // only agent hops (skip tool/think/etc.)\n var id = null;\n if (st.agent_id != null && idx.ids[String(st.agent_id)]) id = String(st.agent_id);\n else { var nm = lower(st.name); if (nm && idx.byName[nm] !== undefined) id = idx.byName[nm]; }\n if (!id) continue;\n if (id === lastId) continue; // collapse consecutive duplicates (no self-handoff)\n out.push(id);\n lastId = id;\n }\n return out;\n}\nfunction driveHandoffWalks(run, roster) {\n var ids = stepAgentOrder(run, roster);\n if (ids.length < 2) return;\n // Schedule each hop on its own timer so givers chain (one round-trip ~ walk + 2s talk + walk).\n // ~5s per hop is comfortably longer than a typical visit; failures inside are swallowed.\n var HOP_SPACING_MS = 5000;\n for (var h = 0; h < ids.length - 1; h++) {\n (function (fromId, toId, delay) {\n setTimeout(function () {\n try { agents.handoffWalk(fromId, toId); } catch (e) {}\n }, delay);\n })(ids[h], ids[h + 1], h * HOP_SPACING_MS);\n }\n}\n\n// ---------------------------------------------------------------------------\n// refreshAll: the SINGLE live-sync pass. Fetches the 3 panel endpoints + the\n// roster in parallel, distributes to agents (3D) + dash (panels), maps per-agent\n// status onto the avatars/spotlight, appends new log rows, and polls approvals.\n// Guarded by 'syncing' so overlapping triggers never double-run.\n// ---------------------------------------------------------------------------\nasync function refreshAll() {\n if (syncing) return;\n syncing = true;\n try {\n var results = await Promise.all([\n apiJSON(withCampaign('/api/world/project')),\n apiJSON(withCampaign('/api/world/board')),\n apiJSON(withCampaign('/api/world/activity?limit=40')),\n apiJSON('/api/agents')\n ]);\n var project = results[0] || { campaign: null, phase: 'idle', usage: null };\n var board = results[1] || { columns: [], counts: {} };\n var activity = results[2] || { runs: [] };\n var agentList = Array.isArray(results[3]) ? results[3] : [];\n\n var runs = Array.isArray(activity.runs) ? activity.runs : [];\n\n // (1)+(2) roster: when pinned to a campaign, the SOURCE is that campaign's MEMBER agents (so the\n // 3D bodies match the campaign-scoped activity feed); otherwise it's the global /api/agents list.\n // Then order Director-first (synthetic Director prepended when an active campaign has no real one).\n // agents.sync therefore receives the REAL member agents (not only the Director), and the per-agent\n // status loop below runs setStatus for EACH of them off the single scoped /api/world/activity feed.\n var campaign = project && project.campaign ? project.campaign : null;\n roster = orderRoster(rosterSource(agentList, campaign), campaign);\n try { agents.sync(roster, campaign); } catch (e) { /* keep the prior scene */ }\n\n // (3) panels: top bar + project + kanban + phase (keyed diff updates inside the dash).\n try { dash.renderTopbar(project, roster); } catch (e) {}\n try { dash.renderProject(project); } catch (e) {}\n try { dash.renderKanban(board); } catch (e) {}\n try { dash.setPhase(project && project.phase ? project.phase : 'idle'); } catch (e) {}\n\n // (4) LOGS append-not-rebuild: first pass renders the list; later passes prepend ONLY\n // rows we have not seen, and let the dash update an existing row in place when its status\n // flips (keyed by run id) — the panel never flickers / full-rebuilds on a tick.\n try {\n if (firstLogsRender) {\n dash.renderLogs(runs);\n firstLogsRender = false;\n for (var s = 0; s < runs.length; s++) if (runs[s] && runs[s].id != null) seenRunIds[String(runs[s].id)] = true;\n } else {\n var fresh = [];\n for (var n = 0; n < runs.length; n++) {\n var rr = runs[n];\n if (!rr || rr.id == null) continue;\n if (!seenRunIds[String(rr.id)]) { fresh.push(rr); seenRunIds[String(rr.id)] = true; }\n }\n // appendLogs both prepends new rows AND updates known rows in place (running->completed).\n dash.appendLogs(fresh.length ? fresh : runs);\n }\n } catch (e) {}\n\n // (5) per-agent status -> 3D. The feed is already cross-agent, so NO per-agent fan-out:\n // resolve each roster id's latest run, set the avatar status, and spotlight the first\n // running agent (lead-priority since roster is Director-first).\n var latest = latestRunByAgent(runs);\n var firstRunning = null;\n for (var k = 0; k < roster.length; k++) {\n var aid = String(roster[k].id);\n var run = latest[aid] || null;\n var status = run ? normStatus(run.status) : 'idle';\n try { agents.setStatus(aid, status, run); } catch (e) {}\n if (status === 'running' && firstRunning == null) firstRunning = aid;\n }\n updateSpeaker(firstRunning);\n\n // (5b) ADDITIVE handoff: when a NEW campaign run appears (project.run.id changed) AND it is\n // running or just-completed, fire BOTH handoff cues across the run's actual step order. Fully\n // guarded — any failure leaves the rest of the scene untouched. The run id is recorded so the\n // handoff fires ONCE per run, not on every 4s live-sync tick.\n // - playHandoff: a one-time glowing beam across the Director-first roster heads (complementary).\n // - handoffWalk: drives the GIVER to physically WALK to the RECEIVER for each consecutive hop in\n // the run's directorTrace steps — map each agent step's name -> its entry id (in order), then\n // handoffWalk(prev, next) per hop. Spaced out over time so the walks chain, not stampede.\n try {\n var prun = project && project.run ? project.run : null;\n if (prun && prun.id != null) {\n var rid2 = String(prun.id);\n var rstat = normStatus(prun.status);\n var freshRun = (rid2 !== lastHandoffRunId);\n if (freshRun && (rstat === 'running' || rstat === 'completed')) {\n lastHandoffRunId = rid2;\n // (i) complementary beam across the Director-first roster heads.\n var orderedIds = [];\n for (var ri = 0; ri < roster.length; ri++) {\n if (roster[ri] && roster[ri].id != null) orderedIds.push(String(roster[ri].id));\n }\n if (orderedIds.length >= 2) { try { agents.playHandoff(orderedIds); } catch (eb) {} }\n // (ii) physical handoff-walk between consecutive agents in the run's directorTrace steps.\n try { driveHandoffWalks(prun, roster); } catch (ew) {}\n } else if (freshRun) {\n // A new run id we are NOT animating (e.g. failed/idle): still record it so a later flip to\n // running/completed for the SAME id does not retroactively replay an old run's beam.\n lastHandoffRunId = rid2;\n }\n }\n } catch (e) {}\n\n // (6) approvals toast (prepared count INCREASED -> a deliverable is ready for review).\n await pollActions();\n } catch (e) { /* keep the prior frame on a transient failure */ }\n syncing = false;\n}\n\n// Drive the active-speaker highlight + the scene spotlight. ui.setActive rings the chip;\n// world.spotlightOn (via agents.setStatus) follows the head, so here we set the chip + the\n// camera/spot target via the agents' head position.\nfunction updateSpeaker(speakerId) {\n // Always re-track a moving head while the same speaker stays active.\n if (speakerId === activeSpeakerId) {\n if (speakerId) {\n var hp = headPosFor(speakerId);\n if (hp) { try { world.spotlightOn(hp); } catch (e) {} }\n }\n return;\n }\n activeSpeakerId = speakerId;\n try { ui.setActive(speakerId || null); } catch (e) {}\n if (speakerId) {\n var pos = headPosFor(speakerId);\n try { world.spotlightOn(pos || null); } catch (e) {}\n } else {\n try { world.spotlightOn(null); } catch (e) {}\n }\n}\n\n// Look up a fresh head world-position for an agent id from the agents entries.\nfunction headPosFor(id) {\n var list = agents.entries();\n for (var i = 0; i < list.length; i++) {\n if (String(list[i].id) === String(id)) {\n try { return list[i].headWorldPos(); } catch (e) { return null; }\n }\n }\n return null;\n}\n\n// Approvals toast: when the number of 'prepared' actions INCREASES, a new deliverable\n// is awaiting review. Tolerant of the list/object response shapes.\nasync function pollActions() {\n var n = null;\n var prepared = await apiJSON('/api/actions?status=prepared');\n if (Array.isArray(prepared)) {\n n = prepared.length;\n } else if (prepared && Array.isArray(prepared.actions)) {\n n = 0;\n for (var p = 0; p < prepared.actions.length; p++) if (lower(prepared.actions[p] && prepared.actions[p].status) === 'prepared') n++;\n } else {\n var all = await apiJSON('/api/actions');\n if (Array.isArray(all)) {\n n = 0;\n for (var i = 0; i < all.length; i++) if (lower(all[i] && all[i].status) === 'prepared') n++;\n } else if (all && Array.isArray(all.actions)) {\n n = 0;\n for (var j = 0; j < all.actions.length; j++) if (lower(all.actions[j] && all.actions[j].status) === 'prepared') n++;\n }\n }\n if (n == null) return;\n if (preparedCount >= 0 && n > preparedCount) {\n try { dash.toast('A deliverable is ready for review'); } catch (e) {}\n }\n preparedCount = n;\n}\n\n// ---------------------------------------------------------------------------\n// Boot: load the floor (office.glb) + the character GLB in parallel, then do the\n// first refreshAll(), then start live-sync. The dash shows its empty-state (no\n// agents / \"No active brief\") until data arrives.\n// ---------------------------------------------------------------------------\nasync function boot() {\n if (booted) return;\n booted = true;\n try {\n await Promise.all([ office.loadFloor(), agents.loadAssets() ]);\n } catch (e) { /* the factories fall back internally; the scene still renders */ }\n await refreshAll();\n startLiveSync();\n}\n\n// ---------------------------------------------------------------------------\n// Live-sync: refresh the PANELS (and per-agent 3D status) on the app-wide\n// 'nexus:tick' event AND on a slow interval fallback. (2) TO AVOID HAMMERING the\n// backend, ALL triggers funnel through scheduleRefresh(), which DEBOUNCES them:\n// - refreshAll() does 4 panel fetches + the actions poll, so each pass is ~5\n// requests; firing it from BOTH the 6s nexus:tick AND a fast interval would\n// double (or worse) the request volume.\n// - scheduleRefresh enforces a MIN_REFRESH_MS gap between refresh STARTS and\n// coalesces any triggers inside that window into ONE trailing refresh, so the\n// event + the interval can never both kick off a full burst back-to-back.\n// - the 'syncing' flag in refreshAll remains the concurrency guard (no overlap);\n// scheduleRefresh is the rate guard (no stampede).\n// The single /api/world/activity call still feeds BOTH logs and per-agent status,\n// so one pass keeps rings/chips/spotlight + panels fresh together — no separate\n// status-only interval, no per-agent /runs fan-out, no per-token chat refresh.\n// ---------------------------------------------------------------------------\nvar MIN_REFRESH_MS = 5000; // hard floor between refresh starts (coalescing window)\nvar lastRefreshAt = 0; // timestamp of the last refresh START (0 = never)\nvar refreshTimer = null; // pending trailing-refresh timer id (null = none scheduled)\n\n// Run a refresh now and stamp the start time, so the debouncer can space the next one.\nfunction runRefreshNow() {\n refreshTimer = null;\n lastRefreshAt = Date.now();\n try { refreshAll(); } catch (e) {}\n}\n\n// Debounced refresh entry point. If enough time has passed since the last refresh we run\n// immediately; otherwise we schedule a SINGLE trailing refresh at the window boundary and\n// collapse any further triggers that arrive before it fires (refreshTimer stays set).\nfunction scheduleRefresh() {\n if (document.hidden) return;\n if (refreshTimer != null) return; // a trailing refresh is already queued — coalesce\n var since = Date.now() - lastRefreshAt;\n if (lastRefreshAt === 0 || since >= MIN_REFRESH_MS) {\n runRefreshNow();\n } else {\n refreshTimer = setTimeout(runRefreshNow, MIN_REFRESH_MS - since);\n }\n}\n\nvar liveStarted = false;\nfunction startLiveSync() {\n if (liveStarted) return;\n liveStarted = true;\n lastRefreshAt = Date.now(); // boot() already ran one refresh; count it so we don't double-fire.\n window.addEventListener('nexus:tick', scheduleRefresh);\n // Slow fallback in case nexus:tick is not running on this page; the debouncer guarantees the\n // event + this interval can never combine into more than one refresh per MIN_REFRESH_MS.\n setInterval(scheduleRefresh, 8000);\n}\n\n// ---------------------------------------------------------------------------\n// rAF loop (EXACT order): advance mixers + ambient, render the world (controls +\n// spotlight lerp), THEN project the in-scene chips from the just-rendered camera\n// so they sit crisply over the heads. This loop runs independently at ~60fps and\n// is NEVER blocked by fetches (refreshAll is event/interval-driven, fully awaited).\n// ---------------------------------------------------------------------------\nfunction frame() {\n // Schedule the NEXT frame FIRST so a throw anywhere below can never kill the loop.\n requestAnimationFrame(frame);\n var dt = 0.016;\n try { dt = world.clock.getDelta(); } catch (e) { dt = 0.016; }\n try { agents.update(dt); } catch (e) { /* keep rendering */ }\n try { world.render(); } catch (e) { /* fallback handled inside render() */ }\n try { ui.updateChips(agents.entries()); } catch (e) { /* chips optional */ }\n}\n\n// Kick everything off.\nboot();\nrequestAnimationFrame(frame);\n`;\n}\n",[254],"56e08cca-5b19-11f1-8302-ee650bb23af1","frontend_widgets.ts","a304c91c-589f-11f1-b75f-ee650bb23af1",463,["D",1780029981482],2,"// Nexus widgets module — small UI primitives for the CommandCenter and Signals workspaces.\n// Served at /api/app-widgets, dynamically imported by frontend_command.ts and SalesWorkspace.\n// Shared deps from window.__nexus.\n\nexport function getWidgetsJS(): string {\n return `\nimport React, { useState, useEffect, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\nconst fmtNum = (v, unit) => {\n if (v == null) return '—';\n const n = Math.abs(Number(v) || 0);\n const sign = (Number(v) || 0) < 0 ? '-' : '';\n if (n >= 1e9) return sign + (n/1e9).toFixed(1) + 'B' + (unit ? ' ' + unit : '');\n if (n >= 1e6) return sign + (n/1e6).toFixed(1) + 'M' + (unit ? ' ' + unit : '');\n if (n >= 1e3) return sign + (n/1e3).toFixed(1) + 'k' + (unit ? ' ' + unit : '');\n return sign + (Number.isInteger(n) ? n : n.toFixed(1)) + (unit ? ' ' + unit : '');\n};\nconst fmtRel = (iso) => {\n if (!iso) return '';\n const ms = Date.now() - new Date(iso).getTime();\n if (ms < 60000) return 'just now';\n if (ms < 3600000) return Math.floor(ms/60000) + 'm ago';\n if (ms < 86400000) return Math.floor(ms/3600000) + 'h ago';\n return Math.floor(ms/86400000) + 'd ago';\n};\n\n// ─── NSM HERO ────────────────────────────────────────────────────────────────\n// Giant current value + target + on-track badge. Polls /api/nsm/progress.\nexport function NSMHero({setActivePage}) {\n const {Icon, Btn} = N();\n const [data, setData] = useState(null);\n const [editing, setEditing] = useState(false);\n const [draft, setDraft] = useState({metric_name:'', metric_source:'ga4', metric_key:'sessions', target_value:'', target_date:'', unit:'count', description:''});\n const [saving, setSaving] = useState(false);\n\n const load = () => fetch('/api/nsm/progress').then(r => r.json()).then(setData).catch(() => setData({error: true}));\n useEffect(() => { load(); const iv = setInterval(load, 300000); return () => clearInterval(iv); }, []);\n\n const saveNSM = async () => {\n if (!draft.metric_name.trim() || !draft.target_value || !draft.target_date) return;\n setSaving(true);\n try {\n await fetch('/api/nsm', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n metric_name: draft.metric_name.trim(),\n metric_source: draft.metric_source || 'custom',\n metric_key: draft.metric_key || null,\n target_value: parseFloat(draft.target_value) || 0,\n target_date: draft.target_date,\n unit: draft.unit || 'count',\n description: draft.description || null,\n })\n });\n setEditing(false);\n await load();\n } finally { setSaving(false); }\n };\n\n if (!data) return h('div', {className:'glass-panel rounded-xl p-lg h-[180px] flex items-center justify-center'},\n h('div', {className:'text-text-muted text-[13px]'}, 'Loading North Star…')\n );\n\n // No NSM set yet — render a \"set one\" CTA\n if (!data.current && !data.target) {\n return h('div', {className:'glass-panel rounded-xl p-lg'},\n h('div', {className:'flex items-center justify-between mb-3'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'star', size:20, filled:true, className:'text-primary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-primary'}, 'North Star Metric')\n ),\n !editing && h(Btn, {onClick: () => setEditing(true), variant:'primary', size:'sm'},\n h(Icon, {name:'add', size:14}), 'Set NSM'\n )\n ),\n !editing && h('div', {className:'text-text-muted text-[13px] py-6 text-center'},\n 'No North Star set. Define the one metric your team is steering toward.'\n ),\n editing && h('div', {className:'space-y-2.5'},\n h('input', {value: draft.metric_name, onChange: e => setDraft(d => ({...d, metric_name: e.target.value})), placeholder:'Metric name (e.g. Weekly Active Outreach Sequences)', className:'w-full bg-surface-container-lowest border border-border-subtle rounded-md px-3 py-2 text-[13px] text-on-surface'}),\n h('div', {className:'grid grid-cols-2 gap-2'},\n h('select', {value: draft.metric_source, onChange: e => setDraft(d => ({...d, metric_source: e.target.value})), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-2 text-[13px] text-on-surface'},\n ['ga4','gsc','ahrefs','gmail','outlook','youtube','linkedin','wordpress','custom'].map(s => h('option', {key:s, value:s}, s))\n ),\n h('input', {value: draft.metric_key, onChange: e => setDraft(d => ({...d, metric_key: e.target.value})), placeholder:'metric_key (e.g. sessions)', className:'bg-surface-container-lowest border border-border-subtle rounded-md px-3 py-2 text-[13px] text-on-surface'})\n ),\n h('div', {className:'grid grid-cols-3 gap-2'},\n h('input', {type:'number', value: draft.target_value, onChange: e => setDraft(d => ({...d, target_value: e.target.value})), placeholder:'Target', className:'bg-surface-container-lowest border border-border-subtle rounded-md px-3 py-2 text-[13px] text-on-surface font-mono-data'}),\n h('input', {type:'date', value: draft.target_date, onChange: e => setDraft(d => ({...d, target_date: e.target.value})), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-3 py-2 text-[13px] text-on-surface font-mono-data'}),\n h('select', {value: draft.unit, onChange: e => setDraft(d => ({...d, unit: e.target.value})), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-2 text-[13px] text-on-surface'},\n ['count','%','$','ratio'].map(s => h('option', {key:s, value:s}, s))\n )\n ),\n h('div', {className:'flex justify-end gap-2'},\n h(Btn, {onClick: () => setEditing(false), variant:'ghost', size:'sm'}, 'Cancel'),\n h(Btn, {onClick: saveNSM, variant:'primary', size:'sm', disabled: saving}, saving ? 'Saving…' : 'Set North Star')\n )\n )\n );\n }\n\n const onTrack = !!data.on_track;\n const pct = Math.round(data.pct_complete || 0);\n return h('div', {className:'glass-panel rounded-xl p-lg relative overflow-hidden'},\n h('div', {className:'absolute -right-8 -top-8 w-40 h-40 rounded-full blur-3xl ' + (onTrack ? 'bg-secondary/10' : 'bg-error/10') + ' pointer-events-none'}),\n h('div', {className:'flex items-center justify-between mb-3 relative'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'star', size:20, filled:true, className:'text-primary'}),\n h('div', null,\n h('div', {className:'text-[11px] font-bold uppercase tracking-widest text-primary'}, 'North Star Metric'),\n h('div', {className:'text-[12px] text-text-muted truncate max-w-[280px]'}, data.metric_name || '')\n )\n ),\n h('span', {className:'inline-flex items-center gap-1 px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border ' +\n (onTrack ? 'bg-secondary/10 text-secondary border-secondary/30' : 'bg-error/10 text-error border-error/30')},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + (onTrack ? 'bg-secondary pulse-dot' : 'bg-error')}),\n onTrack ? 'On Track' : 'Off Track'\n )\n ),\n h('div', {className:'flex items-end gap-3 relative'},\n h('span', {className:'text-[48px] font-extrabold tracking-tight font-mono-data text-on-surface leading-none', style:{fontVariantNumeric:'tabular-nums'}},\n fmtNum(data.current, data.unit && data.unit !== 'count' ? data.unit : '')\n ),\n h('div', {className:'pb-1'},\n h('div', {className:'text-[11px] text-text-muted'}, 'Target ' + fmtNum(data.target, data.unit && data.unit !== 'count' ? data.unit : '')),\n h('div', {className:'text-[11px] font-mono-data ' + (onTrack ? 'text-secondary' : 'text-error')}, pct + '% complete · ' + (data.days_remaining ?? 0) + 'd left')\n )\n ),\n h('div', {className:'mt-3 h-1.5 bg-surface-container rounded-full overflow-hidden relative'},\n h('div', {className:'h-full transition-all ' + (onTrack ? 'bg-secondary' : 'bg-tertiary'), style:{width: Math.min(100, pct) + '%'}})\n ),\n h('div', {className:'mt-2 flex justify-between items-center text-[10px] text-text-muted relative'},\n h('span', null, data.velocity_per_day != null ? ('velocity ' + (data.velocity_per_day >= 0 ? '+' : '') + data.velocity_per_day.toFixed(2) + '/day') : ''),\n h('button', {onClick: () => setEditing(true), className:'text-primary hover:underline'}, 'Edit')\n ),\n editing && h('div', {className:'mt-3 pt-3 border-t border-border-subtle space-y-2'},\n h('input', {value: draft.metric_name, onChange: e => setDraft(d => ({...d, metric_name: e.target.value})), placeholder: data.metric_name, className:'w-full bg-surface-container-lowest border border-border-subtle rounded-md px-3 py-2 text-[13px] text-on-surface'}),\n h('div', {className:'flex gap-2'},\n h('input', {type:'number', value: draft.target_value, onChange: e => setDraft(d => ({...d, target_value: e.target.value})), placeholder:'new target', className:'flex-1 bg-surface-container-lowest border border-border-subtle rounded-md px-3 py-2 text-[13px] text-on-surface font-mono-data'}),\n h('input', {type:'date', value: draft.target_date, onChange: e => setDraft(d => ({...d, target_date: e.target.value})), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-3 py-2 text-[13px] text-on-surface font-mono-data'}),\n h(Btn, {onClick: saveNSM, variant:'primary', size:'sm', disabled: saving}, saving ? '…' : 'Save'),\n h(Btn, {onClick: () => setEditing(false), variant:'ghost', size:'sm'}, 'X')\n )\n )\n );\n}\n\n// ─── TODAY PANEL ─────────────────────────────────────────────────────────────\nexport function TodayPanel({setActivePage}) {\n const {Icon, Btn} = N();\n const [events, setEvents] = useState([]);\n const [loading, setLoading] = useState(true);\n const load = () => {\n setLoading(true);\n fetch('/api/calendar/today').then(r => r.json()).then(d => setEvents(Array.isArray(d) ? d : [])).catch(() => setEvents([])).finally(() => setLoading(false));\n };\n useEffect(() => { load(); const iv = setInterval(load, 300000); return () => clearInterval(iv); }, []);\n\n const toggleTaskDone = async (ev) => {\n if (ev.source !== 'task') return;\n const taskId = (ev.id || '').replace(/^task_/, '');\n try {\n await fetch('/api/tasks/' + taskId, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({status: ev.status === 'done' ? 'todo' : 'done'})});\n load();\n } catch {}\n };\n\n const today = new Date();\n const fmtDate = today.toLocaleDateString('en-US', {weekday:'short', day:'numeric', month:'short'});\n\n return h('div', {className:'glass-panel rounded-xl p-lg flex flex-col h-full min-h-[320px]'},\n h('div', {className:'flex items-center justify-between mb-3'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'today', size:18, filled:true, className:'text-tertiary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-tertiary'}, 'TODAY · ' + fmtDate)\n ),\n h('button', {onClick: () => setActivePage('calendar'), className:'text-[11px] text-primary hover:underline font-semibold'}, 'Open Calendar →')\n ),\n loading ? h('div', {className:'flex-1 flex items-center justify-center text-text-muted text-[12px]'}, 'Loading…')\n : events.length === 0 ? h('div', {className:'flex-1 flex flex-col items-center justify-center text-text-muted text-[12px] gap-2'},\n h(Icon, {name:'event_available', size:32, className:'text-text-muted/50'}),\n h('span', null, 'Clear schedule today'),\n h('button', {onClick: () => setActivePage('calendar'), className:'text-primary hover:underline text-[11px]'}, 'Add an event')\n )\n : h('div', {className:'flex-1 overflow-y-auto space-y-1.5 pr-1 -mr-1'},\n events.slice(0, 12).map(ev => h('div', {key: ev.id, className:'flex items-start gap-2 p-2 rounded-md hover:bg-surface-container-lowest cursor-pointer group'},\n ev.source === 'task'\n ? h('button', {onClick: () => toggleTaskDone(ev), className:'mt-0.5 w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center ' + (ev.status === 'done' ? 'bg-secondary border-secondary' : 'border-border-subtle hover:border-primary')},\n ev.status === 'done' && h(Icon, {name:'check', size:10, className:'text-on-secondary'})\n )\n : h('span', {className:'mt-1 w-1.5 h-1.5 rounded-full flex-shrink-0', style:{background: ev.color}}),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'flex items-center gap-1.5 text-[12px]'},\n ev.time && h('span', {className:'font-mono-data text-text-muted'}, ev.time),\n h('span', {className:'truncate ' + (ev.status === 'done' ? 'line-through text-text-muted' : 'text-on-surface')}, ev.title)\n ),\n ev.description && h('div', {className:'text-[10px] text-text-muted truncate mt-0.5'}, ev.description.slice(0, 80))\n ),\n ev.linked_url && ev.source === 'google_calendar' && h('a', {href: ev.linked_url, target:'_blank', rel:'noopener', className:'opacity-0 group-hover:opacity-100 text-primary'},\n h(Icon, {name:'open_in_new', size:14})\n )\n ))\n )\n );\n}\n\n// ─── HOT SIGNALS PANEL ───────────────────────────────────────────────────────\nexport function HotSignalsPanel({onDraftOutreach}) {\n const {Icon, Btn} = N();\n const [leads, setLeads] = useState([]);\n const [loading, setLoading] = useState(true);\n const load = () => {\n setLoading(true);\n fetch('/api/signals/hot-leads').then(r => r.json()).then(d => setLeads(Array.isArray(d) ? d : [])).catch(() => setLeads([])).finally(() => setLoading(false));\n };\n useEffect(() => { load(); const iv = setInterval(load, 30000); return () => clearInterval(iv); }, []);\n\n return h('div', {className:'glass-panel rounded-xl flex flex-col h-[480px]'},\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-center'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'local_fire_department', size:20, filled:true, className:'text-error'}),\n h('h3', {className:'text-[16px] font-bold tracking-tight'}, 'Hot Signals'),\n leads.length > 0 && h('span', {className:'text-[10px] font-bold uppercase tracking-widest bg-error/10 text-error border border-error/30 px-2 py-0.5 rounded-full pulse-dot'},\n leads.length + ' HOT'\n )\n ),\n h('div', {className:'flex items-center gap-1'},\n // P3 wire: CSV export of all signals (token-bearing download — see __nexusDownload)\n h('button', {onClick: () => window.__nexusDownload('/api/export/signals'), title:'Export signals CSV',\n className:'p-1.5 rounded hover:bg-surface-container-high text-text-muted hover:text-on-surface'},\n h(Icon, {name:'download', size:16})\n ),\n h('button', {onClick: load, className:'p-1.5 rounded hover:bg-surface-container-high text-text-muted hover:text-on-surface'},\n h(Icon, {name: loading ? 'sync' : 'refresh', size:16, className: loading ? 'spin' : ''})\n )\n )\n ),\n h('div', {className:'flex-1 overflow-y-auto p-md space-y-2'},\n loading && leads.length === 0 && h('div', {className:'flex items-center justify-center py-8 text-text-muted text-[12px]'}, 'Scanning signals…'),\n !loading && leads.length === 0 && h('div', {className:'text-center py-8 text-text-muted text-[12px]'},\n h(Icon, {name:'search_off', size:28, className:'text-text-muted/50 mb-2 mx-auto block'}),\n h('div', null, 'No hot leads detected'),\n h('div', {className:'text-[10px] mt-1'}, 'Connect Gmail or Outlook to surface intent signals.')\n ),\n leads.map(lead => h('div', {key: lead.email, className:'p-3 rounded-lg border border-border-subtle bg-surface-container-lowest hover:border-error/40 transition-all'},\n h('div', {className:'flex items-start justify-between gap-2 mb-1.5'},\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[13px] font-bold text-on-surface truncate'}, lead.name || lead.email),\n h('div', {className:'text-[10px] text-text-muted truncate'}, lead.email + (lead.company ? ' · ' + lead.company : ''))\n ),\n h('span', {className:'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-error/10 text-error border border-error/30'},\n lead.score\n )\n ),\n h('div', {className:'flex flex-wrap gap-1 mb-2'},\n (lead.top_signals || []).slice(0, 3).map((s, i) => h('span', {key: i, className:'px-1.5 py-0.5 text-[9px] font-mono-data uppercase tracking-wider bg-surface-container-high text-on-surface-variant rounded'}, s.replace(/_/g, ' ')))\n ),\n h('div', {className:'flex items-center justify-between text-[10px] text-text-muted'},\n h('span', null, lead.signal_count + ' signals · ' + fmtRel(lead.last_detected_at)),\n h('button', {\n onClick: () => onDraftOutreach && onDraftOutreach({email: lead.email, name: lead.name, company: lead.company, signal: (lead.top_signals||[])[0]}),\n className:'text-primary hover:underline font-semibold'\n }, 'Draft Outreach →')\n )\n ))\n )\n );\n}\n\n// ─── DIGEST PANEL ────────────────────────────────────────────────────────────\nexport function DigestPanel() {\n const {Icon, Btn, Spinner} = N();\n const [digest, setDigest] = useState(null);\n const [loading, setLoading] = useState(true);\n const [generating, setGenerating] = useState(false);\n // P3 wire: history dropdown — backend already exposed at /api/digest/history\n const [history, setHistory] = useState([]);\n const [historyOpen, setHistoryOpen] = useState(false);\n useEffect(() => {\n fetch('/api/digest/history?limit=10').then(r => r.json()).then(d => setHistory(Array.isArray(d) ? d : [])).catch(() => {});\n }, []);\n\n const load = () => {\n setLoading(true);\n fetch('/api/digest/latest').then(r => r.json()).then(d => setDigest(d && d.headline ? d : null)).catch(() => setDigest(null)).finally(() => setLoading(false));\n };\n useEffect(load, []);\n\n const generate = async () => {\n setGenerating(true);\n try {\n const d = await fetch('/api/digest/generate', {method:'POST'}).then(r => r.json());\n if (d && d.headline) setDigest(d);\n } finally { setGenerating(false); }\n };\n\n const statusStyle = (s) =>\n s === 'on_track' ? 'bg-secondary/10 text-secondary border-secondary/30'\n : s === 'at_risk' ? 'bg-tertiary/10 text-tertiary border-tertiary/30'\n : s === 'off_track' ? 'bg-error/10 text-error border-error/30'\n : 'bg-surface-container-high text-text-muted border-border-subtle';\n\n return h('div', {className:'glass-panel rounded-xl p-lg flex flex-col min-h-[280px]'},\n h('div', {className:'flex items-center justify-between mb-3'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'auto_stories', size:18, filled:true, className:'text-primary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-primary'}, 'Growth Digest')\n ),\n h('div', {className:'flex items-center gap-1.5'},\n // P3 wire: digest history dropdown (was orphaned — backend at /api/digest/history)\n history.length > 0 && h('button', {\n onClick: () => setHistoryOpen(o => !o),\n className:'text-[11px] text-text-muted hover:text-on-surface px-2 py-1 rounded hover:bg-surface-container-high transition-colors flex items-center gap-1'\n },\n h(Icon, {name:'history', size:13}),\n 'History (' + history.length + ')'\n ),\n h(Btn, {onClick: generate, variant: digest ? 'ghost' : 'primary', size:'sm', disabled: generating},\n generating ? h(Spinner, {size:12}) : h(Icon, {name: digest ? 'refresh' : 'auto_awesome', size:13}),\n generating ? 'Generating…' : (digest ? 'Regenerate' : 'Generate Now')\n )\n )\n ),\n // History panel (collapsible)\n historyOpen && history.length > 0 && h('div', {className:'mb-3 p-2 rounded-md border border-border-subtle bg-surface-container-lowest max-h-[140px] overflow-y-auto'},\n history.map((entry, i) => h('div', {\n key: i,\n className:'flex items-start gap-2 py-1.5 px-1 text-[11px] cursor-pointer hover:bg-surface-container-high rounded',\n onClick: () => { setDigest(entry); setHistoryOpen(false); }\n },\n h('span', {className:'text-text-muted font-mono-data flex-shrink-0'}, entry.week_of || '—'),\n h('span', {className:'text-on-surface-variant truncate'}, entry.headline || '(no headline)')\n ))\n ),\n loading ? h('div', {className:'flex-1 flex items-center justify-center text-text-muted text-[12px]'}, 'Loading…')\n : !digest ? h('div', {className:'flex-1 flex flex-col items-center justify-center text-center text-text-muted text-[12px] gap-2'},\n h(Icon, {name:'auto_stories', size:32, className:'text-text-muted/50'}),\n h('span', null, 'No digest yet for this week.'),\n h('span', {className:'text-[10px]'}, 'Generate one to summarize NSM + OKR + experiments.')\n )\n : h('div', {className:'flex-1 flex flex-col gap-3 overflow-y-auto'},\n h('div', {className:'flex items-start gap-3'},\n h('span', {className:'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-widest border ' + statusStyle(digest.nsm_status)},\n (digest.nsm_status || 'unknown').replace(/_/g, ' ')\n ),\n h('span', {className:'text-[10px] text-text-muted font-mono-data'}, 'Week of ' + (digest.week_of || ''))\n ),\n h('p', {className:'text-[15px] leading-snug font-semibold text-on-surface'}, digest.headline),\n digest.top_win && h('div', {className:'flex items-start gap-2 text-[12px]'},\n h('span', {className:'text-secondary font-bold flex-shrink-0'}, '✓ WIN'),\n h('span', {className:'text-on-surface-variant'}, digest.top_win)\n ),\n digest.top_risk && h('div', {className:'flex items-start gap-2 text-[12px]'},\n h('span', {className:'text-error font-bold flex-shrink-0'}, '⚠ RISK'),\n h('span', {className:'text-on-surface-variant'}, digest.top_risk)\n ),\n Array.isArray(digest.next_actions) && digest.next_actions.length > 0 && h('div', {className:'pt-2 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1.5'}, 'Next Actions'),\n h('ul', {className:'space-y-1 text-[12px]'},\n digest.next_actions.slice(0, 5).map((a, i) => h('li', {key: i, className:'flex items-start gap-2'},\n h('span', {className:'text-primary flex-shrink-0'}, '→'),\n h('span', {className:'text-on-surface-variant'}, a)\n ))\n )\n )\n )\n );\n}\n`;\n}\n",[262],"66eefcee-58c8-11f1-8be1-ee650bb23af1","frontend_ui.ts","8f5e62f0-5792-11f1-81bc-ee650bb23af1",232,["D",1779775316358],"// Shared UI primitives + DataDisplay — served at /api/app-ui as ES module\n// Tailwind classNames + Material Symbols icons. Design: Nexus AI / Obsidian Command.\nexport function getUIJS(): string {\n return `\nimport React, { useState } from 'react';\n\nconst h = React.createElement;\nconst fmtNum = v => typeof v!=='number'?v:v>=1e9?(v/1e9).toFixed(1)+'B':v>=1e6?(v/1e6).toFixed(1)+'M':v>=1e3?(v/1e3).toFixed(1)+'K':String(v);\nfunction exportCSV(data,filename='export.csv'){\n const rows=(Array.isArray(data)?data:Object.values(data||{}).find(v=>Array.isArray(v)&&v.length)||[data]).filter(r=>r&&typeof r==='object');\n if(!rows.length)return;\n const keys=Object.keys(rows[0]);\n const csv=[keys.join(','),...rows.map(r=>keys.map(k=>JSON.stringify(r[k]??'')).join(','))].join('\\\\n');\n Object.assign(document.createElement('a'),{href:'data:text/csv;charset=utf-8,'+encodeURIComponent(csv),download:filename}).click();\n}\n\n// Material Symbols icon helper. Replaces lucide-react across the app.\n// size in px, filled toggles the FILL axis, className appended.\nexport function Icon({name, size=18, filled=false, className=''}) {\n return h('span', {\n className: 'material-symbols-outlined ' + (filled?'ms-filled ':'') + className,\n style: {fontSize: size+'px', lineHeight: 1, verticalAlign: 'middle'},\n 'data-icon': name\n }, name);\n}\n\nexport function Spinner({size=18, color='#c0c1ff'}){\n return h('div',{\n className:'spin',\n style:{width:size,height:size,borderRadius:'50%',border:'2px solid rgba(192,193,255,0.2)',borderTopColor:color,flexShrink:0,display:'inline-block'}\n });\n}\n\nexport function Badge({label, variant='default', icon=null}){\n const variants = {\n default: 'bg-primary/10 text-primary border-primary/20',\n success: 'bg-secondary/10 text-secondary border-secondary/20',\n error: 'bg-error/10 text-error border-error/20',\n warning: 'bg-tertiary/10 text-tertiary border-tertiary/20',\n muted: 'bg-surface-container-high/60 text-text-muted border-border-subtle',\n };\n return h('span', {\n className: 'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border ' + (variants[variant]||variants.default)\n }, icon, label);\n}\n\nexport function StatusDot({state='online'}){\n const map = {\n online: 'bg-secondary',\n offline: 'bg-text-muted',\n error: 'bg-error',\n warn: 'bg-tertiary',\n primary: 'bg-primary',\n };\n return h('span', { className: 'w-1.5 h-1.5 rounded-full pulse-dot inline-block ' + (map[state]||map.online) });\n}\n\nexport function Toggle({value, onChange}){\n return h('button', {\n onClick:()=>onChange(!value), type:'button',\n 'aria-pressed': !!value,\n className: 'w-10 h-5 rounded-full relative cursor-pointer transition-colors duration-150 flex-shrink-0 ' + (value?'bg-primary':'bg-surface-variant')\n },\n h('div',{\n className: 'absolute top-0.5 w-4 h-4 bg-white rounded-full transition-all duration-150 shadow ' + (value?'right-0.5':'left-0.5'),\n style:{boxShadow:'0 1px 3px rgba(0,0,0,0.4)'}\n })\n );\n}\n\nexport function Btn({children, onClick, variant='primary', size='md', disabled=false, className='', style={}, type='button'}){\n const sizes = {\n sm: 'px-3 py-1.5 text-[12px] gap-1.5',\n md: 'px-4 py-2 text-[13px] gap-2',\n lg: 'px-6 py-3 text-[14px] gap-2',\n };\n const variants = {\n primary: 'bg-primary text-on-primary hover:opacity-90 active:scale-[0.98] shadow-lg shadow-primary/20',\n secondary: 'bg-secondary text-on-secondary hover:opacity-90 active:scale-[0.98]',\n ghost: 'bg-surface-container/40 border border-border-subtle text-on-surface-variant hover:bg-surface-variant/30 hover:text-on-surface',\n danger: 'bg-error/10 text-error border border-error/20 hover:bg-error/20',\n success: 'bg-secondary/10 text-secondary border border-secondary/20 hover:bg-secondary/20',\n outline: 'border border-outline/30 text-on-surface hover:bg-surface-variant/20',\n };\n const cls = 'inline-flex items-center justify-center rounded-lg font-semibold transition-all whitespace-nowrap ' +\n (sizes[size]||sizes.md) + ' ' + (variants[variant]||variants.primary) +\n (disabled?' opacity-50 cursor-not-allowed pointer-events-none':' cursor-pointer') +\n (className?' '+className:'');\n return h('button', {onClick, disabled, type, className: cls, style}, children);\n}\n\nexport function IconBtn({name, onClick, size=18, tone='muted', className=''}){\n const tones = {\n muted: 'text-on-surface-variant hover:text-primary',\n primary: 'text-primary hover:text-primary-fixed',\n danger: 'text-error hover:text-error',\n surface: 'text-on-surface hover:text-primary',\n };\n return h('button',{onClick, type:'button',\n className:'p-1 rounded transition-colors cursor-pointer ' + (tones[tone]||tones.muted) + (className?' '+className:'')\n }, h(Icon,{name, size}));\n}\n\nexport function Input({label, value, onChange, type='text', placeholder='', hint='', icon=null, className=''}){\n const [show, setShow] = useState(false);\n const isPass = type === 'password';\n const actualType = isPass && !show ? 'password' : (type === 'password' ? 'text' : type);\n return h('div', {className: 'flex flex-col gap-1.5 ' + className},\n label && h('label', {className: 'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, label),\n h('div', {className: 'flex items-center gap-2 bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 neon-stroke transition-all'},\n icon && h(Icon, {name: icon, size: 16, className: 'text-text-muted'}),\n h('input', {\n type: actualType, value: value||'',\n onChange: e => onChange && onChange(e.target.value),\n placeholder,\n className: 'flex-1 bg-transparent border-none text-on-surface text-[13px] outline-none focus:ring-0 p-0 min-w-0 placeholder:text-text-muted'\n }),\n isPass && h('button',{onClick:()=>setShow(!show), type:'button', className:'text-text-muted hover:text-on-surface transition-colors'},\n h(Icon,{name: show?'visibility_off':'visibility', size:16})\n )\n ),\n hint && h('div',{className:'text-[11px] text-text-muted pl-1'},hint)\n );\n}\n\nexport function Textarea({label, value, onChange, placeholder='', rows=4, className=''}){\n return h('div', {className: 'flex flex-col gap-1.5 ' + className},\n label && h('label', {className: 'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, label),\n h('textarea', {\n value: value||'', onChange: e=>onChange&&onChange(e.target.value), placeholder, rows,\n className: 'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2.5 text-on-surface text-[13px] resize-none outline-none focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all placeholder:text-text-muted',\n style: {fontFamily: 'inherit', lineHeight: 1.5}\n })\n );\n}\n\nexport function Select({label, value, onChange, options, className=''}){\n return h('div', {className: 'flex flex-col gap-1.5 ' + className},\n label && h('label', {className: 'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, label),\n h('select', {\n value, onChange: e=>onChange&&onChange(e.target.value),\n className: 'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-on-surface text-[13px] cursor-pointer outline-none focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all appearance-none',\n style: {backgroundImage: 'url(\"data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns=\\\\'http://www.w3.org/2000/svg\\\\' width=\\\\'12\\\\' height=\\\\'12\\\\' viewBox=\\\\'0 0 24 24\\\\' fill=\\\\'none\\\\' stroke=\\\\'%23c7c4d7\\\\' stroke-width=\\\\'2\\\\'%3E%3Cpath d=\\\\'M6 9l6 6 6-6\\\\'/%3E%3C/svg%3E\")', backgroundRepeat:'no-repeat', backgroundPosition:'right 12px center', paddingRight:'32px'}\n }, options.map(o => h('option', {key: o.value, value: o.value, style:{background:'#1c1b1e',color:'#e5e1e5'}}, o.label)))\n );\n}\n\nexport function BrandIcon({slug, color='#c0c1ff', size=18, bare=false}){\n const [err, setErr] = useState(false);\n const img = h('img', {\n src: 'https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/'+slug+'.svg',\n width: size, height: size, alt: slug,\n style: {filter: 'invert(1)', opacity: 0.9, display: 'block'},\n onError: ()=>setErr(true)\n });\n const fb = h('span', {style:{fontSize: size*0.65, fontWeight: 700, color}}, (slug||'?')[0].toUpperCase());\n const inner = err ? fb : img;\n if (bare) return inner;\n return h('div', {\n className:'rounded-lg flex items-center justify-center flex-shrink-0',\n style: {width: size+14, height: size+14, background: color+'22'}\n }, inner);\n}\n\nexport function MetricCard({icon, title, value, subtitle, color='#c0c1ff', trend=null, onClick=null}){\n return h('div', {\n onClick,\n className: 'glass-panel rounded-xl p-lg flex flex-col gap-md transition-all ' + (onClick?'cursor-pointer hover:border-primary/30':''),\n },\n h('div', {className:'flex items-center justify-between'},\n h('div', {\n className:'w-10 h-10 rounded-lg flex items-center justify-center',\n style:{background: color+'18', color}\n }, typeof icon === 'string' ? h(Icon,{name:icon, size:22}) : icon),\n h('div', {className:'text-[28px] font-extrabold text-on-surface leading-none tracking-tight'}, value)\n ),\n h('div', null,\n h('div',{className:'text-[14px] font-semibold text-on-surface'},title),\n subtitle && h('div',{className:'text-[11px] text-text-muted mt-1'},subtitle),\n trend\n )\n );\n}\n\nexport function DateRangePicker({value, onChange}){\n const opts = [{label:'7d', days:7},{label:'30d', days:30},{label:'90d', days:90},{label:'6m', days:180}];\n return h('div',{className:'flex bg-surface-container-lowest rounded-lg p-0.5 border border-border-subtle gap-0.5'},\n opts.map(o => h('button',{\n key:o.days, onClick:()=>onChange(o.days), type:'button',\n className:'px-2.5 py-1 rounded-md text-[11px] font-bold uppercase tracking-wider transition-all ' +\n (value===o.days?'bg-primary text-on-primary':'text-text-muted hover:text-on-surface')\n }, o.label))\n );\n}\n\nexport function TrendBadge({current, previous}){\n if (previous == null || previous === 0) return null;\n const pct = (current - previous) / Math.abs(previous) * 100;\n const up = pct >= 0;\n return h('span',{\n className:'inline-flex items-center text-[11px] font-bold px-1.5 py-0.5 rounded ' +\n (up?'text-secondary bg-secondary/10':'text-error bg-error/10')\n }, (up?'↑ +':'↓ ') + Math.abs(pct).toFixed(1) + '%');\n}\n\nexport function GlassPanel({children, className='', padding='p-lg', onClick=null}){\n return h('div', {\n onClick,\n className: 'glass-panel rounded-xl ' + padding + ' ' + className + (onClick?' cursor-pointer':'')\n }, children);\n}\n\nexport function SectionHeader({icon, title, action=null, color='primary'}){\n const colorMap = {primary:'text-primary', secondary:'text-secondary', tertiary:'text-tertiary'};\n return h('div', {className:'flex items-center justify-between border-b border-border-subtle pb-md mb-lg'},\n h('div', {className:'flex items-center gap-sm'},\n icon && h(Icon, {name: icon, size: 22, className: colorMap[color]||colorMap.primary}),\n h('h3', {className:'text-[18px] font-bold text-on-surface tracking-tight'}, title)\n ),\n action\n );\n}\n\nexport function DataDisplay({data, loading, error, integrationName='', onFix=null}){\n const [sortCol, setSortCol] = useState(null);\n const [sortDir, setSortDir] = useState(1);\n const [page, setPage] = useState(0);\n const PAGE = 50;\n\n if (loading) return h('div', {className:'flex flex-col gap-2 py-3'},\n ...[1,2,3].map(i => h('div', {\n key:i,\n style: {height: 34, borderRadius: 8, background: 'linear-gradient(90deg,#1c1b1e 25%,#2a2a2d 50%,#1c1b1e 75%)', backgroundSize:'200% 100%', animation:'shimmer 1.5s infinite'}\n }))\n );\n\n if (error) {\n const hints = {\n 'select: column':'Check Ahrefs column names in the API docs',\n '401':'Token expired — reconnect in Settings',\n '403':'Check API key permissions in the provider dashboard',\n 'not found':'Verify your target domain or property ID',\n 'property_id':'Set your GA4 Property ID in Settings'\n };\n const hint = Object.entries(hints).find(([k]) => String(error).toLowerCase().includes(k.toLowerCase()))?.[1] || '';\n return h('div', {className:'p-md rounded-lg bg-error/5 border border-error/30 text-error text-[13px] leading-relaxed'},\n h('div', {className:'flex items-start gap-2'},\n h(Icon, {name:'error', size:16, className:'mt-0.5 flex-shrink-0'}),\n h('div', {className:'flex-1'},\n String(error),\n hint && h('div', {className:'text-error/80 text-[11px] mt-1'}, hint)\n ),\n onFix && h('button', {\n onClick: onFix,\n className:'flex-shrink-0 text-[11px] px-2.5 py-1 rounded border border-error/40 bg-error/10 text-error cursor-pointer whitespace-nowrap hover:bg-error/20 transition-all'\n }, 'Fix →')\n )\n );\n }\n\n if (!data) return null;\n\n const flattenRow = (r) => {\n const out = {};\n for (const [k,v] of Object.entries(r)) {\n if (v === null || v === undefined) { out[k] = v; }\n else if (typeof v === 'object' && !Array.isArray(v)) {\n for (const [k2,v2] of Object.entries(v)) {\n if (typeof v2 !== 'object') out[k+'_'+k2] = v2;\n }\n } else if (Array.isArray(v)) {\n out[k] = v.join(', ');\n } else {\n out[k] = v;\n }\n }\n return out;\n };\n\n let rows = null, rk = '';\n if (Array.isArray(data) && data.length && typeof data[0] === 'object') { rows = data.map(flattenRow); rk = 'results'; }\n if (!rows) {\n for (const k of ['keywords','backlinks','refdomains','organic_keywords','sitemap','pages','rows','items','posts','messages','results','edges','value','events','categories','data']) {\n const a = Array.isArray(data[k]) ? data[k] : Array.isArray(data?.data?.[k]) ? data.data[k] : null;\n if (a?.length && typeof a[0] === 'object') { rows = a.map(flattenRow); rk = k; break; }\n }\n }\n if (!rows && data?.rows?.length && data.dimensionHeaders) {\n const dh = data.dimensionHeaders.map(h => h.name), mh = (data.metricHeaders||[]).map(h => h.name);\n rows = data.rows.map(r => ({\n ...Object.fromEntries(dh.map((k,i) => [k, r.dimensionValues[i]?.value])),\n ...Object.fromEntries(mh.map((k,i) => [k, r.metricValues[i]?.value]))\n }));\n rk = 'analytics';\n }\n\n const wrapCls = 'mt-3 bg-surface-container-lowest border border-border-subtle rounded-xl p-4 overflow-x-auto';\n\n if (rows?.length) {\n const cols = Object.keys(rows[0]).slice(0, 10);\n const sorted = sortCol ? [...rows].sort((a,b) => {\n const v = a[sortCol], w = b[sortCol];\n return (typeof v === 'number' && typeof w === 'number' ? v - w : String(v??'').localeCompare(String(w??''))) * sortDir;\n }) : rows;\n const totalPages = Math.ceil(sorted.length / PAGE);\n const visible = sorted.slice(page * PAGE, (page+1) * PAGE);\n return h('div', {className: wrapCls, style:{maxHeight: 520, overflowY: 'auto'}},\n h('div', {className:'flex justify-between items-center mb-3 text-[11px] text-text-muted flex-wrap gap-2'},\n h('span', {className:'font-mono-data tracking-wide uppercase'}, rk+' · '+rows.length+' rows'+(totalPages>1?' · p'+(page+1)+'/'+totalPages:'')),\n h('div', {className:'flex gap-1.5 items-center'},\n totalPages > 1 && h('div', {className:'flex gap-1'},\n h('button', {onClick:()=>setPage(p=>Math.max(0,p-1)), disabled:page===0,\n className:'px-2 py-0.5 rounded border border-border-subtle bg-surface-container-low text-[11px] text-on-surface-variant disabled:opacity-30 hover:bg-surface-variant/40 cursor-pointer'\n }, '‹'),\n h('button', {onClick:()=>setPage(p=>Math.min(totalPages-1,p+1)), disabled:page===totalPages-1,\n className:'px-2 py-0.5 rounded border border-border-subtle bg-surface-container-low text-[11px] text-on-surface-variant disabled:opacity-30 hover:bg-surface-variant/40 cursor-pointer'\n }, '›')\n ),\n h('button', {onClick:()=>exportCSV(rows, integrationName+'-'+rk+'.csv'),\n className:'text-[11px] px-2.5 py-0.5 rounded border border-primary/30 bg-primary/10 text-primary cursor-pointer hover:bg-primary/20 transition-all'\n }, '↓ CSV')\n )\n ),\n h('table', {className:'w-full', style:{borderCollapse:'collapse'}},\n h('thead', null,\n h('tr', null,\n cols.map(c => h('th', {\n key:c, onClick:()=>{setSortCol(c); setSortDir(sortCol===c?-sortDir:1); setPage(0);},\n className:'text-left px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-text-muted cursor-pointer select-none whitespace-nowrap hover:text-on-surface border-b border-border-subtle'\n }, c.replace(/_/g,' ') + (sortCol===c ? (sortDir>0?' ↑':' ↓') : ' ·')))\n )\n ),\n h('tbody', null,\n visible.map((r,i) => h('tr', {key:i, className:'hover:bg-white/5'},\n cols.map(c => {\n const v = r[c];\n return h('td', {\n key:c, title: v==null?'':String(v),\n className:'px-3 py-2 text-[13px] text-on-surface border-b border-border-subtle/50',\n style:{maxWidth: 220, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}\n }, v==null?'—':typeof v==='number'?fmtNum(v):String(v).slice(0,60));\n })\n ))\n )\n )\n );\n }\n\n if (data && typeof data === 'object') {\n const src = Object.values(data).find(v => v && typeof v === 'object' && !Array.isArray(v) && Object.keys(v).length > 0) || data;\n const entries = Object.entries(src).filter(([,v]) => v !== null && v !== undefined && typeof v !== 'object').slice(0, 60);\n if (entries.length) return h('div', {className: wrapCls, style: {padding: 0, display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(200px,1fr))'}},\n entries.map(([k,v]) => h('div', {key:k, className:'px-4 py-2.5 border-b border-border-subtle/50 flex flex-col gap-1'},\n h('span', {className:'text-[10px] text-text-muted uppercase tracking-wider'}, k.replace(/_/g,' ')),\n h('span', {className:'text-[14px] font-semibold text-on-surface'}, typeof v === 'number' ? fmtNum(v) : String(v))\n ))\n );\n }\n\n return h('div', {className: wrapCls},\n h('pre', {className:'text-[12px] text-on-surface-variant leading-relaxed font-mono-data'}, JSON.stringify(data, null, 2))\n );\n}\n `;\n}\n",[270],"d61a37c4-5e7b-11f1-9c7b-1607ee4eb77e","frontend_tasks.ts","d22866b8-5e3a-11f1-b18c-1607ee4eb77e",936,["D",1780402139102],"// TasksPage — task-oriented, navigable execution surface (Phase 1 Framework Layer).\n// Served at /api/app-tasks and dynamically imported by frontend_js.ts.\n//\n// Mirrors frontend_objectives.ts: browser React module, h = React.createElement,\n// shared deps pulled from window.__nexus, default-exported page component.\n// The bearer token is auto-attached to every /api fetch by frontend_js.ts's\n// window.fetch override — so calls are plain '/api/...' like the other pages.\n//\n// Backend endpoints used (all return JSON):\n// GET /api/tasks/ice?limit= — ICE-ranked backlog (ice_score desc, nulls last)\n// GET /api/tasks?status= — full list (due_date asc, nulls last)\n// GET /api/campaigns — campaign id→name lookup for chips\n// GET /api/okrs — objective id→title + KR id→title lookup for chips\n// GET /api/experiments — experiment list for the Generate source dropdown\n// PUT /api/tasks/:id — mark/cycle status\n// POST /api/tasks/:id/run — run an agent on one task; returns { task, run, error }\n// POST /api/tasks/generate — LLM-plan tasks from a source (objective/KR/campaign/experiment)\n\nexport function getTasksJS(): string {\n return `\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// ─── ICE colour grading (1-10 component avg) ────────────────────────────────\nconst ICE_HEX = (s) => {\n if (s == null) return '#8a8a99';\n if (s >= 7) return '#4edea3'; // strong — secondary green\n if (s >= 4) return '#d0bcff'; // moderate — tertiary\n return '#ffb4ab'; // weak — error\n};\nconst ICE_LABEL = (s) => {\n if (s == null) return 'Unscored';\n if (s >= 7) return 'High leverage';\n if (s >= 4) return 'Moderate';\n return 'Low leverage';\n};\n\n// ─── Status model ───────────────────────────────────────────────────────────\nconst STATUSES = ['todo', 'doing', 'done', 'blocked'];\nconst STATUS_META = {\n todo: { label: 'To do', hex: '#c0c1ff', cls: 'bg-primary/10 text-primary border-primary/30' },\n doing: { label: 'Doing', hex: '#d0bcff', cls: 'bg-tertiary/10 text-tertiary border-tertiary/30' },\n done: { label: 'Done', hex: '#4edea3', cls: 'bg-secondary/10 text-secondary border-secondary/30' },\n blocked: { label: 'Blocked', hex: '#ffb4ab', cls: 'bg-error/10 text-error border-error/30' },\n};\nconst normStatus = (s) => {\n const v = String(s || 'todo').toLowerCase();\n return STATUS_META[v] ? v : 'todo';\n};\n// Click cycles the work forward: todo → doing → done → todo. Blocked is its own\n// terminal state that cycles back to todo so a click can always unblock.\nconst NEXT_STATUS = { todo: 'doing', doing: 'done', done: 'todo', blocked: 'todo' };\n\n// ─── Day bucketing by due_date ──────────────────────────────────────────────\nconst DAY_MS = 86400000;\nconst startOfDay = (d) => { const x = new Date(d); x.setHours(0, 0, 0, 0); return x; };\n\n// Order + presentation metadata for each bucket. Lower 'order' renders first.\nconst BUCKETS = {\n overdue: { order: 0, label: 'Overdue', icon: 'error', tone: 'text-error' },\n today: { order: 1, label: 'Today', icon: 'today', tone: 'text-primary' },\n tomorrow: { order: 2, label: 'Tomorrow', icon: 'event', tone: 'text-tertiary' },\n week: { order: 3, label: 'This Week', icon: 'date_range', tone: 'text-on-surface' },\n later: { order: 4, label: 'Later', icon: 'schedule', tone: 'text-text-muted' },\n none: { order: 5, label: 'No date', icon: 'remove_circle', tone: 'text-text-muted' },\n};\n\nconst bucketFor = (dueRaw) => {\n if (!dueRaw) return 'none';\n const due = new Date(dueRaw);\n if (Number.isNaN(due.getTime())) return 'none';\n const today = startOfDay(new Date());\n const day = startOfDay(due);\n const diff = Math.round((day.getTime() - today.getTime()) / DAY_MS);\n if (diff < 0) return 'overdue';\n if (diff === 0) return 'today';\n if (diff === 1) return 'tomorrow';\n if (diff <= 7) return 'week';\n return 'later';\n};\n\nconst fmtDue = (dueRaw) => {\n if (!dueRaw) return null;\n const d = new Date(dueRaw);\n if (Number.isNaN(d.getTime())) return null;\n return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });\n};\n\n// ─── ICE badge ──────────────────────────────────────────────────────────────\n// Shows Impact·Confidence·Ease components + the computed ice_score, colour-graded.\nfunction IceBadge({impact, confidence, ease, score}) {\n const hasComponents = impact != null && confidence != null && ease != null;\n const hex = ICE_HEX(score == null ? null : Number(score));\n const scoreTxt = score == null ? '—' : (Math.round(Number(score) * 100) / 100);\n return h('div', {\n className: 'inline-flex items-center gap-1.5 px-2 py-1 rounded-lg border flex-shrink-0',\n style: { borderColor: hex + '55', background: hex + '14' },\n title: ICE_LABEL(score == null ? null : Number(score)) + ' · ICE = (Impact + Confidence + Ease) / 3'\n },\n h('span', { className: 'text-[8px] font-bold uppercase tracking-widest', style: { color: hex } }, 'ICE'),\n hasComponents\n ? h('span', { className: 'text-[10px] font-mono-data text-text-muted', style: { fontVariantNumeric: 'tabular-nums' } },\n Number(impact) + '·' + Number(confidence) + '·' + Number(ease))\n : null,\n h('span', {\n className: 'text-[12px] font-extrabold font-mono-data',\n style: { color: hex, fontVariantNumeric: 'tabular-nums' }\n }, String(scoreTxt))\n );\n}\n\n// ─── Status pill (clickable to cycle) ───────────────────────────────────────\nfunction StatusPill({status, onCycle, busy}) {\n const {Icon, Spinner} = N();\n const s = normStatus(status);\n const meta = STATUS_META[s];\n return h('button', {\n type: 'button',\n onClick: (e) => { e.stopPropagation(); if (!busy && onCycle) onCycle(); },\n disabled: busy,\n title: 'Click to advance status (' + meta.label + ' → ' + STATUS_META[NEXT_STATUS[s]].label + ')',\n className: 'inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border transition-all hover:brightness-110 ' + meta.cls\n },\n busy\n ? (Spinner ? h(Spinner, { size: 9 }) : '…')\n : h('span', { className: 'w-1.5 h-1.5 rounded-full', style: { background: meta.hex } }),\n meta.label\n );\n}\n\n// ─── Link chip (campaign / objective / KR) ──────────────────────────────────\nfunction LinkChip({icon, label, onClick}) {\n const {Icon} = N();\n if (!label) return null;\n return h('button', {\n type: 'button',\n onClick: (e) => { e.stopPropagation(); if (onClick) onClick(); },\n className: 'inline-flex items-center gap-1 max-w-[180px] text-[10px] font-medium px-1.5 py-0.5 rounded border border-border-subtle bg-surface-container/40 text-text-muted hover:text-primary hover:border-primary/40 transition-colors'\n },\n Icon ? h(Icon, { name: icon, size: 11, className: 'flex-shrink-0' }) : null,\n h('span', { className: 'truncate' }, label)\n );\n}\n\n// ─── TaskCard ───────────────────────────────────────────────────────────────\nfunction TaskCard({task, campaignName, objectiveTitle, krTitle, onCycleStatus, onRun, onDelete, setActivePage}) {\n const {Icon, Spinner} = N();\n const [busy, setBusy] = useState(false);\n const [running, setRunning] = useState(false);\n const s = normStatus(task.status);\n const done = s === 'done';\n const blocked = s === 'blocked';\n const due = fmtDue(task.due_date);\n\n // Reopen a blocked task back to 'todo' without running it — reuses the same\n // status-cycle handler as the pill (NEXT_STATUS.blocked === 'todo').\n const reopen = async (e) => {\n if (e) e.stopPropagation();\n if (busy) return;\n setBusy(true);\n try { await onCycleStatus(task.id, NEXT_STATUS[s]); }\n finally { setBusy(false); }\n };\n\n const cycle = async () => {\n setBusy(true);\n try { await onCycleStatus(task.id, NEXT_STATUS[s]); }\n finally { setBusy(false); }\n };\n\n // Put an agent to work on this single task: POST /api/tasks/:id/run, then the\n // parent refetches so the status flips (doing → done) once the agent finishes.\n const run = async (e) => {\n if (e) e.stopPropagation();\n if (running) return;\n setRunning(true);\n try { await onRun(task.id); }\n finally { setRunning(false); }\n };\n\n const del = async (e) => {\n if (e) e.stopPropagation();\n if (onDelete) await onDelete(task.id);\n };\n\n return h('div', {\n className: 'glass-panel rounded-xl p-md flex items-start gap-3 group transition-all hover:border-primary/30 ' + (done ? 'opacity-60' : '')\n },\n // Left: complete toggle\n h('button', {\n type: 'button',\n onClick: cycle,\n title: done ? 'Reopen task' : 'Mark done',\n className: 'mt-0.5 flex-shrink-0 w-5 h-5 rounded-full border flex items-center justify-center transition-all ' +\n (done ? 'bg-secondary/20 border-secondary text-secondary' : 'border-border-subtle text-transparent hover:border-secondary hover:text-secondary/60')\n }, Icon ? h(Icon, { name: 'check', size: 13 }) : '✓'),\n\n // Body\n h('div', { className: 'flex-1 min-w-0 space-y-1.5' },\n h('div', { className: 'flex items-start justify-between gap-2' },\n h('p', {\n className: 'text-[13px] font-semibold leading-snug text-on-surface min-w-0 ' + (done ? 'line-through text-text-muted' : '')\n }, task.title || 'Untitled task'),\n h('div', { className: 'flex items-center gap-1.5 flex-shrink-0' },\n // Blocked → recovery affordances. A failed run/agent leaves the task\n // 'blocked' with no obvious next step; offer Retry (re-run via onRun)\n // and Reopen (back to todo via the status-cycle handler).\n blocked ? h('button', {\n type: 'button',\n onClick: run,\n disabled: running || busy,\n title: 'Retry — re-run an agent on this blocked task',\n className: 'inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded border transition-all disabled:opacity-40 disabled:cursor-not-allowed ' +\n (running\n ? 'border-tertiary/40 bg-tertiary/10 text-tertiary'\n : 'border-primary/40 bg-primary/10 text-primary hover:brightness-110')\n },\n running\n ? (Spinner ? h(Spinner, { size: 10 }) : '…')\n : (Icon ? h(Icon, { name: 'refresh', size: 12 }) : '↻'),\n running ? 'Retrying' : 'Retry'\n ) : null,\n blocked ? h('button', {\n type: 'button',\n onClick: reopen,\n disabled: busy || running,\n title: 'Reopen — move this blocked task back to To do',\n className: 'inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded border transition-all disabled:opacity-40 disabled:cursor-not-allowed border-border-subtle bg-surface-container/40 text-text-muted hover:text-on-surface hover:border-primary/40'\n },\n busy\n ? (Spinner ? h(Spinner, { size: 10 }) : '…')\n : (Icon ? h(Icon, { name: 'undo', size: 12 }) : '↺'),\n 'Reopen'\n ) : null,\n // Run — put an agent to work on just this task. Hidden for blocked\n // tasks (Retry covers re-running); disabled once done.\n blocked ? null : h('button', {\n type: 'button',\n onClick: run,\n disabled: running || done,\n title: done ? 'Task already done' : 'Run an agent on this task',\n className: 'inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded border transition-all disabled:opacity-40 disabled:cursor-not-allowed ' +\n (running\n ? 'border-tertiary/40 bg-tertiary/10 text-tertiary'\n : 'border-secondary/40 bg-secondary/10 text-secondary hover:brightness-110')\n },\n running\n ? (Spinner ? h(Spinner, { size: 10 }) : '…')\n : (Icon ? h(Icon, { name: 'play_arrow', size: 12 }) : '▶'),\n running ? 'Running' : 'Run'\n ),\n h(IceBadge, { impact: task.impact, confidence: task.confidence, ease: task.ease, score: task.ice_score }),\n onDelete ? h('button', {\n type: 'button',\n onClick: del,\n title: 'Delete task',\n className: 'inline-flex items-center justify-center w-5 h-5 rounded text-text-muted opacity-0 group-hover:opacity-100 hover:text-error hover:bg-error/10 transition-all'\n }, Icon ? h(Icon, { name: 'delete', size: 13 }) : 'x') : null\n )\n ),\n task.description\n ? h('p', { className: 'text-[11px] text-text-muted leading-relaxed line-clamp-2' }, task.description)\n : null,\n // Meta row: status pill, due, link chips\n h('div', { className: 'flex items-center gap-1.5 flex-wrap pt-0.5' },\n h(StatusPill, { status: s, busy, onCycle: cycle }),\n due\n ? h('span', { className: 'inline-flex items-center gap-1 text-[10px] text-text-muted' },\n Icon ? h(Icon, { name: 'schedule', size: 11 }) : null, due)\n : null,\n campaignName\n ? h(LinkChip, { icon: 'campaign', label: campaignName, onClick: () => setActivePage && setActivePage('campaigns') })\n : null,\n objectiveTitle\n ? h(LinkChip, { icon: 'flag', label: objectiveTitle, onClick: () => setActivePage && setActivePage('objectives') })\n : null,\n krTitle\n ? h(LinkChip, { icon: 'target', label: krTitle, onClick: () => setActivePage && setActivePage('objectives') })\n : null\n )\n )\n );\n}\n\n// ─── DayGroup ───────────────────────────────────────────────────────────────\nfunction DayGroup({bucketKey, tasks, lookups, onCycleStatus, onRun, onDelete, setActivePage}) {\n const {Icon} = N();\n const meta = BUCKETS[bucketKey];\n if (!tasks.length) return null;\n return h('section', { className: 'space-y-2.5' },\n h('div', { className: 'flex items-center gap-2 px-0.5' },\n Icon ? h(Icon, { name: meta.icon, size: 14, className: meta.tone }) : null,\n h('h3', { className: 'text-[12px] font-bold uppercase tracking-widest ' + meta.tone }, meta.label),\n h('span', { className: 'text-[11px] font-mono-data text-text-muted' }, '· ' + tasks.length)\n ),\n h('div', { className: 'space-y-2' },\n tasks.map((t) => h(TaskCard, {\n key: t.id,\n task: t,\n campaignName: t.campaign_id != null ? lookups.campaigns[String(t.campaign_id)] : null,\n objectiveTitle: t.objective_id != null ? lookups.objectives[String(t.objective_id)] : null,\n krTitle: t.key_result_id != null ? lookups.krs[String(t.key_result_id)] : null,\n onCycleStatus,\n onRun,\n onDelete,\n setActivePage\n }))\n )\n );\n}\n\n// ─── GeneratePanel (inline source picker → POST /api/tasks/generate) ─────────\nfunction GeneratePanel({objectives, campaigns, experiments, onGenerate, onClose}) {\n const {Icon, Btn, Spinner} = N();\n const [busy, setBusy] = useState(false);\n const [value, setValue] = useState('');\n\n // Build a flat option list: each objective, each KR, each campaign, each experiment.\n const options = useMemo(() => {\n const out = [];\n for (const o of objectives) {\n out.push({ key: 'objective:' + o.id, source_type: 'objective', source_id: o.id, label: 'Objective · ' + (o.title || 'Untitled') });\n for (const kr of (o.key_results || [])) {\n out.push({ key: 'key_result:' + kr.id, source_type: 'key_result', source_id: kr.id, label: ' KR · ' + (kr.title || 'Untitled') });\n }\n }\n for (const c of campaigns) {\n out.push({ key: 'campaign:' + c.id, source_type: 'campaign', source_id: c.id, label: 'Campaign · ' + (c.name || 'Untitled') });\n }\n for (const x of (experiments || [])) {\n out.push({ key: 'experiment:' + x.id, source_type: 'experiment', source_id: x.id, label: 'Experiment · ' + (x.title || 'Untitled') });\n }\n return out;\n }, [objectives, campaigns, experiments]);\n\n const submit = async () => {\n const opt = options.find((o) => o.key === value);\n if (!opt) return;\n setBusy(true);\n try { await onGenerate(opt.source_type, opt.source_id); }\n finally { setBusy(false); }\n };\n\n return h('section', { className: 'glass-panel rounded-xl p-lg space-y-md border border-primary/30' },\n h('div', { className: 'flex items-center justify-between' },\n h('h3', { className: 'text-[15px] font-bold text-on-surface tracking-tight flex items-center gap-2' },\n Icon ? h(Icon, { name: 'auto_awesome', size: 17, className: 'text-primary' }) : null, 'Generate tasks'),\n h('button', { onClick: onClose, className: 'text-text-muted hover:text-on-surface' },\n Icon ? h(Icon, { name: 'close', size: 17 }) : '✕')\n ),\n h('p', { className: 'text-[12px] text-text-muted' },\n 'Pick an objective, key result, campaign, or experiment — the planner drafts up to 5 ICE-scored next-step tasks for it.'),\n options.length === 0\n ? h('p', { className: 'text-[12px] text-text-muted italic' },\n 'No objectives, campaigns, or experiments yet. Create one first to plan tasks against it.')\n : h('div', { className: 'flex flex-col sm:flex-row gap-2' },\n h('select', {\n value, onChange: (e) => setValue(e.target.value),\n className: 'flex-1 bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n },\n h('option', { value: '' }, 'Select a source…'),\n options.map((o) => h('option', { key: o.key, value: o.key }, o.label))\n ),\n h(Btn, {\n onClick: submit, variant: 'primary', size: 'sm', disabled: busy || !value\n },\n busy ? (Spinner ? h(Spinner, { size: 13 }) : '…') : (Icon ? h(Icon, { name: 'auto_awesome', size: 14 }) : null),\n busy ? 'Planning…' : 'Generate'\n )\n )\n );\n}\n\n// ─── TasksPage ──────────────────────────────────────────────────────────────\nexport function TasksPage({setActivePage}) {\n const {Icon, Btn, MetricCard, PageHeader, Spinner} = N();\n const [tasks, setTasks] = useState([]);\n const [campaigns, setCampaigns] = useState([]);\n const [objectives, setObjectives] = useState([]);\n const [experiments, setExperiments] = useState([]);\n const [sort, setSort] = useState('ice'); // 'ice' | 'due'\n const [statusFilter, setStatusFilter] = useState('all');\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [generating, setGenerating] = useState(false);\n\n // Load tasks. ICE sort uses the ICE-ranked endpoint; due sort uses the\n // due-date-ordered list. Status filter is passed through to the list endpoint\n // when sorting by due date; the ICE endpoint filters client-side.\n const loadTasks = useCallback(async () => {\n setLoading(true); setError(null);\n try {\n const path = sort === 'ice'\n ? '/api/tasks/ice?limit=200'\n : ('/api/tasks' + (statusFilter !== 'all' ? '?status=' + encodeURIComponent(statusFilter) : ''));\n const r = await fetch(path);\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const d = await r.json();\n setTasks(Array.isArray(d) ? d : []);\n } catch (e) { setError(e && e.message || String(e)); }\n finally { setLoading(false); }\n }, [sort, statusFilter]);\n\n // Chip lookups — campaign id→name, objective id→title, KR id→title.\n const loadLookups = useCallback(async () => {\n try {\n const cr = await fetch('/api/campaigns');\n if (cr.ok) { const cd = await cr.json(); setCampaigns(Array.isArray(cd) ? cd : []); }\n } catch {}\n try {\n const or = await fetch('/api/okrs');\n if (or.ok) { const od = await or.json(); setObjectives(Array.isArray(od) ? od : []); }\n } catch {}\n try {\n const er = await fetch('/api/experiments');\n if (er.ok) { const ed = await er.json(); setExperiments(Array.isArray(ed) ? ed : []); }\n } catch {}\n }, []);\n\n useEffect(() => { loadTasks(); }, [loadTasks]);\n useEffect(() => { loadLookups(); }, [loadLookups]);\n\n const lookups = useMemo(() => {\n const c = {}, o = {}, k = {};\n for (const cm of campaigns) c[String(cm.id)] = cm.name || 'Campaign';\n for (const ob of objectives) {\n o[String(ob.id)] = ob.title || 'Objective';\n for (const kr of (ob.key_results || [])) k[String(kr.id)] = kr.title || 'Key result';\n }\n return { campaigns: c, objectives: o, krs: k };\n }, [campaigns, objectives]);\n\n // Apply status filter client-side (covers both endpoints uniformly), then\n // bucket by due day. Within each bucket honour the active sort.\n const grouped = useMemo(() => {\n const filtered = statusFilter === 'all'\n ? tasks\n : tasks.filter((t) => normStatus(t.status) === statusFilter);\n\n const buckets = {};\n for (const key of Object.keys(BUCKETS)) buckets[key] = [];\n for (const t of filtered) buckets[bucketFor(t.due_date)].push(t);\n\n const iceVal = (t) => (t.ice_score == null ? -Infinity : Number(t.ice_score));\n const dueVal = (t) => {\n if (!t.due_date) return Infinity;\n const d = new Date(t.due_date).getTime();\n return Number.isNaN(d) ? Infinity : d;\n };\n for (const key of Object.keys(buckets)) {\n buckets[key].sort((a, b) => sort === 'ice'\n ? (iceVal(b) - iceVal(a))\n : (dueVal(a) - dueVal(b)));\n }\n return buckets;\n }, [tasks, statusFilter, sort]);\n\n const orderedBuckets = useMemo(\n () => Object.keys(BUCKETS).sort((a, b) => BUCKETS[a].order - BUCKETS[b].order),\n []\n );\n\n const visibleCount = useMemo(\n () => orderedBuckets.reduce((acc, key) => acc + grouped[key].length, 0),\n [grouped, orderedBuckets]\n );\n\n // Summary metrics (over the raw, unfiltered task set).\n const summary = useMemo(() => {\n const open = tasks.filter((t) => normStatus(t.status) !== 'done').length;\n const done = tasks.filter((t) => normStatus(t.status) === 'done').length;\n const blocked = tasks.filter((t) => normStatus(t.status) === 'blocked').length;\n const overdue = tasks.filter((t) => normStatus(t.status) !== 'done' && bucketFor(t.due_date) === 'overdue').length;\n return { open, done, blocked, overdue };\n }, [tasks]);\n\n // PUT /api/tasks/:id — optimistic status change, reconcile from server.\n const cycleStatus = useCallback(async (id, next) => {\n setTasks((prev) => prev.map((t) => t.id === id ? { ...t, status: next } : t));\n try {\n const r = await fetch('/api/tasks/' + id, {\n method: 'PUT', headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ status: next })\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const updated = await r.json();\n setTasks((prev) => prev.map((t) => t.id === id ? { ...t, ...updated } : t));\n } catch (e) { loadTasks(); }\n }, [loadTasks]);\n\n // POST /api/tasks/:id/run — put an agent to work on a single task. Optimistically\n // flip the row to 'doing' so the running state is visible immediately, then drive the\n // row from the REAL run outcome: the endpoint returns 200 with { task, run, error }.\n // On success task.status is 'done' (with the agent output stashed on description); on\n // an agent error/timeout the endpoint still returns 200, leaves task.status as 'doing'\n // and sets an error string — surface that real error instead of silently flipping to\n // done. The body returns 404 (with an error field) only when the task can't be found.\n const runTask = useCallback(async (id) => {\n setTasks((prev) => prev.map((t) => t.id === id ? { ...t, status: 'doing' } : t));\n let d = null;\n try {\n const r = await fetch('/api/tasks/' + id + '/run', {\n method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({})\n });\n d = await r.json().catch(() => null);\n if (!r.ok) throw new Error((d && d.error) || ('HTTP ' + r.status));\n } catch (e) {\n // Transport/HTTP failure: reconcile from the server so the row shows its true state.\n alert('Run task failed: ' + (e && e.message || e));\n await loadTasks();\n return;\n }\n // 200 with a real agent error (run did not complete): keep the returned task status\n // (stays 'doing', not 'done') and tell the user what actually went wrong.\n if (d && d.error) {\n if (d.task) setTasks((prev) => prev.map((t) => t.id === id ? { ...t, ...d.task } : t));\n alert('Run did not complete: ' + d.error);\n await loadTasks();\n return;\n }\n // Success: drive the row from runTask's result (done + agent output on description).\n if (d && d.task) {\n setTasks((prev) => prev.map((t) => t.id === id ? { ...t, ...d.task } : t));\n }\n await loadTasks();\n }, [loadTasks]);\n\n // POST /api/tasks/generate — plan tasks from a chosen source, then reload.\n const generateTasks = useCallback(async (source_type, source_id) => {\n try {\n const body = { source_type, source_id };\n if (source_type === 'campaign') body.campaign_id = source_id;\n const r = await fetch('/api/tasks/generate', {\n method: 'POST', headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(body)\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const created = await r.json();\n setGenerating(false);\n await loadTasks();\n if (!Array.isArray(created) || created.length === 0) {\n alert('No tasks were generated. Add an LLM API key in Settings, or pick a richer source.');\n }\n } catch (e) { alert('Generate tasks failed: ' + (e && e.message || e)); }\n }, [loadTasks]);\n\n // DELETE /api/tasks/:id — remove a task (optimistic), reconcile on failure.\n const deleteTask = useCallback(async (id) => {\n if (typeof window !== 'undefined' && window.confirm && !window.confirm('Delete this task? This cannot be undone.')) return;\n setTasks((prev) => prev.filter((t) => t.id !== id));\n try {\n const r = await fetch('/api/tasks/' + id, { method: 'DELETE' });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n } catch (e) {\n alert('Delete failed: ' + (e && e.message || e));\n await loadTasks();\n }\n }, [loadTasks]);\n\n return h('div', { className: 'p-lg lg:p-xl space-y-xl max-w-5xl mx-auto pb-32' },\n h(PageHeader, {\n title: 'Tasks',\n subtitle: 'The day\\\\'s execution — ICE-ranked, grouped by when it is due, linked back to the work it serves.',\n action: h('div', { className: 'flex items-center gap-2' },\n h('button', {\n onClick: loadTasks,\n title: 'Refresh',\n className: 'inline-flex items-center gap-1 text-[11px] font-semibold uppercase tracking-widest text-text-muted hover:text-on-surface px-2.5 py-1.5 rounded-md border border-border-subtle hover:border-primary/40 transition-colors'\n }, Icon ? h(Icon, { name: 'sync', size: 13 }) : null, 'Refresh'),\n h(Btn, {\n onClick: () => setGenerating((g) => !g), variant: 'primary', size: 'sm'\n }, Icon ? h(Icon, { name: 'auto_awesome', size: 14 }) : null, 'Generate tasks')\n )\n }),\n\n // ─── Summary bento ────────────────────────────────────────────────────\n h('div', { className: 'grid grid-cols-2 lg:grid-cols-4 gap-md' },\n h(MetricCard, { icon: 'checklist', color: '#c0c1ff', title: 'Open', value: String(summary.open), subtitle: 'not done' }),\n h(MetricCard, { icon: 'error', color: '#ffb4ab', title: 'Overdue', value: String(summary.overdue), subtitle: 'past due, open' }),\n h(MetricCard, { icon: 'block', color: '#ffb4ab', title: 'Blocked', value: String(summary.blocked), subtitle: 'needs unblocking' }),\n h(MetricCard, { icon: 'check_circle', color: '#4edea3', title: 'Done', value: String(summary.done), subtitle: 'completed' })\n ),\n\n // ─── Toolbar: sort toggle + status filter ─────────────────────────────\n h('div', { className: 'glass-panel rounded-xl p-md flex items-center justify-between flex-wrap gap-3' },\n h('div', { className: 'flex items-center gap-1' },\n h('span', { className: 'text-[10px] font-bold uppercase tracking-widest text-text-muted mr-2' }, 'Sort'),\n [['ice', 'ICE'], ['due', 'Due date']].map(([k, lbl]) => h('button', {\n key: k, type: 'button', onClick: () => setSort(k),\n className: 'px-2.5 py-1 rounded-md text-[11px] font-bold uppercase tracking-wider transition-all ' +\n (sort === k ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface bg-surface-container-lowest border border-border-subtle')\n }, lbl))\n ),\n h('div', { className: 'flex items-center gap-2' },\n h('span', { className: 'text-[10px] font-bold uppercase tracking-widest text-text-muted' }, 'Status'),\n h('select', {\n value: statusFilter, onChange: (e) => setStatusFilter(e.target.value),\n className: 'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[12px] text-on-surface capitalize focus:border-primary focus:outline-none'\n },\n h('option', { value: 'all' }, 'All statuses'),\n STATUSES.map((s) => h('option', { key: s, value: s }, STATUS_META[s].label))\n )\n )\n ),\n\n // ─── Generate panel ───────────────────────────────────────────────────\n generating && h(GeneratePanel, {\n objectives, campaigns, experiments,\n onGenerate: generateTasks,\n onClose: () => setGenerating(false)\n }),\n\n // ─── Loading / error / empty / grouped lists ──────────────────────────\n loading && tasks.length === 0\n ? h('div', { className: 'flex items-center justify-center py-16 text-text-muted gap-2' },\n Spinner ? h(Spinner, { size: 18 }) : null, h('span', { className: 'text-[13px]' }, 'Loading tasks…'))\n : error\n ? h('div', { className: 'glass-panel rounded-xl p-lg text-error text-[13px] flex items-center gap-2' },\n Icon ? h(Icon, { name: 'error', size: 16 }) : null, 'Failed to load tasks: ' + error)\n : visibleCount === 0\n ? h('div', { className: 'glass-panel rounded-xl p-xl text-center space-y-3' },\n h('div', { className: 'w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto' },\n Icon ? h(Icon, { name: 'checklist', size: 28, className: 'text-primary' }) : null),\n h('h3', { className: 'text-[16px] font-bold text-on-surface' },\n statusFilter === 'all' ? 'No tasks yet' : ('No ' + STATUS_META[statusFilter].label.toLowerCase() + ' tasks')),\n h('p', { className: 'text-[13px] text-text-muted max-w-md mx-auto' },\n 'Generate a focused, ICE-scored task list from any objective, key result, or campaign — or clear the status filter to see everything.'),\n h('div', { className: 'flex justify-center gap-2 pt-2' },\n h(Btn, { onClick: () => setGenerating(true), variant: 'primary', size: 'sm' },\n Icon ? h(Icon, { name: 'auto_awesome', size: 14 }) : null, 'Generate tasks'),\n statusFilter !== 'all' && h(Btn, { onClick: () => setStatusFilter('all'), variant: 'ghost', size: 'sm' },\n 'Clear filter')\n )\n )\n : h('div', { className: 'space-y-lg' },\n orderedBuckets.map((key) => h(DayGroup, {\n key,\n bucketKey: key,\n tasks: grouped[key],\n lookups,\n onCycleStatus: cycleStatus,\n onRun: runTask,\n onDelete: deleteTask,\n setActivePage\n }))\n )\n );\n}\n\nexport { TasksPage as default };\n `;\n}\n",[277],"d4b2388c-5e7b-11f1-b598-1607ee4eb77e","frontend_skills.ts","0060f180-5d6e-11f1-9a9b-1607ee4eb77e",934,["D",1780402136705],"// SkillsView — the Playbooks page. Served at /api/app-skills, dynamically imported\n// by frontend_js.ts and rendered for the 'playbooks' nav page (bound as _skills.SkillsView).\n//\n// Backend endpoints consumed:\n// GET /api/skills -> {categories:[{category, skills:[{name,category,description,\n// version,enabled,pinned,source,has_body}]}], total, enabled}\n// PUT /api/skills/:name -> {enabled} (toggle a skill on/off in the AI context)\n//\n// \"Apply in Chat\" seeds the AI chat with an apply-skill prompt and opens it, so the request\n// routes through /api/chat where the apply_skill tool fires against the company profile.\n// (It is not a deterministic job — it just pre-seeds chat; the label reflects that reality.)\n//\n// Shared deps from window.__nexus: Icon, Spinner, Btn, Toggle, Input, SectionHeader, PageHeader.\n// (Badge / GlassPanel aren't on __nexus, so we render Tailwind equivalents consistent with the app.)\nexport function getSkillsJS(): string {\n return `\nimport React, { useState, useEffect, useMemo } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// Per-category accent so the grid reads as a real product taxonomy, not a flat list.\nconst CAT_ACCENT = {\n 'Outreach': {chip:'bg-primary/10 text-primary border-primary/25', dot:'bg-primary'},\n 'Content': {chip:'bg-tertiary/10 text-tertiary border-tertiary/25', dot:'bg-tertiary'},\n 'SEO': {chip:'bg-secondary/10 text-secondary border-secondary/25', dot:'bg-secondary'},\n 'Growth': {chip:'bg-secondary/10 text-secondary border-secondary/25', dot:'bg-secondary'},\n 'Analytics': {chip:'bg-primary/10 text-primary border-primary/25', dot:'bg-primary'},\n 'Custom': {chip:'bg-surface-container-high/70 text-text-muted border-border-subtle', dot:'bg-text-muted'},\n};\nconst catAccent = (c) => CAT_ACCENT[c] || {chip:'bg-surface-container-high/70 text-on-surface-variant border-border-subtle', dot:'bg-primary/60'};\n\n// Lightweight Badge (Badge primitive isn't exposed on __nexus).\nfunction Chip({label, className='', icon=null}) {\n return h('span', {\n className:'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border ' + className\n }, icon, label);\n}\n\n// ─── Skill card ───────────────────────────────────────────────────────────────\nfunction SkillCard({skill, onToggle, onRun, busy}) {\n const { Icon, Toggle } = N();\n const accent = catAccent(skill.category);\n const enabled = skill.enabled !== false;\n return h('div', {\n className:'group relative flex flex-col gap-3 rounded-xl border p-lg transition-all bg-surface-container-lowest ' +\n (enabled ? 'border-border-subtle hover:border-primary/40' : 'border-border-subtle/60 opacity-70 hover:opacity-100') +\n ' hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/20'\n },\n // Title row + enable toggle\n h('div', {className:'flex items-start justify-between gap-3'},\n h('div', {className:'flex items-start gap-2.5 min-w-0'},\n h('span', {className:'mt-1 w-2 h-2 rounded-full flex-shrink-0 ' + (enabled ? accent.dot : 'bg-text-muted')}),\n h('div', {className:'min-w-0'},\n h('h4', {className:'text-[14px] font-bold text-on-surface leading-tight truncate'}, skill.name),\n h('div', {className:'text-[10px] font-mono-data text-text-muted mt-0.5'}, 'v' + (skill.version || '1.0.0'))\n )\n ),\n Toggle\n ? h(Toggle, {value: enabled, onChange: () => onToggle(skill)})\n : h('button', {\n type:'button', onClick: () => onToggle(skill), 'aria-pressed': enabled,\n className:'w-10 h-5 rounded-full relative cursor-pointer transition-colors flex-shrink-0 ' + (enabled ? 'bg-primary' : 'bg-surface-variant')\n }, h('div', {className:'absolute top-0.5 w-4 h-4 bg-white rounded-full transition-all shadow ' + (enabled ? 'right-0.5' : 'left-0.5')}))\n ),\n // Description (clamped)\n h('p', {\n className:'text-[12px] leading-relaxed text-on-surface-variant',\n style:{display:'-webkit-box', WebkitLineClamp:3, WebkitBoxOrient:'vertical', overflow:'hidden'}\n }, skill.description || 'No description provided.'),\n // Badges\n h('div', {className:'flex items-center gap-1.5 flex-wrap'},\n h(Chip, {label: skill.category, className: accent.chip}),\n skill.pinned && h(Chip, {label:'Pinned', className:'bg-tertiary/10 text-tertiary border-tertiary/25',\n icon: Icon && h(Icon, {name:'push_pin', size:10, filled:true})}),\n skill.source === 'user' && h(Chip, {label:'Custom', className:'bg-secondary/10 text-secondary border-secondary/25',\n icon: Icon && h(Icon, {name:'person', size:10})})\n ),\n // Footer actions\n h('div', {className:'flex items-center justify-between gap-2 pt-1 mt-auto border-t border-border-subtle/60'},\n h('span', {className:'text-[10px] font-semibold uppercase tracking-wider ' + (enabled ? 'text-secondary' : 'text-text-muted')},\n enabled ? 'In AI context' : 'Disabled'\n ),\n h('button', {\n type:'button', onClick: () => onRun(skill), disabled: !!busy,\n className:'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[12px] font-semibold transition-all ' +\n 'bg-primary/10 text-primary border border-primary/25 hover:bg-primary/20 active:scale-[0.98] ' +\n 'focus:outline-none focus:ring-2 focus:ring-primary/40 disabled:opacity-50 disabled:cursor-not-allowed'\n },\n Icon && h(Icon, {name:'play_arrow', size:15, filled:true}),\n 'Apply in Chat'\n )\n )\n );\n}\n\n// ─── Playbooks page ───────────────────────────────────────────────────────────\nexport function SkillsView({setActivePage, showToast, setChatOpen, setChatMessages}) {\n const { Icon, Spinner, Btn, Input, PageHeader, SectionHeader } = N();\n const [categories, setCategories] = useState([]); // [{category, skills:[...]}]\n const [total, setTotal] = useState(0);\n const [enabledCount, setEnabledCount] = useState(0);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [query, setQuery] = useState('');\n\n const load = async () => {\n setLoading(true); setError(null);\n try {\n const api = N().api || N().fetch || fetch; // shared authed fetch wrapper if present\n const r = await api('/api/skills');\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const data = await r.json();\n setCategories(Array.isArray(data.categories) ? data.categories : []);\n setTotal(Number(data.total) || 0);\n setEnabledCount(Number(data.enabled) || 0);\n } catch (e) {\n setError(e && e.message ? e.message : 'Failed to load playbooks');\n } finally { setLoading(false); }\n };\n useEffect(() => { load(); }, []);\n\n // Optimistic enable/disable with revert-on-failure.\n const toggleSkill = async (skill) => {\n const next = !(skill.enabled !== false);\n setCategories(cats => cats.map(c => ({\n ...c, skills: c.skills.map(s => s.name === skill.name ? {...s, enabled: next} : s)\n })));\n setEnabledCount(n => n + (next ? 1 : -1));\n try {\n const api = N().api || N().fetch || fetch;\n const r = await api('/api/skills/' + encodeURIComponent(skill.name), {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({enabled: next})\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n } catch (e) {\n // revert\n setCategories(cats => cats.map(c => ({\n ...c, skills: c.skills.map(s => s.name === skill.name ? {...s, enabled: !next} : s)\n })));\n setEnabledCount(n => n - (next ? 1 : -1));\n if (typeof showToast === 'function') {\n showToast('Could not ' + (next ? 'enable' : 'disable') + ' \"' + skill.name + '\"', 'error');\n }\n }\n };\n\n // Run → seed the chat with an apply-skill prompt and open it on the dashboard.\n const runSkill = (skill) => {\n const content = 'Apply the ' + skill.name + ' skill to my product. Use my company profile for context.';\n if (typeof setChatMessages === 'function') {\n setChatMessages(prev => [...prev, {role:'user', content, id: Date.now()}]);\n }\n if (typeof setChatOpen === 'function') setChatOpen(true);\n if (typeof setActivePage === 'function') setActivePage('dashboard');\n };\n\n // Client-side filter by name/description.\n const filtered = useMemo(() => {\n const q = query.trim().toLowerCase();\n const cats = categories.map(c => ({\n category: c.category,\n skills: (c.skills || []).filter(s => !q ||\n (s.name || '').toLowerCase().includes(q) ||\n (s.description || '').toLowerCase().includes(q))\n })).filter(c => c.skills.length);\n return cats;\n }, [categories, query]);\n\n const matchCount = useMemo(() => filtered.reduce((a, c) => a + c.skills.length, 0), [filtered]);\n\n // ── Page shell ──\n const header = PageHeader\n ? h(PageHeader, {\n title:'Playbooks',\n subtitle:'Marketing skills the AI can apply to your product — enable the ones you want in context, then run one to draft against your company profile.',\n icon:'auto_stories'\n })\n : h('div', {className:'flex items-center gap-3'},\n Icon && h(Icon, {name:'auto_stories', size:24, className:'text-primary'}),\n h('div', null,\n h('h2', {className:'text-[20px] font-bold text-on-surface tracking-tight'}, 'Playbooks'),\n h('p', {className:'text-[12px] text-text-muted'}, 'Marketing skills the AI can apply to your product.')\n )\n );\n\n return h('div', {className:'p-lg lg:p-xl max-w-[1440px] mx-auto space-y-lg'},\n header,\n\n // Toolbar: search + counts\n h('div', {className:'flex items-center justify-between gap-3 flex-wrap'},\n h('div', {className:'flex-1 min-w-[220px] max-w-md'},\n Input\n ? h(Input, {value: query, onChange: setQuery, placeholder:'Search playbooks by name or description…', icon:'search'})\n : h('div', {className:'flex items-center gap-2 bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2'},\n Icon && h(Icon, {name:'search', size:16, className:'text-text-muted'}),\n h('input', {\n value: query, onChange: e => setQuery(e.target.value),\n placeholder:'Search playbooks by name or description…',\n className:'flex-1 bg-transparent border-none text-on-surface text-[13px] outline-none placeholder:text-text-muted'\n })\n )\n ),\n h('div', {className:'flex items-center gap-2 text-[11px]'},\n loading && Spinner && h(Spinner, {size:14}),\n h(Chip, {label: enabledCount + ' enabled', className:'bg-secondary/10 text-secondary border-secondary/25'}),\n h(Chip, {label: total + ' total', className:'bg-surface-container-high/70 text-text-muted border-border-subtle'})\n )\n ),\n\n // What-is-this explainer — honest, no metrics. Tells the user what playbooks are\n // and what \"Apply in Chat\" actually does (it seeds the assistant, it isn't a job).\n !error && h('div', {className:'flex items-start gap-2.5 p-md rounded-lg bg-primary/5 border border-primary/20 text-[12px] leading-relaxed text-on-surface-variant'},\n Icon && h(Icon, {name:'lightbulb', size:16, className:'text-primary flex-shrink-0 mt-0.5'}),\n h('p', {className:'flex-1'},\n h('span', {className:'font-semibold text-on-surface'}, 'Playbooks are reusable growth methods the AI can apply in chat.'),\n ' Enable the ones you want available in the assistant\\\\'s context, then click ',\n h('span', {className:'font-semibold text-primary'}, 'Apply in Chat'),\n ' to seed the assistant with a playbook and draft against your company profile.'\n )\n ),\n\n // Error\n error && h('div', {className:'p-md rounded-lg bg-error/5 border border-error/30 text-error text-[13px] flex items-center gap-2'},\n Icon && h(Icon, {name:'error', size:16, className:'flex-shrink-0'}),\n h('span', {className:'flex-1'}, error),\n Btn\n ? h(Btn, {onClick: load, variant:'ghost', size:'sm'}, 'Retry')\n : h('button', {onClick: load, className:'px-2.5 py-1 rounded border border-error/40 bg-error/10 text-[11px] text-error hover:bg-error/20'}, 'Retry')\n ),\n\n // Loading skeleton\n loading && !categories.length && !error && h('div', {className:'grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-md'},\n [0,1,2,3,4,5].map(i => h('div', {\n key:i,\n className:'rounded-xl border border-border-subtle h-[180px]',\n style:{background:'linear-gradient(90deg,#1c1b1e 25%,#2a2a2d 50%,#1c1b1e 75%)', backgroundSize:'200% 100%', animation:'shimmer 1.5s infinite'}\n }))\n ),\n\n // Empty: no skills at all\n !loading && !error && !categories.length && h('div', {className:'flex flex-col items-center justify-center text-center py-16 text-text-muted'},\n Icon && h(Icon, {name:'auto_stories', size:36, className:'text-text-muted/50 mb-3'}),\n h('div', {className:'text-[14px] font-semibold text-on-surface-variant'}, 'No playbooks yet'),\n h('div', {className:'text-[12px] mt-1'}, 'Marketing skills will appear here once they are loaded.')\n ),\n\n // Empty: filtered out by search\n !loading && !error && categories.length > 0 && matchCount === 0 && h('div', {className:'flex flex-col items-center justify-center text-center py-16 text-text-muted'},\n Icon && h(Icon, {name:'search_off', size:34, className:'text-text-muted/50 mb-3'}),\n h('div', {className:'text-[14px] font-semibold text-on-surface-variant'}, 'No playbooks match \"' + query + '\"'),\n h('button', {\n onClick: () => setQuery(''),\n className:'mt-2 text-[11px] uppercase tracking-widest font-bold text-text-muted hover:text-primary transition-colors'\n }, 'Clear search')\n ),\n\n // Category sections\n filtered.map(cat => h('section', {key: cat.category, className:'space-y-md'},\n SectionHeader\n ? h(SectionHeader, {\n icon:'folder',\n title: cat.category,\n action: h('span', {className:'text-[11px] font-mono-data text-text-muted'}, cat.skills.length + (cat.skills.length === 1 ? ' skill' : ' skills'))\n })\n : h('div', {className:'flex items-center gap-2 border-b border-border-subtle pb-2'},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + catAccent(cat.category).dot}),\n h('h3', {className:'text-[15px] font-bold text-on-surface'}, cat.category),\n h('span', {className:'text-[11px] font-mono-data text-text-muted'}, '(' + cat.skills.length + ')')\n ),\n h('div', {className:'grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-md'},\n cat.skills.map(s => h(SkillCard, {\n key: s.name, skill: s,\n onToggle: toggleSkill,\n onRun: runSkill\n }))\n )\n ))\n );\n}\n`;\n}\n",[284],"b1874c68-5e66-11f1-bd5f-1607ee4eb77e","frontend_settings.ts","2ed92908-5821-11f1-92db-ee650bb23af1",884,["D",1780393058305],30,"// SettingsPage extracted from frontend_js2.ts (gap closure Phase 1 / Step 1 / C1).\n// Frees up frontend_js2.ts which had ~25 chars of headroom under val.town's 80K hard limit.\n// Served at /api/app-settings and dynamically imported by frontend_js.ts.\n//\n// Dependencies come from `window.__nexus` (set by frontend_js.ts on boot):\n// INTEGRATIONS, INTEGRATION_META, INTEGRATION_FIELDS, GOOGLE_SHARED,\n// Icon, BrandIcon, Btn, Input, Toggle, Spinner, SectionHeader, PageHeader.\n\nexport function getSettingsJS(): string {\n return `\nimport React, { useState, useEffect, useRef } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// QA fix: 4 real provider presets (was just OpenAI + Claude). Each card now corresponds\n// 1:1 with a provider the callLLM dispatcher actually supports.\nconst MODEL_PRESETS = [\n { id:'anthropic', name:'Claude Sonnet 4.6', meta:'Anthropic - 200k context', provider:'anthropic', model:'claude-sonnet-4-6', accent:'#c0c1ff', icon:'auto_awesome' },\n { id:'openai', name:'GPT-4o', meta:'OpenAI - 128k context', provider:'openai', model:'gpt-4o', accent:'#10a37f', icon:'flash_on' },\n { id:'gemini', name:'Gemini 3 Pro', meta:'Google - 1M context - reasoning', provider:'gemini', model:'gemini-3-pro-preview', accent:'#4285f4', icon:'diamond' },\n { id:'custom', name:'Custom Endpoint', meta:'Any OpenAI-compatible API', provider:'custom', model:'your-model', accent:'#d0bcff', icon:'extension' },\n];\n\n// D1: Customer Cohorts panel - list + add (label, size, ARPU, retention_curve CSV) + per-row LTV.\nfunction CohortPanel({showToast}) {\n const {Icon, Btn, Input, SectionHeader} = N();\n const [summary, setSummary] = useState({cohorts:[], blended_ltv:0, total_customers:0});\n const [draft, setDraft] = useState({label:'', size:'', arpu:'', curve:''});\n const [busy, setBusy] = useState(false);\n // QA fix: try the new /api/aio/cohorts path first, fall back to legacy /api/cohorts.\n // Also normalize the response so summary always has a cohorts array — a 404 JSON body\n // like {error:'...'} was previously overwriting state and crashing summary.cohorts.length.\n const normalize = (d) => ({\n cohorts: Array.isArray(d && d.cohorts) ? d.cohorts : [],\n blended_ltv: (d && Number(d.blended_ltv)) || 0,\n total_customers: (d && Number(d.total_customers)) || 0,\n });\n const tryFetch = async () => {\n for (const path of ['/api/aio/cohort-summary', '/api/aio/cohorts', '/api/cohorts']) {\n try {\n const r = await fetch(path);\n if (!r.ok) continue;\n const d = await r.json();\n return d;\n } catch {}\n }\n return null;\n };\n const load = () => tryFetch().then(d => setSummary(normalize(d)));\n // Wrap in a non-returning arrow - load() returns a Promise and React-18 would treat it\n // as the effect's cleanup function (then crash on unmount with \"t is not a function\").\n useEffect(() => { load(); }, []);\n // Try-each pattern for write endpoints too — POST/DELETE try the new path first, fall back.\n const postCohort = async (body) => {\n for (const path of ['/api/aio/cohorts', '/api/cohorts']) {\n const r = await fetch(path, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(() => null);\n if (r && r.ok) return true;\n }\n return false;\n };\n const deleteCohortRemote = async (id) => {\n for (const path of ['/api/aio/cohorts/' + id, '/api/cohorts/' + id]) {\n const r = await fetch(path, {method:'DELETE'}).catch(() => null);\n if (r && r.ok) return true;\n }\n return false;\n };\n const addCohort = async () => {\n if (!draft.label.trim() || !draft.size || !draft.arpu) return;\n setBusy(true);\n try {\n const retention_curve = draft.curve.split(/[, ]+/).map(x => parseFloat(x)).filter(n => Number.isFinite(n));\n const ok = await postCohort({\n cohort_label: draft.label.trim(),\n cohort_size: parseInt(draft.size, 10) || 0,\n arpu: parseFloat(draft.arpu) || 0,\n retention_curve,\n });\n setDraft({label:'', size:'', arpu:'', curve:''});\n await load();\n showToast && showToast(ok ? 'Cohort added' : 'Cohort endpoint not reachable', ok ? 'success' : 'error');\n } catch { showToast && showToast('Failed to add cohort', 'error'); }\n finally { setBusy(false); }\n };\n const delCohort = async (id) => {\n await deleteCohortRemote(id);\n await load();\n };\n return h('section', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h(SectionHeader, {icon:'group', title:'Customer Cohorts (LTV)', color:'secondary',\n action: h('span', {className:'text-[11px] text-text-muted font-mono-data'},\n summary.total_customers ? ('Blended LTV $' + Math.round(summary.blended_ltv) + ' - ' + summary.total_customers + ' customers') : 'No cohorts yet'\n )\n }),\n h('div', {className:'grid grid-cols-1 sm:grid-cols-4 gap-2.5'},\n h(Input, {label:'Label', value: draft.label, onChange: v => setDraft(d => ({...d, label: v})), placeholder:'2025-Q1 SaaS'}),\n h(Input, {label:'Size', type:'text', value: draft.size, onChange: v => setDraft(d => ({...d, size: v.replace(/[^0-9]/g,'')})), placeholder:'100'}),\n h(Input, {label:'ARPU ($/mo)', type:'text', value: draft.arpu, onChange: v => setDraft(d => ({...d, arpu: v.replace(/[^0-9.]/g,'')})), placeholder:'49'}),\n h(Input, {label:'Retention curve (CSV)', type:'text', value: draft.curve, onChange: v => setDraft(d => ({...d, curve: v})), placeholder:'100,82,71,65,60'})\n ),\n h('div', {className:'flex justify-end'},\n h(Btn, {onClick: addCohort, variant:'primary', size:'sm', disabled: busy},\n h(Icon, {name:'add', size:14}), busy ? 'Adding-' : 'Add cohort'\n )\n ),\n summary.cohorts.length > 0 && h('div', {className:'border border-border-subtle rounded-lg overflow-hidden'},\n h('div', {className:'grid grid-cols-12 gap-2 px-3 py-2 text-[10px] uppercase tracking-widest text-text-muted border-b border-border-subtle bg-surface-container/40'},\n h('div', {className:'col-span-4'}, 'Cohort'),\n h('div', {className:'col-span-2 text-right'}, 'Size'),\n h('div', {className:'col-span-2 text-right'}, 'ARPU'),\n h('div', {className:'col-span-2 text-right'}, 'Survival'),\n h('div', {className:'col-span-2 text-right'}, 'LTV')\n ),\n summary.cohorts.map(c => h('div', {key: c.id, className:'grid grid-cols-12 gap-2 px-3 py-2 text-[12px] border-b border-border-subtle/50 last:border-0 items-center'},\n h('div', {className:'col-span-4 truncate font-semibold text-on-surface flex items-center gap-2'},\n h('span', null, c.cohort_label),\n h('button', {onClick: () => delCohort(c.id), className:'text-text-muted hover:text-error transition-colors'},\n h(Icon, {name:'close', size:12})\n )\n ),\n h('div', {className:'col-span-2 text-right font-mono-data text-on-surface-variant'}, c.cohort_size),\n h('div', {className:'col-span-2 text-right font-mono-data text-on-surface-variant'}, '$' + c.arpu.toFixed(0)),\n h('div', {className:'col-span-2 text-right font-mono-data text-on-surface-variant'}, (c.survival * 100).toFixed(0) + '%'),\n h('div', {className:'col-span-2 text-right font-mono-data font-bold text-secondary'}, '$' + Math.round(c.ltv))\n ))\n )\n );\n}\n\n// Growth Methodology — pill selector for prioritization method (ICE | RICE | WSJF),\n// collapsible per-stage funnel metric overrides, collapsible custom-KPI builder.\n// Autosaves to /api/method-config on every change.\nfunction GrowthMethodologyPanel({showToast}) {\n const {Icon, Btn, Input, SectionHeader} = N();\n const INTEGRATIONS = (N().INTEGRATIONS || ['google','ahrefs','ga4','gsc','gmail','linkedin','outlook','wordpress','youtube','producthunt']);\n const [methods, setMethods] = useState([]); // static metadata from /api/method-config/methods\n const [cfg, setCfg] = useState({prioritization_method: 'ICE', funnel_metric_overrides: {TOFU:[], MOFU:[], BOFU:[]}, custom_kpis: []});\n const [loaded, setLoaded] = useState(false);\n const [overridesOpen, setOverridesOpen] = useState(false);\n const [kpisOpen, setKpisOpen] = useState(false);\n const [draftKpi, setDraftKpi] = useState({name:'', formula:'', unit:'count'});\n const [savedAt, setSavedAt] = useState(null);\n const saveTimer = useRef(null);\n\n useEffect(() => {\n Promise.all([\n fetch('/api/method-config').then(r => r.ok ? r.json() : null).catch(() => null),\n fetch('/api/method-config/methods').then(r => r.ok ? r.json() : null).catch(() => null),\n ]).then(([c, m]) => {\n if (c && typeof c === 'object') {\n setCfg({\n prioritization_method: c.prioritization_method || 'ICE',\n funnel_metric_overrides: c.funnel_metric_overrides || {TOFU:[], MOFU:[], BOFU:[]},\n custom_kpis: Array.isArray(c.custom_kpis) ? c.custom_kpis : [],\n });\n }\n if (m && Array.isArray(m.methods)) setMethods(m.methods);\n setLoaded(true);\n });\n }, []);\n\n // Debounced autosave - every cfg mutation triggers POST after 400ms quiet.\n const scheduleSave = (next) => {\n clearTimeout(saveTimer.current);\n saveTimer.current = setTimeout(async () => {\n try {\n const r = await fetch('/api/method-config', {\n method: 'POST', headers: {'Content-Type':'application/json'},\n body: JSON.stringify(next),\n });\n if (r.ok) { setSavedAt(Date.now()); }\n } catch {}\n }, 400);\n };\n\n const update = (patch) => {\n setCfg(prev => {\n const next = {...prev, ...patch};\n scheduleSave(next);\n return next;\n });\n };\n\n const setMethod = (key) => update({prioritization_method: key});\n\n const addOverride = (stage) => {\n const overrides = {...cfg.funnel_metric_overrides};\n overrides[stage] = [...(overrides[stage] || []), {integration:'gsc', metric:'clicks', weight:1}];\n update({funnel_metric_overrides: overrides});\n };\n const removeOverride = (stage, idx) => {\n const overrides = {...cfg.funnel_metric_overrides};\n overrides[stage] = (overrides[stage] || []).filter((_, i) => i !== idx);\n update({funnel_metric_overrides: overrides});\n };\n const setOverride = (stage, idx, key, val) => {\n const overrides = {...cfg.funnel_metric_overrides};\n const arr = [...(overrides[stage] || [])];\n arr[idx] = {...arr[idx], [key]: key === 'weight' ? (parseFloat(val) || 0) : val};\n overrides[stage] = arr;\n update({funnel_metric_overrides: overrides});\n };\n\n const addKpi = () => {\n if (!draftKpi.name.trim() || !draftKpi.formula.trim()) return;\n const kpis = [...cfg.custom_kpis, {name: draftKpi.name.trim(), formula: draftKpi.formula.trim(), unit: draftKpi.unit || 'count'}];\n setDraftKpi({name:'', formula:'', unit:'count'});\n update({custom_kpis: kpis});\n showToast && showToast('Custom KPI added', 'success');\n };\n const removeKpi = (idx) => {\n update({custom_kpis: cfg.custom_kpis.filter((_, i) => i !== idx)});\n };\n\n const activeMethod = methods.find(m => m.key === cfg.prioritization_method) || null;\n const stageColors = {TOFU:'primary', MOFU:'secondary', BOFU:'tertiary'};\n\n if (!loaded) {\n return h('section', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h(SectionHeader, {icon:'insights', title:'Growth Methodology', color:'primary'}),\n h('div', {className:'text-[12px] text-text-muted italic'}, 'Loading methods-')\n );\n }\n\n return h('section', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h(SectionHeader, {icon:'insights', title:'Growth Methodology', color:'primary',\n action: savedAt\n ? h('span', {className:'inline-flex items-center gap-1 text-[10px] text-secondary font-semibold uppercase tracking-widest'},\n h(Icon, {name:'check_circle', size:12, filled:true}), 'Saved'\n )\n : h('span', {className:'text-[10px] text-text-muted'}, 'Autosaves on change')\n }),\n\n // Pill selector ----------------------------------------------------------\n h('div', {className:'space-y-2.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'},\n 'Prioritization Method'\n ),\n h('div', {className:'flex flex-wrap gap-2'},\n methods.map(m => {\n const on = cfg.prioritization_method === m.key;\n return h('button', {\n key: m.key, onClick: () => setMethod(m.key), type:'button',\n className:'px-3 py-1.5 rounded-full text-[12px] font-semibold uppercase tracking-wider border transition-all ' +\n (on\n ? 'bg-primary text-on-primary border-primary shadow-md shadow-primary/20'\n : 'bg-surface-container-lowest text-on-surface-variant border-border-subtle hover:border-primary/40')\n }, m.key);\n })\n ),\n activeMethod && h('div', {className:'p-3 rounded-lg bg-surface-container/40 border border-border-subtle space-y-1.5'},\n h('div', {className:'flex items-baseline justify-between gap-2'},\n h('span', {className:'text-[12px] font-bold text-on-surface'}, activeMethod.name),\n h('span', {className:'text-[10px] text-text-muted font-mono-data truncate'}, activeMethod.range)\n ),\n h('div', {className:'text-[12px] text-secondary font-mono-data'}, activeMethod.formula),\n h('div', {className:'text-[11px] text-text-medium-contrast leading-relaxed'}, activeMethod.why)\n )\n ),\n\n // Funnel metric overrides (collapsed by default) -------------------------\n h('div', {className:'border-t border-border-subtle/50 pt-md space-y-2'},\n h('button', {\n onClick: () => setOverridesOpen(!overridesOpen), type:'button',\n className:'w-full flex items-center justify-between text-left'\n },\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[12px] font-bold text-on-surface'}, 'Funnel metric overrides ',\n h('span', {className:'text-[10px] text-text-muted font-normal'}, '(advanced)')\n ),\n h('span', {className:'text-[10px] text-text-muted'},\n 'Override which metrics drive TOFU/MOFU/BOFU health. Empty = use built-in AARRR map.'\n )\n ),\n h(Icon, {name: overridesOpen ? 'expand_less' : 'expand_more', size:18})\n ),\n overridesOpen && h('div', {className:'space-y-md pt-2'},\n ['TOFU','MOFU','BOFU'].map(stage => {\n const rows = cfg.funnel_metric_overrides[stage] || [];\n return h('div', {key: stage, className:'border border-border-subtle rounded-lg overflow-hidden'},\n h('div', {className:'flex items-center justify-between px-3 py-2 bg-surface-container/40 border-b border-border-subtle'},\n h('div', {className:'flex items-center gap-2'},\n h('span', {className:'inline-block w-1.5 h-1.5 rounded-full bg-' + stageColors[stage]}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-on-surface'}, stage),\n h('span', {className:'text-[10px] text-text-muted'}, rows.length + ' override' + (rows.length === 1 ? '' : 's'))\n ),\n h('button', {\n onClick: () => addOverride(stage), type:'button',\n className:'text-[10px] font-semibold uppercase tracking-wider text-primary hover:text-primary/80 flex items-center gap-1'\n }, h(Icon, {name:'add', size:12}), 'Add metric')\n ),\n rows.length === 0\n ? h('div', {className:'px-3 py-2 text-[11px] text-text-muted italic'}, 'No overrides - using defaults')\n : rows.map((row, idx) =>\n h('div', {key: idx, className:'grid grid-cols-12 gap-2 px-3 py-2 border-b border-border-subtle/30 last:border-0 items-center'},\n h('select', {\n value: row.integration,\n onChange: e => setOverride(stage, idx, 'integration', e.target.value),\n className:'col-span-4 bg-surface-container-lowest border border-border-subtle rounded px-2 py-1 text-[11px] font-mono-data text-on-surface'\n }, INTEGRATIONS.map(it => h('option', {key: it, value: it}, it))),\n h('input', {\n type:'text', value: row.metric,\n onChange: e => setOverride(stage, idx, 'metric', e.target.value),\n placeholder:'metric_key',\n className:'col-span-5 bg-surface-container-lowest border border-border-subtle rounded px-2 py-1 text-[11px] font-mono-data text-on-surface'\n }),\n h('input', {\n type:'number', step:'0.1', min:'0', max:'2', value: row.weight,\n onChange: e => setOverride(stage, idx, 'weight', e.target.value),\n className:'col-span-2 bg-surface-container-lowest border border-border-subtle rounded px-2 py-1 text-[11px] font-mono-data text-on-surface text-right'\n }),\n h('button', {\n onClick: () => removeOverride(stage, idx), type:'button',\n className:'col-span-1 text-text-muted hover:text-error flex justify-center'\n }, h(Icon, {name:'close', size:14}))\n )\n )\n );\n })\n )\n ),\n\n // Custom KPI builder (collapsed by default) ------------------------------\n h('div', {className:'border-t border-border-subtle/50 pt-md space-y-2'},\n h('button', {\n onClick: () => setKpisOpen(!kpisOpen), type:'button',\n className:'w-full flex items-center justify-between text-left'\n },\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[12px] font-bold text-on-surface'}, 'Custom KPIs ',\n h('span', {className:'text-[10px] text-text-muted font-normal'}, '(advanced)')\n ),\n h('span', {className:'text-[10px] text-text-muted'},\n 'Define your own KPIs - saved to your growth config. ' + cfg.custom_kpis.length + ' defined.'\n )\n ),\n h(Icon, {name: kpisOpen ? 'expand_less' : 'expand_more', size:18})\n ),\n kpisOpen && h('div', {className:'space-y-md pt-2'},\n h('div', {className:'grid grid-cols-12 gap-2'},\n h('input', {\n type:'text', placeholder:'KPI name (e.g. Pipeline Velocity)',\n value: draftKpi.name,\n onChange: e => setDraftKpi(d => ({...d, name: e.target.value})),\n className:'col-span-4 bg-surface-container-lowest border border-border-subtle rounded px-2 py-1.5 text-[12px] text-on-surface'\n }),\n h('input', {\n type:'text', placeholder:'Formula (ga4.conversions / ga4.sessions)',\n value: draftKpi.formula,\n onChange: e => setDraftKpi(d => ({...d, formula: e.target.value})),\n className:'col-span-5 bg-surface-container-lowest border border-border-subtle rounded px-2 py-1.5 text-[12px] font-mono-data text-on-surface'\n }),\n h('select', {\n value: draftKpi.unit,\n onChange: e => setDraftKpi(d => ({...d, unit: e.target.value})),\n className:'col-span-2 bg-surface-container-lowest border border-border-subtle rounded px-2 py-1.5 text-[12px] text-on-surface'\n }, ['count','%','$','s','ratio'].map(u => h('option', {key: u, value: u}, u))),\n h('button', {\n onClick: addKpi, type:'button',\n className:'col-span-1 bg-primary text-on-primary rounded text-[12px] font-semibold uppercase tracking-wider hover:opacity-90'\n }, 'Add')\n ),\n cfg.custom_kpis.length > 0 && h('div', {className:'border border-border-subtle rounded-lg overflow-hidden'},\n cfg.custom_kpis.map((k, idx) => h('div', {key: idx, className:'grid grid-cols-12 gap-2 px-3 py-2 border-b border-border-subtle/30 last:border-0 items-center'},\n h('div', {className:'col-span-3 text-[12px] font-bold text-on-surface truncate'}, k.name),\n h('div', {className:'col-span-7 text-[11px] font-mono-data text-on-surface-variant truncate'}, k.formula),\n h('div', {className:'col-span-1 text-[10px] text-text-muted font-mono-data text-right'}, k.unit),\n h('button', {\n onClick: () => removeKpi(idx), type:'button',\n className:'col-span-1 text-text-muted hover:text-error flex justify-center'\n }, h(Icon, {name:'close', size:14}))\n ))\n )\n )\n )\n );\n}\n\nfunction PrefRow({label, desc, value, onChange}) {\n const {Toggle} = N();\n return h('div', {className:'flex items-center justify-between py-1.5'},\n h('div', {className:'flex flex-col min-w-0 pr-3'},\n h('span', {className:'text-[13px] font-bold text-on-surface'}, label),\n h('span', {className:'text-[10px] text-text-muted'}, desc)\n ),\n h(Toggle, {value, onChange})\n );\n}\n\n// Part 15.2 — Company Profile panel. Structured business identity bound to\n// GET/PUT /api/company-profile. Loads on mount; Save does a JSON PUT and toasts.\n// ADDITIVE: new self-contained panel, does not touch any existing section.\nfunction CompanyProfilePanel({showToast}) {\n const {Icon, Btn, Input, SectionHeader, Spinner} = N();\n const FIELDS = [\n {key:'name', label:'Company name', placeholder:'Acme Inc.'},\n {key:'product', label:'What we sell', placeholder:'Products / services'},\n {key:'value_proposition', label:'Positioning / value', placeholder:'Why customers choose us'},\n {key:'icp', label:'Ideal customer (ICP)', placeholder:'Segments, personas, who we sell to'},\n {key:'differentiators', label:'Differentiators', placeholder:'What sets us apart'},\n {key:'competitors', label:'Competitors', placeholder:'Who we compete with'},\n {key:'pricing', label:'Pricing', placeholder:'Plans, model, price points'},\n {key:'voice', label:'Voice / tone', placeholder:\"Tone + brand do's & don'ts\"},\n {key:'goals', label:'Goals / targets', placeholder:'What we are trying to achieve'},\n ];\n const empty = () => FIELDS.reduce((o, f) => { o[f.key] = ''; return o; }, {});\n const [form, setForm] = useState(empty);\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n // ADDITIVE (Part 15.2b): AI enrich + company-document upload.\n const [enriching, setEnriching] = useState(false);\n const [uploading, setUploading] = useState(false);\n const uploadRef = useRef(null);\n\n useEffect(() => {\n fetch('/api/company-profile')\n .then(r => r.ok ? r.json() : null)\n .then(p => {\n if (p && typeof p === 'object') {\n setForm(prev => {\n const next = {...prev};\n FIELDS.forEach(f => { if (typeof p[f.key] === 'string') next[f.key] = p[f.key]; });\n return next;\n });\n }\n })\n .catch(() => {})\n .finally(() => setLoading(false));\n }, []);\n\n const setField = (key, v) => setForm(f => ({...f, [key]: v}));\n\n const save = async () => {\n setSaving(true);\n try {\n const body = {};\n FIELDS.forEach(f => { body[f.key] = form[f.key] || ''; });\n const r = await fetch('/api/company-profile', {\n method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)\n });\n if (!r.ok) throw new Error('Failed');\n showToast && showToast('Company profile saved', 'success');\n } catch (e) {\n showToast && showToast('Failed to save company profile', 'error');\n } finally { setSaving(false); }\n };\n\n // AI Enrich — POST /api/company-profile/enrich, then MERGE the returned\n // enriched profile into form state so the user reviews suggestions and\n // clicks the existing Save. Only fills fields the model returned as strings.\n const enrich = async () => {\n setEnriching(true);\n try {\n const r = await fetch('/api/company-profile/enrich', {\n method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({})\n });\n const data = await r.json().catch(() => ({}));\n if (!r.ok) throw new Error((data && data.error) || 'Enrichment failed');\n const enriched = (data && data.enriched && typeof data.enriched === 'object') ? data.enriched : {};\n setForm(prev => {\n const next = {...prev};\n FIELDS.forEach(f => {\n const v = enriched[f.key];\n if (typeof v === 'string' && v.trim()) next[f.key] = v;\n });\n return next;\n });\n showToast && showToast((data && data.message) || 'AI enrichment ready - review then Save', 'success');\n } catch (e) {\n showToast && showToast(e && e.message ? e.message : 'AI enrichment failed', 'error');\n } finally { setEnriching(false); }\n };\n\n // ---- Company-document upload → company-tagged global knowledge ----------\n // Extract text in-browser (txt/md/csv/json via FileReader; .pdf via pdfjs-dist;\n // .docx via mammoth — replicated inline, NO cross-module import), then POST\n // /api/knowledge with kind:'company' + empty targets so it's global context\n // the AI uses and the enrichment reads.\n const MAX_KNOWLEDGE_CHARS = 500000;\n const readTextFile = (file) => new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => resolve(String(reader.result || ''));\n reader.onerror = () => reject(new Error('Could not read file'));\n reader.readAsText(file);\n });\n const readPdfFile = async (file) => {\n const pdfjs = await import('https://esm.sh/pdfjs-dist@4.0.379/build/pdf.min.mjs');\n pdfjs.GlobalWorkerOptions.workerSrc = 'https://esm.sh/pdfjs-dist@4.0.379/build/pdf.worker.min.mjs';\n const buf = await file.arrayBuffer();\n const pdf = await pdfjs.getDocument({data: buf}).promise;\n const parts = [];\n for (let i = 1; i <= pdf.numPages; i++) {\n const page = await pdf.getPage(i);\n const tc = await page.getTextContent();\n parts.push(tc.items.map(it => (it && it.str) || '').join(' '));\n }\n return parts.join('\\\\n\\\\n');\n };\n const readDocxFile = async (file) => {\n const mammoth = await import('https://esm.sh/mammoth@1.6.0/mammoth.browser.min.js');\n const lib = (mammoth && mammoth.default) ? mammoth.default : mammoth;\n const buf = await file.arrayBuffer();\n const out = await lib.extractRawText({arrayBuffer: buf});\n return (out && out.value) || '';\n };\n const onUploadContext = async (e) => {\n const file = e && e.target && e.target.files && e.target.files[0];\n if (e && e.target) e.target.value = ''; // allow re-selecting the same file\n if (!file) return;\n setUploading(true);\n showToast && showToast('Reading ' + (file.name || 'file') + '-', 'info');\n try {\n const lower = (file.name || '').toLowerCase();\n let text = '';\n if (lower.endsWith('.pdf') || file.type === 'application/pdf') {\n text = await readPdfFile(file);\n } else if (lower.endsWith('.docx') || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {\n text = await readDocxFile(file);\n } else {\n text = await readTextFile(file);\n }\n text = (text || '').trim();\n if (!text) throw new Error('No readable text found in file');\n if (text.length > MAX_KNOWLEDGE_CHARS) text = text.slice(0, MAX_KNOWLEDGE_CHARS);\n const r = await fetch('/api/knowledge', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({name: file.name || 'Company context', kind:'company', content: text, enabled: true, targets: []})\n });\n if (!r.ok) throw new Error('Upload failed');\n showToast && showToast('Added \"' + (file.name || 'file') + '\" to company knowledge', 'success');\n } catch (err) {\n showToast && showToast('Upload failed: ' + (err && err.message ? err.message : 'could not parse file'), 'error');\n } finally { setUploading(false); }\n };\n\n return h('section', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h(SectionHeader, {icon:'badge', title:'Company Profile', color:'primary',\n action: h('span', {className:'text-[10px] text-text-muted'}, 'Who this business is - injected into every AI surface')\n }),\n loading\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'Loading profile-')\n : h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-md'},\n FIELDS.map(f =>\n h(Input, {\n key: f.key, label: f.label, type:'text',\n value: form[f.key] || '',\n onChange: v => setField(f.key, v),\n placeholder: f.placeholder\n })\n )\n ),\n // Hidden file input — extracts text in-browser, POSTs as company knowledge.\n h('input', {\n ref: uploadRef, type:'file', className:'hidden',\n accept:'.txt,.md,.csv,.json,.pdf,.docx',\n onChange: onUploadContext\n }),\n h('div', {className:'flex flex-wrap items-center justify-between gap-2.5 pt-1'},\n h('div', {className:'flex items-center gap-2.5'},\n h(Btn, {\n onClick: () => uploadRef.current && uploadRef.current.click(),\n variant:'ghost', size:'sm', disabled: uploading || loading,\n title:'Upload a doc (.txt .md .csv .json .pdf .docx) as company-tagged knowledge the AI uses'\n },\n uploading ? h(Spinner, {size:13}) : h(Icon, {name:'upload_file', size:14}),\n uploading ? 'Uploading-' : 'Upload context'\n ),\n h(Btn, {\n onClick: enrich, variant:'secondary', size:'sm',\n disabled: enriching || loading,\n title:'Use AI to draft/fill profile fields from your knowledge - review, then Save'\n },\n enriching ? h(Spinner, {size:13}) : h(Icon, {name:'auto_awesome', size:14}),\n enriching ? 'Enriching-' : 'AI Enrich'\n )\n ),\n h(Btn, {onClick: save, variant:'primary', size:'sm', disabled: saving || loading || enriching},\n saving ? h(Spinner, {size:13}) : h(Icon, {name:'save', size:14}),\n saving ? 'Saving-' : 'Save profile'\n )\n )\n );\n}\n\n// Part 15.3 — Memory panel. Lists GET /api/memory; Add (POST {content}),\n// per-row pin (PUT /api/memory/{id} {pinned}) + delete (DELETE /api/memory/{id}).\n// ADDITIVE: new self-contained panel, does not touch any existing section.\nfunction MemoryPanel({showToast}) {\n const {Icon, Btn, Input, SectionHeader} = N();\n const [items, setItems] = useState([]);\n const [draft, setDraft] = useState('');\n const [busy, setBusy] = useState(false);\n\n const load = () =>\n fetch('/api/memory')\n .then(r => r.ok ? r.json() : [])\n .then(d => setItems(Array.isArray(d) ? d : []))\n .catch(() => {});\n useEffect(() => { load(); }, []);\n\n const add = async () => {\n const content = draft.trim();\n if (!content) return;\n setBusy(true);\n try {\n const r = await fetch('/api/memory', {\n method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({content})\n });\n if (!r.ok) throw new Error('Failed');\n setDraft('');\n await load();\n showToast && showToast('Memory added', 'success');\n } catch (e) {\n showToast && showToast('Failed to add memory', 'error');\n } finally { setBusy(false); }\n };\n\n const togglePin = async (m) => {\n try {\n const r = await fetch('/api/memory/' + m.id, {\n method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({pinned: !m.pinned})\n });\n if (!r.ok) throw new Error('Failed');\n await load();\n } catch (e) { showToast && showToast('Failed to update memory', 'error'); }\n };\n\n const remove = async (m) => {\n try {\n const r = await fetch('/api/memory/' + m.id, {method:'DELETE'});\n if (!r.ok) throw new Error('Failed');\n await load();\n showToast && showToast('Memory removed', 'info');\n } catch (e) { showToast && showToast('Failed to remove memory', 'error'); }\n };\n\n return h('section', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h(SectionHeader, {icon:'psychology', title:'Memory', color:'secondary',\n action: h('span', {className:'text-[11px] text-text-muted font-mono-data'},\n items.length ? (items.length + ' item' + (items.length === 1 ? '' : 's')) : 'No memory yet'\n )\n }),\n h('div', {className:'flex items-end gap-2.5'},\n h('div', {className:'flex-1'},\n h(Input, {\n label:'Add a memory', type:'text', value: draft,\n onChange: v => setDraft(v),\n placeholder:'A durable fact about this business the AI should remember'\n })\n ),\n h(Btn, {onClick: add, variant:'primary', size:'sm', disabled: busy || !draft.trim()},\n h(Icon, {name:'add', size:14}), busy ? 'Adding-' : 'Add'\n )\n ),\n items.length > 0 && h('div', {className:'border border-border-subtle rounded-lg overflow-hidden'},\n items.map(m => h('div', {\n key: m.id,\n className:'flex items-center gap-2 px-3 py-2 text-[12px] border-b border-border-subtle/50 last:border-0'\n },\n h('span', {\n className:'flex-shrink-0 px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-widest border ' +\n (m.pinned ? 'bg-primary/10 text-primary border-primary/30' : 'bg-surface-container/60 text-text-muted border-border-subtle')\n }, m.type || 'fact'),\n h('span', {className:'flex-1 min-w-0 truncate text-on-surface'}, m.content),\n m.pinned && h(Icon, {name:'push_pin', size:12, filled:true, className:'text-primary flex-shrink-0'}),\n h('button', {\n onClick: () => togglePin(m),\n title: m.pinned ? 'Unpin' : 'Pin',\n className:'flex-shrink-0 text-text-muted hover:text-primary transition-colors'\n }, h(Icon, {name: m.pinned ? 'push_pin' : 'push_pin', size:14, filled: !!m.pinned})),\n h('button', {\n onClick: () => remove(m),\n title:'Delete',\n className:'flex-shrink-0 text-text-muted hover:text-error transition-colors'\n }, h(Icon, {name:'close', size:14}))\n ))\n )\n );\n}\n\nexport function SettingsPage({integrations, setIntegrations, llmConfig, setLlmConfig, showToast}) {\n const {INTEGRATIONS, INTEGRATION_META, INTEGRATION_FIELDS, GOOGLE_SHARED,\n Icon, BrandIcon, Btn, Input, Spinner, SectionHeader, PageHeader} = N();\n const [llmForm, setLlmForm] = useState({\n provider: llmConfig?.provider || 'anthropic',\n apiKey: llmConfig?.api_key || '',\n model: llmConfig?.model || 'claude-sonnet-4-6',\n endpoint: llmConfig?.endpoint || '',\n });\n const [llmSaving, setLlmSaving] = useState(false);\n const [dirty, setDirty] = useState(false);\n // QA fix: removed cosmetic secondaryKey state - old UI had two key inputs but only one\n // was wired. New UI shows one key input bound to the active provider (per-provider storage).\n const [temperature, setTemperature] = useState(0.7);\n const [freqPenalty, setFreqPenalty] = useState(0.5);\n const [intFields, setIntFields] = useState(() => {\n const init = {};\n (INTEGRATIONS || []).forEach(name => {\n init[name] = {};\n ((INTEGRATION_FIELDS || {})[name] || []).forEach(f => { init[name][f.key] = ''; });\n });\n return init;\n });\n const [intSaving, setIntSaving] = useState({});\n const [expandedInt, setExpandedInt] = useState(null);\n const [lastSavedAt, setLastSavedAt] = useState(null);\n const [prefsLocal, setPrefsLocal] = useState({\n ultraDensity: true, translucency: true, mono: false,\n hardwareAccel: true,\n });\n // D2 + D1 + D4: extra config inputs (pipeline/quota for coverage, retention for LTV/MER)\n const [roiConfig, setRoiConfig] = useState({avg_deal_size:'', est_marketing_spend:'', pipeline_value:'', sales_quota:'', retention_months:''});\n const [autoSyncSec, setAutoSyncSec] = useState(60); // B4: drives funnel/feed polling\n useEffect(() => {\n fetch('/api/config').then(r => r.json()).then(cfg => {\n if (cfg.workspace_prefs && typeof cfg.workspace_prefs === 'object') {\n setPrefsLocal(p => ({...p, ...cfg.workspace_prefs}));\n // B1: also apply to DOM so toggles match reality when the page opens.\n N().applyWorkspacePrefs && N().applyWorkspacePrefs(cfg.workspace_prefs);\n }\n if (cfg.avg_deal_size != null) setRoiConfig(rc => ({...rc, avg_deal_size: String(cfg.avg_deal_size)}));\n if (cfg.est_marketing_spend != null) setRoiConfig(rc => ({...rc, est_marketing_spend: String(cfg.est_marketing_spend)}));\n if (cfg.pipeline_value != null) setRoiConfig(rc => ({...rc, pipeline_value: String(cfg.pipeline_value)}));\n if (cfg.sales_quota != null) setRoiConfig(rc => ({...rc, sales_quota: String(cfg.sales_quota)}));\n if (cfg.retention_months != null) setRoiConfig(rc => ({...rc, retention_months: String(cfg.retention_months)}));\n if (cfg.temperature != null) setTemperature(parseFloat(cfg.temperature));\n if (cfg.frequency_penalty != null) setFreqPenalty(parseFloat(cfg.frequency_penalty));\n if (cfg.auto_sync_seconds != null) setAutoSyncSec(parseInt(cfg.auto_sync_seconds, 10) || 60);\n }).catch(() => {});\n }, []);\n const persistPrefs = useRef(null);\n const saveCfg = (k, v) => fetch('/api/config',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({[k]:v})});\n const saveRoiConfig = async () => {\n await Promise.all([\n saveCfg('avg_deal_size', parseFloat(roiConfig.avg_deal_size)||0),\n saveCfg('est_marketing_spend', parseFloat(roiConfig.est_marketing_spend)||0),\n // D2 + D1: pipeline coverage + retention months for LTV\n ...(roiConfig.pipeline_value !== '' ? [saveCfg('pipeline_value', parseFloat(roiConfig.pipeline_value)||0)] : []),\n ...(roiConfig.sales_quota !== '' ? [saveCfg('sales_quota', parseFloat(roiConfig.sales_quota)||0)] : []),\n ...(roiConfig.retention_months !== '' ? [saveCfg('retention_months', parseFloat(roiConfig.retention_months)||12)] : []),\n ]);\n showToast && showToast('Marketing + Sales inputs saved', 'success');\n };\n const purgeAll = async () => {\n if (prompt('Type PURGE to wipe notes/cache/history/baselines/tasks (keeps integrations + LLM):') !== 'PURGE') return;\n const r = await fetch('/api/admin/purge',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({confirm:'PURGE'})});\n showToast(r.ok?'Data purged':'Purge failed', r.ok?'info':'error');\n };\n const removeDemoData = async () => {\n try {\n const s = await fetch('/api/admin/seed-status').then(r => r.json()).catch(() => null);\n const total = s && s.ok ? (s.total || 0) : 0;\n if (!total) { showToast('No demo data found','info'); return; }\n const parts = Object.entries(s.counts || {}).filter(([,n]) => Number(n) > 0).map(([k,n]) => k+':'+n).join(', ');\n if (!window.confirm('Found ' + total + ' demo rows (' + parts + '). Remove them? This cannot be undone.')) return;\n const r = await fetch('/api/admin/cleanup-mock',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({confirm:'CLEANUP'})});\n const j = await r.json().catch(() => ({}));\n if (r.ok && j.ok) showToast('Removed ' + (j.total||0) + ' demo rows','success');\n else showToast('Cleanup failed','error');\n } catch (e) { showToast('Cleanup error','error'); }\n };\n\n useEffect(() => {\n const f = {};\n integrations.forEach(ig => {\n f[ig.name] = {};\n let ec = ig.extra_config || {};\n if (typeof ec === 'string') { try { ec = JSON.parse(ec); } catch (e) { ec = {}; } }\n if (ec.target) f[ig.name].target = ec.target;\n if (ec.property_id) f[ig.name].propertyId = ec.property_id;\n if (ec.site_url) f[ig.name].siteUrl = ec.site_url;\n if (ec.client_id) f[ig.name].clientId = ec.client_id;\n if (ec.redirect_uri) f[ig.name].redirectUri = ec.redirect_uri;\n if (ec.youtube_channels) f[ig.name].ytChannels = ec.youtube_channels;\n });\n setIntFields(prev => {\n const u = {...prev};\n Object.keys(f).forEach(n => { u[n] = {...u[n], ...f[n]}; });\n return u;\n });\n }, [integrations]);\n\n useEffect(() => {\n if (llmConfig) {\n setLlmForm({\n provider: llmConfig.provider || 'anthropic',\n apiKey: llmConfig.api_key || '',\n model: llmConfig.model || 'claude-sonnet-4-6',\n endpoint: llmConfig.endpoint || '',\n });\n }\n }, [llmConfig]);\n\n const setLlmField = (k, v) => { setLlmForm(f => ({...f, [k]: v})); setDirty(true); };\n const setIntField = (name, key, val) => setIntFields(f => ({...f, [name]: {...f[name], [key]: val}}));\n\n const discardChanges = () => {\n if (llmConfig) setLlmForm({\n provider: llmConfig.provider || 'anthropic',\n apiKey: llmConfig.api_key || '',\n model: llmConfig.model || 'claude-sonnet-4-6',\n endpoint: llmConfig.endpoint || '',\n });\n setTemperature(0.7); setFreqPenalty(0.5);\n setDirty(false);\n showToast('Pending changes discarded', 'info');\n };\n\n const selectPreset = (preset) => {\n setLlmField('provider', preset.provider);\n setLlmField('model', preset.model);\n };\n\n const saveLlm = async () => {\n setLlmSaving(true);\n try {\n // QA fix: only send api_key when user actually typed one - backend preserves the\n // per-provider key when this field is omitted (prevents accidental wipe on switch).\n const payload = {provider: llmForm.provider, model: llmForm.model, endpoint: llmForm.endpoint};\n const typedKey = (llmForm.apiKey || '').trim();\n // If apiKey looks like the masked echo from GET (ends with ***), treat as unchanged.\n if (typedKey && !typedKey.endsWith('***')) payload.api_key = typedKey;\n const res = await fetch('/api/llm/config', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(payload)\n });\n if (!res.ok) throw new Error('Failed');\n const data = await res.json();\n setLlmConfig(data);\n // Reflect server-side resolved key (masked) so the field doesn't keep showing the raw key.\n setLlmForm(f => ({...f, apiKey: data.api_key || '', endpoint: data.endpoint || '', model: data.model || f.model}));\n setLastSavedAt(Date.now());\n setDirty(false);\n showToast('Configuration committed', 'success');\n } catch (e) { showToast('Failed to save LLM config', 'error'); }\n finally { setLlmSaving(false); }\n };\n\n const disconnectIntegration = async (name) => {\n if (!confirm(\\`Disconnect \\${INTEGRATION_META[name]?.label}? This clears stored credentials.\\`)) return;\n await fetch(\\`/api/integrations/\\${name}\\`, {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({access_token: null, api_key: null, api_secret: null})\n });\n setIntegrations(prev => prev.map(i => i.name === name ? {...i, connected: false, access_token: undefined} : i));\n showToast(\\`\\${INTEGRATION_META[name]?.label} disconnected\\`, 'info');\n };\n\n const saveIntegration = async (name, opts={silent: false}) => {\n setIntSaving(s => ({...s, [name]: true}));\n try {\n const f = intFields[name] || {};\n const ex = {};\n if (f.propertyId) ex.property_id = f.propertyId;\n if (f.siteUrl) ex.site_url = f.siteUrl;\n if (f.target) ex.target = f.target;\n if (f.clientId) ex.client_id = f.clientId;\n if (f.redirectUri) ex.redirect_uri = f.redirectUri;\n if (f.ytChannels) ex.youtube_channels = String(f.ytChannels).trim();\n const pl = {};\n if (f.apiKey) pl.api_key = f.apiKey;\n if (f.apiSecret) pl.api_secret = f.apiSecret;\n if (f.accessToken) pl.access_token = f.accessToken;\n if (Object.keys(ex).length) pl.extra_config = ex;\n if (Object.keys(pl).length === 0) {\n setIntSaving(s => ({...s, [name]: false}));\n return;\n }\n const res = await fetch(\\`/api/integrations/\\${name}\\`, {\n method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(pl)\n });\n if (!res.ok) throw new Error('Failed');\n\n const fresh = await fetch('/api/integrations').then(r => r.json()).catch(() => null);\n if (Array.isArray(fresh)) setIntegrations(fresh);\n\n let verified = null;\n if (name !== 'google' && !(GOOGLE_SHARED || []).includes(name)) {\n try {\n const r = await (await fetch(\\`/api/integrations/\\${name}/data?endpoint=test\\`)).json();\n verified = r.ok === true;\n } catch {}\n }\n setLastSavedAt(Date.now());\n if (!opts.silent) {\n showToast(\n verified === true ? \\`\\${INTEGRATION_META[name].label} verified\\`\n : verified === false ? 'Saved - credentials look invalid'\n : \\`\\${INTEGRATION_META[name].label} credentials saved\\`,\n verified === false ? 'error' : 'success'\n );\n }\n // Only clear the secret inputs on an explicit save. On silent autosaves, KEEP them so a\n // follow-up autosave re-sends the key (prevents a target-only save from racing/clobbering it).\n if (!opts.silent) setIntFields(prev => ({...prev, [name]: {...prev[name], apiKey: '', apiSecret: '', accessToken: ''}}));\n } catch (e) { showToast('Save failed', 'error'); }\n finally { setIntSaving(s => ({...s, [name]: false})); }\n };\n\n const autoSaveTimers = useRef({});\n const scheduleAutoSave = (name) => {\n clearTimeout(autoSaveTimers.current[name]);\n autoSaveTimers.current[name] = setTimeout(() => saveIntegration(name, {silent: true}), 600);\n };\n\n const providerModels = {anthropic:'claude-sonnet-4-6', openai:'gpt-4o', gemini:'gemini-1.5-flash', custom:'your-model'};\n const togglePref = (k) => {\n setPrefsLocal(p => {\n const next = {...p, [k]: !p[k]};\n // B1: apply to DOM immediately so the user sees the visual change without waiting for save.\n N().applyWorkspacePrefs && N().applyWorkspacePrefs(next);\n clearTimeout(persistPrefs.current);\n persistPrefs.current = setTimeout(() => {\n fetch('/api/config', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({workspace_prefs: next})}).catch(() => {});\n }, 400);\n return next;\n });\n };\n const secondsAgo = lastSavedAt ? Math.round((Date.now() - lastSavedAt)/1000) : null;\n\n return h('div', {className:'p-lg lg:p-xl space-y-xl max-w-6xl mx-auto pb-32'},\n h(PageHeader, {\n title:'System Configuration',\n subtitle:'Manage global LLM parameters, secure authentication channels, and workspace performance settings.'\n }),\n\n h('div', {className:'grid grid-cols-1 lg:grid-cols-12 gap-lg items-start'},\n\n h('section', {className:'lg:col-span-7 glass-panel rounded-xl p-lg space-y-lg'},\n // QA fix: removed cosmetic \"System Online\" pulse-dot badge that was hardcoded true.\n // Real system health lives on SystemStatusBar (pings /api/health).\n h(SectionHeader, {icon:'neurology', title:'LLM Config', color:'primary'}),\n\n h('div', {className:'space-y-md'},\n\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Default Model Engine'),\n // QA fix: 4-card grid (was 2). All 4 providers callLLM actually supports are now selectable.\n h('div', {className:'grid grid-cols-2 sm:grid-cols-4 gap-2.5'},\n MODEL_PRESETS.map(p => {\n const on = llmForm.provider === p.provider;\n const hasKey = !!(llmConfig?.has_key && llmConfig.has_key[p.provider]);\n return h('button', {\n key: p.id, onClick: () => selectPreset(p), type:'button',\n className:'flex flex-col items-start gap-1.5 p-3 rounded-lg border text-left transition-all ' +\n (on ? 'border-primary bg-primary/5' : 'border-border-subtle bg-surface-container-lowest hover:border-outline/40')\n },\n h('div', {className:'flex items-center justify-between w-full'},\n h(Icon, {name: p.icon, size:18, className: on ? 'text-primary' : 'text-text-muted'}),\n hasKey\n ? h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-secondary'}, '- saved')\n : h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, '- empty')\n ),\n h('span', {className:'text-[12px] font-bold leading-tight ' + (on?'text-on-surface':'text-on-surface-variant')}, p.name),\n h('span', {className:'text-[10px] text-text-muted leading-tight'}, p.meta)\n );\n })\n )\n ),\n\n // QA fix: single API-key input bound to the ACTIVE provider. Placeholder + helper\n // text adapt to provider so users know exactly what to paste.\n h('div', {className:'space-y-1.5'},\n h('div', {className:'flex items-center justify-between'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'},\n 'API Key - ' + (llmForm.provider || 'anthropic')\n ),\n llmConfig?.has_key && llmConfig.has_key[llmForm.provider]\n ? h('span', {className:'text-[10px] text-secondary font-semibold'}, '- saved (leave blank to keep)')\n : h('span', {className:'text-[10px] text-text-muted'}, 'paste to save')\n ),\n h('div', {className:'flex items-center gap-2 bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 neon-stroke transition-all'},\n h(Icon, {name:'key', size:16, className:'text-text-muted'}),\n h('input', {\n type:'password',\n value: llmForm.apiKey || '',\n onChange: e => setLlmField('apiKey', e.target.value),\n placeholder: llmForm.provider === 'anthropic' ? 'sk-ant--'\n : llmForm.provider === 'openai' ? 'sk-proj--'\n : llmForm.provider === 'gemini' ? 'AIza-'\n : 'your custom token',\n className:'flex-1 bg-transparent border-none text-secondary text-[13px] font-mono-data outline-none p-0 min-w-0 placeholder:text-text-muted'\n })\n ),\n llmForm.provider === 'custom' && h('div', {className:'flex items-center gap-2 bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 mt-2'},\n h(Icon, {name:'link', size:16, className:'text-text-muted'}),\n h('input', {\n type:'text',\n value: llmForm.endpoint || '',\n onChange: e => setLlmField('endpoint', e.target.value),\n placeholder:'https://your-openai-compatible.com/v1',\n className:'flex-1 bg-transparent border-none text-on-surface text-[13px] font-mono-data outline-none p-0 min-w-0 placeholder:text-text-muted'\n })\n )\n ),\n\n h('div', {className:'grid grid-cols-1 sm:grid-cols-2 gap-md'},\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Temperature'),\n h('input', {\n type:'range', min:0, max:1, step:0.01, value: temperature,\n onChange: e => { const v=parseFloat(e.target.value); setTemperature(v); setDirty(true); saveCfg('temperature',v); },\n className:'w-full accent-primary bg-surface-variant rounded-lg h-1.5 appearance-none cursor-pointer'\n }),\n h('div', {className:'flex justify-between text-[10px] text-text-muted font-mono-data'},\n h('span', null, 'Deterministic (0.0)'),\n h('span', {className:'text-primary font-bold'}, temperature.toFixed(2)),\n h('span', null, 'Creative (1.0)')\n )\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Frequency Penalty'),\n h('input', {\n type:'range', min:0, max:1, step:0.01, value: freqPenalty,\n onChange: e => { const v=parseFloat(e.target.value); setFreqPenalty(v); setDirty(true); saveCfg('frequency_penalty',v); },\n className:'w-full accent-primary bg-surface-variant rounded-lg h-1.5 appearance-none cursor-pointer'\n }),\n h('div', {className:'flex justify-between text-[10px] text-text-muted font-mono-data'},\n h('span', null, 'None'),\n h('span', {className:'text-primary font-bold'}, freqPenalty.toFixed(2)),\n h('span', null, 'Max')\n )\n )\n ),\n\n h(Input, {label:'Model Name', value: llmForm.model, onChange: v => setLlmField('model', v), placeholder: providerModels[llmForm.provider]}),\n\n h('div', {className:'pt-md mt-md border-t border-border-subtle'},\n h('div', {className:'flex items-center justify-between mb-2'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'},\n 'Marketing ROI inputs'\n ),\n h('span', {className:'text-[10px] text-text-muted'}, '(GA4 conversions - deal size) - spend')\n ),\n h('div', {className:'grid grid-cols-2 gap-md'},\n h(Input, {\n label:'Avg Deal Size ($)', type:'text',\n value: roiConfig.avg_deal_size,\n onChange: v => setRoiConfig(rc => ({...rc, avg_deal_size: v.replace(/[^0-9.]/g,'')})),\n placeholder:'500'\n }),\n h(Input, {\n label:'Monthly Spend ($)', type:'text',\n value: roiConfig.est_marketing_spend,\n onChange: v => setRoiConfig(rc => ({...rc, est_marketing_spend: v.replace(/[^0-9.]/g,'')})),\n placeholder:'5000'\n }),\n // D1: retention drives LTV = avg_deal - retention_months\n h(Input, {\n label:'Retention (months)', type:'text',\n value: roiConfig.retention_months,\n onChange: v => setRoiConfig(rc => ({...rc, retention_months: v.replace(/[^0-9.]/g,'')})),\n placeholder:'12'\n }),\n // D2: Pipeline Coverage Ratio inputs - drives the sales-side benchmark\n h(Input, {\n label:'Pipeline Value ($)', type:'text',\n value: roiConfig.pipeline_value,\n onChange: v => setRoiConfig(rc => ({...rc, pipeline_value: v.replace(/[^0-9.]/g,'')})),\n placeholder:'150000'\n }),\n h(Input, {\n label:'Sales Quota ($/period)', type:'text',\n value: roiConfig.sales_quota,\n onChange: v => setRoiConfig(rc => ({...rc, sales_quota: v.replace(/[^0-9.]/g,'')})),\n placeholder:'50000'\n })\n ),\n h('div', {className:'mt-3 flex justify-end'},\n h(Btn, {onClick: saveRoiConfig, variant:'ghost', size:'sm'},\n h(Icon, {name:'save', size:13}), 'Save AIO inputs'\n )\n )\n )\n )\n ),\n\n h('section', {className:'lg:col-span-5 space-y-lg'},\n h('div', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h(SectionHeader, {icon:'cable', title:'Integration Auth', color:'secondary'}),\n h('div', {className:'space-y-2.5 max-h-[520px] overflow-y-auto pr-1 -mr-1'},\n (INTEGRATIONS || []).map(name => {\n const meta = INTEGRATION_META[name];\n const integ = integrations.find(i => i.name === name);\n const google = integrations.find(i => i.name === 'google');\n const outlook = integrations.find(i => i.name === 'outlook');\n const MS_SHARED = ['onedrive','teams','excel'];\n const sharesGoogle = (GOOGLE_SHARED || []).includes(name);\n const sharesMicrosoft = MS_SHARED.includes(name);\n const connected = integ?.connected || (sharesGoogle && google?.connected) || (sharesMicrosoft && outlook?.connected);\n const configured = integ?.configured || (sharesGoogle && google?.configured) || (sharesMicrosoft && outlook?.connected);\n const isWhite = name === 'google';\n const ago = integ?.updated_at\n ? Math.round((Date.now() - new Date(integ.updated_at).getTime())/3600000) + 'h ago'\n : null;\n const dotCls = connected ? 'bg-secondary' : configured ? 'bg-tertiary' : 'bg-text-muted';\n const statusText = connected\n ? (sharesGoogle && !integ?.connected ? 'Connected via Google'\n : sharesMicrosoft && !integ?.connected ? 'Connected via Outlook'\n : 'Connected' + (ago ? ' - ' + ago : ''))\n : configured ? 'Saved - awaiting OAuth'\n : sharesGoogle ? 'Inherits Google OAuth'\n : sharesMicrosoft ? 'Inherits Outlook OAuth'\n : 'Not configured';\n return h('div', {\n key: name,\n className:'bg-surface-container/50 border border-border-subtle rounded-lg p-md flex items-center justify-between gap-3 group hover:border-primary/40 transition-all'\n },\n h('div', {className:'flex items-center gap-md min-w-0 flex-1'},\n h('div', {\n className:'w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ' + (isWhite ? 'bg-white' : ''),\n style: isWhite ? {} : {background: meta.color}\n }, h(BrandIcon, {slug: meta.icon, color: isWhite ? meta.color : '#ffffff', size: 18, bare: true})),\n h('div', {className:'min-w-0 flex-1'},\n h('p', {className:'text-[13px] font-bold text-on-surface truncate'}, meta.label),\n h('div', {className:'flex items-center gap-1.5 mt-1'},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + dotCls}),\n h('span', {className:'text-[10px] text-text-muted truncate'}, statusText)\n )\n )\n ),\n (() => {\n // OAuth integrations get a Reconnect (re-authorize in place) — Outlook + its shared\n // MS services (onedrive/teams/excel) use the Microsoft flow; Google-family uses Google.\n const oauthUrl = (name === 'outlook' || sharesMicrosoft) ? '/api/auth/microsoft'\n : name === 'linkedin' ? '/api/auth/linkedin'\n : (name === 'google' || sharesGoogle) ? '/api/auth/google' : null;\n const primaryOauth = name === 'google' || name === 'outlook' || name === 'linkedin';\n if (oauthUrl) {\n return h('div', {className:'flex items-center gap-2 flex-shrink-0'},\n h('button', {\n onClick: () => { window.location.href = oauthUrl; },\n title: connected ? 'Re-authorize (keeps your data, refreshes scopes)' : 'Connect via OAuth',\n className:'text-[11px] font-semibold uppercase tracking-wider text-primary border border-primary/20 bg-primary/5 px-2 py-1 rounded hover:bg-primary/20 transition-all'\n }, connected ? 'Reconnect' : 'Connect'),\n (primaryOauth && connected) ? h('button', {\n onClick: () => disconnectIntegration(name),\n className:'text-[11px] font-semibold uppercase tracking-wider text-error border border-error/20 bg-error/5 px-2 py-1 rounded hover:bg-error/20 transition-all'\n }, 'Disconnect') : null\n );\n }\n if (connected) return h('button', {\n onClick: () => disconnectIntegration(name),\n className:'text-[11px] font-semibold uppercase tracking-wider text-error border border-error/20 bg-error/5 px-2 py-1 rounded hover:bg-error/20 transition-all flex-shrink-0'\n }, 'Disconnect');\n return h('button', {\n onClick: () => setExpandedInt(expandedInt === name ? null : name),\n className:'text-[11px] font-semibold uppercase tracking-wider text-on-surface border border-outline/30 px-2 py-1 rounded hover:bg-surface-variant transition-all flex-shrink-0'\n }, expandedInt === name ? 'Hide' : (configured ? 'Edit' : 'Connect'));\n })()\n );\n })\n )\n )\n ),\n\n h('section', {className:'lg:col-span-12 glass-panel rounded-xl p-lg'},\n h(SectionHeader, {icon:'room_preferences', title:'Workspace Preferences', color:'tertiary'}),\n h('div', {className:'grid grid-cols-1 md:grid-cols-3 gap-xl'},\n\n h('div', {className:'space-y-md'},\n h('h4', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-muted border-l-2 border-primary pl-2'}, 'Visual & Interface'),\n h('div', {className:'space-y-2.5'},\n h(PrefRow, {label:'Ultra-Density Mode', desc:'Maximize data per pixel', value: prefsLocal.ultraDensity, onChange: () => togglePref('ultraDensity')}),\n h(PrefRow, {label:'Animated Translucency', desc:'Glassmorphism effects', value: prefsLocal.translucency, onChange: () => togglePref('translucency')}),\n h(PrefRow, {label:'Code Monospacing', desc:'Force mono for all IDs', value: prefsLocal.mono, onChange: () => togglePref('mono')})\n )\n ),\n\n h('div', {className:'space-y-md'},\n h('h4', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-muted border-l-2 border-secondary pl-2'}, 'Performance Shell'),\n h('div', {className:'space-y-2.5'},\n h(PrefRow, {label:'Reduced Motion', desc:'Reduce motion & transforms', value: prefsLocal.hardwareAccel, onChange: () => togglePref('hardwareAccel')}),\n // B4: real Auto-Sync Interval - drives the funnel/feed/badge polling cadence.\n h('div', {className:'flex items-center justify-between py-1.5 border-t border-border-subtle/50'},\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[13px] font-bold'}, 'Auto-Sync Interval'),\n h('span', {className:'text-[10px] text-text-muted'}, 'Funnel + feed refresh cadence')\n ),\n h('select', {\n value: String(autoSyncSec),\n onChange: e => {\n const v = parseInt(e.target.value, 10);\n setAutoSyncSec(v);\n N().setAutoSyncSeconds && N().setAutoSyncSeconds(v);\n saveCfg('auto_sync_seconds', v);\n },\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[12px] font-mono-data text-on-surface focus:border-primary focus:outline-none'\n },\n [10,30,60,120,300].map(sec =>\n h('option', {key: sec, value: String(sec)}, sec < 60 ? sec + 's' : (sec/60) + 'm')\n )\n )\n )\n )\n ),\n\n h('div', {className:'space-y-md'},\n h('h4', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-muted border-l-2 border-tertiary pl-2'}, 'Security & Privacy'),\n h('div', {className:'space-y-2.5'},\n h('button', {onClick: purgeAll, className:'w-full flex items-center justify-between py-1.5 border-t border-border-subtle/50 hover:bg-error/5 transition-colors text-left'},\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[13px] font-bold text-error'}, 'Purge All Data'),\n h('span', {className:'text-[10px] text-text-muted'}, 'Irreversible - type PURGE to confirm')\n ),\n h(Icon, {name:'delete_forever', size:20, className:'text-error'})\n ),\n h('button', {onClick: removeDemoData, className:'w-full flex items-center justify-between py-1.5 border-t border-border-subtle/50 hover:bg-warning/5 transition-colors text-left'},\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[13px] font-bold text-warning'}, 'Remove demo data'),\n h('span', {className:'text-[10px] text-text-muted'}, 'Deletes seed agents + QA/test rows only')\n ),\n h(Icon, {name:'cleaning_services', size:20, className:'text-warning'})\n )\n )\n )\n )\n )\n ),\n\n // D1: Customer Cohorts panel - drives cohort-survival LTV in /api/cohorts\n h(CohortPanel, {showToast}),\n\n // CONFIGURABLE METRICS: Growth Methodology - prioritization method + funnel\n // metric overrides + custom KPIs. Autosaves to /api/method-config.\n h(GrowthMethodologyPanel, {showToast}),\n\n // Part 15.2 — Company Profile: structured business identity (GET/PUT /api/company-profile).\n h(CompanyProfilePanel, {showToast}),\n\n // Part 15.3 — Memory: persistent evolving business facts (GET/POST/PUT/DELETE /api/memory).\n h(MemoryPanel, {showToast}),\n\n expandedInt && (() => {\n const expIntg = integrations.find(i => i.name === expandedInt);\n const hasKey = !!expIntg?.has_api_key;\n const hasSecret = !!expIntg?.has_api_secret;\n const hasToken = !!expIntg?.has_access_token;\n const savedPlaceholder = (key) => {\n if ((key === 'apiKey' && hasKey) ||\n (key === 'apiSecret' && hasSecret) ||\n (key === 'accessToken' && hasToken)) {\n return '-------- Saved - leave empty to keep';\n }\n return null;\n };\n return h('section', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h(SectionHeader, {\n icon:'tune',\n title:'Configure - ' + INTEGRATION_META[expandedInt].label,\n color:'primary',\n action: h('div', {className:'flex items-center gap-2'},\n hasKey || hasSecret || hasToken\n ? h('span', {className:'inline-flex items-center gap-1 text-[10px] font-semibold uppercase tracking-widest text-secondary'},\n h(Icon, {name:'check_circle', size:14, filled:true}), 'Credentials on file'\n )\n : null,\n h('button', {onClick: () => setExpandedInt(null), className:'text-text-muted hover:text-on-surface ml-2'},\n h(Icon, {name:'close', size:20})\n )\n )\n }),\n expandedInt === 'google' && (() => {\n let ec = expIntg?.extra_config || {};\n if (typeof ec === 'string') { try { ec = JSON.parse(ec); } catch (e) { ec = {}; } }\n const SCOPE_LABELS = [\n ['analytics', 'GA4'], ['webmasters', 'Search Console'], ['youtube', 'YouTube'],\n ['drive', 'Drive'], ['spreadsheets', 'Sheets'], ['documents', 'Docs'],\n ['calendar', 'Calendar'], ['gmail', 'Gmail']\n ];\n const granted = Array.isArray(ec.granted_scopes) ? ec.granted_scopes : [];\n const grantedSet = granted.join(' ').toLowerCase();\n const lastAuth = ec.last_authorized_at;\n return h('div', {className:'p-3.5 rounded-lg bg-primary/5 border border-primary/20 text-[12px] text-on-surface-variant leading-relaxed space-y-2'},\n h('div', null,\n 'One Google Cloud project authorizes all 8 Workspace services. Click ',\n h('span', {className:'font-bold'}, hasToken ? '\"Re-authorize Google\"' : '\"Connect with Google\"'),\n ' to grant all Workspace tools at once.'\n ),\n hasToken && h('div', {className:'pt-2 border-t border-border-subtle/50'},\n h('div', {className:'text-[10px] uppercase tracking-widest text-text-medium-contrast mb-1.5'},\n 'Token scope coverage' + (lastAuth ? ' - authorized ' + new Date(lastAuth).toLocaleString() : '')\n ),\n h('div', {className:'flex flex-wrap gap-1.5'},\n SCOPE_LABELS.map(([key, label]) => {\n const on = grantedSet.includes(key);\n return h('span', {\n key: key,\n className:'inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider border ' +\n (on\n ? 'bg-secondary/10 text-secondary border-secondary/30'\n : 'bg-error/10 text-error border-error/30')\n }, h(Icon, {name: on?'check':'close', size:11}), label);\n })\n ),\n granted.length === 0 && h('div', {className:'mt-1.5 text-[11px] text-text-muted'},\n 'Granted scopes weren\\\\'t saved - click Re-authorize Google to refresh the list.'\n )\n )\n );\n })(),\n ((INTEGRATION_FIELDS || {})[expandedInt] || []).length === 0\n ? h('div', {className:'text-[13px] text-text-muted italic text-center py-4'},\n 'No separate credentials needed - uses Google Workspace OAuth.'\n )\n : h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-md'},\n ((INTEGRATION_FIELDS || {})[expandedInt] || []).map(f => {\n const saved = savedPlaceholder(f.key);\n return h('div', {key: f.key, onBlur: () => scheduleAutoSave(expandedInt)},\n h(Input, {\n label: f.label, type: f.type,\n value: intFields[expandedInt]?.[f.key] || '',\n onChange: v => setIntField(expandedInt, f.key, v),\n placeholder: saved || (f.type === 'password' ? '--------' : ('Enter ' + f.label.toLowerCase() + '-')),\n hint: f.hint\n })\n );\n })\n ),\n h('div', {className:'flex gap-2.5 flex-wrap items-center pt-2'},\n h(Btn, {onClick: () => saveIntegration(expandedInt), variant:'primary', size:'sm', disabled: intSaving[expandedInt]},\n intSaving[expandedInt] ? h(Spinner, {size:13}) : h(Icon, {name:'save', size:14}),\n intSaving[expandedInt] ? 'Saving-' : 'Save now'\n ),\n expandedInt === 'google' && h(Btn, {\n onClick: () => { window.location.href = '/api/auth/google'; },\n variant:'secondary', size:'sm'\n }, h(Icon, {name:'key', size:14}), hasToken ? 'Re-authorize Google' : 'Connect with Google'),\n expandedInt === 'linkedin' && h(Btn, {\n onClick: () => { window.location.href = '/api/auth/linkedin'; },\n variant:'secondary', size:'sm'\n }, h(Icon, {name:'link', size:14}), hasToken ? 'Re-authorize LinkedIn' : 'Connect with LinkedIn'),\n expandedInt === 'outlook' && h(Btn, {\n onClick: () => { window.location.href = '/api/auth/microsoft'; },\n variant:'secondary', size:'sm'\n }, h(Icon, {name:'key', size:14}), hasToken ? 'Re-authorize Outlook' : 'Connect with Outlook'),\n h('span', {className:'text-[10px] text-text-muted italic'}, '- Fields auto-save on blur')\n )\n );\n })(),\n\n h('div', {className:'fixed left-0 sm:left-64 right-0 bottom-8 z-30 px-4 pb-4 pointer-events-none'},\n h('div', {className:'max-w-6xl mx-auto flex items-center justify-between bg-surface-container-high/85 backdrop-blur-md p-3 rounded-xl border border-border-subtle pointer-events-auto shadow-2xl gap-3'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h(Icon, {\n name: dirty ? 'sync' : 'check_circle',\n size:16,\n className: dirty ? 'text-tertiary spin' : (secondsAgo != null ? 'text-secondary' : 'text-text-muted')\n }),\n h('span', {className:'text-[11px] font-semibold uppercase tracking-widest text-text-medium-contrast truncate'},\n dirty ? 'Unsaved changes' : (secondsAgo != null ? 'Last auto-saved ' + secondsAgo + 's ago' : 'All systems nominal')\n )\n ),\n h('div', {className:'flex items-center gap-md flex-shrink-0'},\n h('button', {\n onClick: discardChanges, disabled: !dirty, type:'button',\n className:'px-lg py-2 text-on-surface-variant text-[11px] font-semibold uppercase tracking-widest hover:text-on-surface transition-all disabled:opacity-40 disabled:cursor-not-allowed'\n }, 'Discard Changes'),\n h('button', {\n onClick: saveLlm, disabled: llmSaving, type:'button',\n className:'bg-primary text-on-primary text-[11px] font-semibold uppercase tracking-widest px-xl py-2 rounded-lg shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5'\n }, llmSaving && h(Spinner, {size:12, color:'#fff'}), llmSaving ? 'Committing-' : 'Commit Configuration')\n )\n )\n )\n );\n}\n`;\n}\n",[291],"d0446246-5b4e-11f1-ac08-ee650bb23af1","frontend_renderers2.ts","713d2982-5b48-11f1-8e6c-ee650bb23af1",519,["D",1780052948479],3,"// Assembles per-integration renderers from val.town/renderers/<name>.ts into the served ES module.\n// Each renderer lives in its own file; this concatenates them (val.town has no build step).\nimport { PREAMBLE } from \"./renderers/_preamble.ts\";\nimport { RENDERER as ahrefs } from \"./renderers/ahrefs.ts\";\nimport { RENDERER as onedrive } from \"./renderers/onedrive.ts\";\nimport { RENDERER as teams } from \"./renderers/teams.ts\";\nimport { RENDERER as excel } from \"./renderers/excel.ts\";\nimport { RENDERER as ga4 } from \"./renderers/ga4.ts\";\n\nexport function getRenderers2JS(): string {\n return [PREAMBLE, ahrefs, onedrive, teams, excel, ga4].join(\"\\n\\n\");\n}\n",[299],"cfddefc0-5b4e-11f1-b9cd-ee650bb23af1","frontend_renderers.ts","3e3eef40-5808-11f1-a5fb-ee650bb23af1",518,["D",1780052947805],9,"// Assembles per-integration renderers from val.town/renderers/<name>.ts into the served ES module.\n// Each renderer lives in its own file; this concatenates them (val.town has no build step).\nimport { PREAMBLE } from \"./renderers/_preamble.ts\";\nimport { RENDERER as gmail } from \"./renderers/gmail.ts\";\nimport { RENDERER as drive } from \"./renderers/drive.ts\";\nimport { RENDERER as calendar } from \"./renderers/calendar.ts\";\nimport { RENDERER as sheets } from \"./renderers/sheets.ts\";\nimport { RENDERER as docs } from \"./renderers/docs.ts\";\nimport { RENDERER as linkedin } from \"./renderers/linkedin.ts\";\nimport { RENDERER as gsc } from \"./renderers/gsc.ts\";\nimport { RENDERER as youtube } from \"./renderers/youtube.ts\";\nimport { RENDERER as outlook } from \"./renderers/outlook.ts\";\nimport { RENDERER as wordpress } from \"./renderers/wordpress.ts\";\nimport { RENDERER as producthunt } from \"./renderers/producthunt.ts\";\n\nexport function getRenderersJS(): string {\n return [PREAMBLE, gmail, drive, calendar, sheets, docs, linkedin, gsc, youtube, outlook, wordpress, producthunt].join(\"\\n\\n\");\n}\n",[307],"25c42708-5ef9-11f1-b9da-1607ee4eb77e","frontend_platform.ts","afb4c7b8-5ef1-11f1-bffe-1607ee4eb77e",960,["D",1780455959852],"// PlatformConsole - master-only superadmin surface (Phase A portal + Phase B console + Phase C controls).\n// Served at /api/app-platform and dynamically imported by frontend_js.ts, registered on\n// window.__nexus exactly like frontend_tasks.ts (TasksPage). Reachable ONLY when the\n// authenticated user is the platform master (me.isPlatformAdmin === true). The router GATE\n// (router.ts) already 403s every /api/platform/* request from non-admins, and the nav entry\n// + render in frontend_js2.ts is gated - this page is the single, audited exception to\n// per-tenant isolation. Phase C adds CONTROLS: per-user/per-tenant Suspend / Reactivate /\n// Delete, an audit log, and immediate lockout enforcement (api/auth.ts). Phase D adds a\n// \"View as\" action per non-admin row that starts READ-ONLY impersonation\n// (POST /api/platform/impersonate/<tenantId> -> reload); the fixed banner + exit live in\n// frontend_js2.ts, and every tenant-data write is blocked server-side (main.ts) until exit.\n//\n// Mirrors frontend_tasks.ts: browser React module, h = React.createElement,\n// shared deps pulled from window.__nexus, default-exported page component. The bearer token\n// is auto-attached to every /api fetch by frontend_js.ts's fetch override, so calls are\n// plain '/api/...'.\n//\n// Backend endpoints used (all master-only, all return JSON - the ONLY cross-tenant reads):\n// GET /api/platform/overview - { tenants, users, activeSessions, recentSignups }\n// GET /api/platform/tenants - [{ id, name, plan, created_at, owner_email, member_count }]\n// GET /api/platform/users - [{ id, email, name, tenant_id, last_login_at, status,\n// is_platform_admin, created_at }]\n// GET /api/platform/sessions - [{ email, tenant, created_at, user_agent }] (who is logged in)\n// GET /api/platform/activity - merged tenant-attributed, time-sorted feed\n// GET /api/platform/audit - [{ actor_email, action, target_type, target_id, created_at, detail }]\n//\n// Phase C control endpoints (POST, master-only, return { ok, error? }):\n// POST /api/platform/users/:id/{suspend,reactivate,delete} (delete = user + their tenant, IRREVERSIBLE)\n// POST /api/platform/tenants/:id/{suspend,reactivate,delete} (delete = whole-tenant teardown, IRREVERSIBLE)\n// Phase D impersonation endpoints (POST, master-only, return { ok, error? }):\n// POST /api/platform/impersonate/:tenantId (start READ-ONLY view-as; flips the master's session)\n// POST /api/platform/impersonate/exit (stop; handled by the banner in frontend_js2.ts)\n// Suspend/Delete are DISABLED in the UI for platform admins and for the master's own account\n// (the backend enforces the same guards; the UI just avoids offering an action that will 400).\n//\n// Browser template-literal rules: ONE outer template literal, string concat inside (no ${}),\n// no unescaped backticks, no TypeScript annotations, emojis as \\uXXXX.\n\nexport function getPlatformJS(): string {\n return `\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// --- Time helpers (relative + absolute) -------------------------------------\nfunction timeAgo(iso) {\n if (!iso) return '';\n const d = new Date(iso); const now = new Date();\n const sec = Math.floor((now - d) / 1000);\n if (isNaN(sec)) return '';\n if (sec < 0) return 'just now';\n if (sec < 60) return sec + 's ago';\n if (sec < 3600) return Math.floor(sec/60) + 'm ago';\n if (sec < 86400) return Math.floor(sec/3600) + 'h ago';\n if (sec < 2592000) return Math.floor(sec/86400) + 'd ago';\n return d.toLocaleDateString();\n}\nfunction fmtDateTime(iso) {\n if (!iso) return '\\\\u2014';\n const d = new Date(iso);\n if (isNaN(d.getTime())) return String(iso);\n return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });\n}\nconst MIDDOT = ' \\\\u00b7 ';\nconst ARROW = ' \\\\u2192 ';\n\n// --- Status pill (user lifecycle) -------------------------------------------\nconst STATUS_META = {\n active: { label: 'Active', hex: '#4edea3', cls: 'bg-secondary/10 text-secondary border-secondary/30' },\n suspended: { label: 'Suspended', hex: '#ffb4ab', cls: 'bg-error/10 text-error border-error/30' },\n invited: { label: 'Invited', hex: '#d0bcff', cls: 'bg-tertiary/10 text-tertiary border-tertiary/30' },\n disabled: { label: 'Disabled', hex: '#8a8a99', cls: 'bg-surface-container/40 text-text-muted border-border-subtle' },\n};\nfunction StatusPill({status}) {\n const v = String(status || 'active').toLowerCase();\n const meta = STATUS_META[v] || { label: status || 'Unknown', hex: '#8a8a99', cls: 'bg-surface-container/40 text-text-muted border-border-subtle' };\n return h('span', {\n className: 'inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border ' + meta.cls\n },\n h('span', { className: 'w-1.5 h-1.5 rounded-full', style: { background: meta.hex } }),\n meta.label\n );\n}\n\n// --- Row action button (view-as / suspend / reactivate / delete) ------------\n// A compact icon+label button used in the tenants/users table. \\`tone\\` selects the\n// colour scheme; \\`disabled\\` greys it out (used for platform admins / the master's own\n// row, where the action is forbidden). \\`busy\\` shows a spinner while the POST is in flight.\nconst ACTION_TONE = {\n warn: 'text-amber-300 border-amber-400/30 hover:bg-amber-400/10 hover:border-amber-400/50',\n good: 'text-secondary border-secondary/30 hover:bg-secondary/10 hover:border-secondary/50',\n danger: 'text-error border-error/30 hover:bg-error/10 hover:border-error/50',\n view: 'text-primary border-primary/30 hover:bg-primary/10 hover:border-primary/50',\n};\nfunction ActionBtn({icon, label, tone, disabled, busy, title, onClick}) {\n const {Icon} = N();\n const toneCls = ACTION_TONE[tone] || ACTION_TONE.warn;\n const base = 'inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-1 rounded-md border transition-colors whitespace-nowrap';\n if (disabled) {\n return h('span', {\n title: title || 'Not allowed',\n className: base + ' opacity-40 cursor-not-allowed text-text-muted border-border-subtle'\n },\n Icon && icon ? h(Icon, { name: icon, size: 12 }) : null,\n h('span', null, label)\n );\n }\n return h('button', {\n type: 'button', title: title || label, disabled: busy, onClick,\n className: base + ' ' + toneCls + (busy ? ' opacity-60 cursor-wait' : '')\n },\n Icon && icon ? h(Icon, { name: busy ? 'hourglass_empty' : icon, size: 12 }) : null,\n h('span', null, busy ? 'Working\\\\u2026' : label)\n );\n}\n\n// --- Small inline labelled chip (tenant / plan) -----------------------------\nfunction Chip({icon, label, title}) {\n const {Icon} = N();\n if (!label) return null;\n return h('span', {\n title: title || label,\n className: 'inline-flex items-center gap-1 max-w-[200px] text-[10px] font-medium px-1.5 py-0.5 rounded border border-border-subtle bg-surface-container/40 text-text-muted'\n },\n Icon && icon ? h(Icon, { name: icon, size: 11, className: 'flex-shrink-0' }) : null,\n h('span', { className: 'truncate' }, label)\n );\n}\n\n// --- Section shell (titled glass panel with optional count) -----------------\nfunction Section({icon, color, title, subtitle, count, children}) {\n const {Icon} = N();\n return h('section', { className: 'glass-panel rounded-xl p-lg space-y-md' },\n h('div', { className: 'flex items-center justify-between gap-3 flex-wrap' },\n h('div', { className: 'flex items-center gap-2' },\n Icon && icon ? h(Icon, { name: icon, size: 18, style: { color: color || '#c0c1ff' } }) : null,\n h('h3', { className: 'text-[15px] font-bold text-on-surface tracking-tight' }, title),\n count != null ? h('span', { className: 'text-[11px] font-mono-data text-text-muted' }, MIDDOT + count) : null\n ),\n subtitle ? h('span', { className: 'text-[11px] text-text-muted' }, subtitle) : null\n ),\n children\n );\n}\n\n// --- Honest empty state -----------------------------------------------------\nfunction Empty({icon, text}) {\n const {Icon} = N();\n return h('div', { className: 'flex flex-col items-center justify-center gap-2 py-8 text-center' },\n Icon && icon ? h(Icon, { name: icon, size: 22, className: 'text-text-muted/60' }) : null,\n h('p', { className: 'text-[12px] text-text-muted' }, text)\n );\n}\n\n// --- \"Who is logged in now\" - one active session row ------------------------\nfunction uaShort(ua) {\n if (!ua) return 'Unknown device';\n const s = String(ua);\n if (/iPhone|iPad|Android|Mobile/i.test(s)) {\n if (/iPhone/i.test(s)) return 'iPhone';\n if (/iPad/i.test(s)) return 'iPad';\n if (/Android/i.test(s)) return 'Android';\n return 'Mobile';\n }\n let browser = 'Browser';\n if (/Edg\\\\//i.test(s)) browser = 'Edge';\n else if (/Chrome\\\\//i.test(s) && !/Chromium/i.test(s)) browser = 'Chrome';\n else if (/Firefox\\\\//i.test(s)) browser = 'Firefox';\n else if (/Safari\\\\//i.test(s) && !/Chrome/i.test(s)) browser = 'Safari';\n let os = '';\n if (/Macintosh|Mac OS X/i.test(s)) os = 'macOS';\n else if (/Windows/i.test(s)) os = 'Windows';\n else if (/Linux/i.test(s)) os = 'Linux';\n return os ? (browser + MIDDOT.trim() + ' ' + os) : browser;\n}\n\nfunction SessionRow({s}) {\n const {Icon} = N();\n const email = s.email || 'Unknown user';\n const tenant = s.tenant || s.tenant_name || s.tenant_id || '';\n return h('div', { className: 'flex items-center gap-3 py-2.5 px-1 border-b border-border-subtle/60 last:border-b-0' },\n h('span', {\n className: 'flex-shrink-0 w-2 h-2 rounded-full bg-secondary',\n title: 'Active session', style: { boxShadow: '0 0 0 3px rgba(78,222,163,0.18)' }\n }),\n h('div', { className: 'min-w-0 flex-1' },\n h('div', { className: 'flex items-center gap-2 flex-wrap' },\n h('span', { className: 'text-[13px] font-semibold text-on-surface truncate' }, email),\n tenant ? h(Chip, { icon: 'corporate_fare', label: tenant }) : null\n ),\n h('div', { className: 'flex items-center gap-2 text-[10px] text-text-muted mt-0.5' },\n Icon ? h(Icon, { name: 'devices', size: 11 }) : null,\n h('span', null, uaShort(s.user_agent)),\n s.created_at ? h('span', null, MIDDOT + 'signed in ' + timeAgo(s.created_at)) : null\n )\n )\n );\n}\n\n// --- Activity feed - one merged, tenant-attributed event ---------------------\n// The backend merges agent_runs, campaign_runs and recent logins into one\n// time-sorted feed. Each item is rendered defensively: we read whichever of the\n// known fields are present rather than assuming a single rigid shape.\nconst ACTIVITY_META = {\n agent_run: { icon: 'smart_toy', color: '#c0c1ff', label: 'Agent run' },\n campaign_run: { icon: 'campaign', color: '#d0bcff', label: 'Campaign run' },\n login: { icon: 'login', color: '#4edea3', label: 'Login' },\n default: { icon: 'bolt', color: '#8a8a99', label: 'Activity' },\n};\nfunction activityKind(a) {\n const t = String(a.type || a.kind || a.event || '').toLowerCase();\n if (t.indexOf('agent') !== -1) return 'agent_run';\n if (t.indexOf('campaign') !== -1) return 'campaign_run';\n if (t.indexOf('login') !== -1 || t.indexOf('session') !== -1) return 'login';\n if (a.agent_name || a.agent) return 'agent_run';\n if (a.campaign_name || a.campaign) return 'campaign_run';\n return 'default';\n}\nfunction activityWhen(a) {\n return a.created_at || a.started_at || a.finished_at || a.at || a.time || '';\n}\nfunction activityTitle(a, kind) {\n if (a.title) return a.title;\n if (kind === 'agent_run') return (a.agent_name || a.agent || 'Agent') + ' run';\n if (kind === 'campaign_run') return (a.campaign_name || a.campaign || 'Campaign') + ' run';\n if (kind === 'login') return (a.email || 'A user') + ' signed in';\n return a.action || a.label || 'Activity';\n}\nconst RUN_STATUS_HEX = {\n completed: '#4edea3', success: '#4edea3', done: '#4edea3',\n running: '#d0bcff', queued: '#c0c1ff', pending: '#c0c1ff',\n failed: '#ffb4ab', error: '#ffb4ab', blocked: '#ffb4ab',\n};\nfunction ActivityRow({a}) {\n const {Icon} = N();\n const kind = activityKind(a);\n const meta = ACTIVITY_META[kind] || ACTIVITY_META.default;\n const when = activityWhen(a);\n const tenant = a.tenant || a.tenant_name || a.tenant_id || '';\n const status = a.status ? String(a.status).toLowerCase() : '';\n const statusHex = status ? (RUN_STATUS_HEX[status] || '#8a8a99') : '';\n return h('div', { className: 'flex items-start gap-3 py-2.5 px-1 border-b border-border-subtle/60 last:border-b-0' },\n h('div', {\n className: 'flex-shrink-0 w-7 h-7 rounded-lg flex items-center justify-center mt-0.5',\n style: { background: meta.color + '1c', color: meta.color }\n }, Icon ? h(Icon, { name: meta.icon, size: 14 }) : null),\n h('div', { className: 'min-w-0 flex-1' },\n h('div', { className: 'flex items-center gap-2 flex-wrap' },\n h('span', { className: 'text-[12px] font-semibold text-on-surface truncate' }, activityTitle(a, kind)),\n status ? h('span', {\n className: 'text-[9px] font-bold uppercase tracking-widest',\n style: { color: statusHex }\n }, status) : null\n ),\n h('div', { className: 'flex items-center gap-2 text-[10px] text-text-muted mt-0.5 flex-wrap' },\n h('span', { className: 'text-[9px] font-bold uppercase tracking-widest', style: { color: meta.color } }, meta.label),\n tenant ? h(Chip, { icon: 'corporate_fare', label: tenant }) : null,\n when ? h('span', null, MIDDOT + timeAgo(when)) : null\n )\n )\n );\n}\n\n// --- Tenants & Users table --------------------------------------------------\n// One row per platform user (email, tenant, last login, status, actions). Tenant id is\n// resolved to a tenant name via the /tenants list when possible. The platform master row\n// is flagged with a small badge. Suspend + Delete are disabled for platform admins and for\n// the current master's own account (\\`myEmail\\`); Reactivate appears only for suspended users.\n// onAction(kind, id, label) -> kind in 'suspend'|'reactivate'|'delete', id = user id.\n// onViewAs(tenantId, label) -> starts READ-ONLY impersonation of that row's tenant.\n// busyKey = 'user:<id>:<kind>' of the action currently in flight (or '').\n// \"View as\" is hidden for platform admins and the master's own row (no point viewing\n// the master's own workspace; impersonation is for stepping into OTHER tenants).\nfunction UsersTable({users, tenantNameById, onAction, onViewAs, busyKey, myEmail}) {\n const {Icon} = N();\n if (!users.length) return h(Empty, { icon: 'group', text: 'No users yet. Sign-ups will appear here as accounts are created.' });\n const me = String(myEmail || '').toLowerCase();\n return h('div', { className: 'overflow-x-auto -mx-1' },\n h('table', { className: 'w-full text-left border-collapse' },\n h('thead', null,\n h('tr', { className: 'border-b border-border-subtle' },\n ['User', 'Tenant', 'Last login', 'Status', 'Actions'].map((c) =>\n h('th', { key: c, className: 'py-2 px-2 text-[9px] font-bold uppercase tracking-widest text-text-muted' + (c === 'Actions' ? ' text-right' : '') }, c)\n )\n )\n ),\n h('tbody', null,\n users.map((u) => {\n const tName = (u.tenant_id != null && tenantNameById[String(u.tenant_id)]) || u.tenant || u.tenant_id || '\\\\u2014';\n const isAdmin = u.is_platform_admin === 1 || u.is_platform_admin === true;\n const isSelf = !!me && String(u.email || '').toLowerCase() === me;\n const protectedRow = isAdmin || isSelf; // suspend/delete forbidden by backend guards\n const status = String(u.status || 'active').toLowerCase();\n const label = u.email || u.name || 'this account';\n const k = (kind) => 'user:' + (u.id || u.email) + ':' + kind;\n const guardTitle = isSelf ? 'You cannot act on your own account.' : (isAdmin ? 'Platform-admin accounts are protected.' : '');\n return h('tr', { key: u.id || u.email, className: 'border-b border-border-subtle/50 hover:bg-surface-container/30 transition-colors' },\n h('td', { className: 'py-2.5 px-2' },\n h('div', { className: 'flex items-center gap-2 min-w-0' },\n h('div', { className: 'min-w-0' },\n h('div', { className: 'flex items-center gap-1.5' },\n h('span', { className: 'text-[12px] font-semibold text-on-surface truncate' }, u.email || 'Unknown'),\n isAdmin ? h('span', {\n title: 'Platform master',\n className: 'inline-flex items-center gap-0.5 text-[8px] font-bold uppercase tracking-widest px-1 py-0.5 rounded bg-primary/15 text-primary border border-primary/30'\n }, Icon ? h(Icon, { name: 'shield_person', size: 9 }) : null, 'Master') : null,\n isSelf && !isAdmin ? h('span', {\n title: 'This is you',\n className: 'text-[8px] font-bold uppercase tracking-widest px-1 py-0.5 rounded bg-surface-container/60 text-text-muted border border-border-subtle'\n }, 'You') : null\n ),\n u.name ? h('div', { className: 'text-[10px] text-text-muted truncate' }, u.name) : null\n )\n )\n ),\n h('td', { className: 'py-2.5 px-2' }, h(Chip, { icon: 'corporate_fare', label: String(tName) })),\n h('td', { className: 'py-2.5 px-2' },\n h('span', { className: 'text-[11px] text-text-muted', title: u.last_login_at ? fmtDateTime(u.last_login_at) : 'Never signed in' },\n u.last_login_at ? timeAgo(u.last_login_at) : 'Never')\n ),\n h('td', { className: 'py-2.5 px-2' }, h(StatusPill, { status: u.status })),\n h('td', { className: 'py-2.5 px-2' },\n h('div', { className: 'flex items-center justify-end gap-1.5' },\n (!protectedRow && u.tenant_id != null && String(u.tenant_id) !== '')\n ? h(ActionBtn, {\n icon: 'visibility', label: 'View as', tone: 'view',\n busy: busyKey === ('view:' + String(u.tenant_id)),\n title: 'View ' + String(tName) + ' as this tenant (read-only)',\n onClick: () => onViewAs(u.tenant_id, String(tName))\n })\n : null,\n status === 'suspended'\n ? h(ActionBtn, {\n icon: 'check_circle', label: 'Reactivate', tone: 'good',\n busy: busyKey === k('reactivate'),\n title: 'Reactivate ' + label,\n onClick: () => onAction('reactivate', u.id, label)\n })\n : h(ActionBtn, {\n icon: 'block', label: 'Suspend', tone: 'warn',\n disabled: protectedRow, title: protectedRow ? guardTitle : ('Suspend ' + label),\n busy: busyKey === k('suspend'),\n onClick: () => onAction('suspend', u.id, label)\n }),\n h(ActionBtn, {\n icon: 'delete', label: 'Delete', tone: 'danger',\n disabled: protectedRow, title: protectedRow ? guardTitle : ('Delete ' + label + ' and its tenant'),\n busy: busyKey === k('delete'),\n onClick: () => onAction('delete', u.id, label)\n })\n )\n )\n );\n })\n )\n )\n );\n}\n\n// --- Audit log row (one master action) --------------------------------------\n// Renders one platform_audit entry: actor_email \\\\u00b7 action \\\\u00b7 target \\\\u00b7 time.\n// The action verb drives the icon + colour so suspends/deletes are visually distinct.\nconst AUDIT_META = {\n suspend: { icon: 'block', color: '#ffb4ab' },\n reactivate: { icon: 'check_circle', color: '#4edea3' },\n delete: { icon: 'delete', color: '#ffb4ab' },\n default: { icon: 'history', color: '#c0c1ff' },\n};\nfunction auditMeta(action) {\n const a = String(action || '').toLowerCase();\n if (a.indexOf('reactivate') !== -1) return AUDIT_META.reactivate;\n if (a.indexOf('delete') !== -1) return AUDIT_META.delete;\n if (a.indexOf('suspend') !== -1) return AUDIT_META.suspend;\n return AUDIT_META.default;\n}\nfunction prettyAction(action) {\n return String(action || '').replace(/_/g, ' ').replace(/^./, function(c){ return c.toUpperCase(); });\n}\nfunction AuditRow({e}) {\n const {Icon} = N();\n const meta = auditMeta(e.action);\n const target = (e.target_type ? String(e.target_type) : 'item') + (e.target_id ? (' ' + String(e.target_id).slice(0, 8)) : '');\n return h('div', { className: 'flex items-start gap-3 py-2 px-1 border-b border-border-subtle/60 last:border-b-0' },\n h('div', {\n className: 'flex-shrink-0 w-6 h-6 rounded-md flex items-center justify-center mt-0.5',\n style: { background: meta.color + '1c', color: meta.color }\n }, Icon ? h(Icon, { name: meta.icon, size: 12 }) : null),\n h('div', { className: 'min-w-0 flex-1' },\n h('div', { className: 'flex items-center gap-2 flex-wrap' },\n h('span', { className: 'text-[12px] font-semibold text-on-surface truncate' }, prettyAction(e.action)),\n h('span', { className: 'text-[10px] text-text-muted truncate' }, target)\n ),\n h('div', { className: 'flex items-center gap-2 text-[10px] text-text-muted mt-0.5 flex-wrap' },\n h('span', { className: 'truncate' }, e.actor_email || 'system'),\n e.created_at ? h('span', null, MIDDOT + timeAgo(e.created_at)) : null\n )\n )\n );\n}\n\n// --- PlatformConsole (page component) ---------------------------------------\nexport function PlatformConsole({setActivePage}) {\n const {Icon, Btn, MetricCard, PageHeader, Spinner} = N();\n const [overview, setOverview] = useState(null);\n const [tenants, setTenants] = useState([]);\n const [users, setUsers] = useState([]);\n const [sessions, setSessions] = useState([]);\n const [activity, setActivity] = useState([]);\n const [audit, setAudit] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n // Control state: which row+action is in flight ('user:<id>:<kind>'), and the last\n // action's result banner ({ ok, msg }).\n const [busyKey, setBusyKey] = useState('');\n const [actionMsg, setActionMsg] = useState(null);\n\n const load = useCallback(async () => {\n setLoading(true); setError(null);\n try {\n // Each endpoint is master-only; the router 403s non-admins. Fetch in\n // parallel and fail loudly only if the core overview is forbidden/unavailable.\n const [ov, tn, us, ss, ac, au] = await Promise.all([\n fetch('/api/platform/overview'),\n fetch('/api/platform/tenants'),\n fetch('/api/platform/users'),\n fetch('/api/platform/sessions'),\n fetch('/api/platform/activity?limit=50'),\n fetch('/api/platform/audit?limit=50'),\n ]);\n if (ov.status === 403 || tn.status === 403) {\n throw new Error('Forbidden - this console is restricted to the platform master.');\n }\n if (!ov.ok) throw new Error('Overview failed: HTTP ' + ov.status);\n const ovd = await ov.json().catch(() => null);\n setOverview(ovd && typeof ovd === 'object' ? ovd : null);\n const tnd = tn.ok ? await tn.json().catch(() => []) : [];\n setTenants(Array.isArray(tnd) ? tnd : []);\n const usd = us.ok ? await us.json().catch(() => []) : [];\n setUsers(Array.isArray(usd) ? usd : []);\n const ssd = ss.ok ? await ss.json().catch(() => []) : [];\n setSessions(Array.isArray(ssd) ? ssd : []);\n const acd = ac.ok ? await ac.json().catch(() => []) : [];\n setActivity(Array.isArray(acd) ? acd : (acd && Array.isArray(acd.items) ? acd.items : []));\n const aud = au.ok ? await au.json().catch(() => []) : [];\n setAudit(Array.isArray(aud) ? aud : (aud && Array.isArray(aud.items) ? aud.items : []));\n } catch (e) {\n setError(e && e.message || String(e));\n } finally {\n setLoading(false);\n }\n }, []);\n\n useEffect(() => { load(); }, [load]);\n\n // The master's own email: prefer the authenticated identity from window.__nexus,\n // else fall back to the platform-admin row in the users list. Used to disable\n // self-targeting controls in the UI (the backend enforces this too).\n const myEmail = useMemo(() => {\n const me = (N().me) || (N().currentUser) || null;\n if (me && me.email) return String(me.email);\n const admin = users.find((u) => u.is_platform_admin === 1 || u.is_platform_admin === true);\n return admin && admin.email ? String(admin.email) : '';\n }, [users]);\n\n // Run one control action against /api/platform/{users|tenants}/:id/:kind. Delete is\n // gated behind window.confirm with an honest, irreversible-cascade warning. After any\n // action we re-fetch every list so the table + audit log reflect the new truth.\n const onUserAction = useCallback(async (kind, id, label) => {\n if (!id) return;\n const who = label || 'this account';\n if (kind === 'delete') {\n const ok = window.confirm('Delete ' + who + ' and ALL its data (the user and their entire tenant \\\\u2014 every member, every record)? This cannot be undone.');\n if (!ok) return;\n } else if (kind === 'suspend') {\n const ok = window.confirm('Suspend ' + who + '? They will be logged out immediately and blocked from signing in until reactivated.');\n if (!ok) return;\n }\n const bk = 'user:' + id + ':' + kind;\n setBusyKey(bk); setActionMsg(null);\n try {\n const res = await fetch('/api/platform/users/' + encodeURIComponent(id) + '/' + kind, {\n method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}',\n });\n const data = await res.json().catch(() => ({}));\n if (res.ok && data && data.ok) {\n const verb = kind === 'suspend' ? 'Suspended' : kind === 'reactivate' ? 'Reactivated' : 'Deleted';\n setActionMsg({ ok: true, msg: verb + ' ' + who + '.' });\n } else {\n setActionMsg({ ok: false, msg: (data && data.error) || ('Action failed (HTTP ' + res.status + ').') });\n }\n } catch (e) {\n setActionMsg({ ok: false, msg: e && e.message || String(e) });\n } finally {\n setBusyKey('');\n await load(); // re-fetch lists + audit regardless of outcome\n }\n }, [load]);\n\n // Start READ-ONLY impersonation of a tenant: POST the impersonate route (which flips\n // impersonate_tenant_id on the master's OWN session row, server-side), then hard-reload\n // so the whole app re-resolves as that tenant. On reload, /api/auth/me reports\n // impersonating + the fixed banner (frontend_js2.ts) takes over. All tenant-data writes\n // are blocked by the main.ts guard until the master exits. Failures surface in the banner.\n const onViewAs = useCallback(async (tenantId, label) => {\n if (tenantId == null || String(tenantId) === '') return;\n const who = label || 'this tenant';\n const ok = window.confirm('View ' + who + ' as this tenant? You will see their actual workspace READ-ONLY \\\\u2014 every write is blocked until you exit. This is audited.');\n if (!ok) return;\n const bk = 'view:' + String(tenantId);\n setBusyKey(bk); setActionMsg(null);\n try {\n const res = await fetch('/api/platform/impersonate/' + encodeURIComponent(tenantId), {\n method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}',\n });\n const data = await res.json().catch(() => ({}));\n if (res.ok && data && data.ok) {\n window.location.reload();\n return; // reload in flight; leave busy state as-is\n }\n setActionMsg({ ok: false, msg: (data && data.error) || ('Could not start view-as (HTTP ' + res.status + ').') });\n } catch (e) {\n setActionMsg({ ok: false, msg: e && e.message || String(e) });\n }\n setBusyKey('');\n }, []);\n\n // tenant_id -> name lookup for the users table + chips.\n const tenantNameById = useMemo(() => {\n const m = {};\n for (const t of tenants) if (t && t.id != null) m[String(t.id)] = t.name || String(t.id);\n return m;\n }, [tenants]);\n\n // Overview card values. Prefer the server's counts; fall back to the lengths\n // of the lists we already loaded so the cards are never silently blank.\n const cards = useMemo(() => {\n const ov = overview || {};\n const num = (v, fallback) => (v == null || isNaN(Number(v))) ? fallback : Number(v);\n return {\n tenants: num(ov.tenants, tenants.length),\n users: num(ov.users, users.length),\n activeSessions: num(ov.activeSessions, sessions.length),\n recentSignups: num(ov.recentSignups, 0),\n };\n }, [overview, tenants, users, sessions]);\n\n return h('div', { className: 'p-lg lg:p-xl space-y-xl max-w-6xl mx-auto pb-32' },\n h(PageHeader, {\n title: 'Master Console',\n subtitle: 'Platform-wide superadmin control across every tenant \\\\u2014 the single, audited exception to per-tenant isolation.',\n action: h('div', { className: 'flex items-center gap-2' },\n h('span', {\n className: 'inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded border border-primary/30 bg-primary/10 text-primary'\n }, Icon ? h(Icon, { name: 'shield_person', size: 12 }) : null, 'Platform master'),\n h('button', {\n onClick: load, title: 'Refresh',\n className: 'inline-flex items-center gap-1 text-[11px] font-semibold uppercase tracking-widest text-text-muted hover:text-on-surface px-2.5 py-1.5 rounded-md border border-border-subtle hover:border-primary/40 transition-colors'\n }, Icon ? h(Icon, { name: 'sync', size: 13 }) : null, 'Refresh')\n )\n }),\n\n // --- Error banner -----------------------------------------------------\n error\n ? h('div', { className: 'glass-panel rounded-xl p-lg text-error text-[13px] flex items-center gap-2 border border-error/30' },\n Icon ? h(Icon, { name: 'error', size: 16 }) : null,\n 'Failed to load the master console: ' + error)\n : null,\n\n // --- Action result banner (suspend / reactivate / delete) -------------\n actionMsg\n ? h('div', {\n className: 'glass-panel rounded-xl px-4 py-3 text-[12px] flex items-center justify-between gap-2 border ' +\n (actionMsg.ok ? 'text-secondary border-secondary/30' : 'text-error border-error/30')\n },\n h('div', { className: 'flex items-center gap-2 min-w-0' },\n Icon ? h(Icon, { name: actionMsg.ok ? 'check_circle' : 'error', size: 15 }) : null,\n h('span', { className: 'truncate' }, actionMsg.msg)),\n h('button', {\n onClick: () => setActionMsg(null), title: 'Dismiss',\n className: 'text-text-muted hover:text-on-surface flex-shrink-0'\n }, Icon ? h(Icon, { name: 'close', size: 14 }) : 'x'))\n : null,\n\n // --- Loading (first paint) --------------------------------------------\n loading && !overview\n ? h('div', { className: 'flex items-center justify-center py-16 text-text-muted gap-2' },\n Spinner ? h(Spinner, { size: 18 }) : null,\n h('span', { className: 'text-[13px]' }, 'Loading platform data\\\\u2026'))\n : h(React.Fragment, null,\n\n // --- Overview cards ---------------------------------------------\n h('div', { className: 'grid grid-cols-2 lg:grid-cols-4 gap-md' },\n h(MetricCard, { icon: 'corporate_fare', color: '#c0c1ff', title: 'Tenants', value: String(cards.tenants), subtitle: 'organizations' }),\n h(MetricCard, { icon: 'group', color: '#d0bcff', title: 'Users', value: String(cards.users), subtitle: 'across all tenants' }),\n h(MetricCard, { icon: 'wifi_tethering', color: '#4edea3', title: 'Active sessions', value: String(cards.activeSessions), subtitle: 'logged in now' }),\n h(MetricCard, { icon: 'person_add', color: '#ffd8a8', title: 'Recent signups', value: String(cards.recentSignups), subtitle: 'newly joined' })\n ),\n\n // --- Two-column: Who is logged in + Activity feed -------------\n h('div', { className: 'grid grid-cols-1 lg:grid-cols-2 gap-lg' },\n h(Section, {\n icon: 'wifi_tethering', color: '#4edea3',\n title: 'Who is logged in now', count: sessions.length,\n subtitle: 'live sessions'\n },\n sessions.length === 0\n ? h(Empty, { icon: 'person_off', text: 'No active sessions right now.' })\n : h('div', { className: 'divide-y divide-border-subtle/0' },\n sessions.map((s, i) => h(SessionRow, { key: (s.id || s.email || 'sess') + ':' + i, s })))\n ),\n h(Section, {\n icon: 'bolt', color: '#d0bcff',\n title: 'Cross-tenant activity', count: activity.length,\n subtitle: 'agent + campaign runs, logins'\n },\n activity.length === 0\n ? h(Empty, { icon: 'history', text: 'No recent activity across tenants yet.' })\n : h('div', { className: 'max-h-[420px] overflow-y-auto pr-1' },\n activity.map((a, i) => h(ActivityRow, { key: (a.id || 'act') + ':' + i, a })))\n )\n ),\n\n // --- Tenants & Users --------------------------------------------\n h(Section, {\n icon: 'group', color: '#c0c1ff',\n title: 'Tenants & Users', count: users.length,\n subtitle: tenants.length + (tenants.length === 1 ? ' tenant' : ' tenants')\n },\n h(UsersTable, { users, tenantNameById, onAction: onUserAction, onViewAs, busyKey, myEmail })\n ),\n\n // --- Audit log --------------------------------------------------\n h(Section, {\n icon: 'history', color: '#ffd8a8',\n title: 'Audit log', count: audit.length,\n subtitle: 'every control action'\n },\n audit.length === 0\n ? h(Empty, { icon: 'verified_user', text: 'No control actions recorded yet. Suspends, reactivations and deletes will appear here.' })\n : h('div', { className: 'max-h-[360px] overflow-y-auto pr-1' },\n audit.map((e, i) => h(AuditRow, { key: (e.id || 'aud') + ':' + i, e })))\n ),\n\n // --- Footnote ---------------------------------------------------\n h('p', { className: 'text-[11px] text-text-muted/70 text-center pt-2' },\n 'Controls act across every tenant and are irreversible where noted. Platform-admin accounts and your own account are protected. \\\\u201cView as\\\\u201d steps into a tenant\\\\u2019s workspace READ-ONLY (every write is blocked until you exit). Every action here is audited.')\n )\n );\n}\n\nexport { PlatformConsole as default };\n `;\n}\n",[315],"0c2f9270-5f15-11f1-ad5e-1607ee4eb77e","frontend_pages.ts","319a5c72-580b-11f1-8e5b-ee650bb23af1",1009,["D",1780467942685],27,"// Page-level workspace components: Dashboard, MarketingWorkspace, SalesWorkspace,\n// plus the smaller components they compose (PillTabs, WorkspaceHealth, AIContentPipeline,\n// SignalKPIs, AILeadRanking, SystemStatusBar, TeamHub).\n// Served at /api/app-pages so frontend_js.ts can stay under val.town's 80K char limit.\n//\n// Dependencies live in `window.__nexus` (set by frontend_js.ts on boot):\n// INTEGRATION_META, INTEGRATIONS, INTEGRATION_ACTIONS, INTEGRATION_FIELDS, ALL_TOOLS,\n// GOOGLE_SHARED, IntegrationPanel, parseTools, PageHeader, Icon, BrandIcon, Spinner,\n// Btn, MetricCard, LineChart, ChannelChart.\n\nexport function getPagesJS(): string {\n return `\nimport React, { useState, useEffect, useRef } from 'react';\nconst h = React.createElement;\n\n// Shared deps from frontend_js.ts (set on window.__nexus during boot).\nconst N = () => window.__nexus || {};\n\n// Phase 1 Advanced: pull in the intelligence frontend components (UnifiedFunnelView,\n// IntelligenceFeed, IntelligenceBadge, OutreachDrawer) from /api/app-intelligence.\nconst _intel = await import('/api/app-intelligence').catch(() => ({}));\nconst UnifiedFunnelView = _intel.UnifiedFunnelView || (() => null);\nconst IntelligenceFeed = _intel.IntelligenceFeed || (() => null);\nconst OutreachDrawer = _intel.OutreachDrawer || (() => null);\n\n// I1 Hot Signals panel from the widgets module.\nconst _widgets = await import('/api/app-widgets').catch(() => ({}));\nconst HotSignalsPanel = _widgets.HotSignalsPanel || (() => null);\n\n// WAVE 1: marketing operating-surface components (Overview/Attribution/Personas/UTM/Brand/\n// Nurture/CRO) from /api/app-marketing2. Lazy + tolerant: any missing export degrades to a\n// quiet empty note so the Strategy shell still renders if the module hasn't shipped.\nconst _mkt2 = await import('/api/app-marketing2').catch(() => ({}));\nconst _mktFallback = (label) => () => h('div', {className:'glass-panel rounded-xl p-xl text-center text-text-muted text-[13px]'},\n (label || 'This view') + ' is loading. Connect data sources in Settings if it stays empty.');\nconst MktOverview = _mkt2.MarketingOverview || _mktFallback('Overview');\nconst MktAttribution = _mkt2.AttributionView || _mktFallback('Attribution');\nconst MktPersonas = _mkt2.PersonaLibrary || _mktFallback('Audiences');\nconst MktUtm = _mkt2.UtmBuilder || _mktFallback('UTM Builder');\nconst MktBrand = _mkt2.BrandKit || _mktFallback('Brand Kit');\nconst MktNurture = _mkt2.NurtureView || _mktFallback('Automation');\nconst MktCRO = _mkt2.CROFeed || _mktFallback('Recommendations');\n// WAVE 2: capture (forms/landing), audiences (segments/lists), and the MQL handoff surface.\n// Split into /api/app-marketing3 to keep each val.town source file under the 80 000-byte limit;\n// same tolerant-fallback pattern so the shell still renders if an export hasn't shipped yet.\nconst _mkt3 = await import('/api/app-marketing3').catch(() => ({}));\nconst MktForms = _mkt3.FormsView || _mktFallback('Forms');\nconst MktLanding = _mkt3.LandingView || _mktFallback('Landing Pages');\nconst MktSegments = _mkt3.SegmentsView || _mktFallback('Segments');\nconst MktLists = _mkt3.ListsView || _mktFallback('Lists');\nconst MktHandoff = _mkt3.HandoffView || _mktFallback('Handoff');\n// Wrapper that bridges HotSignalsPanel.onDraftOutreach to the SalesWorkspace openDrawer.\nfunction HotSignalsRow({openDrawer}) {\n return h(HotSignalsPanel, {\n onDraftOutreach: (lead) => openDrawer({\n name: lead.name, email: lead.email, company: lead.company,\n role: 'hot-lead', signal: lead.signal || 'intent signal detected'\n })\n });\n}\n\nconst fmtRelative = (iso) => {\n if (!iso) return '';\n const ms = Date.now() - new Date(iso).getTime();\n if (ms < 60000) return 'just now';\n if (ms < 3600000) return Math.floor(ms/60000) + 'm ago';\n if (ms < 86400000) return Math.floor(ms/3600000) + 'h ago';\n if (ms < 604800000) return Math.floor(ms/86400000) + 'd ago';\n return new Date(iso).toLocaleDateString('en-US',{month:'short',day:'numeric'});\n};\nconst fmtNum = (v) => { const n = parseFloat(v)||0; return n>=1e9?(n/1e9).toFixed(1)+'B':n>=1e6?(n/1e6).toFixed(1)+'M':n>=1e3?(n/1e3).toFixed(1)+'K':String(Math.round(n*100)/100); };\nconst initialsOf = (name) => (name||'?').replace(/<[^>]+>/g,'').trim().split(/\\\\s+/).slice(0,2).map(s=>s[0]||'').join('').toUpperCase() || '?';\nconst colorFromName = (name) => {\n const colors = ['#c0c1ff','#4edea3','#d0bcff','#8083ff','#6ffbbe','#a078ff','#e1e0ff','#494bd6'];\n const sum = (name||'').split('').reduce((a,c) => a + c.charCodeAt(0), 0);\n return colors[sum % colors.length];\n};\n\n// --- ANALYTICS PAGE (was \"Dashboard / Command\") -----------------------------\n// Renamed per user spec: this analytical surface lives on the Analytics nav now.\n// 'Command' nav now points to the new CommandCenter (chat-with-commands palette).\n// 4 KPI cards row + AIO math strip + UnifiedFunnelView + IntelligenceFeed + Connected Services.\nexport function AnalyticsPage({integrations, agents, setActivePage}) {\n const {Icon, BrandIcon, INTEGRATIONS, INTEGRATION_META, PageHeader, Btn} = N();\n const connectedCount = integrations.filter(i => i.connected).length;\n const activeAgents = agents.filter(a => !!a.enabled).length;\n const runningAgents = agents.filter(a => !!a.is_running).length;\n const marketingConnected = integrations.filter(i => INTEGRATION_META[i.name]?.category === 'marketing' && i.connected).length;\n const salesConnected = integrations.filter(i => INTEGRATION_META[i.name]?.category === 'sales' && i.connected).length;\n const totalServices = INTEGRATIONS.length;\n const coveragePct = Math.round(connectedCount / totalServices * 100);\n const velocity = Math.round(coveragePct * 0.6 + (activeAgents / Math.max(1,agents.length) * 40));\n\n // Real Marketing math: pull AIO KPIs (CAC, LTV/CAC, ROI, funnel conv rates) from intelligence layer.\n const [kpis, setKpis] = useState(null);\n useEffect(() => {\n let cancelled = false;\n (async () => {\n try {\n const k = await fetch('/api/intelligence/kpis').then(r => r.json()).catch(() => null);\n if (!cancelled) setKpis(k);\n } catch {}\n })();\n return () => { cancelled = true; };\n }, []);\n // Execution-aware measure: real work completed (tasks/experiments), polled.\n const [exec, setExec] = useState(null);\n // Real \"last synced\" timestamp — captured when a data pull actually succeeds.\n const [lastSynced, setLastSynced] = useState(null);\n useEffect(() => {\n let cancelled = false;\n const pull = () => fetch('/api/intelligence/executed-work').then(r => r.json()).then(d => { if (!cancelled) { setExec(d); setLastSynced(Date.now()); } }).catch(() => {});\n pull();\n const iv = setInterval(pull, 60000);\n return () => { cancelled = true; clearInterval(iv); };\n }, []);\n\n // D4: read mer (new name), fall back to legacy roi_multiplier for older cached payloads.\n const roi = kpis === null ? null : {\n value: kpis.mer ?? kpis.roi_multiplier,\n configured: (kpis.mer ?? kpis.roi_multiplier) != null,\n conversions: kpis.conversions,\n revenue: kpis.conversions * kpis.avg_deal_size,\n spend: kpis.marketing_spend,\n };\n\n return h('div', {className:'p-lg lg:p-xl space-y-lg max-w-[1440px] mx-auto'},\n h(PageHeader, {\n title:'Nexus Command',\n subtitle:'Mission control for autonomous marketing operations. Real-time KPIs, agent activity, and integration health at a glance.',\n action: h(Btn, {onClick:()=>setActivePage('agents'), variant:'primary', size:'lg'},\n h(Icon,{name:'rocket_launch', size:18}), 'Create New Agent'\n )\n }),\n\n // -- 4 KPI cards row --------------------------------------------------\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-lg'},\n // Marketing ROI - real calc: (GA4 conversions - avg_deal_size) / est_marketing_spend\n h('div', {\n className:'glass-panel p-md rounded-xl flex flex-col justify-between h-32 relative overflow-hidden group ' + (!roi?.configured ? 'cursor-pointer' : ''),\n onClick: () => { if (roi && !roi.configured) setActivePage('settings'); }\n },\n h('div', {className:'absolute -right-2 -top-2 w-16 h-16 bg-primary/5 rounded-full blur-xl group-hover:bg-primary/10 transition-all'}),\n h('div', {className:'flex justify-between items-start'},\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-on-surface-variant'}, 'Marketing ROI'),\n roi?.configured\n ? h('span', {className:'text-secondary font-mono-data text-[13px] flex items-center gap-1'},\n '$', (roi.revenue/1000).toFixed(1), 'k ', h(Icon,{name:'trending_up', size:12}))\n : h('span', {className:'text-text-muted font-mono-data text-[10px] uppercase tracking-widest'}, 'unconfigured')\n ),\n h('div', {className:'mt-auto'},\n roi === null\n ? h('p', {className:'text-[14px] text-text-muted'}, 'Loading-')\n : roi.configured\n ? h('p', {className:'text-[32px] font-extrabold text-on-surface leading-none tracking-tight', style:{fontVariantNumeric:'tabular-nums'}},\n roi.value.toFixed(2), h('span', {className:'text-primary text-[18px] ml-1'}, 'x')\n )\n : h('div', null,\n h('p', {className:'text-[14px] font-bold text-on-surface'}, 'Configure ROI -'),\n h('p', {className:'text-[10px] text-text-muted mt-1'}, 'Set avg deal size + spend in Settings')\n ),\n roi?.configured && h('div', {className:'w-full bg-white/5 h-1 rounded-full mt-3 overflow-hidden'},\n h('div', {className:'bg-primary h-full transition-all', style:{width: Math.min(100, Math.round(roi.value * 20)) + '%'}})\n ),\n roi?.configured && h('p', {className:'text-[10px] text-text-muted mt-1 font-mono-data', style:{fontVariantNumeric:'tabular-nums'}},\n roi.conversions + ' conv - $' + roi.spend.toLocaleString() + ' spend'\n )\n )\n ),\n // Active AI Agents (enabled) — \"Running\" badge reflects real is_running state\n h('div', {className:'glass-panel p-md rounded-xl flex flex-col justify-between h-32 relative overflow-hidden'},\n h('div', {className:'flex justify-between items-start'},\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-on-surface-variant'}, 'Active AI Agents'),\n h('span', {className: 'font-mono-data text-[13px] ' + (runningAgents > 0 ? 'text-tertiary' : activeAgents > 0 ? 'text-secondary' : 'text-text-muted')},\n runningAgents > 0 ? (runningAgents + ' Running') : activeAgents > 0 ? 'Active' : 'Idle')\n ),\n h('div', {className:'mt-auto'},\n h('p', {className:'text-[32px] font-extrabold text-on-surface leading-none tracking-tight'}, activeAgents),\n h('div', {className:'flex gap-1 mt-3'},\n Array.from({length: Math.max(4, agents.length)}).map((_,i) => h('div', {\n key:i,\n className:'h-1 w-full rounded ' + (i < activeAgents ? 'bg-secondary' : 'bg-secondary/30'),\n style: i < activeAgents ? {boxShadow:'0 0 8px rgba(78,222,163,0.4)'} : {}\n }))\n )\n )\n ),\n // Sales Pipeline (Signal coverage from sales integrations)\n h('div', {className:'glass-panel p-md rounded-xl flex flex-col justify-between h-32'},\n h('div', {className:'flex justify-between items-start'},\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-on-surface-variant'}, 'Signal Channels'),\n h('span', {className:'text-primary font-mono-data text-[13px]'}, salesConnected, '/', 2)\n ),\n h('div', {className:'mt-auto'},\n h('p', {className:'text-[32px] font-extrabold text-on-surface leading-none tracking-tight'},\n agents.filter(a => a.workspace === 'sales').length\n ),\n h('p', {className:'text-[10px] uppercase tracking-widest text-on-surface-variant mt-3'},\n 'Sales agents deployed'\n )\n )\n ),\n // Growth Velocity (composite)\n h('div', {className:'glass-panel p-md rounded-xl flex flex-col justify-between h-32'},\n h('div', {className:'flex justify-between items-start'},\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-on-surface-variant'}, 'Growth Velocity'),\n h(Icon, {name:'speed', size:20, className:'text-secondary'})\n ),\n h('div', {className:'mt-auto'},\n h('p', {className:'text-[32px] font-extrabold text-on-surface leading-none tracking-tight'}, velocity, h('span',{className:'text-[14px] text-text-muted ml-1'},'/100')),\n h('div', {className:'w-full bg-white/5 h-1.5 rounded-full mt-3 overflow-hidden'},\n h('div', {className:'bg-primary h-full transition-all', style:{width: Math.min(100, Math.max(0, velocity)) + '%'}})\n )\n )\n )\n ),\n\n // -- EXECUTION STRIP (work actually completed — measure reflects execution) --\n exec && h('div', {className:'glass-panel rounded-xl p-md flex flex-wrap items-center gap-lg'},\n h('div', {className:'flex items-center gap-2 mr-2'},\n h(Icon, {name:'task_alt', size:18, className:'text-secondary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-secondary'}, 'Execution · 30d')\n ),\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Tasks done'),\n h('span', {className:'text-[18px] font-bold font-mono-data', style:{fontVariantNumeric:'tabular-nums'}}, String((exec && exec.tasks_completed) || 0))\n ),\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Experiments done'),\n h('span', {className:'text-[18px] font-bold font-mono-data', style:{fontVariantNumeric:'tabular-nums'}}, String((exec && exec.experiments_completed) || 0))\n ),\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Experiments won'),\n h('span', {className:'text-[18px] font-bold font-mono-data text-secondary', style:{fontVariantNumeric:'tabular-nums'}}, String((exec && exec.experiments_won) || 0))\n )\n ),\n // -- AIO MARKETING KPI STRIP (real CAC/LTV/conversion math) ---------\n kpis && (kpis.cac != null || kpis.ltv_cac_ratio != null || kpis.funnel_conv_mofu_bofu != null) &&\n h('div', {className:'glass-panel rounded-xl p-md flex flex-wrap items-center gap-lg'},\n h('div', {className:'flex items-center gap-2 mr-2'},\n h(Icon, {name:'functions', size:18, className:'text-tertiary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-tertiary'}, 'AIO Math')\n ),\n // CAC\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'CAC'),\n h('span', {className:'text-[18px] font-bold font-mono-data', style:{fontVariantNumeric:'tabular-nums'}},\n kpis.cac != null ? '$' + kpis.cac.toFixed(0) : '-'\n ),\n h('span', {className:'text-[10px] text-text-muted'}, 'spend - conv')\n ),\n // LTV/CAC ratio\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'LTV/CAC'),\n h('span', {\n className:'text-[18px] font-bold font-mono-data ' +\n (kpis.benchmark_status.ltv_cac === 'healthy' ? 'text-secondary'\n : kpis.benchmark_status.ltv_cac === 'borderline' ? 'text-tertiary'\n : kpis.benchmark_status.ltv_cac === 'unhealthy' ? 'text-error' : ''),\n style:{fontVariantNumeric:'tabular-nums'}\n },\n kpis.ltv_cac_ratio != null ? kpis.ltv_cac_ratio.toFixed(1) + ':1' : '-'\n ),\n h('span', {className:'text-[10px] text-text-muted'}, 'healthy -3:1')\n ),\n // Funnel conversion: TOFU - MOFU (real-data-only; hidden when unknown)\n kpis.funnel_conv_tofu_mofu != null && h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'TOFU-MOFU'),\n h('span', {className:'text-[18px] font-bold font-mono-data', style:{fontVariantNumeric:'tabular-nums'}},\n kpis.funnel_conv_tofu_mofu.toFixed(1) + '%'\n ),\n h('span', {className:'text-[10px] text-text-muted'}, 'sessions - clicks')\n ),\n // Funnel conversion: MOFU - BOFU (real-data-only; hidden when unknown)\n kpis.funnel_conv_mofu_bofu != null && h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'MOFU-BOFU'),\n h('span', {className:'text-[18px] font-bold font-mono-data', style:{fontVariantNumeric:'tabular-nums'}},\n kpis.funnel_conv_mofu_bofu.toFixed(2) + '%'\n ),\n h('span', {className:'text-[10px] text-text-muted'}, 'conv - sessions')\n ),\n // LTV\n kpis.ltv != null && h('div', {className:'flex flex-col'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'LTV'),\n h('span', {className:'text-[18px] font-bold font-mono-data', style:{fontVariantNumeric:'tabular-nums'}},\n '$' + (kpis.ltv / 1000).toFixed(1) + 'k'\n ),\n h('span', {className:'text-[10px] text-text-muted'}, kpis.retention_months + 'mo retention')\n ),\n // D4: MER (Marketing Efficiency Ratio) - revenue - spend, replaces 'ROI multiplier'\n kpis.mer != null && h('div', {className:'flex flex-col', title:'Marketing Efficiency Ratio = revenue - spend'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'MER'),\n h('span', {\n className:'text-[18px] font-bold font-mono-data ' +\n (kpis.benchmark_status?.mer === 'healthy' ? 'text-secondary'\n : kpis.benchmark_status?.mer === 'borderline' ? 'text-tertiary'\n : kpis.benchmark_status?.mer === 'unhealthy' ? 'text-error' : ''),\n style:{fontVariantNumeric:'tabular-nums'}\n }, kpis.mer.toFixed(2) + 'x'),\n h('span', {className:'text-[10px] text-text-muted'}, 'healthy -3.0x')\n ),\n // D2: Pipeline Coverage Ratio - pipeline - quota\n kpis.pipeline_coverage != null && h('div', {className:'flex flex-col', title:'Pipeline Coverage = pipeline value - sales quota'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Pipe Cov.'),\n h('span', {\n className:'text-[18px] font-bold font-mono-data ' +\n (kpis.benchmark_status?.pipeline_coverage === 'healthy' ? 'text-secondary'\n : kpis.benchmark_status?.pipeline_coverage === 'borderline' ? 'text-tertiary'\n : kpis.benchmark_status?.pipeline_coverage === 'unhealthy' ? 'text-error' : ''),\n style:{fontVariantNumeric:'tabular-nums'}\n }, kpis.pipeline_coverage.toFixed(2) + 'x'),\n h('span', {className:'text-[10px] text-text-muted'}, 'healthy -3.0x')\n ),\n // Configure shortcut if any input missing\n (kpis.cac == null || kpis.ltv == null) && h('button', {\n onClick: () => setActivePage('settings'),\n className:'ml-auto text-[11px] font-bold uppercase tracking-widest text-primary hover:underline'\n }, 'Configure -')\n ),\n\n // D5: UTM attribution channel strip - pulls /api/attribution (last 30d)\n h(AttributionStrip, null),\n\n // -- Unified Funnel View (PHASE 1 ADVANCED) --------------------------\n // Replaces the GA4-only Acquisition Funnel with a TOFU/MOFU/BOFU view across all 14 integrations.\n h('div', {className:'grid grid-cols-1 xl:grid-cols-3 gap-lg'},\n h('div', {className:'xl:col-span-2'}, h(UnifiedFunnelView, {setActivePage})),\n h(IntelligenceFeed, {\n onInvestigate: (card) => {\n // Dispatch a global event the App listens for to seed the chat with this card's context.\n window.dispatchEvent(new CustomEvent('investigate-intelligence', {detail: card}));\n }\n })\n ),\n\n // -- Connected Services + Quick Actions -------------------------------\n h('div', {className:'grid grid-cols-1 xl:grid-cols-4 gap-lg'},\n h(ConnectedServicesGrid, {integrations, setActivePage}),\n h(QuickActionsPanel, {setActivePage, lastSynced})\n )\n );\n}\n\n// AI Actions Feed - timeline of recent agent activity (derived from agents.updated_at).\nfunction AIActionsFeed({agents, setActivePage}) {\n const {Icon} = N();\n const recent = agents.slice().sort((a,b) => new Date(b.updated_at||0) - new Date(a.updated_at||0)).slice(0, 5);\n const iconFor = (a) => {\n const parseTools = N().parseTools || (() => []);\n const tools = parseTools(a.tools);\n if (tools.includes('ahrefs')) return {icon:'radar', color:'#c0c1ff'};\n if (tools.includes('ga4')) return {icon:'analytics', color:'#4edea3'};\n if (tools.includes('linkedin')) return {icon:'contact_mail', color:'#0077b5'};\n if (tools.includes('wordpress')) return {icon:'edit_note', color:'#d0bcff'};\n if (a.workspace === 'sales') return {icon:'hub', color:'#4edea3'};\n return {icon:'psychology', color:'#c0c1ff'};\n };\n return h('div', {className:'glass-panel rounded-xl flex flex-col h-[400px]'},\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-center'},\n // QA fix: dropped duplicate \"LIVE\" pulse-dot - IntelligenceFeed is the canonical live feed.\n h('h3', {className:'text-[18px] font-bold tracking-tight'}, 'AI Actions Feed')\n ),\n h('div', {className:'flex-1 overflow-y-auto p-md space-y-md'},\n recent.length === 0\n ? h('div', {className:'text-center text-text-muted text-[13px] py-8'}, h(Icon,{name:'history',size:32,className:'opacity-30 mb-2 block mx-auto'}), 'No agent activity yet')\n : recent.map((a, idx) => {\n const {icon, color} = iconFor(a);\n return h('div', {key: a.id, className:'flex gap-md relative'},\n idx < recent.length - 1 && h('div', {className:'w-px absolute', style:{height:'100%', left:15, top:32, background: color + '33'}}),\n h('div', {\n className:'w-8 h-8 rounded-full flex items-center justify-center shrink-0 border z-10',\n style:{background: color + '18', borderColor: color + '4d'}\n }, h(Icon, {name: icon, size:14, style:{color}})),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'flex justify-between items-center'},\n h('p', {className:'text-[13px] font-bold text-on-surface truncate'}, a.name),\n h('span', {className:'text-[10px] text-on-surface-variant flex-shrink-0'}, fmtRelative(a.updated_at))\n ),\n h('p', {className:'text-[13px] text-on-surface-variant truncate'},\n a.is_running\n ? 'Running now-'\n : a.enabled\n ? (a.description ? a.description.slice(0, 60) + (a.description.length > 60 ? '-' : '') : 'Enabled - awaiting run.')\n : 'Standby - awaiting trigger.'\n ),\n (a.is_running || a.enabled) && h('p', {className:'text-[10px] font-mono-data mt-1 flex items-center gap-1 ' + (a.is_running ? 'text-tertiary' : 'text-secondary')},\n h(Icon,{name: a.is_running ? 'sync' : 'check_circle', size:10, className: a.is_running ? 'spin' : ''}),\n (a.is_running ? 'Running' : 'Active') + ' - ', a.workspace\n )\n )\n );\n })\n )\n );\n}\n\n// Connected Services grid - 5+ service cards using Material Symbols icons (mock-faithful).\nfunction ConnectedServicesGrid({integrations, setActivePage}) {\n const {Icon, INTEGRATIONS, INTEGRATION_META} = N();\n const SERVICE_ICONS = {\n google:'google', ga4:'analytics', gsc:'troubleshoot', ahrefs:'search_insights',\n gmail:'mail', drive:'folder', sheets:'table_chart', docs:'description', calendar:'event',\n youtube:'smart_display', producthunt:'rocket_launch',\n linkedin:'business_center', outlook:'inbox', wordpress:'web',\n };\n const display = INTEGRATIONS.slice(0, 10);\n return h('div', {className:'xl:col-span-3 glass-panel rounded-xl p-lg'},\n h('div', {className:'flex justify-between items-center mb-lg'},\n h('h3', {className:'text-[18px] font-bold tracking-tight'}, 'Connected Services'),\n h('button', {\n onClick: () => setActivePage('settings'),\n className:'text-[11px] font-bold uppercase tracking-widest text-primary hover:underline'\n }, 'Manage All')\n ),\n h('div', {className:'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-md'},\n display.map(name => {\n const meta = INTEGRATION_META[name];\n const integ = integrations.find(i => i.name === name);\n const connected = integ?.connected;\n const inheritsGoogle = ['ga4','gsc','youtube','drive','sheets','docs','calendar','gmail'].includes(name) &&\n integrations.find(i => i.name === 'google')?.connected;\n const status = connected || inheritsGoogle;\n return h('button', {\n key: name,\n onClick: () => setActivePage(meta.category === 'sales' ? 'sales' : 'marketing'),\n className:'bg-surface-container-low border border-border-subtle p-md rounded-lg flex flex-col items-center gap-sm hover:bg-surface-variant/10 transition-colors text-center'\n },\n h('div', {className:'w-10 h-10 bg-white/5 rounded flex items-center justify-center'},\n h(Icon, {name: SERVICE_ICONS[name] || 'extension', size:20, className:'text-on-surface', style:{color: status ? meta.color : '#64748b'}})\n ),\n h('span', {className:'text-[11px] font-bold uppercase tracking-wider text-on-surface truncate w-full'}, meta.label.split(' ')[0]),\n h('div', {className:'flex items-center gap-1.5'},\n h('div', {className:'w-1.5 h-1.5 rounded-full ' + (status ? 'bg-secondary' : 'bg-error')}),\n h('span', {className:'text-[9px] text-on-surface-variant'}, status ? 'Healthy' : 'Offline')\n )\n );\n })\n )\n );\n}\n\nfunction QuickActionsPanel({setActivePage, lastSynced}) {\n const {Icon} = N();\n const actions = [\n {icon:'rocket_launch', label:'Deploy New Agent', desc:'Set up an autonomous task', page:'agents', primary:true},\n {icon:'insights', label:'Strategy Workspace', desc:'SEO, content, signals', page:'marketing'},\n {icon:'contacts', label:'Sales CRM', desc:'Pipeline, contacts & deals', page:'sales'},\n ];\n return h('div', {className:'glass-panel rounded-xl p-lg flex flex-col'},\n h('h3', {className:'text-[18px] font-bold tracking-tight mb-lg'}, 'Quick Actions'),\n h('div', {className:'space-y-2 flex-1'},\n actions.map((a, i) => h('button', {\n key: i, onClick: () => setActivePage(a.page),\n className: 'w-full flex items-center justify-between p-3 rounded-lg transition-all text-left ' + (a.primary\n ? 'bg-primary/10 border border-primary/20 hover:bg-primary/20'\n : 'bg-white/5 border border-border-subtle hover:bg-white/10')\n },\n h('div', {className:'flex items-center gap-3'},\n h(Icon, {name:a.icon, size:20, className: a.primary ? 'text-primary' : 'text-on-surface-variant'}),\n h('div', null,\n h('div', {className:'text-[13px] font-bold text-on-surface'}, a.label),\n h('div', {className:'text-[10px] text-text-muted'}, a.desc)\n )\n ),\n h(Icon, {name:'chevron_right', size:18, className:'text-on-surface-variant'})\n ))\n ),\n h('p', {className:'text-[10px] text-on-surface-variant mt-lg text-center italic opacity-60'},\n lastSynced\n ? ('Last synced: ' + new Date(lastSynced).toLocaleTimeString('en-US',{hour:'numeric',minute:'2-digit'}))\n : 'Syncing-'\n )\n );\n}\n\n\n// D5: AttributionStrip - top channels from /api/attribution (last 30d), with simple\n// horizontal share bars. No chart library - inline divs keep file size small.\nfunction AttributionStrip() {\n const {Icon} = N();\n const [data, setData] = useState(null);\n useEffect(() => {\n fetch('/api/attribution').then(r => r.json()).then(setData).catch(() => {});\n }, []);\n if (!data || !data.channels || data.channels.length === 0) return null;\n const palette = ['#c0c1ff','#4edea3','#d0bcff','#8083ff','#6ffbbe'];\n return h('div', {className:'glass-panel rounded-xl p-md'},\n h('div', {className:'flex items-center justify-between mb-3'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'donut_small', size:18, className:'text-secondary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-secondary'}, 'Attribution - last 30d'),\n h('span', {className:'text-[10px] text-text-muted ml-2 font-mono-data'},\n data.total_conversions + ' conv - $' + Math.round(data.total_value).toLocaleString()\n )\n )\n ),\n h('div', {className:'space-y-1.5'},\n data.channels.slice(0, 6).map((c, i) => h('div', {key: c.source, className:'flex items-center gap-3 text-[12px]'},\n h('span', {className:'w-2 h-2 rounded-full flex-shrink-0', style:{background: palette[i % palette.length]}}),\n h('span', {className:'w-24 truncate text-on-surface-variant capitalize'}, c.source),\n h('div', {className:'flex-1 h-1.5 bg-surface-container rounded-full overflow-hidden'},\n h('div', {className:'h-full', style:{width:(c.share*100)+'%', background: palette[i % palette.length]}})\n ),\n h('span', {className:'w-16 text-right font-mono-data text-on-surface', style:{fontVariantNumeric:'tabular-nums'}},\n (c.share*100).toFixed(0)+'%'\n ),\n h('span', {className:'w-20 text-right font-mono-data text-text-muted'}, c.conversions + ' conv')\n ))\n )\n );\n}\n\n// --- STRATEGY (MARKETING) WORKSPACE ------------------------------------------\nexport function PillTabs({tabs, activeTab, setActiveTab}) {\n const {Icon, INTEGRATION_META} = N();\n // Mock uses Material Symbols for tabs (public/analytics/search_check), not brand logos.\n const TAB_ICONS = {\n ahrefs:'public', ga4:'analytics', gsc:'search_check',\n wordpress:'web', youtube:'smart_display', producthunt:'rocket_launch',\n gmail:'mail', drive:'folder', sheets:'table_chart', docs:'description', calendar:'event',\n linkedin:'business_center', outlook:'inbox',\n };\n return h('div', {className:'flex items-center gap-sm bg-surface-container-lowest p-1 rounded-xl w-fit border border-border-subtle overflow-x-auto'},\n tabs.map(tab => {\n const meta = INTEGRATION_META[tab];\n const on = activeTab === tab;\n return h('button', {\n key: tab, onClick: () => setActiveTab(tab), type:'button',\n className:'px-md py-2 rounded-lg text-[13px] font-bold flex items-center gap-2 whitespace-nowrap transition-all ' +\n (on\n ? 'bg-surface-elevated text-primary border border-primary/20'\n : 'text-on-surface-variant border border-transparent hover:bg-surface-elevated/50')\n },\n h(Icon, {name: TAB_ICONS[tab] || 'extension', size:16}),\n meta.label.replace('Google Analytics 4','GA4').replace('Google Search Console','GSC').replace('Google Workspace','Google').split(' ')[0]\n );\n })\n );\n}\n\nexport function WorkspaceHealth({integrations, category, label}) {\n const {Icon, INTEGRATIONS, INTEGRATION_META} = N();\n const slice = INTEGRATIONS.filter(n => INTEGRATION_META[n]?.category === category);\n const connectedCount = slice.filter(n => integrations.find(i => i.name === n)?.connected).length;\n // Real health score = the intelligence funnel composite (0-100), polled — NOT \"% connected\".\n const [summary, setSummary] = useState(null);\n useEffect(() => {\n let c = false;\n const pull = () => fetch('/api/intelligence/funnel-summary').then(r => r.json()).then(d => { if (!c) setSummary(d); }).catch(() => {});\n pull(); const iv = setInterval(pull, 60000);\n return () => { c = true; clearInterval(iv); };\n }, []);\n const score = summary && typeof summary.overall_health === 'number' ? Math.round(summary.overall_health) : null;\n const bottleneck = summary && summary.bottleneck ? summary.bottleneck.stage : null;\n const pct = score != null ? score : 0;\n const sub = score != null\n ? (bottleneck ? ('Bottleneck: ' + bottleneck) : 'Composite funnel health')\n : (connectedCount ? 'Computing health…' : 'Connect integrations to compute health');\n\n return h('div', {className:'glass-panel p-xl rounded-xl flex flex-col items-center justify-center text-center relative overflow-hidden h-full min-h-[300px]'},\n h('div', {className:'absolute inset-0 opacity-10 pointer-events-none'},\n h('div', {className:'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-40 h-40 rounded-full blur-3xl', style:{background: pct >= 50 ? '#4edea3' : '#c0c1ff'}})\n ),\n h('h3', {className:'text-[11px] font-bold uppercase tracking-widest text-secondary mb-xl relative'}, label),\n h('div', {className:'relative'},\n h('span', {className:'text-[64px] leading-none text-on-surface font-black tracking-tight'},\n score != null ? String(pct) : '—', score != null && h('span', {className: pct >= 50 ? 'text-secondary' : 'text-tertiary'}, '%')\n ),\n h('div', {className:'mt-sm flex items-center justify-center gap-1 ' + (pct >= 50 ? 'text-secondary' : 'text-tertiary')},\n score != null && h(Icon, {name: pct >= 50 ? 'arrow_upward' : 'arrow_downward', size:14}),\n h('span', {className:'font-mono-data text-[12px]'}, sub)\n )\n ),\n h('div', {className:'w-full mt-xl space-y-sm text-left relative'},\n slice.slice(0, 4).map(name => {\n const meta = INTEGRATION_META[name];\n const integ = integrations.find(i => i.name === name);\n const on = !!integ?.connected;\n return h('div', {key:name, className:'flex justify-between items-center text-[13px] py-1'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className:'w-2 h-2 rounded-full flex-shrink-0 ' + (on ? 'bg-secondary' : 'bg-surface-variant border border-border-subtle')}),\n h('span', {className:'text-on-surface-variant truncate'}, meta.label.replace('Google Analytics 4','GA4').replace('Google Search Console','GSC').split(' ')[0])\n ),\n h('span', {className:'text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full ' + (on ? 'bg-secondary/15 text-secondary' : 'bg-surface-container text-text-muted')}, on ? 'Connected' : 'Offline')\n );\n }),\n h('div', {className:'flex items-center gap-1.5 mt-md text-[10px] text-text-muted font-mono-data uppercase tracking-wider'},\n h('span', {className:'w-1.5 h-1.5 rounded-full bg-secondary pulse-dot'}),\n connectedCount + ' of ' + slice.length + ' integrations connected'\n )\n )\n );\n}\n\nexport function AIContentPipeline({agents, workspace, setActivePage}) {\n const {Icon, parseTools} = N();\n const wsAgents = agents.filter(a => a.workspace === workspace);\n const activeCount = wsAgents.filter(a => !!a.enabled).length;\n\n // QA fix: was using array-index (i mod 2) to fake \"drafting\" vs \"reviewing\" status and\n // hardcoded progress percentages derived from agent.name.length. Now derived from REAL\n // agent state: enabled=true means \"active\" (with last_run if available), else \"idle\".\n // Per-agent recent run is polled lazily inside RunStatusChip.\n const fmtRel = (iso) => {\n if (!iso) return 'never';\n const ms = Date.now() - new Date(iso).getTime();\n if (ms < 60000) return 'just now';\n if (ms < 3600000) return Math.floor(ms / 60000) + 'm ago';\n if (ms < 86400000) return Math.floor(ms / 3600000) + 'h ago';\n return Math.floor(ms / 86400000) + 'd ago';\n };\n const RunStatusChip = ({agentId}) => {\n const [run, setRun] = useState(null);\n useEffect(() => {\n let cancelled = false;\n fetch('/api/agents/' + agentId + '/runs?limit=1')\n .then(r => r.json())\n .then(d => { if (!cancelled && Array.isArray(d) && d[0]) setRun(d[0]); })\n .catch(() => {});\n return () => { cancelled = true; };\n }, [agentId]);\n if (!run) return h('span', {className:'text-[10px] font-mono-data text-text-muted'}, 'no runs yet');\n const color = run.status === 'completed' ? 'text-secondary'\n : run.status === 'failed' ? 'text-error'\n : run.status === 'running' ? 'text-tertiary'\n : 'text-text-muted';\n return h('span', {className:'text-[10px] font-mono-data ' + color},\n run.status + ' · ' + fmtRel(run.started_at)\n );\n };\n\n const cardFor = (agent) => {\n const tools = parseTools(agent.tools);\n const active = !!agent.enabled;\n return h('div', {\n key: agent.id, onClick: () => setActivePage('agents'),\n className: 'glass-panel rounded-xl p-md flex flex-col gap-md cursor-pointer transition-all ' +\n (active ? 'hover:border-primary/30' : 'opacity-70 hover:opacity-100')\n },\n h('div', {className:'flex justify-between items-start'},\n h('div', {className: 'w-10 h-10 rounded-lg flex items-center justify-center ' +\n (active ? 'bg-primary/10 text-primary' : 'bg-surface-container text-on-surface-variant')},\n h(Icon, {name: active ? 'auto_awesome' : 'schedule', size: 20})\n ),\n h('span', {className: 'text-[10px] font-bold uppercase tracking-widest ' +\n (active ? 'text-primary' : 'text-text-muted')},\n active ? 'ACTIVE' : 'IDLE'\n )\n ),\n h('div', null,\n h('h4', {className:'text-[15px] font-bold text-on-surface mb-1 line-clamp-1'}, agent.name),\n h('p', {className:'text-[12px] text-on-surface-variant line-clamp-2 leading-relaxed'},\n agent.description || 'No description'\n )\n ),\n h('div', {className:'mt-auto pt-md border-t border-border-subtle flex items-center justify-between gap-2'},\n h('div', {className:'flex -space-x-2 flex-shrink-0'},\n tools.slice(0, 3).map((t, j) => h('div', {\n key: j,\n className:'w-6 h-6 rounded-full border-2 border-surface-core text-[10px] flex items-center justify-center font-bold uppercase ' +\n (j % 2 === 0 ? 'bg-primary-container text-on-primary-container' : 'bg-secondary text-on-secondary')\n }, (t||'?')[0]))\n ),\n h(RunStatusChip, {agentId: agent.id})\n )\n );\n };\n // Old \"drafting/reviewing/queued\" branches removed — cardFor now renders every agent\n // with the same shape using real enabled state + a per-agent RunStatusChip that polls\n // /api/agents/:id/runs?limit=1. No more array-index-driven fake statuses.\n\n return h('div', null,\n h('div', {className:'flex items-center justify-between mb-md flex-wrap gap-3'},\n h('div', {className:'flex items-center gap-md'},\n h('h2', {className:'text-[22px] font-extrabold tracking-tight flex items-center gap-sm'},\n h(Icon, {name:'auto_awesome', size:24, filled:true, className:'text-primary'}),\n 'AI Content Pipeline'\n ),\n h('span', {className:'bg-primary/10 text-primary px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-widest border border-primary/20'},\n activeCount + ' ACTIVE / ' + wsAgents.length + ' TOTAL'\n )\n ),\n h('div', {className:'flex gap-2'},\n h('button', {onClick: () => setActivePage('agents'), className:'p-2 rounded-lg bg-surface-container-high text-on-surface-variant hover:text-on-surface transition-colors'},\n h(Icon, {name:'refresh', size:18})\n ),\n h('button', {onClick: () => setActivePage('agents'), className:'px-md py-2 rounded-lg bg-primary text-on-primary text-[11px] font-bold uppercase tracking-widest hover:opacity-90 transition-all'},\n 'Configure Pipeline'\n )\n )\n ),\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-md'},\n wsAgents.slice(0, 7).map(cardFor),\n h('button', {\n onClick: () => setActivePage('agents'), type:'button',\n className:'rounded-xl border-2 border-dashed border-border-subtle hover:border-primary/50 hover:bg-primary/5 transition-all flex flex-col items-center justify-center gap-md p-md group min-h-[200px]'\n },\n h('div', {className:'w-12 h-12 rounded-full border border-border-subtle flex items-center justify-center group-hover:bg-primary/20 group-hover:border-primary transition-all'},\n h(Icon, {name:'add', size:24, className:'text-on-surface-variant group-hover:text-primary'})\n ),\n h('div', {className:'text-center'},\n h('p', {className:'text-[15px] font-bold text-on-surface'}, 'New Agent Task'),\n h('p', {className:'text-[12px] text-on-surface-variant'}, 'Define prompt & parameters')\n )\n )\n )\n );\n}\n\n// --- TEAM HUB (Co-working) ---------------------------------------------------\n// Workspace Toolkit (Gmail/Drive/Sheets/Docs/Calendar pill tabs + IntegrationPanel)\n// + 3-column collab surface (Team Members + Activity Stream + Shared Notes).\n// Notes persist to /api/notes so multiple users see the same notepad.\nexport function TeamHub({agents, workspace, showToast, integrations, setActivePage}) {\n const {Icon, Spinner, Btn, IntegrationPanel, INTEGRATION_META} = N();\n // Workspace Toolkit sub-tab state - only renders if any tool is connected (via shared Google OAuth).\n const WORKSPACE_TOOLS = ['gmail', 'outlook', 'drive', 'sheets', 'docs', 'calendar', 'onedrive', 'teams', 'excel'];\n const [toolTab, setToolTab] = useState('gmail');\n const TOOL_ICONS = {gmail:'mail', outlook:'inbox', drive:'folder', sheets:'table_chart', docs:'description', calendar:'event', onedrive:'cloud', teams:'groups', excel:'table_view'};\n const [notes, setNotes] = useState([]);\n const [draft, setDraft] = useState('');\n const [saving, setSaving] = useState(false);\n const [loading, setLoading] = useState(true);\n const wsAgents = agents.filter(a => a.workspace === workspace);\n\n const loadNotes = async () => {\n try {\n const r = await fetch('/api/notes?workspace=' + workspace);\n const d = await r.json();\n setNotes(Array.isArray(d) ? d : []);\n } catch {} finally { setLoading(false); }\n };\n useEffect(() => { loadNotes(); const iv = setInterval(loadNotes, 30000); return () => clearInterval(iv); }, [workspace]);\n\n const addNote = async () => {\n if (!draft.trim()) return;\n setSaving(true);\n try {\n const r = await fetch('/api/notes', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({content: draft, workspace, author: 'Director'})\n });\n if (r.ok) {\n setDraft('');\n await loadNotes();\n showToast && showToast('Note added to team feed', 'success');\n }\n } finally { setSaving(false); }\n };\n\n const togglePin = async (n) => {\n await fetch('/api/notes/' + n.id, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({pinned: !n.pinned})});\n await loadNotes();\n };\n const deleteNote = async (id) => {\n if (!confirm('Delete this note?')) return;\n await fetch('/api/notes/' + id, {method:'DELETE'});\n await loadNotes();\n };\n\n // Derive activity stream from agent updated_at timestamps.\n const activity = wsAgents\n .slice()\n .sort((a,b) => new Date(b.updated_at||0) - new Date(a.updated_at||0))\n .slice(0, 6)\n .map(a => ({\n id: a.id, name: a.name, when: fmtRelative(a.updated_at),\n action: a.is_running ? 'is running now' : a.enabled ? 'enabled - awaiting run' : 'standby',\n tone: a.is_running ? 'secondary' : a.enabled ? 'secondary' : 'muted'\n }));\n\n return h('section', {className:'space-y-md'},\n h('div', {className:'flex items-center justify-between mb-md flex-wrap gap-3'},\n h('div', {className:'flex items-center gap-md'},\n h('h2', {className:'text-[22px] font-extrabold tracking-tight flex items-center gap-sm'},\n h(Icon, {name:'diversity_3', size:24, filled:true, className:'text-tertiary'}),\n 'Team Hub'\n ),\n h('span', {className:'bg-tertiary/10 text-tertiary px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-widest border border-tertiary/20'},\n 'CO-WORKING - ' + wsAgents.length + ' AGENTS'\n )\n ),\n h('span', {className:'text-[10px] text-text-muted font-mono-data uppercase tracking-widest'}, 'workspace - ' + workspace)\n ),\n\n // -- WORKSPACE TOOLKIT (non-marketing tools live here, per user spec) -\n integrations && setActivePage && h('div', {className:'glass-panel rounded-xl p-lg space-y-md'},\n h('div', {className:'flex items-center justify-between flex-wrap gap-2'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'apps', size:18, className:'text-tertiary'}),\n h('h3', {className:'text-[15px] font-bold'}, 'Workspace Toolkit'),\n h('span', {className:'text-[10px] text-text-muted'}, '- Gmail - Drive - Sheets - Docs - Calendar')\n ),\n h('span', {className:'text-[10px] font-mono-data text-text-muted uppercase tracking-widest'}, 'Google OAuth')\n ),\n h('div', {className:'flex items-center gap-sm bg-surface-container-lowest p-1 rounded-xl w-fit border border-border-subtle overflow-x-auto'},\n WORKSPACE_TOOLS.map(t => {\n const on = toolTab === t;\n const meta = INTEGRATION_META?.[t] || {label: t};\n return h('button', {\n key: t, onClick: () => setToolTab(t), type:'button',\n className:'px-md py-2 rounded-lg text-[13px] font-bold flex items-center gap-2 whitespace-nowrap transition-all ' +\n (on ? 'bg-surface-elevated text-tertiary border border-tertiary/20'\n : 'text-on-surface-variant border border-transparent hover:bg-surface-elevated/50')\n },\n h(Icon, {name: TOOL_ICONS[t] || 'extension', size: 16}),\n meta.label.replace('Google ','').split(' ')[0]\n );\n })\n ),\n h('div', {className:'pt-2'},\n IntegrationPanel && h(IntegrationPanel, {\n key: toolTab, integrationName: toolTab, integrations,\n onGoToSettings: () => setActivePage('settings')\n })\n )\n ),\n\n h('div', {className:'grid grid-cols-1 lg:grid-cols-3 gap-md'},\n\n // Team Members (agents as collaborators)\n h('div', {className:'glass-panel rounded-xl p-lg'},\n h('div', {className:'flex items-center justify-between mb-md'},\n h('h3', {className:'text-[15px] font-bold flex items-center gap-2'},\n h(Icon,{name:'groups',size:18,className:'text-primary'}), 'Team Members'\n ),\n h('span', {className:'text-[10px] text-text-muted font-mono-data'}, wsAgents.length + ' total')\n ),\n h('div', {className:'space-y-2 max-h-[320px] overflow-y-auto pr-1'},\n wsAgents.length === 0\n ? h('div', {className:'text-center text-text-muted text-[12px] py-6'}, 'No agents in this workspace yet.')\n : wsAgents.map(a => {\n const c = colorFromName(a.name);\n return h('div', {key: a.id, className:'flex items-center gap-2.5 p-2 rounded-lg hover:bg-white/[0.02] transition-colors'},\n h('div', {className:'w-9 h-9 rounded-full flex items-center justify-center font-bold text-[12px] flex-shrink-0', style:{background:c+'33',color:c}},\n initialsOf(a.name)\n ),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'text-[13px] font-bold text-on-surface truncate'}, a.name),\n h('div', {className:'flex items-center gap-1.5 mt-0.5'},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + (a.is_running ? 'bg-tertiary pulse-dot' : a.enabled ? 'bg-secondary' : 'bg-text-muted')}),\n h('span', {className:'text-[10px] text-text-muted'}, a.is_running ? 'Running now' : a.enabled ? 'Active' : 'Idle')\n )\n )\n );\n })\n )\n ),\n\n // Activity Stream (live agent actions)\n h('div', {className:'glass-panel rounded-xl p-lg'},\n h('div', {className:'flex items-center justify-between mb-md'},\n // QA fix: dropped duplicate \"LIVE\" pulse-dot - IntelligenceFeed owns that signal.\n h('h3', {className:'text-[15px] font-bold flex items-center gap-2'},\n h(Icon,{name:'graphic_eq',size:18,className:'text-secondary'}), 'Activity Stream'\n )\n ),\n h('div', {className:'space-y-3 max-h-[320px] overflow-y-auto pr-1'},\n activity.length === 0\n ? h('div', {className:'text-center text-text-muted text-[12px] py-6'}, 'No recent activity.')\n : activity.map(a => h('div', {key: a.id, className:'relative pl-3 border-l ' + (a.tone === 'secondary' ? 'border-secondary/30' : 'border-text-muted/30')},\n h('div', {className:'absolute -left-[4.5px] top-0 w-2 h-2 rounded-full ' + (a.tone === 'secondary' ? 'bg-secondary' : 'bg-text-muted')}),\n h('div', {className:'flex justify-between mb-0.5'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-wider ' + (a.tone === 'secondary' ? 'text-secondary' : 'text-text-muted')}, a.name),\n h('span', {className:'text-[10px] font-mono-data text-text-muted'}, a.when)\n ),\n h('p', {className:'text-[11px] text-on-surface-variant'}, a.action)\n ))\n )\n ),\n\n // Shared Notes (backed by /api/notes - real co-working persistence)\n h('div', {className:'glass-panel rounded-xl p-lg flex flex-col'},\n h('div', {className:'flex items-center justify-between mb-md'},\n h('h3', {className:'text-[15px] font-bold flex items-center gap-2'},\n h(Icon,{name:'sticky_note_2',size:18,className:'text-tertiary'}), 'Shared Notes'\n ),\n h('span', {className:'text-[10px] text-text-muted font-mono-data'}, notes.length + ' notes')\n ),\n h('div', {className:'space-y-2 max-h-[260px] overflow-y-auto pr-1 mb-3 flex-1'},\n loading\n ? h('div', {className:'text-center py-4'}, h(Spinner,{size:18}))\n : notes.length === 0\n ? h('div', {className:'text-center text-text-muted text-[12px] py-6'}, 'No notes yet. Drop the first one -')\n : notes.map(n => h('div', {\n key: n.id,\n className:'p-2.5 rounded-lg group relative ' + (n.pinned ? 'bg-tertiary/5 border border-tertiary/20' : 'bg-surface-container/40 border border-border-subtle')\n },\n h('p', {className:'text-[12px] text-on-surface leading-snug pr-12'}, n.content),\n h('div', {className:'flex justify-between items-center mt-1.5 text-[10px] text-text-muted'},\n h('span', null, h('span',{className:'text-on-surface-variant font-bold'},n.author||'-'), ' - ', fmtRelative(n.created_at)),\n h('div', {className:'flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity'},\n h('button', {onClick: () => togglePin(n), className:'text-text-muted hover:text-tertiary', title: n.pinned ? 'Unpin' : 'Pin'},\n h(Icon,{name: n.pinned ? 'push_pin' : 'keep', size:13, filled: !!n.pinned})\n ),\n h('button', {onClick: () => deleteNote(n.id), className:'text-text-muted hover:text-error', title:'Delete'},\n h(Icon,{name:'close', size:13})\n )\n )\n )\n ))\n ),\n h('div', {className:'border-t border-border-subtle pt-3 space-y-2'},\n h('textarea', {\n value: draft,\n onChange: e => setDraft(e.target.value),\n onKeyDown: e => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); addNote(); } },\n placeholder:'Drop a note for the team- (-+Enter to send)',\n rows: 2,\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[12px] resize-none outline-none focus:border-tertiary focus:ring-1 focus:ring-tertiary/30 transition-all',\n style:{fontFamily:'inherit'}\n }),\n h('div', {className:'flex justify-end'},\n h(Btn, {onClick: addNote, variant:'primary', size:'sm', disabled: !draft.trim() || saving},\n saving ? h(Spinner,{size:13}) : h(Icon,{name:'send', size:14}),\n 'Post Note'\n )\n )\n )\n )\n )\n );\n}\n\n\n// WAVE 1: Strategy is now a CRM-grade operating surface. Adopts the CRM shell —\n// PageHeader + a 4-card KPI header (fed by /api/marketing/overview) + a segmented sub-tab\n// toolbar — and SURFACES the already-built intelligence/attribution/persona/utm/brand/nurture\n// capability (mounted from /api/app-marketing2). The channel-pill IntegrationPanel surface\n// (the generic per-channel read/write mini-app) is preserved on the SEO/Traffic/Content tabs,\n// each scoped to its relevant channels. AIContentPipeline + channel-aware Draft-with-AI are\n// preserved (Draft only shows on Content write channels). Everything else (other workspaces,\n// tenant scoping handled server-side) is untouched.\nexport function MarketingWorkspace({integrations, agents, setActivePage, showToast}) {\n const {PageHeader, IntegrationPanel, MetricCard, Icon} = N();\n\n // Sub-tab views. Overview/Attribution/Audiences/Automation/Tools mount frontend_marketing2\n // components; SEO/Traffic/Content keep the existing PillTabs + IntegrationPanel surface.\n const SUBTABS = [\n ['overview', 'Overview', 'dashboard'],\n ['seo', 'SEO', 'search_check'],\n ['traffic', 'Traffic', 'analytics'],\n ['content', 'Content', 'edit_note'],\n ['capture', 'Capture', 'capture'],\n ['attribution', 'Attribution', 'donut_small'],\n ['audiences', 'Audiences', 'groups'],\n ['automation', 'Automation', 'auto_awesome'],\n ['handoff', 'Handoff', 'swap_horiz'],\n ['tools', 'Tools', 'build'],\n ];\n // Channel pills scoped per sub-tab (only SEO/Traffic/Content use them).\n const CHANNELS = { seo: ['ahrefs','gsc'], traffic: ['ga4','youtube','producthunt'], content: ['wordpress','linkedin'] };\n // Channels we can actually draft+publish content to (gate Draft-with-AI to these).\n const WRITE_CHANNELS = { wordpress: 'prepare_wordpress_post', linkedin: 'prepare_linkedin_post' };\n\n const [view, setView] = useState('overview');\n // Per-channel-group active pill — initialised to the first channel of each group.\n const [chanTab, setChanTab] = useState({ seo: 'ahrefs', traffic: 'ga4', content: 'wordpress' });\n const channels = CHANNELS[view] || null;\n const activeChannel = channels ? chanTab[view] : null;\n const setActiveChannel = (c) => setChanTab(prev => ({ ...prev, [view]: c }));\n\n // KPI header — composed server-side from AIO KPIs + funnel-summary + attribution.\n // Real-data-only: honest dashes while loading / when an input is unconfigured.\n const [ov, setOv] = useState(null);\n useEffect(() => {\n let cancelled = false;\n fetch('/api/marketing/overview').then(r => r.json()).then(d => { if (!cancelled) setOv(d); }).catch(() => {});\n return () => { cancelled = true; };\n }, []);\n const k = ov && ov.kpis ? ov.kpis : null;\n const fn = ov && ov.funnel ? ov.funnel : null;\n const at = ov && ov.attribution ? ov.attribution : null;\n const dash = '\\\\u2014';\n const kpiVal = (v, fmt) => (v == null ? dash : fmt(v));\n\n // Draft-with-AI is channel-aware: only meaningful on Content write channels.\n const writeTool = activeChannel ? WRITE_CHANNELS[activeChannel] : null;\n const draftWithAI = () => window.dispatchEvent(new CustomEvent('nexus:open-chat', { detail: { action_payload: {\n question: 'Draft a marketing content piece for the ' + activeChannel + ' channel and queue it for approval (use ' + writeTool + '). Ask me for the topic if you need it.'\n } } }));\n\n return h('div', {className:'p-lg lg:p-xl max-w-[1440px] mx-auto space-y-lg'},\n h(PageHeader, {\n title:'Strategy Workspace',\n subtitle:'SEO intelligence, analytics, content, attribution, audiences, and automation - one operating surface.',\n icon:'insights',\n action: h('button', {\n onClick: () => window.dispatchEvent(new CustomEvent('nexus:open-chat', { detail: { action_payload: { question: 'Help me plan and execute a marketing initiative. Walk me through the options across SEO, content, paid, and lifecycle, then queue the work for approval.' } } })),\n className:'bg-primary text-on-primary font-semibold py-2 px-4 rounded-lg hover:opacity-90 text-[13px] shrink-0 flex items-center gap-2'\n }, h(Icon, {name:'auto_awesome', size:16}), 'Execute with AI')\n }),\n\n // -- 4-card KPI header (fed by /api/marketing/overview) ----------------\n h('div', {className:'grid grid-cols-2 lg:grid-cols-4 gap-md'},\n h(MetricCard, {\n icon:'payments', color:'#c0c1ff', title:'CAC',\n value: kpiVal(k && k.cac, v => '$' + Math.round(v).toLocaleString()),\n subtitle:'Cost to acquire a customer'\n }),\n h(MetricCard, {\n icon:'trending_up', color:'#4edea3', title:'LTV : CAC',\n value: kpiVal(k && k.ltv_cac_ratio, v => v.toFixed(1) + ':1'),\n subtitle:'Healthy at 3:1 or above'\n }),\n h(MetricCard, {\n icon:'monitoring', color:'#d0bcff', title:'Funnel health',\n value: kpiVal(fn && fn.overall_health, v => Math.round(v) + '%'),\n subtitle: fn && fn.bottleneck && fn.bottleneck.stage ? ('Bottleneck: ' + fn.bottleneck.stage) : 'Composite TOFU-BOFU'\n }),\n h(MetricCard, {\n icon:'donut_small', color:'#8083ff', title:'Conversions - 30d',\n value: kpiVal(at && at.total_conversions, v => fmtNum(v)),\n subtitle: at && at.total_value != null ? ('$' + Math.round(at.total_value).toLocaleString() + ' attributed') : 'Across all channels'\n })\n ),\n\n // -- Segmented sub-tab toolbar (CRM toolbar feel) ----------------------\n h('div', {className:'flex items-center justify-between gap-3 flex-wrap'},\n h('div', {className:'inline-flex rounded-lg border border-border-subtle overflow-hidden flex-wrap'},\n SUBTABS.map(([v, label, ic]) => h('button', {\n key: v, onClick: () => setView(v), type:'button',\n className:'px-3 py-1.5 text-[12px] font-semibold flex items-center gap-1.5 ' +\n (view === v ? 'bg-primary text-white' : 'bg-surface-container text-text-muted hover:text-on-surface')\n }, h(Icon, {name: ic, size:15}), label))\n )\n ),\n\n // -- Channel pills (only on SEO/Traffic/Content) -----------------------\n channels && h(PillTabs, {tabs: channels, activeTab: activeChannel, setActiveTab: setActiveChannel}),\n\n // -- Channel-aware Draft-with-AI (only on Content write channels) ------\n writeTool && h('div', {className:'glass-panel rounded-xl p-md flex items-center justify-between gap-md flex-wrap'},\n h('div', null,\n h('div', {className:'text-[13px] font-semibold text-on-surface'}, 'Draft with AI'),\n h('div', {className:'text-[11px] text-text-muted'}, 'Draft a ' + activeChannel + ' post - it queues in Approvals before anything publishes.')\n ),\n h('button', {\n onClick: draftWithAI,\n className:'bg-primary text-on-primary font-semibold py-2 px-4 rounded-lg hover:opacity-90 text-[13px] shrink-0'\n }, 'Draft with AI')\n ),\n\n // -- Body switch -------------------------------------------------------\n // Overview/Attribution/Audiences/Automation/Tools mount frontend_marketing2 components.\n // SEO/Traffic/Content render the per-channel IntegrationPanel beside the funnel-health gauge.\n view === 'overview'\n ? h(MktOverview, {setActivePage})\n : view === 'capture'\n // WAVE 2: lead-capture surface — forms (with submissions) + landing pages.\n ? h('div', {className:'space-y-lg'}, h(MktForms, {setActivePage, showToast}), h(MktLanding, {setActivePage, showToast}))\n : view === 'attribution'\n ? h(MktAttribution, {setActivePage})\n : view === 'audiences'\n // WAVE 2: audiences now spans personas + segments + lists.\n ? h('div', {className:'space-y-lg'}, h(MktPersonas, {setActivePage, showToast}), h(MktSegments, {setActivePage, showToast}), h(MktLists, {setActivePage, showToast}))\n : view === 'automation'\n ? h('div', {className:'space-y-lg'}, h(MktNurture, {setActivePage, showToast}), h(MktCRO, {setActivePage}))\n : view === 'handoff'\n // WAVE 2: MQL-ready leads → promote-to-deal handoff to Sales.\n ? h(MktHandoff, {setActivePage, showToast})\n : view === 'tools'\n ? h('div', {className:'grid grid-cols-1 xl:grid-cols-2 gap-lg'}, h(MktUtm, {setActivePage, showToast}), h(MktBrand, {setActivePage, showToast}))\n : // SEO / Traffic / Content — preserved PillTabs + IntegrationPanel surface\n h('div', {className:'grid grid-cols-12 gap-lg'},\n h('div', {className:'col-span-12 lg:col-span-4'},\n h(WorkspaceHealth, {integrations, category:'marketing', label:'Funnel health'})\n ),\n h('div', {className:'col-span-12 lg:col-span-8'},\n h('div', {className:'glass-panel rounded-xl p-lg h-full'},\n h(IntegrationPanel, {\n key: activeChannel, integrationName: activeChannel, integrations,\n onGoToSettings: () => setActivePage('settings')\n })\n )\n )\n ),\n\n // -- AI Content Pipeline (preserved across all sub-tabs) ---------------\n h(AIContentPipeline, {agents, workspace:'marketing', setActivePage})\n // Team Hub moved to its own top-level Workspace page per user spec.\n );\n}\n\n\n// --- WORKSPACE PAGE (NEW top-level page - was Team Hub embedded in Strategy/Signals) -\n// Contains the Workspace Toolkit (Gmail/Drive/Sheets/Docs/Calendar) + collab columns.\n// Switchable between marketing/sales workspace context via a small selector.\nexport function WorkspacePage({integrations, agents, setActivePage, showToast}) {\n const {PageHeader} = N();\n const [workspaceCtx, setWorkspaceCtx] = useState('marketing');\n return h('div', {className:'p-lg lg:p-xl max-w-[1440px] mx-auto space-y-lg'},\n h(PageHeader, {\n title:'Workspace - Co-Working Hub',\n subtitle:'Gmail - Drive - Sheets - Docs - Calendar - OneDrive - Teams - Excel - plus team activity, shared notes, and live agent presence. Everything the team needs that\\\\'s not marketing analytics.',\n action: h('div', {className:'flex items-center gap-2 bg-surface-container-lowest p-1 rounded-lg border border-border-subtle'},\n ['marketing','sales'].map(w => h('button', {\n key: w, onClick: () => setWorkspaceCtx(w), type:'button',\n className: 'px-3 py-1.5 rounded-md text-[11px] font-bold uppercase tracking-widest transition-all ' +\n (workspaceCtx === w ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface')\n }, w))\n )\n }),\n h(TeamHub, {agents, workspace: workspaceCtx, showToast, integrations, setActivePage})\n );\n}\n\n\n// --- SIGNALS (SALES) WORKSPACE -----------------------------------------------\nexport function SignalKPIs({integrations}) {\n const {Icon} = N();\n const li = integrations.find(i => i.name === 'linkedin' && i.connected);\n const ol = integrations.find(i => i.name === 'outlook' && i.connected);\n const totalChannels = 2;\n const totalConnected = [li, ol].filter(Boolean).length;\n const coveragePct = Math.round(totalConnected / totalChannels * 100);\n\n return h('div', {className:'flex flex-col gap-4 h-full'},\n h('div', {className:'glass-panel p-4 rounded-xl flex items-center justify-between flex-1'},\n h('div', {className:'w-full'},\n h('p', {className:'text-[11px] font-bold uppercase tracking-widest text-text-muted'}, 'Channel Coverage'),\n h('h4', {className:'text-[32px] font-extrabold tracking-tight ' + (totalConnected > 0 ? 'text-secondary' : 'text-text-muted')},\n coveragePct, h('span', {className:'text-[20px]'}, '%')\n ),\n h('p', {className:'text-[11px] text-text-muted mt-1'}, totalConnected + ' of ' + totalChannels + ' channels live'),\n h('div', {className:'w-full bg-white/5 h-1.5 rounded-full mt-2 overflow-hidden'},\n h('div', {className:'h-full transition-all ' + (totalConnected > 0 ? 'bg-secondary' : 'bg-surface-variant'), style:{width: coveragePct + '%'}})\n )\n )\n ),\n h('div', {className:'glass-panel p-4 rounded-xl flex items-center justify-between flex-1'},\n h('div', null,\n h('p', {className:'text-[11px] font-bold uppercase tracking-widest text-text-muted'}, 'Active Channels'),\n h('h4', {className:'text-[32px] font-extrabold tracking-tight text-on-surface'}, String(totalConnected)),\n h('p', {className:'text-[11px] text-text-muted mt-1'},\n li ? 'LinkedIn ' : '', ol ? 'Outlook ' : '', totalConnected === 0 ? '- configure in Settings' : 'live now'\n )\n ),\n h(Icon, {name:'payments', size:36, className:'text-primary'})\n )\n );\n}\n\nexport function AILeadRanking({integrations, onOpenChat}) {\n const {Icon, Spinner} = N();\n const ol = integrations.find(i => i.name === 'outlook' && i.connected);\n const li = integrations.find(i => i.name === 'linkedin' && i.connected);\n const [rows, setRows] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const load = async () => {\n setLoading(true); setError(null);\n try {\n // Primary source: /api/intelligence/leads - real MQL/SQL math from Gmail + Outlook + calendar.\n const r = await fetch('/api/intelligence/leads');\n const leads = await r.json();\n if (Array.isArray(leads) && leads.length > 0) {\n setRows(leads.slice(0, 8).map(L => ({\n id: L.email, name: L.name, role: L.signal_breakdown && Object.keys(L.signal_breakdown).slice(0,2).join(' - ') || L.email,\n company: L.company, score: Math.min(99, L.mql_score),\n stage: L.stage, mql: L.mql_qualified, sql: L.sql_qualified,\n sql_signals: L.sql_signals, source: L.source,\n signal: L.sql_qualified ? 'SQL - ' + L.sql_signals.length + ' qualified signals'\n : L.mql_qualified ? 'MQL - score ' + L.mql_score\n : 'Cold - score ' + L.mql_score\n })));\n } else { setRows([]); }\n } catch (e) { setError(e.message); }\n finally { setLoading(false); }\n };\n\n useEffect(() => { load(); }, [ol?.id, li?.id]);\n\n if (!ol && !li) {\n return h('div', {className:'glass-panel rounded-xl p-xl flex flex-col items-center justify-center text-center gap-3'},\n h(Icon, {name:'contact_mail', size:36, className:'text-text-muted'}),\n h('h3', {className:'text-[16px] font-bold text-on-surface-variant'}, 'No signal sources connected'),\n h('p', {className:'text-[13px] text-text-muted max-w-md'}, 'Connect LinkedIn or Outlook in Settings to populate the AI Lead Ranking with real inbound signals.')\n );\n }\n\n return h('div', {className:'glass-panel rounded-xl overflow-hidden'},\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-center bg-surface-container-lowest/50 flex-wrap gap-3'},\n h('div', {className:'flex items-center gap-3'},\n h(Icon, {name:'auto_awesome', size:22, filled:true, className:'text-secondary'}),\n h('h3', {className:'text-[18px] font-bold'}, 'AI Lead Ranking')\n ),\n h('div', {className:'flex gap-4 items-center'},\n error && h('span', {className:'text-[11px] text-error'}, error),\n h('button', {onClick: load,\n className:'text-[11px] font-bold uppercase tracking-widest text-secondary flex items-center gap-2 hover:opacity-80'\n }, h(Icon, {name:'sync', size:14, className: loading ? 'spin' : ''}), 'Refresh AI Model')\n )\n ),\n rows.length === 0 && !loading && h('div', {className:'p-xl text-center text-text-muted text-[13px]'},\n 'No recent signals. Pull will retry on next refresh.'\n ),\n loading && rows.length === 0 && h('div', {className:'p-xl text-center'}, h(Spinner,{size:24})),\n rows.length > 0 && h('div', {className:'overflow-x-auto'},\n h('table', {className:'w-full text-left', style:{borderCollapse:'collapse'}},\n h('thead', {className:'bg-surface-container-high/30'},\n h('tr', null,\n ['Prospect','Company','AI Score','Signal Type','Actions'].map(c => h('th', {\n key: c, className:'p-3 text-[10px] font-bold uppercase tracking-widest text-text-muted border-b border-border-subtle'\n }, c))\n )\n ),\n h('tbody', null,\n rows.map(r => h('tr', {key: r.id, className:'hover:bg-white/[0.02] transition-colors border-b border-border-subtle/50'},\n h('td', {className:'p-3'},\n h('div', {className:'flex items-center gap-3'},\n h('div', {className:'w-9 h-9 rounded-lg flex items-center justify-center font-bold text-[12px] flex-shrink-0 ' +\n (r.source === 'linkedin' ? 'bg-[#0077b5]/20 text-[#0077b5]' : 'bg-primary/15 text-primary')},\n initialsOf(r.name).slice(0,2)\n ),\n h('div', {className:'min-w-0'},\n h('p', {className:'text-[13px] font-bold truncate'}, r.name),\n h('p', {className:'text-[10px] text-text-muted truncate'}, r.role)\n )\n )\n ),\n h('td', {className:'p-3 text-[12px] font-mono-data uppercase tracking-wider text-on-surface-variant'}, r.company),\n h('td', {className:'p-3'},\n h('div', {className:'flex items-center justify-center'},\n h('div', {className:'w-12 h-12 relative flex items-center justify-center'},\n h('svg', {className:'absolute inset-0 w-full h-full -rotate-90', viewBox:'0 0 48 48'},\n h('circle', {cx:24, cy:24, r:20, fill:'transparent', stroke:'#353438', strokeWidth:4}),\n h('circle', {cx:24, cy:24, r:20, fill:'transparent',\n stroke: r.score >= 80 ? '#4edea3' : r.score >= 60 ? '#c0c1ff' : '#ffb4ab',\n strokeWidth:4, strokeDasharray:125.6, strokeDashoffset: 125.6 - (r.score/100 * 125.6), strokeLinecap:'round'})\n ),\n h('span', {className:'font-mono-data text-[12px] font-bold ' +\n (r.score >= 80 ? 'text-secondary' : r.score >= 60 ? 'text-primary' : 'text-error')}, r.score)\n )\n )\n ),\n h('td', {className:'p-3'},\n h('div', {className:'flex items-center gap-2'},\n // Real MQL/SQL stage badge from /api/intelligence/leads scoring\n r.stage && h('span', {\n className:'text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border ' +\n (r.stage === 'SQL' ? 'bg-secondary/15 text-secondary border-secondary/30'\n : r.stage === 'MQL' ? 'bg-primary/15 text-primary border-primary/30'\n : 'bg-text-muted/15 text-text-muted border-text-muted/30')\n }, r.stage),\n h('span', {className:'text-[12px] text-on-surface'}, r.signal)\n )\n ),\n h('td', {className:'p-3 text-right'},\n h('button', {onClick: () => onOpenChat(r),\n className:'px-3 py-1 border border-secondary text-secondary rounded-lg text-[10px] font-bold uppercase tracking-widest hover:bg-secondary hover:text-on-secondary transition-all'\n }, 'Draft Outreach')\n )\n ))\n )\n )\n )\n );\n}\n\nexport function SalesWorkspace({integrations, agents, setActivePage, openOutreach, showToast}) {\n const {PageHeader, IntegrationPanel, Icon, PipelineVelocityChart} = N();\n const tabs = ['linkedin', 'outlook'];\n const [activeTab, setActiveTab] = useState('linkedin');\n // Outreach drawer state: opens when a row's \"Draft Outreach\" is clicked.\n const [drawerProspect, setDrawerProspect] = useState(null);\n const openDrawer = (signal) => setDrawerProspect(signal);\n\n // Real pipeline funnel for PipelineVelocityChart — no hardcoded stages/currentStage.\n const [funnel, setFunnel] = useState(null);\n useEffect(() => {\n let cancelled = false;\n const pull = () => fetch('/api/intelligence/funnel-summary').then(r => r.json()).then(d => { if (!cancelled) setFunnel(d); }).catch(() => {});\n pull();\n const iv = setInterval(pull, 60000);\n return () => { cancelled = true; clearInterval(iv); };\n }, []);\n // Map the funnel-summary payload to the chart's { stages:[{label,value}], currentStage } shape.\n const funnelStages = funnel && Array.isArray(funnel.stages)\n ? funnel.stages.map(s => ({ label: s.label || s.stage || s.name, value: s.value != null ? s.value : (s.count != null ? s.count : 0) }))\n : [];\n const funnelCurrentStage = funnel && funnel.bottleneck && funnel.bottleneck.stage\n ? funnel.bottleneck.stage\n : (funnelStages.length ? funnelStages[funnelStages.length - 1].label : null);\n\n return h('div', {className:'p-lg lg:p-xl max-w-[1440px] mx-auto space-y-lg'},\n h(PageHeader, {\n title:'Signals Workspace',\n subtitle:'LinkedIn outreach, email signals, and pipeline intelligence.'\n }),\n h(PillTabs, {tabs, activeTab, setActiveTab}),\n\n // -- Pipeline Velocity + Growth KPIs (mock-faithful row) -------------\n h('div', {className:'grid grid-cols-12 gap-lg'},\n h('div', {className:'col-span-12 xl:col-span-8 glass-panel rounded-xl p-lg flex flex-col gap-lg'},\n h('div', {className:'flex justify-between items-center'},\n h('div', null,\n h('h3', {className:'text-[18px] font-bold uppercase tracking-wide'}, 'Pipeline Velocity'),\n h('p', {className:'text-[13px] text-text-muted'}, 'Conversion and funnel distribution')\n ),\n funnelStages.length > 0\n ? h('span', {className:'px-3 py-1 bg-secondary/10 border border-secondary/20 text-secondary text-[10px] rounded-full font-bold uppercase'}, 'Live')\n : h('span', {className:'px-3 py-1 bg-surface-container border border-border-subtle text-text-muted text-[10px] rounded-full font-bold uppercase'}, 'No data')\n ),\n PipelineVelocityChart\n ? (funnelStages.length > 0\n ? h(PipelineVelocityChart, {stages: funnelStages, currentStage: funnelCurrentStage})\n : h('div', {className:'flex-1 flex items-center justify-center text-center text-text-muted text-[13px] py-12'}, 'No pipeline data yet. Connect sales sources to populate the funnel.'))\n : null\n ),\n h('div', {className:'col-span-12 xl:col-span-4'}, h(SignalKPIs, {integrations})),\n\n // -- HOT SIGNALS (I1: real-time intent signals) ----------------------\n h('div', {className:'col-span-12'}, h(HotSignalsRow, {openDrawer})),\n\n // -- Workspace panel + AI Lead Ranking -----------------------------\n h('div', {className:'col-span-12 lg:col-span-8'},\n h('div', {className:'glass-panel rounded-xl p-lg h-full'},\n h(IntegrationPanel, {key: activeTab, integrationName: activeTab, integrations, onGoToSettings: () => setActivePage('settings')})\n )\n ),\n h('div', {className:'col-span-12 lg:col-span-4 flex flex-col gap-md'},\n h('button', {\n onClick: () => openDrawer({name:'New Prospect', company:'', role:'general outreach', signal:'manual draft'}),\n className:'glass-panel rounded-xl p-lg flex items-center justify-between hover:border-primary/40 transition-all cursor-pointer'\n },\n h('div', {className:'flex items-center gap-3'},\n h(Icon, {name:'outgoing_mail', size:24, className:'text-secondary'}),\n h('div', {className:'text-left'},\n h('div', {className:'text-[14px] font-bold'}, 'Compose Outreach'),\n h('div', {className:'text-[11px] text-text-muted'}, 'AI-drafted LinkedIn + Email')\n )\n ),\n h(Icon, {name:'arrow_forward', size:18, className:'text-on-surface-variant'})\n )\n ),\n\n h('div', {className:'col-span-12'}, h(AILeadRanking, {integrations, onOpenChat: openDrawer}))\n // Team Hub moved to its own Workspace page per user spec.\n ),\n\n // -- Outreach Drafts slide-out drawer -------------------------------\n drawerProspect && h(OutreachDrawer, {\n open: !!drawerProspect, prospect: drawerProspect,\n onClose: () => setDrawerProspect(null),\n onSend: (payload) => {\n showToast && showToast('Outreach queued: ' + payload.type, 'success');\n // Also pipe through the legacy openOutreach so the chat panel sees it.\n openOutreach && openOutreach(drawerProspect);\n setDrawerProspect(null);\n }\n })\n );\n}\n\nexport function SystemStatusBar() {\n const {Icon} = N();\n const [health, setHealth] = useState({ok: true, ts: null, version: null});\n useEffect(() => {\n let mounted = true;\n const ping = async () => {\n try {\n const r = await fetch('/api/health');\n const d = await r.json();\n if (mounted) setHealth({ok: d.status === 'ok', ts: d.timestamp, version: d.version || null});\n } catch { if (mounted) setHealth({ok: false, ts: null, version: null}); }\n };\n ping();\n const iv = setInterval(ping, 30000);\n return () => { mounted = false; clearInterval(iv); };\n }, []);\n\n return h('footer', {className:'h-8 bg-surface-container-lowest border-t border-border-subtle flex items-center justify-between px-lg z-40 flex-shrink-0'},\n h('div', {className:'flex items-center gap-lg'},\n h('div', {className:'flex items-center gap-1.5'},\n h('div', {className:'w-2 h-2 rounded-full pulse-dot ' + (health.ok ? 'bg-secondary' : 'bg-error')}),\n h('span', {className:'font-mono-data text-[10px] text-on-surface-variant uppercase tracking-widest'},\n health.ok ? 'System Operational' : 'System Degraded'\n )\n ),\n h('div', {className:'hidden sm:flex items-center gap-1.5'},\n h(Icon, {name:'dns', size:14, className:'text-on-surface-variant'}),\n h('span', {className:'font-mono-data text-[10px] text-on-surface-variant'}, 'VAL.TOWN')\n )\n ),\n h('div', {className:'flex items-center gap-md'},\n h('span', {className:'font-mono-data text-[10px] text-on-surface-variant'}, health.version ? ('v' + health.version) : '—')\n )\n );\n}\n `;\n}\n",[322],"fa39a554-5b1a-11f1-b807-ee650bb23af1","frontend_objectives.ts","a38a02d0-589f-11f1-be5e-ee650bb23af1",474,["D",1780030685043],"// ObjectivesPage — OKR command surface (Phase 2 / Step 1).\n// Served at /api/app-objectives and dynamically imported by frontend_js.ts.\n//\n// Shared deps come from window.__nexus (set by frontend_js.ts on boot):\n// Icon, Btn, Input, MetricCard, PageHeader, SectionHeader, Toggle, Spinner.\n//\n// Backend endpoints used (all return JSON):\n// GET /api/okrs?workspace=&quarter=\n// POST /api/okrs\n// PUT /api/okrs/:id\n// DELETE /api/okrs/:id\n// POST /api/okrs/:id/key-results\n// PUT /api/key-results/:id\n// GET /api/okrs/dashboard\n\nexport function getObjectivesJS(): string {\n return `\nimport React, { useState, useEffect, useRef } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// Google-OKR scoring: >=70 on track (green), 40-69 at risk (amber/tertiary), <40 off track (red).\nconst PROGRESS_TONE = (p) => p >= 70 ? 'secondary' : p >= 40 ? 'tertiary' : 'error';\nconst PROGRESS_HEX = (p) => p >= 70 ? '#4edea3' : p >= 40 ? '#d0bcff' : '#ffb4ab';\nconst STATUS_LABEL = (p) => p >= 70 ? 'On Track' : p >= 40 ? 'At Risk' : 'Off Track';\n\nconst QUARTERS = ['Q1-2026','Q2-2026','Q3-2026','Q4-2026'];\nconst WORKSPACES = ['all','marketing','sales','growth','company'];\n\nconst currentQuarter = () => {\n const now = new Date();\n const q = Math.floor(now.getMonth() / 3) + 1;\n return 'Q' + q + '-' + now.getFullYear();\n};\n\nconst fmtNum = (v, unit) => {\n if (v == null || v === '' || Number.isNaN(Number(v))) return '—';\n const n = Number(v);\n const abs = Math.abs(n);\n let body;\n if (abs >= 1e9) body = (n/1e9).toFixed(1) + 'B';\n else if (abs >= 1e6) body = (n/1e6).toFixed(1) + 'M';\n else if (abs >= 1e3) body = (n/1e3).toFixed(1) + 'k';\n else if (Number.isInteger(n)) body = String(n);\n else body = n.toFixed(2);\n return body + (unit ? ' ' + unit : '');\n};\n\n// ─── ProgressRing ───────────────────────────────────────────────────────────\n// CSS conic-gradient ring — no chart lib. Centered numeric % label.\nfunction ProgressRing({progress, size = 64}) {\n const p = Math.max(0, Math.min(100, Math.round(progress || 0)));\n const hex = PROGRESS_HEX(p);\n const ringSize = size;\n const holeSize = Math.round(size * 0.72);\n return h('div', {\n className:'relative flex items-center justify-center flex-shrink-0',\n style:{\n width: ringSize, height: ringSize, borderRadius:'50%',\n background: 'conic-gradient(' + hex + ' ' + p + '%, rgba(255,255,255,0.06) 0)'\n }\n },\n h('div', {\n className:'flex items-center justify-center bg-surface-container-lowest border border-border-subtle',\n style:{\n width: holeSize, height: holeSize, borderRadius:'50%',\n }\n },\n h('span', {\n className:'text-[12px] font-extrabold tracking-tight',\n style:{color: hex, fontVariantNumeric:'tabular-nums'}\n }, p + '%')\n )\n );\n}\n\n// ─── ProgressBar (KR row) ───────────────────────────────────────────────────\nfunction ProgressBar({progress}) {\n const p = Math.max(0, Math.min(100, Math.round(progress || 0)));\n const hex = PROGRESS_HEX(p);\n return h('div', {className:'h-1.5 w-full bg-surface-container rounded-full overflow-hidden'},\n h('div', {className:'h-full transition-all', style:{width: p + '%', background: hex}})\n );\n}\n\n// ─── StatusPill ─────────────────────────────────────────────────────────────\nfunction StatusPill({progress}) {\n const tone = PROGRESS_TONE(progress);\n const cls = tone === 'secondary'\n ? 'bg-secondary/10 text-secondary border-secondary/30'\n : tone === 'tertiary'\n ? 'bg-tertiary/10 text-tertiary border-tertiary/30'\n : 'bg-error/10 text-error border-error/30';\n return h('span', {\n className:'inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border ' + cls\n }, STATUS_LABEL(progress));\n}\n\n// ─── KRRow ──────────────────────────────────────────────────────────────────\nfunction KRRow({kr, onConfidence, onCurrent}) {\n const {Icon} = N();\n const [conf, setConf] = useState(kr.confidence != null ? Number(kr.confidence) : 5);\n const [current, setCurrent] = useState(kr.current_value != null ? kr.current_value : '');\n const confTimer = useRef(null);\n const currentTimer = useRef(null);\n\n useEffect(() => { setConf(kr.confidence != null ? Number(kr.confidence) : 5); }, [kr.confidence]);\n useEffect(() => { setCurrent(kr.current_value != null ? kr.current_value : ''); }, [kr.current_value]);\n\n const progress = (() => {\n if (typeof kr.progress === 'number') return kr.progress;\n const sv = Number(kr.start_value) || 0;\n const cv = Number(kr.current_value);\n const tv = Number(kr.target_value);\n if (!Number.isFinite(cv) || !Number.isFinite(tv) || tv === sv) return 0;\n return Math.max(0, Math.min(100, ((cv - sv) / (tv - sv)) * 100));\n })();\n\n const tone = PROGRESS_TONE(progress);\n const toneText = tone === 'secondary' ? 'text-secondary' : tone === 'tertiary' ? 'text-tertiary' : 'text-error';\n const autoSync = !!kr.metric_source;\n\n const onConfSlide = (v) => {\n setConf(v);\n clearTimeout(confTimer.current);\n confTimer.current = setTimeout(() => onConfidence && onConfidence(v), 400);\n };\n const onCurrentChange = (v) => {\n setCurrent(v);\n clearTimeout(currentTimer.current);\n currentTimer.current = setTimeout(() => onCurrent && onCurrent(v), 600);\n };\n\n return h('div', {className:'p-3 rounded-lg bg-surface-container-lowest border border-border-subtle space-y-2'},\n // Row 1: title + status text + auto-sync badge\n h('div', {className:'flex items-start justify-between gap-2'},\n h('div', {className:'min-w-0 flex-1'},\n h('p', {className:'text-[12px] font-semibold text-on-surface leading-tight truncate'}, kr.title || 'Untitled KR'),\n kr.metric_source && h('p', {className:'text-[10px] text-text-muted mt-0.5 font-mono-data truncate'},\n kr.metric_source + (kr.metric_key ? ' · ' + kr.metric_key : '')\n )\n ),\n autoSync && h('span', {\n className:'inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-widest text-primary bg-primary/10 border border-primary/20 px-1.5 py-0.5 rounded flex-shrink-0',\n title:'Auto-synced from integration'\n }, h(Icon, {name:'sync', size:10}), 'AUTO')\n ),\n\n // Row 2: progress bar\n h(ProgressBar, {progress}),\n\n // Row 3: current / target + unit\n h('div', {className:'flex items-center justify-between text-[11px] font-mono-data'},\n h('div', {className:'flex items-center gap-1.5 min-w-0'},\n autoSync\n ? h('span', {className: toneText + ' font-bold', style:{fontVariantNumeric:'tabular-nums'}},\n fmtNum(kr.current_value, kr.unit))\n : h('input', {\n type:'text', value: current,\n onChange: e => onCurrentChange(e.target.value.replace(/[^0-9.\\\\-]/g,'')),\n placeholder:'0',\n className:'w-20 bg-transparent border-b border-border-subtle ' + toneText + ' font-bold outline-none focus:border-primary text-right px-1'\n }),\n h('span', {className:'text-text-muted'}, '/'),\n h('span', {className:'text-on-surface-variant'}, fmtNum(kr.target_value, kr.unit))\n ),\n h('span', {className: toneText + ' font-bold', style:{fontVariantNumeric:'tabular-nums'}},\n Math.round(progress) + '%'\n )\n ),\n\n // Row 4: confidence slider\n h('div', {className:'pt-1.5 border-t border-border-subtle/50'},\n h('div', {className:'flex items-center justify-between mb-1'},\n h('span', {className:'text-[10px] uppercase tracking-widest text-text-muted'}, 'Confidence'),\n h('span', {\n className:'text-[11px] font-bold font-mono-data',\n style:{color: conf >= 7 ? '#4edea3' : conf >= 4 ? '#d0bcff' : '#ffb4ab', fontVariantNumeric:'tabular-nums'}\n }, conf + '/10')\n ),\n h('input', {\n type:'range', min:0, max:10, step:1, value: conf,\n onChange: e => onConfSlide(parseInt(e.target.value, 10)),\n className:'w-full accent-primary bg-surface-variant rounded-lg h-1.5 appearance-none cursor-pointer'\n })\n )\n );\n}\n\n// ─── KRForm ─────────────────────────────────────────────────────────────────\nfunction KRForm({onSave, onCancel}) {\n const {Icon, Btn, Input, Spinner} = N();\n const [draft, setDraft] = useState({\n title:'', metric_source:'', metric_key:'', start_value:'',\n current_value:'', target_value:'', unit:'', confidence:5\n });\n const [busy, setBusy] = useState(false);\n const submit = async () => {\n if (!draft.title.trim() || draft.target_value === '') return;\n setBusy(true);\n try {\n await onSave({\n title: draft.title.trim(),\n metric_source: draft.metric_source || null,\n metric_key: draft.metric_key || null,\n start_value: draft.start_value !== '' ? Number(draft.start_value) : 0,\n current_value: draft.current_value !== '' ? Number(draft.current_value) : 0,\n target_value: Number(draft.target_value),\n unit: draft.unit || null,\n confidence: Number(draft.confidence) || 5,\n });\n } finally { setBusy(false); }\n };\n return h('div', {className:'p-3 rounded-lg border border-primary/30 bg-primary/5 space-y-2.5'},\n h(Input, {label:'KR title', value: draft.title, onChange: v => setDraft(d => ({...d, title: v})), placeholder:'Grow MQLs to 500/mo'}),\n h('div', {className:'grid grid-cols-2 sm:grid-cols-4 gap-2'},\n h(Input, {label:'Start', type:'text', value: String(draft.start_value),\n onChange: v => setDraft(d => ({...d, start_value: v.replace(/[^0-9.\\\\-]/g,'')})), placeholder:'0'}),\n h(Input, {label:'Current', type:'text', value: String(draft.current_value),\n onChange: v => setDraft(d => ({...d, current_value: v.replace(/[^0-9.\\\\-]/g,'')})), placeholder:'0'}),\n h(Input, {label:'Target', type:'text', value: String(draft.target_value),\n onChange: v => setDraft(d => ({...d, target_value: v.replace(/[^0-9.\\\\-]/g,'')})), placeholder:'500'}),\n h(Input, {label:'Unit', value: draft.unit, onChange: v => setDraft(d => ({...d, unit: v})), placeholder:'leads'})\n ),\n h('div', {className:'grid grid-cols-2 gap-2'},\n h(Input, {label:'Metric source (optional)', value: draft.metric_source,\n onChange: v => setDraft(d => ({...d, metric_source: v})), placeholder:'ga4 / hubspot / stripe'}),\n h(Input, {label:'Metric key (optional)', value: draft.metric_key,\n onChange: v => setDraft(d => ({...d, metric_key: v})), placeholder:'mql_count'})\n ),\n h('div', {className:'flex justify-end gap-2 pt-1'},\n h(Btn, {onClick: onCancel, variant:'ghost', size:'sm', disabled: busy}, 'Cancel'),\n h(Btn, {onClick: submit, variant:'primary', size:'sm', disabled: busy || !draft.title.trim() || draft.target_value === ''},\n busy ? h(Spinner, {size:13}) : h(Icon, {name:'add', size:14}),\n busy ? 'Adding…' : 'Add KR'\n )\n )\n );\n}\n\n// ─── ObjectiveCard ──────────────────────────────────────────────────────────\nfunction ObjectiveCard({okr, onUpdate, onDelete, onAddKR, onUpdateKR}) {\n const {Icon, Btn} = N();\n const [showAll, setShowAll] = useState(false);\n const [addingKR, setAddingKR] = useState(false);\n const [editing, setEditing] = useState(false);\n const [editDraft, setEditDraft] = useState({title: okr.title || '', description: okr.description || '', owner: okr.owner || ''});\n\n useEffect(() => {\n setEditDraft({title: okr.title || '', description: okr.description || '', owner: okr.owner || ''});\n }, [okr.id, okr.title, okr.description, okr.owner]);\n\n const krs = Array.isArray(okr.key_results) ? okr.key_results : [];\n const visibleKRs = showAll ? krs : krs.slice(0, 3);\n const progress = (() => {\n if (typeof okr.progress === 'number') return okr.progress;\n if (krs.length === 0) return 0;\n const sum = krs.reduce((acc, k) => {\n if (typeof k.progress === 'number') return acc + k.progress;\n const sv = Number(k.start_value) || 0;\n const cv = Number(k.current_value);\n const tv = Number(k.target_value);\n if (!Number.isFinite(cv) || !Number.isFinite(tv) || tv === sv) return acc;\n return acc + Math.max(0, Math.min(100, ((cv - sv) / (tv - sv)) * 100));\n }, 0);\n return sum / krs.length;\n })();\n\n const saveEdit = async () => {\n await onUpdate({title: editDraft.title.trim(), description: editDraft.description.trim(), owner: editDraft.owner.trim() || null});\n setEditing(false);\n };\n\n return h('div', {className:'glass-panel rounded-xl p-lg space-y-md group transition-all hover:border-primary/30'},\n // Header: ring + title/desc + status + actions\n h('div', {className:'flex items-start gap-md'},\n h(ProgressRing, {progress, size: 68}),\n h('div', {className:'flex-1 min-w-0'},\n editing\n ? h('div', {className:'space-y-2'},\n h('input', {\n value: editDraft.title,\n onChange: e => setEditDraft(d => ({...d, title: e.target.value})),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[16px] font-bold text-on-surface outline-none focus:border-primary'\n }),\n h('textarea', {\n value: editDraft.description, rows:2,\n onChange: e => setEditDraft(d => ({...d, description: e.target.value})),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[12px] text-on-surface-variant outline-none focus:border-primary resize-none',\n style:{fontFamily:'inherit'}\n }),\n h('input', {\n value: editDraft.owner, placeholder:'Owner',\n onChange: e => setEditDraft(d => ({...d, owner: e.target.value})),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[12px] text-on-surface-variant outline-none focus:border-primary'\n })\n )\n : h(React.Fragment, null,\n h('h3', {className:'text-[16px] sm:text-[18px] font-extrabold text-on-surface leading-tight tracking-tight'}, okr.title || 'Untitled Objective'),\n okr.description && h('p', {className:'text-[12px] text-text-muted leading-relaxed mt-1'}, okr.description)\n ),\n h('div', {className:'flex items-center gap-1.5 mt-2 flex-wrap'},\n h(StatusPill, {progress}),\n okr.workspace && h('span', {className:'inline-flex items-center text-[10px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border border-border-subtle bg-surface-container/40 text-text-muted'},\n okr.workspace),\n okr.owner && h('span', {className:'inline-flex items-center gap-1 text-[10px] text-text-muted'},\n h(Icon, {name:'person', size:11}), okr.owner\n ),\n okr.quarter && h('span', {className:'text-[10px] font-mono-data text-text-muted'}, '· ' + okr.quarter)\n )\n ),\n h('div', {className:'flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0'},\n editing\n ? h(React.Fragment, null,\n h('button', {\n onClick: saveEdit,\n className:'p-1.5 rounded text-secondary hover:bg-secondary/10 transition-colors',\n title:'Save'\n }, h(Icon, {name:'check', size:16})),\n h('button', {\n onClick: () => setEditing(false),\n className:'p-1.5 rounded text-text-muted hover:bg-surface-variant transition-colors',\n title:'Cancel'\n }, h(Icon, {name:'close', size:16}))\n )\n : h(React.Fragment, null,\n h('button', {\n onClick: () => setEditing(true),\n className:'p-1.5 rounded text-text-muted hover:text-primary hover:bg-primary/10 transition-colors',\n title:'Edit'\n }, h(Icon, {name:'edit', size:16})),\n h('button', {\n onClick: onDelete,\n className:'p-1.5 rounded text-text-muted hover:text-error hover:bg-error/10 transition-colors',\n title:'Delete'\n }, h(Icon, {name:'delete', size:16}))\n )\n )\n ),\n\n // KR list\n krs.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic text-center py-3 border-t border-border-subtle/50'},\n 'No key results yet — add the measurable outcomes that prove this objective.')\n : h('div', {className:'space-y-2 pt-2 border-t border-border-subtle/50'},\n visibleKRs.map(kr => h(KRRow, {\n key: kr.id,\n kr,\n onConfidence: (v) => onUpdateKR(kr.id, {confidence: v}),\n onCurrent: (v) => onUpdateKR(kr.id, {current_value: v === '' ? null : Number(v)}),\n })),\n krs.length > 3 && h('button', {\n onClick: () => setShowAll(s => !s),\n className:'text-[11px] font-bold uppercase tracking-widest text-primary hover:underline'\n }, showAll ? 'Show top 3 ↑' : ('Show all ' + krs.length + ' KRs ↓'))\n ),\n\n // Add KR\n addingKR\n ? h(KRForm, {\n onSave: async (payload) => { await onAddKR(payload); setAddingKR(false); },\n onCancel: () => setAddingKR(false)\n })\n : h('button', {\n onClick: () => setAddingKR(true),\n className:'w-full flex items-center justify-center gap-1.5 py-2 rounded-lg border border-dashed border-border-subtle text-[11px] font-bold uppercase tracking-widest text-text-muted hover:text-primary hover:border-primary/40 transition-all'\n }, h(Icon, {name:'add', size:14}), 'Add Key Result')\n );\n}\n\n// ─── ObjectiveForm (new objective inline) ───────────────────────────────────\nfunction ObjectiveForm({quarter, workspace, onSave, onCancel}) {\n const {Icon, Btn, Input, Spinner} = N();\n const [draft, setDraft] = useState({title:'', description:'', owner:'', quarter: quarter || currentQuarter(), workspace: workspace === 'all' ? 'company' : (workspace || 'company')});\n const [busy, setBusy] = useState(false);\n const submit = async () => {\n if (!draft.title.trim()) return;\n setBusy(true);\n try {\n await onSave({\n title: draft.title.trim(),\n description: draft.description.trim() || null,\n quarter: draft.quarter,\n workspace: draft.workspace,\n owner: draft.owner.trim() || null,\n });\n } finally { setBusy(false); }\n };\n return h('section', {className:'glass-panel rounded-xl p-lg space-y-md border border-primary/30'},\n h('div', {className:'flex items-center justify-between'},\n h('h3', {className:'text-[16px] font-bold text-on-surface tracking-tight flex items-center gap-2'},\n h(Icon, {name:'flag', size:18, className:'text-primary'}), 'New Objective'),\n h('button', {onClick: onCancel, className:'text-text-muted hover:text-on-surface'},\n h(Icon, {name:'close', size:18}))\n ),\n h(Input, {label:'Objective title', value: draft.title, onChange: v => setDraft(d => ({...d, title: v})),\n placeholder:'Become the default AI ops layer for SAP EWM teams'}),\n h('div', null,\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast block mb-1'}, 'Description'),\n h('textarea', {\n value: draft.description, rows: 3,\n onChange: e => setDraft(d => ({...d, description: e.target.value})),\n placeholder:'The aspirational outcome — why this matters for the quarter.',\n className:'w-full p-2.5 bg-surface-container-lowest border border-border-subtle rounded-lg text-[13px] text-on-surface outline-none focus:border-primary transition-all resize-none',\n style:{fontFamily:'inherit'}\n })\n ),\n h('div', {className:'grid grid-cols-1 sm:grid-cols-3 gap-md'},\n h('div', null,\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast block mb-1'}, 'Quarter'),\n h('select', {\n value: draft.quarter, onChange: e => setDraft(d => ({...d, quarter: e.target.value})),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] font-mono-data text-on-surface focus:border-primary focus:outline-none'\n }, QUARTERS.map(q => h('option', {key:q, value:q}, q)))\n ),\n h('div', null,\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast block mb-1'}, 'Workspace'),\n h('select', {\n value: draft.workspace, onChange: e => setDraft(d => ({...d, workspace: e.target.value})),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none capitalize'\n }, WORKSPACES.filter(w => w !== 'all').map(w => h('option', {key:w, value:w}, w)))\n ),\n h(Input, {label:'Owner', value: draft.owner, onChange: v => setDraft(d => ({...d, owner: v})), placeholder:'Founder / team lead'})\n ),\n h('div', {className:'flex justify-end gap-2 pt-1'},\n h(Btn, {onClick: onCancel, variant:'ghost', size:'sm', disabled: busy}, 'Cancel'),\n h(Btn, {onClick: submit, variant:'primary', size:'sm', disabled: busy || !draft.title.trim()},\n busy ? h(Spinner, {size:13}) : h(Icon, {name:'flag', size:14}),\n busy ? 'Creating…' : 'Create Objective'\n )\n )\n );\n}\n\n// ─── ObjectivesPage ─────────────────────────────────────────────────────────\nexport function ObjectivesPage({setActivePage}) {\n const {Icon, Btn, MetricCard, PageHeader, Spinner} = N();\n const [quarter, setQuarter] = useState(currentQuarter());\n const [workspace, setWorkspace] = useState('all');\n const [okrs, setOkrs] = useState([]);\n const [dash, setDash] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [creating, setCreating] = useState(false);\n\n const loadOkrs = async () => {\n setLoading(true); setError(null);\n try {\n const qs = new URLSearchParams();\n if (quarter) qs.set('quarter', quarter);\n if (workspace && workspace !== 'all') qs.set('workspace', workspace);\n const r = await fetch('/api/okrs?' + qs.toString());\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const d = await r.json();\n setOkrs(Array.isArray(d) ? d : []);\n } catch (e) { setError(e.message); }\n finally { setLoading(false); }\n };\n\n const loadDash = async () => {\n try {\n const r = await fetch('/api/okrs/dashboard');\n if (!r.ok) return;\n setDash(await r.json());\n } catch {}\n };\n\n useEffect(() => { loadOkrs(); }, [quarter, workspace]);\n useEffect(() => { loadDash(); }, [okrs.length]);\n\n const createObjective = async (payload) => {\n try {\n const r = await fetch('/api/okrs', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(payload)\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const created = await r.json();\n // Optimistic: only prepend if it matches active filters.\n const matchesQ = !quarter || created.quarter === quarter;\n const matchesW = !workspace || workspace === 'all' || created.workspace === workspace;\n if (matchesQ && matchesW) {\n setOkrs(prev => [created, ...prev]);\n } else {\n // Filter mismatch — jump to the created OKR's quarter/workspace.\n if (created.quarter) setQuarter(created.quarter);\n if (created.workspace) setWorkspace(created.workspace);\n }\n setCreating(false);\n loadDash();\n } catch (e) { alert('Failed to create objective: ' + e.message); }\n };\n\n const updateObjective = async (id, patch) => {\n setOkrs(prev => prev.map(o => o.id === id ? {...o, ...patch} : o));\n try {\n const r = await fetch('/api/okrs/' + id, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(patch)\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const updated = await r.json();\n setOkrs(prev => prev.map(o => o.id === id ? updated : o));\n } catch (e) { loadOkrs(); }\n };\n\n const deleteObjective = async (id) => {\n if (!confirm('Delete this objective and all its key results? This cannot be undone.')) return;\n setOkrs(prev => prev.filter(o => o.id !== id));\n try {\n await fetch('/api/okrs/' + id, {method:'DELETE'});\n loadDash();\n } catch (e) { loadOkrs(); }\n };\n\n const addKR = async (okrId, payload) => {\n try {\n const r = await fetch('/api/okrs/' + okrId + '/key-results', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(payload)\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const created = await r.json();\n setOkrs(prev => prev.map(o => o.id === okrId\n ? {...o, key_results: [...(o.key_results || []), created]}\n : o));\n loadDash();\n } catch (e) { alert('Failed to add KR: ' + e.message); }\n };\n\n const updateKR = async (okrId, krId, patch) => {\n setOkrs(prev => prev.map(o => o.id === okrId\n ? {...o, key_results: (o.key_results || []).map(k => k.id === krId ? {...k, ...patch} : k)}\n : o));\n try {\n const r = await fetch('/api/key-results/' + krId, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(patch)\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const updated = await r.json();\n setOkrs(prev => prev.map(o => o.id === okrId\n ? {...o, key_results: (o.key_results || []).map(k => k.id === krId ? updated : k)}\n : o));\n loadDash();\n } catch (e) { loadOkrs(); }\n };\n\n return h('div', {className:'p-lg lg:p-xl space-y-xl max-w-7xl mx-auto pb-32'},\n h(PageHeader, {\n title:'Objectives',\n subtitle:'OKRs aligned to the North Star — auto-synced from your funnel data.',\n action: h('div', {className:'flex items-center gap-2'},\n // Funnel→OKR sync now happens on the cron + on demand (GET no longer writes on read).\n h('button', {\n onClick: async () => {\n try {\n await fetch('/api/okrs/sync', {method:'POST'});\n loadOkrs(); loadDash();\n } catch (e) {}\n },\n title:'Refresh KR progress from live funnel data',\n className:'inline-flex items-center gap-1 text-[11px] font-semibold uppercase tracking-widest text-text-muted hover:text-on-surface px-2.5 py-1.5 rounded-md border border-border-subtle hover:border-primary/40 transition-colors'\n },\n h(Icon, {name:'sync', size:13}), 'Sync'\n ),\n // P3 wire: CSV export (token-bearing download — see __nexusDownload)\n h('button', {\n onClick: () => window.__nexusDownload('/api/export/okrs'),\n className:'inline-flex items-center gap-1 text-[11px] font-semibold uppercase tracking-widest text-text-muted hover:text-on-surface px-2.5 py-1.5 rounded-md border border-border-subtle hover:border-primary/40 transition-colors'\n },\n h(Icon, {name:'download', size:13}), 'Export CSV'\n ),\n h(Btn, {onClick: () => setCreating(true), variant:'primary', size:'sm', disabled: creating},\n h(Icon, {name:'add', size:14}), 'New Objective'\n )\n )\n }),\n\n // ─── Dashboard summary bento ──────────────────────────────────────────\n h('div', {className:'grid grid-cols-2 lg:grid-cols-5 gap-md'},\n h(MetricCard, {\n icon:'flag', color:'#c0c1ff', title:'Total Objectives',\n value: dash ? String(dash.total) : '—',\n subtitle: dash ? (dash.quarter || quarter) : 'loading…'\n }),\n h(MetricCard, {\n icon:'trending_up', color:'#4edea3', title:'On Track',\n value: dash ? String(dash.on_track) : '—',\n subtitle:'progress ≥ 70%'\n }),\n h(MetricCard, {\n icon:'warning', color:'#d0bcff', title:'At Risk',\n value: dash ? String(dash.at_risk) : '—',\n subtitle:'40-69% progress'\n }),\n h(MetricCard, {\n icon:'error', color:'#ffb4ab', title:'Off Track',\n value: dash ? String(dash.off_track) : '—',\n subtitle:'below 40%'\n }),\n h(MetricCard, {\n icon:'speed', color:'#c0c1ff', title:'Avg KR Progress',\n value: dash ? (Math.round(dash.avg_progress || 0) + '%') : '—',\n subtitle: dash && dash.quarter ? ('quarter ' + dash.quarter) : 'rolling'\n })\n ),\n\n // ─── Filter bar ───────────────────────────────────────────────────────\n h('div', {className:'glass-panel rounded-xl p-md flex items-center justify-between flex-wrap gap-3'},\n h('div', {className:'flex items-center gap-1 flex-wrap'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mr-2'}, 'Quarter'),\n QUARTERS.map(q => h('button', {\n key: q, onClick: () => setQuarter(q), type:'button',\n className:'px-2.5 py-1 rounded-md text-[11px] font-bold uppercase tracking-wider transition-all ' +\n (quarter === q ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface bg-surface-container-lowest border border-border-subtle')\n }, q))\n ),\n h('div', {className:'flex items-center gap-2'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Workspace'),\n h('select', {\n value: workspace, onChange: e => setWorkspace(e.target.value),\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[12px] text-on-surface capitalize focus:border-primary focus:outline-none'\n }, WORKSPACES.map(w => h('option', {key: w, value: w}, w === 'all' ? 'All workspaces' : w)))\n )\n ),\n\n // ─── New-objective inline form ────────────────────────────────────────\n creating && h(ObjectiveForm, {\n quarter, workspace,\n onSave: createObjective,\n onCancel: () => setCreating(false)\n }),\n\n // ─── Loading / error / empty / grid ───────────────────────────────────\n loading && okrs.length === 0\n ? h('div', {className:'flex items-center justify-center py-16 text-text-muted gap-2'},\n h(Spinner, {size:18}), h('span', {className:'text-[13px]'}, 'Loading objectives…')\n )\n : error\n ? h('div', {className:'glass-panel rounded-xl p-lg text-error text-[13px] flex items-center gap-2'},\n h(Icon, {name:'error', size:16}), 'Failed to load objectives: ' + error\n )\n : okrs.length === 0\n ? h('div', {className:'glass-panel rounded-xl p-xl text-center space-y-3'},\n h('div', {className:'w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto'},\n h(Icon, {name:'flag', size:28, className:'text-primary'})\n ),\n h('h3', {className:'text-[16px] font-bold text-on-surface'},\n 'No objectives for ' + quarter + (workspace !== 'all' ? ' · ' + workspace : '')\n ),\n h('p', {className:'text-[13px] text-text-muted max-w-md mx-auto'},\n 'Set the first one to align the team. Each objective gets 2–5 key results — measurable, time-boxed, and ideally auto-synced from your integrations.'\n ),\n h('div', {className:'flex justify-center gap-2 pt-2'},\n h(Btn, {onClick: () => setCreating(true), variant:'primary', size:'sm'},\n h(Icon, {name:'add', size:14}), 'Create first objective'\n ),\n h(Btn, {onClick: () => setActivePage && setActivePage('settings'), variant:'ghost', size:'sm'},\n h(Icon, {name:'cable', size:14}), 'Connect data sources'\n )\n )\n )\n : h('div', {className:'grid grid-cols-1 xl:grid-cols-2 gap-lg'},\n okrs.map(okr => h(ObjectiveCard, {\n key: okr.id,\n okr,\n onUpdate: (patch) => updateObjective(okr.id, patch),\n onDelete: () => deleteObjective(okr.id),\n onAddKR: (payload) => addKR(okr.id, payload),\n onUpdateKR: (krId, patch) => updateKR(okr.id, krId, patch),\n }))\n )\n );\n}\n\n// ─── OKRBadge (Sidebar nav) ─────────────────────────────────────────────────\n// Compact at-risk/off-track counter for the Objectives nav row.\nexport function OKRBadge({onClick}) {\n const [stats, setStats] = useState(null);\n useEffect(() => {\n let mounted = true;\n const load = async () => {\n try {\n const r = await fetch('/api/okrs/dashboard');\n if (!r.ok) return;\n const d = await r.json();\n if (mounted) setStats(d);\n } catch {}\n };\n load();\n const ms = (window.__nexus && window.__nexus.autoSyncMs) || 60000;\n const iv = setInterval(load, ms);\n return () => { mounted = false; clearInterval(iv); };\n }, []);\n if (!stats || !stats.total) return null;\n const danger = (stats.off_track || 0) + (stats.at_risk || 0);\n if (!danger) {\n return h('span', {\n onClick,\n className:'inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-widest bg-secondary/15 text-secondary border border-secondary/30 cursor-pointer',\n title: stats.total + ' objectives · all on track'\n }, stats.total, h('span', {className:'opacity-70'}, 'OKR'));\n }\n const critical = (stats.off_track || 0) > 0;\n return h('span', {\n onClick,\n className:'inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-widest cursor-pointer ' +\n (critical ? 'bg-error/15 text-error border border-error/30 pulse-dot' : 'bg-tertiary/15 text-tertiary border border-tertiary/30'),\n title: danger + ' KR' + (danger === 1 ? '' : 's') + ' needing attention'\n }, danger, h('span', {className:'opacity-70'}, '!'));\n}\n\nexport { ObjectivesPage as default };\n `;\n}\n",[330],"0b356f66-5f15-11f1-97b6-1607ee4eb77e","frontend_marketing3.ts","0b357060-5f15-11f1-97b6-1607ee4eb77e",1008,["D",1780467941202],"// frontend_marketing3.ts — Wave 2 Marketing operating-surface components.\n// Served at /api/app-marketing3 (router.ts jsModules), lazy-imported by frontend_pages.ts\n// (MarketingWorkspace). Split out of frontend_marketing2.ts to keep each val.town source\n// file under the 80 000-byte source-file limit. Emits an ES module that EXPORTS named React\n// components consumed as Marketing sub-tabs / panels — all REAL-DATA, honest empty states,\n// pixel-faithful to the same CRM visual language as Wave 1:\n//\n// FormsView — /api/marketing/forms CRUD + per-form submissions (public submit endpoint).\n// LandingView — /api/marketing/landing builder + publish to public /api/marketing/p/:slug.\n// SegmentsView — /api/marketing/segments rule builder + live preview (/segments/preview).\n// ListsView — /api/marketing/lists static/dynamic lists + members (materialize from segment).\n// HandoffView — /api/marketing/handoff/mql-ready + /promote (MQL -> CRM deal).\n//\n// All endpoints are tenant-scoped JSON (see api/marketing.ts + api/marketing_routes.ts); the\n// public form-submit and landing-page routes resolve the tenant from the stored record, never\n// from the session. Shared deps from window.__nexus: Icon, Btn, Spinner.\nexport function getMarketing3JS(): string {\n return `\nimport React, { useState, useEffect, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// ─── Shared helpers (mirrored from frontend_marketing2.ts visual language) ──────\nconst fmtNum = (n) => {\n const v = Number(n) || 0;\n if (Math.abs(v) >= 1000000) return (v/1000000).toFixed(1).replace(/\\\\.0$/,'') + 'M';\n if (Math.abs(v) >= 1000) return (v/1000).toFixed(1).replace(/\\\\.0$/,'') + 'K';\n return Number.isInteger(v) ? String(v) : v.toFixed(1);\n};\nconst fmtRel = (iso) => {\n if (!iso) return '';\n const ms = Date.now() - new Date(iso).getTime();\n if (isNaN(ms)) return '';\n if (ms < 3600000) return Math.max(1, Math.floor(ms/60000)) + 'm ago';\n if (ms < 86400000) return Math.floor(ms/3600000) + 'h ago';\n if (ms < 2592000000) return Math.floor(ms/86400000) + 'd ago';\n return new Date(iso).toLocaleDateString('en-US', {month:'short', day:'numeric'});\n};\nconst colorFromName = (name) => {\n const colors = ['#c0c1ff','#4edea3','#d0bcff','#8083ff','#6ffbbe','#a078ff','#e1e0ff','#494bd6'];\n const sum = (name||'').split('').reduce((a,c) => a + c.charCodeAt(0), 0);\n return colors[sum % colors.length];\n};\nconst titleCase = (s) => String(s||'').replace(/[_-]/g,' ').replace(/\\\\b\\\\w/g, c => c.toUpperCase()).trim();\n\n// ─── Small shared UI atoms (mirrored from frontend_marketing2.ts) ──────────────\nfunction Section({title, icon, accent, right, children, sub}) {\n const { Icon } = N();\n return h('div', {className:'glass-panel rounded-xl p-lg space-y-4'},\n h('div', {className:'flex items-start justify-between gap-3'},\n h('div', {className:'min-w-0'},\n h('div', {className:'flex items-center gap-2'},\n icon && Icon && h(Icon, {name: icon, size:16, className: accent || 'text-primary'}),\n h('h3', {className:'text-[14px] font-bold text-on-surface'}, title)\n ),\n sub && h('div', {className:'text-[11px] text-text-muted mt-0.5'}, sub)\n ),\n right\n ),\n children\n );\n}\nconst EmptyNote = (msg) => h('div', {className:'text-[12px] text-text-muted italic py-2'}, msg);\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 7) FORMS VIEW (capture forms + submissions) /api/marketing/forms\n// ═══════════════════════════════════════════════════════════════════════════════\nconst FIELD_TYPES = ['text','email','tel','textarea','select','checkbox'];\nconst slugify = (s) => String(s||'').toLowerCase().trim().replace(/[^a-z0-9]+/g,'_').replace(/^_+|_+$/g,'') || 'field';\n\nfunction copyToClipboard(txt) { try { navigator.clipboard.writeText(txt); } catch (e) {} }\n\nexport function FormsView() {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [editing, setEditing] = useState(null); // form object or {} for new\n const [openId, setOpenId] = useState(null);\n const [copied, setCopied] = useState('');\n\n const load = useCallback(() => {\n fetch('/api/marketing/forms').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const save = async (p) => {\n const body = {name: p.name, fields: p.fields || [], success_message: p.success_message || '', asset_url: p.asset_url || '', redirect_url: p.redirect_url || ''};\n if (p.id) await fetch('/api/marketing/forms/' + p.id, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n else await fetch('/api/marketing/forms', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n setEditing(null); load();\n };\n const del = async (id) => {\n await fetch('/api/marketing/forms/' + id, {method:'DELETE'}).catch(()=>{});\n if (openId === id) setOpenId(null);\n load();\n };\n const copyLink = (id) => {\n const url = (typeof location !== 'undefined' ? location.origin : '') + '/api/marketing/forms/' + id + '/submit';\n copyToClipboard(url); setCopied(id); setTimeout(() => setCopied(''), 1400);\n };\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Capture forms', icon:'list_alt', accent:'text-primary',\n sub:'Lead-capture forms \\\\u00B7 embed on a landing page or POST submissions to convert anonymous traffic',\n right: h(Btn, {onClick: () => setEditing({name:'', fields:[], success_message:'', asset_url:'', redirect_url:''}), variant:'primary', size:'sm'}, h(Icon,{name:'add',size:14}), 'New form')},\n editing && h(FormBuilder, {form: editing, onCancel: () => setEditing(null), onSave: save}),\n rows === null\n ? h('div', {className:'flex items-center justify-center py-10'}, h(Spinner,{size:18}))\n : rows.length === 0\n ? EmptyNote('No forms yet \\\\u2014 click \\\\u201CNew form\\\\u201D to build a lead-capture form. Attach it to a landing page to start collecting submissions.')\n : h('div', {className:'space-y-2'},\n rows.map(form => {\n const fields = parseFields(form.fields);\n return h('div', {key:form.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg overflow-hidden'},\n h('div', {className:'flex items-center gap-2 px-3 py-2.5'},\n h('span', {className:'w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0', style:{background: colorFromName(form.name)+'22', color: colorFromName(form.name)}}, h(Icon,{name:'list_alt', size:16})),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[13px] font-bold text-on-surface truncate'}, form.name || '(untitled form)'),\n h('div', {className:'text-[10px] text-text-muted truncate'},\n fields.length + ' field' + (fields.length===1?'':'s') + ' \\\\u00B7 ' + (Number(form.submit_count)||0) + ' submission' + ((Number(form.submit_count)||0)===1?'':'s') + (form.updated_at ? ' \\\\u00B7 ' + fmtRel(form.updated_at) : ''))\n ),\n form.asset_url && h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border font-bold bg-tertiary/10 text-tertiary border-tertiary/30'}, 'lead magnet'),\n h('button', {onClick: () => copyLink(form.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Copy submit endpoint (test link)'}, h(Icon,{name: copied === form.id ? 'check' : 'content_copy', size:13})),\n h('button', {onClick: () => setOpenId(openId === form.id ? null : form.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Submissions'}, h(Icon,{name: openId === form.id ? 'expand_more' : 'inbox', size:13})),\n h('button', {onClick: () => setEditing(form), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Edit'}, h(Icon,{name:'edit',size:13})),\n h('button', {onClick: () => del(form.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Delete'}, h(Icon,{name:'delete',size:13}))\n ),\n openId === form.id && h(FormSubmissions, {formId: form.id, form})\n );\n })\n )\n )\n );\n}\n\nfunction parseFields(raw) {\n if (Array.isArray(raw)) return raw;\n if (typeof raw === 'string' && raw.trim()) { try { const a = JSON.parse(raw); return Array.isArray(a) ? a : []; } catch { return []; } }\n return [];\n}\n\nfunction FormBuilder({form, onCancel, onSave}) {\n const { Icon, Btn } = N();\n const [name, setName] = useState(form.name || '');\n const [fields, setFields] = useState(parseFields(form.fields));\n const [successMsg, setSuccessMsg] = useState(form.success_message || '');\n const [assetUrl, setAssetUrl] = useState(form.asset_url || '');\n const [redirectUrl, setRedirectUrl] = useState(form.redirect_url || '');\n const [busy, setBusy] = useState(false);\n\n const addField = () => setFields(fs => [...fs, {name:'', label:'', type:'text', required:false}]);\n const upd = (i, k, v) => setFields(fs => fs.map((f,idx) => idx===i ? {...f, [k]: v, name: k==='label' ? slugify(v) : f.name} : f));\n const rm = (i) => setFields(fs => fs.filter((_,idx) => idx!==i));\n\n const submit = async () => {\n setBusy(true);\n const cleaned = fields.filter(f => String(f.label||'').trim()).map(f => ({name: f.name || slugify(f.label), label: f.label.trim(), type: f.type || 'text', required: !!f.required}));\n await onSave({...form, name: name.trim(), fields: cleaned, success_message: successMsg.trim(), asset_url: assetUrl.trim(), redirect_url: redirectUrl.trim()});\n setBusy(false);\n };\n\n return h('div', {className:'mb-3 bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2.5'},\n h('div', {className:'text-[11px] font-bold text-on-surface'}, form.id ? 'Edit form' : 'New form'),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Form name *'),\n h('input', {type:'text', value: name, onChange: e => setName(e.target.value), placeholder:'Demo request',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n // Fields editor\n h('div', {className:'flex flex-col gap-1.5'},\n h('div', {className:'flex items-center justify-between'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Fields'),\n h('button', {onClick: addField, className:'text-[11px] text-primary hover:underline flex items-center gap-1 font-semibold'}, h(Icon,{name:'add',size:13}), 'Add field')\n ),\n fields.length === 0\n ? EmptyNote('No fields yet \\\\u2014 add at least an email field to identify leads.')\n : h('div', {className:'space-y-1.5'},\n fields.map((f,i) => h('div', {key:i, className:'flex items-center gap-1.5'},\n h('input', {type:'text', value: f.label, onChange: e => upd(i,'label', e.target.value), placeholder:'Label (e.g. Work email)',\n className:'flex-1 bg-surface-container border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'}),\n h('select', {value: f.type, onChange: e => upd(i,'type', e.target.value),\n className:'bg-surface-container border border-border-subtle rounded-md px-1.5 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'},\n FIELD_TYPES.map(t => h('option', {key:t, value:t}, t))),\n h('label', {className:'flex items-center gap-1 text-[10px] text-text-muted cursor-pointer select-none', title:'Required'},\n h('input', {type:'checkbox', checked: !!f.required, onChange: e => upd(i,'required', e.target.checked)}), 'req'),\n h('button', {onClick: () => rm(i), className:'w-6 h-6 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Remove'}, h(Icon,{name:'close',size:12}))\n ))\n )\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Success message'),\n h('input', {type:'text', value: successMsg, onChange: e => setSuccessMsg(e.target.value), placeholder:'Thanks \\\\u2014 we\\\\u2019ll be in touch shortly.',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-2'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Asset URL (lead magnet \\\\u2014 optional)'),\n h('input', {type:'text', value: assetUrl, onChange: e => setAssetUrl(e.target.value), placeholder:'https://\\\\u2026/whitepaper.pdf',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Redirect URL (optional)'),\n h('input', {type:'text', value: redirectUrl, onChange: e => setRedirectUrl(e.target.value), placeholder:'https://\\\\u2026/thank-you',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n )\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: submit, variant:'primary', size:'sm', disabled: busy || !name.trim()}, h(Icon,{name:'save',size:14}), 'Save form'),\n h('button', {onClick: onCancel, className:'text-[12px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n );\n}\n\nfunction FormSubmissions({formId, form}) {\n const { Icon, Spinner } = N();\n const [rows, setRows] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/marketing/forms/' + formId + '/submissions').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n }, [formId]);\n useEffect(() => { load(); }, [load]);\n\n return h('div', {className:'border-t border-border-subtle px-3 py-2.5 bg-surface-container/20 space-y-2'},\n h('div', {className:'flex items-center gap-2 text-[10px] text-text-muted'},\n h(Icon, {name:'info', size:12, className:'flex-shrink-0'}),\n h('span', null, 'Embed this form on a landing page (Capture \\\\u2192 Landing pages) or POST to /api/marketing/forms/' + formId + '/submit. Submissions upsert a contact, log an intent signal and create a lead.')\n ),\n rows === null\n ? h('div', {className:'flex items-center justify-center py-4'}, h(Spinner,{size:14}))\n : rows.length === 0\n ? EmptyNote('No submissions yet.')\n : h('div', {className:'overflow-x-auto'},\n h('div', {className:'min-w-[420px] space-y-1'},\n h('div', {className:'grid grid-cols-12 gap-2 px-2 py-1 text-[10px] uppercase tracking-widest text-text-muted font-bold'},\n h('div', {className:'col-span-4'}, 'Email'),\n h('div', {className:'col-span-3'}, 'Name'),\n h('div', {className:'col-span-3'}, 'Data'),\n h('div', {className:'col-span-2 text-right'}, 'When')\n ),\n rows.map(s => {\n const data = (typeof s.data === 'string') ? (() => { try { return JSON.parse(s.data); } catch { return {}; } })() : (s.data || {});\n const extra = Object.entries(data).filter(([k]) => k !== 'email' && k !== 'name' && k !== 'lead_email' && k !== 'lead_name').slice(0,3).map(([k,v]) => titleCase(k) + ': ' + String(v).slice(0,24)).join(' \\\\u00B7 ');\n return h('div', {key:s.id, className:'grid grid-cols-12 gap-2 px-2 py-1.5 items-center text-[11px] border-t border-border-subtle/40'},\n h('div', {className:'col-span-4 text-on-surface truncate font-mono-data'}, s.lead_email || '\\\\u2014'),\n h('div', {className:'col-span-3 text-on-surface-variant truncate'}, s.lead_name || '\\\\u2014'),\n h('div', {className:'col-span-3 text-text-muted truncate'}, extra || '\\\\u2014'),\n h('div', {className:'col-span-2 text-right text-text-muted font-mono-data'}, s.created_at ? fmtRel(s.created_at) : '')\n );\n })\n )\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 8) LANDING VIEW (landing-page builder + public URL) /api/marketing/landing\n// ═══════════════════════════════════════════════════════════════════════════════\nconst BLOCK_TYPES = [\n {type:'heading', label:'Heading', icon:'title'},\n {type:'text', label:'Text', icon:'notes'},\n {type:'image', label:'Image', icon:'image'},\n {type:'cta', label:'CTA', icon:'ads_click'},\n];\nconst blockMeta = (t) => BLOCK_TYPES.find(b => b.type === t) || BLOCK_TYPES[1];\n\nexport function LandingView() {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [forms, setForms] = useState([]);\n const [editing, setEditing] = useState(null);\n const [copied, setCopied] = useState('');\n\n const load = useCallback(() => {\n fetch('/api/marketing/landing').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n fetch('/api/marketing/forms').then(r => r.json()).then(d => setForms(Array.isArray(d) ? d : [])).catch(() => {});\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const save = async (p) => {\n const body = {title: p.title, subtitle: p.subtitle || '', blocks: p.blocks || [], form_id: p.form_id || null, theme: p.theme || 'dark'};\n if (!p.id) body.slug = p.slug || '';\n if (p.id) await fetch('/api/marketing/landing/' + p.id, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n else await fetch('/api/marketing/landing', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n setEditing(null); load();\n };\n const del = async (id) => {\n await fetch('/api/marketing/landing/' + id, {method:'DELETE'}).catch(()=>{});\n load();\n };\n const togglePublish = async (p) => {\n await fetch('/api/marketing/landing/' + p.id + '/publish', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({published: p.published ? 0 : 1})}).catch(()=>{});\n load();\n };\n const publicUrl = (slug) => (typeof location !== 'undefined' ? location.origin : '') + '/api/marketing/p/' + slug;\n const copyUrl = (slug) => { copyToClipboard(publicUrl(slug)); setCopied(slug); setTimeout(() => setCopied(''), 1400); };\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Landing pages', icon:'web', accent:'text-primary',\n sub:'Public landing pages with an embedded capture form \\\\u00B7 served at /api/marketing/p/:slug',\n right: h(Btn, {onClick: () => setEditing({title:'', subtitle:'', slug:'', blocks:[], form_id:null, theme:'dark'}), variant:'primary', size:'sm'}, h(Icon,{name:'add',size:14}), 'New page')},\n editing && h(LandingBuilder, {page: editing, forms, onCancel: () => setEditing(null), onSave: save}),\n rows === null\n ? h('div', {className:'flex items-center justify-center py-10'}, h(Spinner,{size:18}))\n : rows.length === 0\n ? EmptyNote('No landing pages yet \\\\u2014 click \\\\u201CNew page\\\\u201D to build one, attach a capture form and publish it to a public URL.')\n : h('div', {className:'space-y-2'},\n rows.map(p => h('div', {key:p.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2.5 flex items-center gap-2'},\n h('span', {className:'w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0', style:{background: colorFromName(p.title)+'22', color: colorFromName(p.title)}}, h(Icon,{name:'web', size:16})),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'flex items-center gap-2'},\n h('div', {className:'text-[13px] font-bold text-on-surface truncate'}, p.title || '(untitled page)'),\n p.published\n ? h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border font-bold bg-secondary/15 text-secondary border-secondary/40'}, 'live')\n : h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border font-bold bg-surface-container-high text-text-muted border-border-subtle'}, 'draft')\n ),\n h('div', {className:'text-[10px] text-text-muted truncate font-mono-data'}, '/api/marketing/p/' + (p.slug||'') + ' \\\\u00B7 ' + (Number(p.view_count)||0) + ' view' + ((Number(p.view_count)||0)===1?'':'s'))\n ),\n p.published && h('button', {onClick: () => copyUrl(p.slug), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Copy public URL'}, h(Icon,{name: copied === p.slug ? 'check' : 'content_copy', size:13})),\n p.published && h('a', {href: publicUrl(p.slug), target:'_blank', rel:'noopener noreferrer', className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Open / live preview'}, h(Icon,{name:'open_in_new',size:13})),\n h('button', {onClick: () => togglePublish(p), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border ' + (p.published ? 'border-secondary/40 text-secondary' : 'border-border-subtle text-text-muted hover:text-secondary hover:border-secondary/40'), title: p.published ? 'Unpublish' : 'Publish'}, h(Icon,{name: p.published ? 'cloud_done' : 'cloud_upload', size:13})),\n h('button', {onClick: () => setEditing(p), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Edit'}, h(Icon,{name:'edit',size:13})),\n h('button', {onClick: () => del(p.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Delete'}, h(Icon,{name:'delete',size:13}))\n ))\n )\n )\n );\n}\n\nfunction parseBlocks(raw) {\n if (Array.isArray(raw)) return raw;\n if (typeof raw === 'string' && raw.trim()) { try { const a = JSON.parse(raw); return Array.isArray(a) ? a : []; } catch { return []; } }\n return [];\n}\n\nfunction LandingBuilder({page, forms, onCancel, onSave}) {\n const { Icon, Btn } = N();\n const [title, setTitle] = useState(page.title || '');\n const [subtitle, setSubtitle] = useState(page.subtitle || '');\n const [slug, setSlug] = useState(page.slug || '');\n const [formId, setFormId] = useState(page.form_id || '');\n const [blocks, setBlocks] = useState(parseBlocks(page.blocks));\n const [busy, setBusy] = useState(false);\n\n const addBlock = (type) => setBlocks(bs => [...bs, {type, value: ''}]);\n const updBlock = (i, v) => setBlocks(bs => bs.map((b,idx) => idx===i ? {...b, value: v} : b));\n const rmBlock = (i) => setBlocks(bs => bs.filter((_,idx) => idx!==i));\n const moveBlock = (i, dir) => setBlocks(bs => { const a=[...bs]; const j=i+dir; if(j<0||j>=a.length) return a; const t=a[i]; a[i]=a[j]; a[j]=t; return a; });\n\n const submit = async () => {\n setBusy(true);\n const cleaned = blocks.filter(b => String(b.value||'').trim()).map(b => ({type: b.type, value: b.value.trim()}));\n await onSave({...page, title: title.trim(), subtitle: subtitle.trim(), slug: slug.trim(), form_id: formId || null, blocks: cleaned});\n setBusy(false);\n };\n\n return h('div', {className:'mb-3 bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2.5'},\n h('div', {className:'text-[11px] font-bold text-on-surface'}, page.id ? 'Edit landing page' : 'New landing page'),\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-2'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Title *'),\n h('input', {type:'text', value: title, onChange: e => setTitle(e.target.value), placeholder:'Cut ops time in half',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, page.id ? 'Slug (locked)' : 'Slug (optional \\\\u2014 auto from title)'),\n h('input', {type:'text', value: slug, onChange: e => setSlug(e.target.value), disabled: !!page.id, placeholder:'cut-ops-time',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none font-mono-data disabled:opacity-50'})\n )\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Subtitle'),\n h('input', {type:'text', value: subtitle, onChange: e => setSubtitle(e.target.value), placeholder:'A one-line value proposition',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n // Blocks\n h('div', {className:'flex flex-col gap-1.5'},\n h('div', {className:'flex items-center justify-between flex-wrap gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Content blocks'),\n h('div', {className:'flex items-center gap-1'},\n BLOCK_TYPES.map(b => h('button', {key:b.type, onClick: () => addBlock(b.type), className:'text-[10px] text-primary hover:underline flex items-center gap-0.5 font-semibold'}, h(Icon,{name:b.icon,size:12}), b.label)))\n ),\n blocks.length === 0\n ? EmptyNote('No blocks \\\\u2014 add a heading, text, image or CTA above.')\n : h('div', {className:'space-y-1.5'},\n blocks.map((b,i) => { const m = blockMeta(b.type); return h('div', {key:i, className:'flex items-start gap-1.5'},\n h('span', {className:'mt-1.5 flex items-center gap-1 text-[9px] uppercase tracking-wider text-text-muted font-bold w-16 flex-shrink-0'}, h(Icon,{name:m.icon,size:12}), m.label),\n h('input', {type:'text', value: b.value, onChange: e => updBlock(i, e.target.value), placeholder: b.type==='image' ? 'https://\\\\u2026/image.png' : b.type==='cta' ? 'Button label' : b.type==='heading' ? 'Section heading' : 'Paragraph text',\n className:'flex-1 bg-surface-container border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'}),\n h('button', {onClick: () => moveBlock(i,-1), className:'w-6 h-6 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary', title:'Up'}, h(Icon,{name:'arrow_upward',size:11})),\n h('button', {onClick: () => moveBlock(i,1), className:'w-6 h-6 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary', title:'Down'}, h(Icon,{name:'arrow_downward',size:11})),\n h('button', {onClick: () => rmBlock(i), className:'w-6 h-6 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Remove'}, h(Icon,{name:'close',size:12}))\n ); })\n )\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Embedded capture form'),\n h('select', {value: formId || '', onChange: e => setFormId(e.target.value),\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'},\n h('option', {value:''}, '\\\\u2014 none \\\\u2014'),\n (forms||[]).map(fm => h('option', {key:fm.id, value:fm.id}, fm.name || '(untitled form)')))\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: submit, variant:'primary', size:'sm', disabled: busy || !title.trim()}, h(Icon,{name:'save',size:14}), 'Save page'),\n h('button', {onClick: onCancel, className:'text-[12px] text-text-muted hover:text-on-surface'}, 'Cancel'),\n h('span', {className:'text-[10px] text-text-muted'}, 'Publish from the list to get a public URL.')\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 9) SEGMENTS VIEW (rule builder + live preview) /api/marketing/segments\n// ═══════════════════════════════════════════════════════════════════════════════\nconst SEG_FIELDS = [\n {field:'email', label:'Email', group:'contact'},\n {field:'company', label:'Company', group:'contact'},\n {field:'title', label:'Job title', group:'contact'},\n {field:'lifecycle', label:'Lifecycle', group:'contact'},\n {field:'grade', label:'Lead grade', group:'lead'},\n {field:'status', label:'Lead status', group:'lead'},\n {field:'score', label:'Lead score', group:'lead'},\n {field:'intent_count', label:'Intent signals',group:'intent'},\n];\nconst SEG_OPS = [\n {op:'eq', label:'is'},\n {op:'neq', label:'is not'},\n {op:'contains', label:'contains'},\n {op:'gt', label:'>'},\n {op:'gte', label:'\\\\u2265'},\n {op:'lt', label:'<'},\n {op:'lte', label:'\\\\u2264'},\n {op:'exists', label:'is set'},\n];\nconst segFieldLabel = (f) => (SEG_FIELDS.find(x => x.field === f) || {label: titleCase(f)}).label;\n\nexport function SegmentsView() {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [editing, setEditing] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/marketing/segments').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const save = async (p) => {\n const body = {name: p.name, description: p.description || '', kind: p.kind || 'dynamic', rules: p.rules || []};\n if (p.id) await fetch('/api/marketing/segments/' + p.id, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n else await fetch('/api/marketing/segments', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n setEditing(null); load();\n };\n const del = async (id) => {\n await fetch('/api/marketing/segments/' + id, {method:'DELETE'}).catch(()=>{});\n load();\n };\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Segments', icon:'filter_alt', accent:'text-primary',\n sub:'Rule-based audiences over contacts \\\\u00D7 lead status \\\\u00D7 intent \\\\u00B7 live preview before you save',\n right: h(Btn, {onClick: () => setEditing({name:'', description:'', kind:'dynamic', rules:[{field:'grade', op:'eq', value:'A'}]}), variant:'primary', size:'sm'}, h(Icon,{name:'add',size:14}), 'New segment')},\n editing && h(SegmentBuilder, {segment: editing, onCancel: () => setEditing(null), onSave: save}),\n rows === null\n ? h('div', {className:'flex items-center justify-center py-10'}, h(Spinner,{size:18}))\n : rows.length === 0\n ? EmptyNote('No segments yet \\\\u2014 build a rule set (e.g. lead grade is A) and save it as a reusable audience.')\n : h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-3'},\n rows.map(s => {\n const rules = parseRules(s.rules);\n return h('div', {key:s.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-3 space-y-2'},\n h('div', {className:'flex items-start gap-2'},\n h('span', {className:'w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0', style:{background: colorFromName(s.name)+'22', color: colorFromName(s.name)}}, h(Icon,{name:'filter_alt', size:16})),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'flex items-center gap-2'},\n h('div', {className:'text-[13px] font-bold text-on-surface truncate'}, s.name || '(untitled)'),\n h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border font-bold ' + (s.kind==='static' ? 'bg-surface-container-high text-on-surface-variant border-border-subtle' : 'bg-primary/10 text-primary border-primary/30')}, s.kind || 'dynamic')\n ),\n s.description && h('div', {className:'text-[11px] text-on-surface-variant truncate'}, s.description)\n ),\n h('div', {className:'flex items-center gap-1 flex-shrink-0'},\n h('button', {onClick: () => setEditing(s), className:'w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Edit'}, h(Icon,{name:'edit',size:13})),\n h('button', {onClick: () => del(s.id), className:'w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Delete'}, h(Icon,{name:'delete',size:13}))\n )\n ),\n rules.length > 0 && h('div', {className:'flex flex-wrap gap-1'},\n rules.slice(0,6).map((r,i) => h('span', {key:i, className:'text-[10px] font-mono-data text-text-muted bg-surface-container-high rounded px-1.5 py-0.5'},\n segFieldLabel(r.field) + ' ' + ((SEG_OPS.find(o=>o.op===r.op)||{label:r.op}).label) + (r.op==='exists' ? '' : ' ' + String(r.value).slice(0,20)))))\n );\n })\n )\n )\n );\n}\n\nfunction parseRules(raw) {\n if (Array.isArray(raw)) return raw;\n if (typeof raw === 'string' && raw.trim()) { try { const a = JSON.parse(raw); return Array.isArray(a) ? a : []; } catch { return []; } }\n return [];\n}\n\nfunction SegmentBuilder({segment, onCancel, onSave}) {\n const { Icon, Btn, Spinner } = N();\n const [name, setName] = useState(segment.name || '');\n const [description, setDescription] = useState(segment.description || '');\n const [kind, setKind] = useState(segment.kind || 'dynamic');\n const [rules, setRules] = useState(parseRules(segment.rules));\n const [preview, setPreview] = useState(null);\n const [previewing, setPreviewing] = useState(false);\n const [busy, setBusy] = useState(false);\n\n const addRule = () => setRules(rs => [...rs, {field:'grade', op:'eq', value:''}]);\n const updRule = (i, k, v) => setRules(rs => rs.map((r,idx) => idx===i ? {...r, [k]: v} : r));\n const rmRule = (i) => setRules(rs => rs.filter((_,idx) => idx!==i));\n\n const runPreview = async () => {\n setPreviewing(true);\n const d = await fetch('/api/marketing/segments/preview', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({rules})}).then(r => r.json()).catch(() => null);\n setPreview(d && typeof d === 'object' ? d : {count:0, sample:[]});\n setPreviewing(false);\n };\n\n const submit = async () => {\n setBusy(true);\n await onSave({...segment, name: name.trim(), description: description.trim(), kind, rules: rules.filter(r => r.field && r.op)});\n setBusy(false);\n };\n\n return h('div', {className:'mb-3 bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2.5'},\n h('div', {className:'text-[11px] font-bold text-on-surface'}, segment.id ? 'Edit segment' : 'New segment'),\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-2'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Name *'),\n h('input', {type:'text', value: name, onChange: e => setName(e.target.value), placeholder:'Hot enterprise leads',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Kind'),\n h('select', {value: kind, onChange: e => setKind(e.target.value),\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'},\n h('option', {value:'dynamic'}, 'Dynamic (re-evaluated)'), h('option', {value:'static'}, 'Static (snapshot)'))\n )\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Description'),\n h('input', {type:'text', value: description, onChange: e => setDescription(e.target.value), placeholder:'Optional',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n // Rules\n h('div', {className:'flex flex-col gap-1.5'},\n h('div', {className:'flex items-center justify-between'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Rules (all must match)'),\n h('button', {onClick: addRule, className:'text-[11px] text-primary hover:underline flex items-center gap-1 font-semibold'}, h(Icon,{name:'add',size:13}), 'Add rule')\n ),\n rules.length === 0\n ? EmptyNote('No rules \\\\u2014 add one to define the audience.')\n : h('div', {className:'space-y-1.5'},\n rules.map((r,i) => h('div', {key:i, className:'flex items-center gap-1.5'},\n h('select', {value: r.field, onChange: e => updRule(i,'field', e.target.value),\n className:'bg-surface-container border border-border-subtle rounded-md px-1.5 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'},\n SEG_FIELDS.map(sf => h('option', {key:sf.field, value:sf.field}, sf.label))),\n h('select', {value: r.op, onChange: e => updRule(i,'op', e.target.value),\n className:'bg-surface-container border border-border-subtle rounded-md px-1.5 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'},\n SEG_OPS.map(o => h('option', {key:o.op, value:o.op}, o.label))),\n r.op !== 'exists' && h('input', {type:'text', value: r.value == null ? '' : r.value, onChange: e => updRule(i,'value', e.target.value), placeholder:'value',\n className:'flex-1 bg-surface-container border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'}),\n h('button', {onClick: () => rmRule(i), className:'w-6 h-6 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Remove'}, h(Icon,{name:'close',size:12}))\n ))\n )\n ),\n // Live preview\n h('div', {className:'flex items-center gap-2 flex-wrap'},\n h(Btn, {onClick: runPreview, variant:'secondary', size:'sm', disabled: previewing || rules.length === 0}, previewing ? h(Spinner,{size:13}) : h(Icon,{name:'visibility',size:14}), 'Preview count'),\n preview && h('span', {className:'text-[12px] text-on-surface font-semibold'},\n h('span', {className:'font-mono-data text-primary'}, fmtNum(preview.count)), ' contact' + ((Number(preview.count)||0)===1?'':'s') + ' match')\n ),\n preview && Array.isArray(preview.sample) && preview.sample.length > 0 && h('div', {className:'flex flex-wrap gap-1'},\n preview.sample.slice(0,12).map((s,i) => h('span', {key:i, className:'text-[10px] font-mono-data text-text-muted bg-surface-container-high rounded px-1.5 py-0.5'}, s.email || s.name || s.company || '\\\\u2014'))\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: submit, variant:'primary', size:'sm', disabled: busy || !name.trim()}, h(Icon,{name:'save',size:14}), 'Save segment'),\n h('button', {onClick: onCancel, className:'text-[12px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 10) LISTS VIEW (static / dynamic lists + members) /api/marketing/lists\n// ═══════════════════════════════════════════════════════════════════════════════\nexport function ListsView() {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [segments, setSegments] = useState([]);\n const [creating, setCreating] = useState(false);\n const [draft, setDraft] = useState({name:'', kind:'static', segment_id:''});\n const [openId, setOpenId] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/marketing/lists').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n fetch('/api/marketing/segments').then(r => r.json()).then(d => setSegments(Array.isArray(d) ? d : [])).catch(() => {});\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const create = async () => {\n if (!String(draft.name).trim()) return;\n const body = {name: draft.name.trim(), kind: draft.kind, segment_id: draft.kind==='dynamic' ? (draft.segment_id || null) : null};\n await fetch('/api/marketing/lists', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n setDraft({name:'', kind:'static', segment_id:''}); setCreating(false); load();\n };\n const del = async (id) => {\n await fetch('/api/marketing/lists/' + id, {method:'DELETE'}).catch(()=>{});\n if (openId === id) setOpenId(null);\n load();\n };\n const materialize = async (id) => {\n await fetch('/api/marketing/lists/' + id + '/members', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({materialize: true})}).catch(()=>{});\n load();\n };\n const segName = (sid) => (segments.find(s => String(s.id) === String(sid)) || {}).name || '';\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Lists', icon:'format_list_bulleted', accent:'text-tertiary',\n sub:'Static lists you curate, or dynamic lists materialized from a segment',\n right: h(Btn, {onClick: () => setCreating(v => !v), variant:'secondary', size:'sm'}, h(Icon,{name: creating ? 'close' : 'add',size:14}), creating ? 'Cancel' : 'New list')},\n creating && h('div', {className:'bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2 mb-2'},\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-2'},\n h('input', {type:'text', value: draft.name, onChange: e => setDraft(d => ({...d, name: e.target.value})), placeholder:'List name (e.g. Webinar invitees)',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h('select', {value: draft.kind, onChange: e => setDraft(d => ({...d, kind: e.target.value})),\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'},\n h('option', {value:'static'}, 'Static (manual members)'), h('option', {value:'dynamic'}, 'Dynamic (from segment)'))\n ),\n draft.kind === 'dynamic' && h('select', {value: draft.segment_id, onChange: e => setDraft(d => ({...d, segment_id: e.target.value})),\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'},\n h('option', {value:''}, '\\\\u2014 choose a segment \\\\u2014'),\n (segments||[]).map(s => h('option', {key:s.id, value:s.id}, s.name || '(untitled)'))),\n h(Btn, {onClick: create, variant:'primary', size:'sm', disabled: !String(draft.name).trim() || (draft.kind==='dynamic' && !draft.segment_id)}, h(Icon,{name:'save',size:14}), 'Create list')\n ),\n rows === null\n ? h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}))\n : rows.length === 0\n ? EmptyNote('No lists yet \\\\u2014 create a static list to curate members, or a dynamic list driven by a segment.')\n : h('div', {className:'space-y-1.5'},\n rows.map(l => h('div', {key:l.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg overflow-hidden'},\n h('div', {className:'flex items-center gap-2 px-3 py-2'},\n h(Icon, {name:'format_list_bulleted', size:15, className:'text-tertiary flex-shrink-0'}),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'flex items-center gap-2'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, l.name || '(untitled list)'),\n h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border font-bold ' + (l.kind==='dynamic' ? 'bg-primary/10 text-primary border-primary/30' : 'bg-surface-container-high text-on-surface-variant border-border-subtle')}, l.kind || 'static')\n ),\n l.kind === 'dynamic' && l.segment_id && h('div', {className:'text-[10px] text-text-muted truncate'}, 'from segment: ' + (segName(l.segment_id) || l.segment_id))\n ),\n h('span', {className:'flex-shrink-0 text-[10px] text-text-muted font-mono-data'}, (Number(l.member_count)||0) + ' member' + ((Number(l.member_count)||0)===1?'':'s')),\n l.kind === 'dynamic' && h('button', {onClick: () => materialize(l.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Re-materialize from segment'}, h(Icon,{name:'sync',size:13})),\n h('button', {onClick: () => setOpenId(openId === l.id ? null : l.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Members'}, h(Icon,{name: openId === l.id ? 'expand_more' : 'group', size:13})),\n h('button', {onClick: () => del(l.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Delete'}, h(Icon,{name:'delete',size:13}))\n ),\n openId === l.id && h(ListMembers, {listId: l.id, kind: l.kind})\n ))\n )\n )\n );\n}\n\nfunction ListMembers({listId, kind}) {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [adding, setAdding] = useState(false);\n const [draft, setDraft] = useState({lead_email:'', lead_name:''});\n\n const load = useCallback(() => {\n fetch('/api/marketing/lists/' + listId + '/members').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n }, [listId]);\n useEffect(() => { load(); }, [load]);\n\n const add = async () => {\n if (!String(draft.lead_email).trim()) return;\n await fetch('/api/marketing/lists/' + listId + '/members', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({lead_email: draft.lead_email.trim(), lead_name: draft.lead_name.trim()})}).catch(()=>{});\n setDraft({lead_email:'', lead_name:''}); setAdding(false); load();\n };\n const rm = async (id) => {\n await fetch('/api/marketing/lists/' + listId + '/members/' + id, {method:'DELETE'}).catch(()=>{});\n load();\n };\n\n return h('div', {className:'border-t border-border-subtle px-3 py-2.5 bg-surface-container/20 space-y-2'},\n rows === null\n ? h('div', {className:'flex items-center justify-center py-3'}, h(Spinner,{size:14}))\n : rows.length === 0\n ? EmptyNote(kind === 'dynamic' ? 'No members \\\\u2014 re-materialize this list from its segment.' : 'No members yet.')\n : h('div', {className:'space-y-1'},\n rows.map(m => h('div', {key:m.id, className:'flex items-center gap-2 text-[11px]'},\n h('span', {className:'w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0', style:{background: colorFromName(m.lead_email||m.lead_name)+'22', color: colorFromName(m.lead_email||m.lead_name)}}, h(Icon,{name:'person',size:11})),\n h('span', {className:'text-on-surface truncate flex-1 font-mono-data'}, m.lead_email || '\\\\u2014'),\n m.lead_name && h('span', {className:'text-text-muted truncate'}, m.lead_name),\n kind !== 'dynamic' && h('button', {onClick: () => rm(m.id), className:'flex-shrink-0 text-text-muted hover:text-error', title:'Remove'}, h(Icon,{name:'close',size:12}))\n ))\n ),\n kind !== 'dynamic' && (adding\n ? h('div', {className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-2 space-y-1.5'},\n h('div', {className:'grid grid-cols-2 gap-1.5'},\n h('input', {type:'email', value: draft.lead_email, onChange: e => setDraft(d => ({...d, lead_email: e.target.value})), placeholder:'email@company.com',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'}),\n h('input', {type:'text', value: draft.lead_name, onChange: e => setDraft(d => ({...d, lead_name: e.target.value})), placeholder:'Name (optional)',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: add, variant:'primary', size:'sm', disabled: !String(draft.lead_email).trim()}, h(Icon,{name:'add',size:13}), 'Add member'),\n h('button', {onClick: () => setAdding(false), className:'text-[11px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n )\n : h('button', {onClick: () => setAdding(true), className:'text-[11px] text-primary hover:underline flex items-center gap-1 font-semibold'}, h(Icon,{name:'add',size:13}), 'Add member'))\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 11) HANDOFF VIEW (MQL-ready leads -> promote to deal) /api/marketing/handoff\n// ═══════════════════════════════════════════════════════════════════════════════\nconst GRADE_CHIP = {\n A:'bg-secondary/15 text-secondary border-secondary/40',\n B:'bg-primary/15 text-primary border-primary/30',\n C:'bg-tertiary/15 text-tertiary border-tertiary/30',\n D:'bg-surface-container-high text-on-surface-variant border-border-subtle',\n};\nconst gradeChip = (g) => GRADE_CHIP[String(g||'').toUpperCase()] || GRADE_CHIP.D;\n\nexport function HandoffView() {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [promoting, setPromoting] = useState('');\n const [toast, setToast] = useState('');\n\n const load = useCallback(() => {\n fetch('/api/marketing/handoff/mql-ready').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const promote = async (email) => {\n if (!email) return;\n setPromoting(email);\n const r = await fetch('/api/marketing/handoff/promote', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({lead_email: email})}).then(x => x.json()).catch(() => null);\n setPromoting('');\n if (r && (r.ok || r.id || r.success)) { setToast('Promoted ' + email + ' to a deal'); setTimeout(() => setToast(''), 2200); }\n load();\n };\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Sales handoff \\\\u2014 MQL ready', icon:'swap_horiz', accent:'text-secondary',\n sub:'Marketing-qualified leads (grade A/B, not yet a deal) ready to promote into the CRM pipeline',\n right: h('div', {className:'flex items-center gap-2'},\n toast && h('span', {className:'text-[11px] text-secondary'}, toast),\n h(Btn, {onClick: load, variant:'secondary', size:'sm'}, h(Icon,{name:'refresh',size:14}), 'Refresh'))},\n rows === null\n ? h('div', {className:'flex items-center justify-center py-10'}, h(Spinner,{size:18}))\n : rows.length === 0\n ? EmptyNote('No MQL-ready leads right now \\\\u2014 leads graded A or B with no open deal will appear here for one-click promotion to the pipeline.')\n : h('div', {className:'overflow-x-auto'},\n h('div', {className:'min-w-[640px]'},\n h('div', {className:'grid grid-cols-12 gap-2 px-3 py-2 text-[10px] uppercase tracking-widest text-text-muted bg-surface-container/40 font-bold rounded-t-lg border border-border-subtle'},\n h('div', {className:'col-span-4'}, 'Lead'),\n h('div', {className:'col-span-3'}, 'Company'),\n h('div', {className:'col-span-1 text-center'}, 'Grade'),\n h('div', {className:'col-span-1 text-right'}, 'Score'),\n h('div', {className:'col-span-1 text-right'}, 'Signals'),\n h('div', {className:'col-span-2 text-right'}, 'Action')\n ),\n rows.map((l,i) => {\n const email = l.lead_email || l.email || '';\n return h('div', {key: email + i, className:'grid grid-cols-12 gap-2 px-3 py-2.5 items-center border-l border-r border-b border-border-subtle/50 last:rounded-b-lg'},\n h('div', {className:'col-span-4 flex items-center gap-2 min-w-0'},\n h('span', {className:'w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0', style:{background: colorFromName(l.name||email)+'22', color: colorFromName(l.name||email)}}, h(Icon,{name:'person',size:14})),\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, l.name || email || '(unknown)'),\n l.name && h('div', {className:'text-[10px] text-text-muted truncate font-mono-data'}, email)\n )\n ),\n h('div', {className:'col-span-3 text-[11px] text-on-surface-variant truncate'}, l.company || '\\\\u2014'),\n h('div', {className:'col-span-1 text-center'},\n l.grade ? h('span', {className:'text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border font-bold ' + gradeChip(l.grade)}, l.grade) : h('span', {className:'text-text-muted'}, '\\\\u2014')),\n h('div', {className:'col-span-1 text-right text-[12px] font-mono-data font-bold text-on-surface'}, l.score != null ? fmtNum(l.score) : '\\\\u2014'),\n h('div', {className:'col-span-1 text-right text-[11px] font-mono-data text-text-muted'}, l.intent_count != null ? fmtNum(l.intent_count) : '\\\\u2014'),\n h('div', {className:'col-span-2 flex justify-end'},\n h(Btn, {onClick: () => promote(email), variant:'primary', size:'sm', disabled: promoting === email || !email},\n promoting === email ? h(Spinner,{size:13}) : h(Icon,{name:'swap_horiz',size:14}), 'Promote')\n )\n );\n })\n )\n )\n )\n );\n}\n `;\n}\n",[337],"0a8531a0-5f15-11f1-816f-1607ee4eb77e","frontend_marketing2.ts","25aff394-5f0f-11f1-83c8-1607ee4eb77e",1007,["D",1780467940042],1,"// frontend_marketing2.ts — Wave 1 Marketing operating-surface components.\n// Served at /api/app-marketing2 (router.ts MODULE_ROUTES), lazy-imported by frontend_pages.ts\n// (MarketingWorkspace). Emits an ES module that EXPORTS named React components consumed as\n// Marketing sub-tabs / panels — all REAL-DATA, honest empty states, pixel-faithful to the\n// CRM visual language (Section / EmptyNote / HBar / MetricCard / fmtMoney / fmtRel):\n//\n// MarketingOverview — 4 KPI MetricCards from /api/marketing/overview + the unified TOFU/MOFU/BOFU\n// funnel (lazy UnifiedFunnelView, else rendered from funnel-summary data) +\n// an attribution mini-panel + a live IntelligenceFeed.\n// AttributionView — /api/attribution expanded: per-channel sessions / CAC / ROI table + bars.\n// PersonaLibrary — /api/marketing/personas CRUD + \"Import from enrichment\".\n// UtmBuilder — /api/marketing/utm-links: live-preview tagged URL builder + saved library w/ copy.\n// BrandKit — /api/marketing/brand-kit voice/tone/values/dos/donts editor (one row/tenant).\n// NurtureView — marketing-framed list+create of sequences via /api/crm/sequences (+ /:id/steps).\n// CROFeed — /api/intelligence/recommendations action cards.\n//\n// Backend (all tenant-scoped JSON; see api/marketing.ts + api/marketing_routes.ts, api/intelligence.ts,\n// api/aio.ts):\n// GET /api/marketing/overview -> {kpis, funnel, attribution, generatedAt}\n// GET/POST /api/marketing/personas | PUT/DELETE /api/marketing/personas/:id | POST /api/marketing/personas/import\n// GET/POST /api/marketing/utm-links | DELETE /api/marketing/utm-links/:id\n// GET/PUT /api/marketing/brand-kit\n// GET /api/attribution -> {channels[], total_conversions, total_value, window_days, spend_source?}\n// GET /api/intelligence/funnel-summary -> {overall_health, total_integrations_connected, stages[], bottleneck}\n// GET /api/intelligence/feed | /api/intelligence/recommendations\n// GET/POST /api/crm/sequences | GET/POST /api/crm/sequences/:id/steps\n//\n// Shared deps from window.__nexus: Icon, Btn, Spinner, MetricCard, PageHeader.\nexport function getMarketing2JS(): string {\n return `\nimport React, { useState, useEffect, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// Lazy-import the already-built intelligence surfaces so we SURFACE (not rebuild) them.\nconst _intel = await import('/api/app-intelligence').catch(() => ({}));\nconst UnifiedFunnelView = _intel.UnifiedFunnelView || null;\nconst IntelligenceFeed = _intel.IntelligenceFeed || null;\n\n// ─── Shared helpers (mirrored from frontend_crm2.ts visual language) ───────────\nconst fmtMoney = (n) => {\n const v = Number(n) || 0;\n if (v >= 1000000) return '$' + (v/1000000).toFixed(1).replace(/\\\\.0$/,'') + 'M';\n if (v >= 1000) return '$' + (v/1000).toFixed(1).replace(/\\\\.0$/,'') + 'K';\n return '$' + v.toLocaleString();\n};\nconst fmtNum = (n) => {\n const v = Number(n) || 0;\n if (Math.abs(v) >= 1000000) return (v/1000000).toFixed(1).replace(/\\\\.0$/,'') + 'M';\n if (Math.abs(v) >= 1000) return (v/1000).toFixed(1).replace(/\\\\.0$/,'') + 'K';\n return Number.isInteger(v) ? String(v) : v.toFixed(1);\n};\nconst fmtRel = (iso) => {\n if (!iso) return '';\n const ms = Date.now() - new Date(iso).getTime();\n if (isNaN(ms)) return '';\n if (ms < 3600000) return Math.max(1, Math.floor(ms/60000)) + 'm ago';\n if (ms < 86400000) return Math.floor(ms/3600000) + 'h ago';\n if (ms < 2592000000) return Math.floor(ms/86400000) + 'd ago';\n return new Date(iso).toLocaleDateString('en-US', {month:'short', day:'numeric'});\n};\nconst ratio1 = (n) => (n == null || isNaN(Number(n))) ? '—' : (Math.round(Number(n) * 10) / 10);\nconst pct1 = (n) => (n == null || isNaN(Number(n))) ? '—' : (Math.round(Number(n) * 10) / 10) + '%';\nconst colorFromName = (name) => {\n const colors = ['#c0c1ff','#4edea3','#d0bcff','#8083ff','#6ffbbe','#a078ff','#e1e0ff','#494bd6'];\n const sum = (name||'').split('').reduce((a,c) => a + c.charCodeAt(0), 0);\n return colors[sum % colors.length];\n};\nconst titleCase = (s) => String(s||'').replace(/[_-]/g,' ').replace(/\\\\b\\\\w/g, c => c.toUpperCase()).trim();\nconst healthColor = (s) => Number(s) > 75 ? 'text-secondary' : Number(s) >= 50 ? 'text-tertiary' : 'text-error';\n\n// ─── Small shared UI atoms (mirrored from frontend_crm2.ts) ────────────────────\nfunction Section({title, icon, accent, right, children, sub}) {\n const { Icon } = N();\n return h('div', {className:'glass-panel rounded-xl p-lg space-y-4'},\n h('div', {className:'flex items-start justify-between gap-3'},\n h('div', {className:'min-w-0'},\n h('div', {className:'flex items-center gap-2'},\n icon && Icon && h(Icon, {name: icon, size:16, className: accent || 'text-primary'}),\n h('h3', {className:'text-[14px] font-bold text-on-surface'}, title)\n ),\n sub && h('div', {className:'text-[11px] text-text-muted mt-0.5'}, sub)\n ),\n right\n ),\n children\n );\n}\nconst EmptyNote = (msg) => h('div', {className:'text-[12px] text-text-muted italic py-2'}, msg);\n\n// Horizontal labeled bar (clean Tailwind — charts module isn't on window.__nexus).\nfunction HBar({label, value, max, color, valueText}) {\n const w = max > 0 ? Math.max(2, (Number(value)||0) / max * 100) : 0;\n return h('div', {className:'flex items-center gap-2'},\n h('div', {className:'text-[11px] text-on-surface-variant truncate flex-shrink-0 text-right', style:{width:120}}, label),\n h('div', {className:'flex-1 h-5 bg-surface-container-high rounded overflow-hidden relative'},\n h('div', {className:'h-full rounded transition-all duration-500', style:{width: w + '%', background: color || '#c0c1ff'}})\n ),\n h('div', {className:'text-[11px] text-text-muted text-right flex-shrink-0 font-mono-data', style:{width:96}}, valueText)\n );\n}\n\n// ─── Funnel fallback (renders from /api/intelligence/funnel-summary data when the\n// UnifiedFunnelView export isn't available) ────────────────────────────────────\nconst STAGE_FB = {\n TOFU: {bg:'#c0c1ff', text:'text-primary', label:'Awareness & Reach'},\n MOFU: {bg:'#d0bcff', text:'text-tertiary', label:'Engagement & Consideration'},\n BOFU: {bg:'#4edea3', text:'text-secondary', label:'Conversion & Revenue'},\n};\nfunction FunnelFallback({funnel}) {\n const { Icon } = N();\n if (!funnel || !Array.isArray(funnel.stages)) return EmptyNote('Funnel data unavailable — connect an integration to populate TOFU/MOFU/BOFU.');\n const bottleneck = funnel.bottleneck || null;\n return h('div', {className:'glass-panel rounded-xl p-lg'},\n h('div', {className:'flex items-center justify-between mb-md flex-wrap gap-2'},\n h('div', {className:'flex items-center gap-2'},\n Icon && h(Icon, {name:'insights', size:18, className:'text-primary'}),\n h('h3', {className:'text-[15px] font-bold text-on-surface'}, 'Acquisition funnel'),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest bg-primary/10 text-primary px-2 py-0.5 rounded border border-primary/20'},\n (Number(funnel.total_integrations_connected)||0) + ' sources')\n ),\n typeof funnel.overall_health === 'number' && h('div', {className:'flex items-center gap-2 px-3 py-1.5 rounded-lg border border-border-subtle bg-surface-container-lowest'},\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Overall'),\n h('span', {className:'text-[16px] font-extrabold ' + healthColor(funnel.overall_health), style:{fontVariantNumeric:'tabular-nums'}}, funnel.overall_health + '%')\n )\n ),\n h('div', {className:'grid grid-cols-1 md:grid-cols-3 gap-md'},\n funnel.stages.map(s => {\n const c = STAGE_FB[s.stage] || STAGE_FB.TOFU;\n const isBottleneck = bottleneck && bottleneck.stage === s.stage;\n const metrics = Array.isArray(s.metrics) ? s.metrics : [];\n return h('div', {key:s.stage, className:'p-md rounded-lg border ' + (isBottleneck ? 'border-tertiary/40 bg-tertiary/5' : 'border-border-subtle bg-surface-container-lowest')},\n h('div', {className:'flex items-center justify-between mb-2'},\n h('div', null,\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest ' + c.text}, s.stage),\n h('div', {className:'text-[10px] text-text-muted mt-0.5'}, c.label)\n ),\n isBottleneck && h('span', {className:'inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-widest bg-tertiary/10 text-tertiary px-1.5 py-0.5 rounded'}, 'BOTTLENECK')\n ),\n h('div', {className:'space-y-1.5 mb-3 min-h-[96px]'},\n metrics.length === 0\n ? h('div', {className:'text-[11px] text-text-muted italic py-4 text-center'}, 'No data — connect an integration.')\n : metrics.slice(0,5).map(m => h('div', {key: m.integration + '_' + m.metric, className:'flex items-center justify-between text-[12px]'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className:'text-[10px] uppercase tracking-wider text-text-muted font-mono-data flex-shrink-0'}, m.integration),\n h('span', {className:'text-on-surface-variant truncate'}, String(m.metric||'').replace(/_/g,' '))\n ),\n h('span', {className:'font-mono-data text-on-surface font-bold flex-shrink-0', style:{fontVariantNumeric:'tabular-nums'}}, fmtNum(m.value) + (m.unit ? ' ' + m.unit : ''))\n ))\n ),\n h('div', {className:'pt-2 border-t border-border-subtle'},\n h('div', {className:'flex justify-between items-center mb-1'},\n h('span', {className:'text-[10px] uppercase tracking-widest text-text-muted'}, 'Stage health'),\n h('span', {className:'text-[13px] font-extrabold ' + healthColor(s.health_score), style:{fontVariantNumeric:'tabular-nums'}}, (Number(s.health_score)||0) + '%')\n ),\n h('div', {className:'h-1.5 w-full bg-surface-container rounded-full overflow-hidden'},\n h('div', {className:'h-full transition-all', style:{width: (Number(s.health_score)||0) + '%', background: c.bg}})\n ),\n s.diagnosis && h('p', {className:'text-[10px] text-text-muted mt-1.5'}, s.diagnosis)\n )\n );\n })\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// Attribution mini-panel (compact, used inside Overview) + full AttributionView\n// ═══════════════════════════════════════════════════════════════════════════════\nconst CHANNEL_COLORS = ['#c0c1ff','#4edea3','#d0bcff','#8083ff','#6ffbbe','#a078ff','#e1e0ff','#494bd6'];\nconst chColor = (i) => CHANNEL_COLORS[i % CHANNEL_COLORS.length];\n\nfunction AttributionMini({attribution}) {\n const channels = (attribution && Array.isArray(attribution.channels)) ? attribution.channels : null;\n if (channels === null) return EmptyNote('Attribution unavailable.');\n if (channels.length === 0) return EmptyNote('No attributed conversions in the last 30 days — UTM-tagged conversions appear here once tracked.');\n const maxConv = Math.max(1, ...channels.map(c => Number(c.conversions)||0));\n return h('div', {className:'space-y-2'},\n channels.slice(0,6).map((c,i) => h(HBar, {key: c.source + i, label: titleCase(c.source), value: c.conversions, max: maxConv,\n color: chColor(i), valueText: (Number(c.conversions)||0) + ' \\\\u00B7 ' + Math.round((Number(c.share)||0)*100) + '%'}))\n );\n}\n\nexport function AttributionView() {\n const { Icon, Btn, Spinner } = N();\n const [data, setData] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/attribution').then(r => r.json()).then(d => setData(d && Array.isArray(d.channels) ? d : {channels:[], total_conversions:0, total_value:0})).catch(() => setData({channels:[]}));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n if (data === null) return h('div', {className:'glass-panel rounded-xl p-12 flex items-center justify-center'}, h(Spinner,{size:20}));\n const channels = Array.isArray(data.channels) ? data.channels : [];\n const hasSpend = channels.some(c => c.spend != null);\n const maxConv = Math.max(1, ...channels.map(c => Number(c.conversions)||0));\n\n return h('div', {className:'space-y-lg'},\n // Summary cards\n h('div', {className:'grid grid-cols-2 lg:grid-cols-3 gap-md'},\n kpiTile('Channels', String(channels.length), 'hub', 'text-primary'),\n kpiTile('Conversions (30d)', String(Number(data.total_conversions)||0), 'conversion', 'text-secondary'),\n kpiTile('Attributed value', fmtMoney(data.total_value), 'paid', 'text-tertiary')\n ),\n h(Section, {title:'Last-touch channel attribution', icon:'donut_large', accent:'text-primary',\n sub:'UTM last-touch over the last 30 days' + (data.spend_source === 'estimate' ? ' \\\\u00B7 spend / CAC / ROI are estimates (from configured marketing spend \\\\u00D7 session share)' : ''),\n right: h(Btn, {onClick: load, variant:'secondary', size:'sm'}, h(Icon,{name:'refresh',size:14}), 'Refresh')},\n channels.length === 0\n ? EmptyNote('No attributed conversions in the last 30 days. Tag your campaign URLs with UTM parameters (use the Tools tab\\\\u2019s UTM builder) and record conversions to populate this.')\n : h('div', {className:'overflow-x-auto'},\n h('div', {className:'min-w-[640px]'},\n h('div', {className:'grid grid-cols-12 gap-2 px-3 py-2 text-[10px] uppercase tracking-widest text-text-muted bg-surface-container/40 font-bold rounded-t-lg border border-border-subtle'},\n h('div', {className:'col-span-3'}, 'Channel'),\n h('div', {className:'col-span-3'}, 'Share'),\n h('div', {className:'col-span-1 text-right'}, 'Conv'),\n h('div', {className:'col-span-1 text-right'}, 'Sess'),\n h('div', {className:'col-span-1 text-right'}, 'Value'),\n h('div', {className:'col-span-1 text-right'}, 'CAC'),\n h('div', {className:'col-span-1 text-right'}, 'ROI'),\n h('div', {className:'col-span-1 text-right'}, 'PB')\n ),\n channels.map((c,i) => h('div', {key: c.source + i, className:'grid grid-cols-12 gap-2 px-3 py-2.5 items-center border-l border-r border-b border-border-subtle/50 last:rounded-b-lg'},\n h('div', {className:'col-span-3 flex items-center gap-2 min-w-0'},\n h('span', {className:'w-2.5 h-2.5 rounded-full flex-shrink-0', style:{background: chColor(i)}}),\n h('span', {className:'text-[12px] font-semibold text-on-surface truncate'}, titleCase(c.source))\n ),\n h('div', {className:'col-span-3'},\n h('div', {className:'h-4 bg-surface-container-high rounded overflow-hidden'},\n h('div', {className:'h-full rounded', style:{width: Math.max(2, (Number(c.conversions)||0)/maxConv*100) + '%', background: chColor(i)}}))\n ),\n h('div', {className:'col-span-1 text-right text-[12px] font-mono-data font-bold text-on-surface'}, Number(c.conversions)||0),\n h('div', {className:'col-span-1 text-right text-[11px] font-mono-data text-text-muted'}, c.sessions != null ? fmtNum(c.sessions) : '\\\\u2014'),\n h('div', {className:'col-span-1 text-right text-[11px] font-mono-data text-on-surface-variant'}, fmtMoney(c.value)),\n h('div', {className:'col-span-1 text-right text-[11px] font-mono-data text-text-muted'}, c.cac != null ? fmtMoney(c.cac) : '\\\\u2014'),\n h('div', {className:'col-span-1 text-right text-[11px] font-mono-data font-bold ' + (c.roi != null && Number(c.roi) >= 0 ? 'text-secondary' : (c.roi != null ? 'text-error' : 'text-text-muted'))}, c.roi != null ? (Number(c.roi) >= 0 ? '+' : '') + ratio1(c.roi) + 'x' : '\\\\u2014'),\n h('div', {className:'col-span-1 text-right text-[11px] font-mono-data text-text-muted'}, c.payback_months != null ? ratio1(c.payback_months) + 'mo' : '\\\\u2014')\n ))\n )\n ),\n !hasSpend && channels.length > 0 && h('div', {className:'text-[11px] text-text-muted italic'}, 'CAC / ROI / payback fill in once GA4 session data and a configured marketing-spend estimate are available.')\n )\n );\n}\n\n// Reusable compact KPI tile (matches the forecast roll-up card look).\nfunction kpiTile(label, value, icon, accent) {\n const { Icon } = N();\n return h('div', {className:'rounded-xl border border-border-subtle bg-surface-container-lowest p-4 flex flex-col gap-1'},\n h('div', {className:'flex items-center gap-2'},\n Icon && h(Icon, {name: icon, size:15, className: accent}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, label)\n ),\n h('div', {className:'text-[22px] font-extrabold text-on-surface font-mono-data leading-none mt-1'}, value)\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 1) MARKETING OVERVIEW\n// ═══════════════════════════════════════════════════════════════════════════════\nexport function MarketingOverview({setActivePage}) {\n const { Icon, Btn, MetricCard, Spinner } = N();\n const [data, setData] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/marketing/overview').then(r => r.json()).then(d => setData(d || {})).catch(() => setData({}));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n if (data === null) return h('div', {className:'glass-panel rounded-xl p-12 flex items-center justify-center'}, h(Spinner,{size:20}));\n const kpis = data.kpis || {};\n const funnel = data.funnel || null;\n const attribution = data.attribution || null;\n\n // 4 KPI MetricCards — real marketing math (honest '—' when an input is missing).\n const cac = kpis.cac;\n const ltvCac = kpis.ltv_cac_ratio;\n const mer = kpis.mer;\n const conv = kpis.conversions;\n const bench = kpis.benchmark_status || {};\n const benchColor = (st) => st === 'healthy' ? '#4edea3' : st === 'borderline' ? '#d0bcff' : st === 'unhealthy' ? '#ffb4ab' : '#c0c1ff';\n\n return h('div', {className:'space-y-lg'},\n // KPI header — composed marketing-math metrics\n MetricCard ? h('div', {className:'grid grid-cols-2 lg:grid-cols-4 gap-md'},\n h(MetricCard, {icon:'payments', title:'CAC', value: cac != null ? fmtMoney(cac) : '\\\\u2014', color:'#c0c1ff',\n subtitle: cac != null ? 'cost per acquisition \\\\u00B7 estimate' : 'set marketing spend + conversions'}),\n h(MetricCard, {icon:'balance', title:'LTV : CAC', value: ltvCac != null ? ratio1(ltvCac) + 'x' : '\\\\u2014', color: benchColor(bench.ltv_cac),\n subtitle: ltvCac != null ? (bench.ltv_cac || 'estimate') + ' \\\\u00B7 healthy \\\\u2265 3x' : 'needs LTV + CAC inputs'}),\n h(MetricCard, {icon:'trending_up', title:'MER', value: mer != null ? ratio1(mer) + 'x' : '\\\\u2014', color: benchColor(bench.mer),\n subtitle: mer != null ? 'marketing efficiency \\\\u00B7 healthy \\\\u2265 3x' : 'needs spend + revenue inputs'}),\n h(MetricCard, {icon:'conversion', title:'Conversions', value: conv != null ? fmtNum(conv) : '\\\\u2014', color:'#6ffbbe',\n subtitle: 'GA4 conversions in window'})\n ) : null,\n\n // Unified TOFU/MOFU/BOFU funnel — surface the already-built view, else render from data.\n UnifiedFunnelView ? h(UnifiedFunnelView, {setActivePage}) : h(FunnelFallback, {funnel}),\n\n // Attribution mini + Intelligence feed side-by-side\n h('div', {className:'grid grid-cols-1 lg:grid-cols-2 gap-lg'},\n h(Section, {title:'Channel attribution', icon:'donut_large', accent:'text-primary',\n sub:'Last-touch conversions (30d)',\n right: setActivePage && h('button', {onClick: () => setActivePage && setActivePage('marketing'), className:'hidden'}, '')},\n h(AttributionMini, {attribution})\n ),\n IntelligenceFeed\n ? h(IntelligenceFeed, {onInvestigate: (c) => { try { window.dispatchEvent(new CustomEvent('nexus:open-chat', {detail: {prompt: (c && (c.action_label || c.title)) || ''}})); } catch (e) {} }})\n : h(Section, {title:'Intelligence feed', icon:'auto_awesome', accent:'text-primary'}, EmptyNote('Intelligence feed module unavailable.'))\n ),\n\n // Provenance footer\n h('div', {className:'flex items-center gap-2 text-[11px] text-text-muted'},\n Icon && h(Icon, {name:'schedule', size:13}),\n h('span', null, 'Composed from funnel-summary + AIO KPIs + attribution' + (data.generatedAt ? ' \\\\u00B7 ' + fmtRel(data.generatedAt) : '')),\n Btn && h(Btn, {onClick: load, variant:'secondary', size:'sm'}, h(Icon,{name:'refresh',size:13}), 'Refresh')\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 2) PERSONA LIBRARY\n// ═══════════════════════════════════════════════════════════════════════════════\nconst KIND_META = {\n icp: {label:'ICP', chip:'bg-primary/10 text-primary border-primary/30', icon:'target'},\n persona: {label:'Persona', chip:'bg-tertiary/10 text-tertiary border-tertiary/30', icon:'person'},\n segment: {label:'Segment', chip:'bg-secondary/15 text-secondary border-secondary/40', icon:'group'},\n};\nconst kindMeta = (k) => KIND_META[k] || {label: titleCase(k) || 'Persona', chip:'bg-surface-container-high text-on-surface-variant border-border-subtle', icon:'person'};\n\nfunction parseAttrs(raw) {\n if (raw == null) return null;\n if (typeof raw === 'object') return raw;\n try { const o = JSON.parse(raw); return (o && typeof o === 'object') ? o : null; } catch { return null; }\n}\n\nexport function PersonaLibrary() {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [editing, setEditing] = useState(null); // persona object or {} for new\n const [importing, setImporting] = useState(false);\n const [filter, setFilter] = useState('');\n\n const load = useCallback(() => {\n fetch('/api/marketing/personas').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const save = async (p) => {\n let attributes = p.attributes;\n if (typeof attributes === 'string') {\n const trimmed = attributes.trim();\n if (trimmed) { try { JSON.parse(trimmed); } catch { attributes = JSON.stringify({notes: trimmed}); } }\n else attributes = '';\n }\n const body = {name: p.name, kind: p.kind || 'persona', description: p.description || '', attributes, source: p.source || 'manual'};\n if (p.id) await fetch('/api/marketing/personas/' + p.id, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n else await fetch('/api/marketing/personas', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n setEditing(null); load();\n };\n const del = async (id) => {\n await fetch('/api/marketing/personas/' + id, {method:'DELETE'}).catch(()=>{});\n load();\n };\n const doImport = async () => {\n setImporting(true);\n await fetch('/api/marketing/personas/import', {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'}).catch(()=>{});\n setImporting(false); load();\n };\n\n const filtered = filter ? (rows || []).filter(r => r.kind === filter) : (rows || []);\n const kbtn = (k, label) => h('button', {key:k, onClick: () => setFilter(filter === k ? '' : k),\n className:'px-2.5 py-0.5 rounded-md text-[11px] font-semibold border ' + (filter === k ? 'bg-primary text-white border-primary' : 'bg-surface-container border-border-subtle text-text-muted hover:text-on-surface')}, label);\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Audience library', icon:'group', accent:'text-primary',\n sub:'ICPs, buyer personas and segments \\\\u00B7 import from your company-enrichment profile or author manually',\n right: h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: doImport, variant:'secondary', size:'sm', disabled: importing}, importing ? h(Spinner,{size:13}) : h(Icon,{name:'cloud_download',size:14}), 'Import from enrichment'),\n h(Btn, {onClick: () => setEditing({name:'', kind:'persona', description:'', attributes:''}), variant:'primary', size:'sm'}, h(Icon,{name:'add',size:14}), 'New')\n )},\n // Kind filters\n h('div', {className:'flex items-center gap-1.5 mb-1'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mr-1'}, 'Kind'),\n kbtn('icp','ICP'), kbtn('persona','Persona'), kbtn('segment','Segment'),\n filter && h('button', {onClick: () => setFilter(''), className:'text-[11px] text-text-muted hover:text-on-surface ml-1'}, 'Clear')\n ),\n editing && h(PersonaEditor, {persona: editing, onCancel: () => setEditing(null), onSave: save}),\n rows === null\n ? h('div', {className:'flex items-center justify-center py-10'}, h(Spinner,{size:18}))\n : filtered.length === 0\n ? EmptyNote(filter\n ? 'No ' + kindMeta(filter).label + ' records yet.'\n : 'No audiences yet \\\\u2014 click \\\\u201CImport from enrichment\\\\u201D to pull ICP/personas/segments from your company profile, or author one manually.')\n : h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-3'},\n filtered.map(p => {\n const km = kindMeta(p.kind);\n const attrs = parseAttrs(p.attributes);\n const attrEntries = attrs ? Object.entries(attrs).filter(([,v]) => v != null && String(v).trim() !== '').slice(0, 6) : [];\n return h('div', {key:p.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-3 space-y-2'},\n h('div', {className:'flex items-start gap-2'},\n h('span', {className:'w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0', style:{background: colorFromName(p.name)+'22', color: colorFromName(p.name)}}, h(Icon,{name: km.icon, size:16})),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'flex items-center gap-2'},\n h('div', {className:'text-[13px] font-bold text-on-surface truncate'}, p.name || '(untitled)'),\n h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border font-bold ' + km.chip}, km.label)\n ),\n p.source && h('div', {className:'text-[10px] text-text-muted'}, 'via ' + p.source + (p.updated_at ? ' \\\\u00B7 ' + fmtRel(p.updated_at) : ''))\n ),\n h('div', {className:'flex items-center gap-1 flex-shrink-0'},\n h('button', {onClick: () => setEditing(p), className:'w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Edit'}, h(Icon,{name:'edit',size:13})),\n h('button', {onClick: () => del(p.id), className:'w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Delete'}, h(Icon,{name:'delete',size:13}))\n )\n ),\n p.description && h('div', {className:'text-[12px] text-on-surface-variant leading-relaxed'}, p.description),\n attrEntries.length > 0 && h('div', {className:'flex flex-wrap gap-1'},\n attrEntries.map(([k,v]) => h('span', {key:k, className:'text-[10px] font-mono-data text-text-muted bg-surface-container-high rounded px-1.5 py-0.5'}, titleCase(k) + ': ' + (Array.isArray(v) ? v.join(', ') : String(v)).slice(0,40)))\n )\n );\n })\n )\n )\n );\n}\n\nfunction PersonaEditor({persona, onCancel, onSave}) {\n const { Icon, Btn } = N();\n const attrInit = (() => {\n const a = persona.attributes;\n if (a == null || a === '') return '';\n if (typeof a === 'string') return a;\n try { return JSON.stringify(a, null, 2); } catch { return ''; }\n })();\n const [f, setF] = useState({name: persona.name||'', kind: persona.kind||'persona', description: persona.description||'', attributes: attrInit});\n const [busy, setBusy] = useState(false);\n const set = (k,v) => setF(s => ({...s, [k]: v}));\n const submit = async () => { setBusy(true); await onSave({...persona, ...f, source: persona.source || 'manual'}); setBusy(false); };\n return h('div', {className:'mt-1 mb-3 bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2'},\n h('div', {className:'text-[11px] font-bold text-on-surface'}, persona.id ? 'Edit audience' : 'New audience'),\n h('div', {className:'grid grid-cols-2 gap-2'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Name'),\n h('input', {type:'text', value: f.name, onChange: e => set('name', e.target.value), placeholder:'Enterprise Ops Lead',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Kind'),\n h('select', {value: f.kind, onChange: e => set('kind', e.target.value),\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'},\n h('option', {value:'icp'}, 'ICP'), h('option', {value:'persona'}, 'Persona'), h('option', {value:'segment'}, 'Segment'))\n )\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Description'),\n h('textarea', {value: f.description, onChange: e => set('description', e.target.value), rows:2, placeholder:'Who they are, what they care about\\\\u2026',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none resize-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Attributes (JSON or notes)'),\n h('textarea', {value: f.attributes, onChange: e => set('attributes', e.target.value), rows:3, placeholder:'{\"industry\":\"SaaS\",\"seniority\":\"Director\",\"pain\":\"manual ops\"}',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none resize-none font-mono-data'})\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: submit, variant:'primary', size:'sm', disabled: busy || !String(f.name).trim()}, h(Icon,{name:'save',size:14}), 'Save'),\n h('button', {onClick: onCancel, className:'text-[12px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 3) UTM BUILDER\n// ═══════════════════════════════════════════════════════════════════════════════\nconst UTM_PARAMS = [\n {key:'utm_source', label:'Source', ph:'newsletter', req:true},\n {key:'utm_medium', label:'Medium', ph:'email', req:true},\n {key:'utm_campaign', label:'Campaign', ph:'q3_launch', req:true},\n {key:'utm_term', label:'Term', ph:'keyword', req:false},\n {key:'utm_content', label:'Content', ph:'cta_button', req:false},\n];\nfunction buildUtmUrl(base, params) {\n const b = String(base || '').trim();\n if (!b) return '';\n const pairs = [];\n UTM_PARAMS.forEach(p => { const v = String(params[p.key] || '').trim(); if (v) pairs.push(p.key + '=' + encodeURIComponent(v)); });\n if (pairs.length === 0) return b;\n const sep = b.includes('?') ? '&' : '?';\n return b + sep + pairs.join('&');\n}\n\nexport function UtmBuilder() {\n const { Icon, Btn, Spinner } = N();\n const [rows, setRows] = useState(null);\n const [f, setF] = useState({name:'', base_url:'', utm_source:'', utm_medium:'', utm_campaign:'', utm_term:'', utm_content:''});\n const [busy, setBusy] = useState(false);\n const [copied, setCopied] = useState('');\n\n const load = useCallback(() => {\n fetch('/api/marketing/utm-links').then(r => r.json()).then(d => setRows(Array.isArray(d) ? d : [])).catch(() => setRows([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const set = (k,v) => setF(s => ({...s, [k]: v}));\n const preview = buildUtmUrl(f.base_url, f);\n const canSave = String(f.base_url).trim() && String(f.utm_source).trim() && String(f.utm_medium).trim() && String(f.utm_campaign).trim();\n\n const save = async () => {\n if (!canSave) return;\n setBusy(true);\n const body = {name: f.name.trim(), base_url: f.base_url.trim(),\n utm_source: f.utm_source.trim(), utm_medium: f.utm_medium.trim(), utm_campaign: f.utm_campaign.trim(),\n utm_term: f.utm_term.trim(), utm_content: f.utm_content.trim()};\n await fetch('/api/marketing/utm-links', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n setBusy(false);\n setF({name:'', base_url:'', utm_source:'', utm_medium:'', utm_campaign:'', utm_term:'', utm_content:''});\n load();\n };\n const del = async (id) => {\n await fetch('/api/marketing/utm-links/' + id, {method:'DELETE'}).catch(()=>{});\n load();\n };\n const copy = (url, id) => {\n try { navigator.clipboard.writeText(url); } catch (e) {}\n setCopied(id); setTimeout(() => setCopied(''), 1400);\n };\n\n return h('div', {className:'grid grid-cols-1 lg:grid-cols-2 gap-lg'},\n // Builder\n h(Section, {title:'UTM link builder', icon:'link', accent:'text-primary',\n sub:'Compose campaign-tagged URLs \\\\u00B7 source / medium / campaign required'},\n h('div', {className:'space-y-2.5'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Base URL *'),\n h('input', {type:'text', value: f.base_url, onChange: e => set('base_url', e.target.value), placeholder:'https://example.com/landing',\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Name (optional)'),\n h('input', {type:'text', value: f.name, onChange: e => set('name', e.target.value), placeholder:'Q3 newsletter blast',\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'grid grid-cols-2 gap-2'},\n UTM_PARAMS.map(p => h('div', {key:p.key, className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, p.label + (p.req ? ' *' : '')),\n h('input', {type:'text', value: f[p.key], onChange: e => set(p.key, e.target.value), placeholder: p.ph,\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ))\n ),\n // Live preview\n h('div', {className:'pt-1'},\n h('div', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted mb-1'}, 'Tagged URL preview'),\n preview\n ? h('div', {className:'flex items-center gap-2 bg-surface-container-lowest border border-primary/30 rounded-lg px-3 py-2'},\n h('div', {className:'flex-1 min-w-0 text-[11px] font-mono-data text-on-surface break-all'}, preview),\n h('button', {onClick: () => copy(preview, '__preview'), className:'flex-shrink-0 text-text-muted hover:text-primary', title:'Copy'}, h(Icon,{name: copied === '__preview' ? 'check' : 'content_copy', size:14}))\n )\n : EmptyNote('Enter a base URL to preview the tagged link.')\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: save, variant:'primary', size:'sm', disabled: busy || !canSave}, busy ? h(Spinner,{size:13}) : h(Icon,{name:'save',size:14}), 'Save link'),\n !canSave && h('span', {className:'text-[11px] text-text-muted'}, 'Base URL + source + medium + campaign required')\n )\n )\n ),\n // Saved library\n h(Section, {title:'Saved links', icon:'bookmark', accent:'text-tertiary',\n sub:'Reuse tagged campaign URLs',\n right: h(Btn, {onClick: load, variant:'secondary', size:'sm'}, h(Icon,{name:'refresh',size:14}), 'Refresh')},\n rows === null\n ? h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}))\n : rows.length === 0\n ? EmptyNote('No saved links yet \\\\u2014 build one on the left and click Save.')\n : h('div', {className:'space-y-1.5'},\n rows.map(l => h('div', {key:l.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 space-y-1'},\n h('div', {className:'flex items-center gap-2'},\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, l.name || l.utm_campaign || '(link)'),\n h('div', {className:'text-[10px] text-text-muted truncate'},\n [l.utm_source, l.utm_medium, l.utm_campaign].filter(Boolean).join(' \\\\u00B7 ') + (l.created_at ? ' \\\\u00B7 ' + fmtRel(l.created_at) : ''))\n ),\n h('button', {onClick: () => copy(l.full_url || buildUtmUrl(l.base_url, l), l.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Copy URL'}, h(Icon,{name: copied === l.id ? 'check' : 'content_copy', size:13})),\n h('button', {onClick: () => del(l.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Delete'}, h(Icon,{name:'delete',size:13}))\n ),\n h('div', {className:'text-[10px] font-mono-data text-on-surface-variant break-all bg-surface-container/40 rounded px-2 py-1'}, l.full_url || buildUtmUrl(l.base_url, l))\n ))\n )\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 4) BRAND KIT\n// ═══════════════════════════════════════════════════════════════════════════════\nexport function BrandKit() {\n const { Icon, Btn, Spinner } = N();\n const [data, setData] = useState(null);\n const [f, setF] = useState(null);\n const [busy, setBusy] = useState(false);\n const [toast, setToast] = useState('');\n\n const load = useCallback(() => {\n fetch('/api/marketing/brand-kit').then(r => r.json()).then(d => {\n const k = (d && typeof d === 'object') ? d : {};\n setData(k);\n setF({voice: k.voice||'', tone: k.tone||'', values: k.values||'', dos: k.dos||'', donts: k.donts||'', boilerplate: k.boilerplate||'', logo_url: k.logo_url||''});\n }).catch(() => { setData({}); setF({voice:'', tone:'', values:'', dos:'', donts:'', boilerplate:'', logo_url:''}); });\n }, []);\n useEffect(() => { load(); }, [load]);\n\n if (f === null) return h('div', {className:'glass-panel rounded-xl p-12 flex items-center justify-center'}, h(Spinner,{size:20}));\n const set = (k,v) => setF(s => ({...s, [k]: v}));\n const palette = (() => { const p = data && data.palette; if (!p) return []; try { const a = typeof p === 'string' ? JSON.parse(p) : p; return Array.isArray(a) ? a : []; } catch { return []; } })();\n\n const save = async () => {\n setBusy(true);\n const r = await fetch('/api/marketing/brand-kit', {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(f)}).catch(() => null);\n setBusy(false);\n if (r && r.ok) { setToast('Saved'); load(); setTimeout(() => setToast(''), 1500); }\n };\n\n const ta = (label, key, ph, rows) => h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, label),\n h('textarea', {value: f[key], onChange: e => set(key, e.target.value), rows: rows||2, placeholder: ph,\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none resize-none'})\n );\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Brand kit', icon:'palette', accent:'text-primary',\n sub:'Voice, tone and guardrails \\\\u2014 referenced when drafting marketing copy with AI',\n right: h('div', {className:'flex items-center gap-2'},\n toast && h('span', {className:'text-[11px] text-secondary'}, toast),\n h(Btn, {onClick: save, variant:'primary', size:'sm', disabled: busy}, busy ? h(Spinner,{size:13}) : h(Icon,{name:'save',size:14}), 'Save')\n )},\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-3'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Voice'),\n h('input', {type:'text', value: f.voice, onChange: e => set('voice', e.target.value), placeholder:'Confident, expert, human',\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Tone'),\n h('input', {type:'text', value: f.tone, onChange: e => set('tone', e.target.value), placeholder:'Direct but warm \\\\u00B7 no hype',\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'})\n )\n ),\n ta('Values', 'values', 'What the brand stands for \\\\u2014 one per line', 2),\n h('div', {className:'grid grid-cols-1 md:grid-cols-2 gap-3'},\n ta(\"Do's\", 'dos', 'Use active voice; lead with outcomes\\\\u2026', 3),\n ta(\"Don'ts\", 'donts', 'Avoid jargon; never overpromise\\\\u2026', 3)\n ),\n ta('Boilerplate', 'boilerplate', 'Standard company description used in footers / press\\\\u2026', 3),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Logo URL'),\n h('input', {type:'text', value: f.logo_url, onChange: e => set('logo_url', e.target.value), placeholder:'https://\\\\u2026/logo.svg',\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n // Palette (read-only swatches from saved JSON; enrichment / future editor populates it)\n palette.length > 0 && h('div', {className:'pt-2 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2'}, 'Palette'),\n h('div', {className:'flex flex-wrap gap-2'},\n palette.map((c,i) => h('div', {key:i, className:'flex items-center gap-1.5 bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1'},\n h('span', {className:'w-4 h-4 rounded flex-shrink-0 border border-border-subtle', style:{background: String(c)}}),\n h('span', {className:'text-[10px] font-mono-data text-text-muted'}, String(c))\n ))\n )\n )\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 5) NURTURE VIEW (marketing-framed sequences via /api/crm/sequences)\n// ═══════════════════════════════════════════════════════════════════════════════\nconst CH_ICON = {email:'mail', call:'call', task:'check_circle', linkedin:'group', ad:'campaign'};\n\nexport function NurtureView() {\n const { Icon, Btn, Spinner } = N();\n const [sequences, setSequences] = useState(null);\n const [creating, setCreating] = useState(false);\n const [draft, setDraft] = useState({name:'', description:''});\n const [openId, setOpenId] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/crm/sequences').then(r => r.json()).then(d => setSequences(Array.isArray(d) ? d : [])).catch(() => setSequences([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const create = async () => {\n if (!String(draft.name).trim()) return;\n await fetch('/api/crm/sequences', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({name: draft.name.trim(), description: draft.description.trim()})}).catch(()=>{});\n setDraft({name:'', description:''}); setCreating(false); load();\n };\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Nurture sequences', icon:'cadence', accent:'text-tertiary',\n sub:'Multi-step nurture cadences \\\\u00B7 shared with the CRM sequence engine',\n right: h(Btn, {onClick: () => setCreating(v => !v), variant:'secondary', size:'sm'}, h(Icon,{name: creating ? 'close' : 'add',size:14}), creating ? 'Cancel' : 'New sequence')},\n creating && h('div', {className:'bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2 mb-2'},\n h('input', {type:'text', value: draft.name, onChange: e => setDraft(d => ({...d, name: e.target.value})), placeholder:'Sequence name (e.g. Trial nurture)',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h('input', {type:'text', value: draft.description, onChange: e => setDraft(d => ({...d, description: e.target.value})), placeholder:'Goal / audience (optional)',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h(Btn, {onClick: create, variant:'primary', size:'sm', disabled: !String(draft.name).trim()}, h(Icon,{name:'save',size:14}), 'Create sequence')\n ),\n sequences === null\n ? h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}))\n : sequences.length === 0\n ? EmptyNote('No sequences yet \\\\u2014 create one to build a nurture cadence of steps.')\n : h('div', {className:'space-y-1.5'},\n sequences.map(s => h('div', {key:s.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg overflow-hidden'},\n h('button', {onClick: () => setOpenId(openId === s.id ? null : s.id), className:'w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-white/[0.02]'},\n h(Icon, {name: openId === s.id ? 'expand_more' : 'chevron_right', size:16, className:'text-text-muted flex-shrink-0'}),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, s.name || '(untitled)'),\n s.description && h('div', {className:'text-[10px] text-text-muted truncate'}, s.description)\n ),\n h('span', {className:'flex-shrink-0 text-[10px] text-text-muted font-mono-data'}, (Number(s.step_count)||0) + ' step' + ((Number(s.step_count)||0)===1?'':'s')),\n (s.active === false) && h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border border-border-subtle text-text-muted'}, 'paused')\n ),\n openId === s.id && h(NurtureSteps, {sequenceId: s.id})\n ))\n )\n )\n );\n}\n\nfunction NurtureSteps({sequenceId}) {\n const { Icon, Btn, Spinner } = N();\n const [steps, setSteps] = useState(null);\n const [adding, setAdding] = useState(false);\n const [draft, setDraft] = useState({channel:'email', delay_days:'0', subject:''});\n\n const load = useCallback(() => {\n fetch('/api/crm/sequences/' + sequenceId + '/steps').then(r => r.json()).then(d => setSteps(Array.isArray(d) ? d : [])).catch(() => setSteps([]));\n }, [sequenceId]);\n useEffect(() => { load(); }, [load]);\n\n const add = async () => {\n await fetch('/api/crm/sequences/' + sequenceId + '/steps', {method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({channel: draft.channel, delay_days: Number(draft.delay_days)||0, subject: draft.subject.trim(), body: ''})}).catch(()=>{});\n setDraft({channel:'email', delay_days:'0', subject:''}); setAdding(false); load();\n };\n\n return h('div', {className:'border-t border-border-subtle px-3 py-2.5 space-y-2 bg-surface-container/20'},\n steps === null\n ? h('div', {className:'flex items-center justify-center py-3'}, h(Spinner,{size:14}))\n : steps.length === 0\n ? EmptyNote('No steps yet.')\n : h('div', {className:'space-y-1.5'},\n steps.map(st => h('div', {key:st.id, className:'flex items-center gap-2 text-[11px]'},\n h('span', {className:'w-5 h-5 rounded-full bg-surface-container-high flex items-center justify-center text-[10px] font-bold text-on-surface-variant flex-shrink-0'}, st.step_order != null ? st.step_order : '\\\\u00B7'),\n h(Icon, {name: CH_ICON[st.channel] || 'mail', size:13, className:'text-primary flex-shrink-0'}),\n h('span', {className:'text-on-surface truncate flex-1'}, st.subject || st.body || ('(' + (st.channel||'email') + ' step)')),\n h('span', {className:'text-text-muted font-mono-data flex-shrink-0'}, '+' + (Number(st.delay_days)||0) + 'd')\n ))\n ),\n adding\n ? h('div', {className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-2 space-y-1.5'},\n h('div', {className:'flex gap-1.5'},\n ['email','linkedin','task'].map(c => h('button', {key:c, onClick: () => setDraft(d => ({...d, channel:c})),\n className:'flex-1 px-2 py-1 rounded-md text-[11px] font-semibold flex items-center justify-center gap-1 border ' + (draft.channel===c ? 'bg-primary text-white border-primary' : 'bg-surface-container border-border-subtle text-text-muted hover:text-on-surface')},\n h(Icon,{name: CH_ICON[c], size:12}), c)),\n h('input', {type:'number', value: draft.delay_days, onChange: e => setDraft(d => ({...d, delay_days: e.target.value})), title:'Delay days',\n className:'w-16 bg-surface-container border border-border-subtle rounded-md px-1.5 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none', placeholder:'days'})\n ),\n h('input', {type:'text', value: draft.subject, onChange: e => setDraft(d => ({...d, subject: e.target.value})), placeholder:'Subject / step note (optional)',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'}),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: add, variant:'primary', size:'sm'}, h(Icon,{name:'add',size:13}), 'Add step'),\n h('button', {onClick: () => setAdding(false), className:'text-[11px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n )\n : h('button', {onClick: () => setAdding(true), className:'text-[11px] text-primary hover:underline flex items-center gap-1 font-semibold'}, h(Icon,{name:'add',size:13}), 'Add step')\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 6) CRO FEED (recommendations as action cards)\n// ═══════════════════════════════════════════════════════════════════════════════\nconst PRIORITY_BADGE = {\n critical:'bg-error/15 text-error border-error/30',\n high:'bg-tertiary/15 text-tertiary border-tertiary/30',\n medium:'bg-primary/15 text-primary border-primary/30',\n low:'bg-surface-container-high text-on-surface-variant border-border-subtle',\n};\nconst priBadge = (p) => PRIORITY_BADGE[p] || PRIORITY_BADGE.medium;\n\nexport function CROFeed() {\n const { Icon, Btn, Spinner } = N();\n const [recs, setRecs] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/intelligence/recommendations').then(r => r.json()).then(d => setRecs(Array.isArray(d) ? d : [])).catch(() => setRecs([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const ask = (prompt) => { try { window.dispatchEvent(new CustomEvent('nexus:open-chat', {detail: {prompt: prompt || ''}})); } catch (e) {} };\n\n return h(Section, {title:'Optimization recommendations', icon:'lightbulb', accent:'text-tertiary',\n sub:'AI-derived next actions from your funnel + correlations',\n right: h(Btn, {onClick: load, variant:'secondary', size:'sm'}, h(Icon,{name:'refresh',size:14}), 'Refresh')},\n recs === null\n ? h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}))\n : recs.length === 0\n ? EmptyNote('No recommendations yet \\\\u2014 connect integrations to generate funnel intelligence.')\n : h('div', {className:'space-y-2'},\n recs.map((r,i) => h('div', {key:i, className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-3 flex items-start gap-3'},\n h('span', {className:'w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0 bg-tertiary/10 text-tertiary'}, h(Icon,{name:'lightbulb',size:16})),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'flex items-center gap-2 mb-1'},\n h('div', {className:'text-[13px] font-bold text-on-surface flex-1 min-w-0'}, r.title),\n h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-widest px-1.5 py-0.5 rounded border font-bold ' + priBadge(r.priority)}, r.priority)\n ),\n r.action && h('button', {onClick: () => ask(r.action),\n className:'text-[11px] font-bold uppercase tracking-widest text-tertiary hover:underline flex items-center gap-1'},\n h(Icon,{name:'auto_awesome',size:12}), r.action)\n )\n ))\n )\n );\n}\n\n `;\n}\n",[344],"d56be55c-5e7b-11f1-a9e2-1607ee4eb77e","frontend_knowledge_graph.ts","3b326e5a-5991-11f1-881b-ee650bb23af1",935,["D",1780402137967],"// Knowledge Graph view — modal that visualizes which knowledge files affect which AI features.\n// Backed by /api/knowledge/graph (nodes + edges + feature registry). Served at /api/app-knowledge-graph\n// and lazy-loaded by the Sidebar's \"Graph\" button so frontend_pages.ts stays under val.town's 80K limit.\n//\n// Shared deps come from window.__nexus (set by frontend_js.ts).\n\nexport function getKnowledgeGraphJS(): string {\n return `\nimport React, { useState, useEffect, useRef, useMemo } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// Registry order — used to lay out feature nodes top-to-bottom on the right column.\n// MUST match the backend registry so the SVG matches what the graph endpoint reports.\nconst FEATURE_ORDER = [\n 'chat','funnel_summary','kpis','ice_suggest','lead_scoring',\n 'digest','standup','cohort_ltv','correlations','recommendations'\n];\nconst FEATURE_LABELS = {\n chat:'Chat', funnel_summary:'Funnel Summary', kpis:'KPIs', ice_suggest:'ICE Suggest',\n lead_scoring:'Lead Scoring', digest:'Growth Digest', standup:'Standup',\n cohort_ltv:'Cohort LTV', correlations:'Correlations', recommendations:'Recommendations'\n};\n\nconst COLOR_KNOWLEDGE = '#c0c1ff'; // lavender\nconst COLOR_FEATURE = '#4edea3'; // mint\nconst COLOR_EDGE = '#c7c4d7';\n\nconst KIND_CHIP = {\n playbook: 'bg-primary/10 text-primary border-primary/30',\n framework: 'bg-tertiary/10 text-tertiary border-tertiary/30',\n benchmark: 'bg-secondary/10 text-secondary border-secondary/30',\n};\n\n// Left-bar categories — group knowledge files by kind in a fixed, logical order.\nconst KIND_ORDER = ['framework','formula','benchmark','playbook','reference'];\nconst KIND_LABELS = {\n framework:'Frameworks', formula:'Formulas', benchmark:'Benchmarks',\n playbook:'Playbooks', reference:'References', other:'Other',\n};\n\nfunction fmtTokens(t) {\n if (t == null) return '';\n if (t < 1000) return t + ' tk';\n return (Math.round(t/100)/10) + 'k tk';\n}\n\nexport function KnowledgeGraphView({open, onClose}) {\n const {Icon, Btn, Spinner} = N();\n const [graph, setGraph] = useState(null); // {nodes, edges, features}\n const [files, setFiles] = useState([]); // /api/knowledge raw list (drives left column)\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [hoverKnowledge, setHoverKnowledge] = useState(null);\n const [addPopover, setAddPopover] = useState(null); // featureId being targeted\n const [editing, setEditing] = useState(null); // file being edited (loaded with full content)\n const [editForm, setEditForm] = useState(null); // {name, kind, content, targets}\n const [editBusy, setEditBusy] = useState(false);\n const [editErr, setEditErr] = useState(null);\n const [editTab, setEditTab] = useState('content'); // 'content' | 'targets'\n const svgRef = useRef(null);\n\n // Open editor: fetch full content (list endpoint omits it) and populate the form.\n const openEditor = async (file) => {\n setEditing({id: file.id, loading: true});\n setEditErr(null); setEditTab('content');\n try {\n const r = await fetch('/api/knowledge/' + file.id);\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const full = await r.json();\n setEditing(full);\n setEditForm({\n name: full.name || '',\n kind: full.kind || 'playbook',\n content: full.content || '',\n targets: Array.isArray(full.targets) ? full.targets.slice() : [],\n enabled: full.enabled !== false\n });\n } catch (e) {\n setEditErr(e && e.message ? e.message : 'Failed to load file');\n setEditing(file); // fall back to row data\n setEditForm({\n name: file.name || '', kind: file.kind || 'playbook', content: '',\n targets: Array.isArray(file.targets) ? file.targets.slice() : [],\n enabled: file.enabled !== false\n });\n }\n };\n // Open the editor on a brand-new blank file (no id yet → saveEditor POSTs to create).\n const openNew = () => {\n setEditing({id: null, isNew: true});\n setEditErr(null); setEditTab('content');\n setEditForm({name:'', kind:'playbook', content:'', targets:[], enabled:true});\n };\n const closeEditor = () => { setEditing(null); setEditForm(null); setEditErr(null); setEditBusy(false); };\n const saveEditor = async () => {\n if (!editing || !editForm) return;\n setEditBusy(true); setEditErr(null);\n try {\n const isNew = editing.id == null;\n const r = await fetch(isNew ? '/api/knowledge' : '/api/knowledge/' + editing.id, {\n method: isNew ? 'POST' : 'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n name: editForm.name, kind: editForm.kind, content: editForm.content,\n targets: editForm.targets, enabled: editForm.enabled\n })\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const saved = await r.json();\n if (isNew) {\n setFiles(fs => fs.concat([saved]));\n } else {\n setFiles(fs => fs.map(f => f.id === editing.id ? {...f, ...saved} : f));\n }\n closeEditor();\n } catch (e) {\n setEditErr(e && e.message ? e.message : 'Save failed');\n } finally { setEditBusy(false); }\n };\n const resummarize = async () => {\n if (!editing) return;\n setEditBusy(true); setEditErr(null);\n try {\n const r = await fetch('/api/knowledge/' + editing.id + '/summarize', {method:'POST'});\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const out = await r.json();\n setFiles(fs => fs.map(f => f.id === editing.id ? {...f, summary: out.summary, tokens_estimate: out.tokens_estimate} : f));\n setEditing(e => e ? {...e, summary: out.summary, tokens_estimate: out.tokens_estimate} : e);\n } catch (e) {\n setEditErr(e && e.message ? e.message : 'Re-summarize failed');\n } finally { setEditBusy(false); }\n };\n const deleteFile = async () => {\n if (!editing) return;\n if (!confirm('Delete \"' + (editForm && editForm.name || editing.name) + '\"? This cannot be undone.')) return;\n setEditBusy(true); setEditErr(null);\n try {\n const r = await fetch('/api/knowledge/' + editing.id, {method:'DELETE'});\n if (!r.ok) throw new Error('HTTP ' + r.status);\n setFiles(fs => fs.filter(f => f.id !== editing.id));\n closeEditor();\n } catch (e) {\n setEditErr(e && e.message ? e.message : 'Delete failed');\n } finally { setEditBusy(false); }\n };\n\n // ---- File upload → content (Part 15.1) ----------------------------------\n // Reads .txt/.md/.csv/.json via FileReader, .pdf via pdfjs-dist, .docx via\n // mammoth. Extracted text is dropped into the editor content state. Strictly\n // additive: reuses the existing setEditForm content setter and editErr banner.\n const uploadInputRef = useRef(null);\n const [uploadBusy, setUploadBusy] = useState(false);\n const MAX_KNOWLEDGE_CHARS = 500000;\n\n const readTextFile = (file) => new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => resolve(String(reader.result || ''));\n reader.onerror = () => reject(new Error('Could not read file'));\n reader.readAsText(file);\n });\n\n const readPdfFile = async (file) => {\n const pdfjs = await import('https://esm.sh/pdfjs-dist@4.0.379/build/pdf.min.mjs');\n pdfjs.GlobalWorkerOptions.workerSrc = 'https://esm.sh/pdfjs-dist@4.0.379/build/pdf.worker.min.mjs';\n const buf = await file.arrayBuffer();\n const pdf = await pdfjs.getDocument({data: buf}).promise;\n const parts = [];\n for (let i = 1; i <= pdf.numPages; i++) {\n const page = await pdf.getPage(i);\n const tc = await page.getTextContent();\n parts.push(tc.items.map(it => (it && it.str) || '').join(' '));\n }\n return parts.join('\\\\n\\\\n');\n };\n\n const readDocxFile = async (file) => {\n const mammoth = await import('https://esm.sh/mammoth@1.6.0/mammoth.browser.min.js');\n const lib = (mammoth && mammoth.default) ? mammoth.default : mammoth;\n const buf = await file.arrayBuffer();\n const out = await lib.extractRawText({arrayBuffer: buf});\n return (out && out.value) || '';\n };\n\n const onUploadFile = async (e) => {\n const file = e && e.target && e.target.files && e.target.files[0];\n if (e && e.target) e.target.value = ''; // allow re-selecting the same file\n if (!file) return;\n setUploadBusy(true); setEditErr(null);\n try {\n const lower = (file.name || '').toLowerCase();\n let text = '';\n if (lower.endsWith('.pdf') || file.type === 'application/pdf') {\n text = await readPdfFile(file);\n } else if (lower.endsWith('.docx') || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {\n text = await readDocxFile(file);\n } else {\n text = await readTextFile(file);\n }\n text = (text || '').trim();\n if (!text) throw new Error('No readable text found in file');\n let truncated = false;\n if (text.length > MAX_KNOWLEDGE_CHARS) { text = text.slice(0, MAX_KNOWLEDGE_CHARS); truncated = true; }\n setEditForm(f => {\n const base = f || {name:'', kind:'playbook', content:'', targets:[], enabled:true};\n const nextName = (base.name && base.name.trim()) ? base.name : (file.name || '').replace(/\\\\.[^.]+$/, '');\n return {...base, content: text, name: nextName};\n });\n setEditTab('content');\n if (truncated) setEditErr('File truncated to ' + MAX_KNOWLEDGE_CHARS.toLocaleString() + ' characters.');\n } catch (err) {\n setEditErr('Upload failed: ' + (err && err.message ? err.message : 'could not parse file'));\n } finally { setUploadBusy(false); }\n };\n\n const load = async () => {\n setLoading(true); setError(null);\n try {\n const [g, k] = await Promise.all([\n fetch('/api/knowledge/graph').then(r => r.json()),\n fetch('/api/knowledge').then(r => r.json()),\n ]);\n setGraph(g && g.nodes ? g : {nodes:[], edges:[], features:[]});\n setFiles(Array.isArray(k) ? k : []);\n } catch (e) {\n setError(e && e.message ? e.message : 'Failed to load knowledge graph');\n } finally { setLoading(false); }\n };\n\n useEffect(() => { if (open) load(); }, [open]);\n\n // Mutations — keep local state in sync so the SVG re-renders without waiting for refetch.\n const updateTargets = async (fileId, nextTargets) => {\n setFiles(fs => fs.map(f => f.id === fileId ? {...f, targets: nextTargets} : f));\n try {\n await fetch('/api/knowledge/' + fileId, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({targets: nextTargets})\n });\n } catch {}\n };\n const toggleTarget = (file, featureId) => {\n const cur = Array.isArray(file.targets) ? file.targets : [];\n const next = cur.includes(featureId) ? cur.filter(t => t !== featureId) : cur.concat([featureId]);\n updateTargets(file.id, next);\n };\n const removeEdge = (fileId, featureId) => {\n const f = files.find(x => x.id === fileId);\n if (!f) return;\n const cur = Array.isArray(f.targets) ? f.targets : [];\n updateTargets(fileId, cur.filter(t => t !== featureId));\n };\n const toggleEnabled = async (file) => {\n setFiles(fs => fs.map(f => f.id === file.id ? {...f, enabled: !f.enabled} : f));\n try {\n await fetch('/api/knowledge/' + file.id, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({enabled: !file.enabled})\n });\n } catch {}\n };\n\n // Derived: SVG layout. Knowledge on the left, features on the right.\n const layout = useMemo(() => {\n const W = 540, H = 560;\n const padTop = 30, padBot = 30;\n const kx = 70; // x of knowledge nodes\n const fx = W - 90; // x of feature nodes\n const usableH = H - padTop - padBot;\n\n const kFiles = files.slice(); // left column drives knowledge layout (so disabled show too)\n const features = FEATURE_ORDER.map(id => ({id, label: FEATURE_LABELS[id] || id}));\n\n const kStep = kFiles.length > 1 ? usableH / (kFiles.length - 1) : 0;\n const kPos = {};\n kFiles.forEach((f, i) => { kPos[f.id] = {x: kx, y: padTop + (kFiles.length === 1 ? usableH/2 : i * kStep)}; });\n\n const fStep = features.length > 1 ? usableH / (features.length - 1) : 0;\n const fPos = {};\n features.forEach((f, i) => { fPos[f.id] = {x: fx, y: padTop + (features.length === 1 ? usableH/2 : i * fStep)}; });\n\n return {W, H, kFiles, features, kPos, fPos};\n }, [files]);\n\n if (!open) return null;\n\n const targetsOf = (f) => (Array.isArray(f.targets) ? f.targets : []);\n const fileById = (id) => files.find(f => f.id === id);\n\n // Files NOT yet targeting a given feature, used by the per-feature \"+\" popover.\n const availableForFeature = (featureId) => files.filter(f => f.enabled && !targetsOf(f).includes(featureId));\n\n // One knowledge-file row in the left column (extracted so categories can reuse it).\n const renderFileRow = (f) => {\n const targets = targetsOf(f);\n const isGlobal = targets.length === 0;\n const isHover = hoverKnowledge === f.id;\n return h('div', {\n key: f.id,\n onMouseEnter: () => setHoverKnowledge(f.id),\n onMouseLeave: () => setHoverKnowledge(null),\n className:'p-2.5 rounded-lg border bg-surface-container-lowest transition-all ' +\n (isHover ? 'border-primary/40' : 'border-border-subtle') +\n (f.enabled ? '' : ' opacity-50 grayscale')\n },\n // Row 1: name + kind + tokens + enable toggle + edit button\n h('div', {className:'flex items-center gap-2 mb-1.5'},\n h('button', {\n onClick: () => toggleEnabled(f), type:'button',\n title: f.enabled ? 'Disable in AI context' : 'Enable',\n className:'w-2 h-2 rounded-full flex-shrink-0 ' + (f.enabled ? 'bg-secondary' : 'bg-text-muted')\n }),\n h('button', {\n type:'button', onClick: () => openEditor(f),\n title:'Edit content',\n className:'flex-1 truncate text-left text-[12px] font-semibold text-on-surface hover:text-primary transition-colors'\n }, f.name),\n f.kind && h('span', {\n className:'text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border flex-shrink-0 ' +\n (KIND_CHIP[f.kind] || 'bg-surface-container-high text-text-muted border-border-subtle')\n }, f.kind),\n h('span', {className:'text-[9px] font-mono-data text-text-muted flex-shrink-0'},\n fmtTokens(f.tokens_estimate)\n ),\n h('button', {\n type:'button', onClick: () => openEditor(f), title:'Edit',\n className:'p-1 rounded text-text-muted hover:text-primary hover:bg-surface-container-high transition-colors flex-shrink-0'\n }, h(Icon, {name:'edit', size:12}))\n ),\n // Row 2: GLOBAL badge OR feature checkboxes\n isGlobal\n ? h('div', {className:'flex items-center gap-1.5'},\n h('span', {className:'inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-widest bg-secondary/10 text-secondary border border-secondary/30'},\n h(Icon, {name:'public', size:10}), 'GLOBAL'\n ),\n h('span', {className:'text-[10px] text-text-muted'}, 'affects every AI feature')\n )\n : h('div', {className:'flex flex-wrap gap-1'},\n FEATURE_ORDER.map(fid => {\n const on = targets.includes(fid);\n return h('label', {\n key: fid, title: FEATURE_LABELS[fid],\n className:'inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] cursor-pointer border transition-colors ' +\n (on\n ? 'bg-primary/15 text-primary border-primary/40'\n : 'bg-surface-container-high text-text-muted border-border-subtle hover:text-on-surface-variant')\n },\n h('input', {\n type:'checkbox', checked: on, onChange: () => toggleTarget(f, fid),\n className:'sr-only'\n }),\n h('span', null, FEATURE_LABELS[fid])\n );\n })\n )\n );\n };\n\n return h(React.Fragment, null,\n // Glass backdrop\n h('div', {\n className:'fixed inset-0 bg-black/60 backdrop-blur-sm z-[70]',\n onClick: onClose\n }),\n // Full-screen panel\n h('div', {\n className:'fixed inset-0 z-[71] pointer-events-none'\n },\n h('div', {\n className:'glass-panel shadow-2xl pointer-events-auto flex flex-col overflow-hidden w-screen h-screen',\n onClick: (e) => e.stopPropagation()\n },\n // Header\n h('div', {className:'p-lg border-b border-border-subtle flex items-center justify-between flex-shrink-0'},\n h('div', {className:'flex items-center gap-3'},\n h(Icon, {name:'hub', size:20, filled:true, className:'text-primary'}),\n h('h3', {className:'text-[16px] font-bold tracking-tight'}, 'Knowledge Graph'),\n graph && h('span', {className:'text-[10px] font-bold uppercase tracking-widest bg-primary/10 text-primary border border-primary/20 px-2 py-0.5 rounded'},\n files.length + ' file' + (files.length===1?'':'s') + ' - ' + FEATURE_ORDER.length + ' features'\n )\n ),\n h('div', {className:'flex items-center gap-1'},\n h('button', {\n onClick: openNew,\n className:'inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-[11px] font-bold bg-primary text-on-primary hover:bg-primary/90 transition-colors mr-1',\n title:'Add a knowledge file'\n }, h(Icon, {name:'add', size:14}), 'Add knowledge'),\n h('button', {\n onClick: load,\n className:'p-1.5 rounded hover:bg-surface-container-high text-text-muted hover:text-on-surface transition-colors',\n title:'Reload'\n }, h(Icon, {name: loading ? 'sync' : 'refresh', size:16, className: loading ? 'spin' : ''})),\n h('button', {\n onClick: onClose,\n className:'p-1.5 rounded hover:bg-surface-container-high text-text-muted hover:text-on-surface transition-colors',\n title:'Close'\n }, h(Icon, {name:'close', size:18}))\n )\n ),\n\n // Body\n h('div', {className:'flex-1 overflow-hidden grid grid-cols-12 gap-0'},\n // LEFT: knowledge file list with kind + tokens + per-feature checkboxes\n h('div', {className:'col-span-5 border-r border-border-subtle overflow-y-auto p-md space-y-2'},\n error && h('div', {className:'p-3 text-[12px] text-error bg-error/5 border border-error/20 rounded'}, error),\n // Explainer — what knowledge is for + how it reaches the AI. Always visible.\n h('div', {className:'p-3 rounded-lg border border-primary/20 bg-primary/5 space-y-1.5'},\n h('div', {className:'flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-widest text-primary'},\n h(Icon, {name:'lightbulb', size:13, filled:true}),\n 'How knowledge works'\n ),\n h('div', {className:'text-[11px] leading-relaxed text-on-surface-variant'},\n 'Knowledge files are injected into the AI\\\\'s context so its answers stay grounded in ',\n h('strong', {className:'text-on-surface'}, 'your'),\n ' formulas, benchmarks, and playbooks — not generic guesses.'\n ),\n h('div', {className:'text-[10px] leading-relaxed text-text-muted'},\n 'Add a file below, then toggle which AI features load it. ',\n h('strong', {className:'text-on-surface-variant'}, 'Global'),\n ' files reach every feature; targeted files load only where you connect them.'\n ),\n h('button', {\n type:'button', onClick: openNew,\n className:'mt-1 inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-[11px] font-bold bg-primary text-on-primary hover:bg-primary/90 transition-colors'\n }, h(Icon, {name:'add', size:13}), 'Add knowledge')\n ),\n loading && files.length === 0 && h('div', {className:'flex items-center justify-center py-8'}, h(Spinner, {size:18})),\n !loading && files.length === 0 && !error && h('div', {className:'text-center text-[12px] text-text-muted py-6 border border-dashed border-border-subtle rounded-lg'},\n h(Icon, {name:'menu_book', size:28, className:'text-text-muted/50 mb-2 mx-auto block'}),\n h('div', {className:'font-semibold text-on-surface-variant'}, 'No knowledge files yet'),\n h('div', {className:'text-[10px] mt-1 px-4'}, 'Use Add knowledge above to paste or upload a doc (.txt .md .pdf .docx), pick its kind, and choose which features use it.')\n ),\n (() => {\n // Group files by kind into logical categories, fixed order, \"Other\" last.\n const groups = {};\n layout.kFiles.forEach(f => {\n const k = KIND_LABELS[f.kind] ? f.kind : 'other';\n (groups[k] = groups[k] || []).push(f);\n });\n const order = KIND_ORDER.filter(k => groups[k] && groups[k].length);\n if (groups.other && groups.other.length) order.push('other');\n return order.map(k => h('div', {key:'grp_' + k, className:'space-y-2'},\n h('div', {className:'flex items-center gap-2'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted whitespace-nowrap'}, KIND_LABELS[k]),\n h('span', {className:'text-[9px] font-mono-data text-text-muted'}, '(' + groups[k].length + ')'),\n h('span', {className:'flex-1 h-px bg-border-subtle/60'})\n ),\n groups[k].map(f => renderFileRow(f))\n ));\n })()\n ),\n\n // RIGHT: SVG graph\n h('div', {className:'col-span-7 relative overflow-hidden bg-surface-container-lowest/30'},\n h('svg', {\n ref: svgRef,\n viewBox: '0 0 ' + layout.W + ' ' + layout.H,\n preserveAspectRatio:'xMidYMid meet',\n style:{width:'100%', height:'100%', display:'block'}\n },\n // Column labels\n h('text', {x: 70, y: 14, textAnchor:'middle', style:{fill:'#9a96b1', fontSize:10, fontWeight:700, letterSpacing:'0.12em'}},\n 'KNOWLEDGE'\n ),\n h('text', {x: layout.W - 90, y: 14, textAnchor:'middle', style:{fill:'#9a96b1', fontSize:10, fontWeight:700, letterSpacing:'0.12em'}},\n 'AI FEATURES'\n ),\n\n // Edges — drawn first so nodes sit on top\n layout.kFiles.flatMap(f => {\n const targets = targetsOf(f);\n if (targets.length === 0) return [];\n const kp = layout.kPos[f.id];\n if (!kp) return [];\n const isHov = hoverKnowledge === f.id;\n const dimmed = hoverKnowledge && hoverKnowledge !== f.id;\n return targets.map(tid => {\n const fp = layout.fPos[tid];\n if (!fp) return null;\n // Bezier curve for a softer look\n const midX = (kp.x + fp.x) / 2;\n const d = 'M ' + kp.x + ' ' + kp.y +\n ' C ' + midX + ' ' + kp.y + ', ' + midX + ' ' + fp.y + ', ' + fp.x + ' ' + fp.y;\n return h('path', {\n key: f.id + '__' + tid,\n d,\n fill:'none',\n stroke: isHov ? COLOR_KNOWLEDGE : COLOR_EDGE,\n strokeWidth: isHov ? 1.8 : 1.2,\n opacity: isHov ? 1.0 : (dimmed ? 0.12 : 0.4),\n style:{cursor:'pointer', transition:'opacity 120ms, stroke 120ms, stroke-width 120ms'},\n onClick: () => removeEdge(f.id, tid),\n children: h('title', null, 'Click to remove: ' + f.name + ' → ' + (FEATURE_LABELS[tid] || tid))\n });\n }).filter(Boolean);\n }),\n\n // Knowledge nodes (circles, left column)\n layout.kFiles.map(f => {\n const p = layout.kPos[f.id];\n if (!p) return null;\n const isHov = hoverKnowledge === f.id;\n const dimmed = hoverKnowledge && hoverKnowledge !== f.id;\n const isGlobal = targetsOf(f).length === 0;\n return h('g', {\n key: 'kn_' + f.id,\n onMouseEnter: () => setHoverKnowledge(f.id),\n onMouseLeave: () => setHoverKnowledge(null),\n style:{cursor:'pointer', opacity: f.enabled ? (dimmed ? 0.35 : 1) : 0.4, filter: f.enabled ? 'none' : 'grayscale(1)', transition:'opacity 120ms'}\n },\n h('circle', {\n cx: p.x, cy: p.y, r: isHov ? 9 : 7,\n fill: COLOR_KNOWLEDGE,\n stroke: isHov ? '#ffffff' : 'rgba(255,255,255,0.15)',\n strokeWidth: isHov ? 2 : 1,\n style:{transition:'r 120ms, stroke 120ms'}\n }),\n isGlobal && h('circle', {\n cx: p.x, cy: p.y, r: 12,\n fill:'none', stroke: COLOR_KNOWLEDGE, strokeWidth: 1, opacity: 0.5,\n strokeDasharray:'2 2'\n }),\n h('text', {\n x: p.x - 14, y: p.y + 3, textAnchor:'end',\n style:{fill:'#e6e1f3', fontSize: 10.5, fontWeight: isHov ? 700 : 500}\n }, (f.name || '').length > 22 ? (f.name || '').slice(0, 21) + '…' : (f.name || '')),\n isGlobal && h('text', {\n x: p.x - 14, y: p.y + 14, textAnchor:'end',\n style:{fill:'#4edea3', fontSize: 8, fontWeight: 700, letterSpacing:'0.12em'}\n }, 'GLOBAL'),\n h('title', null, f.name + ' - ' + (f.kind || '') + ' - ' + fmtTokens(f.tokens_estimate))\n );\n }),\n\n // Feature nodes (rounded rects, right column)\n layout.features.map(feat => {\n const p = layout.fPos[feat.id];\n if (!p) return null;\n // Highlight if hovered knowledge targets it\n const hovFile = hoverKnowledge ? fileById(hoverKnowledge) : null;\n const isLit = hovFile && targetsOf(hovFile).includes(feat.id);\n const isGlobalHit = hovFile && targetsOf(hovFile).length === 0;\n const lit = isLit || isGlobalHit;\n return h('g', {key:'ft_' + feat.id, style:{cursor:'default'}},\n h('rect', {\n x: p.x - 56, y: p.y - 12, width: 112, height: 24, rx: 6, ry: 6,\n fill: lit ? COLOR_FEATURE : 'rgba(78, 222, 163, 0.18)',\n stroke: COLOR_FEATURE,\n strokeWidth: lit ? 1.8 : 1,\n opacity: hoverKnowledge && !lit ? 0.4 : 1,\n style:{transition:'opacity 120ms, fill 120ms, stroke-width 120ms'}\n }),\n h('text', {\n x: p.x, y: p.y + 3.5, textAnchor:'middle',\n style:{fill: lit ? '#0d2a1d' : '#e6e1f3', fontSize: 10.5, fontWeight: lit ? 700 : 600, pointerEvents:'none'}\n }, feat.label),\n // \"+\" add button on the right of each feature pill\n h('g', {\n onClick: () => setAddPopover(addPopover === feat.id ? null : feat.id),\n style:{cursor:'pointer'}\n },\n h('circle', {\n cx: p.x + 70, cy: p.y, r: 9,\n fill: addPopover === feat.id ? COLOR_FEATURE : 'rgba(255,255,255,0.06)',\n stroke: COLOR_FEATURE, strokeWidth: 1\n }),\n h('text', {\n x: p.x + 70, y: p.y + 4, textAnchor:'middle',\n style:{fill: addPopover === feat.id ? '#0d2a1d' : COLOR_FEATURE, fontSize: 12, fontWeight: 900, pointerEvents:'none'}\n }, '+'),\n h('title', null, 'Add a knowledge file to ' + feat.label)\n )\n );\n })\n ),\n\n // Add popover — overlaid on top of the SVG, anchored to the active feature node.\n addPopover && (() => {\n const idx = FEATURE_ORDER.indexOf(addPopover);\n if (idx < 0) return null;\n const candidates = availableForFeature(addPopover);\n // Approximate popover position as a percentage of the SVG container\n const topPct = ((30 + (FEATURE_ORDER.length > 1 ? (idx * (560 - 60) / (FEATURE_ORDER.length - 1)) : (560-60)/2)) / 560) * 100;\n return h('div', {\n className:'absolute z-10 glass-panel border border-border-subtle rounded-lg shadow-xl p-2 w-[220px] max-h-[260px] overflow-y-auto',\n style:{right: 16, top: 'calc(' + topPct.toFixed(2) + '% - 8px)'},\n onClick: (e) => e.stopPropagation()\n },\n h('div', {className:'flex items-center justify-between mb-1.5 px-1'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'},\n 'Add to ' + (FEATURE_LABELS[addPopover] || addPopover)\n ),\n h('button', {\n onClick: () => setAddPopover(null),\n className:'text-text-muted hover:text-on-surface'\n }, h(Icon, {name:'close', size:12}))\n ),\n candidates.length === 0\n ? h('div', {className:'text-[11px] text-text-muted italic px-2 py-3 text-center'},\n 'All enabled files already target this feature.'\n )\n : candidates.map(f => h('button', {\n key: f.id,\n onClick: () => {\n toggleTarget(f, addPopover);\n setAddPopover(null);\n },\n className:'w-full flex items-center gap-2 px-2 py-1.5 rounded text-left text-[11px] text-on-surface-variant hover:bg-primary/10 hover:text-primary transition-colors'\n },\n h('span', {className:'w-1.5 h-1.5 rounded-full bg-primary/60 flex-shrink-0'}),\n h('span', {className:'flex-1 truncate'}, f.name),\n f.kind && h('span', {className:'text-[9px] font-mono-data text-text-muted'}, f.kind)\n ))\n );\n })()\n )\n ),\n\n // Editor overlay — opens on top of the graph modal when a knowledge row is clicked.\n editing && h('div', {\n className:'absolute inset-0 bg-black/40 backdrop-blur-sm z-20 flex items-center justify-center p-4',\n onClick: closeEditor\n },\n h('div', {\n className:'glass-panel rounded-lg border border-border-subtle shadow-2xl flex flex-col overflow-hidden',\n style:{width:'min(820px, 96%)', height:'min(620px, 92%)'},\n onClick: (e) => e.stopPropagation()\n },\n // Editor header\n h('div', {className:'p-md border-b border-border-subtle flex items-center justify-between flex-shrink-0'},\n h('div', {className:'flex items-center gap-2 flex-1 min-w-0'},\n h(Icon, {name:'edit_note', size:18, className:'text-primary flex-shrink-0'}),\n editing && editing.loading\n ? h('span', {className:'text-[13px] font-semibold text-text-muted'}, 'Loading…')\n : h('input', {\n value: (editForm && editForm.name) || '',\n onChange: (e) => setEditForm(f => ({...f, name: e.target.value})),\n placeholder:'Knowledge file name',\n className:'flex-1 bg-transparent border-0 outline-none text-[14px] font-semibold text-on-surface px-1 focus:bg-surface-container-high rounded'\n })\n ),\n h('button', {\n onClick: closeEditor,\n className:'p-1.5 rounded hover:bg-surface-container-high text-text-muted hover:text-on-surface transition-colors flex-shrink-0',\n title:'Close'\n }, h(Icon, {name:'close', size:16}))\n ),\n\n // Toolbar: kind dropdown + enabled toggle + tabs + meta\n h('div', {className:'px-md py-2 border-b border-border-subtle flex items-center gap-3 flex-wrap flex-shrink-0 bg-surface-container/30'},\n h('label', {className:'flex items-center gap-1.5 text-[11px] text-text-muted'},\n 'Kind',\n h('select', {\n value: (editForm && editForm.kind) || 'playbook',\n onChange: (e) => setEditForm(f => ({...f, kind: e.target.value})),\n className:'bg-surface-container-high border border-border-subtle rounded px-1.5 py-0.5 text-[11px] text-on-surface'\n },\n ['playbook','framework','benchmark','formula','reference'].map(k => h('option', {key:k, value:k}, k))\n )\n ),\n h('label', {className:'flex items-center gap-1.5 text-[11px] cursor-pointer text-text-muted'},\n h('input', {\n type:'checkbox', checked: !!(editForm && editForm.enabled),\n onChange: (e) => setEditForm(f => ({...f, enabled: e.target.checked})),\n className:'accent-primary'\n }),\n 'Enabled in AI context'\n ),\n h('div', {className:'flex items-center gap-1 ml-auto'},\n // Hidden file input + Upload button — extracts text/PDF/DOCX into content.\n h('input', {\n ref: uploadInputRef, type:'file',\n accept:'.txt,.md,.csv,.json,.pdf,.docx',\n onChange: onUploadFile,\n className:'hidden'\n }),\n h('button', {\n type:'button',\n onClick: () => uploadInputRef.current && uploadInputRef.current.click(),\n disabled: uploadBusy,\n title:'Upload a file (.txt .md .csv .json .pdf .docx) into content',\n className:'px-2.5 py-1 rounded text-[11px] font-semibold text-text-muted hover:text-on-surface hover:bg-surface-container-high transition-colors disabled:opacity-50 inline-flex items-center gap-1'\n },\n uploadBusy ? h(Spinner, {size:12}) : h(Icon, {name:'upload_file', size:14}),\n uploadBusy ? 'Reading…' : 'Upload'\n ),\n h('button', {\n onClick: () => setEditTab('content'),\n className:'px-2.5 py-1 rounded text-[11px] font-semibold transition-colors ' +\n (editTab==='content' ? 'bg-primary/15 text-primary' : 'text-text-muted hover:text-on-surface')\n }, 'Content'),\n h('button', {\n onClick: () => setEditTab('targets'),\n className:'px-2.5 py-1 rounded text-[11px] font-semibold transition-colors ' +\n (editTab==='targets' ? 'bg-primary/15 text-primary' : 'text-text-muted hover:text-on-surface')\n },\n 'Targets ',\n h('span', {className:'text-[10px] opacity-70'},\n '(' + ((editForm && editForm.targets && editForm.targets.length) || 0) + (editForm && editForm.targets && editForm.targets.length === 0 ? ' = global' : '') + ')'\n )\n )\n )\n ),\n\n // Body\n h('div', {className:'flex-1 overflow-hidden flex flex-col'},\n editTab === 'content'\n ? h('textarea', {\n value: (editForm && editForm.content) || '',\n onChange: (e) => setEditForm(f => ({...f, content: e.target.value})),\n spellCheck: false,\n placeholder:'# Knowledge content (Markdown)\\\\n\\\\nDescribe formulas, thresholds, playbooks the AI should follow…',\n className:'flex-1 w-full bg-surface-container-lowest/40 border-0 outline-none p-md text-[12px] font-mono-data text-on-surface resize-none'\n })\n : h('div', {className:'flex-1 overflow-y-auto p-md'},\n h('div', {className:'text-[11px] text-text-muted mb-2'},\n 'Pick the AI features that should load this file. ',\n h('strong', {className:'text-on-surface-variant'}, 'Empty = global'),\n ' (loaded by every feature).'\n ),\n h('div', {className:'grid grid-cols-2 gap-1.5'},\n FEATURE_ORDER.map(fid => {\n const on = editForm && editForm.targets && editForm.targets.includes(fid);\n return h('label', {\n key: fid,\n className:'flex items-center gap-2 px-2.5 py-2 rounded border cursor-pointer transition-colors ' +\n (on\n ? 'bg-primary/10 text-primary border-primary/30'\n : 'bg-surface-container-lowest text-on-surface-variant border-border-subtle hover:border-border')\n },\n h('input', {\n type:'checkbox', checked: !!on,\n onChange: () => setEditForm(f => {\n const cur = Array.isArray(f.targets) ? f.targets : [];\n const next = cur.includes(fid) ? cur.filter(t => t !== fid) : cur.concat([fid]);\n return {...f, targets: next};\n }),\n className:'accent-primary'\n }),\n h('span', {className:'text-[12px] font-semibold'}, FEATURE_LABELS[fid] || fid)\n );\n })\n ),\n h('button', {\n onClick: () => setEditForm(f => ({...f, targets: []})),\n className:'mt-3 text-[10px] uppercase tracking-widest font-bold text-text-muted hover:text-primary transition-colors'\n }, 'Reset to global')\n )\n ),\n\n // Footer: actions + meta + error\n h('div', {className:'px-md py-2.5 border-t border-border-subtle bg-surface-container/30 flex-shrink-0'},\n editErr && h('div', {className:'mb-2 text-[11px] text-error bg-error/5 border border-error/20 rounded px-2 py-1'}, editErr),\n h('div', {className:'flex items-center gap-2'},\n editing && editing.id != null && h('button', {\n onClick: deleteFile, disabled: editBusy,\n className:'px-2.5 py-1.5 rounded text-[11px] font-semibold text-error hover:bg-error/10 transition-colors disabled:opacity-50',\n title:'Delete this knowledge file'\n }, h(Icon, {name:'delete', size:14, className:'inline mr-1'}), 'Delete'),\n editing && editing.id != null && h('button', {\n onClick: resummarize, disabled: editBusy,\n className:'px-2.5 py-1.5 rounded text-[11px] font-semibold text-text-muted hover:text-on-surface hover:bg-surface-container-high transition-colors disabled:opacity-50',\n title:'Re-summarize and recompute tokens from current content'\n }, h(Icon, {name:'auto_awesome', size:14, className:'inline mr-1'}), 'Re-summarize'),\n h('span', {className:'flex-1 text-[10px] text-text-muted font-mono-data text-right'},\n editing && editing.tokens_estimate != null ? fmtTokens(editing.tokens_estimate) + ' • ' : '',\n editing && editing.source ? editing.source : ''\n ),\n h('button', {\n onClick: closeEditor, disabled: editBusy,\n className:'px-3 py-1.5 rounded text-[11px] font-semibold text-text-muted hover:text-on-surface hover:bg-surface-container-high transition-colors disabled:opacity-50'\n }, 'Cancel'),\n h('button', {\n onClick: saveEditor, disabled: editBusy || !editForm || !(editForm.name || '').trim(),\n className:'px-3 py-1.5 rounded text-[11px] font-bold bg-primary text-on-primary hover:bg-primary/90 transition-colors disabled:opacity-50 inline-flex items-center gap-1.5'\n },\n editBusy && h(Spinner, {size:12}),\n 'Save'\n )\n )\n )\n )\n ),\n\n // Footer hint strip\n h('div', {className:'px-lg py-2 border-t border-border-subtle flex items-center justify-between text-[10px] text-text-muted bg-surface-container/30 flex-shrink-0'},\n h('div', {className:'flex items-center gap-3'},\n h('span', {className:'flex items-center gap-1.5'},\n h('span', {className:'w-2 h-2 rounded-full', style:{background: COLOR_KNOWLEDGE}}),\n 'knowledge'\n ),\n h('span', {className:'flex items-center gap-1.5'},\n h('span', {className:'w-2 h-2 rounded-sm', style:{background: COLOR_FEATURE}}),\n 'AI feature'\n ),\n h('span', {className:'flex items-center gap-1.5'},\n h('span', {className:'w-3 h-px', style:{background: COLOR_EDGE}}),\n 'click edge to disconnect'\n )\n ),\n h('span', null, 'Hover a knowledge file to highlight its reach.')\n )\n )\n )\n );\n}\n`;\n}\n",[352],"264f8a5a-5ef9-11f1-b22e-1607ee4eb77e","frontend_js2.ts","8e7f1b2c-5792-11f1-a888-ee650bb23af1",961,["D",1780455960768],60,"export function getAppJS2(): string {\n return `\n\n // Deterministic icon picker by agent name hash - gives Market Sentry / Creative Weaver / Threat Hunter variety.\n const AGENT_ICONS = ['psychology', 'architecture', 'security', 'monitoring', 'biotech', 'hub', 'auto_awesome', 'memory'];\n const iconForAgent = (agent) => {\n const tools = parseTools(agent.tools);\n if (tools.includes('ahrefs') || tools.includes('gsc')) return 'security';\n if (tools.includes('ga4') || tools.includes('youtube')) return 'monitoring';\n if (tools.includes('wordpress') || tools.includes('producthunt')) return 'architecture';\n if (agent.workspace === 'sales') return 'contact_mail';\n const s = (agent.name || '').split('').reduce((a,c) => a + c.charCodeAt(0), 0);\n return AGENT_ICONS[s % AGENT_ICONS.length];\n };\n\n // \"time ago\" for last_run_at (real timestamp). Returns '-' when never run.\n const fmtAgo = (iso) => {\n if (!iso) return 'never';\n const ms = Date.now() - new Date(iso).getTime();\n const h = Math.floor(ms / 3600000), m = Math.floor((ms % 3600000) / 60000);\n if (ms < 60000) return 'just now';\n if (ms < 3600000) return m + 'm ago';\n if (ms < 86400000) return h + 'h ' + m + 'm ago';\n return Math.floor(h/24) + 'd ago';\n };\n\n function AgentCard({agent, onToggle, onEdit, onDelete, onRun}) {\n const [running, setRunning] = useState(false);\n const [recent, setRecent] = useState([]);\n // C3: pull last 3 runs for the timeline strip (cheap query, indexed on agent_id).\n useEffect(() => {\n fetch(\\`/api/agents/\\${agent.id}/runs?limit=3\\`).then(r => r.json()).then(r => Array.isArray(r) && setRecent(r)).catch(() => {});\n }, [agent.id, running]);\n const handleRun = async () => {\n setRunning(true);\n try {\n // Record the manual run trigger before delegating to onRun (which does the actual work).\n await fetch(\\`/api/agents/\\${agent.id}/runs\\`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({trigger:'manual'})}).catch(() => {});\n await onRun(agent);\n } finally { setRunning(false); }\n };\n const tools = parseTools(agent.tools);\n const isMarketing = agent.workspace === 'marketing';\n const accent = isMarketing ? 'primary' : 'secondary';\n const accentClasses = isMarketing\n ? { glow: 'neon-glow-primary', border: '', iconBg: 'bg-primary/10 border-primary/20', iconText: 'text-primary' }\n : { glow: 'neon-glow-secondary', border: 'border-l-4 border-l-secondary/30', iconBg: 'bg-secondary/10 border-secondary/20', iconText: 'text-secondary' };\n\n // Footer shows REAL last-run time (last_run_at from the run-state contract) + an\n // always-actionable run button. While a manual run is in flight we show an honest\n // \"Executing-\" spinner-text (no fabricated progress percentage).\n let footer;\n if (running) {\n footer = h('div', {className:'pt-3 border-t border-border-subtle flex justify-between items-center gap-2'},\n h('span', {className:'font-mono-data text-[11px] text-text-muted'}, 'Executing-'),\n h(Spinner, {size: 12})\n );\n } else {\n footer = h('div', {className:'pt-3 border-t border-border-subtle flex justify-between items-center gap-2'},\n h('span', {className:'font-mono-data text-[11px] text-text-muted'},\n 'Last run: ' + fmtAgo(agent.last_run_at)\n ),\n h('button', {\n onClick: handleRun, type:'button',\n className:'text-' + accent + ' font-bold text-[10px] uppercase tracking-widest hover:underline'\n }, agent.enabled ? 'Run Now' : 'Wake Agent')\n );\n }\n\n return h('div', {\n className: 'glass-panel p-5 rounded-xl group transition-all flex flex-col gap-3.5 ' + accentClasses.glow + ' ' + accentClasses.border\n },\n h('div', {className:'flex justify-between items-start gap-2.5'},\n h('div', {className:'flex items-center gap-3 flex-1 min-w-0'},\n h('div', {className:'w-12 h-12 border rounded-lg flex items-center justify-center flex-shrink-0 transition-all group-hover:scale-105 ' + accentClasses.iconBg + ' ' + accentClasses.iconText},\n h(Icon, {name: iconForAgent(agent), size:28})\n ),\n h('div', {className:'min-w-0 flex-1'},\n h('h3', {className:'font-bold text-[15px] text-on-surface truncate'}, agent.name),\n // Real run-state (contract #1): \"Running\" only when a run is actually in flight\n // (is_running, or this card's own manual run), else \"Active\" (enabled) / \"Idle\".\n (() => {\n const isRunning = running || !!agent.is_running;\n const dotClass = isRunning ? 'bg-tertiary pulse-dot' : (agent.enabled ? 'bg-secondary' : 'bg-text-muted');\n const txtClass = isRunning ? 'text-tertiary' : (agent.enabled ? 'text-secondary' : 'text-text-muted');\n const label = isRunning ? 'Running' : (agent.enabled ? 'Active' : 'Idle');\n return h('div', {className:'flex items-center gap-1.5 mt-0.5'},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + dotClass}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-wider ' + txtClass}, label)\n );\n })()\n )\n ),\n h('div', {className:'relative flex items-center gap-1'},\n h(Toggle, {value: !!agent.enabled, onChange: v => onToggle(agent.id, v ? 1 : 0)}),\n h('button', {\n onClick: () => onEdit(agent), title:'Edit',\n className:'p-1 rounded-md text-on-surface-variant hover:text-' + accent + ' transition-all'\n }, h(Icon, {name:'more_vert', size:18})),\n onDelete && h('button', {\n onClick: () => onDelete(agent.id), title:'Delete agent',\n className:'p-1 rounded-md text-on-surface-variant hover:text-error transition-all'\n }, h(Icon, {name:'delete', size:18}))\n )\n ),\n\n agent.description && h('p', {className:'text-[13px] text-on-surface-variant leading-relaxed line-clamp-2'},\n agent.description\n ),\n\n tools.length > 0 && h('div', {className:'flex flex-wrap gap-1.5'},\n tools.slice(0, 4).map(t => h('span', {\n key: t,\n className:'px-2 py-1 bg-surface-container-high rounded text-[10px] font-semibold uppercase tracking-wider text-on-surface-variant'\n }, t))\n ),\n\n // C3: recent-run timeline - colored dots (latest on the right) with status tooltip\n recent.length > 0 && h('div', {className:'flex items-center gap-1.5 text-[10px] text-text-muted'},\n h('span', {className:'uppercase tracking-widest'}, 'Recent'),\n h('div', {className:'flex gap-0.5'},\n recent.slice().reverse().map(r => h('span', {\n key: r.id,\n title: (r.status || 'unknown') + (r.duration_ms ? ' - ' + r.duration_ms + 'ms' : '') + (r.started_at ? ' - ' + r.started_at : ''),\n className: 'w-1.5 h-1.5 rounded-full ' +\n (r.status === 'completed' ? 'bg-secondary' :\n r.status === 'failed' ? 'bg-error' :\n r.status === 'running' ? 'bg-tertiary pulse-dot' : 'bg-text-muted')\n }))\n )\n ),\n\n footer\n );\n }\n\n\n // I3: Agent roles. Each role injects a specialized system-prompt prefix in api/chat.ts.\n const AGENT_ROLES = [\n { key:'general', label:'General', icon:'auto_awesome', desc:'No specialized prompt - uses your custom system prompt only.' },\n { key:'listener', label:'Listener', icon:'hearing', desc:'Monitors Gmail/Outlook/LinkedIn for buyer intent. Flags patterns weekly.' },\n { key:'topic', label:'Topic', icon:'lightbulb', desc:'Generates content ideas from pain signals. Outputs ICE-scored backlog.' },\n { key:'creator', label:'Creator', icon:'edit_note', desc:'Drafts blog/LinkedIn/email assets in your brand voice with data citations.' },\n { key:'analyst', label:'Analyst', icon:'analytics', desc:'Daily funnel analysis. Identifies bottleneck. Proposes top 3 ICE experiments.' },\n ];\n\n function AgentBuilderDrawer({agent, onSave, onClose}) {\n const [form, setForm] = useState({\n name: agent?.name || '',\n workspace: agent?.workspace || 'marketing',\n description: agent?.description || '',\n system_prompt: agent?.system_prompt || '',\n tools: parseTools(agent?.tools),\n role: agent?.role || 'general',\n model: agent?.model || 'claude-sonnet-4-6',\n // B2: monthly LLM-cost cap (USD). Default $250 matches db.ts agent_budgets default.\n monthly_cap: agent?.monthly_cap != null ? String(agent.monthly_cap) : '250',\n });\n const [showCustomIntegrations, setShowCustomIntegrations] = useState(false);\n const [autonomous, setAutonomous] = useState(!!agent?.enabled);\n const [saving, setSaving] = useState(false);\n const setField = (k, v) => setForm(f => ({...f, [k]: v}));\n const toggleTool = (t) => setField('tools', form.tools.includes(t) ? form.tools.filter(x => x !== t) : [...form.tools, t]);\n\n const handleSave = async () => {\n if (!form.name.trim()) return;\n setSaving(true);\n await onSave({...form, id: agent?.id, enabled: autonomous ? 1 : 0});\n setSaving(false);\n onClose();\n };\n\n return h(React.Fragment, null,\n h('div', {\n className:'fixed inset-0 bg-black/60 backdrop-blur-sm z-[55]',\n onClick: onClose\n }),\n h('div', {\n className:'fixed inset-y-0 right-0 w-full sm:w-[460px] glass-panel border-l border-border-subtle shadow-2xl z-[60] drawer-in'\n },\n h('div', {className:'h-full flex flex-col p-xl'},\n h('div', {className:'flex justify-between items-center mb-xl'},\n h('div', null,\n h('h2', {className:'text-[22px] font-extrabold text-on-surface tracking-tight'}, agent ? 'Edit Agent Node' : 'New Agent Node'),\n h('p', {className:'text-[13px] text-text-muted mt-0.5'}, agent ? 'Reconfigure protocol' : 'System initialization protocol')\n ),\n h('button', {\n onClick: onClose, type:'button',\n className:'w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-variant/30 transition-all'\n }, h(Icon, {name:'close', size:20}))\n ),\n\n h('div', {className:'flex-1 overflow-y-auto pr-2 -mr-2 space-y-xl'},\n\n h('section', null,\n h('div', {className:'flex items-center gap-3 mb-md'},\n h('span', {className:'w-7 h-7 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-[12px]'}, '1'),\n h('h4', {className:'text-[15px] font-bold text-on-surface'}, 'Core Identity')\n ),\n h('div', {className:'space-y-md'},\n h(Input, {label:'Agent Designation', value: form.name, onChange: v => setField('name', v), placeholder:'e.g. Lead Sourcing Alpha'}),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Workspace'),\n h('div', {className:'flex gap-2'},\n ['marketing','sales'].map(w => h('button', {\n key: w, onClick: () => setField('workspace', w), type:'button',\n className: 'flex-1 px-4 py-2.5 rounded-lg border text-[13px] font-medium capitalize transition-all ' +\n (form.workspace === w\n ? 'border-primary bg-primary/15 text-primary'\n : 'border-border-subtle bg-surface-container-lowest text-text-muted hover:border-outline/40')\n }, w))\n )\n ),\n h(Textarea, {label:'Strategic Directive', value: form.description, onChange: v => setField('description', v), placeholder:'Define the primary objective-', rows: 3}),\n // I3: Role selector - Listener/Topic/Creator/Analyst inject specialized\n // system-prompt prefixes server-side (see api/chat.ts AGENT_ROLE_PROMPTS).\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Agent Role'),\n h('div', {className:'grid grid-cols-5 gap-1.5'},\n AGENT_ROLES.map(r => h('button', {\n key: r.key, onClick: () => setField('role', r.key), type:'button',\n className: 'flex flex-col items-center gap-1 p-2 rounded-lg border text-[10px] font-bold uppercase tracking-wider transition-all ' +\n (form.role === r.key\n ? 'border-primary bg-primary/10 text-primary'\n : 'border-border-subtle bg-surface-container-lowest text-text-muted hover:border-outline/40')\n },\n h(Icon, {name: r.icon, size: 16}),\n h('span', null, r.label)\n ))\n ),\n h('p', {className:'text-[10px] text-text-muted leading-snug'},\n AGENT_ROLES.find(r => r.key === form.role)?.desc\n )\n ),\n h(Textarea, {label:'System Prompt', value: form.system_prompt, onChange: v => setField('system_prompt', v), placeholder:'You are a helpful marketing assistant-', rows: 5})\n )\n ),\n\n h('section', null,\n h('div', {className:'flex items-center gap-3 mb-md'},\n h('span', {className:'w-7 h-7 rounded-full bg-surface-container-highest text-on-surface flex items-center justify-center font-bold text-[12px]'}, '2'),\n h('h4', {className:'text-[15px] font-bold text-on-surface'}, 'Capabilities')\n ),\n h('button', {\n onClick: () => setShowCustomIntegrations(s => !s), type:'button',\n className:'w-full py-2 border border-dashed border-border-subtle rounded-lg text-[11px] font-semibold uppercase tracking-widest text-text-muted hover:text-on-surface hover:border-primary/40 transition-all'\n }, showCustomIntegrations ? '- HIDE INTEGRATION TOOLS' : '+ ADD CUSTOM INTEGRATION'),\n showCustomIntegrations && h('div', {className:'mt-md grid grid-cols-2 gap-2'},\n ALL_TOOLS.map(t => {\n const on = form.tools.includes(t);\n const meta = INTEGRATION_META[t];\n return h('button', {\n key: t, onClick: () => toggleTool(t), type:'button',\n className:'px-2.5 py-2 border rounded-lg flex items-center gap-2 cursor-pointer transition-all ' +\n (on ? 'border-secondary bg-secondary/10' : 'border-border-subtle hover:bg-secondary/5')\n },\n h(BrandIcon, {slug: meta?.icon || t, color: meta?.color || '#4edea3', size: 12, bare: true}),\n h('span', {className:'text-[11px] flex-1 text-left text-on-surface-variant capitalize'}, t),\n on && h(Icon, {name:'check', size:14, className:'text-secondary'})\n );\n })\n )\n ),\n\n h('section', null,\n h('div', {className:'flex items-center gap-3 mb-md'},\n h('span', {className:'w-7 h-7 rounded-full bg-surface-container-highest text-on-surface flex items-center justify-center font-bold text-[12px]'}, '3'),\n h('h4', {className:'text-[15px] font-bold text-on-surface'}, 'Governor Settings')\n ),\n h('div', {className:'space-y-2.5'},\n h('div', {className:'flex justify-between items-center bg-surface-container/40 p-3.5 rounded-lg'},\n h('div', null,\n h('span', {className:'text-[13px] font-medium text-on-surface'}, 'Autonomous Mode'),\n h('div', {className:'text-[10px] text-text-muted mt-0.5'}, 'Run on schedule without user prompts')\n ),\n h(Toggle, {value: autonomous, onChange: setAutonomous})\n ),\n // B2: real Budget Cap input - persisted to agent_budgets, enforced server-side later.\n h('div', {className:'bg-surface-container/40 p-3.5 rounded-lg space-y-2'},\n h('div', {className:'flex justify-between items-center'},\n h('div', null,\n h('span', {className:'text-[13px] font-medium text-on-surface'}, 'Budget Cap (Monthly)'),\n h('div', {className:'text-[10px] text-text-muted mt-0.5'},\n 'USD ceiling for LLM spend (tracked; enforcement coming)',\n agent?.current_spend != null\n ? ' - $' + Number(agent.current_spend).toFixed(2) + ' used'\n : ''\n )\n ),\n h('div', {className:'flex items-center gap-1'},\n h('span', {className:'text-[13px] text-text-muted font-mono-data'}, '$'),\n h('input', {\n type:'number', min:0, step:10,\n value: form.monthly_cap,\n onChange: e => setField('monthly_cap', e.target.value.replace(/[^0-9.]/g,'')),\n className:'w-24 bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[13px] font-mono-data text-right text-on-surface focus:border-primary focus:outline-none',\n })\n )\n ),\n agent?.current_spend != null && agent?.monthly_cap > 0 && (() => {\n const pct = Math.min(100, (Number(agent.current_spend) / Number(agent.monthly_cap)) * 100);\n const bar = pct >= 100 ? 'bg-error' : pct >= 80 ? 'bg-tertiary' : 'bg-secondary';\n return h('div', {className:'h-1 w-full bg-surface-container rounded-full overflow-hidden'},\n h('div', {className:'h-full ' + bar, style:{width: pct + '%'}})\n );\n })()\n ),\n h(Input, {label:'Model', value: form.model, onChange: v => setField('model', v), placeholder:'claude-sonnet-4-6'})\n )\n )\n ),\n\n h('div', {className:'mt-auto pt-lg border-t border-border-subtle grid grid-cols-2 gap-3'},\n h(Btn, {onClick: onClose, variant:'ghost', size:'md'}, 'Cancel'),\n h(Btn, {onClick: handleSave, variant:'secondary', size:'md', disabled: !form.name.trim() || saving},\n saving ? h(Spinner, {size:14}) : h(Icon, {name: agent?'save':'rocket_launch', size:15}),\n saving ? 'Saving-' : (agent ? 'Update Node' : 'Deploy Node')\n )\n )\n )\n )\n );\n }\n\n\n function AgentStudio({agents, setAgents, setChatOpen, setChatMessages, setConvId, showToast}) {\n const [showBuilder, setShowBuilder] = useState(false);\n const [editingAgent, setEditingAgent] = useState(null);\n // Hierarchy data: campaigns (each carries its member agents + objective_id) + objectives, so\n // the studio groups agents by Objective -> Campaign instead of a flat fleet. Live on nexus:tick.\n const [campaigns, setCampaigns] = useState([]);\n const [objectives, setObjectives] = useState([]);\n // History Log: REAL cross-agent run feed (contract #2), newest first. Auto-refreshes\n // on nexus:tick + every 20s so the \"Live\" badge is honest. No seed/fabricated rows.\n const [activity, setActivity] = useState([]);\n useEffect(() => {\n let alive = true;\n const load = () => {\n fetch('/api/campaigns').then(r => r.json()).then(d => { if (alive && Array.isArray(d)) setCampaigns(d); }).catch(() => {});\n fetch('/api/okrs').then(r => r.json()).then(d => { if (alive && Array.isArray(d)) setObjectives(d); }).catch(() => {});\n fetch('/api/agents/activity?limit=20').then(r => r.json()).then(d => { if (alive && d && Array.isArray(d.activity)) setActivity(d.activity); }).catch(() => {});\n };\n load();\n const onTick = () => load();\n window.addEventListener('nexus:tick', onTick);\n const iv = setInterval(load, 20000);\n return () => { alive = false; clearInterval(iv); window.removeEventListener('nexus:tick', onTick); };\n }, [agents.length]);\n\n const handleSaveAgent = async (form) => {\n try {\n const isEdit = !!form.id;\n const url = isEdit ? \\`/api/agents/\\${form.id}\\` : '/api/agents';\n const method = isEdit ? 'PUT' : 'POST';\n const payload = {\n name: form.name, workspace: form.workspace, description: form.description,\n system_prompt: form.system_prompt, tools: form.tools, model: form.model,\n ...(form.enabled !== undefined ? {enabled: form.enabled} : {}),\n // B2: pass budget cap through to /api/agents (handler writes to agent_budgets).\n ...(form.monthly_cap !== undefined && form.monthly_cap !== ''\n ? {monthly_cap: parseFloat(form.monthly_cap) || 0}\n : {}),\n // I3: agent role (Listener/Topic/Creator/Analyst/General)\n ...(form.role ? {role: form.role} : {}),\n };\n const res = await fetch(url, { method, headers:{'Content-Type':'application/json'}, body: JSON.stringify(payload) });\n if (!res.ok) throw new Error('Failed to save agent');\n const saved = await res.json();\n setAgents(prev => isEdit ? prev.map(a => a.id === saved.id ? saved : a) : [...prev, saved]);\n showToast(isEdit ? 'Agent updated' : 'Agent deployed', 'success');\n } catch (e) { showToast('Failed to save agent: ' + e.message, 'error'); }\n };\n\n const handleToggle = async (id, enabled) => {\n try {\n const res = await fetch(\\`/api/agents/\\${id}\\`, { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({enabled}) });\n if (!res.ok) throw new Error();\n setAgents(prev => prev.map(a => a.id === id ? {...a, enabled} : a));\n } catch { showToast('Failed to update agent', 'error'); }\n };\n\n const handleDelete = async (id) => {\n if (!confirm('Delete this agent node?')) return;\n try {\n const res = await fetch(\\`/api/agents/\\${id}\\`, {method:'DELETE'});\n if (!res.ok) throw new Error();\n setAgents(prev => prev.filter(a => a.id !== id));\n showToast('Agent deleted', 'info');\n } catch { showToast('Failed to delete agent', 'error'); }\n };\n\n const handleRun = async (agent) => {\n const msg = (\\`Execute your primary task now. \\${agent.description || ''}\\`).trim();\n const userMsg = {role:'user', content: \\`[\\${agent.name}] \\${msg}\\`, id: Date.now()};\n setChatMessages(prev => [...prev, userMsg]);\n setChatOpen(true);\n try {\n const res = await fetch('/api/chat', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({message: msg, agent_id: agent.id, workspace: agent.workspace})\n });\n const data = await res.json();\n if (!res.ok) throw new Error(data?.error?.message || data?.error || \\`HTTP \\${res.status}\\`);\n // Share the run's conversation with the chat panel so follow-up messages keep context.\n if (data.conversation_id && setConvId) setConvId(data.conversation_id);\n setChatMessages(prev => [...prev, {role:'assistant', content: data.response, trace: data.trace, id: Date.now()+1}]);\n showToast(\\`Agent \"\\${agent.name}\" completed\\`, 'success');\n } catch (e) {\n setChatMessages(prev => [...prev, {role:'assistant', content: \\`Error: \\${e.message}\\`, id: Date.now()+1, error: true}]);\n showToast(\\`Agent \"\\${agent.name}\" failed\\`, 'error');\n }\n };\n\n // History Log rows come straight from REAL agent_runs (the activity state above).\n // Map each run to a display row: agent name, workspace tone, timestamp, status + output.\n const fmtRunTime = (iso) => {\n if (!iso) return '-';\n const d = new Date(iso);\n if (isNaN(d.getTime())) return '-';\n return d.toLocaleTimeString('en-US', {hour12:false, hour:'2-digit', minute:'2-digit', second:'2-digit'});\n };\n const historyLog = activity.map(r => ({\n id: r.id,\n name: r.name || 'Agent',\n workspace: r.workspace || 'marketing',\n status: r.status || 'unknown',\n time: fmtRunTime(r.finished_at || r.started_at),\n msg: (r.output && String(r.output).trim()) ? String(r.output).slice(0, 240) : ('Run ' + (r.status || 'recorded'))\n }));\n\n // Group agents by Objective -> Campaign -> agents (+ Unassigned). campaign.agents carries the\n // member links (agent_id / agent), campaign.objective_id -> the parent OKR.\n const objById = {}; objectives.forEach(o => { objById[String(o.id)] = o; });\n const agentCampaign = {};\n campaigns.forEach(c => { (c.agents || []).forEach(m => {\n const aid = String(m && (m.agent_id != null ? m.agent_id : (m.agent && m.agent.id)));\n if (aid && aid !== 'undefined' && aid !== 'null') agentCampaign[aid] = c;\n }); });\n const groupsMap = {}; const unassigned = [];\n agents.forEach(a => {\n const c = agentCampaign[String(a.id)];\n if (c) {\n const cid = String(c.id);\n if (!groupsMap[cid]) groupsMap[cid] = { campaign: c, objective: (c.objective_id != null ? objById[String(c.objective_id)] : null), agents: [] };\n groupsMap[cid].agents.push(a);\n } else unassigned.push(a);\n });\n const campaignGroups = Object.keys(groupsMap).map(k => groupsMap[k]);\n const mkCard = (agent) => h(AgentCard, { key: agent.id, agent, onToggle: handleToggle, onEdit: (a) => { setEditingAgent(a); setShowBuilder(true); }, onDelete: handleDelete, onRun: handleRun });\n const newNodeCard = h('div', {\n key: 'new-node',\n onClick: () => { setEditingAgent(null); setShowBuilder(true); },\n className:'border-2 border-dashed border-border-subtle p-6 rounded-xl flex flex-col items-center justify-center text-center group hover:border-primary/50 transition-all cursor-pointer min-h-[200px]'\n },\n h('div', {className:'w-12 h-12 rounded-full bg-surface-container flex items-center justify-center mb-3 group-hover:bg-primary/10 group-hover:text-primary text-on-surface-variant transition-all'}, h(Icon, {name:'add', size:24})),\n h('p', {className:'text-[15px] font-bold text-on-surface-variant group-hover:text-on-surface transition-colors'}, 'Initialize New Node'),\n h('p', {className:'text-[12px] text-text-muted mt-1'}, 'Expand your autonomous ecosystem')\n );\n const groupHead = (icon, title, sub, count, color) => h('div', {className:'flex items-center gap-2 mb-3'},\n h(Icon, {name: icon, size: 15, className: color || 'text-primary'}),\n h('span', {className:'font-bold text-[12px] uppercase tracking-wider text-on-surface'}, title),\n sub ? h('span', {className:'text-[11px] text-text-muted truncate max-w-[220px]'}, '\\\\u00b7 ' + sub) : null,\n h('span', {className:'ml-auto text-[10px] font-semibold text-text-muted bg-surface-container px-2 py-0.5 rounded'}, count + (count === 1 ? ' agent' : ' agents'))\n );\n\n return h('div', {className:'p-lg lg:p-xl max-w-7xl mx-auto'},\n h(PageHeader, {\n title:'Agent Studio',\n subtitle:'Orchestrate your autonomous fleet. Configure multi-modal agents with specialized toolsets and real-time execution monitoring.',\n action: h(Btn, {\n onClick: () => { setEditingAgent(null); setShowBuilder(true); },\n variant:'primary', size:'lg'\n }, h(Icon,{name:'rocket_launch', size:18}), 'Create New Agent')\n }),\n\n h('div', {className:'grid grid-cols-1 xl:grid-cols-12 gap-lg'},\n\n // Agents grouped by the hierarchy: each campaign (with its parent objective) -> its agents,\n // then an Unassigned group for standalone agents (+ the Create card).\n h('div', {className:'xl:col-span-8 flex flex-col gap-lg'},\n campaignGroups.map(g => h('div', {key: g.campaign.id, className:'glass-panel rounded-xl p-md'},\n groupHead('campaign', g.campaign.name, (g.objective ? g.objective.title : (g.campaign.goal || '')), g.agents.length, 'text-primary'),\n h('div', {className:'grid grid-cols-1 lg:grid-cols-2 gap-md auto-rows-min'}, g.agents.map(mkCard))\n )),\n h('div', {key:'unassigned', className: campaignGroups.length ? 'glass-panel rounded-xl p-md' : ''},\n campaignGroups.length ? groupHead('person', 'Unassigned', 'standalone agents (not in a campaign)', unassigned.length, 'text-on-surface-variant') : null,\n h('div', {className:'grid grid-cols-1 lg:grid-cols-2 gap-md auto-rows-min'},\n unassigned.map(mkCard).concat([newNodeCard])\n )\n )\n ),\n\n h('div', {className:'xl:col-span-4'},\n h('div', {className:'glass-panel h-full rounded-xl flex flex-col overflow-hidden min-h-[400px]'},\n h('div', {className:'p-md border-b border-border-subtle bg-surface-container/30 flex justify-between items-center'},\n h('h3', {className:'text-[15px] font-bold text-on-surface'}, 'History Log'),\n h('span', {className:'text-[10px] font-semibold uppercase tracking-wider bg-secondary/10 text-secondary px-2 py-0.5 rounded'}, 'Live')\n ),\n h('div', {className:'flex-1 overflow-y-auto p-md space-y-md'},\n historyLog.length === 0\n ? h('div', {className:'text-center text-text-muted text-[13px] py-8'},\n h(Icon, {name:'history', size:32, className:'opacity-30 mb-2 block mx-auto'}),\n 'No agent activity yet'\n )\n : historyLog.map((entry) => {\n const tone = entry.workspace === 'marketing' ? 'primary' : 'secondary';\n const statusColor = entry.status === 'completed' ? 'text-secondary'\n : entry.status === 'failed' ? 'text-error'\n : entry.status === 'running' ? 'text-tertiary'\n : 'text-text-muted';\n return h('div', {key: entry.id, className:'relative pl-3 border-l ' + (tone==='primary'?'border-primary/30':'border-secondary/30')},\n h('div', {className:'absolute -left-[5px] top-0 w-2 h-2 rounded-full ' + (tone==='primary'?'bg-primary':'bg-secondary')}),\n h('div', {className:'flex justify-between mb-1 gap-2'},\n h('span', {className:'text-[10px] font-semibold uppercase tracking-wider truncate ' + (tone==='primary'?'text-primary':'text-secondary')}, entry.name),\n h('div', {className:'flex items-center gap-1.5 flex-shrink-0'},\n h('span', {className:'text-[9px] font-bold uppercase tracking-wider ' + statusColor}, entry.status),\n h('span', {className:'text-[10px] font-mono-data text-text-muted'}, entry.time)\n )\n ),\n h('div', {className:'bg-surface-container-low p-2.5 rounded-lg'},\n h('p', {className:'text-[12px] font-mono-data text-on-surface-variant leading-relaxed whitespace-pre-wrap break-words'}, entry.msg)\n )\n );\n })\n )\n )\n )\n ),\n\n showBuilder && h(AgentBuilderDrawer, {\n agent: editingAgent, onSave: handleSaveAgent,\n onClose: () => { setShowBuilder(false); setEditingAgent(null); }\n })\n );\n }\n\n\n // Part 14.2: collapsible reasoning trace under an assistant message. Renders the\n // /api/chat response trace array (tool calls, agent actions, messages, rounds).\n function TraceDisclosure({trace}) {\n const [open, setOpen] = useState(false);\n if (!Array.isArray(trace) || trace.length === 0) return null;\n\n const iconForStep = (t) => {\n if (t === 'tool') return 'build';\n if (t === 'action') return 'smart_toy';\n if (t === 'message') return 'chat_bubble';\n if (t === 'round') return 'radio_button_checked';\n return 'info';\n };\n\n const fmtTime = (ts) => {\n if (!ts) return '';\n const d = new Date(ts);\n if (isNaN(d.getTime())) return '';\n return d.toLocaleTimeString('en-US', {hour12:false, hour:'2-digit', minute:'2-digit', second:'2-digit'});\n };\n\n return h('div', {className:'mt-1.5 max-w-[85%]'},\n h('button', {\n onClick: () => setOpen(o => !o), type:'button',\n className:'flex items-center gap-1 text-[10px] font-mono-data uppercase tracking-wider text-text-muted hover:text-on-surface-variant transition-colors'\n },\n h(Icon, {name: open ? 'expand_less' : 'expand_more', size: 14}),\n h('span', null, 'Trace (' + trace.length + ' steps)')\n ),\n open && h('div', {className:'mt-1 space-y-1 rounded-lg border border-border-subtle bg-surface-container p-2'},\n trace.map((step, i) => {\n const label = (step.t || 'step') + (step.role ? ' - ' + step.role : '') + (step.name ? ' - ' + step.name : '');\n const preview = step.preview || step.result_preview || step.args_preview || '';\n const time = fmtTime(step.ts);\n return h('div', {key: i, className:'flex gap-2'},\n h(Icon, {name: iconForStep(step.t), size: 13, className:'text-text-muted flex-shrink-0 mt-0.5'}),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'flex items-center gap-2'},\n h('span', {className:'text-[10px] font-mono-data font-semibold text-on-surface-variant truncate'}, label),\n time && h('span', {className:'text-[10px] font-mono-data text-text-muted ml-auto flex-shrink-0'}, time)\n ),\n preview && h('div', {className:'text-[10px] font-mono-data text-text-muted leading-snug line-clamp-2 break-words'}, preview)\n )\n );\n })\n )\n );\n }\n\n\n function AIChatPanel({open, onClose, messages, setMessages, currentWorkspace, setCurrentWorkspace, convId, setConvId}) {\n const [input, setInput] = useState('');\n const [loading, setLoading] = useState(false);\n // Phase 1 Advanced: dynamic quick actions + funnel context toggle\n const [dynamicActions, setDynamicActions] = useState([]);\n const [funnelOpen, setFunnelOpen] = useState(false);\n const [funnelSummary, setFunnelSummary] = useState(null);\n // convId/setConvId now provided by App (shared with agent runs so chat context persists across turns).\n const [historyOpen, setHistoryOpen] = useState(false);\n const [history, setHistory] = useState([]);\n\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n // Pull recommended questions + funnel summary while the panel is open.\n useEffect(() => {\n if (!open) return;\n let cancelled = false;\n (async () => {\n try {\n const [recs, summary] = await Promise.all([\n fetch('/api/intelligence/recommendations').then(r => r.json()).catch(() => []),\n fetch('/api/intelligence/funnel-summary').then(r => r.json()).catch(() => null),\n ]);\n if (cancelled) return;\n if (Array.isArray(recs)) setDynamicActions(recs.slice(0, 4).map(r => r.action || r.title));\n if (summary) setFunnelSummary(summary);\n } catch {}\n })();\n return () => { cancelled = true; };\n }, [open]);\n\n useEffect(() => {\n if (open) {\n setTimeout(() => messagesEndRef.current?.scrollIntoView({behavior:'smooth'}), 50);\n inputRef.current?.focus();\n }\n }, [messages, open]);\n\n if (!open) return null;\n\n // Mix dynamic recommendations (from /api/intelligence/recommendations) with fallback defaults.\n const quickActions = dynamicActions.length > 0\n ? dynamicActions\n : ['What\\\\'s blocking conversion?', 'Show the SEO - traffic chain', 'Why did MOFU drop?', 'Top 3 actions this week'];\n\n const loadHistory = () => fetch('/api/conversations').then(r => r.json()).then(d => Array.isArray(d) && setHistory(d)).catch(() => {});\n\n const newChat = () => { setConvId(null); setMessages([]); setHistoryOpen(false); };\n\n const loadConversation = async (id) => {\n try {\n const r = await fetch('/api/conversations/' + id);\n const d = await r.json();\n if (d && Array.isArray(d.messages)) {\n setConvId(id);\n setMessages(d.messages.map((m, i) => ({...m, id: i})));\n setHistoryOpen(false);\n }\n } catch {}\n };\n\n const deleteConv = async (id, e) => {\n e.stopPropagation();\n await fetch('/api/conversations/' + id, {method:'DELETE'}).catch(() => {});\n loadHistory();\n if (convId === id) { setConvId(null); setMessages([]); }\n };\n\n const sendMessage = async (text) => {\n const msg = text || input.trim();\n if (!msg || loading) return;\n setInput('');\n const userMsg = {role:'user', content: msg, id: Date.now()};\n setMessages(prev => [...prev, userMsg]);\n setLoading(true);\n // The streaming endpoint has NO tools — force non-streaming so the AI actually executes\n // tools (prepare_* → Approvals) and keeps funnel context + memory. (Was defaulting to stream.)\n const useStream = false;\n try {\n if (useStream) {\n const aiBubbleId = Date.now() + 1;\n setMessages(prev => [...prev, {role:'assistant', content: '', id: aiBubbleId, streaming: true}]);\n const res = await fetch('/api/chat/stream', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({message: msg, workspace: currentWorkspace, conversation_id: convId || undefined})\n });\n if (!res.ok || !res.body) throw new Error(\\`HTTP \\${res.status}\\`);\n const reader = res.body.getReader();\n const decoder = new TextDecoder();\n let buf = '';\n let finalConvId = convId;\n while (true) {\n const {done, value} = await reader.read();\n if (done) break;\n buf += decoder.decode(value, {stream: true});\n const parts = buf.split('\\\\n\\\\n');\n buf = parts.pop() || '';\n for (const part of parts) {\n if (!part.startsWith('data:')) continue;\n try {\n const ev = JSON.parse(part.slice(5).trim());\n if (ev.done) {\n finalConvId = ev.conversation_id || finalConvId;\n setMessages(prev => prev.map(m => m.id === aiBubbleId ? {...m, content: ev.response || m.content, streaming: false} : m));\n } else if (ev.delta) {\n setMessages(prev => prev.map(m => m.id === aiBubbleId ? {...m, content: m.content + ev.delta} : m));\n }\n } catch {}\n }\n }\n if (finalConvId) setConvId(finalConvId);\n } else {\n const res = await fetch('/api/chat', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({message: msg, workspace: currentWorkspace, conversation_id: convId || undefined})\n });\n if (!res.ok) throw new Error(\\`HTTP \\${res.status}\\`);\n const data = await res.json();\n if (data.conversation_id) setConvId(data.conversation_id);\n setMessages(prev => [...prev, {role:'assistant', content: data.response || data.message || 'Done!', trace: data.trace, id: Date.now()+1}]);\n }\n } catch (e) {\n setMessages(prev => [...prev.filter(m => !m.streaming), {role:'assistant', content: \\`Error: \\${e.message}\\`, id: Date.now()+2, error: true}]);\n } finally { setLoading(false); }\n };\n\n return h('div', {\n className:'chat-in fixed bottom-12 right-5 w-[380px] h-[540px] z-[500] glass-panel rounded-2xl flex flex-col shadow-2xl overflow-hidden'\n },\n h('div', {className:'p-4 border-b border-border-subtle flex items-center justify-between flex-shrink-0'},\n h('div', {className:'flex items-center gap-2'},\n h('div', {className:'w-2 h-2 rounded-full bg-secondary pulse-dot'}),\n h('span', {className:'font-bold text-[14px] text-on-surface'}, 'AI Assistant'),\n h('button', {\n onClick: () => { setHistoryOpen(o => !o); if (!historyOpen) loadHistory(); },\n title:'Conversation history',\n className:'ml-1 p-1 rounded text-text-muted hover:text-primary transition-colors'\n }, h(Icon, {name:'history', size:15})),\n h('button', {\n onClick: newChat, title:'New chat',\n className:'p-1 rounded text-text-muted hover:text-secondary transition-colors'\n }, h(Icon, {name:'add', size:15}))\n ),\n h('div', {className:'flex items-center gap-2'},\n h('div', {className:'flex bg-surface-container-lowest rounded-lg p-0.5 border border-border-subtle'},\n ['marketing','sales'].map(w => h('button', {\n key: w, onClick: () => setCurrentWorkspace(w),\n className: 'px-2.5 py-0.5 rounded-md text-[11px] font-bold uppercase tracking-wider transition-all ' +\n (currentWorkspace === w ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface-variant')\n }, w))\n ),\n h('button', {\n onClick: onClose,\n className:'bg-surface-variant/40 hover:bg-surface-variant/60 border-none rounded-md p-1.5 cursor-pointer text-on-surface-variant transition-all'\n }, h(Icon, {name:'close', size:16}))\n )\n ),\n\n // History panel (replaces messages list when open)\n historyOpen && h('div', {className:'flex-1 overflow-y-auto p-3 flex flex-col gap-1.5'},\n history.length === 0\n ? h('div', {className:'text-center py-8 text-text-muted text-[13px]'}, 'No conversations yet')\n : history.map(c => h('div', {\n key: c.id,\n onClick: () => loadConversation(c.id),\n className:'flex items-center justify-between gap-2 p-2.5 rounded-lg bg-surface-container border border-border-subtle hover:border-primary/40 cursor-pointer transition-all group'\n },\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, c.title),\n h('div', {className:'text-[10px] text-text-muted mt-0.5'}, new Date(c.updated_at).toLocaleString())\n ),\n h('button', {\n onClick: (e) => deleteConv(c.id, e),\n className:'flex-shrink-0 opacity-0 group-hover:opacity-100 p-1 rounded text-error hover:bg-error/10 transition-all'\n }, h(Icon, {name:'close', size:13}))\n ))\n ),\n\n !historyOpen && h('div', {className:'flex-1 overflow-y-auto p-4 flex flex-col gap-3'},\n messages.length === 0 && h('div', {className:'text-center py-8 text-text-muted'},\n h(Icon, {name:'smart_toy', size:36, className:'text-primary/60 block mx-auto mb-3'}),\n h('div', {className:'text-[14px] font-semibold text-on-surface-variant mb-1'}, 'Nexus Assistant'),\n h('div', {className:'text-[12px] leading-relaxed'}, 'Ask about your marketing, sales, or to help create agents.')\n ),\n messages.map(msg => {\n const isUser = msg.role === 'user';\n const isError = msg.error;\n const isStreaming = msg.streaming;\n const marked = (window.__nexus || {}).marked || ((s) => s);\n const bubbleClass = 'max-w-[85%] px-3.5 py-2.5 text-[13px] leading-relaxed break-words ' +\n (isUser\n ? 'bg-primary text-on-primary rounded-2xl rounded-br-sm whitespace-pre-wrap'\n : isError\n ? 'bg-error/10 border border-error/30 text-error rounded-2xl rounded-bl-sm whitespace-pre-wrap'\n : 'md-body bg-surface-container border border-border-subtle text-on-surface rounded-2xl rounded-bl-sm' + (isStreaming ? ' typing' : ''));\n return h('div', {key: msg.id, className:'flex flex-col ' + (isUser ? 'items-end' : 'items-start')},\n isUser || isError\n ? h('div', {className: bubbleClass}, msg.content)\n : h('div', {className: bubbleClass, dangerouslySetInnerHTML: {__html: marked(String(msg.content || ''))}}),\n // Part 14.2: reasoning trace under assistant messages (when present).\n !isUser && !isError && Array.isArray(msg.trace) && msg.trace.length > 0 &&\n h(TraceDisclosure, {trace: msg.trace})\n );\n }),\n loading && !messages.some(m => m.streaming) && h('div', {className:'flex justify-start'},\n h('div', {className:'px-4 py-3 bg-surface-container border border-border-subtle rounded-2xl rounded-bl-sm flex gap-1 items-center'},\n h('span', {className:'typing-dot'}),\n h('span', {className:'typing-dot'}),\n h('span', {className:'typing-dot'})\n )\n ),\n h('div', {ref: messagesEndRef})\n ),\n\n // Funnel context toggle: collapsed summary of TOFU/MOFU/BOFU health above the input.\n !historyOpen && funnelSummary && h('div', {className:'px-3 pt-2 border-t border-border-subtle/40 flex-shrink-0'},\n h('button', {\n onClick: () => setFunnelOpen(o => !o),\n className:'w-full flex items-center justify-between text-[10px] font-bold uppercase tracking-widest text-text-muted hover:text-on-surface transition-colors py-1'\n },\n h('span', null, 'Funnel Context - ' + funnelSummary.total_metrics_observed + ' metrics live'),\n h(Icon, {name: funnelOpen ? 'expand_less' : 'expand_more', size: 16})\n ),\n funnelOpen && h('div', {className:'pb-2 grid grid-cols-3 gap-1 text-[10px]'},\n funnelSummary.stages.map(s => h('div', {\n key: s.stage,\n className:'flex items-center gap-1.5 p-1.5 rounded bg-surface-container-lowest border border-border-subtle'\n },\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + (s.health_score > 75 ? 'bg-secondary' : s.health_score >= 50 ? 'bg-tertiary' : 'bg-error')}),\n h('span', {className:'font-mono-data text-text-muted'}, s.stage),\n h('span', {className:'font-bold text-on-surface ml-auto', style:{fontVariantNumeric:'tabular-nums'}}, s.health_score + '%')\n ))\n )\n ),\n !historyOpen && h('div', {className:'px-3 pt-2 pb-1 flex gap-1.5 flex-wrap border-t border-border-subtle flex-shrink-0'},\n quickActions.map(qa => h('button', {\n key: qa, onClick: () => sendMessage(qa),\n className:'text-[11px] px-2.5 py-1 rounded-full bg-surface-container-lowest border border-border-subtle text-text-muted hover:border-primary/40 hover:text-primary cursor-pointer transition-all whitespace-nowrap font-medium'\n }, qa))\n ),\n\n !historyOpen && h('div', {className:'p-3 border-t border-border-subtle/40 flex-shrink-0'},\n h('div', {className:'flex gap-2 bg-surface-container-lowest rounded-xl border border-border-subtle px-3 py-2 items-end neon-stroke transition-all'},\n h('textarea', {\n ref: inputRef, value: input,\n onChange: e => setInput(e.target.value),\n onKeyDown: e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } },\n placeholder:'Ask the AI assistant-', rows: 1,\n className:'flex-1 bg-transparent border-none text-on-surface text-[13px] resize-none outline-none leading-relaxed max-h-24 overflow-y-auto placeholder:text-text-muted',\n style:{fontFamily:'inherit'}\n }),\n h('button', {\n onClick: () => sendMessage(), disabled: !input.trim() || loading,\n className:'w-9 h-9 rounded-lg cursor-pointer flex items-center justify-center flex-shrink-0 transition-all ' +\n (input.trim() && !loading ? 'bg-primary text-on-primary hover:opacity-90' : 'bg-surface-variant text-text-muted cursor-not-allowed')\n }, loading ? h(Spinner, {size:14, color:'#fff'}) : h(Icon, {name:'send', size:16}))\n )\n )\n );\n }\n\n\n // Valid deep-linkable view ids (must match the renderPage() switch cases). Used to map\n // location.pathname -> initial active page so each nav tab opens at its own URL (/campaigns, /agents, ...).\n const NEXUS_VIEW_IDS = ['dashboard','analytics','marketing','sales','workspace','objectives','calendar','experiments','campaigns','tasks','knowledge','approvals','agents','settings','playbooks','platform'];\n function pathnameToViewId() {\n try {\n const seg = (window.location.pathname || '/').replace(/^\\\\/+|\\\\/+$/g, '').split('/')[0];\n if (!seg) return 'dashboard';\n return NEXUS_VIEW_IDS.indexOf(seg) !== -1 ? seg : 'dashboard';\n } catch (e) { return 'dashboard'; }\n }\n\n // Phase D: fixed, obvious top banner shown only while the master is read-only \"viewing as\"\n // a tenant. Distinct warning color (tertiary), always above the app shell. The Exit button\n // POSTs /api/platform/impersonate/exit (always allowed during impersonation) then reloads so\n // AuthGate re-resolves /api/auth/me and the banner disappears.\n function ImpersonationBanner({tenant}) {\n const [exiting, setExiting] = useState(false);\n const exit = async () => {\n if (exiting) return;\n setExiting(true);\n try {\n await fetch('/api/platform/impersonate/exit', {method:'POST'});\n } catch (e) {}\n window.location.reload();\n };\n const name = (tenant && tenant.name) || (tenant && tenant.id) || 'tenant';\n return h('div', {\n className:'flex items-center justify-center gap-3 px-4 py-2 bg-tertiary text-on-tertiary text-[13px] font-bold tracking-wide shadow-lg flex-shrink-0 border-b border-tertiary/60',\n style:{zIndex:600}\n },\n h('span', null, '\\\\uD83D\\\\uDC41 Viewing as ' + name + ' \\\\u2014 READ ONLY'),\n h('button', {\n onClick: exit, disabled: exiting, type:'button',\n className:'ml-2 px-3 py-1 rounded-md bg-black/25 hover:bg-black/40 text-on-tertiary text-[11px] font-bold uppercase tracking-widest flex items-center gap-1.5 transition-all disabled:opacity-60'\n },\n exiting ? h(Spinner, {size:12, color:'#fff'}) : h(Icon, {name:'logout', size:14}),\n exiting ? 'Exiting-' : 'Exit'\n )\n );\n }\n\n function App() {\n // Deep-link: start on the view named by the URL path (e.g. /campaigns -> Campaigns), default dashboard for \"/\".\n const [activePage, setActivePage] = useState(pathnameToViewId);\n const [integrations, setIntegrations] = useState([]);\n const [agents, setAgents] = useState([]);\n const [llmConfig, setLlmConfig] = useState(null);\n const [chatOpen, setChatOpen] = useState(false);\n const [chatMessages, setChatMessages] = useState([]);\n const [convId, setConvId] = useState(null); // shared chat conversation id (agent runs + chat panel share it, so context persists)\n const [currentWorkspace, setCurrentWorkspace] = useState('marketing');\n const [loading, setLoading] = useState(true);\n // Master flag from /api/auth/me (resolved by AuthGate, stashed on window.__nexus). Gates the\n // platform-console render below; the nav entry/account menu read the same window.__nexus value.\n const isPlatformAdmin = !!((window.__nexus || {}).isPlatformAdmin);\n // Phase D read-only impersonation: when the master is \"viewing as\" a tenant, /api/auth/me\n // reports impersonating + impersonatedTenant (stashed on window.__nexus by AuthGate). We\n // surface a fixed warning banner above the whole app while this is true.\n const impersonating = !!((window.__nexus || {}).impersonating);\n const impersonatedTenant = (window.__nexus || {}).impersonatedTenant || null;\n const { toasts, show: showToast } = useToast();\n\n // One-page app WITH real URLs: keep the address bar in sync with the active view (pushState on\n // change) and respond to browser back/forward (popstate) by switching the view. Navigation is\n // in-place (no new tab); only the World opens its own /world tab, so it is never in this history.\n useEffect(() => {\n try {\n const want = '/' + activePage;\n if (window.location.pathname !== want) window.history.pushState({ view: activePage }, '', want);\n } catch (e) {}\n }, [activePage]);\n useEffect(() => {\n const onPop = () => { try { setActivePage(pathnameToViewId()); } catch (e) {} };\n window.addEventListener('popstate', onPop);\n return () => window.removeEventListener('popstate', onPop);\n }, []);\n\n // B1 + B4: apply persisted Workspace Preferences and auto-sync interval at boot.\n useEffect(() => {\n const apply = (prefs) => {\n if (!prefs || typeof prefs !== 'object') return;\n const b = document.body;\n b.classList.toggle('no-translucency', !prefs.translucency);\n b.classList.toggle('ultra-density', !!prefs.ultraDensity);\n b.classList.toggle('mono-numbers', !!prefs.mono);\n b.classList.toggle('no-hardware-accel', !prefs.hardwareAccel);\n };\n window.__nexus = window.__nexus || {};\n window.__nexus.applyWorkspacePrefs = apply;\n window.__nexus.setAutoSyncSeconds = (sec) => {\n const ms = Math.max(5, Math.min(3600, Number(sec) || 30)) * 1000;\n window.__nexus.autoSyncMs = ms;\n window.dispatchEvent(new CustomEvent('nexus:auto-sync-change', {detail:{ms}}));\n };\n fetch('/api/config').then(r => r.json()).then(cfg => {\n apply(cfg?.workspace_prefs);\n if (cfg?.auto_sync_seconds != null) window.__nexus.setAutoSyncSeconds(cfg.auto_sync_seconds);\n else window.__nexus.autoSyncMs = 60000;\n }).catch(() => { window.__nexus.autoSyncMs = 60000; });\n }, []);\n\n useEffect(() => {\n const init = async () => {\n try {\n const [intRes, agentRes, llmRes] = await Promise.allSettled([\n fetch('/api/integrations').then(r => r.json()),\n fetch('/api/agents').then(r => r.json()),\n fetch('/api/llm/config').then(r => r.json()),\n ]);\n if (intRes.status === 'fulfilled') setIntegrations(Array.isArray(intRes.value) ? intRes.value : []);\n if (agentRes.status === 'fulfilled') setAgents(Array.isArray(agentRes.value) ? agentRes.value : []);\n if (llmRes.status === 'fulfilled' && llmRes.value) setLlmConfig(llmRes.value);\n\n const sp = new URLSearchParams(window.location.search);\n if (sp.get('auth') === 'google_ok') {\n showToast('Google connected - GA4, Search Console & YouTube are ready.', 'success');\n window.history.replaceState({}, '', window.location.pathname);\n } else if (sp.get('auth_error')) {\n showToast('Google OAuth failed: ' + sp.get('auth_error'), 'error');\n window.history.replaceState({}, '', window.location.pathname);\n }\n } catch (e) { console.error('Init error:', e); }\n finally { setLoading(false); }\n };\n init();\n }, []);\n\n // Centralized server-error surfacing — the wrapped window.fetch dispatches 'nexus-api-error'\n // on 5xx / network failures (see frontend_js.ts) so failures aren't silently swallowed by\n // per-call .catch(()=>[]). Throttled to avoid flooding on background polling.\n useEffect(() => {\n let last = 0;\n const handler = (e) => {\n const now = Date.now();\n if (now - last < 8000) return;\n last = now;\n const st = (e.detail && e.detail.status) || 0;\n showToast(st === 0 ? 'Không kết nối được máy chủ' : ('Lỗi máy chủ (' + st + ')'), 'error');\n };\n window.addEventListener('nexus-api-error', handler);\n return () => window.removeEventListener('nexus-api-error', handler);\n }, []);\n\n useEffect(() => {\n const handler = (e) => {\n const { source, endpoint, data } = e.detail || {};\n const summary = JSON.stringify(data).slice(0, 3000);\n setChatMessages(prev => [...prev, {\n role:'user',\n content: \\`Analyze this \\${source} \"\\${endpoint}\" data and give me 3 specific, actionable insights with numbers:\\\\n\\\\n\\${summary}\\`,\n id: Date.now()\n }]);\n setChatOpen(true);\n };\n window.addEventListener('analyze-data', handler);\n return () => window.removeEventListener('analyze-data', handler);\n }, []);\n\n // Phase 1 Advanced: IntelligenceFeed dispatches 'investigate-intelligence' when user clicks a card.\n useEffect(() => {\n const handler = (e) => {\n const card = e.detail || {};\n const prompt = (card.action_payload?.question || 'Tell me more about this signal') +\n (card.title ? '\\\\n\\\\nContext: ' + card.title : '') +\n (card.body ? '\\\\n' + card.body : '');\n setChatMessages(prev => [...prev, {role:'user', content: prompt, id: Date.now()}]);\n setChatOpen(true);\n };\n window.addEventListener('investigate-intelligence', handler);\n window.addEventListener('nexus:open-chat', handler);\n return () => {\n window.removeEventListener('investigate-intelligence', handler);\n window.removeEventListener('nexus:open-chat', handler);\n };\n }, []);\n\n useEffect(() => {\n let pending = null;\n const map = {d:'dashboard', m:'marketing', s:'sales', a:'agents', p:'settings'};\n const onKey = (e) => {\n if (['INPUT','TEXTAREA','SELECT'].includes(e.target.tagName)) return;\n if (pending === 'g' && map[e.key]) { setActivePage(map[e.key]); pending = null; return; }\n pending = e.key === 'g' ? 'g' : null;\n if (pending) setTimeout(() => { pending = null; }, 800);\n };\n window.addEventListener('keydown', onKey);\n return () => window.removeEventListener('keydown', onKey);\n }, []);\n\n const pageTitles = {\n dashboard: 'Command Center',\n marketing: 'Strategy',\n sales: 'Sales CRM',\n workspace: 'Workspace',\n objectives: 'Objectives',\n calendar: 'Command Calendar',\n experiments: 'Experiments',\n analytics: 'Analytics',\n agents: 'Agent Studio',\n campaigns: 'Campaigns',\n knowledge: 'Knowledge Graph',\n approvals: 'Approvals',\n playbooks: 'Playbooks',\n settings: 'System Configuration',\n };\n\n // Hot-leads count for the Signals nav badge (polled every 60s; cheap count endpoint).\n const [hotLeads, setHotLeads] = useState(0);\n useEffect(() => {\n const load = () => fetch('/api/signals/hot-leads/count').then(r => r.json()).then(d => setHotLeads(d.count || 0)).catch(() => {});\n load();\n const iv = setInterval(load, 60000);\n return () => clearInterval(iv);\n }, []);\n\n const renderPage = () => {\n if (loading) return h('div', {className:'flex flex-1 items-center justify-center flex-col gap-4 p-10'},\n h(Spinner, {size:36}),\n h('div', {className:'text-text-muted text-[14px] font-medium'}, 'Initializing Nexus-')\n );\n\n switch (activePage) {\n case 'dashboard': return h(CommandCenter, {setActivePage, agents, integrations, showToast});\n case 'analytics': return h(AnalyticsPage, {integrations, agents, setActivePage});\n case 'marketing': return h(MarketingWorkspace, {integrations, agents, setActivePage, showToast});\n case 'sales': return h(CRMWorkspace, {setActivePage});\n case 'workspace': return h(WorkspacePage, {integrations, agents, setActivePage, showToast});\n case 'objectives': return h(ObjectivesPage, {setActivePage});\n case 'calendar': return h(CalendarPage, {setActivePage, integrations, agents, showToast});\n case 'experiments': return h(ExperimentBoard, {setActivePage});\n case 'campaigns': return h(CampaignsPage, {agents, integrations, setActivePage, showToast});\n case 'tasks': return h(TasksPage, {agents, showToast, setActivePage});\n case 'knowledge': return h(KnowledgeGraphView, {open:true, onClose: () => setActivePage('dashboard')});\n case 'approvals': return h(ApprovalsPage, {showToast});\n case 'agents': return h(AgentStudio, {agents, setAgents, setChatOpen, setChatMessages, setConvId, showToast});\n case 'settings': return h(SettingsPage, {integrations, setIntegrations, llmConfig, setLlmConfig, showToast});\n case 'playbooks': return h(SkillsView, {setActivePage, showToast, setChatOpen, setChatMessages});\n // Master-only platform console. Nav entry is gated on isPlatformAdmin, but we also\n // guard the render here so a non-master deep-link (/platform) can never mount it.\n case 'platform':\n return isPlatformAdmin\n ? h(PlatformConsole, {setActivePage, showToast})\n : h(CommandCenter, {setActivePage, agents, integrations, showToast});\n default: return h(CommandCenter, {setActivePage, agents, integrations, showToast});\n }\n };\n\n // Open the AI chat panel seeded with a draft-outreach prompt for a Signals row.\n const openOutreach = (signal) => {\n const prompt = 'Draft a personalized outreach for ' + (signal.name || 'this prospect') +\n (signal.company && signal.company !== '-' ? ' at ' + signal.company : '') +\n '. Signal context: ' + (signal.signal || 'recent inbound') +\n '. Subject/role: ' + (signal.role || '') + '. Tone: warm, specific, under 120 words.';\n setChatMessages(prev => [...prev, {role:'user', content: prompt, id: Date.now()}]);\n setCurrentWorkspace('sales');\n setChatOpen(true);\n };\n\n return h('div', {className:'flex flex-col h-screen overflow-hidden'},\n // Phase D: read-only impersonation banner pinned above the entire app shell.\n impersonating && h(ImpersonationBanner, {tenant: impersonatedTenant}),\n h('div', {className:'flex flex-1 min-h-0 overflow-hidden'},\n h(Sidebar, {\n activePage, setActivePage, integrations, agents, hotLeads,\n onNewCampaign: () => { setActivePage('campaigns'); }\n }),\n h('main', {className:'flex-1 flex flex-col overflow-hidden relative'},\n h(TopNav, {\n title: pageTitles[activePage] || 'Nexus Command',\n activePage, setActivePage,\n onChatToggle: () => setChatOpen(o => !o),\n chatOpen\n }),\n h('div', {className:'flex-1 overflow-y-auto'},\n renderPage()\n ),\n h(SystemStatusBar)\n ),\n h(AIChatPanel, {\n open: chatOpen, onClose: () => setChatOpen(false),\n messages: chatMessages, setMessages: setChatMessages,\n currentWorkspace, setCurrentWorkspace, convId, setConvId\n }),\n h(ToastContainer, {toasts})\n ) // close inner flex wrapper (sidebar + main + chat)\n );\n }\n\n // --- Polished login / signup screen (real session auth). Matches the app's\n // dark glass-panel design. On submit it POSTs to /api/auth/login or\n // /api/auth/register; the server sets the HttpOnly nexus_session cookie, then\n // we reload so the AuthGate re-checks /api/auth/me and mounts the App. ---\n function AuthScreen() {\n const [mode, setMode] = useState('login'); // 'login' | 'signup'\n const [name, setName] = useState('');\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n const [companyUrl, setCompanyUrl] = useState(''); // honeypot - must stay empty\n const [busy, setBusy] = useState(false);\n const [err, setErr] = useState('');\n\n const isSignup = mode === 'signup';\n const fieldCls = 'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3.5 py-2.5 text-[14px] text-on-surface placeholder:text-text-muted neon-stroke transition-all';\n\n const submit = async (e) => {\n if (e) e.preventDefault();\n if (busy) return;\n const em = email.trim();\n if (!em || !password) { setErr('Email and password are required'); return; }\n if (isSignup && !name.trim()) { setErr('Please enter your name'); return; }\n setBusy(true); setErr('');\n try {\n const url = isSignup ? '/api/auth/register' : '/api/auth/login';\n const body = isSignup\n ? { name: name.trim(), email: em, password, company_url: companyUrl }\n : { email: em, password };\n const r = await fetch(url, {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(body)\n });\n let data = {};\n try { data = await r.json(); } catch (e3) {}\n if (r.ok && data && data.ok) {\n // Cookie is set by the server; reload so AuthGate re-checks /api/auth/me.\n window.location.reload();\n return;\n }\n const msg = (data && (data.error?.message || data.error || data.message))\n || (r.status === 401 ? 'Invalid email or password' : 'Authentication failed');\n setErr(typeof msg === 'string' ? msg : 'Authentication failed');\n } catch (e2) {\n setErr('Connection error - please try again');\n }\n setBusy(false);\n };\n\n const switchMode = (m) => { setMode(m); setErr(''); };\n\n return h('div', {className:'relative flex h-screen items-center justify-center p-6 overflow-hidden'},\n // Ambient brand glow to match the app shell backdrop.\n h('div', {className:'fixed inset-0 pointer-events-none -z-10 overflow-hidden'},\n h('div', {className:'absolute top-0 right-0 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px]'}),\n h('div', {className:'absolute bottom-0 left-0 w-[600px] h-[600px] bg-secondary/5 rounded-full blur-[150px]'})\n ),\n h('div', {className:'w-full max-w-[420px] glass-panel rounded-2xl p-xl shadow-2xl flex flex-col gap-lg'},\n\n // Brand header\n h('div', {className:'flex items-center gap-3'},\n h('div', {className:'w-11 h-11 rounded-xl bg-primary/10 border border-primary/20 text-primary flex items-center justify-center flex-shrink-0'},\n h(Icon, {name:'hub', size:24})\n ),\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[18px] font-extrabold text-on-surface tracking-tight leading-tight'}, 'AIHive Command Center'),\n h('div', {className:'text-[12px] text-text-muted'}, 'Nexus AI')\n )\n ),\n\n // Mode toggle\n h('div', {className:'flex bg-surface-container-lowest rounded-lg p-1 border border-border-subtle'},\n ['login','signup'].map(m => h('button', {\n key: m, type:'button', onClick: () => switchMode(m),\n className: 'flex-1 py-2 rounded-md text-[12px] font-bold uppercase tracking-wider transition-all ' +\n (mode === m ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface-variant')\n }, m === 'login' ? 'Log in' : 'Sign up'))\n ),\n\n h('form', {onSubmit: submit, className:'flex flex-col gap-3'},\n isSignup && h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Name'),\n h('input', {\n type:'text', value: name, autoFocus: isSignup, autoComplete:'name',\n onChange: (ev) => setName(ev.target.value),\n placeholder:'Jane Doe', className: fieldCls\n })\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Email'),\n h('input', {\n type:'email', value: email, autoFocus: !isSignup, autoComplete:'email',\n onChange: (ev) => setEmail(ev.target.value),\n placeholder:'you@company.com', className: fieldCls\n })\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Password'),\n h('input', {\n type:'password', value: password,\n autoComplete: isSignup ? 'new-password' : 'current-password',\n onChange: (ev) => setPassword(ev.target.value),\n placeholder:'********', className: fieldCls\n })\n ),\n\n // Honeypot: bots fill hidden fields; humans never see it. Kept off-screen\n // and aria-hidden. Named exactly company_url to match the server bot-trap.\n isSignup && h('div', {\n 'aria-hidden':'true',\n style:{position:'absolute', left:'-9999px', top:'-9999px', width:'1px', height:'1px', overflow:'hidden', opacity:0}\n },\n h('label', null, 'Company URL'),\n h('input', {\n type:'text', name:'company_url', tabIndex:-1, autoComplete:'off',\n value: companyUrl, onChange: (ev) => setCompanyUrl(ev.target.value)\n })\n ),\n\n err ? h('div', {className:'flex items-center gap-1.5 text-[12px] text-error bg-error/10 border border-error/30 rounded-lg px-3 py-2'},\n h(Icon, {name:'error', size:14}),\n h('span', null, err)\n ) : null,\n\n h('button', {\n type:'submit', disabled: busy,\n className:'w-full mt-1 py-2.5 rounded-lg bg-primary text-on-primary font-bold text-[13px] uppercase tracking-wider flex items-center justify-center gap-2 hover:opacity-90 disabled:opacity-50 transition-all'\n },\n busy ? h(Spinner, {size:15, color:'#1000a9'}) : h(Icon, {name: isSignup ? 'person_add' : 'login', size:16}),\n busy ? 'Please wait-' : (isSignup ? 'Create account' : 'Log in')\n )\n ),\n\n // Social / identity providers\n h('div', {className:'flex items-center gap-3'},\n h('div', {className:'flex-1 h-px bg-border-subtle'}),\n h('span', {className:'text-[10px] font-semibold uppercase tracking-widest text-text-muted'}, 'or'),\n h('div', {className:'flex-1 h-px bg-border-subtle'})\n ),\n h('div', {className:'flex flex-col gap-2'},\n h('button', {\n type:'button', onClick: () => { window.location.href = '/api/login/google'; },\n className:'w-full py-2.5 rounded-lg border border-border-subtle bg-surface-container-lowest text-on-surface font-medium text-[13px] flex items-center justify-center gap-2 hover:border-outline/40 transition-all'\n },\n h(Icon, {name:'g_translate', size:16, className:'text-primary'}),\n 'Continue with Google'\n ),\n h('button', {\n type:'button', onClick: () => { window.location.href = '/api/login/microsoft'; },\n className:'w-full py-2.5 rounded-lg border border-border-subtle bg-surface-container-lowest text-on-surface font-medium text-[13px] flex items-center justify-center gap-2 hover:border-outline/40 transition-all'\n },\n h(Icon, {name:'window', size:16, className:'text-secondary'}),\n 'Continue with Microsoft'\n )\n ),\n h('p', {className:'text-[10px] text-text-muted text-center leading-relaxed'},\n 'Social login may need the workspace owner to configure it first.'\n )\n )\n );\n }\n\n // --- Auth gate. On mount, asks the server who we are (GET /api/auth/me). While\n // that resolves we show a spinner; an authenticated cookie session mounts the\n // App, otherwise we show the login/signup screen. 'nexus-auth-required' (fired\n // by the wrapped fetch on a 401) bounces an expired session back to the screen. ---\n function AuthGate() {\n const [status, setStatus] = useState('loading'); // 'loading' | 'authed' | 'guest'\n\n const check = async () => {\n try {\n const r = await fetch('/api/auth/me', {headers:{'Accept':'application/json'}});\n const data = await r.json().catch(() => ({}));\n const authed = r.ok && data && data.ok;\n // Stash the resolved identity (incl. the master flag) on window.__nexus BEFORE App mounts,\n // so App's synchronous render gate + the account menu (frontend_js.ts) can read it. Only the\n // real master account gets isPlatformAdmin=true; everyone else is explicitly false.\n try {\n window.__nexus = window.__nexus || {};\n window.__nexus.me = authed ? data : null;\n window.__nexus.isPlatformAdmin = !!(authed && data.isPlatformAdmin);\n // Phase D: read-only impersonation flags from the flattened /api/auth/me, stashed next\n // to isPlatformAdmin so App can render the fixed \"Viewing as ...\" banner synchronously.\n window.__nexus.impersonating = !!(authed && data.impersonating);\n window.__nexus.impersonatedTenant = (authed && data.impersonatedTenant) || null;\n } catch (e2) {}\n setStatus(authed ? 'authed' : 'guest');\n } catch (e) {\n try {\n window.__nexus = window.__nexus || {};\n window.__nexus.isPlatformAdmin = false;\n window.__nexus.impersonating = false;\n window.__nexus.impersonatedTenant = null;\n } catch (e2) {}\n setStatus('guest');\n }\n };\n\n useEffect(() => { check(); }, []);\n\n useEffect(() => {\n const onRequired = () => setStatus('guest');\n window.addEventListener('nexus-auth-required', onRequired);\n return () => window.removeEventListener('nexus-auth-required', onRequired);\n }, []);\n\n if (status === 'loading') {\n return h('div', {className:'flex h-screen items-center justify-center flex-col gap-4'},\n h(Spinner, {size:32}),\n h('div', {className:'text-text-muted text-[13px] font-medium'}, 'Checking session-')\n );\n }\n if (status === 'authed') return h(App);\n return h(AuthScreen);\n }\n\n const root = createRoot(document.getElementById('root'));\n // Real session-aware gate: AuthGate checks /api/auth/me, then mounts App or the login screen.\n root.render(h(AuthGate));\n `;\n}\n",[359],"26dd7106-5f0f-11f1-97b5-1607ee4eb77e","frontend_js.ts","463d4604-5774-11f1-8222-ee650bb23af1",994,["D",1780465410611],70,"import { getAppJS2 } from \"./frontend_js2.ts\";\nexport function getAppJS(): string {\n return `\n import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';\n import { createRoot } from 'react-dom/client';\n\n const h = React.createElement;\n\n // --- Shared-secret auth (matches the APP_TOKEN gate in main.ts) -----------\n const NEXUS_TOKEN_KEY = 'nexus_token';\n const getToken = () => { try { return localStorage.getItem(NEXUS_TOKEN_KEY) || ''; } catch (e) { return ''; } };\n const setToken = (t) => { try { localStorage.setItem(NEXUS_TOKEN_KEY, t); } catch (e) {} };\n const clearToken = () => { try { localStorage.removeItem(NEXUS_TOKEN_KEY); } catch (e) {} };\n\n // Wrap window.fetch once so every /api/ call carries the token without touching the\n // dozens of scattered fetch() call-sites. /api/app-* and /api/auth/* are public (no header).\n const __origFetch = window.fetch.bind(window);\n window.fetch = (input, init) => {\n const url = typeof input === 'string' ? input : ((input && input.url) || '');\n const path = url.replace(location.origin, '');\n const isApi = path.startsWith('/api/');\n const isPublic = path.startsWith('/api/app-') || path.startsWith('/api/auth/');\n let nextInput = input, nextInit = init;\n if (isApi && !isPublic && typeof input === 'string') {\n const tok = getToken();\n const headers = new Headers((init && init.headers) || {});\n if (tok && !headers.has('Authorization')) headers.set('Authorization', 'Bearer ' + tok);\n nextInit = { ...(init || {}), headers };\n }\n return __origFetch(nextInput, nextInit).then((res) => {\n if (isApi && !isPublic) {\n if (res.status === 401) {\n clearToken();\n window.dispatchEvent(new CustomEvent('nexus-auth-required'));\n } else if (res.status >= 500) {\n // Surface real server errors centrally instead of letting each call-site swallow them\n // with .catch(()=>[]). 4xx are often expected/handled, so only 5xx raises a toast.\n window.dispatchEvent(new CustomEvent('nexus-api-error', { detail: { path, status: res.status } }));\n }\n }\n return res;\n }).catch((err) => {\n if (isApi && !isPublic) {\n window.dispatchEvent(new CustomEvent('nexus-api-error', { detail: { path, status: 0 } }));\n }\n throw err;\n });\n };\n // Token-bearing download (for export <a href> links that can't send a header).\n window.__nexusDownload = (path) => {\n const sep = path.includes('?') ? '&' : '?';\n const tok = getToken();\n const href = tok ? path + sep + 'token=' + encodeURIComponent(tok) : path;\n window.open(href, '_blank');\n };\n\n const _ui = await import('/api/app-ui');\n const { Icon, Spinner, Badge, StatusDot, Toggle, Btn, IconBtn,\n Input, Textarea, Select, BrandIcon, MetricCard,\n DateRangePicker, TrendBadge, GlassPanel, SectionHeader, DataDisplay } = _ui;\n\n const _ch = await import('/api/app-charts').catch(() => ({}));\n const BarChart = _ch.BarChart || null;\n const Sparkline = _ch.Sparkline || (()=>null);\n const LineChart = _ch.LineChart || null;\n const ChannelChart = _ch.ChannelChart || null;\n // Phase 1 Advanced charts\n const FunnelFlowChart = _ch.FunnelFlowChart || (() => null);\n const PipelineVelocityChart = _ch.PipelineVelocityChart || (() => null);\n\n // Per-integration custom renderers (Gmail inbox, Drive grid, Calendar timeline, Sheets/Docs cards).\n const _rd = await import('/api/app-renderers').catch(() => ({}));\n const _rd2 = await import('/api/app-renderers2').catch(() => ({}));\n const INTEGRATION_RENDERERS = {\n gmail: _rd.GmailRenderer, drive: _rd.DriveRenderer, calendar: _rd.CalendarRenderer,\n sheets: _rd.SheetsRenderer, docs: _rd.DocsRenderer, linkedin: _rd.LinkedInRenderer,\n gsc: _rd.GSCRenderer, youtube: _rd.YouTubeRenderer,\n outlook: _rd.OutlookRenderer, wordpress: _rd.WordPressRenderer, producthunt: _rd.ProductHuntRenderer,\n ahrefs: _rd2.AhrefsRenderer, onedrive: _rd2.OneDriveRenderer, teams: _rd2.TeamsRenderer, excel: _rd2.ExcelRenderer, ga4: _rd2.GA4Renderer,\n };\n\n // Page-level workspace components (Dashboard, MarketingWorkspace, SalesWorkspace, WorkspacePage, SystemStatusBar, TeamHub).\n // Extracted to a separate served module so frontend_js.ts stays under val.town's 80K char limit.\n const _pages = await import('/api/app-pages').catch(() => ({}));\n // Renamed: 'Dashboard' is now AnalyticsPage (analytics-style KPIs/funnel/feed).\n // The 'dashboard' nav route now lands on the new CommandCenter from /api/app-command.\n const AnalyticsPage = _pages.AnalyticsPage || _pages.Dashboard || (() => h('div', {className:'p-8 text-text-muted'}, 'Pages module failed to load'));\n const MarketingWorkspace= _pages.MarketingWorkspace|| (() => null);\n const SalesWorkspace = _pages.SalesWorkspace || (() => null);\n const WorkspacePage = _pages.WorkspacePage || (() => null);\n const SystemStatusBar = _pages.SystemStatusBar || (() => null);\n\n // Command Center - the new home/dashboard surface (chat-style command palette).\n const _cmd = await import('/api/app-command').catch(() => ({}));\n const CommandCenter = _cmd.CommandCenter || (() => h('div', {className:'p-8 text-text-muted'}, 'Command module failed to load'));\n\n // Phase 1 Advanced: intelligence module (UnifiedFunnelView used in Dashboard via pages; IntelligenceBadge here in Sidebar)\n const _intel = await import('/api/app-intelligence').catch(() => ({}));\n const IntelligenceBadge = _intel.IntelligenceBadge || (() => null);\n\n // SettingsPage extracted to its own served module (Phase 1 / C1) so frontend_js2.ts stays under 80K.\n const _settings = await import('/api/app-settings').catch(() => ({}));\n const SettingsPage = _settings.SettingsPage || (() => h('div', {className:'p-8 text-text-muted'}, 'Settings module failed to load'));\n\n // Framework + Calendar pages (NEXUS ULTIMATE FEATURE EXPANSION)\n const _objectives = await import('/api/app-objectives').catch(() => ({}));\n const ObjectivesPage = _objectives.ObjectivesPage || (() => h('div', {className:'p-8 text-text-muted'}, 'Objectives module failed to load'));\n const _calendar = await import('/api/app-calendar').catch(() => ({}));\n const CalendarPage = _calendar.CalendarPage || (() => h('div', {className:'p-8 text-text-muted'}, 'Calendar module failed to load'));\n const _exps = await import('/api/app-experiments').catch(() => ({}));\n const ExperimentBoard = _exps.ExperimentBoard || (() => h('div', {className:'p-8 text-text-muted'}, 'Experiments module failed to load'));\n const _campaigns = await import('/api/app-campaigns').catch(() => ({}));\n const CampaignsPage = _campaigns.CampaignsPage || (() => h('div', {className:'p-8 text-text-muted'}, 'Campaigns module failed to load'));\n const _tasks = await import('/api/app-tasks').catch(() => ({}));\n const TasksPage = _tasks.TasksPage || _tasks.default || (() => h('div', {className:'p-8 text-text-muted'}, 'Tasks module failed to load'));\n // Platform (master-only) console — cross-tenant read console for the platform owner.\n // Loaded the same way as every other page module; the view router + nav are gated on\n // me.isPlatformAdmin so non-master accounts can never reach it.\n const _platform = await import('/api/app-platform').catch(() => ({}));\n const PlatformConsole = _platform.PlatformConsole || _platform.default || (() => h('div', {className:'p-8 text-text-muted'}, 'Platform module failed to load'));\n const _kg = await import('/api/app-knowledge-graph').catch(() => ({}));\n const KnowledgeGraphView = _kg.KnowledgeGraphView || (() => null);\n const _approvals = await import('/api/app-approvals').catch(() => ({}));\n const ApprovalsPage = _approvals.ApprovalsPage || (() => h('div', {className:'p-8 text-text-muted'}, 'Approvals module failed to load'));\n const _crm = await import('/api/app-crm').catch(() => ({}));\n const CRMWorkspace = _crm.CRMWorkspace || (() => h('div', {className:'p-8 text-text-muted'}, 'CRM module failed to load'));\n const _skills = await import('/api/app-skills').catch(() => ({}));\n const SkillsView = _skills.SkillsView || (() => h('div', {className:'p-8 text-text-muted'}, 'Playbooks module failed to load'));\n\n const _marked = await import('https://esm.sh/marked@4').catch(() => ({}));\n const marked = _marked.marked || ((s) => s);\n\n const parseTools = (tools) => {\n if (Array.isArray(tools)) return tools;\n if (typeof tools === 'string' && tools.trim()) {\n try { return JSON.parse(tools); } catch { return []; }\n }\n return [];\n };\n\n const INTEGRATIONS = ['google', 'ahrefs', 'ga4', 'gsc', 'gmail', 'drive', 'sheets', 'docs', 'calendar', 'linkedin', 'outlook', 'onedrive', 'teams', 'excel', 'wordpress', 'youtube', 'producthunt'];\n\n const INTEGRATION_META = {\n google: { icon: 'google', label: 'Google Workspace', category: 'workspace', color: '#4285f4' },\n ahrefs: { icon: 'ahrefs', label: 'Ahrefs', category: 'marketing', color: '#f59e0b' },\n ga4: { icon: 'googleanalytics', label: 'Google Analytics 4', category: 'marketing', color: '#e37400' },\n gsc: { icon: 'googlesearchconsole', label: 'Google Search Console', category: 'marketing', color: '#34a853' },\n gmail: { icon: 'gmail', label: 'Gmail', category: 'workspace', color: '#ea4335' },\n drive: { icon: 'googledrive', label: 'Google Drive', category: 'workspace', color: '#1fa463' },\n sheets: { icon: 'googlesheets', label: 'Google Sheets', category: 'workspace', color: '#0f9d58' },\n docs: { icon: 'googledocs', label: 'Google Docs', category: 'workspace', color: '#4285f4' },\n calendar: { icon: 'googlecalendar', label: 'Google Calendar', category: 'workspace', color: '#4285f4' },\n linkedin: { icon: 'linkedin', label: 'LinkedIn', category: 'marketing', color: '#0077b5' },\n outlook: { icon: 'microsoftoutlook', label: 'Outlook', category: 'sales', color: '#0078d4' },\n wordpress: { icon: 'wordpress', label: 'WordPress', category: 'marketing', color: '#21759b' },\n youtube: { icon: 'youtube', label: 'YouTube', category: 'marketing', color: '#ff0000' },\n producthunt: { icon: 'producthunt', label: 'Product Hunt', category: 'marketing', color: '#da552f' },\n onedrive: { icon: 'microsoftonedrive', label: 'OneDrive', category: 'workspace', color: '#0078d4' },\n teams: { icon: 'microsoftteams', label: 'Microsoft Teams', category: 'workspace', color: '#6264a7' },\n excel: { icon: 'microsoftexcel', label: 'Microsoft Excel', category: 'workspace', color: '#217346' },\n };\n\n // Action schema:\n // { label, endpoint, method?: 'GET'|'POST' (default GET),\n // form?: [{ key, label, type, placeholder?, required?, rows? }],\n // buildBody?: (formValues) => objectToSend }\n // Each integration becomes a mini-app: read actions populate the data display,\n // write actions render an inline form whose submit POSTs to the same /data?endpoint=X.\n const INTEGRATION_ACTIONS = {\n google: [],\n ahrefs: [\n { label: 'Site Overview', endpoint: 'site-explorer' },\n { label: 'Top Pages', endpoint: 'top-pages' },\n { label: 'Keywords', endpoint: 'keywords' },\n { label: 'Backlinks', endpoint: 'backlinks' },\n { label: 'Ref. Domains', endpoint: 'referring-domains' },\n { label: 'Domain Rating', endpoint: 'domain-rating' },\n { label: 'Organic KWs', endpoint: 'organic-keywords' },\n { label: 'Backlinks Stats', endpoint: 'backlinks-stats' },\n { label: 'Keywords Overview', endpoint: 'keywords-overview' },\n { label: 'Broken Backlinks', endpoint: 'broken-backlinks' },\n { label: 'Anchors', endpoint: 'anchors' },\n ],\n ga4: [\n { label: 'KPI Overview', endpoint: 'kpi' },\n { label: 'Traffic Trend', endpoint: 'traffic-over-time' },\n { label: 'Acquisition', endpoint: 'user-acquisition' },\n { label: 'Realtime', endpoint: 'realtime' },\n { label: 'Traffic Report', endpoint: 'report' },\n { label: 'Top Pages', endpoint: 'page-views' },\n { label: 'Top Events', endpoint: 'top-events' },\n { label: 'Devices', endpoint: 'device-breakdown' },\n { label: 'Funnel', endpoint: 'funnel' },\n { label: 'Conversions', endpoint: 'conversions' },\n { label: 'Landing Pages', endpoint: 'landing-pages' },\n { label: 'Acquisition Source', endpoint: 'acquisition-source' },\n { label: 'Cohort Retention', endpoint: 'cohort-retention' },\n ],\n gsc: [\n { label: 'Search Queries', endpoint: 'search-analytics' },\n { label: 'Top Pages', endpoint: 'pages' },\n { label: 'Sitemaps', endpoint: 'sitemaps' },\n { label: 'Trend', endpoint: 'trend' },\n { label: 'By Device', endpoint: 'by-device' },\n { label: 'By Country', endpoint: 'by-country' },\n { label: 'Query-Page', endpoint: 'query-page' },\n ],\n gmail: [\n // Reads\n { label: 'Inbox', endpoint: 'inbox' },\n { label: 'Unread', endpoint: 'unread' },\n { label: 'Sent', endpoint: 'sent' },\n { label: 'Starred', endpoint: 'starred' },\n { label: 'Labels', endpoint: 'labels' },\n { label: 'Profile', endpoint: 'profile' },\n // Writes\n { label: 'Compose Email', endpoint: 'send', method:'POST', icon:'send', form:[\n { key:'to', label:'To', type:'text', placeholder:'recipient@example.com', required:true },\n { key:'cc', label:'Cc', type:'text', placeholder:'(optional)' },\n { key:'subject', label:'Subject', type:'text', required:true },\n { key:'body', label:'Message', type:'textarea', rows:8, required:true },\n ], buildBody: f => ({to:f.to, cc:f.cc, subject:f.subject, body:f.body}) },\n { label: 'Save Draft', endpoint: 'createDraft', method:'POST', icon:'drafts', form:[\n { key:'to', label:'To', type:'text', placeholder:'recipient@example.com' },\n { key:'subject', label:'Subject', type:'text' },\n { key:'body', label:'Message', type:'textarea', rows:8 },\n ], buildBody: f => ({to:f.to, subject:f.subject, body:f.body}) },\n ],\n drive: [\n { label: 'Recent Files', endpoint: 'recent' },\n { label: 'Shared with me',endpoint: 'shared' },\n { label: 'Starred', endpoint: 'starred' },\n { label: 'Trash', endpoint: 'trash' },\n { label: 'Storage Quota', endpoint: 'about' },\n // Writes\n { label: 'Create Folder', endpoint: 'createFolder', method:'POST', icon:'create_new_folder', form:[\n { key:'name', label:'Folder name', type:'text', required:true, placeholder:'New folder' },\n ], buildBody: f => ({name:f.name}) },\n { label: 'Delete File', endpoint: 'deleteFile', method:'POST', icon:'delete', form:[\n { key:'id', label:'File ID', type:'text', required:true, placeholder:'paste ID from Recent Files' },\n ], buildBody: f => ({id:f.id}) },\n ],\n sheets: [\n { label: 'List Sheets', endpoint: 'list' },\n // Writes\n { label: 'Create Sheet', endpoint: 'create', method:'POST', icon:'add_chart', form:[\n { key:'title', label:'Spreadsheet title', type:'text', required:true },\n ], buildBody: f => ({title:f.title}) },\n { label: 'Append Row', endpoint: 'appendRow', method:'POST', icon:'add_row_below', form:[\n { key:'spreadsheetId', label:'Spreadsheet ID', type:'text', required:true, placeholder:'paste ID from List Sheets' },\n { key:'range', label:'Range', type:'text', required:true, placeholder:'Sheet1!A:Z' },\n { key:'values', label:'Values (comma-separated)', type:'text', required:true, placeholder:'col1, col2, col3' },\n ], buildBody: f => ({spreadsheetId:f.spreadsheetId, range:f.range, values:f.values.split(',').map(v=>v.trim())}) },\n ],\n docs: [\n { label: 'List Docs', endpoint: 'list' },\n // Writes\n { label: 'Create Doc', endpoint: 'create', method:'POST', icon:'note_add', form:[\n { key:'title', label:'Document title', type:'text', required:true },\n { key:'content', label:'Initial content (optional)', type:'textarea', rows:5 },\n ], buildBody: f => ({title:f.title, content:f.content}) },\n { label: 'Append Text', endpoint: 'appendText', method:'POST', icon:'edit_note', form:[\n { key:'documentId', label:'Document ID', type:'text', required:true, placeholder:'paste ID from List Docs' },\n { key:'text', label:'Text to append', type:'textarea', rows:5, required:true },\n ], buildBody: f => ({documentId:f.documentId, text:f.text}) },\n ],\n calendar: [\n { label: 'Upcoming', endpoint: 'upcoming' },\n { label: 'Today', endpoint: 'today' },\n { label: 'This Week', endpoint: 'week' },\n { label: 'Calendars', endpoint: 'calendars' },\n // Writes\n { label: 'Create Event', endpoint: 'createEvent', method:'POST', icon:'event_available', form:[\n { key:'summary', label:'Event title', type:'text', required:true },\n { key:'description', label:'Description', type:'textarea', rows:3 },\n { key:'location', label:'Location', type:'text' },\n { key:'start', label:'Start time', type:'datetime-local', required:true },\n { key:'end', label:'End time', type:'datetime-local', required:true },\n { key:'attendees', label:'Attendees (comma-separated)', type:'text', placeholder:'a@x.com, b@y.com' },\n ], buildBody: f => ({summary:f.summary, description:f.description, location:f.location, start:f.start, end:f.end, attendees: f.attendees ? f.attendees.split(',').map(s=>s.trim()).filter(Boolean) : []}) },\n { label: 'Delete Event', endpoint: 'deleteEvent', method:'POST', icon:'event_busy', form:[\n { key:'eventId', label:'Event ID', type:'text', required:true, placeholder:'paste ID from Upcoming' },\n ], buildBody: f => ({eventId:f.eventId}) },\n ],\n linkedin: [\n { label: 'My Profile', endpoint: 'profile' },\n { label: 'Posts', endpoint: 'posts' },\n { label: 'Analytics', endpoint: 'analytics' },\n { label: 'Connections', endpoint: 'connections' },\n { label: 'Compose Post', endpoint: 'share', method:'POST', icon:'post_add', form:[\n { key:'text', label:'Post text', type:'textarea', rows:4, required:true },\n ], buildBody: f => ({text: f.text}) },\n ],\n outlook: [\n { label: 'Inbox', endpoint: 'inbox' },\n { label: 'Calendar', endpoint: 'calendar' },\n { label: 'Contacts', endpoint: 'contacts' },\n // Writes\n { label: 'Send Email', endpoint: 'send', method:'POST', icon:'send', form:[\n { key:'to', label:'To', type:'text', required:true, placeholder:'recipient@example.com' },\n { key:'subject', label:'Subject', type:'text', required:true },\n { key:'body', label:'Message', type:'textarea', rows:8, required:true },\n ], buildBody: f => ({\n message:{\n subject: f.subject,\n body: { contentType:'Text', content: f.body },\n toRecipients: [{ emailAddress: { address: f.to } }],\n },\n saveToSentItems: true\n }) },\n ],\n wordpress: [\n { label: 'Posts', endpoint: 'posts' },\n { label: 'Pages', endpoint: 'pages' },\n { label: 'Media', endpoint: 'media' },\n { label: 'Categories', endpoint: 'categories' },\n { label: 'Tags', endpoint: 'tags' },\n { label: 'Search', endpoint: 'search' },\n { label: 'Comments', endpoint: 'comments' },\n // Writes\n { label: 'Publish Post', endpoint: 'publish-post', method:'POST', icon:'post_add', form:[\n { key:'title', label:'Title', type:'text', required:true },\n { key:'content', label:'Content (HTML or text)', type:'textarea', rows:8, required:true },\n { key:'status', label:'Status', type:'text', placeholder:'publish | draft' },\n ], buildBody: f => ({title:f.title, content:f.content, status: f.status || 'publish'}) },\n { label: 'Update Post', endpoint: 'update-post', method:'POST', icon:'edit_note', form:[\n { key:'id', label:'Post ID', type:'text', required:true, placeholder:'paste ID from Posts' },\n { key:'title', label:'Title', type:'text' },\n { key:'content', label:'Content (HTML or text)', type:'textarea', rows:8 },\n { key:'status', label:'Status', type:'text', placeholder:'publish | draft' },\n ], buildBody: f => ({id:f.id, title:f.title, content:f.content, status:f.status}) },\n ],\n youtube: [\n { label: 'Channels', endpoint: 'channels' },\n { label: 'Analytics', endpoint: 'analytics' },\n { label: 'Trending Videos', endpoint: 'videos' },\n { label: 'Search', endpoint: 'search' },\n ],\n producthunt: [\n { label: \"Today's Posts\", endpoint: 'posts' },\n { label: 'Topics', endpoint: 'topics' },\n ],\n onedrive: [\n { label: 'Recent Files', endpoint: 'recent' },\n { label: 'My Files', endpoint: 'files' },\n { label: 'Search', endpoint: 'search', method: 'POST', icon: 'search',\n form: [{ key: 'q', label: 'Search query', type: 'text', required: true, placeholder: 'e.g. budget.xlsx' }],\n buildBody: f => ({ q: f.q }) },\n { label: 'Create Folder', endpoint: 'createFolder', method: 'POST', icon: 'create_new_folder',\n form: [{ key: 'name', label: 'Folder name', type: 'text', required: true, placeholder: 'New folder' }],\n buildBody: f => ({ name: f.name }) },\n ],\n teams: [\n { label: 'My Teams', endpoint: 'teams' },\n { label: 'Channels', endpoint: 'channels', method: 'POST', icon: 'tag',\n form: [{ key: 'teamId', label: 'Team ID', type: 'text', required: true, placeholder: 'paste ID from My Teams' }],\n buildBody: f => ({ teamId: f.teamId }) },\n { label: 'Channel Messages', endpoint: 'messages', method: 'POST', icon: 'forum',\n form: [{ key: 'teamId', label: 'Team ID', type: 'text', required: true, placeholder: 'paste ID from My Teams' },\n { key: 'channelId', label: 'Channel ID', type: 'text', required: true, placeholder: 'paste ID from Channels' }],\n buildBody: f => ({ teamId: f.teamId, channelId: f.channelId }) },\n { label: 'My Chats', endpoint: 'chats' },\n { label: 'Chat Messages', endpoint: 'chat-messages', method: 'POST', icon: 'chat',\n form: [{ key: 'chatId', label: 'Chat ID', type: 'text', required: true, placeholder: 'paste ID from My Chats' }],\n buildBody: f => ({ chatId: f.chatId }) },\n { label: 'Send to Channel', endpoint: 'send-channel', method: 'POST', icon: 'send',\n form: [{ key: 'teamId', label: 'Team ID', type: 'text', required: true, placeholder: 'paste ID from My Teams' },\n { key: 'channelId', label: 'Channel ID', type: 'text', required: true, placeholder: 'paste ID from Channels' },\n { key: 'content', label: 'Message', type: 'textarea', rows: 5, required: true }],\n buildBody: f => ({ teamId: f.teamId, channelId: f.channelId, content: f.content }) },\n { label: 'Send Chat Message', endpoint: 'send-chat', method: 'POST', icon: 'send',\n form: [{ key: 'chatId', label: 'Chat ID', type: 'text', required: true, placeholder: 'paste ID from My Chats' },\n { key: 'content', label: 'Message', type: 'textarea', rows: 5, required: true }],\n buildBody: f => ({ chatId: f.chatId, content: f.content }) },\n ],\n excel: [\n { label: 'Workbooks', endpoint: 'workbooks' },\n { label: 'Worksheets', endpoint: 'worksheets', method: 'POST', icon: 'tab',\n form: [{ key: 'id', label: 'Workbook file ID', type: 'text', required: true, placeholder: 'paste ID from Workbooks' }],\n buildBody: f => ({ id: f.id }) },\n { label: 'Read Range', endpoint: 'range', method: 'POST', icon: 'grid_on',\n form: [{ key: 'id', label: 'Workbook file ID', type: 'text', required: true, placeholder: 'paste ID from Workbooks' },\n { key: 'sheet', label: 'Worksheet name', type: 'text', required: true, placeholder: 'e.g. Sheet1' }],\n buildBody: f => ({ id: f.id, sheet: f.sheet }) },\n ],\n };\n\n const INTEGRATION_FIELDS = {\n google: [\n { key: 'clientId', label: 'OAuth Client ID', type: 'text', hint: 'From Google Cloud Console - APIs & Services - Credentials - OAuth 2.0 Client ID' },\n { key: 'apiSecret', label: 'OAuth Client Secret', type: 'password', hint: 'From the same OAuth 2.0 credential' },\n { key: 'redirectUri',label: 'Redirect URI', type: 'text', hint: 'Register this exact URI in Google Cloud Console: ' + window.location.origin + '/api/auth/google/callback' },\n ],\n ahrefs: [{ key: 'apiKey', label: 'API Key', type: 'password' }, { key: 'target', label: 'Target Domain', type: 'text' }],\n ga4: [{ key: 'propertyId', label: 'GA4 Property ID', type: 'text', hint: 'Numbers only - e.g. 123456789' }],\n gsc: [{ key: 'siteUrl', label: 'Site URL', type: 'text', hint: 'e.g. https://example.com' }],\n gmail: [],\n drive: [],\n sheets: [],\n docs: [],\n calendar: [],\n linkedin: [{ key: 'accessToken', label: 'Access Token', type: 'password', hint: 'LinkedIn v2 API - requires Marketing Developer Platform approval' }],\n outlook: [{ key: 'accessToken', label: 'Access Token', type: 'password' }],\n wordpress: [{ key: 'siteUrl', label: 'Site URL', type: 'text' }, { key: 'apiKey', label: 'Username', type: 'text' }, { key: 'apiSecret', label: 'App Password', type: 'password' }],\n youtube: [{ key: 'apiKey', label: 'API Key (public data)', type: 'password' }, { key: 'ytChannels', label: 'My channels', type: 'text', hint: 'List ALL your channel handles or IDs, comma-separated (e.g. @AIHive, @MiAgent, UC...). The FIRST is your primary channel (AI Hive). Each imports with its own stats.' }],\n producthunt: [{ key: 'apiKey', label: 'API Key', type: 'password' }],\n onedrive: [],\n teams: [],\n excel: [],\n };\n\n const ALL_TOOLS = ['google', 'ahrefs', 'ga4', 'gsc', 'gmail', 'drive', 'sheets', 'docs', 'calendar', 'linkedin', 'outlook', 'onedrive', 'teams', 'excel', 'wordpress', 'youtube', 'producthunt'];\n\n function useToast() {\n const [toasts, setToasts] = useState([]);\n const show = useCallback((message, type='success') => {\n const id = Date.now();\n setToasts(prev => [...prev.slice(-4), { id, message, type }]);\n setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 3200);\n }, []);\n return { toasts, show };\n }\n\n function ToastContainer({toasts}) {\n const tone = {\n success: 'bg-secondary/15 border-secondary/40 text-secondary',\n error: 'bg-error/15 border-error/40 text-error',\n info: 'bg-tertiary/15 border-tertiary/40 text-tertiary'\n };\n const ico = {success:'check_circle', error:'error', info:'notifications'};\n return h('div', {className:'fixed top-5 right-5 z-[9999] flex flex-col gap-2.5'},\n toasts.map(t => h('div', {\n key:t.id, className:'toast-in flex items-center gap-2.5 px-4 py-3 rounded-xl border backdrop-blur-xl shadow-2xl text-[13px] font-medium max-w-sm ' + (tone[t.type]||tone.info)\n },\n h(Icon, {name: ico[t.type]||'info', size:18}),\n h('span', null, t.message)\n ))\n );\n }\n\n\n // normalizeData imported from /api/app-renderers (extracted to stay under val.town's 80K char limit).\n const normalizeData = _rd.normalizeData || ((_n, _e, d) => d);\n\n function parseGA4Rows(data) {\n if (!data?.rows?.length) return [];\n if (data.dimensionHeaders) {\n const dh = data.dimensionHeaders.map(h => h.name);\n const mh = (data.metricHeaders || []).map(h => h.name);\n return data.rows.map(r => ({\n ...Object.fromEntries(dh.map((k,i) => [k, r.dimensionValues[i]?.value])),\n ...Object.fromEntries(mh.map((k,i) => [k, r.metricValues[i]?.value]))\n }));\n }\n if (data.metricHeaders) {\n const mh = data.metricHeaders.map(h => h.name);\n return data.rows.map(r => Object.fromEntries(mh.map((k,i) => [k, r.metricValues[i]?.value])));\n }\n return [];\n }\n\n\n function GA4RichDisplay({data, endpoint}) {\n const fmtN = v => { const n = parseFloat(v)||0; return n>=1e6?(n/1e6).toFixed(1)+'M':n>=1e3?(n/1e3).toFixed(1)+'K':String(Math.round(n*100)/100); };\n const fmtPct = v => (parseFloat(v)*100).toFixed(1)+'%';\n\n if (endpoint === 'traffic-over-time') {\n const rows = parseGA4Rows(data);\n if (!rows.length || !LineChart) return null;\n return h('div', {className:'mt-4 glass-panel rounded-xl p-5'},\n h('div', {className:'text-[13px] font-semibold text-on-surface-variant mb-3.5'}, 'Sessions Over Time'),\n h(LineChart, {data: rows, xKey:'date', yKey:'sessions', color:'#c0c1ff'})\n );\n }\n\n if (endpoint === 'user-acquisition') {\n const rows = parseGA4Rows(data);\n if (!rows.length || !ChannelChart) return null;\n return h('div', {className:'mt-4 glass-panel rounded-xl p-5'},\n h('div', {className:'text-[13px] font-semibold text-on-surface-variant mb-3.5'}, 'Sessions by Channel'),\n h(ChannelChart, {data: rows, labelKey:'sessionDefaultChannelGroup', valueKey:'sessions'})\n );\n }\n\n if (endpoint === 'kpi') {\n const mh = (data.metricHeaders || []).map(h => h.name);\n const row = data.rows?.[0];\n if (!row || !mh.length) return null;\n const vals = row.metricValues || [];\n const n = mh.length;\n const KPI_META = [\n { key:'sessions', label:'Sessions', color:'#c0c1ff', fmt:fmtN },\n { key:'activeUsers', label:'Active Users', color:'#4edea3', fmt:fmtN },\n { key:'newUsers', label:'New Users', color:'#d0bcff', fmt:fmtN },\n { key:'screenPageViews', label:'Page Views', color:'#8083ff', fmt:fmtN },\n { key:'engagementRate', label:'Engagement Rate', color:'#6ffbbe', fmt:fmtPct },\n { key:'bounceRate', label:'Bounce Rate', color:'#ffb4ab', fmt:fmtPct },\n ];\n return h('div', {className:'grid gap-3 mt-4', style:{gridTemplateColumns:'repeat(auto-fill, minmax(155px, 1fr))'}},\n KPI_META.map(({key, label, color, fmt}) => {\n const idx = mh.indexOf(key);\n if (idx < 0) return null;\n const cur = parseFloat(vals[idx]?.value || '0');\n const prev = n < vals.length ? parseFloat(vals[idx + n]?.value || '0') : null;\n return h('div', {\n key, className:'glass-panel rounded-xl p-4',\n style:{borderColor: color+'28'}\n },\n h('div', {className:'text-[10px] text-text-muted uppercase tracking-wider mb-2'}, label),\n h('div', {className:'flex items-baseline gap-2 flex-wrap'},\n h('div', {className:'text-[26px] font-extrabold text-on-surface leading-none'}, fmt(String(cur))),\n prev != null && h(TrendBadge, {current: cur, previous: prev})\n ),\n h('div', {className:'mt-2 h-0.5 rounded', style:{background:color, opacity:0.35}})\n );\n }).filter(Boolean)\n );\n }\n return null;\n }\n\n\n const GOOGLE_SHARED = ['ga4','gsc','youtube','drive','sheets','docs','calendar','gmail'];\n\n function IntegrationPanel({integrationName, integrations, onGoToSettings, onTargetSave}) {\n const meta = INTEGRATION_META[integrationName];\n const actions = INTEGRATION_ACTIONS[integrationName] || [];\n const integration = integrations.find(i => i.name === integrationName);\n const google = integrations.find(i => i.name === 'google');\n const outlook = integrations.find(i => i.name === 'outlook');\n // Shared-OAuth services inherit their connection: Google Workspace from 'google',\n // Microsoft (onedrive/teams/excel) from 'outlook'.\n const MS_SHARED = ['onedrive','teams','excel'];\n const connected = integration?.connected\n || (GOOGLE_SHARED.includes(integrationName) && google?.connected)\n || (MS_SHARED.includes(integrationName) && outlook?.connected);\n\n const [activeEndpoint, setActiveEndpoint] = useState(null);\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [autoRefresh, setAutoRefresh] = useState(false);\n const [countdown, setCountdown] = useState(0);\n const [lastFetched, setLastFetched] = useState(null);\n const [targetEdit, setTargetEdit] = useState('');\n const [savingTarget, setSavingTarget] = useState(false);\n const [days, setDays] = useState(30);\n const arRef = useRef(null);\n const cdRef = useRef(null);\n const savedTarget = integration?.extra_config?.target || '';\n\n // YouTube channel selector (Marketing tab): pick which of the user's channels to view +\n // manage the channel list inline (so it doesn't have to be set in Settings).\n const [ytChannels, setYtChannels] = useState([]);\n const [ytChannel, setYtChannel] = useState('');\n const [ytEdit, setYtEdit] = useState('');\n const [ytEditing, setYtEditing] = useState(false);\n const loadYtChannels = () => {\n fetch('/api/integrations/youtube/data?endpoint=channels').then(r => r.json()).then(d => {\n const items = Array.isArray(d && d.items) ? d.items : [];\n const list = items.map(it => { const id = (typeof it.id === 'string' ? it.id : ''); return { id: id, title: (it.snippet && it.snippet.title) || '(channel)', primary: !!(d && d.__primary) && id === d.__primary }; }).filter(c => c.id);\n setYtChannels(list);\n setYtChannel(prev => prev || ((list.find(c => c.primary) || list[0] || {}).id || ''));\n }).catch(() => {});\n };\n const saveYtChannels = async () => {\n try {\n await fetch('/api/integrations/youtube', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ extra_config: { youtube_channels: ytEdit.trim() } }) });\n setYtEditing(false);\n loadYtChannels();\n } catch (e) {}\n };\n\n // Form state for POST/write actions - keyed by endpoint so switching tabs doesn't lose values.\n const [formValues, setFormValues] = useState({});\n const [submitting, setSubmitting] = useState(false);\n const setFormValue = (k, v) => setFormValues(s => ({...s, [k]: v}));\n\n const fetchData = async (endpoint, extraParams='', daysOverride=null) => {\n const ep = endpoint || activeEndpoint;\n if (!ep) return;\n // YouTube: scope the Analytics view to the selected channel (the dropdown below).\n if (integrationName === 'youtube' && ytChannel && ep === 'analytics' && !extraParams) {\n extraParams = 'channelId=' + encodeURIComponent(ytChannel);\n }\n setActiveEndpoint(ep);\n setLoading(true); setError(null); setData(null);\n try {\n const qs = [extraParams, \\`days=\\${daysOverride ?? days}\\`].filter(Boolean).join('&');\n const res = await fetch(\\`/api/integrations/\\${integrationName}/data?endpoint=\\${ep}&\\${qs}\\`);\n const json = await res.json();\n if (!res.ok) throw new Error(json?.error || json?.message || \\`HTTP \\${res.status}\\`);\n setData(json); setLastFetched(new Date());\n } catch (e) { setError(e.message || 'Failed to fetch data'); }\n finally { setLoading(false); }\n };\n\n // Submit a write/POST action with the current form values.\n const submitWrite = async (action) => {\n if (!action) return;\n // Required field validation\n const missing = (action.form || []).filter(f => f.required && !formValues[f.key]?.trim?.()).map(f => f.label);\n if (missing.length) { setError('Missing required: ' + missing.join(', ')); return; }\n setSubmitting(true); setError(null);\n try {\n const body = action.buildBody ? action.buildBody(formValues) : formValues;\n const res = await fetch(\\`/api/integrations/\\${integrationName}/data?endpoint=\\${action.endpoint}\\`, {\n method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)\n });\n const json = await res.json();\n if (!res.ok) throw new Error(json?.error?.message || json?.error || \\`HTTP \\${res.status}\\`);\n setData(json); setLastFetched(new Date());\n setFormValues({}); // reset form on success\n } catch (e) { setError(e.message || 'Failed to submit'); }\n finally { setSubmitting(false); }\n };\n\n const triggerAction = (action) => {\n setActiveEndpoint(action.endpoint);\n if (action.method === 'POST') {\n // Don't auto-fetch for writes - wait for user to fill form and click Submit.\n setData(null); setError(null);\n setFormValues({});\n } else {\n fetchData(action.endpoint);\n }\n };\n\n const saveTarget = async () => {\n if (!targetEdit.trim()) return;\n setSavingTarget(true);\n try {\n await fetch(\\`/api/integrations/\\${integrationName}\\`, {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({ extra_config: { target: targetEdit.trim() } })\n });\n if (onTargetSave) onTargetSave(integrationName, targetEdit.trim());\n } finally { setSavingTarget(false); }\n };\n\n useEffect(() => {\n clearInterval(arRef.current); clearInterval(cdRef.current);\n if (!autoRefresh || !activeEndpoint) return;\n const INTERVAL = 30000;\n setCountdown(INTERVAL / 1000);\n arRef.current = setInterval(() => { fetchData(activeEndpoint); setCountdown(INTERVAL/1000); }, INTERVAL);\n cdRef.current = setInterval(() => setCountdown(c => Math.max(0, c-1)), 1000);\n return () => { clearInterval(arRef.current); clearInterval(cdRef.current); };\n }, [autoRefresh, activeEndpoint]);\n\n // Re-fetch when period changes (days selector), but only if there's an active endpoint.\n useEffect(() => {\n if (activeEndpoint) fetchData(activeEndpoint);\n }, [days]);\n\n // YouTube: load the user's channels for the selector dropdown.\n useEffect(() => {\n if (integrationName === 'youtube' && connected) loadYtChannels();\n }, [integrationName, connected]);\n\n const analyzeWithAI = () => {\n if (!data) return;\n window.dispatchEvent(new CustomEvent('analyze-data', { detail: { source: meta.label, endpoint: activeEndpoint, data } }));\n };\n\n if (!connected) {\n return h('div', {className:'glass-panel rounded-xl p-12 flex flex-col items-center justify-center gap-4 text-center'},\n h(BrandIcon, {slug: meta.icon, color: meta.color, size: 42}),\n h('div', {className:'text-[18px] font-bold text-on-surface mt-2'}, meta.label),\n h(Badge, {label:'Not Connected', variant:'muted'}),\n h('div', {className:'text-text-muted text-[13px] max-w-xs leading-relaxed mt-1'},\n 'Connect ' + meta.label + ' in Settings to start using this integration.'\n ),\n h(Btn, {onClick: onGoToSettings, variant:'primary', size:'md', className:'mt-2'},\n h(Icon, {name:'settings', size:15}), 'Go to Settings'\n )\n );\n }\n\n return h('div', {className:'flex flex-col gap-4'},\n h('div', {className:'flex items-center justify-between flex-wrap gap-3'},\n h('div', {className:'flex items-center gap-3'},\n h(BrandIcon, {slug: meta.icon, color: meta.color, size: 22}),\n h('div', null,\n h('div', {className:'font-bold text-[17px] text-on-surface'}, meta.label),\n h('div', {className:'flex items-center gap-2 mt-1'},\n h(Badge, {label:'Connected', variant:'success'}),\n lastFetched && h('span', {className:'text-[10px] text-text-muted'},\n 'Updated ' + Math.round((Date.now() - lastFetched)/1000) + 's ago'\n )\n )\n )\n ),\n h('div', {className:'flex gap-2 items-center flex-wrap'},\n h(DateRangePicker, {value: days, onChange: v => { setDays(v); if (activeEndpoint) fetchData(activeEndpoint, '', v); }}),\n data && !loading && h('button', {\n onClick: analyzeWithAI,\n className:'text-[12px] px-3 py-1.5 rounded-lg border border-primary/40 bg-primary/10 text-primary cursor-pointer flex items-center gap-1.5 font-medium hover:bg-primary/20 transition-all'\n }, h(Icon,{name:'bolt', size:14}), 'AI Insights'),\n // Reconnect (re-authorize OAuth in place — no delete/re-add). Updates the same\n // credential row via the callback. Outlook reconnect picks up newly-added scopes.\n (() => {\n const oauthUrl = integrationName === 'outlook' ? '/api/auth/microsoft'\n : integrationName === 'linkedin' ? '/api/auth/linkedin'\n : (integrationName === 'google' || GOOGLE_SHARED.includes(integrationName)) ? '/api/auth/google'\n : null;\n return oauthUrl ? h('button', {\n onClick: () => { window.location.href = oauthUrl; },\n title: 'Re-authorize this connection (keeps your data — no delete needed)',\n className:'text-[12px] px-3 py-1.5 rounded-lg border border-border-subtle bg-surface-container text-text-muted cursor-pointer flex items-center gap-1.5 font-medium hover:text-on-surface hover:border-outline/40 transition-all'\n }, h(Icon,{name:'autorenew', size:14}), 'Reconnect') : null;\n })(),\n activeEndpoint && h('label', {\n className:'flex items-center gap-2 cursor-pointer text-[12px] select-none ' + (autoRefresh?'text-secondary':'text-text-muted')\n },\n h(Toggle, {value: autoRefresh, onChange: setAutoRefresh}),\n autoRefresh ? \\`Auto (\\${countdown}s)\\` : 'Auto'\n ),\n h(Btn, {onClick: () => fetchData(activeEndpoint), variant:'ghost', size:'sm', disabled: !activeEndpoint || loading},\n loading ? h(Spinner, {size:13}) : h(Icon,{name:'refresh', size:14}), 'Refresh'\n )\n )\n ),\n\n integrationName === 'ahrefs' && h('div', {className:'flex items-center gap-2 px-3.5 py-2.5 glass-panel rounded-lg'},\n h(Icon, {name:'public', size:14, className:'text-text-muted'}),\n h('span', {className:'text-[12px] text-text-muted flex-shrink-0'}, 'Target:'),\n savedTarget && !targetEdit\n ? h('span', {className:'text-[13px] text-secondary font-medium flex-1'}, savedTarget)\n : h('input', {\n placeholder:'example.com', value: targetEdit,\n onChange: e => setTargetEdit(e.target.value),\n onKeyDown: e => e.key === 'Enter' && saveTarget(),\n className:'flex-1 bg-transparent border-none text-on-surface text-[12px] outline-none min-w-0'\n }),\n savedTarget && !targetEdit\n ? h('button', {onClick: () => setTargetEdit(savedTarget), className:'text-[10px] text-primary bg-transparent border-none cursor-pointer flex-shrink-0'}, 'change')\n : h('button', {onClick: saveTarget, disabled: savingTarget || !targetEdit.trim(),\n className:'text-[11px] text-secondary bg-secondary/10 border border-secondary/30 rounded px-2 py-0.5 cursor-pointer flex-shrink-0 disabled:opacity-50'\n }, savingTarget ? '-' : 'Save')\n ),\n\n integrationName === 'youtube' && h('div', {className:'flex items-center gap-2 px-3.5 py-2.5 glass-panel rounded-lg flex-wrap'},\n h(Icon, {name:'smart_display', size:14, className:'text-text-muted flex-shrink-0'}),\n h('span', {className:'text-[12px] text-text-muted flex-shrink-0'}, 'Channel:'),\n ytChannels.length\n ? h('select', {\n value: ytChannel,\n onChange: e => { const v = e.target.value; setYtChannel(v); if (activeEndpoint === 'analytics') fetchData('analytics', 'channelId=' + encodeURIComponent(v)); },\n className:'flex-1 min-w-0 bg-surface-container border border-border-subtle rounded px-2 py-1 text-[12px] text-on-surface outline-none cursor-pointer'\n }, ytChannels.map(c => h('option', {key:c.id, value:c.id}, c.title + (c.primary ? ' (Primary)' : ''))))\n : h('span', {className:'text-[12px] text-text-muted flex-1'}, 'No channels yet - click edit to add them.'),\n h('button', {onClick: () => { setYtEditing(!ytEditing); setYtEdit(ytChannels.map(c => c.id).join(', ')); }, className:'text-[10px] text-primary bg-transparent border-none cursor-pointer flex-shrink-0'}, ytEditing ? 'cancel' : 'edit'),\n ytEditing && h('div', {className:'flex items-center gap-2 w-full mt-1.5'},\n h('input', {placeholder:'@AIHive, @MiAgent, UC... (first = primary)', value: ytEdit, onChange: e => setYtEdit(e.target.value), onKeyDown: e => e.key === 'Enter' && saveYtChannels(),\n className:'flex-1 bg-surface-container border border-border-subtle rounded px-2 py-1 text-[12px] text-on-surface outline-none min-w-0'}),\n h('button', {onClick: saveYtChannels, className:'text-[11px] text-secondary bg-secondary/10 border border-secondary/30 rounded px-2 py-0.5 cursor-pointer flex-shrink-0'}, 'Save')\n )\n ),\n\n // -- READ ACTIONS -------------------------------------------------\n (() => {\n const reads = actions.filter(a => !a.method || a.method === 'GET');\n if (!reads.length) return null;\n return h('div', null,\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2'}, '- READ'),\n h('div', {className:'flex flex-wrap gap-2'},\n reads.map(a => h('button', {\n key: a.endpoint, onClick: () => triggerAction(a),\n className:'px-3.5 py-1.5 rounded-lg border text-[12px] font-medium cursor-pointer transition-all flex items-center gap-1.5 ' +\n (activeEndpoint === a.endpoint\n ? 'border-primary bg-primary/15 text-primary'\n : 'border-border-subtle bg-surface-container-lowest text-text-medium-contrast hover:border-outline/40 hover:text-on-surface')\n },\n loading && activeEndpoint === a.endpoint ? h(Spinner, {size:11}) : h(Icon, {name:'terminal', size:12}),\n a.label\n ))\n )\n );\n })(),\n\n // -- WRITE ACTIONS ------------------------------------------------\n (() => {\n const writes = actions.filter(a => a.method === 'POST');\n if (!writes.length) return null;\n return h('div', null,\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-secondary mb-2'}, '- WRITE / SEND'),\n h('div', {className:'flex flex-wrap gap-2'},\n writes.map(a => h('button', {\n key: a.endpoint, onClick: () => triggerAction(a),\n className:'px-3.5 py-1.5 rounded-lg border text-[12px] font-medium cursor-pointer transition-all flex items-center gap-1.5 ' +\n (activeEndpoint === a.endpoint\n ? 'border-secondary bg-secondary/15 text-secondary'\n : 'border-border-subtle bg-surface-container-lowest text-text-medium-contrast hover:border-secondary/40 hover:text-secondary')\n },\n h(Icon, {name: a.icon || 'edit_note', size:12}),\n a.label\n ))\n )\n );\n })(),\n\n // -- WRITE FORM PANEL (inline) ------------------------------------\n (() => {\n const activeAction = actions.find(a => a.endpoint === activeEndpoint);\n if (!activeAction || activeAction.method !== 'POST' || !activeAction.form) return null;\n return h('div', {className:'glass-panel rounded-xl p-lg space-y-md border-l-2 border-l-secondary'},\n h('div', {className:'flex items-center justify-between mb-1'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name: activeAction.icon || 'edit_note', size:18, className:'text-secondary'}),\n h('h4', {className:'text-[15px] font-bold text-on-surface'}, activeAction.label)\n ),\n h('button', {\n onClick: () => { setActiveEndpoint(null); setFormValues({}); setError(null); },\n className:'text-text-muted hover:text-on-surface text-[11px] font-semibold uppercase tracking-wider'\n }, 'CLOSE')\n ),\n h('div', {className:'space-y-3'},\n activeAction.form.map(f => f.type === 'textarea'\n ? h(Textarea, {\n key: f.key, label: f.label + (f.required ? ' *' : ''),\n value: formValues[f.key] || '',\n onChange: v => setFormValue(f.key, v),\n placeholder: f.placeholder, rows: f.rows || 4\n })\n : h(Input, {\n key: f.key, label: f.label + (f.required ? ' *' : ''), type: f.type || 'text',\n value: formValues[f.key] || '',\n onChange: v => setFormValue(f.key, v),\n placeholder: f.placeholder\n })\n )\n ),\n h('div', {className:'flex justify-end gap-2 pt-2'},\n h(Btn, {\n onClick: () => { setActiveEndpoint(null); setFormValues({}); setError(null); },\n variant:'ghost', size:'sm'\n }, 'Cancel'),\n h(Btn, {\n onClick: () => submitWrite(activeAction),\n variant:'secondary', size:'sm', disabled: submitting\n },\n submitting ? h(Spinner, {size:13}) : h(Icon, {name:'send', size:14}),\n submitting ? 'Sending-' : (activeAction.label.replace('Compose ','Send ').replace('Create ','Create '))\n )\n )\n );\n })(),\n\n // Google-specific error banners. Two distinct failure modes:\n // 1. Scope insufficient - user needs to re-authorize OAuth\n // 2. API not enabled in Cloud Console - user needs to click through to console\n error && GOOGLE_SHARED.includes(integrationName) && (() => {\n const errStr = String(error);\n const apiDisabledMatch = errStr.match(/Enable it by visiting (https:\\\\/\\\\/console\\\\.[^\\\\s\"]+)/);\n if (apiDisabledMatch) {\n return h('div', {className:'flex items-center justify-between gap-3 px-4 py-3 rounded-xl bg-error/10 border border-error/30 text-error flex-wrap'},\n h('div', {className:'flex items-start gap-2 text-[13px] flex-1 min-w-0'},\n h(Icon, {name:'cloud_off', size:18, className:'mt-0.5 flex-shrink-0'}),\n h('div', {className:'min-w-0'},\n h('div', {className:'font-bold mb-0.5'}, meta.label + ' API not enabled in your Google Cloud project'),\n h('div', {className:'text-[12px] text-on-surface-variant'},\n 'One-time setup: click the link to enable, wait ~30s, then retry.'\n )\n )\n ),\n h('a', {\n href: apiDisabledMatch[1], target:'_blank', rel:'noopener',\n className:'flex-shrink-0 text-[11px] font-bold uppercase tracking-widest bg-error text-on-error px-3 py-1.5 rounded-lg hover:opacity-90 inline-flex items-center gap-1'\n }, h(Icon, {name:'open_in_new', size:14}), 'Enable in Cloud Console')\n );\n }\n if (/insufficient.*scope|ACCESS_TOKEN_SCOPE_INSUFFICIENT|insufficient.*permission/i.test(errStr)) {\n return h('div', {className:'flex items-center justify-between gap-3 px-4 py-3 rounded-xl bg-tertiary/10 border border-tertiary/30 text-tertiary'},\n h('div', {className:'flex items-center gap-2 text-[13px]'},\n h(Icon, {name:'lock_open', size:18}),\n h('span', null, 'Your Google token doesn\\\\'t include the ' + meta.label + ' scope yet - re-authorize to grant it.')\n ),\n h('button', {\n onClick: () => { window.location.href = '/api/auth/google'; },\n className:'flex-shrink-0 text-[11px] font-bold uppercase tracking-widest bg-tertiary text-on-tertiary px-3 py-1.5 rounded-lg hover:opacity-90'\n }, 'Re-authorize Google')\n );\n }\n return null;\n })(),\n\n // Per-integration custom renderer (Gmail inbox, Drive grid, Calendar timeline, Sheets cards, Docs cards).\n // Falls back to generic DataDisplay for integrations without a custom renderer (Ahrefs, GSC, LinkedIn, Outlook, WordPress, YouTube, ProductHunt).\n (() => {\n const CustomRenderer = INTEGRATION_RENDERERS[integrationName];\n if (loading && activeEndpoint !== null) {\n return h(DataDisplay, {loading: true, integrationName});\n }\n if (error && !/insufficient.*scope|ACCESS_TOKEN_SCOPE_INSUFFICIENT|insufficient.*permission|has not been used in project/i.test(String(error))) {\n return h(DataDisplay, {error, integrationName, onFix: onGoToSettings});\n }\n // Success path: use custom renderer when available, otherwise generic table.\n if (CustomRenderer && data) return h(CustomRenderer, {data, endpoint: activeEndpoint});\n return h(DataDisplay, {\n data: normalizeData(integrationName, activeEndpoint, data),\n loading: false, error: null, integrationName, onFix: onGoToSettings\n });\n })(),\n\n integrationName === 'ga4' && ['kpi','traffic-over-time','user-acquisition'].includes(activeEndpoint) && error &&\n h('div', {className:'flex flex-col gap-2.5'},\n h('div', {className:'p-3 rounded-lg bg-error/5 border border-error/30 text-error text-[13px]'}, String(error)),\n h(Btn, {onClick: onGoToSettings, variant:'ghost', size:'sm'},\n h(Icon, {name:'settings', size:14}), 'Fix in Settings'\n )\n )\n );\n }\n\n\n // Real account menu — replaces the old hardcoded \"Director / Pro Account\" chip.\n // Fetches GET /api/auth/me on mount to show the actual signed-in user (name, email, tenant).\n // Clicking opens a dropdown with \"Log out\" and, ONLY for the platform master\n // (me.user.isPlatformAdmin or me.isPlatformAdmin), a \"Master Console\" item that routes to\n // the cross-tenant platform view via setActivePage('platform').\n function AccountMenu({setActivePage}) {\n const [me, setMe] = useState(null);\n const [open, setOpen] = useState(false);\n const [loggingOut, setLoggingOut] = useState(false);\n\n useEffect(() => {\n let alive = true;\n fetch('/api/auth/me', { headers: { 'Accept':'application/json' } })\n .then(r => r.ok ? r.json() : null)\n .then(d => { if (alive && d) setMe(d); })\n .catch(() => {});\n return () => { alive = false; };\n }, []);\n\n const user = (me && me.user) || {};\n const tenant = (me && me.tenant) || {};\n // The flag can live either on the user object or on the top-level /me response.\n const isPlatformAdmin = !!((user && user.isPlatformAdmin) || (me && me.isPlatformAdmin));\n const displayName = user.name || (user.email ? user.email.split('@')[0] : 'Account');\n const displayEmail = user.email || '';\n const tenantName = tenant.name || tenant.slug || '';\n const initial = (displayName || displayEmail || 'A').trim().charAt(0).toUpperCase();\n\n const logout = async () => {\n if (loggingOut) return;\n setLoggingOut(true);\n try { await fetch('/api/auth/logout', { method:'POST' }); } catch (e) {}\n window.location.reload();\n };\n\n const avatar = user.avatar_url\n ? h('img', {\n alt: displayName, src: user.avatar_url,\n className:'w-8 h-8 rounded-full border border-primary/30 object-cover flex-shrink-0'\n })\n : h('div', {\n className:'w-8 h-8 rounded-full border border-primary/30 bg-primary/15 text-primary flex items-center justify-center text-[13px] font-bold flex-shrink-0'\n }, initial);\n\n return h('div', {className:'relative'},\n h('button', {\n type:'button',\n onClick: () => setOpen(o => !o),\n title: displayEmail || 'Account',\n className:'w-full flex items-center gap-2.5 px-3 py-1.5 rounded-lg text-left hover:bg-surface-variant/20 transition-colors cursor-pointer'\n },\n avatar,\n h('div', {className:'flex flex-col min-w-0 flex-1'},\n h('span', {className:'text-[12px] font-bold text-on-surface leading-none truncate'}, displayName),\n h('span', {className:'text-[10px] text-text-muted mt-0.5 truncate'}, tenantName || displayEmail || 'Account')\n ),\n isPlatformAdmin && h('span', {\n title:'Platform master',\n className:'text-[8px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded bg-tertiary/15 text-tertiary border border-tertiary/30 flex-shrink-0'\n }, 'MASTER'),\n h(Icon, {name: open ? 'expand_less' : 'expand_more', size:16, className:'text-text-muted flex-shrink-0'})\n ),\n open && h(React.Fragment, null,\n h('div', {className:'fixed inset-0 z-[60]', onClick: () => setOpen(false)}),\n h('div', {className:'absolute bottom-full left-0 right-0 mb-2 z-[61] rounded-xl border border-border-subtle bg-surface-container shadow-xl overflow-hidden'},\n h('div', {className:'px-3.5 py-3 border-b border-border-subtle'},\n h('div', {className:'text-[12px] font-bold text-on-surface truncate'}, displayName),\n displayEmail && h('div', {className:'text-[10px] text-text-muted truncate mt-0.5'}, displayEmail),\n tenantName && h('div', {className:'text-[10px] text-text-muted truncate mt-0.5 flex items-center gap-1'},\n h(Icon, {name:'corporate_fare', size:11, className:'flex-shrink-0'}), tenantName)\n ),\n isPlatformAdmin && h('button', {\n type:'button',\n onClick: () => { setOpen(false); if (setActivePage) setActivePage('platform'); },\n className:'w-full text-left px-3.5 py-2.5 flex items-center gap-2.5 text-[12px] font-medium text-tertiary hover:bg-tertiary/10 transition-colors border-b border-border-subtle/50'\n },\n h(Icon, {name:'admin_panel_settings', size:16}),\n 'Master Console'\n ),\n h('button', {\n type:'button',\n onClick: logout,\n disabled: loggingOut,\n className:'w-full text-left px-3.5 py-2.5 flex items-center gap-2.5 text-[12px] font-medium text-on-surface-variant hover:bg-surface-variant/20 hover:text-on-surface transition-colors disabled:opacity-50'\n },\n loggingOut ? h(Spinner, {size:14}) : h(Icon, {name:'logout', size:16}),\n loggingOut ? 'Logging out…' : 'Log out'\n )\n )\n )\n );\n }\n\n\n function Sidebar({activePage, setActivePage, integrations, agents, onNewCampaign, hotLeads}) {\n // SINGLE global ticker for the whole app shell. Lives here because Sidebar mounts once with\n // the shell and never unmounts. Every 6s it dispatches the shared 'nexus:tick' window event;\n // any view that wants fast auto-refresh listens to 'nexus:tick' instead of its own setInterval.\n // Guarded by a window flag so even an accidental remount can never create a second ticker.\n useEffect(function () {\n if (window.__nexusTickStarted) return undefined;\n window.__nexusTickStarted = true;\n var t = setInterval(function () { window.dispatchEvent(new Event('nexus:tick')); }, 6000);\n return function () { clearInterval(t); window.__nexusTickStarted = false; };\n }, []);\n // QA fix: removed the always-on green \"connected\" dots next to Strategy/Signals - they\n // duplicated the per-integration status already shown inside each workspace page (the\n // \"blue dot\" the user flagged was this static indicator). Real signal-of-attention now\n // lives only in the IntelligenceBadge (Command) and hot-leads badge (Signals).\n // Layered IA — workflow order Plan → Run → Measure. Home pinned top, Settings pinned bottom.\n const homeItem = { id:'dashboard', icon:'space_dashboard', label:'Command Center' };\n // IA matches the product loop: Plan → Run (execute) → Measure. Workspace + Knowledge are\n // SEPARATE supporting areas (not part of Measure). Approvals = human-in-the-loop queue.\n const navGroups = [\n { title:'Plan', items: [\n { id:'objectives', icon:'flag', label:'Objectives' },\n { id:'experiments', icon:'science', label:'Experiments' },\n ]},\n { title:'Run', items: [\n { id:'marketing', icon:'insights', label:'Marketing' },\n { id:'sales', icon:'contact_mail', label:'Sales', badge: hotLeads && hotLeads > 0 ? hotLeads : null, badgeKind:'error' },\n { id:'campaigns', icon:'campaign', label:'Campaigns' },\n { id:'tasks', icon:'checklist', label:'Tasks' },\n { id:'agents', icon:'bolt', label:'Agents', badge: agents.length || null },\n { id:'approvals', icon:'task_alt', label:'Approvals' },\n ]},\n { title:'Measure', items: [\n { id:'calendar', icon:'calendar_month', label:'Calendar' },\n { id:'analytics', icon:'monitoring', label:'Analytics' },\n ]},\n { title:'Workspace', items: [\n { id:'workspace', icon:'diversity_3', label:'Workspace' },\n ]},\n { title:'Knowledge', items: [\n { id:'knowledge', icon:'hub', label:'Knowledge' },\n { id:'playbooks', icon:'menu_book', label:'Playbooks' },\n ]},\n ];\n const settingsItem = { id:'settings', icon:'settings', label:'Settings' };\n\n const navBtn = (item) => h('button', {\n key: item.id,\n // One-page app: nav switches the view IN PLACE (setActivePage) and the URL is kept in sync\n // by the shell (history.pushState on activePage change). Only 'external' items (the per-campaign\n // World) open in a new tab — the World is the sole new-tab destination.\n onClick: () => { if (item.external) { window.open(item.external, '_blank'); } else { setActivePage(item.id); } },\n className: 'flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-[13px] font-medium text-left ' +\n (activePage === item.id\n ? 'text-primary bg-primary-container/10 border-r-2 border-primary'\n : 'text-on-surface-variant hover:bg-surface-variant/20 hover:text-on-surface')\n },\n h(Icon, {name: item.icon, size: 20}),\n h('span', {className:'flex-1'}, item.label),\n item.id === 'dashboard' && h(IntelligenceBadge, {onClick: e => { e.stopPropagation(); setActivePage('dashboard'); }}),\n item.badge != null && h('span', {\n className: (item.badgeKind === 'error'\n ? 'bg-error/15 text-error border border-error/30 pulse-dot'\n : 'bg-primary text-on-primary') + ' text-[10px] font-bold px-1.5 py-0.5 rounded-full min-w-[20px] text-center'\n }, item.badge)\n );\n const sectionHeader = (title) => h('div', {\n className:'px-3 pt-3 pb-1 text-[10px] font-bold tracking-widest uppercase text-text-muted'\n }, title);\n\n return h('aside', {\n className:'flex flex-col h-screen py-gutter px-md gap-lg glass-panel border-r border-border-subtle shadow-2xl w-64 flex-shrink-0 z-50',\n style:{borderTop:0,borderBottom:0,borderRight:'1px solid rgba(255,255,255,0.08)'}\n },\n h('div', {className:'flex items-center gap-sm px-xs'},\n h('div', {className:'w-9 h-9 bg-primary rounded-lg flex items-center justify-center shadow-lg shadow-primary/30'},\n h(Icon, {name:'hub', size:22, className:'text-on-primary'})\n ),\n h('div', {className:'flex flex-col'},\n h('span', {className:'text-[16px] text-primary font-extrabold tracking-tight leading-none'}, 'Nexus AI'),\n h('span', {className:'text-[10px] text-text-muted font-semibold tracking-widest uppercase mt-0.5'}, 'Command Center')\n ),\n // Live indicator: pulsing green dot + \"Live\" — signals the global 6s nexus:tick is running.\n h('div', {\n className:'ml-auto flex items-center gap-1.5',\n title:'Live - data auto-refreshes every 6s'\n },\n h('span', {\n className:'pulse-dot w-2 h-2 rounded-full',\n style:{backgroundColor:'#22c55e', boxShadow:'0 0 6px #22c55e'}\n }),\n h('span', {className:'text-[10px] font-bold tracking-widest uppercase', style:{color:'#22c55e'}}, 'Live')\n )\n ),\n\n h('button', {\n onClick: onNewCampaign,\n className:'mx-xs bg-primary text-on-primary font-semibold py-2.5 px-md rounded-lg flex items-center justify-center gap-2 hover:opacity-90 transition-all active:scale-[0.98] text-[13px] shadow-lg shadow-primary/20'\n },\n h(Icon, {name:'add', size:18}), 'New Campaign'\n ),\n\n h('nav', {className:'flex-1 flex flex-col gap-0.5 overflow-y-auto'},\n navBtn(homeItem),\n navGroups.map(g => h(React.Fragment, {key: g.title}, sectionHeader(g.title), ...g.items.map(navBtn)))\n ),\n\n h('div', {className:'mt-auto flex flex-col gap-2 border-t border-border-subtle pt-md'},\n // Agent World — discoverable entry to the /world 3D view. Reuses navBtn's 'external'\n // path so it opens in a new tab (window.open('/world','_blank')) without switching the\n // in-place activePage. This is the sole new-tab destination in the bottom nav section.\n navBtn({ id:'world', icon:'deployed_code', label:'Agent World', external:'/world' }),\n navBtn(settingsItem),\n h('button', {\n onClick: () => {\n // Wire Support to open AI chat with a help-context question (real action).\n window.dispatchEvent(new CustomEvent('investigate-intelligence', {\n detail: { action_payload: { question: 'How do I use Nexus AI? Walk me through the workflow: start at the Command Center, then Plan (Objectives, Experiments, Calendar), Run (Campaigns, Agents, Marketing, Sales), and Measure (Analytics, Knowledge, Workspace). Also cover Settings and the Team Hub co-working tools.' } }\n }));\n },\n className:'flex items-center gap-3 px-3 py-1.5 rounded-lg text-on-surface-variant hover:bg-surface-variant/20 hover:text-on-surface transition-colors text-[13px] text-left'\n },\n h(Icon, {name:'help', size:18}), 'Support'\n ),\n h(AccountMenu, {setActivePage})\n )\n );\n }\n\n\n // Real notification center: polls pending approvals (action_queue status=prepared), shows a\n // live count badge, and a dropdown that deep-links into the Approvals inbox.\n function NotificationBell({setActivePage}) {\n const [open, setOpen] = useState(false);\n const [items, setItems] = useState([]);\n useEffect(() => {\n let alive = true;\n const load = () => fetch('/api/actions?status=prepared')\n .then(r => r.ok ? r.json() : [])\n .then(d => { if (alive) setItems(Array.isArray(d) ? d : ((d && d.actions) || [])); })\n .catch(() => {});\n load();\n // Fast auto-refresh: ride the shared global 6s 'nexus:tick' instead of a private 60s timer,\n // so the pending-approvals badge updates promptly. No second setInterval here.\n window.addEventListener('nexus:tick', load);\n return () => { alive = false; window.removeEventListener('nexus:tick', load); };\n }, []);\n const count = items.length;\n const go = () => { setOpen(false); setActivePage('approvals'); };\n return h('div', {className:'relative'},\n h('button', {\n onClick: () => setOpen(o => !o), type:'button',\n title: count ? (count + ' pending approval' + (count > 1 ? 's' : '')) : 'Notifications',\n className:'relative p-1 rounded transition-colors cursor-pointer ' + (count ? 'text-primary' : 'text-on-surface-variant hover:text-primary')\n },\n h(Icon, {name:'notifications', size:20}),\n count > 0 && h('span', {\n className:'absolute -top-0.5 -right-0.5 min-w-[16px] h-[16px] px-1 rounded-full bg-error text-white text-[10px] font-bold flex items-center justify-center'\n }, count > 9 ? '9+' : String(count))\n ),\n open && h(React.Fragment, null,\n h('div', {className:'fixed inset-0 z-[60]', onClick: () => setOpen(false)}),\n h('div', {className:'absolute right-0 mt-2 w-80 max-h-[420px] overflow-auto z-[61] rounded-xl border border-border-subtle bg-surface-container shadow-xl'},\n h('div', {className:'px-4 py-3 border-b border-border-subtle flex items-center justify-between sticky top-0 bg-surface-container'},\n h('span', {className:'text-[13px] font-semibold text-on-surface'}, 'Notifications'),\n h('span', {className:'text-[11px] text-text-muted'}, count + ' pending')\n ),\n count === 0\n ? h('div', {className:'px-4 py-6 text-[12px] text-text-muted text-center'}, 'No pending action items')\n : items.slice(0, 12).map(a => h('button', {\n key: a.id, type:'button', onClick: go,\n className:'w-full text-left px-4 py-2.5 border-b border-border-subtle/50 hover:bg-surface-container-high transition-colors flex items-start gap-2'\n },\n h(Icon, {name:'pending_actions', size:16, className:'text-secondary mt-0.5'}),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] text-on-surface truncate'}, a.title || ((a.integration || '') + ' · ' + (a.endpoint || ''))),\n h('div', {className:'text-[10px] text-text-muted truncate'}, (a.integration || 'action') + ' · awaiting approval')\n )\n )),\n h('button', {\n type:'button', onClick: go,\n className:'w-full px-4 py-2.5 text-[12px] font-medium text-primary hover:bg-surface-container-high transition-colors'\n }, 'View all in Approvals →')\n )\n )\n );\n }\n\n function TopNav({title, activePage, setActivePage, onChatToggle, chatOpen}) {\n const subNav = [\n { id:'dashboard', label:'Command' },\n { id:'campaigns', label:'Campaigns' },\n { id:'marketing', label:'Strategy' },\n ];\n // Global system search: no search index — Enter routes to the dashboard CommandCenter and\n // seeds its command box with the typed text (reuses the established window.__nexus seed channel\n // + a 'nexus:command-seed' event so an already-mounted CommandCenter picks it up immediately).\n const [q, setQ] = useState('');\n const runGlobalSearch = () => {\n const term = q.trim();\n if (!term) return;\n try { window.__nexus = window.__nexus || {}; window.__nexus.commandSeed = term; } catch (e) {}\n setActivePage('dashboard');\n window.dispatchEvent(new CustomEvent('nexus:command-seed', { detail: { q: term } }));\n setQ('');\n };\n return h('header', {\n className:'flex justify-between items-center w-full px-lg h-16 sticky top-0 z-40 bg-surface-core/80 border-b border-border-subtle backdrop-blur-md flex-shrink-0'\n },\n h('div', {className:'flex items-center gap-xl min-w-0'},\n h('h1', {className:'text-[22px] font-black text-on-surface tracking-tighter truncate'}, title || 'Nexus Command'),\n h('div', {className:'hidden lg:flex items-center gap-lg'},\n subNav.map(n => h('a', {\n key: n.id, href:'#',\n onClick: e => { e.preventDefault(); setActivePage(n.id); },\n className:'text-[11px] font-semibold uppercase tracking-widest transition-all ' +\n (activePage === n.id\n ? 'text-secondary border-b-2 border-secondary pb-1'\n : 'text-on-surface-variant hover:text-primary')\n }, n.label))\n )\n ),\n\n h('div', {className:'flex-1 max-w-md mx-xl hidden md:block'},\n h('div', {className:'relative group'},\n h('span', {\n className:'absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-outline pointer-events-none',\n style:{fontSize:'18px'}\n }, 'search'),\n h('input', {\n type:'text', placeholder:'Global system search...',\n value: q,\n onChange: e => setQ(e.target.value),\n onKeyDown: e => { if (e.key === 'Enter') { e.preventDefault(); runGlobalSearch(); } },\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg pl-10 pr-4 py-2 text-[13px] focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary transition-all placeholder:text-text-muted'\n })\n )\n ),\n\n h('div', {className:'flex items-center gap-md'},\n h('div', {className:'hidden sm:flex items-center gap-1 pr-md border-r border-border-subtle'},\n // Real notification center (pending approvals + count badge + dropdown).\n h(NotificationBell, {setActivePage}),\n // Bolt - jump to Automations / Agent Studio.\n h('button', {\n onClick: () => setActivePage('agents'), type:'button',\n title:'Agent Studio',\n className:'p-1 rounded transition-colors cursor-pointer text-on-surface-variant hover:text-primary'\n }, h(Icon, {name:'bolt', size:20})),\n h('button', {\n onClick: onChatToggle, type:'button',\n title: chatOpen ? 'Close AI Chat' : 'Open AI Chat',\n className:'p-1 rounded transition-colors cursor-pointer ' + (chatOpen?'text-secondary':'text-on-surface-variant hover:text-primary')\n }, h(Icon, {name:'smart_toy', size:20}))\n ),\n h('button', {\n onClick: onChatToggle,\n className:'bg-secondary text-on-secondary font-semibold px-4 py-2 rounded-lg hover:opacity-90 active:opacity-80 transition-all text-[13px] flex items-center gap-1.5'\n }, h(Icon, {name:'rocket_launch', size:16}), 'Deploy AI')\n )\n );\n }\n\n\n function PageHeader({title, subtitle, action=null}) {\n return h('div', {className:'flex justify-between items-end mb-xl flex-wrap gap-4'},\n h('div', null,\n h('h2', {className:'text-[28px] sm:text-[32px] font-extrabold text-text-high-contrast tracking-tight leading-tight'}, title),\n subtitle && h('p', {className:'text-text-medium-contrast text-[14px] mt-1 max-w-2xl'}, subtitle)\n ),\n action\n );\n }\n\n // Expose shared deps to the dynamically-imported pages + intelligence modules.\n // Page components read these via window.__nexus to avoid duplicating large config + components.\n window.__nexus = {\n INTEGRATIONS, INTEGRATION_META, INTEGRATION_ACTIONS, INTEGRATION_FIELDS, ALL_TOOLS, GOOGLE_SHARED,\n IntegrationPanel, PageHeader, parseTools,\n Icon, Spinner, BrandIcon, Btn, MetricCard, Input, Toggle, SectionHeader,\n FunnelFlowChart, PipelineVelocityChart, marked,\n };\n\n ` + getAppJS2();\n}\n",[367],"d78af2e6-5d9b-11f1-8267-1607ee4eb77e","frontend_intelligence.ts","d79afa52-580e-11f1-9308-ee650bb23af1",756,["D",1780305934253],"// Phase 1 Advanced: Unified Intelligence Layer frontend components.\n// UnifiedFunnelView + IntelligenceFeed + IntelligenceBadge + OutreachDrawer.\n// Served at /api/app-intelligence so frontend_pages.ts stays under val.town's 80K limit.\n//\n// Shared deps come from window.__nexus (set by frontend_js.ts).\n\nexport function getIntelligenceJS(): string {\n return `\nimport React, { useState, useEffect, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// B4: Auto-Sync Interval - read from window.__nexus.autoSyncMs (set on boot from /api/config\n// and updated when Settings page saves a new interval). Components subscribe via\n// useAutoSyncMs() so changes take effect without a reload.\nfunction useAutoSyncMs(defaultMs) {\n const [ms, setMs] = useState(() => (window.__nexus && window.__nexus.autoSyncMs) || defaultMs);\n useEffect(() => {\n const handler = (e) => setMs((e?.detail?.ms) || (window.__nexus && window.__nexus.autoSyncMs) || defaultMs);\n window.addEventListener('nexus:auto-sync-change', handler);\n return () => window.removeEventListener('nexus:auto-sync-change', handler);\n }, [defaultMs]);\n return ms;\n}\n\nconst STAGE_COLORS = {\n TOFU: {bg:'#c0c1ff', border:'#c0c1ff', text:'text-primary', label:'Awareness & Reach'},\n MOFU: {bg:'#d0bcff', border:'#d0bcff', text:'text-tertiary', label:'Engagement & Consideration'},\n BOFU: {bg:'#4edea3', border:'#4edea3', text:'text-secondary', label:'Conversion & Revenue'},\n};\nconst healthColor = (s) => s > 75 ? 'text-secondary' : s >= 50 ? 'text-tertiary' : 'text-error';\nconst healthDot = (s) => s > 75 ? 'bg-secondary' : s >= 50 ? 'bg-tertiary' : 'bg-error';\nconst fmtMetric = (v, unit) => {\n if (typeof v !== 'number') return '-';\n const n = Math.abs(v);\n if (n >= 1e6) return (v/1e6).toFixed(1)+'M' + (unit?' '+unit:'');\n if (n >= 1e3) return (v/1e3).toFixed(1)+'k' + (unit?' '+unit:'');\n if (Number.isInteger(v)) return v + (unit?' '+unit:'');\n return v.toFixed(1) + (unit?' '+unit:'');\n};\n\n// --- UnifiedFunnelView ------------------------------------------------------\n// 3-column TOFU/MOFU/BOFU panel with health scores, integration chips, bottleneck + signal flow.\nexport function UnifiedFunnelView({setActivePage}) {\n const {Icon, FunnelFlowChart} = N();\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [days, setDays] = useState(30);\n\n const load = useCallback(async (force = false, daysOverride) => {\n setLoading(true);\n const d_ = daysOverride !== undefined ? daysOverride : days;\n try {\n const params = new URLSearchParams({ days: String(d_) });\n if (force) params.set('force', '1');\n const r = await fetch('/api/intelligence/funnel-summary?' + params.toString());\n const d = await r.json();\n setData(d); setError(null);\n } catch (e) { setError(e.message); }\n finally { setLoading(false); }\n }, [days]);\n const autoMs = useAutoSyncMs(60000);\n useEffect(() => {\n load();\n const onTick = () => load(false);\n const iv = setInterval(onTick, autoMs);\n window.addEventListener('nexus:tick', onTick);\n return () => { clearInterval(iv); window.removeEventListener('nexus:tick', onTick); };\n }, [load, autoMs]);\n\n return h('div', {className:'glass-panel rounded-xl overflow-hidden'},\n // Header\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-center flex-wrap gap-2'},\n h('div', {className:'flex items-center gap-3'},\n h(Icon, {name:'insights', size:22, filled:true, className:'text-primary'}),\n h('h3', {className:'text-[18px] font-bold tracking-tight'}, 'Acquisition Intelligence'),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest bg-primary/10 text-primary px-2 py-0.5 rounded border border-primary/20'},\n data ? data.total_integrations_connected + ' SOURCES' : 'LOADING'\n )\n ),\n // A1: overall_health weighted composite (TOFU 0.25 - MOFU 0.40 - BOFU 0.35) shown top-right\n h('div', {className:'flex items-center gap-3'},\n data && typeof data.overall_health === 'number' && h('div', {className:'flex items-center gap-2 px-3 py-1.5 rounded-lg border border-border-subtle bg-surface-container-lowest', title:'TOFU 0.25 - MOFU 0.40 - BOFU 0.35 weighted composite'},\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Overall'),\n h('span', {className:'text-[16px] font-extrabold ' + healthColor(data.overall_health), style:{fontVariantNumeric:'tabular-nums'}}, data.overall_health + '%')\n ),\n // QA fix: dropped the \"Raw JSON\" open-in-new link - it sat next to Refresh and\n // confused users. Devs can still hit /api/intelligence/funnel-summary directly.\n h('div', {className:'flex gap-2 items-center'},\n h('div', {className:'flex bg-surface-container-lowest rounded-lg p-0.5 border border-border-subtle'},\n [7, 30, 90].map(d => h('button', {\n key: d, onClick: () => { setDays(d); load(false, d); },\n className: 'px-2.5 py-0.5 rounded-md text-[11px] font-bold uppercase tracking-wider transition-all ' +\n (days === d ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface-variant')\n }, d + 'd'))\n ),\n h('button', {\n onClick: () => load(true),\n className:'p-2 rounded-lg bg-surface-container-high text-on-surface-variant hover:text-on-surface transition-colors',\n title:'Refresh'\n }, h(Icon, {name: loading ? 'sync' : 'refresh', size:18, className: loading?'spin':''}))\n )\n )\n ),\n\n // Loading skeleton\n loading && !data && h('div', {className:'p-lg'},\n h('div', {className:'grid grid-cols-1 md:grid-cols-3 gap-md'},\n [0,1,2].map(i => h('div', {key:i, className:'h-48 rounded-lg', style:{background:'linear-gradient(90deg,#1c1b1e 25%,#2a2a2d 50%,#1c1b1e 75%)', backgroundSize:'200% 100%', animation:'shimmer 1.5s infinite'}}))\n )\n ),\n\n error && h('div', {className:'p-lg text-error text-[13px]'}, 'Intelligence layer unavailable: ' + error),\n\n // Stages\n data && h('div', {className:'p-lg'},\n h('div', {className:'grid grid-cols-1 md:grid-cols-3 gap-md mb-md'},\n data.stages.map(s => {\n const c = STAGE_COLORS[s.stage];\n const isBottleneck = data.bottleneck?.stage === s.stage;\n return h('div', {key: s.stage,\n className:'p-md rounded-lg border ' + (isBottleneck ? 'border-tertiary/40 bg-tertiary/5' : 'border-border-subtle bg-surface-container-lowest')\n },\n h('div', {className:'flex items-center justify-between mb-2'},\n h('div', null,\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest ' + c.text}, s.stage),\n h('div', {className:'text-[10px] text-text-muted mt-0.5'}, c.label)\n ),\n isBottleneck && h('span', {className:'inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-widest bg-tertiary/10 text-tertiary px-1.5 py-0.5 rounded'},\n h(Icon,{name:'warning', size:10}), 'BOTTLENECK'\n )\n ),\n // Metric chips\n h('div', {className:'space-y-1.5 mb-3 min-h-[120px]'},\n s.metrics.length === 0\n ? h('div', {className:'text-[11px] text-text-muted italic py-4 text-center'},\n 'No data - ', h('button', {onClick: () => setActivePage('settings'), className:'text-primary hover:underline'}, 'connect integration'), ' to populate.'\n )\n : s.metrics.slice(0, 5).map(m => {\n // A2: TOFU uses 30d delta (SEO/branding compound slowly); MOFU/BOFU use 7d.\n const useThirtyDay = s.stage === 'TOFU';\n const delta = useThirtyDay\n ? (m.delta_30d ?? m.delta_7d ?? m.delta_pct)\n : (m.delta_7d ?? m.delta_pct);\n const deltaLabel = useThirtyDay && m.delta_30d != null ? '30d' : m.delta_7d != null ? '7d' : '';\n const up = delta != null && delta > 0;\n return h('div', {key: m.integration+'_'+m.metric, className:'flex items-center justify-between text-[12px]'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className:'text-[10px] uppercase tracking-wider text-text-muted font-mono-data flex-shrink-0'}, m.integration),\n h('span', {className:'text-on-surface-variant truncate'}, m.metric.replace(/_/g,' '))\n ),\n h('div', {className:'flex items-center gap-1.5 flex-shrink-0'},\n h('span', {className:'font-mono-data text-on-surface font-bold', style:{fontVariantNumeric:'tabular-nums'}}, fmtMetric(m.value, m.unit)),\n delta != null && h('span', {\n className:'text-[10px] font-bold ' + (up ? 'text-secondary' : 'text-error'),\n title: deltaLabel ? ('vs ' + deltaLabel + ' ago') : 'vs baseline'\n }, (up?'-':'-') + Math.abs(delta).toFixed(0) + '%' + (deltaLabel ? ' ' + deltaLabel : ''))\n )\n );\n })\n ),\n // Health bar\n h('div', {className:'pt-2 border-t border-border-subtle'},\n h('div', {className:'flex justify-between items-center mb-1'},\n h('span', {className:'text-[10px] uppercase tracking-widest text-text-muted'}, 'Stage Health'),\n h('span', {className:'text-[13px] font-extrabold ' + healthColor(s.health_score), style:{fontVariantNumeric:'tabular-nums'}}, s.health_score + '%')\n ),\n h('div', {className:'h-1.5 w-full bg-surface-container rounded-full overflow-hidden'},\n h('div', {className:'h-full transition-all', style:{width: s.health_score + '%', background: c.bg}})\n ),\n h('p', {className:'text-[10px] text-text-muted mt-1.5'}, s.diagnosis)\n )\n );\n })\n ),\n\n // Funnel flow chart\n FunnelFlowChart && data.stages.some(s => s.metrics.length > 0) &&\n h('div', {className:'mt-md p-md bg-surface-container-lowest rounded-lg border border-border-subtle'},\n h(FunnelFlowChart, {stages: data.stages})\n ),\n\n // Signal Flow strip\n data.bottleneck && h('div', {className:'mt-md p-3 rounded-lg bg-surface-container/40 border border-border-subtle flex items-center gap-3 flex-wrap'},\n h(Icon, {name:'route', size:16, className:'text-primary flex-shrink-0'}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'SIGNAL FLOW'),\n h('div', {className:'flex items-center gap-1 text-[12px] flex-wrap font-mono-data'},\n ['TOFU','MOFU','BOFU'].map((stage, i) => h(React.Fragment, {key:stage},\n h('span', {className: data.bottleneck.stage === stage ? 'text-tertiary font-bold' : 'text-on-surface-variant'}, stage),\n i < 2 && h('span', {className:'text-text-muted mx-1'}, '-')\n )),\n h('span', {className:'ml-2 text-text-muted'}, '- top bottleneck: '),\n h('span', {className:'text-tertiary font-bold'}, data.bottleneck.stage + ' - ' + data.bottleneck.reason.split('.')[0])\n )\n )\n )\n );\n}\n\n// --- IntelligenceFeed -------------------------------------------------------\n// Vertical card stack with colored left borders, metric chips, Investigate CTA.\nconst CARD_STYLE = {\n win: {border:'border-l-secondary', text:'text-secondary', bg:'bg-secondary/5', icon:'trending_up'},\n risk: {border:'border-l-error', text:'text-error', bg:'bg-error/5', icon:'warning'},\n opportunity: {border:'border-l-tertiary', text:'text-tertiary', bg:'bg-tertiary/5', icon:'lightbulb'},\n correlation: {border:'border-l-primary', text:'text-primary', bg:'bg-primary/5', icon:'link'},\n anomaly: {border:'border-l-tertiary', text:'text-tertiary', bg:'bg-tertiary/5', icon:'show_chart'},\n};\nconst PRIORITY_BADGE = {critical:'bg-error/15 text-error border-error/30', high:'bg-tertiary/15 text-tertiary border-tertiary/30', medium:'bg-primary/15 text-primary border-primary/30'};\n\nexport function IntelligenceFeed({onInvestigate}) {\n const {Icon, Spinner} = N();\n const [cards, setCards] = useState([]);\n const [loading, setLoading] = useState(true);\n\n const load = useCallback(async () => {\n setLoading(true);\n try {\n const r = await fetch('/api/intelligence/feed');\n const d = await r.json();\n setCards(Array.isArray(d) ? d : []);\n } catch {} finally { setLoading(false); }\n }, []);\n const autoMs = useAutoSyncMs(60000);\n useEffect(() => {\n load();\n const iv = setInterval(load, autoMs);\n window.addEventListener('nexus:tick', load);\n return () => { clearInterval(iv); window.removeEventListener('nexus:tick', load); };\n }, [load, autoMs]);\n\n return h('div', {className:'glass-panel rounded-xl flex flex-col h-[480px]'},\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-center'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'auto_awesome', size:20, filled:true, className:'text-primary'}),\n h('h3', {className:'text-[18px] font-bold tracking-tight'}, 'Intelligence Feed'),\n ),\n h('span', {className:'inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-secondary/10 text-secondary border border-secondary/20 pulse-dot'}, 'LIVE')\n ),\n h('div', {className:'flex-1 overflow-y-auto p-md space-y-md'},\n loading && cards.length === 0 && h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:20})),\n cards.map((c, i) => {\n const style = CARD_STYLE[c.type] || CARD_STYLE.correlation;\n return h('div', {\n key: i,\n className:'p-md rounded-lg border-l-2 ' + style.border + ' ' + style.bg + ' bg-surface-container-lowest border-t border-r border-b border-border-subtle'\n },\n h('div', {className:'flex items-start justify-between gap-2 mb-1.5'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h(Icon, {name: style.icon, size:16, className: style.text + ' flex-shrink-0'}),\n h('h4', {className:'text-[13px] font-bold text-on-surface truncate'}, c.title)\n ),\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border flex-shrink-0 ' + (PRIORITY_BADGE[c.priority]||PRIORITY_BADGE.medium)}, c.priority)\n ),\n h('p', {className:'text-[12px] text-on-surface-variant leading-relaxed mb-2'}, c.body),\n c.metrics?.length > 0 && h('div', {className:'flex flex-wrap gap-1 mb-2'},\n c.metrics.map((m, j) => h('span', {key: j, className:'px-1.5 py-0.5 text-[10px] font-mono-data text-text-muted bg-surface-container-high rounded'}, m))\n ),\n h('div', {className:'flex items-center justify-between pt-2 border-t border-border-subtle/50'},\n h('div', {className:'flex items-center gap-2 text-[10px] text-text-muted'},\n h('span', null, c.agent_name),\n h('span', null, '-'),\n c.funnel_stages?.length > 0 && h('span', {className:'font-mono-data'},\n c.funnel_stages.join(' - ')\n )\n ),\n h('button', {\n onClick: () => onInvestigate && onInvestigate(c),\n className:'text-[10px] font-bold uppercase tracking-widest ' + style.text + ' hover:underline'\n }, c.action_label || 'Investigate -')\n )\n );\n })\n )\n );\n}\n\n// --- IntelligenceBadge (Sidebar nav) ----------------------------------------\nexport function IntelligenceBadge({onClick}) {\n const [count, setCount] = useState(0);\n const [critical, setCritical] = useState(false);\n useEffect(() => {\n let mounted = true;\n const load = async () => {\n try {\n const [c, f] = await Promise.all([\n fetch('/api/intelligence/correlations').then(r => r.json()).catch(() => []),\n fetch('/api/intelligence/feed').then(r => r.json()).catch(() => []),\n ]);\n if (!mounted) return;\n setCount(Array.isArray(c) ? c.length : 0);\n setCritical(Array.isArray(f) && f.some(x => x.priority === 'critical'));\n } catch {}\n };\n load();\n const ms = (window.__nexus && window.__nexus.autoSyncMs) || 60000;\n const iv = setInterval(load, ms);\n const onChange = (e) => { clearInterval(iv); };\n window.addEventListener('nexus:auto-sync-change', onChange);\n window.addEventListener('nexus:tick', load);\n return () => { mounted = false; clearInterval(iv); window.removeEventListener('nexus:auto-sync-change', onChange); window.removeEventListener('nexus:tick', load); };\n }, []);\n if (count === 0) return null;\n return h('span', {\n onClick,\n className:'inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-widest cursor-pointer ' +\n (critical ? 'bg-error/15 text-error border border-error/30 pulse-dot' : 'bg-primary/15 text-primary border border-primary/30'),\n title: count + ' signal' + (count===1?'':'s') + (critical ? ' - critical priority' : '')\n }, count, h('span', {className:'opacity-70'}, 'sig'));\n}\n\n// --- OutreachDrawer (Signals slide-out) -------------------------------------\n// Pre-populated with LLM-drafted outreach using current Signals context.\n// Send Now / Schedule Delivery now make REAL POST calls to Gmail send + Calendar invite.\nexport function OutreachDrawer({open, onClose, prospect, onSend}) {\n const {Icon, Spinner, Btn} = N();\n const [sending, setSending] = useState({linkedin:false, email:false});\n\n // Real send via Gmail API. Returns parsed response so the caller can toast success/failure.\n async function sendEmailNow({to, subject, body}) {\n if (!to || !subject) throw new Error('Recipient + subject required');\n const r = await fetch('/api/integrations/gmail/data?endpoint=send', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({to, subject, body})\n });\n const d = await r.json();\n if (!r.ok) throw new Error(d?.error?.message || d?.error || ('HTTP ' + r.status));\n return d;\n }\n // Real LinkedIn-via-Outlook fallback: most LinkedIn write APIs require Marketing Developer\n // approval. We save the draft to Gmail Drafts as a fallback so the user has a real artifact.\n async function saveLinkedInAsDraft(content) {\n const r = await fetch('/api/integrations/gmail/data?endpoint=createDraft', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n to: prospect?.email || '',\n subject: '[LinkedIn InMail Draft] ' + (prospect?.name || prospect?.company || 'Outreach'),\n body: content\n })\n });\n const d = await r.json();\n if (!r.ok) throw new Error(d?.error?.message || d?.error || ('HTTP ' + r.status));\n return d;\n }\n const [linkedInDraft, setLinkedInDraft] = useState('');\n const [emailDraft, setEmailDraft] = useState({subject:'', body:''});\n const [loading, setLoading] = useState(false);\n\n const generateDrafts = useCallback(async () => {\n if (!prospect) return;\n setLoading(true);\n const ctx = prospect.name + (prospect.company ? ' at ' + prospect.company : '') +\n '. Signal: ' + (prospect.signal || 'recent inbound') + '. Subject/role context: ' + (prospect.role || '');\n try {\n const r1 = await fetch('/api/chat', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n message: 'Draft a SHORT (under 80 words) personalized LinkedIn InMail for: ' + ctx + '. No greeting fluff. End with a one-line ask.',\n workspace: 'sales'\n })\n });\n const d1 = await r1.json();\n setLinkedInDraft(d1.response || '');\n const r2 = await fetch('/api/chat', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n message: 'Draft a sales email for: ' + ctx + '. Return JSON {\"subject\":\"...\",\"body\":\"...\"} only. Body under 120 words.',\n workspace: 'sales'\n })\n });\n const d2 = await r2.json();\n try {\n const parsed = JSON.parse((d2.response || '').replace(/^[^{]*/, '').replace(/[^}]*$/, ''));\n if (parsed.subject) setEmailDraft(parsed);\n } catch {\n setEmailDraft({subject:'Quick thought on ' + (prospect.company || prospect.name), body: d2.response || ''});\n }\n } catch {} finally { setLoading(false); }\n }, [prospect]);\n\n useEffect(() => { if (open && prospect) generateDrafts(); }, [open, prospect, generateDrafts]);\n\n if (!open) return null;\n return h(React.Fragment, null,\n h('div', {className:'fixed inset-0 bg-black/50 backdrop-blur-sm z-[55]', onClick: onClose}),\n h('div', {className:'fixed top-0 right-0 h-screen w-full sm:w-[420px] glass-panel shadow-2xl z-[60] flex flex-col drawer-in'},\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-center bg-surface-container-high/20'},\n h('div', {className:'flex items-center gap-3 min-w-0'},\n h(Icon, {name:'outgoing_mail', size:20, className:'text-secondary'}),\n h('div', {className:'min-w-0'},\n h('h3', {className:'text-[16px] font-bold truncate'}, 'Outreach Drafts'),\n prospect && h('p', {className:'text-[11px] text-text-muted truncate'}, prospect.name + (prospect.company ? ' - ' + prospect.company : ''))\n )\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface p-1'}, h(Icon,{name:'close', size:20}))\n ),\n h('div', {className:'flex-1 overflow-y-auto p-lg space-y-lg'},\n loading\n ? h('div', {className:'flex flex-col items-center justify-center py-12 gap-3 text-text-muted text-[12px]'},\n h(Spinner, {size:24}),\n 'Drafting personalized outreach-'\n )\n : h(React.Fragment, null,\n // LinkedIn draft\n h('div', {className:'space-y-3'},\n h('div', {className:'flex items-center justify-between'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'diversity_3', size:16, className:'text-primary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-on-surface'}, 'LinkedIn InMail')\n ),\n h('span', {className:'text-[9px] bg-secondary/10 text-secondary border border-secondary/20 px-2 py-0.5 rounded uppercase font-bold'}, 'AI Drafted')\n ),\n h('textarea', {\n value: linkedInDraft, onChange: e => setLinkedInDraft(e.target.value), rows: 6,\n className:'w-full p-3 bg-surface-container-lowest border border-border-subtle rounded-lg text-[12px] text-on-surface-variant leading-relaxed resize-none outline-none focus:border-primary/40 transition-all',\n style:{fontFamily:'inherit'}\n }),\n h('div', {className:'flex gap-2'},\n h(Btn, {onClick: async () => {\n setSending(s => ({...s, linkedin: true}));\n try {\n // LinkedIn write requires Marketing Developer approval - fall back to saving\n // a Gmail draft labeled \"[LinkedIn InMail Draft]\" so the user has a real artifact.\n await saveLinkedInAsDraft(linkedInDraft);\n onSend && onSend({type:'linkedin', content: linkedInDraft, status:'saved_as_draft'});\n } catch (e) {\n onSend && onSend({type:'error', error: 'LinkedIn draft save failed: ' + e.message});\n } finally { setSending(s => ({...s, linkedin: false})); }\n }, variant:'secondary', size:'sm', className:'flex-1', disabled: sending.linkedin},\n sending.linkedin ? h(Spinner,{size:13}) : h(Icon, {name:'drafts', size:14}),\n sending.linkedin ? 'Saving-' : 'Save as Draft'\n ),\n h(Btn, {onClick: generateDrafts, variant:'ghost', size:'sm'},\n h(Icon, {name:'refresh', size:14}), 'Redraft'\n )\n )\n ),\n // Email draft\n h('div', {className:'space-y-3 pt-4 border-t border-border-subtle'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'mail', size:16, className:'text-primary'}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-widest text-on-surface'}, 'Strategic Email')\n ),\n h('input', {\n value: emailDraft.subject, onChange: e => setEmailDraft({...emailDraft, subject: e.target.value}),\n placeholder:'Subject',\n className:'w-full p-2.5 bg-surface-container-lowest border border-border-subtle rounded-lg text-[13px] font-bold text-on-surface outline-none focus:border-primary/40 transition-all'\n }),\n h('textarea', {\n value: emailDraft.body, onChange: e => setEmailDraft({...emailDraft, body: e.target.value}), rows: 8,\n className:'w-full p-3 bg-surface-container-lowest border border-border-subtle rounded-lg text-[12px] text-on-surface-variant leading-relaxed resize-none outline-none focus:border-primary/40 transition-all',\n style:{fontFamily:'inherit'}\n }),\n h('div', {className:'flex gap-2'},\n h(Btn, {onClick: async () => {\n setSending(s => ({...s, email: true}));\n try {\n const to = prospect?.email || '';\n if (!to) throw new Error('No recipient - prospect email missing');\n const r = await sendEmailNow({to, subject: emailDraft.subject, body: emailDraft.body});\n onSend && onSend({type:'email_sent', ...emailDraft, response: r});\n } catch (e) {\n onSend && onSend({type:'error', error: 'Send failed: ' + e.message});\n } finally { setSending(s => ({...s, email: false})); }\n }, variant:'primary', size:'sm', className:'flex-1', disabled: sending.email},\n sending.email ? h(Spinner,{size:13}) : h(Icon, {name:'send', size:14}),\n sending.email ? 'Sending-' : 'Send Now'\n ),\n h(Btn, {onClick: async () => {\n // \"Schedule Delivery\" = save as Gmail draft (real persistence) - user can\n // open Gmail and add a send-later schedule from there.\n try {\n await fetch('/api/integrations/gmail/data?endpoint=createDraft', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({to: prospect?.email || '', subject: emailDraft.subject, body: emailDraft.body})\n });\n onSend && onSend({type:'email_drafted', ...emailDraft});\n } catch (e) { onSend && onSend({type:'error', error: e.message}); }\n }, variant:'ghost', size:'sm'},\n h(Icon, {name:'schedule_send', size:14}), 'Draft'\n )\n )\n )\n )\n ),\n h('div', {className:'p-lg border-t border-border-subtle bg-surface-container-high/20'},\n // B3: Approve All Drafts - actually send the email (Gmail) AND save the LinkedIn\n // copy as a Gmail draft labeled \"[LinkedIn InMail Draft]\". onSend() reports outcome\n // per channel so the parent can toast accurately.\n h(Btn, {onClick: async () => {\n setSending(s => ({...s, email: true, linkedin: true}));\n const results = {email: null, linkedin: null};\n const to = prospect?.email || '';\n try {\n if (!to) throw new Error('No recipient - prospect email missing');\n const r = await sendEmailNow({to, subject: emailDraft.subject, body: emailDraft.body});\n results.email = {ok: true, response: r};\n onSend && onSend({type:'email_sent', ...emailDraft, response: r});\n } catch (e) {\n results.email = {ok: false, error: e.message};\n onSend && onSend({type:'error', error: 'Email send failed: ' + e.message});\n }\n try {\n await saveLinkedInAsDraft(linkedInDraft);\n results.linkedin = {ok: true};\n onSend && onSend({type:'linkedin', content: linkedInDraft, status:'saved_as_draft'});\n } catch (e) {\n results.linkedin = {ok: false, error: e.message};\n onSend && onSend({type:'error', error: 'LinkedIn draft failed: ' + e.message});\n }\n setSending(s => ({...s, email: false, linkedin: false}));\n onSend && onSend({type:'all_approved', results});\n if (results.email?.ok && results.linkedin?.ok) onClose();\n }, variant:'primary', size:'md', className:'w-full', disabled: sending.email || sending.linkedin},\n (sending.email || sending.linkedin) ? h(Spinner, {size:14}) : h(Icon, {name:'rocket_launch', size:15}),\n (sending.email || sending.linkedin) ? 'Approving-' : 'APPROVE ALL DRAFTS'\n )\n )\n )\n );\n}\n `;\n}\n",[375],"d39810d4-5e7b-11f1-bae0-1607ee4eb77e","frontend_experiments.ts","a3f42ce6-589f-11f1-b75f-ee650bb23af1",933,["D",1780402134889],"// ExperimentBoard + ExperimentDrawer — ICE-scored growth experiments Kanban.\n// Served at /api/app-experiments and dynamically imported by frontend_js.ts.\n//\n// Backend endpoints consumed:\n// GET /api/experiments (filters: status, funnel_stage, aarrr_lever)\n// POST /api/experiments (create)\n// PUT /api/experiments/:id (update)\n// DELETE /api/experiments/:id\n// GET /api/experiments/stats\n// POST /api/experiments/ice-suggest ({title, hypothesis, ...})\n// POST /api/experiments/:id/run ({baseline_value})\n// POST /api/experiments/:id/complete ({result_value, outcome, learnings})\n// GET /api/okrs (objective_id dropdown source)\n//\n// Shared deps come from window.__nexus (set by frontend_js.ts):\n// Icon, Btn, Input, Spinner, PageHeader, SectionHeader, MetricCard.\n\nexport function getExperimentsJS(): string {\n return `\nimport React, { useState, useEffect, useCallback, useRef } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\nconst STATUSES = ['idea', 'queued', 'running', 'completed', 'cancelled'];\nconst STATUS_META = {\n idea: {label:'IDEA', accent:'text-text-muted', dot:'bg-text-muted'},\n queued: {label:'QUEUED', accent:'text-primary', dot:'bg-primary'},\n running: {label:'RUNNING', accent:'text-tertiary', dot:'bg-tertiary pulse-dot'},\n completed: {label:'COMPLETED', accent:'text-secondary', dot:'bg-secondary'},\n cancelled: {label:'CANCELLED', accent:'text-error', dot:'bg-error'},\n};\nconst STAGE_COLORS = {\n TOFU: {chip:'bg-primary/15 text-primary border-primary/30', label:'TOFU'},\n MOFU: {chip:'bg-tertiary/15 text-tertiary border-tertiary/30', label:'MOFU'},\n BOFU: {chip:'bg-secondary/15 text-secondary border-secondary/30', label:'BOFU'},\n};\nconst LEVERS = ['acquisition','activation','retention','referral','revenue'];\nconst CHANNELS = ['email','seo','linkedin','content','ads','product'];\nconst OUTCOMES = ['win','loss','inconclusive'];\n\nconst iceScore = (i, c, e) => {\n const ii = Number(i) || 0, cc = Number(c) || 0, ee = Number(e) || 0;\n // ICE: average of three 1-10 dimensions, rounded to 1 decimal.\n return Math.round(((ii + cc + ee) / 3) * 10) / 10;\n};\nconst iceBadgeCls = (s) =>\n s >= 7 ? 'bg-secondary/15 text-secondary border-secondary/30'\n : s >= 4 ? 'bg-tertiary/15 text-tertiary border-tertiary/30'\n : 'bg-error/15 text-error border-error/30';\n\nconst initial = (name) => (name && String(name).trim()[0] ? String(name).trim()[0].toUpperCase() : '?');\nconst fmtDate = (d) => d ? new Date(d).toLocaleDateString(undefined, {month:'short', day:'numeric'}) : '—';\nconst fmtPct = (v) => (typeof v === 'number') ? ((v >= 0 ? '+' : '') + v.toFixed(1) + '%') : '—';\n\n// ─── ExperimentCard ─────────────────────────────────────────────────────────\nfunction ExperimentCard({exp, onClick, onDragStart}) {\n const {Icon} = N();\n const score = exp.ice_score != null ? exp.ice_score : iceScore(exp.impact, exp.confidence, exp.ease);\n const stage = STAGE_COLORS[exp.funnel_stage] || STAGE_COLORS.TOFU;\n return h('div', {\n draggable: true,\n onDragStart: (e) => onDragStart(e, exp),\n onClick: () => onClick(exp),\n className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-md cursor-pointer hover:border-primary/40 transition-all space-y-2 group'\n },\n h('div', {className:'flex items-start justify-between gap-2'},\n h('h4', {className:'text-[13px] font-bold text-on-surface leading-tight truncate flex-1', title: exp.title}, exp.title || 'Untitled'),\n h('span', {\n className:'flex-shrink-0 inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[11px] font-extrabold font-mono-data ' + iceBadgeCls(score),\n style:{fontVariantNumeric:'tabular-nums'},\n title:'ICE = (Impact + Confidence + Ease) / 3'\n }, 'ICE ', score.toFixed(1))\n ),\n exp.hypothesis && h('p', {\n className:'text-[12px] text-text-muted leading-snug',\n style:{display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden'}\n }, exp.hypothesis),\n // ICE mini-bars\n h('div', {className:'space-y-1'},\n [['I', exp.impact], ['C', exp.confidence], ['E', exp.ease]].map(([letter, v]) => {\n const val = Number(v) || 0;\n const pct = Math.max(0, Math.min(100, val * 10));\n return h('div', {key: letter, className:'flex items-center gap-1.5'},\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted w-3'}, letter),\n h('div', {className:'flex-1 bg-surface-container h-1 rounded-full overflow-hidden'},\n h('div', {className:'h-full bg-primary transition-all', style:{width: pct + '%'}})\n ),\n h('span', {className:'text-[10px] font-mono-data text-on-surface-variant w-4 text-right', style:{fontVariantNumeric:'tabular-nums'}}, val)\n );\n })\n ),\n // Bottom chips\n h('div', {className:'flex items-center justify-between gap-2 pt-1 border-t border-border-subtle/60'},\n h('div', {className:'flex items-center gap-1 min-w-0 flex-wrap'},\n exp.funnel_stage && h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-widest border ' + stage.chip}, stage.label),\n exp.aarrr_lever && h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-container text-on-surface-variant border border-border-subtle'}, exp.aarrr_lever)\n ),\n exp.owner && h('span', {\n className:'flex-shrink-0 w-5 h-5 rounded-full bg-primary/20 text-primary text-[10px] font-bold flex items-center justify-center border border-primary/30',\n title: exp.owner\n }, initial(exp.owner))\n ),\n // Outcome strip (only for completed)\n exp.status === 'completed' && exp.outcome && h('div', {className:'flex items-center justify-between text-[10px] pt-1'},\n h('span', {\n className:'font-bold uppercase tracking-widest ' +\n (exp.outcome === 'win' ? 'text-secondary' : exp.outcome === 'loss' ? 'text-error' : 'text-tertiary')\n }, exp.outcome),\n typeof exp.uplift_pct === 'number' && h('span', {\n className:'font-mono-data font-bold ' + (exp.uplift_pct >= 0 ? 'text-secondary' : 'text-error'),\n style:{fontVariantNumeric:'tabular-nums'}\n }, fmtPct(exp.uplift_pct))\n )\n );\n}\n\n// ─── KanbanColumn ───────────────────────────────────────────────────────────\nfunction KanbanColumn({status, experiments, onCardClick, onDragStart, onDrop}) {\n const meta = STATUS_META[status];\n const [over, setOver] = useState(false);\n return h('div', {\n onDragOver: (e) => { e.preventDefault(); if (!over) setOver(true); },\n onDragLeave: () => setOver(false),\n onDrop: (e) => { e.preventDefault(); setOver(false); onDrop(e, status); },\n className:'bg-surface-container/40 rounded-lg p-md min-h-[400px] flex flex-col gap-2 transition-all ' +\n (over ? 'ring-2 ring-primary/40 bg-primary/5' : '')\n },\n h('div', {className:'flex items-center justify-between mb-1'},\n h('div', {className:'flex items-center gap-2'},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + meta.dot}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest ' + meta.accent}, meta.label)\n ),\n h('span', {className:'inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-surface-container-high text-[10px] font-bold font-mono-data text-on-surface-variant'},\n experiments.length\n )\n ),\n experiments.length === 0\n ? h('div', {className:'flex-1 flex items-center justify-center text-[11px] text-text-muted italic py-6'}, 'Drop here')\n : experiments.map(e => h(ExperimentCard, {key: e.id, exp: e, onClick: onCardClick, onDragStart}))\n );\n}\n\n// ─── ExperimentBoard ────────────────────────────────────────────────────────\nexport function ExperimentBoard({setActivePage}) {\n const {Icon, Btn, PageHeader, SectionHeader, MetricCard, Spinner} = N();\n const [experiments, setExperiments] = useState([]);\n const [stats, setStats] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [filters, setFilters] = useState({status:'', funnel_stage:'', aarrr_lever:''});\n const [drawer, setDrawer] = useState(null); // null | {mode:'create'|'edit', exp}\n const [showLeaderboard, setShowLeaderboard] = useState(true);\n const [sort, setSort] = useState({key:'ice_score', dir:'desc'});\n const [toast, setToast] = useState(null);\n\n const showToast = useCallback((msg, kind='info') => {\n setToast({msg, kind});\n setTimeout(() => setToast(null), 2400);\n }, []);\n\n const buildQuery = useCallback(() => {\n const qs = new URLSearchParams();\n if (filters.status) qs.set('status', filters.status);\n if (filters.funnel_stage) qs.set('funnel_stage', filters.funnel_stage);\n if (filters.aarrr_lever) qs.set('aarrr_lever', filters.aarrr_lever);\n return qs.toString() ? ('?' + qs.toString()) : '';\n }, [filters]);\n\n const load = useCallback(async () => {\n setLoading(true);\n try {\n const [rExp, rStats] = await Promise.all([\n fetch('/api/experiments' + buildQuery()),\n fetch('/api/experiments/stats'),\n ]);\n const exps = await rExp.json();\n const st = await rStats.json();\n setExperiments(Array.isArray(exps) ? exps : []);\n setStats(st && typeof st === 'object' ? st : null);\n setError(null);\n } catch (e) {\n setError(e.message || 'Failed to load experiments');\n } finally {\n setLoading(false);\n }\n }, [buildQuery]);\n\n useEffect(() => { load(); }, [load]);\n\n const onDragStart = (e, exp) => {\n e.dataTransfer.setData('exp-id', String(exp.id));\n e.dataTransfer.effectAllowed = 'move';\n };\n\n const onDrop = async (e, newStatus) => {\n const id = e.dataTransfer.getData('exp-id');\n if (!id) return;\n const expId = isNaN(Number(id)) ? id : Number(id);\n const target = experiments.find(x => String(x.id) === String(id));\n if (!target || target.status === newStatus) return;\n // Optimistic\n setExperiments(prev => prev.map(x => String(x.id) === String(id) ? {...x, status: newStatus} : x));\n try {\n const r = await fetch('/api/experiments/' + expId, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({status: newStatus})\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n showToast('Moved to ' + newStatus, 'success');\n // Reload stats since column counts changed.\n fetch('/api/experiments/stats').then(r => r.json()).then(setStats).catch(() => {});\n } catch (err) {\n // Revert on failure\n setExperiments(prev => prev.map(x => String(x.id) === String(id) ? target : x));\n showToast('Move failed: ' + err.message, 'error');\n }\n };\n\n const onCardClick = (exp) => setDrawer({mode:'edit', exp});\n const onNewExperiment = () => setDrawer({mode:'create', exp: null});\n\n const onDrawerSave = async (payload, opts={}) => {\n const isEdit = drawer?.mode === 'edit' && drawer?.exp?.id;\n try {\n const url = isEdit ? ('/api/experiments/' + drawer.exp.id) : '/api/experiments';\n const method = isEdit ? 'PUT' : 'POST';\n const r = await fetch(url, {\n method, headers:{'Content-Type':'application/json'},\n body: JSON.stringify(payload)\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n showToast(isEdit ? 'Experiment updated' : 'Experiment created', 'success');\n if (!opts.keepOpen) setDrawer(null);\n await load();\n } catch (err) {\n showToast('Save failed: ' + err.message, 'error');\n }\n };\n\n const onDrawerDelete = async () => {\n if (!drawer?.exp?.id) return;\n if (!confirm('Delete this experiment? This cannot be undone.')) return;\n try {\n await fetch('/api/experiments/' + drawer.exp.id, {method:'DELETE'});\n showToast('Experiment deleted', 'info');\n setDrawer(null);\n await load();\n } catch (err) { showToast('Delete failed: ' + err.message, 'error'); }\n };\n\n const onLifecycle = async (action, body) => {\n if (!drawer?.exp?.id) return;\n try {\n const r = await fetch('/api/experiments/' + drawer.exp.id + '/' + action, {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(body || {})\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const updated = await r.json().catch(() => null);\n showToast(action === 'run' ? 'Experiment started' : 'Experiment completed', 'success');\n setDrawer(null);\n await load();\n } catch (err) { showToast(action + ' failed: ' + err.message, 'error'); }\n };\n\n // Board-level quick lifecycle action (Run/Complete) on a row without opening the drawer.\n // POSTs /api/experiments/:id/run|complete, then reloads the board.\n const onRowLifecycle = async (exp, action) => {\n if (!exp || !exp.id) return;\n if (action === 'run' && (exp.baseline_value === '' || exp.baseline_value == null)) {\n // Run needs a baseline; send the user to the drawer to supply it.\n showToast('Set a baseline value to start this experiment', 'info');\n setDrawer({mode:'edit', exp});\n return;\n }\n if (action === 'complete') {\n // Completion needs result + outcome — collect those in the drawer.\n showToast('Add result value and outcome to complete', 'info');\n setDrawer({mode:'edit', exp});\n return;\n }\n try {\n const r = await fetch('/api/experiments/' + exp.id + '/' + action, {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(action === 'run' ? {baseline_value: Number(exp.baseline_value) || 0} : {})\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n showToast(action === 'run' ? 'Experiment started' : 'Experiment completed', 'success');\n await load();\n } catch (err) { showToast(action + ' failed: ' + err.message, 'error'); }\n };\n\n // Board-level quick delete on a row — DELETE /api/experiments/:id, then reload.\n const onRowDelete = async (exp) => {\n if (!exp || !exp.id) return;\n if (!confirm('Delete \"' + (exp.title || 'this experiment') + '\"? This cannot be undone.')) return;\n try {\n const r = await fetch('/api/experiments/' + exp.id, {method:'DELETE'});\n if (!r.ok) throw new Error('HTTP ' + r.status);\n showToast('Experiment deleted', 'info');\n await load();\n } catch (err) { showToast('Delete failed: ' + err.message, 'error'); }\n };\n\n // Board-level \"Suggest ICE\" — POST /api/experiments/ice-suggest, persist the\n // returned impact/confidence/ease via PUT, then reload. Lets users score a row\n // without opening the drawer. (Route is ice-suggest, per router.ts.)\n const onRowSuggestIce = async (exp) => {\n if (!exp || !exp.id) return;\n try {\n const r = await fetch('/api/experiments/ice-suggest', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n title: exp.title,\n hypothesis: exp.hypothesis,\n funnel_stage: exp.funnel_stage,\n aarrr_lever: exp.aarrr_lever,\n objective_id: exp.objective_id || undefined,\n })\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const d = await r.json().catch(() => null);\n if (!d || typeof d.impact !== 'number') throw new Error('no suggestion');\n const pr = await fetch('/api/experiments/' + exp.id, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({impact: d.impact, confidence: d.confidence, ease: d.ease})\n });\n if (!pr.ok) throw new Error('HTTP ' + pr.status);\n showToast('ICE suggested: ' + d.impact + '/' + d.confidence + '/' + d.ease, 'success');\n await load();\n } catch (err) { showToast('Suggest ICE failed: ' + err.message, 'error'); }\n };\n\n // Group experiments by status\n const byStatus = STATUSES.reduce((acc, s) => { acc[s] = []; return acc; }, {});\n experiments.forEach(e => {\n const s = STATUSES.includes(e.status) ? e.status : 'idea';\n byStatus[s].push(e);\n });\n\n // Leaderboard sorted view\n const sorted = [...experiments].sort((a, b) => {\n const av = a[sort.key], bv = b[sort.key];\n if (av == null && bv == null) return 0;\n if (av == null) return 1;\n if (bv == null) return -1;\n if (typeof av === 'number' && typeof bv === 'number') {\n return sort.dir === 'asc' ? av - bv : bv - av;\n }\n return sort.dir === 'asc' ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));\n });\n\n const toggleSort = (key) => setSort(s => s.key === key ? {key, dir: s.dir === 'asc' ? 'desc' : 'asc'} : {key, dir:'desc'});\n const sortIcon = (key) => sort.key === key ? (sort.dir === 'asc' ? '▲' : '▼') : '';\n\n const isEmpty = !loading && experiments.length === 0 && !filters.status && !filters.funnel_stage && !filters.aarrr_lever;\n\n return h('div', {className:'p-lg lg:p-xl space-y-xl max-w-[1600px] mx-auto pb-32'},\n h(PageHeader, {\n title:'Experiments',\n subtitle:'ICE-scored growth experiments. Higher ICE = run first.',\n right: h(Btn, {onClick: onNewExperiment, variant:'primary', size:'md'},\n h(Icon, {name:'add', size:16}), 'New Experiment'\n )\n }),\n\n // ─── Stats bento ──────────────────────────────────────────────────────\n h('div', {className:'grid grid-cols-2 lg:grid-cols-4 gap-md'},\n MetricCard\n ? h(MetricCard, {\n label:'Win Rate',\n value: stats ? (Math.round((stats.win_rate || 0) * 100) + '%') : '—',\n hint:'completed wins / total completed',\n icon:'emoji_events',\n color:'secondary'\n })\n : null,\n MetricCard\n ? h(MetricCard, {\n label:'Avg Uplift',\n value: stats && typeof stats.avg_uplift === 'number' ? fmtPct(stats.avg_uplift) : '—',\n hint:'across completed experiments',\n icon:'trending_up',\n color:'primary'\n })\n : null,\n MetricCard\n ? h(MetricCard, {\n label:'Top Lever',\n value: stats && stats.top_lever ? String(stats.top_lever).toUpperCase() : '—',\n hint:'most-tested AARRR lever',\n icon:'tune',\n color:'tertiary'\n })\n : null,\n MetricCard\n ? h(MetricCard, {\n label:'Total Experiments',\n value: stats ? String(stats.total || 0) : '—',\n hint: stats?.fastest_days != null ? ('fastest ' + stats.fastest_days + 'd') : 'all-time count',\n icon:'science',\n color:'primary'\n })\n : null\n ),\n\n error && h('div', {className:'p-md rounded-lg bg-error/5 border border-error/30 text-[12px] text-error'},\n 'Experiments unavailable: ' + error\n ),\n\n // ─── Empty state ──────────────────────────────────────────────────────\n isEmpty\n ? h('div', {className:'glass-panel rounded-xl p-xl flex flex-col items-center justify-center text-center gap-md py-24'},\n h('div', {className:'w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center'},\n h(Icon, {name:'science', size:36, className:'text-primary'})\n ),\n h('h3', {className:'text-[18px] font-bold text-on-surface'}, 'No experiments yet'),\n h('p', {className:'text-[13px] text-text-muted max-w-md'},\n 'Run your first ICE-scored growth experiment. Score Impact, Confidence, and Ease on a 1-10 scale and let the board prioritize for you.'\n ),\n h(Btn, {onClick: onNewExperiment, variant:'primary', size:'md'},\n h(Icon, {name:'add', size:16}), 'Create first experiment'\n )\n )\n : h(React.Fragment, null,\n // ─── Kanban board ─────────────────────────────────────────────\n h('div', {className:'glass-panel rounded-xl p-md'},\n h('div', {className:'flex items-center justify-between mb-md px-2'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'view_kanban', size:18, className:'text-primary'}),\n h('h3', {className:'text-[15px] font-bold tracking-tight'}, 'Pipeline'),\n loading && h(Spinner, {size:14})\n ),\n h('span', {className:'text-[10px] text-text-muted'}, 'Drag cards between columns to update status')\n ),\n h('div', {className:'grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-md'},\n STATUSES.map(st => h(KanbanColumn, {\n key: st,\n status: st,\n experiments: byStatus[st],\n onCardClick,\n onDragStart,\n onDrop\n }))\n )\n ),\n\n // ─── ICE Leaderboard ──────────────────────────────────────────\n h('section', {className:'glass-panel rounded-xl p-lg'},\n h('div', {className:'flex items-center justify-between mb-md'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'leaderboard', size:18, className:'text-tertiary'}),\n h('h3', {className:'text-[15px] font-bold tracking-tight'}, 'Top by ICE Score'),\n h('span', {className:'text-[10px] text-text-muted'}, '(' + sorted.length + ')')\n ),\n h('button', {\n onClick: () => setShowLeaderboard(v => !v),\n className:'text-[11px] font-semibold uppercase tracking-widest text-primary hover:underline flex items-center gap-1'\n }, h(Icon, {name: showLeaderboard ? 'expand_less' : 'expand_more', size:16}),\n showLeaderboard ? 'Collapse' : 'Expand'\n )\n ),\n showLeaderboard && h(React.Fragment, null,\n // Filter row\n h('div', {className:'flex flex-wrap items-end gap-2 mb-md p-3 rounded-lg bg-surface-container/40 border border-border-subtle'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Status'),\n h('select', {\n value: filters.status,\n onChange: e => setFilters(f => ({...f, status: e.target.value})),\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface font-mono-data focus:border-primary focus:outline-none min-w-[120px]'\n },\n h('option', {value:''}, 'All statuses'),\n STATUSES.map(s => h('option', {key: s, value: s}, s))\n )\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Funnel Stage'),\n h('select', {\n value: filters.funnel_stage,\n onChange: e => setFilters(f => ({...f, funnel_stage: e.target.value})),\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface font-mono-data focus:border-primary focus:outline-none min-w-[120px]'\n },\n h('option', {value:''}, 'All stages'),\n ['TOFU','MOFU','BOFU'].map(s => h('option', {key: s, value: s}, s))\n )\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'AARRR Lever'),\n h('select', {\n value: filters.aarrr_lever,\n onChange: e => setFilters(f => ({...f, aarrr_lever: e.target.value})),\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface font-mono-data focus:border-primary focus:outline-none min-w-[140px]'\n },\n h('option', {value:''}, 'All levers'),\n LEVERS.map(l => h('option', {key: l, value: l}, l))\n )\n ),\n h('button', {\n onClick: () => setFilters({status:'', funnel_stage:'', aarrr_lever:''}),\n className:'ml-auto text-[11px] font-semibold uppercase tracking-widest text-text-muted hover:text-on-surface px-3 py-1.5 border border-border-subtle rounded-md hover:border-outline/40 transition-all'\n }, 'Reset')\n ),\n // Table\n h('div', {className:'border border-border-subtle rounded-lg overflow-hidden'},\n h('div', {className:'grid grid-cols-12 gap-2 px-3 py-2 text-[10px] uppercase tracking-widest text-text-muted border-b border-border-subtle bg-surface-container/40 font-bold'},\n h('button', {onClick: () => toggleSort('id'), className:'col-span-1 text-left hover:text-on-surface'}, '# ', sortIcon('id')),\n h('button', {onClick: () => toggleSort('title'), className:'col-span-3 text-left hover:text-on-surface'}, 'Title ', sortIcon('title')),\n h('button', {onClick: () => toggleSort('ice_score'), className:'col-span-1 text-right hover:text-on-surface'}, 'ICE ', sortIcon('ice_score')),\n h('div', {className:'col-span-2 text-center'}, 'I / C / E'),\n h('button', {onClick: () => toggleSort('funnel_stage'), className:'col-span-1 text-center hover:text-on-surface'}, 'Stage ', sortIcon('funnel_stage')),\n h('button', {onClick: () => toggleSort('outcome'), className:'col-span-1 text-center hover:text-on-surface'}, 'Outcome ', sortIcon('outcome')),\n h('button', {onClick: () => toggleSort('uplift_pct'), className:'col-span-2 text-right hover:text-on-surface'}, 'Uplift ', sortIcon('uplift_pct')),\n h('div', {className:'col-span-1 text-right'}, 'Actions')\n ),\n sorted.length === 0\n ? h('div', {className:'px-3 py-8 text-center text-[12px] text-text-muted italic'}, 'No experiments match current filters.')\n : sorted.slice(0, 50).map((e, idx) => {\n const score = e.ice_score != null ? e.ice_score : iceScore(e.impact, e.confidence, e.ease);\n const stage = STAGE_COLORS[e.funnel_stage];\n return h('div', {\n key: e.id,\n className:'grid grid-cols-12 gap-2 px-3 py-2 text-[12px] border-b border-border-subtle/50 last:border-0 items-center hover:bg-surface-container/30 transition-colors'\n },\n h('div', {className:'col-span-1 font-mono-data text-text-muted'}, '#' + (idx + 1)),\n h('div', {className:'col-span-3 truncate font-semibold text-on-surface', title: e.title}, e.title || '(untitled)'),\n h('div', {className:'col-span-1 text-right'},\n h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded-full border text-[10px] font-extrabold font-mono-data ' + iceBadgeCls(score), style:{fontVariantNumeric:'tabular-nums'}}, score.toFixed(1))\n ),\n h('div', {className:'col-span-2 text-center font-mono-data text-text-muted text-[11px]'},\n (e.impact ?? '–') + ' / ' + (e.confidence ?? '–') + ' / ' + (e.ease ?? '–')\n ),\n h('div', {className:'col-span-1 text-center'},\n stage ? h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-widest border ' + stage.chip}, stage.label) : h('span', {className:'text-text-muted'}, '—')\n ),\n h('div', {className:'col-span-1 text-center'},\n e.outcome\n ? h('span', {\n className:'inline-flex items-center text-[10px] font-bold uppercase tracking-widest ' +\n (e.outcome === 'win' ? 'text-secondary' : e.outcome === 'loss' ? 'text-error' : 'text-tertiary')\n }, e.outcome)\n : h('span', {className:'text-text-muted'}, '—')\n ),\n h('div', {className:'col-span-2 text-right font-mono-data font-bold ' + (typeof e.uplift_pct === 'number' && e.uplift_pct >= 0 ? 'text-secondary' : typeof e.uplift_pct === 'number' ? 'text-error' : 'text-text-muted'), style:{fontVariantNumeric:'tabular-nums'}},\n typeof e.uplift_pct === 'number' ? fmtPct(e.uplift_pct) : '—'\n ),\n h('div', {className:'col-span-1 flex items-center justify-end gap-1.5'},\n (e.status === 'idea' || e.status === 'queued') && h('button', {\n onClick: (ev) => { ev.stopPropagation(); onRowLifecycle(e, 'run'); },\n title:'Run experiment',\n className:'text-tertiary hover:text-tertiary/70'\n }, h(Icon, {name:'play_arrow', size:15})),\n e.status === 'running' && h('button', {\n onClick: (ev) => { ev.stopPropagation(); onRowLifecycle(e, 'complete'); },\n title:'Complete experiment',\n className:'text-secondary hover:text-secondary/70'\n }, h(Icon, {name:'check', size:15})),\n h('button', {\n onClick: (ev) => { ev.stopPropagation(); onRowSuggestIce(e); },\n title:'Suggest ICE score',\n className:'text-primary hover:text-primary/70'\n }, h(Icon, {name:'auto_awesome', size:15})),\n h('button', {\n onClick: (ev) => { ev.stopPropagation(); onCardClick(e); },\n title:'Edit',\n className:'text-on-surface-variant hover:text-on-surface'\n }, h(Icon, {name:'edit', size:15})),\n h('button', {\n onClick: (ev) => { ev.stopPropagation(); onRowDelete(e); },\n title:'Delete',\n className:'text-error/70 hover:text-error'\n }, h(Icon, {name:'delete', size:15}))\n )\n );\n })\n )\n )\n )\n ),\n\n // ─── Drawer ───────────────────────────────────────────────────────────\n drawer && h(ExperimentDrawer, {\n experiment: drawer.exp,\n mode: drawer.mode,\n onSave: onDrawerSave,\n onClose: () => setDrawer(null),\n onDelete: drawer.mode === 'edit' ? onDrawerDelete : null,\n onLifecycle\n }),\n\n // Toast\n toast && h('div', {\n className:'fixed bottom-6 right-6 z-[100] px-4 py-2.5 rounded-lg shadow-2xl border text-[12px] font-semibold ' +\n (toast.kind === 'error' ? 'bg-error/10 border-error/40 text-error'\n : toast.kind === 'success' ? 'bg-secondary/10 border-secondary/40 text-secondary'\n : 'bg-surface-container-high border-border-subtle text-on-surface')\n }, toast.msg)\n );\n}\n\n// ─── ExperimentDrawer ───────────────────────────────────────────────────────\nexport function ExperimentDrawer({experiment, mode, onSave, onClose, onDelete, onLifecycle}) {\n const {Icon, Btn, Input, Spinner, SectionHeader} = N();\n const isEdit = !!(experiment && experiment.id);\n const initialForm = {\n title: experiment?.title || '',\n hypothesis: experiment?.hypothesis || '',\n objective_id: experiment?.objective_id || '',\n funnel_stage: experiment?.funnel_stage || 'TOFU',\n aarrr_lever: experiment?.aarrr_lever || 'acquisition',\n channel: experiment?.channel || 'email',\n impact: experiment?.impact ?? 5,\n confidence: experiment?.confidence ?? 5,\n ease: experiment?.ease ?? 5,\n owner: experiment?.owner || '',\n start_date: experiment?.start_date ? String(experiment.start_date).slice(0, 10) : '',\n end_date: experiment?.end_date ? String(experiment.end_date).slice(0, 10) : '',\n success_metric: experiment?.success_metric || '',\n baseline_value: experiment?.baseline_value ?? '',\n result_value: experiment?.result_value ?? '',\n outcome: experiment?.outcome || '',\n learnings: experiment?.learnings || '',\n status: experiment?.status || 'idea',\n // A/B arm counts — power the backend two-proportion z-test (significance + sample_size).\n control_n: experiment?.control_n ?? '',\n control_conversions: experiment?.control_conversions ?? '',\n variant_n: experiment?.variant_n ?? '',\n variant_conversions: experiment?.variant_conversions ?? '',\n };\n const [form, setForm] = useState(initialForm);\n const [objectives, setObjectives] = useState([]);\n const [aiBusy, setAiBusy] = useState(false);\n const [aiRationale, setAiRationale] = useState('');\n const [saving, setSaving] = useState(false);\n\n useEffect(() => {\n fetch('/api/okrs').then(r => r.json()).then(d => {\n const list = Array.isArray(d) ? d : (Array.isArray(d?.objectives) ? d.objectives : []);\n setObjectives(list);\n }).catch(() => setObjectives([]));\n }, []);\n\n const set = (k, v) => setForm(f => ({...f, [k]: v}));\n const score = iceScore(form.impact, form.confidence, form.ease);\n\n const aiSuggest = async () => {\n if (!form.title.trim() && !form.hypothesis.trim()) return;\n setAiBusy(true);\n try {\n const r = await fetch('/api/experiments/ice-suggest', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n title: form.title,\n hypothesis: form.hypothesis,\n funnel_stage: form.funnel_stage,\n aarrr_lever: form.aarrr_lever,\n objective_id: form.objective_id || undefined,\n })\n });\n const d = await r.json();\n if (typeof d.impact === 'number') set('impact', d.impact);\n if (typeof d.confidence === 'number') set('confidence', d.confidence);\n if (typeof d.ease === 'number') set('ease', d.ease);\n setAiRationale(d.rationale || '');\n } catch (e) {\n setAiRationale('AI suggestion failed: ' + e.message);\n } finally { setAiBusy(false); }\n };\n\n const buildPayload = () => {\n const p = {\n title: form.title.trim(),\n hypothesis: form.hypothesis.trim(),\n objective_id: form.objective_id || null,\n funnel_stage: form.funnel_stage,\n aarrr_lever: form.aarrr_lever,\n channel: form.channel,\n impact: Number(form.impact) || 0,\n confidence: Number(form.confidence) || 0,\n ease: Number(form.ease) || 0,\n owner: form.owner.trim() || null,\n start_date: form.start_date || null,\n end_date: form.end_date || null,\n success_metric: form.success_metric.trim() || null,\n status: form.status,\n };\n if (form.baseline_value !== '' && form.baseline_value != null) p.baseline_value = Number(form.baseline_value);\n if (form.result_value !== '' && form.result_value != null) p.result_value = Number(form.result_value);\n if (form.outcome) p.outcome = form.outcome;\n if (form.learnings && form.learnings.trim()) p.learnings = form.learnings.trim();\n return p;\n };\n\n const handleSave = async () => {\n if (!form.title.trim()) { alert('Title is required'); return; }\n setSaving(true);\n try { await onSave(buildPayload()); } finally { setSaving(false); }\n };\n\n const handleRun = async () => {\n if (form.baseline_value === '' || form.baseline_value == null) {\n alert('Baseline value is required to start a running experiment.');\n return;\n }\n await onLifecycle('run', {baseline_value: Number(form.baseline_value)});\n };\n\n const handleComplete = async () => {\n if (form.result_value === '' || form.result_value == null) { alert('Result value is required.'); return; }\n if (!form.outcome) { alert('Outcome is required.'); return; }\n const body = {\n result_value: Number(form.result_value),\n outcome: form.outcome,\n learnings: form.learnings || undefined,\n };\n // Include A/B arm counts only when all four are supplied so the backend can run\n // a real two-proportion z-test (significance + sample_size). Otherwise omit —\n // the backend keeps significance null rather than fabricating a p-value.\n const hasArms = [form.control_n, form.control_conversions, form.variant_n, form.variant_conversions]\n .every(v => v !== '' && v != null);\n if (hasArms) {\n body.control = {n: Number(form.control_n), conversions: Number(form.control_conversions)};\n body.variant = {n: Number(form.variant_n), conversions: Number(form.variant_conversions)};\n }\n await onLifecycle('complete', body);\n };\n\n const Section = ({n, title, children}) => h('div', {className:'space-y-3 pb-4 border-b border-border-subtle/60 last:border-0'},\n h('div', {className:'flex items-center gap-2'},\n h('span', {className:'w-5 h-5 rounded-full bg-primary/15 text-primary text-[11px] font-extrabold flex items-center justify-center'}, n),\n h('h4', {className:'text-[12px] font-bold uppercase tracking-widest text-on-surface'}, title)\n ),\n children\n );\n\n const Slider = ({label, value, onChange}) => h('div', {className:'space-y-1'},\n h('div', {className:'flex items-center justify-between'},\n h('label', {className:'text-[11px] font-semibold text-on-surface-variant'}, label),\n h('span', {className:'text-[12px] font-extrabold font-mono-data text-primary', style:{fontVariantNumeric:'tabular-nums'}}, value)\n ),\n h('input', {\n type:'range', min:1, max:10, step:1, value: Number(value) || 1,\n onChange: e => onChange(parseInt(e.target.value, 10)),\n className:'w-full accent-primary bg-surface-variant rounded-lg h-1.5 appearance-none cursor-pointer'\n })\n );\n\n return h(React.Fragment, null,\n h('div', {className:'fixed inset-0 bg-black/50 backdrop-blur-sm z-[55]', onClick: onClose}),\n h('div', {className:'fixed top-0 right-0 h-screen w-full sm:w-[480px] glass-panel shadow-2xl z-[60] flex flex-col drawer-in'},\n // Header\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-center bg-surface-container-high/20'},\n h('div', {className:'flex items-center gap-3 min-w-0'},\n h(Icon, {name:'science', size:20, className:'text-primary'}),\n h('div', {className:'min-w-0'},\n h('h3', {className:'text-[16px] font-bold truncate'}, isEdit ? 'Edit Experiment' : 'New Experiment'),\n h('div', {className:'flex items-center gap-2 mt-0.5'},\n h('span', {className:'inline-flex items-center px-2 py-0.5 rounded-full border text-[10px] font-extrabold font-mono-data ' + iceBadgeCls(score), style:{fontVariantNumeric:'tabular-nums'}}, 'ICE ', score.toFixed(1)),\n isEdit && h('span', {className:'text-[10px] text-text-muted font-mono-data'}, '#' + experiment.id)\n )\n )\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface p-1'}, h(Icon, {name:'close', size:20}))\n ),\n // Body\n h('div', {className:'flex-1 overflow-y-auto p-lg space-y-lg'},\n\n // 1. Hypothesis\n h(Section, {n: 1, title:'Hypothesis'},\n h(Input, {\n label:'Title', value: form.title, onChange: v => set('title', v),\n placeholder:'e.g. Add social proof to pricing page'\n }),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Hypothesis'),\n h('textarea', {\n value: form.hypothesis, onChange: e => set('hypothesis', e.target.value), rows: 3,\n placeholder:'We believe that [change] will [outcome] because [rationale].',\n className:'w-full p-3 bg-surface-container-lowest border border-border-subtle rounded-lg text-[13px] text-on-surface-variant leading-relaxed resize-none outline-none focus:border-primary/40 transition-all',\n style:{fontFamily:'inherit'}\n })\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Linked Objective'),\n h('select', {\n value: form.objective_id || '',\n onChange: e => set('objective_id', e.target.value),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n },\n h('option', {value:''}, '— None —'),\n objectives.map(o => h('option', {key: o.id, value: o.id}, (o.title || o.name || 'Objective') + (o.id ? (' (#' + o.id + ')') : '')))\n )\n )\n ),\n\n // 2. ICE Scoring\n h(Section, {n: 2, title:'ICE Scoring'},\n h(Slider, {label:'Impact (how big a win?)', value: form.impact, onChange: v => set('impact', v)}),\n h(Slider, {label:'Confidence (how sure we are?)', value: form.confidence, onChange: v => set('confidence', v)}),\n h(Slider, {label:'Ease (how cheap to run?)', value: form.ease, onChange: v => set('ease', v)}),\n h('div', {className:'flex items-center justify-between gap-2 pt-1'},\n h(Btn, {onClick: aiSuggest, variant:'ghost', size:'sm', disabled: aiBusy || (!form.title.trim() && !form.hypothesis.trim())},\n aiBusy ? h(Spinner, {size:13}) : h(Icon, {name:'auto_awesome', size:14}),\n aiBusy ? 'Suggesting…' : 'AI Suggest'\n ),\n h('div', {className:'text-[11px] text-text-muted'},\n 'Composite ICE: ',\n h('span', {className:'font-extrabold font-mono-data text-primary text-[14px] ml-1', style:{fontVariantNumeric:'tabular-nums'}}, score.toFixed(1))\n )\n ),\n aiRationale && h('div', {className:'p-2.5 rounded-lg bg-primary/5 border border-primary/20 text-[11px] text-on-surface-variant leading-relaxed'},\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-primary mr-1.5'}, 'AI'), aiRationale\n )\n ),\n\n // 3. Classification\n h(Section, {n: 3, title:'Classification'},\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Funnel Stage'),\n h('div', {className:'grid grid-cols-3 gap-2'},\n ['TOFU','MOFU','BOFU'].map(s => {\n const on = form.funnel_stage === s;\n const cls = STAGE_COLORS[s];\n return h('button', {\n key: s, type:'button',\n onClick: () => set('funnel_stage', s),\n className:'p-2 rounded-lg border text-[11px] font-bold uppercase tracking-widest transition-all ' +\n (on ? cls.chip + ' border-2' : 'border-border-subtle bg-surface-container-lowest text-text-muted hover:border-outline/40')\n }, s);\n })\n )\n ),\n h('div', {className:'grid grid-cols-2 gap-md'},\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'AARRR Lever'),\n h('select', {\n value: form.aarrr_lever, onChange: e => set('aarrr_lever', e.target.value),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n }, LEVERS.map(l => h('option', {key: l, value: l}, l)))\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Channel'),\n h('select', {\n value: form.channel, onChange: e => set('channel', e.target.value),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n }, CHANNELS.map(c => h('option', {key: c, value: c}, c)))\n )\n ),\n h(Input, {label:'Owner', value: form.owner, onChange: v => set('owner', v), placeholder:'e.g. Maya'})\n ),\n\n // 4. Schedule\n h(Section, {n: 4, title:'Schedule'},\n h('div', {className:'grid grid-cols-2 gap-md'},\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Start Date'),\n h('input', {\n type:'date', value: form.start_date, onChange: e => set('start_date', e.target.value),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n })\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'End Date'),\n h('input', {\n type:'date', value: form.end_date, onChange: e => set('end_date', e.target.value),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n })\n )\n ),\n h(Input, {label:'Success Metric', value: form.success_metric, onChange: v => set('success_metric', v), placeholder:'e.g. signup_rate, MQL count'})\n ),\n\n // 5. Status & Results (only when status != 'idea')\n form.status !== 'idea' && h(Section, {n: 5, title:'Status & Results'},\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Status'),\n h('select', {\n value: form.status, onChange: e => set('status', e.target.value),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n }, STATUSES.map(s => h('option', {key: s, value: s}, s)))\n ),\n h(Input, {\n label:'Baseline Value', type:'text',\n value: String(form.baseline_value ?? ''),\n onChange: v => set('baseline_value', v.replace(/[^0-9.\\\\-]/g,'')),\n placeholder:'e.g. 100'\n }),\n form.status === 'completed' && h(React.Fragment, null,\n h(Input, {\n label:'Result Value', type:'text',\n value: String(form.result_value ?? ''),\n onChange: v => set('result_value', v.replace(/[^0-9.\\\\-]/g,'')),\n placeholder:'e.g. 124'\n }),\n // A/B arm counts — fill all four to run a real two-proportion z-test\n // (significance + sample_size). Leave any blank to keep significance null.\n h('div', {className:'space-y-2 p-3 rounded-lg bg-surface-container/40 border border-border-subtle'},\n h('div', {className:'flex items-center gap-1.5'},\n h(Icon, {name:'science', size:13, className:'text-tertiary'}),\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'A/B Significance (optional)')\n ),\n h('div', {className:'grid grid-cols-2 gap-md'},\n h(Input, {\n label:'Control n', type:'text',\n value: String(form.control_n ?? ''),\n onChange: v => set('control_n', v.replace(/[^0-9]/g,'')),\n placeholder:'e.g. 1000'\n }),\n h(Input, {\n label:'Control conversions', type:'text',\n value: String(form.control_conversions ?? ''),\n onChange: v => set('control_conversions', v.replace(/[^0-9]/g,'')),\n placeholder:'e.g. 50'\n }),\n h(Input, {\n label:'Variant n', type:'text',\n value: String(form.variant_n ?? ''),\n onChange: v => set('variant_n', v.replace(/[^0-9]/g,'')),\n placeholder:'e.g. 1000'\n }),\n h(Input, {\n label:'Variant conversions', type:'text',\n value: String(form.variant_conversions ?? ''),\n onChange: v => set('variant_conversions', v.replace(/[^0-9]/g,'')),\n placeholder:'e.g. 80'\n })\n ),\n h('p', {className:'text-[10px] text-text-muted'}, 'Fill all four to compute real significance from a two-proportion z-test. Leave blank to skip.')\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Outcome'),\n h('div', {className:'grid grid-cols-3 gap-2'},\n OUTCOMES.map(o => {\n const on = form.outcome === o;\n const cls = o === 'win' ? 'bg-secondary/15 text-secondary border-secondary/40'\n : o === 'loss' ? 'bg-error/15 text-error border-error/40'\n : 'bg-tertiary/15 text-tertiary border-tertiary/40';\n return h('button', {\n key: o, type:'button',\n onClick: () => set('outcome', o),\n className:'p-2 rounded-lg border text-[11px] font-bold uppercase tracking-widest transition-all ' +\n (on ? cls + ' border-2' : 'border-border-subtle bg-surface-container-lowest text-text-muted hover:border-outline/40')\n }, o);\n })\n )\n ),\n h('div', {className:'space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Learnings'),\n h('textarea', {\n value: form.learnings, onChange: e => set('learnings', e.target.value), rows: 3,\n placeholder:'What worked, what didn\\\\'t, and what we\\\\'ll do next.',\n className:'w-full p-3 bg-surface-container-lowest border border-border-subtle rounded-lg text-[13px] text-on-surface-variant leading-relaxed resize-none outline-none focus:border-primary/40 transition-all',\n style:{fontFamily:'inherit'}\n })\n )\n )\n ),\n\n // Allow promoting from idea\n form.status === 'idea' && h('div', {className:'p-3 rounded-lg bg-surface-container/40 border border-border-subtle space-y-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Status'),\n h('select', {\n value: form.status, onChange: e => set('status', e.target.value),\n className:'w-full bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 text-[13px] text-on-surface focus:border-primary focus:outline-none'\n }, STATUSES.map(s => h('option', {key: s, value: s}, s))),\n h('p', {className:'text-[10px] text-text-muted'}, 'Move to \"queued\" or \"running\" to unlock baseline + results inputs.')\n ),\n // P3 wire: surface chat-only capabilities so users discover the AI tools\n // (generate_tasks_from_experiment + compose_content). Click sends the prompt to chat.\n isEdit && h('div', {className:'p-3 rounded-lg border border-tertiary/20 bg-tertiary/5 space-y-2'},\n h('div', {className:'flex items-center gap-1.5'},\n h(Icon, {name:'tips_and_updates', size:14, className:'text-tertiary'}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-tertiary'}, 'Try Chat')\n ),\n h('div', {className:'flex flex-wrap gap-1.5'},\n h('button', {\n type:'button',\n onClick: () => window.dispatchEvent(new CustomEvent('nexus:open-chat', {detail:{\n action_payload:{question: 'Draft a 5-task breakdown for experiment #' + form.id + ' (\"' + form.title + '\") so we can ship this week.'}\n }})),\n className:'text-[10px] px-2 py-1 rounded-full bg-surface-container-lowest border border-border-subtle hover:border-tertiary/40 text-on-surface-variant transition-colors'\n }, '✨ Generate tasks from this'),\n h('button', {\n type:'button',\n onClick: () => window.dispatchEvent(new CustomEvent('nexus:open-chat', {detail:{\n action_payload:{question: 'Compose the launch announcement copy (LinkedIn post + email subject + body) for: ' + (form.hypothesis || form.title)}\n }})),\n className:'text-[10px] px-2 py-1 rounded-full bg-surface-container-lowest border border-border-subtle hover:border-tertiary/40 text-on-surface-variant transition-colors'\n }, '✨ Draft launch copy'),\n form.status === 'completed' && h('button', {\n type:'button',\n onClick: () => window.dispatchEvent(new CustomEvent('nexus:open-chat', {detail:{\n action_payload:{question: 'Analyze the result of experiment \"' + form.title + '\" (' + (form.outcome || '?') + ', uplift ' + (form.uplift_pct ?? 'N/A') + '%) and recommend the next 3 follow-up experiments scored by ICE.'}\n }})),\n className:'text-[10px] px-2 py-1 rounded-full bg-surface-container-lowest border border-border-subtle hover:border-tertiary/40 text-on-surface-variant transition-colors'\n }, '✨ Plan follow-up experiments')\n )\n )\n ),\n // Footer\n h('div', {className:'p-lg border-t border-border-subtle bg-surface-container-high/20 flex items-center gap-2 flex-wrap'},\n isEdit && onDelete && h('button', {\n onClick: onDelete,\n className:'text-[11px] font-semibold uppercase tracking-widest text-error border border-error/30 bg-error/5 px-3 py-2 rounded-lg hover:bg-error/15 transition-all'\n }, h(Icon, {name:'delete', size:13, className:'inline mr-1'}), 'Delete'),\n h('div', {className:'flex-1'}),\n h(Btn, {onClick: onClose, variant:'ghost', size:'sm'}, 'Cancel'),\n isEdit && (form.status === 'queued' || form.status === 'idea') && onLifecycle && h(Btn, {\n onClick: handleRun, variant:'secondary', size:'sm'\n }, h(Icon, {name:'play_arrow', size:14}), 'Run'),\n isEdit && form.status === 'running' && onLifecycle && h(Btn, {\n onClick: handleComplete, variant:'secondary', size:'sm'\n }, h(Icon, {name:'check', size:14}), 'Complete'),\n h(Btn, {onClick: handleSave, variant:'primary', size:'sm', disabled: saving},\n saving ? h(Spinner, {size:13}) : h(Icon, {name:'save', size:14}),\n saving ? 'Saving…' : 'Save'\n )\n )\n )\n );\n}\n\nexport { ExperimentBoard as default };\n `;\n}\n",[382],"c7dabd5a-5f07-11f1-9bd8-1607ee4eb77e","frontend_crm2.ts","c7dabe40-5f07-11f1-9bd8-1607ee4eb77e",985,["D",1780462244747],"// frontend_crm2.ts — Wave 4 CRM analytics / lead-ops / productivity surfaces.\n// Served at /api/app-crm2 (router.ts MODULE_ROUTES), lazy-imported by frontend_crm.ts.\n// Emits an ES module that EXPORTS three React components consumed as new Sales-CRM sub-tabs:\n// ForecastDashboard — weighted forecast, leaderboard, aging+stuck, velocity, conversion,\n// snapshot trend (+ capture), quota panel (set target + attainment).\n// LeadsDesk — graded lead table (A/B/C/D), SLA badge, row actions, filters.\n// ProductivityPanel — (a) templates + live render preview + sequences; (b) dedupe + merge.\n//\n// Backend (all tenant-scoped JSON; confirmed against api/analytics_crm.ts, snapshots.ts,\n// leads_crm.ts, templates.ts, dedupe.ts, crm_routes.ts):\n// GET /api/crm/forecast | /leaderboard?period | /aging | /velocity | /conversion\n// GET /api/crm/snapshots | POST /api/crm/snapshots\n// GET /api/crm/quota?period | PUT /api/crm/quota | GET /api/crm/quotas\n// GET /api/crm/leads?grade=&owner=&status= | POST /api/crm/leads/:email/(grade|assign|respond|status)\n// GET /api/crm/templates | POST | PUT/:id | DELETE/:id | POST/:id/render\n// GET /api/crm/sequences | POST | GET/POST /:id/steps\n// GET /api/crm/dedupe/(contacts|accounts|deals) | POST /api/crm/dedupe/(merge-contacts|merge-accounts)\n//\n// Reuses the SAME visual language as frontend_crm.ts (STAGE_META, fmtMoney, fmtRel, Btn/Spinner/Icon\n// from window.__nexus). REAL DATA ONLY — honest empty states, no mock rows.\nexport function getCRM2JS(): string {\n return `\nimport React, { useState, useEffect, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// ─── Shared helpers (mirrored from frontend_crm.ts) ────────────────────────────\nconst STAGES = ['lead','qualified','proposal','negotiation','won','lost'];\nconst STAGE_META = {\n lead: {label:'Lead', dot:'bg-text-muted', accent:'text-text-muted', chip:'bg-surface-container-high text-on-surface-variant border-border-subtle', bar:'#64748b'},\n qualified: {label:'Qualified', dot:'bg-primary', accent:'text-primary', chip:'bg-primary/10 text-primary border-primary/30', bar:'#c0c1ff'},\n proposal: {label:'Proposal', dot:'bg-tertiary', accent:'text-tertiary', chip:'bg-tertiary/10 text-tertiary border-tertiary/30', bar:'#d0bcff'},\n negotiation: {label:'Negotiation', dot:'bg-secondary', accent:'text-secondary', chip:'bg-secondary/10 text-secondary border-secondary/30', bar:'#4edea3'},\n won: {label:'Won', dot:'bg-secondary', accent:'text-secondary', chip:'bg-secondary/15 text-secondary border-secondary/40', bar:'#6ffbbe'},\n lost: {label:'Lost', dot:'bg-error', accent:'text-error', chip:'bg-error/10 text-error border-error/30', bar:'#ffb4ab'},\n};\nconst stMeta = (s) => STAGE_META[s] || STAGE_META.lead;\n\nconst fmtMoney = (n) => {\n const v = Number(n) || 0;\n if (v >= 1000000) return '$' + (v/1000000).toFixed(1).replace(/\\\\.0$/,'') + 'M';\n if (v >= 1000) return '$' + (v/1000).toFixed(1).replace(/\\\\.0$/,'') + 'K';\n return '$' + v.toLocaleString();\n};\nconst fmtRel = (iso) => {\n if (!iso) return '';\n const ms = Date.now() - new Date(iso).getTime();\n if (isNaN(ms)) return '';\n if (ms < 3600000) return Math.max(1, Math.floor(ms/60000)) + 'm ago';\n if (ms < 86400000) return Math.floor(ms/3600000) + 'h ago';\n if (ms < 2592000000) return Math.floor(ms/86400000) + 'd ago';\n return new Date(iso).toLocaleDateString('en-US', {month:'short', day:'numeric'});\n};\nconst initialsOf = (name) => (name||'?').trim().split(/\\\\s+/).slice(0,2).map(s => s[0]||'').join('').toUpperCase() || '?';\nconst colorFromName = (name) => {\n const colors = ['#c0c1ff','#4edea3','#d0bcff','#8083ff','#6ffbbe','#a078ff','#e1e0ff','#494bd6'];\n const sum = (name||'').split('').reduce((a,c) => a + c.charCodeAt(0), 0);\n return colors[sum % colors.length];\n};\nconst pct = (n) => (n == null || isNaN(Number(n))) ? '—' : (Math.round(Number(n) * 10) / 10) + '%';\nconst ownerLabel = (o) => (o == null || String(o).trim() === '') ? '(unassigned)' : String(o);\n\n// Current period helpers for the quota panel (default selectors).\nconst currentQuarter = () => { const d = new Date(); return d.getUTCFullYear() + '-Q' + (Math.floor(d.getUTCMonth()/3) + 1); };\nconst currentMonth = () => { const d = new Date(); return d.getUTCFullYear() + '-' + String(d.getUTCMonth()+1).padStart(2,'0'); };\n\n// ─── Small shared UI atoms ─────────────────────────────────────────────────────\nfunction Section({title, icon, accent, right, children, sub}) {\n const { Icon } = N();\n return h('div', {className:'glass-panel rounded-xl p-lg space-y-4'},\n h('div', {className:'flex items-start justify-between gap-3'},\n h('div', {className:'min-w-0'},\n h('div', {className:'flex items-center gap-2'},\n icon && h(Icon, {name: icon, size:16, className: accent || 'text-primary'}),\n h('h3', {className:'text-[14px] font-bold text-on-surface'}, title)\n ),\n sub && h('div', {className:'text-[11px] text-text-muted mt-0.5'}, sub)\n ),\n right\n ),\n children\n );\n}\nconst EmptyNote = (msg) => h('div', {className:'text-[12px] text-text-muted italic py-2'}, msg);\n\n// Horizontal labeled bar (clean Tailwind — charts module isn't on window.__nexus).\nfunction HBar({label, value, max, color, valueText, sub}) {\n const w = max > 0 ? Math.max(2, (Number(value)||0) / max * 100) : 0;\n return h('div', {className:'flex items-center gap-2'},\n h('div', {className:'text-[11px] text-on-surface-variant truncate flex-shrink-0 text-right', style:{width:120}}, label),\n h('div', {className:'flex-1 h-5 bg-surface-container-high rounded overflow-hidden relative'},\n h('div', {className:'h-full rounded transition-all duration-500', style:{width: w + '%', background: color || '#c0c1ff'}})\n ),\n h('div', {className:'text-[11px] text-text-muted text-right flex-shrink-0 font-mono-data', style:{width: sub ? 92 : 60}}, valueText)\n );\n}\n\n// Lightweight inline sparkline (snapshot trend).\nfunction MiniSpark({data, color, width, height}) {\n const w = width || 200, ht = height || 40;\n if (!data || data.length < 2) return null;\n const mn = Math.min(...data), mx = Math.max(...data), r = mx - mn || 1;\n const pts = data.map((v,i) => [(i/(data.length-1))*w, ht-((v-mn)/r)*(ht-6)+3].join(',')).join(' ');\n return h('svg', {width: w, height: ht, style:{overflow:'visible', display:'block'}},\n h('polyline', {points: pts, fill:'none', stroke: color || '#c0c1ff', strokeWidth: 2, strokeLinejoin:'round', strokeLinecap:'round'})\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 1) FORECAST DASHBOARD\n// ═══════════════════════════════════════════════════════════════════════════════\nexport function ForecastDashboard({onOpenDeal}) {\n const { Icon, Btn, Spinner } = N();\n const [period, setPeriod] = useState('');\n const [forecast, setForecast] = useState(null);\n const [board, setBoard] = useState(null);\n const [aging, setAging] = useState(null);\n const [velocity, setVelocity] = useState(null);\n const [conversion, setConversion] = useState(null);\n const [snapshots, setSnapshots] = useState(null);\n const [capturing, setCapturing] = useState(false);\n\n const getJSON = (u) => fetch(u).then(r => r.json()).catch(() => null);\n const loadCore = useCallback(() => {\n getJSON('/api/crm/forecast').then(d => setForecast(d || {}));\n getJSON('/api/crm/aging').then(d => setAging(d || {}));\n getJSON('/api/crm/velocity').then(d => setVelocity(d || {}));\n getJSON('/api/crm/conversion').then(d => setConversion(d || {}));\n getJSON('/api/crm/snapshots').then(d => setSnapshots(Array.isArray(d) ? d : []));\n }, []);\n const loadBoard = useCallback(() => {\n const u = '/api/crm/leaderboard' + (period ? '?period=' + encodeURIComponent(period) : '');\n getJSON(u).then(d => setBoard(Array.isArray(d) ? d : []));\n }, [period]);\n useEffect(() => { loadCore(); }, [loadCore]);\n useEffect(() => { loadBoard(); }, [loadBoard]);\n\n const capture = async () => {\n setCapturing(true);\n await fetch('/api/crm/snapshots', {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'}).catch(()=>{});\n setCapturing(false);\n getJSON('/api/crm/snapshots').then(d => setSnapshots(Array.isArray(d) ? d : []));\n };\n\n if (forecast === null) return h('div', {className:'glass-panel rounded-xl p-12 flex items-center justify-center'}, h(Spinner,{size:20}));\n\n const byStage = Array.isArray(forecast.by_stage) ? forecast.by_stage : [];\n const commit = forecast.commit || {deal_count:0, amount:0, weighted_amount:0};\n const bestCase = forecast.best_case || {deal_count:0, amount:0, weighted_amount:0};\n const totalOpen = forecast.total_open || {deal_count:0, amount:0, weighted_amount:0};\n const wonRollup = forecast.won || null;\n const maxStageW = Math.max(1, ...byStage.map(s => Number(s.weighted_amount)||0));\n\n // Roll-up cards: commit / best-case / total-open (+ won if the API returns it).\n const card = (label, bucket, icon, accent, tint) => h('div', {className:'rounded-xl border border-border-subtle bg-surface-container-lowest p-4 flex flex-col gap-1'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name: icon, size:15, className: accent}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, label)\n ),\n h('div', {className:'text-[22px] font-extrabold text-on-surface font-mono-data leading-none mt-1'}, fmtMoney(bucket.weighted_amount)),\n h('div', {className:'text-[11px] text-text-muted'}, 'weighted \\\\u00B7 ' + fmtMoney(bucket.amount) + ' total'),\n h('div', {className:'text-[11px] ' + accent + ' font-semibold'}, (Number(bucket.deal_count)||0) + ' deal' + ((Number(bucket.deal_count)||0)===1?'':'s'))\n );\n\n return h('div', {className:'space-y-lg'},\n\n // Roll-up forecast cards\n h('div', {className:'grid grid-cols-1 sm:grid-cols-2 ' + (wonRollup ? 'lg:grid-cols-4' : 'lg:grid-cols-3') + ' gap-md'},\n card('Commit', commit, 'verified', 'text-secondary'),\n card('Best case', bestCase, 'trending_up', 'text-tertiary'),\n card('Total open', totalOpen, 'monitoring', 'text-primary'),\n wonRollup && card('Won', wonRollup, 'trophy', 'text-secondary')\n ),\n\n // Weighted pipeline by stage\n h(Section, {title:'Weighted pipeline by stage', icon:'bar_chart', accent:'text-primary',\n sub:'Open deals only \\\\u00B7 weighted = amount \\\\u00D7 probability'},\n byStage.length === 0\n ? EmptyNote('No open deals in the pipeline yet.')\n : h('div', {className:'space-y-2'},\n byStage.map(s => h('div', {key:s.stage, className:'flex items-center gap-2'},\n h('div', {className:'flex items-center gap-1.5 flex-shrink-0', style:{width:120}},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + stMeta(s.stage).dot}),\n h('span', {className:'text-[11px] font-bold uppercase tracking-wider ' + stMeta(s.stage).accent}, stMeta(s.stage).label)\n ),\n h('div', {className:'flex-1 h-5 bg-surface-container-high rounded overflow-hidden relative'},\n h('div', {className:'h-full rounded transition-all duration-500', style:{width: ((Number(s.weighted_amount)||0)/maxStageW*100) + '%', background: stMeta(s.stage).bar}})\n ),\n h('div', {className:'flex-shrink-0 text-right', style:{width:118}},\n h('span', {className:'text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(s.weighted_amount)),\n h('span', {className:'text-[10px] text-text-muted font-mono-data'}, ' / ' + fmtMoney(s.amount))\n ),\n h('div', {className:'flex-shrink-0 text-[10px] text-text-muted font-mono-data text-right', style:{width:40}}, (Number(s.deal_count)||0) + 'd')\n ))\n )\n ),\n\n // Owner leaderboard\n h(Section, {title:'Owner leaderboard', icon:'leaderboard', accent:'text-tertiary',\n sub: period ? 'Won credited to ' + period : 'Won (all-time) + live open pipeline',\n right: h('div', {className:'flex items-center gap-2'},\n h('input', {type:'text', value: period, onChange: e => setPeriod(e.target.value), placeholder: currentQuarter(),\n className:'w-28 bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none font-mono-data'}),\n period && h('button', {onClick: () => setPeriod(''), className:'text-[11px] text-text-muted hover:text-on-surface'}, 'Clear')\n )},\n board === null\n ? h('div', {className:'flex items-center justify-center py-6'}, h(Spinner,{size:16}))\n : board.length === 0\n ? EmptyNote('No owner data yet — assign owners to deals to populate the leaderboard.')\n : h('div', {className:'overflow-hidden rounded-lg border border-border-subtle'},\n h('div', {className:'grid grid-cols-12 gap-2 px-3 py-2 text-[10px] uppercase tracking-widest text-text-muted bg-surface-container/40 font-bold'},\n h('div', {className:'col-span-1'}, '#'),\n h('div', {className:'col-span-4'}, 'Owner'),\n h('div', {className:'col-span-2 text-right'}, 'Won'),\n h('div', {className:'col-span-2 text-right'}, 'Open'),\n h('div', {className:'col-span-3 text-right'}, 'Weighted open')\n ),\n board.map((r,i) => h('div', {key: (r.owner||'') + i, className:'grid grid-cols-12 gap-2 px-3 py-2 items-center border-t border-border-subtle/50'},\n h('div', {className:'col-span-1 text-[12px] font-mono-data text-text-muted'}, r.rank != null ? r.rank : (i+1)),\n h('div', {className:'col-span-4 flex items-center gap-2 min-w-0'},\n h('span', {className:'w-6 h-6 rounded-full flex items-center justify-center text-[9px] font-bold flex-shrink-0', style:{background:colorFromName(ownerLabel(r.owner))+'33', color:colorFromName(ownerLabel(r.owner))}}, initialsOf(ownerLabel(r.owner))),\n h('span', {className:'text-[12px] font-semibold text-on-surface truncate'}, ownerLabel(r.owner))\n ),\n h('div', {className:'col-span-2 text-right'},\n h('div', {className:'text-[12px] font-mono-data font-bold text-secondary'}, fmtMoney(r.won_amount)),\n h('div', {className:'text-[10px] text-text-muted font-mono-data'}, (Number(r.won_count)||0) + ' won')\n ),\n h('div', {className:'col-span-2 text-right'},\n h('div', {className:'text-[12px] font-mono-data text-on-surface'}, fmtMoney(r.open_amount)),\n h('div', {className:'text-[10px] text-text-muted font-mono-data'}, (Number(r.open_count)||0) + ' open')\n ),\n h('div', {className:'col-span-3 text-right text-[12px] font-mono-data text-primary'}, fmtMoney(r.open_weighted_amount))\n ))\n )\n ),\n\n // Aging buckets + stuck deals\n h(AgingPanel, {aging, onOpenDeal}),\n\n // Velocity\n h(VelocityPanel, {velocity}),\n\n // Conversion funnel\n h(ConversionPanel, {conversion}),\n\n // Snapshot trend\n h(SnapshotPanel, {snapshots, capturing, onCapture: capture}),\n\n // Quota panel\n h(QuotaPanel, {})\n );\n}\n\nfunction AgingPanel({aging, onOpenDeal}) {\n const { Spinner } = N();\n if (aging === null) return h(Section, {title:'Deal aging', icon:'schedule', accent:'text-primary'}, h('div', {className:'flex items-center justify-center py-6'}, h(Spinner,{size:16})));\n const buckets = Array.isArray(aging.buckets) ? aging.buckets : [];\n const stuck = Array.isArray(aging.stuck) ? aging.stuck : [];\n const maxB = Math.max(1, ...buckets.map(b => Number(b.amount)||0));\n const bucketColor = {'0-7':'#4edea3','8-30':'#c0c1ff','31-90':'#d0bcff','90+':'#ffb4ab'};\n return h(Section, {title:'Deal aging', icon:'schedule', accent:'text-primary',\n sub:'Open deals bucketed by days since last activity \\\\u00B7 ' + (Number(aging.total_open)||0) + ' open'},\n buckets.length === 0\n ? EmptyNote('No open deals to age.')\n : h('div', {className:'space-y-2'},\n buckets.map(b => h(HBar, {key:b.bucket, label: b.bucket + ' days', value: b.amount, max: maxB,\n color: bucketColor[b.bucket] || '#c0c1ff', valueText: fmtMoney(b.amount) + ' \\\\u00B7 ' + (Number(b.deal_count)||0)}))\n ),\n h('div', {className:'pt-3 mt-1 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2'}, 'Stuck deals (31+ days idle)'),\n stuck.length === 0\n ? EmptyNote('Nothing stuck — every open deal had activity in the last 30 days.')\n : h('div', {className:'space-y-1.5'},\n stuck.slice(0,12).map(d => h('button', {key:d.id, onClick: () => onOpenDeal && onOpenDeal(d.id),\n className:'w-full flex items-center gap-2 text-left bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 hover:border-primary/40 transition-all'},\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, d.company || d.title || 'Deal'),\n h('div', {className:'text-[10px]'},\n h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider border ' + stMeta(d.stage).chip}, stMeta(d.stage).label),\n d.owner && h('span', {className:'text-text-muted ml-1.5'}, ownerLabel(d.owner))\n )\n ),\n h('div', {className:'flex-shrink-0 text-right'},\n h('div', {className:'text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(d.amount)),\n h('div', {className:'text-[10px] text-error font-mono-data'}, (Number(d.days_idle)||0) + 'd idle')\n )\n ))\n )\n )\n );\n}\n\nfunction VelocityPanel({velocity}) {\n const { Icon, Spinner } = N();\n if (velocity === null) return h(Section, {title:'Stage velocity', icon:'speed', accent:'text-tertiary'}, h('div', {className:'flex items-center justify-center py-6'}, h(Spinner,{size:16})));\n const byStage = (Array.isArray(velocity.by_stage) ? velocity.by_stage : []).filter(s => s.avg_days_in_stage != null);\n const cycle = velocity.avg_sales_cycle_days;\n const maxD = Math.max(1, ...byStage.map(s => Number(s.avg_days_in_stage)||0));\n return h(Section, {title:'Stage velocity', icon:'speed', accent:'text-tertiary',\n sub:'Average days a deal spends in each stage',\n right: cycle != null && h('div', {className:'text-right'},\n h('div', {className:'text-[18px] font-extrabold text-on-surface font-mono-data leading-none'}, cycle + 'd'),\n h('div', {className:'text-[10px] text-text-muted'}, 'avg sales cycle' + (velocity.won_deals_measured ? ' \\\\u00B7 ' + velocity.won_deals_measured + ' won' : ''))\n )},\n byStage.length === 0\n ? EmptyNote('No stage-history yet — velocity fills in as deals move between stages.')\n : h('div', {className:'space-y-2'},\n byStage.map(s => h(HBar, {key:s.stage, label: stMeta(s.stage).label, value: s.avg_days_in_stage, max: maxD,\n color: stMeta(s.stage).bar, valueText: (Number(s.avg_days_in_stage)||0) + 'd \\\\u00B7 n' + (Number(s.sample_size)||0)}))\n )\n );\n}\n\nfunction ConversionPanel({conversion}) {\n const { Icon, Spinner } = N();\n if (conversion === null) return h(Section, {title:'Stage conversion', icon:'filter_alt', accent:'text-secondary'}, h('div', {className:'flex items-center justify-center py-6'}, h(Spinner,{size:16})));\n const stages = Array.isArray(conversion.stages) ? conversion.stages : [];\n const transitions = Array.isArray(conversion.transitions) ? conversion.transitions : [];\n const maxReached = Math.max(1, ...stages.map(s => Number(s.reached)||0));\n return h(Section, {title:'Stage conversion', icon:'filter_alt', accent:'text-secondary',\n sub:'How many deals reach each stage, and the stage\\\\u2192stage rate'},\n stages.length === 0 || maxReached <= 1 && transitions.every(t => t.conversion_pct == null)\n ? EmptyNote('Not enough stage history to compute conversion yet.')\n : h('div', {className:'space-y-3'},\n // Funnel — reached counts per stage\n h('div', {className:'space-y-2'},\n stages.map(s => h(HBar, {key:s.stage, label: stMeta(s.stage).label, value: s.reached, max: maxReached,\n color: stMeta(s.stage).bar, valueText: (Number(s.reached)||0) + ' deals'}))\n ),\n // Transition rates\n transitions.length > 0 && h('div', {className:'flex flex-wrap gap-2 pt-1'},\n transitions.map((t,i) => h('div', {key:i, className:'flex items-center gap-1.5 bg-surface-container-lowest border border-border-subtle rounded-lg px-2.5 py-1.5'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-wider ' + stMeta(t.from_stage).accent}, stMeta(t.from_stage).label),\n h(Icon, {name:'arrow_forward', size:12, className:'text-text-muted'}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-wider ' + stMeta(t.to_stage).accent}, stMeta(t.to_stage).label),\n h('span', {className:'text-[12px] font-mono-data font-bold ' + (t.conversion_pct != null && Number(t.conversion_pct) >= 50 ? 'text-secondary' : 'text-on-surface') + ' ml-1'}, pct(t.conversion_pct))\n ))\n )\n )\n );\n}\n\nfunction SnapshotPanel({snapshots, capturing, onCapture}) {\n const { Icon, Btn, Spinner } = N();\n // Group snapshot rows (one per stage per date) into per-date totals for the trend.\n const byDate = {};\n (snapshots || []).forEach(r => {\n const d = r.snapshot_date;\n if (!byDate[d]) byDate[d] = {date:d, total_amount:0, weighted_amount:0, deal_count:0};\n byDate[d].total_amount += Number(r.total_amount)||0;\n byDate[d].weighted_amount += Number(r.weighted_amount)||0;\n byDate[d].deal_count += Number(r.deal_count)||0;\n });\n const days = Object.values(byDate).sort((a,b) => String(a.date).localeCompare(String(b.date)));\n const latest = days.length ? days[days.length-1] : null;\n const spark = days.map(d => d.weighted_amount);\n return h(Section, {title:'Pipeline snapshot trend', icon:'show_chart', accent:'text-primary',\n sub:'Weighted pipeline captured over time',\n right: h(Btn, {onClick: onCapture, variant:'secondary', size:'sm', disabled: capturing},\n capturing ? h(Spinner,{size:13}) : h(Icon,{name:'camera',size:14}), 'Capture snapshot')},\n snapshots === null\n ? h('div', {className:'flex items-center justify-center py-6'}, h(Spinner,{size:16}))\n : days.length === 0\n ? EmptyNote('No snapshots captured yet — click \\\\u201CCapture snapshot\\\\u201D to record today\\\\u2019s pipeline.')\n : days.length === 1\n ? h('div', {className:'flex items-center justify-between bg-surface-container-lowest border border-border-subtle rounded-lg px-4 py-3'},\n h('div', null,\n h('div', {className:'text-[11px] text-text-muted'}, days[0].date),\n h('div', {className:'text-[18px] font-extrabold text-on-surface font-mono-data'}, fmtMoney(days[0].weighted_amount))\n ),\n h('div', {className:'text-[11px] text-text-muted text-right'}, 'One snapshot so far \\\\u2014', h('br'), 'capture again tomorrow to see a trend.')\n )\n : h('div', {className:'space-y-3'},\n h('div', {className:'flex items-end justify-between gap-4'},\n h('div', null,\n h('div', {className:'text-[10px] text-text-muted'}, 'Latest weighted (' + (latest ? latest.date : '') + ')'),\n h('div', {className:'text-[22px] font-extrabold text-on-surface font-mono-data leading-none'}, fmtMoney(latest ? latest.weighted_amount : 0))\n ),\n h(MiniSpark, {data: spark, color:'#c0c1ff', width: 240, height: 44})\n ),\n h('div', {className:'flex flex-wrap gap-1.5'},\n days.slice(-8).map(d => h('div', {key:d.date, className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1'},\n h('div', {className:'text-[9px] text-text-muted font-mono-data'}, String(d.date).slice(5)),\n h('div', {className:'text-[11px] font-mono-data font-bold text-on-surface'}, fmtMoney(d.weighted_amount))\n ))\n )\n )\n );\n}\n\nfunction QuotaPanel() {\n const { Icon, Btn, Spinner } = N();\n const [period, setPeriod] = useState(currentQuarter());\n const [rows, setRows] = useState(null);\n const [draft, setDraft] = useState({owner:'', target_amount:''});\n const [busy, setBusy] = useState(false);\n\n const load = useCallback(() => {\n fetch('/api/crm/quota?period=' + encodeURIComponent(period)).then(r => r.json())\n .then(d => setRows(Array.isArray(d) ? d : []))\n .catch(() => setRows([]));\n }, [period]);\n useEffect(() => { load(); }, [load]);\n\n const inferType = (p) => /Q[1-4]$/i.test(p) ? 'quarter' : (/^\\\\d{4}-\\\\d{2}$/.test(p) ? 'month' : (/^\\\\d{4}$/.test(p) ? 'year' : 'quarter'));\n const save = async () => {\n const owner = String(draft.owner).trim();\n if (!owner || !period.trim()) return;\n setBusy(true);\n await fetch('/api/crm/quota', {method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({owner, period: period.trim(), period_type: inferType(period.trim()), target_amount: Number(draft.target_amount)||0})}).catch(()=>{});\n setBusy(false); setDraft({owner:'', target_amount:''}); load();\n };\n\n return h(Section, {title:'Quota attainment', icon:'target', accent:'text-secondary',\n sub:'Closed-won vs target per owner',\n right: h('div', {className:'flex items-center gap-2'},\n h('input', {type:'text', value: period, onChange: e => setPeriod(e.target.value), placeholder: currentQuarter(),\n className:'w-28 bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none font-mono-data'}),\n h('button', {onClick: () => setPeriod(currentQuarter()), className:'text-[11px] text-text-muted hover:text-on-surface', title:'This quarter'}, 'Qtr'),\n h('button', {onClick: () => setPeriod(currentMonth()), className:'text-[11px] text-text-muted hover:text-on-surface', title:'This month'}, 'Mo')\n )},\n // Set-target row\n h('div', {className:'flex items-end gap-2 bg-surface-container-lowest border border-border-subtle rounded-lg p-2.5'},\n h('div', {className:'flex-1 flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Owner'),\n h('input', {type:'text', value: draft.owner, onChange: e => setDraft(d => ({...d, owner: e.target.value})), placeholder:'owner@company.com',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('div', {className:'w-32 flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Target (USD)'),\n h('input', {type:'number', value: draft.target_amount, onChange: e => setDraft(d => ({...d, target_amount: e.target.value})), placeholder:'100000',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n h('button', {onClick: save, disabled: busy || !String(draft.owner).trim(),\n className:'flex-shrink-0 px-3 py-1.5 rounded-md bg-secondary text-on-secondary text-[12px] font-semibold disabled:opacity-40 hover:bg-secondary/90 flex items-center gap-1'},\n busy ? h(Spinner,{size:12}) : h(Icon,{name:'save',size:14}), 'Set')\n ),\n // Attainment rows\n rows === null\n ? h('div', {className:'flex items-center justify-center py-6'}, h(Spinner,{size:16}))\n : rows.length === 0\n ? EmptyNote('No quota targets for ' + period + ' yet — set one above.')\n : h('div', {className:'space-y-2'},\n rows.map((r,i) => {\n const att = r.attainment_pct == null ? null : Number(r.attainment_pct);\n const barW = att == null ? 0 : Math.min(100, Math.max(2, att));\n const barColor = att == null ? '#64748b' : (att >= 100 ? '#4edea3' : att >= 60 ? '#c0c1ff' : '#d0bcff');\n return h('div', {key: (r.owner||'') + i, className:'bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2'},\n h('div', {className:'flex items-center justify-between gap-2 mb-1.5'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className:'w-6 h-6 rounded-full flex items-center justify-center text-[9px] font-bold flex-shrink-0', style:{background:colorFromName(ownerLabel(r.owner))+'33', color:colorFromName(ownerLabel(r.owner))}}, initialsOf(ownerLabel(r.owner))),\n h('span', {className:'text-[12px] font-semibold text-on-surface truncate'}, ownerLabel(r.owner))\n ),\n h('div', {className:'flex items-center gap-2 flex-shrink-0 text-right'},\n h('span', {className:'text-[12px] font-mono-data font-bold text-secondary'}, fmtMoney(r.won_amount)),\n h('span', {className:'text-[10px] text-text-muted font-mono-data'}, '/ ' + fmtMoney(r.target_amount)),\n h('span', {className:'text-[12px] font-mono-data font-bold ' + (att != null && att >= 100 ? 'text-secondary' : 'text-on-surface'), style:{width:54, display:'inline-block'}}, pct(att))\n )\n ),\n h('div', {className:'h-2 bg-surface-container-high rounded overflow-hidden'},\n h('div', {className:'h-full rounded transition-all duration-500', style:{width: barW + '%', background: barColor}})\n ),\n Number(r.gap) > 0 && h('div', {className:'text-[10px] text-text-muted mt-1 font-mono-data'}, fmtMoney(r.gap) + ' to target')\n );\n })\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 2) LEADS DESK\n// ═══════════════════════════════════════════════════════════════════════════════\nconst GRADE_META = {\n A: {chip:'bg-secondary/15 text-secondary border-secondary/40'},\n B: {chip:'bg-primary/10 text-primary border-primary/30'},\n C: {chip:'bg-tertiary/10 text-tertiary border-tertiary/30'},\n D: {chip:'bg-surface-container-high text-on-surface-variant border-border-subtle'},\n};\nconst gradeMeta = (g) => GRADE_META[String(g||'').toUpperCase()] || {chip:'bg-surface-container-high text-text-muted border-border-subtle'};\nconst SLA_META = {\n met: {label:'SLA met', chip:'bg-secondary/15 text-secondary border-secondary/40'},\n missed: {label:'SLA missed', chip:'bg-error/10 text-error border-error/30'},\n pending: {label:'SLA pending', chip:'bg-tertiary/10 text-tertiary border-tertiary/30'},\n};\nconst STATUS_LIST = ['new','working','qualified','disqualified'];\nconst statusChip = (s) => ({\n new:'bg-surface-container-high text-on-surface-variant border-border-subtle',\n working:'bg-primary/10 text-primary border-primary/30',\n qualified:'bg-secondary/15 text-secondary border-secondary/40',\n disqualified:'bg-error/10 text-error border-error/30',\n})[s] || 'bg-surface-container-high text-text-muted border-border-subtle';\n\nexport function LeadsDesk({onOpenContact}) {\n const { Icon, Btn, Spinner } = N();\n const [leads, setLeads] = useState(null);\n const [filters, setFilters] = useState({grade:'', owner:'', status:''});\n const [busyEmail, setBusyEmail] = useState('');\n const [assignFor, setAssignFor] = useState('');\n const [assignVal, setAssignVal] = useState('');\n\n const load = useCallback(() => {\n const qs = [];\n if (filters.grade) qs.push('grade=' + encodeURIComponent(filters.grade));\n if (filters.owner) qs.push('owner=' + encodeURIComponent(filters.owner));\n if (filters.status) qs.push('status=' + encodeURIComponent(filters.status));\n fetch('/api/crm/leads' + (qs.length ? '?' + qs.join('&') : '')).then(r => r.json())\n .then(d => setLeads(Array.isArray(d) ? d : []))\n .catch(() => setLeads([]));\n }, [filters]);\n useEffect(() => { load(); }, [load]);\n\n // Owner suggestions for assignment: distinct owners already seen on leads (free text otherwise).\n const ownerOptions = Array.from(new Set((leads || []).map(l => l.owner).filter(Boolean).map(String)));\n\n const act = async (email, path, body) => {\n setBusyEmail(email);\n await fetch('/api/crm/leads/' + encodeURIComponent(email) + '/' + path, {method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify(body || {})}).catch(()=>{});\n setBusyEmail('');\n load();\n };\n const submitAssign = async (email) => {\n const owner = String(assignVal).trim();\n if (!owner) return;\n setAssignFor(''); setAssignVal('');\n await act(email, 'assign', {owner});\n };\n\n const fbtn = (k, v, label) => h('button', {key: k+v, onClick: () => setFilters(f => ({...f, [k]: f[k]===v ? '' : v})),\n className:'px-2 py-0.5 rounded-md text-[11px] font-semibold border ' + (filters[k]===v ? 'bg-primary text-white border-primary' : 'bg-surface-container border-border-subtle text-text-muted hover:text-on-surface')}, label);\n\n return h('div', {className:'space-y-lg'},\n h(Section, {title:'Lead ops desk', icon:'filter_alt', accent:'text-primary',\n sub:'Grade, route and SLA-track leads derived from your intent signals',\n right: h('div', {className:'flex items-center gap-2'},\n N().Spinner && leads === null && h(Spinner,{size:14}),\n h(Btn, {onClick: load, variant:'secondary', size:'sm'}, h(Icon,{name:'refresh',size:14}), 'Refresh')\n )},\n // Filters\n h('div', {className:'flex flex-wrap items-center gap-3 mb-1'},\n h('div', {className:'flex items-center gap-1.5'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Grade'),\n ['A','B','C','D'].map(g => fbtn('grade', g, g))\n ),\n h('div', {className:'flex items-center gap-1.5'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Status'),\n STATUS_LIST.map(s => fbtn('status', s, s))\n ),\n h('input', {type:'text', value: filters.owner, onChange: e => setFilters(f => ({...f, owner: e.target.value})), placeholder:'Filter owner\\\\u2026',\n className:'w-44 bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'}),\n (filters.grade || filters.owner || filters.status) && h('button', {onClick: () => setFilters({grade:'', owner:'', status:''}), className:'text-[11px] text-text-muted hover:text-on-surface'}, 'Clear all')\n ),\n // Table\n leads === null\n ? h('div', {className:'flex items-center justify-center py-10'}, h(Spinner,{size:18}))\n : leads.length === 0\n ? h('div', {className:'px-4 py-10 text-center text-[13px] text-text-muted'},\n (filters.grade || filters.owner || filters.status)\n ? 'No leads match these filters.'\n : 'No intent signals captured yet \\\\u2014 leads appear here once your email/calendar integrations detect prospect activity.')\n : h('div', {className:'overflow-hidden rounded-lg border border-border-subtle'},\n h('div', {className:'grid grid-cols-12 gap-2 px-3 py-2 text-[10px] uppercase tracking-widest text-text-muted bg-surface-container/40 font-bold'},\n h('div', {className:'col-span-1'}, 'Grade'),\n h('div', {className:'col-span-3'}, 'Lead'),\n h('div', {className:'col-span-2'}, 'Signals'),\n h('div', {className:'col-span-2'}, 'Owner'),\n h('div', {className:'col-span-2'}, 'Status / SLA'),\n h('div', {className:'col-span-2 text-right'}, 'Actions')\n ),\n leads.map(l => h(LeadRow, {key: l.lead_email, lead: l, busy: busyEmail === l.lead_email,\n onOpenContact, onAct: act,\n assigning: assignFor === l.lead_email, assignVal, setAssignVal,\n onStartAssign: () => { setAssignFor(l.lead_email); setAssignVal(l.owner || ''); },\n onCancelAssign: () => { setAssignFor(''); setAssignVal(''); },\n onSubmitAssign: () => submitAssign(l.lead_email),\n ownerOptions}))\n )\n )\n );\n}\n\nfunction LeadRow({lead, busy, onOpenContact, onAct, assigning, assignVal, setAssignVal, onStartAssign, onCancelAssign, onSubmitAssign, ownerOptions}) {\n const { Icon, Spinner } = N();\n const l = lead;\n const sla = l.sla ? (SLA_META[l.sla] || null) : null;\n const name = l.lead_name || l.company || l.lead_email;\n return h('div', {className:'grid grid-cols-12 gap-2 px-3 py-2.5 items-center border-t border-border-subtle/50'},\n // Grade\n h('div', {className:'col-span-1'},\n l.grade\n ? h('span', {className:'inline-flex items-center justify-center w-7 h-7 rounded-md text-[13px] font-extrabold border ' + gradeMeta(l.grade).chip}, String(l.grade).toUpperCase())\n : h('button', {onClick: () => onAct(l.lead_email, 'grade'), disabled: busy, title:'Grade this lead',\n className:'inline-flex items-center justify-center w-7 h-7 rounded-md text-[11px] border border-dashed border-border-subtle text-text-muted hover:text-on-surface hover:border-primary/40'},\n busy ? h(Spinner,{size:12}) : h(Icon,{name:'auto_awesome',size:14}))\n ),\n // Lead\n h('button', {onClick: () => onOpenContact && onOpenContact(l.lead_email), className:'col-span-3 flex items-center gap-2 min-w-0 text-left'},\n h('span', {className:'w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0', style:{background:colorFromName(name)+'33', color:colorFromName(name)}}, initialsOf(name)),\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate hover:text-primary'}, name),\n h('div', {className:'text-[10px] text-text-muted truncate'}, l.lead_email)\n )\n ),\n // Signals\n h('div', {className:'col-span-2'},\n h('div', {className:'text-[12px] text-on-surface font-mono-data'}, (Number(l.signal_count)||0) + ' signal' + ((Number(l.signal_count)||0)===1?'':'s')),\n h('div', {className:'text-[10px] text-text-muted'},\n (l.max_strength != null ? 'str ' + l.max_strength : '') + (l.last_signal_at ? (l.max_strength != null ? ' \\\\u00B7 ' : '') + fmtRel(l.last_signal_at) : ''))\n ),\n // Owner\n h('div', {className:'col-span-2 min-w-0'},\n assigning\n ? h('div', {className:'flex items-center gap-1'},\n h('input', {type:'text', value: assignVal, list:'lead-owner-options', onChange: e => setAssignVal(e.target.value), placeholder:'owner\\\\u2026', autoFocus:true,\n onKeyDown: e => { if (e.key === 'Enter') onSubmitAssign(); if (e.key === 'Escape') onCancelAssign(); },\n className:'w-full bg-surface-container-lowest border border-primary/40 rounded-md px-1.5 py-1 text-[11px] text-on-surface focus:outline-none'}),\n h('datalist', {id:'lead-owner-options'}, (ownerOptions||[]).map(o => h('option', {key:o, value:o}))),\n h('button', {onClick: onSubmitAssign, className:'flex-shrink-0 text-secondary hover:text-secondary/80', title:'Save'}, h(Icon,{name:'check',size:15})),\n h('button', {onClick: onCancelAssign, className:'flex-shrink-0 text-text-muted hover:text-on-surface', title:'Cancel'}, h(Icon,{name:'close',size:15}))\n )\n : h('button', {onClick: onStartAssign, className:'flex items-center gap-1.5 text-left max-w-full group', title:'Assign owner'},\n l.owner\n ? h('span', {className:'text-[12px] text-on-surface truncate group-hover:text-primary'}, l.owner)\n : h('span', {className:'text-[11px] text-text-muted italic group-hover:text-primary'}, 'Assign\\\\u2026'),\n h(Icon, {name:'edit', size:11, className:'text-text-muted opacity-0 group-hover:opacity-100 flex-shrink-0'})\n )\n ),\n // Status / SLA\n h('div', {className:'col-span-2 flex flex-col gap-1 items-start'},\n h('select', {value: l.status || 'new', onChange: e => onAct(l.lead_email, 'status', {status: e.target.value}),\n className:'text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded-full border focus:outline-none cursor-pointer ' + statusChip(l.status || 'new')},\n STATUS_LIST.map(s => h('option', {key:s, value:s, className:'bg-surface text-on-surface normal-case'}, s))\n ),\n sla && h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider border ' + sla.chip}, sla.label)\n ),\n // Actions\n h('div', {className:'col-span-2 flex items-center justify-end gap-1'},\n h('button', {onClick: () => onAct(l.lead_email, 'grade'), disabled: busy, title:'Re-grade',\n className:'w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40'}, h(Icon,{name:'auto_awesome',size:14})),\n h('button', {onClick: () => onAct(l.lead_email, 'respond'), disabled: busy || !!l.first_response_at, title: l.first_response_at ? 'Responded ' + fmtRel(l.first_response_at) : 'Mark responded',\n className:'w-7 h-7 rounded-md flex items-center justify-center border ' + (l.first_response_at ? 'border-secondary/40 text-secondary' : 'border-border-subtle text-text-muted hover:text-secondary hover:border-secondary/40')}, h(Icon,{name: l.first_response_at ? 'mark_email_read' : 'reply', size:14})),\n busy && h(Spinner,{size:13})\n )\n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// 3) PRODUCTIVITY PANEL\n// ═══════════════════════════════════════════════════════════════════════════════\nexport function ProductivityPanel() {\n const { Icon } = N();\n const [tab, setTab] = useState('templates');\n return h('div', {className:'space-y-lg'},\n h('div', {className:'inline-flex rounded-lg border border-border-subtle overflow-hidden'},\n [['templates','Templates & sequences','mail'],['dedupe','Deduplicate','merge']].map(([v,label,ic]) => h('button', {key:v, onClick: () => setTab(v),\n className:'px-3 py-1.5 text-[12px] font-semibold flex items-center gap-1.5 ' + (tab===v ? 'bg-primary text-white' : 'bg-surface-container text-text-muted hover:text-on-surface')},\n h(Icon,{name:ic,size:15}), label))\n ),\n tab === 'templates' ? h(TemplatesView, null) : h(DedupeView, null)\n );\n}\n\n// ─── Templates + sequences ──────────────────────────────────────────────────────\nconst SAMPLE_CTX = {first_name:'Alex', last_name:'Rivera', company:'Acme Corp', deal_title:'Q3 Expansion', owner:'you@company.com'};\n\nfunction TemplatesView() {\n const { Icon, Btn, Spinner } = N();\n const [templates, setTemplates] = useState(null);\n const [editing, setEditing] = useState(null); // template object or {} for new\n const [preview, setPreview] = useState(null); // {id, subject, body}\n const [previewBusy, setPreviewBusy] = useState(false);\n\n const load = useCallback(() => {\n fetch('/api/crm/templates').then(r => r.json()).then(d => setTemplates(Array.isArray(d) ? d : [])).catch(() => setTemplates([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const save = async (tpl) => {\n const body = {name: tpl.name, subject: tpl.subject, body: tpl.body, category: tpl.category};\n if (tpl.id) await fetch('/api/crm/templates/' + tpl.id, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n else await fetch('/api/crm/templates', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)}).catch(()=>{});\n setEditing(null); load();\n };\n const del = async (id) => {\n await fetch('/api/crm/templates/' + id, {method:'DELETE'}).catch(()=>{});\n if (preview && preview.id === id) setPreview(null);\n load();\n };\n const renderPreview = async (tpl) => {\n setPreviewBusy(true);\n const r = await fetch('/api/crm/templates/' + tpl.id + '/render', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(SAMPLE_CTX)}).then(x => x.json()).catch(() => null);\n setPreviewBusy(false);\n if (r && (r.subject != null || r.body != null)) setPreview({id: tpl.id, name: tpl.name, subject: r.subject, body: r.body});\n };\n\n return h('div', {className:'grid grid-cols-1 lg:grid-cols-2 gap-lg'},\n // Templates list\n h(Section, {title:'Email templates', icon:'mail', accent:'text-primary',\n sub:'{{merge_field}} placeholders rendered against sample data',\n right: h(Btn, {onClick: () => setEditing({name:'', subject:'', body:'', category:''}), variant:'primary', size:'sm'}, h(Icon,{name:'add',size:14}), 'New template')},\n templates === null\n ? h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}))\n : templates.length === 0\n ? EmptyNote('No templates yet \\\\u2014 create one to reuse across outreach.')\n : h('div', {className:'space-y-1.5'},\n templates.map(t => h('div', {key:t.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 flex items-center gap-2'},\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, t.name || '(untitled)'),\n h('div', {className:'text-[10px] text-text-muted truncate'}, (t.subject || 'No subject') + (t.category ? ' \\\\u00B7 ' + t.category : ''))\n ),\n h('button', {onClick: () => renderPreview(t), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-tertiary hover:border-tertiary/40', title:'Preview render'}, h(Icon,{name:'visibility',size:14})),\n h('button', {onClick: () => setEditing(t), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-primary hover:border-primary/40', title:'Edit'}, h(Icon,{name:'edit',size:14})),\n h('button', {onClick: () => del(t.id), className:'flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center border border-border-subtle text-text-muted hover:text-error hover:border-error/40', title:'Delete'}, h(Icon,{name:'delete',size:14}))\n ))\n ),\n // Editor\n editing && h(TemplateEditor, {tpl: editing, onCancel: () => setEditing(null), onSave: save}),\n // Live render preview\n h('div', {className:'pt-3 mt-1 border-t border-border-subtle'},\n h('div', {className:'flex items-center justify-between mb-1.5'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Render preview'),\n previewBusy && h(Spinner,{size:13})\n ),\n preview\n ? h('div', {className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-3 space-y-1.5'},\n h('div', {className:'text-[10px] text-text-muted'}, 'Sample: ' + Object.entries(SAMPLE_CTX).map(([k,v]) => k + '=' + v).slice(0,3).join(', ') + '\\\\u2026'),\n h('div', {className:'text-[12px] font-bold text-on-surface'}, preview.subject || '(no subject)'),\n h('div', {className:'text-[12px] text-on-surface-variant whitespace-pre-wrap'}, preview.body || '(empty body)')\n )\n : EmptyNote('Click the preview icon on a template to render it with sample merge data.')\n )\n ),\n // Sequences\n h(SequencesView, null)\n );\n}\n\nfunction TemplateEditor({tpl, onCancel, onSave}) {\n const { Icon, Btn } = N();\n const [f, setF] = useState({name: tpl.name||'', subject: tpl.subject||'', body: tpl.body||'', category: tpl.category||''});\n const [busy, setBusy] = useState(false);\n const set = (k,v) => setF(s => ({...s, [k]: v}));\n const submit = async () => { setBusy(true); await onSave({...tpl, ...f}); setBusy(false); };\n const inp = (label, key, ph) => h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, label),\n h('input', {type:'text', value: f[key], onChange: e => set(key, e.target.value), placeholder: ph,\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'})\n );\n return h('div', {className:'mt-2 bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2'},\n h('div', {className:'text-[11px] font-bold text-on-surface'}, tpl.id ? 'Edit template' : 'New template'),\n h('div', {className:'grid grid-cols-2 gap-2'}, inp('Name','name','Welcome email'), inp('Category','category','outreach')),\n inp('Subject','subject','Hi {{first_name}} \\\\u2014 about {{company}}'),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Body'),\n h('textarea', {value: f.body, onChange: e => set('body', e.target.value), rows:4, placeholder:'Hi {{first_name}},\\\\n\\\\nI noticed {{company}} is\\\\u2026',\n className:'bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none resize-none font-mono-data'})\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: submit, variant:'primary', size:'sm', disabled: busy || !String(f.name).trim()}, h(Icon,{name:'save',size:14}), 'Save'),\n h('button', {onClick: onCancel, className:'text-[12px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n );\n}\n\nfunction SequencesView() {\n const { Icon, Btn, Spinner } = N();\n const [sequences, setSequences] = useState(null);\n const [creating, setCreating] = useState(false);\n const [draft, setDraft] = useState({name:'', description:''});\n const [openId, setOpenId] = useState(null);\n\n const load = useCallback(() => {\n fetch('/api/crm/sequences').then(r => r.json()).then(d => setSequences(Array.isArray(d) ? d : [])).catch(() => setSequences([]));\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const create = async () => {\n if (!String(draft.name).trim()) return;\n await fetch('/api/crm/sequences', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({name: draft.name.trim(), description: draft.description.trim()})}).catch(()=>{});\n setDraft({name:'', description:''}); setCreating(false); load();\n };\n\n return h(Section, {title:'Sequences', icon:'cadence', accent:'text-tertiary',\n sub:'Multi-step cadences \\\\u00B7 add steps per sequence',\n right: h(Btn, {onClick: () => setCreating(v => !v), variant:'secondary', size:'sm'}, h(Icon,{name: creating ? 'close' : 'add',size:14}), creating ? 'Cancel' : 'New')},\n creating && h('div', {className:'bg-surface-container-lowest border border-primary/30 rounded-lg p-3 space-y-2 mb-2'},\n h('input', {type:'text', value: draft.name, onChange: e => setDraft(d => ({...d, name: e.target.value})), placeholder:'Sequence name',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h('input', {type:'text', value: draft.description, onChange: e => setDraft(d => ({...d, description: e.target.value})), placeholder:'Description (optional)',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h(Btn, {onClick: create, variant:'primary', size:'sm', disabled: !String(draft.name).trim()}, h(Icon,{name:'save',size:14}), 'Create sequence')\n ),\n sequences === null\n ? h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}))\n : sequences.length === 0\n ? EmptyNote('No sequences yet \\\\u2014 create one to build a cadence of steps.')\n : h('div', {className:'space-y-1.5'},\n sequences.map(s => h('div', {key:s.id, className:'bg-surface-container-lowest border border-border-subtle rounded-lg overflow-hidden'},\n h('button', {onClick: () => setOpenId(openId === s.id ? null : s.id), className:'w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-white/[0.02]'},\n h(Icon, {name: openId === s.id ? 'expand_more' : 'chevron_right', size:16, className:'text-text-muted flex-shrink-0'}),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, s.name || '(untitled)'),\n s.description && h('div', {className:'text-[10px] text-text-muted truncate'}, s.description)\n ),\n h('span', {className:'flex-shrink-0 text-[10px] text-text-muted font-mono-data'}, (Number(s.step_count)||0) + ' step' + ((Number(s.step_count)||0)===1?'':'s')),\n s.active ? null : h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border border-border-subtle text-text-muted'}, 'paused')\n ),\n openId === s.id && h(SequenceSteps, {sequenceId: s.id})\n ))\n )\n );\n}\n\nfunction SequenceSteps({sequenceId}) {\n const { Icon, Btn, Spinner } = N();\n const [steps, setSteps] = useState(null);\n const [adding, setAdding] = useState(false);\n const [draft, setDraft] = useState({channel:'email', delay_days:'0', subject:'', body:''});\n\n const load = useCallback(() => {\n fetch('/api/crm/sequences/' + sequenceId + '/steps').then(r => r.json()).then(d => setSteps(Array.isArray(d) ? d : [])).catch(() => setSteps([]));\n }, [sequenceId]);\n useEffect(() => { load(); }, [load]);\n\n const add = async () => {\n await fetch('/api/crm/sequences/' + sequenceId + '/steps', {method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({channel: draft.channel, delay_days: Number(draft.delay_days)||0, subject: draft.subject.trim(), body: draft.body.trim()})}).catch(()=>{});\n setDraft({channel:'email', delay_days:'0', subject:'', body:''}); setAdding(false); load();\n };\n const chIcon = {email:'mail', call:'call', task:'check_circle'};\n\n return h('div', {className:'border-t border-border-subtle px-3 py-2.5 space-y-2 bg-surface-container/20'},\n steps === null\n ? h('div', {className:'flex items-center justify-center py-3'}, h(Spinner,{size:14}))\n : steps.length === 0\n ? EmptyNote('No steps yet.')\n : h('div', {className:'space-y-1.5'},\n steps.map(st => h('div', {key:st.id, className:'flex items-center gap-2 text-[11px]'},\n h('span', {className:'w-5 h-5 rounded-full bg-surface-container-high flex items-center justify-center text-[10px] font-bold text-on-surface-variant flex-shrink-0'}, st.step_order != null ? st.step_order : '\\\\u00B7'),\n h(Icon, {name: chIcon[st.channel] || 'mail', size:13, className:'text-primary flex-shrink-0'}),\n h('span', {className:'text-on-surface truncate flex-1'}, st.subject || st.body || ('(' + (st.channel||'email') + ' step)')),\n h('span', {className:'text-text-muted font-mono-data flex-shrink-0'}, '+' + (Number(st.delay_days)||0) + 'd')\n ))\n ),\n adding\n ? h('div', {className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-2 space-y-1.5'},\n h('div', {className:'flex gap-1.5'},\n ['email','call','task'].map(c => h('button', {key:c, onClick: () => setDraft(d => ({...d, channel:c})),\n className:'flex-1 px-2 py-1 rounded-md text-[11px] font-semibold flex items-center justify-center gap-1 border ' + (draft.channel===c ? 'bg-primary text-white border-primary' : 'bg-surface-container border-border-subtle text-text-muted hover:text-on-surface')},\n h(Icon,{name: chIcon[c], size:12}), c)),\n h('input', {type:'number', value: draft.delay_days, onChange: e => setDraft(d => ({...d, delay_days: e.target.value})), title:'Delay days',\n className:'w-16 bg-surface-container border border-border-subtle rounded-md px-1.5 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none', placeholder:'days'})\n ),\n h('input', {type:'text', value: draft.subject, onChange: e => setDraft(d => ({...d, subject: e.target.value})), placeholder:'Subject (optional)',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1 text-[11px] text-on-surface focus:border-primary focus:outline-none'}),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: add, variant:'primary', size:'sm'}, h(Icon,{name:'add',size:13}), 'Add step'),\n h('button', {onClick: () => setAdding(false), className:'text-[11px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n )\n : h('button', {onClick: () => setAdding(true), className:'text-[11px] text-primary hover:underline flex items-center gap-1 font-semibold'}, h(Icon,{name:'add',size:13}), 'Add step')\n );\n}\n\n// ─── Dedupe + merge ─────────────────────────────────────────────────────────────\nconst DEDUPE_KINDS = [\n {key:'contacts', label:'Contacts', icon:'group', endpoint:'/api/crm/dedupe/contacts', merge:'/api/crm/dedupe/merge-contacts', mergeable:true},\n {key:'accounts', label:'Accounts', icon:'domain', endpoint:'/api/crm/dedupe/accounts', merge:'/api/crm/dedupe/merge-accounts', mergeable:true},\n {key:'deals', label:'Deals', icon:'work', endpoint:'/api/crm/dedupe/deals', merge:null, mergeable:false},\n];\n\nfunction DedupeView() {\n const { Icon } = N();\n const [kind, setKind] = useState('contacts');\n const meta = DEDUPE_KINDS.find(k => k.key === kind);\n return h(Section, {title:'Deduplicate records', icon:'merge', accent:'text-secondary',\n sub:'Likely-duplicate clusters \\\\u00B7 pick a primary and merge the rest into it',\n right: h('div', {className:'inline-flex rounded-lg border border-border-subtle overflow-hidden'},\n DEDUPE_KINDS.map(k => h('button', {key:k.key, onClick: () => setKind(k.key),\n className:'px-2.5 py-1 text-[11px] font-semibold flex items-center gap-1 ' + (kind===k.key ? 'bg-primary text-white' : 'bg-surface-container text-text-muted hover:text-on-surface')},\n h(Icon,{name:k.icon,size:13}), k.label)))},\n h(DedupeClusters, {meta, key: kind})\n );\n}\n\nfunction DedupeClusters({meta}) {\n const { Icon, Btn, Spinner } = N();\n const [clusters, setClusters] = useState(null);\n const [primaryByKey, setPrimaryByKey] = useState({});\n const [busyKey, setBusyKey] = useState('');\n const [confirmKey, setConfirmKey] = useState('');\n\n const load = useCallback(() => {\n setClusters(null);\n fetch(meta.endpoint).then(r => r.json()).then(d => {\n const arr = Array.isArray(d) ? d : [];\n setClusters(arr);\n // Default primary = first (oldest) record in each cluster.\n const defaults = {};\n arr.forEach(c => { const recs = c.records || []; if (recs.length) defaults[c.key] = String(recs[0].id); });\n setPrimaryByKey(defaults);\n }).catch(() => setClusters([]));\n }, [meta.endpoint]);\n useEffect(() => { load(); }, [load]);\n\n const recLabel = (r) => {\n if (meta.key === 'contacts') return ((r.first_name||'') + ' ' + (r.last_name||'')).trim() || r.email || '(contact)';\n if (meta.key === 'accounts') return r.name || r.domain || '(account)';\n return r.title || r.company || r.contact_email || '(deal)';\n };\n const recSub = (r) => {\n if (meta.key === 'contacts') return [r.email, r.title].filter(Boolean).join(' \\\\u00B7 ');\n if (meta.key === 'accounts') return [r.domain, r.industry].filter(Boolean).join(' \\\\u00B7 ');\n return [r.contact_email, r.stage].filter(Boolean).join(' \\\\u00B7 ') + (r.amount != null ? ' \\\\u00B7 ' + fmtMoney(r.amount) : '');\n };\n\n const doMerge = async (cluster) => {\n const primaryId = primaryByKey[cluster.key];\n if (!primaryId) return;\n const dupeIds = (cluster.records || []).map(r => String(r.id)).filter(id => id !== primaryId);\n if (dupeIds.length === 0) return;\n setBusyKey(cluster.key); setConfirmKey('');\n await fetch(meta.merge, {method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({survivor_id: primaryId, duplicate_ids: dupeIds})}).catch(()=>{});\n setBusyKey('');\n load();\n };\n\n if (clusters === null) return h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}));\n if (clusters.length === 0) return EmptyNote('No duplicate ' + meta.label.toLowerCase() + ' detected \\\\u2014 your records look clean.');\n\n return h('div', {className:'space-y-3'},\n clusters.map(c => {\n const recs = c.records || [];\n const primaryId = primaryByKey[c.key];\n const dupeCount = recs.filter(r => String(r.id) !== primaryId).length;\n return h('div', {key: c.key, className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-3 space-y-2'},\n h('div', {className:'flex items-center justify-between gap-2'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className:'text-[11px] font-bold text-on-surface'}, recs.length + ' duplicates'),\n c.reason && h('span', {className:'text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border border-tertiary/30 text-tertiary bg-tertiary/10 font-bold'}, 'by ' + c.reason)\n ),\n meta.mergeable && (\n confirmKey === c.key\n ? h('div', {className:'flex items-center gap-1.5'},\n h('span', {className:'text-[11px] text-text-muted'}, 'Merge ' + dupeCount + ' into primary?'),\n h('button', {onClick: () => doMerge(c), className:'px-2 py-1 rounded-md bg-error text-white text-[11px] font-semibold hover:bg-error/90'}, 'Confirm'),\n h('button', {onClick: () => setConfirmKey(''), className:'text-[11px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n : h('button', {onClick: () => setConfirmKey(c.key), disabled: busyKey === c.key || dupeCount === 0,\n className:'px-2.5 py-1 rounded-md bg-secondary text-on-secondary text-[11px] font-semibold disabled:opacity-40 hover:bg-secondary/90 flex items-center gap-1'},\n busyKey === c.key ? h(Spinner,{size:12}) : h(Icon,{name:'merge',size:13}), 'Merge')\n )\n ),\n h('div', {className:'space-y-1'},\n recs.map(r => {\n const isPrimary = String(r.id) === primaryId;\n return h('label', {key:r.id, className:'flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer border ' + (isPrimary ? 'border-secondary/40 bg-secondary/5' : 'border-border-subtle hover:bg-white/[0.02]')},\n h('input', {type:'radio', name:'primary-' + c.key, checked: isPrimary, onChange: () => setPrimaryByKey(m => ({...m, [c.key]: String(r.id)})), className:'accent-secondary flex-shrink-0'}),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, recLabel(r)),\n h('div', {className:'text-[10px] text-text-muted truncate'}, recSub(r) + (r.created_at ? ' \\\\u00B7 created ' + fmtRel(r.created_at) : ''))\n ),\n isPrimary && h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider font-bold text-secondary'}, 'primary')\n );\n })\n ),\n !meta.mergeable && h('div', {className:'text-[10px] text-text-muted italic'}, 'Deals are surfaced for review only \\\\u2014 merge them manually from the pipeline.')\n );\n })\n );\n}\n `;\n}\n",[389],"c85e404e-5f07-11f1-9bd8-1607ee4eb77e","frontend_crm.ts","71af5516-5b48-11f1-8910-ee650bb23af1",986,["D",1780462245605],"// CRMWorkspace — sales pipeline CRM (board + list + detail). Served at /api/app-crm,\n// dynamically imported by frontend_js.ts and rendered for the 'sales' nav page.\n//\n// Backend endpoints consumed:\n// GET /api/deals (optional ?stage=)\n// GET /api/deals/:id (deal + its contact's intent signals as activity)\n// POST /api/deals (create)\n// PUT /api/deals/:id (edit / drag stage move)\n// DELETE /api/deals/:id\n// POST /api/deals/sync (seed from qualified leads)\n// POST /api/actions (draft outreach email → Approvals inbox)\n//\n// Shared deps from window.__nexus: Icon, Btn, Input, Toggle, Spinner, MetricCard, PageHeader, SectionHeader.\nexport function getCRMJS(): string {\n return `\nimport React, { useState, useEffect, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// Wave 4: pull the heavy CRM analytics/leads/productivity surfaces from the lazy\n// /api/app-crm2 module so neither file exceeds the 80KB val.town limit.\nconst _crm2 = await import('/api/app-crm2').catch(() => ({}));\nconst _crm2Fallback = (name) => () => h('div', {className:'glass-panel rounded-xl px-4 py-10 text-center text-[13px] text-text-muted'}, name + ' module failed to load.');\nconst ForecastDashboard = _crm2.ForecastDashboard || _crm2Fallback('Forecast');\nconst LeadsDesk = _crm2.LeadsDesk || _crm2Fallback('Leads');\nconst ProductivityPanel = _crm2.ProductivityPanel || _crm2Fallback('Templates');\n\nconst STAGES = ['lead','qualified','proposal','negotiation','won','lost'];\nconst STAGE_META = {\n lead: {label:'Lead', dot:'bg-text-muted', accent:'text-text-muted', chip:'bg-surface-container-high text-on-surface-variant border-border-subtle'},\n qualified: {label:'Qualified', dot:'bg-primary', accent:'text-primary', chip:'bg-primary/10 text-primary border-primary/30'},\n proposal: {label:'Proposal', dot:'bg-tertiary', accent:'text-tertiary', chip:'bg-tertiary/10 text-tertiary border-tertiary/30'},\n negotiation: {label:'Negotiation', dot:'bg-secondary', accent:'text-secondary', chip:'bg-secondary/10 text-secondary border-secondary/30'},\n won: {label:'Won', dot:'bg-secondary', accent:'text-secondary', chip:'bg-secondary/15 text-secondary border-secondary/40'},\n lost: {label:'Lost', dot:'bg-error', accent:'text-error', chip:'bg-error/10 text-error border-error/30'},\n};\nconst stMeta = (s) => STAGE_META[s] || STAGE_META.lead;\n\nconst fmtMoney = (n) => {\n const v = Number(n) || 0;\n if (v >= 1000000) return '$' + (v/1000000).toFixed(1).replace(/\\\\.0$/,'') + 'M';\n if (v >= 1000) return '$' + (v/1000).toFixed(1).replace(/\\\\.0$/,'') + 'K';\n return '$' + v.toLocaleString();\n};\nconst fmtRel = (iso) => {\n if (!iso) return '';\n const ms = Date.now() - new Date(iso).getTime();\n if (isNaN(ms)) return '';\n if (ms < 3600000) return Math.max(1, Math.floor(ms/60000)) + 'm ago';\n if (ms < 86400000) return Math.floor(ms/3600000) + 'h ago';\n if (ms < 2592000000) return Math.floor(ms/86400000) + 'd ago';\n return new Date(iso).toLocaleDateString('en-US', {month:'short', day:'numeric'});\n};\nconst initialsOf = (name) => (name||'?').trim().split(/\\\\s+/).slice(0,2).map(s => s[0]||'').join('').toUpperCase() || '?';\nconst colorFromName = (name) => {\n const colors = ['#c0c1ff','#4edea3','#d0bcff','#8083ff','#6ffbbe','#a078ff','#e1e0ff','#494bd6'];\n const sum = (name||'').split('').reduce((a,c) => a + c.charCodeAt(0), 0);\n return colors[sum % colors.length];\n};\n\n// ─── Deal card (board) ───────────────────────────────────────────────────────\nfunction DealCard({deal, onClick, onDragStart}) {\n const { Icon } = N();\n const col = colorFromName(deal.company || deal.contact_name || deal.contact_email);\n return h('div', {\n draggable: true,\n onDragStart: (e) => onDragStart(e, deal),\n onClick: () => onClick(deal),\n className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-md cursor-pointer hover:border-primary/40 transition-all space-y-2 group'\n },\n h('div', {className:'flex items-start justify-between gap-2'},\n h('div', {className:'min-w-0'},\n h('h4', {className:'text-[13px] font-bold text-on-surface leading-tight truncate'}, deal.company || deal.contact_name || '(untitled)'),\n deal.contact_name && deal.company && h('div', {className:'text-[11px] text-text-muted truncate'}, deal.contact_name)\n ),\n h('span', {className:'flex-shrink-0 text-[13px] font-bold font-mono-data text-on-surface', style:{fontVariantNumeric:'tabular-nums'}}, fmtMoney(deal.amount))\n ),\n h('div', {className:'flex items-center justify-between gap-2 pt-1'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className:'flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold', style:{background:col+'33', color:col}}, initialsOf(deal.contact_name || deal.company)),\n deal.last_activity_at && h('span', {className:'text-[10px] text-text-muted truncate'}, fmtRel(deal.last_activity_at))\n ),\n typeof deal.probability === 'number' && h('span', {className:'flex-shrink-0 text-[10px] font-mono-data text-on-surface-variant'}, deal.probability + '%')\n )\n );\n}\n\n// ─── Pipeline column ──────────────────────────────────────────────────────────\nfunction PipelineColumn({stage, deals, onCardClick, onDragStart, onDrop}) {\n const { Icon } = N();\n const [over, setOver] = useState(false);\n const meta = stMeta(stage);\n const sum = deals.reduce((a,d) => a + (Number(d.amount)||0), 0);\n return h('div', {\n onDragOver: (e) => { e.preventDefault(); if (!over) setOver(true); },\n onDragLeave: () => setOver(false),\n onDrop: (e) => { e.preventDefault(); setOver(false); onDrop(e, stage); },\n className:'bg-surface-container/40 rounded-lg p-md min-h-[420px] flex flex-col gap-2 transition-all ' + (over ? 'ring-2 ring-primary/40 bg-primary/5' : '')\n },\n h('div', {className:'flex items-center justify-between mb-1'},\n h('div', {className:'flex items-center gap-2'},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + meta.dot}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest ' + meta.accent}, meta.label)\n ),\n h('span', {className:'inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-surface-container-high text-[10px] font-bold font-mono-data text-on-surface-variant'}, deals.length)\n ),\n h('div', {className:'text-[10px] text-text-muted font-mono-data mb-1'}, fmtMoney(sum)),\n deals.length === 0\n ? h('div', {className:'flex-1 flex items-center justify-center text-[11px] text-text-muted italic py-6'}, 'Drop here')\n : deals.map(d => h(DealCard, {key: d.id, deal: d, onClick: onCardClick, onDragStart}))\n );\n}\n\n// ─── List view ─────────────────────────────────────────────────────────────────\nfunction DealListView({deals, onRowClick}) {\n const [sort, setSort] = useState({key:'amount', dir:'desc'});\n const sorted = [...deals].sort((a,b) => {\n const av = a[sort.key], bv = b[sort.key];\n const cmp = (typeof av === 'number' && typeof bv === 'number') ? (av-bv) : String(av||'').localeCompare(String(bv||''));\n return sort.dir === 'desc' ? -cmp : cmp;\n });\n const toggle = (k) => setSort(s => s.key === k ? {key:k, dir: s.dir==='desc'?'asc':'desc'} : {key:k, dir:'desc'});\n const HEAD = [['company','Company',3],['contact_name','Contact',3],['stage','Stage',2],['amount','Value',1],['probability','%',1],['last_activity_at','Last activity',2]];\n return h('div', {className:'glass-panel rounded-xl overflow-hidden'},\n h('div', {className:'grid grid-cols-12 gap-2 px-4 py-2.5 text-[10px] uppercase tracking-widest text-text-muted border-b border-border-subtle bg-surface-container/40 font-bold'},\n HEAD.map(([k,label,span]) => h('button', {key:k, onClick: () => toggle(k), className:'col-span-' + span + ' text-left hover:text-on-surface flex items-center gap-1'}, label, sort.key===k && h('span', null, sort.dir==='desc'?'↓':'↑')))\n ),\n sorted.length === 0\n ? h('div', {className:'px-4 py-10 text-center text-[13px] text-text-muted'}, 'No deals yet — click Sync from leads or New deal.')\n : sorted.map(d => {\n const meta = stMeta(d.stage);\n return h('div', {key:d.id, onClick: () => onRowClick(d), className:'grid grid-cols-12 gap-2 px-4 py-3 items-center border-b border-border-subtle/50 hover:bg-white/[0.02] cursor-pointer transition-colors'},\n h('div', {className:'col-span-3 text-[13px] font-semibold text-on-surface truncate'}, d.company || '—'),\n h('div', {className:'col-span-3 text-[12px] text-text-muted truncate'}, d.contact_name || d.contact_email || '—'),\n h('div', {className:'col-span-2'}, h('span', {className:'inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border ' + meta.chip}, meta.label)),\n h('div', {className:'col-span-1 text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(d.amount)),\n h('div', {className:'col-span-1 text-[11px] font-mono-data text-on-surface-variant'}, (d.probability||0) + '%'),\n h('div', {className:'col-span-2 text-[11px] text-text-muted truncate'}, fmtRel(d.last_activity_at))\n );\n })\n );\n}\n\n// ─── Role metadata for deal_contacts ───────────────────────────────────────────\nconst ROLES = ['primary','decision_maker','champion','influencer','user','contact'];\nconst roleLabel = (r) => ({primary:'Primary', decision_maker:'Decision maker', champion:'Champion', influencer:'Influencer', user:'User', contact:'Contact'})[r] || (r || 'Contact');\nconst contactName = (c) => ((c && (c.first_name||'') + ' ' + (c && c.last_name||'')) || '').trim() || (c && c.email) || 'Contact';\n\n// ─── Timeline source metadata (unified activity feed) ───────────────────────────\nconst ACT_META = {\n call: {label:'Call', icon:'call', dot:'bg-primary'},\n meeting: {label:'Meeting', icon:'event', dot:'bg-tertiary'},\n note: {label:'Note', icon:'sticky_note_2',dot:'bg-text-muted'},\n email: {label:'Email', icon:'mail', dot:'bg-secondary'},\n task: {label:'Task', icon:'check_circle', dot:'bg-secondary'},\n};\nconst actMeta = (t) => ACT_META[t] || ACT_META.note;\n\n// ─── Line items editor (deal_products) — add/remove + amount roll-up ─────────────\nfunction LineItemsEditor({dealId, onRollup}) {\n const { Icon, Btn, Spinner } = N();\n const [items, setItems] = useState(null);\n const [draft, setDraft] = useState({name:'', quantity:'1', unit_price:''});\n const [busy, setBusy] = useState(false);\n const load = useCallback(() => {\n fetch('/api/deals/' + dealId + '/products').then(r => r.json())\n .then(list => setItems(Array.isArray(list) ? list : []))\n .catch(() => setItems([]));\n }, [dealId]);\n useEffect(() => { load(); }, [load]);\n const dset = (k, v) => setDraft(d => ({...d, [k]: v}));\n const add = async () => {\n if (!String(draft.name).trim()) return;\n setBusy(true);\n await fetch('/api/deals/' + dealId + '/products', {method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({name: draft.name.trim(), quantity: Number(draft.quantity)||1, unit_price: Number(draft.unit_price)||0})}).catch(()=>{});\n setBusy(false); setDraft({name:'', quantity:'1', unit_price:''});\n load(); onRollup && onRollup();\n };\n const remove = async (pid) => {\n await fetch('/api/deals/' + dealId + '/products/' + pid, {method:'DELETE'}).catch(()=>{});\n load(); onRollup && onRollup();\n };\n const total = (items || []).reduce((a,p) => a + (Number(p.amount) != null && !isNaN(Number(p.amount)) ? Number(p.amount) : (Number(p.quantity)||0) * (Number(p.unit_price)||0)), 0);\n return h('div', {className:'pt-3 border-t border-border-subtle'},\n h('div', {className:'flex items-center justify-between mb-2'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted flex items-center gap-2'}, h(Icon,{name:'shopping_cart',size:13,className:'text-primary'}), 'Line items'),\n (items && items.length > 0) && h('span', {className:'text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(total))\n ),\n items === null\n ? h('div', {className:'flex items-center justify-center py-3'}, h(Spinner,{size:16}))\n : h('div', {className:'space-y-1.5'},\n items.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'No line items — deal value is set manually above.')\n : items.map(p => h('div', {key: p.id, className:'flex items-center gap-2 bg-surface-container-lowest border border-border-subtle rounded-lg px-2.5 py-1.5'},\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, p.name || '(item)'),\n h('div', {className:'text-[10px] text-text-muted font-mono-data'}, (Number(p.quantity)||0) + ' \\\\u00D7 ' + fmtMoney(p.unit_price))\n ),\n h('span', {className:'flex-shrink-0 text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(Number(p.amount) || (Number(p.quantity)||0)*(Number(p.unit_price)||0))),\n h('button', {onClick: () => remove(p.id), className:'flex-shrink-0 text-text-muted hover:text-error', title:'Remove line item'}, h(Icon,{name:'close',size:13}))\n ))\n ),\n h('div', {className:'flex items-end gap-1.5 mt-2'},\n h('input', {type:'text', value: draft.name, onChange: e => dset('name', e.target.value), placeholder:'Product / service',\n className:'flex-1 min-w-0 bg-surface-container-lowest border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h('input', {type:'number', value: draft.quantity, onChange: e => dset('quantity', e.target.value), placeholder:'Qty', title:'Quantity',\n className:'w-12 bg-surface-container-lowest border border-border-subtle rounded-md px-1.5 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h('input', {type:'number', value: draft.unit_price, onChange: e => dset('unit_price', e.target.value), placeholder:'Price', title:'Unit price',\n className:'w-16 bg-surface-container-lowest border border-border-subtle rounded-md px-1.5 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h('button', {onClick: add, disabled: busy || !String(draft.name).trim(), className:'flex-shrink-0 px-2 py-1.5 rounded-md bg-primary text-white text-[12px] font-semibold disabled:opacity-40 hover:bg-primary/90'}, busy ? h(Spinner,{size:12}) : h(Icon,{name:'add',size:14}))\n )\n );\n}\n\n// ─── Unified deal timeline (activities + intent signals + linked tasks) ──────────\nfunction DealTimeline({dealId, onChanged}) {\n const { Icon, Spinner } = N();\n const [feed, setFeed] = useState(null);\n const [logging, setLogging] = useState(false);\n const [draft, setDraft] = useState({type:'call', subject:'', body:''});\n const [busy, setBusy] = useState(false);\n const load = useCallback(() => {\n fetch('/api/timeline?deal_id=' + encodeURIComponent(dealId)).then(r => r.json())\n .then(list => setFeed(Array.isArray(list) ? list : []))\n .catch(() => setFeed([]));\n }, [dealId]);\n useEffect(() => { load(); }, [load]);\n const dset = (k, v) => setDraft(d => ({...d, [k]: v}));\n const log = async () => {\n if (!String(draft.subject).trim() && !String(draft.body).trim()) return;\n setBusy(true);\n await fetch('/api/activities', {method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({type: draft.type, subject: draft.subject.trim(), body: draft.body.trim(), deal_id: dealId})}).catch(()=>{});\n setBusy(false); setDraft({type:'call', subject:'', body:''}); setLogging(false);\n load(); onChanged && onChanged();\n };\n // Normalize a merged-feed row (which may be an activity, an intent_signal, or a task).\n const rowOf = (s) => {\n const src = s.source || (s.signal_type ? 'signal' : (s.type ? 'activity' : 'task'));\n if (src === 'signal') return {\n kind: 'signal', icon: 'bolt', dot: 'bg-tertiary',\n title: String(s.signal_type||'signal').replace(/_/g,' '),\n meta: (s.signal_source||'') + (s.signal_strength ? ' \\\\u00B7 +' + s.signal_strength : ''),\n when: s.occurred_at || s.detected_at, body: ''\n };\n if (src === 'task') return {\n kind: 'task', icon: 'check_circle', dot: s.completed ? 'bg-secondary' : 'bg-text-muted',\n title: s.title || s.subject || 'Task',\n meta: 'task' + (s.completed ? ' \\\\u00B7 done' : (s.due_date ? ' \\\\u00B7 due ' + fmtRel(s.due_date) : '')),\n when: s.occurred_at || s.due_date || s.created_at, body: s.body || ''\n };\n const m = actMeta(s.type);\n return {\n kind: 'activity', icon: m.icon, dot: m.dot,\n title: s.subject || m.label, meta: m.label + (s.owner ? ' \\\\u00B7 ' + s.owner : ''),\n when: s.occurred_at || s.due_date || s.created_at, body: s.body || ''\n };\n };\n return h('div', {className:'pt-3 border-t border-border-subtle'},\n h('div', {className:'flex items-center justify-between mb-2'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted flex items-center gap-2'}, h(Icon,{name:'bolt',size:13,className:'text-tertiary'}), 'Activity timeline'),\n h('button', {onClick: () => setLogging(v => !v), className:'text-[11px] text-primary hover:underline flex items-center gap-1 font-semibold'}, h(Icon,{name: logging ? 'close' : 'add',size:13}), logging ? 'Cancel' : 'Log activity')\n ),\n logging && h('div', {className:'mb-3 space-y-1.5 bg-surface-container-lowest border border-border-subtle rounded-lg p-2.5'},\n h('div', {className:'flex gap-1.5'},\n ['call','meeting','note'].map(t => h('button', {key:t, onClick: () => dset('type', t),\n className:'flex-1 px-2 py-1 rounded-md text-[11px] font-semibold flex items-center justify-center gap-1 border ' + (draft.type===t ? 'bg-primary text-white border-primary' : 'bg-surface-container border-border-subtle text-text-muted hover:text-on-surface')},\n h(Icon,{name: actMeta(t).icon, size:13}), actMeta(t).label))\n ),\n h('input', {type:'text', value: draft.subject, onChange: e => dset('subject', e.target.value), placeholder:'Subject',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none'}),\n h('textarea', {value: draft.body, onChange: e => dset('body', e.target.value), rows:2, placeholder:'Details (optional)',\n className:'w-full bg-surface-container border border-border-subtle rounded-md px-2 py-1.5 text-[12px] text-on-surface focus:border-primary focus:outline-none resize-none'}),\n h('button', {onClick: log, disabled: busy || (!String(draft.subject).trim() && !String(draft.body).trim()),\n className:'px-2.5 py-1 rounded-md bg-primary text-white text-[12px] font-semibold disabled:opacity-40 hover:bg-primary/90 flex items-center gap-1'},\n busy ? h(Spinner,{size:12}) : h(Icon,{name:'save',size:13}), 'Log')\n ),\n feed === null\n ? h('div', {className:'flex items-center justify-center py-3'}, h(Spinner,{size:16}))\n : feed.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'No activity yet — log a call, meeting, or note above.')\n : h('div', {className:'space-y-2'},\n feed.map((s,i) => { const r = rowOf(s); return h('div', {key: s.id || i, className:'flex items-start gap-2 text-[12px]'},\n h('span', {className:'w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 ' + (r.dot) + '/20'},\n h(Icon, {name: r.icon, size:12, className:'text-on-surface'})),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'text-on-surface font-medium truncate'}, r.title),\n r.body && h('div', {className:'text-[11px] text-text-muted whitespace-pre-wrap'}, r.body),\n h('div', {className:'text-[10px] text-text-muted'}, r.meta + (r.when ? ' \\\\u00B7 ' + fmtRel(r.when) : ''))\n )\n ); })\n )\n );\n}\n\n// ─── Detail panel (slide-in) ────────────────────────────────────────────────────\nfunction DealDetail({dealId, onClose, onChanged, onOpenAccount, onOpenContact}) {\n const { Icon, Btn, Input, Spinner } = N();\n const [deal, setDeal] = useState(null);\n const [form, setForm] = useState({});\n const [busy, setBusy] = useState(false);\n const [toast, setToast] = useState('');\n const [contacts, setContacts] = useState([]);\n const [account, setAccount] = useState(null);\n const [adding, setAdding] = useState(false);\n\n const loadContacts = useCallback(() => {\n fetch('/api/deals/' + dealId + '/contacts').then(r => r.json())\n .then(list => setContacts(Array.isArray(list) ? list : []))\n .catch(() => setContacts([]));\n }, [dealId]);\n\n useEffect(() => {\n let alive = true;\n fetch('/api/deals/' + dealId).then(r => r.json()).then(d => {\n if (!alive) return;\n setDeal(d); setForm(d);\n // Linked account: prefer the nested account the deal detail returns, else fetch by id.\n if (d && d.account) setAccount(d.account);\n else if (d && d.account_id) fetch('/api/accounts/' + d.account_id).then(r => r.json()).then(a => { if (alive) setAccount(a && a.account ? a.account : a); }).catch(()=>{});\n else setAccount(null);\n }).catch(()=>{});\n loadContacts();\n return () => { alive = false; };\n }, [dealId, loadContacts]);\n\n const set = (k, v) => setForm(f => ({...f, [k]: v}));\n const save = async () => {\n setBusy(true);\n const body = { title:form.title, company:form.company, contact_name:form.contact_name, contact_email:form.contact_email, stage:form.stage, amount:Number(form.amount)||0, probability:Number(form.probability)||0, owner:form.owner, close_date:form.close_date, notes:form.notes,\n next_step: form.next_step || '', recurring_type: form.recurring_type || 'one_time', mrr: Number(form.mrr)||0,\n win_reason: form.win_reason || '', lost_reason: form.lost_reason || '' };\n const r = await fetch('/api/deals/' + dealId, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)});\n if (r.ok) { const d = await r.json(); setDeal(d); setForm(d); setToast('Saved'); onChanged && onChanged(); setTimeout(()=>setToast(''),1500); }\n setBusy(false);\n };\n const remove = async () => {\n setBusy(true);\n await fetch('/api/deals/' + dealId, {method:'DELETE'});\n setBusy(false); onChanged && onChanged(); onClose();\n };\n const removeContact = async (contactId) => {\n await fetch('/api/deals/' + dealId + '/contacts/' + contactId, {method:'DELETE'}).catch(()=>{});\n loadContacts();\n };\n const draftEmail = async () => {\n if (!form.contact_email) { setToast('No contact email'); setTimeout(()=>setToast(''),1500); return; }\n // Provider-aware: pick a real connected email provider (prefer Outlook, else Gmail).\n let provider = '';\n try {\n const list = await fetch('/api/integrations').then(r => r.json()).catch(() => null);\n const arr = Array.isArray(list) ? list : [];\n const isOn = (n) => arr.some(i => i && i.name === n && i.connected === true);\n provider = isOn('outlook') ? 'outlook' : (isOn('gmail') ? 'gmail' : '');\n } catch (e) { provider = ''; }\n if (!provider) { setToast('Connect an email provider (Outlook or Gmail) in Settings'); setTimeout(()=>setToast(''),2500); return; }\n await fetch('/api/actions', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({\n integration:provider, endpoint:'send', source_type:'crm', workspace:'sales',\n title:'Email: ' + (form.company || form.contact_email),\n preview:'To: ' + form.contact_email,\n payload:{ message:{ subject:'Following up — ' + (form.company||''), body:{contentType:'Text', content:'Hi ' + (form.contact_name||'') + ',\\\\n\\\\n'}, toRecipients:[{emailAddress:{address: form.contact_email}}] } }\n })});\n setToast('Drafted → Approvals'); setTimeout(()=>setToast(''),2000);\n };\n\n const field = (label, key, type) => h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, label),\n h('input', {type: type||'text', value: form[key] != null ? form[key] : '', onChange: e => set(key, e.target.value),\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'})\n );\n\n return h('div', {className:'fixed inset-0 z-40 flex justify-end', style:{background:'rgba(0,0,0,0.4)'}, onClick: onClose},\n h('div', {onClick: e => e.stopPropagation(), className:'w-full max-w-md h-full bg-surface border-l border-border overflow-y-auto shadow-2xl'},\n !deal ? h('div', {className:'flex items-center justify-center h-full'}, h(Spinner, {size:20}))\n : h('div', {className:'p-lg space-y-4'},\n h('div', {className:'flex items-start justify-between gap-3'},\n h('div', {className:'min-w-0'},\n h('h3', {className:'text-[18px] font-bold text-on-surface truncate'}, deal.company || deal.contact_name || 'Deal'),\n h('div', {className:'text-[12px] text-text-muted truncate'}, deal.contact_email || '')\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface'}, h(Icon, {name:'close', size:20}))\n ),\n h('div', {className:'grid grid-cols-2 gap-3'},\n field('Company','company'), field('Contact','contact_name'),\n field('Email','contact_email'), field('Owner','owner'),\n field('Amount (USD)','amount','number'), field('Probability %','probability','number'),\n field('Close date','close_date','date'),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Stage'),\n h('select', {value: form.stage || 'lead', onChange: e => set('stage', e.target.value),\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'},\n STAGES.map(s => h('option', {key:s, value:s}, stMeta(s).label)))\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Recurring'),\n h('select', {value: form.recurring_type || 'one_time', onChange: e => set('recurring_type', e.target.value),\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'},\n h('option', {value:'one_time'}, 'One-time'), h('option', {value:'monthly'}, 'Monthly'), h('option', {value:'annual'}, 'Annual'))\n ),\n (form.recurring_type === 'monthly' || form.recurring_type === 'annual') && field('MRR (USD)','mrr','number')\n ),\n // Next step (CRM follow-up cue)\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Next step'),\n h('input', {type:'text', value: form.next_step != null ? form.next_step : '', onChange: e => set('next_step', e.target.value), placeholder:'e.g. Send proposal by Friday',\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'})\n ),\n // Win / loss reason — shown when the deal is (or is being moved to) won/lost.\n form.stage === 'won' && h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-secondary'}, 'Win reason'),\n h('input', {type:'text', value: form.win_reason != null ? form.win_reason : '', onChange: e => set('win_reason', e.target.value), placeholder:'Why did we win?',\n className:'bg-surface-container-lowest border border-secondary/40 rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-secondary focus:outline-none'})\n ),\n form.stage === 'lost' && h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-error'}, 'Lost reason'),\n h('input', {type:'text', value: form.lost_reason != null ? form.lost_reason : '', onChange: e => set('lost_reason', e.target.value), placeholder:'Why did we lose?',\n className:'bg-surface-container-lowest border border-error/40 rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-error focus:outline-none'})\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Notes'),\n h('textarea', {value: form.notes || '', onChange: e => set('notes', e.target.value), rows:3,\n className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none resize-none'})\n ),\n h('div', {className:'flex items-center gap-2'},\n h(Btn, {onClick: save, variant:'primary', size:'sm', disabled: busy}, busy ? h(Spinner,{size:13}) : h(Icon,{name:'save',size:14}), 'Save'),\n h(Btn, {onClick: draftEmail, variant:'secondary', size:'sm'}, h(Icon,{name:'mail',size:14}), 'Draft email'),\n h('button', {onClick: remove, className:'ml-auto text-[12px] text-error hover:underline flex items-center gap-1'}, h(Icon,{name:'delete',size:14}), 'Delete'),\n toast && h('span', {className:'text-[11px] text-secondary'}, toast)\n ),\n // Linked account (relational CRM)\n h('div', {className:'pt-3 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2 flex items-center gap-2'}, h(Icon,{name:'domain',size:13,className:'text-primary'}), 'Account'),\n account\n ? h('button', {onClick: () => onOpenAccount && onOpenAccount(account.id),\n className:'w-full flex items-center gap-3 text-left bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 hover:border-primary/40 transition-all'},\n h('span', {className:'w-7 h-7 rounded-md flex items-center justify-center text-[11px] font-bold flex-shrink-0', style:{background:colorFromName(account.name)+'33', color:colorFromName(account.name)}}, initialsOf(account.name)),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[13px] font-semibold text-on-surface truncate'}, account.name || '(account)'),\n (account.domain || account.industry) && h('div', {className:'text-[11px] text-text-muted truncate'}, [account.domain, account.industry].filter(Boolean).join(' \\\\u00B7 '))\n ),\n h(Icon, {name:'chevron_right', size:16, className:'text-text-muted flex-shrink-0'})\n )\n : h('div', {className:'text-[12px] text-text-muted italic'}, 'No account linked' + (deal.company ? ' (company: ' + deal.company + ')' : '') + '.')\n ),\n // Contacts on this deal (deal_contacts with roles)\n h('div', {className:'pt-3 border-t border-border-subtle'},\n h('div', {className:'flex items-center justify-between mb-2'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted flex items-center gap-2'}, h(Icon,{name:'group',size:13,className:'text-tertiary'}), 'Contacts'),\n h('button', {onClick: () => setAdding(true), className:'text-[11px] text-primary hover:underline flex items-center gap-1 font-semibold'}, h(Icon,{name:'person_add',size:13}), 'Add')\n ),\n contacts.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'No contacts linked yet.')\n : h('div', {className:'space-y-1.5'},\n contacts.map(c => h('div', {key: c.contact_id || c.id, className:'flex items-center gap-2 bg-surface-container-lowest border border-border-subtle rounded-lg px-2.5 py-1.5'},\n h('button', {onClick: () => onOpenContact && onOpenContact(c.contact_id || c.id), className:'flex items-center gap-2 min-w-0 flex-1 text-left'},\n h('span', {className:'w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0', style:{background:colorFromName(contactName(c))+'33', color:colorFromName(contactName(c))}}, initialsOf(contactName(c))),\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate hover:text-primary'}, contactName(c)),\n (c.title || c.email) && h('div', {className:'text-[10px] text-text-muted truncate'}, c.title || c.email)\n )\n ),\n h('span', {className:'flex-shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border border-tertiary/30 text-tertiary bg-tertiary/10 font-bold'}, roleLabel(c.role)),\n h('button', {onClick: () => removeContact(c.contact_id || c.id), className:'flex-shrink-0 text-text-muted hover:text-error', title:'Remove from deal'}, h(Icon,{name:'close',size:13}))\n ))\n )\n ),\n adding && h(AddContactToDealModal, {dealId, existing: contacts, accountId: deal.account_id, onClose: () => setAdding(false), onAdded: () => { setAdding(false); loadContacts(); }}),\n // Line items (deal_products) — add/remove with amount roll-up.\n h(LineItemsEditor, {dealId, onRollup: () => { onChanged && onChanged(); fetch('/api/deals/' + dealId).then(r => r.json()).then(d => { setDeal(d); setForm(f => ({...f, amount: d.amount})); }).catch(()=>{}); }}),\n // Unified activity timeline — merges activities + intent signals + linked tasks.\n h(DealTimeline, {dealId, onChanged})\n )\n )\n );\n}\n\n// ─── Add contact to deal modal ──────────────────────────────────────────────────\nfunction AddContactToDealModal({dealId, existing, accountId, onClose, onAdded}) {\n const { Icon, Btn, Spinner } = N();\n const [contacts, setContacts] = useState(null);\n const [contactId, setContactId] = useState('');\n const [role, setRole] = useState('contact');\n const [busy, setBusy] = useState(false);\n const have = new Set((existing || []).map(c => String(c.contact_id || c.id)));\n useEffect(() => {\n // Prefer contacts on the deal's account; fall back to all contacts.\n const url = accountId ? '/api/contacts?account_id=' + encodeURIComponent(accountId) : '/api/contacts';\n fetch(url).then(r => r.json()).then(list => {\n const arr = (Array.isArray(list) ? list : []).filter(c => !have.has(String(c.id)));\n setContacts(arr);\n if (arr.length) setContactId(String(arr[0].id));\n }).catch(() => setContacts([]));\n }, []);\n const add = async () => {\n if (!contactId) return;\n setBusy(true);\n await fetch('/api/deals/' + dealId + '/contacts', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({contact_id: contactId, role})}).catch(()=>{});\n setBusy(false); onAdded && onAdded();\n };\n return h('div', {className:'fixed inset-0 z-50 flex items-center justify-center p-4', style:{background:'rgba(0,0,0,0.5)'}, onClick:onClose},\n h('div', {onClick:e=>e.stopPropagation(), className:'w-full max-w-sm bg-surface border border-border rounded-2xl p-lg space-y-3 shadow-2xl'},\n h('h3', {className:'text-[16px] font-bold text-on-surface'}, 'Add contact to deal'),\n contacts === null\n ? h('div', {className:'flex items-center justify-center py-8'}, h(Spinner,{size:18}))\n : contacts.length === 0\n ? h('div', {className:'text-[13px] text-text-muted py-2'}, 'No more contacts available' + (accountId ? ' on this account' : '') + '. Create contacts in the Contacts tab first.')\n : h('div', {className:'space-y-3'},\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Contact'),\n h('select', {value:contactId, onChange:e=>setContactId(e.target.value), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'},\n contacts.map(c => h('option', {key:c.id, value:String(c.id)}, contactName(c) + (c.email ? ' (' + c.email + ')' : ''))))\n ),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Role'),\n h('select', {value:role, onChange:e=>setRole(e.target.value), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'},\n ROLES.map(rr => h('option', {key:rr, value:rr}, roleLabel(rr))))\n )\n ),\n h('div', {className:'flex items-center gap-2 pt-1'},\n h(Btn, {onClick:add, variant:'primary', size:'sm', disabled: busy || !contactId || (contacts && contacts.length===0)}, busy ? h(Spinner,{size:13}) : h(Icon,{name:'person_add',size:14}), 'Add'),\n h('button', {onClick:onClose, className:'text-[12px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n )\n );\n}\n\n// ─── Accounts list view ─────────────────────────────────────────────────────────\nfunction AccountsListView({onRowClick}) {\n const { Spinner } = N();\n const [rows, setRows] = useState(null);\n useEffect(() => {\n fetch('/api/accounts').then(r => r.json()).then(list => setRows(Array.isArray(list) ? list : [])).catch(() => setRows([]));\n }, []);\n if (rows === null) return h('div', {className:'glass-panel rounded-xl p-12 flex items-center justify-center'}, h(Spinner,{size:20}));\n return h('div', {className:'glass-panel rounded-xl overflow-hidden'},\n h('div', {className:'grid grid-cols-12 gap-2 px-4 py-2.5 text-[10px] uppercase tracking-widest text-text-muted border-b border-border-subtle bg-surface-container/40 font-bold'},\n h('div', {className:'col-span-5'}, 'Account'),\n h('div', {className:'col-span-3'}, 'Domain'),\n h('div', {className:'col-span-2 text-right'}, 'Deals'),\n h('div', {className:'col-span-2 text-right'}, 'Pipeline')\n ),\n rows.length === 0\n ? h('div', {className:'px-4 py-10 text-center text-[13px] text-text-muted'}, 'No accounts yet — they are created from your deals\\\\u2019 companies.')\n : rows.map(a => h('div', {key:a.id, onClick: () => onRowClick(a.id), className:'grid grid-cols-12 gap-2 px-4 py-3 items-center border-b border-border-subtle/50 hover:bg-white/[0.02] cursor-pointer transition-colors'},\n h('div', {className:'col-span-5 flex items-center gap-2.5 min-w-0'},\n h('span', {className:'w-7 h-7 rounded-md flex items-center justify-center text-[11px] font-bold flex-shrink-0', style:{background:colorFromName(a.name)+'33', color:colorFromName(a.name)}}, initialsOf(a.name)),\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[13px] font-semibold text-on-surface truncate'}, a.name || '(unnamed)'),\n a.industry && h('div', {className:'text-[11px] text-text-muted truncate'}, a.industry)\n )\n ),\n h('div', {className:'col-span-3 text-[12px] text-text-muted truncate'}, a.domain || '\\\\u2014'),\n h('div', {className:'col-span-2 text-right text-[12px] font-mono-data text-on-surface-variant'}, String(a.open_deals_count != null ? a.open_deals_count : 0)),\n h('div', {className:'col-span-2 text-right text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(a.pipeline_value))\n ))\n );\n}\n\n// ─── Account detail (slide-in) ──────────────────────────────────────────────────\nfunction AccountDetail({accountId, onClose, onOpenDeal, onOpenContact}) {\n const { Icon, Spinner } = N();\n const [data, setData] = useState(null);\n useEffect(() => {\n fetch('/api/accounts/' + accountId).then(r => r.json()).then(setData).catch(()=>setData({}));\n }, [accountId]);\n const account = data && (data.account || (data.id ? data : null));\n const contacts = (data && data.contacts) || [];\n const deals = (data && data.deals) || [];\n return h('div', {className:'fixed inset-0 z-40 flex justify-end', style:{background:'rgba(0,0,0,0.4)'}, onClick: onClose},\n h('div', {onClick: e => e.stopPropagation(), className:'w-full max-w-md h-full bg-surface border-l border-border overflow-y-auto shadow-2xl'},\n !data ? h('div', {className:'flex items-center justify-center h-full'}, h(Spinner,{size:20}))\n : h('div', {className:'p-lg space-y-4'},\n h('div', {className:'flex items-start justify-between gap-3'},\n h('div', {className:'flex items-center gap-3 min-w-0'},\n h('span', {className:'w-10 h-10 rounded-lg flex items-center justify-center text-[14px] font-bold flex-shrink-0', style:{background:colorFromName(account && account.name)+'33', color:colorFromName(account && account.name)}}, initialsOf(account && account.name)),\n h('div', {className:'min-w-0'},\n h('h3', {className:'text-[18px] font-bold text-on-surface truncate'}, (account && account.name) || 'Account'),\n h('div', {className:'text-[12px] text-text-muted truncate'}, [account && account.domain, account && account.industry, account && account.size].filter(Boolean).join(' \\\\u00B7 ') || '')\n )\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface flex-shrink-0'}, h(Icon, {name:'close', size:20}))\n ),\n (account && account.website) && h('a', {href: account.website, target:'_blank', className:'text-[12px] text-primary hover:underline flex items-center gap-1'}, h(Icon,{name:'link',size:13}), account.website),\n // Deals on this account\n h('div', {className:'pt-2 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2 flex items-center gap-2'}, h(Icon,{name:'work',size:13,className:'text-primary'}), 'Deals (' + deals.length + ')'),\n deals.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'No deals on this account.')\n : h('div', {className:'space-y-1.5'},\n deals.map(d => h('button', {key:d.id, onClick: () => onOpenDeal && onOpenDeal(d.id), className:'w-full flex items-center justify-between gap-2 text-left bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 hover:border-primary/40 transition-all'},\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, d.title || d.company || d.contact_name || 'Deal'),\n h('div', {className:'text-[10px]'}, h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider border ' + stMeta(d.stage).chip}, stMeta(d.stage).label))\n ),\n h('span', {className:'flex-shrink-0 text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(d.amount))\n ))\n )\n ),\n // Contacts at this account\n h('div', {className:'pt-3 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2 flex items-center gap-2'}, h(Icon,{name:'group',size:13,className:'text-tertiary'}), 'Contacts (' + contacts.length + ')'),\n contacts.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'No contacts at this account.')\n : h('div', {className:'space-y-1.5'},\n contacts.map(c => h('button', {key:c.id, onClick: () => onOpenContact && onOpenContact(c.id), className:'w-full flex items-center gap-2 text-left bg-surface-container-lowest border border-border-subtle rounded-lg px-2.5 py-1.5 hover:border-primary/40 transition-all'},\n h('span', {className:'w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0', style:{background:colorFromName(contactName(c))+'33', color:colorFromName(contactName(c))}}, initialsOf(contactName(c))),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, contactName(c)),\n (c.title || c.email) && h('div', {className:'text-[10px] text-text-muted truncate'}, c.title || c.email)\n )\n ))\n )\n )\n )\n )\n );\n}\n\n// ─── Contacts list view ─────────────────────────────────────────────────────────\nfunction ContactsListView({onRowClick}) {\n const { Spinner } = N();\n const [rows, setRows] = useState(null);\n useEffect(() => {\n fetch('/api/contacts').then(r => r.json()).then(list => setRows(Array.isArray(list) ? list : [])).catch(() => setRows([]));\n }, []);\n if (rows === null) return h('div', {className:'glass-panel rounded-xl p-12 flex items-center justify-center'}, h(Spinner,{size:20}));\n return h('div', {className:'glass-panel rounded-xl overflow-hidden'},\n h('div', {className:'grid grid-cols-12 gap-2 px-4 py-2.5 text-[10px] uppercase tracking-widest text-text-muted border-b border-border-subtle bg-surface-container/40 font-bold'},\n h('div', {className:'col-span-4'}, 'Contact'),\n h('div', {className:'col-span-3'}, 'Email'),\n h('div', {className:'col-span-3'}, 'Account'),\n h('div', {className:'col-span-2'}, 'Title')\n ),\n rows.length === 0\n ? h('div', {className:'px-4 py-10 text-center text-[13px] text-text-muted'}, 'No contacts yet — they are created from your deals\\\\u2019 contacts.')\n : rows.map(c => h('div', {key:c.id, onClick: () => onRowClick(c.id), className:'grid grid-cols-12 gap-2 px-4 py-3 items-center border-b border-border-subtle/50 hover:bg-white/[0.02] cursor-pointer transition-colors'},\n h('div', {className:'col-span-4 flex items-center gap-2.5 min-w-0'},\n h('span', {className:'w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0', style:{background:colorFromName(contactName(c))+'33', color:colorFromName(contactName(c))}}, initialsOf(contactName(c))),\n h('div', {className:'text-[13px] font-semibold text-on-surface truncate'}, contactName(c))\n ),\n h('div', {className:'col-span-3 text-[12px] text-text-muted truncate'}, c.email || '\\\\u2014'),\n h('div', {className:'col-span-3 text-[12px] text-on-surface-variant truncate'}, c.account_name || '\\\\u2014'),\n h('div', {className:'col-span-2 text-[12px] text-text-muted truncate'}, c.title || '\\\\u2014')\n ))\n );\n}\n\n// ─── Contact detail (slide-in) — intent-signal timeline + deals ──────────────────\nfunction ContactDetail({contactId, onClose, onOpenAccount, onOpenDeal}) {\n const { Icon, Spinner } = N();\n const [data, setData] = useState(null);\n useEffect(() => {\n fetch('/api/contacts/' + contactId).then(r => r.json()).then(setData).catch(()=>setData({}));\n }, [contactId]);\n const contact = data && (data.contact || (data.id ? data : null));\n const account = data && data.account;\n const deals = (data && data.deals) || [];\n const signals = (data && (data.signals || data.timeline)) || [];\n return h('div', {className:'fixed inset-0 z-40 flex justify-end', style:{background:'rgba(0,0,0,0.4)'}, onClick: onClose},\n h('div', {onClick: e => e.stopPropagation(), className:'w-full max-w-md h-full bg-surface border-l border-border overflow-y-auto shadow-2xl'},\n !data ? h('div', {className:'flex items-center justify-center h-full'}, h(Spinner,{size:20}))\n : h('div', {className:'p-lg space-y-4'},\n h('div', {className:'flex items-start justify-between gap-3'},\n h('div', {className:'flex items-center gap-3 min-w-0'},\n h('span', {className:'w-10 h-10 rounded-full flex items-center justify-center text-[14px] font-bold flex-shrink-0', style:{background:colorFromName(contactName(contact))+'33', color:colorFromName(contactName(contact))}}, initialsOf(contactName(contact))),\n h('div', {className:'min-w-0'},\n h('h3', {className:'text-[18px] font-bold text-on-surface truncate'}, contactName(contact)),\n h('div', {className:'text-[12px] text-text-muted truncate'}, [contact && contact.title, contact && contact.email].filter(Boolean).join(' \\\\u00B7 ') || '')\n )\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface flex-shrink-0'}, h(Icon, {name:'close', size:20}))\n ),\n h('div', {className:'flex flex-wrap gap-x-4 gap-y-1 text-[12px] text-text-muted'},\n (contact && contact.email) && h('span', {className:'flex items-center gap-1'}, h(Icon,{name:'mail',size:13}), contact.email),\n (contact && contact.phone) && h('span', {className:'flex items-center gap-1'}, h(Icon,{name:'call',size:13}), contact.phone)\n ),\n // Account\n account && h('button', {onClick: () => onOpenAccount && onOpenAccount(account.id), className:'w-full flex items-center gap-2.5 text-left bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 hover:border-primary/40 transition-all'},\n h('span', {className:'w-7 h-7 rounded-md flex items-center justify-center text-[11px] font-bold flex-shrink-0', style:{background:colorFromName(account.name)+'33', color:colorFromName(account.name)}}, initialsOf(account.name)),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[13px] font-semibold text-on-surface truncate'}, account.name || '(account)'),\n account.domain && h('div', {className:'text-[11px] text-text-muted truncate'}, account.domain)\n ),\n h(Icon, {name:'chevron_right', size:16, className:'text-text-muted flex-shrink-0'})\n ),\n // Deals\n h('div', {className:'pt-2 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2 flex items-center gap-2'}, h(Icon,{name:'work',size:13,className:'text-primary'}), 'Deals (' + deals.length + ')'),\n deals.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'No deals linked to this contact.')\n : h('div', {className:'space-y-1.5'},\n deals.map(d => h('button', {key:d.id, onClick: () => onOpenDeal && onOpenDeal(d.id), className:'w-full flex items-center justify-between gap-2 text-left bg-surface-container-lowest border border-border-subtle rounded-lg px-3 py-2 hover:border-primary/40 transition-all'},\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[12px] font-semibold text-on-surface truncate'}, d.title || d.company || 'Deal'),\n h('div', {className:'text-[10px]'}, h('span', {className:'inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider border ' + stMeta(d.stage).chip}, stMeta(d.stage).label))\n ),\n h('span', {className:'flex-shrink-0 text-[12px] font-mono-data font-bold text-on-surface'}, fmtMoney(d.amount))\n ))\n )\n ),\n // Intent-signal timeline\n h('div', {className:'pt-3 border-t border-border-subtle'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2 flex items-center gap-2'}, h(Icon,{name:'bolt',size:13,className:'text-tertiary'}), 'Intent-signal timeline'),\n signals.length === 0\n ? h('div', {className:'text-[12px] text-text-muted italic'}, 'No intent signals captured for this contact yet.')\n : h('div', {className:'space-y-2'},\n signals.map((s,i) => h('div', {key:i, className:'flex items-start gap-2 text-[12px]'},\n h('span', {className:'w-1.5 h-1.5 rounded-full bg-tertiary mt-1.5 flex-shrink-0'}),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'text-on-surface'}, String(s.signal_type||'signal').replace(/_/g,' '), h('span', {className:'text-text-muted'}, ' \\\\u00B7 ' + (s.signal_source||''))),\n h('div', {className:'text-[10px] text-text-muted'}, fmtRel(s.detected_at) + (s.signal_strength ? ' \\\\u00B7 +' + s.signal_strength : ''))\n )\n ))\n )\n )\n )\n )\n );\n}\n\n// ─── New deal modal ──────────────────────────────────────────────────────────\nfunction NewDealForm({onClose, onCreated}) {\n const { Icon, Btn } = N();\n const [f, setF] = useState({company:'', contact_name:'', contact_email:'', amount:'', stage:'lead'});\n const [busy, setBusy] = useState(false);\n const set = (k,v) => setF(s => ({...s,[k]:v}));\n const create = async () => {\n setBusy(true);\n const r = await fetch('/api/deals', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({...f, amount:Number(f.amount)||0})});\n setBusy(false);\n if (r.ok) { onCreated && onCreated(); onClose(); }\n };\n const inp = (label,key,type) => h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, label),\n h('input', {type:type||'text', value:f[key], onChange:e=>set(key,e.target.value), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'})\n );\n return h('div', {className:'fixed inset-0 z-50 flex items-center justify-center', style:{background:'rgba(0,0,0,0.5)'}, onClick:onClose},\n h('div', {onClick:e=>e.stopPropagation(), className:'w-full max-w-sm bg-surface border border-border rounded-2xl p-lg space-y-3 shadow-2xl'},\n h('h3', {className:'text-[16px] font-bold text-on-surface'}, 'New deal'),\n inp('Company','company'), inp('Contact','contact_name'), inp('Email','contact_email','email'), inp('Amount (USD)','amount','number'),\n h('div', {className:'flex flex-col gap-1'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Stage'),\n h('select', {value:f.stage, onChange:e=>set('stage',e.target.value), className:'bg-surface-container-lowest border border-border-subtle rounded-md px-2.5 py-1.5 text-[13px] text-on-surface focus:border-primary focus:outline-none'},\n STAGES.map(s => h('option', {key:s, value:s}, stMeta(s).label)))\n ),\n h('div', {className:'flex items-center gap-2 pt-1'},\n h(Btn, {onClick:create, variant:'primary', size:'sm', disabled:busy}, 'Create deal'),\n h('button', {onClick:onClose, className:'text-[12px] text-text-muted hover:text-on-surface'}, 'Cancel')\n )\n )\n );\n}\n\n// ─── Import contacts modal (interactive lead → deal review) ─────────────────────\nfunction ImportContactsModal({onClose, onImported}) {\n const { Icon, Btn, Spinner } = N();\n const [cands, setCands] = useState(null);\n const [sel, setSel] = useState({});\n const [busy, setBusy] = useState(false);\n useEffect(() => {\n let alive = true;\n fetch('/api/deals/candidates').then(r => r.json()).then(list => {\n if (!alive) return;\n const arr = Array.isArray(list) ? list : [];\n setCands(arr);\n const init = {};\n arr.forEach(c => { if (c.likely_prospect) init[c.email] = true; });\n setSel(init);\n }).catch(() => { if (alive) setCands([]); });\n return () => { alive = false; };\n }, []);\n const toggle = (email) => setSel(s => ({...s, [email]: !s[email]}));\n const selectedEmails = Object.keys(sel).filter(e => sel[e]);\n const setAll = (v) => { const m = {}; (cands || []).forEach(c => { m[c.email] = v; }); setSel(m); };\n const doImport = async () => {\n if (!selectedEmails.length) return;\n setBusy(true);\n await fetch('/api/deals/import', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({emails: selectedEmails})}).catch(()=>{});\n setBusy(false); onImported && onImported(); onClose();\n };\n return h('div', {className:'fixed inset-0 z-50 flex items-center justify-center p-4', style:{background:'rgba(0,0,0,0.5)'}, onClick:onClose},\n h('div', {onClick:e=>e.stopPropagation(), className:'w-full max-w-lg bg-surface border border-border rounded-2xl shadow-2xl flex flex-col', style:{maxHeight:'80vh'}},\n h('div', {className:'p-lg border-b border-border-subtle flex items-start justify-between gap-3'},\n h('div', {className:'min-w-0'},\n h('h3', {className:'text-[16px] font-bold text-on-surface'}, 'Import contacts as deals'),\n h('div', {className:'text-[12px] text-text-muted mt-0.5'}, 'From your email & calendar leads. System/notification senders are pre-unchecked — review and pick real prospects.')\n ),\n h('button', {onClick:onClose, className:'text-text-muted hover:text-on-surface flex-shrink-0'}, h(Icon,{name:'close',size:20}))\n ),\n cands === null\n ? h('div', {className:'flex-1 flex items-center justify-center p-12'}, h(Spinner,{size:20}))\n : cands.length === 0\n ? h('div', {className:'flex-1 flex items-center justify-center p-12 text-[13px] text-text-muted'}, 'No new leads to import — all caught up.')\n : h('div', {className:'flex-1 overflow-y-auto divide-y divide-border-subtle/50'},\n cands.map(c => h('label', {key:c.email, className:'flex items-center gap-3 px-lg py-2.5 cursor-pointer hover:bg-white/[0.02] ' + (c.likely_prospect ? '' : 'opacity-60')},\n h('input', {type:'checkbox', checked: !!sel[c.email], onChange: () => toggle(c.email), className:'accent-primary w-4 h-4 flex-shrink-0'}),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'text-[13px] font-semibold text-on-surface truncate'}, c.company || c.name || c.email),\n h('div', {className:'text-[11px] text-text-muted truncate'}, c.email + (c.reason ? ' · ' + c.reason : ''))\n ),\n h('span', {className:'text-[10px] px-1.5 py-0.5 rounded-full border flex-shrink-0 ' + (c.likely_prospect ? 'text-secondary border-secondary/40 bg-secondary/10' : 'text-text-muted border-border-subtle')}, c.likely_prospect ? (c.stage || 'lead') : 'system?')\n ))\n ),\n h('div', {className:'p-lg border-t border-border-subtle flex items-center justify-between gap-3'},\n h('div', {className:'flex items-center gap-3 text-[11px] text-text-muted'},\n h('button', {onClick:() => setAll(true), className:'hover:text-on-surface font-semibold'}, 'Select all'),\n h('button', {onClick:() => setAll(false), className:'hover:text-on-surface font-semibold'}, 'None')\n ),\n h(Btn, {onClick: doImport, variant:'primary', size:'sm', disabled: busy || !selectedEmails.length},\n busy ? h(Spinner,{size:13}) : h(Icon,{name:'person_add',size:14}), 'Add ' + selectedEmails.length + ' deal' + (selectedEmails.length===1?'':'s'))\n )\n )\n );\n}\n\n// ─── CRM Workspace ─────────────────────────────────────────────────────────────\nexport function CRMWorkspace({setActivePage}) {\n const { Icon, Btn, PageHeader, MetricCard, Spinner } = N();\n const [deals, setDeals] = useState([]);\n const [loading, setLoading] = useState(true);\n const [view, setView] = useState('board');\n const [openId, setOpenId] = useState(null);\n const [openAccountId, setOpenAccountId] = useState(null);\n const [openContactId, setOpenContactId] = useState(null);\n const [creating, setCreating] = useState(false);\n const [importing, setImporting] = useState(false);\n\n const load = useCallback(async () => {\n setLoading(true);\n try { const r = await fetch('/api/deals'); setDeals(await r.json()); } catch (e) { setDeals([]); }\n setLoading(false);\n }, []);\n useEffect(() => { load(); }, [load]);\n\n const onDragStart = (e, deal) => { e.dataTransfer.setData('deal-id', String(deal.id)); e.dataTransfer.effectAllowed = 'move'; };\n const onDrop = async (e, newStage) => {\n const id = e.dataTransfer.getData('deal-id');\n if (!id) return;\n const d = deals.find(x => String(x.id) === id);\n if (!d || d.stage === newStage) return;\n setDeals(ds => ds.map(x => String(x.id) === id ? {...x, stage:newStage} : x)); // optimistic\n await fetch('/api/deals/' + id, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({stage:newStage})}).catch(()=>{});\n load();\n };\n\n const byStage = {};\n STAGES.forEach(s => byStage[s] = []);\n deals.forEach(d => { (byStage[d.stage] || byStage.lead).push(d); });\n const openCount = deals.filter(d => d.stage !== 'won' && d.stage !== 'lost').length;\n const pipelineValue = deals.filter(d => d.stage !== 'won' && d.stage !== 'lost').reduce((a,d)=>a+(Number(d.amount)||0),0);\n const wonValue = byStage.won.reduce((a,d)=>a+(Number(d.amount)||0),0);\n const closed = byStage.won.length + byStage.lost.length;\n const winRate = closed ? Math.round(byStage.won.length / closed * 100) : 0;\n\n return h('div', {className:'p-lg lg:p-xl max-w-[1440px] mx-auto space-y-lg'},\n h(PageHeader, {\n title:'Sales CRM',\n subtitle:'Pipeline, contacts, and deal activity — seeded from your email/calendar intent signals',\n icon:'contacts'\n }),\n // Summary metrics\n h('div', {className:'grid grid-cols-2 lg:grid-cols-4 gap-md'},\n h(MetricCard, {label:'Pipeline value', value: fmtMoney(pipelineValue), icon:'monitoring', accent:'primary'}),\n h(MetricCard, {label:'Open deals', value: String(openCount), icon:'work', accent:'tertiary'}),\n h(MetricCard, {label:'Won', value: fmtMoney(wonValue), icon:'trophy', accent:'secondary'}),\n h(MetricCard, {label:'Win rate', value: winRate + '%', icon:'percent', accent:'secondary'})\n ),\n // Toolbar\n h('div', {className:'flex items-center justify-between gap-3 flex-wrap'},\n h('div', {className:'inline-flex rounded-lg border border-border-subtle overflow-hidden'},\n [['board','Pipeline','view_kanban'],['list','List','list'],['accounts','Accounts','domain'],['contacts','Contacts','group'],['forecast','Forecast','trending_up'],['leads','Leads','filter_alt'],['productivity','Templates','mail']].map(([v,label,ic]) => h('button', {key:v, onClick: () => setView(v),\n className:'px-3 py-1.5 text-[12px] font-semibold flex items-center gap-1.5 ' + (view===v ? 'bg-primary text-white' : 'bg-surface-container text-text-muted hover:text-on-surface')},\n h(Icon, {name: ic, size:15}), label))\n ),\n h('div', {className:'flex items-center gap-2'},\n loading && (view==='board'||view==='list') && h(Spinner, {size:14}),\n (view==='board'||view==='list') && h(Btn, {onClick: () => setImporting(true), variant:'secondary', size:'sm'}, h(Icon,{name:'person_add',size:14}), 'Import contacts'),\n (view==='board'||view==='list') && h(Btn, {onClick: () => setCreating(true), variant:'primary', size:'sm'}, h(Icon,{name:'add',size:14}), 'New deal')\n )\n ),\n // Body — pipeline board, deal list, accounts, contacts, forecast, leads, or productivity\n view === 'board'\n ? h('div', {className:'grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-md'},\n STAGES.map(s => h(PipelineColumn, {key:s, stage:s, deals: byStage[s], onCardClick: d => setOpenId(d.id), onDragStart, onDrop})))\n : view === 'list'\n ? h(DealListView, {deals, onRowClick: d => setOpenId(d.id)})\n : view === 'accounts'\n ? h(AccountsListView, {onRowClick: id => setOpenAccountId(id)})\n : view === 'contacts'\n ? h(ContactsListView, {onRowClick: id => setOpenContactId(id)})\n : view === 'forecast'\n ? h(ForecastDashboard, {onOpenDeal: id => setOpenId(id)})\n : view === 'leads'\n ? h(LeadsDesk, {onOpenContact: id => setOpenContactId(id)})\n : h(ProductivityPanel, null),\n // Detail panels + create/import modals\n openId && h(DealDetail, {dealId: openId, onClose: () => setOpenId(null), onChanged: load,\n onOpenAccount: id => { setOpenId(null); setOpenAccountId(id); },\n onOpenContact: id => { setOpenId(null); setOpenContactId(id); }}),\n openAccountId && h(AccountDetail, {accountId: openAccountId, onClose: () => setOpenAccountId(null),\n onOpenDeal: id => { setOpenAccountId(null); setOpenId(id); },\n onOpenContact: id => { setOpenAccountId(null); setOpenContactId(id); }}),\n openContactId && h(ContactDetail, {contactId: openContactId, onClose: () => setOpenContactId(null),\n onOpenAccount: id => { setOpenContactId(null); setOpenAccountId(id); },\n onOpenDeal: id => { setOpenContactId(null); setOpenId(id); }}),\n creating && h(NewDealForm, {onClose: () => setCreating(false), onCreated: load}),\n importing && h(ImportContactsModal, {onClose: () => setImporting(false), onImported: load})\n );\n}\n `;\n}\n",[396],"af5dcef8-5e66-11f1-a3ec-1607ee4eb77e","frontend_command.ts","68166c5c-5818-11f1-882d-ee650bb23af1",881,["D",1780393054688],12,"// Command Center - the new \"home\" page. Replaces analytics-style Dashboard at\n// the 'dashboard' route. Operates as a command palette + terminal output panel.\n// Each command is either: a direct fetch to a known API endpoint, an AI chat\n// message, or a UI action (navigate / purge / reload). Output streams into a\n// log panel that keeps history across runs.\n//\n// Served at /api/app-command. Deps come from window.__nexus.\n\nexport function getCommandJS(): string {\n return `\nimport React, { useState, useEffect, useRef, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\nconst fmtTime = () => new Date().toLocaleTimeString('en-US',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit'});\n\n// --- COMMAND CATALOG ---------------------------------------------------------\n// type: 'fetch' (hit an endpoint, show result),\n// 'chat' (send AI chat with prompt, show response),\n// 'nav' (navigate to a page),\n// 'action'(invoke a JS callback)\nconst COMMANDS = [\n // -- STATUS -------------------------------------------------------------\n { cat:'STATUS', icon:'health_and_safety', label:'System Health', type:'fetch', target:'/api/health' },\n { cat:'STATUS', icon:'cable', label:'Check Integrations', type:'fetch', target:'/api/integrations' },\n { cat:'STATUS', icon:'verified_user', label:'Google OAuth Scopes', type:'fetch', target:'/api/integrations/google/data?endpoint=test' },\n { cat:'STATUS', icon:'refresh', label:'Refresh Funnel', type:'fetch', target:'/api/intelligence/funnel-summary?force=1' },\n\n // -- MARKETING ----------------------------------------------------------\n { cat:'MARKETING', icon:'auto_fix_high', label:'Top Keywords (Ahrefs)', type:'fetch', target:'/api/integrations/ahrefs/data?endpoint=keywords' },\n { cat:'MARKETING', icon:'analytics', label:'GA4 KPIs (30d)', type:'fetch', target:'/api/integrations/ga4/data?endpoint=kpi&days=30' },\n { cat:'MARKETING', icon:'search_check', label:'GSC Search Analytics', type:'fetch', target:'/api/integrations/gsc/data?endpoint=search-analytics' },\n { cat:'MARKETING', icon:'web', label:'Recent WordPress Posts', type:'fetch', target:'/api/integrations/wordpress/data?endpoint=posts' },\n { cat:'MARKETING', icon:'smart_display', label:'YouTube Channel Stats', type:'fetch', target:'/api/integrations/youtube/data?endpoint=channels' },\n\n // -- SALES --------------------------------------------------------------\n { cat:'SALES', icon:'contact_mail', label:'AI Lead Ranking (MQL/SQL)', type:'fetch', target:'/api/intelligence/leads' },\n { cat:'SALES', icon:'inbox', label:'Outlook Inbox (recent 20)', type:'fetch', target:'/api/integrations/outlook/data?endpoint=inbox' },\n { cat:'SALES', icon:'event', label:\"Today's Calendar\", type:'fetch', target:'/api/integrations/calendar/data?endpoint=today' },\n { cat:'SALES', icon:'mail', label:'Gmail Unread', type:'fetch', target:'/api/integrations/gmail/data?endpoint=unread' },\n\n // -- INTELLIGENCE -------------------------------------------------------\n { cat:'INTELLIGENCE', icon:'insights', label:'Funnel Summary', type:'fetch', target:'/api/intelligence/funnel-summary' },\n { cat:'INTELLIGENCE', icon:'route', label:'Active Correlations', type:'fetch', target:'/api/intelligence/correlations' },\n { cat:'INTELLIGENCE', icon:'tips_and_updates',label:'Recommendations', type:'fetch', target:'/api/intelligence/recommendations' },\n { cat:'INTELLIGENCE', icon:'functions', label:'AIO KPIs (CAC/LTV/conv)', type:'fetch', target:'/api/intelligence/kpis' },\n { cat:'INTELLIGENCE', icon:'auto_awesome', label:'Intelligence Feed (AI)', type:'fetch', target:'/api/intelligence/feed' },\n\n // -- ASK NEXUS (chat-driven analysis) -----------------------------------\n { cat:'ASK NEXUS', icon:'help_outline', label:'Why is BOFU low?', type:'chat', target:'Why is my BOFU funnel health low? Cite specific metrics and give me 3 actions.' },\n { cat:'ASK NEXUS', icon:'trending_down', label:'Top bottleneck right now', type:'chat', target:\"What's the single biggest bottleneck in my funnel right now? Reference real metric values.\" },\n { cat:'ASK NEXUS', icon:'speed', label:'How to improve conversion?', type:'chat', target:'Given my current funnel state, what are the 3 highest-leverage actions to lift conversion rate?' },\n { cat:'ASK NEXUS', icon:'compare_arrows', label:'CAC vs LTV diagnosis', type:'chat', target:'Analyze my CAC and LTV/CAC ratio. Is the unit economics healthy for a B2B SaaS at this stage?' },\n\n // -- AGENTS -------------------------------------------------------------\n { cat:'AGENTS', icon:'smart_toy', label:'List All Agents', type:'fetch', target:'/api/agents' },\n { cat:'AGENTS', icon:'list_alt', label:'Marketing Agents', type:'fetch', target:'/api/agents?workspace=marketing' },\n { cat:'AGENTS', icon:'business_center',label:'Sales Agents', type:'fetch', target:'/api/agents?workspace=sales' },\n { cat:'AGENTS', icon:'monitoring', label:'Agent Trace', type:'trace' },\n { cat:'AGENTS', icon:'public', label:'Open Agent World ↗', type:'world' },\n { cat:'AGENTS', icon:'open_in_new', label:'Open Agent Studio', type:'nav', target:'agents' },\n\n // -- ADMIN --------------------------------------------------------------\n { cat:'ADMIN', icon:'settings', label:'Show Config', type:'fetch', target:'/api/config' },\n { cat:'ADMIN', icon:'delete_sweep', label:'Purge Cache + History',type:'purge' },\n { cat:'ADMIN', icon:'restart_alt', label:'Reload App', type:'action', target:'reload' },\n { cat:'ADMIN', icon:'open_in_new', label:'Open Settings', type:'nav', target:'settings' },\n];\n\nconst CAT_COLOR = {\n STATUS: {bg:'bg-secondary/10', text:'text-secondary', border:'border-secondary/20'},\n MARKETING: {bg:'bg-primary/10', text:'text-primary', border:'border-primary/20'},\n SALES: {bg:'bg-tertiary/10', text:'text-tertiary', border:'border-tertiary/20'},\n INTELLIGENCE: {bg:'bg-primary/10', text:'text-primary', border:'border-primary/20'},\n 'ASK NEXUS': {bg:'bg-tertiary/10', text:'text-tertiary', border:'border-tertiary/20'},\n AGENTS: {bg:'bg-secondary/10', text:'text-secondary', border:'border-secondary/20'},\n ADMIN: {bg:'bg-error/10', text:'text-error', border:'border-error/20'},\n};\n\n// --- COMMAND CENTER PAGE -----------------------------------------------------\n// Lazy-import widgets module so CommandCenter can render NSM + Today + Digest panels at the top.\n// Falls back to no-op components if the module fails to load (e.g. during an incremental deploy).\nconst _widgets = await import('/api/app-widgets').catch(() => ({}));\nconst NSMHero = _widgets.NSMHero || (() => null);\nconst TodayPanel = _widgets.TodayPanel || (() => null);\nconst DigestPanel = _widgets.DigestPanel || (() => null);\n\n// --- TASKS-BY-DAY AGENDA -----------------------------------------------------\n// Compact \"the day's work\" panel: GET /api/tasks (bearer is attached by the\n// global fetch wrapper), drop completed work, then bucket by due_date into\n// Overdue / Today / Tomorrow / This week. Campaign + objective names are\n// resolved from /api/okrs and /api/campaigns so each row can show a real chip.\n// The whole panel links to the Tasks (calendar) page via setActivePage.\nconst AGENDA_BUCKETS = [\n {key:'overdue', label:'Overdue', icon:'warning', tone:'text-error'},\n {key:'today', label:'Today', icon:'today', tone:'text-primary'},\n {key:'tomorrow', label:'Tomorrow', icon:'wb_sunny', tone:'text-tertiary'},\n {key:'week', label:'This week', icon:'date_range', tone:'text-secondary'},\n];\n\nconst STATUS_TONE = {\n todo: 'bg-white/10 text-text-muted',\n doing: 'bg-tertiary/20 text-tertiary',\n blocked: 'bg-error/20 text-error',\n done: 'bg-secondary/20 text-secondary',\n};\n\n// Local-date key (YYYY-MM-DD) for a Date, so bucketing matches the user's day.\nconst dayKey = (d) => {\n const z = new Date(d.getTime() - d.getTimezoneOffset() * 60000);\n return z.toISOString().slice(0, 10);\n};\n\n// Classify a task's due_date string into a bucket key (or null = not on agenda).\nconst bucketFor = (due) => {\n if (!due) return null;\n const raw = String(due).slice(0, 10);\n const now = new Date();\n const todayK = dayKey(now);\n const tomorrow = new Date(now); tomorrow.setDate(now.getDate() + 1);\n const tomorrowK = dayKey(tomorrow);\n const weekEnd = new Date(now); weekEnd.setDate(now.getDate() + 7);\n const weekEndK = dayKey(weekEnd);\n if (raw < todayK) return 'overdue';\n if (raw === todayK) return 'today';\n if (raw === tomorrowK) return 'tomorrow';\n if (raw <= weekEndK) return 'week';\n return null;\n};\n\nfunction AgendaPanel({setActivePage}) {\n const {Icon, Spinner} = N();\n const [tasks, setTasks] = useState(null); // null = loading\n const [names, setNames] = useState({campaigns:{}, objectives:{}});\n\n useEffect(() => {\n let live = true;\n fetch('/api/tasks')\n .then(r => r.ok ? r.json() : [])\n .then(d => { if (live) setTasks(Array.isArray(d) ? d : []); })\n .catch(() => { if (live) setTasks([]); });\n Promise.all([\n fetch('/api/okrs').then(r => r.ok ? r.json() : []).catch(() => []),\n fetch('/api/campaigns').then(r => r.ok ? r.json() : []).catch(() => []),\n ]).then(([objs, camps]) => {\n if (!live) return;\n const objectives = {}; const campaigns = {};\n (Array.isArray(objs) ? objs : []).forEach(o => { objectives[String(o.id)] = o.title || o.name; });\n (Array.isArray(camps) ? camps : []).forEach(c => { campaigns[String(c.id)] = c.name || c.title; });\n setNames({campaigns, objectives});\n }).catch(() => {});\n return () => { live = false; };\n }, []);\n\n const goTasks = () => setActivePage && setActivePage('tasks');\n\n // Bucket non-done tasks; keep each bucket sorted by due date then ICE desc.\n const grouped = {overdue:[], today:[], tomorrow:[], week:[]};\n (tasks || []).forEach(t => {\n if (t.status === 'done') return;\n const b = bucketFor(t.due_date);\n if (b) grouped[b].push(t);\n });\n Object.keys(grouped).forEach(k => grouped[k].sort((a, b) =>\n String(a.due_date).localeCompare(String(b.due_date)) ||\n (Number(b.ice_score || 0) - Number(a.ice_score || 0))\n ));\n const total = grouped.overdue.length + grouped.today.length + grouped.tomorrow.length + grouped.week.length;\n\n const chip = (icon, txt, tone) => h('span', {\n className:'inline-flex items-center gap-0.5 text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded ' + tone\n }, h(Icon, {name: icon, size: 9}), txt);\n\n const taskRow = (t) => {\n const objName = t.objective_id ? names.objectives[String(t.objective_id)] : null;\n const campName = t.campaign_id ? names.campaigns[String(t.campaign_id)] : null;\n return h('button', {\n key: t.id,\n onClick: goTasks,\n className:'w-full text-left flex items-start gap-2 px-2 py-1.5 rounded-lg bg-white/[0.03] hover:bg-white/[0.06] transition-colors group'\n },\n h('span', {className:'mt-0.5 w-1.5 h-1.5 rounded-full flex-shrink-0 ' +\n (t.priority === 'urgent' || t.priority === 'high' ? 'bg-error' : t.priority === 'low' ? 'bg-white/20' : 'bg-tertiary')}),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'text-[11px] text-on-surface font-medium truncate group-hover:text-primary'}, t.title || 'Untitled'),\n h('div', {className:'flex items-center gap-1 flex-wrap mt-1'},\n chip('radio_button_checked', t.status || 'todo', STATUS_TONE[t.status] || STATUS_TONE.todo),\n campName && chip('campaign', campName, 'bg-primary/10 text-primary border border-primary/20'),\n objName && chip('flag', objName, 'bg-secondary/10 text-secondary border border-secondary/20'),\n t.ice_score != null && chip('bolt', 'ICE ' + Number(t.ice_score).toFixed(1), 'bg-tertiary/10 text-tertiary border border-tertiary/20')\n )\n )\n );\n };\n\n return h('div', {className:'glass-panel rounded-xl flex flex-col'},\n h('button', {\n onClick: goTasks,\n className:'p-md border-b border-border-subtle flex items-center justify-between w-full text-left hover:bg-white/[0.02] transition-colors'\n },\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'checklist', size:18, className:'text-primary'}),\n h('h3', {className:'text-[14px] font-bold'}, 'AGENDA'),\n h('span', {className:'text-[10px] text-text-muted'}, total + ' due')\n ),\n h('span', {className:'flex items-center gap-1 text-[10px] font-bold uppercase tracking-widest text-text-muted group-hover:text-on-surface'},\n 'Open Tasks', h(Icon, {name:'arrow_forward', size:12})\n )\n ),\n h('div', {className:'p-md space-y-md max-h-[420px] overflow-y-auto'},\n tasks === null\n ? h('div', {className:'flex items-center gap-2 text-[11px] text-text-muted py-4 justify-center'}, h(Spinner, {size:14}), 'Loading agenda-')\n : total === 0\n ? h('div', {className:'text-center text-text-muted text-[12px] py-8'},\n h(Icon, {name:'event_available', size:28, className:'opacity-30 mb-2 block mx-auto'}),\n h('div', null, 'Nothing due this week.'),\n h('button', {onClick: goTasks, className:'text-primary hover:underline text-[11px] mt-1'}, 'Plan tasks →')\n )\n : AGENDA_BUCKETS.map(b => {\n const items = grouped[b.key];\n if (!items.length) return null;\n return h('div', {key: b.key, className:'space-y-1.5'},\n h('div', {className:'flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest ' + b.tone},\n h(Icon, {name: b.icon, size: 12}),\n h('span', null, b.label),\n h('span', {className:'text-text-muted font-normal'}, items.length)\n ),\n items.map(taskRow)\n );\n })\n )\n );\n}\n\nexport function CommandCenter({setActivePage, agents, integrations, showToast}) {\n const {Icon, Spinner, PageHeader, Btn} = N();\n const [history, setHistory] = useState([]); // {id, command, status, output, ts}\n const [running, setRunning] = useState(null); // command id while in-flight\n const [filter, setFilter] = useState('');\n const [input, setInput] = useState('');\n const outputRef = useRef(null);\n useEffect(() => { outputRef.current?.scrollTo({top: 0, behavior:'smooth'}); }, [history.length]);\n\n // Categories present after filter\n const filtered = COMMANDS.filter(c =>\n !filter || (c.label + ' ' + c.cat).toLowerCase().includes(filter.toLowerCase())\n );\n const categories = Array.from(new Set(filtered.map(c => c.cat)));\n\n const log = (entry) => setHistory(h => [{...entry, id: Date.now() + '_' + Math.random(), ts: fmtTime()}, ...h].slice(0, 30));\n\n const runCommand = async (cmd) => {\n setRunning(cmd.label);\n log({command: cmd.label, status:'running', cat: cmd.cat});\n try {\n let output;\n if (cmd.type === 'fetch') {\n const r = await fetch(cmd.target);\n const ct = r.headers.get('content-type') || '';\n output = ct.includes('json') ? await r.json() : await r.text();\n log({command: cmd.label, status: r.ok ? 'ok' : 'error', cat: cmd.cat, output, target: cmd.target, http: r.status});\n } else if (cmd.type === 'chat') {\n const r = await fetch('/api/chat', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({message: cmd.target, workspace:'marketing'})});\n const d = await r.json();\n log({command: cmd.label, status: r.ok ? 'ok' : 'error', cat: cmd.cat, output: d.response || d, target: 'chat:' + cmd.target.slice(0,60)});\n } else if (cmd.type === 'nav') {\n setActivePage(cmd.target);\n log({command: cmd.label, status:'ok', cat: cmd.cat, output:'Navigated to - ' + cmd.target});\n } else if (cmd.type === 'world') {\n window.open('/world', '_blank');\n log({command: cmd.label, status:'ok', cat: cmd.cat, output:'Opened the 3D Agent World in a new tab.'});\n } else if (cmd.type === 'action' && cmd.target === 'reload') {\n log({command: cmd.label, status:'ok', cat: cmd.cat, output:'Reloading-'});\n setTimeout(() => window.location.reload(), 400);\n } else if (cmd.type === 'trace') {\n // Surface recent agent runs + their structured trace steps as a readable log.\n // No generic recent-runs endpoint exists, so: list agents, then pull the latest\n // runs for the most recently-created few and merge them newest-first.\n const ar = await fetch('/api/agents');\n const agentList = ar.ok ? await ar.json() : [];\n const recentAgents = (Array.isArray(agentList) ? agentList : []).slice(0, 6);\n const runs = [];\n for (const ag of recentAgents) {\n try {\n const rr = await fetch('/api/agents/' + ag.id + '/runs?limit=5');\n if (!rr.ok) continue;\n const rows = await rr.json();\n (Array.isArray(rows) ? rows : []).forEach(run => runs.push({...run, agent_name: ag.name}));\n } catch (_) { /* skip agent on error */ }\n }\n runs.sort((a, b) => String(b.started_at || '').localeCompare(String(a.started_at || '')));\n log({command: cmd.label, status:'ok', cat: cmd.cat, output: {runs: runs.slice(0, 15)}, target: '/api/agents/{id}/runs (recent)'});\n } else if (cmd.type === 'purge') {\n if (prompt('Type PURGE to confirm wipe of intelligence cache + metric history:') !== 'PURGE') {\n log({command: cmd.label, status:'cancelled', cat: cmd.cat, output:'Cancelled by user.'});\n } else {\n const r = await fetch('/api/admin/purge', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({confirm:'PURGE'})});\n const d = await r.json();\n log({command: cmd.label, status: r.ok ? 'ok' : 'error', cat: cmd.cat, output: d});\n showToast && showToast(r.ok ? 'Purged' : 'Purge failed', r.ok ? 'info' : 'error');\n }\n }\n } catch (e) {\n log({command: cmd.label, status:'error', cat: cmd.cat, output: 'Error: ' + (e.message || e)});\n } finally { setRunning(null); }\n };\n\n const submitFreeform = () => {\n if (!input.trim()) return;\n runCommand({label: input.trim(), cat:'ASK NEXUS', type:'chat', target: input.trim()});\n setInput('');\n };\n\n // --- SMART OUTPUT RENDERER ---------------------------------------------------\n // Detects data shape from output structure + API target and renders visual UI\n // instead of raw JSON. Falls back to <pre> only when no shape matches.\n const CommandOutputRenderer = ({output, target, status}) => {\n if (output == null) return null;\n\n // -- Helpers ----------------------------------------------------------------\n const card = (...children) => h('div', {className:'glass-panel rounded-lg border border-border-subtle/60 bg-white/[0.02] p-2 space-y-1'}, ...children);\n const badge = (label, variant) => {\n const styles = {\n ok: 'bg-secondary/20 text-secondary',\n error: 'bg-error/20 text-error',\n warn: 'bg-tertiary/20 text-tertiary',\n primary: 'bg-primary/15 text-primary',\n muted: 'bg-white/10 text-text-muted',\n };\n return h('span', {className:'px-2 py-0.5 rounded text-[10px] font-bold ' + (styles[variant] || styles.muted)}, label);\n };\n const pill = (label) => h('span', {className:'px-1.5 rounded text-[9px] bg-primary/15 text-primary'}, label);\n const row = (...cols) => h('div', {className:'flex items-center gap-2 flex-wrap'}, ...cols);\n const label = (txt) => h('span', {className:'text-[10px] text-text-muted uppercase tracking-widest'}, txt);\n const val = (txt) => h('span', {className:'text-[11px] text-on-surface font-medium'}, String(txt ?? '-'));\n\n const wrap = (...children) => h('div', {className:'mt-1 space-y-1 text-[11px]'}, ...children);\n\n // -- String output ----------------------------------------------------------\n if (typeof output === 'string') {\n const md = /[#*\\`\\\\n]|^- /m.test(output);\n if (md) {\n const marked = (window.__nexus || {}).marked || (s => s);\n return wrap(h('div', {\n className:'md-body text-on-surface-variant prose prose-invert max-w-none',\n dangerouslySetInnerHTML: {__html: marked(output)}\n }));\n }\n return wrap(h('div', {className:'text-on-surface-variant whitespace-pre-wrap break-words'}, output));\n }\n\n // -- Number / boolean ------------------------------------------------------\n if (typeof output === 'number' || typeof output === 'boolean') {\n return wrap(h('div', {className:'text-on-surface font-medium'}, String(output)));\n }\n\n // -- Object / Array shapes -------------------------------------------------\n const isArr = Array.isArray(output);\n const first = isArr && output.length > 0 ? output[0] : null;\n\n // 0. File-content envelope: {ok:true, mimeType, bytes, truncated, content}\n // Must run BEFORE the health-check case (which also matches output.ok === true).\n if (!isArr && output.ok === true && typeof output.content === 'string' && (output.mimeType || output.bytes != null)) {\n const title = output.title || output.subject || output.name || output.path || 'File';\n return wrap(\n card(\n row(badge('file', 'primary'), val(title)),\n row(\n output.mimeType && label('type'), output.mimeType && val(output.mimeType),\n output.bytes != null && label('bytes'), output.bytes != null && val(output.bytes),\n output.truncated && badge('truncated', 'warn')\n )\n ),\n h('pre', {className:'mt-2 max-h-80 overflow-auto whitespace-pre-wrap text-[12px] leading-relaxed text-on-surface bg-surface-container-lowest rounded p-3 font-mono'}, String(output.content))\n );\n }\n\n // 1. Health check: {status:'ok'|'healthy', ...}\n if (!isArr && (output.status === 'ok' || output.status === 'healthy' || output.ok === true)) {\n const ts = output.timestamp || output.checked_at || output.ts || '';\n return wrap(card(\n row(badge(output.status || 'ok', 'ok'), label('System health'), ts && val(ts)),\n output.db && row(label('db'), val(output.db)),\n output.version && row(label('version'), val(output.version))\n ));\n }\n if (!isArr && (output.status === 'error' || output.error)) {\n return wrap(card(\n row(badge('error', 'error'), val(output.error || output.message || 'Error'))\n ));\n }\n\n // 2. Integration list: array of {name, connected, ...}\n if (isArr && first && first.connected !== undefined) {\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'Integrations'),\n h('div', {className:'grid grid-cols-2 gap-1'},\n output.map((it, i) => h('div', {key:i, className:'flex items-center justify-between px-2 py-1 rounded bg-white/[0.03]'},\n h('span', {className:'text-[11px] text-on-surface truncate'}, it.name || it.id),\n badge(it.connected ? 'connected' : 'disconnected', it.connected ? 'ok' : 'error')\n ))\n )\n ));\n }\n\n // 3. Agents list: array of {name, system_prompt, ...}\n if (isArr && first && first.system_prompt !== undefined) {\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, output.length + ' Agents'),\n h('div', {className:'space-y-1'},\n output.slice(0, 10).map((ag, i) => h('div', {key:i, className:'flex items-center justify-between px-2 py-1 rounded bg-white/[0.03]'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className:'text-[11px] text-on-surface truncate'}, ag.name),\n ag.workspace && pill(ag.workspace)\n ),\n badge(ag.enabled ? 'enabled' : 'disabled', ag.enabled ? 'ok' : 'muted')\n ))\n )\n ));\n }\n\n // 4. Single agent: {name, system_prompt, ...}\n if (!isArr && output.name && output.system_prompt !== undefined) {\n return wrap(card(\n row(h('span', {className:'text-[12px] font-bold text-on-surface'}, output.name), output.workspace && pill(output.workspace), badge(output.enabled ? 'enabled' : 'disabled', output.enabled ? 'ok' : 'muted')),\n output.model && row(label('model'), val(output.model))\n ));\n }\n\n // 4b. Agent runs trace: {runs:[...]} OR array of {status, trace, agent_id}\n // Each run.trace is a JSON string of steps {t,name,preview,ts}. Render a\n // terminal-style log, newest first: agent + status badge + each step.\n const runsArr = (!isArr && Array.isArray(output.runs)) ? output.runs\n : (isArr && first && (first.trace !== undefined || first.agent_id !== undefined) && first.status !== undefined) ? output\n : null;\n if (runsArr) {\n const stepIcon = {tool:'build', message:'chat_bubble', round:'radio_button_checked'};\n const statusVariant = (s) => s === 'completed' || s === 'ok' || s === 'done' ? 'ok'\n : s === 'failed' || s === 'error' ? 'error'\n : s === 'running' ? 'warn' : 'muted';\n const parseTrace = (t) => {\n if (!t) return [];\n if (Array.isArray(t)) return t;\n try { const p = JSON.parse(t); return Array.isArray(p) ? p : []; } catch (_) { return []; }\n };\n const stepText = (st) => st.t === 'tool' ? (st.name + (st.result_preview ? ' - ' + st.result_preview : ''))\n : st.t === 'message' ? (st.preview || '')\n : st.t === 'round' ? ('round ' + (st.n ?? ''))\n : (st.preview || st.name || st.t || '');\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'Agent Trace (' + runsArr.length + ' runs)'),\n runsArr.length === 0 && h('div', {className:'text-[11px] text-text-muted'}, 'No recent runs.'),\n h('div', {className:'space-y-2'},\n runsArr.slice(0, 15).map((run, ri) => {\n const steps = parseTrace(run.trace);\n return h('div', {key: run.id || ri, className:'border-l-2 border-border-subtle/40 pl-2 space-y-1'},\n row(\n badge(run.status || 'unknown', statusVariant(run.status)),\n h('span', {className:'text-[11px] font-medium text-on-surface truncate'}, run.agent_name || run.agent_id || 'agent'),\n run.trigger && pill(run.trigger),\n run.started_at && h('span', {className:'text-[10px] text-text-muted'}, String(run.started_at).replace('T',' ').slice(0,19))\n ),\n run.error && h('div', {className:'text-[10px] text-error truncate'}, String(run.error)),\n steps.length > 0 && h('div', {className:'space-y-0.5 mt-0.5'},\n steps.slice(0, 12).map((st, si) => h('div', {key: si, className:'flex items-start gap-1.5'},\n h(Icon, {name: stepIcon[st.t] || 'circle', size: 12, className:'text-text-muted flex-shrink-0 mt-0.5'}),\n h('span', {className:'text-[10px] text-on-surface-variant break-words'}, stepText(st))\n ))\n ),\n steps.length === 0 && !run.error && h('div', {className:'text-[10px] text-text-muted'}, '(no trace recorded)')\n );\n })\n )\n ));\n }\n\n // 5. Leads: output.leads array or array with mql_score\n const leadsArr = (!isArr && Array.isArray(output.leads)) ? output.leads\n : (isArr && first && first.mql_score != null) ? output : null;\n if (leadsArr) {\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'Leads (' + leadsArr.length + ')'),\n h('div', {className:'space-y-1'},\n leadsArr.slice(0, 8).map((l, i) => h('div', {key:i, className:'flex items-center justify-between px-2 py-1 rounded bg-white/[0.03]'},\n h('div', {className:'min-w-0'},\n h('div', {className:'text-[11px] font-medium text-on-surface truncate'}, l.name || l.email || '-'),\n l.company && h('div', {className:'text-[10px] text-text-muted truncate'}, l.company)\n ),\n h('div', {className:'flex items-center gap-1 flex-shrink-0'},\n l.mql_score != null && badge('MQL ' + Math.round(l.mql_score), l.mql_score >= 70 ? 'ok' : l.mql_score >= 40 ? 'warn' : 'muted'),\n l.sql_score != null && badge('SQL ' + Math.round(l.sql_score), l.sql_score >= 70 ? 'ok' : 'muted')\n )\n ))\n )\n ));\n }\n\n // 6. Funnel summary: {stages: [{name, health, ...}]}\n if (!isArr && Array.isArray(output.stages)) {\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'Funnel Health'),\n h('div', {className:'space-y-2'},\n output.stages.map((s, i) => {\n const pct = Math.min(100, Math.max(0, s.health ?? s.score ?? 0));\n const color = pct >= 70 ? 'bg-secondary' : pct >= 40 ? 'bg-tertiary' : 'bg-error';\n return h('div', {key:i, className:'space-y-0.5'},\n h('div', {className:'flex items-center justify-between'},\n h('span', {className:'text-[11px] text-on-surface'}, s.name || s.stage),\n h('span', {className:'text-[10px] text-text-muted'}, Math.round(pct) + '%')\n ),\n h('div', {className:'h-1.5 rounded-full bg-white/10'},\n h('div', {className:'h-1.5 rounded-full ' + color, style:{width: pct + '%'}})\n )\n );\n })\n ),\n output.overall_health != null && row(label('overall'), badge(Math.round(output.overall_health) + '%', output.overall_health >= 70 ? 'ok' : output.overall_health >= 40 ? 'warn' : 'error'))\n ));\n }\n\n // 7. Correlations: {correlations: [{rule, confidence, ...}]}\n if (!isArr && Array.isArray(output.correlations)) {\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'Correlations'),\n h('div', {className:'space-y-1'},\n output.correlations.slice(0, 6).map((c, i) => h('div', {key:i, className:'px-2 py-1 rounded bg-white/[0.03] flex items-start justify-between gap-2'},\n h('span', {className:'text-[11px] text-on-surface-variant flex-1'}, c.rule || c.description || c.name),\n c.confidence != null && badge(Math.round(c.confidence * 100) + '%', c.confidence >= 0.7 ? 'ok' : 'warn')\n ))\n )\n ));\n }\n\n // 8. Recommendations: {recommendations: [{title, action, ...}]}\n if (!isArr && Array.isArray(output.recommendations)) {\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'Recommendations'),\n h('div', {className:'space-y-1'},\n output.recommendations.slice(0, 6).map((r, i) => h('div', {key:i, className:'px-2 py-1.5 rounded bg-white/[0.03]'},\n h('div', {className:'text-[11px] font-medium text-on-surface'}, r.title || r.action || r.description),\n r.rationale && h('div', {className:'text-[10px] text-text-muted mt-0.5'}, r.rationale),\n r.priority && h('span', {className:'inline-block mt-0.5 px-1.5 py-0.5 rounded text-[9px] bg-primary/15 text-primary'}, r.priority)\n ))\n )\n ));\n }\n\n // 9. KPIs: {cac, ltv, mer, ...}\n if (!isArr && (output.cac != null || output.ltv != null || output.mer != null)) {\n const kpis = [\n {k:'CAC', v: output.cac},\n {k:'LTV', v: output.ltv},\n {k:'MER', v: output.mer},\n {k:'LTV:CAC', v: output.ltv_cac_ratio},\n {k:'Conv%', v: output.conversion_rate != null ? (output.conversion_rate * 100).toFixed(1) + '%' : null},\n {k:'ARPU', v: output.arpu},\n ].filter(x => x.v != null);\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'KPIs'),\n h('div', {className:'flex flex-wrap gap-2'},\n kpis.map((kpi, i) => h('div', {key:i, className:'flex flex-col items-center px-3 py-1.5 rounded-lg bg-primary/10'},\n h('span', {className:'text-[9px] text-text-muted uppercase tracking-widest'}, kpi.k),\n h('span', {className:'text-[13px] font-bold text-primary'}, typeof kpi.v === 'number' ? kpi.v.toLocaleString() : kpi.v)\n ))\n )\n ));\n }\n\n // 10. Intelligence feed: array of canonical cards from getIntelligenceFeed.\n // Backend emits type ∈ {correlation,anomaly,opportunity,risk,win} with\n // real fields title + body(description) + priority(severity).\n const FEED_TYPES = ['correlation','anomaly','opportunity','risk','win'];\n if (isArr && first && FEED_TYPES.indexOf(first.type) !== -1) {\n const typeColor = {correlation:'primary', anomaly:'warn', opportunity:'ok', risk:'error', win:'ok'};\n const typeIcon = {correlation:'route', anomaly:'warning', opportunity:'lightbulb', risk:'priority_high', win:'emoji_events'};\n const typeText = {correlation:'text-primary', anomaly:'text-tertiary', opportunity:'text-secondary', risk:'text-error', win:'text-secondary'};\n const sevColor = {critical:'error', high:'warn', medium:'primary', low:'muted'};\n return wrap(card(\n h('div', {className:'text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1'}, 'Intelligence Feed'),\n h('div', {className:'space-y-1'},\n output.slice(0, 8).map((item, i) => {\n const desc = item.body || item.description || item.message;\n const sev = item.priority || item.severity;\n return h('div', {key:i, className:'px-2 py-1.5 rounded bg-white/[0.03] flex items-start gap-2'},\n h(Icon, {name: typeIcon[item.type] || 'auto_awesome', size: 14, className:'flex-shrink-0 mt-0.5 ' + (typeText[item.type] || 'text-text-muted')}),\n h('div', {className:'flex-1 min-w-0'},\n row(\n badge(item.type, typeColor[item.type] || 'muted'),\n sev && badge(sev, sevColor[sev] || 'muted')\n ),\n h('div', {className:'text-[11px] font-medium text-on-surface truncate mt-0.5'}, item.title || item.message),\n desc && h('div', {className:'text-[10px] text-text-muted line-clamp-2'}, desc)\n )\n );\n })\n )\n ));\n }\n\n // 11. LLM Config: {provider, model, ...}\n if (!isArr && output.provider && output.model) {\n return wrap(card(\n row(label('provider'), badge(output.provider, 'primary'), label('model'), val(output.model)),\n output.temperature != null && row(label('temperature'), val(output.temperature)),\n output.max_tokens != null && row(label('max tokens'), val(output.max_tokens))\n ));\n }\n\n // 12. Flat object with -10 primitive-value keys\n if (!isArr && typeof output === 'object') {\n const keys = Object.keys(output);\n const allPrimitive = keys.every(k => {\n const t = typeof output[k];\n return t === 'string' || t === 'number' || t === 'boolean' || output[k] == null;\n });\n if (allPrimitive && keys.length <= 10) {\n return wrap(card(\n h('div', {className:'flex flex-wrap gap-x-4 gap-y-1'},\n keys.map(k => h('div', {key:k, className:'flex items-center gap-1'},\n label(k),\n val(output[k])\n ))\n )\n ));\n }\n }\n\n // 13. Array of plain objects - mini table (first 8 rows, first 5 cols)\n if (isArr && first && typeof first === 'object' && !Array.isArray(first)) {\n const cols = Object.keys(first).slice(0, 5);\n return wrap(card(\n h('table', {className:'w-full text-[10px]'},\n h('thead', null, h('tr', null,\n cols.map(c => h('th', {key:c, className:'text-left text-text-muted font-normal pb-1 pr-3 uppercase tracking-widest'}, c))\n )),\n h('tbody', null,\n output.slice(0, 8).map((row_, ri) => h('tr', {key:ri, className:'border-t border-border-subtle/30'},\n cols.map(c => h('td', {key:c, className:'py-1 pr-3 text-on-surface-variant truncate max-w-[120px]'},\n String(row_[c] ?? '-')\n ))\n ))\n )\n ),\n output.length > 8 && h('div', {className:'text-[10px] text-text-muted mt-1'}, '+ ' + (output.length - 8) + ' more rows')\n ));\n }\n\n // 14. Fallback - pre with truncated JSON\n try {\n const raw = JSON.stringify(output, null, 2);\n return wrap(h('pre', {\n className:'bg-surface-container-lowest p-2 rounded text-[11px] text-on-surface-variant overflow-x-auto max-h-48 overflow-y-auto whitespace-pre-wrap break-all',\n style:{lineHeight:1.4}\n }, raw.slice(0, 3000)));\n } catch {\n return wrap(h('div', {className:'text-text-muted'}, String(output).slice(0, 3000)));\n }\n };\n\n return h('div', {className:'p-lg lg:p-xl max-w-[1440px] mx-auto space-y-lg'},\n h(PageHeader, {\n title:'Command Center',\n subtitle:'North Star - Growth Digest - Real-time command palette. Every operation hits a live endpoint.'\n }),\n\n // -- Framework hero row: NSM + Today + Digest -------------------------\n h('div', {className:'grid grid-cols-1 lg:grid-cols-3 gap-lg'},\n h(NSMHero, {setActivePage}),\n h(TodayPanel, {setActivePage}),\n h(DigestPanel, null)\n ),\n\n // -- Tasks-by-day agenda: the day's work ------------------------------\n h(AgendaPanel, {setActivePage}),\n\n // -- Freeform input bar -----------------------------------------------\n h('div', {className:'glass-panel rounded-xl p-md flex items-center gap-3'},\n h(Icon, {name:'terminal', size:20, className:'text-primary flex-shrink-0'}),\n h('input', {\n value: input, onChange: e => setInput(e.target.value),\n onKeyDown: e => { if (e.key === 'Enter') submitFreeform(); },\n placeholder:'> ask Nexus anything, or type a command name to filter-',\n className:'flex-1 bg-transparent border-none text-on-surface text-[14px] outline-none font-mono-data placeholder:text-text-muted'\n }),\n h('button', {\n onClick: () => { setFilter(input); },\n className:'text-[10px] font-bold uppercase tracking-widest text-text-muted hover:text-on-surface px-2 py-1 rounded border border-border-subtle'\n }, 'Filter'),\n filter && h('button', {\n onClick: () => { setFilter(''); setInput(''); },\n className:'text-[10px] font-bold uppercase tracking-widest text-error hover:bg-error/10 px-2 py-1 rounded'\n }, 'Clear filter'),\n h('button', {\n onClick: submitFreeform,\n className:'bg-primary text-on-primary px-4 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-widest hover:opacity-90'\n }, 'Run')\n ),\n\n // -- Two-column: command palette + output log ------------------------\n h('div', {className:'grid grid-cols-1 xl:grid-cols-2 gap-lg'},\n // Left: command palette grouped by category\n h('div', {className:'glass-panel rounded-xl p-lg space-y-md max-h-[640px] overflow-y-auto'},\n categories.map(cat => {\n const cmds = filtered.filter(c => c.cat === cat);\n const cc = CAT_COLOR[cat] || CAT_COLOR.STATUS;\n return h('div', {key: cat, className:'space-y-2'},\n h('div', {className:'flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest ' + cc.text + ' pt-1'},\n h('span', null, '- ' + cat),\n h('span', {className:'text-text-muted font-normal'}, cmds.length)\n ),\n h('div', {className:'grid grid-cols-1 sm:grid-cols-2 gap-2'},\n cmds.map(cmd => h('button', {\n key: cmd.label,\n onClick: () => runCommand(cmd),\n disabled: running === cmd.label,\n className: 'flex items-center gap-2 px-3 py-2 rounded-lg border text-left transition-all ' + cc.border + ' ' + cc.bg +\n ' hover:opacity-100 hover:scale-[1.01] ' +\n (running === cmd.label ? 'opacity-50 cursor-wait' : 'cursor-pointer')\n },\n running === cmd.label ? h(Spinner, {size:14}) : h(Icon, {name: cmd.icon, size: 16, className: cc.text}),\n h('span', {className:'text-[12px] font-medium text-on-surface flex-1 truncate'}, cmd.label),\n cmd.type === 'chat' && h(Icon, {name:'auto_awesome', size:12, className:'text-text-muted'}),\n cmd.type === 'nav' && h(Icon, {name:'arrow_forward', size:12, className:'text-text-muted'})\n ))\n )\n );\n }),\n categories.length === 0 && h('div', {className:'text-center text-text-muted text-[13px] py-6'}, 'No commands match filter.')\n ),\n\n // Right: terminal-style output log\n h('div', {className:'glass-panel rounded-xl flex flex-col max-h-[640px]'},\n h('div', {className:'p-md border-b border-border-subtle flex justify-between items-center'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'monitor_heart', size:18, className:'text-secondary'}),\n h('h3', {className:'text-[14px] font-bold'}, 'OUTPUT'),\n h('span', {className:'text-[10px] text-text-muted'}, history.length + ' runs')\n ),\n h('button', {\n onClick: () => setHistory([]),\n className:'text-[10px] font-bold uppercase tracking-widest text-text-muted hover:text-on-surface px-2 py-1 rounded',\n disabled: history.length === 0\n }, 'Clear')\n ),\n h('div', {ref: outputRef, className:'flex-1 overflow-y-auto p-md space-y-3 font-mono-data text-[12px]'},\n history.length === 0\n ? h('div', {className:'text-center text-text-muted py-12'},\n h(Icon, {name:'terminal', size:32, className:'opacity-30 mb-2 block mx-auto'}),\n h('div', null, 'Run a command to see output here.')\n )\n : history.map(entry => {\n const cc = CAT_COLOR[entry.cat] || CAT_COLOR.STATUS;\n const statusColor = entry.status === 'ok' ? 'text-secondary' : entry.status === 'error' ? 'text-error' : entry.status === 'running' ? 'text-tertiary' : 'text-text-muted';\n return h('div', {key: entry.id, className:'border-l-2 ' + cc.border + ' pl-3 space-y-1'},\n h('div', {className:'flex items-center justify-between text-[11px]'},\n h('div', {className:'flex items-center gap-2 min-w-0'},\n h('span', {className: 'font-bold ' + statusColor}, '> '),\n h('span', {className:'text-on-surface truncate'}, entry.command),\n entry.cat && h('span', {className: cc.text + ' text-[9px] uppercase tracking-widest px-1.5 rounded ' + cc.bg}, entry.cat)\n ),\n h('span', {className:'text-text-muted text-[10px] flex-shrink-0 ml-2'}, entry.ts)\n ),\n entry.target && h('div', {className:'text-text-muted text-[10px] truncate'}, entry.target),\n entry.status === 'running' && h('div', {className:'text-tertiary text-[11px] flex items-center gap-2'}, h(Spinner,{size:11}), 'Running-'),\n entry.output != null && entry.status !== 'running' && h(CommandOutputRenderer, {output: entry.output, target: entry.target, status: entry.status})\n );\n })\n ),\n // Footer status strip\n h('div', {className:'p-2 border-t border-border-subtle flex items-center justify-between text-[10px] text-text-muted'},\n h('div', {className:'flex items-center gap-3'},\n h('span', null, integrations?.length || 0, ' integrations'),\n h('span', null, '-'),\n h('span', null, agents?.filter(a => a.enabled).length || 0, '/', agents?.length || 0, ' agents'),\n h('span', null, '-'),\n h('span', {className:'flex items-center gap-1'},\n h('span', {className:'w-1.5 h-1.5 rounded-full bg-secondary pulse-dot'}),\n 'live'\n )\n ),\n h('span', {className:'font-mono-data'}, COMMANDS.length, ' commands available')\n )\n )\n )\n );\n}\n `;\n}\n",[403],"b29d73a2-5e66-11f1-8a0f-1607ee4eb77e","frontend_charts.ts","46cbad18-5774-11f1-b9d5-ee650bb23af1",886,["D",1780393060117],"// Chart and complex components served as ES module at /api/app-charts\n// Imported dynamically by frontend_js.ts main app.\n// Colors aligned with Nexus AI palette: primary #c0c1ff, secondary #4edea3, tertiary #d0bcff.\n\nexport function getChartsJS(): string {\n return `\nimport React, { useState, useEffect } from 'react';\n\nconst h = React.createElement;\n// Tiny Material Symbols icon helper (charts is loaded before UI module, so inline).\nconst mi = (name, size=14, color='currentColor') => h('span', {\n className:'material-symbols-outlined',\n style:{fontSize:size+'px', color, lineHeight:1, verticalAlign:'middle'}\n}, name);\n\nconst C = {\n primary: '#c0c1ff',\n secondary: '#4edea3',\n tertiary: '#d0bcff',\n surface: '#0e0e11',\n surfaceMid:'#201f22',\n border: 'rgba(255,255,255,0.08)',\n text: '#e5e1e5',\n textMid: '#c7c4d7',\n textMute: '#64748b',\n error: '#ffb4ab',\n warn: '#d0bcff',\n};\n\nexport function Sparkline({data = [], color = '#c0c1ff', width = 72, height = 28}) {\n if (data.length < 2) return null;\n const mn = Math.min(...data), mx = Math.max(...data), r = mx - mn || 1;\n const pts = data.map((v,i) => [(i/(data.length-1))*width, height-((v-mn)/r)*(height-4)+2].join(',')).join(' ');\n const trend = data[data.length-1] > data[0];\n const c = color === 'auto' ? (trend ? C.secondary : C.error) : color;\n return h('svg', {width, height, style:{overflow:'visible', display:'block'}},\n h('polyline', {points: pts, fill:'none', stroke: c, strokeWidth: 1.5, strokeLinejoin:'round', strokeLinecap:'round'})\n );\n}\n\nexport function BarChart({data = [], labelKey = 'label', valueKey = 'value', color = '#c0c1ff', maxBars = 10, showValues = true}) {\n if (!data.length) return null;\n const items = data.slice(0, maxBars);\n const max = Math.max(...items.map(d => Number(d[valueKey]) || 0)) || 1;\n const fmtN = v => v >= 1e6 ? (v/1e6).toFixed(1)+'M' : v >= 1e3 ? (v/1e3).toFixed(1)+'K' : String(v);\n return h('div', {className:'flex flex-col gap-1.5 w-full'},\n items.map((d, i) => {\n const val = Number(d[valueKey]) || 0;\n const pct = (val / max) * 100;\n return h('div', {key:i, className:'flex items-center gap-2'},\n h('div', {\n className:'text-[12px] text-on-surface-variant truncate flex-shrink-0 text-right',\n style:{width: 140}\n }, String(d[labelKey] || '').slice(0, 25)),\n h('div', {className:'flex-1 h-5 bg-surface-container-high rounded overflow-hidden relative'},\n h('div', {\n className:'h-full rounded transition-all duration-500',\n style:{width: pct + '%', background: color}\n })\n ),\n showValues && h('div', {\n className:'text-[11px] text-text-muted text-right flex-shrink-0 font-mono-data',\n style:{width: 48}\n }, fmtN(val))\n );\n })\n );\n}\n\nexport function DonutChart({data = [], size = 120, thickness = 18, centerLabel = '', centerSub = ''}) {\n if (!data.length) return null;\n const total = data.reduce((s, d) => s + (d.value || 0), 0) || 1;\n const r = (size - thickness) / 2;\n const circ = 2 * Math.PI * r;\n let offset = 0;\n const slices = data.map((d, i) => {\n const pct = (d.value || 0) / total;\n const dash = pct * circ;\n const gap = circ - dash;\n const slice = h('circle', {\n key: i, cx: size/2, cy: size/2, r,\n fill:'none', stroke: d.color || C.primary, strokeWidth: thickness,\n strokeDasharray: dash + ' ' + gap,\n strokeDashoffset: -offset, strokeLinecap:'round',\n style:{transform:'rotate(-90deg)', transformOrigin:'50% 50%'}\n });\n offset += dash;\n return slice;\n });\n return h('div', {className:'relative flex-shrink-0', style:{width: size, height: size}},\n h('svg', {width: size, height: size}, ...slices),\n h('div', {className:'absolute inset-0 flex flex-col items-center justify-center'},\n centerLabel && h('div', {className:'text-[18px] font-extrabold text-on-surface leading-none'}, centerLabel),\n centerSub && h('div', {className:'text-[10px] text-text-muted text-center mt-0.5'}, centerSub)\n )\n );\n}\n\nexport function LineChart({data = [], xKey = 'date', yKey = 'sessions', color = '#c0c1ff', height = 110}) {\n if (data.length < 2) return null;\n const vals = data.map(d => Number(d[yKey]) || 0);\n const mn = Math.min(...vals), mx = Math.max(...vals), r = mx - mn || 1;\n const W = 600, H = height;\n const pts = vals.map((v, i) => ((i/(vals.length-1))*W) + ',' + (H - ((v-mn)/r)*(H-16) + 8)).join(' ');\n const first = vals[0], last = vals[vals.length-1];\n const pct = first ? ((last - first) / first * 100) : 0;\n const up = pct >= 0;\n const fmtN = v => v >= 1e6 ? (v/1e6).toFixed(1)+'M' : v >= 1e3 ? (v/1e3).toFixed(1)+'K' : String(Math.round(v));\n const xFirst = String(data[0]?.[xKey] || '').replace(/(\\\\d{4})(\\\\d{2})(\\\\d{2})/, '$1-$2-$3');\n const xLast = String(data.at(-1)?.[xKey] || '').replace(/(\\\\d{4})(\\\\d{2})(\\\\d{2})/, '$1-$2-$3');\n return h('div', {className:'w-full'},\n h('div', {className:'flex justify-between items-center mb-2'},\n h('span', {className:'text-[11px] text-text-muted font-mono-data'}, xFirst + ' → ' + xLast),\n h('span', {\n className:'text-[12px] font-bold',\n style:{color: up ? C.secondary : C.error}\n }, (up ? '↑ +' : '↓ ') + Math.abs(pct).toFixed(1) + '%')\n ),\n h('svg', {\n viewBox:'0 0 ' + W + ' ' + H,\n style:{width:'100%', height: H, display:'block'},\n preserveAspectRatio:'none'\n },\n [0.33, 0.66].map((t, i) => h('line', {key:i, x1:0, x2:W, y1: H*t, y2: H*t, stroke: C.border, strokeWidth: 1})),\n h('polygon', {points:'0,' + H + ' ' + pts + ' ' + W + ',' + H, fill: color + '22'}),\n h('polyline', {points: pts, fill:'none', stroke: color, strokeWidth: 2.5, strokeLinejoin:'round', strokeLinecap:'round'})\n ),\n h('div', {className:'flex justify-between mt-1'},\n h('span', {className:'text-[11px] text-text-muted font-mono-data'}, fmtN(first)),\n h('span', {className:'text-[13px] font-bold text-on-surface font-mono-data'}, fmtN(last))\n )\n );\n}\n\nexport function ChannelChart({data = [], labelKey = 'sessionDefaultChannelGroup', valueKey = 'sessions'}) {\n if (!data.length) return null;\n const COLORS = ['#c0c1ff', '#4edea3', '#d0bcff', '#8083ff', '#6ffbbe', '#a078ff', '#e1e0ff', '#494bd6'];\n const total = data.reduce((s, d) => s + (Number(d[valueKey]) || 0), 0) || 1;\n const fmtN = v => v >= 1e6 ? (v/1e6).toFixed(1)+'M' : v >= 1e3 ? (v/1e3).toFixed(1)+'K' : String(v);\n return h('div', {className:'flex flex-col gap-2.5'},\n data.slice(0, 8).map((d, i) => {\n const val = Number(d[valueKey]) || 0;\n const pct = (val / total * 100).toFixed(1);\n const c = COLORS[i % COLORS.length];\n const label = String(d[labelKey] || '').replace(/_/g, ' ');\n return h('div', {key:i},\n h('div', {className:'flex justify-between mb-1.5'},\n h('span', {className:'text-[12px] text-on-surface-variant flex items-center gap-1.5'},\n h('span', {className:'w-2 h-2 rounded-full flex-shrink-0', style:{background: c}}),\n label\n ),\n h('span', {className:'text-[12px] font-semibold text-on-surface font-mono-data'},\n fmtN(val) + ' (' + pct + '%)'\n )\n ),\n h('div', {className:'h-1.5 bg-surface-container-high rounded overflow-hidden'},\n h('div', {\n className:'h-full rounded transition-all duration-700',\n style:{width: pct + '%', background: c}\n })\n )\n );\n })\n );\n}\n\n// ─── FunnelFlowChart (Phase 1 Advanced — v2 fixed) ──────────────────────────\n// Three equal-height rounded boxes, color-tinted by stage health (green/amber/red),\n// connected by dashed arrows labeled with drop-off %. Replaces v1 which sized\n// boxes by raw metric volume — that collapsed empty stages and overlapped text.\nexport function FunnelFlowChart({stages = []}) {\n if (!stages.length) return null;\n const W = 720, H = 200, padX = 20, padY = 20, gap = 36;\n const bandWidth = (W - padX*2 - gap*2) / 3;\n const colorFor = (score) => score > 75 ? C.secondary : score >= 50 ? C.warn : C.error;\n // Drop-off = degradation in health from one stage to the next.\n const dropOf = (a, b) => {\n const av = (a?.health_score || 0), bv = (b?.health_score || 0);\n if (av === 0) return 0;\n return Math.max(0, Math.round((1 - bv / av) * 100));\n };\n return h('div', {className:'w-full overflow-x-auto'},\n h('svg', {\n viewBox: '0 0 ' + W + ' ' + H,\n style:{width:'100%', maxWidth: W + 'px', height: H + 'px', display:'block'},\n preserveAspectRatio:'xMidYMid meet'\n },\n stages.map((s, i) => {\n const boxH = H - padY * 2; // equal height\n const x = padX + i * (bandWidth + gap);\n const y = padY;\n const color = colorFor(s.health_score || 0);\n const filledH = ((s.health_score || 0) / 100) * (boxH - 12);\n return h('g', {key: s.stage},\n // outer card\n h('rect', {x, y, width: bandWidth, height: boxH, rx: 14, fill: color + '14', stroke: color + 'aa', strokeWidth: 1.5}),\n // health fill (battery indicator at bottom)\n h('rect', {x: x + 6, y: y + boxH - filledH - 6, width: bandWidth - 12, height: Math.max(0, filledH), rx: 10, fill: color + '33'}),\n // stage label (top)\n h('text', {x: x + bandWidth/2, y: y + 28, fill: color, fontSize: 11, fontWeight: 700, textAnchor:'middle', style:{letterSpacing:'0.1em'}}, s.stage),\n // big % (middle)\n h('text', {x: x + bandWidth/2, y: y + boxH/2 + 12, fill: C.text, fontSize: 36, fontWeight: 800, textAnchor:'middle', style:{fontVariantNumeric:'tabular-nums'}}, String(s.health_score || 0) + '%'),\n // metrics count (bottom)\n h('text', {x: x + bandWidth/2, y: y + boxH - 16, fill: C.textMid, fontSize: 11, textAnchor:'middle'}, (s.metrics?.length || 0) + ' metrics'),\n // connecting arrow + drop-off label\n i < stages.length - 1 && (() => {\n const drop = dropOf(s, stages[i+1]);\n const ax = x + bandWidth;\n const ay = y + boxH/2;\n return h('g', null,\n h('line', {x1: ax + 4, y1: ay, x2: ax + gap - 6, y2: ay, stroke: C.textMute, strokeWidth: 1.5, strokeDasharray:'4 4'}),\n h('polygon', {points: (ax + gap - 6) + ',' + (ay - 5) + ' ' + (ax + gap - 1) + ',' + ay + ' ' + (ax + gap - 6) + ',' + (ay + 5), fill: C.textMute}),\n h('text', {x: ax + gap/2, y: ay - 12, fill: drop > 30 ? C.warn : C.textMid, fontSize: 10, fontWeight: 700, textAnchor:'middle'}, drop > 0 ? '−' + drop + '%' : '—')\n );\n })()\n );\n })\n )\n );\n}\n\n// ─── PipelineVelocityChart (Sales — Phase 1 Advanced) ──────────────────────\n// Bar chart of real pipeline stages passed from the page (funnel-summary).\n// Bars scaled to the max passed value; the active stage gets neon-stroke +\n// secondary color. No data passed -> honest empty state (no fabricated stages).\nexport function PipelineVelocityChart({stages, currentStage = null}) {\n // Render ONLY real data passed by the page (GET /api/intelligence/funnel-summary).\n // No hardcoded DEFAULTS, no fabricated 'Proposal' active stage. No data -> honest empty state.\n const data = Array.isArray(stages) ? stages : [];\n if (!data.length) {\n return h('div', {className:'flex items-center justify-center h-48 px-2 text-text-muted text-[12px] text-center'},\n 'No pipeline data yet. Connect a CRM and capture deals to see stage velocity.'\n );\n }\n const max = Math.max(...data.map(s => Number(s.value) || 0)) || 1;\n return h('div', {className:'flex items-end gap-3 h-48 px-2'},\n data.map((s, i) => {\n const label = s.label != null ? s.label : (s.name != null ? s.name : '');\n const val = Number(s.value) || 0;\n const active = currentStage != null && label === currentStage;\n return h('div', {key: label || i, className:'flex-1 flex flex-col gap-2 items-center group cursor-pointer'},\n h('div', {\n className:'w-full rounded-t-sm transition-all ' +\n (active\n ? 'bg-secondary/80'\n : 'bg-surface-container-high group-hover:bg-primary-container/20'),\n style:{\n height: (val / max * 100) + '%',\n ...(active ? {boxShadow:'0 0 10px rgba(78,222,163,0.4)', border:'1px solid #4edea3'} : {})\n }\n }),\n h('span', {className: 'text-[9px] font-bold uppercase tracking-widest ' + (active?'text-secondary':'text-text-muted')}, label)\n );\n })\n );\n}\n\nexport function IntegrationDonut({integrations}) {\n const connected = integrations.filter(i => i.connected).length;\n const total = integrations.length;\n const data = [\n { value: connected, color: C.secondary },\n { value: total - connected, color: C.border },\n ];\n return h('div', {className:'flex items-center gap-4'},\n h(DonutChart, {data, size: 80, thickness: 12, centerLabel: String(connected), centerSub:'of ' + total}),\n h('div', null,\n h('div', {className:'text-[14px] font-bold text-on-surface'}, connected + ' Connected'),\n h('div', {className:'text-[12px] text-text-muted mt-1'}, (total - connected) + ' not configured'),\n data[0].value > 0 && h('div', {\n className:'text-[11px] text-secondary mt-1.5 flex items-center gap-1'\n }, mi('trending_up', 12, C.secondary), Math.round(connected/total*100) + '% coverage')\n )\n );\n}\n `;\n}\n",[411],"aada8452-5e66-11f1-8a0f-1607ee4eb77e","frontend_campaigns.ts","fb37abdc-5998-11f1-a05f-ee650bb23af1",873,["D",1780393047117],8,"// Campaigns page — multi-agent CAMPAIGNS backed by the real /api/campaigns model.\n// A campaign is a container with MANY member agents (campaign.agents, ordered by sequence)\n// that the Director orchestrates on a run: each pipeline step's output, then a synthesized\n// final_output. This page fetches GET /api/campaigns, renders one card per campaign with its\n// status / mode / goal / member-agent pipeline, and lets you Run, Pause/Activate, schedule a\n// Trigger, and inspect recent runs — all against the real REST endpoints.\n//\n// Served at /api/app-campaigns (router.ts jsModules); loaded in frontend_js.ts and\n// rendered by the 'campaigns' nav page (renderPage in frontend_js2.ts).\n//\n// Split module so files stay under val.town's 80K limit.\n\nexport function getCampaignsJS(): string {\n return `\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// Full campaign status palette (draft|active|paused|scheduled|running|completed) — colored by status.\nconst STATUS_META = {\n draft: {color:'text-tertiary', bg:'bg-tertiary/15', label:'Draft', dot:'bg-tertiary'},\n active: {color:'text-secondary', bg:'bg-secondary/15', label:'Active', dot:'bg-secondary'},\n paused: {color:'text-text-muted', bg:'bg-surface-container-high', label:'Paused', dot:'bg-text-muted'},\n scheduled: {color:'text-[#0a66c2]', bg:'bg-[#0a66c2]/15', label:'Scheduled', dot:'bg-[#0a66c2]'},\n running: {color:'text-warning', bg:'bg-warning/15', label:'Running', dot:'bg-warning animate-pulse'},\n completed: {color:'text-primary', bg:'bg-primary/15', label:'Completed', dot:'bg-primary'},\n};\nconst statFor = (s) => STATUS_META[String(s || 'draft').toLowerCase()] || STATUS_META.draft;\n\nconst MODE_META = {\n sequential: {icon:'linear_scale', label:'Sequential', desc:'Each agent hands its output to the next'},\n parallel: {icon:'call_split', label:'Parallel', desc:'Agents work independently, Director synthesizes'},\n};\nconst modeFor = (m) => MODE_META[String(m || 'sequential').toLowerCase()] || MODE_META.sequential;\n\nfunction timeAgo(iso) {\n if (!iso) return '';\n const d = new Date(iso.includes('T') || iso.includes(' ') ? iso : iso); const now = new Date();\n const sec = Math.floor((now - d) / 1000);\n if (isNaN(sec)) return '';\n if (sec < 60) return sec + 's ago';\n if (sec < 3600) return Math.floor(sec/60) + 'm ago';\n if (sec < 86400) return Math.floor(sec/3600) + 'h ago';\n if (sec < 2592000) return Math.floor(sec/86400) + 'd ago';\n return d.toLocaleDateString();\n}\n\n// Ordered member-agent pipeline string, e.g. \"1. Research Agent (research) -> 2. Strategy Agent -> 3. Compose Agent\".\nfunction pipelineLabel(agents) {\n const list = Array.isArray(agents) ? agents.slice().sort((a,b) => (a.sequence||0) - (b.sequence||0)) : [];\n return list.map((m, i) => {\n const name = (m.agent && m.agent.name) || m.name || ('Agent ' + (i+1));\n const role = m.role && m.role !== 'member' ? ' (' + m.role + ')' : '';\n return (i+1) + '. ' + name + role;\n }).join(' → ');\n}\n\n// ─── Director run result panel — pipeline steps + highlighted final synthesis ──\nfunction RunResultPanel(props) {\n const {Icon, marked} = N();\n const run = props.run;\n const [openStep, setOpenStep] = useState(-1);\n if (!run) return null;\n const md = (s) => {\n try { return marked ? marked(String(s || '')) : String(s || ''); } catch (e) { return String(s || ''); }\n };\n const pipeline = Array.isArray(run.pipeline) ? run.pipeline : [];\n const failed = run.status === 'failed' || run.error;\n return h('div', {className:'mt-3 rounded-lg border border-primary/30 bg-surface-container-lowest/60 overflow-hidden'},\n h('div', {className:'flex items-center gap-2 px-3 py-2 border-b border-border-subtle/60 bg-primary/5'},\n h(Icon, {name: failed ? 'error' : 'auto_awesome', size:14, className: failed ? 'text-error' : 'text-primary'}),\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest ' + (failed ? 'text-error' : 'text-primary')},\n failed ? 'Director run failed' : 'Director run'),\n h('span', {className:'text-[10px] text-text-muted ml-auto'}, (run.mode ? run.mode + ' · ' : '') + pipeline.length + ' agents')\n ),\n // Per-agent pipeline steps (collapsible)\n pipeline.length > 0 && h('div', {className:'p-2 space-y-1.5'},\n pipeline.map((p, i) => {\n const open = openStep === i;\n return h('div', {key: i, className:'rounded-md border border-border-subtle/50 bg-surface-container/40 overflow-hidden'},\n h('button', {\n onClick: () => setOpenStep(open ? -1 : i),\n className:'w-full flex items-center gap-2 px-2.5 py-1.5 text-left hover:bg-surface-container-high/40 transition-colors'\n },\n h('span', {className:'w-5 h-5 rounded-full bg-primary/15 text-primary text-[10px] font-bold flex items-center justify-center flex-shrink-0'}, i+1),\n h('span', {className:'text-[12px] font-semibold text-on-surface truncate'}, p.agent || ('Agent ' + (i+1))),\n p.role && h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted px-1.5 py-0.5 rounded bg-surface-container-high'}, p.role),\n h(Icon, {name: open ? 'expand_less' : 'expand_more', size:14, className:'text-text-muted ml-auto'})\n ),\n open && h('div', {\n className:'px-3 py-2 border-t border-border-subtle/50 text-[12px] text-on-surface-variant leading-relaxed prose-tight max-h-[260px] overflow-y-auto',\n dangerouslySetInnerHTML: {__html: md(p.output)}\n })\n );\n })\n ),\n // The Director synthesis — highlighted final deliverable handed back.\n (run.final_output || run.error) && h('div', {className:'m-2 mt-1 rounded-lg border border-primary/40 bg-primary/5 overflow-hidden'},\n h('div', {className:'flex items-center gap-1.5 px-3 py-1.5 border-b border-primary/20'},\n h(Icon, {name:'workspace_premium', size:13, className:'text-primary'}),\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-primary'}, failed ? 'Error' : 'Director synthesis · final output')\n ),\n h('div', {\n className: 'px-3 py-2.5 text-[12.5px] leading-relaxed prose-tight max-h-[340px] overflow-y-auto ' + (failed ? 'text-error' : 'text-on-surface'),\n dangerouslySetInnerHTML: {__html: failed ? md(String(run.error)) : md(run.final_output)}\n })\n )\n );\n}\n\n// ─── Inline trigger control — interval minutes + loop checkbox ─────────────────\nfunction TriggerControl(props) {\n const {Icon, Spinner} = N();\n const campaign = props.campaign;\n const onSaved = props.onSaved;\n const [open, setOpen] = useState(false);\n const [minutes, setMinutes] = useState(() => {\n try {\n const cfg = typeof campaign.trigger_config === 'string' ? JSON.parse(campaign.trigger_config) : campaign.trigger_config;\n return (cfg && (cfg.minutes || cfg.interval_minutes)) || 60;\n } catch (e) { return 60; }\n });\n const [busy, setBusy] = useState(false);\n const scheduled = campaign.trigger_type === 'interval' || campaign.trigger_type === 'schedule';\n\n // Saving/clearing an interval is only a PREFERENCE — it must never flip the Active/Paused\n // badge (nothing auto-runs here). Keep the trigger fields the backend returns, but drop its\n // forced status / next_run_at so the badge keeps reflecting the campaign's real run-state.\n const triggerPatchOnly = (updated) => {\n if (!updated || typeof updated !== 'object') return {};\n return {\n trigger_type: updated.trigger_type,\n trigger_config: updated.trigger_config,\n loop: updated.loop,\n };\n };\n\n const save = async () => {\n const mins = Math.max(1, parseInt(minutes, 10) || 60);\n setBusy(true);\n try {\n const r = await fetch('/api/campaigns/' + campaign.id + '/trigger', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({ trigger_type:'interval', trigger_config:{ minutes: mins }, loop: false })\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const updated = await r.json().catch(() => null);\n setOpen(false);\n onSaved && onSaved(triggerPatchOnly(updated));\n } catch (e) { alert('Save failed: ' + (e && e.message || e)); }\n finally { setBusy(false); }\n };\n const clear = async () => {\n setBusy(true);\n try {\n const r = await fetch('/api/campaigns/' + campaign.id + '/trigger', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({ trigger_type:'manual', trigger_config:null, loop:false })\n });\n const updated = await r.json().catch(() => null);\n setOpen(false);\n onSaved && onSaved(triggerPatchOnly(updated));\n } catch (e) { alert('Clear failed: ' + (e && e.message || e)); }\n finally { setBusy(false); }\n };\n\n return h('div', {className:'relative'},\n h('button', {\n onClick: () => setOpen(o => !o),\n title:'Interval preference (manual run only)',\n className:'p-1.5 rounded-md transition-colors ' +\n (scheduled ? 'text-[#0a66c2] bg-[#0a66c2]/10 hover:bg-[#0a66c2]/20' : 'text-text-muted hover:text-[#0a66c2] hover:bg-[#0a66c2]/10')\n }, h(Icon, {name:'schedule', size:13})),\n open && h('div', {\n className:'absolute right-0 bottom-full mb-1 z-30 w-[230px] p-3 rounded-lg bg-surface-container-high border border-border-subtle shadow-2xl space-y-2.5',\n onClick: (e) => e.stopPropagation()\n },\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Interval preference'),\n h('div', {className:'flex items-center gap-2'},\n h('input', {\n type:'number', min:1, value: minutes,\n onChange: (e) => setMinutes(e.target.value),\n className:'w-16 px-2 py-1 rounded-md bg-surface-container-lowest border border-border-subtle text-[12px] text-on-surface focus:outline-none focus:border-primary/40'\n }),\n h('span', {className:'text-[11px] text-text-muted'}, 'minutes')\n ),\n h('div', {className:'flex items-start gap-1.5 text-[10px] text-text-muted/80 leading-snug'},\n h(Icon, {name:'info', size:11, className:'flex-shrink-0 mt-0.5'}),\n h('span', null, 'Saved as a preference. Campaigns run when you press Run — there is no unattended auto-run.')\n ),\n h('div', {className:'flex items-center gap-1.5 pt-1'},\n h('button', {\n onClick: save, disabled: busy,\n className:'flex-1 inline-flex items-center justify-center gap-1 px-2 py-1.5 rounded-md text-[11px] font-bold bg-primary text-on-primary hover:bg-primary/90 transition-colors disabled:opacity-50'\n }, busy && h(Spinner, {size:11}), 'Save'),\n scheduled && h('button', {\n onClick: clear, disabled: busy,\n className:'px-2 py-1.5 rounded-md text-[11px] font-semibold text-text-muted hover:text-error hover:bg-error/10 transition-colors'\n }, 'Clear')\n )\n )\n );\n}\n\n// ─── Recent runs list (GET /api/campaigns/:id/runs) ───────────────────────────\nfunction RecentRuns(props) {\n const {Icon} = N();\n const runs = props.runs;\n const onPick = props.onPick;\n if (!Array.isArray(runs) || runs.length === 0) return null;\n return h('div', {className:'space-y-1'},\n h('div', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Recent runs'),\n runs.slice(0, 4).map(r => {\n const st = statFor(r.status);\n return h('button', {\n key: r.id,\n onClick: () => onPick && onPick(r),\n className:'w-full flex items-center gap-2 px-2 py-1 rounded-md text-left hover:bg-surface-container-high/40 transition-colors'\n },\n h('span', {className:'w-1.5 h-1.5 rounded-full flex-shrink-0 ' + st.dot}),\n h('span', {className:'text-[11px] ' + st.color + ' capitalize'}, r.status || 'run'),\n h('span', {className:'text-[10px] text-text-muted truncate flex-1'},\n (r.final_output ? String(r.final_output).slice(0, 60) : (r.input ? String(r.input).slice(0, 60) : ''))),\n h('span', {className:'text-[10px] text-text-muted/70 ml-auto flex-shrink-0'}, timeAgo(r.finished_at || r.started_at))\n );\n })\n );\n}\n\n// ─── Task status palette (todo|doing|done|blocked) ───────────────────────────\nconst TASK_STATUS_META = {\n todo: {color:'text-text-muted', bg:'bg-surface-container-high', label:'To do', dot:'bg-text-muted'},\n doing: {color:'text-warning', bg:'bg-warning/15', label:'Doing', dot:'bg-warning'},\n done: {color:'text-secondary', bg:'bg-secondary/15', label:'Done', dot:'bg-secondary'},\n blocked: {color:'text-error', bg:'bg-error/15', label:'Blocked', dot:'bg-error'},\n};\nconst taskStatFor = (s) => TASK_STATUS_META[String(s || 'todo').toLowerCase()] || TASK_STATUS_META.todo;\n\n// ICE: derive from ice_score if present, else average of impact/confidence/ease (each 1-10).\nfunction taskIce(t) {\n if (t && t.ice_score != null && isFinite(Number(t.ice_score))) return Math.round(Number(t.ice_score) * 10) / 10;\n const i = Number(t && t.impact) || 0, c = Number(t && t.confidence) || 0, e = Number(t && t.ease) || 0;\n if (!i && !c && !e) return null;\n return Math.round(((i + c + e) / 3) * 10) / 10;\n}\nconst iceBadgeCls = (s) =>\n s >= 7 ? 'bg-secondary/15 text-secondary border-secondary/30'\n : s >= 4 ? 'bg-tertiary/15 text-tertiary border-tertiary/30'\n : 'bg-error/15 text-error border-error/30';\n\nfunction dueLabel(iso) {\n if (!iso) return '';\n try {\n const d = new Date(String(iso).length <= 10 ? String(iso) + 'T00:00:00' : iso);\n if (isNaN(d.getTime())) return '';\n return d.toLocaleDateString(undefined, {month:'short', day:'numeric'});\n } catch (e) { return ''; }\n}\n\n// ─── Work Log — collapsible per-campaign task list (GET /api/campaigns/:id/tasks) ─\nfunction WorkLog(props) {\n const {Icon, Spinner} = N();\n const campaign = props.campaign;\n const [open, setOpen] = useState(false);\n const [tasks, setTasks] = useState([]);\n const [loaded, setLoaded] = useState(false);\n const [loading, setLoading] = useState(false);\n const [generating, setGenerating] = useState(false);\n const [runningId, setRunningId] = useState(null); // id of the task an agent is running\n\n const load = useCallback(async () => {\n setLoading(true);\n try {\n const r = await fetch('/api/campaigns/' + campaign.id + '/tasks');\n const d = await r.json();\n setTasks(Array.isArray(d) ? d : []);\n } catch (e) { /* non-critical */ }\n finally { setLoaded(true); setLoading(false); }\n }, [campaign.id]);\n\n // Load the count eagerly so the header can show \"N tasks\" without expanding.\n useEffect(() => { load(); }, [load]);\n\n const toggle = () => {\n const next = !open;\n setOpen(next);\n if (next && !loaded && !loading) load();\n };\n\n const generate = async () => {\n setGenerating(true);\n try {\n const r = await fetch('/api/tasks/generate', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({ source_type:'campaign', campaign_id: campaign.id, source_id: campaign.id })\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n await load();\n } catch (e) { alert('Generate tasks failed: ' + (e && e.message || e)); }\n finally { setGenerating(false); }\n };\n\n // Put an agent to work on a single task: POST /api/tasks/:id/run, show a brief\n // running state, then refetch this campaign's task list so the status flips.\n const runTask = async (id) => {\n if (runningId != null) return;\n setRunningId(id);\n // Optimistically reflect the running state in the row.\n setTasks(ts => ts.map(t => t.id === id ? Object.assign({}, t, {status:'doing'}) : t));\n try {\n const r = await fetch('/api/tasks/' + id + '/run', {\n method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({})\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n } catch (e) {\n alert('Run task failed: ' + (e && e.message || e));\n } finally {\n await load();\n setRunningId(null);\n }\n };\n\n const count = tasks.length;\n const done = tasks.filter(t => String(t.status || '').toLowerCase() === 'done').length;\n\n return h('div', {className:'rounded-lg border border-border-subtle/50 bg-surface-container-lowest/40 overflow-hidden'},\n // Header — count + expand toggle\n h('button', {\n onClick: toggle,\n className:'w-full flex items-center gap-2 px-2.5 py-1.5 text-left hover:bg-surface-container-high/40 transition-colors'\n },\n h(Icon, {name:'checklist', size:12, className:'text-text-muted'}),\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'}, 'Work Log'),\n h('span', {className:'text-[9px] font-bold text-text-muted/70'}, '·'),\n h('span', {className:'text-[10px] font-semibold text-on-surface-variant'},\n loaded ? (count + (count === 1 ? ' task' : ' tasks')) : '…'),\n count > 0 && h('span', {className:'text-[9px] font-mono-data text-text-muted/70'}, '(' + done + '/' + count + ' done)'),\n h(Icon, {name: open ? 'expand_less' : 'expand_more', size:14, className:'text-text-muted ml-auto'})\n ),\n // Body — task rows (only when expanded)\n open && h('div', {className:'px-2 pb-2 pt-0.5 border-t border-border-subtle/40'},\n loading && !loaded\n ? h('div', {className:'flex items-center gap-2 px-1 py-2 text-[11px] text-text-muted'}, h(Spinner, {size:11}), 'Loading tasks…')\n : count === 0\n ? h('div', {className:'flex items-center justify-between gap-2 px-1 py-2'},\n h('span', {className:'text-[11px] text-text-muted/60 italic'}, 'No tasks yet'),\n h('button', {\n onClick: generate, disabled: generating,\n title:'Generate tasks for this campaign',\n className:'inline-flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-bold text-primary hover:bg-primary/10 transition-colors disabled:opacity-50'\n },\n generating ? h(Spinner, {size:10}) : h(Icon, {name:'auto_awesome', size:11}),\n generating ? 'Generating…' : 'Generate tasks')\n )\n : h('div', {className:'space-y-1 pt-1'},\n tasks.map(t => {\n const ts = taskStatFor(t.status);\n const ice = taskIce(t);\n const due = dueLabel(t.due_date);\n return h('div', {\n key: t.id,\n className:'flex items-center gap-2 px-1.5 py-1 rounded-md hover:bg-surface-container-high/30 transition-colors'\n },\n h('span', {className:'w-1.5 h-1.5 rounded-full flex-shrink-0 ' + ts.dot}),\n h('span', {\n className:'text-[11.5px] text-on-surface truncate flex-1' +\n (String(t.status || '').toLowerCase() === 'done' ? ' line-through text-text-muted' : ''),\n title: t.title\n }, t.title || 'Untitled task'),\n ice != null && h('span', {\n className:'flex-shrink-0 inline-flex items-center px-1.5 py-0.5 rounded-full border text-[9px] font-extrabold font-mono-data ' + iceBadgeCls(ice),\n style:{fontVariantNumeric:'tabular-nums'},\n title:'ICE = (Impact + Confidence + Ease) / 3'\n }, 'ICE ', ice.toFixed(1)),\n due && h('span', {\n className:'flex-shrink-0 inline-flex items-center gap-0.5 text-[9px] font-mono-data text-text-muted',\n title:'Due ' + due\n }, h(Icon, {name:'event', size:10}), due),\n (function(){\n const isDone = String(t.status || '').toLowerCase() === 'done';\n const isRunning = runningId === t.id;\n return h('button', {\n type:'button',\n onClick: (e) => { e.stopPropagation(); runTask(t.id); },\n disabled: isRunning || isDone || (runningId != null && runningId !== t.id),\n title: isDone ? 'Task already done' : 'Run an agent on this task',\n className:'flex-shrink-0 inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider border transition-all disabled:opacity-40 disabled:cursor-not-allowed ' +\n (isRunning ? 'border-warning/40 bg-warning/10 text-warning' : 'border-secondary/40 bg-secondary/10 text-secondary hover:brightness-110')\n },\n isRunning ? h(Spinner, {size:9}) : h(Icon, {name:'play_arrow', size:11}),\n isRunning ? 'Running' : 'Run'\n );\n })(),\n h('span', {\n className:'flex-shrink-0 inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider ' + ts.bg + ' ' + ts.color\n }, ts.label)\n );\n })\n )\n )\n );\n}\n\n// ─── A single campaign card ───────────────────────────────────────────────────\nfunction CampaignCard(props) {\n const {Icon, Spinner} = N();\n const campaign = props.campaign;\n const onPatched = props.onPatched;\n const onDeleted = props.onDeleted;\n const [running, setRunning] = useState(false);\n const [result, setResult] = useState(null); // the Director run currently shown\n const [runs, setRuns] = useState([]);\n const [runsLoaded, setRunsLoaded] = useState(false);\n\n const st = statFor(campaign.status);\n const mode = modeFor(campaign.mode);\n const members = Array.isArray(campaign.agents) ? campaign.agents : [];\n\n const loadRuns = useCallback(async () => {\n try {\n const r = await fetch('/api/campaigns/' + campaign.id + '/runs');\n const d = await r.json();\n setRuns(Array.isArray(d) ? d : []);\n } catch (e) { /* non-critical */ }\n finally { setRunsLoaded(true); }\n }, [campaign.id]);\n useEffect(() => {\n loadRuns();\n const onTick = () => { loadRuns(); };\n window.addEventListener('nexus:tick', onTick);\n return () => window.removeEventListener('nexus:tick', onTick);\n }, [loadRuns]);\n\n const runCampaign = async () => {\n setRunning(true); setResult(null);\n try {\n const r = await fetch('/api/campaigns/' + campaign.id + '/runs', {\n method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({})\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const run = await r.json();\n setResult(run);\n loadRuns();\n // status may have flipped to completed server-side; refresh the card row.\n onPatched && onPatched({ status: run && run.status === 'completed' ? 'completed' : campaign.status });\n } catch (e) {\n setResult({ status:'failed', error: (e && e.message) || 'Run failed', pipeline: [] });\n } finally { setRunning(false); }\n };\n\n const toggleStatus = async () => {\n // The badge reflects REAL run-state: a campaign is either explicitly paused or it is\n // active. Pausing/activating must persist exactly that — it must NOT be derived from a\n // schedule (nothing auto-runs in this deployment) and must round-trip honestly.\n const prev = campaign.status;\n const next = String(prev).toLowerCase() === 'paused' ? 'active' : 'paused';\n onPatched && onPatched({ status: next }); // optimistic\n try {\n const r = await fetch('/api/campaigns/' + campaign.id, {\n method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ status: next })\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n } catch (e) { onPatched && onPatched({ status: prev }); } // revert to the real prior state\n };\n\n const remove = async () => {\n if (!confirm('Delete campaign \"' + (campaign.name || '') + '\"? Its member agents and runs are removed too. This cannot be undone.')) return;\n try {\n await fetch('/api/campaigns/' + campaign.id, {method:'DELETE'});\n onDeleted && onDeleted();\n } catch (e) { alert('Delete failed: ' + (e && e.message || e)); }\n };\n\n return h('div', {\n className:'group p-4 rounded-xl bg-surface-container border border-border-subtle hover:border-primary/30 transition-all flex flex-col gap-3'\n },\n // Header: status badge + mode + menu\n h('div', {className:'flex items-start justify-between gap-2'},\n h('div', {className:'flex items-center gap-1.5 flex-wrap'},\n h('span', {\n className:'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-widest ' + st.bg + ' ' + st.color\n },\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + st.dot}),\n st.label\n ),\n h('span', {\n className:'inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[9px] font-bold uppercase tracking-widest bg-surface-container-high text-text-muted border border-border-subtle',\n title: mode.desc\n }, h(Icon, {name: mode.icon, size:10}), mode.label)\n ),\n h('button', {\n onClick: remove, title:'Delete campaign',\n className:'p-1 rounded-md text-text-muted/60 hover:text-error hover:bg-error/10 transition-colors opacity-0 group-hover:opacity-100'\n }, h(Icon, {name:'delete', size:13}))\n ),\n // Title + workspace\n h('div', null,\n h('h3', {className:'text-[15px] font-bold text-on-surface leading-tight'}, campaign.name || 'Untitled campaign'),\n (campaign.workspace || campaign.channel) && h('div', {className:'text-[10px] uppercase tracking-widest text-text-muted mt-0.5'},\n [campaign.workspace, campaign.channel].filter(Boolean).join(' · '))\n ),\n // Goal\n campaign.goal\n ? h('div', {className:'p-2.5 rounded-lg bg-surface-container-lowest/50 border border-border-subtle/50'},\n h('div', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted mb-1'}, 'Goal'),\n h('p', {className:'text-[12px] text-on-surface-variant leading-relaxed line-clamp-3'}, campaign.goal)\n )\n : campaign.description\n ? h('p', {className:'text-[12px] text-text-muted italic line-clamp-2'}, campaign.description)\n : h('p', {className:'text-[11px] text-text-muted/60 italic'}, 'No goal set yet.'),\n // Member-agent pipeline (ordered by sequence)\n h('div', {className:'p-2.5 rounded-lg bg-surface-container-lowest/40 border border-border-subtle/50'},\n h('div', {className:'flex items-center gap-1 mb-1'},\n h(Icon, {name:'groups', size:12, className:'text-text-muted'}),\n h('span', {className:'text-[9px] font-bold uppercase tracking-widest text-text-muted'},\n members.length + (members.length === 1 ? ' member agent' : ' member agents'))\n ),\n members.length > 0\n ? h('p', {className:'text-[11px] text-on-surface-variant leading-relaxed'}, pipelineLabel(members))\n : h('p', {className:'text-[11px] text-text-muted/60 italic'}, 'No member agents — create the campaign to auto-build a Research → Strategy → Compose pipeline.')\n ),\n // Work Log — this campaign's tasks (collapsible)\n h(WorkLog, {campaign}),\n // Director run result (when present)\n (running || result) && (\n running\n ? h('div', {className:'mt-1 flex items-center gap-2 px-3 py-3 rounded-lg border border-primary/30 bg-primary/5'},\n h(Spinner, {size:14}),\n h('span', {className:'text-[12px] text-primary font-semibold'}, 'Director orchestrating ' + members.length + ' agents…')\n )\n : h(RunResultPanel, {run: result})\n ),\n // Recent runs\n runsLoaded && runs.length > 0 && !running && h('div', {className:'pt-1'},\n h(RecentRuns, {runs, onPick: (r) => setResult(r)})\n ),\n // Actions\n h('div', {className:'flex items-center gap-1 pt-2 border-t border-border-subtle/50 mt-auto'},\n h('button', {\n onClick: runCampaign, disabled: running || members.length === 0,\n title: members.length === 0 ? 'No member agents to run' : 'Run the Director pipeline now',\n className:'flex-1 inline-flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-bold bg-primary text-on-primary hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed'\n },\n running ? h(Spinner, {size:12}) : h(Icon, {name:'play_arrow', size:14}),\n running ? 'Running…' : 'Run Campaign'\n ),\n (campaign.status === 'paused'\n ? h('button', {\n onClick: toggleStatus, title:'Activate',\n className:'inline-flex items-center justify-center gap-1 px-2.5 py-1.5 rounded-md text-[11px] font-semibold text-text-muted hover:text-secondary hover:bg-secondary/10 transition-colors'\n }, h(Icon, {name:'play_circle', size:13}), 'Activate')\n : h('button', {\n onClick: toggleStatus, title:'Pause',\n className:'inline-flex items-center justify-center gap-1 px-2.5 py-1.5 rounded-md text-[11px] font-semibold text-text-muted hover:text-tertiary hover:bg-tertiary/10 transition-colors'\n }, h(Icon, {name:'pause_circle', size:13}), 'Pause')\n ),\n h(TriggerControl, {campaign, onSaved: (updated) => onPatched && onPatched(updated || {})}),\n h('button', {\n onClick: () => window.open('/world?campaign=' + campaign.id, '_blank'),\n title:'Open this campaign Agent World in a new tab',\n className:'inline-flex items-center justify-center gap-1 px-2.5 py-1.5 rounded-md text-[11px] font-semibold text-text-muted hover:text-primary hover:bg-primary/10 transition-colors'\n }, h(Icon, {name:'public', size:13}), 'Open World')\n )\n );\n}\n\nexport function CampaignsPage(props) {\n const {Icon, Spinner} = N();\n const [campaigns, setCampaigns] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [workspace, setWorkspace] = useState('all'); // all | marketing | sales\n const [statusFilter, setStatusFilter] = useState('all');\n const [search, setSearch] = useState('');\n const [creating, setCreating] = useState(false);\n const [draft, setDraft] = useState(null); // {name, goal, objective_id} when the New Campaign form is open\n const [objectives, setObjectives] = useState([]); // [{id,title}] for the optional OKR link selector\n const [objectivesLoaded, setObjectivesLoaded] = useState(false);\n\n const load = async () => {\n setLoading(true); setError(null);\n try {\n const r = await fetch('/api/campaigns');\n const d = await r.json();\n setCampaigns(Array.isArray(d) ? d : []);\n } catch (e) {\n setError((e && e.message) || 'Failed to load campaigns');\n } finally { setLoading(false); }\n };\n useEffect(() => {\n load();\n const onTick = () => { load(); };\n window.addEventListener('nexus:tick', onTick);\n return () => window.removeEventListener('nexus:tick', onTick);\n }, []);\n\n // Merge a patch into a single campaign row (optimistic status/trigger updates).\n const patchCampaign = (id, patch) => {\n setCampaigns(cs => cs.map(c => c.id === id ? Object.assign({}, c, patch || {}) : c));\n };\n const removeCampaign = (id) => setCampaigns(cs => cs.filter(c => c.id !== id));\n\n const filtered = useMemo(() => {\n const q = search.trim().toLowerCase();\n return campaigns.filter(c => {\n if (workspace !== 'all' && c.workspace !== workspace) return false;\n if (statusFilter !== 'all' && (c.status || 'draft') !== statusFilter) return false;\n if (q) {\n const blob = [c.name, c.goal, c.channel, c.audience, c.description].filter(Boolean).join(' ').toLowerCase();\n if (!blob.includes(q)) return false;\n }\n return true;\n });\n }, [campaigns, workspace, statusFilter, search]);\n\n const stats = useMemo(() => {\n const total = campaigns.length;\n const active = campaigns.filter(c => (c.status || 'draft') === 'active').length;\n const scheduled = campaigns.filter(c => c.status === 'scheduled').length;\n const completed = campaigns.filter(c => c.status === 'completed').length;\n return {total, active, scheduled, completed};\n }, [campaigns]);\n\n // Fetch the OKR list so the modal can offer an optional objective to link. Read-only;\n // failure is non-critical — the selector simply stays empty (campaign is then NULL-linked).\n const loadObjectives = useCallback(async () => {\n try {\n const r = await fetch('/api/okrs');\n const d = await r.json();\n setObjectives(Array.isArray(d) ? d.map(o => ({ id: o.id, title: o.title })) : []);\n } catch (e) { /* non-critical */ }\n finally { setObjectivesLoaded(true); }\n }, []);\n\n const openNew = () => { setDraft({ name:'', goal:'', objective_id:'' }); loadObjectives(); };\n const closeNew = () => { if (!creating) setDraft(null); };\n\n const createCampaign = async () => {\n if (!draft || !draft.name.trim()) return;\n setCreating(true);\n try {\n const r = await fetch('/api/campaigns', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n name: draft.name.trim(),\n goal: draft.goal.trim() || undefined,\n objective_id: (draft.objective_id && String(draft.objective_id).trim()) || undefined\n })\n });\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const created = await r.json().catch(() => null);\n if (created && created.id) setCampaigns(cs => [created].concat(cs));\n else await load();\n setDraft(null);\n } catch (e) { alert('Create failed: ' + (e && e.message || e)); }\n finally { setCreating(false); }\n };\n\n return h('div', {className:'p-lg space-y-lg'},\n // Header\n h('div', {className:'flex items-center justify-between gap-4 flex-wrap'},\n h('div', null,\n h('h1', {className:'text-[24px] font-bold tracking-tight'}, 'Campaigns'),\n h('p', {className:'text-[12px] text-text-muted mt-1'},\n 'Multi-agent campaigns. Each is a Director orchestrating a team of member agents into one synthesized deliverable.'\n )\n ),\n h('button', {\n onClick: openNew,\n className:'inline-flex items-center gap-2 px-3.5 py-2 rounded-lg bg-primary text-on-primary text-[12px] font-bold hover:bg-primary/90 transition-colors'\n }, h(Icon, {name:'add', size:16}), 'New Campaign')\n ),\n\n // Stats strip\n h('div', {className:'grid grid-cols-4 gap-3'},\n [\n {label:'Total', value: stats.total, icon:'campaign', color:'text-on-surface'},\n {label:'Active', value: stats.active, icon:'play_arrow', color:'text-secondary'},\n {label:'Scheduled', value: stats.scheduled, icon:'schedule', color:'text-[#0a66c2]'},\n {label:'Completed', value: stats.completed, icon:'check_circle', color:'text-primary'},\n ].map(s => h('div', {\n key: s.label,\n className:'p-3 rounded-lg bg-surface-container border border-border-subtle'\n },\n h('div', {className:'flex items-center justify-between mb-1'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, s.label),\n h(Icon, {name: s.icon, size:14, className: s.color})\n ),\n h('div', {className:'text-[22px] font-bold ' + s.color}, s.value)\n ))\n ),\n\n // Filters\n h('div', {className:'flex items-center gap-2 flex-wrap'},\n h('div', {className:'flex bg-surface-container-lowest rounded-lg p-0.5 border border-border-subtle'},\n ['all','marketing','sales'].map(w => h('button', {\n key: w, onClick: () => setWorkspace(w),\n className:'px-3 py-1 rounded-md text-[11px] font-bold uppercase tracking-wider transition-all ' +\n (workspace === w ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface-variant')\n }, w))\n ),\n h('div', {className:'flex bg-surface-container-lowest rounded-lg p-0.5 border border-border-subtle flex-wrap'},\n ['all','draft','active','scheduled','running','paused','completed'].map(s => h('button', {\n key: s, onClick: () => setStatusFilter(s),\n className:'px-2.5 py-1 rounded-md text-[11px] font-bold capitalize transition-all ' +\n (statusFilter === s ? 'bg-secondary/20 text-secondary' : 'text-text-muted hover:text-on-surface-variant')\n }, s))\n ),\n h('div', {className:'flex-1 min-w-[180px] relative'},\n h(Icon, {name:'search', size:14, className:'absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted'}),\n h('input', {\n type:'text', value: search, onChange: (e) => setSearch(e.target.value),\n placeholder:'Search campaigns by name, goal, channel…',\n className:'w-full pl-8 pr-3 py-1.5 rounded-lg bg-surface-container-lowest border border-border-subtle text-[12px] text-on-surface placeholder:text-text-muted/60 focus:outline-none focus:border-primary/40'\n })\n )\n ),\n\n // Body\n error && h('div', {className:'p-3 rounded-lg text-[12px] text-error bg-error/5 border border-error/20'}, error),\n loading && campaigns.length === 0 && h('div', {className:'flex items-center justify-center py-16'}, h(Spinner, {size: 22})),\n !loading && filtered.length === 0 && h('div', {className:'text-center py-16 text-text-muted'},\n h(Icon, {name:'campaign', size:40, className:'text-text-muted/40 mb-3 mx-auto block'}),\n h('div', {className:'text-[14px] font-semibold mb-1 text-on-surface-variant'},\n campaigns.length === 0 ? 'No campaigns yet' : 'No campaigns match your filters'\n ),\n h('div', {className:'text-[12px]'},\n campaigns.length === 0\n ? 'Create one above — a Research → Strategy → Compose agent team is built automatically.'\n : 'Try widening the workspace or status filter.'\n )\n ),\n filtered.length > 0 && h('div', {className:'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3 items-start'},\n filtered.map(c => h(CampaignCard, {\n key: c.id,\n campaign: c,\n onPatched: (patch) => patchCampaign(c.id, patch),\n onDeleted: () => removeCampaign(c.id),\n }))\n ),\n\n // New Campaign modal — POSTs /api/campaigns {name, goal}; member agents auto-created.\n draft && h('div', {\n className:'fixed inset-0 bg-black/60 backdrop-blur-sm z-[80] flex items-center justify-center p-4',\n onClick: closeNew\n },\n h('div', {\n className:'glass-panel rounded-xl shadow-2xl flex flex-col overflow-hidden',\n style:{width:'min(560px, 96vw)', maxHeight:'90vh'},\n onClick: (e) => e.stopPropagation()\n },\n h('div', {className:'p-lg border-b border-border-subtle flex items-center justify-between flex-shrink-0'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'campaign', size:18, className:'text-primary'}),\n h('h3', {className:'text-[16px] font-bold'}, 'New Campaign')\n ),\n h('button', {\n onClick: closeNew,\n className:'p-1.5 rounded hover:bg-surface-container-high text-text-muted hover:text-on-surface transition-colors'\n }, h(Icon, {name:'close', size:16}))\n ),\n h('div', {className:'p-lg space-y-3 overflow-y-auto'},\n h('div', null,\n h('label', {className:'block text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1'}, 'Name'),\n h('input', {\n autoFocus: true,\n value: draft.name,\n onChange: (e) => setDraft(d => Object.assign({}, d, {name: e.target.value})),\n onKeyDown: (e) => { if (e.key === 'Enter' && draft.name.trim()) createCampaign(); },\n placeholder: 'e.g. Q3 LinkedIn Demand-Gen',\n className:'w-full px-3 py-2 rounded-lg bg-surface-container-lowest border border-border-subtle text-[13px] text-on-surface focus:outline-none focus:border-primary/40'\n })\n ),\n h('div', null,\n h('label', {className:'block text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1'}, 'Goal (optional)'),\n h('textarea', {\n value: draft.goal,\n onChange: (e) => setDraft(d => Object.assign({}, d, {goal: e.target.value})),\n placeholder: 'What should the campaign team achieve? (e.g. Book 30 demos from FinTech CMOs this quarter)',\n rows: 3,\n className:'w-full px-3 py-2 rounded-lg bg-surface-container-lowest border border-border-subtle text-[13px] text-on-surface focus:outline-none focus:border-primary/40 resize-none'\n })\n ),\n h('div', null,\n h('label', {className:'block text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1'}, 'Linked objective (optional)'),\n h('select', {\n value: draft.objective_id || '',\n onChange: (e) => setDraft(d => Object.assign({}, d, {objective_id: e.target.value})),\n className:'w-full px-3 py-2 rounded-lg bg-surface-container-lowest border border-border-subtle text-[13px] text-on-surface focus:outline-none focus:border-primary/40'\n },\n h('option', {value:''}, objectivesLoaded ? 'No linked objective' : 'Loading objectives…'),\n objectives.map(o => h('option', {key: o.id, value: o.id}, o.title || ('Objective ' + o.id)))\n ),\n h('p', {className:'text-[10px] text-text-muted/70 mt-1 leading-snug'},\n 'Link this campaign to an OKR so its runs roll progress up to that objective.')\n ),\n h('div', {className:'flex items-start gap-2 p-2.5 rounded-lg bg-primary/5 border border-primary/20'},\n h(Icon, {name:'auto_awesome', size:14, className:'text-primary mt-0.5 flex-shrink-0'}),\n h('p', {className:'text-[11px] text-on-surface-variant leading-relaxed'},\n 'A 3-agent pipeline (Research → Strategy → Compose) is created automatically. Run it to have the Director orchestrate the team into one deliverable.'\n )\n )\n ),\n h('div', {className:'p-md border-t border-border-subtle bg-surface-container/30 flex items-center justify-end gap-2 flex-shrink-0'},\n h('button', {\n onClick: closeNew, disabled: creating,\n className:'px-3 py-1.5 rounded text-[12px] font-semibold text-text-muted hover:text-on-surface hover:bg-surface-container-high transition-colors disabled:opacity-50'\n }, 'Cancel'),\n h('button', {\n onClick: createCampaign,\n disabled: creating || !draft.name.trim(),\n className:'px-4 py-1.5 rounded text-[12px] font-bold bg-primary text-on-primary hover:bg-primary/90 transition-colors disabled:opacity-50 inline-flex items-center gap-1.5'\n },\n creating && h(Spinner, {size: 12}),\n 'Create Campaign'\n )\n )\n )\n )\n );\n}\n`;\n}\n",[418],"a6cbe4f6-5b4f-11f1-9de6-ee650bb23af1","frontend_calendar.ts","5cb728c2-58a1-11f1-a77f-ee650bb23af1",539,["D",1780053308385],7,"// CalendarPage — unified Command Calendar.\n// Month / Week / Agenda views over /api/calendar/unified plus a collapsible\n// Kanban task board. Served at /api/app-calendar so frontend_js.ts stays under\n// val.town's 80K limit.\n//\n// Shared deps come from window.__nexus (set by frontend_js.ts on boot):\n// Icon, Btn, Input, Spinner, PageHeader, SectionHeader.\n\nexport function getCalendarJS(): string {\n return `\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\n// ─── Date helpers ────────────────────────────────────────────────────────────\nconst today = () => new Date().toISOString().slice(0, 10);\nconst pad2 = (n) => String(n).padStart(2, '0');\nconst isoOf = (d) => d.getFullYear() + '-' + pad2(d.getMonth()+1) + '-' + pad2(d.getDate());\nconst parseIso = (iso) => {\n // Parse 'YYYY-MM-DD' as local-midnight so we don't slide a day in UTC-offset zones.\n if (!iso) return new Date(NaN);\n const [y, m, d] = iso.split('-').map(Number);\n return new Date(y, (m||1)-1, d||1);\n};\nconst addDays = (iso, n) => {\n const d = parseIso(iso); d.setDate(d.getDate()+n); return isoOf(d);\n};\nconst addMonths = (iso, n) => {\n const d = parseIso(iso); d.setMonth(d.getMonth()+n, 1); return isoOf(d);\n};\nconst monthDays = (year, monthIdx) => {\n // 42-cell grid (6 weeks). Week starts Monday.\n const first = new Date(year, monthIdx, 1);\n const dow = (first.getDay() + 6) % 7; // shift so Monday=0\n const startIso = isoOf(addDaysToDate(first, -dow));\n const cells = [];\n for (let i = 0; i < 42; i++) {\n const iso = addDays(startIso, i);\n const d = parseIso(iso);\n cells.push({ date: iso, isCurrentMonth: d.getMonth() === monthIdx, dow: d.getDay() });\n }\n return cells;\n};\nfunction addDaysToDate(date, n) { const d = new Date(date); d.setDate(d.getDate()+n); return d; }\nconst weekDays = (anchorIso) => {\n const d = parseIso(anchorIso);\n const dow = (d.getDay() + 6) % 7;\n const monday = addDaysToDate(d, -dow);\n const out = [];\n for (let i = 0; i < 7; i++) out.push(isoOf(addDaysToDate(monday, i)));\n return out;\n};\nconst fmtDateLong = (iso) => parseIso(iso).toLocaleDateString('en-US', {weekday:'long', month:'long', day:'numeric', year:'numeric'});\nconst fmtMonthYear = (iso) => parseIso(iso).toLocaleDateString('en-US', {month:'long', year:'numeric'});\nconst fmtTime = (hhmm) => {\n if (!hhmm) return '';\n const [h_, m_] = hhmm.split(':').map(Number);\n const d = new Date(); d.setHours(h_||0, m_||0, 0, 0);\n return d.toLocaleTimeString('en-US', {hour:'numeric', minute:'2-digit'});\n};\nconst parseTimeHours = (hhmm) => {\n if (!hhmm) return 0;\n const [h_, m_] = hhmm.split(':').map(Number);\n return (h_||0) + (m_||0)/60;\n};\n\n// ─── Source / status meta ───────────────────────────────────────────────────\n// Keys MUST match the backend source names (plural) from getUnifiedCalendar, otherwise the\n// ?source= filter requests names the backend ignores and those events never render.\nconst SOURCE_META = {\n tasks: { label: 'Tasks', icon: 'task_alt', color: '#c0c1ff' },\n experiments: { label: 'Experiments', icon: 'science', color: '#d0bcff' },\n objectives: { label: 'OKRs', icon: 'flag', color: '#4edea3' },\n key_results: { label: 'KR Updates', icon: 'trending_up', color: '#6ffbbe' },\n actions: { label: 'Action Items', icon: 'bolt', color: '#5eead4' },\n google_calendar: { label: 'Google Cal', icon: 'event', color: '#8083ff' },\n outlook_calendar: { label: 'Outlook', icon: 'mail', color: '#0078d4' },\n custom: { label: 'Custom', icon: 'bookmark', color: '#e1e0ff' },\n nsm: { label: 'North Star', icon: 'star', color: '#f5a3d0' },\n};\nconst ALL_SOURCES = Object.keys(SOURCE_META);\nconst WORKSPACES = ['all', 'marketing', 'sales', 'growth'];\n\nconst statusChip = (s) => {\n if (!s) return null;\n const norm = s.toLowerCase();\n const palette = norm === 'done' || norm === 'completed'\n ? 'bg-secondary/15 text-secondary border-secondary/30'\n : norm === 'blocked'\n ? 'bg-error/15 text-error border-error/30'\n : norm === 'in_progress' || norm === 'in progress'\n ? 'bg-tertiary/15 text-tertiary border-tertiary/30'\n : 'bg-primary/15 text-primary border-primary/30';\n return { cls: palette, label: s.replace(/_/g, ' ') };\n};\n\nconst priorityDot = (p) => {\n if (!p) return null;\n const norm = p.toLowerCase();\n return norm === 'critical' || norm === 'high' ? 'bg-error'\n : norm === 'medium' ? 'bg-tertiary'\n : 'bg-primary';\n};\n\n// ─── Event grouping memo helper ─────────────────────────────────────────────\nfunction groupByDay(events) {\n const map = {};\n for (const e of events) {\n if (!e || !e.date) continue;\n // Span multi-day events across each covered day\n const start = e.date;\n const end = e.end_date || e.date;\n let cur = start;\n let guard = 0;\n while (cur <= end && guard < 60) {\n (map[cur] = map[cur] || []).push(e);\n cur = addDays(cur, 1);\n guard++;\n }\n }\n // Sort within day: all-day first, then by time\n for (const k of Object.keys(map)) {\n map[k].sort((a, b) => {\n if (a.all_day && !b.all_day) return -1;\n if (!a.all_day && b.all_day) return 1;\n return (a.time || '').localeCompare(b.time || '');\n });\n }\n return map;\n}\n\n// ─── AI Briefing modal ──────────────────────────────────────────────────────\nfunction AIBriefingModal({open, onClose, date}) {\n const {Icon, Spinner} = N();\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [err, setErr] = useState(null);\n useEffect(() => {\n if (!open) return;\n setLoading(true); setErr(null); setData(null);\n fetch('/api/calendar/summary?date=' + encodeURIComponent(date || today()))\n .then(r => r.json())\n .then(d => setData(d))\n .catch(e => setErr(e.message))\n .finally(() => setLoading(false));\n }, [open, date]);\n if (!open) return null;\n return h(React.Fragment, null,\n h('div', {className:'fixed inset-0 bg-black/50 backdrop-blur-sm z-[55]', onClick: onClose}),\n h('div', {className:'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[min(560px,92vw)] glass-panel rounded-2xl shadow-2xl z-[60] flex flex-col max-h-[80vh]'},\n h('div', {className:'p-lg border-b border-border-subtle flex items-center justify-between'},\n h('div', {className:'flex items-center gap-2'},\n h(Icon, {name:'auto_awesome', size:20, filled:true, className:'text-primary'}),\n h('h3', {className:'text-[16px] font-bold tracking-tight'}, 'AI Briefing'),\n h('span', {className:'text-[10px] font-mono-data text-text-muted'}, date || today())\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface'},\n h(Icon, {name:'close', size:20})\n )\n ),\n h('div', {className:'p-lg overflow-y-auto'},\n loading && h('div', {className:'flex items-center justify-center py-10 gap-3 text-text-muted text-[12px]'},\n h(Spinner, {size: 22}), 'Generating briefing…'\n ),\n err && h('div', {className:'text-error text-[13px]'}, 'Failed: ' + err),\n data && h('div', {className:'space-y-3'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'},\n (data.event_count || 0) + ' event' + ((data.event_count||0) === 1 ? '' : 's') + ' on ' + fmtDateLong(data.date || today())\n ),\n h('div', {className:'text-[13px] text-on-surface-variant leading-relaxed whitespace-pre-wrap'},\n data.summary || 'No summary returned.'\n )\n )\n )\n )\n );\n}\n\n// ─── Event Detail Drawer ────────────────────────────────────────────────────\nfunction EventDrawer({event, onClose, onMarkDone, onEdit, showToast}) {\n const {Icon, Btn} = N();\n if (!event) return null;\n const meta = SOURCE_META[event.source] || SOURCE_META.custom;\n const sChip = statusChip(event.meta?.status ?? event.status);\n const askAI = () => {\n window.dispatchEvent(new CustomEvent('nexus:open-chat', { detail: { action_payload: {\n question: 'What should I know about: \"' + event.title + '\" on ' + event.date + '?'\n } } }));\n onClose && onClose();\n };\n const openLink = () => { if (event.linked_url) window.open(event.linked_url, '_blank'); };\n const isTask = event.source === 'tasks';\n return h(React.Fragment, null,\n h('div', {className:'fixed inset-0 bg-black/50 backdrop-blur-sm z-[55]', onClick: onClose}),\n h('div', {className:'fixed top-0 right-0 h-screen w-full sm:w-[420px] glass-panel shadow-2xl z-[60] flex flex-col drawer-in'},\n h('div', {className:'p-lg border-b border-border-subtle flex justify-between items-start gap-3 bg-surface-container-high/20'},\n h('div', {className:'flex items-start gap-3 min-w-0 flex-1'},\n h('div', {\n className:'w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0',\n style:{background: (event.color || meta.color) + '22', border:'1px solid ' + (event.color || meta.color)}\n }, h(Icon, {name: meta.icon, size:18, style:{color: event.color || meta.color}})),\n h('div', {className:'min-w-0 flex-1'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, meta.label),\n h('h3', {className:'text-[18px] font-extrabold text-on-surface leading-tight mt-0.5 break-words'}, event.title)\n )\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface p-1 flex-shrink-0'},\n h(Icon, {name:'close', size:20})\n )\n ),\n h('div', {className:'flex-1 overflow-y-auto p-lg space-y-md'},\n // Date + time\n h('div', {className:'flex items-center gap-2 text-[13px] text-on-surface'},\n h(Icon, {name:'event', size:16, className:'text-text-muted'}),\n h('span', null, fmtDateLong(event.date)),\n !event.all_day && event.time && h('span', {className:'text-text-muted'},\n '· ' + fmtTime(event.time) + (event.end_time ? ' – ' + fmtTime(event.end_time) : '')\n ),\n event.all_day && h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted ml-2 px-1.5 py-0.5 rounded bg-surface-container'}, 'All day')\n ),\n\n // Chips\n h('div', {className:'flex flex-wrap gap-1.5'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded border border-border-subtle bg-surface-container-lowest'}, meta.label),\n sChip && h('span', {className:'text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded border ' + sChip.cls}, sChip.label),\n event.workspace && h('span', {className:'text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded border border-border-subtle bg-surface-container-lowest text-text-muted'}, event.workspace),\n event.priority && h('span', {className:'text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded border border-border-subtle bg-surface-container-lowest flex items-center gap-1'},\n h('span', {className:'w-1.5 h-1.5 rounded-full ' + (priorityDot(event.priority) || 'bg-text-muted')}),\n event.priority\n )\n ),\n\n // Description\n event.description && h('div', {className:'pt-2 border-t border-border-subtle/50'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1'}, 'Description'),\n h('p', {className:'text-[12px] text-on-surface-variant leading-relaxed whitespace-pre-wrap'}, event.description)\n ),\n\n // Linked context\n (event.okr_progress != null || event.ice_score != null || (event.attendees && event.attendees.length) || event.location) &&\n h('div', {className:'pt-2 border-t border-border-subtle/50 space-y-1.5'},\n h('div', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Context'),\n event.okr_progress != null && h('div', {className:'flex items-center gap-2 text-[12px]'},\n h(Icon, {name:'flag', size:14, className:'text-secondary'}),\n h('span', {className:'text-text-muted'}, 'OKR:'),\n h('span', {className:'font-mono-data font-bold text-on-surface'}, Math.round(event.okr_progress) + '% complete')\n ),\n event.ice_score != null && h('div', {className:'flex items-center gap-2 text-[12px]'},\n h(Icon, {name:'bolt', size:14, className:'text-tertiary'}),\n h('span', {className:'text-text-muted'}, 'ICE Score:'),\n h('span', {className:'font-mono-data font-bold text-on-surface'}, Number(event.ice_score).toFixed(1))\n ),\n event.attendees && event.attendees.length > 0 && h('div', {className:'flex items-start gap-2 text-[12px]'},\n h(Icon, {name:'group', size:14, className:'text-primary mt-0.5'}),\n h('span', {className:'text-text-muted'}, 'Attendees:'),\n h('span', {className:'text-on-surface-variant break-words'}, event.attendees.join(', '))\n ),\n event.location && h('div', {className:'flex items-center gap-2 text-[12px]'},\n h(Icon, {name:'location_on', size:14, className:'text-primary'}),\n h('span', {className:'text-text-muted'}, 'Location:'),\n h('span', {className:'text-on-surface-variant'}, event.location)\n )\n )\n ),\n h('div', {className:'p-lg border-t border-border-subtle bg-surface-container-high/20 flex flex-wrap gap-2'},\n isTask && (event.meta?.status ?? event.status) !== 'done' && h(Btn, {\n onClick: () => onMarkDone && onMarkDone(event),\n variant:'primary', size:'sm'\n }, h(Icon, {name:'check', size:14}), 'Mark Done'),\n (event.source === 'custom' || isTask) && h(Btn, {\n onClick: () => onEdit && onEdit(event),\n variant:'secondary', size:'sm'\n }, h(Icon, {name:'edit', size:14}), 'Edit'),\n event.linked_url && h(Btn, {onClick: openLink, variant:'ghost', size:'sm'},\n h(Icon, {name:'open_in_new', size:14}), 'Open'\n ),\n h(Btn, {onClick: askAI, variant:'ghost', size:'sm'},\n h(Icon, {name:'auto_awesome', size:14}), 'Ask AI'\n )\n )\n )\n );\n}\n\n// ─── Add / Edit Event modal ─────────────────────────────────────────────────\nfunction EventForm({open, onClose, initial, onSaved, showToast}) {\n const {Icon, Btn, Input} = N();\n const [form, setForm] = useState({\n title:'', description:'', event_date: today(), event_time:'', end_time:'',\n event_type:'custom', workspace:'all', color:'#c0c1ff', all_day:false\n });\n const [saving, setSaving] = useState(false);\n useEffect(() => {\n if (!open) return;\n if (initial && initial.id) {\n setForm({\n title: initial.title || '',\n description: initial.description || '',\n event_date: initial.date || today(),\n event_time: initial.time || '',\n end_time: initial.end_time || '',\n event_type: initial.source === 'custom' ? 'custom' : (initial.source || 'custom'),\n workspace: initial.workspace || 'all',\n color: initial.color || '#c0c1ff',\n all_day: !!initial.all_day,\n });\n } else {\n setForm(f => ({...f, title:'', description:'', event_date: (initial && initial.date) || today(), event_time:'', end_time:'', all_day:false}));\n }\n }, [open, initial]);\n if (!open) return null;\n const setF = (k, v) => setForm(s => ({...s, [k]: v}));\n const save = async () => {\n if (!form.title.trim()) { showToast && showToast('Title required', 'error'); return; }\n setSaving(true);\n try {\n const body = {\n title: form.title.trim(),\n description: form.description.trim() || undefined,\n event_date: form.event_date,\n event_time: form.all_day ? undefined : (form.event_time || undefined),\n end_time: form.all_day ? undefined : (form.end_time || undefined),\n event_type: form.event_type,\n workspace: form.workspace,\n color: form.color,\n all_day: !!form.all_day,\n };\n const isEdit = initial && initial.id && String(initial.id).startsWith('entry_');\n const id = isEdit ? String(initial.id).replace(/^entry_/, '') : null;\n const url = isEdit ? ('/api/calendar/entries/' + id) : '/api/calendar/entries';\n const method = isEdit ? 'PUT' : 'POST';\n const r = await fetch(url, {method, headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)});\n if (!r.ok) throw new Error('HTTP ' + r.status);\n showToast && showToast(isEdit ? 'Event updated' : 'Event added', 'success');\n onSaved && onSaved();\n onClose && onClose();\n } catch (e) {\n showToast && showToast('Save failed: ' + e.message, 'error');\n } finally { setSaving(false); }\n };\n return h(React.Fragment, null,\n h('div', {className:'fixed inset-0 bg-black/50 backdrop-blur-sm z-[65]', onClick: onClose}),\n h('div', {className:'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[min(520px,94vw)] glass-panel rounded-2xl shadow-2xl z-[70] flex flex-col max-h-[88vh]'},\n h('div', {className:'p-lg border-b border-border-subtle flex items-center justify-between'},\n h('h3', {className:'text-[16px] font-bold tracking-tight'},\n initial && initial.id ? 'Edit Event' : 'Add Event'\n ),\n h('button', {onClick: onClose, className:'text-text-muted hover:text-on-surface'}, h(Icon, {name:'close', size:20}))\n ),\n h('div', {className:'p-lg overflow-y-auto space-y-md'},\n h(Input, {label:'Title', value: form.title, onChange: v => setF('title', v), placeholder:'Event title'}),\n h(Input, {label:'Description (optional)', value: form.description, onChange: v => setF('description', v), placeholder:'Notes…'}),\n h('div', {className:'grid grid-cols-2 gap-md'},\n h(Input, {label:'Date', type:'date', value: form.event_date, onChange: v => setF('event_date', v)}),\n h('div', {className:'flex flex-col gap-1.5'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Workspace'),\n h('select', {\n value: form.workspace, onChange: e => setF('workspace', e.target.value),\n className:'bg-surface-container-lowest border border-border-subtle rounded-lg px-2.5 py-2 text-[13px] text-on-surface outline-none focus:border-primary'\n }, WORKSPACES.map(w => h('option', {key: w, value: w}, w)))\n )\n ),\n h('div', {className:'flex items-center gap-2 text-[12px]'},\n h('input', {type:'checkbox', checked: !!form.all_day, onChange: e => setF('all_day', e.target.checked), className:'accent-primary'}),\n h('span', {className:'text-on-surface-variant'}, 'All-day event')\n ),\n !form.all_day && h('div', {className:'grid grid-cols-2 gap-md'},\n h(Input, {label:'Start time', type:'time', value: form.event_time, onChange: v => setF('event_time', v)}),\n h(Input, {label:'End time', type:'time', value: form.end_time, onChange: v => setF('end_time', v)})\n ),\n h('div', {className:'flex items-center gap-3'},\n h('label', {className:'text-[11px] font-semibold uppercase tracking-wider text-text-medium-contrast'}, 'Color'),\n h('input', {type:'color', value: form.color, onChange: e => setF('color', e.target.value), className:'h-8 w-12 bg-transparent border border-border-subtle rounded cursor-pointer'})\n )\n ),\n h('div', {className:'p-lg border-t border-border-subtle flex justify-end gap-2'},\n h(Btn, {onClick: onClose, variant:'ghost', size:'sm'}, 'Cancel'),\n h(Btn, {onClick: save, variant:'primary', size:'sm', disabled: saving},\n h(Icon, {name:'save', size:14}), saving ? 'Saving…' : 'Save'\n )\n )\n )\n );\n}\n\n// ─── Task board (collapsible Kanban) ────────────────────────────────────────\nconst TASK_COLUMNS = [\n {key:'todo', label:'Todo', match: s => !s || s === 'todo' || s === 'open' || s === 'pending'},\n {key:'in_progress', label:'In Progress', match: s => s === 'in_progress' || s === 'in progress' || s === 'doing'},\n {key:'blocked', label:'Blocked', match: s => s === 'blocked' || s === 'on_hold'},\n {key:'done', label:'Done', match: s => s === 'done' || s === 'completed'},\n];\n\nfunction TaskBoard({collapsed, onToggle, showToast}) {\n const {Icon, Btn, Input, Spinner} = N();\n const [tasks, setTasks] = useState([]);\n const [loading, setLoading] = useState(true);\n const [draft, setDraft] = useState({title:'', due_date:'', priority:'medium'});\n const [adding, setAdding] = useState(false);\n\n const load = useCallback(async () => {\n setLoading(true);\n try {\n const r = await fetch('/api/tasks').catch(() => null);\n const d = r && r.ok ? await r.json() : [];\n setTasks(Array.isArray(d) ? d : (d && Array.isArray(d.tasks) ? d.tasks : []));\n } catch { setTasks([]); }\n finally { setLoading(false); }\n }, []);\n useEffect(() => { if (!collapsed) load(); }, [collapsed, load]);\n\n const moveTask = async (taskId, newStatus) => {\n setTasks(prev => prev.map(t => String(t.id) === String(taskId) ? {...t, status: newStatus} : t));\n try {\n await fetch('/api/tasks/' + taskId, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({status: newStatus})\n });\n } catch (e) {\n showToast && showToast('Failed to move task', 'error');\n load();\n }\n };\n\n const addTask = async () => {\n if (!draft.title.trim()) return;\n setAdding(true);\n try {\n await fetch('/api/tasks', {\n method:'POST', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({\n title: draft.title.trim(),\n due_date: draft.due_date || undefined,\n priority: draft.priority,\n status: 'todo',\n })\n });\n setDraft({title:'', due_date:'', priority:'medium'});\n await load();\n showToast && showToast('Task added', 'success');\n } catch (e) {\n showToast && showToast('Add failed', 'error');\n } finally { setAdding(false); }\n };\n\n const grouped = useMemo(() => {\n const out = {todo:[], in_progress:[], blocked:[], done:[]};\n for (const t of tasks) {\n const col = TASK_COLUMNS.find(c => c.match((t.status || '').toLowerCase()));\n out[col ? col.key : 'todo'].push(t);\n }\n return out;\n }, [tasks]);\n\n const todayIso = today();\n const cardColor = (t) => {\n const due = t.due_date || t.due;\n if (!due) return null;\n if (due < todayIso && (t.status||'').toLowerCase() !== 'done') return 'text-error';\n if (due === todayIso) return 'text-tertiary';\n return 'text-text-muted';\n };\n\n return h('div', {className:'glass-panel rounded-xl mt-lg'},\n // Row of toggle + actions — split so the export link doesn't trigger collapse on click.\n h('div', {className:'w-full p-md flex items-center justify-between hover:bg-surface-container/30 transition-colors'},\n h('button', {type:'button', onClick: onToggle, className:'flex items-center gap-2 flex-1 text-left'},\n h(Icon, {name:'task_alt', size:18, className:'text-primary'}),\n h('h3', {className:'text-[14px] font-bold tracking-tight'}, 'Tasks'),\n h('span', {className:'text-[10px] font-mono-data text-text-muted'}, '· ' + tasks.length)\n ),\n h('div', {className:'flex items-center gap-1'},\n // P3 wire: tasks CSV export (token-bearing download — see __nexusDownload)\n h('button', {type:'button', title:'Export tasks CSV',\n onClick: e => { e.stopPropagation(); window.__nexusDownload('/api/export/tasks'); },\n className:'p-1.5 rounded hover:bg-surface-container-high text-text-muted hover:text-on-surface'},\n h(Icon, {name:'download', size:14})\n ),\n h('button', {type:'button', onClick: onToggle, className:'p-1.5 rounded text-text-muted'},\n h(Icon, {name: collapsed ? 'expand_more' : 'expand_less', size:18})\n )\n )\n ),\n !collapsed && h('div', {className:'p-md border-t border-border-subtle'},\n loading && tasks.length === 0\n ? h('div', {className:'flex items-center justify-center py-6'}, h(Spinner, {size: 18}))\n : h('div', {className:'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-md'},\n TASK_COLUMNS.map(col => h('div', {\n key: col.key,\n onDragOver: e => e.preventDefault(),\n onDrop: e => {\n e.preventDefault();\n const id = e.dataTransfer.getData('task-id');\n if (id) moveTask(id, col.key);\n },\n className:'bg-surface-container-lowest border border-border-subtle rounded-lg p-2.5 flex flex-col min-h-[180px]'\n },\n h('div', {className:'flex items-center justify-between mb-2 px-1'},\n h('span', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, col.label),\n h('span', {className:'text-[10px] font-mono-data text-text-muted'}, grouped[col.key].length)\n ),\n h('div', {className:'flex-1 space-y-1.5'},\n grouped[col.key].map(t => h('div', {\n key: t.id,\n draggable: true,\n onDragStart: e => e.dataTransfer.setData('task-id', String(t.id)),\n className:'p-2 rounded border border-border-subtle bg-surface-container/50 hover:border-primary/40 transition-colors cursor-grab active:cursor-grabbing'\n },\n h('div', {className:'flex items-start gap-1.5'},\n priorityDot(t.priority) && h('span', {className:'w-1.5 h-1.5 rounded-full mt-1 flex-shrink-0 ' + priorityDot(t.priority)}),\n h('span', {className:'text-[12px] text-on-surface font-semibold leading-tight flex-1'}, t.title || 'Untitled')\n ),\n h('div', {className:'flex items-center justify-between mt-1.5 gap-1 flex-wrap'},\n (t.due_date || t.due) && h('span', {className:'text-[10px] font-mono-data ' + (cardColor(t) || 'text-text-muted')},\n t.due_date || t.due\n ),\n t.ice_score != null && h('span', {className:'text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded bg-tertiary/10 text-tertiary border border-tertiary/20'},\n 'ICE ' + Number(t.ice_score).toFixed(1)\n ),\n (t.okr_id || t.objective_id) && h('span', {className:'text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded bg-secondary/10 text-secondary border border-secondary/20 flex items-center gap-0.5'},\n h(Icon, {name:'flag', size:9}), 'OKR'\n )\n )\n ))\n ),\n col.key === 'todo' && h('div', {className:'mt-2 pt-2 border-t border-border-subtle/50 space-y-1.5'},\n h(Input, {value: draft.title, onChange: v => setDraft(d => ({...d, title: v})), placeholder:'+ Add task…'}),\n h('div', {className:'flex gap-1.5'},\n h('input', {\n type:'date', value: draft.due_date,\n onChange: e => setDraft(d => ({...d, due_date: e.target.value})),\n className:'flex-1 bg-surface-container-lowest border border-border-subtle rounded px-2 py-1 text-[11px] font-mono-data text-on-surface outline-none focus:border-primary'\n }),\n h('select', {\n value: draft.priority, onChange: e => setDraft(d => ({...d, priority: e.target.value})),\n className:'bg-surface-container-lowest border border-border-subtle rounded px-2 py-1 text-[11px] text-on-surface outline-none focus:border-primary'\n },\n ['low','medium','high','critical'].map(p => h('option', {key: p, value: p}, p))\n )\n ),\n h(Btn, {onClick: addTask, variant:'primary', size:'sm', disabled: adding || !draft.title.trim(), className:'w-full'},\n h(Icon, {name:'add', size:13}), adding ? 'Adding…' : 'Add'\n )\n )\n ))\n )\n )\n );\n}\n\n// ─── Month View ─────────────────────────────────────────────────────────────\nconst DOW_HEAD = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];\n\nfunction MonthView({anchor, eventsByDay, onSelectEvent, onQuickAdd}) {\n const {Icon} = N();\n const d = parseIso(anchor);\n const year = d.getFullYear();\n const monthIdx = d.getMonth();\n const cells = useMemo(() => monthDays(year, monthIdx), [year, monthIdx]);\n const todayIso = today();\n const [hoverCell, setHoverCell] = useState(null);\n\n return h('div', {className:'glass-panel rounded-xl overflow-hidden'},\n h('div', {className:'grid grid-cols-7 border-b border-border-subtle bg-surface-container/40'},\n DOW_HEAD.map(d_ => h('div', {key: d_, className:'px-2 py-2 text-text-muted text-[11px] uppercase tracking-widest font-bold'}, d_))\n ),\n h('div', {className:'grid grid-cols-7'},\n cells.map((c, i) => {\n const dayEvents = eventsByDay[c.date] || [];\n const isToday = c.date === todayIso;\n const hasOverdue = dayEvents.some(e => e.source === 'tasks' && (e.meta?.status ?? e.status) !== 'done' && c.date < todayIso);\n const visible = dayEvents.slice(0, 3);\n const overflow = dayEvents.length - visible.length;\n return h('div', {\n key: c.date + '_' + i,\n onMouseEnter: () => setHoverCell(c.date),\n onMouseLeave: () => setHoverCell(null),\n className: 'border-b border-r border-border-subtle/50 min-h-[112px] p-1.5 flex flex-col gap-1 relative ' +\n (c.isCurrentMonth ? '' : 'bg-surface-container/20 opacity-60 ') +\n (hasOverdue ? 'border-b-error/60 ' : '')\n },\n h('div', {className:'flex items-center justify-between'},\n h('span', {\n className: 'text-[11px] font-mono-data ' +\n (isToday\n ? 'bg-primary text-on-primary px-1.5 py-0.5 rounded-full font-bold'\n : (c.isCurrentMonth ? 'text-on-surface font-bold' : 'text-text-muted')),\n style: isToday ? {boxShadow:'0 0 0 2px rgba(192,193,255,0.3)'} : {}\n }, parseIso(c.date).getDate()),\n hoverCell === c.date && c.isCurrentMonth && h('button', {\n onClick: (e) => { e.stopPropagation(); onQuickAdd && onQuickAdd(c.date); },\n className:'text-text-muted hover:text-primary p-0.5',\n title:'Add event'\n }, h(Icon, {name:'add', size:12}))\n ),\n visible.map((ev, j) => h('button', {\n key: ev.id + '_' + j,\n onClick: (e) => { e.stopPropagation(); onSelectEvent && onSelectEvent(ev); },\n className:'flex items-center gap-1 px-1.5 py-0.5 rounded text-left text-[10px] font-semibold truncate hover:opacity-80 transition-opacity',\n style:{\n background: (ev.color || '#c0c1ff') + '22',\n borderLeft: '2px solid ' + (ev.color || '#c0c1ff'),\n color: ev.color || '#c0c1ff',\n },\n title: ev.title + (ev.time ? ' · ' + fmtTime(ev.time) : '')\n },\n h(Icon, {name: (SOURCE_META[ev.source] || SOURCE_META.custom).icon, size:10}),\n h('span', {className:'truncate'},\n ev.time && !ev.all_day ? fmtTime(ev.time) + ' ' : '',\n ev.title\n )\n )),\n overflow > 0 && h('button', {\n onClick: (e) => { e.stopPropagation(); onQuickAdd && onQuickAdd(c.date, true); },\n className:'text-[10px] text-text-muted hover:text-primary font-mono-data text-left px-1'\n }, '+' + overflow + ' more')\n );\n })\n )\n );\n}\n\n// ─── Week View ──────────────────────────────────────────────────────────────\nfunction WeekView({anchor, eventsByDay, onSelectEvent}) {\n const days = useMemo(() => weekDays(anchor), [anchor]);\n const todayIso = today();\n const [now, setNow] = useState(new Date());\n useEffect(() => {\n const iv = setInterval(() => setNow(new Date()), 60000);\n return () => clearInterval(iv);\n }, []);\n\n // Split events into all-day vs timed for each day\n const allDayByDay = {};\n const timedByDay = {};\n days.forEach(iso => {\n const list = eventsByDay[iso] || [];\n allDayByDay[iso] = list.filter(e => e.all_day || !e.time);\n timedByDay[iso] = list.filter(e => !e.all_day && e.time);\n });\n\n const HOUR_HEIGHT = 48;\n const nowMins = now.getHours() * 60 + now.getMinutes();\n const nowTop = (nowMins / 60) * HOUR_HEIGHT;\n const nowInWeek = days.includes(isoOf(now));\n\n // For overlap detection per day\n const overlapSlots = (events) => {\n // Each event gets {slot: 0/1, slots: 1/2}. Simple: pair-wise overlap halves width.\n const out = events.map(e => ({...e, slot: 0, slots: 1}));\n for (let i = 0; i < out.length; i++) {\n for (let j = 0; j < i; j++) {\n const a = out[i], b = out[j];\n const aStart = parseTimeHours(a.time);\n const aEnd = parseTimeHours(a.end_time) || aStart + 1;\n const bStart = parseTimeHours(b.time);\n const bEnd = parseTimeHours(b.end_time) || bStart + 1;\n if (aStart < bEnd && bStart < aEnd) {\n a.slot = 1; a.slots = 2; b.slots = 2;\n }\n }\n }\n return out;\n };\n\n return h('div', {className:'glass-panel rounded-xl overflow-hidden flex flex-col max-h-[calc(100vh-300px)]'},\n // Sticky header\n h('div', {className:'sticky top-0 z-20 grid grid-cols-[60px_repeat(7,1fr)] border-b border-border-subtle bg-surface-container/90 backdrop-blur-sm'},\n h('div', {className:'border-r border-border-subtle/50'}),\n days.map(iso => {\n const d = parseIso(iso);\n const isTd = iso === todayIso;\n return h('div', {key: iso, className:'px-2 py-2 border-r border-border-subtle/50 text-center'},\n h('div', {className:'text-[10px] uppercase tracking-widest text-text-muted font-bold'},\n d.toLocaleDateString('en-US', {weekday:'short'})\n ),\n h('div', {\n className:'text-[18px] font-extrabold mt-0.5 ' + (isTd ? 'text-primary' : 'text-on-surface'),\n style:{fontVariantNumeric:'tabular-nums'}\n }, d.getDate())\n );\n })\n ),\n\n // All-day swim lane\n h('div', {className:'sticky top-[58px] z-10 grid grid-cols-[60px_repeat(7,1fr)] border-b border-border-subtle bg-surface-container/70 backdrop-blur-sm'},\n h('div', {className:'border-r border-border-subtle/50 px-2 py-1 text-[9px] uppercase tracking-widest text-text-muted font-bold flex items-center justify-end'}, 'All-day'),\n days.map(iso => h('div', {key: iso, className:'border-r border-border-subtle/50 px-1 py-1 space-y-0.5 min-h-[28px]'},\n (allDayByDay[iso] || []).slice(0, 4).map((ev, j) => h('button', {\n key: ev.id + '_' + j,\n onClick: () => onSelectEvent && onSelectEvent(ev),\n className:'block w-full text-left px-1.5 py-0.5 rounded text-[10px] font-semibold truncate hover:opacity-80',\n style:{\n background: (ev.color || '#c0c1ff') + '22',\n borderLeft: '2px solid ' + (ev.color || '#c0c1ff'),\n color: ev.color || '#c0c1ff',\n },\n title: ev.title\n }, ev.title))\n ))\n ),\n\n // Hourly grid\n h('div', {className:'flex-1 overflow-y-auto relative'},\n h('div', {className:'grid grid-cols-[60px_repeat(7,1fr)] relative', style:{minHeight: (24 * HOUR_HEIGHT) + 'px'}},\n // Hour labels\n h('div', {className:'border-r border-border-subtle/50'},\n Array.from({length: 24}).map((_, hh) => h('div', {\n key: hh, style:{height: HOUR_HEIGHT + 'px'},\n className:'border-b border-border-subtle/30 text-[10px] text-text-muted text-right pr-1.5 pt-0.5 font-mono-data'\n }, hh === 0 ? '' : (hh + ':00')))\n ),\n // Day columns\n days.map(iso => {\n const events = overlapSlots(timedByDay[iso] || []);\n return h('div', {key: iso, className:'border-r border-border-subtle/50 relative'},\n // Hour grid lines\n Array.from({length: 24}).map((_, hh) => h('div', {\n key: hh, style:{height: HOUR_HEIGHT + 'px'},\n className:'border-b border-border-subtle/20'\n })),\n // Timed events\n events.map((ev, j) => {\n const startH = parseTimeHours(ev.time);\n const endH = parseTimeHours(ev.end_time) || startH + 1;\n const top = startH * HOUR_HEIGHT;\n const height = Math.max(20, (endH - startH) * HOUR_HEIGHT);\n const leftPct = ev.slots > 1 ? (ev.slot * 50) : 0;\n const widthPct = ev.slots > 1 ? 49 : 98;\n return h('button', {\n key: ev.id + '_' + j,\n onClick: () => onSelectEvent && onSelectEvent(ev),\n className:'absolute rounded p-1 text-left overflow-hidden text-[10px] hover:opacity-90 transition-opacity',\n style:{\n top: top + 'px', height: height + 'px',\n left: 'calc(' + leftPct + '% + 2px)',\n width: 'calc(' + widthPct + '% - 4px)',\n background: (ev.color || '#c0c1ff') + '33',\n borderLeft: '3px solid ' + (ev.color || '#c0c1ff'),\n color: ev.color || '#c0c1ff',\n }\n },\n h('div', {className:'font-bold truncate'}, ev.title),\n h('div', {className:'opacity-80 font-mono-data text-[9px]'}, fmtTime(ev.time))\n );\n })\n );\n }),\n // Current time indicator\n nowInWeek && h('div', {\n className:'absolute left-[60px] right-0 z-30 pointer-events-none',\n style:{top: nowTop + 'px'}\n },\n h('div', {className:'h-px bg-error', style:{boxShadow:'0 0 4px rgba(244,67,54,0.5)'}}),\n h('div', {className:'absolute -left-1 -top-1 w-2 h-2 rounded-full bg-error'})\n )\n )\n )\n );\n}\n\n// ─── Agenda View ────────────────────────────────────────────────────────────\nfunction AgendaView({anchor, eventsByDay, onSelectEvent}) {\n const {Icon} = N();\n // Show 30 days starting at the first of anchor's month.\n const d = parseIso(anchor);\n const start = isoOf(new Date(d.getFullYear(), d.getMonth(), 1));\n const days = useMemo(() => {\n const out = [];\n for (let i = 0; i < 30; i++) out.push(addDays(start, i));\n return out;\n }, [start]);\n const todayIso = today();\n const populated = days.filter(iso => (eventsByDay[iso] || []).length > 0);\n\n if (populated.length === 0) {\n return h('div', {className:'glass-panel rounded-xl p-xl text-center text-text-muted'},\n h(Icon, {name:'event_busy', size:28, className:'mx-auto mb-2 opacity-60'}),\n h('div', {className:'text-[13px]'}, 'No events in this view. Add one with + Add Event.')\n );\n }\n return h('div', {className:'glass-panel rounded-xl divide-y divide-border-subtle/40'},\n populated.map(iso => {\n const list = eventsByDay[iso] || [];\n const isTd = iso === todayIso;\n return h('div', {key: iso, className:'p-md'},\n h('div', {className:'flex items-center gap-2 mb-2'},\n h('h4', {className:'text-[13px] font-extrabold ' + (isTd ? 'text-primary' : 'text-on-surface')},\n fmtDateLong(iso)\n ),\n h('span', {className:'text-[10px] font-mono-data text-text-muted px-2 py-0.5 rounded bg-surface-container border border-border-subtle'},\n list.length + ' event' + (list.length === 1 ? '' : 's')\n )\n ),\n h('div', {className:'space-y-1'},\n list.map((ev, j) => {\n const meta = SOURCE_META[ev.source] || SOURCE_META.custom;\n const sChip = statusChip(ev.meta?.status ?? ev.status);\n return h('button', {\n key: ev.id + '_' + j,\n onClick: () => onSelectEvent && onSelectEvent(ev),\n className:'w-full flex items-center gap-3 p-2 rounded-lg hover:bg-surface-container/40 transition-colors text-left'\n },\n h('div', {className:'w-16 flex-shrink-0 text-[11px] font-mono-data text-text-muted'},\n ev.all_day ? 'All day' : (ev.time ? fmtTime(ev.time) : '—')\n ),\n h('span', {className:'w-2 h-2 rounded-full flex-shrink-0', style:{background: ev.color || meta.color}}),\n h('div', {className:'flex-1 min-w-0'},\n h('div', {className:'text-[13px] font-semibold text-on-surface truncate'}, ev.title),\n h('div', {className:'text-[10px] text-text-muted flex items-center gap-1.5 mt-0.5'},\n h(Icon, {name: meta.icon, size:10}),\n h('span', null, meta.label),\n ev.workspace && ev.workspace !== 'all' && h('span', null, '· ' + ev.workspace)\n )\n ),\n sChip && h('span', {className:'text-[9px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded border flex-shrink-0 ' + sChip.cls},\n sChip.label\n ),\n h(Icon, {name:'chevron_right', size:16, className:'text-text-muted flex-shrink-0'})\n );\n })\n )\n );\n })\n );\n}\n\n// ─── CalendarPage (top-level) ───────────────────────────────────────────────\nexport function CalendarPage({setActivePage, integrations, agents, showToast}) {\n const {Icon, Btn, PageHeader, Spinner} = N();\n\n const [view, setView] = useState('month'); // month | week | agenda\n const [anchor, setAnchor] = useState(today());\n const [workspace, setWorkspace] = useState('all');\n const [sources, setSources] = useState(() => {\n const init = {}; ALL_SOURCES.forEach(s => { init[s] = true; }); return init;\n });\n\n const [events, setEvents] = useState([]);\n const [loading, setLoading] = useState(true);\n const [err, setErr] = useState(null);\n\n const [selectedEvent, setSelectedEvent] = useState(null);\n const [formOpen, setFormOpen] = useState(false);\n const [formInitial, setFormInitial] = useState(null);\n const [briefOpen, setBriefOpen] = useState(false);\n const [boardCollapsed, setBoardCollapsed] = useState(true);\n\n // Compute fetch range for current view.\n const range = useMemo(() => {\n const d = parseIso(anchor);\n if (view === 'week') {\n const wd = weekDays(anchor);\n return {from: wd[0], to: wd[6]};\n }\n if (view === 'agenda') {\n const start = isoOf(new Date(d.getFullYear(), d.getMonth(), 1));\n return {from: start, to: addDays(start, 30)};\n }\n // month — include leading/trailing days from the 42-cell grid\n const cells = monthDays(d.getFullYear(), d.getMonth());\n return {from: cells[0].date, to: cells[cells.length - 1].date};\n }, [view, anchor]);\n\n const load = useCallback(async () => {\n setLoading(true); setErr(null);\n try {\n const params = new URLSearchParams();\n params.set('from', range.from);\n params.set('to', range.to);\n if (workspace && workspace !== 'all') params.set('workspace', workspace);\n ALL_SOURCES.forEach(s => { if (sources[s]) params.append('source', s); });\n const r = await fetch('/api/calendar/unified?' + params.toString());\n if (!r.ok) throw new Error('HTTP ' + r.status);\n const d = await r.json();\n setEvents(Array.isArray(d) ? d : []);\n } catch (e) {\n setErr(e.message); setEvents([]);\n } finally { setLoading(false); }\n }, [range.from, range.to, workspace, sources]);\n\n useEffect(() => { load(); }, [load]);\n\n // Real-time: silently refresh the unified calendar every 45s + on window focus, so executed\n // tasks/experiments/approved actions appear without a manual reload (no loading flicker).\n useEffect(() => {\n let cancelled = false;\n const silent = async () => {\n try {\n const params = new URLSearchParams();\n params.set('from', range.from); params.set('to', range.to);\n if (workspace && workspace !== 'all') params.set('workspace', workspace);\n ALL_SOURCES.forEach(s => { if (sources[s]) params.append('source', s); });\n const r = await fetch('/api/calendar/unified?' + params.toString());\n if (!r.ok) return;\n const d = await r.json();\n if (!cancelled) setEvents(Array.isArray(d) ? d : []);\n } catch (_e) { /* silent */ }\n };\n const iv = setInterval(silent, 45000);\n const onFocus = () => silent();\n window.addEventListener('focus', onFocus);\n return () => { cancelled = true; clearInterval(iv); window.removeEventListener('focus', onFocus); };\n }, [range.from, range.to, workspace, sources]);\n\n const eventsByDay = useMemo(() => groupByDay(events), [events]);\n\n const goPrev = () => {\n if (view === 'week') setAnchor(addDays(anchor, -7));\n else setAnchor(addMonths(anchor, -1));\n };\n const goNext = () => {\n if (view === 'week') setAnchor(addDays(anchor, 7));\n else setAnchor(addMonths(anchor, 1));\n };\n const goToday = () => setAnchor(today());\n\n const openAdd = (date) => { setFormInitial({date: date || anchor}); setFormOpen(true); };\n const openEdit = (ev) => { setFormInitial(ev); setFormOpen(true); setSelectedEvent(null); };\n\n const markDone = async (ev) => {\n if (ev.source !== 'task') return;\n const id = String(ev.id).replace(/^task_/, '');\n try {\n await fetch('/api/tasks/' + id, {\n method:'PUT', headers:{'Content-Type':'application/json'},\n body: JSON.stringify({status:'done'})\n });\n showToast && showToast('Marked done', 'success');\n setSelectedEvent(null);\n load();\n } catch (e) {\n showToast && showToast('Failed: ' + e.message, 'error');\n }\n };\n\n const toggleSource = (s) => setSources(prev => ({...prev, [s]: !prev[s]}));\n\n return h('div', {className:'p-lg lg:p-xl max-w-[1440px] mx-auto pb-20'},\n h(PageHeader, {\n title:'Command Calendar',\n subtitle:'Tasks, experiments, OKRs, and your Google Calendar — one timeline.',\n action: h('div', {className:'flex items-center gap-2'},\n h('div', {className:'flex items-center gap-1 bg-surface-container-lowest p-1 rounded-lg border border-border-subtle'},\n ['month','week','agenda'].map(v => h('button', {\n key: v, onClick: () => setView(v), type:'button',\n className: 'px-3 py-1.5 rounded-md text-[11px] font-bold uppercase tracking-widest transition-all ' +\n (view === v ? 'bg-primary text-on-primary' : 'text-text-muted hover:text-on-surface')\n }, v))\n ),\n h(Btn, {onClick: () => openAdd(), variant:'primary', size:'sm'},\n h(Icon, {name:'add', size:14}), 'Add Event'\n )\n )\n }),\n\n // Sub-header filter bar\n h('div', {className:'glass-panel rounded-xl p-md mb-md flex flex-wrap items-center gap-3'},\n h('div', {className:'flex items-center gap-1'},\n h('button', {\n onClick: goPrev, type:'button',\n className:'p-1.5 rounded hover:bg-surface-container text-text-muted hover:text-on-surface',\n title: view === 'week' ? 'Previous week' : 'Previous month'\n }, h(Icon, {name:'chevron_left', size:18})),\n h('button', {\n onClick: goNext, type:'button',\n className:'p-1.5 rounded hover:bg-surface-container text-text-muted hover:text-on-surface',\n title: view === 'week' ? 'Next week' : 'Next month'\n }, h(Icon, {name:'chevron_right', size:18})),\n h('span', {className:'text-[14px] font-bold ml-2 min-w-[140px]'},\n view === 'week'\n ? (fmtDateLong(weekDays(anchor)[0]).split(',')[1] || '').trim() + ' – ' + (fmtDateLong(weekDays(anchor)[6]).split(',')[1] || '').trim()\n : fmtMonthYear(anchor)\n ),\n h('button', {\n onClick: goToday, type:'button',\n className:'ml-2 px-2.5 py-1 rounded text-[11px] font-bold uppercase tracking-widest text-on-surface border border-border-subtle hover:border-primary hover:text-primary transition-colors'\n }, 'Today')\n ),\n h('div', {className:'h-5 w-px bg-border-subtle'}),\n h('div', {className:'flex items-center gap-1.5'},\n h('label', {className:'text-[10px] font-bold uppercase tracking-widest text-text-muted'}, 'Workspace'),\n h('select', {\n value: workspace, onChange: e => setWorkspace(e.target.value),\n className:'bg-surface-container-lowest border border-border-subtle rounded px-2 py-1 text-[12px] text-on-surface focus:border-primary focus:outline-none'\n }, WORKSPACES.map(w => h('option', {key: w, value: w}, w)))\n ),\n h('div', {className:'h-5 w-px bg-border-subtle'}),\n h('div', {className:'flex flex-wrap items-center gap-1.5'},\n ALL_SOURCES.map(s => {\n const meta = SOURCE_META[s];\n const on = sources[s];\n return h('button', {\n key: s, type:'button', onClick: () => toggleSource(s),\n className:'inline-flex items-center gap-1 px-2 py-1 rounded border text-[10px] font-bold uppercase tracking-widest transition-all ' +\n (on\n ? 'border-primary/40 bg-primary/10 text-on-surface'\n : 'border-border-subtle bg-surface-container-lowest text-text-muted')\n },\n h('span', {className:'w-1.5 h-1.5 rounded-full', style:{background: on ? meta.color : 'currentColor', opacity: on ? 1 : 0.4}}),\n meta.label\n );\n })\n ),\n h('div', {className:'flex-1'}),\n h(Btn, {onClick: () => setBriefOpen(true), variant:'ghost', size:'sm'},\n h(Icon, {name:'auto_awesome', size:14}), 'AI Briefing'\n )\n ),\n\n // View body\n loading && events.length === 0\n ? h('div', {className:'glass-panel rounded-xl py-16 flex items-center justify-center'},\n h(Spinner, {size: 24})\n )\n : err\n ? h('div', {className:'glass-panel rounded-xl p-lg text-error text-[13px]'},\n 'Calendar load failed: ' + err\n )\n : view === 'month'\n ? h(MonthView, {anchor, eventsByDay, onSelectEvent: setSelectedEvent, onQuickAdd: openAdd})\n : view === 'week'\n ? h(WeekView, {anchor, eventsByDay, onSelectEvent: setSelectedEvent})\n : h(AgendaView, {anchor, eventsByDay, onSelectEvent: setSelectedEvent}),\n\n // Empty hint when not loading\n !loading && !err && events.length === 0 && h('div', {className:'glass-panel rounded-xl p-lg mt-md text-center text-text-muted text-[12px]'},\n 'No events in this view. Add one with + Add Event.'\n ),\n\n // Collapsible task board\n h(TaskBoard, {collapsed: boardCollapsed, onToggle: () => setBoardCollapsed(c => !c), showToast}),\n\n // Drawer + modals\n selectedEvent && h(EventDrawer, {\n event: selectedEvent,\n onClose: () => setSelectedEvent(null),\n onMarkDone: markDone,\n onEdit: openEdit,\n showToast,\n }),\n h(EventForm, {\n open: formOpen,\n onClose: () => { setFormOpen(false); setFormInitial(null); },\n initial: formInitial,\n onSaved: load,\n showToast,\n }),\n h(AIBriefingModal, {open: briefOpen, onClose: () => setBriefOpen(false), date: today()})\n );\n}\n\n// QA fix: removed duplicate \"export { CalendarPage }\" — CalendarPage is already exported\n// inline above via \"export function CalendarPage\". A second named export of the same symbol\n// is a SyntaxError in ES modules and made the browser fall back to the \"Calendar module\n// failed to load\" stub.\n`;\n}\n",[426],"d65ddcda-5d9b-11f1-8267-1607ee4eb77e","frontend_approvals.ts","2b723038-5a75-11f1-8516-ee650bb23af1",755,["D",1780305932286],"// Approvals inbox — the human-in-the-loop surface for the action_queue. Lists AI-prepared\n// external actions (email/LinkedIn/WordPress) and lets the user Approve (→ executes the real\n// integration call) or Reject. Served at /api/app-approvals; shared deps via window.__nexus.\n// NOTE: plain browser JS only — never put TypeScript annotations inside this template string.\nexport function getApprovalsJS(): string {\n return `\nimport React, { useState, useEffect, useCallback } from 'react';\nconst h = React.createElement;\nconst N = () => window.__nexus || {};\n\nconst INT_ICON = { gmail:'mail', outlook:'mail', wordpress:'article', linkedin:'work', calendar:'event', drive:'folder', sheets:'table_chart', docs:'description' };\nconst STATUS_COLOR = { prepared:'text-tertiary', approved:'text-primary', executing:'text-primary', done:'text-secondary', failed:'text-error', rejected:'text-text-muted' };\nconst FILTERS = ['prepared','done','failed','rejected','all'];\n\nexport function ApprovalsPage(props) {\n const { Icon, Spinner } = N();\n const [actions, setActions] = useState([]);\n const [loading, setLoading] = useState(true);\n const [busy, setBusy] = useState(null);\n const [filter, setFilter] = useState('prepared');\n\n const load = useCallback(() => {\n setLoading(true);\n const qs = filter === 'all' ? '' : ('?status=' + filter);\n fetch('/api/actions' + qs)\n .then(r => r.json())\n .then(d => setActions(Array.isArray(d) ? d : []))\n .catch(() => setActions([]))\n .finally(() => setLoading(false));\n }, [filter]);\n useEffect(() => {\n load();\n const onTick = () => load();\n window.addEventListener('nexus:tick', onTick);\n return () => window.removeEventListener('nexus:tick', onTick);\n }, [load]);\n\n const act = async (id, kind) => {\n setBusy(id);\n try {\n const r = await fetch('/api/actions/' + id + '/' + kind, { method:'POST' });\n const out = await r.json();\n if (props.showToast) {\n if (kind === 'reject') props.showToast('Action rejected', 'success');\n else if (out.status === 'done') props.showToast('Approved & sent', 'success');\n else props.showToast('Send failed: ' + (out.result && out.result.error ? out.result.error : 'see card'), 'error');\n }\n } catch (e) {\n if (props.showToast) props.showToast('Failed: ' + (e && e.message ? e.message : 'error'), 'error');\n } finally {\n setBusy(null);\n load();\n }\n };\n\n return h('div', { className:'p-lg space-y-md max-w-4xl mx-auto' },\n h('div', { className:'flex items-center justify-between flex-wrap gap-2' },\n h('div', null,\n h('h1', { className:'text-[20px] font-bold text-on-surface' }, 'Approvals'),\n h('p', { className:'text-[13px] text-text-muted' }, 'Review AI-prepared actions before they send. Nothing goes out until you approve.')\n ),\n h('div', { className:'flex gap-1 flex-wrap' },\n FILTERS.map(f => h('button', {\n key:f, onClick:() => setFilter(f),\n className:'px-2.5 py-1 rounded-md text-[12px] capitalize ' + (filter === f ? 'bg-primary text-on-primary' : 'text-text-muted hover:bg-surface-variant/20')\n }, f))\n )\n ),\n loading\n ? h('div', { className:'flex justify-center p-10' }, Spinner ? h(Spinner, { size:28 }) : 'Loading…')\n : actions.length === 0\n ? h('div', { className:'glass-panel rounded-xl p-10 text-center text-text-muted text-[13px]' },\n 'No ' + (filter === 'all' ? '' : filter + ' ') + 'actions yet. When the AI drafts an email, LinkedIn post, or WordPress post, it lands here for your approval.')\n : h('div', { className:'space-y-2.5' }, actions.map(a => h('div', { key:a.id, className:'glass-panel rounded-xl p-md' },\n h('div', { className:'flex items-start justify-between gap-3' },\n h('div', { className:'flex items-start gap-2.5 min-w-0' },\n h(Icon, { name: INT_ICON[a.integration] || 'bolt', size:18, className:'mt-0.5 text-primary' }),\n h('div', { className:'min-w-0' },\n h('div', { className:'text-[14px] font-semibold text-on-surface' }, a.title || (a.integration + ' · ' + a.endpoint)),\n h('div', { className:'text-[11px] text-text-muted font-mono-data' }, a.integration + ' · ' + a.endpoint + ' · #' + a.id),\n a.preview && h('pre', { className:'mt-1.5 text-[12px] text-on-surface-variant whitespace-pre-wrap bg-surface-container-high/40 rounded-md p-2 max-h-40 overflow-auto' }, a.preview)\n )\n ),\n h('span', { className:'text-[11px] font-bold uppercase shrink-0 ' + (STATUS_COLOR[a.status] || 'text-text-muted') }, a.status)\n ),\n a.status === 'prepared' && h('div', { className:'flex gap-2 mt-3 justify-end' },\n h('button', { disabled: busy === a.id, onClick:() => act(a.id, 'reject'),\n className:'px-3 py-1.5 rounded-lg text-[13px] text-text-muted hover:bg-surface-variant/20 disabled:opacity-50' }, 'Reject'),\n h('button', { disabled: busy === a.id, onClick:() => act(a.id, 'approve'),\n className:'px-3.5 py-1.5 rounded-lg text-[13px] font-semibold bg-primary text-on-primary hover:opacity-90 disabled:opacity-50' },\n busy === a.id ? 'Working…' : 'Approve & Send')\n ),\n a.status === 'failed' && a.result && h('div', { className:'mt-2 text-[12px] text-error' },\n 'Error: ' + (typeof a.result === 'string' ? a.result : JSON.stringify(a.result)))\n )))\n );\n}\n`;\n}\n",[434],"5113cada-5da5-11f1-a937-1607ee4eb77e","frontend.ts","2ff38a48-56ca-11f1-8589-ee650bb23af1",771,["D",1780310003617],21,"export function getFrontendHTML(): string {\n return `<!DOCTYPE html>\n<html lang=\"en\" class=\"dark\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Nexus AI - Command Center\n \n \n \n \n \n \n \n \n \n\n\n

\n \n\n`;\n}\n\n// Part 10: the Agent World shell — a \"the-delegation\" simulation DASHBOARD at /world. Same origin\n// (shares nexus_token + every /api/* route), so the agents + panels run over the REAL backend.\n// This shell is the SOLE creator of every fixed DOM id the world modules target. It is a CSS-grid\n// dashboard (light theme): a top bar, a LEFT logs panel, a CENTER stage (scene header + a BOUNDED\n// canvas + a kanban under it) and a RIGHT project panel. The canvas is NOT fullscreen — it lives\n// inside #world-canvas-wrap and the scene sizes to that wrapper. three.js (+ addons) load from a\n// CDN via the importmap; the 3D + panel logic is in /api/app-world (the entry) and its sub-modules.\nexport function getWorldHTML(): string {\n return `\n\n\n \n \n AIHive · Agent World\n \n \n \n \n\n\n

\n \n

\n \n\n`;\n}\n",[441],"0530cf82-5f26-11f1-9488-1607ee4eb77e","db.ts","2f68e1b8-56ca-11f1-b821-ee650bb23af1",1011,["D",1780475232541],53,"import { sqlite as _sqlite } from \"https://esm.town/v/std/sqlite\";\n\n// Compatibility shim: support sqlite.execute(sql, args) two-arg form\n// Val.town's libSQL client only accepts execute(string) or execute({sql, args})\nconst _exec = _sqlite.execute.bind(_sqlite);\n\n// RATE-LIMIT RESILIENCE: std/sqlite enforces a shared rate limit. A cold-boot initDB fires ~170\n// CREATE/ALTER/INDEX calls in a burst and can exceed the window MID-init — which used to wedge the\n// whole app in a permanent 500 loop (init fails part-way → memo resets → next request re-bursts →\n// fails again, never converging). We retry rate-limited calls with backoff so init (and any runtime\n// query) PACES THROUGH the limit and completes. Non-rate-limit errors are rethrown immediately.\nconst _isRateLimit = (e: any): boolean => /rate limit|too many request|429/i.test(String((e && e.message) || e));\nconst _backoffMs = (e: any, attempt: number): number => {\n const m = String((e && e.message) || e).match(/retry in (\\d+)\\s*second/i);\n if (m) return Math.min(8000, (Number(m[1]) + 1) * 1000); // honor the server's hint when given\n return Math.min(4000, 500 * Math.pow(2, attempt));\n};\nconst _execRetry = async (stmt: any): Promise => {\n for (let attempt = 0; ; attempt++) {\n try {\n return await _exec(stmt);\n } catch (e) {\n if (attempt < 10 && _isRateLimit(e)) {\n await new Promise((r) => setTimeout(r, _backoffMs(e, attempt)));\n continue;\n }\n throw e;\n }\n }\n};\nexport const sqlite = {\n ..._sqlite,\n execute: async (stmt: string | { sql: string; args?: any[] }, args?: any[]): Promise => {\n if (typeof stmt === \"string\" && args !== undefined) {\n return _execRetry({ sql: stmt, args });\n }\n return _execRetry(stmt as any);\n },\n};\n\n// ─── TENANT CONTEXT (AUTH/TENANT FOUNDATION) ────────────────────────────────\n// Per-request tenant/user/role context carried via AsyncLocalStorage. main.ts wraps each\n// handleRequest in tenantStore.run(ctx, ...). When there is no active store (cron, system\n// boot, recovery APP_TOKEN path) we DEFAULT to t_default/system/owner so all existing data\n// (backfilled to tenant_id=\"t_default\") keeps working exactly as today.\nimport { AsyncLocalStorage } from \"node:async_hooks\";\n\n// impersonating / realTenantId are set ONLY for read-only \"view as tenant\" (Phase D): when a\n// platform admin toggles sessions.impersonate_tenant_id, resolveSessionToken redirects tenantId to\n// the target tenant while keeping userId/email/role/isPlatformAdmin = the master. realTenantId holds\n// the master's OWN membership tenant. Optional so every existing ctx literal stays valid.\nexport type TenantCtx = { tenantId: string; userId: string; email: string; role: \"owner\" | \"admin\" | \"member\"; isPlatformAdmin: boolean; impersonating?: boolean; realTenantId?: string };\n// SYSTEM_CTX is the platform-trusted recovery context (APP_TOKEN / cron / boot). It IS platform admin.\nexport const SYSTEM_CTX: TenantCtx = { tenantId: \"t_default\", userId: \"system\", email: \"system\", role: \"owner\", isPlatformAdmin: true };\n\nexport const tenantStore = new AsyncLocalStorage();\nexport function currentCtx(): TenantCtx {\n // The bare no-store default is intentionally NOT platform admin (safe-by-default). Only the\n // explicit SYSTEM_CTX (used by main.ts for cron/recovery) carries isPlatformAdmin:true.\n return tenantStore.getStore() || { tenantId: \"t_default\", userId: \"system\", email: \"system\", role: \"owner\", isPlatformAdmin: false };\n}\nexport function currentTenantId(): string { return currentCtx().tenantId; }\nexport function currentUserId(): string { return currentCtx().userId; }\nexport function currentRole(): \"owner\" | \"admin\" | \"member\" { return currentCtx().role; }\n\n// MEMOIZED: run the full schema setup ONCE per warm instance, not on every request. initDB was\n// awaited per-request, firing dozens of CREATE/ALTER sqlite calls each time → std/sqlite 429\n// \"Too Many Requests\" → intermittent 500s across the app (the \"too many requests\" symptom). The\n// cached promise makes every subsequent call free; on failure we reset so the next request retries.\nlet _initPromise: Promise | null = null;\nexport function initDB(): Promise {\n if (!_initPromise) {\n _initPromise = _initDBImpl().catch((e) => { _initPromise = null; throw e; });\n }\n return _initPromise;\n}\nasync function _initDBImpl(): Promise {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS integrations (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n api_key TEXT,\n api_secret TEXT,\n access_token TEXT,\n refresh_token TEXT,\n extra_config TEXT,\n connected_at TEXT,\n updated_at TEXT,\n tenant_id TEXT,\n UNIQUE(tenant_id, name)\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS llm_config (\n id TEXT PRIMARY KEY DEFAULT 'default',\n provider TEXT NOT NULL DEFAULT 'anthropic',\n api_key TEXT NOT NULL DEFAULT '',\n endpoint TEXT,\n model TEXT NOT NULL DEFAULT 'claude-sonnet-4-6',\n updated_at TEXT\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS agents (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n workspace TEXT NOT NULL,\n description TEXT,\n system_prompt TEXT,\n tools TEXT DEFAULT '[]',\n model TEXT,\n enabled INTEGER DEFAULT 1,\n created_at TEXT NOT NULL,\n updated_at TEXT NOT NULL,\n created_by TEXT DEFAULT 'user'\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS conversations (\n id TEXT PRIMARY KEY,\n agent_id TEXT,\n workspace TEXT NOT NULL,\n messages TEXT DEFAULT '[]',\n created_at TEXT NOT NULL,\n updated_at TEXT NOT NULL\n )\n `);\n\n // F4 migration: the original tasks table (TEXT id, agent_id, input/output) is replaced by\n // the framework-layer tasks schema (INTEGER id, ICE fields, OKR/experiment links). If a\n // legacy table exists, rename it so the new CREATE further down can build the right shape.\n try {\n const cols = await sqlite.execute(\"PRAGMA table_info(tasks)\");\n const have = new Set((cols.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n // Old schema is identifiable by `agent_id` + `input` + no `priority`. New schema has `priority` + `ice_score`.\n const isLegacy = have.has(\"agent_id\") && have.has(\"input\") && !have.has(\"ice_score\");\n if (isLegacy) {\n await sqlite.execute(\"ALTER TABLE tasks RENAME TO tasks_legacy\");\n }\n } catch { /* table doesn't exist yet — fine, new CREATE will run */ }\n\n // Co-working: shared notes for team collaboration on strategies.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS notes (\n id TEXT PRIMARY KEY,\n author TEXT,\n content TEXT NOT NULL,\n workspace TEXT,\n pinned INTEGER DEFAULT 0,\n created_at TEXT NOT NULL,\n updated_at TEXT\n )\n `);\n\n // Intelligence layer: per-metric 30d baselines used for health scoring.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS metric_baselines (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n integration TEXT NOT NULL,\n metric_key TEXT NOT NULL,\n baseline_value REAL,\n baseline_period TEXT DEFAULT '30d',\n last_updated TEXT DEFAULT (datetime('now')),\n UNIQUE(integration, metric_key)\n )\n `);\n\n // Intelligence cache — funnel summary, correlations, recommendations, LLM-generated feed.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS intelligence_cache (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n cache_key TEXT UNIQUE NOT NULL,\n payload TEXT NOT NULL,\n generated_at TEXT DEFAULT (datetime('now')),\n expires_at TEXT NOT NULL\n )\n `);\n\n // App-wide key/value config: ROI inputs (avg_deal_size, est_marketing_spend),\n // workspace preferences (ultra_density, translucency, hardware_accel, etc.).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS app_config (\n key TEXT PRIMARY KEY,\n value TEXT,\n updated_at TEXT DEFAULT (datetime('now'))\n )\n `);\n\n // Metric history — rolling timeseries for delta_7d / delta_30d computations.\n // Pruned to last 60 days on insert to keep size bounded.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS metric_history (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n integration TEXT NOT NULL,\n metric_key TEXT NOT NULL,\n value REAL NOT NULL,\n recorded_at TEXT DEFAULT (datetime('now'))\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_metric_history_key ON metric_history(integration, metric_key, recorded_at DESC)`);\n\n // A5: rolling baseline columns — added on existing metric_baselines tables via\n // PRAGMA-guarded ALTER so we never fail on re-run.\n try {\n const cols = await sqlite.execute(\"PRAGMA table_info(metric_baselines)\");\n const have = new Set((cols.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n if (!have.has(\"rolling_avg\")) {\n await sqlite.execute(\"ALTER TABLE metric_baselines ADD COLUMN rolling_avg REAL\");\n }\n if (!have.has(\"sample_count\")) {\n await sqlite.execute(\"ALTER TABLE metric_baselines ADD COLUMN sample_count INTEGER DEFAULT 0\");\n }\n } catch { /* non-critical: warm-start baselines still work */ }\n\n // QA fix: per-provider key columns on llm_config so switching providers doesn't\n // overwrite the previous provider's key. PRAGMA-guarded ALTER (re-run safe).\n try {\n const cols = await sqlite.execute(\"PRAGMA table_info(llm_config)\");\n const have = new Set((cols.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n for (const col of [\"api_key_anthropic\", \"api_key_openai\", \"api_key_gemini\", \"api_key_custom\"]) {\n if (!have.has(col)) await sqlite.execute(`ALTER TABLE llm_config ADD COLUMN ${col} TEXT DEFAULT ''`);\n }\n if (!have.has(\"endpoint_custom\")) {\n await sqlite.execute(\"ALTER TABLE llm_config ADD COLUMN endpoint_custom TEXT DEFAULT ''\");\n }\n } catch { /* non-critical: legacy single-key still works */ }\n\n // Agent budget tracking — real monthly LLM-cost cap per agent.\n // current_spend incremented on each LLM call, reset at period_start rollover.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS agent_budgets (\n agent_id TEXT PRIMARY KEY,\n monthly_cap REAL DEFAULT 250,\n current_spend REAL DEFAULT 0,\n period_start TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now'))\n )\n `);\n\n // C3: agent execution log. One row per run (manual or scheduled). Latest 50 power the\n // AgentCard timeline. status: queued → running → completed | failed | cancelled.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS agent_runs (\n id TEXT PRIMARY KEY,\n agent_id TEXT NOT NULL,\n status TEXT NOT NULL,\n trigger TEXT DEFAULT 'manual',\n started_at TEXT DEFAULT (datetime('now')),\n finished_at TEXT,\n duration_ms INTEGER,\n input TEXT,\n output TEXT,\n error TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_agent_runs_agent ON agent_runs(agent_id, started_at DESC)`);\n\n // D1: customer cohorts. One row per cohort (e.g. signup month). Powers cohort-survival LTV\n // beyond the simple avg_deal × retention_months heuristic. retention_curve is a JSON array\n // [m1, m2, m3 ...] of retained customer counts. arpu = average revenue per user (monthly).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS customer_cohorts (\n id TEXT PRIMARY KEY,\n cohort_label TEXT NOT NULL,\n cohort_size INTEGER NOT NULL,\n arpu REAL NOT NULL,\n retention_curve TEXT NOT NULL,\n created_at TEXT DEFAULT (datetime('now'))\n )\n `);\n\n // D3: lead state changes — every MQL→SQL transition gets a row so we can compute\n // engagement velocity (avg days lead spent in each stage).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS lead_state_changes (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n lead_email TEXT NOT NULL,\n from_state TEXT,\n to_state TEXT NOT NULL,\n changed_at TEXT DEFAULT (datetime('now'))\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_lead_state_email ON lead_state_changes(lead_email, changed_at)`);\n\n // D5: utm_conversions — channel attribution log. Populated when a conversion fires\n // (manually pushed via POST /api/attribution or scraped from GA4 in a later phase).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS utm_conversions (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n utm_source TEXT,\n utm_medium TEXT,\n utm_campaign TEXT,\n conversion_value REAL DEFAULT 0,\n converted_at TEXT DEFAULT (datetime('now'))\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_utm_source ON utm_conversions(utm_source, converted_at DESC)`);\n\n // ─── FRAMEWORK LAYER (F1-F4): NSM, OKRs, Experiments, Tasks ─────────────────\n\n // F1: North Star Metric (singleton — only one active row; previous deleted on set)\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS north_star (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n metric_name TEXT NOT NULL,\n metric_source TEXT NOT NULL,\n metric_key TEXT,\n current_value REAL,\n target_value REAL NOT NULL,\n target_date TEXT NOT NULL,\n unit TEXT DEFAULT 'count',\n description TEXT,\n set_at TEXT DEFAULT (datetime('now')),\n set_by TEXT DEFAULT 'admin'\n )\n `);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS nsm_history (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n nsm_id INTEGER REFERENCES north_star(id) ON DELETE CASCADE,\n value REAL NOT NULL,\n recorded_at TEXT DEFAULT (datetime('now'))\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_nsm_history_id ON nsm_history(nsm_id, recorded_at DESC)`);\n\n // F2: OKRs (Objectives + Key Results)\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS objectives (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n description TEXT,\n quarter TEXT NOT NULL,\n workspace TEXT DEFAULT 'marketing',\n owner TEXT,\n status TEXT DEFAULT 'active',\n progress REAL DEFAULT 0,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now'))\n )\n `);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS key_results (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n objective_id INTEGER NOT NULL REFERENCES objectives(id) ON DELETE CASCADE,\n title TEXT NOT NULL,\n metric_source TEXT,\n metric_key TEXT,\n start_value REAL DEFAULT 0,\n current_value REAL DEFAULT 0,\n target_value REAL NOT NULL,\n unit TEXT DEFAULT 'count',\n confidence REAL DEFAULT 0.5,\n progress REAL DEFAULT 0,\n updated_at TEXT DEFAULT (datetime('now'))\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_kr_objective ON key_results(objective_id)`);\n\n // F3: ICE Experiments (ice_score + uplift_pct computed in app code — sqlite GENERATED\n // column support is uneven; safer to project them client-side from impact/confidence/ease).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS experiments (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n hypothesis TEXT,\n objective_id INTEGER REFERENCES objectives(id) ON DELETE SET NULL,\n funnel_stage TEXT,\n aarrr_lever TEXT,\n status TEXT DEFAULT 'idea',\n impact REAL DEFAULT 5,\n confidence REAL DEFAULT 5,\n ease REAL DEFAULT 5,\n owner TEXT,\n start_date TEXT,\n end_date TEXT,\n channel TEXT,\n success_metric TEXT,\n baseline_value REAL,\n result_value REAL,\n outcome TEXT,\n learnings TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now'))\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_exp_status ON experiments(status, updated_at DESC)`);\n\n // F4: Tasks (linked to OKRs / KRs / experiments — at least one for governance).\n // NOTE: the gap-closure prompt also referred to a \"tasks\" table — the older one (string id,\n // status enum 'pending|running|done|failed') is replaced by this richer schema. The two\n // were never wired to a shared UI so the swap is safe.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS tasks (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n description TEXT,\n status TEXT DEFAULT 'todo',\n priority TEXT DEFAULT 'medium',\n workspace TEXT DEFAULT 'marketing',\n assignee TEXT,\n due_date TEXT,\n objective_id INTEGER REFERENCES objectives(id) ON DELETE SET NULL,\n key_result_id INTEGER REFERENCES key_results(id) ON DELETE SET NULL,\n experiment_id INTEGER REFERENCES experiments(id) ON DELETE SET NULL,\n ice_score REAL,\n impact REAL,\n confidence REAL,\n ease REAL,\n tags TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now')),\n completed_at TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_tasks_status ON tasks(status, due_date)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_tasks_links ON tasks(experiment_id, key_result_id, objective_id)`);\n\n // OKR→Campaign→Task link: a task can belong to a campaign (the higher-level container).\n // Completing the task rolls progress up through the campaign to its objective. PRAGMA-guarded\n // ALTER so existing tasks tables gain the column without failing on re-run.\n try {\n const tc = await sqlite.execute(\"PRAGMA table_info(tasks)\");\n const tHave = new Set((tc.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n if (!tHave.has(\"campaign_id\")) await sqlite.execute(\"ALTER TABLE tasks ADD COLUMN campaign_id TEXT\");\n } catch { /* non-critical: tasks without a campaign link still work */ }\n\n // ─── INTELLIGENCE LAYER EXTENSIONS (I1, I4): Signals + Digests ──────────────\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS intent_signals (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n lead_email TEXT NOT NULL,\n lead_name TEXT,\n company TEXT,\n signal_type TEXT NOT NULL,\n signal_source TEXT NOT NULL,\n signal_strength INTEGER DEFAULT 1,\n raw_data TEXT,\n detected_at TEXT DEFAULT (datetime('now')),\n actioned INTEGER DEFAULT 0,\n actioned_at TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_signals_email ON intent_signals(lead_email, detected_at DESC)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_signals_actioned ON intent_signals(actioned, detected_at DESC)`);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS growth_digests (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n week_of TEXT NOT NULL,\n payload TEXT NOT NULL,\n nsm_value_at_generation REAL,\n generated_at TEXT DEFAULT (datetime('now'))\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_digest_week ON growth_digests(week_of DESC)`);\n\n // ─── UNIFIED CALENDAR (CAL1): standalone custom calendar entries ────────────\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS calendar_entries (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n description TEXT,\n event_date TEXT NOT NULL,\n event_time TEXT,\n end_date TEXT,\n end_time TEXT,\n event_type TEXT DEFAULT 'custom',\n workspace TEXT DEFAULT 'marketing',\n color TEXT DEFAULT 'blue',\n all_day INTEGER DEFAULT 0,\n recurrence TEXT,\n created_at TEXT DEFAULT (datetime('now'))\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_calendar_date ON calendar_entries(event_date)`);\n\n // Knowledge files — growth playbooks/frameworks/formulas injected into AI features (see api/knowledge.ts).\n // This table was missing from initDB, so the knowledge UI + /api/knowledge endpoints failed (\"no such table\").\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS knowledge_files (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n kind TEXT DEFAULT 'playbook',\n content TEXT NOT NULL,\n summary TEXT,\n targets TEXT DEFAULT '[]',\n source TEXT DEFAULT 'user',\n tokens_estimate INTEGER DEFAULT 0,\n enabled INTEGER DEFAULT 1,\n uploaded_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now'))\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_knowledge_enabled ON knowledge_files(enabled, uploaded_at DESC)`);\n\n // Action queue — human-in-the-loop execution. The AI/agents PREPARE external actions\n // (send email, publish post, post to LinkedIn, create calendar event) here; nothing is\n // sent until a human approves, at which point the integration call runs and the result\n // is recorded. status: prepared → approved → executing → done | failed | rejected.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS action_queue (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n source_type TEXT DEFAULT 'chat',\n source_id TEXT,\n integration TEXT NOT NULL,\n endpoint TEXT NOT NULL,\n payload TEXT NOT NULL,\n preview TEXT,\n title TEXT,\n workspace TEXT DEFAULT 'marketing',\n status TEXT DEFAULT 'prepared',\n result TEXT,\n task_id TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n approved_at TEXT,\n executed_at TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_action_queue_status ON action_queue(status, created_at DESC)`);\n\n // CRM: sales pipeline deals. Hybrid model — rows are auto-seeded from qualified leads\n // (getLeadScores) via POST /api/deals/sync AND can be created/edited/dragged by the user.\n // stage ∈ lead | qualified | proposal | negotiation | won | lost. lead_email links a deal back\n // to its source lead so the detail view can show that contact's intent_signals as activity.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS deals (\n id TEXT PRIMARY KEY,\n title TEXT,\n company TEXT,\n contact_name TEXT,\n contact_email TEXT,\n stage TEXT NOT NULL DEFAULT 'lead',\n amount REAL DEFAULT 0,\n currency TEXT DEFAULT 'USD',\n probability INTEGER DEFAULT 0,\n owner TEXT,\n close_date TEXT,\n source TEXT DEFAULT 'manual',\n lead_email TEXT,\n notes TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now')),\n last_activity_at TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_deals_stage ON deals(stage, updated_at DESC)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_deals_lead ON deals(lead_email)`);\n\n // ─── RELATIONAL CRM FOUNDATION (WAVE 1): Accounts + Contacts ────────────────\n // First-class company (accounts) and person (contacts) records. Deals link to them via\n // account_id + primary_contact_id, plus a many-to-many deal_contacts join (role per contact).\n // Backfilled NON-DESTRUCTIVELY from the legacy deals.company/contact_name/contact_email text\n // columns by the mig_crm_relational_v1 migration below. All tenant-scoped (tenant_id on every\n // row; every query filters/sets it). The legacy deal text columns are KEPT for back-compat.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS accounts (\n id TEXT PRIMARY KEY,\n name TEXT,\n domain TEXT,\n industry TEXT,\n size TEXT,\n website TEXT,\n owner TEXT,\n tags TEXT DEFAULT '[]',\n custom_fields TEXT DEFAULT '{}',\n notes TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_accounts_name ON accounts(tenant_id, name)`);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS contacts (\n id TEXT PRIMARY KEY,\n account_id TEXT,\n first_name TEXT,\n last_name TEXT,\n email TEXT,\n phone TEXT,\n title TEXT,\n owner TEXT,\n tags TEXT DEFAULT '[]',\n custom_fields TEXT DEFAULT '{}',\n notes TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_contacts_email ON contacts(tenant_id, email)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_contacts_account ON contacts(tenant_id, account_id)`);\n\n // Many-to-many: a deal can involve several contacts, each with a buying-committee role\n // (decision_maker | champion | influencer | user | contact; the migration uses \"primary\"\n // for the deal's primary_contact_id). Composite PK prevents duplicate links.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS deal_contacts (\n deal_id TEXT NOT NULL,\n contact_id TEXT NOT NULL,\n role TEXT DEFAULT 'contact',\n tenant_id TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n PRIMARY KEY (deal_id, contact_id)\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_deal_contacts_contact ON deal_contacts(tenant_id, contact_id)`);\n\n // deals gains account_id + primary_contact_id (guarded ALTER, re-run safe). The legacy\n // company/contact_name/contact_email columns are intentionally KEPT for back-compat.\n try {\n const dc = await sqlite.execute(\"PRAGMA table_info(deals)\");\n const dHave = new Set((dc.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n if (!dHave.has(\"account_id\")) await sqlite.execute(\"ALTER TABLE deals ADD COLUMN account_id TEXT\");\n if (!dHave.has(\"primary_contact_id\")) await sqlite.execute(\"ALTER TABLE deals ADD COLUMN primary_contact_id TEXT\");\n } catch { /* non-critical: relational links added next warm start */ }\n\n // ─── ENGAGEMENT + PIPELINE DEPTH (WAVE 2): Activities + Line Items + Stages ──\n // Unified activity timeline (logged calls/meetings/notes/emails/tasks) attachable to a\n // contact, account, and/or deal. The getTimeline() feed MERGES these rows with intent_signals\n // (by contact email) and linked tasks. All tenant-scoped (tenant_id on every row).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS activities (\n id TEXT PRIMARY KEY,\n type TEXT,\n subject TEXT,\n body TEXT,\n contact_id TEXT,\n account_id TEXT,\n deal_id TEXT,\n owner TEXT,\n due_date TEXT,\n completed INTEGER DEFAULT 0,\n occurred_at TEXT,\n created_at TEXT,\n updated_at TEXT,\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_activities_deal ON activities(tenant_id, deal_id)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_activities_contact ON activities(tenant_id, contact_id)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_activities_account ON activities(tenant_id, account_id)`);\n\n // Deal LINE ITEMS — products/services on a deal. The deal amount rolls up as SUM(amount) when\n // line items exist (else the manual deals.amount is kept). amount is persisted = quantity * unit_price.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS deal_products (\n id TEXT PRIMARY KEY,\n deal_id TEXT,\n name TEXT,\n quantity REAL DEFAULT 1,\n unit_price REAL DEFAULT 0,\n amount REAL DEFAULT 0,\n tenant_id TEXT,\n created_at TEXT DEFAULT (datetime('now'))\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_deal_products_deal ON deal_products(tenant_id, deal_id)`);\n\n // Configurable PIPELINE STAGES (label + win-probability per stage). Seeded once below with the\n // 6 existing stages so deal stage probabilities/labels become editable per tenant.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS pipeline_stages (\n id TEXT PRIMARY KEY,\n stage_key TEXT,\n label TEXT,\n probability INTEGER,\n sort_order INTEGER,\n is_won INTEGER DEFAULT 0,\n is_lost INTEGER DEFAULT 0,\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_pipeline_stages_tenant ON pipeline_stages(tenant_id, sort_order)`);\n\n // deals gains next_step + win/loss REASONS + recurring/MRR (guarded ALTER, re-run safe).\n try {\n const d2 = await sqlite.execute(\"PRAGMA table_info(deals)\");\n const d2Have = new Set((d2.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n for (const [col, def] of [\n [\"next_step\", \"TEXT\"], [\"win_reason\", \"TEXT\"], [\"lost_reason\", \"TEXT\"],\n [\"recurring_type\", \"TEXT\"], [\"mrr\", \"REAL DEFAULT 0\"],\n ] as Array<[string, string]>) {\n if (!d2Have.has(col)) await sqlite.execute(`ALTER TABLE deals ADD COLUMN ${col} ${def}`);\n }\n } catch { /* non-critical: deal next-step/reasons/MRR added next warm start */ }\n\n // tasks gains CRM links (deal_id / contact_id / account_id) so an existing Task can be a CRM\n // follow-up attached to a deal/contact/account — preserves ALL current task behavior.\n try {\n const t2 = await sqlite.execute(\"PRAGMA table_info(tasks)\");\n const t2Have = new Set((t2.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n for (const col of [\"deal_id\", \"contact_id\", \"account_id\"]) {\n if (!t2Have.has(col)) await sqlite.execute(`ALTER TABLE tasks ADD COLUMN ${col} TEXT`);\n }\n } catch { /* non-critical: CRM task links added next warm start */ }\n\n // ONE-TIME seed of the 6 default pipeline stages, gated by app_config \"mig_pipeline_stages_v1\".\n // Seeds for every tenant that already has pipeline_stages-eligible data (any present tenant_id\n // across tenants) OR at least the default tenant. Idempotent: INSERT OR IGNORE on a deterministic\n // id (tenant + stage_key) + an existence check, so a re-run never duplicates rows.\n try {\n const flag = await sqlite.execute(\"SELECT value FROM app_config WHERE key = 'mig_pipeline_stages_v1'\");\n if (flag.rows.length === 0) {\n const STAGE_SEEDS: Array<[string, string, number, number, number, number]> = [\n // stage_key, label, probability, sort_order, is_won, is_lost\n [\"lead\", \"Lead\", 10, 0, 0, 0],\n [\"qualified\", \"Qualified\", 30, 1, 0, 0],\n [\"proposal\", \"Proposal\", 50, 2, 0, 0],\n [\"negotiation\", \"Negotiation\", 70, 3, 0, 0],\n [\"won\", \"Won\", 100, 4, 1, 0],\n [\"lost\", \"Lost\", 0, 5, 0, 1],\n ];\n // Collect the set of tenants to seed: every distinct tenant on the tenants table, always\n // including t_default. Falls back to just t_default if the tenants table is empty/missing.\n const tenantIds = new Set([\"t_default\"]);\n try {\n const tns = await sqlite.execute(\"SELECT id FROM tenants\");\n for (const r of (tns.rows || [])) {\n const tid = String(Array.isArray(r) ? r[0] : (r as any).id ?? \"\").trim();\n if (tid) tenantIds.add(tid);\n }\n } catch { /* tenants table may not exist on a very fresh DB — default tenant still seeded */ }\n for (const tid of tenantIds) {\n for (const [key, label, prob, sort, isWon, isLost] of STAGE_SEEDS) {\n await sqlite.execute(\n `INSERT OR IGNORE INTO pipeline_stages (id, stage_key, label, probability, sort_order, is_won, is_lost, tenant_id)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n [\"ps_\" + tid + \"_\" + key, key, label, prob, sort, isWon, isLost, tid]\n );\n }\n }\n await sqlite.execute(\n \"INSERT OR REPLACE INTO app_config (key, value, tenant_id, updated_at) VALUES ('mig_pipeline_stages_v1', 'done', 't_default', datetime('now'))\"\n );\n }\n } catch { /* non-critical: stage seed retried next warm start (flag only set on success) */ }\n\n // ─── SALES ANALYTICS + LEAD OPS + PRODUCTIVITY (WAVE 3) ─────────────────────\n // Eight new tenant-scoped tables overlaid on the existing deals/contacts/intent_signals/users\n // foundation. All carry tenant_id on every row (every query filters/sets it) and are also added\n // to TENANT_SCOPED_TABLES below so the mig_tenant_v1 backfill covers them on legacy DBs.\n\n // A) SALES ANALYTICS ────────────────────────────────────────────────────────\n // deal_stage_history: one row per deal stage change (deals.ts logs it). Powers stage-conversion,\n // deal-velocity (time in stage), and the funnel/leaderboard analytics.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS deal_stage_history (\n id TEXT PRIMARY KEY,\n deal_id TEXT,\n from_stage TEXT,\n to_stage TEXT,\n owner TEXT,\n changed_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_deal_stage_history_deal ON deal_stage_history(tenant_id, deal_id)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_deal_stage_history_to ON deal_stage_history(tenant_id, to_stage)`);\n\n // sales_quotas: per-owner revenue target for a period. period_type ∈ month|quarter|year; period is\n // the label (e.g. 2026-Q2 or 2026-06). Powers quota-attainment (won vs target).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS sales_quotas (\n id TEXT PRIMARY KEY,\n owner TEXT,\n period TEXT,\n period_type TEXT,\n target_amount REAL DEFAULT 0,\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_sales_quotas_owner ON sales_quotas(tenant_id, owner, period)`);\n\n // pipeline_snapshots: one row PER STAGE per snapshot_date (point-in-time pipeline state). Powers\n // pipeline trend over time. weighted_amount = total_amount × stage probability at capture time.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS pipeline_snapshots (\n id TEXT PRIMARY KEY,\n snapshot_date TEXT,\n stage TEXT,\n deal_count INTEGER DEFAULT 0,\n total_amount REAL DEFAULT 0,\n weighted_amount REAL DEFAULT 0,\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_pipeline_snapshots_date ON pipeline_snapshots(tenant_id, snapshot_date)`);\n\n // B) LEAD OPS ─────────────────────────────────────────────────────────────────\n // lead_status: grade/owner/SLA overlay keyed by lead_email (one row per lead per tenant). grade ∈\n // A|B|C|D; status ∈ new|working|qualified|disqualified. sla_due_at = first-response deadline,\n // first_response_at = when the SLA clock was stopped. Indexed (tenant_id, lead_email) for upsert.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS lead_status (\n id TEXT PRIMARY KEY,\n lead_email TEXT,\n grade TEXT,\n owner TEXT,\n status TEXT DEFAULT 'new',\n first_response_at TEXT,\n sla_due_at TEXT,\n assigned_at TEXT,\n updated_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n // UNIQUE so the one-row-per-(tenant,lead) overlay can't be duplicated by a concurrent grade/assign race.\n await sqlite.execute(`CREATE UNIQUE INDEX IF NOT EXISTS idx_lead_status_email ON lead_status(tenant_id, lead_email)`);\n\n // C) PRODUCTIVITY ─────────────────────────────────────────────────────────────\n // email_templates: reusable subject/body with {{merge_field}} placeholders; rendered then handed\n // to the existing Gmail/Outlook draft path.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS email_templates (\n id TEXT PRIMARY KEY,\n name TEXT,\n subject TEXT,\n body TEXT,\n category TEXT,\n owner TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_email_templates_tenant ON email_templates(tenant_id, category)`);\n\n // sequences: a named multi-step cadence (active=1 by default).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS sequences (\n id TEXT PRIMARY KEY,\n name TEXT,\n description TEXT,\n active INTEGER DEFAULT 1,\n created_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_sequences_tenant ON sequences(tenant_id, active)`);\n\n // sequence_steps: ordered steps of a sequence. channel ∈ email|task|call. delay_days = wait after\n // the prior step. template_id optionally references an email_templates row; else inline subject/body.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS sequence_steps (\n id TEXT PRIMARY KEY,\n sequence_id TEXT,\n step_order INTEGER DEFAULT 0,\n channel TEXT DEFAULT 'email',\n delay_days INTEGER DEFAULT 0,\n template_id TEXT,\n subject TEXT,\n body TEXT,\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_sequence_steps_seq ON sequence_steps(tenant_id, sequence_id, step_order)`);\n\n // sequence_enrollments: a contact (and optionally deal) enrolled in a sequence. current_step is the\n // 0-based pointer; status ∈ active|paused|completed; next_action_at drives the cadence runner.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS sequence_enrollments (\n id TEXT PRIMARY KEY,\n sequence_id TEXT,\n contact_id TEXT,\n deal_id TEXT,\n current_step INTEGER DEFAULT 0,\n status TEXT DEFAULT 'active',\n enrolled_at TEXT DEFAULT (datetime('now')),\n next_action_at TEXT,\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_seq_enroll_seq ON sequence_enrollments(tenant_id, sequence_id, status)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_seq_enroll_contact ON sequence_enrollments(tenant_id, contact_id)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_seq_enroll_next ON sequence_enrollments(tenant_id, next_action_at)`);\n\n // ─── MARKETING WORKSPACE (WAVE 1) ─────────────────────────────────────────\n // Persona/ICP/segment library for the Marketing Audiences view. kind ∈ icp|persona|segment;\n // attributes is a JSON blob; source ∈ enrichment|manual (importPersonasFromEnrichment writes\n // 'enrichment' rows non-destructively). All tenant-scoped (tenant_id on every row).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS marketing_personas (\n id TEXT PRIMARY KEY,\n name TEXT,\n kind TEXT,\n description TEXT,\n attributes TEXT,\n source TEXT DEFAULT 'manual',\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_marketing_personas_kind ON marketing_personas(tenant_id, kind)`);\n\n // utm_links: saved campaign-tagged URLs for the UTM builder. full_url is the composed\n // base_url + utm params. All tenant-scoped (tenant_id on every row).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS utm_links (\n id TEXT PRIMARY KEY,\n name TEXT,\n base_url TEXT,\n utm_source TEXT,\n utm_medium TEXT,\n utm_campaign TEXT,\n utm_term TEXT,\n utm_content TEXT,\n full_url TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_utm_links_tenant ON utm_links(tenant_id)`);\n\n // brand_kit: one row per tenant (upsert) — voice/tone/values/dos/donts/boilerplate plus a JSON\n // palette and logo_url for the Brand Kit editor. tenant_id on every row.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS brand_kit (\n id TEXT PRIMARY KEY,\n voice TEXT,\n tone TEXT,\n brand_values TEXT,\n dos TEXT,\n donts TEXT,\n boilerplate TEXT,\n palette TEXT,\n logo_url TEXT,\n updated_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_brand_kit_tenant ON brand_kit(tenant_id)`);\n\n // ─── MARKETING CAPTURE + AUDIENCES (WAVE 2) ─────────────────────────────────\n // Six new tenant-scoped tables giving Marketing a place to CONVERT traffic (forms +\n // landing pages) and people to TARGET (segments + lists). All carry tenant_id on every\n // row (every query filters/sets it) EXCEPT the two PUBLIC read paths, which resolve the\n // owning tenant explicitly by id/slug. Added to TENANT_SCOPED_TABLES below so the\n // mig_tenant_v1 backfill covers them on legacy DBs. NEVER name a column with a SQL\n // reserved word (e.g. values/order/group) — a prior bug came from exactly that.\n\n // marketing_forms: a lead-capture form definition. fields is JSON [{name,label,type,required}].\n // asset_url = gated lead-magnet download; redirect_url = post-submit redirect. submit_count is\n // bumped on each public submission (by the form-owning tenant).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS marketing_forms (\n id TEXT PRIMARY KEY,\n name TEXT,\n fields TEXT,\n success_message TEXT,\n asset_url TEXT,\n redirect_url TEXT,\n submit_count INTEGER DEFAULT 0,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_marketing_forms_tenant ON marketing_forms(tenant_id)`);\n\n // form_submissions: one row per public submit. data is JSON of the raw posted fields.\n // tenant_id is the OWNING tenant of form_id (resolved by id at submit time — never the\n // anonymous caller's session). Indexed (tenant_id, form_id) for the submissions table.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS form_submissions (\n id TEXT PRIMARY KEY,\n form_id TEXT,\n data TEXT,\n lead_email TEXT,\n lead_name TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_form_submissions_form ON form_submissions(tenant_id, form_id)`);\n\n // landing_pages: a public landing page. slug is GLOBALLY unique (used for the public\n // /api/marketing/p/:slug render across tenants). blocks is JSON [{type,...}]. form_id\n // optionally embeds a marketing_forms form. published=1 gates the public render; view_count\n // is bumped on each public view (by the page-owning tenant).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS landing_pages (\n id TEXT PRIMARY KEY,\n slug TEXT,\n title TEXT,\n subtitle TEXT,\n blocks TEXT,\n form_id TEXT,\n theme TEXT,\n published INTEGER DEFAULT 0,\n view_count INTEGER DEFAULT 0,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_landing_pages_tenant ON landing_pages(tenant_id)`);\n // slug is GLOBALLY unique (public render resolves a page by slug across all tenants).\n await sqlite.execute(`CREATE UNIQUE INDEX IF NOT EXISTS idx_landing_pages_slug ON landing_pages(slug)`);\n\n // segments: a saved audience definition. kind ∈ dynamic|static. rules is JSON\n // [{field,op,value}] evaluated over contacts + lead_status + intent_signals within the tenant.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS segments (\n id TEXT PRIMARY KEY,\n name TEXT,\n description TEXT,\n kind TEXT,\n rules TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_segments_tenant ON segments(tenant_id)`);\n\n // marketing_lists: a named contact list. kind ∈ static|dynamic. For dynamic lists, segment_id\n // references the segment whose rules materialize the membership.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS marketing_lists (\n id TEXT PRIMARY KEY,\n name TEXT,\n kind TEXT,\n segment_id TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_marketing_lists_tenant ON marketing_lists(tenant_id)`);\n\n // list_members: membership join (a contact in a list). lead_email is the stable key when a\n // contact_id is unavailable. Indexed (tenant_id, list_id) for the members view.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS list_members (\n id TEXT PRIMARY KEY,\n list_id TEXT,\n contact_id TEXT,\n lead_email TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_list_members_list ON list_members(tenant_id, list_id)`);\n\n // ─── CONTENT + CAMPAIGN PRODUCTION ENGINE (WAVE 3) ──────────────────────────\n // Four new tenant-scoped tables powering the editorial calendar, SEO briefs, asset\n // library, and campaign budgeting/performance. All carry tenant_id on every row (every\n // query filters/sets it) and are added to TENANT_SCOPED_TABLES below so the mig_tenant_v1\n // backfill covers them on legacy DBs. NEVER name a column with a SQL reserved word.\n\n // content_items: a piece of marketing content moving through the pipeline. type ∈\n // blog|social|video|email|landing|ad; status ∈ idea|brief|draft|review|scheduled|published.\n // campaign_id links to campaigns; brief_id links to content_briefs; asset_ids is JSON of\n // marketing_assets ids. scheduled_at drives the editorial calendar; body holds the draft.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS content_items (\n id TEXT PRIMARY KEY,\n title TEXT,\n type TEXT,\n status TEXT DEFAULT 'idea',\n channel TEXT,\n campaign_id TEXT,\n brief_id TEXT,\n body TEXT,\n asset_ids TEXT DEFAULT '[]',\n owner TEXT,\n scheduled_at TEXT,\n published_at TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_content_items_status ON content_items(tenant_id, status)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_content_items_scheduled ON content_items(tenant_id, scheduled_at)`);\n\n // content_briefs: an SEO brief backing a content_item. outline/competitors/internal_links are\n // JSON or free text; word_count_target is the writer's target. content_id links back to the item.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS content_briefs (\n id TEXT PRIMARY KEY,\n content_id TEXT,\n target_keyword TEXT,\n search_intent TEXT,\n outline TEXT,\n competitors TEXT,\n internal_links TEXT,\n word_count_target INTEGER,\n notes TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_content_briefs_tenant ON content_briefs(tenant_id)`);\n\n // marketing_assets: the media/asset registry. asset_type ∈ image|video|doc|pdf|other;\n // source ∈ upload|wordpress|drive|link; tags is JSON or CSV; bytes is the file size.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS marketing_assets (\n id TEXT PRIMARY KEY,\n name TEXT,\n url TEXT,\n asset_type TEXT,\n tags TEXT,\n source TEXT DEFAULT 'upload',\n bytes INTEGER,\n created_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_marketing_assets_tenant ON marketing_assets(tenant_id)`);\n\n // campaign_budgets: planned vs actual spend per channel per period for a campaign. period is a\n // label (e.g. 2026-Q2 or 2026-06). actual_amount accrues as spend is recorded; powers pacing.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS campaign_budgets (\n id TEXT PRIMARY KEY,\n campaign_id TEXT,\n channel TEXT,\n period TEXT,\n planned_amount REAL DEFAULT 0,\n actual_amount REAL DEFAULT 0,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now')),\n tenant_id TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_campaign_budgets_campaign ON campaign_budgets(tenant_id, campaign_id)`);\n\n // I3: agents.role column for Listener/Topic/Creator/Analyst/General roles (ALTER guarded)\n try {\n const ac = await sqlite.execute(\"PRAGMA table_info(agents)\");\n const aHave = new Set((ac.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n if (!aHave.has(\"role\")) await sqlite.execute(\"ALTER TABLE agents ADD COLUMN role TEXT DEFAULT 'general'\");\n } catch { /* non-critical */ }\n\n // Part 15.3: persistent business memory (evolving learned facts). Additive on v551.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS memory (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n type TEXT DEFAULT 'fact',\n content TEXT NOT NULL,\n source TEXT DEFAULT 'manual',\n confidence REAL DEFAULT 0.7,\n pinned INTEGER DEFAULT 0,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now'))\n )\n `);\n\n // Part 1: skills (marketing playbooks) STATE table — enabled/pinned + custom skills.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS skills (\n name TEXT PRIMARY KEY,\n enabled INTEGER DEFAULT 1,\n pinned INTEGER DEFAULT 0,\n source TEXT DEFAULT 'builtin',\n category TEXT,\n description TEXT,\n body TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now'))\n )\n `);\n\n // Part 3 fix 7: experiment significance + sample_size (PRAGMA-guarded ALTER).\n try {\n const ec = await sqlite.execute(\"PRAGMA table_info(experiments)\");\n const eHave = new Set((ec.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n if (!eHave.has(\"sample_size\")) await sqlite.execute(\"ALTER TABLE experiments ADD COLUMN sample_size INTEGER\");\n if (!eHave.has(\"significance\")) await sqlite.execute(\"ALTER TABLE experiments ADD COLUMN significance REAL\");\n } catch { /* non-critical */ }\n\n // Part 14.2: agent_runs.trace JSON column (structured TraceStep[]).\n try {\n const rc = await sqlite.execute(\"PRAGMA table_info(agent_runs)\");\n const rHave = new Set((rc.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n if (!rHave.has(\"trace\")) await sqlite.execute(\"ALTER TABLE agent_runs ADD COLUMN trace TEXT\");\n } catch { /* non-critical */ }\n\n // Multi-agent CAMPAIGNS — the higher-level container the user wants: a campaign has many\n // inputs + MANY member agents that cooperate. A campaign RUN is the Director orchestrating\n // its member agents (sequential handoff or parallel) and synthesizing a final output.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS campaigns (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n workspace TEXT NOT NULL DEFAULT 'marketing',\n description TEXT,\n goal TEXT,\n channel TEXT,\n audience TEXT,\n mode TEXT DEFAULT 'sequential',\n status TEXT DEFAULT 'active',\n objective_id INTEGER,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now')),\n created_by TEXT DEFAULT 'user'\n )\n `);\n // Ordered membership: which agents are in the campaign + their pipeline order + role.\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS campaign_agents (\n campaign_id TEXT NOT NULL,\n agent_id TEXT NOT NULL,\n sequence INTEGER DEFAULT 0,\n role TEXT,\n PRIMARY KEY (campaign_id, agent_id)\n )\n `);\n // One coordinated pipeline execution (the Director run).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS campaign_runs (\n id TEXT PRIMARY KEY,\n campaign_id TEXT NOT NULL,\n status TEXT NOT NULL DEFAULT 'running',\n input TEXT,\n final_output TEXT,\n trace TEXT,\n started_at TEXT DEFAULT (datetime('now')),\n finished_at TEXT\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_campaign_runs ON campaign_runs(campaign_id, started_at DESC)`);\n // Campaign TRIGGERS + LOOP (run continuously, not just on/off). trigger_type: manual | interval\n // | schedule | event. trigger_config: JSON (e.g. {minutes:60} or {event:\"new_lead\"}). loop=1 ⇒\n // reschedule after each run. next_run_at drives the cron-based runner. (Guarded ALTER, re-run safe.)\n try {\n const cc = await sqlite.execute(\"PRAGMA table_info(campaigns)\");\n const cHave = new Set((cc.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n for (const [col, def] of [[\"trigger_type\", \"TEXT DEFAULT 'manual'\"], [\"trigger_config\", \"TEXT\"], [\"next_run_at\", \"TEXT\"], [\"last_run_at\", \"TEXT\"], [\"loop\", \"INTEGER DEFAULT 0\"]] as Array<[string, string]>) {\n if (!cHave.has(col)) await sqlite.execute(`ALTER TABLE campaigns ADD COLUMN ${col} ${def}`);\n }\n } catch { /* non-critical */ }\n // agent_runs gains campaign context: which campaign run + the handed-off context from prior agents.\n try {\n const arc = await sqlite.execute(\"PRAGMA table_info(agent_runs)\");\n const arHave = new Set((arc.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n if (!arHave.has(\"campaign_run_id\")) await sqlite.execute(\"ALTER TABLE agent_runs ADD COLUMN campaign_run_id TEXT\");\n if (!arHave.has(\"received_input\")) await sqlite.execute(\"ALTER TABLE agent_runs ADD COLUMN received_input TEXT\");\n // task_id links an agent_run back to the task it executed (POST /api/tasks/:id/run).\n if (!arHave.has(\"task_id\")) await sqlite.execute(\"ALTER TABLE agent_runs ADD COLUMN task_id TEXT\");\n } catch { /* non-critical */ }\n\n // ─── AUTH / MULTI-TENANCY FOUNDATION ───────────────────────────────────────\n // New auth tables. These have NO tenant_id (they ARE the tenant/identity layer).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS tenants (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n slug TEXT UNIQUE,\n plan TEXT DEFAULT 'trial',\n status TEXT DEFAULT 'active',\n created_at TEXT DEFAULT (datetime('now'))\n )\n `);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS users (\n id TEXT PRIMARY KEY,\n email TEXT UNIQUE NOT NULL,\n name TEXT,\n password_hash TEXT,\n avatar_url TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n last_login_at TEXT\n )\n `);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS memberships (\n tenant_id TEXT NOT NULL,\n user_id TEXT NOT NULL,\n role TEXT DEFAULT 'owner',\n created_at TEXT DEFAULT (datetime('now')),\n PRIMARY KEY (tenant_id, user_id)\n )\n `);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS sessions (\n id TEXT PRIMARY KEY,\n user_id TEXT NOT NULL,\n tenant_id TEXT NOT NULL,\n created_at TEXT DEFAULT (datetime('now')),\n expires_at TEXT,\n user_agent TEXT,\n revoked INTEGER DEFAULT 0\n )\n `);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_sessions_user ON sessions(user_id)`);\n\n // Phase D: read-only impersonation (\"view as tenant\"). A platform admin toggles this flag on\n // THEIR OWN session row; resolveSessionToken then redirects currentTenantId() to this target\n // tenant for reads only (all writes blocked by the main.ts guard). NULL = not impersonating.\n // PRAGMA-guarded ALTER (idempotent, re-run safe — same pattern as the other ALTERs above).\n try {\n const sc = await sqlite.execute(\"PRAGMA table_info(sessions)\");\n const sHave = new Set((sc.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n if (!sHave.has(\"impersonate_tenant_id\")) await sqlite.execute(\"ALTER TABLE sessions ADD COLUMN impersonate_tenant_id TEXT\");\n } catch { /* non-critical: impersonation disabled until column exists; added next warm start */ }\n\n // ─── PLATFORM SUPERADMIN LAYER (above tenants) ─────────────────────────────\n // The single, audited exception to per-tenant isolation: a platform owner who can read\n // ACROSS all tenants. users gains is_platform_admin (the master flag) + status (active/…).\n // PRAGMA-guarded ALTERs (idempotent, re-run safe — same pattern as the other ALTERs above).\n try {\n const uc = await sqlite.execute(\"PRAGMA table_info(users)\");\n const uHave = new Set((uc.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n if (!uHave.has(\"is_platform_admin\")) await sqlite.execute(\"ALTER TABLE users ADD COLUMN is_platform_admin INTEGER DEFAULT 0\");\n if (!uHave.has(\"status\")) await sqlite.execute(\"ALTER TABLE users ADD COLUMN status TEXT DEFAULT 'active'\");\n } catch { /* non-critical: master flag set by migration below on next warm start */ }\n\n // platform_audit — append-only log of every master-only action (suspend/delete/impersonate in\n // LATER phases). Created now so the audit surface exists from the start. No tenant_id: it spans\n // all tenants by design (this is the cross-tenant exception).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS platform_audit (\n id TEXT PRIMARY KEY,\n actor_user_id TEXT,\n actor_email TEXT,\n action TEXT,\n target_type TEXT,\n target_id TEXT,\n detail TEXT,\n created_at TEXT DEFAULT (datetime('now'))\n )\n `);\n\n // tenant_id column on EVERY existing business table. PRAGMA-guarded ALTER (idempotent, same\n // pattern used for other ALTERs above). Do NOT add to tenants/users/memberships/sessions.\n const TENANT_SCOPED_TABLES = [\n \"integrations\", \"llm_config\", \"agents\", \"conversations\", \"tasks\", \"tasks_legacy\",\n \"notes\", \"metric_baselines\", \"intelligence_cache\", \"app_config\", \"metric_history\",\n \"agent_budgets\", \"agent_runs\", \"customer_cohorts\", \"lead_state_changes\", \"utm_conversions\",\n \"north_star\", \"nsm_history\", \"objectives\", \"key_results\", \"experiments\", \"intent_signals\",\n \"growth_digests\", \"calendar_entries\", \"knowledge_files\", \"action_queue\", \"deals\", \"memory\",\n \"skills\", \"campaigns\", \"campaign_agents\", \"campaign_runs\",\n \"accounts\", \"contacts\", \"deal_contacts\",\n \"activities\", \"deal_products\", \"pipeline_stages\",\n \"deal_stage_history\", \"sales_quotas\", \"pipeline_snapshots\", \"lead_status\",\n \"email_templates\", \"sequences\", \"sequence_steps\", \"sequence_enrollments\",\n \"marketing_personas\", \"utm_links\", \"brand_kit\",\n \"marketing_forms\", \"form_submissions\", \"landing_pages\",\n \"segments\", \"marketing_lists\", \"list_members\",\n \"content_items\", \"content_briefs\", \"marketing_assets\", \"campaign_budgets\",\n ];\n for (const tbl of TENANT_SCOPED_TABLES) {\n try {\n const cols = await sqlite.execute(`PRAGMA table_info(${tbl})`);\n const have = new Set((cols.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n // Only ALTER if the table actually exists (PRAGMA returns 0 cols for missing tables) and lacks tenant_id.\n if (have.size > 0 && !have.has(\"tenant_id\")) {\n await sqlite.execute(`ALTER TABLE ${tbl} ADD COLUMN tenant_id TEXT`);\n }\n } catch { /* non-critical: table may not exist yet (e.g. tasks_legacy) */ }\n }\n\n // ONE-TIME backfill + seed, gated by app_config \"mig_tenant_v1\" so it runs once. Backfill\n // every business table's tenant_id to \"t_default\" and insert the default tenant row. Owner\n // user creation is left to api/auth.ts bootstrapOwner (no password seeded here).\n try {\n const flag = await sqlite.execute(\"SELECT value FROM app_config WHERE key = 'mig_tenant_v1'\");\n if (flag.rows.length === 0) {\n for (const tbl of TENANT_SCOPED_TABLES) {\n try {\n const cols = await sqlite.execute(`PRAGMA table_info(${tbl})`);\n const have = new Set((cols.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n if (have.has(\"tenant_id\")) {\n await sqlite.execute(`UPDATE ${tbl} SET tenant_id = 't_default' WHERE tenant_id IS NULL`);\n }\n } catch { /* non-critical: skip missing tables */ }\n }\n await sqlite.execute(\n \"INSERT OR IGNORE INTO tenants (id, name, slug) VALUES ('t_default', 'Default Workspace', 'default')\"\n );\n // NOTE: app_config now has tenant_id; write the migration flag scoped to t_default so the\n // gate read above (no tenant filter) still finds it on subsequent boots.\n await sqlite.execute(\n \"INSERT OR REPLACE INTO app_config (key, value, tenant_id, updated_at) VALUES ('mig_tenant_v1', 'done', 't_default', datetime('now'))\"\n );\n }\n } catch { /* non-critical: migration retried next warm start */ }\n\n // ─── PLATFORM MASTER PROMOTION (mig_platform_admin_v1) ──────────────────────\n // ONE-TIME: promote the platform owner (PLATFORM_OWNER_EMAIL env, default the bootstrapped\n // master) to is_platform_admin=1. Gated by app_config \"mig_platform_admin_v1\" so it runs once.\n // api/auth.ts bootstrapOwner ALSO sets the flag at signup time; this covers the already-existing\n // master row. Idempotent: re-running the UPDATE is harmless even if the flag write ever fails.\n try {\n const flag = await sqlite.execute(\"SELECT value FROM app_config WHERE key = 'mig_platform_admin_v1'\");\n if (flag.rows.length === 0) {\n const masterEmail = (Deno.env.get(\"PLATFORM_OWNER_EMAIL\") || \"hoangnh@arrowhitech.com\").trim().toLowerCase();\n await sqlite.execute(\n \"UPDATE users SET is_platform_admin = 1 WHERE lower(email) = ?\",\n [masterEmail]\n );\n await sqlite.execute(\n \"INSERT OR REPLACE INTO app_config (key, value, tenant_id, updated_at) VALUES ('mig_platform_admin_v1', 'done', 't_default', datetime('now'))\"\n );\n }\n } catch { /* non-critical: promotion retried next warm start (flag only set on success) */ }\n\n // ─── INTEGRATIONS UNIQUENESS → PER-TENANT (mig_integrations_v2) ──────────────\n // The original integrations table has `name TEXT NOT NULL UNIQUE` (a GLOBAL unique\n // constraint). Multi-tenant needs each tenant to own its OWN 'google'/'outlook'/etc.\n // row, so uniqueness must be PER TENANT: UNIQUE(tenant_id, name). SQLite cannot ALTER a\n // UNIQUE constraint in place, so we do a ONE-TIME guarded table rebuild gated by an\n // app_config flag (\"mig_integrations_v2\"). Idempotent + safe on the live DB: we only\n // rebuild when the flag is absent AND the live table still carries the global UNIQUE(name)\n // index. By this point Stage 1's ALTER + backfill guarantee every existing integrations\n // row already has tenant_id='t_default', so the copy preserves correct ownership.\n try {\n const flag = await sqlite.execute(\"SELECT value FROM app_config WHERE key = 'mig_integrations_v2'\");\n if (flag.rows.length === 0) {\n // Confirm the table exists before rebuilding. A FRESH DB already gets the per-tenant\n // shape from the top-level CREATE (tenant_id present), so detect the OLD shape — the\n // global UNIQUE(name) index lacks the tenant_id column — and only rebuild then.\n const icols = await sqlite.execute(\"PRAGMA table_info(integrations)\");\n const iHave = new Set((icols.rows || []).map((r: any) => String(Array.isArray(r) ? r[1] : r.name)));\n let needsRebuild = false;\n if (iHave.size > 0) {\n // index_list → for each unique index, index_info tells us its columns. The legacy global\n // constraint indexes only (name); the new one indexes (tenant_id, name).\n try {\n const idxList = await sqlite.execute(\"PRAGMA index_list(integrations)\");\n for (const row of (idxList.rows || [])) {\n const idxName = String(Array.isArray(row) ? row[1] : row.name);\n const idxUnique = Number(Array.isArray(row) ? row[2] : row.unique);\n if (!idxUnique) continue;\n const info = await sqlite.execute(`PRAGMA index_info(${idxName})`);\n const idxCols = (info.rows || []).map((r: any) => String(Array.isArray(r) ? r[2] : r.name));\n // Old-shape: a unique index over exactly [name] with no tenant_id ⇒ rebuild required.\n if (idxCols.includes(\"name\") && !idxCols.includes(\"tenant_id\")) needsRebuild = true;\n }\n } catch { needsRebuild = true; /* if we can't introspect, rebuild to be safe */ }\n }\n if (needsRebuild) {\n // Build v2 with the SAME columns (now including tenant_id) but UNIQUE(tenant_id, name).\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS integrations_v2 (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n api_key TEXT,\n api_secret TEXT,\n access_token TEXT,\n refresh_token TEXT,\n extra_config TEXT,\n connected_at TEXT,\n updated_at TEXT,\n tenant_id TEXT,\n UNIQUE(tenant_id, name)\n )\n `);\n // Copy every row (existing rows already carry tenant_id='t_default' from Stage 1).\n await sqlite.execute(`\n INSERT OR IGNORE INTO integrations_v2\n (id, name, api_key, api_secret, access_token, refresh_token, extra_config, connected_at, updated_at, tenant_id)\n SELECT id, name, api_key, api_secret, access_token, refresh_token, extra_config, connected_at, updated_at,\n COALESCE(tenant_id, 't_default')\n FROM integrations\n `);\n await sqlite.execute(\"DROP TABLE integrations\");\n await sqlite.execute(\"ALTER TABLE integrations_v2 RENAME TO integrations\");\n }\n await sqlite.execute(\n \"INSERT OR REPLACE INTO app_config (key, value, tenant_id, updated_at) VALUES ('mig_integrations_v2', 'done', 't_default', datetime('now'))\"\n );\n }\n } catch { /* non-critical: rebuild retried next warm start (flag only set on success) */ }\n\n // ─── RELATIONAL CRM BACKFILL (mig_crm_relational_v1) ────────────────────────\n // ONE-TIME, gated by app_config \"mig_crm_relational_v1\". For EVERY existing deal, derive the\n // relational records NON-DESTRUCTIVELY from its legacy text fields:\n // • upsert an account by (tenant_id, lower(company)) [skip if company empty]\n // • upsert a contact by (tenant_id, lower(contact_email)) [skip if email empty], name from\n // contact_name, linked to that account\n // • set deal.account_id + deal.primary_contact_id, and insert a deal_contacts(role='primary') row\n // Runs at boot under the default ctx, so it is a GLOBAL pass: it reads each deal's OWN tenant_id\n // and writes the new rows carrying THAT tenant_id (never the boot ctx's). Fully idempotent —\n // existence checks + INSERT OR IGNORE — and never deletes/edits existing deal data.\n try {\n const flag = await sqlite.execute(\"SELECT value FROM app_config WHERE key = 'mig_crm_relational_v1'\");\n if (flag.rows.length === 0) {\n // Pull every deal with its own tenant_id + legacy text fields. SELECT * keeps this robust\n // regardless of column order; we read fields by name from the row object.\n const dealsRes = await sqlite.execute(\n \"SELECT id, tenant_id, company, contact_name, contact_email FROM deals\"\n );\n const dealRows = (dealsRes.rows || []) as any[];\n for (const row of dealRows) {\n // libSQL returns array OR object rows depending on driver — read defensively by index/name.\n const dealId = String(Array.isArray(row) ? row[0] : row.id ?? \"\");\n const tenantId = String((Array.isArray(row) ? row[1] : row.tenant_id) ?? \"t_default\") || \"t_default\";\n const company = String((Array.isArray(row) ? row[2] : row.company) ?? \"\").trim();\n const contactName = String((Array.isArray(row) ? row[3] : row.contact_name) ?? \"\").trim();\n const contactEmail = String((Array.isArray(row) ? row[4] : row.contact_email) ?? \"\").trim();\n if (!dealId) continue;\n\n let accountId: string | null = null;\n let contactId: string | null = null;\n\n // ── ACCOUNT upsert by (tenant_id, lower(company)) ──\n if (company) {\n const existAcct = await sqlite.execute(\n \"SELECT id FROM accounts WHERE tenant_id = ? AND lower(name) = lower(?) LIMIT 1\",\n [tenantId, company]\n );\n if (existAcct.rows.length > 0) {\n const ar = existAcct.rows[0] as any;\n accountId = String(Array.isArray(ar) ? ar[0] : ar.id);\n } else {\n accountId = crypto.randomUUID();\n await sqlite.execute(\n `INSERT INTO accounts (id, name, tags, custom_fields, created_at, updated_at, tenant_id)\n VALUES (?, ?, '[]', '{}', datetime('now'), datetime('now'), ?)`,\n [accountId, company, tenantId]\n );\n }\n }\n\n // ── CONTACT upsert by (tenant_id, lower(contact_email)) ──\n if (contactEmail) {\n const existContact = await sqlite.execute(\n \"SELECT id, account_id FROM contacts WHERE tenant_id = ? AND lower(email) = lower(?) LIMIT 1\",\n [tenantId, contactEmail]\n );\n if (existContact.rows.length > 0) {\n const cr = existContact.rows[0] as any;\n contactId = String(Array.isArray(cr) ? cr[0] : cr.id);\n const existingAcctId = Array.isArray(cr) ? cr[1] : cr.account_id;\n // Backfill the contact's account link if it has none yet and we found one here.\n if (accountId && (existingAcctId === null || existingAcctId === undefined || existingAcctId === \"\")) {\n await sqlite.execute(\n \"UPDATE contacts SET account_id = ?, updated_at = datetime('now') WHERE id = ? AND tenant_id = ?\",\n [accountId, contactId, tenantId]\n );\n }\n } else {\n // Split contact_name into first / last (first token = first name, remainder = last).\n let firstName = \"\", lastName = \"\";\n if (contactName) {\n const parts = contactName.split(/\\s+/);\n firstName = parts.shift() || \"\";\n lastName = parts.join(\" \");\n }\n contactId = crypto.randomUUID();\n await sqlite.execute(\n `INSERT INTO contacts (id, account_id, first_name, last_name, email, tags, custom_fields, created_at, updated_at, tenant_id)\n VALUES (?, ?, ?, ?, ?, '[]', '{}', datetime('now'), datetime('now'), ?)`,\n [contactId, accountId, firstName, lastName, contactEmail, tenantId]\n );\n }\n }\n\n // ── Link the deal: set account_id / primary_contact_id only if still empty (idempotent) ──\n if (accountId || contactId) {\n await sqlite.execute(\n `UPDATE deals\n SET account_id = COALESCE(NULLIF(account_id, ''), ?),\n primary_contact_id = COALESCE(NULLIF(primary_contact_id, ''), ?)\n WHERE id = ? AND tenant_id = ?`,\n [accountId, contactId, dealId, tenantId]\n );\n }\n\n // ── deal_contacts(role='primary') join row (INSERT OR IGNORE on composite PK) ──\n if (contactId) {\n await sqlite.execute(\n `INSERT OR IGNORE INTO deal_contacts (deal_id, contact_id, role, tenant_id, created_at)\n VALUES (?, ?, 'primary', ?, datetime('now'))`,\n [dealId, contactId, tenantId]\n );\n }\n }\n await sqlite.execute(\n \"INSERT OR REPLACE INTO app_config (key, value, tenant_id, updated_at) VALUES ('mig_crm_relational_v1', 'done', 't_default', datetime('now'))\"\n );\n }\n } catch { /* non-critical: relational backfill retried next warm start (flag only set on success) */ }\n\n // Seed default LLM config if not exists\n const existing = await sqlite.execute(\"SELECT id FROM llm_config WHERE id = 'default'\");\n if (existing.rows.length === 0) {\n await sqlite.execute(\n \"INSERT INTO llm_config (id, provider, api_key, model, updated_at) VALUES ('default', 'anthropic', '', 'claude-sonnet-4-6', ?)\",\n [new Date().toISOString()]\n );\n }\n\n // Demo-agent seeding disabled — starting from a clean agents table.\n // Re-enable by uncommenting the call below.\n // await seedDefaultAgents();\n}\n\n// The starter \"demo\" agents seeded on first boot. Exported so the admin \"Remove demo data\"\n// route can identify + remove untouched seed rows (matched by name+description+system_prompt,\n// so a user-renamed/edited agent is never deleted).\nexport const DEFAULT_AGENT_SEEDS = [\n {\n name: \"SEO Analyst\",\n workspace: \"marketing\",\n description: \"Analyzes SEO performance using Ahrefs and Google Search Console data\",\n system_prompt: \"You are an expert SEO analyst. Analyze search performance data, identify opportunities, and provide actionable recommendations to improve organic search rankings.\",\n tools: JSON.stringify([\"ahrefs\", \"gsc\", \"ga4\"]),\n model: \"claude-sonnet-4-6\",\n },\n {\n name: \"Content Creator\",\n workspace: \"marketing\",\n description: \"Creates and manages content for WordPress, YouTube, and social media\",\n system_prompt: \"You are a creative content strategist. Help plan, write, and optimize content for blogs, videos, and social media platforms to drive engagement and conversions.\",\n tools: JSON.stringify([\"wordpress\", \"youtube\", \"ga4\"]),\n model: \"claude-sonnet-4-6\",\n },\n {\n name: \"Analytics Reporter\",\n workspace: \"marketing\",\n description: \"Generates reports from GA4 and Search Console data\",\n system_prompt: \"You are a data analyst specializing in digital marketing analytics. Create insightful reports from GA4 and Search Console data to track KPIs and identify growth opportunities.\",\n tools: JSON.stringify([\"ga4\", \"gsc\", \"ahrefs\"]),\n model: \"claude-sonnet-4-6\",\n },\n {\n name: \"LinkedIn Outreach\",\n workspace: \"sales\",\n description: \"Manages LinkedIn prospecting and connection campaigns\",\n system_prompt: \"You are a sales development expert specializing in LinkedIn outreach. Help craft personalized connection requests, follow-up messages, and engagement strategies to build pipeline.\",\n tools: JSON.stringify([\"linkedin\", \"outlook\"]),\n model: \"claude-sonnet-4-6\",\n },\n {\n name: \"Lead Researcher\",\n workspace: \"sales\",\n description: \"Researches prospects using LinkedIn and web data\",\n system_prompt: \"You are a research specialist who finds and qualifies sales leads. Analyze LinkedIn profiles, company data, and online presence to identify ideal prospects and gather intelligence for sales outreach.\",\n tools: JSON.stringify([\"linkedin\"]),\n model: \"claude-sonnet-4-6\",\n },\n {\n name: \"Email Composer\",\n workspace: \"sales\",\n description: \"Drafts and sends personalized sales emails via Outlook\",\n system_prompt: \"You are a sales email expert who crafts compelling, personalized outreach emails. Write emails that are concise, value-focused, and drive response rates while maintaining brand voice.\",\n tools: JSON.stringify([\"outlook\", \"linkedin\"]),\n model: \"claude-sonnet-4-6\",\n },\n];\n\nasync function seedDefaultAgents() {\n const existing = await sqlite.execute(\"SELECT id FROM agents LIMIT 1\");\n if (existing.rows.length > 0) return;\n\n const now = new Date().toISOString();\n for (const agent of DEFAULT_AGENT_SEEDS) {\n await sqlite.execute(\n `INSERT INTO agents (id, name, workspace, description, system_prompt, tools, model, enabled, created_at, updated_at, created_by)\n VALUES (?, ?, ?, ?, ?, ?, ?, 1, ?, ?, ?)`,\n [crypto.randomUUID(), agent.name, agent.workspace, agent.description, agent.system_prompt, agent.tools, agent.model, now, now, \"user\"]\n );\n }\n}\n\n",[449],"cf768a30-5e7b-11f1-a326-1607ee4eb77e","cron_entry.ts","fb10767e-5b1a-11f1-b807-ee650bb23af1",925,["D",1780402127969],"// Scheduled entrypoint — deploy this file as a Val Town INTERVAL/CRON trigger (separate from\n// the HTTP val in main.ts). A single file can't be both the HTTP handler AND the scheduled\n// trigger, which is why the execution engine never ran on its own before: cron.ts had a default\n// export but nothing scheduled it.\n//\n// What it does each tick:\n// 1) processPendingRuns() — runs the LLM tool-loop for any agent_runs with status='pending'\n// (external sends still go to the human-approval action_queue; nothing auto-sends).\n// 2) syncObjectivesFromFunnel() — refreshes + persists KR/objective progress from live funnel\n// data (the GET /api/okrs list no longer writes on read, so this keeps stored progress fresh).\n//\n// Schedule: set the interval in the Val Town dashboard (Triggers → e.g. every 5 minutes).\nimport { initDB } from \"./db.ts\";\nimport { processPendingRuns } from \"./cron.ts\";\nimport { syncObjectivesFromFunnel } from \"./api/okrs.ts\";\nimport { processCampaignTriggers } from \"./api/campaigns.ts\";\n\n// Crash-proof scheduled tick. A single failure (DB 429, a bad run, a flaky integration)\n// must be logged and swallowed so the default export NEVER throws to the Val Town runtime\n// (an uncaught throw kills the tick silently and can disable the trigger). initDB() and each\n// unit of work are guarded INDEPENDENTLY so one failing does not skip the others.\nexport default async function (): Promise {\n // 1) Ensure the DB is ready. If this fails (e.g. DB 429), we cannot safely run the\n // tenant-scoped work below, so log and return — but never throw.\n try {\n await initDB();\n } catch (err) {\n console.error(\"[cron] initDB failed; skipping this tick:\", err);\n return;\n }\n\n // 2) Process pending agent runs (external sends still go to the human-approval queue).\n let runs = { processed: 0, failed: 0 };\n try {\n runs = await processPendingRuns(5);\n } catch (err) {\n console.error(\"[cron] processPendingRuns failed:\", err);\n }\n\n // 3) Fire scheduled/looping campaigns on the cron tick (after agent runs are processed).\n try {\n await processCampaignTriggers(2);\n } catch (err) {\n console.error(\"[cron] processCampaignTriggers failed:\", err);\n }\n\n // 4) Refresh + persist KR/objective progress from live funnel data.\n let okr = { objectives: 0, key_results: 0 };\n try {\n okr = await syncObjectivesFromFunnel();\n } catch (err) {\n console.error(\"[cron] syncObjectivesFromFunnel failed:\", err);\n }\n\n console.log(\n `[cron] runs processed=${runs.processed} failed=${runs.failed}; ` +\n `okr synced objectives=${okr.objectives} key_results=${okr.key_results}`,\n );\n}\n",[457],"cfec26aa-5e7b-11f1-a9e2-1607ee4eb77e","cron.ts","50e655da-5a69-11f1-ab8c-ee650bb23af1",926,["D",1780402128741],"// Execution engine — the missing piece that makes agents actually RUN.\n// Deploy as a val.town interval val (default export runs on a schedule, e.g. every 1–5 min),\n// or trigger manually via POST /api/agents/run-pending (wired in router.ts).\n//\n// It polls agent_runs for status='pending', loads the agent config, and runs an LLM\n// tool-loop reusing chat.ts's buildTools()/executeTool(). External sends still go to the\n// human-approval action_queue (the tools enqueue, they don't send) — so the engine is safe.\nimport { sqlite, tenantStore } from \"./db.ts\";\nimport { getLLMConfig, callLLM } from \"./api/llm.ts\";\nimport { getAgent } from \"./api/agents.ts\";\nimport { buildTools, executeTool } from \"./api/chat.ts\";\nimport { getSkillsIndex } from \"./api/skills.ts\";\nimport { captureMemoryFromConversation } from \"./api/memory.ts\";\nimport { getCompanyContextString } from \"./api/company.ts\";\n\nconst ENGINE_SYSTEM_SUFFIX =\n \"\\n\\nYou can ACT using tools. External sends (email / LinkedIn / WordPress) are QUEUED for human \" +\n \"approval — prepare them and they will appear in Approvals; they will NOT send until a human approves. \" +\n \"Create tasks and schedule calendar events directly. Take the single next-best action toward the goal.\";\n\nexport async function processPendingRuns(limit = 3): Promise<{ processed: number; failed: number }> {\n let processed = 0;\n let failed = 0;\n let rows: any[] = [];\n // Fetch the marketing skills index once per invocation; append to the agent system prompt\n // so the autonomous agent can apply_skill on a match. Empty index = no-op.\n const skillsIdx = await getSkillsIndex({ maxChars: 5000 }).catch(() => \"\");\n const skillsSuffix = skillsIdx\n ? \"\\n\\n\" + skillsIdx + \"\\n\\nWhen a request matches a skill above, call apply_skill with that skill name before acting.\"\n : \"\";\n // Unified business context: prepended to every autonomous agent's system prompt so each run\n // knows the company. Cheap single app_config read; empty string on any error = no-op.\n const companyCtx = await getCompanyContextString(2000).catch(() => \"\");\n try {\n const r = await sqlite.execute(\n \"SELECT id, agent_id, input, tenant_id FROM agent_runs WHERE status = 'pending' ORDER BY started_at ASC LIMIT ?\",\n [limit],\n );\n rows = (r.rows || []) as any[];\n } catch {\n return { processed, failed };\n }\n\n for (const row of rows) {\n const runId = String(row[0]);\n const agentId = String(row[1]);\n const input = row[2] ? String(row[2]) : \"\";\n // MULTI-TENANT CORRECTNESS: cron runs with NO active tenant store, so currentTenantId()\n // would default to t_default and every tenant's pending runs would be processed (and their\n // tool calls / data reads/writes scoped) under t_default. Read THIS row's tenant_id and run\n // the whole processing body inside tenantStore.run so the agent executes in ITS OWN tenant\n // scope. Backfilled/legacy rows with NULL tenant_id fall back to t_default (current behavior).\n const tenantId = row[3] ? String(row[3]) : \"t_default\";\n const ctx = { tenantId, userId: \"system\", email: \"system\", role: \"owner\" as const };\n // Per-run result so the outer counters update after the scoped body returns.\n const r = await tenantStore.run(ctx, async (): Promise<{ ok: boolean }> => {\n // Wrapped so one run's UPDATE failure can't abort the drain.\n try {\n await sqlite.execute(\"UPDATE agent_runs SET status='running' WHERE id=?\", [runId]);\n } catch { /* status flip best-effort; continue processing */ }\n // Part 14.2: structured execution trace (TraceStep[]) — hoisted so a partial trace can be\n // persisted in the catch block on failure. Reset per run.\n const trace: any[] = [];\n try {\n const agent = await getAgent(agentId);\n const llmConfig = await getLLMConfig();\n if (!(llmConfig as any).api_key) throw new Error(\"No LLM API key configured\");\n\n const systemPrompt =\n (companyCtx ? companyCtx + \"\\n\\n---\\n\\n\" : \"\") +\n (agent?.system_prompt || \"You are an autonomous marketing & sales agent.\") + ENGINE_SYSTEM_SUFFIX + skillsSuffix;\n const messages: any[] = [{\n role: \"user\",\n content: input || `Run agent \"${agent?.name || agentId}\". Decide and prepare the next best action toward its goal.`,\n }];\n\n const tools = buildTools();\n let llm = await callLLM(llmConfig, messages, { systemPrompt, tools, maxTokens: 2048 });\n const actionLog: string[] = [];\n let rounds = 0;\n while (llm.tool_calls && llm.tool_calls.length > 0 && rounds < 4) {\n rounds++;\n trace.push({ t: \"round\", n: rounds, ts: new Date().toISOString() });\n messages.push({ role: \"assistant\", content: llm.content || \"\", tool_calls: llm.tool_calls });\n for (const tc of llm.tool_calls) {\n let args: Record = {};\n try {\n args = typeof tc.function.arguments === \"string\"\n ? JSON.parse(tc.function.arguments)\n : (tc.function.arguments || {});\n } catch { args = {}; }\n const toolStart = performance.now();\n const res = await executeTool(tc.function.name, args, llmConfig);\n const ms = Math.round(performance.now() - toolStart);\n actionLog.push(`${tc.function.name}: ${res}`);\n trace.push({\n t: \"tool\",\n name: tc.function.name,\n args_preview: JSON.stringify(args).slice(0, 300),\n result_preview: String(res).slice(0, 300),\n ok: true,\n ms,\n ts: new Date().toISOString(),\n });\n messages.push({ role: \"tool\", tool_call_id: tc.id, content: res });\n }\n llm = await callLLM(llmConfig, messages, { systemPrompt, tools, maxTokens: 2048 });\n }\n\n const output = ((llm.content || \"\") + (actionLog.length ? \"\\n\\n[actions]\\n\" + actionLog.join(\"\\n\") : \"\")).slice(0, 8000);\n trace.push({ t: \"message\", role: \"assistant\", preview: String(output).slice(0, 300), ts: new Date().toISOString() });\n // Per-run status UPDATE in its own try/catch so one failure does not abort the drain.\n try {\n await sqlite.execute(\n \"UPDATE agent_runs SET status='completed', finished_at=datetime('now'), output=?, trace=? WHERE id=?\",\n [output, JSON.stringify(trace), runId],\n );\n } catch { /* completion write best-effort; run already executed */ }\n // Fire-and-forget: distill durable business facts from this completed run into memory.\n captureMemoryFromConversation([\n { role: \"user\", content: messages[0]?.content || input },\n { role: \"assistant\", content: llm.content || output },\n ]).catch(() => {});\n return { ok: true };\n } catch (e: any) {\n // Part 14.2: persist the partial trace captured before the failure.\n await sqlite.execute(\n \"UPDATE agent_runs SET status='failed', finished_at=datetime('now'), error=?, trace=? WHERE id=?\",\n [String(e?.message || e), JSON.stringify(trace), runId],\n ).catch(() => {});\n return { ok: false };\n }\n });\n if (r.ok) processed++; else failed++;\n }\n return { processed, failed };\n}\n\n// val.town interval-val entrypoint.\nexport default async function (): Promise {\n const result = await processPendingRuns(3);\n console.log(`[cron] agent runs processed=${result.processed} failed=${result.failed}`);\n}\n",[464],"09d7b480-5f15-11f1-9609-1607ee4eb77e","app_modules.ts","09d7b534-5f15-11f1-9609-1607ee4eb77e",1006,["D",1780467938900],"// Frontend ES-module route table — extracted from router.ts to keep router under val.town's\n// 80000-byte/file hard cap. Each /api/app-* path maps to a get*JS() that returns the browser\n// ES-module source string; the SPA shell lazy-imports these. Add new frontend modules HERE\n// (one import + one map entry) so router.ts never grows. serveAppModule() returns the module\n// source for a known path, or null when the path is not a frontend module route.\nimport { getAppJS } from \"./frontend_js.ts\";\nimport { getUIJS } from \"./frontend_ui.ts\";\nimport { getChartsJS } from \"./frontend_charts.ts\";\nimport { getRenderersJS } from \"./frontend_renderers.ts\";\nimport { getRenderers2JS } from \"./frontend_renderers2.ts\";\nimport { getCRMJS } from \"./frontend_crm.ts\";\nimport { getCRM2JS } from \"./frontend_crm2.ts\";\nimport { getMarketing2JS } from \"./frontend_marketing2.ts\";\nimport { getMarketing3JS } from \"./frontend_marketing3.ts\";\nimport { getPagesJS } from \"./frontend_pages.ts\";\nimport { getCommandJS } from \"./frontend_command.ts\";\nimport { getIntelligenceJS } from \"./frontend_intelligence.ts\";\nimport { getSettingsJS } from \"./frontend_settings.ts\";\nimport { getWidgetsJS } from \"./frontend_widgets.ts\";\nimport { getObjectivesJS } from \"./frontend_objectives.ts\";\nimport { getCalendarJS } from \"./frontend_calendar.ts\";\nimport { getExperimentsJS } from \"./frontend_experiments.ts\";\nimport { getSkillsJS } from \"./frontend_skills.ts\";\nimport { getWorldJS } from \"./frontend_world.ts\";\nimport { getWorldSceneJS } from \"./frontend_world_scene.ts\";\nimport { getWorldOfficeJS } from \"./frontend_world_office.ts\";\nimport { getWorldAgentsJS } from \"./frontend_world_agents.ts\";\nimport { getWorldUIJS } from \"./frontend_world_ui.ts\";\nimport { getWorldDashJS } from \"./frontend_world_dash.ts\";\nimport { getCampaignsJS } from \"./frontend_campaigns.ts\";\nimport { getTasksJS } from \"./frontend_tasks.ts\";\nimport { getKnowledgeGraphJS } from \"./frontend_knowledge_graph.ts\";\nimport { getApprovalsJS } from \"./frontend_approvals.ts\";\nimport { getPlatformJS } from \"./frontend_platform.ts\";\n\nconst MODULE_ROUTES: Record string> = {\n \"/api/app-js\": getAppJS,\n \"/api/app-ui\": getUIJS,\n \"/api/app-charts\": getChartsJS,\n \"/api/app-renderers\": getRenderersJS,\n \"/api/app-renderers2\": getRenderers2JS,\n \"/api/app-pages\": getPagesJS,\n \"/api/app-command\": getCommandJS,\n \"/api/app-intelligence\": getIntelligenceJS,\n \"/api/app-settings\": getSettingsJS,\n \"/api/app-widgets\": getWidgetsJS,\n \"/api/app-objectives\": getObjectivesJS,\n \"/api/app-calendar\": getCalendarJS,\n \"/api/app-experiments\": getExperimentsJS,\n \"/api/app-campaigns\": getCampaignsJS,\n \"/api/app-tasks\": getTasksJS,\n \"/api/app-knowledge-graph\": getKnowledgeGraphJS,\n \"/api/app-approvals\": getApprovalsJS,\n \"/api/app-crm\": getCRMJS,\n \"/api/app-crm2\": getCRM2JS,\n \"/api/app-marketing2\": getMarketing2JS,\n \"/api/app-marketing3\": getMarketing3JS,\n \"/api/app-skills\": getSkillsJS,\n \"/api/app-world\": getWorldJS,\n \"/api/app-world-scene\": getWorldSceneJS,\n \"/api/app-world-office\": getWorldOfficeJS,\n \"/api/app-world-agents\": getWorldAgentsJS,\n \"/api/app-world-ui\": getWorldUIJS,\n \"/api/app-world-dash\": getWorldDashJS,\n \"/api/app-platform\": getPlatformJS,\n};\n\n// Return the browser module source for a frontend route, or null if pathname is not one.\nexport function serveAppModule(pathname: string): string | null {\n const fn = MODULE_ROUTES[pathname];\n return fn ? fn() : null;\n}\n",[471],"eb52f0ae-5d6d-11f1-95b0-1607ee4eb77e","skills","00cb9425-5deb-432c-b10f-0fcd3d61109e",644,["D",1780286210534],"directory",[478],"d0f43d42-5b4e-11f1-8d86-ee650bb23af1","renderers","d81e0fb0-4134-482f-8b60-863ef03f710e",520,["D",1780052949625],[485],"156bfa70-56ca-11f1-8a9a-ee650bb23af1","api","e712dcc1-c69e-4e42-a401-18299fcf7843",["D",1779556136787],[491],"pulls","branches","forks","envVars",{"_502":220,"_504":62},"connections",{"_502":348,"_503":62},"count","unfilledCount","emptyCount",{"_42":490,"_31":491,"_29":492,"_175":-5,"_40":41,"_39":266,"_177":58,"_37":1687,"_13":62,"_33":482,"_35":-5,"_23":24,"_181":-5,"_664":1688,"_26":1689},{"_42":1682,"_31":1560,"_29":1554,"_175":492,"_40":41,"_39":1683,"_177":58,"_37":1684,"_13":62,"_33":482,"_35":-5,"_23":24,"_181":-5,"_664":1685,"_26":1686},{"_42":1674,"_31":1675,"_29":1676,"_175":1554,"_40":41,"_39":1677,"_177":58,"_37":1678,"_13":266,"_33":34,"_35":1679,"_23":24,"_181":-5,"_664":1680,"_26":1681},{"_42":1666,"_31":1667,"_29":1668,"_175":1554,"_40":41,"_39":1669,"_177":24,"_37":1670,"_13":179,"_33":34,"_35":1671,"_23":24,"_181":-5,"_664":1672,"_26":1673},{"_42":1659,"_31":1127,"_29":1660,"_175":1554,"_40":41,"_39":1661,"_177":58,"_37":1662,"_13":266,"_33":34,"_35":1663,"_23":24,"_181":-5,"_664":1664,"_26":1665},{"_42":1652,"_31":1119,"_29":1653,"_175":1554,"_40":41,"_39":1654,"_177":58,"_37":1655,"_13":348,"_33":34,"_35":1656,"_23":24,"_181":-5,"_664":1657,"_26":1658},{"_42":1645,"_31":1111,"_29":1646,"_175":1554,"_40":41,"_39":1647,"_177":58,"_37":1648,"_13":303,"_33":34,"_35":1649,"_23":24,"_181":-5,"_664":1650,"_26":1651},{"_42":1638,"_31":1103,"_29":1639,"_175":1554,"_40":41,"_39":1640,"_177":58,"_37":1641,"_13":212,"_33":34,"_35":1642,"_23":24,"_181":-5,"_664":1643,"_26":1644},{"_42":1631,"_31":1095,"_29":1632,"_175":1554,"_40":41,"_39":1633,"_177":58,"_37":1634,"_13":62,"_33":34,"_35":1635,"_23":24,"_181":-5,"_664":1636,"_26":1637},{"_42":1624,"_31":1087,"_29":1625,"_175":1554,"_40":41,"_39":1626,"_177":58,"_37":1627,"_13":204,"_33":34,"_35":1628,"_23":24,"_181":-5,"_664":1629,"_26":1630},{"_42":1617,"_31":1079,"_29":1618,"_175":1554,"_40":41,"_39":1619,"_177":58,"_37":1620,"_13":348,"_33":34,"_35":1621,"_23":24,"_181":-5,"_664":1622,"_26":1623},{"_42":1610,"_31":1071,"_29":1611,"_175":1554,"_40":41,"_39":1612,"_177":58,"_37":1613,"_13":212,"_33":34,"_35":1614,"_23":24,"_181":-5,"_664":1615,"_26":1616},{"_42":1603,"_31":1063,"_29":1604,"_175":1554,"_40":41,"_39":1605,"_177":58,"_37":1606,"_13":258,"_33":34,"_35":1607,"_23":24,"_181":-5,"_664":1608,"_26":1609},{"_42":1596,"_31":1055,"_29":1597,"_175":1554,"_40":41,"_39":1598,"_177":58,"_37":1599,"_13":212,"_33":34,"_35":1600,"_23":24,"_181":-5,"_664":1601,"_26":1602},{"_42":1589,"_31":1047,"_29":1590,"_175":1554,"_40":41,"_39":1591,"_177":58,"_37":1592,"_13":430,"_33":34,"_35":1593,"_23":24,"_181":-5,"_664":1594,"_26":1595},{"_42":1582,"_31":1039,"_29":1583,"_175":1554,"_40":41,"_39":1584,"_177":58,"_37":1585,"_13":62,"_33":34,"_35":1586,"_23":24,"_181":-5,"_664":1587,"_26":1588},{"_42":1575,"_31":1031,"_29":1576,"_175":1554,"_40":41,"_39":1577,"_177":58,"_37":1578,"_13":62,"_33":34,"_35":1579,"_23":24,"_181":-5,"_664":1580,"_26":1581},{"_42":1568,"_31":1023,"_29":1569,"_175":1554,"_40":41,"_39":1570,"_177":58,"_37":1571,"_13":62,"_33":34,"_35":1572,"_23":24,"_181":-5,"_664":1573,"_26":1574},{"_42":1561,"_31":1015,"_29":1562,"_175":1554,"_40":41,"_39":1563,"_177":58,"_37":1564,"_13":303,"_33":34,"_35":1565,"_23":24,"_181":-5,"_664":1566,"_26":1567},{"_42":1552,"_31":1007,"_29":1553,"_175":1554,"_40":41,"_39":1555,"_177":24,"_37":1556,"_13":303,"_33":34,"_35":1557,"_23":24,"_181":-5,"_664":1558,"_26":1559},{"_42":1544,"_31":1545,"_29":1546,"_175":492,"_40":41,"_39":1547,"_177":58,"_37":1548,"_13":62,"_33":34,"_35":1549,"_23":24,"_181":-5,"_664":1550,"_26":1551},{"_42":1536,"_31":1537,"_29":1538,"_175":492,"_40":41,"_39":1539,"_177":58,"_37":1540,"_13":303,"_33":34,"_35":1541,"_23":24,"_181":-5,"_664":1542,"_26":1543},{"_42":1528,"_31":1529,"_29":1530,"_175":492,"_40":41,"_39":1531,"_177":58,"_37":1532,"_13":62,"_33":34,"_35":1533,"_23":24,"_181":-5,"_664":1534,"_26":1535},{"_42":1520,"_31":1521,"_29":1522,"_175":492,"_40":41,"_39":1523,"_177":58,"_37":1524,"_13":1362,"_33":34,"_35":1525,"_23":24,"_181":-5,"_664":1526,"_26":1527},{"_42":1512,"_31":1513,"_29":1514,"_175":492,"_40":41,"_39":1515,"_177":58,"_37":1516,"_13":430,"_33":34,"_35":1517,"_23":24,"_181":-5,"_664":1518,"_26":1519},{"_42":1504,"_31":1505,"_29":1506,"_175":492,"_40":41,"_39":1507,"_177":58,"_37":1508,"_13":62,"_33":34,"_35":1509,"_23":24,"_181":-5,"_664":1510,"_26":1511},{"_42":1496,"_31":1497,"_29":1498,"_175":492,"_40":41,"_39":1499,"_177":24,"_37":1500,"_13":303,"_33":34,"_35":1501,"_23":24,"_181":-5,"_664":1502,"_26":1503},{"_42":1488,"_31":1489,"_29":1490,"_175":492,"_40":41,"_39":1491,"_177":58,"_37":1492,"_13":204,"_33":34,"_35":1493,"_23":24,"_181":-5,"_664":1494,"_26":1495},{"_42":1480,"_31":1481,"_29":1482,"_175":492,"_40":41,"_39":1483,"_177":58,"_37":1484,"_13":62,"_33":34,"_35":1485,"_23":24,"_181":-5,"_664":1486,"_26":1487},{"_42":1472,"_31":1473,"_29":1474,"_175":492,"_40":41,"_39":1475,"_177":58,"_37":1476,"_13":430,"_33":34,"_35":1477,"_23":24,"_181":-5,"_664":1478,"_26":1479},{"_42":1463,"_31":1464,"_29":1465,"_175":492,"_40":41,"_39":1466,"_177":24,"_37":1467,"_13":1468,"_33":34,"_35":1469,"_23":24,"_181":-5,"_664":1470,"_26":1471},{"_42":1455,"_31":1456,"_29":1457,"_175":492,"_40":41,"_39":1458,"_177":24,"_37":1459,"_13":348,"_33":34,"_35":1460,"_23":24,"_181":-5,"_664":1461,"_26":1462},{"_42":1447,"_31":1448,"_29":1449,"_175":492,"_40":41,"_39":1450,"_177":24,"_37":1451,"_13":348,"_33":34,"_35":1452,"_23":24,"_181":-5,"_664":1453,"_26":1454},{"_42":1439,"_31":1440,"_29":1441,"_175":492,"_40":41,"_39":1442,"_177":58,"_37":1443,"_13":62,"_33":34,"_35":1444,"_23":24,"_181":-5,"_664":1445,"_26":1446},{"_42":1431,"_31":1432,"_29":1433,"_175":492,"_40":41,"_39":1434,"_177":58,"_37":1435,"_13":62,"_33":34,"_35":1436,"_23":24,"_181":-5,"_664":1437,"_26":1438},{"_42":1423,"_31":1424,"_29":1425,"_175":492,"_40":41,"_39":1426,"_177":58,"_37":1427,"_13":303,"_33":34,"_35":1428,"_23":24,"_181":-5,"_664":1429,"_26":1430},{"_42":1415,"_31":1416,"_29":1417,"_175":492,"_40":41,"_39":1418,"_177":24,"_37":1419,"_13":430,"_33":34,"_35":1420,"_23":24,"_181":-5,"_664":1421,"_26":1422},{"_42":1407,"_31":1408,"_29":1409,"_175":492,"_40":41,"_39":1410,"_177":58,"_37":1411,"_13":62,"_33":34,"_35":1412,"_23":24,"_181":-5,"_664":1413,"_26":1414},{"_42":1399,"_31":1400,"_29":1401,"_175":492,"_40":41,"_39":1402,"_177":58,"_37":1403,"_13":220,"_33":34,"_35":1404,"_23":24,"_181":-5,"_664":1405,"_26":1406},{"_42":1391,"_31":1392,"_29":1393,"_175":492,"_40":41,"_39":1394,"_177":58,"_37":1395,"_13":250,"_33":34,"_35":1396,"_23":24,"_181":-5,"_664":1397,"_26":1398},{"_42":1383,"_31":1384,"_29":1385,"_175":492,"_40":41,"_39":1386,"_177":24,"_37":1387,"_13":62,"_33":34,"_35":1388,"_23":24,"_181":-5,"_664":1389,"_26":1390},{"_42":1375,"_31":1376,"_29":1377,"_175":492,"_40":41,"_39":1378,"_177":58,"_37":1379,"_13":62,"_33":34,"_35":1380,"_23":24,"_181":-5,"_664":1381,"_26":1382},{"_42":1366,"_31":1367,"_29":1368,"_175":492,"_40":41,"_39":1369,"_177":24,"_37":1370,"_13":1371,"_33":34,"_35":1372,"_23":24,"_181":-5,"_664":1373,"_26":1374},{"_42":1357,"_31":1358,"_29":1359,"_175":492,"_40":41,"_39":1360,"_177":24,"_37":1361,"_13":1362,"_33":34,"_35":1363,"_23":24,"_181":-5,"_664":1364,"_26":1365},{"_42":1349,"_31":1350,"_29":1351,"_175":492,"_40":41,"_39":1352,"_177":58,"_37":1353,"_13":204,"_33":34,"_35":1354,"_23":24,"_181":-5,"_664":1355,"_26":1356},{"_42":1341,"_31":1342,"_29":1343,"_175":492,"_40":41,"_39":1344,"_177":24,"_37":1345,"_13":62,"_33":34,"_35":1346,"_23":24,"_181":-5,"_664":1347,"_26":1348},{"_42":1333,"_31":1334,"_29":1335,"_175":492,"_40":41,"_39":1336,"_177":24,"_37":1337,"_13":62,"_33":34,"_35":1338,"_23":24,"_181":-5,"_664":1339,"_26":1340},{"_42":1325,"_31":1326,"_29":1327,"_175":492,"_40":41,"_39":1328,"_177":58,"_37":1329,"_13":62,"_33":34,"_35":1330,"_23":24,"_181":-5,"_664":1331,"_26":1332},{"_42":1316,"_31":1317,"_29":1318,"_175":492,"_40":41,"_39":1319,"_177":24,"_37":1320,"_13":1321,"_33":34,"_35":1322,"_23":24,"_181":-5,"_664":1323,"_26":1324},{"_42":1308,"_31":1309,"_29":1310,"_175":492,"_40":41,"_39":1311,"_177":58,"_37":1312,"_13":266,"_33":34,"_35":1313,"_23":24,"_181":-5,"_664":1314,"_26":1315},{"_42":1300,"_31":1301,"_29":1302,"_175":492,"_40":41,"_39":1303,"_177":58,"_37":1304,"_13":62,"_33":34,"_35":1305,"_23":24,"_181":-5,"_664":1306,"_26":1307},{"_42":1292,"_31":1293,"_29":1294,"_175":492,"_40":41,"_39":1295,"_177":24,"_37":1296,"_13":348,"_33":34,"_35":1297,"_23":24,"_181":-5,"_664":1298,"_26":1299},{"_42":1284,"_31":1285,"_29":1286,"_175":492,"_40":41,"_39":1287,"_177":58,"_37":1288,"_13":348,"_33":34,"_35":1289,"_23":24,"_181":-5,"_664":1290,"_26":1291},{"_42":1276,"_31":1277,"_29":1278,"_175":492,"_40":41,"_39":1279,"_177":58,"_37":1280,"_13":348,"_33":34,"_35":1281,"_23":24,"_181":-5,"_664":1282,"_26":1283},{"_42":1268,"_31":1269,"_29":1270,"_175":492,"_40":41,"_39":1271,"_177":24,"_37":1272,"_13":348,"_33":34,"_35":1273,"_23":24,"_181":-5,"_664":1274,"_26":1275},{"_42":1260,"_31":1261,"_29":1262,"_175":492,"_40":41,"_39":1263,"_177":24,"_37":1264,"_13":430,"_33":34,"_35":1265,"_23":24,"_181":-5,"_664":1266,"_26":1267},{"_42":1252,"_31":1253,"_29":1254,"_175":492,"_40":41,"_39":1255,"_177":24,"_37":1256,"_13":62,"_33":34,"_35":1257,"_23":24,"_181":-5,"_664":1258,"_26":1259},{"_42":1244,"_31":1245,"_29":1246,"_175":492,"_40":41,"_39":1247,"_177":58,"_37":1248,"_13":422,"_33":34,"_35":1249,"_23":24,"_181":-5,"_664":1250,"_26":1251},{"_42":1236,"_31":1237,"_29":1238,"_175":492,"_40":41,"_39":1239,"_177":58,"_37":1240,"_13":62,"_33":34,"_35":1241,"_23":24,"_181":-5,"_664":1242,"_26":1243},{"_42":1228,"_31":1229,"_29":1230,"_175":492,"_40":41,"_39":1231,"_177":58,"_37":1232,"_13":266,"_33":34,"_35":1233,"_23":24,"_181":-5,"_664":1234,"_26":1235},{"_42":1220,"_31":1221,"_29":1222,"_175":492,"_40":41,"_39":1223,"_177":58,"_37":1224,"_13":204,"_33":34,"_35":1225,"_23":24,"_181":-5,"_664":1226,"_26":1227},{"_42":1212,"_31":1213,"_29":1214,"_175":492,"_40":41,"_39":1215,"_177":58,"_37":1216,"_13":62,"_33":34,"_35":1217,"_23":24,"_181":-5,"_664":1218,"_26":1219},{"_42":1208,"_31":32,"_29":30,"_175":492,"_40":41,"_39":14,"_177":24,"_37":1209,"_13":62,"_33":34,"_35":36,"_23":24,"_181":-5,"_664":1210,"_26":1211},{"_42":1200,"_31":1201,"_29":1202,"_175":492,"_40":41,"_39":1203,"_177":58,"_37":1204,"_13":62,"_33":34,"_35":1205,"_23":24,"_181":-5,"_664":1206,"_26":1207},{"_42":1192,"_31":1193,"_29":1194,"_175":492,"_40":41,"_39":1195,"_177":58,"_37":1196,"_13":204,"_33":34,"_35":1197,"_23":24,"_181":-5,"_664":1198,"_26":1199},{"_42":1184,"_31":1185,"_29":1186,"_175":492,"_40":41,"_39":1187,"_177":58,"_37":1188,"_13":348,"_33":34,"_35":1189,"_23":24,"_181":-5,"_664":1190,"_26":1191},{"_42":1176,"_31":1177,"_29":1178,"_175":492,"_40":41,"_39":1179,"_177":58,"_37":1180,"_13":62,"_33":34,"_35":1181,"_23":24,"_181":-5,"_664":1182,"_26":1183},{"_42":1168,"_31":1169,"_29":1170,"_175":492,"_40":41,"_39":1171,"_177":58,"_37":1172,"_13":62,"_33":34,"_35":1173,"_23":24,"_181":-5,"_664":1174,"_26":1175},{"_42":1160,"_31":1161,"_29":1162,"_175":492,"_40":41,"_39":1163,"_177":58,"_37":1164,"_13":242,"_33":34,"_35":1165,"_23":24,"_181":-5,"_664":1166,"_26":1167},{"_42":1152,"_31":1153,"_29":1154,"_175":492,"_40":41,"_39":1155,"_177":58,"_37":1156,"_13":62,"_33":34,"_35":1157,"_23":24,"_181":-5,"_664":1158,"_26":1159},{"_42":1144,"_31":1145,"_29":1146,"_175":492,"_40":41,"_39":1147,"_177":58,"_37":1148,"_13":220,"_33":34,"_35":1149,"_23":24,"_181":-5,"_664":1150,"_26":1151},{"_42":484,"_31":485,"_29":486,"_175":-5,"_40":41,"_39":487,"_177":58,"_37":1141,"_13":62,"_33":482,"_35":-5,"_23":24,"_181":-5,"_664":1142,"_26":1143},{"_42":1134,"_31":1135,"_29":1136,"_175":486,"_40":41,"_39":487,"_177":58,"_37":1137,"_13":62,"_33":34,"_35":1138,"_23":24,"_181":-5,"_664":1139,"_26":1140},{"_42":1126,"_31":1127,"_29":1128,"_175":486,"_40":41,"_39":1129,"_177":58,"_37":1130,"_13":62,"_33":34,"_35":1131,"_23":24,"_181":-5,"_664":1132,"_26":1133},{"_42":1118,"_31":1119,"_29":1120,"_175":486,"_40":41,"_39":1121,"_177":58,"_37":1122,"_13":62,"_33":34,"_35":1123,"_23":24,"_181":-5,"_664":1124,"_26":1125},{"_42":1110,"_31":1111,"_29":1112,"_175":486,"_40":41,"_39":1113,"_177":58,"_37":1114,"_13":348,"_33":34,"_35":1115,"_23":24,"_181":-5,"_664":1116,"_26":1117},{"_42":1102,"_31":1103,"_29":1104,"_175":486,"_40":41,"_39":1105,"_177":58,"_37":1106,"_13":62,"_33":34,"_35":1107,"_23":24,"_181":-5,"_664":1108,"_26":1109},{"_42":1094,"_31":1095,"_29":1096,"_175":486,"_40":41,"_39":1097,"_177":58,"_37":1098,"_13":62,"_33":34,"_35":1099,"_23":24,"_181":-5,"_664":1100,"_26":1101},{"_42":1086,"_31":1087,"_29":1088,"_175":486,"_40":41,"_39":1089,"_177":58,"_37":1090,"_13":266,"_33":34,"_35":1091,"_23":24,"_181":-5,"_664":1092,"_26":1093},{"_42":1078,"_31":1079,"_29":1080,"_175":486,"_40":41,"_39":1081,"_177":58,"_37":1082,"_13":62,"_33":34,"_35":1083,"_23":24,"_181":-5,"_664":1084,"_26":1085},{"_42":1070,"_31":1071,"_29":1072,"_175":486,"_40":41,"_39":1073,"_177":58,"_37":1074,"_13":348,"_33":34,"_35":1075,"_23":24,"_181":-5,"_664":1076,"_26":1077},{"_42":1062,"_31":1063,"_29":1064,"_175":486,"_40":41,"_39":1065,"_177":58,"_37":1066,"_13":62,"_33":34,"_35":1067,"_23":24,"_181":-5,"_664":1068,"_26":1069},{"_42":1054,"_31":1055,"_29":1056,"_175":486,"_40":41,"_39":1057,"_177":58,"_37":1058,"_13":62,"_33":34,"_35":1059,"_23":24,"_181":-5,"_664":1060,"_26":1061},{"_42":1046,"_31":1047,"_29":1048,"_175":486,"_40":41,"_39":1049,"_177":58,"_37":1050,"_13":62,"_33":34,"_35":1051,"_23":24,"_181":-5,"_664":1052,"_26":1053},{"_42":1038,"_31":1039,"_29":1040,"_175":486,"_40":41,"_39":1041,"_177":58,"_37":1042,"_13":62,"_33":34,"_35":1043,"_23":24,"_181":-5,"_664":1044,"_26":1045},{"_42":1030,"_31":1031,"_29":1032,"_175":486,"_40":41,"_39":1033,"_177":58,"_37":1034,"_13":348,"_33":34,"_35":1035,"_23":24,"_181":-5,"_664":1036,"_26":1037},{"_42":1022,"_31":1023,"_29":1024,"_175":486,"_40":41,"_39":1025,"_177":58,"_37":1026,"_13":62,"_33":34,"_35":1027,"_23":24,"_181":-5,"_664":1028,"_26":1029},{"_42":1014,"_31":1015,"_29":1016,"_175":486,"_40":41,"_39":1017,"_177":58,"_37":1018,"_13":62,"_33":34,"_35":1019,"_23":24,"_181":-5,"_664":1020,"_26":1021},{"_42":1006,"_31":1007,"_29":1008,"_175":486,"_40":41,"_39":1009,"_177":58,"_37":1010,"_13":266,"_33":34,"_35":1011,"_23":24,"_181":-5,"_664":1012,"_26":1013},{"_42":477,"_31":478,"_29":479,"_175":-5,"_40":41,"_39":480,"_177":58,"_37":1003,"_13":62,"_33":482,"_35":-5,"_23":24,"_181":-5,"_664":1004,"_26":1005},{"_42":999,"_31":935,"_29":929,"_175":479,"_40":41,"_39":480,"_177":58,"_37":1000,"_13":62,"_33":482,"_35":-5,"_23":24,"_181":-5,"_664":1001,"_26":1002},{"_42":992,"_31":993,"_29":994,"_175":929,"_40":41,"_39":480,"_177":58,"_37":995,"_13":62,"_33":34,"_35":996,"_23":24,"_181":-5,"_664":997,"_26":998},{"_42":984,"_31":985,"_29":986,"_175":929,"_40":41,"_39":987,"_177":58,"_37":988,"_13":62,"_33":34,"_35":989,"_23":24,"_181":-5,"_664":990,"_26":991},{"_42":976,"_31":977,"_29":978,"_175":929,"_40":41,"_39":979,"_177":58,"_37":980,"_13":62,"_33":34,"_35":981,"_23":24,"_181":-5,"_664":982,"_26":983},{"_42":968,"_31":969,"_29":970,"_175":929,"_40":41,"_39":971,"_177":58,"_37":972,"_13":62,"_33":34,"_35":973,"_23":24,"_181":-5,"_664":974,"_26":975},{"_42":960,"_31":961,"_29":962,"_175":929,"_40":41,"_39":963,"_177":58,"_37":964,"_13":62,"_33":34,"_35":965,"_23":24,"_181":-5,"_664":966,"_26":967},{"_42":952,"_31":953,"_29":954,"_175":929,"_40":41,"_39":955,"_177":58,"_37":956,"_13":62,"_33":34,"_35":957,"_23":24,"_181":-5,"_664":958,"_26":959},{"_42":944,"_31":945,"_29":946,"_175":929,"_40":41,"_39":947,"_177":58,"_37":948,"_13":62,"_33":34,"_35":949,"_23":24,"_181":-5,"_664":950,"_26":951},{"_42":936,"_31":937,"_29":938,"_175":929,"_40":41,"_39":939,"_177":58,"_37":940,"_13":62,"_33":34,"_35":941,"_23":24,"_181":-5,"_664":942,"_26":943},{"_42":926,"_31":927,"_29":928,"_175":929,"_40":41,"_39":930,"_177":58,"_37":931,"_13":62,"_33":34,"_35":932,"_23":24,"_181":-5,"_664":933,"_26":934},{"_42":922,"_31":801,"_29":795,"_175":479,"_40":41,"_39":917,"_177":58,"_37":923,"_13":62,"_33":482,"_35":-5,"_23":24,"_181":-5,"_664":924,"_26":925},{"_42":914,"_31":915,"_29":916,"_175":795,"_40":41,"_39":917,"_177":58,"_37":918,"_13":62,"_33":34,"_35":919,"_23":24,"_181":-5,"_664":920,"_26":921},{"_42":906,"_31":907,"_29":908,"_175":795,"_40":41,"_39":909,"_177":58,"_37":910,"_13":62,"_33":34,"_35":911,"_23":24,"_181":-5,"_664":912,"_26":913},{"_42":898,"_31":899,"_29":900,"_175":795,"_40":41,"_39":901,"_177":58,"_37":902,"_13":62,"_33":34,"_35":903,"_23":24,"_181":-5,"_664":904,"_26":905},{"_42":890,"_31":891,"_29":892,"_175":795,"_40":41,"_39":893,"_177":58,"_37":894,"_13":62,"_33":34,"_35":895,"_23":24,"_181":-5,"_664":896,"_26":897},{"_42":882,"_31":883,"_29":884,"_175":795,"_40":41,"_39":885,"_177":58,"_37":886,"_13":62,"_33":34,"_35":887,"_23":24,"_181":-5,"_664":888,"_26":889},{"_42":874,"_31":875,"_29":876,"_175":795,"_40":41,"_39":877,"_177":58,"_37":878,"_13":62,"_33":34,"_35":879,"_23":24,"_181":-5,"_664":880,"_26":881},{"_42":866,"_31":867,"_29":868,"_175":795,"_40":41,"_39":869,"_177":58,"_37":870,"_13":62,"_33":34,"_35":871,"_23":24,"_181":-5,"_664":872,"_26":873},{"_42":858,"_31":859,"_29":860,"_175":795,"_40":41,"_39":861,"_177":58,"_37":862,"_13":62,"_33":34,"_35":863,"_23":24,"_181":-5,"_664":864,"_26":865},{"_42":850,"_31":851,"_29":852,"_175":795,"_40":41,"_39":853,"_177":58,"_37":854,"_13":62,"_33":34,"_35":855,"_23":24,"_181":-5,"_664":856,"_26":857},{"_42":842,"_31":843,"_29":844,"_175":795,"_40":41,"_39":845,"_177":58,"_37":846,"_13":62,"_33":34,"_35":847,"_23":24,"_181":-5,"_664":848,"_26":849},{"_42":834,"_31":835,"_29":836,"_175":795,"_40":41,"_39":837,"_177":58,"_37":838,"_13":62,"_33":34,"_35":839,"_23":24,"_181":-5,"_664":840,"_26":841},{"_42":826,"_31":827,"_29":828,"_175":795,"_40":41,"_39":829,"_177":58,"_37":830,"_13":62,"_33":34,"_35":831,"_23":24,"_181":-5,"_664":832,"_26":833},{"_42":818,"_31":819,"_29":820,"_175":795,"_40":41,"_39":821,"_177":58,"_37":822,"_13":62,"_33":34,"_35":823,"_23":24,"_181":-5,"_664":824,"_26":825},{"_42":810,"_31":811,"_29":812,"_175":795,"_40":41,"_39":813,"_177":58,"_37":814,"_13":62,"_33":34,"_35":815,"_23":24,"_181":-5,"_664":816,"_26":817},{"_42":802,"_31":803,"_29":804,"_175":795,"_40":41,"_39":805,"_177":58,"_37":806,"_13":62,"_33":34,"_35":807,"_23":24,"_181":-5,"_664":808,"_26":809},{"_42":792,"_31":793,"_29":794,"_175":795,"_40":41,"_39":796,"_177":58,"_37":797,"_13":62,"_33":34,"_35":798,"_23":24,"_181":-5,"_664":799,"_26":800},{"_42":784,"_31":785,"_29":786,"_175":479,"_40":41,"_39":787,"_177":58,"_37":788,"_13":62,"_33":34,"_35":789,"_23":24,"_181":-5,"_664":790,"_26":791},{"_42":470,"_31":471,"_29":472,"_175":-5,"_40":41,"_39":473,"_177":24,"_37":781,"_13":62,"_33":34,"_35":475,"_23":24,"_181":-5,"_664":782,"_26":783},{"_42":463,"_31":464,"_29":465,"_175":-5,"_40":41,"_39":466,"_177":24,"_37":778,"_13":204,"_33":34,"_35":468,"_23":24,"_181":-5,"_664":779,"_26":780},{"_42":456,"_31":457,"_29":458,"_175":-5,"_40":41,"_39":459,"_177":58,"_37":775,"_13":266,"_33":34,"_35":461,"_23":24,"_181":-5,"_664":776,"_26":777},{"_42":448,"_31":449,"_29":450,"_175":-5,"_40":41,"_39":451,"_177":24,"_37":772,"_13":453,"_33":34,"_35":454,"_23":24,"_181":-5,"_664":773,"_26":774},{"_42":440,"_31":441,"_29":442,"_175":-5,"_40":41,"_39":443,"_177":24,"_37":769,"_13":445,"_33":34,"_35":446,"_23":24,"_181":-5,"_664":770,"_26":771},{"_42":433,"_31":434,"_29":435,"_175":-5,"_40":41,"_39":436,"_177":58,"_37":766,"_13":348,"_33":34,"_35":438,"_23":24,"_181":-5,"_664":767,"_26":768},{"_42":425,"_31":426,"_29":427,"_175":-5,"_40":41,"_39":428,"_177":58,"_37":763,"_13":430,"_33":34,"_35":431,"_23":24,"_181":-5,"_664":764,"_26":765},{"_42":417,"_31":418,"_29":419,"_175":-5,"_40":41,"_39":420,"_177":58,"_37":760,"_13":422,"_33":34,"_35":423,"_23":24,"_181":-5,"_664":761,"_26":762},{"_42":410,"_31":411,"_29":412,"_175":-5,"_40":41,"_39":413,"_177":58,"_37":757,"_13":242,"_33":34,"_35":415,"_23":24,"_181":-5,"_664":758,"_26":759},{"_42":402,"_31":403,"_29":404,"_175":-5,"_40":41,"_39":405,"_177":58,"_37":754,"_13":407,"_33":34,"_35":408,"_23":24,"_181":-5,"_664":755,"_26":756},{"_42":395,"_31":396,"_29":397,"_175":-5,"_40":41,"_39":398,"_177":58,"_37":751,"_13":204,"_33":34,"_35":400,"_23":24,"_181":-5,"_664":752,"_26":753},{"_42":388,"_31":389,"_29":390,"_175":-5,"_40":41,"_39":391,"_177":58,"_37":748,"_13":62,"_33":34,"_35":393,"_23":24,"_181":-5,"_664":749,"_26":750},{"_42":381,"_31":382,"_29":383,"_175":-5,"_40":41,"_39":384,"_177":58,"_37":745,"_13":303,"_33":34,"_35":386,"_23":24,"_181":-5,"_664":746,"_26":747},{"_42":374,"_31":375,"_29":376,"_175":-5,"_40":41,"_39":377,"_177":58,"_37":742,"_13":204,"_33":34,"_35":379,"_23":24,"_181":-5,"_664":743,"_26":744},{"_42":366,"_31":367,"_29":368,"_175":-5,"_40":41,"_39":369,"_177":24,"_37":739,"_13":371,"_33":34,"_35":372,"_23":24,"_181":-5,"_664":740,"_26":741},{"_42":358,"_31":359,"_29":360,"_175":-5,"_40":41,"_39":361,"_177":24,"_37":736,"_13":363,"_33":34,"_35":364,"_23":24,"_181":-5,"_664":737,"_26":738},{"_42":351,"_31":352,"_29":353,"_175":-5,"_40":41,"_39":354,"_177":58,"_37":733,"_13":311,"_33":34,"_35":356,"_23":24,"_181":-5,"_664":734,"_26":735},{"_42":343,"_31":344,"_29":345,"_175":-5,"_40":41,"_39":346,"_177":24,"_37":730,"_13":348,"_33":34,"_35":349,"_23":24,"_181":-5,"_664":731,"_26":732},{"_42":336,"_31":337,"_29":338,"_175":-5,"_40":41,"_39":339,"_177":58,"_37":727,"_13":62,"_33":34,"_35":341,"_23":24,"_181":-5,"_664":728,"_26":729},{"_42":329,"_31":330,"_29":331,"_175":-5,"_40":41,"_39":332,"_177":58,"_37":724,"_13":303,"_33":34,"_35":334,"_23":24,"_181":-5,"_664":725,"_26":726},{"_42":321,"_31":322,"_29":323,"_175":-5,"_40":41,"_39":324,"_177":24,"_37":721,"_13":326,"_33":34,"_35":327,"_23":24,"_181":-5,"_664":722,"_26":723},{"_42":314,"_31":315,"_29":316,"_175":-5,"_40":41,"_39":317,"_177":58,"_37":718,"_13":266,"_33":34,"_35":319,"_23":24,"_181":-5,"_664":719,"_26":720},{"_42":306,"_31":307,"_29":308,"_175":-5,"_40":41,"_39":309,"_177":58,"_37":715,"_13":311,"_33":34,"_35":312,"_23":24,"_181":-5,"_664":716,"_26":717},{"_42":298,"_31":299,"_29":300,"_175":-5,"_40":41,"_39":301,"_177":58,"_37":712,"_13":303,"_33":34,"_35":304,"_23":24,"_181":-5,"_664":713,"_26":714},{"_42":290,"_31":291,"_29":292,"_175":-5,"_40":41,"_39":293,"_177":24,"_37":709,"_13":295,"_33":34,"_35":296,"_23":24,"_181":-5,"_664":710,"_26":711},{"_42":283,"_31":284,"_29":285,"_175":-5,"_40":41,"_39":286,"_177":58,"_37":706,"_13":266,"_33":34,"_35":288,"_23":24,"_181":-5,"_664":707,"_26":708},{"_42":276,"_31":277,"_29":278,"_175":-5,"_40":41,"_39":279,"_177":58,"_37":703,"_13":220,"_33":34,"_35":281,"_23":24,"_181":-5,"_664":704,"_26":705},{"_42":269,"_31":270,"_29":271,"_175":-5,"_40":41,"_39":272,"_177":58,"_37":700,"_13":204,"_33":34,"_35":274,"_23":24,"_181":-5,"_664":701,"_26":702},{"_42":261,"_31":262,"_29":263,"_175":-5,"_40":41,"_39":264,"_177":58,"_37":697,"_13":266,"_33":34,"_35":267,"_23":24,"_181":-5,"_664":698,"_26":699},{"_42":253,"_31":254,"_29":255,"_175":-5,"_40":41,"_39":256,"_177":58,"_37":694,"_13":258,"_33":34,"_35":259,"_23":24,"_181":-5,"_664":695,"_26":696},{"_42":245,"_31":246,"_29":247,"_175":-5,"_40":41,"_39":248,"_177":58,"_37":691,"_13":250,"_33":34,"_35":251,"_23":24,"_181":-5,"_664":692,"_26":693},{"_42":237,"_31":238,"_29":239,"_175":-5,"_40":41,"_39":240,"_177":58,"_37":688,"_13":242,"_33":34,"_35":243,"_23":24,"_181":-5,"_664":689,"_26":690},{"_42":230,"_31":231,"_29":232,"_175":-5,"_40":41,"_39":233,"_177":58,"_37":685,"_13":62,"_33":34,"_35":235,"_23":24,"_181":-5,"_664":686,"_26":687},{"_42":223,"_31":224,"_29":225,"_175":-5,"_40":41,"_39":226,"_177":58,"_37":682,"_13":62,"_33":34,"_35":228,"_23":24,"_181":-5,"_664":683,"_26":684},{"_42":215,"_31":216,"_29":217,"_175":-5,"_40":41,"_39":218,"_177":58,"_37":679,"_13":220,"_33":34,"_35":221,"_23":24,"_181":-5,"_664":680,"_26":681},{"_42":207,"_31":208,"_29":209,"_175":-5,"_40":41,"_39":210,"_177":58,"_37":676,"_13":212,"_33":34,"_35":213,"_23":24,"_181":-5,"_664":677,"_26":678},{"_42":199,"_31":200,"_29":201,"_175":-5,"_40":41,"_39":202,"_177":58,"_37":673,"_13":204,"_33":34,"_35":205,"_23":24,"_181":-5,"_664":674,"_26":675},{"_42":191,"_31":192,"_29":56,"_175":-5,"_40":41,"_39":193,"_177":24,"_37":670,"_13":195,"_33":196,"_35":197,"_23":24,"_181":-5,"_664":671,"_26":672},{"_42":183,"_31":184,"_29":185,"_175":-5,"_40":41,"_39":186,"_177":24,"_37":667,"_13":188,"_33":34,"_35":189,"_23":24,"_181":-5,"_664":668,"_26":669},{"_42":172,"_31":173,"_29":174,"_175":-5,"_40":41,"_39":176,"_177":58,"_37":663,"_13":179,"_33":34,"_35":180,"_23":24,"_181":-5,"_664":665,"_26":666},["D",1780291403301],"children",[],[173],["D",1780467943919],[],[184],["D",1780467937905],[],[192],["D",1780393062576],[],[200],["D",1780372195351],[],[208],["D",1780372198155],[],[216],["D",1780403524788],[],[224],["D",1780403526320],[],[231],["D",1780403527651],[],[238],["D",1780393064155],[],[246],["D",1780393049485],[],[254],["D",1780029981482],[],[262],["D",1779775316358],[],[270],["D",1780402139102],[],[277],["D",1780402136705],[],[284],["D",1780393058305],[],[291],["D",1780052948479],[],[299],["D",1780052947805],[],[307],["D",1780455959852],[],[315],["D",1780467942685],[],[322],["D",1780030685043],[],[330],["D",1780467941202],[],[337],["D",1780467940042],[],[344],["D",1780402137967],[],[352],["D",1780455960768],[],[359],["D",1780465410611],[],[367],["D",1780305934253],[],[375],["D",1780402134889],[],[382],["D",1780462244747],[],[389],["D",1780462245605],[],[396],["D",1780393054688],[],[403],["D",1780393060117],[],[411],["D",1780393047117],[],[418],["D",1780053308385],[],[426],["D",1780305932286],[],[434],["D",1780310003617],[],[441],["D",1780475232541],[],[449],["D",1780402127969],[],[457],["D",1780402128741],[],[464],["D",1780467938900],[],[471],"ffa758d8-5d6d-11f1-97cc-1607ee4eb77e","index.ts","ffa75996-5d6d-11f1-97cc-1607ee4eb77e",669,["D",1780286244707],"// GENERATED by deploy/gen_skills_catalog.mjs — do not edit by hand.\n// Bundled marketing-skills catalog (43 skills, 97 references),\n// read from memory like the renderers/ assembly. State (enabled/pinned/custom) lives in the\n// 'skills' DB table; this module is the immutable builtin content.\nimport { SKILLS_PART_1 } from \"./catalog/part_1.ts\";\nimport { SKILLS_PART_2 } from \"./catalog/part_2.ts\";\nimport { SKILLS_PART_3 } from \"./catalog/part_3.ts\";\nimport { SKILLS_PART_4 } from \"./catalog/part_4.ts\";\nimport { SKILLS_PART_5 } from \"./catalog/part_5.ts\";\nimport { SKILLS_PART_6 } from \"./catalog/part_6.ts\";\nimport { SKILLS_PART_7 } from \"./catalog/part_7.ts\";\nimport { SKILLS_PART_8 } from \"./catalog/part_8.ts\";\nimport { SKILLS_PART_9 } from \"./catalog/part_9.ts\";\nimport { REFS_PART_1 } from \"./refs/ref_1.ts\";\nimport { REFS_PART_2 } from \"./refs/ref_2.ts\";\nimport { REFS_PART_3 } from \"./refs/ref_3.ts\";\nimport { REFS_PART_4 } from \"./refs/ref_4.ts\";\nimport { REFS_PART_5 } from \"./refs/ref_5.ts\";\nimport { REFS_PART_6 } from \"./refs/ref_6.ts\";\nimport { REFS_PART_7 } from \"./refs/ref_7.ts\";\nimport { REFS_PART_8 } from \"./refs/ref_8.ts\";\nimport { REFS_PART_9 } from \"./refs/ref_9.ts\";\nimport { REFS_PART_10 } from \"./refs/ref_10.ts\";\nimport { REFS_PART_11 } from \"./refs/ref_11.ts\";\nimport { REFS_PART_12 } from \"./refs/ref_12.ts\";\nimport { REFS_PART_13 } from \"./refs/ref_13.ts\";\nimport { REFS_PART_14 } from \"./refs/ref_14.ts\";\nimport { REFS_PART_15 } from \"./refs/ref_15.ts\";\nimport { REFS_PART_16 } from \"./refs/ref_16.ts\";\n\nexport interface SkillDef { name: string; category: string; description: string; version: string; body: string }\nexport interface SkillRef { skill: string; ref: string; body: string }\n\nexport const BUILTIN_SKILLS: SkillDef[] = [...SKILLS_PART_1, ...SKILLS_PART_2, ...SKILLS_PART_3, ...SKILLS_PART_4, ...SKILLS_PART_5, ...SKILLS_PART_6, ...SKILLS_PART_7, ...SKILLS_PART_8, ...SKILLS_PART_9];\nconst REFS: SkillRef[] = [...REFS_PART_1, ...REFS_PART_2, ...REFS_PART_3, ...REFS_PART_4, ...REFS_PART_5, ...REFS_PART_6, ...REFS_PART_7, ...REFS_PART_8, ...REFS_PART_9, ...REFS_PART_10, ...REFS_PART_11, ...REFS_PART_12, ...REFS_PART_13, ...REFS_PART_14, ...REFS_PART_15, ...REFS_PART_16];\n\nconst BY_NAME = new Map(BUILTIN_SKILLS.map((s) => [s.name, s]));\n\nexport function getSkillDef(name: string): SkillDef | undefined { return BY_NAME.get(name); }\nexport function getSkillBody(name: string): string | null { return BY_NAME.get(name)?.body ?? null; }\nexport function listReferences(name: string): string[] { return REFS.filter((r) => r.skill === name).map((r) => r.ref); }\nexport function getReference(name: string, ref: string): string | null {\n const hit = REFS.find((r) => r.skill === name && r.ref === ref);\n return hit ? hit.body : null;\n}\n",[],[478,785],"ff025a0e-5d6d-11f1-b895-1607ee4eb77e","ref_9.ts","ff025aea-5d6d-11f1-b895-1607ee4eb77e","c9768083-9936-4697-a4d4-80b7978fe701",668,["D",1780286243627],"// GENERATED by deploy/gen_skills_catalog.mjs — do not edit by hand.\nimport type { SkillRef } from \"../index.ts\";\nexport const REFS_PART_9: SkillRef[] = [\n {\"skill\":\"marketing-plan\",\"ref\":\"example-quietude\",\"body\":\"# Example — Quietude Marketing Plan v1\\n\\n**This is the canonical reference example for the `/marketing-plan` skill.** It's based on a real fCMO engagement for a hybrid hardware-and-software wellness platform. **Names, domains, and identifying details have been changed** — the client is called \\\"Quietude\\\" here, and the team members have been renamed (Alex / Sam / Casey / Devon). The funnel numbers, budget, and structural lessons preserve the shape of the original engagement so the example retains its teaching value.\\n\\nUse this as the \\\"what good looks like\\\" reference when drafting a new plan. The structure, tone, depth, and operational specificity are the bar to clear.\\n\\n**Quietude's archetype:** Hybrid hardware + software with deep-tech / clinical credibility layer. See `references/client-types.md` for archetype patterns.\\n\\n**Funding-stage context:** Pre-seed-close (mid-raise on $3M seed). Tier 1 per `references/funding-stage-unlocks.md`. $0 paid budget; organic + lifecycle + ambassador only.\\n\\n**What was strong about this plan:**\\n- Strategic frame (Section 2) leaned on the founder's own meditation-vs-regulation framing as the content pillar\\n- Current state (Section 3) included the 17-section audit rubric scored against existing materials (no formal audit run)\\n- 90-day roadmap (Section 9) had owner-assigned moves, not just actions\\n- Ops stack (Section 11) included a concrete operational proof-point (Customer.io MCP used live by non-technical founder on the kickoff call)\\n- Tactical idea bank (Section 12) cross-referenced all 139 marketing-ideas to AARRR + Quietude-specific status, including 23 explicit skips with rationale\\n\\n---\\n\\n# Quietude — Marketing Plan v1\\n\\n**Prepared by:** Casey Reed (fCMO)\\n**For:** Alex, Sam, and the Quietude team\\n**Date:** 2026-05-27\\n**Status:** Draft v1 — for team review\\n\\n## 1. Executive summary\\n\\nQuietude has built something rare: a clinically validated, brand-coherent, founder-led product in a category that doesn't yet have a name. The opportunity in the next twelve months is not to invent a marketing engine from scratch — it's to **convert the existing organic gravity into a measurable, repeatable funnel**, then layer paid acquisition on top of that funnel once the seed round closes.\\n\\n**Three big bets, ranked by leverage:**\\n\\n1. **Fix the leak before pouring water in.** The Day 1 → Day 35 funnel shape (1.34% → 5.46%) tells us the product converts given time and contact. What it's missing is a working first-session moment (the headphone gate is killing conversion) and a lifecycle layer to deliver the contact. These two pieces — onboarding rebuild and Customer.io flows shipped — are the unlock for everything else.\\n2. **Compound the moats Quietude already has.** Peer-reviewed clinical study, longevity-influencer PR, 15K live event participants, Alex's founder voice — these are link generators, content pillars, and credibility anchors that most wellness brands would kill for. They're under-leveraged. SEO, content, and App Store optimization translate them into search and discovery surface area.\\n3. **Build the founder-and-fCMO operating system that lets a 4-person team market like a 20-person one.** This is what makes the plan actually executable at Quietude's team size and burn rate — agentic tooling on top of Customer.io, Shopify, App Store, Stripe, GitHub, and the marketing skill library means we ship without hiring.\\n\\n**What twelve months looks like, plausibly:**\\n\\n- App goes from beta to GA. Onboarding converts at meaningful lift over today's baseline.\\n- 4 SEO content pillars staked, with Pillar 1 (Nervous System Regulation) and Pillar 2 (Sleep + Eye Mask) ranking on Tier-1 keywords.\\n- Full lifecycle live in Customer.io: onboarding, lapsed re-engagement, hardware post-purchase, subscription-center opt-ins.\\n- Ambassador program live with 15–25 active hosts. First Quietude Guides cert pilot run.\\n- Eye mask wedge selling at scale via Shopify with a clean hardware → app activation path. Blended CAC measured and tracked.\\n- Paid acquisition firing post-seed-close at $5–10K/mo initial test budget, scaling to $20–50K/mo if unit economics validate.\\n- Series A narrative writes itself: clinical evidence + activation lift + lifecycle compounding + first B2B install reference cases.\\n\\n**The 90-day priorities** (which the rest of this doc operationalizes):\\n\\n1. Kill the headphones gate. Ship the bedrock fix this week.\\n2. Run the three-variant onboarding test. Find the activation winner.\\n3. Ship Customer.io Flows 6 (eye mask post-purchase) and 4 (lapsed user) — hold Flow 2 (onboarding) until app UI stabilizes.\\n4. Rewrite the App Store listing in Quietude's brand voice. Highest-leverage non-site asset right now.\\n5. Stake the SEO foundation: consolidate to `quietude.app`, publish Pillar 1 hub + 3 spokes, publish the peer-reviewed psychophysiology study landing page.\\n6. Launch the ambassador program with the ~5 inbound waiting.\\n\\nEverything else compounds on top of those six.\\n\\n---\\n\\n## 2. Strategic frame\\n\\nThis section distills positioning, ICP, and brand voice into what the team needs to keep in mind while executing. Full detail lives in `marketing-os.md`, `icp.md`, and `sound-philosophy.md`.\\n\\n### What Quietude is, in one sentence\\n\\nA nervous system intelligence platform — clinically validated spatial audio + AI reflection companion (Mira) + hardware + venue installations + practitioner network. *\\\"We start with sound. We expand to every sense. We end with cities.\\\"*\\n\\n### The category we're claiming (and defending)\\n\\nQuietude doesn't fit the meditation app category, the focus audio category, or the sleep tech category. The brand makes a stronger claim: **bottom-up nervous system regulation through spatial audio**, with clinical evidence as proof and somatic credibility as defense.\\n\\nThe category-defining frame, per Alex (2026-05-19): **Meditation is top-down. Quietude is bottom-up.** Meditation uses the mind to command the body — mental kung fu that fails the very people most likely to need help, because the prefrontal cortex is offline when stressed. Quietude enters through the brainstem, before the thinking mind. The body responds before it has to try. (Full content-pillar treatment in `meditation-vs-regulation.md`.)\\n\\nThis is the single most important strategic message. It belongs in App Store copy, onboarding, lifecycle email, SEO content, ambassador talking points, and the seed deck.\\n\\n### Who we're for (D2C ICP, distilled)\\n\\nOverstimulated high-achieving professionals, 25–45, urban (Bay Area, NYC, London, Berlin, Austin). Tech workers, founders, creators, academics, designers, consultants. Often neurodivergent (ADHD, HSP, gifted). Sophisticated wellness buyers — already invested heavily in their inner life.\\n\\n**Their stated problem:** *\\\"I can't shut my brain off. I've tried meditation apps. They don't work.\\\"*\\n\\n**Their real problem:** Overstimulation, not under-motivation. Their gift (quick thinking) became a curse. They need permission to stop optimizing — including their rest.\\n\\n**What they're actually buying:** the *feeling* of stability, sensory indulgence, beautiful rituals, effortless effectiveness, a luxurious shortcut to the genius they can't access in chaos.\\n\\n### The business model logic (per seed deck)\\n\\n**B2B seeds the market. D2C harvests.** A venue install puts Quietude in front of ~20K people/year at ~$17K cost → 5% convert to subs → ~$430K/year per venue. Six compound channels (referral, Guides, content, home hosting, PR, community) make CAC approach zero by Year 3. Year 5: 75% of new subs come from near-zero-cost channels.\\n\\n**fCMO scope per kickoff: D2C-led.** Alex owns B2B sales through events/network/founder credibility. The fCMO leverage is on the app/hardware D2C side. This plan reflects that split — B2B is acknowledged as the harvest engine but not treated as primary work surface.\\n\\n### Brand voice (the non-negotiable)\\n\\nPer Marketing OS:\\n- **Tone.** Authoritative yet accessible. Intimate yet professional. Revolutionary yet grounded. Authority comes from lived experience, not explanation.\\n- **Speak from the body, not the mind.** Every sentence restores somatic safety and orientation. Language opens space rather than closing meaning.\\n- **YES vocabulary:** Aliveness, inner life, nervous system, spatial sound, resonance, somatic safety, embodied clarity, natural rhythm, orientation, initiation, truth-telling.\\n- **NO vocabulary:** Zen, chill, vibes, \\\"high-vibe,\\\" spiritual bypass, meditation clichés, didactic/explainer language, \\\"let me explain why this works.\\\"\\n- **Core method: Initiatory Reflection.** Writing's purpose isn't to explain or convince — it's to shift the reader's internal state. The result should be *\\\"something in me moved,\\\"* not *\\\"I understand this concept.\\\"*\\n- **CTA rule:** Never pressure. \\\"We do not remind. We invite.\\\"\\n\\nThis rule constrains every piece of copy across every AARRR stage. When in doubt: rewrite from the body.\\n\\n---\\n\\n## 3. Current state\\n\\nThis is what we're starting from — team, budget, what's already in motion, what's stuck, scored against the CF Marketing Audit 17-section rubric.\\n\\n### Team composition (marketing surface area)\\n\\n| Person | Role | Marketing surface area |\\n|---|---|---|\\n| **Alex** | Co-founder, CEO | Owns: personal LinkedIn, live events, B2B sales, founder narrative, investor relations, brand voice authorship |\\n| **Sam** | Co-founder, CXO | Owns: clinical/somatic credibility, brand-voice stewardship, somatic angle on copy review, practitioner network |\\n| **Devon** | Lead Dev | Owns: product/UI build, instrumentation, Customer.io event wiring, App Store deployment |\\n| **Ed Dorsey** | Design Advisor | Advisory cadence (ex-Apple/Airbnb/Strava) |\\n| **Emily Babich** | Creative Strategy | Advisory cadence |\\n| **Matt Mikkelsen** | Field Recording | Audio library, not marketing |\\n| **Casey Reed** | fCMO | Strategy, lifecycle, SEO, onboarding tests, content, ambassador program, ops stack |\\n\\n**No dedicated marketing hire yet.** First hire likely post-seed close (Q3 2026 candidate): a lifecycle + content marketing manager who owns Customer.io, SEO content production, and ambassador operations day-to-day.\\n\\n### Marketing budget (current)\\n\\n- **Paid acquisition:** $0. Confirmed by Alex, 2026-05-20: *\\\"D2C UA so far: My personal LinkedIn posts, live Quietude events, organic word of mouth, and organic app store discovery.\\\"* No paid layer.\\n- **Tooling stack:** Customer.io subscription, Shopify (eye mask storefront), App Store Connect, GA4 (or pending), Stripe, Notion, Dub.co (ambassador attribution). Estimate ~$500–1,500/mo combined.\\n- **fCMO retainer:** Casey Reed engagement.\\n- **PR:** No paid PR. Organic longevity-influencer tailwind, consumer-tech angels + foundation-model lab network.\\n\\n**Implication:** The 90-day plan must produce gains without any paid lever pulled. Everything in the next 12 weeks is organic, lifecycle, or product-level. Paid is a Q2–Q3 unlock.\\n\\n### What's already done (acknowledge, then build on)\\n\\n| Asset | Status | Marketing leverage |\\n|---|---|---|\\n| Peer-reviewed peer-reviewed psychophysiology study (2025) | Published | Anchor of clinical authority. Most undermarketed asset Quietude owns. |\\n| longevity-influencer eye-mask endorsement | Live, generating Shopify sales | Press hook. Underused for landing-page social proof. |\\n| consumer-tech angels + foundation-model lab investment | Closed | Investor PR opportunity. \\\"Why I invested\\\" Substack/Medium pieces. |\\n| 15K+ live event participants over a decade | Real | Email list potential, ambassador pool, testimonial bank, B2B reference. |\\n| Quietude eye mask (5K in stock) | Selling | The wedge product. Hardware → app activation path. |\\n| 38% 12-month retention (vs. category avg 20%) | Real | Headline metric. Belongs everywhere. |\\n| Customer.io + Shopify integration | Wired | The lifecycle infrastructure exists. Flows just need to ship. |\\n| 4 GitHub repos for context + product | Set up | `quietude-context` (shared brain), `quietude-promo`, `quietude-app` (app), `mira` (AI), `quietude-api` |\\n| Alex's Sound Philosophy doc | Working doc | Linkable position paper once polished and published. |\\n| ~5 inbound ambassadors waiting | Inbound | Referral program ready to launch — no demand-gen needed for v1. |\\n| Aurora B2B install (~€250K, July deadline) | In-flight | First flagship venue. Reference case once installed. |\\n| Notion Knowledge Directory | Live | Internal context. |\\n| Customer.io MCP (Claude integration) | Validated on kickoff | Non-technical team can ship flows independently. |\\n\\n### What's in-flight (drafted but not shipped)\\n\\n| Item | Status | Blocker |\\n|---|---|---|\\n| Flow 2 — App Onboarding (8 emails / 14 days) | Draft | App UI in flux; copy references screens that may change |\\n| Flow 4 — Lapsed User Re-engagement (5 emails / 38 days) | Draft | None — ship-ready |\\n| Flow 6 — Eye Mask Post-Purchase | Draft | None — ship-ready |\\n| Onboarding rebuild (3-variant test plan) | Strategy doc done | Eng scoping + headphone-gate removal |\\n| SEO 90-day plan + keyword research | Done | Awaiting domain consolidation decision + content production start |\\n\\n### What's stuck (and needs to unstick this quarter)\\n\\n| Issue | Cost of inaction | Action |\\n|---|---|---|\\n| Headphones hard-gate in onboarding | Confirmed conversion drop post-launch | Kill this week (bedrock fix) |\\n| 4 domains unconsolidated (quietude.app, quietude.space, quietude.audio, quietude.center) | SEO authority fragmenting, transactional email confusion | Consolidate to `quietude.app` per SEO data |\\n| App Store listing copy not in brand voice | Highest-traffic Quietude surface; off-brand experience for arriving users | Rewrite in voice (Pillar 1) |\\n| Domain consolidation requires 301 plan + email sender migration | Risk of traffic loss if mishandled | Plan in weeks 1–2, execute weeks 3–4 |\\n| `quietude-promo` repo hasn't shipped since March 2026 | Marketing site is stale | Confirm whether it's live; rewrite or replace |\\n| 29% monthly App Store churn vs. 38% 12-month retention claim | Metric definition mismatch confusing the team | Reconcile with Devon + Customer.io data |\\n| Mira post-session reflection scope unknown | Blocks Variant B and Variant C onboarding tests | Resolve with Devon |\\n\\n### Audit rubric snapshot (17-section)\\n\\nScored 0–5 from materials, using the embedded rubric in `references/current-state-rubric.md`. Marked \\\"scored from materials\\\" rather than \\\"formal audit\\\" — Alex can push back on any score where they have better data.\\n\\n| # | Section | Score | Note |\\n|---|---|---|---|\\n| 1 | Positioning | **4** | Clear, original category claim. The bottom-up frame is the strongest piece. Needs broader external articulation. |\\n| 2 | Customer research | **4** | Deep founder-led research, decade of live participants. Could be more systematically captured. |\\n| 3 | Homepage | **2** | `quietude-promo` hasn't shipped since March. Off-brand voice in places. |\\n| 4 | Sales / product pages | **2** | Eye mask page exists on Shopify but isn't optimized for SEO or sales narrative. No app-product landing page in brand voice. |\\n| 5 | Conversion pages | **2** | `/partner` exists on `quietude.app`. No `/science`, `/eye-mask`, `/ambassadors`, `/guides` pages live. |\\n| 6 | Competitor comparison | **1** | Nothing exists. Big SEO + sales opportunity (own \\\"Quietude vs. Calm/Headspace/Brain.fm/Endel\\\" SERPs). |\\n| 7 | Resources / content | **1** | Sound Philosophy not yet public. peer-reviewed psychophysiology study not yet on a dedicated page. No blog. |\\n| 8 | Onboarding | **2** | Headphones gate killing conversion. Hold-and-fix project this quarter. |\\n| 9 | Email lifecycle | **1** | All three flows drafted, none live. Ship-order set. |\\n| 10 | Sales material | **3** | Seed deck is strong (investor-facing). B2B sales material more founder-led than asset-led. |\\n| 11 | Messaging | **5** | Alex + Sam have authored the most distinctive brand voice in the wellness category. This is a moat. |\\n| 12 | Pricing | **3** | $30/mo app, $45 eye mask, $7,500 speakers, $50–200K B2B. Hasn't been pressure-tested for D2C conversion lift. |\\n| 13 | CRO | **2** | App Store conversion rate trackable but no A/B history. Headphones gate is the obvious first test removal. |\\n| 14 | GTM / launches | **2** | App in throttled beta. Major launches (eye mask, Mira public) haven't had structured GTM. |\\n| 15 | Ads | **0** | No paid layer. Reflects the current organic strategy — not a weakness, but the budget unlock means this will move. |\\n| 16 | SEO | **1** | Current state: 7 organic visits/mo. Plan exists; execution not yet started. |\\n| 17 | Internationalization | **1** | Finland HQ + global ICP, but EN-only and US-centric copy. Defer until Q4+. |\\n\\n**Total: 36 / 85 (42%).** The shape matters more than the score: high in Positioning + Messaging + Customer research, low in Conversion pages + Email lifecycle + SEO + Resources + Ads. That's the gap this plan closes.\\n\\n---\\n\\n## 4. Acquisition\\n\\n> *\\\"How do strangers become aware of Quietude?\\\"*\\n\\n### Current state\\n\\n100% organic. Four real channels: Alex's personal LinkedIn, live Quietude events, organic word of mouth, organic App Store discovery. Plus passive PR drag from longevity-influencer endorsement + clinical study.\\n\\nThis is good news, not bad. Every dollar of revenue earned to date has been earned without paid acquisition. The bar to exceed it isn't high; the upside on top of an organic base is significant.\\n\\n### The plan\\n\\n**Channel 1 — SEO (primary 90-day investment).**\\nThe full 90-day plan lives in `seo/plan.md`. Summary: consolidate to `quietude.app`, target three asymmetric clusters (nervous-system regulation KD 14–32, weighted/blackout sleep mask KD 6–30, WELL + social-wellness-club B2B KD 5–34), publish 4 content pillars. 90-day target: 500–1,500 organic visits/mo, 80+ ranking keywords. 12-month target: 10,000/mo, 1,000+ keywords.\\n\\n**Channel 2 — App Store optimization (highest-leverage non-site asset).**\\nThe App Store listing is currently the most-visited Quietude URL by Apple's algorithm. Fixing the copy is higher-leverage this quarter than fixing the marketing site. Rewrite in brand voice. Add the meditation-vs-regulation framing. Lead with the clinical anchor. Test screenshot variations.\\n\\n**Channel 3 — Alex's LinkedIn (productize the channel).**\\nToday it's ad-hoc founder posting. The next move is structured: a 2–3x/week cadence, post categories that map to the content pillars (nervous system, sound science, founder journey, clinical evidence, behind-the-scenes), trackable links via Dub, follower → email subscriber → app install funnel measured. This is Alex's voice — the channel only works if he's the one writing. fCMO + Typefully scheduling makes the cadence sustainable.\\n\\n**Channel 4 — PR amplification.**\\nlongevity-influencer tailwind is real but underused on owned surfaces. Add a `/notable-users` or `/in-the-press` page. Pitch the peer-reviewed psychophysiology study to 5 outlets (wellness press: Well+Good, MindBodyGreen; tech-adjacent: Wired with the longevity-influencer hook; mainstream: Outside, Forbes Wellness). HARO/Help-A-B2B-Writer responses citing Quietude's data. Investor PR moments (\\\"Why I invested in Quietude\\\" Substack pieces from consumer-tech angels — push for these with backlinks).\\n\\n**Channel 5 — Event-to-app instrumentation.**\\nLive events are the highest-converting ICP exposure Quietude has (15K+ participants, decade of trust). They're un-instrumented. Add: per-event QR code → app install + email capture, post-event lifecycle (Customer.io Flow 7?), event ROI tracking. Goal: turn an event from a one-night conversion moment into a 30-day funnel.\\n\\n**Channel 6 — Eye mask wedge (consumer entry product).**\\n5K masks in stock. Shopify storefront exists but isn't optimized. Improvements: SEO-optimize the product page (target \\\"weighted sleep mask,\\\" \\\"blackout sleep mask,\\\" \\\"silk sleep mask\\\"), add reviews via Judge.me (per kickoff decision), 30-day return policy (US-market expectation, per kickoff), build the listicle (\\\"Quietude vs. Manta vs. Nodpod vs. Lumon\\\"). Consider Amazon listing as a v2 distribution play.\\n\\n**Channel 7 — B2B venue installs (kept lean per kickoff).**\\nAlex owns this. Marketing supports with: case studies after each install, `/partner` page rewrite in voice (already exists on quietude.app), Pillar 4 content (\\\"The Missing Sound Feature in WELL\\\"), reciprocal links from partner venues baked into contracts.\\n\\n**Channel 8 — Paid layer (unlocked post-seed close).**\\nHeld until seed funding lands. Initial test budget: $5–10K/mo split across Apple Search Ads (highest-intent for App Store), Meta (Instagram + Facebook for eye mask), LinkedIn (B2B venue buyers). Don't fire until: (a) onboarding bedrock fix is shipped, (b) Flow 6 is live, (c) at least one Pillar landing page is in voice. Paid amplifies what already works — premature paid amplifies what's broken.\\n\\n### 90-day acquisition moves\\n\\n- Weeks 1–2: Domain consolidation decision + 301 plan. App Store listing rewrite first pass.\\n- Weeks 3–4: Domain 301s executed. GSC migration. SEO Pillar 1 hub drafted.\\n- Weeks 5–8: Pillar 1 hub + 3 spokes published. Pillar 2 (Eye Mask) hub + listicle published. Alex's LinkedIn cadence operationalized via Typefully. peer-reviewed psychophysiology study lands on dedicated `/science` page.\\n- Weeks 9–12: Pillar 4 (WELL/B2B) cornerstone published. Sound Philosophy goes public at `/research/sound-philosophy`. First PR push: pitch study + longevity-influencer hook to 5 outlets.\\n\\n### 12-month acquisition outlook\\n\\n- Q1 (Months 1–3): Foundation. SEO pillars staked. App Store rewrite shipped. LinkedIn cadence stable. PR push launched.\\n- Q2 (Months 4–6, post-seed close): Paid acquisition pilot at $5–10K/mo. SEO compounding — Pillar 1 ranking. First B2B install reference case live.\\n- Q3 (Months 7–9): Paid scales to $20–30K/mo if unit economics hold. All four pillars producing. App GA — new GTM moment.\\n- Q4 (Months 10–12): Compound channels live. 50+ pieces of pillar content. First Quietude Guides program pilot creating local SEO + earned media.\\n\\n### Skills + tools\\n\\n- **Skills:** `seo-audit`, `ai-seo`, `programmatic-seo`, `schema`, `content-strategy`, `competitors`, `launch`, `ads`, `ad-creative`, `social`, `typefully`, `analytics`, `copywriting`, `marketing-website-design`, `free-tools`\\n- **MCPs / APIs:** Ahrefs API, DataForSEO API, Typefully MCP (LinkedIn scheduling), GA4 MCP (when wired), GitHub MCP (`quietude-promo` repo work), Notion (knowledge directory), Stripe MCP (LTV / paid-CAC math), `agent-browser` (LinkedIn drafting + testing), `defuddle` (research)\\n\\n---\\n\\n## 5. Activation\\n\\n> *\\\"Once someone tries Quietude, do they have an experience that converts?\\\"*\\n\\n### Current state\\n\\nDay 1 → paid: **1.34%**. Day 7 → paid: **3.73%**. Day 35 → paid: **5.46%**. *The funnel shape is the signal.* The ~4× lift over 35 days means the product converts given time and contact — both of which the current onboarding undermines and the lifecycle layer doesn't yet provide.\\n\\nCaveats: app is in throttled beta. Metrics are noisy. Don't optimize against absolutes; optimize against funnel *shape* and *cohort comparison*.\\n\\n### The plan\\n\\n**Move 1 — Kill the headphones hard-gate (bedrock fix, this week).**\\nConfirmed conversion drop after the gate shipped. The fix isn't better copy on the gate — it's removing the gate. Replace with passive headphone detection + soft single-line nudge. No regret change. Full reasoning in `onboarding-recommendation.md`.\\n\\n**Move 2 — Run the three-variant onboarding test.**\\nThree variants, each a pure expression of one belief about what drives activation in this ICP:\\n- **Variant 1 — Trust First.** Bold promise + clinical anchor + testimonial wall + 1-line mechanism. Tests whether the saturated ICP needs framing before they'll invest.\\n- **Variant 2 — Seen First.** Multi-step diagnostic → AI-generated \\\"we see you\\\" summary → personalized session. Tests whether being accurately named is the conversion event.\\n- **Variant 3 — Felt First.** Audio starts on app open. ~15 words on screen. The session IS the onboarding. Tests whether the product can carry it cold.\\n\\nTest sequence (sequential, ~7 weeks to a winner): bedrock baseline → V3 vs. baseline → winner vs. V1 → winner vs. V2. Full system in `onboarding-recommendation.md`.\\n\\n**Move 3 — App Store listing rewrite.**\\nHighest-leverage non-site asset. Rewrite in brand voice. Lead with meditation-vs-regulation. Screenshot variations to test. This is also an Acquisition move (organic discovery) but it lives here because it's the threshold to the trial.\\n\\n**Move 4 — Customer.io Flow 2 (held until UI stable).**\\nThe 8-email / 14-day onboarding sequence is drafted and on-brand. Holding the ship because the emails reference in-app screens that will change during the onboarding rebuild. Once a winning onboarding variant ships, Flow 2 gets a copy refresh against the final UI and goes live.\\n\\n**Move 5 — Paywall + pricing review (cross-cuts to Revenue).**\\nWhat's the current trial structure? Length, paywall trigger, intro pricing? When the funnel shape is \\\"lift over 35 days,\\\" extending trial may convert better than aggressively gating earlier. To be audited in Q1.\\n\\n### 90-day activation moves\\n\\n- Week 1: Headphones gate removed. Baseline established.\\n- Weeks 2–3: Variant 3 (Felt First) prototyped, instrumented, shipped to a test cohort.\\n- Weeks 4–5: Read Variant 3 vs. baseline. Decide ship/iterate. Begin Variant 1 build.\\n- Weeks 6–7: Variant 1 (Trust First) live.\\n- Weeks 8–9: Read V1 vs. winner. Begin Variant 2 build.\\n- Weeks 10–11: Variant 2 (Seen First) live.\\n- Week 12: Final read. Winning variant scheduled for permanent ship. Flow 2 unblocked.\\n\\n### 12-month activation outlook\\n\\n- Q1: Winning variant identified and shipped.\\n- Q2: Flow 2 ships. Paywall A/B tests start.\\n- Q3: GA launch — onboarding re-validated at higher traffic. Cohort segmentation by acquisition source (Shopify/eye-mask vs. direct vs. ambassador vs. paid) starts to drive variant forks.\\n- Q4: Onboarding is no longer the bottleneck. Focus moves to Activation → Retention transition (sessions 2–7).\\n\\n### Skills + tools\\n\\n- **Skills:** `onboarding`, `signup`, `cro`, `cro`, `paywalls`, `popups`, `copywriting`, `copy-editing`, `copycraft`, `marketing-website-design`, `ab-testing`, `marketing-psychology`\\n- **MCPs / APIs:** App Store Connect (manual + `dev-browser` for screenshot automation), GitHub MCP (`quietude-app` app repo for onboarding code), Figma / Pencil MCP (for onboarding screen design), Customer.io MCP (for any in-app/email coordination), GA4 MCP (activation events)\\n\\n---\\n\\n## 6. Retention\\n\\n> *\\\"Once someone converts, do they stay — and deepen?\\\"*\\n\\n### Current state\\n\\n**Headline metric (per seed deck): 38% 12-month retention** — nearly double the category average (~20%). This is the strongest single retention signal in the deck and one of the most undermarketed claims Quietude owns.\\n\\n**App Store snapshot, 2026-05-16:** 145 paid, 42 churned (~29% monthly churn). Definition mismatch with the 38% claim — to reconcile. Possibly: 38% is annual cohort retention (people who paid month 1 and still pay month 12), 29% is gross monthly churn (people who paid this month who didn't pay next month). Both can be true. Need to clarify which metric is reported externally and which is the actual product health signal.\\n\\n### The plan\\n\\n**Move 1 — Ship Flow 6 first (Eye Mask Post-Purchase).**\\nPer kickoff decision and the onboarding-recommendation doc: this is the ship-ready flow. Hardware-anchored, doesn't reference in-app screens, can ship today. Wires the hardware → app activation path (eye mask buyers should get a free 6-month Premium trial — formalize this as part of the flow).\\n\\n**Move 2 — Ship Flow 4 second (Lapsed User Re-engagement).**\\nFive emails over 38 days. Language is universal — doesn't depend on app UI state. Ship after Flow 6 is live.\\n\\n**Move 3 — Hold Flow 2 (Onboarding).**\\nEight emails over 14 days. Holds until app UI stabilizes post-onboarding-rebuild. Don't ship copy that will need rewriting in 8 weeks.\\n\\n**Move 4 — Customer.io subscription center with opt-in topics.**\\nPer kickoff decision. Topics: events, app updates, somatics & nervous system, eye mask promotions. Users self-segment. Improves deliverability (lower complaint rates) and gives lifecycle a richer segmentation surface.\\n\\n**Move 5 — Mira post-session reflection (when scoped).**\\nMost powerful retention move medium-term. After a session, Mira asks *\\\"What did you notice?\\\"* Optional preset chips + free text. Two payoffs: (a) gives Mira priors for personalization on session 2+, (b) reflection responses become a content + segmentation goldmine for the team. Scope question for Devon — does Mira currently support this, or is it new build?\\n\\n**Move 6 — Hardware → app activation flow.**\\nThe eye-mask-buyer-becomes-Premium-subscriber path is hinted in the seed deck (blended CAC via hardware) but isn't visible in the App Store dashboard. Audit the existing flow: does an eye mask Shopify purchase actually deliver a free Premium code? How is it redeemed? What's the conversion rate? This is foundational to the \\\"B2C wedge\\\" thesis.\\n\\n**Move 7 — Reconcile the retention metric.**\\nWhat's the actual definition of \\\"38% 12-month retention\\\"? Cohort? Plan type (monthly vs. annual)? Survives this even if the answer is uncomfortable — the team and investors need to be talking about the same metric.\\n\\n**Move 8 — Annual plan as default (cross-cuts to Revenue).**\\nIndustry pattern: defaulting to annual reduces churn anxiety and improves LTV. To test in Q2.\\n\\n### 90-day retention moves\\n\\n- Weeks 1–2: Flow 6 (eye mask post-purchase) ships. Address fixes from kickoff review (study link line break, CAN-SPAM footer, founder face-bubble signature, Judge.me reviews).\\n- Weeks 3–4: Flow 4 (lapsed user re-engagement) ships.\\n- Weeks 5–6: Customer.io subscription center built and live.\\n- Weeks 7–8: Hardware → app activation flow audited and documented. Fix any leaks.\\n- Weeks 9–10: Retention metric reconciliation (with Devon).\\n- Weeks 11–12: Win-back campaign for churned cohort — test re-activation copy.\\n\\n### 12-month retention outlook\\n\\n- Q1: Flows 6 + 4 firing. Subscription center live.\\n- Q2: Flow 2 ships (post-onboarding-rebuild). Mira post-session reflection in production. Annual plan default tested.\\n- Q3: GA launch — retention metrics re-baselined at higher volume. Cohort-based lifecycle flows (eye mask vs. direct app install).\\n- Q4: Full lifecycle compound. Retention is no longer a top-three concern — focus moves to Referral and Revenue.\\n\\n### Skills + tools\\n\\n- **Skills:** `emails`, `churn-prevention`, `copywriting`, `copy-editing`, `paywalls`, `ab-testing`\\n- **MCPs / APIs:** **Customer.io MCP** (validated on kickoff — non-technical team can ship flows), Shopify (eye mask buyers as event source), Stripe MCP (subscription state, churn cohort pulls), GA4 MCP (session events, retention curves)\\n\\n---\\n\\n## 7. Referral\\n\\n> *\\\"Do retained users bring more users — and at what cost?\\\"*\\n\\n### Current state\\n\\n~5 inbound ambassadors waiting (per kickoff). Dub.co set up. No formal program yet. WOM happens naturally per Alex's UA breakdown.\\n\\nThis is one of the strongest leading indicators in the business: 5 unaffiliated people have raised their hand asking to bring Quietude to their network *before any program exists*. That signal doesn't show up in apps with weaker product-market fit.\\n\\n### The plan\\n\\n**Move 1 — Launch the ambassador program with the 5 inbound.**\\nTier 1 of the program. Per-ambassador landing pages (e.g., `quietude.app/with/sarah`). Dub.co tracks attribution. Commission structure to determine (per kickoff, $/sub or rev-share TBD). Soft-launch with the 5 — treat as pilot cohort, gather feedback, refine before opening applications.\\n\\n**Move 2 — Build the share-after-shift moment.**\\nThe Mira post-session reflection (see Retention) is the natural moment to surface a share prompt. After a user reports a felt shift, offer: *\\\"Want to share Quietude with someone who needs this?\\\"* Single-line, never pushy. Most powerful WOM mechanism: gift-a-month flow where the recipient gets a discounted or free intro.\\n\\n**Move 3 — Founder amplification (Alex + Sam as ambassador-zero).**\\nAlex mentioning the fCMO engagement in fundraise pitches (permission granted). Reciprocal mentions in fCMO-side content. Sam's clinical network → practitioner ambassador pool.\\n\\n**Move 4 — Quietude Guides cert pilot (long-term, Q3+).**\\nThe Guides program is the Phase-2 referral compound (per seed deck). 500–1,000 Guides across 50+ cities by Y3–5. First cert pilot: 3–5 hosts who run live sessions, get a rev-share + co-marketing. Builds local SEO + earned media + ambassador-of-ambassadors flywheel. Hold until paid + lifecycle are firing — Guides is a multi-quarter build.\\n\\n**Move 5 — Eye mask gifting flow.**\\nHardware referral is rare and powerful. *\\\"Send a friend an Quietude eye mask. They get the mask + a free 3-month Premium. You get a credit toward your next thing.\\\"* Holiday/gifting peak windows are the test.\\n\\n### 90-day referral moves\\n\\n- Weeks 1–4: Ambassador program scoped, commission structure decided, per-ambassador landing page template built, 5 inbound onboarded.\\n- Weeks 5–8: First ambassador-driven sales tracked via Dub. Attribution and payout flow validated.\\n- Weeks 9–12: Open applications for next 10–15 ambassadors. Begin Quietude Guides scoping.\\n\\n### 12-month referral outlook\\n\\n- Q1: Ambassador program live with 5–10 active.\\n- Q2: 15–25 active ambassadors. Share-after-shift moment in production (post-Mira reflection).\\n- Q3: Guides cert pilot launched (3–5 hosts). Eye mask gifting flow live for holiday peak.\\n- Q4: 50+ ambassadors + 5–10 Guides. Referral driving 15–25% of new D2C subs.\\n\\n### Skills + tools\\n\\n- **Skills:** `referrals`, `social`, `copywriting`, `marketing-website-design` (per-ambassador landing pages)\\n- **MCPs / APIs:** Dub.co (attribution — already in stack), Stripe MCP (commission accounting + payouts), GitHub MCP (landing page deployment in `quietude-promo` or new `quietude-ambassadors` repo), Customer.io MCP (ambassador lifecycle: onboarding, monthly performance digest, payout notification)\\n\\n---\\n\\n## 8. Revenue\\n\\n> *\\\"What do we charge, who pays, and how does that compound?\\\"*\\n\\n### Current state\\n\\n| Product | Price | Volume signal |\\n|---|---|---|\\n| Quietude App + Mira | ~$30/mo | 145 paid subs (App Store snapshot 2026-05-16) |\\n| Quietude Eye Mask | ~$45 | 5K in stock, longevity-influencer PR-driven sales |\\n| Quietude Audio (speakers) | ~$7,500 | Niche, founder-led |\\n| Quietude Spaces (B2B install) | $50–200K | Aurora flagship in-flight (~€250K), pipeline of 4 venues |\\n| Quietude Experiences (events) | Varies | 15K+ historical participants |\\n| Quietude Guides | Rev share | Not yet operational |\\n\\n**Revenue to date: ~$500K on ~$250K raised.** Capital-efficient. Hardware + B2B + app subs all contributing.\\n\\n**MRR (App Store snapshot): $592.** Beta-throttled, not steady-state. The implied ~$4/sub/mo against $30/mo list suggests heavy annual plan adoption (which compresses monthly revenue but improves LTV) or significant promotional pricing — to reconcile with Alex.\\n\\n### The plan\\n\\n**Move 1 — Pricing audit.**\\nWhat's actually being charged today? List price, common plan mix, intro pricing, churn-recovery offers? The $4/sub/mo implied math doesn't tell a clean story — need ground truth before recommending changes.\\n\\n**Move 2 — Annual plan as default (test).**\\nIndustry pattern, cross-references to Retention. Test in Q2.\\n\\n**Move 3 — Hardware → app bundling formalized.**\\nPer partner-event-business framing in the seed deck: blended CAC via hardware → app subscription is the play. Today an eye mask buyer gets... what, exactly? Free Premium? Trial code? Audit + formalize. The eye mask is the wedge; the app is the LTV.\\n\\n**Move 4 — Eye mask Shopify storefront optimization.**\\nThe current page underperforms what it could. Add: SEO targeting (\\\"weighted sleep mask,\\\" \\\"blackout sleep mask\\\"), Judge.me reviews (kickoff decision), 30-day return policy (kickoff decision), upsell flow into Premium app.\\n\\n**Move 5 — Consider Amazon listing for eye mask.**\\nAmazon takes margin but is its own discovery engine. Test as v2 distribution if Shopify volume validates.\\n\\n**Move 6 — B2B install case studies + sales material.**\\nAlex owns B2B sales but marketing supports with: post-install case studies (Aurora as the flagship), `/partner` page rewrite in voice, Pillar 4 SEO content. Each B2B install is a ~$430K/year recurring + reference-case multiplier.\\n\\n**Move 7 — Data licensing (long-term, flag for ops stack).**\\nPer seed deck Y10–15 value pool: $100–160M/yr. Not immediate revenue. Belongs in the 24-month strategic agenda. Flag here so we don't lose sight.\\n\\n### 90-day revenue moves\\n\\n- Weeks 1–2: Pricing audit. Reconcile implied vs. listed MRR.\\n- Weeks 3–4: Hardware → app activation flow audited (also Retention move 6).\\n- Weeks 5–8: Eye mask Shopify page rewrite + SEO optimization + Judge.me + return policy. Aurora case study scaffolded for post-install.\\n- Weeks 9–12: Annual plan default test scoped.\\n\\n### 12-month revenue outlook\\n\\n- Q1: Pricing audit closes. Hardware → app activation formalized.\\n- Q2: Annual plan default test live. Eye mask Shopify producing measurable lift.\\n- Q3: B2B install case studies (1–2) published. GA launch + new pricing tier consideration (e.g., a higher-tier Mira-heavy plan?).\\n- Q4: Pricing optimized via test results. Hardware → app blended CAC tracked and reported. First numbers on the data-licensing thesis (still very early).\\n\\n### Skills + tools\\n\\n- **Skills:** `pricing`, `paywalls`, `sales-enablement`, `revops`, `ab-testing`, `copywriting`\\n- **MCPs / APIs:** Stripe MCP (pricing tests, subscription analytics, churn cohort, blended CAC math), Customer.io MCP (paywall-related lifecycle), Shopify (eye mask transactions), GA4 MCP (revenue events), Notion (commercial knowledge directory)\\n\\n---\\n\\n## 9. 90-day roadmap\\n\\nTactical execution layer. Each item is AARRR-tagged so priority is visible.\\n\\n### Weeks 1–2 — Unblock\\n\\n| Move | Stage | Owner |\\n|---|---|---|\\n| Kill the headphones hard-gate | Activation | Casey + Devon |\\n| Domain consolidation decision documented | Acquisition | Casey + Alex |\\n| 301 plan drafted (page-by-page) | Acquisition | Casey |\\n| App Store listing rewrite — first pass | Activation + Acquisition | Casey + Alex + Sam (voice review) |\\n| Flow 6 (eye mask post-purchase) ships | Retention | Casey + Customer.io MCP |\\n| Ambassador program scoping doc | Referral | Casey |\\n| Pricing audit kicked off | Revenue | Casey + Alex |\\n\\n### Weeks 3–4 — Foundation\\n\\n| Move | Stage | Owner |\\n|---|---|---|\\n| Domain consolidation 301s executed | Acquisition | Devon + Casey |\\n| GSC + GA4 stood up on `quietude.app` | Acquisition | Casey |\\n| SEO Pillar 1 hub drafted (Nervous System Regulation) | Acquisition | Casey |\\n| `/science` hub built with peer-reviewed psychophysiology study | Acquisition + brand | Casey + Sam |\\n| Variant 3 (Felt First) onboarding prototyped + tested | Activation | Casey + Devon |\\n| Flow 4 (lapsed user) ships | Retention | Casey |\\n| Ambassador program: 5 inbound onboarded | Referral | Casey |\\n| Hardware → app activation flow audited | Retention + Revenue | Casey + Devon |\\n| App Store listing rewrite — final + ship | Activation + Acquisition | Alex + Sam + Casey |\\n\\n### Weeks 5–8 — Velocity\\n\\n| Move | Stage | Owner |\\n|---|---|---|\\n| Pillar 1 hub + 3 spokes published | Acquisition | Casey |\\n| Pillar 2 hub (Eye Mask) + listicle published | Acquisition | Casey |\\n| Alex's LinkedIn cadence operationalized (Typefully) | Acquisition | Alex + Casey |\\n| First PR push: study + longevity-influencer hook to 5 outlets | Acquisition | Casey + Alex |\\n| Variant 3 read; ship or iterate | Activation | Casey |\\n| Variant 1 (Trust First) prototyped + tested | Activation | Casey + Devon |\\n| Customer.io subscription center built | Retention | Casey |\\n| Eye mask Shopify storefront rewrite (SEO + reviews + return) | Acquisition + Revenue | Casey + Alex |\\n| First ambassador attribution verified via Dub | Referral | Casey |\\n\\n### Weeks 9–12 — Compound\\n\\n| Move | Stage | Owner |\\n|---|---|---|\\n| Pillar 4 (WELL/B2B) cornerstone published | Acquisition | Casey |\\n| 3 more Pillar 1 spokes published | Acquisition | Casey |\\n| Sound Philosophy published at `/research/sound-philosophy` | Acquisition + brand | Alex + Casey |\\n| Variant 1 read; begin Variant 2 (Seen First) build (Mira-dependent) | Activation | Casey + Devon |\\n| Win-back campaign for churned cohort | Retention | Casey |\\n| Annual plan default test scoped | Revenue | Casey + Alex |\\n| Open ambassador applications for next 10–15 | Referral | Casey |\\n| 90-day review + Q2 plan recalibration | Cross-cutting | Casey + Alex |\\n\\n---\\n\\n## 10. 12-month outlook\\n\\nQuarterly milestones with funding-stage capability unlocks named explicitly.\\n\\n### Q1 — Months 1–3 (Jun–Aug 2026)\\n\\n**Funding state:** Pre-seed-close. Paid budget = $0. fCMO + founder-led + tool costs only.\\n\\n**Focus:** Foundation. Plug the leaks. Stake the SEO ground. Get lifecycle firing.\\n\\n**Outcomes by end of Q1:**\\n- Headphones gate gone; onboarding winner identified\\n- All four SEO pillars seeded (hub + first spokes)\\n- Lifecycle Flows 4 + 6 live\\n- App Store listing in brand voice\\n- 5 ambassadors active\\n- Pricing audit closed\\n- Domain consolidated\\n\\n**KPI targets:** Onboarding Day 1 → paid lift of 25–50%. Organic traffic 500–1,500/mo. App Store conversion rate +20%.\\n\\n### Q2 — Months 4–6 (Sep–Nov 2026)\\n\\n**Funding state:** Seed close (~Q3 2026 target). First paid budget unlock: $5–10K/mo test.\\n\\n**Focus:** Validate paid. Scale winning onboarding. Add Flow 2.\\n\\n**Outcomes by end of Q2:**\\n- Paid acquisition firing on Apple Search Ads + Meta\\n- Onboarding winner permanently shipped\\n- Flow 2 (onboarding emails) shipped\\n- Mira post-session reflection in production\\n- 15–25 ambassadors active\\n- First B2B install reference case (Aurora) published\\n- Annual plan default tested\\n\\n**KPI targets:** Paid CAC < $50 blended. Organic traffic 1,500–3,500/mo. Retention curves visibly improving.\\n\\n### Q3 — Months 7–9 (Dec 2026–Feb 2027)\\n\\n**Funding state:** Seed deployment. Paid scales to $20–50K/mo if unit economics hold. First marketing hire (lifecycle + content manager).\\n\\n**Focus:** Scale + diversify. App GA. B2B reference cases compound.\\n\\n**Outcomes by end of Q3:**\\n- App GA launched with new GTM moment (PR + ad creative refresh + Pillar 3 spatial-audio-science content cycle)\\n- First Quietude Guides cert pilot (3–5 hosts)\\n- All four pillars producing weekly content\\n- Eye mask gifting flow live for holiday peak\\n- New marketing hire onboarded\\n\\n**KPI targets:** Paid + organic blended CAC stabilizing. App GA conversion +50% from beta baseline. Guides pilot validates rev-share + co-marketing model.\\n\\n### Q4 — Months 10–12 (Mar–May 2027)\\n\\n**Funding state:** Pre–Series A. Paid scaling continues. Series A pitch in motion.\\n\\n**Focus:** Compound. Position for Series A.\\n\\n**Outcomes by end of Q4:**\\n- Compound channels (organic + ambassador + Guides + lifecycle) producing 50%+ of new subs\\n- 50+ ambassadors, 5–10 Guides\\n- 4 SEO pillars + 30+ pieces of content live\\n- Paid scaling to $50–150K/mo if validated\\n- Series A narrative: clinical evidence + activation lift + lifecycle compounding + B2B reference case pipeline\\n\\n**KPI targets:** D2C ARR run-rate trajectory clear. Blended LTV/CAC > 3. Founder narrative + data + reference cases ready for Series A.\\n\\n---\\n\\n## 11. Marketing operations stack\\n\\nThis is what makes the plan executable at Quietude's team size. A 4-person founder team + fCMO + agentic tooling can ship the output of a 15–20-person traditional marketing org — because the marketing skill library and MCP integrations do the orchestration.\\n\\n### The thesis\\n\\nEvery move in the AARRR breakdown above maps to (a) one or more marketing skills that operationalize the work, and (b) one or more MCP/API integrations that let it execute without a dedicated headcount per channel.\\n\\nThe fCMO's job is to:\\n1. Define the strategy and sequencing (this doc)\\n2. Run the skills against the right context at the right time\\n3. Maintain the shared context (`quietude-context`) and tooling so Alex + Sam + future hires can plug in\\n4. Hand off operational work to humans (or future hires) only where the cost of agentic execution > human execution\\n\\n### Skills mapped to AARRR stages\\n\\n| Stage | Primary skills | Supporting skills |\\n|---|---|---|\\n| **Acquisition** | `seo-audit`, `ai-seo`, `programmatic-seo`, `schema`, `content-strategy`, `competitors`, `ads`, `ad-creative`, `social`, `typefully` | `launch`, `free-tools`, `analytics`, `cold-email`, `copywriting`, `marketing-website-design` |\\n| **Activation** | `onboarding`, `signup`, `paywalls`, `cro`, `copywriting`, `copy-editing`, `copycraft` | `marketing-website-design`, `ab-testing`, `marketing-psychology`, `cro`, `popups` |\\n| **Retention** | `emails`, `churn-prevention` | `copywriting`, `copy-editing`, `ab-testing`, `paywalls` |\\n| **Referral** | `referrals`, `social` | `copywriting`, `marketing-website-design`, `emails` |\\n| **Revenue** | `pricing`, `paywalls`, `sales-enablement`, `revops` | `ab-testing`, `copywriting` |\\n| **Cross-cutting** (brand, intelligence) | `product-marketing`, `customer-research`, `marketing-psychology` | `marketing-ideas`, `diagram-maker` |\\n\\n### MCPs / APIs mapped to stages\\n\\n| Stage | Existing connections at Quietude | Tooling layer (Casey's fCMO stack) |\\n|---|---|---|\\n| **Acquisition** | App Store Connect (manual), Shopify, GA4 (in progress), Notion | Ahrefs API, DataForSEO API, Typefully MCP, GitHub MCP (`quietude-promo`), `agent-browser`, `defuddle` |\\n| **Activation** | App Store Connect, Customer.io, Shopify | App Store Connect (via `dev-browser` for screenshot automation), Figma / Pencil MCP, GitHub MCP (`quietude-app` app repo), Stripe MCP |\\n| **Retention** | **Customer.io (with Claude MCP — validated on kickoff)**, Stripe, Shopify | Customer.io MCP, Stripe MCP, GA4 MCP |\\n| **Referral** | Dub.co, Stripe | Dub.co, Stripe MCP, GitHub MCP (per-ambassador landing pages), Customer.io MCP |\\n| **Revenue** | Stripe, Shopify, Customer.io | Stripe MCP, Shopify, GA4 MCP, Notion |\\n| **Cross-cutting** | Notion, GitHub (`quietude-context`) | Notion, GitHub MCP, `defuddle`, `obsidian-cli` (for Casey's working notes) |\\n\\n### The Customer.io MCP unlock (concrete example)\\n\\nPer kickoff call: *\\\"Built live on call — abandoned-cart flow drafted using Customer.io's Claude MCP. Validated that non-technical team can use the skill pattern independently.\\\"*\\n\\nThis is the operational proof that the stack works. Alex, who is not a developer, drafted a working lifecycle flow with Claude + Customer.io MCP in real time on a kickoff call. The same pattern applies to: Flow 4 ship (lapsed user re-engagement), subscription center build, win-back campaign, eye mask gifting flow, ambassador lifecycle. The fCMO's role becomes orchestration + brand-voice QA, not hand-cranking each email.\\n\\n### Capability unlocks by funding stage\\n\\n| Stage | Headcount | Tooling | Channels live |\\n|---|---|---|---|\\n| **Pre-seed-close (now)** | fCMO + founder team | All current tooling + Casey's marketing skill library + MCP layer | Organic only (SEO, content, App Store, LinkedIn, events, WOM, ambassador) |\\n| **Seed close (~Q3 2026)** | + first marketing hire (lifecycle/content) by end of Q3 | + paid ad accounts (Apple Search Ads, Meta, LinkedIn) | + paid acquisition pilot $5–10K/mo |\\n| **Seed deployment (Q3–Q4 2026)** | + designer (potentially fractional) | + analytics expansion (Mixpanel or Amplitude if needed) | + paid scaling $20–50K/mo, + Guides cert pilot |\\n| **Series A (2027)** | + performance marketing lead + content lead | + dedicated tooling spend (~$2–5K/mo software) | + paid scaling $50–150K/mo, + international, + B2B vertical expansion |\\n\\nThe marketing skill library scales these stages. Every channel added doesn't require a 1:1 headcount increase because each skill encodes the workflow.\\n\\n---\\n\\n## 12. Tactical idea bank — 139-idea cross-reference\\n\\nThe `marketing-ideas` skill catalogs 139 proven marketing tactics. Sections 4–8 (AARRR) prescribe what we're *doing*. This section maps the full universe of what's *possible* — every idea cross-referenced to the AARRR stage it primarily serves, with Quietude applicability and timing.\\n\\nThis is the exhaustive menu. The plan above is the curated path. When we move to Q2 / Q3 / Series A and unlock new capacity, this is the inventory we pull from.\\n\\n**Status legend:**\\n\\n- **Now (Q1)** — already in the 90-day plan OR can run alongside it without new capacity\\n- **Q2** — post-bedrock-fix, post-foundation; second-quarter layer-ins\\n- **Q3+** — post-seed-close, post-GA; expansion moves\\n- **Q4+** — long-game / large-investment moves\\n- **Skip / off-brand** — incompatible with Quietude's brand voice, business model, or product category\\n\\n### 12.1 Acquisition ideas (88 mapped)\\n\\n**Now (Q1):**\\n\\n| # | Idea | Quietude note |\\n|---|---|---|\\n| 1 | Easy Keyword Ranking | SEO plan Tier-1 cluster (nervous system, sleep mask, B2B) targets this directly |\\n| 2 | SEO Audit | Run `/seo-audit quietude.app` quarterly; publish findings as content |\\n| 5 | Content Repurposing | Sound Philosophy → essays → LinkedIn posts → newsletter → podcast loop |\\n| 6 | Proprietary Data Content | peer-reviewed psychophysiology study now; anonymized Quietude HRV / sleep dataset later |\\n| 7 | Internal Linking | Built into the pillar/spoke structure of the SEO plan |\\n| 10 | Parasite SEO | Alex's LinkedIn already does this; consider mirror to Substack |\\n| 12 | Marketing Jiu-Jitsu | Meditation-vs-Regulation IS this — turn \\\"meditation works\\\" assumption against itself |\\n| 36 | Quora Marketing | Answer \\\"why meditation doesn't work for me\\\" + HRV + somatic questions |\\n| 37 | Reddit Keyword Research | Mine r/somatic, r/CPTSD, r/HSP, r/ADHD for ICP language (feeds Customer Language #139) |\\n| 39 | LinkedIn Audience | Alex's channel productized — primary D2C top-of-funnel today |\\n| 59 | Article Quotes | HARO / Help-A-B2B-Writer for Alex + Sam — easy press wins |\\n| 70 | Conference Speaking | Alex: WELL Conference, biophilic design events, Mindful Leadership Summit |\\n| 74 | Press Coverage | Pitch peer-reviewed study + longevity-influencer hook to 5 outlets in Q1 |\\n| 109 | Public Demos | Live Quietude events ARE this; instrument the in-person → app conversion |\\n| 114 | Moneyball Marketing | Already practicing — asymmetric SEO keywords, undervalued channels |\\n| 133 | Investor Marketing | Alex's raise — leverage angel backchannel for PR + intros |\\n\\n**Q2:**\\n\\n| # | Idea | Quietude note |\\n|---|---|---|\\n| 3 | Glossary Marketing | Sound + nervous system glossary — \\\"what is polyvagal,\\\" \\\"what is HRV,\\\" \\\"what is somatic listening\\\" |\\n| 8 | Content Refreshing | Revisit Pillar 1 quarterly with new data and search-intent updates |\\n| 11 | Competitor Comparison Pages | Quietude vs. Calm / Headspace / Brain.fm / Endel / Wavepaths — high-intent SERPs |\\n| 13 | Competitive Ad Research | SpyFu + Facebook Ad Library before launching paid |\\n| 17 | Quiz Marketing | \\\"What's your nervous system profile?\\\" — generates personalization seed + lead capture |\\n| 25 | Facebook Ads | Eye mask creative + somatic content + retargeting from event attendees |\\n| 26 | Instagram Ads | Visual product + Reels-native ads (eye mask especially) |\\n| 28 | LinkedIn Ads | B2B venue buyers + investor-adjacent ICP |\\n| 31 | Google Ads | Apple Search Ads first (App Store intent); Google for eye mask + B2B |\\n| 38 | Reddit Marketing | Authentic participation in r/somatic, r/HSP, r/ADHD after content base exists |\\n| 40 | Instagram Audience | Eye mask + somatic creators; Reels-native |\\n| 44 | Comment Marketing | Thoughtful comments on Huberman / the partner-event-business / Tim Ferriss / wellness creators |\\n| 49 | Monthly Newsletters | Either Quietude-branded or sync with Sam's Sam's Substack newsletter |\\n| 54 | Affiliate Discovery via Backlinks | Find who links to Calm/Headspace/Brain.fm — pitch them on Quietude affiliate program |\\n| 58 | Newsletter Swaps | the partner-event-business, founder wellness Substacks, Alex's investor network |\\n| 64 | Community Sponsorship | Somatic newsletters, wellness Substacks, founder communities |\\n| 65 | Live Webinars | Alex + Sam hosting \\\"Sound + the Nervous System\\\" |\\n| 101 | Industry Interviews | Alex + Sam interview category experts (becomes seed of Quietude podcast) |\\n| 102 | Social Screenshots | Mira reflection responses (anonymized, consented) — social proof gold |\\n| 108 | Changelogs | Public changelog at `quietude.app/changes` — product momentum signal |\\n| 115 | Curation as Marketing | Curated \\\"field recordings of the year\\\" feature; Quietude Spaces directory |\\n| 135 | Support as Marketing | Surface customer support / Mira reflection moments as content |\\n| 138 | Podcast Tours | Alex on Huberman, the partner-event-business, Tim Ferriss, Rich Roll, Rangan Chatterjee |\\n\\n**Q3+:**\\n\\n| # | Idea | Quietude note |\\n|---|---|---|\\n| 4 | Programmatic SEO | Quietude Guides city pages once Guides program scales |\\n| 9 | Knowledge Base SEO | When help docs scale enough to have problem-solution coverage |\\n| 14 | Side Projects | Eventually a free Quietude-adjacent tool that lives outside the app |\\n| 15 | Engineering as Marketing | HRV interpretation guide; nervous system self-assessment; sound bath finder directory |\\n| 18 | Calculator Marketing | Sleep latency calculator; overstimulation index |\\n| 20 | Microsites | For specific GTM moments (e.g., Mira GA launch) |\\n| 23 | Podcast Advertising | Huberman, Tim Ferriss, Rich Roll, the partner-event-business — host-read most relevant |\\n| 24 | Pre-targeting Ads | Warm audiences via content before direct-response |\\n| 29 | Reddit Ads | r/HSP, r/ADHD, r/somatic — high ICP density, low advertiser saturation |\\n| 30 | Quora Ads | Intent-rich for \\\"why meditation doesn't work\\\" queries |\\n| 32 | YouTube Ads | Pre-roll on Huberman / Lex Fridman / wellness creator videos |\\n| 33 | Cross-Platform Retargeting | Standard layer once paid is firing |\\n| 35 | Community Marketing | Quietude Spaces community (Discord/Circle); host monthly drop-ins |\\n| 42 | Short Form Video | TikTok / Reels — somatic education + eye mask UGC |\\n| 55 | Influencer Whitelisting | Run ads through ambassador / Guide accounts for authenticity |\\n| 57 | Expert Networks | Quietude Guides program IS this — certified hosts who can market |\\n| 60 | Pixel Sharing | Standard once paid is firing |\\n| 61 | Shared Slack Channels | Partner venue Slacks (Aurora, Lumen, Stillwater) |\\n| 63 | Integration Marketing | Apple Health (HRV data), Oura, Whoop — co-marketing |\\n| 66 | Virtual Summits | Quietude participates or hosts |\\n| 68 | Local Meetups | Cities with high ICP density (SF, NYC, LA, Austin) |\\n| 69 | Meetup Sponsorship | Sponsor wellness / biohacking meetups |\\n| 72 | Conference Sponsorship | Industry conferences once budget unlocks |\\n| 75 | Fundraising PR | \\\"Quietude raises $3M\\\" moment when seed closes |\\n| 78 | Product Hunt Launch | Mira public launch moment |\\n| 79 | Early-Access Referrals | App GA early-access list (cross-references to Referral) |\\n| 81 | Early Access Pricing | App GA — early-access tier locked in for first cohort |\\n| 82 | Product Hunt Alternatives | BetaList, Launching Next, AlternativeTo at GA |\\n| 97 | Playlists as Marketing | Quietude curates Spotify playlists for somatic listening |\\n| 98 | Template Marketing | Free \\\"nervous system reset\\\" protocol PDFs |\\n| 100 | Promo Videos | High-quality brand films — Ed Dorsey advises, Matt Mikkelsen field audio |\\n| 103 | Online Courses | Alex's Sound Philosophy course; Sam's somatic methodology course |\\n| 107 | Podcasts | Quietude podcast — interview format with category experts and customers |\\n| 111 | Challenges as Marketing | \\\"21-day nervous system reset\\\" — tasteful, no fitness-bro tone |\\n| 113 | Controversy as Marketing | Meditation-vs-Regulation IS mild controversy — lean in carefully |\\n| 126 | YouTube Reviews | Pitch Quietude to wellness YouTubers — Huberman fan-creator tier |\\n| 127 | YouTube Channel | Sound design behind-the-scenes; Sam session demos |\\n| 129 | Review Sites | App Store reviews actively managed; Trustpilot for eye mask Shopify |\\n| 130 | Live Audio | Twitter Spaces / LinkedIn Audio with Alex on sound + body |\\n| 134 | Certifications | Quietude Guides cert IS this — Q3+ pilot |\\n\\n**Q4+ / long-game:**\\n\\n| # | Idea | Quietude note |\\n|---|---|---|\\n| 56 | Reseller Programs | Corporate wellness platforms (Modern Health, Lyra) as resellers |\\n| 67 | Roadshows | Quietude Experiences IS this — eye mask + listening session pop-ups in 3 cities |\\n| 71 | Conferences | Quietude-hosted \\\"Sound + the Body\\\" — long-game category-defining moment |\\n| 76 | Documentaries | Alex's story is documentary-grade — long game |\\n| 77 | Black Friday Promotions | Holiday eye mask + Premium bundle |\\n| 80 | New Year Promotions | New Year nervous system reset campaign |\\n| 84 | Giveaways | Eye mask giveaway with brand partner (Wellness Mama tier) |\\n| 85 | Vacation Giveaways | Quietude + retreat partner giveaway (quietude.center could be venue) |\\n| 87 | Powered By Marketing | \\\"Sound system by Quietude\\\" badge in B2B venue installs |\\n| 104 | Book Marketing | Sound Philosophy as a book — long-game positioning anchor |\\n| 105 | Annual Reports | \\\"State of the Nervous System\\\" — Quietude's data + industry commentary |\\n| 106 | End of Year Wraps | \\\"Your nervous system year\\\" — Spotify Wrapped equivalent |\\n| 110 | Awards as Marketing | Quietude founds an award for innovative biophilic acoustic design |\\n| 116 | Grants as Marketing | Free Quietude subscriptions for therapists, social workers, first responders |\\n| 119 | OOH Advertising | SF / NYC billboards if Series A budget unlocks |\\n| 120 | Marketing Stunts | Public sound installation could work — brand-fitting |\\n| 121 | Guerrilla Marketing | Sound installation in subway / airport — interesting but requires care |\\n| 131 | International Expansion | Finland HQ + global ICP — Q4 or post-Series A |\\n\\n**Skip / off-brand for Quietude:**\\n\\n| # | Idea | Why skip |\\n|---|---|---|\\n| 16 | Importers as Marketing | No competitor data to import (consumer wellness, not SaaS) |\\n| 19 | Chrome Extensions | Off-platform (mobile-first product) |\\n| 21 | Scanners | No obvious product fit |\\n| 22 | Public APIs | Not core business |\\n| 27 | Twitter Ads | Lower priority unless Alex's X presence grows |\\n| 34 | Click-to-Messenger Ads | Off-brand (no DM-driven sales pattern) |\\n| 41 | X Audience | Depends on Alex's bandwidth — defer unless he wants to |\\n| 43 | Engagement Pods | Off-brand |\\n| 73 | Media Acquisitions | Too capital-intensive at this stage |\\n| 83 | Twitter Giveaways | Off-brand voice |\\n| 86 | Lifetime Deals | Brand-conflict — pressures the \\\"no pressure\\\" voice and damages LTV math |\\n| 88 | Free Migrations | No competitor data to migrate |\\n| 89 | Contract Buyouts | Not relevant for D2C subs |\\n| 99 | Graphic Novel Marketing | Off-brand |\\n| 112 | Reality TV Marketing | Off-brand |\\n| 117 | Product Competitions | Not a developer product |\\n| 118 | Cameo Marketing | Off-brand |\\n| 122 | Humor Marketing | Brand voice is serious; humor would feel off |\\n| 123 | Open Source as Marketing | Proprietary audio library |\\n| 125 | App Marketplaces | Not relevant for native consumer app (no app-of-app pattern) |\\n| 128 | Source Platforms | G2 / Capterra are B2B-focused; D2C uses App Store reviews |\\n| 132 | Price Localization | Q4+ — tied to international expansion |\\n| 136 | Developer Relations | Not a dev product |\\n\\n### 12.2 Activation ideas (7 mapped)\\n\\n| # | Idea | Status | Quietude note |\\n|---|---|---|---|\\n| 124 | App Store Optimization | Now | Q1 priority — listing rewrite in voice (also Acquisition) |\\n| 90 | One-Click Registration | Now | OAuth (Apple, Google) for app signup — standard activation lift |\\n| 51 | Onboarding Emails | Q2 | Flow 2 — held until UI stable post-onboarding-rebuild |\\n| 96 | Onboarding Optimization | Q1-Q2 | The 3-variant test IS this — primary activation work |\\n| 47 | Founder Welcome Email | Q2 | Personal welcome from Alex or Sam early in Flow 2 |\\n| 48 | Dynamic Email Capture | Q2 | Smart capture on `quietude.app` — exit intent + scroll depth |\\n| 95 | Concierge Setup | Q3+ | High-touch onboarding for B2B venue clients + high-value subscribers |\\n\\n### 12.3 Retention ideas (8 mapped)\\n\\n| # | Idea | Status | Quietude note |\\n|---|---|---|---|\\n| 46 | Reactivation Emails | Now | Flow 4 ships in weeks 3–4 — exactly this |\\n| 52 | Win-back Emails | Q1 (week 11-12) | Standalone campaign on top of Flow 4 |\\n| 53 | Trial Reactivation | Q2 | Expired-trial recovery campaign once paywall is firing |\\n| 45 | Mistake Email Marketing | Q2 | When something genuinely goes wrong, send \\\"oops\\\" — drives engagement |\\n| 50 | Inbox Placement | Q1 | Subdomain silo strategy (`mail.quietude.app` / `commerce.quietude.app`) addresses this |\\n| 91 | In-App Upsells | Q2 | Premium upsell points within app (also Revenue) |\\n| 94 | Offboarding Flows | Q2 | Optimize cancellation flow to retain or learn — feeds churn intel |\\n| 135 | Support as Marketing | Q2 | Customer support stories surface as content (also Acquisition) |\\n\\n### 12.4 Referral ideas (5 mapped)\\n\\n| # | Idea | Status | Quietude note |\\n|---|---|---|---|\\n| 62 | Affiliate Program | Now | Ambassador program v1 is exactly this — launched with the 5 inbound |\\n| 137 | Two-Sided Referrals | Q2 | Reward both referrer and referred — share-after-shift moment + gifting flow |\\n| 92 | Newsletter Referrals | Q3 | If we launch a newsletter, Sparkloop-style referral mechanic |\\n| 93 | Viral Loops | Q3 | Built-in share mechanics post-Mira reflection |\\n| 79 | Early-Access Referrals | Q3 | App GA early-access list referrals (cross-references to Acquisition) |\\n\\n### 12.5 Revenue ideas (3 mapped — most ideas serve top-of-funnel)\\n\\n| # | Idea | Status | Quietude note |\\n|---|---|---|---|\\n| 91 | In-App Upsells | Q2 | Premium upgrade prompts; eye mask cross-sell from app (also Retention) |\\n| 132 | Price Localization | Q4+ | Adjust pricing for local purchasing power once international |\\n| 86 | Lifetime Deals | Skip | Brand-conflict — see Acquisition skip list |\\n\\n### 12.6 Cross-cutting / brand foundation ideas\\n\\n| # | Idea | Status | Quietude note |\\n|---|---|---|---|\\n| 139 | Customer Language | Now | Mira reflection responses + 7 Ds language = the source-of-truth for customer language across all copy |\\n| 114 | Moneyball Marketing | Ongoing | Find undervalued channels at every stage — methodology, not a single tactic |\\n\\n### Idea-bank summary\\n\\n- **88 ideas applicable to Acquisition** (the dominant stage at Quietude's current stage — makes sense, Quietude's product converts well; the bottleneck is the top of funnel)\\n- **7 ideas to Activation, 8 to Retention** (smaller because these stages are about depth, not breadth — execute the right few well rather than running a wide tactic menu)\\n- **5 ideas to Referral** (program-driven, not tactic-driven)\\n- **3 ideas to Revenue** (most revenue work is pricing strategy, not tactical tricks)\\n- **2 cross-cutting**\\n- **23 ideas skipped for brand / business-model fit** — Quietude's category positioning constrains what's available\\n\\n**What this proves:** the plan is roughly 30% of the available tactical surface area, not 100%. That's appropriate at this stage and budget. As capacity unlocks across Q2 → Q3 → Series A, the cross-reference becomes the inventory we pull from to scale activity without losing strategic coherence.\\n\\n---\\n\\n## 13. Measurement, RACI, open decisions, appendix\\n\\n### Measurement — the metrics that matter\\n\\n**North star (proposed):**\\n**Blended-LTV-to-blended-CAC ratio per acquired user**, where:\\n- Blended LTV combines app subscription revenue + hardware revenue (eye mask + speakers) + any cross-sells, per cohort\\n- Blended CAC combines paid spend + content production cost + ambassador commissions + lifecycle tool spend, per cohort\\n\\nThis captures the business model: the eye mask wedge isn't free if it costs $X to make, and the app sub isn't expensive to acquire if a Bryan-Johnson-style PR moment is paying for itself.\\n\\nIf a single metric is preferred for team-level focus, fall back to: **monthly new D2C subscribers from non-paid channels.** This isolates the compound channels the long-game strategy depends on.\\n\\n**Leading indicators by AARRR stage:**\\n\\n| Stage | Leading indicators |\\n|---|---|\\n| Acquisition | Organic visits/mo (overall + per pillar), App Store visit-to-install rate, Alex's LinkedIn engagement → email subscribers, event-to-app conversion rate, ambassador-attributed visits |\\n| Activation | Day 1 / Day 7 / Day 35 → paid conversion, onboarding session-completion rate, first session Mira reflection completion |\\n| Retention | 30 / 60 / 90-day retention, monthly churn, Flow 4 reactivation rate, hardware → app activation rate |\\n| Referral | Ambassador-attributed new subs (Dub), share-after-shift rate, Guides pilot referrals (when live) |\\n| Revenue | Blended MRR, ARPU, annual plan adoption %, LTV by cohort, eye mask attach rate |\\n\\n**Review cadence:**\\n- **Weekly:** fCMO ↔ Alex 30-min sync. AARRR scoreboard + this week's ships.\\n- **Monthly:** Full metrics review (extended sync, Sam included). Compare against quarterly KPI targets.\\n- **Quarterly:** Plan recalibration. What's working, what's not, what funding-stage moves we're triggering.\\n\\n### RACI\\n\\n| Domain | Responsible | Accountable | Consulted | Informed |\\n|---|---|---|---|---|\\n| Strategic plan (this doc) | Casey | Alex | Sam, Emily | Team |\\n| Brand voice | Alex + Sam | Alex + Sam | Casey | Team |\\n| App + onboarding implementation | Devon | Alex | Casey | Team |\\n| Lifecycle flows (Customer.io) | Casey | Alex | Sam (copy QA) | Team |\\n| SEO content | Casey | Casey | Sam, Alex | Team |\\n| App Store copy | Casey | Alex | Sam | Team |\\n| Alex's LinkedIn cadence | Alex | Alex | Casey (orchestration) | Team |\\n| Events | Alex + Sam | Alex | Casey (instrumentation only) | Team |\\n| Ambassador program | Casey | Casey | Alex | Team |\\n| B2B sales | Alex | Alex | Casey (case studies) | Team |\\n| Pricing | Alex | Alex | Casey | Sam |\\n| Investor narrative | Alex | Alex | Casey, Sam | Team |\\n| Quietude Guides program (Q3+) | TBD (likely future hire) | Alex + Sam | Casey | Team |\\n| Future marketing hire (Q3) | Casey | Alex | Sam | Team |\\n\\n### Open decisions blocking the plan\\n\\nMost blocking, ranked by impact:\\n\\n1. **Canonical domain.** SEO data + this plan recommend `quietude.app`. Needs exec sign-off + 301 execution plan. *Blocks: domain consolidation, SEO foundation, email sender migration.*\\n2. **Retention metric definition.** Reconcile 38% 12-month retention claim vs. 29% monthly App Store churn. *Blocks: clean dashboards, investor narrative coherence, lifecycle test reads.*\\n3. **Mira post-session reflection scope.** Does Mira currently support this, or is it new build? *Blocks: Onboarding Variants 1 and 2 (which depend on Mira reflection moment), retention compound moves.*\\n4. **App UI stability timeline.** When does the headphone-gate-removal + onboarding-rebuild allow Flow 2 to ship without rework risk? *Blocks: Flow 2, full lifecycle, paid acquisition timing.*\\n5. **GA launch timeline.** When does the throttled beta become GA? *Blocks: paid acquisition scale, Q3 GTM planning.*\\n6. **Pricing structure ground truth.** What's actually charged today? *Blocks: pricing audit conclusions, annual-plan default test, blended LTV math.*\\n7. **First marketing hire scope.** Lifecycle + content owner, or something else? When does the JD get written? *Blocks: Q3 capacity plan, succession of fCMO operational work.*\\n8. **Ambassador commission structure.** $/sub, rev-share, hybrid? *Blocks: ambassador program launch, attribution dashboards.*\\n\\n### Appendix — deep-dive links\\n\\n**Published to the team via `Quietude-Inc/quietude-context` GitHub repo:**\\n- `marketing/seo/plan.md` — Full 90-day SEO + keyword research plan\\n- `marketing/seo/keyword-shortlist.md` — Tier 1 keyword shortlist\\n- `marketing/seo/raw/` — Ahrefs + DataForSEO API pulls\\n- `marketing/onboarding-recommendation.md` — Three-variant onboarding test plan\\n\\n**Founder-authored strategic context** (in Quietude's internal knowledge base):\\n- Seed deck — Investor narrative\\n- Sound Philosophy — Alex's technical/philosophical working doc\\n- Marketing OS — Brand voice, content rhythm, visual system\\n- ICP doc — D2C audience profile\\n- Meditation-vs-Regulation note (2026-05-19) — Central content pillar\\n- Kickoff call transcript (2026-05-18) — Decisions + open questions\\n- App Store copy snapshot + voice-gap analysis\\n- App Store metrics snapshot (2026-05-16)\\n- Customer.io lifecycle flows inventory\\n\\n---\\n\\n*Marketing Plan v1. Prepared by Casey Reed (fCMO), 2026-05-27. For team review and discussion.*\\n\"}\n];\n",[],[478,801,793],"refs","fe3860be-5d6d-11f1-b1be-1607ee4eb77e","ref_8.ts","fe386168-5d6d-11f1-b1be-1607ee4eb77e",667,["D",1780286242301],"// GENERATED by deploy/gen_skills_catalog.mjs — do not edit by hand.\nimport type { SkillRef } from \"../index.ts\";\nexport const REFS_PART_8: SkillRef[] = [\n {\"skill\":\"marketing-plan\",\"ref\":\"aarrr-framework\",\"body\":\"# AARRR Framework — Primer for Plan Sequencing\\n\\nAARRR (Dave McClure's \\\"pirate metrics\\\") is the spine of every plan produced by this skill. This doc is the primer + the decision rules for when each stage gets prioritized.\\n\\n## The five stages\\n\\n| Stage | Question | Common metrics |\\n|---|---|---|\\n| **A**cquisition | How do strangers become aware of us? | Visits, MQLs, signup-page sessions, app-store visits, CAC by channel |\\n| **A**ctivation | Once they try us, do they have an experience that converts? | Signup completion rate, time-to-value, % completing first key action, trial → paid rate |\\n| **R**etention | Do they stay and deepen? | DAU/WAU/MAU, week-1/4/12 retention, churn |\\n| **R**eferral | Do retained users bring more users? | Viral coefficient, NPS, ambassador attribution |\\n| **R**evenue | What do they pay, who pays, how does it compound? | ARPU, LTV, expansion revenue, ARR / MRR |\\n\\n> **Signup boundary rule.** Signup *intent* (a stranger landing on the signup page) is Acquisition. Signup *completion* and everything after (first key action, trial-to-paid) is Activation. Apply this rule consistently across all docs and the plan template.\\n\\n## Why AARRR for plan sequencing\\n\\nThree reasons.\\n\\n**1. Funnel-stage tagging forces prioritization.** Without AARRR, marketing plans become channel-organized (\\\"here's the SEO plan, here's the social plan, here's the paid plan\\\"). Channels can address multiple stages; tagging by stage instead asks the more useful question: *what stage of the funnel is the binding constraint right now?*\\n\\n**2. Fix the leak before pouring water in.** The Activation/Retention question (\\\"does the funnel convert at acceptable rates given exposure?\\\") is usually higher leverage than the Acquisition question (\\\"how do we get more exposure?\\\"). AARRR sequencing surfaces this naturally.\\n\\n**3. The Revenue / Referral conversation is honest.** Most marketing plans bury monetization under \\\"growth\\\" and treat referral as wishful thinking. AARRR forces explicit treatment of both.\\n\\n## Brand and content — not a stage, cross-cutting\\n\\nA common mistake: making \\\"Brand\\\" or \\\"Content\\\" the sixth bucket. They're not — they serve every stage.\\n\\n- **Brand voice** governs every piece of copy across every stage\\n- **Content** feeds Acquisition (SEO, social), Activation (onboarding copy), Retention (email lifecycle), Referral (ambassador talking points), Revenue (pricing pages, sales material)\\n\\nIn the plan, brand/content shows up as the strategic frame (Section 2) and cross-cutting in Section 11's ops stack — never as its own AARRR section.\\n\\n## Diagnosing the binding constraint — which AARRR stage is highest leverage?\\n\\nFor every client, one or two AARRR stages will be the binding constraint. The plan sequences moves there first.\\n\\n**Decision rules:**\\n\\n### If you don't have any users → start with Acquisition\\n- Pre-launch / day-0 / waitlist stage\\n- No funnel data exists\\n- Leverage = building the first 100 users\\n\\n### If you have users but they bounce → start with Activation\\n- Signups happen but activation rate is low\\n- App Store conversion is poor\\n- Onboarding completion is broken\\n- Day 1 → paid rate is much lower than Day 30 → paid (means product converts given time but onboarding doesn't bridge to it)\\n- Leverage = bridging signup to first felt value\\n\\n### If activation works but users churn → start with Retention\\n- Month 1 retention is below category norms\\n- Activated users stop using within 7–14 days\\n- LTV is short\\n- Leverage = lifecycle, deepening engagement, churn prevention\\n\\n### If retention is strong but growth is slow → start with Referral / Revenue\\n- Retained users love the product but don't share\\n- Inbound referrals come in unstructured\\n- Pricing hasn't been pressure-tested\\n- ARPU is low for the value delivered\\n- Leverage = WOM mechanics + pricing optimization (these often cluster)\\n\\n### If everything works at small scale → start with Acquisition (scaling)\\n- Funnel is healthy\\n- Question is just \\\"more\\\"\\n- This is the \\\"post-fit\\\" scaling problem\\n\\n## Stage-by-stage strategic patterns\\n\\n### Acquisition\\n\\n**The diagnostic question:** Where is the gap between TAM-level awareness and current funnel volume? What channels are saturated by competitors vs. open?\\n\\n**Common Acquisition moves:**\\n- SEO content strategy (organic compounding)\\n- Founder-led channels (LinkedIn, X, Substack for B2B; Instagram/TikTok for D2C)\\n- Paid acquisition (when budget unlocks)\\n- App Store / Play Store / marketplace listing optimization\\n- PR and credibility-anchor amplification\\n- Events (live, webinar, conference speaking)\\n- Partnerships (newsletter swaps, integration co-marketing, reseller / agency partners)\\n- Hardware / commerce surface (Shopify SEO + Amazon for hybrid businesses)\\n- B2B sales support (case studies, partner pages, vertical content)\\n\\n**Sequencing principle:** Build the organic compound first (SEO + founder-led + content + PR amplification + ambassadors). Only layer paid on top of a working organic baseline. Premature paid amplifies what's broken.\\n\\n### Activation\\n\\n**The diagnostic question:** Where in the user's first session do they decide \\\"this works for me\\\" or \\\"this doesn't\\\"? What stops them from reaching that moment?\\n\\n**Common Activation moves:**\\n- Bedrock fixes (broken gates, broken signup steps, broken paywall)\\n- Onboarding tests / rebuild (often the most leveraged single move)\\n- App Store listing rewrite (the threshold to the trial)\\n- Lifecycle Flow ship order (when to ship onboarding emails)\\n- Paywall structure + trial length\\n- Free → paid bridge (in-app upsells, soft paywalls)\\n\\n**Sequencing principle:** Get to first felt value as fast as possible. Everything that adds friction between \\\"user opens app\\\" and \\\"user has the experience that converts them\\\" is a candidate to cut.\\n\\n### Retention\\n\\n**The diagnostic question:** Why do users churn? What would have made them stay? What's the \\\"second moment of value\\\" after the first one?\\n\\n**Common Retention moves:**\\n- Lifecycle email flows: onboarding, lapsed user re-engagement, post-purchase, win-back\\n- Subscription / preference centers\\n- Churn reconciliation (often metric definitions don't match across surfaces)\\n- Hardware → software activation paths (for hybrid businesses)\\n- Annual plan defaults / pricing structure (cross-cuts Revenue)\\n- Support as marketing (high-touch moments that drive stories)\\n- Community + practitioner networks\\n\\n**Sequencing principle:** Ship lifecycle flows in the order their content is most stable. Hardware post-purchase flows ship first (they don't reference in-app screens that might change). Onboarding emails ship last (they reference UI that might change). Win-back is a quarterly campaign, not a one-time flow.\\n\\n### Referral\\n\\n**The diagnostic question:** Is there inbound referral interest that isn't being captured? What's the share-after-value moment that's natural to the product?\\n\\n**Common Referral moves:**\\n- Ambassador / affiliate program (start with inbound interest, not cold recruitment)\\n- Share-after-value moments built into the product (reflection prompts, milestone celebrations)\\n- Founder amplification (founder as referrer-zero)\\n- Long-game expert / Guides / certified-host networks (for category-creating businesses)\\n- Gifting flows (consumer / hardware)\\n- Two-sided referrals (reward both referrer and referred)\\n\\n**Sequencing principle:** Lead with whoever is already raising their hand. If there are 5 inbound ambassadors, launch with those 5 — don't wait for a \\\"complete program.\\\" Iterate based on what they tell you.\\n\\n### Revenue\\n\\n**The diagnostic question:** Is the company underpricing? Underpackaging? Missing an upsell? What's the \\\"right\\\" price discipline given LTV and brand voice?\\n\\n**Common Revenue moves:**\\n- Pricing audit (what's actually charged today vs. listed?)\\n- Annual plan defaults\\n- Hardware → software bundling formalization\\n- Storefront / commerce page optimization\\n- B2B case studies + sales material\\n- Long-term value pool flags (data, expansion, enterprise) — flagged not executed\\n\\n**Sequencing principle:** Run the pricing audit before testing changes. Surprisingly often, the \\\"implied\\\" pricing on the dashboard doesn't match the listed price — discounts, trials, or plan mix distorts the read. Surface the ground truth first.\\n\\n## How to assign a move to a stage\\n\\nSome moves clearly belong to one stage. Others span. The rule:\\n\\n**Assign to the stage where the move's primary measurable impact lands.**\\n\\nExamples:\\n- \\\"Rewrite App Store listing in voice\\\" — spans Acquisition (organic discovery) and Activation (threshold to trial). Primary impact = Activation (trial conversion rate). Assign to Activation, mention crossover.\\n- \\\"Eye mask Shopify page rewrite\\\" — spans Acquisition (organic search for sleep mask) and Revenue (sale conversion). Primary impact = Revenue (transaction). Assign to Revenue, mention crossover.\\n- \\\"Alex's LinkedIn cadence\\\" — Acquisition (top of funnel for D2C subscribers).\\n- \\\"Customer.io Flow 6 (eye mask post-purchase)\\\" — Retention (deepens hardware buyer engagement) with crossover to Activation (hardware → app premium activation path).\\n\\nWhen in doubt: where would removing this move hurt the most? Assign there.\\n\\n## When the AARRR breakdown isn't equal\\n\\nFor most clients, the plan won't have equal volume across stages. That's fine — and worth surfacing as a diagnostic.\\n\\n- **Heavy Acquisition section** = client has product-market fit but top-of-funnel is the bottleneck. Common for early-stage with strong retention metrics.\\n- **Heavy Activation section** = client has traffic but conversion is broken. Often beta-stage products.\\n- **Heavy Retention section** = client has churn problem. Often mid-stage products that scaled past PMF without lifecycle infrastructure.\\n- **Heavy Referral section** = client has loyalty but no WOM mechanics. Often consumer products with passionate users.\\n- **Heavy Revenue section** = client is underpricing or missing monetization layers. Common for tools transitioning from free to paid.\\n\\nIf a plan ends up evenly distributed across all five stages, the diagnostic was probably weak — re-examine the funnel state intake to find where the binding constraint is.\\n\\n## A note on the order of presentation\\n\\nAlways present AARRR in order (Acquisition → Activation → Retention → Referral → Revenue) regardless of priority order.\\n\\nThis is for the reader's mental model. Founders expect the funnel to flow top-to-bottom. If Retention is the most-leveraged stage but you lead with Retention, the reader has to context-switch.\\n\\nTo signal priority, use the executive summary (Section 1) — name the biggest bets there. The AARRR breakdown then walks the funnel in order, with the most leverage-positive section being the longest and most-detailed.\\n\"},\n {\"skill\":\"marketing-plan\",\"ref\":\"budget-planning\",\"body\":\"# Budget Planning — Scientific Methods for Setting the Marketing Budget\\n\\nThe problem with most SaaS marketing budgets is that they're pulled out of thin air — a number that hopefully doesn't constrain growth too much, but doesn't anchor in customer-acquisition economics either. The result: when someone asks \\\"why this number?\\\" there's no answer.\\n\\nTwo scientific methods solve this. Use one (not both) in Section 8 (Revenue) and Section 10 (12-month outlook) of every plan.\\n\\nExcerpted and adapted from *Founding Marketing* by Corey Haines.\\n\\n## Method 1 — Revenue-Based (5–40% of annual revenue)\\n\\n**Direction:** budget → revenue goal.\\n\\nYou start with what the company can comfortably spend on marketing, then forecast what revenue that spend can plausibly generate.\\n\\n### The ranges\\n\\n| Posture | % of ARR | When to use |\\n|---|---|---|\\n| **Conservative (profit-preserving)** | 5% | Established business focused on profit distribution; bootstrapped; founder-paid customer base |\\n| **Standard growth** | 15–25% | Most healthy SaaS in the seed-to-Series-A range |\\n| **Aggressive growth (deploying raised capital)** | up to 40% | Recently funded round, mandate to deploy fast, board accepts burn |\\n\\nFor reference: public SaaS companies routinely report sales-and-marketing spend between 20% and 55% of revenue (Zoom historically ran between 20% and 55% across years).\\n\\n### The math (Conservative example)\\n\\nBusiness at $1M ARR, 5% allocation:\\n\\n- Annual marketing budget: **$50,000**\\n- Blended CAC: $100 → can acquire **500 new customers**\\n- ARPC: $50/mo → adds **$300K** to ARR\\n- Account for 15% annual churn → 85% × $300K = **+$255K net new ARR**\\n- End-of-year goal: **$1.255M ARR**\\n\\n### The math (Aggressive example)\\n\\nBusiness at $1M ARR, 40% allocation:\\n\\n- Annual marketing budget: **$400,000**\\n- Blended CAC: $100 → can acquire **4,000 new customers**\\n- ARPC: $50/mo → adds **$2.4M** to ARR\\n- End-of-year goal: **$3.4M ARR**\\n\\n### Two keys to making this method work\\n\\n1. **Know your blended CAC** (see \\\"Calculating CAC\\\" below)\\n2. **Match the allocation percentage to your actual ambition.** A founder running 5% allocation while telling the board they expect to triple revenue is showing two incompatible signals.\\n\\n## Method 2 — Goal-Based (reverse-engineered from the revenue target)\\n\\n**Direction:** revenue goal → budget.\\n\\nYou start with the revenue goal and work backward through the unit economics to derive the budget required to hit it. Best for:\\n\\n- Companies just starting up (no historical CAC baseline yet, working from first principles)\\n- Companies anticipating outside capital (need to defend the ask)\\n- Companies using revenue-based financing (Pipe, Capchase, Founderpath)\\n\\n### The formula\\n\\n```\\nMarketing budget = [(New ARR / (ARPC × 12)) × CAC] / annual retention rate\\n```\\n\\n### Worked example: $1M ARR → $2M ARR\\n\\nStep 1 — How much new ARR per customer?\\nARPC × 12 = $50 × 12 = **$600 ARR per new customer**\\n\\nStep 2 — How many new customers do we need?\\n$1,000,000 / $600 = **1,667 new customers**\\n\\nStep 3 — What's the raw acquisition cost?\\n1,667 × $100 CAC = **$166,700**\\n\\nStep 4 — Account for churn (15% annual = 85% retention)\\n$166,700 / 0.85 = **$196,118** (round to **$200K**)\\n\\nWhen someone asks how you got to the budget, walk them through the four steps. It's defensible.\\n\\n### Why this formula and not something simpler\\n\\nThe four steps each correspond to a real economic reality:\\n- Step 1 converts MRR-language into the ARR-language a board talks in\\n- Step 2 names the customer count, which is what the funnel actually has to deliver\\n- Step 3 anchors the budget in the cost of acquisition\\n- Step 4 acknowledges that churned customers don't count toward net new ARR, so the budget needs to cover the gap\\n\\n### Required buffer\\n\\n**Always add 10–20% as \\\"experimental budget\\\"** on top of the formula output. CAC is the main dependency; if CAC comes in 50% higher than estimated, the cascading effect is missing the revenue goal. It is much cheaper to overestimate CAC than to underestimate it.\\n\\nThe experimental budget also funds the experiments that find your next channel before your current one plateaus (see `growth-patterns.md` — channel S-curves).\\n\\n## The VC growth path (3-3-2-2-2 rule)\\n\\nOnce a company has crossed $1M ARR and taken a Series A, the implicit benchmark VCs expect is:\\n\\n| Year | ARR multiple | Cumulative ARR (from $1M start) |\\n|---|---|---|\\n| Year 0 | — | $1M |\\n| Year +1 | 3× | $3M |\\n| Year +2 | 3× | $9M |\\n| Year +3 | 2× | $18M |\\n| Year +4 | 2× | $36M |\\n| Year +5 | 2× | $72M |\\n| Year +6 | 2× | $144M |\\n| Year +7 | 2× | $288M |\\n\\nThat's the 3-3-2-2-2 rule. Useful when:\\n\\n- The plan needs to map 12-month and 36-month milestones to VC expectations\\n- The founder is mid-raise and the board needs to see a plausible path to the next round\\n- Section 10 (12-month outlook) needs anchoring against an industry benchmark, not just internal ambition\\n\\nMost companies miss it. That's fine. Knowing the benchmark gives the team a defensible reason to either match it or explicitly choose not to.\\n\\n## Calculating CAC (blended, not paid-only)\\n\\nIf there's no historical CAC, use a baseline: **one year of revenue from the smallest paid plan.** Deploy the budget, capture actual CAC data, replace the baseline with the measured number for the next planning cycle.\\n\\nFor an established CAC calculation, **CAC must be blended.** Include:\\n\\n- Marketing salaries (full loaded cost, not just base)\\n- Advertising spend\\n- Marketing tech stack costs\\n- Content production costs (writers, designers, video editors)\\n- Agency / contractor retainers\\n- SDR / BDR salaries if doing outbound\\n- Tools (CRM, marketing automation, analytics)\\n\\nThen divide by the number of new customers acquired in the period. That blended number is the one to use in either budgeting method.\\n\\nThe mistake to avoid: calculating CAC from paid ad spend alone. A company that \\\"doesn't run ads\\\" still has a CAC — it's just hidden in the content team, the founder's time, the SEO contractor, the conference booth.\\n\\n## The reality check on forecasting\\n\\nThis whole framework derives a budget and a revenue goal — not a 12-month month-by-month forecast accurate to the dollar.\\n\\n**Unless the company is publicly traded, all forecasts are educated guesses.** No startup under $100M ARR reliably hits forecasts to the month. The honest framing for the plan:\\n\\n- The annual goal is a defensible direction-of-travel\\n- The budget is the resource commitment that makes the goal plausible\\n- The 90-day roadmap (Section 9) is what's actionable now\\n- Month-to-month variance is expected; quarterly review is when the plan adjusts\\n\\nWhat's actionable: how to deploy the budget, what concrete moves to execute, what to adjust when real data comes in.\\n\\nWhat's not actionable: trying to forecast traffic, pipeline, retention curves, conversion rates, and channel mix all down to the decimal point and expecting that forecast to hold. Founders who over-engineer the forecast tend to spend the plan period explaining variance instead of executing.\\n\\n**Rule for the plan:** the budget number is honest. The annual goal is honest. The month-by-month projection is illustrative.\\n\\n## How this flows into the plan\\n\\n| Section | What to include |\\n|---|---|\\n| **3 (Current state)** | Current monthly marketing spend broken down by line (paid, tools, content, headcount, retainers). Compute current %-of-ARR allocation. |\\n| **8 (Revenue)** | The unit-economics table (CAC, ARPC, churn) that feeds whichever budget method you're using. |\\n| **10 (12-month outlook)** | Apply Method 1 or Method 2 to derive the 12-month budget and the resulting revenue goal. Anchor against the 3-3-2-2-2 rule if Series A+ and VC-backed. |\\n| **11 (Ops stack)** | Show the budget allocation across the AARRR stages — what % to Acquisition, Activation, etc. The ops-stack mapping informs which line items grow when the next funding tier unlocks. |\\n| **13 (Open decisions)** | If CAC is unknown or contested, flag it as the highest-impact open decision — every other number depends on it. |\\n\\n## When to choose which method\\n\\n- **Method 1 (Revenue-Based)** when the company has historical CAC data, a profit/burn posture, and the question is \\\"given our posture, what's a plausible goal.\\\"\\n- **Method 2 (Goal-Based)** when the company has a specific goal (board mandate, VC milestone, fundraise target) and the question is \\\"what budget do we need to hit it.\\\"\\n\\nFor most plans in the seed-to-Series-A range, Method 2 is more useful — it forces the conversation about whether the goal is funded.\\n\"},\n {\"skill\":\"marketing-plan\",\"ref\":\"client-types\",\"body\":\"# Client Types — Variations by Business Model\\n\\nThe 13-section plan structure stays consistent across client types. What changes is the **content emphasis** within each section. This doc names the dominant patterns by client archetype.\\n\\n## Archetype 1 — B2B SaaS\\n\\n### Core characteristics\\n- Subscription revenue\\n- Often higher ACV ($1K–$100K+ per year)\\n- Sales-assisted or self-serve depending on tier\\n- Buyer often different from user (champion vs. end-user)\\n\\n### AARRR emphasis\\n\\n**Acquisition heavy:**\\n- SEO is the dominant top-of-funnel motion (people search for solutions)\\n- Content marketing (blog, knowledge base, comparison pages) drives MQLs\\n- LinkedIn for both organic founder presence and paid\\n- Outbound (cold email + LinkedIn) often complements inbound\\n- Events (conferences, webinars) for high-ACV products\\n\\n**Activation:**\\n- Signup → trial → first key action (PLG products)\\n- Trial → demo → POC (sales-led products)\\n- Empty states matter — guide users to first value action\\n\\n**Retention:**\\n- Product engagement metrics (DAU, feature adoption)\\n- Customer success motion (CSM team for higher ACV)\\n- Lifecycle emails focused on feature discovery, value moments\\n\\n**Referral:**\\n- Customer advocacy programs\\n- Partner / integration co-marketing\\n- G2 / Capterra reviews\\n- Champion-to-buyer expansion\\n\\n**Revenue:**\\n- Expansion / NRR is often the biggest growth lever\\n- Tier upgrades, seat expansion, usage-based add-ons\\n\\n### Skills emphasis\\n- `cold-email`, `programmatic-seo`, `competitors`, `seo-audit`, `ai-seo`\\n- `ads` weighted toward LinkedIn + Google\\n- `emails` for trial nurture + lifecycle\\n- `pricing` for tier optimization\\n\\n### Tier-1 budget priority\\n- SEO + content > everything else\\n- Founder-led LinkedIn channel\\n- Customer.io / Mailchimp for nurture\\n- HARO + investor backchannel for PR\\n\\n---\\n\\n## Archetype 2 — D2C Consumer App (Subscription)\\n\\n### Core characteristics\\n- Lower ACV ($5–$30/mo typically)\\n- High volume, lower margin per user\\n- App Store / Play Store as the primary acquisition surface\\n- Lifecycle email + push for retention\\n- Often paid-acquisition-driven once budget unlocks\\n\\n### AARRR emphasis\\n\\n**Acquisition:**\\n- App Store Optimization (ASO) is the highest-leverage non-site asset\\n- Paid social (Meta, TikTok) often dominant once budget exists\\n- Apple Search Ads for high-intent App Store traffic\\n- Influencer + content creators\\n- PR + endorsements\\n\\n**Activation:**\\n- Onboarding is the dominant activation surface\\n- Time-to-value must be minutes, not hours\\n- Paywall structure + trial length critical\\n\\n**Retention:**\\n- Lifecycle email + push\\n- In-app reminders (carefully — overuse = churn)\\n- Subscription preference center\\n- Win-back campaigns\\n\\n**Referral:**\\n- Built-in sharing (share-a-month flow)\\n- Two-sided referrals\\n- Influencer / creator ambassadors\\n\\n**Revenue:**\\n- Annual plan default is the biggest single move (compresses MRR but improves LTV)\\n- Tier optimization (Free → Premium → Premium+)\\n- In-app upsells\\n\\n### Skills emphasis\\n- `onboarding`, `paywalls`, `emails`\\n- `ads`, `ad-creative` (heavy creative iteration)\\n- `referrals`\\n- `pricing` for annual default + tier consolidation\\n\\n### Tier-1 budget priority\\n- ASO first (highest organic leverage)\\n- Onboarding rebuild\\n- Lifecycle email shipping\\n- Founder-led social if founder is on-camera\\n\\n---\\n\\n## Archetype 3 — Hybrid Hardware + Software\\n\\n### Core characteristics\\n- Physical product + software companion (e.g., Quietude's eye mask + app)\\n- Hardware as a distribution wedge (lower price, easier first purchase)\\n- Software as the LTV (recurring revenue)\\n- Blended CAC across both surfaces\\n\\n### AARRR emphasis\\n\\n**Acquisition:**\\n- Shopify storefront SEO (hardware product pages target consumer search)\\n- Amazon listing (high-discovery, takes margin)\\n- PR amplification (hardware is photogenic — high-profile influencer endorsements move volume)\\n- Paid social for hardware (Meta + Instagram, eye-catching creative)\\n\\n**Activation:**\\n- Two activations to track: hardware unboxing experience + software signup\\n- Hardware → software activation flow is the bridge\\n- Concierge setup for high-value hardware buyers\\n\\n**Retention:**\\n- Hardware post-purchase lifecycle (different from app onboarding)\\n- Software companion drives stickiness\\n- Community / practitioner network around hardware\\n\\n**Referral:**\\n- Hardware gifting flows (high WOM for physical products)\\n- Eye-catching hardware drives organic social sharing\\n- Reviews on Shopify + Amazon\\n\\n**Revenue:**\\n- Blended LTV math is critical (hardware margin + software recurring)\\n- Bundle strategy (hardware buy → free Premium for X months)\\n- Annual plan default for software\\n\\n### Skills emphasis\\n- `seo-audit` for Shopify product pages\\n- `emails` for both hardware post-purchase and software lifecycle\\n- `referrals` with gifting layer\\n- `pricing` for blended-bundle math\\n- `ads` with creative-heavy Meta presence\\n\\n### Tier-1 budget priority\\n- Shopify product page optimization\\n- Hardware post-purchase lifecycle ship\\n- Bundle strategy formalization\\n- Hardware → app activation audit\\n\\n---\\n\\n## Archetype 4 — Marketplace\\n\\n### Core characteristics\\n- Two-sided product (supply + demand)\\n- Network effects matter\\n- Liquidity is the critical early metric\\n- Take-rate × GMV is the revenue model\\n\\n### AARRR emphasis\\n\\n**Acquisition:**\\n- Two funnels — supply and demand\\n- Supply often acquired through outbound / partnership / cold email\\n- Demand often acquired through SEO / paid / content\\n- City-by-city programmatic SEO common\\n\\n**Activation:**\\n- Supply activation: first listing posted, first response sent\\n- Demand activation: first purchase / first match / first transaction\\n- Both sides need their own onboarding\\n\\n**Retention:**\\n- Repeat transaction frequency\\n- Supply utilization (% of listings active)\\n- Demand habit (DAU / MAU)\\n\\n**Referral:**\\n- Supply → supply (refer other providers)\\n- Demand → demand (refer other buyers)\\n- Cross-side referrals are weaker\\n\\n**Revenue:**\\n- Take-rate optimization\\n- Premium tier (better matching, lower fees)\\n- Lead-gen vs. transaction-fee monetization\\n\\n### Skills emphasis\\n- `programmatic-seo` for city pages, vertical pages\\n- `cold-email` for supply-side recruitment\\n- `referrals` for both sides\\n- `pricing` for take-rate decisions\\n\\n### Tier-1 budget priority\\n- Programmatic SEO build for one side\\n- Cold outbound to seed supply (or demand, whichever is bottleneck)\\n- Lifecycle email for both sides\\n\\n---\\n\\n## Archetype 5 — Developer Tool / Open Source\\n\\n### Core characteristics\\n- Technical buyer (developer or eng leader)\\n- High bar for content quality (developers are skeptical)\\n- DevRel matters more than traditional marketing\\n- Open source layer often funnel into commercial product\\n\\n### AARRR emphasis\\n\\n**Acquisition:**\\n- Technical content + docs SEO\\n- DevRel (conferences, talks, community)\\n- GitHub presence + npm/pip/etc. discovery\\n- Hacker News + Reddit + dev Twitter\\n\\n**Activation:**\\n- First build / first integration is the activation event\\n- Time-to-Hello-World matters\\n- Documentation = onboarding for dev tools\\n\\n**Retention:**\\n- Depth of integration (using more of the product)\\n- Team adoption (one user → entire org)\\n- Active project count\\n\\n**Referral:**\\n- Star count on GitHub (semi-organic)\\n- Recommendation in technical forums\\n- Conference talks mentioning the tool\\n\\n**Revenue:**\\n- Free → paid conversion when usage exceeds limits\\n- Team plans, enterprise tiers\\n- Support / SLA upsells\\n\\n### Skills emphasis\\n- `programmatic-seo` for docs\\n- Less emphasis on traditional `ads`\\n- Heavy `content-strategy` + technical content\\n- `cold-email` to engineering leads at target companies\\n\\n### Tier-1 budget priority\\n- Docs + technical content production\\n- DevRel (founder doing talks)\\n- GitHub presence\\n- HN / Reddit / dev community\\n\\n---\\n\\n## Archetype 6 — Deep-Tech / Scientific / Clinical\\n\\n### Core characteristics\\n- Long sales cycles\\n- Heavy credibility burden (must prove the science)\\n- Highly informed buyers (academics, clinicians, researchers)\\n- Often regulatory considerations\\n\\n### AARRR emphasis\\n\\n**Acquisition:**\\n- Academic publishing + peer-reviewed studies\\n- Conference speaking (academic + industry)\\n- Investor / advisor introductions\\n- PR via credibility hooks\\n\\n**Activation:**\\n- Pilot programs / proof-of-concepts\\n- Concierge setup with high-touch onboarding\\n- Educational webinars / training\\n\\n**Retention:**\\n- Customer success heavily\\n- Co-publication with customers\\n- Community of practice\\n\\n**Referral:**\\n- Academic / clinical references\\n- Conference panel features\\n- Case studies with named institutions\\n\\n**Revenue:**\\n- Pilot → paid expansion\\n- Institutional contracts (multi-seat / multi-year)\\n- Compliance / certification upsells\\n\\n### Skills emphasis\\n- Light traditional marketing\\n- Heavy `product-marketing`, `sales-enablement`, `pricing`\\n- `cold-email` to specific researchers / practitioners\\n- PR + investor marketing\\n\\n### Tier-1 budget priority\\n- Academic outreach + conference speaking\\n- Investor backchannel for institutional warm intros\\n- Pilot deployment with key customers\\n- Case study + scientific publication\\n\\n---\\n\\n## Archetype 7 — Commerce / DTC (non-subscription)\\n\\n### Core characteristics\\n- Physical or digital products sold transactionally\\n- Average Order Value matters\\n- Repeat purchase rate is the key retention metric\\n\\n### AARRR emphasis\\n\\n**Acquisition:**\\n- Paid social (Meta, TikTok) often dominant\\n- Shopify SEO for product pages\\n- Amazon listings\\n- Influencer + creator partnerships\\n\\n**Activation:**\\n- First purchase is the activation event\\n- Cart abandonment recovery\\n- Trust signals on checkout (reviews, returns, shipping)\\n\\n**Retention:**\\n- Post-purchase lifecycle\\n- Loyalty programs\\n- Email + SMS for repeat purchase\\n\\n**Referral:**\\n- Gifting flows\\n- Refer-a-friend programs\\n- Reviews + UGC\\n\\n**Revenue:**\\n- AOV optimization (bundles, upsells)\\n- Customer LTV optimization (repeat purchase frequency)\\n- Subscription option for repeat purchases\\n\\n### Skills emphasis\\n- `ads` + `ad-creative` (heavy weight)\\n- `emails` for post-purchase + abandoned cart\\n- `referrals` with gifting\\n- `pricing` for bundles + subscription option\\n\\n### Tier-1 budget priority\\n- Shopify storefront optimization\\n- Email lifecycle ship\\n- Influencer / UGC seeding\\n- Paid social testing (if minimal budget exists)\\n\\n---\\n\\n## How to use this doc when drafting a plan\\n\\nWhen you start drafting Sections 4–8 (AARRR), identify the client's archetype (or hybrid if applicable) and lean into the patterns above.\\n\\n**Hybrid cases are common.** Quietude is \\\"Hybrid hardware + software\\\" with significant overlap to \\\"Deep-tech / scientific / clinical\\\" (because of the peer-reviewed study + clinical positioning). The plan blends emphases from both archetypes.\\n\\nWhen in doubt, lead with the archetype that best fits the *primary monetization model*. Quietude's primary monetization is software subscription (with hardware as the wedge), so the D2C consumer app + hardware-hybrid patterns dominate, with deep-tech credibility moves layered in.\\n\\n## When the client doesn't fit cleanly\\n\\nSome clients defy archetype:\\n- **Content / media businesses** — neither SaaS nor commerce; ad revenue or subscription model\\n- **Social networks** — own category, network effects dominate\\n- **Real estate / events** — physical + service model\\n\\nFor these, identify the closest archetype and adjust. Don't force-fit — name the deviation in the plan's Strategic Frame.\\n\"},\n {\"skill\":\"marketing-plan\",\"ref\":\"current-state-rubric\",\"body\":\"# Current State Rubric — 17-Section Scoring Lens\\n\\nThis 17-section rubric is the source of truth for Section 3 (\\\"Current State\\\") of every marketing plan. Score each section 0–5 from available materials, then write a 2–4 sentence \\\"shape interpretation\\\" that names where strengths and gaps cluster.\\n\\n## How to score\\n\\n**From rich materials.** When the team has shared decks, prior content audits, a brand voice doc, kickoff transcript, app store and analytics snapshots — score each section from those artifacts. Mark \\\"scored from materials\\\" in the section heading so the team can push back where they have better data.\\n\\n**From a separately scored audit.** If the team has already run a scored current-state assessment (in any format), ingest those scores directly. Don't redo the work — note the date the rubric was scored and flag any sections where material has shifted since.\\n\\nEither way, the output is the same: a 17-row scored table, a total out of 85, and a shape paragraph.\\n\\n## The 17 sections (scored 0–5 each)\\n\\n### 1. Positioning\\n**What's scored:** Clarity of category claim, differentiation, alignment across surfaces (homepage, app store, pitch deck, founder messaging).\\n\\n**Score guide:**\\n- 0 = No positioning anywhere\\n- 2 = Inconsistent across surfaces; team can't articulate it on demand\\n- 4 = Clear, original, mostly consistent; minor surface gaps\\n- 5 = Distinctive, category-defining, every surface aligned\\n\\n**Maps to AARRR:** Cross-cutting — feeds every stage.\\n\\n### 2. Customer research\\n**What's scored:** Depth and recency of customer research, ICP clarity, voice-of-customer capture.\\n\\n**Score guide:**\\n- 0 = No formal research, only founder intuition\\n- 2 = Some research but stale or one-off\\n- 4 = Active research practice, customer language captured\\n- 5 = Continuous research, customer language flows into copy / product / messaging\\n\\n**Maps to AARRR:** Cross-cutting — feeds especially Acquisition (channel choice) and Activation (onboarding voice).\\n\\n### 3. Homepage\\n**What's scored:** Headline clarity, voice alignment, conversion architecture, mobile experience.\\n\\n**Score guide:**\\n- 0 = Generic / broken / off-brand\\n- 2 = Functional but underperforming; voice mostly absent\\n- 4 = Clear, voice-aligned, converting; minor optimization opportunities\\n- 5 = Distinctive, converts strongly, fully voice-aligned\\n\\n**Maps to AARRR:** Acquisition + Activation.\\n\\n### 4. Sales / product pages\\n**What's scored:** Existence and quality of dedicated product / pricing / feature pages. Are SKUs documented? Is pricing scannable? Are upsells visible?\\n\\n**Score guide:**\\n- 0 = No dedicated pages\\n- 2 = Pages exist but are stale or off-voice\\n- 4 = Quality pages for primary products; gaps on secondary\\n- 5 = Every product, tier, and upsell has a high-converting page\\n\\n**Maps to AARRR:** Acquisition + Revenue.\\n\\n### 5. Conversion pages\\n**What's scored:** Landing pages for specific campaigns, channels, or use cases. `/partner`, `/science`, `/ambassadors`, `/eye-mask` types of pages.\\n\\n**Score guide:**\\n- 0 = No conversion pages\\n- 2 = One or two exist; rest of needed pages missing\\n- 4 = Most needed conversion pages exist; quality is good\\n- 5 = Full conversion page library, each high-converting\\n\\n**Maps to AARRR:** Acquisition + Activation.\\n\\n### 6. Competitor comparison\\n**What's scored:** Existence of \\\"vs. {competitor}\\\" pages, comparison content. Does the brand acknowledge alternatives, or pretend they don't exist?\\n\\n**Score guide:**\\n- 0 = Nothing — actively avoiding competitor mentions\\n- 2 = Some content exists but is weak or hidden\\n- 4 = Solid comparison pages for top 2–3 competitors\\n- 5 = Comprehensive comparison library; SEO-targeted; high-converting\\n\\n**Maps to AARRR:** Acquisition (consideration-stage SEO + sales enablement).\\n\\n### 7. Resources / content\\n**What's scored:** Blog, knowledge base, science page, whitepapers, research, founder essays, podcast.\\n\\n**Score guide:**\\n- 0 = No content surface\\n- 2 = Blog exists but is stale or thin\\n- 4 = Active content production; multiple formats\\n- 5 = Content is a moat — proprietary research, named pillars, daily volume\\n\\n**Maps to AARRR:** Acquisition.\\n\\n### 8. Onboarding\\n**What's scored:** New user onboarding (in-app + email). Time-to-value, completion rate, brand-voice alignment.\\n\\n**Score guide:**\\n- 0 = No onboarding flow\\n- 2 = Onboarding exists but is broken, off-voice, or underperforming\\n- 4 = Solid onboarding; clear bottlenecks identified\\n- 5 = Tested, optimized, on-brand; activation rate at category top quartile\\n\\n**Maps to AARRR:** Activation.\\n\\n### 9. Email lifecycle\\n**What's scored:** Existence and quality of lifecycle email programs. Welcome / onboarding / post-purchase / lapsed / win-back.\\n\\n**Score guide:**\\n- 0 = No lifecycle email\\n- 2 = Some flows exist but drafted not live, or live but stale\\n- 4 = Core flows live and performing; gaps on secondary flows\\n- 5 = Full lifecycle live, segmented, performing above category benchmarks\\n\\n**Maps to AARRR:** Retention (+ Activation for onboarding emails).\\n\\n### 10. Sales material\\n**What's scored:** Sales decks, one-pagers, demos, case studies, pricing sheets. (For B2B / hybrid companies — for pure D2C, this can be marked N/A or scored low without implication.)\\n\\n**Score guide:**\\n- 0 = No sales material\\n- 2 = Founder uses a deck but other material is thin\\n- 4 = Solid sales kit; reps can self-serve content\\n- 5 = Comprehensive material; updated quarterly; objection-handling library exists\\n\\n**Maps to AARRR:** Acquisition + Revenue (B2B).\\n\\n### 11. Messaging\\n**What's scored:** Voice, tone, vocabulary, message hierarchy across surfaces. Is the brand voice documented, consistent, distinctive?\\n\\n**Score guide:**\\n- 0 = No voice documented; surfaces inconsistent\\n- 2 = Voice exists in founder's head but isn't operationalized\\n- 4 = Documented voice; mostly consistent across surfaces\\n- 5 = Distinctive voice; documented; every surface respects it; voice is a moat\\n\\n**Maps to AARRR:** Cross-cutting.\\n\\n### 12. Pricing\\n**What's scored:** Pricing structure clarity, packaging logic, recent pressure-testing, listed vs. effective price reconciliation.\\n\\n**Score guide:**\\n- 0 = Pricing not pressure-tested in over a year; unclear structure\\n- 2 = Listed pricing exists but plan mix / discounting muddles the read\\n- 4 = Clear pricing; recent tests; LTV math known\\n- 5 = Pricing tested quarterly; packaging optimized; expansion levers known\\n\\n**Maps to AARRR:** Revenue.\\n\\n### 13. CRO (conversion rate optimization)\\n**What's scored:** Test cadence, instrumentation, A/B history, statistical rigor.\\n\\n**Score guide:**\\n- 0 = No tests run; no instrumentation\\n- 2 = Some ad-hoc tests; no statistical rigor\\n- 4 = Regular test cadence; some wins\\n- 5 = Continuous testing program; experimentation culture; documented wins\\n\\n**Maps to AARRR:** Cross-cutting (most impactful at Activation + Revenue).\\n\\n### 14. GTM launches\\n**What's scored:** Quality of past launch executions. Product launches, feature launches, campaign launches.\\n\\n**Score guide:**\\n- 0 = No structured launches; \\\"soft launches\\\" only\\n- 2 = Some launches but uneven execution\\n- 4 = Solid recent launches; playbook exists\\n- 5 = Repeatable launch motion; Product Hunt #1s; press coverage on demand\\n\\n**Maps to AARRR:** Acquisition + Activation.\\n\\n### 15. Ads (paid)\\n**What's scored:** Paid acquisition state. Active campaigns, channels, CAC tracking, creative quality.\\n\\n**Score guide:**\\n- 0 = No paid acquisition\\n- 2 = Some paid but unstructured / wasteful\\n- 4 = Paid is firing across 2–3 channels with positive unit economics\\n- 5 = Sophisticated paid stack; CAC/LTV understood; creative iterated weekly\\n\\n**Maps to AARRR:** Acquisition.\\n\\n**Note:** For pre-seed clients with no paid budget, score this 0 *without* treating it as a weakness — it reflects the funding stage, not a marketing failure.\\n\\n### 16. SEO\\n**What's scored:** Organic search performance. Domain rating, ranking keywords, organic traffic, content cluster strategy.\\n\\n**Score guide:**\\n- 0 = No SEO; new domain or zero-authority\\n- 2 = Some content but no strategy; ranks for brand only\\n- 4 = Established content clusters; growing organic traffic; DR 25+\\n- 5 = SEO is a moat; DR 40+; thousand+ ranking keywords; consistent content production\\n\\n**Maps to AARRR:** Acquisition.\\n\\n### 17. Internationalization\\n**What's scored:** Geographic expansion, language localization, region-specific pricing.\\n\\n**Score guide:**\\n- 0 = US/EN only; no international consideration\\n- 2 = International users exist but aren't served (one language, one currency)\\n- 4 = Multi-language, region-specific pricing, GTM playbook for new markets\\n- 5 = International is a strength; multi-region revenue; localized GTM\\n\\n**Maps to AARRR:** Acquisition.\\n\\n**Note:** For most early-stage companies, internationalization scores 0–1 and that's appropriate. Don't penalize early-stage companies for not having international playbooks yet.\\n\\n## How to compute the total + read the shape\\n\\n**Total = sum of all 17 scores. Out of 85.**\\n\\nThe total matters less than the *shape*. After the scoring table, write a 2–4 sentence \\\"shape interpretation\\\":\\n\\n> *\\\"High in {strong sections}, low in {weak sections}. That shape is the gap the rest of the plan closes — Sections X (AARRR stage) is the longest because that's where the gap is widest.\\\"*\\n\\n## Common shapes\\n\\n### \\\"Strong voice / messaging, weak distribution\\\"\\n- High: Positioning (#1), Customer research (#2), Messaging (#11)\\n- Low: SEO (#16), Ads (#15), GTM launches (#14)\\n- Translation: The founder is a strong storyteller but distribution hasn't caught up. Plan emphasizes Acquisition + paid layer prep.\\n\\n### \\\"Strong acquisition, weak conversion\\\"\\n- High: SEO (#16), Resources (#7), Ads (#15)\\n- Low: Homepage (#3), Onboarding (#8), Conversion pages (#5), Pricing (#12)\\n- Translation: Traffic comes in but doesn't convert. Plan emphasizes Activation + Revenue.\\n\\n### \\\"Strong conversion, weak retention\\\"\\n- High: Onboarding (#8), Homepage (#3), Pricing (#12)\\n- Low: Email lifecycle (#9), CRO (#13)\\n- Translation: Users sign up and pay but churn. Plan emphasizes Retention.\\n\\n### \\\"Strong product, weak everything-else\\\"\\n- High: only Positioning (#1) and Customer research (#2) — the founder knows the customer\\n- Low: everything operational\\n- Translation: Pre-marketing stage. Plan is foundation-heavy. First quarter is bedrock fixes.\\n\\n### \\\"Strong recent revenue, weak compounding\\\"\\n- High: Ads (#15), Sales material (#10), Pricing (#12)\\n- Low: SEO (#16), Resources (#7), Referral mechanics\\n- Translation: Performance marketing carries the business. Plan emphasizes building compounding channels before paid scales further.\\n\\n## When scores are subjective\\n\\nSome sections are easier to score from outside than others. Subjectivity tier:\\n\\n- **Objective (data-driven):** SEO (#16), Ads (#15), Email lifecycle (#9), Onboarding (#8) — backed by analytics\\n- **Semi-objective:** Pricing (#12), CRO (#13), Conversion pages (#5), Sales material (#10) — visible artifacts to evaluate\\n- **Subjective (judgment call):** Positioning (#1), Messaging (#11), Customer research (#2), Resources (#7) — interpretive\\n\\nFor subjective sections, write the rationale into the \\\"Note\\\" column so the team can push back if they disagree.\\n\\n## When a prior scored audit exists\\n\\nIf the team already has scored output from any current-state assessment, ingest those scores directly — don't redo the work. Treat that prior scoring as the ground truth for sections it covers.\\n\\nIf the prior scoring was done weeks ago and material has shifted since (new shipped flows, new content live, repositioning, etc.), note \\\"scored on YYYY-MM-DD; material has shifted since\\\" and update any specific scores you have current evidence for.\\n\"}\n];\n",[],[478,801,803],"fd801cb6-5d6d-11f1-9d15-1607ee4eb77e","ref_7.ts","fd801d7e-5d6d-11f1-9d15-1607ee4eb77e",666,["D",1780286241095],"// GENERATED by deploy/gen_skills_catalog.mjs — do not edit by hand.\nimport type { SkillRef } from \"../index.ts\";\nexport const REFS_PART_7: SkillRef[] = [\n {\"skill\":\"emails\",\"ref\":\"email-types\",\"body\":\"# Email Types Reference\\n\\nA comprehensive guide to lifecycle and campaign emails. Use this as an audit checklist and implementation reference.\\n\\n## Contents\\n- Onboarding Emails (new users series, new customers series, key onboarding step reminder, new user invite)\\n- Retention Emails (upgrade to paid, upgrade to higher plan, ask for review, offer support proactively, product usage report, NPS survey, referral program)\\n- Billing Emails (switch to annual, failed payment recovery, cancellation survey, upcoming renewal reminder)\\n- Usage Emails (daily/weekly/monthly summary, key event or milestone notifications)\\n- Win-Back Emails (expired trials, cancelled customers)\\n- Campaign Emails (monthly roundup/newsletter, seasonal promotions, product updates, industry news roundup, pricing update)\\n- Email Audit Checklist (onboarding, retention, billing, usage, win-back, campaigns)\\n\\n## Onboarding Emails\\n\\n### New Users Series\\n**Trigger**: User signs up (free or trial)\\n**Goal**: Activate user, drive to aha moment\\n**Typical sequence**: 5-7 emails over 14 days\\n\\n- Email 1: Welcome + single next step (immediate)\\n- Email 2: Quick win / getting started (day 1)\\n- Email 3: Key feature highlight (day 3)\\n- Email 4: Success story / social proof (day 5)\\n- Email 5: Check-in + offer help (day 7)\\n- Email 6: Advanced tip (day 10)\\n- Email 7: Upgrade prompt or next milestone (day 14)\\n\\n**Key metrics**: Activation rate, feature adoption\\n\\n---\\n\\n### New Customers Series\\n**Trigger**: User converts to paid\\n**Goal**: Reinforce purchase decision, drive adoption, reduce early churn\\n**Typical sequence**: 3-5 emails over 14 days\\n\\n- Email 1: Thank you + what's next (immediate)\\n- Email 2: Getting full value — setup checklist (day 2)\\n- Email 3: Pro tips for paid features (day 5)\\n- Email 4: Success story from similar customer (day 7)\\n- Email 5: Check-in + introduce support resources (day 14)\\n\\n**Key point**: Different from new user series—they've committed. Focus on reinforcement and expansion, not conversion.\\n\\n---\\n\\n### Key Onboarding Step Reminder\\n**Trigger**: User hasn't completed critical setup step after X time\\n**Goal**: Nudge completion of high-value action\\n**Format**: Single email or 2-3 email mini-sequence\\n\\n**Example triggers**:\\n- Hasn't connected integration after 48 hours\\n- Hasn't invited team member after 3 days\\n- Hasn't completed profile after 24 hours\\n\\n**Copy approach**:\\n- Remind them what they started\\n- Explain why this step matters\\n- Make it easy (direct link to complete)\\n- Offer help if stuck\\n\\n---\\n\\n### New User Invite\\n**Trigger**: Existing user invites teammate\\n**Goal**: Activate the invited user\\n**Recipient**: The person being invited\\n\\n- Email 1: You've been invited (immediate)\\n- Email 2: Reminder if not accepted (day 2)\\n- Email 3: Final reminder (day 5)\\n\\n**Copy approach**:\\n- Personalize with inviter's name\\n- Explain what they're joining\\n- Single CTA to accept invite\\n- Social proof optional\\n\\n---\\n\\n## Retention Emails\\n\\n### Upgrade to Paid\\n**Trigger**: Free user shows engagement, or trial ending\\n**Goal**: Convert free to paid\\n**Typical sequence**: 3-5 emails\\n\\n**Trigger options**:\\n- Time-based (trial day 10, 12, 14)\\n- Behavior-based (hit usage limit, used premium feature)\\n- Engagement-based (highly active free user)\\n\\n**Sequence structure**:\\n- Value summary: What they've accomplished\\n- Feature comparison: What they're missing\\n- Social proof: Who else upgraded\\n- Urgency: Trial ending, limited offer\\n- Final: Last chance + easy path\\n\\n---\\n\\n### Upgrade to Higher Plan\\n**Trigger**: User approaching plan limits or using features available on higher tier\\n**Goal**: Upsell to next tier\\n**Format**: Single email or 2-3 email sequence\\n\\n**Trigger examples**:\\n- 80% of seat limit reached\\n- 90% of storage/usage limit\\n- Tried to use higher-tier feature\\n- Power user behavior patterns\\n\\n**Copy approach**:\\n- Acknowledge their growth (positive framing)\\n- Show what next tier unlocks\\n- Quantify value vs. cost\\n- Easy upgrade path\\n\\n---\\n\\n### Ask for Review\\n**Trigger**: Customer milestone (30/60/90 days, key achievement, support resolution)\\n**Goal**: Generate social proof on G2, Capterra, app stores\\n**Format**: Single email\\n\\n**Best timing**:\\n- After positive support interaction\\n- After achieving measurable result\\n- After renewal\\n- NOT after billing issues or bugs\\n\\n**Copy approach**:\\n- Thank them for being a customer\\n- Mention specific value/milestone if possible\\n- Explain why reviews matter (help others decide)\\n- Direct link to review platform\\n- Keep it short—this is an ask\\n\\n---\\n\\n### Offer Support Proactively\\n**Trigger**: Signs of struggle (drop in usage, failed actions, error encounters)\\n**Goal**: Save at-risk user, improve experience\\n**Format**: Single email\\n\\n**Trigger examples**:\\n- Usage dropped significantly week-over-week\\n- Multiple failed attempts at action\\n- Viewed help docs repeatedly\\n- Stuck at same onboarding step\\n\\n**Copy approach**:\\n- Genuine concern tone\\n- Specific: \\\"I noticed you...\\\" (if data allows)\\n- Offer direct help (not just link to docs)\\n- Personal from support or CSM\\n- No sales pitch—pure help\\n\\n---\\n\\n### Product Usage Report\\n**Trigger**: Time-based (weekly, monthly, quarterly)\\n**Goal**: Demonstrate value, drive engagement, reduce churn\\n**Format**: Single email, recurring\\n\\n**What to include**:\\n- Key metrics/activity summary\\n- Comparison to previous period\\n- Achievements/milestones\\n- Suggestions for improvement\\n- Light CTA to explore more\\n\\n**Examples**:\\n- \\\"You saved X hours this month\\\"\\n- \\\"Your team completed X projects\\\"\\n- \\\"You're in the top X% of users\\\"\\n\\n**Key point**: Make them feel good and remind them of value delivered.\\n\\n---\\n\\n### NPS Survey\\n**Trigger**: Time-based (quarterly) or event-based (post-milestone)\\n**Goal**: Measure satisfaction, identify promoters and detractors\\n**Format**: Single email\\n\\n**Best practices**:\\n- Keep it simple: Just the NPS question initially\\n- Follow-up form for \\\"why\\\" based on score\\n- Personal sender (CEO, founder, CSM)\\n- Tell them how you'll use feedback\\n\\n**Follow-up based on score**:\\n- Promoters (9-10): Thank + ask for review/referral\\n- Passives (7-8): Ask what would make it a 10\\n- Detractors (0-6): Personal outreach to understand issues\\n\\n---\\n\\n### Referral Program\\n**Trigger**: Customer milestone, promoter NPS score, or campaign\\n**Goal**: Generate referrals\\n**Format**: Single email or periodic reminders\\n\\n**Good timing**:\\n- After positive NPS response\\n- After customer achieves result\\n- After renewal\\n- Seasonal campaigns\\n\\n**Copy approach**:\\n- Remind them of their success\\n- Explain the referral offer clearly\\n- Make sharing easy (unique link)\\n- Show what's in it for them AND referee\\n\\n---\\n\\n## Billing Emails\\n\\n### Switch to Annual\\n**Trigger**: Monthly subscriber at renewal time or campaign\\n**Goal**: Convert monthly to annual (improve LTV, reduce churn)\\n**Format**: Single email or 2-email sequence\\n\\n**Value proposition**:\\n- Calculate exact savings\\n- Additional benefits (if any)\\n- Lock in current price messaging\\n- Easy one-click switch\\n\\n**Best timing**:\\n- Around monthly renewal date\\n- End of year / new year\\n- After 3-6 months of loyalty\\n- Price increase announcement (lock in old rate)\\n\\n---\\n\\n### Failed Payment Recovery\\n**Trigger**: Payment fails\\n**Goal**: Recover revenue, retain customer\\n**Typical sequence**: 3-4 emails over 7-14 days\\n\\n**Sequence structure**:\\n- Email 1 (Day 0): Friendly notice, update payment link\\n- Email 2 (Day 3): Reminder, service may be interrupted\\n- Email 3 (Day 7): Urgent, account will be suspended\\n- Email 4 (Day 10-14): Final notice, what they'll lose\\n\\n**Copy approach**:\\n- Assume it's an accident (card expired, etc.)\\n- Clear, direct, no guilt\\n- Single CTA to update payment\\n- Explain what happens if not resolved\\n\\n**Key metrics**: Recovery rate, time to recovery\\n\\n---\\n\\n### Cancellation Survey\\n**Trigger**: User cancels subscription\\n**Goal**: Learn why, opportunity to save\\n**Format**: Single email (immediate)\\n\\n**Options**:\\n- In-app survey at cancellation (better completion)\\n- Follow-up email if they skip in-app\\n- Personal outreach for high-value accounts\\n\\n**Questions to ask**:\\n- Primary reason for cancelling\\n- What could we have done better\\n- Would anything change your mind\\n- Can we help with transition\\n\\n**Winback opportunity**: Based on reason, offer targeted save (discount, pause, downgrade, training).\\n\\n---\\n\\n### Upcoming Renewal Reminder\\n**Trigger**: X days before renewal (14 or 30 days typical)\\n**Goal**: No surprise charges, opportunity to expand\\n**Format**: Single email\\n\\n**What to include**:\\n- Renewal date and amount\\n- What's included in renewal\\n- How to update payment/plan\\n- Changes to pricing/features (if any)\\n- Optional: Upsell opportunity\\n\\n**Required for**: Annual subscriptions, high-value contracts\\n\\n---\\n\\n## Usage Emails\\n\\n### Daily/Weekly/Monthly Summary\\n**Trigger**: Time-based\\n**Goal**: Drive engagement, demonstrate value\\n**Format**: Single email, recurring\\n\\n**Content by frequency**:\\n- **Daily**: Notifications, quick stats (for high-engagement products)\\n- **Weekly**: Activity summary, highlights, suggestions\\n- **Monthly**: Comprehensive report, achievements, ROI if calculable\\n\\n**Structure**:\\n- Key metrics at a glance\\n- Notable achievements\\n- Activity breakdown\\n- Suggestions / what to try next\\n- CTA to dive deeper\\n\\n**Personalization**: Must be relevant to their actual usage. Empty reports are worse than no report.\\n\\n---\\n\\n### Key Event or Milestone Notifications\\n**Trigger**: Specific achievement or event\\n**Goal**: Celebrate, drive continued engagement\\n**Format**: Single email per event\\n\\n**Milestone examples**:\\n- First [action] completed\\n- 10th/100th [thing] created\\n- Goal achieved\\n- Team collaboration milestone\\n- Usage streak\\n\\n**Copy approach**:\\n- Celebration tone\\n- Specific achievement\\n- Context (compared to others, compared to before)\\n- What's next / next milestone\\n\\n---\\n\\n## Win-Back Emails\\n\\n### Expired Trials\\n**Trigger**: Trial ended without conversion\\n**Goal**: Convert or re-engage\\n**Typical sequence**: 3-4 emails over 30 days\\n\\n**Sequence structure**:\\n- Email 1 (Day 1 post-expiry): Trial ended, here's what you're missing\\n- Email 2 (Day 7): What held you back? (gather feedback)\\n- Email 3 (Day 14): Incentive offer (discount, extended trial)\\n- Email 4 (Day 30): Final reach-out, door is open\\n\\n**Segmentation**: Different approach based on trial engagement level:\\n- High engagement: Focus on removing friction to convert\\n- Low engagement: Offer fresh start, more onboarding help\\n- No engagement: Ask what happened, offer demo/call\\n\\n---\\n\\n### Cancelled Customers\\n**Trigger**: Time after cancellation (30, 60, 90 days)\\n**Goal**: Win back churned customers\\n**Typical sequence**: 2-3 emails spread over 90 days\\n\\n**Sequence structure**:\\n- Email 1 (Day 30): What's new since you left\\n- Email 2 (Day 60): We've addressed [common reason]\\n- Email 3 (Day 90): Special offer to return\\n\\n**Copy approach**:\\n- No guilt, no desperation\\n- Genuine updates and improvements\\n- Personalize based on cancellation reason if known\\n- Make return easy\\n\\n**Key point**: They're more likely to return if their reason was addressed.\\n\\n---\\n\\n## Campaign Emails\\n\\n### Monthly Roundup / Newsletter\\n**Trigger**: Time-based (monthly)\\n**Goal**: Engagement, brand presence, content distribution\\n**Format**: Single email, recurring\\n\\n**Content mix**:\\n- Product updates and tips\\n- Customer stories\\n- Educational content\\n- Company news\\n- Industry insights\\n\\n**Best practices**:\\n- Consistent send day/time\\n- Scannable format\\n- Mix of content types\\n- One primary CTA focus\\n- Unsubscribe is okay—keeps list healthy\\n\\n---\\n\\n### Seasonal Promotions\\n**Trigger**: Calendar events (Black Friday, New Year, etc.)\\n**Goal**: Drive conversions with timely offer\\n**Format**: Campaign burst (2-4 emails)\\n\\n**Common opportunities**:\\n- New Year (fresh start, annual planning)\\n- End of fiscal year (budget spending)\\n- Black Friday / Cyber Monday\\n- Industry-specific seasons\\n- Back to school / work\\n\\n**Sequence structure**:\\n- Announcement: Offer reveal\\n- Reminder: Midway through promotion\\n- Last chance: Final hours\\n\\n---\\n\\n### Product Updates\\n**Trigger**: New feature release\\n**Goal**: Adoption, engagement, demonstrate momentum\\n**Format**: Single email per major release\\n\\n**What to include**:\\n- What's new (clear and simple)\\n- Why it matters (benefit, not just feature)\\n- How to use it (direct link)\\n- Who asked for it (community acknowledgment)\\n\\n**Segmentation**: Consider targeting based on relevance:\\n- Users who would benefit most\\n- Users who requested feature\\n- Power users first (for beta feel)\\n\\n---\\n\\n### Industry News Roundup\\n**Trigger**: Time-based (weekly or monthly)\\n**Goal**: Thought leadership, engagement, brand value\\n**Format**: Curated newsletter\\n\\n**Content**:\\n- Curated news and links\\n- Your take / commentary\\n- What it means for readers\\n- How your product helps\\n\\n**Best for**: B2B products where customers care about industry trends.\\n\\n---\\n\\n### Pricing Update\\n**Trigger**: Price change announcement\\n**Goal**: Transparent communication, minimize churn\\n**Format**: Single email (or sequence for major changes)\\n\\n**Timeline**:\\n- Announce 30-60 days before change\\n- Reminder 14 days before\\n- Final notice 7 days before\\n\\n**Copy approach**:\\n- Clear, direct, transparent\\n- Explain the why (value delivered, costs increased)\\n- Grandfather if possible (lock in old rate)\\n- Give options (annual lock-in, downgrade)\\n\\n**Important**: Honesty and advance notice build trust even when price increases.\\n\\n---\\n\\n## Email Audit Checklist\\n\\nUse this to audit your current email program:\\n\\n### Onboarding\\n- [ ] New users series\\n- [ ] New customers series\\n- [ ] Key onboarding step reminders\\n- [ ] New user invite sequence\\n\\n### Retention\\n- [ ] Upgrade to paid sequence\\n- [ ] Upgrade to higher plan triggers\\n- [ ] Ask for review (timed properly)\\n- [ ] Proactive support outreach\\n- [ ] Product usage reports\\n- [ ] NPS survey\\n- [ ] Referral program emails\\n\\n### Billing\\n- [ ] Switch to annual campaign\\n- [ ] Failed payment recovery sequence\\n- [ ] Cancellation survey\\n- [ ] Upcoming renewal reminders\\n\\n### Usage\\n- [ ] Daily/weekly/monthly summaries\\n- [ ] Key event notifications\\n- [ ] Milestone celebrations\\n\\n### Win-Back\\n- [ ] Expired trial sequence\\n- [ ] Cancelled customer sequence\\n\\n### Campaigns\\n- [ ] Monthly roundup / newsletter\\n- [ ] Seasonal promotion calendar\\n- [ ] Product update announcements\\n- [ ] Pricing update communications\\n\"},\n {\"skill\":\"emails\",\"ref\":\"sequence-templates\",\"body\":\"# Email Sequence Templates\\n\\nDetailed templates for common email sequences.\\n\\n## Contents\\n- Welcome Sequence (Post-Signup)\\n- Lead Nurture Sequence (Pre-Sale)\\n- Re-Engagement Sequence\\n- Onboarding Sequence (Product Users)\\n\\n## Welcome Sequence (Post-Signup)\\n\\n**Email 1: Welcome (Immediate)**\\n- Subject: Welcome to [Product] — here's your first step\\n- Deliver what was promised (lead magnet, access, etc.)\\n- Single next action\\n- Set expectations for future emails\\n\\n**Email 2: Quick Win (Day 1-2)**\\n- Subject: Get your first [result] in 10 minutes\\n- Enable small success\\n- Build confidence\\n- Link to helpful resource\\n\\n**Email 3: Story/Why (Day 3-4)**\\n- Subject: Why we built [Product]\\n- Origin story or mission\\n- Connect emotionally\\n- Show you understand their problem\\n\\n**Email 4: Social Proof (Day 5-6)**\\n- Subject: How [Customer] achieved [Result]\\n- Case study or testimonial\\n- Relatable to their situation\\n- Soft CTA to explore\\n\\n**Email 5: Overcome Objection (Day 7-8)**\\n- Subject: \\\"I don't have time for X\\\" — sound familiar?\\n- Address common hesitation\\n- Reframe the obstacle\\n- Show easy path forward\\n\\n**Email 6: Core Feature (Day 9-11)**\\n- Subject: Have you tried [Feature] yet?\\n- Highlight underused capability\\n- Show clear benefit\\n- Direct CTA to try it\\n\\n**Email 7: Conversion (Day 12-14)**\\n- Subject: Ready to [upgrade/buy/commit]?\\n- Summarize value\\n- Clear offer\\n- Urgency if appropriate\\n- Risk reversal (guarantee, trial)\\n\\n---\\n\\n## Lead Nurture Sequence (Pre-Sale)\\n\\n**Email 1: Deliver + Introduce (Immediate)**\\n- Deliver the lead magnet\\n- Brief intro to who you are\\n- Preview what's coming\\n\\n**Email 2: Expand on Topic (Day 2-3)**\\n- Related insight to lead magnet\\n- Establish expertise\\n- Light CTA to content\\n\\n**Email 3: Problem Deep-Dive (Day 4-5)**\\n- Articulate their problem deeply\\n- Show you understand\\n- Hint at solution\\n\\n**Email 4: Solution Framework (Day 6-8)**\\n- Your approach/methodology\\n- Educational, not salesy\\n- Builds toward your product\\n\\n**Email 5: Case Study (Day 9-11)**\\n- Real results from real customer\\n- Specific and relatable\\n- Soft CTA\\n\\n**Email 6: Differentiation (Day 12-14)**\\n- Why your approach is different\\n- Address alternatives\\n- Build preference\\n\\n**Email 7: Objection Handler (Day 15-18)**\\n- Common concern addressed\\n- FAQ or myth-busting\\n- Reduce friction\\n\\n**Email 8: Direct Offer (Day 19-21)**\\n- Clear pitch\\n- Strong value proposition\\n- Specific CTA\\n- Urgency if available\\n\\n---\\n\\n## Re-Engagement Sequence\\n\\n**Email 1: Check-In (Day 30-60 of inactivity)**\\n- Subject: Is everything okay, [Name]?\\n- Genuine concern\\n- Ask what happened\\n- Easy win to re-engage\\n\\n**Email 2: Value Reminder (Day 2-3 after)**\\n- Subject: Remember when you [achieved X]?\\n- Remind of past value\\n- What's new since they left\\n- Quick CTA\\n\\n**Email 3: Incentive (Day 5-7 after)**\\n- Subject: We miss you — here's something special\\n- Offer if appropriate\\n- Limited time\\n- Clear CTA\\n\\n**Email 4: Last Chance (Day 10-14 after)**\\n- Subject: Should we stop emailing you?\\n- Honest and direct\\n- One-click to stay or go\\n- Clean the list if no response\\n\\n---\\n\\n## Onboarding Sequence (Product Users)\\n\\nCoordinate with in-app onboarding. Email supports, doesn't duplicate.\\n\\n**Email 1: Welcome + First Step (Immediate)**\\n- Confirm signup\\n- One critical action\\n- Link directly to that action\\n\\n**Email 2: Getting Started Help (Day 1)**\\n- If they haven't completed step 1\\n- Quick tip or video\\n- Support option\\n\\n**Email 3: Feature Highlight (Day 2-3)**\\n- Key feature they should know\\n- Specific use case\\n- In-app link\\n\\n**Email 4: Success Story (Day 4-5)**\\n- Customer who succeeded\\n- Relatable journey\\n- Motivational\\n\\n**Email 5: Check-In (Day 7)**\\n- How's it going?\\n- Ask for feedback\\n- Offer help\\n\\n**Email 6: Advanced Tip (Day 10-12)**\\n- Power feature\\n- For engaged users\\n- Level-up content\\n\\n**Email 7: Upgrade/Expand (Day 14+)**\\n- For trial users: conversion push\\n- For free users: upgrade prompt\\n- For paid: expansion opportunity\\n\"},\n {\"skill\":\"free-tools\",\"ref\":\"tool-types\",\"body\":\"# Free Tool Types Reference\\n\\nDetailed guide to each type of marketing tool you can build.\\n\\n## Contents\\n- Calculators\\n- Generators\\n- Analyzers/Auditors\\n- Testers/Validators\\n- Libraries/Resources\\n- Interactive Educational\\n- Tool Concept Examples by Industry (SaaS product, agency/services, e-commerce, developer tools, finance)\\n\\n## Calculators\\n\\n**Best for**: Decisions involving numbers, comparisons, estimates\\n\\n**Examples**:\\n- ROI calculator\\n- Savings calculator\\n- Cost comparison tool\\n- Salary calculator\\n- Tax estimator\\n- Pricing estimator\\n- Compound interest calculator\\n- Break-even calculator\\n\\n**Why they work**:\\n- Personalized output\\n- High perceived value\\n- Share-worthy results\\n- Clear problem → solution\\n\\n**Implementation tips**:\\n- Keep inputs simple\\n- Show calculations transparently\\n- Make results shareable\\n- Add \\\"powered by\\\" branding\\n\\n---\\n\\n## Generators\\n\\n**Best for**: Creating something useful quickly\\n\\n**Examples**:\\n- Policy generator (privacy, terms)\\n- Template generator\\n- Name/tagline generator\\n- Email subject line generator\\n- Resume builder\\n- Color palette generator\\n- Logo maker\\n- Contract generator\\n\\n**Why they work**:\\n- Tangible output\\n- Saves time\\n- Easily shared\\n- Repeat usage\\n\\n**Implementation tips**:\\n- Output should be immediately usable\\n- Allow customization\\n- Offer download/export options\\n- Include email gating for premium outputs\\n\\n---\\n\\n## Analyzers/Auditors\\n\\n**Best for**: Evaluating existing work or assets\\n\\n**Examples**:\\n- Website grader\\n- SEO analyzer\\n- Email subject tester\\n- Headline analyzer\\n- Security checker\\n- Performance auditor\\n- Accessibility checker\\n- Code quality analyzer\\n\\n**Why they work**:\\n- Curiosity-driven\\n- Personalized insights\\n- Creates awareness of problems\\n- Natural lead to solution\\n\\n**Implementation tips**:\\n- Score or grade for gamification\\n- Benchmark against averages\\n- Provide actionable recommendations\\n- Follow up with improvement offers\\n\\n---\\n\\n## Testers/Validators\\n\\n**Best for**: Checking if something works\\n\\n**Examples**:\\n- Meta tag preview\\n- Email rendering test\\n- Mobile-friendly test\\n- Speed test\\n- DNS checker\\n- SSL certificate checker\\n- Redirect checker\\n- Broken link finder\\n\\n**Why they work**:\\n- Immediate utility\\n- Bookmark-worthy\\n- Repeat usage\\n- Professional necessity\\n\\n**Implementation tips**:\\n- Fast results are essential\\n- Show pass/fail clearly\\n- Provide fix instructions\\n- Integrate with your product where relevant\\n\\n---\\n\\n## Libraries/Resources\\n\\n**Best for**: Reference material\\n\\n**Examples**:\\n- Icon library\\n- Template library\\n- Code snippet library\\n- Example gallery\\n- Industry directory\\n- Resource list\\n- Swipe file collection\\n- Font pairing tool\\n\\n**Why they work**:\\n- High SEO value\\n- Ongoing traffic\\n- Establishes authority\\n- Linkable asset\\n\\n**Implementation tips**:\\n- Make searchable/filterable\\n- Allow easy copying/downloading\\n- Update regularly\\n- Accept community submissions\\n\\n---\\n\\n## Interactive Educational\\n\\n**Best for**: Learning/understanding\\n\\n**Examples**:\\n- Interactive tutorials\\n- Code playgrounds\\n- Visual explainers\\n- Quizzes/assessments\\n- Simulators\\n- Comparison tools\\n- Decision trees\\n- Configurators\\n\\n**Why they work**:\\n- Engages deeply\\n- Demonstrates expertise\\n- Shareable\\n- Memory-creating\\n\\n**Implementation tips**:\\n- Make it hands-on\\n- Show immediate feedback\\n- Lead to deeper resources\\n- Capture engaged users\\n\\n---\\n\\n## Tool Concept Examples by Industry\\n\\n### SaaS Product\\n- Product ROI calculator\\n- Competitor comparison tool\\n- Readiness assessment quiz\\n- Template library for use case\\n- Feature configurator\\n\\n### Agency/Services\\n- Industry benchmark tool\\n- Project scoping calculator\\n- Portfolio review tool\\n- Cost estimator\\n- Proposal generator\\n\\n### E-commerce\\n- Product finder quiz\\n- Comparison tool\\n- Size/fit calculator\\n- Savings calculator\\n- Gift finder\\n\\n### Developer Tools\\n- Code snippet library\\n- Testing/preview tool\\n- Documentation generator\\n- Interactive tutorials\\n- API playground\\n\\n### Finance\\n- Financial calculators\\n- Investment comparison\\n- Budget planner\\n- Tax estimator\\n- Loan calculator\\n\"},\n {\"skill\":\"image\",\"ref\":\"ai-image-prompting\",\"body\":\"# AI Image Prompting Guide\\n\\nHow to write effective prompts for AI image generation models (Gemini/Nano Banana, Flux, Ideogram, DALL-E, Midjourney).\\n\\n---\\n\\n## Prompt Structure\\n\\nA strong image prompt follows this formula:\\n\\n```\\n[Subject] + [Setting/context] + [Visual style] + [Lighting] + [Composition] + [Technical specs]\\n```\\n\\n### Example Prompts by Use Case\\n\\n**Blog hero — SaaS product:**\\n```\\nA clean workspace with a laptop displaying a colorful analytics dashboard,\\nminimalist desk with a coffee cup and notebook,\\nbright natural window lighting from the right,\\nshallow depth of field, commercial photography style,\\n1200x630, high resolution\\n```\\n\\n**Social media graphic — announcement:**\\n```\\nAbstract flowing gradient in deep purple and electric blue,\\ngeometric shapes forming a network pattern,\\ndramatic rim lighting on edges,\\nmodern tech aesthetic, clean and minimal,\\n1080x1080, vibrant colors\\n```\\n\\n**Product lifestyle shot:**\\n```\\nA person in a modern office smiling while looking at a tablet,\\nshowing a project management interface on screen,\\nwarm candid photography, natural lighting,\\nmedium shot, shallow depth of field, editorial style\\n```\\n\\n**Profile banner — professional:**\\n```\\nWide panoramic abstract background in navy blue and teal,\\nsubtle geometric grid pattern with soft gradient,\\nclean corporate aesthetic, muted lighting,\\n1584x396, no text, space for logo overlay on left third\\n```\\n\\n**Directory listing — Product Hunt:**\\n```\\nProduct screenshot on a clean gradient background,\\nsoft shadow underneath, slight 3D perspective tilt,\\nmodern SaaS product presentation style,\\n1270x760, bright and professional\\n```\\n\\n---\\n\\n## Style Keywords\\n\\n### Photorealistic\\n- \\\"commercial photography\\\"\\n- \\\"shot on Canon EOS R5\\\"\\n- \\\"editorial style\\\"\\n- \\\"natural lighting\\\"\\n- \\\"shallow depth of field\\\"\\n\\n### Clean/Corporate\\n- \\\"clean modern aesthetic\\\"\\n- \\\"minimal design\\\"\\n- \\\"professional corporate style\\\"\\n- \\\"bright and airy\\\"\\n- \\\"white background\\\"\\n\\n### Illustrative\\n- \\\"flat vector illustration\\\"\\n- \\\"isometric 3D render\\\"\\n- \\\"hand-drawn sketch style\\\"\\n- \\\"watercolor illustration\\\"\\n- \\\"line art\\\"\\n\\n### Abstract/Brand\\n- \\\"flowing gradient\\\"\\n- \\\"geometric pattern\\\"\\n- \\\"abstract data visualization\\\"\\n- \\\"particle effects\\\"\\n- \\\"holographic iridescent\\\"\\n\\n### Tech/SaaS\\n- \\\"dark mode UI aesthetic\\\"\\n- \\\"neon accent lighting\\\"\\n- \\\"glassmorphism\\\"\\n- \\\"futuristic minimal\\\"\\n- \\\"developer-focused\\\"\\n\\n---\\n\\n## Lighting Keywords\\n\\n| Term | Effect | Best For |\\n|------|--------|----------|\\n| **Natural light** | Warm, organic feel | Lifestyle, editorial |\\n| **Studio lighting** | Even, controlled | Product shots |\\n| **Rim lighting** | Edge highlights, dramatic | Hero images, abstract |\\n| **Soft directional** | Gentle shadows, dimensional | Blog headers |\\n| **Volumetric** | Light rays, atmospheric | Dramatic, cinematic |\\n| **Flat/even** | No shadows, clean | Icons, diagrams |\\n| **Golden hour** | Warm orange tones | Lifestyle, outdoor |\\n| **High key** | Bright, minimal shadows | Clean, corporate |\\n\\n---\\n\\n## Composition Keywords\\n\\n| Term | Effect | Best For |\\n|------|--------|----------|\\n| **Rule of thirds** | Subject off-center | Editorial, lifestyle |\\n| **Centered** | Subject in middle | Product shots, icons |\\n| **Wide/panoramic** | Expansive view | Banners, headers |\\n| **Close-up/macro** | Detail focus | Texture, product detail |\\n| **Bird's eye/overhead** | Top-down view | Desk setups, flat lays |\\n| **Negative space** | Room for text overlay | Blog headers, banners |\\n| **Symmetrical** | Balanced, formal | Corporate, luxury |\\n\\n---\\n\\n## Model-Specific Tips\\n\\n### Gemini Image (Google)\\n\\n- Best all-around for marketing images — good quality, reasonable cost\\n- Supports **image editing** — upload an existing image and describe changes\\n- Decent text rendering — can handle short headlines\\n- Specify \\\"high resolution\\\" for best output\\n- Works well with detailed, descriptive prompts\\n- Same API as text generation — easy to integrate\\n\\n### Flux (Black Forest Labs)\\n\\n- **Multi-image reference** is the killer feature — upload product screenshots, brand assets, or style references\\n- Best for **brand consistency** across a set of images\\n- Use Flux Pro for final assets, Flux Dev for rapid iteration\\n- Flux Klein for high-volume batch generation (cheapest)\\n- Style transfer via reference images > style keywords in prompt\\n- Prompts can be shorter than other models — the references do heavy lifting\\n\\n### Ideogram\\n\\n- **Best text rendering** of any model (industry-leading accuracy)\\n- Use when you need headlines, taglines, or brand names in the image\\n- Style reference system (up to 3 images) for brand consistency\\n- Supports \\\"Magic Prompt\\\" auto-enhancement\\n- Keep text requests simple — 3-5 words max for reliability\\n- Best for social graphics and banners that need text baked in\\n\\n### GPT Image (OpenAI)\\n\\n- Current models: `gpt-image-1` and variants (DALL-E 3 is deprecated)\\n- Integrated with ChatGPT — conversational image generation\\n- Good at following detailed prompts\\n- Decent text rendering (behind Ideogram, comparable to Gemini)\\n- Automatic prompt rewriting — may deviate from exact request\\n- Best for quick one-offs through ChatGPT interface\\n- API gives more control than ChatGPT interface\\n\\n### Midjourney\\n\\n- Highest aesthetic quality for artistic/editorial images\\n- No official API — Discord-based or web interface\\n- **Not agent-friendly** — use for manual creative exploration only\\n- Style flags: `--style raw` for less stylized, `--ar 16:9` for aspect ratio\\n- Best for hero images where pure visual quality matters most\\n- V6+ has improved text rendering but still unreliable\\n\\n---\\n\\n## Common Prompt Mistakes\\n\\n| Mistake | Why It Fails | Fix |\\n|---------|-------------|-----|\\n| \\\"A professional image\\\" | No visual detail | Describe subject, setting, style, lighting |\\n| Long paragraph of text in image | Models can't render paragraphs | 3-5 words max; add text in post |\\n| \\\"Make it look good\\\" | Not actionable | Specify style: \\\"commercial photography, bright\\\" |\\n| 200+ word prompts | Models lose focus | 40-80 words, specific over comprehensive |\\n| No aspect ratio | Random output size | Always specify dimensions or ratio |\\n| \\\"Logo in bottom right\\\" | Unreliable placement | Add logos in post-processing |\\n| \\\"Make it viral\\\" | Not a visual instruction | Describe the aesthetic you want |\\n| Requesting UI screenshots | AI hallucinates interfaces | Capture real screenshots instead |\\n\\n---\\n\\n## Batch Generation Workflow\\n\\nWhen you need multiple images with consistent style (e.g., a blog series or social campaign):\\n\\n1. **Generate 3-4 test images** with different style prompts\\n2. **Pick the winning style** based on brand fit\\n3. **Save the exact prompt** as your template\\n4. **Use Flux multi-reference** — upload the winning image as a style reference\\n5. **Batch generate** variations with the same style, different subjects\\n6. **Post-process** — add text overlays, logos, crop to platform sizes\\n\\n---\\n\\n## Aspect Ratios Quick Reference\\n\\n| Use Case | Ratio | Pixels | Notes |\\n|----------|-------|--------|-------|\\n| Blog hero / OG image | 1.91:1 | 1200x630 | Universal web standard |\\n| Full-width hero | 16:9 | 1920x1080 | Website headers |\\n| Instagram Feed | 1:1 | 1080x1080 | Square |\\n| Instagram Feed (tall) | 4:5 | 1080x1350 | More screen real estate |\\n| Stories / Reels | 9:16 | 1080x1920 | Vertical full screen |\\n| LinkedIn cover | 4:1 | 1584x396 | Personal profile |\\n| Twitter/X header | 3:1 | 1500x500 | Profile banner |\\n| Product Hunt gallery | 5:3 | 1270x760 | Launch page |\\n| GitHub social preview | 2:1 | 1280x640 | Repo link card |\\n\\n---\\n\\n## Cost Optimization\\n\\n- **Iterate at low quality first** — use Flux Dev or Gemini Flash for drafts, upgrade for finals\\n- **Use references over long prompts** — Flux multi-reference produces more consistent results with fewer retries\\n- **Batch similar requests** — generate all blog headers in one session with the same style\\n- **Cache and reuse** — abstract backgrounds, patterns, and textures can be reused across multiple images\\n- **Post-process instead of re-generate** — crop, overlay text, and adjust color in code rather than generating new images\\n\"},\n {\"skill\":\"lead-magnets\",\"ref\":\"benchmarks\",\"body\":\"# Lead Magnet Benchmarks\\n\\nReference data for planning and evaluating lead magnet performance.\\n\\n---\\n\\n## Conversion Rate Benchmarks\\n\\n### By Format Type\\n\\n| Format | Landing Page Conversion | Notes |\\n|--------|------------------------|-------|\\n| Checklist | 30-50% | High because low commitment |\\n| Cheat sheet | 25-40% | Quick reference appeal |\\n| Template | 25-45% | Immediate utility drives conversion |\\n| Ebook/guide | 20-35% | Higher commitment, lower rate |\\n| Quiz | 30-50% | Engagement drives completion |\\n| Webinar | 20-40% (registration) | 30-50% attendance rate of registrants |\\n| Mini-course | 15-30% | Higher commitment, higher quality leads |\\n| Free trial | 5-15% | High intent but high friction |\\n\\n### By Traffic Source\\n\\n| Source | Expected Conversion | Why |\\n|--------|-------------------|-----|\\n| Blog content upgrade | 3-8% of post readers | Contextually relevant |\\n| Dedicated landing page (organic) | 20-40% | High intent |\\n| Dedicated landing page (paid) | 10-25% | Cold traffic |\\n| Exit-intent popup | 2-5% of visitors | Interruption-based |\\n| Sidebar/banner CTA | 0.5-2% | Low engagement |\\n| Social media link | 10-20% | Warm but browsing |\\n\\n### By Industry (Landing Page)\\n\\n| Industry | Average Conversion |\\n|----------|-------------------|\\n| SaaS/Tech | 15-25% |\\n| Marketing/Agency | 20-35% |\\n| Finance | 10-20% |\\n| E-commerce | 10-20% |\\n| Education | 20-35% |\\n| Health/Wellness | 15-25% |\\n\\n---\\n\\n## Lead Quality Indicators\\n\\n### Signals of High-Quality Leads\\n- Open first 3 emails at 40%+ rate\\n- Click through to content or product pages\\n- Return to site within 30 days\\n- Match ICP demographics (role, company size, industry)\\n- Progress to trial, demo, or purchase within 90 days\\n\\n### Signals of Low-Quality Leads\\n- Unsubscribe within first 3 emails\\n- Never open beyond delivery email\\n- Use disposable email addresses\\n- Don't match target customer profile\\n- Downloaded for the content, no product interest\\n\\n### Quality vs. Quantity by Format\\n\\n| Format | Lead Volume | Lead Quality | Net Value |\\n|--------|-------------|-------------|-----------|\\n| Generic ebook | High | Low-Medium | Medium |\\n| Specific template | Medium | High | High |\\n| Industry report | Medium | Medium-High | High |\\n| Quiz/assessment | High | Medium (segmentable) | High |\\n| Webinar | Low-Medium | High | High |\\n| Checklist | High | Low-Medium | Medium |\\n| Free trial | Low | Very High | Very High |\\n\\n---\\n\\n## Cost Benchmarks\\n\\n### Cost Per Lead by Channel\\n\\n| Channel | Typical CPL | Notes |\\n|---------|-------------|-------|\\n| Organic search | $0-5 | Lowest, but slow to build |\\n| Blog content upgrade | $0-2 | Nearly free if you have traffic |\\n| Facebook/Instagram Ads | $3-15 | B2C lower, B2B higher |\\n| Google Ads | $10-50 | High intent, higher cost |\\n| LinkedIn Ads | $25-75 | B2B, expensive but qualified |\\n| Partner co-promotion | $0-5 | Depends on relationship |\\n\\n### Creation Cost by Format\\n\\n| Format | DIY Cost | With Designer/Freelancer |\\n|--------|----------|-------------------------|\\n| Checklist | Free | $100-300 |\\n| Cheat sheet | Free | $200-500 |\\n| Template | Free | $100-500 |\\n| Ebook (10-25 pages) | Free | $500-2,000 |\\n| Quiz | $0-100/mo (tool) | $500-2,000 |\\n| Webinar | Free (Zoom) | $500-1,500 (production) |\\n| Mini-course (email) | Free | $500-1,500 (copywriting) |\\n| Video course | $0-200 (gear) | $2,000-5,000 |\\n\\n---\\n\\n## Timeline Expectations\\n\\n### Time to Create\\n\\n| Format | Solo Creator | With Team |\\n|--------|-------------|-----------|\\n| Checklist | 1-2 hours | Same day |\\n| Cheat sheet | 2-4 hours | Same day |\\n| Template | 2-8 hours | 1-2 days |\\n| Swipe file | 4-8 hours | 1-2 days |\\n| Ebook | 1-3 weeks | 1-2 weeks |\\n| Quiz | 1-2 weeks | 1 week |\\n| Webinar prep | 1 week | 3-5 days |\\n| Mini-course | 1-2 weeks | 1 week |\\n\\n### Time to See Results\\n\\n| Phase | Timeline |\\n|-------|----------|\\n| First leads | Immediately with existing traffic or paid |\\n| Organic traffic growth | 2-6 months (SEO) |\\n| Meaningful lead volume | 1-3 months |\\n| Measurable impact on pipeline | 3-6 months |\\n| Full ROI assessment | 6-12 months |\\n\\n**Note**: These benchmarks are general guidelines. Your actual results depend on audience, niche, traffic volume, and offer quality. Start measuring from day one and build your own benchmarks.\\n\"},\n {\"skill\":\"lead-magnets\",\"ref\":\"format-guide\",\"body\":\"# Lead Magnet Format Guide\\n\\nDetailed creation guidance for each lead magnet format.\\n\\n## Contents\\n- Ebooks & Guides\\n- Checklists\\n- Cheat Sheets\\n- Templates & Spreadsheets\\n- Swipe Files\\n- Mini-Courses\\n- Quizzes & Assessments\\n- Webinars & Workshops\\n\\n---\\n\\n## Ebooks & Guides\\n\\n**Best for**: Building authority, deep education, awareness-stage leads\\n\\n**Structure**:\\n1. Title page with professional design\\n2. Table of contents\\n3. Introduction — frame the problem, set expectations\\n4. 3-7 chapters — one key concept per chapter\\n5. Summary — recap key takeaways\\n6. CTA — next step toward your product\\n\\n**Guidelines**:\\n- Ideal length: 10-25 pages (shorter is fine if valuable)\\n- Include visuals: charts, diagrams, screenshots\\n- Use callout boxes for key stats or quotes\\n- End each chapter with a quick takeaway\\n- Don't pad — density beats length\\n\\n**Tools**: Canva, Google Docs → PDF, Notion export, Designrr, Beacon.by\\n\\n---\\n\\n## Checklists\\n\\n**Best for**: Process-oriented tasks, quick wins, implementation help\\n\\n**Structure**:\\n- Title: \\\"[Number]-Point [Topic] Checklist\\\"\\n- Numbered or checkbox items\\n- Group into logical sections if 10+ items\\n- Brief explanation per item (1-2 sentences)\\n\\n**Guidelines**:\\n- Keep to 1-2 pages\\n- Use actionable language (\\\"Verify X\\\", \\\"Set up Y\\\", \\\"Remove Z\\\")\\n- Order by workflow sequence or priority\\n- Make it printable — clean layout, generous spacing\\n- Include a \\\"done\\\" checkbox for each item\\n\\n**What works**: Step-by-step processes, audit criteria, launch checklists, setup guides\\n\\n---\\n\\n## Cheat Sheets\\n\\n**Best for**: Reference material, shortcuts, quick-lookup information\\n\\n**Structure**:\\n- One page (two pages max)\\n- Organized by category or workflow\\n- Dense but scannable\\n- Visual hierarchy with headers and grouping\\n\\n**Guidelines**:\\n- Optimize for quick reference, not reading\\n- Use tables, grids, or columns\\n- Include formulas, shortcuts, or code snippets\\n- Design for printing or saving as desktop reference\\n- Bold the most important items\\n\\n**What works**: Keyboard shortcuts, formula references, terminology glossaries, decision matrices\\n\\n---\\n\\n## Templates & Spreadsheets\\n\\n**Best for**: Repeatable processes, planning, tracking\\n\\n### Spreadsheet Templates (Google Sheets / Excel)\\n- Include a \\\"How to Use\\\" tab with instructions\\n- Pre-fill with example data\\n- Use data validation for dropdown fields\\n- Add conditional formatting for visual cues\\n- Lock formula cells, leave input cells editable\\n- Include a \\\"Make a Copy\\\" link (Google Sheets)\\n\\n### Notion Templates\\n- Provide a duplicate link\\n- Include a getting-started guide\\n- Pre-populate with example content\\n- Use Notion's database features (views, filters, relations)\\n- Keep it simple — don't over-engineer\\n\\n### Document Templates\\n- Provide in multiple formats (Google Doc, Word, PDF)\\n- Include placeholder text with [BRACKETS] for customization\\n- Add inline instructions in a different color\\n- Make it immediately usable with minimal editing\\n\\n**Key principle**: Templates should be usable within 5 minutes of downloading.\\n\\n---\\n\\n## Swipe Files\\n\\n**Best for**: Inspiration, examples, learning from others\\n\\n**Structure**:\\n- Curated collection of 15-50 examples\\n- Organized by category, type, or use case\\n- Each example includes:\\n - The example itself (screenshot, text, link)\\n - Why it works (2-3 bullet annotations)\\n - How to adapt it (1-2 sentences)\\n\\n**Guidelines**:\\n- Quality over quantity — curate ruthlessly\\n- Add your analysis, don't just collect\\n- Organize for browsing (categories, tags)\\n- Update periodically with fresh examples\\n- Credit original sources\\n\\n**What works**: Email subject lines, landing pages, ad copy, CTAs, onboarding flows, pricing pages\\n\\n---\\n\\n## Mini-Courses\\n\\n### Email-Based Mini-Courses\\n- 3-5 emails delivered over 5-7 days\\n- One lesson per email, one concept per lesson\\n- Each email: teach → example → exercise\\n- Progressive difficulty (build on previous lessons)\\n- Final email: summary + CTA for product or next step\\n\\n### Video-Based Mini-Courses\\n- 3-5 videos, 5-15 minutes each\\n- Host on unlisted YouTube, Loom, or course platform\\n- Deliver links via email drip\\n- Include worksheets or exercises per lesson\\n- More personal — builds stronger connection\\n\\n**Cadence**: Every 1-2 days. Don't stretch too thin or compress too tight.\\n\\n**Key principle**: Each lesson should deliver standalone value. If someone only watches lesson 2, they should still learn something useful.\\n\\n---\\n\\n## Quizzes & Assessments\\n\\n**Best for**: Engagement, segmentation, personalized results\\n\\n**Question Design**:\\n- 5-10 questions (sweet spot: 7)\\n- Multiple choice only — no open-ended\\n- Questions should feel insightful, not obvious\\n- Progress indicator (\\\"Question 3 of 7\\\")\\n\\n**Result Segmentation**:\\n- 3-5 result categories\\n- Each result: name, description, personalized recommendations\\n- Tailor follow-up emails by result type\\n- Share-worthy result format (\\\"I got: Growth Stage Marketer!\\\")\\n\\n**Implementation**: Gate results behind email capture. The quiz itself is ungated — the personalized results require an email.\\n\\n**For building interactive quizzes**: See **free-tools** skill for technical implementation guidance.\\n\\n---\\n\\n## Webinars & Workshops\\n\\n### Live Webinars\\n- 30-45 minutes teaching + 15 minutes Q&A\\n- Structure: Hook → Teach (3 key points) → Demo/example → CTA\\n- Promote 1-2 weeks in advance\\n- Send 3 reminder emails (confirmation, day before, 1 hour before)\\n- Record for replay (extends value)\\n\\n### Evergreen Webinars\\n- Pre-recorded, available on demand\\n- Same structure as live but tighter editing\\n- Always-on lead generation\\n- Gate with email registration\\n- Automated follow-up sequence\\n\\n**Follow-up**: Send replay link + summary + CTA within 24 hours. Continue with nurture sequence.\\n\\n**Key principle**: Teach something genuinely useful. A webinar that's just a sales pitch will damage trust.\\n\"},\n {\"skill\":\"marketing-ideas\",\"ref\":\"ideas-by-category\",\"body\":\"# The 139 Marketing Ideas\\n\\nComplete list of proven marketing approaches organized by category.\\n\\n## Contents\\n- Content & SEO (1-10)\\n- Competitor & Comparison (11-13)\\n- Free Tools & Engineering (14-22)\\n- Paid Advertising (23-34)\\n- Social Media & Community (35-44)\\n- Email Marketing (45-53)\\n- Partnerships & Programs (54-64)\\n- Events & Speaking (65-72)\\n- PR & Media (73-76)\\n- Launches & Promotions (77-86)\\n- Product-Led Growth (87-96)\\n- Content Formats (97-109)\\n- Unconventional & Creative (110-122)\\n- Platforms & Marketplaces (123-130)\\n- International & Localization (131-132)\\n- Developer & Technical (133-136)\\n- Audience-Specific (137-139)\\n\\n## Content & SEO (1-10)\\n\\n1. **Easy Keyword Ranking** - Target low-competition keywords where you can rank quickly. Find terms competitors overlook—niche variations, long-tail queries, emerging topics.\\n\\n2. **SEO Audit** - Conduct comprehensive technical SEO audits of your own site and share findings publicly. Document fixes and improvements to build authority.\\n\\n3. **Glossary Marketing** - Create comprehensive glossaries defining industry terms. Each term becomes an SEO-optimized page targeting \\\"what is X\\\" searches.\\n\\n4. **Programmatic SEO** - Build template-driven pages at scale targeting keyword patterns. Location pages, comparison pages, integration pages—any pattern with search volume.\\n\\n5. **Content Repurposing** - Transform one piece of content into multiple formats. Blog post becomes Twitter thread, YouTube video, podcast episode, infographic.\\n\\n6. **Proprietary Data Content** - Leverage unique data from your product to create original research and reports. Data competitors can't replicate creates linkable assets.\\n\\n7. **Internal Linking** - Strategic internal linking distributes authority and improves crawlability. Build topical clusters connecting related content.\\n\\n8. **Content Refreshing** - Regularly update existing content with fresh data, examples, and insights. Refreshed content often outperforms new content.\\n\\n9. **Knowledge Base SEO** - Optimize help documentation for search. Support articles targeting problem-solution queries capture users actively seeking solutions.\\n\\n10. **Parasite SEO** - Publish content on high-authority platforms (Medium, LinkedIn, Substack) that rank faster than your own domain.\\n\\n---\\n\\n## Competitor & Comparison (11-13)\\n\\n11. **Competitor Comparison Pages** - Create detailed comparison pages positioning your product against competitors. \\\"[Your Product] vs [Competitor]\\\" pages capture high-intent searchers.\\n\\n12. **Marketing Jiu-Jitsu** - Turn competitor weaknesses into your strengths. When competitors raise prices, launch affordability campaigns.\\n\\n13. **Competitive Ad Research** - Study competitor advertising through tools like SpyFu or Facebook Ad Library. Learn what messaging resonates.\\n\\n---\\n\\n## Free Tools & Engineering (14-22)\\n\\n14. **Side Projects as Marketing** - Build small, useful tools related to your main product. Side projects attract users who may later convert.\\n\\n15. **Engineering as Marketing** - Build free tools that solve real problems. Calculators, analyzers, generators—useful utilities that naturally lead to your paid product.\\n\\n16. **Importers as Marketing** - Build import tools for competitor data. \\\"Import from [Competitor]\\\" reduces switching friction.\\n\\n17. **Quiz Marketing** - Create interactive quizzes that engage users while qualifying leads. Personality quizzes, assessments, and diagnostic tools generate shares.\\n\\n18. **Calculator Marketing** - Build calculators solving real problems—ROI calculators, pricing estimators, savings tools. Calculators attract links and rank well.\\n\\n19. **Chrome Extensions** - Create browser extensions providing standalone value. Chrome Web Store becomes another distribution channel.\\n\\n20. **Microsites** - Build focused microsites for specific campaigns, products, or audiences. Dedicated domains can rank faster.\\n\\n21. **Scanners** - Build free scanning tools that audit or analyze something. Website scanners, security checkers, performance analyzers.\\n\\n22. **Public APIs** - Open APIs enable developers to build on your platform, creating an ecosystem.\\n\\n---\\n\\n## Paid Advertising (23-34)\\n\\n23. **Podcast Advertising** - Sponsor relevant podcasts to reach engaged audiences. Host-read ads perform especially well.\\n\\n24. **Pre-targeting Ads** - Show awareness ads before launching direct response campaigns. Warm audiences convert better.\\n\\n25. **Facebook Ads** - Meta's detailed targeting reaches specific audiences. Test creative variations and leverage retargeting.\\n\\n26. **Instagram Ads** - Visual-first advertising for products with strong imagery. Stories and Reels ads capture attention.\\n\\n27. **Twitter Ads** - Reach engaged professionals discussing industry topics. Promoted tweets and follower campaigns.\\n\\n28. **LinkedIn Ads** - Target by job title, company size, and industry. Premium CPMs justified by B2B purchase intent.\\n\\n29. **Reddit Ads** - Reach passionate communities with authentic messaging. Transparency wins on Reddit.\\n\\n30. **Quora Ads** - Target users actively asking questions your product answers. Intent-rich environment.\\n\\n31. **Google Ads** - Capture high-intent search queries. Brand terms, competitor terms, and category terms.\\n\\n32. **YouTube Ads** - Video ads with detailed targeting. Pre-roll and discovery ads reach users consuming related content.\\n\\n33. **Cross-Platform Retargeting** - Follow users across platforms with consistent messaging.\\n\\n34. **Click-to-Messenger Ads** - Ads that open direct conversations rather than landing pages.\\n\\n---\\n\\n## Social Media & Community (35-44)\\n\\n35. **Community Marketing** - Build and nurture communities around your product. Slack groups, Discord servers, Facebook groups.\\n\\n36. **Quora Marketing** - Answer relevant questions with genuine expertise. Include product mentions where naturally appropriate.\\n\\n37. **Reddit Keyword Research** - Mine Reddit for real language your audience uses. Discover pain points and desires.\\n\\n38. **Reddit Marketing** - Participate authentically in relevant subreddits. Provide value first.\\n\\n39. **LinkedIn Audience** - Build personal brands on LinkedIn for B2B reach. Thought leadership builds authority.\\n\\n40. **Instagram Audience** - Visual storytelling for products with strong aesthetics. Behind-the-scenes and user stories.\\n\\n41. **X Audience** - Build presence on X/Twitter through consistent value. Threads and insights grow followings.\\n\\n42. **Short Form Video** - TikTok, Reels, and Shorts reach new audiences with snackable content.\\n\\n43. **Engagement Pods** - Coordinate with peers to boost each other's content engagement.\\n\\n44. **Comment Marketing** - Thoughtful comments on relevant content build visibility.\\n\\n---\\n\\n## Email Marketing (45-53)\\n\\n45. **Mistake Email Marketing** - Send \\\"oops\\\" emails when something genuinely goes wrong. Authenticity generates engagement.\\n\\n46. **Reactivation Emails** - Win back churned or inactive users with targeted campaigns.\\n\\n47. **Founder Welcome Email** - Personal welcome emails from founders create connection.\\n\\n48. **Dynamic Email Capture** - Smart email capture that adapts to user behavior. Exit intent, scroll depth triggers.\\n\\n49. **Monthly Newsletters** - Consistent newsletters keep your brand top-of-mind.\\n\\n50. **Inbox Placement** - Technical email optimization for deliverability. Authentication and list hygiene.\\n\\n51. **Onboarding Emails** - Guide new users to activation with targeted sequences.\\n\\n52. **Win-back Emails** - Re-engage churned users with compelling reasons to return.\\n\\n53. **Trial Reactivation** - Expired trials aren't lost causes. Targeted campaigns can recover them.\\n\\n---\\n\\n## Partnerships & Programs (54-64)\\n\\n54. **Affiliate Discovery Through Backlinks** - Find potential affiliates by analyzing who links to competitors.\\n\\n55. **Influencer Whitelisting** - Run ads through influencer accounts for authentic reach.\\n\\n56. **Reseller Programs** - Enable agencies to resell your product. White-label options create distribution partners.\\n\\n57. **Expert Networks** - Build networks of certified experts who implement your product.\\n\\n58. **Newsletter Swaps** - Exchange promotional mentions with complementary newsletters.\\n\\n59. **Article Quotes** - Contribute expert quotes to journalists. HARO connects experts with writers.\\n\\n60. **Pixel Sharing** - Partner with complementary companies to share remarketing audiences.\\n\\n61. **Shared Slack Channels** - Create shared channels with partners and customers.\\n\\n62. **Affiliate Program** - Structured commission programs for referrers.\\n\\n63. **Integration Marketing** - Joint marketing with integration partners.\\n\\n64. **Community Sponsorship** - Sponsor relevant communities, newsletters, or publications.\\n\\n---\\n\\n## Events & Speaking (65-72)\\n\\n65. **Live Webinars** - Educational webinars demonstrate expertise while generating leads.\\n\\n66. **Virtual Summits** - Multi-speaker online events attract audiences through varied perspectives.\\n\\n67. **Roadshows** - Take your product on the road to meet customers directly.\\n\\n68. **Local Meetups** - Host or attend local meetups in key markets.\\n\\n69. **Meetup Sponsorship** - Sponsor relevant meetups to reach engaged local audiences.\\n\\n70. **Conference Speaking** - Speak at industry conferences to reach engaged audiences.\\n\\n71. **Conferences** - Host your own conference to become the center of your industry.\\n\\n72. **Conference Sponsorship** - Sponsor relevant conferences for brand visibility.\\n\\n---\\n\\n## PR & Media (73-76)\\n\\n73. **Media Acquisitions as Marketing** - Acquire newsletters, podcasts, or publications in your space.\\n\\n74. **Press Coverage** - Pitch newsworthy stories to relevant publications.\\n\\n75. **Fundraising PR** - Leverage funding announcements for press coverage.\\n\\n76. **Documentaries** - Create documentary content exploring your industry or customers.\\n\\n---\\n\\n## Launches & Promotions (77-86)\\n\\n77. **Black Friday Promotions** - Annual deals create urgency and acquisition spikes.\\n\\n78. **Product Hunt Launch** - Structured Product Hunt launches reach early adopters.\\n\\n79. **Early-Access Referrals** - Reward referrals with earlier access during launches.\\n\\n80. **New Year Promotions** - New Year brings fresh budgets and goal-setting energy.\\n\\n81. **Early Access Pricing** - Launch with discounted early access tiers.\\n\\n82. **Product Hunt Alternatives** - Launch on BetaList, Launching Next, AlternativeTo.\\n\\n83. **Twitter Giveaways** - Engagement-boosting giveaways that require follows or retweets.\\n\\n84. **Giveaways** - Strategic giveaways attract attention and capture leads.\\n\\n85. **Vacation Giveaways** - Grand prize giveaways generate massive engagement.\\n\\n86. **Lifetime Deals** - One-time payment deals generate cash and users.\\n\\n---\\n\\n## Product-Led Growth (87-96)\\n\\n87. **Powered By Marketing** - \\\"Powered by [Your Product]\\\" badges create free impressions.\\n\\n88. **Free Migrations** - Offer free migration services from competitors.\\n\\n89. **Contract Buyouts** - Pay to exit competitor contracts.\\n\\n90. **One-Click Registration** - Minimize signup friction with OAuth options.\\n\\n91. **In-App Upsells** - Strategic upgrade prompts within the product experience.\\n\\n92. **Newsletter Referrals** - Built-in referral programs for newsletters.\\n\\n93. **Viral Loops** - Product mechanics that naturally encourage sharing.\\n\\n94. **Offboarding Flows** - Optimize cancellation flows to retain or learn.\\n\\n95. **Concierge Setup** - White-glove onboarding for high-value accounts.\\n\\n96. **Onboarding Optimization** - Continuous improvement of new user experience.\\n\\n---\\n\\n## Content Formats (97-109)\\n\\n97. **Playlists as Marketing** - Create Spotify playlists for your audience.\\n\\n98. **Template Marketing** - Offer free templates users can immediately use.\\n\\n99. **Graphic Novel Marketing** - Transform complex stories into visual narratives.\\n\\n100. **Promo Videos** - High-quality promotional videos showcase your product.\\n\\n101. **Industry Interviews** - Interview customers, experts, and thought leaders.\\n\\n102. **Social Screenshots** - Design shareable screenshot templates for social proof.\\n\\n103. **Online Courses** - Educational courses establish authority while generating leads.\\n\\n104. **Book Marketing** - Author a book establishing expertise in your domain.\\n\\n105. **Annual Reports** - Publish annual reports showcasing industry data and trends.\\n\\n106. **End of Year Wraps** - Personalized year-end summaries users want to share.\\n\\n107. **Podcasts** - Launch a podcast reaching audiences during commutes.\\n\\n108. **Changelogs** - Public changelogs showcase product momentum.\\n\\n109. **Public Demos** - Live product demonstrations showing real usage.\\n\\n---\\n\\n## Unconventional & Creative (110-122)\\n\\n110. **Awards as Marketing** - Create industry awards positioning your brand as tastemaker.\\n\\n111. **Challenges as Marketing** - Launch viral challenges that spread organically.\\n\\n112. **Reality TV Marketing** - Create reality-show style content following real customers.\\n\\n113. **Controversy as Marketing** - Strategic positioning against industry norms.\\n\\n114. **Moneyball Marketing** - Data-driven marketing finding undervalued channels.\\n\\n115. **Curation as Marketing** - Curate valuable resources for your audience.\\n\\n116. **Grants as Marketing** - Offer grants to customers or community members.\\n\\n117. **Product Competitions** - Sponsor competitions using your product.\\n\\n118. **Cameo Marketing** - Use Cameo celebrities for personalized messages.\\n\\n119. **OOH Advertising** - Out-of-home advertising—billboards, transit ads.\\n\\n120. **Marketing Stunts** - Bold, attention-grabbing marketing moments.\\n\\n121. **Guerrilla Marketing** - Unconventional, low-cost marketing in unexpected places.\\n\\n122. **Humor Marketing** - Use humor to stand out and create memorability.\\n\\n---\\n\\n## Platforms & Marketplaces (123-130)\\n\\n123. **Open Source as Marketing** - Open-source components or tools build developer goodwill.\\n\\n124. **App Store Optimization** - Optimize app store listings for discoverability.\\n\\n125. **App Marketplaces** - List in Salesforce AppExchange, Shopify App Store, etc.\\n\\n126. **YouTube Reviews** - Get YouTubers to review your product.\\n\\n127. **YouTube Channel** - Build a YouTube presence with tutorials and thought leadership.\\n\\n128. **Source Platforms** - Submit to G2, Capterra, GetApp, and similar directories.\\n\\n129. **Review Sites** - Actively manage presence on review platforms.\\n\\n130. **Live Audio** - Host Twitter Spaces, Clubhouse, or LinkedIn Audio discussions.\\n\\n---\\n\\n## International & Localization (131-132)\\n\\n131. **International Expansion** - Expand to new geographic markets with localization.\\n\\n132. **Price Localization** - Adjust pricing for local purchasing power.\\n\\n---\\n\\n## Developer & Technical (133-136)\\n\\n133. **Investor Marketing** - Market to investors for portfolio introductions.\\n\\n134. **Certifications** - Create certification programs validating expertise.\\n\\n135. **Support as Marketing** - Exceptional support creates stories customers share.\\n\\n136. **Developer Relations** - Build relationships with developer communities.\\n\\n---\\n\\n## Audience-Specific (137-139)\\n\\n137. **Two-Sided Referrals** - Reward both referrer and referred.\\n\\n138. **Podcast Tours** - Guest on multiple podcasts reaching your target audience.\\n\\n139. **Customer Language** - Use the exact words your customers use in marketing.\\n\"}\n];\n",[],[478,801,811],"fcc9369a-5d6d-11f1-b895-1607ee4eb77e","ref_6.ts","fcc9385c-5d6d-11f1-b895-1607ee4eb77e",665,["D",1780286239896],"// GENERATED by deploy/gen_skills_catalog.mjs — do not edit by hand.\nimport type { SkillRef } from \"../index.ts\";\nexport const REFS_PART_6: SkillRef[] = [\n {\"skill\":\"customer-research\",\"ref\":\"source-guides\",\"body\":\"# Customer Research — Source Guides\\n\\nDetailed, source-by-source playbooks for gathering customer intelligence from online watering holes.\\n\\n---\\n\\n## Reddit Research\\n\\n### Finding the Right Subreddits\\n\\nStart by identifying where your ICP spends time, not where your product is discussed.\\n\\n**Discovery methods:**\\n- Search `site:reddit.com \\\"[job title] tools\\\"` or `site:reddit.com \\\"[problem category] software\\\"`\\n- Use [subreddit search tools](https://www.reddit.com/subreddits/search) with problem-space keywords\\n- Look at what subreddits show up in Google results when you search ICP problems\\n- Check what subreddits competitors' customers mention in reviews\\n\\n**Common high-value subreddits by category:**\\n- B2B SaaS: r/sales, r/marketing, r/entrepreneur, r/startups, r/smallbusiness\\n- Dev tools: r/programming, r/devops, r/webdev, r/cscareerquestions\\n- Analytics/data: r/analytics, r/dataengineering, r/BusinessIntelligence\\n- Marketing: r/PPC, r/SEO, r/emailmarketing, r/content_marketing\\n- HR/recruiting: r/recruiting, r/humanresources, r/jobs\\n- Finance/ops: r/accounting, r/financialplanning, r/projectmanagement\\n\\n### Search Operators\\n\\n```\\nsite:reddit.com/r/[subreddit] \\\"[keyword]\\\"\\nsite:reddit.com \\\"[problem]\\\" \\\"recommend\\\" OR \\\"suggestion\\\" OR \\\"alternative\\\"\\nsite:reddit.com \\\"[competitor name]\\\" \\\"vs\\\" OR \\\"alternative\\\" OR \\\"switched\\\"\\n```\\n\\n### What to Look For\\n\\n**High-signal post types:**\\n- \\\"What tools do you use for X?\\\" → reveals alternatives and vocab\\n- \\\"Frustrated with [competitor], looking for alternatives\\\" → reveals pain and switching triggers\\n- \\\"How do you handle X?\\\" → reveals workflow and workarounds\\n- \\\"Is [your category] worth it?\\\" → reveals objections and evaluation criteria\\n- Complaint threads about competitors → reveals gaps you might fill\\n\\n**What to extract:**\\n- The exact problem described in the post\\n- Top-voted solutions (what do practitioners actually recommend?)\\n- Complaints about existing solutions in comments\\n- The language used — note specific words and phrases\\n- Upvote patterns — consensus vs. controversy\\n\\n### Tools\\n- Reddit's native search (limited but fast)\\n- Google: `site:reddit.com [query]` (better results)\\n- Pullpush.io — search archived Reddit posts (good for older threads)\\n\\n---\\n\\n## G2 and Review Site Mining\\n\\n### Your Own Product Reviews\\n\\nRead in this order for maximum signal:\\n\\n1. **3-star reviews** — these are the most honest. Customer liked it enough to stay but felt something was missing.\\n2. **1-star reviews** — understand the failure modes. Separate product issues from support/onboarding issues.\\n3. **5-star reviews** — extract the \\\"what they love\\\" language. These are your proof points.\\n4. **4-star reviews** — often contain \\\"the only thing I wish…\\\" buried in praise.\\n\\n**What to extract:**\\n- What they say they use it *for* (the job to be done)\\n- What they say is hardest or most frustrating\\n- What they compare it to (\\\"coming from [X]\\\", \\\"better than [Y]\\\")\\n- Industry and role signals in reviewer profiles\\n\\n### Competitor Reviews on G2\\n\\nThe 4-star competitor reviews are gold — customers who like the product but still have complaints.\\n\\n**G2 structure to exploit:**\\n- \\\"What do you like best?\\\" → their strengths (your battlecard intel)\\n- \\\"What do you dislike?\\\" → their weaknesses (your opportunities)\\n- \\\"What problems are you solving?\\\" → the job to be done\\n\\n**Capterra** has similar structure. **Trustpilot** skews B2C. **AppSumo** reviews are useful for SMB/prosumer SaaS.\\n\\n### Review Mining Template\\n\\nFor each competitor's 4-star reviews, extract:\\n\\n| Category | Notes |\\n|----------|-------|\\n| Job to be done | Why do they use the product? |\\n| Top praise | What do they love (and might be hard for you to match)? |\\n| Top complaint | What frustrates them? |\\n| Switching context | Did they mention switching from something else? |\\n| Unmet need | \\\"I wish it could…\\\" or \\\"It would be better if…\\\" |\\n\\n---\\n\\n## Indie Hackers and Product Hunt\\n\\n### Indie Hackers\\n\\nStrong signal for founder/builder/SMB ICP.\\n\\n**Where to look:**\\n- \\\"Ask IH\\\" posts: questions about problems your product solves\\n- Milestone posts: when founders describe their stack, they reveal tool preferences and pain\\n- Comment threads on product launches in your category\\n\\n**Search:** `site:indiehackers.com \\\"[problem]\\\"` or use IH's native search.\\n\\n### Product Hunt\\n\\n**Discussion tabs** on competing products are a research goldmine:\\n- Questions asked = pre-sales concerns = objections\\n- Comments = early adopter reactions = leading indicators of reception\\n- \\\"Alternatives to X\\\" collections reveal the competitive landscape as users see it\\n\\n---\\n\\n## Hacker News\\n\\nStrong signal for technical/developer ICP. Skews toward builders and skeptics.\\n\\n**High-value searches:**\\n- `site:news.ycombinator.com \\\"[competitor or category]\\\"`\\n- HN \\\"Ask HN: best tools for X\\\" threads\\n- \\\"Show HN\\\" posts for competitors — read the skeptical comments\\n\\n**What's different about HN:**\\n- Users are more likely to critique underlying architecture and business model\\n- Strong opinions about pricing models (especially anything subscription-based)\\n- First principles objections you might not hear elsewhere\\n\\n---\\n\\n## LinkedIn Research\\n\\n### Posts and Comments\\n\\nSearch for posts by practitioners describing their workflows:\\n- \\\"[Role] at [company size]\\\" + problem keyword\\n- \\\"We used to [old way] but now we [new way]\\\" stories\\n- Posts asking for tool recommendations get comments from active buyers\\n\\n### Job Postings\\n\\nA job posting is a company's admission of a pain point.\\n\\n**What to look for:**\\n- What tools are listed as \\\"nice to have\\\" vs. \\\"required\\\"? (reveals stack and adjacent tools)\\n- What metrics and outcomes are mentioned in the role description?\\n- What does the role spend most of its time doing? (reveals the job to be done)\\n\\n**Search:** `site:linkedin.com/jobs \\\"[role title]\\\" \\\"[relevant tool or category]\\\"`\\n\\n---\\n\\n## YouTube Comments\\n\\n### Finding High-Signal Videos\\n\\n- Tutorial videos for problems your product solves\\n- \\\"Best tools for X in [year]\\\" roundup videos\\n- Competitor product demos and walkthroughs\\n\\n**What to look for in comments:**\\n- \\\"Does this work for [specific use case]?\\\" → edge cases and unmet needs\\n- \\\"I tried this but…\\\" → failure points\\n- \\\"What about [competitor]?\\\" → active evaluation\\n- Timestamps with questions → confusion points in the workflow\\n\\n---\\n\\n## Twitter / X Research\\n\\n### Search Operators\\n\\n```\\n\\\"[competitor]\\\" -filter:replies min_faves:10\\n\\\"[problem keyword]\\\" \\\"anyone know\\\" OR \\\"recommend\\\" OR \\\"alternative\\\"\\n\\\"[category] is broken\\\" OR \\\"frustrated with [category]\\\"\\n```\\n\\n### What to Find\\n\\n- Real-time complaints about competitors\\n- Practitioners discussing their stack\\n- Influencers/thought leaders your ICP follows (useful for distribution)\\n\\n---\\n\\n## Blog Post and Forum Research\\n\\n### Comparison Content\\n\\nGoogle: `\\\"[competitor 1] vs [competitor 2]\\\"` or `\\\"best [category] software [year]\\\"`\\n\\nRead the comments on these posts — people who find comparison content are actively evaluating. Their comments are questions your sales process should answer.\\n\\n### Niche Communities\\n\\n- **Slack communities**: Many industries have public or semi-public Slack groups. Search \\\"[industry] Slack community\\\".\\n- **Discord servers**: Growing for developer and creator communities.\\n- **Facebook Groups**: Still strong for SMB, e-commerce, agency, and coach/consultant ICP.\\n- **Circle/Mighty Networks communities**: Check if there are paid communities in your ICP's space.\\n\\n---\\n\\n## B2C and Consumer App Research\\n\\nB2C research requires different sources than B2B SaaS. Consumer buyers don't congregate on LinkedIn or G2 — they leave traces in app stores, social media, and communities built around the activity your product serves.\\n\\n### App Store Reviews (iOS App Store / Google Play)\\n\\nOne of the richest unfiltered sources for mobile/consumer products.\\n\\n**Read in this order:**\\n1. **1-2 star reviews** — failure modes, unmet expectations, frustration peaks\\n2. **3-star reviews** — honest tradeoffs and \\\"it's good but…\\\" feedback\\n3. **5-star reviews** — what they love in their own words (proof points and positioning)\\n\\n**What to extract:**\\n- What job they hired the app to do (\\\"I use this to…\\\")\\n- The moment it stopped working for them\\n- What they compared it to or switched from\\n- Emotional language — \\\"I love how…\\\", \\\"I'm so frustrated that…\\\"\\n\\n**Search tip:** Sort by \\\"Most Recent\\\" to get fresh signal, then \\\"Most Critical\\\" for pain themes.\\n\\n### Amazon Reviews (for physical products or software with Amazon presence)\\n\\nSame priority order as app stores: 3-star reviews first.\\n\\n**G2 analog for consumer SaaS**: Trustpilot, Sitejabber, and product-specific review aggregators.\\n\\n### Reddit Consumer Communities\\n\\nB2C Reddit is highly vertical — go to the hobby/lifestyle subreddit, not the general ones.\\n\\n**Examples by product type:**\\n- Fitness apps: r/running, r/loseit, r/fitness, r/MyFitnessPal\\n- Personal finance: r/personalfinance, r/financialindependence, r/ynab\\n- Productivity/notes: r/productivity, r/Notion, r/ObsidianMD\\n- Travel: r/travel, r/solotravel, r/digitalnomad\\n- Parenting: r/Parenting, r/beyondthebump, r/daddit\\n\\n**Search pattern:** `site:reddit.com/r/[community] \\\"[app name OR problem]\\\"`\\n\\n### TikTok and Instagram Comments\\n\\nHigh-signal for consumer products with visual/lifestyle appeal.\\n\\n**How to find signal:**\\n- Search TikTok for \\\"[product name] review\\\" or \\\"is [product] worth it\\\"\\n- Watch the top 5-10 videos; read ALL comments — not just likes\\n- On Instagram, check tagged posts from real users (not brand posts)\\n\\n**What to extract:**\\n- Questions in comments = unmet needs or unclear positioning\\n- \\\"Does this work for…?\\\" = jobs they want to hire it for\\n- \\\"I switched from X\\\" comments = switching triggers\\n- Complaints about price, missing features, or broken promises\\n\\n### YouTube Comments (Consumer)\\n\\nSame approach as B2B but different video types:\\n\\n- \\\"X app honest review\\\" or \\\"X app after 6 months\\\"\\n- \\\"Best [category] apps [year]\\\" comparison videos\\n- Unboxing or \\\"setup\\\" videos for hardware/physical products\\n\\nComments on review videos are especially valuable — these are people actively in the consideration phase.\\n\\n### Consumer Community Platforms\\n\\n- **Facebook Groups**: Still dominant for many consumer verticals (parenting, fitness, local services, hobbies)\\n- **Discord servers**: Growing for gaming, creator tools, productivity, crypto, lifestyle communities\\n- **Nextdoor**: Useful for local service businesses\\n- **Quora**: Long-form questions reveal decision anxiety and evaluation criteria\\n\\n---\\n\\n## SparkToro (Audience Intelligence)\\n\\nSparkToro is a behavioral audience research tool. Instead of mining individual posts and comments, it aggregates clickstream, search, and social data to show what your audience does at scale — what they read, watch, listen to, follow, and search for.\\n\\n### When to Use SparkToro vs. Manual Research\\n\\n- **SparkToro first** when you need to understand where your ICP spends time, what content they consume, and which influencers they follow — it answers these questions in seconds with aggregated data\\n- **Manual research first** (Reddit, G2, communities) when you need raw language, exact quotes, emotional context, and the \\\"why\\\" behind behavior\\n- **Best together**: Use SparkToro to identify which podcasts, subreddits, and websites matter, then go mine those sources manually for voice-of-customer language\\n\\n### Key Queries to Run\\n\\n**By competitor:**\\n- \\\"People who follow @competitor\\\" — reveals shared audience affinities\\n- \\\"People who visit competitor.com\\\" — shows what else they consume\\n\\n**By audience description:**\\n- \\\"People who frequently talk about [topic]\\\" — finds audience behaviors\\n- \\\"People whose bio contains [job title]\\\" — profiles a role-based segment\\n\\n**By your own audience:**\\n- \\\"People who visit yourdomain.com\\\" — understand your actual audience\\n- Compare against competitor audience profiles to find gaps\\n\\n### What to Extract\\n\\n| Data Type | What It Tells You | Use It For |\\n|-----------|------------------|------------|\\n| Top websites visited | Where your audience reads | Content partnerships, guest posting targets |\\n| Top podcasts | What they listen to | Podcast guesting, sponsorship decisions |\\n| Top YouTube channels | What they watch | Video content strategy, ad placements |\\n| Top subreddits | Where they discuss | Community participation, Reddit ad targeting |\\n| Search keywords | What they Google | SEO and content topic planning |\\n| AI prompt topics | What they ask AI tools | Emerging content opportunities |\\n| Social accounts followed | Who influences them | Influencer partnerships, co-marketing |\\n| Demographics | Who they are | Persona building, ad targeting |\\n\\n### Source Weighting\\n\\nSparkToro data is aggregated and anonymized — it shows patterns, not individual opinions. Treat it as:\\n- **High confidence** for behavioral data (what they visit, follow, search for)\\n- **Medium confidence** for demographic data (self-reported, may be incomplete)\\n- **Not a substitute** for qualitative research (doesn't capture language, emotions, or the \\\"why\\\")\\n\\n### Limitations\\n\\n- Free tier: 5 reports/month, shallow results (top 5–10)\\n- No public API — all research done through web interface\\n- Skews English-language, US-centric\\n- Shows what audiences do, not why — pair with qualitative sources\\n\\nSee [tools/integrations/sparktoro.md](../../../tools/integrations/sparktoro.md) for full tool details and pricing.\\n\\n---\\n\\n## Organizing Your Research\\n\\nUse a simple tagging system across all sources:\\n\\n| Tag | Meaning |\\n|-----|---------|\\n| `#pain` | A problem or frustration |\\n| `#trigger` | An event that prompted the search |\\n| `#outcome` | What success looks like |\\n| `#language` | Exact phrases worth using in copy |\\n| `#alternative` | Another solution they considered or use |\\n| `#objection` | Reason to hesitate or not buy |\\n| `#competitor` | Anything about a competing product |\\n\\nKeep a running doc with columns: Source | Date | Quote | Tags | Notes\\n\\nAfter 20-30 entries, patterns will emerge. Look for quotes that appear in multiple unrelated sources — those are your highest-confidence insights.\\n\\n---\\n\\n## Source Reliability and Confidence Scoring\\n\\nNot all sources carry equal weight. Use this guide when assigning confidence labels.\\n\\n### Source Weighting\\n\\n| Source | Signal Strength | Bias to Note |\\n|--------|----------------|--------------|\\n| Customer interviews (unprompted) | Very high | Small sample; selection bias toward engaged customers |\\n| Win/loss interviews | High | Recent memory only; rationalization common |\\n| App store / G2 reviews | High | Skews toward strong opinions (love or hate) |\\n| Reddit / community posts | Medium-high | Skews technical, skeptical, vocal minorities |\\n| Support tickets | Medium | Skews toward problems; silent majority not represented |\\n| Survey (open-ended) | Medium | Primed by question framing |\\n| Survey (multiple choice) | Low-medium | Artifacts of the options you provided |\\n| NPS verbatims | Medium | Correlates with score; prompted by the survey moment |\\n| YouTube/TikTok comments | Medium | Skews toward engaged viewers; social performance |\\n| SparkToro audience data | Medium-high | Aggregated behavioral data; strong for \\\"what\\\" but not \\\"why\\\" |\\n| Job postings | Low-medium | Aspirational, not necessarily reflective of current pain |\\n\\n### Confidence Labels in Practice\\n\\nWhen presenting insights, lead with confidence:\\n\\n```\\n[HIGH CONFIDENCE] Customers feel overwhelmed by manual reporting — appears in 12 of 20 interviews,\\n4 Reddit threads, and is the #1 complaint in 3-star G2 reviews. Consistent across SMB and mid-market.\\n\\n[MEDIUM CONFIDENCE] Customers compare us to spreadsheets more than to direct competitors —\\nmentioned in 6 interviews and 3 Reddit threads, but not yet seen in review data.\\n\\n[LOW CONFIDENCE] Enterprise buyers may have procurement concerns — mentioned by 2 interviewees\\nfrom companies 500+. Needs more signal before acting on it.\\n```\\n\\n### Recency Window\\n\\n- **Use as primary source**: Data from the last 12 months\\n- **Use with caution**: 12-24 months (product and market may have shifted)\\n- **Use only for baseline context**: 2+ years old\\n\\nWhen a theme appears consistently across old and new data, that's a durable signal worth acting on.\\n\"},\n {\"skill\":\"directory-submissions\",\"ref\":\"directory-list\",\"body\":\"# Directory List — Full Reference\\n\\nCanonical list of directories organized by tier. DR values are approximate and drift over time — verify via Ahrefs or Moz before building a plan around them.\\n\\n**Column legend:**\\n- **DR** — Domain Rating (Ahrefs). Higher = more link equity passed.\\n- **Dofollow** — Whether the backlink passes SEO value. Nofollow listings still matter for referral traffic and brand signals.\\n- **Cost** — Free unless noted.\\n\\n---\\n\\n## Tier 1 — Flagship Launch Platforms\\n\\nSubmit only during launch week. These are time-sensitive with limited re-submission windows.\\n\\n| Directory | DR | Dofollow | Cost | Notes |\\n|---|---|---|---|---|\\n| **Product Hunt** | 91 | Yes | Free | The anchor event. Requires 3-week warm-up. 2026 algorithm weights comment quality over upvotes. Launch Tue/Wed/Thu at 12:01 AM PT. |\\n| **Hacker News (Show HN)** | 91 | Nofollow | Free | Only if you have a genuine technical angle. Post title format: \\\"Show HN: [Product] — [hook]\\\". Moderator death penalty for hype. |\\n| **BetaList** | 64 | Yes | Free (paid expedite ~$99) | Best for pre-launch waitlist building. Submission → 2–4 week queue unless expedited. |\\n| **Launching Next** | ~30 | Yes | Free | Editorial curation — needs a compelling story. |\\n| **Fazier** | ~30 | Yes | Free | Daily ranking with much lower competition than PH. Achievable #1. |\\n| **Uneed** | ~40 | Yes | Free | Curated, smaller audience, quality backlink. |\\n| **Microlaunch** | ~30 | Yes | Free | Month-long visibility vs one-day spike. |\\n| **OpenHunts** | ~25 | Yes | Free | Indie-maker friendly, reports 14%+ conversion rates. |\\n| **DevHunt** | ~35 | Yes | Free | Dev-focused. Best fit for developer tools and technical products. |\\n| **PeerPush** | ~25 | Yes | Free | Similar to Fazier. Low competition. |\\n| **LaunchVault** | ~20 | Yes | Free | Anti-VC positioning. Good for bootstrapped narrative. |\\n| **What Launched Today** | ~20 | Yes | Free | Guaranteed visibility on launch day regardless of votes. |\\n| **Firsto** | ~25 | Yes | Free tier | Sustained discovery, not one-day spike. |\\n| **GetByte** | ~20 | Yes | Free | Lightweight listing + promotional support. |\\n| **Best of Web** | ~30 | Yes | Free | Easy fast submission, free dofollow. |\\n| **Tiny Launch** | ~20 | Yes | Free | Lightweight, fast approval. |\\n| **PitchWall** | ~25 | Yes | Free | Indie-hacker friendly. |\\n\\n---\\n\\n## Tier 2 — Startup / SaaS / Software Directories\\n\\nSubmit during launch week and continue rolling submissions thereafter.\\n\\n| Directory | DR | Dofollow | Cost | Notes |\\n|---|---|---|---|---|\\n| **AlternativeTo** | 79 | Nofollow | Free | Massive SEO value despite nofollow. Submit as alternative to your top 4 competitors. |\\n| **SaaSHub** | 77 | Yes | Free | Ranks well for \\\"[tool] alternatives\\\" queries. High intent. |\\n| **G2** | 92 | Yes | Free listing | 10 reviews required for Grid appearance. Paid badges start at $2,999/yr. |\\n| **Capterra** | 93 | Yes | Free listing | Owned by G2 (acquired Feb 2026). Reviews drive everything. |\\n| **GetApp** | 78 | Yes | Free | Auto-syncs from Capterra in some cases. Owned by G2. |\\n| **SourceForge** | 92 | Yes | Free | Legacy but still high DR. Trivial to list. |\\n| **Slashdot** | ~88 | Yes | Free | Legacy but high DR. Company profile submission. |\\n| **Startup Stash** | ~50 | Yes | Free | Curated, organized by startup need. |\\n| **SideProjectors** | ~35 | Yes | Free | Discovery + marketplace. Community-driven. |\\n| **F6S** | 65 | Yes | Free | Startup platform used by accelerators. |\\n| **Stackshare** | ~60 | Yes | Free | Dev-centric. Show your tech stack. |\\n| **Resource.fyi** | ~40 | Yes | Free | Curated for designers/devs/marketers. |\\n| **Shipybara** | ~30 | Yes | Free | Shows which companies use your tool. |\\n| **TrustRadius** | 72 | Yes | Free | Smaller but respected B2B review platform. |\\n| **Crozdesk** | ~55 | Yes | Free | Feeds into Gartner ecosystem. |\\n| **Software Advice** | 88 | Yes | Free | Gartner property. Auto-syncs with Capterra in some categories. |\\n| **TheSaaSDirectory** | 88 | Yes | Free | SaaS-specific directory. Good categorization. |\\n| **Tech.co** | 80 | Yes | Free | Startup/SaaS directory + media. |\\n| **Taalk** | 80 | Yes | Free | Startup directory. |\\n| **Startup Fame** | 77 | Yes | Free | Startup showcase directory. |\\n| **Indie Hackers** | 76 | Yes | Free | Build-in-public community + product directory. |\\n| **Slant** | 75 | Yes | Free | \\\"What is the best...\\\" recommendation platform. |\\n| **Gust** | 75 | Yes | Free | Startup/investor platform. Profile with links. |\\n| **Inc42** | 75 | Yes | Free | Indian startup media + directory. |\\n| **Wefunder** | 76 | Yes | Free | Equity crowdfunding. Product profile with links. |\\n| **Startups.com** | 68 | Yes | Free | Startup community + resources. |\\n| **IndieHustles** | 66 | Yes | Free | Indie SaaS directory. |\\n| **SaaSWorthy** | 65 | Yes | Free | SaaS review/comparison site. |\\n| **ToolsFine** | 65 | Yes | Free | SaaS tool directory. |\\n| **Bizcommunity** | 65 | Yes | Free | Business news + directory. |\\n| **StartUs** | 62 | Yes | Free | Startup directory + insights. |\\n| **Today Launches** | 60 | Yes | Free | Daily launch directory. |\\n| **StartupBuffer** | 57 | Yes | Free | Startup promotion platform. |\\n| **Feedough** | 55 | Yes | Free | Startup resources + directory. |\\n| **Indie Hacker Tools** | 55 | Yes | Free | Tools for indie hackers. |\\n| **Open Launch** | 55 | Yes | Free | Product launch directory. |\\n| **New SaaSly** | 52 | Yes | Free | New SaaS product directory. |\\n| **Business Software** | 49 | Yes | Free | Business software directory. |\\n| **Promote Project** | 47 | Yes | Free | Project promotion directory. |\\n| **FiveTaco** | 47 | Yes | Free | SaaS tool directory. |\\n| **Cuspera** | 45 | Yes | Free | SaaS comparison platform. |\\n| **BetaBound** | 45 | Yes | Free | Beta testing community + directory. |\\n| **Makerthrive** | 45 | Yes | Free | Maker community + tools. |\\n| **StartupTracker** | 44 | Yes | Free | Startup tracking directory. |\\n| **BusinessHunt** | 43 | Yes | Free | Business product directory. |\\n| **Launched.io** | 40 | Yes | Free | Launch directory. |\\n| **ProfitHunt** | 40 | Yes | Free | Profitable startup directory. |\\n| **10words** | 40 | Yes | Free | SaaS directory (10-word descriptions). |\\n| **TrustMRR** | 40 | Yes | Free | MRR-verified startup directory. |\\n| **OpenClawDir** | 35 | Yes | Free | Open directory. |\\n| **Build Voyage** | 33 | Yes | Free | Startup builder directory. |\\n| **AlphaDigits** | 32 | Yes | Free | SaaS directory. |\\n\\n---\\n\\n## Tier 3 — AI Tool Directories\\n\\nRelevant only for AI-native products. Submit during weeks 1–3.\\n\\n### Tier 3A — Flagship AI directories\\n\\n| Directory | DR | Monthly Traffic | Notes |\\n|---|---|---|---|\\n| **There's An AI For That (TAAFT)** | 76 | 2M+ | Largest AI directory. Task-based search. Worth the effort to list well. |\\n| **Futurepedia** | 70 | 1M+ | 5,000+ tools, 54 categories. Matt Wolfe YouTube (2M+ subs) drives traffic. |\\n| **Toolify.ai** | 71 | 500K+ | 26K+ tools, 450+ categories. Tracks traffic trends. |\\n| **Future Tools (futuretools.io)** | 69 | 400K+ | Curated by Matt Wolfe. Smaller but influential. |\\n| **AI Tools Neilpatel** | 91 | n/a | Highest DR free AI directory. |\\n| **Good AI Tools** | 66 | n/a | Curated, quality over quantity. |\\n| **NewTools.site** | 51 | n/a | Dofollow backlink for every approved submission. |\\n\\n### Tier 3B — Mid-tier AI directories\\n\\n| Directory | Est. DR | Notes |\\n|---|---|---|\\n| **aitools.inc** | ~66 | \\\"10x your output\\\" positioning. |\\n| **AIStage** | ~66 | Includes open source + news. |\\n| **AItrendytools** | ~69 | Comprehensive listing. |\\n| **Grabon AI Directory** | ~70 | High DR, broad audience. |\\n| **TopAI.tools** | ~60 | Task-based search similar to TAAFT. |\\n| **Supertools** | ~61 | Clean interface, good categorization. |\\n| **AI Tools Directory** (aitoolsdirectory.com) | ~55 | Curated; featured placement available. |\\n| **AI Tools Love** | ~25 | Comparison-focused. |\\n| **AIChief** | ~35 | Business-focused. |\\n| **LogicBalls** | ~40 | 3,500+ verified tools. |\\n| **SaasAITools** | ~30 | SaaS + AI crossover. |\\n| **PoweredByAI** | ~35 | Growing directory with newsletter reach. |\\n| **TheAISurf** | ~30 | Newer, actively promoting submissions. |\\n| **Aixyz** | ~30 | 1,500+ tools, smart filters. |\\n| **AI Pedia Hub** | ~40 | \\\"Largest directory, updated daily.\\\" |\\n| **Dofollow.Tools** | ~30 | Explicitly free dofollow backlinks. |\\n| **AIBacklinkList** | ~25 | Aggregated list of 2500+ AI backlink opportunities. |\\n| **AI Scout** | ~25 | Emerging, less competition. |\\n| **AiMatchPro** | ~20 | Use-case search. |\\n| **GPTForge** | ~30 | Domain created 2025 — DR 88 from source list is implausible. Verify via Ahrefs. |\\n| **AI Tools Guide** | 77 | Curated AI tools directory. |\\n| **AIToolly** | 69 | AI tool discovery. |\\n| **All The AI Tools** | 66 | Comprehensive AI tool listing. |\\n| **Aiforme.wiki** | 66 | AI tool wiki/directory. |\\n| **Noxilo** | 66 | AI tools directory. |\\n| **AI Generation** | 55 | AI tools directory. |\\n| **Every AI** | 55 | AI tool aggregator. |\\n| **BAI.tools** | 53 | AI tools directory. |\\n| **The Rundown Tools** | 40 | AI newsletter's tool directory. |\\n| **AI NavHub** | 38 | AI navigation directory. |\\n| **WhatTheAI** | 35 | AI tools directory. |\\n| **ToolAI** | 31 | AI tools directory. |\\n| **LLM Relevance** | 30 | LLM-focused directory. |\\n\\n---\\n\\n## Tier 4 — AI Agent & MCP Server Registries\\n\\nRelevant only if the product exposes agent capabilities or MCP servers. These are a real moat for AI-native tools — traditional SaaS products cannot list here.\\n\\n| Directory | Category | Notes |\\n|---|---|---|\\n| **AI Agents List (aiagentslist.com)** | Agents | Hosts the 593+ MCP server directory. |\\n| **Glama.ai MCP servers** | MCP | 20K+ security-graded MCP servers. A/B/C/F grades matter — optimize for a good grade. |\\n| **APITracker MCP directory** | MCP | 110+ servers, 90 official integrations. |\\n| **Linux Foundation MCP Registry** | MCP | Canonical registry (PR-based submission, low volume but high signal). Anthropic donated MCP to LF in Dec 2025. |\\n| **AI Agent Store** | Agents | Compare agents, platforms, frameworks. |\\n| **AI Agents Base** | Agents | All-in-one directory. |\\n| **AI Agents Directory** | Agents | Specialized, updated daily. |\\n| **AI Agents Verse** | Agents | Curated directory. |\\n| **AgentHunter** | Agents | \\\"Discover the best AI agents.\\\" |\\n| **Add AI Directory** | Agents | Catalogs agents + tools. |\\n| **AI Agents Live** | Agents | Discovery + sharing. |\\n| **AI Agents Marketplace** | Agents | Organized by 300+ human role equivalents. |\\n\\n---\\n\\n## Tier 5 — No-Code Directories\\n\\nRelevant for no-code platforms and builder tools.\\n\\n| Directory | Est. DR | Notes |\\n|---|---|---|\\n| **NoCodeFinder** | ~45 | Accepts submissions. |\\n| **No Code MBA Tools Directory** | ~55 | Categorized by project type. |\\n| **We Are No Code Tools Repository** | ~40 | Curated. |\\n| **NoCodeList** | ~30 | — |\\n| **NoCodeDevs** | ~25 | — |\\n| **NoCode.Tech** | ~35 | — |\\n| **MakerPad / Zapier** | ~62 | Now owned by Zapier. No-code tool directory. |\\n| **NoCodeFounders** | ~45 | No-code community + forum. |\\n\\n---\\n\\n## Tier 6 — \\\"Best of\\\" Listicles (Editorial Outreach)\\n\\nNot directories per se — these are blog posts on high-DR domains that you get included in via cold outreach. Often more valuable than directories because they combine a dofollow backlink with editorial trust + in-market buyer traffic + AI citation weight.\\n\\n**Search patterns to find opportunities:**\\n- `\\\"best [category] tools\\\" 2026`\\n- `\\\"best [competitor] alternative\\\"`\\n- `\\\"top AI [category]\\\"`\\n- `\\\"[category] tools review\\\"`\\n\\n**Outreach template (short):**\\n> Hey [name], saw your post on [best X tools]. We launched [product] recently — thought it might be worth a mention. Happy to give you a free account + credits for readers. Here's a 60s demo: [link]. No worries if not a fit.\\n\\n**Target:** 10 inclusions in 30 days. Each = dofollow backlink from DR 40–70 + referral traffic + AI citation fuel.\\n\\n---\\n\\n## Tier 7 — Integration Marketplaces\\n\\nOnly relevant once the product has integrations. These are the highest-DR backlinks available — worth engineering effort just to land them.\\n\\n| Directory | DR | Notes |\\n|---|---|---|\\n| **Zapier App Directory** | 91 | Requires working Zapier integration. |\\n| **HubSpot App Marketplace** | 93 | Requires HubSpot app. |\\n| **Slack App Directory** | 89 | Requires Slack integration. |\\n| **Airtable Marketplace** | 82 | Requires Airtable integration. |\\n| **Notion Integrations Gallery** | 88 | Requires Notion integration. |\\n| **Make (Integromat)** | ~70 | Requires Make module. |\\n| **Pipedream** | ~70 | Requires Pipedream action. |\\n\\n---\\n\\n## Tier 8 — Profile & Content Platforms\\n\\nCreate a profile or publish content on these high-DR platforms to earn a dofollow backlink. These are not traditional directories — they're content and identity platforms where your profile or published content links back to your site. Highest DR backlinks available without building integrations.\\n\\n| Platform | DR | Category | Type | Notes |\\n|---|---|---|---|---|\\n| **WordPress.com** | 100 | Any | Blog | Create a free blog, link to main site in posts and profile. |\\n| **Blogger** | 100 | Any | Blog | Google property. Free blog with dofollow links. |\\n| **Tumblr** | 99 | Design | Blog | Highest DR blog platform. Project blog or microblog. |\\n| **GitHub** | 98 | Tech | Code host | Profile + repo README links. Every software product should have this. |\\n| **SoundCloud** | 96 | Music | Profile | Niche — relevant for audio/music products. |\\n| **Weebly** | 95 | Any | Blog | Free site builder with dofollow profile link. |\\n| **SlideShare** | 95 | Any | Content | Upload pitch decks, guides, presentations. |\\n| **Flickr** | 95 | Photography | Profile | Product screenshot galleries with profile link. |\\n| **GitLab** | 94 | Tech | Code host | Profile link. Mirror repos if open source. |\\n| **eBay Stores** | 94 | E-commerce | Profile | Niche — relevant for physical/digital goods. |\\n| **Etsy** | 93 | E-commerce | Profile | Niche — templates, digital downloads. |\\n| **Substack** | 93 | Tech | Newsletter | Publish product updates, thought leadership. High-intent readers. |\\n| **Bitbucket** | 93 | Tech | Code host | Profile link. Atlassian property. |\\n| **Scribd** | 93 | Any | Content | Upload whitepapers, guides, case studies. |\\n| **Disqus** | 93 | Professional | Profile | Profile with website link. Comment on industry blogs. |\\n| **Behance** | 93 | Design | Profile | Portfolio/project links. Best for design-adjacent products. |\\n| **Pastebin** | 93 | Tech | Code host | Code snippets with profile link. |\\n| **Patreon** | 93 | Creator | Profile | Creator page with product links. |\\n| **Imgur** | 93 | Any | Profile | Image hosting with profile link. |\\n| **Dun & Bradstreet** | 93 | B2B | Directory | Business credibility. Feeds AI training corpora. |\\n| **Ghost.org** | 92 | Any | Blog | Publish content with dofollow links. |\\n| **Evernote** | 92 | Any | Content | Public notebooks with links. |\\n| **Issuu** | 92 | Any | Content | Upload marketing PDFs, brochures, reports. |\\n| **CodePen** | 92 | Tech | Profile | Front-end demos and profile link. |\\n| **Kaggle** | 92 | AI | Profile | AI/data science community. Notebooks with links. |\\n| **Houzz** | 92 | Home | Profile | Niche — home/interior products. |\\n| **LiveJournal** | 91 | Any | Blog | Legacy but high DR. Blog with dofollow links. |\\n| **Bandcamp** | 91 | Music | Profile | Niche — audio products. |\\n| **Dev.to** | 90 | Tech | Blog | Technical articles with dofollow links. Cross-post with canonical URL. |\\n| **Gravatar** | 90 | Professional | Profile | Profile with website link. Quick setup. |\\n| **Replit** | 90 | Tech | Code host | Profile link. Interactive demos. |\\n| **CodeProject** | 90 | Tech | Blog | Technical articles for dev audience. |\\n| **Jimdo** | 89 | Any | Blog | Free site builder with profile link. |\\n| **Calameo** | 89 | Any | Content | Digital publishing platform. Upload PDFs. |\\n| **Buy Me a Coffee** | 88 | Creator | Profile | Creator page with product links. |\\n| **ArtStation** | 88 | Design | Profile | Portfolio for creative/design products. |\\n| **500px** | 88 | Photography | Profile | Product imagery with profile link. |\\n| **IndiaMART** | 87 | B2B | Profile | Indian B2B marketplace. Niche but high DR. |\\n| **Strikingly** | 87 | Any | Blog | Free one-page site with backlink. |\\n| **Hashnode** | 85 | Tech | Blog | Dev blogging. Custom domain support. Dofollow links. |\\n| **About.me** | 85 | Professional | Profile | One-page profile. Quick dofollow backlink. |\\n| **Mixcloud** | 85 | Music | Profile | Niche — audio/podcast products. |\\n| **4Shared** | 85 | Any | Content | File sharing with profile link. |\\n| **HubPages** | 84 | Any | Blog | Article publishing platform. |\\n| **AppSumo** | 84 | E-commerce | Marketplace | SaaS deals marketplace. Great for launch visibility + backlink. |\\n| **TeachersPayTeachers** | 84 | Education | Profile | Niche — education products. |\\n| **AuthorStream** | 70 | Any | Content | Presentation sharing. |\\n| **Model Mayhem** | 72 | Design | Profile | Niche — creative industry. |\\n| **Penzu** | 60 | Any | Blog | Online journal with profile link. |\\n| **Crevado** | 50 | Design | Profile | Portfolio platform. |\\n| **MyFolio** | 55 | Design | Profile | Portfolio platform. |\\n\\n---\\n\\n## Tier 9 — Local Business & General Directories\\n\\nRelevant for products with a physical presence, local customer base, or business address. Also useful for any product wanting pure DR-building backlinks from established directories.\\n\\n| Directory | DR | Category | Notes |\\n|---|---|---|---|\\n| **Manta** | 76 | Local business | US business directory. Free listing. |\\n| **ActiveSearchResults** | 74 | General | Search engine directory. |\\n| **Hotfrog** | 72 | Local business | International business directory. |\\n| **Spoke** | 70 | B2B | Business profile directory. |\\n| **Locanto** | 70 | General | Classifieds + business listings. International. |\\n| **MerchantCircle** | 68 | Local business | US small business directory. |\\n| **Just Landed** | 65 | Local business | International directory. |\\n| **Showmelocal** | 64 | Local business | US local search directory. |\\n| **Cylex** | 64 | Local business | International business directory. |\\n| **Brownbook** | 63 | Local business | Global business directory. |\\n| **Tupalo** | 62 | Local business | European business directory. |\\n| **WebWiki** | 60 | General | Website directory with reviews. |\\n| **iBegin** | 60 | Local business | US business directory. |\\n| **CitySquares** | 55 | Local business | US local business directory. |\\n| **eLocal** | 55 | Local business | US service provider directory. |\\n| **2FindLocal** | 53 | Local business | US local directory. |\\n| **Chamber of Commerce** | 50 | Local business | Business directory + resources. |\\n| **FindUsLocal** | 50 | Local business | Local search directory. |\\n| **ezlocal** | 50 | Local business | US local business listings. |\\n| **Yellow Pages Goes Green** | 49 | Local business | Eco-friendly business directory. |\\n| **Where To?** | 46 | Local business | Local discovery directory. |\\n\\n---\\n\\n## Tier 10 — Forums & Communities\\n\\nCreate a profile and participate in relevant communities. Most give dofollow profile links. Value comes from both the backlink and referral traffic from genuine participation. Follow the 90/10 rule: 90% helpful, 10% promotional.\\n\\n| Forum | DR | Category | Notes |\\n|---|---|---|---|\\n| **Strava Clubs** | 90 | Fitness | Niche — fitness/health products only. |\\n| **Foursquare** | 90 | Hospitality | Business listing with dofollow link. |\\n| **SitePoint Forums** | 89 | Tech | Web dev community. Genuine participation required. |\\n| **Mumsnet Forums** | 85 | Family | Niche — family/parenting products. Large UK audience. |\\n| **Digital Point** | 82 | Marketing | SEO/marketing forum. |\\n| **WebmasterWorld** | 77 | Marketing | SEO/webmaster community. High editorial standards. |\\n| **BlackHatWorld** | 77 | Marketing | SEO/marketing forum. Despite the name, has legitimate discussions. |\\n| **GrowthHackers** | 76 | Marketing | Growth marketing community. Dofollow articles + profile. |\\n| **Warrior Forum** | 73 | Marketing | Internet marketing community. |\\n| **Apsense** | 72 | Marketing | Business networking + marketing forum. |\\n| **ActiveRain** | 70 | Real estate | Niche — real estate industry. |\\n| **Quibblo** | 55 | General | Quiz/poll community with profile links. |\\n\\n---\\n\\n## Tier 11 — Press Release, Article & Blog Directory Sites\\n\\nPublish articles or press releases to earn dofollow backlinks. Best for product launches, funding announcements, major feature releases. Some accept any topic, others are PR-specific.\\n\\n### Article & Blog Directories\\n\\n| Site | DR | Type | Notes |\\n|---|---|---|---|\\n| **EzineArticles** | 80 | Article | Established article directory. Editorial review. |\\n| **Feedspot** | 80 | Blog directory | Blog discovery + RSS aggregation. Submit your blog. |\\n| **Alltop** | 73 | Blog directory | Guy Kawasaki's blog aggregator. |\\n| **ArticlesBase** | 70 | Article | Article publishing platform. |\\n| **Blogarama** | 64 | Blog directory | Blog directory with categories. |\\n| **Sooper Articles** | 60 | Article | Article submission site. |\\n| **OnToplist** | 60 | Blog directory | Blog ranking directory. |\\n| **BlogEngage** | 55 | Blog directory | Blog promotion community. |\\n| **BizSugar** | 55 | Business | Small business content sharing. |\\n| **TechPluto** | 50 | Marketing | Tech/marketing blog directory. |\\n\\n### Press Release Distribution\\n\\n| Site | DR | Notes |\\n|---|---|---|\\n| **PRLog** | 80 | Free press release distribution. Good reach. |\\n| **PR.com** | 77 | Free + paid press releases. Business directory too. |\\n| **OpenPR** | 72 | Free international press release distribution. |\\n| **1888 Press Release** | 69 | Free press release site. |\\n| **NewswireToday** | 65 | Free press release distribution. |\\n| **Online PR News** | 62 | Free press release distribution. |\\n| **PR Free** | 62 | Free press release site. |\\n\\n### Marketing & General Directories\\n\\n| Site | DR | Notes |\\n|---|---|---|\\n| **SubmissionWebDirectory** | 61 | General web directory. |\\n| **Site Promotion Directory** | 46 | Marketing-focused directory. |\\n| **Semfirms** | 45 | Marketing services directory. |\\n| **CabinetM** | 45 | Marketing technology directory. |\\n| **Cold Email Kit** | 44 | Email marketing directory. |\\n| **Directory LDM Studio** | 40 | General directory. |\\n| **Quality Internet Directory** | 39 | General web directory. |\\n| **ProofStories** | 32 | Marketing stories/case studies. |\\n\\n---\\n\\n## Tier 12 — Social Bookmarking & Curation\\n\\nBookmark or curate content with dofollow links. Lower effort than publishing full articles. Most useful for building diverse backlink profile.\\n\\n| Platform | DR | Notes |\\n|---|---|---|\\n| **Scoop.it** | 91 | Content curation platform. Create topic pages with links. |\\n| **Diigo** | 85 | Social bookmarking + annotation. Profile + bookmark links. |\\n| **Pearltrees** | 84 | Visual content curation. Organize links into collections. |\\n| **BibSonomy** | 70 | Academic bookmarking. Best for research/data products. |\\n| **Folkd** | 64 | Social bookmarking. Tag and share links. |\\n\\n---\\n\\n## Tier 13 — Niche Vertical Directories\\n\\nIndustry-specific directories. Only submit if your product genuinely fits the vertical — forced listings get rejected and waste time.\\n\\n### Legal\\n\\n| Directory | DR | Notes |\\n|---|---|---|\\n| **Justia** | 85 | Legal services directory. |\\n| **Lawyers.com** | 82 | Legal directory. |\\n| **HG.org** | 75 | Legal resources directory. |\\n\\n### Home & Construction\\n\\n| Directory | DR | Notes |\\n|---|---|---|\\n| **Porch** | 80 | Home services marketplace. |\\n| **BuildZoom** | 73 | Construction/contractor directory. |\\n| **Tradify (FreeIndex)** | 55 | UK trades directory. |\\n| **iBuildNew** | 45 | Australian home building directory. |\\n\\n### Hospitality & Food\\n\\n| Directory | DR | Notes |\\n|---|---|---|\\n| **AllMenus** | 76 | Restaurant directory. |\\n\\n### Design & Creative\\n\\n| Directory | DR | Notes |\\n|---|---|---|\\n| **LandBook** | 72 | Web design inspiration gallery. Submit landing pages. |\\n| **Curated.design** | 52 | Design inspiration directory. |\\n| **Webdesign Inspiration** | 45 | Website design showcase. |\\n\\n### Health & Fitness\\n\\n| Directory | DR | Notes |\\n|---|---|---|\\n| **Wellness.com** | 60 | Health & wellness directory. |\\n| **YogaTrail** | 55 | Yoga/wellness directory. |\\n| **MassageTherapy (AMBP)** | 45 | Massage therapy directory. |\\n| **Athlinks** | 72 | Fitness/race results. Profile with links. |\\n| **Fit Pro Directory** | 40 | Fitness professional directory. |\\n\\n### Real Estate\\n\\n| Directory | DR | Notes |\\n|---|---|---|\\n| **Placester** | 60 | Real estate marketing directory. |\\n\\n### B2B & International\\n\\n| Directory | DR | Notes |\\n|---|---|---|\\n| **Sulekha** | 73 | Indian business directory. |\\n| **EU-Business** | 46 | European business directory. |\\n\\n### Events\\n\\n| Directory | DR | Notes |\\n|---|---|---|\\n| **Evensi Events** | 62 | Event discovery platform. |\\n\\n### Education\\n\\n| Directory | DR | Notes |\\n|---|---|---|\\n| *(TeachersPayTeachers listed in Tier 8 — Profile Platforms)* | | |\\n\\n---\\n\\n## Verification\\n\\nAfter any submission goes live, verify the backlink exists and is dofollow. You can:\\n\\n1. **Manual:** Open the listing, right-click your product link, \\\"Inspect\\\" → check for `rel=\\\"nofollow\\\"` or `rel=\\\"ugc\\\"`. If absent, the link is dofollow.\\n2. **curl:** `curl -sIL https://directory.com/your-listing | grep -i link`\\n3. **SEO tools:** Ahrefs Site Explorer → Backlinks → filter by this directory's domain.\\n\\n**Re-verify quarterly.** Directories sometimes change all outbound links to nofollow without warning — if DR stops moving, check whether your biggest inbound links have silently flipped.\\n\"},\n {\"skill\":\"directory-submissions\",\"ref\":\"positioning-variations\",\"body\":\"# Positioning Variations Library\\n\\nDirectory audiences respond to different framings. Never copy-paste the same description everywhere — AI engines penalize duplicate content, and each directory type rewards a different opener.\\n\\nUse this library to generate per-tier variants. Swap `[product]`, `[category]`, `[competitors]`, `[use-case]`, and `[audience]` with the real values.\\n\\n---\\n\\n## Framework: Lead Sentence Varies by Tier\\n\\n| Tier | Lead sentence pattern | Why |\\n|---|---|---|\\n| Startup / launch | \\\"[Product] is the easiest way to [outcome] for [audience].\\\" | Founders scan for outcome clarity. |\\n| SaaS directory | \\\"[Product] is the [differentiator] alternative to [competitors].\\\" | Catches \\\"[competitor] alternative\\\" search intent. |\\n| AI directory | \\\"[Product] uses [AI capability] to [outcome].\\\" | TAAFT/Futurepedia audiences explicitly want AI. |\\n| Agent / MCP | \\\"[Product] is an MCP-native / agent-native [category].\\\" | Niche but high-intent. Ruling-out competitors. |\\n| No-code | \\\"[Product] lets you build [output] without code.\\\" | Audience values speed, not technical depth. |\\n| Dev tool | \\\"[Product] is a [technical category] with [differentiator].\\\" | Devs want substance upfront. |\\n| B2B review | \\\"[Product] helps [audience] [measurable business outcome].\\\" | Reviewers want ROI language. |\\n\\n---\\n\\n## Template: Startup / Launch Directories\\n\\n**Target:** Product Hunt, BetaList, Fazier, Uneed, DevHunt, Microlaunch, OpenHunts, LaunchVault, Firsto, PitchWall\\n\\n**Tagline (under 10 words):**\\n> The [differentiator] way to [outcome] for [audience].\\n\\n**Short description (60 chars):**\\n> [Outcome-focused one-liner with product name]\\n\\n**Long description (150 words):**\\n> [Product] is the easiest way to [outcome] for [audience]. Built for teams who [pain point], [product] removes [friction] by [how].\\n>\\n> Unlike [competitor category], [product] [key differentiator 1] and [key differentiator 2]. You can [action 1] in under [timeframe], [action 2] without [limitation], and [action 3] that would normally require [cost or technical skill].\\n>\\n> We built [product] because [founder origin story in one sentence]. It's now used by [audience examples] to [use case examples].\\n>\\n> Try it free at [url]. No credit card, no setup.\\n\\n**Tags:** [product category], [audience type], [use case 1], [use case 2], [differentiator], [tech]\\n\\n---\\n\\n## Template: SaaS / Software Directories\\n\\n**Target:** AlternativeTo, SaaSHub, G2, Capterra, GetApp, SourceForge, Slashdot, Startup Stash, F6S\\n\\n**Tagline:**\\n> The [differentiator] alternative to [top competitors].\\n\\n**Long description:**\\n> [Product] is a [differentiator] alternative to [competitor 1], [competitor 2], and [competitor 3] — built for [audience] who need [gap the competitors don't fill].\\n>\\n> Where [competitor 1] [limitation 1] and [competitor 2] [limitation 2], [product] [solves]. You get [feature 1], [feature 2], and [feature 3] in a single workspace, at [pricing relative to competitors].\\n>\\n> Key features:\\n> • [Feature 1] — [benefit]\\n> • [Feature 2] — [benefit]\\n> • [Feature 3] — [benefit]\\n> • [Feature 4] — [benefit]\\n> • [Integration 1], [Integration 2], [Integration 3] integrations\\n>\\n> Trusted by [audience examples]. Start free at [url].\\n\\n**Tags:** [competitor] alternative, [category], [audience], [differentiator], [top 3 features]\\n\\n---\\n\\n## Template: AI Directories\\n\\n**Target:** TAAFT, Futurepedia, Toolify, Future Tools, aitools.inc, AIStage, LogicBalls, SaasAITools\\n\\n**Tagline:**\\n> AI-powered [category] for [audience].\\n\\n**Long description:**\\n> [Product] is an AI-powered [category] that [core AI capability]. It uses [specific models / techniques] to [outcome] — so [audience] can [job to be done] in a fraction of the time.\\n>\\n> What makes it AI-first:\\n> • [AI feature 1] — [what it does] using [model/approach]\\n> • [AI feature 2] — [what it does]\\n> • [AI feature 3] — [what it does]\\n> • [AI feature 4] — [what it does]\\n>\\n> [Product] is built on [tech stack] and supports [models/providers]. Use cases: [use case 1], [use case 2], [use case 3], [use case 4].\\n>\\n> Free tier available. No API keys required to start.\\n\\n**Tags:** AI [category], [AI capability 1], [AI capability 2], AI for [audience], [use case 1], [use case 2], [LLM provider], [differentiator]\\n\\n---\\n\\n## Template: Agent / MCP Registries\\n\\n**Target:** Glama, APITracker, Linux Foundation MCP Registry, AI Agents List, AI Agent Store, AgentHunter\\n\\n**Tagline:**\\n> MCP-native [category] for AI agents.\\n\\n**Long description:**\\n> [Product] is an MCP-native [category] that lets AI agents [capability]. It exposes [MCP server capabilities] via the Model Context Protocol, so agents in Claude, ChatGPT, Cursor, and any MCP-compatible client can [actions].\\n>\\n> MCP capabilities:\\n> • [Tool 1] — [what the agent can do]\\n> • [Tool 2] — [what the agent can do]\\n> • [Tool 3] — [what the agent can do]\\n> • [Resource 1] — [context surfaced]\\n> • [Prompt 1] — [pre-built prompt]\\n>\\n> Authentication: [auth method]. Transports: stdio, HTTP, SSE. Security: [security posture].\\n>\\n> Installation: [one-line install command]. Docs: [docs URL].\\n\\n**Tags:** MCP, MCP server, AI agent, agent [category], Claude integration, Model Context Protocol, [domain], [auth type]\\n\\n---\\n\\n## Template: No-Code Directories\\n\\n**Target:** NoCodeFinder, No Code MBA Tools Directory, We Are No Code, NoCode.Tech\\n\\n**Tagline:**\\n> Build [output] without code.\\n\\n**Long description:**\\n> [Product] lets you build [output] without writing code. Drag, drop, or describe what you want and [product] handles the rest — [technical concept 1] and [technical concept 2] are automatic.\\n>\\n> What you can build:\\n> • [Example project 1] — built in [timeframe]\\n> • [Example project 2] — built in [timeframe]\\n> • [Example project 3] — built in [timeframe]\\n>\\n> No-code friendly features:\\n> • [Visual feature 1]\\n> • [Visual feature 2]\\n> • [AI-assisted feature]\\n> • [Pre-built templates]\\n>\\n> Start free. No credit card. Templates included.\\n\\n**Tags:** no code, no-code [category], visual [tool], drag and drop, [output type], [audience type]\\n\\n---\\n\\n## Template: Dev / Technical Directories\\n\\n**Target:** DevHunt, Stackshare, GitHub, Dev.to, Hacker News Show HN\\n\\n**Tagline:**\\n> [Technical category] with [technical differentiator].\\n\\n**Long description:**\\n> [Product] is a [technical category] built on [tech stack]. It solves [technical problem] by [technical approach].\\n>\\n> Architecture:\\n> • [Component 1] — [tech used]\\n> • [Component 2] — [tech used]\\n> • [Component 3] — [tech used]\\n>\\n> Why it's different: [technical insight or novel approach]. We chose [trade-off] because [reason].\\n>\\n> Open source: [yes/no/partial]. Self-hostable: [yes/no]. License: [license].\\n>\\n> API: [REST / GraphQL / MCP / gRPC]. SDKs: [languages]. Docs: [url].\\n\\n**Tags:** [language], [framework], [category], open source, API, [tech stack component], [architecture approach]\\n\\n---\\n\\n## Template: B2B Review Platforms\\n\\n**Target:** G2, Capterra, TrustRadius, GetApp, Gartner Digital Markets, Crozdesk\\n\\n**Tagline:**\\n> [Business outcome] for [audience].\\n\\n**Long description:**\\n> [Product] helps [audience] [achieve measurable business outcome]. Teams use it to [use case 1], [use case 2], and [use case 3] — reducing [metric] by [percentage] and increasing [metric] by [percentage].\\n>\\n> Key benefits:\\n> • [Business benefit 1] with [how measured]\\n> • [Business benefit 2] with [how measured]\\n> • [Business benefit 3] with [how measured]\\n>\\n> Integrations: [enterprise integrations — HubSpot, Salesforce, Slack, etc.]\\n>\\n> Security: [SOC 2 / GDPR / compliance posture]. Support: [support tier]. Pricing: [pricing range].\\n>\\n> Trusted by [customer logos / company size]. Case studies at [url].\\n\\n**Tags:** [business use case], [vertical], [audience role], [compliance], enterprise [category], [integration 1]\\n\\n---\\n\\n## Category Tag Library\\n\\nPull 5–8 tags per submission from the relevant sections. Never repeat the exact same tag set across two directories in the same tier.\\n\\n### Universal\\n[category], [audience], [differentiator], [use case], AI, no-code, SaaS, [tech stack]\\n\\n### Industry\\nB2B, B2C, DTC, ecommerce, fintech, edtech, healthtech, martech, devtools, productivity, creator tools, agency tools\\n\\n### Job-to-be-done\\nlead generation, lead qualification, customer onboarding, product recommendation, sales enablement, marketing automation, survey, assessment, calculator, quiz, intake form\\n\\n### AI-specific\\nAI agent, LLM, generative AI, conversational AI, RAG, MCP, agent framework, AI form, AI quiz, AI assistant, AI automation\\n\\n### Technical\\nopen source, self-hosted, API-first, webhook, Zapier, no-code, low-code, embeddable, white-label, multi-tenant, SSO, SAML\\n\\n---\\n\\n## Do / Don't Quick Reference\\n\\n**DO:**\\n- Vary the opening sentence across tiers\\n- Use real numbers and specific differentiators\\n- Match tone to audience (technical for devs, business for G2, excited for PH)\\n- Include a founder/origin angle in startup directories\\n- Lead with the AI-first angle in AI directories\\n\\n**DON'T:**\\n- Copy-paste the same 150-word description everywhere\\n- Use vague claims (\\\"blazing fast\\\", \\\"game-changing\\\")\\n- Mention every feature — pick 3–5 per tier and rotate them\\n- Lie about competitor features (AI engines cross-reference and de-rank)\\n- Skip the tag list — it's how moderators route you to the right category\\n\"},\n {\"skill\":\"emails\",\"ref\":\"copy-guidelines\",\"body\":\"# Email Copy Guidelines\\n\\n## Contents\\n- Structure\\n- Formatting\\n- Tone\\n- Length\\n- CTA Buttons vs. Links\\n- Personalization (merge fields, dynamic content, triggered emails)\\n- Segmentation Strategies (by behavior, by stage, by profile)\\n- Testing and Optimization (what to test, how to test, metrics to track)\\n\\n## Structure\\n\\n1. **Hook**: First line grabs attention\\n2. **Context**: Why this matters to them\\n3. **Value**: The useful content\\n4. **CTA**: What to do next\\n5. **Sign-off**: Human, warm close\\n\\n## Formatting\\n\\n- Short paragraphs (1-3 sentences)\\n- White space between sections\\n- Bullet points for scanability\\n- Bold for emphasis (sparingly)\\n- Mobile-first (most read on phone)\\n\\n## Tone\\n\\n- Conversational, not formal\\n- First-person (I/we) and second-person (you)\\n- Active voice\\n- Match your brand but lean friendly\\n- Read it out loud—does it sound human?\\n\\n## Length\\n\\n- Shorter is usually better\\n- 50-125 words for transactional\\n- 150-300 words for educational\\n- 300-500 words for story-driven\\n- If it's long, it better be good\\n\\n## CTA Buttons vs. Links\\n\\n- Buttons: Primary actions, high-visibility\\n- Links: Secondary actions, in-text\\n- One clear primary CTA per email\\n- Button text: Action + outcome\\n\\n---\\n\\n## Personalization\\n\\n### Merge Fields\\n- First name (fallback to \\\"there\\\" or \\\"friend\\\")\\n- Company name (B2B)\\n- Relevant data (usage, plan, etc.)\\n\\n### Dynamic Content\\n- Based on segment\\n- Based on behavior\\n- Based on stage\\n\\n### Triggered Emails\\n- Action-based sends\\n- More relevant than time-based\\n- Examples: Feature used, milestone hit, inactivity\\n\\n---\\n\\n## Segmentation Strategies\\n\\n### By Behavior\\n- Openers vs. non-openers\\n- Clickers vs. non-clickers\\n- Active vs. inactive\\n\\n### By Stage\\n- Trial vs. paid\\n- New vs. long-term\\n- Engaged vs. at-risk\\n\\n### By Profile\\n- Industry/role (B2B)\\n- Use case / goal\\n- Company size\\n\\n---\\n\\n## Testing and Optimization\\n\\n### What to Test\\n- Subject lines (highest impact)\\n- Send times\\n- Email length\\n- CTA placement and copy\\n- Personalization level\\n- Sequence timing\\n\\n### How to Test\\n- A/B test one variable at a time\\n- Sufficient sample size\\n- Statistical significance\\n- Document learnings\\n\\n### Metrics to Track\\n- Open rate (benchmark: 20-40%)\\n- Click rate (benchmark: 2-5%)\\n- Unsubscribe rate (keep under 0.5%)\\n- Conversion rate (specific to sequence goal)\\n- Revenue per email (if applicable)\\n\"}\n];\n",[],[478,801,819],"fc10e91e-5d6d-11f1-981a-1607ee4eb77e","ref_5.ts","fc10ea22-5d6d-11f1-981a-1607ee4eb77e",664,["D",1780286238686],"// GENERATED by deploy/gen_skills_catalog.mjs — do not edit by hand.\nimport type { SkillRef } from \"../index.ts\";\nexport const REFS_PART_5: SkillRef[] = [\n {\"skill\":\"content-strategy\",\"ref\":\"headless-cms\",\"body\":\"# Headless CMS Guide\\n\\nReference for choosing, modeling, and implementing a headless CMS for marketing content.\\n\\n## When to Use This Reference\\n\\nUse this when selecting a CMS for a new project, designing content models for marketing sites, setting up editorial workflows, or connecting CMS content to programmatic pages.\\n\\n---\\n\\n## Headless vs Traditional CMS\\n\\nA headless CMS separates content management from presentation. Content is stored in a structured backend and delivered via API to any frontend.\\n\\n### When Headless Makes Sense\\n\\n- Multiple frontends consume the same content (web, mobile, email)\\n- Developers want full control over the frontend stack\\n- Content needs to be reused across channels\\n- You're building with a modern framework (Next.js, Remix, Astro)\\n- Marketing needs structured, reusable content blocks\\n\\n### When Traditional Works Better\\n\\n- Small team with no dedicated developers\\n- Simple blog or brochure site\\n- WYSIWYG editing is a hard requirement\\n- Budget is tight and WordPress/Webflow does the job\\n\\n### Decision Checklist\\n\\n| Factor | Headless | Traditional |\\n|--------|----------|-------------|\\n| Multi-channel delivery | Yes | Limited |\\n| Developer control | Full | Constrained |\\n| Non-technical editing | Requires setup | Built-in |\\n| Time to launch | Longer | Faster |\\n| Content reuse | Native | Manual |\\n| Hosting flexibility | Any frontend | Platform-dependent |\\n\\n---\\n\\n## Content Modeling for Marketing\\n\\n### Core Principles\\n\\n1. **Think in types, not pages.** A \\\"Landing Page\\\" is a content type with fields — not an HTML file. This lets you reuse components across pages.\\n2. **Separate content from presentation.** Store the headline text, not the styled headline. Presentation belongs in the frontend.\\n3. **Design for reuse.** If testimonials appear on 5 pages, create a Testimonial type and reference it — don't duplicate.\\n4. **Keep models flat.** Deeply nested structures are hard to query and maintain. Prefer references over nesting.\\n\\n### Common Marketing Content Types\\n\\n| Type | Key Fields | Notes |\\n|------|-----------|-------|\\n| **Landing Page** | title, slug, hero, sections[], seo | Modular sections for flexibility |\\n| **Blog Post** | title, slug, body, author, category, tags, publishedAt, seo | Rich text or Portable Text body |\\n| **Case Study** | title, customer, challenge, solution, results, metrics[], logo | Link to related products/features |\\n| **Testimonial** | quote, author, role, company, avatar, rating | Reference from landing pages |\\n| **FAQ** | question, answer, category | Group by category for programmatic pages |\\n| **Author** | name, bio, avatar, social links | Reference from blog posts |\\n| **CTA Block** | heading, body, buttonText, buttonUrl, variant | Reusable across pages |\\n\\n### SEO Fields Checklist\\n\\nEvery page-level content type needs:\\n\\n- `metaTitle` — 50-60 characters\\n- `metaDescription` — 150-160 characters\\n- `ogImage` — 1200x630px social preview\\n- `slug` — URL path segment\\n- `canonicalUrl` — optional override\\n- `noIndex` — boolean for excluding from search\\n- `structuredData` — optional JSON-LD override\\n\\n---\\n\\n## Editorial Workflows\\n\\n### Draft → Review → Publish Cycle\\n\\n1. **Draft** — Author creates or edits content\\n2. **Review** — Editor reviews for accuracy, brand voice, SEO\\n3. **Approve** — Stakeholder signs off\\n4. **Schedule** — Set publish date/time\\n5. **Publish** — Content goes live via API\\n\\n### Preview APIs\\n\\nAll major headless CMS platforms support draft previews:\\n\\n- **Sanity**: Real-time preview with `useLiveQuery` or Presentation tool\\n- **Contentful**: Preview API (`preview.contentful.com`) with separate access token\\n- **Strapi**: Draft & Publish system with `status=draft` query parameter (v5; replaces v4's `publicationState`)\\n\\nSet up a preview route in your frontend (e.g., `/api/preview`) that authenticates and renders draft content.\\n\\n### Roles and Permissions\\n\\n| Role | Can Create | Can Edit | Can Publish | Can Delete |\\n|------|:----------:|:--------:|:-----------:|:----------:|\\n| Author | Yes | Own | No | Own drafts |\\n| Editor | Yes | All | Yes | Drafts |\\n| Admin | Yes | All | Yes | All |\\n\\nExact permission models vary by platform. Sanity uses role-based access. Contentful has space-level roles. Strapi has granular RBAC.\\n\\n---\\n\\n## Platform Comparison\\n\\n| Feature | Sanity | Contentful | Strapi |\\n|---------|--------|------------|--------|\\n| Hosting | Cloud (managed) | Cloud (managed) | Self-hosted or Cloud |\\n| Query Language | GROQ | REST / GraphQL | REST / GraphQL |\\n| Free Tier | Generous | Limited | Open source (free) |\\n| Real-time Collab | Yes (built-in) | Limited | No |\\n| Best For | Developer flexibility | Enterprise multi-locale | Budget / self-hosted |\\n| Content Modeling | Schema-as-code | Web UI | Web UI or code |\\n| Media Handling | Built-in DAM | Built-in | Plugin-based |\\n\\n### Sanity\\n\\n**Strengths**: GROQ query language is powerful and flexible. Schema defined in code (version-controlled). Real-time collaborative editing. Portable Text for rich content. Generous free tier.\\n\\n**Considerations**: Steeper learning curve for non-developers. Studio customization requires React knowledge. Vendor lock-in on GROQ queries.\\n\\n**Marketing fit**: Best when developers and marketers collaborate closely. Strong for content-heavy sites with complex models.\\n\\n### Contentful\\n\\n**Strengths**: Mature enterprise platform. Excellent multi-locale support. Strong ecosystem of integrations. Composable content with Studio. Well-documented APIs.\\n\\n**Considerations**: Pricing scales with content types and locales. Two separate APIs (Delivery and Management). Rate limits can be tight on lower plans.\\n\\n**Marketing fit**: Best for enterprises with multi-market content needs. Good when you need established vendor reliability.\\n\\n### Strapi\\n\\n**Strengths**: Open source, self-hosted option. Full control over data. No per-seat pricing. Customizable admin panel. Plugin ecosystem. REST by default, GraphQL via plugin.\\n\\n**Considerations**: Self-hosting means you handle infrastructure. Smaller ecosystem than Sanity/Contentful. V5 migration can be significant from V4.\\n\\n**Marketing fit**: Best for teams with DevOps capability who want full control and no vendor lock-in. Good for budget-conscious projects.\\n\\n### Others Worth Knowing\\n\\n- **Hygraph** — GraphQL-native, strong for federation and multi-source content\\n- **Keystatic** — Git-based, good for developer-content hybrid workflows\\n- **Payload** — TypeScript-first, self-hosted, code-configured like Sanity\\n- **Builder.io** — Visual editor with headless backend, good for non-technical marketers\\n- **Prismic** — Slice-based content modeling, strong Next.js integration\\n\\n---\\n\\n## Integration with Marketing Skills\\n\\n### Programmatic SEO\\n\\nUse CMS as the data source for programmatic pages. Store structured data (FAQs, comparisons, city pages) as content types and generate pages from queries. See **programmatic-seo** skill.\\n\\n### Copywriting\\n\\nCMS content models enforce consistent structure. Define fields that match your copy frameworks (headline, subheadline, social proof, CTA). See **copywriting** skill.\\n\\n### Site Architecture\\n\\nURL structure, navigation hierarchy, and internal linking all depend on how content is organized in the CMS. Plan your content model and site architecture together. See **site-architecture** skill.\\n\\n### Email Sequences\\n\\nPull CMS content into email templates for consistent messaging across web and email. Case studies, testimonials, and blog posts can feed email nurture sequences. See **emails** skill.\\n\\n---\\n\\n## Implementation Checklist\\n\\n- [ ] Define content types based on page types and reusable blocks\\n- [ ] Add SEO fields to every page-level content type\\n- [ ] Set up preview/draft mode in your frontend\\n- [ ] Configure roles and permissions for your team\\n- [ ] Create sample content for each type before building frontend\\n- [ ] Set up webhook notifications for content changes (rebuild triggers)\\n- [ ] Document content guidelines for editors (field descriptions, character limits)\\n- [ ] Test content delivery performance (CDN, caching, ISR)\\n- [ ] Plan migration strategy if moving from existing CMS\\n\\n---\\n\\n## Relevant Integration Guides\\n\\n- [Sanity](../../../tools/integrations/sanity.md) — GROQ queries, mutations, CLI\\n- [Contentful](../../../tools/integrations/contentful.md) — Delivery/Management APIs, publishing\\n- [Strapi](../../../tools/integrations/strapi.md) — REST CRUD, filters, document API\\n\"},\n {\"skill\":\"copy-editing\",\"ref\":\"checklist\",\"body\":\"# Copy Editing Checklist\\n\\nUse this checklist alongside the Seven Sweeps Framework (see SKILL.md) as a final QA pass before delivering edited copy.\\n\\n## Before You Start\\n\\n- [ ] Understand the goal of this copy\\n- [ ] Know the target audience\\n- [ ] Identify the desired action\\n- [ ] Read through once without editing\\n\\n## Clarity (Sweep 1)\\n\\n- [ ] Every sentence is immediately understandable\\n- [ ] No jargon without explanation\\n- [ ] Pronouns have clear references\\n- [ ] No sentences trying to do too much\\n\\n## Voice & Tone (Sweep 2)\\n\\n- [ ] Consistent formality level throughout\\n- [ ] Brand personality maintained\\n- [ ] No jarring shifts in mood\\n- [ ] Reads well aloud\\n\\n## So What (Sweep 3)\\n\\n- [ ] Every feature connects to a benefit\\n- [ ] Claims answer \\\"why should I care?\\\"\\n- [ ] Benefits connect to real desires\\n- [ ] No impressive-but-empty statements\\n\\n## Prove It (Sweep 4)\\n\\n- [ ] Claims are substantiated\\n- [ ] Social proof is specific and attributed\\n- [ ] Numbers and stats have sources\\n- [ ] No unearned superlatives\\n\\n## Specificity (Sweep 5)\\n\\n- [ ] Vague words replaced with concrete ones\\n- [ ] Numbers and timeframes included\\n- [ ] Generic statements made specific\\n- [ ] Filler content removed\\n\\n## Heightened Emotion (Sweep 6)\\n\\n- [ ] Copy evokes feeling, not just information\\n- [ ] Pain points feel real\\n- [ ] Aspirations feel achievable\\n- [ ] Emotion serves the message authentically\\n\\n## Zero Risk (Sweep 7)\\n\\n- [ ] Objections addressed near CTA\\n- [ ] Trust signals present\\n- [ ] Next steps are crystal clear\\n- [ ] Risk reversals stated (guarantee, trial, etc.)\\n\\n## Final Checks\\n\\n- [ ] No typos or grammatical errors\\n- [ ] Consistent formatting\\n- [ ] Links work (if applicable)\\n- [ ] Core message preserved through all edits\\n\"},\n {\"skill\":\"copy-editing\",\"ref\":\"content-refresh\",\"body\":\"# Content Refresh Editing\\n\\nCopy editing isn't just for new content. Existing pages and posts decay over time — outdated stats, stale examples, drifted brand voice, and missed SEO opportunities. A content refresh applies the same editing rigor to content that's already published.\\n\\n## When to Refresh\\n\\n- **Traffic declining** on a page that used to perform well\\n- **Stats or data** are more than 12 months old\\n- **Product has changed** — features, pricing, or positioning no longer match\\n- **Competitors updated** their version of the same content\\n- **AI search visibility** matters — outdated content gets cited less (see ai-seo skill)\\n\\n## Content Refresh Checklist\\n\\n1. **Freshness pass** — Update all dates, stats, and examples. Replace \\\"in 2024\\\" with current data. Remove references to deprecated features or tools.\\n2. **Accuracy pass** — Verify all claims are still true. Check that linked resources still exist. Confirm pricing and feature descriptions match current state.\\n3. **Voice pass** — Does the tone match your current brand voice? Older content often reflects an earlier stage of the company.\\n4. **SEO pass** — Has search intent shifted for this topic? Are there new keywords or questions to address? Add \\\"Last updated: [date]\\\" prominently.\\n5. **Proof pass** — Can you add newer testimonials, case studies, or data points that didn't exist when this was first published?\\n6. **Structure pass** — Add comparison tables, FAQ sections, or other scannable formats that make the content easier to consume.\\n\\n## Refresh vs. Rewrite\\n\\n| Signal | Action |\\n|--------|--------|\\n| Core message still valid, details outdated | Refresh (update facts, stats, examples) |\\n| Brand voice has evolved significantly | Refresh + voice rewrite |\\n| Topic angle or audience has shifted | Full rewrite |\\n| Page structure doesn't match current search intent | Full rewrite |\\n| Just needs updated stats and links | Light refresh |\\n\\n## Refresh Cadence\\n\\n- **Pricing and product pages**: Every quarter, or when pricing/features change\\n- **High-traffic blog posts**: Every 6 months\\n- **Comparison and alternatives pages**: Every 3-6 months (competitors change fast)\\n- **Evergreen guides**: Annually, unless traffic drops sooner\\n- **Low-traffic pages**: Only when traffic data suggests an opportunity\\n\"},\n {\"skill\":\"copy-editing\",\"ref\":\"plain-english-alternatives\",\"body\":\"# Plain English Alternatives\\n\\nReplace complex or pompous words with plain English alternatives.\\n\\nSource: Plain English Campaign A-Z of Alternative Words (2001), Australian Government Style Manual (2024), plainlanguage.gov\\n\\n---\\n\\n## Contents\\n- A\\n- B\\n- C\\n- D\\n- E\\n- F\\n- G-H\\n- I\\n- L-M\\n- N-O\\n- P\\n- R\\n- S\\n- T-U\\n- V-Z\\n- Phrases to Remove Entirely\\n\\n## A\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| (an) absence of | no, none |\\n| abundance | enough, plenty, many |\\n| accede to | allow, agree to |\\n| accelerate | speed up |\\n| accommodate | meet, hold, house |\\n| accomplish | do, finish, complete |\\n| accordingly | so, therefore |\\n| acknowledge | thank you for, confirm |\\n| acquire | get, buy, obtain |\\n| additional | extra, more |\\n| adjacent | next to |\\n| advantageous | useful, helpful |\\n| advise | tell, say, inform |\\n| aforesaid | this, earlier |\\n| aggregate | total |\\n| alleviate | ease, reduce |\\n| allocate | give, share, assign |\\n| alternative | other, choice |\\n| ameliorate | improve |\\n| anticipate | expect |\\n| apparent | clear, obvious |\\n| appreciable | large, noticeable |\\n| appropriate | proper, right, suitable |\\n| approximately | about, roughly |\\n| ascertain | find out |\\n| assistance | help |\\n| at the present time | now |\\n| attempt | try |\\n| authorise | allow, let |\\n\\n---\\n\\n## B\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| belated | late |\\n| beneficial | helpful, useful |\\n| bestow | give |\\n| by means of | by |\\n\\n---\\n\\n## C\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| calculate | work out |\\n| cease | stop, end |\\n| circumvent | avoid, get around |\\n| clarification | explanation |\\n| commence | start, begin |\\n| communicate | tell, talk, write |\\n| competent | able |\\n| compile | collect, make |\\n| complete | fill in, finish |\\n| component | part |\\n| comprise | include, make up |\\n| (it is) compulsory | (you) must |\\n| conceal | hide |\\n| concerning | about |\\n| consequently | so |\\n| considerable | large, great, much |\\n| constitute | make up, form |\\n| consult | ask, talk to |\\n| consumption | use |\\n| currently | now |\\n\\n---\\n\\n## D\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| deduct | take off |\\n| deem | treat as, consider |\\n| defer | delay, put off |\\n| deficiency | lack |\\n| delete | remove, cross out |\\n| demonstrate | show, prove |\\n| denote | show, mean |\\n| designate | name, appoint |\\n| despatch/dispatch | send |\\n| determine | decide, find out |\\n| detrimental | harmful |\\n| diminish | reduce, lessen |\\n| discontinue | stop |\\n| disseminate | spread, distribute |\\n| documentation | papers, documents |\\n| due to the fact that | because |\\n| duration | time, length |\\n| dwelling | home |\\n\\n---\\n\\n## E\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| economical | cheap, good value |\\n| eligible | allowed, qualified |\\n| elucidate | explain |\\n| enable | allow |\\n| encounter | meet |\\n| endeavour | try |\\n| enquire | ask |\\n| ensure | make sure |\\n| entitlement | right |\\n| envisage | expect |\\n| equivalent | equal, the same |\\n| erroneous | wrong |\\n| establish | set up, show |\\n| evaluate | assess, test |\\n| excessive | too much |\\n| exclusively | only |\\n| exempt | free from |\\n| expedite | speed up |\\n| expenditure | spending |\\n| expire | run out |\\n\\n---\\n\\n## F\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| fabricate | make |\\n| facilitate | help, make possible |\\n| finalise | finish, complete |\\n| following | after |\\n| for the purpose of | to, for |\\n| for the reason that | because |\\n| forthwith | now, at once |\\n| forward | send |\\n| frequently | often |\\n| furnish | give, provide |\\n| furthermore | also, and |\\n\\n---\\n\\n## G-H\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| generate | produce, create |\\n| henceforth | from now on |\\n| hitherto | until now |\\n\\n---\\n\\n## I\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| if and when | if, when |\\n| illustrate | show |\\n| immediately | at once, now |\\n| implement | carry out, do |\\n| imply | suggest |\\n| in accordance with | under, following |\\n| in addition to | and, also |\\n| in conjunction with | with |\\n| in excess of | more than |\\n| in lieu of | instead of |\\n| in order to | to |\\n| in receipt of | receive |\\n| in relation to | about |\\n| in respect of | about, for |\\n| in the event of | if |\\n| in the majority of instances | most, usually |\\n| in the near future | soon |\\n| in view of the fact that | because |\\n| inception | start |\\n| indicate | show, suggest |\\n| inform | tell |\\n| initiate | start, begin |\\n| insert | put in |\\n| instances | cases |\\n| irrespective of | despite |\\n| issue | give, send |\\n\\n---\\n\\n## L-M\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| (a) large number of | many |\\n| liaise with | work with, talk to |\\n| locality | place, area |\\n| locate | find |\\n| magnitude | size |\\n| (it is) mandatory | (you) must |\\n| manner | way |\\n| modification | change |\\n| moreover | also, and |\\n\\n---\\n\\n## N-O\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| negligible | small |\\n| nevertheless | but, however |\\n| notify | tell |\\n| notwithstanding | despite, even if |\\n| numerous | many |\\n| objective | aim, goal |\\n| (it is) obligatory | (you) must |\\n| obtain | get |\\n| occasioned by | caused by |\\n| on behalf of | for |\\n| on numerous occasions | often |\\n| on receipt of | when you get |\\n| on the grounds that | because |\\n| operate | work, run |\\n| optimum | best |\\n| option | choice |\\n| otherwise | or |\\n| outstanding | unpaid |\\n| owing to | because |\\n\\n---\\n\\n## P\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| partially | partly |\\n| participate | take part |\\n| particulars | details |\\n| per annum | a year |\\n| perform | do |\\n| permit | let, allow |\\n| personnel | staff, people |\\n| peruse | read |\\n| possess | have, own |\\n| practically | almost |\\n| predominant | main |\\n| prescribe | set |\\n| preserve | keep |\\n| previous | earlier, before |\\n| principal | main |\\n| prior to | before |\\n| proceed | go ahead |\\n| procure | get |\\n| prohibit | ban, stop |\\n| promptly | quickly |\\n| provide | give |\\n| provided that | if |\\n| provisions | rules, terms |\\n| proximity | nearness |\\n| purchase | buy |\\n| pursuant to | under |\\n\\n---\\n\\n## R\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| reconsider | think again |\\n| reduction | cut |\\n| referred to as | called |\\n| regarding | about |\\n| reimburse | repay |\\n| reiterate | repeat |\\n| relating to | about |\\n| remain | stay |\\n| remainder | rest |\\n| remuneration | pay |\\n| render | make, give |\\n| represent | stand for |\\n| request | ask |\\n| require | need |\\n| residence | home |\\n| retain | keep |\\n| revised | changed, new |\\n\\n---\\n\\n## S\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| scrutinise | examine, check |\\n| select | choose |\\n| solely | only |\\n| specified | given, stated |\\n| state | say |\\n| statutory | legal, by law |\\n| subject to | depending on |\\n| submit | send, give |\\n| subsequent to | after |\\n| subsequently | later |\\n| substantial | large, much |\\n| sufficient | enough |\\n| supplement | add to |\\n| supplementary | extra |\\n\\n---\\n\\n## T-U\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| terminate | end, stop |\\n| thereafter | then |\\n| thereby | by this |\\n| thus | so |\\n| to date | so far |\\n| transfer | move |\\n| transmit | send |\\n| ultimately | in the end |\\n| undertake | agree, do |\\n| uniform | same |\\n| utilise | use |\\n\\n---\\n\\n## V-Z\\n\\n| Complex | Plain Alternative |\\n|---------|-------------------|\\n| variation | change |\\n| virtually | almost |\\n| visualise | imagine, see |\\n| ways and means | ways |\\n| whatsoever | any |\\n| with a view to | to |\\n| with effect from | from |\\n| with reference to | about |\\n| with regard to | about |\\n| with respect to | about |\\n| zone | area |\\n\\n---\\n\\n## Phrases to Remove Entirely\\n\\nThese phrases often add nothing. Delete them:\\n\\n- a total of\\n- absolutely\\n- actually\\n- all things being equal\\n- as a matter of fact\\n- at the end of the day\\n- at this moment in time\\n- basically\\n- currently (when \\\"now\\\" or nothing works)\\n- I am of the opinion that (use: I think)\\n- in due course (use: soon, or say when)\\n- in the final analysis\\n- it should be understood\\n- last but not least\\n- obviously\\n- of course\\n- quite\\n- really\\n- the fact of the matter is\\n- to all intents and purposes\\n- very\\n\"},\n {\"skill\":\"copywriting\",\"ref\":\"copy-frameworks\",\"body\":\"# Copy Frameworks Reference\\n\\nHeadline formulas, page section types, and structural templates.\\n\\n## Contents\\n- Headline Formulas (outcome-focused, problem-focused, audience-focused, differentiation-focused, proof-focused, additional formulas)\\n- Landing Page Section Types (core sections, supporting sections)\\n- Page Structure Templates (feature-heavy page, varied engaging page, compact landing page, enterprise/B2B landing page, product launch page)\\n- Section Writing Tips (problem section, benefits section, how it works section, testimonial selection)\\n\\n## Headline Formulas\\n\\n### Outcome-Focused\\n\\n**{Achieve desirable outcome} without {pain point}**\\n> Understand how users are really experiencing your site without drowning in numbers\\n\\n**{Achieve desirable outcome} by {how product makes it possible}**\\n> Generate more leads by seeing which companies visit your site\\n\\n**Turn {input} into {outcome}**\\n> Turn your hard-earned sales into repeat customers\\n\\n**[Achieve outcome] in [timeframe]**\\n> Get your tax refund in 10 days\\n\\n---\\n\\n### Problem-Focused\\n\\n**Never {unpleasant event} again**\\n> Never miss a sales opportunity again\\n\\n**{Question highlighting the main pain point}**\\n> Hate returning stuff to Amazon?\\n\\n**Stop [pain]. Start [pleasure].**\\n> Stop chasing invoices. Start getting paid on time.\\n\\n---\\n\\n### Audience-Focused\\n\\n**{Key feature/product type} for {target audience}**\\n> Advanced analytics for Shopify e-commerce\\n\\n**{Key feature/product type} for {target audience} to {what it's used for}**\\n> An online whiteboard for teams to ideate and brainstorm together\\n\\n**You don't have to {skills or resources} to {achieve desirable outcome}**\\n> With Ahrefs, you don't have to be an SEO pro to rank higher and get more traffic\\n\\n---\\n\\n### Differentiation-Focused\\n\\n**The {opposite of usual process} way to {achieve desirable outcome}**\\n> The easiest way to turn your passion into income\\n\\n**The [category] that [key differentiator]**\\n> The CRM that updates itself\\n\\n---\\n\\n### Proof-Focused\\n\\n**[Number] [people] use [product] to [outcome]**\\n> 50,000 marketers use Drip to send better emails\\n\\n**{Key benefit of your product}**\\n> Sound clear in online meetings\\n\\n---\\n\\n### Additional Formulas\\n\\n**The simple way to {outcome}**\\n> The simple way to track your time\\n\\n**Finally, {category} that {benefit}**\\n> Finally, accounting software that doesn't suck\\n\\n**{Outcome} without {common pain}**\\n> Build your website without writing code\\n\\n**Get {benefit} from your {thing}**\\n> Get more revenue from your existing traffic\\n\\n**{Action verb} your {thing} like {admirable example}**\\n> Market your SaaS like a Fortune 500\\n\\n**What if you could {desirable outcome}?**\\n> What if you could close deals 30% faster?\\n\\n**Everything you need to {outcome}**\\n> Everything you need to launch your course\\n\\n**The {adjective} {category} built for {audience}**\\n> The lightweight CRM built for startups\\n\\n---\\n\\n## Landing Page Section Types\\n\\n### Core Sections\\n\\n**Hero (Above the Fold)**\\n- Headline + subheadline\\n- Primary CTA\\n- Supporting visual (product screenshot, hero image)\\n- Optional: Social proof bar\\n\\n**Social Proof Bar**\\n- Customer logos (recognizable > many)\\n- Key metric (\\\"10,000+ teams\\\")\\n- Star rating with review count\\n- Short testimonial snippet\\n\\n**Problem/Pain Section**\\n- Articulate their problem better than they can\\n- Create recognition (\\\"that's exactly my situation\\\")\\n- Hint at cost of not solving it\\n\\n**Solution/Benefits Section**\\n- Bridge from problem to your solution\\n- 3-5 key benefits (not 10)\\n- Each: headline + explanation + proof if available\\n\\n**How It Works**\\n- 3-4 numbered steps\\n- Reduces perceived complexity\\n- Each step: action + outcome\\n\\n**Final CTA Section**\\n- Recap value proposition\\n- Repeat primary CTA\\n- Risk reversal (guarantee, free trial)\\n\\n---\\n\\n### Supporting Sections\\n\\n**Testimonials**\\n- Full quotes with names, roles, companies\\n- Photos when possible\\n- Specific results over vague praise\\n- Formats: quote cards, video, tweet embeds\\n\\n**Case Studies**\\n- Problem → Solution → Results\\n- Specific metrics and outcomes\\n- Customer name and context\\n- Can be snippets with \\\"Read more\\\" links\\n\\n**Use Cases**\\n- Different ways product is used\\n- Helps visitors self-identify\\n- \\\"For marketers who need X\\\" format\\n\\n**Personas / \\\"Built For\\\" Sections**\\n- Explicitly call out target audience\\n- \\\"Perfect for [role]\\\" blocks\\n- Addresses \\\"Is this for me?\\\" question\\n\\n**FAQ Section**\\n- Address common objections\\n- Good for SEO\\n- Reduces support burden\\n- 5-10 most common questions\\n\\n**Comparison Section**\\n- vs. competitors (name them or don't)\\n- vs. status quo (spreadsheets, manual processes)\\n- Tables or side-by-side format\\n\\n**Integrations / Partners**\\n- Logos of tools you connect with\\n- \\\"Works with your stack\\\" messaging\\n- Builds credibility\\n\\n**Founder Story / Manifesto**\\n- Why you built this\\n- What you believe\\n- Emotional connection\\n- Differentiates from faceless competitors\\n\\n**Demo / Product Tour**\\n- Interactive demos\\n- Video walkthroughs\\n- GIF previews\\n- Shows product in action\\n\\n**Pricing Preview**\\n- Teaser even on non-pricing pages\\n- Starting price or \\\"from $X/mo\\\"\\n- Moves decision-makers forward\\n\\n**Guarantee / Risk Reversal**\\n- Money-back guarantee\\n- Free trial terms\\n- \\\"Cancel anytime\\\"\\n- Reduces friction\\n\\n**Stats Section**\\n- Key metrics that build credibility\\n- \\\"10,000+ customers\\\"\\n- \\\"4.9/5 rating\\\"\\n- \\\"$2M saved for customers\\\"\\n\\n---\\n\\n## Page Structure Templates\\n\\n### Feature-Heavy Page (Weak)\\n\\n```\\n1. Hero\\n2. Feature 1\\n3. Feature 2\\n4. Feature 3\\n5. Feature 4\\n6. CTA\\n```\\n\\nThis is a list, not a persuasive narrative.\\n\\n---\\n\\n### Varied, Engaging Page (Strong)\\n\\n```\\n1. Hero with clear value prop\\n2. Social proof bar (logos or stats)\\n3. Problem/pain section\\n4. How it works (3 steps)\\n5. Key benefits (2-3, not 10)\\n6. Testimonial\\n7. Use cases or personas\\n8. Comparison to alternatives\\n9. Case study snippet\\n10. FAQ\\n11. Final CTA with guarantee\\n```\\n\\nThis tells a story and addresses objections.\\n\\n---\\n\\n### Compact Landing Page\\n\\n```\\n1. Hero (headline, subhead, CTA, image)\\n2. Social proof bar\\n3. 3 key benefits with icons\\n4. Testimonial\\n5. How it works (3 steps)\\n6. Final CTA with guarantee\\n```\\n\\nGood for ad landing pages where brevity matters.\\n\\n---\\n\\n### Enterprise/B2B Landing Page\\n\\n```\\n1. Hero (outcome-focused headline)\\n2. Logo bar (recognizable companies)\\n3. Problem section (business pain)\\n4. Solution overview\\n5. Use cases by role/department\\n6. Security/compliance section\\n7. Integration logos\\n8. Case study with metrics\\n9. ROI/value section\\n10. Contact/demo CTA\\n```\\n\\nAddresses enterprise buyer concerns.\\n\\n---\\n\\n### Product Launch Page\\n\\n```\\n1. Hero with launch announcement\\n2. Video demo or walkthrough\\n3. Feature highlights (3-5)\\n4. Before/after comparison\\n5. Early testimonials\\n6. Launch pricing or early access offer\\n7. CTA with urgency\\n```\\n\\nGood for ProductHunt, launches, or announcements.\\n\\n---\\n\\n## Section Writing Tips\\n\\n### Problem Section\\n\\nStart with phrases like:\\n- \\\"You know the feeling...\\\"\\n- \\\"If you're like most [role]...\\\"\\n- \\\"Every day, [audience] struggles with...\\\"\\n- \\\"We've all been there...\\\"\\n\\nThen describe:\\n- The specific frustration\\n- The time/money wasted\\n- The impact on their work/life\\n\\n### Benefits Section\\n\\nFor each benefit, include:\\n- **Headline**: The outcome they get\\n- **Body**: How it works (1-2 sentences)\\n- **Proof**: Number, testimonial, or example (optional)\\n\\n### How It Works Section\\n\\nEach step should be:\\n- **Numbered**: Creates sense of progress\\n- **Simple verb**: \\\"Connect,\\\" \\\"Set up,\\\" \\\"Get\\\"\\n- **Outcome-oriented**: What they get from this step\\n\\nExample:\\n1. Connect your tools (takes 2 minutes)\\n2. Set your preferences\\n3. Get automated reports every Monday\\n\\n### Testimonial Selection\\n\\nBest testimonials include:\\n- Specific results (\\\"increased conversions by 32%\\\")\\n- Before/after context (\\\"We used to spend hours...\\\")\\n- Role + company for credibility\\n- Something quotable and specific\\n\\nAvoid testimonials that just say:\\n- \\\"Great product!\\\"\\n- \\\"Love it!\\\"\\n- \\\"Easy to use!\\\"\\n\"},\n {\"skill\":\"copywriting\",\"ref\":\"natural-transitions\",\"body\":\"# Natural Transitions\\n\\nTransitional phrases to guide readers through your content. Good signposting improves readability, user engagement, and helps search engines understand content structure.\\n\\nAdapted from: University of Manchester Academic Phrasebank (2023), Plain English Campaign, web content best practices\\n\\n---\\n\\n## Contents\\n- Previewing Content Structure\\n- Introducing a New Topic\\n- Referring Back\\n- Moving Between Sections\\n- Indicating Addition\\n- Indicating Contrast\\n- Indicating Similarity\\n- Indicating Cause and Effect\\n- Giving Examples\\n- Emphasising Key Points\\n- Providing Evidence (neutral attribution, expert quotes, supporting claims)\\n- Summarising Sections\\n- Concluding Content\\n- Question-Based Transitions\\n- List Introductions\\n- Hedging Language\\n- Best Practice Guidelines\\n- Transitions to Avoid (AI Tells)\\n\\n## Previewing Content Structure\\n\\nUse to orient readers and set expectations:\\n\\n- Here's what we'll cover...\\n- This guide walks you through...\\n- Below, you'll find...\\n- We'll start with X, then move to Y...\\n- First, let's look at...\\n- Let's break this down step by step.\\n- The sections below explain...\\n\\n---\\n\\n## Introducing a New Topic\\n\\n- When it comes to X,...\\n- Regarding X,...\\n- Speaking of X,...\\n- Now let's talk about X.\\n- Another key factor is...\\n- X is worth exploring because...\\n\\n---\\n\\n## Referring Back\\n\\nUse to connect ideas and reinforce key points:\\n\\n- As mentioned earlier,...\\n- As we covered above,...\\n- Remember when we discussed X?\\n- Building on that point,...\\n- Going back to X,...\\n- Earlier, we explained that...\\n\\n---\\n\\n## Moving Between Sections\\n\\n- Now let's look at...\\n- Next up:...\\n- Moving on to...\\n- With that covered, let's turn to...\\n- Now that you understand X, here's Y.\\n- That brings us to...\\n\\n---\\n\\n## Indicating Addition\\n\\n- Also,...\\n- Plus,...\\n- On top of that,...\\n- What's more,...\\n- Another benefit is...\\n- Beyond that,...\\n- In addition,...\\n- There's also...\\n\\n**Note:** Use \\\"moreover\\\" and \\\"furthermore\\\" sparingly. They can sound AI-generated when overused.\\n\\n---\\n\\n## Indicating Contrast\\n\\n- However,...\\n- But,...\\n- That said,...\\n- On the flip side,...\\n- In contrast,...\\n- Unlike X, Y...\\n- While X is true, Y...\\n- Despite this,...\\n\\n---\\n\\n## Indicating Similarity\\n\\n- Similarly,...\\n- Likewise,...\\n- In the same way,...\\n- Just like X, Y also...\\n- This mirrors...\\n- The same applies to...\\n\\n---\\n\\n## Indicating Cause and Effect\\n\\n- So,...\\n- This means...\\n- As a result,...\\n- That's why...\\n- Because of this,...\\n- This leads to...\\n- The outcome?...\\n- Here's what happens:...\\n\\n---\\n\\n## Giving Examples\\n\\n- For example,...\\n- For instance,...\\n- Here's an example:...\\n- Take X, for instance.\\n- Consider this:...\\n- A good example is...\\n- To illustrate,...\\n- Like when...\\n- Say you want to...\\n\\n---\\n\\n## Emphasising Key Points\\n\\n- Here's the key takeaway:...\\n- The important thing is...\\n- What matters most is...\\n- Don't miss this:...\\n- Pay attention to...\\n- This is critical:...\\n- The bottom line?...\\n\\n---\\n\\n## Providing Evidence\\n\\nUse when citing sources, data, or expert opinions:\\n\\n### Neutral attribution\\n- According to [Source],...\\n- [Source] reports that...\\n- Research shows that...\\n- Data from [Source] indicates...\\n- A study by [Source] found...\\n\\n### Expert quotes\\n- As [Expert] puts it,...\\n- [Expert] explains,...\\n- In the words of [Expert],...\\n- [Expert] notes that...\\n\\n### Supporting claims\\n- This is backed by...\\n- Evidence suggests...\\n- The numbers confirm...\\n- This aligns with findings from...\\n\\n---\\n\\n## Summarising Sections\\n\\n- To recap,...\\n- Here's the short version:...\\n- In short,...\\n- The takeaway?...\\n- So what does this mean?...\\n- Let's pull this together:...\\n- Quick summary:...\\n\\n---\\n\\n## Concluding Content\\n\\n- Wrapping up,...\\n- The bottom line is...\\n- Here's what to do next:...\\n- To sum up,...\\n- Final thoughts:...\\n- Ready to get started?...\\n- Now it's your turn.\\n\\n**Note:** Avoid \\\"In conclusion\\\" at the start of a paragraph. It's overused and signals AI writing.\\n\\n---\\n\\n## Question-Based Transitions\\n\\nUseful for conversational tone and featured snippet optimization:\\n\\n- So what does this mean for you?\\n- But why does this matter?\\n- How do you actually do this?\\n- What's the catch?\\n- Sound complicated? It's not.\\n- Wondering where to start?\\n- Still not sure? Here's the breakdown.\\n\\n---\\n\\n## List Introductions\\n\\nFor numbered lists and step-by-step content:\\n\\n- Here's how to do it:\\n- Follow these steps:\\n- The process is straightforward:\\n- Here's what you need to know:\\n- Key things to consider:\\n- The main factors are:\\n\\n---\\n\\n## Hedging Language\\n\\nFor claims that need qualification or aren't absolute:\\n\\n- may, might, could\\n- tends to, generally\\n- often, usually, typically\\n- in most cases\\n- it appears that\\n- evidence suggests\\n- this can help\\n- many experts believe\\n\\n---\\n\\n## Best Practice Guidelines\\n\\n1. **Match tone to audience**: B2B content can be slightly more formal; B2C often benefits from conversational transitions\\n2. **Vary your transitions**: Repeating the same phrase gets noticed (and not in a good way)\\n3. **Don't over-signpost**: Trust your reader; every sentence doesn't need a transition\\n4. **Use for scannability**: Transitions at paragraph starts help skimmers navigate\\n5. **Keep it natural**: Read aloud; if it sounds forced, simplify\\n6. **Front-load key info**: Put the important word or phrase early in the transition\\n\\n---\\n\\n## Transitions to Avoid (AI Tells)\\n\\nThese phrases are overused in AI-generated content:\\n\\n- \\\"That being said,...\\\"\\n- \\\"It's worth noting that...\\\"\\n- \\\"At its core,...\\\"\\n- \\\"In today's digital landscape,...\\\"\\n- \\\"When it comes to the realm of...\\\"\\n- \\\"This begs the question...\\\"\\n- \\\"Let's delve into...\\\"\\n\\nSee the seo-audit skill's `references/ai-writing-detection.md` for a complete list of AI writing tells.\\n\"},\n {\"skill\":\"cro\",\"ref\":\"experiments\",\"body\":\"# Page CRO Experiment Ideas\\n\\nComprehensive list of A/B tests and experiments organized by page type.\\n\\n## Contents\\n- Homepage Experiments (Hero Section, Trust & Social Proof, Features & Content, Navigation & UX)\\n- Pricing Page Experiments (Price Presentation, Pricing UX, Objection Handling, Trust Signals)\\n- Demo Request Page Experiments (Form Optimization, Page Content, CTA & Routing)\\n- Resource/Blog Page Experiments (Content CTAs, Resource Section)\\n- Landing Page Experiments (Message Match, Conversion Focus, Page Length)\\n- Feature Page Experiments (Feature Presentation, Conversion Path)\\n- Cross-Page Experiments (Site-Wide Tests, Navigation Tests)\\n\\n## Homepage Experiments\\n\\n### Hero Section\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Headline variations | Specific vs. abstract messaging |\\n| Subheadline clarity | Add/refine to support headline |\\n| CTA above fold | Include or exclude prominent CTA |\\n| Hero visual format | Screenshot vs. GIF vs. illustration vs. video |\\n| CTA button color | Test contrast and visibility |\\n| CTA button text | \\\"Start Free Trial\\\" vs. \\\"Get Started\\\" vs. \\\"See Demo\\\" |\\n| Interactive demo | Engage visitors immediately with product |\\n\\n### Trust & Social Proof\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Logo placement | Hero section vs. below fold |\\n| Case study in hero | Show results immediately |\\n| Trust badges | Add security, compliance, awards |\\n| Social proof in headline | \\\"Join 10,000+ teams\\\" messaging |\\n| Testimonial placement | Above fold vs. dedicated section |\\n| Video testimonials | More engaging than text quotes |\\n\\n### Features & Content\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Feature presentation | Icons + descriptions vs. detailed sections |\\n| Section ordering | Move high-value features up |\\n| Secondary CTAs | Add/remove throughout page |\\n| Benefit vs. feature focus | Lead with outcomes |\\n| Comparison section | Show vs. competitors or status quo |\\n\\n### Navigation & UX\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Sticky navigation | Persistent nav with CTA |\\n| Nav menu order | High-priority items at edges |\\n| Nav CTA button | Add prominent button in nav |\\n| Support widget | Live chat vs. AI chatbot |\\n| Footer optimization | Clearer secondary conversions |\\n| Exit intent popup | Capture abandoning visitors |\\n\\n---\\n\\n## Pricing Page Experiments\\n\\n### Price Presentation\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Annual vs. monthly display | Highlight savings or simplify |\\n| Price points | $99 vs. $100 vs. $97 psychology |\\n| \\\"Most Popular\\\" badge | Highlight target plan |\\n| Number of tiers | 3 vs. 4 vs. 2 visible options |\\n| Price anchoring | Order plans to anchor expectations |\\n| Custom enterprise tier | Show vs. \\\"Contact Sales\\\" |\\n\\n### Pricing UX\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Pricing calculator | For usage-based pricing clarity |\\n| Guided pricing flow | Multistep wizard vs. comparison table |\\n| Feature comparison format | Table vs. expandable sections |\\n| Monthly/annual toggle | With savings highlighted |\\n| Plan recommendation quiz | Help visitors choose |\\n| Checkout flow length | Steps required after plan selection |\\n\\n### Objection Handling\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| FAQ section | Address pricing objections |\\n| ROI calculator | Demonstrate value vs. cost |\\n| Money-back guarantee | Prominent placement |\\n| Per-user breakdowns | Clarity for team plans |\\n| Feature inclusion clarity | What's in each tier |\\n| Competitor comparison | Side-by-side value comparison |\\n\\n### Trust Signals\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Value testimonials | Quotes about ROI specifically |\\n| Customer logos | Near pricing section |\\n| Review scores | G2/Capterra ratings |\\n| Case study snippet | Specific pricing/value results |\\n\\n---\\n\\n## Demo Request Page Experiments\\n\\n### Form Optimization\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Field count | Fewer fields, higher completion |\\n| Multi-step vs. single | Progress bar encouragement |\\n| Form placement | Above fold vs. after content |\\n| Phone field | Include vs. exclude |\\n| Field enrichment | Hide fields you can auto-fill |\\n| Form labels | Inside field vs. above |\\n\\n### Page Content\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Benefits above form | Reinforce value before ask |\\n| Demo preview | Video/GIF showing demo experience |\\n| \\\"What You'll Learn\\\" | Set expectations clearly |\\n| Testimonials near form | Reduce friction at decision point |\\n| FAQ below form | Address common objections |\\n| Video vs. text | Format for explaining value |\\n\\n### CTA & Routing\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| CTA text | \\\"Book Your Demo\\\" vs. \\\"Schedule 15-Min Call\\\" |\\n| On-demand option | Instant demo alongside live option |\\n| Personalized messaging | Based on visitor data/source |\\n| Navigation removal | Reduce page distractions |\\n| Calendar integration | Inline booking vs. external link |\\n| Qualification routing | Self-serve for some, sales for others |\\n\\n---\\n\\n## Resource/Blog Page Experiments\\n\\n### Content CTAs\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Floating CTAs | Sticky CTA on blog posts |\\n| CTA placement | Inline vs. end-of-post only |\\n| Reading time display | Estimated reading time |\\n| Related resources | End-of-article recommendations |\\n| Gated vs. free | Content access strategy |\\n| Content upgrades | Specific to article topic |\\n\\n### Resource Section\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Navigation/filtering | Easier to find relevant content |\\n| Search functionality | Find specific resources |\\n| Featured resources | Highlight best content |\\n| Layout format | Grid vs. list view |\\n| Topic bundles | Grouped resources by theme |\\n| Download tracking | Gate some, track engagement |\\n\\n---\\n\\n## Landing Page Experiments\\n\\n### Message Match\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Headline matching | Match ad copy exactly |\\n| Visual matching | Match ad creative |\\n| Offer alignment | Same offer as ad promised |\\n| Audience-specific pages | Different pages per segment |\\n\\n### Conversion Focus\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Navigation removal | Single-focus page |\\n| CTA repetition | Multiple CTAs throughout |\\n| Form vs. button | Direct capture vs. click-through |\\n| Urgency/scarcity | If genuine, test messaging |\\n| Social proof density | Amount and placement |\\n| Video inclusion | Explain offer with video |\\n\\n### Page Length\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Short vs. long | Quick conversion vs. complete argument |\\n| Above-fold only | Minimal scroll required |\\n| Section ordering | Most important content first |\\n| Footer removal | Eliminate navigation |\\n\\n---\\n\\n## Feature Page Experiments\\n\\n### Feature Presentation\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Demo/screenshot | Show feature in action |\\n| Use case examples | How customers use it |\\n| Before/after | Impact visualization |\\n| Video walkthrough | Feature tour |\\n| Interactive demo | Try feature without signup |\\n\\n### Conversion Path\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Trial CTA | Feature-specific trial offer |\\n| Related features | Cross-link to other features |\\n| Comparison | vs. competitors' version |\\n| Pricing mention | Connect to relevant plan |\\n| Case study link | Feature-specific success story |\\n\\n---\\n\\n## Cross-Page Experiments\\n\\n### Site-Wide Tests\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Chat widget | Impact on conversions |\\n| Cookie consent UX | Minimize friction |\\n| Page load speed | Performance vs. features |\\n| Mobile experience | Responsive optimization |\\n| Accessibility | Impact on conversion |\\n| Personalization | Dynamic content by segment |\\n\\n### Navigation Tests\\n\\n| Test | Hypothesis |\\n|------|------------|\\n| Menu structure | Information architecture |\\n| Search placement | Help visitors find content |\\n| CTA in nav | Always-visible conversion path |\\n| Breadcrumbs | Navigation clarity |\\n\"},\n {\"skill\":\"cro\",\"ref\":\"form\",\"body\":\"# Form CRO\\n\\nYou are an expert in form optimization. Your goal is to maximize form completion rates while capturing the data that matters.\\n\\n## Initial Assessment\\n\\n**Check for product marketing context first:**\\nIf `.agents/product-marketing.md` exists (or `.claude/product-marketing.md` in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.\\n\\nBefore providing recommendations, identify:\\n\\n1. **Form Type**\\n - Lead capture (gated content, newsletter)\\n - Contact form\\n - Demo/sales request\\n - Application form\\n - Survey/feedback\\n - Checkout form\\n - Quote request\\n\\n2. **Current State**\\n - How many fields?\\n - What's the current completion rate?\\n - Mobile vs. desktop split?\\n - Where do users abandon?\\n\\n3. **Business Context**\\n - What happens with form submissions?\\n - Which fields are actually used in follow-up?\\n - Are there compliance/legal requirements?\\n\\n---\\n\\n## Core Principles\\n\\n### 1. Every Field Has a Cost\\nEach field reduces completion rate. Rule of thumb:\\n- 3 fields: Baseline\\n- 4-6 fields: 10-25% reduction\\n- 7+ fields: 25-50%+ reduction\\n\\nFor each field, ask:\\n- Is this absolutely necessary before we can help them?\\n- Can we get this information another way?\\n- Can we ask this later?\\n\\n### 2. Value Must Exceed Effort\\n- Clear value proposition above form\\n- Make what they get obvious\\n- Reduce perceived effort (field count, labels)\\n\\n### 3. Reduce Cognitive Load\\n- One question per field\\n- Clear, conversational labels\\n- Logical grouping and order\\n- Smart defaults where possible\\n\\n---\\n\\n## Field-by-Field Optimization\\n\\n### Email Field\\n- Single field, no confirmation\\n- Inline validation\\n- Typo detection (did you mean gmail.com?)\\n- Proper mobile keyboard\\n\\n### Name Fields\\n- Single \\\"Name\\\" vs. First/Last — test this\\n- Single field reduces friction\\n- Split needed only if personalization requires it\\n\\n### Phone Number\\n- Make optional if possible\\n- If required, explain why\\n- Auto-format as they type\\n- Country code handling\\n\\n### Company/Organization\\n- Auto-suggest for faster entry\\n- Enrichment after submission (Clearbit, etc.)\\n- Consider inferring from email domain\\n\\n### Job Title/Role\\n- Dropdown if categories matter\\n- Free text if wide variation\\n- Consider making optional\\n\\n### Message/Comments (Free Text)\\n- Make optional\\n- Reasonable character guidance\\n- Expand on focus\\n\\n### Dropdown Selects\\n- \\\"Select one...\\\" placeholder\\n- Searchable if many options\\n- Consider radio buttons if < 5 options\\n- \\\"Other\\\" option with text field\\n\\n### Checkboxes (Multi-select)\\n- Clear, parallel labels\\n- Reasonable number of options\\n- Consider \\\"Select all that apply\\\" instruction\\n\\n---\\n\\n## Form Layout Optimization\\n\\n### Field Order\\n1. Start with easiest fields (name, email)\\n2. Build commitment before asking more\\n3. Sensitive fields last (phone, company size)\\n4. Logical grouping if many fields\\n\\n### Labels and Placeholders\\n- Labels: Keep visible (not just placeholder) — placeholders disappear when typing, leaving users unsure what they're filling in\\n- Placeholders: Examples, not labels\\n- Help text: Only when genuinely helpful\\n\\n**Good:**\\n```\\nEmail\\n[name@company.com]\\n```\\n\\n**Bad:**\\n```\\n[Enter your email address] ← Disappears on focus\\n```\\n\\n### Visual Design\\n- Sufficient spacing between fields\\n- Clear visual hierarchy\\n- CTA button stands out\\n- Mobile-friendly tap targets (44px+)\\n\\n### Single Column vs. Multi-Column\\n- Single column: Higher completion, mobile-friendly\\n- Multi-column: Only for short related fields (First/Last name)\\n- When in doubt, single column\\n\\n---\\n\\n## Multi-Step Forms\\n\\n### When to Use Multi-Step\\n- More than 5-6 fields\\n- Logically distinct sections\\n- Conditional paths based on answers\\n- Complex forms (applications, quotes)\\n\\n### Multi-Step Best Practices\\n- Progress indicator (step X of Y)\\n- Start with easy, end with sensitive\\n- One topic per step\\n- Allow back navigation\\n- Save progress (don't lose data on refresh)\\n- Clear indication of required vs. optional\\n\\n### Progressive Commitment Pattern\\n1. Low-friction start (just email)\\n2. More detail (name, company)\\n3. Qualifying questions\\n4. Contact preferences\\n\\n---\\n\\n## Error Handling\\n\\n### Inline Validation\\n- Validate as they move to next field\\n- Don't validate too aggressively while typing\\n- Clear visual indicators (green check, red border)\\n\\n### Error Messages\\n- Specific to the problem\\n- Suggest how to fix\\n- Positioned near the field\\n- Don't clear their input\\n\\n**Good:** \\\"Please enter a valid email address (e.g., name@company.com)\\\"\\n**Bad:** \\\"Invalid input\\\"\\n\\n### On Submit\\n- Focus on first error field\\n- Summarize errors if multiple\\n- Preserve all entered data\\n- Don't clear form on error\\n\\n---\\n\\n## Submit Button Optimization\\n\\n### Button Copy\\nWeak: \\\"Submit\\\" | \\\"Send\\\"\\nStrong: \\\"[Action] + [What they get]\\\"\\n\\nExamples:\\n- \\\"Get My Free Quote\\\"\\n- \\\"Download the Guide\\\"\\n- \\\"Request Demo\\\"\\n- \\\"Send Message\\\"\\n- \\\"Start Free Trial\\\"\\n\\n### Button Placement\\n- Immediately after last field\\n- Left-aligned with fields\\n- Sufficient size and contrast\\n- Mobile: Sticky or clearly visible\\n\\n### Post-Submit States\\n- Loading state (disable button, show spinner)\\n- Success confirmation (clear next steps)\\n- Error handling (clear message, focus on issue)\\n\\n---\\n\\n## Trust and Friction Reduction\\n\\n### Near the Form\\n- Privacy statement: \\\"We'll never share your info\\\"\\n- Security badges if collecting sensitive data\\n- Testimonial or social proof\\n- Expected response time\\n\\n### Reducing Perceived Effort\\n- \\\"Takes 30 seconds\\\"\\n- Field count indicator\\n- Remove visual clutter\\n- Generous white space\\n\\n### Addressing Objections\\n- \\\"No spam, unsubscribe anytime\\\"\\n- \\\"We won't share your number\\\"\\n- \\\"No credit card required\\\"\\n\\n---\\n\\n## Form Types: Specific Guidance\\n\\n### Lead Capture (Gated Content)\\n- Minimum viable fields (often just email)\\n- Clear value proposition for what they get\\n- Consider asking enrichment questions post-download\\n- Test email-only vs. email + name\\n\\n### Contact Form\\n- Essential: Email/Name + Message\\n- Phone optional\\n- Set response time expectations\\n- Offer alternatives (chat, phone)\\n\\n### Demo Request\\n- Name, Email, Company required\\n- Phone: Optional with \\\"preferred contact\\\" choice\\n- Use case/goal question helps personalize\\n- Calendar embed can increase show rate\\n\\n### Quote/Estimate Request\\n- Multi-step often works well\\n- Start with easy questions\\n- Technical details later\\n- Save progress for complex forms\\n\\n### Survey Forms\\n- Progress bar essential\\n- One question per screen for engagement\\n- Skip logic for relevance\\n- Consider incentive for completion\\n\\n---\\n\\n## Mobile Optimization\\n\\n- Larger touch targets (44px minimum height)\\n- Appropriate keyboard types (email, tel, number)\\n- Autofill support\\n- Single column only\\n- Sticky submit button\\n- Minimal typing (dropdowns, buttons)\\n\\n---\\n\\n## Measurement\\n\\n### Key Metrics\\n- **Form start rate**: Page views → Started form\\n- **Completion rate**: Started → Submitted\\n- **Field drop-off**: Which fields lose people\\n- **Error rate**: By field\\n- **Time to complete**: Total and by field\\n- **Mobile vs. desktop**: Completion by device\\n\\n### What to Track\\n- Form views\\n- First field focus\\n- Each field completion\\n- Errors by field\\n- Submit attempts\\n- Successful submissions\\n\\n---\\n\\n## Output Format\\n\\n### Form Audit\\nFor each issue:\\n- **Issue**: What's wrong\\n- **Impact**: Estimated effect on conversions\\n- **Fix**: Specific recommendation\\n- **Priority**: High/Medium/Low\\n\\n### Recommended Form Design\\n- **Required fields**: Justified list\\n- **Optional fields**: With rationale\\n- **Field order**: Recommended sequence\\n- **Copy**: Labels, placeholders, button\\n- **Error messages**: For each field\\n- **Layout**: Visual guidance\\n\\n### Test Hypotheses\\nIdeas to A/B test with expected outcomes\\n\\n---\\n\\n## Experiment Ideas\\n\\n### Form Structure Experiments\\n\\n**Layout & Flow**\\n- Single-step form vs. multi-step with progress bar\\n- 1-column vs. 2-column field layout\\n- Form embedded on page vs. separate page\\n- Vertical vs. horizontal field alignment\\n- Form above fold vs. after content\\n\\n**Field Optimization**\\n- Reduce to minimum viable fields\\n- Add or remove phone number field\\n- Add or remove company/organization field\\n- Test required vs. optional field balance\\n- Use field enrichment to auto-fill known data\\n- Hide fields for returning/known visitors\\n\\n**Smart Forms**\\n- Add real-time validation for emails and phone numbers\\n- Progressive profiling (ask more over time)\\n- Conditional fields based on earlier answers\\n- Auto-suggest for company names\\n\\n---\\n\\n### Copy & Design Experiments\\n\\n**Labels & Microcopy**\\n- Test field label clarity and length\\n- Placeholder text optimization\\n- Help text: show vs. hide vs. on-hover\\n- Error message tone (friendly vs. direct)\\n\\n**CTAs & Buttons**\\n- Button text variations (\\\"Submit\\\" vs. \\\"Get My Quote\\\" vs. specific action)\\n- Button color and size testing\\n- Button placement relative to fields\\n\\n**Trust Elements**\\n- Add privacy assurance near form\\n- Show trust badges next to submit\\n- Add testimonial near form\\n- Display expected response time\\n\\n---\\n\\n### Form Type-Specific Experiments\\n\\n**Demo Request Forms**\\n- Test with/without phone number requirement\\n- Add \\\"preferred contact method\\\" choice\\n- Include \\\"What's your biggest challenge?\\\" question\\n- Test calendar embed vs. form submission\\n\\n**Lead Capture Forms**\\n- Email-only vs. email + name\\n- Test value proposition messaging above form\\n- Gated vs. ungated content strategies\\n- Post-submission enrichment questions\\n\\n**Contact Forms**\\n- Add department/topic routing dropdown\\n- Test with/without message field requirement\\n- Show alternative contact methods (chat, phone)\\n- Expected response time messaging\\n\\n---\\n\\n### Mobile & UX Experiments\\n\\n- Larger touch targets for mobile\\n- Test appropriate keyboard types by field\\n- Sticky submit button on mobile\\n- Auto-focus first field on page load\\n- Test form container styling (card vs. minimal)\\n\\n---\\n\\n## Task-Specific Questions\\n\\n1. What's your current form completion rate?\\n2. Do you have field-level analytics?\\n3. What happens with the data after submission?\\n4. Which fields are actually used in follow-up?\\n5. Are there compliance/legal requirements?\\n6. What's the mobile vs. desktop split?\\n\\n---\\n\\n## Related Skills\\n\\n- **signup**: For account creation forms\\n- **popups**: For forms inside popups/modals\\n- **cro**: For the page containing the form\\n- **ab-testing**: For testing form changes\\n\"}\n];\n",[],[478,801,827],"fb63d530-5d6d-11f1-a874-1607ee4eb77e","ref_4.ts","fb63d620-5d6d-11f1-a874-1607ee4eb77e",663,["D",1780286237546],"// GENERATED by deploy/gen_skills_catalog.mjs — do not edit by hand.\nimport type { SkillRef } from \"../index.ts\";\nexport const REFS_PART_4: SkillRef[] = [\n {\"skill\":\"churn-prevention\",\"ref\":\"dunning-playbook\",\"body\":\"# Dunning Playbook\\n\\nComplete guide to recovering failed payments and reducing involuntary churn.\\n\\n---\\n\\n## Why Dunning Matters\\n\\n- Failed payments cause 30-50% of all subscription churn\\n- Most failed payments are recoverable with the right strategy\\n- Subscription businesses lose an estimated $129 billion annually to involuntary churn\\n- Effective dunning recovers 50-60% of failed payments\\n\\n---\\n\\n## The Dunning Timeline\\n\\n```\\nDay -30 to -7: Pre-dunning (prevent failures)\\nDay 0: Payment fails → Smart retry #1 + Email #1\\nDay 1-3: Smart retry #2 + Email #2\\nDay 3-5: Smart retry #3\\nDay 5-7: Smart retry #4 + Email #3\\nDay 7-10: Final retry + Email #4 (final warning)\\nDay 10-14: Grace period ends → Account paused/cancelled\\nDay 14+: Win-back sequence begins\\n```\\n\\n---\\n\\n## Pre-Dunning: Prevent Failures Before They Happen\\n\\n### Card Expiry Management\\n\\n| Timing | Action |\\n|--------|--------|\\n| 30 days before expiry | Email: \\\"Your card ending in 4242 expires next month\\\" |\\n| 15 days before expiry | Email: \\\"Update your payment method to avoid interruption\\\" |\\n| 7 days before expiry | Email: \\\"Your card expires in 7 days — update now\\\" |\\n| 3 days before expiry | In-app banner: \\\"Payment method expiring soon\\\" |\\n\\n**Email template — Card expiring:**\\n```\\nSubject: Your card ending in 4242 expires soon\\n\\nHi [Name],\\n\\nThe card on file for your [Product] subscription expires on [date].\\n\\nUpdate your payment method now to avoid any interruption:\\n\\n[Update Payment Method →]\\n\\nThis takes less than 30 seconds.\\n\\n— [Product] Team\\n```\\n\\n### Card Updater Services\\n\\nMajor card networks offer automatic card update programs:\\n\\n| Service | Network | What It Does |\\n|---------|---------|--------------|\\n| Visa Account Updater (VAU) | Visa | Auto-updates stored card numbers and expiry dates |\\n| Mastercard Automatic Billing Updater (ABU) | Mastercard | Same for Mastercard |\\n| Amex Cardrefresher | American Express | Same for Amex |\\n\\n**Impact:** Reduces hard declines from expired/replaced cards by 30-50%.\\n\\n**How to enable:**\\n- **Stripe**: Automatic — enabled by default\\n- **Chargebee**: Enabled through gateway settings\\n- **Recurly**: Built-in, enabled by default\\n- **Braintree**: Contact processor to enable\\n\\n### Backup Payment Methods\\n\\nPrompt for a second payment method:\\n- During signup: \\\"Add a backup payment method\\\" (low conversion)\\n- After first successful payment: \\\"Protect your account with a backup card\\\" (better timing)\\n- After a failed payment is recovered: \\\"Add a backup to prevent future interruptions\\\" (best timing — they felt the pain)\\n\\n### Pre-Billing Notifications\\n\\nFor annual plans or high-value subscriptions:\\n- Email 7 days before renewal with amount and date\\n- Include link to update payment method\\n- Show what's included in the renewal\\n- Required by some regulations for auto-renewals\\n\\n---\\n\\n## Smart Retry Strategy\\n\\n### Decline Type Classification\\n\\n| Code | Type | Meaning | Retry? |\\n|------|------|---------|--------|\\n| `insufficient_funds` | Soft | Temporarily low balance | Yes — retry in 2-3 days |\\n| `card_declined` (generic) | Soft | Various temporary reasons | Yes — retry 3-4 times |\\n| `processing_error` | Soft | Gateway/network issue | Yes — retry within 24h |\\n| `expired_card` | Hard | Card is expired | No — request new card |\\n| `stolen_card` | Hard | Card reported stolen | No — request new card |\\n| `do_not_honor` | Soft/Hard | Bank refused (ambiguous) | Try once more, then ask for new card |\\n| `authentication_required` | Auth | SCA/3DS needed | Send customer to authenticate |\\n\\n### Retry Schedule by Provider\\n\\n**Stripe (Smart Retries — recommended):**\\n- Enable \\\"Smart Retries\\\" in Stripe Dashboard → Billing → Settings\\n- Stripe's ML model picks optimal retry timing based on billions of transactions\\n- Typically 4-8 retry attempts over 3-4 weeks\\n- Recovers ~15% more than fixed-schedule retries\\n\\n**Manual retry schedule (if no smart retries):**\\n\\n| Retry | Timing | Best Day/Time |\\n|-------|--------|--------------|\\n| 1 | Day 1 (24h after failure) | Morning, same day of week as original |\\n| 2 | Day 3 | Try a different time of day |\\n| 3 | Day 5 | After typical payday (1st, 15th) |\\n| 4 | Day 7 | Morning of the next business day |\\n| 5 (final) | Day 10 | Last attempt before grace period ends |\\n\\n**Retry timing insights:**\\n- Retry on the same day of month the original payment succeeded\\n- Retry after common paydays (1st and 15th of the month)\\n- Avoid retrying on weekends (lower approval rates)\\n- Morning retries (8-10am local time) perform slightly better\\n\\n---\\n\\n## Dunning Email Sequence\\n\\n### Email 1: Payment Failed (Day 0)\\n\\n**Tone:** Friendly, matter-of-fact. No alarm.\\n\\n```\\nSubject: Action needed — your payment didn't go through\\n\\nHi [Name],\\n\\nWe tried to charge your [card type] ending in [last 4] for your\\n[Product] subscription ($[amount]), but it didn't go through.\\n\\nThis happens sometimes — usually a quick card update fixes it.\\n\\n[Update Payment Method →]\\n\\nYour access isn't affected yet. We'll retry automatically, but\\nupdating your card is the fastest fix.\\n\\nNeed help? Just reply to this email.\\n\\n— [Product] Team\\n```\\n\\n### Email 2: Reminder (Day 3)\\n\\n**Tone:** Helpful, slightly more urgent.\\n\\n```\\nSubject: Quick reminder — update your payment for [Product]\\n\\nHi [Name],\\n\\nJust a heads-up — we still haven't been able to process your\\n$[amount] payment for [Product].\\n\\n[Update Payment Method →]\\n\\nTakes less than 30 seconds. Your [data/projects/team access]\\nis safe, but we'll need a valid payment method to keep your\\naccount active.\\n\\nQuestions? Reply here and we'll help.\\n\\n— [Product] Team\\n```\\n\\n### Email 3: Urgency (Day 7)\\n\\n**Tone:** Direct, clear consequences.\\n\\n```\\nSubject: Your [Product] account will be paused in 3 days\\n\\nHi [Name],\\n\\nWe've tried to process your payment several times, but your\\n[card type] ending in [last 4] keeps getting declined.\\n\\nIf we don't receive payment by [date], your account will be\\npaused and you'll lose access to:\\n\\n• [Key feature/data they use]\\n• [Their projects/workspace]\\n• [Team access for X members]\\n\\n[Update Payment Method Now →]\\n\\nYour data won't be deleted — you can reactivate anytime by\\nupdating your payment method.\\n\\n— [Product] Team\\n```\\n\\n### Email 4: Final Warning (Day 10)\\n\\n**Tone:** Final, clear, no guilt.\\n\\n```\\nSubject: Last chance to keep your [Product] account active\\n\\nHi [Name],\\n\\nThis is our last reminder. Your payment of $[amount] is past\\ndue, and your account will be paused tomorrow ([date]).\\n\\n[Update Payment Method →]\\n\\nAfter pausing:\\n• Your data is saved for [90 days]\\n• You can reactivate anytime\\n• Just update your card to restore access\\n\\nIf you intended to cancel, no action needed — your account\\nwill be paused automatically.\\n\\n— [Product] Team\\n```\\n\\n---\\n\\n## Grace Period Management\\n\\n### What Happens During Grace Period\\n\\n| Setting | Recommendation |\\n|---------|---------------|\\n| Duration | 7-14 days after final retry |\\n| Access | Degraded (read-only) or full access |\\n| Visibility | In-app banner: \\\"Payment past due — update to continue\\\" |\\n| Retry | Continue background retries during grace |\\n| Communication | Dunning emails continue |\\n\\n### Access Degradation Options\\n\\n**Option A: Full access during grace (recommended for B2B)**\\n- Lower friction, customer feels respected\\n- Higher recovery rate (they still see value)\\n- Risk: some customers exploit the grace period\\n\\n**Option B: Read-only access (recommended for B2C)**\\n- Can view but not create/edit\\n- Creates urgency without data loss fear\\n- Clear message: \\\"Update payment to resume full access\\\"\\n\\n**Option C: Immediate lockout (not recommended)**\\n- Aggressive, damages relationship\\n- Lower recovery rate\\n- Only appropriate for very low-cost plans\\n\\n### Post-Grace Period\\n\\n| Timing | Action |\\n|--------|--------|\\n| Grace period ends | Pause account (not delete) |\\n| Day 1 post-pause | \\\"Your account has been paused\\\" email |\\n| Day 7 post-pause | \\\"Your data is still here\\\" reminder |\\n| Day 30 post-pause | Win-back attempt with new offer |\\n| Day 60 post-pause | Final win-back |\\n| Day 90 post-pause | Data deletion warning (if applicable) |\\n\\n---\\n\\n## Provider-Specific Setup\\n\\n### Stripe\\n\\n**Enable Smart Retries:**\\n1. Dashboard → Settings → Billing → Subscriptions and emails\\n2. Enable \\\"Smart Retries\\\" under retry rules\\n3. Set failed payment emails in Dashboard → Settings → Emails\\n\\n**Custom retry rules (if not using Smart Retries):**\\n```\\nRetry 1: 3 days after failure\\nRetry 2: 5 days after failure\\nRetry 3: 7 days after failure\\nFinal: Mark subscription as unpaid after last retry\\n```\\n\\n**Webhook events to handle:**\\n- `invoice.payment_failed` — trigger dunning\\n- `invoice.paid` — cancel dunning, restore access\\n- `customer.subscription.updated` — status changes\\n- `customer.subscription.deleted` — final cancellation\\n\\n### Chargebee\\n\\n**Built-in dunning:**\\n1. Settings → Configure Chargebee → Retry Settings\\n2. Configure retry attempts and intervals\\n3. Settings → Configure Chargebee → Email Notifications → Dunning\\n\\n**Dunning options:**\\n- Automatic retries with configurable schedule\\n- Built-in dunning emails (customizable templates)\\n- Grace period configuration per plan\\n\\n### Paddle\\n\\n**Managed dunning:**\\n- Paddle handles retries and dunning automatically\\n- Limited customization (Paddle manages the relationship)\\n- Webhook: `subscription.payment_failed`, `subscription.cancelled`\\n- Best for hands-off approach\\n\\n### Recurly\\n\\n**Revenue Recovery:**\\n1. Configuration → Dunning Management\\n2. Set retry schedule per plan\\n3. Configure grace period and final action (pause vs cancel)\\n\\n**Advanced features:**\\n- Machine-learning retry optimization\\n- Per-plan dunning schedules\\n- Built-in Account Updater\\n\\n---\\n\\n## In-App Dunning\\n\\nDon't rely on email alone. Show payment failures in the app:\\n\\n### Banner Pattern\\n```\\n┌──────────────────────────────────────────────────────┐\\n│ ⚠ Your payment of $29 failed. Update your card to │\\n│ avoid losing access. [Update Payment →] [Dismiss] │\\n└──────────────────────────────────────────────────────┘\\n```\\n\\n**Rules:**\\n- Show on every page load during dunning period\\n- Allow dismiss (but show again next session)\\n- Direct link to payment update (fewest clicks possible)\\n- Don't block the product — let them continue using it\\n\\n### Modal Pattern (for final warning)\\n```\\n┌─────────────────────────────────────┐\\n│ │\\n│ Your account will be paused │\\n│ on [date] │\\n│ │\\n│ Update your payment method to │\\n│ keep access to your [X] projects │\\n│ and [Y] team members. │\\n│ │\\n│ [Update Payment Method] │\\n│ [Remind Me Later] │\\n│ │\\n└─────────────────────────────────────┘\\n```\\n\\n---\\n\\n## Measuring Dunning Performance\\n\\n### Key Metrics\\n\\n| Metric | How to Calculate | Target |\\n|--------|-----------------|--------|\\n| Recovery rate | Recovered payments / Total failed | 50-60% |\\n| Recovery rate by decline type | Recovered / Failed per type | Soft: 70%+, Hard: 40%+ |\\n| Time to recovery | Days from failure to successful payment | <5 days |\\n| Pre-dunning prevention rate | Prevented failures / Expected failures | 20-30% |\\n| Dunning email open rate | Opens / Sent per email | 60%+ |\\n| Dunning email click rate | Clicks / Opens per email | 30%+ |\\n| Revenue recovered (monthly) | Sum of recovered payment amounts | Track trend |\\n| Revenue lost to involuntary churn | Sum of failed + unrecovered amounts | Track trend |\\n\\n### Benchmarking\\n\\n**By company stage:**\\n\\n| Stage | Typical Involuntary Churn | Target After Optimization |\\n|-------|--------------------------|--------------------------|\\n| Early (< $1M ARR) | 3-5% of MRR/month | 1-2% |\\n| Growth ($1-10M ARR) | 2-4% of MRR/month | 0.5-1.5% |\\n| Scale ($10M+ ARR) | 1-3% of MRR/month | 0.3-0.8% |\\n\\n### ROI Calculation\\n\\n```\\nMonthly failed payment MRR: $10,000\\nCurrent recovery rate: 30% ($3,000 recovered)\\nTarget recovery rate: 60% ($6,000 recovered)\\nMonthly improvement: $3,000/month\\nAnnual improvement: $36,000/year\\nCost of dunning optimization: ~$200-500/month (tooling)\\nROI: 6-15x\\n```\\n\"},\n {\"skill\":\"cold-email\",\"ref\":\"benchmarks\",\"body\":\"# Benchmarks, Data & Expert Methods\\n\\n## Core Performance Metrics (2024–2025)\\n\\n| Metric | Average | Good | Excellent | Source |\\n| -------------------------- | ------- | ------ | --------- | ------------------------ |\\n| Open rate | 27.7% | 40–45% | 50%+ | Belkins, Snov.io |\\n| Reply rate | 4–5.8% | 5–10% | 10–15% | Belkins, Reachoutly |\\n| Reply rate (best-in-class) | — | — | 15–25%+ | Digital Bloom, Instantly |\\n| Positive reply % | ~48% | 55–60% | 62–65% | Digital Bloom |\\n| Meeting booking rate | 0.5–1% | 1–2% | 2.3%+ | Reachoutly |\\n| Bounce rate | 7.5% | <4% | <2% | Belkins |\\n\\n## Realistic Funnel Model\\n\\n500 emails → 100 opens (20%) → 25 replies (5%) → 8 positive replies (30%) → 4 meetings (50%) → 1 client (25% close). ~**0.2% end-to-end conversion** for average performers.\\n\\n## Performance Levers (ranked by impact)\\n\\n1. **Hook type** — Timeline hooks outperform problem hooks by 3.4x in meetings\\n2. **Personalization depth** — Up to 250% more replies\\n3. **Brevity** — 25–75 words optimal, 83% more replies under 75 words\\n4. **Targeting precision** — ≤50 contacts per campaign = 2.76x higher reply rates\\n5. **Follow-up strategy** — First follow-up adds 49% more replies\\n6. **Reading level** — 3rd–5th grade = 67% more replies\\n7. **Send timing** — Thursday peaks at 6.87% reply rate\\n\\n## Declining Effectiveness Trend\\n\\nReply rates dropped from 7–8% (2020–2022) to 4–5.8% (2024–2025), ~15% YoY decline. Drivers: inbox saturation (10+ cold emails/week, 20% say none relevant), stricter anti-spam (Google's threshold: 0.1% complaints), AI email flood (more volume, less quality signal). Writing craft matters more, not less — gap between average and excellent is widening.\\n\\n## Response Rates by Seniority\\n\\n- **Entry-level:** Highest engagement at 8% reply, 50% open\\n- **C-level:** 23% more likely to respond than non-C-suite when they engage (6.4% vs 5.2%)\\n- **CTOs/VP Tech:** 7.68% reply\\n- **CEOs/Founders:** 7.63% reply\\n- **Heads of Sales:** 6.60% (most targeted role, highest saturation)\\n\\n## Industry Variation\\n\\n**Highest responding:** Nonprofits (16.5%+), legal (10%), EdTech (7.8%), chemical (7.3%), manufacturing (6.1%).\\n**Lowest responding:** SaaS (3.5%), financial services (3.4%), IT services (3.5%).\\n\\n## Top 15 Mistakes (ranked by impact)\\n\\n1. **Too long** — 70% of emails above 10th-grade level. Under 75 words = 83% more replies\\n2. **Too self-focused** — \\\"We are a leading...\\\" signals sales pitch. Count I/We sentences\\n3. **No clear value prop** — 71% of decision-makers ignore irrelevant emails\\n4. **Generic templates** — {{FirstName}} isn't personalization. Recipients detect instantly\\n5. **Feature dumping** — \\\"Great reps lead with problems\\\" (Lavender). One proof point beats ten features\\n6. **False personalization** — \\\"Loved your post!\\\" without specifics is transparent\\n7. **Asking too much too soon** — 30-min call in first email = \\\"proposing on first date\\\"\\n8. **Pushy language** — \\\"Act Now\\\" stacking increases spam flagging by 67%\\n9. **No CTA** — Without a clear next step, momentum dies\\n10. **\\\"Just checking in\\\" follow-ups** — \\\"I never heard back\\\" = 12% drop in bookings\\n11. **Wrong tone for audience** — Founder ≠ RevOps lead ≠ sales leader\\n12. **Jargon/buzzwords** — \\\"Leverage synergistic platform\\\" → \\\"We help you book more meetings\\\"\\n13. **Unsubstantiated claims** — \\\"300% more leads\\\" without proof triggers skepticism\\n14. **Too many contacts per company** — 1–2 people = 7.8% reply; 10+ = 3.8%\\n15. **Fake urgency** — Fake \\\"Re:\\\" / \\\"Fwd:\\\" / countdown timers destroy trust\\n\\n## Cultural Calibration\\n\\n| Factor | US | UK | Germany/DACH | Scandinavia |\\n| ------------ | --------------- | ------------------------ | -------------------- | ----------------------- |\\n| Tone | Direct, casual | Polite, professional | Precise, data-driven | Fact-based, egalitarian |\\n| Length | Shorter, blunt | Longer, insight-led | Detail-oriented | Concise but substantive |\\n| Social proof | Outcome numbers | Research-led credibility | Technical precision | Shared values |\\n\\nNorth America: 4.1% response. Europe: 3.1%. Asia-Pacific: 2.8%. Shorter, more direct sequences work better in US. UK needs more insight/personality. GDPR affects European tone.\\n\\n## Expert Quick Reference\\n\\n| Expert | Core Method | Best For |\\n| -------------- | --------------------------------------------------------------- | ----------------------------------------------- |\\n| Alex Berman | 3C's: Compliment → Case Study → CTA | High-ticket B2B services, agencies |\\n| Josh Braun | \\\"Poke the Bear\\\" — neutral questions exposing invisible problems | Empathy-driven consultative selling |\\n| Kyle Coleman | Systematic research + AI personalization at scale | Bridging mass outreach and deep personalization |\\n| Becc Holland | Psychographic personalization, Premise Buckets | Combining personalization with relevance |\\n| Will Allred | Data-driven coaching, Mouse Trap, Vanilla Ice Cream | Any context; universal frameworks |\\n| Justin Michael | 1–3 sentence hyper-brevity, quote their own words | High-velocity SDR teams at scale |\\n| Sam Nelson | Agoge Sequence — Triple on Day 1 (email + LinkedIn + call) | Multi-channel, tiered personalization |\\n\"},\n {\"skill\":\"cold-email\",\"ref\":\"follow-up-sequences\",\"body\":\"# Follow-Up Sequences\\n\\n55% of replies come from follow-ups, not the initial email. Yet 48% of salespeople never follow up even once.\\n\\n## How Many: 3–5 Total Emails\\n\\n- Highest single-email reply rate: **8.4%** (Belkins).\\n- 4–7 email campaigns achieve **27% reply rates** vs 9% for 1–3 emails (Woodpecker, 20M emails).\\n- By 4th follow-up, response rates drop **55%** and spam complaints **triple**.\\n- Resolution: longer sequences catch different timing windows. Cap at 4 follow-ups (5 total emails). Each must add genuinely new value.\\n\\n## Optimal Cadence\\n\\nIncrease the gap between each touch:\\n\\n| Touch | Day | Notes |\\n| ------------- | ----- | ---------------------------------------------- |\\n| Initial email | 0 | Maximum personalization investment |\\n| Follow-up 1 | 3 | Waiting 3 days increases response by up to 31% |\\n| Follow-up 2 | 7–8 | Different angle |\\n| Follow-up 3 | 14 | New value piece |\\n| Follow-up 4 | 21–28 | Breakup email |\\n\\n**Best days:** Tuesday–Thursday (Thursday peaks at 6.87% reply rate).\\n**Best times:** 9–11 AM or 1–3 PM in prospect's local time.\\n**Avoid:** Monday mornings (inbox overload), Friday afternoons (checked out).\\n\\n## Angle Rotation\\n\\nEach follow-up must stand alone while building toward the goal. Never just \\\"bump this up.\\\"\\n\\n| Email | Angle | Purpose |\\n| ----------- | ---------------------------------------------------------- | -------------------------- |\\n| Initial | Personalized hook + core value prop + soft CTA | Introduce problem/solution |\\n| Follow-up 1 | Different angle, new value piece (stat, insight, resource) | Show additional benefit |\\n| Follow-up 2 | Social proof / case study from similar company | Build credibility |\\n| Follow-up 3 | New insight, industry trend, or relevant resource | Demonstrate expertise |\\n| Follow-up 4 | Breakup — acknowledge silence, leave door open | Trigger loss aversion |\\n\\nAdd only **one new value proposition per email** (SalesBread). This naturally forces different angles.\\n\\n## The Breakup Email\\n\\nLeverages loss aversion — removing pressure while creating scarcity through withdrawal. Close.com reports **10–15% response rates** from breakup emails with cold prospects.\\n\\n**Structure:**\\n\\n1. Acknowledge you've reached out multiple times\\n2. Validate their potential lack of interest\\n3. State this is your final email for now\\n4. Leave the door open\\n\\n**Example:**\\n\\n> I haven't heard back, so I'll assume now isn't the right time. Before I close the loop: [1-sentence insight or resource]. If that changes things, feel free to reply. Otherwise, no hard feelings — good luck with [their goal].\\n\\n**1-2-3 Format** (reduces friction to near zero):\\n\\n> Since I haven't heard back, I'll keep it simple. Reply with a number:\\n>\\n> 1 — Interested, let's talk\\n> 2 — Not now, check back in 3 months\\n> 3 — Not interested, please stop\\n\\n**Critical rule:** If you send a breakup email, honor it. Do not contact the prospect again.\\n\\n## Phrases That Kill Response Rates\\n\\n- \\\"I never heard back\\\" → **12% drop** in meeting booking rate (Gong)\\n- \\\"Just checking in\\\" → Zero value, signals laziness\\n- \\\"Bumping this to the top of your inbox\\\" → Presumptuous\\n- \\\"Did you see my last email?\\\" → Guilt-tripping\\n- \\\"Following up on my previous message\\\" → Generic, adds nothing\\n\\n## CTA Adjustment by Seniority\\n\\n**Executives/founders:** Ultra-low-effort, curiosity-driven. \\\"Curious?\\\" or \\\"Worth 2 min?\\\"\\n\\n**Mid-level managers:** More specific value. \\\"Want me to walk through how [Company] saved 15 hours/week?\\\"\\n\\nHigher in the org chart = less friction you can ask for.\\n\"},\n {\"skill\":\"cold-email\",\"ref\":\"frameworks\",\"body\":\"# Cold Email Copywriting Frameworks\\n\\nFrameworks beat templates — they teach thinking patterns, not copy-paste shortcuts.\\n\\n## PAS — Problem, Agitate, Solution (default)\\n\\n**Structure:** Identify pain → Amplify consequences → Present solution + soft CTA.\\n**Best for:** Problem-aware but not solution-aware prospects. The workhorse framework.\\n\\n> Most VP Sales at companies your size spend 5+ hours/week on manual CRM reporting. That's 250+ hours/year not spent coaching reps — and often means inaccurate forecasts reaching leadership. We built a tool that auto-generates CRM reports in real time. Teams like Datadog reduced reporting time by 80%. Would it make sense to see how?\\n\\n## BAB — Before, After, Bridge\\n\\n**Structure:** Current painful situation → Ideal future → Your product as the bridge.\\n**Best for:** Transformation-driven offers with clear before/after. Emotional decision-makers.\\n\\n> Right now, your team is likely spending hours manually sourcing leads — feast or famine each quarter. Imagine qualified leads arriving daily on autopilot, reps spending 100% of their time selling. That's what our platform does. Companies like HubSpot saw a 40% pipeline increase within 90 days. Can I show you how?\\n\\n## QVC — Question, Value, CTA\\n\\n**Structure:** Targeted pain question → Brief value → Direct next step.\\n**Best for:** C-suite prospects who prefer brevity. Qualify interest immediately.\\n\\n> Are your SDRs spending more time researching than selling? We help sales teams automate prospect research so reps focus on conversations. Clients see 3x more meetings per rep per week. Worth a 10-minute demo?\\n\\n## AIDA — Attention, Interest, Desire, Action\\n\\n**Structure:** Hook/stat → Address specific challenge → Social proof/outcome → Clear CTA.\\n**Best for:** Data-driven prospects, high-ticket pitches with strong stats.\\n\\n> Companies in pharma lose 30% of leads due to manual outreach. Given {{Company}}'s growth this quarter, pipeline velocity is likely top of mind. Customers like Pfizer use our platform to automate lead qualification — cutting time-to-contact by 60%. Worth a 15-minute call?\\n\\n## PPP — Praise, Picture, Push\\n\\n**Structure:** Genuine compliment → How things could be better → Gentle push to action.\\n**Best for:** Senior prospects who respond to relationship-building. Requires genuine trigger.\\n\\n> Your keynote on scaling SDR teams was spot-on — especially on ramp time as the hidden cost. What if you could cut that in half? Our in-inbox coach helps new reps write effective emails from day one with real-time scoring. Open to a quick chat about how this could support your growth?\\n\\n## Star-Story-Solution\\n\\n**Structure:** Introduce character (customer) → Tell challenge narrative → Reveal results.\\n**Best for:** Strong customer success stories. Humanizes the pitch.\\n\\n> Last year, Sarah — VP Sales at a Series B startup — had 5 SDRs competing against a rival with 20. Her team was getting crushed on volume. They adopted our AI prospecting tool and sent hyper-personalized emails at 3x pace without losing quality. Within 90 days, they booked more meetings than their competitor's entire team. Happy to share how this could work for {{Company}}.\\n\\n## SCQ — Situation, Complication, Question\\n\\n**Structure:** Current reality → Complicating challenge → Question that speaks to need → Optional answer.\\n**Best for:** Consultative selling. Mirrors how professionals present to leadership.\\n\\n> Your team doubled this year. That usually means onboarding is eating into selling time. How are you handling ramp for new hires?\\n\\n## ACCA — Awareness, Comprehension, Conviction, Action\\n\\n**Structure:** Contrarian hook → Explain benefit simply → Provide proof → Strong CTA.\\n**Best for:** Analytical buyers who need evidence (engineers, CFOs, ops leaders).\\n\\n> Most sales teams measure rep activity. The top 5% measure rep efficiency instead. When Acme switched, they booked 40% more meetings with fewer emails. Worth seeing how?\\n\\n## 3C's (Alex Berman)\\n\\n**Structure:** Compliment → Case Study → CTA.\\n**Best for:** Agency/services cold outreach. Case study does the heavy lifting.\\n\\n> Big fan of [Company]. We just built an app for [Competitor] that does XYZ. I have a few more ideas. Interested?\\n\\n## Mouse Trap (Lavender/Will Allred)\\n\\n**Structure:** Observation + Binary value-prop question. 1–2 sentences total.\\n**Best for:** Maximum brevity. Impulsive reply based on curiosity.\\n\\n> Looks like you're hiring reps. Would it be helpful to get a more granular look at how they're ramping on email?\\n\\n## Justin Michael Method\\n\\n**Structure:** Trigger/Pain → Solution hint → Binary CTA. 1–3 sentences, no intro.\\n**Best for:** High-velocity SDR teams. Mobile-optimized. Deliberately polarizing.\\n\\nSpend max 1 minute on personalization. Use industry/persona-level signals. For top-tier prospects, quote their own words from interviews — they almost always respond.\\n\\n## Vanilla Ice Cream (Lavender)\\n\\n**Structure:** Observation → Problem/Insight → Credibility → Solution → Call-to-Conversation.\\n**Best for:** Universal \\\"base\\\" framework that works everywhere. Five parts.\\n\\n## PASTOR (Ray Edwards)\\n\\n**Structure:** Problem → Amplify → Story → Testimony → Offer → Response.\\n**Best for:** Longer-form or multi-email sequences. Consulting, education, complex B2B services. Each element can be developed across separate touches.\\n\"},\n {\"skill\":\"cold-email\",\"ref\":\"personalization\",\"body\":\"# Personalization at Scale\\n\\nPersonalization drives **50–250% more replies** (Lavender). The key insight: **if your personalization has nothing to do with the problem you solve, it's just an attention hack** (Clay).\\n\\n## Four Levels of Personalization\\n\\n### Level 1 — Basic (merge tags)\\n\\nFirst name, company name, job title. Table stakes, no longer differentiating. ~5% lift.\\n\\n### Level 2 — Industry/segment\\n\\nIndustry-specific pain points, trends, regulatory challenges. Scalable via micro-segmentation.\\n\\n> Most {{industry}} teams struggle with {{lead gen problem}}, which often leads to wasted effort.\\n\\n### Level 3 — Role-level\\n\\nChallenges specific to their role and seniority.\\n\\n> As Head of Sales, keeping pipeline steady is probably your biggest headache. Your RevOps team is small, so you're likely wearing multiple hats during scaling.\\n\\n### Level 4 — Individual (gold standard)\\n\\nSpecific, timely observations about that person connected to the problem you solve.\\n\\n> Noticed you're hiring 3 SDRs — sounds like you're scaling outbound fast. Most teams hit follow-up fatigue during onboarding.\\n\\n## Research Signal Stack\\n\\n| Signal | Where to find it | How to use it |\\n| ----------------- | ---------------------------------- | ---------------------------------------------------------------------------- |\\n| Recent funding | Crunchbase, LinkedIn, press | \\\"Congrats on Series B — scaling teams fast usually creates X challenge\\\" |\\n| Job postings | LinkedIn Jobs, careers page | \\\"Noticed you're hiring 3 SDRs — sounds like you're scaling outbound\\\" |\\n| Tech stack | BuiltWith, Wappalyzer, HG Insights | \\\"I see you're using HubSpot — most teams at your stage hit a ceiling with X\\\" |\\n| LinkedIn activity | Posts, comments, job changes | \\\"Really enjoyed your post about X\\\" |\\n| Company news | Google News, press releases | \\\"Congrats on acquiring X — integrating teams usually creates Y challenge\\\" |\\n| Podcast/talks | Google, YouTube, podcasts | \\\"Caught your talk at SaaStr on X — really insightful\\\" |\\n| Website changes | Manual review | \\\"Your new pricing page caught my eye — curious how it's converting\\\" |\\n\\n## The 3-Minute Personalization System\\n\\nFrom \\\"30 Minutes to President's Club\\\":\\n\\n**Step 1:** Build a research stack of top 10 buying signals — 5 company triggers, 5 person triggers. Stack-rank by relevance.\\n\\n**Step 2:** Build a 3x3 template: (1) personalization attached to a problem, (2) problem you solve, (3) one-sentence solution + low-friction CTA.\\n\\n**Step 3:** Create 5 \\\"trigger templates\\\" — pre-written personalization paragraphs for each trigger, with a smooth segue into the problem.\\n\\nThe personalization must logically connect to the problem. This creates 5 reusable triggers with the rest of the email constant. A top SDR writes a personalized email in **under 3 minutes**.\\n\\n## The Four -Graphic Principles (Becc Holland)\\n\\n- **Demographic** — Age, profession, background\\n- **Technographic** — Tech stack, tools used\\n- **Firmographic** — Company size, funding, industry, growth stage\\n- **Psychographic** — Values, passions, beliefs (highest-impact dimension)\\n\\nTapping into what prospects are passionate about drives significantly higher response rates.\\n\\n## Observation-Based Openers (highest performing)\\n\\n**Trigger-event:** \\\"Congrats on the recent funding round — scaling the team from here is exciting, and I imagine [challenge] is top of mind.\\\"\\n\\n**Observation:** \\\"Your recent post about [topic] resonated — especially the part about [detail]. Got me thinking about how that applies to [challenge].\\\"\\n\\n**Industry insight:** \\\"Most [role titles] I talk to spend [X hours/week] on [problem] — curious if that matches your experience at [Company].\\\"\\n\\n## What Feels Fake (avoid)\\n\\n- AI-generated emails with similar phrasing (\\\"I hope this email finds you well\\\")\\n- Generic attention hacks disconnected from problem (\\\"Cool that you went to UCLA!\\\" → pitch)\\n- Over-personalizing to creepiness\\n- \\\"I saw your LinkedIn profile and wanted to reach out\\\" — signals mass automation\\n\\n## The \\\"So What?\\\" Test\\n\\nAfter writing any opening line, read from prospect's perspective: \\\"So what? Why would I care?\\\" If the answer is nothing, rewrite.\\n\"},\n {\"skill\":\"cold-email\",\"ref\":\"subject-lines\",\"body\":\"# Subject Line Optimization\\n\\nThe subject line determines whether the email gets read. The data is counterintuitive: **short, boring, internal-looking subject lines win decisively.**\\n\\n## Length: 2–4 words\\n\\n- 2-word subject lines get **60% more opens** than 5-word (Lavender).\\n- Going from 2 to 4 words reduces replies by **17.5%**.\\n- 2–4 words yield **46% open rates** vs 34% for 10 words (Belkins, 5.5M emails).\\n- Mobile truncates at 30–35 characters — brevity is practical necessity.\\n\\n## Internal Camouflage Principle\\n\\nSubject lines that look like they came from a colleague, not a vendor, double open rates (Gong). Buyers mentally categorize before opening — if it looks like sales, it's filtered.\\n\\n**High-performing examples:** \\\"reply rates\\\" · \\\"trial delays\\\" · \\\"hiring ops\\\" · \\\"employee turnover\\\" · \\\"Q2 forecast\\\" · \\\"new patients\\\" · \\\"personalization issue\\\" · \\\"second page\\\"\\n\\n## Capitalization: lowercase wins\\n\\nAll-lowercase has highest open rates (Gong, 85M+ emails). Lowercase looks more personal/internal. For cold outreach specifically, lowercase beats title case.\\n\\n## Personalization: context over name\\n\\nPersonalized subject lines boost opens **26–50%**, but type matters:\\n\\n- **First name in subject line → 12% fewer replies.** Signals automation.\\n- **Contextual personalization works:** pain points, competitors, trigger events, industry challenges.\\n- Use {{painPoint}}, {{competitor}}, {{commonGround}} — not {{firstName}}.\\n\\n## Questions: only when highly specific\\n\\nData conflicts: Belkins says questions perform well (46% open rate). Lavender says questions lower opens by **56%**. Resolution: **specific pain questions work** (\\\"Need help with {{challenge}}?\\\"), **generic questions fail** (\\\"Quick question?\\\" / \\\"Have 15 minutes?\\\"). Default to statements.\\n\\n## What to Avoid\\n\\n| Anti-pattern | Impact |\\n| ---------------------------------------------- | --------------------------- |\\n| Salesy language (\\\"increase,\\\" \\\"boost,\\\" \\\"ROI\\\") | -17.9% opens |\\n| Urgency words (\\\"ASAP,\\\" \\\"urgent\\\") | Below 36% opens |\\n| Excessive punctuation (\\\"!!!\\\" or \\\"??\\\") | -36% opens |\\n| Numbers and percentages | -46% opens |\\n| Emojis | Hurt B2B professionalism |\\n| Pitching product in subject | -57% replies |\\n| Empty/no subject line | +30% opens but -12% replies |\\n| Spam triggers (\\\"free,\\\" \\\"guarantee,\\\" \\\"act now\\\") | Deliverability risk |\\n\\n## C-Suite Subject Lines\\n\\nExecutives receive 300–400 emails daily, decide in seconds. They respond **23% more often** than non-C-suite when emails pass their filter (6.4% reply rate).\\n\\nWhat works: ultra-concise, human, understated. \\\"{{companyInitiative}}\\\" · \\\"thank you\\\" · \\\"an update\\\" · \\\"a question\\\" · reference to a specific project or trigger event.\\n\\nAnything \\\"salesy\\\" is immediately rejected.\\n\"},\n {\"skill\":\"competitor-profiling\",\"ref\":\"templates\",\"body\":\"# Profile Templates\\n\\nReady-to-use templates for competitor profile sections and the summary document.\\n\\n## Contents\\n- Quick Scan Template\\n- Summary Comparison Table\\n- Positioning Map\\n- Competitive SWOT\\n- Profile Update Changelog\\n\\n---\\n\\n## Quick Scan Template\\n\\nAbbreviated profile for when speed matters more than depth.\\n\\n```markdown\\n# [Competitor Name] — Quick Profile\\n\\n**URL**: [website]\\n**Generated**: [date]\\n\\n## At a Glance\\n\\n| Metric | Value |\\n|--------|-------|\\n| Tagline | [from homepage] |\\n| Target audience | [inferred from copy] |\\n| Pricing starts at | [lowest paid tier] |\\n| Free tier/trial | [yes/no + details] |\\n| Domain rank | [from DataForSEO] |\\n| Est. organic traffic | [monthly] |\\n| Organic keywords (top 10) | [count] |\\n| Referring domains | [count] |\\n\\n## Positioning\\n\\n**Headline**: \\\"[exact homepage headline]\\\"\\n**Subheadline**: \\\"[exact subheadline]\\\"\\n**Positioning angle**: [1-2 sentence summary of how they position]\\n\\n## Pricing Summary\\n\\n| Tier | Price | Notable Inclusions |\\n|------|-------|-------------------|\\n| [tier] | [price] | [key items] |\\n| [tier] | [price] | [key items] |\\n\\n## Key Takeaway\\n\\n[2-3 sentences: what makes this competitor notable, where they're strong, where they're weak]\\n```\\n\\n---\\n\\n## Summary Comparison Table\\n\\nUse after profiling all competitors to create a side-by-side view.\\n\\n```markdown\\n# Competitive Landscape Summary\\n\\n**Generated**: [date]\\n**Your product**: [name]\\n**Competitors profiled**: [count]\\n\\n## Side-by-Side Comparison\\n\\n| Dimension | [Your Product] | [Competitor 1] | [Competitor 2] | [Competitor 3] |\\n|-----------|---------------|----------------|----------------|----------------|\\n| **Tagline** | [yours] | [theirs] | [theirs] | [theirs] |\\n| **Target audience** | [yours] | [theirs] | [theirs] | [theirs] |\\n| **Positioning** | [angle] | [angle] | [angle] | [angle] |\\n| **Starting price** | $[X]/mo | $[X]/mo | $[X]/mo | $[X]/mo |\\n| **Free tier** | [yes/no] | [yes/no] | [yes/no] | [yes/no] |\\n| **Domain rank** | [score] | [score] | [score] | [score] |\\n| **Est. organic traffic** | [number] | [number] | [number] | [number] |\\n| **Referring domains** | [count] | [count] | [count] | [count] |\\n| **G2 rating** | [score] | [score] | [score] | [score] |\\n| **Key strength** | [one-liner] | [one-liner] | [one-liner] | [one-liner] |\\n| **Key weakness** | [one-liner] | [one-liner] | [one-liner] | [one-liner] |\\n```\\n\\n---\\n\\n## Positioning Map\\n\\nVisual representation of where competitors sit along two key dimensions. Choose the two axes most relevant to your market.\\n\\n### Common Axis Pairs\\n\\n| Market Type | X-Axis | Y-Axis |\\n|-------------|--------|--------|\\n| SaaS tools | Simple → Complex | Cheap → Expensive |\\n| Developer tools | Low-code → Code-first | Individual → Team |\\n| B2B platforms | SMB-focused → Enterprise-focused | Point solution → Platform |\\n| Content tools | Template-driven → Custom | Self-serve → Managed |\\n\\n### Format\\n\\n```markdown\\n## Positioning Map\\n\\n**Axes**: [X-axis label] vs. [Y-axis label]\\n\\n [Y-axis high label]\\n │\\n │\\n [Competitor A] │ [Competitor B]\\n │\\n ───────────────────────┼───────────────────────\\n [X-axis low] │ [X-axis high]\\n │\\n [Your Product] │ [Competitor C]\\n │\\n [Y-axis low label]\\n\\n### Interpretation\\n- [1-2 sentences about what the map reveals]\\n- [where the whitespace / opportunity is]\\n```\\n\\n---\\n\\n## Competitive SWOT\\n\\nPer-competitor SWOT relative to your product.\\n\\n```markdown\\n## SWOT: [Competitor] vs. [Your Product]\\n\\n### Strengths (theirs vs. ours)\\n- [Where they genuinely outperform us — be honest]\\n\\n### Weaknesses (theirs vs. ours)\\n- [Where they fall short compared to us — with evidence]\\n\\n### Opportunities (for us)\\n- [Gaps in their offering we can exploit]\\n- [Segments they're ignoring]\\n- [Messaging angles they're missing]\\n\\n### Threats (from them)\\n- [Areas where they're improving fast]\\n- [Features they're building that overlap with us]\\n- [Market moves that could shift perception]\\n```\\n\\n---\\n\\n## Profile Update Changelog\\n\\nAppend to the bottom of any profile when updating it.\\n\\n```markdown\\n---\\n\\n## Change Log\\n\\n| Date | What Changed | Source |\\n|------|-------------|--------|\\n| [date] | Pricing increased from $X to $Y | Pricing page re-scrape |\\n| [date] | Launched [feature] | Changelog scrape |\\n| [date] | Domain rank changed from X to Y | DataForSEO re-pull |\\n| [date] | Added [integration] | Integrations page re-scrape |\\n```\\n\"},\n {\"skill\":\"competitor-profiling\",\"ref\":\"tool-reference\",\"body\":\"# MCP Tool Reference for Competitor Profiling\\n\\nQuick reference for the Firecrawl and DataForSEO MCP tools used in competitor profiling.\\n\\n## Contents\\n- Firecrawl Tools (site scraping)\\n- DataForSEO Tools (SEO & market data)\\n- Recommended Execution Order\\n- Error Handling\\n\\n---\\n\\n## Firecrawl Tools\\n\\n### firecrawl_map\\n**Purpose**: Discover all URLs on a competitor's site to identify key pages.\\n**When to use**: First step for every competitor — before scraping individual pages.\\n**Key output**: List of URLs with their page types/paths.\\n**Tip**: Look for paths containing `/pricing`, `/features`, `/about`, `/customers`, `/integrations`, `/blog`, `/changelog`.\\n\\n### firecrawl_scrape\\n**Purpose**: Extract content from a single page as clean markdown.\\n**When to use**: After mapping, scrape each key page individually.\\n**Key output**: Page content in markdown format — headlines, body text, structured data.\\n**Tip**: Scrape homepage first — it reveals positioning, audience, and social proof in one shot.\\n\\n### firecrawl_search\\n**Purpose**: Search the web for specific content about a competitor.\\n**When to use**: Finding review pages, press coverage, or competitor mentions not on their own site.\\n**Example queries**:\\n- `\\\"[Competitor Name]\\\" site:g2.com`\\n- `\\\"[Competitor Name]\\\" review`\\n- `\\\"[Competitor Name]\\\" funding OR raised`\\n\\n### firecrawl_crawl\\n**Purpose**: Crawl multiple pages from a site in one operation.\\n**When to use**: Deep profiles where you want to analyze many pages (e.g., all feature pages, all blog posts). More expensive — use selectively.\\n**Tip**: Set page limits to avoid crawling entire sites. Target specific URL patterns.\\n\\n### firecrawl_extract\\n**Purpose**: Extract structured data from a page using a schema.\\n**When to use**: When you need specific data points in a consistent format (e.g., pricing tier details, feature lists).\\n**Tip**: Define a clear schema for what you want extracted — more reliable than parsing raw markdown.\\n\\n---\\n\\n## DataForSEO MCP Tools\\n\\n### Domain-Level Intelligence\\n\\n#### backlinks_summary\\n**Purpose**: Get domain authority, total backlinks, referring domains, spam score.\\n**Input**: Target domain (e.g., `competitor.com`)\\n**Key metrics**: `domain_rank`, `total_backlinks`, `referring_domains`, `backlinks_spam_score`\\n\\n#### backlinks_referring_domains\\n**Purpose**: List top referring domains — shows where their link equity comes from.\\n**Input**: Target domain + limit\\n**Key metrics**: Per-domain: `rank`, `backlinks`, `domain` name\\n\\n#### dataforseo_labs_google_domain_rank_overview\\n**Purpose**: Organic search overview — traffic, keywords, traffic value.\\n**Input**: Target domain\\n**Key metrics**: `organic_count` (keywords), `organic_traffic` (estimated monthly), `organic_cost` (traffic value in $)\\n\\n#### dataforseo_labs_google_ranked_keywords\\n**Purpose**: What keywords a domain ranks for, with positions.\\n**Input**: Target domain\\n**Key metrics**: Per-keyword: `keyword`, `position`, `search_volume`, `url` (ranking page)\\n**Tip**: Sort by traffic to find their highest-value keywords.\\n\\n#### dataforseo_labs_google_keywords_for_site\\n**Purpose**: Keywords relevant to a domain — broader than ranked keywords, includes opportunities.\\n**Input**: Target domain\\n**Key metrics**: `keyword`, `search_volume`, `competition`, `cpc`\\n\\n### Competitive Analysis\\n\\n#### dataforseo_labs_google_competitors_domain\\n**Purpose**: Find a domain's closest organic competitors by keyword overlap.\\n**Input**: Target domain\\n**Key metrics**: `domain`, `avg_position`, `intersections` (shared keywords), `full_domain_rank`\\n**Tip**: May reveal competitors the user hasn't considered.\\n\\n#### dataforseo_labs_google_domain_intersection\\n**Purpose**: Find keywords where two domains both rank — shows direct competition.\\n**Input**: Two target domains\\n**Key metrics**: `keyword`, position for each domain, `search_volume`\\n**Tip**: Use this to compare the user's domain vs. each competitor.\\n\\n#### dataforseo_labs_google_relevant_pages\\n**Purpose**: Find a domain's most important pages by organic traffic.\\n**Input**: Target domain\\n**Key metrics**: `page`, `metrics` (traffic, keywords per page)\\n**Tip**: Reveals their content strategy — which pages drive the most value.\\n\\n### Technology Detection\\n\\n#### domain_analytics_technologies_domain_technologies\\n**Purpose**: Detect the technology stack a domain uses.\\n**Input**: Target domain\\n**Key metrics**: Technologies grouped by category (CMS, analytics, marketing, payments, etc.)\\n\\n### Backlink Deep Dive\\n\\n#### backlinks_backlinks\\n**Purpose**: List individual backlinks to a domain.\\n**Input**: Target domain + limit\\n**Key metrics**: `url_from`, `url_to`, `anchor`, `domain_from_rank`, `is_new`\\n\\n#### backlinks_bulk_ranks\\n**Purpose**: Compare domain ranks across multiple domains at once.\\n**Input**: Array of target domains\\n**Key metrics**: `domain_rank` per domain\\n**Tip**: Use this for the summary comparison table.\\n\\n---\\n\\n## Recommended Execution Order\\n\\n### Quick Scan (per competitor)\\n\\n```\\n1. firecrawl_map → get site URLs\\n2. In parallel:\\n a. firecrawl_scrape → homepage\\n b. firecrawl_scrape → pricing page\\n c. dataforseo_labs_google_domain_rank_overview → organic metrics\\n d. backlinks_summary → domain authority\\n3. Synthesize into abbreviated profile\\n```\\n\\n### Deep Profile (per competitor)\\n\\n```\\n1. firecrawl_map → get site URLs\\n2. In parallel (batch 1 — scraping):\\n a. firecrawl_scrape → homepage\\n b. firecrawl_scrape → pricing page\\n c. firecrawl_scrape → features page(s)\\n d. firecrawl_scrape → about page\\n e. firecrawl_scrape → customers/case studies page\\n f. firecrawl_scrape → integrations page\\n3. In parallel (batch 2 — SEO data):\\n a. dataforseo_labs_google_domain_rank_overview\\n b. dataforseo_labs_google_ranked_keywords\\n c. backlinks_summary\\n d. backlinks_referring_domains\\n e. dataforseo_labs_google_relevant_pages\\n f. dataforseo_labs_google_competitors_domain\\n4. In parallel (batch 3 — optional extras):\\n a. domain_analytics_technologies_domain_technologies\\n b. firecrawl_search → G2/Capterra reviews\\n c. dataforseo_labs_google_domain_intersection (vs. user's domain)\\n5. Synthesize into full profile\\n```\\n\\n### Multi-Competitor (3+ competitors)\\n\\n```\\n1. Map all competitor sites in parallel\\n2. Scrape all homepages in parallel, then pricing pages in parallel\\n3. Pull domain_rank_overview for all in parallel\\n4. Pull backlinks_bulk_ranks for all at once\\n5. Build profiles in sequence (synthesis requires focus)\\n6. Build summary comparison last\\n```\\n\\n---\\n\\n## Error Handling\\n\\n| Issue | Action |\\n|-------|--------|\\n| Firecrawl scrape returns empty/blocked | Try with `firecrawl_browser_create` for JS-heavy sites |\\n| Pricing page not found in map | Search for `/pricing`, `/plans`, `/packages` — some sites use different paths |\\n| DataForSEO returns no data for domain | Domain may be too new or too small — note \\\"insufficient data\\\" in profile |\\n| Rate limits hit | Space out requests; prioritize highest-value data first |\\n| Review page scraping blocked | Use `firecrawl_search` to find cached or alternative review sources |\\n\"},\n {\"skill\":\"competitors\",\"ref\":\"content-architecture\",\"body\":\"# Content Architecture for Competitor Pages\\n\\nHow to structure and maintain competitor data for scalable comparison pages.\\n\\n## Contents\\n- Centralized Competitor Data\\n- Competitor Data Template\\n- Your Product Data\\n- Page Generation\\n- Index Page Structure (alternatives index, vs comparisons index, index page best practices)\\n- Footer Navigation\\n\\n## Centralized Competitor Data\\n\\nCreate a single source of truth for each competitor:\\n\\n```\\ncompetitor_data/\\n├── notion.md\\n├── airtable.md\\n├── monday.md\\n└── ...\\n```\\n\\n---\\n\\n## Competitor Data Template\\n\\nPer competitor, document:\\n\\n```yaml\\nname: Notion\\nwebsite: notion.so\\ntagline: \\\"The all-in-one workspace\\\"\\nfounded: 2016\\nheadquarters: San Francisco\\n\\n# Positioning\\nprimary_use_case: \\\"docs + light databases\\\"\\ntarget_audience: \\\"teams wanting flexible workspace\\\"\\nmarket_position: \\\"premium, feature-rich\\\"\\n\\n# Pricing\\npricing_model: per-seat\\nfree_tier: true\\nfree_tier_limits: \\\"limited blocks, 1 user\\\"\\nstarter_price: $8/user/month\\nbusiness_price: $15/user/month\\nenterprise: custom\\n\\n# Features (rate 1-5 or describe)\\nfeatures:\\n documents: 5\\n databases: 4\\n project_management: 3\\n collaboration: 4\\n integrations: 3\\n mobile_app: 3\\n offline_mode: 2\\n api: 4\\n\\n# Strengths (be honest)\\nstrengths:\\n - Extremely flexible and customizable\\n - Beautiful, modern interface\\n - Strong template ecosystem\\n - Active community\\n\\n# Weaknesses (be fair)\\nweaknesses:\\n - Can be slow with large databases\\n - Learning curve for advanced features\\n - Limited automations compared to dedicated tools\\n - Offline mode is limited\\n\\n# Best for\\nbest_for:\\n - Teams wanting all-in-one workspace\\n - Content-heavy workflows\\n - Documentation-first teams\\n - Startups and small teams\\n\\n# Not ideal for\\nnot_ideal_for:\\n - Complex project management needs\\n - Large databases (1000s of rows)\\n - Teams needing robust offline\\n - Enterprise with strict compliance\\n\\n# Common complaints (from reviews)\\ncommon_complaints:\\n - \\\"Gets slow with lots of content\\\"\\n - \\\"Hard to find things as workspace grows\\\"\\n - \\\"Mobile app is clunky\\\"\\n\\n# Migration notes\\nmigration_from:\\n difficulty: medium\\n data_export: \\\"Markdown, CSV, HTML\\\"\\n what_transfers: \\\"Pages, databases\\\"\\n what_doesnt: \\\"Automations, integrations setup\\\"\\n time_estimate: \\\"1-3 days for small team\\\"\\n```\\n\\n---\\n\\n## Your Product Data\\n\\nSame structure for yourself—be honest:\\n\\n```yaml\\nname: [Your Product]\\n# ... same fields\\n\\nstrengths:\\n - [Your real strengths]\\n\\nweaknesses:\\n - [Your honest weaknesses]\\n\\nbest_for:\\n - [Your ideal customers]\\n\\nnot_ideal_for:\\n - [Who should use something else]\\n```\\n\\n---\\n\\n## Page Generation\\n\\nEach page pulls from centralized data:\\n\\n- **[Competitor] Alternative page**: Pulls competitor data + your data\\n- **[Competitor] Alternatives page**: Pulls competitor data + your data + other alternatives\\n- **You vs [Competitor] page**: Pulls your data + competitor data\\n- **[A] vs [B] page**: Pulls both competitor data + your data\\n\\n**Benefits**:\\n- Update competitor pricing once, updates everywhere\\n- Add new feature comparison once, appears on all pages\\n- Consistent accuracy across pages\\n- Easier to maintain at scale\\n\\n---\\n\\n## Index Page Structure\\n\\n### Alternatives Index\\n\\n**URL**: `/alternatives` or `/alternatives/index`\\n\\n**Purpose**: Lists all \\\"[Competitor] Alternative\\\" pages\\n\\n**Page structure**:\\n1. Headline: \\\"[Your Product] as an Alternative\\\"\\n2. Brief intro on why people switch to you\\n3. List of all alternative pages with:\\n - Competitor name/logo\\n - One-line summary of key differentiator vs. that competitor\\n - Link to full comparison\\n4. Common reasons people switch (aggregated)\\n5. CTA\\n\\n**Example**:\\n```markdown\\n## Explore [Your Product] as an Alternative\\n\\nLooking to switch? See how [Your Product] compares to the tools you're evaluating:\\n\\n- **[Notion Alternative](/alternatives/notion)** — Better for teams who need [X]\\n- **[Airtable Alternative](/alternatives/airtable)** — Better for teams who need [Y]\\n- **[Monday Alternative](/alternatives/monday)** — Better for teams who need [Z]\\n```\\n\\n---\\n\\n### Vs Comparisons Index\\n\\n**URL**: `/vs` or `/compare`\\n\\n**Purpose**: Lists all \\\"You vs [Competitor]\\\" and \\\"[A] vs [B]\\\" pages\\n\\n**Page structure**:\\n1. Headline: \\\"Compare [Your Product]\\\"\\n2. Section: \\\"[Your Product] vs Competitors\\\" — list of direct comparisons\\n3. Section: \\\"Head-to-Head Comparisons\\\" — list of [A] vs [B] pages\\n4. Brief methodology note\\n5. CTA\\n\\n---\\n\\n### Index Page Best Practices\\n\\n**Keep them updated**: When you add a new comparison page, add it to the relevant index.\\n\\n**Internal linking**:\\n- Link from index → individual pages\\n- Link from individual pages → back to index\\n- Cross-link between related comparisons\\n\\n**SEO value**:\\n- Index pages can rank for broad terms like \\\"project management tool comparisons\\\"\\n- Pass link equity to individual comparison pages\\n- Help search engines discover all comparison content\\n\\n**Sorting options**:\\n- By popularity (search volume)\\n- Alphabetically\\n- By category/use case\\n- By date added (show freshness)\\n\\n**Include on index pages**:\\n- Last updated date for credibility\\n- Number of pages/comparisons available\\n- Quick filters if you have many comparisons\\n\\n---\\n\\n## Footer Navigation\\n\\nThe site footer appears on all marketing pages, making it a powerful internal linking opportunity for competitor pages.\\n\\n### Option 1: Link to Index Pages (Minimum)\\n\\nAt minimum, add links to your comparison index pages in the footer:\\n\\n```\\nFooter\\n├── Compare\\n│ ├── Alternatives → /alternatives\\n│ └── Comparisons → /vs\\n```\\n\\nThis ensures every marketing page passes link equity to your comparison content hub.\\n\\n### Option 2: Footer Columns by Format (Recommended for SEO)\\n\\nFor stronger internal linking, create dedicated footer columns for each format you've built, linking directly to your top competitors:\\n\\n```\\nFooter\\n├── [Product] vs ├── Alternatives to ├── Compare\\n│ ├── vs Notion │ ├── Notion Alternative │ ├── Notion vs Airtable\\n│ ├── vs Airtable │ ├── Airtable Alternative │ ├── Monday vs Asana\\n│ ├── vs Monday │ ├── Monday Alternative │ ├── Notion vs Monday\\n│ ├── vs Asana │ ├── Asana Alternative │ ├── ...\\n│ ├── vs Clickup │ ├── Clickup Alternative │ └── View all →\\n│ ├── ... │ ├── ... │\\n│ └── View all → │ └── View all → │\\n```\\n\\n**Guidelines**:\\n- Include up to 8 links per column (top competitors by search volume)\\n- Add \\\"View all\\\" link to the full index page\\n- Only create columns for formats you've actually built pages for\\n- Prioritize competitors with highest search volume\\n\\n### Why Footer Links Matter\\n\\n1. **Sitewide distribution**: Footer links appear on every marketing page, passing link equity from your entire site to comparison content\\n2. **Crawl efficiency**: Search engines discover all comparison pages quickly\\n3. **User discovery**: Visitors evaluating your product can easily find comparisons\\n4. **Competitive positioning**: Signals to search engines that you're a key player in the space\\n\\n### Implementation Notes\\n\\n- Update footer when adding new high-priority comparison pages\\n- Keep footer clean—don't list every comparison, just the top ones\\n- Match column headers to your URL structure (e.g., \\\"vs\\\" column → `/vs/` URLs)\\n- Consider mobile: columns may stack, so order by priority\\n\"},\n {\"skill\":\"competitors\",\"ref\":\"templates\",\"body\":\"# Section Templates for Competitor Pages\\n\\nReady-to-use templates for each section of competitor comparison pages.\\n\\n## Contents\\n- TL;DR Summary\\n- Paragraph Comparison (Not Just Tables)\\n- Feature Comparison Section\\n- Pricing Comparison Section\\n- Service & Support Comparison\\n- Who It's For Section\\n- Migration Section\\n- Social Proof Section\\n- Comparison Table Best Practices (beyond checkmarks, organize by category, include ratings where useful)\\n\\n## TL;DR Summary\\n\\nStart every page with a quick summary for scanners:\\n\\n```markdown\\n**TL;DR**: [Competitor] excels at [strength] but struggles with [weakness].\\n[Your product] is built for [your focus], offering [key differentiator].\\nChoose [Competitor] if [their ideal use case]. Choose [You] if [your ideal use case].\\n```\\n\\n---\\n\\n## Paragraph Comparison (Not Just Tables)\\n\\nFor each major dimension, write a paragraph:\\n\\n```markdown\\n## Features\\n\\n[Competitor] offers [description of their feature approach].\\nTheir strength is [specific strength], which works well for [use case].\\nHowever, [limitation] can be challenging for [user type].\\n\\n[Your product] takes a different approach with [your approach].\\nThis means [benefit], though [honest tradeoff].\\nTeams who [specific need] often find this more effective.\\n```\\n\\n---\\n\\n## Feature Comparison Section\\n\\nGo beyond checkmarks:\\n\\n```markdown\\n## Feature Comparison\\n\\n### [Feature Category]\\n\\n**[Competitor]**: [2-3 sentence description of how they handle this]\\n- Strengths: [specific]\\n- Limitations: [specific]\\n\\n**[Your product]**: [2-3 sentence description]\\n- Strengths: [specific]\\n- Limitations: [specific]\\n\\n**Bottom line**: Choose [Competitor] if [scenario]. Choose [You] if [scenario].\\n```\\n\\n---\\n\\n## Pricing Comparison Section\\n\\n```markdown\\n## Pricing\\n\\n| | [Competitor] | [Your Product] |\\n|---|---|---|\\n| Free tier | [Details] | [Details] |\\n| Starting price | $X/user/mo | $X/user/mo |\\n| Business tier | $X/user/mo | $X/user/mo |\\n| Enterprise | Custom | Custom |\\n\\n**What's included**: [Competitor]'s $X plan includes [features], while\\n[Your product]'s $X plan includes [features].\\n\\n**Total cost consideration**: Beyond per-seat pricing, consider [hidden costs,\\nadd-ons, implementation]. [Competitor] charges extra for [X], while\\n[Your product] includes [Y] in base pricing.\\n\\n**Value comparison**: For a 10-person team, [Competitor] costs approximately\\n$X/year while [Your product] costs $Y/year, with [key differences in what you get].\\n```\\n\\n---\\n\\n## Service & Support Comparison\\n\\n```markdown\\n## Service & Support\\n\\n| | [Competitor] | [Your Product] |\\n|---|---|---|\\n| Documentation | [Quality assessment] | [Quality assessment] |\\n| Response time | [SLA if known] | [Your SLA] |\\n| Support channels | [List] | [List] |\\n| Onboarding | [What they offer] | [What you offer] |\\n| CSM included | [At what tier] | [At what tier] |\\n\\n**Support quality**: Based on [G2/Capterra reviews, your research],\\n[Competitor] support is described as [assessment]. Common feedback includes\\n[quotes or themes].\\n\\n[Your product] offers [your support approach]. [Specific differentiator like\\nresponse time, dedicated CSM, implementation help].\\n```\\n\\n---\\n\\n## Who It's For Section\\n\\n```markdown\\n## Who Should Choose [Competitor]\\n\\n[Competitor] is the right choice if:\\n- [Specific use case or need]\\n- [Team type or size]\\n- [Workflow or requirement]\\n- [Budget or priority]\\n\\n**Ideal [Competitor] customer**: [Persona description in 1-2 sentences]\\n\\n## Who Should Choose [Your Product]\\n\\n[Your product] is built for teams who:\\n- [Specific use case or need]\\n- [Team type or size]\\n- [Workflow or requirement]\\n- [Priority or value]\\n\\n**Ideal [Your product] customer**: [Persona description in 1-2 sentences]\\n```\\n\\n---\\n\\n## Migration Section\\n\\n```markdown\\n## Switching from [Competitor]\\n\\n### What transfers\\n- [Data type]: [How easily, any caveats]\\n- [Data type]: [How easily, any caveats]\\n\\n### What needs reconfiguration\\n- [Thing]: [Why and effort level]\\n- [Thing]: [Why and effort level]\\n\\n### Migration support\\n\\nWe offer [migration support details]:\\n- [Free data import tool / white-glove migration]\\n- [Documentation / migration guide]\\n- [Timeline expectation]\\n- [Support during transition]\\n\\n### What customers say about switching\\n\\n> \\\"[Quote from customer who switched]\\\"\\n> — [Name], [Role] at [Company]\\n```\\n\\n---\\n\\n## Social Proof Section\\n\\nFocus on switchers:\\n\\n```markdown\\n## What Customers Say\\n\\n### Switched from [Competitor]\\n\\n> \\\"[Specific quote about why they switched and outcome]\\\"\\n> — [Name], [Role] at [Company]\\n\\n> \\\"[Another quote]\\\"\\n> — [Name], [Role] at [Company]\\n\\n### Results after switching\\n- [Company] saw [specific result]\\n- [Company] reduced [metric] by [amount]\\n```\\n\\n---\\n\\n## Comparison Table Best Practices\\n\\n### Beyond Checkmarks\\n\\nInstead of:\\n| Feature | You | Competitor |\\n|---------|-----|-----------|\\n| Feature A | ✓ | ✓ |\\n| Feature B | ✓ | ✗ |\\n\\nDo this:\\n| Feature | You | Competitor |\\n|---------|-----|-----------|\\n| Feature A | Full support with [detail] | Basic support, [limitation] |\\n| Feature B | [Specific capability] | Not available |\\n\\n### Organize by Category\\n\\nGroup features into meaningful categories:\\n- Core functionality\\n- Collaboration\\n- Integrations\\n- Security & compliance\\n- Support & service\\n\\n### Include Ratings Where Useful\\n\\n| Category | You | Competitor | Notes |\\n|----------|-----|-----------|-------|\\n| Ease of use | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | [Brief note] |\\n| Feature depth | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | [Brief note] |\\n\"}\n];\n",[],[478,801,835],"fa59002a-5d6d-11f1-9770-1607ee4eb77e","ref_3.ts","fa5900e8-5d6d-11f1-9770-1607ee4eb77e",662,["D",1780286235804],"// GENERATED by deploy/gen_skills_catalog.mjs — do not edit by hand.\nimport type { SkillRef } from \"../index.ts\";\nexport const REFS_PART_3: SkillRef[] = [\n {\"skill\":\"analytics\",\"ref\":\"gtm-implementation\",\"body\":\"# Google Tag Manager Implementation Reference\\n\\nDetailed guide for implementing tracking via Google Tag Manager.\\n\\n## Contents\\n- Container Structure (tags, triggers, variables)\\n- Naming Conventions\\n- Data Layer Patterns\\n- Common Tag Configurations (GA4 configuration tag, GA4 event tag, Facebook pixel)\\n- Preview and Debug\\n- Workspaces and Versioning\\n- Consent Management\\n- Advanced Patterns (tag sequencing, exception handling, custom JavaScript variables)\\n\\n## Container Structure\\n\\n### Tags\\n\\nTags are code snippets that execute when triggered.\\n\\n**Common tag types:**\\n- GA4 Configuration (base setup)\\n- GA4 Event (custom events)\\n- Google Ads Conversion\\n- Facebook Pixel\\n- LinkedIn Insight Tag\\n- Custom HTML (for other pixels)\\n\\n### Triggers\\n\\nTriggers define when tags fire.\\n\\n**Built-in triggers:**\\n- Page View: All Pages, DOM Ready, Window Loaded\\n- Click: All Elements, Just Links\\n- Form Submission\\n- Scroll Depth\\n- Timer\\n- Element Visibility\\n\\n**Custom triggers:**\\n- Custom Event (from dataLayer)\\n- Trigger Groups (multiple conditions)\\n\\n### Variables\\n\\nVariables capture dynamic values.\\n\\n**Built-in (enable as needed):**\\n- Click Text, Click URL, Click ID, Click Classes\\n- Page Path, Page URL, Page Hostname\\n- Referrer\\n- Form Element, Form ID\\n\\n**User-defined:**\\n- Data Layer variables\\n- JavaScript variables\\n- Lookup tables\\n- RegEx tables\\n- Constants\\n\\n---\\n\\n## Naming Conventions\\n\\n### Recommended Format\\n\\n```\\n[Type] - [Description] - [Detail]\\n\\nTags:\\nGA4 - Event - Signup Completed\\nGA4 - Config - Base Configuration\\nFB - Pixel - Page View\\nHTML - LiveChat Widget\\n\\nTriggers:\\nClick - CTA Button\\nSubmit - Contact Form\\nView - Pricing Page\\nCustom - signup_completed\\n\\nVariables:\\nDL - user_id\\nJS - Current Timestamp\\nLT - Campaign Source Map\\n```\\n\\n---\\n\\n## Data Layer Patterns\\n\\n### Basic Structure\\n\\n```javascript\\n// Initialize (in before GTM)\\nwindow.dataLayer = window.dataLayer || [];\\n\\n// Push event\\ndataLayer.push({\\n 'event': 'event_name',\\n 'property1': 'value1',\\n 'property2': 'value2'\\n});\\n```\\n\\n### Page Load Data\\n\\n```javascript\\n// Set on page load (before GTM container)\\nwindow.dataLayer = window.dataLayer || [];\\ndataLayer.push({\\n 'pageType': 'product',\\n 'contentGroup': 'products',\\n 'user': {\\n 'loggedIn': true,\\n 'userId': '12345',\\n 'userType': 'premium'\\n }\\n});\\n```\\n\\n### Form Submission\\n\\n```javascript\\ndocument.querySelector('#contact-form').addEventListener('submit', function() {\\n dataLayer.push({\\n 'event': 'form_submitted',\\n 'formName': 'contact',\\n 'formLocation': 'footer'\\n });\\n});\\n```\\n\\n### Button Click\\n\\n```javascript\\ndocument.querySelector('.cta-button').addEventListener('click', function() {\\n dataLayer.push({\\n 'event': 'cta_clicked',\\n 'ctaText': this.innerText,\\n 'ctaLocation': 'hero'\\n });\\n});\\n```\\n\\n### E-commerce Events\\n\\n```javascript\\n// Product view\\ndataLayer.push({ ecommerce: null }); // Clear previous\\ndataLayer.push({\\n 'event': 'view_item',\\n 'ecommerce': {\\n 'items': [{\\n 'item_id': 'SKU123',\\n 'item_name': 'Product Name',\\n 'price': 99.99,\\n 'item_category': 'Category',\\n 'quantity': 1\\n }]\\n }\\n});\\n\\n// Add to cart\\ndataLayer.push({ ecommerce: null });\\ndataLayer.push({\\n 'event': 'add_to_cart',\\n 'ecommerce': {\\n 'items': [{\\n 'item_id': 'SKU123',\\n 'item_name': 'Product Name',\\n 'price': 99.99,\\n 'quantity': 1\\n }]\\n }\\n});\\n\\n// Purchase\\ndataLayer.push({ ecommerce: null });\\ndataLayer.push({\\n 'event': 'purchase',\\n 'ecommerce': {\\n 'transaction_id': 'T12345',\\n 'value': 99.99,\\n 'currency': 'USD',\\n 'tax': 5.00,\\n 'shipping': 10.00,\\n 'items': [{\\n 'item_id': 'SKU123',\\n 'item_name': 'Product Name',\\n 'price': 99.99,\\n 'quantity': 1\\n }]\\n }\\n});\\n```\\n\\n---\\n\\n## Common Tag Configurations\\n\\n### GA4 Configuration Tag\\n\\n**Tag Type:** Google Analytics: GA4 Configuration\\n\\n**Settings:**\\n- Measurement ID: G-XXXXXXXX\\n- Send page view: Checked (for pageviews)\\n- User Properties: Add any user-level dimensions\\n\\n**Trigger:** All Pages\\n\\n### GA4 Event Tag\\n\\n**Tag Type:** Google Analytics: GA4 Event\\n\\n**Settings:**\\n- Configuration Tag: Select your config tag\\n- Event Name: {{DL - event_name}} or hardcode\\n- Event Parameters: Add parameters from dataLayer\\n\\n**Trigger:** Custom Event with event name match\\n\\n### Facebook Pixel - Base\\n\\n**Tag Type:** Custom HTML\\n\\n```html\\n\\n```\\n\\n**Trigger:** All Pages\\n\\n### Facebook Pixel - Event\\n\\n**Tag Type:** Custom HTML\\n\\n```html\\n\\n```\\n\\n**Trigger:** Custom Event - form_submitted\\n\\n---\\n\\n## Preview and Debug\\n\\n### Preview Mode\\n\\n1. Click \\\"Preview\\\" in GTM\\n2. Enter site URL\\n3. GTM debug panel opens at bottom\\n\\n**What to check:**\\n- Tags fired on this event\\n- Tags not fired (and why)\\n- Variables and their values\\n- Data layer contents\\n\\n### Debug Tips\\n\\n**Tag not firing:**\\n- Check trigger conditions\\n- Verify data layer push\\n- Check tag sequencing\\n\\n**Wrong variable value:**\\n- Check data layer structure\\n- Verify variable path (nested objects)\\n- Check timing (data may not exist yet)\\n\\n**Multiple firings:**\\n- Check trigger uniqueness\\n- Look for duplicate tags\\n- Check tag firing options\\n\\n---\\n\\n## Workspaces and Versioning\\n\\n### Workspaces\\n\\nUse workspaces for team collaboration:\\n- Default workspace for production\\n- Separate workspaces for large changes\\n- Merge when ready\\n\\n### Version Management\\n\\n**Best practices:**\\n- Name every version descriptively\\n- Add notes explaining changes\\n- Review changes before publish\\n- Keep production version noted\\n\\n**Version notes example:**\\n```\\nv15: Added purchase conversion tracking\\n- New tag: GA4 - Event - Purchase\\n- New trigger: Custom Event - purchase\\n- New variables: DL - transaction_id, DL - value\\n- Tested: Chrome, Safari, Mobile\\n```\\n\\n---\\n\\n## Consent Management\\n\\n### Consent Mode Integration\\n\\n```javascript\\n// Default state (before consent)\\ngtag('consent', 'default', {\\n 'analytics_storage': 'denied',\\n 'ad_storage': 'denied'\\n});\\n\\n// Update on consent\\nfunction grantConsent() {\\n gtag('consent', 'update', {\\n 'analytics_storage': 'granted',\\n 'ad_storage': 'granted'\\n });\\n}\\n```\\n\\n### GTM Consent Overview\\n\\n1. Enable Consent Overview in Admin\\n2. Configure consent for each tag\\n3. Tags respect consent state automatically\\n\\n---\\n\\n## Advanced Patterns\\n\\n### Tag Sequencing\\n\\n**Setup tags to fire in order:**\\nTag Configuration > Advanced Settings > Tag Sequencing\\n\\n**Use cases:**\\n- Config tag before event tags\\n- Pixel initialization before tracking\\n- Cleanup after conversion\\n\\n### Exception Handling\\n\\n**Trigger exceptions** - Prevent tag from firing:\\n- Exclude certain pages\\n- Exclude internal traffic\\n- Exclude during testing\\n\\n### Custom JavaScript Variables\\n\\n```javascript\\n// Get URL parameter\\nfunction() {\\n var params = new URLSearchParams(window.location.search);\\n return params.get('campaign') || '(not set)';\\n}\\n\\n// Get cookie value\\nfunction() {\\n var match = document.cookie.match('(^|;) ?user_id=([^;]*)(;|$)');\\n return match ? match[2] : null;\\n}\\n\\n// Get data from page\\nfunction() {\\n var el = document.querySelector('.product-price');\\n return el ? parseFloat(el.textContent.replace('$', '')) : 0;\\n}\\n```\\n\"},\n {\"skill\":\"aso\",\"ref\":\"apple-specs\",\"body\":\"# Apple App Store — Official Specs & Guidelines\\n\\nAll data from developer.apple.com as of March 2026.\\n\\n## Character Limits\\n\\n| Field | Limit | Indexed for Search? | Notes |\\n| ----------------------- | ---------------- | ------------------------ | -------------------------------------------------------- |\\n| App Name | 30 chars (min 2) | Yes | Must be unique; no trademarks, competitor names, pricing |\\n| Subtitle | 30 chars | Yes | No unverifiable claims |\\n| Keywords | 100 bytes | Yes (hidden) | Commas, no spaces between terms |\\n| Description | 4,000 chars | **No** | Plain text only, no HTML |\\n| Promotional Text | 170 chars | **No** (Apple confirmed) | Updatable without new version |\\n| What's New | 4,000 chars | No | Required for all versions after first |\\n| IAP Name | 35 chars | Yes | Appears in search |\\n| IAP Description | 55 chars | No | |\\n| In-App Event Name | 30 chars | Yes | Title case required |\\n| In-App Event Short Desc | 50 chars | Yes | Sentence case |\\n| In-App Event Long Desc | 120 chars | No | Sentence case |\\n\\n**Keywords field is 100 bytes, not 100 characters.** Non-Latin scripts (Arabic,\\nChinese, Japanese, Korean) use 2-3 bytes per character, reducing effective\\nkeyword count significantly.\\n\\n## Screenshot Specs\\n\\n| Device | Required? | Count | Dimensions (portrait) |\\n| ---------------- | ------------- | ----- | -------------------------- |\\n| 6.9\\\" iPhone | **Required** | 1-10 | 1260 x 2736 |\\n| 13\\\" iPad | **Required** | 1-10 | 2064 x 2752 |\\n| Mac | If applicable | 1-10 | Up to 2880 x 1800 (16:10) |\\n| Apple Watch | If applicable | 1-10 | Varies by model |\\n| Apple TV | If applicable | 1-10 | 1920 x 1080 or 3840 x 2160 |\\n| Apple Vision Pro | If applicable | 1-10 | 3840 x 2160 |\\n\\n- Formats: JPEG, PNG\\n- Apple auto-scales from required base sizes to smaller devices\\n\\n## App Preview Video Specs\\n\\n- **Count:** Up to 3 per app\\n- **Duration:** 15-30 seconds\\n- **Max file size:** 500 MB\\n- **Codecs:** H.264 (10-12 Mbps, up to 30fps) or ProRes 422 HQ\\n- **Audio:** Stereo, 256 kbps AAC or PCM, 44.1/48 kHz\\n- **Formats:** .mov, .m4v, .mp4\\n- **Behavior:** Autoplays muted on product page (iOS 11+)\\n\\n## Custom Product Pages (CPPs)\\n\\n- **Max:** 70 additional pages (plus 1 default)\\n- **Customizable:** Screenshots, promotional text, app previews, deep links (iOS 18+)\\n- **Keywords:** Each keyword combo must be unique to a single CPP\\n- **Review:** Submitted to App Review independently of app updates\\n- **Organic search:** CPPs appear in organic search results since July 2025\\n- **Performance:** +2.5 percentage points higher conversion on average vs default\\n\\n## Product Page Optimization (A/B Testing)\\n\\n- **Treatments:** Up to 3 vs original\\n- **Testable:** App icons, screenshots, app preview vid

Diff · v1015