@hienlh/ppm 0.18.7 → 0.18.9

package/src/services/system-metrics/system-metrics.service.ts

@@ -0,0 +1,212 @@
+/**
+ * Whole-machine metrics: tiered subscribers, leases, one poll timer, atomic
+ * delta-state commits and demand-gated children.
+ *
+ * The tier gates COLLECTION, not just serialisation: the status bar mounts on
+ * every page, and if its stream drove full collection PPM would run a 174 ms
+ * PowerShell round trip plus a 400-process grouping pass every 2 s forever to
+ * render two numbers. So the PowerShell child, `nvidia-smi` and the disk/net
+ * queries run only while ≥1 full subscriber exists, and the child is torn down
+ * 60 s after the last one leaves (a window reopen then skips the bootstrap).
+ */
+import type { KillProcessResult, MetricsSnapshot, MetricsTier } from "../../types/system-metrics.ts";
+import { METRICS_INTERVAL_MS, METRICS_LEASE_TIMEOUT_MS, METRICS_LIGHT_INTERVAL_MS } from "../../types/system-metrics.ts";
+import { collectMemory, sampleCpuTimes } from "./cpu-memory-collector.ts";
+import { assembleTick, EMPTY_DELTA_STATE, projectLight, type TickDeltaState, type TickDeps } from "./system-metrics-tick.ts";
+import { createPlatformCollectors, type PlatformCollectors } from "./system-metrics-platform.ts";
+import { resolveProtectedPidsLive } from "./ppm-protected-pids.ts";
+import { SubscriberRegistry, type MetricsSubscriber } from "./metrics-subscriber-registry.ts";
+import { PollScheduler, installProcessExitHooks } from "./metrics-poll-scheduler.ts";
+import { handleKillRequest, type KillOutcome } from "./kill-request-handler.ts";
+import { executeKill } from "./kill-executor.ts";
+import { CollectorLock } from "./metrics-collector-lock.ts";
+
+/** Over a proxy a closed window's lease lives until the reap; 8 leaves room for
+ *  a few open/close cycles across devices without a spurious 429. */
+export const MAX_STREAM_SUBSCRIBERS = 8;
+/** Grace before the PowerShell child is torn down after the last full subscriber leaves. */
+export const FULL_IDLE_TEARDOWN_MS = 60_000;
+
+export interface SystemMetricsServiceOptions {
+  collectors?: PlatformCollectors;
+  intervals?: { full: number; light: number };
+  idleTeardownMs?: number;
+  leaseTimeoutMs?: number;
+  now?: () => number;
+  resolveProtected?: TickDeps["resolveProtected"];
+  execute?: (pid: number, tree: boolean) => Promise<KillProcessResult>;
+  log?: (line: string) => void;
+  /** Register process exit/signal teardown of children (off in unit tests). */
+  exitHooks?: boolean;
+}
+
+export type SubscribeInit = Pick<MetricsSubscriber, "tier" | "deliver" | "close">;
+export interface SubscribeResult { sid: string; tier: MetricsTier; intervalMs: number }
+
+export class SystemMetricsService {
+  private readonly registry = new SubscriberRegistry();
+  private readonly scheduler: PollScheduler;
+  private readonly collectors: PlatformCollectors;
+  private readonly intervals: { full: number; light: number };
+  private readonly leaseTimeoutMs: number;
+  private readonly now: () => number;
+  private readonly tickDeps: TickDeps;
+  private readonly execute: NonNullable<SystemMetricsServiceOptions["execute"]>;
+  private readonly log: (line: string) => void;
+  private readonly exitHooks: boolean;
+
+  /** Serialises the one tick or kill collection allowed to hold the collector. */
+  private readonly collectorLock = new CollectorLock();
+  private state: TickDeltaState = EMPTY_DELTA_STATE;
+  private latest: { light: MetricsSnapshot | null; full: MetricsSnapshot | null } = { light: null, full: null };
+
+  constructor(opts: SystemMetricsServiceOptions = {}) {
+    this.collectors = opts.collectors ?? createPlatformCollectors();
+    this.intervals = opts.intervals ?? { full: METRICS_INTERVAL_MS, light: METRICS_LIGHT_INTERVAL_MS };
+    this.leaseTimeoutMs = opts.leaseTimeoutMs ?? METRICS_LEASE_TIMEOUT_MS;
+    this.now = opts.now ?? Date.now;
+    this.execute = opts.execute ?? executeKill;
+    this.log = opts.log ?? ((line) => console.log(line));
+    this.exitHooks = opts.exitHooks ?? true;
+    this.tickDeps = {
+      platform: this.collectors.platform,
+      memory: () => collectMemory(),
+      processes: this.collectors.processes,
+      diskNet: this.collectors.diskNet,
+      gpus: this.collectors.gpus,
+      resolveProtected: opts.resolveProtected ?? resolveProtectedPidsLive,
+      now: this.now,
+      sampleCpu: sampleCpuTimes,
+    };
+    this.scheduler = new PollScheduler({
+      intervals: this.intervals,
+      idleTeardownMs: opts.idleTeardownMs ?? FULL_IDLE_TEARDOWN_MS,
+      onTick: () => void this.runTick(),
+      onIdle: () => this.collectors.processes.stop(),
+      onFullStart: () => this.ensureExitHooks(),
+    });
+  }
+
+  /** Null when the cap of live subscribers is reached (expired leases are reaped first). */
+  subscribe(init: SubscribeInit): SubscribeResult | null {
+    this.reapExpired();
+    if (this.registry.count() >= MAX_STREAM_SUBSCRIBERS) return null;
+    const sid = crypto.randomUUID().replace(/-/g, "").slice(0, 8);
+    this.registry.add({ sid, ...init, lastPingAt: this.now() });
+    this.reconcile();
+    // A newcomer on an already-running tier would otherwise wait a whole
+    // interval. Deferred so the caller can write its `session` frame first.
+    const latest = this.latest[init.tier];
+    if (latest) queueMicrotask(() => { if (this.registry.has(sid)) init.deliver(latest); });
+    return { sid, tier: init.tier, intervalMs: this.intervals[init.tier] };
+  }
+
+  unsubscribe(sid: string): boolean {
+    const removed = this.registry.remove(sid);
+    if (removed) this.reconcile();
+    return removed;
+  }
+
+  ping(sid: string): boolean {
+    return this.registry.ping(sid, this.now());
+  }
+
+  getLatest(tier: MetricsTier): MetricsSnapshot | null {
+    return this.latest[tier];
+  }
+
+  liveCount(tier?: MetricsTier): number {
+    return this.registry.count(tier);
+  }
+
+  activeTier(): MetricsTier | null {
+    return this.scheduler.activeTier();
+  }
+
+  /** Drop leases silent for longer than the timeout; returns how many. */
+  reapExpired(): number {
+    const expired = this.registry.reap(this.now(), this.leaseTimeoutMs);
+    if (expired.length > 0) this.reconcile();
+    return expired.length;
+  }
+
+  /**
+   * A kill re-collects the process table through the same collector the tick
+   * uses, and the PowerShell session accepts one request at a time — so the
+   * kill waits for an in-flight tick, and ticks skip while a kill holds the
+   * collector, instead of one of them failing with "request already in flight".
+   */
+  async kill(body: unknown): Promise<KillOutcome> {
+    this.ensureExitHooks();
+    try {
+      return await this.collectorLock.runExclusive(() => handleKillRequest(body, {
+        platform: this.collectors.platform,
+        collector: this.collectors.processes,
+        resolveProtected: this.tickDeps.resolveProtected,
+        execute: this.execute,
+        log: this.log,
+      }));
+    } finally {
+      // The re-query may have started the PowerShell child with no window open.
+      if (this.registry.count("full") === 0) this.scheduler.armIdle();
+    }
+  }
+
+  /** One poll: assemble for the active tier, commit the baseline, publish. */
+  async runTick(): Promise<void> {
+    // A Windows tick is ~174 ms and can slip, and a kill re-collects through the
+    // same collector: an overlapping collection would consume the delta baseline
+    // twice (CPU% in the hundreds) or fail with "request already in flight".
+    // Dropping a poll instead is harmless — metrics are lossy by nature.
+    await this.collectorLock.tryRun(() => this.assembleAndPublish());
+  }
+
+  private async assembleAndPublish(): Promise<void> {
+    try {
+      this.reapExpired();
+      const tier = this.scheduler.activeTier();
+      if (!tier) return;
+      const { snapshot, nextState } = await assembleTick(tier, this.state, this.tickDeps, this.latest.full);
+      this.state = nextState;
+      this.publish(snapshot);
+    } catch (e) {
+      console.error("[SystemMetrics] tick failed:", (e as Error)?.message ?? e);
+    }
+  }
+
+  /** Drop every subscriber, stop timers and kill children. */
+  shutdown(): void {
+    this.registry.clear();
+    this.scheduler.stop();
+    this.teardownChildren();
+  }
+
+  private publish(snapshot: MetricsSnapshot): void {
+    if (snapshot.tier === "full") {
+      this.latest.full = snapshot;
+      this.latest.light = projectLight(snapshot);
+    } else {
+      this.latest.light = snapshot;
+    }
+    for (const s of this.registry.list("full")) if (this.latest.full) s.deliver(this.latest.full);
+    for (const s of this.registry.list("light")) if (this.latest.light) s.deliver(this.latest.light);
+  }
+
+  private reconcile(): void {
+    const changed = this.scheduler.reconcile(this.registry.count("full"), this.registry.count("light"));
+    // Leaving the full tier: its baselines would be stale by the time it resumes.
+    if (changed && this.scheduler.activeTier() !== "full") {
+      this.state = { ...this.state, procCpu: null, procIo: null, disk: null, net: null };
+    }
+  }
+
+  private teardownChildren = (): void => {
+    try { this.collectors.processes.stop(); } catch { /* already gone */ }
+  };
+
+  private ensureExitHooks(): void {
+    if (this.exitHooks) installProcessExitHooks(this.teardownChildren);
+  }
+}
+
+export const systemMetricsService = new SystemMetricsService();

