@hienlh/ppm 0.23.6 → 0.23.7

package/src/web/components/settings/voice-settings-section.tsx

@@ -0,0 +1,283 @@
+/**
+ * Voice Input settings: which engine the chat mic uses, and the install button
+ * for the one that runs on the host.
+ *
+ * "Whisper on this host" only becomes selectable once it is actually installed
+ * — offering an engine that answers 409 would be a setting that silently does
+ * nothing. Until then this pane is the install screen for it.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { Mic, Loader2, Download, Trash2, Check } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { api } from "@/lib/api-client";
+import { cn } from "@/lib/utils";
+import { useSettingsStore, type VoiceEngine } from "@/stores/settings-store";
+
+interface StatusModel {
+  id: string;
+  label: string;
+  note: string;
+  bytes: number;
+}
+
+interface InstallJob {
+  modelId: string;
+  phase: "binary" | "model" | "vad" | "verify";
+  receivedBytes: number;
+  totalBytes: number;
+  done: boolean;
+  error: string | null;
+}
+
+interface SpeechStatus {
+  installable: boolean;
+  installHint: string | null;
+  binary: { path: string; source: "bundled" | "system" } | null;
+  version: string;
+  model: StatusModel | null;
+  ready: boolean;
+  models: StatusModel[];
+  install: InstallJob | null;
+}
+
+const PHASE_LABEL: Record<InstallJob["phase"], string> = {
+  binary: "Downloading whisper.cpp",
+  model: "Downloading the model",
+  vad: "Downloading the voice detector",
+  verify: "Checking it runs here",
+};
+
+const mb = (bytes: number) => `${Math.round(bytes / 1e6)} MB`;
+
+export function VoiceSettingsSection() {
+  const voiceEngine = useSettingsStore((s) => s.voiceEngine);
+  const setVoiceEngine = useSettingsStore((s) => s.setVoiceEngine);
+
+  const [status, setStatus] = useState<SpeechStatus | null>(null);
+  const [selectedModel, setSelectedModel] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const pollRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      const next = await api.get<SpeechStatus>("/api/speech/status");
+      setStatus(next);
+      setSelectedModel((current) => current ?? next.model?.id ?? next.models.at(-1)?.id ?? null);
+    } catch {
+      // A status that cannot be read leaves the pane on "not installed", which
+      // is what the user can act on anyway.
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  // Poll only while an install is running — 600 MB takes a while and the phase
+  // and byte count are the only sign that anything is happening.
+  const installing = !!status?.install && !status.install.done;
+  useEffect(() => {
+    if (!installing) return;
+    pollRef.current = setTimeout(() => void load(), 700);
+    return () => {
+      if (pollRef.current) clearTimeout(pollRef.current);
+    };
+  }, [installing, status, load]);
+
+  // An engine that was removed must not stay selected.
+  useEffect(() => {
+    if (status && !status.ready && voiceEngine === "whisper") setVoiceEngine("browser");
+  }, [status, voiceEngine, setVoiceEngine]);
+
+  const install = async () => {
+    if (!selectedModel) return;
+    setBusy(true);
+    try {
+      await api.post("/api/speech/install", { model: selectedModel });
+      await load();
+    } catch (e) {
+      toast.error("Could not start the install", { description: e instanceof Error ? e.message : String(e) });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const uninstall = async () => {
+    setBusy(true);
+    try {
+      await api.post("/api/speech/uninstall");
+      setVoiceEngine("browser");
+      await load();
+    } catch (e) {
+      toast.error("Could not remove Whisper", { description: e instanceof Error ? e.message : String(e) });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const job = status?.install ?? null;
+  const percent = job && job.totalBytes > 0 ? Math.round((job.receivedBytes / job.totalBytes) * 100) : null;
+  const insecure = typeof window !== "undefined" && !window.isSecureContext;
+
+  return (
+    <div className="space-y-6">
+      <section className="space-y-3">
+        <div>
+          <h3 className="text-sm font-medium">Speech to text</h3>
+          <p className="text-xs text-muted-foreground">
+            What the mic button in the chat box uses. This device only.
+          </p>
+        </div>
+        <div className="flex flex-col sm:flex-row gap-2">
+          <EngineOption
+            label="Browser"
+            note="Text appears as you speak. Chrome, Edge and Safari only — the audio goes to their servers."
+            value="browser"
+            current={voiceEngine}
+            onChange={setVoiceEngine}
+          />
+          {status?.ready && (
+            <EngineOption
+              label="Whisper on this host"
+              note="Works in any browser and the audio never leaves your machine. Text arrives when you stop talking."
+              value="whisper"
+              current={voiceEngine}
+              onChange={setVoiceEngine}
+            />
+          )}
+        </div>
+        {insecure && (
+          <p className="text-xs text-warning">
+            This page is on plain HTTP, where browsers block the microphone entirely. Open PPM over HTTPS or on
+            localhost to use either engine.
+          </p>
+        )}
+      </section>
+
+      <Separator />
+
+      <section className="space-y-3">
+        <div>
+          <h3 className="text-sm font-medium">Whisper on this host</h3>
+          <p className="text-xs text-muted-foreground">
+            {status?.ready
+              ? `Installed — whisper.cpp ${status.version}, model ${status.model?.label}.`
+              : "Runs speech to text on the machine PPM is installed on. Nothing is sent to a cloud service."}
+          </p>
+        </div>
+
+        {status && !status.installable && (
+          <p className="text-xs text-muted-foreground">
+            There is no prebuilt whisper.cpp for this platform. Install it yourself and PPM will find it:{" "}
+            <code className="rounded bg-muted px-1 py-0.5">{status.installHint ?? "whisper-cli on PATH"}</code>
+          </p>
+        )}
+
+        {job && !job.done && (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <Loader2 className="size-3.5 animate-spin" />
+              <span>
+                {PHASE_LABEL[job.phase]}
+                {percent === null ? "…" : ` — ${percent}%`}
+              </span>
+            </div>
+            <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+              <div className="h-full bg-primary transition-[width]" style={{ width: `${percent ?? 0}%` }} />
+            </div>
+          </div>
+        )}
+
+        {job?.error && <p className="text-xs text-error">{job.error}</p>}
+
+        {status?.installable && (
+          <>
+            <div className="space-y-2">
+              {status.models.map((model) => {
+                const active = selectedModel === model.id;
+                const installed = status.model?.id === model.id;
+                return (
+                  <button
+                    key={model.id}
+                    type="button"
+                    onClick={() => setSelectedModel(model.id)}
+                    className={cn(
+                      "w-full rounded-lg border px-4 py-3 text-left transition-colors",
+                      active ? "border-primary ring-2 ring-primary" : "border-border hover:bg-muted/50",
+                    )}
+                  >
+                    <div className="flex items-center justify-between gap-3">
+                      <span className="text-sm font-medium">{model.label}</span>
+                      <span className="flex items-center gap-2 text-xs text-muted-foreground">
+                        {installed && <Check className="size-3.5 text-success" />}
+                        {mb(model.bytes)}
+                      </span>
+                    </div>
+                    <p className="text-xs text-muted-foreground">{model.note}</p>
+                  </button>
+                );
+              })}
+            </div>
+
+            <div className="flex flex-col sm:flex-row gap-2">
+              <Button
+                onClick={install}
+                disabled={busy || installing || !selectedModel || status.model?.id === selectedModel}
+                className="flex-1 gap-2 cursor-pointer"
+              >
+                <Download className="size-4" />
+                {status.model
+                  ? status.model.id === selectedModel
+                    ? "Installed"
+                    : `Switch to ${status.models.find((m) => m.id === selectedModel)?.label}`
+                  : "Install"}
+              </Button>
+              {(status.model || status.binary?.source === "bundled") && (
+                <Button
+                  variant="outline"
+                  onClick={uninstall}
+                  disabled={busy || installing}
+                  className="gap-2 cursor-pointer text-error"
+                >
+                  <Trash2 className="size-4" />
+                  Remove
+                </Button>
+              )}
+            </div>
+          </>
+        )}
+      </section>
+    </div>
+  );
+}
+
+function EngineOption({
+  label, note, value, current, onChange,
+}: {
+  label: string;
+  note: string;
+  value: VoiceEngine;
+  current: VoiceEngine;
+  onChange: (engine: VoiceEngine) => void;
+}) {
+  const active = current === value;
+  return (
+    <button
+      type="button"
+      onClick={() => onChange(value)}
+      className={cn(
+        "flex-1 rounded-lg border px-4 py-3 text-left transition-colors",
+        active ? "border-primary ring-2 ring-primary" : "border-border hover:bg-muted/50",
+      )}
+    >
+      <span className="flex items-center gap-2 text-sm font-medium">
+        <Mic className="size-4" />
+        {label}
+      </span>
+      <p className="mt-1 text-xs text-muted-foreground">{note}</p>
+    </button>
+  );
+}

package/src/web/components/system/apps/app-row.tsx

@@ -0,0 +1,110 @@
+/**
+ * One application in the Apps list.
+ *
+ * The icon is fetched from `/api/system/app-icon/<id>`, which resolves the app's
+ * own desktop entry server-side — the URL names an app, never a file. An `<img>`
+ * cannot send an Authorization header, so the token rides the query string the
+ * same way the metrics stream's does; if it still fails the row falls back to a
+ * letter tile rather than showing a broken image.
+ */
+import { useState } from "react";
+import {
+  ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger,
+} from "@/components/ui/adaptive-context-menu";
+import { getAuthToken } from "@/lib/api-client";
+import { formatRam } from "@/lib/format-bytes";
+import { formatSwapCell } from "../process-row-format";
+import { cn } from "@/lib/utils";
+import type { AppRow as AppRowData } from "./app-rows";
+
+export function appIconUrl(appId: string): string {
+  const token = getAuthToken();
+  const query = token ? `?token=${encodeURIComponent(token)}` : "";
+  return `/api/system/app-icon/${encodeURIComponent(appId)}${query}`;
+}
+
+function cpuColor(pct: number): string {
+  if (pct > 80) return "text-error";
+  if (pct > 50) return "text-warning";
+  return "text-text-secondary";
+}
+
+export interface AppRowProps {
+  app: AppRowData;
+  /** True when any of its processes is refused by the server's kill guard. */
+  endProtected: boolean;
+  onEnd: (app: AppRowData) => void;
+}
+
+export function AppRow({ app, endProtected, onEnd }: AppRowProps) {
+  const [iconFailed, setIconFailed] = useState(false);
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div className="select-none">
+          <div
+            className="w-full min-h-11 px-3 py-2 flex items-center gap-3 hover:bg-surface-hover transition-colors"
+            data-testid="sysmon-app-row"
+            data-app-id={app.id}
+            data-cpu={app.cpu}
+          >
+            {app.icon && !iconFailed ? (
+              <img
+                src={appIconUrl(app.id)}
+                alt=""
+                width={24}
+                height={24}
+                className="size-6 shrink-0 object-contain"
+                onError={() => setIconFailed(true)}
+              />
+            ) : (
+              <span
+                aria-hidden
+                className="size-6 shrink-0 rounded bg-surface-hover grid place-items-center text-[11px] text-text-subtle"
+              >
+                {app.name.slice(0, 1).toUpperCase()}
+              </span>
+            )}
+            <span className="flex-1 min-w-0">
+              <span className="block text-sm truncate">{app.name}</span>
+              <span className="block text-[11px] text-text-subtle">
+                {app.processCount} process{app.processCount === 1 ? "" : "es"}
+              </span>
+            </span>
+            <span className={cn("w-14 text-right text-xs tabular-nums", cpuColor(app.cpu))}>
+              {app.cpu.toFixed(1)}%
+            </span>
+            <span className="w-16 text-right text-xs tabular-nums text-text-secondary">
+              {formatRam(app.ramMB)}
+            </span>
+            {/* Swap only once the host has measured it for somebody: on a machine
+                with no per-process source the column would be a wall of dashes. */}
+            {app.swapMB !== undefined && (
+              <span className="hidden @xs:block w-16 text-right text-xs tabular-nums text-text-subtle">
+                {formatSwapCell(app.swapMB)}
+              </span>
+            )}
+          </div>
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem
+          variant="destructive"
+          disabled={endProtected}
+          onSelect={() => { if (!endProtected) onEnd(app); }}
+        >
+          End application
+        </ContextMenuItem>
+        {endProtected && (
+          <>
+            <ContextMenuSeparator />
+            <p className="px-2 py-1.5 text-[11px] text-text-subtle max-w-64">
+              One of this app's processes is protected, so PPM will not end it.
+            </p>
+          </>
+        )}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/src/web/components/system/apps/app-rows.ts

@@ -0,0 +1,140 @@
+/**
+ * The Apps page's rows - Mission Center's Apps section.
+ *
+ * An app's figures are the sum over its whole process SUBTREE, not over the pids
+ * the server listed: the server sends only the primary pids (each the root of a
+ * subtree), because sending every member would make a browser re-walk the same
+ * tree anyway. Chromium-shaped apps are dozens of processes under one root, and
+ * a row showing only the root's own CPU reads as permanently idle.
+ *
+ * Pure and React-free. Relative imports only, so a unit test never reaches a
+ * zustand store.
+ */
+import type { AppInfo, ProcessInfo } from "../../../../types/system-metrics";
+
+export interface AppRow {
+  id: string;
+  name: string;
+  icon: string | null;
+  /** The roots the server named; each stands for a subtree. */
+  pids: number[];
+  /** Every process in those subtrees, the roots included. Ending an app means
+   *  ending all of these: the roots alone would leave the helpers running, and
+   *  several roots means there is no single tree kill that covers them. */
+  memberPids: number[];
+  processCount: number;
+  cpu: number;
+  ramMB: number;
+  /** Summed over the members that HAVE a value, and undefined when none does -
+   *  so "nothing measurable here" never renders as a confident zero. */
+  swapMB?: number;
+  diskReadBps?: number;
+  diskWriteBps?: number;
+  gpuPct?: number;
+  gpuMemMB?: number;
+}
+
+/** pid to its direct children, built once per tick rather than per app. */
+export function childIndex(processes: readonly ProcessInfo[]): Map<number, number[]> {
+  const children = new Map<number, number[]>();
+  for (const p of processes) {
+    const list = children.get(p.ppid);
+    if (list) list.push(p.pid);
+    else children.set(p.ppid, [p.pid]);
+  }
+  return children;
+}
+
+/**
+ * Every pid in the subtrees rooted at `roots`, deduplicated.
+ *
+ * The `seen` set is not only for shared descendants: a `/proc` walk can observe a
+ * process being reparented and produce a parent chain that loops, and without the
+ * guard this recurses until the stack goes.
+ */
+export function subtreePids(roots: readonly number[], children: Map<number, number[]>): number[] {
+  const seen = new Set<number>();
+  const stack = [...roots];
+  while (stack.length > 0) {
+    const pid = stack.pop()!;
+    if (seen.has(pid)) continue;
+    seen.add(pid);
+    for (const child of children.get(pid) ?? []) stack.push(child);
+  }
+  return [...seen];
+}
+
+/** Undefined only when NO member measured the figure at all. */
+function sumOptional(values: readonly (number | undefined)[]): number | undefined {
+  let total = 0;
+  let any = false;
+  for (const v of values) {
+    if (v === undefined) continue;
+    any = true;
+    total += v;
+  }
+  return any ? total : undefined;
+}
+
+const round1 = (n: number) => Math.round(n * 10) / 10;
+
+/**
+ * One row per app that still has a live process. An app whose every process
+ * exited between the collector and the frame is dropped rather than shown as a
+ * zero row - it is not running any more.
+ */
+export function buildAppRows(apps: readonly AppInfo[], processes: readonly ProcessInfo[]): AppRow[] {
+  const byPid = new Map(processes.map((p) => [p.pid, p]));
+  const children = childIndex(processes);
+  const rows: AppRow[] = [];
+
+  for (const app of apps) {
+    const members = subtreePids(app.pids, children)
+      .map((pid) => byPid.get(pid))
+      .filter((p): p is ProcessInfo => p !== undefined);
+    if (members.length === 0) continue;
+
+    rows.push({
+      id: app.id,
+      name: app.name,
+      icon: app.icon,
+      pids: app.pids,
+      memberPids: members.map((p) => p.pid),
+      processCount: members.length,
+      cpu: round1(members.reduce((sum, p) => sum + p.cpu, 0)),
+      ramMB: round1(members.reduce((sum, p) => sum + p.ramMB, 0)),
+      swapMB: sumOptional(members.map((p) => p.swapMB)),
+      diskReadBps: sumOptional(members.map((p) => p.diskReadBps)),
+      diskWriteBps: sumOptional(members.map((p) => p.diskWriteBps)),
+      // Engine busy can genuinely exceed 100 summed across processes sharing a
+      // GPU, which is the same clamp the server applies to a process group.
+      gpuPct: clampPercent(sumOptional(members.map((p) => p.gpuPct))),
+      gpuMemMB: sumOptional(members.map((p) => p.gpuMemMB)),
+    });
+  }
+  return rows;
+}
+
+function clampPercent(value: number | undefined): number | undefined {
+  return value === undefined ? undefined : round1(Math.min(100, Math.max(0, value)));
+}
+
+export type AppSortKey = "name" | "cpu" | "ram";
+
+/** Busiest first is what a task manager is for; name is the tiebreaker so the
+ *  order does not churn between ticks when several apps sit at 0%. */
+export function sortAppRows(rows: readonly AppRow[], key: AppSortKey, dir: "asc" | "desc"): AppRow[] {
+  const sign = dir === "asc" ? 1 : -1;
+  return [...rows].sort((a, b) => {
+    if (key === "name") return sign * a.name.localeCompare(b.name);
+    const diff = key === "cpu" ? a.cpu - b.cpu : a.ramMB - b.ramMB;
+    return diff !== 0 ? sign * diff : a.name.localeCompare(b.name);
+  });
+}
+
+/** Substring match over the app's name, as the toolbar's search box needs it. */
+export function filterAppRows(rows: readonly AppRow[], query: string): AppRow[] {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return [...rows];
+  return rows.filter((r) => r.name.toLowerCase().includes(needle));
+}

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

@@ -0,0 +1,129 @@
+/**
+ * The Apps page — Mission Center's Apps section.
+ *
+ * A row's figures are the sum over the app's whole process SUBTREE, which is why
+ * the server sends only the roots and this computes the rest: a Chromium-shaped
+ * app is dozens of processes under one root, and a row showing just the root
+ * reads as permanently idle.
+ */
+import { useCallback, useMemo, useState } from "react";
+import { Search } from "@/lib/icons";
+import { cn } from "@/lib/utils";
+import { buildAppRows, filterAppRows, sortAppRows, type AppRow as AppRowData, type AppSortKey } from "./app-rows";
+import { AppRow } from "./app-row";
+import { KillConfirmDialog } from "../kill-confirm-dialog";
+import { useProcessKill } from "../use-process-kill";
+import { isGroupProtected } from "../build-kill-request";
+import type { MetricsSnapshot, ProcessGroup, ProcessInfo } from "../../../../types/system-metrics";
+
+const SORTS: { key: AppSortKey; label: string }[] = [
+  { key: "cpu", label: "CPU" },
+  { key: "ram", label: "Memory" },
+  { key: "name", label: "Name" },
+];
+
+/**
+ * An app ended as a group. `rootPid` is null on purpose: an app can have several
+ * roots, so there is no single tree kill that covers it — `buildGroupKillRequests`
+ * then ends each member individually, which reaches every helper.
+ */
+function groupForApp(app: AppRowData): ProcessGroup {
+  return {
+    key: `app:${app.id}`,
+    label: app.name,
+    rootPid: null,
+    cpu: app.cpu,
+    ramMB: app.ramMB,
+    count: app.processCount,
+    ppm: false,
+    pids: app.memberPids,
+  };
+}
+
+export function AppsPanel({ snapshot }: { snapshot: MetricsSnapshot }) {
+  const [query, setQuery] = useState("");
+  const [sortKey, setSortKey] = useState<AppSortKey>("cpu");
+  const { pendingKill, requestKillGroup, confirmKill, cancelKill } = useProcessKill(snapshot);
+
+  const byPid = useMemo(
+    () => new Map(snapshot.processes.map((p) => [p.pid, p])),
+    [snapshot.processes],
+  );
+  const rows = useMemo(
+    () => buildAppRows(snapshot.apps ?? [], snapshot.processes),
+    [snapshot.apps, snapshot.processes],
+  );
+  const visible = useMemo(
+    () => sortAppRows(filterAppRows(rows, query), sortKey, sortKey === "name" ? "asc" : "desc"),
+    [rows, query, sortKey],
+  );
+
+  const protectedOf = useCallback(
+    (app: AppRowData) => isGroupProtected(
+      app.memberPids.map((pid) => byPid.get(pid)).filter((p): p is ProcessInfo => p !== undefined),
+    ),
+    [byPid],
+  );
+
+  if (snapshot.apps === undefined) {
+    return (
+      <div className="p-4 text-sm text-text-subtle" data-testid="sysmon-apps">
+        This host does not list desktop applications.
+      </div>
+    );
+  }
+
+  return (
+    // `@container` so the Swap column is dropped on the PANEL's width rather
+    // than the viewport's — the System Monitor is a floating window on desktop.
+    <div className="h-full flex flex-col min-h-0 @container" data-testid="sysmon-apps" data-app-count={visible.length}>
+      <div className="shrink-0 flex flex-wrap items-center gap-2 p-2 border-b border-border">
+        <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 applications"
+            aria-label="Search applications"
+            data-testid="sysmon-app-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>
+        {SORTS.map((s) => (
+          <button
+            key={s.key}
+            type="button"
+            onClick={() => setSortKey(s.key)}
+            aria-pressed={sortKey === s.key}
+            data-testid={`sysmon-app-sort-${s.key}`}
+            className={cn(
+              "min-h-11 md:min-h-8 px-3 text-xs rounded-md border transition-colors",
+              sortKey === s.key ? "border-primary bg-primary/10 text-primary" : "border-border hover:bg-surface-hover",
+            )}
+          >
+            {s.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-y-auto divide-y divide-border">
+        {visible.length === 0 && (
+          <p className="p-4 text-sm text-text-subtle">
+            {rows.length === 0 ? "No desktop applications are running." : "No applications match."}
+          </p>
+        )}
+        {visible.map((app) => (
+          <AppRow
+            key={app.id}
+            app={app}
+            endProtected={protectedOf(app)}
+            onEnd={(target) => requestKillGroup(groupForApp(target))}
+          />
+        ))}
+      </div>
+
+      <KillConfirmDialog target={pendingKill} onConfirm={confirmKill} onCancel={cancelKill} />
+    </div>
+  );
+}