Conversation
…hitecture viz Adds a persistent left sidebar showing chronological event history with color-coded dots, expandable inline node state snapshots, auto-scroll, and toggle via E key or button. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Expanded events now show only what changed between the previous and current state using a recursive diff with old→new highlighting, making it easy to see exactly what each event mutated. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Reduce tree indentation and padding inside sidebar snapshots, allow flex-wrap on tree rows, and add overflow-x auto on the snapshot container so expanded diffs fit within the 280px sidebar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Clicks inside the snapshot container now call stopPropagation so expanding/collapsing tree nodes no longer bubbles up to the row's expand/collapse handler. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The timeline slider now fully restores simulation state when scrubbed. stateHistory[] stores JSON-serialized snapshots after each event, and restoreToEvent() deserializes them to rewind/replay nodes, connections, and counters. Event markers are aligned to slider positions using matching scale math and 7px thumb-width inset. Seek-then-act truncates future events. Play/cycleSpeed use seekTo() for actual state restore. Sidebar highlights the active event row. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Inline onclick/oninput handlers on timeline buttons and slider resolved `timeline` to `document.timeline` (Web Animations API DocumentTimeline) instead of the lexical `const timeline` object, silently breaking all slider and button interactions. Switch to addEventListener calls that correctly close over the lexical scope. Also fix Map mutation during iteration in restoreToEvent and guard seekTo against empty event log. Adds Playwright browser test verifying slider state replay end-to-end. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace right-click with short left-click for context menus on nodes, connections, and empty canvas. Dragging still works — menu only shows when mouse hasn't moved more than 3px between down and up. Active event row in the sidebar now auto-expands to show the state diff when stepping through the timeline, and uses orange highlight to stand out. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
restoreToEvent now saves current settled positions before deserializing the snapshot and re-applies them to nodes that still exist. This prevents nodes from jumping to their mid-force-simulation positions captured at event time. Newly appearing nodes use their original snapshot positions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Save eventLog, stateHistory, and timeline position to localStorage after each event (debounced 500ms) and on beforeunload. On page load, restore the full state including sidebar, timeline markers, and node positions. Loading a new scenario clears saved state via reset(). Silently handles quota-exceeded errors. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ment Adds toolbar buttons to clear the canvas (with confirmation), export simulation state as a downloadable JSON file, and import state via file upload or pasted JSON through a modal dialog. Refactors loadFromLocalStorage to reuse a shared importState() function. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Particles now render with a gradient trail that fades from transparent to the particle color, making it visually clear which direction a message is traveling along a connection. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
restoreToEvent() clears particles, so stepping/playing through the timeline never showed message animations. Now seekTo() spawns particles for replication and head-exchange events after restoring state, matching the live scenario behavior. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
peerbit-recording.mp4 |
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Next Steps to make it more 1:1 
|
|
Hello! This is really cool stuff. And appreciate the time you put into this. I wonder actually if this is a more of a general topic/problem where we want good debugging tools in general, I have also thought about a Chrome Tool that helps you understand what is going on behind the scenes when you are doing a Peerbit app in the browser. I am curious, what is the underlying intent of this PR, to better understand how things are connected? and works together? |
Appreciate it @marcus-pousette ! Yes a Chrome Tool (like the libp2p debugger) would be an incredible addition for debugging, like you said to understand exactly what's transpiring, maybe can even fork it?
Precisely, I was having issues with trying to figure out what was happening during race conditions/dropped messages when libp2p was connected so I was able to identify it was something on the peerbit side and it was happening in the shared-log. "stepping through" this even if crude allowed me to reason as to what could be going on. Obviously it is only a crude approximation and a chrome browser tool would be better able to assist myself (and the AI) exactly what is transpiring on two (or more nodes) to identify and fix flakes/race conditions. Lastly aside from that I think an OTEL output would be great to identify traces/logs en masse so that everything from a 1 or 2 node setup to a 100 node setup could easily be monitored and see exactly what registers where (when does the pub sub registration happen, stream etc) which itself could be cross correlated to the libp2p otel to see if the origin is peerbit (if so where) or on libp2p. AIs are very useful for analyzing logs in a self verify (& update) loop for anchoring (it's how I was able to trace the initial bug that was merged in), so I would highly recommend optional debugging/instrumentation so that the peerbit nodes actions/function calls can be surfaced, this way we can essentially automate the bug discovery and fix process :) Some unrelated but some amazing reverse engineering work that can serve as inspiration mentioned here, where Banteg reverse engineered a game from an exe only to produce a 1:1 accurate reconstruction, I mention this because it was done via allowing the LLM to introduce instrumentation/debugging into loops which allowed it to work autonomously in 8hrs all the way up to 32 hour sessions. Ideally for peerbit debugging one can just ensure there's enough instrumentation/observability and logging to allow for similar autonomous deflaking. |
2 participants
Summary
docs/architecture-viz.html) that simulates Peerbit nodes, connections, programs, shared logs, entries, and replication using D3.js force layout and Canvas 2D renderingTest plan
docs/architecture-viz.htmlin a browser and verify the simulation runsnode docs/test-timeline-playwright.mjsfor automated timeline tests🤖 Generated with Claude Code