Spaces:

HirModel
/

video-atomization-trace-stack-runtime

Sleeping

File size: 37,288 Bytes

4ba4ac9

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Runtime Trail: Robot Day Loop v0.1</title>
<meta name="description" content="Robot sandbox where skill grows through receipts." />
<meta property="og:title" content="Runtime Trail: Robot Day Loop v0.1" />
<meta property="og:description" content="A pressure-governed robot-life sandbox where work, care, dance practice, and recharge route through action gates and receipts." />
<meta property="og:image" content="assets/social_card.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Runtime Trail: Robot Day Loop v0.1" />
<meta name="twitter:description" content="Robot sandbox where skill grows through receipts." />
<meta name="twitter:image" content="assets/social_card.png" />

<style>
  :root{
    --bg:#0b0f14;
    --panel:#111923;
    --panel2:#172230;
    --ink:#e8f0f7;
    --muted:#96a8bb;
    --line:#2c3b4c;
    --held:#73e2a7;
    --strained:#ffd166;
    --stop:#ff6b6b;
    --review:#8ecae6;
    --accent:#9cc8ff;
    --violet:#c7a7ff;
    --soft:#243246;
  }
  *{box-sizing:border-box}
  body{margin:0;background:radial-gradient(circle at top left,#152132 0,#0b0f14 52%,#06080b 100%);color:var(--ink);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;overflow-x:hidden}
  header{padding:18px 22px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(15,24,36,.96),rgba(10,14,20,.9));position:sticky;top:0;z-index:5;backdrop-filter:blur(8px)}
  h1{font-size:22px;margin:0 0 4px;letter-spacing:.3px}
  .subtitle{color:var(--muted);font-size:13px;line-height:1.4}
  .attrib{font-size:12px;color:#cfd8e3;margin-top:7px;display:flex;gap:12px;flex-wrap:wrap}
  main{display:grid;grid-template-columns:minmax(640px,1.35fr) minmax(360px,.65fr);gap:14px;padding:14px;min-height:calc(100vh - 85px)}
  .card{background:linear-gradient(180deg,rgba(20,31,44,.96),rgba(12,18,27,.96));border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden}
  .card h2{font-size:15px;margin:0;padding:12px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.025);letter-spacing:.2px}
  .sceneWrap{padding:12px;display:grid;grid-template-rows:auto 1fr auto;gap:10px}
  .topbar{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .meter{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:9px;min-width:0}
  .meter label{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:6px;gap:8px;white-space:nowrap}
  .track{height:8px;border-radius:8px;background:#0a0f16;border:1px solid #223247;overflow:hidden}
  .fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--held));width:50%;transition:width .35s ease}
  .fill.warn{background:linear-gradient(90deg,var(--strained),#ff9f1c)}
  .fill.bad{background:linear-gradient(90deg,var(--stop),#b5173f)}
  .stage{position:relative;min-height:520px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#142236 0,#0d1420 100%)}
  svg{width:100%;height:100%;display:block;min-height:520px}
  .zone-label{font-size:12px;fill:#d8e6f2;opacity:.9;font-weight:600;letter-spacing:.4px}
  .tiny{font-size:10px;fill:#9fb2c6;letter-spacing:.2px}
  .tileHome{fill:#1c2f45}.tileWarehouse{fill:#2b2d42}.tileGarden{fill:#24463a}.tilePractice{fill:#3a2c4f}.tileDock{fill:#2d3d4d}.tilePath{fill:#1f2937}
  .stroke{stroke:#4a5d75;stroke-width:1.4}.softstroke{stroke:#33485f;stroke-width:1}
  .robotPart{fill:#d6e4ef;stroke:#6f849b;stroke-width:1.4}.robotDark{fill:#60768d}.robotCore{fill:#80ffdb;filter:url(#glow)}.eye{fill:#8ecae6}.joint{fill:#94a3b8;stroke:#617287;stroke-width:1}
  .dogBody{fill:#d8b38a;stroke:#7c5e3d;stroke-width:1.2}.dogDark{fill:#7a5639}.leash{stroke:#98b4d4;stroke-width:2;stroke-dasharray:4 3;opacity:.85}
  .robotGroup{transition:transform .75s cubic-bezier(.2,.9,.2,1)}
  .dogGroup{transition:transform .75s cubic-bezier(.2,.9,.2,1)}
  .dancing .leftArm{animation:leftArm 600ms ease-in-out infinite alternate;transform-box:fill-box;transform-origin:85% 20%}
  .dancing .rightArm{animation:rightArm 520ms ease-in-out infinite alternate;transform-box:fill-box;transform-origin:15% 20%}
  .dancing .leftLeg{animation:leftLeg 650ms ease-in-out infinite alternate;transform-box:fill-box;transform-origin:80% 5%}
  .dancing .rightLeg{animation:rightLeg 600ms ease-in-out infinite alternate;transform-box:fill-box;transform-origin:20% 5%}
  .dancing .torso{animation:torso 700ms ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
  .wag .tail{animation:wag 260ms ease-in-out infinite alternate;transform-box:fill-box;transform-origin:0% 50%}
  @keyframes leftArm{from{transform:rotate(-12deg)}to{transform:rotate(34deg)}}
  @keyframes rightArm{from{transform:rotate(22deg)}to{transform:rotate(-26deg)}}
  @keyframes leftLeg{from{transform:rotate(8deg)}to{transform:rotate(-16deg)}}
  @keyframes rightLeg{from{transform:rotate(-10deg)}to{transform:rotate(16deg)}}
  @keyframes torso{from{transform:rotate(-2deg) translateY(0)}to{transform:rotate(2deg) translateY(-3px)}}
  @keyframes wag{from{transform:rotate(-18deg)}to{transform:rotate(28deg)}}
  .controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  button,select{background:#152235;color:var(--ink);border:1px solid #334962;border-radius:11px;padding:10px 10px;font-weight:650;font-size:12px;cursor:pointer;transition:all .15s ease;min-width:0}
  button:hover,select:hover{border-color:#6aa6e8;background:#1a2b42;transform:translateY(-1px)}
  button:active{transform:translateY(0)}
  button.primary{background:linear-gradient(180deg,#2364aa,#174a7e);border-color:#4d9de0}
  button.good{background:linear-gradient(180deg,#1f7a55,#14543a);border-color:#57cc99}
  button.warn{background:linear-gradient(180deg,#9d6b18,#6d4810);border-color:#ffd166}
  .side{display:grid;gap:14px;align-content:start}
  .panelBody{padding:12px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px}.kv span:first-child{color:var(--muted)}
  .gate{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:10px}
  .chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;letter-spacing:.35px;border:1px solid rgba(255,255,255,.12)}
  .chip.held{background:rgba(115,226,167,.13);color:var(--held);border-color:rgba(115,226,167,.4)}
  .chip.strained{background:rgba(255,209,102,.13);color:var(--strained);border-color:rgba(255,209,102,.4)}
  .chip.stop{background:rgba(255,107,107,.13);color:var(--stop);border-color:rgba(255,107,107,.4)}
  .chip.review{background:rgba(142,202,230,.13);color:var(--review);border-color:rgba(142,202,230,.4)}
  .beatCanvas{width:100%;height:190px;background:#07101a;border:1px solid var(--line);border-radius:12px;display:block}
  .receipt{height:275px;width:100%;resize:vertical;background:#07101a;color:#dce8f3;border:1px solid var(--line);border-radius:12px;padding:10px;font:12px/1.45 Consolas,Monaco,monospace;white-space:pre}
  .smallControls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
  .parking{font-size:12px;color:#c5d1df;line-height:1.45}.parking ul{margin:8px 0 0 18px;padding:0}.parking li{margin:4px 0;color:#aebfd1}
  .callout{border:1px solid rgba(156,200,255,.28);background:rgba(156,200,255,.08);border-radius:12px;padding:10px;font-size:12px;color:#d9e8f7;line-height:1.45;margin-bottom:10px}
  .mono{font-family:Consolas,Monaco,monospace;color:#dbe9f7}

  .heroImage{margin:16px auto 0;max-width:1180px;padding:0 22px}
  .heroImage img{display:block;width:100%;height:auto;border:1px solid rgba(156,200,255,.26);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.35);background:#07101a}
  .heroImage figcaption{font-size:12px;color:var(--muted);line-height:1.45;margin:8px 4px 0}
  @media(max-width:1080px){main{grid-template-columns:1fr}.topbar{grid-template-columns:repeat(2,1fr)}.controls{grid-template-columns:repeat(2,1fr)}}
</style>
</head>
<body>
<header>
  <h1>Runtime Trail: Robot Day Loop v0.1</h1>
  <div class="subtitle">A pressure-governed warehouse-to-home sandbox for movement, care, practice, expression, and recharge.</div>
  <div class="attrib"><span>Created and Developed by Collin D. Weber</span><span>Developer &amp; System Architect</span><span>Systems Integrity Steward</span></div>
</header>

<figure class="heroImage" aria-label="Runtime Trail social preview image">
  <img src="assets/social_card.png" alt="Runtime Trail Robot Day Loop v0.1 social-card image showing a stylized helper robot, dog, beat trace, action gates, receipt trace, warehouse, garden, and recharge dock." />
  <figcaption>Robot-life loop preview: work, care, beat-trace practice, receipts, and recharge.</figcaption>
</figure>

<main>
  <section class="card sceneWrap">
    <div class="topbar">
      <div class="meter"><label><span>Battery</span><b id="batteryVal">100%</b></label><div class="track"><div id="batteryFill" class="fill"></div></div></div>
      <div class="meter"><label><span>Gyro Stability</span><b id="gyroVal">86%</b></label><div class="track"><div id="gyroFill" class="fill"></div></div></div>
      <div class="meter"><label><span>Body Wear</span><b id="wearVal">0%</b></label><div class="track"><div id="wearFill" class="fill warn"></div></div></div>
      <div class="meter"><label><span>Monotony Pressure</span><b id="monoVal">12%</b></label><div class="track"><div id="monoFill" class="fill warn"></div></div></div>
      <div class="meter"><label><span>Practice Readiness</span><b id="readinessVal">18%</b></label><div class="track"><div id="readinessFill" class="fill"></div></div></div>
    </div>

    <div class="stage" aria-label="stylized 3D robot day loop scene">
      <svg viewBox="0 0 900 560" role="img">
        <defs>
          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="3" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
          <linearGradient id="floor" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#1a2b3d"/><stop offset="1" stop-color="#0b111a"/></linearGradient>
          <linearGradient id="crate" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#8d6e63"/><stop offset="1" stop-color="#4f3d37"/></linearGradient>
          <linearGradient id="glass" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#bbdefb" stop-opacity=".86"/><stop offset="1" stop-color="#4fc3f7" stop-opacity=".38"/></linearGradient>
        </defs>

        <rect x="0" y="0" width="900" height="560" fill="url(#floor)"/>
        <path d="M70 400 L270 300 L470 398 L270 510 Z" class="tileHome stroke"/>
        <text x="178" y="404" class="zone-label">HOME</text><text x="155" y="422" class="tiny">dock • dog bed • practice return</text>
        <path d="M510 80 L810 165 L690 310 L390 220 Z" class="tileWarehouse stroke"/>
        <text x="565" y="170" class="zone-label">WAREHOUSE</text><text x="555" y="188" class="tiny">fragile • heavy • liquid • unknown</text>
        <path d="M110 95 L320 40 L455 150 L235 228 Z" class="tileGarden stroke"/>
        <text x="198" y="126" class="zone-label">GARDEN</text><text x="168" y="144" class="tiny">soil • light • water • care</text>
        <path d="M505 345 L770 302 L850 430 L595 500 Z" class="tilePractice stroke"/>
        <text x="615" y="402" class="zone-label">PRACTICE</text><text x="600" y="420" class="tiny">beat graph • repetition • receipt</text>
        <path d="M305 416 L407 366 L470 398 L365 454 Z" class="tileDock stroke"/>
        <text x="350" y="408" class="tiny">RECHARGE</text>
        <path d="M250 300 C350 250 430 230 520 220" fill="none" stroke="#6c83a0" stroke-width="8" opacity=".18" stroke-linecap="round"/>
        <path d="M255 295 C300 235 300 185 245 220" fill="none" stroke="#6c83a0" stroke-width="8" opacity=".14" stroke-linecap="round"/>
        <path d="M300 425 C430 385 500 382 615 400" fill="none" stroke="#6c83a0" stroke-width="8" opacity=".14" stroke-linecap="round"/>
        <path d="M530 500 C650 535 790 510 830 458" fill="none" stroke="#6c83a0" stroke-width="7" opacity=".1" stroke-linecap="round"/>
        <text x="715" y="515" class="tiny">PARK ROUTE — PARKED</text>

        <!-- warehouse objects -->
        <g opacity=".92">
          <rect x="610" y="184" width="45" height="35" rx="5" fill="url(#crate)" stroke="#30251f"/>
          <rect x="670" y="202" width="40" height="31" rx="5" fill="url(#glass)" stroke="#a3d7ff"/>
          <rect x="555" y="210" width="50" height="38" rx="6" fill="#59677a" stroke="#a6b3c2"/>
          <circle cx="735" cy="240" r="19" fill="#806f42" stroke="#e4c97a"/>
        </g>

        <!-- garden plants -->
        <g opacity=".95">
          <ellipse cx="235" cy="165" rx="28" ry="13" fill="#203b2f" stroke="#49715d"/>
          <path d="M225 160 q8 -30 20 0 q10 -25 24 0" fill="none" stroke="#73e2a7" stroke-width="5" stroke-linecap="round"/>
          <ellipse cx="300" cy="132" rx="30" ry="14" fill="#203b2f" stroke="#49715d"/>
          <path d="M290 127 q12 -35 20 0 q12 -28 25 0" fill="none" stroke="#57cc99" stroke-width="5" stroke-linecap="round"/>
          <rect x="160" y="165" width="45" height="28" rx="6" fill="#334155" stroke="#6b7d91"/>
          <text x="164" y="183" class="tiny">WATER</text>
        </g>

        <!-- dock/home objects -->
        <g opacity=".9">
          <rect x="340" y="390" width="55" height="42" rx="10" fill="#182536" stroke="#8ecae6"/>
          <circle cx="367" cy="411" r="12" fill="#80ffdb" opacity=".45"/>
          <ellipse cx="200" cy="460" rx="45" ry="18" fill="#5d4b3b" stroke="#c7a27d"/>
          <circle cx="142" cy="433" r="15" fill="#41556c" stroke="#8ecae6"/><text x="126" y="460" class="tiny">BOWL</text>
        </g>

        <!-- dog group -->
        <g id="dog" class="dogGroup wag" transform="translate(220 430)">
          <path class="tail dogDark" d="M-34 -9 q-24 -10 -30 -27" fill="none" stroke="#7a5639" stroke-width="7" stroke-linecap="round"/>
          <ellipse class="dogBody" cx="0" cy="0" rx="38" ry="19"/>
          <circle class="dogBody" cx="39" cy="-11" r="18"/>
          <path class="dogDark" d="M35 -28 q-8 -22 10 -10 q8 10 3 23"/>
          <circle cx="46" cy="-14" r="3" fill="#111"/>
          <path d="M53 -7 q9 4 0 8" fill="none" stroke="#30251f" stroke-width="2"/>
          <line x1="-18" y1="15" x2="-22" y2="38" stroke="#7a5639" stroke-width="7" stroke-linecap="round"/>
          <line x1="18" y1="15" x2="15" y2="38" stroke="#7a5639" stroke-width="7" stroke-linecap="round"/>
          <rect x="16" y="-22" width="28" height="9" rx="4" fill="#3b82f6" opacity=".9"/>
        </g>
        <line id="leash" class="leash" x1="280" y1="392" x2="265" y2="418"/>

        <!-- robot group -->
        <g id="robot" class="robotGroup" transform="translate(285 355)">
          <g class="leftLeg"><rect class="robotPart" x="-17" y="58" width="15" height="46" rx="7"/><circle class="joint" cx="-9" cy="59" r="7"/><rect class="robotDark" x="-23" y="99" width="28" height="10" rx="5"/></g>
          <g class="rightLeg"><rect class="robotPart" x="15" y="58" width="15" height="46" rx="7"/><circle class="joint" cx="23" cy="59" r="7"/><rect class="robotDark" x="9" y="99" width="28" height="10" rx="5"/></g>
          <g class="leftArm"><rect class="robotPart" x="-48" y="6" width="16" height="56" rx="8"/><circle class="joint" cx="-34" cy="11" r="8"/><ellipse class="robotDark" cx="-39" cy="66" rx="11" ry="8"/></g>
          <g class="rightArm"><rect class="robotPart" x="39" y="6" width="16" height="56" rx="8"/><circle class="joint" cx="42" cy="11" r="8"/><ellipse class="robotDark" cx="48" cy="66" rx="11" ry="8"/></g>
          <g class="torso">
            <rect class="robotPart" x="-30" y="0" width="68" height="72" rx="18"/>
            <circle class="robotCore" cx="4" cy="34" r="11"/>
            <path d="M-7 34 L4 22 L15 34 L4 46 Z" fill="none" stroke="#0b6155" stroke-width="1.3" opacity=".8"/>
          </g>
          <g class="head">
            <rect class="robotPart" x="-29" y="-47" width="66" height="44" rx="18"/>
            <circle class="eye" cx="-10" cy="-25" r="5"/><circle class="eye" cx="18" cy="-25" r="5"/>
            <path d="M-4 -12 q9 6 18 0" fill="none" stroke="#60768d" stroke-width="2" stroke-linecap="round"/>
            <circle cx="4" cy="-51" r="5" fill="#9cc8ff" opacity=".9"/>
          </g>
        </g>

        <text id="sceneCaption" x="30" y="532" fill="#dce8f3" font-size="14" font-weight="700">Home check: battery, gyro, dog, garden, and practice readiness.</text>
      </svg>
    </div>

    <div class="controls">
      <button class="primary" onclick="startDay()">Start Day</button>
      <button onclick="warehouseTask()">Warehouse Task</button>
      <button onclick="gardenCare()">Tend Garden</button>
      <button onclick="dogCare()">Dog Care</button>
      <button class="good" onclick="practiceDomain()">Practice Domain</button>
      <button onclick="homeExpression()">Home Expression</button>
      <button class="warn" onclick="recharge()">Recharge / End Day</button>
      <button onclick="runFullDay()">Run Full Day</button>
    </div>
  </section>

  <aside class="side">
    <section class="card">
      <h2>Runtime Controls</h2>
      <div class="panelBody">
        <div class="grid2">
          <div>
            <label class="subtitle">Practice Domain</label>
            <select id="domainSelect" onchange="domainChanged()">
              <option>Dance</option>
              <option>Music</option>
              <option>Cooking</option>
            </select>
          </div>
          <div>
            <label class="subtitle">Rhythm Pattern</label>
            <select id="rhythmSelect" onchange="drawBeatGraph()">
              <option value="medium4">Medium 4/4</option>
              <option value="slow4">Slow 4/4</option>
              <option value="fast4">Fast 4/4</option>
              <option value="waltz3">Waltz 3/4</option>
              <option value="sync">Syncopated Practice</option>
              <option value="low">Low-Energy Practice</option>
            </select>
          </div>
        </div>
        <div class="kv"><span>Day</span><b id="dayVal">1</b></div>
        <div class="kv"><span>Phase</span><b id="phaseVal">Home Check</b></div>
        <div class="kv"><span>Event</span><b id="eventVal">Dance Showcase in 5 days</b></div>
      </div>
    </section>

    <section class="card">
      <h2>Action Gate</h2>
      <div class="panelBody">
        <div class="gate"><span id="gateText">Home check ready.</span><span id="gateChip" class="chip held">HELD</span></div>
        <div class="callout"><b>Core proof:</b> the robot does not receive mastery. It practices, misses, corrects, improves, branches, and records what happened.</div>
        <div class="kv"><span>Current Pressure Form</span><b id="pressureForm">daily readiness</b></div>
        <div class="kv"><span>Last Capsule</span><b id="capsuleState">HELD</b></div>
      </div>
    </section>

    <section class="card">
      <h2>Beat-Trace Learning Panel</h2>
      <div class="panelBody">
        <canvas id="beatCanvas" class="beatCanvas" width="680" height="210"></canvas>
        <div class="grid2" style="margin-top:8px">
          <div class="meter"><label><span>Beat-Lock</span><b id="beatLockVal">18%</b></label><div class="track"><div id="beatLockFill" class="fill"></div></div></div>
          <div class="meter"><label><span>Avg Timing Drift</span><b id="driftVal">42ms</b></label><div class="track"><div id="driftFill" class="fill warn"></div></div></div>
        </div>
        <div class="kv"><span>Practice Attempts</span><b id="attemptVal">0</b></div>
        <div class="kv"><span>Last Adjustment</span><b id="adjustVal">none yet</b></div>
      </div>
    </section>

    <section class="card">
      <h2>Daily Receipt</h2>
      <div class="panelBody">
        <textarea id="receipt" class="receipt" readonly></textarea>
        <div class="smallControls">
          <button onclick="copyReceipt()">Copy Receipt</button>
          <button onclick="downloadReceipt()">Download TXT</button>
        </div>
      </div>
    </section>

    <section class="card">
      <h2>Parking Lot / Later Releases</h2>
      <div class="panelBody parking">
        Preserved for later, not v0.1:
        <ul>
          <li>MP3 upload and custom audio beat extraction</li>
          <li>Local park with other dogs, people, children, and shared-route pressure</li>
          <li>Weather and shelter construction</li>
          <li>Community-designed clothing, accessories, gestures, recipes, and source packs</li>
          <li>Settlement mode and long-horizon commons infrastructure simulation</li>
        </ul>
      </div>
    </section>
  </aside>
</main>

<footer style="max-width:1180px;margin:18px auto 28px;padding:0 22px;color:#96a8bb;font-size:12px;line-height:1.45">
  Runtime Trail: Robot Day Loop v0.1 · Created and Developed by Collin D. Weber · Developer &amp; System Architect · Systems Integrity Steward
</footer>


<script>
const state = {
  day:1, phase:'Home Check', battery:100, gyro:86, wear:0, monotony:12,
  garden:62, dog:58, beatLock:18, drift:42, attempts:0,
  danceReadiness:18, musicReadiness:14, cookingReadiness:12,
  eventCountdown:5, lastAdjustment:'none yet', capsule:'HELD', gate:'HELD', pressureForm:'daily readiness'
};
const zones = {
  home:[285,355], warehouse:[620,190], garden:[250,165], dog:[285,355], practice:[650,380], dock:[365,370]
};
const receipt = document.getElementById('receipt');
function clamp(v,min=0,max=100){return Math.max(min,Math.min(max,v));}
function rand(arr){return arr[Math.floor(Math.random()*arr.length)]}
function log(line){
  const time = `Day ${state.day} / ${state.phase}`;
  receipt.value += `[${time}] ${line}\n`;
  receipt.scrollTop = receipt.scrollHeight;
}
function setScene(text){document.getElementById('sceneCaption').textContent=text;}
function moveRobot(zone){
  const [x,y]=zones[zone];
  document.getElementById('robot').style.transform=`translate(${x}px,${y}px)`;
  const leash = document.getElementById('leash');
  if(zone==='dog' || zone==='home' || zone==='dock'){
    leash.setAttribute('x1', x-5); leash.setAttribute('y1', y+35);
    leash.setAttribute('x2', '265'); leash.setAttribute('y2','418');
    leash.style.opacity=.85;
  }else{ leash.style.opacity=.1; }
}
function moveDog(x=220,y=430){document.getElementById('dog').style.transform=`translate(${x}px,${y}px)`;}
function setGate(kind,text,form){
  state.gate=kind; state.capsule=kind; state.pressureForm=form || state.pressureForm;
  const chip=document.getElementById('gateChip');
  chip.className='chip '+(kind==='HELD'?'held':kind==='STRAINED'?'strained':kind==='MUST STOP'?'stop':'review');
  chip.textContent=kind;
  document.getElementById('gateText').textContent=text;
  document.getElementById('capsuleState').textContent=kind;
  document.getElementById('pressureForm').textContent=state.pressureForm;
}
function setPhase(p){state.phase=p; document.getElementById('phaseVal').textContent=p;}
function updateUI(){
  state.battery=clamp(state.battery); state.gyro=clamp(state.gyro); state.wear=clamp(state.wear); state.monotony=clamp(state.monotony);
  const readiness = getReadiness();
  const bars = [
    ['battery',state.battery],['gyro',state.gyro],['wear',state.wear],['mono',state.monotony],['readiness',readiness]
  ];
  bars.forEach(([id,val])=>{
    document.getElementById(id+'Val').textContent=Math.round(val)+(id==='wear'||id==='mono'||id==='readiness'||id==='battery'||id==='gyro'?'%':'');
    document.getElementById(id+'Fill').style.width=val+'%';
  });
  document.getElementById('beatLockVal').textContent=Math.round(state.beatLock)+'%';
  document.getElementById('beatLockFill').style.width=state.beatLock+'%';
  document.getElementById('driftVal').textContent=Math.round(state.drift)+'ms';
  document.getElementById('driftFill').style.width=clamp(100-state.drift*2,5,100)+'%';
  document.getElementById('attemptVal').textContent=state.attempts;
  document.getElementById('adjustVal').textContent=state.lastAdjustment;
  document.getElementById('dayVal').textContent=state.day;
  document.getElementById('eventVal').textContent=`${document.getElementById('domainSelect').value} Event in ${state.eventCountdown} days`;
}
function getReadiness(){
  const d=document.getElementById('domainSelect').value;
  if(d==='Dance') return state.danceReadiness;
  if(d==='Music') return state.musicReadiness;
  return state.cookingReadiness;
}
function setReadiness(v){
  const d=document.getElementById('domainSelect').value;
  if(d==='Dance') state.danceReadiness=clamp(v);
  else if(d==='Music') state.musicReadiness=clamp(v);
  else state.cookingReadiness=clamp(v);
}
function startDay(){
  setPhase('Home Check'); moveRobot('home'); moveDog();
  setGate('HELD','Home check held: battery, gyro, dog, garden, and practice route available.','daily readiness');
  setScene('Home check: robot reads battery, gyro, dog care, garden care, and practice readiness.');
  log('Start day: readiness scan complete. Memory gives readiness, not permission.');
  updateUI();
}
function warehouseTask(){
  setPhase('Warehouse Job'); moveRobot('warehouse');
  const tasks = [
    {obj:'sturdy box', form:'standard transport', risk:'low', act:'normal carry route held'},
    {obj:'fragile glass item', form:'fragile-object pressure', risk:'medium', act:'slow lift, low grip, no sharp turn'},
    {obj:'heavy crate', form:'torque / center-of-mass pressure', risk:'medium', act:'wide stance, reduced speed, two-step route'},
    {obj:'liquid container', form:'slosh / spill / balance pressure', risk:'medium', act:'level carry, no sudden stops'},
    {obj:'unknown package', form:'uncertainty / inspection pressure', risk:'review', act:'inspection required before moving'},
    {obj:'human nearby', form:'living-boundary proximity', risk:'review', act:'pause and reroute around human boundary'}
  ];
  const t=rand(tasks);
  state.battery-=8; state.wear+= t.risk==='low'?2:4; state.gyro-= t.risk==='medium'?4:2; state.monotony+=4;
  const gate = t.risk==='review'?'REVIEW':(t.risk==='medium'?'STRAINED':'HELD');
  setGate(gate,`Warehouse: ${t.obj}. ${t.act}.`,t.form);
  setScene(`Warehouse task: ${t.obj}. Same job, different pressure grammar.`);
  log(`Warehouse task generated: ${t.obj}. Pressure form: ${t.form}. Action: ${t.act}. Capsule: ${gate}.`);
  updateUI();
}
function gardenCare(){
  setPhase('Garden Care'); moveRobot('garden');
  const cases=[
    {c:'soil dry', act:'water lightly', delta:10, gate:'HELD'},
    {c:'soil too wet', act:'refuse watering; log overwater risk', delta:3, gate:'STRAINED'},
    {c:'heat stress', act:'add shade cloth', delta:7, gate:'STRAINED'},
    {c:'leaf recovery', act:'monitor only; no intervention needed', delta:5, gate:'HELD'},
    {c:'unknown residue', act:'quarantine care action; request review', delta:-2, gate:'REVIEW'}
  ];
  const g=rand(cases); state.garden=clamp(state.garden+g.delta); state.battery-=4; state.monotony+=2;
  setGate(g.gate,`Garden: ${g.c}. ${g.act}.`,'plant-care pressure');
  setScene(`Garden care: ${g.c}. Plant cue is not diagnosis; care remains gated.`);
  log(`Garden account: ${g.c}. Action: ${g.act}. Garden condition now ${Math.round(state.garden)}%. Capsule: ${g.gate}.`);
  updateUI();
}
function dogCare(){
  setPhase('Dog Care'); moveRobot('dog'); moveDog(235,425);
  const cases=[
    {c:'dog needs walk', act:'short controlled walk route', delta:12, gate:'HELD'},
    {c:'dog pulling toward unsafe path', act:'slow, shorten distance, wait', delta:5, gate:'STRAINED'},
    {c:'water bowl low', act:'refill water', delta:9, gate:'HELD'},
    {c:'dog tired after workday', act:'rest, no extended walk', delta:6, gate:'HELD'},
    {c:'ambiguous distress cue', act:'pause and request human review', delta:0, gate:'REVIEW'}
  ];
  const d=rand(cases); state.dog=clamp(state.dog+d.delta); state.battery-=6; state.gyro-=2; state.monotony+=3;
  setGate(d.gate,`Dog care: ${d.c}. ${d.act}.`,'companion-animal boundary');
  setScene(`Dog care: ${d.c}. The dog is a living boundary field, not an object.`);
  log(`Dog-care account: ${d.c}. Action: ${d.act}. Dog care state ${Math.round(state.dog)}%. Capsule: ${d.gate}.`);
  updateUI();
}
function practiceDomain(){
  const domain=document.getElementById('domainSelect').value;
  setPhase(`${domain} Practice`); moveRobot('practice');
  if(domain==='Dance' || domain==='Music'){
    const robot=document.getElementById('robot'); robot.classList.add('dancing');
    setTimeout(()=>robot.classList.remove('dancing'),3200);
    state.attempts++;
    const old=state.beatLock;
    const gain = Math.max(3, (100-old)*0.16 + Math.random()*5 - (state.wear/60));
    state.beatLock=clamp(old+gain,0,96);
    state.drift=Math.max(3, Math.round(52*(1-state.beatLock/100)+Math.random()*8));
    const choices = state.beatLock<40 ? ['reduced late step','found main pulse','slowed first transition'] : state.beatLock<70 ? ['reduced turn angle','moved arm accent closer to beat 2','widened stance for gyro margin'] : ['saved phrase variation','cleaner reset on beat 4','branch created from held phrase'];
    state.lastAdjustment=rand(choices);
    state.battery-=5; state.gyro-= state.beatLock<55?4:2; state.wear+=2; state.monotony=clamp(state.monotony-16);
    const readinessGain = domain==='Dance'?state.beatLock:(state.musicReadiness+gain*.8);
    setReadiness(domain==='Dance'?state.beatLock:readinessGain);
    setGate(state.beatLock>70?'HELD':'STRAINED',`${domain}: beat-trace attempt ${state.attempts}. ${state.lastAdjustment}.`,'beat-trace learning');
    setScene(`${domain} practice: robot listens, attempts movement, measures mismatch, corrects, and repeats.`);
    log(`${domain} practice attempt ${state.attempts}: beat-lock ${Math.round(old)}% → ${Math.round(state.beatLock)}%, avg drift ${state.drift}ms. Adjustment: ${state.lastAdjustment}.`);
    animateBeatGraph();
  }else{
    const old=state.cookingReadiness;
    const gain=8+Math.random()*7;
    state.cookingReadiness=clamp(old+gain);
    state.battery-=3; state.monotony=clamp(state.monotony-8);
    state.lastAdjustment=rand(['sequence timing improved','heat gate held','contamination check preserved','prep order simplified']);
    setGate(state.cookingReadiness>55?'HELD':'STRAINED',`Cooking practice: ${state.lastAdjustment}.`,'cooking sequence safety');
    setScene('Cooking practice: sequence, temperature, cleanliness, and serving boundary are checked.');
    log(`Cooking practice: readiness ${Math.round(old)}% → ${Math.round(state.cookingReadiness)}%. Adjustment: ${state.lastAdjustment}.`);
  }
  updateUI();
}
function homeExpression(){
  setPhase('Home Expression'); moveRobot('home');
  const lowBattery = state.battery<25;
  const action = lowBattery?'write a low-energy rhythm text and recharge early': state.monotony>45?'small dance phrase to release monotony pressure':'stretch / reset and review receipts';
  if(!lowBattery && state.monotony>45){document.getElementById('robot').classList.add('dancing'); setTimeout(()=>document.getElementById('robot').classList.remove('dancing'),2200);}
  state.monotony=clamp(state.monotony-(lowBattery?6:18)); state.battery-=lowBattery?1:4;
  setGate(lowBattery?'STRAINED':'HELD',`Home expression: ${action}.`,'monotony / expression pressure');
  setScene(`Home expression: ${action}. Expression is pressure routed through form.`);
  log(`Home expression selected: ${action}. No downloaded mastery; expression remains gated by battery, space, gyro, and receipt.`);
  updateUI();
}
function recharge(){
  setPhase('Recharge'); moveRobot('dock');
  const summary = `Daily receipt summary: warehouse/garden/dog/practice loop complete. Battery ${Math.round(state.battery)}% → 100%. Beat-lock ${Math.round(state.beatLock)}%. Readiness ${Math.round(getReadiness())}%.`;
  state.battery=100; state.gyro=clamp(state.gyro+12); state.wear=clamp(state.wear-10); state.monotony=clamp(state.monotony+5); state.day++; state.eventCountdown=Math.max(0,state.eventCountdown-1);
  setGate('HELD','Recharge held: recovery completed and next-day readiness preserved.','recovery / readiness');
  setScene('Recharge: body wear reduces, battery restores, and readiness carries forward only as bounded memory.');
  log(summary);
  log('End day: memory packet stored as readiness, not permission.');
  updateUI();
}
function runFullDay(){
  startDay();
  setTimeout(warehouseTask,700);
  setTimeout(gardenCare,1500);
  setTimeout(dogCare,2300);
  setTimeout(practiceDomain,3100);
  setTimeout(homeExpression,4400);
  setTimeout(recharge,5200);
}
function domainChanged(){
  state.attempts=0;
  state.beatLock=document.getElementById('domainSelect').value==='Dance'?state.danceReadiness:state.musicReadiness;
  if(document.getElementById('domainSelect').value==='Cooking') state.beatLock=0;
  state.drift=Math.max(4,Math.round(52*(1-state.beatLock/100)));
  drawBeatGraph(); updateUI();
  log(`Practice domain selected: ${document.getElementById('domainSelect').value}. Event pressure updated.`);
}
function getRhythm(){
  const r=document.getElementById('rhythmSelect').value;
  if(r==='slow4') return {beats:[.1,.33,.56,.79], amp:.75, name:'Slow 4/4'};
  if(r==='fast4') return {beats:[.08,.22,.36,.50,.64,.78,.92], amp:.95, name:'Fast 4/4'};
  if(r==='waltz3') return {beats:[.12,.42,.72], amp:.7, name:'Waltz 3/4'};
  if(r==='sync') return {beats:[.1,.25,.39,.62,.71,.88], amp:.9, name:'Syncopated'};
  if(r==='low') return {beats:[.16,.48,.80], amp:.45, name:'Low-Energy'};
  return {beats:[.1,.34,.58,.82], amp:.85, name:'Medium 4/4'};
}
function drawBeatGraph(cursor=null){
  const canvas=document.getElementById('beatCanvas'); const ctx=canvas.getContext('2d'); const w=canvas.width,h=canvas.height;
  const rhythm=getRhythm();
  ctx.clearRect(0,0,w,h);
  ctx.fillStyle='#07101a'; ctx.fillRect(0,0,w,h);
  ctx.strokeStyle='#1c2c3d'; ctx.lineWidth=1;
  for(let i=0;i<8;i++){ctx.beginPath();ctx.moveTo(0,i*h/8);ctx.lineTo(w,i*h/8);ctx.stroke();}
  ctx.fillStyle='#9fb2c6'; ctx.font='13px Consolas'; ctx.fillText('music waveform / beat trace',14,22); ctx.fillText('robot movement events',14,123); ctx.fillText('timing error shrinks through repetition',14,192);
  // waveform
  ctx.beginPath(); ctx.strokeStyle='#8ecae6'; ctx.lineWidth=2;
  for(let x=0;x<w;x++){
    let t=x/w; let y=70;
    for(const b of rhythm.beats){ const d=Math.abs(t-b); y -= Math.exp(-d*d/0.0009)*34*rhythm.amp; }
    y += Math.sin(t*75)*4 + Math.sin(t*22)*5;
    if(x===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
  }
  ctx.stroke();
  // beat markers
  rhythm.beats.forEach((b,i)=>{ const x=b*w; ctx.strokeStyle='#73e2a7'; ctx.lineWidth=2; ctx.beginPath(); ctx.moveTo(x,35); ctx.lineTo(x,112); ctx.stroke(); ctx.fillStyle='#73e2a7'; ctx.fillText(String(i+1),x-3,34); });
  // robot movement events with error proportional to beatLock
  const errorSpread = Math.max(4, 55*(1-state.beatLock/100));
  rhythm.beats.forEach((b,i)=>{
    const deterministic = Math.sin((state.attempts+1)*(i+2))*errorSpread;
    const x=clamp(b*w+deterministic,15,w-15);
    ctx.fillStyle='#c7a7ff'; ctx.beginPath(); ctx.arc(x,140,5,0,Math.PI*2); ctx.fill();
    ctx.strokeStyle='rgba(199,167,255,.55)'; ctx.beginPath(); ctx.moveTo(x,128); ctx.lineTo(x,158); ctx.stroke();
    ctx.strokeStyle='rgba(255,209,102,.45)'; ctx.beginPath(); ctx.moveTo(b*w,154); ctx.lineTo(x,154); ctx.stroke();
  });
  // learning curve
  ctx.strokeStyle='#ffd166'; ctx.lineWidth=2; ctx.beginPath();
  const maxAtt=Math.max(1,state.attempts); for(let i=0;i<=maxAtt;i++){ const x=20+(w-40)*(i/maxAtt); const y=190-((state.beatLock*(i/maxAtt)+18*(1-i/maxAtt))/100)*52; if(i===0)ctx.moveTo(x,y); else ctx.lineTo(x,y); } ctx.stroke();
  if(cursor!==null){ctx.strokeStyle='#ffffff';ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(cursor*w,0);ctx.lineTo(cursor*w,h);ctx.stroke();}
}
function animateBeatGraph(){
  const start=performance.now();
  function frame(now){const p=Math.min(1,(now-start)/2600);drawBeatGraph(p); if(p<1) requestAnimationFrame(frame); else drawBeatGraph();}
  requestAnimationFrame(frame);
}
function copyReceipt(){receipt.select();document.execCommand('copy');}
function downloadReceipt(){
  const blob=new Blob([receipt.value],{type:'text/plain'}); const url=URL.createObjectURL(blob); const a=document.createElement('a');
  a.href=url; a.download=`runtime_trail_robot_day_loop_day_${state.day}_receipt.txt`; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
}
receipt.value=`Runtime Trail: Robot Day Loop v0.1\nCreated and Developed by Collin D. Weber\n\nCore route:\npressure → gate → capsule → route → action → receipt → readiness\n\n`;
startDay(); drawBeatGraph(); updateUI();
</script>
</body>
</html>