@xpufx/paseo-x-comms 0.3.0

package/client/peer-label.ts

@@ -0,0 +1,98 @@
+import { useRpc } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+import { registryReadRpc } from "../shared/registry";
+
+/**
+ * Canonical daemon display: `alias (srv_xxx)`. Both halves always render
+ * together: never a bare id, never a bare alias. Peers without a registry
+ * entry (unpaired senders) render as `unknown (srv_xxx)`.
+ */
+export function formatPeerDisplay(alias: string | null | undefined, serverId: string | null | undefined): string {
+  const id = serverId ?? "unknown-id";
+  const name = alias ?? "unknown";
+  return `${name} (${id})`;
+}
+
+function aliasFor(serverId: string | null | undefined, byServerId: Map<string, string>): string | null {
+  if (!serverId) return null;
+  return byServerId.get(serverId) ?? null;
+}
+
+/**
+ * Resolve a serverId to its local registry alias. Returns null while
+ * loading or when the id is not paired.
+ */
+export function usePeerAlias(serverId: string | null | undefined): string | null {
+  const callRead = useRpc(registryReadRpc);
+  const read = useQuery({
+    queryKey: ["registry-read"],
+    queryFn: () => callRead({}),
+    staleTime: 300_000,
+    refetchOnWindowFocus: false,
+  });
+  if (!serverId || !read.data) return null;
+  const byServerId = new Map<string, string>();
+  for (const daemon of read.data.daemons) {
+    if (daemon.serverId) byServerId.set(daemon.serverId, daemon.name);
+  }
+  return aliasFor(serverId, byServerId);
+}
+
+/**
+ * Format a peer when both halves are already known (list rows, dump views,
+ * confirmations). Falls back to `unknown (srv)` when the alias is missing
+ * rather than rendering either half bare.
+ */
+export function usePeerDisplay(serverId: string | null | undefined, knownAlias?: string | null): string {
+  const resolved = usePeerAlias(serverId);
+  return formatPeerDisplay(knownAlias ?? resolved, serverId);
+}
+
+export interface CounterpartyRef {
+  daemon?: string | null;
+  daemonServerId?: string | null;
+}
+
+/**
+ * Split a counterparty ref into display halves. Either field may carry
+ * either half depending on where the ref was built, so srv_-shaped values
+ * always count as the id half.
+ */
+export function splitCounterparty(cp: CounterpartyRef): { alias: string | null; serverId: string | null } {
+  const values = [cp.daemon, cp.daemonServerId].filter((v): v is string => !!v);
+  const serverId = values.find((v) => v.startsWith("srv_")) ?? null;
+  const alias = values.find((v) => !v.startsWith("srv_")) ?? null;
+  return { alias, serverId };
+}
+
+export function formatCounterparty(cp: CounterpartyRef): string {
+  const { alias, serverId } = splitCounterparty(cp);
+  return formatPeerDisplay(alias, serverId);
+}
+
+/**
+ * Full counterparty label with registry enrichment: fills a missing half
+ * from the local registry (name to id or id to alias) before formatting.
+ * Shares the cached registry-read query with the other hooks.
+ */
+export function useCounterpartyLabel(cp: CounterpartyRef): string {
+  const callRead = useRpc(registryReadRpc);
+  const read = useQuery({
+    queryKey: ["registry-read"],
+    queryFn: () => callRead({}),
+    staleTime: 300_000,
+    refetchOnWindowFocus: false,
+  });
+  const { alias, serverId } = splitCounterparty(cp);
+  let id = serverId;
+  let name = alias;
+  if (read.data) {
+    if (!id && name) {
+      id = read.data.daemons.find((d) => d.name === name)?.serverId ?? null;
+    }
+    if (!name && id) {
+      name = read.data.daemons.find((d) => d.serverId === id)?.name ?? null;
+    }
+  }
+  return formatPeerDisplay(name, id);
+}

package/client/peer-status.tsx

