refactor(frontend): remove Event Flow section, unify mermaid graphs, fix bull avatar

- Remove Event Flow collapsible section and eventFlow data from Learn tab
- Update pattern READMEs to use LR mermaid graphs matching frontend
- Add name-based color override for bull agent (green background)
- Truncate long reflection handoff reasons to prevent overflow

Author: uid4oe

frontend/src/components/AgentAvatar.tsx

@@ -10,9 +10,18 @@ const ROLE_COLORS: Record<string, { bg: string; text: string }> = {
   worker: { bg: "bg-teal-100", text: "text-teal-700" },
 };
 
+/** Agent-name overrides — takes priority over role-based colors */
+const NAME_COLORS: Record<string, { bg: string; text: string }> = {
+  bull: { bg: "bg-green-100", text: "text-green-700" },
+};
+
 const DEFAULT_COLORS = { bg: "bg-gray-100", text: "text-gray-600" };
 
-export function getAgentColors(role: string): { bg: string; text: string } {
+export function getAgentColors(role: string, name?: string): { bg: string; text: string } {
+  if (name) {
+    const byName = NAME_COLORS[name.toLowerCase()];
+    if (byName) return byName;
+  }
   return ROLE_COLORS[role.toLowerCase()] ?? DEFAULT_COLORS;
 }
 
@@ -23,7 +32,7 @@ interface AgentAvatarProps {
 }
 
 export function AgentAvatar({ name, role, size = "md" }: AgentAvatarProps) {
-  const colors = getAgentColors(role);
+  const colors = getAgentColors(role, name);
   const initial = name.charAt(0).toUpperCase();
 
   const sizeClasses =

frontend/src/components/LearnView.tsx

@@ -25,12 +25,6 @@ const iconSteps = (
   </svg>
 );
 
-const iconStream = (
-  <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
-  </svg>
-);
-
 const iconAgents = (
   <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
@@ -144,13 +138,6 @@ function PatternContentView({ pattern, onTryPrompt }: PatternContentViewProps) {
           </ol>
         </CollapsibleSection>
 
-        {/* Event Flow */}
-        <CollapsibleSection title="Event Flow" icon={iconStream}>
-          <pre className="text-[10px] leading-relaxed bg-[var(--color-surface-tertiary)] rounded-lg p-3 overflow-x-auto font-mono text-[var(--color-text-secondary)]">
-            <code>{pattern.eventFlow}</code>
-          </pre>
-        </CollapsibleSection>
-
         {/* Agent Roles */}
         <CollapsibleSection title="Agent Roles" icon={iconAgents}>
           <div className="overflow-x-auto">

frontend/src/data/pattern-content.ts

@@ -19,7 +19,6 @@ export interface PatternContent {
   whenToUse: string[];
   architectureMermaid: string;
   howItWorks: string[];
-  eventFlow: string;
   agents: PatternAgent[];
   tradeoffs: {
     pros: string[];
@@ -55,14 +54,6 @@ const router: PatternContent = {
     "The matched specialist agent processes the original input with domain-specific expertise",
     "The specialist's streamed response becomes the final output",
   ],
-  eventFlow: `agent_start  {agent: "router", role: "classifier"}
-chunk        {agent: "router", content: "BILLING"}
-agent_end    {agent: "router", ...}
-handoff      {from: "router", to: "billing", reason: "billing intent detected"}
-agent_start  {agent: "billing", role: "specialist"}
-chunk        {agent: "billing", content: "I can help with your invoice..."}
-agent_end    {agent: "billing", ...}
-done         {totalUsage: {...}}`,
   agents: [
     {
       name: "router",
@@ -138,18 +129,6 @@ const pipeline: PatternContent = {
     "Output passes to the Editor, who refines for clarity, grammar, and coherence",
     "The editor's output is the final result",
   ],
-  eventFlow: `agent_start  {agent: "researcher", role: "research expert"}
-chunk        {agent: "researcher", content: "...research findings..."}
-agent_end    {agent: "researcher", ...}
-handoff      {from: "researcher", to: "writer", reason: "passing to next stage"}
-agent_start  {agent: "writer", role: "content writer"}
-chunk        {agent: "writer", content: "...draft article..."}
-agent_end    {agent: "writer", ...}
-handoff      {from: "writer", to: "editor", reason: "passing to next stage"}
-agent_start  {agent: "editor", role: "editor"}
-chunk        {agent: "editor", content: "...polished article..."}
-agent_end    {agent: "editor", ...}
-done         {totalUsage: {...}}`,
   agents: [
     {
       name: "researcher",
@@ -227,20 +206,6 @@ const supervisor: PatternContent = {
     "Retry loop: if output is inadequate, the worker retries with the supervisor's feedback appended (up to 3 attempts)",
     "Final output: the last worker's accepted output becomes the pattern's result",
   ],
-  eventFlow: `agent_start  {agent: "supervisor", role: "planner"}
-chunk        {agent: "supervisor", content: "Plan: search -> analysis -> summary"}
-agent_end    {agent: "supervisor", ...}
-handoff      {from: "supervisor", to: "search", reason: "Dispatching search task"}
-agent_start  {agent: "search", role: "information gatherer"}
-chunk        {agent: "search", content: "...findings..."}
-agent_end    {agent: "search", ...}
-handoff      {from: "search", to: "supervisor", reason: "Reviewing search output"}
-agent_start  {agent: "supervisor", role: "reviewer"}
-chunk        {agent: "supervisor", content: "Review: adequate. ..."}
-agent_end    {agent: "supervisor", ...}
-handoff      {from: "supervisor", to: "analysis", reason: "Dispatching analysis task"}
-...
-done         {totalUsage: {...}}`,
   agents: [
     {
       name: "supervisor",
@@ -321,20 +286,6 @@ const debate: PatternContent = {
     "This repeats for 2 rounds (configurable), with each debater seeing the full transcript so far",
     "After all rounds, the judge receives the complete debate transcript and delivers a verdict with reasoning",
   ],
-  eventFlow: `agent_start  {agent: "bull", role: "debater"}
-chunk        {agent: "bull", content: "...arguments for..."}
-agent_end    {agent: "bull", ...}
-handoff      {from: "bull", to: "bear", reason: "round 1"}
-agent_start  {agent: "bear", role: "debater"}
-chunk        {agent: "bear", content: "...arguments against..."}
-agent_end    {agent: "bear", ...}
-handoff      {from: "bear", to: "bull", reason: "next round"}
-...
-handoff      {from: "bear", to: "judge", reason: "debate complete"}
-agent_start  {agent: "judge", role: "judge"}
-chunk        {agent: "judge", content: "...verdict and reasoning..."}
-agent_end    {agent: "judge", ...}
-done         {totalUsage: {...}}`,
   agents: [
     {
       name: "bull",
@@ -417,14 +368,6 @@ const swarm: PatternContent = {
     "The target agent can also hand off to another agent if needed",
     "The chain continues until an agent responds without a handoff (max 5 iterations)",
   ],
-  eventFlow: `agent_start  {agent: "triage", role: "triage"}
-chunk        {agent: "triage", content: "...I'll connect you..."}
-agent_end    {agent: "triage", ...}
-handoff      {from: "triage", to: "billing", reason: "triage handed off to billing"}
-agent_start  {agent: "billing", role: "specialist"}
-chunk        {agent: "billing", content: "...I can help with your invoice..."}
-agent_end    {agent: "billing", ...}
-done         {totalUsage: {...}}`,
   agents: [
     {
       name: "triage",
@@ -507,22 +450,6 @@ const mapReduce: PatternContent = {
     "Fan-in \u2014 a single handoff event signals all mappers are done",
     "Reduce \u2014 the ReducerAgent synthesizes all mapper outputs into one coherent response",
   ],
-  eventFlow: `agent_start  {agent: "splitter", role: "splitter"}
-chunk        {agent: "splitter", content: "...subtask plan..."}
-agent_end    {agent: "splitter", ...}
-handoff      {from: "splitter", to: "mapper-1", reason: "fan-out"}
-handoff      {from: "splitter", to: "mapper-2", reason: "fan-out"}
-agent_start  {agent: "mapper-1", role: "mapper"}
-agent_start  {agent: "mapper-2", role: "mapper"}
-chunk        {agent: "mapper-1", content: "...analysis A..."}
-chunk        {agent: "mapper-2", content: "...analysis B..."}
-agent_end    {agent: "mapper-1", ...}
-agent_end    {agent: "mapper-2", ...}
-handoff      {from: "mappers", to: "reducer", reason: "fan-in"}
-agent_start  {agent: "reducer", role: "reducer"}
-chunk        {agent: "reducer", content: "...synthesis..."}
-agent_end    {agent: "reducer", ...}
-done         {totalUsage: {...}}`,
   agents: [
     {
       name: "splitter",
@@ -597,22 +524,6 @@ const reflection: PatternContent = {
     "The loop repeats until pass or max iterations (3) are reached",
     "On the final iteration, the critic is skipped \u2014 the generator's output is the final answer",
   ],
-  eventFlow: `agent_start  {agent: "generator", role: "content generator"}
-chunk        {agent: "generator", content: "...initial draft..."}
-agent_end    {agent: "generator", ...}
-handoff      {from: "generator", to: "critic", reason: "iteration 1 — reviewing"}
-agent_start  {agent: "critic", role: "content critic"}
-chunk        {agent: "critic", content: "...evaluation...{verdict: revise}"}
-agent_end    {agent: "critic", ...}
-handoff      {from: "critic", to: "generator", reason: "revision needed: ..."}
-agent_start  {agent: "generator", role: "content generator"}
-chunk        {agent: "generator", content: "...revised draft..."}
-agent_end    {agent: "generator", ...}
-handoff      {from: "generator", to: "critic", reason: "iteration 2 — reviewing"}
-agent_start  {agent: "critic", role: "content critic"}
-chunk        {agent: "critic", content: "...evaluation...{verdict: pass}"}
-agent_end    {agent: "critic", ...}
-done         {totalUsage: {...}}`,
   agents: [
     {
       name: "generator",

patterns/debate/README.md

@@ -11,12 +11,11 @@ Two debater agents argue opposing sides of a thesis over multiple rounds, then a
 ## Architecture
 
 ```mermaid
-graph TB
-    Input[Thesis] --> Bull[Bull Debater<br/>argues FOR]
-    Bull -->|round 1| Bear[Bear Debater<br/>argues AGAINST]
+graph LR
+    Input[Thesis] --> Bull[Bull<br/>argues FOR]
+    Bull -->|round 1| Bear[Bear<br/>argues AGAINST]
     Bear -->|round 2| Bull
-    Bull -->|round 2| Bear
-    Bear -->|debate complete| Judge[Judge<br/>evaluates + verdict]
+    Bear -->|debate complete| Judge[Judge<br/>verdict]
     Judge --> Output[Final Verdict]
 ```
 

patterns/reflection/README.md

@@ -11,13 +11,11 @@ A generator agent produces content, a critic agent evaluates it with a structure
 ## Architecture
 
 ```mermaid
-graph TB
-    Input[User Request] --> Gen1[Generator<br/>produces content]
-    Gen1 -->|handoff| Critic1[Critic<br/>evaluates quality]
-    Critic1 -->|verdict: pass| Output[Final Output]
-    Critic1 -->|verdict: revise| Gen2[Generator<br/>revises with feedback]
-    Gen2 -->|handoff| Critic2[Critic<br/>re-evaluates]
-    Critic2 -->|pass or max iterations| Output
+graph LR
+    Input[User Request] --> Generator[Generator]
+    Generator -->|handoff| Critic[Critic]
+    Critic -->|verdict: pass| Output[Final Output]
+    Critic -->|verdict: revise| Generator
 ```
 
 ## How It Works

patterns/reflection/src/reflection-loop.ts

@@ -124,7 +124,7 @@ export class ReflectionLoop {
         type: "handoff",
         from: "critic",
         to: "generator",
-        reason: `iteration ${iteration} — revision needed: ${verdict.feedback}`,
+        reason: `iteration ${iteration} — revision needed: ${verdict.feedback.length > 120 ? verdict.feedback.slice(0, 120) + "…" : verdict.feedback}`,
       });
     }
 

patterns/supervisor/README.md

@@ -11,19 +11,15 @@ A supervisor agent plans subtasks, dispatches them to specialized workers, revie
 ## Architecture
 
 ```mermaid
-graph TB
-    Input[User Input] --> Supervisor[Supervisor Agent<br/>planner + reviewer]
-    Supervisor -->|plan| Plan["Subtask Plan<br/>[search, analysis, summary]"]
-    Plan --> Search[Search Worker<br/>information gatherer]
-    Search -->|output| Review1{Supervisor<br/>Review}
-    Review1 -->|adequate| Analysis[Analysis Worker<br/>analyst]
-    Review1 -->|retry| Search
-    Analysis -->|output| Review2{Supervisor<br/>Review}
-    Review2 -->|adequate| Summary[Summary Worker<br/>summarizer]
-    Review2 -->|retry| Analysis
-    Summary -->|output| Review3{Supervisor<br/>Review}
-    Review3 -->|adequate| Output[Final Output]
-    Review3 -->|retry| Summary
+graph LR
+    Input[User Input] --> Supervisor[Supervisor<br/>planner + reviewer]
+    Supervisor -->|plan| Search[Search]
+    Search -->|review| Supervisor
+    Supervisor -->|plan| Analysis[Analysis]
+    Analysis -->|review| Supervisor
+    Supervisor -->|plan| Summary[Summary]
+    Summary -->|review| Supervisor
+    Supervisor --> Output[Final Output]
 ```
 
 ## How It Works

patterns/swarm/README.md

@@ -11,18 +11,15 @@ Dynamic agent-to-agent handoffs without central routing. Each agent decides inde
 ## Architecture
 
 ```mermaid
-graph TB
-    Input[Customer Query] --> Triage[Triage Agent]
-    Triage -->|direct response| Output[Response]
-    Triage -->|HANDOFF:sales| Sales[Sales Agent]
-    Triage -->|HANDOFF:support| Support[Support Agent]
-    Triage -->|HANDOFF:billing| Billing[Billing Agent]
-    Sales -->|HANDOFF:support| Support
-    Sales -->|HANDOFF:billing| Billing
-    Support -->|HANDOFF:sales| Sales
-    Support -->|HANDOFF:billing| Billing
-    Billing -->|HANDOFF:sales| Sales
-    Billing -->|HANDOFF:support| Support
+graph LR
+    Input[Query] --> Triage[Triage]
+    Triage --> Output[Response]
+    Triage -->|handoff| Sales[Sales]
+    Triage -->|handoff| Support[Support]
+    Triage -->|handoff| Billing[Billing]
+    Sales <-->|handoff| Support
+    Sales <-->|handoff| Billing
+    Support <-->|handoff| Billing
     Sales --> Output
     Support --> Output
     Billing --> Output