AGDebugger

; 5 | }; 6 | 7 | export default EmptyMessageDisplay; 8 | -------------------------------------------------------------------------------- /frontend/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Microsoft Open Source Code of Conduct 2 | 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 4 | 5 | Resources: 6 | 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns 10 | -------------------------------------------------------------------------------- /frontend/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | /* 6 | https://stackoverflow.com/questions/66416614/how-to-create-scrollable-element-in-tailwind-without-a-scrollbar 7 | */ 8 | @layer utilities { 9 | /* Chrome, Safari and Opera */ 10 | .no-scrollbar::-webkit-scrollbar { 11 | display: none; 12 | } 13 | 14 | .no-scrollbar { 15 | -ms-overflow-style: none; /* IE and Edge */ 16 | scrollbar-width: none; /* Firefox */ 17 | } 18 | } -------------------------------------------------------------------------------- /frontend/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | "eslint:recommended", 6 | "plugin:@typescript-eslint/recommended", 7 | "plugin:react-hooks/recommended", 8 | ], 9 | ignorePatterns: ["dist", ".eslintrc.cjs"], 10 | parser: "@typescript-eslint/parser", 11 | plugins: ["react-refresh"], 12 | rules: { 13 | "react-refresh/only-export-components": [ 14 | "warn", 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /DEV.md: -------------------------------------------------------------------------------- 1 | # Development 2 | 3 | ## Backend 4 | 5 | ```sh 6 | # Install editable 7 | pip install -e . 8 | 9 | AGDEBUGGER_BACKEND_SERVE_UI=FALSE agdebugger scenario:get_agent_team --port 8123 10 | ``` 11 | 12 | ## Frontend 13 | 14 | First time 15 | 16 | ```sh 17 | cd frontend 18 | # Create a .env.development.local file with the required API URL 19 | echo "VITE_AGDEBUGGER_FRONTEND_API_URL=http://localhost:8123/api" > .env.development.local 20 | npm install 21 | ``` 22 | 23 | Later can just launch dev server 24 | 25 | ```sh 26 | cd frontend 27 | npm run dev 28 | ``` 29 | -------------------------------------------------------------------------------- /frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | AGDebugger 11 | 12 | 13 |

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /frontend/src/components/AgentList.tsx: -------------------------------------------------------------------------------- 1 | import type { AgentName } from "../shared-types"; 2 | import AgentCard from "./AgentCard.tsx"; 3 | 4 | interface AgentListProps { 5 | agents: AgentName[]; 6 | } 7 | 8 | const AgentList: React.FC = (props) => { 9 | return ( 10 |

11 |

12 | {props.agents.map((agent) => ( 13 | 14 | ))} 15 |

16 |

17 |

18 | ); 19 | }; 20 | 21 | export default AgentList; 22 | -------------------------------------------------------------------------------- /frontend/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | 4 | import App from "./App.tsx"; 5 | import { AllowActionsProvider } from "./context/AllowActionsContext.tsx"; 6 | import { HoveredMessageProvider } from "./context/HoveredMessageContext.tsx"; 7 | import "./index.css"; 8 | 9 | ReactDOM.createRoot(document.getElementById("root")!).render( 10 | 11 | 12 | 13 | 14 | 15 | 16 | , 17 | ); 18 | -------------------------------------------------------------------------------- /frontend/src/api.ts: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | let url = location.protocol + "//" + location.host + "/api"; 4 | // Check if AGDEBUGGER_FRONTEND_API_URL exists in the environment variables 5 | if (import.meta.env.VITE_AGDEBUGGER_FRONTEND_API_URL) { 6 | url = import.meta.env.VITE_AGDEBUGGER_FRONTEND_API_URL; 7 | } 8 | export const api = axios.create({ 9 | baseURL: url, 10 | }); 11 | 12 | export const step = async (effectFn: () => void) => { 13 | api 14 | .post("/step") 15 | .then((response) => { 16 | console.log("Message processed:", response.data); 17 | effectFn(); 18 | }) 19 | .catch((error) => console.error("Error processing next:", error)); 20 | }; 21 | -------------------------------------------------------------------------------- /frontend/src/utils/default-messages.ts: -------------------------------------------------------------------------------- 1 | const TEXT_MESSAGE = { source: "user", content: "", type: "TextMessage" }; 2 | 3 | export const DEFAULT_MESSAGES: { 4 | [key: string]: unknown; 5 | } = { 6 | GroupChatStart: { 7 | messages: [TEXT_MESSAGE], 8 | type: "GroupChatStart", 9 | }, 10 | GroupChatAgentResponse: { 11 | agent_response: { 12 | chat_message: TEXT_MESSAGE, 13 | }, 14 | type: "GroupChatAgentResponse", 15 | }, 16 | GroupChatMessage: { 17 | message: TEXT_MESSAGE, 18 | type: "GroupChatMessage", 19 | }, 20 | GroupChatTermination: { 21 | message: { type: "StopMessage", content: "", source: "user" }, 22 | type: "GroupChatTermination", 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /frontend/src/components/viz/viz-utils.ts: -------------------------------------------------------------------------------- 1 | import type { Message } from "../../shared-types"; 2 | 3 | export const getMessageField = ( 4 | message: Message, 5 | field: "type" | "sender" | "recipient", 6 | ): string | null => { 7 | if (field === "type") { 8 | // @ts-expect-error might have type 9 | const type = message.message.type; 10 | if (type === undefined) { 11 | return "Thought"; 12 | } 13 | return type; 14 | } 15 | return message[field]; 16 | }; 17 | 18 | // colors 19 | // schemeTableau10 without orange 20 | export const COLOR_RANGE = [ 21 | "#4e79a7", 22 | "#e15759", 23 | "#76b7b2", 24 | "#59a14f", 25 | "#edc949", 26 | "#af7aa1", 27 | "#ff9da7", 28 | "#9c755f", 29 | ]; 30 | -------------------------------------------------------------------------------- /frontend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true, 22 | "noImplicitAny": false 23 | }, 24 | "include": ["src"], 25 | "references": [{ "path": "./tsconfig.node.json" }] 26 | } 27 | -------------------------------------------------------------------------------- /examples/magentic-agents/scenario.py: -------------------------------------------------------------------------------- 1 | import asyncio 2 | 3 | from autogen_agentchat.teams import MagenticOneGroupChat 4 | from autogen_agentchat.ui import Console 5 | from autogen_ext.agents.web_surfer import MultimodalWebSurfer 6 | from autogen_ext.models.openai import OpenAIChatCompletionClient 7 | 8 | 9 | async def get_agent_team(): 10 | model_client = OpenAIChatCompletionClient(model="gpt-4o") 11 | 12 | surfer = MultimodalWebSurfer( 13 | "WebSurfer", 14 | model_client=model_client, 15 | ) 16 | team = MagenticOneGroupChat([surfer], model_client=model_client) 17 | 18 | return team 19 | 20 | 21 | async def main() -> None: 22 | team = await get_agent_team() 23 | 24 | await Console(team.run_stream(task="What is the weather in Seattle?")) 25 | 26 | 27 | if __name__ == "__main__": 28 | asyncio.run(main()) 29 | -------------------------------------------------------------------------------- /examples/local-agents/scenario.py: -------------------------------------------------------------------------------- 1 | import asyncio 2 | 3 | from autogen_agentchat.conditions import MaxMessageTermination 4 | from autogen_agentchat.teams import RoundRobinGroupChat 5 | from autogen_ext.models.openai import OpenAIChatCompletionClient 6 | from local_agent import LocalAgent 7 | 8 | 9 | async def get_agent_team(): 10 | model_client = OpenAIChatCompletionClient(model="gpt-4o") 11 | 12 | agent1 = LocalAgent("LOCAL_AGENT_1", model_client=model_client) 13 | agent2 = LocalAgent("LOCAL_AGENT_2", model_client=model_client) 14 | termination = MaxMessageTermination(10) 15 | team = RoundRobinGroupChat([agent1, agent2], termination_condition=termination) 16 | 17 | return team 18 | 19 | 20 | async def main() -> None: 21 | team = await get_agent_team() 22 | 23 | result = await team.run(task="0") 24 | print("\n\nFINAL RESULT", result) 25 | 26 | 27 | if __name__ == "__main__": 28 | asyncio.run(main()) 29 | -------------------------------------------------------------------------------- /frontend/src/components/viz/ScoreTooltip.tsx: -------------------------------------------------------------------------------- 1 | import type { ScoreResult } from "../../shared-types"; 2 | 3 | interface MessageTooltipProps { 4 | scoreResult?: ScoreResult; 5 | } 6 | 7 | const renderScoreTooltipContent = (scoreResult?: ScoreResult) => { 8 | if (scoreResult == undefined) { 9 | return "No score for this session. Try running score function"; 10 | } 11 | 12 | const header = scoreResult.passed ? "Session passing!" : "Session failing!"; 13 | 14 | return ( 15 |

16 |

{header}

17 |

Expected: {scoreResult.expected}

18 |

Actual: {scoreResult.actual}

19 |

20 | ); 21 | }; 22 | const ScoreTooltip: React.FC = ({ scoreResult }) => { 23 | return ( 24 |

25 | {renderScoreTooltipContent(scoreResult)} 26 |

27 | ); 28 | }; 29 | 30 | export default ScoreTooltip; 31 | -------------------------------------------------------------------------------- /frontend/src/components/LogList.tsx: -------------------------------------------------------------------------------- 1 | import { AngleRight, AngleDown } from "flowbite-react-icons/outline"; 2 | import { useState } from "react"; 3 | 4 | import type { LogMessage } from "../shared-types"; 5 | import LogDisplay from "./LogDisplay"; 6 | 7 | interface LogListProps { 8 | logs: LogMessage[]; 9 | } 10 | 11 | const LogList: React.FC = ({ logs }) => { 12 | const [show, setShow] = useState(false); 13 | 14 | return ( 15 |

16 | 26 | 27 | {show && logs.map((log, index) => )} 28 |

29 | ); 30 | }; 31 | 32 | export default LogList; 33 | -------------------------------------------------------------------------------- /frontend/src/components/viz/MessageTooltip.tsx: -------------------------------------------------------------------------------- 1 | import type { Message } from "../../shared-types"; 2 | 3 | interface MessageTooltipProps { 4 | message: Message; 5 | } 6 | 7 | function getRecipient(message: Message): string { 8 | // @ts-expect-error might have type 9 | if (message.message?.type == undefined) return ""; 10 | 11 | const recep = message.recipient ?? "Group"; 12 | 13 | return " → " + recep; 14 | } 15 | 16 | const MessageTooltip: React.FC = ({ message }) => { 17 | return ( 18 |

19 |

20 | Timestamp {message.timestamp} 21 |

22 |

23 | {message.sender ?? "User"} 24 | {getRecipient(message)} 25 |

26 | {/* @ts-expect-error might have type */} 27 |

{message?.message?.type}

28 |

29 | ); 30 | }; 31 | 32 | export default MessageTooltip; 33 | -------------------------------------------------------------------------------- /frontend/src/context/AllowActionsContext.tsx: -------------------------------------------------------------------------------- 1 | import { createContext, useState, useContext, ReactNode } from "react"; 2 | 3 | interface AllowActionsContextType { 4 | allowActions: boolean; 5 | setAllowActions: (flag: boolean) => void; 6 | } 7 | 8 | const AllowActionsContext = createContext( 9 | undefined, 10 | ); 11 | 12 | interface ProviderProps { 13 | children: ReactNode; 14 | } 15 | 16 | export const AllowActionsProvider: React.FC = ({ children }) => { 17 | const [allowActions, setAllowActions] = useState(true); 18 | 19 | return ( 20 | 21 | {children} 22 | 23 | ); 24 | }; 25 | 26 | // Custom hook to use the context 27 | export const useAllowActions = (): AllowActionsContextType => { 28 | const context = useContext(AllowActionsContext); 29 | if (context === undefined) { 30 | throw new Error( 31 | "useAllowActions must be used within a AllowActionsProvider", 32 | ); 33 | } 34 | return context; 35 | }; 36 | -------------------------------------------------------------------------------- /frontend/src/components/LogDisplay.tsx: -------------------------------------------------------------------------------- 1 | import type { LogMessage } from "../shared-types"; 2 | 3 | interface LogDisplayProps { 4 | log: LogMessage; 5 | } 6 | 7 | function getLogColor(level: string): string { 8 | if (level === "INFO") { 9 | return "text-stone-500"; 10 | } 11 | if (level === "DEBUG") { 12 | return "text-indigo-500"; 13 | } 14 | if (level === "ERROR") { 15 | return "text-red-500"; 16 | } 17 | 18 | return "text-black"; 19 | } 20 | 21 | const LogDisplay: React.FC = ({ log }) => { 22 | const toggled = true; 23 | 24 | return ( 25 |

28 |

29 | 30 | {log.level}:{" "} 31 | 32 | {String(log.message).substring(0, 200)} 33 | {String(log.message).length > 200 ? "..." : ""} 34 |

35 |

36 | ); 37 | }; 38 | 39 | export default LogDisplay; 40 | -------------------------------------------------------------------------------- /src/agdebugger/intervention_utils.py: -------------------------------------------------------------------------------- 1 | import pickle 2 | 3 | import aiofiles 4 | from autogen_core import SingleThreadedAgentRuntime 5 | 6 | from .intervention import AgDebuggerInterventionHandler 7 | 8 | #### utils for running intervention handler from python script 9 | STATE_CACHE = {} 10 | 11 | 12 | async def save_agent_state_to_cache(runtime: SingleThreadedAgentRuntime, timestep: int) -> None: 13 | checkpoint = await runtime.save_state() 14 | STATE_CACHE[timestep] = checkpoint 15 | 16 | 17 | async def write_cache_and_history(ihandler: AgDebuggerInterventionHandler) -> None: 18 | # run_id = int(time.time()) 19 | run_id = "" 20 | 21 | hist_path = f"history{run_id}.pickle" 22 | cache_path = f"cache{run_id}.pickle" 23 | 24 | await write_file_async(hist_path, ihandler.history) 25 | await write_file_async(cache_path, STATE_CACHE) 26 | 27 | print("Saved AgDebugger cache files to: ", [hist_path, cache_path]) 28 | 29 | 30 | async def write_file_async(path, data): 31 | async with aiofiles.open(path, "wb") as f: 32 | buffer = pickle.dumps(data) 33 | await f.write(buffer) 34 | -------------------------------------------------------------------------------- /frontend/tailwind.config.js: -------------------------------------------------------------------------------- 1 | import flowbite from "flowbite-react/tailwind"; 2 | 3 | /** @type {import('tailwindcss').Config} */ 4 | export default { 5 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", flowbite.content()], 6 | theme: { 7 | extend: { 8 | colors: { 9 | // cyan from https://flowbite-svelte.com/docs/pages/colors 10 | primary: { 11 | 50: "#ecfeff", 12 | 100: "#cffafe", 13 | 200: "#a5f3fc", 14 | 300: "#67e8f9", 15 | 400: "#22d3ee", 16 | 500: "#06b6d4", 17 | 600: "#0891b2", 18 | 700: "#0e7490", 19 | 800: "#155e75", 20 | 900: "#164e63", 21 | }, 22 | // slate 23 | secondary: { 24 | 50: "#f8fafc", 25 | 100: "#f1f5f9", 26 | 200: "#e2e8f0", 27 | 300: "#cbd5e1", 28 | 400: "#94a3b8", 29 | 500: "#64748b", 30 | 600: "#475569", 31 | 700: "#334155", 32 | 800: "#1e293b", 33 | 900: "#0f172a", 34 | }, 35 | }, 36 | }, 37 | }, 38 | plugins: [flowbite.plugin()], 39 | }; 40 | -------------------------------------------------------------------------------- /frontend/src/components/MessageDisplays/DefaultMessageDisplay.tsx: -------------------------------------------------------------------------------- 1 | import GrowTextarea from "../common/GrowTextarea"; 2 | import type { MessageDisplayProps } from "./MessageDisplayProps"; 3 | 4 | const DefaultMessageDisplay: React.FC = ({ 5 | messageDict, 6 | allowEdit = false, 7 | setMessage, 8 | }) => { 9 | function getValue(message): string { 10 | return JSON.stringify(message, null, 2); 11 | } 12 | 13 | function handleEdit(newValue: string) { 14 | const newMessage = JSON.parse(newValue); 15 | setMessage(newMessage); 16 | } 17 | 18 | return ( 19 |

20 | {allowEdit ? ( 21 | { 23 | handleEdit(e.target.value); 24 | }} 25 | value={getValue(messageDict)} 26 | className="border-white bg-white font-mono hover:bg-gray-50 focus:bg-gray-50" 27 | /> 28 | ) : ( 29 |

30 |

31 |             {getValue(messageDict)}
32 |

33 |

34 | )} 35 |

