feat: tailscale add host and copy ip, fix outbound fetch hang and plugin ESM warning

plugins/tailscale/locales/en.json

@@ -42,7 +42,11 @@
     "tailscaleLoadingDevices": "Loading devices...",
     "tailscaleDeviceLoadFailed": "Failed to load Tailscale devices. Check the API URL and network connection.",
     "tailscaleNoDevices": "No devices found in your tailnet.",
-    "tailscaleDeviceAutoFill": "Selecting a device will auto-fill the host IP address."
+    "tailscaleDeviceAutoFill": "Selecting a device will auto-fill the host IP address.",
+    "tailscaleAddHost": "Add host",
+    "tailscaleCopyIp": "Copy Tailscale IP",
+    "tailscaleIpCopied": "IP copied",
+    "tailscaleIpCopyFailed": "Could not copy the IP"
   },
   "terminal": {
     "tailscaleCheckRequired": "Tailscale Authentication Required",

plugins/tailscale/src/backend/routes.ts

@@ -76,7 +76,7 @@ export function startTailscaleService(
         if (!context) {
           return res
             .status(503)
-            .json({ error: "Plugin is not running", devices: [] });
+            .json({ error: "Tailscale is not available", devices: [] });
         }
         const apiKey = (await context.settings.get<string>("apiKey")) ?? "";
         if (!apiKey) {

plugins/tailscale/src/frontend/TailscaleDevicesPanel.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useState } from "react";
-import { useTranslation } from "@termix/plugin-sdk/frontend";
-import { Loader2, RefreshCw, Terminal } from "lucide-react";
+import {
+  useToast,
+  useTranslation,
+  type HostDraft,
+} from "@termix/plugin-sdk/frontend";
+import { Copy, Loader2, Plus, RefreshCw, Terminal } from "lucide-react";
 import { Button } from "@termix/plugin-sdk/ui";
 import { Input } from "@termix/plugin-sdk/ui";
 import type { PluginHostRecord as Host } from "@termix/plugin-sdk/frontend";
@@ -18,6 +22,8 @@ interface TailscaleDevice {
 
 interface TailscaleDevicesPanelProps {
   onConnect: (host: Host, type: "terminal") => void;
+  /** Absent when the shell cannot open the host editor. */
+  onAddHost?: (draft: HostDraft) => void;
 }
 
 function deviceIp(device: TailscaleDevice): string {
@@ -30,8 +36,10 @@ function deviceIp(device: TailscaleDevice): string {
 
 export function TailscaleDevicesPanel({
   onConnect,
+  onAddHost,
 }: TailscaleDevicesPanelProps) {
   const { t } = useTranslation();
+  const toast = useToast();
   const [devices, setDevices] = useState<TailscaleDevice[]>([]);
   const [hasApiKey, setHasApiKey] = useState(true);
   const [loading, setLoading] = useState(true);
@@ -52,10 +60,33 @@ export function TailscaleDevicesPanel({
 
   useEffect(load, []);
 
+  function usernameFor(device: TailscaleDevice): string {
+    return usernames[device.id]?.trim() || "root";
+  }
+
+  function copyIp(ip: string) {
+    navigator.clipboard
+      ?.writeText(ip)
+      .then(() => toast.success(t("hosts.tailscaleIpCopied")))
+      .catch(() => toast.error(t("hosts.tailscaleIpCopyFailed")));
+  }
+
+  function addHost(device: TailscaleDevice) {
+    const ip = deviceIp(device);
+    if (!ip || !onAddHost) return;
+    onAddHost({
+      name: device.hostname || device.name,
+      ip,
+      port: 22,
+      username: usernameFor(device),
+      authType: "tailscale",
+    });
+  }
+
   function connect(device: TailscaleDevice) {
     const ip = deviceIp(device);
     if (!ip) return;
-    const username = usernames[device.id]?.trim() || "root";
+    const username = usernameFor(device);
     const host = createQuickConnectHost({
       ip,
       port: 22,
@@ -118,14 +149,33 @@ export function TailscaleDevicesPanel({
                 key={device.id}
                 className="flex flex-col gap-1.5 border border-border p-2"
               >
-                <div className="flex flex-col gap-0.5">
-                  <span className="text-xs font-semibold">
+                <div className="flex items-start justify-between gap-2">
+                  <span className="text-xs font-semibold min-w-0 break-all">
                     {device.hostname || device.name}
                   </span>
-                  <span className="text-[10px] text-muted-foreground">
-                    {ip} {device.os ? `· ${device.os}` : ""}
-                  </span>
+                  {device.os && (
+                    <span className="shrink-0 border border-border px-1 text-[10px] text-muted-foreground">
+                      {device.os}
+                    </span>
+                  )}
                 </div>
+                {ip && (
+                  <div className="flex items-center gap-1">
+                    <span className="text-[10px] text-muted-foreground font-mono">
+                      {ip}
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="size-5 text-muted-foreground hover:text-foreground"
+                      title={t("hosts.tailscaleCopyIp")}
+                      aria-label={t("hosts.tailscaleCopyIp")}
+                      onClick={() => copyIp(ip)}
+                    >
+                      <Copy className="size-3" />
+                    </Button>
+                  </div>
+                )}
                 <Input
                   placeholder={t("newUi.sidebar.quickConnect.usernameLabel")}
                   value={usernames[device.id] ?? "root"}
@@ -140,15 +190,28 @@ export function TailscaleDevicesPanel({
                   }}
                   className="h-7 text-xs"
                 />
-                <Button
-                  onClick={() => connect(device)}
-                  disabled={!ip}
-                  className="flex items-center justify-center gap-1.5 h-7 w-full border border-accent-brand/40 bg-accent-brand/10 text-accent-brand text-xs font-semibold hover:bg-accent-brand/20 transition-colors"
-                  variant="outline"
-                >
-                  <Terminal className="size-3.5" />
-                  {t("newUi.sidebar.quickConnect.connectToTerminal")}
-                </Button>
+                <div className="flex gap-1.5">
+                  <Button
+                    onClick={() => connect(device)}
+                    disabled={!ip}
+                    className="flex flex-1 items-center justify-center gap-1.5 h-7 border border-accent-brand/40 bg-accent-brand/10 text-accent-brand text-xs font-semibold hover:bg-accent-brand/20 transition-colors"
+                    variant="outline"
+                  >
+                    <Terminal className="size-3.5" />
+                    {t("newUi.sidebar.quickConnect.connectToTerminal")}
+                  </Button>
+                  {onAddHost && (
+                    <Button
+                      onClick={() => addHost(device)}
+                      disabled={!ip}
+                      variant="outline"
+                      className="h-7 gap-1 text-xs shrink-0"
+                    >
+                      <Plus className="size-3.5" />
+                      {t("hosts.tailscaleAddHost")}
+                    </Button>
+                  )}
+                </div>
               </div>
             );
           })}

plugins/tailscale/src/frontend/TailscaleDevicesStatus.tsx

@@ -52,7 +52,7 @@ export function TailscaleDevicesStatus({ running }: SettingsComponentProps) {
   const label = (key: string) => t(key);
 
   return (
-    <div className="flex items-center justify-between gap-3 py-3">
+    <div className="flex flex-wrap items-center justify-between gap-3 py-3">
       <div className="flex flex-col gap-0.5 min-w-0 flex-1">
         <span className="text-sm font-medium leading-snug">
           {label("settings.devices.label")}

plugins/tailscale/src/frontend/index.tsx

@@ -18,6 +18,11 @@ function Panel({ shell }: PanelProps) {
           type,
         )
       }
+      onAddHost={
+        shell.openHostEditor
+          ? (draft) => shell.openHostEditor!(draft)
+          : undefined
+      }
     />
   );
 }

plugins/tailscale/tests/frontend/TailscaleDevicesPanel.test.tsx

@@ -74,4 +74,75 @@ describe("TailscaleDevicesPanel", () => {
     expect(host.authType).toBe("tailscale");
     expect(host.username).toBe("root");
   });
+
+  const device = {
+    id: "d1",
+    name: "box.tailnet.ts.net",
+    hostname: "box",
+    addresses: ["100.64.0.1", "fd7a::1"],
+    os: "linux",
+    lastSeen: "2026-01-01T00:00:00Z",
+  };
+
+  it("opens the host editor with the device filled in", async () => {
+    const user = userEvent.setup();
+    getTailscaleDevicesMock.mockResolvedValue({
+      hasApiKey: true,
+      devices: [device],
+    });
+
+    const onAddHost = vi.fn();
+    render(<TailscaleDevicesPanel onConnect={vi.fn()} onAddHost={onAddHost} />);
+
+    await waitFor(() => expect(screen.getByText("box")).toBeTruthy());
+    await user.clear(
+      screen.getByPlaceholderText("newUi.sidebar.quickConnect.usernameLabel"),
+    );
+    await user.type(
+      screen.getByPlaceholderText("newUi.sidebar.quickConnect.usernameLabel"),
+      "luke",
+    );
+    await user.click(screen.getByText("hosts.tailscaleAddHost"));
+
+    expect(onAddHost).toHaveBeenCalledWith({
+      name: "box",
+      ip: "100.64.0.1",
+      port: 22,
+      username: "luke",
+      authType: "tailscale",
+    });
+  });
+
+  it("hides Add host when the shell cannot open the editor", async () => {
+    getTailscaleDevicesMock.mockResolvedValue({
+      hasApiKey: true,
+      devices: [device],
+    });
+
+    render(<TailscaleDevicesPanel onConnect={vi.fn()} />);
+
+    await waitFor(() => expect(screen.getByText("box")).toBeTruthy());
+    expect(screen.queryByText("hosts.tailscaleAddHost")).toBeNull();
+  });
+
+  it("copies the tailnet IP", async () => {
+    const user = userEvent.setup();
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", {
+      value: { writeText },
+      configurable: true,
+    });
+    getTailscaleDevicesMock.mockResolvedValue({
+      hasApiKey: true,
+      devices: [device],
+    });
+
+    render(<TailscaleDevicesPanel onConnect={vi.fn()} />);
+
+    await waitFor(() => expect(screen.getByText("box")).toBeTruthy());
+    expect(screen.getByText("linux")).toBeTruthy();
+    await user.click(screen.getByLabelText("hosts.tailscaleCopyIp"));
+
+    expect(writeText).toHaveBeenCalledWith("100.64.0.1");
+  });
 });