refactor: Rename component pages to program pages and remove tools concept

The 'tools' concept was just a filtered view of programs and added unnecessary
complexity to the frontend. This commit:

- Removes ToolCard.tsx and Tools.tsx (pages/components never used in router)
- Renames ComponentDetail.tsx → ProgramDetail.tsx (exports ProgramDetailPage)
- Renames ComponentRedirect.tsx → ProgramRedirect.tsx (exports ProgramRedirect)
- Updates imports in routes.tsx to match new file names
- Fixes stale comment in hooks.ts

Frontend naming now aligns with the unified programs model.

app/src/pages/ProgramDetail.tsx

@@ -0,0 +1,105 @@
+import { useState } from "react"
+import { useParams } from "react-router-dom"
+import { useProgram, useEventStream } from "@/services/api/hooks"
+import { runnerLabel } from "@/lib/labels"
+import { DetailHeader } from "@/components/detail/DetailHeader"
+import { ConfigPanel } from "@/components/detail/ConfigPanel"
+import { ProgramActions, ActionOutputPanel, type ActionOutput } from "@/components/ProgramActions"
+
+export function ProgramDetailPage() {
+  useEventStream()
+  const { name } = useParams<{ name: string }>()
+  const { data: component, isLoading, error, refetch } = useProgram(name ?? "")
+  const isTool = component?.behavior === "tool"
+  const [actionOutput, setActionOutput] = useState<ActionOutput | null>(null)
+
+  if (isLoading) {
+    return (
+      <div className="max-w-3xl mx-auto px-6 py-8 text-[var(--muted)]">Loading...</div>
+    )
+  }
+
+  if (error || !component) {
+    return (
+      <div className="max-w-3xl mx-auto px-6 py-8">
+        <DetailHeader backTo="/" backLabel="Back" name={name ?? ""} />
+        <p className="text-red-400">Program not found</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto px-6 py-8">
+      <DetailHeader
+        backTo="/"
+        backLabel="Back to Programs"
+        name={component.id}
+        behavior={component.behavior}
+        stack={component.stack}
+        source={component.source}
+      >
+        <ProgramActions name={component.id} actions={component.actions} installed={component.installed} onOutput={setActionOutput} />
+      </DetailHeader>
+
+      {actionOutput && actionOutput.action && (
+        <div className="-mt-2 mb-6">
+          <ActionOutputPanel output={actionOutput} onDismiss={() => setActionOutput(null)} />
+        </div>
+      )}
+
+      {component.description && (
+        <p className="text-sm text-[var(--muted)] -mt-4 mb-6">{component.description}</p>
+      )}
+
+      {isTool && (
+        <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">
+            {component.source && (
+              <>
+                <span className="text-[var(--muted)]">Source</span>
+                <span className="font-mono">{component.source}</span>
+              </>
+            )}
+            {component.version && (
+              <>
+                <span className="text-[var(--muted)]">Version</span>
+                <span>{component.version}</span>
+              </>
+            )}
+            {component.runner && (
+              <>
+                <span className="text-[var(--muted)]">Runner</span>
+                <span>{runnerLabel(component.runner)}</span>
+              </>
+            )}
+            <span className="text-[var(--muted)]">Installed</span>
+            <span>{component.installed ? "Yes" : "No"}</span>
+          </div>
+          {component.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">
+                {component.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>
+          )}
+        </div>
+      )}
+
+      <ConfigPanel component={component} configSection="programs" onRefetch={refetch} />
+    </div>
+  )
+}