feat: give plugins their own settings and one settings screen

plugins/tailscale/src/backend/index.ts

@@ -2,7 +2,7 @@ import type { PluginContext } from "@termix/plugin-sdk/backend";
 import { startTailscaleService, stopTailscaleService } from "./routes.js";
 
 export async function activate(ctx: PluginContext) {
-  startTailscaleService(ctx.http.router());
+  startTailscaleService(ctx.http.router(), ctx);
   ctx.log.info("Tailscale routes mounted at /plugin-api/tailscale");
 }
 

plugins/tailscale/src/backend/routes.ts

@@ -8,7 +8,7 @@ import { AuthManager } from "../../../../src/backend/utils/auth-manager.js";
 import { PermissionManager } from "../../../../src/backend/utils/permission-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 type { PluginContext } from "@termix/plugin-sdk/backend";
 
 interface TailscaleDevice {
   id: string;
@@ -33,6 +33,12 @@ const DEFAULT_TAILSCALE_API_BASE = "https://api.tailscale.com/api/v2";
 
 export const router = Router();
 
+/**
+ * Set by activate(). The API key and base URL are this plugin's own settings
+ * now, read through ctx rather than out of the core settings table.
+ */
+let context: PluginContext | null = null;
+
 const authManager = AuthManager.getInstance();
 const authenticateJWT = authManager.createAuthMiddleware();
 
@@ -85,13 +91,17 @@ router.get(
   requireDeviceAccess,
   async (_req, res) => {
     try {
-      const settingsRepo = createCurrentSettingsRepository();
-      const apiKey = (await settingsRepo.get("tailscale_api_key")) ?? "";
+      if (!context) {
+        return res
+          .status(503)
+          .json({ error: "Plugin is not running", devices: [] });
+      }
+      const apiKey = (await context.settings.get<string>("apiKey")) ?? "";
       if (!apiKey) {
         return res.json({ devices: [], hasApiKey: false });
       }
       const apiBase = normalizeApiBase(
-        await settingsRepo.get("tailscale_api_base_url"),
+        (await context.settings.get<string>("apiBaseUrl")) ?? null,
       );
 
       const url = `${apiBase}/tailnet/-/devices?fields=all`;
@@ -148,12 +158,18 @@ router.get(
 
 /** Called from activate(). Mounts this router at /tailscale via the shared
  * dispatcher. */
-export function startTailscaleService(mountOn: Router): void {
+export function startTailscaleService(
+  mountOn: Router,
+  ctx: PluginContext,
+): void {
+  context = ctx;
   mountOn.use(router);
 }
 
 /** Called from deactivate(). /tailscale/* falls back to 404 until
  * reactivated. */
 export function stopTailscaleService(): void {
-  // Unmounted by the runtime when the plugin deactivates.
+  // Dropped so a request arriving mid-teardown cannot read settings through a
+  // context the runtime has already torn down.
+  context = null;
 }

plugins/tailscale/src/frontend/AdminTailscaleSection.tsx

@@ -1,93 +0,0 @@
-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/src/frontend/tailscale-api.ts

@@ -1,39 +1,11 @@
-// 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).
+// The API key and base URL are this plugin's own settings now, read and
+// written through the generic /plugins/tailscale/settings/admin routes that
+// core renders from the manifest. Only the device list is left here, because
+// it is this plugin's own route.
 
 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;