@xpufx/paseo-top 0.4.3 → 0.4.5

package/OVERVIEW.md

@@ -0,0 +1,17 @@
+Top adds real-time host resource telemetry and session performance metrics directly to the Paseo composer trackbar, conversation timeline, and an interactive dashboard modal.
+
+The plugin displays live CPU and memory utilization, system load averages (1m, 5m, 15m), active agent turns, token consumption, and cost telemetry. An interactive dashboard modal provides visual resource gauges, multi-host fleet telemetry, workspace context, and configurable metric routing.
+
+## Capabilities and Data Access
+
+- **Host Resource Telemetry**: Samples CPU usage, memory utilization (including Linux `/proc/meminfo` available memory), load averages, host uptime, and core counts via local OS interfaces.
+- **Agent and Turn Telemetry**: Monitors active agent session metadata (model, provider, turn counts, input/output/cached tokens, execution error counts) and can stamp a summary card into the session timeline upon turn completion.
+- **Display Modes**: Supports Cycle Mode (rotates through metrics on a configurable interval), All-in-One Mode (unified ticker), and Multiple Mode (side-by-side pills).
+- **Multi-Host Telemetry**: When configured with multiple daemon hosts, queries registered hosts bounded to one probe per host on a 15-second cadence with a 4-second timeout to report online/offline status and host latency.
+- **Custom Metrics**: Supports user-defined metrics via declarative `.jsonc` definitions in scoped plugin storage (`~/.paseo/plugin-data/xpufx/top/pills/`) with optional periodic command execution and threshold status mapping.
+
+## Setup and Requirements
+
+- Runs on the Paseo daemon and requires Paseo 0.9.0 or later.
+- Telemetry sampling runs locally on the daemon host (Linux, macOS, Windows).
+- All plugin persistent configuration is stored within scoped plugin storage.

package/client/host-ui.tsx

