Move Tailscale, Semaphore, and Gitea to their own top-level pages

Same move as Docker: each was buried inside the generic Integrations
browsing view, sharing one "pick any integration" dropdown across six
unrelated types. Give them dedicated pages instead.

New web/src/pages/{Tailscale,Semaphore,Gitea}.tsx each reuse the
existing, unchanged API routes and adapters (no server changes) with
their own integration picker scoped to just that type. Added matching
nav items (Tailscale, Semaphore, Gitea, right after Docker) and routes.

Removed the corresponding state/handlers/tables from Integrations.tsx
entirely (374 lines). Adding, editing, enabling/disabling, and
deleting each credential itself still happens under Integrations ->
Manage integrations, same as Proxmox and Synology, which stay on the
Integrations page. Selecting one of these three types in Integrations'
generic browsing dropdown now points to its new page instead of
rendering a table there too.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

README.md

@@ -34,20 +34,25 @@ All modules from the original plan are built:
   Proxmox for VM/LXC-backed servers, or from the agent's own hardware
   report for everything else. Proxmox-linked servers also get
   start/stop/restart buttons right on the detail page.
-- **Integrations → Tailscale** — device list with online/authorized status,
-  and authorize/deauthorize/remove actions; a live device-count widget.
-- **Integrations → Gitea** — repo list with each repo's last CI run status,
-  and re-running just the failed jobs in a run; a live repo-count widget
-  (with a failing-build warning).
-- **Docker** (its own top-level page, backed by the Dockhand
-  integration) — container status across every Docker host Dockhand
-  manages (one credential covers all of them), with start/stop/restart
-  actions and a live running/total widget. Add/edit/remove the
-  Dockhand credential itself under Integrations → Manage integrations
-  as with every other integration.
-- **Integrations → Semaphore** — Ansible run status per template across
-  every project, with a "Run" action to trigger a template; a live
+- **Tailscale**, **Semaphore**, **Gitea**, and **Docker** each get their
+  own top-level page (backed by the matching integration) instead of
+  living inside a shared Integrations browsing view:
+  - **Tailscale** — device list with online/authorized status, and
+    authorize/deauthorize/remove actions; a live device-count widget.
+  - **Semaphore** — Ansible run status per template across every
+    project, with a "Run" action to trigger a template; a live
     template-count widget (with a last-failed warning).
+  - **Gitea** — repo list with each repo's last CI run status, and
+    re-running just the failed jobs in a run; a live repo-count widget
+    (with a failing-build warning).
+  - **Docker** — container status across every Docker host Dockhand
+    manages (one credential covers all of them), with
+    start/stop/restart actions, a host filter, and a live
+    running/total widget.
+
+  Add/edit/enable/disable/remove each integration's credential itself
+  under Integrations → Manage integrations, same as Proxmox and
+  Synology (which stay on the Integrations page).
 - **Integrations → Proxmox** — VM/LXC status across every node in the
   cluster, with start/stop/restart actions; a live running/total widget.
   Supports self-signed certificates (common in homelab Proxmox setups).

web/src/App.tsx

@@ -12,6 +12,9 @@ import ServersTasks from "./pages/ServersTasks";
 import ServerDetail from "./pages/ServerDetail";
 import Integrations from "./pages/Integrations";
 import Docker from "./pages/Docker";
+import Tailscale from "./pages/Tailscale";
+import Semaphore from "./pages/Semaphore";
+import Gitea from "./pages/Gitea";
 import Settings from "./pages/Settings";
 import NotificationSettings from "./pages/settings/NotificationSettings";
 import BadgeSettings from "./pages/settings/BadgeSettings";
