update agents skill design

src/pages/admin/Workspace.jsx

@@ -6,6 +6,7 @@ import {
 } from 'lucide-react';
 import { usePreferences } from '@/lib/krowHooks';
 import { aiAgentSkills, allSkills, skillsWithFacet } from '@/lib/skills/registry';
+import { allAgents } from '@/lib/agents/registry';
 import { AdminPage } from '@/pages/admin/_shell';
 import OwliverAvatar from '@/components/krow/OwliverAvatar';
 import { cn } from '@/lib/utils';
@@ -29,6 +30,12 @@ import { cn } from '@/lib/utils';
 
 export default function AdminWorkspace() {
   const preferences = usePreferences();
+  /* Read through the agent registry, never by counting skills — one registry
+     answers "how many agents", exactly as the skill registry answers its own. */
+  const agentCount = useMemo(
+    () => allAgents(preferences.customAgents || [], { customSkills: preferences.customSkills || [] }).length,
+    [preferences.customAgents, preferences.customSkills]
+  );
 
   /**
    * AI agent skills only.
@@ -94,6 +101,35 @@ export default function AdminWorkspace() {
           </div>
         </div>
 
+        {/* ── Agents ─────────────────────────────────────────────────────
+            Above the two skill columns because it is the layer over them: an
+            agent decides which of these skills Owliver may use on a page. */}
+        <div className="bg-white rounded-2xl border border-[#E0E4EA] p-6 shadow-xs space-y-4">
+          <div className="flex items-center justify-between border-b border-[#E0E4EA] pb-3">
+            <div className="flex items-center gap-2">
+              <OwliverAvatar className="w-6 h-6" rounded="rounded-md" />
+              <h2 className="text-[16px] font-bold text-[#101820]">Owliver Agents</h2>
+            </div>
+            <span className="text-[12px] font-semibold text-[#0838E0] bg-blue-50 px-3 py-1 rounded-full border border-blue-200/60">
+              {agentCount} Registered
+            </span>
+          </div>
+
+          <p className="text-[13px] text-[#687386]">
+            An agent is how Owliver answers on a page: which skills it may use, what it knows, and
+            how much work an answer is worth. Agents narrow what a page offers — they never widen it.
+          </p>
+
+          <Link
+            to="/admin/workspace/agents"
+            className="w-full inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-[#0838E0] hover:bg-[#062BAF] text-white text-[13px] font-semibold transition-all shadow-md shadow-blue-500/20 hover:scale-[1.01]"
+          >
+            <Sparkles className="w-4 h-4" />
+            Manage Agents
+            <ArrowRight className="w-4 h-4" />
+          </Link>
+        </div>
+
         {/* ── 2. Full Width 2-Column Grid ───────────────────────────────── */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full">
           {/* ── Left Column: Owliver AI Capabilities ───────────────────── */}