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.

plugins/tailscale/backend/index.mjs

@@ -0,0 +1,69 @@
+/**
+ * Tailscale - first-party, in-process plugin.
+ *
+ * This plugin runs on the main thread rather than in a worker for the same
+ * reason fleets and proxmox do (see src/backend/plugins/first-party.ts): it
+ * does not own a live transport of its own (no WebSocket server, no
+ * dedicated port), so it registers its Express router with the
+ * always-mounted /tailscale dispatcher in
+ * src/backend/database/routes/tailscale-dispatch.ts instead of getting its
+ * own port.
+ *
+ * routes.ts is what used to be src/backend/database/routes/tailscale-routes.ts,
+ * moved here and rewritten from a direct app.use() call into
+ * startTailscaleService()/stopTailscaleService(), called from
+ * activate()/deactivate() below.
+ *
+ * tailscale-check.ts (SSH re-auth banner parsing) stays in core, at
+ * src/backend/hosts/tailscale-check.ts, and is NOT part of this plugin.
+ * It is imported directly by src/backend/hosts/terminal/index.ts (owned by
+ * ssh-terminal), which type-checks under tsconfig.node.json's rootDir of
+ * src/ -- a plugin .ts file physically outside that root cannot be a static
+ * import target for core code (see scripts/copy-bundled-plugins.cjs's own
+ * comment: plugin backends import core, never the reverse, anywhere in this
+ * codebase). Moving the file into plugins/tailscale/backend/ would require
+ * either widening tsconfig.node.json's rootDir for every other plugin's
+ * dist path-rewriting, or switching terminal/index.ts to a dynamic import
+ * inside its banner handler -- both bigger changes than this plugin
+ * warrants. The banner/ready wiring and retry state already live in
+ * ssh-terminal's connection handler regardless, so this stays exactly where
+ * that coupling already lives.
+ *
+ * The /users/tailscale-settings GET/PATCH routes stay in core
+ * (src/backend/database/routes/user-settings-routes.ts) -- they are general
+ * user-settings infrastructure, not Tailscale-specific plumbing, and this
+ * plugin's frontend calls them the same way core code does.
+ */
+
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+/**
+ * Loads a module by its path relative to this file's own directory.
+ *
+ * The plugin ships beside dist/backend, so in a built server the compiled
+ * .js for routes.js sits right next to this .mjs. Under vitest/dev nothing
+ * imports this plugin directly (the loader loads in-process plugins with a
+ * plain dynamic import, no tsx loader involved), so the only layout that
+ * needs to resolve here is the built one.
+ */
+async function loadRelative(relativePath) {
+  const here = path.dirname(fileURLToPath(import.meta.url));
+  const target = path.join(here, `${relativePath}.js`);
+  return import(new URL(`file://${target.replace(/\\/g, "/")}`).href);
+}
+
+let routesModule = null;
+
+export async function activate(ctx) {
+  routesModule = await loadRelative("routes");
+  routesModule.startTailscaleService();
+  ctx.log.info("Tailscale router registered at /tailscale");
+}
+
+export async function deactivate() {
+  if (routesModule) {
+    routesModule.stopTailscaleService();
+    routesModule = null;
+  }
+}

plugins/tailscale/backend/routes.ts

@@ -0,0 +1,142 @@
+// Was src/backend/database/routes/tailscale-routes.ts, moved here and
+// rewritten to register itself via the shared /tailscale dispatcher
+// (src/backend/database/routes/tailscale-dispatch.ts) instead of taking a
+// direct reference to the app instance, the same way fleets does.
+
+import { Router } from "express";
+import { AuthManager } from "../../../src/backend/utils/auth-manager.js";
+import { apiLogger } from "../../../src/backend/utils/logger.js";
+import { fetchWithProxy } from "../../../src/backend/utils/proxy-agent.js";
+import { createCurrentSettingsRepository } from "../../../src/backend/database/repositories/factory.js";
+import {
+  registerTailscaleRouter,
+  unregisterTailscaleRouter,
+} from "../../../src/backend/database/routes/tailscale-dispatch.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";
+
+export const router = Router();
+
+const authManager = AuthManager.getInstance();
+const authenticateJWT = authManager.createAuthMiddleware();
+
+function normalizeApiBase(raw: string | null): string {
+  const trimmed = (raw ?? "").trim().replace(/\/+$/, "");
+  return trimmed || DEFAULT_TAILSCALE_API_BASE;
+}
+
+/**
+ * @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,
+    });
+  }
+});
+
+/** Called from activate(). Mounts this router at /tailscale via the shared
+ * dispatcher. */
+export function startTailscaleService(): void {
+  registerTailscaleRouter(router);
+}
+
+/** Called from deactivate(). /tailscale/* falls back to 404 until
+ * reactivated. */
+export function stopTailscaleService(): void {
+  unregisterTailscaleRouter();
+}

