@omercnet/paseo-connected-hosts 0.0.0-stage → 0.1.0-next.303.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Omer Cohen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/OVERVIEW.md

@@ -0,0 +1,17 @@
+Connected hosts manages the hosts saved on the daemon you are working in, from a **Connected hosts** screen. It adds a sidebar row and a Command Center action, "Manage connected hosts".
+
+Each saved host shows its label, connection status, the safe description of where it connects, the server ID once learned, what registered it, its metadata, when it was last online, when the next retry happens, and the last connection error. Status updates live. From the screen you can add a host, edit its label, metadata and connection, disable and re-enable it, and remove it.
+
+The list is the daemon's own registry, the same one `paseo host` and agent tools such as `list_hosts` use. It is separate from the connections saved in the app, and it always describes the host selected in the screen's host picker. Changing the picker shows that daemon's registry.
+
+Connections are written as the CLI accepts them, for example `host:6767` or `ssh://user@host`. A host that cannot be reached is still saved and retried automatically. A host that is reachable but rejected (failed authentication, a different daemon identity, this daemon itself, a duplicate, or a daemon without the feature) stays in an error state until you disable and re-enable it, or save a new connection. A connection is write-only: the daemon never returns saved credentials, so the edit form shows the safe description and leaves the connection untouched unless you type a new one.
+
+Replacing a connection keeps the host's pinned identity. If the new connection reaches a different daemon, the new connection is saved but the host shows an identity error and stays disconnected. To accept the new daemon, edit the host, enter the connection again and tick **Accept a different server identity**. The daemon refuses an identity change without a connection, so the field cannot be left blank.
+
+Metadata is a set of `key=value` lines and saving replaces the whole map. Only fields you change are sent, so editing a label never rewrites metadata.
+
+Who may change what follows the daemon's own rules. Adding, editing and removing need tunnel management. Changing a connection or metadata, and removing, also need the registering producer or access management. The screen cannot see your grants, so every action is shown, and a refused change shows the daemon's message and leaves the host as it was. Removing a host that another process registered lets that process add it again; disabling keeps the host saved and switched off. Removing a host does not stop agents already running on it, but this daemon can no longer reach them.
+
+Both daemons need the connected hosts feature, and the link between them needs host multiplexing.
+
+Requires Paseo ^0.13.0.

package/README.md

