refactor(app): rename Component* UI widgets to accurate domain names

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.
2026-06-14 12:13:41 -07:00
parent a5dcb6b346
commit 0515faadfd
17 changed files with 151 additions and 151 deletions
--- a/app/src/components/AddDeployment.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>
--- a/app/src/components/DeploymentEditor.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}
          />
--- a/app/src/components/DeploymentFields.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 />
--- 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>
--- a/app/src/components/ComponentTable.tsx
+++ b/app/src/components/ComponentTable.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>
  )
--- a/app/src/components/ComponentCard.tsx
+++ b/app/src/components/ComponentCard.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
--- 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>
--- 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}
        />
--- 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}
          />
--- 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>
--- 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>
--- 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>
  )
 }
--- 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 />
  }

--- 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>
--- 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>
--- 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}`),
--- 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