@@ -0,0 +1,201 @@
+import { type PluginSurfaceProps } from "@getpaseo/plugin/client";
+import React, { useMemo } from "react";
+import { Text, View } from "react-native";
+import {
+  Badge,
+  Button,
+  Card,
+  EmptyState,
+  KeyValue,
+  KeyValueGroup,
+  ModalBody,
+  SectionHeader,
+  StatusDot,
+  usePluginTheme,
+  useRpcQuery,
+} from "paseo-plugin-helper/client";
+import { formatPeerDisplay } from "./peer-label";
+import { ViaXComms } from "./via-x-comms";
+import { peerStatusRpc } from "../shared/registry";
+
+const X_COMMS_CONTENT_MAX_WIDTH = 600;
+const PEER_STATUS_POLL_MS = 30_000;
+
+type PeerStatusEntry = {
+  name: string;
+  value: string;
+  valid: boolean;
+  reachable: boolean;
+  error: string | null;
+  transport: "relay" | "direct" | "unknown";
+  serverId: string | null;
+  hostname: string | null;
+  version: string | null;
+  pid: number | null;
+  listen: string | null;
+  relayEnabled: boolean | null;
+  relayEndpoint: string | null;
+  providerCount: number | null;
+  providersAvailable: number | null;
+  hubState: string | null;
+  hubDaemonId: string | null;
+  hubOrigin: string | null;
+  hubLastError: string | null;
+};
+
+function ReachabilityBadge({ entry }: { entry: PeerStatusEntry }) {
+  if (!entry.reachable) return <Badge label="down" variant="danger" dot />;
+  if (!entry.valid) return <Badge label="invalid" variant="warning" dot />;
+  return <Badge label="up" variant="success" dot />;
+}
+
+function relayLabel(entry: PeerStatusEntry): string {
+  if (entry.relayEnabled === null) return "unknown";
+  if (!entry.relayEnabled) return "disabled";
+  return entry.relayEndpoint ? `enabled · ${entry.relayEndpoint}` : "enabled";
+}
+
+function providersLabel(entry: PeerStatusEntry): string {
+  if (entry.providerCount === null) return "unknown";
+  const available = entry.providersAvailable ?? 0;
+  return `${available}/${entry.providerCount} available`;
+}
+
+function hubLabel(entry: PeerStatusEntry): string {
+  if (!entry.hubState) return "unknown";
+  const parts = [entry.hubState];
+  if (entry.hubOrigin) parts.push(entry.hubOrigin);
+  if (entry.hubLastError) parts.push(`error: ${entry.hubLastError}`);
+  return parts.join(" · ");
+}
+
+function PeerCard({ entry }: { entry: PeerStatusEntry }) {
+  const { colors } = usePluginTheme();
+  return (
+    <Card variant="elevated">
+      <Card.Header
+        title={formatPeerDisplay(entry.name, entry.serverId)}
+        subtitle={entry.hostname && entry.hostname !== entry.name ? entry.hostname : undefined}
+        badge={<ReachabilityBadge entry={entry} />}
+      />
+      <KeyValue label="Host value" value={entry.value} mono copyable truncate="end" truncateMaxLength={36} />
+      <KeyValueGroup>
+        <KeyValue label="Transport" value={entry.transport} mono />
+        <KeyValue label="Version" value={entry.version ?? ""} mono />
+        <KeyValue label="Listen" value={entry.listen ?? ""} copyable mono />
+        <KeyValue
+          label="PID"
+          value={entry.pid === null ? "" : String(entry.pid)}
+          mono
+        />
+        <KeyValue label="Relay" value={relayLabel(entry)} mono />
+        <KeyValue label="Providers" value={providersLabel(entry)} mono />
+      </KeyValueGroup>
+      <KeyValue label="Hub relationship" value={hubLabel(entry)} mono />
+      {!entry.reachable ? (
+        <Text selectable style={{ color: colors.statusDanger, fontSize: 12 }}>
+          {entry.error ?? "unreachable"}
+        </Text>
+      ) : null}
+    </Card>
+  );
+}
+
+/**
+ * Live reachability/identity view of the known peer daemons (#7). Renders the
+ * client-side x-comms registry and probes each registered host with its own
+ * `daemon.get_status`; an unreachable host shows as down without failing the
+ * rest of the surface.
+ */
+export function PeerStatusSurface({ theme }: PluginSurfaceProps) {
+  const { colors } = usePluginTheme();
+  const status = useRpcQuery(peerStatusRpc, {}, {
+    staleTime: PEER_STATUS_POLL_MS / 2,
+    refetchInterval: PEER_STATUS_POLL_MS,
+    refetchOnWindowFocus: false,
+    retry: false,
+  });
+
+  const entries = status.data?.results ?? [];
+  const summary = useMemo(() => {
+    const up = entries.filter((entry) => entry.reachable).length;
+    return { up, total: entries.length };
+  }, [entries]);
+
+  return (
+    <ModalBody
+      headerMode="pinned"
+      maxContentWidth={X_COMMS_CONTENT_MAX_WIDTH}
+      header={
+        <Card variant="elevated">
+          <Card.Header
+            title="Known peer daemons"
+            subtitle="Registry entries probed live with each peer's daemon.get_status."
+            badge={
+              status.isPending
+                ? <Badge label="probing…" variant="neutral" dot />
+                : <Badge label={`${summary.up}/${summary.total} up`} variant={summary.total > 0 && summary.up === summary.total ? "success" : "warning"} dot />
+            }
+            action={
+              <Button
+                label="Refresh"
+                size="sm"
+                variant="secondary"
+                icon="RefreshCw"
+                loading={status.isFetching}
+                disabled={status.isFetching}
+                onPress={() => void status.refetch()}
+              />
+            }
+          />
+        </Card>
+      }
+      refreshing={status.isFetching}
+      onRefresh={() => void status.refetch()}
+      contentContainerStyle={{ paddingTop: 6 }}
+    >
+      <SectionHeader title="Peers" count={entries.length} />
+
+      {status.isPending ? (
+        <Card>
+          <Card.Header title="Probing peers…" subtitle="Dialing each registered daemon." />
+        </Card>
+      ) : null}
+
+      {status.error ? (
+        <Card variant="elevated">
+          <Card.Header
+            title="Probe RPC failed"
+            subtitle={status.error.message}
+            badge={<Badge label="error" variant="danger" dot />}
+          />
+        </Card>
+      ) : null}
+
+      {!status.isPending && !status.error && entries.length === 0 ? (
+        <EmptyState
+          title="No known peer daemons."
+          description="Add a paired daemon in the Current surface; it will appear here with live status."
+        />
+      ) : null}
+
+      {entries.map((entry) => (
+        <PeerCard key={entry.name} entry={entry} />
+      ))}
+
+      {entries.length > 0 ? (
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+          <StatusDot
+            variant={summary.total > 0 && summary.up === summary.total ? "success" : "warning"}
+            size="sm"
+          />
+          <Text style={{ color: colors.foregroundMuted, fontSize: 11 }}>
+            {summary.up} of {summary.total} known peers reachable.
+          </Text>
+        </View>
+      ) : null}
+
+      <ViaXComms theme={theme} />
+    </ModalBody>
+  );
+}

