diff --git a/app/src/components/Layout.tsx b/app/src/components/Layout.tsx
index ebc97bd..e369642 100644
--- a/app/src/components/Layout.tsx
+++ b/app/src/components/Layout.tsx
@@ -10,6 +10,7 @@ import {
   Package,
   Server,
   Share2,
+  Wrench,
   X,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
@@ -20,6 +21,7 @@ const NAV = [
   { to: "/gateway", label: "Gateway", icon: Globe, end: false },
   { to: "/services", label: "Services", icon: Server, end: false },
   { to: "/scheduled", label: "Scheduled", icon: Clock, end: false },
+  { to: "/tools", label: "Tools", icon: Wrench, end: false },
   { to: "/programs", label: "Programs", icon: Package, end: false },
   { to: "/mesh", label: "Mesh", icon: Share2, end: false },
 ]
diff --git a/app/src/components/ProgramCard.tsx b/app/src/components/ProgramCard.tsx
index 1cf25b5..edf8f15 100644
--- a/app/src/components/ProgramCard.tsx
+++ b/app/src/components/ProgramCard.tsx
@@ -31,13 +31,23 @@ export function ProgramCard({ program }: ProgramCardProps) {
         >
           {program.id}
         </Link>
-      </div>
-
-      <div className="flex flex-wrap gap-1.5 mb-2">
-        <KindBadge kind={program.kind} />
         <StackBadge stack={program.stack} />
       </div>
 
+      {/* A program has no kind of its own — show its deployments (name · kind). */}
+      {program.deployments.length > 0 ? (
+        <div className="flex flex-col gap-1 mb-2">
+          {program.deployments.map((d) => (
+            <div key={d.name} className="flex items-center gap-1.5 text-xs">
+              <span className="font-mono text-[var(--muted)]">{d.name}</span>
+              <KindBadge kind={d.kind} />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p className="text-xs text-[var(--muted)] italic mb-2">no deployment</p>
+      )}
+
       {program.description && (
         <p className="text-sm text-[var(--muted)]">{program.description}</p>
       )}
diff --git a/app/src/components/ProgramList.tsx b/app/src/components/ProgramList.tsx
index 0ab2b59..3198d98 100644
--- a/app/src/components/ProgramList.tsx
+++ b/app/src/components/ProgramList.tsx
@@ -1,38 +1,16 @@
 import { useMemo, useState } from "react"
 import type { ProgramSummary } from "@/types"
 import { ProgramCard } from "./ProgramCard"
-import { kindLabel } from "@/lib/labels"
-import { cn } from "@/lib/utils"
 
 interface ProgramListProps {
   programs: ProgramSummary[]
 }
 
-const KIND_ORDER = ["service", "job", "tool", "static", "reference"]
-
-// Active chip color per kind — mirrors KindBadge so the filter reads as the badge.
-const KIND_ACTIVE: Record<string, string> = {
-  service: "bg-green-700 text-white border-green-600",
-  job: "bg-purple-700 text-white border-purple-600",
-  tool: "bg-blue-700 text-white border-blue-600",
-  static: "bg-cyan-700 text-white border-cyan-600",
-  reference: "bg-gray-600 text-gray-200 border-gray-500",
-}
-
 export function ProgramList({ programs }: ProgramListProps) {
   const [search, setSearch] = useState("")
-  const [kind, setKind] = useState<string | null>(null)
-
-  const counts = useMemo(() => {
-    const c: Record<string, number> = {}
-    for (const p of programs) if (p.kind) c[p.kind] = (c[p.kind] ?? 0) + 1
-    return c
-  }, [programs])
-  const kindsPresent = KIND_ORDER.filter((k) => counts[k])
 
   const filtered = useMemo(() => {
     let base = [...programs].sort((a, b) => a.id.localeCompare(b.id))
-    if (kind) base = base.filter((p) => p.kind === kind)
     if (search) {
       const q = search.toLowerCase()
       base = base.filter(
@@ -42,34 +20,17 @@ export function ProgramList({ programs }: ProgramListProps) {
       )
     }
     return base
-  }, [programs, search, kind])
+  }, [programs, search])
 
   return (
     <div>
-      <div className="mb-4 flex flex-wrap items-center gap-2">
+      <div className="mb-4">
         <input
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           placeholder="Filter programs..."
           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 flex-wrap gap-1.5">
-          <Chip
-            label={`All (${programs.length})`}
-            active={kind === null}
-            activeClass="bg-[var(--primary)] text-white border-[var(--primary)]"
-            onClick={() => setKind(null)}
-          />
-          {kindsPresent.map((k) => (
-            <Chip
-              key={k}
-              label={`${kindLabel(k)} (${counts[k]})`}
-              active={kind === k}
-              activeClass={KIND_ACTIVE[k]}
-              onClick={() => setKind(kind === k ? null : k)}
-            />
-          ))}
-        </div>
       </div>
 
       {filtered.length === 0 ? (
@@ -84,29 +45,3 @@ export function ProgramList({ programs }: ProgramListProps) {
     </div>
   )
 }
-
-function Chip({
-  label,
-  active,
-  activeClass,
-  onClick,
-}: {
-  label: string
-  active: boolean
-  activeClass: string
-  onClick: () => void
-}) {
-  return (
-    <button
-      onClick={onClick}
-      className={cn(
-        "text-xs px-2.5 py-1 rounded-full border transition-colors",
-        active
-          ? activeClass
-          : "border-[var(--border)] text-[var(--muted)] hover:text-[var(--foreground)] hover:border-[var(--primary)]",
-      )}
-    >
-      {label}
-    </button>
-  )
-}
diff --git a/app/src/components/ServiceCard.tsx b/app/src/components/ServiceCard.tsx
index 628c451..d81605b 100644
--- a/app/src/components/ServiceCard.tsx
+++ b/app/src/components/ServiceCard.tsx
@@ -5,6 +5,7 @@ import { useServiceAction } from "@/services/api/hooks"
 import { launcherLabel, subdomainUrl } from "@/lib/labels"
 import { HealthBadge } from "./HealthBadge"
 import { StackBadge } from "./StackBadge"
+import { KindBadge } from "./KindBadge"
 
 interface ServiceCardProps {
   service: ServiceSummary
@@ -37,7 +38,9 @@ export function ServiceCard({ service, health }: ServiceCardProps) {
         ) : null}
       </div>
 
-      <div className="flex gap-1.5 mb-2">
+      <div className="flex items-center gap-1.5 mb-2">
+        {/* A static (caddy-served) "service" is distinguished from a systemd one. */}
+        {service.kind === "static" && <KindBadge kind="static" />}
         <StackBadge stack={service.stack} />
       </div>
 
diff --git a/app/src/components/detail/DeploymentsSection.tsx b/app/src/components/detail/DeploymentsSection.tsx
index d8cee87..2313439 100644
--- a/app/src/components/detail/DeploymentsSection.tsx
+++ b/app/src/components/detail/DeploymentsSection.tsx
@@ -11,8 +11,7 @@ import { CreateDeploymentForm, type CreatePrefill } from "./CreateDeploymentForm
  * lifecycle is shown inline here; service/job deployments link to their own pages
  * where start/stop lives. This is the single home for "how this program runs". */
 export function DeploymentsSection({ program }: { program: ProgramDetail }) {
-  const { services, jobs, kind } = program
-  const none = services.length === 0 && jobs.length === 0
+  const { deployments } = program
   const [creating, setCreating] = useState(false)
 
   const { data: allServices } = useServices()
@@ -29,6 +28,11 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
     launcher: program.stack?.startsWith("python") || !program.stack ? "python" : "command",
   }
 
+  // Tool/static deployments are 1:1 with the program (same name) — their
+  // lifecycle is shown inline; service/job deployments link to their own pages.
+  const inline = deployments.filter((d) => d.kind === "tool" || d.kind === "static")
+  const linked = deployments.filter((d) => d.kind === "service" || d.kind === "job")
+
   return (
     <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
       <div className="flex items-center justify-between mb-1">
@@ -47,8 +51,13 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
       </p>
 
       {/* The program's own path/caddy deployment — its lifecycle, inline. */}
-      {kind === "tool" && <PathLifecycle name={program.id} active={program.active} />}
-      {kind === "static" && <StaticStatus name={program.id} active={program.active} />}
+      {inline.map((d) =>
+        d.kind === "tool" ? (
+          <PathLifecycle key={d.name} name={program.id} active={program.active} />
+        ) : (
+          <StaticStatus key={d.name} name={program.id} active={program.active} />
+        ),
+      )}
 
       {creating && (
         <CreateDeploymentForm
@@ -59,40 +68,27 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
       )}
 
       {/* Service/job deployments — managed on their own detail pages. */}
-      {none ? (
-        (kind === "tool" || kind === "static") ? null : (
-          <p className="text-sm text-[var(--muted)]">
-            {kind === "service"
-              ? "No service yet — this program isn't deployed."
-              : "No deployment yet."}
-          </p>
-        )
-      ) : (
+      {deployments.length === 0 && !creating ? (
+        <p className="text-sm text-[var(--muted)]">No deployment yet.</p>
+      ) : linked.length > 0 ? (
         <div className="space-y-1.5 mt-1">
-          {services.map((s) => (
+          {linked.map((d) => (
             <Link
-              key={s}
-              to={`/services/${s}`}
+              key={d.name}
+              to={d.kind === "job" ? `/jobs/${d.name}` : `/services/${d.name}`}
               className="flex items-center gap-2 text-sm hover:text-[var(--primary)] transition-colors"
             >
-              <Server size={14} className="text-[var(--muted)]" />
-              <span className="font-medium">{s}</span>
-              <span className="text-xs text-[var(--muted)]">service</span>
-            </Link>
-          ))}
-          {jobs.map((j) => (
-            <Link
-              key={j}
-              to={`/jobs/${j}`}
-              className="flex items-center gap-2 text-sm hover:text-[var(--primary)] transition-colors"
-            >
-              <Clock size={14} className="text-[var(--muted)]" />
-              <span className="font-medium">{j}</span>
-              <span className="text-xs text-[var(--muted)]">job</span>
+              {d.kind === "job" ? (
+                <Clock size={14} className="text-[var(--muted)]" />
+              ) : (
+                <Server size={14} className="text-[var(--muted)]" />
+              )}
+              <span className="font-medium">{d.name}</span>
+              <span className="text-xs text-[var(--muted)]">{d.kind}</span>
             </Link>
           ))}
         </div>
-      )}
+      ) : null}
     </div>
   )
 }
diff --git a/app/src/components/detail/JobFields.tsx b/app/src/components/detail/JobFields.tsx
index 9f6206e..6c4da75 100644
--- a/app/src/components/detail/JobFields.tsx
+++ b/app/src/components/detail/JobFields.tsx
@@ -1,6 +1,5 @@
 import { useState } from "react"
 import type { JobDetail } from "@/types"
-import { launcherLabel } from "@/lib/labels"
 import { Field, TextField, FormFooter, useEnvSecrets } from "./fields"
 
 interface Props {
@@ -12,6 +11,28 @@ interface Props {
 type Obj = Record<string, unknown>
 const obj = (v: unknown): Obj => (v as Obj) ?? {}
 
+// A job is a systemd deployment; its launcher is editable like a service's.
+const LAUNCHERS = ["python", "command", "container", "compose", "node"]
+
+function applyLauncher(run: Obj, launcher: string, target: string): Obj {
+  const out: Obj = { ...run, launcher }
+  const t = target.trim()
+  if (launcher === "command") {
+    out.argv = t.split(/\s+/).filter(Boolean)
+    delete out.program
+  } else if (launcher === "python") {
+    out.program = t
+    delete out.argv
+  } else if (launcher === "container") {
+    if (t) out.image = t
+  } else if (launcher === "node") {
+    if (t) out.script = t
+  } else if (launcher === "compose") {
+    if (t) out.file = t
+  }
+  return out
+}
+
 /** Edit a job's deployment config (schedule / run / env). */
 export function JobFields({ job, onSave, onDelete }: Props) {
   const m = job.manifest
@@ -22,12 +43,17 @@ export function JobFields({ job, onSave, onDelete }: Props) {
 
   const [description, setDescription] = useState((m.description as string) ?? "")
   const [schedule, setSchedule] = useState((m.schedule as string) ?? "")
+  const [launcher, setLauncher] = useState((run.launcher as string) ?? "command")
   const [runTarget, setRunTarget] = useState(
-    (run.program as string) ?? ((run.argv as string[]) ?? []).join(" "),
+    (run.program as string) ||
+      ((run.argv as string[]) ?? []).join(" ") ||
+      (run.image as string) ||
+      (run.script as string) ||
+      (run.file as string) ||
+      "",
   )
 
   const { element: envEditor, merged } = useEnvSecrets(obj(obj(m.defaults).env) as Record<string, string>)
-  const launcher = (run.launcher as string) ?? "?"
 
   const handleSave = async () => {
     setSaving(true)
@@ -38,10 +64,7 @@ export function JobFields({ job, onSave, onDelete }: Props) {
       config.description = description || undefined
       config.schedule = schedule || undefined
 
-      const runOut = obj(config.run)
-      if (launcher === "command") runOut.argv = runTarget.split(" ").filter(Boolean)
-      else if (launcher === "python") runOut.program = runTarget
-      config.run = runOut
+      config.run = applyLauncher(obj(config.run), launcher, runTarget)
 
       const env = merged()
       if (Object.keys(env).length > 0) config.defaults = { ...obj(config.defaults), env }
@@ -67,13 +90,26 @@ export function JobFields({ job, onSave, onDelete }: Props) {
         placeholder="0 2 * * *"
         hint="Cron expression — castle generates a systemd timer that runs the job on this schedule."
       />
-      <Field label="Runs" hint="The console script or command the job runs on each tick, then exits.">
-        <span className="text-sm font-mono text-[var(--muted)]">{launcherLabel(launcher)} &middot; </span>
-        <input
-          value={runTarget}
-          onChange={(e) => setRunTarget(e.target.value)}
-          className="w-56 bg-black/30 border border-[var(--border)] rounded px-2 py-1 text-xs font-mono focus:outline-none focus:border-[var(--primary)]"
-        />
+      <Field label="Runs" hint="How the job runs on each tick, then exits: the launcher and its target (a console script, command/argv, image, node script, or compose file).">
+        <div className="flex items-center gap-2">
+          <select
+            value={launcher}
+            onChange={(e) => setLauncher(e.target.value)}
+            className="bg-black/30 border border-[var(--border)] rounded px-2 py-1 text-xs font-mono focus:outline-none focus:border-[var(--primary)]"
+          >
+            {LAUNCHERS.map((l) => (
+              <option key={l} value={l}>
+                {l}
+              </option>
+            ))}
+          </select>
+          <span className="text-[var(--muted)]">&middot;</span>
+          <input
+            value={runTarget}
+            onChange={(e) => setRunTarget(e.target.value)}
+            className="w-56 bg-black/30 border border-[var(--border)] rounded px-2 py-1 text-xs font-mono focus:outline-none focus:border-[var(--primary)]"
+          />
+        </div>
       </Field>
       {envEditor}
       <FormFooter
diff --git a/app/src/components/detail/ProgramFields.tsx b/app/src/components/detail/ProgramFields.tsx
index 48285cd..61b939f 100644
--- a/app/src/components/detail/ProgramFields.tsx
+++ b/app/src/components/detail/ProgramFields.tsx
@@ -172,12 +172,13 @@ export function ProgramFields({ program, onSave, onDelete }: Props) {
  * confirm enumerates exactly what will happen. Source on disk is always kept. */
 function deleteConfirm(program: ProgramDetail): string {
   const actions: string[] = []
-  // The program's own 1:1 deployment (tool/static) isn't listed in services/jobs.
-  if (program.kind === "tool") actions.push(`uninstall ${program.id} from your PATH`)
-  else if (program.kind === "static")
-    actions.push(`stop serving ${program.id} (drop its gateway route)`)
-  // Named service/job deployments that reference this program.
-  const named = [...program.services, ...program.jobs]
+  // Enumerate the cascade — one line per deployment, keyed on its kind.
+  const named: string[] = []
+  for (const d of program.deployments) {
+    if (d.kind === "tool") actions.push(`uninstall ${d.name} from your PATH`)
+    else if (d.kind === "static") actions.push(`stop serving ${d.name}`)
+    else named.push(d.name)
+  }
   if (named.length) actions.push(`stop, disable, and remove: ${named.join(", ")}`)
   // Always: the catalog entry itself.
   actions.push(`remove "${program.id}" from the catalog`)
diff --git a/app/src/components/detail/ServiceFields.tsx b/app/src/components/detail/ServiceFields.tsx
index 90aa8ad..d77eb86 100644
--- a/app/src/components/detail/ServiceFields.tsx
+++ b/app/src/components/detail/ServiceFields.tsx
@@ -1,6 +1,5 @@
 import { useState } from "react"
 import type { ServiceDetail } from "@/types"
-import { launcherLabel } from "@/lib/labels"
 import { Field, TextField, FormFooter, useEnvSecrets } from "./fields"
 
 interface Props {
@@ -12,6 +11,31 @@ interface Props {
 type Obj = Record<string, unknown>
 const obj = (v: unknown): Obj => (v as Obj) ?? {}
 
+// The systemd launch mechanisms (a service is manager=systemd). Editable, so a
+// mis-set launcher can be corrected; the primary "Runs" target maps per launcher.
+const LAUNCHERS = ["python", "command", "container", "compose", "node"]
+
+/** Fold the "Runs" text into the run block for the chosen launcher, preserving
+ * any other run fields (args, ports, package_manager, …) already present. */
+function applyLauncher(run: Obj, launcher: string, target: string): Obj {
+  const out: Obj = { ...run, launcher }
+  const t = target.trim()
+  if (launcher === "command") {
+    out.argv = t.split(/\s+/).filter(Boolean)
+    delete out.program
+  } else if (launcher === "python") {
+    out.program = t
+    delete out.argv
+  } else if (launcher === "container") {
+    if (t) out.image = t
+  } else if (launcher === "node") {
+    if (t) out.script = t
+  } else if (launcher === "compose") {
+    if (t) out.file = t
+  }
+  return out
+}
+
 /** Edit a service's deployment config (run / expose / proxy / env). */
 export function ServiceFields({ service, onSave, onDelete }: Props) {
   const m = service.manifest
@@ -23,8 +47,14 @@ export function ServiceFields({ service, onSave, onDelete }: Props) {
   const [saved, setSaved] = useState(false)
 
   const [description, setDescription] = useState((m.description as string) ?? "")
+  const [launcher, setLauncher] = useState((run.launcher as string) ?? "python")
   const [runProgram, setRunProgram] = useState(
-    (run.program as string) ?? ((run.argv as string[]) ?? []).join(" "),
+    (run.program as string) ||
+      ((run.argv as string[]) ?? []).join(" ") ||
+      (run.image as string) ||
+      (run.script as string) ||
+      (run.file as string) ||
+      "",
   )
   const [port, setPort] = useState(internal.port != null ? String(internal.port) : "")
   const [health, setHealth] = useState((httpExpose.health_path as string) ?? "")
@@ -33,8 +63,6 @@ export function ServiceFields({ service, onSave, onDelete }: Props) {
 
   const { element: envEditor, merged } = useEnvSecrets(obj(obj(m.defaults).env) as Record<string, string>)
 
-  const launcher = (run.launcher as string) ?? "?"
-
   const handleSave = async () => {
     setSaving(true)
     setSaved(false)
@@ -43,12 +71,8 @@ export function ServiceFields({ service, onSave, onDelete }: Props) {
       delete config.id
       config.description = description || undefined
 
-      // Only python/command launchers are edited here; other launchers
-      // (container/node/compose) keep their original run block untouched.
-      const runOut = obj(config.run)
-      if (launcher === "command") runOut.argv = runProgram.split(" ").filter(Boolean)
-      else if (launcher === "python") runOut.program = runProgram
-      config.run = runOut
+      // Rebuild the run block for the chosen launcher, preserving other fields.
+      config.run = applyLauncher(obj(config.run), launcher, runProgram)
 
       if (port) {
         config.expose = {
@@ -81,14 +105,27 @@ export function ServiceFields({ service, onSave, onDelete }: Props) {
       <TextField label="Description" value={description} onChange={setDescription} />
       <Field
         label="Runs"
-        hint="The console script (python runner) or command this service executes."
+        hint="How this service starts: the launcher, and its target — a console script (python), a command/argv (command), an image (container), a script (node), or a compose file (compose)."
       >
-        <span className="text-sm font-mono text-[var(--muted)]">{launcherLabel(launcher)} &middot; </span>
-        <input
-          value={runProgram}
-          onChange={(e) => setRunProgram(e.target.value)}
-          className="w-full sm:w-56 bg-black/30 border border-[var(--border)] rounded px-2 py-1 text-xs font-mono focus:outline-none focus:border-[var(--primary)]"
-        />
+        <div className="flex items-center gap-2">
+          <select
+            value={launcher}
+            onChange={(e) => setLauncher(e.target.value)}
+            className="bg-black/30 border border-[var(--border)] rounded px-2 py-1 text-xs font-mono focus:outline-none focus:border-[var(--primary)]"
+          >
+            {LAUNCHERS.map((l) => (
+              <option key={l} value={l}>
+                {l}
+              </option>
+            ))}
+          </select>
+          <span className="text-[var(--muted)]">&middot;</span>
+          <input
+            value={runProgram}
+            onChange={(e) => setRunProgram(e.target.value)}
+            className="w-full sm:w-56 bg-black/30 border border-[var(--border)] rounded px-2 py-1 text-xs font-mono focus:outline-none focus:border-[var(--primary)]"
+          />
+        </div>
       </Field>
       <TextField
         label="Port"
diff --git a/app/src/pages/ProgramDetail.tsx b/app/src/pages/ProgramDetail.tsx
index a7d1577..db62cda 100644
--- a/app/src/pages/ProgramDetail.tsx
+++ b/app/src/pages/ProgramDetail.tsx
@@ -30,8 +30,9 @@ export function ProgramDetailPage() {
   // A static (caddy) deployment with build outputs is served by the gateway in
   // place at its own subdomain — show where.
   const buildOutputs = (deployment.manifest.build as { outputs?: string[] } | undefined)?.outputs
+  const isStatic = deployment.deployments.some((d) => d.kind === "static")
   const servedAt =
-    deployment.kind === "static" && buildOutputs?.length
+    isStatic && buildOutputs?.length
       ? (subdomainUrl(deployment.id) ?? `${deployment.id}.<gateway.domain>`)
       : null
 
@@ -41,7 +42,6 @@ export function ProgramDetailPage() {
         backTo="/programs"
         backLabel="Back to Programs"
         name={deployment.id}
-        kind={deployment.kind}
         stack={deployment.stack}
         source={deployment.source}
       >
diff --git a/app/src/pages/Services.tsx b/app/src/pages/Services.tsx
index 7607b86..b64bcd2 100644
--- a/app/src/pages/Services.tsx
+++ b/app/src/pages/Services.tsx
@@ -17,7 +17,7 @@ export function Services() {
     <div className="max-w-6xl mx-auto px-6 py-8">
       <PageHeader
         title="Services"
-        subtitle="Long-running processes"
+        subtitle="Long-running & served — systemd daemons and caddy statics"
         actions={
           <button
             onClick={() => setCreating((c) => !c)}
diff --git a/app/src/pages/Tools.tsx b/app/src/pages/Tools.tsx
new file mode 100644
index 0000000..171238e
--- /dev/null
+++ b/app/src/pages/Tools.tsx
@@ -0,0 +1,23 @@
+import { usePrograms } from "@/services/api/hooks"
+import { ProgramList } from "@/components/ProgramList"
+import { PageHeader } from "@/components/PageHeader"
+
+export function Tools() {
+  // Tools are program-centric — a tool is a program installed on PATH (its path
+  // deployment is 1:1 and trivial), so we list the programs that have one.
+  const { data: programs, isLoading } = usePrograms("tool")
+
+  return (
+    <div className="max-w-6xl mx-auto px-6 py-8">
+      <PageHeader title="Tools" subtitle="CLIs installed on your PATH" />
+
+      {isLoading ? (
+        <p className="text-[var(--muted)]">Loading...</p>
+      ) : programs && programs.length > 0 ? (
+        <ProgramList programs={programs} />
+      ) : (
+        <p className="text-[var(--muted)]">No tools yet.</p>
+      )}
+    </div>
+  )
+}
diff --git a/app/src/router/routes.tsx b/app/src/router/routes.tsx
index b4580b0..a6d7870 100644
--- a/app/src/router/routes.tsx
+++ b/app/src/router/routes.tsx
@@ -3,6 +3,7 @@ import { Layout } from "@/components/Layout"
 import { Overview } from "@/pages/Overview"
 import { Services } from "@/pages/Services"
 import { Scheduled } from "@/pages/Scheduled"
+import { Tools } from "@/pages/Tools"
 import { Programs } from "@/pages/Programs"
 import { GatewayPage } from "@/pages/GatewayPage"
 import { MeshPage } from "@/pages/MeshPage"
@@ -20,6 +21,7 @@ export const router = createBrowserRouter([
       { index: true, element: <Overview /> },
       { path: "services", element: <Services /> },
       { path: "scheduled", element: <Scheduled /> },
+      { path: "tools", element: <Tools /> },
       { path: "programs", element: <Programs /> },
       { path: "gateway", element: <GatewayPage /> },
       { path: "mesh", element: <MeshPage /> },
diff --git a/app/src/types/index.ts b/app/src/types/index.ts
index e86e5b7..e45d62f 100644
--- a/app/src/types/index.ts
+++ b/app/src/types/index.ts
@@ -8,8 +8,9 @@ export interface ServiceSummary {
   id: string
   description: string | null
   stack: string | null
-  manager?: string | null // systemd for a service
-  launcher: string | null // python | command | container | compose | node
+  kind: string | null // service | static
+  manager: string | null // systemd | caddy
+  launcher: string | null // python | command | container | compose | node (systemd only)
   run_target: string | null
   port: number | null
   health_path: string | null
@@ -43,10 +44,16 @@ export interface JobDetail extends JobSummary {
   manifest: Record<string, unknown>
 }
 
+// A program's deployment (name + its derived kind). A program has no kind of its
+// own — it has deployments, each with a kind (a program can be a tool AND a job).
+export interface DeploymentRef {
+  name: string
+  kind: string // service | job | tool | static | reference
+}
+
 export interface ProgramSummary {
   id: string
   description: string | null
-  kind: string | null // derived: service | job | tool | static | reference
   stack: string | null
   version: string | null
   source: string | null
@@ -57,8 +64,7 @@ export interface ProgramSummary {
   installed: boolean | null
   active: boolean | null
   actions: string[]
-  services: string[]
-  jobs: string[]
+  deployments: DeploymentRef[]
   node: string | null
 }