feat: move tailscale device discovery and settings into a plugin

Adds plugins/tailscale/ with a devices sidebar tab, admin settings
section, and re-auth dialog. Host Metrics tailscale manager card and
SSH re-auth banner parsing stay in core.

src/backend/database/database.ts

@@ -28,7 +28,7 @@ import uiPreferencesRoutes from "./routes/ui-preferences.js";
 import proxmoxDispatch from "./routes/proxmox-dispatch.js";
 import termixIdRoutes from "./routes/termix-id.js";
 import { registerAuditLogRoutes } from "./routes/audit-log-routes.js";
-import { registerTailscaleRoutes } from "./routes/tailscale-routes.js";
+import tailscaleDispatch from "./routes/tailscale-dispatch.js";
 import vaultRoutes from "./routes/vault.js";
 import secretSourceRoutes from "./routes/secret-sources.js";
 import notificationChannelsRoutes from "./routes/notification-channels-routes.js";
@@ -1771,7 +1771,7 @@ app.use("/ui-preferences", uiPreferencesRoutes);
 app.use("/proxmox", proxmoxDispatch);
 app.use("/termix-id", termixIdRoutes);
 registerAuditLogRoutes(app, authenticateJWT);
-registerTailscaleRoutes(app, authenticateJWT);
+app.use("/tailscale", tailscaleDispatch);
 app.use("/vault", vaultRoutes);
 app.use("/secret-sources", secretSourceRoutes);
 app.use("/automations", automationsDispatch);

src/backend/database/routes/tailscale-dispatch.ts

@@ -0,0 +1,47 @@
+// Mounted at /tailscale. Tailscale ships as a first-party in-process plugin
+// (plugins/tailscale) rather than a route file imported directly here, so
+// this module exists to keep /tailscale/* working at its original path
+// without handing the plugin a reference to the shared app instance. The
+// plugin runtime registers its router via registerTailscaleRouter when it
+// activates, and clears it on deactivate, so a disabled plugin falls back to
+// the 404 below.
+//
+// Unlike /plugin-api, this dispatcher applies no auth of its own: it forwards
+// to exactly one first-party router (the Tailscale plugin's own), and every
+// route in that router already applies authenticateJWT itself, the same as
+// every other router mounted alongside it here. /plugin-api gates at the
+// mount point because it forwards to arbitrary third-party plugin code that
+// cannot be assumed to gate itself; that reasoning does not apply to a single
+// first-party router that already does.
+
+import type { Request, Response, NextFunction, Router } from "express";
+import { databaseLogger } from "../../utils/logger.js";
+
+let activeRouter: Router | null = null;
+
+export function registerTailscaleRouter(router: Router): void {
+  activeRouter = router;
+  databaseLogger.info("Registered Tailscale plugin router", {
+    operation: "tailscale_dispatch_register",
+  });
+}
+
+export function unregisterTailscaleRouter(): void {
+  if (!activeRouter) return;
+  activeRouter = null;
+  databaseLogger.info("Unregistered Tailscale plugin router", {
+    operation: "tailscale_dispatch_register",
+  });
+}
+
+export default function tailscaleDispatch(
+  req: Request,
+  res: Response,
+  next: NextFunction,
+): void {
+  if (!activeRouter) {
+    res.status(404).json({ error: "Tailscale is not available" });
+    return;
+  }
+  activeRouter(req, res, next);
+}

src/backend/database/routes/tailscale-routes.ts

