@xpufx/paseo-top 0.4.2 → 0.4.4

package/client/settings-events.ts

@@ -0,0 +1,33 @@
+import { shouldEmitSnapshotUpdate } from "./vendor/paseo-plugin-helper/index";
+import type { TopSettings } from "../shared/resources";
+
+export type SettingsListener = (settings: TopSettings) => void;
+const settingsListeners = new Set<SettingsListener>();
+let lastNotifiedSettings: TopSettings | null = null;
+
+export function addSettingsListener(listener: SettingsListener): void {
+  settingsListeners.add(listener);
+}
+
+export function removeSettingsListener(listener: SettingsListener): void {
+  settingsListeners.delete(listener);
+}
+
+export function notifySettingsChanged(settings: TopSettings): void {
+  if (
+    !shouldEmitSnapshotUpdate(
+      lastNotifiedSettings as unknown as Record<string, unknown> | null,
+      settings as unknown as Record<string, unknown>,
+    )
+  ) {
+    return;
+  }
+  lastNotifiedSettings = settings;
+  for (const listener of settingsListeners) {
+    try {
+      listener(settings);
+    } catch {
+      // Ignore listener errors
+    }
+  }
+}

package/client/surface.tsx

@@ -18,6 +18,7 @@ import {
   usePluginTheme,
 } from "./vendor/paseo-plugin-helper/index";
 import { formatBytes, formatUptime } from "../shared/vendor/paseo-plugin-helper/index";
