@xpufx/paseo-x-comms 0.3.0

package/client/vendor/paseo-plugin-helper/utils/clipboard.ts

@@ -0,0 +1,149 @@
+import type { HostToast } from "../host";
+import { getOptionalClientHost } from "../host";
+
+export interface CopyToClipboardOptions {
+  toast?: HostToast;
+  toastMessage?: string;
+}
+
+export type ClipboardTier = "navigator" | "host" | "rnAsync" | "rnSync" | "execCommand";
+
+export interface ClipboardEnvironment {
+  hasNavigatorClipboard: boolean;
+  hasHostCopyText: boolean;
+  hasRnClipboard: boolean;
+  hasRnSetStringAsync: boolean;
+  isDom: boolean;
+}
+
+/**
+ * Deterministic tier order for an explicit copy.
+ *
+ * Web's `navigator.clipboard.writeText` is the only API that rejects when the
+ * clipboard did not change, so it leads. The synchronous
+ * `react-native-web` `Clipboard.setString` reports success even when its
+ * `document.execCommand("copy")` fails, which leaves the previous clipboard
+ * item in place while the UI claims success (xpufx-org/paseo#278); it is only
+ * usable off-DOM (native), where it is the real platform clipboard. In a DOM
+ * the checked `execCommand` fallback is preferred to that unverifiable path.
+ */
+export function clipboardTierOrder(env: ClipboardEnvironment): ClipboardTier[] {
+  const tiers: ClipboardTier[] = [];
+  if (env.hasNavigatorClipboard) tiers.push("navigator");
+  if (env.hasHostCopyText) tiers.push("host");
+  if (env.hasRnSetStringAsync) {
+    tiers.push("rnAsync");
+  } else if (env.hasRnClipboard && !env.isDom) {
+    tiers.push("rnSync");
+  }
+  tiers.push("execCommand");
+  return tiers;
+}
+
+/**
+ * Robust cross-platform clipboard copy helper for Paseo plugins.
+ * Works seamlessly across React Native (mobile), web, and desktop.
+ *
+ * Tier order comes from `clipboardTierOrder`; every tier reports failure
+ * honestly so a denied or blocked write never leaves the previous clipboard
+ * item behind under a fake success.
+ */
+export async function copyToClipboard(
+  text: string,
+  options?: CopyToClipboardOptions,
+): Promise<boolean> {
+  if (text === null || text === undefined) return false;
+  const str = String(text);
+
+  const globalObj = typeof globalThis !== "undefined" ? (globalThis as any) : {};
+
+  let rn: any;
+  try {
+    rn = require("react-native");
+  } catch {
+    // Ignore require error if not in RN context
+  }
+  const rnClipboard = rn?.Clipboard;
+  const rnSetStringAsync =
+    typeof rnClipboard?.setStringAsync === "function" ? rnClipboard.setStringAsync : undefined;
+  const rnSetString =
+    typeof rnClipboard?.setString === "function" ? rnClipboard.setString : undefined;
+  const copyText = getOptionalClientHost()?.copyText;
+
+  const isDom =
+    typeof globalObj.document !== "undefined" &&
+    typeof globalObj.document?.createElement === "function";
+
+  const tiers = clipboardTierOrder({
+    hasNavigatorClipboard: Boolean(globalObj.navigator?.clipboard?.writeText),
+    hasHostCopyText: Boolean(copyText),
+    hasRnClipboard: Boolean(rnSetStringAsync ?? rnSetString),
+    hasRnSetStringAsync: Boolean(rnSetStringAsync),
+    isDom,
+  });
+
+  let success = false;
+  for (const tier of tiers) {
+    if (success) break;
+    try {
+      switch (tier) {
+        case "navigator":
+          await globalObj.navigator.clipboard.writeText(str);
+          success = true;
+          break;
+        case "host":
+          if (copyText) {
+            await copyText(str);
+            success = true;
+          }
+          break;
+        case "rnAsync":
+          // Expo's async API returns a boolean; a rejected promise falls through.
+          success = (await rnSetStringAsync(str)) !== false;
+          break;
+        case "rnSync":
+          // Only reached off-DOM, where this is the native platform clipboard.
+          rnSetString(str);
+          success = true;
+          break;
+        case "execCommand": {
+          const doc = globalObj.document;
+          if (doc?.createElement && doc?.body) {
+            const textarea = doc.createElement("textarea");
+            textarea.value = str;
+            textarea.style.position = "fixed";
+            textarea.style.opacity = "0";
+            textarea.style.left = "-9999px";
+            doc.body.appendChild(textarea);
+            textarea.focus();
+            textarea.select();
+            const res = doc.execCommand("copy");
+            doc.body.removeChild(textarea);
+            success = res === true;
+          }
+          break;
+        }
+      }
+    } catch {
+      // Tier failed; try the next one.
+    }
+  }
+
+  if (success && options?.toast) {
+    try {
+      const toastAny = options.toast as any;
+      if (typeof toastAny.copied === "function") {
+        toastAny.copied(options.toastMessage);
+      } else if (typeof toastAny.show === "function") {
+        const msg = options.toastMessage
+          ? `Copied ${options.toastMessage} to clipboard`
+          : "Copied to clipboard";
+        toastAny.show(msg, { variant: "success" });
+      }
+    } catch {
+      // Ignore toast failure
+    }
+  }
+
+  return success;
+}