@@ -1,3 +1,34 @@
-# Temporary Holding Version
+# Connected hosts
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A Paseo plugin that manages the hosts saved on a daemon from the app: add, edit, disable, enable and remove, with live connection status. See [OVERVIEW.md](OVERVIEW.md) for behavior.
+
+## Screenshots
+
+![Connected hosts screen with an online and an unreachable host](https://raw.githubusercontent.com/omercnet/paseo-plugins/pr-assets-connected-hosts/connected-hosts-screen.jpg)
+
+![Edit host form with a write-only connection field](https://raw.githubusercontent.com/omercnet/paseo-plugins/pr-assets-connected-hosts/connected-hosts-edit.jpg)
+
+It is client only. Everything goes through `usePaseo().hosts` (`list`, `observe`, `add`, `update`, `remove`), so there is no server entry and no plugin RPC.
+
+## Develop
+
+```sh
+bun install
+cd connected-hosts
+npm run check && npm run typecheck && npm test
+```
+
+Verify against an isolated daemon, never the default one:
+
+```sh
+.agents/skills/deliver/scripts/dev-daemon.sh up connected-hosts
+.agents/skills/deliver/scripts/dev-daemon.sh down connected-hosts
+```
+
+## Layout
+
+- `index.client.tsx`: registers the screen, the sidebar row and the Command Center action.
+- `client/hosts.ts`: metadata parsing, add and update builders (an update sends only changed fields), and the live directory hook.
+- `client/screen.tsx`: host cards, the add and edit form, and the remove confirmation.
+- `client/sidebar.tsx`: the sidebar row.
+- `tests/`: unit tests for the builders, the directory message handling and the entry.

package/client/hosts.ts

@@ -0,0 +1,154 @@
+import type { HostAdd, HostDirectory, HostSummary, HostUpdate, PaseoApi } from "@getpaseo/client";
+import type { SessionOutboundMessage } from "@getpaseo/protocol/messages";
+import { useCallback, useEffect, useState } from "react";
+
+export type Built<T> = { ok: true; value: T } | { ok: false; error: string };
+
+/** Prefers the daemon's `userMessage` over the transport message, which appends request details. */
+export function errorMessage(error: unknown): string {
+  if (error instanceof Error) {
+    const { userMessage } = error as Error & { userMessage?: unknown };
+    return typeof userMessage === "string" && userMessage ? userMessage : error.message;
+  }
+  return String(error);
+}
+
+/** One `key=value` per line. Blank lines are skipped; the value may contain `=`. */
+export function parseMetadata(text: string): Built<Record<string, string>> {
+  const metadata: Record<string, string> = {};
+  for (const [index, raw] of text.split("\n").entries()) {
+    const line = raw.trim();
+    if (!line) continue;
+    const at = line.indexOf("=");
+    const key = at < 0 ? "" : line.slice(0, at).trim();
+    if (!key) return { ok: false, error: `Metadata line ${index + 1} needs the form key=value.` };
+    metadata[key] = line.slice(at + 1).trim();
+  }
+  return { ok: true, value: metadata };
+}
+
+export function formatMetadata(metadata: Record<string, string>): string {
+  return Object.keys(metadata)
+    .sort()
+    .map((key) => `${key}=${metadata[key]}`)
+    .join("\n");
+}
+
+export interface AddForm {
+  connection: string;
+  label: string;
+  metadata: string;
+  sourceKey: string;
+}
+
+export function buildAddInput(form: AddForm): Built<HostAdd> {
+  const connection = form.connection.trim();
+  if (!connection)
+    return { ok: false, error: "Enter a connection, such as host:6767 or ssh://user@host." };
+  const metadata = parseMetadata(form.metadata);
+  if (!metadata.ok) return metadata;
+  const input: HostAdd = { connection };
+  const label = form.label.trim();
+  if (label) input.label = label;
+  if (Object.keys(metadata.value).length > 0) input.metadata = metadata.value;
+  const sourceKey = form.sourceKey.trim();
+  if (sourceKey) input.sourceKey = sourceKey;
+  return { ok: true, value: input };
+}
+
+export interface EditForm {
+  label: string;
+  metadata: string;
+  /** Write-only: blank leaves the saved connection untouched. */
+  connection: string;
+  replaceIdentity: boolean;
+}
+
+/**
+ * Sends only what the user changed. A field still equal to its prefilled text is never parsed or
+ * sent, so values the form cannot round-trip (padding, `=` in a key) are not rewritten and a
+ * label-only edit never asks for metadata permission.
+ */
+export function buildUpdatePatch(host: HostSummary, form: EditForm): Built<HostUpdate> {
+  const patch: HostUpdate = {};
+  if (form.label !== (host.label ?? "")) {
+    const label = form.label.trim() || null;
+    if (label !== host.label) patch.label = label;
+  }
+  if (form.metadata !== formatMetadata(host.metadata)) {
+    const metadata = parseMetadata(form.metadata);
+    if (!metadata.ok) return metadata;
+    if (formatMetadata(metadata.value) !== formatMetadata(host.metadata)) {
+      patch.metadata = metadata.value;
+    }
+  }
+  const connection = form.connection.trim();
+  if (connection) {
+    patch.connection = connection;
+    if (form.replaceIdentity) patch.replaceIdentity = true;
+  }
+  return { ok: true, value: patch };
+}
+
+export function directoryFromMessage(message: SessionOutboundMessage): HostDirectory | null {
+  return message.type === "hosts.changed" ? message.payload.directory : null;
+}
+
+export interface DirectoryHandlers {
+  onDirectory(directory: HostDirectory): void;
+  onError(message: string): void;
+}
+
+/**
+ * Follows the selected daemon's saved hosts and returns the cleanup. `observe()` throws
+ * synchronously when the daemon is offline or too old, so that is reported like any other failure.
+ */
+export function observeDirectory(paseo: PaseoApi, handlers: DirectoryHandlers): () => void {
+  try {
+    const subscription = paseo.hosts.observe();
+    const stop = subscription.subscribe({
+      snapshot: handlers.onDirectory,
+      update: (message) => {
+        const directory = directoryFromMessage(message);
+        if (directory) handlers.onDirectory(directory);
+      },
+      error: (cause) => handlers.onError(errorMessage(cause)),
+    });
+    return () => {
+      stop();
+      void subscription.release();
+    };
+  } catch (cause) {
+    handlers.onError(errorMessage(cause));
+    return () => {};
+  }
+}
+
+export interface HostDirectoryState {
+  directory: HostDirectory | null;
+  error: string | null;
+  /** Subscribes again after a failure. */
+  retry(): void;
+}
+
+/** Live view of the selected daemon's saved hosts. Resets when the selected host changes. */
+export function useHostDirectory(paseo: PaseoApi): HostDirectoryState {
+  const [directory, setDirectory] = useState<HostDirectory | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [attempt, setAttempt] = useState(0);
+
+  useEffect(() => {
+    setDirectory(null);
+    setError(null);
+    return observeDirectory(paseo, {
+      onDirectory: (next) => {
+        setDirectory(next);
+        setError(null);
+      },
+      onError: setError,
+    });
+  }, [paseo, attempt]);
+
+  const retry = useCallback(() => setAttempt((count) => count + 1), []);
+  return { directory, error, retry };
+}

package/client/screen.tsx

@@ -0,0 +1,563 @@
+import type { HostSummary } from "@getpaseo/client";
+import type { PluginTheme } from "@getpaseo/plugin";
+import { type PluginScreenProps, usePaseo } from "@getpaseo/plugin/client";
+import { Icon, Modal, ScrollView, TextInput, useToast } from "@getpaseo/plugin/client/ui";
+import { useMemo, useState } from "react";
+import { Pressable, Text, type TextStyle, View, type ViewStyle } from "react-native";
+import {
+  buildAddInput,
+  buildUpdatePatch,
+  errorMessage,
+  formatMetadata,
+  useHostDirectory,
+} from "./hosts";
+
+type FormTarget = { kind: "add" } | { kind: "edit"; host: HostSummary };
+
+const STATUS_LABEL: Record<HostSummary["status"], string> = {
+  online: "Online",
+  connecting: "Connecting",
+  offline: "Offline, retrying",
+  error: "Error",
+  disabled: "Disabled",
+};
+
+function statusColor(theme: PluginTheme, status: HostSummary["status"]) {
+  const colors = theme.colors;
+  if (status === "online") return colors.statusSuccess;
+  if (status === "error") return colors.statusDanger;
+  if (status === "disabled") return colors.foregroundMuted;
+  return colors.statusWarning;
+}
+
+type StyleKey =
+  | "screen"
+  | "content"
+  | "title"
+  | "muted"
+  | "card"
+  | "row"
+  | "name"
+  | "body"
+  | "mono"
+  | "error"
+  | "button"
+  | "primary"
+  | "danger"
+  | "buttonText"
+  | "primaryText"
+  | "dangerText"
+  | "disabled"
+  | "input"
+  | "chip"
+  | "field"
+  | "label";
+type Styles = Record<StyleKey, ViewStyle & TextStyle>;
+
+function makeStyles(theme: PluginTheme, compact: boolean): Styles {
+  const c = theme.colors;
+  const button = {
+    minHeight: compact ? 44 : 40,
+    paddingHorizontal: 14,
+    borderRadius: 10,
+    alignItems: "center" as const,
+    justifyContent: "center" as const,
+    borderWidth: 1,
+    borderColor: c.border,
+    backgroundColor: c.surface2,
+  };
+  return {
+    screen: { flex: 1, backgroundColor: c.surface0 },
+    content: { padding: compact ? 16 : 24, gap: 12, maxWidth: 880, width: "100%" as const },
+    title: { color: c.foreground, fontSize: compact ? 20 : 24, fontWeight: "600" as const },
+    muted: { color: c.foregroundMuted, fontSize: 13, lineHeight: 18 },
+    card: {
+      gap: 8,
+      padding: 14,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: c.border,
+      backgroundColor: c.surface1,
+    },
+    row: {
+      flexDirection: "row" as const,
+      alignItems: "center" as const,
+      gap: 8,
+      flexWrap: "wrap" as const,
+    },
+    name: { color: c.foreground, fontSize: 16, fontWeight: "600" as const, flexShrink: 1 },
+    body: { color: c.foreground, fontSize: 13 },
+    mono: { color: c.foregroundMuted, fontSize: 12 },
+    error: { color: c.statusDanger, fontSize: 13 },
+    button,
+    primary: { ...button, backgroundColor: c.accent, borderColor: c.accent },
+    danger: { ...button, borderColor: c.statusDanger },
+    buttonText: { color: c.foreground, fontSize: 14 },
+    primaryText: { color: c.accentForeground, fontSize: 14, fontWeight: "600" as const },
+    dangerText: { color: c.statusDanger, fontSize: 14 },
+    disabled: { opacity: 0.5 },
+    input: {
+      minHeight: 40,
+      borderRadius: 10,
+      borderWidth: 1,
+      borderColor: c.border,
+      backgroundColor: c.surface0,
+      color: c.foreground,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      fontSize: 14,
+    },
+    chip: {
+      paddingHorizontal: 8,
+      paddingVertical: 2,
+      borderRadius: 999,
+      borderWidth: 1,
+      borderColor: c.border,
+    },
+    field: { gap: 4 },
+    label: { color: c.foreground, fontSize: 13, fontWeight: "600" as const },
+  };
+}
+
+function Action({
+  label,
+  onPress,
+  style,
+  textStyle,
+  disabled,
+  accessibilityLabel,
+}: {
+  label: string;
+  onPress(): void;
+  style: object;
+  textStyle: object;
+  disabled?: boolean;
+  /** Defaults to `label`; set it when several buttons share a label. */
+  accessibilityLabel?: string;
+}) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{ disabled: !!disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      style={[style, disabled && { opacity: 0.5 }]}
+    >
+      <Text style={textStyle}>{label}</Text>
+    </Pressable>
+  );
+}
+
+function Field({
+  styles,
+  theme,
+  label,
+  hint,
+  ...input
+}: {
+  styles: Styles;
+  theme: PluginTheme;
+  label: string;
+  hint?: string;
+  value: string;
+  onChangeText(text: string): void;
+  placeholder?: string;
+  multiline?: boolean;
+}) {
+  return (
+    <View style={styles.field}>
+      <Text style={styles.label}>{label}</Text>
+      <TextInput
+        accessibilityLabel={label}
+        autoCapitalize="none"
+        autoCorrect={false}
+        placeholderTextColor={theme.colors.foregroundMuted}
+        style={[styles.input, input.multiline && { minHeight: 72, textAlignVertical: "top" }]}
+        {...input}
+      />
+      {hint ? <Text style={styles.muted}>{hint}</Text> : null}
+    </View>
+  );
+}
+
+function HostForm({
+  target,
+  styles,
+  theme,
+  onCancel,
+  onDone,
+}: {
+  target: FormTarget;
+  styles: Styles;
+  theme: PluginTheme;
+  onCancel(): void;
+  onDone(message: string): void;
+}) {
+  const paseo = usePaseo();
+  const host = target.kind === "edit" ? target.host : null;
+  const [connection, setConnection] = useState("");
+  const [label, setLabel] = useState(host?.label ?? "");
+  const [metadata, setMetadata] = useState(host ? formatMetadata(host.metadata) : "");
+  const [sourceKey, setSourceKey] = useState("");
+  const mismatch = host?.error?.code === "server_id_mismatch";
+  const [replaceIdentity, setReplaceIdentity] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function submit() {
+    const add = host ? null : buildAddInput({ connection, label, metadata, sourceKey });
+    const update = host
+      ? buildUpdatePatch(host, { label, metadata, connection, replaceIdentity })
+      : null;
+    const invalid = [add, update].find((built) => built && !built.ok);
+    if (invalid && !invalid.ok) {
+      setError(invalid.error);
+      return;
+    }
+    setError(null);
+    setPending(true);
+    try {
+      if (add?.ok) {
+        await paseo.hosts.add(add.value);
+        onDone("Host added");
+      } else if (host && update?.ok && Object.keys(update.value).length > 0) {
+        await paseo.hosts.update(host.registrationId, update.value);
+        onDone("Host updated");
+      } else {
+        onCancel();
+      }
+    } catch (cause) {
+      setError(errorMessage(cause));
+      setPending(false);
+    }
+  }
+
+  return (
+    <View style={{ gap: 12 }}>
+      <Field
+        styles={styles}
+        theme={theme}
+        label={host ? "New connection" : "Connection"}
+        value={connection}
+        onChangeText={setConnection}
+        placeholder={
+          host ? "Leave blank to keep the saved connection" : "host:6767 or ssh://user@host"
+        }
+        hint={
+          host
+            ? `Currently ${host.targetDescription}. Saved credentials are never shown.${
+                mismatch
+                  ? " This host reached a different daemon. Enter the connection again and tick the box below to accept the new identity."
+                  : ""
+              }`
+            : "Saved on this daemon. Unreachable hosts are kept and retried."
+        }
+      />
+      {host && connection.trim() ? (
+        <Pressable
+          accessibilityRole="checkbox"
+          accessibilityLabel="Accept a different server identity"
+          accessibilityState={{ checked: replaceIdentity }}
+          onPress={() => setReplaceIdentity((value) => !value)}
+          style={styles.row}
+        >
+          <Icon
+            name={replaceIdentity ? "SquareCheck" : "Square"}
+            size={18}
+            color={theme.colors.foreground}
+          />
+          <Text style={[styles.body, { flex: 1 }]}>
+            Accept a different server identity. Required when the new connection reaches another
+            daemon than the one pinned for this host.
+          </Text>
+        </Pressable>
+      ) : null}
+      <Field
+        styles={styles}
+        theme={theme}
+        label="Label"
+        value={label}
+        onChangeText={setLabel}
+        placeholder="Build box"
+      />
+      <Field
+        styles={styles}
+        theme={theme}
+        label="Metadata"
+        value={metadata}
+        onChangeText={setMetadata}
+        placeholder="team=infra"
+        hint="One key=value per line. Saving replaces the whole map."
+        multiline
+      />
+      {host ? null : (
+        <Field
+          styles={styles}
+          theme={theme}
+          label="Source key"
+          value={sourceKey}
+          onChangeText={setSourceKey}
+          placeholder="Optional"
+          hint="Names this registration. Repeating an add with the same connection, label and metadata returns the saved entry."
+        />
+      )}
+      {error ? (
+        <Text accessibilityRole="alert" style={styles.error}>
+          {error}
+        </Text>
+      ) : null}
+      <View style={[styles.row, { justifyContent: "flex-end" }]}>
+        <Action
+          label="Cancel"
+          onPress={onCancel}
+          disabled={pending}
+          style={styles.button}
+          textStyle={styles.buttonText}
+        />
+        <Action
+          label={pending ? "Saving..." : host ? "Save changes" : "Add host"}
+          onPress={submit}
+          disabled={pending}
+          style={styles.primary}
+          textStyle={styles.primaryText}
+        />
+      </View>
+    </View>
+  );
+}
+
+function HostCard({
+  host,
+  styles,
+  theme,
+  busy,
+  onToggle,
+  onEdit,
+  onRemove,
+}: {
+  host: HostSummary;
+  styles: Styles;
+  theme: PluginTheme;
+  busy: boolean;
+  onToggle(): void;
+  onEdit(): void;
+  onRemove(): void;
+}) {
+  const name = host.label ?? host.targetDescription;
+  const color = statusColor(theme, host.status);
+  const metadata = Object.entries(host.metadata);
+  return (
+    <View style={styles.card} accessibilityLabel={`Connected host ${name}`}>
+      <View style={styles.row}>
+        <Text style={styles.name}>{name}</Text>
+        <View style={[styles.chip, { borderColor: color }]}>
+          <Text style={{ color, fontSize: 12 }}>{STATUS_LABEL[host.status]}</Text>
+        </View>
+      </View>
+      <Text style={styles.mono}>{host.targetDescription}</Text>
+      <Text style={styles.mono}>
+        Server {host.serverId ?? "not learned yet"} | Source {host.source.id}
+      </Text>
+      {host.lastOnlineAt ? (
+        <Text style={styles.muted}>Last online {new Date(host.lastOnlineAt).toLocaleString()}</Text>
+      ) : null}
+      {host.nextRetryAt && host.status !== "online" ? (
+        <Text style={styles.muted}>Next retry {new Date(host.nextRetryAt).toLocaleString()}</Text>
+      ) : null}
+      {host.error ? (
+        <Text style={styles.error}>
+          {host.error.message} ({host.error.code})
+        </Text>
+      ) : null}
+      {metadata.length > 0 ? (
+        <View style={styles.row}>
+          {metadata.map(([key, value]) => (
+            <View key={key} style={styles.chip}>
+              <Text style={styles.mono}>
+                {key}={value}
+              </Text>
+            </View>
+          ))}
+        </View>
+      ) : null}
+      <View style={styles.row}>
+        <Action
+          label={host.enabled ? "Disable" : "Enable"}
+          accessibilityLabel={`${host.enabled ? "Disable" : "Enable"} ${name}`}
+          onPress={onToggle}
+          disabled={busy}
+          style={styles.button}
+          textStyle={styles.buttonText}
+        />
+        <Action
+          label="Edit"
+          accessibilityLabel={`Edit ${name}`}
+          onPress={onEdit}
+          disabled={busy}
+          style={styles.button}
+          textStyle={styles.buttonText}
+        />
+        <Action
+          label="Remove"
+          accessibilityLabel={`Remove ${name}`}
+          onPress={onRemove}
+          disabled={busy}
+          style={styles.danger}
+          textStyle={styles.dangerText}
+        />
+      </View>
+    </View>
+  );
+}
+
+export function ConnectedHostsScreen({ theme, layout, host: selected }: PluginScreenProps) {
+  const paseo = usePaseo();
+  const toast = useToast();
+  const { directory, error, retry } = useHostDirectory(paseo);
+  const styles = useMemo(() => makeStyles(theme, layout.compact), [theme, layout.compact]);
+  const [form, setForm] = useState<FormTarget | null>(null);
+  const [removing, setRemoving] = useState<HostSummary | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  async function run(registrationId: string, action: () => Promise<unknown>, done: string) {
+    setBusyId(registrationId);
+    try {
+      await action();
+      toast.show(done, { variant: "success" });
+    } catch (cause) {
+      toast.error(errorMessage(cause));
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  function finishForm(message: string) {
+    toast.show(message, { variant: "success" });
+    setForm(null);
+  }
+
+  const hosts = directory?.hosts ?? [];
+  return (
+    <ScrollView style={styles.screen} contentContainerStyle={styles.content}>
+      <View style={styles.row}>
+        <Text style={[styles.title, { flex: 1 }]}>Connected hosts</Text>
+        <Action
+          label="Add host"
+          onPress={() => setForm({ kind: "add" })}
+          disabled={!directory}
+          style={styles.primary}
+          textStyle={styles.primaryText}
+        />
+      </View>
+      <Text style={styles.muted}>
+        Hosts saved on {directory?.self.label ?? selected.label}. Agents here can delegate to them.
+        This list is separate from the connections saved in the app.
+      </Text>
+      {error ? (
+        <View style={styles.card}>
+          <Text accessibilityRole="alert" style={styles.error}>
+            {error}
+          </Text>
+          <Action
+            label="Retry"
+            onPress={retry}
+            style={styles.button}
+            textStyle={styles.buttonText}
+          />
+        </View>
+      ) : null}
+      {!directory && !error ? <Text style={styles.muted}>Loading connected hosts...</Text> : null}
+      {directory && hosts.length === 0 ? (
+        <View style={styles.card}>
+          <Text style={styles.name}>No connected hosts yet</Text>
+          <Text style={styles.muted}>
+            Add another daemon to start agents and workspaces on it from this one.
+          </Text>
+        </View>
+      ) : null}
+      {hosts.map((host) => (
+        <HostCard
+          key={host.registrationId}
+          host={host}
+          styles={styles}
+          theme={theme}
+          busy={busyId === host.registrationId}
+          onToggle={() =>
+            run(
+              host.registrationId,
+              () => paseo.hosts.update(host.registrationId, { enabled: !host.enabled }),
+              host.enabled ? "Host disabled" : "Host enabled",
+            )
+          }
+          onEdit={() => setForm({ kind: "edit", host })}
+          onRemove={() => setRemoving(host)}
+        />
+      ))}
+
+      <Modal
+        title={form?.kind === "edit" ? "Edit host" : "Add host"}
+        open={form !== null}
+        onOpenChange={(open) => {
+          if (!open) setForm(null);
+        }}
+      >
+        <Modal.Content>
+          {form ? (
+            <HostForm
+              key={form.kind === "edit" ? form.host.registrationId : "add"}
+              target={form}
+              styles={styles}
+              theme={theme}
+              onCancel={() => setForm(null)}
+              onDone={finishForm}
+            />
+          ) : null}
+        </Modal.Content>
+      </Modal>
+
+      <Modal
+        title="Remove host"
+        open={removing !== null}
+        onOpenChange={(open) => {
+          if (!open) setRemoving(null);
+        }}
+      >
+        <Modal.Content>
+          <View style={{ gap: 12 }}>
+            <Text style={styles.body}>
+              Remove {removing?.label ?? removing?.targetDescription} from this daemon? Agents
+              already running on it keep running on their own daemon, but this daemon can no longer
+              reach them. If another process registered this host, it can add it again. Disable the
+              host instead to keep it saved and switched off.
+            </Text>
+            <View style={[styles.row, { justifyContent: "flex-end" }]}>
+              <Action
+                label="Cancel"
+                onPress={() => setRemoving(null)}
+                style={styles.button}
+                textStyle={styles.buttonText}
+              />
+              <Action
+                label="Remove host"
+                onPress={() => {
+                  const target = removing;
+                  setRemoving(null);
+                  if (target) {
+                    void run(
+                      target.registrationId,
+                      () => paseo.hosts.remove(target.registrationId),
+                      "Host removed",
+                    );
+                  }
+                }}
+                style={styles.danger}
+                textStyle={styles.dangerText}
+              />
+            </View>
+          </View>
+        </Modal.Content>
+      </Modal>
+    </ScrollView>
+  );
+}

package/client/sidebar.tsx

@@ -0,0 +1,14 @@
+import type { PluginSidebarItemProps } from "@getpaseo/plugin/client";
+import { SidebarRow } from "@getpaseo/plugin/client/ui";
+
+export const SCREEN_ID = "connected-hosts";
+
+export function ConnectedHostsSidebarItem({ currentScreen, openScreen }: PluginSidebarItemProps) {
+  return (
+    <SidebarRow
+      icon="Network"
+      active={currentScreen?.screenId === SCREEN_ID}
+      onPress={() => openScreen({ screenId: SCREEN_ID })}
+    />
+  );
+}

package/index.client.tsx

@@ -0,0 +1,31 @@
+import type { PluginClientContext } from "@getpaseo/plugin/client";
+import { ConnectedHostsScreen } from "./client/screen";
+import { ConnectedHostsSidebarItem, SCREEN_ID } from "./client/sidebar";
+
+export default function contribute(client: PluginClientContext) {
+  const removeScreen = client.addScreen({
+    id: SCREEN_ID,
+    title: "Connected hosts",
+    Component: ConnectedHostsScreen,
+  });
+  const removeSidebarItem = client.addSidebarHeaderItem({
+    id: SCREEN_ID,
+    title: "Connected hosts",
+    Component: ConnectedHostsSidebarItem,
+  });
+  const removeCommand = client.addCommandCenterItem({
+    id: "manage-connected-hosts",
+    title: "Manage connected hosts",
+    icon: "Network",
+    keywords: ["hosts", "daemon", "remote", "connect", "ssh"],
+    context: "global",
+    onSelect({ openScreen }) {
+      openScreen({ screenId: SCREEN_ID });
+    },
+  });
+  return () => {
+    removeCommand();
+    removeSidebarItem();
+    removeScreen();
+  };
+}

package/package.json

@@ -1,6 +1,58 @@
 {
   "name": "@omercnet/paseo-connected-hosts",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-next.303.1",
+  "type": "module",
+  "description": "A Paseo plugin that manages the daemon's connected hosts from the UI.",
+  "license": "MIT",
+  "author": "Omer Cohen",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/omercnet/paseo-plugins.git",
+    "directory": "connected-hosts"
+  },
+  "homepage": "https://github.com/omercnet/paseo-plugins/tree/main/connected-hosts#readme",
+  "bugs": {
+    "url": "https://github.com/omercnet/paseo-plugins/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "bun@1.4.3",
+  "engines": {
+    "node": ">=24"
+  },
+  "keywords": [
+    "paseo",
+    "paseo-plugin",
+    "connected-hosts",
+    "hosts"
+  ],
+  "files": [
+    "index.client.tsx",
+    "client",
+    "paseo-plugin.json",
+    "README.md",
+    "LICENSE",
+    "OVERVIEW.md"
+  ],
+  "scripts": {
+    "check": "biome check .",
+    "check:write": "biome check --write .",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.10",
+    "@getpaseo/cli": "0.13.0",
+    "@getpaseo/client": "0.13.0",
+    "@getpaseo/plugin": "0.13.0",
+    "@getpaseo/protocol": "0.13.0",
+    "@tanstack/react-query": "^5.102.3",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.18",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.0"
+  }
+}

package/paseo-plugin.json

@@ -0,0 +1,9 @@
+{
+  "id": "connected-hosts",
+  "description": "Add, edit, disable and remove the hosts connected to this daemon.",
+  "media": [
+    "https://raw.githubusercontent.com/omercnet/paseo-plugins/pr-assets-connected-hosts/connected-hosts-screen.jpg",
+    "https://raw.githubusercontent.com/omercnet/paseo-plugins/pr-assets-connected-hosts/connected-hosts-edit.jpg"
+  ],
+  "requirements": { "paseo": "^0.13.0" }
+}