@@ -74,6 +77,9 @@ export default function App() {
         <Route path="/secrets" element={<Secrets user={user} />} />
         <Route path="/integrations" element={<Integrations user={user} />} />
         <Route path="/docker" element={<Docker user={user} />} />
+        <Route path="/tailscale" element={<Tailscale user={user} />} />
+        <Route path="/semaphore" element={<Semaphore user={user} />} />
+        <Route path="/gitea" element={<Gitea user={user} />} />
         <Route
           path="/users"
           element={

web/src/layout/AppShell.tsx

@@ -8,6 +8,9 @@ import {
   IconKey,
   IconPlugConnected,
   IconBrandDocker,
+  IconAffiliate,
+  IconPlayerPlay,
+  IconBrandGit,
   IconUsers,
   IconHistory,
   IconSettings,
@@ -30,6 +33,9 @@ const NAV_ITEMS: NavItem[] = [
   { to: "/secrets", label: "Secrets", icon: <IconKey size={20} /> },
   { to: "/integrations", label: "Integrations", icon: <IconPlugConnected size={20} /> },
   { to: "/docker", label: "Docker", icon: <IconBrandDocker size={20} /> },
+  { to: "/tailscale", label: "Tailscale", icon: <IconAffiliate size={20} /> },
+  { to: "/semaphore", label: "Semaphore", icon: <IconPlayerPlay size={20} /> },
+  { to: "/gitea", label: "Gitea", icon: <IconBrandGit size={20} /> },
   { to: "/users", label: "Users", icon: <IconUsers size={20} />, minRole: "admin" },
   { to: "/audit-log", label: "Audit Log", icon: <IconHistory size={20} />, minRole: "operator" },
   { to: "/settings", label: "Settings", icon: <IconSettings size={20} />, minRole: "admin" },

web/src/pages/Gitea.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { api, type CurrentUser, type GiteaRepo, type IntegrationSummary } from "../api/client";
+
+function runStatusBadge(repo: GiteaRepo) {
+  const run = repo.latestRun;
+  if (!run) return <span className="badge bg-secondary-lt text-secondary">No runs</span>;
+  const state = run.conclusion || run.status;
+  switch (state) {
+    case "success":
+      return <span className="badge bg-green-lt text-green">Success</span>;
+    case "failure":
+      return <span className="badge bg-red-lt text-red">Failed</span>;
+    case "cancelled":
+      return <span className="badge bg-secondary-lt text-secondary">Cancelled</span>;
+    case "skipped":
+      return <span className="badge bg-secondary-lt text-secondary">Skipped</span>;
+    case "waiting":
+    case "queued":
+    case "pending":
+      return <span className="badge bg-yellow-lt text-yellow">Queued</span>;
+    case "running":
+    case "in_progress":
+      return <span className="badge bg-blue-lt text-blue">Running</span>;
+    default:
+      return <span className="badge bg-secondary-lt text-secondary">{state}</span>;
+  }
+}
+
+export default function Gitea({ user }: { user: CurrentUser }) {
+  const canEdit = user.role === "admin" || user.role === "operator";
+
+  const [integrations, setIntegrations] = useState<IntegrationSummary[] | null>(null);
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const [repos, setRepos] = useState<GiteaRepo[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [rerunningRun, setRerunningRun] = useState<number | null>(null);
+
+  useEffect(() => {
+    api.integrations
+      .list()
+      .then((res) => {
+        const giteaIntegrations = res.integrations.filter((i) => i.type === "gitea");
+        setIntegrations(giteaIntegrations);
+        if (!selectedId && giteaIntegrations.length > 0) setSelectedId(giteaIntegrations[0].id);
+      })
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const selected = integrations?.find((i) => i.id === selectedId) ?? null;
+
+  function loadRepos(id: number) {
+    setLoading(true);
+    setError(null);
+    api.integrations.gitea
+      .repos(id)
+      .then((res) => setRepos(res.repos))
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)))
+      .finally(() => setLoading(false));
+  }
+
+  useEffect(() => {
+    if (selected?.enabled) {
+      loadRepos(selected.id);
+    } else {
+      setRepos(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedId]);
+
+  async function rerunFailed(repo: GiteaRepo) {
+    if (!selectedId || !repo.latestRun) return;
+    setRerunningRun(repo.latestRun.id);
+    setError(null);
+    try {
+      await api.integrations.gitea.rerunFailed(selectedId, repo.owner, repo.name, repo.latestRun.id);
+      loadRepos(selectedId);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setRerunningRun(null);
+    }
+  }
+
+  return (
+    <>
+      <h2 className="page-title mb-3">Gitea</h2>
+      {error && <div className="alert alert-danger">{error}</div>}
+
+      {integrations?.length === 0 ? (
+        <div className="card">
+          <div className="card-body text-secondary">
+            No Gitea integration configured yet. <Link to="/integrations">Add one under Integrations</Link>.
+          </div>
+        </div>
+      ) : (
+        <>
+          {integrations && integrations.length > 1 && (
+            <div className="mb-3" style={{ maxWidth: 320 }}>
+              <select
+                className="form-select"
+                value={selectedId ?? ""}
+                onChange={(e) => setSelectedId(Number(e.target.value))}
+              >
+                {integrations.map((i) => (
+                  <option key={i.id} value={i.id} disabled={!i.enabled}>
+                    {i.name}
+                    {!i.enabled ? " — disabled" : ""}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          {selected && !selected.enabled ? (
+            <div className="card">
+              <div className="card-body text-secondary">
+                "{selected.name}" is disabled. Enable it under Integrations → Manage integrations to see its
+                repositories.
+              </div>
+            </div>
+          ) : (
+            <div className="card">
+              <div className="card-header">
+                <h3 className="card-title">Repositories</h3>
+                <div className="card-actions">
+                  <button
+                    className="btn btn-sm btn-outline-secondary"
+                    onClick={() => selected && loadRepos(selected.id)}
+                    disabled={loading}
+                  >
+                    {loading ? "Refreshing…" : "Refresh"}
+                  </button>
+                </div>
+              </div>
+              <div className="table-responsive">
+                <table className="table table-vcenter card-table">
+                  <thead>
+                    <tr>
+                      <th>Repository</th>
+                      <th>Last run</th>
+                      <th>Branch</th>
+                      <th>Status</th>
+                      {canEdit && <th className="w-1">Actions</th>}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {repos?.map((r) => (
+                      <tr key={r.fullName}>
+                        <td>
+                          <a href={r.htmlUrl} target="_blank" rel="noopener noreferrer">
+                            {r.fullName}
+                          </a>
+                          {r.private && <span className="badge bg-secondary-lt ms-2">Private</span>}
+                        </td>
+                        <td className="text-secondary">
+                          {r.latestRun ? (
+                            <a href={r.latestRun.htmlUrl} target="_blank" rel="noopener noreferrer">
+                              #{r.latestRun.runNumber} {r.latestRun.displayTitle}
+                            </a>
+                          ) : r.hasActions ? (
+                            "—"
+                          ) : (
+                            "Actions disabled"
+                          )}
+                        </td>
+                        <td className="text-secondary">{r.latestRun?.headBranch ?? "—"}</td>
+                        <td>{runStatusBadge(r)}</td>
+                        {canEdit && (
+                          <td>
+                            {r.latestRun && (r.latestRun.conclusion === "failure" || r.latestRun.status === "failure") && (
+                              <button
+                                className="btn btn-sm"
+                                onClick={() => rerunFailed(r)}
+                                disabled={rerunningRun === r.latestRun.id}
+                              >
+                                {rerunningRun === r.latestRun.id ? "Re-running…" : "Re-run failed"}
+                              </button>
+                            )}
+                          </td>
+                        )}
+                      </tr>
+                    ))}
+                    {repos?.length === 0 && (
+                      <tr>
+                        <td colSpan={canEdit ? 5 : 4} className="text-secondary text-center">
+                          No repositories visible to this token.
+                        </td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+}

web/src/pages/Integrations.tsx

@@ -3,16 +3,11 @@ import { Link } from "react-router-dom";
 import {
   api,
   type CurrentUser,
-  type GiteaRepo,
   type IntegrationSummary,
   type IntegrationType,
   type ProxmoxGuest,
   type ProxmoxGuestsResponse,
-  type SemaphoreTemplate,
-  type SemaphoreTemplatesResponse,
   type SynologyStorageResponse,
-  type TailscaleDevice,
-  type TailscaleDevicesResponse,
 } from "../api/client";
 import IntegrationForm from "../components/IntegrationForm";
 import IntegrationEditForm from "../components/IntegrationEditForm";
@@ -55,56 +50,6 @@ function formatUptime(seconds: number | null): string {
   return `${hours}h ${minutes}m`;
 }
 
-function semaphoreStatusBadge(template: SemaphoreTemplate) {
-  const status = template.lastTask?.status;
-  if (!status) return <span className="badge bg-secondary-lt text-secondary">Never run</span>;
-  switch (status) {
-    case "success":
-      return <span className="badge bg-green-lt text-green">Success</span>;
-    case "error":
-      return <span className="badge bg-red-lt text-red">Failed</span>;
-    case "stopped":
-      return <span className="badge bg-secondary-lt text-secondary">Stopped</span>;
-    case "rejected":
-      return <span className="badge bg-secondary-lt text-secondary">Rejected</span>;
-    case "waiting":
-    case "starting":
-    case "waiting_confirmation":
-    case "confirmed":
-      return <span className="badge bg-yellow-lt text-yellow">Queued</span>;
-    case "running":
-    case "stopping":
-      return <span className="badge bg-blue-lt text-blue">Running</span>;
-    default:
-      return <span className="badge bg-secondary-lt text-secondary">{status}</span>;
-  }
-}
-
-function runStatusBadge(repo: GiteaRepo) {
-  const run = repo.latestRun;
-  if (!run) return <span className="badge bg-secondary-lt text-secondary">No runs</span>;
-  const state = run.conclusion || run.status;
-  switch (state) {
-    case "success":
-      return <span className="badge bg-green-lt text-green">Success</span>;
-    case "failure":
-      return <span className="badge bg-red-lt text-red">Failed</span>;
-    case "cancelled":
-      return <span className="badge bg-secondary-lt text-secondary">Cancelled</span>;
-    case "skipped":
-      return <span className="badge bg-secondary-lt text-secondary">Skipped</span>;
-    case "waiting":
-    case "queued":
-    case "pending":
-      return <span className="badge bg-yellow-lt text-yellow">Queued</span>;
-    case "running":
-    case "in_progress":
-      return <span className="badge bg-blue-lt text-blue">Running</span>;
-    default:
-      return <span className="badge bg-secondary-lt text-secondary">{state}</span>;
-  }
-}
-
 const TYPE_LABELS: Record<IntegrationType, string> = {
   tailscale: "Tailscale",
   proxmox: "Proxmox",
@@ -135,20 +80,6 @@ export default function Integrations({ user }: { user: CurrentUser }) {
     api.settings.integrationColors().then((res) => setIntegrationColors(res.integrationColors)).catch(() => {});
   }, []);
 
-  const [tailscaleData, setTailscaleData] = useState<TailscaleDevicesResponse | null>(null);
-  const [tailscaleError, setTailscaleError] = useState<string | null>(null);
-  const [loadingDevices, setLoadingDevices] = useState(false);
-
-  const [giteaRepos, setGiteaRepos] = useState<GiteaRepo[] | null>(null);
-  const [giteaError, setGiteaError] = useState<string | null>(null);
-  const [loadingRepos, setLoadingRepos] = useState(false);
-  const [rerunningRun, setRerunningRun] = useState<number | null>(null);
-
-  const [semaphoreData, setSemaphoreData] = useState<SemaphoreTemplatesResponse | null>(null);
-  const [semaphoreError, setSemaphoreError] = useState<string | null>(null);
-  const [loadingTemplates, setLoadingTemplates] = useState(false);
-  const [runningTemplate, setRunningTemplate] = useState<number | null>(null);
-
   const [proxmoxData, setProxmoxData] = useState<ProxmoxGuestsResponse | null>(null);
   const [proxmoxError, setProxmoxError] = useState<string | null>(null);
   const [loadingGuests, setLoadingGuests] = useState(false);
@@ -172,42 +103,7 @@ export default function Integrations({ user }: { user: CurrentUser }) {
 
   const selected = integrations?.find((i) => i.id === selectedId) ?? null;
 
-  function loadTailscaleDevices(id: number) {
-    setLoadingDevices(true);
-    setTailscaleError(null);
-    api.integrations.tailscale
-      .devices(id)
-      .then((res) => setTailscaleData(res))
-      .catch((err) => setTailscaleError(err instanceof Error ? err.message : String(err)))
-      .finally(() => setLoadingDevices(false));
-  }
-
-  function loadGiteaRepos(id: number) {
-    setLoadingRepos(true);
-    setGiteaError(null);
-    api.integrations.gitea
-      .repos(id)
-      .then((res) => setGiteaRepos(res.repos))
-      .catch((err) => setGiteaError(err instanceof Error ? err.message : String(err)))
-      .finally(() => setLoadingRepos(false));
-  }
-
   useEffect(() => {
-    if (selected?.type === "tailscale" && selected.enabled && !managing) {
-      loadTailscaleDevices(selected.id);
-    } else {
-      setTailscaleData(null);
-    }
-    if (selected?.type === "gitea" && selected.enabled && !managing) {
-      loadGiteaRepos(selected.id);
-    } else {
-      setGiteaRepos(null);
-    }
-    if (selected?.type === "semaphore" && selected.enabled && !managing) {
-      loadSemaphoreTemplates(selected.id);
-    } else {
-      setSemaphoreData(null);
-    }
     if (selected?.type === "proxmox" && selected.enabled && !managing) {
       loadProxmoxGuests(selected.id);
     } else {
@@ -231,16 +127,6 @@ export default function Integrations({ user }: { user: CurrentUser }) {
       .finally(() => setLoadingStorage(false));
   }
 
-  function loadSemaphoreTemplates(id: number) {
-    setLoadingTemplates(true);
-    setSemaphoreError(null);
-    api.integrations.semaphore
-      .templates(id)
-      .then((res) => setSemaphoreData(res))
-      .catch((err) => setSemaphoreError(err instanceof Error ? err.message : String(err)))
-      .finally(() => setLoadingTemplates(false));
-  }
-
   function loadProxmoxGuests(id: number) {
     setLoadingGuests(true);
     setProxmoxError(null);
@@ -271,56 +157,6 @@ export default function Integrations({ user }: { user: CurrentUser }) {
     }
   }
 
-  async function setDeviceAuthorized(device: TailscaleDevice, authorized: boolean) {
-    if (!selectedId) return;
-    try {
-      await api.integrations.tailscale.setAuthorized(selectedId, device.id, authorized);
-      loadTailscaleDevices(selectedId);
-    } catch (err) {
-      setTailscaleError(err instanceof Error ? err.message : String(err));
-    }
-  }
-
-  async function removeDevice(device: TailscaleDevice) {
-    if (!selectedId) return;
-    if (!confirm(`Remove device "${device.label || device.hostname}" from the tailnet?`)) return;
-    try {
-      await api.integrations.tailscale.remove(selectedId, device.id);
-      loadTailscaleDevices(selectedId);
-    } catch (err) {
-      setTailscaleError(err instanceof Error ? err.message : String(err));
-    }
-  }
-
-  async function rerunFailed(repo: GiteaRepo) {
-    if (!selectedId || !repo.latestRun) return;
-    setRerunningRun(repo.latestRun.id);
-    setGiteaError(null);
-    try {
-      await api.integrations.gitea.rerunFailed(selectedId, repo.owner, repo.name, repo.latestRun.id);
-      loadGiteaRepos(selectedId);
-    } catch (err) {
-      setGiteaError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setRerunningRun(null);
-    }
-  }
-
-  async function runTemplate(t: SemaphoreTemplate) {
-    if (!selectedId) return;
-    if (!confirm(`Run "${t.name}" now?`)) return;
-    setRunningTemplate(t.id);
-    setSemaphoreError(null);
-    try {
-      await api.integrations.semaphore.run(selectedId, t.projectId, t.id);
-      loadSemaphoreTemplates(selectedId);
-    } catch (err) {
-      setSemaphoreError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setRunningTemplate(null);
-    }
-  }
-
   async function guestAction(g: ProxmoxGuest, action: "start" | "stop" | "restart" | "shutdown") {
     if (!selectedId) return;
     if (action === "stop" && !confirm(`Stop ${g.type === "qemu" ? "VM" : "container"} "${g.name}" immediately? Use Shutdown instead for a graceful power-off.`))
@@ -450,218 +286,20 @@ export default function Integrations({ user }: { user: CurrentUser }) {
 
               {selected?.type === "tailscale" ? (
                 <div className="card">
-                  <div className="card-header">
-                    <h3 className="card-title">
-                      Devices
-                      {tailscaleData && (
-                        <span className="text-secondary fw-normal ms-2">
-                          {tailscaleData.summary.online}/{tailscaleData.summary.total} online
-                          {tailscaleData.summary.unauthorized > 0 && `, ${tailscaleData.summary.unauthorized} awaiting authorization`}
-                        </span>
-                      )}
-                    </h3>
-                    <div className="card-actions">
-                      <button className="btn btn-sm btn-outline-secondary" onClick={() => loadTailscaleDevices(selected.id)} disabled={loadingDevices}>
-                        {loadingDevices ? "Refreshing…" : "Refresh"}
-                      </button>
-                    </div>
-                  </div>
-                  {tailscaleError && <div className="alert alert-danger m-3 mb-0">{tailscaleError}</div>}
-                  <div className="table-responsive">
-                    <table className="table table-vcenter card-table">
-                      <thead>
-                        <tr>
-                          <th>Device</th>
-                          <th>Address</th>
-                          <th>OS</th>
-                          <th>Status</th>
-                          <th>Last seen</th>
-                          {canEdit && <th className="w-1">Actions</th>}
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {tailscaleData?.devices.map((d) => (
-                          <tr key={d.id}>
-                            <td>
-                              {d.label || d.hostname}
-                              {d.isExitNode && <span className="badge bg-purple-lt ms-2">Exit node</span>}
-                            </td>
-                            <td className="text-secondary">{d.primaryAddress}</td>
-                            <td>{d.os || "—"}</td>
-                            <td>
-                              {d.online ? (
-                                <span className="badge bg-green-lt text-green me-1">Online</span>
-                              ) : (
-                                <span className="badge bg-secondary-lt text-secondary me-1">Offline</span>
-                              )}
-                              {!d.authorized && <span className="badge bg-yellow-lt text-yellow">Unauthorized</span>}
-                            </td>
-                            <td className="text-secondary">{d.lastSeen ? formatDateTime(new Date(d.lastSeen)) : "—"}</td>
-                            {canEdit && (
-                              <td>
-                                <div className="btn-list flex-nowrap">
-                                  {d.authorized ? (
-                                    <button className="btn btn-sm" onClick={() => setDeviceAuthorized(d, false)}>
-                                      Deauthorize
-                                    </button>
-                                  ) : (
-                                    <button className="btn btn-sm btn-primary" onClick={() => setDeviceAuthorized(d, true)}>
-                                      Authorize
-                                    </button>
-                                  )}
-                                  <button className="btn btn-sm btn-outline-danger" onClick={() => removeDevice(d)}>
-                                    Remove
-                                  </button>
-                                </div>
-                              </td>
-                            )}
-                          </tr>
-                        ))}
-                        {tailscaleData?.devices.length === 0 && (
-                          <tr>
-                            <td colSpan={canEdit ? 6 : 5} className="text-secondary text-center">
-                              No devices in this tailnet.
-                            </td>
-                          </tr>
-                        )}
-                      </tbody>
-                    </table>
+                  <div className="card-body text-secondary">
+                    Manage this integration's devices on the <Link to="/tailscale">Tailscale</Link> page.
                   </div>
                 </div>
               ) : selected?.type === "gitea" ? (
                 <div className="card">
-                  <div className="card-header">
-                    <h3 className="card-title">Repositories</h3>
-                    <div className="card-actions">
-                      <button className="btn btn-sm btn-outline-secondary" onClick={() => loadGiteaRepos(selected.id)} disabled={loadingRepos}>
-                        {loadingRepos ? "Refreshing…" : "Refresh"}
-                      </button>
-                    </div>
-                  </div>
-                  {giteaError && <div className="alert alert-danger m-3 mb-0">{giteaError}</div>}
-                  <div className="table-responsive">
-                    <table className="table table-vcenter card-table">
-                      <thead>
-                        <tr>
-                          <th>Repository</th>
-                          <th>Last run</th>
-                          <th>Branch</th>
-                          <th>Status</th>
-                          {canEdit && <th className="w-1">Actions</th>}
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {giteaRepos?.map((r) => (
-                          <tr key={r.fullName}>
-                            <td>
-                              <a href={r.htmlUrl} target="_blank" rel="noopener noreferrer">
-                                {r.fullName}
-                              </a>
-                              {r.private && <span className="badge bg-secondary-lt ms-2">Private</span>}
-                            </td>
-                            <td className="text-secondary">
-                              {r.latestRun ? (
-                                <a href={r.latestRun.htmlUrl} target="_blank" rel="noopener noreferrer">
-                                  #{r.latestRun.runNumber} {r.latestRun.displayTitle}
-                                </a>
-                              ) : r.hasActions ? (
-                                "—"
-                              ) : (
-                                "Actions disabled"
-                              )}
-                            </td>
-                            <td className="text-secondary">{r.latestRun?.headBranch ?? "—"}</td>
-                            <td>{runStatusBadge(r)}</td>
-                            {canEdit && (
-                              <td>
-                                {r.latestRun && (r.latestRun.conclusion === "failure" || r.latestRun.status === "failure") && (
-                                  <button
-                                    className="btn btn-sm"
-                                    onClick={() => rerunFailed(r)}
-                                    disabled={rerunningRun === r.latestRun.id}
-                                  >
-                                    {rerunningRun === r.latestRun.id ? "Re-running…" : "Re-run failed"}
-                                  </button>
-                                )}
-                              </td>
-                            )}
-                          </tr>
-                        ))}
-                        {giteaRepos?.length === 0 && (
-                          <tr>
-                            <td colSpan={canEdit ? 5 : 4} className="text-secondary text-center">
-                              No repositories visible to this token.
-                            </td>
-                          </tr>
-                        )}
-                      </tbody>
-                    </table>
+                  <div className="card-body text-secondary">
+                    Manage this integration's repositories on the <Link to="/gitea">Gitea</Link> page.
                   </div>
                 </div>
               ) : selected?.type === "semaphore" ? (
                 <div className="card">
-                  <div className="card-header">
-                    <h3 className="card-title">
-                      Templates
-                      {semaphoreData && semaphoreData.summary.failing > 0 && (
-                        <span className="text-red fw-normal ms-2">{semaphoreData.summary.failing} failing</span>
-                      )}
-                    </h3>
-                    <div className="card-actions">
-                      <button
-                        className="btn btn-sm btn-outline-secondary"
-                        onClick={() => loadSemaphoreTemplates(selected.id)}
-                        disabled={loadingTemplates}
-                      >
-                        {loadingTemplates ? "Refreshing…" : "Refresh"}
-                      </button>
-                    </div>
-                  </div>
-                  {semaphoreError && <div className="alert alert-danger m-3 mb-0">{semaphoreError}</div>}
-                  <div className="table-responsive">
-                    <table className="table table-vcenter card-table">
-                      <thead>
-                        <tr>
-                          <th>Template</th>
-                          <th>Project</th>
-                          <th>Last run</th>
-                          <th>Status</th>
-                          {canEdit && <th className="w-1">Actions</th>}
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {semaphoreData?.templates.map((t) => (
-                          <tr key={`${t.projectId}:${t.id}`}>
-                            <td>{t.name}</td>
-                            <td className="text-secondary">{t.projectName}</td>
-                            <td className="text-secondary">
-                              {t.lastTask
-                                ? formatDateTime(new Date(t.lastTask.end ?? t.lastTask.start ?? t.lastTask.created ?? ""))
-                                : "—"}
-                            </td>
-                            <td>{semaphoreStatusBadge(t)}</td>
-                            {canEdit && (
-                              <td>
-                                <button
-                                  className="btn btn-sm btn-primary"
-                                  onClick={() => runTemplate(t)}
-                                  disabled={runningTemplate === t.id}
-                                >
-                                  {runningTemplate === t.id ? "Starting…" : "Run"}
-                                </button>
-                              </td>
-                            )}
-                          </tr>
-                        ))}
-                        {semaphoreData?.templates.length === 0 && (
-                          <tr>
-                            <td colSpan={canEdit ? 5 : 4} className="text-secondary text-center">
-                              No templates found across any project.
-                            </td>
-                          </tr>
-                        )}
-                      </tbody>
-                    </table>
+                  <div className="card-body text-secondary">
+                    Manage this integration's templates on the <Link to="/semaphore">Semaphore</Link> page.
                   </div>
                 </div>
               ) : selected?.type === "proxmox" ? (

web/src/pages/Semaphore.tsx

@@ -0,0 +1,204 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import {
+  api,
+  type CurrentUser,
+  type IntegrationSummary,
+  type SemaphoreTemplate,
+  type SemaphoreTemplatesResponse,
+} from "../api/client";
+import { formatDateTime } from "../utils/date";
+
+function semaphoreStatusBadge(template: SemaphoreTemplate) {
+  const status = template.lastTask?.status;
+  if (!status) return <span className="badge bg-secondary-lt text-secondary">Never run</span>;
+  switch (status) {
+    case "success":
+      return <span className="badge bg-green-lt text-green">Success</span>;
+    case "error":
+      return <span className="badge bg-red-lt text-red">Failed</span>;
+    case "stopped":
+      return <span className="badge bg-secondary-lt text-secondary">Stopped</span>;
+    case "rejected":
+      return <span className="badge bg-secondary-lt text-secondary">Rejected</span>;
+    case "waiting":
+    case "starting":
+    case "waiting_confirmation":
+    case "confirmed":
+      return <span className="badge bg-yellow-lt text-yellow">Queued</span>;
+    case "running":
+    case "stopping":
+      return <span className="badge bg-blue-lt text-blue">Running</span>;
+    default:
+      return <span className="badge bg-secondary-lt text-secondary">{status}</span>;
+  }
+}
+
+export default function Semaphore({ user }: { user: CurrentUser }) {
+  const canEdit = user.role === "admin" || user.role === "operator";
+
+  const [integrations, setIntegrations] = useState<IntegrationSummary[] | null>(null);
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const [data, setData] = useState<SemaphoreTemplatesResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [runningTemplate, setRunningTemplate] = useState<number | null>(null);
+
+  useEffect(() => {
+    api.integrations
+      .list()
+      .then((res) => {
+        const semaphoreIntegrations = res.integrations.filter((i) => i.type === "semaphore");
+        setIntegrations(semaphoreIntegrations);
+        if (!selectedId && semaphoreIntegrations.length > 0) setSelectedId(semaphoreIntegrations[0].id);
+      })
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const selected = integrations?.find((i) => i.id === selectedId) ?? null;
+
+  function loadTemplates(id: number) {
+    setLoading(true);
+    setError(null);
+    api.integrations.semaphore
+      .templates(id)
+      .then((res) => setData(res))
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)))
+      .finally(() => setLoading(false));
+  }
+
+  useEffect(() => {
+    if (selected?.enabled) {
+      loadTemplates(selected.id);
+    } else {
+      setData(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedId]);
+
+  async function runTemplate(t: SemaphoreTemplate) {
+    if (!selectedId) return;
+    if (!confirm(`Run "${t.name}" now?`)) return;
+    setRunningTemplate(t.id);
+    setError(null);
+    try {
+      await api.integrations.semaphore.run(selectedId, t.projectId, t.id);
+      loadTemplates(selectedId);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setRunningTemplate(null);
+    }
+  }
+
+  return (
+    <>
+      <h2 className="page-title mb-3">Semaphore</h2>
+      {error && <div className="alert alert-danger">{error}</div>}
+
+      {integrations?.length === 0 ? (
+        <div className="card">
+          <div className="card-body text-secondary">
+            No Semaphore integration configured yet.{" "}
+            <Link to="/integrations">Add one under Integrations</Link>.
+          </div>
+        </div>
+      ) : (
+        <>
+          {integrations && integrations.length > 1 && (
+            <div className="mb-3" style={{ maxWidth: 320 }}>
+              <select
+                className="form-select"
+                value={selectedId ?? ""}
+                onChange={(e) => setSelectedId(Number(e.target.value))}
+              >
+                {integrations.map((i) => (
+                  <option key={i.id} value={i.id} disabled={!i.enabled}>
+                    {i.name}
+                    {!i.enabled ? " — disabled" : ""}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          {selected && !selected.enabled ? (
+            <div className="card">
+              <div className="card-body text-secondary">
+                "{selected.name}" is disabled. Enable it under Integrations → Manage integrations to see its
+                templates.
+              </div>
+            </div>
+          ) : (
+            <div className="card">
+              <div className="card-header">
+                <h3 className="card-title">
+                  Templates
+                  {data && data.summary.failing > 0 && (
+                    <span className="text-red fw-normal ms-2">{data.summary.failing} failing</span>
+                  )}
+                </h3>
+                <div className="card-actions">
+                  <button
+                    className="btn btn-sm btn-outline-secondary"
+                    onClick={() => selected && loadTemplates(selected.id)}
+                    disabled={loading}
+                  >
+                    {loading ? "Refreshing…" : "Refresh"}
+                  </button>
+                </div>
+              </div>
+              <div className="table-responsive">
+                <table className="table table-vcenter card-table">
+                  <thead>
+                    <tr>
+                      <th>Template</th>
+                      <th>Project</th>
+                      <th>Last run</th>
+                      <th>Status</th>
+                      {canEdit && <th className="w-1">Actions</th>}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {data?.templates.map((t) => (
+                      <tr key={`${t.projectId}:${t.id}`}>
+                        <td>{t.name}</td>
+                        <td className="text-secondary">{t.projectName}</td>
+                        <td className="text-secondary">
+                          {t.lastTask
+                            ? formatDateTime(new Date(t.lastTask.end ?? t.lastTask.start ?? t.lastTask.created ?? ""))
+                            : "—"}
+                        </td>
+                        <td>{semaphoreStatusBadge(t)}</td>
+                        {canEdit && (
+                          <td>
+                            <button
+                              className="btn btn-sm btn-primary"
+                              onClick={() => runTemplate(t)}
+                              disabled={runningTemplate === t.id}
+                            >
+                              {runningTemplate === t.id ? "Starting…" : "Run"}
+                            </button>
+                          </td>
+                        )}
+                      </tr>
+                    ))}
+                    {data?.templates.length === 0 && (
+                      <tr>
+                        <td colSpan={canEdit ? 5 : 4} className="text-secondary text-center">
+                          No templates found across any project.
+                        </td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+}

web/src/pages/Tailscale.tsx

@@ -0,0 +1,202 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import {
+  api,
+  type CurrentUser,
+  type IntegrationSummary,
+  type TailscaleDevice,
+  type TailscaleDevicesResponse,
+} from "../api/client";
+import { formatDateTime } from "../utils/date";
+
+export default function Tailscale({ user }: { user: CurrentUser }) {
+  const canEdit = user.role === "admin" || user.role === "operator";
+
+  const [integrations, setIntegrations] = useState<IntegrationSummary[] | null>(null);
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const [data, setData] = useState<TailscaleDevicesResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    api.integrations
+      .list()
+      .then((res) => {
+        const tailscaleIntegrations = res.integrations.filter((i) => i.type === "tailscale");
+        setIntegrations(tailscaleIntegrations);
+        if (!selectedId && tailscaleIntegrations.length > 0) setSelectedId(tailscaleIntegrations[0].id);
+      })
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const selected = integrations?.find((i) => i.id === selectedId) ?? null;
+
+  function loadDevices(id: number) {
+    setLoading(true);
+    setError(null);
+    api.integrations.tailscale
+      .devices(id)
+      .then((res) => setData(res))
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)))
+      .finally(() => setLoading(false));
+  }
+
+  useEffect(() => {
+    if (selected?.enabled) {
+      loadDevices(selected.id);
+    } else {
+      setData(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedId]);
+
+  async function setDeviceAuthorized(device: TailscaleDevice, authorized: boolean) {
+    if (!selectedId) return;
+    try {
+      await api.integrations.tailscale.setAuthorized(selectedId, device.id, authorized);
+      loadDevices(selectedId);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  async function removeDevice(device: TailscaleDevice) {
+    if (!selectedId) return;
+    if (!confirm(`Remove device "${device.label || device.hostname}" from the tailnet?`)) return;
+    try {
+      await api.integrations.tailscale.remove(selectedId, device.id);
+      loadDevices(selectedId);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  return (
+    <>
+      <h2 className="page-title mb-3">Tailscale</h2>
+      {error && <div className="alert alert-danger">{error}</div>}
+
+      {integrations?.length === 0 ? (
+        <div className="card">
+          <div className="card-body text-secondary">
+            No Tailscale integration configured yet.{" "}
+            <Link to="/integrations">Add one under Integrations</Link>.
+          </div>
+        </div>
+      ) : (
+        <>
+          {integrations && integrations.length > 1 && (
+            <div className="mb-3" style={{ maxWidth: 320 }}>
+              <select
+                className="form-select"
+                value={selectedId ?? ""}
+                onChange={(e) => setSelectedId(Number(e.target.value))}
+              >
+                {integrations.map((i) => (
+                  <option key={i.id} value={i.id} disabled={!i.enabled}>
+                    {i.name}
+                    {!i.enabled ? " — disabled" : ""}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          {selected && !selected.enabled ? (
+            <div className="card">
+              <div className="card-body text-secondary">
+                "{selected.name}" is disabled. Enable it under Integrations → Manage integrations to see its
+                devices.
+              </div>
+            </div>
+          ) : (
+            <div className="card">
+              <div className="card-header">
+                <h3 className="card-title">
+                  Devices
+                  {data && (
+                    <span className="text-secondary fw-normal ms-2">
+                      {data.summary.online}/{data.summary.total} online
+                      {data.summary.unauthorized > 0 && `, ${data.summary.unauthorized} awaiting authorization`}
+                    </span>
+                  )}
+                </h3>
+                <div className="card-actions">
+                  <button
+                    className="btn btn-sm btn-outline-secondary"
+                    onClick={() => selected && loadDevices(selected.id)}
+                    disabled={loading}
+                  >
+                    {loading ? "Refreshing…" : "Refresh"}
+                  </button>
+                </div>
+              </div>
+              <div className="table-responsive">
+                <table className="table table-vcenter card-table">
+                  <thead>
+                    <tr>
+                      <th>Device</th>
+                      <th>Address</th>
+                      <th>OS</th>
+                      <th>Status</th>
+                      <th>Last seen</th>
+                      {canEdit && <th className="w-1">Actions</th>}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {data?.devices.map((d) => (
+                      <tr key={d.id}>
+                        <td>
+                          {d.label || d.hostname}
+                          {d.isExitNode && <span className="badge bg-purple-lt ms-2">Exit node</span>}
+                        </td>
+                        <td className="text-secondary">{d.primaryAddress}</td>
+                        <td>{d.os || "—"}</td>
+                        <td>
+                          {d.online ? (
+                            <span className="badge bg-green-lt text-green me-1">Online</span>
+                          ) : (
+                            <span className="badge bg-secondary-lt text-secondary me-1">Offline</span>
+                          )}
+                          {!d.authorized && <span className="badge bg-yellow-lt text-yellow">Unauthorized</span>}
+                        </td>
+                        <td className="text-secondary">{d.lastSeen ? formatDateTime(new Date(d.lastSeen)) : "—"}</td>
+                        {canEdit && (
+                          <td>
+                            <div className="btn-list flex-nowrap">
+                              {d.authorized ? (
+                                <button className="btn btn-sm" onClick={() => setDeviceAuthorized(d, false)}>
+                                  Deauthorize
+                                </button>
+                              ) : (
+                                <button className="btn btn-sm btn-primary" onClick={() => setDeviceAuthorized(d, true)}>
+                                  Authorize
+                                </button>
+                              )}
+                              <button className="btn btn-sm btn-outline-danger" onClick={() => removeDevice(d)}>
+                                Remove
+                              </button>
+                            </div>
+                          </td>
+                        )}
+                      </tr>
+                    ))}
+                    {data?.devices.length === 0 && (
+                      <tr>
+                        <td colSpan={canEdit ? 6 : 5} className="text-secondary text-center">
+                          No devices in this tailnet.
+                        </td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+}