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/App.tsx

@@ -0,0 +1,12 @@
+import { QueryClientProvider } from "@tanstack/react-query"
+import { RouterProvider } from "react-router-dom"
+import { queryClient } from "@/lib/queryClient"
+import { router } from "@/router/routes"
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  )
+}

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

app/src/index.css

@@ -0,0 +1,19 @@
+@import "tailwindcss";
+
+:root {
+  --background: #0f1117;
+  --foreground: #e1e4e8;
+  --card: #161b22;
+  --card-foreground: #e1e4e8;
+  --border: #30363d;
+  --muted: #8b949e;
+  --primary: #58a6ff;
+  --destructive: #da3633;
+  --success: #238636;
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}

app/src/lib/labels.ts

@@ -0,0 +1,22 @@
+export const RUNNER_LABELS: Record<string, string> = {
+  python_uv_tool: "Python (uv)",
+  command: "Command",
+  python_module: "Python module",
+  container: "Container",
+  node: "Node.js",
+  remote: "Remote",
+}
+
+export const ROLE_DESCRIPTIONS: Record<string, string> = {
+  service: "Exposes HTTP endpoints",
+  tool: "CLI utility installed to PATH",
+  worker: "Background process (no HTTP)",
+  job: "Runs on a schedule",
+  frontend: "Built static assets",
+  remote: "Hosted externally",
+  containerized: "Runs in a container",
+}
+
+export function runnerLabel(runner: string): string {
+  return RUNNER_LABELS[runner] ?? runner
+}

app/src/lib/queryClient.ts

@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query"
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30 * 1000,
+      gcTime: 5 * 60 * 1000,
+      retry: 1,
+    },
+  },
+})

app/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

app/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import App from "./App"
+import "./index.css"
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

app/src/pages/ComponentDetail.tsx

@@ -0,0 +1,275 @@
+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 { runnerLabel } from "@/lib/labels"
+import { ComponentFields } from "@/components/ComponentFields"
+import { HealthBadge } from "@/components/HealthBadge"
+import { LogViewer } from "@/components/LogViewer"
+import { RoleBadge } from "@/components/RoleBadge"
+
+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?.roles.includes("tool") ?? false
+  const { data: toolDetail } = useToolDetail(isTool ? (name ?? "") : "")
+  const isGateway = name === "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 handleSave = async (compName: string, config: Record<string, unknown>) => {
+    setMessage(null)
+    try {
+      await apiClient.put(`/config/components/${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/components/${compName}`)
+      qc.invalidateQueries({ queryKey: ["components"] })
+      navigate("/")
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e)
+      setMessage({ type: "error", text: msg })
+    }
+  }
+
+  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">
+        <Link to="/" className="text-[var(--primary)] hover:underline flex items-center gap-1 mb-4">
+          <ArrowLeft size={16} /> Back
+        </Link>
+        <p className="text-red-400">Component not found</p>
+      </div>
+    )
+  }
+
+  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>
+              )}
+              <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"
+              >
+                <RefreshCw size={16} />
+              </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 gap-1.5 mb-6">
+        {component.roles.map((role) => (
+          <RoleBadge key={role} role={role} />
+        ))}
+      </div>
+
+      {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>
+      )}
+
+      {toolDetail && (
+        <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">
+            Tool Info
+          </h2>
+          <p className="text-xs text-[var(--muted)] mb-4">
+            How this tool is packaged and what it depends on.
+          </p>
+          <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm mb-4">
+            {toolDetail.source && (
+              <>
+                <span className="text-[var(--muted)]">Source</span>
+                <span className="font-mono">{toolDetail.source}</span>
+              </>
+            )}
+            {toolDetail.version && (
+              <>
+                <span className="text-[var(--muted)]">Version</span>
+                <span>{toolDetail.version}</span>
+              </>
+            )}
+            {toolDetail.runner && (
+              <>
+                <span className="text-[var(--muted)]">Runner</span>
+                <span>{runnerLabel(toolDetail.runner)}</span>
+              </>
+            )}
+          </div>
+          {toolDetail.system_dependencies.length > 0 && (
+            <div className="mb-4">
+              <span className="text-sm text-[var(--muted)] block mb-1">System Dependencies</span>
+              <div className="flex flex-wrap gap-1">
+                {toolDetail.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>
+          )}
+          {toolDetail.docs && (
+            <div>
+              <span className="text-sm text-[var(--muted)] block mb-1">Documentation</span>
+              <pre className="text-sm whitespace-pre-wrap bg-[var(--background)] rounded p-3 border border-[var(--border)]">
+                {toolDetail.docs}
+              </pre>
+            </div>
+          )}
+        </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>
+      )}
+    </div>
+  )
+}

