ui: AgentCard + workspace layout + agent-policy-store

Final pieces of the Phase B re-skin on the shadcn base:

  agentos/src/components/AgentCard.tsx  (new)
    Polished card with avatar tile (harness logo or initial), status
    dot, LIB/1-shot badges, monospace harness label, source row with
    kind glyph + external-link icon, hairline divider, stats footer.
    bg-background solid.

  agentos/src/App.tsx
    Search + grouped Hosted/Library sections; uses <AgentCard>;
    overflow-y-auto / overflow-x-hidden scroll container; aside has
    overflow-hidden so cards don't bleed into the search bar.

  agentos/src/components/WorkspaceTab.tsx
    Replaced react-resizable-panels with plain flex layout (aside
    w-64 + main flex-1). The bad
    `Separator as PanelResizeHandle` import is gone.

  agentos/src/components/composite/EmptyState.tsx
    Minor copy + spacing tweaks.

  examples/agent-policy-store.ts
    Brought over from feat/agentos-observability-stack so
    examples/computeragent-server.ts has the policy-store import it
    needs.

  .gitignore  — adds local scratch paths.

Author: kapaleshreyas

.gitignore

@@ -30,3 +30,10 @@ test.html
 # Python bytecode caches from scripts/ test runners.
 __pycache__/
 *.pyc
+
+# Private operational handoff docs — full keys, access creds, infra map for
+# sharing with teammates. NEVER commit these to a public repo.
+private.md
+PRIVATE.md
+*.private.md
+docs.md

agentos/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   Home as HomeIcon,
   Activity,
@@ -7,6 +7,8 @@ import {
   ChevronDown,
   Folder,
   FolderOpen,
+  Search,
+  X,
 } from "lucide-react";
 import { api, type Agent } from "./api.ts";
 import { LogsTab } from "./components/LogsTab.tsx";
