feat: update /agents page with home_node badges and new API

apps/web/src/app/agents/page.tsx

@@ -1,47 +1,184 @@
-import Link from 'next/link'
-import { Bot, Zap, Clock, CheckCircle2, XCircle, Sparkles } from 'lucide-react'
-import { api, Agent } from '@/lib/api'
-import { cn } from '@/lib/utils'
+'use client';
 
-// Force dynamic rendering
-export const dynamic = 'force-dynamic'
+import Link from 'next/link';
+import { Bot, Users, Building2, Server, ExternalLink } from 'lucide-react';
+import { useAgentList } from '@/hooks/useAgents';
+import { AgentSummary } from '@/lib/types/agents';
 
-async function getAgents(): Promise<Agent[]> {
-  try {
-    return await api.getAgents()
-  } catch (error) {
-    console.error('Failed to fetch agents:', error)
-    return []
-  }
+// Kind emoji mapping
+const kindEmoji: Record<string, string> = {
+  vision: '👁️',
+  curator: '🎨',
+  security: '🛡️',
+  finance: '💰',
+  civic: '🏛️',
+  oracle: '🔮',
+  builder: '🏗️',
+  research: '🔬',
+  marketing: '📢',
+  orchestrator: '🎭',
+  mediator: '⚖️',
+  assistant: '🤖',
+};
+
+function getNodeBadge(nodeId: string | undefined | null): { label: string; color: string } {
+  if (!nodeId) return { label: 'Unknown', color: 'bg-gray-500/20 text-gray-400' };
+  if (nodeId.includes('node-1')) return { label: 'НОДА1', color: 'bg-emerald-500/20 text-emerald-400' };
+  if (nodeId.includes('node-2')) return { label: 'НОДА2', color: 'bg-amber-500/20 text-amber-400' };
+  return { label: 'НОДА', color: 'bg-purple-500/20 text-purple-400' };
 }
 
-export default async function AgentsPage() {
-  const agents = await getAgents()
+function AgentCard({ agent }: { agent: AgentSummary }) {
+  const isOnline = agent.status === 'online';
+  const statusColor = isOnline ? 'text-emerald-400' : 'text-white/40';
+  const emoji = kindEmoji[agent.kind] || '🤖';
+  const nodeBadge = getNodeBadge(agent.home_node?.id);
 
   return (
-    <div className="min-h-screen px-4 py-8">
-      <div className="max-w-6xl mx-auto">
+    <Link
+      href={`/agents/${agent.id}`}
+      className="group bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6 hover:border-violet-500/50 transition-all hover:bg-white/10"
+    >
+      {/* Header */}
+      <div className="flex items-start gap-4 mb-4">
+        <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-violet-500/30 to-purple-600/30 flex items-center justify-center flex-shrink-0 overflow-hidden">
+          {agent.avatar_url ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={agent.avatar_url}
+              alt={agent.display_name}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <span className="text-2xl">{emoji}</span>
+          )}
+        </div>
+        <div className="flex-1 min-w-0">
+          <h3 className="text-lg font-semibold text-white truncate group-hover:text-violet-400 transition-colors">
+            {agent.display_name}
+          </h3>
+          {agent.public_title && (
+            <p className="text-sm text-cyan-400">{agent.public_title}</p>
+          )}
+          <p className="text-xs text-white/50 mt-1">{agent.kind}</p>
+        </div>
+      </div>
+
+      {/* District & MicroDAO */}
+      <div className="space-y-2 mb-4">
+        {agent.district && (
+          <div className="flex items-center gap-2 text-sm text-white/60">
+            <Building2 className="w-4 h-4" />
+            <span>{agent.district}</span>
+          </div>
+        )}
+        {agent.microdao_memberships.length > 0 && (
+          <div className="flex items-center gap-2 text-sm text-white/60">
+            <Users className="w-4 h-4" />
+            <span>{agent.microdao_memberships[0].microdao_name}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="pt-4 border-t border-white/10 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <span className={`flex items-center gap-1.5 text-xs ${statusColor}`}>
+            <span
+              className={`w-2 h-2 rounded-full ${
+                isOnline ? 'bg-emerald-500' : 'bg-white/30'
+              }`}
+            />
+            {isOnline ? 'online' : 'offline'}
+          </span>
+          <span className={`px-2 py-0.5 rounded text-[10px] font-medium ${nodeBadge.color}`}>
+            {nodeBadge.label}
+          </span>
+          {agent.is_public && (
+            <span className="px-2 py-0.5 rounded text-[10px] font-medium bg-cyan-500/20 text-cyan-400">
+              Public
+            </span>
+          )}
+        </div>
+        <span className="text-violet-400 text-sm group-hover:translate-x-1 transition-transform">
+          Open →
+        </span>
+      </div>
+    </Link>
+  );
+}
+
+export default function AgentsPage() {
+  const { agents, total, isLoading, error } = useAgentList({ limit: 100 });
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-900 to-slate-950">
+      <div className="max-w-7xl mx-auto px-4 py-12">
         {/* Header */}
         <div className="mb-8">
-          <div className="flex items-center gap-3 mb-4">
-            <div className="p-3 rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-600/20">
-              <Bot className="w-8 h-8 text-violet-400" />
-            </div>
-            <div>
-              <h1 className="text-3xl font-bold text-white">Agent Console</h1>
-              <p className="text-slate-400">Управління та виклик AI-агентів</p>
+          <div className="flex items-center gap-3 mb-2">
+            <Bot className="w-8 h-8 text-violet-400" />
+            <h1 className="text-4xl font-bold bg-gradient-to-r from-violet-400 to-purple-400 bg-clip-text text-transparent">
+              Agent Console
+            </h1>
+          </div>
+          <p className="text-white/60 text-lg">
+            Всі AI-агенти мережі DAARION
+          </p>
+          <p className="text-cyan-400 mt-2">
+            Знайдено агентів: {total}
+          </p>
+        </div>
+
+        {/* Filters */}
+        <div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6 mb-8">
+          <div className="flex flex-wrap gap-4">
+            <div className="flex items-center gap-2">
+              <Server className="w-4 h-4 text-white/40" />
+              <span className="text-sm text-white/60">Фільтр по нодах:</span>
+              <span className="px-2 py-1 rounded text-xs font-medium bg-emerald-500/20 text-emerald-400">
+                НОДА1 (Production)
+              </span>
+              <span className="px-2 py-1 rounded text-xs font-medium bg-amber-500/20 text-amber-400">
+                НОДА2 (Development)
+              </span>
             </div>
           </div>
         </div>
 
-        {/* Agents Grid */}
-        {agents.length === 0 ? (
-          <div className="glass-panel p-12 text-center">
-            <Bot className="w-16 h-16 text-slate-600 mx-auto mb-4" />
+        {/* Content */}
+        {error && (
+          <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-6 text-center mb-8">
+            <p className="text-red-400">Помилка завантаження агентів</p>
+          </div>
+        )}
+
+        {isLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div
+                key={i}
+                className="bg-white/5 rounded-2xl border border-white/10 p-6 animate-pulse"
+              >
+                <div className="flex items-start gap-4 mb-4">
+                  <div className="w-14 h-14 rounded-xl bg-white/10" />
+                  <div className="flex-1 space-y-2">
+                    <div className="h-5 bg-white/10 rounded w-3/4" />
+                    <div className="h-4 bg-white/10 rounded w-1/2" />
+                  </div>
+                </div>
+                <div className="h-4 bg-white/10 rounded w-full mb-2" />
+                <div className="h-4 bg-white/10 rounded w-2/3" />
+              </div>
+            ))}
+          </div>
+        ) : agents.length === 0 ? (
+          <div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-12 text-center">
+            <Bot className="w-16 h-16 text-white/20 mx-auto mb-4" />
             <h2 className="text-xl font-semibold text-white mb-2">
               Агенти не знайдені
             </h2>
-            <p className="text-slate-400">
+            <p className="text-white/50">
               Наразі немає доступних агентів. Спробуйте пізніше.
             </p>
           </div>
@@ -53,150 +190,26 @@ export default async function AgentsPage() {
           </div>
         )}
 
-        {/* Quick Actions */}
-        <div className="mt-12">
-          <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
-            <Sparkles className="w-5 h-5 text-violet-400" />
-            Швидкі дії
-          </h2>
-          
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            <QuickAction
-              icon={Zap}
-              title="Швидкий виклик"
-              description="Викликати агента одним кліком"
-              href="/agents/invoke"
-            />
-            <QuickAction
-              icon={Clock}
-              title="Історія"
-              description="Переглянути історію викликів"
-              href="/agents/history"
-            />
-            <QuickAction
-              icon={Bot}
-              title="Створити агента"
-              description="Налаштувати нового агента"
-              href="/agents/create"
-            />
-            <QuickAction
-              icon={Sparkles}
-              title="Blueprints"
-              description="Шаблони агентів"
-              href="/agents/blueprints"
-            />
-          </div>
+        {/* Links */}
+        <div className="mt-12 flex flex-wrap gap-4">
+          <Link
+            href="/citizens"
+            className="flex items-center gap-2 px-4 py-2 bg-cyan-500/10 hover:bg-cyan-500/20 border border-cyan-500/30 rounded-lg text-cyan-400 transition-colors"
+          >
+            <Users className="w-4 h-4" />
+            Публічні громадяни
+            <ExternalLink className="w-3 h-3" />
+          </Link>
+          <Link
+            href="/nodes"
+            className="flex items-center gap-2 px-4 py-2 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/30 rounded-lg text-purple-400 transition-colors"
+          >
+            <Server className="w-4 h-4" />
+            Node Dashboard
+            <ExternalLink className="w-3 h-3" />
+          </Link>
         </div>
       </div>
     </div>
-  )
+  );
 }
