Prepare sample delivery UI

2026-06-09 11:05:18 +08:00
parent 79faa67dd8
commit 160ff54368
11 changed files with 970 additions and 826 deletions
--- a/src/lib/components/CenterStage.svelte
+++ b/src/lib/components/CenterStage.svelte
@@ -61,6 +61,8 @@
  export let replayFileName = "";
  export let replayFrameInfo = "";
  export let sessionStartedAt: number = Date.now();
+  export let summaryReleasePending = false;
+  export let spatialForcePanelVisible = false;

  let stagePlaneEl: HTMLDivElement | undefined;
  let panelZoneEl: HTMLDivElement | undefined;
@@ -87,7 +89,9 @@
  $: replaySide = summarySide === "left" ? "right" : "left";
  $: replayToggleButtonText = replayIsPlaying ? replayPauseLabel : replayPlayLabel;
  $: replayProgressPercent = Math.round(Math.min(1, Math.max(0, replayProgress)) * 100);
-  $: summaryCurveVisible = summary.points.length > 0 && summary.points.some((value) => Number.isFinite(value) && Math.abs(value) >= 0.0001);
+  $: summaryCurveVisible =
+    summary.points.length > 0 &&
+    (summaryReleasePending || summary.points.some((value) => Number.isFinite(value) && Math.abs(value) >= 0.0001));
  $: isModelStage = stageViewMode === "model3d";

  function toPxNumber(rawValue: string): number {
@@ -276,9 +280,7 @@
                  <SignalChart {panel} panelIndex={index} {locale} />
                </div>
              {/each}
-
-
-              {#if spatialForce}
+              {#if spatialForcePanelVisible}
                <div
                  class="panel-motion-shell"
                  in:fly={{ x: 180, duration: 340, opacity: 0.08, easing: cubicOut }}
@@ -311,7 +313,7 @@
                    {sessionStartedAt}
                    isRealtime={!replayHasData}
                    side="right"
-                    panelIndex={rightPanels.length}
+                    panelIndex={rightPanels.length + (spatialForcePanelVisible ? 1 : 0)}
                  />
                </div>
              {/if}
--- a/src/lib/components/PressureMatrixViewer.svelte
+++ b/src/lib/components/PressureMatrixViewer.svelte
@@ -67,6 +67,7 @@
  const CAMERA_TARGET_Z = MATRIX_OFFSET_Z - 0.4;
  const MATRIX_ROTATION_Y = 0;
  const rangeStopPositions = [0, 0.25, 0.5, 0.75, 0.875, 1] as const;
+  const maxDisplayForce = 25.6;

  const labelVector = new THREE.Vector3();
  $: resolvedColorPalette = pressureColorPalettes[colorMapPreset] ?? pressureColorPalettes.emerald;
@@ -145,6 +146,10 @@
      return "--";
    }

+    if (value >= maxDisplayForce) {
+      return `${maxDisplayForce.toFixed(1)}+`;
+    }
+
    return value.toFixed(1);
  }

--- a/src/lib/components/SignalChart.svelte
+++ b/src/lib/components/SignalChart.svelte
@@ -11,6 +11,7 @@

  const viewportWidth = 100;
  const viewportHeight = 36;
+  const maxDisplayForce = 25.6;

  const toneColorMap: Record<SignalTone, string> = {
    cyan: "62 232 255",
@@ -32,7 +33,15 @@
  }

  function formatMetric(value: number | null): string {
-    return value === null ? "--" : value.toFixed(1);
+    if (value === null) {
+      return "--";
+    }
+
+    if (value >= maxDisplayForce) {
+      return `${maxDisplayForce.toFixed(1)}+`;
+    }
+
+    return value.toFixed(1);
  }

  function resolveBounds(seriesCollection: HudSignalPanel["series"]): { min: number; max: number } {
--- a/src/lib/components/SpatialForcePanel.svelte
+++ b/src/lib/components/SpatialForcePanel.svelte
@@ -94,37 +94,38 @@
  $: hasData =
    spatialForce !== null &&
    Number.isFinite(spatialForce.angleDeg) &&
-    (!requireMagnitude || Number.isFinite(spatialForce.magnitude));
+    (!requireMagnitude || (Number.isFinite(spatialForce.magnitude) && Math.abs(spatialForce.magnitude) >= 0.0001));
  $: angleDeg = hasData ? normalizeAngle(spatialForce?.angleDeg ?? 0) : 0;
  $: updateVisualAngle(angleDeg, hasData);
 </script>

-{#if hasData}
-  <article
-    class="signal-panel spatial-panel side-{side}"
-    aria-label={resolvedTitle}
-    style="--panel-index: {panelIndex};"
-  >
-    <header class="panel-head">
-      <div class="head-text">
-        <p class="panel-code">{panelCode}</p>
-        <p class="panel-title">{resolvedTitle}</p>
+<article
+  class="signal-panel spatial-panel side-{side}"
+  class:is-empty={!hasData}
+  aria-label={resolvedTitle}
+  style="--panel-index: {panelIndex};"
+>
+  <header class="panel-head">
+    <div class="head-text">
+      <p class="panel-code">{panelCode}</p>
+      <p class="panel-title">{resolvedTitle}</p>
+    </div>
+
+    {#if resolvedBadgeLabel}
+      <div class="icon-layer" aria-hidden="true">
+        <span class={`icon-chip tone-${badgeTone}`}>{resolvedBadgeLabel}</span>
      </div>
+    {/if}
+  </header>

-      {#if resolvedBadgeLabel}
-        <div class="icon-layer" aria-hidden="true">
-          <span class={`icon-chip tone-${badgeTone}`}>{resolvedBadgeLabel}</span>
-        </div>
-      {/if}
-    </header>
-
-    <div class="panel-body">
-      <div class="compass-stage">
-        <div class="compass-core">
-          <div class="compass-ring compass-ring-outer"></div>
-          <div class="compass-ring compass-ring-inner"></div>
-          <div class="compass-axis axis-horizontal"></div>
-          <div class="compass-axis axis-vertical"></div>
+  <div class="panel-body">
+    <div class="compass-stage">
+      <div class="compass-core">
+        <div class="compass-ring compass-ring-outer"></div>
+        <div class="compass-ring compass-ring-inner"></div>
+        <div class="compass-axis axis-horizontal"></div>
+        <div class="compass-axis axis-vertical"></div>
+        {#if hasData}
          <div
            class="compass-vector"
            class:is-snap={snapVector}
@@ -133,16 +134,17 @@
            <span class="vector-shaft"></span>
            <span class="vector-head"></span>
          </div>
-          <div class="compass-center"></div>
-          <span class="compass-label label-top">90</span>
-          <span class="compass-label label-right">0</span>
-          <span class="compass-label label-bottom">270</span>
-          <span class="compass-label label-left">180</span>
-        </div>
+        {/if}
+        <div class="compass-center"></div>
+        <span class="compass-label label-top">90</span>
+        <span class="compass-label label-right">0</span>
+        <span class="compass-label label-bottom">270</span>
+        <span class="compass-label label-left">180</span>
      </div>
    </div>
-  </article>
-{/if}
+
+  </div>
+</article>
 <style>
  .signal-panel {
    --offset-x: 12%;
@@ -261,14 +263,16 @@
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.72rem;
-    block-size: clamp(12rem, 15.5vw, 15rem);
+    block-size: clamp(14rem, 17vw, 16.5rem);
    min-block-size: 5rem;
  }

  .compass-stage {
    position: relative;
    min-block-size: 0;
+    box-sizing: border-box;
    overflow: hidden;
+    padding: 1.35rem 1.7rem;
    border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.32);
    border-radius: 0.62rem;
    background:
@@ -280,7 +284,8 @@

  .compass-core {
    position: relative;
-    inline-size: min(72%, 13rem);
+    inline-size: min(72%, 12.2rem, calc(100% - 3.4rem));
+    min-inline-size: 6.2rem;
    aspect-ratio: 1;
  }

@@ -379,26 +384,26 @@
  }

  .label-top {
-    top: -0.9rem;
+    top: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .label-right {
    top: 50%;
-    right: -1rem;
+    right: 0.42rem;
    transform: translateY(-50%);
  }

  .label-bottom {
-    bottom: -0.9rem;
+    bottom: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .label-left {
    top: 50%;
-    left: -1.35rem;
+    left: 0.42rem;
    transform: translateY(-50%);
  }

@@ -421,7 +426,11 @@
    }

    .panel-body {
-      block-size: clamp(10rem, 13vw, 12rem);
+      block-size: clamp(12rem, 14.5vw, 14rem);
+    }
+
+    .compass-core {
+      inline-size: min(64%, 10.4rem, calc(100% - 3.4rem));
    }
  }

@@ -432,7 +441,15 @@
    }

    .panel-body {
-      block-size: clamp(9.8rem, 12vw, 11.8rem);
+      block-size: clamp(11.2rem, 13.5vw, 13.2rem);
+    }
+
+    .compass-stage {
+      padding-block: 1.2rem;
+    }
+
+    .compass-core {
+      inline-size: min(62%, 10rem, calc(100% - 3.4rem));
    }
  }

@@ -444,7 +461,16 @@
    }

    .panel-body {
-      block-size: clamp(8rem, 9.5vw, 9.8rem);
+      block-size: clamp(9.4rem, 11vw, 10.8rem);
+    }
+
+    .compass-stage {
+      padding: 1rem 1.45rem;
+    }
+
+    .compass-core {
+      inline-size: min(58%, 8.2rem, calc(100% - 2.9rem));
+      min-inline-size: 5.6rem;
    }
  }

@@ -456,7 +482,16 @@
    }

    .panel-body {
-      block-size: clamp(6.5rem, 8vw, 7.5rem);
+      block-size: clamp(7.6rem, 9vw, 8.8rem);
+    }
+
+    .compass-stage {
+      padding: 0.82rem 1.25rem;
+    }
+
+    .compass-core {
+      inline-size: min(54%, 6.4rem, calc(100% - 2.5rem));
+      min-inline-size: 4.8rem;
    }
  }

