fix(studio-app): compact loss chart points instead of tail-slicing (#215)

docs/ja/studio/jobs.mdx

@@ -67,6 +67,8 @@ Loss チャートは `training.log` イベントから描画される SVG プロ
 
 ホバーすると最寄りステップと、そのステップに含まれる `loss` / `evalLoss` のうち存在する値が表示されます（eval-only ステップでは `loss` 値は出ず、その逆も同様）。チャートは `loss` または `evalLoss` のいずれかが数値であるイベントが 1 件以上届くまで `Waiting for training.log events…`（`training.log` イベント待ち）プレースホルダーを表示します。両方とも null / 省略の `training.log` フレームはカウントされません。
 
+チャートはジョブごとに最大 2,000 点を保持します。この上限を超えると、古い点は単純に破棄されるのではなく圧縮され、実行全体（開始部分を含む）の形が、長い実行ではより粗い解像度にはなるものの、最初期のデータをチャートが黙って失うことなく見え続けます。最初と最後の点、数値の `evalLoss` を持つすべての点、そして局所的な loss のスパイクは、圧縮後も生き残るよう優先されます。
+
 ### 上級モード（Advanced metrics）
 
 チャートヘッダーの **Advanced** トグルを ON にすると、系列ごとの統計パネルが現れます。各カードに表示される項目:
@@ -77,6 +79,8 @@ Loss チャートは `training.log` イベントから描画される SVG プロ
 
 Eval カードは数値 `evalLoss` を含む `training.log` イベントが届くまでは空のままです。
 
+平均、標準偏差、分散、信頼区間は、チャートに現在表示されている点だけでなく、実行がこれまでに送出したすべての値から計算されるため、実行がどれだけ長くなっても、チャートがどれだけ圧縮されても、実行全体について正確な値であり続けます。p90 と p95 は、実行全体を長期にわたってすべての値を保持し続けるのは現実的でないため、系列ごとに最大 2,000 件の代表サンプルから推定されます。このサンプルは、チャート自体が表示する点とは独立しています。
+
 ## このページがしないこと
 
 - **キャンセルボタンなし。** 動作中ジョブを止めるには、トレーナーを実行している自前コードから [`trainer.cancel()`](/ja/sdk/trainer-control#cancel) を呼んでください。現状 Studio は UI でこの機能を公開していません。

docs/studio/jobs.mdx

@@ -67,6 +67,8 @@ The loss chart is an SVG plot drawn from `training.log` events. It uses min-max
 
 Hovering shows the nearest step and whichever of `loss` / `evalLoss` are present at that step (eval-only steps don't show a `loss` value, and vice-versa). The chart shows the `Waiting for training.log events…` placeholder until at least one event with a numeric `loss` or `evalLoss` arrives; `training.log` frames where both fields are null/omitted don't count.
 
+The chart keeps at most 2,000 points per job. Once a run exceeds that, older points are compacted rather than dropped, so the shape of the whole run, including its start, stays visible at coarser resolution instead of the chart silently losing its earliest data. The first and last points, every point carrying a numeric `evalLoss`, and local loss spikes are prioritized to survive compaction.
+
 ### Advanced metrics
 
 The **Advanced** toggle in the chart's header reveals a per-series statistics panel. Each card reports:
@@ -77,6 +79,8 @@ The **Advanced** toggle in the chart's header reveals a per-series statistics pa
 
 The eval card stays empty until a `training.log` event with a numeric `evalLoss` arrives.
 
+Mean, standard deviation, variance, and the confidence interval are computed from every value the run has emitted, not just what the chart is currently displaying, so they stay accurate for the whole run regardless of how long it gets or how much the chart has compacted. p90 and p95 are estimated from a bounded representative sample (up to 2,000 values per series) of the full run rather than every value exactly, since retaining every value indefinitely isn't practical for a long-running job; this sample is independent of the points the chart itself displays.
+
 ## Things this page does not do
 
 - **No cancel button.** To stop a running job, call [`trainer.cancel()`](/sdk/trainer-control#cancel) from your own code that drives the trainer. Studio does not expose this in the UI today.

packages/studio-app/src/App.tsx

@@ -34,7 +34,7 @@ export function App() {
     <AppShell creds={creds} error={error} route={route}>
       {route.kind === "home" && <Overview />}
       {route.kind === "jobs" && <JobsList />}
-      {route.kind === "job" && <JobDetail jobId={route.id} />}
+      {route.kind === "job" && <JobDetail key={route.id} jobId={route.id} />}
       {route.kind === "playground" && (
         <Playground initialAdapterId={route.adapterJobId} />
       )}

packages/studio-app/src/components/jobs/LossChart.tsx

@@ -1,6 +1,11 @@
 import { useEffect, useMemo, useRef, useState, type MouseEvent } from "react";
 
-import { summarize, type LossStats } from "../../lib/stats";
+import {
+  summarize,
+  finalizeRunningStats,
+  type LossStats,
+  type RunningStats,
+} from "../../lib/stats";
 
 export interface LossPoint {
   step: number;
@@ -27,9 +32,22 @@ const EVAL_STROKE = "rgb(244 114 182)"; // pink-400
 export function LossChart({
   points,
   advanced = false,
+  trainRunning,
+  evalRunning,
 }: {
   points: LossPoint[];
   advanced?: boolean;
+  /**
+   * Optional full-run stats accumulators (see stats.ts), computed
+   * incrementally by the caller independent of any compaction applied
+   * to `points`. When provided, these are used instead of deriving
+   * stats from `points` directly, so the Advanced panel stays
+   * accurate for the whole run even once `points` has been compacted.
+   * Falls back to summarizing `points` when omitted (e.g. for callers
+   * without a persistent per-run accumulator).
+   */
+  trainRunning?: RunningStats | null;
+  evalRunning?: RunningStats | null;
 }) {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [width, setWidth] = useState(640);
@@ -126,20 +144,24 @@ export function LossChart({
   // baked into `summarize()` (for percentiles) doesn't run during a
   // live training stream when the panel isn't visible. Toggling
   // `advanced` on triggers a fresh useMemo evaluation.
-  const trainStats = useMemo(
-    () =>
-      advanced && trainSeries.length > 0
-        ? summarize(trainSeries.map((p) => p.loss))
-        : null,
-    [advanced, trainSeries],
-  );
-  const evalStats = useMemo(
-    () =>
-      advanced && evalSeries.length > 0
-        ? summarize(evalSeries.map((p) => p.evalLoss))
-        : null,
-    [advanced, evalSeries],
-  );
+  const trainStats = useMemo(() => {
+    if (!advanced) return null;
+    if (trainRunning) {
+      return trainRunning.count > 0 ? finalizeRunningStats(trainRunning) : null;
+    }
+    return trainSeries.length > 0
+      ? summarize(trainSeries.map((p) => p.loss))
+      : null;
+  }, [advanced, trainRunning, trainSeries]);
+  const evalStats = useMemo(() => {
+    if (!advanced) return null;
+    if (evalRunning) {
+      return evalRunning.count > 0 ? finalizeRunningStats(evalRunning) : null;
+    }
+    return evalSeries.length > 0
+      ? summarize(evalSeries.map((p) => p.evalLoss))
+      : null;
+  }, [advanced, evalRunning, evalSeries]);
 
   if (unified.length === 0) {
     return (
@@ -437,7 +459,12 @@ export function LossChart({
       ) : null}
 
       {advanced ? (
-        <AdvancedStats train={trainStats} evalStats={evalStats} />
+        <AdvancedStats
+          train={trainStats}
+          evalStats={evalStats}
+          trainUsingFullRunStats={Boolean(trainRunning)}
+          evalUsingFullRunStats={Boolean(evalRunning)}
+        />
       ) : null}
     </div>
   );
@@ -481,19 +508,54 @@ function Legend({
 function AdvancedStats({
   train,
   evalStats,
+  trainUsingFullRunStats,
+  evalUsingFullRunStats,
 }: {
   train: LossStats | null;
   evalStats: LossStats | null;
+  /**
+   * True when the caller supplied a `trainRunning` / `evalRunning`
+   * accumulator (see LossChart's props) for that specific series, so
+   * its stats above came from `finalizeRunningStats` rather than
+   * `summarize()` over `points`. Tracked per series (not combined)
+   * since a caller could in principle supply one accumulator without
+   * the other, and only the series with an accumulator has exact
+   * mean/variance/CI for the whole run; the other still describes
+   * whatever `points` currently holds.
+   */
+  trainUsingFullRunStats: boolean;
+  evalUsingFullRunStats: boolean;
 }) {
+  const fullRunCaption =
+    "Mean, standard deviation, variance, and the confidence interval reflect the full run. p90/p95 are estimated from a representative sample of up to 2,000 values, since retaining every value indefinitely isn't practical for a long run.";
+  const retainedSampleCaption =
+    "Stats describe the currently retained sample, not necessarily every point ever emitted for a long run.";
+  let caption: string;
+  if (trainUsingFullRunStats && evalUsingFullRunStats) {
+    caption = fullRunCaption;
+  } else if (!trainUsingFullRunStats && !evalUsingFullRunStats) {
+    caption = retainedSampleCaption;
+  } else {
+    const fullRunLabel = trainUsingFullRunStats ? "Training loss" : "Eval loss";
+    const retainedLabel = trainUsingFullRunStats
+      ? "Eval loss"
+      : "Training loss";
+    caption = `${fullRunLabel} stats reflect the full run (p90/p95 estimated from a representative sample). ${retainedLabel} stats describe the currently retained sample.`;
+  }
   return (
-    <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
-      <StatsCard label="Training loss" tone="train" stats={train} />
-      <StatsCard
-        label="Eval loss"
-        tone="eval"
-        stats={evalStats}
-        emptyHint="Awaiting training.log events with evalLoss…"
-      />
+    <div className="mt-4">
+      <p className="mb-2 text-[10px] text-zinc-500 dark:text-zinc-400">
+        {caption}
+      </p>
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+        <StatsCard label="Training loss" tone="train" stats={train} />
+        <StatsCard
+          label="Eval loss"
+          tone="eval"
+          stats={evalStats}
+          emptyHint="Awaiting training.log events with evalLoss…"
+        />
+      </div>
     </div>
   );
 }