[Bug]: Diagnostics process Resource History stays stale while the panel is open #35083

#!/bin/sh
set -eu
repo=${1:?Usage: sh repro.sh /path/to/dependency-installed/t3code}
repo=$(cd "$repo" && pwd)
fixture=$(mktemp -d "${TMPDIR:-/tmp}/process-history-repro.XXXXXX")
browser_cache=${PLAYWRIGHT_BROWSERS_PATH:-${HOME}/Library/Caches/ms-playwright}
target="$repo/apps/web/src/components/settings/reproProcessHistory.browser.test.tsx"
producer="$repo/apps/server/reproProducer.ts"
data="$repo/apps/web/src/components/settings/reproHistoryData.json"
if [ -e "$target" ] || [ -e "$producer" ] || [ -e "$data" ]; then
  echo "Refusing to replace existing fixture files" >&2
  exit 2
fi
cleanup() {
  rm -f "$target" "$producer" "$data"
  rm -rf "$fixture"
}
trap cleanup EXIT HUP INT TERM
mkdir -p "$fixture/fake-home" "$fixture/tmp" "$fixture/t3home"
export HOME="$fixture/fake-home" TMPDIR="$fixture/tmp" T3CODE_HOME="$fixture/t3home"
export PLAYWRIGHT_BROWSERS_PATH="$browser_cache"
export PATH="$repo/node_modules/.bin:$PATH"
cat > "$fixture/panel.tsx" <<'BROWSER_FIXTURE'
import type { ReactNode } from "react";
import { RegistryContext } from "@effect/atom-react";
import { AuthDiagnosticsReadScope, EnvironmentId, WS_METHODS, ResourceTelemetryHistory, ResourceTelemetrySnapshot, ServerProcessResourceHistoryResult } from "@t3tools/contracts";
import { AVAILABLE_CONNECTION_STATE, PrimaryConnectionTarget, EnvironmentRegistry, EnvironmentSupervisor } from "@t3tools/client-runtime/connection";
import { createServerEnvironmentAtoms } from "@t3tools/client-runtime/state/server";
import * as Persistence from "../../../../../packages/client-runtime/src/platform/persistence.ts";
import * as Effect from "effect/Effect";
import * as Layer from "effect/Layer";
import * as Option from "effect/Option";
import * as Stream from "effect/Stream";
import * as SubscriptionRef from "effect/SubscriptionRef";
import * as Schema from "effect/Schema";
import { AsyncResult, Atom, AtomRegistry } from "effect/reactivity";
import { expect, it, vi } from "vite-plus/test";
import { render, act, fakeTimers } from "../../../test/render";

const fixture = vi.hoisted(() => ({ atoms: null as any, session: null as any }));
vi.mock("../../state/server", () => ({ serverEnvironment: new Proxy({}, {get: (_, key) => fixture.atoms[key]}) }));
vi.mock("../../state/environments", () => ({ usePrimaryEnvironment: () => null, useEnvironments: () => ({environments: []}) }));
vi.mock("../../state/session", () => ({
  environmentSession: {sessionStateAtom: () => fixture.session},
  useEnvironmentScope: () => true, readEnvironmentScope: () => true,
}));
vi.mock("../../editorPreferences", () => ({useOpenInPreferredEditor: () => vi.fn()}));
vi.mock("../../state/use-atom-command", () => ({useAtomCommand: () => vi.fn()}));
vi.mock("./SettingsScopeContext", () => ({
  useSettingsScope: () => ({ environment: {environmentId: "repro", connection: {phase: "connected"}}, scope: {kind: "environment"} }),
  useOptionalSettingsScope: () => null,
}));
vi.mock("./SettingsScopeSentence", () => ({SettingsScopeSentence: () => null}));
vi.mock("./TelemetryExportSettings", () => ({TelemetryExportSettings: () => null}));
vi.mock("./settingsLayout", () => ({
  SettingsPageContainer: ({children}: {children: ReactNode}) => <main>{children}</main>,
  SettingsSection: ({title, headerAction, children}: {title: string, headerAction?: ReactNode, children: ReactNode}) => <section><h2>{title}</h2>{headerAction}{children}</section>,
}));
import generated from "./reproHistoryData.json";
import { DiagnosticsSettingsPanel } from "./DiagnosticsSettings";

