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/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",