@omercnet/paseo-top 0.0.0-stage → 0.0.1-alpha

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Omer Cohen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/OVERVIEW.md

@@ -0,0 +1,15 @@
+Top shows how busy a host is without leaving your work, and which agent is responsible. It adds a row to the sidebar footer with the host name and its CPU, memory, disk and disk I/O, and a **Top** screen with dials, a five minute history strip for each reading, and a list of load by agent session.
+
+Usage always describes one host. With several hosts connected, the footer follows the host you are working in, and the Top screen has Paseo's host picker. Each daemon measures itself; nothing is sent between hosts.
+
+**Load by session** adds up the CPU and memory of everything an agent started, not only the agent process. A build, test run or dev server launched by a tool counts toward the agent that launched it. Each row shows the agent and workspace names you gave them, the busiest command in its tree, cores and memory in use, and opens the agent when pressed. A session is flagged with a flame, and counted in the footer, when it holds one busy core for 30 seconds or a quarter of the host's memory. Everything not listed is shown on one "Everything else" line.
+
+How processes are matched to agents: Paseo gives every agent session an identifier in its environment, and everything the session starts inherits it. Top reads only that identifier from each process, never the rest of the environment. A process whose environment was cleared by a tool is charged to the nearest ancestor that has one. Only agents that belong to the host you are viewing are listed; processes of agents that belong to other daemons on the same machine are counted under "Everything else", together with processes of no agent and sessions beyond the first ten. Per-session load needs Linux and only sees processes owned by the daemon's user. Containers run outside the agent's process tree and show as unattributed.
+
+What the numbers are and are not: load is sampled every ten seconds, so a process that starts and exits between two scans is never seen, and one that is still running is charged for the CPU it used since it started. A session is flagged only when it has held a full core across three scans in a row, so a single burst does not flag it. Memory is each process's resident memory added up, so memory shared between processes of one agent is counted more than once, and the quarter-of-memory rule compares against the machine's memory, not a container's limit. Sessions plus "Everything else" cover the processes that were scanned, not the whole host: kernel time, finished processes and the page cache are outside them.
+
+CPU is the share of non-idle time over the last couple of seconds. Memory excludes reclaimable cache on Linux. Disk is the filesystem that holds the daemon user's home directory. Disk I/O is bytes read plus written per second across the physical disks, on Linux. History is kept by the daemon in memory, so it survives a page refresh and is shared by every client, but starts over when the plugin or daemon restarts. A reading the host cannot give shows `--`; if the plugin cannot be reached, the footer says unavailable.
+
+The plugin only reads usage counters and process tables. It has no settings and runs no commands.
+
+Requires Paseo ^0.11.0.

package/README.md

@@ -1,3 +1,28 @@
-# Temporary Holding Version
+# Top
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A Paseo plugin that shows CPU, memory, disk and disk I/O of a host in the sidebar footer, and which agent sessions are responsible. See [OVERVIEW.md](OVERVIEW.md) for behavior.
+
+## Develop
+
+```sh
+bun install
+cd top
+npm run check && npm run typecheck && npm test
+```
+
+Verify against an isolated daemon, never the default one:
+
+```sh
+.agents/skills/deliver/scripts/dev-daemon.sh up top
+.agents/skills/deliver/scripts/dev-daemon.sh down top
+```
+
+## Layout
+
+- `shared/usage.ts`: the `top.usage` RPC contract and history constants.
+- `server/usage.ts`: CPU, memory, disk and I/O readers, and the sampler with its history ring.
+- `server/processes.ts`: `/proc` scan and attribution of processes to agent sessions.
+- `server/names.ts`: joins agent and workspace names onto sessions.
+- `index.server.ts`: wires the sampler to the RPC.
+- `client/`, `index.client.tsx`: footer row, Top screen, dials and session list.
+- `tests/`: unit tests; process tests run against a fake `/proc` tree.

package/client/dial.ts