36 | ); 37 | }; 38 | 39 | export default DefaultMessageDisplay; 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Microsoft Corporation. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE 22 | -------------------------------------------------------------------------------- /frontend/src/components/MessageDisplays/DisplayMessage.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import DefaultMessageDisplay from "./DefaultMessageDisplay"; 4 | import EmptyMessageDisplay from "./EmptyMessageDisplay"; 5 | import GroupChatDisplay from "./GroupChatDisplay"; 6 | import type { MessageDisplayProps } from "./MessageDisplayProps"; 7 | 8 | const MESSAGE_DISPLAYS: { [key: string]: React.FC } = { 9 | default: DefaultMessageDisplay, 10 | None: EmptyMessageDisplay, 11 | RequestReplyMessage: EmptyMessageDisplay, 12 | ResetMessage: EmptyMessageDisplay, 13 | GroupChatRequestPublish: EmptyMessageDisplay, 14 | GroupChatReset: EmptyMessageDisplay, 15 | GroupChatStart: GroupChatDisplay, 16 | GroupChatMessage: GroupChatDisplay, 17 | GroupChatAgentResponse: GroupChatDisplay, 18 | GroupChatTermination: GroupChatDisplay, 19 | }; 20 | 21 | const DisplayMessage: React.FC = (props) => { 22 | const ComponentToRender = 23 | props.type != undefined ? MESSAGE_DISPLAYS[props.type] : undefined; 24 | 25 | if (!ComponentToRender) { 26 | return React.createElement(MESSAGE_DISPLAYS["default"], props); 27 | } 28 | 29 | return React.createElement(ComponentToRender, props); 30 | }; 31 | 32 | export default DisplayMessage; 33 | -------------------------------------------------------------------------------- /SUPPORT.md: -------------------------------------------------------------------------------- 1 | # TODO: The maintainer of this repo has not yet edited this file 2 | 3 | **REPO OWNER**: Do you want Customer Service & Support (CSS) support for this product/project? 4 | 5 | - **No CSS support:** Fill out this template with information about how to file issues and get help. 6 | - **Yes CSS support:** Fill out an intake form at [aka.ms/onboardsupport](https://aka.ms/onboardsupport). CSS will work with/help you to determine next steps. 7 | - **Not sure?** Fill out an intake as though the answer were "Yes". CSS will help you decide. 8 | 9 | *Then remove this first heading from this SUPPORT.MD file before publishing your repo.* 10 | 11 | # Support 12 | 13 | ## How to file issues and get help 14 | 15 | This project uses GitHub Issues to track bugs and feature requests. Please search the existing 16 | issues before filing new issues to avoid duplicates. For new issues, file your bug or 17 | feature request as a new Issue. 18 | 19 | For help and questions about using this project, please **REPO MAINTAINER: INSERT INSTRUCTIONS HERE 20 | FOR HOW TO ENGAGE REPO OWNERS OR COMMUNITY FOR HELP. COULD BE A STACK OVERFLOW TAG OR OTHER 21 | CHANNEL. WHERE WILL YOU HELP PEOPLE?**. 22 | 23 | ## Microsoft Support Policy 24 | 25 | Support for this **PROJECT or PRODUCT** is limited to the resources listed above. 26 | -------------------------------------------------------------------------------- /frontend/src/context/HoveredMessageContext.tsx: -------------------------------------------------------------------------------- 1 | import { createContext, useState, useContext, ReactNode } from "react"; 2 | 3 | // Define the shape of the context state 4 | interface HoveredMessageContextType { 5 | hoveredMessageId: number | undefined; 6 | setHoveredMessageId: (id: number | undefined) => void; 7 | } 8 | 9 | // Create the context with a default value 10 | const HoveredMessageContext = createContext< 11 | HoveredMessageContextType | undefined 12 | >(undefined); 13 | 14 | // Create a provider component 15 | interface HoveredMessageProviderProps { 16 | children: ReactNode; 17 | } 18 | 19 | export const HoveredMessageProvider: React.FC = ({ 20 | children, 21 | }) => { 22 | const [hoveredMessageId, setHoveredMessageId] = useState( 23 | undefined, 24 | ); 25 | 26 | return ( 27 | 30 | {children} 31 | 32 | ); 33 | }; 34 | 35 | // Custom hook to use the context 36 | export const useHoveredMessage = (): HoveredMessageContextType => { 37 | const context = useContext(HoveredMessageContext); 38 | if (context === undefined) { 39 | throw new Error( 40 | "useHoveredMessage must be used within a HoveredMessageProvider", 41 | ); 42 | } 43 | return context; 44 | }; 45 | -------------------------------------------------------------------------------- /frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "agdebugger-frontend", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@column-resizer/react": "^1.3.0", 14 | "@tippyjs/react": "^4.2.6", 15 | "axios": "^1.7.2", 16 | "d3": "^7.9.0", 17 | "flowbite-react": "^0.9.0", 18 | "flowbite-react-icons": "^1.0.7", 19 | "lodash": "^4.17.21", 20 | "react": "^18.2.0", 21 | "react-dom": "^18.2.0", 22 | "react-force-graph": "^1.44.4" 23 | }, 24 | "devDependencies": { 25 | "@trivago/prettier-plugin-sort-imports": "^4.3.0", 26 | "@types/d3": "^7.4.3", 27 | "@types/react": "^18.2.66", 28 | "@types/react-dom": "^18.2.22", 29 | "@types/react-modal": "^3.16.3", 30 | "@typescript-eslint/eslint-plugin": "^7.2.0", 31 | "@typescript-eslint/parser": "^7.2.0", 32 | "@vitejs/plugin-react-swc": "^3.5.0", 33 | "autoprefixer": "^10.4.19", 34 | "eslint": "^8.57.0", 35 | "eslint-plugin-react-hooks": "^4.6.0", 36 | "eslint-plugin-react-refresh": "^0.4.6", 37 | "postcss": "^8.4.38", 38 | "prettier": "^3.3.2", 39 | "tailwindcss": "^3.4.3", 40 | "typescript": "^5.2.2", 41 | "vite": "^5.2.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/agdebugger/scoring.py: -------------------------------------------------------------------------------- 1 | """Similar to agbench tabulate utils for checking task completion of current session""" 2 | 3 | from typing import Callable, List 4 | 5 | from .types import ContentMessage, ScoreResult, TimeStampedMessage 6 | from .utils import parse_message_content 7 | 8 | 9 | def human_eval_scorer(messages: List[ContentMessage]) -> ScoreResult: 10 | for m in messages: 11 | if "ALL TESTS PASSED !#!#" in m.content: 12 | return ScoreResult( 13 | passed=True, first_timestamp=m.timestamp, expected=None, actual=None 14 | ) 15 | return ScoreResult(passed=False, first_timestamp=None, expected=None, actual=None) 16 | 17 | 18 | def run_score_func( 19 | messages: List[TimeStampedMessage], 20 | score_function: Callable[[List[ContentMessage]], ScoreResult] | None = None, 21 | ) -> ScoreResult | None: 22 | """ 23 | Tags each message with profile tags. 24 | 25 | Returns: array of same legnth 26 | """ 27 | if score_function is None: 28 | return None 29 | 30 | content_messages = [] 31 | 32 | for message in messages: 33 | parsed_message = parse_message_content(message.message) 34 | content_messages.append( 35 | ContentMessage(timestamp=message.timestamp, content=parsed_message.content) 36 | ) 37 | 38 | return score_function(content_messages) 39 | 40 | 41 | SCORE_FUNCS = {"human_eval": human_eval_scorer} 42 | -------------------------------------------------------------------------------- /frontend/src/utils/colours.ts: -------------------------------------------------------------------------------- 1 | const COLOURS_MANUAL = [ 2 | "#59AA1E", // green 3 | "#1E59AA", // blue 4 | "#AA1E59", // red 5 | "#fb923c", // orange 6 | "#a78bfa", // violet 7 | ]; 8 | 9 | const getColour = (str: string, colorArray: string[]): string => { 10 | if (str) { 11 | const hashCode = [...str].reduce((acc, char) => { 12 | acc = (acc << 5) - acc + char.charCodeAt(0); 13 | return acc & acc; 14 | }, 0); 15 | 16 | const index = Math.abs(hashCode) % colorArray.length; 17 | return colorArray[index]; 18 | } 19 | 20 | return "#9ca3af"; // Default gray 400 if undefined or empty 21 | }; 22 | 23 | export const stringToColour = (input: unknown): string => { 24 | if (input === undefined || input === null) { 25 | return "#9ca3af"; // Default gray 400 if undefined 26 | } 27 | 28 | const strInput = String(input); 29 | const lower = strInput.toLowerCase(); 30 | 31 | if (lower === "send") { 32 | return "#59AA1E"; 33 | } 34 | if (lower === "response") { 35 | return "#1E59AA"; 36 | } 37 | if (lower === "publish") { 38 | return "#AA1E59"; 39 | } 40 | 41 | return getColour(strInput, COLOURS_MANUAL); 42 | }; 43 | 44 | export const messageTypeFormat = ( 45 | messageName: string | undefined | null, 46 | ): string | undefined | null => { 47 | // map certain message types to a more readable names 48 | 49 | if (messageName === "PublishMessageEnvelope") { 50 | return "Publish"; 51 | } 52 | 53 | if (messageName === "SendMessageEnvelope") { 54 | return "Send"; 55 | } 56 | 57 | if (messageName === "ResponseMessageEnvelope") { 58 | return "Response"; 59 | } 60 | 61 | return messageName; 62 | }; 63 | -------------------------------------------------------------------------------- /frontend/src/components/common/GrowTextarea.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useRef } from "react"; 2 | 3 | interface TextareaProps { 4 | value: string | undefined; 5 | onChange: React.ChangeEventHandler; 6 | placeholder?: string; 7 | className?: string; 8 | } 9 | 10 | const GrowTextarea: React.FC = ({ 11 | value, 12 | onChange, 13 | placeholder = "Enter text", 14 | className, 15 | }) => { 16 | const textareaRef = useRef(null); 17 | const [internalValue, setInternalValue] = useState(value || ""); 18 | 19 | useEffect(() => { 20 | if (value !== internalValue) { 21 | setInternalValue(value || ""); 22 | } 23 | // eslint-disable-next-line react-hooks/exhaustive-deps 24 | }, [value]); 25 | 26 | const handleChange = (e: React.ChangeEvent) => { 27 | setInternalValue(e.target.value); 28 | onChange(e); 29 | }; 30 | 31 | useEffect(() => { 32 | if (textareaRef.current) { 33 | textareaRef.current.style.height = "auto"; 34 | textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; 35 | } 36 | }, [internalValue]); 37 | 38 | return ( 39 |

49 |   );
50 | };
51 | 
52 | export default GrowTextarea;
53 |

--------------------------------------------------------------------------------
/frontend/src/components/MessageList.tsx:
--------------------------------------------------------------------------------
 1 | import { memo } from "react";
 2 | 
 3 | import { api } from "../api";
 4 | import { useAllowActions } from "../context/AllowActionsContext";
 5 | import type { Message, GenericMessage } from "../shared-types";
 6 | import MessageCard from "./MessageCard";
 7 | 
 8 | interface MessageListProps {
 9 |   messageHistory: Message[];
10 | }
11 | 
12 | const MessageList: React.FC<MessageListProps> = memo(({ messageHistory }) => {
13 |   const { setAllowActions } = useAllowActions();
14 | 
15 |   const editHistory = (
16 |     messageId: number,
17 |     newMessage: GenericMessage | undefined,
18 |   ) => {
19 |     // write new message to database
20 | 
21 |     setAllowActions(false);
22 | 
23 |     api
24 |       .post("/editAndRevertHistoryMessage", {
25 |         timestamp: messageId,
26 |         body: newMessage,
27 |       })
28 |       .then((response) => {
29 |         console.log("Edited success:", response.data);
30 |         setAllowActions(true);
31 |       })
32 |       .catch((error) => {
33 |         console.error("Error editing message:", error);
34 |         setAllowActions(true);
35 |       });
36 |   };
37 | 
38 |   return (
39 |     <div className="py-2">
40 |       <div className="mb-2 flex gap-2 items-center">
41 |         <h3 className="text-lg">Message History</h3>
42 |       </div>
43 | 
44 |       <div className="space-y-1">
45 |         {messageHistory.map((message) => (
46 |           <MessageCard
47 |             key={`message.id-${message.timestamp}`}
48 |             editId={message.timestamp}
49 |             timestamp={message.timestamp}
50 |             message={message}
51 |             writeEditAndRevertMessage={editHistory}
52 |             writeMessageTag="Save & revert"
53 |           />
54 |         ))}
55 |       </div>
56 |     </div>
57 |   );
58 | });
59 | 
60 | export default MessageList;
61 |

--------------------------------------------------------------------------------
/frontend/src/components/RunControls.tsx:
--------------------------------------------------------------------------------
 1 | import { Button, Spinner } from "flowbite-react";
 2 | import { ForwardStep, TrashBin } from "flowbite-react-icons/outline";
 3 | import { CaretRight, Stop } from "flowbite-react-icons/solid";
 4 | 
 5 | import { useAllowActions } from "../context/AllowActionsContext";
 6 | 
 7 | interface RunProps {
 8 |   messagesAreHere: boolean;
 9 |   onProcessNext: () => void;
10 |   onDropNext: () => void;
11 |   setLoop: (val: "start" | "stop") => void;
12 |   loopRunning: boolean;
13 | }
14 | 
15 | const RunControls: React.FC<RunProps> = ({
16 |   messagesAreHere,
17 |   onProcessNext,
18 |   onDropNext,
19 |   setLoop,
20 |   loopRunning,
21 | }) => {
22 |   const { allowActions } = useAllowActions();
23 | 
24 |   return (
25 |     <div className="flex items-center justify-end gap-1">
26 |       {!allowActions && <Spinner />}
27 | 
28 |       {loopRunning ? (
29 |         <Button
30 |           onClick={() => setLoop("stop")}
31 |           title="Halt running"
32 |           size="xs"
33 |           color={"failure"}
34 |         >
35 |           <Stop />
36 |         </Button>
37 |       ) : (
38 |         <Button
39 |           onClick={() => setLoop("start")}
40 |           title="Start running"
41 |           size="xs"
42 |           color={"success"}
43 |           disabled={!allowActions}
44 |         >
45 |           <CaretRight />
46 |         </Button>
47 |       )}
48 | 
49 |       <Button
50 |         onClick={onProcessNext}
51 |         title="Process next"
52 |         size="xs"
53 |         color={"green"}
54 |         disabled={!messagesAreHere || !allowActions}
55 |       >
56 |         <ForwardStep />
57 |       </Button>
58 | 
59 |       <Button
60 |         onClick={onDropNext}
61 |         title="Drop next"
62 |         size="xs"
63 |         color={"red"}
64 |         disabled={!messagesAreHere || !allowActions}
65 |       >
66 |         <TrashBin />
67 |       </Button>
68 |     </div>
69 |   );
70 | };
71 | 
72 | export default RunControls;
73 |

--------------------------------------------------------------------------------
/pyproject.toml:
--------------------------------------------------------------------------------
 1 | [build-system]
 2 | requires = ["setuptools>=61.0"]
 3 | build-backend = "setuptools.build_meta"
 4 | 
 5 | [project]
 6 | name = "agdebugger"
 7 | version = "0.0.1"
 8 | requires-python = ">=3.10"
 9 | dependencies = [
10 |     "fastapi",
11 |     "uvicorn",
12 |     "typer",
13 |     "pydantic",
14 |     "aiofiles",
15 |     "openai",
16 |     "autogen-agentchat>=0.4.0",
17 |     "autogen-ext[openai]>=0.4.0",
18 | ]
19 | 
20 | [tool.setuptools]
21 | packages = ["agdebugger", "agdebugger.web"]
22 | package-dir = { "" = "src", "agdebugger.web" = "frontend" }
23 | include-package-data = true
24 | 
25 | [tool.setuptools.package-data]
26 | "agdebugger.web" = ["../../frontend/dist/**"]
27 | 
28 | [project.optional-dependencies]
29 | dev = ["ruff", "pyright", "mypy", "pytest", "pytest-asyncio", "types-Pillow"]
30 | 
31 | [project.scripts]
32 | agdebugger = "agdebugger.cli:main_cli"
33 | 
34 | [tool.ruff]
35 | line-length = 120
36 | fix = true
37 | exclude = ["build", "dist", "my_project/__init__.py", "my_project/main.py"]
38 | target-version = "py310"
39 | include = ["src/**", "examples/**"]
40 | 
41 | [tool.ruff.lint]
42 | select = ["E", "F", "W", "B", "Q", "I"]
43 | ignore = ["F401", "E501"]
44 | 
45 | [tool.mypy]
46 | files = ["src", "examples", "tests"]
47 | 
48 | strict = true
49 | python_version = "3.10"
50 | ignore_missing_imports = true
51 | 
52 | # from https://blog.wolt.com/engineering/2021/09/30/professional-grade-mypy-configuration/
53 | disallow_untyped_defs = true
54 | no_implicit_optional = true
55 | check_untyped_defs = true
56 | warn_return_any = true
57 | show_error_codes = true
58 | warn_unused_ignores = false
59 | 
60 | disallow_incomplete_defs = true
61 | disallow_untyped_decorators = true
62 | disallow_any_unimported = true
63 | 
64 | [tool.pyright]
65 | include = ["src", "examples", "tests"]
66 | typeCheckingMode = "basic"
67 | reportUnnecessaryIsInstance = false
68 | reportMissingTypeStubs = false
69 | reportUnknownVariableType = false
70 | reportMissingParameterType = false
71 | reportUnknownParameterType = false
72 | 
73 | [tool.pytest.ini_options]
74 | minversion = "6.0"
75 | testpaths = ["tests"]
76 |

--------------------------------------------------------------------------------
/src/agdebugger/cli.py:
--------------------------------------------------------------------------------
 1 | import asyncio
 2 | import pickle
 3 | import webbrowser
 4 | 
 5 | import typer
 6 | import uvicorn
 7 | from typing_extensions import Annotated
 8 | 
 9 | from .app import get_server
10 | 
11 | cli_app = typer.Typer()
12 | 
13 | 
14 | @cli_app.command()
15 | def run(
16 |     module: str,
17 |     host: str = "127.0.0.1",
18 |     port: int = 8081,
19 |     workers: int = 1,
20 |     reload: Annotated[bool, typer.Option("--reload")] = False,
21 |     launch: Annotated[bool, typer.Option("--launch")] = False,
22 |     history: str | None = None,
23 |     cache: str | None = None,
24 | ):
25 |     """
26 |     Run the AGEDebugger app.
27 | 
28 |     Args:
29 |         module (str): description of agent app loader
30 |         host (str, optional): Host to run the UI on. Defaults to 127.0.0.1 (localhost).
31 |         port (int, optional): Port to run the UI on. Defaults to 8081.
32 |         workers (int, optional): Number of workers to run the UI with. Defaults to 1.
33 |         reload (bool, optional): Whether to reload the UI on code changes. Defaults to False.
34 |         open (bool, optional): Whether to open the UI in the browser. Defaults to False.
35 |         history (str, optional): Path to a history file to load.
36 |         cache (str, optional): Path to a cache file to load.
37 |         scorer (str, optional): name of score function
38 |     """
39 |     loaded_history = None
40 |     loaded_cache = None
41 |     if history is not None:
42 |         with open(history, "rb") as f:
43 |             loaded_history = pickle.load(f)
44 | 
45 |     if cache is not None:
46 |         with open(cache, "rb") as f:
47 |             loaded_cache = pickle.load(f)
48 | 
49 |     if launch:
50 |         webbrowser.open(f"http://{host}:{port}")
51 | 
52 |     asyncio.run(async_run(module, loaded_history, loaded_cache, host, port, workers, reload))
53 | 
54 | 
55 | async def async_run(module, loaded_history, loaded_cache, host, port, workers, reload):
56 |     server_app = await get_server(module, loaded_history, loaded_cache)
57 | 
58 |     config = uvicorn.Config(
59 |         server_app,
60 |         host=host,
61 |         port=port,
62 |         workers=workers,
63 |         reload=reload,
64 |     )
65 |     server = uvicorn.Server(config)
66 | 
67 |     print("Starting server...")
68 |     await server.serve()
69 | 
70 | 
71 | def main_cli():
72 |     cli_app()
73 |

