/*
ArchitectOrbit — single-Architect homepage diagram (v60.1).
Redesign goals:
• Eliminate the dizzying full-ring rotation (previous version's
orbit-counter spinning text was nauseating).
• Promote the Architect node to a hexagon that matches the logo,
with subtle inner motion suggesting "machinery at work".
• Show the LLM as a first-class participant — Architect leans on
it, the diagram should make that obvious.
• Tools stay STATIC — no orbiting. A subtle "in use" highlight
cycles through them one at a time so the eye sees activity
without having to chase a moving target.
• Subagents render as small hexagons beneath Architect, fading in
and out on a calm cadence.
• Substrate hex-mesh remains the backdrop, anchored at Architect.
All animation is slow (3–8s cycles) and additive — not perpetual
rotation. Total motion budget kept low so the page reads as a
diagram first, animation second.
*/
const ORBIT_W = 820;
const ORBIT_H = 680;
const ARCHITECT = { cx: 410, cy: 360, r: 70 }; // hex circumradius
// LLM lives just outside the hex's upper-right corner, attached by a
// short dashed tether — visually reads as "Architect consults the LLM"
// rather than "another agent floating overhead". Small enough to stay
// subordinate to the Architect node.
const LLM = { cx: 410 + 86, cy: 360 - 72, r: 24 };
const SUBSTRATE = { cx: 410, cy: 600, r: 26, label: 'autoarchitect-code', short: 'AC' };
const TOOL_HIGHLIGHT_INTERVAL_MS = 1800;
const SUBAGENT_INTERVAL_MS = 4500;
const SUBAGENT_LIFETIME_MS = 6000;
const SUBAGENT_MAX_VISIBLE = 2;
// Representative tool families, expanded to show the platform's range:
// file ops, shell, web (search + fetch), build/deploy, runtime hooks
// (useApi/useConnection), LLM-as-tool, archetypes, agents, kanban,
// connections/cron. Each chip carries a SHORT readable label that fits
// inside the chip body, plus its longer canonical name as the tooltip.
const ORBIT_TOOLS = [
{ name: 'read_file', label: 'read' },
{ name: 'write_file', label: 'write' },
{ name: 'edit_file', label: 'edit' },
{ name: 'bash', label: 'bash' },
{ name: 'grep', label: 'grep' },
{ name: 'web_search', label: 'web search' },
{ name: 'web_fetch', label: 'web fetch' },
{ name: 'useApi', label: 'useApi' },
{ name: 'useConnection', label: 'useConnection' },
{ name: 'llm_extract', label: 'extract' },
{ name: 'find_archetype', label: 'archetype' },
{ name: 'deploy_workspace',label: 'deploy' },
{ name: 'run_smoke', label: 'smoke' },
{ name: 'visual_check', label: 'visual' },
{ name: 'spawn_agent', label: 'subagent' },
{ name: 'schedule_action', label: 'cron' },
];
// Moat capabilities — the four distinct platform layers that wrap
// Architect. Larger hexagons than tool chips, placed beyond the tool
// ring at cardinal positions. Each is its own first-class system, not
// a tool: connections persist credentials, plugins inject runtime
// code, cron fires on schedule, subagents are long-lived peers. The
// presence of these four is what makes AutoArchitect a platform vs.
// "another app generator" — visible right on the homepage diagram.
const MOAT_RING_R = 290;
const MOAT_HEX_R = 32;
// Placed at the four quadrant corners so we don't fight the LLM badge
// (upper-right of Architect) or the substrate node (below). Top-left
// gets Connections (the most-asked-about layer); top-right Plugins
// (visually closest to Architect's "what gets installed" surface); the
// bottom row gets Cron + Subagents (runtime-time concerns).
const MOAT_NODES = [
{ id: 'connections', label: 'Connections', sub: 'oauth · vault', angleDeg: -135, accent: 'var(--accent)' },
{ id: 'plugins', label: 'Plugins', sub: 'pre-vetted', angleDeg: -45, accent: 'var(--accent-2)' },
{ id: 'subagents', label: 'Subagents', sub: 'parallel', angleDeg: 135, accent: 'var(--accent-2)' },
{ id: 'cron', label: 'Cron', sub: 'scheduled', angleDeg: 45, accent: 'var(--accent-3)' },
];
function moatNodePositions(architectCx, architectCy) {
return MOAT_NODES.map((n) => {
const a = (n.angleDeg * Math.PI) / 180;
return {
...n,
x: architectCx + MOAT_RING_R * Math.cos(a),
y: architectCy + MOAT_RING_R * Math.sin(a),
};
});
}
/* ── Substrate hex mesh (unchanged) ──────────────────────────────── */
const MESH_HEX_SIZE = 16;
const MESH_FADE_INNER = 90;
const MESH_FADE_OUTER = 380;
const MESH_MAX_OP = 0.16;
const MESH_ACTIVE_FRACTION = 0.05;
function buildMesh(width, height, ax, ay) {
const s = MESH_HEX_SIZE;
const w = Math.sqrt(3) * s;
const h = 1.5 * s;
const cells = [];
let row = 0;
for (let cy = -s; cy <= height + s; cy += h, row++) {
const offset = (row % 2 === 0) ? 0 : w / 2;
for (let cx = -s + offset; cx <= width + s; cx += w) {
const dx = cx - ax;
const dy = cy - ay;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist > MESH_FADE_OUTER) continue;
const t = dist <= MESH_FADE_INNER
? 1
: 1 - (dist - MESH_FADE_INNER) / (MESH_FADE_OUTER - MESH_FADE_INNER);
const op = MESH_MAX_OP * Math.max(0, Math.min(1, t));
cells.push({ cx, cy, op });
}
}
return cells;
}
function hexPath(cx, cy, s) {
// Pointy-top hex (matches mesh cells).
const pts = [];
for (let i = 0; i < 6; i++) {
const a = Math.PI / 6 + (i * Math.PI) / 3;
pts.push(`${cx + s * Math.cos(a)},${cy + s * Math.sin(a)}`);
}
return pts.join(' ');
}
function pointyTopHexPath(cx, cy, s) {
// Pointy-top hex — matches the AutoArchitect logo (top apex visible).
// First vertex at top, then 60° increments clockwise.
const pts = [];
for (let i = 0; i < 6; i++) {
const a = -Math.PI / 2 + (i * Math.PI) / 3;
pts.push(`${cx + s * Math.cos(a)},${cy + s * Math.sin(a)}`);
}
return pts.join(' ');
}
/* Static arc of tool chips placed around the Architect hex. The chips
never rotate — instead one is highlighted at a time on a slow timer
to suggest "Architect is using this tool right now". */
const TOOL_RING_R = 200;
// Deterministic small jitter so the ring of tools doesn't read as a
// perfect mechanical wheel — feels more like a constellation. Same
// seed every render so chips don't twitch on each repaint.
function jitter(seed, mag) {
// Simple LCG-derived value in [-1, 1].
const x = Math.sin(seed * 12.9898) * 43758.5453;
return (x - Math.floor(x) - 0.5) * 2 * mag;
}
function toolChipPositions() {
const n = ORBIT_TOOLS.length;
return ORBIT_TOOLS.map((tool, i) => {
const a = (i / n) * 2 * Math.PI - Math.PI / 2;
// Drift each chip ±18° angularly + ±18px radially. Keeps the rough
// ring shape but breaks the "wheel of pegs" feel.
const angleJitter = jitter(i + 1, 0.32);
const radialJitter = jitter(i + 7, 18);
const a2 = a + angleJitter * 0.16;
const r2 = TOOL_RING_R + radialJitter;
return {
...tool,
x: ARCHITECT.cx + r2 * Math.cos(a2),
y: ARCHITECT.cy + r2 * Math.sin(a2),
};
});
}
const ArchitectOrbit = ({ width = ORBIT_W, height = ORBIT_H }) => {
const meshCells = React.useMemo(
() => buildMesh(width, height, ARCHITECT.cx, ARCHITECT.cy),
[width, height],
);
const meshActive = React.useMemo(() => {
const idx = [];
for (let i = 0; i < meshCells.length; i++) {
if (Math.random() < MESH_ACTIVE_FRACTION) idx.push(i);
}
return new Set(idx);
}, [meshCells]);
const toolChips = React.useMemo(toolChipPositions, []);
// Cycle the "in use" highlight through tool chips one at a time.
const [activeTool, setActiveTool] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => {
setActiveTool((i) => (i + 1) % ORBIT_TOOLS.length);
}, TOOL_HIGHLIGHT_INTERVAL_MS);
return () => clearInterval(id);
}, []);
// Ephemeral subagents — small hexagons emerging below Architect.
const slotAngles = React.useMemo(
() => Array.from({ length: 4 }, (_, i) => Math.PI * 0.25 + (i / 3) * Math.PI * 0.5),
[],
);
const [subagents, setSubagents] = React.useState([]);
const subId = React.useRef(0);
React.useEffect(() => {
let mounted = true;
let timer = null;
const fire = () => {
if (!mounted) return;
setSubagents((prev) => {
const taken = new Set(prev.map((s) => s.slot));
const free = slotAngles.map((_, i) => i).filter((i) => !taken.has(i));
if (free.length === 0) return prev;
const slot = free[Math.floor(Math.random() * free.length)];
const id = ++subId.current;
return [...prev, { id, slot, born: Date.now() }];
});
timer = setTimeout(fire, SUBAGENT_INTERVAL_MS);
};
timer = setTimeout(fire, 1200);
const sweep = setInterval(() => {
if (!mounted) return;
const now = Date.now();
setSubagents((prev) =>
prev.filter((s) => now - s.born < SUBAGENT_LIFETIME_MS).slice(-SUBAGENT_MAX_VISIBLE),
);
}, 800);
return () => { mounted = false; if (timer) clearTimeout(timer); clearInterval(sweep); };
}, [slotAngles]);
// Activity ticker
const [tickIdx, setTickIdx] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setTickIdx((i) => (i + 1) % 3), 2200);
return () => clearInterval(id);
}, []);
const ticks = ['todo', 'in_progress', 'done'];
const SUBAGENT_RING_R = 130;
const subagentPositions = subagents.map((s) => {
const a = slotAngles[s.slot];
return {
...s,
x: ARCHITECT.cx + SUBAGENT_RING_R * Math.cos(a),
y: ARCHITECT.cy + SUBAGENT_RING_R * Math.sin(a),
};
});
return (
);
};
window.ArchitectOrbit = ArchitectOrbit;
// Backwards-compat alias — hero.jsx historically rendered .
window.OrchestrationDiagram = ArchitectOrbit;