From 0515faadfdb2c36084a33dcf43084d06561ab080 Mon Sep 17 00:00:00 2001
From: Paul Payne <paul@payne.io>
Date: Sun, 14 Jun 2026 12:13:41 -0700
Subject: [PATCH] refactor(app): rename Component* UI widgets to accurate
 domain names
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dashboard widgets were named after the old 'component' concept. Renamed
each to what it actually renders:

- ComponentCard  → ServiceCard      (ServiceSummary, /services/, service actions)
- ComponentTable → ProgramTable     (ProgramSummary[], the program catalog)
- ComponentEditor→ DeploymentEditor (DeploymentDetail, the unified type)
- ComponentFields→ DeploymentFields (AnyDetail)
- AddComponent   → AddDeployment

Also purged the domain term 'component' from the rest of the app: the
useComponent hook → useDeployment, ConfigPanel + the three detail pages'
`component` prop/var → `deployment`, and the gateway/node table headers
(Component → Program / Deployment). Props renamed to match (component →
service / program / deployment). The React UI directory app/src/components/
keeps its conventional name.

App type-checks and builds clean.
---
 .../{AddComponent.tsx => AddDeployment.tsx}   | 10 ++--
 ...mponentEditor.tsx => DeploymentEditor.tsx} | 20 +++----
 ...mponentFields.tsx => DeploymentFields.tsx} | 24 ++++-----
 app/src/components/GatewayPanel.tsx           |  2 +-
 .../{ComponentTable.tsx => ProgramTable.tsx}  | 30 +++++------
 .../{ComponentCard.tsx => ServiceCard.tsx}    | 40 +++++++-------
 app/src/components/ServiceSection.tsx         |  4 +-
 app/src/components/detail/ConfigPanel.tsx     | 10 ++--
 app/src/pages/ConfigEditor.tsx                | 12 ++---
 app/src/pages/Dashboard.tsx                   |  4 +-
 app/src/pages/NodeDetail.tsx                  |  2 +-
 app/src/pages/ProgramDetail.tsx               | 52 +++++++++----------
 app/src/pages/ProgramRedirect.tsx             | 10 ++--
 app/src/pages/ScheduledDetail.tsx             | 30 +++++------
 app/src/pages/ServiceDetail.tsx               | 46 ++++++++--------
 app/src/services/api/hooks.ts                 |  4 +-
 app/src/types/index.ts                        |  2 +-
 17 files changed, 151 insertions(+), 151 deletions(-)
 rename app/src/components/{AddComponent.tsx => AddDeployment.tsx} (95%)
 rename app/src/components/{ComponentEditor.tsx => DeploymentEditor.tsx} (67%)
 rename app/src/components/{ComponentFields.tsx => DeploymentFields.tsx} (92%)
 rename app/src/components/{ComponentTable.tsx => ProgramTable.tsx} (85%)
 rename app/src/components/{ComponentCard.tsx => ServiceCard.tsx} (77%)

diff --git a/app/src/components/AddComponent.tsx b/app/src/components/AddDeployment.tsx
similarity index 95%
rename from app/src/components/AddComponent.tsx
rename to app/src/components/AddDeployment.tsx
index 098a97e..31c6aa2 100644
--- a/app/src/components/AddComponent.tsx
+++ b/app/src/components/AddDeployment.tsx
@@ -36,12 +36,12 @@ const TEMPLATES: Record<string, Record<string, unknown>> = {
   empty: {},
 }
 
