infinicode 2.8.97 → 2.8.99

package/dist/kernel/federation/dashboard-html.js

@@ -362,18 +362,25 @@ button.act:disabled{opacity:0.5;cursor:default;}
 .pk-kv .l{font-size:0.56rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);}
 .pk-ctl{display:flex;gap:0.45rem;flex-wrap:wrap;}
 .pk-note{font-family:var(--mono);font-size:0.58rem;color:var(--gold);opacity:0.85;margin-top:0.4rem;}
-.pk-pipeline{display:grid;gap:0.32rem;margin-top:0.6rem;}
-.pk-pipe-step{display:grid;grid-template-columns:0.55rem 8.2rem 1fr;gap:0.45rem;align-items:start;padding:0.32rem 0.4rem;border-radius:7px;background:rgba(255,255,255,0.025);font-family:var(--mono);font-size:0.56rem;color:var(--muted);}
-.pk-pipe-step i{width:0.48rem;height:0.48rem;border-radius:50%;margin-top:0.08rem;background:var(--muted);box-shadow:0 0 0 2px rgba(255,255,255,0.04);}
-.pk-pipe-step.running i{background:var(--warn);box-shadow:0 0 8px var(--warn);animation:pulse 1s infinite;}
-.pk-pipe-step.ok i{background:var(--ok);box-shadow:0 0 7px rgba(70,220,150,.45);}
-.pk-pipe-step.failed i,.pk-pipe-step.blocked i{background:var(--bad);box-shadow:0 0 7px rgba(255,90,90,.45);}
-.pk-pipe-step .stage{color:var(--text);text-transform:uppercase;letter-spacing:.04em;}
-.pk-pipe-step .detail{text-align:right;overflow-wrap:anywhere;}
-.pk-pipeline-summary{padding:0.5rem 0.6rem;border:1px solid var(--glass-border);border-radius:8px;font-family:var(--mono);font-size:0.6rem;color:var(--muted);}
+.pk-pipeline{display:grid;gap:0.42rem;margin-top:0.7rem;position:relative;}
+.pk-pipe-step{--phase:var(--gold);display:grid;grid-template-columns:2rem minmax(7.2rem,.72fr) minmax(9rem,1.35fr);gap:0.55rem;align-items:center;padding:0.55rem 0.62rem;border-radius:11px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(110deg,color-mix(in srgb,var(--phase) 7%,transparent),rgba(255,255,255,.018));font-family:var(--mono);font-size:0.58rem;color:var(--muted);transition:transform .18s,border-color .18s,background .18s;position:relative;overflow:hidden;}
+.pk-pipe-step.phase-hardware{--phase:#63d5c6}.pk-pipe-step.phase-trigger{--phase:#efb94c}.pk-pipe-step.phase-session{--phase:#66a8ff}.pk-pipe-step.phase-media{--phase:#68d48f}.pk-pipe-step.phase-intelligence{--phase:#e38bff}.pk-pipe-step.phase-playback{--phase:#ff9b62}.pk-pipe-step.phase-close{--phase:#a8b0bd}
+.pk-pipe-step .step-index{display:grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:8px;border:1px solid color-mix(in srgb,var(--phase) 35%,transparent);color:var(--phase);background:color-mix(in srgb,var(--phase) 10%,transparent);font-weight:700;}
+.pk-pipe-step .stage{color:var(--text);text-transform:uppercase;letter-spacing:.055em;font-weight:650;display:block;}.pk-pipe-step .phase{display:block;color:var(--phase);font-size:.49rem;letter-spacing:.08em;margin-top:.14rem;}
+.pk-pipe-step .detail{text-align:right;overflow-wrap:anywhere;line-height:1.35;}.pk-pipe-step .time{display:block;color:color-mix(in srgb,var(--muted) 75%,transparent);font-size:.5rem;margin-top:.12rem;}
+.pk-pipe-step.ok{border-color:color-mix(in srgb,var(--ok) 22%,transparent)}
+.pk-pipe-step.failed,.pk-pipe-step.blocked{border-color:rgba(255,90,90,.48);background:linear-gradient(110deg,rgba(255,70,70,.14),rgba(255,255,255,.02));}
+.pk-pipe-step.current{transform:translateX(4px);border-color:var(--phase);background:linear-gradient(105deg,color-mix(in srgb,var(--phase) 19%,transparent),rgba(255,255,255,.035));box-shadow:0 0 0 1px color-mix(in srgb,var(--phase) 18%,transparent),0 8px 28px rgba(0,0,0,.22);}
+.pk-pipe-step.current:after{content:'ACTIVE';position:absolute;right:-1.7rem;top:.45rem;transform:rotate(38deg);padding:.12rem 2rem;background:var(--phase);color:#080808;font-size:.42rem;font-weight:800;letter-spacing:.08em;}
+.pk-pipe-step.current .step-index{box-shadow:0 0 14px color-mix(in srgb,var(--phase) 55%,transparent);animation:pulse 1.15s infinite;}
+.pk-pipeline-summary{padding:0.7rem 0.75rem;border:1px solid var(--glass-border);border-radius:11px;background:linear-gradient(120deg,rgba(212,170,72,.08),rgba(255,255,255,.018));font-family:var(--mono);font-size:0.62rem;color:var(--muted);line-height:1.45;}
 .pk-pipeline-summary.ready{color:var(--ok);border-color:rgba(70,220,150,.35);}
 .pk-pipeline-summary.running{color:var(--warn);border-color:rgba(255,196,70,.35);}
 .pk-pipeline-summary.blocked{color:var(--bad);border-color:rgba(255,90,90,.4);}
+.pk-pipe-history{margin-top:.75rem;border-top:1px solid var(--glass-border);padding-top:.7rem}.pk-pipe-history-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}.pk-pipe-history-head b{font-family:var(--mono);font-size:.65rem;color:var(--ink);text-transform:uppercase;letter-spacing:.06em}.pk-pipe-history-list{display:grid;gap:.45rem}.pk-run-card{border:1px solid var(--glass-border);border-radius:10px;background:var(--panel-2);padding:.55rem .62rem;cursor:pointer}.pk-run-card:hover{border-color:var(--gold)}.pk-run-top{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:start}.pk-run-title{font-family:var(--mono);font-size:.61rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pk-run-meta{font-family:var(--mono);font-size:.53rem;color:var(--muted);margin-top:.17rem}.pk-run-state{font-family:var(--mono);font-size:.5rem;text-transform:uppercase;border:1px solid var(--glass-border);border-radius:999px;padding:.18rem .4rem}.pk-run-state.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}.pk-run-state.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}.pk-run-state.running{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}.pk-run-stages{display:flex;gap:3px;margin-top:.45rem}.pk-run-stages i{height:4px;flex:1;border-radius:3px;background:rgba(255,255,255,.07)}.pk-run-stages i.ok{background:var(--ok)}.pk-run-stages i.failed,.pk-run-stages i.blocked{background:var(--bad)}.pk-history-pager{display:flex;align-items:center;gap:.35rem}.pk-history-pager span{font-family:var(--mono);font-size:.54rem;color:var(--muted)}
+.pk-mic-suite{margin-top:.6rem;display:grid;gap:.55rem}.pk-mic-health{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}.pk-mic-check{padding:.48rem;border:1px solid var(--glass-border);border-radius:9px;background:var(--panel-2)}.pk-mic-check .k{font-family:var(--mono);font-size:.49rem;color:var(--muted);text-transform:uppercase}.pk-mic-check .v{font-family:var(--mono);font-size:.62rem;color:var(--ink);margin-top:.16rem;overflow-wrap:anywhere}.pk-mic-check.ok{border-color:color-mix(in srgb,var(--ok) 30%,transparent)}.pk-mic-check.bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}.pk-mic-result{border:1px solid var(--glass-border);border-radius:10px;padding:.58rem;background:var(--panel-2);font-family:var(--mono);font-size:.58rem}.pk-mic-result.ok{border-color:var(--ok);background:rgba(60,180,110,.08)}.pk-mic-result.bad{border-color:var(--bad);background:rgba(220,80,80,.08)}.pk-mic-readings{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;margin-top:.45rem}.pk-mic-reading{padding:.35rem;background:rgba(0,0,0,.16);border-radius:7px}.pk-mic-reading span{display:block;color:var(--muted);font-size:.48rem;text-transform:uppercase}.pk-mic-reading b{display:block;color:var(--ink);font-size:.67rem;margin-top:.1rem}
+.pk-motor-registry{display:grid;gap:.4rem}.pk-motor-row{display:grid;grid-template-columns:1fr 4.5rem 5.5rem auto;gap:.35rem;align-items:end;padding:.45rem;border:1px solid var(--glass-border);border-radius:9px;background:var(--panel-2)}.pk-motor-canvas{display:flex;align-items:stretch;gap:.55rem;overflow-x:auto;padding:.65rem .2rem;min-height:130px}.pk-motor-node{min-width:165px;padding:.55rem;border:1px solid rgba(255,205,93,.35);border-radius:12px;background:linear-gradient(145deg,rgba(201,150,46,.13),rgba(255,255,255,.025));position:relative}.pk-motor-node:not(:last-child):after{content:'';position:absolute;right:-.56rem;top:50%;width:.56rem;border-top:2px solid var(--gold)}.pk-motor-node .node-num{font-family:var(--mono);font-size:.48rem;color:var(--gold);text-transform:uppercase;margin-bottom:.35rem}.pk-motor-node .rp-field{margin-bottom:.3rem}.pk-motor-empty{display:grid;place-items:center;width:100%;min-height:100px;border:1px dashed var(--glass-border);border-radius:10px;color:var(--muted);font-family:var(--mono);font-size:.58rem}.pk-motor-status{font-family:var(--mono);font-size:.58rem;padding:.5rem;border-radius:8px;background:var(--panel-2);border:1px solid var(--glass-border)}.pk-motor-status.ok{color:var(--ok);border-color:var(--ok)}.pk-motor-status.bad{color:var(--bad);border-color:var(--bad)}
+@media(max-width:720px){.pk-pipe-step{grid-template-columns:1.8rem 1fr}.pk-pipe-step .detail{grid-column:2;text-align:left}.pk-mic-health{grid-template-columns:1fr}.pk-mic-readings{grid-template-columns:1fr 1fr}.pk-motor-row{grid-template-columns:1fr 4.5rem}}
 .pk-prodtoggle{display:flex;align-items:center;gap:0.5rem;margin-top:0.6rem;padding:0.45rem 0.6rem;border-radius:8px;border:1px solid var(--border-strong);background:var(--panel-2);cursor:pointer;}
 .pk-prodtoggle input{width:15px;height:15px;accent-color:var(--gold-bright,var(--gold));cursor:pointer;}
 .pk-prodtoggle span{font-family:var(--mono);font-size:0.66rem;color:var(--ink);}
@@ -4070,8 +4077,27 @@ button.act:disabled{opacity:0.5;cursor:default;}
     ];
     // Pond / curved water feature at the lower-left of the plaza.
     var POND={cx:0.18*15, cy:0.84*8, rx:2.4, ry:1.1};
