Add loss graph to the ui

ui/src/app/api/jobs/[jobID]/loss/route.ts

@@ -0,0 +1,98 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { PrismaClient } from '@prisma/client';
+import path from 'path';
+import fs from 'fs';
+import { getTrainingFolder } from '@/server/settings';
+
+import sqlite3 from 'sqlite3';
+
+export const runtime = 'nodejs';
+
+const prisma = new PrismaClient();
+
+function openDb(filename: string) {
+  const db = new sqlite3.Database(filename);
+  db.configure('busyTimeout', 30_000);
+  return db;
+}
+
+function all<T = any>(db: sqlite3.Database, sql: string, params: any[] = []) {
+  return new Promise<T[]>((resolve, reject) => {
+    db.all(sql, params, (err, rows) => {
+      if (err) reject(err);
+      else resolve(rows as T[]);
+    });
+  });
+}
+
+function closeDb(db: sqlite3.Database) {
+  return new Promise<void>((resolve, reject) => {
+    db.close((err) => (err ? reject(err) : resolve()));
+  });
+}
+
+export async function GET(request: NextRequest, { params }: { params: { jobID: string } }) {
+  // this must be awaited to avoid TS error
+  const { jobID } = await params;
+
+  const job = await prisma.job.findUnique({ where: { id: jobID } });
+  if (!job) return NextResponse.json({ error: 'Job not found' }, { status: 404 });
+
+  const trainingFolder = await getTrainingFolder();
+  const jobFolder = path.join(trainingFolder, job.name);
+  const logPath = path.join(jobFolder, 'loss_log.db');
+
+  if (!fs.existsSync(logPath)) {
+    return NextResponse.json({ keys: [], key: 'loss', points: [] });
+  }
+
+  const url = new URL(request.url);
+  const key = url.searchParams.get('key') ?? 'loss';
+  const limit = Math.min(Number(url.searchParams.get('limit') ?? 2000), 20000);
+  const sinceStepParam = url.searchParams.get('since_step');
+  const sinceStep = sinceStepParam != null ? Number(sinceStepParam) : null;
+  const stride = Math.max(1, Number(url.searchParams.get('stride') ?? 1));
+
+  const db = openDb(logPath);
+
+  try {
+    const keysRows = await all<{ key: string }>(db, `SELECT key FROM metric_keys ORDER BY key ASC`);
+    const keys = keysRows.map((r) => r.key);
+
+    const points = await all<{
+      step: number;
+      wall_time: number;
+      value: number | null;
+      value_text: string | null;
+    }>(
+      db,
+      `
+      SELECT
+        m.step AS step,
+        s.wall_time AS wall_time,
+        m.value_real AS value,
+        m.value_text AS value_text
+      FROM metrics m
+      JOIN steps s ON s.step = m.step
+      WHERE m.key = ?
+        AND (? IS NULL OR m.step > ?)
+        AND (m.step % ?) = 0
+      ORDER BY m.step ASC
+      LIMIT ?
+      `,
+      [key, sinceStep, sinceStep, stride, limit]
+    );
+
+    return NextResponse.json({
+      key,
+      keys,
+      points: points.map((p) => ({
+        step: p.step,
+        wall_time: p.wall_time,
+        value: p.value ?? (p.value_text ? Number(p.value_text) : null),
+      })),
+    });
+  } finally {
+    await closeDb(db);
+  }
+}

ui/src/app/jobs/[jobID]/page.tsx

@@ -10,9 +10,10 @@ import JobOverview from '@/components/JobOverview';
 import { redirect } from 'next/navigation';
 import JobActionBar from '@/components/JobActionBar';
 import JobConfigViewer from '@/components/JobConfigViewer';
+import JobLossGraph from '@/components/JobLossGraph';
 import { Job } from '@prisma/client';
 
