// V2/src/app.jsx
// Tier 5 — Root React app.
// Wires:
// - ?embed=true detection (synchronous, BEFORE React mounts → no FOUC)
// - Embed-mode + dormant/activated entry-animation styles (one-time injection)
// - postMessage handshake (COLLABIQ_READY post / COLLABIQ_ACTIVATE listen)
// using window.DASHIQ.postReady() / window.DASHIQ.onActivate(cb) helpers
// - 5-step entry animation sequence on `activated` class:
// orbs bloom → chrome fade → radar spin-up → table rows stagger → evidence slide
// - Cross-module intelligence bar (refreshAllXmodBars) wired to chrome:switch CustomEvent
// - Mobile shell toggle at viewport ≤ 768px
// - mount via ReactDOM.createRoot (React 18, idempotent)
// Chrome owns the activeModule conditional render, including exploreiq →
// (kg/explorer.html iframe) for the schema explorer.
// - with useTweaks(window.__TWEAK_DEFAULTS) → CSS vars on
//
// Loaded LAST in V2/index.html. By script-execution time, on window:
// React, ReactDOM, useTweaks, TweaksPanel + tweak atoms,
// DASHIQ (postReady/onActivate/cache/preload), Chrome, ExploreIQModule,
// switchModule, MODULES, MODULE_KEYS, DEFAULT_MODULE, STATE,
// icons (HandshakeIcon/TargetIcon/MapIcon/...),
// primitives (Badge/Pill/Loader/...),
// plus per-module render functions written by Tier 4.
// No `import` / `export` statements.
(function () {
// ── Embed detection (synchronous — runs before React mounts) ────────────────
const isEmbed = new URLSearchParams(location.search).has('embed');
if (isEmbed) document.documentElement.classList.add('embed-mode');
// ── One-time style injection: embed CSS + dormant/activated keyframes ───────
// We inject from JS rather than amend tokens.css/base.css (already committed)
// so all entry-animation knobs live alongside the JS that drives them.
const STYLE_ID = 'collabiq-app-styles';
if (!document.getElementById(STYLE_ID)) {
const style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = [
// Embed-mode visual contract
'.embed-mode body { background: transparent !important; }',
'.embed-mode .atmo { opacity: 0.4; }',
'.embed-mode #chrome-nav,',
'.embed-mode .chrome-topbar { display: none !important; }',
// Dormant state — pre-activation: elements rendered but visually hushed
'html:not(.activated) .atmo-orb { opacity: 0; }',
'html:not(.activated) .chrome-topbar,',
'html:not(.activated) .chrome-sidebar { opacity: 0; }',
'html:not(.activated) #panel-strategy .sonar-glass-disc-wrap {',
' transform: scale(0.96);',
' opacity: 0.6;',
'}',
'html:not(.activated) #panel-strategy table.iq-table tbody tr { opacity: 0; }',
'html:not(.activated) #strat-evidence-panel { opacity: 0; }',
// Activated state — entry animation sequence
// 1) Orbs bloom (600ms)
'html.activated .atmo-orb {',
' animation: app-orb-bloom 600ms var(--ease-out, ease-out) forwards;',
'}',
// 2) Chrome fades (400ms after 400ms delay)
'html.activated .chrome-topbar,',
'html.activated .chrome-sidebar {',
' animation: app-chrome-fade 400ms 400ms var(--ease-out, ease-out) forwards;',
'}',
// 3) PartnerIQ radar spin-up (800ms after 600ms delay)
'html.activated #panel-strategy .sonar-glass-disc-wrap {',
' animation: app-radar-spinup 800ms 600ms var(--ease-out, ease-out) forwards;',
'}',
// 4) Table rows stagger (50ms per row, kick-off 800ms in)
'html.activated #panel-strategy table.iq-table tbody tr {',
' animation: app-row-stagger 200ms calc(800ms + (var(--row-i, 0) * 50ms)) var(--ease-out, ease-out) forwards;',
'}',
// 5) Evidence panel slide (500ms after 1100ms delay)
'html.activated #strat-evidence-panel {',
' animation: app-panel-slide 500ms 1100ms var(--ease-out, ease-out) forwards;',
'}',
// Keyframes
'@keyframes app-orb-bloom { from { opacity: 0; } to { opacity: 1; } }',
'@keyframes app-chrome-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }',
'@keyframes app-radar-spinup { from { transform: scale(0.96) rotate(-6deg); opacity: 0.6; } to { transform: scale(1) rotate(0); opacity: 1; } }',
'@keyframes app-row-stagger { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }',
'@keyframes app-panel-slide { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }',
// Cross-Intelligence island — standalone parity
// (/workspace/cross-intelligence-bar-standalone.html). Glass capsule
// with 24px radius, gradient background, inset highlights, glow on
// hover, animated module-glyph icons (ws-bracket / ciq-ring /
// piq-shake) instead of plain colored dots.
//
// UR-015 fix: explicitly override the static .xmod-island rule in
// components.css:951 (display:flex; flex-wrap:wrap; padding:s-2 s-3)
// which was making the bar EXTREMELY fat by stacking padding ON TOP
// of the segments' fixed 38px height AND letting segments wrap to a
// second line on narrow viewports. Pin to inline-flex, remove all
// padding (segments self-pad), force flex-wrap:nowrap, and lock
// height to the segment row so the bar can never grow vertically.
'.xmod-island {',
' display: inline-flex !important;',
' align-items: center;',
' flex-wrap: nowrap !important;',
' margin: var(--s-2, 8px) 0 0;',
' padding: 0 !important;',
' height: 38px;',
' max-height: 38px;',
' border-radius: 24px;',
' overflow: hidden;',
' position: relative;',
' background: linear-gradient(180deg, var(--g-frosted), var(--g-ground));',
' border: 1px solid var(--g-border-strong);',
' box-shadow: var(--sh-2), inset 0 1px 0 var(--g-inset-top), inset 0 -1px 0 var(--g-inset-bottom);',
' backdrop-filter: blur(24px) saturate(160%);',
' -webkit-backdrop-filter: blur(24px) saturate(160%);',
' transition: box-shadow var(--t-fast) var(--ease-out);',
' align-self: flex-start;',
'}',
'.xmod-island:hover {',
' box-shadow: var(--sh-2), var(--sh-glow-teal), inset 0 1px 0 var(--g-inset-top), inset 0 -1px 0 var(--g-inset-bottom);',
'}',
'.xmod-island-segments {',
' display: flex;',
' align-items: stretch;',
' flex-wrap: nowrap;',
' height: 38px;',
' position: relative;',
'}',
'.xmod-island-segments::before {',
" content: 'Cross-Intelligence';",
' display: flex;',
' align-items: center;',
' height: 38px;',
' padding: 0 8px 0 14px;',
' font-family: var(--font-mono);',
' font-size: 8.5px;',
' font-weight: 700;',
' letter-spacing: 0.5px;',
' text-transform: uppercase;',
' white-space: nowrap;',
' flex-shrink: 0;',
' pointer-events: none;',
'}',
'[data-theme="light"] .xmod-island-segments::before { color: #475569; }',
'[data-theme="dark"] .xmod-island-segments::before { color: rgba(226,232,240,0.5); }',
'.xmod-island-sep {',
' width: 1px;',
' height: 18px;',
' align-self: center;',
' flex-shrink: 0;',
'}',
'[data-theme="light"] .xmod-island-sep { background: rgba(0,0,0,0.1); }',
'[data-theme="dark"] .xmod-island-sep { background: rgba(255,255,255,0.12); }',
'.xmod-island-seg {',
' display: flex;',
' align-items: center;',
' gap: 6px;',
' height: 38px;',
' padding: 0 12px;',
' border: 0;',
' background: transparent;',
' color: var(--text);',
' cursor: pointer;',
' white-space: nowrap;',
' transition: background var(--t-fast) var(--ease-out);',
'}',
'.xmod-island-seg:hover { background: var(--g-focus); }',
'.xmod-island-seg:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }',
'.xmod-island-seg.active {',
' background: linear-gradient(180deg, var(--g-focus), var(--g-ground));',
' box-shadow: var(--sh-glow-teal);',
'}',
// Glyph dot is now a 22x22 SVG container (standalone parity)
'.xmod-island-seg-dot {',
' width: 22px; height: 22px;',
' display: flex; align-items: center; justify-content: center;',
' flex-shrink: 0;',
'}',
'.xmod-island-seg-dot svg { width: 22px; height: 22px; overflow: visible; }',
'.xmod-island-seg-name {',
' font-family: var(--font-body);',
' font-size: 11px;',
' font-weight: 700;',
' white-space: nowrap;',
'}',
'[data-theme="light"] .xmod-island-seg-name { color: #0f172a; }',
'[data-theme="dark"] .xmod-island-seg-name { color: #e2e8f0; }',
'.xmod-island-seg-ctx {',
' display: inline-block;',
' font-family: var(--font-mono);',
' font-size: 9px;',
' max-width: 160px;',
' overflow: hidden;',
' text-overflow: ellipsis;',
' white-space: nowrap;',
' margin-left: 2px;',
' opacity: 0.85;',
'}',
'[data-theme="light"] .xmod-island-seg-ctx { color: #475569; }',
'[data-theme="dark"] .xmod-island-seg-ctx { color: rgba(226,232,240,0.6); }',
// ── Module-glyph SVG tokens inside xmod island — override sidebar.css defaults ──
// sidebar.css sets .ciq-sweep { opacity: 0 } and .ws-scan-line { opacity: 0 } globally.
// We must explicitly re-enable them in the xmod context with higher specificity.
// NOT-DONE-6D V1 parity:
// (1) --icon-muted-strong is defined in sidebar.css only inside
// .sidebar-nav. The cross-intel bar lives outside the sidebar,
// so the token resolved to empty → ciq-ring stroke was "none" →
// rings were INVISIBLE regardless of opacity. Define the token
// scoped to .xmod-island-seg here (per-theme), matching the
// sidebar's rgba values.
// (2) Bump opacity so the rings are visibly defined at 22px display
// size (V1 standalone reference shows clearly drawn rings; this
// restores the "circular scope housing" CTK called out).
'[data-theme="dark"] .xmod-island-seg { --icon-muted-strong: rgba(255,255,255,0.7); --icon-muted: rgba(255,255,255,0.4); }',
'[data-theme="light"] .xmod-island-seg { --icon-muted-strong: rgba(15,23,42,0.7); --icon-muted: rgba(15,23,42,0.4); }',
'.xmod-island-seg .ciq-ring { fill: none; stroke: var(--icon-muted-strong); opacity: 0.9; }',
'.xmod-island-seg .ciq-axis { stroke: var(--icon-muted-strong); opacity: 0.35; }',
'.xmod-island-seg .ciq-center { fill: var(--teal); }',
'.xmod-island-seg .ciq-blip { fill: var(--teal); opacity: 0.85; }',
// CTK iter2: removed `transform-box: fill-box; transform-origin: 50% 50%`
// which made the rotation origin resolve to the BBOX center of the sweep
// group (beam+wedge) rather than the SVG view-box center. The sweep
// group's bbox is asymmetric (wedge extends left-and-up from center to
// ~22,18), so rotating around its bbox center shifted the visual sweep
// off-center within the scope rings. V1 (cross-intelligence-bar-
// standalone.html L396) has NO transform-box override; the inline
// style="transform-origin:50px 50px" on the
// group (app.jsx L339) resolves against the default view-box → exact
// 50,50 viewBox center. Restoring V1 behaviour by removing the
// override here.
// CTK 2026-05-12: sidebar.css globally sets `.ciq-sweep { transform-box:
// fill-box }` for the sidebar glyph. That fill-box cascaded into the
// xmod-island context too, which made the inline `transform-origin:
// 50px 50px` measure from the 's tight bounding-box top-left
// (~22,9 in viewBox units) instead of the viewBox center (50,50) —
// visible as a sweep rotating off-center to the upper-right of the
// CompeteIQ icon. Force `transform-box: view-box` here (with the
// !important needed to win against the more-specific sidebar rule)
// so the inline 50px,50px resolves against the SVG viewBox = center.
'.xmod-island-seg .ciq-sweep { transform-box: view-box !important; transform-origin: 50% 50% !important; opacity: 1 !important; animation: xmod-ciq-spin 2.4s linear infinite; }',
'.xmod-island-seg .ciq-beam { stroke: var(--teal); stroke-linecap: round; }',
'.xmod-island-seg .ciq-wedge { fill: var(--teal); }',
// WS glyph
// NOT-DONE-6D V1 parity: bump ws-inner + ws-dot opacity so the
// interior structure (filled rect + 3 dots) is visibly defined inside
// the corner brackets at 22px display size — V1 has a clear "dotted
// block inside brackets" pattern; V2 previously showed only brackets
// with a barely-visible interior (the "two faint dashes" CTK noted).
'.xmod-island-seg .ws-bracket { stroke: var(--icon-muted-strong); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; }',
'.xmod-island-seg .ws-inner { fill: var(--teal); opacity: 0.42; }',
'.xmod-island-seg .ws-scan-line { stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; opacity: 1 !important; animation: xmod-ws-scan 2.8s ease-in-out infinite; }',
'.xmod-island-seg .ws-dot { fill: var(--teal); opacity: 0.95; }',
// PIQ glyph
'.xmod-island-seg .piq-shake { fill: var(--icon-muted-strong); transform-box: fill-box; transform-origin: 50% 65%; }',
'.xmod-island-seg .piq-ring-track { fill: none; stroke: var(--icon-muted); stroke-width: 2; opacity: 0.3; }',
'.xmod-island-seg .piq-ring-prog { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 56.5; stroke-dashoffset: 20; opacity: 0.8; }',
'.xmod-island-seg .piq-fill { opacity: 0; }',
'.xmod-island-seg .piq-check { opacity: 0; }',
'.xmod-island-seg .piq-pulse { opacity: 0; }',
'@keyframes xmod-ciq-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }',
'@keyframes xmod-ws-scan { 0%,100% { opacity: 0; transform: translateY(-16px); } 15% { opacity: 0.8; } 50% { opacity: 0.9; transform: translateY(16px); } 85% { opacity: 0.8; } }',
].join('\n');
document.head.appendChild(style);
}
// ── Cross-module intelligence bar ──────────────────────────────────────────
// For each module, find its #xmod-island-wrap-{key} mount and populate with
// contextual pills linking to the OTHER two modules. Modules that don't have
// the wrap (compete/opp use their own internal bars) are gracefully skipped.
const XMOD_KEYS = ['strategy', 'compete', 'opp'];
function _esc(s) {
if (s == null) return '';
return String(s).replace(/'/g, "\\'").replace(/"/g, '"');
}
function _displayOrg(orgName) {
if (!orgName) return '';
return (typeof window.fixOrgName === 'function')
? window.fixOrgName(orgName)
: String(orgName);
}
function _displayTA(ta) {
if (!ta) return '';
return (typeof window.formatTA === 'function')
? window.formatTA(ta)
: String(ta);
}
function _truncate(s, n) {
const str = String(s || '');
return str.length > n ? str.slice(0, n - 1) + '…' : str;
}
function _pickFirstTA(state) {
// Try every plausible source for "the TA the user is currently exploring".
// UR-007 fix: read state.compete_anchor (the unified Phase 4 anchor model
// CompeteIQ uses), not just the legacy state.comp_ta. When the user
// anchors CompeteIQ on a TA, compete_anchor = {type:'TA', value:'ONCOLOGY'}
// — the cross-intel bar should propagate that value to WhitespaceIQ.
const ca = state.compete_anchor || null;
const compTAFromAnchor = (ca && ca.type === 'TA' && ca.value) ? ca.value : '';
const candidates = [
state.opp_ta,
state.comp_ta,
compTAFromAnchor,
state.strat_ta,
];
for (let i = 0; i < candidates.length; i++) {
if (candidates[i]) return candidates[i];
}
// Fallback — peek at strat_data row 0 if present.
const row0 = (state.strat_data && state.strat_data[0]) || null;
if (row0 && row0.top_shared_tas) {
const first = String(row0.top_shared_tas).split('|').filter(Boolean)[0];
if (first) return first;
}
return '';
}
function _pickAnchorOrg(state) {
// UR-007 fix: include CompeteIQ's drug-profile org context
// (comp_drug_org is set when the user opens a Drug Profile drawer).
// Without this, the CompeteIQ → PartnerIQ cross-intel button never
// rendered when the user was deep in a drug profile.
return state.strat_anchor_org
|| state.comp_selected_org
|| state.comp_drug_org
|| '';
}
// Module-glyph SVG markup (string form for innerHTML insertion).
// Mirrors PIQGlyph / CIQGlyph / WSGlyph in chrome.jsx — same paths /
// class hooks (.ciq-ring / .ws-bracket / .piq-shake) so the same CSS
// rules (defined just above + sidebar.css) drive coloring + animation.
const _GLYPH_SVG = {
strategy: ''
+ '',
// NOT-DONE-6D V1 parity: 3 concentric rings (r=42, r=30, r=18) to match
// V1 standalone reference (cross-intelligence-bar-standalone.html line
// 525). Previously only 2 rings + low inline opacity made the icon
// read as a "small fragment" — the spinning sweep dominated and the
// ring scope housing disappeared. Inline opacity bumped from
// 0.18/0.14 → 0.55/0.50/0.45 so rings remain visible after stacking
// with the CSS .ciq-ring rule.
compete: ''
+ '',
opp: ''
+ '',
};
// Build segment HTML for a single cross-module link.
// Standalone parity (cross-intelligence-bar-standalone.html): each
// .xmod-island-seg now contains an animated SVG module glyph (replaces
// the previous flat colored dot) followed by the module name and the
// contextual payload (truncated to 28 chars).
function _pillHTML(target, labelText, valueText, onclickJs) {
const safeValue = _truncate(valueText, 28);
const safeLabel = String(labelText || '').replace(/[<>"']/g, '');
const safeOnclick = String(onclickJs || '').replace(/"/g, '"');
const glyph = _GLYPH_SVG[target] || '';
return ''
+ '';
}
// Build the segment HTML for one module's xmod bar.
// UR-007 fix: ALWAYS render the two cross-module buttons, even when the
// current page has no org/TA context. Previously the buttons silently
// disappeared when there was no anchor — a user toggling modules from
// a fresh load would see an empty bar with just the "Cross-Intelligence"
// label, which read as "broken." Now the buttons are always present;
// when there's no payload to forward, clicking switches to the target
// module's default (no anchor mutation).
function _xmodSegmentsFor(currentKey, state) {
const pills = [];
const anchorOrg = _pickAnchorOrg(state);
const currentTA = _pickFirstTA(state);
// Helper — emit a single pill. When ctx is empty, render a subtle
// "open" placeholder and call switchModule without state mutation.
function pill(target, label, ctxValue, displayTransform, onclickWithCtx) {
const hasCtx = ctxValue && String(ctxValue).trim();
const display = hasCtx
? (typeof displayTransform === 'function' ? displayTransform(ctxValue) : ctxValue)
: 'open';
const onclick = hasCtx
? onclickWithCtx(_esc(ctxValue))
: "switchModule('" + target + "',true)";
pills.push(_pillHTML(target, label, display, onclick));
}
if (currentKey === 'strategy') {
// From PartnerIQ → CompeteIQ (anchor org), → WhitespaceIQ (current TA)
pill('compete', 'CompeteIQ', anchorOrg, _displayOrg,
function(orgEsc) { return "STATE.comp_selected_org='" + orgEsc + "';STATE._xmod_org=true;switchModule('compete',true)"; });
pill('opp', 'WhiteSpace IQ', currentTA, _displayTA,
function(taEsc) { return "STATE.opp_ta='" + taEsc + "';switchModule('opp',true)"; });
} else if (currentKey === 'compete') {
// From CompeteIQ → PartnerIQ (selected org), → WhitespaceIQ (current TA)
pill('strategy', 'PartnerIQ', anchorOrg, _displayOrg,
function(orgEsc) { return "STATE.strat_anchor_org='" + orgEsc + "';STATE.strat_subview='partners';switchModule('strategy',true)"; });
pill('opp', 'WhiteSpace IQ', currentTA, _displayTA,
function(taEsc) { return "STATE.opp_ta='" + taEsc + "';switchModule('opp',true)"; });
} else if (currentKey === 'opp') {
// From WhitespaceIQ → CompeteIQ (selected disease/TA), → PartnerIQ (top org)
pill('compete', 'CompeteIQ', currentTA, _displayTA,
function(taEsc) { return "STATE.comp_ta='" + taEsc + "';switchModule('compete',true)"; });
pill('strategy', 'PartnerIQ', anchorOrg, _displayOrg,
function(orgEsc) { return "STATE.strat_anchor_org='" + orgEsc + "';STATE.strat_subview='partners';switchModule('strategy',true)"; });
}
if (pills.length === 0) return '';
// V1 shape (CTK Q4): xmod-island.expanded > xmod-island-segments (which
// carries the "Cross-Intelligence" ::before label) > xmod-island-seg items
// separated by xmod-island-sep dividers.
const sep = '';
return ''
+ '
'
+ pills.join(sep)
+ '