// os-section.jsx — BuildQ Project OS accordion centerpiece.
// Loads 2nd. Exports: window.OSSection
const OS_LAYERS = [
{
n: "01",
name: "Large Language Models",
hint: "Model-agnostic foundation",
desc: "BuildQ is model-agnostic, selecting the best model for each task. The better the models get, the more ambitious the work we can take on.",
caps: [
"Frontier model routing per task",
"Specialized models for code, math, vision",
"Continuous model evaluation",
"Provider redundancy and failover",
"Inference cost optimization"]
},
{
n: "02",
name: "Agentic Harness",
hint: "Turns general LLMs into infra agents",
desc: "The orchestration engine that gives BuildQ agents the context, tools, and memory to work like infrastructure specialists.\n\n",
caps: [
"Infrastructure-specific reasoning",
"Multi-step task planning",
"Tool use and verification loops",
"Domain-aware prompting",
"Workflow orchestration"]
},
{
n: "03",
name: "Data & Integrations",
hint: "Lives inside the project, not alongside it",
desc: "Native integrations with data rooms, DMS, project schedules, utility correspondence, interconnection portals, leases, and financial models. BuildQ lives inside the project, not alongside it.",
caps: [
"Data rooms and DMS",
"Project schedules and milestones",
"Utility correspondence and portals",
"Lease and title systems",
"Financial models and reporting tools"]
},
{
n: "04",
name: "Context & Knowledge",
hint: "600+ projects, 20+ GW of precedent",
desc: "Project playbooks, transaction precedents, regulatory frameworks, and matter history across every asset class \u2014 CRE, data centers, and energy \u2014 layered into every agent action. Teams inherit the collective experience of 600+ projects and 20+ GW.",
caps: [
"Project playbooks across asset classes",
"Transaction and matter precedents",
"Regulatory and permitting frameworks",
"CRE, data center, and energy expertise",
"Continuously updated knowledge base"]
},
{
n: "05",
name: "Expert Network",
hint: "AI leverage. Human judgment.",
desc: "In-house validators with deep domain experience and a curated network of specialist partners \u2014 attorneys, EPCs, permitting, interconnection, tax credits, real estate counsel, MEP engineers \u2014 activated when projects hit blockers. AI does the leverage. Humans do the judgment.",
caps: [
"In-house validators",
"Energy and real estate attorneys",
"EPCs and MEP engineers",
"Permitting and interconnection specialists",
"Tax credit and incentive advisors"]
},
{
n: "06",
name: "Products & Interfaces",
hint: "Built from the ground up, for infrastructure",
desc: "Purpose-built surfaces for every project workflow: diligence, execution, mobilization, and delivery. Built from the ground up, for infrastructure.",
caps: [
"Diligence and risk surfaces",
"Execution control towers",
"Mobilization and partner workflows",
"Delivery and reporting views",
"Custom views per project type"]
},
{
n: "07",
name: "Security & Governance",
hint: "Built in, not bolted on",
desc: "The foundation that makes Project OS enterprise-ready. Cross-project isolation, audit trails on every AI inference, role-based access, no training on customer data. Built into every layer, not bolted on.",
caps: [
"Cross-project isolation",
"Audit trails on every AI inference",
"Role-based access controls",
"No training on customer data",
"SOC 2 (in progress) \u00b7 GDPR"]
}];
/* Layer thumbnails — small abstract diagrams in monochrome + accent.
Each is 280x180, designed to feel like a quiet, technical illustration. */
function LayerThumbnail({ n }) {
const stroke = "var(--fg-2)";
const dim = "var(--fg-3)";
const accent = "var(--accent)";
const common = { width: "100%", viewBox: "0 0 280 180", style: { display: "block" } };
if (n === "01") {
// Documents flowing into a node
return (
);
}
if (n === "02") {
// Graph nodes — extracted entities
return (
);
}
if (n === "03") {
// AI output + human review
return (
);
}
if (n === "04") {
// Radar / spider chart
const cx = 140,cy = 90;
const dims = ["Power", "Permits", "Equip.", "Capital", "Exec.", "COD"];
const angles = dims.map((_, i) => -Math.PI / 2 + i * 2 * Math.PI / dims.length);
const ring = (r) => angles.map((a) => [cx + Math.cos(a) * r, cy + Math.sin(a) * r]);
const poly = (vals) => vals.map((v, i) => {
const [x, y] = [cx + Math.cos(angles[i]) * v, cy + Math.sin(angles[i]) * v];
return `${x},${y}`;
}).join(" ");
return (
);
}
if (n === "05") {
// Network with one node activating
return (
);
}
if (n === "06") {
// Bar / chart dashboard
return (
);
}
if (n === "07") {
// Audit trail / shield
return (
);
}
return null;
}
/* Tiny inline icons (60x28) — quick visual marker per layer. */
function LayerIcon({ n, active }) {
const c = active ? "var(--accent)" : "var(--fg-3)";
const dim = "var(--border-strong)";
const common = { width: 60, height: 28, viewBox: "0 0 60 28", style: { display: "block" } };
if (n === "01") {
// Stacked model variants
return (
);
}
if (n === "02") {
// Branching nodes
return (
);
}
if (n === "03") {
// Data flow pipes
return (
);
}
if (n === "04") {
// Concentric rings
return (
);
}
if (n === "05") {
// Network of nodes
return (
);
}
if (n === "06") {
// Window frames
return (
);
}
if (n === "07") {
// Shield with key
return (
);
}
return null;
}
/* ───────── Architecture stack ─────────
Replaces the old 3D plates: a single full-width stack of horizontal
bands, each labeled with its layer number, name, hint, and glyph.
Active band expands inline with description + capability list. */
function ArchitectureStack({ layers, active, setActive, revealed }) {
const activeIdx = layers.findIndex((l) => l.n === active);
return (
{layers.map((layer, i) => {
const isActive = i === activeIdx;
const delay = i * 70;
return (