feat(spa+agentos-server): registry page, agent-less /completion route

SPA: split the agent list into its own searchable RegistryPage (hosted +
library sections, register-from-grid), keep HomePage focused on launching
new chats. App.tsx loses ~190 lines of sidebar/list scaffolding by
routing to the new page instead.

agentos-server: new /agentos/api/completion route — agent-less Claude
Messages streaming SSE. Wired in routes/completion.ts and mounted from
index.ts alongside the existing /chat-sandbox and /run routes.
Lets the SPA's "quick chat" surface talk to Claude without spinning up
an agent.

SSE client: agentos/src/sse.ts ports the multi-dialect parser from
test.html — handles claude-agent-sdk (nested), gitagent (flat), and
deepagents (LangGraph) payload shapes so the same component reads any
of them.

Minor: AGENTOS_DEFAULT_MODEL default bumped from claude-sonnet-4-6 to
claude-haiku-4-5 (cheaper smoke).

Author: abhi-bhat-lyzr

agentos/src/App.tsx

@@ -1,15 +1,5 @@
-import { useEffect, useMemo, useState } from "react";
-import {
-  Home as HomeIcon,
-  Activity,
-  Shield,
-  ChevronRight,
-  ChevronDown,
-  Folder,
-  FolderOpen,
-  Search,
-  X,
-} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Home as HomeIcon, Activity, Shield, Boxes } from "lucide-react";
 import { api, type Agent } from "./api.ts";
 import { LogsTab } from "./components/LogsTab.tsx";
 import { WorkspaceTab } from "./components/WorkspaceTab.tsx";
@@ -18,29 +8,15 @@ import { HomePage } from "./components/HomePage.tsx";
 import { PolicyTab } from "./components/PolicyTab.tsx";
 import { PoliciesPage } from "./components/PoliciesPage.tsx";
 import { ObservabilityTab } from "./components/observability/ObservabilityTab.tsx";
-import { AgentCard } from "./components/AgentCard.tsx";
-import { RegisterAgentForm } from "./components/RegisterAgentForm.tsx";
+import { RegistryPage } from "./components/RegistryPage.tsx";
 import { Tabs, TabsList, TabsTrigger } from "./components/ui/tabs.tsx";
 import { Badge } from "./components/ui/badge.tsx";
-import { ScrollArea } from "./components/ui/scroll-area.tsx";
-import { Skeleton } from "./components/ui/skeleton.tsx";
 import { Separator } from "./components/ui/separator.tsx";
-import { Input } from "./components/ui/input.tsx";
-import { StatusDot } from "./components/composite/StatusDot.tsx";
 import { PageHeader } from "./components/composite/PageHeader.tsx";
 import { cn } from "./lib/cn.ts";
 
 type Tab = "chat" | "schedules" | "policy" | "logs";
