paseo-plugin-machine-status 0.1.1

package/client/charts.tsx

@@ -0,0 +1,335 @@
+import React, { useMemo } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { columnHeights, padSlots, paletteFor, stackedColumn, type VizPalette } from "../shared/viz";
+import { useChromeStyles, type Chrome } from "./ui";
+
+/**
+ * React Native has no SVG and Paseo's client bundle cannot import one, so every
+ * chart here is built from Views. A line becomes a column per sample, which is a
+ * legitimate reading of the same series rather than a downgrade: each sample stays
+ * individually visible instead of being interpolated into a curve.
+ */
+
+const BASELINE_RADIUS = 2;
+
+export function Sparkbars({
+  values,
+  min,
+  max,
+  color,
+  slots,
+  height = 34,
+}: {
+  values: readonly number[];
+  min: number;
+  max: number;
+  color: string;
+  slots: number;
+  height?: number;
+}) {
+  const cells = useMemo(
+    () => padSlots(columnHeights(values, min, max), slots),
+    [values, min, max, slots],
+  );
+  return (
+    <View style={{ height, flexDirection: "row", alignItems: "flex-end", gap: 1 }}>
+      {cells.map((value, index) =>
+        value === null ? (
+          <View key={index} style={{ flex: 1 }} />
+        ) : (
+          <View
+            key={index}
+            style={{
+              flex: 1,
+              height: `${Math.max(value, 2)}%`,
+              backgroundColor: color,
+              borderTopLeftRadius: BASELINE_RADIUS,
+              borderTopRightRadius: BASELINE_RADIUS,
+            }}
+          />
+        ),
+      )}
+    </View>
+  );
+}
+
+function Gridlines({ color }: { color: string }) {
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="none">
+      {[0, 50, 100].map((position) => (
+        <View
+          key={position}
+          style={{
+            position: "absolute",
+            top: `${position}%`,
+            left: 0,
+            right: 0,
+            height: StyleSheet.hairlineWidth,
+            backgroundColor: color,
+          }}
+        />
+      ))}
+    </View>
+  );
+}
+
+/** Axis captions sit outside the plot; the grid stays recessive behind the marks. */
+export function ColumnChart({
+  chrome,
+  values,
+  min,
+  max,
+  color,
+  palette,
+  slots,
+  height = 140,
+  topLabel,
+  midLabel,
+  bottomLabel,
+  caption,
+}: {
+  chrome: Chrome;
+  values: readonly number[];
+  min: number;
+  max: number;
+  color: string;
+  palette: VizPalette;
+  slots: number;
+  height?: number;
+  topLabel: string;
+  midLabel: string;
+  bottomLabel: string;
+  caption?: string;
+}) {
+  const styles = useChromeStyles(chrome);
+  const cells = useMemo(
+    () => padSlots(columnHeights(values, min, max), slots),
+    [values, min, max, slots],
+  );
+
+  return (
+    <View style={{ gap: 6 }}>
+      <View style={{ flexDirection: "row", gap: 8 }}>
+        <View style={{ height, justifyContent: "space-between", alignItems: "flex-end", width: 34 }}>
+          <Text style={styles.axis}>{topLabel}</Text>
+          <Text style={styles.axis}>{midLabel}</Text>
+          <Text style={styles.axis}>{bottomLabel}</Text>
+        </View>
+        <View style={{ flex: 1, height }}>
+          <Gridlines color={palette.grid} />
+          <View
+            style={{ flex: 1, flexDirection: "row", alignItems: "flex-end", gap: 1 }}
+          >
+            {cells.map((value, index) =>
+              value === null ? (
+                <View key={index} style={{ flex: 1 }} />
+              ) : (
+                <View
+                  key={index}
+                  style={{
+                    flex: 1,
+                    height: `${Math.max(value, 2)}%`,
+                    backgroundColor: color,
+                    borderTopLeftRadius: BASELINE_RADIUS,
+                    borderTopRightRadius: BASELINE_RADIUS,
+                  }}
+                />
+              ),
+            )}
+          </View>
+        </View>
+      </View>
+      {caption ? <Text style={[styles.axis, { paddingLeft: 42 }]}>{caption}</Text> : null}
+    </View>
+  );
+}
+
+/**
+ * Stacked columns for a part-to-whole series over time. Segments carry a 2px
+ * surface gap so adjacent fills stay separable without relying on hue alone.
+ */
+export function StackedColumnChart({
+  chrome,
+  columns,
+  colors,
+  palette,
+  slots,
+  height = 140,
+  topLabel,
+  midLabel,
+  bottomLabel,
+  caption,
+}: {
+  chrome: Chrome;
+  /** Each entry is one column's parts, plus the total they are measured against. */
+  columns: readonly { parts: readonly number[]; total: number }[];
+  colors: readonly string[];
+  palette: VizPalette;
+  slots: number;
+  height?: number;
+  topLabel: string;
+  midLabel: string;
+  bottomLabel: string;
+  caption?: string;
+}) {
+  const styles = useChromeStyles(chrome);
+  const stacks = useMemo(
+    () => padSlots(columns.map((column) => stackedColumn(column.parts, column.total)), slots),
+    [columns, slots],
+  );
+
+  return (
+    <View style={{ gap: 6 }}>
+      <View style={{ flexDirection: "row", gap: 8 }}>
+        <View style={{ height, justifyContent: "space-between", alignItems: "flex-end", width: 34 }}>
+          <Text style={styles.axis}>{topLabel}</Text>
+          <Text style={styles.axis}>{midLabel}</Text>
+          <Text style={styles.axis}>{bottomLabel}</Text>
+        </View>
+        <View style={{ flex: 1, height }}>
+          <Gridlines color={palette.grid} />
+          <View style={{ flex: 1, flexDirection: "row", alignItems: "flex-end", gap: 2 }}>
+            {stacks.map((segments, index) =>
+              segments === null ? (
+                <View key={index} style={{ flex: 1 }} />
+              ) : (
+              <View
+                key={index}
+                style={{ flex: 1, height: "100%", flexDirection: "column-reverse" }}
+              >
+                {segments.map((segment, part) => {
+                  const fill = colors[part];
+                  // The last segment is the unused remainder: it reads as headroom,
+                  // so it stays empty rather than becoming a grey category block.
+                  if (!fill) return <View key={part} style={{ height: `${segment}%` }} />;
+                  return (
+                    <View
+                      key={part}
+                      style={{
+                        height: `${segment}%`,
+                        backgroundColor: fill,
+                        borderTopWidth: part > 0 ? 2 : 0,
+                        borderTopColor: chrome.theme.colors.surface0,
+                      }}
+                    />
+                  );
+                })}
+              </View>
+              ),
+            )}
+          </View>
+        </View>
+      </View>
+      {caption ? <Text style={[styles.axis, { paddingLeft: 42 }]}>{caption}</Text> : null}
+    </View>
+  );
+}
+
+/**
+ * A single ratio against a limit. This replaces the donut the design used: a ring
+ * encodes one number worse than a track does, and it cannot be drawn without SVG.
+ */
+export function Meter({
+  percent,
+  color,
+  palette,
+  height = 8,
+}: {
+  percent: number;
+  color: string;
+  palette: VizPalette;
+  height?: number;
+}) {
+  const width = Math.max(0, Math.min(100, percent));
+  return (
+    <View
+      style={{
+        height,
+        borderRadius: height / 2,
+        backgroundColor: palette.neutral,
+        overflow: "hidden",
+      }}
+    >
+      <View style={{ width: `${width}%`, height: "100%", borderRadius: height / 2, backgroundColor: color }} />
+    </View>
+  );
+}
+
+/** Identity never rests on colour alone: every swatch ships with its label and value. */
+export function Legend({
+  chrome,
+  items,
+}: {
+  chrome: Chrome;
+  items: readonly { label: string; value: string; color: string }[];
+}) {
+  const styles = useChromeStyles(chrome);
+  return (
+    <View style={styles.rowWrap}>
+      {items.map((item) => (
+        <View key={item.label} style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+          <View style={{ width: 9, height: 9, borderRadius: 2, backgroundColor: item.color }} />
+          <Text style={styles.muted}>{item.label}</Text>
+          <Text style={styles.value}>{item.value}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export function StatTile({
+  chrome,
+  label,
+  labelColor,
+  meta,
+  value,
+  valueSuffix,
+  valueColor,
+  expanded,
+  onPress,
+  children,
+  footer,
+}: {
+  chrome: Chrome;
+  label: string;
+  labelColor: string;
+  meta: string;
+  value: string;
+  valueSuffix: string;
+  valueColor?: string;
+  expanded: boolean;
+  onPress: () => void;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+}) {
+  const styles = useChromeStyles(chrome);
+  const palette = paletteFor(chrome.theme.colors.surface0);
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ expanded }}
+      accessibilityLabel={`${label}, ${value} ${valueSuffix}`}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.card,
+        {
+          flexGrow: 1,
+          flexBasis: chrome.compact ? "100%" : 200,
+          borderColor: expanded ? chrome.theme.colors.accent : palette.border,
+          opacity: pressed ? 0.8 : 1,
+        },
+      ]}
+    >
+      <View style={styles.row}>
+        <Text style={[styles.cardTitle, { color: labelColor }]}>{label}</Text>
+        <Text style={styles.axis}>{meta}</Text>
+      </View>
+      <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8 }}>
+        <Text style={[styles.figure, valueColor ? { color: valueColor } : null]}>{value}</Text>
+        <Text style={styles.muted}>{valueSuffix}</Text>
+      </View>
+      {children}
+      {footer}
+    </Pressable>
+  );
+}