@@ -1,128 +0,0 @@
-import {
-  Router,
-  type RequestHandler,
-  type Router as ExpressRouter,
-} from "express";
-import { apiLogger } from "../../utils/logger.js";
-import { fetchWithProxy } from "../../utils/proxy-agent.js";
-import { createCurrentSettingsRepository } from "../repositories/factory.js";
-
-interface TailscaleDevice {
-  id: string;
-  name: string;
-  hostname: string;
-  addresses: string[];
-  os: string;
-  lastSeen: string;
-}
-
-interface TailscaleAPIDevice {
-  id: string;
-  name: string;
-  hostname: string;
-  addresses: string[];
-  os: string;
-  lastSeen: string;
-  nodeId?: string;
-}
-
-const DEFAULT_TAILSCALE_API_BASE = "https://api.tailscale.com/api/v2";
-
-const router = Router();
-
-function normalizeApiBase(raw: string | null): string {
-  const trimmed = (raw ?? "").trim().replace(/\/+$/, "");
-  return trimmed || DEFAULT_TAILSCALE_API_BASE;
-}
-
-export function registerTailscaleRoutes(
-  app: ExpressRouter,
-  authenticateJWT: RequestHandler,
-): void {
-  /**
-   * @openapi
-   * /tailscale/devices:
-   *   get:
-   *     summary: List Tailscale devices
-   *     description: Returns the list of devices in the configured tailnet using the stored API key.
-   *     tags:
-   *       - Tailscale
-   *     responses:
-   *       200:
-   *         description: List of tailnet devices.
-   *         content:
-   *           application/json:
-   *             schema:
-   *               type: object
-   *               properties:
-   *                 devices:
-   *                   type: array
-   *                   items:
-   *                     type: object
-   *       500:
-   *         description: Failed to fetch Tailscale devices.
-   */
-  router.get("/devices", authenticateJWT, async (_req, res) => {
-    try {
-      const settingsRepo = createCurrentSettingsRepository();
-      const apiKey = (await settingsRepo.get("tailscale_api_key")) ?? "";
-      if (!apiKey) {
-        return res.json({ devices: [], hasApiKey: false });
-      }
-      const apiBase = normalizeApiBase(
-        await settingsRepo.get("tailscale_api_base_url"),
-      );
-
-      const url = `${apiBase}/tailnet/-/devices?fields=all`;
-      const response = await fetchWithProxy(url, {
-        headers: {
-          Authorization: `Bearer ${apiKey}`,
-          "User-Agent": "Termix/1.0",
-        },
-      });
-
-      if (!response.ok) {
-        apiLogger.warn("Tailscale API returned non-OK status", {
-          operation: "tailscale_devices",
-          status: response.status,
-        });
-        if (response.status === 401 || response.status === 403) {
-          return res.status(401).json({
-            error: "Invalid Tailscale API key",
-            devices: [],
-            hasApiKey: true,
-          });
-        }
-        return res.status(502).json({
-          error: "Tailscale API error",
-          devices: [],
-          hasApiKey: true,
-        });
-      }
-
-      const data = (await response.json()) as { devices: TailscaleAPIDevice[] };
-
-      const devices: TailscaleDevice[] = (data.devices ?? []).map((d) => ({
-        id: d.id,
-        name: d.name,
-        hostname: d.hostname,
-        addresses: d.addresses ?? [],
-        os: d.os,
-        lastSeen: d.lastSeen,
-      }));
-
-      res.json({ devices, hasApiKey: true });
-    } catch (err) {
-      apiLogger.error("Failed to fetch Tailscale devices", err, {
-        operation: "tailscale_devices",
-      });
-      res.status(500).json({
-        error: "Failed to fetch Tailscale devices",
-        devices: [],
-        hasApiKey: true,
-      });
-    }
-  });
-
-  app.use("/tailscale", router);
-}

src/backend/plugins/first-party.ts

