feat: Introduce job and service categorization for components, enhancing routing and display logic across the application

app/src/components/ComponentCard.tsx

@@ -26,7 +26,7 @@ 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={`/component/${component.id}`}
+          to={`/services/${component.id}`}
           className="text-base font-semibold hover:text-[var(--primary)] transition-colors"
         >
           {component.id}

app/src/components/ComponentTable.tsx

@@ -1,34 +1,25 @@
 import { useMemo, useState } from "react"
 import { Link } from "react-router-dom"
-import { ArrowDown, ArrowUp, ArrowUpDown, Download, Play, RefreshCw, Square, Trash2 } from "lucide-react"
-import type { ComponentSummary, HealthStatus } from "@/types"
-import { useServiceAction, useToolAction } from "@/services/api/hooks"
-import { HealthBadge } from "./HealthBadge"
+import { ArrowDown, ArrowUp, ArrowUpDown, Plug, Unplug } from "lucide-react"
+import type { ComponentSummary } from "@/types"
+import { useToolAction } from "@/services/api/hooks"
 import { BehaviorBadge } from "./BehaviorBadge"
 import { StackBadge } from "./StackBadge"
 
 interface ComponentTableProps {
   components: ComponentSummary[]
-  statuses: HealthStatus[]
 }
 
 type SortKey = "id" | "stack" | "behavior" | "status"
 type SortDir = "asc" | "desc"
 