package/src/types/system-metrics.ts

@@ -0,0 +1,199 @@
+/** Whole-machine metrics contract shared by the collectors, the REST/SSE routes
+ *  and the web client. Types + constants only, no imports, so both bundles can
+ *  take it. Import RELATIVELY — the "@" alias points at src/web, not src. */
+
+export type MetricsPlatform = "win32" | "darwin" | "linux";
+
+/** `light` = node:os only, no child processes, status-bar cadence.
+ *  `full`  = every collector, process rows, groups. */
+export type MetricsTier = "light" | "full";
+
+/** Aggregate + per-core busy percentage over the last tick (0-100, 1 decimal). */
+export interface CpuMetrics {
+  total: number;
+  /** Index matches `os.cpus()` order. Core count is `cores.length`. */
+  cores: number[];
+  model: string;
+}
+
+export interface MemoryMetrics {
+  totalMB: number;
+  usedMB: number;
+  availableMB: number;
+  /** usedMB / totalMB × 100. */
+  percent: number;
+}
+
+/** Whole-machine throughput, bytes/second over the last tick. */
+export interface RateMetrics {
+  /** Disk: read. Net: received/down. */
+  inBps: number;
+  /** Disk: write. Net: sent/up. */
+  outBps: number;
+  /** False in the light tier, on a missing OS source, and on the first tick
+   *  (no baseline). The UI must render "n/a", never 0 B/s. */
+  available: boolean;
+}
+
+export interface GpuMetrics {
+  name: string;
+  /** 0-100. */
+  utilPercent: number;
+  vramUsedMB: number;
+  vramTotalMB: number;
+}
+
+export interface SystemMetrics {
+  cpu: CpuMetrics;
+  mem: MemoryMetrics;
+  /** light tier: available:false. */
+  disk: RateMetrics;
+  /** light tier: available:false. */
+  net: RateMetrics;
+  /** light tier: []. Empty also when no NVIDIA GPU — the UI hides the card. */
+  gpus: GpuMetrics[];
+  /** light tier: 0. Processes the collector could see this tick. */
+  processCount: number;
+}
+
+export interface ProcessInfo {
+  pid: number;
+  /** -1 when the parent is unknown. */
+  ppid: number;
+  /** Executable basename WITHOUT extension, lowercased for comparison by the
+   *  guard: "explorer", "node", "chrome". Never "explorer.exe". */
+  name: string;
+  /** Command line, secrets redacted then truncated to 160 chars. Falls back to
+   *  `name` when unreadable (Windows: ~53% of rows are unreadable unelevated). */
+  command: string;
+  /** Instantaneous machine-normalised CPU%: deltaCpuMs / (wallMs × coreCount) × 100.
+   *  Always 0 on a process's first observed tick. */
+  cpu: number;
+  ramMB: number;
+  /** Epoch ms UTC; 0 when unknown. Identity guard for CPU deltas, grouping and kill. */
+  startedAt: number;
+  /** PPM server, supervisor, edge forwarder, their descendants, PPM-managed
+   *  cloudflared. Drives the "PPM only" filter — NOT a safety mechanism. */
+  ppm: boolean;
+  /** The server will refuse to kill it. Produced by the same guard the route
+   *  enforces, so the disabled button and the 403 cannot disagree. */
+  protected: boolean;
+  /** Per-process throughput/GPU. `undefined` means this OS or tier cannot
+   *  measure it — the UI must render "—", never 0. All are omitted from the
+   *  JSON frame when undefined, so an unsupported host pays nothing.
+   *
+   *  Bytes/second, delta of a cumulative OS counter over the tick's wall
+   *  interval; 0 on a process's first observed tick, like `cpu`. */
+  diskReadBps?: number;
+  diskWriteBps?: number;
+  /** Sum of this pid's GPU engine busy percentages (3D + Copy + Video + …),
+   *  clamped 0-100. Rate over the counter's OWN clock, not the wall tick. */
+  gpuPct?: number;
+  /** Dedicated (on-card) VRAM in MB attributed to this pid. */
+  gpuMemMB?: number;
+  /** macOS only: per-process network has no supported source on Windows (ETW
+   *  only) or Linux (packet capture). */
+  netInBps?: number;
+  netOutBps?: number;
+}
+
+export interface ProcessGroup {
+  /** Stable across ticks: "root:<pid>" for an ancestor roll-up, "exe:<name>" for
+   *  the orphan bucket. React key and history-series key. */
+  key: string;
+  label: string;
+  /** Roll-up root pid; null for an "exe:" bucket. */
+  rootPid: number | null;
+  cpu: number;
+  ramMB: number;
+  count: number;
+  /** True when any member is PPM-owned. */
+  ppm: boolean;
+  /** Member pids, CPU-desc. Full rows are in `MetricsSnapshot.processes`. */
+  pids: number[];
+  /** Roll-ups of the optional per-process columns, with the same optionality:
+   *  the sum over the members that HAVE a value, and `undefined` when no member
+   *  has one — so "nothing measurable" never renders as a hard 0. */
+  diskReadBps?: number;
+  diskWriteBps?: number;
+  /** Summed engine busy across members, clamped 0-100. */
+  gpuPct?: number;
+  gpuMemMB?: number;
+  netInBps?: number;
+  netOutBps?: number;
+}
+
+/** Per-host availability of the optional process columns. A column is offered
+ *  once the collector has actually produced a value for it on this host. */
+export interface ProcessColumnAvailability {
+  disk: boolean;
+  gpu: boolean;
+  net: boolean;
+}
+
+/** CLIENT-SIDE history element: aggregates only. There is no server ring. */
+export interface MetricsHistoryPoint {
+  ts: number;
+  system: SystemMetrics;
+  /** group.key → roll-up, so group sparklines survive across ticks. */
+  groups: Record<string, { cpu: number; ramMB: number }>;
+}
+
+export interface MetricsSnapshot {
+  ts: number;
+  platform: MetricsPlatform;
+  tier: MetricsTier;
+  /** Poll cadence in ms for THIS tier, so the client can label chart axes. */
+  intervalMs: number;
+  system: SystemMetrics;
+  /** Empty in the light tier. */
+  groups: ProcessGroup[];
+  /** Empty in the light tier. Latest snapshot only — never retained. */
+  processes: ProcessInfo[];
+  /** Which optional process columns THIS host can actually fill, so the UI can
+   *  hide the unavailable ones instead of showing a wall of "—". All false in
+   *  the light tier (no process rows at all). */
+  processColumns: ProcessColumnAvailability;
+  /** DEPRECATED, remove one release after this ships. Mirrors cpu/mem/count so a
+   *  PWA-cached old bundle's `resource-status-bar.tsx:41` destructure of
+   *  `latest.total` does not TypeError on every page. */
+  total: { cpu: number; ramMB: number; processCount: number };
+  /** Non-fatal collector failures, human readable. Rendered in the UI. */
+  warnings: string[];
+}
+
+export interface KillProcessRequest {
+  pid: number;
+  /** Identity guard: the `startedAt` the client saw. The server re-queries the
+   *  live process and returns 409 on mismatch, so a recycled pid cannot be
+   *  killed against a stale name. */
+  startedAt: number;
+  /** Kill descendants too (`taskkill /T` on Windows, collected tree on POSIX). */
+  tree?: boolean;
+}
+
+export interface KillProcessResult {
+  pid: number;
+  tree: boolean;
+  method: "taskkill" | "signal";
+  /** Pids actually signalled. On win32 with tree:true this is always `[pid]` —
+   *  `taskkill /T` walks and kills the tree inside the OS and reports no member
+   *  list, so the real count is unknowable from here. */
+  killed: number[];
+}
+
+/** Sort columns offered by the process table. `disk` sorts by read + write,
+ *  `net` by in + out; rows without a value sort last. */
+export type SortKey = "cpu" | "ram" | "disk" | "gpu" | "gpuMem" | "net" | "name" | null;
+export type SortDir = "asc" | "desc";
+
+/** Full-tier poll cadence. A Windows tick (one CIM round trip) costs ~175-200 ms,
+ *  so 2 s leaves an order of magnitude of headroom before ticks would overlap. */
+export const METRICS_INTERVAL_MS = 2000;
+/** Light-tier poll cadence — node:os only, costs <0.1 ms. */
+export const METRICS_LIGHT_INTERVAL_MS = 5000;
+/** Client history cap: 30 min at METRICS_INTERVAL_MS. */
+export const METRICS_HISTORY_MAX = 900;
+/** Subscriber lease: client pings every 10 s, server reaps after 30 s silence. */
+export const METRICS_PING_INTERVAL_MS = 10_000;
+export const METRICS_LEASE_TIMEOUT_MS = 30_000;

