@xpufx/paseo-top 0.4.2 → 0.4.4

package/README.md

@@ -1,6 +1,6 @@
 # paseo-top
 
-Live host system resource monitor and telemetry provider for [Paseo](https://github.com/getpaseo/paseo) (v0.8+).
+Live host system resource monitor and telemetry provider for [Paseo](https://github.com/getpaseo/paseo).
 
 Displays real-time host metrics, session metadata, turn telemetry, and custom pill widgets directly in the composer track bar without cluttering the interface. Automatically stamps performance summaries into agent conversation timelines and provides an interactive modal dashboard with live gauges.
 
@@ -12,11 +12,11 @@ Built on [paseo-plugin-helper](https://github.com/xpufx/paseo/tree/main/packages
 
 | General Composer View | Dashboard View |
 | :---: | :---: |
-| [![General Composer View](screenshots/paseo-top-general-view.jpg)](screenshots/paseo-top-general-view.jpg) | [![Dashboard View](screenshots/paseo-top-dashboard.jpg)](screenshots/paseo-top-dashboard.jpg) |
+| [![General Composer View](https://raw.githubusercontent.com/xpufx/paseo/main/plugins/top/screenshots/paseo-top-general-view.jpg)](https://raw.githubusercontent.com/xpufx/paseo/main/plugins/top/screenshots/paseo-top-general-view.jpg) | [![Dashboard View](https://raw.githubusercontent.com/xpufx/paseo/main/plugins/top/screenshots/paseo-top-dashboard.jpg)](https://raw.githubusercontent.com/xpufx/paseo/main/plugins/top/screenshots/paseo-top-dashboard.jpg) |
 
 | System Resources Modal | Workspace Context Modal | Settings Modal | About Modal |
 | :---: | :---: | :---: | :---: |
-| <img src="screenshots/1-paseo-top-modal-system.jpg" alt="System Resources Modal" width="100%" /> | <img src="screenshots/2-paseo-top-modal-workspace.jpg" alt="Workspace Context Modal" width="100%" /> | <img src="screenshots/3-paseo-top-modal-settings.jpg" alt="Settings Modal" width="100%" /> | <img src="screenshots/4-paseo-top-modal-about.jpg" alt="About Modal" width="100%" /> |
+| <img src="https://raw.githubusercontent.com/xpufx/paseo/main/plugins/top/screenshots/1-paseo-top-modal-system.jpg" alt="System Resources Modal" width="100%" /> | <img src="https://raw.githubusercontent.com/xpufx/paseo/main/plugins/top/screenshots/2-paseo-top-modal-workspace.jpg" alt="Workspace Context Modal" width="100%" /> | <img src="https://raw.githubusercontent.com/xpufx/paseo/main/plugins/top/screenshots/3-paseo-top-modal-settings.jpg" alt="Settings Modal" width="100%" /> | <img src="https://raw.githubusercontent.com/xpufx/paseo/main/plugins/top/screenshots/4-paseo-top-modal-about.jpg" alt="About Modal" width="100%" /> |
 
 
 ## Core Capabilities
@@ -45,6 +45,7 @@ Built on [paseo-plugin-helper](https://github.com/xpufx/paseo/tree/main/packages
 
 ### 4. Fleet & MCP Integration
 - **MCP Server Health**: Bridges with `mcp-tools` to monitor connected MCP servers, distinguishing healthy, degraded, or offline servers alongside latency figures.
+- **Multi-Host Fleet View**: The dashboard **Fleet** tab enumerates hosts from `useHosts()` and shows one card per host with a status badge (`online` / `stale` / `offline` / `error`), probe latency, and per-host counts. Counts are summed across responsive hosts; CPU/RAM/load stay per-host and are never aggregated. Polling is bounded to one in-flight probe per host on a 15s cadence with a 4s per-host timeout that marks the host `stale` until the next tick. No remote shell or custom-command execution is performed.
 
 ### 5. Flexible Display Modes
 - **Cycle Mode**: Automatically cycles through enabled metric segments on each refresh interval.
@@ -75,24 +76,22 @@ Add user-defined metrics by dropping declarative `.jsonc` definitions into `~/.p
 
 ### 8. Native Modal Dashboard
 Clicking the pill opens a native dashboard with:
-- **Pinned Header Navbar**: Fixed tabs for System Resources, Activity Timeline, Custom Pills, Settings, and About. Content smoothly scrolls beneath the navbar.
+- **Pinned Header Navbar**: Fixed tabs for System Resources, Fleet, Activity Timeline, Custom Pills, Settings, and About. Content smoothly scrolls beneath the navbar.
 - **Visual Gauges**: Responsive bars showing CPU and RAM distribution.
 - **Full Settings Suite**: Live toggles for every metric and pill, with persistent state managed by `PluginStorage`.
 
 ## Installation
 
-Install using the native Paseo monorepo subpath syntax:
+Install from npm:
 
-```bash
-paseo plugin add xpufx/paseo --path plugins/top
+```sh
+paseo plugin add npm:@xpufx/paseo-top
 ```
 
-For local development:
+Or install directly from the Git repository:
 
-```bash
-git clone git@github.com:xpufx/paseo.git
-cd paseo
-paseo plugin add ./plugins/top
+```sh
+paseo plugin add xpufx/paseo --path plugins/top
 ```
 
 ## Development

package/client/multi-host-view.tsx

@@ -0,0 +1,177 @@
+import React, { useMemo } from "react";
+import { Text } from "react-native";
+import {
+  Badge,
+  Card,
+  CardHeader,
+  EmptyState,
+  KeyValue,
+  KeyValueGroup,
+  Row,
+  SectionHeader,
+  Stack,
+  StatusDot,
+  usePluginTheme,
+} from "./vendor/paseo-plugin-helper/index";
+import {
+  aggregateFleet,
+  type FleetHostSnapshot,
+  type FleetHostStatus,
+} from "../shared/multi-host";
+import { useFleetPolling } from "./multi-host";
+
+const STATUS_VARIANT: Record<
+  FleetHostStatus,
+  "success" | "warning" | "neutral" | "danger"
+> = {
+  online: "success",
+  stale: "warning",
+  offline: "neutral",
+  error: "danger",
+};
+
+const STATUS_LABEL: Record<FleetHostStatus, string> = {
+  online: "online",
+  stale: "stale",
+  offline: "offline",
+  error: "error",
+};
+
+function formatLatency(latencyMs: number | null): string {
+  if (latencyMs === null) return "--";
+  if (latencyMs < 1000) return `${Math.round(latencyMs)} ms`;
+  return `${(latencyMs / 1000).toFixed(2)} s`;
+}
+
+function formatStaleAge(
+  staleAt: number | null,
+  now: number,
+): string | null {
+  if (staleAt === null) return null;
+  const seconds = Math.max(0, Math.round((now - staleAt) / 1000));
+  return `stale ${seconds}s`;
+}
+
+function FleetHostCard({
+  snapshot,
+  now,
+}: {
+  snapshot: FleetHostSnapshot;
+  now: number;
+}) {
+  const { colors } = usePluginTheme();
+  const variant = STATUS_VARIANT[snapshot.status];
+  const staleAge = formatStaleAge(snapshot.staleAt, now);
+  const subtitle =
+    snapshot.status === "online"
+      ? "Connected"
+      : (staleAge ?? snapshot.error ?? "Not connected");
+
+  return (
+    <Card variant="elevated">
+      <CardHeader
+        icon="Server"
+        title={snapshot.label}
+        subtitle={subtitle}
+        badge={
+          <Row gap={6} align="center">
+            <StatusDot
+              variant={snapshot.status === "online" ? "success" : variant}
+              pulse={snapshot.status === "online"}
+            />
+            <Badge
+              label={STATUS_LABEL[snapshot.status]}
+              variant={variant}
+              size="sm"
+            />
+          </Row>
+        }
+      />
+      <KeyValueGroup>
+        <KeyValue label="Host" value={snapshot.serverId} truncate="middle" copyable />
+        <KeyValue label="Latency" value={formatLatency(snapshot.latencyMs)} />
+        <KeyValue
+          label="Agents"
+          value={snapshot.counts ? String(snapshot.counts.agents) : "--"}
+        />
+        <KeyValue
+          label="Active agents"
+          value={snapshot.counts ? String(snapshot.counts.activeAgents) : "--"}
+        />
+        <KeyValue
+          label="Workspaces"
+          value={snapshot.counts ? String(snapshot.counts.workspaces) : "--"}
+        />
+      </KeyValueGroup>
+      {snapshot.status === "error" && snapshot.error ? (
+        <Text style={{ marginTop: 8, fontSize: 11, color: colors.statusDanger }}>
+          {snapshot.error}
+        </Text>
+      ) : null}
+    </Card>
+  );
+}
+
+/**
+ * Multi-host Fleet view. Renders one card per configured host with a status
+ * badge and per-host counts, plus a counts-only aggregate. Local Top gauges
+ * (CPU/RAM) stay in the Activity tab and are never summed or averaged here.
+ *
+ * Mounting is the lifecycle: this component is rendered only while the Fleet
+ * tab is active, so it starts polling on mount and disposes on unmount. Local
+ * Top behavior is unaffected whenever the tab is not selected.
+ */
+export function FleetView() {
+  const { colors } = usePluginTheme();
+  const snapshots = useFleetPolling();
+  const now = Date.now();
+  const aggregate = useMemo(() => aggregateFleet(snapshots), [snapshots]);
+
+  if (snapshots.length === 0) {
+    return (
+      <EmptyState
+        icon="Server"
+        title="No other hosts"
+        description="Configure additional hosts in Paseo to see their fleet status here."
+      />
+    );
+  }
+
+  return (
+    <Stack gap={12}>
+      <Text style={{ fontSize: 16, fontWeight: "700", color: colors.foreground }}>
+        Multi-Host Fleet
+      </Text>
+
+      <Card variant="elevated">
+        <CardHeader
+          title="Fleet Totals"
+          icon="Activity"
+          subtitle="Counts only. CPU/RAM/load stay per-host."
+        />
+        <KeyValueGroup>
+          <KeyValue label="Hosts" value={`${aggregate.responsive}/${aggregate.hosts} responsive`} />
+          <KeyValue
+            label="Online / Stale"
+            value={`${aggregate.online} / ${aggregate.stale}`}
+          />
+          <KeyValue label="Agents" value={String(aggregate.counts.agents)} />
+          <KeyValue
+            label="Active agents"
+            value={String(aggregate.counts.activeAgents)}
+          />
+          <KeyValue label="Workspaces" value={String(aggregate.counts.workspaces)} />
+        </KeyValueGroup>
+      </Card>
+
+      <SectionHeader title="Hosts" count={snapshots.length} />
+      {snapshots.map((snapshot) => (
+        <FleetHostCard
+          key={snapshot.serverId}
+          snapshot={snapshot}
+          now={now}
+        />
+      ))}
+    </Stack>
+  );
+}

package/client/multi-host.ts

@@ -0,0 +1,98 @@
+import { getPaseoClient, useHosts } from "@getpaseo/plugin/client";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  MultiHostPoller,
+  type FleetHostClient,
+  type FleetHostCounts,
+  type FleetHostSnapshot,
+} from "../shared/multi-host";
+
+/**
+ * Wrap a borrowed `getPaseoClient(serverId)` as a fleet client.
+ *
+ * Only counts are read. The borrowed API exposes agents/workspaces/projects/
+ * terminals/providers/config and no host-metrics RPC, so the fleet view cannot
+ * show remote CPU/RAM/load/uptime; fabricating them would be mock data.
+ */
+export function createFleetClient(serverId: string): FleetHostClient {
+  // getPaseoClient throws for a non-online/unknown host; the poller only
+  // acquires for online hosts, and the throw is caught per host so one bad
+  // host cannot break the others.
+  const client = getPaseoClient(serverId);
+  return {
+    async readCounts(): Promise<FleetHostCounts> {
+      const [agents, workspaces] = await Promise.all([
+        client.agents.list(),
+        client.workspaces.list(),
+      ]);
+      const entries = agents.entries ?? [];
+      return {
+        agents: entries.length,
+        activeAgents: entries.filter((entry) => entry.agent?.status === "running")
+          .length,
+        workspaces: workspaces.entries?.length ?? 0,
+      };
+    },
+    dispose() {
+      return client.dispose();
+    },
+  };
+}
+
+export interface UseFleetPollingOptions {
+  /** Poll only while the fleet view is visible; keeps local-only paths idle. */
+  enabled?: boolean;
+}
+
+/**
+ * Bounded multi-host fleet polling hook.
+ *
+ * Enumerates online hosts with `useHosts()`, acquires a borrowed
+ * `getPaseoClient(serverId)` per online host, and drives the pure
+ * {@link MultiHostPoller} state machine: max one in-flight probe per host,
+ * 15s cadence, 4s per-host timeout, stale marking, and dispose/reacquire on
+ * host status transitions. Local Top behavior is untouched because nothing
+ * starts unless the fleet view is mounted and enabled.
+ */
+export function useFleetPolling({ enabled = true }: UseFleetPollingOptions = {}) {
+  const hosts = useHosts();
+  const [snapshots, setSnapshots] = useState<FleetHostSnapshot[]>([]);
+  const pollerRef = useRef<MultiHostPoller | null>(null);
+
+  const hostInputs = useMemo(
+    () =>
+      hosts.map((host) => ({
+        serverId: host.serverId,
+        label: host.label,
+        status: host.status,
+      })),
+    [hosts],
+  );
+
+  // Keep the latest host list in a ref so the create-once effect can seed from
+  // it without re-subscribing on every status change.
+  const hostInputsRef = useRef(hostInputs);
+  hostInputsRef.current = hostInputs;
+
+  useEffect(() => {
+    if (!enabled) return;
+    const poller = new MultiHostPoller({
+      acquire: createFleetClient,
+      onUpdate: setSnapshots,
+    });
+    pollerRef.current = poller;
+    poller.setHosts(hostInputsRef.current);
+    poller.start();
+    return () => {
+      poller.dispose();
+      pollerRef.current = null;
+      setSnapshots([]);
+    };
+  }, [enabled]);
+
+  useEffect(() => {
+    pollerRef.current?.setHosts(hostInputs);
+  }, [hostInputs]);
+
+  return snapshots;
+}

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
@@ -1111,6 +1106,7 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
       <ModalBody
         style={{ backgroundColor: colors.surface0 }}
         headerMode="pinned"
+        scrollMode="always"
         refreshing={isRefetching}
         onRefresh={handleRefresh}
         header={navbar}
@@ -1135,6 +1131,7 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
     <ModalBody
       style={{ backgroundColor: colors.surface0 }}
       headerMode="pinned"
+      scrollMode="always"
       refreshing={isLoading || isRefetching}
       onRefresh={handleRefresh}
       header={navbar}
@@ -1683,6 +1680,10 @@ function ResourceModal({ theme, workspaceId, agentId, initialTab, payload }: Res
       </>
     )}
 
+    {activeTab === "permissions" && (
+      <PermissionAuditView variant="compact" />
+    )}
+
     {activeTab === "about" && (
       <AboutSection
         name="paseo-top"
@@ -1729,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;
@@ -1854,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);
@@ -1876,7 +1860,6 @@ export function contributeClient(client: ComposerPillRegistrar | PluginClientCon
             };
           },
           refreshIntervalMs: 3000,
-          renderPill: (props) => <PillView {...props} />,
           renderModal: (props) => <ResourceModal {...props} />,
         });
         activePills.set("paseo-top", cleanup);
@@ -2081,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} />
             ),
@@ -2102,7 +2077,7 @@ export function contributeClient(client: ComposerPillRegistrar | PluginClientCon
   }
 
   // Register settings listener
-  settingsListeners.add(syncPills);
+  addSettingsListener(syncPills);
 
   // Initial sync synchronously
   syncPills(topSettingsContract.defaultSettings);
@@ -2183,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} />
             ),
@@ -2204,7 +2178,7 @@ export function contributeClient(client: ComposerPillRegistrar | PluginClientCon
   const onSettingsChanged = () => {
     void syncCustomPills();
   };
-  settingsListeners.add(onSettingsChanged);
+  addSettingsListener(onSettingsChanged);
 
   let disposed = false;
   const cleanup = () => {
@@ -2216,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();
     }
@@ -2250,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,
@@ -2415,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,