it("shows process Resource History stale while its sibling timeline updates", async () => {
  using _timers = fakeTimers();
  const codec = Schema.toCodecJson(Schema.Struct({first: ServerProcessResourceHistoryResult, second: ServerProcessResourceHistoryResult, firstTelemetry: ResourceTelemetryHistory, secondTelemetry: ResourceTelemetryHistory, snapshot: ResourceTelemetrySnapshot}));
  const generatedData = Schema.decodeUnknownSync(codec)(generated);
  const {snapshot} = generatedData;
  const readAt = snapshot.readAt;
  let later = false;
  const reads = {telemetry: 0, process: 0};
  const requests: unknown[] = [];
  const history = () => later ? generatedData.secondTelemetry : generatedData.firstTelemetry;
  const processHistory = () => later ? generatedData.second : generatedData.first;
  const client = {
    [WS_METHODS.serverGetResourceTelemetryHistory]: (input: unknown) => Effect.sync(() => {requests.push({method: "telemetry", input}); reads.telemetry++; return history();}),
    [WS_METHODS.serverGetProcessResourceHistory]: (input: {windowMs: number, bucketMs: number}) => Effect.sync(() => {requests.push({method: "process", input}); reads.process++; return processHistory();}),
    [WS_METHODS.subscribeResourceTelemetry]: () => Stream.concat(Stream.make(snapshot), Stream.never),
    [WS_METHODS.serverGetProcessDiagnostics]: () => Effect.succeed({readAt, serverPid: 101, processCount: 0, totalRssBytes: 0, totalCpuPercent: 0, processes: [], error: Option.none()}),
    [WS_METHODS.serverGetTraceDiagnostics]: () => Effect.succeed({readAt, traceFilePath: "traces", scannedFilePaths: [], recordCount: 0, parseErrorCount: 0, firstSpanAt: Option.none(), lastSpanAt: Option.none(), failureCount: 0, interruptionCount: 0, slowSpanThresholdMs: 1000, slowSpanCount: 0, logLevelCounts: {}, topSpansByCount: [], slowestSpans: [], commonFailures: [], latestFailures: [], latestWarningAndErrorLogs: [], partialFailure: Option.none(), error: Option.none()}),
  };
  const target = new PrimaryConnectionTarget({environmentId: EnvironmentId.make("repro"), label: "Repro", httpBaseUrl: "https://repro.example.test", wsBaseUrl: "wss://repro.example.test"});
  const supervisor = EnvironmentSupervisor.EnvironmentSupervisor.of({target, state: await Effect.runPromise(SubscriptionRef.make({...AVAILABLE_CONNECTION_STATE, phase: "connected"})), session: await Effect.runPromise(SubscriptionRef.make(Option.some({client, initialConfig: Effect.succeed({}), ready: Effect.void, probe: Effect.void, inboundFrames: Effect.succeed(0), closed: Effect.never}))), prepared: await Effect.runPromise(SubscriptionRef.make(Option.none())), connect: Effect.void, disconnect: Effect.void, retryNow: Effect.void} as any);
  const environments = EnvironmentRegistry.EnvironmentRegistry.of({run: (_id: unknown, effect: any) => Effect.provideService(effect, EnvironmentSupervisor.EnvironmentSupervisor, supervisor), followStream: (_id: unknown, stream: any) => Stream.provideService(stream, EnvironmentSupervisor.EnvironmentSupervisor, supervisor)} as any);
  const runtime = Atom.runtime(Layer.merge(Layer.succeed(EnvironmentRegistry.EnvironmentRegistry, environments), Layer.succeed(Persistence.EnvironmentCacheStore, {loadServerConfig: () => Effect.succeedNone} as any)));
  fixture.atoms = createServerEnvironmentAtoms(runtime, {initialConfigValueAtom: () => Atom.make({} as any)});
  fixture.session = Atom.make(AsyncResult.success({authenticated: true, scopes: [AuthDiagnosticsReadScope]}));
  const registry = AtomRegistry.make();
  using _registry = {[Symbol.dispose]: () => registry.dispose()};
  await using screen = await render(<RegistryContext.Provider value={registry}><DiagnosticsSettingsPanel /></RegistryContext.Provider>, {router: "/settings/diagnostics"});
  await expect.element(screen.getByRole("heading", {name: "Resource History", exact: true})).toBeInTheDocument();
  const section = (name: string) => screen.getByRole("heading", {name, exact: true}).element().closest("section")!;
  const numbers = () => {
    const legacy = section("Resource History");
    const sampleLabel = [...legacy.querySelectorAll("span")].find(el => el.textContent === "Samples")!;
    return {processSamples: sampleLabel.parentElement!.nextElementSibling!.textContent, telemetrySamples: section("Resource timeline").querySelector("tbody tr")?.children[7]?.textContent, processCpuTime: [...legacy.querySelectorAll("span")].find(el => el.textContent === "CPU Time")?.parentElement?.nextElementSibling?.textContent};
  };
  await vi.waitFor(() => expect(numbers().processSamples).toBe("22"));
  await vi.waitFor(() => expect(numbers().telemetrySamples).toBe("11"));
  const initial = numbers();
  console.log("INITIAL " + JSON.stringify({reads, ...initial}));
  later = true;
  await act(() => vi.advanceTimersByTimeAsync(12000));
  await vi.waitFor(() => expect(reads.telemetry).toBeGreaterThan(1));
  const after = numbers();
  expect(after.processSamples).toBe("22");
  expect(after.telemetrySamples).toBe("23");
  expect(reads.process).toBe(1);
  console.log("AFTER_12S " + JSON.stringify({reads, serverSamples: generatedData.second.retainedSampleCount, ...after}));
  console.log("REQUESTS " + JSON.stringify(requests));
  vi.useRealTimers();
  const refresh = section("Resource History").querySelector<HTMLButtonElement>('button[aria-label="Refresh resource history"]')!;
  await act(() => refresh.click());
  await vi.waitFor(() => expect(numbers().processSamples).toBe("46"));
  expect(reads.process).toBe(2);
  console.log("MANUAL_REFRESH " + JSON.stringify({reads, ...numbers()}));
  console.log("DEFECT PRESENT: real DiagnosticsSettingsPanel and real query atoms; telemetry control updates, process view needs manual refresh");
});
BROWSER_FIXTURE
cat > "$fixture/producer.ts" <<'PRODUCER_FIXTURE'
import assert from 'node:assert/strict';
import {writeFileSync} from 'node:fs';
import * as Schema from 'effect/Schema';
import {ServerProcessResourceHistoryResult, ResourceTelemetryHistory, ResourceTelemetrySnapshot} from '@t3tools/contracts';
import * as DateTime from 'effect/DateTime';
import * as Effect from 'effect/Effect';
import * as Layer from 'effect/Layer';
import * as Option from 'effect/Option';
import * as Native from './src/resourceTelemetry/NativeTelemetryClient.ts';
import * as Desktop from './src/resourceTelemetry/DesktopTelemetryReceiver.ts';
import * as Attribution from './src/resourceTelemetry/ResourceAttribution.ts';
import * as Telemetry from './src/resourceTelemetry/ResourceTelemetry.ts';
import * as Process from './src/diagnostics/ProcessResourceMonitor.ts';
let count = 11;
const now = Date.now();
const samples = () => Array.from({length: count}, (_, i) => ({version: 3 as const, type: 'snapshot' as const, sequence: i + 1, sampledAtUnixMs: now - (count - i) * 1000, collectionDurationMicros: 1, scannedProcessCount: 1, retainedProcessCount: 1, inaccessibleProcessCount: 0, processes: [{pid: process.pid, ppid: 1, startTimeMs: 100, runTimeMs: (i+1)*1000, name: 'server', command: 'server', status: 'Running', cpuPercent: 10, cpuTimeMs: i*1000, residentBytes: 1000, virtualBytes: 2000, ioReadBytes: 0, ioWriteBytes: 0, ioSemantics: 'storage' as const}]}));
const telemetryLayer = Telemetry.layer.pipe(Layer.provide(Layer.mergeAll(
  Native.layerTest({readHistory: () => Effect.sync(samples), health: Effect.succeed({status: 'healthy', hello: Option.none(), lastSampleAt: Option.some(DateTime.makeUnsafe(now)), lastError: Option.none(), restartCount: 0, sampleIntervalMs: 1000})}),
  Desktop.layerTest(), Attribution.layer,
)));
await Effect.runPromise(Effect.scoped(Effect.gen(function*() {
  const telemetry = yield* Telemetry.ResourceTelemetry;
  const monitor = yield* Process.make();
  const input = {windowMs: 900000, bucketMs: 60000};
  const first = yield* monitor.readHistory(input);
  const firstTelemetry = yield* telemetry.readHistory({...input, bucketMs: 30000});
  count = 23;
  const second = yield* monitor.readHistory(input);
  const control = yield* telemetry.readHistory({...input, bucketMs: 30000});
  const snapshot = yield* telemetry.latest;
  const codec = Schema.toCodecJson(Schema.Struct({first: ServerProcessResourceHistoryResult, second: ServerProcessResourceHistoryResult, firstTelemetry: ResourceTelemetryHistory, secondTelemetry: ResourceTelemetryHistory, snapshot: ResourceTelemetrySnapshot}));
  if (process.argv[2]) writeFileSync(process.argv[2], JSON.stringify(Schema.encodeSync(codec)({first, second, firstTelemetry, secondTelemetry: control, snapshot})));
  const describe = (h: typeof first) => ({retainedSampleCount: h.retainedSampleCount, processSamples: h.topProcesses[0]?.sampleCount, cpuSeconds: h.totalCpuSecondsApprox, bucketCount: h.buckets.length});
  console.log('PRODUCER_FIRST ' + JSON.stringify(describe(first)));
  console.log('PRODUCER_LATER ' + JSON.stringify(describe(second)));
  console.log('PRODUCER_CONTROL ' + JSON.stringify({retainedSampleCount: control.retainedSampleCount, processSamples: control.topProcesses[0]?.sampleCount}));
  assert.equal(first.topProcesses[0]?.sampleCount, 11);
  assert.equal(second.topProcesses[0]?.sampleCount, 23);
  assert.equal(second.retainedSampleCount, control.retainedSampleCount);
  assert(second.totalCpuSecondsApprox > first.totalCpuSecondsApprox);
})).pipe(Effect.provide(telemetryLayer)));
PRODUCER_FIXTURE
cp "$fixture/panel.tsx" "$target"
cp "$fixture/producer.ts" "$producer"
printf 'REVISION '
git -C "$repo" rev-parse HEAD
(cd "$repo/apps/server" && node reproProducer.ts "$fixture/data.json")
cp "$fixture/data.json" "$data"
(cd "$repo/apps/web" && env -u NODE_ENV vp test run --project browser src/components/settings/reproProcessHistory.browser.test.tsx --silent=false --reporter=verbose)
echo 'REPRO PASSED: defect present, sibling control correct, manual refresh correct'