@@ -0,0 +1,29 @@
+/** A dial sweeps 240 degrees, symmetric around straight up, with a ladder of ticks along it. */
+export const SWEEP = 240;
+export const TICKS = 51;
+export const MAJOR_EVERY = 5;
+
+/** Where tick `index` sits on the 0-100 scale. */
+export function tickPercent(index: number): number {
+  return (index / (TICKS - 1)) * 100;
+}
+
+/** Degrees clockwise from straight up for a 0-100 value; an unknown value rests at the start. */
+export function needleDegrees(percent: number | null): number {
+  const clamped = Math.min(100, Math.max(0, percent ?? 0));
+  return (clamped / 100) * SWEEP - SWEEP / 2;
+}
+
+/** Bar heights as 0-1 fractions of `scale`, oldest first; unknown samples are 0. */
+export function sparkHeights(values: readonly (number | null)[], scale: number): number[] {
+  return values.map((value) => (value === null || scale <= 0 ? 0 : Math.min(1, value / scale)));
+}
+
+/** A screen reader gets no current value for an unknown reading, rather than a false zero. */
+export function accessibilityValue(percent: number | null): {
+  min: number;
+  max: number;
+  now?: number;
+} {
+  return percent === null ? { min: 0, max: 100 } : { min: 0, max: 100, now: Math.round(percent) };
+}

package/client/footer.tsx

