@xpufx/paseo-top 0.4.0

package/client/resources-query.ts

@@ -0,0 +1,68 @@
+import {
+  useAutoRefreshQuery,
+  useRpcQuery,
+  sharedSnapshotKey,
+  normalizeSnapshotScope,
+  type UseAutoRefreshQueryOptions,
+} from "paseo-plugin-helper/client";
+import {
+  getSystemResourcesRpc,
+  getCustomPillsRpc,
+  type SystemResources,
+} from "../shared/resources";
+
+interface TopResourceQueryInput {
+  directory?: string;
+}
+
+const EMPTY_PARAMS = {};
+
+export { normalizeSnapshotScope };
+
+/**
+ * The single workspace-scoped resource snapshot path for Top.
+ *
+ * Pill, modal, and surface consumers share one React Query cache identity
+ * per workspace (host-wide when no directory is known). The key carries no
+ * selective `fields`: field-specific keys fragmented the cache and gave
+ * every visible pill its own poller even though all views consume one host
+ * snapshot. Selective field collection stays available on the server RPC
+ * for genuinely cheaper paths, and the expensive MCP/plugin detection there
+ * remains behind its long-lived cache/in-flight guard.
+ *
+ * Custom-pill configuration/state polling is a different data source and
+ * keeps its own query (`top.custom-pills.get` / `top.custom-pills.list`).
+ *
+ * Polling is lifecycle-aware by mount: the query only runs while a consumer
+ * is mounted, and pass `isOpen: false` to pause a mounted-but-hidden view.
+ */
+export function useTopResourceQuery(
+  directory?: string | null,
+  options?: Omit<
+    UseAutoRefreshQueryOptions<SystemResources>,
+    "defaultRate" | "isOpen"
+  > & {
+    defaultRate?: UseAutoRefreshQueryOptions<SystemResources>["defaultRate"];
+    isOpen?: boolean;
+  },
+) {
+  const [, keyInput] = sharedSnapshotKey(
+    getSystemResourcesRpc.name,
+    directory,
+  );
+  const input: TopResourceQueryInput = keyInput;
+  return useAutoRefreshQuery(getSystemResourcesRpc, input, {
+    defaultRate: "5s",
+    isOpen: true,
+    ...options,
+  });
+}
+
+/**
+ * Custom-pill state snapshot shared by the live pill label and its
+ * drilldown modal. Both poll the same `top.custom-pills.get` payload on the
+ * same cadence, so they read one query instead of registering two pollers.
+ */
+export function useCustomPillsQuery() {
+  return useRpcQuery(getCustomPillsRpc, EMPTY_PARAMS, { refetchInterval: 3000 });
+}

package/client/settings-ui.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Text } from "react-native";
+import { Button, Row, Stack, usePluginTheme } from "paseo-plugin-helper/client";
+
+export interface ChipOption<T extends string | number> {
+  id: T;
+  label: string;
+  description?: string;
+}
+
+export interface ChoiceChipsProps<T extends string | number> {
+  options: ChipOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  /** Show the selected option's description under the chips. */
+  showActiveDescription?: boolean;
+}
+
+/**
+ * Single-select chip row shared by every Top settings surface. Built from the
+ * helper `Button`/`Row` primitives so the modal and the sidebar dashboard
+ * cannot drift into two hand-rolled chip systems.
+ */
+export function ChoiceChips<T extends string | number>({
+  options,
+  value,
+  onChange,
+  showActiveDescription = false,
+}: ChoiceChipsProps<T>) {
+  const { colors } = usePluginTheme();
+  const selected = options.find((option) => option.id === value);
+  return (
+    <Stack gap={6}>
+      <Row wrap gap={6}>
+        {options.map((option) => (
+          <Button
+            key={String(option.id)}
+            label={option.label}
+            size="sm"
+            variant={option.id === value ? "primary" : "ghost"}
+            onPress={() => onChange(option.id)}
+          />
+        ))}
+      </Row>
+      {showActiveDescription && selected?.description ? (
+        <Text style={{ fontSize: 9, color: colors.foregroundMuted }}>{selected.description}</Text>
+      ) : null}
+    </Stack>
+  );
+}

package/client/surface.tsx

@@ -0,0 +1,364 @@
+import React, { useState } from "react";
+import { Text, View } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import {
+  AboutSection,
+  Button,
+  Card,
+  KeyValue,
+  KeyValueGroup,
+  MetricGauge,
+  ModalBody,
+  Row,
+  Stack,
+  Tabs,
+  Toggle,
+  CardHeader,
+  usePluginSettings,
+  usePluginTheme,
+} from "paseo-plugin-helper/client";
+import { formatBytes, formatUptime } from "paseo-plugin-helper/shared";
+import {
+  topSettingsContract,
+  checkboxesFromTarget,
+  targetFromCheckboxes,
+  METRIC_DEFINITIONS,
+  type PillMode,
+  type TopSettings,
+} from "../shared/resources";
+import { PLUGIN_VERSION } from "../shared/version";
+import { notifySettingsChanged } from "./pill";
+import { ChoiceChips } from "./settings-ui";
+import { useTopResourceQuery } from "./resources-query";
+
+type SurfaceTab = "system" | "settings" | "about";
+
+const TABS = [
+  { id: "system", label: "Activity", shortLabel: "Activity", icon: "Activity" },
+  { id: "settings", label: "Settings", shortLabel: "Settings", icon: "Sliders" },
+  { id: "about", label: "About", shortLabel: "About", icon: "Info" },
+];
+
+const TIMELINE_CADENCE_OPTIONS = Array.from({ length: 11 }, (_, n) => ({
+  id: n,
+  label: n === 0 ? "Never" : n === 1 ? "Every turn" : `${n}`,
+}));
+
+const CPU_THRESHOLDS = { warning: 60, danger: 85 };
+const MEM_THRESHOLDS = { warning: 70, danger: 85 };
+
+// Keep the dashboard a readable centered column instead of stretching
+// edge-to-edge on large viewports. The cap lives in the helper
+// (`ModalBody maxContentWidth`); this is the only place the surface picks
+// the value.
+const TOP_CONTENT_MAX_WIDTH = 600;
+
+export function TopDashboardSurface(_props: PluginSurfaceProps) {
+  const { colors } = usePluginTheme();
+  const [activeTab, setActiveTab] = useState<SurfaceTab>("system");
+  // No background settings poll: mount/focus verification plus mutation
+  // invalidation keep the dashboard in sync without daemon churn.
+  const { settings, updateSettings, resetSettings } = usePluginSettings(
+    topSettingsContract,
+  );
+  // The dashboard surface carries no workspace scope, so it reads the
+  // host-wide entry of the same shared snapshot path the pill and modal use
+  // per workspace (see useTopResourceQuery).
+  const { data, isLoading } = useTopResourceQuery();
+
+  const pillHidden = settings.showComposerPill === false;
+
+  const applySettings = (updates: Partial<TopSettings>) => {
+    const changed = Object.entries(updates).some(
+      ([key, value]) =>
+        !Object.is((settings as Record<string, unknown>)[key], value),
+    );
+    if (!changed) return;
+    const next = { ...settings, ...updates };
+    updateSettings(updates);
+    notifySettingsChanged(next);
+  };
+
+  return (
+    <View style={[styles.root, { backgroundColor: colors.surface0 }]}>
+      <ModalBody
+        headerMode="pinned"
+        maxContentWidth={TOP_CONTENT_MAX_WIDTH}
+        header={
+          <Tabs
+            tabs={TABS}
+            activeTab={activeTab}
+            onTabChange={(id) => setActiveTab(id as SurfaceTab)}
+          />
+        }
+        headerStyle={{
+          backgroundColor: colors.surface0,
+          paddingHorizontal: 12,
+          paddingTop: 12,
+          paddingBottom: 6,
+        }}
+        contentContainerStyle={{
+          gap: 12,
+          paddingHorizontal: 12,
+          paddingBottom: 12,
+          paddingTop: 6,
+        }}
+        refreshing={isLoading}
+      >
+        {activeTab === "system" && (
+        <Stack gap={12}>
+          <Text style={{ fontSize: 16, fontWeight: "700", color: colors.foreground }}>
+            Host System Resources
+          </Text>
+
+          {pillHidden && (
+            <Card variant="elevated">
+              <Text style={{ fontSize: 12, fontWeight: "600", color: colors.foregroundMuted }}>
+                Composer pill is hidden in trackbar. You can re-enable it from the Settings tab above.
+              </Text>
+            </Card>
+          )}
+
+          <Card variant="elevated">
+            <Row justify="space-around" align="center" style={styles.gaugeContainer}>
+              <MetricGauge
+                value={data?.cpuUsagePercent ?? 0}
+                thresholds={CPU_THRESHOLDS}
+                label="CPU Load"
+                size={72}
+              />
+              <MetricGauge
+                value={data?.memoryUsedPercent ?? 0}
+                thresholds={MEM_THRESHOLDS}
+                label="RAM Used"
+                size={72}
+              />
+            </Row>
+          </Card>
+
+          <Card variant="elevated">
+            <KeyValueGroup>
+              <KeyValue
+                label="CPU"
+                value={data?.cpuUsagePercent !== undefined ? `${data.cpuUsagePercent}%` : "--"}
+              />
+              <KeyValue
+                label="Memory"
+                value={
+                  data?.memoryUsedBytes !== undefined
+                    ? `${formatBytes(data.memoryUsedBytes, { compact: true, decimals: 1 })} (${data.memoryUsedPercent ?? "--"}%)`
+                    : "--"
+                }
+              />
+              <KeyValue
+                label="Load"
+                value={data?.loadAvg?.[0] !== undefined ? data.loadAvg[0].toFixed(2) : "--"}
+              />
+              <KeyValue
+                label="Uptime"
+                value={data?.uptimeSeconds ? formatUptime(data.uptimeSeconds) : "--"}
+              />
+              <KeyValue label="Branch" value={data?.branch ?? "--"} copyable />
+              <KeyValue
+                label="MCP"
+                value={
+                  data?.mcp && typeof data.mcp.total === "number"
+                    ? `${data.mcp.healthy}/${data.mcp.total} healthy`
+                    : "MCP --"
+                }
+              />
+            </KeyValueGroup>
+          </Card>
+          {isLoading && !data ? (
+            <Text style={{ fontSize: 12, color: colors.foregroundMuted }}>
+              Loading live snapshot...
+            </Text>
+          ) : null}
+        </Stack>
+      )}
+
+      {activeTab === "settings" && (
+        <Stack gap={12}>
+          <Card variant="elevated">
+            <CardHeader
+              title="Pill Display Mode"
+              icon="LayoutGrid"
+              subtitle="How active items appear in the composer trackbar"
+            />
+            <ChoiceChips
+              options={[
+                { id: "cycle", label: "Cycle", description: "Rotate one at a time" },
+                { id: "all", label: "All in One", description: "Combined into one pill" },
+                { id: "multiple", label: "Multiple", description: "Dedicated pills" },
+              ]}
+              value={settings.pillMode ?? "cycle"}
+              showActiveDescription
+              onChange={(pillMode: PillMode) => applySettings({ pillMode })}
+            />
+            <View style={styles.settingsSpacer}>
+              <Toggle
+                label="Show Composer Pill"
+                description="Hide the composer pill entirely; the dashboard stays available from the sidebar"
+                value={settings.showComposerPill ?? true}
+                onValueChange={(val) => applySettings({ showComposerPill: val })}
+              />
+            </View>
+          </Card>
+
+          <Card variant="elevated">
+            <CardHeader
+              title="Metric Surfaces"
+              icon="Sliders"
+              subtitle="Choose where each metric appears (pill vs timeline)"
+            />
+            <Stack gap={12}>
+              {METRIC_DEFINITIONS.map((def) => {
+                const boxes = checkboxesFromTarget(settings.metricSurfaces?.[def.id]);
+                const setBox = (which: "pill" | "timeline", val: boolean) => {
+                  const nextBoxes = { ...boxes, [which]: val };
+                  if (def.pillOnly) nextBoxes.timeline = false;
+                  applySettings({
+                    metricSurfaces: {
+                      ...settings.metricSurfaces,
+                      [def.id]: targetFromCheckboxes(nextBoxes.pill, nextBoxes.timeline),
+                    } as TopSettings["metricSurfaces"],
+                  });
+                };
+                return (
+                  <View key={def.id}>
+                    <Text style={{ fontSize: 11, fontWeight: "700", color: colors.foreground }}>
+                      {def.title}
+                    </Text>
+                    <Row gap={24} align="center" style={styles.metricTargets}>
+                      <Row gap={6} align="center">
+                        <Text style={[styles.metricTargetLabel, { color: colors.foreground }]}>
+                          Pill
+                        </Text>
+                        <Toggle value={boxes.pill} onValueChange={(val) => setBox("pill", val)} />
+                      </Row>
+                      <Row gap={6} align="center">
+                        <Text style={[styles.metricTargetLabel, { color: colors.foreground }]}>
+                          Timeline
+                        </Text>
+                        <Toggle
+                          value={boxes.timeline && !def.pillOnly}
+                          disabled={!!def.pillOnly}
+                          onValueChange={(val) => setBox("timeline", val)}
+                        />
+                      </Row>
+                    </Row>
+                  </View>
+                );
+              })}
+            </Stack>
+          </Card>
+
+          <Card variant="elevated">
+            <CardHeader
+              title="Rotation Speed"
+              icon="Clock"
+              value={
+                <Text style={{ color: colors.accent, fontWeight: "600" }}>
+                  {`${settings.intervalSeconds}s`}
+                </Text>
+              }
+            />
+            <ChoiceChips
+              options={[2, 3, 4, 6].map((sec) => ({ id: sec, label: `${sec}s` }))}
+              value={settings.intervalSeconds}
+              onChange={(intervalSeconds) => applySettings({ intervalSeconds })}
+            />
+          </Card>
+
+          <Card variant="elevated">
+            <CardHeader
+              title="Timeline Cadence"
+              icon="Clock"
+              value={
+                <Text style={{ color: colors.accent, fontWeight: "600" }}>
+                  {(settings.timelineCadence ?? 1) === 0
+                    ? "Never"
+                    : (settings.timelineCadence ?? 1) === 1
+                      ? "Every turn"
+                      : `Every ${(settings.timelineCadence ?? 1)} turns`}
+                </Text>
+              }
+              subtitle="How often a card is stamped into the timeline view (0 = never)"
+            />
+            <ChoiceChips
+              options={TIMELINE_CADENCE_OPTIONS}
+              value={settings.timelineCadence ?? 1}
+              onChange={(timelineCadence) => applySettings({ timelineCadence })}
+            />
+          </Card>
+
+          <Button
+            label="Reset to Defaults"
+            variant="secondary"
+            size="sm"
+            onPress={() => {
+              void resetSettings().then((defaults) => {
+                notifySettingsChanged(defaults ?? topSettingsContract.defaultSettings);
+              });
+            }}
+          />
+        </Stack>
+      )}
+
+      {activeTab === "about" && (
+        <AboutSection
+          name="paseo-top"
+          description="Live host system and workspace monitor for Paseo composer trackbar."
+          version={data?.version ?? PLUGIN_VERSION}
+          author="xpufx"
+          repository="https://github.com/xpufx/paseo-top"
+          issues="https://github.com/xpufx/paseo-top/issues"
+          license="MIT"
+          density="tiny"
+          extraItems={[
+            {
+              label: "Host Platform",
+              value: data?.platform ? `${data.platform} (${data.arch ?? "unknown"})` : "Linux",
+              copyable: true,
+            },
+            { label: "Host Name", value: data?.hostname ?? "localhost", copyable: true },
+            { label: "CPU Model", value: data?.cpuModel ?? "unknown", copyable: true },
+            { label: "CPU Cores", value: `${data?.cpuCores ?? 0} cores` },
+            {
+              label: "Total Memory",
+              value: data?.memoryTotalBytes ? formatBytes(data.memoryTotalBytes) : "unknown",
+            },
+            {
+              label: "Host Uptime",
+              value: data?.uptimeSeconds ? formatUptime(data.uptimeSeconds) : "unknown",
+            },
+          ]}
+        />
+      )}
+    </ModalBody>
+    </View>
+  );
+}
+
+const styles = {
+  root: {
+    flex: 1,
+    minHeight: 0,
+    width: "100%",
+  },
+  gaugeContainer: {
+    paddingVertical: 12,
+    width: "100%",
+  },
+  settingsSpacer: {
+    marginTop: 12,
+  },
+  metricTargets: {
+    paddingLeft: 4,
+    marginTop: 4,
+  },
+  metricTargetLabel: {
+    fontSize: 9,
+    fontWeight: "600",
+  },
+} as const;

package/client/telemetry-copy.ts

@@ -0,0 +1,105 @@
+import { formatUptime } from "paseo-plugin-helper/shared";
+import { formatCompactTokens, type TopAgentSnapshot } from "./pill-labels";
+import type { TopTimelineTelemetryData } from "../shared/resources";
+
+export interface TelemetryCopyInput {
+  data: TopTimelineTelemetryData;
+  liveUsage?: TopAgentSnapshot["lastUsage"] | null;
+  timeLabel?: string;
+}
+
+function outcomeLabel(kind: TopTimelineTelemetryData["outcomeKind"]): string {
+  switch (kind) {
+    case "completed":
+      return "Turn Completed";
+    case "failed":
+      return "Turn Failed";
+    case "canceled":
+      return "Turn Canceled";
+    default:
+      return "Turn Ended";
+  }
+}
+
+function shortAgentId(agentId: string | undefined): string | undefined {
+  if (!agentId) return undefined;
+  return agentId.length > 7 ? agentId.slice(0, 7) : agentId;
+}
+
+/**
+ * Plain-text digest of a styled timeline card. Web's copy handler only rebuilds
+ * selections inside `[data-testid="assistant-message"]`, so a plugin/timeline
+ * item's selection copies nothing (xpufx-org/paseo#278). This produces the
+ * clipboard payload for the card's explicit Copy control instead.
+ */
+export function buildTelemetryCopyText({ data, liveUsage, timeLabel }: TelemetryCopyInput): string {
+  const inputTokens = data.inputTokens ?? liveUsage?.inputTokens;
+  const outputTokens = data.outputTokens ?? liveUsage?.outputTokens;
+  const cachedTokens =
+    data.cachedTokens ??
+    data.cachedInputTokens ??
+    liveUsage?.cachedInputTokens ??
+    liveUsage?.cachedTokens;
+  const contextUsedTokens =
+    data.contextUsedTokens ??
+    liveUsage?.contextWindowUsedTokens ??
+    liveUsage?.contextUsedTokens;
+  const contextMaxTokens =
+    data.contextMaxTokens ??
+    liveUsage?.contextWindowMaxTokens ??
+    liveUsage?.contextMaxTokens;
+  const costUsd = data.costUsd ?? liveUsage?.totalCostUsd ?? liveUsage?.costUsd;
+
+  const lines: string[] = [outcomeLabel(data.outcomeKind)];
+
+  const time = timeLabel ?? data.timestamp;
+  if (time) lines.push(time);
+
+  const id = shortAgentId(data.agentId);
+  if (id) lines.push(`Agent ${id}`);
+
+  const model = data.agentModel ?? undefined;
+  const provider = data.agentProvider ?? undefined;
+  if (model || provider) {
+    lines.push(`${model ?? "model --"} (${provider ?? "default"})`);
+  }
+
+  if (data.branch) lines.push(`Branch ${data.branch}`);
+  if (data.worktree) lines.push(`Worktree ${data.worktree}`);
+
+  const totalTokens =
+    inputTokens != null || outputTokens != null
+      ? (inputTokens ?? 0) + (outputTokens ?? 0)
+      : undefined;
+
+  if (contextUsedTokens != null && contextMaxTokens != null && contextMaxTokens > 0) {
+    const percent = Math.round((contextUsedTokens / contextMaxTokens) * 100);
+    lines.push(`Tokens ${formatCompactTokens(contextUsedTokens)}/${formatCompactTokens(contextMaxTokens)} (${percent}% ctx)`);
+  } else if (totalTokens != null) {
+    lines.push(`Tokens ${inputTokens ?? 0} in / ${outputTokens ?? 0} out (${totalTokens} total)`);
+  } else if (contextUsedTokens != null) {
+    lines.push(`Tokens ${formatCompactTokens(contextUsedTokens)} ctx`);
+  }
+
+  if (cachedTokens != null) lines.push(`Cache ${cachedTokens.toLocaleString()}`);
+  if (costUsd != null) {
+    lines.push(`Cost $${costUsd < 0.01 ? costUsd.toFixed(4) : costUsd.toFixed(2)}`);
+  }
+
+  if (data.durationMs != null) lines.push(`Duration ${(data.durationMs / 1000).toFixed(1)}s`);
+  if (data.toolCalls != null) {
+    lines.push(`Tools ${data.toolCalls}${data.toolErrors ? ` (${data.toolErrors} err)` : ""}`);
+  }
+  if (data.turnCount != null) lines.push(`Turns ${data.turnCount}`);
+  if (data.uptimeSeconds) lines.push(`Uptime ${formatUptime(data.uptimeSeconds)}`);
+  if (data.mcpTotal != null) lines.push(`MCP ${data.mcpHealthy ?? 0}/${data.mcpTotal}`);
+
+  if (data.gitFilesChanged != null || data.gitInsertions != null || data.gitDeletions != null) {
+    const files = data.gitFilesChanged ?? 0;
+    lines.push(files > 0 ? `Changes ±${files} files +${data.gitInsertions ?? 0}/-${data.gitDeletions ?? 0}` : "Changes none");
+  }
+
+  if (data.outcomeError) lines.push(`Error ${data.outcomeError}`);
+
+  return lines.join("\n");
+}