CedarCopilot / CedarCopilot/cedar-OS
feature(dev-ex): dev debugger panel
- Dominant language
- TypeScript
- Stars
- 172
- Forks
- 19
- PR merge metrics
- No merged PRs in 30d
Description
This would be an absolutely amazing bonus for the dev experience: a dev debugger panel that allows the user to see the current state of things, giving them an inside look on states, agentInputContext, network requests & responses.
1. Currently in /examples/cedar-playground we have a basic v0 version of this exclusively for network calls and responses. However, it can be extended and made way better.
- [ ] Add streaming (streaming looks like the below)
- [ ] Add bonus rendering for
- [ ] Add the ability to "record" so we can go through how the state is being changed, how many times certain hooks/functions are invoked, etc.
- [ ] Add the ability to see and trace through stateSlice -> agentInputContext -> actual network sent.
- [ ] Let the panel be dragged around, like `floatingButton`
- [ ] Copy and paste a summary that can be used in an AI coding tool like cursor to debug code
- [ ] Copy and paste everything into a formatted message for any debug ticket
High level architecture that will help:
- https://docs.cedarcopilot.com/introduction/understanding-cedar-architecture-advanced
- https://docs.cedarcopilot.com/agent-backend-connection/custom-request
- https://docs.cedarcopilot.com/agent-backend-connection/custom-response-processing
I'd also look at the existing `debuggerSlice`, which has some of the basis needed for this
Here are some simple UI mockups I generated, but imo there's a lot of creativity and other things we can help with.
Contributor guide
Assessment
This issue has not been assessed yet.