@@ -0,0 +1,55 @@
+import type { PluginSidebarItemProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { SidebarRow } from "@getpaseo/plugin/client/ui";
+import { Text, View } from "react-native";
+import { formatPercent, formatRate, levelColor } from "./format";
+import { SCREEN_ID, useUsage } from "./usage";
+
+export function TopFooter({ theme, host, currentScreen, openScreen }: PluginSidebarItemProps) {
+  const usage = useUsage(host.id);
+  const heavy = usage.data?.sessions?.filter((session) => session.heavy).length ?? 0;
+  const metrics =
+    usage.data &&
+    ([
+      ["Cpu", formatPercent(usage.data.cpu), usage.data.cpu],
+      ["MemoryStick", formatPercent(usage.data.memory), usage.data.memory],
+      ["HardDrive", formatPercent(usage.data.disk), usage.data.disk],
+      ["Gauge", formatRate(usage.data.io), null],
+    ] as const);
+
+  return (
+    <SidebarRow
+      icon="Activity"
+      label={host.label}
+      active={currentScreen?.screenId === SCREEN_ID}
+      onPress={() => openScreen({ screenId: SCREEN_ID })}
+      trailing={
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+          {usage.isError && (
+            <Text style={{ color: theme.colors.statusDanger, fontSize: 11 }}>unavailable</Text>
+          )}
+          {heavy > 0 && (
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 2 }}>
+              <Icon name="Flame" size={11} color={theme.colors.statusDanger} />
+              <Text style={{ color: theme.colors.statusDanger, fontSize: 11 }}>{heavy}</Text>
+            </View>
+          )}
+          {metrics?.map(([icon, text, percent]) => {
+            const color = levelColor(theme, percent);
+            return (
+              <View key={icon} style={{ flexDirection: "row", alignItems: "center", gap: 2 }}>
+                <Icon name={icon} size={11} color={color} />
+                <Text
+                  numberOfLines={1}
+                  style={{ color, fontSize: 11, fontVariant: ["tabular-nums"] }}
+                >
+                  {text}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+      }
+    />
+  );
+}

package/client/format.ts

@@ -0,0 +1,56 @@
+import type { PluginTheme } from "@getpaseo/plugin";
+
+export type Level = "ok" | "warn" | "hot";
+
+export function loadLevel(percent: number | null): Level {
+  if (percent === null) return "ok";
+  if (percent >= 90) return "hot";
+  return percent >= 70 ? "warn" : "ok";
+}
+
+export function formatPercent(percent: number | null): string {
+  return percent === null ? "--" : `${Math.round(percent)}%`;
+}
+
+/**
+ * Scales to the largest unit that keeps the number short, with one decimal below ten. Rounding can
+ * carry a value over the next unit (1023.6K is 1.0M, not 1024K), so a unit is promoted on the
+ * rounded number.
+ */
+function scaled(value: number, base: number, units: readonly string[]): string {
+  let unit = 0;
+  let result = value;
+  while (Math.round(result) >= base && unit < units.length - 1) {
+    result /= base;
+    unit++;
+  }
+  const decimal = unit > 0 && Math.round(result * 10) / 10 < 10;
+  return `${decimal ? result.toFixed(1) : Math.round(result)}${units[unit]}`;
+}
+
+/** Short throughput such as `0/s`, `850/s`, `12K/s`, `1.5G/s`. */
+export function formatRate(bytesPerSecond: number | null): string {
+  return bytesPerSecond === null ? "--" : `${scaled(bytesPerSecond, 1000, ["", "K", "M", "G"])}/s`;
+}
+
+/** CPU in cores, such as `0.3 cores` or `12 cores`. */
+export function formatCores(cores: number): string {
+  return `${Math.round(cores * 10) / 10 < 10 ? cores.toFixed(1) : Math.round(cores)} cores`;
+}
+
+/** Short size such as `0B`, `850B`, `12M`, `2.5G`. */
+export function formatBytes(bytes: number): string {
+  return scaled(bytes, 1024, ["B", "K", "M", "G", "T"]);
+}
+
+export function levelColor(theme: PluginTheme, percent: number | null): string {
+  const level = loadLevel(percent);
+  if (level === "hot") return theme.colors.statusDanger;
+  return level === "warn" ? theme.colors.statusWarning : theme.colors.foregroundMuted;
+}
+
+/** Like `levelColor`, but a healthy value is green; for dials that should look alive. */
+export function zoneColor(theme: PluginTheme, percent: number): string {
+  const color = levelColor(theme, percent);
+  return color === theme.colors.foregroundMuted ? theme.colors.statusSuccess : color;
+}

package/client/gauge.tsx

@@ -0,0 +1,187 @@
+import type { PluginTheme } from "@getpaseo/plugin";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useEffect, useRef } from "react";
+import { Animated, Easing, Text, View } from "react-native";
+import {
+  accessibilityValue,
+  MAJOR_EVERY,
+  needleDegrees,
+  SWEEP,
+  sparkHeights,
+  TICKS,
+  tickPercent,
+} from "./dial";
+import { levelColor, loadLevel, zoneColor } from "./format";
+
+const TICK_ROWS = Array.from({ length: TICKS }, (_, index) => index);
+
+interface DialProps {
+  theme: PluginTheme;
+  size: number;
+  icon: string;
+  label: string;
+  /** 0-100, or null when the host cannot report it. */
+  value: number | null;
+  text: string;
+}
+
+/** A speedometer: green, amber and red zones light up to the value, and the needle sweeps there. */
+export function Dial({ theme, size, icon, label, value, text }: DialProps) {
+  const radius = size / 2;
+  const needleLength = radius * 0.72;
+  const degrees = useRef(new Animated.Value(needleDegrees(value))).current;
+  useEffect(() => {
+    Animated.timing(degrees, {
+      toValue: needleDegrees(value),
+      duration: 700,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: false,
+    }).start();
+  }, [degrees, value]);
+  const rotate = degrees.interpolate({
+    inputRange: [-SWEEP / 2, SWEEP / 2],
+    outputRange: [`${-SWEEP / 2}deg`, `${SWEEP / 2}deg`],
+  });
+
+  return (
+    <View
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={`${label} ${text}`}
+      accessibilityValue={accessibilityValue(value)}
+      style={{ width: size, height: size * 0.9 }}
+    >
+      {TICK_ROWS.map((index) => {
+        const major = index % MAJOR_EVERY === 0;
+        const length = major ? 15 : 9;
+        const width = major ? 3 : 2;
+        const percent = tickPercent(index);
+        const lit = value !== null && percent <= value;
+        return (
+          <View
+            key={index}
+            style={{
+              position: "absolute",
+              left: radius - width / 2,
+              top: radius - length / 2,
+              width,
+              height: length,
+              borderRadius: width / 2,
+              backgroundColor: lit ? zoneColor(theme, percent) : theme.colors.foregroundMuted,
+              opacity: lit ? 1 : 0.2,
+              transform: [
+                { rotate: `${(percent / 100) * SWEEP - SWEEP / 2}deg` },
+                { translateY: -(radius - 6 - length / 2) },
+              ],
+            }}
+          />
+        );
+      })}
+      <Animated.View
+        style={{
+          position: "absolute",
+          left: radius - 1.5,
+          top: radius - needleLength,
+          width: 3,
+          height: needleLength,
+          borderRadius: 2,
+          backgroundColor: value === null ? theme.colors.foregroundMuted : theme.colors.foreground,
+          transform: [
+            { translateY: needleLength / 2 },
+            { rotate },
+            { translateY: -needleLength / 2 },
+          ],
+        }}
+      />
+      <View
+        style={{
+          position: "absolute",
+          left: radius - 8,
+          top: radius - 8,
+          width: 16,
+          height: 16,
+          borderRadius: 8,
+          borderWidth: 3,
+          borderColor: theme.colors.foreground,
+          backgroundColor: theme.colors.surface1,
+        }}
+      />
+      <View
+        style={{ position: "absolute", left: 0, right: 0, top: radius + 18, alignItems: "center" }}
+      >
+        <Text
+          style={{
+            color:
+              value === null || loadLevel(value) === "ok"
+                ? theme.colors.foreground
+                : levelColor(theme, value),
+            fontSize: size * 0.19,
+            fontWeight: "600",
+            fontVariant: ["tabular-nums"],
+          }}
+        >
+          {text}
+        </Text>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 4, marginTop: 2 }}>
+          <Icon name={icon} size={12} color={theme.colors.foregroundMuted} />
+          <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12, letterSpacing: 0.6 }}>
+            {label}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+interface SparklineProps {
+  theme: PluginTheme;
+  /** Oldest first; `scale` is the value that fills the bar. */
+  values: readonly (number | null)[];
+  scale: number;
+  width: number;
+  /** Bars always occupy `slots` positions, so a young history does not stretch. */
+  slots: number;
+  color: (value: number | null) => string;
+}
+
+/** A strip of bars for the last few minutes, so a spike is still visible after it passes. */
+export function Sparkline({ theme, values, scale, width, slots, color }: SparklineProps) {
+  const heights = sparkHeights(values, scale);
+  const empty = Math.max(0, slots - values.length);
+  return (
+    <View
+      style={{
+        width,
+        height: 28,
+        flexDirection: "row",
+        alignItems: "flex-end",
+        gap: 2,
+        borderBottomWidth: 1,
+        borderBottomColor: theme.colors.border,
+      }}
+    >
+      {Array.from({ length: slots }, (_, slot) => {
+        const sample = slot - empty;
+        // Slots are positional: samples are only ever appended and have no id.
+        const key = slot;
+        if (sample < 0) {
+          return (
+            <View key={key} style={{ flex: 1, height: 2, backgroundColor: theme.colors.border }} />
+          );
+        }
+        return (
+          <View
+            key={key}
+            style={{
+              flex: 1,
+              height: Math.max(2, (heights[sample] ?? 0) * 28),
+              borderRadius: 1,
+              backgroundColor: color(values[sample] ?? null),
+              opacity: 0.35 + 0.65 * ((slot + 1) / slots),
+            }}
+          />
+        );
+      })}
+    </View>
+  );
+}

