| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> |
| <title>Substrate Cognition Translation Simulator v0.1</title> |
| <style> |
| :root{ |
| --bg:#07090d;--panel:#0f1420;--panel2:#121a2a;--ink:#eef5ff;--muted:#a9b6cc;--line:#263347; |
| --green:#49d17c;--yellow:#ffd166;--orange:#ff9f43;--red:#ff5c7a;--blue:#65b8ff;--violet:#a78bfa;--cyan:#58e6d9; |
| --shadow:0 18px 60px rgba(0,0,0,.35); |
| } |
| *{box-sizing:border-box} |
| body{ |
| margin:0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink); |
| background: |
| radial-gradient(circle at 10% 10%,rgba(101,184,255,.16),transparent 28%), |
| radial-gradient(circle at 86% 12%,rgba(167,139,250,.14),transparent 30%), |
| radial-gradient(circle at 50% 105%,rgba(88,230,217,.08),transparent 42%), |
| var(--bg); |
| } |
| header{ |
| padding:28px 24px 18px;border-bottom:1px solid var(--line); |
| background:linear-gradient(180deg,rgba(18,26,42,.94),rgba(7,9,13,.72)); |
| position:sticky;top:0;z-index:20;backdrop-filter:blur(12px); |
| } |
| .wrap{max-width:1480px;margin:0 auto} |
| h1{margin:0 0 6px;font-size:clamp(24px,3vw,42px);letter-spacing:-.04em} |
| .subtitle{color:var(--muted);font-size:15px;line-height:1.45;max-width:1120px} |
| .tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} |
| .tag{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#dbeafe;padding:6px 9px;border-radius:999px;font-size:12px} |
| main{padding:22px 24px 34px} |
| .grid{display:grid;grid-template-columns:390px minmax(0,1fr) 420px;gap:18px;align-items:start} |
| .panel{ |
| background:linear-gradient(180deg,rgba(18,26,42,.96),rgba(15,20,32,.96)); |
| border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden; |
| } |
| .panel h2{margin:0;padding:16px 18px;border-bottom:1px solid var(--line);font-size:16px;letter-spacing:-.02em} |
| .body{padding:16px 18px} |
| label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px} |
| select,button,textarea,input[type=text]{ |
| width:100%;border:1px solid var(--line);background:#0a0f19;color:var(--ink);border-radius:12px;padding:11px 12px;font-size:14px;outline:none; |
| } |
| textarea{min-height:112px;resize:vertical;line-height:1.4} |
| button{cursor:pointer;transition:.18s ease transform,.18s ease border-color,.18s ease background;font-weight:800} |
| button:hover{transform:translateY(-1px);border-color:#46658f;background:#0c1422} |
| button.primary{background:linear-gradient(135deg,#1f6feb,#5b8cff);border-color:#65b8ff} |
| button.good{background:linear-gradient(135deg,#116e43,#24a861);border-color:#49d17c} |
| button.warn{background:linear-gradient(135deg,#865b0b,#b98200);border-color:#ffd166} |
| .controls{display:grid;gap:14px} |
| .sliderRow{border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(255,255,255,.03)} |
| .sliderTop{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:8px} |
| .sliderTop strong{font-size:13px} |
| .val{font-variant-numeric:tabular-nums;color:#dbeafe;font-size:12px} |
| input[type=range]{width:100%;accent-color:#65b8ff} |
| .hint{font-size:12px;color:var(--muted);line-height:1.35;margin-top:6px} |
| .buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px} |
| .metricGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px} |
| .metric{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:18px;padding:14px;min-height:100px} |
| .metric .name{font-size:12px;color:var(--muted)} |
| .metric .num{font-size:22px;font-weight:900;margin:4px 0;letter-spacing:-.03em;line-height:1.05} |
| .metric .desc{font-size:12px;color:var(--muted);line-height:1.35} |
| .output{display:grid;gap:14px} |
| .card{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035);padding:14px} |
| .card h3{margin:0 0 8px;font-size:15px} |
| .card p{margin:0 0 10px;color:#dce8f7;line-height:1.48} |
| .card ul{margin:8px 0 0 20px;color:#dce8f7;line-height:1.45;padding:0} |
| .card li{margin:4px 0} |
| .small{font-size:12px;color:var(--muted);line-height:1.35} |
| .eq{ |
| font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#080d15;border:1px solid var(--line);border-radius:18px; |
| padding:14px;color:#d8f3ff;margin-bottom:18px;line-height:1.55;overflow:auto; |
| } |
| .pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:5px 8px;font-size:11px;font-weight:800;margin:3px 4px 3px 0} |
| .blue{color:var(--blue)}.green{color:var(--green)}.yellow{color:var(--yellow)}.orange{color:var(--orange)}.red{color:var(--red)}.violet{color:var(--violet)}.cyan{color:var(--cyan)} |
| #signalCanvas{width:100%;height:170px;border:1px solid var(--line);border-radius:16px;background:#0a0f19;display:block} |
| .log{max-height:560px;overflow:auto;display:flex;flex-direction:column;gap:9px;padding-right:4px} |
| .logItem{border:1px solid var(--line);border-radius:14px;padding:10px 11px;background:rgba(255,255,255,.035)} |
| .logItem .time{font-size:11px;color:#8190a8;margin-bottom:5px} |
| .logItem .msg{font-size:12px;line-height:1.35;color:#dce8f7} |
| .footerNote{margin:18px auto 0;color:var(--muted);line-height:1.45;font-size:13px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:18px;padding:14px} |
| .modeDesc{font-size:12px;color:var(--muted);line-height:1.35;border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.03);min-height:54px;margin-top:8px} |
| .previewBox{border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(255,255,255,.03)} |
| pre{white-space:pre-wrap;word-break:break-word;margin:0;color:#dce8f7;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.45} |
| @media(max-width:1240px){.grid{grid-template-columns:1fr}header{position:static}.metricGrid{grid-template-columns:repeat(2,1fr)}} |
| @media(max-width:760px){.metricGrid{grid-template-columns:1fr}.buttons{grid-template-columns:1fr}} |
| </style> |
| </head> |
| <body> |
| <header> |
| <div class="wrap"> |
| <h1>Substrate Cognition Translation Simulator <span class="blue">v0.1</span></h1> |
| <div class="subtitle"> |
| A non-diagnostic proof-of-wiring simulator for cognitive synthesis: select a cognition style, tune expression preferences, |
| and generate a tailored explanation of the HIR/OAM pressure grammar for light, heat, rhythm, electricity, and signal integrity. |
| <br><strong>Difference in cognition is a signal form, not degradation.</strong> |
| </div> |
| <div class="tagrow"> |
| <span class="tag">Cognition translation, not diagnosis</span> |
| <span class="tag">Loop steward, not arbitrary moderator</span> |
| <span class="tag">No forced closure</span> |
| <span class="tag">HIR/OAM pressure grammar</span> |
| <span class="tag">Substrate prototype</span> |
| </div> |
| </div> |
| </header> |
|
|
| <main> |
| <div class="wrap grid"> |
| <section class="panel"> |
| <h2>Cognition Input</h2> |
| <div class="body controls"> |
| <div> |
| <label for="mode">Primary cognition / explanation mode</label> |
| <select id="mode"></select> |
| <div id="modeDesc" class="modeDesc"></div> |
| </div> |
|
|
| <div> |
| <label for="selfDesc">Optional self-description</label> |
| <textarea id="selfDesc" placeholder="Example: I understand best through examples and analogies. I jump between patterns quickly. I need the main point first, then details."></textarea> |
| <div class="hint">This is not diagnosis. It is a self-described translation signal for adapting explanation style.</div> |
| </div> |
|
|
| <div class="sliderRow"> |
| <div class="sliderTop"><strong>Abstraction Tolerance</strong><span class="val" id="vAbs"></span></div> |
| <input id="abstraction" type="range" min="0" max="1" step="0.01" value="0.55"> |
| <div class="hint">Lower = concrete first. Higher = theory first.</div> |
| </div> |
|
|
| <div class="sliderRow"> |
| <div class="sliderTop"><strong>Example Need</strong><span class="val" id="vEx"></span></div> |
| <input id="examples" type="range" min="0" max="1" step="0.01" value="0.70"> |
| <div class="hint">How much the explanation should lean on real-world examples.</div> |
| </div> |
|
|
| <div class="sliderRow"> |
| <div class="sliderTop"><strong>Math Density</strong><span class="val" id="vMath"></span></div> |
| <input id="math" type="range" min="0" max="1" step="0.01" value="0.45"> |
| <div class="hint">Controls how much equation language appears in the output.</div> |
| </div> |
|
|
| <div class="sliderRow"> |
| <div class="sliderTop"><strong>Metaphor Density</strong><span class="val" id="vMet"></span></div> |
| <input id="metaphor" type="range" min="0" max="1" step="0.01" value="0.62"> |
| <div class="hint">Controls analogy, imagery, and symbolic framing.</div> |
| </div> |
|
|
| <div class="sliderRow"> |
| <div class="sliderTop"><strong>Pacing / Stepwise Support</strong><span class="val" id="vPace"></span></div> |
| <input id="pacing" type="range" min="0" max="1" step="0.01" value="0.68"> |
| <div class="hint">Higher = slower, clearer sequencing and more definitions.</div> |
| </div> |
|
|
| <div class="buttons"> |
| <button class="primary" id="generateBtn">Generate Translation</button> |
| <button id="randomBtn">Try Sample Profile</button> |
| </div> |
|
|
| <div class="buttons"> |
| <button class="good" id="exportJSON">Export JSON</button> |
| <button class="warn" id="copyBtn">Copy Output</button> |
| </div> |
| </div> |
| </section> |
|
|
| <section> |
| <div class="metricGrid"> |
| <div class="metric"> |
| <div class="name">Cognitive Accessibility</div> |
| <div class="num" id="accessScore">0.00</div> |
| <div class="desc">How well selected supports match the self-declared mode.</div> |
| </div> |
| <div class="metric"> |
| <div class="name">Loop Closure Readiness</div> |
| <div class="num" id="closureState">READY</div> |
| <div class="desc">Whether the explanation can close, partially close, or must remain open.</div> |
| </div> |
| <div class="metric"> |
| <div class="name">Translation Route</div> |
| <div class="num" id="routeName">—</div> |
| <div class="desc">Concrete, visual, technical, narrative, skeptical, or blended route.</div> |
| </div> |
| </div> |
|
|
| <div class="eq"> |
| <div><strong>Substrate cognition pressure form:</strong></div> |
| <div>S_cognition,t = A_translation,t × B_understanding,t − P_mismatch,t</div> |
| <div><strong>Operating rule:</strong> preserve cognition, map pressure, do not force closure.</div> |
| <div id="liveEq" style="margin-top:8px;color:#eef5ff"></div> |
| </div> |
|
|
| <div class="panel" style="margin-bottom:18px"> |
| <h2>Cognition Signal Field</h2> |
| <div class="body"> |
| <canvas id="signalCanvas" width="760" height="190"></canvas> |
| <div class="hint" style="text-align:center;margin-top:10px"> |
| Signal = cognitive expression · Field = pressure context · Translation = dignity-preserving synthesis. |
| </div> |
| </div> |
| </div> |
|
|
| <div class="panel"> |
| <h2>Generated Cognitive Translation</h2> |
| <div class="body output" id="output"></div> |
| </div> |
|
|
| <div class="footerNote"> |
| <strong>Boundary statement:</strong> This simulator does not diagnose cognition, rank intelligence, or assign identity. |
| It adapts an explanation to a self-selected expression style. It treats cognition differences as signals to translate, |
| not defects to suppress. It is a proof-of-wiring prototype for the Substrate Cognitive Synthesis / Loop Steward layer. |
| </div> |
| </section> |
|
|
| <aside class="panel"> |
| <h2>Loop Steward Log</h2> |
| <div class="body"> |
| <div class="previewBox" style="margin-bottom:12px"> |
| <div class="small"><strong>Steward function:</strong> preserve the loop, translate signals, distinguish cognitive friction from loop corruption, and produce a coherent artifact without forcing consensus.</div> |
| </div> |
| <div class="log" id="log"></div> |
| </div> |
| </aside> |
| </div> |
| </main> |
|
|
| <footer class="footerNote wrap"> |
| <strong>Substrate principle:</strong> A loop does not close because people are tired of it, uncomfortable with it, or dislike the expression style. |
| A loop closes only when its claim, evidence, uncertainty, disagreement, correction, or artifact state has been honestly resolved or explicitly bounded. |
| </footer> |
|
|
| <script> |
| const modes = { |
| visual_map: { |
| label:"Visual / map-based", |
| route:"VISUAL_MAP", |
| desc:"Prefers spatial layout, flow, shape, layers, diagrams, and seeing how parts connect.", |
| bias:{abstraction:.55, examples:.70, math:.35, metaphor:.75, pacing:.62} |
| }, |
| concrete_examples: { |
| label:"Concrete examples first", |
| route:"CONCRETE_EXAMPLES", |
| desc:"Prefers ordinary-life examples before theory. Needs the concept grounded in something practical.", |
| bias:{abstraction:.30, examples:.92, math:.25, metaphor:.55, pacing:.78} |
| }, |
| technical_math: { |
| label:"Technical / math-forward", |
| route:"TECHNICAL_MATH", |
| desc:"Prefers equations, variables, thresholds, route logic, and explicit formal structure.", |
| bias:{abstraction:.86, examples:.45, math:.90, metaphor:.25, pacing:.42} |
| }, |
| story_metaphor: { |
| label:"Story / metaphor", |
| route:"STORY_METAPHOR", |
| desc:"Prefers analogies, image-rich language, narrative movement, and meaning carried through metaphor.", |
| bias:{abstraction:.50, examples:.68, math:.22, metaphor:.94, pacing:.68} |
| }, |
| stepwise_literal: { |
| label:"Stepwise / literal", |
| route:"STEPWISE_LITERAL", |
| desc:"Prefers definitions, direct sequencing, low ambiguity, and one idea at a time.", |
| bias:{abstraction:.34, examples:.78, math:.42, metaphor:.18, pacing:.94} |
| }, |
| fast_associative: { |
| label:"Fast associative / pattern-jump", |
| route:"FAST_ASSOCIATIVE", |
| desc:"Prefers rapid links across domains, pattern bridges, and seeing the whole field quickly.", |
| bias:{abstraction:.78, examples:.58, math:.55, metaphor:.82, pacing:.26} |
| }, |
| skeptical_redteam: { |
| label:"Skeptical / red-team", |
| route:"SKEPTICAL_REDTEAM", |
| desc:"Prefers boundaries, failure modes, counterexamples, claims discipline, and what would falsify the idea.", |
| bias:{abstraction:.66, examples:.62, math:.60, metaphor:.20, pacing:.58} |
| }, |
| lived_context: { |
| label:"Lived-context / human stakes", |
| route:"LIVED_CONTEXT", |
| desc:"Prefers explanation through human impact, agency, dignity, pressure, repair, and practical stakes.", |
| bias:{abstraction:.42, examples:.86, math:.28, metaphor:.72, pacing:.78} |
| }, |
| teacher_scaffold: { |
| label:"Teacher / scaffolded lesson", |
| route:"TEACHER_SCAFFOLD", |
| desc:"Prefers lesson structure: objective, definitions, examples, check-for-understanding, and takeaway.", |
| bias:{abstraction:.48, examples:.82, math:.45, metaphor:.45, pacing:.88} |
| } |
| }; |
| |
| const ids = ["abstraction","examples","math","metaphor","pacing"]; |
| const els = Object.fromEntries(ids.map(id=>[id,document.getElementById(id)])); |
| let lastRecord = null; |
| let logRecords = []; |
| let phase = 0; |
| |
| function fmt(n){return Number(n).toFixed(2)} |
| function iso(){return new Date().toISOString()} |
| function now(){return new Date().toLocaleTimeString([], {hour:"2-digit",minute:"2-digit",second:"2-digit"})} |
| |
| function initModes(){ |
| const select = document.getElementById("mode"); |
| Object.entries(modes).forEach(([k,m])=>{ |
| const opt=document.createElement("option"); |
| opt.value=k; opt.textContent=m.label; opt.title=m.desc; |
| select.appendChild(opt); |
| }); |
| select.value="visual_map"; |
| updateModeDesc(); |
| } |
| function updateLabels(){ |
| document.getElementById("vAbs").textContent=fmt(els.abstraction.value); |
| document.getElementById("vEx").textContent=fmt(els.examples.value); |
| document.getElementById("vMath").textContent=fmt(els.math.value); |
| document.getElementById("vMet").textContent=fmt(els.metaphor.value); |
| document.getElementById("vPace").textContent=fmt(els.pacing.value); |
| } |
| function updateModeDesc(){ |
| const m=modes[document.getElementById("mode").value]; |
| document.getElementById("modeDesc").textContent=m.desc; |
| } |
| function getState(){ |
| return { |
| mode:document.getElementById("mode").value, |
| modeLabel:modes[document.getElementById("mode").value].label, |
| selfDescription:document.getElementById("selfDesc").value.trim(), |
| abstraction:parseFloat(els.abstraction.value), |
| examples:parseFloat(els.examples.value), |
| math:parseFloat(els.math.value), |
| metaphor:parseFloat(els.metaphor.value), |
| pacing:parseFloat(els.pacing.value) |
| }; |
| } |
| function scoreAccessibility(s){ |
| const b=modes[s.mode].bias; |
| let dist=0; |
| for(const k of ids) dist += Math.abs(s[k]-b[k]); |
| const maxDist=5; |
| const score=Math.max(0,1-(dist/maxDist)); |
| const mismatch=1-score; |
| const A_translation=score; |
| const B_understanding=(s.examples*.22+s.pacing*.22+(1-Math.abs(s.abstraction-.55))*.20+(1-Math.abs(s.math-.45))*.16+(1-Math.abs(s.metaphor-.55))*.20); |
| const P_mismatch=mismatch*.62; |
| const S=(A_translation*B_understanding)-P_mismatch; |
| return {score,mismatch,A_translation,B_understanding,P_mismatch,S}; |
| } |
| function routeState(S){ |
| if(S > .56) return ["READY","EXACT_TRANSLATION"]; |
| if(S > .34) return ["PARTIAL","BOUNDED_TRANSLATION"]; |
| if(S > .16) return ["OPEN","NEEDS_MORE_CONTEXT"]; |
| return ["OPEN","COGNITIVE_MISMATCH_PRESSURE"]; |
| } |
| function addLog(msg){ |
| const item=document.createElement("div"); |
| item.className="logItem"; |
| const t=now(); |
| item.innerHTML=`<div class="time">${t}</div><div class="msg">${msg}</div>`; |
| document.getElementById("log").prepend(item); |
| logRecords.push({timestamp:iso(),displayTime:t,message:msg}); |
| } |
| function generate(){ |
| const s=getState(); |
| const metrics=scoreAccessibility(s); |
| const [closure, route]=routeState(metrics.S); |
| const mode=modes[s.mode]; |
| document.getElementById("accessScore").textContent=fmt(metrics.score); |
| document.getElementById("accessScore").style.color=metrics.score>.72?"var(--green)":metrics.score>.55?"var(--yellow)":"var(--orange)"; |
| document.getElementById("closureState").textContent=closure; |
| document.getElementById("closureState").style.color=closure==="READY"?"var(--green)":closure==="PARTIAL"?"var(--yellow)":"var(--orange)"; |
| document.getElementById("routeName").textContent=mode.route; |
| document.getElementById("routeName").style.color="var(--blue)"; |
| document.getElementById("liveEq").innerHTML=`S = (${fmt(metrics.A_translation)} × ${fmt(metrics.B_understanding)}) − ${fmt(metrics.P_mismatch)} ≈ <strong>${fmt(metrics.S)}</strong>`; |
| |
| const outputObj=buildTranslation(s,metrics,closure,route); |
| renderOutput(outputObj); |
| lastRecord={metadata:{title:"Substrate Cognition Translation Simulator",version:"v0.1",timestamp:iso(),boundary:"Non-diagnostic cognition translation proof-of-wiring."}, state:s, metrics, closure, route, output:outputObj}; |
| addLog(`Generated ${mode.route}: ${closure} closure readiness. Cognitive friction mapped as translation pressure, not degradation.`); |
| drawSignal(); |
| } |
| function buildTranslation(s,metrics,closure,route){ |
| const mode=modes[s.mode]; |
| const introByMode={ |
| visual_map:"Picture the whole theory as a map of moving fields. The signal enters from the left, pressure pushes on it, and HIR keeps the path readable so the signal can reach the next receiver without pretending distortion never happened.", |
| concrete_examples:"Start with ordinary examples: fog weakens a lighthouse beam, heat builds up in a laptop, a rhythm falls out of sync, a wire loses energy as heat, and a compressed file may lose detail. HIR/OAM asks what survived and what changed.", |
| technical_math:"Use the governing pressure grammar: S_t = A_t × B_t − P_t. A_t is alignment/calibration, B_t is baseline signal or structure, and P_t is pressure/loss/distortion. The result is an integrity state, not a replacement for native physics.", |
| story_metaphor:"Imagine a signal trying to cross a storm. HIR is the lantern, compass, and boundary rope. OAM is the fog, drift, heat, and false shortcut. The question is not whether the storm exists; the question is whether the signal can still arrive truthfully.", |
| stepwise_literal:"One idea at a time: HIR/OAM is a way to check whether a signal stays reliable under pressure. HIR means honesty, integrity, and respect. OAM means the pressures that distort or degrade the signal.", |
| fast_associative:"It is the same pattern across domains: light through fog, heat through gradients, rhythm through entrainment, electricity through fields, compression through residuals, conversation through cognition. The field changes; the pressure grammar carries.", |
| skeptical_redteam:"The claim is bounded: this does not replace physics and does not prove a production codec. It is a diagnostic grammar. It should be judged by whether it exposes pressure, preserves uncertainty, prevents overclaim, and routes failure honestly.", |
| lived_context:"This matters because people and systems get misunderstood under pressure. A signal can be distorted by stress, missing context, bad translation, or arbitrary closure. HIR/OAM protects the person, the claim, and the repair path.", |
| teacher_scaffold:"Learning goal: understand how one pressure grammar can explain signal integrity across domains. Definition: HIR preserves structure; OAM maps degradation. Check: can you identify the signal, the pressure, and the repair path?" |
| }; |
| const sections=[ |
| { |
| title:"1. Core idea", |
| text:introByMode[s.mode] |
| }, |
| { |
| title:"2. Pressure grammar", |
| text:makePressureText(s) |
| }, |
| { |
| title:"3. Light", |
| text:adaptDomain(s,"Light is a signal moving through a medium. Fog, glare, absorption, or bad interpretation can distort it. HIR keeps the source, medium, receiver, and interpretation honest enough to know what changed.") |
| }, |
| { |
| title:"4. Heat", |
| text:adaptDomain(s,"Heat is pressure moving through a gradient. If heat is not routed, cooled, or disclosed, it becomes degradation. In AI infrastructure, heat makes substrate pressure visible.") |
| }, |
| { |
| title:"5. Rhythm", |
| text:adaptDomain(s,"Rhythm is timing under recurrence. When timing stays coupled, systems entrain. When pressure creates drift, the loop does not close honestly until the drift is marked or repaired.") |
| }, |
| { |
| title:"6. Electricity", |
| text:adaptDomain(s,"Electricity is field-coupled charge behavior. Energy does not merely live inside the wire; the electromagnetic field carries the relationship. HIR maps coupling, loss, grounding, and boundary respect.") |
| }, |
| { |
| title:"7. Signal integrity", |
| text:adaptDomain(s,"Signal integrity asks whether the source survives transfer. If it changed, disclose it. If it was lost, mark it. If it was reconstructed, prove it. That is how HIR prevents reconstruction from impersonating source.") |
| }, |
| { |
| title:"8. Closure state", |
| text:closureText(closure, route) |
| } |
| ]; |
| const supports=makeSupports(s,metrics); |
| return {mode:mode.label, route:mode.route, closure, sections, supports}; |
| } |
| function makePressureText(s){ |
| if(s.math>.70){ |
| return "Formal form: S_t = A_t × B_t − P_t. A_t is calibration/alignment, B_t is the baseline structure being preserved, and P_t is loss, distortion, drift, heat, noise, or hidden pressure. A good system keeps claims tied to evidence and routes uncertainty instead of hiding it."; |
| } |
| if(s.pacing>.75){ |
| return "The pressure grammar has three parts. First: what is the signal? Second: what pressure is acting on it? Third: what repair path keeps the signal honest? That is the basic loop."; |
| } |
| if(s.metaphor>.75){ |
| return "The pressure grammar is a weather map for truth. It does not stop the storm. It shows where the wind is bending the signal, where the bridge holds, and where a repair path is needed."; |
| } |
| return "The pressure grammar asks what survives, what degrades, and what repair path preserves lawful structure."; |
| } |
| function adaptDomain(s,base){ |
| let extra=[]; |
| if(s.examples>.72) extra.push("Concrete check: identify the source, the medium, the pressure, and the receiver."); |
| if(s.math>.62) extra.push("Equation read: S_domain,t = A_coupling,t × B_domain,t − P_loss,t."); |
| if(s.metaphor>.70) extra.push("Metaphor read: the signal is crossing a field; HIR keeps the crossing traceable."); |
| if(s.pacing>.76) extra.push("Step: do not decide closure until the distortion has been separated from the original signal."); |
| if(s.abstraction>.75) extra.push("Generalization: this is a portable integrity operator over field-mediated transfer."); |
| return [base,...extra].join(" "); |
| } |
| function closureText(closure,route){ |
| if(closure==="READY") return "This profile can receive the full explanation cleanly. The loop can close provisionally as an understood explanation, while deeper technical proof remains open for further testing."; |
| if(closure==="PARTIAL") return "This profile receives a bounded translation. Some parts are clear, but the loop should remain open around places where examples, definitions, or evidence are still needed."; |
| return "This profile shows translation pressure. The correct move is not to force closure; it is to gather more context, slow the pacing, or change the explanation format."; |
| } |
| function makeSupports(s,metrics){ |
| const arr=[]; |
| if(s.examples>.65) arr.push("Use real examples before abstract claims."); |
| if(s.pacing>.70) arr.push("Define terms before combining them."); |
| if(s.math>.60) arr.push("Show equations with variable definitions and route decisions."); |
| if(s.metaphor>.65) arr.push("Use analogy, but mark where analogy ends."); |
| if(s.abstraction>.70) arr.push("Give the whole architecture early, then descend into cases."); |
| if(metrics.mismatch>.35) arr.push("High mismatch pressure: do not close the loop yet; translate again."); |
| arr.push("Preserve unresolved questions as open loops rather than treating confusion as failure."); |
| return arr; |
| } |
| function renderOutput(o){ |
| const box=document.getElementById("output"); |
| box.innerHTML=""; |
| const head=document.createElement("div"); |
| head.className="card"; |
| head.innerHTML=`<h3>Translation route: <span class="blue">${o.route}</span></h3> |
| <p><strong>Selected mode:</strong> ${o.mode}</p> |
| <p><strong>Closure state:</strong> ${o.closure}. This is not a diagnosis; it is a self-selected translation route.</p>`; |
| box.appendChild(head); |
| o.sections.forEach(sec=>{ |
| const div=document.createElement("div"); |
| div.className="card"; |
| div.innerHTML=`<h3>${sec.title}</h3><p>${sec.text}</p>`; |
| box.appendChild(div); |
| }); |
| const sup=document.createElement("div"); |
| sup.className="card"; |
| sup.innerHTML=`<h3>Recommended supports</h3><ul>${o.supports.map(x=>`<li>${x}</li>`).join("")}</ul>`; |
| box.appendChild(sup); |
| } |
| function copyOutput(){ |
| if(!lastRecord){generate();} |
| const lines=[]; |
| lines.push("Substrate Cognition Translation Simulator v0.1"); |
| lines.push(`Mode: ${lastRecord.output.mode}`); |
| lines.push(`Route: ${lastRecord.output.route}`); |
| lines.push(`Closure: ${lastRecord.output.closure}`); |
| lines.push(""); |
| lastRecord.output.sections.forEach(s=>{ |
| lines.push(s.title); |
| lines.push(s.text); |
| lines.push(""); |
| }); |
| lines.push("Recommended supports:"); |
| lastRecord.output.supports.forEach(x=>lines.push("- "+x)); |
| navigator.clipboard.writeText(lines.join("\n")).then(()=>addLog("Copied generated translation to clipboard.")); |
| } |
| function exportJSON(){ |
| if(!lastRecord){generate();} |
| const data={...lastRecord, steward_log:logRecords}; |
| const blob=new Blob([JSON.stringify(data,null,2)],{type:"application/json"}); |
| const url=URL.createObjectURL(blob); |
| const a=document.createElement("a"); |
| a.href=url; a.download=`substrate-cognition-translation-${Date.now()}.json`; |
| document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); |
| } |
| function trySample(){ |
| const keys=Object.keys(modes); |
| const k=keys[Math.floor(Math.random()*keys.length)]; |
| document.getElementById("mode").value=k; |
| const b=modes[k].bias; |
| for(const id of ids) els[id].value=b[id]; |
| const samples=[ |
| "I need the main picture first, then I can handle the details.", |
| "I learn through examples. If it is only abstract, I lose the thread.", |
| "I jump between domains quickly and need the system to preserve those links.", |
| "I want the proof boundaries and failure modes before I trust the claim.", |
| "I need slower pacing and clear definitions so the loop does not blur." |
| ]; |
| document.getElementById("selfDesc").value=samples[Math.floor(Math.random()*samples.length)]; |
| updateLabels(); updateModeDesc(); generate(); |
| } |
| function drawSignal(){ |
| const c=document.getElementById("signalCanvas"); |
| const ctx=c.getContext("2d"); |
| const w=c.width,h=c.height; |
| const s=getState(); |
| const metrics=scoreAccessibility(s); |
| ctx.clearRect(0,0,w,h); |
| const bg=ctx.createLinearGradient(0,0,w,h); |
| bg.addColorStop(0,"#080d15");bg.addColorStop(1,"#0f1420"); |
| ctx.fillStyle=bg;ctx.fillRect(0,0,w,h); |
| phase+=.035; |
| const mismatch=metrics.mismatch; |
| const amp=10+mismatch*42; |
| const yMid=h*.55; |
| const modeColor=metrics.S>.56?"#49d17c":metrics.S>.34?"#ffd166":metrics.S>.16?"#ff9f43":"#ff5c7a"; |
| for(let layer=0;layer<5;layer++){ |
| ctx.beginPath(); |
| for(let x=0;x<=w;x+=5){ |
| const freq=45-layer*4; |
| const y=yMid+Math.sin((x+phase*90+layer*28)/freq)*(amp*(1-layer*.11)); |
| if(x===0)ctx.moveTo(x,y);else ctx.lineTo(x,y); |
| } |
| ctx.strokeStyle=layer===0?modeColor:`rgba(101,184,255,${.10+layer*.045})`; |
| ctx.lineWidth=layer===0?2.8:1.2;ctx.stroke(); |
| } |
| const nodes=["claim","meme","question","evidence","context","analogy","repair"]; |
| nodes.forEach((n,i)=>{ |
| const x=60+i*(w-120)/(nodes.length-1); |
| const y=yMid+Math.sin((x+phase*90)/45)*amp; |
| ctx.beginPath();ctx.arc(x,y,6+s.examples*3,0,Math.PI*2); |
| ctx.fillStyle=`rgba(88,230,217,${.30+s.pacing*.35})`;ctx.fill(); |
| ctx.strokeStyle=modeColor;ctx.lineWidth=1.5;ctx.stroke(); |
| ctx.fillStyle="rgba(238,245,255,.72)";ctx.font="11px ui-monospace,monospace";ctx.textAlign="center";ctx.fillText(n,x,y-14); |
| }); |
| const cx=w*.50, cy=42; |
| ctx.fillStyle="rgba(238,245,255,.80)"; |
| ctx.font="12px ui-monospace,monospace";ctx.textAlign="center"; |
| ctx.fillText(`S_cognition ≈ ${fmt(metrics.S)} · mismatch pressure ${fmt(metrics.P_mismatch)}`,cx,cy); |
| } |
| function loop(){drawSignal();requestAnimationFrame(loop);} |
| |
| ids.forEach(id=>els[id].addEventListener("input",()=>{updateLabels();generate();})); |
| document.getElementById("mode").addEventListener("change",()=>{updateModeDesc();generate();}); |
| document.getElementById("generateBtn").addEventListener("click",generate); |
| document.getElementById("randomBtn").addEventListener("click",trySample); |
| document.getElementById("copyBtn").addEventListener("click",copyOutput); |
| document.getElementById("exportJSON").addEventListener("click",exportJSON); |
| |
| initModes(); |
| updateLabels(); |
| addLog("Simulator initialized. Cognition difference is treated as signal, not degradation."); |
| generate(); |
| loop(); |
| </script> |
| </body> |
| </html> |
|
|