-type PageKey = 'overview' | 'samples' | 'config';
+type PageKey = 'overview' | 'samples' | 'config' | 'loss_log';
 
 interface Page {
   name: string;
@@ -36,6 +37,12 @@ const pages: Page[] = [
     menuItem: SampleImagesMenu,
     mainCss: 'pt-24',
   },
+  {
+    name: 'Loss Graph',
+    value: 'loss_log',
+    component: JobLossGraph,
+    mainCss: 'pt-24',
+  },
   {
     name: 'Config File',
     value: 'config',

ui/src/app/jobs/new/jobConfig.ts

@@ -92,6 +92,10 @@ export const defaultJobConfig: JobConfig = {
           switch_boundary_every: 1,
           loss_type: 'mse',
         },
+        logging: {
+          log_every: 1,
+          use_ui_logger: true,
+        },
         model: {
           name_or_path: 'ostris/Flex.1-alpha',
           quantize: true,
@@ -187,5 +191,13 @@ export const migrateJobConfig = (jobConfig: JobConfig): JobConfig => {
       false) as boolean;
     delete jobConfig.config.process[0].model.auto_memory;
   }
+
+  if (!('logging' in jobConfig.config.process[0])) {
+    //@ts-ignore
+    jobConfig.config.process[0].logging = {
+      log_every: 1,
+      use_ui_logger: true,
+    };
+  }
   return jobConfig;
 };

ui/src/components/JobLossGraph.tsx

@@ -0,0 +1,432 @@
+'use client';
+
+import { Job } from '@prisma/client';
+import useJobLossLog, { LossPoint } from '@/hooks/useJobLossLog';
+import { useMemo, useState, useEffect } from 'react';
+import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, Legend } from 'recharts';
+
+interface Props {
+  job: Job;
+}
+
+function formatNum(v: number) {
+  if (!Number.isFinite(v)) return '';
+  if (Math.abs(v) >= 1000) return v.toFixed(0);
+  if (Math.abs(v) >= 10) return v.toFixed(3);
+  if (Math.abs(v) >= 1) return v.toFixed(4);
+  return v.toPrecision(4);
+}
+
+function clamp01(x: number) {
+  return Math.max(0, Math.min(1, x));
+}
+
+// EMA smoothing that works on a per-series list.
+// alpha=1 -> no smoothing, alpha closer to 0 -> more smoothing.
+function emaSmoothPoints(points: { step: number; value: number }[], alpha: number) {
+  if (points.length === 0) return [];
+  const a = clamp01(alpha);
+  const out: { step: number; value: number }[] = new Array(points.length);
+
+  let prev = points[0].value;
+  out[0] = { step: points[0].step, value: prev };
+
+  for (let i = 1; i < points.length; i++) {
+    const x = points[i].value;
+    prev = a * x + (1 - a) * prev;
+    out[i] = { step: points[i].step, value: prev };
+  }
+
+  return out;
+}
+
+function hashToIndex(str: string, mod: number) {
+  let h = 2166136261;
+  for (let i = 0; i < str.length; i++) {
+    h ^= str.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return Math.abs(h) % mod;
+}
+
+const PALETTE = [
+  'rgba(96,165,250,1)', // blue-400
+  'rgba(52,211,153,1)', // emerald-400
+  'rgba(167,139,250,1)', // purple-400
+  'rgba(251,191,36,1)', // amber-400
+  'rgba(244,114,182,1)', // pink-400
+  'rgba(248,113,113,1)', // red-400
+  'rgba(34,211,238,1)', // cyan-400
+  'rgba(129,140,248,1)', // indigo-400
+];
+
+function strokeForKey(key: string) {
+  return PALETTE[hashToIndex(key, PALETTE.length)];
+}
+
+export default function JobLossGraph({ job }: Props) {
+  const { series, lossKeys, status, refreshLoss } = useJobLossLog(job.id, 2000);
+
+  // Controls
+  const [useLogScale, setUseLogScale] = useState(false);
+  const [showRaw, setShowRaw] = useState(false);
+  const [showSmoothed, setShowSmoothed] = useState(true);
+
+  // 0..100 slider. 100 = no smoothing, 0 = heavy smoothing.
+  const [smoothing, setSmoothing] = useState(90);
+
+  // UI-only downsample for rendering speed
+  const [plotStride, setPlotStride] = useState(1);
+
+  // show only last N points in the chart (0 = all)
+  const [windowSize, setWindowSize] = useState<number>(4000);
+
+  // quick y clipping for readability
+  const [clipOutliers, setClipOutliers] = useState(false);
+
+  // which loss series are enabled (default: all enabled)
+  const [enabled, setEnabled] = useState<Record<string, boolean>>({});
+
+  // keep enabled map in sync with discovered keys (enable new ones automatically)
+  useEffect(() => {
+    setEnabled(prev => {
+      const next = { ...prev };
+      for (const k of lossKeys) {
+        if (next[k] === undefined) next[k] = true;
+      }
+      // drop removed keys
+      for (const k of Object.keys(next)) {
+        if (!lossKeys.includes(k)) delete next[k];
+      }
+      return next;
+    });
+  }, [lossKeys]);
+
+  const activeKeys = useMemo(() => lossKeys.filter(k => enabled[k] !== false), [lossKeys, enabled]);
+
+  const perSeries = useMemo(() => {
+    // Build per-series processed point arrays (raw + smoothed), then merge by step for charting.
+    const stride = Math.max(1, plotStride | 0);
+
+    // smoothing%: 0 => no smoothing (alpha=1.0), 100 => heavy smoothing (alpha=0.02)
+    const t = clamp01(smoothing / 100);
+    const alpha = 1.0 - t * 0.98; // 1.0 -> 0.02
+
+    const out: Record<string, { raw: { step: number; value: number }[]; smooth: { step: number; value: number }[] }> =
+      {};
+
+    for (const key of activeKeys) {
+      const pts: LossPoint[] = series[key] ?? [];
+
+      let raw = pts
+        .filter(p => p.value !== null && Number.isFinite(p.value as number))
+        .map(p => ({ step: p.step, value: p.value as number }))
+        .filter(p => (useLogScale ? p.value > 0 : true))
+        .filter((_, idx) => idx % stride === 0);
+
+      // windowing (applies after stride)
+      if (windowSize > 0 && raw.length > windowSize) {
+        raw = raw.slice(raw.length - windowSize);
+      }
+
+      const smooth = emaSmoothPoints(raw, alpha);
+
+      out[key] = { raw, smooth };
+    }
+
+    return out;
+  }, [series, activeKeys, smoothing, plotStride, windowSize, useLogScale]);
+
+  const chartData = useMemo(() => {
+    // Merge series into one array of objects keyed by step.
+    // Fields: `${key}__raw` and `${key}__smooth`
+    const map = new Map<number, any>();
+
+    for (const key of activeKeys) {
+      const s = perSeries[key];
+      if (!s) continue;
+
+      for (const p of s.raw) {
+        const row = map.get(p.step) ?? { step: p.step };
+        row[`${key}__raw`] = p.value;
+        map.set(p.step, row);
+      }
+      for (const p of s.smooth) {
+        const row = map.get(p.step) ?? { step: p.step };
+        row[`${key}__smooth`] = p.value;
+        map.set(p.step, row);
+      }
+    }
+
+    const arr = Array.from(map.values());
+    arr.sort((a, b) => a.step - b.step);
+    return arr;
+  }, [activeKeys, perSeries]);
+
+  const hasData = chartData.length > 1;
+
+  const yDomain = useMemo((): [number | 'auto', number | 'auto'] => {
+    if (!clipOutliers || chartData.length < 10) return ['auto', 'auto'];
+
+    // Collect visible values (prefer smoothed if shown, else raw)
+    const vals: number[] = [];
+    for (const row of chartData) {
+      for (const key of activeKeys) {
+        const k = showSmoothed ? `${key}__smooth` : `${key}__raw`;
+        const v = row[k];
+        if (typeof v === 'number' && Number.isFinite(v)) vals.push(v);
+      }
+    }
+    if (vals.length < 10) return ['auto', 'auto'];
+
+    vals.sort((a, b) => a - b);
+    const lo = vals[Math.floor(vals.length * 0.02)];
+    const hi = vals[Math.ceil(vals.length * 0.98) - 1];
+
+    if (!Number.isFinite(lo) || !Number.isFinite(hi) || lo === hi) return ['auto', 'auto'];
+    return [lo, hi];
+  }, [clipOutliers, chartData, activeKeys, showSmoothed]);
+
+  const latestSummary = useMemo(() => {
+    // Provide a simple “latest” readout for the first active series
+    const firstKey = activeKeys[0];
+    if (!firstKey) return null;
+
+    const s = perSeries[firstKey];
+    if (!s) return null;
+
+    const lastRaw = s.raw.length ? s.raw[s.raw.length - 1] : null;
+    const lastSmooth = s.smooth.length ? s.smooth[s.smooth.length - 1] : null;
+
+    return {
+      key: firstKey,
+      step: lastRaw?.step ?? lastSmooth?.step ?? null,
+      raw: lastRaw?.value ?? null,
+      smooth: lastSmooth?.value ?? null,
+    };
+  }, [activeKeys, perSeries]);
+
+  return (
+    <div className="bg-gray-900 rounded-xl shadow-lg overflow-hidden border border-gray-800 flex flex-col">
+      <div className="bg-gray-800 px-4 py-3 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="h-2 w-2 rounded-full bg-blue-400" />
+          <h2 className="text-gray-100 text-sm font-medium">Loss graph</h2>
+          <span className="text-xs text-gray-400">
+            {status === 'loading' && 'Loading...'}
+            {status === 'refreshing' && 'Refreshing...'}
+            {status === 'error' && 'Error'}
+            {status === 'success' && hasData && `${chartData.length.toLocaleString()} steps`}
+            {status === 'success' && !hasData && 'No data yet'}
+          </span>
+        </div>
+
+        <button
+          type="button"
+          onClick={refreshLoss}
+          className="px-3 py-1 rounded-md text-xs bg-gray-700/60 hover:bg-gray-700 text-gray-200 border border-gray-700"
+        >
+          Refresh
+        </button>
+      </div>
+
+      {/* Chart */}
+      <div className="px-4  pt-4 pb-4">
+        <div className="bg-gray-950 rounded-lg border border-gray-800 h-96 relative">
+          {!hasData ? (
+            <div className="h-full w-full flex items-center justify-center text-sm text-gray-400">
+              {status === 'error' ? 'Failed to load loss logs.' : 'Waiting for loss points...'}
+            </div>
+          ) : (
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={chartData} margin={{ top: 10, right: 16, bottom: 10, left: 8 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
+                <XAxis
+                  dataKey="step"
+                  tick={{ fill: 'rgba(255,255,255,0.55)', fontSize: 12 }}
+                  tickLine={{ stroke: 'rgba(255,255,255,0.15)' }}
+                  axisLine={{ stroke: 'rgba(255,255,255,0.15)' }}
+                  minTickGap={40}
+                />
+                <YAxis
+                  scale={useLogScale ? 'log' : 'linear'}
+                  tick={{ fill: 'rgba(255,255,255,0.55)', fontSize: 12 }}
+                  tickLine={{ stroke: 'rgba(255,255,255,0.15)' }}
+                  axisLine={{ stroke: 'rgba(255,255,255,0.15)' }}
+                  width={72}
+                  tickFormatter={formatNum}
+                  domain={yDomain}
+                  allowDataOverflow={clipOutliers}
+                />
+                <Tooltip
+                  cursor={{ stroke: 'rgba(59,130,246,0.25)', strokeWidth: 1 }}
+                  contentStyle={{
+                    background: 'rgba(17,24,39,0.96)',
+                    border: '1px solid rgba(31,41,55,1)',
+                    borderRadius: 10,
+                    color: 'rgba(255,255,255,0.9)',
+                    fontSize: 12,
+                  }}
+                  labelStyle={{ color: 'rgba(255,255,255,0.75)' }}
+                  labelFormatter={(label: any) => `step ${label}`}
+                  formatter={(value: any, name: any) => [formatNum(Number(value)), name]}
+                />
+
+                <Legend
+                  wrapperStyle={{
+                    paddingTop: 8,
+                    color: 'rgba(255,255,255,0.7)',
+                    fontSize: 12,
+                  }}
+                />
+
+                {activeKeys.map(k => {
+                  const color = strokeForKey(k);
+
+                  return (
+                    <g key={k}>
+                      {showRaw && (
+                        <Line
+                          type="monotone"
+                          dataKey={`${k}__raw`}
+                          name={`${k} (raw)`}
+                          stroke={color.replace('1)', '0.40)')}
+                          strokeWidth={1.25}
+                          dot={false}
+                          isAnimationActive={false}
+                        />
+                      )}
+                      {showSmoothed && (
+                        <Line
+                          type="monotone"
+                          dataKey={`${k}__smooth`}
+                          name={`${k}`}
+                          stroke={color}
+                          strokeWidth={2}
+                          dot={false}
+                          isAnimationActive={false}
+                        />
+                      )}
+                    </g>
+                  );
+                })}
+              </LineChart>
+            </ResponsiveContainer>
+          )}
+        </div>
+      </div>
+
+      {/* Controls */}
+      <div className="px-4 pb-2">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <div className="bg-gray-950 border border-gray-800 rounded-lg p-3">
+            <label className="block text-xs text-gray-400 mb-2">Display</label>
+            <div className="flex flex-wrap gap-2">
+              <ToggleButton checked={showSmoothed} onClick={() => setShowSmoothed(v => !v)} label="Smoothed" />
+              <ToggleButton checked={showRaw} onClick={() => setShowRaw(v => !v)} label="Raw" />
+              <ToggleButton checked={useLogScale} onClick={() => setUseLogScale(v => !v)} label="Log Y" />
+              <ToggleButton checked={clipOutliers} onClick={() => setClipOutliers(v => !v)} label="Clip outliers" />
+            </div>
+          </div>
+
+          <div className="bg-gray-950 border border-gray-800 rounded-lg p-3">
+            <label className="block text-xs text-gray-400 mb-2">Series</label>
+            {lossKeys.length === 0 ? (
+              <div className="text-sm text-gray-400">No loss keys found yet.</div>
+            ) : (
+              <div className="flex flex-wrap gap-2">
+                {lossKeys.map(k => (
+                  <button
+                    key={k}
+                    type="button"
+                    onClick={() => setEnabled(prev => ({ ...prev, [k]: !(prev[k] ?? true) }))}
+                    className={[
+                      'px-3 py-1 rounded-md text-xs border transition-colors',
+                      enabled[k] === false
+                        ? 'bg-gray-900 text-gray-400 border-gray-800 hover:bg-gray-800/60'
+                        : 'bg-gray-900 text-gray-200 border-gray-800 hover:bg-gray-800/60',
+                    ].join(' ')}
+                    aria-pressed={enabled[k] !== false}
+                    title={k}
+                  >
+                    <span className="inline-block h-2 w-2 rounded-full mr-2" style={{ background: strokeForKey(k) }} />
+                    {k}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="bg-gray-950 border border-gray-800 rounded-lg p-3">
+            <div className="flex items-center justify-between mb-1">
+              <label className="block text-xs text-gray-400">Smoothing</label>
+              <span className="text-xs text-gray-300">{smoothing}%</span>
+            </div>
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={smoothing}
+              onChange={e => setSmoothing(Number(e.target.value))}
+              className="w-full accent-blue-500"
+              disabled={!showSmoothed}
+            />
+          </div>
+
+          <div className="bg-gray-950 border border-gray-800 rounded-lg p-3">
+            <div className="flex items-center justify-between mb-1">
+              <label className="block text-xs text-gray-400">Plot stride</label>
+              <span className="text-xs text-gray-300">every {plotStride} pt</span>
+            </div>
+            <input
+              type="range"
+              min={1}
+              max={20}
+              value={plotStride}
+              onChange={e => setPlotStride(Number(e.target.value))}
+              className="w-full accent-blue-500"
+            />
+            <div className="mt-2 text-[11px] text-gray-500">UI downsample for huge runs.</div>
+          </div>
+
+          <div className="bg-gray-950 border border-gray-800 rounded-lg p-3 md:col-span-2">
+            <div className="flex items-center justify-between mb-1">
+              <label className="block text-xs text-gray-400">Window (last N points)</label>
+              <span className="text-xs text-gray-300">{windowSize === 0 ? 'all' : windowSize.toLocaleString()}</span>
+            </div>
+            <input
+              type="range"
+              min={0}
+              max={20000}
+              step={250}
+              value={windowSize}
+              onChange={e => setWindowSize(Number(e.target.value))}
+              className="w-full accent-blue-500"
+            />
+            <div className="mt-2 text-[11px] text-gray-500">
+              Set to 0 to show all (not recommended for very long runs).
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ToggleButton({ checked, onClick, label }: { checked: boolean; onClick: () => void; label: string }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={[
+        'px-3 py-1 rounded-md text-xs border transition-colors',
+        checked
+          ? 'bg-blue-500/10 text-blue-300 border-blue-500/30 hover:bg-blue-500/15'
+          : 'bg-gray-900 text-gray-300 border-gray-800 hover:bg-gray-800/60',
+      ].join(' ')}
+      aria-pressed={checked}
+    >
+      {label}
+    </button>
+  );
+}

ui/src/hooks/useJobLossLog.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import { apiClient } from '@/utils/api';
+
+export interface LossPoint {
+  step: number;
+  wall_time?: number;
+  value: number | null;
+}
+
+type SeriesMap = Record<string, LossPoint[]>;
+
+function isLossKey(key: string) {
+  // treat anything containing "loss" as a loss-series
+  // (covers loss, train_loss, val_loss, loss/xyz, etc.)
+  return /loss/i.test(key);
+}
+
+export default function useJobLossLog(jobID: string, reloadInterval: null | number = null) {
+  const [series, setSeries] = useState<SeriesMap>({});
+  const [keys, setKeys] = useState<string[]>([]);
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error' | 'refreshing'>('idle');
+
+  const didInitialLoadRef = useRef(false);
+  const inFlightRef = useRef(false);
+
+  // track last step per key so polling is incremental per series
+  const lastStepByKeyRef = useRef<Record<string, number | null>>({});
+
+  const lossKeys = useMemo(() => {
+    const base = (keys ?? []).filter(isLossKey);
+    // if keys table is empty early on, fall back to just "loss"
+    if (base.length === 0) return ['loss'];
+    return base.sort();
+  }, [keys]);
+
+  const refreshLoss = useCallback(async () => {
+    if (!jobID) return;
+
+    if (inFlightRef.current) return;
+    inFlightRef.current = true;
+
+    const loadStatus: 'loading' | 'refreshing' = didInitialLoadRef.current ? 'refreshing' : 'loading';
+    setStatus(loadStatus);
+
+    try {
+      // Step 1: get key list (we can do this by calling endpoint once; it returns keys)
+      // Keep it cheap: limit=1.
+      const first = await apiClient
+        .get(`/api/jobs/${jobID}/loss`, { params: { key: 'loss', limit: 1 } })
+        .then(res => res.data as { keys?: string[] });
+
+      const newKeys = first.keys ?? [];
+      setKeys(newKeys);
+
+      const wantedLossKeys = (newKeys.filter(isLossKey).length ? newKeys.filter(isLossKey) : ['loss']).sort();
+
+      // Step 2: fetch each loss key incrementally (since_step per key if polling)
+      const requests = wantedLossKeys.map(k => {
+        const params: Record<string, any> = { key: k };
+
+        if (reloadInterval && lastStepByKeyRef.current[k] != null) {
+          params.since_step = lastStepByKeyRef.current[k];
+        }
+
+        // keep default limit from server (or set explicitly if you want)
+        // params.limit = 2000;
+
+        return apiClient
+          .get(`/api/jobs/${jobID}/loss`, { params })
+          .then(res => res.data as { key: string; points?: LossPoint[] });
+      });
+
+      const results = await Promise.all(requests);
+
+      setSeries(prev => {
+        const next: SeriesMap = { ...prev };
+
+        for (const r of results) {
+          const k = r.key;
+          const newPoints = (r.points ?? []).filter(p => p.value !== null);
+
+          if (!didInitialLoadRef.current) {
+            // initial: replace
+            next[k] = newPoints;
+          } else if (newPoints.length) {
+            const existing = next[k] ?? [];
+            const prevLast = existing.length ? existing[existing.length - 1].step : null;
+            const filtered = prevLast == null ? newPoints : newPoints.filter(p => p.step > prevLast);
+            next[k] = filtered.length ? [...existing, ...filtered] : existing;
+          } else {
+            // no new points: keep existing
+            next[k] = next[k] ?? [];
+          }
+
+          // update last step per key
+          const finalArr = next[k] ?? [];
+          lastStepByKeyRef.current[k] = finalArr.length
+            ? finalArr[finalArr.length - 1].step
+            : (lastStepByKeyRef.current[k] ?? null);
+        }
+
+        // remove stale loss keys that no longer exist (rare, but keeps UI clean)
+        for (const existingKey of Object.keys(next)) {
+          if (isLossKey(existingKey) && !wantedLossKeys.includes(existingKey)) {
+            delete next[existingKey];
+            delete lastStepByKeyRef.current[existingKey];
+          }
+        }
+
+        return next;
+      });
+
+      setStatus('success');
+      didInitialLoadRef.current = true;
+    } catch (err) {
+      console.error('Error fetching loss logs:', err);
+      setStatus('error');
+    } finally {
+      inFlightRef.current = false;
+    }
+  }, [jobID, reloadInterval]);
+
+  useEffect(() => {
+    // reset when job changes
+    didInitialLoadRef.current = false;
+    lastStepByKeyRef.current = {};
+    setSeries({});
+    setKeys([]);
+    setStatus('idle');
+
+    refreshLoss();
+
+    if (reloadInterval) {
+      const interval = setInterval(() => {
+        refreshLoss();
+      }, reloadInterval);
+
+      return () => clearInterval(interval);
+    }
+  }, [jobID, reloadInterval, refreshLoss]);
+
+  return { series, keys, lossKeys, status, refreshLoss, setSeries };
+}

ui/src/types.ts

@@ -197,6 +197,11 @@ export interface SampleConfig {
   fps: number;
 }
 
+export interface LoggingConfig {
+  log_every: number;
+  use_ui_logger: boolean;
+}
+
 export interface SliderConfig {
   guidance_strength?: number;
   anchor_strength?: number;
@@ -218,6 +223,7 @@ export interface ProcessConfig {
   save: SaveConfig;
   datasets: DatasetConfig[];
   train: TrainConfig;
+  logging: LoggingConfig;
   model: ModelConfig;
   sample: SampleConfig;
 }