+import { PermissionAuditView } from "permission-audit/client";
 import {
   topSettingsContract,
   checkboxesFromTarget,
@@ -27,14 +28,17 @@ import {
   type TopSettings,
 } from "../shared/resources";
 import { PLUGIN_VERSION } from "../shared/version";
-import { notifySettingsChanged } from "./pill";
+import { notifySettingsChanged } from "./settings-events";
 import { ChoiceChips } from "./settings-ui";
 import { useTopResourceQuery } from "./resources-query";
+import { FleetView } from "./multi-host-view";
 
-type SurfaceTab = "system" | "settings" | "about";
+type SurfaceTab = "system" | "fleet" | "permissions" | "settings" | "about";
 
 const TABS = [
   { id: "system", label: "Activity", shortLabel: "Activity", icon: "Activity" },
+  { id: "fleet", label: "Fleet", shortLabel: "Fleet", icon: "Server" },
+  { id: "permissions", label: "Permissions", shortLabel: "Permissions", icon: "ShieldCheck" },
   { id: "settings", label: "Settings", shortLabel: "Settings", icon: "Sliders" },
   { id: "about", label: "About", shortLabel: "About", icon: "Info" },
 ];
@@ -47,12 +51,6 @@ const TIMELINE_CADENCE_OPTIONS = Array.from({ length: 11 }, (_, 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");
@@ -83,7 +81,6 @@ export function TopDashboardSurface(_props: PluginSurfaceProps) {
     <View style={[styles.root, { backgroundColor: colors.surface0 }]}>
       <ModalBody
         headerMode="pinned"
-        maxContentWidth={TOP_CONTENT_MAX_WIDTH}
         header={
           <Tabs
             tabs={TABS}
@@ -177,6 +174,10 @@ export function TopDashboardSurface(_props: PluginSurfaceProps) {
         </Stack>
       )}
 
+      {activeTab === "fleet" && <FleetView />}
+
+      {activeTab === "permissions" && <PermissionAuditView variant="compact" />}
+
       {activeTab === "settings" && (
         <Stack gap={12}>
           <Card variant="elevated">

package/client/vendor/paseo-plugin-helper/components/Badge.tsx

@@ -112,6 +112,9 @@ export function Badge({
     >
       {renderIcon()}
       <Text
+        accessibilityLabel={label}
+        numberOfLines={1}
+        ellipsizeMode="tail"
         style={[
           styles.text,
           {
@@ -128,6 +131,7 @@ export function Badge({
             text={label}
             query={highlightQuery}
             fuzzyFallback={highlightFuzzyFallback}
+            numberOfLines={1}
           />
         ) : (
           label
@@ -144,9 +148,17 @@ const styles = StyleSheet.create({
     alignSelf: "flex-start",
     borderWidth: 1,
     gap: 4,
+    // A badge carries operator-supplied strings (ids, paths, refs, model names)
+    // of unbounded length. Yoga defaults `flexShrink` to 0, so without this the
+    // chip insists on its full text width and pushes its row past the viewport
+    // instead of truncating.
+    flexShrink: 1,
+    maxWidth: "100%",
   },
   text: {
     fontWeight: "600",
+    // Truncation only engages if the label itself is allowed to compress.
+    flexShrink: 1,
   },
   dot: {
     width: 6,

package/client/vendor/paseo-plugin-helper/components/Button.tsx

@@ -33,6 +33,7 @@ export function resolveButtonAttentionTone(variant: ButtonVariant): AttentionBea
 
 export interface ButtonProps {
   label?: string;
+  children?: ReactNode;
   variant?: ButtonVariant;
   size?: ButtonSize;
   icon?: string | ReactNode;
@@ -43,11 +44,13 @@ export interface ButtonProps {
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   accessibilityLabel?: string;
+  accessibilityRole?: "button" | "link";
   attention?: ButtonAttention;
 }
 
 export function Button({
   label,
+  children,
   variant = "secondary",
   size = "md",
   icon,
@@ -58,6 +61,7 @@ export function Button({
   style,
   textStyle,
   accessibilityLabel,
+  accessibilityRole = "button",
   attention,
 }: ButtonProps) {
   const { Icon } = getClientHost();
@@ -108,13 +112,25 @@ export function Button({
 
   const attentionMode = resolveButtonAttentionMode(attention);
 
+  // Accessibility touch targets are met with `hitSlop`, which expands the
+  // tappable area without moving a single neighbouring pixel. They are NOT met
+  // by inflating the painted box: a `minHeight` floor forced `size="sm"` to
+  // render 40px tall on mobile against a ~26px recipe, because the floor was
+  // computed from the touch target rather than from the size (#647).
+  //
+  // The slop has to be derived from this button's own height, not a fixed 32 —
+  // a 32px baseline silently under-serves every smaller recipe, so `sm` got
+  // both a too-tall box and too little slop.
+  const contentHeight = Math.round(fontSize * 1.2) + py * 2;
+  const hitSlopSide = Math.max(0, (touchTargetMin - contentHeight) / 2);
+
   const pressable = (
     <Pressable
       onPress={onPress}
       disabled={disabled || loading}
-      accessibilityRole="button"
+      accessibilityRole={accessibilityRole}
       accessibilityLabel={accessibilityLabel || label}
-      hitSlop={Math.max(0, (touchTargetMin - 32) / 2)}
+      hitSlop={hitSlopSide}
       style={({ pressed }) => [
         styles.base,
         {
@@ -124,7 +140,6 @@ export function Button({
           borderRadius: radius,
           paddingVertical: py,
           paddingHorizontal: px,
-          minHeight: Math.max(30, touchTargetMin - 4),
           opacity: disabled ? 0.45 : 1,
         },
         style,
@@ -132,11 +147,15 @@ export function Button({
     >
       {loading ? (
         <ActivityIndicator size="small" color={textColor} />
+      ) : children ? (
+        children
       ) : (
         <>
           {iconPosition === "left" && renderIcon()}
           {label ? (
             <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
               style={[
                 styles.text,
                 {
@@ -170,9 +189,16 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     gap: 6,
+    // Labels are caller-supplied and unbounded (issue titles, branch names,
+    // sort labels). Yoga defaults `flexShrink` to 0, so an unconstrained
+    // button claims its full label width and overflows narrow viewports.
+    flexShrink: 1,
+    maxWidth: "100%",
   },
   text: {
     fontWeight: "600",
     textAlign: "center",
+    // The label must be allowed to compress for `numberOfLines` to engage.
+    flexShrink: 1,
   },
 });

package/client/vendor/paseo-plugin-helper/components/Card.tsx

@@ -30,6 +30,11 @@ export interface CardHeaderProps {
   highlightQuery?: string;
 }
 
+// TEMPORARY DIAGNOSTIC (#555) — one-shot probe logging the host icon the
+// first CardHeader render resolves, right before it is used; strip once the
+// missing-binding cause is confirmed.
+let cardHeaderIconProbeFired = false;
+
 export function CardHeader({
   title,
   subtitle,
@@ -43,6 +48,33 @@ export function CardHeader({
   highlightQuery,
 }: CardHeaderProps) {
   const { Icon } = getClientHost();
+  // TEMPORARY DIAGNOSTIC (#555) — strip once the missing-binding cause is
+  // confirmed. A probe that throws must never crash the header itself.
+  try {
+    if (!cardHeaderIconProbeFired) {
+      cardHeaderIconProbeFired = true;
+      const describe = (value: unknown): string => {
+        if (value === undefined) return "undefined";
+        if (value === null) return "null";
+        if (typeof value === "function") {
+          const named = (value as { displayName?: string; name?: string }).displayName
+            ?? (value as { name?: string }).name;
+          return `function(${named || "(anonymous)"})`;
+        }
+        if (typeof value === "object") {
+          const symbolTag = (value as { $$typeof?: unknown }).$$typeof;
+          return `object($$typeof=${String(symbolTag)}, render=${typeof (value as { render?: unknown }).render})`;
+        }
+        return typeof value;
+      };
+      console.warn(
+        "[2fado] CardHeader probe: icon=", icon ?? "(no icon prop)",
+        "resolved host Icon=", `typeofIcon=${typeof Icon}`, describe(Icon),
+      );
+    }
+  } catch (err) {
+    console.warn("[2fado] CardHeader probe failed:", err);
+  }
   const { colors, flair, typography, padding, isCompact } = usePluginTheme();
 
   return (

package/client/vendor/paseo-plugin-helper/components/DataTable.tsx

@@ -104,7 +104,11 @@ export function DataTable<T>({
                 : styles.alignLeft,
             ]}
           >
-            <Text style={[styles.headerText, { color: colors.foregroundMuted }]}>
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[styles.headerText, { color: colors.foregroundMuted }]}
+            >
               {col.header}
             </Text>
           </View>
@@ -162,6 +166,11 @@ const styles = StyleSheet.create({
   },
   cell: {
     justifyContent: "center",
+    // Yoga defaults `flexShrink` to 0, so without this a cell whose content
+    // carries a long string (a title, a path) refuses to give up width and
+    // squeezes its sibling columns instead of truncating.
+    flexShrink: 1,
+    maxWidth: "100%",
   },
   alignLeft: {
     alignItems: "flex-start",
@@ -177,6 +186,7 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     textTransform: "uppercase",
     letterSpacing: 0.5,
+    flexShrink: 1,
   },
   compactContainer: {
     gap: 8,
@@ -190,11 +200,17 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
+    gap: 8,
   },
   compactHeader: {
     fontSize: 12,
+    flexShrink: 1,
   },
   compactValue: {
     alignItems: "flex-end",
+    // The value side carries the actual data, so it takes the compressible
+    // slot and the fixed label beside it keeps its intrinsic width.
+    flexShrink: 1,
+    maxWidth: "100%",
   },
 });

package/client/vendor/paseo-plugin-helper/components/InlineButton.tsx

@@ -16,6 +16,7 @@ export interface InlineButtonProps {
   icon?: string | ReactNode;
   disabled?: boolean;
   accessibilityLabel?: string;
+  accessibilityRole?: "button" | "link";
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
 }
@@ -27,6 +28,7 @@ export function InlineButton({
   icon,
   disabled = false,
   accessibilityLabel,
+  accessibilityRole = "button",
   style,
   textStyle,
 }: InlineButtonProps) {
@@ -37,7 +39,7 @@ export function InlineButton({
     <Pressable
       onPress={onPress}
       disabled={disabled}
-      accessibilityRole="button"
+      accessibilityRole={accessibilityRole}
       accessibilityLabel={accessibilityLabel || label}
       hitSlop={Math.max(0, (touchTargetMin - 24) / 2)}
       style={({ pressed }) => [
@@ -50,7 +52,14 @@ export function InlineButton({
       ]}
     >
       {typeof icon === "string" ? <Icon name={icon} size={13} color={colors.accent} /> : icon}
-      <Text style={[styles.text, { color: colors.accent }, textStyle]}>{label}</Text>
+      <Text
+        accessibilityLabel={label}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        style={[styles.text, { color: colors.accent }, textStyle]}
+      >
+        {label}
+      </Text>
     </Pressable>
   );
 }
@@ -65,9 +74,15 @@ const styles = StyleSheet.create({
     paddingHorizontal: 3,
     paddingVertical: 2,
     borderRadius: 4,
+    // Caller-supplied labels are unbounded; without a shrink budget the control
+    // claims its full text width and overflows narrow viewports.
+    flexShrink: 1,
+    maxWidth: "100%",
   },
   text: {
     fontSize: 12,
     fontWeight: "600",
+    // The label must be allowed to compress for `numberOfLines` to engage.
+    flexShrink: 1,
   },
 });

package/client/vendor/paseo-plugin-helper/components/InteractiveRow.tsx

@@ -0,0 +1,142 @@
+import React, { useCallback, useState, type ReactNode } from "react";
+import {
+  Pressable,
+  type AccessibilityRole,
+  type GestureResponderEvent,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { usePluginTheme } from "../theme/provider";
+
+export interface InteractiveRowProps {
+  /** Arbitrary row content — status dots, badges, text, metric readouts. */
+  children?: ReactNode;
+  /**
+   * Press handler. Receives the raw event so callers can control propagation
+   * (e.g. a nested status light calling `event.stopPropagation()`).
+   */
+  onPress?: (event: GestureResponderEvent) => void;
+  /** Native / RN-web tooltip text attached to the hit area. */
+  title?: string;
+  disabled?: boolean;
+  accessibilityRole?: AccessibilityRole;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  testID?: string;
+  /** Base layout style, merged before the interaction layers. */
+  style?: StyleProp<ViewStyle>;
+  /** Extra style layered only while hovered (and not disabled). */
+  hoverStyle?: StyleProp<ViewStyle>;
+  /** Apply a subtle theme accent tint while hovered. Default: false. */
+  hoverTint?: boolean;
+  /** Accent opacity used by `hoverTint`. Default: 0.05. */
+  hoverTintOpacity?: number;
+  /** Opacity while pressed. Default: 0.7. */
+  pressedOpacity?: number;
+  /** Opacity while hovered but not pressed. Defaults to `opacity`. */
+  hoveredOpacity?: number;
+  /** Opacity at rest. Default: 1. */
+  opacity?: number;
+  /** Opacity when disabled. Default: 0.45. */
+  disabledOpacity?: number;
+  /** Expanded touch target beyond the visual bounds. */
+  hitSlop?: number;
+  /** Notified whenever the hover state flips, for callers that tint their own children. */
+  onHoverChange?: (hovered: boolean) => void;
+}
+
+/**
+ * Hover-aware, pressable row container for dense interactive content (#580).
+ *
+ * Owns the interaction concerns a labeled `Button` cannot: a hover state (with
+ * optional accent tint), an RN-web `title` tooltip, pressed opacity, a pointer
+ * cursor, and an `onPress` that forwards the event for `stopPropagation`.
+ * Content is arbitrary, so a status dot, badges, and metric readouts compose
+ * inside without wrapping each in its own control.
+ */
+export function InteractiveRow({
+  children,
+  onPress,
+  title,
+  disabled = false,
+  accessibilityRole,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+  style,
+  hoverStyle,
+  hoverTint = false,
+  hoverTintOpacity = 0.05,
+  pressedOpacity = 0.7,
+  hoveredOpacity,
+  opacity = 1,
+  disabledOpacity = 0.45,
+  hitSlop,
+  onHoverChange,
+}: InteractiveRowProps) {
+  const { colors, alpha } = usePluginTheme();
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+
+  const handleMouseEnter = useCallback(() => {
+    if (disabled) return;
+    setHovered(true);
+    onHoverChange?.(true);
+  }, [disabled, onHoverChange]);
+
+  const handleMouseLeave = useCallback(() => {
+    setHovered(false);
+    onHoverChange?.(false);
+  }, [onHoverChange]);
+
+  // `title` is an RN-web DOM passthrough absent from the native prop types, and
+  // `onMouseEnter`/`onMouseLeave` are the RN-web hover hooks the dense rows
+  // already relied on; attach both via an untyped spread to keep the runtime
+  // semantics identical to the hand-rolled rows (#580).
+  const webProps = {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    ...(title ? { title } : {}),
+  } as any;
+
+  const interactive = hovered && !disabled;
+  const hoverBackground = interactive && hoverTint
+    ? { backgroundColor: alpha(colors.accent, hoverTintOpacity) }
+    : null;
+  const restingOpacity = interactive ? (hoveredOpacity ?? opacity) : opacity;
+
+  return (
+    <Pressable
+      {...webProps}
+      onPress={onPress}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      disabled={disabled}
+      accessibilityRole={accessibilityRole ?? (onPress ? "button" : undefined)}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      testID={testID}
+      hitSlop={hitSlop}
+      style={[
+        { cursor: onPress && !disabled ? "pointer" : "auto" },
+        // A pressable wraps arbitrary content (titles, badges, metric readouts)
+        // and must never widen its parent: Yoga defaults `flexShrink` to 0, so
+        // without a shrink budget a long label forces the whole row past the
+        // viewport. Declared before `style` so callers can still override.
+        { flexShrink: 1, maxWidth: "100%" },
+        style,
+        hoverBackground,
+        interactive ? hoverStyle : null,
+        {
+          opacity: disabled
+            ? disabledOpacity
+            : pressed
+              ? pressedOpacity
+              : restingOpacity,
+        },
+      ]}
+    >
+      {children}
+    </Pressable>
+  );
+}

package/client/vendor/paseo-plugin-helper/components/SearchInput.tsx

@@ -18,6 +18,15 @@ export interface SearchInputProps {
   onChangeText: (text: string) => void;
   placeholder?: string;
   onClear?: () => void;
+  /**
+   * Painted box height, opt-in per call site. Unset keeps the original
+   * `isCompact ? 36 : 40` box so no untouched surface changes appearance.
+   * 26 matches the compact `size="sm"` button recipe (~26px) so a search field
+   * can sit beside filter pills in one row without inflating it (#645); a
+   * height of 26 or less also switches the input to the 12px `sm` label size,
+   * anything taller keeps the prior 13/14.
+   */
+  height?: number;
   style?: StyleProp<ViewStyle>;
   inputStyle?: StyleProp<TextStyle>;
   testID?: string;
@@ -31,6 +40,7 @@ export function SearchInput({
   onChangeText,
   placeholder = "Search...",
   onClear,
+  height,
   style,
   inputStyle,
   testID,
@@ -40,6 +50,10 @@ export function SearchInput({
     RNTextInput) as ComponentType<RNTextInputProps & { ref?: Ref<RNTextInputInstance> }>;
   const { colors, resolveRadius, isCompact } = usePluginTheme();
   const radius = resolveRadius("sm");
+  // Unspecified keeps the original compact-aware default so every call site
+  // that does not opt in renders exactly as before (#645's scope was the
+  // uppidi-fleet filter rows only).
+  const resolvedHeight = height ?? (isCompact ? 36 : 40);
 
   const handleClear = () => {
     onChangeText("");
@@ -54,7 +68,7 @@ export function SearchInput({
           backgroundColor: colors.surface1,
           borderColor: colors.border,
           borderRadius: radius,
-          height: isCompact ? 36 : 40,
+          height: resolvedHeight,
         },
         style,
       ]}
@@ -72,7 +86,7 @@ export function SearchInput({
           styles.input,
           {
             color: colors.foreground,
-            fontSize: isCompact ? 13 : 14,
+            fontSize: height !== undefined && height <= 26 ? 12 : isCompact ? 13 : 14,
           },
           inputStyle,
         ]}

package/client/vendor/paseo-plugin-helper/components/SectionHeader.tsx

@@ -41,6 +41,8 @@ export function SectionHeader({
   return (
     <View style={[styles.container, style]}>
       <Text
+        numberOfLines={1}
+        ellipsizeMode="tail"
         style={[
           styles.title,
           {
@@ -73,8 +75,13 @@ const styles = StyleSheet.create({
     gap: 8,
     marginTop: 8,
     marginBottom: 2,
+    flexShrink: 1,
+    maxWidth: "100%",
   },
   title: {
     letterSpacing: 0.8,
+    // Section titles are caller-supplied and unbounded; the title must be
+    // allowed to compress for `numberOfLines` to engage.
+    flexShrink: 1,
   },
 });