LOVE IS. Run this, fork it, use it, and share it.
import { useState, useRef, useEffect } from "react";
// βββ CONFIG βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
const SHEET_ID = "1BhZ24t56pkRA3LXK6Wcr0nxqYp0_phN5RVdLHhFjIGQ";
const SHEET_URL = `
https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json`;
// Google Forms submission β to get entry IDs: open the form, right-click any
// field, Inspect Element, find input name="entry.XXXXXXXXX"
const FORM_SUBMIT_URL = "
https://docs.google.com/forms/d/e/1FAIpQLSdtbq3LRYc2bLsQRg8JDzGUYgoruFVe4JRguPsokBn006gx8w/formResponse";
const FORM_ENTRIES = {
structure: "entry.REPLACE_0",
tool: "entry.REPLACE_1",
identified: "entry.REPLACE_2",
action: "entry.REPLACE_3",
outcome: "entry.REPLACE_4",
detail: "entry.REPLACE_5",
experience: "entry.REPLACE_6",
};
// βββ SYSTEM PROMPTS βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
const GRADIENT_PROMPT = `You are The Gradient β first instrument of The Open Ring.
A structure is anything with fixed and variable elements in relation. Information only flows honestly when the reference point is genuinely held β meaning that falsifying it would be both costly and detectable. If either condition fails, the reference point only appears stable. It is actually drifting.
## PRE-CHECK
Apply these questions in order. Report each result.
IMMUNITY QUESTIONS (Y/N):
1. Can education about this structure be suppressed by a single actor?
2. Does distribution require a controlled channel?
3. Can an incumbent concentrate finance to block it?
4. Is legitimacy dependent on external validation?
COST-DETECTION TEST (critical):
For the apparent fixed element:
- Would falsifying it be expensive?
- Would any falsification be visible?
If the answer to either is no, the fixed element is only nominally stable. Name this explicitly.
STRATUM QUESTION:
Does this structure have separable layers that could be in different fixed/variable states simultaneously?
## IF CAPTURE IMMUNE
All four immunity questions N, stratum N, cost-detection strongly above threshold β Output "CAPTURE IMMUNE". Stop.
## IF MULTI-STRATUM
Run full diagnostic per stratum. Add STRATUM CONVERGENCE section.
## DIAGNOSTIC
Q1 β WHAT IS FIXED? Name precisely.
Q2 β WHAT VARIES? Name precisely.
Q3 β WHO BEARS COST OF VARIANCE? User, incumbent, both?
Q4 β WHO DECIDED? Intentional defense or accretion capture?
VERDICT: INVERSION CONFIRMED / INVERSION NOT CONFIRMED / APPROACHING IMMUNE
NATURAL PRESSURE: What does this want to become if unblocked?
MAINTENANCE ENERGY: What is being spent to hold the current arrangement in place?
SUPERSATURATION POINT: Where has pressure built longest without release?
SEED CRYSTAL: The minimum intervention that allows the correct structure to emerge.
## FORMAT
Direct and precise. No filler. Name complicating factors honestly. End with a one-sentence opportunity signal β a specific action the reader could take.`;
const SIGNALCHAIN_PROMPT = `You are SignalChain β second instrument of The Open Ring.
The user has already run The Gradient. Their Gradient output is provided as context. Now locate exactly where in the information chain information stops flowing.
Four sequential nodes. Evaluate each in order. Stop at the first confirmed break β all subsequent nodes become INDETERMINATE.
SIGNAL β Is genuine information about the variable element actually being produced and reaching anyone?
CHANNEL β Is there a path for that information to travel that isn't owned or filtered by the incumbent?
GROUND β Is the reference point genuinely held β meaning the cost of falsifying it exceeds the benefit of doing so, and any falsification would be visible?
REACH β Is the reference point held locally only, or is it distributed widely enough that no single actor can collapse it?
## OUTPUT FORMAT
SIGNAL β INTACT / BROKEN
[One sentence]
CHANNEL β INTACT / BROKEN / INDETERMINATE
[One sentence]
GROUND β INTACT / BROKEN / INDETERMINATE
[One sentence β explicitly state whether the cost of falsifying the reference exceeds the benefit]
REACH β LOCAL / GLOBAL / INDETERMINATE
[One sentence]
BREAK POINT β [first broken node]
[Two sentences: what's failing and why]
INTERVENTION β [minimum action for that specific node]
[Two sentences: specific minimum action, not general strategy]
CHAIN STATE β [symbolic summary]
## FORMAT
Precise, direct. No filler. Never name the four pillars (education/distribution/finance/legitimacy) β only signal/channel/ground/reach.`;
// βββ STEPS βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
const STEPS = [
{ id: "input", label: "Input", color: "#D4CFC4" },
{ id: "gradient", label: "Gradient", color: "#D4B580" },
{ id: "signalchain", label: "SignalChain", color: "#60B5E5" },
{ id: "act", label: "Act", color: "#C0B8A8" },
{ id: "field", label: "Field", color: "#70D090" },
{ id: "records", label: "Records", color: "#B0A0D0" },
];
const OUTCOME_OPTIONS = [
"Moved toward correct orientation",
"No change",
"Unexpected result",
"Too early to tell",
];
const EXPERIENCE_OPTIONS = [
"Less than 1 year",
"1β5 years",
"5β15 years",
"15+ years",
];
const OUTCOME_COLORS = {
"Moved toward correct orientation": "#70D090",
"No change": "#9B9588",
"Unexpected result": "#E5C868",
"Too early to tell": "#60B5E5",
};
// βββ FIELD DATA βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
const parseSheetData = (raw) => {
try {
const json = JSON.parse(raw.substring(47).slice(0, -2));
return json.table.rows.map(row => ({
structure: row.c[0]?.v || "",
tool: row.c[1]?.v || "",
identified: row.c[2]?.v || "",
action: row.c[3]?.v || "",
outcome: row.c[4]?.v || "",
detail: row.c[5]?.v || "",
experience: row.c[6]?.v || "",
})).filter(r => r.structure);
} catch { return []; }
};
// βββ COPY BUTTON βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
function CopyButton({ text }) {
const [copied, setCopied] = useState(false);
const confirm = () => { setCopied(true); setTimeout(() => setCopied(false), 1800); };
const fallback = () => {
const el = document.createElement("textarea");
el.value = text;
el.style.cssText = "position:fixed;opacity:0;pointer-events:none";
document.body.appendChild(el);
el.focus(); el.select();
try { document.execCommand("copy"); confirm(); } catch {}
document.body.removeChild(el);
};
const handle = () => {
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(confirm).catch(fallback);
} else { fallback(); }
};
return (
<button onClick={handle} style={{
fontFamily: "'JetBrains Mono', monospace", fontSize: "0.52rem",
letterSpacing: "0.15em", padding: "0.2rem 0.55rem", border: "1px solid",
borderColor: copied ? "#70D090" : "#2A2620",
color: copied ? "#70D090" : "#4A4438",
background: "transparent", cursor: "pointer", transition: "all 0.15s",
}}>
{copied ? "COPIED" : "COPY"}
</button>
);
}
// βββ USER GUIDE ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
function UserGuide() {
const [open, setOpen] = useState(false);
return (
<div style={{ marginBottom: "1.75rem", border: "1px solid #1E1A12", background: "#0C0A07" }}>
<button
onClick={() => setOpen(o => !o)}
style={{
width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between",
padding: "0.85rem 1.2rem", background: "transparent", border: "none", cursor: "pointer",
fontFamily: "'JetBrains Mono', monospace",
}}
>
<span style={{ fontSize: "0.56rem", letterSpacing: "0.2em", color: "#5A5440" }}>HOW THIS TOOL WORKS</span>
<span style={{ fontSize: "0.7rem", color: "#3A3628", transform: open ? "rotate(180deg)" : "none", transition: "transform 0.2s" }}>βΎ</span>
</button>
{open && (
<div style={{ padding: "0 1.2rem 1.4rem", display: "flex", flexDirection: "column", gap: "1.4rem" }}>
<div>
<div style={{ fontSize: "0.52rem", letterSpacing: "0.2em", color: "#4A4438", marginBottom: "0.6rem" }}>WHAT YOU ARE GOING TO GET</div>
<p style={{ fontSize: "0.7rem", color: "#8A8270", lineHeight: 1.8 }}>
This tool runs a structured diagnostic on any market, institution, product format, or practice you bring to it.
You describe what you know. The tool tells you whether the arrangement is inverted β meaning the things that are
locked in place benefit the wrong people β and if so, what the minimum action is to change it.
</p>
<p style={{ fontSize: "0.7rem", color: "#8A8270", lineHeight: 1.8, marginTop: "0.6rem" }}>
The output has two parts. <strong style={{ color: "#C8B890", fontWeight: 500 }}>The Gradient</strong> identifies
whether an inversion is present and names the seed crystal β the smallest intervention that allows the correct
structure to emerge. <strong style={{ color: "#8AB8D8", fontWeight: 500 }}>SignalChain</strong> then finds exactly
where in the information chain the problem is located, and what specifically to do about it.
<strong style={{ color: "#90C8A0", fontWeight: 500 }}> Field</strong> records what happens when you act β turning
a diagnosis into tested evidence.
</p>
<p style={{ fontSize: "0.7rem", color: "#6A6050", lineHeight: 1.8, marginTop: "0.6rem", fontStyle: "italic" }}>
The most important thing to look for: the Verdict, and the Seed Crystal. Everything else is context for those two.
</p>
</div>
<div style={{ borderTop: "1px solid #1E1A12", paddingTop: "1.2rem" }}>
<div style={{ fontSize: "0.52rem", letterSpacing: "0.2em", color: "#4A4438", marginBottom: "0.6rem" }}>THE CORE IDEA β FIXED AND VARIABLE</div>
<p style={{ fontSize: "0.7rem", color: "#8A8270", lineHeight: 1.8 }}>
Every system has things that are locked in place and things that are allowed to change.
That arrangement isn't neutral. When what's locked serves the people running the system,
and the cost of that lockdown falls on the people using it, the arrangement is inverted.
The tool calls this <em style={{ color: "#C8B890" }}>capture</em>.
</p>
<p style={{ fontSize: "0.7rem", color: "#8A8270", lineHeight: 1.8, marginTop: "0.6rem" }}>
Capture doesn't require anyone to be acting with bad intent. It only requires that the
people who would lose from a change are the same people who control the conditions that
prevent it. That's enough to keep a broken arrangement stable for a very long time.
</p>
<p style={{ fontSize: "0.7rem", color: "#8A8270", lineHeight: 1.8, marginTop: "0.6rem" }}>
The tool also checks whether the fixed element is <em style={{ color: "#C8B890" }}>genuinely</em> fixed or
only apparently so. Something is genuinely fixed when falsifying it would be both costly and
immediately visible. If either condition fails, it only looks stable β it is actually drifting,
and the arrangement can be shifted with less effort than it appears.
</p>
</div>
<div style={{ borderTop: "1px solid #1E1A12", paddingTop: "1.2rem" }}>
<div style={{ fontSize: "0.52rem", letterSpacing: "0.2em", color: "#4A4438", marginBottom: "0.6rem" }}>THE FOUR WAYS CAPTURE HOLDS</div>
<p style={{ fontSize: "0.7rem", color: "#8A8270", lineHeight: 1.8 }}>
A locked arrangement stays locked through four mechanisms. The diagnostic checks all four.
</p>
<div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", marginTop: "0.85rem" }}>
{[
["Knowledge", "The people who would benefit from change don't know a better option exists β because the people who would lose from it control what gets taught, published, or discussed."],
["Access", "Even if people know a better option exists, they can't reach it β because distribution runs through channels owned by the incumbent."],
["Money", "Alternatives can't get funded β because the institutions that allocate capital benefit from the current arrangement and don't finance what would replace it."],
["Authority", "Even when an alternative exists and people can access it, it lacks legitimacy β because the bodies that certify, approve, or endorse are the same ones that benefit from the status quo."],
].map(([label, desc]) => (
<div key={label} style={{ paddingLeft: "0.85rem", borderLeft: "2px solid #2A2620" }}>
<div style={{ fontSize: "0.56rem", letterSpacing: "0.15em", color: "#6A5A38", marginBottom: "0.25rem" }}>{label.toUpperCase()}</div>
<p style={{ fontSize: "0.68rem", color: "#7A7060", lineHeight: 1.7 }}>{desc}</p>
</div>
))}
</div>
</div>
<div style={{ borderTop: "1px solid #1E1A12", paddingTop: "1.2rem" }}>
<div style={{ fontSize: "0.52rem", letterSpacing: "0.2em", color: "#4A4438", marginBottom: "0.6rem" }}>ONE IMPORTANT THING</div>
<p style={{ fontSize: "0.7rem", color: "#8A8270", lineHeight: 1.8 }}>
The tool is only as good as the experience you bring to it. It organizes what you already know β it does not replace knowing.
The more time you have spent directly inside the structure you are analyzing, the more accurate the output will be.
If you have mostly read about it, the diagnostic will sound right but will be hollow underneath.
</p>
</div>
</div>
)}
</div>
);
}
// βββ COMPONENT ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
export default function OpenRingUnified() {
const [step, setStep] = useState(0);
// Input
const [structure, setStructure] = useState("");
const [ctxTime, setCtxTime] = useState("");
const [ctxObserve, setCtxObserve] = useState("");
const [ctxGap, setCtxGap] = useState("");
// Gradient
const [gradientOutput, setGradientOutput] = useState("");
const [gradientDone, setGradientDone] = useState(false);
const [gradientLoading, setGradientLoading] = useState(false);
// SignalChain
const [signalOutput, setSignalOutput] = useState("");
const [signalDone, setSignalDone] = useState(false);
const [signalLoading, setSignalLoading] = useState(false);
// Field form β diagnostic ref (read-only display) + user's own words (submitted)
const [fieldTool, setFieldTool] = useState("The Gradient");
const [fieldDiagnostic, setFieldDiagnostic] = useState(""); // read-only reference
const [fieldIdentified, setFieldIdentified] = useState(""); // user's own words, submitted
const [fieldAction, setFieldAction] = useState("");
const [fieldOutcome, setFieldOutcome] = useState("");
const [fieldDetail, setFieldDetail] = useState("");
const [fieldExperience, setFieldExperience] = useState("");
const [fieldSubmitting, setFieldSubmitting] = useState(false);
const [fieldSubmitted, setFieldSubmitted] = useState(false);
const [fieldError, setFieldError] = useState("");
// Records
const [fieldData, setFieldData] = useState([]);
const [loadingField, setLoadingField] = useState(false);
const [expandedRecord, setExpandedRecord] = useState(null);
const [error, setError] = useState("");
const gradientRef = useRef(null);
const signalRef = useRef(null);
useEffect(() => {
if (gradientRef.current) gradientRef.current.scrollTop = gradientRef.current.scrollHeight;
}, [gradientOutput]);
useEffect(() => {
if (signalRef.current) signalRef.current.scrollTop = signalRef.current.scrollHeight;
}, [signalOutput]);
const buildContext = () => {
const parts = [];
if (ctxTime.trim()) parts.push(`How long involved: ${ctxTime.trim()}`);
if (ctxObserve.trim()) parts.push(`What I observe: ${ctxObserve.trim()}`);
if (ctxGap.trim()) parts.push(`Standard explanation vs. what I've seen: ${ctxGap.trim()}`);
return parts.join("\n\n");
};
const runGradient = async () => {
setGradientOutput(""); setGradientDone(false); setError(""); setGradientLoading(true);
const ctx = buildContext();
const msg = ctx ? `Structure: ${structure}\n\nContext: ${ctx}` : `Structure: ${structure}`;
await streamCall(GRADIENT_PROMPT, msg, setGradientOutput, setError);
setGradientLoading(false);
setGradientDone(true);
};
const runSignal = async () => {
setSignalOutput(""); setSignalDone(false); setError(""); setSignalLoading(true);
const ctx = buildContext();
const msg = `Structure: ${structure}\n\n${ctx ? `User context: ${ctx}\n\n` : ""}Gradient output:\n${gradientOutput}`;
await streamCall(SIGNALCHAIN_PROMPT, msg, setSignalOutput, setError);
setSignalLoading(false);
setSignalDone(true);
};
const streamCall = async (systemPrompt, userMsg, setOutput, setErr) => {
try {
const res = await fetch("
https://api.anthropic.com/v1/messages", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
model: "claude-sonnet-4-20250514",
max_tokens: 2500,
system: systemPrompt,
messages: [{ role: "user", content: userMsg }],
stream: true,
}),
});
if (!res.ok) throw new Error();
const reader = res.body.getReader();
const decoder = new TextDecoder();
let buffer = "";
while (true) {
const { done: sd, value } = await reader.read();
if (sd) break;
buffer += decoder.decode(value, { stream: true });
const lines = buffer.split("\n");
buffer = lines.pop();
for (const line of lines) {
if (line.startsWith("data: ")) {
const data = line.slice(6).trim();
if (data === "[DONE]") continue;
try {
const p = JSON.parse(data);
if (p.type === "content_block_delta" && p.delta?.text)
setOutput(prev => prev + p.delta.text);
} catch {}
}
}
}
} catch { setErr("Call failed. Check connection and retry."); }
};
const submitField = async () => {
setFieldSubmitting(true); setFieldError("");
try {
const body = new URLSearchParams({
[FORM_ENTRIES.structure]: structure,
[FORM_ENTRIES.tool]: fieldTool,
[FORM_ENTRIES.identified]: fieldIdentified,
[FORM_ENTRIES.action]: fieldAction,
[FORM_ENTRIES.outcome]: fieldOutcome,
[FORM_ENTRIES.detail]: fieldDetail,
[FORM_ENTRIES.experience]: fieldExperience,
});
await fetch(FORM_SUBMIT_URL, { method: "POST", mode: "no-cors", body });
setFieldSubmitted(true);
setTimeout(() => { fetchField(); setStep(5); }, 1200);
} catch {
setFieldError("Submission failed. Check your connection and try again.");
} finally { setFieldSubmitting(false); }
};
// Extract diagnostic summary for read-only reference in Field
const extractSection = (text, label) => {
const re = new RegExp(`${label}[\\s\\S]*?(?=\\n[A-Z][A-Z ]+[β:\\s]|$)`, "i");
const m = text.match(re);
if (!m) return "";
return m[0].replace(new RegExp(`^${label}\\s*[β:]?\\s*`, "i"), "").trim();
};
useEffect(() => {
if (STEPS[step]?.id === "field" && (gradientOutput || signalOutput)) {
const parts = [];
const verdict = extractSection(gradientOutput, "VERDICT");
const seed = extractSection(gradientOutput, "SEED CRYSTAL");
const breakPt = extractSection(signalOutput, "BREAK POINT");
const interv = extractSection(signalOutput, "INTERVENTION");
if (verdict) parts.push(`Verdict: ${verdict}`);
if (seed) parts.push(`Seed crystal: ${seed}`);
if (breakPt) parts.push(`Break point: ${breakPt}`);
if (interv) parts.push(`Intervention: ${interv}`);
setFieldDiagnostic(parts.join("\n\n"));
}
}, [step]);
const fetchField = async () => {
setLoadingField(true);
try {
const res = await fetch(SHEET_URL);
const raw = await res.text();
setFieldData(parseSheetData(raw));
} catch {}
finally { setLoadingField(false); }
};
useEffect(() => {
if (STEPS[step]?.id === "records") fetchField();
}, [step]);
const startNewCycle = () => {
setStep(0);
setStructure(""); setCtxTime(""); setCtxObserve(""); setCtxGap("");
setGradientOutput(""); setGradientDone(false);
setSignalOutput(""); setSignalDone(false);
setFieldTool("The Gradient"); setFieldDiagnostic(""); setFieldIdentified("");
setFieldAction(""); setFieldOutcome(""); setFieldDetail(""); setFieldExperience("");
setFieldSubmitted(false); setFieldError("");
};
// ββ RENDER STREAM ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
const renderStream = (text) => {
if (!text) return null;
return text.split("\n").map((line, i) => {
const t = line.trim();
if (!t) return <div key={i} style={{ height: "0.4rem" }} />;
// Major section headers
if (/^(PRE-CHECK|DIAGNOSTIC|STRATUM|LAYER \d|CAPTURE IMMUNE|STRATUM CONVERGENCE)/i.test(t)) {
return (
<div key={i} style={{
fontFamily: "'JetBrains Mono', monospace", fontSize: "0.7rem",
color: "#E8DFBC", letterSpacing: "0.12em",
marginTop: i > 0 ? "1.25rem" : 0,
paddingBottom: "0.3rem", borderBottom: "1px solid #2A2620", marginBottom: "0.5rem",
}}>{t}</div>
);
}
// Seed crystal β highlighted separately before general field labels
if (/^SEED CRYSTAL/i.test(t)) {
const sep = t.indexOf("β") > -1 ? t.indexOf("β") : t.indexOf(":");
const rest = sep > -1 ? t.slice(sep + 1).trim() : "";
return (
<div key={i} style={{
marginTop: "1.25rem", marginBottom: "0.25rem",
padding: "1rem 1.1rem",
background: "#1C1508",
border: "1px solid #D4B58035",
borderLeft: "3px solid #D4B580",
}}>
<div style={{
fontSize: "0.52rem", letterSpacing: "0.2em", color: "#D4B580",
marginBottom: rest ? "0.5rem" : 0,
}}>SEED CRYSTAL</div>
{rest && (
<div style={{
fontFamily: "'JetBrains Mono', monospace", fontSize: "0.74rem",
color: "#E8D8A0", lineHeight: 1.8, letterSpacing: "0.01em",
}}>{rest}</div>
)}
</div>
);
}
// General field labels
if (/^(Q[1-4]|NATURAL PRESSURE|MAINTENANCE ENERGY|SUPERSATURATION POINT|SIGNAL|CHANNEL|GROUND|REACH|BREAK POINT|INTERVENTION|CHAIN STATE|VERDICT|COST-DETECTION|IMMUNITY|STRATUM QUESTION)/i.test(t)) {
const colonIdx = line.indexOf(":");
const dashIdx = line.indexOf("β");
const sep = colonIdx > -1 ? colonIdx : dashIdx;
const label = sep > -1 ? line.slice(0, sep).trim() : t;
const rest = sep > -1 ? line.slice(sep) : "";
return (
<div key={i} style={{ marginTop: "0.75rem", marginBottom: "0.2rem" }}>
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: "0.66rem", color: "#C8B890", letterSpacing: "0.08em", fontWeight: 500 }}>{label}</span>
{rest && <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: "0.66rem", color: "#A89878", letterSpacing: "0.02em" }}>{rest}</span>}
</div>
);
}
// Verdict badge
if (/INVERSION CONFIRMED|INVERSION NOT CONFIRMED|APPROACHING IMMUNE|CAPTURE IMMUNE/i.test(t) && t.length < 80) {
const confirmed = /INVERSION CONFIRMED/i.test(t) && !/NOT/i.test(t);
const col = confirmed ? "#D4B580" : "#A0D090";
return (
<div key={i} style={{
marginTop: "0.6rem", padding: "0.6rem 0.9rem",
background: col + "12", borderLeft: `2px solid ${col}`,
fontFamily: "'JetBrains Mono', monospace", fontSize: "0.7rem",
color: col, letterSpacing: "0.08em",
}}>{t}</div>
);
}
return (
<p key={i} style={{
fontFamily: "'JetBrains Mono', monospace", fontSize: "0.72rem",
color: "#C8C0B0", lineHeight: 1.8, margin: "0.1rem 0", letterSpacing: "0.01em",
}}>{line}</p>
);
});
};
const stepId = STEPS[step]?.id;
// ββ RENDER ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
return (
<>
<style>{`
@import url('
https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0A0907; }
textarea::placeholder, input::placeholder { color: #3A3628; }
textarea, input, select { color: #D8D0BC !important; }
.or-root {
min-height: 100vh; background: #0A0907; color: #D8D0BC;
padding: 2.5rem 1.5rem 6rem; max-width: 720px;
margin: 0 auto; font-family: 'JetBrains Mono', monospace;
}
.or-header { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #1E1A12; }
.or-eyebrow { font-size: 0.55rem; letter-spacing: 0.3em; color: #4A4638; margin-bottom: 0.6rem; }
.or-title { font-family: 'Libre Baskerville', serif; font-size: 2.3rem; font-weight: 400; font-style: italic; color: #E8E0CC; line-height: 1.1; margin-bottom: 0.5rem; }
.or-sub { font-size: 0.68rem; color: #8A8270; line-height: 1.7; max-width: 480px; }
.or-formula { font-size: 0.68rem; color: #A89878; letter-spacing: 0.08em; margin-top: 0.75rem; padding: 0.5rem 0.85rem; background: #100D08; border: 1px solid #1E1A12; display: inline-block; }
.or-progress { display: flex; gap: 1px; margin-bottom: 1.75rem; background: #1E1A12; border: 1px solid #1E1A12; }
.or-prog-step { flex: 1; padding: 0.55rem 0.3rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; background: #0A0907; cursor: pointer; transition: background 0.1s; }
.or-prog-step.active { background: #150F08; }
.or-prog-step.done { background: #100D08; }
.or-prog-dot { width: 5px; height: 5px; border-radius: 50%; border: 1px solid; transition: all 0.2s; }
.or-prog-label { font-size: 0.44rem; letter-spacing: 0.1em; text-align: center; display: none; }
@media (min-width: 480px) { .or-prog-label { display: block; } }
.or-card { background: #100D08; border: 1px solid #1E1A12; padding: 1.5rem; margin-bottom: 1.25rem; }
.or-card-title { font-family: 'Libre Baskerville', serif; font-size: 1.4rem; font-style: italic; color: #E8E0CC; margin-bottom: 0.4rem; }
.or-card-desc { font-size: 0.68rem; color: #8A8270; line-height: 1.7; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid #1E1A12; }
.or-label { font-size: 0.56rem; letter-spacing: 0.18em; color: #5A5440; margin-bottom: 0.25rem; display: block; }
.or-hint { font-size: 0.62rem; color: #4A4438; line-height: 1.6; margin-bottom: 0.5rem; font-style: italic; }
.or-input { width: 100%; background: #0A0907; border: 1px solid #2A2620; border-bottom: 1px solid #3A3628; font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; padding: 0.7rem 0.9rem; outline: none; display: block; margin-bottom: 1.25rem; letter-spacing: 0.02em; }
.or-textarea { resize: vertical; min-height: 72px; line-height: 1.6; }
.or-input:focus { border-color: #4A4638; border-bottom-color: #6A5A38; }
.or-select { appearance: none; cursor: pointer; }
.or-btn { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.18em; padding: 0.75rem 1.5rem; border: 1px solid; cursor: pointer; transition: all 0.1s; background: transparent; text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; }
.or-btn-primary { border-color: #D4B580; color: #D4B580; }
.or-btn-primary:hover:not(:disabled) { background: #D4B58015; }
.or-btn-primary:disabled { opacity: 0.3; cursor: not-allowed; }
.or-btn-secondary { border-color: #3A3628; color: #6A5A38; }
.or-btn-secondary:hover { border-color: #5A5040; color: #8A7858; }
.or-btn-green { border-color: #70D090; color: #70D090; }
.or-btn-green:hover:not(:disabled) { background: #70D09015; }
.or-btn-green:disabled { opacity: 0.3; cursor: not-allowed; }
.or-nav { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; align-items: center; }
.or-pulse { width: 6px; height: 6px; background: currentColor; border-radius: 50%; animation: orpulse 0.9s ease-in-out infinite; }
@keyframes orpulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.6)} }
.or-output { max-height: 60vh; overflow-y: auto; padding-right: 0.5rem; }
.or-output::-webkit-scrollbar { width: 1px; }
.or-output::-webkit-scrollbar-thumb { background: #2A2620; }
.or-output-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.or-output-label { font-size: 0.52rem; letter-spacing: 0.2em; color: #4A4438; }
.or-cursor { display: inline-block; width: 6px; height: 0.9rem; background: #D4B580; vertical-align: text-bottom; animation: orblink 0.75s step-end infinite; margin-left: 2px; }
@keyframes orblink { 0%,100%{opacity:1} 50%{opacity:0} }
.or-callout { padding: 1rem 1.2rem; background: #0E0B06; border: 1px solid #1E1A12; margin: 1rem 0; }
.or-callout-label { font-size: 0.56rem; letter-spacing: 0.18em; color: #5A5440; margin-bottom: 0.5rem; }
.or-callout-body { font-size: 0.72rem; color: #C8C0B0; line-height: 1.7; letter-spacing: 0.01em; white-space: pre-wrap; }
.or-error { font-size: 0.68rem; color: #D88870; letter-spacing: 0.05em; margin-top: 0.75rem; }
.or-success { font-size: 0.68rem; color: #70D090; letter-spacing: 0.05em; margin-top: 0.75rem; }
.or-records { display: flex; flex-direction: column; gap: 1px; background: #1E1A12; border: 1px solid #1E1A12; }
.or-record { background: #0A0907; padding: 0.85rem 1rem; cursor: pointer; transition: background 0.1s; }
.or-record:hover { background: #100D08; }
.or-record.open { background: #120F08; }
.or-record-top { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.or-record-name { font-size: 0.72rem; color: #D8D0BC; flex: 1; letter-spacing: 0.02em; }
.or-tag { font-size: 0.52rem; letter-spacing: 0.12em; padding: 0.18rem 0.45rem; border: 1px solid; }
.or-record-detail { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #1E1A12; display: flex; flex-direction: column; gap: 0.85rem; }
.or-detail-label { font-size: 0.52rem; letter-spacing: 0.15em; color: #5A5440; margin-bottom: 0.25rem; }
.or-detail-val { font-size: 0.7rem; color: #B8B098; line-height: 1.65; }
.or-empty { padding: 3rem 1rem; text-align: center; font-size: 0.68rem; color: #4A4638; letter-spacing: 0.05em; line-height: 1.8; }
.or-divider { border: none; border-top: 1px solid #1E1A12; margin: 1.25rem 0; }
`}</style>
<div className="or-root">
{/* HEADER */}
<div className="or-header">
<div className="or-eyebrow">OPENPROTOCOL β UNIFIED CYCLE</div>
<h1 className="or-title">The Open Ring</h1>
<p className="or-sub">
A diagnostic for markets, institutions, and practices where the wrong things are fixed and the wrong things vary.
</p>
<div className="or-formula">The reference point holds only when falsifying it costs more than it's worth.</div>
</div>
{/* USER GUIDE */}
<UserGuide />
{/* PROGRESS */}
<div className="or-progress">
{STEPS.map((s, i) => (
<div
key={s.id}
className={`or-prog-step ${i === step ? "active" : ""} ${i < step ? "done" : ""}`}
onClick={() => i < step && setStep(i)}
>
<div className="or-prog-dot" style={{
borderColor: i <= step ? s.color : "#2A2620",
background: i < step ? s.color : "transparent",
}} />
<span className="or-prog-label" style={{ color: i <= step ? s.color : "#3A3628" }}>{s.label}</span>
</div>
))}
</div>
{/* ββ STEP 1 β INPUT βββββββββββββββββββββββββββββββββββββββββββββββββ */}
{stepId === "input" && (
<div className="or-card">
<div className="or-card-title">What are you analyzing?</div>
<p className="or-card-desc">
Name a market, product format, institution, or practice where something feels wrong β
where the thing that's fixed probably shouldn't be, and the thing that varies probably shouldn't either.
</p>
<span className="or-label">THE STRUCTURE</span>
<input
className="or-input"
type="text"
placeholder="health insurance, university degrees, commercial fishing permits..."
value={structure}
onChange={e => setStructure(e.target.value)}
/>
<hr className="or-divider" />
<p style={{ fontSize: "0.68rem", color: "#6A6050", lineHeight: 1.7, marginBottom: "1.25rem" }}>
Answer what you can below. The more direct experience you bring, the sharper the output.
</p>
<span className="or-label">HOW LONG HAVE YOU BEEN DIRECTLY INVOLVED?</span>
<p className="or-hint">As a user, practitioner, or close observer β not just someone who has read about it.</p>
<textarea
className="or-input or-textarea"
placeholder="e.g. 12 years as a practitioner, 3 years as an end user..."
value={ctxTime}
onChange={e => setCtxTime(e.target.value)}
/>
<span className="or-label">WHAT DO YOU SEE THAT MOST PEOPLE INSIDE IT DON'T TALK ABOUT OR DON'T NOTICE?</span>
<p className="or-hint">The thing that's obvious to you after time in it, but absent from any official account.</p>
<textarea
className="or-input or-textarea"
placeholder="e.g. The standard product is calibrated for a customer that doesn't exist in the real market..."
value={ctxObserve}
onChange={e => setCtxObserve(e.target.value)}
/>
<span className="or-label">WHAT DOES THE STANDARD EXPLANATION SAY IT IS β VERSUS WHAT YOU'VE ACTUALLY EXPERIENCED?</span>
<p className="or-hint">Where does the official story diverge from what you've seen on the ground?</p>
<textarea
className="or-input or-textarea"
placeholder="e.g. The industry says X is fixed for safety reasons. In practice, it's fixed because..."
value={ctxGap}
onChange={e => setCtxGap(e.target.value)}
/>
<div className="or-nav">
<button
className="or-btn or-btn-primary"
disabled={!structure.trim()}
onClick={() => { setStep(1); runGradient(); }}
>
RUN THE GRADIENT β
</button>
</div>
</div>
)}
{/* ββ STEP 2 β GRADIENT ββββββββββββββββββββββββββββββββββββββββββββββ */}
{stepId === "gradient" && (
<div className="or-card">
<div className="or-card-title">The Gradient</div>
<p className="or-card-desc">
Identifies whether an inversion is present, maps where pressure has accumulated, and names the seed crystal β the minimum action to allow the correct structure to emerge.
</p>
<div className="or-callout">
<div className="or-callout-label">ANALYZING</div>
<div className="or-callout-body">{structure}</div>
</div>
{gradientLoading && !gradientOutput && (
<div style={{ display: "flex", alignItems: "center", gap: "0.75rem", padding: "1rem 0" }}>
<div className="or-pulse" style={{ color: "#D4B580" }} />
<span style={{ fontSize: "0.66rem", color: "#5A5040", letterSpacing: "0.1em" }}>RUNNING GRADIENT</span>
</div>
)}
{gradientOutput && (
<>
<div className="or-output-header">
<span className="or-output-label">GRADIENT OUTPUT</span>
{gradientDone && <CopyButton text={gradientOutput} />}
</div>
<div ref={gradientRef} className="or-output">
{renderStream(gradientOutput)}
{gradientLoading && <span className="or-cursor" />}
</div>
</>
)}
{error && <div className="or-error">{error}</div>}
<div className="or-nav">
<button className="or-btn or-btn-secondary" onClick={() => setStep(0)}>β BACK</button>
{gradientDone && (
<button className="or-btn or-btn-primary" onClick={() => { setStep(2); runSignal(); }}>
RUN SIGNALCHAIN β
</button>
)}
{gradientDone && (
<button className="or-btn or-btn-secondary" onClick={runGradient}>RE-RUN</button>
)}
</div>
</div>
)}
{/* ββ STEP 3 β SIGNALCHAIN βββββββββββββββββββββββββββββββββββββββββββ */}
{stepId === "signalchain" && (
<div className="or-card">
<div className="or-card-title">SignalChain</div>
<p className="or-card-desc">
Locates exactly where in the four-node chain information stops flowing. Identifies the break point and the minimum intervention at that specific node.
</p>
{signalLoading && !signalOutput && (
<div style={{ display: "flex", alignItems: "center", gap: "0.75rem", padding: "1rem 0" }}>
<div className="or-pulse" style={{ color: "#60B5E5" }} />
<span style={{ fontSize: "0.66rem", color: "#3A5060", letterSpacing: "0.1em" }}>RUNNING SIGNALCHAIN</span>
</div>
)}
{signalOutput && (
<>
<div className="or-output-header">
<span className="or-output-label">SIGNALCHAIN OUTPUT</span>
{signalDone && <CopyButton text={signalOutput} />}
</div>
<div ref={signalRef} className="or-output">
{renderStream(signalOutput)}
{signalLoading && <span className="or-cursor" style={{ background: "#60B5E5" }} />}
</div>
</>
)}
{error && <div className="or-error">{error}</div>}
<div className="or-nav">
<button className="or-btn or-btn-secondary" onClick={() => setStep(1)}>β GRADIENT</button>
{signalDone && (
<button className="or-btn or-btn-primary" onClick={() => setStep(3)}>PROCEED TO ACT β</button>
)}
{signalDone && (
<button className="or-btn or-btn-secondary" onClick={runSignal}>RE-RUN</button>
)}
</div>
</div>
)}
{/* ββ STEP 4 β ACT βββββββββββββββββββββββββββββββββββββββββββββββββββ */}
{stepId === "act" && (
<div className="or-card">
<div className="or-card-title">Act</div>
<p className="or-card-desc">
The diagnostic is complete. The seed crystal has been named. Now act on it in the real world β then return here and record what happened.
</p>
<div className="or-callout">
<div className="or-callout-label">THE OPEN RING PREREQUISITE</div>
<div className="or-callout-body">
The tools organize what you already know. They do not replace knowing.
The quality of what follows depends entirely on the quality of the action you take now.
</div>
</div>
<div style={{ marginTop: "1.25rem", fontSize: "0.68rem", color: "#6A6050", lineHeight: 1.8 }}>
Go do the thing the seed crystal pointed to.<br />
When you have a result β or when you know it's coming β come back and record it.
</div>
<div className="or-nav">
<button className="or-btn or-btn-secondary" onClick={() => setStep(2)}>β SIGNALCHAIN</button>
<button className="or-btn or-btn-primary" onClick={() => setStep(4)}>RECORD IN FIELD β</button>
</div>
</div>
)}
{/* ββ STEP 5 β FIELD βββββββββββββββββββββββββββββββββββββββββββββββββ */}
{stepId === "field" && (
<div className="or-card">
<div className="or-card-title">Field</div>
<p className="or-card-desc">
Record what happened when you acted. This is what turns a diagnosis into tested evidence.
</p>
{fieldDiagnostic && (
<div className="or-callout" style={{ marginBottom: "1.5rem", borderColor: "#D4B58025", borderLeft: "2px solid #D4B58050" }}>
<div className="or-callout-label">WHAT THE DIAGNOSTIC FOUND β FOR REFERENCE</div>
<div className="or-callout-body" style={{ color: "#8A8070", fontSize: "0.68rem" }}>{fieldDiagnostic}</div>
</div>
)}
<span className="or-label">WHICH TOOL DID YOU USE?</span>
<select className="or-input or-select" value={fieldTool} onChange={e => setFieldTool(e.target.value)}>
<option>The Gradient</option>
<option>SignalChain</option>
<option>Both</option>
</select>
<span className="or-label">WHAT WAS WRONG WITH IT β IN YOUR OWN WORDS?</span>
<p className="or-hint">Don't use the framework's language. Just describe what you found, as you'd explain it to someone who wasn't in the room.</p>
<textarea
className="or-input or-textarea"
style={{ minHeight: "96px" }}
placeholder="e.g. The product was designed for conditions most buyers never encounter. The people selling it knew this, but there was no reason for them to say so..."
value={fieldIdentified}
onChange={e => setFieldIdentified(e.target.value)}
/>
<span className="or-label">WHAT DID YOU DO ABOUT IT?</span>
<p className="or-hint">The specific thing you did β as concrete as possible.</p>
<textarea
className="or-input or-textarea"
placeholder="e.g. Published a documented explanation and shared it with three people who could act on it..."
value={fieldAction}
onChange={e => setFieldAction(e.target.value)}
/>
<span className="or-label">WHAT HAPPENED?</span>
<select className="or-input or-select" value={fieldOutcome} onChange={e => setFieldOutcome(e.target.value)}>
<option value="">Select outcome...</option>
{OUTCOME_OPTIONS.map(o => <option key={o}>{o}</option>)}
</select>
<span className="or-label">ANYTHING ELSE WORTH NOTING?</span>
<textarea
className="or-input or-textarea"
placeholder="Any detail that would help someone else understand what occurred..."
value={fieldDetail}
onChange={e => setFieldDetail(e.target.value)}
/>
<span className="or-label">HOW LONG HAVE YOU BEEN WORKING WITH THIS STRUCTURE?</span>
<select className="or-input or-select" value={fieldExperience} onChange={e => setFieldExperience(e.target.value)}>
<option value="">Select...</option>
{EXPERIENCE_OPTIONS.map(o => <option key={o}>{o}</option>)}
</select>
{fieldError && <div className="or-error">{fieldError}</div>}
{fieldSubmitted && <div className="or-success">Submitted β opening records...</div>}
<div className="or-nav">
<button className="or-btn or-btn-secondary" onClick={() => setStep(3)}>β ACT</button>
<button
className="or-btn or-btn-green"
disabled={!fieldOutcome || !fieldAction || fieldSubmitting || fieldSubmitted}
onClick={submitField}
>
{fieldSubmitting ? "SUBMITTING..." : "SUBMIT TO FIELD β"}
</button>
<button className="or-btn or-btn-secondary" onClick={() => setStep(5)}>
SKIP TO RECORDS
</button>
</div>
</div>
)}
{/* ββ STEP 6 β RECORDS βββββββββββββββββββββββββββββββββββββββββββββββ */}
{stepId === "records" && (
<div className="or-card">
<div className="or-card-title">Records</div>
<p className="or-card-desc">
All field data submitted by Open Ring users. The cycle builds evidence with each completed run.
</p>
{loadingField && (
<div style={{ display: "flex", alignItems: "center", gap: "0.75rem", padding: "1rem 0" }}>
<div className="or-pulse" style={{ color: "#B0A0D0" }} />
<span style={{ fontSize: "0.66rem", color: "#5A4A70", letterSpacing: "0.1em" }}>LOADING FIELD DATA</span>
</div>
)}
{!loadingField && fieldData.length === 0 && (
<div className="or-empty">
No field records yet.<br />
The first completed cycle will appear here.
</div>
)}
{!loadingField && fieldData.length > 0 && (
<div className="or-records">
{fieldData.map((r, i) => {
const outcomeColor = OUTCOME_COLORS[r.outcome] || "#9B9588";
const isOpen = expandedRecord === i;
return (
<div
key={i}
className={`or-record ${isOpen ? "open" : ""}`}
onClick={() => setExpandedRecord(isOpen ? null : i)}
>
<div className="or-record-top">
<span className="or-record-name">{r.structure}</span>
{r.tool && <span className="or-tag" style={{ borderColor: "#D4B58050", color: "#D4B580" }}>{r.tool}</span>}
{r.outcome && <span className="or-tag" style={{ borderColor: outcomeColor + "50", color: outcomeColor }}>{r.outcome}</span>}
</div>
{isOpen && (
<div className="or-record-detail">
{r.identified && <div><div className="or-detail-label">WHAT WAS WRONG</div><div className="or-detail-val">{r.identified}</div></div>}
{r.action && <div><div className="or-detail-label">ACTION TAKEN</div><div className="or-detail-val">{r.action}</div></div>}
{r.detail && <div><div className="or-detail-label">NOTES</div><div className="or-detail-val">{r.detail}</div></div>}
{r.experience && <div><div className="or-detail-label">EXPERIENCE LEVEL</div><div className="or-detail-val">{r.experience}</div></div>}
</div>
)}
</div>
);
})}
</div>
)}
<div className="or-nav" style={{ marginTop: "1.5rem" }}>
<button className="or-btn or-btn-secondary" onClick={() => setStep(4)}>β FIELD</button>
<button className="or-btn or-btn-secondary" onClick={fetchField}>REFRESH</button>
<button className="or-btn or-btn-primary" onClick={startNewCycle}>NEW CYCLE</button>
</div>
</div>
)}
</div>
</>
);
}