api+ui: kind-scoped save/delete endpoints and links

API: /config/{services,jobs,tools,static}/{name} now pin the twin they
target — _save_deployment/_delete_deployment take an explicit kind so a
patch to a 'backup' service can't bleed into a 'backup' job/tool. Add
/tools and /static endpoints; keep /deployments/{name} kind-agnostic.
New test_kind_twins proves per-kind save/delete isolation on disk.

UI: ConfigPanel and CreateDeploymentForm write to the kind-scoped
resource; GatewayPanel/NodeDetail/DeploymentsSection link via a shared
detailPath(name, kind) helper instead of the ambiguous /deployment/:name.

Includes incidental ruff-format reflow of untouched api files.

app/src/components/GatewayPanel.tsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom"
 import { Globe, RefreshCw, FileText, ExternalLink, Cable } from "lucide-react"
 import type { GatewayInfo, HealthStatus } from "@/types"
 import { useApply, useCaddyfile } from "@/services/api/hooks"
-import { subdomainUrl } from "@/lib/labels"
+import { subdomainUrl, detailPath } from "@/lib/labels"
 import { HealthBadge } from "./HealthBadge"
 import { GatewaySettings } from "./GatewaySettings"
 
@@ -118,7 +118,10 @@ export function GatewayPanel({ gateway, statuses }: GatewayPanelProps) {
                   </td>
                   <td className="px-4 py-2 font-mono text-xs text-[var(--muted)]">
                     {route.name ? (
-                      <Link to={`/deployment/${route.name}`} className="hover:text-[var(--primary)]">
+                      <Link
+                        to={detailPath(route.name, route.kind)}
+                        className="hover:text-[var(--primary)]"
+                      >
                         {route.kind === "static" ? shortDir(route.target) : route.target}
                       </Link>
                     ) : (

app/src/components/detail/ConfigPanel.tsx

@@ -31,9 +31,10 @@ export function ConfigPanel({ deployment, configSection, onRefetch }: ConfigPane
   const [pendingApply, setPendingApply] = useState(false)
   const [applying, setApplying] = useState(false)
   const isDeployment = configSection !== "programs"
-  // Programs are their own catalog; every deployment kind (service/job/tool/
-  // static) lives in the single deployments/ collection.
-  const writeSection = isDeployment ? "deployments" : "programs"
+  // Save/delete against the kind-scoped resource (services/jobs/tools/static) so
+  // a save can't hit a same-named twin of another kind. `configSection` already
+  // carries the kind; programs write to their own catalog.
+  const writeSection = configSection
 
   const handleSave = async (compName: string, config: Record<string, unknown>) => {
     setMessage(null)

app/src/components/detail/CreateDeploymentForm.tsx

@@ -112,7 +112,10 @@ export function CreateDeploymentForm({
     setError("")
     try {
       setBusy("Saving…")
-      await apiClient.put(`/config/deployments/${name}`, { config: buildConfig() })
+      // Post to the kind-scoped resource so creating a twin (a `backup` job when
+      // a `backup` service exists) targets the right collection, not a guess.
+      const section = kind === "static" ? "static" : `${kind}s`
+      await apiClient.put(`/config/${section}/${name}`, { config: buildConfig() })
       // Converge: render + activate the new deployment in one step.
       setBusy("Applying…")
       await apiClient.post(`/apply`, { name })

app/src/components/detail/DeploymentsSection.tsx

@@ -4,6 +4,7 @@ import { Plus, ChevronRight } from "lucide-react"
 import type { ProgramDetail } from "@/types"
 import { useServices, useJobs } from "@/services/api/hooks"
 import { KindBadge } from "@/components/KindBadge"
+import { detailPath } from "@/lib/labels"
 import { CreateDeploymentForm, type CreatePrefill } from "./CreateDeploymentForm"
 
 /** How a program is deployed. A program → 0-N deployments; each row links to its
@@ -27,9 +28,6 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
     launcher: program.stack?.startsWith("python") || !program.stack ? "python" : "command",
   }
 
-  const detailPath = (name: string, kind: string) =>
-    kind === "tool" ? `/tools/${name}` : kind === "job" ? `/jobs/${name}` : `/services/${name}`
-
   return (
     <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
       <div className="flex items-center justify-between mb-1">

app/src/components/detail/SystemdPanel.tsx

@@ -27,6 +27,14 @@ export function SystemdPanel({ name, systemd }: SystemdPanelProps) {
       <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm mt-3">
         <span className="text-[var(--muted)]">Unit</span>
         <span className="font-mono break-all">{systemd.unit_name}</span>
+        {systemd.timer && (
+          <>
+            <span className="text-[var(--muted)]">Timer unit</span>
+            <span className="font-mono break-all">
+              {systemd.unit_name.replace(".service", ".timer")}
+            </span>
+          </>
+        )}
         <span className="text-[var(--muted)]">Path</span>
         <span className="font-mono break-all">{systemd.unit_path}</span>
         {systemd.timer && (

app/src/lib/labels.ts

@@ -48,6 +48,17 @@ export function stackLabel(stack: string): string {
   return STACK_LABELS[stack] ?? stack
 }
 
+/**
+ * The kind-scoped detail route for a deployment. A name can be shared across
+ * kinds (a `backup` service + job + tool), so links must carry the kind to
+ * reach the right twin. Statics share the service detail page.
+ */
+export function detailPath(name: string, kind: string): string {
+  if (kind === "tool") return `/tools/${name}`
+  if (kind === "job") return `/jobs/${name}`
+  return `/services/${name}`
+}
+
 /**
  * Full URL for a service exposed at <subdomain>.<gateway.domain>. The domain is
  * derived from the dashboard's own host (it is served at castle.<domain>), so

app/src/pages/NodeDetail.tsx

@@ -3,6 +3,7 @@ import { ArrowLeft, Server } from "lucide-react"
 import { useNode } from "@/services/api/hooks"
 import { KindBadge } from "@/components/KindBadge"
 import { StackBadge } from "@/components/StackBadge"
+import { detailPath } from "@/lib/labels"
 import { cn } from "@/lib/utils"
 
 export function NodeDetailPage() {
@@ -77,7 +78,7 @@ export function NodeDetailPage() {
                 >
                   <td className="px-3 py-2.5">
                     <Link
-                      to={`/deployment/${comp.id}`}
+                      to={detailPath(comp.id, comp.kind ?? "service")}
                       className="font-medium hover:text-[var(--primary)] transition-colors"
                     >
                       {comp.id}

app/src/pages/ScheduledDetail.tsx

@@ -50,24 +50,16 @@ export function ScheduledDetailPage() {
               <Clock size={14} className="shrink-0 text-[var(--muted)]" />
               {deployment.schedule}
             </span>
-            {deployment.systemd && (
-              <>
-                <span className="text-[var(--muted)]">Timer unit</span>
-                <span className="font-mono break-all">
-                  {deployment.systemd.unit_name.replace(".service", ".timer")}
-                </span>
-              </>
-            )}
           </div>
         </div>
       )}
 
+      <ConfigPanel deployment={deployment} configSection="jobs" onRefetch={refetch} />
+
       {deployment.systemd && (
         <SystemdPanel name={deployment.id} systemd={deployment.systemd} />
       )}
 
-      <ConfigPanel deployment={deployment} configSection="jobs" onRefetch={refetch} />
-
       {deployment.managed && (
         <div className="mb-6">
           <h2 className="text-lg font-semibold mb-3">Logs</h2>

app/src/pages/ServiceDetail.tsx

@@ -146,10 +146,6 @@ export function ServiceDetailPage() {
         </div>
       </div>
 
-      {deployment.systemd && (
-        <SystemdPanel name={deployment.id} systemd={deployment.systemd} />
-      )}
-
       {isGateway && caddyfile?.content && (
         <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
           <h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider mb-1">
@@ -170,6 +166,10 @@ export function ServiceDetailPage() {
         onRefetch={refetch}
       />
 
+      {deployment.systemd && (
+        <SystemdPanel name={deployment.id} systemd={deployment.systemd} />
+      )}
+
       {deployment.managed && (
         <div className="mb-6">
           <h2 className="text-lg font-semibold mb-3">Logs</h2>