app: cross-link entity pages along graph edges

- service/static/tool/job detail pages now link back to their program;
  backfill the program ref on registry-only static+job details (the
  registry Deployment carries no program ref).
- new RelatedDeployments card surfaces a deployment's requires edges both
  directions (Depends on / Required by) as links; references render inert.
- replace the service detail Subdomain/Served-at rows with a launch icon
  in the header that opens the gateway URL in a new tab.

app/src/components/detail/RelatedDeployments.tsx

@@ -0,0 +1,115 @@
+import { Link } from "react-router-dom"
+import { ArrowUpRight, ArrowDownLeft } from "lucide-react"
+import { useGraph } from "@/services/api/hooks"
+import { KindBadge } from "@/components/KindBadge"
+import { detailPath } from "@/lib/labels"
+
+/** One end of a `requires` edge, resolved to a navigable deployment. */
+interface Related {
+  name: string
+  kind: string | null // null → not a local node (e.g. a remote reference)
+  bind: string | null
+}
+
+// Kinds with a local detail page. A `reference` (external service on another node)
+// has none, so it's shown inert rather than linking to a route that 404s.
+const NAVIGABLE = new Set(["service", "static", "tool", "job"])
+
+/**
+ * The dependency edges of a deployment, both directions, as links. "Depends on" =
+ * outgoing `requires` edges (this → target); "Required by" = incoming (peer → this).
+ * Only deployment-kind edges are navigable — system (package) requirements aren't
+ * entities. Renders nothing when the node sits on no edges. Data: GET /graph.
+ */
+export function RelatedDeployments({ name }: { name: string }) {
+  const { data: graph } = useGraph()
+  if (!graph) return null
+
+  const nodeKind = (n: string) => graph.nodes.find((x) => x.name === n)?.kind ?? null
+  const edges = graph.edges.filter((e) => e.kind === "deployment")
+
+  const dependsOn: Related[] = edges
+    .filter((e) => e.src === name)
+    .map((e) => ({ name: e.dst, kind: nodeKind(e.dst), bind: e.bind }))
+  const requiredBy: Related[] = edges
+    .filter((e) => e.dst === name)
+    .map((e) => ({ name: e.src, kind: nodeKind(e.src), bind: e.bind }))
+
+  if (dependsOn.length === 0 && requiredBy.length === 0) return null
+
+  return (
+    <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">
+        Dependencies
+      </h2>
+      <p className="text-xs text-[var(--muted)] mb-4">
+        How this deployment connects to others (declared <span className="font-mono">requires</span>).
+      </p>
+      <div className="space-y-4">
+        {dependsOn.length > 0 && (
+          <RelatedGroup
+            icon={<ArrowUpRight size={12} className="shrink-0" />}
+            label="Depends on"
+            items={dependsOn}
+          />
+        )}
+        {requiredBy.length > 0 && (
+          <RelatedGroup
+            icon={<ArrowDownLeft size={12} className="shrink-0" />}
+            label="Required by"
+            items={requiredBy}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+function RelatedGroup({
+  icon,
+  label,
+  items,
+}: {
+  icon: React.ReactNode
+  label: string
+  items: Related[]
+}) {
+  return (
+    <div>
+      <span className="flex items-center gap-1 text-xs text-[var(--muted)] mb-1">
+        {icon}
+        {label}
+      </span>
+      <div className="space-y-1">
+        {items.map((r) => (
+          <RelatedRow key={`${label}:${r.name}`} related={r} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function RelatedRow({ related }: { related: Related }) {
+  const inner = (
+    <>
+      <span className="font-mono">{related.name}</span>
+      {related.kind && <KindBadge kind={related.kind} />}
+      {related.bind && (
+        <span className="text-xs text-[var(--muted)] font-mono">· {related.bind}</span>
+      )}
+    </>
+  )
+  // A local deployment resolves to a detail page; a reference or bare ref (no
+  // detail route) is shown inert — there's nothing on this node to navigate to.
+  if (!related.kind || !NAVIGABLE.has(related.kind)) {
+    return <div className="flex items-center gap-2 text-sm px-2 py-1.5 -mx-2">{inner}</div>
+  }
+  return (
+    <Link
+      to={detailPath(related.name, related.kind)}
+      className="flex items-center gap-2 rounded px-2 py-1.5 -mx-2 text-sm hover:bg-black/20 transition-colors"
+    >
+      {inner}
+    </Link>
+  )
+}

app/src/pages/ScheduledDetail.tsx

@@ -1,11 +1,12 @@
-import { useParams } from "react-router-dom"
+import { useParams, Link } from "react-router-dom"
-import { Clock } from "lucide-react"
+import { Clock, Package } from "lucide-react"
 import { useJob } from "@/services/api/hooks"
 import { LogViewer } from "@/components/LogViewer"
 import { DetailHeader } from "@/components/detail/DetailHeader"
 import { ServiceControls } from "@/components/detail/ServiceControls"
 import { SystemdPanel } from "@/components/detail/SystemdPanel"
 import { ConfigPanel } from "@/components/detail/ConfigPanel"
+import { RelatedDeployments } from "@/components/detail/RelatedDeployments"
 
 export function ScheduledDetailPage() {
   const { name } = useParams<{ name: string }>()
@@ -39,20 +40,32 @@ export function ScheduledDetailPage() {
         <ServiceControls name={deployment.id} enabled={deployment.enabled} />
       </DetailHeader>
 
-      {deployment.schedule && (
       <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-3">
-            Schedule
-          </h2>
         <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
+          {deployment.schedule && (
+            <>
               <span className="text-[var(--muted)]">Cron</span>
               <span className="flex items-center gap-2 min-w-0 break-all font-mono">
                 <Clock size={14} className="shrink-0 text-[var(--muted)]" />
                 {deployment.schedule}
               </span>
-          </div>
+            </>
-        </div>
           )}
+          {deployment.program && (
+            <>
+              <span className="text-[var(--muted)]">Program</span>
+              <Link
+                to={`/programs/${deployment.program}`}
+                className="flex items-center gap-1.5 min-w-0 text-[var(--primary)] hover:underline"
+              >
+                <Package size={14} className="shrink-0" /> {deployment.program}
+              </Link>
+            </>
+          )}
+        </div>
+      </div>
+
+      <RelatedDeployments name={deployment.id} />
 
       <ConfigPanel deployment={deployment} configSection="jobs" onRefetch={refetch} />
 

app/src/pages/ServiceDetail.tsx

@@ -8,6 +8,7 @@ import { DetailHeader } from "@/components/detail/DetailHeader"
 import { ServiceControls } from "@/components/detail/ServiceControls"
 import { SystemdPanel } from "@/components/detail/SystemdPanel"
 import { ConfigPanel } from "@/components/detail/ConfigPanel"
+import { RelatedDeployments } from "@/components/detail/RelatedDeployments"
 
 export function ServiceDetailPage() {
   const { name } = useParams<{ name: string }>()
@@ -35,8 +36,11 @@ export function ServiceDetailPage() {
   // A static is a caddy-served site, not a systemd unit — no start/stop, no logs;
   // it shows its served URL and the dir it serves instead of a port/launcher.
   const isStatic = deployment.kind === "static" || deployment.manager === "caddy"
-  const servedUrl = subdomainUrl(deployment.subdomain ?? deployment.id)
   const root = (deployment.manifest?.root as string | undefined) ?? undefined
+  // The gateway address to launch: a static is always served there (falls back to
+  // its id); a systemd service only when it's actually proxied (has a subdomain).
+  const launchLabel = deployment.subdomain ?? (isStatic ? deployment.id : undefined)
+  const launchUrl = launchLabel ? subdomainUrl(launchLabel) : null
 
   return (
     <div className="max-w-3xl mx-auto px-6 py-8">
@@ -48,12 +52,22 @@ export function ServiceDetailPage() {
         stack={deployment.stack}
         source={deployment.source}
       >
-        {!isStatic && (
         <div className="flex items-center gap-2">
-            {health && <HealthBadge status={health.status} latency={health.latency_ms} />}
+          {!isStatic && health && <HealthBadge status={health.status} latency={health.latency_ms} />}
-            <ServiceControls name={deployment.id} enabled={deployment.enabled} />
+          {launchUrl && (
-          </div>
+            <a
+              href={launchUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={`Open ${launchLabel}`}
+              aria-label={`Open ${launchLabel} in a new tab`}
+              className="p-1.5 rounded-md text-[var(--muted)] hover:text-[var(--primary)] hover:bg-[var(--background)] transition-colors"
+            >
+              <ExternalLink size={16} />
+            </a>
           )}
+          {!isStatic && <ServiceControls name={deployment.id} enabled={deployment.enabled} />}
+        </div>
       </DetailHeader>
 
       <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
@@ -68,17 +82,6 @@ export function ServiceDetailPage() {
                 ● served by the gateway
                 <span className="text-xs text-[var(--muted)]"> · manager: caddy</span>
               </span>
-              {servedUrl && (
-                <>
-                  <span className="text-[var(--muted)]">Served at</span>
-                  <a
-                    href={servedUrl}
-                    className="flex items-center gap-1 min-w-0 break-all text-[var(--primary)] hover:underline font-mono"
-                  >
-                    <ExternalLink size={12} className="shrink-0" />{deployment.subdomain ?? deployment.id}
-                  </a>
-                </>
-              )}
               {root && (
                 <>
                   <span className="text-[var(--muted)]">Root</span>
@@ -101,19 +104,6 @@ export function ServiceDetailPage() {
               <span className="font-mono break-all">{deployment.health_path}</span>
             </>
           )}
-          {/* A static already shows its gateway URL as "Served at" above; only a
-              proxied (systemd) service surfaces the same thing as "Subdomain". */}
-          {!isStatic && deployment.subdomain && (
-            <>
-              <span className="text-[var(--muted)]">Subdomain</span>
-              <a
-                href={subdomainUrl(deployment.subdomain) ?? undefined}
-                className="flex items-center gap-1 min-w-0 break-all text-[var(--primary)] hover:underline font-mono"
-              >
-                <ExternalLink size={12} className="shrink-0" />{deployment.subdomain}
-              </a>
-            </>
-          )}
           {deployment.launcher && (
             <>
               <span className="text-[var(--muted)]">Launch</span>
@@ -160,6 +150,8 @@ export function ServiceDetailPage() {
         </div>
       )}
 
+      <RelatedDeployments name={deployment.id} />
+
       <ConfigPanel
         deployment={deployment}
         configSection={isStatic ? "static" : "services"}

app/src/pages/ToolDetail.tsx

@@ -3,6 +3,7 @@ import { Loader2, Package } from "lucide-react"
 import { useDeployment, useSetEnabled } from "@/services/api/hooks"
 import { DetailHeader } from "@/components/detail/DetailHeader"
 import { ConfigPanel } from "@/components/detail/ConfigPanel"
+import { RelatedDeployments } from "@/components/detail/RelatedDeployments"
 
 export function ToolDetailPage() {
   const { name } = useParams<{ name: string }>()
@@ -63,6 +64,8 @@ export function ToolDetailPage() {
         </Link>
       </div>
 
+      <RelatedDeployments name={deployment.id} />
+
       <ConfigPanel deployment={deployment} configSection="tools" onRefetch={refetch} />
     </div>
   )

castle-api/src/castle_api/routes.py

@@ -518,6 +518,10 @@ def get_service(name: str) -> ServiceDetail:
         # Serve the editable spec (reach/root/program) when it's in castle.yaml.
         spec = config.deployment(deployed.kind, name) if config is not None else None
         if spec is not None:
+            # The registry Deployment carries no `program` ref, so backfill it from
+            # the spec — lets the detail page link back to the program (statics too).
+            if summary.program is None:
+                summary.program = getattr(spec, "program", None)
             manifest = spec.model_dump(mode="json", exclude_none=True)
         else:
             manifest = {
@@ -622,6 +626,12 @@ def get_job(name: str) -> JobDetail:
         summary = _job_from_deployed(name, deployed)
         if config is not None and summary.source is None:
             summary.source = _backfill_source(name, config)
+        # The registry Deployment carries no `program` ref — backfill from the spec
+        # so the job page can link back to its program (matches the service path).
+        if summary.program is None and config is not None:
+            spec = config.deployment("job", name)
+            if spec is not None:
+                summary.program = getattr(spec, "program", None)
         manifest = {
             "manager": deployed.manager,
             "launcher": deployed.launcher,