-type View = "home" | "observability" | "policies" | "dashboard";
-
-function timeAgo(iso: string | null): string {
-  if (!iso) return "never";
-  const s = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
-  if (s < 60) return `${s}s ago`;
-  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
-  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
-  return `${Math.floor(s / 86400)}d ago`;
-}
+type View = "home" | "observability" | "policies" | "registry" | "dashboard";
 
 const NAME_OVERRIDES: Record<string, string> = {
   "general-agent": "General Agent",
@@ -60,18 +36,6 @@ function typeLogo(harness: string): string | null {
   return null;
 }
 
-function SectionLabel({ name, count }: { name: string; count: number }) {
-  return (
-    <div className="flex items-center gap-2 px-1">
-      <span className="text-[9.5px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/70">
-        {name}
-      </span>
-      <span className="flex-1 h-px bg-border/60" />
-      <span className="text-[9.5px] font-mono text-muted-foreground/50">{count}</span>
-    </div>
-  );
-}
-
 function TypeBadge({ agent, className = "" }: { agent: Agent; className?: string }) {
   const logo = typeLogo(agent.harness);
   return (
@@ -94,35 +58,19 @@ export default function App() {
   const [tab, setTab] = useState<Tab>("chat");
   const [err, setErr] = useState<string | null>(null);
   const [launchMessage, setLaunchMessage] = useState<string | null>(null);
-  const [agentsOpen, setAgentsOpen] = useState(true);
-  const [search, setSearch] = useState("");
 
-  const filteredAgents = useMemo(() => {
-    if (!search.trim()) return agents;
-    const q = search.trim().toLowerCase();
-    return agents.filter((a) =>
-      a.name.toLowerCase().includes(q) ||
-      (a.label ?? "").toLowerCase().includes(q) ||
-      (a.sourceUrl ?? "").toLowerCase().includes(q) ||
-      a.harness.toLowerCase().includes(q),
-    );
-  }, [agents, search]);
-
-  // Group by origin so Hosted (server-config'd) and Library (registry,
-  // dashboard- or SDK-registered) are visually separated.
-  const grouped = useMemo(() => {
-    const hosted = filteredAgents.filter((a) => (a.origin ?? "in-memory") === "in-memory");
-    const library = filteredAgents.filter((a) => a.origin === "registry");
-    return { hosted, library };
-  }, [filteredAgents]);
-
-  useEffect(() => {
-    api.agents()
+  const reloadAgents = useCallback(() => {
+    api
+      .agents()
       .then(setAgents)
       .catch((e) => setErr(String(e)))
       .finally(() => setAgentsLoaded(true));
   }, []);
 
+  useEffect(() => {
+    reloadAgents();
+  }, [reloadAgents]);
+
   const agent = agents.find((a) => a.name === selected) ?? null;
 
   const openAgent = (name: string) => {
@@ -159,6 +107,12 @@ export default function App() {
             active={view === "home"}
             onClick={() => setView("home")}
           />
+          <RailButton
+            icon={Boxes}
+            label="Agent Registry"
+            active={view === "registry" || view === "dashboard"}
+            onClick={() => setView("registry")}
+          />
           <RailButton
             icon={Activity}
             label="Observability"
@@ -173,103 +127,7 @@ export default function App() {
           />
         </nav>
 
-        {/* Agents folder */}
-        <div className="px-2 pt-3">
-          <button
-            onClick={() => setAgentsOpen((o) => !o)}
-            className="w-full flex items-center gap-1.5 px-3 py-1.5 text-xs uppercase tracking-wider rounded-md hover:bg-muted text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            {agentsOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
-            {agentsOpen ? <FolderOpen className="h-3.5 w-3.5" /> : <Folder className="h-3.5 w-3.5" />}
-            <span className="font-medium">Agents</span>
-            <span className="ml-auto text-[10px] text-muted-foreground/70">{agents.length || ""}</span>
-          </button>
-        </div>
-
-        {agentsOpen && (
-          <>
-            {/* Search — sticky at top of the rail, opaque so cards never
-                appear "behind" it as they scroll. */}
-            <div className="px-3 pt-2 pb-2 bg-card border-b border-border/60 relative z-10">
-              <div className="relative">
-                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/60 pointer-events-none" />
-                <Input
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  placeholder="Search agents…"
-                  className="pl-8 pr-7 h-8 text-xs bg-background"
-                />
-                {search && (
-                  <button
-                    onClick={() => setSearch("")}
-                    className="absolute right-1.5 top-1/2 -translate-y-1/2 h-5 w-5 grid place-items-center rounded text-muted-foreground/70 hover:text-foreground hover:bg-muted"
-                    title="Clear"
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                )}
-              </div>
-            </div>
-
-            <div className="flex-1 overflow-y-auto overflow-x-hidden mt-2 min-w-0">
-              <div className="px-3 pb-3 space-y-3 min-w-0">
-                {err && <div className="text-xs text-destructive">{err}</div>}
-                {!agentsLoaded && !err && (
-                  <div className="space-y-2">
-                    <Skeleton className="h-20 w-full" />
-                    <Skeleton className="h-20 w-full" />
-                    <Skeleton className="h-20 w-full" />
-                  </div>
-                )}
-                {agentsLoaded && agents.length === 0 && !err && (
-                  <div className="text-center text-xs text-muted-foreground py-6 px-2 space-y-1">
-                    <div>No agents registered yet.</div>
-                    <div className="text-muted-foreground/70">
-                      Use the <span className="font-mono">+ Register</span> button below, or POST to <span className="font-mono">/api/agents/register</span>.
-                    </div>
-                  </div>
-                )}
-                {agents.length > 0 && filteredAgents.length === 0 && (
-                  <div className="text-center text-xs text-muted-foreground py-6">
-                    No agents match <span className="font-mono">"{search}"</span>
-                  </div>
-                )}
-
-                {grouped.hosted.length > 0 && (
-                  <div className="space-y-2 min-w-0">
-                    <SectionLabel name="Hosted" count={grouped.hosted.length} />
-                    {grouped.hosted.map((a) => (
-                      <AgentCard
-                        key={a.name}
-                        agent={a}
-                        selected={view === "dashboard" && selected === a.name}
-                        onClick={() => openAgent(a.name)}
-                      />
-                    ))}
-                  </div>
-                )}
-
-                {grouped.library.length > 0 && (
-                  <div className="space-y-2 min-w-0">
-                    <SectionLabel name="Library" count={grouped.library.length} />
-                    {grouped.library.map((a) => (
-                      <AgentCard
-                        key={a.name}
-                        agent={a}
-                        selected={view === "dashboard" && selected === a.name}
-                        onClick={() => openAgent(a.name)}
-                      />
-                    ))}
-                  </div>
-                )}
-
-                <div className="pt-2">
-                  <RegisterAgentForm onRegistered={() => api.agents().then(setAgents).catch(() => {})} />
-                </div>
-              </div>
-            </div>
-          </>
-        )}
+        <div className="flex-1" />
 
         <Separator />
         <div className="px-4 py-3 text-[10px] text-muted-foreground/70">agentos.clawagent.sh</div>
@@ -280,9 +138,18 @@ export default function App() {
         {view === "policies" ? (
           <PoliciesPage />
         ) : view === "home" ? (
-          <HomePage onLaunch={launchFromHome} onOpenDashboard={() => agents[0] && openAgent(agents[0].name)} />
+          <HomePage agents={agents} onLaunch={launchFromHome} onOpenDashboard={() => agents[0] && openAgent(agents[0].name)} />
         ) : view === "observability" ? (
           <ObservabilityTab />
+        ) : view === "registry" ? (
+          <RegistryPage
+            agents={agents}
+            loaded={agentsLoaded}
+            err={err}
+            selected={selected}
+            onOpenAgent={openAgent}
+            onReload={reloadAgents}
+          />
         ) : agent ? (
           <>
             <PageHeader