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

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
+      }
     />
   );
 }