package/client/screen.tsx

@@ -0,0 +1,165 @@
+import type { PluginTheme } from "@getpaseo/plugin";
+import type { PluginScreenProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import type { ReactNode } from "react";
+import { ScrollView, Text, View } from "react-native";
+import { HISTORY_EVERY_MS, HISTORY_LENGTH, type Sample } from "../shared/usage";
+import { formatPercent, formatRate, zoneColor } from "./format";
+import { Dial, Sparkline } from "./gauge";
+import { Sessions } from "./sessions";
+import { useUsage } from "./usage";
+
+const DIALS = [
+  { label: "CPU", icon: "Cpu", pick: (usage: Sample) => usage.cpu },
+  { label: "MEMORY", icon: "MemoryStick", pick: (usage: Sample) => usage.memory },
+  { label: "DISK", icon: "HardDrive", pick: (usage: Sample) => usage.disk },
+] as const;
+
+function Card({
+  theme,
+  width,
+  children,
+}: {
+  theme: PluginTheme;
+  width: number;
+  children: ReactNode;
+}) {
+  return (
+    <View
+      style={{
+        width,
+        alignItems: "center",
+        gap: 12,
+        padding: 16,
+        borderRadius: 18,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        backgroundColor: theme.colors.surface1,
+      }}
+    >
+      {children}
+    </View>
+  );
+}
+
+/** The screen header carries Paseo's host picker; the footer follows the host picked here. */
+export function TopScreen({ theme, layout, host, navigation }: PluginScreenProps) {
+  const usage = useUsage(host.id);
+  const history = usage.data?.history ?? [];
+  const dial = layout.compact ? 156 : 200;
+  const inner = dial;
+  const io = history.map((sample) => sample.io);
+  // The live reading is fresher than the newest history point, so it counts toward the peak too.
+  const peak = [...io, usage.data?.io ?? null].reduce<number | null>(
+    (max, value) => (value === null ? max : Math.max(max ?? 0, value)),
+    null,
+  );
+  // The floor only keeps a near-idle disk from filling the bars; the label shows the real peak.
+  const scale = Math.max(1_000_000, peak ?? 0);
+
+  return (
+    <ScrollView
+      style={{ flex: 1, backgroundColor: theme.colors.surface0 }}
+      contentContainerStyle={{ padding: layout.compact ? 16 : 24, gap: 20 }}
+    >
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+        <Icon name="Activity" size={22} color={theme.colors.foreground} />
+        <Text style={{ color: theme.colors.foreground, fontSize: layout.compact ? 20 : 26 }}>
+          {host.label}
+        </Text>
+        <View
+          style={{
+            width: 8,
+            height: 8,
+            borderRadius: 4,
+            backgroundColor: usage.isError ? theme.colors.statusDanger : theme.colors.statusSuccess,
+          }}
+        />
+      </View>
+      {usage.isError && (
+        <Text style={{ color: theme.colors.statusDanger }}>
+          Usage is unavailable. Check that the top plugin is running on this host.
+        </Text>
+      )}
+      <View
+        style={{
+          flexDirection: "row",
+          flexWrap: "wrap",
+          gap: 16,
+          justifyContent: layout.compact ? "center" : "flex-start",
+        }}
+      >
+        {DIALS.map(({ label, icon, pick }) => {
+          const value = usage.data ? pick(usage.data) : null;
+          return (
+            <Card key={label} theme={theme} width={dial + 32}>
+              <Dial
+                theme={theme}
+                size={dial}
+                icon={icon}
+                label={label}
+                value={value}
+                text={formatPercent(value)}
+              />
+              <Sparkline
+                theme={theme}
+                values={history.map(pick)}
+                scale={100}
+                width={inner}
+                slots={HISTORY_LENGTH}
+                color={(sample) =>
+                  sample === null ? theme.colors.foregroundMuted : zoneColor(theme, sample)
+                }
+              />
+            </Card>
+          );
+        })}
+        <Card theme={theme} width={dial + 32}>
+          <View style={{ height: dial * 0.9, width: dial, justifyContent: "center", gap: 6 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+              <Icon name="Gauge" size={14} color={theme.colors.foregroundMuted} />
+              <Text
+                style={{ color: theme.colors.foregroundMuted, fontSize: 12, letterSpacing: 0.6 }}
+              >
+                DISK I/O
+              </Text>
+            </View>
+            <Text
+              style={{
+                color: theme.colors.foreground,
+                fontSize: dial * 0.2,
+                fontWeight: "600",
+                fontVariant: ["tabular-nums"],
+              }}
+            >
+              {formatRate(usage.data?.io ?? null)}
+            </Text>
+            <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12 }}>
+              {`peak ${formatRate(peak)}`}
+            </Text>
+          </View>
+          <Sparkline
+            theme={theme}
+            values={io}
+            scale={scale}
+            width={inner}
+            slots={HISTORY_LENGTH}
+            color={() => theme.colors.accent}
+          />
+        </Card>
+      </View>
+      {usage.data && (
+        <Sessions
+          theme={theme}
+          sessions={usage.data.sessions}
+          other={usage.data.other}
+          onOpenAgent={navigation ? (agentId) => navigation.openAgent({ agentId }) : undefined}
+        />
+      )}
+      <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12 }}>
+        Updates every 5 seconds. Bars cover the last {(HISTORY_LENGTH * HISTORY_EVERY_MS) / 60_000}{" "}
+        minutes.
+      </Text>
+    </ScrollView>
+  );
+}