-    // Street traffic along the top road (yellow taxis + private cars).
-    var CARS=[[2.2,-0.92,'#f2c14e'],[4.4,-0.78,'#e0a23c'],[6.6,-0.95,'#7fb4ff'],[8.8,-1.02,'#ff7e6e'],[11.0,-0.84,'#d8d8e0'],[13.2,-0.98,'#f2c14e']];
+    // Street traffic along the top road. Each car has x, y (world), color,
+    // a per-car speed (world units / second), a direction (+1 = right, -1 =
+    // left). y is one of two lane bands (≈ -0.65 for outbound, ≈ -1.18 for
+    // inbound) so cars don't overlap. Speeds are deliberately varied and
+    // fast enough to read as movement at 60fps — the road is short, so
+    // a 4-7s pass across the screen feels natural.
+    var ROAD_Y0=-1.5, ROAD_Y1=-0.35;
+    var CARS=[
+      {x:1.5,  y:-0.65, color:'#f2c14e', speed:3.2, dir:+1},
+      {x:4.0,  y:-1.18, color:'#7fb4ff', speed:3.6, dir:-1},
+      {x:6.5,  y:-0.65, color:'#e0a23c', speed:2.8, dir:+1},
+      {x:9.0,  y:-1.18, color:'#ff7e6e', speed:4.0, dir:-1},
+      {x:11.5, y:-0.65, color:'#d8d8e0', speed:3.0, dir:+1},
+      {x:0.5,  y:-1.18, color:'#5b8bd6', speed:3.4, dir:-1},
+      {x:13.0, y:-0.65, color:'#c87ed4', speed:2.6, dir:+1},
+      {x:7.0,  y:-1.18, color:'#f2c14e', speed:3.8, dir:-1},
+    ];
+    // Per-car phase offsets so headlights / taillights / wheels don't all
+    // blink in lockstep — gives a natural "different cars, different
+    // speeds" feel.
+    var _carPhase = CARS.map(function(_, i){ return i * 0.7; });
     // ── Walking people — looping sprites that stroll along fixed plaza paths.
     // Each walker is a small canvas-drawn figure (head + body + two
     // swinging legs + swinging arms) with a vertical bob and a slight
@@ -4463,39 +4489,31 @@ button.act:disabled{opacity:0.5;cursor:default;}
       if(fill){ X.fillStyle=fill; X.fill(); }
       if(stroke){ X.strokeStyle=stroke; X.lineWidth=lw||1; X.stroke(); }
     }