plugins/tailscale/frontend/AdminTailscaleSection.tsx

@@ -0,0 +1,93 @@
+import type { Dispatch, SetStateAction } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/button";
+import { Input } from "@/components/input";
+import { Network } from "lucide-react";
+import { AccordionSection } from "@/sidebar/AdminSettingsShared";
+
+// Was inline in AdminGeneralSettingsSection (src/ui/sidebar/AdminSettingsSections.tsx),
+// moved here into its own accordion section as part of the Tailscale plugin.
+// The backing routes (GET/PATCH /users/tailscale-settings) stay in core -
+// they are general user-settings infrastructure this plugin calls, not
+// something it owns.
+
+type AdminTailscaleSectionProps = {
+  open: boolean;
+  onToggle: () => void;
+  tailscaleApiKey: string;
+  setTailscaleApiKey: Dispatch<SetStateAction<string>>;
+  tailscaleApiBaseUrl: string;
+  setTailscaleApiBaseUrl: Dispatch<SetStateAction<string>>;
+  handleSaveTailscaleApiKey: () => void;
+};
+
+export function AdminTailscaleSection({
+  open,
+  onToggle,
+  tailscaleApiKey,
+  setTailscaleApiKey,
+  tailscaleApiBaseUrl,
+  setTailscaleApiBaseUrl,
+  handleSaveTailscaleApiKey,
+}: AdminTailscaleSectionProps) {
+  const { t } = useTranslation();
+
+  return (
+    <AccordionSection
+      label={t("admin.sectionTailscale")}
+      icon={<Network className="size-3.5" />}
+      open={open}
+      onToggle={onToggle}
+    >
+      <div className="flex flex-col gap-2 pt-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>
+    </AccordionSection>
+  );
+}

plugins/tailscale/frontend/TailscaleDevicesPanel.tsx