--------------------------------------------------------------------------------
/frontend/src/shared-types.ts:
--------------------------------------------------------------------------------
  1 | export interface FieldInfo {
  2 |   name: string;
  3 |   type: string;
  4 |   required: boolean;
  5 | }
  6 | 
  7 | export interface MessageTypeDescription {
  8 |   name: string;
  9 |   fields?: FieldInfo[];
 10 | }
 11 | 
 12 | export interface Message {
 13 |   type: string;
 14 |   message: object;
 15 |   recipient: string | null;
 16 |   sender: string | null;
 17 |   drop?: boolean;
 18 |   timestamp: number;
 19 |   id: number; // python object id
 20 | }
 21 | 
 22 | export interface MessageHistoryState {
 23 |   current_session: number;
 24 |   message_history: MessageHistoryMap;
 25 | }
 26 | 
 27 | export interface MessageHistoryMap {
 28 |   [sessionId: number]: MessageHistory;
 29 | }
 30 | 
 31 | export interface ScoreResult {
 32 |   passed: boolean;
 33 |   first_timestamp: number | undefined;
 34 |   expected?: string;
 35 |   actual?: string;
 36 | }
 37 | 
 38 | export interface MessageHistory {
 39 |   messages: Message[];
 40 |   current_session_reset_from?: number;
 41 |   next_session_starts_at?: number;
 42 |   current_session_score?: ScoreResult;
 43 | }
 44 | 
 45 | export interface LogMessage {
 46 |   message: string;
 47 |   level: string;
 48 |   name: string;
 49 |   time: number;
 50 | }
 51 | 
 52 | export type AgentName = string;
 53 | 
 54 | export type GenericMessage = {
 55 |   [key: string]: unknown;
 56 | };
 57 | 
 58 | export interface AnnotationState {
 59 |   name: string;
 60 |   description: string;
 61 |   tags?: string[];
 62 | }
 63 | 
 64 | export interface MessageAnnotation {
 65 |   annotations?: AnnotationState[];
 66 |   timestamp: number;
 67 | }
 68 | 
 69 | export interface ErrorSpan {
 70 |   error: string;
 71 |   start_index: number;
 72 |   end_index: number;
 73 |   quote: string;
 74 |   explanation: string;
 75 | }
 76 | 
 77 | export interface ErrorSummary {
 78 |   summary: string;
 79 |   tags: ErrorSpan[];
 80 | }
 81 | 
 82 | export interface AgentConfig {
 83 |   [key: string]: string;
 84 | }
 85 | 
 86 | export interface TaskInfo {
 87 |   prompt: string;
 88 |   expected_answer: string;
 89 |   annotator_steps: string;
 90 | }
 91 | 
 92 | export interface CurrentStudyTasks {
 93 |   current_task: string;
 94 |   all_tasks: { [key: string]: TaskInfo };
 95 | }
 96 | 
 97 | export type colorOption = "none" | "type" | "sender" | "recipient";
 98 | 
 99 | export type ResetMap = { [key: number]: number };
100 |

--------------------------------------------------------------------------------
/src/agdebugger/log.py:
--------------------------------------------------------------------------------
 1 | import logging
 2 | from typing import List
 3 | 
 4 | from pydantic import BaseModel
 5 | 
 6 | # PORT-TODO -- maybe drop these messages?
 7 | # these are here https://github.com/microsoft/autogen/blob/225eb9d0b205576dba1cfc97856d05ccce5ab71c/python/packages/autogen-magentic-one/src/autogen_magentic_one/messages.py#L43 but not sure now to import?
 8 | # from team_one.messages import OrchestrationEvent, WebSurferEvent
 9 | # from .intervention import AgDebuggerInterventionHandler
10 | # from .types import ThoughtMessage
11 | 
12 | 
13 | class LogMessage(BaseModel):
14 |     message: str
15 |     level: str
16 |     name: str
17 |     time: float
18 | 
19 | 
20 | class ListHandler(logging.Handler):
21 |     def __init__(self) -> None:
22 |         super().__init__()
23 |         self.log_messages: List[LogMessage] = []
24 | 
25 |     def emit(self, record: logging.LogRecord) -> None:
26 |         self.log_messages.append(
27 |             LogMessage(
28 |                 message=str(record.msg),
29 |                 level=record.levelname,
30 |                 name=record.name,
31 |                 time=record.created,
32 |             )
33 |         )
34 | 
35 |     def get_log_messages(self) -> List[LogMessage]:
36 |         return self.log_messages
37 | 
38 | 
39 | # class LogToHistoryHandler(logging.Handler):
40 | #     def __init__(self, i_handler: AgDebuggerInterventionHandler) -> None:
41 | #         super().__init__()
42 | #         self.i_handler = i_handler
43 | 
44 | #     def emit(self, record: logging.LogRecord) -> None:
45 | #         try:
46 | #             if isinstance(record.msg, OrchestrationEvent):
47 | #                 if record.msg.type == "thought":
48 | #                     thought = ThoughtMessage(
49 | #                         content=record.msg.message, senderName=record.msg.source
50 | #                     )
51 | #                     self.i_handler.handle_history_add(thought)
52 | #             if isinstance(record.msg, WebSurferEvent):
53 | #                 header = f"[At URL: {record.msg.url}]\n"
54 | #                 _message = header + record.msg.message
55 | #                 _sender = record.msg.source + " (thought)"
56 | 
57 | #                 thought = ThoughtMessage(content=_message, senderName=_sender)
58 | #                 self.i_handler.handle_history_add(thought)
59 | 
60 | #         except Exception:
61 | #             self.handleError(record)
62 |

--------------------------------------------------------------------------------
/frontend/src/components/MessageQueue.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode, memo } from "react";
 2 | 
 3 | import { api } from "../api";
 4 | import type { Message, GenericMessage } from "../shared-types";
 5 | import MessageCard from "./MessageCard";
 6 | 
 7 | interface MessageQueueProps {
 8 |   messages: Message[];
 9 |   runControls: ReactNode;
10 |   numOutstandingTasks?: number;
11 | }
12 | 
13 | const MessageQueue: React.FC<MessageQueueProps> = memo(
14 |   ({ messages, runControls, numOutstandingTasks }) => {
15 |     const editQueue = (idx: number, newMessage: GenericMessage | undefined) => {
16 |       // edit queue requires non-null content
17 |       api
18 |         .post("/editQueue", {
19 |           idx,
20 |           body: newMessage,
21 |         })
22 |         .then((response) => {
23 |           console.log("Edited success:", response.data);
24 |         })
25 |         .catch((error) => console.error("Error editing message:", error));
26 |     };
27 | 
28 |     const messagesWithIndex = messages.map((message, index) => ({
29 |       message,
30 |       originalIndex: index,
31 |     }));
32 | 
33 |     return (
34 |       <div className="py-2">
35 |         <div className="mb-2 flex gap-2 items-center">
36 |           <div className="flex flex-col">
37 |             <h3 className="text-lg">Message Queue</h3>
38 |             <div className="">
39 |               <span className="font-semibold">{numOutstandingTasks}</span>
40 |               {` task${numOutstandingTasks === 1 ? "" : "s"} running`}
41 |             </div>
42 |           </div>
43 |           <div className="grow" />
44 | 
45 |           {runControls}
46 |         </div>
47 | 
48 |         <div className="space-y-1 max-h-[700px] overflow-y-auto pb-4 border-b-2 border-b-gray-200">
49 |           {messagesWithIndex
50 |             .slice()
51 |             .reverse()
52 |             .map(({ message, originalIndex }) => (
53 |               <MessageCard
54 |                 key={message.id}
55 |                 editId={originalIndex}
56 |                 timestamp={message.timestamp}
57 |                 message={message}
58 |                 writeEditAndRevertMessage={editQueue}
59 |                 writeMessageTag="Save edit"
60 |                 allowRevert={false}
61 |                 shouldBold={originalIndex === 0}
62 |               />
63 |             ))}
64 |         </div>
65 |       </div>
66 |     );
67 |   },
68 | );
69 | 
70 | export default MessageQueue;
71 |

--------------------------------------------------------------------------------
/frontend/src/components/AgentCard.tsx:
--------------------------------------------------------------------------------
 1 | import { Button, Modal } from "flowbite-react";
 2 | import { useEffect, useState } from "react";
 3 | 
 4 | import { api } from "../api";
 5 | import type { AgentName } from "../shared-types";
 6 | 
 7 | interface AgentCardProps {
 8 |   agent: AgentName;
 9 | }
10 | 
11 | const AgentCard: React.FC<AgentCardProps> = ({ agent }) => {
12 |   const [modalIsOpen, setIsOpen] = useState(false);
13 |   const [errorMessage, setErrorMessage] = useState<string>("");
14 |   const [agentState, setAgentState] = useState<object>();
15 | 
16 |   useEffect(() => {
17 |     fetchAgentState();
18 |   }, []);
19 | 
20 |   function openModal() {
21 |     fetchAgentState();
22 |     setIsOpen(true);
23 |   }
24 | 
25 |   function closeModal() {
26 |     setIsOpen(false);
27 |   }
28 | 
29 |   async function fetchAgentState() {
30 |     try {
31 |       await api
32 |         .get(`/state/${agent}/get`)
33 |         .then((response) => {
34 |           if (response.data?.status === "error") {
35 |             setErrorMessage(JSON.stringify(response.data.message));
36 |           } else {
37 |             setErrorMessage("");
38 |             const agentInfo = response.data;
39 | 
40 |             setAgentState(agentInfo["state"]);
41 |           }
42 |         })
43 |         .catch((error) => console.error("Error fetching agents:", error));
44 |     } catch (e) {
45 |       setErrorMessage(String(e));
46 |     }
47 |   }
48 | 
49 |   return (
50 |     <>
51 |       <Button
52 |         className="min-w-[140px] shadow-md border-primary-800 text-primary-800 bg-gray-50"
53 |         color="light"
54 |         onClick={openModal}
55 |         size="sm"
56 |       >
57 |         <h3 className="">{agent}</h3>
58 |       </Button>
59 | 
60 |       <Modal show={modalIsOpen} dismissible size="3xl" onClose={closeModal}>
61 |         <Modal.Header>{agent}</Modal.Header>
62 | 
63 |         <Modal.Body>
64 |           {agentState && (
65 |             <div>
66 |               <div className="text-lg mt-2">Agent State (read-only)</div>
67 |               <pre className="text-sm text-wrap break-all pl-2">
68 |                 {JSON.stringify(agentState, null, 2)}
69 |               </pre>
70 |             </div>
71 |           )}
72 |         </Modal.Body>
73 |         <Modal.Footer>
74 |           {errorMessage && (
75 |             <span className="text-red-500">Error: {errorMessage}</span>
76 |           )}
77 |         </Modal.Footer>
78 |       </Modal>
79 |     </>
80 |   );
81 | };
82 | 
83 | export default AgentCard;
84 |

--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | ## GENERIC IGNORES
  2 | 
  3 | # Byte-compiled / optimized / DLL files
  4 | __pycache__/
  5 | *.py[cod]
  6 | *$py.class
  7 | 
  8 | # C extensions
  9 | *.so
 10 | 
 11 | # Distribution / packaging
 12 | .Python
 13 | build/
 14 | develop-eggs/
 15 | downloads/
 16 | eggs/
 17 | .eggs/
 18 | lib/
 19 | lib64/
 20 | parts/
 21 | var/
 22 | wheels/
 23 | share/python-wheels/
 24 | *.egg-info/
 25 | .installed.cfg
 26 | *.egg
 27 | MANIFEST
 28 | 
 29 | *.manifest
 30 | *.spec
 31 | 
 32 | # Installer logs
 33 | pip-log.txt
 34 | pip-delete-this-directory.txt
 35 | 
 36 | # Unit test / coverage reports
 37 | htmlcov/
 38 | .tox/
 39 | .nox/
 40 | .coverage
 41 | .coverage.*
 42 | .cache
 43 | nosetests.xml
 44 | coverage.xml
 45 | *.cover
 46 | *.py,cover
 47 | .hypothesis/
 48 | .pytest_cache/
 49 | cover/
 50 | 
 51 | # Translations
 52 | *.mo
 53 | *.pot
 54 | 
 55 | # Django stuff:
 56 | *.log
 57 | local_settings.py
 58 | db.sqlite3
 59 | db.sqlite3-journal
 60 | 
 61 | # Flask stuff:
 62 | instance/
 63 | .webassets-cache
 64 | 
 65 | # Scrapy stuff:
 66 | .scrapy
 67 | 
 68 | # Sphinx documentation
 69 | docs/_build/
 70 | 
 71 | # PyBuilder
 72 | .pybuilder/
 73 | target/
 74 | 
 75 | # Jupyter Notebook
 76 | .ipynb_checkpoints
 77 | 
 78 | # IPython
 79 | profile_default/
 80 | ipython_config.py
 81 | 
 82 | .pdm.toml
 83 | 
 84 | __pypackages__/
 85 | 
 86 | # Celery stuff
 87 | celerybeat-schedule
 88 | celerybeat.pid
 89 | 
 90 | # SageMath parsed files
 91 | *.sage.py
 92 | 
 93 | # Environments
 94 | .env
 95 | .venv
 96 | env/
 97 | venv/
 98 | ENV/
 99 | env.bak/