-    function drawGround(){
+    function drawGround(now){
+      // now is optional — only the road cars and water effects need a
+      // wall-clock. We pass performance.now() in from frame() so every
+      // animation reads the same time.
+      if(typeof now !== 'number') now = performance.now();
+      var _now = now;
       var z=cam.z;
-      // ── grass base — multi-stop radial sun-lit gradient on a slightly larger field ──
-      // Field is now sized to the plaza footprint + a small margin. The previous
-      // version extended from x=-0.5..PARK_W+0.5, which left a wide empty green
-      // strip on either side of the plaza; trimmed here to remove that overhang.
+      // ── grass base — single uniform mid-green, no radial brightening ──
+      // Park sits on a floating island now, so we want a flat, calm
+      // grass tone across the whole field. The previous radial gradient
+      // pushed a lighter green toward the center which read as a "spot"
+      // — replaced with a single soft fill so the island feels like a
+      // single piece of turf.
       var parkCx=PARK_W/2, parkCy=PARK_D/2;
       var gCent=iso(parkCx,parkCy);
       var gRad=X.createRadialGradient(gCent.x,gCent.y,12*z,gCent.x,gCent.y,Math.max(W,H)*0.62);
-      gRad.addColorStop(0,'rgba(154,196,108,0.95)');
-      gRad.addColorStop(0.45,'rgba(86,142,80,0.95)');
-      gRad.addColorStop(1,'rgba(44,98,52,0.95)');
+      gRad.addColorStop(0,'rgba(94,150,84,0.95)');
+      gRad.addColorStop(0.5,'rgba(86,140,76,0.95)');
+      gRad.addColorStop(1,'rgba(78,128,68,0.95)');
       // grass field — tight margin around the plaza + lot, NOT covering the road or the beach
       var GF_X0=0.0, GF_X1=PARK_W, GF_Y0=-0.32, GF_Y1=PARK_D-0.55;
       poly([[GF_X0,GF_Y0],[GF_X1,GF_Y0],[GF_X1,GF_Y1],[GF_X0,GF_Y1]], gRad, 'rgba(140,200,150,0.10)',1);
-      // ── "mowed stripes" effect — wide diagonal bands of alternating green tones ──
-      // Drawn as full-width rectangles in world space, slightly rotated via a parallelogram skew.
-      X.save();
-      var stripeColors=['rgba(108,162,90,0.45)','rgba(86,140,72,0.35)'];
-      var stripeCount=5;
-      var stripeW=(GF_X1-GF_X0+GF_Y1-GF_Y0+2)/stripeCount;
-      for(var si=0;si<stripeCount;si++){
-        var off=si*stripeW - ((GF_X1-GF_X0)+(GF_Y1-GF_Y0))*0.5;
-        // Build a parallelogram in world coords that runs from left-bottom to right-top
-        // at a slight angle (skewed +X, -Y direction) — looks like a stadium mowed lawn.
-        // Tightly fitted to the grass field bounds.
-        var p1=[GF_X0 + off, GF_Y1];
-        var p2=[GF_X0 + off + 1.0, GF_Y0];
-        var p3=[GF_X0 + off + 1.0 + (GF_X1-GF_X0), GF_Y0];
-        var p4=[GF_X0 + off + (GF_X1-GF_X0), GF_Y1];
-        poly([p1,p2,p3,p4], stripeColors[si%2], null, 0);
-      }
-      X.restore();
+      // (mowed-stripe effect removed — was the lighter green alternating
+      // bands on the sides of the park. Keeping the lawn as a single
+      // uniform tone so the park reads as a clean floating island.)
       // ── outer hedge / foliage border just inside the grass field ──
       // Slightly ragged inner edge: extra points along each side to break the straight line.
       // The hedge wraps the grass field, which now hugs the plaza footprint (no side overhang).
@@ -4566,16 +4584,197 @@ button.act:disabled{opacity:0.5;cursor:default;}
       X.closePath();
       X.strokeStyle='rgba(96,148,86,0.7)'; X.lineWidth=0.8*z; X.stroke();
       X.restore();
-      // grass noise — scattered lighter tufts to add texture (warm bright-green tints)
+      // grass noise — scattered darker tufts for texture (no lighter
+      // tufts, so the field stays a single uniform mid-green)
       X.save();
-      for(var ni=0;ni<60;ni++){
+      for(var ni=0;ni<40;ni++){
         var gnx=GF_X0 + ((ni*37)%100)/100*(GF_X1-GF_X0);
         var gny=GF_Y0 + ((ni*53)%100)/100*(GF_Y1-GF_Y0);
         var gp=iso(gnx,gny);
-        X.fillStyle=(ni%2)?'rgba(150,200,110,0.20)':'rgba(56,112,62,0.22)';
+        X.fillStyle='rgba(56,112,62,0.22)';
         X.beginPath(); X.arc(gp.x+((ni*7)%13-6)*z,gp.y+((ni*11)%9-4)*z,1.6*z,0,7); X.fill();
       }
       X.restore();
+      // ── GOLD BORDER + FLOATING ISLAND DEPTH ──
+      // The whole park now reads as a single floating slab of turf in
+      // the sky. We render (in world space, around the grass field):
+      //   1. a soft drop-shadow ellipse on the sky below the island
+      //   2. a tapered rocky underside (darker, hanging from the edge)
+      //   3. a thick gold rim tracing the grass perimeter
+      //   4. a thin warm-glow outer ring (sells the gold as "lit by
+      //      the warm sun")
+      // The underside and drop shadow give the park real depth so it
+      // doesn't look like a flat sticker on the sky.
+      // Build the grass perimeter polygon once (offset slightly outward
+      // so the gold rim sits just outside the turf edge).
+      var GRASS_RIM = 0.18; // world units of gold rim thickness
+      function grassPerim(offset){
+        // Use the same world corners as the grass field, offset outward.
+        var o = offset;
+        return [
+          [GF_X0-o, GF_Y0-o],
+          [GF_X1+o, GF_Y0-o],
+          [GF_X1+o, GF_Y1+o],
+          [GF_X0-o, GF_Y1+o]
+        ];
+      }
+      // 1. drop shadow on the sky — a wide soft ellipse below the
+      //    island's bottom edge (in screen space, large + soft).
+      var botL = iso(GF_X0,    GF_Y1);
+      var botR = iso(GF_X1,    GF_Y1);
+      var botM = { x:(botL.x+botR.x)/2, y:(botL.y+botR.y)/2 };
+      var islandWidth = Math.abs(botR.x - botL.x);
+      var shadowCx = botM.x;
+      var shadowCy = botM.y + 28*z;
+      var shadowRX = islandWidth * 0.55;
+      var shadowRY = 22 * z;
+      var dropShadow = X.createRadialGradient(shadowCx, shadowCy, 0, shadowCx, shadowCy, shadowRX);
+      dropShadow.addColorStop(0,   'rgba(20, 24, 36, 0.55)');
+      dropShadow.addColorStop(0.5, 'rgba(20, 24, 36, 0.25)');
+      dropShadow.addColorStop(1,   'rgba(20, 24, 36, 0)');
+      X.fillStyle = dropShadow;
+      X.beginPath();
+      X.ellipse(shadowCx, shadowCy, shadowRX, shadowRY, 0, 0, Math.PI*2);
+      X.fill();
+      // 2. rocky underside — draw the grass field polygon again, but
+      //    offset down by ~14*z and slightly darker, then close it into
+      //    a wedge. We do this with two filled paths:
+      //      - the bottom face: same perimeter polygon shifted down
+      //      - the side rim: a band that traces from the top of the
+      //        bottom face up to the top of the island (so the side
+      //        of the slab reads as dirt/rock)
+      var UNDERSIDE_LIFT = 16 * z;
+      var topPerim = grassPerim(0);
+      var botPerim = topPerim.map(function(p){ return [p[0], p[1] + UNDERSIDE_LIFT / (TH*z) * (1/22)]; });
+      // Convert botPerim into screen-space points (slightly down from top).
+      var topScreen = topPerim.map(function(p){ return iso(p[0], p[1]); });
+      var botScreen = topPerim.map(function(p){ return iso(p[0], p[1] + 1.0); });
+      // right side face
+      X.save();
+      X.fillStyle = 'rgba(38, 50, 36, 0.92)';
+      X.beginPath();
+      X.moveTo(topScreen[1].x, topScreen[1].y);
+      X.lineTo(topScreen[2].x, topScreen[2].y);
+      X.lineTo(botScreen[2].x, botScreen[2].y + UNDERSIDE_LIFT);
+      X.lineTo(botScreen[1].x, botScreen[1].y + UNDERSIDE_LIFT);
+      X.closePath();
+      X.fill();
+      // bottom-right edge highlight (slight bevel)
+      X.strokeStyle = 'rgba(80, 96, 60, 0.55)';
+      X.lineWidth = 1.0*z;
+      X.beginPath();
+      X.moveTo(topScreen[2].x, topScreen[2].y);
+      X.lineTo(botScreen[2].x, botScreen[2].y + UNDERSIDE_LIFT);
+      X.stroke();
+      // left side face
+      X.fillStyle = 'rgba(28, 38, 26, 0.95)';
+      X.beginPath();
+      X.moveTo(topScreen[0].x, topScreen[0].y);
+      X.lineTo(topScreen[1].x, topScreen[1].y);
+      X.lineTo(botScreen[1].x, botScreen[1].y + UNDERSIDE_LIFT);
+      X.lineTo(botScreen[0].x, botScreen[0].y + UNDERSIDE_LIFT);
+      X.closePath();
+      X.fill();
+      // bottom-left edge highlight
+      X.strokeStyle = 'rgba(70, 84, 52, 0.45)';
+      X.beginPath();
+      X.moveTo(topScreen[0].x, topScreen[0].y);
+      X.lineTo(botScreen[0].x, botScreen[0].y + UNDERSIDE_LIFT);
+      X.stroke();
+      // bottom face — slightly tapered into a rough point so the slab
+      // doesn't look like a flat box. We taper the bottom by ~25%.
+      var tapered = topScreen.map(function(s, i){
+        if(i === 0) return { x: s.x + 40*z, y: s.y + UNDERSIDE_LIFT*0.95 };
+        if(i === 1) return { x: s.x - 40*z, y: s.y + UNDERSIDE_LIFT*0.95 };
+        if(i === 2) return { x: s.x - 60*z, y: s.y + UNDERSIDE_LIFT*0.85 };
+        if(i === 3) return { x: s.x + 60*z, y: s.y + UNDERSIDE_LIFT*0.85 };
+        return { x: s.x, y: s.y + UNDERSIDE_LIFT };
+      });
+      X.fillStyle = 'rgba(20, 28, 20, 0.92)';
+      X.beginPath();
+      X.moveTo(topScreen[0].x, topScreen[0].y);
+      X.lineTo(topScreen[1].x, topScreen[1].y);
+      X.lineTo(tapered[1].x, tapered[1].y);
+      X.lineTo(tapered[2].x, tapered[2].y);
+      X.lineTo(tapered[3].x, tapered[3].y);
+      X.lineTo(tapered[0].x, tapered[0].y);
+      X.closePath();
+      X.fill();
+      // a few rocky stalactite bumps hanging from the underside so it
+      // doesn't look like a perfect box either
+      var bumpSpots = [
+        { px: 0.18, len: 0.65 },
+        { px: 0.34, len: 0.85 },
+        { px: 0.52, len: 0.55 },
+        { px: 0.68, len: 0.95 },
+        { px: 0.86, len: 0.70 }
+      ];
+      for(var bpi=0; bpi<bumpSpots.length; bpi++){
+        var bx = GF_X0 + bumpSpots[bpi].px * (GF_X1-GF_X0);
+        var by = GF_Y1;
+        var bp = iso(bx, by);
+        var bpLen = bumpSpots[bpi].len * UNDERSIDE_LIFT;
+        X.fillStyle = 'rgba(24, 32, 22, 0.88)';
+        X.beginPath();
+        X.moveTo(bp.x - 14*z, bp.y + 2*z);
+        // 2-sided stalactite that tapers to a point
+        X.quadraticCurveTo(bp.x, bp.y + bpLen*0.5, bp.x, bp.y + bpLen);
+        X.quadraticCurveTo(bp.x, bp.y + bpLen*0.5, bp.x + 14*z, bp.y + 2*z);
+        X.closePath();
+        X.fill();
+      }
+      X.restore();
+      // 3. GOLD RIM — thick gold band tracing the grass perimeter.
+      //    Drawn AFTER the underside so the top edge of the gold
+      //    sits flush with the top of the grass. Two strokes: a wide
+      //    gold core + a thin lighter inner highlight on the top edge.
+      var rimOuter = grassPerim(GRASS_RIM);
+      var rimInner = grassPerim(0);
+      var rimOuterScreen = rimOuter.map(function(p){ return iso(p[0], p[1]); });
+      var rimInnerScreen = rimInner.map(function(p){ return iso(p[0], p[1]); });
+      X.save();
+      // outer glow
+      var glowGrad = X.createLinearGradient(0, rimOuterScreen[0].y - 30, 0, rimOuterScreen[3].y + 30);
+      X.fillStyle = 'rgba(255, 200, 110, 0.0)';
+      // fill the rim band as a quad
+      X.beginPath();
+      X.moveTo(rimOuterScreen[0].x, rimOuterScreen[0].y);
+      X.lineTo(rimOuterScreen[1].x, rimOuterScreen[1].y);
+      X.lineTo(rimOuterScreen[2].x, rimOuterScreen[2].y);
+      X.lineTo(rimOuterScreen[3].x, rimOuterScreen[3].y);
+      X.closePath();
+      X.fill();
+      // gold band via two strokes: thick base + thin highlight
+      X.strokeStyle = 'rgba(255, 196, 92, 0.95)';  // base gold
+      X.lineWidth = 5.0*z;
+      X.beginPath();
+      X.moveTo(rimInnerScreen[0].x, rimInnerScreen[0].y);
+      X.lineTo(rimInnerScreen[1].x, rimInnerScreen[1].y);
+      X.lineTo(rimInnerScreen[2].x, rimInnerScreen[2].y);
+      X.lineTo(rimInnerScreen[3].x, rimInnerScreen[3].y);
+      X.closePath();
+      X.stroke();
+      // inner highlight (thinner, brighter)
+      X.strokeStyle = 'rgba(255, 232, 158, 0.95)';
+      X.lineWidth = 1.4*z;
+      X.beginPath();
+      X.moveTo(rimInnerScreen[0].x, rimInnerScreen[0].y);
+      X.lineTo(rimInnerScreen[1].x, rimInnerScreen[1].y);
+      X.lineTo(rimInnerScreen[2].x, rimInnerScreen[2].y);
+      X.lineTo(rimInnerScreen[3].x, rimInnerScreen[3].y);
+      X.closePath();
+      X.stroke();
+      // outer deep-gold edge (slightly darker outer stroke for definition)
+      X.strokeStyle = 'rgba(190, 134, 48, 0.85)';
+      X.lineWidth = 1.2*z;
+      X.beginPath();
+      X.moveTo(rimOuterScreen[0].x, rimOuterScreen[0].y);
+      X.lineTo(rimOuterScreen[1].x, rimOuterScreen[1].y);
+      X.lineTo(rimOuterScreen[2].x, rimOuterScreen[2].y);
+      X.lineTo(rimOuterScreen[3].x, rimOuterScreen[3].y);
+      X.closePath();
+      X.stroke();
+      X.restore();
       // ── flower spots — deterministic small dots in 3 colors, scattered in the lawn only ──
       X.save();
       var flowerColors=['rgba(232,124,164,0.85)','rgba(248,220,96,0.88)','rgba(248,248,240,0.85)'];
@@ -4690,7 +4889,12 @@ button.act:disabled{opacity:0.5;cursor:default;}
       poly([[0,-1.5],[PARK_W,-1.5],[PARK_W,-0.35],[0,-0.35]], 'rgba(26,26,32,0.92)', 'rgba(255,255,255,0.08)',1);
       X.strokeStyle='rgba(232,210,120,0.55)'; X.setLineDash([9*z,9*z]);
       var r1=iso(0.2,-0.92), r2=iso(PARK_W-0.2,-0.92); X.beginPath(); X.moveTo(r1.x,r1.y); X.lineTo(r2.x,r2.y); X.stroke(); X.setLineDash([]);
-      CARS.forEach(function(c){ drawCar(c[0],c[1],c[2]); });
+      // animated road cars — positions updated each frame by tickCars()
+      // draw order: outbound lane first (front), then inbound (back) for natural overlap
+      for(var cai=0; cai<CARS.length; cai++){
+        var car = CARS[cai];
+        drawCar(car.x, car.y, car.color, car.dir, _carPhase[cai]||0, _now);
+      }
       // white event tent in the left grass strip (west of the plaza)
       drawTent(-0.15, 0.5);
       // ── lake — wider sandy shore with soft radial fade to grass ──
@@ -4743,7 +4947,7 @@ button.act:disabled{opacity:0.5;cursor:default;}
       X.restore();
       // ── animated ripple/highlight — thin white elliptical arcs that drift across the lake ──
       var pondCent=iso(POND.cx, POND.cy);
-      var ripplePhase=Math.sin(performance.now()/1500);
+      var ripplePhase=Math.sin(_now/1500);
       X.save();
       X.strokeStyle='rgba(232,248,252,0.7)'; X.lineWidth=1.0*z; X.lineCap='round';
       for(var rk=0;rk<4;rk++){
@@ -4754,7 +4958,7 @@ button.act:disabled{opacity:0.5;cursor:default;}
         var rCy2=POND.cy - 0.10 + rk*0.12;
         var rA2=iso(rCx2-rxr2, rCy2);
         var rB2=iso(rCx2+rxr2, rCy2);
-        X.globalAlpha=0.35 + 0.4*Math.abs(Math.sin(performance.now()/900 + rk));
+        X.globalAlpha=0.35 + 0.4*Math.abs(Math.sin(_now/900 + rk));
         X.beginPath();
         X.moveTo(rA2.x, rA2.y);
         X.quadraticCurveTo(pondCent.x, rA2.y - 3*z, rB2.x, rB2.y);
@@ -4801,7 +5005,7 @@ button.act:disabled{opacity:0.5;cursor:default;}
       // ── tiny fountain — 3 concentric rings of decreasing opacity around lake centroid ──
       X.save();
       for(var fk=0;fk<3;fk++){
-        var fr=((fk+1)*0.18) + 0.06*Math.abs(Math.sin(performance.now()/600 + fk));
+        var fr=((fk+1)*0.18) + 0.06*Math.abs(Math.sin(_now/600 + fk));
         var falpha=0.55 - fk*0.18;
         var fcol='rgba(220,240,248,'+falpha.toFixed(3)+')';
         var fringPts=[];
@@ -4937,54 +5141,271 @@ button.act:disabled{opacity:0.5;cursor:default;}
       X.fillStyle='rgba(232,72,72,0.95)';
       X.beginPath(); X.moveTo(rdR.x,rdR.y-4*z); X.lineTo(rdR.x+2.5*z,rdR.y-3*z); X.lineTo(rdR.x,rdR.y-2*z); X.closePath(); X.fill();
     }
-    function drawCar(wx,wy,col){
+    function drawCar(wx,wy,col,dir,phase,now){
       var p=iso(wx,wy), z=cam.z;
-      // soft drop shadow
+      // Optional animation params: dir (+1 right / -1 left), phase (per-car
+      // offset in seconds), now (performance.now in ms). Falls back to the
+      // static parked-car look when these are undefined.
+      var moving = (dir===1 || dir===-1) && typeof now === 'number';
+      // gentle vertical bob so a moving car looks like it has suspension
+      var bob = moving ? Math.sin((now/180 + (phase||0)*1000)) * 0.5*z : 0;
+      // soft drop shadow — slight motion blur for moving cars
       X.fillStyle='rgba(0,0,0,0.32)';
       X.beginPath(); X.ellipse(p.x,p.y+4*z,13*z,5.5*z,0,0,7); X.fill();
+      if(moving){
+        // ground shadow streak behind the car (opposite to direction of travel)
+        var sx = p.x - dir*8*z;
+        X.fillStyle='rgba(0,0,0,0.10)';
+        X.beginPath(); X.ellipse(sx, p.y+4.5*z, 9*z, 4*z, 0, 0, 7); X.fill();
+        // soft headlight beam projected on the road in front of the car
+        var beamFrontX = p.x + dir*16*z;
+        var beam = X.createRadialGradient(beamFrontX, p.y+1*z, 1*z, beamFrontX, p.y+1*z, 14*z);
+        beam.addColorStop(0, 'rgba(255,242,200,0.32)');
+        beam.addColorStop(0.5, 'rgba(255,242,200,0.10)');
+        beam.addColorStop(1, 'rgba(255,242,200,0)');
+        X.save();
+        X.fillStyle = beam;
+        X.beginPath(); X.ellipse(beamFrontX, p.y+1*z, 14*z, 6*z, 0, 0, Math.PI*2); X.fill();
+        X.restore();
+      }
       // chassis (lower body)
       X.fillStyle=col;
-      X.beginPath(); X.roundRect(p.x-13*z,p.y-5*z,26*z,11*z,3*z); X.fill();
+      X.beginPath(); X.roundRect(p.x-13*z,p.y-5*z+bob,26*z,11*z,3*z); X.fill();
       // chassis bottom shade
       X.fillStyle='rgba(0,0,0,0.22)';
-      X.beginPath(); X.roundRect(p.x-13*z,p.y+2*z,26*z,4*z,2*z); X.fill();
+      X.beginPath(); X.roundRect(p.x-13*z,p.y+2*z+bob,26*z,4*z,2*z); X.fill();
       // roof (darker top)
       X.fillStyle='rgba(0,0,0,0.55)';
-      X.beginPath(); X.roundRect(p.x-8*z,p.y-10*z,16*z,6*z,2.5*z); X.fill();
+      X.beginPath(); X.roundRect(p.x-8*z,p.y-10*z+bob,16*z,6*z,2.5*z); X.fill();
       // roof tint with car color
       X.fillStyle=col;
       X.globalAlpha=0.6;
-      X.beginPath(); X.roundRect(p.x-8*z,p.y-10*z,16*z,6*z,2.5*z); X.fill();
+      X.beginPath(); X.roundRect(p.x-8*z,p.y-10*z+bob,16*z,6*z,2.5*z); X.fill();
       X.globalAlpha=1;
       // windshield highlight
       X.fillStyle='rgba(180,220,255,0.65)';
-      X.beginPath(); X.roundRect(p.x-6*z,p.y-9*z,12*z,3*z,1.5*z); X.fill();
+      X.beginPath(); X.roundRect(p.x-6*z,p.y-9*z+bob,12*z,3*z,1.5*z); X.fill();
       // windshield shine
       X.fillStyle='rgba(255,255,255,0.45)';
       X.beginPath();
-      X.moveTo(p.x-5*z,p.y-9*z); X.lineTo(p.x-2*z,p.y-9*z); X.lineTo(p.x-4*z,p.y-7*z); X.closePath(); X.fill();
-      // wheels
+      X.moveTo(p.x-5*z,p.y-9*z+bob); X.lineTo(p.x-2*z,p.y-9*z+bob); X.lineTo(p.x-4*z,p.y-7*z+bob); X.closePath(); X.fill();
+      // wheels — animated spokes when the car is moving (rotation = distance traveled)
       X.fillStyle='#0c0c10';
-      X.beginPath(); X.arc(p.x-8*z,p.y+5*z,2.6*z,0,7); X.fill();
-      X.beginPath(); X.arc(p.x+8*z,p.y+5*z,2.6*z,0,7); X.fill();
-      X.beginPath(); X.arc(p.x-8*z,p.y+6*z,2.6*z,0,7); X.fill();
-      X.beginPath(); X.arc(p.x+8*z,p.y+6*z,2.6*z,0,7); X.fill();
-      // wheel rims
+      X.beginPath(); X.arc(p.x-8*z,p.y+5*z+bob,2.6*z,0,7); X.fill();
+      X.beginPath(); X.arc(p.x+8*z,p.y+5*z+bob,2.6*z,0,7); X.fill();
+      X.beginPath(); X.arc(p.x-8*z,p.y+6*z+bob,2.6*z,0,7); X.fill();
+      X.beginPath(); X.arc(p.x+8*z,p.y+6*z+bob,2.6*z,0,7); X.fill();
+      // wheel rims with a moving spoke mark so wheels visibly spin
       X.fillStyle='rgba(200,200,210,0.75)';
-      X.beginPath(); X.arc(p.x-8*z,p.y+5.5*z,1*z,0,7); X.fill();
-      X.beginPath(); X.arc(p.x+8*z,p.y+5.5*z,1*z,0,7); X.fill();
-      // headlight glow (front — right side)
+      X.beginPath(); X.arc(p.x-8*z,p.y+5.5*z+bob,1*z,0,7); X.fill();
+      X.beginPath(); X.arc(p.x+8*z,p.y+5.5*z+bob,1*z,0,7); X.fill();
+      // wheel spoke (rotates with speed) — gives the impression of motion
+      if(moving){
+        var spokeAng = (now/40 + (phase||0)*1000) % (Math.PI*2);
+        var spokeDx = Math.cos(spokeAng) * 1.6*z;
+        var spokeDy = Math.sin(spokeAng) * 1.6*z;
+        X.strokeStyle='rgba(220,220,230,0.85)'; X.lineWidth=0.5*z;
+        X.beginPath(); X.moveTo(p.x-8*z - spokeDx, p.y+5.5*z+bob - spokeDy); X.lineTo(p.x-8*z + spokeDx, p.y+5.5*z+bob + spokeDy); X.stroke();
+        X.beginPath(); X.moveTo(p.x+8*z - spokeDx, p.y+5.5*z+bob - spokeDy); X.lineTo(p.x+8*z + spokeDx, p.y+5.5*z+bob + spokeDy); X.stroke();
+      }
+      // headlight (front — the side the car is driving toward)
+      var frontX = p.x + (dir||1)*12*z;
       X.fillStyle='rgba(255,240,180,0.95)';
-      X.beginPath(); X.arc(p.x+12*z,p.y-1*z,1.6*z,0,7); X.fill();
+      X.beginPath(); X.arc(frontX, p.y-1*z+bob, 1.6*z, 0, 7); X.fill();
       X.fillStyle='rgba(255,240,180,0.4)';
-      X.beginPath(); X.arc(p.x+12*z,p.y-1*z,3*z,0,7); X.fill();
-      // tail light (rear — left side)
+      X.beginPath(); X.arc(frontX, p.y-1*z+bob, 3*z, 0, 7); X.fill();
+      // taillight (rear — opposite side, slightly redder)
+      var rearX = p.x - (dir||1)*12*z;
       X.fillStyle='rgba(255,80,80,0.85)';
-      X.beginPath(); X.arc(p.x-12*z,p.y-1*z,1.2*z,0,7); X.fill();
+      X.beginPath(); X.arc(rearX, p.y-1*z+bob, 1.2*z, 0, 7); X.fill();
+      if(moving){
+        // a small red glow on the road behind the car
+        X.fillStyle='rgba(255,80,80,0.25)';
+        X.beginPath(); X.arc(rearX - dir*3*z, p.y+1*z+bob, 2.6*z, 0, 7); X.fill();
+      }
       // body highlight
       X.fillStyle='rgba(255,255,255,0.18)';
-      X.beginPath(); X.roundRect(p.x-12*z,p.y-4*z,24*z,1.5*z,1*z); X.fill();
+      X.beginPath(); X.roundRect(p.x-12*z,p.y-4*z+bob,24*z,1.5*z,1*z); X.fill();
     }
+
+    // ── Atmosphere: sky, sun, distant mountains, clouds, haze ──
+    // Painted on top of the cleared canvas and below the rest of the map
+    // so the map looks like it sits in an actual world instead of on a
+    // blank panel. Cheap to render (a handful of full-canvas fills + a
+    // few silhouette paths + a small cloud set) and turns the whole
+    // scene from "miniature on a black velvet" into "park at golden hour".
+    //
+    // Everything is drawn in screen space, not world space, because the
+    // sky doesn't follow the iso projection — it's a backdrop, not a
+    // surface. Distant mountains live just above the road horizon line,
+    // the sun is fixed near the upper-right (a warm focal point), and a
+    // handful of soft clouds drift slowly across the sky.
+    function drawAtmosphere(now){
+      if(!W || !H) return;
+      var z = cam.z;
+
+      // ── sky gradient — warm late-afternoon palette (top to bottom) ──
+      // Top: deep cobalt → mid: soft sky → low: warm gold haze. Anchored
+      // to a virtual horizon line ~38% from the top of the stage so the
+      // map always sits on the same horizon regardless of zoom.
+      var horizon = H * 0.42;
+      var sky = X.createLinearGradient(0, 0, 0, H);
+      sky.addColorStop(0,    'rgba(46, 78, 132, 0.95)');  // deep sky
+      sky.addColorStop(0.30, 'rgba(108, 152, 196, 0.85)'); // mid sky
+      sky.addColorStop(0.46, 'rgba(214, 184, 138, 0.78)'); // warm horizon
+      sky.addColorStop(0.55, 'rgba(244, 222, 168, 0.62)'); // soft golden glow
+      sky.addColorStop(0.75, 'rgba(248, 232, 200, 0.20)'); // fades into the ground area
+      sky.addColorStop(1,    'rgba(248, 232, 200, 0)');
+      X.fillStyle = sky;
+      X.fillRect(0, 0, W, H);
+
+      // ── sun — a soft warm disc with a wide glow halo ──
+      // Anchored at ~78% across, 22% down so it reads as the off-screen
+      // light source warming the whole scene. The glow pulses very
+      // gently so it doesn't feel like a static sticker.
+      var sunX = W * 0.78;
+      var sunY = H * 0.22;
+      var sunR = 28 * (0.95 + 0.05 * Math.sin(now/2400));
+      // outer warm glow
+      var glow = X.createRadialGradient(sunX, sunY, sunR*0.6, sunX, sunY, sunR*7);
+      glow.addColorStop(0,   'rgba(255, 222, 140, 0.55)');
+      glow.addColorStop(0.25,'rgba(255, 210, 130, 0.30)');
+      glow.addColorStop(0.6, 'rgba(255, 200, 120, 0.08)');
+      glow.addColorStop(1,   'rgba(255, 200, 120, 0)');
+      X.fillStyle = glow;
+      X.fillRect(0, 0, W, H);
+      // sun disc
+      var disc = X.createRadialGradient(sunX, sunY, sunR*0.2, sunX, sunY, sunR);
+      disc.addColorStop(0,   'rgba(255, 250, 230, 1)');
+      disc.addColorStop(0.6, 'rgba(255, 232, 170, 0.95)');
+      disc.addColorStop(1,   'rgba(255, 210, 130, 0)');
+      X.fillStyle = disc;
+      X.beginPath(); X.arc(sunX, sunY, sunR, 0, Math.PI*2); X.fill();
+
+      // ── distant mountain silhouette (3 receding layers) ──
+      // Each layer uses a slightly lighter color so the eye reads depth.
+      // Anchored just below the horizon so the iso map sits in front of
+      // them. Heights/shapes are deterministic so the silhouette doesn't
+      // shimmer between frames.
+      function mountainLayer(baseY, amp, segments, color, seedOff){
+        X.fillStyle = color;
+        X.beginPath();
+        X.moveTo(0, H);
+        // sample the silhouette using a sum of low-frequency sines
+        for(var mx=0; mx<=W; mx+=8){
+          var t = mx / W;
+          var h = (
+            Math.sin(t*6.3 + seedOff) * 0.5 +
+            Math.sin(t*12.5 + seedOff*2.3) * 0.28 +
+            Math.sin(t*22.1 + seedOff*0.7) * 0.14
+          ) * amp;
+          X.lineTo(mx, baseY - h);
+        }
+        X.lineTo(W, H);
+        X.closePath();
+        X.fill();
+      }
+      // farther layer (lighter haze, lower)
+      mountainLayer(H*0.46, 28, 18, 'rgba(120, 132, 158, 0.45)', 1.7);
+      // middle layer
+      mountainLayer(H*0.48, 36, 16, 'rgba(86, 100, 124, 0.55)', 3.1);
+      // closer ridge (darkest, in front of the plaza)
+      mountainLayer(H*0.50, 22, 14, 'rgba(54, 68, 86, 0.60)', 0.4);
+
+      // ── soft cloud band — 5 elongated ellipses drifting right ──
+      // Drawn as flat white ellipses with low alpha so they look like
+      // wisps, not puffs. Each cloud has its own period so they don't
+      // march in lockstep.
+      var cloudColors = [
+        'rgba(255,255,255,0.55)',
+        'rgba(255,250,240,0.45)',
+        'rgba(248,242,228,0.40)',
+        'rgba(255,250,235,0.35)',
+        'rgba(252,246,232,0.50)',
+      ];
+      for(var ci=0; ci<cloudColors.length; ci++){
+        var period = 90 + ci*22;            // seconds for a full pass
+        var drift  = ((now/1000) / period) % 1;  // 0..1
+        var cx     = (drift * (W + 240)) - 120;  // wrap from -120 to W+120
+        var cy     = H*0.10 + ci*16;
+        var rx     = 60 + ci*8;
+        var ry     = 10 + (ci%3)*3;
+        X.fillStyle = cloudColors[ci];
+        // fluffy edge: 3 overlapping ellipses
+        X.beginPath(); X.ellipse(cx,         cy, rx,         ry, 0, 0, Math.PI*2); X.fill();
+        X.beginPath(); X.ellipse(cx - rx*0.5, cy + ry*0.4, rx*0.7, ry*0.7, 0, 0, Math.PI*2); X.fill();
+        X.beginPath(); X.ellipse(cx + rx*0.5, cy + ry*0.3, rx*0.7, ry*0.6, 0, 0, Math.PI*2); X.fill();
+      }
+
+      // ── soft warm light wash on the upper third of the map ──
+      // Sits in screen space too: a wide radial glow over the entire
+      // map area that makes the grass + plaza read as if lit from the
+      // direction of the sun (upper-right). Without this the map looks
+      // like it was cut out and pasted in.
+      var wash = X.createRadialGradient(sunX, sunY*0.7, 40, sunX, sunY*0.7, Math.max(W, H)*0.85);
+      wash.addColorStop(0,    'rgba(255, 220, 150, 0.16)');
+      wash.addColorStop(0.35, 'rgba(255, 200, 130, 0.06)');
+      wash.addColorStop(1,    'rgba(255, 200, 130, 0)');
+      X.fillStyle = wash;
+      X.fillRect(0, 0, W, H);
+
+      // ── subtle haze band along the horizon ──
+      // Sits just above the road so the cars pop against a soft
+      // horizon-glow rather than a hard line.
+      var haze = X.createLinearGradient(0, horizon - 30, 0, horizon + 50);
+      haze.addColorStop(0,   'rgba(255, 220, 160, 0)');
+      haze.addColorStop(0.5, 'rgba(255, 220, 160, 0.22)');
+      haze.addColorStop(1,   'rgba(255, 220, 160, 0)');
+      X.fillStyle = haze;
+      X.fillRect(0, horizon - 30, W, 80);
+
+      // ── ambient particles — drifting motes / pollen / fireflies ──
+      // 40 tiny dots that float across the scene. Each one is held in
+      // an array; the array is seeded once (so they don't all start at
+      // the same position) and advanced by a tiny per-frame velocity.
+      // On first call we lazily seed it; on resize we re-distribute.
+      if(!_atmos.particles){
+        _atmos.particles = [];
+        for(var pi=0; pi<40; pi++){
+          _atmos.particles.push({
+            x: Math.random()*W,
+            y: H*0.20 + Math.random()*H*0.55,
+            r: 0.8 + Math.random()*1.6,
+            vx: -6 + Math.random()*12,         // px/sec, mostly right
+            vy: -2 + Math.random()*4,           // slight up/down sway
+            phase: Math.random()*Math.PI*2,
+            twinkle: 0.5 + Math.random()*0.5,   // brightness amplitude
+            hue: Math.random() < 0.35 ? 'warm' : 'cool',  // mix of gold + silver
+          });
+        }
+      }
+      var dt = _atmos.lastNow ? Math.min(64, now - _atmos.lastNow)/1000 : 0.016;
+      _atmos.lastNow = now;
+      for(var pj=0; pj<_atmos.particles.length; pj++){
+        var pt = _atmos.particles[pj];
+        // simple wrap
+        pt.x += pt.vx * dt;
+        pt.y += Math.sin(now/1200 + pt.phase) * 0.3;
+        if(pt.x > W + 8) pt.x = -8;
+        if(pt.x < -8) pt.x = W + 8;
+        if(pt.y < H*0.10) pt.y = H*0.75;
+        if(pt.y > H*0.80) pt.y = H*0.15;
+        // soft twinkle alpha
+        var a = 0.25 + 0.45 * Math.abs(Math.sin(now/700 + pt.phase)) * pt.twinkle;
+        X.fillStyle = pt.hue === 'warm'
+          ? 'rgba(255, 230, 160, '+a.toFixed(3)+')'
+          : 'rgba(220, 235, 250, '+a.toFixed(3)+')';
+        X.beginPath(); X.arc(pt.x, pt.y, pt.r, 0, Math.PI*2); X.fill();
+        // tiny halo
+        X.fillStyle = pt.hue === 'warm'
+          ? 'rgba(255, 220, 140, '+(a*0.35).toFixed(3)+')'
+          : 'rgba(200, 220, 245, '+(a*0.30).toFixed(3)+')';
+        X.beginPath(); X.arc(pt.x, pt.y, pt.r*2.5, 0, Math.PI*2); X.fill();
+      }
+    }
+    // Holds the persistent atmospheric state (particle positions + last tick time).
+    var _atmos = { particles: null, lastNow: 0 };
+
     // Sun-shade pavilion: 4 thin white poles supporting a flat white square canopy.
     function drawPavilion(wx,wy){
       var p=iso(wx,wy), z=cam.z;
@@ -5839,6 +6260,26 @@ button.act:disabled{opacity:0.5;cursor:default;}
           }
         }
       }
+      // Cars share the same elapsed-dt clock so a tab-switch doesn't
+      // catapult every car off the road at once. speed is world units
+      // per second, dt is milliseconds. cdt is the already-clamped dt.
+      var cdt = Math.min(64, dt);
+      for(var ci=0; ci<CARS.length; ci++){
+        var car = CARS[ci];
+        car.x += car.dir * car.speed * (cdt/1000);
+        // Wrap the car around the road. When it leaves one end, it
+        // re-enters the opposite end on the other lane so oncoming
+        // traffic feels continuous.
+        if(car.dir > 0 && car.x > PARK_W + 0.5){
+          car.x = -0.5;
+          car.y = (car.y < -0.9) ? -0.65 : -1.18;
+          car.dir = (car.y < -0.9) ? +1 : -1;
+        } else if(car.dir < 0 && car.x < -0.5){
+          car.x = PARK_W + 0.5;
+          car.y = (car.y < -0.9) ? -0.65 : -1.18;
+          car.dir = (car.y < -0.9) ? +1 : -1;
+        }
+      }
     }
     function walkerPos(w){
       // Decode w.distance (in units of "segments") into a (seg, t) so
@@ -5952,8 +6393,14 @@ button.act:disabled{opacity:0.5;cursor:default;}
       if(!running) return;
       var now = performance.now();
       X.clearRect(0,0,W,H);
-      drawGround();
-      // step the looping walkers along their fixed paths
+      // ── atmosphere: sky + sun + clouds + distant mountains + haze ──
+      // Painted first, behind everything else, so the rest of the map
+      // sits on top of an actual horizon instead of on the empty page
+      // background. Drawn every frame so the sun and clouds drift even
+      // when the rest of the scene is static.
+      drawAtmosphere(now);
+      drawGround(now);
+      // step the looping walkers (and road cars) along their paths
       tickWalkers(now);
       // Re-derive status every frame so the "ended" countdown (a wall-
       // clock timer) decrements smoothly between telemetry polls (3s).
@@ -6721,6 +7168,7 @@ button.act:disabled{opacity:0.5;cursor:default;}
           + '<div class="pk-ctl" style="margin-top:0.55rem"><button class="rp-btn primary" id="pk-unattended-test">Run unattended readiness</button><button class="rp-btn" id="pk-pipeline-start">Start full test</button><button class="rp-btn danger" id="pk-pipeline-stop">Stop conversation</button></div>'
           + '<div class="pk-note" id="pk-unattended-result">Unattended readiness runs an acoustic speaker/mic round-trip, triggers the production motion path, and requires greeting playback on the robot.</div>'
           + '<div class="pk-pipeline" id="pk-pipeline"></div>')
+        + sect('Production run history','<div class="pk-pipe-history" style="margin-top:0;padding-top:0;border-top:0"><div class="pk-pipe-history-head"><b>Persistent sessions</b><div class="pk-history-pager"><button class="rp-btn" id="pk-history-prev">Prev</button><span id="pk-history-page">page 1</span><button class="rp-btn" id="pk-history-next">Next</button></div></div><div class="pk-pipe-history-list" id="pk-pipeline-history"><div class="pk-note">Loading persistent sessions...</div></div></div>')
         + sect('🎙 microphone','<div class="pk-meter"><span class="lab">input</span><div class="pk-bars" id="pk-micbars"></div><span class="pk-val" id="pk-micval">—</span></div><div class="pk-note" id="pk-micstate">awaiting robot audio plugin</div><div class="pk-ctl" style="margin-top:.5rem"><button class="rp-btn" id="pk-mic-listen">Listen in browser</button><label class="pk-note" style="display:flex;align-items:center;gap:.35rem;margin:0">volume <input id="pk-mic-volume" type="range" min="0" max="100" value="80" style="width:90px"></label></div><div class="pk-note" id="pk-mic-listen-note">Muted by default. Use headphones to prevent acoustic feedback.</div>')
         + sect('🔊 speaker','<canvas class="pk-wave" id="pk-spkwave" width="360" height="32"></canvas><div class="pk-meter"><span class="lab">output</span><div class="pk-bars" id="pk-spkbars"></div><span class="pk-val" id="pk-spkval">—</span></div><div class="pk-note" id="pk-spkstate">TTS plays on the robot speaker — use “Test speaker” below to round-trip a tone and confirm the audio path</div>'
           + '<div class="rp-form" id="pk-spk-test" style="grid-template-columns:1fr 1fr;gap:0.4rem;margin-top:0.55rem;padding:0.55rem;border-color:var(--border-strong);">'
@@ -6743,6 +7191,8 @@ button.act:disabled{opacity:0.5;cursor:default;}
           + sect('🩺 robot services','<div id="pk-svc-list" class="pk-svc-list"><div class="pk-note">waiting for supervisor report…</div></div><div class="pk-note" id="pk-svc-age" style="margin-top:0.35rem;"></div><div class="rp-field" style="margin-top:0.55rem;"><label>Quick run (on the robot, from packages/robopark/scheduler)</label><input id="pk-svc-clicmd" readonly value="python robot_supervisor.py"></div><button class="rp-btn" id="pk-svc-clicmd-copy" style="margin-top:0.35rem;">📋 Copy command</button>')
           + buildShellSection(schedId(n))
           + sect('🎭 character / voice','<div class="pk-note" id="pk-eff-note" style="margin-bottom:0.45rem;">loading effective config…</div><div class="rp-field"><label>Character preset</label><select class="rp-char" id="pk-eff-char" data-robot="'+esc(schedId(n))+'">'+effPresetOptions+'</select></div><div class="rp-field"><label>Voice stack</label><select class="rp-voice" id="pk-eff-voice" data-robot="'+esc(schedId(n))+'">'+effVoiceOptions+'</select></div><div class="rp-config-actions" style="margin-top:.45rem"><button class="rp-btn primary" id="pk-eff-save" data-robot="'+esc(schedId(n))+'">Apply to robot</button><button class="rp-btn" id="pk-edit-character">Edit character</button><button class="rp-btn" id="pk-edit-stack">Edit stack</button><button class="rp-btn" id="pk-new-stack">New stack</button></div>');
+         b.innerHTML += sect('Microphone setup suite','<div class="pk-mic-suite"><div class="pk-mic-health" id="pk-mic-health"><div class="pk-mic-check"><div class="k">Hardware lock</div><div class="v">USB mic hw:3,0</div></div><div class="pk-mic-check"><div class="k">PCM capture</div><div class="v">not tested</div></div><div class="pk-mic-check"><div class="k">Production track</div><div class="v">waiting</div></div></div><div class="rp-form" style="grid-template-columns:1fr 1fr;gap:.4rem"><div class="rp-field"><label>Ground-truth capture</label><select id="pk-mic-duration"><option value="2">2 seconds</option><option value="4" selected>4 seconds</option><option value="8">8 seconds</option></select></div><div class="rp-field"><label>Locked input</label><div class="pk-note" style="margin:.45rem 0 0">USB microphone (plughw:3,0)</div></div></div><div class="pk-ctl"><button class="rp-btn primary" id="pk-mic-groundtruth">Run raw mic capture</button><button class="rp-btn" id="pk-mic-roundtrip">Run speaker + mic test</button><button class="rp-btn" id="pk-mic-apply">Reapply production profile</button></div><div class="pk-note" id="pk-mic-test-state">Raw capture bypasses LiveKit and tests the exact ALSA path. Round-trip then verifies the physical speaker-to-mic path.</div><div id="pk-mic-test-result"></div></div>');
+         b.innerHTML += sect('Motor registry + sequence canvas','<div class="rp-field"><label>Robot-local motor server</label><input id="pk-motor-url" value="http://127.0.0.1:8001" placeholder="http://127.0.0.1:8001"></div><div class="pk-motor-registry" id="pk-motor-registry"></div><button class="rp-btn" id="pk-motor-add" style="margin-top:.4rem">Add registered motor</button><div class="rp-form" style="grid-template-columns:1fr 1fr;margin-top:.7rem"><div class="rp-field"><label>Saved sequence</label><select id="pk-motor-sequence"></select></div><div class="rp-field"><label>Sequence name</label><input id="pk-motor-sequence-name" placeholder="Greeting motion"></div></div><div class="pk-motor-canvas" id="pk-motor-canvas"></div><div class="pk-ctl"><button class="rp-btn" id="pk-motor-step-add">Add timed node</button><button class="rp-btn primary" id="pk-motor-save">Save motor profile</button><button class="rp-btn" id="pk-motor-run">Run selected sequence</button><button class="rp-btn danger" id="pk-motor-test-all">Test all registered GPIO</button></div><label class="pk-prodtoggle"><input type="checkbox" id="pk-motor-greeting"><span>Run this sequence automatically with the greeting pipeline</span></label><div class="pk-note">Full GPIO test pulses registered relays only: 300 ms on, 200 ms pause, one at a time.</div><div class="pk-motor-status" id="pk-motor-status">Loading motor profile...</div>');
          b.innerHTML += sect('Production camera + audio','<div class="pk-note" id="pk-device-search" style="margin-bottom:.55rem">Hardware locked for launch. Camera, microphone, and speaker cannot drift between restarts.</div><div class="rp-field"><label>Camera input</label><select id="pk-video-device" disabled></select></div><div class="rp-field"><label>Microphone input</label><select id="pk-audio-input" disabled></select></div><div class="rp-field"><label>Speaker output</label><select id="pk-audio-output" disabled></select></div><button class="rp-btn primary" id="pk-device-test-speaker" style="margin-top:0.35rem">Test USB speaker now</button><div class="rp-field"><label>Preset greeting phrases <span class="pk-note">one per line, cached per voice</span></label><textarea id="pk-greeting-phrases" rows="3" placeholder="Hi, I am Jaguar! / Welcome to RoboPark."></textarea></div><button class="rp-btn" id="pk-device-save" style="margin-top:0.35rem">Save greetings + enforce hardware</button><div class="pk-note" id="pk-device-note">waiting for robot heartbeat inventory</div>');
           // Put live hardware selection beside the camera and audio tests,
           // ahead of persona and service administration in the Park drawer.
@@ -6765,6 +7215,18 @@ button.act:disabled{opacity:0.5;cursor:default;}
          });
          var micListen=$('pk-mic-listen');if(micListen)micListen.addEventListener('click',function(){setMicMonitorAudible(!micMonitorAudible);});
          var micVolume=$('pk-mic-volume');if(micVolume)micVolume.addEventListener('input',function(){micMonitorVolume=Math.max(0,Math.min(1,Number(micVolume.value||80)/100));if(micMonitorGain)micMonitorGain.gain.value=micMonitorAudible?micMonitorVolume:0;});
+         var micGround=$('pk-mic-groundtruth');if(micGround)micGround.addEventListener('click',function(){if(rpReadOnly){showOut('read-only node');return;}runMicGroundtruth(n);});
+         var micRound=$('pk-mic-roundtrip');if(micRound)micRound.addEventListener('click',function(){if(rpReadOnly){showOut('read-only node');return;}runMicRoundtrip(n);});
+         var micApply=$('pk-mic-apply');if(micApply)micApply.addEventListener('click',function(){if(rpReadOnly){showOut('read-only node');return;}saveDeviceSelectors(n);});
+         var motorAdd=$('pk-motor-add');if(motorAdd)motorAdd.addEventListener('click',function(){motorEditorAddMotor();});
+         var motorStep=$('pk-motor-step-add');if(motorStep)motorStep.addEventListener('click',function(){motorEditorAddStep();});
+         var motorSave=$('pk-motor-save');if(motorSave)motorSave.addEventListener('click',function(){if(rpReadOnly){showOut('read-only node');return;}saveMotorProfile(n);});
+         var motorRun=$('pk-motor-run');if(motorRun)motorRun.addEventListener('click',function(){if(rpReadOnly){showOut('read-only node');return;}runMotorSequence(n);});
+         var motorTestAll=$('pk-motor-test-all');if(motorTestAll)motorTestAll.addEventListener('click',function(){if(rpReadOnly){showOut('read-only node');return;}testAllMotorRelays(n);});
+         var motorSeq=$('pk-motor-sequence');if(motorSeq)motorSeq.addEventListener('change',function(){selectMotorSequence(motorSeq.value);});
+         var motorRegistry=$('pk-motor-registry');if(motorRegistry)motorRegistry.addEventListener('click',function(ev){var button=ev.target.closest('[data-motor-action]');if(!button)return;var index=Number(button.dataset.index);if(button.dataset.motorAction==='remove'){motorProfile.registry.splice(index,1);renderMotorEditor();}else if(button.dataset.motorAction==='test'){testMotorRelay(n,index);}});
+         var motorCanvas=$('pk-motor-canvas');if(motorCanvas)motorCanvas.addEventListener('click',function(ev){var button=ev.target.closest('[data-step-remove]');if(button){captureMotorEditor();motorEditorSequence().steps.splice(Number(button.dataset.stepRemove),1);renderMotorEditor();}});
+         loadMotorProfile(n);
          startCam(n); startMeters(n); loadEffectiveConfig(schedId(n)); refreshSupervisorPanel(n);
         _bindShellSection(n);
         _spkTestRenderHistory(schedId(n));
@@ -6792,6 +7254,11 @@ button.act:disabled{opacity:0.5;cursor:default;}
         var pipelineStart=$('pk-pipeline-start'); if(pipelineStart) pipelineStart.addEventListener('click', function(){ if(rpReadOnly){ showOut('read-only node'); return; } startPipelineTest(n); });
         var unattended=$('pk-unattended-test'); if(unattended) unattended.addEventListener('click', function(){ if(rpReadOnly){ showOut('read-only node'); return; } runUnattendedReadiness(n); });
         var pipelineStop=$('pk-pipeline-stop'); if(pipelineStop) pipelineStop.addEventListener('click', function(){ if(rpReadOnly){ showOut('read-only node'); return; } stopPipelineTest(n); });
+        var historyPrev=$('pk-history-prev');if(historyPrev)historyPrev.addEventListener('click',function(){pipelineHistoryPage=Math.max(1,pipelineHistoryPage-1);loadPipelineHistory(n);});
+        var historyNext=$('pk-history-next');if(historyNext)historyNext.addEventListener('click',function(){pipelineHistoryPage+=1;loadPipelineHistory(n);});
+        var historyList=$('pk-pipeline-history');if(historyList)historyList.addEventListener('click',function(ev){var card=ev.target.closest('.pk-run-card');if(card)openSessionDetailModal({session_id:card.dataset.session});});
+        pipelineHistoryPage=1;
+        loadPipelineHistory(n);
         pollPipeline(n);
         if(pipelineTimer) clearInterval(pipelineTimer);
         pipelineTimer=setInterval(function(){ if(drawerId===n.id) pollPipeline(n); }, 1500);
@@ -6806,12 +7273,88 @@ button.act:disabled{opacity:0.5;cursor:default;}
       refreshDrawer();
     }
 