-interface AddComponentProps {
+interface AddDeploymentProps {
   onAdd: (name: string, config: Record<string, unknown>) => Promise<void>
   existingNames: string[]
 }
 
-export function AddComponent({ onAdd, existingNames }: AddComponentProps) {
+export function AddDeployment({ onAdd, existingNames }: AddDeploymentProps) {
   const [open, setOpen] = useState(false)
   const [name, setName] = useState("")
   const [description, setDescription] = useState("")
@@ -100,7 +100,7 @@ export function AddComponent({ onAdd, existingNames }: AddComponentProps) {
         onClick={() => setOpen(true)}
         className="w-full flex items-center justify-center gap-2 p-4 border border-dashed border-[var(--border)] rounded-lg text-[var(--muted)] hover:text-[var(--foreground)] hover:border-[var(--primary)] transition-colors"
       >
-        <Plus size={16} /> Add component
+        <Plus size={16} /> Add entry
       </button>
     )
   }
@@ -108,7 +108,7 @@ export function AddComponent({ onAdd, existingNames }: AddComponentProps) {
   return (
     <div className="bg-[var(--card)] border border-[var(--primary)] rounded-lg p-5 space-y-4">
       <div className="flex items-center justify-between">
-        <h3 className="font-semibold">New component</h3>
+        <h3 className="font-semibold">New entry</h3>
         <button onClick={() => setOpen(false)} className="text-[var(--muted)] hover:text-[var(--foreground)]">
           <X size={16} />
         </button>
@@ -150,7 +150,7 @@ export function AddComponent({ onAdd, existingNames }: AddComponentProps) {
         <input
           value={description}
           onChange={(e) => setDescription(e.target.value)}
-          placeholder="What does this component do?"
+          placeholder="What does this entry do?"
           className="w-full bg-black/30 border border-[var(--border)] rounded px-3 py-1.5 text-sm focus:outline-none focus:border-[var(--primary)]"
         />
       </Field>
diff --git a/app/src/components/ComponentEditor.tsx b/app/src/components/DeploymentEditor.tsx
similarity index 67%
rename from app/src/components/ComponentEditor.tsx
rename to app/src/components/DeploymentEditor.tsx
index 1aa70f2..8aef4f4 100644
--- a/app/src/components/ComponentEditor.tsx
+++ b/app/src/components/DeploymentEditor.tsx
@@ -1,17 +1,17 @@
 import { useState } from "react"
 import { ChevronDown, ChevronRight } from "lucide-react"
 import type { DeploymentDetail } from "@/types"
-import { ComponentFields } from "./ComponentFields"
+import { DeploymentFields } from "./DeploymentFields"
 import { BehaviorBadge } from "./BehaviorBadge"
 import { StackBadge } from "./StackBadge"
 
-interface ComponentEditorProps {
-  component: DeploymentDetail
+interface DeploymentEditorProps {
+  deployment: DeploymentDetail
   onSave: (name: string, config: Record<string, unknown>) => Promise<void>
   onDelete: (name: string) => Promise<void>
 }
 
-export function ComponentEditor({ component, onSave, onDelete }: ComponentEditorProps) {
+export function DeploymentEditor({ deployment, onSave, onDelete }: DeploymentEditorProps) {
   const [expanded, setExpanded] = useState(false)
 
   return (
@@ -22,19 +22,19 @@ export function ComponentEditor({ component, onSave, onDelete }: ComponentEditor
       >
         <div className="flex items-center gap-3">
           {expanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
-          <span className="font-semibold">{component.id}</span>
-          <span className="text-sm text-[var(--muted)]">{component.description}</span>
+          <span className="font-semibold">{deployment.id}</span>
+          <span className="text-sm text-[var(--muted)]">{deployment.description}</span>
         </div>
         <div className="flex items-center gap-1.5">
-          <BehaviorBadge behavior={component.behavior} />
-          <StackBadge stack={component.stack} />
+          <BehaviorBadge behavior={deployment.behavior} />
+          <StackBadge stack={deployment.stack} />
         </div>
       </button>
 
       {expanded && (
         <div className="border-t border-[var(--border)] p-4">
-          <ComponentFields
-            component={component}
+          <DeploymentFields
+            deployment={deployment}
             onSave={onSave}
             onDelete={onDelete}
           />
diff --git a/app/src/components/ComponentFields.tsx b/app/src/components/DeploymentFields.tsx
similarity index 92%
rename from app/src/components/ComponentFields.tsx
rename to app/src/components/DeploymentFields.tsx
index 1ab6683..2349bc7 100644
--- a/app/src/components/ComponentFields.tsx
+++ b/app/src/components/DeploymentFields.tsx
@@ -4,16 +4,16 @@ import type { AnyDetail } from "@/types"
 import { runnerLabel } from "@/lib/labels"
 import { SecretsEditor } from "./SecretsEditor"
 
-interface ComponentFieldsProps {
-  component: AnyDetail
+interface DeploymentFieldsProps {
+  deployment: AnyDetail
   onSave: (name: string, config: Record<string, unknown>) => Promise<void>
   onDelete?: (name: string) => Promise<void>
 }
 
 const SECRET_RE = /^\$\{secret:([^}]+)\}$/
 
-export function ComponentFields({ component, onSave, onDelete }: ComponentFieldsProps) {
-  const m = component.manifest
+export function DeploymentFields({ deployment, onSave, onDelete }: DeploymentFieldsProps) {
+  const m = deployment.manifest
   const [saving, setSaving] = useState(false)
   const [saved, setSaved] = useState(false)
 
@@ -93,7 +93,7 @@ export function ComponentFields({ component, onSave, onDelete }: ComponentFields
         delete config.proxy
       }
 
-      await onSave(component.id, config)
+      await onSave(deployment.id, config)
       setSaved(true)
       setTimeout(() => setSaved(false), 2000)
     } finally {
@@ -122,7 +122,7 @@ export function ComponentFields({ component, onSave, onDelete }: ComponentFields
         </Field>
       )}
 
-      {("managed" in component && component.managed || port) && (
+      {("managed" in deployment && deployment.managed || port) && (
         <Field label="Port">
           <input
             value={port}
@@ -133,7 +133,7 @@ export function ComponentFields({ component, onSave, onDelete }: ComponentFields
         </Field>
       )}
 
-      {("managed" in component && component.managed || healthPath) && (
+      {("managed" in deployment && deployment.managed || healthPath) && (
         <Field label="Health path">
           <input
             value={healthPath}
@@ -205,10 +205,10 @@ export function ComponentFields({ component, onSave, onDelete }: ComponentFields
         </Field>
       )}
 
-      {"managed" in component && (
+      {"managed" in deployment && (
         <Field label="Systemd">
           <span className="text-sm text-[var(--muted)]">
-            {component.managed ? "Yes" : "No"}
+            {deployment.managed ? "Yes" : "No"}
           </span>
         </Field>
       )}
@@ -217,13 +217,13 @@ export function ComponentFields({ component, onSave, onDelete }: ComponentFields
         {onDelete ? (
           <button
             onClick={() => {
-              if (confirm(`Delete component "${component.id}" from castle.yaml?`)) {
-                onDelete(component.id)
+              if (confirm(`Delete deployment "${deployment.id}" from castle.yaml?`)) {
+                onDelete(deployment.id)
               }
             }}
             className="flex items-center gap-1.5 text-xs text-red-400 hover:text-red-300"
           >
-            <Trash2 size={12} /> Remove component
+            <Trash2 size={12} /> Remove deployment
           </button>
         ) : (
           <div />
diff --git a/app/src/components/GatewayPanel.tsx b/app/src/components/GatewayPanel.tsx
index 93b0b3b..d77d527 100644
--- a/app/src/components/GatewayPanel.tsx
+++ b/app/src/components/GatewayPanel.tsx
@@ -63,7 +63,7 @@ export function GatewayPanel({ gateway, statuses }: GatewayPanelProps) {
           <thead>
             <tr className="border-b border-[var(--border)] text-left">
               <th className="px-4 py-2 font-medium text-[var(--muted)]">Path</th>
-              <th className="px-4 py-2 font-medium text-[var(--muted)]">Component</th>
+              <th className="px-4 py-2 font-medium text-[var(--muted)]">Program</th>
               <th className="px-4 py-2 font-medium text-[var(--muted)]">Port</th>
               {multiNode && (
                 <th className="px-4 py-2 font-medium text-[var(--muted)]">Node</th>
diff --git a/app/src/components/ComponentTable.tsx b/app/src/components/ProgramTable.tsx
similarity index 85%
rename from app/src/components/ComponentTable.tsx
rename to app/src/components/ProgramTable.tsx
index 8f728b7..aea4838 100644
--- a/app/src/components/ComponentTable.tsx
+++ b/app/src/components/ProgramTable.tsx
@@ -6,14 +6,14 @@ import { BehaviorBadge } from "./BehaviorBadge"
 import { StackBadge } from "./StackBadge"
 import { ProgramActions } from "./ProgramActions"
 
-interface ComponentTableProps {
-  components: ProgramSummary[]
+interface ProgramTableProps {
+  programs: ProgramSummary[]
 }
 
 type SortKey = "id" | "stack" | "behavior"
 type SortDir = "asc" | "desc"
 
-export function ComponentTable({ components }: ComponentTableProps) {
+export function ProgramTable({ programs }: ProgramTableProps) {
   const [search, setSearch] = useState("")
   const [sortKey, setSortKey] = useState<SortKey>("id")
   const [sortDir, setSortDir] = useState<SortDir>("asc")
@@ -28,14 +28,14 @@ export function ComponentTable({ components }: ComponentTableProps) {
   }
 
   const filtered = useMemo(() => {
-    if (!search) return components
+    if (!search) return programs
     const q = search.toLowerCase()
-    return components.filter(
+    return programs.filter(
       (c) =>
         c.id.toLowerCase().includes(q) ||
         (c.description?.toLowerCase().includes(q) ?? false),
     )
-  }, [components, search])
+  }, [programs, search])
 
   const sorted = useMemo(() => {
     const dir = sortDir === "asc" ? 1 : -1
@@ -76,7 +76,7 @@ export function ComponentTable({ components }: ComponentTableProps) {
           </thead>
           <tbody>
             {sorted.map((comp) => (
-              <ComponentRow key={comp.id} component={comp} />
+              <ProgramRow key={comp.id} program={comp} />
             ))}
             {sorted.length === 0 && (
               <tr>
@@ -120,30 +120,30 @@ function SortHeader({
   )
 }
 
-function ComponentRow({ component }: { component: ProgramSummary }) {
+function ProgramRow({ program }: { program: ProgramSummary }) {
   return (
     <tr className="border-b border-[var(--border)] last:border-b-0 hover:bg-[var(--card)]/50 transition-colors">
       <td className="px-3 py-2.5">
         <Link
-          to={`/programs/${component.id}`}
+          to={`/programs/${program.id}`}
           className="font-medium hover:text-[var(--primary)] transition-colors"
         >
-          {component.id}
+          {program.id}
         </Link>
-        {component.description && (
+        {program.description && (
           <p className="text-xs text-[var(--muted)] mt-0.5 truncate max-w-xs">
-            {component.description}
+            {program.description}
           </p>
         )}
       </td>
       <td className="px-3 py-2.5">
-        <StackBadge stack={component.stack} />
+        <StackBadge stack={program.stack} />
       </td>
       <td className="px-3 py-2.5">
-        <BehaviorBadge behavior={component.behavior} />
+        <BehaviorBadge behavior={program.behavior} />
       </td>
       <td className="px-3 py-2.5">
-        <ProgramActions name={component.id} actions={component.actions} installed={component.installed} compact />
+        <ProgramActions name={program.id} actions={program.actions} installed={program.installed} compact />
       </td>
     </tr>
   )
diff --git a/app/src/components/ComponentCard.tsx b/app/src/components/ServiceCard.tsx
similarity index 77%
rename from app/src/components/ComponentCard.tsx
rename to app/src/components/ServiceCard.tsx
index 389cf60..8a45214 100644
--- a/app/src/components/ComponentCard.tsx
+++ b/app/src/components/ServiceCard.tsx
@@ -6,17 +6,17 @@ import { runnerLabel } from "@/lib/labels"
 import { HealthBadge } from "./HealthBadge"
 import { StackBadge } from "./StackBadge"
 
-interface ComponentCardProps {
-  component: ServiceSummary
+interface ServiceCardProps {
+  service: ServiceSummary
   health?: HealthStatus
 }
 
-export function ComponentCard({ component, health }: ComponentCardProps) {
-  const hasHttp = component.port != null
+export function ServiceCard({ service, health }: ServiceCardProps) {
+  const hasHttp = service.port != null
   const { mutate, isPending } = useServiceAction()
 
   const doAction = (action: string) => {
-    mutate({ name: component.id, action })
+    mutate({ name: service.id, action })
   }
 
   const isDown = health?.status === "down"
@@ -25,10 +25,10 @@ export function ComponentCard({ component, health }: ComponentCardProps) {
     <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5">
       <div className="flex items-start justify-between mb-2">
         <Link
-          to={`/services/${component.id}`}
+          to={`/services/${service.id}`}
           className="text-base font-semibold hover:text-[var(--primary)] transition-colors"
         >
-          {component.id}
+          {service.id}
         </Link>
         {health ? (
           <HealthBadge status={health.status} latency={health.latency_ms} />
@@ -38,38 +38,38 @@ export function ComponentCard({ component, health }: ComponentCardProps) {
       </div>
 
       <div className="flex gap-1.5 mb-2">
-        <StackBadge stack={component.stack} />
+        <StackBadge stack={service.stack} />
       </div>
 
-      {component.description && (
-        <p className="text-sm text-[var(--muted)] mb-3">{component.description}</p>
+      {service.description && (
+        <p className="text-sm text-[var(--muted)] mb-3">{service.description}</p>
       )}
 
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3 text-xs text-[var(--muted)]">
-          {component.port && (
+          {service.port && (
             <span className="flex items-center gap-1 font-mono">
-              <Server size={12} />:{component.port}
+              <Server size={12} />:{service.port}
             </span>
           )}
-          {component.runner && (
+          {service.runner && (
             <span className="flex items-center gap-1">
               <Terminal size={12} />
-              {runnerLabel(component.runner)}
+              {runnerLabel(service.runner)}
             </span>
           )}
-          {component.proxy_path && (
+          {service.proxy_path && (
             <a
-              href={component.proxy_path + "/"}
+              href={service.proxy_path + "/"}
               className="flex items-center gap-1 text-[var(--primary)] hover:underline"
             >
               <ExternalLink size={12} />
-              {component.proxy_path}
+              {service.proxy_path}
             </a>
           )}
-          {component.port && (
+          {service.port && (
             <a
-              href={`http://localhost:${component.port}/docs`}
+              href={`http://localhost:${service.port}/docs`}
               className="text-[var(--primary)] hover:underline"
             >
               Docs
@@ -77,7 +77,7 @@ export function ComponentCard({ component, health }: ComponentCardProps) {
           )}
         </div>
 
-        {component.managed && (
+        {service.managed && (
           <div className="flex items-center gap-1">
             {isDown && (
               <button
diff --git a/app/src/components/ServiceSection.tsx b/app/src/components/ServiceSection.tsx
index eb42599..219cd6c 100644
--- a/app/src/components/ServiceSection.tsx
+++ b/app/src/components/ServiceSection.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react"
 import type { ServiceSummary, HealthStatus } from "@/types"
-import { ComponentCard } from "./ComponentCard"
+import { ServiceCard } from "./ServiceCard"
 import { SectionHeader } from "./SectionHeader"
 
 interface ServiceSectionProps {
@@ -16,7 +16,7 @@ export function ServiceSection({ services, statuses }: ServiceSectionProps) {
       <SectionHeader section="service" />
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {services.map((svc) => (
-          <ComponentCard key={svc.id} component={svc} health={statusMap.get(svc.id)} />
+          <ServiceCard key={svc.id} service={svc} health={statusMap.get(svc.id)} />
         ))}
       </div>
     </section>
diff --git a/app/src/components/detail/ConfigPanel.tsx b/app/src/components/detail/ConfigPanel.tsx
index 9ae8100..d949949 100644
--- a/app/src/components/detail/ConfigPanel.tsx
+++ b/app/src/components/detail/ConfigPanel.tsx
@@ -4,15 +4,15 @@ import { useQueryClient } from "@tanstack/react-query"
 import { Check } from "lucide-react"
 import { apiClient } from "@/services/api/client"
 import type { AnyDetail } from "@/types"
-import { ComponentFields } from "@/components/ComponentFields"
+import { DeploymentFields } from "@/components/DeploymentFields"
 
 interface ConfigPanelProps {
-  component: AnyDetail
+  deployment: AnyDetail
   configSection: "services" | "jobs" | "programs"
   onRefetch: () => void
 }
 
-export function ConfigPanel({ component, configSection, onRefetch }: ConfigPanelProps) {
+export function ConfigPanel({ deployment, configSection, onRefetch }: ConfigPanelProps) {
   const navigate = useNavigate()
   const qc = useQueryClient()
   const [message, setMessage] = useState<{ type: "ok" | "error"; text: string } | null>(null)
@@ -61,8 +61,8 @@ export function ConfigPanel({ component, configSection, onRefetch }: ConfigPanel
         <h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider mb-4">
           Configuration
         </h2>
-        <ComponentFields
-          component={component}
+        <DeploymentFields
+          deployment={deployment}
           onSave={handleSave}
           onDelete={handleDelete}
         />
diff --git a/app/src/pages/ConfigEditor.tsx b/app/src/pages/ConfigEditor.tsx
index abdb7dc..a8cb794 100644
--- a/app/src/pages/ConfigEditor.tsx
+++ b/app/src/pages/ConfigEditor.tsx
@@ -4,8 +4,8 @@ import { ArrowLeft, Check, Loader2, Zap } from "lucide-react"
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { apiClient } from "@/services/api/client"
 import type { DeploymentDetail } from "@/types"
-import { AddComponent } from "@/components/AddComponent"
-import { ComponentEditor } from "@/components/ComponentEditor"
+import { AddDeployment } from "@/components/AddDeployment"
+import { DeploymentEditor } from "@/components/DeploymentEditor"
 
 interface ApplyResult {
   ok: boolean
@@ -124,18 +124,18 @@ export function ConfigEditorPage() {
       )}
 
       {isLoading ? (
-        <p className="text-[var(--muted)]">Loading components...</p>
+        <p className="text-[var(--muted)]">Loading entries...</p>
       ) : (
         <div className="space-y-2">
           {components?.map((comp) => (
-            <ComponentEditor
+            <DeploymentEditor
               key={comp.id}
-              component={comp}
+              deployment={comp}
               onSave={handleSave}
               onDelete={handleDelete}
             />
           ))}
-          <AddComponent
+          <AddDeployment
             existingNames={components?.map((c) => c.id) ?? []}
             onAdd={handleSave}
           />
diff --git a/app/src/pages/Dashboard.tsx b/app/src/pages/Dashboard.tsx
index 8c01c68..0e2708a 100644
--- a/app/src/pages/Dashboard.tsx
+++ b/app/src/pages/Dashboard.tsx
@@ -4,7 +4,7 @@ import { MeshPanel } from "@/components/MeshPanel"
 import { NodeBar } from "@/components/NodeBar"
 import { ServiceSection } from "@/components/ServiceSection"
 import { ScheduledSection } from "@/components/ScheduledSection"
-import { ComponentTable } from "@/components/ComponentTable"
+import { ProgramTable } from "@/components/ProgramTable"
 import { SectionHeader } from "@/components/SectionHeader"
 
 
@@ -55,7 +55,7 @@ export function Dashboard() {
           {programs && programs.length > 0 && (
             <section>
               <SectionHeader section="program" />
-              <ComponentTable components={programs} />
+              <ProgramTable programs={programs} />
             </section>
           )}
         </div>
diff --git a/app/src/pages/NodeDetail.tsx b/app/src/pages/NodeDetail.tsx
index 355ee15..a30b13d 100644
--- a/app/src/pages/NodeDetail.tsx
+++ b/app/src/pages/NodeDetail.tsx
@@ -62,7 +62,7 @@ export function NodeDetailPage() {
           <table className="w-full text-sm">
             <thead>
               <tr className="bg-[var(--card)] border-b border-[var(--border)] text-left">
-                <th className="px-3 py-2 font-medium text-[var(--muted)]">Component</th>
+                <th className="px-3 py-2 font-medium text-[var(--muted)]">Deployment</th>
                 <th className="px-3 py-2 font-medium text-[var(--muted)]">Behavior</th>
                 <th className="px-3 py-2 font-medium text-[var(--muted)]">Stack</th>
                 <th className="px-3 py-2 font-medium text-[var(--muted)]">Runner</th>
diff --git a/app/src/pages/ProgramDetail.tsx b/app/src/pages/ProgramDetail.tsx
index ab458cf..83eca73 100644
--- a/app/src/pages/ProgramDetail.tsx
+++ b/app/src/pages/ProgramDetail.tsx
@@ -9,7 +9,7 @@ import { ProgramActions, ActionOutputPanel, type ActionOutput } from "@/componen
 export function ProgramDetailPage() {
   useEventStream()
   const { name } = useParams<{ name: string }>()
-  const { data: component, isLoading, error, refetch } = useProgram(name ?? "")
+  const { data: deployment, isLoading, error, refetch } = useProgram(name ?? "")
   const [actionOutput, setActionOutput] = useState<ActionOutput | null>(null)
 
   if (isLoading) {
@@ -18,7 +18,7 @@ export function ProgramDetailPage() {
     )
   }
 
-  if (error || !component) {
+  if (error || !deployment) {
     return (
       <div className="max-w-3xl mx-auto px-6 py-8">
         <DetailHeader backTo="/" backLabel="Back" name={name ?? ""} />
@@ -32,12 +32,12 @@ export function ProgramDetailPage() {
       <DetailHeader
         backTo="/"
         backLabel="Back to Programs"
-        name={component.id}
-        behavior={component.behavior}
-        stack={component.stack}
-        source={component.source}
+        name={deployment.id}
+        behavior={deployment.behavior}
+        stack={deployment.stack}
+        source={deployment.source}
       >
-        <ProgramActions name={component.id} actions={component.actions} installed={component.installed} onOutput={setActionOutput} />
+        <ProgramActions name={deployment.id} actions={deployment.actions} installed={deployment.installed} onOutput={setActionOutput} />
       </DetailHeader>
 
       {actionOutput && actionOutput.action && (
@@ -46,8 +46,8 @@ export function ProgramDetailPage() {
         </div>
       )}
 
-      {component.description && (
-        <p className="text-sm text-[var(--muted)] -mt-4 mb-6">{component.description}</p>
+      {deployment.description && (
+        <p className="text-sm text-[var(--muted)] -mt-4 mb-6">{deployment.description}</p>
       )}
 
       <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
@@ -58,48 +58,48 @@ export function ProgramDetailPage() {
           Where the source lives and how castle works with it.
         </p>
         <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm mb-4">
-          {component.source && (
+          {deployment.source && (
             <>
               <span className="text-[var(--muted)]">Source</span>
-              <span className="font-mono break-all">{component.source}</span>
+              <span className="font-mono break-all">{deployment.source}</span>
             </>
           )}
-          {component.repo && (
+          {deployment.repo && (
             <>
               <span className="text-[var(--muted)]">Repo</span>
               <span className="font-mono break-all">
-                {component.repo}
-                {component.ref ? ` @ ${component.ref}` : ""}
+                {deployment.repo}
+                {deployment.ref ? ` @ ${deployment.ref}` : ""}
               </span>
             </>
           )}
-          {component.version && (
+          {deployment.version && (
             <>
               <span className="text-[var(--muted)]">Version</span>
-              <span>{component.version}</span>
+              <span>{deployment.version}</span>
             </>
           )}
-          {component.runner && (
+          {deployment.runner && (
             <>
               <span className="text-[var(--muted)]">Runner</span>
-              <span>{runnerLabel(component.runner)}</span>
+              <span>{runnerLabel(deployment.runner)}</span>
             </>
           )}
-          {component.active !== null && (
+          {deployment.active !== null && (
             <>
               <span className="text-[var(--muted)]">Active</span>
-              <span className={component.active ? "text-green-400" : "text-[var(--muted)]"}>
-                {component.active ? "● active" : "○ inactive"}
+              <span className={deployment.active ? "text-green-400" : "text-[var(--muted)]"}>
+                {deployment.active ? "● active" : "○ inactive"}
               </span>
             </>
           )}
         </div>
 
-        {component.commands && Object.keys(component.commands).length > 0 && (
+        {deployment.commands && Object.keys(deployment.commands).length > 0 && (
           <div className="mb-4">
             <span className="text-sm text-[var(--muted)] block mb-1">Commands</span>
             <div className="space-y-1">
-              {Object.entries(component.commands).map(([verb, cmds]) => (
+              {Object.entries(deployment.commands).map(([verb, cmds]) => (
                 <div key={verb} className="flex gap-2 text-xs">
                   <span className="text-[var(--muted)] w-20 shrink-0">{verb}</span>
                   <span className="font-mono break-all">
@@ -111,11 +111,11 @@ export function ProgramDetailPage() {
           </div>
         )}
 
-        {component.system_dependencies.length > 0 && (
+        {deployment.system_dependencies.length > 0 && (
           <div className="mb-4">
             <span className="text-sm text-[var(--muted)] block mb-1">System Dependencies</span>
             <div className="flex flex-wrap gap-1">
-              {component.system_dependencies.map((dep) => (
+              {deployment.system_dependencies.map((dep) => (
                 <span
                   key={dep}
                   className="text-xs px-2 py-0.5 rounded bg-amber-900/30 text-amber-400 border border-amber-800"
@@ -128,7 +128,7 @@ export function ProgramDetailPage() {
         )}
       </div>
 
-      <ConfigPanel component={component} configSection="programs" onRefetch={refetch} />
+      <ConfigPanel deployment={deployment} configSection="programs" onRefetch={refetch} />
     </div>
   )
 }
diff --git a/app/src/pages/ProgramRedirect.tsx b/app/src/pages/ProgramRedirect.tsx
index f3f176a..f2edcc0 100644
--- a/app/src/pages/ProgramRedirect.tsx
+++ b/app/src/pages/ProgramRedirect.tsx
@@ -1,9 +1,9 @@
 import { useParams, Navigate } from "react-router-dom"
-import { useComponent } from "@/services/api/hooks"
+import { useDeployment } from "@/services/api/hooks"
 
 export function ProgramRedirect() {
   const { name } = useParams<{ name: string }>()
-  const { data: component, isLoading, error } = useComponent(name ?? "")
+  const { data: deployment, isLoading, error } = useDeployment(name ?? "")
 
   if (isLoading) {
     return (
@@ -11,15 +11,15 @@ export function ProgramRedirect() {
     )
   }
 
-  if (error || !component) {
+  if (error || !deployment) {
     return <Navigate to={`/programs/${name}`} replace />
   }
 
-  if (component.managed && !component.schedule) {
+  if (deployment.managed && !deployment.schedule) {
     return <Navigate to={`/services/${name}`} replace />
   }
 
-  if (component.managed && component.schedule) {
+  if (deployment.managed && deployment.schedule) {
     return <Navigate to={`/jobs/${name}`} replace />
   }
 
diff --git a/app/src/pages/ScheduledDetail.tsx b/app/src/pages/ScheduledDetail.tsx
index 473271e..67b7bfe 100644
--- a/app/src/pages/ScheduledDetail.tsx
+++ b/app/src/pages/ScheduledDetail.tsx
@@ -12,7 +12,7 @@ export function ScheduledDetailPage() {
   useEventStream()
   const logRef = useRef<LogViewerHandle>(null)
   const { name } = useParams<{ name: string }>()
-  const { data: component, isLoading, error, refetch } = useJob(name ?? "")
+  const { data: deployment, isLoading, error, refetch } = useJob(name ?? "")
   const { data: statusResp } = useStatus()
   const health = statusResp?.statuses.find((s) => s.id === name)
 
@@ -22,7 +22,7 @@ export function ScheduledDetailPage() {
     )
   }
 
-  if (error || !component) {
+  if (error || !deployment) {
     return (
       <div className="max-w-3xl mx-auto px-6 py-8">
         <DetailHeader backTo="/" backLabel="Back" name={name ?? ""} />
@@ -36,14 +36,14 @@ export function ScheduledDetailPage() {
       <DetailHeader
         backTo="/"
         backLabel="Back to Jobs"
-        name={component.id}
-        stack={component.stack}
-        source={component.source}
+        name={deployment.id}
+        stack={deployment.stack}
+        source={deployment.source}
       >
-        <ServiceControls name={component.id} health={health} />
+        <ServiceControls name={deployment.id} health={health} />
       </DetailHeader>
 
-      {component.schedule && (
+      {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
@@ -52,13 +52,13 @@ export function ScheduledDetailPage() {
             <span className="text-[var(--muted)]">Cron</span>
             <span className="flex items-center gap-2 font-mono">
               <Clock size={14} className="text-[var(--muted)]" />
-              {component.schedule}
+              {deployment.schedule}
             </span>
-            {component.systemd && (
+            {deployment.systemd && (
               <>
                 <span className="text-[var(--muted)]">Timer unit</span>
                 <span className="font-mono">
-                  {component.systemd.unit_name.replace(".service", ".timer")}
+                  {deployment.systemd.unit_name.replace(".service", ".timer")}
                 </span>
               </>
             )}
@@ -66,13 +66,13 @@ export function ScheduledDetailPage() {
         </div>
       )}
 
-      {component.systemd && (
-        <SystemdPanel name={component.id} systemd={component.systemd} />
+      {deployment.systemd && (
+        <SystemdPanel name={deployment.id} systemd={deployment.systemd} />
       )}
 
-      <ConfigPanel component={component} configSection="jobs" onRefetch={refetch} />
+      <ConfigPanel deployment={deployment} configSection="jobs" onRefetch={refetch} />
 
-      {component.managed && (
+      {deployment.managed && (
         <div className="mb-6">
           <div className="flex items-center justify-between mb-3">
             <h2 className="text-lg font-semibold">Logs</h2>
@@ -83,7 +83,7 @@ export function ScheduledDetailPage() {
               <Trash2 size={14} /> Clear
             </button>
           </div>
-          <LogViewer ref={logRef} name={component.id} />
+          <LogViewer ref={logRef} name={deployment.id} />
         </div>
       )}
     </div>
diff --git a/app/src/pages/ServiceDetail.tsx b/app/src/pages/ServiceDetail.tsx
index abf176e..37da64a 100644
--- a/app/src/pages/ServiceDetail.tsx
+++ b/app/src/pages/ServiceDetail.tsx
@@ -14,7 +14,7 @@ export function ServiceDetailPage() {
   useEventStream()
   const logRef = useRef<LogViewerHandle>(null)
   const { name } = useParams<{ name: string }>()
-  const { data: component, isLoading, error, refetch } = useService(name ?? "")
+  const { data: deployment, isLoading, error, refetch } = useService(name ?? "")
   const { data: statusResp } = useStatus()
   const health = statusResp?.statuses.find((s) => s.id === name)
   const isGateway = name === "castle-gateway"
@@ -26,7 +26,7 @@ export function ServiceDetailPage() {
     )
   }
 
-  if (error || !component) {
+  if (error || !deployment) {
     return (
       <div className="max-w-3xl mx-auto px-6 py-8">
         <DetailHeader backTo="/" backLabel="Back" name={name ?? ""} />
@@ -35,21 +35,21 @@ export function ServiceDetailPage() {
     )
   }
 
-  const runner = (component.manifest.run as Record<string, unknown>)?.runner as string | undefined
+  const runner = (deployment.manifest.run as Record<string, unknown>)?.runner as string | undefined
 
   return (
     <div className="max-w-3xl mx-auto px-6 py-8">
       <DetailHeader
         backTo="/"
         backLabel="Back to Services"
-        name={component.id}
+        name={deployment.id}
         behavior="daemon"
-        stack={component.stack}
-        source={component.source}
+        stack={deployment.stack}
+        source={deployment.source}
       >
         <div className="flex items-center gap-2">
           {health && <HealthBadge status={health.status} latency={health.latency_ms} />}
-          <ServiceControls name={component.id} health={health} />
+          <ServiceControls name={deployment.id} health={health} />
         </div>
       </DetailHeader>
 
@@ -58,28 +58,28 @@ export function ServiceDetailPage() {
           Overview
         </h2>
         <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
-          {component.port && (
+          {deployment.port && (
             <>
               <span className="text-[var(--muted)]">Port</span>
               <span className="flex items-center gap-1 font-mono">
-                <Server size={12} />:{component.port}
+                <Server size={12} />:{deployment.port}
               </span>
             </>
           )}
-          {component.health_path && (
+          {deployment.health_path && (
             <>
               <span className="text-[var(--muted)]">Health</span>
-              <span className="font-mono">{component.health_path}</span>
+              <span className="font-mono">{deployment.health_path}</span>
             </>
           )}
-          {component.proxy_path && (
+          {deployment.proxy_path && (
             <>
               <span className="text-[var(--muted)]">Proxy</span>
               <a
-                href={component.proxy_path + "/"}
+                href={deployment.proxy_path + "/"}
                 className="flex items-center gap-1 text-[var(--primary)] hover:underline font-mono"
               >
-                <ExternalLink size={12} />{component.proxy_path}
+                <ExternalLink size={12} />{deployment.proxy_path}
               </a>
             </>
           )}
@@ -89,17 +89,17 @@ export function ServiceDetailPage() {
               <span className="flex items-center gap-1">
                 <Terminal size={12} />
                 {runnerLabel(runner)}
-                {(component.manifest.run as Record<string, string>)?.program && (
-                  <> &middot; {(component.manifest.run as Record<string, string>).program}</>
+                {(deployment.manifest.run as Record<string, string>)?.program && (
+                  <> &middot; {(deployment.manifest.run as Record<string, string>).program}</>
                 )}
               </span>
             </>
           )}
-          {component.port && (
+          {deployment.port && (
             <>
               <span className="text-[var(--muted)]">Docs</span>
               <a
-                href={`http://localhost:${component.port}/docs`}
+                href={`http://localhost:${deployment.port}/docs`}
                 className="text-[var(--primary)] hover:underline"
               >
                 OpenAPI docs
@@ -109,8 +109,8 @@ export function ServiceDetailPage() {
         </div>
       </div>
 
-      {component.systemd && (
-        <SystemdPanel name={component.id} systemd={component.systemd} />
+      {deployment.systemd && (
+        <SystemdPanel name={deployment.id} systemd={deployment.systemd} />
       )}
 
       {isGateway && caddyfile?.content && (
@@ -127,9 +127,9 @@ export function ServiceDetailPage() {
         </div>
       )}
 
-      <ConfigPanel component={component} configSection="services" onRefetch={refetch} />
+      <ConfigPanel deployment={deployment} configSection="services" onRefetch={refetch} />
 
-      {component.managed && (
+      {deployment.managed && (
         <div className="mb-6">
           <div className="flex items-center justify-between mb-3">
             <h2 className="text-lg font-semibold">Logs</h2>
@@ -140,7 +140,7 @@ export function ServiceDetailPage() {
               <Trash2 size={14} /> Clear
             </button>
           </div>
-          <LogViewer ref={logRef} name={component.id} />
+          <LogViewer ref={logRef} name={deployment.id} />
         </div>
       )}
     </div>
diff --git a/app/src/services/api/hooks.ts b/app/src/services/api/hooks.ts
index 5fd6eaf..5b16790 100644
--- a/app/src/services/api/hooks.ts
+++ b/app/src/services/api/hooks.ts
@@ -18,8 +18,8 @@ import type {
   NodeDetail,
 } from "@/types"
 
-// Legacy compat hook — used by ConfigEditorPage and ProgramRedirect
-export function useComponent(name: string) {
+// Compat hook for the /deployments/{name} unified detail endpoint
+export function useDeployment(name: string) {
   return useQuery({
     queryKey: ["deployments", name],
     queryFn: () => apiClient.get<DeploymentDetail>(`/deployments/${name}`),
diff --git a/app/src/types/index.ts b/app/src/types/index.ts
index c8d9f36..410b2ef 100644
--- a/app/src/types/index.ts
+++ b/app/src/types/index.ts
@@ -60,7 +60,7 @@ export interface ProgramDetail extends ProgramSummary {
   manifest: Record<string, unknown>
 }
 
-// Union for shared detail components (ConfigPanel, ComponentFields)
+// Union for shared detail components (ConfigPanel, DeploymentFields)
 export type AnyDetail = ServiceDetail | JobDetail | ProgramDetail
 
 // Legacy unified type — kept for NodeDetail.deployed and compat endpoint