app/src/pages/ConfigEditor.tsx

@@ -0,0 +1,146 @@
+import { useState } from "react"
+import { Link } from "react-router-dom"
+import { ArrowLeft, Check, Loader2, Zap } from "lucide-react"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
+import { apiClient } from "@/services/api/client"
+import type { ComponentDetail } from "@/types"
+import { AddComponent } from "@/components/AddComponent"
+import { ComponentEditor } from "@/components/ComponentEditor"
+
+interface ApplyResult {
+  ok: boolean
+  actions: string[]
+  errors: string[]
+}
+
+export function ConfigEditorPage() {
+  const qc = useQueryClient()
+  const [applying, setApplying] = useState(false)
+  const [message, setMessage] = useState<{ type: "ok" | "error"; text: string } | null>(null)
+  const [applyResult, setApplyResult] = useState<ApplyResult | null>(null)
+
+  const { data: components, isLoading, refetch } = useQuery({
+    queryKey: ["config-components"],
+    queryFn: async () => {
+      const list = await apiClient.get<{ id: string }[]>("/components")
+      const details = await Promise.all(
+        list.map((c) => apiClient.get<ComponentDetail>(`/components/${c.id}`))
+      )
+      return details
+    },
+  })
+
+  const handleSave = async (name: string, config: Record<string, unknown>) => {
+    setMessage(null)
+    setApplyResult(null)
+    try {
+      await apiClient.put(`/config/components/${name}`, { config })
+      setMessage({ type: "ok", text: `Saved ${name}` })
+      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 (name: string) => {
+    setMessage(null)
+    try {
+      await apiClient.delete(`/config/components/${name}`)
+      setMessage({ type: "ok", text: `Removed ${name}` })
+      refetch()
+      qc.invalidateQueries({ queryKey: ["components"] })
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e)
+      setMessage({ type: "error", text: msg })
+    }
+  }
+
+  const handleApply = async () => {
+    setApplying(true)
+    setMessage(null)
+    setApplyResult(null)
+    try {
+      const result = await apiClient.post<ApplyResult>("/config/apply")
+      setApplyResult(result)
+      setMessage({
+        type: result.ok ? "ok" : "error",
+        text: result.ok ? "Applied successfully" : "Applied with errors",
+      })
+      qc.invalidateQueries({ queryKey: ["components"] })
+      qc.invalidateQueries({ queryKey: ["status"] })
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e)
+      setMessage({ type: "error", text: msg })
+    } finally {
+      setApplying(false)
+    }
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto px-6 py-8">
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-4">
+          <Link to="/" className="text-[var(--primary)] hover:underline flex items-center gap-1">
+            <ArrowLeft size={16} /> Dashboard
+          </Link>
+          <h1 className="text-2xl font-bold">Configuration</h1>
+        </div>
+        <button
+          onClick={handleApply}
+          disabled={applying}
+          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"
+        >
+          {applying ? <Loader2 size={14} className="animate-spin" /> : <Zap size={14} />}
+          Apply All
+        </button>
+      </div>
+
+      {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>
+      )}
+
+      {applyResult && (
+        <div className="mb-4 bg-[var(--card)] border border-[var(--border)] rounded-lg p-4 text-sm space-y-1">
+          {applyResult.actions.map((a, i) => (
+            <div key={i} className="text-green-400">{a}</div>
+          ))}
+          {applyResult.errors.map((e, i) => (
+            <div key={i} className="text-red-400">{e}</div>
+          ))}
+        </div>
+      )}
+
+      {isLoading ? (
+        <p className="text-[var(--muted)]">Loading components...</p>
+      ) : (
+        <div className="space-y-2">
+          {components?.map((comp) => (
+            <ComponentEditor
+              key={comp.id}
+              component={comp}
+              onSave={handleSave}
+              onDelete={handleDelete}
+            />
+          ))}
+          <AddComponent
+            existingNames={components?.map((c) => c.id) ?? []}
+            onAdd={handleSave}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

app/src/pages/Dashboard.tsx

@@ -0,0 +1,36 @@
+import { ComponentTable } from "@/components/ComponentTable"
+import { useComponents, useStatus, useGateway, useEventStream } from "@/services/api/hooks"
+
+export function Dashboard() {
+  useEventStream()
+  const { data: components, isLoading } = useComponents()
+  const { data: statusResp } = useStatus()
+  const { data: gateway } = useGateway()
+
+  return (
+    <div className="max-w-6xl mx-auto px-6 py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">Castle</h1>
+        <p className="text-[var(--muted)] mt-1">
+          Personal software platform
+          {gateway && (
+            <span className="ml-2 text-sm">
+              &middot; {gateway.component_count} components &middot; port {gateway.port}
+            </span>
+          )}
+        </p>
+      </div>
+
+      {isLoading ? (
+        <p className="text-[var(--muted)]">Loading components...</p>
+      ) : components ? (
+        <ComponentTable
+          components={components}
+          statuses={statusResp?.statuses ?? []}
+        />
+      ) : (
+        <p className="text-red-400">Failed to load components</p>
+      )}
+    </div>
+  )
+}

app/src/pages/Tools.tsx

@@ -0,0 +1,42 @@
+import { Link } from "react-router-dom"
+import { ArrowLeft } from "lucide-react"
+import { useTools } from "@/services/api/hooks"
+import { ToolCard } from "@/components/ToolCard"
+
+export function ToolsPage() {
+  const { data: categories, isLoading } = useTools()
+
+  return (
+    <div className="max-w-6xl 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>
+
+      <h1 className="text-3xl font-bold mb-2">Tools</h1>
+      <p className="text-sm text-[var(--muted)] mb-8">
+        CLI utilities grouped by category. Each tool is installed to PATH via castle and run with uv.
+      </p>
+
+      {isLoading ? (
+        <p className="text-[var(--muted)]">Loading tools...</p>
+      ) : categories?.length ? (
+        <div className="space-y-8">
+          {categories.map((cat) => (
+            <section key={cat.name}>
+              <h2 className="text-lg font-semibold mb-3 text-[var(--muted)]">
+                {cat.name}
+              </h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {cat.tools.map((tool) => (
+                  <ToolCard key={tool.id} tool={tool} />
+                ))}
+              </div>
+            </section>
+          ))}
+        </div>
+      ) : (
+        <p className="text-[var(--muted)]">No tools registered.</p>
+      )}
+    </div>
+  )
+}

app/src/router/routes.tsx

@@ -0,0 +1,14 @@
+import { createBrowserRouter } from "react-router-dom"
+import { Dashboard } from "@/pages/Dashboard"
+import { ComponentDetailPage } from "@/pages/ComponentDetail"
+
+export const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Dashboard />,
+  },
+  {
+    path: "/component/:name",
+    element: <ComponentDetailPage />,
+  },
+])