100 | venv.bak/
101 | 
102 | # Spyder project settings
103 | .spyderproject
104 | .spyproject
105 | 
106 | # Rope project settings
107 | .ropeproject
108 | 
109 | # mkdocs documentation
110 | /site
111 | 
112 | # mypy
113 | .mypy_cache/
114 | .dmypy.json
115 | dmypy.json
116 | 
117 | # Pyre type checker
118 | .pyre/
119 | 
120 | # pytype static type analyzer
121 | .pytype/
122 | 
123 | # Cython debug symbols
124 | cython_debug/
125 | 
126 | .ruff_cache/
127 | 
128 | /docs/src/reference
129 | .DS_Store
130 | 
131 | # Generated proto files
132 | src/agnext/worker/protos/agent*
133 | 
134 | # Logs
135 | logs
136 | *.log
137 | npm-debug.log*
138 | yarn-debug.log*
139 | yarn-error.log*
140 | pnpm-debug.log*
141 | lerna-debug.log*
142 | 
143 | node_modules
144 | dist
145 | dist-ssr
146 | *.local
147 | 
148 | # Editor directories and files
149 | .vscode/*
150 | !.vscode/extensions.json
151 | .idea
152 | .DS_Store
153 | *.suo
154 | *.ntvs*
155 | *.njsproj
156 | *.sln
157 | *.sw?
158 | 
159 | .vite
160 | 
161 | ## SPECIFIC IGNORES
162 | 
163 | demo

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # AGDebugger
 2 | 
 3 | AGDebugger is an interactive system to help you debug your agent teams. It offers interactions to:
 4 | 
 5 | 1. Send and step through agent messages
 6 | 2. Edit previously sent agent messages and revert to earlier points in a conversation
 7 | 3. Navigate agent conversations with an interactive visualization
 8 | 
 9 | ![screenshot of AGDebugger interface](.github/screenshots/agdebugger_sc.png)
10 | 
11 | ## Local Install
12 | 
13 | You can install AGDebugger locally by cloning the repo and installing the python package.
14 | 
15 | ```sh
16 | # Install & build frontend
17 | cd frontend
18 | npm install
19 | npm run build
20 | # Install & build agdebugger python package
21 | cd ..
22 | pip install .
23 | ```
24 | 
25 | ## Usage
26 | 
27 | AGDebugger is built on top of [AutoGen](https://microsoft.github.io/autogen/stable/). To use AGDebugger, you provide a python file that exposes a function that creates an [AutoGen AgentChat](https://microsoft.github.io/autogen/stable/user-guide/agentchat-user-guide/index.html) team for debugging. You can then launch AgDebugger with this agent team.
28 | 
29 | For example, the script below creates a simple agent team with a single WebSurfer agent.
30 | 
31 | ```python
32 | # scenario.py
33 | from autogen_agentchat.teams import MagenticOneGroupChat
34 | from autogen_agentchat.ui import Console
35 | from autogen_ext.agents.web_surfer import MultimodalWebSurfer
36 | from autogen_ext.models.openai import OpenAIChatCompletionClient
37 | 
38 | async def get_agent_team():
39 |     model_client = OpenAIChatCompletionClient(model="gpt-4o")
40 | 
41 |     surfer = MultimodalWebSurfer(
42 |         "WebSurfer",
43 |         model_client=model_client,
44 |     )
45 |     team = MagenticOneGroupChat([surfer], model_client=model_client)
46 | 
47 |     return team
48 | ```
49 | 
50 | We can then launch the interface with:
51 | 
52 | ```sh
53 |  agdebugger scenario:get_agent_team
54 | ```
55 | 
56 | Once in the interface, you can send a GroupChatStart message to the start the agent conversation and begin debugging!
57 | 
58 | ## Citation
59 | 
60 | See our [CHI 2025 paper](https://arxiv.org/abs/2503.02068) for more details on the design and evaluation of AGDebugger.
61 | 
62 | ```bibtex
63 | @inproceedings{epperson25agdebugger,
64 |     title={Interactive Debugging and Steering of Multi-Agent AI Systems},
65 |     author={Will Epperson and Gagan Bansal and Victor Dibia and Adam Fourney and Jack Gerrits and Erkang Zhu and Saleema Amershi},
66 |     year={2025},
67 |     publisher = {Association for Computing Machinery},
68 |     booktitle = {Proceedings of the 2025 CHI Conference on Human Factors in Computing Systems},
69 |     series = {CHI '25}
70 | }
71 | ```
72 |

--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | ## Security
 4 | 
 5 | Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet) and [Xamarin](https://github.com/xamarin).
 6 | 
 7 | If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://aka.ms/security.md/definition), please report it to us as described below.
 8 | 
 9 | ## Reporting Security Issues
10 | 
11 | **Please do not report security vulnerabilities through public GitHub issues.**
12 | 
13 | Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://aka.ms/security.md/msrc/create-report).
14 | 
15 | If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com).  If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://aka.ms/security.md/msrc/pgp).
16 | 
17 | You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc). 
18 | 
19 | Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
20 | 
21 |   * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
22 |   * Full paths of source file(s) related to the manifestation of the issue
23 |   * The location of the affected source code (tag/branch/commit or direct URL)
24 |   * Any special configuration required to reproduce the issue
25 |   * Step-by-step instructions to reproduce the issue
26 |   * Proof-of-concept or exploit code (if possible)
27 |   * Impact of the issue, including how an attacker might exploit the issue
28 | 
29 | This information will help us triage your report more quickly.
30 | 
31 | If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://aka.ms/security.md/msrc/bounty) page for more details about our active programs.
32 | 
33 | ## Preferred Languages
34 | 
35 | We prefer all communications to be in English.
36 | 
37 | ## Policy
38 | 
39 | Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://aka.ms/security.md/cvd).
40 | 
41 | 
42 |

--------------------------------------------------------------------------------
/frontend/src/components/MessageDisplays/GroupChatDisplay.tsx:
--------------------------------------------------------------------------------
 1 | import { AngleDown } from "flowbite-react-icons/outline";
 2 | import { useState } from "react";
 3 | 
 4 | import GrowTextarea from "../common/GrowTextarea";
 5 | import type { MessageDisplayProps } from "./MessageDisplayProps";
 6 | 
 7 | const GroupChatAgentDisplay: React.FC<MessageDisplayProps> = ({
 8 |   messageDict,
 9 |   allowEdit = false,
10 |   setMessage,
11 |   type,
12 | }) => {
13 |   const [showDetails, setShowDetails] = useState<boolean>(false);
14 | 
15 |   function getValue(message) {
16 |     if (type === "GroupChatAgentResponse") {
17 |       return message?.agent_response?.chat_message?.content || "";
18 |     }
19 |     if (type === "GroupChatMessage" || type === "GroupChatTermination") {
20 |       return message?.message?.content || "";
21 |     }
22 |     if (type === "GroupChatStart") {
23 |       return message?.messages?.[0]?.content || "";
24 |     }
25 |   }
26 | 
27 |   function setValue(s: string) {
28 |     setMessage((prev) => {
29 |       const updatedMessage = structuredClone(prev);
30 | 
31 |       if (type === "GroupChatAgentResponse") {
32 |         updatedMessage.agent_response.chat_message.content = s;
33 |       } else if (
34 |         type === "GroupChatMessage" ||
35 |         type === "GroupChatTermination"
36 |       ) {
37 |         updatedMessage.message.content = s;
38 |       } else if (type === "GroupChatStart") {
39 |         updatedMessage.messages[0].content = s;
40 |       }
41 | 
42 |       return updatedMessage;
43 |     });
44 |   }
45 | 
46 |   return (
47 |     <div>
48 |       {allowEdit ? (
49 |         <div>
50 |           <GrowTextarea
51 |             onChange={(e) => setValue(e.target.value)}
52 |             value={getValue(messageDict)}
53 |             className="border-white bg-white font-mono hover:bg-gray-50 focus:bg-gray-50"
54 |           />
55 |           <div className="flex justify-end">
56 |             <button
57 |               className="hover:bg-gray-100 rounded p-1 flex items-center text-sm text-gray-400 my-1"
58 |               onClick={(e) => {
59 |                 e.preventDefault();
60 |                 setShowDetails(!showDetails);
61 |               }}
62 |             >
63 |               <AngleDown
64 |                 size={15}
65 |                 className={` ${showDetails ? "" : "-rotate-90"}`}
66 |               />
67 |               <p>Details</p>
68 |             </button>
69 |           </div>
70 |           {showDetails && (
71 |             <div>
72 |               <pre className="font-mono text-sm text-wrap break-all">
73 |                 {JSON.stringify(messageDict, null, 2)}
74 |               </pre>
75 |             </div>
76 |           )}
77 |         </div>
78 |       ) : (
79 |         <div>
80 |           <pre className="font-mono text-sm text-wrap break-all">
81 |             {JSON.stringify(messageDict, null, 2)}
82 |           </pre>
83 |         </div>
84 |       )}
85 |     </div>
86 |   );
87 | };
88 | 
89 | export default GroupChatAgentDisplay;
90 |

--------------------------------------------------------------------------------
/src/agdebugger/utils.py:
--------------------------------------------------------------------------------
  1 | import importlib
  2 | import inspect
  3 | import os
  4 | import sys
  5 | from dataclasses import dataclass
  6 | from typing import Any, Callable, Dict
  7 | 
  8 | from autogen_agentchat.teams import BaseGroupChat
  9 | from autogen_core import Agent, AgentId
 10 | from autogen_core._single_threaded_agent_runtime import (
 11 |     PublishMessageEnvelope,
 12 |     ResponseMessageEnvelope,
 13 |     SendMessageEnvelope,
 14 | )
 15 | 
 16 | from .serialization import serialize
 17 | from .types import AGEPublishMessage, AGEResponseMessage, AGESendMessage, ThoughtMessage
 18 | 
 19 | 
 20 | def agent_to_json(agent_id: AgentId, agent: Agent) -> Dict[str, Any]:
 21 |     return {
 22 |         "id": {
 23 |             "key": agent_id.key,
 24 |             "type": agent_id.type,
 25 |         },
 26 |         "type": type(agent).__name__,
 27 |         # "subscriptions": agent.metadata["subscriptions"],
 28 |     }
 29 | 
 30 | 
 31 | def inner_message_to_json(msg: Any) -> Dict[str, Any]:
 32 |     if msg is None:
 33 |         return {"type": "None"}
 34 | 
 35 |     return serialize(msg)
 36 | 
 37 | 
 38 | def message_to_json(
 39 |     msg: (
 40 |         PublishMessageEnvelope
 41 |         | SendMessageEnvelope
 42 |         | ResponseMessageEnvelope
 43 |         | AGEPublishMessage
 44 |         | AGESendMessage
 45 |         | AGEResponseMessage
 46 |         | ThoughtMessage
 47 |     ),
 48 |     timestamp: int | None = None,
 49 | ) -> Dict[str, Any]:
 50 |     # if not is_dataclass(msg):
 51 |     #     raise ValueError(f"Expected a dataclass, got {type(msg)}")
 52 | 
 53 |     match msg:
 54 |         case PublishMessageEnvelope(message=message, sender=sender) | AGEPublishMessage(
 55 |             message=message, sender=sender
 56 |         ):
 57 |             return {
 58 |                 "message": inner_message_to_json(message),
 59 |                 "sender": str(sender) if sender is not None else None,
 60 |                 "recipient": None,
 61 |                 "type": "PublishMessageEnvelope",
 62 |                 "timestamp": timestamp,
 63 |                 "id": id(message),  # TODO: look into messsage.id
 64 |             }
 65 | 
 66 |         case SendMessageEnvelope(
 67 |             message=message, sender=sender, recipient=recipient
 68 |         ) | AGESendMessage(message=message, sender=sender, recipient=recipient):
 69 |             return {
 70 |                 "message": inner_message_to_json(message),
 71 |                 "sender": sender.type if sender is not None else None,
 72 |                 "recipient": str(recipient),
 73 |                 "type": "SendMessageEnvelope",
 74 |                 "timestamp": timestamp,
 75 |                 "id": id(message),  # TODO: look into messsage.id
 76 |             }
 77 |         case ResponseMessageEnvelope(
 78 |             message=message, sender=sender, recipient=recipient
 79 |         ) | AGEResponseMessage(message=message, sender=sender, recipient=recipient):
 80 |             return {
 81 |                 "message": inner_message_to_json(message),
 82 |                 "sender": str(sender),
 83 |                 "recipient": str(recipient) if recipient is not None else None,
 84 |                 "type": "ResponseMessageEnvelope",
 85 |                 "timestamp": timestamp,
 86 |                 "id": id(message),
 87 |             }
 88 | 
 89 |         case ThoughtMessage(content=content, senderName=senderName):
 90 |             return {
 91 |                 "message": content,
 92 |                 "sender": senderName,
 93 |                 "recipient": None,
 94 |                 "type": "ThoughtMessage",
 95 |                 "timestamp": timestamp,
 96 |                 "id": id(msg),
 97 |             }
 98 | 
 99 | 
100 | @dataclass
101 | class ParsedMessage:
102 |     source_name: str
103 |     recipient_name: str | None
104 |     content: str
105 | 
106 | 
107 | def parse_message_content(
108 |     message: AGEPublishMessage | AGESendMessage | AGEResponseMessage,
109 | ) -> ParsedMessage:
110 |     if message.sender is None:
111 |         source_name = "User"
112 |     else:
113 |         source_name = str(message.sender)
114 | 
115 |     if (
116 |         isinstance(message, (AGESendMessage, AGEResponseMessage))
117 |         and message.recipient is not None
118 |     ):
119 |         recipient_name = str(message.recipient)
120 |     else:
121 |         recipient_name = None
122 | 
123 |     innerMessage = message.message
124 |     if hasattr(innerMessage, "content"):
125 |         content = str(innerMessage.content)
126 |     else:
127 |         content = str(innerMessage)
128 | 
129 |     return ParsedMessage(
130 |         source_name=source_name, recipient_name=recipient_name, content=content
131 |     )
132 | 
133 | 
134 | def load_func_from_path(path_str: str) -> Callable:
135 |     # Include path to current running dir
136 |     sys.path.append(os.getcwd())
137 | 
138 |     # split :
139 |     app = path_str.split(":")
140 |     module = importlib.import_module(app[0], package=None)
141 | 
142 |     # Get app, if it is a var just get it, if it is a func run the func
143 |     if len(app) < 2:
144 |         raise ValueError("load must have :")
145 | 
146 |     app_attr = getattr(module, app[1])
147 |     if not callable(app_attr):
148 |         raise ValueError("App must be a callable function")
149 | 
150 |     return app_attr
151 | 
152 | 
153 | async def load_app(app_expr: str) -> BaseGroupChat:
154 |     app_attr = load_func_from_path(app_expr)
155 | 
156 |     if inspect.iscoroutinefunction(app_attr):
157 |         result = await app_attr()
158 |         return result
159 |     else:
160 |         return app_attr()
161 |

--------------------------------------------------------------------------------
/tests/setup/local_agent.py:
--------------------------------------------------------------------------------
  1 | import logging
  2 | from typing import (
  3 |     Any,
  4 |     AsyncGenerator,
  5 |     List,
  6 |     Mapping,
  7 |     Sequence,
  8 | )
  9 | 
 10 | from autogen_agentchat import EVENT_LOGGER_NAME
 11 | from autogen_agentchat.agents import BaseChatAgent
 12 | from autogen_agentchat.base import Response
 13 | from autogen_agentchat.messages import (
 14 |     AgentEvent,
 15 |     ChatMessage,
 16 |     TextMessage,
 17 | )
 18 | from autogen_agentchat.state import BaseState
 19 | from autogen_core import CancellationToken, Component, ComponentModel
 20 | from autogen_core.memory import Memory
 21 | from autogen_core.models import (
 22 |     AssistantMessage,
 23 |     ChatCompletionClient,
 24 |     FunctionExecutionResultMessage,
 25 |     SystemMessage,
 26 |     UserMessage,
 27 | )
 28 | from pydantic import BaseModel, Field
 29 | from typing_extensions import Self
 30 | 
 31 | event_logger = logging.getLogger(EVENT_LOGGER_NAME)
 32 | 
 33 | 
 34 | class LocalAgentConfig(BaseModel):
 35 |     """The declarative configuration for the assistant agent."""
 36 | 
 37 |     name: str
 38 |     model_client: ComponentModel
 39 |     description: str
 40 |     system_message: str | None = None
 41 | 
 42 | 
 43 | class LocalAgentState(BaseState):
 44 |     """State for an assistant agent."""
 45 | 
 46 |     counter: int
 47 |     type: str = Field(default="LocalAgentState")
 48 | 
 49 | 
 50 | class LocalAgent(BaseChatAgent, Component[LocalAgentConfig]):
 51 |     component_config_schema = LocalAgentConfig
 52 |     component_provider_override = "autogen_agentchat.agents.LocalAgent"
 53 | 
 54 |     def __init__(
 55 |         self,
 56 |         name: str,
 57 |         model_client: ChatCompletionClient,
 58 |         *,
 59 |         description: str = "An agent that provides assistance with ability to use tools.",
 60 |         system_message: (str | None) = "You are a cool local agent",
 61 |         memory: Sequence[Memory] | None = None,
 62 |     ):
 63 |         super().__init__(name=name, description=description)
 64 |         self._model_client = model_client
 65 |         self._memory = None
 66 |         if memory is not None:
 67 |             if isinstance(memory, list):
 68 |                 self._memory = memory
 69 |             else:
 70 |                 raise TypeError(f"Expected Memory, List[Memory], or None, got {type(memory)}")
 71 | 
 72 |         self._system_messages: List[
 73 |             SystemMessage | UserMessage | AssistantMessage | FunctionExecutionResultMessage
 74 |         ] = []
 75 |         if system_message is None:
 76 |             self._system_messages = []
 77 |         else:
 78 |             self._system_messages = [SystemMessage(content=system_message)]
 79 | 
 80 |         self._is_running = False
 81 |         self.counter: int = 0
 82 | 
 83 |     @property
 84 |     def produced_message_types(self) -> Sequence[type[ChatMessage]]:
 85 |         """The types of messages that the assistant agent produces."""
 86 |         message_types: List[type[ChatMessage]] = [TextMessage]
 87 |         return tuple(message_types)
 88 | 
 89 |     async def on_messages(self, messages: Sequence[ChatMessage], cancellation_token: CancellationToken) -> Response:
 90 |         async for message in self.on_messages_stream(messages, cancellation_token):
 91 |             if isinstance(message, Response):
 92 |                 return message
 93 |         raise AssertionError("The stream should have returned the final result.")
 94 | 
 95 |     async def on_messages_stream(
 96 |         self, messages: Sequence[ChatMessage], cancellation_token: CancellationToken
 97 |     ) -> AsyncGenerator[AgentEvent | ChatMessage | Response, None]:
 98 |         print(f"\n[{self.name}] -- received messages: ", messages)
 99 | 
100 |         last_message = messages[0]
101 | 
102 |         if isinstance(last_message, TextMessage):
103 |             last_num = int(last_message.content)
104 |             model_result: str = f"{last_num + 1}"
105 |         else:
106 |             print("[WARN] Local agent got a message that is not a number")
107 |             model_result = "-10000"
108 | 
109 |         self.counter += 1
110 | 
111 |         # usage = RequestUsage(0, 0)
112 | 
113 |         yield Response(
114 |             chat_message=TextMessage(content=model_result, source=self.name),
115 |             inner_messages=[],
116 |         )
117 | 
118 |         return
119 | 
120 |     async def on_reset(self, cancellation_token: CancellationToken) -> None:
121 |         """Reset the assistant agent to its initialization state."""
122 |         self.counter = 0
123 | 
124 |     async def save_state(self) -> Mapping[str, Any]:
125 |         return LocalAgentState(counter=self.counter).model_dump()
126 | 
127 |     async def load_state(self, state: Mapping[str, Any]) -> None:
128 |         """Load the state of the assistant agent"""
129 |         assistant_agent_state = LocalAgentState.model_validate(state)
130 |         # Load the model context state.
131 |         self.counter = assistant_agent_state.counter
132 | 
133 |     def _to_config(self) -> LocalAgentConfig:
134 |         """Convert the assistant agent to a declarative config."""
135 | 
136 |         return LocalAgentConfig(
137 |             name=self.name,
138 |             model_client=self._model_client.dump_component(),
139 |             description=self.description,
140 |             system_message=self._system_messages[0].content
141 |             if self._system_messages and isinstance(self._system_messages[0].content, str)
142 |             else None,
143 |         )
144 | 
145 |     @classmethod
146 |     def _from_config(cls, config: LocalAgentConfig) -> Self:
147 |         """Create an assistant agent from a declarative config."""
148 |         return cls(
149 |             name=config.name,
150 |             model_client=ChatCompletionClient.load_component(config.model_client),
151 |             description=config.description,
152 |             system_message=config.system_message,
153 |         )
154 |

--------------------------------------------------------------------------------
/examples/local-agents/local_agent.py:
--------------------------------------------------------------------------------
  1 | """
  2 | LocalAgent is a simple local agent that does not use LLMs for testing AGDebugger locally.
  3 | It expects messages to be a number and returns the number + 1.
  4 | """
  5 | 
  6 | import logging
  7 | from typing import (
  8 |     Any,
  9 |     AsyncGenerator,
 10 |     List,
 11 |     Mapping,
 12 |     Sequence,
 13 | )
 14 | 
 15 | from autogen_agentchat import EVENT_LOGGER_NAME
 16 | from autogen_agentchat.agents import BaseChatAgent
 17 | from autogen_agentchat.base import Response
 18 | from autogen_agentchat.messages import (
 19 |     AgentEvent,
 20 |     ChatMessage,
 21 |     TextMessage,
 22 | )
 23 | from autogen_agentchat.state import BaseState
 24 | from autogen_core import CancellationToken, Component, ComponentModel
 25 | from autogen_core.memory import Memory
 26 | from autogen_core.models import (
 27 |     AssistantMessage,
 28 |     ChatCompletionClient,
 29 |     FunctionExecutionResultMessage,
 30 |     SystemMessage,
 31 |     UserMessage,
 32 | )
 33 | from pydantic import BaseModel, Field
 34 | from typing_extensions import Self
 35 | 
 36 | event_logger = logging.getLogger(EVENT_LOGGER_NAME)
 37 | 
 38 | 
 39 | class LocalAgentConfig(BaseModel):
 40 |     name: str
 41 |     model_client: ComponentModel
 42 |     description: str
 43 |     system_message: str | None = None
 44 | 
 45 | 
 46 | class LocalAgentState(BaseState):
 47 |     counter: int
 48 |     type: str = Field(default="LocalAgentState")
 49 | 
 50 | 
 51 | class LocalAgent(BaseChatAgent, Component[LocalAgentConfig]):
 52 |     component_config_schema = LocalAgentConfig
 53 |     component_provider_override = "autogen_agentchat.agents.LocalAgent"
 54 | 
 55 |     def __init__(
 56 |         self,
 57 |         name: str,
 58 |         model_client: ChatCompletionClient,
 59 |         *,
 60 |         description: str = "An agent that provides assistance with ability to use tools.",
 61 |         system_message: (str | None) = "You are a cool local agent",
 62 |         memory: Sequence[Memory] | None = None,
 63 |     ):
 64 |         super().__init__(name=name, description=description)
 65 |         self._model_client = model_client
 66 |         self._memory = None
 67 |         if memory is not None:
 68 |             if isinstance(memory, list):
 69 |                 self._memory = memory
 70 |             else:
 71 |                 raise TypeError(f"Expected Memory, List[Memory], or None, got {type(memory)}")
 72 | 
 73 |         self._system_messages: List[
 74 |             SystemMessage | UserMessage | AssistantMessage | FunctionExecutionResultMessage
 75 |         ] = []
 76 |         if system_message is None:
 77 |             self._system_messages = []
 78 |         else:
 79 |             self._system_messages = [SystemMessage(content=system_message)]
 80 | 
 81 |         self._is_running = False
 82 |         self.counter: int = 0
 83 | 
 84 |     @property
 85 |     def produced_message_types(self) -> Sequence[type[ChatMessage]]:
 86 |         """The types of messages that the assistant agent produces."""
 87 |         message_types: List[type[ChatMessage]] = [TextMessage]
 88 |         return tuple(message_types)
 89 | 
 90 |     async def on_messages(self, messages: Sequence[ChatMessage], cancellation_token: CancellationToken) -> Response:
 91 |         async for message in self.on_messages_stream(messages, cancellation_token):
 92 |             if isinstance(message, Response):
 93 |                 return message
 94 |         raise AssertionError("The stream should have returned the final result.")
 95 | 
 96 |     async def on_messages_stream(
 97 |         self, messages: Sequence[ChatMessage], cancellation_token: CancellationToken
 98 |     ) -> AsyncGenerator[AgentEvent | ChatMessage | Response, None]:
 99 |         print(f"\n[{self.name}] -- received messages: ", messages)
100 | 
101 |         last_message = messages[0]
102 | 
103 |         if isinstance(last_message, TextMessage):
104 |             last_num = int(last_message.content)
105 |             model_result: str = f"{last_num + 1}"
106 |         else:
107 |             print("[WARN] Local agent got a message that is not a number")
108 |             model_result = "-10000"
109 | 
110 |         self.counter += 1
111 | 
112 |         # usage = RequestUsage(0, 0)
113 | 
114 |         yield Response(
115 |             chat_message=TextMessage(content=model_result, source=self.name),
116 |             inner_messages=[],
117 |         )
118 | 
119 |         return
120 | 
121 |     async def on_reset(self, cancellation_token: CancellationToken) -> None:
122 |         """Reset the assistant agent to its initialization state."""
123 |         self.counter = 0
124 | 
125 |     async def save_state(self) -> Mapping[str, Any]:
126 |         return LocalAgentState(counter=self.counter).model_dump()
127 | 
128 |     async def load_state(self, state: Mapping[str, Any]) -> None:
129 |         """Load the state of the assistant agent"""
130 |         assistant_agent_state = LocalAgentState.model_validate(state)
131 |         # Load the model context state.
132 |         self.counter = assistant_agent_state.counter
133 | 
134 |     def _to_config(self) -> LocalAgentConfig:
135 |         """Convert the assistant agent to a declarative config."""
136 | 
137 |         return LocalAgentConfig(
138 |             name=self.name,
139 |             model_client=self._model_client.dump_component(),
140 |             description=self.description,
141 |             system_message=self._system_messages[0].content
142 |             if self._system_messages and isinstance(self._system_messages[0].content, str)
143 |             else None,
144 |         )
145 | 
146 |     @classmethod
147 |     def _from_config(cls, config: LocalAgentConfig) -> Self:
148 |         """Create an assistant agent from a declarative config."""
149 |         return cls(
150 |             name=config.name,
151 |             model_client=ChatCompletionClient.load_component(config.model_client),
152 |             description=config.description,
153 |             system_message=config.system_message,
154 |         )
155 |

--------------------------------------------------------------------------------
/src/agdebugger/app.py:
--------------------------------------------------------------------------------
  1 | import logging
  2 | import os
  3 | from typing import List
  4 | 
  5 | from autogen_core import EVENT_LOGGER_NAME
  6 | from fastapi import FastAPI
  7 | from fastapi.middleware.cors import CORSMiddleware
  8 | from fastapi.staticfiles import StaticFiles
  9 | 
 10 | from .backend import BackendRuntimeManager
 11 | from .intervention_utils import write_file_async
 12 | from .serialization import deserialize
 13 | from .types import (
 14 |     EditHistoryMessage,
 15 |     EditQueueMessage,
 16 |     PublishMessage,
 17 |     SendMessage,
 18 | )
 19 | from .utils import load_app, message_to_json
 20 | 
 21 | # alt would be TRACE_LOGGER_NAME
 22 | logger = logging.getLogger(EVENT_LOGGER_NAME)
 23 | logger.setLevel(logging.DEBUG)
 24 | 
 25 | 
 26 | async def get_server(module_str: str, message_history=None, state_cache=None) -> FastAPI:
 27 |     origins = [
 28 |         "http://localhost",
 29 |         "http://localhost:5173",
 30 |         "http://localhost:*",
 31 |     ]
 32 |     app = FastAPI()
 33 |     app.add_middleware(
 34 |         CORSMiddleware,
 35 |         allow_origins=origins,
 36 |         allow_credentials=True,
 37 |         allow_methods=["*"],
 38 |         allow_headers=["*"],
 39 |     )
 40 |     api = FastAPI(root_path="/api")
 41 |     app.mount("/api", api)
 42 |     ui_folder_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "web/dist")
 43 |     if os.environ.get("AGDEBUGGER_BACKEND_SERVE_UI", "TRUE") == "TRUE":
 44 |         app.mount("/", StaticFiles(directory=ui_folder_path, html=True), name="ui")
 45 | 
 46 |     # load app and make backend
 47 |     loaded_gc = await load_app(module_str)
 48 |     backend = BackendRuntimeManager(loaded_gc, logger, message_history, state_cache)
 49 |     await backend.async_initialize()
 50 | 
 51 |     @api.get("/agents")
 52 |     async def get_agent_list() -> List[str]:
 53 |         if not backend.ready:
 54 |             print("Agents not ready yet...")
 55 |             return []
 56 |         return backend.agent_names
 57 | 
 58 |     @api.get("/getMessageQueue")
 59 |     async def get_messages():
 60 |         message_queue = [message_to_json(msg) for msg in backend.message_queue_list]
 61 |         return message_queue
 62 | 
 63 |     @api.get("/getSessionHistory")
 64 |     async def getSessionHistory():
 65 |         saved_sessions = backend.read_current_session_history()
 66 | 
 67 |         return {
 68 |             "current_session": backend.session_counter,
 69 |             "message_history": saved_sessions,
 70 |         }
 71 | 
 72 |     @api.get("/num_tasks")
 73 |     async def get_outstanding_tasks() -> int:
 74 |         return backend.unprocessed_messages_count
 75 | 
 76 |     @api.post("/drop")
 77 |     async def drop():
 78 |         if backend.unprocessed_messages_count == 0:
 79 |             return {"status": "ok"}
 80 | 
 81 |         backend.intervention_handler.drop = True
 82 |         await backend.process_next()
 83 |         return {"status": "ok"}
 84 | 
 85 |     @api.post("/step")
 86 |     async def step():
 87 |         if backend.unprocessed_messages_count == 0:
 88 |             return {"status": "ok"}
 89 |         await backend.process_next()
 90 |         return {"status": "ok"}
 91 | 
 92 |     @api.post("/start_loop")
 93 |     async def start_loop():
 94 |         backend.start_processing()
 95 |         return {"status": "ok"}
 96 | 
 97 |     @api.post("/stop_loop")
 98 |     async def stop_loop():
 99 |         await backend.stop_processing()
100 |         return {"status": "ok"}
101 | 
102 |     @api.get("/loop_status")
103 |     async def loop_status() -> bool:
104 |         return backend.is_processing
105 | 
106 |     @api.get("/message_types")
107 |     async def message_types():
108 |         return backend.message_info
109 | 
110 |     @api.get("/topics")
111 |     async def topics() -> List[str]:
112 |         return backend.all_topics
113 | 
114 |     @api.get("/state/{name}/get")
115 |     async def get_config(name: str):
116 |         try:
117 |             config = await backend.get_agent_config(name)
118 |             return config
119 |         except Exception as e:
120 |             print("Error getting state: ", e)
121 |             return {"status": "error", "message": str(e)}
122 | 
123 |     @api.post("/publish")
124 |     async def publish_message(message: PublishMessage):
125 |         if message.body is None:
126 |             return {"status": "error", "message": "Message body cannot be None"}
127 | 
128 |         new_message = deserialize(message.body)
129 |         backend.publish_message(new_message, message.topic)
130 |         return {"status": "ok"}
131 | 
132 |     @api.post("/send")
133 |     async def send_message(message: SendMessage):
134 |         if message.body is None:
135 |             return {"status": "error", "message": "Message body cannot be None"}
136 |         try:
137 |             new_message = deserialize(message.body)
138 |             await backend.send_message(new_message, message.recipient)
139 |         except Exception as e:
140 |             return {"status": "error", "message": e}
141 | 
142 |         return {"status": "ok"}
143 | 
144 |     @api.post("/editQueue")
145 |     async def edit_message_queue(edit_message: EditQueueMessage):
146 |         print("Editing message at index ", edit_message.idx, "with new content: ", edit_message.body)
147 | 
148 |         if edit_message.body is None:
149 |             return {"status": "error", "message": "Messgage body cannot be None"}
150 | 
151 |         try:
152 |             new_message = deserialize(edit_message.body)
153 |             await backend.edit_message_queue(new_message, edit_message.idx)
154 |         except Exception as e:
155 |             return {"status": "error", "message": e}
156 | 
157 |         return {"status": "ok"}
158 | 
159 |     @api.post("/editAndRevertHistoryMessage")
160 |     async def edit_and_revert_message(edit_message: EditHistoryMessage):
161 |         try:
162 |             if edit_message.body is not None:
163 |                 new_message = deserialize(edit_message.body)
164 |             else:
165 |                 new_message = None
166 |             await backend.edit_and_revert_message(new_message, edit_message.timestamp)
167 |         except Exception as e:
168 |             return {"status": "error", "message": e}
169 | 
170 |         return {"status": "ok"}
171 | 
172 |     @api.get("/logs")
173 |     async def get_logs():
174 |         return backend.log_handler.get_log_messages()
175 | 
176 |     @api.post("/save_to_file")
177 |     async def save_to_file():
178 |         await write_file_async("history.pickle", backend.intervention_handler.history)
179 |         await write_file_async("cache.pickle", backend.agent_checkpoints)
180 | 
181 |         return {"status": "ok"}
182 | 
183 |     return app
184 |

--------------------------------------------------------------------------------
/frontend/src/components/ConversationOverview.tsx:
--------------------------------------------------------------------------------
  1 | import { scaleOrdinal } from "d3";
  2 | import { useEffect, useState } from "react";
  3 | 
  4 | import type {
  5 |   colorOption,
  6 |   Message,
  7 |   MessageHistoryMap,
  8 |   ResetMap,
  9 | } from "../shared-types";
 10 | import MessageHistoryChart from "./viz/MessageHistoryChart";
 11 | import { COLOR_RANGE, getMessageField } from "./viz/viz-utils";
 12 | 
 13 | interface ConversationOverviewProps {
 14 |   messageHistoryData: MessageHistoryMap;
 15 |   currentSession: number;
 16 | }
 17 | 
 18 | const ConversationOverview: React.FC<ConversationOverviewProps> = ({
 19 |   messageHistoryData,
 20 |   currentSession,
 21 | }) => {
 22 |   const [colorEncode, setColorEncode] = useState<colorOption>("type");
 23 |   const colorEncodeOptions: colorOption[] = [
 24 |     "none",
 25 |     "type",
 26 |     "sender",
 27 |     "recipient",
 28 |   ];
 29 |   const [filterValue, setFilterValue] = useState<string>();
 30 |   const [displayHistory, setDisplayHistory] = useState<
 31 |     MessageHistoryMap | undefined
 32 |   >(messageHistoryData);
 33 | 
 34 |   const uniqueValues =
 35 |     colorEncode === "none" || messageHistoryData == undefined
 36 |       ? []
 37 |       : Array.from(
 38 |           new Set(
 39 |             Object.values(messageHistoryData).flatMap((h) =>
 40 |               h.messages.map((message: Message) =>
 41 |                 getMessageField(message, colorEncode),
 42 |               ),
 43 |             ),
 44 |           ),
 45 |         ).sort();
 46 | 
 47 |   const sessionResetTimestamps = Object.keys(messageHistoryData).reduce(
 48 |     (acc: ResetMap, sessionKey: string) => {
 49 |       const session = messageHistoryData[Number(sessionKey)];
 50 |       const firstMessage = session.messages.find(
 51 |         (message: Message) =>
 52 |           session.current_session_reset_from != undefined &&
 53 |           message.timestamp > session.current_session_reset_from,
 54 |       );
 55 |       // const firstMessage = firstMessageIndex !== -1 ? session.messages[firstMessageIndex] : undefined;
 56 |       if (firstMessage != undefined) {
 57 |         acc[Number(sessionKey)] = firstMessage.timestamp;
 58 |       }
 59 |       return acc;
 60 |     },
 61 |     {},
 62 |   );
 63 | 
 64 |   const updateFilterValue = (value: string) => {
 65 |     if (filterValue === value) {
 66 |       setFilterValue(undefined);
 67 |     } else {
 68 |       setFilterValue(value);
 69 |     }
 70 |   };
 71 | 
 72 |   const shouldDisplay = (
 73 |     message: Message,
 74 |     currentFilterValue: string | undefined,
 75 |     _colorField: colorOption,
 76 |   ): boolean => {
 77 |     if (currentFilterValue === undefined || _colorField === "none") {
 78 |       return true;
 79 |     }
 80 | 
 81 |     return currentFilterValue === getMessageField(message, _colorField);
 82 |   };
 83 | 
 84 |   useEffect(() => {
 85 |     if (messageHistoryData != undefined) {
 86 |       const filteredHistory: MessageHistoryMap = {};
 87 | 
 88 |       for (const [key, session] of Object.entries(messageHistoryData)) {
 89 |         const filteredMessages = session.messages.filter((message: Message) =>
 90 |           shouldDisplay(message, filterValue, colorEncode),
 91 |         );
 92 |         filteredHistory[Number(key)] = {
 93 |           ...session,
 94 |           messages: filteredMessages,
 95 |         };
 96 |       }
 97 | 
 98 |       setDisplayHistory(filteredHistory);
 99 |     }
100 |   }, [messageHistoryData, filterValue, colorEncode]);
101 | 
102 |   const _colorScale = scaleOrdinal<string>()
103 |     .domain(uniqueValues)
104 |     .range(COLOR_RANGE);
105 | 
106 |   const getColor = (str: string | undefined | null): string => {
107 |     if (!str) {
108 |       return "#9ca3af"; // Default gray 400 if undefined or empty
109 |     }
110 | 
111 |     return _colorScale(str);
112 |   };
113 | 
114 |   if (displayHistory != undefined)
115 |     return (
116 |       // <div className="py-2 px-4 border-b-2 border-gray-300">
117 |       <div className="sticky top-0 z-10 h-screen overflow-y-auto shrink-0 border-l-2 border-gray-200 py-2 px-4">
118 |         <div className="flex gap-4 items-end">
119 |           <h3 className="text-lg font-semibold">Overview</h3>
120 |           <div className="">
121 |             Session <span className="font-semibold">{currentSession}</span>
122 |           </div>
123 |         </div>
124 | 
125 |         <div className="flex items-center gap-2 text-sm">
126 |           Color:
127 |           <select
128 |             onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
129 |               setColorEncode(e.target.value as colorOption);
130 |               setFilterValue(undefined);
131 |             }}
132 |             // sizing={"sm"}
133 |             value={colorEncode}
134 |             // color="light"
135 |             title="Color encoding"
136 |             className="text-sm border-none bg-gray-100 rounded p-1 w-24"
137 |           >
138 |             {colorEncodeOptions.map((opt) => (
139 |               <option key={opt} value={opt}>
140 |                 {opt}
141 |               </option>
142 |             ))}
143 |           </select>
144 |         </div>
145 | 
146 |         <div>
147 |           <div className="inline-block align-top">
148 |             <MessageHistoryChart
149 |               messageHistoryData={displayHistory}
150 |               colorField={colorEncode}
151 |               currentSession={currentSession}
152 |               getColor={getColor}
153 |               sessionResetTimestamps={sessionResetTimestamps}
154 |             />
155 |           </div>
156 |           {/* legend */}
157 |           <div className="inline-block align-top mt-14 ml-2 sticky top-5 z-10">
158 |             {uniqueValues.map((value) => (
159 |               <button
160 |                 key={value}
161 |                 className="flex items-center gap-2"
162 |                 onClick={() => updateFilterValue(value)}
163 |               >
164 |                 <div
165 |                   className="h-4 w-4 rounded-sm"
166 |                   style={{
167 |                     backgroundColor: getColor(value),
168 |                   }}
169 |                 />
170 |                 {value == undefined || value == null ? (
171 |                   <span
172 |                     className={`text-sm italic ${value === filterValue ? "font-bold" : ""}`}
173 |                   >
174 |                     Null
175 |                   </span>
176 |                 ) : (
177 |                   <span
178 |                     className={`text-sm ${value === filterValue ? "font-bold" : ""}`}
179 |                   >
180 |                     {value}
181 |                   </span>
182 |                 )}
183 |               </button>
184 |             ))}
185 |           </div>
186 |         </div>
187 |       </div>
188 |     );
189 | };
190 | 
191 | export default ConversationOverview;
192 |

