@xpufx/paseo-top 0.4.3 → 0.4.4

package/client/pill-labels.ts

@@ -56,6 +56,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;
@@ -262,28 +276,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 +323,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":

package/client/pill.tsx

@@ -28,16 +28,14 @@ import {
   Badge,
   Icon,
   AboutSection,
-  CustomPillBody,
   CustomPillModalContent,
   useRpcQuery,
   usePluginSettings,
   usePluginTheme,
   getStatusColor,
   triggerHaptic,
-  shouldEmitSnapshotUpdate,
+  type HostPillProps,
   type RenderModalProps,
-  type RenderPillProps,
   type KeyValueProps,
   type CardHeaderProps,
   type BadgeProps,
@@ -47,8 +45,8 @@ import {
   formatUptime,
   resolveMetricStatus,
   type MetricThresholds,
-  type CustomPillState,
 } from "../shared/vendor/paseo-plugin-helper/index";
+import { PermissionAuditView } from "permission-audit/client";
 import {
   getSystemResourcesRpc,
   topSettingsContract,
@@ -72,6 +70,7 @@ import {
 } from "../shared/resources";
 import { PLUGIN_VERSION } from "../shared/version";
 import { TopDashboardSurface } from "./surface";
+import { addSettingsListener, removeSettingsListener, notifySettingsChanged } from "./settings-events";
 import { useTopResourceQuery, useCustomPillsQuery } from "./resources-query";
 import { ChoiceChips } from "./settings-ui";
 import {
@@ -140,6 +139,7 @@ const MEM_THRESHOLDS: MetricThresholds = { warning: 70, danger: 85 };
 const TABS = [
   { id: "system", label: "System", shortLabel: "System", icon: "Activity" },
   { id: "context", label: "Workspace", shortLabel: "Workspace", icon: "GitBranch" },
+  { id: "permissions", label: "Permissions", shortLabel: "Permissions", icon: "ShieldCheck" },
   { id: "settings", label: "Settings", shortLabel: "Settings", icon: "Sliders" },
   { id: "about", label: "About", shortLabel: "About", icon: "Info" },
 ];
@@ -177,7 +177,7 @@ function getMetricColors(
 // so pill call sites keep a single import path.
 export type { PillItemType } from "./pill-labels";
 
-export type ModalTab = "system" | "context" | "settings" | "about";
+export type ModalTab = "system" | "context" | "permissions" | "settings" | "about";
 
 export function getItemTab(item: PillItemType): "system" | "context" {
   switch (item) {
@@ -448,26 +448,8 @@ function PillItemContent({
   );
 }
 
-type SettingsListener = (settings: TopSettings) => void;
-const settingsListeners = new Set<SettingsListener>();
-let lastNotifiedSettings: TopSettings | null = null;
-
-export function notifySettingsChanged(settings: TopSettings) {
-  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
-    }
-  }
-}
+export { notifySettingsChanged } from "./settings-events";
+type SettingsListener = import("./settings-events").SettingsListener;
 
 function PillOffline() {
   const { colors } = usePluginTheme();
@@ -521,9 +503,8 @@ interface PillSegmentProps {
 }
 
 /**
- * The composer pill body is host-pressed: legacy hosts wrap `renderPill` in
- * their own pressable and route the tap through `resolveDefaultPayload`, so the
- * segment must not nest a second interaction handler.
+ * The segment must not nest a second interaction handler: on the host-rendered
+ * pill it sits inside the host's own pressable.
  */
 function PillSegment({
   item,
@@ -584,7 +565,21 @@ function AllInOnePill({
   );
 }
 
-export interface SingleItemPillViewProps extends RenderPillProps<ModalTab> {
+/**
+ * Props the pill body views used to receive from the helper's `renderPill`
+ * option, which the Paseo 0.9 host shape removed: the host renders the pill
+ * body itself, so nothing wires these views any more. The shape is kept
+ * because `pill-render.test.tsx` still regression-tests their mobile layout
+ * (#507) and that coverage is worth more than the dead wiring.
+ */
+interface PillBodyProps extends HostPillProps {
+  isOpen: boolean;
+  open(payload?: ModalTab): void;
+  close(): void;
+  toggle(payload?: ModalTab): void;
+}
+
+export interface SingleItemPillViewProps extends PillBodyProps {
   item: PillItemType;
   defaultTab?: ModalTab;
 }
@@ -669,7 +664,7 @@ export function SingleItemPillView({
   );
 }
 
-function PillView({ isOpen, open, workspaceId, agentId }: RenderPillProps<ModalTab>) {
+function PillView({ isOpen, open, workspaceId, agentId }: PillBodyProps) {
   // No background settings poll here: the hook re-verifies on mount and
   // window focus, and mutations invalidate the shared settings cache.
   // Polling from every mounted pill/modal/surface multiplied daemon reads
@@ -1685,6 +1680,10 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
       </>
     )}
 
+    {activeTab === "permissions" && (
+      <PermissionAuditView variant="compact" />
+    )}
+
     {activeTab === "about" && (
       <AboutSection
         name="paseo-top"
@@ -1731,17 +1730,6 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
   );
 }
 
-interface LiveCustomPillViewProps {
-  pillId: string;
-  initial: CustomPillState;
-}
-
-function LiveCustomPillView({ pillId, initial }: LiveCustomPillViewProps) {
-  const { data } = useCustomPillsQuery();
-  const liveState = data?.pills.find((p) => p.id === pillId) ?? initial;
-  return <CustomPillBody state={liveState} />;
-}
-
 interface LiveCustomPillModalProps {
   pillId: string;
   initial: CustomPillStateOutput;
@@ -1856,12 +1844,6 @@ export function contributeClient(client: ComposerPillRegistrar | PluginClientCon
           modalTitle: "Host System Resources",
           modalIcon: "Activity",
           icon: "Cpu",
-          resolveDefaultPayload: ({ agentId }) => {
-            if (latestSettings.pillMode === "all") {
-              return latestSettings.defaultTab;
-            }
-            return currentCycleTabByAgent.get(agentId) ?? latestSettings.defaultTab;
-          },
           resolveLabel: async (ctx) => {
             const snap = await liveSnapshotFor(ctx);
             const items = enabledItemsForSettings(latestSettings);
@@ -1878,7 +1860,6 @@ export function contributeClient(client: ComposerPillRegistrar | PluginClientCon
             };
           },
           refreshIntervalMs: 3000,
-          renderPill: (props) => <PillView {...props} />,
           renderModal: (props) => <ResourceModal {...props} />,
         });
         activePills.set("paseo-top", cleanup);
@@ -2083,16 +2064,8 @@ export function contributeClient(client: ComposerPillRegistrar | PluginClientCon
             modalTitle: pillDef.modalTitle,
             icon: pillDef.icon,
             modalIcon: pillDef.icon,
-            resolveDefaultPayload: () => pillDef.defaultTab,
             resolveLabel: singleItemLabelResolver(pillDef.item),
             refreshIntervalMs: 5000,
-            renderPill: (props) => (
-              <SingleItemPillView
-                item={pillDef.item}
-                defaultTab={pillDef.defaultTab}
-                {...props}
-              />
-            ),
             renderModal: (props) => (
               <ResourceModal initialTab={pillDef.defaultTab} {...props} />
             ),
@@ -2104,7 +2077,7 @@ export function contributeClient(client: ComposerPillRegistrar | PluginClientCon
   }
 
   // Register settings listener
-  settingsListeners.add(syncPills);
+  addSettingsListener(syncPills);
 
   // Initial sync synchronously
   syncPills(topSettingsContract.defaultSettings);
@@ -2185,7 +2158,6 @@ export function contributeClient(client: ComposerPillRegistrar | PluginClientCon
               );
             },
             refreshIntervalMs: 5000,
-            renderPill: () => <LiveCustomPillView pillId={pill.id} initial={pill} />,
             renderModal: () => (
               <LiveCustomPillModal pillId={pill.id} initial={pill} />
             ),
@@ -2206,7 +2178,7 @@ export function contributeClient(client: ComposerPillRegistrar | PluginClientCon
   const onSettingsChanged = () => {
     void syncCustomPills();
   };
-  settingsListeners.add(onSettingsChanged);
+  addSettingsListener(onSettingsChanged);
 
   let disposed = false;
   const cleanup = () => {
@@ -2218,8 +2190,8 @@ export function contributeClient(client: ComposerPillRegistrar | PluginClientCon
       cleanupSidebar = null;
     }
     clearInterval(customPillInterval);
-    settingsListeners.delete(syncPills);
-    settingsListeners.delete(onSettingsChanged);
+    removeSettingsListener(syncPills);
+    removeSettingsListener(onSettingsChanged);
     for (const cleanup of activePills.values()) {
       cleanup();
     }
@@ -2252,6 +2224,11 @@ const styles = {
     overflow: "hidden",
     flexShrink: 1,
     minWidth: 0,
+    // The pill label is one short line; without a height floor a body that
+    // momentarily renders no text (loading, or a blank host field) collapses to
+    // an unreadable skinny line on mobile (xpufx-org/paseo#507). The host
+    // composer pill is 32pt; keep the inner body at least a line tall.
+    minHeight: 20,
   },
   pillText: {
     fontSize: 11,
@@ -2417,6 +2394,8 @@ const styles = {
     overflow: "hidden",
     flexShrink: 1,
     minWidth: 0,
+    // See pillContainer: the combined pill must keep a line-height floor too.
+    minHeight: 20,
   },
   dividerText: {
     fontSize: 10,

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,16 +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" | "fleet" | "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" },
 ];
@@ -174,6 +176,8 @@ export function TopDashboardSurface(_props: PluginSurfaceProps) {
 
       {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

@@ -112,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={accessibilityRole}
       accessibilityLabel={accessibilityLabel || label}
-      hitSlop={Math.max(0, (touchTargetMin - 32) / 2)}
+      hitSlop={hitSlopSide}
       style={({ pressed }) => [
         styles.base,
         {
@@ -128,7 +140,6 @@ export function Button({
           borderRadius: radius,
           paddingVertical: py,
           paddingHorizontal: px,
-          minHeight: Math.max(30, touchTargetMin - 4),
           opacity: disabled ? 0.45 : 1,
         },
         style,
@@ -143,6 +154,8 @@ export function Button({
           {iconPosition === "left" && renderIcon()}
           {label ? (
             <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
               style={[
                 styles.text,
                 {
@@ -176,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

@@ -52,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>
   );
 }
@@ -67,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,
   },
 });