-
-function AgentCard({ agent }: { agent: Agent }) {
-  const isOnline = agent.status === 'active' && agent.is_active
-
-  return (
-    <Link
-      href={`/agents/${agent.id}`}
-      className="glass-panel-hover p-6 group block"
-    >
-      <div className="flex items-start gap-4">
-        {/* Avatar */}
-        <div className={cn(
-          'w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0',
-          'bg-gradient-to-br from-violet-500/30 to-purple-600/30'
-        )}>
-          {agent.avatar_url ? (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img 
-              src={agent.avatar_url} 
-              alt={agent.name}
-              className="w-full h-full rounded-xl object-cover"
-            />
-          ) : (
-            <Bot className="w-7 h-7 text-violet-400" />
-          )}
-        </div>
-
-        {/* Info */}
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-1">
-            <h3 className="text-lg font-semibold text-white truncate group-hover:text-violet-400 transition-colors">
-              {agent.name}
-            </h3>
-            {isOnline ? (
-              <CheckCircle2 className="w-4 h-4 text-emerald-400 flex-shrink-0" />
-            ) : (
-              <XCircle className="w-4 h-4 text-slate-500 flex-shrink-0" />
-            )}
-          </div>
-          
-          <p className="text-sm text-slate-400 line-clamp-2 mb-3">
-            {agent.description || 'Без опису'}
-          </p>
-
-          <div className="flex items-center gap-3 text-xs">
-            <span className={cn(
-              'px-2 py-0.5 rounded-full',
-              agent.kind === 'text' && 'bg-cyan-500/20 text-cyan-400',
-              agent.kind === 'multimodal' && 'bg-violet-500/20 text-violet-400',
-              agent.kind === 'system' && 'bg-amber-500/20 text-amber-400'
-            )}>
-              {agent.kind}
-            </span>
-            {agent.model && (
-              <span className="text-slate-500 truncate">
-                {agent.model}
-              </span>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Capabilities */}
-      {agent.capabilities && agent.capabilities.length > 0 && (
-        <div className="mt-4 pt-4 border-t border-white/5">
-          <div className="flex flex-wrap gap-1.5">
-            {agent.capabilities.slice(0, 3).map((cap, i) => (
-              <span
-                key={i}
-                className="px-2 py-0.5 text-xs bg-slate-800/50 text-slate-400 rounded"
-              >
-                {cap}
-              </span>
-            ))}
-            {agent.capabilities.length > 3 && (
-              <span className="px-2 py-0.5 text-xs text-slate-500">
-                +{agent.capabilities.length - 3}
-              </span>
-            )}
-          </div>
-        </div>
-      )}
-    </Link>
-  )
-}
-
-function QuickAction({
-  icon: Icon,
-  title,
-  description,
-  href
-}: {
-  icon: React.ComponentType<{ className?: string }>
-  title: string
-  description: string
-  href: string
-}) {
-  return (
-    <Link
-      href={href}
-      className="glass-panel p-4 hover:bg-white/5 transition-colors group"
-    >
-      <Icon className="w-6 h-6 text-violet-400 mb-3 group-hover:scale-110 transition-transform" />
-      <h3 className="font-medium text-white mb-1">{title}</h3>
-      <p className="text-xs text-slate-400">{description}</p>
-    </Link>
-  )
-}
-

apps/web/src/app/api/agents/list/route.ts

@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const CITY_API_URL = process.env.INTERNAL_API_URL || process.env.CITY_API_BASE_URL || 'http://daarion-city-service:7001';
+
+export async function GET(req: NextRequest) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const kind = searchParams.get('kind');
+    const node_id = searchParams.get('node_id');
+    const limit = searchParams.get('limit') || '100';
+    const offset = searchParams.get('offset') || '0';
+
+    const params = new URLSearchParams();
+    if (kind) params.set('kind', kind);
+    if (node_id) params.set('node_id', node_id);
+    params.set('limit', limit);
+    params.set('offset', offset);
+
+    const response = await fetch(`${CITY_API_URL}/public/agents?${params.toString()}`, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      cache: 'no-store',
+    });
+
+    if (!response.ok) {
+      const text = await response.text();
+      console.error('Failed to fetch agents:', response.status, text);
+      return NextResponse.json(
+        { error: 'Failed to fetch agents' },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching agents:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
+

apps/web/src/hooks/useAgents.ts

@@ -0,0 +1,58 @@
+'use client';
+
+import useSWR from 'swr';
+import { AgentSummary, AgentListResponse, AgentDashboard } from '@/lib/types/agents';
+
+const fetcher = async (url: string) => {
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error('Failed to fetch');
+  }
+  return res.json();
+};
+
+export function useAgentList(params?: {
+  kind?: string;
+  node_id?: string;
+  limit?: number;
+  offset?: number;
+}) {
+  const searchParams = new URLSearchParams();
+  if (params?.kind) searchParams.set('kind', params.kind);
+  if (params?.node_id) searchParams.set('node_id', params.node_id);
+  if (params?.limit) searchParams.set('limit', params.limit.toString());
+  if (params?.offset) searchParams.set('offset', params.offset.toString());
+
+  const queryString = searchParams.toString();
+  const url = `/api/agents/list${queryString ? `?${queryString}` : ''}`;
+
+  const { data, error, isLoading, mutate } = useSWR<AgentListResponse>(url, fetcher, {
+    revalidateOnFocus: false,
+  });
+
+  return {
+    agents: data?.items || [],
+    total: data?.total || 0,
+    isLoading,
+    error,
+    mutate,
+  };
+}
+
+export function useAgentDashboard(agentId: string | undefined) {
+  const { data, error, isLoading, mutate } = useSWR<AgentDashboard>(
+    agentId ? `/api/agents/${agentId}/dashboard` : null,
+    fetcher,
+    {
+      revalidateOnFocus: false,
+    }
+  );
+
+  return {
+    agent: data,
+    isLoading,
+    error,
+    mutate,
+  };
+}
+

apps/web/src/lib/types/agents.ts

@@ -0,0 +1,54 @@
+import { HomeNodeInfo } from './citizens';
+
+export interface AgentMicrodaoMembership {
+  microdao_id: string;
+  microdao_slug: string;
+  microdao_name: string;
+  role?: string;
+  is_core: boolean;
+}
+
+export interface AgentSummary {
+  id: string;
+  display_name: string;
+  kind: string;
+  avatar_url?: string | null;
+  status: string;
+  is_public: boolean;
+  public_slug?: string | null;
+  public_title?: string | null;
+  district?: string | null;
+  home_node?: HomeNodeInfo | null;
+  microdao_memberships: AgentMicrodaoMembership[];
+}
+
+export interface AgentListResponse {
+  items: AgentSummary[];
+  total: number;
+}
+
+export interface AgentDashboard {
+  id: string;
+  display_name: string;
+  kind: string;
+  avatar_url?: string | null;
+  status: string;
+  is_public: boolean;
+  public_slug?: string | null;
+  public_title?: string | null;
+  public_tagline?: string | null;
+  public_skills: string[];
+  district?: string | null;
+  home_node?: HomeNodeInfo | null;
+  microdao_memberships: AgentMicrodaoMembership[];
+  system_prompts?: {
+    core?: string;
+    safety?: string;
+    governance?: string;
+    tools?: string;
+  };
+  capabilities: string[];
+  model?: string | null;
+  role?: string | null;
+}
+