--------------------------------------------------------------------------------
/src/agdebugger/serialization.py:
--------------------------------------------------------------------------------
  1 | import json
  2 | from dataclasses import dataclass
  3 | from typing import Dict, List
  4 | 
  5 | from autogen_agentchat.messages import (
  6 |     AgentEvent,
  7 |     ChatMessage,
  8 |     HandoffMessage,
  9 |     MemoryQueryEvent,
 10 |     MultiModalMessage,
 11 |     StopMessage,
 12 |     TextMessage,
 13 |     ToolCallExecutionEvent,
 14 |     ToolCallRequestEvent,
 15 |     ToolCallSummaryMessage,
 16 |     UserInputRequestedEvent,
 17 | )
 18 | from autogen_agentchat.teams._group_chat._events import (
 19 |     GroupChatAgentResponse,
 20 |     GroupChatMessage,
 21 |     GroupChatRequestPublish,
 22 |     GroupChatReset,
 23 |     GroupChatStart,
 24 |     GroupChatTermination,
 25 | )
 26 | from autogen_core.models import (
 27 |     AssistantMessage,
 28 |     FunctionExecutionResult,
 29 |     FunctionExecutionResultMessage,
 30 |     LLMMessage,
 31 |     SystemMessage,
 32 |     UserMessage,
 33 | )
 34 | 
 35 | 
 36 | @dataclass
 37 | class FieldInfo:
 38 |     name: str
 39 |     type: str
 40 |     required: bool
 41 | 
 42 | 
 43 | @dataclass
 44 | class MessageTypeDescription:
 45 |     name: str
 46 |     fields: List[FieldInfo] | None = None
 47 | 
 48 | 
 49 | def get_message_type_descriptions() -> Dict[str, MessageTypeDescription]:
 50 |     """
 51 |     Gets the message type descriptions for user-sendable messages for agentchat:
 52 |     - TextMessage, MultiModalMessage, StopMessage, HandoffMessage
 53 |     """
 54 | 
 55 |     return {
 56 |         # "TextMessage": MessageTypeDescription(
 57 |         #     name="TextMessage",
 58 |         #     fields=[
 59 |         #         FieldInfo(name="source", type="str", required=True),
 60 |         #         FieldInfo(name="content", type="str", required=True),
 61 |         #         FieldInfo(name="type", type="str", required=True),
 62 |         #     ],
 63 |         # ),
 64 |         # "MultiModalMessage": MessageTypeDescription(
 65 |         #     name="MultiModalMessage",
 66 |         #     fields=[
 67 |         #         FieldInfo(name="source", type="str", required=True),
 68 |         #         FieldInfo(name="content", type="List[str]", required=True),
 69 |         #         FieldInfo(name="type", type="str", required=True),
 70 |         #     ],
 71 |         # ),
 72 |         # "StopMessage": MessageTypeDescription(
 73 |         #     name="StopMessage",
 74 |         #     fields=[
 75 |         #         FieldInfo(name="source", type="str", required=True),
 76 |         #         FieldInfo(name="content", type="str", required=True),
 77 |         #         FieldInfo(name="type", type="str", required=True),
 78 |         #     ],
 79 |         # ),
 80 |         # "HandoffMessage": MessageTypeDescription(
 81 |         #     name="HandoffMessage",
 82 |         #     fields=[
 83 |         #         FieldInfo(name="source", type="str", required=True),
 84 |         #         FieldInfo(name="content", type="str", required=True),
 85 |         #         FieldInfo(name="target", type="str", required=True),
 86 |         #         FieldInfo(name="context", type="List[LLMMessage]", required=False),
 87 |         #         FieldInfo(name="type", type="str", required=True),
 88 |         #     ],
 89 |         # ),
 90 |         "GroupChatStart": MessageTypeDescription(
 91 |             name="GroupChatStart",
 92 |             fields=[
 93 |                 FieldInfo(name="messages", type="List[ChatMessage]", required=False),
 94 |             ],
 95 |         ),
 96 |         "GroupChatAgentResponse": MessageTypeDescription(
 97 |             name="GroupChatAgentResponse",
 98 |             fields=[
 99 |                 FieldInfo(name="agent_response", type="Response", required=True),
100 |             ],
101 |         ),
102 |         "GroupChatRequestPublish": MessageTypeDescription(
103 |             name="GroupChatRequestPublish",
104 |             fields=None,
105 |         ),
106 |         "GroupChatMessage": MessageTypeDescription(
107 |             name="GroupChatMessage",
108 |             fields=[
109 |                 FieldInfo(name="message", type="ChatMessage", required=True),
110 |             ],
111 |         ),
112 |         "GroupChatTermination": MessageTypeDescription(
113 |             name="GroupChatTermination",
114 |             fields=[
115 |                 FieldInfo(name="message", type="StopMessage", required=True),
116 |             ],
117 |         ),
118 |         "GroupChatReset": MessageTypeDescription(
119 |             name="GroupChatReset",
120 |             fields=None,
121 |         ),
122 |     }
123 | 
124 | 
125 | # ### Serialization ### -- maybe should be a class?
126 | 
127 | __message_map = {
128 |     # agentchat messages
129 |     "TextMessage": TextMessage,
130 |     "MultiModalMessage": MultiModalMessage,
131 |     "StopMessage": StopMessage,
132 |     "HandoffMessage": HandoffMessage,
133 |     # agentchat events
134 |     "ToolCallRequestEvent": ToolCallRequestEvent,
135 |     "ToolCallExecutionEvent": ToolCallExecutionEvent,
136 |     "ToolCallSummaryMessage": ToolCallSummaryMessage,
137 |     "UserInputRequestedEvent": UserInputRequestedEvent,
138 |     "MemoryQueryEvent": MemoryQueryEvent,
139 |     # group chat messages
140 |     "GroupChatAgentResponse": GroupChatAgentResponse,
141 |     "GroupChatMessage": GroupChatMessage,
142 |     "GroupChatRequestPublish": GroupChatRequestPublish,
143 |     "GroupChatReset": GroupChatReset,
144 |     "GroupChatStart": GroupChatStart,
145 |     "GroupChatTermination": GroupChatTermination,
146 |     # core messages
147 |     "AssistantMessage": AssistantMessage,
148 |     "FunctionExecutionResult": FunctionExecutionResult,
149 |     "FunctionExecutionResultMessage": FunctionExecutionResultMessage,
150 |     "SystemMessage": SystemMessage,
151 |     "UserMessage": UserMessage,
152 | }
153 | 
154 | 
155 | def serialize(message: ChatMessage | AgentEvent | LLMMessage | None) -> dict:
156 |     try:
157 |         if message is None:
158 |             return {"type": "None"}
159 | 
160 |         serialized_message = message.model_dump()
161 | 
162 |         # get name in case doesnt exist
163 |         type_name = type(message).__name__
164 |         serialized_message["type"] = type_name
165 |         return serialized_message
166 |     except Exception:
167 |         print("[WARN] Unable to serialize message: ", message)
168 |         return {}
169 | 
170 | 
171 | def deserialize(
172 |     message_dict: Dict | str,
173 | ) -> ChatMessage | AgentEvent | LLMMessage | None:
174 |     try:
175 |         if isinstance(message_dict, str):
176 |             message_dict = json.loads(message_dict)
177 | 
178 |         message_type = message_dict["type"]  # type: ignore
179 | 
180 |         if message_type == "None":
181 |             return None
182 | 
183 |         new_message_class = __message_map[message_type]
184 |         new_message = new_message_class(**message_dict)
185 |         return new_message
186 |     except Exception as e:
187 |         print(
188 |             f"[WARN] Unable to deserialize message dict into Pydantic class. Error: {str(e)}.\nMessage dict: ",
189 |             message_dict,
190 |         )
191 |         return None
192 |

