paseo-plugin-machine-status 0.1.1

package/client/pill-card.tsx

@@ -0,0 +1,195 @@
+import { useRpc, type PluginButtonContentProps } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+import React, { useMemo } from "react";
+import { StyleSheet, Text, View, type TextStyle } from "react-native";
+import { listProcesses, readMetrics } from "../shared/contracts";
+import { formatBytes, formatPercent } from "../shared/format";
+import { agentPorts, cpuSeverity, memorySeverity } from "../shared/pill";
+import { readServices } from "../shared/services";
+import { paletteFor, SEVERITY_LABEL, STATUS, takeLast, type Severity } from "../shared/viz";
+import { Sparkbars } from "./charts";
+import { ActionButton, useChromeStyles, type Chrome } from "./ui";
+
+/** Enough samples to read a trend in a card a few hundred points wide. */
+const SLOTS = 24;
+const TABULAR: TextStyle = { fontVariant: ["tabular-nums"] };
+
+/**
+ * The pill's popover: more than the two numbers, far less than the tab.
+ *
+ * It answers "is the machine the reason this feels slow" at a glance: both
+ * readings with their recent trend, what is using the CPU right now, and which
+ * development ports agents have left listening. Everything else is one press
+ * away in the Machine tab.
+ *
+ * Metrics and services share their query keys with the tab, so a card opened
+ * after the tab paints from cache. Polling runs only while the card is open.
+ */
+export function createMachineCard(openMachine: () => void) {
+  return function MachineCard({ theme, host, layout, close }: PluginButtonContentProps) {
+    const chrome: Chrome = { theme, compact: true };
+    const styles = useChromeStyles(chrome);
+    const palette = useMemo(() => paletteFor(theme.colors.surface0), [theme.colors.surface0]);
+
+    const read = useRpc(readMetrics);
+    const metrics = useQuery({
+      queryKey: ["machine-status", "metrics", host.id],
+      queryFn: () => read({}),
+      refetchInterval: 3_000,
+    });
+    const top = useRpc(listProcesses);
+    const processes = useQuery({
+      queryKey: ["machine-status", "processes", host.id, "card"],
+      queryFn: () => top({ sortBy: "cpu", limit: 3 }),
+      refetchInterval: 5_000,
+    });
+    const scan = useRpc(readServices);
+    const services = useQuery({
+      queryKey: ["machine-status", "services", host.id],
+      queryFn: () => scan({}),
+      staleTime: 15_000,
+    });
+
+    const history = metrics.data?.history ?? [];
+    const cpuSeries = useMemo(() => takeLast(history.map((sample) => sample.cpuLoadPercent), SLOTS), [history]);
+    const pressureSeries = useMemo(
+      () => takeLast(history.map((sample) => sample.pressurePercent ?? 0), SLOTS),
+      [history],
+    );
+    const ports = useMemo(() => agentPorts(services.data?.ports ?? []), [services.data]);
+
+    // A popover sizes to its content; without a width the sparkbars collapse.
+    // On compact layouts the card is a bottom sheet and takes the sheet's width.
+    const frame = layout.compact ? { alignSelf: "stretch" as const, gap: 12 } : { width: 300, gap: 12 };
+    const divider = <View style={{ height: StyleSheet.hairlineWidth, backgroundColor: palette.border }} />;
+    const openTab = () => {
+      close();
+      openMachine();
+    };
+
+    const data = metrics.data;
+    if (!data) {
+      return (
+        <View style={frame}>
+          <Text style={metrics.error ? styles.danger : styles.muted}>
+            {metrics.error ? (metrics.error as Error).message : "Reading the machine…"}
+          </Text>
+          <ActionButton chrome={chrome} label="Open Machine" variant="ghost" onPress={openTab} />
+        </View>
+      );
+    }
+
+    const footer = [
+      `Disk ${formatPercent(data.disk.usedPercent)}`,
+      data.power.percent !== null
+        ? `Battery ${formatPercent(data.power.percent)}${data.power.source === "ac" ? " on AC" : ""}`
+        : null,
+      data.thermal.level !== "nominal" && data.thermal.level !== "unknown" ? `Thermal ${data.thermal.level}` : null,
+    ]
+      .filter(Boolean)
+      .join(" · ");
+
+    return (
+      <View style={frame}>
+        <Reading
+          chrome={chrome}
+          label="CPU"
+          color={palette.series[0]}
+          value={formatPercent(data.cpu.loadPercent)}
+          severity={cpuSeverity(data.cpu.loadPercent)}
+          detail={`load ${data.cpu.loadAvg1.toFixed(2)} · ${data.cpu.cores} cores`}
+          series={cpuSeries}
+        />
+        <Reading
+          chrome={chrome}
+          label="MEMORY"
+          color={palette.series[1]}
+          value={formatPercent(data.memory.pressurePercent)}
+          severity={memorySeverity(data.memory.pressurePercent)}
+          detail={`${formatBytes(data.memory.appBytes)} app · swap ${formatBytes(data.swap.usedBytes)}`}
+          series={pressureSeries}
+        />
+
+        {divider}
+        <View style={{ gap: 4 }}>
+          <Text style={styles.muted}>Top processes</Text>
+          {(processes.data?.items ?? []).map((item) => (
+            <View key={item.pid} style={styles.row}>
+              <Text numberOfLines={1} style={[styles.value, { flex: 1 }]}>
+                {item.name}
+              </Text>
+              <Text style={[styles.muted, TABULAR]}>{formatPercent(item.cpuPercent)}</Text>
+              <Text style={[styles.muted, TABULAR, { minWidth: 60, textAlign: "right" }]}>
+                {formatBytes(item.memoryBytes)}
+              </Text>
+            </View>
+          ))}
+          {processes.data && processes.data.items.length === 0 ? <Text style={styles.muted}>None</Text> : null}
+        </View>
+
+        {ports.length > 0 ? (
+          <>
+            {divider}
+            <View style={{ gap: 4 }}>
+              <Text style={styles.muted}>Started by agents</Text>
+              {ports.map((port) => (
+                <View key={port.id} style={styles.row}>
+                  <Text style={[styles.value, TABULAR]}>:{port.port}</Text>
+                  <Text numberOfLines={1} style={[styles.muted, { flex: 1, textAlign: "right" }]}>
+                    {port.command ?? "unknown"} · {port.attribution?.label}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          </>
+        ) : null}
+
+        {divider}
+        <Text style={styles.muted}>{footer}</Text>
+        <ActionButton chrome={chrome} label="Open Machine" variant="ghost" onPress={openTab} />
+      </View>
+    );
+  };
+}
+
+/** One reading: the figure with its severity in words, and the trend beside it. */
+function Reading({
+  chrome,
+  label,
+  color,
+  value,
+  severity,
+  detail,
+  series,
+}: {
+  chrome: Chrome;
+  label: string;
+  color: string;
+  value: string;
+  severity: Severity;
+  detail: string;
+  series: readonly number[];
+}) {
+  const styles = useChromeStyles(chrome);
+  return (
+    <View style={{ gap: 6 }}>
+      <View style={styles.row}>
+        <Text style={[styles.cardTitle, { color }]}>{label}</Text>
+        <Text numberOfLines={1} style={styles.muted}>
+          {detail}
+        </Text>
+      </View>
+      <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
+        <View style={{ minWidth: 64 }}>
+          <Text style={[styles.valueStrong, TABULAR, severity === "good" ? null : { color: STATUS[severity] }]}>
+            {value}
+          </Text>
+          <Text style={styles.axis}>{SEVERITY_LABEL[severity]}</Text>
+        </View>
+        <View style={{ flex: 1 }}>
+          <Sparkbars values={series} min={0} max={100} slots={SLOTS} color={color} height={28} />
+        </View>
+      </View>
+    </View>
+  );
+}

package/client/pill.tsx

@@ -0,0 +1,155 @@
+import type {
+  PluginButton,
+  PluginButtonIconProps,
+  PluginButtonRegistration,
+  PluginClientContext,
+} from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import React, { useSyncExternalStore } from "react";
+import { readMetrics } from "../shared/contracts";
+import { createMachineCard } from "./pill-card";
+import { pillReading, type PillReading } from "../shared/pill";
+import { STATUS } from "../shared/viz";
+
+/** Often enough to notice a runaway agent, rarely enough to cost nothing. */
+const REFRESH_MS = 10_000;
+
+/**
+ * The latest reading, held once for every pill. Paseo draws the label itself, so
+ * the numbers reach each pill through `update`; the icon is the plugin's own and
+ * reads the severity from here.
+ */
+interface ReadingStore {
+  get(): PillReading | null;
+  set(next: PillReading): void;
+  subscribe(listener: () => void): () => void;
+}
+
+function createReadingStore(): ReadingStore {
+  let current: PillReading | null = null;
+  const listeners = new Set<() => void>();
+  return {
+    get: () => current,
+    set(next) {
+      current = next;
+      for (const listener of listeners) listener();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
+
+/**
+ * The pill's icon, tinted by the worse of the two readings. While all is well it
+ * keeps the colour Paseo hands it, so the pill only draws the eye when it should.
+ */
+function createIcon(store: ReadingStore) {
+  return function MachineLoadIcon({ size, color }: PluginButtonIconProps) {
+    const reading = useSyncExternalStore(store.subscribe, store.get);
+    const tone = reading && reading.severity !== "good" ? STATUS[reading.severity] : color;
+    return <Icon name="Activity" size={size} color={tone} />;
+  };
+}
+
+interface TrackedAgent {
+  id: string;
+  workspaceId?: string | null;
+  archivedAt?: string | null;
+}
+
+/**
+ * CPU load and memory pressure beside every agent's composer, fed by one poll.
+ *
+ * Paseo scopes a pill to a single agent, so this follows the agent directory: a
+ * pill appears for each agent that has a workspace and goes when the agent is
+ * archived or removed. The directory is seeded from `list`, because a
+ * subscription reports changes rather than the agents that already exist.
+ */
+export function contributePills(client: PluginClientContext) {
+  const store = createReadingStore();
+  const icon = createIcon(store);
+  const card = createMachineCard(() => client.openSurface("main"));
+  const pills = new Map<string, { workspaceId: string; registration: PluginButtonRegistration }>();
+  let disposed = false;
+  let inFlight = false;
+
+  function button(): PluginButton {
+    const current = store.get();
+    return {
+      title: current?.label ?? "Machine load",
+      icon,
+      label: current?.text ?? "Machine",
+      // A compact card rather than a jump to the tab: the question beside the
+      // composer is "is it the machine", and the answer should not cost the chat.
+      behavior: { kind: "popover", Content: card },
+    };
+  }
+
+  async function refresh() {
+    if (inFlight || disposed || pills.size === 0) return;
+    inFlight = true;
+    try {
+      const metrics = await client.rpc(readMetrics, {});
+      if (disposed) return;
+      const next = pillReading(metrics.cpu.loadPercent, metrics.memory.pressurePercent);
+      store.set(next);
+      for (const { registration } of pills.values()) {
+        registration.update({ title: next.label, label: next.text });
+      }
+    } catch {
+      // A failed read leaves the last numbers up; the next tick tries again.
+    } finally {
+      inFlight = false;
+    }
+  }
+
+  function show(agentId: string, workspaceId: string) {
+    const existing = pills.get(agentId);
+    if (existing?.workspaceId === workspaceId) return;
+    existing?.registration.remove();
+    pills.set(agentId, {
+      workspaceId,
+      registration: client.addComposerPill({ id: "machine", workspaceId, agentId, button: button() }),
+    });
+    if (store.get() === null) void refresh();
+  }
+
+  function hide(agentId: string) {
+    pills.get(agentId)?.registration.remove();
+    pills.delete(agentId);
+  }
+
+  function track(agent: TrackedAgent) {
+    if (agent.workspaceId && !agent.archivedAt) show(agent.id, agent.workspaceId);
+    else hide(agent.id);
+  }
+
+  const unsubscribe = client.paseo.agents.subscribe((update) => {
+    if (disposed) return;
+    if (update.kind === "upsert") track(update.agent);
+    else hide(update.agentId);
+  });
+
+  client.paseo.agents
+    .list()
+    .then(({ entries }) => {
+      if (!disposed) for (const entry of entries) track(entry.agent);
+    })
+    .catch(() => {
+      // Without the seed, pills appear as each agent next reports a change.
+    });
+
+  const timer = setInterval(() => void refresh(), REFRESH_MS);
+
+  return () => {
+    disposed = true;
+    clearInterval(timer);
+    unsubscribe();
+    for (const { registration } of pills.values()) registration.remove();
+    pills.clear();
+  };
+}

package/client/processes.tsx

@@ -0,0 +1,321 @@
+import { useRpc } from "@getpaseo/plugin/client";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import React, { useRef, useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { killProcess, listProcesses, type ProcessEntry } from "../shared/contracts";
+import { formatBytes } from "../shared/format";
+import { explainProcess, type Explanation } from "../shared/explain";
+import { contextMenuTriggers, useContextMenu, type ContextMenuItem } from "./menu";
+import { Card, useChromeStyles, type Chrome } from "./ui";
+import { severityOf, STATUS, type VizPalette } from "../shared/viz";
+
+
+/**
+ * Auto-refresh pauses while a menu is open: a list that reorders under the
+ * cursor is how the wrong PID gets terminated.
+ */
+export function ProcessesSection({
+  chrome,
+  hostId,
+  palette,
+}: {
+  chrome: Chrome;
+  hostId: string;
+  palette: VizPalette;
+}) {
+  const styles = useChromeStyles(chrome);
+  const list = useRpc(listProcesses);
+  const kill = useRpc(killProcess);
+  const explain = useRpc(explainProcess);
+  const openMenu = useContextMenu();
+
+  const [sortBy, setSortBy] = useState<"cpu" | "memory">("cpu");
+  const [activePid, setActivePid] = useState<number | null>(null);
+  /** Where the menu was opened, so a confirmation submenu appears in the same place. */
+  const anchor = useRef({ x: 0, y: 0 });
+
+  const processes = useQuery({
+    queryKey: ["machine-status", "processes", hostId, sortBy],
+    queryFn: () => list({ sortBy, limit: 8 }),
+    refetchInterval: activePid === null ? 5_000 : false,
+  });
+
+  const items = processes.data?.items ?? [];
+  // The bar is scaled to the heaviest process on screen, so the worst offender
+  // always reaches full width and the rest are read against it.
+  const peakCpu = Math.max(...items.map((item) => item.cpuPercent), 1);
+
+  const signal = useMutation({
+    mutationFn: (variables: { pid: number; signal: "TERM" | "KILL" }) => kill(variables),
+    onSettled: () => void processes.refetch(),
+  });
+
+  /**
+   * The panel already knows the parent chain, the elapsed time, the ports and the
+   * machine's state. Those facts answer "is this a problem" on their own, so the
+   * verdict is computed here rather than delegated.
+   */
+  const investigate = useMutation({ mutationFn: (pid: number) => explain({ pid }) });
+
+  /**
+   * A destructive action gets its own menu rather than firing on the first click.
+   * Re-opening at the same anchor keeps the two-step guarantee without turning
+   * the menu into a dialog.
+   */
+  const confirmSignal = (item: ProcessEntry, kind: "TERM" | "KILL") => {
+    openMenu({
+      ...anchor.current,
+      title: kind === "TERM" ? `Terminate ${item.name}?` : `Force kill ${item.name}?`,
+      items: [
+        {
+          id: "confirm",
+          label: kind === "TERM" ? "Confirm — unsaved work is lost" : "Confirm — no cleanup runs",
+          tone: "danger",
+          onSelect: () => signal.mutate({ pid: item.pid, signal: kind }),
+        },
+        { id: "cancel", label: "Cancel", onSelect: () => setActivePid(null) },
+      ],
+    });
+  };
+
+  const menuFor = (item: ProcessEntry): ContextMenuItem[] => {
+    const actions: ContextMenuItem[] = [
+      {
+        id: "explain",
+        label: "What is this?",
+        onSelect: () => investigate.mutate(item.pid),
+      },
+      { id: "term", label: "Terminate (SIGTERM)…", tone: "danger", onSelect: () => confirmSignal(item, "TERM") },
+    ];
+    if (signal.data?.pid === item.pid && signal.data.stillRunning) {
+      actions.push({
+        id: "kill",
+        label: "Force kill (SIGKILL)…",
+        tone: "danger",
+        onSelect: () => confirmSignal(item, "KILL"),
+      });
+    }
+    return actions;
+  };
+
+  const open = (item: ProcessEntry, x: number, y: number) => {
+    if (item.guarded) return;
+    anchor.current = { x, y };
+    setActivePid(item.pid);
+    signal.reset();
+    investigate.reset();
+    openMenu({ x, y, title: `${item.name} · PID ${item.pid}`, items: menuFor(item) });
+  };
+
+  return (
+    <Card
+      chrome={chrome}
+      title="Top processes"
+      subtitle={activePid === null ? "refreshing every 5s" : "paused"}
+    >
+      <View style={styles.rowWrap}>
+        {(["cpu", "memory"] as const).map((option) => (
+          <Pressable
+            key={option}
+            accessibilityRole="radio"
+            accessibilityState={{ selected: sortBy === option }}
+            accessibilityLabel={`Sort by ${option}`}
+            onPress={() => setSortBy(option)}
+            style={{
+              paddingVertical: 6,
+              paddingHorizontal: 12,
+              borderRadius: 8,
+              borderWidth: 1,
+              borderColor: sortBy === option ? chrome.theme.colors.accent : palette.borderStrong,
+            }}
+          >
+            <Text style={sortBy === option ? styles.value : styles.muted}>
+              {option === "cpu" ? "By CPU" : "By memory"}
+            </Text>
+          </Pressable>
+        ))}
+        <View style={{ flex: 1 }} />
+        <Text style={styles.axis}>right-click a row</Text>
+      </View>
+
+      {processes.error ? (
+        <Text style={styles.danger}>{(processes.error as Error).message}</Text>
+      ) : null}
+
+      {!chrome.compact ? (
+        <View style={[styles.processRow, { paddingVertical: 2 }]}>
+          <Text style={[styles.axis, { flex: 1 }]}>PROCESS</Text>
+          <Text style={[styles.axis, { width: 64 }]}>PID</Text>
+          <Text style={[styles.axis, { width: 56, textAlign: "right" }]}>CPU</Text>
+          <View style={{ width: 120 }} />
+          <Text style={[styles.axis, { width: 84, textAlign: "right" }]}>MEMORY</Text>
+        </View>
+      ) : null}
+
+      {items.map((item) => {
+        const active = item.pid === activePid;
+        const severity = severityOf(item.cpuPercent, 50, 80);
+        return (
+          <Pressable
+            key={item.pid}
+            accessibilityRole="button"
+            accessibilityLabel={`${item.name}, PID ${item.pid}, ${item.cpuPercent.toFixed(1)} percent CPU, ${formatBytes(item.memoryBytes)}. Opens actions.`}
+            accessibilityState={{ selected: active, disabled: item.guarded }}
+            disabled={item.guarded}
+            // A left click opens the same menu, so the actions are reachable
+            // without a right button — on a trackpad, or by keyboard focus.
+            onPress={(event) => open(item, event.nativeEvent.pageX, event.nativeEvent.pageY)}
+            {...contextMenuTriggers((x, y) => open(item, x, y))}
+            style={({ pressed }) => [
+              styles.processRow,
+              {
+                backgroundColor: active ? palette.border : "transparent",
+                opacity: item.guarded ? 0.45 : pressed ? 0.7 : 1,
+              },
+            ]}
+          >
+            <Text style={[styles.value, { flex: 1 }]} numberOfLines={1}>
+              {item.name}
+            </Text>
+            <Text style={[styles.muted, { width: 64 }]} numberOfLines={1}>
+              {item.guarded ? "protected" : item.pid}
+            </Text>
+            <Text
+              style={[
+                styles.value,
+                { width: 56, textAlign: "right", fontWeight: "600" },
+                severity === "good" ? null : { color: STATUS[severity] },
+              ]}
+            >
+              {item.cpuPercent.toFixed(1)}%
+            </Text>
+            <View
+              style={{
+                width: chrome.compact ? 48 : 120,
+                height: 5,
+                borderRadius: 3,
+                backgroundColor: palette.neutral,
+                overflow: "hidden",
+              }}
+            >
+              <View
+                style={{
+                  width: `${(item.cpuPercent / peakCpu) * 100}%`,
+                  height: "100%",
+                  borderRadius: 3,
+                  backgroundColor: severity === "good" ? palette.series[0] : STATUS[severity],
+                }}
+              />
+            </View>
+            <Text style={[styles.value, { width: 84, textAlign: "right" }]}>
+              {formatBytes(item.memoryBytes)}
+            </Text>
+          </Pressable>
+        );
+      })}
+
+      {/* The menu is gone by the time an action finishes, so results land here. */}
+      {investigate.isPending ? <Text style={styles.muted}>Gathering evidence…</Text> : null}
+      {investigate.error ? (
+        <Text style={styles.danger}>{(investigate.error as Error).message}</Text>
+      ) : null}
+      {investigate.isSuccess ? (
+        <Verdict
+          chrome={chrome}
+          palette={palette}
+          name={investigate.data.name}
+          pid={investigate.data.pid}
+          explanation={investigate.data.explanation}
+          onDismiss={() => investigate.reset()}
+        />
+      ) : null}
+
+      {signal.data ? (
+        <Text style={signal.data.ok && !signal.data.stillRunning ? styles.value : styles.danger}>
+          {signal.data.error
+            ? signal.data.error
+            : signal.data.stillRunning
+              ? `PID ${signal.data.pid} ignored SIG${signal.data.signal} and is still running — right-click it again to force kill.`
+              : `PID ${signal.data.pid} exited.`}
+        </Text>
+      ) : null}
+    </Card>
+  );
+}
+
+const CONCERN_LABEL: Record<Explanation["concern"], string> = {
+  none: "Nothing to do",
+  watch: "Worth watching",
+  act: "Worth acting on",
+};
+
+/** The verdict, shown where the question was asked. */
+function Verdict({
+  chrome,
+  palette,
+  name,
+  pid,
+  explanation,
+  onDismiss,
+}: {
+  chrome: Chrome;
+  palette: VizPalette;
+  name: string;
+  pid: number;
+  explanation: Explanation;
+  onDismiss: () => void;
+}) {
+  const styles = useChromeStyles(chrome);
+  const tone =
+    explanation.concern === "act"
+      ? STATUS.critical
+      : explanation.concern === "watch"
+        ? STATUS.warning
+        : palette.series[2];
+
+  return (
+    <View
+      style={{
+        marginTop: 4,
+        borderRadius: 10,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderColor: palette.borderStrong,
+        padding: chrome.compact ? 10 : 12,
+        gap: 8,
+      }}
+    >
+      <View style={styles.row}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flex: 1 }}>
+          <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: tone }} />
+          {/* The dot never carries the meaning alone. */}
+          <Text style={styles.axis}>{CONCERN_LABEL[explanation.concern]}</Text>
+          <Text style={styles.axis}>· PID {pid}</Text>
+        </View>
+        <Pressable accessibilityRole="button" accessibilityLabel="Dismiss" onPress={onDismiss}>
+          <Text style={styles.muted}>Dismiss</Text>
+        </Pressable>
+      </View>
+
+      <Text style={[styles.value, { fontWeight: "600" }]} selectable>
+        {explanation.headline}
+      </Text>
+
+      {explanation.findings.map((finding) => (
+        <Text key={finding} style={styles.muted} selectable>
+          · {finding}
+        </Text>
+      ))}
+
+      {explanation.advice.length > 0 ? (
+        <>
+          <Text style={styles.axis}>WHAT TO DO</Text>
+          {explanation.advice.map((step, index) => (
+            <Text key={step} style={styles.value} selectable>
+              {index + 1}. {step}
+            </Text>
+          ))}
+        </>
+      ) : null}
+    </View>
+  );
+}