+    var motorProfile={registry:[],sequences:[],greeting_sequence_id:null,motor_server_url:'http://127.0.0.1:8001'};
+    var motorSequenceId='';
+    function motorEditorSequence(){
+      var sequence=(motorProfile.sequences||[]).find(function(item){return item.id===motorSequenceId;});
+      if(!sequence){sequence={id:motorSequenceId||('sequence-'+Date.now()),name:'New sequence',steps:[]};motorSequenceId=sequence.id;motorProfile.sequences.push(sequence);}
+      if(!Array.isArray(sequence.steps))sequence.steps=[];
+      return sequence;
+    }
+    function captureMotorEditor(){
+      var rows=document.querySelectorAll('#pk-motor-registry .pk-motor-row');
+      if(rows.length)motorProfile.registry=Array.prototype.map.call(rows,function(row,index){
+        var fields=row.querySelectorAll('input');
+        return {id:slugify(fields[0].value)||('motor-'+(index+1)),name:fields[1].value.trim()||('Motor '+(index+1)),gpio:Number(fields[2].value),active_high:fields[3].checked,max_duration_ms:Number(fields[4].value)||3000};
+      });
+      var sequence=(motorProfile.sequences||[]).find(function(item){return item.id===motorSequenceId;});
+      if(sequence){
+        var name=$('pk-motor-sequence-name');if(name)sequence.name=name.value.trim()||sequence.name||'Sequence';
+        sequence.steps=Array.prototype.map.call(document.querySelectorAll('#pk-motor-canvas .pk-motor-node'),function(node){
+          return {motor_id:node.querySelector('[data-step-motor]').value,delay_ms:Number(node.querySelector('[data-step-delay]').value)||0,duration_ms:Number(node.querySelector('[data-step-duration]').value)||300};
+        });
+        var greeting=$('pk-motor-greeting');if(greeting)motorProfile.greeting_sequence_id=greeting.checked?sequence.id:(motorProfile.greeting_sequence_id===sequence.id?null:motorProfile.greeting_sequence_id);
+      }
+      var url=$('pk-motor-url');if(url)motorProfile.motor_server_url=url.value.trim()||'http://127.0.0.1:8001';
+    }
+    function renderMotorEditor(){
+      var registry=$('pk-motor-registry'),canvas=$('pk-motor-canvas'),select=$('pk-motor-sequence');if(!registry||!canvas||!select)return;
+      registry.innerHTML=(motorProfile.registry||[]).map(function(motor,index){return '<div class="pk-motor-row"><input value="'+esc(motor.id)+'" aria-label="Motor id"><input value="'+esc(motor.name)+'" aria-label="Motor name"><input type="number" min="2" max="27" value="'+esc(motor.gpio)+'" aria-label="BCM GPIO"><label title="Active high"><input type="checkbox" '+(motor.active_high!==false?'checked':'')+'> high</label><input type="number" min="50" max="10000" step="50" value="'+esc(motor.max_duration_ms||3000)+'" aria-label="Max pulse milliseconds"><button class="rp-btn" data-motor-action="test" data-index="'+index+'">Test</button><button class="rp-btn danger" data-motor-action="remove" data-index="'+index+'">Remove</button></div>';}).join('')||'<div class="pk-note">No relays registered. Add only wired BCM outputs.</div>';
+      select.innerHTML=(motorProfile.sequences||[]).map(function(sequence){return '<option value="'+esc(sequence.id)+'" '+(sequence.id===motorSequenceId?'selected':'')+'>'+esc(sequence.name||sequence.id)+'</option>';}).join('')+'<option value="__new__">+ New sequence</option>';
+      var sequence=motorEditorSequence(),name=$('pk-motor-sequence-name'),greeting=$('pk-motor-greeting'),url=$('pk-motor-url');
+      if(name)name.value=sequence.name||'';if(greeting)greeting.checked=motorProfile.greeting_sequence_id===sequence.id;if(url)url.value=motorProfile.motor_server_url||'http://127.0.0.1:8001';
+      var motorOptions=(motorProfile.registry||[]).map(function(motor){return '<option value="'+esc(motor.id)+'">'+esc(motor.name+' | BCM '+motor.gpio)+'</option>';}).join('');
+      canvas.innerHTML=(sequence.steps||[]).map(function(step,index){return '<div class="pk-motor-node"><div class="pk-motor-node-num">'+(index+1)+'</div><label>Relay<select data-step-motor>'+motorOptions.replace('value="'+esc(step.motor_id)+'"','value="'+esc(step.motor_id)+'" selected')+'</select></label><label>Delay ms<input data-step-delay type="number" min="0" max="30000" step="50" value="'+esc(step.delay_ms||0)+'"></label><label>Pulse ms<input data-step-duration type="number" min="50" max="10000" step="50" value="'+esc(step.duration_ms||300)+'"></label><button class="rp-btn danger" data-step-remove="'+index+'">Remove</button></div>';}).join('')||'<div class="pk-note">No timed nodes. Add a node to build the sequence.</div>';
+    }
+    function selectMotorSequence(id){
+      captureMotorEditor();
+      if(id==='__new__'){var sequence={id:'sequence-'+Date.now(),name:'New sequence',steps:[]};motorProfile.sequences.push(sequence);motorSequenceId=sequence.id;}else motorSequenceId=id;
+      renderMotorEditor();
+    }
+    function motorEditorAddMotor(){captureMotorEditor();var number=motorProfile.registry.length+1;motorProfile.registry.push({id:'motor-'+number,name:'Motor '+number,gpio:Math.min(27,Math.max(2,number+4)),active_high:true,max_duration_ms:3000});renderMotorEditor();}
+    function motorEditorAddStep(){captureMotorEditor();if(!motorProfile.registry.length){motorStatus('Register a motor before adding a timed node','bad');return;}motorEditorSequence().steps.push({motor_id:motorProfile.registry[0].id,delay_ms:0,duration_ms:300});renderMotorEditor();}
+    function motorStatus(message,kind){var host=$('pk-motor-status');if(host){host.textContent=message;host.className='pk-motor-status '+(kind||'');}}
+    function loadMotorProfile(n){
+      var robotId=schedId(n);motorStatus('Loading saved motor profile...');
+      getJson('/robopark/api/robots/'+encodeURIComponent(robotId)+'/motor-profile').then(function(data){motorProfile={registry:data.registry||[],sequences:data.sequences||[],greeting_sequence_id:data.greeting_sequence_id||null,motor_server_url:(schedulerDevice(n)||{}).motor_server_url||'http://127.0.0.1:8001'};if(!motorProfile.sequences.length)motorProfile.sequences=[{id:'greeting-motion',name:'Greeting motion',steps:[]}];motorSequenceId=motorProfile.greeting_sequence_id||motorProfile.sequences[0].id;renderMotorEditor();motorStatus('Saved profile loaded | '+motorProfile.registry.length+' relay(s), '+motorProfile.sequences.length+' sequence(s)','ok');}).catch(function(error){motorStatus('Motor profile unavailable: '+error.message,'bad');});
+    }
+    function saveMotorProfile(n){
+      captureMotorEditor();var robotId=schedId(n),url=motorProfile.motor_server_url;
+      var parsedUrl=null;try{parsedUrl=new URL(url);}catch(e){}
+      if(!parsedUrl||parsedUrl.protocol!=='http:'||(parsedUrl.hostname!=='127.0.0.1'&&parsedUrl.hostname!=='localhost')||!parsedUrl.port){motorStatus('Motor server must be robot-local: http://127.0.0.1:PORT','bad');return Promise.reject(new Error('motor server must be localhost'));}
+      motorStatus('Validating and saving motor profile...');
+      return rpAction('PATCH','/robopark/api/devices/'+encodeURIComponent(robotId),{motor_server_url:url}).then(function(){return rpAction('PUT','/robopark/api/robots/'+encodeURIComponent(robotId)+'/motor-profile',{registry:motorProfile.registry,sequences:motorProfile.sequences,greeting_sequence_id:motorProfile.greeting_sequence_id});}).then(function(data){motorProfile.registry=data.registry||[];motorProfile.sequences=data.sequences||[];motorProfile.greeting_sequence_id=data.greeting_sequence_id||null;renderMotorEditor();motorStatus('Profile saved. Greeting motion will start on first TTS playback.','ok');return data;}).catch(function(error){motorStatus('Save failed: '+error.message,'bad');throw error;});
+    }
+    function runMotorSequence(n){
+      var robotId=schedId(n),sequence=motorEditorSequence();motorStatus('Saving and queueing '+sequence.name+'...');
+      saveMotorProfile(n).then(function(){return rpAction('POST','/robopark/api/robots/'+encodeURIComponent(robotId)+'/motor-sequences/'+encodeURIComponent(sequence.id)+'/run',{});}).then(function(q){return _shellWaitForResult(robotId,q.request_id,q.device_id||robotId,'','motor-sequence');}).then(function(result){motorStatus(result.ok?'Sequence completed on robot.':'Sequence failed: '+(result.error||'unknown error'),result.ok?'ok':'bad');}).catch(function(error){motorStatus('Run failed: '+error.message,'bad');});
+    }
+    function testMotorRelay(n,index){
+      captureMotorEditor();var motor=motorProfile.registry[index];if(!motor)return;var robotId=schedId(n);motorStatus('Saving profile before safe 300 ms '+motor.name+' test...');
+      saveMotorProfile(n).then(function(){return rpAction('POST','/robopark/api/robots/'+encodeURIComponent(robotId)+'/motors/'+encodeURIComponent(motor.id)+'/test?duration_ms=300',{});}).then(function(q){return _shellWaitForResult(robotId,q.request_id,q.device_id||robotId,'','motor-test');}).then(function(result){motorStatus(result.ok?motor.name+' relay test completed.':'Relay test failed: '+(result.error||'unknown error'),result.ok?'ok':'bad');}).catch(function(error){motorStatus('Relay test failed: '+error.message,'bad');});
+    }
+    function testAllMotorRelays(n){
+      captureMotorEditor();if(!motorProfile.registry.length){motorStatus('Register at least one relay before running the GPIO test.','bad');return;}
+      if(!window.confirm('Pulse all '+motorProfile.registry.length+' registered relays one at a time? Ensure the motor area is clear.'))return;
+      var robotId=schedId(n);motorStatus('Saving profile and testing '+motorProfile.registry.length+' registered GPIO relay(s), one at a time...');
+      saveMotorProfile(n).then(function(){return rpAction('POST','/robopark/api/robots/'+encodeURIComponent(robotId)+'/motors/test-all?duration_ms=300&pause_ms=200',{});}).then(function(q){return _shellWaitForResult(robotId,q.request_id,q.device_id||robotId,'','gpio-test-all');}).then(function(result){motorStatus(result.ok?'Full registered GPIO test completed: '+(result.completed_steps||[]).length+' relay(s).':'GPIO test failed: '+(result.error||'unknown error'),result.ok?'ok':'bad');}).catch(function(error){motorStatus('GPIO test failed: '+error.message,'bad');});
+    }
+
+    var pipelineHistoryPage=1;
     var PIPELINE_LABELS={
       robot_online:'Robot online',camera_ready:'Camera detected',microphone_ready:'Microphone detected',speaker_ready:'Speaker detected',
       motion_detected:'Motion received',scheduler_session:'Scheduler session',livekit_join:'LiveKit joined',camera_published:'Camera published',
       microphone_published:'Microphone published',voice_worker:'Voice worker',stt_listening:'STT listening',llm_response:'LLM response',
-      tts_subscribed:'TTS subscribed',playback_started:'Robot playback',session_ended:'Session ended'
+      tts_subscribed:'TTS subscribed',playback_started:'Robot playback',motor_sequence:'Greeting motion',session_ended:'Session ended'
     };