--- a/src/lib/components/SummaryCurve.svelte
+++ b/src/lib/components/SummaryCurve.svelte
@@ -11,15 +11,26 @@
  export let sessionStartedAt: number = Date.now();
  export let isRealtime = false;

+  let canvasEl: HTMLCanvasElement | undefined;
  let currentTimeSeconds = 0;
  let timerId: ReturnType<typeof setInterval> | null = null;
+  let resizeObserver: ResizeObserver | null = null;

  onMount(() => {
    timerId = setInterval(() => {
      currentTimeSeconds = Math.round((Date.now() - sessionStartedAt) / 100) / 10;
    }, 200);
+
+    if (canvasEl) {
+      resizeObserver = new ResizeObserver(() => {
+        drawCanvas(canvasEl, plotPoints, yAxisTicks, xAxisTicks, sampleCount);
+      });
+      resizeObserver.observe(canvasEl);
+    }
+
    return () => {
      if (timerId != null) clearInterval(timerId);
+      resizeObserver?.disconnect();
    };
  });

@@ -33,7 +44,8 @@
  const plotInsetRight = 4;
  const plotInsetTop = 4;
  const plotInsetBottom = 9;
-  const fixedYBounds = { min: 0, max: 25 };
+  const maxDisplayForce = 25.6;
+  const fixedYBounds = { min: 0, max: maxDisplayForce };

  interface CurveSample {
    x: number;
@@ -61,6 +73,10 @@
      return "--";
    }