-function statusRank(s: HealthStatus | undefined, installed: boolean | null): number {
-  if (s) {
-    if (s.status === "down") return 0
-    if (s.status === "up") return 3
-    return 2
-  }
-  if (installed === false) return 1
-  if (installed === true) return 3
+function installedRank(installed: boolean | null): number {
+  if (installed === false) return 0
+  if (installed === true) return 1
   return 2
 }
 
-export function ComponentTable({ components, statuses }: ComponentTableProps) {
-  const statusMap = useMemo(() => new Map(statuses.map((s) => [s.id, s])), [statuses])
-
+export function ComponentTable({ components }: ComponentTableProps) {
   const [search, setSearch] = useState("")
   const [sortKey, setSortKey] = useState<SortKey>("id")
   const [sortDir, setSortDir] = useState<SortDir>("asc")
@@ -63,12 +54,12 @@ export function ComponentTable({ components, statuses }: ComponentTableProps) {
         case "behavior":
           return dir * (a.behavior ?? "").localeCompare(b.behavior ?? "")
         case "status":
-          return dir * (statusRank(statusMap.get(a.id), a.installed) - statusRank(statusMap.get(b.id), b.installed))
+          return dir * (installedRank(a.installed) - installedRank(b.installed))
         default:
           return 0
       }
     })
-  }, [filtered, sortKey, sortDir, statusMap])
+  }, [filtered, sortKey, sortDir])
 
   return (
     <div>
@@ -97,7 +88,6 @@ export function ComponentTable({ components, statuses }: ComponentTableProps) {
               <ComponentRow
                 key={comp.id}
                 component={comp}
-                health={statusMap.get(comp.id)}
               />
             ))}
             {sorted.length === 0 && (
@@ -158,22 +148,17 @@ function InstalledBadge({ installed }: { installed: boolean }) {
 
 function ComponentRow({
   component,
-  health,
 }: {
   component: ComponentSummary
-  health?: HealthStatus
 }) {
-  const hasHttp = component.port != null
   const isTool = component.installed !== null
-  const { mutate: serviceAction, isPending: servicePending } = useServiceAction()
   const { mutate: toolAction, isPending: toolPending } = useToolAction()
-  const isDown = health?.status === "down"
 
   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={`/component/${component.id}`}
+          to={`/components/${component.id}`}
           className="font-medium hover:text-[var(--primary)] transition-colors"
         >
           {component.id}
@@ -191,49 +176,14 @@ function ComponentRow({
         <BehaviorBadge behavior={component.behavior} />
       </td>
       <td className="px-3 py-2.5">
-        {health ? (
-          <HealthBadge status={health.status} latency={health.latency_ms} />
-        ) : hasHttp ? (
-          <HealthBadge status="unknown" />
-        ) : isTool ? (
+        {isTool ? (
           <InstalledBadge installed={component.installed!} />
         ) : (
           <span className="text-[var(--muted)]">—</span>
         )}
       </td>
       <td className="px-3 py-2.5">
-        {component.managed ? (
-          <div className="flex items-center gap-1">
-            {isDown && (
-              <button
-                onClick={() => serviceAction({ name: component.id, action: "start" })}
-                disabled={servicePending}
-                className="p-1 rounded hover:bg-green-800/30 text-green-400 transition-colors disabled:opacity-40"
-                title="Start"
-              >
-                <Play size={14} />
-              </button>
-            )}
-            <button
-              onClick={() => serviceAction({ name: component.id, action: "restart" })}
-              disabled={servicePending}
-              className="p-1 rounded hover:bg-blue-800/30 text-blue-400 transition-colors disabled:opacity-40"
-              title="Restart"
-            >
-              <RefreshCw size={14} />
-            </button>
-            {!isDown && (
-              <button
-                onClick={() => serviceAction({ name: component.id, action: "stop" })}
-                disabled={servicePending}
-                className="p-1 rounded hover:bg-red-800/30 text-red-400 transition-colors disabled:opacity-40"
-                title="Stop"
-              >
-                <Square size={14} />
-              </button>
-            )}
-          </div>
-        ) : isTool ? (
+        {isTool ? (
           <div className="flex items-center gap-1">
             {component.installed ? (
               <button
@@ -242,7 +192,7 @@ function ComponentRow({
                 className="p-1 rounded hover:bg-red-800/30 text-red-400 transition-colors disabled:opacity-40"
                 title="Uninstall from PATH"
               >
-                <Trash2 size={14} />
+                <Unplug size={14} />
               </button>
             ) : (
               <button
@@ -251,7 +201,7 @@ function ComponentRow({
                 className="p-1 rounded hover:bg-green-800/30 text-green-400 transition-colors disabled:opacity-40"
                 title="Install to PATH"
               >
-                <Download size={14} />
+                <Plug size={14} />
               </button>
             )}
           </div>

app/src/components/ScheduledSection.tsx

@@ -46,7 +46,7 @@ function ScheduledRow({ job, health }: { job: ComponentSummary; health?: HealthS
     <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={`/component/${job.id}`}
+          to={`/jobs/${job.id}`}
           className="font-medium hover:text-[var(--primary)] transition-colors"
         >
           {job.id}

app/src/components/detail/ConfigPanel.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { useQueryClient } from "@tanstack/react-query"
+import { Check } from "lucide-react"
+import { apiClient } from "@/services/api/client"
+import type { ComponentDetail } from "@/types"
+import { ComponentFields } from "@/components/ComponentFields"
+
+interface ConfigPanelProps {
+  component: ComponentDetail
+  configSection: "services" | "jobs" | "components"
+  onRefetch: () => void
+}
+
+export function ConfigPanel({ component, configSection, onRefetch }: ConfigPanelProps) {
+  const navigate = useNavigate()
+  const qc = useQueryClient()
+  const [message, setMessage] = useState<{ type: "ok" | "error"; text: string } | null>(null)
+
+  const handleSave = async (compName: string, config: Record<string, unknown>) => {
+    setMessage(null)
+    try {
+      await apiClient.put(`/config/${configSection}/${compName}`, { config })
+      setMessage({ type: "ok", text: "Saved to castle.yaml" })
+      onRefetch()
+      qc.invalidateQueries({ queryKey: ["components"] })
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e)
+      setMessage({ type: "error", text: msg })
+    }
+  }
+
+  const handleDelete = async (compName: string) => {
+    try {
+      await apiClient.delete(`/config/${configSection}/${compName}`)
+      qc.invalidateQueries({ queryKey: ["components"] })
+      navigate("/")
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e)
+      setMessage({ type: "error", text: msg })
+    }
+  }
+
+  return (
+    <>
+      {message && (
+        <div
+          className={`mb-4 px-3 py-2 rounded text-sm ${
+            message.type === "ok"
+              ? "bg-green-900/30 text-green-300 border border-green-800"
+              : "bg-red-900/30 text-red-300 border border-red-800"
+          }`}
+        >
+          <span className="flex items-center gap-1.5">
+            {message.type === "ok" && <Check size={14} />}
+            {message.text}
+          </span>
+        </div>
+      )}
+      <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-4">
+          Configuration
+        </h2>
+        <ComponentFields
+          component={component}
+          onSave={handleSave}
+          onDelete={handleDelete}
+        />
+      </div>
+    </>
+  )
+}

app/src/components/detail/DetailHeader.tsx

@@ -0,0 +1,37 @@
+import { Link } from "react-router-dom"
+import { ArrowLeft } from "lucide-react"
+import { BehaviorBadge } from "@/components/BehaviorBadge"
+import { StackBadge } from "@/components/StackBadge"
+
+interface DetailHeaderProps {
+  backTo: string
+  backLabel: string
+  name: string
+  behavior?: string | null
+  stack?: string | null
+  source?: string | null
+  children?: React.ReactNode
+}
+
+export function DetailHeader({ backTo, backLabel, name, behavior, stack, source, children }: DetailHeaderProps) {
+  return (
+    <>
+      <Link to={backTo} className="text-[var(--primary)] hover:underline flex items-center gap-1 mb-6">
+        <ArrowLeft size={16} /> {backLabel}
+      </Link>
+
+      <div className="flex items-start justify-between mb-4">
+        <h1 className="text-2xl font-bold">{name}</h1>
+        {children}
+      </div>
+
+      <div className="flex items-center gap-3 mb-6">
+        <BehaviorBadge behavior={behavior ?? null} />
+        <StackBadge stack={stack ?? null} />
+        {source && (
+          <span className="text-sm text-[var(--muted)] font-mono">{source}</span>
+        )}
+      </div>
+    </>
+  )
+}

app/src/components/detail/ServiceControls.tsx

@@ -0,0 +1,46 @@
+import { Play, RefreshCw, Square } from "lucide-react"
+import { useServiceAction } from "@/services/api/hooks"
+import type { HealthStatus } from "@/types"
+
+interface ServiceControlsProps {
+  name: string
+  health?: HealthStatus
+}
+
+export function ServiceControls({ name, health }: ServiceControlsProps) {
+  const { mutate, isPending } = useServiceAction()
+  const isDown = health?.status === "down"
+
+  return (
+    <div className="flex items-center gap-1">
+      {isDown && (
+        <button
+          onClick={() => mutate({ name, action: "start" })}
+          disabled={isPending}
+          className="p-1.5 rounded hover:bg-green-800/30 text-green-400 transition-colors disabled:opacity-40"
+          title="Start"
+        >
+          <Play size={16} />
+        </button>
+      )}
+      <button
+        onClick={() => mutate({ name, action: "restart" })}
+        disabled={isPending}
+        className="p-1.5 rounded hover:bg-blue-800/30 text-blue-400 transition-colors disabled:opacity-40"
+        title="Restart"
+      >
+        <RefreshCw size={16} />
+      </button>
+      {!isDown && (
+        <button
+          onClick={() => mutate({ name, action: "stop" })}
+          disabled={isPending}
+          className="p-1.5 rounded hover:bg-red-800/30 text-red-400 transition-colors disabled:opacity-40"
+          title="Stop"
+        >
+          <Square size={16} />
+        </button>
+      )}
+    </div>
+  )
+}

app/src/components/detail/SystemdPanel.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react"
+import { useSystemdUnit } from "@/services/api/hooks"
+import type { SystemdInfo } from "@/types"
+
+interface SystemdPanelProps {
+  name: string
+  systemd: SystemdInfo
+}
+
+export function SystemdPanel({ name, systemd }: SystemdPanelProps) {
+  const [showUnit, setShowUnit] = useState(false)
+  const { data: unitData } = useSystemdUnit(name, showUnit)
+
+  return (
+    <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
+      <div className="flex items-center justify-between mb-1">
+        <h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider">
+          Systemd
+        </h2>
+        <button
+          onClick={() => setShowUnit((v) => !v)}
+          className="text-xs text-[var(--primary)] hover:underline"
+        >
+          {showUnit ? "Hide unit file" : "View unit file"}
+        </button>
+      </div>
+      <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm mt-3">
+        <span className="text-[var(--muted)]">Unit</span>
+        <span className="font-mono">{systemd.unit_name}</span>
+        <span className="text-[var(--muted)]">Path</span>
+        <span className="font-mono">{systemd.unit_path}</span>
+        {systemd.timer && (
+          <>
+            <span className="text-[var(--muted)]">Timer</span>
+            <span>Active</span>
+          </>
+        )}
+      </div>
+      {showUnit && unitData && (
+        <div className="mt-4 space-y-3">
+          <div>
+            <span className="text-xs text-[var(--muted)] block mb-1">{systemd.unit_name}</span>
+            <pre className="text-sm whitespace-pre-wrap bg-[var(--background)] rounded p-3 border border-[var(--border)] font-mono overflow-x-auto">
+              {unitData.service}
+            </pre>
+          </div>
+          {unitData.timer && (
+            <div>
+              <span className="text-xs text-[var(--muted)] block mb-1">
+                {systemd.unit_name.replace(".service", ".timer")}
+              </span>
+              <pre className="text-sm whitespace-pre-wrap bg-[var(--background)] rounded p-3 border border-[var(--border)] font-mono overflow-x-auto">
+                {unitData.timer}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

app/src/lib/labels.ts

@@ -32,7 +32,7 @@ export const STACK_LABELS: Record<string, string> = {
 
 export const SECTION_HEADERS: Record<string, { title: string; subtitle: string }> = {
   service: { title: "Services", subtitle: "Long-running processes" },
-  scheduled: { title: "Scheduled", subtitle: "Systemd timers" },
+  scheduled: { title: "Scheduled Jobs", subtitle: "Systemd timers" },
   component: { title: "Components", subtitle: "Software catalog" },
 }
 

app/src/pages/ComponentDetail.tsx

@@ -1,76 +1,28 @@
-import { useState } from "react"
-import { useParams, Link, useNavigate } from "react-router-dom"
-import { ArrowLeft, Check, Play, RefreshCw, Square } from "lucide-react"
-import { useQueryClient } from "@tanstack/react-query"
-import { apiClient } from "@/services/api/client"
-import { useComponent, useStatus, useServiceAction, useEventStream, useToolDetail, useCaddyfile, useSystemdUnit } from "@/services/api/hooks"
+import { useParams } from "react-router-dom"
+import { Plug, Unplug } from "lucide-react"
+import { useComponent, useEventStream, useToolDetail, useToolAction } from "@/services/api/hooks"
 import { runnerLabel } from "@/lib/labels"
-import { ComponentFields } from "@/components/ComponentFields"
-import { HealthBadge } from "@/components/HealthBadge"
-import { LogViewer } from "@/components/LogViewer"
-import { BehaviorBadge } from "@/components/BehaviorBadge"
-import { StackBadge } from "@/components/StackBadge"
+import { DetailHeader } from "@/components/detail/DetailHeader"
+import { ConfigPanel } from "@/components/detail/ConfigPanel"
 
 export function ComponentDetailPage() {
   useEventStream()
-  const navigate = useNavigate()
-  const qc = useQueryClient()
   const { name } = useParams<{ name: string }>()
   const { data: component, isLoading, error, refetch } = useComponent(name ?? "")
-  const { data: statusResp } = useStatus()
-  const { mutate, isPending } = useServiceAction()
-  const health = statusResp?.statuses.find((s) => s.id === name)
-  const isDown = health?.status === "down"
   const isTool = component?.behavior === "tool"
   const { data: toolDetail } = useToolDetail(isTool ? (name ?? "") : "")
-  const isGateway = name === "castle-gateway"
-  const { data: caddyfile } = useCaddyfile(isGateway)
-  const [showUnit, setShowUnit] = useState(false)
-  const { data: unitData } = useSystemdUnit(name ?? "", showUnit && !!component?.systemd)
-  const [message, setMessage] = useState<{ type: "ok" | "error"; text: string } | null>(null)
-
-  const configSection = component?.behavior === "daemon" ? "services"
-    : component?.schedule ? "jobs"
-    : "components"
-
-  const handleSave = async (compName: string, config: Record<string, unknown>) => {
-    setMessage(null)
-    try {
-      await apiClient.put(`/config/${configSection}/${compName}`, { config })
-      setMessage({ type: "ok", text: "Saved to castle.yaml" })
-      refetch()
-      qc.invalidateQueries({ queryKey: ["components"] })
-    } catch (e: unknown) {
-      const msg = e instanceof Error ? e.message : String(e)
-      setMessage({ type: "error", text: msg })
-    }
-  }
-
-  const handleDelete = async (compName: string) => {
-    try {
-      await apiClient.delete(`/config/${configSection}/${compName}`)
-      qc.invalidateQueries({ queryKey: ["components"] })
-      navigate("/")
-    } catch (e: unknown) {
-      const msg = e instanceof Error ? e.message : String(e)
-      setMessage({ type: "error", text: msg })
-    }
-  }
+  const { mutate: toolAction, isPending: toolPending } = useToolAction()
 
   if (isLoading) {
     return (
-      <div className="max-w-3xl mx-auto px-6 py-8 text-[var(--muted)]">
-        Loading...
-      </div>
+      <div className="max-w-3xl mx-auto px-6 py-8 text-[var(--muted)]">Loading...</div>
     )
   }
 
   if (error || !component) {
     return (
       <div className="max-w-3xl mx-auto px-6 py-8">
-        <Link to="/" className="text-[var(--primary)] hover:underline flex items-center gap-1 mb-4">
-          <ArrowLeft size={16} /> Back
-        </Link>
+        <DetailHeader backTo="/" backLabel="Back" name={name ?? ""} />
         <p className="text-red-400">Component not found</p>
       </div>
     )
@@ -78,70 +30,39 @@ export function ComponentDetailPage() {
 
   return (
     <div className="max-w-3xl mx-auto px-6 py-8">
-      <Link to="/" className="text-[var(--primary)] hover:underline flex items-center gap-1 mb-6">
-        <ArrowLeft size={16} /> Back
-      </Link>
-
-      <div className="flex items-start justify-between mb-4">
-        <h1 className="text-2xl font-bold">{component.id}</h1>
-        <div className="flex items-center gap-2">
-          {health && <HealthBadge status={health.status} latency={health.latency_ms} />}
-          {component.managed && (
-            <div className="flex items-center gap-1 ml-2">
-              {isDown && (
-                <button
-                  onClick={() => mutate({ name: component.id, action: "start" })}
-                  disabled={isPending}
-                  className="p-1.5 rounded hover:bg-green-800/30 text-green-400 transition-colors disabled:opacity-40"
-                  title="Start"
-                >
-                  <Play size={16} />
-                </button>
-              )}
+      <DetailHeader
+        backTo="/"
+        backLabel="Back to Components"
+        name={component.id}
+        behavior={component.behavior}
+        stack={component.stack}
+        source={component.source}
+      >
+        {isTool && (
+          <div className="flex items-center gap-2">
+            {component.installed ? (
               <button
-                onClick={() => mutate({ name: component.id, action: "restart" })}
-                disabled={isPending}
-                className="p-1.5 rounded hover:bg-blue-800/30 text-blue-400 transition-colors disabled:opacity-40"
-                title="Restart"
+                onClick={() => toolAction({ name: component.id, action: "uninstall" })}
+                disabled={toolPending}
+                className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded border border-red-800 text-red-400 hover:bg-red-800/20 transition-colors disabled:opacity-40"
               >
-                <RefreshCw size={16} />
+                <Unplug size={14} /> Uninstall
               </button>
-              {!isDown && (
-                <button
-                  onClick={() => mutate({ name: component.id, action: "stop" })}
-                  disabled={isPending}
-                  className="p-1.5 rounded hover:bg-red-800/30 text-red-400 transition-colors disabled:opacity-40"
-                  title="Stop"
-                >
-                  <Square size={16} />
-                </button>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div className="flex items-center gap-3 mb-6">
-        <BehaviorBadge behavior={component.behavior} />
-        <StackBadge stack={component.stack} />
-        {component.source && (
-          <span className="text-sm text-[var(--muted)] font-mono">{component.source}</span>
+            ) : (
+              <button
+                onClick={() => toolAction({ name: component.id, action: "install" })}
+                disabled={toolPending}
+                className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded border border-green-800 text-green-400 hover:bg-green-800/20 transition-colors disabled:opacity-40"
+              >
+                <Plug size={14} /> Install to PATH
+              </button>
+            )}
+          </div>
         )}
-      </div>
+      </DetailHeader>
 
-      {message && (
-        <div
-          className={`mb-4 px-3 py-2 rounded text-sm ${
-            message.type === "ok"
-              ? "bg-green-900/30 text-green-300 border border-green-800"
-              : "bg-red-900/30 text-red-300 border border-red-800"
-          }`}
-        >
-          <span className="flex items-center gap-1.5">
-            {message.type === "ok" && <Check size={14} />}
-            {message.text}
-          </span>
-        </div>
+      {component.description && (
+        <p className="text-sm text-[var(--muted)] -mt-4 mb-6">{component.description}</p>
       )}
 
       {toolDetail && (
@@ -171,6 +92,8 @@ export function ComponentDetailPage() {
                 <span>{runnerLabel(toolDetail.runner)}</span>
               </>
             )}
+            <span className="text-[var(--muted)]">Installed</span>
+            <span>{component.installed ? "Yes" : "No"}</span>
           </div>
           {toolDetail.system_dependencies.length > 0 && (
             <div className="mb-4">
@@ -198,85 +121,7 @@ export function ComponentDetailPage() {
         </div>
       )}
 
-      {component.systemd && (
-        <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
-          <div className="flex items-center justify-between mb-1">
-            <h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider">
-              Systemd
-            </h2>
-            <button
-              onClick={() => setShowUnit((v) => !v)}
-              className="text-xs text-[var(--primary)] hover:underline"
-            >
-              {showUnit ? "Hide unit file" : "View unit file"}
-            </button>
-          </div>
-          <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm mt-3">
-            <span className="text-[var(--muted)]">Unit</span>
-            <span className="font-mono">{component.systemd.unit_name}</span>
-            <span className="text-[var(--muted)]">Path</span>
-            <span className="font-mono">{component.systemd.unit_path}</span>
-            {component.systemd.timer && (
-              <>
-                <span className="text-[var(--muted)]">Timer</span>
-                <span>Active</span>
-              </>
-            )}
-          </div>
-          {showUnit && unitData && (
-            <div className="mt-4 space-y-3">
-              <div>
-                <span className="text-xs text-[var(--muted)] block mb-1">{component.systemd.unit_name}</span>
-                <pre className="text-sm whitespace-pre-wrap bg-[var(--background)] rounded p-3 border border-[var(--border)] font-mono overflow-x-auto">
-                  {unitData.service}
-                </pre>
-              </div>
-              {unitData.timer && (
-                <div>
-                  <span className="text-xs text-[var(--muted)] block mb-1">
-                    {component.systemd.unit_name.replace(".service", ".timer")}
-                  </span>
-                  <pre className="text-sm whitespace-pre-wrap bg-[var(--background)] rounded p-3 border border-[var(--border)] font-mono overflow-x-auto">
-                    {unitData.timer}
-                  </pre>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-
-      {isGateway && caddyfile?.content && (
-        <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
-          <h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider mb-1">
-            Caddyfile
-          </h2>
-          <p className="text-xs text-[var(--muted)] mb-3">
-            Generated reverse proxy configuration served by the gateway.
-          </p>
-          <pre className="text-sm whitespace-pre-wrap bg-[var(--background)] rounded p-3 border border-[var(--border)] font-mono overflow-x-auto">
-            {caddyfile.content}
-          </pre>
-        </div>
-      )}
-
-      <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-4">
-          Configuration
-        </h2>
-        <ComponentFields
-          component={component}
-          onSave={handleSave}
-          onDelete={handleDelete}
-        />
-      </div>
-
-      {component.managed && (
-        <div className="mb-6">
-          <h2 className="text-lg font-semibold mb-3">Logs</h2>
-          <LogViewer name={component.id} />
-        </div>
-      )}
+      <ConfigPanel component={component} configSection="components" onRefetch={refetch} />
     </div>
   )
 }

app/src/pages/ComponentRedirect.tsx

@@ -0,0 +1,27 @@
+import { useParams, Navigate } from "react-router-dom"
+import { useComponent } from "@/services/api/hooks"
+
+export function ComponentRedirect() {
+  const { name } = useParams<{ name: string }>()
+  const { data: component, isLoading, error } = useComponent(name ?? "")
+
+  if (isLoading) {
+    return (
+      <div className="max-w-3xl mx-auto px-6 py-8 text-[var(--muted)]">Loading...</div>
+    )
+  }
+
+  if (error || !component) {
+    return <Navigate to={`/components/${name}`} replace />
+  }
+
+  if (component.managed && !component.schedule) {
+    return <Navigate to={`/services/${name}`} replace />
+  }
+
+  if (component.managed && component.schedule) {
+    return <Navigate to={`/scheduled/${name}`} replace />
+  }
+
+  return <Navigate to={`/components/${name}`} replace />
+}

app/src/pages/Dashboard.tsx

@@ -17,10 +17,11 @@ export function Dashboard() {
   const { data: nodes } = useNodes()
   const { data: mesh } = useMeshStatus()
 
-  const { services, scheduled } = useMemo(() => {
-    const svc = (components ?? []).filter((c) => c.managed && !c.schedule)
-    const sch = (components ?? []).filter((c) => c.managed && c.schedule)
-    return { services: svc, scheduled: sch }
+  const { services, scheduled, catalog } = useMemo(() => {
+    const svc = (components ?? []).filter((c) => c.category === "service")
+    const sch = (components ?? []).filter((c) => c.category === "job")
+    const cat = (components ?? []).filter((c) => c.category === "component")
+    return { services: svc, scheduled: sch, catalog: cat }
   }, [components])
 
   const statuses = statusResp?.statuses ?? []
@@ -56,10 +57,10 @@ export function Dashboard() {
           {scheduled.length > 0 && (
             <ScheduledSection jobs={scheduled} statuses={statuses} />
           )}
-          {(components ?? []).length > 0 && (
+          {catalog.length > 0 && (
             <section>
               <SectionHeader section="component" />
-              <ComponentTable components={components ?? []} statuses={statuses} />
+              <ComponentTable components={catalog} />
             </section>
           )}
         </div>

app/src/pages/ScheduledDetail.tsx

@@ -0,0 +1,82 @@
+import { useParams } from "react-router-dom"
+import { Clock } from "lucide-react"
+import { useComponent, useStatus, useEventStream } from "@/services/api/hooks"
+import { LogViewer } from "@/components/LogViewer"
+import { DetailHeader } from "@/components/detail/DetailHeader"
+import { ServiceControls } from "@/components/detail/ServiceControls"
+import { SystemdPanel } from "@/components/detail/SystemdPanel"
+import { ConfigPanel } from "@/components/detail/ConfigPanel"
+
+export function ScheduledDetailPage() {
+  useEventStream()
+  const { name } = useParams<{ name: string }>()
+  const { data: component, isLoading, error, refetch } = useComponent(name ?? "")
+  const { data: statusResp } = useStatus()
+  const health = statusResp?.statuses.find((s) => s.id === name)
+
+  if (isLoading) {
+    return (
+      <div className="max-w-3xl mx-auto px-6 py-8 text-[var(--muted)]">Loading...</div>
+    )
+  }
+
+  if (error || !component) {
+    return (
+      <div className="max-w-3xl mx-auto px-6 py-8">
+        <DetailHeader backTo="/" backLabel="Back" name={name ?? ""} />
+        <p className="text-red-400">Scheduled job not found</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto px-6 py-8">
+      <DetailHeader
+        backTo="/"
+        backLabel="Back to Jobs"
+        name={component.id}
+        behavior={component.behavior}
+        stack={component.stack}
+        source={component.source}
+      >
+        <ServiceControls name={component.id} health={health} />
+      </DetailHeader>
+
+      {component.schedule && (
+        <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
+          <h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider mb-3">
+            Schedule
+          </h2>
+          <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
+            <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}
+            </span>
+            {component.systemd && (
+              <>
+                <span className="text-[var(--muted)]">Timer unit</span>
+                <span className="font-mono">
+                  {component.systemd.unit_name.replace(".service", ".timer")}
+                </span>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {component.systemd && (
+        <SystemdPanel name={component.id} systemd={component.systemd} />
+      )}
+
+      <ConfigPanel component={component} configSection="jobs" onRefetch={refetch} />
+
+      {component.managed && (
+        <div className="mb-6">
+          <h2 className="text-lg font-semibold mb-3">Logs</h2>
+          <LogViewer name={component.id} />
+        </div>
+      )}
+    </div>
+  )
+}

app/src/pages/ServiceDetail.tsx

@@ -0,0 +1,138 @@
+import { useParams } from "react-router-dom"
+import { Server, ExternalLink, Terminal } from "lucide-react"
+import { useComponent, useStatus, useEventStream, useCaddyfile } from "@/services/api/hooks"
+import { runnerLabel } from "@/lib/labels"
+import { HealthBadge } from "@/components/HealthBadge"
+import { LogViewer } from "@/components/LogViewer"
+import { DetailHeader } from "@/components/detail/DetailHeader"
+import { ServiceControls } from "@/components/detail/ServiceControls"
+import { SystemdPanel } from "@/components/detail/SystemdPanel"
+import { ConfigPanel } from "@/components/detail/ConfigPanel"
+
+export function ServiceDetailPage() {
+  useEventStream()
+  const { name } = useParams<{ name: string }>()
+  const { data: component, isLoading, error, refetch } = useComponent(name ?? "")
+  const { data: statusResp } = useStatus()
+  const health = statusResp?.statuses.find((s) => s.id === name)
+  const isGateway = name === "castle-gateway"
+  const { data: caddyfile } = useCaddyfile(isGateway)
+
+  if (isLoading) {
+    return (
+      <div className="max-w-3xl mx-auto px-6 py-8 text-[var(--muted)]">Loading...</div>
+    )
+  }
+
+  if (error || !component) {
+    return (
+      <div className="max-w-3xl mx-auto px-6 py-8">
+        <DetailHeader backTo="/" backLabel="Back" name={name ?? ""} />
+        <p className="text-red-400">Service not found</p>
+      </div>
+    )
+  }
+
+  const runner = (component.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}
+        behavior={component.behavior}
+        stack={component.stack}
+        source={component.source}
+      >
+        <div className="flex items-center gap-2">
+          {health && <HealthBadge status={health.status} latency={health.latency_ms} />}
+          <ServiceControls name={component.id} health={health} />
+        </div>
+      </DetailHeader>
+
+      <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">
+          Overview
+        </h2>
+        <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
+          {component.port && (
+            <>
+              <span className="text-[var(--muted)]">Port</span>
+              <span className="flex items-center gap-1 font-mono">
+                <Server size={12} />:{component.port}
+              </span>
+            </>
+          )}
+          {component.health_path && (
+            <>
+              <span className="text-[var(--muted)]">Health</span>
+              <span className="font-mono">{component.health_path}</span>
+            </>
+          )}
+          {component.proxy_path && (
+            <>
+              <span className="text-[var(--muted)]">Proxy</span>
+              <a
+                href={component.proxy_path + "/"}
+                className="flex items-center gap-1 text-[var(--primary)] hover:underline font-mono"
+              >
+                <ExternalLink size={12} />{component.proxy_path}
+              </a>
+            </>
+          )}
+          {runner && (
+            <>
+              <span className="text-[var(--muted)]">Runner</span>
+              <span className="flex items-center gap-1">
+                <Terminal size={12} />
+                {runnerLabel(runner)}
+                {(component.manifest.run as Record<string, string>)?.tool && (
+                  <> &middot; {(component.manifest.run as Record<string, string>).tool}</>
+                )}
+              </span>
+            </>
+          )}
+          {component.port && (
+            <>
+              <span className="text-[var(--muted)]">Docs</span>
+              <a
+                href={`http://localhost:${component.port}/docs`}
+                className="text-[var(--primary)] hover:underline"
+              >
+                OpenAPI docs
+              </a>
+            </>
+          )}
+        </div>
+      </div>
+
+      {component.systemd && (
+        <SystemdPanel name={component.id} systemd={component.systemd} />
+      )}
+
+      {isGateway && caddyfile?.content && (
+        <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
+          <h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider mb-1">
+            Caddyfile
+          </h2>
+          <p className="text-xs text-[var(--muted)] mb-3">
+            Generated reverse proxy configuration served by the gateway.
+          </p>
+          <pre className="text-sm whitespace-pre-wrap bg-[var(--background)] rounded p-3 border border-[var(--border)] font-mono overflow-x-auto">
+            {caddyfile.content}
+          </pre>
+        </div>
+      )}
+
+      <ConfigPanel component={component} configSection="services" onRefetch={refetch} />
+
+      {component.managed && (
+        <div className="mb-6">
+          <h2 className="text-lg font-semibold mb-3">Logs</h2>
+          <LogViewer name={component.id} />
+        </div>
+      )}
+    </div>
+  )
+}

app/src/router/routes.tsx

@@ -1,6 +1,9 @@
 import { createBrowserRouter } from "react-router-dom"
 import { Dashboard } from "@/pages/Dashboard"
+import { ServiceDetailPage } from "@/pages/ServiceDetail"
+import { ScheduledDetailPage } from "@/pages/ScheduledDetail"
 import { ComponentDetailPage } from "@/pages/ComponentDetail"
+import { ComponentRedirect } from "@/pages/ComponentRedirect"
 import { NodeDetailPage } from "@/pages/NodeDetail"
 
 export const router = createBrowserRouter([
@@ -9,9 +12,21 @@ export const router = createBrowserRouter([
     element: <Dashboard />,
   },
   {
-    path: "/component/:name",
+    path: "/services/:name",
+    element: <ServiceDetailPage />,
+  },
+  {
+    path: "/jobs/:name",
+    element: <ScheduledDetailPage />,
+  },
+  {
+    path: "/components/:name",
     element: <ComponentDetailPage />,
   },
+  {
+    path: "/component/:name",
+    element: <ComponentRedirect />,
+  },
   {
     path: "/node/:hostname",
     element: <NodeDetailPage />,

app/src/types/index.ts

@@ -6,6 +6,7 @@ export interface SystemdInfo {
 
 export interface ComponentSummary {
   id: string
+  category: "component" | "service" | "job" | null
   description: string | null
   behavior: string | null
   stack: string | null