@@ -0,0 +1,184 @@
+/**
+ * Re-export the shared UI composition package for `plugins/top`
+ * (xpufx-org/paseo#976, #1218, #1258).
+ *
+ * All host-delegating cards, buttons, badges, inputs, form rows, action bars,
+ * tabs, collapsibles, code blocks, gauges, about sections, and theme providers
+ * come directly from `@xpufx/paseo-plugin-ui`.
+ */
+
+import React from "react";
+import {
+  HostModalSection as BaseHostModalSection,
+  ModalBodyScrollOwnerContext,
+  type HostModalSectionProps,
+} from "@xpufx/paseo-plugin-ui";
+
+/**
+ * Top pill modal sections operate under the host single-scroller model
+ * (`hostScroll: true`, xpufx-org/paseo#975, #1054, #1258).
+ * Ensures fluid, unconstrained height when rendered with or without an outer
+ * host provider in testing harnesses.
+ */
+export function HostModalSection({ children, style, ...props }: HostModalSectionProps) {
+  return (
+    <ModalBodyScrollOwnerContext.Provider value="host">
+      <BaseHostModalSection style={style} {...props}>
+        {children}
+      </BaseHostModalSection>
+    </ModalBodyScrollOwnerContext.Provider>
+  );
+}
+
+export {
+  HostAboutSection,
+  HostActionBar,
+  HostActionBar as ActionBar,
+  HostAttentionBeacon,
+  HostAttentionBeacon as AttentionBeacon,
+  HostBadge,
+  HostBadge as Badge,
+  HostButton,
+  HostButton as Button,
+  HostCard,
+  HostCard as Card,
+  HostCardHeader,
+  HostCardHeader as CardHeader,
+  HostCodeBlock,
+  HostCodeBlock as CodeBlock,
+  HostCollapsible,
+  HostCollapsible as Collapsible,
+  HostCommandBox,
+  HostCommandBox as CommandBox,
+  HostCopyButton,
+  HostEmptyState,
+  HostEmptyState as EmptyState,
+  HostFormRow,
+  HostFormRow as FormRow,
+  HostGrid,
+  HostHighlightedText,
+  HostHighlightedText as HighlightedText,
+  HostInlineButton,
+  HostInlineButton as InlineButton,
+  HostKeyValue,
+  HostKeyValue as KeyValue,
+  HostKeyValueGroup,
+  HostKeyValueGroup as KeyValueGroup,
+  HostLayoutProvider,
+  HostMetricGauge,
+  HostModalBody,
+  HostModalBody as ModalBody,
+  HostProgressBar,
+  HostRow,
+  HostScroll,
+  HostSearchInput,
+  HostSectionHeader,
+  HostSelect,
+  HostSelect as Select,
+  HostStack,
+  HostStatusDot,
+  HostStatusDot as StatusDot,
+  HostTabs,
+  HostTabs as Tabs,
+  HostTextInput,
+  HostTextInput as TextInput,
+  HostThemeProvider,
+  HostToggle,
+  HostToggle as Toggle,
+  HostVital,
+  ModalBodyScrollOwnerContext,
+  alpha,
+  getStatusColor,
+  sanitizeFluidStyle,
+  useHostLayout,
+  useHostTheme,
+  useModalBodyScrollOwner,
+} from "@xpufx/paseo-plugin-ui";
+
+export type {
+  HighlightOptions,
+  HighlightPart,
+  HostAboutLink,
+  HostAboutSectionProps,
+  HostActionBarProps,
+  HostActionBarProps as ActionBarProps,
+  HostAttentionBeaconMode,
+  HostAttentionBeaconMode as AttentionBeaconMode,
+  HostAttentionBeaconProps,
+  HostAttentionBeaconProps as AttentionBeaconProps,
+  HostAttentionBeaconTone,
+  HostAttentionBeaconTone as AttentionBeaconTone,
+  HostBadgeProps,
+  HostBadgeProps as BadgeProps,
+  HostBadgeSize,
+  HostBadgeSize as BadgeSize,
+  HostBadgeStyle,
+  HostBadgeStyle as BadgeStyle,
+  HostButtonProps,
+  HostButtonProps as ButtonProps,
+  HostButtonSize,
+  HostButtonSize as ButtonSize,
+  HostButtonVariant,
+  HostButtonVariant as ButtonVariant,
+  HostCardHeaderProps,
+  HostCardHeaderProps as CardHeaderProps,
+  HostCardProps,
+  HostCardProps as CardProps,
+  HostCodeBlockProps,
+  HostCodeBlockProps as CodeBlockProps,
+  HostCollapsibleProps,
+  HostCollapsibleProps as CollapsibleProps,
+  HostCommandBoxProps,
+  HostCommandBoxProps as CommandBoxProps,
+  HostCopyButtonProps,
+  HostCopyButtonSize,
+  HostCopyButtonVariant,
+  HostEmptyStateProps,
+  HostEmptyStateProps as EmptyStateProps,
+  HostFormRowProps,
+  HostFormRowProps as FormRowProps,
+  HostGridProps,
+  HostHighlightedTextProps,
+  HostInlineButtonProps,
+  HostInlineButtonProps as InlineButtonProps,
+  HostKeyValueGroupProps,
+  HostKeyValueGroupProps as KeyValueGroupProps,
+  HostKeyValueProps,
+  HostKeyValueProps as KeyValueProps,
+  HostKeyValueTruncateMode,
+  HostKeyValueTruncateMode as KeyValueTruncateMode,
+  HostLayoutProviderProps,
+  HostMetricGaugeProps,
+  HostModalBodyProps,
+  HostModalBodyProps as ModalBodyProps,
+  HostModalSectionProps,
+  HostProgressBarProps,
+  HostRowProps,
+  HostScrollProps,
+  HostSearchInputProps,
+  HostSectionHeaderProps,
+  HostSelectOption,
+  HostSelectProps,
+  HostSelectProps as SelectProps,
+  HostStackProps,
+  HostStatusDotProps,
+  HostStatusDotProps as StatusDotProps,
+  HostSurfaceVariant,
+  HostTabItem,
+  HostTabsProps,
+  HostTabsProps as TabsProps,
+  HostTextInputProps,
+  HostTextInputProps as TextInputProps,
+  HostThemeProviderProps,
+  HostToggleProps,
+  HostToggleProps as ToggleProps,
+  HostVitalProps,
+  ModalBodyScrollOwner,
+  PluginTheme,
+  PluginUiTheme,
+  PluginUiTheme as TopTheme,
+  ResponsiveLayout,
+  ScrollViewInstance,
+  StatusVariant,
+  ThemeColors,
+} from "@xpufx/paseo-plugin-ui";

package/client/multi-host-view.tsx

