@mndrk/agx 2.0.13 → 2.0.15

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/app/agents/[id]/page.tsx

@@ -0,0 +1,723 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import {
+  Activity,
+  Zap,
+  BrainCircuit,
+  ArrowLeft,
+  Users,
+  Hash,
+  MessageSquare,
+  BookOpen,
+  Sparkles,
+  RefreshCw,
+  ChevronRight,
+  Clock,
+  Target,
+  Cpu,
+  ShieldCheck,
+  CornerDownRight,
+  Download,
+  Pencil,
+} from "lucide-react";
+import type { Participant } from "@/lib/types";
+import { agentAvatarUrl, AgentForm, type AgentFormData } from "@/components/chat-ui/ParticipantBar";
+import { useTeams } from "@/hooks/useTeams";
+import { stripMarkers } from "@/lib/chat-utils";
+import { Markdown } from "@/components/chat-ui/Markdown";
+
+interface JournalEntry {
+  t: string;
+  type?: string;
+  observation?: string;
+  judgement?: string;
+  delta?: string;
+  intent?: string;
+  id?: string;
+  body?: string;
+  selfVersion?: number;
+  thread?: string;
+}
+
+interface ActivityEntry {
+  t: string;
+  agent?: string;
+  action?: string;
+  thread?: string;
+  response?: string;
+  messageId?: string;
+  reactions?: string[];
+}
+
+interface AgentProfile {
+  identity: Record<string, unknown>;
+  self: string;
+  selfVersion: number | null;
+  selfDerivedAt: string | null;
+  journal: JournalEntry[];
+  activity: ActivityEntry[];
+}
+
+interface MessageEntry {
+  threadId: string;
+  id: string;
+  role: string;
+  content: string;
+  timestamp: number;
+  rootMessageId: string | null;
+  threadTitle: string | null;
+  prevContent: string | null;
+  prevParticipantId: string | null;
+}
+
+interface AgentStats {
+  total_messages: number;
+  threads_participated: number;
+}
+
+export default function AgentProfilePage() {
+  const { id } = useParams<{ id: string }>();
+  const [agent, setAgent] = useState<Participant | null>(null);
+  const [allParticipants, setAllParticipants] = useState<Participant[]>([]);
+  const [profile, setProfile] = useState<AgentProfile | null>(null);
+  const [messages, setMessages] = useState<MessageEntry[]>([]);
+  const [stats, setStats] = useState<AgentStats>({ total_messages: 0, threads_participated: 0 });
+  const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState("feed");
+  const [editModal, setEditModal] = useState(false);
+  const { teams } = useTeams();
+
+  useEffect(() => {
+    if (!id) return;
+    Promise.all([
+      fetch("/api/participants").then((r) => r.json()),
+      fetch(`/api/agents/${id}/profile`).then((r) => r.ok ? r.json() : null),
+      fetch(`/api/agents/${id}/messages`).then((r) => r.ok ? r.json() : null),
+    ]).then(([participants, profileData, messagesData]) => {
+      const list = Array.isArray(participants) ? participants : [];
+      setAllParticipants(list);
+      const found = list.find((p: Participant) => p.id === id);
+      setAgent(found ?? null);
+      setProfile(profileData);
+      setMessages(messagesData?.messages ?? []);
+      setStats(messagesData?.stats ?? { total_messages: 0, threads_participated: 0 });
+      setLoading(false);
+    });
+  }, [id]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-[#F8FAFC] flex items-center justify-center">
+        <div className="animate-pulse text-slate-400 text-sm">Loading agent…</div>
+      </div>
+    );
+  }
+
+  if (!agent) {
+    return (
+      <div className="min-h-screen bg-[#F8FAFC] flex flex-col items-center justify-center gap-4">
+        <p className="text-slate-500">Agent not found</p>
+        <Link href="/agents" className="text-sm text-blue-600 hover:underline">
+          Back to agents
+        </Link>
+      </div>
+    );
+  }
+
+  const themeColor = agent.color || "#D97706";
+
+  const agentTeams = teams.filter((t) =>
+    t.agents.some((a) => a.agent_id === agent.id)
+  );
+
+  const bio = profile?.self || agent.identity || "";
+  const bioClean: string = stripMarkers(bio);
+  const journal = profile?.journal ?? [];
+  const reflections = journal.filter((e) => e.type === "reflection");
+
+  // Flat reverse-chrono messages
+  const cleanMessages = messages
+    .map((m) => ({ ...m, content: stripMarkers(m.content) }))
+    .filter((m) => m.content.length > 0);
+
+  const participantMap = new Map<string, Participant>();
+  for (const p of allParticipants) participantMap.set(p.id, p);
+
+  const getParticipantName = (pid: string | null) => {
+    if (!pid) return "You";
+    const p = participantMap.get(pid);
+    return p?.name ?? pid;
+  };
+
+  const getParticipantColor = (pid: string | null) => {
+    if (!pid) return "#6366f1";
+    return participantMap.get(pid)?.color ?? "#94a3b8";
+  };
+
+  const formatRelative = (ts: string | number) => {
+    const date = typeof ts === "string" ? new Date(ts) : new Date(ts);
+    const diff = Date.now() - date.getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 1) return "just now";
+    if (mins < 60) return `${mins}m ago`;
+    const hours = Math.floor(mins / 60);
+    if (hours < 24) return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 7) return `${days}d ago`;
+    return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" }).format(date);
+  };
+
+  const formatDate = (ts: string | number) => {
+    const date = typeof ts === "string" ? new Date(ts) : new Date(ts);
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    }).format(date);
+  };
+
+  const statCards = [
+    { label: "Messages", value: stats.total_messages.toLocaleString(), icon: MessageSquare },
+    { label: "Threads", value: String(stats.threads_participated), icon: Hash },
+    { label: "Journal Entries", value: String(journal.length), icon: BookOpen },
+    { label: "Teams", value: String(agentTeams.length), icon: Users },
+  ];
+
+  return (
+    <div className="min-h-screen bg-[#F8FAFC] text-slate-900 font-sans selection:bg-amber-100">
+      {/* Top Nav */}
+      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200 px-4 md:px-8 h-14 flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Link href="/agents" className="p-2 hover:bg-slate-100 rounded-lg transition-colors group">
+            <ArrowLeft className="w-5 h-5 text-slate-500 group-hover:text-slate-900" />
+          </Link>
+          <div className="h-4 w-[1px] bg-slate-200 hidden md:block" />
+          <div className="hidden md:flex items-center gap-2 text-sm font-medium text-slate-500">
+            <Users className="w-4 h-4" />
+            <Link href="/agents" className="hover:text-slate-700 transition-colors">Agents</Link>
+            <ChevronRight className="w-4 h-4 text-slate-300" />
+            <span className="text-slate-900 font-semibold">{agent.name}</span>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          {profile?.selfVersion && (
+            <span className="text-xs font-mono text-slate-400 bg-slate-100 px-2 py-1 rounded">
+              v{profile.selfVersion}
+            </span>
+          )}
+        </div>
+      </nav>
+
+      <main className="max-w-7xl mx-auto p-4 md:p-8 grid grid-cols-1 lg:grid-cols-12 gap-8">
+        {/* Left Column: Profile Card & Sidebar */}
+        <div className="lg:col-span-4 space-y-6">
+          <div className="bg-white rounded-3xl border border-slate-200 shadow-xl shadow-slate-200/50 overflow-hidden">
+            {/* Cover */}
+            <div
+              className="h-32 w-full relative"
+              style={{ background: `linear-gradient(135deg, ${themeColor} 0%, ${themeColor}99 100%)` }}
+            >
+              <div className="absolute inset-0 opacity-20 bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]" />
+            </div>
+
+            {/* Identity Info */}
+            <div className="px-6 pb-6 text-center -mt-16 relative">
+              <div className="inline-block relative">
+                <img
+                  alt={agent.name}
+                  className="w-32 h-32 rounded-3xl bg-white p-2 border-4 border-white shadow-xl"
+                  src={agentAvatarUrl(agent.id, 128, agent.color)}
+                />
+                <div className="absolute bottom-2 right-2 w-6 h-6 bg-green-500 border-4 border-white rounded-full" />
+              </div>
+
+              <div className="mt-4 space-y-1">
+                <div className="flex items-center justify-center gap-2">
+                  <h1 className="text-2xl font-black tracking-tight">{agent.name}</h1>
+                  <span
+                    className="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider"
+                    style={{ backgroundColor: `${themeColor}20`, color: themeColor }}
+                  >
+                    {agent.provider}
+                  </span>
+                </div>
+                <p className="text-slate-500 font-mono text-xs">{agent.model}</p>
+              </div>
+
+              {/* Quick Tags */}
+              <div className="flex flex-wrap justify-center gap-2 mt-6">
+                <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-slate-50 border border-slate-100 text-xs font-medium text-slate-600">
+                  <Cpu className="w-3.5 h-3.5" />
+                  {agent.model}
+                </div>
+                <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-slate-50 border border-slate-100 text-xs font-medium text-slate-600">
+                  <Activity className="w-3.5 h-3.5" />
+                  Active
+                </div>
+              </div>
+
+              {/* Stats Grid */}
+              <div className="grid grid-cols-2 gap-3 mt-8">
+                {statCards.map((stat, i) => (
+                  <div
+                    key={i}
+                    className="bg-slate-50 p-3 rounded-2xl border border-slate-100 text-left hover:border-slate-300 transition-colors cursor-default"
+                  >
+                    <stat.icon className="w-4 h-4 text-slate-400 mb-1" />
+                    <div className="text-lg font-bold text-slate-900">{stat.value}</div>
+                    <div className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">{stat.label}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Sidebar Modules */}
+          <div className="space-y-4">
+            <div className="bg-white rounded-2xl border border-slate-200 p-5">
+              <h3 className="text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
+                <Zap className="w-3.5 h-3.5" /> Actions
+              </h3>
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => setEditModal(true)}
+                  className="flex-1 flex items-center justify-center gap-2 px-3 py-2.5 text-sm font-medium text-slate-700 bg-slate-50 border border-slate-200 rounded-xl hover:bg-slate-100 hover:border-slate-300 transition-all"
+                >
+                  <Pencil className="w-3.5 h-3.5" />
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  onClick={async () => {
+                    const res = await fetch("/api/agents/export", {
+                      method: "POST",
+                      headers: { "Content-Type": "application/json" },
+                      body: JSON.stringify({ agentIds: [agent.id] }),
+                    });
+                    if (!res.ok) return;
+                    const data = await res.json();
+                    const bundle = {
+                      version: 1,
+                      exportedAt: new Date().toISOString(),
+                      agents: data.agents,
+                      teams: [],
+                    };
+                    const blob = new Blob([JSON.stringify(bundle, null, 2)], { type: "application/json" });
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement("a");
+                    a.href = url;
+                    a.download = `${agent.name.toLowerCase().replace(/\s+/g, "-")}.agent.json`;
+                    a.click();
+                    URL.revokeObjectURL(url);
+                  }}
+                  className="flex-1 flex items-center justify-center gap-2 px-3 py-2.5 text-sm font-medium text-slate-700 bg-slate-50 border border-slate-200 rounded-xl hover:bg-slate-100 hover:border-slate-300 transition-all"
+                >
+                  <Download className="w-3.5 h-3.5" />
+                  Export
+                </button>
+              </div>
+            </div>
+
+            {agent.skills && agent.skills.length > 0 && (
+              <div className="bg-white rounded-2xl border border-slate-200 p-5">
+                <h3 className="text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
+                  <BrainCircuit className="w-3.5 h-3.5" /> Skills
+                </h3>
+                <div className="flex flex-col gap-2">
+                  {agent.skills.map((s, i) => (
+                    <div key={i} className="flex items-center gap-2 text-xs p-2 hover:bg-slate-50 rounded-lg transition-colors">
+                      <Zap size={10} className="text-blue-500 shrink-0" />
+                      <span className="text-blue-600 font-mono truncate" title={s.file}>
+                        {s.file.split("/").pop()}
+                      </span>
+                      {s.condition && (
+                        <span className="text-slate-400 text-[10px] ml-auto shrink-0">
+                          {s.condition}
+                        </span>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className="bg-white rounded-2xl border border-slate-200 p-5">
+              <h3 className="text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
+                <ShieldCheck className="w-3.5 h-3.5" /> Details
+              </h3>
+              <div className="space-y-3 text-xs">
+                <div className="flex justify-between">
+                  <span className="text-slate-500">ID</span>
+                  <span className="font-mono bg-slate-50 px-1.5 py-0.5 rounded">{agent.id}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-slate-500">Provider</span>
+                  <span className="font-medium capitalize">{agent.provider}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-slate-500">Model</span>
+                  <span className="font-mono">{agent.model}</span>
+                </div>
+                {profile?.identity?.voice ? (
+                  <div className="flex justify-between">
+                    <span className="text-slate-500">Voice</span>
+                    <span className="font-medium">{String(profile.identity.voice)}</span>
+                  </div>
+                ) : null}
+                <div className="flex justify-between items-center">
+                  <span className="text-slate-500">Color</span>
+                  <div className="flex items-center gap-1.5">
+                    <div
+                      className="w-3 h-3 rounded-full border border-slate-200"
+                      style={{ backgroundColor: agent.color }}
+                    />
+                    <span className="font-mono">{agent.color}</span>
+                  </div>
+                </div>
+                {profile?.selfDerivedAt && (
+                  <div className="flex justify-between">
+                    <span className="text-slate-500">Last Evolved</span>
+                    <span className="text-slate-600">{formatRelative(profile.selfDerivedAt)}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {agentTeams.length > 0 && (
+              <div className="bg-white rounded-2xl border border-slate-200 p-5">
+                <h3 className="text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
+                  <Users className="w-3.5 h-3.5" /> Active Teams
+                </h3>
+                <div className="space-y-2">
+                  {agentTeams.map((team) => (
+                    <div key={team.id} className="flex items-center justify-between p-2 hover:bg-slate-50 rounded-lg transition-colors group cursor-pointer">
+                      <div className="flex items-center gap-3">
+                        <div className="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center text-xs font-bold text-slate-500 group-hover:bg-white group-hover:shadow-sm">
+                          {team.name[0]}
+                        </div>
+                        <span className="text-sm font-medium text-slate-700">{team.name}</span>
+                      </div>
+                      <span className="text-xs text-slate-400">
+                        {team.agents.length} agent{team.agents.length !== 1 ? "s" : ""}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right Column: Main Content */}
+        <div className="lg:col-span-8 space-y-6">
+          {/* Tab Bar */}
+          <div className="bg-white p-1 rounded-2xl border border-slate-200 flex shadow-sm">
+            {[
+              { key: "feed", label: "Feed", icon: MessageSquare },
+              { key: "reflections", label: "Reflections", icon: Sparkles },
+            ].map((tab) => (
+              <button
+                key={tab.key}
+                onClick={() => setActiveTab(tab.key)}
+                className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl text-sm font-bold transition-all ${
+                  activeTab === tab.key
+                    ? "bg-slate-900 text-white shadow-lg shadow-slate-200"
+                    : "text-slate-500 hover:text-slate-800"
+                }`}
+              >
+                <tab.icon className="w-4 h-4" />
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Tab Content */}
+          <div className="min-h-[600px]">
+            {/* Feed Tab: Bio + Flat Messages */}
+            {activeTab === "feed" && (
+              <div className="space-y-4">
+                {/* Bio at top */}
+                {(bioClean || profile?.identity?.seed) ? (
+                  <div className="bg-white rounded-3xl border border-slate-200 p-6 shadow-sm">
+                    {bioClean ? (
+                      <div>
+                        <div className="flex items-center justify-between mb-4">
+                          <h2 className="text-xs font-black text-slate-400 uppercase tracking-[0.2em] flex items-center gap-2">
+                            <Target className="w-4 h-4" /> Bio
+                          </h2>
+                          {profile?.selfDerivedAt && (
+                            <span className="text-[10px] text-slate-400 flex items-center gap-1">
+                              <RefreshCw className="w-3 h-3" />
+                              v{profile.selfVersion} — {formatRelative(profile.selfDerivedAt)}
+                            </span>
+                          )}
+                        </div>
+                        <div className="text-sm text-slate-700 leading-relaxed prose prose-sm prose-slate max-w-none">
+                          <Markdown content={bioClean} />
+                        </div>
+                      </div>
+                    ) : profile?.identity?.seed ? (
+                      <div>
+                        <h2 className="text-xs font-black text-slate-400 uppercase tracking-[0.2em] flex items-center gap-2 mb-4">
+                          <Target className="w-4 h-4" /> Bio
+                        </h2>
+                        <p className="text-sm text-slate-600 italic border-l-4 pl-4" style={{ borderColor: themeColor }}>
+                          &ldquo;{String(profile.identity.seed)}&rdquo;
+                        </p>
+                      </div>
+                    ) : null}
+                  </div>
+                ) : null}
+
+                {/* Messages heading */}
+                <div className="flex items-center justify-between px-2">
+                  <h2 className="text-xs font-black text-slate-400 uppercase tracking-[0.2em] flex items-center gap-2">
+                    <MessageSquare className="w-4 h-4" /> Messages
+                  </h2>
+                  <span className="text-xs text-slate-400">{cleanMessages.length} messages</span>
+                </div>
+
+                {cleanMessages.length === 0 ? (
+                  <div className="bg-white rounded-3xl border border-slate-200 p-12 text-center">
+                    <MessageSquare size={32} className="mx-auto mb-3 text-slate-300" />
+                    <p className="text-sm text-slate-400">No messages yet</p>
+                    <p className="text-xs text-slate-400 mt-1">
+                      Messages will appear here as this agent participates in threads
+                    </p>
+                  </div>
+                ) : (
+                  cleanMessages.map((m) => {
+                    const prevClean = m.prevContent ? stripMarkers(m.prevContent) : null;
+                    const prevName = getParticipantName(m.prevParticipantId);
+                    const prevColor = getParticipantColor(m.prevParticipantId);
+                    const threadTitle = m.threadTitle ? stripMarkers(m.threadTitle) : null;
+
+                    return (
+                      <article
+                        key={m.id}
+                        className="bg-white rounded-3xl border border-slate-200 p-6 hover:shadow-xl hover:shadow-slate-200/50 transition-all group"
+                      >
+                        <div className="flex items-start gap-4">
+                          <img
+                            src={agentAvatarUrl(agent.id, 40, agent.color)}
+                            alt=""
+                            className="w-10 h-10 rounded-2xl shrink-0 mt-0.5 shadow-sm"
+                          />
+                          <div className="flex-1 min-w-0">
+                            {/* Header: name + timestamp */}
+                            <div className="flex items-center justify-between mb-1">
+                              <div className="flex items-center gap-2">
+                                <span className="font-bold text-slate-900">{agent.name}</span>
+                                <span className="text-xs text-slate-400">• {formatRelative(m.timestamp)}</span>
+                              </div>
+                            </div>
+
+                            {/* Thread link */}
+                            {m.rootMessageId && threadTitle && (
+                              <Link
+                                href={`/projects/${m.threadId}?thread=${m.rootMessageId}`}
+                                className="inline-flex items-center gap-1.5 mb-3 px-2.5 py-1 rounded-lg bg-slate-50 border border-slate-100 hover:border-slate-300 hover:bg-slate-100 transition-colors text-[11px] font-medium text-slate-500 hover:text-slate-700 group/thread"
+                              >
+                                <Hash className="w-3 h-3 text-slate-400 group-hover/thread:text-slate-500" />
+                                <span className="truncate max-w-[300px]">{threadTitle}</span>
+                                <ChevronRight className="w-3 h-3 text-slate-300 group-hover/thread:text-slate-400" />
+                              </Link>
+                            )}
+
+                            {/* Responding to: previous message in thread */}
+                            {prevClean && (
+                              <div className="mb-3 flex items-start gap-2 pl-1">
+                                <CornerDownRight className="w-3.5 h-3.5 text-slate-300 shrink-0 mt-1" />
+                                <div className="flex-1 min-w-0 p-2.5 rounded-xl bg-slate-50 border border-slate-100">
+                                  <div className="flex items-center gap-1.5 mb-1">
+                                    {m.prevParticipantId && (
+                                      <img
+                                        src={agentAvatarUrl(m.prevParticipantId, 16, prevColor)}
+                                        alt=""
+                                        className="w-4 h-4 rounded"
+                                      />
+                                    )}
+                                    <span className="text-[10px] font-bold" style={{ color: prevColor }}>
+                                      {prevName}
+                                    </span>
+                                  </div>
+                                  <p className="text-xs text-slate-500 leading-relaxed line-clamp-2">
+                                    {prevClean}
+                                  </p>
+                                </div>
+                              </div>
+                            )}
+
+                            {/* Message content */}
+                            <div className="text-sm text-slate-700">
+                              <Markdown content={m.content} />
+                            </div>
+
+                            {/* Footer */}
+                            <div className="mt-3 flex items-center gap-1.5 text-[10px] text-slate-400 font-medium">
+                              <Clock className="w-3 h-3" />
+                              {formatDate(m.timestamp)}
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                    );
+                  })
+                )}
+              </div>
+            )}
+
+            {/* Reflections Tab */}
+            {activeTab === "reflections" && (
+              <div className="space-y-4">
+                <div className="flex items-center justify-between px-2">
+                  <h2 className="text-xs font-black text-slate-400 uppercase tracking-[0.2em] flex items-center gap-2">
+                    <BookOpen className="w-4 h-4" /> Journal Reflections
+                  </h2>
+                  <span className="text-xs text-slate-400">{reflections.length} reflections</span>
+                </div>
+
+                {reflections.length === 0 ? (
+                  <div className="bg-white rounded-3xl border border-slate-200 p-12 text-center">
+                    <Sparkles size={32} className="mx-auto mb-3 text-slate-300" />
+                    <p className="text-sm text-slate-400">No reflections yet</p>
+                    <p className="text-xs text-slate-400 mt-1">
+                      Reflections will appear as this agent evolves its self-model
+                    </p>
+                  </div>
+                ) : (
+                  reflections.map((entry, i) => {
+                    const bodyContent = entry.body ? stripMarkers(entry.body) : "";
+                    return (
+                      <article
+                        key={entry.id ?? i}
+                        className="bg-white rounded-3xl border border-amber-100 ring-1 ring-amber-200 p-6 hover:shadow-xl hover:shadow-slate-200/50 transition-all group"
+                      >
+                        <div className="flex items-start gap-4">
+                          <div className="relative shrink-0">
+                            <img
+                              alt=""
+                              className="w-10 h-10 rounded-2xl shadow-sm"
+                              src={agentAvatarUrl(agent.id, 40, agent.color)}
+                            />
+                            <div
+                              className="absolute -top-1 -right-1 w-4 h-4 rounded-full flex items-center justify-center border-2 border-white"
+                              style={{ backgroundColor: themeColor }}
+                            >
+                              <Sparkles className="w-2 h-2 text-white" />
+                            </div>
+                          </div>
+
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center justify-between mb-1">
+                              <div className="flex items-center gap-2">
+                                <span className="font-bold text-slate-900">{agent.name}</span>
+                                <span className="text-[10px] font-black uppercase px-2 py-0.5 rounded bg-amber-100 text-amber-700">
+                                  reflection
+                                </span>
+                                <span className="text-xs text-slate-400">• {formatRelative(entry.t)}</span>
+                              </div>
+                              {entry.selfVersion && (
+                                <span className="text-[10px] text-slate-400 font-mono">v{entry.selfVersion}</span>
+                              )}
+                            </div>
+
+                            {entry.observation && (
+                              <p className="text-xs text-slate-500 mb-3">{entry.observation}</p>
+                            )}
+
+                            {bodyContent && (
+                              <div className="text-sm text-slate-700 leading-relaxed prose prose-sm prose-slate max-w-none">
+                                <Markdown content={bodyContent} />
+                              </div>
+                            )}
+
+                            {(entry.judgement || entry.delta || entry.intent) && (
+                              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-4 pt-4 border-t border-slate-100 group-hover:border-slate-200 transition-colors">
+                                {entry.judgement && (
+                                  <div className="space-y-1">
+                                    <div className="text-[10px] font-black text-slate-400 uppercase tracking-wider">Judgment</div>
+                                    <p className="text-xs text-slate-500 leading-relaxed">{entry.judgement}</p>
+                                  </div>
+                                )}
+                                {entry.delta && (
+                                  <div className="space-y-1">
+                                    <div className="text-[10px] font-black text-slate-400 uppercase tracking-wider">Delta</div>
+                                    <p className="text-xs text-slate-500 leading-relaxed">{entry.delta}</p>
+                                  </div>
+                                )}
+                                {entry.intent && (
+                                  <div className="space-y-1">
+                                    <div className="text-[10px] font-black text-slate-400 uppercase tracking-wider">Intent</div>
+                                    <p className="text-xs text-slate-500 leading-relaxed">{entry.intent}</p>
+                                  </div>
+                                )}
+                              </div>
+                            )}
+
+                            <div className="mt-4 flex items-center justify-between">
+                              <div className="flex items-center gap-1.5 text-[10px] text-slate-400 font-medium">
+                                <Clock className="w-3 h-3" />
+                                {formatDate(entry.t)}
+                              </div>
+                              {entry.thread && (
+                                <span className="text-[10px] text-slate-400 font-mono flex items-center gap-1">
+                                  <Hash className="w-3 h-3" />
+                                  {entry.thread.substring(0, 12)}...
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                    );
+                  })
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+
+      {editModal && (
+        <AgentForm
+          title="Edit agent"
+          initial={{
+            name: agent.name,
+            provider: agent.provider,
+            model: agent.model || "",
+            identity: agent.identity || "",
+            identityFile: agent.identityFile || "",
+            skills: agent.skills || [],
+            variables: agent.variables ?? {},
+          }}
+          submitLabel="Save"
+          onSubmit={async (data: AgentFormData) => {
+            await fetch("/api/participants", {
+              method: "PATCH",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                id: agent.id,
+                name: data.name,
+                provider: data.provider,
+                model: data.model,
+                ...(data.identity ? { identity: data.identity } : {}),
+                ...(data.identityFile ? { identityFile: data.identityFile } : {}),
+                skills: data.skills,
+                variables: data.variables,
+              }),
+            });
+            setAgent({ ...agent, name: data.name, provider: data.provider, model: data.model, identity: data.identity, identityFile: data.identityFile, skills: data.skills, variables: data.variables });
+            setEditModal(false);
+          }}
+          onCancel={() => setEditModal(false)}
+        />
+      )}
+    </div>
+  );
+}