This is a submission for the GitHub Copilot CLI Challenge
What I Built
Let me first explain what is Spoosh and why I create. I'm tired of writing fetcher for every endpoints and string based invalidation with RTK query, react-query, swr etc..
So I decide to create Spoosh(API toolkit) currently support React and Angular. Fully type safe, plugins driven, no magic string invalidation, end-to-end type safety with hono, elysia. You can check Here if you are interest.
Almost everything is complete but one thing is missing and that's Devtool to easily debug. Spoosh have so many plugins and I want to see exactly what the plugins are doing what they change, what effects they trigger etc. Then I saw this challenge ... Then OK let's give it a try and this is the end result ^_^
Requests View
This is main view. You see all API request your app make. Each request show method (GET, POST, etc), the path, how long it take, and status see all detail on right side. Very easy to spot slow request or error.
Plugin Flows
This one I'm most proud of. Spoosh run many plugin - cache, retry, optimistic, etc. But which one run first? What data it change?Before I just guess. Now I can see exact order plugin run, what data look like before and after each step. If something wrong, I know exactly which plugin cause it.
State Manager View
Cache is hard to debug. "Is my data cached?" "Why it not update?" Now I just open state view and see everything - all cache entry, how many component subscribe to it, is it fresh or stale.
Import View
Sometimes bug only happen on client machine. I can't debug there. So I add export button - user export their request history as JSON file, send to me, I import and see exactly what happen. Like time travel debugging but for API.
Features
| Feature | Description |
|---|---|
| Request Timeline | See every request with timing, status, and duration |
| Plugin Steps | Watch middleware execution order with before/after diffs |
| State Inspector | Browse cache entries, subscriber counts, refetch or delete |
| Event Log | View invalidations, refetch triggers, custom plugin events |
| Status Badges | Pending, success, error, stale, fresh indicators |
| Filter & Search | Filter by operation type, search by path or query key |
| Keyboard Shortcuts | Navigate with keyboard (Esc, arrows, Ctrl+K, etc.) |
| Resizable Panel | Drag to resize sidebar and split panels |
| Theme Switching | Dark and light mode |
| Position Config | Button position (corners) and sidebar position (right/left/bottom) |
| Sensitive Headers | Toggle to reveal/hide auth headers with eye icon |
| Export/Import | Save traces as JSON, import for analysis |
| Settings | Max history size, auto-follow, show/hide passed plugins |
You can see all the crazy iteration and changes make by copilot and me in this PR - https://github.com/spooshdev/spoosh/pull/8
You can see the Devtool source code here - https://github.com/spooshdev/spoosh/tree/develop/packages/devtool
If you want to test the Devtool easily you can go to - https://demo.spoosh.dev
If you want to run locally clone the Spoosh repo and run react-ecommerce example
PLEASE CLICK THE DEVTOOL ICON AT THE BOTTOM RIGHT CORNER
My Experience with GitHub Copilot CLI
Spoosh is not a small project and it have a lot of plugins and so many features so creating Devtool is not an easy task. But with the help of Copilot CLI I can able to create devtool within 5 days, it save me at least 2-3 weeks of work.
How I use Copilot CLI?
- I use plan mode intensively and never accept the plan until I'm satisfied.
- Even with intensive plan, after some features, I open new session ask what's seems not correct and what need to change. (Use different model to review)
- Implement the suggested changes and move one.
- Always commit when something work or before the refactor.
- If LLM hallucinate or looping the same issue over and over again restore all the changes and create new session.
- Back to step 1.
Top comments (0)