<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fear Debugger — Tone OS</title> <style> @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap'); :root { –forest-deep: #1a2318; –forest-mid: #253022; –forest-floor: #2e3d2a; –bark: #4a3728; –moss: #4a6340; –fern: #6b8f5e; –lichen: #8aab7a; –biolum-blue: #4a8b9e; –biolum-glow: #6bbdd4; –amber-spore: #c8924a; –pale-sky: #c5d8c0; –fog: #8fa68a; –chaos-red: #8b3a3a; –phi: 1.618; } - { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(–forest-deep); color: var(–pale-sky); font-family: ‘Cormorant Garamond’, serif; font-weight: 300; min-height: 100vh; overflow-x: hidden; position: relative; } /* Organic background texture */ body::before { content: ‘’; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 60% at 20% 30%, rgba(74,99,64,0.15) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 70%, rgba(74,139,158,0.08) 0%, transparent 50%), radial-gradient(ellipse 40% 40% at 50% 10%, rgba(200,146,74,0.05) 0%, transparent 40%); pointer-events: none; z-index: 0; } /* Grain overlay */ body::after { content: ‘’; position: fixed; inset: 0; background-image: url(“data:image/svg+xml,%3Csvg viewBox=‘0 0 256 256’ xmlns=‘http://www.w3.org/2000/svg’%3E%3Cfilter id=‘noise’%3E%3CfeTurbulence type=‘fractalNoise’ baseFrequency=‘0.9’ numOctaves=‘4’ stitchTiles=‘stitch’/%3E%3C/filter%3E%3Crect width=‘100%25’ height=‘100%25’ filter=‘url(%23noise)’ opacity=‘0.04’/%3E%3C/svg%3E”); pointer-events: none; z-index: 0; opacity: 0.6; } .container { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 2.5rem 2rem; } /* Header */ .header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(138,171,122,0.2); } .header-title { font-family: ‘Courier Prime’, monospace; font-size: 0.7rem; letter-spacing: 0.25em; color: var(–fog); text-transform: uppercase; margin-bottom: 0.4rem; } .header-name { font-family: ‘Cormorant Garamond’, serif; font-size: 2rem; font-weight: 300; color: var(–pale-sky); letter-spacing: 0.05em; line-height: 1; } .header-name span { color: var(–biolum-glow); font-style: italic; } .phi-badge { font-family: ‘Courier Prime’, monospace; font-size: 0.65rem; color: var(–amber-spore); background: rgba(200,146,74,0.1); border: 1px solid rgba(200,146,74,0.25); padding: 0.3rem 0.6rem; letter-spacing: 0.1em; } /* Error Poem Panel */ .poem-panel { background: rgba(46,61,42,0.4); border: 1px solid rgba(74,99,64,0.3); border-left: 3px solid var(–biolum-blue); padding: 1.8rem; margin-bottom: 2rem; position: relative; overflow: hidden; } .poem-panel::before { content: ‘’; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(–biolum-blue), transparent); } .poem-label { font-family: ‘Courier Prime’, monospace; font-size: 0.6rem; letter-spacing: 0.3em; color: var(–biolum-blue); text-transform: uppercase; margin-bottom: 1.2rem; } .poem-meta { font-family: ‘Courier Prime’, monospace; font-size: 0.68rem; color: var(–fog); line-height: 1.8; margin-bottom: 1rem; } .poem-meta .key { color: var(–lichen); } .poem-meta .val { color: var(–pale-sky); } .poem-meta .status-loop { color: var(–amber-spore); } .poem-body { font-family: ‘Cormorant Garamond’, serif; font-style: italic; font-size: 1.05rem; line-height: 2; color: var(–pale-sky); border-top: 1px solid rgba(74,99,64,0.2); padding-top: 1.2rem; margin-bottom: 1rem; } .poem-gate { font-family: ‘Courier Prime’, monospace; font-size: 0.65rem; color: var(–amber-spore); line-height: 1.9; border-top: 1px solid rgba(74,99,64,0.2); padding-top: 1rem; } .gate-pass { color: var(–lichen); } .gate-action { color: var(–biolum-glow); font-style: normal; } /* Archetype Cockpit */ .section-label { font-family: ‘Courier Prime’, monospace; font-size: 0.6rem; letter-spacing: 0.3em; color: var(–fog); text-transform: uppercase; margin-bottom: 1rem; } .cockpit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; } .archetype-card { background: rgba(26,35,24,0.7); border: 1px solid rgba(74,99,64,0.25); padding: 1.3rem; position: relative; transition: border-color 0.4s ease; cursor: default; } .archetype-card:hover { border-color: rgba(107,189,212,0.4); } .archetype-card.load-high { border-top: 2px solid var(–amber-spore); } .archetype-card.load-stable { border-top: 2px solid var(–lichen); } .archetype-card.load-critical { border-top: 2px solid var(–chaos-red); } .arch-name { font-family: ‘Cormorant Garamond’, serif; font-size: 1.1rem; font-weight: 400; color: var(–pale-sky); margin-bottom: 0.8rem; letter-spacing: 0.05em; } .arch-meta { font-family: ‘Courier Prime’, monospace; font-size: 0.6rem; line-height: 2; color: var(–fog); } .arch-meta .label { color: var(–moss); } .phi-bar-wrap { margin: 0.8rem 0; height: 3px; background: rgba(74,99,64,0.2); border-radius: 0; overflow: hidden; } .phi-bar { height: 100%; transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .phi-low .phi-bar { background: var(–amber-spore); width: 42%; } .phi-high .phi-bar { background: var(–lichen); width: 88%; } .phi-chaos .phi-bar { background: var(–chaos-red); width: 10%; } .arch-nudge { font-family: ‘Cormorant Garamond’, serif; font-style: italic; font-size: 0.8rem; color: var(–biolum-glow); margin-top: 0.8rem; line-height: 1.5; border-top: 1px solid rgba(74,99,64,0.15); padding-top: 0.6rem; } /* φ-Toast Notification */ .toast-demo { margin-bottom: 2rem; } .toast-container { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .phi-toast { position: relative; background: rgba(46,61,42,0.85); border: 1px solid rgba(107,189,212,0.3); padding: 1.2rem 1.5rem; max-width: 340px; animation: bloomIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; backdrop-filter: blur(8px); } .phi-toast::before { content: ‘’; position: absolute; inset: -4px; border: 1px solid rgba(107,189,212,0.1); pointer-events: none; animation: pulseGlow 5s ease-in-out infinite; } @keyframes bloomIn { from { opacity: 0; transform: scale(0.92); filter: blur(4px); } to { opacity: 1; transform: scale(1); filter: blur(0); } } @keyframes pulseGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } } .toast-source { font-family: ‘Courier Prime’, monospace; font-size: 0.58rem; letter-spacing: 0.2em; color: var(–biolum-blue); margin-bottom: 0.5rem; } .toast-message { font-family: ‘Cormorant Garamond’, serif; font-size: 0.95rem; color: var(–pale-sky); line-height: 1.6; margin-bottom: 1rem; } .toast-actions { display: flex; gap: 0.6rem; } .toast-btn { font-family: ‘Courier Prime’, monospace; font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.4rem 0.8rem; border: 1px solid; background: transparent; cursor: pointer; transition: all 0.3s ease; } .btn-pause { color: var(–amber-spore); border-color: rgba(200,146,74,0.4); } .btn-pause:hover { background: rgba(200,146,74,0.1); } .btn-source { color: var(–biolum-glow); border-color: rgba(107,189,212,0.4); } .btn-source:hover { background: rgba(107,189,212,0.1); } .toast-note { font-family: ‘Cormorant Garamond’, serif; font-style: italic; font-size: 0.78rem; color: var(–fog); max-width: 220px; line-height: 1.7; } /* Tone Mirror */ .tone-mirror { background: rgba(26,35,24,0.8); border: 1px solid rgba(74,99,64,0.25); padding: 1.8rem; margin-bottom: 2rem; } .mirror-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .mirror-indicator { display: flex; align-items: center; gap: 0.5rem; font-family: ‘Courier Prime’, monospace; font-size: 0.6rem; letter-spacing: 0.15em; color: var(–fog); } .indicator-dot { width: 6px; height: 6px; border-radius: 50%; background: var(–lichen); animation: breathe 5s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } } .tone-textarea { width: 100%; background: rgba(46,61,42,0.3); border: 1px solid rgba(74,99,64,0.2); color: var(–pale-sky); font-family: ‘Cormorant Garamond’, serif; font-size: 1rem; line-height: 1.8; padding: 1rem; resize: vertical; min-height: 100px; outline: none; transition: filter 0.6s ease, border-color 0.4s ease; } .tone-textarea:focus { border-color: rgba(107,189,212,0.3); } .tone-textarea.racing { filter: saturate(0.3) brightness(0.8); } .tone-feedback { font-family: ‘Cormorant Garamond’, serif; font-style: italic; font-size: 0.82rem; color: var(–biolum-glow); margin-top: 0.8rem; min-height: 1.4em; transition: opacity 0.5s ease; opacity: 0; } .tone-feedback.visible { opacity: 1; } /* Fir Protocol */ .fir-panel { background: rgba(26,35,24,0.6); border: 1px solid rgba(74,99,64,0.2); border-right: 3px solid rgba(74,99,64,0.5); padding: 1.5rem 1.8rem; margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .fir-text { font-family: ‘Cormorant Garamond’, serif; font-style: italic; font-size: 1.05rem; color: var(–fog); line-height: 1.7; max-width: 500px; } .fir-text strong { color: var(–lichen); font-style: normal; font-weight: 400; } .fir-stat { text-align: right; font-family: ‘Courier Prime’, monospace; font-size: 0.6rem; color: var(–fog); letter-spacing: 0.1em; line-height: 2; white-space: nowrap; } .fir-stat .big { display: block; font-size: 2rem; color: var(–lichen); letter-spacing: -0.02em; line-height: 1; margin-bottom: 0.2rem; } /* Footer */ .footer { padding-top: 2rem; border-top: 1px solid rgba(74,99,64,0.15); display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; } .footer-quote { font-family: ‘Cormorant Garamond’, serif; font-style: italic; font-size: 0.85rem; color: var(–fog); max-width: 400px; line-height: 1.7; } .version-tag { font-family: ‘Courier Prime’, monospace; font-size: 0.58rem; color: rgba(138,171,122,0.4); letter-spacing: 0.15em; } /* Breathing ring animation for the pulse-sync demo */ .pulse-ring-demo { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; position: relative; flex-shrink: 0; } .pulse-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(107,189,212,0.3); animation: expandRing 10s ease-in-out infinite; } .pulse-ring:nth-child(1) { width: 20px; height: 20px; animation-delay: 0s; } .pulse-ring:nth-child(2) { width: 40px; height: 40px; animation-delay: 2s; } .pulse-ring:nth-child(3) { width: 60px; height: 60px; animation-delay: 4s; } .pulse-ring:nth-child(4) { width: 80px; height: 80px; animation-delay: 6s; } @keyframes expandRing { 0%, 40% { opacity: 0; transform: scale(0.8); } 50% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } } .pulse-core { width: 8px; height: 8px; border-radius: 50%; background: var(–biolum-glow); position: relative; z-index: 1; box-shadow: 0 0 8px var(–biolum-glow); } </style> </head> <body> <div class="container"> <!-- Header --> <div class="header"> <div> <div class="header-title">Tone OS · v1.0.0-Alpha</div> <div class="header-name">Fear <span>Debugger</span></div> </div> <div style="text-align:right"> <div class="phi-badge">φ-GATE ACTIVE</div> <div style="font-family:'Courier Prime',monospace;font-size:0.58rem;color:var(--fog);margin-top:0.4rem;letter-spacing:0.1em">MINIMUM VIABLE PEACE</div> </div> </div> <!-- Error Poem --> <div class="poem-panel"> <div class="poem-label">📜 Active Error Poem — Audit Log</div> <div class="poem-meta"> <span class="key">Source:</span> <span class="val">Root/Systems/Self-Worth/v.1998</span><br> <span class="key">Status:</span> <span class="status-loop">⟳ LOOPING</span><br> <span class="key">Sub-routine:</span> <span class="val">"Comparison" (execution: 40ms)</span> </div> <div class="poem-body"> The script says: The door is locked from the outside.<br> The logic says: You are the one who turned the key.<br><br> You are a draft in a room full of finished books. </div> <div class="poem-gate"> <span style="color:var(--fog)">φ-gate check:</span> <span style="color:var(--amber-spore)">resonance 0.42 — jagged</span><br> <span style="color:var(--fog)">The Fir does not flinch.</span> <span class="gate-pass">It only waits.</span><br> <span style="color:var(--fog)">Action:</span> <span class="gate-action">Refactor "Draft" → Version 1.0.0-Alpha</span><br> <span style="color:var(--fog)">β-nudge:</span> <span style="color:var(--pale-sky)">Breathing is a background process. <em>Bring it to the foreground.</em></span> </div> </div> <!-- Archetype Cockpit --> <div class="section-label">⬡ Archetype Cockpit — System Load · Star Chart View</div> <div class="cockpit-grid"> ``` <div class="archetype-card load-high"> <div class="arch-name">The Guardian</div> <div class="arch-meta"> <span class="label">LOAD</span> · High (Threat Scan)<br> <span class="label">φ-RESONANCE</span> · 0.42 </div> <div class="phi-bar-wrap phi-low"><div class="phi-bar"></div></div> <div class="arch-nudge">Switch to "The Poet" — this threat is a legacy loop, not a live signal.</div> </div> <div class="archetype-card load-stable"> <div class="arch-name">The Clinician</div> <div class="arch-meta"> <span class="label">LOAD</span> · Stable<br> <span class="label">φ-RESONANCE</span> · 0.88 </div> <div class="phi-bar-wrap phi-high"><div class="phi-bar"></div></div> <div class="arch-nudge">Proceed with audit. Logic is clear. The corridor is open.</div> </div> <div class="archetype-card load-critical"> <div class="arch-name">The Wailer</div> <div class="arch-meta"> <span class="label">LOAD</span> · Critical<br> <span class="label">φ-RESONANCE</span> · 0.10 </div> <div class="phi-bar-wrap phi-chaos"><div class="phi-bar"></div></div> <div class="arch-nudge">Initiate Fir Protocol. Silence mode active. No action required.</div> </div> ``` </div> <!-- Fir Protocol --> <div class="fir-panel"> <div class="fir-text"> The <strong>Fir Protocol</strong> is not stillness as absence —<br> it is stillness as <strong>sufficient answer.</strong><br> The tree does not argue with the wind about the wind's direction. </div> <div class="fir-stat"> <span class="big">φ⁻¹</span> GOLDEN CORRIDOR<br> 0.618 — 0.667<br> <span style="color:var(--lichen)">COHERENCE THRESHOLD</span> </div> </div> <!-- φ-Toast Demo --> <div class="toast-demo"> <div class="section-label">🌿 Pulse-Sync Notification — φ-Gate Toast</div> <div class="toast-container"> <div class="pulse-ring-demo"> <div class="pulse-ring"></div> <div class="pulse-ring"></div> <div class="pulse-ring"></div> <div class="pulse-ring"></div> <div class="pulse-core"></div> </div> <div class="phi-toast"> <div class="toast-source">THREAD · Root/Systems/Self-Worth · 9 AM Trigger</div> <div class="toast-message">Your "Standard High-Stakes" script is firing. This is a known pattern, not a new emergency.</div> <div class="toast-actions"> <button class="toast-btn btn-pause" onclick="this.textContent='⧖ Waiting Room (20m)'">[Pause Thread]</button> <button class="toast-btn btn-source" onclick="alert('Source: Comparison sub-routine, active since v.1998. Legacy loop. No patch needed — only witness.')">[View Source]</button> </div> </div> <div class="toast-note"> Blooms from center at 0.1 Hz —<br>the frequency of a resonant breath.<br>No sharp edges. No urgency theater. </div> </div> </div> <!-- Tone Mirror --> <div class="tone-mirror"> <div class="mirror-header"> <div class="section-label" style="margin-bottom:0">⟳ Tone Mirror — Live Feedback</div> <div class="mirror-indicator"> <div class="indicator-dot"></div> BIOLOGICAL SYNC ACTIVE </div> </div> <textarea class="tone-textarea" id="toneInput" placeholder="Type here. The mirror is watching for absolute words — always, never, fail, can't, must..." oninput="checkTone(this)" ></textarea> <div class="tone-feedback" id="toneFeedback"></div> </div> <!-- Footer --> <div class="footer"> <div class="footer-quote"> "You are not the bug.<br> You are the compiler learning its own source." </div> <div class="version-tag"> RESONA OS · FEAR DEBUGGER · v1.0.0-ALPHA<br> QOTE φ-GATE COHERENCE PROTOCOL </div> </div> </div> <script> const absoluteWords = ['always', 'never', 'fail', 'failed', 'failing', 'can\'t', 'cannot', 'must', 'every', 'worst', 'ruined', 'hopeless', 'impossible', 'worthless']; const calmWords = ['maybe', 'sometimes', 'often', 'learning', 'trying', 'exploring', 'curious', 'noticing']; let raceTimer = null; let lastLength = 0; let racingCount = 0; function checkTone(el) { const text = el.value.toLowerCase(); const feedback = document.getElementById('toneFeedback'); // Check for absolute words const hasAbsolute = absoluteWords.some(w => text.includes(w)); // Check typing speed const currentLength = el.value.length; if (currentLength - lastLength > 3) racingCount++; else if (racingCount > 0) racingCount = Math.max(0, racingCount - 1); lastLength = currentLength; const isRacing = racingCount > 5 || hasAbsolute; if (isRacing) { el.classList.add('racing'); feedback.classList.add('visible'); if (hasAbsolute) { feedback.textContent = 'I see an absolute word. Nothing is always. Nothing is never. This is a signal, not a verdict.'; } else { feedback.textContent = 'I see you\'re racing. I\'ll wait for you to catch your breath.'; } } else { el.classList.remove('racing'); if (text.length > 20 && calmWords.some(w => text.includes(w))) { feedback.classList.add('visible'); feedback.textContent = 'The resonance is settling. The Fir approves.'; } else { feedback.classList.remove('visible'); } } } // Animate phi bars on load setTimeout(() => { document.querySelectorAll('.phi-bar').forEach(bar => { bar.style.width = bar.parentElement.classList.contains('phi-low') ? '42%' : bar.parentElement.classList.contains('phi-high') ? '88%' : '10%'; }); }, 300); </script> </body> </html>
I'll build this Fear Debugger — Tone OS dashboard as a full Next.js application with the beautiful forest floor palette and all the interactive features. Let me start by reading the current project structure and then creating the components.
Now I'll create the Fear Debugger dashboard with the forest floor palette and all interactive components. Let me update the globals.css with the custom theme, update the layout with proper fonts, and create all the components.
Now let me create the components. I'll create them in separate files for better organization:
Now let me create the main page that brings all components together with the organic background texture:
The Fear Debugger — Tone OS dashboard is now complete. I've built a fully interactive Next.js application with:
The forest floor palette uses deep greens, bioluminescent blues, amber spore accents, and lichen tones — all accessible via Tailwind classes. The design maintains no sharp corners, organic animations (breathe, bloom-in, pulse-glow), and the philosophical framing of fear as a debuggable system pattern.
You can send messages while the preview loads