+    var PIPELINE_PHASES={robot_online:'hardware',camera_ready:'hardware',microphone_ready:'hardware',speaker_ready:'hardware',motion_detected:'trigger',scheduler_session:'session',livekit_join:'session',camera_published:'media',microphone_published:'media',voice_worker:'intelligence',stt_listening:'intelligence',llm_response:'intelligence',tts_subscribed:'playback',playback_started:'playback',motor_sequence:'playback',session_ended:'close'};
+    function pipelineCurrentStage(stages,latest,running){
+      for(var i=0;i<stages.length;i++){var bad=latest[stages[i]];if(bad&&(bad.status==='failed'||bad.status==='blocked'))return stages[i];}
+      if(!running)return null;
+      var lastOk=-1;
+      for(var j=0;j<stages.length;j++){var ev=latest[stages[j]];if(ev&&(ev.status==='ok'||ev.status==='skipped'))lastOk=j;if(ev&&ev.status==='running')return stages[j];}
+      return stages[Math.min(stages.length-1,lastOk+1)];
+    }
     function renderPipeline(data){
       var host=$('pk-pipeline'), summary=$('pk-pipeline-summary'); if(!host||!summary) return;
       var latest={}, prereqs=data.prerequisites||{}, session=data.latest_session||{}, sid=session.id||null;
@@ -6822,16 +7365,37 @@ button.act:disabled{opacity:0.5;cursor:default;}
       ['robot_online','camera_ready','microphone_ready','speaker_ready'].forEach(function(stage){
         if(!latest[stage]) latest[stage]={stage:stage,status:prereqs[stage]?'ok':'blocked',message:prereqs[stage]?'Ready':'Not reported'};
       });
-      var running=data.overall==='running';
-      host.innerHTML=(data.stages||Object.keys(PIPELINE_LABELS)).map(function(stage){
-        var ev=latest[stage], status=ev&&ev.status||((running&&stage==='motion_detected')?'running':'pending');
+      var running=data.overall==='running',stages=data.stages||Object.keys(PIPELINE_LABELS),current=pipelineCurrentStage(stages,latest,running);
+      host.innerHTML=stages.map(function(stage,index){
+        var ev=latest[stage],isCurrent=stage===current,status=ev&&ev.status||(isCurrent?'running':'pending');
         var detail=ev&&(ev.message||ev.timestamp)||'waiting';
-        if(ev&&ev.timestamp) detail=detail+' · '+new Date(ev.timestamp+'Z').toLocaleTimeString();
-        return '<div class="pk-pipe-step '+esc(status)+'"><i></i><span class="stage">'+esc(PIPELINE_LABELS[stage]||stage)+'</span><span class="detail">'+esc(detail)+'</span></div>';
+        var time=ev&&ev.timestamp?new Date(ev.timestamp+'Z').toLocaleString():'';
+        var phase=PIPELINE_PHASES[stage]||'session';
+        return '<div class="pk-pipe-step phase-'+phase+' '+esc(status)+(isCurrent?' current':'')+'"><span class="step-index">'+String(index+1).padStart(2,'0')+'</span><span><span class="stage">'+esc(PIPELINE_LABELS[stage]||stage)+'</span><span class="phase">'+esc(phase)+'</span></span><span class="detail">'+esc(detail)+(time?'<span class="time">'+esc(time)+'</span>':'')+'</span></div>';
       }).join('');
       var blockers=data.blockers||[];
       summary.className='pk-pipeline-summary '+esc(data.overall||'blocked');
-      summary.textContent=blockers.length?('BLOCKED: '+blockers[0]):(running?'TEST RUNNING: watch the live camera and stage timeline':'READY: camera-to-speaker remote test can start');
+      summary.textContent=blockers.length?('BLOCKED: '+blockers[0]):(running?('ACTIVE: '+(PIPELINE_LABELS[current]||current||'starting')+' | session '+(sid||'allocating')):'READY: camera-to-speaker remote test can start');
+      var micHealth=$('pk-mic-health');if(micHealth){
+        var micEvent=latest.microphone_published,trackOk=micEvent&&micEvent.status==='ok',inventoryOk=!!prereqs.microphone_ready;
+        micHealth.innerHTML='<div class="pk-mic-check ok"><div class="k">Hardware lock</div><div class="v">USB mic hw:3,0</div></div><div class="pk-mic-check '+(inventoryOk?'ok':'bad')+'"><div class="k">Inventory</div><div class="v">'+(inventoryOk?'detected':'missing')+'</div></div><div class="pk-mic-check '+(trackOk?'ok':micEvent?'bad':'')+'"><div class="k">Production track</div><div class="v">'+esc(micEvent?(micEvent.message||micEvent.status):'waiting for session')+'</div></div>';
+      }
+    }
+    function loadPipelineHistory(n){
+      var host=$('pk-pipeline-history'),pageLabel=$('pk-history-page');if(!host)return;
+      host.innerHTML='<div class="pk-note">Loading session page...</div>';
+      getJson('/robopark/api/robots/'+encodeURIComponent(schedId(n))+'/pipeline-history?page='+pipelineHistoryPage+'&page_size=6'+(QS?'&'+QS.slice(1):''))
+        .then(function(data){
+          pipelineHistoryPage=data.page||1;if(pageLabel)pageLabel.textContent='page '+pipelineHistoryPage+' / '+(data.pages||1)+' | '+(data.total||0)+' runs';
+          var prev=$('pk-history-prev'),next=$('pk-history-next');if(prev)prev.disabled=pipelineHistoryPage<=1;if(next)next.disabled=pipelineHistoryPage>=(data.pages||1);
+          host.innerHTML=(data.items||[]).map(function(run){
+            var events=run.events||[],latest={};events.forEach(function(ev){latest[ev.stage]=ev;});
+            var hasError=Number(run.error_count||0)>0,state=!run.ended_at?'running':hasError?'bad':'ok',label=!run.ended_at?'active':hasError?'attention':(run.end_reason||'complete');
+            var started=run.started_at?new Date(run.started_at+'Z'):null,duration=run.duration_seconds!=null?run.duration_seconds:(started?Math.max(0,Math.floor((Date.now()-started.getTime())/1000)):0);
+            var stageBar=Object.keys(PIPELINE_LABELS).map(function(stage){var ev=latest[stage];return '<i class="'+esc(ev&&ev.status||'pending')+'" title="'+esc(PIPELINE_LABELS[stage])+'"></i>';}).join('');
+            return '<div class="pk-run-card" data-session="'+esc(run.session_id)+'"><div class="pk-run-top"><div><div class="pk-run-title">'+esc(run.session_id)+'</div><div class="pk-run-meta">'+esc(started?started.toLocaleString():'unknown time')+' | '+esc(rpFmtDuration(duration))+' | '+esc(run.transcript_count||0)+' transcript turns | '+esc(run.pipeline_event_count||0)+' events</div></div><span class="pk-run-state '+state+'">'+esc(label)+'</span></div><div class="pk-run-stages">'+stageBar+'</div></div>';
+          }).join('')||'<div class="pk-note">No production sessions recorded for this robot.</div>';
+        }).catch(function(e){host.innerHTML='<div class="pk-note" style="color:var(--bad)">History unavailable: '+esc(e.message)+'</div>';});
     }
     function pollPipeline(n){
       fetch('/robopark/api/robots/'+encodeURIComponent(schedId(n))+'/pipeline-status'+QS,{cache:'no-store'})
@@ -7225,7 +7789,7 @@ button.act:disabled{opacity:0.5;cursor:default;}
       }).join('');
       host.innerHTML = '<div class="pk-spk-hist-head">last '+list.length+' tests</div>' + rows;
     }