@@ -16,11 +18,14 @@ 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 { 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";
@@ -55,6 +60,18 @@ 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 (
@@ -77,6 +94,26 @@ export default function App() {
   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().then(setAgents).catch((e) => setErr(String(e)));
@@ -100,7 +137,7 @@ export default function App() {
   return (
     <div className="flex h-full bg-background text-foreground">
       {/* Left rail */}
-      <aside className="w-72 shrink-0 border-r border-border bg-card flex flex-col">
+      <aside className="w-64 md:w-72 lg:w-80 shrink-0 border-r border-border bg-card flex flex-col overflow-hidden">
         <div className="px-5 py-4 border-b border-border">
           <div className="flex items-center gap-2.5">
             <img src="/logos/agentos.png" alt="ComputerAgent" className="h-8 w-8 rounded-md object-contain" />
@@ -146,42 +183,80 @@ export default function App() {
         </div>
 
         {agentsOpen && (
-          <ScrollArea className="flex-1 mt-1 mr-2">
-            <div className="pl-3 ml-4 border-l border-border space-y-0.5">
-              {err && <div className="m-2 text-xs text-destructive">{err}</div>}
-              {agents.length === 0 && !err && (
-                <div className="m-2 space-y-1.5">
-                  <Skeleton className="h-12 w-full" />
-                  <Skeleton className="h-12 w-full" />
-                  <Skeleton className="h-12 w-full" />
-                </div>
-              )}
-              {agents.map((a) => (
-                <button
-                  key={a.name}
-                  onClick={() => openAgent(a.name)}
-                  className={cn(
-                    "w-full text-left rounded-md px-3 py-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    view === "dashboard" && selected === a.name
-                      ? "bg-muted ring-1 ring-primary/40"
-                      : "hover:bg-muted/60",
-                  )}
-                >
-                  <div className="flex items-center gap-2">
-                    <StatusDot status={a.activeSandboxes > 0 ? "live" : "idle"} />
-                    <span className="font-medium text-sm truncate flex-1">{agentNameFromSource(a.sourceUrl ?? "")}</span>
-                    <TypeBadge agent={a} />
+          <>
+            {/* 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>}
+                {agents.length === 0 && !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>
+                )}
+                {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>
-                  <div className="mt-1 text-[11px] text-muted-foreground truncate">{a.sourceUrl ?? ""}</div>
-                  <div className="mt-1 flex gap-3 text-[10px] text-muted-foreground/70">
-                    <span>{a.sessionCount} sessions</span>
-                    <span>{a.logCount} logs</span>
-                    <span>{timeAgo(a.lastActivity)}</span>
+                )}
+
+                {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>
-                </button>
-              ))}
+                )}
+
+                <div className="pt-2">
+                  <RegisterAgentForm onRegistered={() => api.agents().then(setAgents).catch(() => {})} />
+                </div>
+              </div>
             </div>
-          </ScrollArea>
+          </>
         )}
 
         <Separator />

agentos/src/components/AgentCard.tsx

@@ -0,0 +1,170 @@
+import { GitBranch, FolderTree, Code2, MessageSquare, Activity, Clock, ExternalLink } from "lucide-react";
+import { type Agent, displaySource } from "../api.ts";
+import { Badge } from "./ui/badge.tsx";
+import { cn } from "../lib/cn.ts";
+
+function typeLogo(harness: string): string | null {
+  if (harness === "gitagent") return "/logos/gitagent.png";
+  if (harness === "claude-agent-sdk") return "/logos/claude.svg";
+  if (harness === "deepagents") return "/logos/langchain.svg";
+  return null;
+}
+
+const NAME_OVERRIDES: Record<string, string> = {
+  "general-agent": "General Agent",
+  "agentos-builder": "AgentOS Builder",
+  "gap-promoter": "GAP Promoter",
+  "framework-translator-agent": "Framework Translator",
+};
+function agentNameFromSource(source: string, fallback: string): string {
+  const slug = source.split("/").pop() ?? "";
+  if (NAME_OVERRIDES[slug]) return NAME_OVERRIDES[slug];
+  if (slug) return slug.replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  return fallback
+    .replace(/[-_]+/g, " ")
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+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`;
+  if (s < 3600) return `${Math.floor(s / 60)}m`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h`;
+  return `${Math.floor(s / 86400)}d`;
+}
+
+/**
+ * Single agent card for the rail.
+ *
+ * Two zones with a hairline divider between them:
+ *   Top:    avatar (harness logo on white) + name + status pill + LIB/1-shot chip
+ *           source line: owner/repo with kind glyph + clickable external icon
+ *   Bottom: stat row — sessions / logs / lastActivity, each with icon
+ *
+ * Click anywhere on the card opens the agent's workspace (chat). The
+ * external-link icon is the only nested clickable; stopPropagation
+ * prevents card-click bubbling.
+ */
+export function AgentCard({
+  agent: a,
+  selected,
+  onClick,
+}: {
+  agent: Agent;
+  selected: boolean;
+  onClick: () => void;
+}) {
+  const sourceUrl = a.sourceUrl ?? "";
+  const displayName = agentNameFromSource(sourceUrl, a.name);
+  const harnessLogo = typeLogo(a.harness);
+  const initial = (displayName || a.name).charAt(0).toUpperCase();
+  const isLive = a.activeSandboxes > 0;
+  const sd = displaySource(a.source);
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "group w-full text-left rounded-xl border bg-background transition overflow-hidden shadow-sm",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        selected
+          ? "border-primary/50 ring-1 ring-primary/30 shadow-md shadow-primary/10"
+          : "border-border/60 hover:border-border hover:bg-muted/30 hover:shadow-md",
+      )}
+    >
+      {/* HEADER */}
+      <div className="px-3 pt-3 pb-2.5">
+        <div className="flex items-start gap-2.5 min-w-0">
+          {/* Avatar */}
+          <div className="relative shrink-0">
+            {harnessLogo ? (
+              <span className="h-9 w-9 grid place-items-center rounded-lg bg-white ring-1 ring-border shadow-sm">
+                <img src={harnessLogo} alt="" className="h-4 w-4 object-contain" />
+              </span>
+            ) : (
+              <span className="h-9 w-9 grid place-items-center rounded-lg bg-gradient-to-br from-primary/30 to-primary/10 text-primary text-sm font-bold ring-1 ring-primary/20">
+                {initial}
+              </span>
+            )}
+            <span
+              title={isLive ? `${a.activeSandboxes} live` : "idle"}
+              className={cn(
+                "absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full ring-2 ring-card",
+                isLive ? "bg-emerald-400" : "bg-muted-foreground/40",
+              )}
+            />
+          </div>
+
+          {/* Name + badges */}
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-1.5 min-w-0">
+              <span className="font-semibold text-[13.5px] text-foreground truncate" title={displayName}>
+                {displayName}
+              </span>
+              {a.origin === "registry" && (
+                <Badge variant="secondary" className="shrink-0 h-4 text-[9px] uppercase tracking-wider px-1.5 font-medium" title={`Registered via SDK${a.registeredBy ? ` by ${a.registeredBy}` : ""}`}>
+                  lib
+                </Badge>
+              )}
+              {!a.sandboxCapable && (
+                <Badge variant="outline" className="shrink-0 h-4 text-[9px] uppercase tracking-wider px-1.5 border-amber-500/40 text-amber-500" title="one-shot — no memory across turns">
+                  1-shot
+                </Badge>
+              )}
+            </div>
+            <div className="mt-0.5 text-[10.5px] text-muted-foreground/80 font-mono truncate" title={a.harness}>
+              {a.harness}
+            </div>
+          </div>
+        </div>
+
+        {/* Source row */}
+        {sourceUrl && (
+          <div className="mt-2.5 flex items-center gap-1.5 min-w-0 text-[11px] text-muted-foreground/90">
+            <SourceGlyph kind={sd.kind} />
+            <span className="truncate min-w-0 flex-1 font-mono" title={sd.primary}>
+              {sd.primary}
+            </span>
+            {sd.href && (
+              <a
+                href={sd.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e) => e.stopPropagation()}
+                title={`Open on ${sd.secondary}`}
+                aria-label={`Open ${sd.primary} on ${sd.secondary}`}
+                className="shrink-0 h-5 w-5 grid place-items-center rounded text-muted-foreground hover:text-primary hover:bg-muted transition-colors"
+              >
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Hairline */}
+      <div className="h-px bg-border/60 mx-3" />
+
+      {/* FOOTER */}
+      <div className="px-3 py-1.5 flex items-center gap-2.5 text-[10.5px] text-muted-foreground">
+        <span className="inline-flex items-center gap-1" title={`${a.sessionCount} session${a.sessionCount === 1 ? "" : "s"}`}>
+          <MessageSquare className="h-3 w-3" /> <span className="font-mono">{a.sessionCount}</span>
+        </span>
+        <span className="inline-flex items-center gap-1" title={`${a.logCount} log${a.logCount === 1 ? "" : "s"}`}>
+          <Activity className="h-3 w-3" /> <span className="font-mono">{a.logCount}</span>
+        </span>
+        <span className="ml-auto inline-flex items-center gap-1" title={a.lastActivity ?? a.lastSeen ?? "no activity"}>
+          <Clock className="h-3 w-3" /> {timeAgo(a.lastActivity ?? a.lastSeen ?? null)}
+        </span>
+      </div>
+    </button>
+  );
+}
+
+function SourceGlyph({ kind }: { kind: "git" | "local" | "inline" | "unknown" }) {
+  if (kind === "git") return <GitBranch className="h-3 w-3 shrink-0" />;
+  if (kind === "local") return <FolderTree className="h-3 w-3 shrink-0" />;
+  if (kind === "inline") return <Code2 className="h-3 w-3 shrink-0" />;
+  return <span className="h-3 w-3 inline-block shrink-0" />;
+}