CedarCopilot / CedarCopilot/cedar-OS

feature(dev-ex): dev debugger panel

Open
#117 1 comment 0 reactions 1 assignee Claimed by @Amumug View on GitHub
enhancement good first issue
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.

Image

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.

Image
Image
Image

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.