--------------------------------------------------------------------------------
/frontend/src/components/MessageCard.tsx:
--------------------------------------------------------------------------------
  1 | import { Close } from "flowbite-react-icons/outline";
  2 | import { Reply } from "flowbite-react-icons/solid";
  3 | import _ from "lodash";
  4 | import React, { useState, useEffect, memo } from "react";
  5 | 
  6 | import { useAllowActions } from "../context/AllowActionsContext";
  7 | import { useHoveredMessage } from "../context/HoveredMessageContext";
  8 | import type { Message, GenericMessage } from "../shared-types";
  9 | import { messageTypeFormat } from "../utils/colours";
 10 | import DisplayMessage from "./MessageDisplays/DisplayMessage";
 11 | 
 12 | interface MessageProps {
 13 |   message: Message;
 14 |   editId: number;
 15 |   timestamp?: number;
 16 |   writeEditAndRevertMessage: (
 17 |     id: number,
 18 |     message: GenericMessage | undefined,
 19 |   ) => void;
 20 |   writeMessageTag?: string;
 21 |   allowRevert?: boolean;
 22 |   shouldBold?: boolean;
 23 | }
 24 | 
 25 | type UnknownDict = { [key: string]: unknown };
 26 | 
 27 | interface MessageInfo {
 28 |   outerMessageType: "Publish" | "Send" | "Response";
 29 |   innerMessageType: string;
 30 |   sender: string | undefined;
 31 |   recipient: string | undefined;
 32 |   innerMessage: UnknownDict;
 33 |   canEditContent: boolean;
 34 | }
 35 | 
 36 | function parseMessage(message: Message): MessageInfo {
 37 |   const innerMessage = message.message as GenericMessage;
 38 | 
 39 |   const outerKind = messageTypeFormat(message.type) as
 40 |     | "Publish"
 41 |     | "Send"
 42 |     | "Response";
 43 |   let sender: string | undefined = undefined;
 44 |   let recipient: string | undefined = undefined;
 45 | 
 46 |   if (message.type === "PublishMessageEnvelope") {
 47 |     sender = message.sender ?? "User";
 48 |     recipient = "Group";
 49 |   } else if (message.type === "SendMessageEnvelope") {
 50 |     sender = message.sender ?? "User";
 51 |     recipient = (message.recipient as string) ?? "Unknown";
 52 |   } else if (message.type === "ResponseMessageEnvelope") {
 53 |     sender = message.sender as string;
 54 |     recipient = message.recipient ?? "User";
 55 |   } else if (message.type === "ThoughtMessage") {
 56 |     sender = message.sender + " 🧠";
 57 |   } else {
 58 |     console.warn(
 59 |       "Invalid Outer Message type: " +
 60 |         message.type +
 61 |         "\nEntire message: " +
 62 |         message,
 63 |     );
 64 |   }
 65 | 
 66 |   // const contentStr: string =
 67 |   //   innerMessage.type == undefined
 68 |   //     ? String(innerMessage)
 69 |   //     : JSON.stringify(innerMessage, null, 2);
 70 |   const canEditContent: boolean =
 71 |     outerKind === "Send" || outerKind === "Publish";
 72 | 
 73 |   return {
 74 |     outerMessageType: outerKind,
 75 |     // @ts-expect-error ignore bro it has type
 76 |     innerMessageType: innerMessage.type,
 77 |     sender,
 78 |     recipient,
 79 |     innerMessage,
 80 |     canEditContent,
 81 |   };
 82 | }
 83 | 
 84 | function getMessageTypeDisplay(inner?: string, outer?: string) {
 85 |   if (inner != undefined && outer != undefined)
 86 |     return `${outer ?? ""} - ${inner ?? ""}`;
 87 |   if (inner != undefined) return inner;
 88 |   return outer;
 89 | }
 90 | 
 91 | const MessageCard: React.FC<MessageProps> = memo(
 92 |   ({
 93 |     message,
 94 |     editId,
 95 |     timestamp,
 96 |     writeEditAndRevertMessage,
 97 |     writeMessageTag = "Save edit",
 98 |     allowRevert = true,
 99 |     shouldBold,
100 |   }) => {
101 |     const [outerMessage, setOuterMessage] = useState<MessageInfo>();
102 |     const [innerMessage, setInnerMessage] = useState<unknown>();
103 |     const [originalInnerMessage, setOriginalInnerMessage] = useState<unknown>();
104 | 
105 |     // hooks
106 |     const { hoveredMessageId, setHoveredMessageId } = useHoveredMessage();
107 |     const { allowActions } = useAllowActions();
108 | 
109 |     useEffect(() => {
110 |       const parsed = parseMessage(message);
111 | 
112 |       setOuterMessage(parsed);
113 |       setOriginalInnerMessage(parsed.innerMessage);
114 |       setInnerMessage(parsed.innerMessage);
115 |     }, [message]);
116 | 
117 |     useEffect(() => {
118 |       setOuterMessage((prev) => {
119 |         if (prev != undefined) {
120 |           const updatedMessage = structuredClone(prev);
121 |           // @ts-expect-error will be fine
122 |           updatedMessage.innerMessage = innerMessage;
123 |           return updatedMessage;
124 |         }
125 |       });
126 |     }, [innerMessage, setOuterMessage]);
127 | 
128 |     // edit and reset message
129 |     const saveAndRevertMessage = () => {
130 |       if (outerMessage === undefined) return;
131 | 
132 |       writeEditAndRevertMessage(editId, outerMessage.innerMessage);
133 |     };
134 | 
135 |     // reset message no edit
136 |     const revertToMessage = () => {
137 |       writeEditAndRevertMessage(editId, undefined);
138 |     };
139 | 
140 |     return (
141 |       outerMessage != undefined && (
142 |         <div
143 |           id={`message-timestamp-${timestamp}`}
144 |           className={`bg-white p-4 shadow-md rounded-lg border-2 ${timestamp === hoveredMessageId ? "border-amber-500" : "border-white"} ${shouldBold ? "border-l-4 border-l-primary-700" : ""}`}
145 |           onPointerEnter={() => {
146 |             timestamp != undefined && setHoveredMessageId(timestamp);
147 |           }}
148 |           onPointerLeave={() => setHoveredMessageId(undefined)}
149 |         >
150 |           <div className="flex items-center gap-2">
151 |             <span className="">
152 |               {outerMessage.sender}{" "}
153 |               {outerMessage.recipient != undefined &&
154 |                 "→ " + outerMessage.recipient}
155 |             </span>
156 |             <div className="grow" />
157 | 
158 |             <span className="text-xs text-gray-500">
159 |               {getMessageTypeDisplay(
160 |                 outerMessage.innerMessageType,
161 |                 outerMessage.outerMessageType,
162 |               )}
163 |             </span>
164 |             <span
165 |               className={`font-semibold ${timestamp === hoveredMessageId ? "text-amber-500" : "font-semibold text-gray-400"}`}
166 |             >
167 |               {timestamp}
168 |             </span>
169 | 
170 |             {allowRevert &&
171 |               (outerMessage.outerMessageType === "Send" ||
172 |                 outerMessage.outerMessageType === "Publish") && (
173 |                 <button
174 |                   className="hover:bg-gray-100 text-primary-700 hover:text-primary-800 rounded p-1 disabled:cursor-not-allowed disabled:opacity-50"
175 |                   title="Reset to this message"
176 |                   onClick={revertToMessage}
177 |                   disabled={!allowActions}
178 |                 >
179 |                   <Reply size={20} />
180 |                 </button>
181 |               )}
182 |           </div>
183 | 
184 |           <hr className="my-2" />
185 |           <div className="overflow-auto max-h-[500px] p-1">
186 |             <DisplayMessage
187 |               type={outerMessage.innerMessageType}
188 |               allowEdit={outerMessage.canEditContent}
189 |               setMessage={setInnerMessage}
190 |               messageDict={outerMessage.innerMessage}
191 |             />
192 |           </div>
193 |           {outerMessage.canEditContent &&
194 |             !_.isEqual(originalInnerMessage, outerMessage.innerMessage) && (
195 |               <div className="flex items-center gap-2 justify-end mt-2">
196 |                 <button
197 |                   className="hover:bg-gray-100 rounded"
198 |                   title="Undo edit"
199 |                   onClick={() => setInnerMessage(originalInnerMessage)}
200 |                 >
201 |                   <Close size={20} className="text-gray-500" />
202 |                 </button>
203 |                 <button
204 |                   className="bg-primary-700 hover:bg-primary-800 text-white py-1 px-2 rounded text-sm disabled:cursor-not-allowed disabled:opacity-50"
205 |                   onClick={saveAndRevertMessage}
206 |                   disabled={!allowActions}
207 |                 >
208 |                   {writeMessageTag}
209 |                 </button>
210 |               </div>
211 |             )}
212 |         </div>
213 |       )
214 |     );
215 |   },
216 | );
217 | 
218 | export default MessageCard;
219 |

