feat: add ComponentGrid and ComponentTable components for displaying components in grid and table formats

feat: implement HealthBadge and RoleBadge components for displaying health status and roles

feat: create LogViewer component for streaming logs of services

feat: develop SecretsEditor for managing secrets with CRUD operations

feat: introduce ToolCard component for displaying tool information

style: add global CSS variables and styles for consistent theming

feat: set up API client for handling requests to the backend

feat: implement hooks for fetching components, statuses, and tools

feat: create routes for dashboard, component details, and tools

feat: add service management endpoints for starting, stopping, and restarting services

feat: implement event bus for handling real-time updates via SSE

feat: create health check and logs endpoints for monitoring services

feat: add tests for health and tools endpoints to ensure functionality

chore: update project configuration files and dependencies for better development experience

app/src/components/AddComponent.tsx

@@ -0,0 +1,194 @@
+import { useState } from "react"
+import { Plus, X } from "lucide-react"
+
+const TEMPLATES: Record<string, Record<string, unknown>> = {
+  service: {
+    run: {
+      runner: "python_uv_tool",
+      tool: "",
+      cwd: "",
+      env: {},
+    },
+    expose: {
+      http: {
+        internal: { port: 9001 },
+        health_path: "/health",
+      },
+    },
+    proxy: {
+      caddy: { path_prefix: "/" },
+    },
+    manage: {
+      systemd: {},
+    },
+  },
+  tool: {
+    install: {
+      path: { alias: "" },
+    },
+  },
+  worker: {
+    run: {
+      runner: "command",
+      argv: [""],
+      cwd: "",
+    },
+    manage: {
+      systemd: {},
+    },
+  },
+  empty: {},
+}
+
+interface AddComponentProps {
+  onAdd: (name: string, config: Record<string, unknown>) => Promise<void>
+  existingNames: string[]
+}
+
+export function AddComponent({ onAdd, existingNames }: AddComponentProps) {
+  const [open, setOpen] = useState(false)
+  const [name, setName] = useState("")
+  const [description, setDescription] = useState("")
+  const [template, setTemplate] = useState("service")
+  const [port, setPort] = useState("")
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState("")
+
+  const nameError =
+    name && !/^[a-z0-9][a-z0-9-]*$/.test(name)
+      ? "lowercase letters, numbers, and hyphens"
+      : existingNames.includes(name)
+        ? "already exists"
+        : ""
+
+  const handleSubmit = async () => {
+    if (!name || nameError) return
+    setSaving(true)
+    setError("")
+    try {
+      const config: Record<string, unknown> = JSON.parse(
+        JSON.stringify(TEMPLATES[template] ?? {})
+      )
+      if (description) config.description = description
+
+      // Fill in template-specific fields
+      if (template === "service") {
+        const run = config.run as Record<string, unknown>
+        run.tool = name
+        run.cwd = name
+        const proxy = (config.proxy as Record<string, Record<string, string>>).caddy
+        proxy.path_prefix = `/${name}`
+        if (port) {
+          const expose = (config.expose as Record<string, Record<string, Record<string, number>>>)
+          expose.http.internal.port = parseInt(port, 10)
+        }
+      } else if (template === "tool") {
+        const install = (config.install as Record<string, Record<string, string>>).path
+        install.alias = name
+      }
+
+      await onAdd(name, config)
+      setName("")
+      setDescription("")
+      setPort("")
+      setOpen(false)
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (!open) {
+    return (
+      <button
+        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
+      </button>
+    )
+  }
+
+  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>
+        <button onClick={() => setOpen(false)} className="text-[var(--muted)] hover:text-[var(--foreground)]">
+          <X size={16} />
+        </button>
+      </div>
+
+      {error && (
+        <div className="text-sm text-red-400 bg-red-900/20 border border-red-800 rounded px-3 py-1.5">
+          {error}
+        </div>
+      )}
+
+      <div className="grid grid-cols-2 gap-4">
+        <Field label="Name">
+          <input
+            value={name}
+            onChange={(e) => setName(e.target.value.toLowerCase())}
+            placeholder="my-service"
+            autoFocus
+            className="w-full bg-black/30 border border-[var(--border)] rounded px-3 py-1.5 text-sm font-mono focus:outline-none focus:border-[var(--primary)]"
+          />
+          {nameError && <p className="text-xs text-red-400 mt-1">{nameError}</p>}
+        </Field>
+
+        <Field label="Template">
+          <select
+            value={template}
+            onChange={(e) => setTemplate(e.target.value)}
+            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)]"
+          >
+            <option value="service">Service (FastAPI + systemd + Caddy)</option>
+            <option value="tool">Tool (PATH install)</option>
+            <option value="worker">Worker (systemd, no HTTP)</option>
+            <option value="empty">Empty</option>
+          </select>
+        </Field>
+      </div>
+
+      <Field label="Description">
+        <input
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="What does this component 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>
+
+      {template === "service" && (
+        <Field label="Port">
+          <input
+            value={port}
+            onChange={(e) => setPort(e.target.value)}
+            placeholder="9001"
+            className="w-32 bg-black/30 border border-[var(--border)] rounded px-3 py-1.5 text-sm font-mono focus:outline-none focus:border-[var(--primary)]"
+          />
+        </Field>
+      )}
+
+      <div className="flex justify-end">
+        <button
+          onClick={handleSubmit}
+          disabled={!name || !!nameError || saving}
+          className="flex items-center gap-1.5 px-4 py-1.5 text-sm rounded bg-green-700 hover:bg-green-600 text-white transition-colors disabled:opacity-40"
+        >
+          <Plus size={14} /> Add
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <label className="block text-sm font-medium mb-1">{label}</label>
+      {children}
+    </div>
+  )
+}

