feat: finish the tailscale plugin, including SSH auth (B3)

plugins/tailscale/src/frontend/TailscaleManagerCard.tsx

@@ -0,0 +1,164 @@
+import { useState } from "react";
+import { Power } from "lucide-react";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import { useTailscaleData, useTailscaleAction } from "./useTailscaleManager";
+import {
+  TailscaleManagerShell,
+  TailscaleManagerSearch,
+} from "./TailscaleManagerShell";
+
+interface TailscalePeer {
+  hostname: string;
+  tailscaleIPs: string[];
+  online: boolean;
+  isExitNode: boolean;
+}
+
+interface TailscaleData {
+  installed: boolean;
+  running: boolean;
+  tailscaleIPs: string[];
+  hostname: string | null;
+  peers: TailscalePeer[];
+  exitNodeInUse: boolean;
+}
+
+export function TailscaleManagerCard({ hostId }: { hostId: number | null }) {
+  const { t } = useTranslation();
+  const { data, loading, error, refresh } =
+    useTailscaleData<TailscaleData>(hostId);
+  const { busy, run } = useTailscaleAction(hostId);
+  const [query, setQuery] = useState("");
+
+  const handleToggle = async () => {
+    if (!data) return;
+    const action = data.running ? "down" : "up";
+    await run(action, {
+      loadingMsg: data.running
+        ? t("manager.tsDisabling")
+        : t("manager.tsEnabling"),
+      successMsg: data.running
+        ? t("manager.tsDisabled")
+        : t("manager.tsEnabled"),
+      onDone: refresh,
+    });
+  };
+
+  const filteredPeers = (data?.peers ?? []).filter(
+    (p) =>
+      !query ||
+      p.hostname.toLowerCase().includes(query.toLowerCase()) ||
+      p.tailscaleIPs.some((ip) => ip.includes(query)),
+  );
+
+  const isNotInstalled = data && !data.installed;
+
+  return (
+    <TailscaleManagerShell
+      title={t("manager.title")}
+      icon={<Power className="size-3.5" />}
+      loading={loading}
+      error={error}
+      onRefresh={refresh}
+      empty={!!isNotInstalled}
+      emptyMessage={t("manager.tsNotInstalled")}
+    >
+      {data && (
+        <div className="flex flex-col">
+          {/* Status + toggle row */}
+          <div className="flex items-center justify-between border-b border-border/50 py-1.5">
+            <div className="flex min-w-0 items-center gap-2">
+              <span
+                className={`size-1.5 shrink-0 rounded-full ${data.running ? "bg-accent-brand" : "bg-muted-foreground/40"}`}
+              />
+              <div className="flex min-w-0 flex-col">
+                <span className="text-xs font-semibold">
+                  {data.running
+                    ? t("manager.tsRunning")
+                    : t("manager.tsStopped")}
+                </span>
+                {data.hostname && (
+                  <span className="truncate font-mono text-[10px] text-muted-foreground">
+                    {data.hostname}
+                  </span>
+                )}
+                {data.tailscaleIPs.map((ip) => (
+                  <span
+                    key={ip}
+                    className="truncate font-mono text-[10px] text-muted-foreground/60"
+                  >
+                    {ip}
+                  </span>
+                ))}
+              </div>
+            </div>
+            <div className="flex shrink-0 items-center">
+              <button
+                onClick={handleToggle}
+                disabled={busy || !data.installed}
+                title={
+                  data.running ? t("manager.tsDisable") : t("manager.tsEnable")
+                }
+                className={`flex size-6 items-center justify-center transition-colors disabled:opacity-40 ${
+                  data.running
+                    ? "text-accent-brand hover:bg-muted hover:text-destructive"
+                    : "text-muted-foreground hover:bg-muted hover:text-accent-brand"
+                }`}
+              >
+                <Power className="size-3.5" />
+              </button>
+            </div>
+          </div>
+
+          {/* Exit node badge */}
+          {data.exitNodeInUse && (
+            <div className="border-b border-border/50 px-0 py-1.5">
+              <span className="text-[10px] text-blue-500">
+                {t("manager.tsExitNodeActive")}
+              </span>
+            </div>
+          )}
+
+          {/* Peers */}
+          {(data.peers?.length ?? 0) > 5 && (
+            <TailscaleManagerSearch
+              value={query}
+              onChange={setQuery}
+              count={filteredPeers.length}
+            />
+          )}
+          {filteredPeers.map((peer) => (
+            <div
+              key={peer.hostname}
+              className="flex items-center justify-between gap-2 border-b border-border/50 py-1.5 last:border-0"
+            >
+              <div className="flex min-w-0 items-center gap-2">
+                <span
+                  className={`size-1.5 shrink-0 rounded-full ${peer.online ? "bg-accent-brand" : "bg-muted-foreground/40"}`}
+                />
+                <div className="flex min-w-0 flex-col">
+                  <span className="truncate text-xs font-semibold">
+                    {peer.hostname}
+                  </span>
+                  {peer.tailscaleIPs.map((ip) => (
+                    <span
+                      key={ip}
+                      className="truncate font-mono text-[10px] text-muted-foreground"
+                    >
+                      {ip}
+                    </span>
+                  ))}
+                </div>
+              </div>
+              {peer.isExitNode && (
+                <span className="shrink-0 text-[10px] text-blue-500">
+                  {t("manager.tsExitNode")}
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </TailscaleManagerShell>
+  );
+}

plugins/tailscale/src/frontend/TailscaleManagerShell.tsx

@@ -0,0 +1,110 @@
+import type { ReactNode } from "react";
+import { RefreshCw, AlertTriangle, Search } from "lucide-react";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import { Button } from "@/components/button";
+import { MetricCard } from "@/components/metric-card";
+import type { ManagerError } from "./useTailscaleManager";
+
+/**
+ * Local copy of host-metrics' ManagerCardShell, kept in step with it by eye.
+ * A shared component belongs in the SDK once a second plugin needs it.
+ */
+export function TailscaleManagerShell({
+  title,
+  icon,
+  loading,
+  error,
+  onRefresh,
+  empty,
+  emptyMessage,
+  children,
+  headerExtra,
+}: {
+  title: string;
+  icon: ReactNode;
+  loading: boolean;
+  error: ManagerError | null;
+  onRefresh: () => void;
+  empty?: boolean;
+  emptyMessage?: string;
+  children: ReactNode;
+  headerExtra?: ReactNode;
+}) {
+  const { t } = useTranslation();
+  return (
+    <MetricCard
+      title={title}
+      icon={icon}
+      scroll
+      action={
+        <div className="flex items-center gap-1">
+          {headerExtra}
+          <button
+            onClick={onRefresh}
+            className="flex size-6 items-center justify-center text-muted-foreground transition-colors hover:text-foreground"
+            title={t("manager.refresh")}
+          >
+            <RefreshCw className={`size-3 ${loading ? "animate-spin" : ""}`} />
+          </button>
+        </div>
+      }
+    >
+      {error ? (
+        <div className="flex flex-col items-center gap-2 py-6 text-center">
+          <AlertTriangle className="size-6 text-yellow-500" />
+          <span className="text-xs text-muted-foreground">{error.message}</span>
+          {error.code === "SUDO_REQUIRED" && (
+            <span className="text-[10px] text-muted-foreground">
+              {t("manager.sudoHint")}
+            </span>
+          )}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onRefresh}
+            className="mt-1"
+          >
+            {t("manager.retry")}
+          </Button>
+        </div>
+      ) : empty ? (
+        <div className="flex items-center justify-center py-8 text-xs text-muted-foreground/50">
+          {emptyMessage ?? t("manager.noData")}
+        </div>
+      ) : (
+        children
+      )}
+    </MetricCard>
+  );
+}
+
+/** Local copy of host-metrics' ManagerSearch. */
+export function TailscaleManagerSearch({
+  value,
+  onChange,
+  count,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  count?: number;
+}) {
+  const { t } = useTranslation();
+  return (
+    <div className="mb-2 flex items-center gap-1.5">
+      <div className="relative flex-1">
+        <Search className="pointer-events-none absolute left-2 top-1/2 size-3 -translate-y-1/2 text-muted-foreground/60" />
+        <input
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={t("manager.filter")}
+          className="h-7 w-full border border-border bg-background pl-7 pr-2 text-xs outline-none focus:ring-1 focus:ring-ring"
+        />
+      </div>
+      {count != null && (
+        <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground">
+          {count}
+        </span>
+      )}
+    </div>
+  );
+}

plugins/tailscale/src/frontend/index.tsx

@@ -6,6 +6,7 @@ import { TailscaleDevicesPanel } from "./TailscaleDevicesPanel";
 import { TailscaleDevicesStatus } from "./TailscaleDevicesStatus";
 import { TailscaleAuthEditor } from "./TailscaleAuthEditor";
 import { TailscaleCheckOverlay } from "./TailscaleCheckOverlay";
+import { TailscaleManagerCard } from "./TailscaleManagerCard";
 
 function Panel({ shell }: PanelProps) {
   return (
@@ -49,4 +50,14 @@ export function activate(app: TermixApp): void {
       Record<string, unknown>
     >,
   });
+
+  // The Host Metrics manager card, present only when host-metrics is running.
+  app.registerSlotContribution("host-metrics.managers", {
+    actionId: "tailscale_manager",
+    titleKey: "manager.title",
+    kind: "component",
+    component: TailscaleManagerCard as unknown as ComponentType<
+      Record<string, unknown>
+    >,
+  });
 }

plugins/tailscale/src/frontend/useTailscaleManager.ts

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { usePluginApi } from "@termix/plugin-sdk/frontend";
+
+export interface ManagerError {
+  message: string;
+  code?: string;
+}
+
+function extractError(err: unknown): ManagerError {
+  const e = err as {
+    response?: { data?: { error?: string; code?: string } };
+    message?: string;
+  };
+  return {
+    message: e?.response?.data?.error || e?.message || "Request failed",
+    code: e?.response?.data?.code,
+  };
+}
+
+/** Fetch the Tailscale manager card's status on mount + manual refresh. */
+export function useTailscaleData<T>(hostId: number | null) {
+  const api = usePluginApi();
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<ManagerError | null>(null);
+
+  const refresh = useCallback(async () => {
+    if (hostId == null) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await api.get<T>(`/host-metrics-manager/${hostId}`);
+      setData(res.data);
+    } catch (err) {
+      setError(extractError(err));
+    } finally {
+      setLoading(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hostId]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return { data, loading, error, refresh };
+}
+
+interface ActionResult {
+  success: boolean;
+  output?: string;
+}
+
+/** Runs the Tailscale manager card's up/down action with toast feedback. */
+export function useTailscaleAction(hostId: number | null) {
+  const api = usePluginApi();
+  const [busy, setBusy] = useState(false);
+
+  const run = useCallback(
+    async (
+      action: "up" | "down",
+      opts: {
+        loadingMsg?: string;
+        successMsg?: string;
+        failMsg?: string;
+        onDone?: () => void;
+      } = {},
+    ): Promise<ActionResult | null> => {
+      if (hostId == null) return null;
+      const id = `tailscale-manager-${hostId}`;
+      setBusy(true);
+      if (opts.loadingMsg) toast.loading(opts.loadingMsg, { id });
+      try {
+        const res = await api.post<ActionResult>(
+          `/host-metrics-manager/${hostId}/action`,
+          { action },
+        );
+        if (res.data.success) {
+          if (opts.successMsg)
+            toast.success(opts.successMsg, {
+              id,
+              description: res.data.output?.slice(-200),
+            });
+          else toast.dismiss(id);
+          opts.onDone?.();
+        } else {
+          toast.error(opts.failMsg ?? res.data.output ?? "Action failed", {
+            id,
+            description: res.data.output?.slice(-200),
+          });
+        }
+        return res.data;
+      } catch (err) {
+        toast.error(extractError(err).message, { id });
+        return null;
+      } finally {
+        setBusy(false);
+      }
+    },
+    [hostId],
+  );
+
+  return { busy, run };
+}