app/src/services/api/client.ts

@@ -0,0 +1,64 @@
+const BASE_URL = import.meta.env.VITE_API_BASE_URL ?? "/api"
+
+class ApiError extends Error {
+  status: number
+  constructor(status: number, message: string) {
+    super(message)
+    this.status = status
+  }
+}
+
+class ApiClient {
+  private baseUrl: string
+
+  constructor(baseUrl = BASE_URL) {
+    this.baseUrl = baseUrl
+  }
+
+  async get<T>(path: string): Promise<T> {
+    const resp = await fetch(`${this.baseUrl}${path}`)
+    if (!resp.ok) {
+      throw new ApiError(resp.status, await resp.text())
+    }
+    return resp.json()
+  }
+
+  async post<T>(path: string, body?: unknown): Promise<T> {
+    const resp = await fetch(`${this.baseUrl}${path}`, {
+      method: "POST",
+      headers: body ? { "Content-Type": "application/json" } : {},
+      body: body ? JSON.stringify(body) : undefined,
+    })
+    if (!resp.ok) {
+      throw new ApiError(resp.status, await resp.text())
+    }
+    return resp.json()
+  }
+
+  async put<T>(path: string, body?: unknown): Promise<T> {
+    const resp = await fetch(`${this.baseUrl}${path}`, {
+      method: "PUT",
+      headers: body ? { "Content-Type": "application/json" } : {},
+      body: body ? JSON.stringify(body) : undefined,
+    })
+    if (!resp.ok) {
+      throw new ApiError(resp.status, await resp.text())
+    }
+    return resp.json()
+  }
+
+  async delete<T>(path: string): Promise<T> {
+    const resp = await fetch(`${this.baseUrl}${path}`, { method: "DELETE" })
+    if (!resp.ok) {
+      throw new ApiError(resp.status, await resp.text())
+    }
+    return resp.json()
+  }
+
+  streamUrl(path: string): string {
+    return `${this.baseUrl}${path}`
+  }
+}
+
+export const apiClient = new ApiClient()
+export { ApiError }