package/src/web/components/editor/video-player/video-player.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { rawMediaUrl, transcodeMediaUrl } from "@/lib/media-url";
+import { newMediaSessionId, rawMediaUrl, stopTranscode, transcodeMediaUrl } from "@/lib/media-url";
 import { VideoPlayerControls } from "./video-player-controls";
 import { SPEED_STEPS } from "./video-settings-menu";
 import { useVideoKeyboardShortcuts, type VideoPlayerActions } from "./use-video-keyboard-shortcuts";
@@ -30,7 +30,13 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
   const rootRef = useRef<HTMLDivElement>(null);
   const stageRef = useRef<HTMLDivElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
-  const resumeRef = useRef(true);
+  // Whether the user wants playback. Read after a transcode restart to decide between
+  // resuming and staying paused; derived from user actions, not `video.paused`, because
+  // the element reports paused while a fresh stream is still loading.
+  const wantPlayRef = useRef(true);
+  // One id per mounted player: the server replaces (kills) this player's previous
+  // ffmpeg job on every seek and stops it when told the player is gone.
+  const [sessionId] = useState(newMediaSessionId);
 
   const [start, setStart] = useState(0);
   const [elapsed, setElapsed] = useState(0);
@@ -47,7 +53,7 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
   const [error, setError] = useState<string | null>(null);
 
   const isTranscode = mode === "transcode";