@@ -0,0 +1,160 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Loader2, RefreshCw, Terminal } from "lucide-react";
+import { Button } from "@/components/button";
+import { Input } from "@/components/input";
+import type { Host } from "@/types/ui-types";
+import { getTailscaleDevices } from "./tailscale-api";
+import { createQuickConnectHost } from "../../../src/ui/sidebar/quick-connect-host";
+
+interface TailscaleDevice {
+  id: string;
+  name: string;
+  hostname: string;
+  addresses: string[];
+  os: string;
+  lastSeen: string;
+}
+
+interface TailscaleDevicesPanelProps {
+  onConnect: (host: Host, type: "terminal") => void;
+}
+
+function deviceIp(device: TailscaleDevice): string {
+  return (
+    device.addresses.find((a) => a.startsWith("100.")) ??
+    device.addresses[0] ??
+    ""
+  );
+}
+
+export function TailscaleDevicesPanel({
+  onConnect,
+}: TailscaleDevicesPanelProps) {
+  const { t } = useTranslation();
+  const [devices, setDevices] = useState<TailscaleDevice[]>([]);
+  const [hasApiKey, setHasApiKey] = useState(true);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [usernames, setUsernames] = useState<Record<string, string>>({});
+
+  function load() {
+    setLoading(true);
+    setError(false);
+    getTailscaleDevices()
+      .then((res) => {
+        setDevices(res.devices);
+        setHasApiKey(res.hasApiKey);
+      })
+      .catch(() => setError(true))
+      .finally(() => setLoading(false));
+  }
+
+  useEffect(load, []);
+
+  function connect(device: TailscaleDevice) {
+    const ip = deviceIp(device);
+    if (!ip) return;
+    const username = usernames[device.id]?.trim() || "root";
+    const host = createQuickConnectHost({
+      ip,
+      port: 22,
+      username,
+      authType: "tailscale",
+    });
+    onConnect(host, "terminal");
+  }
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0 overflow-y-auto">
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+        <span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+          {t("nav.tailscale")}
+        </span>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-6 text-muted-foreground hover:text-foreground"
+          onClick={load}
+          disabled={loading}
+        >
+          <RefreshCw className={`size-3 ${loading ? "animate-spin" : ""}`} />
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-2 p-3">
+        {loading && (
+          <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
+            <Loader2 className="size-3.5 animate-spin" />
+            {t("hosts.tailscaleLoadingDevices")}
+          </div>
+        )}
+
+        {!loading && !hasApiKey && (
+          <p className="text-[10px] text-muted-foreground">
+            {t("hosts.tailscaleNoApiKey")}
+          </p>
+        )}
+
+        {!loading && hasApiKey && error && (
+          <p className="text-[10px] text-muted-foreground">
+            {t("hosts.tailscaleDeviceLoadFailed")}
+          </p>
+        )}
+
+        {!loading && hasApiKey && !error && devices.length === 0 && (
+          <p className="text-[10px] text-muted-foreground">
+            {t("hosts.tailscaleNoDevices")}
+          </p>
+        )}
+
+        {!loading &&
+          hasApiKey &&
+          !error &&
+          devices.map((device) => {
+            const ip = deviceIp(device);
+            return (
+              <div
+                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">
+                    {device.hostname || device.name}
+                  </span>
+                  <span className="text-[10px] text-muted-foreground">
+                    {ip} {device.os ? `· ${device.os}` : ""}
+                  </span>
+                </div>
+                <Input
+                  placeholder={t("newUi.sidebar.quickConnect.usernameLabel")}
+                  value={usernames[device.id] ?? "root"}
+                  onChange={(e) =>
+                    setUsernames((prev) => ({
+                      ...prev,
+                      [device.id]: e.target.value,
+                    }))
+                  }
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") connect(device);
+                  }}
+                  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>
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+export default TailscaleDevicesPanel;

plugins/tailscale/frontend/index.mjs

@@ -0,0 +1,40 @@
+/**
+ * Frontend half of the tailscale plugin.
+ *
+ * TailscaleDevicesPanel is a left-sidebar railView panel (opened from the
+ * rail, not a Tab), the same shape as FleetsPanel/QuickConnectPanel. None of
+ * those go through registerRailItem/registerTabComponent either -- per
+ * src/ui/shell/pluginLoader.ts's own comment, a rail-view panel like this is
+ * rendered directly by AppShell.tsx rather than registered at runtime.
+ * TailscaleDevicesPanel is reached today through a direct relative import in
+ * AppShell.tsx (../../plugins/tailscale/frontend/TailscaleDevicesPanel), not
+ * through register() below.
+ *
+ * register()/unregister() still follow the same shape every other plugin's
+ * frontend entry does, so this is ready the moment a real frontend plugin
+ * loader exists -- see plugins/ssh-terminal/frontend/index.mjs and
+ * src/ui/tests/sidebar/plugin-extension-seam.test.tsx, which says outright
+ * "there is no plugin loader yet".
+ *
+ * TailscaleCheckDialog is not registered here at all: it is rendered
+ * directly by src/ui/features/terminal/Terminal.tsx (owned by ssh-terminal),
+ * driven by raw WS message types on the terminal socket. There is no
+ * dialog-registration extension point for that today, so this plugin ships
+ * the component as a plain module ssh-terminal imports by path.
+ */
+
+export const id = "tailscale";
+export const railViewId = "tailscale";
+
+export async function register({ registerRailItem, icons }) {
+  registerRailItem?.({
+    id: railViewId,
+    icon: icons.Radar,
+    labelKey: "nav.tailscale",
+    separatorAfter: true,
+  });
+}
+
+export async function unregister({ unregisterRailItem }) {
+  unregisterRailItem?.(railViewId);
+}

plugins/tailscale/frontend/tailscale-api.ts

@@ -0,0 +1,71 @@
+// Was part of src/ui/api/settings-api.ts, moved here with the rest of the
+// Tailscale plugin. The backing routes stay in place: /users/tailscale-settings
+// is general user-settings infrastructure in core, and /tailscale/devices is
+// this plugin's own route (plugins/tailscale/backend/routes.ts).
+
+import axios from "axios";
+import { authApi, handleApiError } from "@/main-axios";
+
+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;
+  }
+}

plugins/tailscale/manifest.json

@@ -0,0 +1,20 @@
+{
+  "id": "tailscale",
+  "name": "Tailscale",
+  "version": "1.0.0",
+  "description": "Browse and connect to tailnet devices, manage the Tailscale API key, and show the Tailscale SSH re-authentication dialog.",
+  "author": { "name": "Termix" },
+  "license": "MIT",
+  "repository": "https://github.com/Termix-SSH/Termix",
+  "category": "Networking",
+  "icon": "Network",
+  "engine": { "termix": ">=2.9.0", "api": "1" },
+  "capabilities": {
+    "backend": true,
+    "frontend": true,
+    "electron": true,
+    "platforms": ["linux", "win32", "darwin"]
+  },
+  "permissions": ["process:transport-owner"],
+  "sidecars": []
+}

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/device API wrappers moved to
-// TAILSCALE SETTINGS
+// plugins/tailscale/frontend/tailscale-api.ts.
-// ============================================================================
-
-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;
-  }
-}
 
 // ============================================================================
 // 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/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",