@xpufx/paseo-top 0.4.4 → 0.4.5

package/client/turn-panel.tsx

@@ -1,22 +1,23 @@
 import React, { useEffect, useMemo } from "react";
-import { Text } from "react-native";
+import { Text, View } from "react-native";
 import type { PluginAgentPanelProps } from "@getpaseo/plugin/client";
 import { useAgent, usePaseo } from "@getpaseo/plugin/client";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
-  Badge,
-  Card,
-  CardHeader,
-  EmptyState,
-  KeyValue,
-  KeyValueGroup,
-  ModalBody,
-  PluginThemeProvider,
-  Row,
-  SectionHeader,
-  Stack,
-  usePluginTheme,
-} from "./vendor/paseo-plugin-helper/index";
+  HostBadge,
+  HostCard,
+  HostCardHeader,
+  HostEmptyState,
+  HostKeyValue,
+  HostLayoutProvider,
+  HostRow,
+  HostScroll,
+  HostSectionHeader,
+  HostStack,
+  HostThemeProvider,
+  useHostLayout,
+  useHostTheme,
+} from "./host-ui";
 import {
   currentTurn,
   fetchAllTurns,
@@ -39,19 +40,24 @@ function previewLine(text: string): string {
  * panel is open; full history is paged, so the count does not reset to the
  * tail window on long conversations.
  *
- * Registered with the raw `addWorkspacePanel`, which does not inject the helper
- * theme provider (unlike `registerWorkspacePanel`), so the body is wrapped here.
+ * Registered with the raw `addWorkspacePanel`, which does not inject a theme
+ * provider (unlike `registerWorkspacePanel`), so the body is wrapped here.
+ * The panel host supplies no scroller, so HostScroll owns the one scroll
+ * region below the pinned header row.
  */
 export function TurnCounterPanel({ theme, layout, agentId }: PluginAgentPanelProps) {
   return (
-    <PluginThemeProvider theme={theme} layout={layout}>
-      <TurnCounterBody agentId={agentId} />
-    </PluginThemeProvider>
+    <HostThemeProvider theme={theme}>
+      <HostLayoutProvider layout={layout}>
+        <TurnCounterBody agentId={agentId} />
+      </HostLayoutProvider>
+    </HostThemeProvider>
   );
 }
 
 function TurnCounterBody({ agentId }: { agentId: string }) {
-  const { colors, padding } = usePluginTheme();
+  const { colors } = useHostTheme();
+  const { compact } = useHostLayout();
   const paseo = usePaseo();
   const queryClient = useQueryClient();
 
@@ -84,99 +90,115 @@ function TurnCounterBody({ agentId }: { agentId: string }) {
   // Newest first, so the last turn is the first row the operator sees.
   const ordered = useMemo(() => [...turns].reverse(), [turns]);
 
+  // Host-density padding (the helper's "comfortable" scale): the host owns
+  // density now, so the panel keeps the same numeric rhythm locally.
+  const padding = compact
+    ? { horizontal: 12, vertical: 10, gap: 8 }
+    : { horizontal: 16, vertical: 14, gap: 12 };
+
   return (
-    <ModalBody
-      size="large"
-      headerMode="pinned"
-      refreshing={turnsQuery.isFetching}
-      onRefresh={() => void turnsQuery.refetch()}
-      header={
-        <Row justify="space-between" align="center" gap="sm">
-          <Text style={{ color: colors.foreground, fontSize: 18, fontWeight: "700" }}>
-            Turn Counter
-          </Text>
-          {agent?.status ? (
-            <Badge
-              label={agent.status}
-              variant={agent.status === "running" ? "success" : "neutral"}
-              size="sm"
-              dot
-            />
-          ) : null}
-        </Row>
-      }
-      headerStyle={{
-        backgroundColor: colors.surface0,
-        paddingHorizontal: padding.horizontal,
-        paddingTop: padding.vertical,
-        paddingBottom: padding.gap,
-      }}
-      contentContainerStyle={{
-        gap: padding.gap,
-        paddingHorizontal: padding.horizontal,
-        paddingBottom: padding.vertical,
-      }}
-    >
-      <Card variant="elevated">
-        <CardHeader
-          title="Current turn"
-          icon="Repeat"
-          subtitle="Deterministic from the timeline seq shared with the agent"
-          value={
-            <Badge
-              label={latest ? formatTurnAddress(latest.turn, latest.seq) : "-"}
-              variant={latest ? "accent" : "neutral"}
-              size="sm"
-            />
-          }
-        />
-        {latest ? (
-          <KeyValue
-            label="Address"
-            value={formatTurnAddress(latest.turn, latest.seq)}
-            subValue={previewLine(latest.preview)}
-            copyable
-            mono
+    <View style={styles.panelRoot}>
+      <HostRow
+        justify="between"
+        align="center"
+        gap={8}
+        style={{
+          paddingHorizontal: padding.horizontal,
+          paddingTop: padding.vertical,
+          paddingBottom: padding.gap,
+        }}
+      >
+        <Text style={{ color: colors.foreground, fontSize: 18, fontWeight: "700" }}>
+          Turn Counter
+        </Text>
+        {agent?.status ? (
+          <HostBadge
+            label={agent.status}
+            variant={agent.status === "running" ? "success" : "neutral"}
+            size="sm"
+            dot
           />
-        ) : (
-          <Text style={{ color: colors.foregroundMuted, fontSize: 12 }}>
-            {turnsQuery.isPending ? "Reading timeline…" : "No user turns recorded yet."}
-          </Text>
-        )}
-      </Card>
+        ) : null}
+      </HostRow>
+      <HostScroll
+        style={styles.scroll}
+        contentContainerStyle={{
+          gap: padding.gap,
+          paddingHorizontal: padding.horizontal,
+          paddingBottom: padding.vertical,
+        }}
+      >
+        <HostCard variant="elevated">
+          <HostCardHeader
+            title="Current turn"
+            icon="Repeat"
+            subtitle="Deterministic from the timeline seq shared with the agent"
+            value={
+              <HostBadge
+                label={latest ? formatTurnAddress(latest.turn, latest.seq) : "-"}
+                variant={latest ? "accent" : "neutral"}
+                size="sm"
+              />
+            }
+          />
+          {latest ? (
+            <HostKeyValue
+              label="Address"
+              value={formatTurnAddress(latest.turn, latest.seq)}
+              subValue={previewLine(latest.preview)}
+              copyable
+              mono
+            />
+          ) : (
+            <Text style={{ color: colors.foregroundMuted, fontSize: 12 }}>
+              {turnsQuery.isPending ? "Reading timeline…" : "No user turns recorded yet."}
+            </Text>
+          )}
+        </HostCard>
 
-      {turnsQuery.error ? (
-        <Text selectable style={{ color: colors.statusDanger, fontSize: 12 }}>
-          Failed to read timeline: {String(turnsQuery.error)}
-        </Text>
-      ) : null}
+        {turnsQuery.error ? (
+          <Text selectable style={{ color: colors.statusDanger, fontSize: 12 }}>
+            Failed to read timeline: {String(turnsQuery.error)}
+          </Text>
+        ) : null}
 
-      {ordered.length > 0 ? (
-        <>
-          <SectionHeader title="Turns" count={ordered.length} />
-          <Stack gap="sm">
-            {ordered.map((turn) => (
-              <Card key={turn.seq} variant="elevated">
-                <KeyValueGroup columns={1}>
-                  <KeyValue
+        {ordered.length > 0 ? (
+          <>
+            <HostSectionHeader title="Turns" count={ordered.length} />
+            <HostStack gap={8}>
+              {ordered.map((turn) => (
+                <HostCard key={turn.seq} variant="elevated">
+                  <HostKeyValue
                     label={formatTurnAddress(turn.turn, turn.seq)}
                     value={previewLine(turn.preview)}
                     subValue={`seq ${turn.seq}`}
                     copyable
                     mono
                   />
-                </KeyValueGroup>
-              </Card>
-            ))}
-          </Stack>
-        </>
-      ) : !turnsQuery.isPending && !turnsQuery.error ? (
-        <EmptyState
-          icon="MessageSquare"
-          title="No turns yet"
-          description="Send the agent a message and its first turn will appear here."
-        />
-      ) : null}
-    </ModalBody>
+                </HostCard>
+              ))}
+            </HostStack>
+          </>
+        ) : !turnsQuery.isPending && !turnsQuery.error ? (
+          <HostEmptyState
+            icon="MessageSquare"
+            title="No turns yet"
+            description="Send the agent a message and its first turn will appear here."
+          />
+        ) : null}
+      </HostScroll>
+    </View>
   );
 }
+
+const styles = {
+  panelRoot: {
+    flex: 1,
+    minHeight: 0,
+    width: "100%",
+  },
+  scroll: {
+    flex: 1,
+    minHeight: 0,
+  },
+} as const;

package/client/vendor/paseo-plugin-helper/{host.ts → core/host.ts}

@@ -22,7 +22,7 @@ import type {
 /**
  * Structural host types for Paseo client integration.
  *
- * These interfaces describe the shapes `paseo-plugin-helper/client` needs
+ * These interfaces describe the shapes the helper's client runtime needs
  * from the Paseo host app: the runtime dependencies the plugin injects once
  * in its client entry — the host theme, the layout, the icon/Modal primitives,
  * the agents feed — so they can be supplied from any entry point.
@@ -110,9 +110,15 @@ export type HostAgentUpdate =
   | { kind: "remove"; agentId: string }
   | { kind: string; agent: HostAgentRef };
 
+export interface HostAgentListOptions {
+  subscribe?: Record<string, unknown>;
+  signal?: AbortSignal;
+  [key: string]: unknown;
+}
+
 export interface HostAgentsApi {
   subscribe(cb: (update: HostAgentUpdate) => void): () => void;
-  list(): Promise<{ entries: Array<{ agent: HostAgentRef }> }>;
+  list(options?: any): Promise<any>;
 }
 
 export type PluginCleanup = () => void;
@@ -151,7 +157,7 @@ export function initClientHelpers(host: ClientHostDeps): void {
 export function getClientHost(): ClientHostDeps {
   if (!deps) {
     throw new Error(
-      "paseo-plugin-helper/client used before initClientHelpers(). " +
+      "paseo-plugin-helper used before initClientHelpers(). " +
         "Call initClientHelpers({ Icon, Modal, useRpc, useToast }) in the plugin client entry.",
     );
   }

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

@@ -0,0 +1,76 @@
+/**
+ * Paseo Plugin Helper — Core Runtime (Headless, CLIENT-SAFE).
+ *
+ * Import from `paseo-plugin-helper/core` for everything headless that must
+ * also load in the plugin CLIENT bundle: RPC contracts, query/mutation
+ * hooks, settings sync hooks, and pure formatters.
+ *
+ * Client/server boundary (#219): this entry MUST NOT re-export `../server/*`
+ * or `../mcp/*` — those pull `node:*` built-ins (fs, child_process, …) which
+ * the 0.8 client compiler rejects. Server-only primitives stay in
+ * `paseo-plugin-helper/server` (and MCP in `paseo-plugin-helper/mcp`).
+ *
+ * Purity contract (enforced by `src/__tests__/core-purity.test.ts`):
+ * - No runtime import of `react-native` or any UI component.
+ * - No `node:*` (or bare Node builtin) imports.
+ * - No DOM/CSS variable scraper (`theme/host-variables`).
+ * - No layout opinions (`layout/`, `components/`, `ModalBody`, `maxContentWidth`).
+ *
+ * React (not React Native) is the only view-layer dependency here, via
+ * `@tanstack/react-query` hooks. Host RPC access flows through the injected
+ * `useRpc` seam in `core/host.ts`, which itself carries only type-level
+ * `react-native` imports (erased at runtime).
+ */
+
+export * from "../../../../shared/vendor/paseo-plugin-helper/rpc";
+export * from "../../../../shared/vendor/paseo-plugin-helper/features";
+export * from "../../../../shared/vendor/paseo-plugin-helper/settings";
+export * from "../../../../shared/vendor/paseo-plugin-helper/suite-settings";
+export * from "../../../../shared/vendor/paseo-plugin-helper/formatters";
+export * from "../../../../shared/vendor/paseo-plugin-helper/async";
+export * from "../../../../shared/vendor/paseo-plugin-helper/highlight";
+export * from "../../../../shared/vendor/paseo-plugin-helper/forge";
+export * from "../../../../shared/vendor/paseo-plugin-helper/custom-pills";
+export * from "../../../../shared/vendor/paseo-plugin-helper/suppressed";
+export * from "../../../../shared/vendor/paseo-plugin-helper/types";
+export * from "../../../../shared/vendor/paseo-plugin-helper/tickets";
+
+export {
+  initClientHelpers,
+  getClientHost,
+  getOptionalClientHost,
+  isClientHostInitialized,
+  selectHostScrollView,
+} from "./host";
+export type {
+  ClientHostDeps,
+  HostTheme,
+  HostThemeColors,
+  HostLayout,
+  HostToast,
+  HostUseToast,
+  HostUseRpc,
+  HostRpcContract,
+  HostCopyText,
+  HostAgentsApi,
+  HostAgentRef,
+  HostAgentUpdate,
+  ComposerPillRegistrar,
+  HostPillProps,
+  HostSurfaceProps,
+  PluginCleanup,
+} from "./host";
+
+export * from "./query";
+export * from "./query-refresh";
+export * from "./settings";
+export * from "./shared-settings";
+export * from "./snapshot";
+export * from "./command-center";
+export {
+  bumpPluginLoadCount,
+  getPluginLoadCount,
+  isPluginReloaded,
+  usePluginReloadNotice,
+  type PluginReloadNoticeState,
+} from "./plugin-load-count";

package/client/vendor/paseo-plugin-helper/core/plugin-load-count.ts

@@ -0,0 +1,89 @@
+/**
+ * Paseo Plugin Helper — Bundle Re-Evaluation Tracking (`paseo-plugin-helper/core`).
+ *
+ * Tracks how many times each plugin bundle has been re-evaluated by the host
+ * daemon.  Useful for detecting hot-reload / reload cycles so plugins can
+ * surface a notice to the user.
+ *
+ * Contract — headless & client-safe:
+ * - No `node:*` imports.
+ * - No React Native or DOM scraping.
+ * - The only React dependency is the exported hook (used inside React trees).
+ */
+
+// ---------------------------------------------------------------------------
+// Global store --------------------------------------------------------------
+// ---------------------------------------------------------------------------
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __PASEO_PLUGIN_LOAD_COUNT__: Record<string, number>;
+}
+
+const _store = (globalThis.__PASEO_PLUGIN_LOAD_COUNT__ ||= {});
+
+/**
+ * Increment and return the load count for *pluginId*.
+ *
+ * Call this from your plugin's entry-point (or wherever the bundle first
+ * executes) so the daemon-side reload counter advances on every evaluation.
+ */
+export function bumpPluginLoadCount(pluginId: string): number {
+  _store[pluginId] = (_store[pluginId] || 0) + 1;
+  return _store[pluginId];
+}
+
+/**
+ * Return the current load count for *pluginId* (0 if never bumped).
+ */
+export function getPluginLoadCount(pluginId: string): number {
+  return _store[pluginId] || 0;
+}
+
+/**
+ * Return `true` when the plugin has been reloaded at least once
+ * (i.e. load count > 1).
+ */
+export function isPluginReloaded(pluginId: string): boolean {
+  return (_store[pluginId] || 0) > 1;
+}
+
+// ---------------------------------------------------------------------------
+// React hook ----------------------------------------------------------------
+// ---------------------------------------------------------------------------
+
+import { useState } from "react";
+
+export interface PluginReloadNoticeState {
+  /** Whether the plugin was reloaded (load count > 1). */
+  isReloaded: boolean;
+  /** Current load count for the plugin. */
+  loadCount: number;
+  /** Dismiss the reload notice locally. */
+  dismiss: () => void;
+}
+
+/**
+ * React hook that tracks whether a plugin bundle was reloaded.
+ *
+ * ```ts
+ * const { isReloaded, loadCount, dismiss } = usePluginReloadNotice("my-plugin");
+ * ```
+ *
+ * The `dismiss` callback toggles local state only — it does not affect the
+ * global counter.
+ */
+export function usePluginReloadNotice(
+  pluginId: string,
+): PluginReloadNoticeState {
+  const [dismissed, setDismissed] = useState(false);
+
+  const loadCount = getPluginLoadCount(pluginId);
+  const isReloaded = !dismissed && loadCount > 1;
+
+  return {
+    isReloaded,
+    loadCount,
+    dismiss: () => setDismissed(true),
+  };
+}

package/client/vendor/paseo-plugin-helper/{query-refresh.ts → core/query-refresh.ts}

@@ -1,7 +1,7 @@
 import { useState, useMemo } from "react";
-import type { PluginRpcContract } from "../../../shared/vendor/paseo-plugin-helper/rpc";
+import type { PluginRpcContract } from "../../../../shared/vendor/paseo-plugin-helper/rpc";
 import { useRpcQuery, type RpcQueryOptions } from "./query";
-import type { RpcInput, RpcOutput } from "../../../shared/vendor/paseo-plugin-helper/rpc";
+import type { RpcInput, RpcOutput } from "../../../../shared/vendor/paseo-plugin-helper/rpc";
 
 export type RefreshRate =
   | "1s"

package/client/vendor/paseo-plugin-helper/{query.ts → core/query.ts}

@@ -1,6 +1,6 @@
 import { getClientHost, type HostRpcContract } from "./host";
-import type { PluginRpcContract } from "../../../shared/vendor/paseo-plugin-helper/rpc";
-import type { RpcInput, RpcOutput } from "../../../shared/vendor/paseo-plugin-helper/rpc";
+import type { PluginRpcContract } from "../../../../shared/vendor/paseo-plugin-helper/rpc";
+import type { RpcInput, RpcOutput } from "../../../../shared/vendor/paseo-plugin-helper/rpc";
 import {
   useQuery,
   useMutation,

package/client/vendor/paseo-plugin-helper/{settings.ts → core/settings.ts}

@@ -1,6 +1,6 @@
 import { getClientHost } from "./host";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import type { SettingsContract } from "../../../shared/vendor/paseo-plugin-helper/settings";
+import type { SettingsContract } from "../../../../shared/vendor/paseo-plugin-helper/settings";
 
 export interface UsePluginSettingsOptions<TSettings> {
   /**

package/client/vendor/paseo-plugin-helper/{shared-settings.ts → core/shared-settings.ts}

@@ -1,5 +1,5 @@
-import type { SettingsContract } from "../../../shared/vendor/paseo-plugin-helper/settings";
-import { SuiteSettingsContract, type SuiteSettings } from "../../../shared/vendor/paseo-plugin-helper/suite-settings";
+import type { SettingsContract } from "../../../../shared/vendor/paseo-plugin-helper/settings";
+import { SuiteSettingsContract, type SuiteSettings } from "../../../../shared/vendor/paseo-plugin-helper/suite-settings";
 import {
   usePluginSettings,
   type UsePluginSettingsOptions,

package/client/vendor/paseo-plugin-helper/{utils → lifecycle}/clipboard.ts

@@ -1,5 +1,5 @@
-import type { HostToast } from "../host";
-import { getOptionalClientHost } from "../host";
+import type { HostToast } from "../core/host";
+import { getOptionalClientHost } from "../core/host";
 
 export interface CopyToClipboardOptions {
   toast?: HostToast;

package/client/vendor/paseo-plugin-helper/lifecycle/flair.ts

@@ -0,0 +1,26 @@
+/**
+ * Visual flair vocabulary accepted by the lifecycle registration options.
+ *
+ * The legacy design system that consumed these presets is gone (#938); the
+ * registrars still accept the shape so existing plugin call sites keep
+ * type-checking, but the host theme drives every `ui/` adapter.
+ */
+export type RadiusStyle = "sharp" | "rounded" | "pill";
+export type DensityStyle = "compact" | "comfortable" | "spacious";
+export type SurfaceStyle = "flat" | "tinted" | "elevated";
+export type HeadingTransform = "none" | "uppercase";
+
+export interface VisualFlair {
+  /** Corner radius preset for interactive elements and containers. */
+  radius: RadiusStyle;
+  /** Spacing and typography density. */
+  density: DensityStyle;
+  /** Surface background styling for cards, panels, and modal boxes. */
+  surfaceStyle: SurfaceStyle;
+  /** Optional custom brand accent color. */
+  accentColor?: string;
+  /** Default border width for cards and bordered elements (default: 1). */
+  borderWidth: number;
+  /** Text transform for section headers and meta labels. */
+  headingTransform: HeadingTransform;
+}