package/client/vendor/paseo-plugin-helper/utils/haptics.ts

@@ -0,0 +1,34 @@
+export type HapticFeedbackType =
+  | "light"
+  | "medium"
+  | "heavy"
+  | "success"
+  | "warning"
+  | "error";
+
+const PATTERNS: Record<HapticFeedbackType, number | number[]> = {
+  light: 10,
+  medium: 25,
+  heavy: 45,
+  success: [15, 40, 20],
+  warning: [30, 50, 30],
+  error: [40, 60, 40, 60, 40],
+};
+
+/**
+ * Cross-platform haptic feedback helper for Paseo plugins.
+ * Supports web vibration API and graceful fallback when vibration is unavailable.
+ */
+export function triggerHaptic(type: HapticFeedbackType = "light"): boolean {
+  try {
+    const globalObj = typeof globalThis !== "undefined" ? (globalThis as any) : {};
+    const nav = globalObj.navigator;
+    if (typeof nav?.vibrate === "function") {
+      const pattern = PATTERNS[type] ?? 15;
+      return Boolean(nav.vibrate(pattern));
+    }
+  } catch {
+    // Ignore environments where vibration permissions are denied or unavailable
+  }
+  return false;
+}

package/client/via-x-comms.tsx

@@ -0,0 +1,15 @@
+import { Text } from "react-native";
+import type { PluginTheme } from "@getpaseo/plugin";
+import { XCOMMS_VIA_LABEL } from "./attribution";
+
+/**
+ * Tiny muted source footer for every shared-surface row this plugin
+ * renders: timeline cards, panels, surfaces, modal content.
+ */
+export function ViaXComms({ theme }: { theme: PluginTheme }) {
+  return (
+    <Text style={{ color: theme.colors.foregroundMuted, fontSize: 10, textAlign: "right" as const }}>
+      {XCOMMS_VIA_LABEL}
+    </Text>
+  );
+}

package/client/x-comms-conversation.tsx

