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

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>
+  )
+}