app/src/services/api/hooks.ts

@@ -0,0 +1,149 @@
+import { useEffect } from "react"
+import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query"
+import { apiClient } from "./client"
+import type {
+  ComponentSummary,
+  ComponentDetail,
+  StatusResponse,
+  GatewayInfo,
+  ServiceActionResponse,
+  SSEHealthEvent,
+  ToolCategory,
+  ToolDetail,
+} from "@/types"
+
+export function useComponents() {
+  return useQuery({
+    queryKey: ["components"],
+    queryFn: () => apiClient.get<ComponentSummary[]>("/components"),
+  })
+}
+
+export function useComponent(name: string) {
+  return useQuery({
+    queryKey: ["components", name],
+    queryFn: () => apiClient.get<ComponentDetail>(`/components/${name}`),
+    enabled: !!name,
+  })
+}
+
+export function useStatus() {
+  return useQuery({
+    queryKey: ["status"],
+    queryFn: () => apiClient.get<StatusResponse>("/status"),
+    // SSE provides live updates; this is the fallback poll
+    refetchInterval: 30_000,
+  })
+}
+
+export function useGateway() {
+  return useQuery({
+    queryKey: ["gateway"],
+    queryFn: () => apiClient.get<GatewayInfo>("/gateway"),
+  })
+}
+
+export function useCaddyfile(enabled = true) {
+  return useQuery({
+    queryKey: ["gateway", "caddyfile"],
+    queryFn: () => apiClient.get<{ content: string }>("/gateway/caddyfile"),
+    enabled,
+  })
+}
+
+async function waitForApi(attempts = 20, interval = 1000): Promise<void> {
+  for (let i = 0; i < attempts; i++) {
+    try {
+      await apiClient.get<{ status: string }>("/health")
+      return
+    } catch {
+      await new Promise((r) => setTimeout(r, interval))
+    }
+  }
+}
+
+export function useSystemdUnit(name: string, enabled = true) {
+  return useQuery({
+    queryKey: ["services", name, "unit"],
+    queryFn: () => apiClient.get<{ service: string; timer: string | null }>(`/services/${name}/unit`),
+    enabled: enabled && !!name,
+  })
+}
+
+export function useServiceAction() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ name, action }: { name: string; action: string }) => {
+      try {
+        return await apiClient.post<ServiceActionResponse>(`/services/${name}/${action}`)
+      } catch (err) {
+        // Network error from self-restart killing the connection — expected
+        if (err instanceof TypeError) {
+          return { component: name, action, status: "accepted" } as ServiceActionResponse
+        }
+        throw err
+      }
+    },
+    onSuccess: async (data) => {
+      if (data.status === "accepted") {
+        // API is restarting itself — poll until it's back, then refresh everything
+        await waitForApi()
+        qc.invalidateQueries()
+      }
+    },
+  })
+}
+
+export function useToolAction() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: ({ name, action }: { name: string; action: "install" | "uninstall" }) =>
+      apiClient.post<{ component: string; action: string; status: string }>(
+        `/tools/${name}/${action}`,
+      ),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["components"] })
+    },
+  })
+}
+
+export function useTools() {
+  return useQuery({
+    queryKey: ["tools"],
+    queryFn: () => apiClient.get<ToolCategory[]>("/tools"),
+  })
+}
+
+export function useToolDetail(name: string) {
+  return useQuery({
+    queryKey: ["tools", name],
+    queryFn: () => apiClient.get<ToolDetail>(`/tools/${name}`),
+    enabled: !!name,
+  })
+}
+
+export function useEventStream() {
+  const qc = useQueryClient()
+
+  useEffect(() => {
+    const url = apiClient.streamUrl("/stream")
+    const es = new EventSource(url)
+
+    es.addEventListener("health", (e) => {
+      const data: SSEHealthEvent = JSON.parse(e.data)
+      qc.setQueryData<StatusResponse>(["status"], { statuses: data.statuses })
+    })
+
+    es.addEventListener("service-action", () => {
+      // Health event already pushes correct status; just refetch components
+      // in case the action changed what's available
+      qc.invalidateQueries({ queryKey: ["components"] })
+    })
+
+    es.onerror = () => {
+      // EventSource auto-reconnects; nothing to do
+    }
+
+    return () => es.close()
+  }, [qc])
+}

