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}
        />