--------------------------------------------------------------------------------
/frontend/src/components/SendMessage.tsx:
--------------------------------------------------------------------------------
  1 | import { Select, Button } from "flowbite-react";
  2 | import { PaperPlane } from "flowbite-react-icons/outline";
  3 | import React, { useEffect, useState } from "react";
  4 | import { memo } from "react";
  5 | 
  6 | import { api } from "../api";
  7 | import { useAllowActions } from "../context/AllowActionsContext";
  8 | import type { AgentName, MessageTypeDescription } from "../shared-types";
  9 | import { DEFAULT_MESSAGES } from "../utils/default-messages";
 10 | import DisplayMessage from "./MessageDisplays/DisplayMessage";
 11 | 
 12 | interface SendMessageProps {
 13 |   agents: AgentName[];
 14 |   onSend: () => void;
 15 |   topics: string[];
 16 | }
 17 | 
 18 | type SendOption = "dm" | "publish";
 19 | 
 20 | function makeDefaultMessage(metadata: MessageTypeDescription) {
 21 |   if (metadata.name in DEFAULT_MESSAGES) {
 22 |     return DEFAULT_MESSAGES[metadata.name];
 23 |   } else {
 24 |     const message = {};
 25 |     metadata.fields?.forEach((field) => {
 26 |       message[field.name] = "";
 27 |     });
 28 |     message["type"] = metadata.name;
 29 |     return message;
 30 |   }
 31 | }
 32 | 
 33 | const SendMessage: React.FC<SendMessageProps> = memo((props) => {
 34 |   const [sendType, setSendType] = useState<SendOption>("dm");
 35 |   const [newMessage, setNewMessage] = useState<unknown>({});
 36 |   const [errorMessage, setErrorMessage] = useState<string>("");
 37 |   const [messageInfoDict, setMessageInfoDict] = useState<{
 38 |     [key: string]: MessageTypeDescription;
 39 |   }>({});
 40 |   const [selectedMessageType, setSelectedMessageType] = useState<string>(
 41 |     Object.keys(messageInfoDict)[0],
 42 |   );
 43 | 
 44 |   const [selectedAgent, setSelectedAgent] = useState<string | undefined>(
 45 |     props.agents.length > 0 ? props.agents[0] : undefined,
 46 |   );
 47 |   const [selectedTopic, setSelectedTopic] = useState<string | undefined>(
 48 |     props.topics.length > 0 ? props.topics[0] : undefined,
 49 |   );
 50 | 
 51 |   // Ensure selectedAgent is only set once
 52 |   useEffect(() => {
 53 |     if (!selectedAgent && props.agents.length > 0) {
 54 |       setSelectedAgent(props.agents[0]);
 55 |     }
 56 |   }, [props.agents, selectedAgent]);
 57 | 
 58 |   // Ensure selectedTopic is only set once
 59 |   useEffect(() => {
 60 |     if (!selectedTopic && props.topics.length > 0) {
 61 |       setSelectedTopic(props.topics[0]);
 62 |     }
 63 |   }, [props.topics, selectedTopic]);
 64 | 
 65 |   useEffect(() => {
 66 |     api
 67 |       .get<{ [key: string]: MessageTypeDescription }>("/message_types")
 68 |       .then((response) => {
 69 |         const infoDict = response.data;
 70 |         const selectedM = Object.keys(infoDict)[0];
 71 |         setMessageInfoDict(infoDict);
 72 |         setSelectedMessageType(selectedM);
 73 |         setNewMessage(makeDefaultMessage(infoDict[selectedM]));
 74 |       })
 75 |       .catch((error) => console.error("Error fetching message types:", error));
 76 |   }, []);
 77 | 
 78 |   const handleMessageTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
 79 |     const newMessageType = e.target.value;
 80 | 
 81 |     setNewMessage(makeDefaultMessage(messageInfoDict[newMessageType]));
 82 | 
 83 |     setSelectedMessageType(newMessageType);
 84 |   };
 85 | 
 86 |   const handleSubmit = (event: React.FormEvent) => {
 87 |     event.preventDefault();
 88 | 
 89 |     if (selectedAgent === null) {
 90 |       setErrorMessage("Please select an agent or Publish");
 91 |       return;
 92 |     }
 93 |     if (selectedMessageType === null) {
 94 |       setErrorMessage("Please select a message type");
 95 |       return;
 96 |     }
 97 |     if (newMessage == undefined || newMessage == "") {
 98 |       setErrorMessage("Please enter a message");
 99 |       return;
100 |     }
101 | 
102 |     if (sendType === "publish") {
103 |       api
104 |         .post("/publish", {
105 |           body: newMessage,
106 |           type: selectedMessageType,
107 |           topic: selectedTopic,
108 |         })
109 |         .then(() => {
110 |           setErrorMessage("");
111 |           props.onSend();
112 |           setNewMessage(
113 |             makeDefaultMessage(messageInfoDict[selectedMessageType]),
114 |           );
115 |         })
116 |         .catch((error) => {
117 |           console.error("Error sending message:", error);
118 |           setErrorMessage(error.message);
119 |         });
120 |     } else {
121 |       api
122 |         .post("/send", {
123 |           recipient: selectedAgent,
124 |           body: newMessage,
125 |           type: selectedMessageType,
126 |         })
127 |         .then(() => {
128 |           setErrorMessage("");
129 |           props.onSend();
130 |           setNewMessage(
131 |             makeDefaultMessage(messageInfoDict[selectedMessageType]),
132 |           );
133 |         })
134 |         .catch((error) => console.error("Error sending message:", error));
135 |     }
136 |   };
137 | 
138 |   const { allowActions } = useAllowActions();
139 | 
140 |   return (
141 |     <div>
142 |       <div className="bg-white p-4 shadow-md rounded-lg">
143 |         <h3 className="text-lg mb-2">New Message</h3>
144 | 
145 |         <form onSubmit={handleSubmit} spellCheck={false}>
146 |           <div className="flex my-1 gap-2 items-center">
147 |             <Select
148 |               id="sendTypeSelect"
149 |               onChange={(e) => setSendType(e.target.value as SendOption)}
150 |               className="w-30"
151 |               value={sendType}
152 |             >
153 |               <option key={`publish`} value={`publish`}>
154 |                 Publish
155 |               </option>
156 | 
157 |               <option key={`dm`} value={`dm`}>
158 |                 Direct Message
159 |               </option>
160 |             </Select>
161 |             {sendType === "dm" ? (
162 |               <>
163 |                 to
164 |                 <Select
165 |                   id="agentSelect"
166 |                   onChange={(e) => setSelectedAgent(e.target.value)}
167 |                   className="w-48"
168 |                   value={selectedAgent || ""}
169 |                 >
170 |                   {props.agents.map((agent) => (
171 |                     <option key={`${agent}`} value={`${agent}`}>
172 |                       {`${agent}`}
173 |                     </option>
174 |                   ))}
175 |                 </Select>
176 |               </>
177 |             ) : (
178 |               <>
179 |                 to topic
180 |                 <Select
181 |                   id="topicSelect"
182 |                   onChange={(e) => setSelectedTopic(e.target.value)}
183 |                   className="w-40"
184 |                   value={selectedTopic}
185 |                 >
186 |                   {props.topics.map((t) => (
187 |                     <option key={`${t}`} value={`${t}`}>
188 |                       {`${t}`}
189 |                     </option>
190 |                   ))}
191 |                 </Select>
192 |               </>
193 |             )}
194 | 
195 |             <Button
196 |               type="submit"
197 |               disabled={!selectedAgent || !selectedMessageType || !allowActions}
198 |               title="Send Message"
199 |               size="xs"
200 |             >
201 |               <PaperPlane className="rotate-90" />
202 |             </Button>
203 |           </div>
204 | 
205 |           <hr className="my-2" />
206 | 
207 |           <Select
208 |             id="messageTypeSelect"
209 |             onChange={handleMessageTypeChange}
210 |             className="w-48 mb-2"
211 |             value={selectedMessageType || ""}
212 |           >
213 |             {Object.keys(messageInfoDict).map((m) => (
214 |               <option className="py-16" key={m} value={m}>
215 |                 {m}
216 |               </option>
217 |             ))}
218 |           </Select>
219 | 
220 |           <DisplayMessage
221 |             type={selectedMessageType}
222 |             allowEdit={true}
223 |             setMessage={setNewMessage}
224 |             messageDict={newMessage}
225 |           />
226 | 
227 |           {errorMessage !== "" && (
228 |             <span>
229 |               <span className="font-semibold text-red-500">Error: </span>
230 |               {errorMessage}
231 |             </span>
232 |           )}
233 |         </form>
234 |       </div>
235 |     </div>
236 |   );
237 | });
238 | 
239 | export default SendMessage;
240 |

--------------------------------------------------------------------------------
/frontend/src/App.tsx:
--------------------------------------------------------------------------------
  1 | // src/App.tsx
  2 | import { Container, Section, Bar } from "@column-resizer/react";
  3 | import _ from "lodash";
  4 | import React, { useEffect, useState, useMemo, useCallback } from "react";
  5 | 
  6 | import { api, step } from "./api.ts";
  7 | import AgentList from "./components/AgentList.tsx";
  8 | import ConversationOverview from "./components/ConversationOverview.tsx";
  9 | import LogList from "./components/LogList.tsx";
 10 | import MessageList from "./components/MessageList.tsx";
 11 | import MessageQueue from "./components/MessageQueue.tsx";
 12 | import RunControls from "./components/RunControls.tsx";
 13 | import SendMessage from "./components/SendMessage.tsx";
 14 | import type {
 15 |   AgentName,
 16 |   Message,
 17 |   LogMessage,
 18 |   MessageHistoryMap,
 19 |   MessageHistoryState,
 20 | } from "./shared-types";
 21 | 
 22 | const App: React.FC = () => {
 23 |   const [agents, setAgents] = useState<AgentName[]>([]);
 24 |   const [timeStep, setTimeStep] = useState<number>(0);
 25 |   const [logs, setLogs] = useState<LogMessage[]>([]);
 26 |   const [numTasks, setNumTasks] = useState<number>(0);
 27 |   const [loopRunning, setLoopRunning] = useState<boolean>(false);
 28 |   const [messageQueue, setMessageQueue] = useState<Message[]>([]);
 29 |   const [sessionHistory, setSessionHistory] = useState<
 30 |     MessageHistoryMap | undefined
 31 |   >(undefined);
 32 |   const [currentSession, setCurrentSession] = useState<number | undefined>(
 33 |     undefined,
 34 |   );
 35 |   const [allTopics, setAllTopics] = useState<string[]>([]);
 36 | 
 37 |   // timer to poll backend
 38 |   useEffect(() => {
 39 |     const interval = setInterval(() => {
 40 |       setTimeStep(timeStep + 1);
 41 |     }, 1000);
 42 |     return () => clearInterval(interval);
 43 |   }, [timeStep]);
 44 | 
 45 |   useEffect(() => {
 46 |     api
 47 |       .get<AgentName[]>("/agents")
 48 |       .then((response) => {
 49 |         setAgents((prev) =>
 50 |           _.isEqual(prev, response.data) ? prev : response.data,
 51 |         );
 52 |       })
 53 |       .catch((error) => console.error("Error fetching agents:", error));
 54 | 
 55 |     api
 56 |       .get<Message[]>("/getMessageQueue")
 57 |       .then((response) => {
 58 |         setMessageQueue((prev) =>
 59 |           _.isEqual(prev, response.data) ? prev : response.data,
 60 |         );
 61 |       })
 62 |       .catch((error) => console.error("Error fetching messages:", error));
 63 | 
 64 |     api
 65 |       .get<LogMessage[]>("/logs")
 66 |       .then((response) =>
 67 |         setLogs((prev) =>
 68 |           _.isEqual(prev, response.data) ? prev : response.data,
 69 |         ),
 70 |       )
 71 |       .catch((error) => console.error("Error fetching logs:", error));
 72 | 
 73 |     api
 74 |       .get<number>("/num_tasks")
 75 |       .then((response) =>
 76 |         setNumTasks((prev) =>
 77 |           _.isEqual(prev, response.data) ? prev : response.data,
 78 |         ),
 79 |       )
 80 |       .catch((error) => console.error("Error fetching tasks:", error));
 81 | 
 82 |     api
 83 |       .get<MessageHistoryState>("/getSessionHistory")
 84 |       .then((response) => {
 85 |         const historyState = response.data;
 86 | 
 87 |         setSessionHistory((prev) =>
 88 |           _.isEqual(prev, historyState.message_history)
 89 |             ? prev
 90 |             : historyState.message_history,
 91 |         );
 92 |         setCurrentSession((prev) =>
 93 |           _.isEqual(prev, historyState.current_session)
 94 |             ? prev
 95 |             : historyState.current_session,
 96 |         );
 97 |       })
 98 |       .catch((error) => console.error("Error fetching history:", error));
 99 | 
100 |     api
101 |       .get<boolean>("/loop_status")
102 |       .then((response) => {
103 |         setLoopRunning((prev) =>
104 |           _.isEqual(prev, response.data) ? prev : response.data,
105 |         );
106 |       })
107 |       .catch((error) => console.error("Error fetching loop_status:", error));
108 | 
109 |     api
110 |       .get<string[]>("/topics")
111 |       .then((response) => {
112 |         setAllTopics((prev) =>
113 |           _.isEqual(prev, response.data) ? prev : response.data,
114 |         );
115 |       })
116 |       .catch((error) => console.error("Error fetching topics:", error));
117 |   }, [timeStep]);
118 | 
119 |   const onProcessNext = useCallback(() => {
120 |     step(() => setTimeStep((prev) => prev + 1));
121 |   }, []);
122 | 
123 |   const onDropNext = useCallback(() => {
124 |     api
125 |       .post("/drop")
126 |       .then((response) => {
127 |         console.log("Message dropped:", response.data);
128 |         setTimeStep((prev) => prev + 1);
129 |       })
130 |       .catch((error) => console.error("Error dropping next:", error));
131 |   }, []);
132 | 
133 |   const onSend = useCallback(() => {
134 |     setTimeStep((prev) => prev + 1);
135 |   }, []);
136 | 
137 |   const setLoop = useCallback((state: "start" | "stop") => {
138 |     if (state === "start") {
139 |       api
140 |         .post("/start_loop")
141 |         .then(() => {
142 |           setLoopRunning(true);
143 |         })
144 |         .catch((error) => console.error("Error starting loop:", error));
145 |     } else {
146 |       api
147 |         .post("/stop_loop")
148 |         .then(() => {
149 |           setLoopRunning(false);
150 |         })
151 |         .catch((error) => console.error("Error stopping loop:", error));
152 |     }
153 |   }, []);
154 | 
155 |   const memoizedAgents = useMemo(() => agents, [agents]);
156 |   const memoizedTopics = useMemo(() => allTopics, [allTopics]);
157 |   const memoizedLogs = useMemo(() => logs, [logs]);
158 |   const memoizedMessageQueue = useMemo(() => messageQueue, [messageQueue]);
159 |   const memoizedSessionHistory = useMemo(
160 |     () => sessionHistory,
161 |     [sessionHistory],
162 |   );
163 | 
164 |   const memoizedRunControls = useMemo(
165 |     () => (
166 |       <RunControls
167 |         onProcessNext={onProcessNext}
168 |         onDropNext={onDropNext}
169 |         loopRunning={loopRunning}
170 |         setLoop={setLoop}
171 |         messagesAreHere={memoizedMessageQueue.length > 0}
172 |       />
173 |     ),
174 |     [
175 |       onProcessNext,
176 |       onDropNext,
177 |       loopRunning,
178 |       setLoop,
179 |       memoizedMessageQueue.length,
180 |     ],
181 |   );
182 | 
183 |   return (
184 |     <div className="bg-gray-100 text-gray-900 flex flex-col min-h-screen">
185 |       <header className="bg-primary-900 text-white p-3 flex">
186 |         <h1 className="text-2xl">🧭 AGDebugger</h1>
187 |       </header>
188 | 
189 |       {/* body */}
190 |       <div className="flex grow">
191 |         <div className="flex flex-col grow">
192 |           <div className="border-b-2 border-b-gray-200 px-4 py-4 bg-gray-100 sticky top-0 z-10">
193 |             <AgentList agents={memoizedAgents} />
194 |           </div>
195 |           <Container className="grow">
196 |             <Section
197 |               minSize={525}
198 |               defaultSize={525}
199 |               className="py-2 px-4 space-y-2 sticky top-20 z-5 h-screen"
200 |             >
201 |               <SendMessage
202 |                 agents={memoizedAgents}
203 |                 onSend={onSend}
204 |                 topics={memoizedTopics}
205 |               />
206 |               <MessageQueue
207 |                 messages={memoizedMessageQueue}
208 |                 numOutstandingTasks={numTasks}
209 |                 runControls={memoizedRunControls}
210 |               />
211 |             </Section>
212 | 
213 |             <Bar
214 |               size={2}
215 |               className="transition bg-gray-200 hover:bg-primary-800 active:bg-primary-800 cursor-col-resize"
216 |             />
217 | 
218 |             <Section minSize={300} className="space-y-4 p-4">
219 |               <MessageList
220 |                 messageHistory={
221 |                   memoizedSessionHistory != undefined &&
222 |                   currentSession != undefined
223 |                     ? memoizedSessionHistory[currentSession].messages
224 |                     : []
225 |                 }
226 |               />
227 | 
228 |               <hr />
229 | 
230 |               <LogList logs={memoizedLogs} />
231 |             </Section>
232 |           </Container>
233 |         </div>
234 | 
235 |         {memoizedSessionHistory != undefined && currentSession != undefined && (
236 |           <ConversationOverview
237 |             messageHistoryData={memoizedSessionHistory}
238 |             currentSession={currentSession}
239 |           />
240 |         )}
241 |       </div>
242 | 
243 |       {/* <footer className="bg-gray-800 text-white p-4">
244 |         <p>© 2024 Microsoft</p>
245 |       </footer> */}
246 |     </div>
247 |   );
248 | };
249 | 
250 | export default App;
251 |

--------------------------------------------------------------------------------
/src/agdebugger/backend.py:
--------------------------------------------------------------------------------
  1 | import asyncio
  2 | import logging
  3 | from typing import Any, Dict, List
  4 | 
  5 | from autogen_agentchat.teams import BaseGroupChat
  6 | from autogen_core import AgentId, DefaultTopicId, SingleThreadedAgentRuntime, TopicId
  7 | from autogen_core._queue import Queue
  8 | from autogen_core._single_threaded_agent_runtime import (
  9 |     PublishMessageEnvelope,
 10 |     ResponseMessageEnvelope,
 11 |     RunContext,
 12 |     SendMessageEnvelope,
 13 | )
 14 | 
 15 | from .intervention import AgDebuggerInterventionHandler
 16 | from .log import ListHandler  # , LogToHistoryHandler
 17 | from .serialization import get_message_type_descriptions
 18 | from .types import (
 19 |     AgentInfo,
 20 |     AGEPublishMessage,
 21 |     AGESendMessage,
 22 |     MessageHistorySession,
 23 |     ScoreResult,
 24 | )
 25 | from .utils import message_to_json
 26 | 
 27 | 
 28 | async def wait_for_future(fut):  # type: ignore
 29 |     await fut
 30 | 
 31 | 
 32 | class BackendRuntimeManager:
 33 |     def __init__(
 34 |         self,
 35 |         groupchat: BaseGroupChat,
 36 |         logger: logging.Logger,
 37 |         message_history=None,
 38 |         state_cache=None,
 39 |     ):
 40 |         self._groupchat = groupchat
 41 |         self.message_info = get_message_type_descriptions()
 42 |         self.prior_histories: Dict[int, MessageHistorySession] = {}
 43 |         self.session_counter = 0
 44 |         self.current_session_reset_from: int | None = None
 45 |         self.agent_checkpoints = {} if state_cache is None else state_cache
 46 |         self.run_context: RunContext | None = None
 47 |         self.intervention_handler = AgDebuggerInterventionHandler(self.checkpoint_agents, message_history)
 48 |         self.all_topics: List[str] = []
 49 |         self.log_handler = ListHandler()
 50 |         logger.addHandler(self.log_handler)
 51 |         self.ready = False
 52 | 
 53 |         print("Initial Backend loaded.")
 54 | 
 55 |     async def async_initialize(self) -> None:
 56 |         if not self.groupchat._initialized:
 57 |             await self.groupchat._init(self.runtime)
 58 | 
 59 |         # manually add all topics from the chat
 60 |         self.all_topics = [
 61 |             self.groupchat._group_topic_type,
 62 |             self.groupchat._output_topic_type,
 63 |             self.groupchat._group_chat_manager_topic_type,
 64 |             *self.groupchat._participant_topic_types,
 65 |         ]
 66 | 
 67 |         # add intervention handler since runtime already initialized
 68 |         if self.runtime._intervention_handlers is None:
 69 |             self.runtime._intervention_handlers = []
 70 |         self.runtime._intervention_handlers.append(self.intervention_handler)
 71 | 
 72 |         # load the last checkpoint - N.B. might be earlier than last message so we get the max key
 73 |         if len(self.intervention_handler.history) > 0:
 74 |             last_checkpoint_time = max(self.agent_checkpoints.keys())
 75 |             print("resetting to checkpoint: ", last_checkpoint_time)
 76 |             checkpoint = self.agent_checkpoints.get(last_checkpoint_time)
 77 |             if checkpoint is not None:
 78 |                 await self.runtime.load_state(checkpoint)
 79 | 
 80 |         self.ready = True
 81 |         print("Finished backend async load")
 82 | 
 83 |     @property
 84 |     def groupchat(self) -> BaseGroupChat:
 85 |         return self._groupchat
 86 | 
 87 |     @property
 88 |     def runtime(self) -> SingleThreadedAgentRuntime:
 89 |         return self.groupchat._runtime
 90 | 
 91 |     @property
 92 |     def agent_key(self) -> str:
 93 |         return self.groupchat._team_id
 94 | 
 95 |     @property
 96 |     def current_score(self) -> ScoreResult | None:
 97 |         return self.intervention_handler._current_score
 98 | 
 99 |     @property
