@xpufx/paseo-top 0.4.2 → 0.4.3

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.tsx

@@ -1111,6 +1111,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 +1136,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}

package/client/surface.tsx

@@ -30,11 +30,13 @@ import { PLUGIN_VERSION } from "../shared/version";
 import { notifySettingsChanged } from "./pill";
 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" | "settings" | "about";
 
 const TABS = [
   { id: "system", label: "Activity", shortLabel: "Activity", icon: "Activity" },
+  { id: "fleet", label: "Fleet", shortLabel: "Fleet", icon: "Server" },
   { id: "settings", label: "Settings", shortLabel: "Settings", icon: "Sliders" },
   { id: "about", label: "About", shortLabel: "About", icon: "Info" },
 ];
@@ -47,12 +49,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 +79,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 +172,8 @@ export function TopDashboardSurface(_props: PluginSurfaceProps) {
         </Stack>
       )}
 
+      {activeTab === "fleet" && <FleetView />}
+
       {activeTab === "settings" && (
         <Stack gap={12}>
           <Card variant="elevated">

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();
@@ -112,7 +116,7 @@ export function Button({
     <Pressable
       onPress={onPress}
       disabled={disabled || loading}
-      accessibilityRole="button"
+      accessibilityRole={accessibilityRole}
       accessibilityLabel={accessibilityLabel || label}
       hitSlop={Math.max(0, (touchTargetMin - 32) / 2)}
       style={({ pressed }) => [
@@ -132,6 +136,8 @@ export function Button({
     >
       {loading ? (
         <ActivityIndicator size="small" color={textColor} />
+      ) : children ? (
+        children
       ) : (
         <>
           {iconPosition === "left" && renderIcon()}

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 }) => [

package/client/vendor/paseo-plugin-helper/index.ts

@@ -1,4 +1,5 @@
 export * from "./theme/index";
+export * from "./styles/index";
 export * from "./components/index";
 export * from "./layout/index";
 export * from "./pill";

package/client/vendor/paseo-plugin-helper/layout/ModalBody.tsx

@@ -88,7 +88,7 @@ export interface ModalBodyProps {
  * Adding the `"required"` member is additive: the existing two values keep
  * their meaning and the default stays `"helper"`.
  */
-export type ModalBodyScrollOwner = "helper" | "host" | "required";
+export type ModalBodyScrollOwner = "helper" | "host" | "required" | "popover";
 
 export const ModalBodyScrollOwnerContext = createContext<ModalBodyScrollOwner>("helper");
 
@@ -154,7 +154,7 @@ export function ModalBody({
 }: ModalBodyProps) {
   const { isCompact, isMobile, layout, padding, colors } = usePluginTheme();
   const scrollOwner = useContext(ModalBodyScrollOwnerContext);
-  const hostOwnsScroll = scrollOwner === "host";
+  const hostOwnsScroll = scrollOwner === "host" || scrollOwner === "popover";
   // "required": an ancestor proved the host supplies no scroller (plugin
   // surface) — own the scroll on every surface, including non-compact desktop.
   const helperOwnsScroll =
@@ -165,7 +165,7 @@ export function ModalBody({
   // already full-bleed, and a composer popover viewport is host-owned and
   // intentionally narrow, so both ignore the preset.
   const sizeStyle =
-    size === "large" && !isMobile && !isCompact && !hostOwnsScroll
+    size === "large" && !isMobile && !isCompact && scrollOwner !== "popover"
       ? styles.largeDialog
       : undefined;
   const ResolvedScrollView = selectHostScrollView(

package/client/vendor/paseo-plugin-helper/layout/ModalContent.tsx

@@ -1,35 +1,33 @@
 import React, { type ReactNode } from "react";
 import { getClientHost } from "../host";
-import { ModalBody, type ModalBodyProps } from "./ModalBody";
+import { ModalBody, ModalBodyScrollOwnerContext, type ModalBodyProps } from "./ModalBody";
 
 export interface ModalContentProps extends Omit<ModalBodyProps, "scrollMode"> {
   children: ReactNode;
+  /**
+   * Whether the host owns the outer scroll container.
+   * Defaults to `true` so host desktop mouse wheel, trackpad, and mobile bottom
+   * sheet gestures scroll natively without fighting an inner scroller.
+   * Set to `false` only if the modal contains a custom internal scroller
+   * (e.g. virtualized list or canvas).
+   */
+  scrollable?: boolean;
 }
 
 /**
  * Helper-owned modal body for plugins that open their own host `<Modal>`.
  *
- * Use this instead of the raw host `<Modal.Content>`: it wraps the host content
- * view AND the shared `ModalBody` contract in one element, so a plugin cannot
- * accidentally end up content-sized.
+ * Delegates scroll ownership to the host `<Modal.Content>` (scrollable by default)
+ * so desktop mouse wheel, trackpad, and mobile bottom sheet gestures scroll
+ * natively under Paseo host rules without fighting an inner scroller.
  *
- * Why the raw host `Modal.Content` resizes: Paseo maps
- * `<Modal.Content scrollable={true}>` (the host default) to a desktop card with
- * no explicit height, so the dialog grows/shrinks with its children on every
- * data change. This wrapper always passes `scrollable={false}`, which makes the
- * host allocate a bounded dialog (`desktopHeight: "85%"`). Because that host
- * content view then supplies no scroller, the wrapper also forces
- * `ModalBody scrollMode="always"`, so the helper owns the one scroll region on
- * every surface and the bounded dialog scrolls instead of clipping.
- *
- * The size contract is `ModalBody`'s: it takes the host-allocated dialog size
- * and is fluid within it; `size?: "default" | "large"` is the only size escape
- * hatch. Do not add per-plugin width/minWidth/height literals around it.
+ * Sizing stays fluid within the host-allocated modal frame, respecting
+ * `size?: "default" | "large"`.
  *
  * ```tsx
  * <Modal title="…" open={open} onOpenChange={setOpen}>
  *   <ModalContent size="default">
- *     …cards, controls, rows; content never drives the dialog frame…
+ *     …cards, controls, rows…
  *   </ModalContent>
  * </Modal>
  * ```
@@ -37,13 +35,17 @@ export interface ModalContentProps extends Omit<ModalBodyProps, "scrollMode"> {
  * Accepts every `ModalBody` prop (header, headerMode, refreshing, onRefresh,
  * stickToEnd, scrollRef, debugTag, style, contentContainerStyle, …).
  */
-export function ModalContent({ children, ...bodyProps }: ModalContentProps) {
+export function ModalContent({
+  children,
+  scrollable = true,
+  ...bodyProps
+}: ModalContentProps) {
   const { Modal } = getClientHost();
   return (
-    <Modal.Content scrollable={false}>
-      <ModalBody scrollMode="always" {...bodyProps}>
-        {children}
-      </ModalBody>
+    <Modal.Content scrollable={scrollable}>
+      <ModalBodyScrollOwnerContext.Provider value={scrollable ? "host" : "required"}>
+        <ModalBody {...bodyProps}>{children}</ModalBody>
+      </ModalBodyScrollOwnerContext.Provider>
     </Modal.Content>
   );
 }

package/client/vendor/paseo-plugin-helper/panel.tsx

@@ -20,6 +20,8 @@ export interface RegisterWorkspacePanelOptions {
   icon: string;
   Component: ComponentType<PluginWorkspacePanelProps>;
   flair?: VisualFlair;
+  /** Host locations in which the panel should be available. */
+  locations?: string[];
 }
 
 export interface RegisterAgentPanelOptions {
@@ -37,8 +39,8 @@ export interface RegisterAgentPanelOptions {
 export function registerWorkspacePanel(
   plugin: WorkspacePanelRegistrar,
   options: RegisterWorkspacePanelOptions,
-): void {
-  const { id, title, icon, Component, flair } = options;
+): () => void {
+  const { id, title, icon, Component, flair, locations } = options;
 
   const WrappedComponent: ComponentType<PluginWorkspacePanelProps> = (props) => (
     <PluginThemeProvider theme={props.theme} layout={props.layout} flair={flair}>
@@ -46,13 +48,19 @@ export function registerWorkspacePanel(
     </PluginThemeProvider>
   );
 
-  plugin.addWorkspacePanel({
+  const registration = plugin.addWorkspacePanel({
     id,
     title,
     icon,
     context: "workspace",
+    locations,
     Component: WrappedComponent,
   });
+
+  return () => {
+    if (typeof registration === "function") registration();
+    else registration?.remove?.();
+  };
 }
 
 /**