@xpufx/paseo-top 0.4.0

package/client/telemetry.tsx

@@ -0,0 +1,486 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { Text, View } from "react-native";
+import { useAgent, type PluginTimelineItemProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import {
+  Badge,
+  Collapsible,
+  CopyButton,
+  PluginThemeProvider,
+  ProgressBar,
+  Row,
+  Stack,
+  usePluginSettings,
+} from "paseo-plugin-helper/client";
+import { formatBytes, formatUptime, truncatePath } from "paseo-plugin-helper/shared";
+import { buildTelemetryCopyText } from "./telemetry-copy";
+import {
+  isTimelineEnabled,
+  isMcpSurfaceEnabled,
+  topSettingsContract,
+  TIMELINE_RENDERED_METRICS,
+  type MetricId,
+  type TopTimelineTelemetryData,
+} from "../shared/resources";
+import { formatCompactTokens, type TopAgentSnapshot } from "./pill-labels";
+
+export { TIMELINE_RENDERED_METRICS };
+
+function Vital({
+  icon,
+  color,
+  children,
+}: {
+  icon: string;
+  color: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Row gap={4} align="center">
+      <Icon name={icon} size={12} color={color} />
+      {/*
+       * Color MUST be applied to the label as well as the icon. A <Text> with
+       * no `color` falls back to React Native's default black and disappears on
+       * dark surfaces (xpufx-org/paseo#208). Reusing the icon's `color` keeps
+       * threshold states (e.g. CPU/RAM warning/danger) consistent for both.
+       */}
+      <Text numberOfLines={1} style={{ fontSize: 11, fontWeight: "500", color }}>
+        {children}
+      </Text>
+    </Row>
+  );
+}
+
+export function TopTimelineTelemetryCard({
+  item,
+  theme,
+  layout,
+  timestamp,
+}: PluginTimelineItemProps<TopTimelineTelemetryData>) {
+  const data = item.data;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const liveUsage = useAgent(data.agentId, (a: TopAgentSnapshot) => a.lastUsage);
+  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 { settings } = usePluginSettings(topSettingsContract);
+  const surfaces = settings.metricSurfaces;
+  const show = (id: MetricId) => !surfaces || isTimelineEnabled(surfaces[id]);
+  const showMcp = isMcpSurfaceEnabled(settings, "timeline", data.mcpInstalled, data.mcpRunning);
+
+  const outcomeConfig = useMemo(() => {
+    switch (data.outcomeKind) {
+      case "completed":
+        return {
+          icon: "CheckCircle2",
+          color: theme.colors.statusSuccess,
+          label: "Turn Completed",
+        };
+      case "failed":
+        return {
+          icon: "AlertCircle",
+          color: theme.colors.statusDanger,
+          label: "Turn Failed",
+        };
+      case "canceled":
+        return {
+          icon: "MinusCircle",
+          color: theme.colors.statusWarning,
+          label: "Turn Canceled",
+        };
+      default:
+        return {
+          icon: "Activity",
+          color: theme.colors.foregroundMuted,
+          label: "Turn Ended",
+        };
+    }
+  }, [data.outcomeKind, theme.colors]);
+
+  const cpuColor = useMemo(() => {
+    if (data.cpuPercent >= 85) return theme.colors.statusDanger;
+    if (data.cpuPercent >= 70) return theme.colors.statusWarning;
+    return theme.colors.foreground;
+  }, [data.cpuPercent, theme.colors]);
+
+  const memColor = useMemo(() => {
+    if (data.memPercent >= 90) return theme.colors.statusDanger;
+    if (data.memPercent >= 75) return theme.colors.statusWarning;
+    return theme.colors.foreground;
+  }, [data.memPercent, theme.colors]);
+
+  const timeLabel = useMemo(() => {
+    try {
+      const d = data.timestamp ? new Date(data.timestamp) : timestamp;
+      return d.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      });
+    } catch {
+      return "";
+    }
+  }, [data.timestamp, timestamp]);
+
+  const totalTokens =
+    inputTokens != null || outputTokens != null
+      ? (inputTokens ?? 0) + (outputTokens ?? 0)
+      : undefined;
+
+  const contextPercent = useMemo(() => {
+    if (!contextMaxTokens || contextMaxTokens <= 0) return null;
+    return Math.round(((contextUsedTokens ?? 0) / contextMaxTokens) * 100);
+  }, [contextUsedTokens, contextMaxTokens]);
+
+  const getCopyText = useCallback(
+    () => buildTelemetryCopyText({ data, liveUsage, timeLabel }),
+    [data, liveUsage, timeLabel],
+  );
+
+  const hasTokenDetails =
+    inputTokens != null ||
+    outputTokens != null ||
+    cachedTokens != null ||
+    contextUsedTokens != null ||
+    contextMaxTokens != null ||
+    costUsd != null;
+
+  const canceledText =
+    data.outcomeKind === "canceled"
+      ? !/^cancel/i.test(data.outcomeError ?? "")
+        ? `Canceled${data.outcomeError ? `: ${data.outcomeError}` : ""}`
+        : (data.outcomeError ?? "Canceled")
+      : "";
+
+  return (
+    <PluginThemeProvider theme={theme} layout={layout}>
+      <Collapsible
+        variant="elevated"
+        isExpanded={isExpanded}
+        onToggle={setIsExpanded}
+        style={data.outcomeKind === "failed" ? { borderColor: theme.colors.statusDanger } : undefined}
+        title={
+          <Row gap={6} align="center">
+            <Icon name={outcomeConfig.icon} size={14} color={outcomeConfig.color} />
+            <Text style={{ fontSize: 12, fontWeight: "600", color: theme.colors.foreground }}>
+              {outcomeConfig.label}
+            </Text>
+            {data.durationMs != null ? (
+              <Badge label={`${(data.durationMs / 1000).toFixed(1)}s`} variant="neutral" />
+            ) : null}
+          </Row>
+        }
+        headerRight={
+          <Row gap={6} align="center">
+            {timeLabel !== "" ? (
+              <Text style={{ fontSize: 10, color: theme.colors.foregroundMuted }}>{timeLabel}</Text>
+            ) : null}
+            <Text
+              style={{
+                fontSize: 10,
+                color: theme.colors.foregroundMuted,
+                fontStyle: "italic",
+              }}
+            >
+              via top
+            </Text>
+            {/*
+             * Explicit copy affordance. Web's selection-copy handler only
+             * rebuilds clipboard content for `[data-testid="assistant-message"]`
+             * selections, so styled timeline items copy nothing
+             * (xpufx-org/paseo#278). The helper CopyButton bypasses that gate
+             * with the helper's own clipboard path. Empty labels keep the
+             * header compact: the icon flips Copy -> Check on success.
+             */}
+            <CopyButton
+              getText={getCopyText}
+              label=""
+              copiedLabel=""
+              accessibilityLabel="Copy timeline card"
+              toastMessage="timeline card"
+            />
+          </Row>
+        }
+        summary={
+          !isExpanded && data.outcomeKind === "canceled" ? (
+            <Text numberOfLines={2} style={{ fontSize: 11, color: theme.colors.statusDanger }}>
+              {canceledText}
+            </Text>
+          ) : undefined
+        }
+      >
+        <Stack gap={6}>
+          <Row wrap gap={8} align="center">
+            {show("cpu_ram") && (
+              <Vital icon="Cpu" color={cpuColor}>
+                CPU {data.cpuPercent}%
+              </Vital>
+            )}
+
+            {show("cpu_ram") && (
+              <Vital icon="Database" color={memColor}>
+                RAM {formatBytes(data.memUsedBytes)} ({data.memPercent}%)
+              </Vital>
+            )}
+
+            {show("load") && (
+              <Vital icon="Activity" color={theme.colors.foreground}>
+                Load {data.loadAvg1m.toFixed(2)}
+              </Vital>
+            )}
+
+            {showMcp && (
+              <Vital
+                icon="Server"
+                color={
+                  data.mcpTotal == null
+                    ? theme.colors.foregroundMuted
+                    : (data.mcpHealthy ?? 0) === data.mcpTotal
+                      ? theme.colors.statusSuccess
+                      : theme.colors.statusWarning
+                }
+              >
+                {data.mcpTotal != null ? `MCP ${data.mcpHealthy ?? 0}/${data.mcpTotal}` : "MCP --"}
+              </Vital>
+            )}
+
+            {show("agent_id") && (
+              <Vital icon="Fingerprint" color={theme.colors.foreground}>
+                {data.agentId && data.agentId.length > 7
+                  ? data.agentId.slice(0, 7)
+                  : (data.agentId ?? "--")}
+              </Vital>
+            )}
+
+            {show("agent") && (
+              <Vital
+                icon="Bot"
+                color={data.agentModel ? theme.colors.foreground : theme.colors.foregroundMuted}
+              >
+                {data.agentModel ?? "model --"}
+              </Vital>
+            )}
+
+            {show("agent_provider") && (
+              <Vital
+                icon="Globe"
+                color={
+                  data.agentProvider ? theme.colors.foreground : theme.colors.foregroundMuted
+                }
+              >
+                {data.agentProvider ?? "provider --"}
+              </Vital>
+            )}
+
+            {show("agent_title") && (
+              <Vital
+                icon="Tag"
+                color={data.agentTitle ? theme.colors.foreground : theme.colors.foregroundMuted}
+              >
+                {data.agentTitle ?? "title --"}
+              </Vital>
+            )}
+
+            {show("branch") && (
+              <Vital
+                icon="GitBranch"
+                color={data.branch ? theme.colors.foreground : theme.colors.foregroundMuted}
+              >
+                {data.branch ?? "branch --"}
+              </Vital>
+            )}
+
+            {show("worktree") && (
+              <Vital
+                icon="Folder"
+                color={data.worktree ? theme.colors.foreground : theme.colors.foregroundMuted}
+              >
+                {data.worktree ? truncatePath(data.worktree, 20) : "worktree --"}
+              </Vital>
+            )}
+
+            {show("uptime") && (
+              <Vital icon="Clock" color={theme.colors.foreground}>
+                {data.uptimeSeconds ? formatUptime(data.uptimeSeconds) : "--"}
+              </Vital>
+            )}
+
+            {show("changes") && (
+              <Vital icon="GitCommitHorizontal" color={theme.colors.foreground}>
+                {(data.gitFilesChanged ?? 0) > 0
+                  ? `±${data.gitFilesChanged} files +${data.gitInsertions ?? 0}/-${data.gitDeletions ?? 0}`
+                  : "No changes"}
+              </Vital>
+            )}
+
+            {show("tokens") && (
+              <Vital
+                icon="Coins"
+                color={
+                  totalTokens != null || contextUsedTokens != null
+                    ? theme.colors.foreground
+                    : theme.colors.foregroundMuted
+                }
+              >
+                {contextUsedTokens != null && contextMaxTokens
+                  ? `${formatCompactTokens(contextUsedTokens)}/${formatCompactTokens(contextMaxTokens)}${contextPercent != null ? ` (${contextPercent}% ctx)` : ""}`
+                  : totalTokens != null
+                    ? `${formatCompactTokens(totalTokens)} tok`
+                    : contextUsedTokens != null
+                      ? `${formatCompactTokens(contextUsedTokens)} ctx`
+                      : "tok --"}
+              </Vital>
+            )}
+
+            {show("tools") && (
+              <Vital icon="Sigma" color={theme.colors.foreground}>
+                {data.toolCalls != null
+                  ? `${data.toolCalls}${data.toolErrors ? ` (${data.toolErrors} err)` : ""}`
+                  : "tools --"}
+              </Vital>
+            )}
+
+            {show("turns") && (
+              <Vital
+                icon="Repeat"
+                color={data.turnCount != null ? theme.colors.foreground : theme.colors.foregroundMuted}
+              >
+                {data.turnCount != null ? `${data.turnCount} turns` : "turns --"}
+              </Vital>
+            )}
+          </Row>
+
+          {show("tokens") && hasTokenDetails ? (
+            <Stack gap={8}>
+              <Row justify="space-between" align="center">
+                <Row gap={4} align="center">
+                  <Icon name="Coins" size={12} color={theme.colors.foregroundMuted} />
+                  <Text style={sectionTitleStyle(theme.colors)}>Tokens & Context</Text>
+                </Row>
+                {costUsd != null && (
+                  <Text style={{ fontSize: 10, fontWeight: "600", color: theme.colors.foreground }}>
+                    ${costUsd < 0.01 ? costUsd.toFixed(4) : costUsd.toFixed(2)}
+                  </Text>
+                )}
+              </Row>
+
+              {contextMaxTokens != null && contextMaxTokens > 0 ? (
+                <Stack gap={4}>
+                  <Row justify="space-between" align="center">
+                    <Text style={{ fontSize: 10, color: theme.colors.foregroundMuted }}>
+                      Context Window
+                    </Text>
+                    <Text style={{ fontSize: 10, fontWeight: "600", color: theme.colors.foreground }}>
+                      {formatCompactTokens(contextUsedTokens ?? 0)} /{" "}
+                      {formatCompactTokens(contextMaxTokens)} ({contextPercent}%)
+                    </Text>
+                  </Row>
+                  <ProgressBar
+                    value={contextPercent ?? 0}
+                    thresholds={{ warning: 70, danger: 85 }}
+                    height={6}
+                  />
+                </Stack>
+              ) : contextUsedTokens != null ? (
+                <Text style={{ fontSize: 10, color: theme.colors.foreground }}>
+                  {formatCompactTokens(contextUsedTokens)} tokens
+                </Text>
+              ) : null}
+
+              <Row wrap gap={6} align="center">
+                {inputTokens != null && (
+                  <Badge label={`In: ${inputTokens.toLocaleString()}`} variant="neutral" />
+                )}
+                {outputTokens != null && (
+                  <Badge label={`Out: ${outputTokens.toLocaleString()}`} variant="neutral" />
+                )}
+                {cachedTokens != null && (
+                  <Badge label={`Cache: ${cachedTokens.toLocaleString()}`} variant="neutral" />
+                )}
+              </Row>
+            </Stack>
+          ) : show("tokens") ? (
+            <Row justify="space-between" align="center">
+              <Text style={sectionTitleStyle(theme.colors)}>Tokens & Context</Text>
+              <Text
+                style={{
+                  fontSize: 10,
+                  fontStyle: "italic",
+                  color: theme.colors.foregroundMuted,
+                }}
+              >
+                Not reported by provider
+              </Text>
+            </Row>
+          ) : null}
+
+          <Stack gap={4}>
+            <Text style={sectionTitleStyle(theme.colors)}>Turn Details</Text>
+            <Row wrap gap={12} align="center">
+              <Vital icon="Cpu" color={theme.colors.foreground}>
+                {data.agentModel ?? "Unknown model"} ({data.agentProvider ?? "default"})
+              </Vital>
+              {data.toolCalls != null && (
+                <Vital icon="Sigma" color={theme.colors.foreground}>
+                  {data.toolCalls} calls
+                  {data.toolErrors ? `, ${data.toolErrors} failed` : ""}
+                </Vital>
+              )}
+              {(data.gitInsertions != null || data.gitDeletions != null) && (
+                <Vital icon="GitCommitHorizontal" color={theme.colors.foreground}>
+                  +{data.gitInsertions ?? 0} -{data.gitDeletions ?? 0}
+                </Vital>
+              )}
+            </Row>
+          </Stack>
+
+          {data.outcomeError && (
+            <View
+              style={{
+                padding: 6,
+                borderRadius: 4,
+                backgroundColor: theme.colors.surface2,
+                borderLeftWidth: 3,
+                borderLeftColor: theme.colors.statusDanger,
+              }}
+            >
+              <Text numberOfLines={2} style={{ fontSize: 11, color: theme.colors.statusDanger }}>
+                {data.outcomeError}
+              </Text>
+            </View>
+          )}
+        </Stack>
+      </Collapsible>
+    </PluginThemeProvider>
+  );
+}
+
+const styles = {
+  // Layout-only. Color MUST come from the theme: a raw style without `color`
+  // falls back to React Native's default black and vanishes in dark mode
+  // (xpufx-org/paseo#208). Use `sectionTitleStyle(colors)` at call sites.
+  sectionTitle: {
+    fontSize: 10,
+    fontWeight: "600",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  },
+} as const;
+
+function sectionTitleStyle(colors: { foregroundMuted: string }) {
+  return [styles.sectionTitle, { color: colors.foregroundMuted }];
+}

package/client/turn-counter.ts

@@ -0,0 +1,151 @@
+/**
+ * Deterministic conversation turn counter.
+ *
+ * Source of truth is the daemon timeline, reached through the plugin-facing
+ * `paseo.agents.ref(id).timeline.refetch()` path (xpufx-org/paseo#248). Each
+ * `user_message` entry maps 1:1 to a canonical timeline row, so filtering to
+ * `user_message` and sorting by `seqEnd` yields a stable 1-based turn number
+ * plus the exact `seq` an agent can resolve against the same timeline. The UI
+ * and the agent therefore agree on `Turn #N (seq S)` without a bespoke server.
+ *
+ * No `@getpaseo/*` import: the input/output shapes are structural so the module
+ * stays dependency-free and unit-testable without the Paseo runtime.
+ */
+
+export interface TimelineEntryLike {
+  seqStart?: number;
+  seqEnd?: number;
+  item?: { type?: string; text?: string } | null;
+}
+
+export interface TimelineCursor {
+  epoch: string;
+  seq: number;
+}
+
+export interface TimelinePageLike {
+  entries: readonly TimelineEntryLike[];
+  hasOlder?: boolean;
+  startCursor?: TimelineCursor | null;
+  staleCursor?: boolean;
+  reset?: boolean;
+}
+
+export interface TimelineRefetchOptionsLike {
+  direction?: "tail" | "before" | "after";
+  cursor?: TimelineCursor;
+  limit?: number;
+}
+
+export interface AgentTimelineRefLike {
+  timeline: {
+    refetch(options?: TimelineRefetchOptionsLike): Promise<TimelinePageLike>;
+  };
+}
+
+export interface PaseoAgentApiLike {
+  agents: { ref(agentId: string): AgentTimelineRefLike };
+}
+
+export interface TurnRef {
+  /** 1-based conversation turn number (Turn #1 is the first user message). */
+  turn: number;
+  /** Canonical timeline seq of the user_message row; shared with the agent. */
+  seq: number;
+  /** Verbatim user message text (may be empty). */
+  preview: string;
+}
+
+/** Default page size while walking history backwards. */
+export const TURN_PAGE_LIMIT = 200;
+/** Safety bound so a pathological timeline cannot loop forever. */
+export const TURN_MAX_PAGES = 50;
+
+/**
+ * `Turn #3 (seq 12)` — the single address format the panel renders and tests
+ * assert, so a human reference and the agent's own resolution cannot drift.
+ */
+export function formatTurnAddress(turn: number, seq: number): string {
+  return `Turn #${turn} (seq ${seq})`;
+}
+
+/** Shortest unambiguous tail of a turn, for list rows and copy actions. */
+export function formatTurnSummary(turn: TurnRef): string {
+  return formatTurnAddress(turn.turn, turn.seq);
+}
+
+/**
+ * Derives 1-based turns from timeline entries. `user_message` rows are filtered
+ * and sorted by `seq`, so a caller's page-concatenation order is irrelevant.
+ * Entries without a usable numeric seq are dropped rather than silently
+ * shifting later turn numbers.
+ */
+export function deriveTurns(entries: readonly TimelineEntryLike[]): TurnRef[] {
+  const rows: Array<{ seq: number; preview: string }> = [];
+  for (const entry of entries) {
+    const item = entry?.item;
+    if (!item || item.type !== "user_message") continue;
+    const seq = typeof entry.seqEnd === "number" ? entry.seqEnd : entry.seqStart;
+    if (typeof seq !== "number" || !Number.isFinite(seq)) continue;
+    rows.push({ seq, preview: typeof item.text === "string" ? item.text : "" });
+  }
+  rows.sort((a, b) => a.seq - b.seq);
+  return rows.map((row, index) => ({ turn: index + 1, seq: row.seq, preview: row.preview }));
+}
+
+/** Current/last turn, or undefined for an empty conversation. */
+export function currentTurn(turns: readonly TurnRef[]): TurnRef | undefined {
+  return turns.length > 0 ? turns[turns.length - 1] : undefined;
+}
+
+/**
+ * Full-history turns via cursor paging. `refetch()` defaults to a 200-entry
+ * tail page, so walk backwards with `direction: "before"` using the page's
+ * `startCursor` until the daemon reports no older history. A stale/reset epoch
+ * (agent replacement) stops the walk and returns what was collected.
+ */
+export async function fetchAllTurns(
+  paseo: PaseoAgentApiLike,
+  agentId: string,
+  pageLimit: number = TURN_PAGE_LIMIT,
+): Promise<TurnRef[]> {
+  const handle = paseo.agents.ref(agentId);
+  let page = await handle.timeline.refetch({ limit: pageLimit });
+  const bySeq = new Map<number, TimelineEntryLike>();
+  storeEntries(bySeq, page.entries);
+
+  let pages = 0;
+  while (page.hasOlder && page.startCursor && pages < TURN_MAX_PAGES) {
+    const next = await handle.timeline.refetch({
+      direction: "before",
+      cursor: page.startCursor,
+      limit: pageLimit,
+    });
+    if (next.staleCursor || next.reset) break;
+    storeEntries(bySeq, next.entries);
+    page = next;
+    pages += 1;
+  }
+  return deriveTurns([...bySeq.values()]);
+}
+
+function storeEntries(
+  bySeq: Map<number, TimelineEntryLike>,
+  entries: readonly TimelineEntryLike[],
+): void {
+  for (const entry of entries) {
+    const seq = entrySeq(entry);
+    if (seq !== undefined) bySeq.set(seq, entry);
+  }
+}
+
+/**
+ * Stable dedupe key for an entry. `user_message` is not identity-merged, so
+ * `seqEnd` is the row seq; fall back to `seqStart` if a host omits it. Returns
+ * undefined for a malformed entry so it is dropped, never a bogus `seq -1`.
+ */
+function entrySeq(entry: TimelineEntryLike): number | undefined {
+  if (typeof entry.seqEnd === "number" && Number.isFinite(entry.seqEnd)) return entry.seqEnd;
+  if (typeof entry.seqStart === "number" && Number.isFinite(entry.seqStart)) return entry.seqStart;
+  return undefined;
+}