package/client/cleanup.tsx

@@ -0,0 +1,169 @@
+import { useRpc } from "@getpaseo/plugin/client";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import React, { useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import { applyCleanup, planCleanup, type CleanupTarget } from "../shared/contracts";
+import { formatBytes } from "../shared/format";
+import { ActionButton, Card, useArmedConfirm, useChromeStyles, type Chrome } from "./ui";
+import { paletteFor } from "../shared/viz";
+
+/**
+ * Scanning walks real directories with `du`, so it never runs on a timer — only
+ * when asked. The result is kept in the query cache so reopening the surface
+ * shows the last scan instead of re-walking the disk.
+ */
+export function CleanupSection({ chrome, hostId }: { chrome: Chrome; hostId: string }) {
+  const styles = useChromeStyles(chrome);
+  const palette = paletteFor(chrome.theme.colors.surface0);
+  const plan = useRpc(planCleanup);
+  const apply = useRpc(applyCleanup);
+  const confirm = useArmedConfirm();
+
+  /** Absent entries fall back to "selected when the cache exists". */
+  const [overrides, setOverrides] = useState<Record<string, boolean>>({});
+
+  const scan = useQuery({
+    queryKey: ["machine-status", "cleanup", hostId],
+    queryFn: () => plan({}),
+    enabled: false,
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+
+  const targets = scan.data?.targets ?? [];
+  const isSelected = (target: CleanupTarget) => overrides[target.id] ?? target.exists;
+  const selected = targets.filter((target) => target.exists && isSelected(target));
+  const selectedBytes = selected.reduce((sum, target) => sum + target.sizeBytes, 0);
+
+  const cleanup = useMutation({
+    mutationFn: () => apply({ targetIds: selected.map((target) => target.id) }),
+    onSettled: () => {
+      confirm.disarm();
+      setOverrides({});
+      void scan.refetch();
+    },
+  });
+
+  const toggle = (target: CleanupTarget) => {
+    if (!target.exists) return;
+    cleanup.reset();
+    setOverrides((current) => ({ ...current, [target.id]: !isSelected(target) }));
+  };
+
+  return (
+    <Card
+      chrome={chrome}
+      title="Dev caches"
+      subtitle={scan.data ? formatBytes(scan.data.totalBytes) + " total" : undefined}
+    >
+      {scan.error ? <Text style={styles.danger}>{(scan.error as Error).message}</Text> : null}
+
+      {!scan.data ? (
+        <View style={{ gap: 8 }}>
+          <Text style={styles.muted}>
+            Measures package-manager and build caches. Nothing is removed until you confirm.
+          </Text>
+          <ActionButton
+            chrome={chrome}
+            label="Scan dev caches"
+            busy={scan.isFetching}
+            onPress={() => void scan.refetch()}
+          />
+        </View>
+      ) : (
+        <View style={{ gap: 8 }}>
+          {targets.map((target) => {
+            const active = isSelected(target);
+            return (
+              <Pressable
+                key={target.id}
+                accessibilityRole="checkbox"
+                accessibilityState={{ checked: active, disabled: !target.exists }}
+                accessibilityLabel={`${target.label}, ${formatBytes(target.sizeBytes)}`}
+                disabled={!target.exists}
+                onPress={() => toggle(target)}
+                style={({ pressed }) => [
+                  styles.selectableRow,
+                  {
+                    borderColor: active ? chrome.theme.colors.accent : palette.border,
+                    opacity: !target.exists ? 0.45 : pressed ? 0.7 : 1,
+                  },
+                ]}
+              >
+                <View style={styles.row}>
+                  <Text style={styles.value}>
+                    {active && target.exists ? "◉  " : "○  "}
+                    {target.label}
+                  </Text>
+                  <Text style={styles.valueStrong}>
+                    {target.exists ? formatBytes(target.sizeBytes) : "not present"}
+                  </Text>
+                </View>
+                <Text style={styles.muted} numberOfLines={1}>
+                  {target.path}
+                </Text>
+                {target.exists ? <Text style={styles.muted}>{target.hint}</Text> : null}
+                {target.error ? <Text style={styles.danger}>{target.error}</Text> : null}
+              </Pressable>
+            );
+          })}
+
+          {cleanup.data ? (
+            <View style={{ gap: 4 }}>
+              <Text style={styles.valueStrong}>Freed {formatBytes(cleanup.data.freedBytes)}</Text>
+              {cleanup.data.results
+                .filter((result) => !result.ok)
+                .map((result) => (
+                  <Text key={result.id} style={styles.danger}>
+                    {result.label}: {result.error}
+                  </Text>
+                ))}
+            </View>
+          ) : null}
+
+          {cleanup.error ? (
+            <Text style={styles.danger}>{(cleanup.error as Error).message}</Text>
+          ) : null}
+
+          <View style={{ gap: 8 }}>
+            {confirm.armed ? (
+              <>
+                <Text style={styles.danger}>
+                  Deletes the contents of {selected.length} cache
+                  {selected.length === 1 ? "" : "s"}. Each tool re-creates its own.
+                </Text>
+                <ActionButton
+                  chrome={chrome}
+                  tone="danger"
+                  label={`Confirm — delete ${formatBytes(selectedBytes)}`}
+                  busy={cleanup.isPending}
+                  onPress={() => cleanup.mutate()}
+                />
+                <ActionButton chrome={chrome} variant="ghost" label="Cancel" onPress={confirm.disarm} />
+              </>
+            ) : (
+              <>
+                <ActionButton
+                  chrome={chrome}
+                  label={
+                    selected.length === 0
+                      ? "Select a cache to clean"
+                      : `Clean ${formatBytes(selectedBytes)} in ${selected.length} cache${selected.length === 1 ? "" : "s"}`
+                  }
+                  disabled={selected.length === 0}
+                  onPress={confirm.arm}
+                />
+                <ActionButton
+                  chrome={chrome}
+                  variant="ghost"
+                  label="Rescan"
+                  busy={scan.isFetching}
+                  onPress={() => void scan.refetch()}
+                />
+              </>
+            )}
+          </View>
+        </View>
+      )}
+    </Card>
+  );
+}