100 |     def agent_names(self) -> List[str]:
101 |         return list(self.runtime._known_agent_names)
102 | 
103 |     @property
104 |     def message_queue_list(self) -> List[PublishMessageEnvelope | SendMessageEnvelope | ResponseMessageEnvelope]:
105 |         # read and serialize without having to reconstruct a new Queue each time
106 |         return list(self.runtime._message_queue._queue)  # type: ignore
107 | 
108 |     @property
109 |     def unprocessed_messages_count(self):
110 |         return self.runtime.unprocessed_messages_count
111 | 
112 |     @property
113 |     def is_processing(self) -> bool:
114 |         return self.runtime._run_context is not None
115 | 
116 |     def start_processing(self) -> None:
117 |         self.runtime.start()
118 | 
119 |     async def process_next(self):
120 |         await self.runtime.process_next()
121 | 
122 |     async def stop_processing(self) -> None:
123 |         await self.runtime.stop_when_idle()
124 |         # OR maybe below to stop immediatley
125 |         # await self.runtime.stop()
126 | 
127 |     async def checkpoint_agents(self, timestamp: int) -> None:
128 |         checkpoint = await self.runtime.save_state()
129 |         self.agent_checkpoints[timestamp] = checkpoint
130 | 
131 |     def get_current_history(self):
132 |         return [message_to_json(m.message, m.timestamp) for m in self.intervention_handler.history]
133 | 
134 |     def save_history_session_from_reset(self, new_reset_from: int) -> None:
135 |         self.prior_histories[self.session_counter] = MessageHistorySession(
136 |             messages=self.get_current_history(),
137 |             current_session_reset_from=self.current_session_reset_from,
138 |             next_session_starts_at=None,
139 |             current_session_score=self.current_score,
140 |         )
141 | 
142 |         self.session_counter += 1
143 |         self.current_session_reset_from = new_reset_from
144 | 
145 |     def read_current_session_history(self):
146 |         saved_sessions = self.prior_histories.copy()
147 | 
148 |         # save current messages
149 |         saved_sessions[self.session_counter] = MessageHistorySession(
150 |             messages=self.get_current_history(),
151 |             current_session_reset_from=self.current_session_reset_from,
152 |             next_session_starts_at=None,
153 |             current_session_score=self.current_score,
154 |         )
155 |         return saved_sessions
156 | 
157 |     async def get_agent_config(self, agent_name) -> AgentInfo:
158 |         agent_id = await self.runtime.get(agent_name, key=self.agent_key)
159 | 
160 |         if agent_id in self.runtime._instantiated_agents:
161 |             agent_state = await self.runtime.agent_save_state(agent_id)
162 |         else:
163 |             agent_state = "Agent not instantiated yet!"
164 | 
165 |         return AgentInfo(config={}, state=agent_state)
166 | 
167 |     def publish_message(self, new_message: Any, topic: str | TopicId):
168 |         """
169 |         PUBLISH new message to the runtime.
170 |         """
171 |         if isinstance(topic, str):
172 |             topic = DefaultTopicId(topic)
173 | 
174 |         asyncio.create_task(wait_for_future(self.runtime.publish_message(new_message, topic)))
175 | 
176 |     async def send_message(self, new_message: Any, recipient: str | AgentId, sender=None):
177 |         """
178 |         SEND new message to the runtime.
179 |         """
180 |         agent_id = await self.runtime.get(recipient, key=self.agent_key)
181 |         return asyncio.create_task(wait_for_future(self.runtime.send_message(new_message, agent_id, sender=sender)))
182 | 
183 |     async def edit_message_queue(self, new_message: Any, edit_idx: int):
184 |         """
185 |         Edit existing message in the runtime queue.
186 |         """
187 |         if edit_idx >= self.runtime._message_queue.qsize():
188 |             raise IndexError(f"Index out of range in queue {edit_idx}")
189 | 
190 |         # #1 simple way -- directly edit queue array
191 |         # backend.runtime._message_queue._queue[editMessage.idx].message = newMessage
192 | 
193 |         # #2 more robust -- make new queue
194 |         current_queue = []
195 |         while not self.runtime._message_queue.empty():
196 |             current_queue.append(self.runtime._message_queue.get_nowait())
197 | 
198 |         current_queue[edit_idx].message = new_message
199 | 
200 |         newQueue = Queue()
201 |         for item in current_queue:
202 |             await newQueue.put(item)
203 |         self.runtime._message_queue = newQueue
204 | 
205 |     async def edit_and_revert_message(self, new_message: Any | None, cutoff_timestamp: int):
206 |         # immediately stop and clear queue
207 |         if self.is_processing:
208 |             await self.stop_processing()
209 | 
210 |         current_message = self.intervention_handler.get_message_at_timestamp(cutoff_timestamp)
211 |         if current_message is None:
212 |             raise ValueError(f"Unable to find message in history with timestamp {cutoff_timestamp}")
213 | 
214 |         self.save_history_session_from_reset(cutoff_timestamp)
215 |         self.intervention_handler.purge_history_after_cutoff(cutoff_timestamp)
216 | 
217 |         # edit actual message and add to queue
218 |         if new_message is None:
219 |             new_message = current_message.message.message
220 | 
221 |         # publish or send as new message
222 |         if isinstance(current_message.message, AGEPublishMessage):
223 |             self.publish_message(new_message, current_message.message.topic_id)
224 |         elif isinstance(current_message.message, AGESendMessage):
225 |             await self.send_message(
226 |                 new_message, current_message.message.recipient, sender=current_message.message.sender
227 |             )
228 |         else:
229 |             raise ValueError(
230 |                 f"Failed to re-send message after history reset. Unsure how to handle message of type: {current_message.message}"
231 |             )
232 | 
233 |         # NOTE: reset can be slow if heavy state so performing after message is sent.
234 |         checkpoint = self.agent_checkpoints.get(cutoff_timestamp, None)
235 |         if checkpoint is not None:
236 |             await self.runtime.load_state(checkpoint)
237 |         else:
238 |             print("[WARN] Was unable to find agent state checkpoint for time ", cutoff_timestamp)
239 |

--------------------------------------------------------------------------------
/frontend/src/components/viz/MessageHistoryChart.tsx:
--------------------------------------------------------------------------------
  1 | import Tippy from "@tippyjs/react";
  2 | import { scaleLinear, scaleBand } from "d3";
  3 | 
  4 | import { useHoveredMessage } from "../../context/HoveredMessageContext";
  5 | import type {
  6 |   MessageHistoryMap,
  7 |   MessageHistory,
  8 |   Message,
  9 |   colorOption,
 10 |   ResetMap,
 11 | } from "../../shared-types";
 12 | import MessageTooltip from "./MessageTooltip";
 13 | import ScoreTooltip from "./ScoreTooltip";
 14 | import { getMessageField } from "./viz-utils";
 15 | 
 16 | interface MessageHistoryChartProps {
 17 |   messageHistoryData: MessageHistoryMap;
 18 |   colorField: colorOption;
 19 |   currentSession?: number;
 20 |   getColor: (value: string | undefined | null) => string;
 21 |   sessionResetTimestamps: ResetMap;
 22 | }
 23 | 
 24 | // COLORS
 25 | const HIGHLIGHT_COLOR = "#f59e0b"; // amber-500
 26 | const PRIMARY_COLOR = "#0e7490"; // primary-700
 27 | 
 28 | const MessageHistoryChart: React.FC<MessageHistoryChartProps> = ({
 29 |   messageHistoryData,
 30 |   colorField,
 31 |   currentSession,
 32 |   getColor,
 33 |   sessionResetTimestamps,
 34 | }) => {
 35 |   const padding = 10;
 36 |   const rectWidth = 20;
 37 |   const rectHeight = 10;
 38 |   const xSpace = 15;
 39 |   const ySpace = 6;
 40 |   const axisSpace = 25;
 41 | 
 42 |   const longestArrayLength = Math.max(
 43 |     ...Object.values(messageHistoryData).map((h) => h.messages.length),
 44 |   );
 45 | 
 46 |   const scoreSpace = 25;
 47 | 
 48 |   const maxYExtent = (longestArrayLength - 1) * (rectHeight + ySpace);
 49 |   const maxXExtent =
 50 |     Object.keys(messageHistoryData).length * (rectWidth + xSpace);
 51 |   const chartHeight =
 52 |     padding + axisSpace + maxYExtent + rectHeight + ySpace + scoreSpace;
 53 |   const chartWidth = padding + maxXExtent;
 54 | 
 55 |   const xScale = scaleBand()
 56 |     .domain(Object.keys(messageHistoryData))
 57 |     .range([padding, maxXExtent]);
 58 | 
 59 |   const yScale = scaleLinear()
 60 |     .domain([0, longestArrayLength - 1])
 61 |     .range([
 62 |       padding + axisSpace + scoreSpace,
 63 |       padding + axisSpace + scoreSpace + maxYExtent,
 64 |     ]);
 65 | 
 66 |   const isNewMessage = (
 67 |     timestamp: number,
 68 |     current_session_reset_from: number | undefined,
 69 |   ): boolean => {
 70 |     if (current_session_reset_from === undefined) {
 71 |       return true;
 72 |     }
 73 |     return timestamp >= current_session_reset_from;
 74 |   };
 75 | 
 76 |   const getMessageColor = (
 77 |     message: Message,
 78 |     colorField: colorOption,
 79 |   ): string => {
 80 |     if (colorField === "none") {
 81 |       return PRIMARY_COLOR;
 82 |     }
 83 | 
 84 |     const fieldValue = getMessageField(message, colorField);
 85 |     return getColor(fieldValue);
 86 |   };
 87 | 
 88 |   const getFill = (
 89 |     message: Message,
 90 |     colorField: colorOption,
 91 |     shouldHighlight: boolean,
 92 |   ): string => {
 93 |     if (shouldHighlight) {
 94 |       if (colorField === "none") return HIGHLIGHT_COLOR;
 95 |       else return "#000000";
 96 |     }
 97 | 
 98 |     return getMessageColor(message, colorField);
 99 |   };
100 | 
101 |   const resetMessages = Object.keys(messageHistoryData).reduce(
102 |     (acc: ResetMap, sessionKey: string) => {
103 |       const session = messageHistoryData[Number(sessionKey)];
104 | 
105 |       const lookingFor: number | undefined =
106 |         sessionResetTimestamps[Number(sessionKey)];
107 | 
108 |       if (lookingFor === undefined) {
109 |         return acc;
110 |       }
111 |       const firstMessageIndex = session.messages.findIndex(
112 |         (message: Message) => message.timestamp === lookingFor,
113 |       );
114 |       if (firstMessageIndex !== -1) {
115 |         acc[Number(sessionKey)] = firstMessageIndex;
116 |       }
117 |       return acc;
118 |     },
119 |     {},
120 |   );
121 | 
122 |   const { hoveredMessageId, setHoveredMessageId } = useHoveredMessage();
123 | 
124 |   // interaction handles
125 |   const handleMessageHover = (message: Message) => {
126 |     setHoveredMessageId(message.timestamp);
127 |   };
128 | 
129 |   const handleMessageUnhover = () => {
130 |     setHoveredMessageId(undefined);
131 |   };
132 | 
133 |   const handleRectClick = (timestamp: number) => {
134 |     const target = document.getElementById(`message-timestamp-${timestamp}`);
135 |     if (target) {
136 |       const offset = 120; // Adjust this value as needed
137 |       const bodyRect = document.body.getBoundingClientRect().top;
138 |       const elementRect = target.getBoundingClientRect().top;
139 |       const elementPosition = elementRect - bodyRect;
140 |       const offsetPosition = elementPosition - offset;
141 | 
142 |       window.scrollTo({
143 |         top: offsetPosition,
144 |         behavior: "smooth",
145 |       });
146 |     }
147 |   };
148 | 
149 |   return (
150 |     <svg
151 |       // className="border-2 border-gray-400"
152 |       height={chartHeight}
153 |       width={chartWidth}
154 |     >
155 |       <g>
156 |         {/* axis */}
157 |         {Object.entries(messageHistoryData).map(
158 |           (
159 |             [session_id, messageHistory]: [string, MessageHistory],
160 |             sessionIdx,
161 |           ) => (
162 |             <g key={`${sessionIdx}-x-axis-group`}>
163 |               <Tippy
164 |                 key={`${sessionIdx}-score-tooltip`}
165 |                 content={
166 |                   <ScoreTooltip
167 |                     scoreResult={messageHistory.current_session_score}
168 |                   />
169 |                 }
170 |                 animation={false}
171 |                 trigger="mouseenter focus"
172 |                 placement="left"
173 |               >
174 |                 <text
175 |                   key={`session-${sessionIdx}-tag`}
176 |                   x={xScale(session_id)}
177 |                   y={padding}
178 |                   alignmentBaseline="hanging"
179 |                   textAnchor="start"
180 |                 >
181 |                   {messageHistory.current_session_score == undefined
182 |                     ? "❔"
183 |                     : messageHistory.current_session_score.passed
184 |                       ? "✅"
185 |                       : "❌"}
186 |                 </text>
187 |               </Tippy>
188 |               <text
189 |                 key={`${sessionIdx}-x-axis`}
190 |                 // @ts-expect-error scale typing
191 |                 x={xScale(session_id) + rectWidth / 2}
192 |                 y={padding + axisSpace}
193 |                 alignmentBaseline="hanging"
194 |                 textAnchor="middle"
195 |                 className={
196 |                   Number(session_id) === currentSession ? "font-semibold" : ""
197 |                 }
198 |               >
199 |                 {session_id}
200 |               </text>
201 |             </g>
202 |           ),
203 |         )}
204 |       </g>
205 | 
206 |       <g>
207 |         {/* Reset dashes */}
208 |         {Object.entries(resetMessages).map(
209 |           ([session_id, messageIndex]: [string, number]) => (
210 |             <line
211 |               key={`${session_id}-${messageIndex}-reset-line`}
212 |               y1={yScale(messageIndex) + rectHeight / 2}
213 |               y2={yScale(messageIndex) + rectHeight / 2}
214 |               // @ts-expect-error scale typing
215 |               x1={xScale(session_id) - xSpace + 3}
216 |               x2={xScale(session_id)}
217 |               className="stroke-black stroke-[4px]"
218 |             />
219 |           ),
220 |         )}
221 |       </g>
222 | 
223 |       <g>
224 |         {/* Message lines -- have to be before rects so rects above lines */}
225 |         {Object.entries(messageHistoryData).map(
226 |           (
227 |             [session_id, messageHistory]: [string, MessageHistory],
228 |             sessionIdx,
229 |           ) =>
230 |             messageHistory.messages.map((message: Message, messageIdx) => {
231 |               if (messageIdx > 0) {
232 |                 return (
233 |                   <line
234 |                     key={`${sessionIdx}-${messageIdx}-line`}
235 |                     y1={yScale(messageIdx)}
236 |                     y2={yScale(messageIdx - 1) + rectHeight}
237 |                     // @ts-expect-error scale typing
238 |                     x1={xScale(session_id) + rectWidth / 2}
239 |                     // @ts-expect-error scale typing
240 |                     x2={xScale(session_id) + rectWidth / 2}
241 |                     className={`stroke-2 ${
242 |                       isNewMessage(
243 |                         message.timestamp,
244 |                         messageHistory.current_session_reset_from,
245 |                       )
246 |                         ? "stroke-gray-300"
247 |                         : "stroke-gray-100"
248 |                     }`}
249 |                   />
250 |                 );
251 |               }
252 |             }),
253 |         )}
254 |       </g>
255 | 
256 |       {/* Message rectangles  */}
257 |       {Object.entries(messageHistoryData).map(
258 |         (
259 |           [session_id, messageHistory]: [string, MessageHistory],
260 |           sessionIdx,
261 |         ) => (
262 |           <g key={`session-${sessionIdx}`}>
263 |             {messageHistory.messages.map((message: Message, messageIdx) => {
264 |               return (
265 |                 <Tippy
266 |                   key={`${sessionIdx}-${messageIdx}-tooltip`}
267 |                   content={<MessageTooltip message={message} />}
268 |                   animation={false}
269 |                   trigger="mouseenter focus"
270 |                   placement="right"
271 |                   hideOnClick={true}
272 |                 >
273 |                   <rect
274 |                     onClick={() => handleRectClick(message.timestamp)}
275 |                     onPointerEnter={() => handleMessageHover(message)}
276 |                     onPointerLeave={handleMessageUnhover}
277 |                     key={`${sessionIdx}-${messageIdx}-rect`}
278 |                     y={yScale(messageIdx)}
279 |                     x={xScale(session_id)}
280 |                     width={rectWidth}
281 |                     height={rectHeight}
282 |                     rx={2}
283 |                     ry={2}
284 |                     className={`stroke-[3px] hover:stroke-[4px] ${
285 |                       isNewMessage(
286 |                         message.timestamp,
287 |                         messageHistory.current_session_reset_from,
288 |                       )
289 |                         ? ""
290 |                         : "opacity-10"
291 |                     }`}
292 |                     style={{
293 |                       fill: getFill(
294 |                         message,
295 |                         colorField,
296 |                         message.timestamp === hoveredMessageId,
297 |                       ),
298 | 
299 |                       stroke: getFill(
300 |                         message,
301 |                         colorField,
302 |                         message.timestamp === hoveredMessageId,
303 |                       ),
304 |                     }}
305 |                   />
306 |                 </Tippy>
307 |               );
308 |             })}
309 |           </g>
310 |         ),
311 |       )}
312 |     </svg>
313 |   );
314 | };
315 | 
316 | export default MessageHistoryChart;
317 |

--------------------------------------------------------------------------------