app/src/types/index.ts

@@ -0,0 +1,79 @@
+export interface SystemdInfo {
+  unit_name: string
+  unit_path: string
+  timer: boolean
+}
+
+export interface ComponentSummary {
+  id: string
+  description: string | null
+  roles: string[]
+  runner: string | null
+  port: number | null
+  health_path: string | null
+  proxy_path: string | null
+  managed: boolean
+  systemd: SystemdInfo | null
+  version: string | null
+  source: string | null
+  system_dependencies: string[]
+  schedule: string | null
+  installed: boolean | null
+}
+
+export interface ComponentDetail extends ComponentSummary {
+  manifest: Record<string, unknown>
+}
+
+export interface HealthStatus {
+  id: string
+  status: "up" | "down" | "unknown"
+  latency_ms: number | null
+}
+
+export interface StatusResponse {
+  statuses: HealthStatus[]
+}
+
+export interface GatewayInfo {
+  port: number
+  component_count: number
+  service_count: number
+  managed_count: number
+}
+
+export interface ServiceActionResponse {
+  component: string
+  action: string
+  status: string
+}
+
+export interface SSEHealthEvent {
+  statuses: HealthStatus[]
+  timestamp: number
+}
+
+export interface SSEServiceActionEvent {
+  action: string
+  component: string
+  status: string
+}
+
+export interface ToolSummary {
+  id: string
+  description: string | null
+  source: string | null
+  version: string | null
+  runner: string | null
+  system_dependencies: string[]
+  installed: boolean
+}
+
+export interface ToolCategory {
+  name: string
+  tools: ToolSummary[]
+}
+
+export interface ToolDetail extends ToolSummary {
+  docs: string | null
+}

app/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />