@hienlh/ppm 0.23.6 → 0.23.7

package/src/web/components/system/services/services-panel.tsx

@@ -0,0 +1,207 @@
+/**
+ * The Services page — Mission Center's Services tab.
+ *
+ * The two scopes are separate sections rather than one flat list: a user unit and
+ * a system unit of the same name are different units with very different
+ * consequences, and a flat list gives no way to tell them apart.
+ */
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Search } from "@/lib/icons";
+import { cn } from "@/lib/utils";
+import { runServiceAction, useServices } from "./use-services";
+import { SERVICE_FILTERS, serviceCounts, shapeServices, type ServiceFilter } from "./service-rows";
+import { ServiceRow } from "./service-row";
+import { ServicesHeader } from "./services-header";
+import { serviceGridCssVars } from "./service-columns";
+import { sortServiceRows, type ServiceSortKey } from "./service-sort";
+import { toggleSort } from "../process-table-model";
+import { resourcesFor, rollUpByUnit } from "./service-resources";
+import { ServiceDetailsSheet } from "./service-details-sheet";
+import {
+  ServiceActionConfirm, needsConfirm, type PendingServiceAction,
+} from "./service-action-confirm";
+import type { MetricsSnapshot, SortDir } from "../../../../types/system-metrics";
+import type { ServiceAction, ServiceInfo, ServiceScope } from "../../../../types/system-services";
+
+const SCOPES: readonly ServiceScope[] = ["system", "user"];
+const SCOPE_LABELS: Record<ServiceScope, string> = { system: "System", user: "User" };
+const FILTER_LABELS: Record<ServiceFilter, string> = {
+  all: "All", running: "Running", failed: "Failed", enabled: "Enabled",
+};
+
+/** `metrics` is the live 2 s stream the Processes tab is already receiving. The
+ *  unit list itself comes from `systemctl` on a separate 3 s poll, so the two
+ *  arrive independently and a row simply shows dashes until the first full tick
+ *  carrying process rows lands. */
+export function ServicesPanel({ active, metrics }: { active: boolean; metrics?: MetricsSnapshot | null }) {
+  const { snapshot, error, loading, refresh } = useServices(active);
+  const [scope, setScope] = useState<ServiceScope>("system");
+  const [filter, setFilter] = useState<ServiceFilter>("all");
+  const [query, setQuery] = useState("");
+  // `null` = the page's own order (failed first, then running, then by name),
+  // which the third click of a header returns to.
+  const [sortKey, setSortKey] = useState<ServiceSortKey | null>(null);
+  const [sortDir, setSortDir] = useState<SortDir>("desc");
+  const [details, setDetails] = useState<ServiceInfo | null>(null);
+  const [pending, setPending] = useState<PendingServiceAction | null>(null);
+
+  const services = snapshot?.services ?? [];
+  const shaped = useMemo(() => shapeServices(services, scope, filter, query), [services, scope, filter, query]);
+  const counts = useMemo(() => serviceCounts(services, scope), [services, scope]);
+  // The light tier carries no process rows at all, so there is nothing to sum
+  // and every row must say so rather than reading as a machine at rest.
+  const byUnit = useMemo(
+    () => (metrics?.processes.length ? rollUpByUnit(metrics.processes) : null),
+    [metrics],
+  );
+  // The roll-up is attached BEFORE sorting: the columns sort on the figures the
+  // row is showing, and those live in the metrics stream rather than on the unit.
+  const rows = useMemo(
+    () => sortServiceRows(
+      shaped.map((service) => ({ service, resources: resourcesFor(service, byUnit) })),
+      sortKey,
+      sortDir,
+    ),
+    [shaped, byUnit, sortKey, sortDir],
+  );
+
+  const onSort = useCallback((key: ServiceSortKey) => {
+    const [nextKey, nextDir] = toggleSort(sortKey, sortDir, key);
+    setSortKey(nextKey);
+    setSortDir(nextDir);
+  }, [sortKey, sortDir]);
+
+  const perform = useCallback(async ({ service, action }: PendingServiceAction) => {
+    setPending(null);
+    try {
+      await runServiceAction(service.scope, service.unit, action);
+      toast.success(`${service.unit}: ${action} done`);
+      // systemd settles asynchronously, so the next poll is what shows the new
+      // state; refreshing now just shortens the wait.
+      await refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : `Could not ${action} ${service.unit}`);
+    }
+  }, [refresh]);
+
+  const onAction = useCallback((service: ServiceInfo, action: ServiceAction) => {
+    if (needsConfirm(action)) setPending({ service, action });
+    else void perform({ service, action });
+  }, [perform]);
+
+  if (snapshot && !snapshot.supported) {
+    return (
+      <div className="p-4 text-sm text-text-subtle" data-testid="sysmon-services">
+        This host has no service manager PPM can read.
+        {snapshot.warnings.map((w, i) => (
+          <p key={i} className="mt-1 text-xs">{w}</p>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    // `@container`: the resource columns are dropped on the PANEL's own width,
+    // not the viewport's — the System Monitor is a floating window on desktop
+    // and is routinely narrower than the screen it sits on.
+    <div
+      className="h-full flex flex-col min-h-0 @container"
+      // Set once here; every row and the header inherit the four templates.
+      style={serviceGridCssVars()}
+      data-testid="sysmon-services"
+      data-row-count={rows.length}
+      data-sort-key={sortKey ?? "default"}
+      data-sort-dir={sortDir}
+    >
+      <div className="shrink-0 border-b border-border">
+        <div className="flex items-center" role="tablist">
+          {SCOPES.map((s) => (
+            <button
+              key={s}
+              type="button"
+              role="tab"
+              aria-selected={scope === s}
+              onClick={() => setScope(s)}
+              data-testid={`sysmon-services-scope-${s}`}
+              className={cn(
+                "flex-1 md:flex-none min-h-11 px-4 text-sm font-medium transition-colors",
+                scope === s
+                  ? "text-text-primary border-b-2 border-primary -mb-px"
+                  : "text-text-subtle hover:text-text-secondary",
+              )}
+            >
+              {SCOPE_LABELS[s]}
+            </button>
+          ))}
+        </div>
+        <div className="flex flex-wrap items-center gap-2 p-2">
+          <div className="relative flex-1 min-w-[140px]">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 size-3.5 text-text-subtle" />
+            <input
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search services"
+              aria-label="Search services"
+              data-testid="sysmon-service-search"
+              className="w-full min-h-11 md:min-h-8 pl-7 pr-2 text-sm rounded-md border border-border bg-transparent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </div>
+          {SERVICE_FILTERS.map((f) => (
+            <button
+              key={f}
+              type="button"
+              onClick={() => setFilter(f)}
+              aria-pressed={filter === f}
+              data-testid={`sysmon-service-filter-${f}`}
+              className={cn(
+                "min-h-11 md:min-h-8 px-3 text-xs rounded-md border transition-colors",
+                filter === f ? "border-primary bg-primary/10 text-primary" : "border-border hover:bg-surface-hover",
+              )}
+            >
+              {FILTER_LABELS[f]}
+            </button>
+          ))}
+        </div>
+        <p className="px-3 pb-2 text-[11px] text-text-subtle">
+          {counts.total} units · {counts.running} running
+          {counts.failed > 0 && <span className="text-error"> · {counts.failed} failed</span>}
+        </p>
+      </div>
+
+      {snapshot && snapshot.warnings.length > 0 && (
+        <div className="px-3 py-1.5 text-[11px] text-warning bg-warning/10 border-b border-border shrink-0">
+          {snapshot.warnings.map((w, i) => <div key={i}>{w}</div>)}
+        </div>
+      )}
+
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        <ServicesHeader sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
+        <div className="divide-y divide-border">
+          {loading && <p className="p-4 text-sm text-text-subtle">Listing units…</p>}
+          {error && <p className="p-4 text-sm text-error">{error}</p>}
+          {!loading && !error && rows.length === 0 && (
+            <p className="p-4 text-sm text-text-subtle">No units match.</p>
+          )}
+          {rows.map(({ service, resources }) => (
+            <ServiceRow
+              key={`${service.scope}:${service.unit}`}
+              service={service}
+              resources={resources}
+              onOpen={setDetails}
+              onAction={onAction}
+            />
+          ))}
+        </div>
+      </div>
+
+      <ServiceDetailsSheet target={details} onClose={() => setDetails(null)} />
+      <ServiceActionConfirm
+        pending={pending}
+        onConfirm={(p) => void perform(p)}
+        onCancel={() => setPending(null)}
+      />
+    </div>
+  );
+}

package/src/web/components/system/services/use-services.ts

@@ -0,0 +1,92 @@
+/**
+ * The Services page's data: a poll, not a stream.
+ *
+ * The list costs two `systemctl` spawns per scope, so it rides its own timer at
+ * SERVICES_POLL_INTERVAL_MS while the page is visible rather than being folded
+ * into the 2 s metrics tick — a status bar on every page must not spawn anything.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { api, getAuthToken } from "@/lib/api-client";
+import type {
+  ServiceAction, ServiceActionResult, ServiceDetails, ServicesSnapshot, ServiceScope,
+} from "../../../../types/system-services";
+import { SERVICES_POLL_INTERVAL_MS } from "../../../../types/system-services";
+
+/**
+ * `api.post` cannot add the `X-PPM-Request` header the mutating routes require
+ * (CSRF hardening for the auth-disabled configuration), so this mirrors
+ * `killProcess`: a raw fetch with the same single-Error-on-any-failure contract.
+ */
+export async function runServiceAction(
+  scope: ServiceScope,
+  unit: string,
+  action: ServiceAction,
+): Promise<ServiceActionResult> {
+  const token = getAuthToken();
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    "X-PPM-Request": "1",
+  };
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  const res = await fetch(
+    `/api/system/services/${scope}/${encodeURIComponent(unit)}/${action}`,
+    { method: "POST", headers, body: "{}" },
+  );
+  let json: { ok: boolean; data?: ServiceActionResult; error?: string };
+  try {
+    json = await res.json();
+  } catch {
+    throw new Error(res.ok ? "Empty response from server" : `Server error (HTTP ${res.status})`);
+  }
+  if (json.ok === false) throw new Error(json.error ?? `HTTP ${res.status}`);
+  return json.data as ServiceActionResult;
+}
+
+export function fetchServiceDetails(scope: ServiceScope, unit: string): Promise<ServiceDetails> {
+  return api.get<ServiceDetails>(`/api/system/services/${scope}/${encodeURIComponent(unit)}`);
+}
+
+export interface UseServicesResult {
+  snapshot: ServicesSnapshot | null;
+  error: string | null;
+  /** True only before the FIRST answer — a refresh must not blank the list. */
+  loading: boolean;
+  refresh: () => Promise<void>;
+}
+
+export function useServices(active: boolean): UseServicesResult {
+  const [snapshot, setSnapshot] = useState<ServicesSnapshot | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const inFlight = useRef(false);
+  const mounted = useRef(true);
+
+  const refresh = useCallback(async () => {
+    if (inFlight.current) return;
+    inFlight.current = true;
+    try {
+      const next = await api.get<ServicesSnapshot>("/api/system/services");
+      if (!mounted.current) return;
+      setSnapshot(next);
+      setError(null);
+    } catch (e) {
+      if (mounted.current) setError(e instanceof Error ? e.message : "Could not list services");
+    } finally {
+      inFlight.current = false;
+    }
+  }, []);
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => { mounted.current = false; };
+  }, []);
+
+  useEffect(() => {
+    if (!active) return;
+    void refresh();
+    const timer = setInterval(() => void refresh(), SERVICES_POLL_INTERVAL_MS);
+    return () => clearInterval(timer);
+  }, [active, refresh]);
+
+  return { snapshot, error, loading: snapshot === null && error === null, refresh };
+}

package/src/web/components/system/sortable-header.tsx

@@ -1,6 +1,6 @@
 import { ArrowUp, ArrowDown } from "@/lib/icons";
 import { cn } from "@/lib/utils";
-import type { SortDir, SortKey } from "../../../types/system-metrics";
+import type { SortDir } from "../../../types/system-metrics";
 import type { ResizableColumnKey } from "./process-columns-grid";
 
 export interface ColumnResizeHandlers {
@@ -8,12 +8,16 @@ export interface ColumnResizeHandlers {
   onResizeReset: (key: ResizableColumnKey) => void;
 }
 
-/** Sortable column header shared by the process table toolbar. Renders as a
- *  `columnheader` `<div>`, not a `<th>` — the parent row is a CSS-grid
+/** Sortable column header shared by the process table and the services table.
+ *  Renders as a `columnheader` `<div>`, not a `<th>` — the parent row is a CSS-grid
  *  `<div role="row">`, and a `<th>` inside a non-table ancestor both triggers React's
  *  DOM-nesting warning and makes `aria-sort` meaningless to assistive tech outside
- *  an actual table. */
-export function SortableHeader({
+ *  an actual table.
+ *
+ *  Generic over the field name because the two tables do not sort on the same
+ *  set: the services table has a `pid` column, which is a systemd property and
+ *  not one of `SortKey`'s metrics. */
+export function SortableHeader<F extends string>({
   label,
   field,
   activeKey,
@@ -26,10 +30,11 @@ export function SortableHeader({
   resize,
 }: {
   label: string;
-  field: Exclude<SortKey, null>;
-  activeKey: SortKey;
+  field: F;
+  /** `null` = nothing is sorted by, i.e. the table's own default order. */
+  activeKey: F | null;
   activeDir: SortDir;
-  onClick: (field: Exclude<SortKey, null>) => void;
+  onClick: (field: F) => void;
   /** Text/justify alignment — the "Process" column is left-aligned over the name
    *  cell, every numeric column stays right-aligned. */
   align?: "left" | "right";

package/src/web/components/system/sysmon-preferences.tsx

@@ -0,0 +1,85 @@
+/**
+ * System Monitor preferences — Mission Center's Preferences dialog, reduced to
+ * the settings PPM can actually honour.
+ *
+ * Deliberately NOT here: Mission Center's update interval and graph data-point
+ * count. PPM's tick rate is the server's (2 s full, 5 s light) and is shared by
+ * every subscriber, so a per-client control over it would either do nothing or
+ * change the rate for somebody else's window.
+ *
+ * Rendered inline under the tab strip rather than in a popover: it is two rows,
+ * it has to work identically on a phone, and an inline panel needs no portal, no
+ * placement and no separate mobile sheet.
+ */
+import { useSettingsStore } from "@/stores/settings-store";
+import { cn } from "@/lib/utils";
+import type { TempUnit } from "@/lib/temperature";
+
+const UNITS: { id: TempUnit; label: string }[] = [
+  { id: "c", label: "°C" },
+  { id: "f", label: "°F" },
+];
+
+export function SysMonPreferences() {
+  const tempUnit = useSettingsStore((s) => s.sysmonTempUnit);
+  const setTempUnit = useSettingsStore((s) => s.setSysmonTempUnit);
+  const kernelTimes = useSettingsStore((s) => s.sysmonKernelTimes);
+  const setKernelTimes = useSettingsStore((s) => s.setSysmonKernelTimes);
+
+  return (
+    <div
+      className="shrink-0 border-b border-border bg-surface-hover/30 px-3 py-2 space-y-2"
+      data-testid="sysmon-preferences"
+    >
+      <div className="flex items-center justify-between gap-3">
+        <span className="text-xs text-text-secondary">Temperature unit</span>
+        <div className="flex items-center gap-1" role="radiogroup" aria-label="Temperature unit">
+          {UNITS.map((u) => (
+            <button
+              key={u.id}
+              type="button"
+              role="radio"
+              aria-checked={tempUnit === u.id}
+              onClick={() => setTempUnit(u.id)}
+              data-testid={`sysmon-pref-temp-${u.id}`}
+              className={cn(
+                "min-h-11 md:min-h-8 px-3 text-xs rounded-md border transition-colors",
+                tempUnit === u.id
+                  ? "border-primary bg-primary/10 text-primary"
+                  : "border-border hover:bg-surface-hover",
+              )}
+            >
+              {u.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between gap-3">
+        <label htmlFor="sysmon-pref-kernel" className="text-xs text-text-secondary">
+          Show kernel times on the CPU graph
+        </label>
+        <button
+          id="sysmon-pref-kernel"
+          type="button"
+          role="switch"
+          aria-checked={kernelTimes}
+          onClick={() => setKernelTimes(!kernelTimes)}
+          data-testid="sysmon-pref-kernel"
+          className={cn(
+            "min-h-11 md:min-h-8 px-3 text-xs rounded-md border transition-colors",
+            kernelTimes
+              ? "border-primary bg-primary/10 text-primary"
+              : "border-border hover:bg-surface-hover",
+          )}
+        >
+          {kernelTimes ? "On" : "Off"}
+        </button>
+      </div>
+
+      <p className="text-[11px] text-text-subtle">
+        These apply to this device only — the machine being watched is the same for everyone.
+      </p>
+    </div>
+  );
+}

package/src/web/components/system/system-monitor-body.tsx

@@ -1,21 +1,50 @@
 /**
  * Shared shell for the System Monitor: connection indicator, warning strip, and the
- * Overview/Processes sub-tabs. Rendered identically by the desktop window and the
- * mobile tab, so this file and the panels beneath it are written once for both hosts.
+ * sub-tabs. Rendered identically by the desktop window and the mobile tab, so this
+ * file and the panels beneath it are written once for both hosts.
+ *
+ * The five tabs follow Mission Center's own division — Performance, Apps,
+ * Processes, Services — with PPM's existing Overview kept as the default, because
+ * a one-screen summary is what most opens of this window are for.
  */
 import { lazy, memo, Suspense, useState } from "react";
-import { Wifi, WifiOff } from "@/lib/icons";
+import { Settings, Wifi, WifiOff } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { useResourceMonitor } from "@/hooks/use-resource-monitor";
+import { SysMonPreferences } from "./sysmon-preferences";
 
 const OverviewPanel = lazy(() =>
   import("./overview-panel").then((m) => ({ default: m.OverviewPanel })),
 );
+const PerformancePanel = lazy(() =>
+  import("./performance/performance-panel").then((m) => ({ default: m.PerformancePanel })),
+);
+const AppsPanel = lazy(() =>
+  import("./apps/apps-panel").then((m) => ({ default: m.AppsPanel })),
+);
 const ProcessTable = lazy(() =>
   import("./process-table").then((m) => ({ default: m.ProcessTable })),
 );
+const ServicesPanel = lazy(() =>
+  import("./services/services-panel").then((m) => ({ default: m.ServicesPanel })),
+);
+
+export const SYSMON_TABS = ["overview", "performance", "apps", "processes", "services"] as const;
+export type SysMonTab = (typeof SYSMON_TABS)[number];
 
-type SysMonTab = "overview" | "processes";
+const TAB_LABELS: Record<SysMonTab, string> = {
+  overview: "Overview",
+  performance: "Performance",
+  apps: "Apps",
+  processes: "Processes",
+  services: "Services",
+};
+
+/** A tab id off a persisted window payload is untrusted the same way one off the
+ *  wire is — an unknown value falls back rather than rendering nothing. */
+export function parseSysMonTab(value: unknown): SysMonTab {
+  return SYSMON_TABS.includes(value as SysMonTab) ? (value as SysMonTab) : "overview";
+}
 
 export interface SystemMonitorBodyProps {
   initialTab?: SysMonTab;
@@ -59,12 +88,24 @@ export const SystemMonitorBody = memo(function SystemMonitorBody({
 }: SystemMonitorBodyProps) {
   const { latest, history, isConnected, tickCount } = useResourceMonitor({ processes: true });
   const [tab, setTab] = useState<SysMonTab>(initialTab);
+  const [prefsOpen, setPrefsOpen] = useState(false);
+  // The Performance page's selected device lives here rather than in that panel,
+  // because an Overview card has to be able to set it on the way in. `null` is
+  // "nothing chosen" — the desktop sidebar falls back to its first entry and the
+  // phone shows the device list, which is what both did before.
+  const [device, setDevice] = useState<string | null>(null);
 
   const selectTab = (next: SysMonTab) => {
     setTab(next);
     onTabChange?.(next);
   };
 
+  /** An Overview card was clicked: select its device, then show Performance. */
+  const openDevice = (key: string) => {
+    setDevice(key);
+    selectTab("performance");
+  };
+
   const elapsed = latest ? Math.round((Date.now() - latest.ts) / 1000) : 0;
   const warnings = latest?.warnings ?? [];
 
@@ -88,54 +129,71 @@ export const SystemMonitorBody = memo(function SystemMonitorBody({
         </div>
       )}
 
-      {/* Sub-tab switcher */}
-      <div className="flex items-center border-b border-border shrink-0" role="tablist">
-        <button
-          type="button"
-          role="tab"
-          aria-selected={tab === "overview"}
-          data-testid="sysmon-tab-overview"
-          onClick={() => selectTab("overview")}
-          className={cn(
-            "flex-1 md:flex-none min-h-11 px-4 text-sm font-medium transition-colors",
-            tab === "overview"
-              ? "text-text-primary border-b-2 border-primary -mb-px"
-              : "text-text-subtle hover:text-text-secondary",
-          )}
-        >
-          Overview
-        </button>
-        <button
-          type="button"
-          role="tab"
-          aria-selected={tab === "processes"}
-          data-testid="sysmon-tab-processes"
-          onClick={() => selectTab("processes")}
-          className={cn(
-            "flex-1 md:flex-none min-h-11 px-4 text-sm font-medium transition-colors",
-            tab === "processes"
-              ? "text-text-primary border-b-2 border-primary -mb-px"
-              : "text-text-subtle hover:text-text-secondary",
-          )}
-        >
-          Processes
-        </button>
-        {variant === "window" && (
-          <div className="ml-auto pr-3">
+      {/* Sub-tab switcher. Five tabs no longer fit a phone, so the strip scrolls
+          sideways rather than wrapping to a second row that would eat the list. */}
+      <div className="flex items-center border-b border-border shrink-0 overflow-x-auto" role="tablist">
+        {SYSMON_TABS.map((id) => (
+          <button
+            key={id}
+            type="button"
+            role="tab"
+            aria-selected={tab === id}
+            data-testid={`sysmon-tab-${id}`}
+            onClick={() => selectTab(id)}
+            className={cn(
+              "shrink-0 min-h-11 px-4 text-sm font-medium transition-colors",
+              tab === id
+                ? "text-text-primary border-b-2 border-primary -mb-px"
+                : "text-text-subtle hover:text-text-secondary",
+            )}
+          >
+            {TAB_LABELS[id]}
+          </button>
+        ))}
+        <div className="ml-auto flex items-center gap-2 pl-3 pr-1 shrink-0">
+          {variant === "window" && (
             <ConnectionIndicator isConnected={isConnected} elapsed={elapsed} tickCount={tickCount} />
-          </div>
-        )}
+          )}
+          <button
+            type="button"
+            aria-label="System Monitor preferences"
+            aria-expanded={prefsOpen}
+            onClick={() => setPrefsOpen((open) => !open)}
+            data-testid="sysmon-prefs-toggle"
+            className={cn(
+              "flex items-center justify-center size-11 md:size-8 rounded transition-colors",
+              prefsOpen ? "text-primary bg-primary/10" : "text-text-subtle hover:text-text-secondary hover:bg-surface-hover",
+            )}
+          >
+            <Settings className="size-4" />
+          </button>
+        </div>
       </div>
 
-      {/* Body — scrolls internally, never the page */}
+      {prefsOpen && <SysMonPreferences />}
+
+      {/* Body — scrolls internally, never the page. Services is the one tab that
+          does not wait on `latest`: it has its own endpoint and would otherwise be
+          blank on a host where the metrics stream is the thing that is broken. */}
       <div className="flex-1 min-h-0 overflow-y-auto">
         <Suspense fallback={<div className="p-4 text-xs text-text-subtle">Loading…</div>}>
-          {!latest ? (
+          {tab === "services" ? (
+            <ServicesPanel active metrics={latest} />
+          ) : !latest ? (
             <div className="flex items-center justify-center h-full text-text-subtle text-sm p-4">
               {isConnected ? "Waiting for data…" : "Connecting to resource monitor…"}
             </div>
           ) : tab === "overview" ? (
-            <OverviewPanel system={latest.system} history={history} />
+            <OverviewPanel system={latest.system} history={history} onOpenDevice={openDevice} />
+          ) : tab === "performance" ? (
+            <PerformancePanel
+              system={latest.system}
+              history={history}
+              device={device}
+              onDeviceChange={setDevice}
+            />
+          ) : tab === "apps" ? (
+            <AppsPanel snapshot={latest} />
           ) : (
             <ProcessTable snapshot={latest} />
           )}

package/src/web/components/system/system-monitor-window-content.tsx

@@ -2,15 +2,14 @@
  *  window's payload so a reload restores it. */
 import { useWindowStore } from "@/components/floating-window/window-store";
 import type { WindowContentProps } from "@/components/floating-window/window-content-registry";
-import { SystemMonitorBody } from "./system-monitor-body";
+import { SystemMonitorBody, parseSysMonTab } from "./system-monitor-body";
 
 export default function SystemMonitorWindowContent({ id, payload }: WindowContentProps) {
   const setPayload = useWindowStore((s) => s.setPayload);
-  const initialTab = payload?.tab === "processes" ? "processes" : "overview";
 
   return (
     <SystemMonitorBody
-      initialTab={initialTab}
+      initialTab={parseSysMonTab(payload?.tab)}
       onTabChange={(tab) => setPayload(id, { tab })}
       variant="window"
     />