package/client/settings-prototype.tsx

@@ -0,0 +1,395 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { type PluginSurfaceProps, useRpc } from "@getpaseo/plugin/client";
+import React, { useCallback, useMemo, useState } from "react";
+import {
+  ActionBar,
+  Badge,
+  Button,
+  Card,
+  Collapsible,
+  EmptyState,
+  FormRow,
+  KeyValue,
+  KeyValueGroup,
+  ModalBody,
+  SectionHeader,
+  StatusDot,
+  TextInput,
+  Toggle,
+} from "paseo-plugin-helper/client";
+import { formatPeerDisplay } from "./peer-label";
+import { ViaXComms } from "./via-x-comms";
+import {
+  daemonAddRpc,
+  daemonHealthRpc,
+  daemonRemoveRpc,
+  directHostMismatch,
+  identitySyncRpc,
+  registryReadRpc,
+  serverStatusRpc,
+  snapshotRefreshRpc,
+  uiPrefsGetRpc,
+  uiPrefsSetRpc,
+} from "../shared/registry";
+
+const HOST_FORM_HINT =
+  "Full pairing link (https://app.paseo.sh/#offer=…) or a direct daemon host (host:port, tcp://…, unix://…).";
+
+// Keep the settings surface 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 X_COMMS_CONTENT_MAX_WIDTH = 600;
+
+// Prototype settings surface for #97. Built only from paseo-plugin-helper/client
+// primitives; the current page in main.tsx is untouched and stays the default tab.
+// Wired to the live registry/health/server/prefs RPCs — no local mock state.
+
+function ReachabilityBadge({
+  health,
+}: {
+  health?: { reachable: boolean; agentCount: number | null } | null;
+}) {
+  if (!health) return <Badge label="checking…" variant="neutral" dot />;
+  if (health.reachable) {
+    return (
+      <Badge
+        label={health.agentCount !== null ? `reachable (${health.agentCount} agents)` : "reachable"}
+        variant="success"
+        dot
+      />
+    );
+  }
+  return <Badge label="unreachable" variant="danger" dot />;
+}
+
+function ErrorRow({ label, message }: { label: string; message?: string | null }) {
+  if (!message) return null;
+  return (
+    <FormRow label={label} description={message}>
+      <Badge label="error" variant="danger" dot />
+    </FormRow>
+  );
+}
+
+export function SettingsPrototype({ theme }: PluginSurfaceProps) {
+  const callRead = useRpc(registryReadRpc);
+  const callHealth = useRpc(daemonHealthRpc);
+  const callAdd = useRpc(daemonAddRpc);
+  const callRemove = useRpc(daemonRemoveRpc);
+  const callPrefsGet = useRpc(uiPrefsGetRpc);
+  const callPrefsSet = useRpc(uiPrefsSetRpc);
+  const callSnapshotRefresh = useRpc(snapshotRefreshRpc);
+  const callIdentitySync = useRpc(identitySyncRpc);
+  const callStatus = useRpc(serverStatusRpc);
+
+  const read = useQuery({ queryKey: ["registry-read"], queryFn: () => callRead({}) });
+  const health = useQuery({
+    queryKey: ["daemon-health"],
+    queryFn: () => callHealth({}),
+    staleTime: 30_000,
+    refetchOnWindowFocus: false,
+  });
+  const prefs = useQuery({ queryKey: ["ui-prefs"], queryFn: () => callPrefsGet({}) });
+  const status = useQuery({ queryKey: ["server-status"], queryFn: () => callStatus({}) });
+
+  const [newName, setNewName] = useState("");
+  const [newValue, setNewValue] = useState("");
+  const [confirmRemove, setConfirmRemove] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const refetchAll = useCallback(() => {
+    void read.refetch();
+    void health.refetch();
+    void prefs.refetch();
+  }, [read, health, prefs]);
+
+  const add = useMutation({ mutationFn: callAdd, onSuccess: refetchAll });
+  const remove = useMutation({
+    mutationFn: callRemove,
+    onSuccess: () => {
+      setConfirmRemove(null);
+      refetchAll();
+    },
+  });
+  const prefsSet = useMutation({ mutationFn: callPrefsSet });
+  const identitySync = useMutation({
+    mutationFn: () => callIdentitySync({}),
+    onSuccess: () => void read.refetch(),
+  });
+  const snapshotRefresh = useMutation({
+    mutationFn: () => callSnapshotRefresh({}),
+    onSuccess: () => {
+      setRefreshing(false);
+      refetchAll();
+      void status.refetch();
+    },
+    onError: () => setRefreshing(false),
+  });
+
+  const handleRefresh = useCallback(() => {
+    setRefreshing(true);
+    void identitySync
+      .mutateAsync()
+      .then(() => snapshotRefresh.mutate())
+      .catch(() => snapshotRefresh.mutate());
+  }, [identitySync, snapshotRefresh]);
+
+  const healthByName = useMemo(() => {
+    const map: Record<string, { reachable: boolean; error: string | null; agentCount: number | null }> = {};
+    for (const result of health.data?.results ?? []) map[result.name] = result;
+    return map;
+  }, [health.data]);
+
+  const daemonEnabled = prefs.data?.daemonEnabled ?? {};
+  const prereqsCollapsed = prefs.data?.prereqsCollapsed ?? true;
+  const presenceEnabled = prefs.data?.presenceEnabled ?? true;
+  const injectionEnabled = prefs.data?.injectionEnabled ?? true;
+  const outboxExpirySeconds = prefs.data?.outboxExpirySeconds ?? 600;
+  const [expiryDraft, setExpiryDraft] = useState<string | null>(null);
+
+  const persistPrefs = useCallback(
+    (patch: {
+      prereqsCollapsed?: boolean;
+      presenceEnabled?: boolean;
+      injectionEnabled?: boolean;
+      outboxExpirySeconds?: number;
+      daemonEnabled?: Record<string, boolean>;
+    }) => {
+      prefsSet.mutate(
+        {
+          prereqsCollapsed,
+          presenceEnabled,
+          injectionEnabled,
+          ...patch,
+        },
+        { onSuccess: () => void prefs.refetch() },
+      );
+    },
+    [prefsSet, prefs, prereqsCollapsed, presenceEnabled, injectionEnabled],
+  );
+
+  const commitExpiry = useCallback(() => {
+    const seconds = Number.parseInt(expiryDraft ?? "", 10);
+    setExpiryDraft(null);
+    if (!Number.isFinite(seconds) || seconds <= 0 || seconds === outboxExpirySeconds) return;
+    persistPrefs({ outboxExpirySeconds: seconds });
+  }, [expiryDraft, outboxExpirySeconds, persistPrefs]);
+
+  const canAdd = newName.trim().length > 0 && newValue.trim().length > 0;
+  const mismatch =
+    newName.trim().length > 0 && newValue.trim().length > 0 && !newValue.includes("#offer=")
+      ? directHostMismatch(newName.trim(), newValue.trim())
+      : null;
+  const daemonCount = read.data?.daemons.length ?? 0;
+
+  return (
+    <ModalBody
+      headerMode="pinned"
+      maxContentWidth={X_COMMS_CONTENT_MAX_WIDTH}
+      header={
+        <Card variant="elevated">
+          <Card.Header
+            title="X-comms settings"
+            subtitle="Prototype surface built from paseo-plugin-helper primitives."
+            badge={<Badge label="prototype" variant="warning" />}
+            action={
+              <Button
+                label="Refresh"
+                size="sm"
+                variant="secondary"
+                icon="RefreshCw"
+                loading={refreshing}
+                disabled={refreshing}
+                onPress={handleRefresh}
+              />
+            }
+          />
+        </Card>
+      }
+      refreshing={refreshing}
+      onRefresh={handleRefresh}
+      contentContainerStyle={{ paddingTop: 6 }}
+    >
+      <SectionHeader title="Server" />
+      <Card variant="elevated">
+        <Card.Header
+          title={status.data?.installed ? `Bundled server · v${status.data.version ?? "?"}` : "Bundled server"}
+          subtitle={status.data?.error ?? status.data?.installPath ?? "Locating bundled server…"}
+        />
+      </Card>
+
+      <SectionHeader title="Daemons" count={daemonCount} />
+      {read.isPending ? (
+        <Card>
+          <Card.Header title="Loading…" subtitle="Reading the daemon registry." />
+        </Card>
+      ) : null}
+      {!read.isPending && read.data && !read.data.exists ? (
+        <EmptyState title="No registry file yet." description="Add your first daemon below." />
+      ) : null}
+      {read.data && !read.data.validJson ? (
+        <Card variant="elevated">
+          <Card.Header
+            title="Registry is not valid JSON"
+            subtitle={read.data.parseError ?? undefined}
+            badge={<Badge label="error" variant="danger" dot />}
+          />
+        </Card>
+      ) : null}
+      {health.isPending && (read.data?.daemons.length ?? 0) > 0 ? (
+        <Card>
+          <Card.Header title="Checking health…" subtitle="Probing registered daemons." />
+        </Card>
+      ) : null}
+
+      {(read.data?.daemons ?? []).map((daemon) => {
+        const h = healthByName[daemon.name];
+        const enabled = daemonEnabled[daemon.name] !== false;
+        const healthDetail = h
+          ? (h.error ?? (h.reachable ? `${h.agentCount ?? 0} agents reachable` : "unreachable"))
+          : "Health check pending…";
+        return (
+          <Card key={daemon.name} variant="elevated">
+            <Card.Header
+              title={formatPeerDisplay(daemon.name, daemon.serverId)}
+              subtitle={daemon.hostname && daemon.hostname !== daemon.name ? daemon.hostname : undefined}
+              badge={enabled ? <ReachabilityBadge health={h} /> : <Badge label="disabled" variant="neutral" dot />}
+            />
+            <KeyValue
+              label="Host value"
+              value={daemon.value}
+              mono
+              copyable
+              truncate="end"
+              truncateMaxLength={36}
+              layout="inline"
+            />
+            <FormRow
+              layout="inline"
+              label="Health"
+              description={enabled ? healthDetail : `Disabled in preferences · ${healthDetail}`}
+            >
+              <StatusDot
+                variant={enabled ? (h?.reachable ? "success" : h ? "danger" : "neutral") : "neutral"}
+                size="sm"
+              />
+            </FormRow>
+            <FormRow
+              layout="inline"
+              label="Enabled"
+              description="Include this daemon in the x-comms mesh."
+            >
+              <Toggle
+                value={enabled}
+                disabled={prefs.isPending}
+                onValueChange={(next) =>
+                  persistPrefs({ daemonEnabled: { ...daemonEnabled, [daemon.name]: next } })
+                }
+              />
+            </FormRow>
+            {confirmRemove === daemon.name ? (
+              <ActionBar align="flex-start">
+                <Button
+                  label="Confirm remove"
+                  size="sm"
+                  variant="danger"
+                  loading={remove.isPending}
+                  disabled={remove.isPending}
+                  onPress={() => remove.mutate({ name: daemon.name })}
+                />
+                <Button label="Cancel" size="sm" variant="secondary" onPress={() => setConfirmRemove(null)} />
+              </ActionBar>
+            ) : (
+              <ActionBar align="flex-start">
+                <Button label="Remove" size="sm" variant="ghost" onPress={() => setConfirmRemove(daemon.name)} />
+              </ActionBar>
+            )}
+          </Card>
+        );
+      })}
+      <ErrorRow label="Remove failed" message={remove.error?.message} />
+
+      <SectionHeader title="Add daemon" />
+      <Card variant="elevated">
+        <FormRow label="Name" description="The daemon's real name; derived automatically for relay links.">
+          <TextInput value={newName} onChangeText={setNewName} autoCapitalize="none" autoCorrect={false} />
+        </FormRow>
+        <FormRow label="Host value" description={HOST_FORM_HINT}>
+          <TextInput
+            mono
+            value={newValue}
+            onChangeText={setNewValue}
+            autoCapitalize="none"
+            autoCorrect={false}
+            placeholder={HOST_FORM_HINT}
+            errorText={mismatch ?? undefined}
+          />
+        </FormRow>
+        <ErrorRow label="Add failed" message={add.error?.message} />
+        <ActionBar align="flex-start">
+          <Button
+            label="Add daemon"
+            variant="primary"
+            loading={add.isPending}
+            disabled={!canAdd || add.isPending}
+            onPress={() => add.mutate({ name: newName.trim(), value: newValue.trim() })}
+          />
+        </ActionBar>
+      </Card>
+
+      <SectionHeader title="Preferences" />
+      <Card variant="elevated">
+        <Collapsible
+          title="Prerequisites"
+          subtitle="Bundled server paths and checks."
+          icon="Server"
+          isExpanded={!prereqsCollapsed}
+          onToggle={(expanded) => persistPrefs({ prereqsCollapsed: !expanded })}
+        >
+          <KeyValueGroup>
+            <KeyValue
+              label="Install path"
+              value={status.data?.installPath ?? ""}
+              mono
+              copyable={Boolean(status.data?.installPath)}
+              truncate="path"
+            />
+          </KeyValueGroup>
+        </Collapsible>
+        <FormRow label="Presence announcements" description="Broadcast this daemon's agents to the x-comms mesh.">
+          <Toggle
+            value={presenceEnabled}
+            disabled={prefs.isPending}
+            onValueChange={(next) => persistPrefs({ presenceEnabled: next })}
+          />
+        </FormRow>
+        <FormRow
+          label="Agent introduction injection"
+          description="Inject x-comms peer context when agents are created."
+        >
+          <Toggle
+            value={injectionEnabled}
+            disabled={prefs.isPending}
+            onValueChange={(next) => persistPrefs({ injectionEnabled: next })}
+          />
+        </FormRow>
+        <FormRow
+          label="Outbox expiry (seconds)"
+          description="How long an undelivered message is retried before the sender is notified. Default 600. Press Enter to save."
+        >
+          <TextInput
+            value={expiryDraft ?? String(outboxExpirySeconds)}
+            onChangeText={setExpiryDraft}
+            keyboardType="number-pad"
+            disabled={prefs.isPending}
+            onSubmitEditing={commitExpiry}
+          />
+        </FormRow>
+        <ErrorRow label="Preferences update failed" message={prefsSet.error?.message} />
+      </Card>
+
+      <ViaXComms theme={theme} />
+    </ModalBody>
+  );
+}