app/src/components/ComponentCard.tsx

@@ -0,0 +1,117 @@
+import { ExternalLink, Play, RefreshCw, Server, Square, Terminal } from "lucide-react"
+import { Link } from "react-router-dom"
+import type { ComponentSummary, HealthStatus } from "@/types"
+import { useServiceAction } from "@/services/api/hooks"
+import { runnerLabel } from "@/lib/labels"
+import { HealthBadge } from "./HealthBadge"
+import { RoleBadge } from "./RoleBadge"
+
+interface ComponentCardProps {
+  component: ComponentSummary
+  health?: HealthStatus
+}
+
+export function ComponentCard({ component, health }: ComponentCardProps) {
+  const hasHttp = component.port != null
+  const { mutate, isPending } = useServiceAction()
+
+  const doAction = (action: string) => {
+    mutate({ name: component.id, action })
+  }
+
+  const isDown = health?.status === "down"
+
+  return (
+    <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}`}
+          className="text-base font-semibold hover:text-[var(--primary)] transition-colors"
+        >
+          {component.id}
+        </Link>
+        {health ? (
+          <HealthBadge status={health.status} latency={health.latency_ms} />
+        ) : hasHttp ? (
+          <HealthBadge status="unknown" />
+        ) : null}
+      </div>
+
+      <div className="flex gap-1 mb-2">
+        {component.roles.map((role) => (
+          <RoleBadge key={role} role={role} />
+        ))}
+      </div>
+
+      {component.description && (
+        <p className="text-sm text-[var(--muted)] mb-3">{component.description}</p>
+      )}
+
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3 text-xs text-[var(--muted)]">
+          {component.port && (
+            <span className="flex items-center gap-1 font-mono">
+              <Server size={12} />:{component.port}
+            </span>
+          )}
+          {component.runner && (
+            <span className="flex items-center gap-1">
+              <Terminal size={12} />
+              {runnerLabel(component.runner)}
+            </span>
+          )}
+          {component.proxy_path && (
+            <a
+              href={component.proxy_path + "/"}
+              className="flex items-center gap-1 text-[var(--primary)] hover:underline"
+            >
+              <ExternalLink size={12} />
+              {component.proxy_path}
+            </a>
+          )}
+          {component.port && (
+            <a
+              href={`http://localhost:${component.port}/docs`}
+              className="text-[var(--primary)] hover:underline"
+            >
+              Docs
+            </a>
+          )}
+        </div>
+
+        {component.managed && (
+          <div className="flex items-center gap-1">
+            {isDown && (
+              <button
+                onClick={() => doAction("start")}
+                disabled={isPending}
+                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={() => doAction("restart")}
+              disabled={isPending}
+              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={() => doAction("stop")}
+                disabled={isPending}
+                className="p-1 rounded hover:bg-red-800/30 text-red-400 transition-colors disabled:opacity-40"
+                title="Stop"
+              >
+                <Square size={14} />
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

app/src/components/ComponentEditor.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react"
+import { ChevronDown, ChevronRight } from "lucide-react"
+import type { ComponentDetail } from "@/types"
+import { ComponentFields } from "./ComponentFields"
+import { RoleBadge } from "./RoleBadge"
+
+interface ComponentEditorProps {
+  component: ComponentDetail
+  onSave: (name: string, config: Record<string, unknown>) => Promise<void>
+  onDelete: (name: string) => Promise<void>
+}
+
+export function ComponentEditor({ component, onSave, onDelete }: ComponentEditorProps) {
+  const [expanded, setExpanded] = useState(false)
+
+  return (
+    <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg overflow-hidden">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center justify-between p-4 hover:bg-white/5 transition-colors text-left"
+      >
+        <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>
+        </div>
+        <div className="flex items-center gap-1.5">
+          {component.roles.map((r) => (
+            <RoleBadge key={r} role={r} />
+          ))}
+        </div>
+      </button>
+
+      {expanded && (
+        <div className="border-t border-[var(--border)] p-4">
+          <ComponentFields
+            component={component}
+            onSave={onSave}
+            onDelete={onDelete}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

app/src/components/ComponentFields.tsx

@@ -0,0 +1,255 @@
+import { useMemo, useState } from "react"
+import { Check, Loader2, Save, Trash2 } from "lucide-react"
+import type { ComponentDetail } from "@/types"
+import { runnerLabel } from "@/lib/labels"
+import { SecretsEditor } from "./SecretsEditor"
+
+interface ComponentFieldsProps {
+  component: ComponentDetail
+  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
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+
+  const allEnv: Record<string, string> =
+    ((m.run as Record<string, unknown>)?.env as Record<string, string>) ?? {}
+
+  // Split into plain env vars and secret references
+  const { initialEnv, initialSecrets } = useMemo(() => {
+    const env: Record<string, string> = {}
+    const secrets: Record<string, string> = {}
+    for (const [key, val] of Object.entries(allEnv)) {
+      const match = SECRET_RE.exec(val)
+      if (match) {
+        secrets[key] = match[1]
+      } else {
+        env[key] = val
+      }
+    }
+    return { initialEnv: env, initialSecrets: secrets }
+  }, [])
+
+  const [runEnv, setRunEnv] = useState<Record<string, string>>(initialEnv)
+  const [secrets, setSecrets] = useState<Record<string, string>>(initialSecrets)
+
+  const [description, setDescription] = useState(m.description as string ?? "")
+  const [port, setPort] = useState(
+    String(
+      ((m.expose as Record<string, unknown>)?.http as Record<string, unknown>)
+        ?.internal as Record<string, unknown>
+        ? (((m.expose as Record<string, unknown>)?.http as Record<string, unknown>)
+            ?.internal as Record<string, number>)?.port ?? ""
+        : ""
+    )
+  )
+  const [proxyPath, setProxyPath] = useState(
+    ((m.proxy as Record<string, unknown>)?.caddy as Record<string, string>)?.path_prefix ?? ""
+  )
+  const [healthPath, setHealthPath] = useState(
+    ((m.expose as Record<string, unknown>)?.http as Record<string, string>)?.health_path ?? ""
+  )
+
+  const runner = (m.run as Record<string, unknown>)?.runner as string | undefined
+
+  const handleSave = async () => {
+    setSaving(true)
+    setSaved(false)
+    try {
+      const config: Record<string, unknown> = { ...m }
+      delete config.id
+      delete config.roles
+      config.description = description || undefined
+
+      // Merge plain env + secret references back together
+      if (config.run && typeof config.run === "object") {
+        const mergedEnv: Record<string, string> = { ...runEnv }
+        for (const [envKey, secretName] of Object.entries(secrets)) {
+          mergedEnv[envKey] = `\${secret:${secretName}}`
+        }
+        config.run = { ...config.run as Record<string, unknown>, env: mergedEnv }
+      }
+
+      if (port) {
+        const portNum = parseInt(port, 10)
+        if (!isNaN(portNum)) {
+          config.expose = {
+            http: {
+              internal: { port: portNum },
+              ...(healthPath ? { health_path: healthPath } : {}),
+            },
+          }
+        }
+      }
+
+      if (proxyPath) {
+        config.proxy = { caddy: { path_prefix: proxyPath } }
+      } else {
+        delete config.proxy
+      }
+
+      await onSave(component.id, config)
+      setSaved(true)
+      setTimeout(() => setSaved(false), 2000)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <Field label="Description">
+        <input
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          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>
+
+      {runner && (
+        <Field label="Runner">
+          <span className="text-sm font-mono text-[var(--muted)]">
+            {runnerLabel(runner)}
+            {(m.run as Record<string, string>)?.tool && (
+              <> &middot; {(m.run as Record<string, string>).tool}</>
+            )}
+          </span>
+        </Field>
+      )}
+
+      {(component.managed || port) && (
+        <Field label="Port">
+          <input
+            value={port}
+            onChange={(e) => setPort(e.target.value)}
+            placeholder="e.g. 9001"
+            className="w-32 bg-black/30 border border-[var(--border)] rounded px-3 py-1.5 text-sm font-mono focus:outline-none focus:border-[var(--primary)]"
+          />
+        </Field>
+      )}
+
+      {(component.managed || healthPath) && (
+        <Field label="Health path">
+          <input
+            value={healthPath}
+            onChange={(e) => setHealthPath(e.target.value)}
+            placeholder="/health"
+            className="w-48 bg-black/30 border border-[var(--border)] rounded px-3 py-1.5 text-sm font-mono focus:outline-none focus:border-[var(--primary)]"
+          />
+        </Field>
+      )}
+
+      <Field label="Proxy path">
+        <input
+          value={proxyPath}
+          onChange={(e) => setProxyPath(e.target.value)}
+          placeholder="/my-service"
+          className="w-48 bg-black/30 border border-[var(--border)] rounded px-3 py-1.5 text-sm font-mono focus:outline-none focus:border-[var(--primary)]"
+        />
+      </Field>
+
+      {runner && (
+        <Field label="Environment">
+          <div className="space-y-2">
+            {Object.entries(runEnv).map(([key, val]) => (
+              <div key={key} className="flex items-center gap-2">
+                <input
+                  value={key}
+                  readOnly
+                  className="w-56 bg-black/30 border border-[var(--border)] rounded px-2 py-1 text-xs font-mono text-[var(--muted)]"
+                />
+                <span className="text-[var(--muted)]">=</span>
+                <input
+                  value={val}
+                  onChange={(e) =>
+                    setRunEnv((prev) => ({ ...prev, [key]: e.target.value }))
+                  }
+                  className="flex-1 bg-black/30 border border-[var(--border)] rounded px-2 py-1 text-xs font-mono focus:outline-none focus:border-[var(--primary)]"
+                />
+                <button
+                  onClick={() =>
+                    setRunEnv((prev) => {
+                      const next = { ...prev }
+                      delete next[key]
+                      return next
+                    })
+                  }
+                  className="text-red-400 hover:text-red-300 p-0.5"
+                  title="Remove"
+                >
+                  <Trash2 size={12} />
+                </button>
+              </div>
+            ))}
+            <button
+              onClick={() => {
+                const key = prompt("Variable name:")
+                if (key) setRunEnv((prev) => ({ ...prev, [key]: "" }))
+              }}
+              className="text-xs text-[var(--primary)] hover:underline"
+            >
+              + Add variable
+            </button>
+          </div>
+        </Field>
+      )}
+
+      {runner && (
+        <Field label="Secrets">
+          <SecretsEditor secrets={secrets} onSecretsChange={setSecrets} />
+        </Field>
+      )}
+
+      <Field label="Systemd">
+        <span className="text-sm text-[var(--muted)]">
+          {component.managed ? "Yes" : "No"}
+        </span>
+      </Field>
+
+      <div className="flex items-center justify-between pt-3 border-t border-[var(--border)]">
+        {onDelete ? (
+          <button
+            onClick={() => {
+              if (confirm(`Delete component "${component.id}" from castle.yaml?`)) {
+                onDelete(component.id)
+              }
+            }}
+            className="flex items-center gap-1.5 text-xs text-red-400 hover:text-red-300"
+          >
+            <Trash2 size={12} /> Remove component
+          </button>
+        ) : (
+          <div />
+        )}
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded bg-blue-700 hover:bg-blue-600 text-white transition-colors disabled:opacity-40"
+        >
+          {saving ? (
+            <Loader2 size={14} className="animate-spin" />
+          ) : saved ? (
+            <Check size={14} />
+          ) : (
+            <Save size={14} />
+          )}
+          {saved ? "Saved" : "Save"}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-start gap-4">
+      <label className="w-32 shrink-0 text-sm font-medium pt-1.5">{label}</label>
+      <div className="flex-1">{children}</div>
+    </div>
+  )
+}

app/src/components/ComponentGrid.tsx

@@ -0,0 +1,56 @@
+import type { ComponentSummary, HealthStatus } from "@/types"
+import { ComponentCard } from "./ComponentCard"
+
+const ROLE_ORDER = ["service", "tool", "worker", "job", "frontend", "remote", "containerized"]
+const ROLE_LABELS: Record<string, string> = {
+  service: "Services",
+  tool: "Tools",
+  worker: "Workers",
+  job: "Jobs",
+  frontend: "Frontends",
+  remote: "Remote",
+  containerized: "Containers",
+}
+
+interface ComponentGridProps {
+  components: ComponentSummary[]
+  statuses: HealthStatus[]
+}
+
+export function ComponentGrid({ components, statuses }: ComponentGridProps) {
+  const statusMap = new Map(statuses.map((s) => [s.id, s]))
+
+  // Group by primary role
+  const groups = new Map<string, ComponentSummary[]>()
+  for (const comp of components) {
+    const primary = comp.roles[0] ?? "tool"
+    const list = groups.get(primary) ?? []
+    list.push(comp)
+    groups.set(primary, list)
+  }
+
+  return (
+    <div className="space-y-8">
+      {ROLE_ORDER.map((role) => {
+        const items = groups.get(role)
+        if (!items?.length) return null
+        return (
+          <section key={role}>
+            <h2 className="text-lg font-semibold mb-3 text-[var(--muted)]">
+              {ROLE_LABELS[role] ?? role}
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {items.map((comp) => (
+                <ComponentCard
+                  key={comp.id}
+                  component={comp}
+                  health={statusMap.get(comp.id)}
+                />
+              ))}
+            </div>
+          </section>
+        )
+      })}
+    </div>
+  )
+}

app/src/components/ComponentTable.tsx

@@ -0,0 +1,322 @@
+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 { runnerLabel } from "@/lib/labels"
+import { HealthBadge } from "./HealthBadge"
+import { RoleBadge } from "./RoleBadge"
+
+interface ComponentTableProps {
+  components: ComponentSummary[]
+  statuses: HealthStatus[]
+}
+
+type SortKey = "id" | "role" | "runner" | "schedule" | "port" | "status"
+type SortDir = "asc" | "desc"
+
+function statusRank(s: HealthStatus | undefined, installed: boolean | null): number {
+  // Health takes priority for services
+  if (s) {
+    if (s.status === "down") return 0
+    if (s.status === "up") return 3
+    return 2
+  }
+  // Installed state for tools
+  if (installed === false) return 1
+  if (installed === true) return 3
+  return 2
+}
+
+export function ComponentTable({ components, statuses }: ComponentTableProps) {
+  const statusMap = useMemo(() => new Map(statuses.map((s) => [s.id, s])), [statuses])
+  const allRoles = useMemo(() => {
+    const set = new Set<string>()
+    for (const c of components) for (const r of c.roles) set.add(r)
+    return Array.from(set).sort()
+  }, [components])
+
+  const [roleFilter, setRoleFilter] = useState<string | null>(null)
+  const [search, setSearch] = useState("")
+  const [sortKey, setSortKey] = useState<SortKey>("id")
+  const [sortDir, setSortDir] = useState<SortDir>("asc")
+
+  const toggleSort = (key: SortKey) => {
+    if (sortKey === key) {
+      setSortDir((d) => (d === "asc" ? "desc" : "asc"))
+    } else {
+      setSortKey(key)
+      setSortDir("asc")
+    }
+  }
+
+  const filtered = useMemo(() => {
+    let list = components
+    if (roleFilter) {
+      list = list.filter((c) => c.roles.includes(roleFilter))
+    }
+    if (search) {
+      const q = search.toLowerCase()
+      list = list.filter(
+        (c) =>
+          c.id.toLowerCase().includes(q) ||
+          (c.description?.toLowerCase().includes(q) ?? false),
+      )
+    }
+    return list
+  }, [components, roleFilter, search])
+
+  const sorted = useMemo(() => {
+    const dir = sortDir === "asc" ? 1 : -1
+    return [...filtered].sort((a, b) => {
+      switch (sortKey) {
+        case "id":
+          return dir * a.id.localeCompare(b.id)
+        case "role":
+          return dir * (a.roles[0] ?? "").localeCompare(b.roles[0] ?? "")
+        case "runner":
+          return dir * (a.runner ?? "").localeCompare(b.runner ?? "")
+        case "schedule":
+          return dir * (a.schedule ?? "").localeCompare(b.schedule ?? "")
+        case "port":
+          return dir * ((a.port ?? 0) - (b.port ?? 0))
+        case "status":
+          return dir * (statusRank(statusMap.get(a.id), a.installed) - statusRank(statusMap.get(b.id), b.installed))
+        default:
+          return 0
+      }
+    })
+  }, [filtered, sortKey, sortDir, statusMap])
+
+  return (
+    <div>
+      {/* Filters */}
+      <div className="flex items-center gap-3 mb-4 flex-wrap">
+        <input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Filter components..."
+          className="bg-black/30 border border-[var(--border)] rounded px-3 py-1.5 text-sm focus:outline-none focus:border-[var(--primary)] w-56"
+        />
+        <div className="flex items-center gap-1.5">
+          <button
+            onClick={() => setRoleFilter(null)}
+            className={`text-xs px-2 py-1 rounded transition-colors ${
+              roleFilter === null
+                ? "bg-[var(--primary)] text-white"
+                : "bg-[var(--border)] text-[var(--muted)] hover:text-[var(--foreground)]"
+            }`}
+          >
+            All
+          </button>
+          {allRoles.map((role) => (
+            <button
+              key={role}
+              onClick={() => setRoleFilter(roleFilter === role ? null : role)}
+              className={`text-xs px-2 py-1 rounded transition-colors ${
+                roleFilter === role
+                  ? "bg-[var(--primary)] text-white"
+                  : "bg-[var(--border)] text-[var(--muted)] hover:text-[var(--foreground)]"
+              }`}
+            >
+              {role}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="border border-[var(--border)] rounded-lg overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-[var(--card)] border-b border-[var(--border)] text-left">
+              <SortHeader label="Name" sortKey="id" current={sortKey} dir={sortDir} onSort={toggleSort} />
+              <SortHeader label="Roles" sortKey="role" current={sortKey} dir={sortDir} onSort={toggleSort} />
+              <SortHeader label="Runner" sortKey="runner" current={sortKey} dir={sortDir} onSort={toggleSort} />
+              <SortHeader label="Schedule" sortKey="schedule" current={sortKey} dir={sortDir} onSort={toggleSort} />
+              <SortHeader label="Port" sortKey="port" current={sortKey} dir={sortDir} onSort={toggleSort} />
+              <SortHeader label="Status" sortKey="status" current={sortKey} dir={sortDir} onSort={toggleSort} />
+              <th className="px-3 py-2 font-medium text-[var(--muted)]">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sorted.map((comp) => (
+              <ComponentRow
+                key={comp.id}
+                component={comp}
+                health={statusMap.get(comp.id)}
+              />
+            ))}
+            {sorted.length === 0 && (
+              <tr>
+                <td colSpan={7} className="px-3 py-6 text-center text-[var(--muted)]">
+                  No components match.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+function SortHeader({
+  label,
+  sortKey,
+  current,
+  dir,
+  onSort,
+}: {
+  label: string
+  sortKey: SortKey
+  current: SortKey
+  dir: SortDir
+  onSort: (key: SortKey) => void
+}) {
+  const active = current === sortKey
+  const Icon = active ? (dir === "asc" ? ArrowUp : ArrowDown) : ArrowUpDown
+  return (
+    <th className="px-3 py-2 font-medium text-[var(--muted)]">
+      <button
+        onClick={() => onSort(sortKey)}
+        className="flex items-center gap-1 hover:text-[var(--foreground)] transition-colors"
+      >
+        {label}
+        <Icon size={12} className={active ? "text-[var(--foreground)]" : ""} />
+      </button>
+    </th>
+  )
+}
+
+function InstalledBadge({ installed }: { installed: boolean }) {
+  return installed ? (
+    <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-green-900/40 text-green-400 border border-green-800/50">
+      <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
+      installed
+    </span>
+  ) : (
+    <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-zinc-800/40 text-[var(--muted)] border border-[var(--border)]">
+      <span className="w-1.5 h-1.5 rounded-full bg-zinc-500" />
+      not installed
+    </span>
+  )
+}
+
+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}`}
+          className="font-medium hover:text-[var(--primary)] transition-colors"
+          title={component.systemd?.unit_path ?? undefined}
+        >
+          {component.id}
+        </Link>
+        {component.description && (
+          <p className="text-xs text-[var(--muted)] mt-0.5 truncate max-w-xs">
+            {component.description}
+          </p>
+        )}
+      </td>
+      <td className="px-3 py-2.5">
+        <div className="flex gap-1 flex-wrap">
+          {component.roles.map((role) => (
+            <RoleBadge key={role} role={role} />
+          ))}
+        </div>
+      </td>
+      <td className="px-3 py-2.5 text-[var(--muted)]">
+        {component.runner ? runnerLabel(component.runner) : "—"}
+      </td>
+      <td className="px-3 py-2.5 font-mono text-[var(--muted)]">
+        {component.schedule ?? "—"}
+      </td>
+      <td className="px-3 py-2.5 font-mono text-[var(--muted)]">
+        {component.port ?? "—"}
+      </td>
+      <td className="px-3 py-2.5">
+        {health ? (
+          <HealthBadge status={health.status} latency={health.latency_ms} />
+        ) : hasHttp ? (
+          <HealthBadge status="unknown" />
+        ) : 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 ? (
+          <div className="flex items-center gap-1">
+            {component.installed ? (
+              <button
+                onClick={() => toolAction({ name: component.id, action: "uninstall" })}
+                disabled={toolPending}
+                className="p-1 rounded hover:bg-red-800/30 text-red-400 transition-colors disabled:opacity-40"
+                title="Uninstall from PATH"
+              >
+                <Trash2 size={14} />
+              </button>
+            ) : (
+              <button
+                onClick={() => toolAction({ name: component.id, action: "install" })}
+                disabled={toolPending}
+                className="p-1 rounded hover:bg-green-800/30 text-green-400 transition-colors disabled:opacity-40"
+                title="Install to PATH"
+              >
+                <Download size={14} />
+              </button>
+            )}
+          </div>
+        ) : (
+          <span className="text-[var(--muted)]">—</span>
+        )}
+      </td>
+    </tr>
+  )
+}

app/src/components/HealthBadge.tsx

@@ -0,0 +1,32 @@
+import { cn } from "@/lib/utils"
+
+interface HealthBadgeProps {
+  status: "up" | "down" | "unknown"
+  latency?: number | null
+}
+
+export function HealthBadge({ status, latency }: HealthBadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full",
+        status === "up" && "bg-green-800/50 text-green-300",
+        status === "down" && "bg-red-800/50 text-red-300",
+        status === "unknown" && "bg-gray-700/50 text-gray-400",
+      )}
+    >
+      <span
+        className={cn(
+          "w-1.5 h-1.5 rounded-full",
+          status === "up" && "bg-green-400",
+          status === "down" && "bg-red-400",
+          status === "unknown" && "bg-gray-500",
+        )}
+      />
+      {status}
+      {latency != null && status === "up" && (
+        <span className="text-gray-500 ml-0.5">{latency}ms</span>
+      )}
+    </span>
+  )
+}

app/src/components/LogViewer.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef, useState } from "react"
+import { apiClient } from "@/services/api/client"
+
+interface LogViewerProps {
+  name: string
+  lines?: number
+  follow?: boolean
+}
+
+export function LogViewer({ name, lines = 50, follow = true }: LogViewerProps) {
+  const [logs, setLogs] = useState<string[]>([])
+  const [connected, setConnected] = useState(false)
+  const bottomRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!follow) {
+      // Static fetch
+      apiClient
+        .get<{ lines: string[] }>(`/logs/${name}?n=${lines}`)
+        .then((data) => setLogs(data.lines))
+      return
+    }
+
+    // SSE follow
+    const url = apiClient.streamUrl(`/logs/${name}?n=${lines}&follow=true`)
+    const es = new EventSource(url)
+
+    es.onopen = () => setConnected(true)
+
+    es.onmessage = (e) => {
+      setLogs((prev) => {
+        const next = [...prev, e.data]
+        // Keep last 500 lines in memory
+        return next.length > 500 ? next.slice(-500) : next
+      })
+    }
+
+    es.onerror = () => setConnected(false)
+
+    return () => es.close()
+  }, [name, lines, follow])
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" })
+  }, [logs])
+
+  return (
+    <div className="bg-black/40 border border-[var(--border)] rounded-lg overflow-hidden">
+      <div className="flex items-center justify-between px-3 py-1.5 border-b border-[var(--border)] text-xs text-[var(--muted)]">
+        <span>logs: {name}</span>
+        {follow && (
+          <span className={connected ? "text-green-400" : "text-red-400"}>
+            {connected ? "streaming" : "disconnected"}
+          </span>
+        )}
+      </div>
+      <pre className="p-3 text-xs font-mono text-gray-300 overflow-x-auto max-h-96 overflow-y-auto">
+        {logs.length === 0 ? (
+          <span className="text-[var(--muted)]">No logs yet</span>
+        ) : (
+          logs.map((line, i) => (
+            <div key={i} className="leading-5 hover:bg-white/5">
+              {line}
+            </div>
+          ))
+        )}
+        <div ref={bottomRef} />
+      </pre>
+    </div>
+  )
+}

app/src/components/RoleBadge.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils"
+import { ROLE_DESCRIPTIONS } from "@/lib/labels"
+
+const roleColors: Record<string, string> = {
+  service: "bg-green-700 text-white",
+  tool: "bg-blue-700 text-white",
+  worker: "bg-blue-500 text-white",
+  job: "bg-purple-700 text-white",
+  frontend: "bg-yellow-600 text-black",
+  remote: "bg-gray-600 text-gray-200",
+  containerized: "bg-orange-600 text-black",
+}
+
+export function RoleBadge({ role }: { role: string }) {
+  return (
+    <span
+      className={cn(
+        "inline-block text-[0.65rem] font-semibold uppercase px-1.5 py-0.5 rounded",
+        roleColors[role] ?? "bg-gray-600 text-gray-200",
+      )}
+      title={ROLE_DESCRIPTIONS[role]}
+    >
+      {role}
+    </span>
+  )
+}

app/src/components/SecretsEditor.tsx

@@ -0,0 +1,160 @@
+import { useEffect, useState } from "react"
+import { Check, Eye, EyeOff, Loader2, Plus, Save, Trash2 } from "lucide-react"
+import { apiClient } from "@/services/api/client"
+
+interface SecretsEditorProps {
+  /** Current secret references: { ENV_VAR_NAME: "SECRET_FILE_NAME" } */
+  secrets: Record<string, string>
+  onSecretsChange: (secrets: Record<string, string>) => void
+}
+
+interface SecretState {
+  value: string
+  original: string
+  visible: boolean
+  saving: boolean
+  saved: boolean
+  loaded: boolean
+}
+
+export function SecretsEditor({ secrets, onSecretsChange }: SecretsEditorProps) {
+  const [states, setStates] = useState<Record<string, SecretState>>({})
+
+  // Load secret values when the secret list changes
+  useEffect(() => {
+    for (const [envKey, secretName] of Object.entries(secrets)) {
+      if (states[envKey]?.loaded) continue
+      setStates((prev) => ({
+        ...prev,
+        [envKey]: {
+          value: "", original: "", visible: false,
+          saving: false, saved: false, loaded: false,
+        },
+      }))
+      apiClient
+        .get<{ value: string }>(`/secrets/${secretName}`)
+        .then((data) => {
+          setStates((prev) => ({
+            ...prev,
+            [envKey]: { ...prev[envKey], value: data.value, original: data.value, loaded: true },
+          }))
+        })
+        .catch(() => {
+          setStates((prev) => ({
+            ...prev,
+            [envKey]: { ...prev[envKey], loaded: true },
+          }))
+        })
+    }
+  }, [Object.keys(secrets).join(",")])
+
+  const handleSave = async (envKey: string) => {
+    const s = states[envKey]
+    const secretName = secrets[envKey]
+    if (!s || !secretName || s.value === s.original) return
+
+    setStates((prev) => ({ ...prev, [envKey]: { ...prev[envKey], saving: true } }))
+    try {
+      await apiClient.put(`/secrets/${secretName}`, { value: s.value })
+      setStates((prev) => ({
+        ...prev,
+        [envKey]: { ...prev[envKey], saving: false, saved: true, original: s.value },
+      }))
+      setTimeout(() => {
+        setStates((prev) => ({ ...prev, [envKey]: { ...prev[envKey], saved: false } }))
+      }, 2000)
+    } catch {
+      setStates((prev) => ({ ...prev, [envKey]: { ...prev[envKey], saving: false } }))
+    }
+  }
+
+  const handleAdd = () => {
+    const envKey = prompt("Environment variable name (e.g. MY_API_KEY):")
+    if (!envKey) return
+    const secretName = prompt("Secret file name (stored in ~/.castle/secrets/):", envKey)
+    if (!secretName) return
+    onSecretsChange({ ...secrets, [envKey]: secretName })
+    setStates((prev) => ({
+      ...prev,
+      [envKey]: {
+        value: "", original: "", visible: true,
+        saving: false, saved: false, loaded: true,
+      },
+    }))
+  }
+
+  const handleRemove = (envKey: string) => {
+    const next = { ...secrets }
+    delete next[envKey]
+    onSecretsChange(next)
+    setStates((prev) => {
+      const n = { ...prev }
+      delete n[envKey]
+      return n
+    })
+  }
+
+  return (
+    <div className="space-y-2">
+      {Object.entries(secrets).map(([envKey, secretName]) => {
+        const s = states[envKey]
+        const dirty = s ? s.value !== s.original : false
+
+        return (
+          <div key={envKey} className="flex items-center gap-2">
+            <span className="w-56 shrink-0 text-xs font-mono text-[var(--muted)] truncate" title={`${envKey} → ${secretName}`}>
+              {envKey}
+            </span>
+            <div className="flex-1 flex items-center gap-1.5">
+              <input
+                type={s?.visible ? "text" : "password"}
+                value={s?.loaded ? s.value : ""}
+                placeholder={s?.loaded ? "(empty)" : "loading..."}
+                onChange={(e) =>
+                  setStates((prev) => ({
+                    ...prev,
+                    [envKey]: { ...prev[envKey], value: e.target.value },
+                  }))
+                }
+                className="flex-1 bg-black/30 border border-[var(--border)] rounded px-2 py-1 text-xs font-mono focus:outline-none focus:border-[var(--primary)]"
+              />
+              <button
+                onClick={() =>
+                  setStates((prev) => ({
+                    ...prev,
+                    [envKey]: { ...prev[envKey], visible: !prev[envKey]?.visible },
+                  }))
+                }
+                className="p-1 text-[var(--muted)] hover:text-[var(--foreground)]"
+              >
+                {s?.visible ? <EyeOff size={12} /> : <Eye size={12} />}
+              </button>
+              <button
+                onClick={() => handleSave(envKey)}
+                disabled={!dirty || s?.saving}
+                className="p-1 text-blue-400 hover:text-blue-300 disabled:opacity-30"
+              >
+                {s?.saving ? (
+                  <Loader2 size={12} className="animate-spin" />
+                ) : s?.saved ? (
+                  <Check size={12} className="text-green-400" />
+                ) : (
+                  <Save size={12} />
+                )}
+              </button>
+              <button
+                onClick={() => handleRemove(envKey)}
+                className="p-1 text-red-400 hover:text-red-300"
+              >
+                <Trash2 size={12} />
+              </button>
+            </div>
+          </div>
+        )
+      })}
+      <button onClick={handleAdd} className="text-xs text-[var(--primary)] hover:underline">
+        <Plus size={10} className="inline mr-1" />Add secret
+      </button>
+    </div>
+  )
+}

app/src/components/ToolCard.tsx

@@ -0,0 +1,57 @@
+import { Link } from "react-router-dom"
+import { Terminal } from "lucide-react"
+import type { ToolSummary } from "@/types"
+import { runnerLabel } from "@/lib/labels"
+
+interface ToolCardProps {
+  tool: ToolSummary
+}
+
+export function ToolCard({ tool }: ToolCardProps) {
+  return (
+    <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/${tool.id}`}
+          className="text-base font-semibold hover:text-[var(--primary)] transition-colors"
+        >
+          {tool.id}
+        </Link>
+        {tool.installed && (
+          <span className="text-xs px-2 py-0.5 rounded bg-green-900/30 text-green-400 border border-green-800">
+            installed
+          </span>
+        )}
+      </div>
+
+      {tool.description && (
+        <p className="text-sm text-[var(--muted)] mb-3">{tool.description}</p>
+      )}
+
+      <div className="flex items-center gap-3 text-xs text-[var(--muted)] mb-3">
+        {tool.runner && (
+          <span className="flex items-center gap-1">
+            <Terminal size={12} />
+            {runnerLabel(tool.runner)}
+          </span>
+        )}
+        {tool.version && (
+          <span className="font-mono">v{tool.version}</span>
+        )}
+      </div>
+
+      {tool.system_dependencies.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {tool.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"
+            >
+              {dep}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}