+    if (value >= maxDisplayForce) {
+      return `${maxDisplayForce.toFixed(1)}+`;
+    }
+
    return value.toFixed(1);
  }

@@ -225,24 +241,117 @@
    }));
  }

-  function createLinePath(points: PlotPoint[]): string {
-    if (points.length === 0) {
-      return "";
+  function drawCanvas(
+    canvas: HTMLCanvasElement | undefined,
+    points: PlotPoint[],
+    yTicks: AxisTick[],
+    xTicks: AxisTick[],
+    count: number
+  ): void {
+    if (!canvas) {
+      return;
    }

-    return points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
-  }
-
-  function createAreaPath(points: PlotPoint[]): string {
-    if (points.length < 2) {
-      return "";
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return;
    }

-    const linePath = createLinePath(points);
-    const firstPoint = points[0];
-    const lastPoint = points[points.length - 1];
+    const cssWidth = Math.max(1, canvas.clientWidth);
+    const cssHeight = Math.max(1, canvas.clientHeight);
+    const dpr = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+    const targetWidth = Math.round(cssWidth * dpr);
+    const targetHeight = Math.round(cssHeight * dpr);

-    return `${linePath} L ${lastPoint.x} ${viewportHeight - plotInsetBottom} L ${firstPoint.x} ${viewportHeight - plotInsetBottom} Z`;
+    if (canvas.width !== targetWidth || canvas.height !== targetHeight) {
+      canvas.width = targetWidth;
+      canvas.height = targetHeight;
+    }
+
+    context.setTransform(targetWidth / viewportWidth, 0, 0, targetHeight / viewportHeight, 0, 0);
+    context.clearRect(0, 0, viewportWidth, viewportHeight);
+
+    context.save();
+    context.lineWidth = 0.45;
+    context.strokeStyle = "rgb(120 180 150 / 0.16)";
+    for (const tick of yTicks) {
+      context.beginPath();
+      context.moveTo(plotInsetLeft, tick.plotY);
+      context.lineTo(viewportWidth - plotInsetRight, tick.plotY);
+      context.stroke();
+    }
+    context.restore();
+
+    if (points.length >= 2) {
+      const baselineY = viewportHeight - plotInsetBottom;
+      const fill = context.createLinearGradient(0, plotInsetTop, 0, baselineY);
+      fill.addColorStop(0, "rgb(62 232 255 / 0.28)");
+      fill.addColorStop(1, "rgb(62 232 255 / 0.02)");
+
+      context.save();
+      context.beginPath();
+      context.moveTo(points[0].x, points[0].y);
+      for (let index = 1; index < points.length; index += 1) {
+        context.lineTo(points[index].x, points[index].y);
+      }
+      context.lineTo(points[points.length - 1].x, baselineY);
+      context.lineTo(points[0].x, baselineY);
+      context.closePath();
+      context.fillStyle = fill;
+      context.fill();
+      context.restore();
+    }
+
+    if (points.length > 0) {
+      context.save();
+      context.beginPath();
+      context.moveTo(points[0].x, points[0].y);
+      for (let index = 1; index < points.length; index += 1) {
+        context.lineTo(points[index].x, points[index].y);
+      }
+      context.lineWidth = 1.35;
+      context.lineCap = "round";
+      context.lineJoin = "round";
+      context.strokeStyle = "rgb(130 232 255 / 0.96)";
+      context.shadowColor = "rgb(62 232 255 / 0.22)";
+      context.shadowBlur = 4;
+      context.stroke();
+      context.restore();
+
+      const lastPoint = points[points.length - 1];
+      context.save();
+      context.beginPath();
+      context.arc(lastPoint.x, lastPoint.y, 1.7, 0, Math.PI * 2);
+      context.fillStyle = "rgb(73 222 128 / 0.98)";
+      context.shadowColor = "rgb(73 222 128 / 0.3)";
+      context.shadowBlur = 6;
+      context.fill();
+      context.restore();
+    }
+
+    context.save();
+    context.font = "600 3.2px sans-serif";
+    context.textBaseline = "middle";
+    context.shadowColor = "rgb(0 0 0 / 0.3)";
+    context.shadowBlur = 4;
+    context.fillStyle = "rgb(145 185 165 / 0.84)";
+    for (const tick of yTicks) {
+      context.textAlign = "right";
+      context.fillText(tick.label, tick.plotX, tick.plotY + 0.5);
+    }
+
+    context.fillStyle = "rgb(180 220 200 / 0.9)";
+    context.textBaseline = "alphabetic";
+    for (let index = 0; index < xTicks.length; index += 1) {
+      const tick = xTicks[index];
+      context.textAlign = index === 0 ? "left" : index === xTicks.length - 1 ? "right" : "center";
+      context.fillText(tick.label, tick.plotX, tick.plotY);
+    }
+    context.restore();
+
+    if (count === 0) {
+      context.clearRect(0, 0, viewportWidth, viewportHeight);
+    }
  }

  $: sourceYValues = yValues && yValues.length ? yValues : summary.points;
@@ -261,11 +370,9 @@
  $: xDataBounds = resolveDataBounds(samples.map((sample) => sample.x));
  $: yDataBounds = resolveDataBounds(samples.map((sample) => sample.y));
  $: plotPoints = convertPoints(samples, xScaleBounds, yScaleBounds);
-  $: linePath = createLinePath(plotPoints);
-  $: areaPath = createAreaPath(plotPoints);
-  $: lastPoint = plotPoints.length > 0 ? plotPoints[plotPoints.length - 1] : null;
  $: yAxisTicks = sampleCount > 0 ? buildYAxisTicks(yScaleBounds, yDataBounds) : [];
  $: xAxisTicks = sampleCount > 0 ? buildXAxisTicks(xScaleBounds) : [];
+  $: drawCanvas(canvasEl, plotPoints, yAxisTicks, xAxisTicks, sampleCount);
  $: latestValue = formatValue(summary.latest);
  $: minValue = formatValue(summary.min);
  $: maxValue = formatValue(summary.max);
@@ -291,51 +398,7 @@
  </header>

  <div class="chart-stage">
-    <svg viewBox="0 0 {viewportWidth} {viewportHeight}" preserveAspectRatio="none" role="img" aria-label={summary.label}>
-      <defs>
-        <linearGradient id="summary-fill" x1="0%" y1="0%" x2="0%" y2="100%">
-          <stop offset="0%" stop-color="rgb(62 232 255 / 0.28)" />
-          <stop offset="100%" stop-color="rgb(62 232 255 / 0.02)" />
-        </linearGradient>
-      </defs>
-
-      <g class="grid-lines" aria-hidden="true">
-        {#each yAxisTicks as tick (`grid-${tick.value}`)}
-          <line x1={plotInsetLeft} y1={tick.plotY} x2={viewportWidth - plotInsetRight} y2={tick.plotY}></line>
-        {/each}
-      </g>
-
-      {#if areaPath}
-        <path d={areaPath} class="summary-area"></path>
-      {/if}
-
-      {#if linePath}
-        <path d={linePath} class="summary-line"></path>
-      {/if}
-
-      {#if lastPoint}
-        <circle cx={lastPoint.x} cy={lastPoint.y} r="1.7" class="summary-dot"></circle>
-      {/if}
-
-      <g class="axis-labels" aria-hidden="true">
-        {#each yAxisTicks as tick, index (`y-${index}`)}
-          <text class="axis-label y-axis-label" x={tick.plotX} y={tick.plotY + 1.1} text-anchor="end">
-            {tick.label}
-          </text>
-        {/each}
-
-        {#each xAxisTicks as tick, index (`x-${index}`)}
-          <text
-            class="axis-label x-axis-label"
-            x={tick.plotX}
-            y={tick.plotY}
-            text-anchor={index === 0 ? "start" : index === xAxisTicks.length - 1 ? "end" : "middle"}
-          >
-            {tick.label}
-          </text>
-        {/each}
-      </g>
-    </svg>
+    <canvas bind:this={canvasEl} aria-label={summary.label}></canvas>

    {#if sampleCount === 0}
      <div class="empty-state">
@@ -369,7 +432,10 @@
    --enter-ms: 1800ms;
    --fade-ms: 1000ms;
    overflow: hidden;
-    inline-size: min(100%, clamp(34rem, 44vw, 44rem));
+    inline-size: var(--rail-width, min(100%, clamp(34rem, 44vw, 44rem)));
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    flex: 0 0 var(--rail-width, auto);
    justify-self: start;
    display: grid;
    grid-template-rows: auto 1fr auto;
@@ -480,53 +546,12 @@
      radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.09), transparent 45%);
  }

-  svg {
+  canvas {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

-  .grid-lines line {
-    stroke: rgb(var(--hud-border-strong-rgb) / 0.16);
-    stroke-width: 0.45;
-  }
-
-  .summary-area {
-    fill: url(#summary-fill);
-  }
-
-  .summary-line {
-    fill: none;
-    stroke: rgb(var(--hud-cyan-rgb) / 0.96);
-    stroke-width: 1.35;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    filter: drop-shadow(0 0 4px rgb(var(--hud-cyan-rgb) / 0.22));
-  }
-
-  .summary-dot {
-    fill: rgb(var(--hud-lime-rgb) / 0.98);
-    filter: drop-shadow(0 0 6px rgb(var(--hud-lime-rgb) / 0.3));
-  }
-
-  .axis-label {
-    fill: rgb(var(--hud-text-main-rgb) / 0.88);
-    font-size: 3.2px;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    text-shadow:
-      0 1px 0 rgb(0 0 0 / 0.46),
-      0 0 4px rgb(0 0 0 / 0.3);
-  }
-
-  .y-axis-label {
-    fill: rgb(var(--hud-text-dim-rgb) / 0.84);
-  }
-
-  .x-axis-label {
-    fill: rgb(var(--hud-text-dim-rgb) / 0.9);
-  }
-
  .empty-state {
    position: absolute;
    inset: 0;
@@ -591,7 +616,7 @@

  @media (max-width: 1180px) {
    .signal-panel {
-      inline-size: min(100%, clamp(28rem, 40vw, 38rem));
+      inline-size: var(--rail-width, min(100%, clamp(28rem, 40vw, 38rem)));
    }

    .chart-stage {
@@ -601,7 +626,7 @@

  @media (max-height: 900px) {
    .signal-panel {
-      inline-size: min(100%, clamp(28rem, 38vw, 36rem));
+      inline-size: var(--rail-width, min(100%, clamp(28rem, 38vw, 36rem)));
      padding: 0.7rem 0.76rem 0.8rem;
    }

@@ -612,7 +637,7 @@

  @media (max-height: 760px) {
    .signal-panel {
-      inline-size: min(100%, clamp(24rem, 34vw, 30rem));
+      inline-size: var(--rail-width, min(100%, clamp(24rem, 34vw, 30rem)));
      padding: 0.62rem 0.68rem 0.72rem;
      gap: 0.48rem;
    }
@@ -624,7 +649,7 @@

  @media (max-height: 680px) {
    .signal-panel {
-      inline-size: min(100%, clamp(20rem, 28vw, 26rem));
+      inline-size: var(--rail-width, min(100%, clamp(20rem, 28vw, 26rem)));
      padding: 0.52rem 0.58rem 0.6rem;
      gap: 0.36rem;
    }
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -194,6 +194,9 @@
  const pointsPerSeries = 28;
  const summaryPointsPerSeries = 42;
  const signalRenderTickMs = 1200;
+  const summaryReleaseForceEpsilon = 2.0;
+  const releaseClearDelayMs = 5000;
+  const spatialForceMagnitudeEpsilon = 0.0001;
  const replayDefaultFrameMs = 40;
  const showSignalPanels = false;
  const mockToneCycle: SignalTone[] = ["cyan", "lime", "orange", "violet", "gold", "rose"];
@@ -288,6 +291,11 @@
  } | null = null;
  let devkitStatusTimer: number | null = null;
  let devkitSpatialForceClearTimer: number | null = null;
+  let summaryClearTimer: number | null = null;
+  let spatialForceClearTimer: number | null = null;
+  let summaryReleaseHidden = false;
+  let spatialForceReleaseHidden = false;
+  let spatialForcePanelVisible = false;
  let sessionStartedAt: number = Date.now();

  $: uiCopy = copyByLocale[locale];
@@ -298,6 +306,7 @@
  $: rangeScaleStyle = buildRangeScaleStyle(colorMapPreset);
  $: replayHasData = replayFrames.length > 0;
  $: replayFrameInfo = replayHasData ? `${replayHasDisplayedFrame ? replayCurrentIndex + 1 : 0}/${replayFrames.length}` : "";
+  $: summaryReleasePending = summaryClearTimer != null;
  $: fileExplorerTitle =
    fileExplorerMode === "open" ? uiCopy.fileExplorerImportTitle : uiCopy.fileExplorerExportTitle;
  $: fileExplorerConfirmLabel =
@@ -313,7 +322,11 @@
      window.clearTimeout(devkitSpatialForceClearTimer);
      devkitSpatialForceClearTimer = null;
    }
-    hasSignalData = signalPanels.length > 0 || summary.points.length > 0 || spatialForce !== null;
+    hasSignalData =
+      signalPanels.length > 0 ||
+      summary.points.length > 0 ||
+      spatialForce !== null ||
+      spatialForcePanelVisible;
  }

  function scheduleDevkitSpatialForceClear(): void {
@@ -332,6 +345,54 @@
    }, 420);
  }

+  function cancelSummaryClear(): void {
+    if (summaryClearTimer != null && typeof window !== "undefined") {
+      window.clearTimeout(summaryClearTimer);
+    }
+    summaryClearTimer = null;
+  }
+
+  function scheduleSummaryClear(): void {
+    if (typeof window === "undefined" || summary.points.length === 0) {
+      return;
+    }
+
+    if (summaryClearTimer != null) {
+      return;
+    }
+
+    summaryClearTimer = window.setTimeout(() => {
+      summary = buildEmptySummary();
+      summaryClearTimer = null;
+      summaryReleaseHidden = true;
+      hasSignalData = signalPanels.length > 0 || spatialForce !== null || spatialForcePanelVisible;
+    }, releaseClearDelayMs);
+  }
+
+  function cancelSpatialForceClear(): void {
+    if (spatialForceClearTimer != null && typeof window !== "undefined") {
+      window.clearTimeout(spatialForceClearTimer);
+    }
+    spatialForceClearTimer = null;
+  }
+
+  function scheduleSpatialForceClear(): void {
+    if (typeof window === "undefined" || !spatialForcePanelVisible) {
+      return;
+    }
+
+    if (spatialForceClearTimer != null) {
+      return;
+    }
+
+    spatialForceClearTimer = window.setTimeout(() => {
+      spatialForceClearTimer = null;
+      spatialForceReleaseHidden = true;
+      spatialForcePanelVisible = false;
+      hasSignalData = signalPanels.length > 0 || summary.points.length > 0 || spatialForce !== null;
+    }, releaseClearDelayMs);
+  }
+
  function clamp(value: number, min: number, max: number): number {
    return Math.min(max, Math.max(min, value));
  }
@@ -792,6 +853,10 @@
  }

  function resetReplayVisualState(): void {
+    cancelSummaryClear();
+    cancelSpatialForceClear();
+    spatialForceReleaseHidden = false;
+    spatialForcePanelVisible = false;
    pressureMatrix = buildZeroMatrix();
    spatialForce = null;
    replayPendingDevkitSeq = null;
@@ -831,8 +896,12 @@
    replayHasDisplayedFrame = true;
    replayProgress = replayFrames.length > 1 ? safeIndex / (replayFrames.length - 1) : 1;
    const frame = replayFrames[safeIndex];
+    cancelSummaryClear();
+    cancelSpatialForceClear();
+    spatialForceReleaseHidden = false;
    pressureMatrix = frameValuesToMatrix(frame.values);
    spatialForce = frame.spatialForce ?? null;
+    spatialForcePanelVisible = spatialForce !== null;
    pushReplayFrameToDevkit(frame, safeIndex);
    signalPanels = buildInactivePanels();
    summary = buildReplaySummaryAt(safeIndex);
@@ -1002,13 +1071,99 @@
  }

  function isZeroLikeValue(value: number): boolean {
-    return !Number.isFinite(value) || Math.abs(value) < 0.0001;
+    return !Number.isFinite(value) || Math.abs(value) <= summaryReleaseForceEpsilon;
  }

  function shouldHideSummary(points: number[]): boolean {
    return points.length === 0 || points.every((value) => isZeroLikeValue(value));
  }

+  function latestSummaryValue(summaryValue: HudSummary): number | null {
+    if (Number.isFinite(summaryValue.latest)) {
+      return summaryValue.latest;
+    }
+
+    const latestPoint = summaryValue.points[summaryValue.points.length - 1];
+    return Number.isFinite(latestPoint) ? latestPoint : null;
+  }
+
+  function hasActiveSummary(summaryValue: HudSummary): boolean {
+    const latest = latestSummaryValue(summaryValue);
+    return latest !== null && !isZeroLikeValue(latest);
+  }
+
+  function hasActiveSpatialForce(spatialForceValue: HudSpatialForce | null): boolean {
+    return (
+      spatialForceValue !== null &&
+      Number.isFinite(spatialForceValue.angleDeg) &&
+      Number.isFinite(spatialForceValue.magnitude) &&
+      Math.abs(spatialForceValue.magnitude) > spatialForceMagnitudeEpsilon
+    );
+  }
+
+  function buildPacketSummary(summaryValue: HudSummary): HudSummary {
+    const nowSeconds = Math.round((Date.now() - sessionStartedAt) / 100) / 10;
+    const pointCount = summaryValue.points.length;
+    const spacing =
+      pointCount > 1 ? Math.min(1.2, nowSeconds / Math.max(pointCount - 1, 1)) : 0;
+    const startX = Math.max(0, nowSeconds - spacing * Math.max(pointCount - 1, 0));
+    const xValues = summaryValue.points.map((_, index) => Math.round((startX + index * spacing) * 10) / 10);
+    return { ...summaryValue, xValues };
+  }
+
+  function estimateSummarySpacing(xValues: number[]): number {
+    const diffs = xValues
+      .slice(1)
+      .map((value, index) => value - xValues[index])
+      .filter((value) => Number.isFinite(value) && value > 0);
+
+    if (diffs.length === 0) {
+      return 1.2;
+    }
+
+    const average = diffs.reduce((sum, value) => sum + value, 0) / diffs.length;
+    return Math.max(0.1, Math.min(1.2, Math.round(average * 10) / 10));
+  }
+
+  function buildContinuousSummary(summaryValue: HudSummary): HudSummary {
+    if (
+      summary.points.length === 0 ||
+      !summary.xValues ||
+      summary.xValues.length !== summary.points.length
+    ) {
+      return buildPacketSummary(summaryValue);
+    }
+
+    const pointCount = summaryValue.points.length;
+    const previousXValues = summary.xValues;
+    const previousCount = previousXValues.length;
+
+    if (pointCount === 0) {
+      return buildEmptySummary();
+    }
+
+    if (pointCount < previousCount) {
+      return buildPacketSummary(summaryValue);
+    }
+
+    const spacing = estimateSummarySpacing(previousXValues);
+    let xValues: number[];
+
+    if (pointCount > previousCount) {
+      xValues = previousXValues.slice();
+      while (xValues.length < pointCount) {
+        const previousX = xValues[xValues.length - 1] ?? 0;
+        xValues.push(Math.round((previousX + spacing) * 10) / 10);
+      }
+    } else {
+      xValues = previousXValues.slice(1);
+      const previousX = previousXValues[previousXValues.length - 1] ?? 0;
+      xValues.push(Math.round((previousX + spacing) * 10) / 10);
+    }
+
+    return { ...summaryValue, xValues };
+  }
+
  function normalizeSummary(summaryValue: HudSummary): HudSummary {
    return shouldHideSummary(summaryValue.points) ? buildEmptySummary() : summaryValue;
  }
@@ -1076,26 +1231,48 @@
      return;
    }
    signalPanels = showSignalPanels ? packet.panels : buildInactivePanels();
+    const packetHasActiveSummary = hasActiveSummary(packet.summary);
    if (packet.summary.points.length > 0) {
-      const nowSeconds = Math.round((Date.now() - sessionStartedAt) / 100) / 10;
-      const pointCount = packet.summary.points.length;
-      const spacing =
-        pointCount > 1 ? Math.min(1.2, nowSeconds / Math.max(pointCount - 1, 1)) : 0;
-      const startX = Math.max(0, nowSeconds - spacing * Math.max(pointCount - 1, 0));
-      const xValues = packet.summary.points.map((_, index) => Math.round((startX + index * spacing) * 10) / 10);
-      summary = { ...packet.summary, xValues };
-    } else {
-      summary = packet.summary;
+      if (packetHasActiveSummary) {
+        summaryReleaseHidden = false;
+        summary = buildContinuousSummary(packet.summary);
+        cancelSummaryClear();
+      } else if (summaryReleaseHidden) {
+        summary = buildEmptySummary();
+      } else {
+        summary = buildContinuousSummary(packet.summary);
+        scheduleSummaryClear();
+      }
+    } else if (!summaryReleaseHidden) {
+      scheduleSummaryClear();
    }
    pressureMatrix = packet.pressureMatrix;
-    spatialForce = packet.spatialForce ?? null;
+    const nextSpatialForce = packet.spatialForce ?? null;
+    if (packetHasActiveSummary && hasActiveSpatialForce(nextSpatialForce)) {
+      spatialForceReleaseHidden = false;
+      spatialForcePanelVisible = true;
+      spatialForce = nextSpatialForce;
+      cancelSpatialForceClear();
+    } else {
+      spatialForce = null;
+      if (spatialForceReleaseHidden || !spatialForcePanelVisible) {
+        spatialForcePanelVisible = false;
+      }
+      scheduleSpatialForceClear();
+    }
    hasSignalData =
      signalPanels.length > 0 ||
-      packet.summary.points.length > 0 ||
-      spatialForce !== null;
+      summary.points.length > 0 ||
+      spatialForce !== null ||
+      spatialForcePanelVisible;
  }

  function clearHudPanels(): void {
+    cancelSummaryClear();
+    cancelSpatialForceClear();
+    summaryReleaseHidden = false;
+    spatialForceReleaseHidden = false;
+    spatialForcePanelVisible = false;
    hasSignalData = false;
    signalPanels = buildInactivePanels();
    summary = buildEmptySummary();
@@ -1815,6 +1992,8 @@
    return () => {
      disposed = true;
      pauseReplayPlayback();
+      cancelSummaryClear();
+      cancelSpatialForceClear();
      clearDevkitSpatialForce();
      stopMockFeed?.();
      unlistenHudStream?.();
@@ -1919,6 +2098,8 @@
      {replayFileName}
      {replayFrameInfo}
      {sessionStartedAt}
+      {summaryReleasePending}
+      {spatialForcePanelVisible}
      resetConfigLabel={uiCopy.resetConfigLabel}
      applyLiveHint={uiCopy.applyLiveHint}
      leftPanels={leftSignalPanels}