@@ -1,24 +1,25 @@
 import React, { useMemo } from "react";
 import { Text } from "react-native";
 import {
-  Badge,
-  Card,
-  CardHeader,
-  EmptyState,
-  KeyValue,
-  KeyValueGroup,
-  Row,
-  SectionHeader,
-  Stack,
-  StatusDot,
-  usePluginTheme,
-} from "./vendor/paseo-plugin-helper/index";
+  HostBadge,
+  HostCard,
+  HostCardHeader,
+  HostEmptyState,
+  HostGrid,
+  HostKeyValue,
+  HostRow,
+  HostSectionHeader,
+  HostStack,
+  HostStatusDot,
+  useHostLayout,
+  useHostTheme,
+} from "./host-ui";
 import {
   aggregateFleet,
   type FleetHostSnapshot,
   type FleetHostStatus,
 } from "../shared/multi-host";
-import { useFleetPolling } from "./multi-host";
+import { multiHostSupported, useFleetPolling } from "./multi-host";
 
 const STATUS_VARIANT: Record<
   FleetHostStatus,
@@ -59,7 +60,8 @@ function FleetHostCard({
   snapshot: FleetHostSnapshot;
   now: number;
 }) {
-  const { colors } = usePluginTheme();
+  const { colors } = useHostTheme();
+  const { compact } = useHostLayout();
   const variant = STATUS_VARIANT[snapshot.status];
   const staleAge = formatStaleAge(snapshot.staleAt, now);
   const subtitle =
@@ -68,47 +70,47 @@ function FleetHostCard({
       : (staleAge ?? snapshot.error ?? "Not connected");
 
   return (
-    <Card variant="elevated">
-      <CardHeader
+    <HostCard variant="elevated">
+      <HostCardHeader
         icon="Server"
         title={snapshot.label}
         subtitle={subtitle}
         badge={
-          <Row gap={6} align="center">
-            <StatusDot
+          <HostRow gap={6} align="center">
+            <HostStatusDot
               variant={snapshot.status === "online" ? "success" : variant}
               pulse={snapshot.status === "online"}
             />
-            <Badge
+            <HostBadge
               label={STATUS_LABEL[snapshot.status]}
               variant={variant}
               size="sm"
             />
-          </Row>
+          </HostRow>
         }
       />
-      <KeyValueGroup>
-        <KeyValue label="Host" value={snapshot.serverId} truncate="middle" copyable />
-        <KeyValue label="Latency" value={formatLatency(snapshot.latencyMs)} />
-        <KeyValue
+      <HostGrid columns={compact ? 1 : 2} gap={12}>
+        <HostKeyValue label="Host" value={snapshot.serverId} truncate="middle" copyable />
+        <HostKeyValue label="Latency" value={formatLatency(snapshot.latencyMs)} />
+        <HostKeyValue
           label="Agents"
           value={snapshot.counts ? String(snapshot.counts.agents) : "--"}
         />
-        <KeyValue
+        <HostKeyValue
           label="Active agents"
           value={snapshot.counts ? String(snapshot.counts.activeAgents) : "--"}
         />
-        <KeyValue
+        <HostKeyValue
           label="Workspaces"
           value={snapshot.counts ? String(snapshot.counts.workspaces) : "--"}
         />
-      </KeyValueGroup>
+      </HostGrid>
       {snapshot.status === "error" && snapshot.error ? (
         <Text style={{ marginTop: 8, fontSize: 11, color: colors.statusDanger }}>
           {snapshot.error}
         </Text>
       ) : null}
-    </Card>
+    </HostCard>
   );
 }
 
@@ -122,14 +124,26 @@ function FleetHostCard({
  * Top behavior is unaffected whenever the tab is not selected.
  */
 export function FleetView() {
-  const { colors } = usePluginTheme();
+  const { colors } = useHostTheme();
   const snapshots = useFleetPolling();
   const now = Date.now();
   const aggregate = useMemo(() => aggregateFleet(snapshots), [snapshots]);
 
+  // A host that does not supply `useHosts`/`getPaseoClient` (the mobile bundle)
+  // cannot borrow remote clients. Say so instead of throwing.
+  if (!multiHostSupported()) {
+    return (
+      <HostEmptyState
+        icon="Server"
+        title="Multi-host fleet unavailable"
+        description="This host build does not provide multi-host access. Open Paseo on desktop to see other hosts."
+      />
+    );
+  }
+
   if (snapshots.length === 0) {
     return (
-      <EmptyState
+      <HostEmptyState
         icon="Server"
         title="No other hosts"
         description="Configure additional hosts in Paseo to see their fleet status here."
@@ -138,33 +152,33 @@ export function FleetView() {
   }
 
   return (
-    <Stack gap={12}>
+    <HostStack gap={12}>
       <Text style={{ fontSize: 16, fontWeight: "700", color: colors.foreground }}>
         Multi-Host Fleet
       </Text>
 
-      <Card variant="elevated">
-        <CardHeader
+      <HostCard variant="elevated">
+        <HostCardHeader
           title="Fleet Totals"
           icon="Activity"
           subtitle="Counts only. CPU/RAM/load stay per-host."
         />
-        <KeyValueGroup>
-          <KeyValue label="Hosts" value={`${aggregate.responsive}/${aggregate.hosts} responsive`} />
-          <KeyValue
+        <HostGrid columns={2} gap={12}>
+          <HostKeyValue label="Hosts" value={`${aggregate.responsive}/${aggregate.hosts} responsive`} />
+          <HostKeyValue
             label="Online / Stale"
             value={`${aggregate.online} / ${aggregate.stale}`}
           />
-          <KeyValue label="Agents" value={String(aggregate.counts.agents)} />
-          <KeyValue
+          <HostKeyValue label="Agents" value={String(aggregate.counts.agents)} />
+          <HostKeyValue
             label="Active agents"
             value={String(aggregate.counts.activeAgents)}
           />
-          <KeyValue label="Workspaces" value={String(aggregate.counts.workspaces)} />
-        </KeyValueGroup>
-      </Card>
+          <HostKeyValue label="Workspaces" value={String(aggregate.counts.workspaces)} />
+        </HostGrid>
+      </HostCard>
 
-      <SectionHeader title="Hosts" count={snapshots.length} />
+      <HostSectionHeader title="Hosts" count={snapshots.length} />
       {snapshots.map((snapshot) => (
         <FleetHostCard
           key={snapshot.serverId}
@@ -172,6 +186,6 @@ export function FleetView() {
           now={now}
         />
       ))}
-    </Stack>
+    </HostStack>
   );
 }

package/client/multi-host.ts

@@ -1,24 +1,43 @@
-import { getPaseoClient, useHosts } from "@getpaseo/plugin/client";
 import { useEffect, useMemo, useRef, useState } from "react";
 import {
-  MultiHostPoller,
+  getOptionalPaseoClient,
+  isMultiHostSupported,
+  useOptionalHosts,
+} from "./vendor/paseo-plugin-helper/lifecycle/index";
+import {
+  createMultiHostPoller,
+  type MultiHostPoller,
   type FleetHostClient,
   type FleetHostCounts,
   type FleetHostSnapshot,
 } from "../shared/multi-host";
 
 /**
- * Wrap a borrowed `getPaseoClient(serverId)` as a fleet client.
+ * True when the running host supplies the multi-host primitives.
+ *
+ * Feature detection lives in `paseo-plugin-helper/lifecycle` so top and
+ * x-comms share one seam; this wrapper keeps the Fleet tab's local name.
+ */
+export function multiHostSupported(): boolean {
+  return isMultiHostSupported();
+}
+
+/**
+ * Wrap a borrowed `getOptionalPaseoClient(serverId)` as a fleet client.
  *
  * Only counts are read. The borrowed API exposes agents/workspaces/projects/
  * terminals/providers/config and no host-metrics RPC, so the fleet view cannot
  * show remote CPU/RAM/load/uptime; fabricating them would be mock data.
  */
 export function createFleetClient(serverId: string): FleetHostClient {
-  // getPaseoClient throws for a non-online/unknown host; the poller only
-  // acquires for online hosts, and the throw is caught per host so one bad
-  // host cannot break the others.
-  const client = getPaseoClient(serverId);
+  // getOptionalPaseoClient throws for a non-online/unknown host; the poller
+  // only acquires for online hosts, and the throw is caught per host so one bad
+  // host cannot break the others. It returns undefined only when the host omits
+  // the seam entirely, which the poller never reaches.
+  const client = getOptionalPaseoClient(serverId);
+  if (!client) {
+    throw new Error("multi-host fleet is not available on this host");
+  }
   return {
     async readCounts(): Promise<FleetHostCounts> {
       const [agents, workspaces] = await Promise.all([
@@ -47,15 +66,19 @@ export interface UseFleetPollingOptions {
 /**
  * Bounded multi-host fleet polling hook.
  *
- * Enumerates online hosts with `useHosts()`, acquires a borrowed
- * `getPaseoClient(serverId)` per online host, and drives the pure
+ * Enumerates online hosts with `useOptionalHosts()`, acquires a borrowed
+ * `getOptionalPaseoClient(serverId)` per online host, and drives the pure
  * {@link MultiHostPoller} state machine: max one in-flight probe per host,
  * 15s cadence, 4s per-host timeout, stale marking, and dispose/reacquire on
  * host status transitions. Local Top behavior is untouched because nothing
  * starts unless the fleet view is mounted and enabled.
  */
 export function useFleetPolling({ enabled = true }: UseFleetPollingOptions = {}) {
-  const hosts = useHosts();
+  // The mobile host omits the primitives; nothing to poll, so no hooks run and
+  // the caller renders an unavailable state. Both checks are module-constant,
+  // so the hook order is stable for a given host.
+  const supported = isMultiHostSupported();
+  const hosts = useOptionalHosts();
   const [snapshots, setSnapshots] = useState<FleetHostSnapshot[]>([]);
   const pollerRef = useRef<MultiHostPoller | null>(null);
 
@@ -75,8 +98,8 @@ export function useFleetPolling({ enabled = true }: UseFleetPollingOptions = {})
   hostInputsRef.current = hostInputs;
 
   useEffect(() => {
-    if (!enabled) return;
-    const poller = new MultiHostPoller({
+    if (!enabled || !supported) return;
+    const poller = createMultiHostPoller({
       acquire: createFleetClient,
       onUpdate: setSnapshots,
     });
@@ -88,7 +111,7 @@ export function useFleetPolling({ enabled = true }: UseFleetPollingOptions = {})
       pollerRef.current = null;
       setSnapshots([]);
     };
-  }, [enabled]);
+  }, [enabled, supported]);
 
   useEffect(() => {
     pollerRef.current?.setHosts(hostInputs);

package/client/pill-labels.ts

@@ -40,7 +40,8 @@ export type PillItemType =
   | "changes"
   | "tokens"
   | "tools"
-  | "turns";
+  | "turns"
+  | "velocity";
 
 export interface SegmentSnapshot {
   data?: SystemResources;
@@ -56,6 +57,20 @@ export interface SegmentSnapshot {
   worktreeLocationText?: string;
 }
 
+/**
+ * First non-blank string wins, else the fallback. `??` only guards null and
+ * undefined, so a present-but-empty host field (blank `title`, `provider`,
+ * `branch`, `agentId`) slipped through as an empty label. On a button-shaped
+ * host an empty label renders icon-only, which reads as the pill collapsing to
+ * a skinny/empty line (xpufx-org/paseo#507).
+ */
+function firstNonBlank(fallback: string, ...values: Array<string | null | undefined>): string {
+  for (const value of values) {
+    if (typeof value === "string" && value.trim().length > 0) return value;
+  }
+  return fallback;
+}
+
 export interface TokenMetrics {
   inputTokens?: number;
   outputTokens?: number;
@@ -66,6 +81,9 @@ export interface TokenMetrics {
   costUsd?: number;
 }
 
+/** Context pressure level classification. */
+export type ContextPressureLevel = "normal" | "warning" | "high";
+
 export function formatCompactTokens(n: number): string {
   if (!Number.isFinite(n) || n <= 0) return "0";
   if (n >= 1_000_000) {
@@ -79,6 +97,28 @@ export function formatCompactTokens(n: number): string {
   return `${Math.round(n)}`;
 }
 
+export function formatTurnTokensPerSecond(
+  outputTokens: number | undefined,
+  durationMs: number | undefined,
+): string | null {
+  if (
+    outputTokens == null ||
+    durationMs == null ||
+    !Number.isFinite(outputTokens) ||
+    !Number.isFinite(durationMs) ||
+    outputTokens <= 0 ||
+    durationMs <= 0
+  ) {
+    return null;
+  }
+  const rate = outputTokens / (durationMs / 1000);
+  if (!Number.isFinite(rate) || rate <= 0) return null;
+  if (rate < 10) {
+    return `${parseFloat(rate.toFixed(1))} tok/s`;
+  }
+  return `${Math.round(rate)} tok/s`;
+}
+
 export function extractTokenMetrics(snap: SegmentSnapshot): TokenMetrics | null {
   const live = snap.data?.liveUsage;
   const last = snap.data?.lastTurn;
@@ -262,28 +302,38 @@ export function describeSegment(
   const prefix = def?.shortLabel ? `${def.shortLabel} ` : "";
   switch (item) {
     case "branch":
-      return { icon, iconTone: "accent", text: data?.branch ?? "--", tone: "foreground" };
+      return {
+        icon,
+        iconTone: "accent",
+        text: firstNonBlank("--", data?.branch),
+        tone: "foreground",
+      };
     case "worktree":
       return {
         icon,
         iconTone: "accent",
-        text: worktreeLocationText || "--",
+        text: firstNonBlank("--", worktreeLocationText),
         tone: "foreground",
       };
     case "agent_title":
-      return { icon, iconTone: "accent", text: agent?.title ?? "Agent", tone: "foreground" };
+      return {
+        icon,
+        iconTone: "accent",
+        text: firstNonBlank("Agent", agent?.title),
+        tone: "foreground",
+      };
     case "agent":
       return {
         icon,
         iconTone: "accent",
-        text: agent?.model || agent?.provider || "Agent",
+        text: firstNonBlank("Agent", agent?.model, agent?.provider),
         tone: "foreground",
       };
     case "agent_provider":
       return {
         icon,
         iconTone: "accent",
-        text: agent?.provider ?? "Provider",
+        text: firstNonBlank("Provider", agent?.provider),
         tone: "foreground",
       };
     case "agent_activity": {
@@ -299,7 +349,7 @@ export function describeSegment(
       return {
         icon,
         iconTone: "accent",
-        text: agentId && agentId.length > 7 ? agentId.slice(0, 7) : agentId ?? "--",
+        text: agentId && agentId.length > 7 ? agentId.slice(0, 7) : firstNonBlank("--", agentId),
         tone: "foreground",
       };
     case "load":
@@ -395,6 +445,70 @@ export function describeSegment(
         tone: "foreground",
       };
     }
+    case "velocity": {
+      // Pull velocity from liveUsage (real-time) or lastTurn (post-turn).
+      const tps =
+        data?.tokensPerSecond ?? data?.lastTurn?.tokensPerSecond;
+      const ctxPct =
+        data?.contextUtilizationPct ?? data?.lastTurn?.contextUtilizationPct;
+      const ctxLevel =
+        data?.contextPressureLevel ?? data?.lastTurn?.contextPressureLevel;
+
+      if (tps == null || !Number.isFinite(tps)) {
+        return {
+          icon,
+          iconTone: "none",
+          prefix,
+          prefixTone: "muted",
+          text: "--",
+          tone: "muted",
+        };
+      }
+
+      // Cache hit rate from liveUsage.
+      const live = data?.liveUsage;
+      let cachePct: number | undefined;
+      if (
+        live &&
+        live.inputTokens != null &&
+        live.cachedInputTokens != null &&
+        live.inputTokens > 0
+      ) {
+        cachePct = Math.round((live.cachedInputTokens / live.inputTokens) * 100);
+      }
+
+      // Build label: ⚡ N tok/s · M% cache
+      let text = `${Math.round(tps)} tok/s`;
+      let tone: SegmentTone = "success";
+      if (cachePct != null) {
+        text += ` · ${cachePct}% cache`;
+      }
+
+      // Context pressure badge as trailing.
+      let trailing: string | undefined;
+      let trailingTone: SegmentTone = "foreground";
+      if (ctxLevel === "high") {
+        trailing = "⚠️ high ctx";
+        trailingTone = "danger";
+        tone = "danger";
+      } else if (ctxLevel === "warning") {
+        trailing = "⚠️ warn ctx";
+        trailingTone = "warning";
+        tone = "warning";
+      } else if (ctxPct != null) {
+        trailing = `${ctxPct}% ctx`;
+        trailingTone = "foreground";
+      }
+
+      return {
+        icon,
+        iconTone: "accent",
+        text,
+        tone,
+        trailing,
+        trailingTone,
+      };
+    }
     case "cpu_ram":
     default: {
       const ram =
@@ -458,6 +572,9 @@ export function enabledItemsForSettings(settings: TopSettings): PillItemType[] {
   if (settings.metricSurfaces && isPillEnabled(settings.metricSurfaces.turns)) {
     items.push("turns");
   }
+  if (settings.metricSurfaces && isPillEnabled(settings.metricSurfaces.velocity)) {
+    items.push("velocity");
+  }
   return items;
 }