-  const src = isTranscode ? transcodeMediaUrl(filePath, projectName, start) : rawMediaUrl(filePath, projectName);
+  const src = isTranscode ? transcodeMediaUrl(filePath, projectName, start, sessionId) : rawMediaUrl(filePath, projectName);
   const duration = isTranscode ? probeDuration : nativeDuration;
   const position = scrub ?? (isTranscode ? start + elapsed : elapsed);
 
@@ -59,14 +65,26 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
   useEffect(() => { const v = videoRef.current; if (v) { v.volume = volume; v.muted = muted; } }, [volume, muted]);
   useEffect(() => { const v = videoRef.current; if (v) v.playbackRate = speed; }, [speed, src]);
 
-  // A detached <video> keeps its network fetch alive until garbage-collected, which
-  // would leave ffmpeg encoding for nobody. Emptying the source aborts the load now.
-  // `isConnected` guards StrictMode's simulated unmount, where the element stays in the
-  // DOM and React would not re-apply the src attribute afterwards.
+  // Leaving the player must stop its ffmpeg job explicitly: a detached <video> keeps its
+  // fetch alive until garbage-collected, and a proxy such as Cloudflare Tunnel keeps the
+  // origin request open even after the browser has dropped it. Emptying the source aborts
+  // the local load; the DELETE tells the server. `isConnected` guards StrictMode's
+  // simulated unmount, where the element stays in the DOM and React would not re-apply
+  // the src attribute afterwards. `pagehide` covers reload/close, where cleanups never run.
   useEffect(() => {
     const v = videoRef.current;
-    return () => { if (v && !v.isConnected) { v.pause(); v.removeAttribute("src"); v.load(); } };
-  }, []);
+    const stop = () => { if (isTranscode) stopTranscode(filePath, projectName, sessionId); };
+    window.addEventListener("pagehide", stop);
+    return () => {
+      window.removeEventListener("pagehide", stop);
+      if (v && !v.isConnected) {
+        v.pause();
+        v.removeAttribute("src");
+        v.load();
+        stop();
+      }
+    };
+  }, [filePath, projectName, isTranscode, sessionId]);
 
   useEffect(() => {
     const onFs = () => setFullscreen(document.fullscreenElement === rootRef.current);
@@ -90,12 +108,17 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
     if (!isTranscode) { if (v) v.currentTime = clamped; return; }
     // Restarting ffmpeg for a sub-second nudge is wasteful.
     if (Math.abs(clamped - (start + (v?.currentTime ?? 0))) < 0.5) return;
-    resumeRef.current = !(v?.paused ?? false);
     setStart(clamped);
   }, [duration, isTranscode, start]);
 
   const actions = useMemo<VideoPlayerActions>(() => ({
-    togglePlay: () => { const v = videoRef.current; if (!v) return; if (v.paused) void v.play().catch(() => {}); else v.pause(); },
+    togglePlay: () => {
+      const v = videoRef.current;
+      if (!v) return;
+      wantPlayRef.current = v.paused;
+      if (v.paused) void v.play().catch(() => {});
+      else v.pause();
+    },
     seekBy: (d) => seekTo((isTranscode ? start : 0) + (videoRef.current?.currentTime ?? 0) + d),
     toggleFullscreen: () => {
       if (document.fullscreenElement) void document.exitFullscreen();
@@ -113,14 +136,8 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
   const onKeyDown = useVideoKeyboardShortcuts(actions);
   const fitted = fittedMaxSize(transform, box);
 
-  if (error) {
-    return (
-      <div className="flex flex-col items-center justify-center h-full gap-3 text-text-secondary p-4 text-center">
-        <p className="text-sm">{error}</p>
-        <Button variant="outline" size="sm" onClick={() => { setError(null); setStart((s) => s + 0.001); }}>Retry</Button>
-      </div>
-    );
-  }
+  // Retry re-requests the same position; the nudge makes the URL differ so the element reloads.
+  const retry = () => { setError(null); setStart((s) => s + 0.001); };
 
   return (
     <div
@@ -144,10 +161,13 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
           preload={isTranscode ? "auto" : "metadata"}
           style={{ transform: toCssTransform(transform), maxWidth: fitted.maxWidth || undefined, maxHeight: fitted.maxHeight || undefined }}
           onLoadedMetadata={(e) => {
+            // Re-apply user settings: a fresh load (seek restart, retry) resets the element.
             const v = e.currentTarget;
             v.playbackRate = speed;
+            v.volume = volume;
+            v.muted = muted;
             if (!isTranscode && Number.isFinite(v.duration)) setNativeDuration(v.duration);
-            if (isTranscode && !resumeRef.current) v.pause();
+            if (isTranscode && !wantPlayRef.current) v.pause();
           }}
           onPlay={() => setPlaying(true)}
           onPause={() => setPlaying(false)}
@@ -155,13 +175,25 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
           onPlaying={() => setWaiting(false)}
           onCanPlay={() => setWaiting(false)}
           onTimeUpdate={(e) => setElapsed(e.currentTarget.currentTime)}
-          onEnded={() => setPlaying(false)}
+          onEnded={() => { setPlaying(false); wantPlayRef.current = false; }}
           onError={() => {
             if (!isTranscode) onNativeError?.();
             else setError("Transcoding failed. ffmpeg may have stopped or the file is corrupt.");
           }}
         />
-        {waiting && <Loader2 className="absolute size-8 animate-spin text-white/80 pointer-events-none" />}
+        {waiting && !error && <Loader2 className="absolute size-8 animate-spin text-white/80 pointer-events-none" />}
+        {/* Overlay rather than a replacement tree: the <video> stays mounted so volume,
+            mute and speed survive a retry. */}
+        {error && (
+          <div
+            className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/85 text-text-secondary p-4 text-center"
+            onClick={(e) => e.stopPropagation()}
+            onDoubleClick={(e) => e.stopPropagation()}
+          >
+            <p className="text-sm">{error}</p>
+            <Button variant="outline" size="sm" className="h-11 px-4" onClick={retry}>Retry</Button>
+          </div>
+        )}
       </div>
 
       <VideoPlayerControls

package/src/web/components/floating-window/window-content-registry.ts

@@ -22,6 +22,7 @@ export interface WindowContentProps {
 export const WINDOW_CONTENT: Record<WindowKind, LazyExoticComponent<ComponentType<WindowContentProps>>> = {
   explorer: lazy(() => import("@/components/os-explorer/explorer-window-content")),
   "team-member": lazy(() => import("@/components/chat/team-member-window-content")),
+  "system-monitor": lazy(() => import("@/components/system/system-monitor-window-content")),
 };
 
 /**
@@ -46,6 +47,7 @@ export function windowTitle(kind: WindowKind, payload?: Record<string, unknown>)
     const member = payload?.memberName;
     return typeof member === "string" && member ? `Session — ${member}` : "Team member";
   }
+  if (kind === "system-monitor") return "System Monitor";
   const path = payload?.path;
   if (kind === "explorer" && typeof path === "string" && path) {
     const segments = path.split(/[\\/]/).filter(Boolean);

package/src/web/components/floating-window/window-persistence.ts

@@ -20,7 +20,7 @@ export interface PersistedWindow {
   payload?: Record<string, unknown>;
 }
 
-const KINDS: WindowKind[] = ["explorer"];
+const KINDS: WindowKind[] = ["explorer", "system-monitor"];
 const STATES: WindowVisualState[] = ["normal", "maximized", "minimized"];
 
 function isRect(v: unknown): v is Rect {

package/src/web/components/floating-window/window-store-types.ts

@@ -3,7 +3,7 @@
 import type { Rect } from "./window-geometry";
 
 /** Content families the layer can host. The registry maps each kind to its body component. */
-export type WindowKind = "explorer" | "team-member";
+export type WindowKind = "explorer" | "team-member" | "system-monitor";
 
 export type WindowVisualState = "normal" | "maximized" | "minimized";
 

package/src/web/components/system/build-kill-request.ts

@@ -0,0 +1,9 @@
+import type { KillProcessRequest, ProcessInfo } from "../../../types/system-metrics";
+
+/** Builds the kill request body from a process row's own identity fields — pulled out
+ *  of the dialog's confirm handler so the payload shape is unit-testable without
+ *  mounting the dialog. `startedAt` travels unchanged so the server can 409 a pid the
+ *  OS recycled between the snapshot and the click. */
+export function buildKillRequest(proc: ProcessInfo, tree: boolean): KillProcessRequest {
+  return { pid: proc.pid, startedAt: proc.startedAt, tree };
+}

package/src/web/components/system/chart-scale.ts

@@ -0,0 +1,28 @@
+/** Shared scale resolution for the canvas charts: a fixed ceiling (percentage axes)
+ *  or autoscale to the max of the visible window (byte-rate axes) — pulled out of
+ *  `sparkline-canvas.tsx`/`metric-chart-canvas.tsx` so it is unit-testable without a
+ *  canvas context. This is the fix for the bug where a 3% CPU reading rendered as a
+ *  full-height sparkline: the old code always did `Math.max(...data, 1)`. */
+export function resolveScaleMax(data: number[], maxValue?: number): number {
+  if (maxValue !== undefined) return maxValue;
+  return Math.max(...data, 1);
+}
+
+/** The minimal surface of `CSSStyleDeclaration` this needs — lets a test pass a plain
+ *  fake object instead of a real computed style. */
+export interface ComputedColorSource {
+  getPropertyValue(property: string): string;
+}
+
+/** Canvas 2D's `strokeStyle`/`fillStyle` parse as a standalone CSS `<color>` — `var(...)`
+ *  is not resolvable without an element context, so assigning `"var(--color-primary)"`
+ *  directly is silently ignored and the shape draws black. Resolve once per draw call
+ *  against the canvas's own computed style (custom properties inherit from the
+ *  document, so any element's computed style works) and fall back to the original
+ *  string when it is not a `var(...)` reference or resolves to nothing. */
+export function resolveCssColor(color: string, styles: ComputedColorSource): string {
+  const match = /^var\((--[\w-]+)\)$/.exec(color.trim());
+  if (!match) return color;
+  const resolved = styles.getPropertyValue(match[1]!).trim();
+  return resolved || color;
+}

package/src/web/components/system/cpu-core-bars.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+
+function loadColor(pct: number): string {
+  if (pct > 80) return "bg-error";
+  if (pct > 50) return "bg-warning";
+  return "bg-success";
+}
+
+/** One vertical bar per core, tooltip shows the exact percentage. `min-h-11` keeps the
+ *  strip out of sub-44px touch-row territory even though nothing here is clickable —
+ *  a future click-to-isolate-core affordance should not need a layout change. */
+export function CpuCoreBars({ cores }: { cores: number[] }) {
+  return (
+    <div
+      className="flex items-end gap-0.5 min-h-11 w-full"
+      data-testid="sysmon-core-bars"
+      data-core-count={cores.length}
+    >
+      {cores.map((pct, i) => (
+        <div
+          key={i}
+          className="flex-1 h-11 flex items-end rounded-sm overflow-hidden bg-surface-hover"
+          title={`Core ${i}: ${pct.toFixed(0)}%`}
+        >
+          <div
+            className={cn("w-full transition-[height]", loadColor(pct))}
+            style={{ height: `${Math.max(2, Math.min(100, pct))}%` }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}