@@ -0,0 +1,449 @@
+import { usePaseo, useRpc } from "@getpaseo/plugin/client";
+import type { PluginTheme } from "@getpaseo/plugin";
+import { Modal, ScrollView } from "@getpaseo/plugin/client/react-native";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ActivityIndicator, Clipboard, Pressable, Text, View } from "react-native";
+import type { NativeScrollEvent, NativeSyntheticEvent, ScrollView as NativeScrollView, StyleProp, ViewStyle } from "react-native";
+import { ModalContent, TextInput } from "paseo-plugin-helper/client";
+import { conversationSendRpc, introspectAgentsRpc, registryReadRpc } from "../shared/registry";
+import { deriveConversationThreads, deriveConversations, isCounterpartyMatch, mergeMessages, threadKeyForCounterparty, type ConversationMessage, type ConversationPartner, type ConversationThread } from "./conversations";
+import { formatCounterparty, formatPeerDisplay, splitCounterparty, useCounterpartyLabel, usePeerDisplay, type CounterpartyRef } from "./peer-label";
+import { ViaXComms } from "./via-x-comms";
+
+const draftCache = new Map<string, string>();
+const targetCache = new Map<string, ConversationPartner | null>();
+const sentCache = new Map<string, Map<string, ConversationMessage[]>>();
+
+function PeerText({ counterparty }: { counterparty: CounterpartyRef }) {
+  return <>{useCounterpartyLabel(counterparty)}</>;
+}
+
+/**
+ * Host ScrollView that sticks to the bottom as content appends. Tracks
+ * whether the user is near the bottom on every scroll; only auto-scrolls
+ * while stuck, so reading history never yanks. resetKey re-arms the stick
+ * (e.g. when switching threads).
+ */
+function StickBottomScrollView({
+  style,
+  resetKey,
+  children,
+}: {
+  style?: StyleProp<ViewStyle>;
+  resetKey: string;
+  children: React.ReactNode;
+}) {
+  const ref = useRef<NativeScrollView | null>(null);
+  const stick = useRef(true);
+  useEffect(() => {
+    stick.current = true;
+  }, [resetKey]);
+  const onScroll = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { layoutMeasurement, contentOffset, contentSize } = e.nativeEvent;
+    stick.current = layoutMeasurement.height + contentOffset.y >= contentSize.height - 24;
+  }, []);
+  const onContentSizeChange = useCallback(() => {
+    if (stick.current) ref.current?.scrollToEnd({ animated: true });
+  }, []);
+  return (
+    <ScrollView
+      ref={ref}
+      style={style}
+      onScroll={onScroll}
+      scrollEventThrottle={16}
+      onContentSizeChange={onContentSizeChange}
+    >
+      {children}
+    </ScrollView>
+  );
+}
+
+/**
+ * Reactive hook: refresh an agent's conversation queries whenever the agent
+ * store reports an upsert for it.
+ */
+function useAgentConversationsRefresh(
+  paseo: ReturnType<typeof usePaseo>,
+  agentId: string,
+  queryClient: ReturnType<typeof useQueryClient>,
+): void {
+  useEffect(() => {
+    const unsub = paseo.agents.subscribe((update) => {
+      if (update.kind === "upsert" && update.agent.id === agentId) {
+        void queryClient.invalidateQueries({ queryKey: ["x-comms-conversations", agentId] });
+        void queryClient.invalidateQueries({ queryKey: ["x-comms-threads", agentId] });
+      }
+    });
+    return unsub;
+  }, [paseo, agentId, queryClient]);
+}
+
+export function CrossDaemonConversation({
+  theme,
+  agentId,
+  onSent,
+}: {
+  theme: PluginTheme;
+  agentId: string;
+  onSent?: () => void;
+}) {
+  const paseo = usePaseo();
+  const callSend = useRpc(conversationSendRpc);
+  const callIntrospect = useRpc(introspectAgentsRpc);
+  const callRegistryRead = useRpc(registryReadRpc);
+  const registry = useQuery({
+    queryKey: ["registry-read"],
+    queryFn: () => callRegistryRead({}),
+    staleTime: 300_000,
+    refetchOnWindowFocus: false,
+  });
+  const serverIdByName = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const daemon of registry.data?.daemons ?? []) {
+      if (daemon.serverId) map.set(daemon.name, daemon.serverId);
+    }
+    return map;
+  }, [registry.data]);
+  const aliasByServerId = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const daemon of registry.data?.daemons ?? []) {
+      if (daemon.serverId) map.set(daemon.serverId, daemon.name);
+    }
+    return map;
+  }, [registry.data]);
+  const peerLabelForCounterparty = useCallback(
+    (cp: CounterpartyRef) => {
+      const { alias, serverId } = splitCounterparty(cp);
+      const id = serverId ?? (alias ? serverIdByName.get(alias) ?? null : null);
+      const name = alias ?? (id ? aliasByServerId.get(id) ?? null : null);
+      return formatPeerDisplay(name, id);
+    },
+    [serverIdByName, aliasByServerId],
+  );
+  const peerLabelForName = useCallback(
+    (name: string) => formatPeerDisplay(name, serverIdByName.get(name) ?? null),
+    [serverIdByName],
+  );
+  const [draft, setDraft] = useState(() => draftCache.get(agentId) ?? "");
+  const [target, setTarget] = useState<ConversationPartner | null>(() => targetCache.get(agentId) ?? null);
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  const queryClient = useQueryClient();
+  const threads = useQuery({
+    queryKey: ["x-comms-threads", agentId],
+    queryFn: () => deriveConversationThreads(paseo, agentId),
+    refetchOnMount: "always",
+  });
+  const conversations = useQuery({
+    queryKey: ["x-comms-conversations", agentId],
+    queryFn: () => deriveConversations(paseo, agentId),
+    refetchOnMount: "always",
+  });
+  useAgentConversationsRefresh(paseo, agentId, queryClient);
+  const introspect = useQuery({
+    queryKey: ["x-comms-introspect"],
+    queryFn: () => callIntrospect({}),
+    staleTime: 30000,
+  });
+
+  const [lastSent, setLastSent] = useState<{ at: string; to: string } | null>(null);
+  const [sentTick, setSentTick] = useState(0);
+  const send = useMutation({
+    mutationFn: () =>
+      callSend({
+        daemon: target?.counterparty.daemonServerId ?? target?.counterparty.daemon ?? "",
+        agentId: target?.counterparty.agentId ?? "",
+        prompt: draft,
+        fromAgentId: agentId,
+        fromAgentName: "User",
+      }),
+    onSuccess: (data) => {
+      if (data.ok && target) {
+        const now = new Date().toISOString();
+        const msg: ConversationMessage = {
+          id: `sent-${now}-${Math.random().toString(36).slice(2, 6)}`,
+          body: draft,
+          sentAt: now,
+          isIncoming: false,
+          senderName: "You",
+          daemon: target.counterparty.daemon ?? target.counterparty.daemonServerId,
+        };
+        const byAgent = sentCache.get(agentId) ?? new Map<string, ConversationMessage[]>();
+        const list = byAgent.get(target.conversationId) ?? [];
+        byAgent.set(target.conversationId, [...list, msg]);
+        sentCache.set(agentId, byAgent);
+        setSentTick((x) => x + 1);
+        setLastSent({ at: new Date().toLocaleTimeString(), to: `${target.counterparty.agentName ?? target.counterparty.agentId} @ ${peerLabelForCounterparty(target.counterparty)}` });
+        setDraftCached("");
+        void queryClient.invalidateQueries({ queryKey: ["x-comms-conversations", agentId] });
+        void queryClient.invalidateQueries({ queryKey: ["x-comms-threads", agentId] });
+      }
+      onSent?.();
+    },
+  });
+
+  const setDraftCached = useCallback((v: string) => {
+    draftCache.set(agentId, v);
+    setDraft(v);
+  }, [agentId]);
+  const setTargetCached = useCallback((c: ConversationPartner | null) => {
+    targetCache.set(agentId, c);
+    setTarget(c);
+  }, [agentId]);
+  const pickTarget = useCallback((c: ConversationPartner) => setTargetCached(c), [setTargetCached]);
+  const pickPeer = useCallback((daemon: string, a: { agentId: string; shortId: string; name: string }) => {
+    // Resolve the alias to its server id so the picked target keys exactly
+    // like the envelope-derived thread. A bare alias key never matches the
+    // merge lookup and the incoming side silently drops.
+    const daemonServerId = serverIdByName.get(daemon) ?? null;
+    const counterparty = { daemon, agentId: a.agentId, agentName: a.name, daemonServerId };
+    setTargetCached({
+      conversationId: threadKeyForCounterparty(counterparty),
+      counterparty,
+      lastActivity: new Date().toISOString(),
+      messageCount: 0,
+    });
+    setPickerOpen(false);
+  }, [setTargetCached, serverIdByName]);
+
+  return (
+    <View style={{ padding: 12, flex: 1 }}>
+      <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
+        <Text style={{ color: theme.colors.foregroundMuted, fontSize: 13 }}>X-comms conversations</Text>
+        <Pressable onPress={() => setPickerOpen(true)} style={({ pressed }) => [{ padding: 6, borderRadius: 6, borderWidth: 1, borderColor: theme.colors.accent }, pressed && { opacity: 0.7 }]}>
+          <Text style={{ color: theme.colors.accent, fontSize: 12, fontWeight: "600" as const }}>New</Text>
+        </Pressable>
+      </View>
+      {conversations.isLoading ? (
+        <ActivityIndicator />
+      ) : conversations.data && conversations.data.length > 0 ? (
+        <StickBottomScrollView style={{ marginBottom: 12, maxHeight: 160 }} resetKey="threads">
+          {conversations.data.map((c) => (
+            <Pressable
+              key={c.conversationId}
+              onPress={() => pickTarget(c)}
+              style={({ pressed }) => [
+                {
+                  padding: 10,
+                  borderRadius: 6,
+                  borderWidth: 1,
+                  borderColor: target?.conversationId === c.conversationId ? theme.colors.accent : theme.colors.border,
+                  marginBottom: 6,
+                },
+                pressed && { opacity: 0.7 },
+              ]}
+            >
+              <Text style={{ color: theme.colors.foreground, fontSize: 13, fontWeight: "600" as const }}>
+                {c.counterparty.agentName ?? c.counterparty.agentId ?? "unknown"}
+              </Text>
+              <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12 }}>
+                <PeerText counterparty={c.counterparty} /> · {c.messageCount} msgs
+              </Text>
+            </Pressable>
+          ))}
+        </StickBottomScrollView>
+      ) : (
+        <Text style={{ color: theme.colors.foregroundMuted, fontSize: 13, marginBottom: 8 }}>
+          No x-comms conversations yet - pick a peer to start.
+        </Text>
+      )}
+      {target ? (
+        <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12, marginBottom: 8 }}>
+          To: {target.counterparty.agentName ?? target.counterparty.agentId} on <PeerText counterparty={target.counterparty} />
+        </Text>
+      ) : null}
+      {target ? (
+        (() => {
+          const thread = threads.data?.find(
+            (t: ConversationThread) =>
+              t.partner.conversationId === target.conversationId ||
+              isCounterpartyMatch(t.partner.counterparty, target.counterparty),
+          );
+          const byAgent = sentCache.get(agentId);
+          const cachedSent: ConversationMessage[] = [];
+          if (byAgent) {
+            for (const [cId, msgs] of byAgent.entries()) {
+              if (cId === target.conversationId || cId.endsWith(`/${target.counterparty.agentId}`)) {
+                cachedSent.push(...msgs);
+              }
+            }
+          }
+          const incoming = thread?.messages ?? [];
+          const all = mergeMessages(incoming, cachedSent);
+          if (all.length === 0) {
+            return (
+              <View style={{ padding: 14, borderWidth: 1, borderColor: theme.colors.border, borderRadius: 8, marginBottom: 10, backgroundColor: theme.colors.surface1, alignItems: "center" }}>
+                <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12, fontStyle: "italic" as const }}>
+                  No messages yet in this thread - send the first message below.
+                </Text>
+              </View>
+            );
+          }
+          return (
+            <StickBottomScrollView
+              style={{
+                maxHeight: 260,
+                minHeight: 120,
+                marginBottom: 10,
+                borderWidth: 1,
+                borderColor: theme.colors.border,
+                borderRadius: 8,
+                padding: 8,
+                backgroundColor: theme.colors.surface1 + "30",
+              }}
+              resetKey={target.conversationId}
+            >
+              {all.map((m) => {
+                const isIncoming = m.isIncoming;
+                const isUserSent = !isIncoming && (m.userSent ?? (m.senderName === "You"));
+
+                // Direction & color coding: red reserved for user-sent messages only
+                const bubbleBg = isIncoming
+                  ? theme.colors.surface1
+                  : isUserSent
+                    ? (theme.colors.statusDanger + "1A")
+                    : (theme.colors.accent + "1A");
+
+                const bubbleBorder = isIncoming
+                  ? theme.colors.border
+                  : isUserSent
+                    ? theme.colors.statusDanger
+                    : theme.colors.accent;
+
+                const markerColor = isIncoming
+                  ? theme.colors.foregroundMuted
+                  : isUserSent
+                    ? theme.colors.statusDanger
+                    : theme.colors.accent;
+
+                const markerText = isIncoming ? "[INCOMING · ✉]" : isUserSent ? "[USER-SENT · ✉]" : "[OUTGOING · ✉]";
+                const senderTitle = isIncoming ? (m.senderName ?? "Peer") : "You";
+
+                return (
+                  <View
+                    key={m.id}
+                    style={{
+                      marginBottom: 8,
+                      maxWidth: "85%",
+                      alignSelf: isIncoming ? ("flex-start" as const) : ("flex-end" as const),
+                      backgroundColor: bubbleBg,
+                      borderWidth: 1,
+                      borderColor: bubbleBorder,
+                      borderTopLeftRadius: isIncoming ? 2 : 12,
+                      borderTopRightRadius: isIncoming ? 12 : 2,
+                      borderBottomLeftRadius: 12,
+                      borderBottomRightRadius: 12,
+                      padding: 8,
+                      shadowColor: "#000",
+                      shadowOpacity: 0.05,
+                      shadowOffset: { width: 0, height: 1 },
+                      shadowRadius: 2,
+                    }}
+                  >
+                    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8, marginBottom: 4 }}>
+                      <Text style={{ color: markerColor, fontSize: 10, fontWeight: "700" as const, letterSpacing: 0.5 }}>
+                        {markerText}
+                      </Text>
+                      <Text style={{ color: theme.colors.foregroundMuted, fontSize: 10 }}>
+                        {senderTitle} · {new Date(m.sentAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })}
+                      </Text>
+                    </View>
+                    <Text style={{ color: theme.colors.foreground, fontSize: 13, lineHeight: 18 }} selectable>
+                      {m.body}
+                    </Text>
+                  </View>
+                );
+              })}
+            </StickBottomScrollView>
+          );
+        })()
+      ) : null}
+
+      <TextInput
+        value={draft}
+        onChangeText={setDraftCached}
+        placeholder="Message the selected counterparty…"
+        style={{ marginBottom: 8 }}
+        inputStyle={{ fontSize: 13 }}
+        multiline
+      />
+      <Pressable
+        disabled={!target || !draft.trim() || send.isPending}
+        onPress={() => send.mutate()}
+        style={({ pressed }) => [
+          { padding: 10, borderRadius: 6, borderWidth: 1.5, borderColor: theme.colors.accent, alignSelf: "flex-start" as const, minHeight: 44, justifyContent: "center" as const },
+          pressed && { opacity: 0.7 },
+        ]}
+      >
+        <Text style={{ color: theme.colors.accent, fontWeight: "600" as const }}>
+          {send.isPending ? "Sending…" : "Send"}
+        </Text>
+      </Pressable>
+      {send.isSuccess && send.data?.ok ? (
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8, marginTop: 6 }}>
+          <Text style={{ color: theme.colors.statusSuccess, fontSize: 12, flexShrink: 1 }}>
+            ✓ Sent to {lastSent?.to ?? target?.counterparty.agentName ?? target?.counterparty.agentId} at {lastSent?.at ?? ""}
+          </Text>
+          <Pressable
+            onPress={() => {
+              setLastSent(null);
+              send.reset();
+            }}
+            hitSlop={10}
+          >
+            <Text style={{ color: theme.colors.accent, fontSize: 12, paddingHorizontal: 6 }}>Dismiss</Text>
+          </Pressable>
+        </View>
+      ) : null}
+      {send.error ? (
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8, marginTop: 6 }}>
+          <Text style={{ color: theme.colors.statusDanger, fontSize: 12, flexShrink: 1 }}>{String(send.error)}</Text>
+          <Pressable onPress={() => void Clipboard.setString(String(send.error))} hitSlop={10}>
+            <Text style={{ color: theme.colors.accent, fontSize: 16, paddingHorizontal: 6 }}>⧉</Text>
+          </Pressable>
+        </View>
+      ) : null}
+      {send.data && !send.data.ok ? (
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8, marginTop: 6 }}>
+          <Text style={{ color: theme.colors.statusDanger, fontSize: 12, flexShrink: 1 }}>{send.data.error}</Text>
+          <Pressable onPress={() => void Clipboard.setString(String(send.data?.error ?? ""))} hitSlop={10}>
+            <Text style={{ color: theme.colors.accent, fontSize: 16, paddingHorizontal: 6 }}>⧉</Text>
+          </Pressable>
+        </View>
+      ) : null}
+      <Modal title="New conversation" open={pickerOpen} onOpenChange={setPickerOpen}>
+        <ModalContent>
+          {introspect.isPending ? <Text style={{ color: theme.colors.foregroundMuted, fontSize: 13 }}>Loading agents…</Text> : null}
+          {introspect.error ? <Text style={{ color: theme.colors.statusDanger, fontSize: 12 }}>{String(introspect.error)}</Text> : null}
+          <View>
+            {(introspect.data?.daemons ?? []).map((daemon) => (
+              <View key={daemon.name}>
+                <Text style={{ color: daemon.reachable ? theme.colors.accent : theme.colors.foregroundMuted, fontSize: 12, fontWeight: "700" as const, marginTop: 10, textTransform: "uppercase" as const }}>
+                  {daemon.reachable ? peerLabelForName(daemon.name) : `${peerLabelForName(daemon.name)} (unreachable)`}
+                </Text>
+                {daemon.projects.map((project) => (
+                  <View key={`${daemon.name}-${project.project}`}>
+                    <Text style={{ color: theme.colors.foregroundMuted, fontSize: 11, marginTop: 6, paddingLeft: 10 }}>{project.project}</Text>
+                    {project.workspaces.map((ws) => (
+                      <View key={`${daemon.name}-${project.project}-${ws.name}`}>
+                        <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12, marginTop: 4, paddingLeft: 20 }}>⌂ {ws.name}</Text>
+                        {ws.agents.map((a) => (
+                          <Pressable key={a.agentId} onPress={() => pickPeer(daemon.name, a)} style={({ pressed }) => [{ flexDirection: "row", alignItems: "center", paddingVertical: 6, paddingLeft: 30 }, pressed && { opacity: 0.7 }]}>
+                            <Text style={{ color: theme.colors.foreground, fontSize: 13, flexShrink: 1 }}>{a.name} ({a.shortId}) · {a.status}</Text>
+                          </Pressable>
+                        ))}
+                      </View>
+                    ))}
+                  </View>
+                ))}
+              </View>
+            ))}
+          </View>
+          <ViaXComms theme={theme} />
+        </ModalContent>
+      </Modal>
+      <ViaXComms theme={theme} />
+    </View>
+  );
+}

package/client/x-comms-panel.tsx

@@ -0,0 +1,6 @@
+import { type PluginAgentPanelProps } from "@getpaseo/plugin/client";
+import { CrossDaemonConversation } from "./x-comms-conversation";
+
+export function CrossDaemonPanel({ theme, agentId }: PluginAgentPanelProps) {
+  return <CrossDaemonConversation theme={theme} agentId={agentId} />;
+}