/* =============================================================
KAIROS·1 — Structural Constraint Chamber · topology
=============================================================
The Sequence Chamber is a chain. The Constraint Observatory
is a pressure field. The Structural Constraint Chamber is a
layered architecture diagram — process / decision / information
/ resource — with structural elements distributed inside their
layer and dependencies crossing vertically.
Phenomenology: dense, architectural, schematic. The chamber
should feel like reading a building's structural plan.
============================================================= */
const { useMemo: stUseMemo, useState: stUseState } = React;
const ST_W = 1000;
const ST_H = 700;
// Layer definitions — fixed y-centers and boundaries.
const ST_LAYERS = [
{ id: 'process', name: 'Process & Workflow', y: 130, top: 60, bottom: 205 },
{ id: 'decision', name: 'Decision Architecture', y: 280, top: 215, bottom: 355 },
{ id: 'information', name: 'Information & Tooling', y: 430, top: 365, bottom: 505 },
{ id: 'resource', name: 'Resource Flow & Org Design', y: 580, top: 515, bottom: 660 },
];
const ST_ELEMENT_W = 90;
const ST_ELEMENT_H = 36;
function stTrim(s, n) {
s = String(s || '').trim();
if (s.length <= n) return s;
return s.slice(0, n - 1).trim() + '…';
}
function stLayerFrictionBand(f) {
if (f >= 0.7) return 'break';
if (f >= 0.45) return 'low';
if (f >= 0.2) return 'mid';
return 'high';
}
// Layout: distribute elements horizontally within their layer.
function stLayout(elements) {
const byLayer = { process: [], decision: [], information: [], resource: [] };
elements.forEach(e => {
if (byLayer[e.layer]) byLayer[e.layer].push(e);
});
const positioned = [];
ST_LAYERS.forEach(layer => {
const list = byLayer[layer.id];
const n = list.length;
if (n === 0) return;
const leftMargin = 140;
const rightMargin = 880;
list.forEach((e, i) => {
const x = n === 1 ? 500 : leftMargin + (i / (n - 1)) * (rightMargin - leftMargin);
positioned.push({ e, x, y: layer.y, layer });
});
});
return positioned;
}
function StructuralTopology({ session, history }) {
const elements = session.elements || [];
const dependencies = session.dependencies || [];
const [hoveredId, setHoveredId] = stUseState(null);
const positions = stUseMemo(() => stLayout(elements), [elements]);
const byId = stUseMemo(() => {
const m = {};
positions.forEach(p => { m[p.e.id] = p; });
return m;
}, [positions]);
// Landmarks from prior structural cycles — distributed along the
// top edge (above the process layer) so they don't overlap any
// active layer. The right edge could also hold them later.
const landmarks = stUseMemo(() => {
if (!window.kairos || !window.kairos.landmarks) return [];
const raw = window.kairos.landmarks.extract(history || [], 'structural');
const slots = [
{ x: 500, y: 30 },
{ x: 200, y: 30 },
{ x: 800, y: 30 },
{ x: 350, y: 30 },
{ x: 650, y: 30 },
{ x: 60, y: 380 }, // edge of side
];
return raw.slice(0, slots.length).map((lm, i) => ({
...lm,
x: slots[i].x,
y: slots[i].y,
}));
}, [history]);
// Lineage threads — attention-revealed
const lineages = stUseMemo(() => {
if (!window.kairos || !window.kairos.landmarks || landmarks.length === 0) return [];
const matches = [];
elements.forEach(e => {
const p = byId[e.id];
if (!p || !e.label) return;
const hits = window.kairos.landmarks.findLineage(e.label, landmarks);
hits.forEach(h => {
matches.push({
id: e.id + '-' + h.landmark.id,
from_element_id: e.id,
from_x: p.x, from_y: p.y,
to_x: h.landmark.x, to_y: h.landmark.y,
score: h.score,
});
});
});
return matches;
}, [elements, landmarks, byId]);
const hasElements = elements.length > 0;
if (!hasElements && landmarks.length === 0) {
return (
— The architecture is unread
Four layers wait beneath this chamber: process, decision, information,
resource flow. Name one structural element that suppresses execution,
and the architecture begins to surface.