-    function _spkTestRenderResult(robotId, result){
+    function _spkTestRenderResult(robotId, result){
       var host = $('pk-spk-test-result'); if(!host) return;
       if(!result){
         host.innerHTML = '';
@@ -7252,9 +7816,32 @@ button.act:disabled{opacity:0.5;cursor:default;}
         + '<div><span class="l">format</span><span class="v">'+esc((result.output_sample_rate||result.sample_rate)+' Hz / '+(result.output_channels||1)+'ch out'+(result.playback_only?'':' · '+(result.input_sample_rate||result.sample_rate)+' Hz / '+(result.input_channels||1)+'ch in'))+'</span></div>'
         + '</div>';
       var diag = result.diagnostic ? '<div class="pk-spk-diag">'+esc(result.diagnostic)+'</div>' : '';
-      host.innerHTML = '<div class="pk-spk-result '+(result.pass?'ok':'bad')+'">'
-        + banner + meta + diag + '</div>';
-    }
+      host.innerHTML = '<div class="pk-spk-result '+(result.pass?'ok':'bad')+'">'
+        + banner + meta + diag + '</div>';
+    }
+    function _micTestRenderResult(result,label){
+      var host=$('pk-mic-test-result'),state=$('pk-mic-test-state');if(!host)return;
+      if(!result||!result.ok){var error=result&&result.error||'robot did not return a result';host.innerHTML='<div class="pk-mic-result bad"><b>TEST FAILED</b><div style="margin-top:.3rem">'+esc(error)+'</div></div>';if(state)state.textContent='Failed | '+error;return;}
+      var passed=result.pass===true,mode=result.mode||label;
+      host.innerHTML='<div class="pk-mic-result '+(passed?'ok':'bad')+'"><b>'+(passed?'MIC PATH VERIFIED':'NO USABLE SIGNAL')+'</b><div class="pk-mic-readings"><div class="pk-mic-reading"><span>Peak</span><b>'+esc(result.recorded_peak_db!=null?result.recorded_peak_db+' dB':'--')+'</b></div><div class="pk-mic-reading"><span>RMS</span><b>'+esc(result.recorded_rms_db!=null?result.recorded_rms_db+' dB':'--')+'</b></div><div class="pk-mic-reading"><span>Nonzero</span><b>'+esc(result.nonzero_percent!=null?result.nonzero_percent+'%':'--')+'</b></div><div class="pk-mic-reading"><span>Format</span><b>'+esc((result.sample_rate||result.input_sample_rate||'--')+' Hz / '+(result.channels||result.input_channels||1)+'ch')+'</b></div></div><div style="margin-top:.38rem;color:var(--muted)">'+esc(result.input_device||'USB microphone')+' | '+esc(result.duration_ms||0)+' ms | '+esc(result.diagnostic||mode)+'</div></div>';
+      if(state)state.textContent=passed?'Passed | '+mode+' confirmed on the robot':'Capture completed but no usable PCM signal was detected';
+    }
+    function setMicTestBusy(busy,text){
+      [$('pk-mic-groundtruth'),$('pk-mic-roundtrip'),$('pk-mic-apply')].forEach(function(button){if(button)button.disabled=busy;});
+      var state=$('pk-mic-test-state');if(state&&text)state.textContent=text;
+    }
+    function runMicGroundtruth(n){
+      var robotId=schedId(n),duration=parseFloat((($('pk-mic-duration')||{}).value)||'4');setMicTestBusy(true,'Recording raw PCM on the robot for '+duration+' seconds...');
+      rpAction('POST','/robopark/api/robots/'+encodeURIComponent(robotId)+'/shell/speaker-test',{mode:'mic_groundtruth',duration:duration,input:'2',input_name:'Usb Audio Device: USB Audio (hw:3,0)'})
+        .then(function(q){return _shellWaitForResult(robotId,q.request_id,q.device_id||robotId,'','mic-groundtruth');})
+        .catch(function(e){_micTestRenderResult({ok:false,error:e.message},'mic_groundtruth');setMicTestBusy(false);});
+    }
+    function runMicRoundtrip(n){
+      var robotId=schedId(n);setMicTestBusy(true,'Playing a reference tone and recording the locked USB microphone...');
+      rpAction('POST','/robopark/api/robots/'+encodeURIComponent(robotId)+'/shell/speaker-test',{mode:'tone',playback_only:false,frequency:1000,duration:1,amplitude:.6,threshold_db:-30,output:'1',input:'2',output_name:'USB Audio Device: - (hw:2,0)',input_name:'Usb Audio Device: USB Audio (hw:3,0)'})
+        .then(function(q){return _shellWaitForResult(robotId,q.request_id,q.device_id||robotId,'','mic-roundtrip');})
+        .catch(function(e){_micTestRenderResult({ok:false,error:e.message},'roundtrip');setMicTestBusy(false);});
+    }
     function runSpeakerTest(n, forcedMode){
       var robotId = schedId(n), mode=forcedMode||(($('pk-spk-mode')||{}).value||'tts');
       var buttons=[$('pk-spk-runtest'),$('pk-spk-tone'),$('pk-device-test-speaker')];buttons.forEach(function(b){if(b)b.disabled=true;});
@@ -7310,7 +7897,7 @@ button.act:disabled{opacity:0.5;cursor:default;}
     var _origRenderShellResult = _renderShellResult;
     _renderShellResult = function(robotId, result, label){
       _origRenderShellResult(robotId, result, label);
-      if(label === 'speaker-test'){
+      if(label === 'speaker-test'){
         _spkTestSetLive(robotId, {live:false});
         _spkTestMark(robotId, result);
         _spkTestRenderResult(robotId, result);
@@ -7323,8 +7910,12 @@ button.act:disabled{opacity:0.5;cursor:default;}
           else { status.textContent = '✗ no signal — '+result.recorded_peak_db+' dB peak'; }
         }
         var btn = $('pk-spk-runtest'); if(btn){ btn.disabled = false; btn.textContent = (($('pk-spk-mode')||{}).value==='tone'?'Run tone test':'Play cached voice'); }
-      }
-    };
+      }
+      if(label==='mic-groundtruth'||label==='mic-roundtrip'){
+        _micTestRenderResult(result,label);
+        setMicTestBusy(false);
+      }
+    };
 
     function openDrawerForRobot(name){
       var key=String(name||'').toLowerCase(), id='pad:'+name, found=null;