package/client/sessions.tsx

@@ -0,0 +1,91 @@
+import type { PluginTheme } from "@getpaseo/plugin";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Pressable, Text, View } from "react-native";
+import type { Session } from "../shared/usage";
+import { formatBytes, formatCores } from "./format";
+
+export function sessionLabel(session: Session): string {
+  return session.title || `Agent ${session.agentId.slice(0, 8)}`;
+}
+
+interface SessionsProps {
+  theme: PluginTheme;
+  /** `null` where the host cannot attribute processes to agents. */
+  sessions: Session[] | null;
+  other: { cores: number; rss: number };
+  onOpenAgent?: (agentId: string) => void;
+}
+
+/** Load by agent session, busiest first, with what is actually burning it. */
+export function Sessions({ theme, sessions, other, onOpenAgent }: SessionsProps) {
+  const muted = { color: theme.colors.foregroundMuted, fontSize: 12 };
+  const rows = [
+    <Text key="heading" style={{ ...muted, letterSpacing: 0.6 }}>
+      LOAD BY SESSION
+    </Text>,
+  ];
+
+  if (sessions === null) {
+    rows.push(
+      <Text key="unsupported" style={muted}>
+        Per-session load needs a Linux host.
+      </Text>,
+    );
+  } else if (sessions.length === 0) {
+    rows.push(
+      <Text key="empty" style={muted}>
+        No agent is running anything right now.
+      </Text>,
+    );
+  }
+  for (const session of sessions ?? []) {
+    const detail = [session.workspace, session.command].filter(Boolean).join(" · ");
+    rows.push(
+      <Pressable
+        key={session.agentId}
+        accessibilityRole={onOpenAgent ? "button" : undefined}
+        disabled={!onOpenAgent}
+        onPress={() => onOpenAgent?.(session.agentId)}
+        style={{ flexDirection: "row", alignItems: "center", gap: 10, paddingVertical: 6 }}
+      >
+        <View style={{ width: 14 }}>
+          {session.heavy && <Icon name="Flame" size={14} color={theme.colors.statusDanger} />}
+        </View>
+        <View style={{ flex: 1 }}>
+          <Text numberOfLines={1} style={{ color: theme.colors.foreground, fontSize: 14 }}>
+            {sessionLabel(session)}
+          </Text>
+          <Text numberOfLines={1} style={muted}>
+            {detail}
+          </Text>
+        </View>
+        <View style={{ alignItems: "flex-end" }}>
+          <Text
+            style={{
+              color: session.heavy ? theme.colors.statusDanger : theme.colors.foreground,
+              fontSize: 14,
+              fontVariant: ["tabular-nums"],
+            }}
+          >
+            {formatCores(session.cores)}
+          </Text>
+          <Text style={{ ...muted, fontVariant: ["tabular-nums"] }}>
+            {formatBytes(session.rss)}
+          </Text>
+        </View>
+      </Pressable>,
+    );
+  }
+  if (sessions !== null && (other.cores > 0 || other.rss > 0)) {
+    rows.push(
+      <View key="other" style={{ flexDirection: "row", gap: 10, paddingTop: 6 }}>
+        <View style={{ width: 14 }} />
+        <Text style={{ ...muted, flex: 1 }}>Everything else</Text>
+        <Text style={{ ...muted, fontVariant: ["tabular-nums"] }}>
+          {`${formatCores(other.cores)} · ${formatBytes(other.rss)}`}
+        </Text>
+      </View>,
+    );
+  }
+  return <View style={{ gap: 2 }}>{rows}</View>;
+}

package/client/usage.ts

@@ -0,0 +1,16 @@
+import { useRpc } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+import { getUsage } from "../shared/usage";
+
+export const SCREEN_ID = "usage";
+export const POLL_MS = 5000;
+
+export function useUsage(hostId: string) {
+  const loadUsage = useRpc(getUsage);
+  // The host id keys the cache so a host switch never shows another host's numbers.
+  return useQuery({
+    queryKey: ["top", hostId, "usage"],
+    queryFn: () => loadUsage({}),
+    refetchInterval: POLL_MS,
+  });
+}