@@ -92,6 +92,12 @@
  * onto /plugin-api/network-topology/* and the generic key-value
  * ctx.storage the worker tier would require -- a URL and storage-model
  * change, not a capability gap.
+ *
+ * tailscale is here because its /devices route makes an outbound HTTP call
+ * to the Tailscale (or Headscale) Admin API using a settings-repo API key.
+ * The worker ctx has no fetch primitive at all (ctx.fetch is notImplemented
+ * in SDK v1, see worker-bootstrap.ts), so there is currently no way for a
+ * worker-tier plugin to make an outbound HTTP request.
  */
 export const FIRST_PARTY_PLUGIN_IDS: ReadonlySet<string> = new Set([
   "ssh-terminal",
@@ -103,6 +109,7 @@ export const FIRST_PARTY_PLUGIN_IDS: ReadonlySet<string> = new Set([
   "fleets",
   "automations",
   "network-topology",
+  "tailscale",
 ]);
 
 export const TRANSPORT_OWNER_CAPABILITY = "process:transport-owner";

src/backend/tests/plugins/first-party.test.ts

@@ -39,7 +39,7 @@ function manifest(overrides: Record<string, unknown> = {}) {
 }
 
 describe("first-party allowlist", () => {
-  it("contains only ssh-terminal, docker, host-metrics, ai, proxmox, remote-desktop, fleets, automations and network-topology", () => {
+  it("contains only ssh-terminal, docker, host-metrics, ai, proxmox, remote-desktop, fleets, automations, network-topology and tailscale", () => {
     expect([...FIRST_PARTY_PLUGIN_IDS].sort()).toEqual([
       "ai",
       "automations",
@@ -50,10 +50,11 @@ describe("first-party allowlist", () => {
       "proxmox",
       "remote-desktop",
       "ssh-terminal",
+      "tailscale",
     ]);
   });
 
-  it("recognises ssh-terminal, docker, host-metrics, ai, proxmox, remote-desktop, fleets, automations and network-topology and nothing else", () => {
+  it("recognises ssh-terminal, docker, host-metrics, ai, proxmox, remote-desktop, fleets, automations, network-topology and tailscale and nothing else", () => {
     expect(isFirstParty("ssh-terminal")).toBe(true);
     expect(isFirstParty("docker")).toBe(true);
     expect(isFirstParty("host-metrics")).toBe(true);
@@ -63,6 +64,7 @@ describe("first-party allowlist", () => {
     expect(isFirstParty("fleets")).toBe(true);
     expect(isFirstParty("automations")).toBe(true);
     expect(isFirstParty("network-topology")).toBe(true);
+    expect(isFirstParty("tailscale")).toBe(true);
     expect(isFirstParty("ssh-terminal-pro")).toBe(false);
     expect(isFirstParty("community-plugin")).toBe(false);
     expect(isFirstParty("")).toBe(false);
@@ -90,6 +92,7 @@ describe("runsInProcess", () => {
     expect(
       runsInProcess("network-topology", [TRANSPORT_OWNER_CAPABILITY]),
     ).toBe(true);
+    expect(runsInProcess("tailscale", [TRANSPORT_OWNER_CAPABILITY])).toBe(true);
 
     // On the list but not asking for it: stays in a worker, so the manifest
     // remains an honest description of what the plugin does.
@@ -102,6 +105,7 @@ describe("runsInProcess", () => {
     expect(runsInProcess("fleets", ["hosts.read"])).toBe(false);
     expect(runsInProcess("automations", ["hosts.read"])).toBe(false);
     expect(runsInProcess("network-topology", ["hosts.read"])).toBe(false);
+    expect(runsInProcess("tailscale", ["hosts.read"])).toBe(false);
 
     // Asking for it but not on the list.
     expect(
@@ -217,6 +221,18 @@ describe("manifest gate on the reserved capability", () => {
     expect(parsed?.id).toBe("network-topology");
   });
 
+  it("allows it for tailscale", () => {
+    const { manifest: parsed, errors } = parseManifest(
+      manifest({
+        id: "tailscale",
+        permissions: [TRANSPORT_OWNER_CAPABILITY],
+      }),
+    );
+
+    expect(errors).toEqual([]);
+    expect(parsed?.id).toBe("tailscale");
+  });
+
   it("still accepts an ordinary manifest that never mentions it", () => {
     const { manifest: parsed, errors } = parseManifest(
       manifest({ permissions: ["hosts.read"] }),

src/types/ui-types.ts

@@ -372,7 +372,8 @@ export type AdminSection =
   | "audit-log"
   | "ssl"
   | "plugins"
-  | "touch-input";
+  | "touch-input"
+  | "tailscale";
 export type ThemeId =
   | "dark"
   | "light"

src/ui/AppShell.tsx

@@ -96,6 +96,11 @@ const FleetsPanel = lazy(() =>
     default: m.FleetsPanel,
   })),
 );
+const TailscaleDevicesPanel = lazy(() =>
+  import("../../plugins/tailscale/frontend/TailscaleDevicesPanel").then(
+    (m) => ({ default: m.TailscaleDevicesPanel }),
+  ),
+);
 const WorkspacesPanel = lazy(() =>
   import("@/sidebar/WorkspacesPanel").then((m) => ({
     default: m.WorkspacesPanel,
@@ -2602,6 +2607,15 @@ export function AppShell({
           />
         )}
 
+        {railView === "tailscale" && (
+          <TailscaleDevicesPanel
+            onConnect={(host, type) => {
+              openTab(host, type);
+              if (isMobile) setSidebarOpen(false);
+            }}
+          />
+        )}
+
         {railView === "ssh-tools" && (
           <div className="flex-1 min-h-0 overflow-y-auto">
             <SshToolsPanel

src/ui/api/settings-api.ts

@@ -1,4 +1,3 @@
-import axios from "axios";
 import { authApi, handleApiError, statsApi } from "@/main-axios";
 
 // GLOBAL MONITORING SETTINGS
@@ -128,73 +127,8 @@ export async function updateSessionTimeout(
   }
 }
 
-// ============================================================================
-// TAILSCALE SETTINGS
-// ============================================================================
-
-export async function getTailscaleSettings(): Promise<{
-  apiKey: string;
-  hasApiKey: boolean;
-  apiBaseUrl: string;
-}> {
-  try {
-    const response = await authApi.get("/users/tailscale-settings");
-    return response.data;
-  } catch (error) {
-    handleApiError(error, "fetch Tailscale settings");
-  }
-}
-
-export async function updateTailscaleSettings(
-  apiKey: string,
-  apiBaseUrl?: string,
-): Promise<{ hasApiKey: boolean }> {
-  try {
-    const response = await authApi.patch("/users/tailscale-settings", {
-      apiKey,
-      apiBaseUrl,
-    });
-    return response.data;
-  } catch (error) {
-    handleApiError(error, "update Tailscale settings");
-  }
-}
-
-export async function getTailscaleDevices(): Promise<{
-  devices: Array<{
-    id: string;
-    name: string;
-    hostname: string;
-    addresses: string[];
-    os: string;
-    lastSeen: string;
-  }>;
-  hasApiKey: boolean;
-  error?: string;
-}> {
-  try {
-    const response = await authApi.get("/tailscale/devices");
-    return response.data;
-  } catch (error) {
-    if (axios.isAxiosError(error)) {
-      const data = error.response?.data;
-      if (
-        data &&
-        typeof data === "object" &&
-        "hasApiKey" in data &&
-        typeof data.hasApiKey === "boolean"
-      ) {
-        return data as {
-          devices: [];
-          hasApiKey: boolean;
-          error?: string;
-        };
-      }
-    }
-    handleApiError(error, "fetch Tailscale devices");
-    throw error;
-  }
-}
+// Tailscale settings/device API wrappers moved to
+// plugins/tailscale/frontend/tailscale-api.ts.
 
 // ============================================================================
 // GUACAMOLE SETTINGS

src/ui/features/terminal/Terminal.tsx

@@ -46,7 +46,7 @@ import { SSHAuthDialog } from "@/ssh/dialogs/SSHAuthDialog.tsx";
 import { PassphraseDialog } from "@/ssh/dialogs/PassphraseDialog.tsx";
 import { WarpgateDialog } from "@/ssh/dialogs/WarpgateDialog.tsx";
 import { OPKSSHDialog } from "@/ssh/dialogs/OPKSSHDialog.tsx";
-import { TailscaleCheckDialog } from "@/ssh/dialogs/TailscaleCheckDialog.tsx";
+import { TailscaleCheckDialog } from "../../../../plugins/tailscale/frontend/TailscaleCheckDialog.tsx";
 import { HostKeyVerificationDialog } from "@/ssh/dialogs/HostKeyVerificationDialog.tsx";
 import { TmuxSessionPicker } from "@/ssh/dialogs/TmuxSessionPicker.tsx";
 import {

src/ui/locales/en.json

@@ -737,6 +737,7 @@
     "snippets": "Snippets",
     "macros": "Macros",
     "fleets": "Fleets",
+    "tailscale": "Tailscale",
     "automations": "Automations",
     "workspaces": "Workspaces",
     "hostManager": "Host Manager",
@@ -3507,6 +3508,7 @@
     "sectionApiKeys": "API Keys",
     "sectionAuditLog": "Audit Log",
     "sectionSsl": "SSL / Let's Encrypt",
+    "sectionTailscale": "Tailscale",
     "sectionTouchInput": "Touch Input",
     "touchEnabled": "Enable Touch Input",
     "touchEnabledDesc": "Allow one-finger touch scrolling in terminals",

src/ui/sidebar/AdminSettingsPanel.tsx

@@ -50,8 +50,6 @@ import {
   getUserRoles,
 } from "@/main-axios";
 import {
-  getTailscaleSettings,
-  updateTailscaleSettings,
   getHostDefaults,
   updateHostDefaults,
   getAnalyticsEnabled,
@@ -66,6 +64,11 @@ import {
   type TerminalImageStorageTestResult,
   type BrandingSettings,
 } from "@/api/settings-api";
+import {
+  getTailscaleSettings,
+  updateTailscaleSettings,
+} from "../../../plugins/tailscale/frontend/tailscale-api";
+import { AdminTailscaleSection } from "../../../plugins/tailscale/frontend/AdminTailscaleSection";
 import {
   getSessionSharingGloballyEnabled,
   updateSessionSharingGloballyEnabled,
@@ -1336,6 +1339,11 @@ export function AdminSettingsPanel({
         handleSaveGuacamole={handleSaveGuacamole}
         logLevel={logLevel}
         handleSaveLogLevel={handleSaveLogLevel}
+      />
+
+      <AdminTailscaleSection
+        open={openSections.has("tailscale")}
+        onToggle={() => toggle("tailscale")}
         tailscaleApiKey={tailscaleApiKey}
         setTailscaleApiKey={setTailscaleApiKey}
         tailscaleApiBaseUrl={tailscaleApiBaseUrl}

src/ui/sidebar/AdminSettingsSections.tsx

@@ -77,11 +77,6 @@ type GeneralSettingsSectionProps = {
   handleSaveGuacamole: () => void;
   logLevel: string;
   handleSaveLogLevel: (level: string) => void;
-  tailscaleApiKey: string;
-  setTailscaleApiKey: Dispatch<SetStateAction<string>>;
-  tailscaleApiBaseUrl: string;
-  setTailscaleApiBaseUrl: Dispatch<SetStateAction<string>>;
-  handleSaveTailscaleApiKey: () => void;
 };
 
 export function AdminGeneralSettingsSection({
@@ -138,11 +133,6 @@ export function AdminGeneralSettingsSection({
   handleSaveGuacamole,
   logLevel,
   handleSaveLogLevel,
-  tailscaleApiKey,
-  setTailscaleApiKey,
-  tailscaleApiBaseUrl,
-  setTailscaleApiBaseUrl,
-  handleSaveTailscaleApiKey,
 }: GeneralSettingsSectionProps) {
   const { t } = useTranslation();
 
@@ -562,56 +552,6 @@ export function AdminGeneralSettingsSection({
           )}
         </div>
 
-        <div className="flex flex-col gap-2 border-t border-border pt-3 mt-2">
-          <div className="flex flex-col gap-0.5">
-            <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-              {t("admin.tailscaleApiKey")}
-            </span>
-            <span className="text-[10px] text-muted-foreground">
-              {t("admin.tailscaleApiKeyDescription")}{" "}
-              <a
-                href="https://docs.termix.site/features/networking/tailscale"
-                target="_blank"
-                rel="noreferrer"
-                className="text-accent-brand hover:underline"
-              >
-                {t("admin.tailscaleApiKeyDocsLink")}
-              </a>
-            </span>
-          </div>
-          <div className="flex items-center gap-2">
-            <Input
-              type="password"
-              value={tailscaleApiKey}
-              onChange={(e) => setTailscaleApiKey(e.target.value)}
-              placeholder="tskey-api-... / hskey-api-..."
-              className="text-sm"
-            />
-            <Button
-              variant="outline"
-              size="sm"
-              className="text-xs border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand h-7 shrink-0"
-              onClick={handleSaveTailscaleApiKey}
-            >
-              {t("common.save")}
-            </Button>
-          </div>
-          <div className="flex flex-col gap-1.5 mt-1">
-            <label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
-              {t("admin.tailscaleApiBaseUrl")}
-            </label>
-            <span className="text-[10px] text-muted-foreground">
-              {t("admin.tailscaleApiBaseUrlDescription")}
-            </span>
-            <Input
-              value={tailscaleApiBaseUrl}
-              onChange={(e) => setTailscaleApiBaseUrl(e.target.value)}
-              placeholder="https://api.tailscale.com/api/v2"
-              className="text-sm"
-            />
-          </div>
-        </div>
-
         <div className="flex flex-col gap-2 border-t border-border pt-3 mt-2">
           <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
             {t("admin.logLevel")}

src/ui/sidebar/AppRail.tsx

@@ -32,6 +32,7 @@ export type RailView =
   | "automations"
   | "ai"
   | "fleets"
+  | "tailscale"
   | "workspaces"
   | "collab";
 

src/ui/sidebar/HostEditor.tsx

@@ -56,7 +56,8 @@ import {
   createCredential,
   adminCreateUserCredential,
 } from "@/main-axios";
-import { getTailscaleDevices, getHostDefaults } from "@/api/settings-api";
+import { getHostDefaults } from "@/api/settings-api";
+import { getTailscaleDevices } from "../../../plugins/tailscale/frontend/tailscale-api";
 import {
   getUserPreferences,
   saveUserPreferences,

src/ui/sidebar/rail-items.ts

@@ -11,6 +11,7 @@ import {
   Network,
   Play,
   Plug,
+  Radar,
   ScrollText,
   Server,
   Settings,
@@ -139,6 +140,12 @@ export const RAIL_ITEMS: RailItemDef[] = [
     rightDockable: true,
   },
   { id: "fleets", icon: Boxes, labelKey: "nav.fleets", separatorAfter: true },
+  {
+    id: "tailscale",
+    icon: Radar,
+    labelKey: "nav.tailscale",
+    separatorAfter: true,
+  },
   {
     id: "automations",
     icon: Workflow,

src/ui/ssh/dialogs/TailscaleCheckDialog.tsx

@@ -1,89 +0,0 @@
-import React from "react";
-import { Button } from "@/components/button.tsx";
-import { Shield, ExternalLink, Loader2 } from "lucide-react";
-import { useTranslation } from "react-i18next";
-
-interface TailscaleCheckDialogProps {
-  isOpen: boolean;
-  authUrl: string;
-  message?: string;
-  stage: "prompt" | "waiting";
-  onCancel: () => void;
-  onOpenUrl: () => void;
-  backgroundColor?: string;
-}
-
-export function TailscaleCheckDialog({
-  isOpen,
-  authUrl,
-  message,
-  stage,
-  onCancel,
-  onOpenUrl,
-  backgroundColor,
-}: TailscaleCheckDialogProps) {
-  const { t } = useTranslation();
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="absolute inset-0 flex items-center justify-center z-500 animate-in fade-in duration-200">
-      <div
-        className="absolute inset-0 bg-canvas rounded-md"
-        style={{ backgroundColor: backgroundColor || undefined }}
-      />
-      <div className="bg-card border border-border w-full max-w-md mx-4 relative z-10 animate-in fade-in zoom-in-95 duration-200">
-        <div className="p-4 border-b border-border">
-          <div className="flex items-center gap-2">
-            <Shield className="size-4 text-accent-brand" />
-            <h3 className="text-xs font-bold uppercase tracking-widest">
-              {t("terminal.tailscaleCheckRequired")}
-            </h3>
-          </div>
-          <p className="text-[10px] font-bold uppercase tracking-tight text-muted-foreground mt-1">
-            {t("terminal.tailscaleCheckDescription")}
-          </p>
-        </div>
-        <div className="p-4 flex flex-col gap-4">
-          {message && (
-            <p className="text-xs text-muted-foreground whitespace-pre-wrap break-words">
-              {message}
-            </p>
-          )}
-
-          {stage === "prompt" && authUrl && (
-            <Button
-              type="button"
-              variant="outline"
-              onClick={onOpenUrl}
-              className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 rounded-none text-[10px] font-bold uppercase tracking-widest w-full flex items-center gap-2"
-            >
-              <ExternalLink className="size-3.5" />
-              {t("terminal.tailscaleCheckOpenBrowser")}
-            </Button>
-          )}
-
-          {stage === "waiting" && (
-            <div className="flex items-center gap-3 py-2">
-              <Loader2 className="size-4 animate-spin text-accent-brand shrink-0" />
-              <p className="text-xs text-muted-foreground">
-                {t("terminal.tailscaleCheckWaiting")}
-              </p>
-            </div>
-          )}
-
-          <div className="flex justify-end">
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={onCancel}
-              className="rounded-none text-[10px] font-bold uppercase tracking-widest"
-            >
-              {t("common.cancel")}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/ui/tests/plugins/tailscale/AdminTailscaleSection.test.tsx

@@ -0,0 +1,62 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { AdminTailscaleSection } from "../../../../../plugins/tailscale/frontend/AdminTailscaleSection";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+describe("AdminTailscaleSection", () => {
+  it("renders the API key and base URL fields and saves on click", async () => {
+    const user = userEvent.setup();
+    const handleSave = vi.fn();
+    render(
+      <AdminTailscaleSection
+        open
+        onToggle={vi.fn()}
+        tailscaleApiKey="tskey-api-abc"
+        setTailscaleApiKey={vi.fn()}
+        tailscaleApiBaseUrl="https://api.tailscale.com/api/v2"
+        setTailscaleApiBaseUrl={vi.fn()}
+        handleSaveTailscaleApiKey={handleSave}
+      />,
+    );
+
+    expect(
+      (
+        screen.getByPlaceholderText(
+          "tskey-api-... / hskey-api-...",
+        ) as HTMLInputElement
+      ).value,
+    ).toBe("tskey-api-abc");
+    expect(
+      (
+        screen.getByPlaceholderText(
+          "https://api.tailscale.com/api/v2",
+        ) as HTMLInputElement
+      ).value,
+    ).toBe("https://api.tailscale.com/api/v2");
+
+    await user.click(screen.getByText("common.save"));
+    expect(handleSave).toHaveBeenCalledOnce();
+  });
+
+  it("does not render its content when closed", () => {
+    render(
+      <AdminTailscaleSection
+        open={false}
+        onToggle={vi.fn()}
+        tailscaleApiKey=""
+        setTailscaleApiKey={vi.fn()}
+        tailscaleApiBaseUrl=""
+        setTailscaleApiBaseUrl={vi.fn()}
+        handleSaveTailscaleApiKey={vi.fn()}
+      />,
+    );
+
+    expect(
+      screen.queryByPlaceholderText("tskey-api-... / hskey-api-..."),
+    ).toBeNull();
+  });
+});

src/ui/tests/plugins/tailscale/TailscaleDevicesPanel.test.tsx

@@ -0,0 +1,76 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const getTailscaleDevicesMock = vi.hoisted(() => vi.fn());
+
+vi.mock("../../../../../plugins/tailscale/frontend/tailscale-api", () => ({
+  getTailscaleDevices: getTailscaleDevicesMock,
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import { TailscaleDevicesPanel } from "../../../../../plugins/tailscale/frontend/TailscaleDevicesPanel";
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("TailscaleDevicesPanel", () => {
+  it("shows the no-api-key message when hasApiKey is false", async () => {
+    getTailscaleDevicesMock.mockResolvedValue({
+      devices: [],
+      hasApiKey: false,
+    });
+
+    render(<TailscaleDevicesPanel onConnect={vi.fn()} />);
+
+    await waitFor(() =>
+      expect(screen.getByText("hosts.tailscaleNoApiKey")).toBeTruthy(),
+    );
+  });
+
+  it("shows the empty-devices message when the tailnet has no devices", async () => {
+    getTailscaleDevicesMock.mockResolvedValue({ devices: [], hasApiKey: true });
+
+    render(<TailscaleDevicesPanel onConnect={vi.fn()} />);
+
+    await waitFor(() =>
+      expect(screen.getByText("hosts.tailscaleNoDevices")).toBeTruthy(),
+    );
+  });
+
+  it("renders devices and connects with an ephemeral tailscale host", async () => {
+    const user = userEvent.setup();
+    getTailscaleDevicesMock.mockResolvedValue({
+      hasApiKey: true,
+      devices: [
+        {
+          id: "d1",
+          name: "box",
+          hostname: "box",
+          addresses: ["100.64.0.1"],
+          os: "linux",
+          lastSeen: "2026-01-01T00:00:00Z",
+        },
+      ],
+    });
+
+    const onConnect = vi.fn();
+    render(<TailscaleDevicesPanel onConnect={onConnect} />);
+
+    await waitFor(() => expect(screen.getByText("box")).toBeTruthy());
+    await user.click(
+      screen.getByText("newUi.sidebar.quickConnect.connectToTerminal"),
+    );
+
+    expect(onConnect).toHaveBeenCalledOnce();
+    const [host, type] = onConnect.mock.calls[0];
+    expect(type).toBe("terminal");
+    expect(host.ip).toBe("100.64.0.1");
+    expect(host.authType).toBe("tailscale");
+    expect(host.username).toBe("root");
+  });
+});

src/ui/tests/plugins/tailscale/tailscale-api.test.ts

@@ -9,7 +9,7 @@ vi.mock("@/main-axios", () => ({
   handleApiError: handleApiErrorMock,
 }));
 
-import { getTailscaleDevices } from "../../api/settings-api";
+import { getTailscaleDevices } from "../../../../../plugins/tailscale/frontend/tailscale-api";
 
 beforeEach(() => {
   vi.clearAllMocks();

src/ui/tests/sidebar/rail-items.test.ts

@@ -57,6 +57,7 @@ describe("RAIL_ITEMS", () => {
       "snippets",
       "macros",
       "fleets",
+      "tailscale",
       "automations",
       "ai",
       "history",